@spaziodati/atoka-design-system 2.0.72-beta

package/Histogram/index.js

@@ -0,0 +1,2359 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("@fortawesome/pro-light-svg-icons/faEmptySet"), require("@fortawesome/react-fontawesome"), require("@nivo/bar"), require("@nivo/tooltip"), require("classnames"), require("react"), require("react-bootstrap/Form"), require("react-bootstrap/FormControl"), require("react-bootstrap/FormText"));
+	else if(typeof define === 'function' && define.amd)
+		define("atoka-design-system", ["@fortawesome/pro-light-svg-icons/faEmptySet", "@fortawesome/react-fontawesome", "@nivo/bar", "@nivo/tooltip", "classnames", "react", "react-bootstrap/Form", "react-bootstrap/FormControl", "react-bootstrap/FormText"], factory);
+	else if(typeof exports === 'object')
+		exports["atoka-design-system"] = factory(require("@fortawesome/pro-light-svg-icons/faEmptySet"), require("@fortawesome/react-fontawesome"), require("@nivo/bar"), require("@nivo/tooltip"), require("classnames"), require("react"), require("react-bootstrap/Form"), require("react-bootstrap/FormControl"), require("react-bootstrap/FormText"));
+	else
+		root["atoka-design-system"] = factory(root["@fortawesome/pro-light-svg-icons/faEmptySet"], root["@fortawesome/react-fontawesome"], root["@nivo/bar"], root["@nivo/tooltip"], root["classnames"], root["react"], root["react-bootstrap/Form"], root["react-bootstrap/FormControl"], root["react-bootstrap/FormText"]);
+})(self, function(__WEBPACK_EXTERNAL_MODULE__3402__, __WEBPACK_EXTERNAL_MODULE__5692__, __WEBPACK_EXTERNAL_MODULE__2895__, __WEBPACK_EXTERNAL_MODULE__5521__, __WEBPACK_EXTERNAL_MODULE__8310__, __WEBPACK_EXTERNAL_MODULE__8156__, __WEBPACK_EXTERNAL_MODULE__8721__, __WEBPACK_EXTERNAL_MODULE__1082__, __WEBPACK_EXTERNAL_MODULE__8763__) {
+return /******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 5385:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "EmptyState": () => (/* reexport */ EmptyState)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "@fortawesome/react-fontawesome"
+var react_fontawesome_ = __webpack_require__(5692);
+// EXTERNAL MODULE: external "@fortawesome/pro-light-svg-icons/faEmptySet"
+var faEmptySet_ = __webpack_require__(3402);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+;// CONCATENATED MODULE: ./src/components/EmptyState/EmptyState.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 __());
+    };
+})();
+
+
+
+
+
+/**
+ * ### Overview
+ *
+ * An empty state is a predominant element the user sees on a page where there is nothing to display.
+ */
+var EmptyState = /** @class */ (function (_super) {
+    __extends(EmptyState, _super);
+    function EmptyState() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    EmptyState.prototype.render = function () {
+        return (external_react_default().createElement("div", { className: external_classnames_default()('atoka-empty-state', this.props.className) },
+            external_react_default().createElement("div", { className: 'mb-2' },
+                external_react_default().createElement(react_fontawesome_.FontAwesomeIcon, { icon: faEmptySet_.faEmptySet })),
+            this.props.children));
+    };
+    EmptyState.displayName = 'EmptyState';
+    return EmptyState;
+}((external_react_default()).PureComponent));
+
+
+;// CONCATENATED MODULE: ./src/components/EmptyState/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';
+
+
+
+/***/ }),
+
+/***/ 2141:
+/***/ (() => {
+
+// !!! Many of these types are copied from @nivo/bar and @nivo/core. !!!
+// !!! When updating nivo, make sure these are updated accordingly   !!!
+
+
+/***/ }),
+
+/***/ 4964:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "CanvasLegendConfig": () => (/* reexport */ Histogram_namespaceObject.CanvasLegendConfig),
+  "GetHistogramCanvasLegendConfig": () => (/* reexport */ Histogram_namespaceObject.GetHistogramCanvasLegendConfig),
+  "Histogram": () => (/* reexport */ Histogram),
+  "RenderHistogramSVGLegend": () => (/* reexport */ Histogram_namespaceObject.RenderHistogramSVGLegend)
+});
+
+// NAMESPACE OBJECT: ./src/components/Histogram/Histogram.tsx
+var Histogram_namespaceObject = {};
+__webpack_require__.r(Histogram_namespaceObject);
+__webpack_require__.d(Histogram_namespaceObject, {
+  "b": () => (Histogram)
+});
+
+// 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/bar"
+var bar_ = __webpack_require__(2895);
+// EXTERNAL MODULE: ./node_modules/d3-color/src/color.js + 1 modules
+var color = __webpack_require__(2766);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: external "@nivo/tooltip"
+var tooltip_ = __webpack_require__(5521);
+// EXTERNAL MODULE: ./src/components/Utils/Utils.tsx
+var Utils = __webpack_require__(5654);
+// EXTERNAL MODULE: ./src/components/Spinner/index.ts + 1 modules
+var Spinner = __webpack_require__(4482);
+// EXTERNAL MODULE: ./src/components/EmptyState/index.ts + 1 modules
+var EmptyState = __webpack_require__(5385);
+// EXTERNAL MODULE: ./src/components/Utils/Style.ts
+var Style = __webpack_require__(2755);
+// EXTERNAL MODULE: ./src/components/StatisticsTooltip/index.ts + 1 modules
+var StatisticsTooltip = __webpack_require__(8805);
+// EXTERNAL MODULE: ./src/components/Utils/Statistics.ts
+var Statistics = __webpack_require__(5258);
+// EXTERNAL MODULE: ./src/components/Utils/Text.ts
+var Text = __webpack_require__(6347);
+// EXTERNAL MODULE: ./src/components/Histogram/Types.ts
+var Types = __webpack_require__(2141);
+;// CONCATENATED MODULE: ./src/components/Histogram/Histogram.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);
+};
+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;
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// this is the multiplier we use to calculate the width of a text label (around 7.7 pixel per char)
+var MAGIC_MULTIPLIER_LEFT = 7.7;
+var MAGIC_MULTIPLIER_BOTTOM = 4.3;
+var MIN_BAR_HEIGHT_PERCENT = 0.02;
+var Histogram = /** @class */ (function (_super) {
+    __extends(Histogram, _super);
+    function Histogram() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // we use this for testing purposes
+        _this.ellipseAndFormat = Text/* ellipseAndFormat */.TK;
+        _this.matchAndFormatRangeLabel = Text/* matchAndFormatRangeLabel */.eR;
+        _this.baseLayers = ['grid', 'axes', 'bars'];
+        _this.state = {
+            data: [],
+            selectedColumns: new Set(),
+            customColors: null,
+        };
+        return _this;
+    }
+    Histogram.fromDataPointToBarDatum = function (dataPoint) {
+        return Object.keys(dataPoint).reduce(function (acc, el) {
+            var _a;
+            if (dataPoint[el] == null) {
+                return acc;
+            }
+            return __assign(__assign({}, acc), (_a = {}, _a[el] = dataPoint[el], _a));
+        }, {});
+    };
+    Object.defineProperty(Histogram.prototype, "areAllDataZero", {
+        get: function () {
+            return this.props.data.reduce(function (acc, el) { return acc + el.value; }, 0) === 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Histogram.prototype.setupComponent = function () {
+        var _a, _b, _c, _d, _e;
+        if (this.props.maxColsNumber == null &&
+            this.props.colors.length > 0 &&
+            this.props.colors.length !== this.props.data.length) {
+            throw Error('The colors.length must be of the same length as the data you give to the component');
+        }
+        if (this.props.maxColsNumber != null &&
+            this.props.colors.length > 0 &&
+            this.props.maxColsNumber !== this.props.colors.length - 1) {
+            throw Error('With a maxColsNumber prop, colors.length must be of length + 1 of the maxColsNumbert');
+        }
+        var dataState = this.prepareData(this.props.data);
+        var renderTooltip = this.wrapTooltip();
+        var children = this.props.maxColsNumber == null
+            ? dataState
+            : (0,Statistics/* createDataWithOtherSlice */.xG)(dataState !== null && dataState !== void 0 ? dataState : [], (_a = this.props) === null || _a === void 0 ? void 0 : _a.otherId, (_b = this.props) === null || _b === void 0 ? void 0 : _b.otherLabel, (_d = (_c = this.props) === null || _c === void 0 ? void 0 : _c.maxColsNumber) !== null && _d !== void 0 ? _d : Infinity, (_e = this.props) === null || _e === void 0 ? void 0 : _e.total);
+        var customColors = this.props.colors.reduce(function (acc, curr, index) {
+            var _a;
+            return (__assign(__assign({}, acc), (_a = {}, _a[children[index].id] = curr, _a)));
+        }, {});
+        if (this.props.selectedColumns == null) {
+            this.setState({ data: children, customColors: customColors, renderTooltip: renderTooltip });
+            return;
+        }
+        this.setState({
+            customColors: customColors,
+            renderTooltip: renderTooltip,
+            data: children,
+            selectedColumns: new Set(this.props.selectedColumns),
+        });
+    };
+    // with this function we hide the fact we moved into the initialValue the
+    // "original value" in order to handle the "1px bar" accordingly.
+    Histogram.prototype.wrapTooltip = function () {
+        var _this = this;
+        var tooltipFunction = this.props.renderTooltip === undefined
+            ? (0,StatisticsTooltip.getRenderStatisticsTooltip)({
+                tooltipDataLabelKey: 'value',
+                tooltipDataTitleKey: 'id',
+                otherId: this.props.otherId,
+                otherLabel: this.props.otherLabel,
+                // {vrut} wrapping into a function since the valueFormat is slightly different.
+                numberToStringFormatter: function (value) { var _a, _b, _c; return "" + ((_c = (_b = (_a = _this.props).tooltipValueFormat) === null || _b === void 0 ? void 0 : _b.call(_a, value)) !== null && _c !== void 0 ? _c : value); },
+                withColor: false,
+            })
+            : this.props.renderTooltip;
+        if (tooltipFunction == null) {
+            return null;
+        }
+        // return a function which will be called by the tooltip component with the original data.
+        return function (tooltipData) {
+            var _a, _b;
+            return ((_b = tooltipFunction === null || tooltipFunction === void 0 ? void 0 : tooltipFunction(__assign(__assign({}, tooltipData), { data: __assign(__assign({}, tooltipData.data), { value: (_a = tooltipData.data.initialValue) !== null && _a !== void 0 ? _a : 0 }) }))) !== null && _b !== void 0 ? _b : null);
+        };
+    };
+    Histogram.prototype.prepareData = function (data) {
+        var _this = this;
+        data = data !== null && data !== void 0 ? data : [];
+        // extract the max value from data and compute the 1% of it in order to get the replacing for zero values
+        var maxValue = -Infinity, minValue = 0;
+        data.forEach(function (el) {
+            maxValue = Math.max(maxValue, el.value);
+            minValue = Math.min(minValue, el.value);
+        });
+        if (maxValue === 0 && minValue === 0) {
+            // we need a fake value in order to have Nivo render the chart,
+            // we then resize the bars in the renderEmptyBars function
+            maxValue = 10;
+        }
+        var zeroReplacing = this.computeZeroReplacingValue(Math.abs(maxValue - minValue));
+        return data.map(function (dataPoint) {
+            var id = _this.idFormatWrapper(dataPoint.label);
+            var value = dataPoint.value;
+            if (value >= 0) {
+                value = Math.max(value, zeroReplacing);
+            }
+            else {
+                value = Math.min(value, -zeroReplacing);
+            }
+            return __assign(__assign({}, Histogram.fromDataPointToBarDatum(dataPoint)), { id: id,
+                value: value, label: id, initialLabel: dataPoint.label, initialValue: dataPoint.value });
+        });
+    };
+    Histogram.prototype.idFormatWrapper = function (label) {
+        if (this.props.labelFormat == null) {
+            return label;
+        }
+        return this.matchAndFormatRangeLabel(this.props.labelFormat)(label);
+    };
+    Histogram.prototype.componentDidUpdate = function (prevProps) {
+        if ((0,Utils/* deepEqual */.vZ)(prevProps, this.props)) {
+            return;
+        }
+        this.setupComponent();
+    };
+    Histogram.prototype.componentDidMount = function () {
+        this.setupComponent();
+    };
+    Histogram.prototype.handleClick = function (data) {
+        var _a;
+        if (!this.isClickable()) {
+            return;
+        }
+        var selectedColumns = this.state.selectedColumns, newSelectedColumns = new Set(selectedColumns);
+        if (selectedColumns.has(data.indexValue)) {
+            newSelectedColumns.delete(data.indexValue);
+        }
+        else {
+            newSelectedColumns.add(data.indexValue);
+        }
+        if (this.props.onClick != null) {
+            var selectedData_1 = [];
+            ((_a = this.state.data) !== null && _a !== void 0 ? _a : []).forEach(function (d) {
+                var _a;
+                if (newSelectedColumns.has(d.label)) {
+                    // we need to handle the case when a formatter has been used and return the original label
+                    var labelFromProps = (_a = d.initialLabel) !== null && _a !== void 0 ? _a : d.label;
+                    selectedData_1.push({ value: d.value, label: labelFromProps });
+                }
+            });
+            this.props.onClick(selectedData_1);
+        }
+        this.setState({ selectedColumns: newSelectedColumns });
+    };
+    Histogram.prototype.handleMouseEnter = function (data, event) {
+        var _a, _b, _c;
+        if (!this.props.isHoverable) {
+            return;
+        }
+        var customColor = (_a = this.state.customColors) === null || _a === void 0 ? void 0 : _a[data.indexValue], fill = Style/* blue400 */.ZM;
+        if (customColor != null) {
+            fill = (_c = (_b = (0,color/* default */.ZP)(customColor)) === null || _b === void 0 ? void 0 : _b.darker(1).formatHex()) !== null && _c !== void 0 ? _c : customColor;
+        }
+        event.target.setAttribute('fill', fill);
+    };
+    Histogram.prototype.handleMouseLeave = function (data, event) {
+        if (!this.props.isHoverable) {
+            return;
+        }
+        event.target.setAttribute('fill', this.getColors(data));
+    };
+    Histogram.prototype.getColors = function (data) {
+        var _a, _b;
+        var defaultColor = Style/* blue100 */.qi, disabledColor = Style/* gray200 */.pN, isClickable = this.isClickable(), unselectedColor = Style/* blue30 */.KH, customColor = (_a = this.state.customColors) === null || _a === void 0 ? void 0 : _a[data.indexValue];
+        if (this.state.selectedColumns.size === 0) {
+            return customColor !== null && customColor !== void 0 ? customColor : defaultColor;
+        }
+        if (this.state.selectedColumns.has(data.indexValue) ||
+            this.state.selectedColumns.has((_b = data.data) === null || _b === void 0 ? void 0 : _b.initialLabel)) {
+            return customColor !== null && customColor !== void 0 ? customColor : defaultColor;
+        }
+        if (!isClickable) {
+            return disabledColor;
+        }
+        return unselectedColor;
+    };
+    Histogram.prototype.isClickable = function () {
+        return this.props.selectedColumns == null && this.props.isClickable;
+    };
+    Histogram.prototype.renderIsLoading = function () {
+        if (!this.props.isLoading) {
+            return null;
+        }
+        return (0,Utils/* findChildByComponent */.z8)(this.props.children, Spinner.Spinner);
+    };
+    Histogram.prototype.renderIsEmpty = function () {
+        if (!this.props.isEmpty) {
+            return null;
+        }
+        return (0,Utils/* findChildByComponent */.z8)(this.props.children, EmptyState.EmptyState);
+    };
+    Histogram.prototype.getEmptyAxis = function () {
+        if (this.props.layout === 'vertical') {
+            return { tickValues: [], tickSize: 0 };
+        }
+        return { tickValues: [] };
+    };
+    Histogram.prototype.getDefaultBottomAxis = function () {
+        var commonProps = {
+            tickRotation: -45,
+            tickSize: 0,
+        };
+        if (this.props.layout === 'vertical') {
+            return __assign(__assign({}, commonProps), { format: this.ellipseAndFormat(this.matchAndFormatRangeLabel(this.props.labelFormat), this.props.maxLabelLength) });
+        }
+        return __assign(__assign({}, commonProps), { format: this.ellipseAndFormat(this.props.valueFormat, this.props.maxLabelLength), tickValues: this.props.gridXValues });
+    };
+    Histogram.prototype.getDefaultLeftAxis = function () {
+        if (this.props.layout === 'vertical') {
+            return {
+                format: this.ellipseAndFormat(this.props.valueFormat, this.props.maxLabelLength),
+                tickSize: 0,
+                tickValues: this.props.gridYValues,
+            };
+        }
+        return {
+            format: this.ellipseAndFormat(this.matchAndFormatRangeLabel(this.props.labelFormat), this.props.maxLabelLength),
+        };
+    };
+    // {vrut}: this is far from perfection, but it's a start
+    Histogram.prototype.getMargin = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        // {vrut}: margin must be cloned!
+        var margin = __assign({}, this.props.margin), _j = __assign({}, Histogram.defaultProps.margin), top = _j.top, right = _j.right, bottom = _j.bottom, left = _j.left;
+        // we want the user to be able to add a margin even if the 'computeMargin' is true.
+        margin.bottom = (_a = margin.bottom) !== null && _a !== void 0 ? _a : 0;
+        margin.left = (_b = margin.left) !== null && _b !== void 0 ? _b : 0;
+        var key = 'value', multiplier = 1, enableAxis = this.props.enableAxisLeft, axisFormatter = this.getDefaultLeftAxis().format;
+        // {vrut} horizontal have a different margin and key
+        if (this.props.layout === 'horizontal') {
+            key = 'label';
+            multiplier = 1.2;
+            enableAxis = this.props.enableAxisBottom;
+            axisFormatter = this.getDefaultBottomAxis().format;
+        }
+        if (this.props.computeMargin && enableAxis) {
+            var maxLen_1 = 0, maxValue_1 = 0;
+            (_c = this.props.data) === null || _c === void 0 ? void 0 : _c.forEach(function (data) {
+                var _a, _b;
+                var value = typeof data[key] === 'string' ? data[key] : String(data[key]), currentLength = typeof axisFormatter === 'string'
+                    ? value.length
+                    : (_b = (_a = axisFormatter === null || axisFormatter === void 0 ? void 0 : axisFormatter(value)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : value.length;
+                maxLen_1 = Math.max(currentLength, maxLen_1);
+                maxValue_1 = Math.max(Math.abs(data.value), maxValue_1);
+            });
+            // we should fix this. We use the max value to compute the margin but we should use the length
+            // of the computed labels: For example, values = [1, 2, 3, 4] could generate a legend like this:
+            // [1, 1.5, 2, 2.5, 3, 3.5, 4] so the lenght should be 3, not 1!!!
+            var extraMargin = maxValue_1 < 1000 ? 10 : 0;
+            if (this.props.layout === 'horizontal') {
+                margin.bottom +=
+                    extraMargin + Math.min(maxLen_1, this.props.maxLabelLength) * MAGIC_MULTIPLIER_BOTTOM * multiplier;
+            }
+            else {
+                margin.left +=
+                    extraMargin + Math.min(maxLen_1, this.props.maxLabelLength) * MAGIC_MULTIPLIER_LEFT * multiplier;
+            }
+        }
+        return {
+            top: (_d = margin.top) !== null && _d !== void 0 ? _d : top,
+            right: (_e = margin.right) !== null && _e !== void 0 ? _e : right,
+            bottom: (_g = (_f = margin.bottom) !== null && _f !== void 0 ? _f : bottom) !== null && _g !== void 0 ? _g : 0,
+            left: (_h = margin.left) !== null && _h !== void 0 ? _h : left,
+        };
+    };
+    Histogram.prototype.buildCanvasLegend = function (context, props) {
+        if (this.props.getCanvasLegendConfig == null) {
+            return;
+        }
+        var _a = this.props.getCanvasLegendConfig(props), _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.data, data = _d === void 0 ? [] : _d, textMetrics = [0], wordSpacing = 10;
+        data.forEach(function (item, i) {
+            var margin = i * wordSpacing;
+            context.fillStyle = Style/* gray400 */.de;
+            var labelX = x + margin + textMetrics[i];
+            context.fillText(item.label, labelX, y);
+            var labelTextMetrics = context.measureText(item.label), valueX = labelX + labelTextMetrics.width + wordSpacing;
+            context.fillStyle = Style/* black */.Sn;
+            context.font = 'bold';
+            context.fillText("" + item.value, valueX, y);
+            var valueTextMetrics = context.measureText("" + item.value);
+            textMetrics.push(valueX + valueTextMetrics.width);
+        });
+    };
+    Histogram.prototype.computeZeroReplacingValue = function (value, percentage) {
+        if (percentage === void 0) { percentage = MIN_BAR_HEIGHT_PERCENT; }
+        return value * percentage;
+    };
+    Histogram.prototype.renderEmptyParts = function (params) {
+        var _a, _b;
+        // {vrut} this is a bit of a hack, but Nivo sends the computed bars in params.
+        // At this point, it has computed the positions according to the margins and size of the chart,
+        // but at this point the bar.height is the 100% of the height, since all the data are empty.
+        // So we just need to resize the height to the 1% as we do for the rest of close-to-zero data.
+        var renderedBars = (_b = (_a = params === null || params === void 0 ? void 0 : params.bars) === null || _a === void 0 ? void 0 : _a.map(this.renderEmptyPart(params))) !== null && _b !== void 0 ? _b : [];
+        if (renderedBars.length === 0) {
+            return null;
+        }
+        return external_react_default().createElement("g", null, renderedBars);
+    };
+    Histogram.prototype.renderEmptyPart = function (params) {
+        var _this = this;
+        return function (bar, key) {
+            var _a;
+            // {vrut} you may want to check the BarItem in order to understand this mess.
+            // https://github.com/plouc/nivo/blob/master/packages/bar/src/BarItem.tsx
+            // One may just want to use the BarItem but hey, you know what? It's not that easy to understand.
+            var _b = (0,tooltip_.useTooltip)(), showTooltipFromEvent = _b.showTooltipFromEvent, hideTooltip = _b.hideTooltip, tooltipProps = __assign(__assign(__assign({}, bar), bar.data), { value: (_a = bar.data.value) !== null && _a !== void 0 ? _a : 0 }), renderTooltip = (0,external_react_.useMemo)(function () { return function () { return (0,external_react_.createElement)(params.tooltip, tooltipProps); }; }, [params.tooltip, bar, bar.data]), handleTooltip = (0,external_react_.useCallback)(function (event) { return showTooltipFromEvent(renderTooltip(), event); }, [showTooltipFromEvent, renderTooltip]), handleMouseEnter = (0,external_react_.useCallback)(function (event) {
+                var _a;
+                (_a = params.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(params, bar.data, event);
+                showTooltipFromEvent(renderTooltip(), event);
+            }, [bar.data, params.onMouseEnter, showTooltipFromEvent, renderTooltip]), handleMouseLeave = (0,external_react_.useCallback)(function (event) {
+                var _a;
+                (_a = params.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(params, bar.data, event);
+                hideTooltip();
+            }, [bar.data, hideTooltip, params.onMouseLeave]);
+            return (external_react_default().createElement("g", { key: key, transform: "translate(" + bar.x + ", " + (bar.y + bar.height) + ")" },
+                external_react_default().createElement("rect", { width: bar.width, height: Math.max(_this.computeZeroReplacingValue(bar.height), 2), rx: '0', ry: '0', fill: Style/* blue100 */.qi, strokeWidth: '0', stroke: Style/* blue100 */.qi, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleTooltip })));
+        };
+    };
+    Histogram.prototype.getLayers = function () {
+        var layers = this.areAllDataZero ? [this.renderEmptyParts] : __spread(this.baseLayers);
+        if (this.props.renderSVGLegend != null) {
+            layers.push(this.props.renderSVGLegend);
+        }
+        return layers;
+    };
+    Histogram.prototype.getCanvasLayers = function () {
+        var layers = __spread(this.baseLayers);
+        if (this.props.getCanvasLegendConfig != null) {
+            layers.push(this.buildCanvasLegend);
+        }
+        return layers;
+    };
+    Histogram.prototype.renderContent = function () {
+        var _a, _b;
+        if (this.props.isEmpty || this.props.isLoading) {
+            return null;
+        }
+        var _c = this.props, enableAxisBottom = _c.enableAxisBottom, enableAxisLeft = _c.enableAxisLeft, layout = _c.layout, padding = _c.padding, enableGridY = _c.enableGridY, enableGridX = _c.enableGridX, gridYValues = _c.gridYValues, gridXValues = _c.gridXValues, axisBottom = enableAxisBottom ? this.getDefaultBottomAxis() : this.getEmptyAxis(), axisLeft = enableAxisLeft ? this.getDefaultLeftAxis() : this.getEmptyAxis(), hasTooltip = this.state.renderTooltip !== null, barProps = {
+            padding: padding,
+            layout: layout,
+            gridXValues: gridXValues,
+            gridYValues: gridYValues,
+            margin: this.getMargin(),
+            theme: {
+                textColor: Style/* gray400 */.de,
+            },
+            isInteractive: this.isClickable() || hasTooltip,
+            indexBy: 'id',
+            tooltip: (_a = this.state.renderTooltip) !== null && _a !== void 0 ? _a : undefined,
+            colors: this.getColors,
+            enableGridY: this.props.layout === 'vertical' ? enableGridY : false,
+            enableGridX: this.props.layout === 'horizontal' ? enableGridX : false,
+            enableLabel: false,
+        }, data = this.state.data;
+        if (this.props.isCanvas) {
+            var size = (_b = this.props.size) !== null && _b !== void 0 ? _b : Histogram.defaultProps.size;
+            barProps.theme = __assign(__assign({}, barProps.theme), { background: '#fff' });
+            return (external_react_default().createElement(bar_.ResponsiveBarCanvas, __assign({}, barProps, size, { data: data, layers: this.getCanvasLayers(), axisLeft: axisLeft, axisBottom: axisBottom })));
+        }
+        return (external_react_default().createElement(bar_.ResponsiveBar, __assign({}, barProps, { layers: this.getLayers(), axisLeft: axisLeft, axisBottom: axisBottom, data: data, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave })));
+    };
+    Histogram.prototype.render = function () {
+        var className = external_classnames_default()('histogram-container', 'd-flex', 'justify-content-center', 'align-items-center', {
+            clickable: this.isClickable(),
+        });
+        return (external_react_default().createElement("div", { id: this.props.id, className: className, ref: this.props.chartRef },
+            this.renderIsLoading(),
+            this.renderIsEmpty(),
+            this.renderContent()));
+    };
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    Histogram.displayName = 'Histogram';
+    Histogram.legendHeight = 20;
+    Histogram.defaultProps = {
+        computeMargin: true,
+        enableGridY: true,
+        enableGridX: true,
+        enableAxisLeft: true,
+        enableAxisBottom: true,
+        size: {
+            height: 400,
+        },
+        isEmpty: false,
+        isLoading: false,
+        isHoverable: false,
+        isClickable: true,
+        layout: 'vertical',
+        margin: { top: 30, right: 0, bottom: 30, left: 0 },
+        padding: 0.05,
+        maxLabelLength: 12,
+        id: '',
+        colors: [],
+        otherId: 'other',
+        gridXValues: 6,
+        gridYValues: 6,
+    };
+    __decorate([
+        esm/* boundMethod */.MR,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_a = typeof Types.BarTooltipDatum !== "undefined" && Types.BarTooltipDatum) === "function" ? _a : Object]),
+        __metadata("design:returntype", void 0)
+    ], Histogram.prototype, "handleClick", null);
+    __decorate([
+        esm/* boundMethod */.MR,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_b = typeof bar_.ComputedDatum !== "undefined" && bar_.ComputedDatum) === "function" ? _b : Object, typeof (_c = typeof (external_react_default()) !== "undefined" && (external_react_default()).MouseEvent) === "function" ? _c : Object]),
+        __metadata("design:returntype", void 0)
+    ], Histogram.prototype, "handleMouseEnter", null);
+    __decorate([
+        esm/* boundMethod */.MR,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_d = typeof bar_.ComputedDatum !== "undefined" && bar_.ComputedDatum) === "function" ? _d : Object, typeof (_e = typeof (external_react_default()) !== "undefined" && (external_react_default()).MouseEvent) === "function" ? _e : Object]),
+        __metadata("design:returntype", void 0)
+    ], Histogram.prototype, "handleMouseLeave", null);
+    __decorate([
+        esm/* boundMethod */.MR,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_f = typeof bar_.ComputedDatum !== "undefined" && bar_.ComputedDatum) === "function" ? _f : Object]),
+        __metadata("design:returntype", String)
+    ], Histogram.prototype, "getColors", null);
+    __decorate([
+        esm/* boundMethod */.MR,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_g = typeof CanvasRenderingContext2D !== "undefined" && CanvasRenderingContext2D) === "function" ? _g : Object, typeof (_h = typeof bar_.BarCustomLayerProps !== "undefined" && bar_.BarCustomLayerProps) === "function" ? _h : Object]),
+        __metadata("design:returntype", void 0)
+    ], Histogram.prototype, "buildCanvasLegend", null);
+    __decorate([
+        esm/* boundMethod */.MR,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_j = typeof bar_.BarCustomLayerProps !== "undefined" && bar_.BarCustomLayerProps) === "function" ? _j : Object]),
+        __metadata("design:returntype", Object)
+    ], Histogram.prototype, "renderEmptyParts", null);
+    __decorate([
+        esm/* boundMethod */.MR,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [typeof (_l = typeof bar_.BarCustomLayerProps !== "undefined" && bar_.BarCustomLayerProps) === "function" ? _l : Object]),
+        __metadata("design:returntype", Function)
+    ], Histogram.prototype, "renderEmptyPart", null);
+    return Histogram;
+}((external_react_default()).Component));
+
+
+;// CONCATENATED MODULE: ./src/components/Histogram/index.ts
+
+
+
+/***/ }),
+
+/***/ 4482:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Spinner": () => (/* reexport */ Spinner)
+});
+
+// UNUSED EXPORTS: SpinnerSize
+
+// 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_);
+;// CONCATENATED MODULE: ./src/components/Spinner/Spinner.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 SpinnerSize;
+(function (SpinnerSize) {
+    SpinnerSize[SpinnerSize["mini"] = 0] = "mini";
+    SpinnerSize[SpinnerSize["small"] = 1] = "small";
+    SpinnerSize[SpinnerSize["big"] = 2] = "big";
+    SpinnerSize[SpinnerSize["modal"] = 3] = "modal";
+})(SpinnerSize || (SpinnerSize = {}));
+/**
+ * ### Overview
+ *
+ * We can find two different spinners in the Atoka interface, small and big. The **small** one is used to show that a specific section inside the page is loading. The **big** spinner on the other hand shows when the whole page is loading.
+ *
+ * ### Best practice
+ *
+ * Use the spinner if the waiting time is between 0.1 and 1 second. After one second, the user gets the impression that the app is slow: in that case, use a progress indicator instead.
+ **/
+var Spinner = /** @class */ (function (_super) {
+    __extends(Spinner, _super);
+    function Spinner() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Spinner.prototype.renderOnlyDotsSpinner = function (size) {
+        var className = 'atoka-spinner spinner-' + size + ' ' + this.props.className;
+        return (external_react_default().createElement("div", { className: className },
+            external_react_default().createElement("div", { className: 'spinner-dot1' },
+                external_react_default().createElement("div", { className: 'spinner-leaf' })),
+            external_react_default().createElement("div", { className: 'spinner-dot2' },
+                external_react_default().createElement("div", { className: 'spinner-leaf' })),
+            external_react_default().createElement("div", { className: 'spinner-dot3' },
+                external_react_default().createElement("div", { className: 'spinner-leaf' }))));
+    };
+    Spinner.prototype.renderSmall = function () {
+        return this.renderOnlyDotsSpinner('small');
+    };
+    Spinner.prototype.renderMini = function () {
+        return this.renderOnlyDotsSpinner('mini');
+    };
+    Spinner.prototype.renderLeaf = function () {
+        return (external_react_default().createElement("svg", { viewBox: '0 0 204.01 190.64', version: '1.1', xmlns: 'http://www.w3.org/2000/svg' },
+            external_react_default().createElement("g", { id: 'leaf' },
+                external_react_default().createElement("path", { d: 'M80.88,7.62a26,26,0,0,0-36.79,36.8,25.85,25.85,0,0,0,13.4,7.14V83.39c1.19,0,2.4-.08,3.62-.08,2.16,0,4.28.08,6.38.23v-32A26,26,0,0,0,80.88,7.62ZM73.81,37.35a16,16,0,1,1,0-22.66,15.92,15.92,0,0,1,0,22.66Z' }))));
+    };
+    Spinner.prototype.renderLetter = function () {
+        return (external_react_default().createElement("svg", { viewBox: '0 0 204.01 190.64', version: '1.1', xmlns: 'http://www.w3.org/2000/svg' },
+            external_react_default().createElement("g", { id: 'logo-vector' },
+                external_react_default().createElement("path", { d: 'M110.77,180.67V140.16a50.47,50.47,0,1,0-22,41.71L93.12,187a10,10,0,0,0,17.65-6.34Zm-81-40.51a30.5,30.5,0,1,1,30.5,30.5,30.49,30.49,0,0,1-30.5-30.5Z' }))));
+    };
+    Spinner.prototype.renderBig = function () {
+        var spinnerClassName = external_classnames_default()(this.props.className, {
+            'atoka-spinner': true,
+            'spinner-big': this.props.size === SpinnerSize.big,
+            'spinner-medium': this.props.size === SpinnerSize.modal,
+        }), containerClassName = external_classnames_default()({
+            'container-fluid spinner-modal': this.props.size === SpinnerSize.modal,
+        });
+        return (external_react_default().createElement("div", { className: containerClassName },
+            external_react_default().createElement("div", { className: spinnerClassName },
+                external_react_default().createElement("div", { className: 'spinner-dot1' },
+                    external_react_default().createElement("div", { className: 'spinner-leaf' }, this.renderLeaf())),
+                external_react_default().createElement("div", { className: 'spinner-dot2' },
+                    external_react_default().createElement("div", { className: 'spinner-leaf' }, this.renderLeaf())),
+                external_react_default().createElement("div", { className: 'spinner-dot3' },
+                    external_react_default().createElement("div", { className: 'spinner-leaf' }, this.renderLeaf())),
+                external_react_default().createElement("span", { className: 'spinner-letter' }, this.renderLetter()))));
+    };
+    Spinner.prototype.render = function () {
+        switch (this.props.size) {
+            case SpinnerSize.mini:
+                return this.renderMini();
+            case SpinnerSize.small:
+                return this.renderSmall();
+            case SpinnerSize.big:
+            case SpinnerSize.modal:
+                return this.renderBig();
+            default:
+                return null;
+        }
+    };
+    Spinner.displayName = 'Spinner';
+    Spinner.defaultProps = {
+        size: SpinnerSize.small,
+        className: '',
+    };
+    return Spinner;
+}((external_react_default()).Component));
+
+
+;// CONCATENATED MODULE: ./src/components/Spinner/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
+
+
+
+
+/***/ }),
+
+/***/ 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 */   "qi": () => (/* binding */ blue100),
+/* harmony export */   "pN": () => (/* binding */ gray200),
+/* harmony export */   "ZM": () => (/* binding */ blue400),
+/* harmony export */   "de": () => (/* binding */ gray400),
+/* harmony export */   "Sn": () => (/* binding */ black)
+/* harmony export */ });
+/* unused harmony exports calculateDomain, generateRangeColor, white, blue25, blue50, blue80, blue90, blue95, blue300, yellow, orange, red, green, gray100, gray300, purple, viola, pink100, pink200, salmon */
+
+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 */   "eR": () => (/* binding */ matchAndFormatRangeLabel),
+/* harmony export */   "TK": () => (/* binding */ ellipseAndFormat)
+/* harmony export */ });
+/* unused harmony exports isStringEmpty, slugify, estimateWordSize, ellipse, formatRange, 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 */ });
+/* unused harmony exports boundClass, default */
+/* 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);
+}
+
+/***/ }),
+
+/***/ 2766:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "ZP": () => (/* binding */ color)
+});
+
+// UNUSED EXPORTS: Color, Rgb, brighter, darker, hsl, hslConvert, rgb, rgbConvert
+
+;// CONCATENATED MODULE: ./node_modules/d3-color/src/define.js
+/* harmony default export */ function src_define(constructor, factory, prototype) {
+  constructor.prototype = factory.prototype = prototype;
+  prototype.constructor = constructor;
+}
+function extend(parent, definition) {
+  var prototype = Object.create(parent.prototype);
+
+  for (var key in definition) {
+    prototype[key] = definition[key];
+  }
+
+  return prototype;
+}
+;// CONCATENATED MODULE: ./node_modules/d3-color/src/color.js
+
+function Color() {}
+var _darker = 0.7;
+
+
+var _brighter = 1 / _darker;
+
+
+var reI = "\\s*([+-]?\\d+)\\s*",
+    reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
+    reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
+    reHex = /^#([0-9a-f]{3,8})$/,
+    reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$"),
+    reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$"),
+    reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$"),
+    reRgbaPercent = new RegExp("^rgba\\(" + [reP, reP, reP, reN] + "\\)$"),
+    reHslPercent = new RegExp("^hsl\\(" + [reN, reP, reP] + "\\)$"),
+    reHslaPercent = new RegExp("^hsla\\(" + [reN, reP, reP, reN] + "\\)$");
+var named = {
+  aliceblue: 0xf0f8ff,
+  antiquewhite: 0xfaebd7,
+  aqua: 0x00ffff,
+  aquamarine: 0x7fffd4,
+  azure: 0xf0ffff,
+  beige: 0xf5f5dc,
+  bisque: 0xffe4c4,
+  black: 0x000000,
+  blanchedalmond: 0xffebcd,
+  blue: 0x0000ff,
+  blueviolet: 0x8a2be2,
+  brown: 0xa52a2a,
+  burlywood: 0xdeb887,
+  cadetblue: 0x5f9ea0,
+  chartreuse: 0x7fff00,
+  chocolate: 0xd2691e,
+  coral: 0xff7f50,
+  cornflowerblue: 0x6495ed,
+  cornsilk: 0xfff8dc,
+  crimson: 0xdc143c,
+  cyan: 0x00ffff,
+  darkblue: 0x00008b,
+  darkcyan: 0x008b8b,
+  darkgoldenrod: 0xb8860b,
+  darkgray: 0xa9a9a9,
+  darkgreen: 0x006400,
+  darkgrey: 0xa9a9a9,
+  darkkhaki: 0xbdb76b,
+  darkmagenta: 0x8b008b,
+  darkolivegreen: 0x556b2f,
+  darkorange: 0xff8c00,
+  darkorchid: 0x9932cc,
+  darkred: 0x8b0000,
+  darksalmon: 0xe9967a,
+  darkseagreen: 0x8fbc8f,
+  darkslateblue: 0x483d8b,
+  darkslategray: 0x2f4f4f,
+  darkslategrey: 0x2f4f4f,
+  darkturquoise: 0x00ced1,
+  darkviolet: 0x9400d3,
+  deeppink: 0xff1493,
+  deepskyblue: 0x00bfff,
+  dimgray: 0x696969,
+  dimgrey: 0x696969,
+  dodgerblue: 0x1e90ff,
+  firebrick: 0xb22222,
+  floralwhite: 0xfffaf0,
+  forestgreen: 0x228b22,
+  fuchsia: 0xff00ff,
+  gainsboro: 0xdcdcdc,
+  ghostwhite: 0xf8f8ff,
+  gold: 0xffd700,
+  goldenrod: 0xdaa520,
+  gray: 0x808080,
+  green: 0x008000,
+  greenyellow: 0xadff2f,
+  grey: 0x808080,
+  honeydew: 0xf0fff0,
+  hotpink: 0xff69b4,
+  indianred: 0xcd5c5c,
+  indigo: 0x4b0082,
+  ivory: 0xfffff0,
+  khaki: 0xf0e68c,
+  lavender: 0xe6e6fa,
+  lavenderblush: 0xfff0f5,
+  lawngreen: 0x7cfc00,
+  lemonchiffon: 0xfffacd,
+  lightblue: 0xadd8e6,
+  lightcoral: 0xf08080,
+  lightcyan: 0xe0ffff,
+  lightgoldenrodyellow: 0xfafad2,
+  lightgray: 0xd3d3d3,
+  lightgreen: 0x90ee90,
+  lightgrey: 0xd3d3d3,
+  lightpink: 0xffb6c1,
+  lightsalmon: 0xffa07a,
+  lightseagreen: 0x20b2aa,
+  lightskyblue: 0x87cefa,
+  lightslategray: 0x778899,
+  lightslategrey: 0x778899,
+  lightsteelblue: 0xb0c4de,
+  lightyellow: 0xffffe0,
+  lime: 0x00ff00,
+  limegreen: 0x32cd32,
+  linen: 0xfaf0e6,
+  magenta: 0xff00ff,
+  maroon: 0x800000,
+  mediumaquamarine: 0x66cdaa,
+  mediumblue: 0x0000cd,
+  mediumorchid: 0xba55d3,
+  mediumpurple: 0x9370db,
+  mediumseagreen: 0x3cb371,
+  mediumslateblue: 0x7b68ee,
+  mediumspringgreen: 0x00fa9a,
+  mediumturquoise: 0x48d1cc,
+  mediumvioletred: 0xc71585,
+  midnightblue: 0x191970,
+  mintcream: 0xf5fffa,
+  mistyrose: 0xffe4e1,
+  moccasin: 0xffe4b5,
+  navajowhite: 0xffdead,
+  navy: 0x000080,
+  oldlace: 0xfdf5e6,
+  olive: 0x808000,
+  olivedrab: 0x6b8e23,
+  orange: 0xffa500,
+  orangered: 0xff4500,
+  orchid: 0xda70d6,
+  palegoldenrod: 0xeee8aa,
+  palegreen: 0x98fb98,
+  paleturquoise: 0xafeeee,
+  palevioletred: 0xdb7093,
+  papayawhip: 0xffefd5,
+  peachpuff: 0xffdab9,
+  peru: 0xcd853f,
+  pink: 0xffc0cb,
+  plum: 0xdda0dd,
+  powderblue: 0xb0e0e6,
+  purple: 0x800080,
+  rebeccapurple: 0x663399,
+  red: 0xff0000,
+  rosybrown: 0xbc8f8f,
+  royalblue: 0x4169e1,
+  saddlebrown: 0x8b4513,
+  salmon: 0xfa8072,
+  sandybrown: 0xf4a460,
+  seagreen: 0x2e8b57,
+  seashell: 0xfff5ee,
+  sienna: 0xa0522d,
+  silver: 0xc0c0c0,
+  skyblue: 0x87ceeb,
+  slateblue: 0x6a5acd,
+  slategray: 0x708090,
+  slategrey: 0x708090,
+  snow: 0xfffafa,
+  springgreen: 0x00ff7f,
+  steelblue: 0x4682b4,
+  tan: 0xd2b48c,
+  teal: 0x008080,
+  thistle: 0xd8bfd8,
+  tomato: 0xff6347,
+  turquoise: 0x40e0d0,
+  violet: 0xee82ee,
+  wheat: 0xf5deb3,
+  white: 0xffffff,
+  whitesmoke: 0xf5f5f5,
+  yellow: 0xffff00,
+  yellowgreen: 0x9acd32
+};
+src_define(Color, color, {
+  copy: function copy(channels) {
+    return Object.assign(new this.constructor(), this, channels);
+  },
+  displayable: function displayable() {
+    return this.rgb().displayable();
+  },
+  hex: color_formatHex,
+  // Deprecated! Use color.formatHex.
+  formatHex: color_formatHex,
+  formatHsl: color_formatHsl,
+  formatRgb: color_formatRgb,
+  toString: color_formatRgb
+});
+
+function color_formatHex() {
+  return this.rgb().formatHex();
+}
+
+function color_formatHsl() {
+  return hslConvert(this).formatHsl();
+}
+
+function color_formatRgb() {
+  return this.rgb().formatRgb();
+}
+
+function color(format) {
+  var m, l;
+  format = (format + "").trim().toLowerCase();
+  return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000
+  : l === 3 ? new Rgb(m >> 8 & 0xf | m >> 4 & 0xf0, m >> 4 & 0xf | m & 0xf0, (m & 0xf) << 4 | m & 0xf, 1) // #f00
+  : l === 8 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
+  : l === 4 ? rgba(m >> 12 & 0xf | m >> 8 & 0xf0, m >> 8 & 0xf | m >> 4 & 0xf0, m >> 4 & 0xf | m & 0xf0, ((m & 0xf) << 4 | m & 0xf) / 0xff) // #f000
+  : null // invalid hex
+  ) : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
+  : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
+  : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
+  : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
+  : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
+  : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
+  : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
+  : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0) : null;
+}
+
+function rgbn(n) {
+  return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
+}
+
+function rgba(r, g, b, a) {
+  if (a <= 0) r = g = b = NaN;
+  return new Rgb(r, g, b, a);
+}
+
+function rgbConvert(o) {
+  if (!(o instanceof Color)) o = color(o);
+  if (!o) return new Rgb();
+  o = o.rgb();
+  return new Rgb(o.r, o.g, o.b, o.opacity);
+}
+function rgb(r, g, b, opacity) {
+  return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
+}
+function Rgb(r, g, b, opacity) {
+  this.r = +r;
+  this.g = +g;
+  this.b = +b;
+  this.opacity = +opacity;
+}
+src_define(Rgb, rgb, extend(Color, {
+  brighter: function brighter(k) {
+    k = k == null ? _brighter : Math.pow(_brighter, k);
+    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+  },
+  darker: function darker(k) {
+    k = k == null ? _darker : Math.pow(_darker, k);
+    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+  },
+  rgb: function rgb() {
+    return this;
+  },
+  displayable: function displayable() {
+    return -0.5 <= this.r && this.r < 255.5 && -0.5 <= this.g && this.g < 255.5 && -0.5 <= this.b && this.b < 255.5 && 0 <= this.opacity && this.opacity <= 1;
+  },
+  hex: rgb_formatHex,
+  // Deprecated! Use color.formatHex.
+  formatHex: rgb_formatHex,
+  formatRgb: rgb_formatRgb,
+  toString: rgb_formatRgb
+}));
+
+function rgb_formatHex() {
+  return "#" + hex(this.r) + hex(this.g) + hex(this.b);
+}
+
+function rgb_formatRgb() {
+  var a = this.opacity;
+  a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
+  return (a === 1 ? "rgb(" : "rgba(") + Math.max(0, Math.min(255, Math.round(this.r) || 0)) + ", " + Math.max(0, Math.min(255, Math.round(this.g) || 0)) + ", " + Math.max(0, Math.min(255, Math.round(this.b) || 0)) + (a === 1 ? ")" : ", " + a + ")");
+}
+
+function hex(value) {
+  value = Math.max(0, Math.min(255, Math.round(value) || 0));
+  return (value < 16 ? "0" : "") + value.toString(16);
+}
+
+function hsla(h, s, l, a) {
+  if (a <= 0) h = s = l = NaN;else if (l <= 0 || l >= 1) h = s = NaN;else if (s <= 0) h = NaN;
+  return new Hsl(h, s, l, a);
+}
+
+function hslConvert(o) {
+  if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
+  if (!(o instanceof Color)) o = color(o);
+  if (!o) return new Hsl();
+  if (o instanceof Hsl) return o;
+  o = o.rgb();
+  var r = o.r / 255,
+      g = o.g / 255,
+      b = o.b / 255,
+      min = Math.min(r, g, b),
+      max = Math.max(r, g, b),
+      h = NaN,
+      s = max - min,
+      l = (max + min) / 2;
+
+  if (s) {
+    if (r === max) h = (g - b) / s + (g < b) * 6;else if (g === max) h = (b - r) / s + 2;else h = (r - g) / s + 4;
+    s /= l < 0.5 ? max + min : 2 - max - min;
+    h *= 60;
+  } else {
+    s = l > 0 && l < 1 ? 0 : h;
+  }
+
+  return new Hsl(h, s, l, o.opacity);
+}
+function hsl(h, s, l, opacity) {
+  return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
+}
+
+function Hsl(h, s, l, opacity) {
+  this.h = +h;
+  this.s = +s;
+  this.l = +l;
+  this.opacity = +opacity;
+}
+
+src_define(Hsl, hsl, extend(Color, {
+  brighter: function brighter(k) {
+    k = k == null ? _brighter : Math.pow(_brighter, k);
+    return new Hsl(this.h, this.s, this.l * k, this.opacity);
+  },
+  darker: function darker(k) {
+    k = k == null ? _darker : Math.pow(_darker, k);
+    return new Hsl(this.h, this.s, this.l * k, this.opacity);
+  },
+  rgb: function rgb() {
+    var h = this.h % 360 + (this.h < 0) * 360,
+        s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
+        l = this.l,
+        m2 = l + (l < 0.5 ? l : 1 - l) * s,
+        m1 = 2 * l - m2;
+    return new Rgb(hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2), hsl2rgb(h, m1, m2), hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2), this.opacity);
+  },
+  displayable: function displayable() {
+    return (0 <= this.s && this.s <= 1 || isNaN(this.s)) && 0 <= this.l && this.l <= 1 && 0 <= this.opacity && this.opacity <= 1;
+  },
+  formatHsl: function formatHsl() {
+    var a = this.opacity;
+    a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
+    return (a === 1 ? "hsl(" : "hsla(") + (this.h || 0) + ", " + (this.s || 0) * 100 + "%, " + (this.l || 0) * 100 + "%" + (a === 1 ? ")" : ", " + a + ")");
+  }
+}));
+/* From FvD 13.37, CSS Color Module Level 3 */
+
+function hsl2rgb(h, m1, m2) {
+  return (h < 60 ? m1 + (m2 - m1) * h / 60 : h < 180 ? m2 : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60 : m1) * 255;
+}
+
+/***/ }),
+
+/***/ 3402:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__3402__;
+
+/***/ }),
+
+/***/ 5692:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__5692__;
+
+/***/ }),
+
+/***/ 2895:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__2895__;
+
+/***/ }),
+
+/***/ 5521:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__5521__;
+
+/***/ }),
+
+/***/ 8310:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__8310__;
+
+/***/ }),
+
+/***/ 8156:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__8156__;
+
+/***/ }),
+
+/***/ 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__;
+
+/***/ }),
+
+/***/ 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 = {
+/******/ 			3397: 0,
+/******/ 			8016: 0,
+/******/ 			410: 0,
+/******/ 			9811: 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__(4964)))
+/******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
+/******/ 	
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});
+//# sourceMappingURL=index.js.map