@semcore/d3-chart 3.60.2-prerelease.0 → 3.61.0-prerelease.0

package/lib/esm/CompactHorizontalBar.mjs

@@ -1,71 +1,72 @@
+import "@babel/runtime/helpers/esm/readOnlyError";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import { sstyled as sstyled$1, Component, assignProps } from "@semcore/core";
+import { sstyled, Component, assignProps } from "@semcore/core";
+import { Box } from "@semcore/base-components";
+import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
+import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+import trottle from "@semcore/core/lib/utils/rafTrottle";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import React from "react";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
-import createElement from "./createElement.mjs";
 import AnimatedClipPath from "./AnimatedClipPath.mjs";
-import { scaleToBand, roundedPath, eventToPoint } from "./utils.mjs";
+import createElement from "./createElement.mjs";
 import { PatternFill } from "./Pattern.mjs";
-import trottle from "@semcore/utils/lib/rafTrottle";
 import Tooltip from "./Tooltip.mjs";
-import { callAllEventHandlers } from "@semcore/utils/lib/assignProps";
-import canUseDOM from "@semcore/utils/lib/canUseDOM";
-import { Box } from "@semcore/flex-box";
+import { scaleToBand, roundedPath, eventToPoint } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/bar.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SBar_1rmdr_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_1rmdr);transition-timing-function:ease-in-out}.___SBar_1rmdr_gg_.__color_1rmdr_gg_{fill:var(--color_1rmdr)}.___SBar_1rmdr_gg_.__pattern_1rmdr_gg_.__color_1rmdr_gg_{fill:var(--pattern_1rmdr);stroke:var(--color_1rmdr);stroke-width:1px}.___SBar_1rmdr_gg_.__hide_1rmdr_gg_{display:none}.___SBar_1rmdr_gg_.__transparent_1rmdr_gg_{opacity:.3}.___SBackground_1rmdr_gg_.__onClick_1rmdr_gg_,.___SBar_1rmdr_gg_.__onClick_1rmdr_gg_{cursor:pointer}.___SBackground_1rmdr_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_1rmdr_gg_{display:flex;justify-content:space-between}.___SBarLabel_1rmdr_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_1rmdr_gg_,.___SBarPercent_1rmdr_gg_,.___SBarValue_1rmdr_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_1rmdr_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_1rmdr_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_1rmdr_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    ".___SBar_1l5sd_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210));transition-property:height,width,y;transition-duration:var(--duration_1l5sd);transition-timing-function:ease-in-out}.___SBar_1l5sd_gg_.__color_1l5sd_gg_{fill:var(--color_1l5sd)}.___SBar_1l5sd_gg_.__pattern_1l5sd_gg_.__color_1l5sd_gg_{fill:var(--pattern_1l5sd);stroke:var(--color_1l5sd);stroke-width:1px}.___SBar_1l5sd_gg_.__hide_1l5sd_gg_{display:none}.___SBar_1l5sd_gg_.__transparent_1l5sd_gg_{opacity:.3}.___SBackground_1l5sd_gg_.__onClick_1l5sd_gg_,.___SBar_1l5sd_gg_.__onClick_1l5sd_gg_{cursor:pointer}.___SBackground_1l5sd_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242))}.___SBarAnnotation_1l5sd_gg_{display:flex;justify-content:space-between}.___SBarLabel_1l5sd_gg_,.___SBarPercent_1l5sd_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarLabel_1l5sd_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));margin-right:auto}.___SBarPercent_1l5sd_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));margin-right:var(--intergalactic-spacing-2x, 8px)}@supports (color:color(display-p3 0 0 0%)){.___SBarPercent_1l5sd_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBarPercent_1l5sd_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SBarValue_1l5sd_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);text-align:right}.___SCompactHorizontalBarHoverRect_1l5sd_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(0, 22, 16, 0.028))}",
     /*__inner_css_end__*/
