@semcore/d3-chart 3.60.0 → 3.60.1

package/lib/esm/CompactHorizontalBar.mjs

@@ -0,0 +1,518 @@
+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 _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 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 { 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";
+/*!__reshadow-styles__:"./style/bar.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SBar_1rv7u_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_1rv7u);transition-timing-function:ease-in-out}.___SBar_1rv7u_gg_.__color_1rv7u_gg_{fill:var(--color_1rv7u)}.___SBar_1rv7u_gg_.__pattern_1rv7u_gg_.__color_1rv7u_gg_{fill:var(--pattern_1rv7u);stroke:var(--color_1rv7u);stroke-width:1px}.___SBar_1rv7u_gg_.__hide_1rv7u_gg_{display:none}.___SBar_1rv7u_gg_.__transparent_1rv7u_gg_{opacity:.3}.___SBackground_1rv7u_gg_.__onClick_1rv7u_gg_,.___SBar_1rv7u_gg_.__onClick_1rv7u_gg_{cursor:pointer}.___SBackground_1rv7u_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_1rv7u_gg_{display:flex;justify-content:space-between}.___SBarLabel_1rv7u_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_1rv7u_gg_,.___SBarPercent_1rv7u_gg_,.___SBarValue_1rv7u_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_1rv7u_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_1rv7u_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_1rv7u_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    /*__inner_css_end__*/
+    "1rv7u_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SBar": "___SBar_1rv7u_gg_",
+    "--duration": "--duration_1rv7u",
+    "_color": "__color_1rv7u_gg_",
+    "--color": "--color_1rv7u",
+    "_pattern": "__pattern_1rv7u_gg_",
+    "--pattern": "--pattern_1rv7u",
+    "_hide": "__hide_1rv7u_gg_",
+    "_transparent": "__transparent_1rv7u_gg_",
+    "_onClick": "__onClick_1rv7u_gg_",
+    "__SBackground": "___SBackground_1rv7u_gg_",
+    "__SBarAnnotation": "___SBarAnnotation_1rv7u_gg_",
+    "__SBarLabel": "___SBarLabel_1rv7u_gg_",
+    "__SBarPercent": "___SBarPercent_1rv7u_gg_",
+    "__SBarValue": "___SBarValue_1rv7u_gg_",
+    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1rv7u_gg_"
+  })
+);
+var MIN_WIDTH = 4;
+var barHeight = 20;
+var hoverOffset = 6;
+var CompactHorizontalBarRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(CompactHorizontalBarRoot2, _Component);
+  var _super = _createSuper(CompactHorizontalBarRoot2);
+  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);
+    return _this;
+  }
+  _createClass(CompactHorizontalBarRoot2, [{
+    key: "getBarProps",
+    value: function getBarProps(_props, index) {
+      return {
+        index
+      };
+    }
+  }, {
+    key: "getBarBackgroundProps",
+    value: function getBarBackgroundProps(_props, index) {
+      var _this$asProps = this.asProps, data = _this$asProps.data, scale = _this$asProps.scale;
+      var bar = this.computeBarData(data[index], index);
+      return {
+        scale,
+        index,
+        x: bar.x,
+        y: bar.y + bar.height - barHeight - hoverOffset,
+        height: barHeight,
+        width: bar.fullWidth
+      };
+    }
+  }, {
+    key: "getBarFillProps",
+    value: function getBarFillProps(_props, index) {
+      var _this$asProps2 = this.asProps, data = _this$asProps2.data, uid = _this$asProps2.uid, patterns = _this$asProps2.patterns, color = _this$asProps2.color, transparent = _this$asProps2.transparent, hide = _this$asProps2.hide, scale = _this$asProps2.scale;
+      var bar = this.computeBarData(data[index], index);
+      return {
+        x: bar.x,
+        y: bar.y + bar.height - barHeight - hoverOffset,
+        height: barHeight,
+        width: bar.width,
+        i: index,
+        uid,
+        resolveColor: this.asProps.resolveColor,
+        patterns,
+        color,
+        transparent,
+        hide,
+        scale,
+        index
+      };
+    }
+  }, {
+    key: "getAnnotationProps",
+    value: function getAnnotationProps(_props, index) {
+      var _this$asProps3 = this.asProps, data = _this$asProps3.data, size = _this$asProps3.size;
+      var bar = this.computeBarData(data[index], index);
+      return {
+        y: bar.y,
+        height: barHeight * 2,
+        width: size[0],
+        index
+      };
+    }
+  }, {
+    key: "getLabelProps",
+    value: function getLabelProps(_props, index) {
+      var _this$asProps4 = this.asProps, data = _this$asProps4.data, y = _this$asProps4.y;
+      var label = data[index][y];
+      return {
+        children: label,
+        index
+      };
+    }
+  }, {
+    key: "getPercentFormatter",
+    value: function getPercentFormatter() {
+      if (!this.percentFormatter || this.percentFormatterLocale !== this.asProps.locale) {
+        this.percentFormatter = new Intl.NumberFormat(this.asProps.locale, {
+          style: "percent"
+        });
+        this.percentFormatterLocale = this.asProps.locale;
+      }
+      return this.percentFormatter;
+    }
+  }, {
+    key: "getValueFormatter",
+    value: function getValueFormatter() {
+      if (!this.valueFormatter || this.valueFormatterLocale !== this.asProps.locale) {
+        this.valueFormatter = new Intl.NumberFormat(this.asProps.locale);
+        this.valueFormatterLocale = this.asProps.locale;
+      }
+      return this.valueFormatter;
+    }
+  }, {
+    key: "getPercentProps",
+    value: function getPercentProps(_props, index) {
+      var _this$asProps5 = this.asProps, data = _this$asProps5.data, x = _this$asProps5.x, scale = _this$asProps5.scale;
+      var value = data[index][x];
+      var domain = scale[0].domain();
+      var percent = value / domain[1];
+      var formatter = this.getPercentFormatter();
+      var formatted = formatter.format(percent);
+      return {
+        children: formatted,
+        formatted,
+        percent
+      };
+    }
+  }, {
+    key: "getValueProps",
+    value: function getValueProps(_props, index) {
+      var _this$asProps6 = this.asProps, data = _this$asProps6.data, x = _this$asProps6.x;
+      var value = data[index][x];
+      var formatter = this.getValueFormatter();
+      var formatted = formatter.format(value);
+      return {
+        children: formatted,
+        formatted,
+        value
+      };
+    }
+  }, {
+    key: "getHoverProps",
+    value: function getHoverProps(_props, index) {
+      var _this2 = this;
+      var data = this.asProps.data;
+      return {
+        data,
+        getBarData: function getBarData(index2) {
+          return _this2.computeBarData(data[index2], index2);
+        },
+        render: index === 0
+      };
+    }
+  }, {
+    key: "getTooltipProps",
+    value: function getTooltipProps(_props, index) {
+      return {
+        render: index === 0,
+        index
+      };
+    }
+  }, {
+    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 offset = typeof offsetProps === "function" ? offsetProps(i) : offsetProps;
+      var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
+      var absWidth = xScale(d[x]);
+      var bandHeight = heightProps || scaleToBand(yScale).bandwidth();
+      var height = Math.min(bandHeight, maxBarSize);
+      var width = absWidth === 0 ? 0 : Math.max(absWidth, wMin);
+      var barY = yScale(d[y]) + bandHeight / 2 - height / 2 + offset[1];
+      return {
+        x: 0,
+        y: barY,
+        width,
+        fullWidth: size[0],
+        height
+      };
+    }
+  }, {
+    key: "renderBar",
+    value: function renderBar(d, i2) {
+      var _ref5;
+      var SCompactHorizontalBarGroup = this.Element;
+      var _this$asProps8 = this.asProps, styles = _this$asProps8.styles, groupKey = _this$asProps8.groupKey;
+      var _this$computeBarData = this.computeBarData(d, i2), x = _this$computeBarData.x, y = _this$computeBarData.y;
+      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", {
+        "render": "g"
+      }))));
+    }
+  }, {
+    key: "renderBars",
+    value: function renderBars() {
+      var data = this.asProps.data;
+      return data.map(this.renderBar.bind(this));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$asProps9 = this.asProps, uid = _this$asProps9.uid, size = _this$asProps9.size, duration = _this$asProps9.duration;
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, this.renderBars(), duration && /* @__PURE__ */ React.createElement(AnimatedClipPath, {
+        "aria-hidden": true,
+        duration,
+        id: uid,
+        x: "0",
+        y: "0",
+        width: 0,
+        height: size[1]
+      }));
+    }
+  }]);
+  return CompactHorizontalBarRoot2;
+}(Component);
+_defineProperty(CompactHorizontalBarRoot, "displayName", "CompactHorizontalBar");
+_defineProperty(CompactHorizontalBarRoot, "enhance", [uniqueIDEnhancement()]);
+_defineProperty(CompactHorizontalBarRoot, "style", style);
+_defineProperty(CompactHorizontalBarRoot, "defaultProps", {
+  offset: [0, 0],
+  duration: 500,
+  wMin: MIN_WIDTH,
+  locale: "en",
+  color: "chart-palette-order-1"
+});
+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", {
+    "x": "0",
+    "y": y - barHeight,
+    "height": height,
+    "width": width
+  }), /* @__PURE__ */ React.createElement(SBarAnnotation, _ref6.cn("SBarAnnotation", {}), /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {}))));
+}
+var excludeProps = ["data", "scale", "value", "offset"];
+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({
+    "__excludeProps": excludeProps
+  }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {})));
+}
+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({
+    "__excludeProps": excludeProps
+  }, _ref2))), /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {})));
+}
+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({
+    "__excludeProps": excludeProps
+  }, _ref3))), /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {})));
+}
+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, index]);
+  var contextValue = React.useMemo(function() {
+    return {
+      onClick: onClickHandler,
+      transparent,
+      hide
+    };
+  }, [onClickHandler, transparent, hide]);
+  return /* @__PURE__ */ React.createElement(BarContext.Provider, {
+    value: contextValue
+  }, /* @__PURE__ */ React.createElement(Children, null));
+}
+function BarFill(props) {
+  var _ref10;
+  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();
+  var backgroundWidth = xRange[1] - xRange[0];
+  var radius = 0;
+  var pathD = React.useMemo(function() {
+    if (backgroundWidth - radius > width) {
+      return roundedPath(x, y, width, height, radius);
+    }
+    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", {
+    "aria-hidden": true,
+    "render": "path",
+    "d": pathD,
+    "clipPath": "url(#".concat(uid, ")"),
+    "__excludeProps": ["data", "scale", "value", "offset"],
+    "childrenPosition": "above",
+    "index": i2,
+    "color": resolveColor(color),
+    "pattern": patterns ? "url(#".concat(uid, "-").concat(i2, "-pattern)") : void 0,
+    "x": x,
+    "y": y,
+    "width": width,
+    "height": height,
+    "use:duration": "".concat(duration, "ms"),
+    "onClick": callAllEventHandlers(props.onClick, barProps.onClick),
+    "transparent": barProps.transparent || props.transparent,
+    "hide": barProps.hide || props.hide
+  }))), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref10.cn("PatternFill", {
+    "id": "".concat(uid, "-").concat(i2, "-pattern"),
+    "patternKey": color,
+    "color": resolveColor(color),
+    "patterns": patterns
+  })));
+}
+function BarBackground(props) {
+  var _ref11;
+  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();
+  var width = xRange[1] - xRange[0];
+  var radius = 0;
+  var pathD = React.useMemo(function() {
+    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", {
+    "aria-hidden": true,
+    "render": "path",
+    "d": pathD,
+    "childrenPosition": "above",
+    "width": xRange[1] - xRange[0],
+    "height": height,
+    "x": x,
+    "y": y,
+    "transparent": barProps.transparent,
+    "onClick": callAllEventHandlers(props.onClick, barProps.onClick)
+  }));
+}
+var Hover = /* @__PURE__ */ function(_Component2) {
+  _inherits(Hover2, _Component2);
+  var _super2 = _createSuper(Hover2);
+  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", {
+      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;
+      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", {}, {
+          index,
+          patterns
+        });
+        eventEmitter.emit("setTooltipVisible", index !== null);
+      });
+    }));
+    _defineProperty(_assertThisInitialized(_this3), "handlerMouseLeaveRoot", trottle(function() {
+      _this3.setState({
+        index: null
+      }, function() {
+        _this3.asProps.eventEmitter.emit("setTooltipVisible", false);
+      });
+    }));
+    return _this3;
+  }
+  _createClass(Hover2, [{
+    key: "generateGetBoundingClientRect",
+    value: function generateGetBoundingClientRect() {
+      var x = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
+      var y = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+      return function() {
+        return {
+          width: 0,
+          height: 0,
+          top: y,
+          right: x,
+          bottom: y,
+          left: x
+        };
+      };
+    }
+  }, {
+    key: "getIndex",
+    value: function getIndex(point) {
+      var _this$asProps10 = this.asProps, data = _this$asProps10.data, getBarData = _this$asProps10.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) {
+          return _i;
+        }
+      }
+      return null;
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this4 = this;
+      var eventEmitter = this.asProps.eventEmitter;
+      this.unsubscribeMouseMoveRoot = eventEmitter.subscribe("onMouseMoveRoot", function(e) {
+        e.persist();
+        _this4.handlerMouseMoveRoot(e);
+      });
+      this.unsubscribeMouseLeaveRoot = eventEmitter.subscribe("onMouseLeaveRoot", this.handlerMouseLeaveRoot);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.unsubscribeMouseMoveRoot) {
+        this.unsubscribeMouseMoveRoot();
+      }
+      if (this.unsubscribeMouseLeaveRoot) {
+        this.unsubscribeMouseLeaveRoot();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref12;
+      var _this$asProps11 = this.asProps, styles = _this$asProps11.styles, getBarData = _this$asProps11.getBarData, render2 = _this$asProps11.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", {
+        "render": "rect",
+        "x": bar.x,
+        "y": bar.y + bar.height - barHeight - hoverOffset * 2,
+        "width": bar.fullWidth,
+        "height": barHeight + hoverOffset * 2
+      }));
+    }
+  }]);
+  return Hover2;
+}(Component);
+var CompactHorizontalBarTooltip = function CompactHorizontalBarTooltip2(props) {
+  var _ref4 = arguments[0], _ref13;
+  if (!props.render) return null;
+  var SCompactHorizontalBarRadarTooltip = Tooltip;
+  return _ref13 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SCompactHorizontalBarRadarTooltip, _ref13.cn("SCompactHorizontalBarRadarTooltip", _objectSpread({}, assignProps({
+    "tag": CompactHorizontalBar.Hover,
+    "excludeAnchorProps": true
+  }, _ref4))));
+};
+var CompactHorizontalBar = createElement(CompactHorizontalBarRoot, {
+  Annotation,
+  Label,
+  Percent,
+  Value,
+  Bar: [Bar, {
+    Fill: BarFill,
+    Background: BarBackground
+  }],
+  Hover,
+  Tooltip: [CompactHorizontalBarTooltip, Tooltip._______childrenComponents]
+});
+export {
+  MIN_WIDTH,
+  CompactHorizontalBar as default
+};