@semcore/mini-chart 17.1.0-prerelease.3 → 17.2.0-prerelease.3

package/lib/es6/component/score/Line.js

@@ -8,26 +8,26 @@ import { createComponent, Component, Root, sstyled } from '@semcore/core';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import React from 'react';
 /*!__reshadow-styles__:"./line.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_xxmc2{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_xxmc2{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_xxmc2_gg_.__loading_xxmc2_gg_,.___SLineGauge_xxmc2_gg_.__loading_xxmc2_gg_,.___STrendBar_xxmc2_gg_.__loading_xxmc2_gg_,.___STrendLine_xxmc2_gg_.__loading_xxmc2_gg_{animation-name:pulse_xxmc2;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_xxmc2_gg_{height:8px;background-color:var(--base-bg-color_xxmc2, var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242)));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_xxmc2_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_xxmc2_gg_.__percent_xxmc2_gg_{width:var(--percent_xxmc2)}.___SLineSegmentItem_xxmc2_gg_.__color_xxmc2_gg_,.___SLineValue_xxmc2_gg_.__color_xxmc2_gg_{background-color:var(--color_xxmc2, var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219)))}.___SLineGauge_xxmc2_gg_.__segments_xxmc2_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_xxmc2_gg_,.___SLineGaugeSegment_xxmc2_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_xxmc2_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_xxmc2_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #fff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_xxmc2_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242));transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_xxmc2;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}", /*__inner_css_end__*/"xxmc2_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_fb95t_gg_.__loading_fb95t_gg_,.___SLineGauge_fb95t_gg_.__loading_fb95t_gg_,.___STrendBar_fb95t_gg_.__loading_fb95t_gg_,.___STrendLine_fb95t_gg_.__loading_fb95t_gg_{animation-name:pulse_fb95t;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_fb95t{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SLineGauge_fb95t_gg_{height:8px;background-color:var(--base-bg-color_fb95t,var(--intergalactic-chart-grid-bar-chart-base-bg,#f1f2f2));border-radius:var(--intergalactic-chart-rounded,2px);overflow:hidden;position:relative}.___SLineValue_fb95t_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded,2px) 0 0 var(--intergalactic-chart-rounded,2px)}.___SLineValue_fb95t_gg_.__percent_fb95t_gg_{width:var(--percent_fb95t)}.___SLineSegmentItem_fb95t_gg_.__color_fb95t_gg_,.___SLineValue_fb95t_gg_.__color_fb95t_gg_{background-color:var(--color_fb95t,var(--intergalactic-chart-palette-order-1,#666bdb))}.___SLineGauge_fb95t_gg_.__segments_fb95t_gg_{border-radius:var(--intergalactic-progress-bar-rounded,6px)}.___SAnimationLine_fb95t_gg_,.___SLineGaugeSegment_fb95t_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_fb95t_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_fb95t_gg_{height:8px;background:#0000;border-right:1px solid var(--intergalactic-chart-grid-border,#fff);box-sizing:initial}.___SAnimationLine_fb95t_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg,#f1f2f2);transition:all var(--intergalactic-duration-extra-slow,500) ease-in-out;animation-name:move-line_fb95t;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}@keyframes move-line_fb95t{0%{transform:translateX(0)}to{transform:translateX(100%)}}", /*__inner_css_end__*/"fb95t_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_xxmc2_gg_",
-  "_loading": "__loading_xxmc2_gg_",
-  "__SDonutContainer": "___SDonutContainer_xxmc2_gg_",
-  "__STrendLine": "___STrendLine_xxmc2_gg_",
-  "__STrendBar": "___STrendBar_xxmc2_gg_",
-  "@pulse": "pulse_xxmc2",
-  "__SLineValue": "___SLineValue_xxmc2_gg_",
-  "_percent": "__percent_xxmc2_gg_",
-  "--percent": "--percent_xxmc2",
-  "_color": "__color_xxmc2_gg_",
-  "__SLineSegmentItem": "___SLineSegmentItem_xxmc2_gg_",
-  "_segments": "__segments_xxmc2_gg_",
-  "__SLineGaugeSegment": "___SLineGaugeSegment_xxmc2_gg_",
-  "__SAnimationLine": "___SAnimationLine_xxmc2_gg_",
-  "@move-line": "move-line_xxmc2",
-  "--base-bg-color": "--base-bg-color_xxmc2",
-  "--color": "--color_xxmc2"
+  "__SLineGauge": "___SLineGauge_fb95t_gg_",
+  "_loading": "__loading_fb95t_gg_",
+  "__SDonutContainer": "___SDonutContainer_fb95t_gg_",
+  "__STrendLine": "___STrendLine_fb95t_gg_",
+  "__STrendBar": "___STrendBar_fb95t_gg_",
+  "@pulse": "pulse_fb95t",
+  "__SLineValue": "___SLineValue_fb95t_gg_",
+  "_percent": "__percent_fb95t_gg_",
+  "--percent": "--percent_fb95t",
+  "_color": "__color_fb95t_gg_",
+  "__SLineSegmentItem": "___SLineSegmentItem_fb95t_gg_",
+  "_segments": "__segments_fb95t_gg_",
+  "__SLineGaugeSegment": "___SLineGaugeSegment_fb95t_gg_",
+  "__SAnimationLine": "___SAnimationLine_fb95t_gg_",
+  "@move-line": "move-line_fb95t",
+  "--base-bg-color": "--base-bg-color_fb95t",
+  "--color": "--color_fb95t"
 });
 class LineRoot extends Component {
   getSegmentProps(segmentProps) {
@@ -124,6 +124,12 @@ function Segment(props) {
   }));
 }
 Segment.displayName = 'Segment';
+
+/**
+ * MiniCharts.ScoreLine
+ *
+ * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
+ */
 export const ScoreLine = createComponent(LineRoot, {
   Segment
 });

package/lib/es6/component/score/Line.js.map

