@aivenio/aquarium 1.50.0 → 1.51.0

package/dist/charts.mjs

@@ -1884,11 +1884,14 @@ var getXAxisTicks = ({ dataKey, ticks: ticks2 }, chartProps) => {
   const [min = new Date(), max = new Date()] = extent(xValues);
   return time().domain([min, max]).ticks(ticks2).map((v) => v.valueOf());
 };
-var extractChildByName = (children, name) => {
+var extractChildByDisplayName = (children, name) => {
   const childIndex = children.findIndex((child) => getDisplayName(child.type) === name);
-  const foundChild = children.slice(childIndex, childIndex + 1);
+  if (childIndex === -1) {
+    return [void 0, children];
+  }
+  const foundChild = children.at(childIndex);
   const remainingChildren = children.slice(0, childIndex).concat(children.slice(childIndex + 1));
-  return { foundChild, children: remainingChildren };
+  return [foundChild, remainingChildren];
 };
 
 // src/charts/Axis/Axis.tsx
@@ -2006,7 +2009,7 @@ AreaChart.Area = Area;
 
 // src/charts/BarChart/BarChart.tsx
 import React5 from "react";
-import { Bar as _Bar, BarChart as _BarChart } from "recharts";
+import { Bar as _Bar, BarChart as _BarChart, Rectangle } from "recharts";
 
 // src/charts/Tooltip/Tooltip.tsx
 import { DefaultTooltipContent, Tooltip as _Tooltip } from "recharts";
@@ -2031,44 +2034,53 @@ Tooltip.defaultProps = Object.assign({}, _Tooltip.defaultProps, {
 });
 
 // src/charts/BarChart/BarChart.tsx
-var renderChildren2 = (props) => {
-  return React5.Children.map(props.children, (child) => {
-    switch (getDisplayName(child.type)) {
-      case Axis.XAxis.displayName: {
-        return renderXAxis(child, props);
-      }
-      case Axis.XAxis.Time.displayName: {
-        return renderXTimeAxis(child, props);
-      }
-      case Axis.YAxis.displayName: {
-        return renderYAxis(child, props);
-      }
-      case Tooltip.displayName: {
-        return /* @__PURE__ */ React5.createElement(Tooltip, __spreadProps(__spreadValues({}, child.props), {
-          cursor: false
-        }));
-      }
-      default: {
-        return child;
-      }
-    }
-  });
-};
 var BarChart = (props) => {
+  const [activeIndex, setActiveIndex] = React5.useState(void 0);
+  const renderChildren3 = (props2) => {
+    return React5.Children.map(props2.children, (child) => {
+      switch (getDisplayName(child.type)) {
+        case Axis.XAxis.displayName: {
+          return renderXAxis(child, props2);
+        }
+        case Axis.XAxis.Time.displayName: {
+          return renderXTimeAxis(child, props2);
+        }
+        case Axis.YAxis.displayName: {
+          return renderYAxis(child, props2);
+        }
+        case _Bar.displayName: {
+          return React5.cloneElement(child, {
+            shape: (props3) => /* @__PURE__ */ React5.createElement(Rectangle, __spreadProps(__spreadValues({}, props3), {
+              className: activeIndex !== void 0 ? "inactive" : void 0
+            }))
+          });
+        }
+        case Tooltip.displayName: {
+          return /* @__PURE__ */ React5.createElement(Tooltip, __spreadProps(__spreadValues({}, child.props), {
+            cursor: false
+          }));
+        }
+        default: {
+          return child;
+        }
+      }
+    });
+  };
   return /* @__PURE__ */ React5.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ React5.createElement(_BarChart, {
-    data: props.data,
+  }, /* @__PURE__ */ React5.createElement(_BarChart, __spreadProps(__spreadValues({}, props), {
     barCategoryGap: "5%",
     style: { stroke: "#fff", strokeWidth: 1 },
+    onMouseMove: (state) => setActiveIndex(state.isTooltipActive ? state.activeTooltipIndex : void 0),
+    onMouseLeave: () => setActiveIndex(void 0),
     margin: {
       top: 20,
       right: 30,
       left: 20,
       bottom: 5
     }
-  }, /* @__PURE__ */ React5.createElement(CartesianGrid, null), renderChildren2(props)));
+  }), /* @__PURE__ */ React5.createElement(CartesianGrid, null), renderChildren3(props)));
 };
 var Bar = Object.assign((props) => /* @__PURE__ */ React5.createElement(_Bar, __spreadProps(__spreadValues({}, props), {
   isAnimationActive: false
@@ -2080,11 +2092,29 @@ BarChart.Tooltip = Tooltip;
 import { Cell } from "recharts";
 import {} from "recharts";
 
-// src/charts/LineChart/LineChart.tsx
+// src/charts/Legend/Legend.tsx
 import React6 from "react";
+import { Legend as _Legend } from "recharts";
+var Legend = React6.forwardRef((props, _ref) => {
+  return /* @__PURE__ */ React6.createElement(_Legend, __spreadProps(__spreadValues({}, props), {
+    margin: __spreadProps(__spreadValues({}, props.margin), { top: 0 })
+  }));
+});
+Legend.displayName = "Legend";
+Legend.defaultProps = {
+  iconType: "circle",
+  iconSize: 8,
+  align: "left",
+  layout: "horizontal",
+  verticalAlign: "top",
+  margin: { top: 0 }
+};
+
+// src/charts/LineChart/LineChart.tsx
+import React7 from "react";
 import { Line as _Line, LineChart as _LineChart } from "recharts";
-var renderChildren3 = (props) => {
-  return React6.Children.map(props.children, (child) => {
+var renderChildren2 = (props) => {
+  return React7.Children.map(props.children, (child) => {
     switch (getDisplayName(child.type)) {
       case Axis.XAxis.displayName: {
         return renderXAxis(child, props);
@@ -2102,10 +2132,10 @@ var renderChildren3 = (props) => {
   });
 };
 var LineChart = (props) => {
-  return /* @__PURE__ */ React6.createElement(ResponsiveContainer, {
+  return /* @__PURE__ */ React7.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ React6.createElement(_LineChart, {
+  }, /* @__PURE__ */ React7.createElement(_LineChart, {
     data: props.data,
     style: { stroke: "#fff", strokeWidth: 1 },
     margin: {
@@ -2114,10 +2144,10 @@ var LineChart = (props) => {
       left: 20,
       bottom: 5
     }
-  }, /* @__PURE__ */ React6.createElement(CartesianGrid, null), renderChildren3(props)));
+  }, /* @__PURE__ */ React7.createElement(CartesianGrid, null), renderChildren2(props)));
 };
 var Line = Object.assign(
-  (props) => /* @__PURE__ */ React6.createElement(_Line, __spreadProps(__spreadValues({
+  (props) => /* @__PURE__ */ React7.createElement(_Line, __spreadProps(__spreadValues({
     type: "monotone"
   }, props), {
     strokeWidth: 2,
@@ -2130,10 +2160,11 @@ LineChart.Line = Line;
 
 // src/charts/PieChart/DoughnutChart.tsx
 import React11 from "react";
-import { Cell as Cell2, Pie as _Pie, PieChart as _PieChart } from "recharts";
+import isNil from "lodash/isNil";
+import { Cell as Cell2, Customized, Pie as _Pie, PieChart as _PieChart } from "recharts";
 
 // src/charts/PieChart/ChartValue.tsx
-import React7 from "react";
+import React8 from "react";
 
 // src/utils/tailwind.ts
 import originalClassNames from "classnames";
@@ -2160,29 +2191,21 @@ function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, class
 // src/charts/PieChart/ChartValue.tsx
 var ChartValue = (props) => {
   const { value, unit: unit2, caption } = props;
-  return /* @__PURE__ */ React7.createElement("p", {
+  return /* @__PURE__ */ React8.createElement("p", {
     className: tw(
-      "typography-large-heading",
-      "text-center",
-      "leading-tight",
-      "absolute",
-      "top-1/2",
-      "left-1/2",
-      "transform",
-      "-translate-x-1/2",
-      "-translate-y-1/2"
+      "typography-large-heading text-grey-90 text-center leading-tight absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
     )
-  }, value, unit2, caption && /* @__PURE__ */ React7.createElement("span", {
-    className: tw("block", "typography-small")
+  }, value, unit2, caption && /* @__PURE__ */ React8.createElement("span", {
+    className: tw("block", "typography-small text-grey-60")
   }, caption));
 };
 
 // src/charts/PieChart/renderPieChildren.tsx
-import React9 from "react";
-import { Pie } from "recharts";
+import React10 from "react";
+import { Legend as Legend2 } from "recharts";
 
 // src/charts/PieChart/TooltipContentWrapper.tsx
-import React8 from "react";
+import React9 from "react";
 import isFunction from "lodash/isFunction";
 var TooltipContentWrapper = (_a) => {
   var _b = _a, {
@@ -2198,28 +2221,28 @@ var TooltipContentWrapper = (_a) => {
     });
   });
   const propsWithPayload = __spreadProps(__spreadValues({}, props), { payload });
-  if (React8.isValidElement(content)) {
-    return React8.cloneElement(content, propsWithPayload);
+  if (React9.isValidElement(content)) {
+    return React9.cloneElement(content, propsWithPayload);
   }
   if (isFunction(content)) {
-    return React8.createElement(content, propsWithPayload);
+    return React9.createElement(content, propsWithPayload);
   }
-  return /* @__PURE__ */ React8.createElement(Tooltip.DefaultContent, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React9.createElement(Tooltip.DefaultContent, __spreadProps(__spreadValues({}, props), {
     payload
   }));
 };
 
 // src/charts/PieChart/renderPieChildren.tsx
 var renderPieChildren = (children) => {
-  return React9.Children.map(children, (child) => {
+  return React10.Children.map(children, (child) => {
     switch (getDisplayName(child.type)) {
       case Tooltip.displayName: {
-        return React9.cloneElement(child, { content: /* @__PURE__ */ React9.createElement(TooltipContentWrapper, {
+        return React10.cloneElement(child, { content: /* @__PURE__ */ React10.createElement(TooltipContentWrapper, {
           content: child.props.content
         }) });
       }
-      case DoughnutChart.Doughnut.displayName: {
-        return /* @__PURE__ */ React9.createElement(Pie, __spreadValues({}, child.props));
+      case Legend2.displayName: {
+        return React10.cloneElement(child, { verticalAlign: "top", align: "center" });
       }
       default: {
         return child;
@@ -2228,42 +2251,56 @@ var renderPieChildren = (children) => {
   });
 };
 
-// src/charts/PieChart/renderScaledChartValue.tsx
-import React10 from "react";
-var renderScaledChartValue = (props) => {
-  const refSize = 300;
-  const { containerWidth, containerHeight, chartValue } = props;
-  if (!containerWidth || !containerHeight) {
-    return null;
-  }
-  const scaleBy = containerWidth >= containerHeight ? containerHeight : containerWidth;
-  const scale = scaleBy / refSize;
-  const x = (containerWidth - refSize * scale) / (2 * scale);
-  const y = (containerHeight - refSize * scale) / (2 * scale);
-  return /* @__PURE__ */ React10.createElement("foreignObject", {
-    width: refSize,
-    height: refSize,
-    x,
-    y,
-    transform: `scale(${scale})`
-  }, chartValue);
-};
-
 // src/charts/PieChart/DoughnutChart.tsx
+var refSize = 300;
 var DoughnutChart = (props) => {
   const [containerWidth, setContainerWidth] = React11.useState(0);
   const [containerHeight, setContainerHeight] = React11.useState(0);
-  const { foundChild: chartValue, children } = extractChildByName(props.children, ChartValue.displayName);
+  const [activeIndex, setActiveIndex] = React11.useState(null);
+  const [chartValue, _children] = extractChildByDisplayName(props.children, ChartValue.displayName);
+  const [pie, children] = extractChildByDisplayName(_children, DoughnutChart.Doughnut.displayName);
+  const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
   const onResize = (w, h) => {
     setContainerWidth(w);
     setContainerHeight(h);
   };
-  const scaledChartValue = renderScaledChartValue({ chartValue, containerWidth, containerHeight });
+  const renderChartValue = ({ formattedGraphicalItems }) => {
+    var _a, _b, _c;
+    const pie2 = formattedGraphicalItems == null ? void 0 : formattedGraphicalItems[0];
+    const props2 = (_a = pie2 == null ? void 0 : pie2.props) != null ? _a : {};
+    const cx = (_b = props2.cx) != null ? _b : containerWidth / 2;
+    const cy = (_c = props2.cy) != null ? _c : containerHeight / 2;
+    if (!containerWidth || !containerHeight || isNil(chartValue)) {
+      return null;
+    }
+    const scaleBy = containerWidth >= containerHeight ? containerHeight : containerWidth;
+    const scale = scaleBy / refSize;
+    const yOffset = cy - containerHeight / 2;
+    const yMargin = (containerHeight - refSize * scale) / 2;
+    const x = cx - refSize / 2 * scale;
+    const y = (yOffset + yMargin) / scale;
+    return /* @__PURE__ */ React11.createElement("foreignObject", {
+      width: refSize,
+      height: refSize,
+      x,
+      y,
+      transform: `scale(${scale})`
+    }, chartValue);
+  };
+  const highlightActive = activeIndex !== null && tooltip;
   return /* @__PURE__ */ React11.createElement(ResponsiveContainer, {
     onResize,
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ React11.createElement(_PieChart, null, scaledChartValue, renderPieChildren(children)));
+  }, /* @__PURE__ */ React11.createElement(_PieChart, null, chartValue && /* @__PURE__ */ React11.createElement(Customized, {
+    component: renderChartValue
+  }), pie && /* @__PURE__ */ React11.createElement(_Pie, __spreadProps(__spreadValues({}, pie.props), {
+    onMouseEnter: (_, index) => setActiveIndex(index),
+    onMouseLeave: () => setActiveIndex(null),
+    activeIndex,
+    inactiveShape: { className: highlightActive ? "inactive" : void 0 },
+    activeShape: { className: highlightActive ? "active" : void 0 }
+  })), renderPieChildren(children)));
 };
 var Doughnut = Object.assign((props) => /* @__PURE__ */ React11.createElement(_Pie, __spreadValues({}, props)), _Pie);
 Doughnut.defaultProps = Object.assign({}, _Pie.defaultProps, {
@@ -2287,13 +2324,13 @@ var PieChart = (props) => {
     height: 500
   }, renderPieChildren(props.children)));
 };
-var Pie2 = Object.assign((props) => /* @__PURE__ */ React12.createElement(_Pie2, __spreadValues({}, props)), _Pie2);
-Pie2.defaultProps = Object.assign({}, _Pie2.defaultProps, {
+var Pie = Object.assign((props) => /* @__PURE__ */ React12.createElement(_Pie2, __spreadValues({}, props)), _Pie2);
+Pie.defaultProps = Object.assign({}, _Pie2.defaultProps, {
   isAnimationActive: false,
   innerRadius: 0,
   outerRadius: "80%"
 });
-PieChart.Pie = Pie2;
+PieChart.Pie = Pie;
 PieChart.Cell = Cell3;
 
 // src/charts/Reference/Reference.tsx
@@ -2330,14 +2367,15 @@ export {
   Cell,
   Doughnut,
   DoughnutChart,
+  Legend,
   Line,
   LineChart,
-  Pie2 as Pie,
+  Pie,
   PieChart,
   Reference,
   ResponsiveContainer,
   Tooltip,
-  extractChildByName,
+  extractChildByDisplayName,
   getDisplayName,
   getXAxisTicks,
   renderXAxis,

package/dist/src/atoms/Modal/Modal.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Typography } from '../../../src/atoms/Typography/Typography';
 import type { ImgHTMLAttributes } from 'react';
-declare type ModalProps = {
+declare type ModalKind = {
+    kind?: 'dialog' | 'drawer';
+};
+declare type ModalProps = ModalKind & {
     /** State of the modal */
     open: boolean;
 };
-declare type DialogProps = {
+declare type DialogProps = ModalKind & {
     /** Optional size (width) of the modal: sm, md, full */
     size?: 'full' | 'md' | 'sm';
 };
@@ -20,7 +23,7 @@ declare type ComposedModalProps = {
         backgroundImage: string | null;
     }>;
     CloseButtonContainer: React.FC<DivProps>;
-    Title: React.FC<React.ComponentProps<typeof Typography>>;
+    Title: React.FC<ModalKind & React.ComponentProps<typeof Typography>>;
     Subtitle: React.FC<React.ComponentProps<typeof Typography>>;
     TitleContainer: React.FC<DivProps>;
     Body: React.FC<DivProps & {

package/dist/src/atoms/Modal/Modal.js

@@ -13,24 +13,33 @@ import React from 'react';
 import { Typography } from '../../../src/atoms/Typography/Typography';
 import { classNames, tw } from '../../../src/utils/tailwind';
 export const Modal = (_a) => {
-    var { children, className, open } = _a, rest = __rest(_a, ["children", "className", "open"]);
-    return open ? (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('inset-0 overflow-y-auto z-modal flex justify-center items-center fixed py-7'), className) }), children)) : null;
+    var { children, kind = 'dialog', className, open } = _a, rest = __rest(_a, ["children", "kind", "className", "open"]);
+    return open ? (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('inset-0 overflow-y-auto z-modal fixed'), {
+            'py-7 justify-center flex items-center': kind === 'dialog',
+        }, className) }), children)) : null;
 };
 Modal.BackDrop = (_a) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
     return (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('-z-10 fixed min-w-full min-h-full bg-primary-100 opacity-60'), className) })));
 };
 Modal.Dialog = React.forwardRef((_a, ref) => {
-    var { children, className, size = 'sm' } = _a, rest = __rest(_a, ["children", "className", "size"]);
-    return (React.createElement("div", Object.assign({ ref: ref, "aria-modal": "true" }, rest, { className: classNames(tw('relative bg-white rounded mx-7 w-full max-h-full flex flex-col'), {
-            'max-w-[600px]': size === 'sm',
-            'max-w-[940px]': size === 'md',
-            'min-h-full': size === 'full',
-        }, className) }), children));
+    var { kind = 'dialog', children, className, size = 'sm' } = _a, rest = __rest(_a, ["kind", "children", "className", "size"]);
+    const commonClasses = tw('bg-white max-h-full flex flex-col');
+    const dialogClasses = classNames('relative w-full rounded', {
+        'max-w-[600px]': size === 'sm',
+        'max-w-[940px]': size === 'md',
+        'min-h-full': size === 'full',
+    });
+    const drawerClasses = classNames('absolute h-full', {
+        'w-[360px]': size === 'sm',
+        'w-[560px]': size === 'md',
+        'w-[1080px]': size === 'full',
+    });
+    return (React.createElement("div", Object.assign({ ref: ref, "aria-modal": "true" }, rest, { className: classNames(commonClasses, kind === 'dialog' ? dialogClasses : drawerClasses, className) }), children));
 });
 Modal.Header = (_a) => {
     var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('px-7 py-6 gap-3 flex items-center'), className) }), children));
+    return (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('pl-7 pr-[64px] py-6 gap-3 flex items-center'), className) }), children));
 };
 Modal.HeaderImage = (_a) => {
     var { backgroundImage, className } = _a, rest = __rest(_a, ["backgroundImage", "className"]);
@@ -39,11 +48,13 @@ Modal.HeaderImage = (_a) => {
 };
 Modal.CloseButtonContainer = (_a) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('absolute top-[20px] right-[28px]'), className) })));
+    return (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('absolute top-[24px] right-[28px]'), className) })));
 };
 Modal.Title = (_a) => {
-    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
-    return (React.createElement(Typography, Object.assign({ htmlTag: "h2", variant: "subheading", color: "grey-90", className: classNames(tw('leading-none'), className) }, rest), children));
+    var { kind = 'dialog', children, className } = _a, rest = __rest(_a, ["kind", "children", "className"]);
+    return (React.createElement(Typography, Object.assign({ htmlTag: "h2", variant: "subheading", color: "grey-90", className: classNames(tw({
+            'text-ellipsis overflow-x-hidden whitespace-nowrap': kind === 'drawer',
+        }), className) }, rest), children));
 };
 Modal.Subtitle = (_a) => {
     var { children } = _a, rest = __rest(_a, ["children"]);
@@ -51,7 +62,7 @@ Modal.Subtitle = (_a) => {
 };
 Modal.TitleContainer = (_a) => {
     var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('flex flex-col grow gap-2'), className) }), children));
