victory-group 37.1.2 → 37.3.0

package/dist/victory-group.js

@@ -227,14 +227,15 @@ function getChildren(initialProps, childComponents, calculatedProps) {
   } = newCalculatedProps;
   const {
     labelComponent,
-    polar
+    polar,
+    theme
   } = props;
   const childProps = getChildProps(props, newCalculatedProps);
   const parentName = props.name || "group";
   return children.map((child, index) => {
     const role = child.type && child.type.role;
     const xOffset = polar ? getPolarX0(props, newCalculatedProps, index, role) : getX0(props, newCalculatedProps, index, role);
-    const style = role === "voronoi" || role === "tooltip" || role === "label" ? child.props.style : victory_core__WEBPACK_IMPORTED_MODULE_3__.getChildStyle(child, index, newCalculatedProps);
+    const style = role === "voronoi" || role === "tooltip" || role === "label" ? child.props.style : victory_core__WEBPACK_IMPORTED_MODULE_3__.getChildStyle(child, index, newCalculatedProps, theme);
     const labels = props.labels ? getLabels(props, datasets, index) : child.props.labels;
     const name = child.props.name || `${parentName}-${role}-${index}`;
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().cloneElement(child, Object.assign({
@@ -5310,20 +5311,16 @@ const orange = {
   "100": "#FEE2D5",
   "300": "#FFA981",
   "500": "#FF6F2C",
+  "700": "#FF4E1B",
   "900": "#D74D26"
 };
 const red = {
   "100": "#FFDCE5",
   "300": "#FF9EB7",
   "500": "#F82B60",
+  "700": "#D31A3D",
   "900": "#BA1E45"
 };
-const pink = {
-  "100": "#FFDAF6",
-  "300": "#F99DE2",
-  "500": "#FF08C2",
-  "900": "#B2158B"
-};
 const purple = {
   "100": "#EDE3FE",
   "300": "#CDB0FF",
@@ -5334,6 +5331,7 @@ const blue = {
   "100": "#CFDFFF",
   "300": "#9CC7FF",
   "500": "#2D7FF9",
+  "700": "#0056B3",
   "900": "#2750AE"
 };
 const cyan = {
@@ -5352,9 +5350,29 @@ const green = {
   "100": "#D1F7C4",
   "300": "#93E088",
   "500": "#20C933",
+  "700": "#1B9B2A",
   "900": "#338A17"
 };
-const colors = [blue["500"], pink["500"], teal["500"], purple["500"], green["500"], orange["500"], cyan["500"], red["500"], yellow["500"]];
+const colors = {
+  blue: blue["500"],
+  cyan: cyan["500"],
+  green: green["500"],
+  yellow: yellow["500"],
+  orange: orange["500"],
+  red: red["500"],
+  purple: purple["500"],
+  teal: teal["500"]
+};
+const colorScale = Object.values(colors);
+const grayscale = [gray["100"], gray["300"], gray["500"], gray["700"], gray["900"]];
+const warm = [yellow["300"], yellow["500"], orange["500"], orange["900"], red["500"]];
+const cool = [purple["500"], blue["500"], cyan["500"], teal["500"], green["500"]];
+const heatmap = [green["900"], green["500"], yellow["500"], orange["500"], red["500"]];
+const redPalette = Object.values(red);
+const greenPalette = Object.values(green);
+const bluePalette = Object.values(blue);
+const defaultColor = blue["500"];
+
 // *
 // * Typography
 // *
@@ -5368,8 +5386,8 @@ const padding = 8;
 const baseProps = {
   width: 450,
   height: 300,
-  padding: 50,
-  colorScale: colors
+  padding: 60,
+  colorScale
 };
 // *
 // * Labels
@@ -5398,10 +5416,23 @@ const borderRadius = 1;
 // * Theme
 // *
 const clean = {
+  palette: {
+    colors,
+    grayscale,
+    qualitative: colorScale,
+    heatmap,
+    warm,
+    cool,
+    red: redPalette,
+    green: greenPalette,
+    blue: bluePalette
+  },
   area: Object.assign({
     style: {
       data: {
-        fill: cyan["500"]
+        fill: defaultColor,
+        strokeWidth: 2,
+        fillOpacity: 0.5
       },
       labels: baseLabelStyles
     }
@@ -5410,13 +5441,13 @@ const clean = {
     style: {
       axis: {
         fill: "transparent",
-        stroke: gray["300"],
+        stroke: gray["500"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin
       },
       axisLabel: Object.assign({}, centeredLabelStyles, {
-        padding,
+        padding: 35,
         stroke: "transparent"
       }),
       grid: {
@@ -5435,10 +5466,10 @@ const clean = {
   polarAxis: Object.assign({
     style: {
       axis: {
-        stroke: gray["300"]
+        stroke: gray["500"]
       },
       grid: {
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeDasharray,
         strokeLinecap,
         strokeLinejoin,
@@ -5447,7 +5478,7 @@ const clean = {
       ticks: {
         fill: "transparent",
         size: 5,
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin
@@ -5458,10 +5489,10 @@ const clean = {
   polarDependentAxis: Object.assign({
     style: {
       axis: {
-        stroke: gray["300"]
+        stroke: gray["500"]
       },
       grid: {
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeDasharray,
         strokeLinecap,
         strokeLinejoin,
@@ -5470,7 +5501,7 @@ const clean = {
       ticks: {
         fill: "transparent",
         size: 5,
-        stroke: gray["200"],
+        stroke: gray["300"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin
@@ -5481,9 +5512,10 @@ const clean = {
   bar: Object.assign({
     style: {
       data: {
-        fill: blue["500"],
+        fill: defaultColor,
         padding,
-        strokeWidth: 0
+        strokeWidth: 1,
+        fillOpacity: 0.5
       },
       labels: baseLabelStyles
     },
@@ -5519,15 +5551,16 @@ const clean = {
       }),
       q1: {
         padding,
-        fill: teal["500"],
-        rx: borderRadius
+        fill: colorScale[0],
+        rx: borderRadius,
+        strokeWidth: 2
       },
       q1Labels: Object.assign({}, baseLabelStyles, {
         padding: 3
       }),
       q3: {
         padding,
-        fill: teal["500"],
+        fill: colorScale[1],
         rx: borderRadius
       },
       q3Labels: Object.assign({}, baseLabelStyles, {
@@ -5548,8 +5581,8 @@ const clean = {
       })
     },
     candleColors: {
-      positive: teal["500"],
-      negative: orange["500"]
+      positive: green["500"],
+      negative: red["500"]
     },
     wickStrokeWidth: 2
   }, baseProps),
@@ -5568,14 +5601,13 @@ const clean = {
     }
   }, baseProps),
   group: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   histogram: Object.assign({
     style: {
       data: {
         fill: cyan["500"],
-        stroke: "transparent",
-        strokeWidth: 0
+        fillOpacity: 0.5
       },
       labels: baseLabelStyles
     },
@@ -5586,21 +5618,23 @@ const clean = {
   }, baseProps),
   label: baseLabelStyles,
   legend: {
-    colorScale: colors,
-    gutter: 10,
-    orientation: "vertical",
+    colorScale,
+    gutter: 24,
+    borderPadding: 10,
+    orientation: "horizontal",
     titleOrientation: "top",
+    centerTitle: true,
     style: {
       data: {
         type: "circle"
       },
       labels: {
         ...baseLabelStyles,
-        fontSize: 14
+        fontSize: 12
       },
       title: Object.assign({}, baseLabelStyles, {
         padding,
-        fontSize: 20
+        fontSize: 16
       }),
       border: {
         stroke: gray["200"],
@@ -5614,7 +5648,7 @@ const clean = {
       data: {
         fill: "transparent",
         opacity: 1,
-        stroke: pink["500"],
+        stroke: defaultColor,
         strokeWidth: 2,
         strokeLinecap,
         strokeLinejoin
@@ -5624,31 +5658,40 @@ const clean = {
   }, baseProps),
   pie: Object.assign({
     style: {
+      parent: {
+        backgroundColor: gray.white
+      },
       data: {
         padding,
         stroke: gray.white,
         strokeWidth: 1
       },
-      labels: Object.assign({}, baseLabelStyles, {
-        padding: 20
-      })
+      labels: {
+        ...baseLabelStyles,
+        padding: 20,
+        fill: gray["600"],
+        fontSize: 10
+      }
     },
-    colorScale: colors,
+    colorScale,
     cornerRadius: borderRadius
   }, baseProps),
   scatter: Object.assign({
     style: {
       data: {
-        fill: purple["500"],
+        fill: defaultColor,
         opacity: 1,
         stroke: "transparent",
         strokeWidth: 0
       },
-      labels: baseLabelStyles
+      labels: {
+        ...baseLabelStyles,
+        padding: 20
+      }
     }
   }, baseProps),
   stack: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   tooltip: {
     style: Object.assign({}, baseLabelStyles, {
@@ -5656,7 +5699,7 @@ const clean = {
       pointerEvents: "none"
     }),
     flyoutStyle: {
-      stroke: gray["500"],
+      stroke: gray["300"],
       strokeWidth: 2,
       fill: gray.white,
       pointerEvents: "none"
@@ -5673,8 +5716,8 @@ const clean = {
   voronoi: Object.assign({
     style: {
       data: {
-        fill: red["100"],
-        stroke: red["500"],
+        fill: blue["100"],
+        stroke: defaultColor,
         strokeWidth: 2
       },
       labels: Object.assign({}, baseLabelStyles, {
@@ -5711,9 +5754,28 @@ __webpack_require__.r(__webpack_exports__);
 // *
 // * Colors
 // *
-const colors = ["#252525", "#525252", "#737373", "#969696", "#bdbdbd", "#d9d9d9", "#f0f0f0"];
+const colors = {
+  blue: "#4F7DA1",
+  pink: "#E2A37F",
+  teal: "#00796B",
+  purple: "#DF948A",
+  green: "#8BC34A",
+  orange: "#F4511E",
+  cyan: "#006064",
+  red: "#DF5A49",
+  yellow: "#FFF59D"
+};
+const colorScale = ["#252525", "#525252", "#737373", "#969696", "#bdbdbd", "#d9d9d9", "#f0f0f0"];
 const charcoal = "#252525";
 const grey = "#969696";
+const qualitative = ["#334D5C", "#45B29D", "#EFC94C", "#E27A3F", "#DF5A49", "#4F7DA1", "#55DBC1", "#EFDA97", "#E2A37F", "#DF948A"];
+const heatmap = ["#428517", "#77D200", "#D6D305", "#EC8E19", "#C92B05"];
+const warm = ["#940031", "#C43343", "#DC5429", "#FF821D", "#FFAF55"];
+const cool = ["#2746B9", "#0B69D4", "#2794DB", "#31BB76", "#60E83B"];
+const red = ["#FCAE91", "#FB6A4A", "#DE2D26", "#A50F15", "#750B0E"];
+const green = ["#354722", "#466631", "#649146", "#8AB25C", "#A9C97E"];
+const blue = ["#002C61", "#004B8F", "#006BC9", "#3795E5", "#65B4F4"];
+
 // *
 // * Typography
 // *
@@ -5727,7 +5789,7 @@ const baseProps = {
   width: 450,
   height: 300,
   padding: 50,
-  colorScale: colors
+  colorScale
 };
 // *
 // * Labels
@@ -5749,6 +5811,17 @@ const centeredLabelStyles = Object.assign({
 const strokeLinecap = "round";
 const strokeLinejoin = "round";
 const grayscale = {
+  palette: {
+    colors,
+    grayscale: colorScale,
+    qualitative,
+    heatmap,
+    warm,
+    cool,
+    red,
+    green,
+    blue
+  },
   area: Object.assign({
     style: {
       data: {
@@ -5863,7 +5936,7 @@ const grayscale = {
     }
   }, baseProps),
   group: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   histogram: Object.assign({
     style: {
@@ -5876,7 +5949,7 @@ const grayscale = {
     }
   }, baseProps),
   legend: {
-    colorScale: colors,
+    colorScale,
     gutter: 10,
     orientation: "vertical",
     titleOrientation: "top",
@@ -5911,7 +5984,7 @@ const grayscale = {
         padding: 20
       })
     },
-    colorScale: colors,
+    colorScale,
     width: 400,
     height: 400,
     padding: 50
@@ -5927,7 +6000,7 @@ const grayscale = {
     }
   }, baseProps),
   stack: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   tooltip: {
     style: Object.assign({}, baseLabelStyles, {
@@ -5987,11 +6060,31 @@ const lime300 = "#DCE775";
 const lightGreen500 = "#8BC34A";
 const teal700 = "#00796B";
 const cyan900 = "#006064";
-const colors = [deepOrange600, yellow200, lime300, lightGreen500, teal700, cyan900];
+const colorScale = [deepOrange600, yellow200, lime300, lightGreen500, teal700, cyan900];
 const blueGrey50 = "#ECEFF1";
 const blueGrey300 = "#90A4AE";
 const blueGrey700 = "#455A64";
 const grey900 = "#212121";
+const colors = {
+  blue: "#4F7DA1",
+  pink: "#E2A37F",
+  teal: teal700,
+  purple: "#DF948A",
+  green: lightGreen500,
+  orange: deepOrange600,
+  cyan: cyan900,
+  red: "#DF5A49",
+  yellow: yellow200
+};
+const grayscale = [blueGrey50, blueGrey300, blueGrey700, grey900];
+const qualitative = ["#334D5C", "#45B29D", "#EFC94C", "#E27A3F", "#DF5A49", "#4F7DA1", "#55DBC1", "#EFDA97", "#E2A37F", "#DF948A"];
+const heatmap = ["#428517", "#77D200", "#D6D305", "#EC8E19", "#C92B05"];
+const warm = ["#940031", "#C43343", "#DC5429", "#FF821D", "#FFAF55"];
+const cool = ["#2746B9", "#0B69D4", "#2794DB", "#31BB76", "#60E83B"];
+const red = ["#FCAE91", "#FB6A4A", "#DE2D26", "#A50F15", "#750B0E"];
+const green = ["#354722", "#466631", "#649146", "#8AB25C", "#A9C97E"];
+const blue = ["#002C61", "#004B8F", "#006BC9", "#3795E5", "#65B4F4"];
+
 // *
 // * Typography
 // *
@@ -6029,6 +6122,17 @@ const strokeDasharray = "10, 5";
 const strokeLinecap = "round";
 const strokeLinejoin = "round";
 const material = {
+  palette: {
+    colors,
+    grayscale,
+    qualitative,
+    heatmap,
+    warm,
+    cool,
+    red,
+    green,
+    blue
+  },
   area: Object.assign({
     style: {
       data: {
@@ -6161,7 +6265,7 @@ const material = {
     }
   }, baseProps),
   group: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   histogram: Object.assign({
     style: {
@@ -6174,7 +6278,7 @@ const material = {
     }
   }, baseProps),
   legend: {
-    colorScale: colors,
+    colorScale,
     gutter: 10,
     orientation: "vertical",
     titleOrientation: "top",
@@ -6200,7 +6304,7 @@ const material = {
     }
   }, baseProps),
   pie: Object.assign({
-    colorScale: colors,
+    colorScale,
     style: {
       data: {
         padding,
@@ -6224,7 +6328,7 @@ const material = {
     }
   }, baseProps),
   stack: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   tooltip: {
     style: Object.assign({}, baseLabelStyles, {
@@ -8847,6 +8951,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "getColorScale": function() { return /* binding */ getColorScale; },
 /* harmony export */   "toTransformString": function() { return /* binding */ toTransformString; }
 /* harmony export */ });
+/* harmony import */ var _victory_theme_victory_theme__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../victory-theme/victory-theme */ "../../victory-core/es/victory-theme/victory-theme.js");
+
+
 /**
  * Given an object with CSS/SVG transform definitions, return the string value
  * for use with the `transform` CSS property or SVG attribute. Note that we
@@ -8883,20 +8990,37 @@ const toTransformString = function (obj) {
  * of 5 hex string values in that color scale. If no 'name' parameter
  * is given, it will return the Victory default grayscale.
  * @param {String} name The name of the color scale to return (optional).
+ * @param {Object} theme The theme object to retrieve the color scale from (optional).
  * @returns {Array} An array of 5 hex string values composing a color scale.
  */
-function getColorScale(name) {
+function getColorScale(name, theme) {
+  if (theme === void 0) {
+    theme = _victory_theme_victory_theme__WEBPACK_IMPORTED_MODULE_0__.VictoryTheme.material;
+  }
+  const {
+    palette: {
+      grayscale = ["#cccccc", "#969696", "#636363", "#252525"],
+      qualitative = [],
+      heatmap = [],
+      warm = [],
+      cool = [],
+      red = [],
+      blue = [],
+      green = []
+    } = {}
+  } = theme;
   const scales = {
-    grayscale: ["#cccccc", "#969696", "#636363", "#252525"],
-    qualitative: ["#334D5C", "#45B29D", "#EFC94C", "#E27A3F", "#DF5A49", "#4F7DA1", "#55DBC1", "#EFDA97", "#E2A37F", "#DF948A"],
-    heatmap: ["#428517", "#77D200", "#D6D305", "#EC8E19", "#C92B05"],
-    warm: ["#940031", "#C43343", "#DC5429", "#FF821D", "#FFAF55"],
-    cool: ["#2746B9", "#0B69D4", "#2794DB", "#31BB76", "#60E83B"],
-    red: ["#FCAE91", "#FB6A4A", "#DE2D26", "#A50F15", "#750B0E"],
-    blue: ["#002C61", "#004B8F", "#006BC9", "#3795E5", "#65B4F4"],
-    green: ["#354722", "#466631", "#649146", "#8AB25C", "#A9C97E"]
+    grayscale,
+    qualitative,
+    heatmap,
+    warm,
+    cool,
+    red,
+    blue,
+    green
   };
-  return name ? scales[name] : scales.grayscale;
+  const selectedScale = name && scales[name]?.length ? scales[name] : scales.grayscale;
+  return selectedScale;
 }
 
 /***/ }),
@@ -9522,34 +9646,31 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "getDomain": function() { return /* binding */ getDomain; },
 /* harmony export */   "getDomainFromChildren": function() { return /* binding */ getDomainFromChildren; },
 /* harmony export */   "getScale": function() { return /* binding */ getScale; },
-/* harmony export */   "getStringsFromCategories": function() { return /* binding */ getStringsFromCategories; },
 /* harmony export */   "getStringsFromChildren": function() { return /* binding */ getStringsFromChildren; },
+/* harmony export */   "getStringsFromChildrenCategories": function() { return /* binding */ getStringsFromChildrenCategories; },
 /* harmony export */   "getStringsFromData": function() { return /* binding */ getStringsFromData; },
 /* harmony export */   "getStyle": function() { return /* binding */ getStyle; },
 /* harmony export */   "getWidth": function() { return /* binding */ getWidth; }
 /* harmony export */ });
-/* harmony import */ var lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash/isPlainObject */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/isPlainObject.js");
-/* harmony import */ var lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var lodash_uniqBy__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/uniqBy */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/uniqBy.js");
-/* harmony import */ var lodash_uniqBy__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_uniqBy__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var lodash_groupBy__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/groupBy */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/groupBy.js");
-/* harmony import */ var lodash_groupBy__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_groupBy__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var lodash_uniq__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lodash/uniq */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/uniq.js");
-/* harmony import */ var lodash_uniq__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lodash_uniq__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var lodash_defaults__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lodash/defaults */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/defaults.js");
-/* harmony import */ var lodash_defaults__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(lodash_defaults__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _axis__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./axis */ "../../victory-core/es/victory-util/axis.js");
-/* harmony import */ var _style__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./style */ "../../victory-core/es/victory-util/style.js");
-/* harmony import */ var _data__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./data */ "../../victory-core/es/victory-util/data.js");
-/* harmony import */ var _domain__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./domain */ "../../victory-core/es/victory-util/domain.js");
-/* harmony import */ var _events__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./events */ "../../victory-core/es/victory-util/events.js");
-/* harmony import */ var _collection__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./collection */ "../../victory-core/es/victory-util/collection.js");
-/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./helpers */ "../../victory-core/es/victory-util/helpers.js");
-/* harmony import */ var _scale__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./scale */ "../../victory-core/es/victory-util/scale.js");
-/* harmony import */ var _log__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./log */ "../../victory-core/es/victory-util/log.js");
-
+/* harmony import */ var lodash_uniqBy__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash/uniqBy */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/uniqBy.js");
+/* harmony import */ var lodash_uniqBy__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_uniqBy__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var lodash_groupBy__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/groupBy */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/groupBy.js");
+/* harmony import */ var lodash_groupBy__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_groupBy__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var lodash_uniq__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/uniq */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/uniq.js");
+/* harmony import */ var lodash_uniq__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_uniq__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var lodash_defaults__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lodash/defaults */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/defaults.js");
+/* harmony import */ var lodash_defaults__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lodash_defaults__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _axis__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./axis */ "../../victory-core/es/victory-util/axis.js");
+/* harmony import */ var _style__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./style */ "../../victory-core/es/victory-util/style.js");
+/* harmony import */ var _data__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./data */ "../../victory-core/es/victory-util/data.js");
+/* harmony import */ var _domain__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./domain */ "../../victory-core/es/victory-util/domain.js");
+/* harmony import */ var _events__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./events */ "../../victory-core/es/victory-util/events.js");
+/* harmony import */ var _collection__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./collection */ "../../victory-core/es/victory-util/collection.js");
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./helpers */ "../../victory-core/es/victory-util/helpers.js");
+/* harmony import */ var _scale__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./scale */ "../../victory-core/es/victory-util/scale.js");
+/* harmony import */ var _log__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./log */ "../../victory-core/es/victory-util/log.js");
 
 
 
@@ -9578,7 +9699,7 @@ function addBinsToParentPropsIfHistogram(_ref) {
     return child.type && child.type.role === "histogram";
   });
   if (someChildrenAreHistograms && !allChildrenAreHistograms) {
-    _log__WEBPACK_IMPORTED_MODULE_6__.warn("VictoryHistogram only supports being stacked with other VictoryHistogram components. Check to make sure that you are only passing VictoryHistogram components to VictoryStack");
+    _log__WEBPACK_IMPORTED_MODULE_5__.warn("VictoryHistogram only supports being stacked with other VictoryHistogram components. Check to make sure that you are only passing VictoryHistogram components to VictoryStack");
   }
 
   // if we are stacking histograms, we need to generate explicit bins
@@ -9591,7 +9712,7 @@ function addBinsToParentPropsIfHistogram(_ref) {
   // if we have explicit bins then we don't need to calculate them
   if (!Array.isArray(childBins)) {
     const combinedData = children.reduce((memo, child) => {
-      const xAccessor = _helpers__WEBPACK_IMPORTED_MODULE_7__.createAccessor(child.props.x || "x");
+      const xAccessor = _helpers__WEBPACK_IMPORTED_MODULE_6__.createAccessor(child.props.x || "x");
       return memo.concat(child.props.data.map(datum => ({
         x: xAccessor(datum)
       })));
@@ -9634,7 +9755,7 @@ function getDataFromChildren(props, childComponents) {
     maxDomain
   };
   let stack = 0;
-  const children = childComponents ? childComponents.slice(0) : react__WEBPACK_IMPORTED_MODULE_5___default().Children.toArray(props.children);
+  const children = childComponents ? childComponents.slice(0) : react__WEBPACK_IMPORTED_MODULE_4___default().Children.toArray(props.children);
   parentProps = addBinsToParentPropsIfHistogram({
     children,
     props,
@@ -9645,13 +9766,13 @@ function getDataFromChildren(props, childComponents) {
     const childProps = Object.assign({}, child.props, parentProps);
     let childData;
     let childElement = child;
-    if (!_data__WEBPACK_IMPORTED_MODULE_8__.isDataComponent(child)) {
+    if (!_data__WEBPACK_IMPORTED_MODULE_7__.isDataComponent(child)) {
       return null;
-    } else if (child.type && _helpers__WEBPACK_IMPORTED_MODULE_7__.isFunction(child.type.getData)) {
-      childElement = parent ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().cloneElement(child, parent.props) : child;
+    } else if (child.type && _helpers__WEBPACK_IMPORTED_MODULE_6__.isFunction(child.type.getData)) {
+      childElement = parent ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().cloneElement(child, parent.props) : child;
       childData = childElement.type.getData(childProps);
     } else {
-      childData = _data__WEBPACK_IMPORTED_MODULE_8__.getData(childProps);
+      childData = _data__WEBPACK_IMPORTED_MODULE_7__.getData(childProps);
     }
     stack += 1;
     return childData.map((datum, index) => Object.assign({
@@ -9660,23 +9781,23 @@ function getDataFromChildren(props, childComponents) {
     }, datum));
   };
   const stacked = children.filter(c => c.type && c.type.role === "stack").length;
-  const combine = (memo, val) => memo.concat(lodash_uniqBy__WEBPACK_IMPORTED_MODULE_1___default()(val, "_group"));
-  const datasets = _helpers__WEBPACK_IMPORTED_MODULE_7__.reduceChildren(children, iteratee, props, [], combine);
+  const combine = (memo, val) => memo.concat(lodash_uniqBy__WEBPACK_IMPORTED_MODULE_0___default()(val, "_group"));
+  const datasets = _helpers__WEBPACK_IMPORTED_MODULE_6__.reduceChildren(children, iteratee, props, [], combine);
   const group = stacked ? "_group" : "_stack";
-  return Object.values(lodash_groupBy__WEBPACK_IMPORTED_MODULE_2___default()(datasets, group));
+  return Object.values(lodash_groupBy__WEBPACK_IMPORTED_MODULE_1___default()(datasets, group));
 }
 function getData(props, childComponents) {
   if (props.data) {
-    return _data__WEBPACK_IMPORTED_MODULE_8__.getData(props);
+    return _data__WEBPACK_IMPORTED_MODULE_7__.getData(props);
   }
-  return getDataFromChildren(props, childComponents || react__WEBPACK_IMPORTED_MODULE_5___default().Children.toArray(props.children));
+  return getDataFromChildren(props, childComponents || react__WEBPACK_IMPORTED_MODULE_4___default().Children.toArray(props.children));
 }
 function getWidth(props, groupLength, seriesLength) {
   const {
     datasets,
     horizontal
   } = props;
-  const range = horizontal ? _helpers__WEBPACK_IMPORTED_MODULE_7__.getRange(props, "y") : _helpers__WEBPACK_IMPORTED_MODULE_7__.getRange(props, "x");
+  const range = horizontal ? _helpers__WEBPACK_IMPORTED_MODULE_6__.getRange(props, "y") : _helpers__WEBPACK_IMPORTED_MODULE_6__.getRange(props, "x");
   const extent = Math.abs(range[1] - range[0]);
   const seriesLengthValue = seriesLength !== undefined ? seriesLength : Array.isArray(datasets[0]) && datasets[0].length || 1;
   const groupLengthValue = groupLength || datasets.length;
@@ -9722,8 +9843,8 @@ function getDefaultDomainPadding(props, axis, childComponents) {
 }
 function getDomainFromChildren(props, axis, childComponents) {
   // eslint-disable-line max-statements, complexity, max-len
-  const children = childComponents ? childComponents.slice(0) : react__WEBPACK_IMPORTED_MODULE_5___default().Children.toArray(props.children);
-  const parentData = props.data ? _data__WEBPACK_IMPORTED_MODULE_8__.getData(props) : undefined;
+  const children = childComponents ? childComponents.slice(0) : react__WEBPACK_IMPORTED_MODULE_4___default().Children.toArray(props.children);
+  const parentData = props.data ? _data__WEBPACK_IMPORTED_MODULE_7__.getData(props) : undefined;
   const {
     polar,
     startAngle,
@@ -9747,65 +9868,67 @@ function getDomainFromChildren(props, axis, childComponents) {
   }) : baseParentProps;
   const iteratee = child => {
     const sharedProps = Object.assign({}, child.props, parentProps);
-    if (!_domain__WEBPACK_IMPORTED_MODULE_9__.isDomainComponent(child)) {
+    if (!_domain__WEBPACK_IMPORTED_MODULE_8__.isDomainComponent(child)) {
       return null;
-    } else if (child.type && _helpers__WEBPACK_IMPORTED_MODULE_7__.isFunction(child.type.getDomain)) {
+    } else if (child.type && _helpers__WEBPACK_IMPORTED_MODULE_6__.isFunction(child.type.getDomain)) {
       return child.props && child.type.getDomain(sharedProps, axis);
     }
-    return _domain__WEBPACK_IMPORTED_MODULE_9__.getDomain(sharedProps, axis);
+    return _domain__WEBPACK_IMPORTED_MODULE_8__.getDomain(sharedProps, axis);
   };
-  const childDomains = _helpers__WEBPACK_IMPORTED_MODULE_7__.reduceChildren(children, iteratee, props);
-  const min = childDomains.length === 0 ? 0 : _collection__WEBPACK_IMPORTED_MODULE_10__.getMinValue(childDomains);
-  const max = childDomains.length === 0 ? 1 : _collection__WEBPACK_IMPORTED_MODULE_10__.getMaxValue(childDomains);
+  const childDomains = _helpers__WEBPACK_IMPORTED_MODULE_6__.reduceChildren(children, iteratee, props);
+  const min = childDomains.length === 0 ? 0 : _collection__WEBPACK_IMPORTED_MODULE_9__.getMinValue(childDomains);
+  const max = childDomains.length === 0 ? 1 : _collection__WEBPACK_IMPORTED_MODULE_9__.getMaxValue(childDomains);
   return [min, max];
 }
 function getDomain(props, axis, childComponents) {
-  const children = childComponents || react__WEBPACK_IMPORTED_MODULE_5___default().Children.toArray(props.children);
-  const propsDomain = _domain__WEBPACK_IMPORTED_MODULE_9__.getDomainFromProps(props, axis);
+  const children = childComponents || react__WEBPACK_IMPORTED_MODULE_4___default().Children.toArray(props.children);
+  const propsDomain = _domain__WEBPACK_IMPORTED_MODULE_8__.getDomainFromProps(props, axis);
   const domainPadding = getDefaultDomainPadding(props, axis, children);
   let domain;
   if (propsDomain) {
     domain = propsDomain;
   } else {
-    const minDomain = _domain__WEBPACK_IMPORTED_MODULE_9__.getMinFromProps(props, axis);
-    const maxDomain = _domain__WEBPACK_IMPORTED_MODULE_9__.getMaxFromProps(props, axis);
-    const dataset = (props.data || props.y) && _data__WEBPACK_IMPORTED_MODULE_8__.getData(props);
-    const dataDomain = dataset ? _domain__WEBPACK_IMPORTED_MODULE_9__.getDomainFromData(props, axis, dataset) : [];
+    const minDomain = _domain__WEBPACK_IMPORTED_MODULE_8__.getMinFromProps(props, axis);
+    const maxDomain = _domain__WEBPACK_IMPORTED_MODULE_8__.getMaxFromProps(props, axis);
+    const dataset = (props.data || props.y) && _data__WEBPACK_IMPORTED_MODULE_7__.getData(props);
+    const dataDomain = dataset ? _domain__WEBPACK_IMPORTED_MODULE_8__.getDomainFromData(props, axis, dataset) : [];
     const childDomain = getDomainFromChildren(props, axis, children);
-    const min = minDomain || _collection__WEBPACK_IMPORTED_MODULE_10__.getMinValue([...dataDomain, ...childDomain]);
-    const max = maxDomain || _collection__WEBPACK_IMPORTED_MODULE_10__.getMaxValue([...dataDomain, ...childDomain]);
-    domain = _domain__WEBPACK_IMPORTED_MODULE_9__.getDomainFromMinMax(min, max);
+    const min = minDomain || _collection__WEBPACK_IMPORTED_MODULE_9__.getMinValue([...dataDomain, ...childDomain]);
+    const max = maxDomain || _collection__WEBPACK_IMPORTED_MODULE_9__.getMaxValue([...dataDomain, ...childDomain]);
+    domain = _domain__WEBPACK_IMPORTED_MODULE_8__.getDomainFromMinMax(min, max);
   }
-  return _domain__WEBPACK_IMPORTED_MODULE_9__.formatDomain(domain, Object.assign({
+  return _domain__WEBPACK_IMPORTED_MODULE_8__.formatDomain(domain, Object.assign({
     domainPadding
   }, props), axis);
 }
 function getScale(props, axis, childComponents) {
   if (props.data) {
-    return _scale__WEBPACK_IMPORTED_MODULE_11__.getBaseScale(props, axis);
+    return _scale__WEBPACK_IMPORTED_MODULE_10__.getBaseScale(props, axis);
   }
-  const children = childComponents ? childComponents.slice(0) : react__WEBPACK_IMPORTED_MODULE_5___default().Children.toArray(props.children);
+  const children = childComponents ? childComponents.slice(0) : react__WEBPACK_IMPORTED_MODULE_4___default().Children.toArray(props.children);
   const iteratee = child => {
     const sharedProps = Object.assign({}, child.props, {
       horizontal: props.horizontal
     });
-    return _scale__WEBPACK_IMPORTED_MODULE_11__.getScaleType(sharedProps, axis);
+    return _scale__WEBPACK_IMPORTED_MODULE_10__.getScaleType(sharedProps, axis);
   };
-  const childScale = lodash_uniq__WEBPACK_IMPORTED_MODULE_3___default()(_helpers__WEBPACK_IMPORTED_MODULE_7__.reduceChildren(children, iteratee, props));
+  const childScale = lodash_uniq__WEBPACK_IMPORTED_MODULE_2___default()(_helpers__WEBPACK_IMPORTED_MODULE_6__.reduceChildren(children, iteratee, props));
 
   // default to linear scale if more than one uniq scale type is given by children
-  return childScale.length > 1 ? _scale__WEBPACK_IMPORTED_MODULE_11__.getScaleFromName("linear") : _scale__WEBPACK_IMPORTED_MODULE_11__.getScaleFromName(childScale[0]);
+  return childScale.length > 1 ? _scale__WEBPACK_IMPORTED_MODULE_10__.getScaleFromName("linear") : _scale__WEBPACK_IMPORTED_MODULE_10__.getScaleFromName(childScale[0]);
 }
 function getAllEvents(props) {
   const components = ["groupComponent", "containerComponent", "labelComponent"];
-  const componentEvents = _events__WEBPACK_IMPORTED_MODULE_12__.getComponentEvents(props, components);
+  const componentEvents = _events__WEBPACK_IMPORTED_MODULE_11__.getComponentEvents(props, components);
   let events = props.events;
   if (Array.isArray(componentEvents)) {
     events = Array.isArray(props.events) ? componentEvents.concat(...props.events) : componentEvents;
   }
   return events || [];
 }
-function getColor(calculatedProps, child, index) {
+
+// eslint-disable-next-line max-params
+function getColor(calculatedProps, child, index, theme) {
   // check for styles first
   const {
     style
@@ -9822,14 +9945,16 @@ function getColor(calculatedProps, child, index) {
   if (!colorScale && !color) {
     return undefined;
   }
-  const colors = Array.isArray(colorScale) ? colorScale : _style__WEBPACK_IMPORTED_MODULE_13__.getColorScale(colorScale);
+  const colors = Array.isArray(colorScale) ? colorScale : _style__WEBPACK_IMPORTED_MODULE_12__.getColorScale(colorScale, theme);
   return color || colors[index % colors.length];
 }
 function getStyle(theme, style, role) {
   const defaultStyle = theme && theme[role] && theme[role].style ? theme[role].style : {};
-  return _helpers__WEBPACK_IMPORTED_MODULE_7__.getStyles(style, defaultStyle);
+  return _helpers__WEBPACK_IMPORTED_MODULE_6__.getStyles(style, defaultStyle);
 }
-function getChildStyle(child, index, calculatedProps) {
+
+// eslint-disable-next-line max-params
+function getChildStyle(child, index, calculatedProps, theme) {
   const {
     style,
     role
@@ -9839,7 +9964,7 @@ function getChildStyle(child, index, calculatedProps) {
     return childStyle;
   }
   const childRole = child.type && child.type.role;
-  const defaultFill = childRole === "stack" ? undefined : getColor(calculatedProps, child, index);
+  const defaultFill = childRole === "stack" ? undefined : getColor(calculatedProps, child, index, theme);
   const defaultColor = childRole === "line" ? {
     fill: "none",
     stroke: defaultFill
@@ -9849,8 +9974,8 @@ function getChildStyle(child, index, calculatedProps) {
   const dataWidth = role === "stack" ? {} : {
     width: getWidth(calculatedProps)
   };
-  const dataStyle = lodash_defaults__WEBPACK_IMPORTED_MODULE_4___default()({}, childStyle.data, Object.assign({}, dataWidth, style.data, defaultColor));
-  const labelsStyle = lodash_defaults__WEBPACK_IMPORTED_MODULE_4___default()({}, childStyle.labels, style.labels);
+  const dataStyle = lodash_defaults__WEBPACK_IMPORTED_MODULE_3___default()({}, childStyle.data, Object.assign({}, dataWidth, style.data, defaultColor));
+  const labelsStyle = lodash_defaults__WEBPACK_IMPORTED_MODULE_3___default()({}, childStyle.labels, style.labels);
   return {
     ...childStyle,
     parent: style.parent,
@@ -9858,28 +9983,26 @@ function getChildStyle(child, index, calculatedProps) {
     labels: labelsStyle
   };
 }
-function getStringsFromCategories(childComponents, axis) {
+function getStringsFromChildrenCategories(childComponents, axis) {
   const iteratee = child => {
-    const childProps = child.props || {};
-    if (!_domain__WEBPACK_IMPORTED_MODULE_9__.isDomainComponent(child) || !childProps.categories) {
+    if (!_domain__WEBPACK_IMPORTED_MODULE_8__.isDomainComponent(child)) {
       return null;
     }
-    const categories = childProps.categories && !Array.isArray(childProps.categories) ? childProps.categories[axis] : childProps.props.categories;
-    const categoryStrings = categories && categories.filter(val => typeof val === "string");
-    return categoryStrings ? _collection__WEBPACK_IMPORTED_MODULE_10__.removeUndefined(categoryStrings) : [];
+    const childProps = child.props || {};
+    return _data__WEBPACK_IMPORTED_MODULE_7__.getStringsFromCategories(childProps, axis);
   };
-  return _helpers__WEBPACK_IMPORTED_MODULE_7__.reduceChildren(childComponents.slice(0), iteratee);
+  return _helpers__WEBPACK_IMPORTED_MODULE_6__.reduceChildren(childComponents.slice(0), iteratee);
 }
 function getStringsFromData(childComponents) {
   const iteratee = child => {
     const childProps = child.props || {};
     let data;
-    if (!_data__WEBPACK_IMPORTED_MODULE_8__.isDataComponent(child)) {
+    if (!_data__WEBPACK_IMPORTED_MODULE_7__.isDataComponent(child)) {
       return null;
-    } else if (child.type && _helpers__WEBPACK_IMPORTED_MODULE_7__.isFunction(child.type.getData)) {
+    } else if (child.type && _helpers__WEBPACK_IMPORTED_MODULE_6__.isFunction(child.type.getData)) {
       data = child.type.getData(childProps);
     } else {
-      data = _data__WEBPACK_IMPORTED_MODULE_8__.getData(childProps);
+      data = _data__WEBPACK_IMPORTED_MODULE_7__.getData(childProps);
     }
     return data.map(d => ({
       x: d.xName,
@@ -9898,28 +10021,28 @@ function getStringsFromData(childComponents) {
       y: y !== undefined ? memo.y.concat(y) : memo.y
     };
   };
-  return _helpers__WEBPACK_IMPORTED_MODULE_7__.reduceChildren(childComponents.slice(0), iteratee, {}, initialMemo, combine);
+  return _helpers__WEBPACK_IMPORTED_MODULE_6__.reduceChildren(childComponents.slice(0), iteratee, {}, initialMemo, combine);
 }
 function getCategoryAndAxisStringsFromChildren(props, axis, childComponents) {
-  const categories = lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_0___default()(props.categories) ? props.categories[axis] : props.categories;
-  const axisComponent = _axis__WEBPACK_IMPORTED_MODULE_14__.getAxisComponent(childComponents, axis);
-  const axisStrings = axisComponent ? _data__WEBPACK_IMPORTED_MODULE_8__.getStringsFromAxes(axisComponent.props, axis) : [];
-  const categoryStrings = categories || getStringsFromCategories(childComponents, axis);
-  return lodash_uniq__WEBPACK_IMPORTED_MODULE_3___default()([...categoryStrings, ...axisStrings].flat());
+  const categories = _data__WEBPACK_IMPORTED_MODULE_7__.getStringsFromCategories(props, axis);
+  const axisComponent = _axis__WEBPACK_IMPORTED_MODULE_13__.getAxisComponent(childComponents, axis);
+  const axisStrings = axisComponent ? _data__WEBPACK_IMPORTED_MODULE_7__.getStringsFromAxes(axisComponent.props, axis) : [];
+  const categoryStrings = categories.length ? categories : getStringsFromChildrenCategories(childComponents, axis);
+  return lodash_uniq__WEBPACK_IMPORTED_MODULE_2___default()([...categoryStrings, ...axisStrings].flat());
 }
 function getStringsFromChildren(props, childComponents) {
-  const children = childComponents || react__WEBPACK_IMPORTED_MODULE_5___default().Children.toArray(props.children);
+  const children = childComponents || react__WEBPACK_IMPORTED_MODULE_4___default().Children.toArray(props.children);
   const xStrings = getCategoryAndAxisStringsFromChildren(props, "x", children);
   const yStrings = getCategoryAndAxisStringsFromChildren(props, "y", children);
   const dataStrings = getStringsFromData(children);
   return {
-    x: lodash_uniq__WEBPACK_IMPORTED_MODULE_3___default()([...xStrings, ...dataStrings.x].flat()),
-    y: lodash_uniq__WEBPACK_IMPORTED_MODULE_3___default()([...yStrings, ...dataStrings.y].flat())
+    x: lodash_uniq__WEBPACK_IMPORTED_MODULE_2___default()([...xStrings, ...dataStrings.x].flat()),
+    y: lodash_uniq__WEBPACK_IMPORTED_MODULE_2___default()([...yStrings, ...dataStrings.y].flat())
   };
 }
 function getCategories(props, childComponents, allStrings) {
-  const xPropCategories = props.categories && !Array.isArray(props.categories) ? props.categories.x : props.categories;
-  const yPropCategories = props.categories && !Array.isArray(props.categories) ? props.categories.y : props.categories;
+  const xPropCategories = props.categories && _data__WEBPACK_IMPORTED_MODULE_7__.getStringsFromCategories(props, "x");
+  const yPropCategories = props.categories && _data__WEBPACK_IMPORTED_MODULE_7__.getStringsFromCategories(props, "y");
   const fallbackRequired = !xPropCategories || !yPropCategories;
   const fallbackProps = fallbackRequired ? allStrings || getStringsFromChildren(props, childComponents) : {};
   const xCategories = xPropCategories || fallbackProps.x;