@semcore/d3-chart 16.5.0 → 17.0.0-prerelease.8

package/lib/esm/component/Cigarette/Cigarette.mjs

@@ -1,126 +1,136 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled, Component } from "@semcore/core";
+import { Component, sstyled } from "@semcore/core";
 import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import React from "react";
 import createElement from "../../createElement.mjs";
 import { PatternFill } from "../../Pattern.mjs";
 import { roundedPath } from "../../utils.mjs";
-var CigaretteBarRoot = /* @__PURE__ */ (function(_Component) {
-  function CigaretteBarRoot2() {
-    var _this;
-    _classCallCheck(this, CigaretteBarRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, CigaretteBarRoot2, [].concat(args));
-    _defineProperty(_this, "refElement", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "handleMouseMove", function() {
-      _this.handlers.hovered(true);
-      _this.setCursor("pointer");
+class CigaretteBarRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "refElement", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "handleMouseMove", () => {
+      this.handlers.hovered(true);
+      this.setCursor("pointer");
     });
-    _defineProperty(_this, "handleMouseLeave", function() {
-      _this.handlers.hovered(false);
-      _this.setCursor("auto");
+    _defineProperty(this, "handleMouseLeave", () => {
+      this.handlers.hovered(false);
+      this.setCursor("auto");
     });
-    _defineProperty(_this, "handleClick", function(e) {
-      var _this$asProps = _this.asProps, onClick = _this$asProps.onClick, dataKey = _this$asProps.dataKey;
+    _defineProperty(this, "handleClick", (e) => {
+      const {
+        onClick,
+        dataKey
+      } = this.asProps;
       if (onClick && e.currentTarget.tagName === "path") {
         e.stopPropagation();
         onClick(dataKey, e);
         return false;
       }
     });
-    _defineProperty(_this, "setCursor", function(value) {
-      var onClick = _this.asProps.onClick;
+    _defineProperty(this, "setCursor", (value) => {
+      var _a;
+      const {
+        onClick
+      } = this.asProps;
       if (onClick) {
-        var _this$refElement$curr;
-        (_this$refElement$curr = _this.refElement.current) === null || _this$refElement$curr === void 0 || _this$refElement$curr.style.setProperty("cursor", value);
+        (_a = this.refElement.current) == null ? void 0 : _a.style.setProperty("cursor", value);
       }
     });
-    return _this;
   }
-  _inherits(CigaretteBarRoot2, _Component);
-  return _createClass(CigaretteBarRoot2, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      return {
-        hovered: false
-      };
+  uncontrolledProps() {
+    return {
+      hovered: false
+    };
+  }
+  getRect() {
+    const {
+      x,
+      y,
+      width,
+      height,
+      r: radius,
+      direction,
+      index,
+      hovered
+    } = this.asProps;
+    let xV = x;
+    let yV = y;
+    let widthV = width;
+    let heightV = height;
+    if (hovered && direction === "horizontal") {
+      yV = yV - 2;
+      heightV = heightV + 4;
     }
-  }, {
-    key: "getRect",
-    value: function getRect() {
-      var _this$asProps2 = this.asProps, x = _this$asProps2.x, y = _this$asProps2.y, width = _this$asProps2.width, height = _this$asProps2.height, radius = _this$asProps2.r, direction = _this$asProps2.direction, index = _this$asProps2.index, hovered = _this$asProps2.hovered;
-      var xV = x;
-      var yV = y;
-      var widthV = width;
-      var heightV = height;
-      if (hovered && direction === "horizontal") {
-        yV = yV - 2;
-        heightV = heightV + 4;
-      }
-      if (hovered && direction === "vertical") {
-        xV = xV - 2;
-        widthV = widthV + 4;
-      }
-      if (radius) {
-        if (direction === "horizontal") {
-          if (index === 0) {
-            return roundedPath(xV, yV, widthV, heightV, radius, true, false, true, false);
-          } else {
-            return roundedPath(xV, yV, widthV, heightV, radius, false, true, false, true);
-          }
+    if (hovered && direction === "vertical") {
+      xV = xV - 2;
+      widthV = widthV + 4;
+    }
+    if (radius) {
+      if (direction === "horizontal") {
+        if (index === 0) {
+          return roundedPath(xV, yV, widthV, heightV, radius, true, false, true, false);
         } else {
-          if (index === 0) {
-            return roundedPath(xV, yV, widthV, heightV, radius, true, true, false, false);
-          } else {
-            return roundedPath(xV, yV, widthV, heightV, radius, false, false, true, true);
-          }
+          return roundedPath(xV, yV, widthV, heightV, radius, false, true, false, true);
+        }
+      } else {
+        if (index === 0) {
+          return roundedPath(xV, yV, widthV, heightV, radius, true, true, false, false);
+        } else {
+          return roundedPath(xV, yV, widthV, heightV, radius, false, false, true, true);
         }
       }
-      return roundedPath(xV, yV, widthV, heightV, radius);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref;
-      var SBar = this.Element;
-      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, color = _this$asProps3.color, data = _this$asProps3.data, dataKey = _this$asProps3.dataKey, index = _this$asProps3.index, hide = _this$asProps3.hide, uid = _this$asProps3.uid, duration = _this$asProps3.duration, onMouseMove = _this$asProps3.onMouseMove, onMouseLeave = _this$asProps3.onMouseLeave, transparent = _this$asProps3.transparent, resolveColor = _this$asProps3.resolveColor, patterns = _this$asProps3.patterns;
-      var dSvg = this.getRect();
-      return /* @__PURE__ */ React.createElement(React.Fragment, {
-        key: "horizontal-bar-".concat(index)
-      }, (_ref = sstyled(styles), /* @__PURE__ */ React.createElement(SBar, _ref.cn("SBar", {
-        "ref": this.refElement,
-        "aria-hidden": true,
-        "render": "path",
-        "clipPath": "url(#".concat(uid, ")"),
-        "__excludeProps": ["data", "scale", "value", "offset"],
-        "childrenPosition": "above",
-        "value": data[dataKey],
-        "index": index,
-        "hide": hide,
-        "fill": resolveColor(color),
-        "pattern": patterns ? "url(#".concat(uid, "-").concat(index, "-pattern)") : void 0,
-        "transparent": transparent,
-        "d": dSvg,
-        "use:duration": "".concat(duration, "ms"),
-        "onMouseMove": callAllEventHandlers(onMouseMove, this.handleMouseMove),
-        "onMouseLeave": callAllEventHandlers(onMouseLeave, this.handleMouseLeave),
-        "use:onClick": this.handleClick
-      }))), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref.cn("PatternFill", {
-        "id": "".concat(uid, "-").concat(index, "-pattern"),
-        "patternKey": color,
-        "color": resolveColor(color),
-        "patterns": patterns
-      })));
     }
-  }]);
-})(Component);
+    return roundedPath(xV, yV, widthV, heightV, radius);
+  }
+  render() {
+    var _ref;
+    const SBar = this.Element;
+    const {
+      styles,
+      color,
+      data,
+      dataKey,
+      index,
+      hide,
+      uid,
+      duration,
+      onMouseMove,
+      onMouseLeave,
+      transparent,
+      resolveColor,
+      patterns
+    } = this.asProps;
+    const dSvg = this.getRect();
+    return /* @__PURE__ */ React.createElement(React.Fragment, {
+      key: `horizontal-bar-${index}`
+    }, (_ref = sstyled(styles), /* @__PURE__ */ React.createElement(SBar, _ref.cn("SBar", {
+      "ref": this.refElement,
+      "aria-hidden": true,
+      "render": "path",
+      "clipPath": `url(#${uid})`,
+      "__excludeProps": ["data", "scale", "value", "offset"],
+      "childrenPosition": "above",
+      "value": data[dataKey],
+      "index": index,
+      "hide": hide,
+      "fill": resolveColor(color),
+      "pattern": patterns ? `url(#${uid}-${index}-pattern)` : void 0,
+      "transparent": transparent,
+      "d": dSvg,
+      "use:duration": `${duration}ms`,
+      "onMouseMove": callAllEventHandlers(onMouseMove, this.handleMouseMove),
+      "onMouseLeave": callAllEventHandlers(onMouseLeave, this.handleMouseLeave),
+      "use:onClick": this.handleClick
+    }))), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref.cn("PatternFill", {
+      "id": `${uid}-${index}-pattern`,
+      "patternKey": color,
+      "color": resolveColor(color),
+      "patterns": patterns
+    })));
+  }
+}
 _defineProperty(CigaretteBarRoot, "displayName", "Cigarette.BarItem");
 _defineProperty(CigaretteBarRoot, "enhance", [uniqueIDEnhancement()]);
 _defineProperty(CigaretteBarRoot, "style", {});

package/lib/esm/component/StackGroupBar/StackGroupBar.mjs

@@ -1,9 +1,3 @@
-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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { Component } from "@semcore/core";
 import { scaleBand } from "d3-scale";
@@ -12,124 +6,116 @@ import React from "react";
 import Bar, { MIN_HEIGHT } from "../../Bar.mjs";
 import createElement from "../../createElement.mjs";
 import { scaleToBand, getChartDefaultColorName } from "../../utils.mjs";
-var XY0 = Symbol("XY0");
-var StackGroupBarRoot = /* @__PURE__ */ (function(_Component) {
-  function StackGroupBarRoot2(props) {
-    var _this;
-    _classCallCheck(this, StackGroupBarRoot2);
-    _this = _callSuper(this, StackGroupBarRoot2, [props]);
-    _defineProperty(_this, "groupDomain", /* @__PURE__ */ new Set());
-    _defineProperty(_this, "scaleGroup", scaleBand());
-    _defineProperty(_this, "stacks", {});
-    _defineProperty(_this, "offsetBars", []);
-    var children = props.children;
-    var groups = {};
-    React.Children.toArray(children).forEach(function(child) {
+const XY0 = Symbol("XY0");
+class StackGroupBarRoot extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "groupDomain", /* @__PURE__ */ new Set());
+    _defineProperty(this, "scaleGroup", scaleBand());
+    _defineProperty(this, "stacks", {});
+    _defineProperty(this, "offsetBars", []);
+    const {
+      children
+    } = props;
+    const groups = {};
+    React.Children.toArray(children).forEach((child) => {
       if (/* @__PURE__ */ React.isValidElement(child) && child.type === StackGroupBar.Bar && !child.props.hide) {
-        _this.groupDomain.add(child.props.group);
+        this.groupDomain.add(child.props.group);
         if (!groups[child.props.group]) {
           groups[child.props.group] = [];
         }
         groups[child.props.group].push(child.props.y);
       }
     });
-    Object.entries(groups).forEach(function(_ref) {
-      var _ref2 = _slicedToArray(_ref, 2), group = _ref2[0], stackKeys = _ref2[1];
-      _this.stacks[group] = stack();
-      _this.stacks[group].keys(stackKeys);
+    Object.entries(groups).forEach(([group, stackKeys]) => {
+      this.stacks[group] = stack();
+      this.stacks[group].keys(stackKeys);
     });
-    return _this;
   }
-  _inherits(StackGroupBarRoot2, _Component);
-  return _createClass(StackGroupBarRoot2, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var scale = this.asProps.scale;
-      this.scaleGroup = scaleBand().range([0, scaleToBand(scale[0]).bandwidth()]).domain(this.groupDomain).paddingInner(0.1).paddingOuter(0.1);
-      this.forceUpdate();
-    }
-  }, {
-    key: "getSeries",
-    value: function getSeries(group) {
-      var _this$stacks$group, _this$stacks;
-      var data = this.asProps.data;
-      return (_this$stacks$group = (_this$stacks = this.stacks)[group]) === null || _this$stacks$group === void 0 ? void 0 : _this$stacks$group.call(_this$stacks, data);
-    }
-  }, {
-    key: "getBarProps",
-    value: function getBarProps(_ref3, index) {
-      var _this$offsetBars$seri, _this$scaleGroup$band, _this2 = this;
-      var y = _ref3.y, group = _ref3.group, _ref3$hMin = _ref3.hMin, hMin = _ref3$hMin === void 0 ? MIN_HEIGHT : _ref3$hMin;
-      var _this$asProps = this.asProps, x = _this$asProps.x, r = _this$asProps.r, scale = _this$asProps.scale, _this$asProps$maxBarS = _this$asProps.maxBarSize, maxBarSize = _this$asProps$maxBarS === void 0 ? Number.POSITIVE_INFINITY : _this$asProps$maxBarS, patterns = _this$asProps.patterns;
-      var _ref4 = scale, _ref5 = _slicedToArray(_ref4, 2), yScale = _ref5[1];
-      var allGroupSeries = this.getSeries(group);
-      var seriesIndex = allGroupSeries.findIndex(function(s) {
-        return s.key === y;
-      });
-      var series = allGroupSeries[seriesIndex] || [];
-      var rBar = series.map(function(_s, i) {
-        return allGroupSeries.slice(seriesIndex + 1).some(function(bar) {
-          return bar[i][0] !== bar[i][1];
-        }) ? 0 : r;
-      });
-      this.offsetBars[seriesIndex] = (_this$offsetBars$seri = this.offsetBars[seriesIndex]) !== null && _this$offsetBars$seri !== void 0 ? _this$offsetBars$seri : [];
-      var data = series.map(function(s) {
-        return _objectSpread(_objectSpread({}, s.data), {}, _defineProperty(_defineProperty({}, y, s[1]), XY0, s[0]));
-      });
-      var bandWidth = (_this$scaleGroup$band = this.scaleGroup.bandwidth()) !== null && _this$scaleGroup$band !== void 0 ? _this$scaleGroup$band : 0;
-      var width = Math.min(bandWidth, maxBarSize);
-      var calcOffset = function calcOffset2(i) {
-        var _this2$scaleGroup, _d$XY, _d$XY2;
-        var offsetX = ((_this2$scaleGroup = _this2.scaleGroup(group)) !== null && _this2$scaleGroup !== void 0 ? _this2$scaleGroup : 0) + bandWidth / 2 - width / 2;
-        var offsetY = _this2.offsetBars.reduce(function(offset, offsetBar) {
-          var _offsetBar$i;
-          return offset - ((_offsetBar$i = offsetBar[i]) !== null && _offsetBar$i !== void 0 ? _offsetBar$i : 0);
-        }, 0);
-        var d = data[i];
-        var absHeight = Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale((_d$XY = d[XY0]) !== null && _d$XY !== void 0 ? _d$XY : 0)));
-        var isEmptyValue = Number(d[y] - ((_d$XY2 = d[XY0]) !== null && _d$XY2 !== void 0 ? _d$XY2 : 0)) === 0;
-        if (isEmptyValue || absHeight >= hMin) {
-          _this2.offsetBars[seriesIndex][i] = 0;
-        } else {
-          var offsetValue = hMin - absHeight;
-          _this2.offsetBars[seriesIndex][i] = d[y] > 0 ? offsetValue : -offsetValue;
-        }
-        return [offsetX, offsetY];
-      };
-      var barProps = {
-        offset: calcOffset,
-        width,
-        color: getChartDefaultColorName(index),
-        x,
-        groupKey: x,
-        patterns,
-        data,
-        hMin,
-        y0: XY0,
-        r: rBar,
-        maxBarSize
-      };
-      return barProps;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var Element = this.Element;
-      this.asProps.dataHintsHandler.establishDataType("grouped-values");
-      this.offsetBars = [];
-      return /* @__PURE__ */ React.createElement(Element, {
-        "aria-hidden": true,
-        render: "g",
-        childrenPosition: "inside"
-      });
-    }
-  }]);
-})(Component);
+  componentDidMount() {
+    const {
+      scale
+    } = this.asProps;
+    this.scaleGroup = scaleBand().range([0, scaleToBand(scale[0]).bandwidth()]).domain(this.groupDomain).paddingInner(0.1).paddingOuter(0.1);
+    this.forceUpdate();
+  }
+  getSeries(group) {
+    var _a, _b;
+    const {
+      data
+    } = this.asProps;
+    return (_b = (_a = this.stacks)[group]) == null ? void 0 : _b.call(_a, data);
+  }
+  getBarProps({
+    y,
+    group,
+    hMin = MIN_HEIGHT
+  }, index) {
+    const {
+      x,
+      r,
+      scale,
+      maxBarSize = Number.POSITIVE_INFINITY,
+      patterns
+    } = this.asProps;
+    const [, yScale] = scale;
+    const allGroupSeries = this.getSeries(group);
+    const seriesIndex = allGroupSeries.findIndex((s) => s.key === y);
+    const series = allGroupSeries[seriesIndex] || [];
+    const rBar = series.map((_s, i) => allGroupSeries.slice(seriesIndex + 1).some((bar) => bar[i][0] !== bar[i][1]) ? 0 : r);
+    this.offsetBars[seriesIndex] = this.offsetBars[seriesIndex] ?? [];
+    const data = series.map((s) => ({
+      ...s.data,
+      [y]: s[1],
+      [XY0]: s[0]
+    }));
+    const bandWidth = this.scaleGroup.bandwidth() ?? 0;
+    const width = Math.min(bandWidth, maxBarSize);
+    const calcOffset = (i) => {
+      const offsetX = (this.scaleGroup(group) ?? 0) + bandWidth / 2 - width / 2;
+      const offsetY = this.offsetBars.reduce((offset, offsetBar) => offset - (offsetBar[i] ?? 0), 0);
+      const d = data[i];
+      const absHeight = Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale(d[XY0] ?? 0)));
+      const isEmptyValue = Number(d[y] - (d[XY0] ?? 0)) === 0;
+      if (isEmptyValue || absHeight >= hMin) {
+        this.offsetBars[seriesIndex][i] = 0;
+      } else {
+        const offsetValue = hMin - absHeight;
+        this.offsetBars[seriesIndex][i] = d[y] > 0 ? offsetValue : -offsetValue;
+      }
+      return [offsetX, offsetY];
+    };
+    const barProps = {
+      offset: calcOffset,
+      width,
+      color: getChartDefaultColorName(index),
+      x,
+      groupKey: x,
+      patterns,
+      data,
+      hMin,
+      y0: XY0,
+      r: rBar,
+      maxBarSize
+    };
+    return barProps;
+  }
+  render() {
+    const Element = this.Element;
+    this.asProps.dataHintsHandler.establishDataType("grouped-values");
+    this.offsetBars = [];
+    return /* @__PURE__ */ React.createElement(Element, {
+      "aria-hidden": true,
+      render: "g",
+      childrenPosition: "inside"
+    });
+  }
+}
 _defineProperty(StackGroupBarRoot, "displayName", "StackGroupBar");
 _defineProperty(StackGroupBarRoot, "defaultProps", {
   r: 2
 });