+    return (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('flex flex-col grow'), className) }), children));
 };
 Modal.Body = (_a) => {
     var { children, className, noFooter = false, maxHeight, style } = _a, rest = __rest(_a, ["children", "className", "noFooter", "maxHeight", "style"]);
@@ -65,4 +76,4 @@ Modal.Actions = (_a) => {
     var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
     return (React.createElement("div", Object.assign({}, rest, { className: classNames(tw('flex gap-4 justify-end'), className) }), children));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvYXRvbXMvTW9kYWwvTW9kYWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUU3RCxPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBaUNwRCxNQUFNLENBQUMsTUFBTSxLQUFLLEdBQXlELENBQUMsRUFBc0MsRUFBRSxFQUFFO1FBQTFDLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxJQUFJLE9BQVcsRUFBTixJQUFJLGNBQXBDLGlDQUFzQyxDQUFGO0lBQzlHLE9BQUEsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUNMLDZDQUNNLElBQUksSUFDUixTQUFTLEVBQUUsVUFBVSxDQUNuQixFQUFFLENBQUMsNkVBQTZFLENBQUMsRUFDakYsU0FBUyxDQUNWLEtBRUEsUUFBUSxDQUNMLENBQ1AsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBO0NBQUEsQ0FBQztBQUVYLEtBQUssQ0FBQyxRQUFRLEdBQUcsQ0FBQyxFQUFzQixFQUFFLEVBQUU7UUFBMUIsRUFBRSxTQUFTLE9BQVcsRUFBTixJQUFJLGNBQXBCLGFBQXNCLENBQUY7SUFBTyxPQUFBLENBQzNDLDZDQUFTLElBQUksSUFBRSxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsQ0FBQyw2REFBNkQsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQ3ZILENBQUE7Q0FBQSxDQUFDO0FBRUYsS0FBSyxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM3QixDQUFDLEVBQTZDLEVBQUUsR0FBRyxFQUFFLEVBQUU7UUFBdEQsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLElBQUksR0FBRyxJQUFJLE9BQVcsRUFBTixJQUFJLGNBQTND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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvYXRvbXMvTW9kYWwvTW9kYWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUU3RCxPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBcUNwRCxNQUFNLENBQUMsTUFBTSxLQUFLLEdBQXlELENBQUMsRUFNM0UsRUFBRSxFQUFFO1FBTnVFLEVBQzFFLFFBQVEsRUFDUixJQUFJLEdBQUcsUUFBUSxFQUNmLFNBQVMsRUFDVCxJQUFJLE9BRUwsRUFESSxJQUFJLGNBTG1FLHlDQU0zRSxDQURRO0lBRVAsT0FBQSxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQ0wsNkNBQ00sSUFBSSxJQUNSLFNBQVMsRUFBRSxVQUFVLENBQ25CLEVBQUUsQ0FBQyx1Q0FBdUMsQ0FBQyxFQUMzQztZQUNFLHVDQUF1QyxFQUFFLElBQUksS0FBSyxRQUFRO1NBQzNELEVBQ0QsU0FBUyxDQUNWLEtBRUEsUUFBUSxDQUNMLENBQ1AsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBO0NBQUEsQ0FBQztBQUVYLEtBQUssQ0FBQyxRQUFRLEdBQUcsQ0FBQyxFQUFzQixFQUFFLEVBQUU7UUFBMUIsRUFBRSxTQUFTLE9BQVcsRUFBTixJQUFJLGNBQXBCLGFBQXNCLENBQUY7SUFBTyxPQUFBLENBQzNDLDZDQUFTLElBQUksSUFBRSxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsQ0FBQyw2REFBNkQsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQ3ZILENBQUE7Q0FBQSxDQUFDO0FBRUYsS0FBSyxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM3QixDQUFDLEVBQThELEVBQUUsR0FBRyxFQUFFLEVBQUU7UUFB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

package/dist/src/charts/BarChart/BarChart.js

@@ -1,43 +1,54 @@
 import React from 'react';
-import { Bar as _Bar, BarChart as _BarChart } from 'recharts';
+import { Bar as _Bar, BarChart as _BarChart, Rectangle } from 'recharts';
 import { Axis, renderXAxis, renderXTimeAxis, renderYAxis } from '../../../src/charts/Axis/Axis';
 import { ResponsiveContainer } from '../../../src/charts/Container/Container';
 import { CartesianGrid } from '../../../src/charts/Grid/Grid';
 import { getDisplayName } from '../../../src/charts/lib/utils';
 import { Tooltip } from '../../../src/charts/Tooltip/Tooltip';
-const renderChildren = (props) => {
-    return React.Children.map(props.children, (child) => {
-        switch (getDisplayName(child.type)) {
-            case Axis.XAxis.displayName: {
-                return renderXAxis(child, props);
-            }
-            case Axis.XAxis.Time.displayName: {
-                return renderXTimeAxis(child, props);
-            }
-            case Axis.YAxis.displayName: {
-                return renderYAxis(child, props);
-            }
-            case Tooltip.displayName: {
-                return React.createElement(Tooltip, Object.assign({}, child.props, { cursor: false }));
-            }
-            default: {
-                return child;
-            }
-        }
-    });
-};
 export const BarChart = (props) => {
+    const [activeIndex, setActiveIndex] = React.useState(undefined);
+    const renderChildren = (props) => {
+        return React.Children.map(props.children, (child) => {
+            switch (getDisplayName(child.type)) {
+                case Axis.XAxis.displayName: {
+                    return renderXAxis(child, props);
+                }
+                case Axis.XAxis.Time.displayName: {
+                    return renderXTimeAxis(child, props);
+                }
+                case Axis.YAxis.displayName: {
+                    return renderYAxis(child, props);
+                }
+                case _Bar.displayName: {
+                    return React.cloneElement(child, {
+                        /*
+                         * Having 'inactive' class on the <Rectangle> element is a hack to make the inactive bars.
+                         * Recharts overrides the className for active bars, so we can use this
+                         * to make the non-hovered bars look inactive.
+                         */
+                        shape: (props) => (React.createElement(Rectangle, Object.assign({}, props, { className: activeIndex !== undefined ? 'inactive' : undefined }))),
+                    });
+                }
+                case Tooltip.displayName: {
+                    return React.createElement(Tooltip, Object.assign({}, child.props, { cursor: false }));
+                }
+                default: {
+                    return child;
+                }
+            }
+        });
+    };
     return (React.createElement(ResponsiveContainer, { width: props.width, height: props.height },
-        React.createElement(_BarChart, { data: props.data, barCategoryGap: "5%", style: { stroke: '#fff', strokeWidth: 1 }, margin: {
+        React.createElement(_BarChart, Object.assign({}, props, { barCategoryGap: "5%", style: { stroke: '#fff', strokeWidth: 1 }, onMouseMove: (state) => setActiveIndex(state.isTooltipActive ? state.activeTooltipIndex : undefined), onMouseLeave: () => setActiveIndex(undefined), margin: {
                 top: 20,
                 right: 30,
                 left: 20,
                 bottom: 5,
-            } },
+            } }),
             React.createElement(CartesianGrid, null),
             renderChildren(props))));
 };
 export const Bar = Object.assign((props) => React.createElement(_Bar, Object.assign({}, props, { isAnimationActive: false })), _Bar);
 BarChart.Bar = Bar;
 BarChart.Tooltip = Tooltip;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFyQ2hhcnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY2hhcnRzL0JhckNoYXJ0L0JhckNoYXJ0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLEdBQUcsSUFBSSxJQUFJLEVBQUUsUUFBUSxJQUFJLFNBQVMsRUFBaUIsTUFBTSxVQUFVLENBQUM7QUFFN0UsT0FBTyxFQUFFLElBQUksRUFBRSxXQUFXLEVBQUUsZUFBZSxFQUFFLFdBQVcsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUNyRCxPQUFPLEVBQW1CLGNBQWMsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQVNyRCxNQUFNLGNBQWMsR0FBRyxDQUFDLEtBQW9CLEVBQUUsRUFBRTtJQUM5QyxPQUFPLEtBQUssQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQyxLQUF5QixFQUFFLEVBQUU7UUFDdEUsUUFBUSxjQUFjLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxFQUFFO1lBQ2xDLEtBQUssSUFBSSxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsQ0FBQztnQkFDM0IsT0FBTyxXQUFXLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDO2FBQ2xDO1lBRUQsS0FBSyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztnQkFDaEMsT0FBTyxlQUFlLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDO2FBQ3RDO1lBRUQsS0FBSyxJQUFJLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFDO2dCQUMzQixPQUFPLFdBQVcsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQUM7YUFDbEM7WUFFRCxLQUFLLE9BQU8sQ0FBQyxXQUFXLENBQUMsQ0FBQztnQkFDeEIsT0FBTyxvQkFBQyxPQUFPLG9CQUFLLEtBQUssQ0FBQyxLQUFLLElBQUUsTUFBTSxFQUFFLEtBQUssSUFBSSxDQUFDO2FBQ3BEO1lBRUQsT0FBTyxDQUFDLENBQUM7Z0JBQ1AsT0FBTyxLQUFLLENBQUM7YUFDZDtTQUNGO0lBQ0gsQ0FBQyxDQUFDLENBQUM7QUFDTCxDQUFDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxRQUFRLEdBQStDLENBQUMsS0FBSyxFQUFFLEVBQUU7SUFDNUUsT0FBTyxDQUNMLG9CQUFDLG1CQUFtQixJQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsS0FBSyxFQUFFLE1BQU0sRUFBRSxLQUFLLENBQUMsTUFBTTtRQUMzRCxvQkFBQyxTQUFTLElBQ1IsSUFBSSxFQUFFLEtBQUssQ0FBQyxJQUFJLEVBQ2hCLGNBQWMsRUFBQyxJQUFJLEVBQ25CLEtBQUssRUFBRSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsV0FBVyxFQUFFLENBQUMsRUFBRSxFQUN6QyxNQUFNLEVBQUU7Z0JBQ04sR0FBRyxFQUFFLEVBQUU7Z0JBQ1AsS0FBSyxFQUFFLEVBQUU7Z0JBQ1QsSUFBSSxFQUFFLEVBQUU7Z0JBQ1IsTUFBTSxFQUFFLENBQUM7YUFDVjtZQUVELG9CQUFDLGFBQWEsT0FBRztZQUNoQixjQUFjLENBQUMsS0FBSyxDQUFDLENBQ1osQ0FDUSxDQUN2QixDQUFDO0FBQ0osQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sR0FBRyxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxLQUE0QixFQUFFLEVBQUUsQ0FBQyxvQkFBQyxJQUFJLG9CQUFLLEtBQUssSUFBRSxpQkFBaUIsRUFBRSxLQUFLLElBQUksRUFBRSxJQUFJLENBQUMsQ0FBQztBQUN4SCxRQUFRLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQztBQUNuQixRQUFRLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFyQ2hhcnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY2hhcnRzL0JhckNoYXJ0L0JhckNoYXJ0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLEdBQUcsSUFBSSxJQUFJLEVBQUUsUUFBUSxJQUFJLFNBQVMsRUFBaUIsU0FBUyxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBRXhGLE9BQU8sRUFBRSxJQUFJLEVBQUUsV0FBVyxFQUFFLGVBQWUsRUFBRSxXQUFXLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN2RixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNyRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDckQsT0FBTyxFQUFtQixjQUFjLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN2RSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFTckQsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUErQyxDQUFDLEtBQUssRUFBRSxFQUFFO0lBQzVFLE1BQU0sQ0FBQyxXQUFXLEVBQUUsY0FBYyxDQUFDLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBcUIsU0FBUyxDQUFDLENBQUM7SUFFcEYsTUFBTSxjQUFjLEdBQUcsQ0FBQyxLQUFvQixFQUFFLEVBQUU7UUFDOUMsT0FBTyxLQUFLLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsUUFBUSxFQUFFLENBQUMsS0FBeUIsRUFBRSxFQUFFO1lBQ3RFLFFBQVEsY0FBYyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsRUFBRTtnQkFDbEMsS0FBSyxJQUFJLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFDO29CQUMzQixPQUFPLFdBQVcsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQUM7aUJBQ2xDO2dCQUVELEtBQUssSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7b0JBQ2hDLE9BQU8sZUFBZSxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQztpQkFDdEM7Z0JBRUQsS0FBSyxJQUFJLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFDO29CQUMzQixPQUFPLFdBQVcsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQUM7aUJBQ2xDO2dCQUVELEtBQUssSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO29CQUNyQixPQUFPLEtBQUssQ0FBQyxZQUFZLENBQVcsS0FBSyxFQUFFO3dCQUN6Qzs7OzsyQkFJRzt3QkFDSCxLQUFLLEVBQUUsQ0FBQyxLQUFVLEVBQUUsRUFBRSxDQUFDLENBQ3JCLG9CQUFDLFNBQVMsb0JBQUssS0FBSyxJQUFFLFNBQVMsRUFBRSxXQUFXLEtBQUssU0FBUyxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFNBQVMsSUFBSSxDQUN4RjtxQkFDRixDQUFDLENBQUM7aUJBQ0o7Z0JBRUQsS0FBSyxPQUFPLENBQUMsV0FBVyxDQUFDLENBQUM7b0JBQ3hCLE9BQU8sb0JBQUMsT0FBTyxvQkFBSyxLQUFLLENBQUMsS0FBSyxJQUFFLE1BQU0sRUFBRSxLQUFLLElBQUksQ0FBQztpQkFDcEQ7Z0JBRUQsT0FBTyxDQUFDLENBQUM7b0JBQ1AsT0FBTyxLQUFLLENBQUM7aUJBQ2Q7YUFDRjtRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQyxDQUFDO0lBRUYsT0FBTyxDQUNMLG9CQUFDLG1CQUFtQixJQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsS0FBSyxFQUFFLE1BQU0sRUFBRSxLQUFLLENBQUMsTUFBTTtRQUMzRCxvQkFBQyxTQUFTLG9CQUNKLEtBQUssSUFDVCxjQUFjLEVBQUMsSUFBSSxFQUNuQixLQUFLLEVBQUUsRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLFdBQVcsRUFBRSxDQUFDLEVBQUUsRUFDekMsV0FBVyxFQUFFLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLGtCQUFrQixDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsRUFDcEcsWUFBWSxFQUFFLEdBQUcsRUFBRSxDQUFDLGNBQWMsQ0FBQyxTQUFTLENBQUMsRUFDN0MsTUFBTSxFQUFFO2dCQUNOLEdBQUcsRUFBRSxFQUFFO2dCQUNQLEtBQUssRUFBRSxFQUFFO2dCQUNULElBQUksRUFBRSxFQUFFO2dCQUNSLE1BQU0sRUFBRSxDQUFDO2FBQ1Y7WUFFRCxvQkFBQyxhQUFhLE9BQUc7WUFDaEIsY0FBYyxDQUFDLEtBQUssQ0FBQyxDQUNaLENBQ1EsQ0FDdkIsQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLEdBQUcsR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsS0FBNEIsRUFBRSxFQUFFLENBQUMsb0JBQUMsSUFBSSxvQkFBSyxLQUFLLElBQUUsaUJBQWlCLEVBQUUsS0FBSyxJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUM7QUFDeEgsUUFBUSxDQUFDLEdBQUcsR0FBRyxHQUFHLENBQUM7QUFDbkIsUUFBUSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUMifQ==

package/dist/src/charts/Legend/Legend.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type LegendProps as _LegendProps } from 'recharts';
+export declare type LegendProps = Omit<_LegendProps, 'ref'>;
+export declare const Legend: React.ForwardRefExoticComponent<LegendProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/charts/Legend/Legend.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Legend as _Legend } from 'recharts';
+export const Legend = React.forwardRef((props, _ref) => {
+    return React.createElement(_Legend, Object.assign({}, props, { margin: Object.assign(Object.assign({}, props.margin), { top: 0 }) }));
+});
+Legend.displayName = 'Legend';
+Legend.defaultProps = {
+    iconType: 'circle',
+    iconSize: 8,
+    align: 'left',
+    layout: 'horizontal',
+    verticalAlign: 'top',
+    margin: { top: 0 },
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGVnZW5kLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NoYXJ0cy9MZWdlbmQvTGVnZW5kLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLE1BQU0sSUFBSSxPQUFPLEVBQW9DLE1BQU0sVUFBVSxDQUFDO0FBSS9FLE1BQU0sQ0FBQyxNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUE4QixDQUFDLEtBQUssRUFBRSxJQUFJLEVBQUUsRUFBRTtJQUNsRixPQUFPLG9CQUFDLE9BQU8sb0JBQUssS0FBSyxJQUFFLE1BQU0sa0NBQU8sS0FBSyxDQUFDLE1BQU0sS0FBRSxHQUFHLEVBQUUsQ0FBQyxPQUFNLENBQUM7QUFDckUsQ0FBQyxDQUFDLENBQUM7QUFFSCxNQUFNLENBQUMsV0FBVyxHQUFHLFFBQVEsQ0FBQztBQUM5QixNQUFNLENBQUMsWUFBWSxHQUFHO0lBQ3BCLFFBQVEsRUFBRSxRQUFRO0lBQ2xCLFFBQVEsRUFBRSxDQUFDO0lBQ1gsS0FBSyxFQUFFLE1BQU07SUFDYixNQUFNLEVBQUUsWUFBWTtJQUNwQixhQUFhLEVBQUUsS0FBSztJQUNwQixNQUFNLEVBQUUsRUFBRSxHQUFHLEVBQUUsQ0FBQyxFQUFFO0NBQ25CLENBQUMifQ==

package/dist/src/charts/PieChart/ChartValue.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { tw } from '../../utils/tailwind';
 export const ChartValue = (props) => {
     const { value, unit, caption } = props;
-    return (React.createElement("p", { className: tw('typography-large-heading', 'text-center', 'leading-tight', 'absolute', 'top-1/2', 'left-1/2', 'transform', '-translate-x-1/2', '-translate-y-1/2') },
+    return (React.createElement("p", { className: tw('typography-large-heading text-grey-90 text-center leading-tight absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2') },
         value,
         unit,
-        caption && React.createElement("span", { className: tw('block', 'typography-small') }, caption)));
+        caption && React.createElement("span", { className: tw('block', 'typography-small text-grey-60') }, caption)));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hhcnRWYWx1ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jaGFydHMvUGllQ2hhcnQvQ2hhcnRWYWx1ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQVExQyxNQUFNLENBQUMsTUFBTSxVQUFVLEdBQThCLENBQUMsS0FBSyxFQUFFLEVBQUU7SUFDN0QsTUFBTSxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLEdBQUcsS0FBSyxDQUFDO0lBQ3ZDLE9BQU8sQ0FDTCwyQkFDRSxTQUFTLEVBQUUsRUFBRSxDQUNYLDBCQUEwQixFQUMxQixhQUFhLEVBQ2IsZUFBZSxFQUNmLFVBQVUsRUFDVixTQUFTLEVBQ1QsVUFBVSxFQUNWLFdBQVcsRUFDWCxrQkFBa0IsRUFDbEIsa0JBQWtCLENBQ25CO1FBRUEsS0FBSztRQUNMLElBQUk7UUFDSixPQUFPLElBQUksOEJBQU0sU0FBUyxFQUFFLEVBQUUsQ0FBQyxPQUFPLEVBQUUsa0JBQWtCLENBQUMsSUFBRyxPQUFPLENBQVEsQ0FDNUUsQ0FDTCxDQUFDO0FBQ0osQ0FBQyxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hhcnRWYWx1ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jaGFydHMvUGllQ2hhcnQvQ2hhcnRWYWx1ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQVExQyxNQUFNLENBQUMsTUFBTSxVQUFVLEdBQThCLENBQUMsS0FBSyxFQUFFLEVBQUU7SUFDN0QsTUFBTSxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLEdBQUcsS0FBSyxDQUFDO0lBQ3ZDLE9BQU8sQ0FDTCwyQkFDRSxTQUFTLEVBQUUsRUFBRSxDQUNYLHVJQUF1SSxDQUN4STtRQUVBLEtBQUs7UUFDTCxJQUFJO1FBQ0osT0FBTyxJQUFJLDhCQUFNLFNBQVMsRUFBRSxFQUFFLENBQUMsT0FBTyxFQUFFLCtCQUErQixDQUFDLElBQUcsT0FBTyxDQUFRLENBQ3pGLENBQ0wsQ0FBQztBQUNKLENBQUMsQ0FBQyJ9