@@ -1 +1 @@
-{"version":3,"file":"Line.js","names":["Box","Flex","createComponent","Component","Root","sstyled","resolveColorEnhance","React","style","_sstyled","insert","LineRoot","getSegmentProps","segmentProps","children","resolveColor","asProps","sum","Children","forEach","child","isValidElement","props","value","width","color","render","_ref","_ref5","SLineGauge","SLineValue","SAnimationLine","SLineGaugeSegment","SLineSegmentItem","styles","baseBgColor","loading","animate","undefined","_ref3","createElement","cn","_assignProps","segments","SegmentItems","i","_ref4","push","percent","_assignProps2","Boolean","length","_defineProperty","Segment","_ref2","arguments[0]","_ref6","_assignProps3","displayName","ScoreLine"],"sources":["../../../../src/component/score/Line.tsx"],"sourcesContent":["import { Box, Flex } from '@semcore/base-components';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport style from './line.shadow.css';\nimport type {\n  ScoreLineComponent,\n  ScoreLineGaugeProps,\n  SegmentProps,\n  InnerSegmentProps,\n} from './Line.types';\n\nclass LineRoot extends Component<ScoreLineGaugeProps, typeof LineRoot.enhance> {\n  static enhance = [resolveColorEnhance()] as const;\n  static displayName = 'ScoreLine';\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  getSegmentProps(segmentProps: SegmentProps) {\n    const { children, resolveColor } = this.asProps;\n\n    let sum = 0;\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement<SegmentProps>(child)) {\n        sum = sum + child.props.value;\n      }\n    });\n\n    const width = sum > 0 ? (100 * segmentProps.value) / sum : 0;\n\n    return {\n      'w': `${width}%`,\n      'use:color': resolveColor(segmentProps.color),\n    };\n  }\n\n  render() {\n    const SLineGauge = Root;\n    const SLineValue = Box;\n    const SAnimationLine = Box;\n    const SLineGaugeSegment = Flex;\n    const SLineSegmentItem = Box;\n    const {\n      value,\n      styles,\n      color = 'chart-palette-order-1',\n      baseBgColor,\n      resolveColor,\n      loading,\n      children,\n      Children,\n      animate,\n    } = this.asProps;\n\n    if (children !== undefined) {\n      return sstyled(styles)(\n        <SLineGauge render={Box} segments base-bg-color={resolveColor(baseBgColor)}>\n          <SLineGaugeSegment>\n            <Children />\n          </SLineGaugeSegment>\n          {animate && <SAnimationLine />}\n        </SLineGauge>,\n      );\n    }\n\n    const { segments } = this.asProps;\n\n    const SegmentItems = [];\n\n    if (segments) {\n      for (let i = 0; i < segments; i++) {\n        const width = `calc((100% - ${segments - 1}px) / ${segments})`;\n\n        SegmentItems.push(\n          sstyled(styles)(\n            <SLineSegmentItem\n              key={i}\n              color={i < value ? resolveColor(color) : undefined}\n              w={width}\n            />,\n          ),\n        );\n      }\n    }\n\n    let percent = `${value}%`;\n\n    if (segments) {\n      percent = `${(value / segments) * 100}%`;\n    }\n\n    return sstyled(styles)(\n      <SLineGauge render={Box} base-bg-color={resolveColor(baseBgColor)}>\n        {!loading && <SLineValue w={percent} color={resolveColor(color)} />}\n        {Boolean(SegmentItems.length) && <SLineGaugeSegment>{SegmentItems}</SLineGaugeSegment>}\n        {animate && <SAnimationLine />}\n      </SLineGauge>,\n    );\n  }\n}\n\nfunction Segment(props: InnerSegmentProps) {\n  const { styles, value } = props;\n  const SLineSegmentItem = Root;\n\n  if (!value) return null;\n\n  return sstyled(styles)(<SLineSegmentItem render={Box} />);\n}\nSegment.displayName = 'Segment';\n\nexport const ScoreLine = createComponent(LineRoot, {\n  Segment,\n}) as ScoreLineComponent;\n\nScoreLine.displayName = 'MiniChart.ScoreLine';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Line.js","names":["Box","Flex","createComponent","Component","Root","sstyled","resolveColorEnhance","React","style","_sstyled","insert","LineRoot","getSegmentProps","segmentProps","children","resolveColor","asProps","sum","Children","forEach","child","isValidElement","props","value","width","color","render","_ref","_ref5","SLineGauge","SLineValue","SAnimationLine","SLineGaugeSegment","SLineSegmentItem","styles","baseBgColor","loading","animate","undefined","_ref3","createElement","cn","_assignProps","segments","SegmentItems","i","_ref4","push","percent","_assignProps2","Boolean","length","_defineProperty","Segment","_ref2","arguments[0]","_ref6","_assignProps3","displayName","ScoreLine"],"sources":["../../../../src/component/score/Line.tsx"],"sourcesContent":["import { Box, Flex } from '@semcore/base-components';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport style from './line.shadow.css';\nimport type {\n  ScoreLineComponent,\n  ScoreLineGaugeProps,\n  SegmentProps,\n  InnerSegmentProps,\n  ScoreLineGaugeDefaultProps,\n} from './Line.types';\n\nclass LineRoot extends Component<\n  ScoreLineGaugeProps,\n  typeof LineRoot.enhance,\n  {},\n  {},\n  {},\n  ScoreLineGaugeDefaultProps\n> {\n  static enhance = [resolveColorEnhance()] as const;\n  static displayName = 'ScoreLine';\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  } as const;\n\n  getSegmentProps(segmentProps: SegmentProps) {\n    const { children, resolveColor } = this.asProps;\n\n    let sum = 0;\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement<SegmentProps>(child)) {\n        sum = sum + child.props.value;\n      }\n    });\n\n    const width = sum > 0 ? (100 * segmentProps.value) / sum : 0;\n\n    return {\n      'w': `${width}%`,\n      'use:color': resolveColor(segmentProps.color),\n    };\n  }\n\n  render() {\n    const SLineGauge = Root;\n    const SLineValue = Box;\n    const SAnimationLine = Box;\n    const SLineGaugeSegment = Flex;\n    const SLineSegmentItem = Box;\n    const {\n      value,\n      styles,\n      color = 'chart-palette-order-1',\n      baseBgColor,\n      resolveColor,\n      loading,\n      children,\n      Children,\n      animate,\n    } = this.asProps;\n\n    if (children !== undefined) {\n      return sstyled(styles)(\n        <SLineGauge render={Box} segments base-bg-color={resolveColor(baseBgColor)}>\n          <SLineGaugeSegment>\n            <Children />\n          </SLineGaugeSegment>\n          {animate && <SAnimationLine />}\n        </SLineGauge>,\n      );\n    }\n\n    const { segments } = this.asProps;\n\n    const SegmentItems = [];\n\n    if (segments) {\n      for (let i = 0; i < segments; i++) {\n        const width = `calc((100% - ${segments - 1}px) / ${segments})`;\n\n        SegmentItems.push(\n          sstyled(styles)(\n            <SLineSegmentItem\n              key={i}\n              color={i < value ? resolveColor(color) : undefined}\n              w={width}\n            />,\n          ),\n        );\n      }\n    }\n\n    let percent = `${value}%`;\n\n    if (segments) {\n      percent = `${(value / segments) * 100}%`;\n    }\n\n    return sstyled(styles)(\n      <SLineGauge render={Box} base-bg-color={resolveColor(baseBgColor)}>\n        {!loading && <SLineValue w={percent} color={resolveColor(color)} />}\n        {Boolean(SegmentItems.length) && <SLineGaugeSegment>{SegmentItems}</SLineGaugeSegment>}\n        {animate && <SAnimationLine />}\n      </SLineGauge>,\n    );\n  }\n}\n\nfunction Segment(props: InnerSegmentProps) {\n  const { styles, value } = props;\n  const SLineSegmentItem = Root;\n\n  if (!value) return null;\n\n  return sstyled(styles)(<SLineSegmentItem render={Box} />);\n}\nSegment.displayName = 'Segment';\n\n/**\n * MiniCharts.ScoreLine\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const ScoreLine = createComponent<\n  ScoreLineComponent,\n  typeof LineRoot\n>(LineRoot, { Segment });\n\nScoreLine.displayName = 'MiniChart.ScoreLine';\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/component/score/Line.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Line.types.js","names":[],"sources":["../../../../src/component/score/Line.types.ts"],"sourcesContent":["import type { BoxProps, Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport type resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport type React from 'react';\n\nimport type { CommonScoreProps } from './Score';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n  ? Acc[number]\n  : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\nexport type SegmentColor = `chart-palette-order-${Range<1, 24>}`;\n\nexport type SegmentProps = {\n  value: number;\n  /**\n   * Color of value\n   */\n  color: SegmentColor;\n};\n\ntype SegmentComponent = React.FC<SegmentProps>;\n\nexport type InnerSegmentProps = SegmentProps & {\n  styles: React.DetailedHTMLProps<React.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>;\n};\n\ntype ValuedScoreProps = {\n  /**\n   * Value of score (in percents from 0 to 100) or count of selected segments (for Line with segments)\n   */\n  value: number;\n  /**\n   * Color of value\n   */\n  color?: SegmentColor;\n  /**\n   * Count of line segments\n   */\n  segments?: number;\n  /**\n   * We don't accept children in this way\n   */\n  children?: never;\n};\n\ntype CustomRenderScoreProps = {\n  children: SegmentComponent[];\n};\n\nexport type ScoreLineGaugeProps = BoxProps &\n  Intergalactic.InternalTypings.EfficientOmit<CommonScoreProps, 'value' | 'color'> &\n  (ValuedScoreProps | CustomRenderScoreProps);\n\nexport type Enhances = [() => {\n  resolveColor: ReturnType<typeof resolveColorEnhance>;\n}];\n\nexport type ScoreLineComponent = Intergalactic.Component<'svg', ScoreLineGaugeProps, {}, Enhances> & {\n  Segment: Intergalactic.Component<typeof Box, SegmentProps>;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"Line.types.js","names":[],"sources":["../../../../src/component/score/Line.types.ts"],"sourcesContent":["import type { BoxProps, Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport type resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport type React from 'react';\n\nimport type { CommonScoreProps } from './Score';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n  ? Acc[number]\n  : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\nexport type SegmentColor = `chart-palette-order-${Range<1, 24>}`;\n\nexport type SegmentProps = {\n  value: number;\n  /**\n   * Color of value\n   */\n  color: SegmentColor;\n};\n\ntype SegmentComponent = React.FC<SegmentProps>;\n\nexport type InnerSegmentProps = SegmentProps & {\n  styles: React.DetailedHTMLProps<React.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>;\n};\n\ntype ValuedScoreProps = {\n  /**\n   * Value of score (in percents from 0 to 100) or count of selected segments (for Line with segments)\n   */\n  value: number;\n  /**\n   * Color of value\n   */\n  color?: SegmentColor;\n  /**\n   * Count of line segments\n   */\n  segments?: number;\n  /**\n   * We don't accept children in this way\n   */\n  children?: never;\n};\n\ntype CustomRenderScoreProps = {\n  value?: never;\n  segments?: never;\n  color?: never;\n  children: SegmentComponent[];\n};\n\nexport type ScoreLineGaugeProps = BoxProps &\n  Intergalactic.InternalTypings.EfficientOmit<CommonScoreProps, 'value' | 'color'> &\n  (ValuedScoreProps | CustomRenderScoreProps);\n\nexport type ScoreLineGaugeDefaultProps = {\n  animate: true;\n};\n\nexport type Enhances = [() => {\n  resolveColor: ReturnType<typeof resolveColorEnhance>;\n}];\n\nexport type ScoreLineComponent = Intergalactic.Component<'svg', ScoreLineGaugeProps, {}, Enhances> & {\n  Segment: Intergalactic.Component<typeof Box, SegmentProps>;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/es6/component/trend/Bar.js

@@ -8,15 +8,15 @@ import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEn
 import React from 'react';
 import { Trend } from './Trend';
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_9xybf{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_9xybf_gg_.__loading_9xybf_gg_,.___SLineGauge_9xybf_gg_.__loading_9xybf_gg_,.___STrendBar_9xybf_gg_.__loading_9xybf_gg_,.___STrendLine_9xybf_gg_.__loading_9xybf_gg_{animation-name:pulse_9xybf;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"9xybf_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_1b4gu_gg_.__loading_1b4gu_gg_,.___SLineGauge_1b4gu_gg_.__loading_1b4gu_gg_,.___STrendBar_1b4gu_gg_.__loading_1b4gu_gg_,.___STrendLine_1b4gu_gg_.__loading_1b4gu_gg_{animation-name:pulse_1b4gu;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_1b4gu{0%{opacity:1}50%{opacity:.4}to{opacity:1}}", /*__inner_css_end__*/"1b4gu_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_9xybf_gg_",
-  "_loading": "__loading_9xybf_gg_",
-  "__SDonutContainer": "___SDonutContainer_9xybf_gg_",
-  "__STrendLine": "___STrendLine_9xybf_gg_",
-  "__STrendBar": "___STrendBar_9xybf_gg_",
-  "@pulse": "pulse_9xybf"
+  "__SLineGauge": "___SLineGauge_1b4gu_gg_",
+  "_loading": "__loading_1b4gu_gg_",
+  "__SDonutContainer": "___SDonutContainer_1b4gu_gg_",
+  "__STrendLine": "___STrendLine_1b4gu_gg_",
+  "__STrendBar": "___STrendBar_1b4gu_gg_",
+  "@pulse": "pulse_1b4gu"
 });
 class TrendBarRoot extends Trend {
   get defaultData() {
@@ -87,6 +87,12 @@ class TrendBarRoot extends Trend {
     })));
   }
 }
+
+/**
+ * MiniCharts.TrendBar
+ *
+ * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
+ */
 _defineProperty(TrendBarRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(TrendBarRoot, "style", style);
 _defineProperty(TrendBarRoot, "defaultProps", {
@@ -94,6 +100,12 @@ _defineProperty(TrendBarRoot, "defaultProps", {
 });
 export const TrendBar = createComponent(TrendBarRoot);
 TrendBar.displayName = 'MiniChart.TrendBar';
+
+/**
+ * MiniCharts.TrendHistogram
+ *
+ * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
+ */
 export const TrendHistogram = createComponent(TrendBarRoot, {}, {
   enhancements: [() => {
     return {

package/lib/es6/component/trend/Bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.js","names":["Box","createComponent","assignProps","Root","sstyled","extractAriaProps","resolveColorEnhance","React","Trend","style","_sstyled","insert","TrendBarRoot","defaultData","value","data","loading","asProps","render","_ref","_ref2","STrendBar","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","__excludeProps","extractedAriaProps","createElement","cn","_assignProps","containerRef","svgWidth","svgHeight","map","barItem","index","color","key","x","y","defaultHeight","width","height","fill","attributeName","values","dur","_defineProperty","TrendBar","displayName","TrendHistogram","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Bar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\nimport style from '../skeleton/skeleton.shadow.css';\n\ntype BarItem = {\n  /**\n   * Value\n   */\n  value: number;\n  /**\n   * Color of value\n   */\n  color?: string;\n};\n\nexport type TrendBarProps = CommonTrendProps & {\n  /**\n   * Data to bar chart\n   */\n  data: BarItem[];\n};\n\nclass TrendBarRoot extends Trend<TrendBarProps, typeof TrendBarRoot.enhance> {\n  static enhance = [resolveColorEnhance()] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  get defaultData(): BarItem[] {\n    return [{ value: 20 }, { value: 80 }, { value: 45 }, { value: 10 }];\n  }\n\n  get data(): BarItem[] {\n    const { data, loading } = this.asProps;\n\n    if (loading) {\n      return this.defaultData;\n    }\n\n    return data;\n  }\n\n  render() {\n    const STrendBar = Root;\n    const { styles, resolveColor, isHistogram, animate, loading } = this.asProps;\n    const step = this.defaultWidth / this.data.length;\n    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <STrendBar render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n        <svg\n          width='100%'\n          height='100%'\n          viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n          role='img'\n          {...extractedAriaProps}\n        >\n          {this.data.map((barItem, index) => {\n            let color = resolveColor('chart-palette-order-other-data');\n\n            if (barItem.color) {\n              color = resolveColor(barItem.color);\n            }\n\n            return (\n              <rect\n                key={index}\n                x={step * index}\n                y={this.defaultHeight - barItem.value}\n                width={isHistogram ? step : step * 0.8}\n                height={barItem.value}\n                fill={color}\n              >\n                {animate && !loading && (\n                  <animate\n                    attributeName='y'\n                    values={`${this.defaultHeight};${this.defaultHeight - barItem.value}`}\n                    dur='500ms'\n                  />\n                )}\n              </rect>\n            );\n          })}\n        </svg>\n      </STrendBar>,\n    );\n  }\n}\n\nexport const TrendBar = createComponent<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>(TrendBarRoot);\n\nTrendBar.displayName = 'MiniChart.TrendBar';\n\nexport const TrendHistogram = createComponent<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>(\n  TrendBarRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: TrendBarProps) => {\n            return assignProps(props, { isHistogram: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nTrendHistogram.displayName = 'MiniChart.TrendHistogram';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Bar.js","names":["Box","createComponent","assignProps","Root","sstyled","extractAriaProps","resolveColorEnhance","React","Trend","style","_sstyled","insert","TrendBarRoot","defaultData","value","data","loading","asProps","render","_ref","_ref2","STrendBar","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","__excludeProps","extractedAriaProps","createElement","cn","_assignProps","containerRef","svgWidth","svgHeight","map","barItem","index","color","key","x","y","defaultHeight","width","height","fill","attributeName","values","dur","_defineProperty","TrendBar","displayName","TrendHistogram","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Bar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\nimport style from '../skeleton/skeleton.shadow.css';\n\ntype BarItem = {\n  /**\n   * Value\n   */\n  value: number;\n  /**\n   * Color of value\n   */\n  color?: string;\n};\n\nexport type TrendBarProps = CommonTrendProps & {\n  /**\n   * Data to bar chart\n   */\n  data: BarItem[];\n};\n\ntype TrendBarComponent = Intergalactic.Component<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>;\n\ntype TrendBarDefaultProps = {\n  animate: true;\n};\n\nclass TrendBarRoot extends Trend<TrendBarProps, typeof TrendBarRoot.enhance, TrendBarDefaultProps> {\n  static enhance = [resolveColorEnhance()] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  } as const;\n\n  get defaultData(): BarItem[] {\n    return [{ value: 20 }, { value: 80 }, { value: 45 }, { value: 10 }];\n  }\n\n  get data(): BarItem[] {\n    const { data, loading } = this.asProps;\n\n    if (loading) {\n      return this.defaultData;\n    }\n\n    return data;\n  }\n\n  render() {\n    const STrendBar = Root;\n    const { styles, resolveColor, isHistogram, animate, loading } = this.asProps;\n    const step = this.defaultWidth / this.data.length;\n    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <STrendBar render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n        <svg\n          width='100%'\n          height='100%'\n          viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n          role='img'\n          {...extractedAriaProps}\n        >\n          {this.data.map((barItem, index) => {\n            let color = resolveColor('chart-palette-order-other-data');\n\n            if (barItem.color) {\n              color = resolveColor(barItem.color);\n            }\n\n            return (\n              <rect\n                key={index}\n                x={step * index}\n                y={this.defaultHeight - barItem.value}\n                width={isHistogram ? step : step * 0.8}\n                height={barItem.value}\n                fill={color}\n              >\n                {animate && !loading && (\n                  <animate\n                    attributeName='y'\n                    values={`${this.defaultHeight};${this.defaultHeight - barItem.value}`}\n                    dur='500ms'\n                  />\n                )}\n              </rect>\n            );\n          })}\n        </svg>\n      </STrendBar>,\n    );\n  }\n}\n\n/**\n * MiniCharts.TrendBar\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const TrendBar = createComponent<\n  TrendBarComponent,\n  typeof TrendBarRoot\n>(TrendBarRoot);\n\nTrendBar.displayName = 'MiniChart.TrendBar';\n\n/**\n * MiniCharts.TrendHistogram\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const TrendHistogram = createComponent<\n  TrendBarComponent,\n  typeof TrendBarRoot\n>(\n  TrendBarRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: TrendBarProps) => {\n            return assignProps(props, { isHistogram: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nTrendHistogram.displayName = 'MiniChart.TrendHistogram';\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/component/trend/Line.js

@@ -9,15 +9,15 @@ import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
 import React from 'react';
 import { Trend } from './Trend';
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_9xybf{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_9xybf_gg_.__loading_9xybf_gg_,.___SLineGauge_9xybf_gg_.__loading_9xybf_gg_,.___STrendBar_9xybf_gg_.__loading_9xybf_gg_,.___STrendLine_9xybf_gg_.__loading_9xybf_gg_{animation-name:pulse_9xybf;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"9xybf_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_1b4gu_gg_.__loading_1b4gu_gg_,.___SLineGauge_1b4gu_gg_.__loading_1b4gu_gg_,.___STrendBar_1b4gu_gg_.__loading_1b4gu_gg_,.___STrendLine_1b4gu_gg_.__loading_1b4gu_gg_{animation-name:pulse_1b4gu;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_1b4gu{0%{opacity:1}50%{opacity:.4}to{opacity:1}}", /*__inner_css_end__*/"1b4gu_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_9xybf_gg_",
-  "_loading": "__loading_9xybf_gg_",
-  "__SDonutContainer": "___SDonutContainer_9xybf_gg_",
-  "__STrendLine": "___STrendLine_9xybf_gg_",
-  "__STrendBar": "___STrendBar_9xybf_gg_",
-  "@pulse": "pulse_9xybf"
+  "__SLineGauge": "___SLineGauge_1b4gu_gg_",
+  "_loading": "__loading_1b4gu_gg_",
+  "__SDonutContainer": "___SDonutContainer_1b4gu_gg_",
+  "__STrendLine": "___STrendLine_1b4gu_gg_",
+  "__STrendBar": "___STrendBar_1b4gu_gg_",
+  "@pulse": "pulse_1b4gu"
 });
 class TrendLineRoot extends Trend {
   get defaultData() {
@@ -121,6 +121,12 @@ class TrendLineRoot extends Trend {
     }))))));
   }
 }
+
+/**
+ * MiniCharts.TrendLine
+ *
+ * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
+ */
 _defineProperty(TrendLineRoot, "enhance", [resolveColorEnhance(), uniqueIDEnhancement()]);
 _defineProperty(TrendLineRoot, "style", style);
 _defineProperty(TrendLineRoot, "defaultProps", {
@@ -128,6 +134,12 @@ _defineProperty(TrendLineRoot, "defaultProps", {
 });
 export const TrendLine = createComponent(TrendLineRoot);
 TrendLine.displayName = 'MiniChart.TrendLine';
+
+/**
+ * MiniCharts.TrendArea
+ *
+ * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
+ */
 export const TrendArea = createComponent(TrendLineRoot, {}, {
   enhancements: [() => {
     return {

package/lib/es6/component/trend/Line.js.map

@@ -1 +1 @@
-{"version":3,"file":"Line.js","names":["Box","createComponent","assignProps","Root","sstyled","extractAriaProps","resolveColorEnhance","uniqueIDEnhancement","React","Trend","style","_sstyled","insert","TrendLineRoot","defaultData","lastPointRadius","asProps","data","loading","svgWidth","lastPointColor","defaultWidth","svgHeight","defaultHeight","color","resolveColor","render","_ref","_ref2","STrendLine","uid","withArea","animate","styles","points","length","step","i","push","__excludeProps","extractedAriaProps","createElement","cn","_assignProps","containerRef","join","_defineProperty","TrendLine","displayName","TrendArea","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Line.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\nimport style from '../skeleton/skeleton.shadow.css';\n\nexport type TrendLineProps = CommonTrendProps & {\n  /**\n   * List of values\n   */\n  data: number[];\n\n  /**\n   * Color of line\n   */\n  color?: string;\n\n  /**\n   * Color of last point in chart\n   */\n  lastPointColor?: string;\n\n  /**\n   * Radius for last point item\n   */\n  lastPointRadius?: number;\n};\n\nclass TrendLineRoot extends Trend<TrendLineProps, typeof TrendLineRoot.enhance> {\n  static enhance = [resolveColorEnhance(), uniqueIDEnhancement()] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  get defaultData(): number[] {\n    return [15, 70, 20, 85, 20];\n  }\n\n  get lastPointRadius(): number {\n    return this.asProps.lastPointRadius ?? 6;\n  }\n\n  get data(): number[] {\n    const { data, loading } = this.asProps;\n\n    if (loading) {\n      return this.defaultData;\n    }\n\n    return data;\n  }\n\n  override get svgWidth(): number {\n    return this.asProps.lastPointColor\n      ? this.defaultWidth + this.lastPointRadius\n      : this.defaultWidth;\n  }\n\n  override get svgHeight(): number {\n    return this.asProps.lastPointColor\n      ? this.defaultHeight + this.lastPointRadius\n      : this.defaultHeight;\n  }\n\n  get color() {\n    const { resolveColor, color = 'chart-palette-order-1', loading } = this.asProps;\n\n    if (loading) {\n      return resolveColor('skeleton-bg');\n    }\n\n    return resolveColor(color);\n  }\n\n  render() {\n    const STrendLine = Root;\n    const { uid, withArea, animate, lastPointColor, resolveColor, loading, styles } = this.asProps;\n\n    const points: string[] = [];\n    const length = this.data.length;\n    const step = this.defaultWidth / (length - 1);\n\n    for (let i = 0; i < length; i++) {\n      points.push(`${step * i},${this.defaultHeight - this.data[i]}`);\n    }\n    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <STrendLine render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n        <svg\n          width='100%'\n          height='100%'\n          viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n          role='img'\n          {...extractedAriaProps}\n        >\n          <polyline\n            points={points.join(' ')}\n            stroke={this.color}\n            strokeWidth='4'\n            fill='none'\n            clipPath={`url(#${uid})`}\n          />\n          {withArea && (\n            <polyline\n              points={`0,${this.defaultHeight} ${points.join(' ')} ${this.defaultWidth},${\n                this.defaultHeight\n              }`}\n              fill={this.color}\n              fillOpacity={0.2}\n              clipPath={`url(#${uid})`}\n            />\n          )}\n          {lastPointColor && !loading && (\n            <circle\n              cx={step * (length - 1)}\n              cy={this.defaultHeight - this.data[length - 1]}\n              r={this.lastPointRadius}\n              fill={resolveColor(lastPointColor)}\n              stroke={resolveColor('chart-grid-border')}\n              strokeWidth={4}\n              clipPath={`url(#${uid})`}\n            />\n          )}\n\n          {animate && !loading && (\n            <clipPath id={uid}>\n              <rect x='0' y='0' width='100%' height='100%' fill='black'>\n                <animate dur='500ms' attributeName='width' values='0;100%' />\n              </rect>\n            </clipPath>\n          )}\n        </svg>\n      </STrendLine>,\n    );\n  }\n}\n\nexport const TrendLine = createComponent<'svg', TrendLineProps, {}, typeof TrendLineRoot.enhance>(TrendLineRoot);\n\nTrendLine.displayName = 'MiniChart.TrendLine';\n\nexport const TrendArea = createComponent<'svg', TrendLineProps, {}, typeof TrendLineRoot.enhance>(\n  TrendLineRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: TrendLineProps) => {\n            return assignProps(props, { withArea: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nTrendArea.displayName = 'MiniChart.TrendArea';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Line.js","names":["Box","createComponent","assignProps","Root","sstyled","extractAriaProps","resolveColorEnhance","uniqueIDEnhancement","React","Trend","style","_sstyled","insert","TrendLineRoot","defaultData","lastPointRadius","asProps","data","loading","svgWidth","lastPointColor","defaultWidth","svgHeight","defaultHeight","color","resolveColor","render","_ref","_ref2","STrendLine","uid","withArea","animate","styles","points","length","step","i","push","__excludeProps","extractedAriaProps","createElement","cn","_assignProps","containerRef","join","_defineProperty","TrendLine","displayName","TrendArea","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Line.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\nimport style from '../skeleton/skeleton.shadow.css';\n\nexport type TrendLineProps = CommonTrendProps & {\n  /**\n   * List of values\n   */\n  data: number[];\n\n  /**\n   * Color of line\n   */\n  color?: string;\n\n  /**\n   * Color of last point in chart\n   */\n  lastPointColor?: string;\n\n  /**\n   * Radius for last point item\n   */\n  lastPointRadius?: number;\n};\n\ntype TrendLineComponent = Intergalactic.Component<'svg', TrendLineProps, {}, typeof TrendLineRoot.enhance>;\n\ntype TrendLineDefaultProps = {\n  animate: true;\n};\n\nclass TrendLineRoot extends Trend<TrendLineProps, typeof TrendLineRoot.enhance, TrendLineDefaultProps> {\n  static enhance = [resolveColorEnhance(), uniqueIDEnhancement()] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  } as const;\n\n  get defaultData(): number[] {\n    return [15, 70, 20, 85, 20];\n  }\n\n  get lastPointRadius(): number {\n    return this.asProps.lastPointRadius ?? 6;\n  }\n\n  get data(): number[] {\n    const { data, loading } = this.asProps;\n\n    if (loading) {\n      return this.defaultData;\n    }\n\n    return data;\n  }\n\n  override get svgWidth(): number {\n    return this.asProps.lastPointColor\n      ? this.defaultWidth + this.lastPointRadius\n      : this.defaultWidth;\n  }\n\n  override get svgHeight(): number {\n    return this.asProps.lastPointColor\n      ? this.defaultHeight + this.lastPointRadius\n      : this.defaultHeight;\n  }\n\n  get color() {\n    const { resolveColor, color = 'chart-palette-order-1', loading } = this.asProps;\n\n    if (loading) {\n      return resolveColor('skeleton-bg');\n    }\n\n    return resolveColor(color);\n  }\n\n  render() {\n    const STrendLine = Root;\n    const { uid, withArea, animate, lastPointColor, resolveColor, loading, styles } = this.asProps;\n\n    const points: string[] = [];\n    const length = this.data.length;\n    const step = this.defaultWidth / (length - 1);\n\n    for (let i = 0; i < length; i++) {\n      points.push(`${step * i},${this.defaultHeight - this.data[i]}`);\n    }\n    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <STrendLine render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n        <svg\n          width='100%'\n          height='100%'\n          viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n          role='img'\n          {...extractedAriaProps}\n        >\n          <polyline\n            points={points.join(' ')}\n            stroke={this.color}\n            strokeWidth='4'\n            fill='none'\n            clipPath={`url(#${uid})`}\n          />\n          {withArea && (\n            <polyline\n              points={`0,${this.defaultHeight} ${points.join(' ')} ${this.defaultWidth},${\n                this.defaultHeight\n              }`}\n              fill={this.color}\n              fillOpacity={0.2}\n              clipPath={`url(#${uid})`}\n            />\n          )}\n          {lastPointColor && !loading && (\n            <circle\n              cx={step * (length - 1)}\n              cy={this.defaultHeight - this.data[length - 1]}\n              r={this.lastPointRadius}\n              fill={resolveColor(lastPointColor)}\n              stroke={resolveColor('chart-grid-border')}\n              strokeWidth={4}\n              clipPath={`url(#${uid})`}\n            />\n          )}\n\n          {animate && !loading && (\n            <clipPath id={uid}>\n              <rect x='0' y='0' width='100%' height='100%' fill='black'>\n                <animate dur='500ms' attributeName='width' values='0;100%' />\n              </rect>\n            </clipPath>\n          )}\n        </svg>\n      </STrendLine>,\n    );\n  }\n}\n\n/**\n * MiniCharts.TrendLine\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const TrendLine = createComponent<TrendLineComponent, typeof TrendLineRoot>(TrendLineRoot);\n\nTrendLine.displayName = 'MiniChart.TrendLine';\n\n/**\n * MiniCharts.TrendArea\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const TrendArea = createComponent<TrendLineComponent, typeof TrendLineRoot>(\n  TrendLineRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: TrendLineProps) => {\n            return assignProps(props, { withArea: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nTrendArea.displayName = 'MiniChart.TrendArea';\n"],"mappings":";;;AAAA,SAASA,GAAG,QAAQ,0BAA0B;AAE9C,SAASC,eAAe,EAAEC,WAAW,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AAC3E,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,mBAAmB,MAAM,sDAAsD;AACtF,OAAOC,mBAAmB,MAAM,kCAAkC;AAClE,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAA+B,SAAS;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AA+BvD,MAAMC,aAAa,SAASJ,KAAK,CAAsE;EASrG,IAAIK,WAAWA,CAAA,EAAa;IAC1B,OAAO,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;EAC7B;EAEA,IAAIC,eAAeA,CAAA,EAAW;IAC5B,OAAO,IAAI,CAACC,OAAO,CAACD,eAAe,IAAI,CAAC;EAC1C;EAEA,IAAIE,IAAIA,CAAA,EAAa;IACnB,MAAM;MAAEA,IAAI;MAAEC;IAAQ,CAAC,GAAG,IAAI,CAACF,OAAO;IAEtC,IAAIE,OAAO,EAAE;MACX,OAAO,IAAI,CAACJ,WAAW;IACzB;IAEA,OAAOG,IAAI;EACb;EAEA,IAAaE,QAAQA,CAAA,EAAW;IAC9B,OAAO,IAAI,CAACH,OAAO,CAACI,cAAc,GAC9B,IAAI,CAACC,YAAY,GAAG,IAAI,CAACN,eAAe,GACxC,IAAI,CAACM,YAAY;EACvB;EAEA,IAAaC,SAASA,CAAA,EAAW;IAC/B,OAAO,IAAI,CAACN,OAAO,CAACI,cAAc,GAC9B,IAAI,CAACG,aAAa,GAAG,IAAI,CAACR,eAAe,GACzC,IAAI,CAACQ,aAAa;EACxB;EAEA,IAAIC,KAAKA,CAAA,EAAG;IACV,MAAM;MAAEC,YAAY;MAAED,KAAK,GAAG,uBAAuB;MAAEN;IAAQ,CAAC,GAAG,IAAI,CAACF,OAAO;IAE/E,IAAIE,OAAO,EAAE;MACX,OAAOO,YAAY,CAAC,aAAa,CAAC;IACpC;IAEA,OAAOA,YAAY,CAACD,KAAK,CAAC;EAC5B;EAEAE,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAX,OAAA;MAAAY,KAAA;IACP,MAAMC,UAAU,GAaM7B,GAAG;IAZzB,MAAM;MAAE8B,GAAG;MAAEC,QAAQ;MAAEC,OAAO;MAAEZ,cAAc;MAAEK,YAAY;MAAEP,OAAO;MAAEe;IAAO,CAAC,GAAG,IAAI,CAACjB,OAAO;IAE9F,MAAMkB,MAAgB,GAAG,EAAE;IAC3B,MAAMC,MAAM,GAAG,IAAI,CAAClB,IAAI,CAACkB,MAAM;IAC/B,MAAMC,IAAI,GAAG,IAAI,CAACf,YAAY,IAAIc,MAAM,GAAG,CAAC,CAAC;IAE7C,KAAK,IAAIE,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,MAAM,EAAEE,CAAC,EAAE,EAAE;MAC/BH,MAAM,CAACI,IAAI,CAAC,GAAGF,IAAI,GAAGC,CAAC,IAAI,IAAI,CAACd,aAAa,GAAG,IAAI,CAACN,IAAI,CAACoB,CAAC,CAAC,EAAE,CAAC;IACjE;IACA,MAAM;MAAEE,cAAc;MAAEC;IAAmB,CAAC,GAAGnC,gBAAgB,CAAC,IAAI,CAACW,OAAO,CAAC;IAE7E,OAAAY,KAAA,GAAOxB,OAAO,CAAC6B,MAAM,CAAC,eACpBzB,KAAA,CAAAiC,aAAA,CAACZ,UAAU,EAAAD,KAAA,CAAAc,EAAA;MAAA,GAAAC,YAAA;QAAA,OAAmB,IAAI,CAACC,YAAY;QAAA,kBAAkB,CAAC,MAAM,EAAE,GAAGL,cAAc;MAAC,GAAAZ,IAAA;IAAA,iBAC1FnB,KAAA,CAAAiC,aAAA,QAAAb,KAAA,CAAAc,EAAA;MAAA,SACQ,MAAM;MAAA,UACL,MAAM;MAAA,WACJ,OAAO,IAAI,CAACvB,QAAQ,IAAI,IAAI,CAACG,SAAS,EAAE;MAAA,QAC5C,KAAK;MAAA,GACNkB;IAAkB,iBAEtBhC,KAAA,CAAAiC,aAAA,aAAAb,KAAA,CAAAc,EAAA;MAAA,UACUR,MAAM,CAACW,IAAI,CAAC,GAAG,CAAC;MAAA,UAChB,IAAI,CAACrB,KAAK;MAAA,eACN,GAAG;MAAA,QACV,MAAM;MAAA,YACD,QAAQM,GAAG;IAAG,EACzB,CAAC,EACDC,QAAQ,iBACPvB,KAAA,CAAAiC,aAAA,aAAAb,KAAA,CAAAc,EAAA;MAAA,UACU,KAAK,IAAI,CAACnB,aAAa,IAAIW,MAAM,CAACW,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAACxB,YAAY,IACtE,IAAI,CAACE,aAAa,EAClB;MAAA,QACI,IAAI,CAACC,KAAK;MAAA,eACH,GAAG;MAAA,YACN,QAAQM,GAAG;IAAG,EACzB,CACF,EACAV,cAAc,IAAI,CAACF,OAAO,iBACzBV,KAAA,CAAAiC,aAAA,WAAAb,KAAA,CAAAc,EAAA;MAAA,MACMN,IAAI,IAAID,MAAM,GAAG,CAAC,CAAC;MAAA,MACnB,IAAI,CAACZ,aAAa,GAAG,IAAI,CAACN,IAAI,CAACkB,MAAM,GAAG,CAAC,CAAC;MAAA,KAC3C,IAAI,CAACpB,eAAe;MAAA,QACjBU,YAAY,CAACL,cAAc,CAAC;MAAA,UAC1BK,YAAY,CAAC,mBAAmB,CAAC;MAAA,eAC5B,CAAC;MAAA,YACJ,QAAQK,GAAG;IAAG,EACzB,CACF,EAEAE,OAAO,IAAI,CAACd,OAAO,iBAClBV,KAAA,CAAAiC,aAAA,aAAAb,KAAA,CAAAc,EAAA;MAAA,MAAcZ;IAAG,iBACftB,KAAA,CAAAiC,aAAA,SAAAb,KAAA,CAAAc,EAAA;MAAA,KAAQ,GAAG;MAAA,KAAG,GAAG;MAAA,SAAO,MAAM;MAAA,UAAQ,MAAM;MAAA,QAAM;IAAO,iBACvDlC,KAAA,CAAAiC,aAAA,YAAAb,KAAA,CAAAc,EAAA;MAAA,OAAa,OAAO;MAAA,iBAAe,OAAO;MAAA,UAAQ;IAAQ,EAAE,CACxD,CACE,CAET,CACK,CAAC;EAEjB;AACF;;AAEA;AACA;AACA;AACA;AACA;AAJAI,eAAA,CAjHMjC,aAAa,aACA,CAACP,mBAAmB,CAAC,CAAC,EAAEC,mBAAmB,CAAC,CAAC,CAAC;AAAAuC,eAAA,CAD3DjC,aAAa,WAGFH,KAAK;AAAAoC,eAAA,CAHhBjC,aAAa,kBAKK;EACpBmB,OAAO,EAAE;AACX,CAAC;AA+GH,OAAO,MAAMe,SAAS,GAAG9C,eAAe,CAA2CY,aAAa,CAAC;AAEjGkC,SAAS,CAACC,WAAW,GAAG,qBAAqB;;AAE7C;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAGhD,eAAe,CACtCY,aAAa,EACb,CAAC,CAAC,EACF;EACEqC,YAAY,EAAE,CACZ,MAAM;IACJ,OAAO;MACLC,YAAY,EAAGC,KAAqB,IAAK;QACvC,OAAOlD,WAAW,CAACkD,KAAK,EAAE;UAAErB,QAAQ,EAAE;QAAK,CAAC,CAAC;MAC/C;IACF,CAAC;EACH,CAAC;AAEL,CACF,CAAC;AAEDkB,SAAS,CAACD,WAAW,GAAG,qBAAqB","ignoreList":[]}

package/lib/es6/component/trend/Trend.js.map

@@ -1 +1 @@
-{"version":3,"file":"Trend.js","names":["Component","React","Trend","constructor","args","_defineProperty","width","height","createRef","componentDidMount","setSizes","componentDidUpdate","prevProps","w","props","h","data","defaultWidth","state","defaultHeight","svgWidth","svgHeight","containerRef","current","boundingClientRect","getBoundingClientRect","setState"],"sources":["../../../../src/component/trend/Trend.tsx"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport { Component } from '@semcore/core';\nimport React from 'react';\n\nexport type CommonTrendProps = BoxProps & {\n  /**\n   * Flag to enable animate of charts\n   * @default true\n   */\n  animate?: boolean;\n\n  /**\n   * Flag to enable skeleton\n   * @default false\n   */\n  loading?: boolean;\n\n  /**\n   * Data for chart\n   */\n  data: any[];\n};\n\nexport abstract class Trend<\n  P extends CommonTrendProps,\n  E extends readonly ((...args: any[]) => any)[],\n> extends Component<P, E, Readonly<{}>, { width: number; height: number }> {\n  state = {\n    width: 200,\n    height: 100,\n  };\n\n  containerRef = React.createRef<HTMLDivElement>();\n\n  componentDidMount() {\n    this.setSizes();\n  }\n\n  componentDidUpdate(prevProps: P) {\n    if (\n      prevProps.w !== this.props.w ||\n      prevProps.h !== this.props.h ||\n      prevProps.data !== this.props.data\n    ) {\n      this.setSizes();\n    }\n  }\n\n  get defaultWidth(): number {\n    const { width, height } = this.state;\n\n    return (width / height) * this.defaultHeight;\n  }\n\n  get defaultHeight(): number {\n    return 100;\n  }\n\n  get svgWidth(): number {\n    return this.defaultWidth;\n  }\n\n  get svgHeight(): number {\n    return this.defaultHeight;\n  }\n\n  setSizes() {\n    if (this.containerRef.current) {\n      const boundingClientRect = this.containerRef.current.getBoundingClientRect();\n\n      const { width, height } = boundingClientRect;\n\n      if (width > 0 && height > 0) {\n        this.setState({ width, height });\n      }\n    }\n  }\n}\n"],"mappings":";AACA,SAASA,SAAS,QAAQ,eAAe;AACzC,OAAOC,KAAK,MAAM,OAAO;AAqBzB,OAAO,MAAeC,KAAK,SAGjBF,SAAS,CAAwD;EAAAG,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gBACjE;MACNC,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE;IACV,CAAC;IAAAF,eAAA,oCAEcJ,KAAK,CAACO,SAAS,CAAiB,CAAC;EAAA;EAEhDC,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACC,QAAQ,CAAC,CAAC;EACjB;EAEAC,kBAAkBA,CAACC,SAAY,EAAE;IAC/B,IACEA,SAAS,CAACC,CAAC,KAAK,IAAI,CAACC,KAAK,CAACD,CAAC,IAC5BD,SAAS,CAACG,CAAC,KAAK,IAAI,CAACD,KAAK,CAACC,CAAC,IAC5BH,SAAS,CAACI,IAAI,KAAK,IAAI,CAACF,KAAK,CAACE,IAAI,EAClC;MACA,IAAI,CAACN,QAAQ,CAAC,CAAC;IACjB;EACF;EAEA,IAAIO,YAAYA,CAAA,EAAW;IACzB,MAAM;MAAEX,KAAK;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACW,KAAK;IAEpC,OAAQZ,KAAK,GAAGC,MAAM,GAAI,IAAI,CAACY,aAAa;EAC9C;EAEA,IAAIA,aAAaA,CAAA,EAAW;IAC1B,OAAO,GAAG;EACZ;EAEA,IAAIC,QAAQA,CAAA,EAAW;IACrB,OAAO,IAAI,CAACH,YAAY;EAC1B;EAEA,IAAII,SAASA,CAAA,EAAW;IACtB,OAAO,IAAI,CAACF,aAAa;EAC3B;EAEAT,QAAQA,CAAA,EAAG;IACT,IAAI,IAAI,CAACY,YAAY,CAACC,OAAO,EAAE;MAC7B,MAAMC,kBAAkB,GAAG,IAAI,CAACF,YAAY,CAACC,OAAO,CAACE,qBAAqB,CAAC,CAAC;MAE5E,MAAM;QAAEnB,KAAK;QAAEC;MAAO,CAAC,GAAGiB,kBAAkB;MAE5C,IAAIlB,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,EAAE;QAC3B,IAAI,CAACmB,QAAQ,CAAC;UAAEpB,KAAK;UAAEC;QAAO,CAAC,CAAC;MAClC;IACF;EACF;AACF","ignoreList":[]}
+{"version":3,"file":"Trend.js","names":["Component","React","Trend","constructor","args","_defineProperty","width","height","createRef","componentDidMount","setSizes","componentDidUpdate","prevProps","w","props","h","data","defaultWidth","state","defaultHeight","svgWidth","svgHeight","containerRef","current","boundingClientRect","getBoundingClientRect","setState"],"sources":["../../../../src/component/trend/Trend.tsx"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { Component } from '@semcore/core';\nimport React from 'react';\n\nexport type CommonTrendProps = BoxProps & {\n  /**\n   * Flag to enable animate of charts\n   * @default true\n   */\n  animate?: boolean;\n\n  /**\n   * Flag to enable skeleton\n   * @default false\n   */\n  loading?: boolean;\n\n  /**\n   * Data for chart\n   */\n  data: any[];\n};\n\ntype CommonTrendState = { width: number; height: number };\n\nexport abstract class Trend<\n  P extends CommonTrendProps,\n  E extends readonly ((...args: any[]) => any)[],\n  DP extends Intergalactic.InternalTypings.ValidDefaultProps<DP, P> = never,\n> extends Component<P, E, Readonly<{}>, {}, CommonTrendState, DP> {\n  state = {\n    width: 200,\n    height: 100,\n  };\n\n  containerRef = React.createRef<HTMLDivElement>();\n\n  componentDidMount() {\n    this.setSizes();\n  }\n\n  componentDidUpdate(prevProps: P) {\n    if (\n      prevProps.w !== this.props.w ||\n      prevProps.h !== this.props.h ||\n      prevProps.data !== this.props.data\n    ) {\n      this.setSizes();\n    }\n  }\n\n  get defaultWidth(): number {\n    const { width, height } = this.state;\n\n    return (width / height) * this.defaultHeight;\n  }\n\n  get defaultHeight(): number {\n    return 100;\n  }\n\n  get svgWidth(): number {\n    return this.defaultWidth;\n  }\n\n  get svgHeight(): number {\n    return this.defaultHeight;\n  }\n\n  setSizes() {\n    if (this.containerRef.current) {\n      const boundingClientRect = this.containerRef.current.getBoundingClientRect();\n\n      const { width, height } = boundingClientRect;\n\n      if (width > 0 && height > 0) {\n        this.setState({ width, height });\n      }\n    }\n  }\n}\n"],"mappings":";AAEA,SAASA,SAAS,QAAQ,eAAe;AACzC,OAAOC,KAAK,MAAM,OAAO;AAuBzB,OAAO,MAAeC,KAAK,SAIjBF,SAAS,CAA+C;EAAAG,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gBACxD;MACNC,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE;IACV,CAAC;IAAAF,eAAA,oCAEcJ,KAAK,CAACO,SAAS,CAAiB,CAAC;EAAA;EAEhDC,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACC,QAAQ,CAAC,CAAC;EACjB;EAEAC,kBAAkBA,CAACC,SAAY,EAAE;IAC/B,IACEA,SAAS,CAACC,CAAC,KAAK,IAAI,CAACC,KAAK,CAACD,CAAC,IAC5BD,SAAS,CAACG,CAAC,KAAK,IAAI,CAACD,KAAK,CAACC,CAAC,IAC5BH,SAAS,CAACI,IAAI,KAAK,IAAI,CAACF,KAAK,CAACE,IAAI,EAClC;MACA,IAAI,CAACN,QAAQ,CAAC,CAAC;IACjB;EACF;EAEA,IAAIO,YAAYA,CAAA,EAAW;IACzB,MAAM;MAAEX,KAAK;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACW,KAAK;IAEpC,OAAQZ,KAAK,GAAGC,MAAM,GAAI,IAAI,CAACY,aAAa;EAC9C;EAEA,IAAIA,aAAaA,CAAA,EAAW;IAC1B,OAAO,GAAG;EACZ;EAEA,IAAIC,QAAQA,CAAA,EAAW;IACrB,OAAO,IAAI,CAACH,YAAY;EAC1B;EAEA,IAAII,SAASA,CAAA,EAAW;IACtB,OAAO,IAAI,CAACF,aAAa;EAC3B;EAEAT,QAAQA,CAAA,EAAG;IACT,IAAI,IAAI,CAACY,YAAY,CAACC,OAAO,EAAE;MAC7B,MAAMC,kBAAkB,GAAG,IAAI,CAACF,YAAY,CAACC,OAAO,CAACE,qBAAqB,CAAC,CAAC;MAE5E,MAAM;QAAEnB,KAAK;QAAEC;MAAO,CAAC,GAAGiB,kBAAkB;MAE5C,IAAIlB,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,EAAE;QAC3B,IAAI,CAACmB,QAAQ,CAAC;UAAEpB,KAAK;UAAEC;QAAO,CAAC,CAAC;MAClC;IACF;EACF;AACF","ignoreList":[]}

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ScoreLine","ScoreDonut","ScoreSemiDonut","TrendLine","TrendArea","TrendBar","TrendHistogram","miniCharts"],"sources":["../../src/index.ts"],"sourcesContent":["import { ScoreLine, ScoreDonut, ScoreSemiDonut } from './component/score';\nimport { TrendLine, TrendArea, TrendBar, TrendHistogram } from './component/trend';\n\nconst miniCharts: {\n  TrendLine: typeof TrendLine;\n  TrendArea: typeof TrendArea;\n  TrendBar: typeof TrendBar;\n  TrendHistogram: typeof TrendHistogram;\n  ScoreSemiDonut: typeof ScoreSemiDonut;\n  ScoreDonut: typeof ScoreDonut;\n  ScoreLine: typeof ScoreLine;\n} = {\n  TrendLine,\n  TrendArea,\n  TrendBar,\n  TrendHistogram,\n  ScoreSemiDonut,\n  ScoreDonut,\n  ScoreLine,\n};\n\nexport default miniCharts;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,UAAU,EAAEC,cAAc,QAAQ,mBAAmB;AACzE,SAASC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,cAAc,QAAQ,mBAAmB;AAElF,MAAMC,UAQL,GAAG;EACFJ,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,cAAc;EACdJ,cAAc;EACdD,UAAU;EACVD;AACF,CAAC;AAED,eAAeO,UAAU","ignoreList":[]}
+{"version":3,"file":"index.js","names":["ScoreLine","ScoreDonut","ScoreSemiDonut","TrendLine","TrendArea","TrendBar","TrendHistogram","miniCharts"],"sources":["../../src/index.ts"],"sourcesContent":["import { ScoreLine, ScoreDonut, ScoreSemiDonut } from './component/score';\nimport type { SegmentColor } from './component/score/Line.types';\nimport { TrendLine, TrendArea, TrendBar, TrendHistogram } from './component/trend';\n\nconst miniCharts: {\n  TrendLine: typeof TrendLine;\n  TrendArea: typeof TrendArea;\n  TrendBar: typeof TrendBar;\n  TrendHistogram: typeof TrendHistogram;\n  ScoreSemiDonut: typeof ScoreSemiDonut;\n  ScoreDonut: typeof ScoreDonut;\n  ScoreLine: typeof ScoreLine;\n} = {\n  TrendLine,\n  TrendArea,\n  TrendBar,\n  TrendHistogram,\n  ScoreSemiDonut,\n  ScoreDonut,\n  ScoreLine,\n};\n\nexport default miniCharts;\n\nexport type {\n  SegmentColor,\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,UAAU,EAAEC,cAAc,QAAQ,mBAAmB;AAEzE,SAASC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,cAAc,QAAQ,mBAAmB;AAElF,MAAMC,UAQL,GAAG;EACFJ,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,cAAc;EACdJ,cAAc;EACdD,UAAU;EACVD;AACF,CAAC;AAED,eAAeO,UAAU","ignoreList":[]}

package/lib/esm/component/score/Donut.mjs

@@ -1,4 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
 import { Box } from "@semcore/base-components";
 import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
@@ -11,19 +11,19 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_o19yu{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_o19yu_gg_.__loading_o19yu_gg_,.___SLineGauge_o19yu_gg_.__loading_o19yu_gg_,.___STrendBar_o19yu_gg_.__loading_o19yu_gg_,.___STrendLine_o19yu_gg_.__loading_o19yu_gg_{animation-name:pulse_o19yu;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_o19yu_gg_.__semi_o19yu_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_o19yu_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_o19yu_gg_.__animate_o19yu_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}",
+    ".___SDonutContainer_1k8k3_gg_.__loading_1k8k3_gg_,.___SLineGauge_1k8k3_gg_.__loading_1k8k3_gg_,.___STrendBar_1k8k3_gg_.__loading_1k8k3_gg_,.___STrendLine_1k8k3_gg_.__loading_1k8k3_gg_{animation-name:pulse_1k8k3;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_1k8k3{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SDonutContainer_1k8k3_gg_.__semi_1k8k3_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_1k8k3_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_1k8k3_gg_.__animate_1k8k3_gg_ circle{transition:all var(--intergalactic-duration-extra-slow,500) ease-in-out}",
     /*__inner_css_end__*/
-    "o19yu_gg_"
+    "1k8k3_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_o19yu_gg_",
-    "_loading": "__loading_o19yu_gg_",
-    "__SDonutContainer": "___SDonutContainer_o19yu_gg_",
-    "__STrendLine": "___STrendLine_o19yu_gg_",
-    "__STrendBar": "___STrendBar_o19yu_gg_",
-    "@pulse": "pulse_o19yu",
-    "_animate": "__animate_o19yu_gg_",
-    "_semi": "__semi_o19yu_gg_"
+    "__SLineGauge": "___SLineGauge_1k8k3_gg_",
+    "_loading": "__loading_1k8k3_gg_",
+    "__SDonutContainer": "___SDonutContainer_1k8k3_gg_",
+    "__STrendLine": "___STrendLine_1k8k3_gg_",
+    "__STrendBar": "___STrendBar_1k8k3_gg_",
+    "@pulse": "pulse_1k8k3",
+    "_animate": "__animate_1k8k3_gg_",
+    "_semi": "__semi_1k8k3_gg_"
   })
 );
 class DonutRoot extends Component {

package/lib/esm/component/score/Line.mjs

@@ -1,4 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
 import { Box, Flex } from "@semcore/base-components";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
@@ -8,28 +8,28 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_xxmc2{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_xxmc2{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_xxmc2_gg_.__loading_xxmc2_gg_,.___SLineGauge_xxmc2_gg_.__loading_xxmc2_gg_,.___STrendBar_xxmc2_gg_.__loading_xxmc2_gg_,.___STrendLine_xxmc2_gg_.__loading_xxmc2_gg_{animation-name:pulse_xxmc2;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_xxmc2_gg_{height:8px;background-color:var(--base-bg-color_xxmc2, var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242)));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_xxmc2_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_xxmc2_gg_.__percent_xxmc2_gg_{width:var(--percent_xxmc2)}.___SLineSegmentItem_xxmc2_gg_.__color_xxmc2_gg_,.___SLineValue_xxmc2_gg_.__color_xxmc2_gg_{background-color:var(--color_xxmc2, var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219)))}.___SLineGauge_xxmc2_gg_.__segments_xxmc2_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_xxmc2_gg_,.___SLineGaugeSegment_xxmc2_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_xxmc2_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_xxmc2_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #fff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_xxmc2_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242));transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_xxmc2;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
+    ".___SDonutContainer_fb95t_gg_.__loading_fb95t_gg_,.___SLineGauge_fb95t_gg_.__loading_fb95t_gg_,.___STrendBar_fb95t_gg_.__loading_fb95t_gg_,.___STrendLine_fb95t_gg_.__loading_fb95t_gg_{animation-name:pulse_fb95t;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_fb95t{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SLineGauge_fb95t_gg_{height:8px;background-color:var(--base-bg-color_fb95t,var(--intergalactic-chart-grid-bar-chart-base-bg,#f1f2f2));border-radius:var(--intergalactic-chart-rounded,2px);overflow:hidden;position:relative}.___SLineValue_fb95t_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded,2px) 0 0 var(--intergalactic-chart-rounded,2px)}.___SLineValue_fb95t_gg_.__percent_fb95t_gg_{width:var(--percent_fb95t)}.___SLineSegmentItem_fb95t_gg_.__color_fb95t_gg_,.___SLineValue_fb95t_gg_.__color_fb95t_gg_{background-color:var(--color_fb95t,var(--intergalactic-chart-palette-order-1,#666bdb))}.___SLineGauge_fb95t_gg_.__segments_fb95t_gg_{border-radius:var(--intergalactic-progress-bar-rounded,6px)}.___SAnimationLine_fb95t_gg_,.___SLineGaugeSegment_fb95t_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_fb95t_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_fb95t_gg_{height:8px;background:#0000;border-right:1px solid var(--intergalactic-chart-grid-border,#fff);box-sizing:initial}.___SAnimationLine_fb95t_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg,#f1f2f2);transition:all var(--intergalactic-duration-extra-slow,500) ease-in-out;animation-name:move-line_fb95t;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}@keyframes move-line_fb95t{0%{transform:translateX(0)}to{transform:translateX(100%)}}",
     /*__inner_css_end__*/
-    "xxmc2_gg_"
+    "fb95t_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_xxmc2_gg_",
-    "_loading": "__loading_xxmc2_gg_",
-    "__SDonutContainer": "___SDonutContainer_xxmc2_gg_",
-    "__STrendLine": "___STrendLine_xxmc2_gg_",
-    "__STrendBar": "___STrendBar_xxmc2_gg_",
-    "@pulse": "pulse_xxmc2",
-    "__SLineValue": "___SLineValue_xxmc2_gg_",
-    "_percent": "__percent_xxmc2_gg_",
-    "--percent": "--percent_xxmc2",
-    "_color": "__color_xxmc2_gg_",
-    "__SLineSegmentItem": "___SLineSegmentItem_xxmc2_gg_",
-    "_segments": "__segments_xxmc2_gg_",
-    "__SLineGaugeSegment": "___SLineGaugeSegment_xxmc2_gg_",
-    "__SAnimationLine": "___SAnimationLine_xxmc2_gg_",
-    "@move-line": "move-line_xxmc2",
-    "--base-bg-color": "--base-bg-color_xxmc2",
-    "--color": "--color_xxmc2"
+    "__SLineGauge": "___SLineGauge_fb95t_gg_",
+    "_loading": "__loading_fb95t_gg_",
+    "__SDonutContainer": "___SDonutContainer_fb95t_gg_",
+    "__STrendLine": "___STrendLine_fb95t_gg_",
+    "__STrendBar": "___STrendBar_fb95t_gg_",
+    "@pulse": "pulse_fb95t",
+    "__SLineValue": "___SLineValue_fb95t_gg_",
+    "_percent": "__percent_fb95t_gg_",
+    "--percent": "--percent_fb95t",
+    "_color": "__color_fb95t_gg_",
+    "__SLineSegmentItem": "___SLineSegmentItem_fb95t_gg_",
+    "_segments": "__segments_fb95t_gg_",
+    "__SLineGaugeSegment": "___SLineGaugeSegment_fb95t_gg_",
+    "__SAnimationLine": "___SAnimationLine_fb95t_gg_",
+    "@move-line": "move-line_fb95t",
+    "--base-bg-color": "--base-bg-color_fb95t",
+    "--color": "--color_fb95t"
   })
 );
 class LineRoot extends Component {

package/lib/esm/component/trend/Bar.mjs

@@ -1,4 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled, assignProps, createComponent } from "@semcore/core";
 import { Box } from "@semcore/base-components";
 import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
@@ -10,17 +10,17 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_9xybf{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_9xybf_gg_.__loading_9xybf_gg_,.___SLineGauge_9xybf_gg_.__loading_9xybf_gg_,.___STrendBar_9xybf_gg_.__loading_9xybf_gg_,.___STrendLine_9xybf_gg_.__loading_9xybf_gg_{animation-name:pulse_9xybf;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    ".___SDonutContainer_1b4gu_gg_.__loading_1b4gu_gg_,.___SLineGauge_1b4gu_gg_.__loading_1b4gu_gg_,.___STrendBar_1b4gu_gg_.__loading_1b4gu_gg_,.___STrendLine_1b4gu_gg_.__loading_1b4gu_gg_{animation-name:pulse_1b4gu;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_1b4gu{0%{opacity:1}50%{opacity:.4}to{opacity:1}}",
     /*__inner_css_end__*/
-    "9xybf_gg_"
+    "1b4gu_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_9xybf_gg_",
-    "_loading": "__loading_9xybf_gg_",
-    "__SDonutContainer": "___SDonutContainer_9xybf_gg_",
-    "__STrendLine": "___STrendLine_9xybf_gg_",
-    "__STrendBar": "___STrendBar_9xybf_gg_",
-    "@pulse": "pulse_9xybf"
+    "__SLineGauge": "___SLineGauge_1b4gu_gg_",
+    "_loading": "__loading_1b4gu_gg_",
+    "__SDonutContainer": "___SDonutContainer_1b4gu_gg_",
+    "__STrendLine": "___STrendLine_1b4gu_gg_",
+    "__STrendBar": "___STrendBar_1b4gu_gg_",
+    "@pulse": "pulse_1b4gu"
   })
 );
 class TrendBarRoot extends Trend {

package/lib/esm/component/trend/Line.mjs

@@ -1,4 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled, assignProps, createComponent } from "@semcore/core";
 import { Box } from "@semcore/base-components";
 import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
@@ -11,17 +11,17 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_9xybf{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_9xybf_gg_.__loading_9xybf_gg_,.___SLineGauge_9xybf_gg_.__loading_9xybf_gg_,.___STrendBar_9xybf_gg_.__loading_9xybf_gg_,.___STrendLine_9xybf_gg_.__loading_9xybf_gg_{animation-name:pulse_9xybf;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    ".___SDonutContainer_1b4gu_gg_.__loading_1b4gu_gg_,.___SLineGauge_1b4gu_gg_.__loading_1b4gu_gg_,.___STrendBar_1b4gu_gg_.__loading_1b4gu_gg_,.___STrendLine_1b4gu_gg_.__loading_1b4gu_gg_{animation-name:pulse_1b4gu;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_1b4gu{0%{opacity:1}50%{opacity:.4}to{opacity:1}}",
     /*__inner_css_end__*/
-    "9xybf_gg_"
+    "1b4gu_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_9xybf_gg_",
-    "_loading": "__loading_9xybf_gg_",
-    "__SDonutContainer": "___SDonutContainer_9xybf_gg_",
-    "__STrendLine": "___STrendLine_9xybf_gg_",
-    "__STrendBar": "___STrendBar_9xybf_gg_",
-    "@pulse": "pulse_9xybf"
+    "__SLineGauge": "___SLineGauge_1b4gu_gg_",
+    "_loading": "__loading_1b4gu_gg_",
+    "__SDonutContainer": "___SDonutContainer_1b4gu_gg_",
+    "__STrendLine": "___STrendLine_1b4gu_gg_",
+    "__STrendBar": "___STrendBar_1b4gu_gg_",
+    "@pulse": "pulse_1b4gu"
   })
 );
 class TrendLineRoot extends Trend {

package/lib/esm/component/trend/Trend.mjs

@@ -1,4 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Component } from "@semcore/core";
 import React from "react";
 class Trend extends Component {

package/lib/esm/utils/ScoreDonutUtils.mjs

@@ -1,4 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 class ScoreDonutUtils {
   constructor(value, isSemiDonut) {
     _defineProperty(this, "isSemiDonut", void 0);

package/lib/types/component/score/Donut.d.ts

@@ -1,9 +1,35 @@
 import { type BoxProps } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+import { Component } from '@semcore/core';
+import React from 'react';
 import type { CommonScoreProps } from './Score';
 export type ScoreDonutProps = BoxProps & CommonScoreProps;
-export declare const ScoreDonut: import("@semcore/core").Intergalactic.Component<"svg", ScoreDonutProps, {}, readonly [<T extends {}>(props: T) => T & {
-    duration: string;
-}, (props: any) => any]>;
-export declare const ScoreSemiDonut: import("@semcore/core").Intergalactic.Component<"svg", ScoreDonutProps, {}, readonly [<T extends {}>(props: T) => T & {
-    duration: string;
-}, (props: any) => any]>;
+type ScoreDonutDefaultProps = {
+    animate: true;
+};
+type ScoreDonutComponent = Intergalactic.Component<'svg', ScoreDonutProps, {}, typeof DonutRoot.enhance>;
+declare class DonutRoot extends Component<ScoreDonutProps, typeof DonutRoot.enhance, {}, {}, {}, ScoreDonutDefaultProps> {
+    static enhance: readonly [<T extends {}>(props: T) => T & {
+        duration: string;
+    }, (props: any) => any];
+    static style: {
+        [key: string]: string;
+    };
+    static defaultProps: {
+        readonly animate: true;
+    };
+    render(): React.ReactNode;
+}
+/**
+ * MiniCharts.ScoreDount
+ *
+ * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
+ */
+export declare const ScoreDonut: ScoreDonutComponent;
+/**
+ * MiniCharts.ScoreSemiDount
+ *
+ * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
+ */
+export declare const ScoreSemiDonut: ScoreDonutComponent;
+export {};

package/lib/types/component/score/Line.d.ts

@@ -1,2 +1,7 @@
 import type { ScoreLineComponent } from './Line.types';
+/**
+ * MiniCharts.ScoreLine
+ *
+ * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}
+ */
 export declare const ScoreLine: ScoreLineComponent;

package/lib/types/component/score/Line.types.d.ts

@@ -36,9 +36,15 @@ type ValuedScoreProps = {
     children?: never;
 };
 type CustomRenderScoreProps = {
+    value?: never;
+    segments?: never;
+    color?: never;
     children: SegmentComponent[];
 };
 export type ScoreLineGaugeProps = BoxProps & Intergalactic.InternalTypings.EfficientOmit<CommonScoreProps, 'value' | 'color'> & (ValuedScoreProps | CustomRenderScoreProps);
+export type ScoreLineGaugeDefaultProps = {
+    animate: true;
+};
 export type Enhances = [
     () => {
         resolveColor: ReturnType<typeof resolveColorEnhance>;