@semcore/skeleton 17.0.1 → 17.0.2-prerelease.0

package/lib/es6/Skeleton.js

@@ -9,16 +9,16 @@ import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
 import React from 'react';
 /*!__reshadow-styles__:"./style/skeleton.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_192pf{0%,to{opacity:1}50%{opacity:.4}}.___SSkeleton_192pf_gg_{animation-name:pulse_192pf;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_192pf);will-change:opacity}.___SSkeletonSVG_192pf_gg_._theme_invert_192pf_gg_{fill:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8))}.___SSkeletonSVG_192pf_gg_._theme_dark_192pf_gg_{fill:var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3))}.___SText_192pf_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_192pf_gg_{animation-name:none}}", /*__inner_css_end__*/"192pf_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1rvju{0%,to{opacity:1}50%{opacity:.4}}.___SSkeleton_1rvju_gg_{animation-name:pulse_1rvju;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_1rvju);will-change:opacity}.___SSkeletonSVG_1rvju_gg_._theme_invert_1rvju_gg_{fill:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8))}.___SSkeletonSVG_1rvju_gg_._theme_dark_1rvju_gg_{fill:var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3))}.___SText_1rvju_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1rvju_gg_{animation-name:none}}", /*__inner_css_end__*/"1rvju_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SSkeleton": "___SSkeleton_192pf_gg_",
-  "--durationAnim": "--durationAnim_192pf",
-  "@pulse": "pulse_192pf",
-  "__SSkeletonSVG": "___SSkeletonSVG_192pf_gg_",
-  "_theme_invert": "_theme_invert_192pf_gg_",
-  "_theme_dark": "_theme_dark_192pf_gg_",
-  "__SText": "___SText_192pf_gg_"
+  "__SSkeleton": "___SSkeleton_1rvju_gg_",
+  "--durationAnim": "--durationAnim_1rvju",
+  "@pulse": "pulse_1rvju",
+  "__SSkeletonSVG": "___SSkeletonSVG_1rvju_gg_",
+  "_theme_invert": "_theme_invert_1rvju_gg_",
+  "_theme_dark": "_theme_dark_1rvju_gg_",
+  "__SText": "___SText_1rvju_gg_"
 });
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 const MAP_COLOR_THEME = {
@@ -58,18 +58,24 @@ class SkeletonSVG extends Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "svgRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "observer", null);
     if (canUseDOM() && props.observeParentSize) {
       this.observer = new ResizeObserver(this.handleResize.bind(this));
     }
   }
   componentDidMount() {
-    this.observer?.observe(this.svgRef.current?.parentElement);
+    const {
+      current
+    } = this.svgRef;
+    if (current && current.parentElement) {
+      this.observer?.observe(current.parentElement);
+    }
   }
   componentWillUnmount() {
     this.observer?.disconnect();
   }
-  handleResize(data) {
-    const target = data[0].target;
+  handleResize(entries) {
+    const target = entries[0].target;
     const svg = this.svgRef.current;
     if (target && svg) {
       svg.setAttribute('width', '100%');
@@ -79,6 +85,7 @@ class SkeletonSVG extends Component {
     const {
       theme
     } = this.asProps;
+    if (!theme) return {};
     return {
       gradientUrl: MAP_COLOR_THEME[theme]
     };
@@ -132,24 +139,21 @@ function Text(props) {
     ...other
   } = props;
   const amountLine = Number(amount);
-  const renderRect = props => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, [...Array(amountLine)].map((_el, index) => {
     var _ref5;
     return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SText, _ref5.cn("SText", {
       "tag": 'rect',
       "rx": '4',
       "ry": '4',
       "height": '8',
-      ...props
+      "key": index,
+      "y": y || 20 * index,
+      "x": x,
+      "ref": forwardRef,
+      "width": width,
+      ...other
     }));
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, [...Array(amountLine)].map((_el, index) => renderRect({
-    key: index,
-    y: y || 20 * index,
-    x,
-    ref: forwardRef,
-    width,
-    ...other
-  })));
+  }));
 }
 const Skeleton = createComponent(SkeletonRoot);
 export { Skeleton };