-    "1rmdr_gg_"
+    "1l5sd_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SBar": "___SBar_1rmdr_gg_",
-    "--duration": "--duration_1rmdr",
-    "_color": "__color_1rmdr_gg_",
-    "--color": "--color_1rmdr",
-    "_pattern": "__pattern_1rmdr_gg_",
-    "--pattern": "--pattern_1rmdr",
-    "_hide": "__hide_1rmdr_gg_",
-    "_transparent": "__transparent_1rmdr_gg_",
-    "_onClick": "__onClick_1rmdr_gg_",
-    "__SBackground": "___SBackground_1rmdr_gg_",
-    "__SBarAnnotation": "___SBarAnnotation_1rmdr_gg_",
-    "__SBarLabel": "___SBarLabel_1rmdr_gg_",
-    "__SBarPercent": "___SBarPercent_1rmdr_gg_",
-    "__SBarValue": "___SBarValue_1rmdr_gg_",
-    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1rmdr_gg_"
+    "__SBar": "___SBar_1l5sd_gg_",
+    "--duration": "--duration_1l5sd",
+    "_color": "__color_1l5sd_gg_",
+    "--color": "--color_1l5sd",
+    "_pattern": "__pattern_1l5sd_gg_",
+    "--pattern": "--pattern_1l5sd",
+    "_hide": "__hide_1l5sd_gg_",
+    "_transparent": "__transparent_1l5sd_gg_",
+    "_onClick": "__onClick_1l5sd_gg_",
+    "__SBackground": "___SBackground_1l5sd_gg_",
+    "__SBarAnnotation": "___SBarAnnotation_1l5sd_gg_",
+    "__SBarLabel": "___SBarLabel_1l5sd_gg_",
+    "__SBarPercent": "___SBarPercent_1l5sd_gg_",
+    "__SBarValue": "___SBarValue_1l5sd_gg_",
+    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1l5sd_gg_"
   })
 );
 var MIN_WIDTH = 4;
 var barHeight = 20;
 var hoverOffset = 6;
