@devgateway/dvz-ui-react 1.4.0 → 1.5.0

package/dist/esm/embeddable/chart/Line.js

@@ -1,81 +1,79 @@
 import { jsxs as v, jsx as a, Fragment as J } from "react/jsx-runtime";
-import { useState as k, useEffect as tt, Fragment as at } from "react";
-import { injectIntl as rt } from "react-intl";
-import { ResponsiveLine as nt } from "@nivo/line";
-import st from "./Tooltip.js";
-import { area as lt, line as it } from "d3-shape";
-import { useTheme as ct } from "@nivo/theming";
-import ot from "../../layout/FlexWrapDetector.js";
+import { useState as k, useEffect as rt, Fragment as nt } from "react";
+import { injectIntl as st } from "react-intl";
+import { ResponsiveLine as lt } from "@nivo/line";
+import it from "./Tooltip.js";
+import { area as ct, line as ot } from "d3-shape";
+import { useTheme as dt } from "@nivo/theming";
+import mt from "../../layout/FlexWrapDetector.js";
 import P from "../../utils/deviceType.js";
-const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].includes(P()), pe = P() === "mobile", xe = ["tablet", "midTablet"].includes(P()), ht = (m, x) => {
+const ht = "#66676d", K = "#f0f0f1", ft = ["mobile", "tablet", "midTablet"].includes(P()), pe = P() === "mobile", xe = ["tablet", "midTablet"].includes(P()), ut = (d, x) => {
   const N = document.createElement("canvas").getContext("2d");
-  return N.font = x, N.measureText(m).width;
-}, ft = ({
-  editing: m,
+  return N.font = x, N.measureText(d).width;
+}, pt = ({
+  editing: d,
   previewMode: x,
   app: V,
   legends: N,
   tooltip: $,
   tooltipEnabled: ye,
-  options: d,
+  options: m,
   intl: I,
   groupMode: Z,
-  reverse: ut,
+  reverse: xt,
   marginLeft: be,
   lineLabelPosition: ge,
   marginTop: q,
   marginRight: ve,
   marginBottom: Q,
   format: E,
-  colors: pt,
+  colors: yt,
   offsetY: Ne,
   height: Ee,
   showLegends: X,
   legendPosition: p,
   tickRotation: y,
-  offsetText: j,
-  tickColor: w,
+  offsetText: w,
+  tickColor: B,
   legendLabel: C,
   xLabelColor: O,
   colorGenerator: ee,
-  legendCheckBack: B,
+  legendCheckBack: A,
   legendLabelBack: Oe,
   legendLabelColor: te,
   highlightXAxisLine: Te,
-  showTickLine: A,
+  showTickLine: S,
   showRightAxis: De,
-  valueScale: xt,
+  valueScale: bt,
   enableArea: Me,
   areaShadingCriteria: ae,
   areaLowerBound: re,
   areaUpperBound: ne,
   showPoints: ke,
   maxValue: $e,
-  fixedMinValue: S,
-  fixedMaxValue: H,
+  fixedMinValue: H,
+  fixedMaxValue: R,
   offsetBottom: Ie,
-  yAxisTickValues: Fe,
-  enableGridY: Le,
+  yAxisTickValues: Le,
+  enableGridY: Fe,
   enableGridX: We,
-  overrideTickColor: R,
+  overrideTickColor: U,
   offsetRight: ze,
   selectedMeasures: _e,
   tooltipEnableMarkdown: je,
   minMaxClamp: we,
   reverseLegend: Be,
-  customAxisFormat: F,
+  customAxisFormat: L,
   mobileCustomization: Ae,
-  lineCurve: se,
-  customLabels: U
+  lineCurve: Se,
+  customLabels: G
 }) => {
   var he, fe, ue;
-  const s = JSON.parse(decodeURIComponent(Ae)), le = dt && ((s == null ? void 0 : s.showCustomization) ?? !1), L = le && x !== "Desktop", W = !m && le, [ie, Se] = k(50), [He, Re] = k(q), [yt, ce] = k(0), [Ue, Ge] = k(Q), [T, Ye] = k([]), z = d.data.map((e) => ({
+  const s = JSON.parse(decodeURIComponent(Ae)), se = ft && ((s == null ? void 0 : s.showCustomization) ?? !1), F = se && x !== "Desktop", W = !d && se, [le, He] = k(50), [Re, Ue] = k(q), [gt, ie] = k(0), [Ge, Ye] = k(Q), [T, Je] = k([]), z = m.data.map((e) => ({
     id: e.id,
-    label: U && U[e.id] ? U[e.id] : e.label || e.id,
+    label: G && G[e.id] ? G[e.id] : e.label || e.id,
     color: ee.getColor(e.id, e)
-  }));
-  console.log(se);
-  const oe = () => (Be && z.reverse(), /* @__PURE__ */ a(J, { children: X && z.map((e, t) => /* @__PURE__ */ v("div", { className: "legend item", onClick: () => Pe(e.id), children: [
+  })), ce = () => (Be && z.reverse(), /* @__PURE__ */ a(J, { children: X && z.map((e, t) => /* @__PURE__ */ v("div", { className: "legend item", onClick: () => Ve(e.id), children: [
     /* @__PURE__ */ a(
       "input",
       {
@@ -84,7 +82,7 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
         checked: T.length === 0 || !T.includes(e.id),
         readOnly: !0,
         style: {
-          backgroundColor: B === !0 ? e.color : "none",
+          backgroundColor: A === !0 ? e.color : "none",
           color: te
         }
       }
@@ -92,9 +90,9 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
     /* @__PURE__ */ a(
       "span",
       {
-        className: B === !0 ? "checkmark-with-bg" : "checkmark",
+        className: A === !0 ? "checkmark-with-bg" : "checkmark",
         style: {
-          backgroundColor: B === !0 ? e.color : "transparent"
+          backgroundColor: A === !0 ? e.color : "transparent"
         }
       }
     ),
@@ -109,50 +107,50 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
       }
     )
   ] }, t)) }));
-  tt(() => {
+  rt(() => {
     (() => {
       const r = 5 * Math.max(z.length - 5, 0);
-      Se(r);
+      He(r);
     })();
   }, [z]);
-  const Je = {
-    bottom: `-${ie}px`
-  }, Ke = {
-    bottom: `-${ie}px`,
+  const Ke = {
+    bottom: `-${le}px`
+  }, Pe = {
+    bottom: `-${le}px`,
     gap: "0px",
     top: "0px"
-  }, G = (e) => T.length ? e.filter((t) => T.indexOf(t.id) === -1) : e, Pe = (e) => {
+  }, _ = (e) => T.length ? e.filter((t) => T.indexOf(t.id) === -1) : e, Ve = (e) => {
     const t = T.slice();
     if (t.indexOf(e) > -1) {
       const r = t.indexOf(e);
       t.splice(r, 1);
     } else
       t.push(e);
-    Ye(t);
-  }, Ve = (e) => {
-    const t = Object.assign({}, e), r = ct();
-    (L || W) && de.includes(String(t.value)) && (t.value = "");
+    Je(t);
+  }, Ze = (e) => {
+    const t = Object.assign({}, e), r = dt();
+    (F || W) && de.includes(String(t.value)) && (t.value = "");
     let l = [], n = "";
-    if (L || W) {
+    if (F || W) {
       const c = String(t.value).split(" ");
       let o = 25;
-      m && x === "Mobile" || pe && !m ? o = (s == null ? void 0 : s.mobileMaxTickLength) ?? 25 : m && x === "Tablet" || xe && !m ? o = (s == null ? void 0 : s.tabletMaxTickLength) ?? 25 : window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches && !m && (o = 15), c.forEach((b) => {
+      d && x === "Mobile" || pe && !d ? o = (s == null ? void 0 : s.mobileMaxTickLength) ?? 25 : d && x === "Tablet" || xe && !d ? o = (s == null ? void 0 : s.tabletMaxTickLength) ?? 25 : window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches && !d && (o = 15), c.forEach((b) => {
         n.length + String(b).length <= o ? n += (n ? " " : "") + b : (l.push(n), n = b);
       }), n && l.push(n);
     } else
       l = [t.value];
     let i = 12;
-    return m && x === "Mobile" || pe && !m ? i = (s == null ? void 0 : s.mobileYAxisLineHeight) ?? 12 : (m && x === "Tablet" || xe && !m) && (i = (s == null ? void 0 : s.tabletYAxisLineHeight) ?? 12), ht(t.value, "12px Roboto") + 15, y > 0 && y < 180 ? /* @__PURE__ */ v("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
-      A && /* @__PURE__ */ a(
+    return d && x === "Mobile" || pe && !d ? i = (s == null ? void 0 : s.mobileYAxisLineHeight) ?? 12 : (d && x === "Tablet" || xe && !d) && (i = (s == null ? void 0 : s.tabletYAxisLineHeight) ?? 12), ut(t.value, "12px Roboto") + 15, y > 0 && y < 180 ? /* @__PURE__ */ v("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
+      S && /* @__PURE__ */ a(
         "line",
         {
-          stroke: R ? w : K,
+          stroke: U ? B : K,
           strokeWidth: 1.5,
           y1: -32,
           y2: -12
         }
       ),
-      /* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + j})`, children: l.map((c, o) => /* @__PURE__ */ a(
+      /* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + w})`, children: l.map((c, o) => /* @__PURE__ */ a(
         "text",
         {
           transform: `rotate(${y})`,
@@ -163,23 +161,23 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
             ...r.axis.ticks.text,
             fill: O === "null" ? "black" : O,
             fontSize: "12px",
-            fontFamily: "Roboto"
+            fontFamily: "sans-serif"
           },
           children: c
         },
         c
       )) })
     ] }) : y > 180 && y < 360 ? /* @__PURE__ */ v("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
-      A && /* @__PURE__ */ a(
+      S && /* @__PURE__ */ a(
         "line",
         {
-          stroke: R ? w : K,
+          stroke: U ? B : K,
           strokeWidth: 1.5,
           y1: -32,
           y2: -12
         }
       ),
-      /* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + j})`, children: /* @__PURE__ */ a(
+      /* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + w})`, children: /* @__PURE__ */ a(
         "text",
         {
           transform: `rotate(${y})`,
@@ -194,16 +192,16 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
         }
       ) })
     ] }) : /* @__PURE__ */ v("g", { transform: `translate(${e.x},${e.y + 30})`, children: [
-      A && /* @__PURE__ */ a(
+      S && /* @__PURE__ */ a(
         "line",
         {
-          stroke: R ? w : K,
+          stroke: U ? B : K,
           strokeWidth: 1.5,
           y1: -32,
           y2: -12
         }
       ),
-      /* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + j})`, children: l.map((c, o) => /* @__PURE__ */ a(
+      /* @__PURE__ */ a("g", { transform: `translate(0, ${e.y + w})`, children: l.map((c, o) => /* @__PURE__ */ a(
         "text",
         {
           transform: `rotate(${y})`,
@@ -214,52 +212,52 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
             ...r.axis.ticks.text,
             fill: O === "null" ? "black" : O,
             fontSize: "12px",
-            fontFamily: "Roboto"
+            fontFamily: "sans-serif"
           },
           children: c
         },
         c
       )) })
     ] });
-  }, Ze = ({ series: e, xScale: t, yScale: r, innerHeight: l }) => {
+  }, qe = ({ series: e, xScale: t, yScale: r, innerHeight: l }) => {
     const n = e && e.length > 0 ? e[0].color : "#3daff7", i = [];
     e[0] && e[0].data.forEach((u) => {
-      V == "csv" ? d.keys.forEach((g) => {
+      V == "csv" ? m.keys.forEach((g) => {
         i.push({ measure: g, min: u.data.variables[g] });
       }) : _e.forEach((g) => {
         i.push({ measure: g, min: u.data.variables[g] });
       });
     });
-    const c = i.sort((u, g) => u.min - g.min), o = ae == "CUSTOM_BETWEEN_TWO_LINES" && re ? re : c[0].measure, b = ae == "CUSTOM_BETWEEN_TWO_LINES" && ne ? ne : c[c.length - 1].measure, et = lt().x((u) => t(u.data.x)).y0((u) => r(u.data.variables[o])).y1((u) => r(u.data.variables[b]));
+    const c = i.sort((u, g) => u.min - g.min), o = ae == "CUSTOM_BETWEEN_TWO_LINES" && re ? re : c[0].measure, b = ae == "CUSTOM_BETWEEN_TWO_LINES" && ne ? ne : c[c.length - 1].measure, at = ct().x((u) => t(u.data.x)).y0((u) => r(u.data.variables[o])).y1((u) => r(u.data.variables[b]));
     return /* @__PURE__ */ a(J, { children: e && e[0] && /* @__PURE__ */ a(
       "path",
       {
-        d: et(e[0].data),
+        d: at(e[0].data),
         fill: n,
         fillOpacity: 0.4
       }
     ) });
-  }, qe = ({ series: e, xScale: t, yScale: r, innerHeight: l, innerWidth: n }) => {
-    const i = [0, n], c = it().x((o, b) => b === 0 ? -10 : o).y((o) => r(0));
-    return /* @__PURE__ */ a(at, { children: /* @__PURE__ */ a(
+  }, Qe = ({ series: e, xScale: t, yScale: r, innerHeight: l, innerWidth: n }) => {
+    const i = [0, n], c = ot().x((o, b) => b === 0 ? -10 : o).y((o) => r(0));
+    return /* @__PURE__ */ a(nt, { children: /* @__PURE__ */ a(
       "path",
       {
         d: c(i),
         fill: "none",
-        stroke: mt,
+        stroke: ht,
         style: { pointerEvents: "none", strokeDasharray: "4 4" }
       }
     ) });
   }, D = ["grid", "axes", "lines", "legends"];
-  Me && D.push(Ze), ke && (D.push("points"), D.push("mesh")), Te && D.push(qe);
+  Me && D.push(qe), ke && (D.push("points"), D.push("mesh")), Te && D.push(Qe);
   let M = [];
-  G(d.data).forEach((e) => {
+  _(m.data).forEach((e) => {
     e.data && (M = [...M, ...e.data.map((t) => t.y)]);
   });
-  const Qe = () => {
+  const Xe = () => {
     if (Z === "stacked") {
       const e = [];
-      G(d.data).forEach((l) => {
+      _(m.data).forEach((l) => {
         e.push(...l.data);
       });
       const r = [];
@@ -275,34 +273,35 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
     return f = f < 0 ? f * 0.9 : f * 1.1, h = h > 0 ? h * 0.9 : h * 1.1, { min: h, max: f };
   };
   let h = "auto", f = "auto";
-  const _ = Qe();
-  $e == "fixed" ? (h = S != null && S != "" ? S : _.min, f = H != null && H != "" ? H : _.max) : (h = _.min, f = _.max);
-  const me = () => /* @__PURE__ */ a(J, { children: X && C && /* @__PURE__ */ a("div", { className: "legend item", children: /* @__PURE__ */ a("label", { className: "legend-title", children: C }) }) }), Xe = {
-    top: He,
+  const j = Xe();
+  $e == "fixed" ? (h = H != null && H != "" ? H : j.min, f = R != null && R != "" ? R : j.max) : (h = j.min, f = j.max);
+  const oe = () => /* @__PURE__ */ a(J, { children: X && C && /* @__PURE__ */ a("div", { className: "legend item", children: /* @__PURE__ */ a("label", { className: "legend-title", children: C }) }) }), Ce = {
+    top: Re,
     right: ve,
-    bottom: Ue,
+    bottom: Ge,
     left: be
   };
-  let Y = parseInt(Fe);
-  const Ce = d.data && ((fe = (he = d.data) == null ? void 0 : he.filter((e) => {
+  let Y = parseInt(Le);
+  const et = m.data && ((fe = (he = m.data) == null ? void 0 : he.filter((e) => {
     var t;
     return ((t = e == null ? void 0 : e.data) == null ? void 0 : t.length) > 0;
   })) == null ? void 0 : fe.length), de = [];
-  if (L || W) {
+  if (F || W) {
     Y = Number.parseInt(s.yAxisTickValues);
     const e = new Map(Object.entries(((ue = s == null ? void 0 : s.labels) == null ? void 0 : ue.xAxis) ?? {}));
     for (const [t, r] of e)
       r || de.push(t);
   }
-  if (d != null && d.data && Ce > 0) {
-    let e = G(d.data);
+  const me = _(m.data), tt = ["grid", "axes", "legends"];
+  if (m != null && m.data && et > 0) {
+    let e = _(m.data);
     return /* @__PURE__ */ v("div", { style: { height: Ee }, children: [
       /* @__PURE__ */ a(
-        nt,
+        lt,
         {
-          curve: se,
-          data: e,
-          margin: Xe,
+          curve: Se,
+          data: me,
+          margin: Ce,
           xScale: { type: "point" },
           yScale: {
             type: "linear",
@@ -312,7 +311,7 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
             reverse: !1,
             clamp: we
           },
-          layers: D,
+          layers: me.length === 0 ? tt : D,
           axisTop: null,
           axisRight: De ? {
             tickSize: 5,
@@ -323,7 +322,7 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
             legendPosition: "middle",
             legendOffset: parseInt(ze),
             format: (t) => {
-              const r = F || E;
+              const r = L || E;
               return I.formatNumber(
                 r.style === "percent" ? t / 100 : t,
                 {
@@ -332,7 +331,7 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
               );
             }
           } : null,
-          enableGridY: Le,
+          enableGridY: Fe,
           enableGridX: We,
           enablePointLabel: ge === "top",
           pointLabel: (t) => I.formatNumber(
@@ -341,8 +340,8 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
           ),
           lineWidth: 3,
           colors: (t) => ee.getColor(t.id, t),
-          axisBottom: (L || W) && (s == null ? void 0 : s.xAxisDisabled) === !0 ? null : {
-            renderTick: Ve,
+          axisBottom: (F || W) && (s == null ? void 0 : s.xAxisDisabled) === !0 ? null : {
+            renderTick: Ze,
             legend: N.bottom,
             legendPosition: "middle",
             legendOffset: Number.parseInt(Ie)
@@ -356,7 +355,7 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
             legendPosition: "middle",
             legendOffset: Number.parseInt(Ne),
             format: (t) => {
-              const r = F || E;
+              const r = L || E;
               return I.formatNumber(
                 r.style === "percent" ? t / 100 : t,
                 {
@@ -366,7 +365,7 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
             }
           },
           tooltip: (t) => ye && $ && $.trim().length > 0 ? /* @__PURE__ */ a(
-            st,
+            it,
             {
               intl: I,
               format: E,
@@ -387,15 +386,15 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
         {
           className: `legends container has-standard-12-font-size ${p}`,
           children: /* @__PURE__ */ v("div", { className: "legend-sections", children: [
-            /* @__PURE__ */ a("div", { className: "title-section", children: me() }),
+            /* @__PURE__ */ a("div", { className: "title-section", children: oe() }),
             /* @__PURE__ */ a(
-              ot,
+              mt,
               {
                 onWrapChange: (t) => {
-                  p === "top" ? (Re(q + t / 2 * 40), ce(t)) : (Ge(Q + t / 2 * 25), ce(t));
+                  p === "top" ? (Ue(q + t / 2 * 40), ie(t)) : (Ye(Q + t / 2 * 25), ie(t));
                 },
                 className: "legends container has-standard-12-font-size items-section",
-                children: oe()
+                children: ce()
               }
             )
           ] })
@@ -405,17 +404,17 @@ const mt = "#66676d", K = "#f0f0f1", dt = ["mobile", "tablet", "midTablet"].incl
         "div",
         {
           className: `legends container has-standard-12-font-size  ${p}`,
-          style: p === "right" ? Je : Ke,
+          style: p === "right" ? Ke : Pe,
           children: [
-            me(),
-            oe()
+            oe(),
+            ce()
           ]
         }
       )
     ] });
   }
   return /* @__PURE__ */ a("div", {});
-}, kt = rt(ft);
+}, It = st(pt);
 export {
-  kt as default
+  It as default
 };

package/dist/esm/embeddable/chart/colors/ColorProvider.js

@@ -1,12 +1,12 @@
-import { jsx as y } from "react/jsx-runtime";
-import i from "react";
-import w from "./SystemColors.js";
-import S from "./PlainColor.js";
-import x from "./ManualColors.js";
-import { isSequentialColorScheme as b, isCategoricalColorScheme as g } from "@nivo/colors";
-import v from "./SequentialColors.js";
-import M from "./CategoricalColors.js";
-class _ extends i.Component {
+import { jsx as w } from "react/jsx-runtime";
+import a from "react";
+import S from "./SystemColors.js";
+import x from "./PlainColor.js";
+import b from "./ManualColors.js";
+import { isSequentialColorScheme as g, isCategoricalColorScheme as v } from "@nivo/colors";
+import M from "./SequentialColors.js";
+import q from "./CategoricalColors.js";
+class z extends a.Component {
   constructor(l) {
     super(l);
   }
@@ -14,56 +14,59 @@ class _ extends i.Component {
     const {
       app: l,
       type: n,
-      colorBy: t,
+      colorBy: s,
       scheme: o,
-      barColor: f,
-      manualColors: C,
+      barColor: C,
+      manualColors: d,
       locale: m,
-      overallLabel: d,
-      customLabels: u,
-      options: { data: r, keys: s, indexBy: a, dimensionsMetadata: p, measuresMetadata: c }
+      overallLabel: u,
+      customLabels: h,
+      options: p
     } = this.props;
     let e;
-    return r ? (o === "system" ? e = new w(
+    const { data: r, keys: t, indexBy: i, dimensionsMetadata: c, measuresMetadata: f } = this.props.options;
+    return r ? (o === "system" ? e = new S(
       l,
       n,
-      t,
+      s,
       o,
       r,
-      s,
-      a,
-      p,
+      t,
+      i,
       c,
-      m
-    ) : o === "plain_color" ? e = new S(f) : o == "manual" ? e = new x(
+      f,
+      m,
+      p
+    ) : o === "plain_color" ? e = new x(C) : o == "manual" ? e = new b(
       l,
       n,
-      t,
+      s,
       o,
       r,
-      p,
       c,
-      s,
-      a,
-      C,
-      m,
-      d,
-      u
-    ) : (b(o) && (e = new v(
+      f,
       t,
+      i,
+      d,
+      m,
+      u,
+      h,
+      p
+    ) : (g(o) && (e = new M(
+      s,
       o,
       r,
-      s,
-      a
-    )), g(o) && (e = new M(
       t,
+      i
+    )), v(o) && (e = new q(
+      s,
       o,
       r,
-      s,
-      a
-    ))), /* @__PURE__ */ y("div", { children: i.Children.map(
+      t,
+      i
+    ))), /* @__PURE__ */ w("div", { children: a.Children.map(
       this.props.children,
-      (h) => i.cloneElement(h, {
+      (y) => a.cloneElement(y, {
         ...this.props,
         colorGenerator: e
       })
@@ -71,5 +74,5 @@ class _ extends i.Component {
   }
 }
 export {
-  _ as default
+  z as default
 };