package/lib/es6/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","names":["Box","createComponent","Component","sstyled","Root","canUseDOM","i18nEnhance","uniqueIDEnhancement","React","style","_sstyled","insert","localizedMessages","MAP_COLOR_THEME","dark","invert","SkeletonRoot","render","_ref","asProps","_ref3","SSkeleton","styles","duration","hidden","getI18nText","createElement","cn","_assignProps","_defineProperty","width","height","SkeletonSVG","constructor","props","createRef","observeParentSize","observer","ResizeObserver","handleResize","bind","componentDidMount","observe","svgRef","current","parentElement","componentWillUnmount","disconnect","data","target","svg","setAttribute","setContext","theme","gradientUrl","_ref2","_ref4","Children","uid","SSkeletonSVG","Skeleton","_assignProps2","Text","SText","y","x","amount","forwardRef","other","amountLine","Number","renderRect","_ref5","Fragment","Array","map","_el","index","key","ref"],"sources":["../../src/Skeleton.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport canUseDOM from '@semcore/core/lib/utils/canUseDOM';\nimport i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';\nimport uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\nimport React from 'react';\n\nimport style from './style/skeleton.shadow.css';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nconst MAP_COLOR_THEME = {\n  dark: 'rgba(255, 255, 255, 0.3)',\n  invert: 'rgba(224, 225, 233, 0.8)',\n};\n\nclass SkeletonRoot extends Component {\n  static displayName = 'Skeleton';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages)];\n  static defaultProps = {\n    width: '100%',\n    height: '100%',\n    duration: 2000,\n  };\n\n  render() {\n    const SSkeleton = Root;\n    const { styles, duration, hidden, getI18nText } = this.asProps;\n\n    if (hidden) return null;\n\n    return sstyled(styles)(\n      <SSkeleton\n        render={Box}\n        durationAnim={`${duration}ms`}\n        role='img'\n        aria-label={getI18nText('loading')}\n      />,\n    );\n  }\n}\n\nclass SkeletonSVG extends Component {\n  static displayName = 'SkeletonSVG';\n  static enhance = [uniqueIDEnhancement()];\n  static style = style;\n\n  static defaultProps = {\n    theme: 'invert',\n    duration: 2000,\n  };\n\n  svgRef = React.createRef();\n\n  constructor(props) {\n    super(props);\n\n    if (canUseDOM() && props.observeParentSize) {\n      this.observer = new ResizeObserver(this.handleResize.bind(this));\n    }\n  }\n\n  componentDidMount() {\n    this.observer?.observe(this.svgRef.current?.parentElement);\n  }\n\n  componentWillUnmount() {\n    this.observer?.disconnect();\n  }\n\n  handleResize(data) {\n    const target = data[0].target;\n    const svg = this.svgRef.current;\n\n    if (target && svg) {\n      svg.setAttribute('width', '100%');\n    }\n  }\n\n  setContext() {\n    const { theme } = this.asProps;\n    return {\n      gradientUrl: MAP_COLOR_THEME[theme],\n    };\n  }\n\n  render() {\n    const { Children, styles, uid, theme, duration } = this.asProps;\n    const SSkeletonSVG = Root;\n\n    return sstyled(styles)(\n      <SSkeletonSVG\n        render={Skeleton}\n        tag='svg'\n        ref={this.svgRef}\n        preserveAspectRatio='none'\n        theme={theme}\n        durationAnim={`${duration}ms`}\n      >\n        <defs>\n          <mask id={uid}>\n            <Children />\n          </mask>\n        </defs>\n        <rect x='0' y='0' width='100%' height='100%' mask={`url(#${uid})`} />\n      </SSkeletonSVG>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Box;\n  const { y = 0, x = 0, amount = 1, width = '100%', styles, forwardRef, ...other } = props;\n  const amountLine = Number(amount);\n\n  const renderRect = (props) => {\n    return sstyled(styles)(<SText tag='rect' rx='4' ry='4' height='8' {...props} />);\n  };\n\n  return (\n    <React.Fragment>\n      {[...Array(amountLine)].map((_el, index) =>\n        renderRect({\n          key: index,\n          y: y || 20 * index,\n          x,\n          ref: forwardRef,\n          width,\n          ...other,\n        }),\n      )}\n    </React.Fragment>\n  );\n}\n\nconst Skeleton = createComponent(SkeletonRoot);\n\nexport { Skeleton };\n\nexport default createComponent(SkeletonSVG, {\n  Text,\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Skeleton.js","names":["Box","createComponent","Component","sstyled","Root","canUseDOM","i18nEnhance","uniqueIDEnhancement","React","style","_sstyled","insert","localizedMessages","MAP_COLOR_THEME","dark","invert","SkeletonRoot","render","_ref","asProps","_ref3","SSkeleton","styles","duration","hidden","getI18nText","createElement","cn","_assignProps","_defineProperty","width","height","SkeletonSVG","constructor","props","createRef","observeParentSize","observer","ResizeObserver","handleResize","bind","componentDidMount","current","svgRef","parentElement","observe","componentWillUnmount","disconnect","entries","target","svg","setAttribute","setContext","theme","gradientUrl","_ref2","_ref4","Children","uid","SSkeletonSVG","Skeleton","_assignProps2","Text","SText","y","x","amount","forwardRef","other","amountLine","Number","Fragment","Array","map","_el","index","_ref5"],"sources":["../../src/Skeleton.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport canUseDOM from '@semcore/core/lib/utils/canUseDOM';\nimport i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';\nimport uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\nimport React from 'react';\n\nimport type { NSSkeleton } from './Skeleton.type';\nimport style from './style/skeleton.shadow.css';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nconst MAP_COLOR_THEME = {\n  dark: 'rgba(255, 255, 255, 0.3)',\n  invert: 'rgba(224, 225, 233, 0.8)',\n};\n\nclass SkeletonRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSSkeleton.RenderComponent>,\n  typeof SkeletonRoot.enhance\n> {\n  static displayName = 'Skeleton';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages)] as const;\n  static defaultProps = {\n    width: '100%',\n    height: '100%',\n    duration: 2000,\n  };\n\n  render() {\n    const SSkeleton = Root;\n    const { styles, duration, hidden, getI18nText } = this.asProps;\n\n    if (hidden) return null;\n\n    return sstyled(styles)(\n      <SSkeleton\n        render={Box}\n        durationAnim={`${duration}ms`}\n        role='img'\n        aria-label={getI18nText('loading')}\n      />,\n    );\n  }\n}\n\nclass SkeletonSVG extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSSkeleton.Component>,\n  typeof SkeletonRoot.enhance\n> {\n  static displayName = 'SkeletonSVG';\n  static enhance = [uniqueIDEnhancement()];\n  static style = style;\n\n  static defaultProps = {\n    theme: 'invert',\n    duration: 2000,\n  };\n\n  svgRef = React.createRef<SVGElement>();\n  private observer: ResizeObserver | null = null;\n\n  constructor(props: NSSkeleton.Props) {\n    super(props);\n\n    if (canUseDOM() && props.observeParentSize) {\n      this.observer = new ResizeObserver(this.handleResize.bind(this));\n    }\n  }\n\n  componentDidMount() {\n    const { current } = this.svgRef;\n\n    if (current && current.parentElement) {\n      this.observer?.observe(current.parentElement);\n    }\n  }\n\n  componentWillUnmount() {\n    this.observer?.disconnect();\n  }\n\n  handleResize(entries: ResizeObserverEntry[]) {\n    const target = entries[0].target;\n    const svg = this.svgRef.current;\n\n    if (target && svg) {\n      svg.setAttribute('width', '100%');\n    }\n  }\n\n  setContext() {\n    const { theme } = this.asProps;\n\n    if (!theme) return {};\n\n    return {\n      gradientUrl: MAP_COLOR_THEME[theme],\n    };\n  }\n\n  render() {\n    const { Children, styles, uid, theme, duration } = this.asProps;\n    const SSkeletonSVG = Root;\n\n    return sstyled(styles)(\n      <SSkeletonSVG\n        render={Skeleton}\n        tag='svg'\n        ref={this.svgRef}\n        preserveAspectRatio='none'\n        theme={theme}\n        durationAnim={`${duration}ms`}\n      >\n        <defs>\n          <mask id={uid}>\n            <Children />\n          </mask>\n        </defs>\n        <rect x='0' y='0' width='100%' height='100%' mask={`url(#${uid})`} />\n      </SSkeletonSVG>,\n    );\n  }\n}\n\nfunction Text(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSkeleton.Text.Component>,\n) {\n  const SText = Box;\n  const { y = 0, x = 0, amount = 1, width = '100%', styles, forwardRef, ...other } = props;\n  const amountLine = Number(amount);\n\n  return (\n    <React.Fragment>\n      {[...Array(amountLine)].map((_el, index) =>\n        sstyled(styles)(\n          <SText\n            tag='rect'\n            rx='4'\n            ry='4'\n            height='8'\n            key={index}\n            y={y || 20 * index}\n            x={x}\n            ref={forwardRef}\n            width={width}\n            {...other}\n          />,\n        ),\n      )}\n    </React.Fragment>\n  );\n}\n\nconst Skeleton = createComponent(SkeletonRoot) as NSSkeleton.RenderComponent;\n\nexport { Skeleton };\n\nexport default createComponent(SkeletonSVG, {\n  Text,\n}) as NSSkeleton.Component;\n"],"mappings":";;;;AAAA,SAASA,GAAG,QAAQ,0BAA0B;AAE9C,SAASC,eAAe,EAAEC,SAAS,EAAEC,OAAO,EAAEC,IAAI,QAAQ,eAAe;AACzE,OAAOC,SAAS,MAAM,mCAAmC;AACzD,OAAOC,WAAW,MAAM,8CAA8C;AACtE,OAAOC,mBAAmB,MAAM,kCAAkC;AAClE,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,SAASC,iBAAiB,QAAQ,gDAAgD;AAElF,MAAMC,eAAe,GAAG;EACtBC,IAAI,EAAE,0BAA0B;EAChCC,MAAM,EAAE;AACV,CAAC;AAED,MAAMC,YAAY,SAASd,SAAS,CAGlC;EAUAe,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAMC,SAAS,GAOHrB,GAAG;IANf,MAAM;MAAEsB,MAAM;MAAEC,QAAQ;MAAEC,MAAM;MAAEC;IAAY,CAAC,GAAG,IAAI,CAACN,OAAO;IAE9D,IAAIK,MAAM,EAAE,OAAO,IAAI;IAEvB,OAAAJ,KAAA,GAAOjB,OAAO,CAACmB,MAAM,CAAC,eACpBd,KAAA,CAAAkB,aAAA,CAACL,SAAS,EAAAD,KAAA,CAAAO,EAAA;MAAA,GAAAC,YAAA;QAAA,gBAEM,GAAGL,QAAQ,IAAI;QAAA,QACxB,KAAK;QAAA,cACEE,WAAW,CAAC,SAAS;MAAC,GAAAP,IAAA;IAAA,EACnC,CAAC;EAEN;AACF;AAACW,eAAA,CA5BKb,YAAY,iBAIK,UAAU;AAAAa,eAAA,CAJ3Bb,YAAY,WAKDP,KAAK;AAAAoB,eAAA,CALhBb,YAAY,aAMC,CAACV,WAAW,CAACM,iBAAiB,CAAC,CAAC;AAAAiB,eAAA,CAN7Cb,YAAY,kBAOM;EACpBc,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdR,QAAQ,EAAE;AACZ,CAAC;AAmBH,MAAMS,WAAW,SAAS9B,SAAS,CAGjC;EAaA+B,WAAWA,CAACC,KAAuB,EAAE;IACnC,KAAK,CAACA,KAAK,CAAC;IAACL,eAAA,8BAJNrB,KAAK,CAAC2B,SAAS,CAAa,CAAC;IAAAN,eAAA,mBACI,IAAI;IAK5C,IAAIxB,SAAS,CAAC,CAAC,IAAI6B,KAAK,CAACE,iBAAiB,EAAE;MAC1C,IAAI,CAACC,QAAQ,GAAG,IAAIC,cAAc,CAAC,IAAI,CAACC,YAAY,CAACC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClE;EACF;EAEAC,iBAAiBA,CAAA,EAAG;IAClB,MAAM;MAAEC;IAAQ,CAAC,GAAG,IAAI,CAACC,MAAM;IAE/B,IAAID,OAAO,IAAIA,OAAO,CAACE,aAAa,EAAE;MACpC,IAAI,CAACP,QAAQ,EAAEQ,OAAO,CAACH,OAAO,CAACE,aAAa,CAAC;IAC/C;EACF;EAEAE,oBAAoBA,CAAA,EAAG;IACrB,IAAI,CAACT,QAAQ,EAAEU,UAAU,CAAC,CAAC;EAC7B;EAEAR,YAAYA,CAACS,OAA8B,EAAE;IAC3C,MAAMC,MAAM,GAAGD,OAAO,CAAC,CAAC,CAAC,CAACC,MAAM;IAChC,MAAMC,GAAG,GAAG,IAAI,CAACP,MAAM,CAACD,OAAO;IAE/B,IAAIO,MAAM,IAAIC,GAAG,EAAE;MACjBA,GAAG,CAACC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC;IACnC;EACF;EAEAC,UAAUA,CAAA,EAAG;IACX,MAAM;MAAEC;IAAM,CAAC,GAAG,IAAI,CAAClC,OAAO;IAE9B,IAAI,CAACkC,KAAK,EAAE,OAAO,CAAC,CAAC;IAErB,OAAO;MACLC,WAAW,EAAEzC,eAAe,CAACwC,KAAK;IACpC,CAAC;EACH;EAEApC,MAAMA,CAAA,EAAG;IAAA,IAAAsC,KAAA,QAAApC,OAAA;MAAAqC,KAAA;IACP,MAAM;MAAEC,QAAQ;MAAEnC,MAAM;MAAEoC,GAAG;MAAEL,KAAK;MAAE9B;IAAS,CAAC,GAAG,IAAI,CAACJ,OAAO;IAC/D,MAAMwC,YAAY,GAINC,QAAQ;IAFpB,OAAAJ,KAAA,GAAOrD,OAAO,CAACmB,MAAM,CAAC,eACpBd,KAAA,CAAAkB,aAAA,CAACiC,YAAY,EAAAH,KAAA,CAAA7B,EAAA;MAAA,GAAAkC,aAAA;QAAA,OAEP,KAAK;QAAA,OACJ,IAAI,CAAClB,MAAM;QAAA,uBACI,MAAM;QAAA,SACnBU,KAAK;QAAA,gBACE,GAAG9B,QAAQ;MAAI,GAAAgC,KAAA;IAAA,iBAE7B/C,KAAA,CAAAkB,aAAA,SAAA8B,KAAA,CAAA7B,EAAA,2BACEnB,KAAA,CAAAkB,aAAA,SAAA8B,KAAA,CAAA7B,EAAA;MAAA,MAAU+B;IAAG,iBACXlD,KAAA,CAAAkB,aAAA,CAAC+B,QAAQ,EAAAD,KAAA,CAAA7B,EAAA,gBAAE,CACP,CACF,CAAC,eACPnB,KAAA,CAAAkB,aAAA,SAAA8B,KAAA,CAAA7B,EAAA;MAAA,KAAQ,GAAG;MAAA,KAAG,GAAG;MAAA,SAAO,MAAM;MAAA,UAAQ,MAAM;MAAA,QAAO,QAAQ+B,GAAG;IAAG,EAAG,CACxD,CAAC;EAEnB;AACF;AAAC7B,eAAA,CA7EKG,WAAW,iBAIM,aAAa;AAAAH,eAAA,CAJ9BG,WAAW,aAKE,CAACzB,mBAAmB,CAAC,CAAC,CAAC;AAAAsB,eAAA,CALpCG,WAAW,WAMAvB,KAAK;AAAAoB,eAAA,CANhBG,WAAW,kBAQO;EACpBqB,KAAK,EAAE,QAAQ;EACf9B,QAAQ,EAAE;AACZ,CAAC;AAoEH,SAASuC,IAAIA,CACX5B,KAAmF,EACnF;EACA,MAAM6B,KAAK,GAAG/D,GAAG;EACjB,MAAM;IAAEgE,CAAC,GAAG,CAAC;IAAEC,CAAC,GAAG,CAAC;IAAEC,MAAM,GAAG,CAAC;IAAEpC,KAAK,GAAG,MAAM;IAAER,MAAM;IAAE6C,UAAU;IAAE,GAAGC;EAAM,CAAC,GAAGlC,KAAK;EACxF,MAAMmC,UAAU,GAAGC,MAAM,CAACJ,MAAM,CAAC;EAEjC,oBACE1D,KAAA,CAAAkB,aAAA,CAAClB,KAAK,CAAC+D,QAAQ,QACZ,CAAC,GAAGC,KAAK,CAACH,UAAU,CAAC,CAAC,CAACI,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK;IAAA,IAAAC,KAAA;IAAA,OAAAA,KAAA,GACrCzE,OAAO,CAACmB,MAAM,CAAC,eACbd,KAAA,CAAAkB,aAAA,CAACqC,KAAK,EAAAa,KAAA,CAAAjD,EAAA;MAAA,OACA,MAAM;MAAA,MACP,GAAG;MAAA,MACH,GAAG;MAAA,UACC,GAAG;MAAA,OACLgD,KAAK;MAAA,KACPX,CAAC,IAAI,EAAE,GAAGW,KAAK;MAAA,KACfV,CAAC;MAAA,OACCE,UAAU;MAAA,SACRrC,KAAK;MAAA,GACRsC;IAAK,EACV,CAAC;EAAA,CAEN,CACc,CAAC;AAErB;AAEA,MAAMR,QAAQ,GAAG3D,eAAe,CAACe,YAAY,CAA+B;AAE5E,SAAS4C,QAAQ;AAEjB,eAAe3D,eAAe,CAAC+B,WAAW,EAAE;EAC1C8B;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/es6/Skeleton.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Skeleton.type.js.map

