@spaziodati/atoka-design-system 2.0.72-beta

package/PieChart/index.js

@@ -0,0 +1,1986 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("@fortawesome/pro-solid-svg-icons/faCircle"), require("@fortawesome/react-fontawesome"), require("@nivo/pie"), require("classnames"), require("react"), require("react-bootstrap/Col"), require("react-bootstrap/Container"), require("react-bootstrap/Form"), require("react-bootstrap/FormControl"), require("react-bootstrap/FormText"), require("react-bootstrap/OverlayTrigger"), require("react-bootstrap/Row"));
+	else if(typeof define === 'function' && define.amd)
+		define("atoka-design-system", ["@fortawesome/pro-solid-svg-icons/faCircle", "@fortawesome/react-fontawesome", "@nivo/pie", "classnames", "react", "react-bootstrap/Col", "react-bootstrap/Container", "react-bootstrap/Form", "react-bootstrap/FormControl", "react-bootstrap/FormText", "react-bootstrap/OverlayTrigger", "react-bootstrap/Row"], factory);
+	else if(typeof exports === 'object')
+		exports["atoka-design-system"] = factory(require("@fortawesome/pro-solid-svg-icons/faCircle"), require("@fortawesome/react-fontawesome"), require("@nivo/pie"), require("classnames"), require("react"), require("react-bootstrap/Col"), require("react-bootstrap/Container"), require("react-bootstrap/Form"), require("react-bootstrap/FormControl"), require("react-bootstrap/FormText"), require("react-bootstrap/OverlayTrigger"), require("react-bootstrap/Row"));
+	else
+		root["atoka-design-system"] = factory(root["@fortawesome/pro-solid-svg-icons/faCircle"], root["@fortawesome/react-fontawesome"], root["@nivo/pie"], root["classnames"], root["react"], root["react-bootstrap/Col"], root["react-bootstrap/Container"], root["react-bootstrap/Form"], root["react-bootstrap/FormControl"], root["react-bootstrap/FormText"], root["react-bootstrap/OverlayTrigger"], root["react-bootstrap/Row"]);
+})(self, function(__WEBPACK_EXTERNAL_MODULE__1326__, __WEBPACK_EXTERNAL_MODULE__5692__, __WEBPACK_EXTERNAL_MODULE__7812__, __WEBPACK_EXTERNAL_MODULE__8310__, __WEBPACK_EXTERNAL_MODULE__8156__, __WEBPACK_EXTERNAL_MODULE__5315__, __WEBPACK_EXTERNAL_MODULE__4394__, __WEBPACK_EXTERNAL_MODULE__8721__, __WEBPACK_EXTERNAL_MODULE__1082__, __WEBPACK_EXTERNAL_MODULE__8763__, __WEBPACK_EXTERNAL_MODULE__6043__, __WEBPACK_EXTERNAL_MODULE__3915__) {
+return /******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 8687:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "EllipsableContent": () => (/* reexport */ EllipsableContent)
+});
+
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: ./src/components/Tooltip/index.ts + 1 modules
+var Tooltip = __webpack_require__(1512);
+// EXTERNAL MODULE: ./src/components/Utils/Utils.tsx
+var Utils = __webpack_require__(5654);
+;// CONCATENATED MODULE: ./src/components/EllipsableContent/EllipsableContent.tsx
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+
+
+
+
+var Prepend = function (props) { return (external_react_default().createElement("div", { className: 'ellipsable-content-prepend' }, props.children)); };
+Prepend.displayName = 'EllipsableContent.Prepend';
+var Append = function (props) { return (external_react_default().createElement("div", { className: 'ellipsable-content-append' }, props.children)); };
+Append.displayName = 'EllipsableContent.Append';
+var Content = function (props) {
+    var contentElement = external_react_default().createElement("div", { className: 'ellipsable-content-content' }, props.children);
+    if (props.tooltip == null) {
+        return contentElement;
+    }
+    return (external_react_default().createElement(Tooltip.Tooltip, __assign({}, props.tooltipProps, { content: props.tooltip }), contentElement));
+};
+Content.displayName = 'EllipsableContent.Content';
+var EllipsableContent = /** @class */ (function (_super) {
+    __extends(EllipsableContent, _super);
+    function EllipsableContent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    EllipsableContent.prototype.renderFullContent = function () {
+        var prependElement = (0,Utils/* findChildByComponent */.z8)(this.props.children, EllipsableContent.Prepend), contentElement = (0,Utils/* findChildByComponent */.z8)(this.props.children, EllipsableContent.Content), appendElement = (0,Utils/* findChildByComponent */.z8)(this.props.children, EllipsableContent.Append);
+        if (contentElement == null && (prependElement != null || appendElement != null)) {
+            console.error('You must set a .Content alongside the .Append or .Prepend');
+            return null;
+        }
+        if (contentElement == null) {
+            contentElement = external_react_default().createElement(EllipsableContent.Content, null, this.props.children);
+        }
+        if (this.props.tooltip != null) {
+            contentElement = (external_react_default().createElement(contentElement.type, __assign({}, contentElement.props, { tooltip: this.props.tooltip, tooltipProps: this.props.tooltipProps })));
+        }
+        return (external_react_default().createElement((external_react_default()).Fragment, null,
+            prependElement,
+            contentElement,
+            appendElement));
+    };
+    EllipsableContent.prototype.render = function () {
+        var className = external_classnames_default()('ellipsable-content-container', this.props.className, {
+            'ellipsable-with-tooltip': this.props.tooltip != null,
+        }), fullContent = this.renderFullContent();
+        if (fullContent == null) {
+            return null;
+        }
+        return (external_react_default().createElement("div", { className: className, style: this.props.style }, fullContent));
+    };
+    EllipsableContent.displayName = 'EllipsableContent';
+    EllipsableContent.Prepend = Prepend;
+    EllipsableContent.Append = Append;
+    EllipsableContent.Content = Content;
+    return EllipsableContent;
+}((external_react_default()).PureComponent));
+
+
+;// CONCATENATED MODULE: ./src/components/EllipsableContent/index.ts
+
+
+
+/***/ }),
+
+/***/ 9316:
+/***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// UNUSED EXPORTS: Form
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: external "react-bootstrap/Form"
+var Form_ = __webpack_require__(8721);
+var Form_default = /*#__PURE__*/__webpack_require__.n(Form_);
+;// CONCATENATED MODULE: ./src/components/Form/FormLabel.tsx
+
+
+
+
+var FormLabel = external_react_default().memo(function (props) {
+    var className = external_classnames_default()(props === null || props === void 0 ? void 0 : props.className, 'atoka-form-label');
+    return external_react_default().createElement((Form_default()).Label, { className: className }, props.children);
+});
+FormLabel.displayName = 'FormLabel';
+
+// EXTERNAL MODULE: ./src/components/Form/FormControl.tsx + 1 modules
+var FormControl = __webpack_require__(3422);
+;// CONCATENATED MODULE: ./src/components/Form/FormCheckbox.tsx
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+
+
+
+var FormCheckbox = function (props) {
+    var _a;
+    var className = external_classnames_default()('atoka-form-checkbox', props === null || props === void 0 ? void 0 : props.className);
+    return external_react_default().createElement((Form_default()).Check, __assign({ type: 'checkbox' }, props, { custom: true, className: className, label: (_a = props.label) !== null && _a !== void 0 ? _a : '' }));
+};
+FormCheckbox.displayName = 'FormCheckbox';
+
+;// CONCATENATED MODULE: ./src/components/Form/FormRadio.tsx
+var FormRadio_assign = (undefined && undefined.__assign) || function () {
+    FormRadio_assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return FormRadio_assign.apply(this, arguments);
+};
+
+
+
+
+var FormRadio = function (props) {
+    var _a;
+    var className = external_classnames_default()(props === null || props === void 0 ? void 0 : props.className, 'atoka-form-radio');
+    return external_react_default().createElement((Form_default()).Check, FormRadio_assign({ type: 'radio' }, props, { custom: true, className: className, label: (_a = props.label) !== null && _a !== void 0 ? _a : '' }));
+};
+FormRadio.displayName = 'FormRadio';
+
+// EXTERNAL MODULE: external "react-bootstrap/FormText"
+var FormText_ = __webpack_require__(8763);
+var FormText_default = /*#__PURE__*/__webpack_require__.n(FormText_);
+;// CONCATENATED MODULE: ./src/components/Form/FormHelp.tsx
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+
+
+
+
+var FormHelp = external_react_default().memo(function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var className = external_classnames_default()('d-block', props === null || props === void 0 ? void 0 : props.className);
+    return (external_react_default().createElement((FormText_default()), { bsPrefix: 'atoka-form-help', className: className }, children));
+});
+FormHelp.displayName = 'FormHelp';
+
+;// CONCATENATED MODULE: ./src/components/Form/Form.tsx
+var Form_assign = (undefined && undefined.__assign) || function () {
+    Form_assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return Form_assign.apply(this, arguments);
+};
+
+
+
+
+
+
+
+
+
+var Form = function (props) {
+    var className = external_classnames_default()(props === null || props === void 0 ? void 0 : props.className, 'atoka-form');
+    return (external_react_default().createElement((Form_default()), Form_assign({}, props, { className: className }), props.children));
+};
+Form.displayName = 'Form';
+Form.Control = FormControl/* FormControl */.N;
+Form.Label = FormLabel;
+Form.Checkbox = FormCheckbox;
+Form.Radio = FormRadio;
+Form.File = (Form_default()).File;
+Form.Switch = (Form_default()).Switch;
+Form.Help = FormHelp;
+Form.Group = (Form_default()).Group;
+
+
+
+/***/ }),
+
+/***/ 3422:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "N": () => (/* binding */ FormControl)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: external "react-bootstrap/FormControl"
+var FormControl_ = __webpack_require__(1082);
+var FormControl_default = /*#__PURE__*/__webpack_require__.n(FormControl_);
+;// CONCATENATED MODULE: ./src/components/Form/FormControlFeedBack.tsx
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+
+
+
+var FormControlFeedBack = external_react_default().memo(function (_a) {
+    var _b = _a.show, show = _b === void 0 ? true : _b, props = __rest(_a, ["show"]);
+    var className = external_classnames_default()(props === null || props === void 0 ? void 0 : props.className, 'atoka-form-control-feedback', {
+        'd-block': show,
+    });
+    return (external_react_default().createElement((FormControl_default()).Feedback, { type: props.type, className: className }, props.children));
+});
+FormControlFeedBack.displayName = ' FormControlFeedBack';
+
+;// CONCATENATED MODULE: ./src/components/Form/FormControl.tsx
+var FormControl_rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+
+
+
+
+
+var FormControlComponent = external_react_default().forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, props = FormControl_rest(_a, ["size"]);
+    var className = external_classnames_default()('atoka-form-control', props === null || props === void 0 ? void 0 : props.className, {
+        'atoka-shadow': props.withShadow,
+        'disabled': props.disabled,
+    });
+    return (external_react_default().createElement((FormControl_default()), { as: props.as, rows: props.rows, cols: props.cols, placeholder: props.placeholder, className: className, disabled: props.disabled, readOnly: props.readOnly, value: props.value, onChange: props.onChange, onKeyPress: props.onKeyPress, onKeyDown: props.onKeyDown, defaultValue: props.defaultValue, size: size === 'md' ? undefined : size, type: props.type, id: props.id, isValid: props.isValid, isInvalid: props.isInvalid, ref: ref, autoComplete: 'off' }, props.children));
+});
+FormControlComponent.displayName = 'FormControlComponent';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var FormControl = FormControlComponent;
+FormControl.FeedBack = FormControlFeedBack;
+FormControl.displayName = 'FormControl';
+
+
+
+/***/ }),
+
+/***/ 4157:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "PieChart": () => (/* reexport */ PieChart),
+  "PieChartProps": () => (/* reexport */ PieChart_namespaceObject.PieChartProps)
+});
+
+// NAMESPACE OBJECT: ./src/components/PieChart/PieChart.tsx
+var PieChart_namespaceObject = {};
+__webpack_require__.r(PieChart_namespaceObject);
+__webpack_require__.d(PieChart_namespaceObject, {
+  "u": () => (PieChart)
+});
+
+// EXTERNAL MODULE: ./node_modules/autobind-decorator/lib/esm/index.js
+var esm = __webpack_require__(6627);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "@nivo/pie"
+var pie_ = __webpack_require__(7812);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: ./src/components/Utils/Statistics.ts
+var Statistics = __webpack_require__(5258);
+// EXTERNAL MODULE: ./src/components/StatisticsLegend/index.ts + 3 modules
+var StatisticsLegend = __webpack_require__(8010);
+// EXTERNAL MODULE: ./src/components/Utils/Utils.tsx
+var Utils = __webpack_require__(5654);
+// EXTERNAL MODULE: ./src/components/StatisticsTooltip/index.ts + 1 modules
+var StatisticsTooltip = __webpack_require__(8805);
+// EXTERNAL MODULE: ./src/components/Utils/Style.ts
+var Style = __webpack_require__(2755);
+// EXTERNAL MODULE: ./src/components/Utils/Text.ts
+var Text = __webpack_require__(6347);
+;// CONCATENATED MODULE: ./src/components/PieChart/PieChart.tsx
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+
+
+
+
+
+
+
+
+
+
+/**
+ * ### Overview
+ *
+ * Use the `Piechart` component for an array of data.
+ * If your data is more of a tree, maybe it is worth the case to take a look at the `Sunburst`!
+ * */
+var PieChart = /** @class */ (function (_super) {
+    __extends(PieChart, _super);
+    function PieChart() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.renderTooltip = null;
+        _this.state = {
+            data: [],
+        };
+        return _this;
+    }
+    PieChart.prototype.componentDidUpdate = function (prevProps) {
+        if ((0,Utils/* deepEqual */.vZ)(prevProps, this.props)) {
+            return;
+        }
+        this.setupComponent();
+    };
+    PieChart.prototype.componentDidMount = function () {
+        this.setupComponent();
+    };
+    PieChart.prototype.setupComponent = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _o = this.props, _p = _o.data, data = _p === void 0 ? [] : _p, colors = _o.colors, maxSlicesNumber = _o.maxSlicesNumber, 
+        // Here the colors can't be anything than an array of strings but typescript does not seem to get it,
+        // hence the forced cast.
+        colorsFromProps = (Array.isArray(colors) ? colors : Object.values((_a = this.props.colors) !== null && _a !== void 0 ? _a : {}));
+        if (maxSlicesNumber == null && colorsFromProps.length !== data.length) {
+            throw Error('The colors.length must be of the same length as the data you give to the component');
+        }
+        if (maxSlicesNumber && maxSlicesNumber + 1 !== colorsFromProps.length) {
+            throw Error('With a maxSliceNumber prop, maxSlicesNumber + 1 must be of the same length as the colors.length prop');
+        }
+        var children = this.props.maxSlicesNumber == null
+            ? (_b = this.props.data) === null || _b === void 0 ? void 0 : _b.sort((0,Utils/* sortObjDesc */.kV)('value')) : (0,Statistics/* createDataWithOtherSlice */.xG)((_d = (_c = this.props) === null || _c === void 0 ? void 0 : _c.data) !== null && _d !== void 0 ? _d : [], (_e = this.props) === null || _e === void 0 ? void 0 : _e.otherId, (_f = this.props) === null || _f === void 0 ? void 0 : _f.otherLabel, (_g = this.props) === null || _g === void 0 ? void 0 : _g.maxSlicesNumber, (_h = this.props) === null || _h === void 0 ? void 0 : _h.total);
+        this.renderTooltip = (_j = this.props.renderTooltip) !== null && _j !== void 0 ? _j : (0,StatisticsTooltip.getRenderStatisticsTooltip)({
+            tooltipDataLabelKey: 'value',
+            tooltipDataValueKey: 'percentage',
+            tooltipDataTitleKey: 'id',
+            otherId: this.props.otherId,
+            numberToStringFormatter: (_l = (_k = this.props) === null || _k === void 0 ? void 0 : _k.tooltipValueFormat) !== null && _l !== void 0 ? _l : (_m = this.props) === null || _m === void 0 ? void 0 : _m.numberToStringFormatter,
+            otherLabel: this.props.otherLabel,
+            withColor: true,
+        });
+        this.setState({
+            data: children,
+        });
+    };
+    PieChart.prototype.getSortedColorsLikeData = function () {
+        var _this = this;
+        var _a;
+        if (this.props.colors == null) {
+            return undefined;
+        }
+        if (Array.isArray(this.props.colors)) {
+            return (_a = this.props.colors) !== null && _a !== void 0 ? _a : [];
+        }
+        return this.state.data.map(function (node) { var _a, _b; return (_b = (_a = _this.props) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b[node.id]; });
+    };
+    PieChart.prototype.renderLegend = function () {
+        var _a, _b, _c, _d, _e, _f;
+        // todo: in the future, in order to be able to do the download PNG without the htmltocanvas library,
+        //  we should port the legend to be displayed as a svg component layer
+        //  at least while we download it and use it as canvas.
+        return (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.renderLegend) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            data: this.state.data,
+            otherId: (_d = (_c = this.props) === null || _c === void 0 ? void 0 : _c.otherId) !== null && _d !== void 0 ? _d : '',
+            colors: (_e = this.getSortedColorsLikeData()) !== null && _e !== void 0 ? _e : [],
+            numberToStringFormatter: (_f = this.props) === null || _f === void 0 ? void 0 : _f.numberToStringFormatter,
+        });
+    };
+    PieChart.prototype.renderCenteredMetric = function (_a) {
+        var _b, _c, _d;
+        var dataWithArc = _a.dataWithArc, centerX = _a.centerX, centerY = _a.centerY;
+        var total = dataWithArc.reduce(function (totalValue) {
+            var _a, _b;
+            var args = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                args[_i - 1] = arguments[_i];
+            }
+            var currentValue = (_b = (_a = args[0].data) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 0;
+            return totalValue + currentValue;
+        }, 0);
+        return (external_react_default().createElement("text", { x: centerX, y: centerY, textAnchor: 'middle', fontSize: '42px', fontWeight: '600', dominantBaseline: 'central', className: 'cursor-default' }, (_d = (_c = (_b = this.props) === null || _b === void 0 ? void 0 : _b.numberToStringFormatter) === null || _c === void 0 ? void 0 : _c.call(_b, total)) !== null && _d !== void 0 ? _d : total));
+    };
+    PieChart.prototype.getRenderTooltip = function (props) {
+        var _a, _b, _c, _d;
+        // The type requires these data, but we will take the percentage from the props.data to create the tooltip
+        var unUsefulProps = { path: [], percentage: 0, depth: 0, height: 0 }, tooltipData = __assign(__assign({}, unUsefulProps), props.datum), tooltipFunction = (_a = this.renderTooltip) !== null && _a !== void 0 ? _a : null, 
+        // the type of value or initialValue is unknown because it was in the function which creates
+        // the other node which have unknown, but we know both can only be undefined or number
+        value = ((_b = tooltipData.data) === null || _b === void 0 ? void 0 : _b.value) || ((_c = tooltipData.data) === null || _c === void 0 ? void 0 : _c.initialValue) || 0;
+        return ((_d = tooltipFunction === null || tooltipFunction === void 0 ? void 0 : tooltipFunction(__assign(__assign({}, tooltipData), { data: __assign(__assign({}, tooltipData.data), { value: value }) }))) !== null && _d !== void 0 ? _d : null);
+    };
+    PieChart.prototype.renderSVGLegend = function () {
+        var _this = this;
+        var _a, _b, _c;
+        var data = this.state.data.map(function (d) { var _a; return (__assign(__assign({}, d), { value: (_a = d.value) !== null && _a !== void 0 ? _a : 0, percentage: undefined })); }), size = parseInt((_a = this.props.size) !== null && _a !== void 0 ? _a : '0', 10), y = size;
+        if (y > 0) {
+            y -= 45 + (data.length / 2 - 1) * 5;
+            if (data.length < 3) {
+                // middle vertical alignment with items number <= 2
+                y = y + 16;
+            }
+        }
+        var index = 0;
+        var lines = [], dataColors = (_b = this.getSortedColorsLikeData()) !== null && _b !== void 0 ? _b : [];
+        var _loop_1 = function () {
+            var dataForLine = data.slice(index, index + 2);
+            var subDataColors = (_c = dataColors === null || dataColors === void 0 ? void 0 : dataColors.slice(index, index + 2)) !== null && _c !== void 0 ? _c : null;
+            dataForLine.forEach(function (subData, j) {
+                var val = _this.props.numberToStringFormatter == null
+                    ? subData === null || subData === void 0 ? void 0 : subData.value : _this.props.numberToStringFormatter(subData === null || subData === void 0 ? void 0 : subData.value), valLength = val.toString().length, charsNumberForEllipse = 19 - valLength;
+                lines.push(external_react_default().createElement(StatisticsLegend.StatisticsSVGLegend, { key: index + "-" + j, data: [subData], x: (j * size) / 2 + j * 20, y: y + index * 10, width: (size / 2) * 2 + 40, valueFormat: _this.props.numberToStringFormatter, labelFormat: function (label) { return (0,Text/* ellipse */.Hp)(label, charsNumberForEllipse); }, colors: [subDataColors[j]] }));
+            });
+            index += 2;
+        };
+        // do a loop to split the legend in line of 2 items
+        while (index < data.length) {
+            _loop_1();
+        }
+        return external_react_default().createElement("g", null, lines);
+    };
+    PieChart.prototype.render = function () {
+        var _a = this.props, size = _a.size, withNumber = _a.withNumber, isLayoutVertical = this.props.layout === 'vertical', className = external_classnames_default()('d-flex piechart-container', this.props.className, {
+            'flex-column align-items-center h-100': isLayoutVertical,
+            'justify-content-between': this.props.renderLegend != null && isLayoutVertical,
+            'justify-content-center': this.props.renderLegend == null && isLayoutVertical,
+        }), layers = ['arcs', 'arcLabels'], margin = { top: 10, right: 10, bottom: 10, left: 10 }, height = parseInt(size !== null && size !== void 0 ? size : '0', 10);
+        var legend = null, width = size;
+        if (withNumber) {
+            layers.push(this.renderCenteredMetric);
+        }
+        if (this.props.withSVGLegend) {
+            layers.push(this.renderSVGLegend);
+            margin.bottom = 60;
+            width = '300px';
+        }
+        else {
+            legend = this.renderLegend();
+        }
+        return (external_react_default().createElement("div", { ref: this.props.chartRef, className: className, id: this.props.id },
+            external_react_default().createElement("div", { style: { height: height, width: width } },
+                external_react_default().createElement(pie_.ResponsivePie, { tooltip: this.getRenderTooltip, data: this.state.data, margin: margin, cornerRadius: 0, innerRadius: 0.8, borderColor: '#ffff', colors: this.getSortedColorsLikeData(), enableArcLabels: false, enableArcLinkLabels: false, activeOuterRadiusOffset: 0, isInteractive: true, layers: layers })),
+            legend));
+    };
+    var _a, _b, _c, _d, _e, _f;
+    PieChart.displayName = 'PieChart';
+    PieChart.defaultProps = {
+        colors: [Style/* blue30 */.KH, Style/* blue80 */.kA, Style/* blue100 */.qi, Style/* blue300 */.p5],
+        otherId: 'other',
+        size: '100%',
+        layout: 'vertical',
+    };
+    __decorate([
+        esm/* boundMethod */.MR,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", typeof (_a = typeof (external_react_default()) !== "undefined" && (external_react_default()).ReactNode) === "function" ? _a : Object)
+    ], PieChart.prototype, "renderLegend", null);
+    __decorate([
+        esm/* boundMethod */.MR,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_b = typeof pie_.PieCustomLayerProps !== "undefined" && pie_.PieCustomLayerProps) === "function" ? _b : Object]),
+        __metadata("design:returntype", typeof (_c = typeof JSX !== "undefined" && JSX.Element) === "function" ? _c : Object)
+    ], PieChart.prototype, "renderCenteredMetric", null);
+    __decorate([
+        esm/* boundMethod */.MR,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_d = typeof pie_.PieTooltipProps !== "undefined" && pie_.PieTooltipProps) === "function" ? _d : Object]),
+        __metadata("design:returntype", Object)
+    ], PieChart.prototype, "getRenderTooltip", null);
+    __decorate([
+        esm/* boundMethod */.MR,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", typeof (_f = typeof JSX !== "undefined" && JSX.Element) === "function" ? _f : Object)
+    ], PieChart.prototype, "renderSVGLegend", null);
+    return PieChart;
+}((external_react_default()).Component));
+
+
+;// CONCATENATED MODULE: ./src/components/PieChart/index.ts
+
+
+
+/***/ }),
+
+/***/ 655:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Q": () => (/* binding */ StatisticsSVGLegend)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8156);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var autobind_decorator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6627);
+/* harmony import */ var _Utils_CommonTypes__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6055);
+/* harmony import */ var _Utils_CommonTypes__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_Utils_CommonTypes__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _Utils_Style__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2755);
+/* harmony import */ var _Utils_Statistics__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5258);
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+
+
+
+
+
+var StatisticsSVGLegend = /** @class */ (function (_super) {
+    __extends(StatisticsSVGLegend, _super);
+    function StatisticsSVGLegend() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    StatisticsSVGLegend.prototype.renderSVGDataInfoBit = function (item, i) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var label = (_a = item.label) !== null && _a !== void 0 ? _a : '', percentage = this.renderPercentage(item), dot = this.renderCircle((_b = this.props.colors) === null || _b === void 0 ? void 0 : _b[i]);
+        return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), { key: item.label + "-legend-data" },
+            dot,
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("text", { x: this.props.x, y: this.props.y, fill: _Utils_Style__WEBPACK_IMPORTED_MODULE_2__/* .gray400 */ .de, fontSize: this.props.fontSize, key: item.label + "-legend-data" },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tspan", { dx: dot == null ? 0 : 10 }, (_e = (_d = (_c = this.props).labelFormat) === null || _d === void 0 ? void 0 : _d.call(_c, label)) !== null && _e !== void 0 ? _e : label),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tspan", { x: this.getRightElementX(), dx: 5, fill: 'black', fontWeight: 'bold', textAnchor: 'end' }, (_h = (_g = (_f = this.props).valueFormat) === null || _g === void 0 ? void 0 : _g.call(_f, item.value)) !== null && _h !== void 0 ? _h : item.value),
+                percentage)));
+    };
+    StatisticsSVGLegend.prototype.renderSVGDataInfoBitMoreItems = function (item, i) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var label = (_a = item.label) !== null && _a !== void 0 ? _a : '', percentage = this.renderPercentage(item), dot = this.renderCircle((_b = this.props.colors) === null || _b === void 0 ? void 0 : _b[i]);
+        return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), { key: item.label + "-legend-data-items" },
+            dot,
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tspan", { dx: i === 0 || dot != null ? 0 : 10, fill: _Utils_Style__WEBPACK_IMPORTED_MODULE_2__/* .gray400 */ .de }, (_e = (_d = (_c = this.props).labelFormat) === null || _d === void 0 ? void 0 : _d.call(_c, label)) !== null && _e !== void 0 ? _e : label),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tspan", { dx: 5, fill: 'black', fontWeight: 'bold' }, (_h = (_g = (_f = this.props).valueFormat) === null || _g === void 0 ? void 0 : _g.call(_f, item.value)) !== null && _h !== void 0 ? _h : item.value),
+            percentage));
+    };
+    StatisticsSVGLegend.prototype.renderCircle = function (color) {
+        if (color == null) {
+            return null;
+        }
+        return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("circle", { cx: this.props.x, cy: this.props.y - 3, r: '5', fill: color });
+    };
+    StatisticsSVGLegend.prototype.renderPercentage = function (item) {
+        var _a;
+        var percentage = item.percentage != null ? (0,_Utils_Statistics__WEBPACK_IMPORTED_MODULE_1__/* .normalizePercentage */ .Ow)(item.percentage) : null;
+        if (percentage == null) {
+            return null;
+        }
+        return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tspan", { x: this.getRightElementX(), dx: 5, fill: (_a = this.props.colors) === null || _a === void 0 ? void 0 : _a[0] }, percentage));
+    };
+    StatisticsSVGLegend.prototype.getRightElementX = function () {
+        var width = this.props.width;
+        if (width == null) {
+            return undefined;
+        }
+        return (this.props.x === 0 ? width / 2 : width) - 18;
+    };
+    StatisticsSVGLegend.prototype.removeItemIfNoValue = function (propsData) {
+        return propsData.filter(function (item) { return item.value !== null; });
+    };
+    StatisticsSVGLegend.prototype.render = function () {
+        var legendData = this.removeItemIfNoValue(this.props.data);
+        if ((legendData === null || legendData === void 0 ? void 0 : legendData.length) > 1) {
+            return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("g", null,
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("text", { x: this.props.x, y: this.props.y, dy: this.props.dy, fill: _Utils_Style__WEBPACK_IMPORTED_MODULE_2__/* .gray400 */ .de, fontSize: this.props.fontSize, key: 'legend-data-bit', className: 'legend-data-bit' }, legendData.map(this.renderSVGDataInfoBitMoreItems))));
+        }
+        return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("g", null, legendData.map(this.renderSVGDataInfoBit));
+    };
+    var _a, _b, _c, _d;
+    StatisticsSVGLegend.displayName = 'StatisticsSVGLegend';
+    StatisticsSVGLegend.defaultProps = {
+        dy: 0,
+        fontSize: 11,
+        colors: [],
+    };
+    __decorate([
+        autobind_decorator__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_a = typeof _Utils_CommonTypes__WEBPACK_IMPORTED_MODULE_4__.DataPoint !== "undefined" && _Utils_CommonTypes__WEBPACK_IMPORTED_MODULE_4__.DataPoint) === "function" ? _a : Object, Number]),
+        __metadata("design:returntype", typeof (_b = typeof (react__WEBPACK_IMPORTED_MODULE_0___default()) !== "undefined" && (react__WEBPACK_IMPORTED_MODULE_0___default().ReactNode)) === "function" ? _b : Object)
+    ], StatisticsSVGLegend.prototype, "renderSVGDataInfoBit", null);
+    __decorate([
+        autobind_decorator__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .ZP,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_c = typeof _Utils_CommonTypes__WEBPACK_IMPORTED_MODULE_4__.DataPoint !== "undefined" && _Utils_CommonTypes__WEBPACK_IMPORTED_MODULE_4__.DataPoint) === "function" ? _c : Object, Number]),
+        __metadata("design:returntype", typeof (_d = typeof (react__WEBPACK_IMPORTED_MODULE_0___default()) !== "undefined" && (react__WEBPACK_IMPORTED_MODULE_0___default().ReactNode)) === "function" ? _d : Object)
+    ], StatisticsSVGLegend.prototype, "renderSVGDataInfoBitMoreItems", null);
+    return StatisticsSVGLegend;
+}((react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent)));
+
+
+
+/***/ }),
+
+/***/ 8010:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "StatisticsSVGLegend": () => (/* reexport */ StatisticsSVGLegend/* StatisticsSVGLegend */.Q)
+});
+
+// UNUSED EXPORTS: StatisticsLegend, StatisticsLegendProps, getRenderStatisticsLegend
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "react-bootstrap/Container"
+var Container_ = __webpack_require__(4394);
+var Container_default = /*#__PURE__*/__webpack_require__.n(Container_);
+// EXTERNAL MODULE: external "react-bootstrap/Row"
+var Row_ = __webpack_require__(3915);
+var Row_default = /*#__PURE__*/__webpack_require__.n(Row_);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: external "react-bootstrap/Col"
+var Col_ = __webpack_require__(5315);
+var Col_default = /*#__PURE__*/__webpack_require__.n(Col_);
+// EXTERNAL MODULE: external "@fortawesome/pro-solid-svg-icons/faCircle"
+var faCircle_ = __webpack_require__(1326);
+// EXTERNAL MODULE: external "@fortawesome/react-fontawesome"
+var react_fontawesome_ = __webpack_require__(5692);
+// EXTERNAL MODULE: ./src/components/EllipsableContent/index.ts + 1 modules
+var EllipsableContent = __webpack_require__(8687);
+// EXTERNAL MODULE: ./src/components/Utils/Text.ts
+var Text = __webpack_require__(6347);
+// EXTERNAL MODULE: ./src/components/Utils/Statistics.ts
+var Statistics = __webpack_require__(5258);
+;// CONCATENATED MODULE: ./src/components/StatisticsLegend/StatisticsLegendItem.tsx
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+// eslint-disable-next-line import/no-internal-modules
+
+
+
+
+
+var StatisticsLegendItem = /** @class */ (function (_super) {
+    __extends(StatisticsLegendItem, _super);
+    function StatisticsLegendItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    StatisticsLegendItem.prototype.renderRightBlock = function () {
+        var items = [this.renderValue(), this.renderPercentage()].filter(function (node) { return node != null; });
+        if (items.length == null) {
+            return null;
+        }
+        return external_react_default().createElement(EllipsableContent.EllipsableContent.Append, null, items);
+    };
+    StatisticsLegendItem.prototype.renderValue = function () {
+        var _a = this.props, legendDataValueKey = _a.legendDataValueKey, numberToStringFormatter = _a.numberToStringFormatter, data = _a.data;
+        if (legendDataValueKey == null || data[legendDataValueKey] == null) {
+            return null;
+        }
+        var value = data[legendDataValueKey], newValue = numberToStringFormatter ? numberToStringFormatter(value) : String(value);
+        return (external_react_default().createElement("div", { key: 'value-container', className: 'value-container font-weight-bold text-nowrap' }, newValue));
+    };
+    StatisticsLegendItem.prototype.renderPercentage = function () {
+        var _a = this.props, legendDataPercentageKey = _a.legendDataPercentageKey, data = _a.data;
+        if (legendDataPercentageKey == null || data[legendDataPercentageKey] == null) {
+            return null;
+        }
+        var percentage = (0,Statistics/* normalizePercentage */.Ow)(data[legendDataPercentageKey]);
+        return (external_react_default().createElement("div", { key: 'percentage-container', className: 'percentage-container ml-1' }, percentage));
+    };
+    StatisticsLegendItem.prototype.renderOtherLabel = function (data) {
+        var _a;
+        if ((0,Text/* isStringEmpty */.Wq)(data.label)) {
+            return String((_a = data === null || data === void 0 ? void 0 : data.id) !== null && _a !== void 0 ? _a : '');
+        }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return data.label;
+    };
+    StatisticsLegendItem.prototype.renderLabel = function () {
+        var _a = this.props, legendDataLabelKey = _a.legendDataLabelKey, data = _a.data, otherId = _a.otherId;
+        if (data.id === otherId) {
+            return this.renderOtherLabel(data);
+        }
+        return legendDataLabelKey == null ? null : data === null || data === void 0 ? void 0 : data[legendDataLabelKey];
+    };
+    StatisticsLegendItem.prototype.render = function () {
+        var _a = this.props, columnNumber = _a.columnNumber, color = _a.color, data = _a.data;
+        var className = external_classnames_default()('legend-item px-1', {
+            'flex-basis-0': this.props.layout === 'horizontal',
+        });
+        return (external_react_default().createElement((Col_default()), { sm: 24 / columnNumber, className: className, key: "legend-item-" + data.id },
+            external_react_default().createElement(EllipsableContent.EllipsableContent, { className: 'label-container w-100 justify-content-between' },
+                external_react_default().createElement(EllipsableContent.EllipsableContent.Content, null,
+                    external_react_default().createElement(react_fontawesome_.FontAwesomeIcon, { icon: faCircle_.faCircle, color: color, className: 'mr-1' }),
+                    this.renderLabel()),
+                this.renderRightBlock())));
+    };
+    StatisticsLegendItem.displayName = 'StatisticsLegendItem';
+    return StatisticsLegendItem;
+}((external_react_default()).PureComponent));
+
+
+;// CONCATENATED MODULE: ./src/components/StatisticsLegend/StatisticsLegend.tsx
+
+
+
+
+
+var StatisticsLegend_StatisticsLegend = external_react_default().memo(function (_a) {
+    var data = _a.data, otherId = _a.otherId, colors = _a.colors, _b = _a.layout, layout = _b === void 0 ? 'vertical' : _b, _c = _a.columnNumber, columnNumber = _c === void 0 ? 2 : _c, numberToStringFormatter = _a.numberToStringFormatter, legendDataLabelKey = _a.legendDataLabelKey, legendDataValueKey = _a.legendDataValueKey, legendDataPercentageKey = _a.legendDataPercentageKey;
+    // eslint-disable-next-line react/display-name
+    function renderItem(item, i) {
+        var id = item.id, color = id === otherId ? colors === null || colors === void 0 ? void 0 : colors[colors.length - 1] : colors === null || colors === void 0 ? void 0 : colors[i];
+        return (external_react_default().createElement(StatisticsLegendItem, { data: item, numberToStringFormatter: numberToStringFormatter, legendDataValueKey: legendDataValueKey, legendDataLabelKey: legendDataLabelKey, legendDataPercentageKey: legendDataPercentageKey, color: color, otherId: otherId, key: id + color, columnNumber: columnNumber, layout: layout }));
+    }
+    function removeItemIfOtherWithNoValue(propsData) {
+        return propsData.filter(function (item) { return item.value !== 0 || item.id !== otherId; });
+    }
+    var legendData = removeItemIfOtherWithNoValue(data);
+    if (layout === 'horizontal') {
+        return external_react_default().createElement("div", { className: 'legend-container' }, legendData.map(renderItem));
+    }
+    return (external_react_default().createElement((Container_default()), { className: 'legend-container' },
+        external_react_default().createElement((Row_default()), { className: 'w-100' }, legendData.map(renderItem))));
+});
+StatisticsLegend_StatisticsLegend.displayName = 'StatisticsLegend';
+
+;// CONCATENATED MODULE: ./src/components/StatisticsLegend/helpers.tsx
+
+
+var getRenderStatisticsLegend = function (_a) {
+    var legendDataLabelKey = _a.legendDataLabelKey, legendDataValueKey = _a.legendDataValueKey, legendDataPercentageKey = _a.legendDataPercentageKey, layout = _a.layout, columnsNumber = _a.columnsNumber;
+    return function (_a) {
+        var data = _a.data, otherId = _a.otherId, colors = _a.colors, numberToStringFormatter = _a.numberToStringFormatter;
+        return (React.createElement(StatisticsLegend, { layout: layout, data: data, otherId: otherId, colors: colors, columnNumber: columnsNumber, numberToStringFormatter: numberToStringFormatter, legendDataLabelKey: legendDataLabelKey, legendDataValueKey: legendDataValueKey, legendDataPercentageKey: legendDataPercentageKey }));
+    };
+};
+
+// EXTERNAL MODULE: ./src/components/StatisticsLegend/StatisticsSVGLegend.tsx
+var StatisticsSVGLegend = __webpack_require__(655);
+;// CONCATENATED MODULE: ./src/components/StatisticsLegend/index.ts
+
+
+
+
+
+/***/ }),
+
+/***/ 1470:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "q": () => (/* binding */ getRenderStatisticsTooltip)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8156);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8805);
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+
+function getRenderStatisticsTooltip(_a) {
+    var tooltipDataLabelKey = _a.tooltipDataLabelKey, tooltipDataValueKey = _a.tooltipDataValueKey, tooltipDataTitleKey = _a.tooltipDataTitleKey, otherId = _a.otherId, otherLabel = _a.otherLabel, numberToStringFormatter = _a.numberToStringFormatter, withColor = _a.withColor, _b = _a.className, className = _b === void 0 ? 'tooltip-background' : _b;
+    // eslint-disable-next-line react/display-name
+    return function (props) {
+        var _a, _b, _c, _d;
+        var tooltipData = __assign(__assign({}, props.data), { value: (_a = props.data) === null || _a === void 0 ? void 0 : _a['value'], label: (_b = props.data) === null || _b === void 0 ? void 0 : _b['label'], id: (_c = props.data) === null || _c === void 0 ? void 0 : _c['id'], percentage: (_d = props.data) === null || _d === void 0 ? void 0 : _d['percentage'] });
+        return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_index__WEBPACK_IMPORTED_MODULE_1__.StatisticsTooltip, { otherId: otherId, otherLabel: otherLabel, numberToStringFormatter: numberToStringFormatter, data: tooltipData, tooltipDataLabelKey: tooltipDataLabelKey, tooltipDataTitleKey: tooltipDataTitleKey, tooltipDataValueKey: tooltipDataValueKey, className: className !== null && className !== void 0 ? className : '', color: withColor ? props.color : undefined }));
+    };
+}
+
+
+/***/ }),
+
+/***/ 8805:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "StatisticsTooltip": () => (/* reexport */ StatisticsTooltip),
+  "getRenderStatisticsTooltip": () => (/* reexport */ helpers/* getRenderStatisticsTooltip */.q)
+});
+
+// UNUSED EXPORTS: GetRenderStatisticsTooltipType
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: ./src/components/Utils/Statistics.ts
+var Statistics = __webpack_require__(5258);
+;// CONCATENATED MODULE: ./src/components/StatisticsTooltip/StatisticsTooltip.tsx
+
+
+
+var StatisticsTooltip = external_react_default().memo(function (props) {
+    // eslint-disable-next-line react/display-name
+    function renderSubtitle() {
+        var values = [
+            { value: getLabel(), key: props.tooltipDataLabelKey, className: 'label' },
+            { value: getValue(), key: props.tooltipDataValueKey, className: 'value' },
+        ]
+            .filter(function (el) { return el.value != null; })
+            .map(function (el) { return (external_react_default().createElement("span", { key: el.key, className: el.className }, el.value)); });
+        if (values.length === 0) {
+            return null;
+        }
+        return external_react_default().createElement("div", { className: 'd-flex justify-content-between' }, values);
+    }
+    function getLabel() {
+        var tooltipDataLabelKey = props.tooltipDataLabelKey, numberToStringFormatter = props.numberToStringFormatter, data = props.data, label = getValueFromData(tooltipDataLabelKey, data);
+        if (label == null) {
+            return undefined;
+        }
+        if (numberToStringFormatter == null) {
+            return String(label);
+        }
+        if (typeof label == 'string') {
+            return label;
+        }
+        return numberToStringFormatter(label);
+    }
+    function getValue() {
+        var tooltipDataValueKey = props.tooltipDataValueKey, data = props.data, value = getValueFromData(tooltipDataValueKey, data);
+        if (value == null) {
+            return undefined;
+        }
+        if (typeof value == 'number') {
+            return (0,Statistics/* normalizePercentage */.Ow)(value);
+        }
+        return value;
+    }
+    function getTitle() {
+        var tooltipDataTitleKey = props.tooltipDataTitleKey, data = props.data, otherId = props.otherId, otherLabel = props.otherLabel, title = getValueFromData(tooltipDataTitleKey, data);
+        if (title === otherId) {
+            return otherLabel !== null && otherLabel !== void 0 ? otherLabel : otherId;
+        }
+        return title ? String(title) : undefined;
+    }
+    function getValueFromData(key, data) {
+        return key == null ? undefined : data === null || data === void 0 ? void 0 : data[key];
+    }
+    var className = external_classnames_default()('statistics-tooltip', props === null || props === void 0 ? void 0 : props.className), colorRectangle = props.color == null ? null : external_react_default().createElement("span", { className: 'tooltip-rectangle', style: { background: props.color } });
+    return (external_react_default().createElement("div", { className: className },
+        external_react_default().createElement("div", { className: 'd-flex align-items-center' },
+            colorRectangle,
+            external_react_default().createElement("span", { className: 'text-left' }, getTitle())),
+        renderSubtitle(),
+        props.children));
+});
+StatisticsTooltip.displayName = 'StatisticsTooltip';
+
+// EXTERNAL MODULE: ./src/components/StatisticsTooltip/helpers.tsx
+var helpers = __webpack_require__(1470);
+;// CONCATENATED MODULE: ./src/components/StatisticsTooltip/index.ts
+
+
+
+
+/***/ }),
+
+/***/ 1512:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Tooltip": () => (/* reexport */ Tooltip)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: external "react-bootstrap/OverlayTrigger"
+var OverlayTrigger_ = __webpack_require__(6043);
+var OverlayTrigger_default = /*#__PURE__*/__webpack_require__.n(OverlayTrigger_);
+;// CONCATENATED MODULE: ./src/components/Tooltip/Tooltip.tsx
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+
+
+
+
+/**
+ * ### Overview
+ *
+ * A tooltip is a short message which is triggered when the users hovers or clicks on a specific element inside the interface.
+ *
+ * ### Best practices
+ * - Don’t use a tooltip when the information you want to place inside it is vital for the user to complete the task
+ * - The text inside the tooltip should be brief but helpful
+ * - Use tooltips to describe the action of icon-only buttons
+ * - Make sure that the tooltip’s placement doesn’t hide its related content behind it
+ */
+var Tooltip = external_react_default().memo(function (props) {
+    var _a;
+    var bs4v3Wrapper = document.querySelector('.bs4-v3-external-container'), placement = (_a = props.placement) !== null && _a !== void 0 ? _a : 'top', classNames = external_classnames_default()('tooltip atoka-tooltip', props.className, {
+        'top bs-tooltip-top': placement.indexOf('top') === 0,
+        'right bs-tooltip-right': placement.indexOf('right') === 0,
+        'bottom bs-tooltip-bottom': placement.indexOf('bottom') === 0,
+        'left bs-tooltip-left': placement.indexOf('left') === 0,
+    });
+    var content = props.content, overlayProps = __rest(props, ["content"]), renderTooltip = function (_a) {
+        var arrowProps = _a.arrowProps, tooltipProps = __rest(_a, ["arrowProps"]);
+        // {vrut} do not pass show to the component, this will raise an error, see PANDA-439
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        var show = tooltipProps.show, rest = __rest(tooltipProps, ["show"]), component = (external_react_default().createElement("div", __assign({}, rest, { className: classNames, role: 'tooltip' }),
+            external_react_default().createElement("div", { className: 'tooltip-inner' },
+                external_react_default().createElement("div", __assign({ className: 'arrow arrow-back' }, arrowProps)),
+                content,
+                external_react_default().createElement("div", __assign({ className: 'arrow arrow-front' }, arrowProps)))));
+        return component;
+    };
+    return (external_react_default().createElement((OverlayTrigger_default()), __assign({}, overlayProps, { container: bs4v3Wrapper, overlay: renderTooltip }), props.children));
+});
+Tooltip.displayName = 'Tooltip';
+
+;// CONCATENATED MODULE: ./src/components/Tooltip/index.ts
+
+
+
+/***/ }),
+
+/***/ 6055:
+/***/ (() => {
+
+
+
+/***/ }),
+
+/***/ 5258:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "xG": () => (/* binding */ createDataWithOtherSlice),
+/* harmony export */   "Ow": () => (/* binding */ normalizePercentage)
+/* harmony export */ });
+/* unused harmony export createCleanTree */
+/* harmony import */ var _Utils_Utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5654);
+var __values = (undefined && undefined.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+
+
+function createDataWithOtherSlice(data, otherId, otherLabel, maxSlicesNumber, total, dataValueKey) {
+    var _a, _b;
+    if (maxSlicesNumber === void 0) { maxSlicesNumber = 0; }
+    if (dataValueKey === void 0) { dataValueKey = 'value'; }
+    var otherValue = 0, newOtherId = otherId !== null && otherId !== void 0 ? otherId : 'other', 
+    // We know it is defined but Typescript does not get it.
+    newmaxSlicesNumber = maxSlicesNumber !== null && maxSlicesNumber !== void 0 ? maxSlicesNumber : 0, newData = [], maxToMinData = data === null || data === void 0 ? void 0 : data.sort((0,_Utils_Utils__WEBPACK_IMPORTED_MODULE_0__/* .sortObjDesc */ .kV)(dataValueKey));
+    maxToMinData === null || maxToMinData === void 0 ? void 0 : maxToMinData.forEach(function (node, i) {
+        var _a;
+        if (i < newmaxSlicesNumber && node.id !== otherId) {
+            newData.push(createCleanTree(node));
+        }
+        else {
+            var nodeValue = (_a = Number(node === null || node === void 0 ? void 0 : node.value)) !== null && _a !== void 0 ? _a : 0;
+            otherValue += nodeValue;
+        }
+    });
+    var otherNode = {};
+    otherNode['id'] = newOtherId;
+    otherNode['value'] = parseFloat(otherValue.toFixed(2));
+    otherNode['initialValue'] = parseFloat(otherValue.toFixed(2));
+    otherNode['label'] = (_a = otherLabel !== null && otherLabel !== void 0 ? otherLabel : newOtherId) !== null && _a !== void 0 ? _a : '';
+    if (((_b = data === null || data === void 0 ? void 0 : data[0]) === null || _b === void 0 ? void 0 : _b.percentage) != null && total != null) {
+        otherNode['percentage'] = (otherValue / total) * 100;
+    }
+    if (maxSlicesNumber !== Infinity || otherValue !== 0) {
+        newData.push(otherNode);
+    }
+    return newData;
+}
+function createCleanTree(node) {
+    if (node.children == null) {
+        return node;
+    }
+    var newNode = (0,_Utils_Utils__WEBPACK_IMPORTED_MODULE_0__/* .clone */ .d9)(node);
+    removeValueIfChildren(newNode);
+    return newNode;
+}
+// eslint-disable-next-line @typescript-eslint/ban-types
+function removeValueIfChildren(node) {
+    var e_1, _a;
+    var _b;
+    var children = ((_b = node === null || node === void 0 ? void 0 : node['children']) !== null && _b !== void 0 ? _b : []);
+    node['initialValue'] = node['value'];
+    if (children.length > 0) {
+        delete node['value'];
+    }
+    try {
+        for (var children_1 = __values(children), children_1_1 = children_1.next(); !children_1_1.done; children_1_1 = children_1.next()) {
+            var child = children_1_1.value;
+            removeValueIfChildren(child);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (children_1_1 && !children_1_1.done && (_a = children_1.return)) _a.call(children_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+}
+function normalizePercentage(value) {
+    var _a;
+    return parseInt((_a = value === null || value === void 0 ? void 0 : value.toFixed) === null || _a === void 0 ? void 0 : _a.call(value, 0), 10) + "%";
+}
+
+
+/***/ }),
+
+/***/ 2755:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "KH": () => (/* binding */ blue30),
+/* harmony export */   "kA": () => (/* binding */ blue80),
+/* harmony export */   "qi": () => (/* binding */ blue100),
+/* harmony export */   "p5": () => (/* binding */ blue300),
+/* harmony export */   "de": () => (/* binding */ gray400)
+/* harmony export */ });
+/* unused harmony exports calculateDomain, generateRangeColor, white, blue25, blue50, blue90, blue95, gray200, blue400, yellow, orange, red, green, gray100, gray300, purple, viola, pink100, pink200, salmon, black */
+
+function generateRangeColor(len, rangeColors) {
+    if (rangeColors === void 0) { rangeColors = ['#82CA9D', '#f6ea25', '#F7977A']; }
+    var generatedColors = [];
+    if (len === 0) {
+        return undefined;
+    }
+    var colors = scaleLinear(), domain = calculateDomain(rangeColors.length, rangeColors.length), targetDomain = calculateDomain(len, rangeColors.length);
+    colors = colors.domain(domain).range(rangeColors);
+    for (var i = 0; i < len; i++) {
+        generatedColors.push(colors(targetDomain[i]));
+    }
+    return generatedColors;
+}
+function calculateDomain(len, rangeColorsLength) {
+    var domain = [];
+    domain.push(0);
+    for (var i = 0; i < len - 2; i++) {
+        var num = Number((rangeColorsLength / len) * (i + 1));
+        domain.push(parseFloat(num.toFixed(2)));
+    }
+    domain.push(rangeColorsLength);
+    return domain;
+}
+// Keep these in sync with variables.less
+var white = '#FFFFFF', blue25 = '#eef2f5', blue30 = '#CBD8E0', blue50 = '#AFD1E0', blue80 = '#8FB7CB', blue90 = '#94C2DA', blue95 = '#6E9DB5', blue100 = '#578EA8', blue300 = 'rgb(32, 88, 113)', // #205871
+blue400 = '#11455C', gray100 = '#FAFAFA', gray200 = '#EBEBEB', gray300 = '#B0B0B0', gray400 = '#717171', yellow = '#FFBB00', orange = '#F38522', red = '#F72200', green = '#309B0A', purple = '#63619F', viola = '#965DA3', pink200 = '#C55795', pink100 = '#E85778', salmon = '#F86752', black = '#222222';
+
+
+
+/***/ }),
+
+/***/ 6347:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Wq": () => (/* binding */ isStringEmpty),
+/* harmony export */   "Hp": () => (/* binding */ ellipse)
+/* harmony export */ });
+/* unused harmony exports slugify, estimateWordSize, matchAndFormatRangeLabel, formatRange, ellipseAndFormat, escapeRegExp, isMatching, splitTextInParts */
+var __values = (undefined && undefined.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __read = (undefined && undefined.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spread = (undefined && undefined.__spread) || function () {
+    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+    return ar;
+};
+function isStringEmpty(s) {
+    if (s == null) {
+        return true;
+    }
+    return s.match(/^\s*$/) !== null;
+}
+function slugify(text) {
+    var a = 'àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;', b = 'aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------', p = new RegExp(a.split('').join('|'), 'g');
+    return text
+        .toString()
+        .toLowerCase()
+        .replace(/\s+/g, '-') // Replace spaces with -
+        .replace(p, function (c) { return b.charAt(a.indexOf(c)); }) // Replace special characters
+        .replace(/&/g, '-and-') // Replace & with 'and'
+        .replace(/[^\w-]+/g, '') // Remove all non-word characters
+        .replace(/--+/g, '-') // Replace multiple - with single -
+        .replace(/^-+/, '') // Trim - from start of text
+        .replace(/-+$/, ''); // Trim - from end of text
+}
+function estimateWordSize(wordLength, letterPixels, constant) {
+    return wordLength * letterPixels + constant;
+}
+function ellipse(input, length) {
+    if (input == null) {
+        return '';
+    }
+    return input.length > length ? input.substr(0, length - 1) + "\u2026" : input;
+}
+function matchAndFormatRangeLabel(formatter) {
+    return function (label) {
+        var match = /^([\d*]+)-([\d*]+)$/.exec(label);
+        if (match == null) {
+            return label;
+        }
+        return formatRange({
+            from: match[1],
+            to: match[2],
+        }, formatter !== null && formatter !== void 0 ? formatter : (function (v) { return v; }));
+    };
+}
+function formatRange(item, formatter) {
+    var _a, _b;
+    var to = item.to === '*' ? '*' : formatter(parseInt((_a = item.to) !== null && _a !== void 0 ? _a : '0', 10)), from = formatter(parseInt((_b = item.from) !== null && _b !== void 0 ? _b : '0', 10));
+    if (from === to) {
+        return "" + from;
+    }
+    return from + " - " + to;
+}
+function ellipseAndFormat(formatter, maxLabelLength) {
+    return function (value) {
+        var strValue = value.toString();
+        if (formatter == null) {
+            return ellipse(strValue, maxLabelLength);
+        }
+        return ellipse("" + formatter(strValue), maxLabelLength);
+    };
+}
+function escapeRegExp(input) {
+    // eslint-disable-next-line
+    return input.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+}
+function isMatching(text0, text1) {
+    var e_1, _a;
+    if (text0 == null || text1 == null) {
+        return false;
+    }
+    text0 = text0.toLowerCase();
+    text1 = text1.toLowerCase();
+    if (text1.match(' ') === null) {
+        return text0.match(escapeRegExp(text1)) !== null;
+    }
+    var splitNeedles = text1
+        .split(' ')
+        .filter(function (s) { return !isStringEmpty(s); })
+        .sort(function (a, b) { return b.length - a.length; });
+    try {
+        for (var splitNeedles_1 = __values(splitNeedles), splitNeedles_1_1 = splitNeedles_1.next(); !splitNeedles_1_1.done; splitNeedles_1_1 = splitNeedles_1.next()) {
+            var needle = splitNeedles_1_1.value;
+            if (text0 === needle) {
+                return true;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (splitNeedles_1_1 && !splitNeedles_1_1.done && (_a = splitNeedles_1.return)) _a.call(splitNeedles_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return false;
+}
+function splitTextInParts(needles, text) {
+    var e_2, _a;
+    if (text == null) {
+        return [];
+    }
+    if (needles.match(' ') === null) {
+        var re = new RegExp('(' + escapeRegExp(needles) + ')', 'gi');
+        return text.split(re);
+    }
+    var splitNeedles = needles
+        .split(' ')
+        .filter(function (s) { return !isStringEmpty(s); })
+        .sort(function (a, b) { return b.length - a.length; }), ret = [text];
+    try {
+        for (var splitNeedles_2 = __values(splitNeedles), splitNeedles_2_1 = splitNeedles_2.next(); !splitNeedles_2_1.done; splitNeedles_2_1 = splitNeedles_2.next()) {
+            var needle = splitNeedles_2_1.value;
+            var re = new RegExp('(' + needle + ')', 'gi');
+            for (var index = 0; index < ret.length; index++) {
+                var currentText = ret[index];
+                if (isMatching(currentText, escapeRegExp(needles))) {
+                    continue;
+                }
+                var newParts = currentText.split(re).filter(function (s) { return s !== ''; });
+                ret.splice.apply(ret, __spread([index, 1], newParts));
+            }
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (splitNeedles_2_1 && !splitNeedles_2_1.done && (_a = splitNeedles_2.return)) _a.call(splitNeedles_2);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    return ret;
+}
+
+
+/***/ }),
+
+/***/ 5654:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "z8": () => (/* binding */ findChildByComponent),
+/* harmony export */   "kV": () => (/* binding */ sortObjDesc),
+/* harmony export */   "d9": () => (/* binding */ clone),
+/* harmony export */   "vZ": () => (/* binding */ deepEqual)
+/* harmony export */ });
+/* unused harmony exports findChildrenByComponent, hasChildIconOrCheckboxComponent, scrollToTop, zip, getDebouncer, rgbToHex */
+/* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5692);
+/* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8156);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _Form_Form__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9316);
+var __read = (undefined && undefined.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+
+
+
+function findChildrenByComponent(children, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+component) {
+    var ret = [];
+    react__WEBPACK_IMPORTED_MODULE_1___default().Children.forEach(children, function (element) {
+        if ((element === null || element === void 0 ? void 0 : element.type) === component) {
+            ret.push(element);
+        }
+    });
+    return ret;
+}
+function findChildByComponent(children, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+component) {
+    var _a, _b;
+    return (_b = (_a = findChildrenByComponent(children, component)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null;
+}
+function hasChildIconOrCheckboxComponent(children) {
+    var ret = false;
+    React.Children.forEach(children, function (element) {
+        if ((element === null || element === void 0 ? void 0 : element.type) != null &&
+            ((element === null || element === void 0 ? void 0 : element.type) === FontAwesomeIcon || (element === null || element === void 0 ? void 0 : element.type) === 'i' || (element === null || element === void 0 ? void 0 : element.type) === Form.Checkbox)) {
+            ret = true;
+            return;
+        }
+    });
+    return ret;
+}
+function scrollToTop() {
+    window.scrollTo(0, 0);
+}
+function zip(arr1, arr2) {
+    var ret = [];
+    var i = 0;
+    while (arr1[i]) {
+        ret.push(arr1[i]);
+        ret.push(arr2[i++]);
+    }
+    return ret;
+}
+// eslint-disable-next-line @typescript-eslint/ban-types
+function sortObjDesc(accessor) {
+    return function (a, b) {
+        var leftVal = 0, rightVal = 0;
+        if ((a === null || a === void 0 ? void 0 : a[accessor]) != null) {
+            leftVal = a === null || a === void 0 ? void 0 : a[accessor];
+        }
+        if ((b === null || b === void 0 ? void 0 : b[accessor]) != null) {
+            rightVal = b === null || b === void 0 ? void 0 : b[accessor];
+        }
+        return leftVal > rightVal ? -1 : 1;
+    };
+}
+function clone(ob) {
+    return JSON.parse(JSON.stringify(ob));
+}
+function getDebouncer(delay) {
+    if (delay === void 0) { delay = 1; }
+    var debounceTimeout = null;
+    return function debounce(f) {
+        if (debounceTimeout !== null) {
+            clearTimeout(debounceTimeout);
+        }
+        debounceTimeout = window.setTimeout(f, delay);
+    };
+}
+function isObject(obj) {
+    return typeof obj === 'object' && obj != null;
+}
+function deepEqual(obj1, obj2) {
+    if (obj1 === obj2) {
+        return true;
+    }
+    if (isObject(obj1) && isObject(obj2)) {
+        if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+            return false;
+        }
+        for (var prop in obj1) {
+            if (!deepEqual(obj1[prop], obj2[prop])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+}
+function componentToHex(c) {
+    if (isNaN(c)) {
+        throw Error('The color has not been written correctly');
+    }
+    var hex = c.toString(16).toUpperCase();
+    return hex.length === 1 ? '0' + hex : hex;
+}
+function cleanSingleColor(c) {
+    return c.replace(/"|'/g, '').trim();
+}
+function rgbToHex(rgb) {
+    if (rgb.includes('rgba')) {
+        throw Error('not implemented');
+    }
+    var _a = __read(rgb
+        .replace('rgb', '')
+        .replace(/\(|\)/gi, '')
+        .split(',')
+        .map(function (c) { return parseInt(cleanSingleColor(c), 10); }), 3), _b = _a[0], r = _b === void 0 ? 0 : _b, _c = _a[1], g = _c === void 0 ? 0 : _c, _d = _a[2], b = _d === void 0 ? 0 : _d;
+    return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+
+
+/***/ }),
+
+/***/ 6627:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "MR": () => (/* binding */ boundMethod),
+/* harmony export */   "ZP": () => (/* binding */ autobind)
+/* harmony export */ });
+/* unused harmony export boundClass */
+/* harmony import */ var _babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4329);
+
+
+function _typeof(obj) {
+  if (typeof Symbol === "function" && (0,_babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(Symbol.iterator) === "symbol") {
+    _typeof = function _typeof(obj) {
+      return (0,_babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(obj);
+    };
+  } else {
+    _typeof = function _typeof(obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : (0,_babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(obj);
+    };
+  }
+
+  return _typeof(obj);
+}
+/**
+ * Return a descriptor removing the value and returning a getter
+ * The getter will return a .bind version of the function
+ * and memoize the result against a symbol on the instance
+ */
+
+
+function boundMethod(target, key, descriptor) {
+  var fn = descriptor.value;
+
+  if (typeof fn !== 'function') {
+    throw new TypeError("@boundMethod decorator can only be applied to methods not: ".concat(_typeof(fn)));
+  } // In IE11 calling Object.defineProperty has a side-effect of evaluating the
+  // getter for the property which is being replaced. This causes infinite
+  // recursion and an "Out of stack space" error.
+
+
+  var definingProperty = false;
+  return {
+    configurable: true,
+    get: function get() {
+      // eslint-disable-next-line no-prototype-builtins
+      if (definingProperty || this === target.prototype || this.hasOwnProperty(key) || typeof fn !== 'function') {
+        return fn;
+      }
+
+      var boundFn = fn.bind(this);
+      definingProperty = true;
+      Object.defineProperty(this, key, {
+        configurable: true,
+        get: function get() {
+          return boundFn;
+        },
+        set: function set(value) {
+          fn = value;
+          delete this[key];
+        }
+      });
+      definingProperty = false;
+      return boundFn;
+    },
+    set: function set(value) {
+      fn = value;
+    }
+  };
+}
+/**
+ * Use boundMethod to bind all methods on the target.prototype
+ */
+
+function boundClass(target) {
+  // (Using reflect to get all keys including symbols)
+  var keys; // Use Reflect if exists
+
+  if (typeof Reflect !== 'undefined' && typeof Reflect.ownKeys === 'function') {
+    keys = Reflect.ownKeys(target.prototype);
+  } else {
+    keys = Object.getOwnPropertyNames(target.prototype); // Use symbols if support is provided
+
+    if (typeof Object.getOwnPropertySymbols === 'function') {
+      keys = keys.concat(Object.getOwnPropertySymbols(target.prototype));
+    }
+  }
+
+  keys.forEach(function (key) {
+    // Ignore special case target method
+    if (key === 'constructor') {
+      return;
+    }
+
+    var descriptor = Object.getOwnPropertyDescriptor(target.prototype, key); // Only methods need binding
+
+    if (typeof descriptor.value === 'function') {
+      Object.defineProperty(target.prototype, key, boundMethod(target, key, descriptor));
+    }
+  });
+  return target;
+}
+function autobind() {
+  if (arguments.length === 1) {
+    return boundClass.apply(void 0, arguments);
+  }
+
+  return boundMethod.apply(void 0, arguments);
+}
+
+/***/ }),
+
+/***/ 1326:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__1326__;
+
+/***/ }),
+
+/***/ 5692:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__5692__;
+
+/***/ }),
+
+/***/ 7812:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__7812__;
+
+/***/ }),
+
+/***/ 8310:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__8310__;
+
+/***/ }),
+
+/***/ 8156:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__8156__;
+
+/***/ }),
+
+/***/ 5315:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__5315__;
+
+/***/ }),
+
+/***/ 4394:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__4394__;
+
+/***/ }),
+
+/***/ 8721:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__8721__;
+
+/***/ }),
+
+/***/ 1082:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__1082__;
+
+/***/ }),
+
+/***/ 8763:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__8763__;
+
+/***/ }),
+
+/***/ 6043:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__6043__;
+
+/***/ }),
+
+/***/ 3915:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__3915__;
+
+/***/ }),
+
+/***/ 4329:
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Z": () => (/* binding */ _typeof)
+/* harmony export */ });
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function _typeof(obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function _typeof(obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = __webpack_modules__;
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/chunk loaded */
+/******/ 	(() => {
+/******/ 		var deferred = [];
+/******/ 		__webpack_require__.O = (result, chunkIds, fn, priority) => {
+/******/ 			if(chunkIds) {
+/******/ 				priority = priority || 0;
+/******/ 				for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
+/******/ 				deferred[i] = [chunkIds, fn, priority];
+/******/ 				return;
+/******/ 			}
+/******/ 			var notFulfilled = Infinity;
+/******/ 			for (var i = 0; i < deferred.length; i++) {
+/******/ 				var [chunkIds, fn, priority] = deferred[i];
+/******/ 				var fulfilled = true;
+/******/ 				for (var j = 0; j < chunkIds.length; j++) {
+/******/ 					if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
+/******/ 						chunkIds.splice(j--, 1);
+/******/ 					} else {
+/******/ 						fulfilled = false;
+/******/ 						if(priority < notFulfilled) notFulfilled = priority;
+/******/ 					}
+/******/ 				}
+/******/ 				if(fulfilled) {
+/******/ 					deferred.splice(i--, 1)
+/******/ 					var r = fn();
+/******/ 					if (r !== undefined) result = r;
+/******/ 				}
+/******/ 			}
+/******/ 			return result;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/jsonp chunk loading */
+/******/ 	(() => {
+/******/ 		// no baseURI
+/******/ 		
+/******/ 		// object to store loaded and loading chunks
+/******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
+/******/ 		var installedChunks = {
+/******/ 			1022: 0,
+/******/ 			3099: 0,
+/******/ 			1338: 0,
+/******/ 			9811: 0,
+/******/ 			2823: 0,
+/******/ 			1981: 0
+/******/ 		};
+/******/ 		
+/******/ 		// no chunk on demand loading
+/******/ 		
+/******/ 		// no prefetching
+/******/ 		
+/******/ 		// no preloaded
+/******/ 		
+/******/ 		// no HMR
+/******/ 		
+/******/ 		// no HMR manifest
+/******/ 		
+/******/ 		__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
+/******/ 		
+/******/ 		// install a JSONP callback for chunk loading
+/******/ 		var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ 			var [chunkIds, moreModules, runtime] = data;
+/******/ 			// add "moreModules" to the modules object,
+/******/ 			// then flag all "chunkIds" as loaded and fire callback
+/******/ 			var moduleId, chunkId, i = 0;
+/******/ 			if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
+/******/ 				for(moduleId in moreModules) {
+/******/ 					if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ 						__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 					}
+/******/ 				}
+/******/ 				if(runtime) var result = runtime(__webpack_require__);
+/******/ 			}
+/******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ 			for(;i < chunkIds.length; i++) {
+/******/ 				chunkId = chunkIds[i];
+/******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ 					installedChunks[chunkId][0]();
+/******/ 				}
+/******/ 				installedChunks[chunkIds[i]] = 0;
+/******/ 			}
+/******/ 			return __webpack_require__.O(result);
+/******/ 		}
+/******/ 		
+/******/ 		var chunkLoadingGlobal = self["webpackChunkatoka_design_system"] = self["webpackChunkatoka_design_system"] || [];
+/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [1981], () => (__webpack_require__(4157)))
+/******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
+/******/ 	
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});
+//# sourceMappingURL=index.js.map