-var CompactHorizontalBarRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(CompactHorizontalBarRoot2, _Component);
-  var _super = _createSuper(CompactHorizontalBarRoot2);
+var CompactHorizontalBarRoot = /* @__PURE__ */ (function(_Component) {
   function CompactHorizontalBarRoot2() {
     var _this;
     _classCallCheck(this, CompactHorizontalBarRoot2);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "percentFormatter", null);
-    _defineProperty(_assertThisInitialized(_this), "percentFormatterLocale", null);
-    _defineProperty(_assertThisInitialized(_this), "valueFormatter", null);
-    _defineProperty(_assertThisInitialized(_this), "valueFormatterLocale", null);
+    _this = _callSuper(this, CompactHorizontalBarRoot2, [].concat(args));
+    _defineProperty(_this, "state", {
+      indexToHover: null
+    });
+    _defineProperty(_this, "percentFormatter", null);
+    _defineProperty(_this, "percentFormatterLocale", null);
+    _defineProperty(_this, "valueFormatter", null);
+    _defineProperty(_this, "valueFormatterLocale", null);
     return _this;
   }
-  _createClass(CompactHorizontalBarRoot2, [{
+  _inherits(CompactHorizontalBarRoot2, _Component);
+  return _createClass(CompactHorizontalBarRoot2, [{
     key: "getBarProps",
     value: function getBarProps(_props, index) {
       return {
@@ -187,7 +188,12 @@ var CompactHorizontalBarRoot = /* @__PURE__ */ function(_Component) {
         getBarData: function getBarData(index2) {
           return _this2.computeBarData(data[index2], index2);
         },
-        render: index === 0
+        render: index === 0,
+        updateIndexToHover: function updateIndexToHover(index2) {
+          return _this2.setState({
+            indexToHover: index2
+          });
+        }
       };
     }
   }, {
@@ -195,13 +201,13 @@ var CompactHorizontalBarRoot = /* @__PURE__ */ function(_Component) {
     value: function getTooltipProps(_props, index) {
       return {
         render: index === 0,
-        index
+        index: this.state.indexToHover
       };
     }
   }, {
     key: "computeBarData",
     value: function computeBarData(d) {
-      var _this$asProps7 = this.asProps, x = _this$asProps7.x, y = _this$asProps7.y, scale = _this$asProps7.scale, offsetProps = _this$asProps7.offset, wMin = _this$asProps7.wMin, heightProps = _this$asProps7.height, _this$asProps7$maxBar = _this$asProps7.maxBarSize, maxBarSize = _this$asProps7$maxBar === void 0 ? Infinity : _this$asProps7$maxBar, size = _this$asProps7.size;
+      var _this$asProps7 = this.asProps, x = _this$asProps7.x, y = _this$asProps7.y, scale = _this$asProps7.scale, offsetProps = _this$asProps7.offset, wMin = _this$asProps7.wMin, heightProps = _this$asProps7.height, _this$asProps7$maxBar = _this$asProps7.maxBarSize, maxBarSize = _this$asProps7$maxBar === void 0 ? Number.POSITIVE_INFINITY : _this$asProps7$maxBar, size = _this$asProps7.size;
       var offset = typeof offsetProps === "function" ? offsetProps(i) : offsetProps;
       var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
       var absWidth = xScale(d[x]);
@@ -227,7 +233,7 @@ var CompactHorizontalBarRoot = /* @__PURE__ */ function(_Component) {
       this.asProps.dataHintsHandler.describeValueEntity("".concat(i2, ".").concat(x), groupKey !== null && groupKey !== void 0 ? groupKey : d[y]);
       return /* @__PURE__ */ React.createElement(React.Fragment, {
         key: "horizontal-bar-".concat(i2)
-      }, (_ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SCompactHorizontalBarGroup, _ref5.cn("SCompactHorizontalBarGroup", {
+      }, (_ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SCompactHorizontalBarGroup, _ref5.cn("SCompactHorizontalBarGroup", {
         "render": "g"
       }))));
     }
@@ -252,8 +258,7 @@ var CompactHorizontalBarRoot = /* @__PURE__ */ function(_Component) {
       }));
     }
   }]);
-  return CompactHorizontalBarRoot2;
-}(Component);
+})(Component);
 _defineProperty(CompactHorizontalBarRoot, "displayName", "CompactHorizontalBar");
 _defineProperty(CompactHorizontalBarRoot, "enhance", [uniqueIDEnhancement()]);
 _defineProperty(CompactHorizontalBarRoot, "style", style);
@@ -268,11 +273,12 @@ function Annotation(props) {
   var _ref6;
   var Children = props.Children, y = props.y, height = props.height, width = props.width, styles = props.styles;
   var SBarAnnotation = "div";
-  return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement("foreignObject", _ref6.cn("foreignObject", {
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement("foreignObject", _ref6.cn("foreignObject", {
     "x": "0",
     "y": y - barHeight,
     "height": height,
-    "width": width
+    "width": width,
+    "overflow": "visible"
   }), /* @__PURE__ */ React.createElement(SBarAnnotation, _ref6.cn("SBarAnnotation", {}), /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {}))));
 }
 var excludeProps = ["data", "scale", "value", "offset"];
@@ -280,7 +286,7 @@ function Label(props) {
   var _ref = arguments[0], _ref7;
   var SBarLabel = Box;
   var styles = props.styles, Children = props.Children;
-  return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBarLabel, _ref7.cn("SBarLabel", _objectSpread({}, assignProps({
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SBarLabel, _ref7.cn("SBarLabel", _objectSpread({}, assignProps({
     "__excludeProps": excludeProps
   }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {})));
 }
@@ -288,7 +294,7 @@ function Percent(props) {
   var _ref2 = arguments[0], _ref8;
   var SBarPercent = Box;
   var styles = props.styles, Children = props.Children;
-  return _ref8 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBarPercent, _ref8.cn("SBarPercent", _objectSpread({}, assignProps({
+  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SBarPercent, _ref8.cn("SBarPercent", _objectSpread({}, assignProps({
     "__excludeProps": excludeProps
   }, _ref2))), /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {})));
 }
@@ -296,7 +302,7 @@ function Value(props) {
   var _ref3 = arguments[0], _ref9;
   var SBarValue = Box;
   var styles = props.styles, Children = props.Children;
-  return _ref9 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBarValue, _ref9.cn("SBarValue", _objectSpread({}, assignProps({
+  return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SBarValue, _ref9.cn("SBarValue", _objectSpread({}, assignProps({
     "__excludeProps": excludeProps
   }, _ref3))), /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {})));
 }
@@ -304,7 +310,7 @@ var BarContext = /* @__PURE__ */ React.createContext({});
 function Bar(props) {
   var Children = props.Children, index = props.index, onClick = props.onClick, transparent = props.transparent, hide = props.hide;
   var onClickHandler = React.useCallback(function(event) {
-    onClick === null || onClick === void 0 ? void 0 : onClick(index, event);
+    onClick === null || onClick === void 0 || onClick(index, event);
   }, [onClick, index]);
   var contextValue = React.useMemo(function() {
     return {
@@ -318,7 +324,7 @@ function Bar(props) {
   }, /* @__PURE__ */ React.createElement(Children, null));
 }
 function BarFill(props) {
-  var _ref10;
+  var _ref0;
   var SBar = props.Element, styles = props.styles, color = props.color, x = props.x, y = props.y, width = props.width, height = props.height, uid = props.uid, duration = props.duration, resolveColor = props.resolveColor, patterns = props.patterns, i2 = props.i, scale = props.scale;
   var _scale2 = _slicedToArray(scale, 1), xScale = _scale2[0];
   var xRange = xScale.range();
@@ -331,7 +337,7 @@ function BarFill(props) {
     return roundedPath(x, y, width, height, radius, false, true, false, true);
   }, [x, y, height, width, radius]);
   var barProps = React.useContext(BarContext);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, (_ref10 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBar, _ref10.cn("SBar", {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, (_ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(SBar, _ref0.cn("SBar", {
     "aria-hidden": true,
     "render": "path",
     "d": pathD,
@@ -349,7 +355,7 @@ function BarFill(props) {
     "onClick": callAllEventHandlers(props.onClick, barProps.onClick),
     "transparent": barProps.transparent || props.transparent,
     "hide": barProps.hide || props.hide
-  }))), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref10.cn("PatternFill", {
+  }))), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref0.cn("PatternFill", {
     "id": "".concat(uid, "-").concat(i2, "-pattern"),
     "patternKey": color,
     "color": resolveColor(color),
@@ -357,7 +363,7 @@ function BarFill(props) {
   })));
 }
 function BarBackground(props) {
-  var _ref11;
+  var _ref1;
   var SBackground = props.Element, styles = props.styles, scale = props.scale, y = props.y, x = props.x, height = props.height;
   var _scale3 = _slicedToArray(scale, 1), xScale = _scale3[0];
   var xRange = xScale.range();
@@ -367,7 +373,7 @@ function BarBackground(props) {
     return roundedPath(x, y, width, height, radius, false, true, false, true);
   }, [x, y, height, width, radius]);
   var barProps = React.useContext(BarContext);
-  return _ref11 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBackground, _ref11.cn("SBackground", {
+  return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(SBackground, _ref1.cn("SBackground", {
     "aria-hidden": true,
     "render": "path",
     "d": pathD,
@@ -380,48 +386,50 @@ function BarBackground(props) {
     "onClick": callAllEventHandlers(props.onClick, barProps.onClick)
   }));
 }
-var Hover = /* @__PURE__ */ function(_Component2) {
-  _inherits(Hover2, _Component2);
-  var _super2 = _createSuper(Hover2);
+var Hover = /* @__PURE__ */ (function(_Component2) {
   function Hover2() {
     var _this3;
     _classCallCheck(this, Hover2);
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    _this3 = _super2.call.apply(_super2, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this3), "state", {
+    _this3 = _callSuper(this, Hover2, [].concat(args));
+    _defineProperty(_this3, "state", {
       index: null
     });
-    _defineProperty(_assertThisInitialized(_this3), "virtualElement", canUseDOM() ? document.createElement("div") : {});
-    _defineProperty(_assertThisInitialized(_this3), "unsubscribeMouseMoveRoot", null);
-    _defineProperty(_assertThisInitialized(_this3), "unsubscribeMouseLeaveRoot", null);
-    _defineProperty(_assertThisInitialized(_this3), "handlerMouseMoveRoot", trottle(function(e) {
-      var _this3$asProps = _this3.asProps, eventEmitter = _this3$asProps.eventEmitter, rootRef = _this3$asProps.rootRef, patterns = _this3$asProps.patterns;
+    _defineProperty(_this3, "virtualElement", canUseDOM() ? document.createElement("div") : {});
+    _defineProperty(_this3, "unsubscribeMouseMoveRoot", null);
+    _defineProperty(_this3, "unsubscribeMouseLeaveRoot", null);
+    _defineProperty(_this3, "handlerMouseMoveRoot", trottle(function(e) {
+      var _this3$asProps = _this3.asProps, eventEmitter = _this3$asProps.eventEmitter, rootRef = _this3$asProps.rootRef, patterns = _this3$asProps.patterns, updateIndexToHover = _this3$asProps.updateIndexToHover, plotId = _this3$asProps.plotId;
       var point = eventToPoint(e, rootRef.current);
       var clientX = e.clientX, clientY = e.clientY;
       var index = _this3.getIndex(point);
       _this3.setState({
         index
       }, function() {
-        eventEmitter.emit("setTooltipPosition", clientX, clientY);
-        eventEmitter.emit("setTooltipRenderingProps", {}, {
+        eventEmitter.emit("setTooltipPosition_".concat(plotId), clientX, clientY);
+        eventEmitter.emit("setTooltipRenderingProps_".concat(plotId), {}, {
           index,
           patterns
         });
-        eventEmitter.emit("setTooltipVisible", index !== null);
+        eventEmitter.emit("setTooltipVisible_".concat(plotId), index !== null);
+        updateIndexToHover(index);
       });
     }));
-    _defineProperty(_assertThisInitialized(_this3), "handlerMouseLeaveRoot", trottle(function() {
+    _defineProperty(_this3, "handlerMouseLeaveRoot", trottle(function() {
+      var _this3$asProps2 = _this3.asProps, updateIndexToHover = _this3$asProps2.updateIndexToHover, plotId = _this3$asProps2.plotId;
       _this3.setState({
         index: null
       }, function() {
-        _this3.asProps.eventEmitter.emit("setTooltipVisible", false);
+        _this3.asProps.eventEmitter.emit("setTooltipVisible_".concat(plotId), false);
+        updateIndexToHover(null);
       });
     }));
     return _this3;
   }
-  _createClass(Hover2, [{
+  _inherits(Hover2, _Component2);
+  return _createClass(Hover2, [{
     key: "generateGetBoundingClientRect",
     value: function generateGetBoundingClientRect() {
       var x = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
@@ -440,7 +448,7 @@ var Hover = /* @__PURE__ */ function(_Component2) {
   }, {
     key: "getIndex",
     value: function getIndex(point) {
-      var _this$asProps10 = this.asProps, data = _this$asProps10.data, getBarData = _this$asProps10.getBarData;
+      var _this$asProps0 = this.asProps, data = _this$asProps0.data, getBarData = _this$asProps0.getBarData;
       for (var _i = 0; _i < data.length; _i++) {
         var bar = getBarData(_i);
         if (point[0] >= bar.x && point[0] <= bar.x + bar.fullWidth && point[1] >= bar.y && point[1] <= bar.y + bar.height) {
@@ -473,14 +481,14 @@ var Hover = /* @__PURE__ */ function(_Component2) {
   }, {
     key: "render",
     value: function render() {
-      var _ref12;
-      var _this$asProps11 = this.asProps, styles = _this$asProps11.styles, getBarData = _this$asProps11.getBarData, render2 = _this$asProps11.render;
+      var _ref10;
+      var _this$asProps1 = this.asProps, styles = _this$asProps1.styles, getBarData = _this$asProps1.getBarData, render2 = _this$asProps1.render;
       if (!render2) return null;
       var index = this.state.index;
       var SCompactHorizontalBarHoverRect = this.Element;
       if (index === null) return null;
       var bar = getBarData(index);
-      return _ref12 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SCompactHorizontalBarHoverRect, _ref12.cn("SCompactHorizontalBarHoverRect", {
+      return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(SCompactHorizontalBarHoverRect, _ref10.cn("SCompactHorizontalBarHoverRect", {
         "render": "rect",
         "x": bar.x,
         "y": bar.y + bar.height - barHeight - hoverOffset * 2,
@@ -489,17 +497,17 @@ var Hover = /* @__PURE__ */ function(_Component2) {
       }));
     }
   }]);
-  return Hover2;
-}(Component);
-var CompactHorizontalBarTooltip = function CompactHorizontalBarTooltip2(props) {
-  var _ref4 = arguments[0], _ref13;
+})(Component);
+function CompactHorizontalBarTooltip(props) {
+  var _ref4 = arguments[0], _ref11;
   if (!props.render) return null;
   var SCompactHorizontalBarRadarTooltip = Tooltip;
-  return _ref13 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SCompactHorizontalBarRadarTooltip, _ref13.cn("SCompactHorizontalBarRadarTooltip", _objectSpread({}, assignProps({
+  return _ref11 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SCompactHorizontalBarRadarTooltip, _ref11.cn("SCompactHorizontalBarRadarTooltip", _objectSpread({}, assignProps({
     "tag": CompactHorizontalBar.Hover,
     "excludeAnchorProps": true
   }, _ref4))));
-};
+}
+;
 var CompactHorizontalBar = createElement(CompactHorizontalBarRoot, {
   Annotation,
   Label,