-var StackGroupBar = createElement(StackGroupBarRoot, {
+const StackGroupBar = createElement(StackGroupBarRoot, {
   Bar
 });
 export {

package/lib/esm/component/SvgElement.mjs

@@ -1,9 +1,9 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import propsForElement from "@semcore/core/lib/utils/propsForElement";
 import React from "react";
-var _excluded = ["tag"];
-var SvgElement = function SvgElement2(_ref) {
-  var Tag = _ref.tag, props = _objectWithoutProperties(_ref, _excluded);
+const SvgElement = ({
+  tag: Tag,
+  ...props
+}) => {
   return (
     // @ts-ignore
     /* @__PURE__ */ React.createElement(Tag, propsForElement(props, Tag))

package/lib/esm/createElement.mjs

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import { createComponent, createBaseComponent, CONTEXT_COMPONENT } from "@semcore/core";
 import assignProps from "@semcore/core/lib/utils/assignProps";
 import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
@@ -9,31 +7,41 @@ import { useForkRef } from "@semcore/core/lib/utils/ref";
 import hoistNonReactStatics from "hoist-non-react-statics";
 import React from "react";
 import Plot from "./Plot.mjs";
-var _excluded = ["render", "childrenPosition", "x", "y"], _excluded2 = ["forwardRef", "children", "Children", "x", "y"], _excluded3 = ["$rootProps"];
-var EXCLUDE_PROPS = ["data", "scale"];
+const EXCLUDE_PROPS = ["data", "scale"];
 function createElementRender() {
-  var Element = /* @__PURE__ */ React.forwardRef(function(_ref, ref) {
-    var render = _ref.render, _ref$childrenPosition = _ref.childrenPosition, childrenPosition = _ref$childrenPosition === void 0 ? "below" : _ref$childrenPosition, xS = _ref.x, yS = _ref.y, source = _objectWithoutProperties(_ref, _excluded);
-    var _Element$props = Element.props, _Element$props$forwar = _Element$props.forwardRef, forwardRef = _Element$props$forwar === void 0 ? null : _Element$props$forwar;
-    _Element$props.children;
-    var Children = _Element$props.Children, _Element$props$x = _Element$props.x, x = _Element$props$x === void 0 ? xS : _Element$props$x, _Element$props$y = _Element$props.y, y = _Element$props$y === void 0 ? yS : _Element$props$y, props = _objectWithoutProperties(_Element$props, _excluded2);
-    var children = getOriginChildren(Children);
-    var mergedProps = assignProps(_objectSpread(_objectSpread({
+  const Element = /* @__PURE__ */ React.forwardRef(function({
+    render,
+    childrenPosition = "below",
+    x: xS,
+    y: yS,
+    ...source
+  }, ref) {
+    const {
+      forwardRef = null,
+      children: _children,
+      Children,
+      x = xS,
+      y = yS,
+      ...props
+    } = Element.props;
+    let children = getOriginChildren(Children);
+    let mergedProps = assignProps({
       x: xS,
-      y: yS
-    }, props), {}, {
+      y: yS,
+      ...props,
       ref: useForkRef(forwardRef, ref)
-    }), _objectSpread({
+    }, {
       x,
-      y
-    }, source));
+      y,
+      ...source
+    });
     if (typeof children === "function") {
-      var _child = mergedProps.children;
+      const _child = mergedProps.children;
       mergedProps = assignProps(children(mergedProps), mergedProps);
       children = mergedProps.children;
       mergedProps.children = _child;
     }
-    var Tag = typeof render === "string" ? mergedProps.tag || render : render;
+    const Tag = typeof render === "string" ? mergedProps.tag || render : render;
     if (childrenPosition === "inside") {
       mergedProps.children = children === void 0 ? mergedProps.children : children;
     }
@@ -44,9 +52,10 @@ function createElementRender() {
       key: "child-above"
     }, childrenPosition === "above" ? children : null), /* @__PURE__ */ React.createElement(Tag, _extends({
       "aria-hidden": true
-    }, propsForElement(_objectSpread({
-      __excludeProps: EXCLUDE_PROPS
-    }, mergedProps), Tag), {
+    }, propsForElement({
+      __excludeProps: EXCLUDE_PROPS,
+      ...mergedProps
+    }, Tag), {
       key: "element"
     })), /* @__PURE__ */ React.createElement(React.Fragment, {
       key: "child-below"
@@ -57,44 +66,52 @@ function createElementRender() {
 }
 function elementEnhancement() {
   return {
-    init: function init() {
+    init: function() {
       this.Element = createElementRender();
     },
-    asProps: function asProps(_ref2, _WrapperComponent, isFunction) {
-      var $rootProps = _ref2.$rootProps, props = _objectWithoutProperties(_ref2, _excluded3);
+    asProps: function({
+      $rootProps,
+      ...props
+    }, _WrapperComponent, isFunction) {
       if (isFunction) {
-        return _objectSpread(_objectSpread(_objectSpread({}, $rootProps), props), {}, {
+        return {
+          ...$rootProps,
+          ...props,
           Element: this.Element
-        });
+        };
       }
-      return _objectSpread(_objectSpread({}, $rootProps), props);
+      return {
+        ...$rootProps,
+        ...props
+      };
     },
-    render: function render(_render, props) {
+    render: function(render, props) {
       this.Element.props = props;
-      return _render;
+      return render;
     }
   };
 }
 function WrapComponent(Element) {
   function ElementWithContext(props, ref) {
-    var _React$useContext = React.useContext(Plot[CONTEXT_COMPONENT]), $rootProps = _React$useContext.$rootProps;
+    const {
+      $rootProps
+    } = React.useContext(Plot[CONTEXT_COMPONENT]);
     return /* @__PURE__ */ React.createElement(Element, _extends({
       ref,
       $rootProps
     }, props));
   }
   ElementWithContext.displayName = Element.displayName;
-  var WrapperComponent = createBaseComponent(ElementWithContext);
+  const WrapperComponent = createBaseComponent(ElementWithContext);
   WrapperComponent.displayName = Element.displayName;
   return hoistNonReactStatics(WrapperComponent, Element);
 }
-function createElement(ElementRoot) {
-  var child = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-  var options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-  var Element = createComponent(ElementRoot, child, _objectSpread(_objectSpread({}, options), {}, {
+function createElement(ElementRoot, child = {}, options = {}) {
+  const Element = createComponent(ElementRoot, child, {
+    ...options,
     enhancements: [elementEnhancement]
-  }));
-  Object.keys(child).forEach(function(n) {
+  });
+  Object.keys(child).forEach((n) => {
     Element[n] = WrapComponent(Element[n]);
   });
   return WrapComponent(Element);

package/lib/esm/style/axis.shadow.css

@@ -10,6 +10,9 @@ STick {
   font-size: var(--intergalactic-fs-100, 12px);
   fill: var(--intergalactic-chart-grid-text-label, #6c6e79);
 }
+STick[primaryText] {
+  fill: var(--intergalactic-text-primary, #191b23);
+}
 
 STick[hide] {
   display: none;