package/lib/es6/Skeleton.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.type.js","names":[],"sources":["../../src/Skeleton.type.ts"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport type { UniqueIDProps } from '@semcore/core/lib/utils/uniqueID';\n\ndeclare namespace NSSkeleton {\n  type Props = BoxProps & UniqueIDProps & {\n    /**\n     *  Skeleton visibility control property\n     */\n    hidden?: boolean;\n    /**\n     * Animation speed in ms\n     * @default 2000\n     */\n    duration?: string | number;\n    /**\n     * Skeleton theme\n     * @default invert\n     */\n    theme?: 'dark' | 'invert';\n    /** Specifies the locale for i18n support */\n    locale?: string;\n    /**\n     * Enable ResizeObserver for parent Element to recalculate skeleton size.\n     * @default false\n     */\n    observeParentSize?: boolean;\n  };\n  type Ctx = {\n    gradientUrl: string;\n  };\n\n  namespace Text {\n    type Props = BoxProps & {\n      // TODO: It looks like it should be number (def. not a string...)\n      /**\n       * Number of items to be returned\n       * @default 1\n       */\n      amount?: string | number;\n    };\n\n    type Component = Intergalactic.Component<'rect', Props>;\n  }\n\n  type RenderComponent = Intergalactic.Component<'div', Props, Ctx>;\n\n  type Component = Intergalactic.Component<'svg', Props, Ctx> & {\n    Text: Text.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type SkeletonProps = NSSkeleton.Props;\n/** @deprecated It will be removed in v18. */\nexport type SkeletonCtx = NSSkeleton.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type SkeletonTextProps = NSSkeleton.Text.Props;\n\nexport type { NSSkeleton };\n"],"mappings":"","ignoreList":[]}

package/lib/es6/{Charts → charts/Area}/Area.js

@@ -2,36 +2,39 @@ import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
 import { createComponent, Root, sstyled } from '@semcore/core';
 import React from 'react';
-import { Skeleton } from '../Skeleton';
-/*!__reshadow-styles__:"../style/chart.shadow.css"*/
-const styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SChartSkeleton_1dfvr_gg_{height:200px;width:100%;background-image:var(--bgPattern_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgPosition_1dfvr_gg_{background-position:var(--bgPosition_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgSize_1dfvr_gg_{background-size:var(--bgSize_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgRepeat_1dfvr_gg_{background-repeat:var(--bgRepeat_1dfvr)}", /*__inner_css_end__*/"1dfvr_gg_"),
+import { Skeleton } from '../../Skeleton';
+/*!__reshadow-styles__:"../../style/chart.shadow.css"*/
+const styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SChartSkeleton_1oiqb_gg_{height:200px;width:100%;background-image:var(--bgPattern_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgPosition_1oiqb_gg_{background-position:var(--bgPosition_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgSize_1oiqb_gg_{background-size:var(--bgSize_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgRepeat_1oiqb_gg_{background-repeat:var(--bgRepeat_1oiqb)}", /*__inner_css_end__*/"1oiqb_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SChartSkeleton": "___SChartSkeleton_1dfvr_gg_",
-  "--bgPattern": "--bgPattern_1dfvr",
-  "_bgPosition": "__bgPosition_1dfvr_gg_",
-  "--bgPosition": "--bgPosition_1dfvr",
-  "_bgSize": "__bgSize_1dfvr_gg_",
-  "--bgSize": "--bgSize_1dfvr",
-  "_bgRepeat": "__bgRepeat_1dfvr_gg_",
-  "--bgRepeat": "--bgRepeat_1dfvr"
-});
+  "__SChartSkeleton": "___SChartSkeleton_1oiqb_gg_",
+  "--bgPattern": "--bgPattern_1oiqb",
+  "_bgPosition": "__bgPosition_1oiqb_gg_",
+  "--bgPosition": "--bgPosition_1oiqb",
+  "_bgSize": "__bgSize_1oiqb_gg_",
+  "--bgSize": "--bgSize_1oiqb",
+  "_bgRepeat": "__bgRepeat_1oiqb_gg_",
+  "--bgRepeat": "--bgRepeat_1oiqb"
+}); // TODO: replace it with babel-plugin-inline-import/or vite plugin.
+// @ts-ignore
 const areaLinearSvg = "PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9Ijg4IiB2aWV3Qm94PSIwIDAgMTI4IDg4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNjMuOTk5OCA0NS45Mzk0QzMyLjAwMDEgNDUuOTM5NCAzMi4wMDAxIDEyIDAgMTJWNzZIMTI4VjEyQzk1Ljk5OTkgMTIgOTUuOTk5OSA0NS45Mzk0IDYzLjk5OTggNDUuOTM5NFoiIGZpbGw9IiNFMEUxRTkiIGZpbGwtb3BhY2l0eT0iMC44Ii8+Cjwvc3ZnPgo=";
+// TODO: replace it with babel-plugin-inline-import/or vite plugin.
+// @ts-ignore
 const areaMonotoneSvg = "PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9Ijg4IiB2aWV3Qm94PSIwIDAgMTI4IDg4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNjMuOTk5OCA0NS45Mzk0TDAgMTJWNzZIMTI4VjEyTDYzLjk5OTggNDUuOTM5NFoiIGZpbGw9IiNFMEUxRTkiIGZpbGwtb3BhY2l0eT0iMC44Ii8+Cjwvc3ZnPgo=";
+const pattern = {
+  linear: areaLinearSvg,
+  monotone: areaMonotoneSvg
+};
 function AreaChartSkeleton(props) {
   var _ref = arguments[0],
     _ref2;
   const SChartSkeleton = Skeleton;
-  const patternBase64 = {
-    linear: areaLinearSvg,
-    monotone: areaMonotoneSvg
-  }[props.type ?? 'linear'];
   return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SChartSkeleton, _ref2.cn("SChartSkeleton", {
     ..._assignProps({
       "bgRepeat": 'repeat-x',
       "bgPosition": 'left bottom',
       "bgSize": 'auto 50%',
-      "bgPattern": `url(data:image/svg+xml;base64,${patternBase64})`
+      "bgPattern": `url(data:image/svg+xml;base64,${pattern[props.type ?? 'linear']})`
     }, _ref)
   }));
 }

package/lib/es6/charts/Area/Area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Area.js","names":["createComponent","Root","sstyled","React","Skeleton","styles","_sstyled","insert","areaLinearSvg","areaMonotoneSvg","pattern","linear","monotone","AreaChartSkeleton","props","_ref","arguments[0]","_ref2","SChartSkeleton","createElement","cn","_assignProps","type"],"sources":["../../../../src/charts/Area/Area.tsx"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport { createComponent, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport type { NSSkeletonAreaChart } from './Area.type';\nimport { Skeleton } from '../../Skeleton';\nimport styles from '../../style/chart.shadow.css';\n\n// TODO: replace it with babel-plugin-inline-import/or vite plugin.\n// @ts-ignore\nconst areaLinearSvg = preval`\nmodule.exports = btoa(require('fs').readFileSync(__dirname + '/../../svg/area-chart-linear.svg'))\n`;\n// TODO: replace it with babel-plugin-inline-import/or vite plugin.\n// @ts-ignore\nconst areaMonotoneSvg = preval`\nmodule.exports = btoa(require('fs').readFileSync(__dirname + '/../../svg/area-chart-monotone.svg'))\n`;\n\nconst pattern = {\n  linear: areaLinearSvg,\n  monotone: areaMonotoneSvg,\n};\n\nfunction AreaChartSkeleton(props: Intergalactic.InternalTypings.InferComponentProps<NSSkeletonAreaChart.Component>) {\n  const SChartSkeleton = Root;\n  return sstyled(styles)(\n    <SChartSkeleton\n      render={Skeleton}\n      bgRepeat='repeat-x'\n      bgPosition='left bottom'\n      bgSize='auto 50%'\n      bgPattern={`url(data:image/svg+xml;base64,${pattern[props.type ?? 'linear']})`}\n    />,\n  );\n}\n\nexport default createComponent(AreaChartSkeleton) as NSSkeletonAreaChart.Component;\n"],"mappings":";;AACA,SAASA,eAAe,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AAC9D,OAAOC,KAAK,MAAM,OAAO;AAGzB,SAASC,QAAQ,QAAQ,gBAAgB;AAAC;AAAA,MAAAC,MAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA,IAG1C;AACA;AACA,MAAMC,aAAa,yVAElB;AACD;AACA;AACA,MAAMC,eAAe,iRAEpB;AAED,MAAMC,OAAO,GAAG;EACdC,MAAM,EAAEH,aAAa;EACrBI,QAAQ,EAAEH;AACZ,CAAC;AAED,SAASI,iBAAiBA,CAACC,KAAuF,EAAE;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EAClH,MAAMC,cAAc,GAGRd,QAAQ;EAFpB,OAAAa,KAAA,GAAOf,OAAO,CAACG,MAAM,CAAC,eACpBF,KAAA,CAAAgB,aAAA,CAACD,cAAc,EAAAD,KAAA,CAAAG,EAAA;IAAA,GAAAC,YAAA;MAAA,YAEJ,UAAU;MAAA,cACR,aAAa;MAAA,UACjB,UAAU;MAAA,aACN,iCAAiCX,OAAO,CAACI,KAAK,CAACQ,IAAI,IAAI,QAAQ,CAAC;IAAG,GAAAP,IAAA;EAAA,EAC/E,CAAC;AAEN;AAEA,eAAef,eAAe,CAACa,iBAAiB,CAAC","ignoreList":[]}

package/lib/es6/charts/Area/Area.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Area.type.js.map

package/lib/es6/charts/Area/Area.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Area.type.js","names":[],"sources":["../../../../src/charts/Area/Area.type.ts"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\n\nimport type { NSSkeleton } from '../../Skeleton.type';\n\ndeclare namespace NSSkeletonAreaChart {\n    type Props = NSSkeleton.Props & {\n      /** Controls the area curve interpolation style for the skeleton pattern */\n      type?: 'linear' | 'monotone';\n    };\n    type Component = Intergalactic.Component<'svg', Props>;\n}\n\n/** @deprecated It will be removed in v18. */\nexport type AreaChartSkeletonProps = NSSkeletonAreaChart.Props;\n\nexport type { NSSkeletonAreaChart };\n"],"mappings":"","ignoreList":[]}

package/lib/es6/{Charts → charts/Bar}/Bar.js

@@ -2,46 +2,52 @@ import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
 import { createComponent, Root, sstyled } from '@semcore/core';
 import React from 'react';
-import { Skeleton } from '../Skeleton';
-/*!__reshadow-styles__:"../style/chart.shadow.css"*/
-const styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SChartSkeleton_1dfvr_gg_{height:200px;width:100%;background-image:var(--bgPattern_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgPosition_1dfvr_gg_{background-position:var(--bgPosition_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgSize_1dfvr_gg_{background-size:var(--bgSize_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgRepeat_1dfvr_gg_{background-repeat:var(--bgRepeat_1dfvr)}", /*__inner_css_end__*/"1dfvr_gg_"),
+import { Skeleton } from '../../Skeleton';
+/*!__reshadow-styles__:"../../style/chart.shadow.css"*/
+const styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SChartSkeleton_1oiqb_gg_{height:200px;width:100%;background-image:var(--bgPattern_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgPosition_1oiqb_gg_{background-position:var(--bgPosition_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgSize_1oiqb_gg_{background-size:var(--bgSize_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgRepeat_1oiqb_gg_{background-repeat:var(--bgRepeat_1oiqb)}", /*__inner_css_end__*/"1oiqb_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SChartSkeleton": "___SChartSkeleton_1dfvr_gg_",
-  "--bgPattern": "--bgPattern_1dfvr",
-  "_bgPosition": "__bgPosition_1dfvr_gg_",
-  "--bgPosition": "--bgPosition_1dfvr",
-  "_bgSize": "__bgSize_1dfvr_gg_",
-  "--bgSize": "--bgSize_1dfvr",
-  "_bgRepeat": "__bgRepeat_1dfvr_gg_",
-  "--bgRepeat": "--bgRepeat_1dfvr"
-});
+  "__SChartSkeleton": "___SChartSkeleton_1oiqb_gg_",
+  "--bgPattern": "--bgPattern_1oiqb",
+  "_bgPosition": "__bgPosition_1oiqb_gg_",
+  "--bgPosition": "--bgPosition_1oiqb",
+  "_bgSize": "__bgSize_1oiqb_gg_",
+  "--bgSize": "--bgSize_1oiqb",
+  "_bgRepeat": "__bgRepeat_1oiqb_gg_",
+  "--bgRepeat": "--bgRepeat_1oiqb"
+}); // TODO: replace it with babel-plugin-inline-import/or vite plugin.
+// @ts-ignore
 const barVerticalSvg = "PHN2ZyB3aWR0aD0iMTcyIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE3MiAxNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDBIMTIwQzEyMi4yMDkgMCAxMjQgMS43OTA4NiAxMjQgNFYxMkMxMjQgMTQuMjA5MSAxMjIuMjA5IDE2IDEyMCAxNkgwVjBaIiBmaWxsPSIjRTBFMUU5IiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8cGF0aCBkPSJNMCAyOEgxNTZDMTU4LjIwOSAyOCAxNjAgMjkuNzkwOSAxNjAgMzJWNDBDMTYwIDQyLjIwOTEgMTU4LjIwOSA0NCAxNTYgNDRIMFYyOFoiIGZpbGw9IiNFMEUxRTkiIGZpbGwtb3BhY2l0eT0iMC44Ii8+CjxwYXRoIGQ9Ik0wIDU2SDEzOEMxNDAuMjA5IDU2IDE0MiA1Ny43OTA5IDE0MiA2MFY2OEMxNDIgNzAuMjA5MSAxNDAuMjA5IDcyIDEzOCA3MkgwVjU2WiIgZmlsbD0iI0UwRTFFOSIgZmlsbC1vcGFjaXR5PSIwLjgiLz4KPHBhdGggZD0iTTAgODRIMTU2QzE1OC4yMDkgODQgMTYwIDg1Ljc5MDkgMTYwIDg4Vjk2QzE2MCA5OC4yMDkxIDE1OC4yMDkgMTAwIDE1NiAxMDBIMFY4NFoiIGZpbGw9IiNFMEUxRTkiIGZpbGwtb3BhY2l0eT0iMC44Ii8+CjxwYXRoIGQ9Ik0wIDExMkgxMTZDMTE4LjIwOSAxMTIgMTIwIDExMy43OTEgMTIwIDExNlYxMjRDMTIwIDEyNi4yMDkgMTE4LjIwOSAxMjggMTE2IDEyOEgwVjExMloiIGZpbGw9IiNFMEUxRTkiIGZpbGwtb3BhY2l0eT0iMC44Ii8+Cjwvc3ZnPgo=";
+// TODO: replace it with babel-plugin-inline-import/or vite plugin.
+// @ts-ignore
 const barHorizontalSvg = "PHN2ZyB3aWR0aD0iMTU2IiBoZWlnaHQ9IjE2MCIgdmlld0JveD0iMCAwIDE1NiAxNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMiAxNkMxMiAxMy43OTA5IDEzLjc5MDkgMTIgMTYgMTJIMjNDMjUuMjA5MSAxMiAyNyAxMy43OTA5IDI3IDE2VjE0OEgxMlYxNloiIGZpbGw9IiNFMEUxRTkiIGZpbGwtb3BhY2l0eT0iMC44Ii8+CjxwYXRoIGQ9Ik01MSA0MkM1MSAzOS43OTA5IDUyLjc5MDkgMzggNTUgMzhINjJDNjQuMjA5MSAzOCA2NiAzOS43OTA5IDY2IDQyVjE0OEg1MVY0MloiIGZpbGw9IiNFMEUxRTkiIGZpbGwtb3BhY2l0eT0iMC44Ii8+CjxwYXRoIGQ9Ik05MCA2M0M5MCA2MC43OTA5IDkxLjc5MDkgNTkgOTQgNTlIMTAxQzEwMy4yMDkgNTkgMTA1IDYwLjc5MDkgMTA1IDYzVjE0OEg5MFY2M1oiIGZpbGw9IiNFMEUxRTkiIGZpbGwtb3BhY2l0eT0iMC44Ii8+CjxwYXRoIGQ9Ik0xMjkgMzBDMTI5IDI3Ljc5MDkgMTMwLjc5MSAyNiAxMzMgMjZIMTQwQzE0Mi4yMDkgMjYgMTQ0IDI3Ljc5MDkgMTQ0IDMwVjE0OEgxMjlWMzBaIiBmaWxsPSIjRTBFMUU5IiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8L3N2Zz4K";
+const pattern = {
+  vertical: barVerticalSvg,
+  horizontal: barHorizontalSvg
+};
+const repeat = {
+  vertical: 'repeat-y',
+  horizontal: 'repeat-x'
+};
+const position = {
+  vertical: 'left top',
+  horizontal: 'left bottom'
+};
+const size = {
+  vertical: 'contain',
+  horizontal: 'auto 50%'
+};
 function BarChartSkeleton(props) {
   var _ref = arguments[0],
     _ref2;
   const SChartSkeleton = Skeleton;
   const layout = props.layout ?? 'horizontal';
-  const patternBase64 = {
-    vertical: barVerticalSvg,
-    horizontal: barHorizontalSvg
-  }[layout];
   return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SChartSkeleton, _ref2.cn("SChartSkeleton", {
     ..._assignProps({
-      "bgRepeat": {
-        vertical: 'repeat-y',
-        horizontal: 'repeat-x'
-      }[layout],
-      "bgPosition": {
-        vertical: 'left top',
-        horizontal: 'left bottom'
-      }[layout],
-      "bgSize": {
-        vertical: 'contain',
-        horizontal: 'auto 50%'
-      }[layout],
-      "bgPattern": `url(data:image/svg+xml;base64,${patternBase64})`
+      "bgRepeat": repeat[layout],
+      "bgPosition": position[layout],
+      "bgSize": size[layout],
+      "bgPattern": `url(data:image/svg+xml;base64,${pattern[layout]})`
     }, _ref)
   }));
 }

package/lib/es6/charts/Bar/Bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.js","names":["createComponent","Root","sstyled","React","Skeleton","styles","_sstyled","insert","barVerticalSvg","barHorizontalSvg","pattern","vertical","horizontal","repeat","position","size","BarChartSkeleton","props","_ref","arguments[0]","_ref2","SChartSkeleton","layout","createElement","cn","_assignProps"],"sources":["../../../../src/charts/Bar/Bar.tsx"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport { createComponent, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport type { NSSkeletonBarChart } from './Bar.type';\nimport { Skeleton } from '../../Skeleton';\nimport styles from '../../style/chart.shadow.css';\n\n// TODO: replace it with babel-plugin-inline-import/or vite plugin.\n// @ts-ignore\n\nconst barVerticalSvg = preval`\nmodule.exports = btoa(require('fs').readFileSync(__dirname + '/../../svg/bar-chart-vertical.svg'))\n`;\n// TODO: replace it with babel-plugin-inline-import/or vite plugin.\n// @ts-ignore\nconst barHorizontalSvg = preval`\nmodule.exports = btoa(require('fs').readFileSync(__dirname + '/../../svg/bar-chart-horizontal.svg'))\n`;\n\nconst pattern = { vertical: barVerticalSvg, horizontal: barHorizontalSvg };\nconst repeat = { vertical: 'repeat-y', horizontal: 'repeat-x' };\nconst position = { vertical: 'left top', horizontal: 'left bottom' };\nconst size = { vertical: 'contain', horizontal: 'auto 50%' };\n\nfunction BarChartSkeleton(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSkeletonBarChart.Component>,\n) {\n  const SChartSkeleton = Root;\n  const layout = props.layout ?? 'horizontal';\n  return sstyled(styles)(\n    <SChartSkeleton\n      render={Skeleton}\n      bgRepeat={repeat[layout]}\n      bgPosition={position[layout]}\n      bgSize={size[layout]}\n      bgPattern={`url(data:image/svg+xml;base64,${pattern[layout]})`}\n    />,\n  );\n}\n\nexport default createComponent(BarChartSkeleton) as NSSkeletonBarChart.Component;\n"],"mappings":";;AACA,SAASA,eAAe,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AAC9D,OAAOC,KAAK,MAAM,OAAO;AAGzB,SAASC,QAAQ,QAAQ,gBAAgB;AAAC;AAAA,MAAAC,MAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA,IAG1C;AACA;AAEA,MAAMC,cAAc,69BAEnB;AACD;AACA;AACA,MAAMC,gBAAgB,izBAErB;AAED,MAAMC,OAAO,GAAG;EAAEC,QAAQ,EAAEH,cAAc;EAAEI,UAAU,EAAEH;AAAiB,CAAC;AAC1E,MAAMI,MAAM,GAAG;EAAEF,QAAQ,EAAE,UAAU;EAAEC,UAAU,EAAE;AAAW,CAAC;AAC/D,MAAME,QAAQ,GAAG;EAAEH,QAAQ,EAAE,UAAU;EAAEC,UAAU,EAAE;AAAc,CAAC;AACpE,MAAMG,IAAI,GAAG;EAAEJ,QAAQ,EAAE,SAAS;EAAEC,UAAU,EAAE;AAAW,CAAC;AAE5D,SAASI,gBAAgBA,CACvBC,KAAsF,EACtF;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EACA,MAAMC,cAAc,GAIRjB,QAAQ;EAHpB,MAAMkB,MAAM,GAAGL,KAAK,CAACK,MAAM,IAAI,YAAY;EAC3C,OAAAF,KAAA,GAAOlB,OAAO,CAACG,MAAM,CAAC,eACpBF,KAAA,CAAAoB,aAAA,CAACF,cAAc,EAAAD,KAAA,CAAAI,EAAA;IAAA,GAAAC,YAAA;MAAA,YAEHZ,MAAM,CAACS,MAAM,CAAC;MAAA,cACZR,QAAQ,CAACQ,MAAM,CAAC;MAAA,UACpBP,IAAI,CAACO,MAAM,CAAC;MAAA,aACT,iCAAiCZ,OAAO,CAACY,MAAM,CAAC;IAAG,GAAAJ,IAAA;EAAA,EAC/D,CAAC;AAEN;AAEA,eAAelB,eAAe,CAACgB,gBAAgB,CAAC","ignoreList":[]}

package/lib/es6/charts/Bar/Bar.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Bar.type.js.map

package/lib/es6/charts/Bar/Bar.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.type.js","names":[],"sources":["../../../../src/charts/Bar/Bar.type.ts"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\n\nimport type { NSSkeleton } from '../../Skeleton.type';\n\ndeclare namespace NSSkeletonBarChart {\n    type Props = NSSkeleton.Props & {\n      /** Controls the orientation of the bar chart skeleton */\n      layout?: 'horizontal' | 'vertical';\n    };\n    type Component = Intergalactic.Component<'svg', Props>;\n}\n\n/** @deprecated It will be removed in v18. */\nexport type BarChartSkeletonProps = NSSkeletonBarChart.Props;\n\nexport type { NSSkeletonBarChart };\n"],"mappings":"","ignoreList":[]}

package/lib/es6/{Charts → charts/Bubble}/Bubble.js

@@ -2,20 +2,21 @@ import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
 import { createComponent, Root, sstyled } from '@semcore/core';
 import React from 'react';
-import { Skeleton } from '../Skeleton';
-/*!__reshadow-styles__:"../style/chart.shadow.css"*/
-const styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SChartSkeleton_1dfvr_gg_{height:200px;width:100%;background-image:var(--bgPattern_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgPosition_1dfvr_gg_{background-position:var(--bgPosition_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgSize_1dfvr_gg_{background-size:var(--bgSize_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgRepeat_1dfvr_gg_{background-repeat:var(--bgRepeat_1dfvr)}", /*__inner_css_end__*/"1dfvr_gg_"),
+import { Skeleton } from '../../Skeleton';
+/*!__reshadow-styles__:"../../style/chart.shadow.css"*/
+const styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SChartSkeleton_1oiqb_gg_{height:200px;width:100%;background-image:var(--bgPattern_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgPosition_1oiqb_gg_{background-position:var(--bgPosition_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgSize_1oiqb_gg_{background-size:var(--bgSize_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgRepeat_1oiqb_gg_{background-repeat:var(--bgRepeat_1oiqb)}", /*__inner_css_end__*/"1oiqb_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SChartSkeleton": "___SChartSkeleton_1dfvr_gg_",
-  "--bgPattern": "--bgPattern_1dfvr",
-  "_bgPosition": "__bgPosition_1dfvr_gg_",
-  "--bgPosition": "--bgPosition_1dfvr",
-  "_bgSize": "__bgSize_1dfvr_gg_",
-  "--bgSize": "--bgSize_1dfvr",
-  "_bgRepeat": "__bgRepeat_1dfvr_gg_",
-  "--bgRepeat": "--bgRepeat_1dfvr"
-});
+  "__SChartSkeleton": "___SChartSkeleton_1oiqb_gg_",
+  "--bgPattern": "--bgPattern_1oiqb",
+  "_bgPosition": "__bgPosition_1oiqb_gg_",
+  "--bgPosition": "--bgPosition_1oiqb",
+  "_bgSize": "__bgSize_1oiqb_gg_",
+  "--bgSize": "--bgSize_1oiqb",
+  "_bgRepeat": "__bgRepeat_1oiqb_gg_",
+  "--bgRepeat": "--bgRepeat_1oiqb"
+}); // TODO: replace it with babel-plugin-inline-import/or vite plugin.
+// @ts-ignore
 const bubbleSvg = "PHN2ZyB3aWR0aD0iMzc2IiBoZWlnaHQ9IjE2NCIgdmlld0JveD0iMCAwIDM3NiAxNjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik00OCAxNjRDNzAuMDkxNCAxNjQgODggMTQ2LjA5MSA4OCAxMjRDODggMTAxLjkwOSA3MC4wOTE0IDg0IDQ4IDg0QzI1LjkwODYgODQgOCAxMDEuOTA5IDggMTI0QzggMTQ2LjA5MSAyNS45MDg2IDE2NCA0OCAxNjRaIiBmaWxsPSIjRTBFMUU5IiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8cGF0aCBkPSJNODggNDhDMTAxLjI1NSA0OCAxMTIgMzcuMjU0OCAxMTIgMjRDMTEyIDEwLjc0NTIgMTAxLjI1NSAwIDg4IDBDNzQuNzQ1MiAwIDY0IDEwLjc0NTIgNjQgMjRDNjQgMzcuMjU0OCA3NC43NDUyIDQ4IDg4IDQ4WiIgZmlsbD0iI0UwRTFFOSIgZmlsbC1vcGFjaXR5PSIwLjgiLz4KPHBhdGggZD0iTTI5Mi41IDU1QzMwNS40NzkgNTUgMzE2IDQ0LjQ3ODcgMzE2IDMxLjVDMzE2IDE4LjUyMTMgMzA1LjQ3OSA4IDI5Mi41IDhDMjc5LjUyMSA4IDI2OSAxOC41MjEzIDI2OSAzMS41QzI2OSA0NC40Nzg3IDI3OS41MjEgNTUgMjkyLjUgNTVaIiBmaWxsPSIjRTBFMUU5IiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8cGF0aCBkPSJNMzQ0IDk4QzM1Mi44MzcgOTggMzYwIDkwLjgzNjYgMzYwIDgyQzM2MCA3My4xNjM0IDM1Mi44MzcgNjYgMzQ0IDY2QzMzNS4xNjMgNjYgMzI4IDczLjE2MzQgMzI4IDgyQzMyOCA5MC44MzY2IDMzNS4xNjMgOTggMzQ0IDk4WiIgZmlsbD0iI0UwRTFFOSIgZmlsbC1vcGFjaXR5PSIwLjgiLz4KPHBhdGggZD0iTTE4OCAxMzRDMjE2LjcxOSAxMzQgMjQwIDExMC43MTkgMjQwIDgyQzI0MCA1My4yODEyIDIxNi43MTkgMzAgMTg4IDMwQzE1OS4yODEgMzAgMTM2IDUzLjI4MTIgMTM2IDgyQzEzNiAxMTAuNzE5IDE1OS4yODEgMTM0IDE4OCAxMzRaIiBmaWxsPSIjRTBFMUU5IiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8L3N2Zz4K";
 function BubbleChartSkeleton() {
   var _ref = arguments[0],

package/lib/es6/charts/Bubble/Bubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bubble.js","names":["createComponent","Root","sstyled","React","Skeleton","styles","_sstyled","insert","bubbleSvg","BubbleChartSkeleton","_ref","arguments[0]","_ref2","SChartSkeleton","createElement","cn","_assignProps"],"sources":["../../../../src/charts/Bubble/Bubble.tsx"],"sourcesContent":["import { createComponent, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport type { NSSkeletonBubbleChart } from './Bubble.type';\nimport { Skeleton } from '../../Skeleton';\nimport styles from '../../style/chart.shadow.css';\n\n// TODO: replace it with babel-plugin-inline-import/or vite plugin.\n// @ts-ignore\nconst bubbleSvg = preval`\nmodule.exports = btoa(require('fs').readFileSync(__dirname + '/../../svg/bubble-chart.svg'))\n`;\n\nfunction BubbleChartSkeleton() {\n  const SChartSkeleton = Root;\n  return sstyled(styles)(\n    <SChartSkeleton\n      render={Skeleton}\n      bgRepeat='repeat-x'\n      bgPosition='left center'\n      bgSize='auto 50%'\n      bgPattern={`url(data:image/svg+xml;base64,${bubbleSvg})`}\n    />,\n  );\n}\n\nexport default createComponent(BubbleChartSkeleton) as NSSkeletonBubbleChart.Component;\n"],"mappings":";;AAAA,SAASA,eAAe,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AAC9D,OAAOC,KAAK,MAAM,OAAO;AAGzB,SAASC,QAAQ,QAAQ,gBAAgB;AAAC;AAAA,MAAAC,MAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA,IAG1C;AACA;AACA,MAAMC,SAAS,6xCAEd;AAED,SAASC,mBAAmBA,CAAA,EAAG;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EAC7B,MAAMC,cAAc,GAGRT,QAAQ;EAFpB,OAAAQ,KAAA,GAAOV,OAAO,CAACG,MAAM,CAAC,eACpBF,KAAA,CAAAW,aAAA,CAACD,cAAc,EAAAD,KAAA,CAAAG,EAAA;IAAA,GAAAC,YAAA;MAAA,YAEJ,UAAU;MAAA,cACR,aAAa;MAAA,UACjB,UAAU;MAAA,aACN,iCAAiCR,SAAS;IAAG,GAAAE,IAAA;EAAA,EACzD,CAAC;AAEN;AAEA,eAAeV,eAAe,CAACS,mBAAmB,CAAC","ignoreList":[]}

package/lib/es6/charts/Bubble/Bubble.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Bubble.type.js.map

package/lib/es6/charts/Bubble/Bubble.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bubble.type.js","names":[],"sources":["../../../../src/charts/Bubble/Bubble.type.ts"],"sourcesContent":["import type { NSSkeleton } from '../../Skeleton.type';\n\ndeclare namespace NSSkeletonBubbleChart {\n    type Component = NSSkeleton.Component;\n}\n\nexport type { NSSkeletonBubbleChart };\n"],"mappings":"","ignoreList":[]}

package/lib/es6/{Charts → charts/CompactHorizontalBar}/CompactHorizontalBar.js

@@ -2,20 +2,21 @@ import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
 import { createComponent, Root, sstyled } from '@semcore/core';
 import React from 'react';
-import { Skeleton } from '../Skeleton';
-/*!__reshadow-styles__:"../style/chart.shadow.css"*/
-const styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SChartSkeleton_1dfvr_gg_{height:200px;width:100%;background-image:var(--bgPattern_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgPosition_1dfvr_gg_{background-position:var(--bgPosition_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgSize_1dfvr_gg_{background-size:var(--bgSize_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgRepeat_1dfvr_gg_{background-repeat:var(--bgRepeat_1dfvr)}", /*__inner_css_end__*/"1dfvr_gg_"),
+import { Skeleton } from '../../Skeleton';
+/*!__reshadow-styles__:"../../style/chart.shadow.css"*/
+const styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SChartSkeleton_1oiqb_gg_{height:200px;width:100%;background-image:var(--bgPattern_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgPosition_1oiqb_gg_{background-position:var(--bgPosition_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgSize_1oiqb_gg_{background-size:var(--bgSize_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgRepeat_1oiqb_gg_{background-repeat:var(--bgRepeat_1oiqb)}", /*__inner_css_end__*/"1oiqb_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SChartSkeleton": "___SChartSkeleton_1dfvr_gg_",
-  "--bgPattern": "--bgPattern_1dfvr",
-  "_bgPosition": "__bgPosition_1dfvr_gg_",
-  "--bgPosition": "--bgPosition_1dfvr",
-  "_bgSize": "__bgSize_1dfvr_gg_",
-  "--bgSize": "--bgSize_1dfvr",
-  "_bgRepeat": "__bgRepeat_1dfvr_gg_",
-  "--bgRepeat": "--bgRepeat_1dfvr"
-});
+  "__SChartSkeleton": "___SChartSkeleton_1oiqb_gg_",
+  "--bgPattern": "--bgPattern_1oiqb",
+  "_bgPosition": "__bgPosition_1oiqb_gg_",
+  "--bgPosition": "--bgPosition_1oiqb",
+  "_bgSize": "__bgSize_1oiqb_gg_",
+  "--bgSize": "--bgSize_1oiqb",
+  "_bgRepeat": "__bgRepeat_1oiqb_gg_",
+  "--bgRepeat": "--bgRepeat_1oiqb"
+}); // TODO: replace it with babel-plugin-inline-import/or vite plugin.
+// @ts-ignore
 const patternBase64 = "PHN2ZyB3aWR0aD0iMTcyIiBoZWlnaHQ9IjE1NiIgdmlld0JveD0iMCAwIDE3MiAxNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTAgMEgxMjBDMTIyLjIwOSAwIDEyNCAxLjc5MDg2IDEyNCA0VjEyQzEyNCAxNC4yMDkxIDEyMi4yMDkgMTYgMTIwIDE2SDBWMFoiIGZpbGw9IiNFMEUxRTkiIGZpbGwtb3BhY2l0eT0iMC44Ii8+CiAgPHBhdGggZD0iTTAgMzJIMTU2QzE1OC4yMDkgMzIgMTYwIDMzLjc5MDkgMTYwIDM2VjQ0QzE2MCA0Ni4yMDkxIDE1OC4yMDkgNDggMTU2IDQ4SDBWMzJaIiBmaWxsPSIjRTBFMUU5IiBmaWxsLW9wYWNpdHk9IjAuOCIvPgogIDxwYXRoIGQ9Ik0wIDY0SDEzOEMxNDAuMjA5IDY0IDE0MiA2NS43OTA5IDE0MiA2OFY3NkMxNDIgNzguMjA5MSAxNDAuMjA5IDgwIDEzOCA4MEgwVjY0WiIgZmlsbD0iI0UwRTFFOSIgZmlsbC1vcGFjaXR5PSIwLjgiLz4KICA8cGF0aCBkPSJNMCA5NkgxNTZDMTU4LjIwOSA5NiAxNjAgOTcuNzkwOSAxNjAgMTAwVjEwOEMxNjAgMTEwLjIwOSAxNTguMjA5IDExMiAxNTYgMTEySDBWOTZaIiBmaWxsPSIjRTBFMUU5IiBmaWxsLW9wYWNpdHk9IjAuOCIvPgogIDxwYXRoIGQ9Ik0wIDEyOEgxMTZDMTE4LjIwOSAxMjggMTIwIDEyOS43OTEgMTIwIDEzMlYxNDBDMTIwIDE0Mi4yMDkgMTE4LjIwOSAxNDQgMTE2IDE0NEgwVjEyOFoiIGZpbGw9IiNFMEUxRTkiIGZpbGwtb3BhY2l0eT0iMC44Ii8+CiAgPC9zdmc+CiAg";
 function CompactHorizontalBarChartSkeleton() {
   var _ref = arguments[0],

package/lib/es6/charts/CompactHorizontalBar/CompactHorizontalBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompactHorizontalBar.js","names":["createComponent","Root","sstyled","React","Skeleton","styles","_sstyled","insert","patternBase64","CompactHorizontalBarChartSkeleton","_ref","arguments[0]","_ref2","SChartSkeleton","createElement","cn","_assignProps"],"sources":["../../../../src/charts/CompactHorizontalBar/CompactHorizontalBar.tsx"],"sourcesContent":["import { createComponent, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport type { NSSkeletonCompactHorizontalBar } from './CompactHorizontalBar.type';\nimport { Skeleton } from '../../Skeleton';\nimport styles from '../../style/chart.shadow.css';\n\n// TODO: replace it with babel-plugin-inline-import/or vite plugin.\n// @ts-ignore\nconst patternBase64 = preval`\nmodule.exports = btoa(require('fs').readFileSync(__dirname + '/../../svg/compact-horizontal-bar-chart.svg'))\n`;\n\nfunction CompactHorizontalBarChartSkeleton() {\n  const SChartSkeleton = Root;\n  return sstyled(styles)(\n    <SChartSkeleton\n      render={Skeleton}\n      bgRepeat='repeat-y'\n      bgPosition='left top'\n      bgSize='contain'\n      bgPattern={`url(data:image/svg+xml;base64,${patternBase64})`}\n    />,\n  );\n}\n\nexport default createComponent(CompactHorizontalBarChartSkeleton) as NSSkeletonCompactHorizontalBar.Component;\n"],"mappings":";;AAAA,SAASA,eAAe,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AAC9D,OAAOC,KAAK,MAAM,OAAO;AAGzB,SAASC,QAAQ,QAAQ,gBAAgB;AAAC;AAAA,MAAAC,MAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA,IAG1C;AACA;AACA,MAAMC,aAAa,i/BAElB;AAED,SAASC,iCAAiCA,CAAA,EAAG;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EAC3C,MAAMC,cAAc,GAGRT,QAAQ;EAFpB,OAAAQ,KAAA,GAAOV,OAAO,CAACG,MAAM,CAAC,eACpBF,KAAA,CAAAW,aAAA,CAACD,cAAc,EAAAD,KAAA,CAAAG,EAAA;IAAA,GAAAC,YAAA;MAAA,YAEJ,UAAU;MAAA,cACR,UAAU;MAAA,UACd,SAAS;MAAA,aACL,iCAAiCR,aAAa;IAAG,GAAAE,IAAA;EAAA,EAC7D,CAAC;AAEN;AAEA,eAAeV,eAAe,CAACS,iCAAiC,CAAC","ignoreList":[]}

package/lib/es6/charts/CompactHorizontalBar/CompactHorizontalBar.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CompactHorizontalBar.type.js.map

package/lib/es6/charts/CompactHorizontalBar/CompactHorizontalBar.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompactHorizontalBar.type.js","names":[],"sources":["../../../../src/charts/CompactHorizontalBar/CompactHorizontalBar.type.ts"],"sourcesContent":["import type { NSSkeleton } from '../../Skeleton.type';\n\ndeclare namespace NSSkeletonCompactHorizontalBar {\n    type Component = NSSkeleton.Component;\n}\n\nexport type { NSSkeletonCompactHorizontalBar };\n"],"mappings":"","ignoreList":[]}

package/lib/es6/{Charts → charts/Donut}/Donut.js

@@ -2,40 +2,44 @@ import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
 import { createComponent, Root, sstyled } from '@semcore/core';
 import React from 'react';
-import { Skeleton } from '../Skeleton';
-/*!__reshadow-styles__:"../style/chart.shadow.css"*/
-const styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SChartSkeleton_1dfvr_gg_{height:200px;width:100%;background-image:var(--bgPattern_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgPosition_1dfvr_gg_{background-position:var(--bgPosition_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgSize_1dfvr_gg_{background-size:var(--bgSize_1dfvr)}.___SChartSkeleton_1dfvr_gg_.__bgRepeat_1dfvr_gg_{background-repeat:var(--bgRepeat_1dfvr)}", /*__inner_css_end__*/"1dfvr_gg_"),
+import { Skeleton } from '../../Skeleton';
+/*!__reshadow-styles__:"../../style/chart.shadow.css"*/
+const styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SChartSkeleton_1oiqb_gg_{height:200px;width:100%;background-image:var(--bgPattern_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgPosition_1oiqb_gg_{background-position:var(--bgPosition_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgSize_1oiqb_gg_{background-size:var(--bgSize_1oiqb)}.___SChartSkeleton_1oiqb_gg_.__bgRepeat_1oiqb_gg_{background-repeat:var(--bgRepeat_1oiqb)}", /*__inner_css_end__*/"1oiqb_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SChartSkeleton": "___SChartSkeleton_1dfvr_gg_",
-  "--bgPattern": "--bgPattern_1dfvr",
-  "_bgPosition": "__bgPosition_1dfvr_gg_",
-  "--bgPosition": "--bgPosition_1dfvr",
-  "_bgSize": "__bgSize_1dfvr_gg_",
-  "--bgSize": "--bgSize_1dfvr",
-  "_bgRepeat": "__bgRepeat_1dfvr_gg_",
-  "--bgRepeat": "--bgRepeat_1dfvr"
-});
+  "__SChartSkeleton": "___SChartSkeleton_1oiqb_gg_",
+  "--bgPattern": "--bgPattern_1oiqb",
+  "_bgPosition": "__bgPosition_1oiqb_gg_",
+  "--bgPosition": "--bgPosition_1oiqb",
+  "_bgSize": "__bgSize_1oiqb_gg_",
+  "--bgSize": "--bgSize_1oiqb",
+  "_bgRepeat": "__bgRepeat_1oiqb_gg_",
+  "--bgRepeat": "--bgRepeat_1oiqb"
+}); // TODO: replace it with babel-plugin-inline-import or vite plugin.
+// @ts-ignore
 const donutFullSvg = "PHN2ZyB3aWR0aD0iMTgwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE4MCAxODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJwYXJhZ3JhcGg9ZmFsc2UsIGNoYXJ0IHR5cGU9JiMyNDA7JiMxNTk7JiMxNDE7JiMxNjk7IGRvbnV0IGNoYXJ0LCBwaWN0dXJlIGRpdj1mYWxzZSI+CjxnIGlkPSJkb251dC1jaGFydCI+CjxwYXRoIGQ9Ik0xNTguODYzIDE0NS43NDJDMTcxLjQ1MyAxMzAuMjU5IDE4MCAxMTEuNTExIDE4MCA5MEMxODAgNjguNjE2OCAxNzIuNTQzIDQ4Ljk3NTMgMTYwLjA4NyAzMy41MzQzTDEzNy43MzEgNTUuMTQ1OUMxNTEuNzk5IDgyLjA2NzMgMTUxLjQ3NSA5NS40NDAzIDEzNy43OTMgMTIzLjcyNEwxNTguODYzIDE0NS43NDJaIiBmaWxsPSIjRTBFMUU5IiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8cGF0aCBkPSJNOTAgMTgwQzExNy4xMTIgMTgwIDE0MC40MjUgMTY3LjAxMSAxNTYuOTI1IDE0OC4wNDZMMTM1LjgyNyAxMjZDMTI0LjgyNyAxMzkuNTcgMTA4LjMzIDE0OSA4OS41IDE0OUM1Ni4zNjI5IDE0OSAyOSAxMjMuMTM3IDI5IDkwQzI4LjU2MzEgNTcuODU3NiA1NC44NzYyIDMxLjU3OTkgODcgMzBWMC4wNDkwNThDMzguNjgzMSAxLjYzMTUyIDAgNDEuMjk4MyAwIDkwQzAgMTM5LjcwNiA0MC4yOTQ0IDE4MCA5MCAxODBaIiBmaWxsPSIjRTBFMUU5IiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8cGF0aCBkPSJNMTU4LjA0NiAzMS4zMzI3TDEzNS42MzQgNTNDMTI1LjEzMiAzOS42MTYxIDEwOS44NzQgMzAuNDU1MiA5MCAzMFYwQzExNy45MTUgMCAxNDEuNTM4IDExLjM4NTEgMTU4LjA0NiAzMS4zMzI3WiIgZmlsbD0iI0UwRTFFOSIgZmlsbC1vcGFjaXR5PSIwLjgiLz4KPC9nPgo8L2c+Cjwvc3ZnPgo=";
+// TODO: replace it with babel-plugin-inline-import/or vite plugin.
+// @ts-ignore
 const donutHalfSvg = "PHN2ZyB3aWR0aD0iMTgwIiBoZWlnaHQ9IjkwIiB2aWV3Qm94PSIwIDAgMTgwIDkwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTU2LjkyNSAzMS45NTM4QzE0MC40MjUgMTIuOTg4NiAxMTcuMTEyIDAgOTAgMEM0MC4yOTQ0IDAgMCA0MC4yOTQ0IDAgOTBIMjlDMjkgNTYuODYyOSA1Ni4zNjI5IDMxIDg5LjUgMzFDMTA4LjMzIDMxIDEyNC44MjcgNDAuNDI5NiAxMzUuODI3IDU0TDE1Ni45MjUgMzEuOTUzOFoiIGZpbGw9IiNFMEUxRTkiIGZpbGwtb3BhY2l0eT0iMC44Ii8+CjxwYXRoIGQ9Ik0xODAgOTBIMTQ4LjE1MkMxNDcuODg2IDgwLjA5ODkgMTQ0LjM5NSA2OS45MjMzIDEzNy43OTMgNTYuMjc2NEwxNTguODYzIDM0LjI1ODFDMTcxLjQ1MyA0OS43NDA3IDE4MCA2OC40ODkgMTgwIDkwWiIgZmlsbD0iI0UwRTFFOSIgZmlsbC1vcGFjaXR5PSIwLjgiLz4KPC9zdmc+Cg==";
+const pattern = {
+  true: donutHalfSvg,
+  false: donutFullSvg
+};
+const position = {
+  true: 'center bottom',
+  false: 'center'
+};
 function DonutChartSkeleton(props) {
   var _ref = arguments[0],
     _ref2;
   const SChartSkeleton = Skeleton;
-  const halfsize = props.halfsize ?? false;
-  const patternBase64 = {
-    true: donutHalfSvg,
-    false: donutFullSvg
-  }[halfsize];
+  const halfsize = (props.halfsize ?? false).toString();
   return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SChartSkeleton, _ref2.cn("SChartSkeleton", {
     ..._assignProps({
       "bgRepeat": 'no-repeat',
-      "bgPosition": {
-        true: 'center bottom',
-        false: 'center'
-      }[halfsize],
+      "bgPosition": position[halfsize],
       "bgSize": 'contain',
-      "bgPattern": `url(data:image/svg+xml;base64,${patternBase64})`
+      "bgPattern": `url(data:image/svg+xml;base64,${pattern[halfsize]})`
     }, _ref)
   }));
 }

package/lib/es6/charts/Donut/Donut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Donut.js","names":["createComponent","Root","sstyled","React","Skeleton","styles","_sstyled","insert","donutFullSvg","donutHalfSvg","pattern","true","false","position","DonutChartSkeleton","props","_ref","arguments[0]","_ref2","SChartSkeleton","halfsize","toString","createElement","cn","_assignProps"],"sources":["../../../../src/charts/Donut/Donut.tsx"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport { createComponent, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport type { NSSkeletonDonutChart } from './Donut.type';\nimport { Skeleton } from '../../Skeleton';\nimport styles from '../../style/chart.shadow.css';\n\n// TODO: replace it with babel-plugin-inline-import or vite plugin.\n// @ts-ignore\nconst donutFullSvg = preval`\nmodule.exports = btoa(require('fs').readFileSync(__dirname + '/../../svg/donut-chart.svg'))\n`;\n// TODO: replace it with babel-plugin-inline-import/or vite plugin.\n// @ts-ignore\nconst donutHalfSvg = preval`\nmodule.exports = btoa(require('fs').readFileSync(__dirname + '/../../svg/donut-chart-halfsize.svg'))\n`;\n\nconst pattern: Record<string, string> = {\n  true: donutHalfSvg,\n  false: donutFullSvg,\n};\nconst position: Record<string, string> = {\n  true: 'center bottom',\n  false: 'center',\n};\n\nfunction DonutChartSkeleton(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSSkeletonDonutChart.Component>,\n) {\n  const SChartSkeleton = Root;\n  const halfsize = (props.halfsize ?? false).toString();\n  return sstyled(styles)(\n    <SChartSkeleton\n      render={Skeleton}\n      bgRepeat='no-repeat'\n      bgPosition={position[halfsize]}\n      bgSize='contain'\n      bgPattern={`url(data:image/svg+xml;base64,${pattern[halfsize]})`}\n    />,\n  );\n}\n\nexport default createComponent(DonutChartSkeleton) as NSSkeletonDonutChart.Component;\n"],"mappings":";;AACA,SAASA,eAAe,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AAC9D,OAAOC,KAAK,MAAM,OAAO;AAGzB,SAASC,QAAQ,QAAQ,gBAAgB;AAAC;AAAA,MAAAC,MAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA,IAG1C;AACA;AACA,MAAMC,YAAY,6qCAEjB;AACD;AACA;AACA,MAAMC,YAAY,6nBAEjB;AAED,MAAMC,OAA+B,GAAG;EACtCC,IAAI,EAAEF,YAAY;EAClBG,KAAK,EAAEJ;AACT,CAAC;AACD,MAAMK,QAAgC,GAAG;EACvCF,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE;AACT,CAAC;AAED,SAASE,kBAAkBA,CACzBC,KAAwF,EACxF;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EACA,MAAMC,cAAc,GAIRf,QAAQ;EAHpB,MAAMgB,QAAQ,GAAG,CAACL,KAAK,CAACK,QAAQ,IAAI,KAAK,EAAEC,QAAQ,CAAC,CAAC;EACrD,OAAAH,KAAA,GAAOhB,OAAO,CAACG,MAAM,CAAC,eACpBF,KAAA,CAAAmB,aAAA,CAACH,cAAc,EAAAD,KAAA,CAAAK,EAAA;IAAA,GAAAC,YAAA;MAAA,YAEJ,WAAW;MAAA,cACRX,QAAQ,CAACO,QAAQ,CAAC;MAAA,UACvB,SAAS;MAAA,aACL,iCAAiCV,OAAO,CAACU,QAAQ,CAAC;IAAG,GAAAJ,IAAA;EAAA,EACjE,CAAC;AAEN;AAEA,eAAehB,eAAe,CAACc,kBAAkB,CAAC","ignoreList":[]}

package/lib/es6/charts/Donut/Donut.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Donut.type.js.map

package/lib/es6/charts/Donut/Donut.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Donut.type.js","names":[],"sources":["../../../../src/charts/Donut/Donut.type.ts"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\n\nimport type { NSSkeleton } from '../../Skeleton.type';\n\ndeclare namespace NSSkeletonDonutChart {\n    type Props = NSSkeleton.Props & {\n      /** Semi donut */\n      halfsize?: boolean;\n    };\n    type Component = Intergalactic.Component<'svg', Props>;\n}\n\n/** @deprecated It will be removed in v18. */\nexport type DonutChartSkeletonProps = NSSkeletonDonutChart.Props;\n\nexport type { NSSkeletonDonutChart };\n"],"mappings":"","ignoreList":[]}