react-asc 20.2.0 → 21.0.3

package/index.es.js

@@ -0,0 +1,2636 @@
+import React, { useState, useEffect, useRef, Fragment, Component, createRef, cloneElement } from 'react';
+import { createPortal, render, unmountComponentAtNode } from 'react-dom';
+import { createPopper } from '@popperjs/core';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(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 COLOR;
+(function (COLOR) {
+    COLOR["primary"] = "primary";
+    COLOR["accent"] = "accent";
+    COLOR["secondary"] = "secondary";
+    // danger = 'danger',
+    COLOR["light"] = "light";
+    COLOR["dark"] = "dark";
+})(COLOR || (COLOR = {}));
+var VARIANT;
+(function (VARIANT) {
+    VARIANT["contained"] = "contained";
+    VARIANT["outline"] = "outline";
+    VARIANT["text"] = "text";
+})(VARIANT || (VARIANT = {}));
+var SIZE;
+(function (SIZE) {
+    SIZE["sm"] = "sm";
+    SIZE["md"] = "md";
+    SIZE["lg"] = "lg";
+})(SIZE || (SIZE = {}));
+var POSITION;
+(function (POSITION) {
+    POSITION["right"] = "right";
+    POSITION["left"] = "left";
+})(POSITION || (POSITION = {}));
+const STATUS = {
+    HOVERED: 'hovered',
+    NORMAL: 'normal',
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$10 = ".Alert-module_alert__b4tbk {\n  border-radius: var(--borderRadius);\n  padding: 6px 16px; }\n  .Alert-module_alert__b4tbk.Alert-module_shadow__5bz-7 {\n    box-shadow: var(--shadow); }\n\n.Alert-module_contained__EM0x6.Alert-module_primary__q4pNj {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n\n.Alert-module_contained__EM0x6.Alert-module_accent__a2WIl {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n\n.Alert-module_contained__EM0x6.Alert-module_secondary__syXKX {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n\n.Alert-module_contained__EM0x6.Alert-module_light__VKCXF {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n\n.Alert-module_contained__EM0x6.Alert-module_dark__3c-Hm {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n\n.Alert-module_outline__T2262.Alert-module_primary__q4pNj {\n  color: var(--primary) !important;\n  border: 1px solid var(--primary) !important; }\n\n.Alert-module_outline__T2262.Alert-module_secondary__syXKX {\n  color: var(--secondary) !important;\n  border: 1px solid var(--secondary) !important; }\n\n.Alert-module_outline__T2262.Alert-module_accent__a2WIl {\n  color: var(--accent) !important;\n  border: 1px solid var(--accent) !important; }\n\n.Alert-module_outline__T2262.Alert-module_light__VKCXF {\n  color: var(--light-contrast-text) !important;\n  border: 1px solid var(--light) !important; }\n\n.Alert-module_outline__T2262.Alert-module_dark__3c-Hm {\n  color: var(--dark) !important;\n  border: 1px solid var(--dark) !important; }\n";
+var styles$10 = {"alert":"Alert-module_alert__b4tbk","shadow":"Alert-module_shadow__5bz-7","contained":"Alert-module_contained__EM0x6","primary":"Alert-module_primary__q4pNj","accent":"Alert-module_accent__a2WIl","secondary":"Alert-module_secondary__syXKX","light":"Alert-module_light__VKCXF","dark":"Alert-module_dark__3c-Hm","outline":"Alert-module_outline__T2262"};
+styleInject(css_248z$10);
+
+const Alert = (props) => {
+    const { children, className, color = COLOR.primary, variant = VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$10.alert);
+        if (variant === VARIANT.contained) {
+            cssClasses.push(styles$10.contained);
+            cssClasses.push(styles$10[color]);
+        }
+        if (variant === VARIANT.outline) {
+            cssClasses.push(styles$10.outline);
+            cssClasses.push(styles$10[color]);
+        }
+        shadow && cssClasses.push(styles$10['shadow']);
+        className && cssClasses.push(className);
+        return cssClasses.filter(r => r).join(' ');
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z$$ = ".AppBar-module_appbar__Neyh3 {\n  padding: 0.5rem 1rem;\n  display: flex;\n  z-index: 1000;\n  min-height: 64px;\n  flex-shrink: 0; }\n  .AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n    box-shadow: var(--shadow); }\n";
+var styles$$ = {"appbar":"AppBar-module_appbar__Neyh3","primary":"AppBar-module_primary__xMqXD","secondary":"AppBar-module_secondary__8MkLA","accent":"AppBar-module_accent__vHbkp","light":"AppBar-module_light__HGy3y","dark":"AppBar-module_dark__ILq96","shadow":"AppBar-module_shadow__gQN8s"};
+styleInject(css_248z$$);
+
+const AppBar = (props) => {
+    const { children, className, color = COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$$[color]);
+        cssClasses.push(styles$$.appbar);
+        shadow && cssClasses.push(styles$$['shadow']);
+        className && cssClasses.push(className);
+        return cssClasses.filter(r => r).join(' ');
+    };
+    return (React.createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z$_ = ".AppBarTitle-module_appbarTitle__RsFg5 {\n  align-items: center;\n  padding-top: 0.3125rem;\n  padding-bottom: 0.3125rem;\n  font-size: 1.25rem;\n  line-height: 1.8;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden !important;\n  display: inline-block; }\n  .AppBarTitle-module_appbarTitle__RsFg5:hover {\n    cursor: pointer; }\n";
+var styles$_ = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
+styleInject(css_248z$_);
+
+const AppBarTitle = (props) => {
+    const { children, className, onClick } = props;
+    const getCssClass = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$_.appbarTitle);
+        className && cssClasses.push(className);
+        return cssClasses.filter(r => r).join(' ');
+    };
+    return (React.createElement("div", { className: getCssClass(), onClick: onClick }, children));
+};
+
+var css_248z$Z = ".Icon-module_icon__lFKCA {\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  width: 20px;\n  height: 20px; }\n  .Icon-module_icon__lFKCA svg {\n    width: inherit;\n    height: inherit; }\n  .Icon-module_icon__lFKCA.Icon-module_primary__3fID- {\n    color: var(--primary); }\n  .Icon-module_icon__lFKCA.Icon-module_accent__aZXGb {\n    color: var(--accent); }\n  .Icon-module_icon__lFKCA.Icon-module_secondary__HKKop {\n    color: var(--secondary); }\n  .Icon-module_icon__lFKCA.Icon-module_light__-ApMm {\n    color: var(--light); }\n  .Icon-module_icon__lFKCA.Icon-module_dark__DpCIK {\n    color: var(--dark); }\n";
+var styles$Z = {"icon":"Icon-module_icon__lFKCA","primary":"Icon-module_primary__3fID-","accent":"Icon-module_accent__aZXGb","secondary":"Icon-module_secondary__HKKop","light":"Icon-module_light__-ApMm","dark":"Icon-module_dark__DpCIK"};
+styleInject(css_248z$Z);
+
+const Icon = (props) => {
+    const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$Z.icon);
+        iconColor && cssClasses.push(styles$Z[iconColor]);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z$Y = ".IconButton-module_iconButton__rpCPQ {\n  border-radius: 100%;\n  padding: 0px;\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  min-width: auto;\n  box-shadow: none;\n  font-weight: 400;\n  text-align: center;\n  vertical-align: middle;\n  -webkit-user-select: none;\n  user-select: none;\n  background-color: transparent;\n  font-size: 1rem;\n  line-height: 1.5;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  border: none; }\n  .IconButton-module_iconButton__rpCPQ:hover {\n    cursor: pointer; }\n  .IconButton-module_iconButton__rpCPQ.IconButton-module_shadow__Uw0RK {\n    box-shadow: var(--shadow); }\n  .IconButton-module_iconButton__rpCPQ.IconButton-module_md__XnuSk {\n    width: 48px;\n    height: 48px; }\n  .IconButton-module_iconButton__rpCPQ.IconButton-module_lg__arEvo {\n    width: 56px;\n    height: 56px; }\n  .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag {\n    padding: 0;\n    background: transparent;\n    color: inherit; }\n    .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_active__VIqU9 {\n      background-color: rgba(0, 0, 0, 0.04); }\n    .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G {\n      color: var(--primary); }\n      .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n        color: var(--primary-dark); }\n    .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY {\n      color: var(--secondary); }\n      .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n        color: var(--secondary-dark); }\n    .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2 {\n      color: var(--accent); }\n      .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n        color: var(--accent-dark); }\n    .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO {\n      color: var(--light); }\n      .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n        color: var(--light-dark); }\n    .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH {\n      color: var(--dark); }\n      .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n        color: var(--dark-dark); }\n    .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_disabled__QB0ZV {\n      color: rgba(0, 0, 0, 0.26);\n      background-color: transparent;\n      cursor: default;\n      pointer-events: none; }\n  .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_active__VIqU9 {\n    background-color: rgba(0, 0, 0, 0.04); }\n  .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G {\n    background-color: var(--primary);\n    color: var(--white); }\n    .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n      background-color: var(--primary-dark); }\n  .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY {\n    background-color: var(--secondary);\n    color: var(--white); }\n    .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n      background-color: var(--secondary-dark); }\n  .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2 {\n    background-color: var(--accent);\n    color: var(--white); }\n    .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n      background-color: var(--accent-dark); }\n  .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO {\n    background-color: var(--light);\n    color: var(--dark); }\n    .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n      background-color: var(--light-dark); }\n  .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH {\n    background-color: var(--dark);\n    color: var(--white); }\n    .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n      background-color: var(--dark-light); }\n  .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_disabled__QB0ZV {\n    color: rgba(0, 0, 0, 0.26);\n    background-color: transparent;\n    cursor: default;\n    pointer-events: none; }\n  .IconButton-module_iconButton__rpCPQ:focus:not(.IconButton-module_iconButton__rpCPQ.IconButton-module_disabled__QB0ZV) {\n    color: #212529;\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n";
+var styles$Y = {"iconButton":"IconButton-module_iconButton__rpCPQ","shadow":"IconButton-module_shadow__Uw0RK","md":"IconButton-module_md__XnuSk","lg":"IconButton-module_lg__arEvo","text":"IconButton-module_text__Ualag","active":"IconButton-module_active__VIqU9","primary":"IconButton-module_primary__vbo-G","secondary":"IconButton-module_secondary__AiNAY","accent":"IconButton-module_accent__QRzM2","light":"IconButton-module_light__YNEiO","dark":"IconButton-module_dark__gnbUH","disabled":"IconButton-module_disabled__QB0ZV","contained":"IconButton-module_contained__k7vGA"};
+styleInject(css_248z$Y);
+
+const IconButton = (props) => {
+    const { children, icon, variant = VARIANT.text, color = COLOR.dark, size = SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$Y[color]);
+        cssClasses.push(styles$Y[variant]);
+        cssClasses.push(styles$Y[size]);
+        cssClasses.push(styles$Y.iconButton);
+        isActive && cssClasses.push(styles$Y.active);
+        disabled && cssClasses.push(styles$Y.disabled);
+        shadow && cssClasses.push(styles$Y.shadow);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses(), disabled: disabled }, rest),
+        icon && React.createElement(Icon, null, icon),
+        children));
+};
+
+const CaretDownSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "caret-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
+    React.createElement("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" })));
+
+const CheckSquareRegularIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "check-square", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" },
+    React.createElement("path", { fill: "currentColor", d: "M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 400H48V80h352v352zm-35.864-241.724L191.547 361.48c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z" })));
+
+const ChevronDownSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "chevron-down", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" },
+    React.createElement("path", { fill: "currentColor", d: "M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" })));
+
+const ChevronRightSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "chevron-right", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
+    React.createElement("path", { fill: "currentColor", d: "M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" })));
+
+const ChevronUpSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "chevron-up", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" },
+    React.createElement("path", { fill: "currentColor", d: "M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" })));
+
+const HomeSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "home", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512" },
+    React.createElement("path", { fill: "currentColor", d: "M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z" })));
+
+const SquareRegularIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "square", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" },
+    React.createElement("path", { fill: "currentColor", d: "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z" })));
+
+const TimesCircleSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" },
+    React.createElement("path", { fill: "currentColor", d: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z" })));
+
+const TimesSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 352 512" },
+    React.createElement("path", { fill: "currentColor", d: "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" })));
+
+const SpinnerSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "spinner", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" },
+    React.createElement("path", { fill: "currentColor", d: "M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z" })));
+
+const PlusSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" },
+    React.createElement("path", { fill: "currentColor", d: "M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" })));
+
+const CheckSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" },
+    React.createElement("path", { fill: "currentColor", d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })));
+
+const CircleSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" },
+    React.createElement("path", { fill: "currentColor", d: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" })));
+
+const ChevronLeftSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
+    React.createElement("path", { fill: "currentColor", d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" })));
+
+function useWindowSize() {
+    const [windowSize, setWindowSize] = useState({
+        width: 0,
+        height: 0,
+    });
+    useEffect(() => {
+        function handleResize() {
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowSize;
+}
+
+function useHover() {
+    const [value, setValue] = useState(false);
+    const ref = useRef(null);
+    const handleMouseOver = () => setValue(true);
+    const handleMouseOut = () => setValue(false);
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const node = ref.current;
+        if (node) {
+            node.addEventListener("mouseover", handleMouseOver);
+            node.addEventListener("mouseout", handleMouseOut);
+            return () => {
+                node.removeEventListener("mouseover", handleMouseOver);
+                node.removeEventListener("mouseout", handleMouseOut);
+            };
+        }
+        return;
+    }, [ref.current] // Recall only if ref changes
+    );
+    return [ref, value];
+}
+
+const useConstructor = (callBack) => {
+    const [hasBeenCalled, setHasBeenCalled] = useState(false);
+    if (hasBeenCalled)
+        return;
+    callBack();
+    setHasBeenCalled(true);
+};
+
+function useDebounce(callback, timeout, deps) {
+    const timeoutId = useRef();
+    useEffect(() => {
+        clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(callback, timeout);
+        return () => clearTimeout(timeoutId.current);
+    }, deps);
+}
+
+var css_248z$X = ".Backdrop-module_backdrop__IRMoL {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  opacity: 0.5;\n  z-index: 1040;\n  top: 0;\n  left: 0;\n  background-color: #000; }\n  .Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n    opacity: 0; }\n";
+var styles$X = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
+styleInject(css_248z$X);
+
+const Backdrop = (props) => {
+    const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
+    const handleClick = (e) => {
+        e.stopPropagation();
+        onClick && onClick(e);
+    };
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$X.backdrop);
+        isTransparent && cssClasses.push(styles$X['isTransparent']);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const getStyles = () => {
+        const styles = Object.assign({ height: '100%', width: '100%', position: 'absolute' }, style);
+        return styles;
+    };
+    return (createPortal(React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest)), target));
+};
+
+var css_248z$W = ".List-module_list__gpZ41 {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  padding-left: 0;\n  margin-bottom: 0;\n  margin-top: 0;\n  background-color: var(--white); }\n";
+var styles$W = {"list":"List-module_list__gpZ41"};
+styleInject(css_248z$W);
+
+const List = (props) => {
+    const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        isFlush && cssClasses.push(styles$W.flush);
+        cssClasses.push(styles$W.list);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z$V = ".ListItem-module_listItem__Pk1AP {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0.75rem 1.25rem;\n  min-width: 100%;\n  color: var(--bodyColor);\n  text-align: inherit;\n  transition: background 0.5s ease; }\n  .ListItem-module_listItem__Pk1AP:hover, .ListItem-module_listItem__Pk1AP.ListItem-module_active__zm2q8 {\n    cursor: pointer;\n    z-index: 1;\n    text-decoration: none;\n    background-color: rgba(0, 0, 0, 0.04);\n    color: var(--primary); }\n  .ListItem-module_listItem__Pk1AP + .ListItem-module_listItem__Pk1AP {\n    border-top-width: 0; }\n  .ListItem-module_listItem__Pk1AP.ListItem-module_primary__F6Qja {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .ListItem-module_listItem__Pk1AP.ListItem-module_accent__pg3Ha {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .ListItem-module_listItem__Pk1AP.ListItem-module_secondary__d0drD {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .ListItem-module_listItem__Pk1AP.ListItem-module_light__37kby {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .ListItem-module_listItem__Pk1AP.ListItem-module_dark__ZxQTF {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl {\n    color: rgba(0, 0, 0, 0.26); }\n    .ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl:hover {\n      cursor: not-allowed;\n      background-color: inherit; }\n";
+var styles$V = {"listItem":"ListItem-module_listItem__Pk1AP","active":"ListItem-module_active__zm2q8","primary":"ListItem-module_primary__F6Qja","accent":"ListItem-module_accent__pg3Ha","secondary":"ListItem-module_secondary__d0drD","light":"ListItem-module_light__37kby","dark":"ListItem-module_dark__ZxQTF","disabled":"ListItem-module_disabled__DQLKl"};
+styleInject(css_248z$V);
+
+const ListItem = (props) => {
+    const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$V.listItem);
+        color && cssClasses.push(styles$V[color]);
+        active && cssClasses.push(styles$V['active']);
+        disabled && cssClasses.push(styles$V['disabled']);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleClick = (e) => {
+        !disabled && onClick && onClick(e);
+    };
+    return (React.createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
+};
+
+var css_248z$U = ".ListItemAvatar-module_avatar__sVWfR {\n  margin-right: 16px; }\n  .ListItemAvatar-module_avatar__sVWfR svg, .ListItemAvatar-module_avatar__sVWfR img {\n    width: 24px;\n    height: 24px; }\n  .ListItemAvatar-module_avatar__sVWfR img {\n    border-radius: 50%; }\n";
+var styles$U = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
+styleInject(css_248z$U);
+
+const ListItemAvatar = (_a) => {
+    var { avatar } = _a, rest = __rest(_a, ["avatar"]);
+    return (React.createElement("div", Object.assign({ className: styles$U.avatar }, rest), avatar));
+};
+
+var css_248z$T = ".ListItemIcon-module_icon__cCvEv {\n  margin-right: 32px; }\n  .ListItemIcon-module_icon__cCvEv svg {\n    width: 24px;\n    height: 24px; }\n";
+var styles$T = {"icon":"ListItemIcon-module_icon__cCvEv"};
+styleInject(css_248z$T);
+
+const ListItemIcon = (_a) => {
+    var { icon } = _a, rest = __rest(_a, ["icon"]);
+    return (React.createElement("div", Object.assign({ className: styles$T.icon }, rest), icon));
+};
+
+var css_248z$S = ".ListItemAction-module_listItemAction__gAQRj {\n  display: flex;\n  justify-content: center;\n  min-width: 40px; }\n  .ListItemAction-module_listItemAction__gAQRj svg {\n    width: 20px;\n    height: 20px; }\n";
+var styles$S = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
+styleInject(css_248z$S);
+
+const ListItemAction = (_a) => {
+    var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
+    return (React.createElement("div", Object.assign({ className: styles$S.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
+};
+
+var css_248z$R = ".ListItemTextIcon-module_listItemText__xCBLW {\n  flex: 1; }\n";
+var styles$R = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
+styleInject(css_248z$R);
+
+const ListItemText = (_a) => {
+    var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$R.listItemText);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
+        React.createElement(ListItemTextPrimary, null, primary),
+        secondary &&
+            React.createElement(ListItemTextSecondary, null, secondary)));
+};
+const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
+const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
+
+var css_248z$Q = ".AutoComplete-module_selectContainer__1kA85 {\n  position: relative; }\n\n.AutoComplete-module_select__NNYOi {\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px #00000013;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex; }\n  .AutoComplete-module_select__NNYOi:hover {\n    cursor: pointer; }\n  .AutoComplete-module_select__NNYOi:focus:not(.AutoComplete-module_select__NNYOi.AutoComplete-module_disabled__CbGP4) {\n    color: #212529;\n    background-color: #fff;\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n  .AutoComplete-module_select__NNYOi:disabled, .AutoComplete-module_select__NNYOi:read-only {\n    background-color: #e9ecef; }\n  .AutoComplete-module_select__NNYOi:disabled:hover {\n    cursor: not-allowed; }\n  .AutoComplete-module_select__NNYOi:read-only:hover {\n    cursor: inherit; }\n\n.AutoComplete-module_selectMenu__Gu81L {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 38px;\n  z-index: 1050;\n  max-height: 280px;\n  overflow: auto; }\n";
+var styles$Q = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
+styleInject(css_248z$Q);
+
+// preset value
+// enter -> delay? -> show results
+// single
+// multiple
+// custom template render items
+const AutoComplete = (props) => {
+    const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, showNoEntry = true, showClearButton, onChange, onSelect, value } = props;
+    const [model, setModel] = useState('');
+    const [searchText, setSearchText] = useState('');
+    const [isShow, setIsShow] = useState(false);
+    const [optionsTemp, setOptionsTemp] = useState([]);
+    const selectConainter = useRef(null);
+    useEffect(() => {
+        if (value !== model) {
+            const option = options.find(o => o.value === value);
+            setModel(option ? option.label : '');
+        }
+    }, [value]);
+    useEffect(() => {
+        if (options && options.length > 0) {
+            const optionsOrigin = JSON.parse(JSON.stringify(options));
+            const regex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'gi');
+            const optionsFiltered = optionsOrigin.filter(o => { var _a; return (_a = o.label) === null || _a === void 0 ? void 0 : _a.match(regex); });
+            if (optionsFiltered.length === 0 && showNoEntry) {
+                setOptionsTemp([{ value: '', label: '- no entry found -' }]);
+            }
+            else {
+                setOptionsTemp(optionsFiltered);
+            }
+        }
+    }, [options]);
+    useDebounce(() => { onChange && onChange(searchText); }, debounce, [searchText]);
+    useEffect(() => {
+        if (isShow === true) {
+            document.body.classList.add('modal-open');
+            const main = document.querySelector('.main');
+            main === null || main === void 0 ? void 0 : main.classList.add('modal-open');
+        }
+        else {
+            document.body.classList.remove('modal-open');
+            const main = document.querySelector('.main');
+            main === null || main === void 0 ? void 0 : main.classList.remove('modal-open');
+        }
+    }, [isShow]);
+    useEffect(() => {
+        return () => {
+            document.body.classList.remove('modal-open');
+            const main = document.querySelector('.main');
+            main === null || main === void 0 ? void 0 : main.classList.remove('modal-open');
+        };
+    }, []);
+    const getCssClass = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        cssClasses.push(styles$Q.select);
+        return cssClasses.filter(r => r).join(' ');
+    };
+    const show = () => setIsShow(true);
+    const hide = () => setIsShow(false);
+    const handleOnClick = (option) => {
+        if (model !== option.value) {
+            onSelect && onSelect(option);
+        }
+        setModel(option.label);
+        hide();
+    };
+    const handleOnChange = (e) => {
+        setModel(e.target.value);
+        setSearchText(e.target.value);
+        show();
+    };
+    const handleOnFocus = () => {
+        openOnFocus && show();
+    };
+    const handleClickReset = () => {
+        setModel('');
+        setSearchText('');
+    };
+    return (React.createElement("div", { ref: selectConainter, className: styles$Q.selectContainer },
+        React.createElement("div", { className: "d-flex" },
+            React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
+            showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
+                React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
+        isShow &&
+            React.createElement(React.Fragment, null,
+                React.createElement("div", { className: styles$Q.selectMenu },
+                    React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
+                        React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
+                React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
+};
+
+var css_248z$P = ".Badge-module_badgeContainer__3nZBs {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle; }\n\n.Badge-module_badge__9ImR0 {\n  top: 0;\n  right: 0;\n  transform: scale(1) translate(50%, -50%);\n  transform-origin: 100% 0%;\n  height: 20px;\n  display: flex;\n  padding: 0 6px;\n  z-index: 1;\n  position: absolute;\n  flex-wrap: wrap;\n  font-size: 0.75rem;\n  min-width: 20px;\n  align-items: center;\n  font-weight: 500;\n  line-height: 1;\n  align-content: center;\n  flex-direction: row;\n  justify-content: center;\n  border-radius: 10px;\n  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Badge-module_badge__9ImR0.Badge-module_primary__41U-t {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .Badge-module_badge__9ImR0.Badge-module_accent__OQy2- {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .Badge-module_badge__9ImR0.Badge-module_secondary__a9Jfh {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .Badge-module_badge__9ImR0.Badge-module_light__4QvQ5 {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Badge-module_badge__9ImR0.Badge-module_dark__g1yUJ {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n";
+var styles$P = {"badgeContainer":"Badge-module_badgeContainer__3nZBs","badge":"Badge-module_badge__9ImR0","primary":"Badge-module_primary__41U-t","accent":"Badge-module_accent__OQy2-","secondary":"Badge-module_secondary__a9Jfh","light":"Badge-module_light__4QvQ5","dark":"Badge-module_dark__g1yUJ"};
+styleInject(css_248z$P);
+
+const Badge = (props) => {
+    const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
+    const getCssClassesBadgeContainer = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$P.badgeContainer);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const getCssClassesBadge = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$P.badge);
+        cssClasses.push(styles$P[color]);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
+        children,
+        React.createElement("span", { className: getCssClassesBadge() }, content)));
+};
+
+var css_248z$O = ".Button-module_button__qeIer {\n  text-transform: uppercase !important;\n  flex-shrink: 0;\n  background-color: transparent;\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  user-select: none;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\r box-shadow 0.15s ease-in-out;\n  min-width: 64px;\n  font-size: 0.875rem;\n  border-radius: var(--borderRadius); }\n  .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n    box-shadow: var(--shadow); }\n  .Button-module_button__qeIer.Button-module_block__JIazf {\n    width: 100%; }\n  .Button-module_button__qeIer:hover {\n    cursor: pointer; }\n  .Button-module_button__qeIer:focus:not(.Button-module_button__qeIer.Button-module_disabled__jiOqa) {\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n  .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover {\n    background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n  .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover {\n    background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n  .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover {\n    background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n  .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover {\n    background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n  .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled:hover {\n  cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n    color: var(--primary) !important; }\n    .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover {\n      text-decoration: none;\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n    color: var(--secondary) !important; }\n    .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover {\n      text-decoration: none;\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n    color: var(--accent) !important; }\n    .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover {\n      text-decoration: none;\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n    color: var(--light-contrast-text) !important; }\n    .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover {\n      text-decoration: none;\n      background: var(--light-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n    color: var(--dark) !important; }\n    .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover {\n      text-decoration: none;\n      background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__CCFPI {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n    color: var(--primary) !important;\n    border-color: var(--primary) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover {\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n    color: var(--secondary) !important;\n    border-color: var(--secondary) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover {\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n    color: var(--accent) !important;\n    border-color: var(--accent) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover {\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n    color: var(--light-contrast-text) !important;\n    border-color: var(--light) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover {\n      background: var(--light-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n    color: var(--dark) !important;\n    border-color: var(--dark) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover {\n      background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__Eylwr {\n  display: inherit;\n  margin-left: -4px;\n  margin-right: 8px; }\n  .Button-module_startIcon__Eylwr svg {\n    width: 18px;\n    height: 18px; }\n\n.Button-module_endIcon__pCffL {\n  display: inherit;\n  margin-left: 8px; }\n  .Button-module_endIcon__pCffL svg {\n    width: 18px;\n    height: 18px; }\n";
+var styles$O = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","disabled":"Button-module_disabled__jiOqa","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
+styleInject(css_248z$O);
+
+const Button = (props) => {
+    const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow", "block"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$O.button);
+        if (variant !== 'outline' && variant !== 'text') {
+            cssClasses.push(styles$O.btnContained);
+            cssClasses.push(styles$O[color]);
+        }
+        if (variant === 'outline') {
+            cssClasses.push(styles$O.btnOutline);
+            cssClasses.push(styles$O[color]);
+        }
+        if (variant === 'text') {
+            cssClasses.push(styles$O.btnText);
+            cssClasses.push(styles$O[color]);
+        }
+        if (isRounded && variant !== 'text') {
+            cssClasses.push(`rounded-pill`);
+        }
+        if (isActive) {
+            cssClasses.push('active');
+        }
+        shadow && cssClasses.push(styles$O.shadow);
+        block && cssClasses.push(styles$O.block);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
+        React.createElement("span", { className: "d-flex justify-content-center" },
+            startIcon &&
+                React.createElement(Icon, { className: styles$O.startIcon }, startIcon),
+            children,
+            endIcon &&
+                React.createElement(Icon, { className: styles$O.endIcon }, endIcon))));
+};
+
+var css_248z$N = ".ButtonGroup-module_buttonGroup__w6iB- button:not(:last-child) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0; }\n\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:first-child) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0; }\n";
+var styles$N = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
+styleInject(css_248z$N);
+
+const ButtonGroup = (props) => {
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$N.buttonGroup);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
+};
+
+var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  margin-bottom: 0;\n  list-style: none;\n  margin-bottom: 1rem; }\n";
+var styles$M = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
+styleInject(css_248z$M);
+
+const Breadcrumb = (props) => {
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$M.breadcrumb);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("nav", Object.assign({}, rest),
+        React.createElement("ol", { className: getCssClasses() }, children)));
+};
+
+const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
+
+var css_248z$L = ".BreadcrumbItem-module_breadcrumbItem__zsUq- {\n  display: flex;\n  align-items: center; }\n  .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n    padding-left: 0.5rem; }\n  .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n    float: left;\n    padding-right: 0.5rem;\n    color: #6c757d;\n    content: \"/\"; }\n  .BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n    color: var(--primary); }\n  .BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n    cursor: pointer; }\n  .BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n    cursor: unset; }\n";
+var styles$L = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
+styleInject(css_248z$L);
+
+const BreadcrumbItem = (props) => {
+    const { children, className, isActive, onClick } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$L.breadcrumbItem);
+        className && cssClasses.push(className);
+        isActive && cssClasses.push('active');
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleClick = (event) => {
+        onClick && onClick(event);
+    };
+    return (React.createElement("li", { className: getCssClasses(), onClick: handleClick },
+        React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React.createElement("a", null, label) }, children)));
+};
+
+var css_248z$K = ".Card-module_card__TQdQq {\n  background: var(--white);\n  border-radius: var(--borderRadius); }\n  .Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n    box-shadow: var(--shadow); }\n";
+var styles$K = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
+styleInject(css_248z$K);
+
+const Card = (props) => {
+    const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$K.card);
+        shadow && cssClasses.push(styles$K.shadow);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z$J = ".CardBody-module_cardBody__X52VY {\n  flex: 1 1 auto;\n  min-height: 1px;\n  padding: 1.25rem; }\n";
+var styles$J = {"cardBody":"CardBody-module_cardBody__X52VY"};
+styleInject(css_248z$J);
+
+const CardBody = (props) => {
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$J.cardBody);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z$I = ".CardFooter-module_cardFooter__BpOTG {\n  padding: 0.75rem 1.25rem;\n  background-color: rgba(0, 0, 0, 0.03);\n  border-top: 1px solid rgba(0, 0, 0, 0.125); }\n  .CardFooter-module_cardFooter__BpOTG:last-child {\n    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }\n";
+var styles$I = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
+styleInject(css_248z$I);
+
+const CardFooter = (props) => {
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$I.cardFooter);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z$H = ".CardSubtitle-module_cardSubtitle__YdoRM {\n  color: #6c757d !important; }\n";
+var styles$H = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
+styleInject(css_248z$H);
+
+const CardSubtitle = (props) => {
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$H.cardSubtitle);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z$G = ".CardText-module_cardText__UtYd9:last-child {\n  margin-bottom: 0; }\n";
+var styles$G = {"cardText":"CardText-module_cardText__UtYd9"};
+styleInject(css_248z$G);
+
+const CardText = (props) => {
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$G.cardText);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z$F = ".CardTitle-module_cardTitle__aiPSE {\n  margin-bottom: 0;\n  font-size: 1.5rem;\n  font-weight: 400;\n  line-height: 1.334;\n  letter-spacing: 0em; }\n";
+var styles$F = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
+styleInject(css_248z$F);
+
+const CardTitle = (props) => {
+    const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$F.cardTitle);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z$E = ".CardImage-module_cardImage__Z6JWW {\n  flex-shrink: 0;\n  width: 100%;\n  border-top-left-radius: calc(0.25rem - 1px);\n  border-top-right-radius: calc(0.25rem - 1px); }\n";
+var styles$E = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
+styleInject(css_248z$E);
+
+const CardImage = (props) => {
+    const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$E.cardImage);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
+};
+
+var css_248z$D = ".Checkbox-module_checkboxContainer__x2GCi {\n  display: flex;\n  align-items: center;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n\n.Checkbox-module_checkboxLabel__nPY4k:hover {\n  cursor: pointer; }\n\n.Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG {\n  color: rgba(0, 0, 0, 0.26);\n  cursor: not-allowed; }\n  .Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG:hover {\n    cursor: not-allowed; }\n";
+var styles$D = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
+styleInject(css_248z$D);
+
+const Checkbox = (props) => {
+    const { id, checked, className, label, name, value = "off", disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
+    // TODO
+    // add own value
+    // set from outer
+    // update on change
+    // emit to outer
+    // can be: true/false, custom
+    const [isChecked, setIsChecked] = useState(false);
+    const checkboxElement = useRef(null);
+    useEffect(() => {
+        if (checked === true || checked === false) {
+            setIsChecked(checked);
+        }
+    }, [checked]);
+    const icons = {
+        default: React.createElement(SquareRegularIcon, null),
+        selected: React.createElement(CheckSquareRegularIcon, null)
+    };
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push('checkbox');
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const getCssClassesLabel = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$D.checkboxLabel);
+        disabled && cssClasses.push(styles$D['disabled']);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const getIcon = () => {
+        return isChecked ? icons.selected : icons.default;
+    };
+    const handleClick = () => {
+        var _a;
+        if (!disabled && !readOnly) {
+            setIsChecked(!isChecked);
+            (_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    };
+    return (React.createElement("div", { className: styles$D.checkboxContainer },
+        React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
+        React.createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
+        React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
+};
+
+var css_248z$C = ".Chip-module_chip__dZ5qz {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  font-size: 75%;\n  font-weight: 700;\n  border-radius: 10rem;\n  line-height: 1; }\n  .Chip-module_chip__dZ5qz svg {\n    width: 18px;\n    height: 18px; }\n  .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n    margin-left: 5px; }\n    .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n      cursor: pointer; }\n  .Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n    background: var(--primary);\n    color: var(--primary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n    background: var(--secondary);\n    color: var(--secondary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n    background: var(--accent);\n    color: var(--accent-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n    cursor: pointer; }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n      background: var(--primary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n      background: var(--secondary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n      background: var(--accent-dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n    box-shadow: var(--shadow); }\n";
+var styles$C = {"chip":"Chip-module_chip__dZ5qz","deleteIcon":"Chip-module_deleteIcon__--rUx","primary":"Chip-module_primary__YVDi9","secondary":"Chip-module_secondary__-e4xP","accent":"Chip-module_accent__ZCTwu","light":"Chip-module_light__vKs7O","dark":"Chip-module_dark__G-FLQ","clickable":"Chip-module_clickable__qAqVH","shadow":"Chip-module_shadow__v11NF"};
+styleInject(css_248z$C);
+
+const Chip = (props) => {
+    const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React.createElement(TimesCircleSolidIcon, null), style } = props, rest = __rest(props, ["children", "color", "className", "shadow", "onClick", "isDeletable", "onDelete", "deleteIcon", "style"]);
+    const getCssClass = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$C.chip);
+        cssClasses.push(styles$C[color]);
+        shadow && cssClasses.push(styles$C['shadow']);
+        onClick && cssClasses.push(styles$C['clickable']);
+        className && cssClasses.push(className);
+        return cssClasses.filter(r => r).join(' ');
+    };
+    const handleClickOnDelete = (e) => {
+        e.stopPropagation();
+        onDelete && onDelete(e);
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
+        React.createElement("div", null, children),
+        isDeletable && (React.createElement("div", { className: styles$C.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
+};
+
+var css_248z$B = ".Column-module_column__fcTgl {\n  flex: 1 0 0%; }\n";
+var styles$B = {"column":"Column-module_column__fcTgl"};
+styleInject(css_248z$B);
+
+const Column = (props) => {
+    const { children, className } = props, 
+    // xs,
+    // sm,
+    // md,
+    // lg,
+    // xl,
+    rest = __rest(props, ["children", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        // !xs && !sm && !md && !lg && !xl && cssClasses.push('col');
+        // if (xs) cssClasses.push(`col-${xs.toString()}`);
+        // if (sm) cssClasses.push(`col-sm-${sm.toString()}`);
+        // if (md) cssClasses.push(`col-md-${md.toString()}`);
+        // if (lg) cssClasses.push(`col-lg-${lg.toString()}`);
+        // if (xl) cssClasses.push(`col-xl-${xl.toString()}`);
+        cssClasses.push(styles$B.column);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z$A = ".Row-module_row__bTIWp {\n  display: flex;\n  gap: 15px;\n  flex-wrap: wrap; }\n  .Row-module_row__bTIWp > * {\n    flex-shrink: 0;\n    width: 100%;\n    min-width: 0;\n    max-width: 100%; }\n";
+var styles$A = {"row":"Row-module_row__bTIWp"};
+styleInject(css_248z$A);
+
+const Row = (_a) => {
+    var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$A.row);
+        className && cssClasses.push(className);
+        direction && cssClasses.push(`flex-${direction}`);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z$z = ".FormLabel-module_formLabel__TXcHc {\n  display: inline-block;\n  margin-bottom: 0.5rem; }\n";
+var styles$z = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
+styleInject(css_248z$z);
+
+const FormLabel = (_a) => {
+    var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$z.formLabel);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("label", Object.assign({ htmlFor: htmlFor, className: getCssClasses() }, rest), children));
+};
+
+const FormGroup = (props) => {
+    const { children, className = 'mb-1' } = props;
+    return (React.createElement("div", { className: className }, children));
+};
+
+const FileInput = (props) => {
+    const { id, className, children, name, multiple = false, accept, disabled, onChange, readOnly, value, deletable = false } = props, rest = __rest(props, ["id", "className", "children", "name", "multiple", "accept", "disabled", "onChange", "readOnly", "value", "deletable"]);
+    const inputFileElement = useRef(null);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [model, setModel] = useState(value);
+    const [fileList, setFileList] = useState();
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(r => r).join(' ');
+    };
+    const handleOnChange = (event) => {
+        const values = event.target.files;
+        setFileList(values);
+        onChange && onChange(event);
+    };
+    const handleOnDelete = () => {
+        alert('coming soon');
+    };
+    return (React.createElement("div", { className: "d-flex align-items-start" },
+        React.createElement(Button, { className: "flex-wrap", disabled: disabled, onClick: () => { var _a; return (_a = inputFileElement.current) === null || _a === void 0 ? void 0 : _a.click(); } }, children),
+        React.createElement("div", { className: "d-flex align-items-center flex-wrap ml-1" }, fileList && Array.from(fileList).map((file) => React.createElement(Chip, { key: file.name, isDeletable: deletable, onDelete: () => handleOnDelete() }, file.name))),
+        React.createElement("input", Object.assign({ type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model }, rest))));
+};
+
+var css_248z$y = ".Select-module_selectContainer__DHFDZ {\n  position: relative; }\n\n.Select-module_select__Fbn38 {\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px #00000013;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  align-items: center;\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex; }\n  .Select-module_select__Fbn38:hover {\n    cursor: pointer; }\n  .Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n    color: #212529;\n    background-color: #fff;\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n    background-color: #e9ecef; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n    cursor: not-allowed; }\n  .Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n    cursor: inherit; }\n\n.Select-module_selectMenu__8y4kQ {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 2px;\n  z-index: 1112;\n  max-height: 280px;\n  overflow: auto; }\n";
+var styles$y = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","selectMenu":"Select-module_selectMenu__8y4kQ"};
+styleInject(css_248z$y);
+
+const Select = (props) => {
+    var _a, _b, _c;
+    const { id, className, options = [], value, multiple, multipleMaxCountItems = 5, disabled, readOnly, onChange, onKeyDown } = props;
+    const [model, setModel] = useState('');
+    const [hoverIndex, setHoverIndex] = useState(null);
+    const [isShow, setIsShow] = useState(false);
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const selectConainter = useRef(null);
+    const getCssClass = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        disabled && cssClasses.push(styles$y['disabled']);
+        readOnly && cssClasses.push(styles$y['readOnly']);
+        cssClasses.push(styles$y.select);
+        return cssClasses.filter(r => r).join(' ');
+    };
+    useEffect(() => {
+        const newValue = value ? value : '';
+        writeValue(newValue);
+        if (newValue) {
+            const option = options.find(o => o.value === newValue);
+            if (option) {
+                setHoverIndex(options.indexOf(option));
+            }
+        }
+    }, [value, options]);
+    useEffect(() => {
+        if (hoverIndex) {
+            scrollIntoView(hoverIndex);
+        }
+    }, [hoverIndex, isShow]);
+    const scrollIntoView = (index) => {
+        var _a;
+        const htmlListItem = (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.querySelector(`#list-item-${index}`);
+        if (htmlListItem) {
+            htmlListItem === null || htmlListItem === void 0 ? void 0 : htmlListItem.scrollIntoView({ block: "end", behavior: "smooth" });
+        }
+    };
+    const writeValue = (val) => setModel(val);
+    useEffect(() => {
+        if (!multiple) {
+            const newOption = options.find(o => o.value === model);
+            if (newOption) {
+                setSelectedOptions([newOption]);
+            }
+        }
+        else {
+            const filteredOptions = options.filter(o => model.indexOf(o.value) >= 0);
+            setSelectedOptions([...filteredOptions]);
+        }
+    }, [model, multiple]);
+    const handleOnClick = (option) => {
+        let newValue = multiple ? [] : '';
+        if (!multiple) {
+            if (model !== option.value) {
+                newValue = option.value;
+                onChange && onChange(newValue);
+            }
+            hide();
+        }
+        else {
+            const selectedOption = selectedOptions.find(o => o.value === option.value);
+            if (selectedOption) {
+                newValue = selectedOptions.filter(o => o.value !== option.value).map(o => o.value);
+            }
+            else {
+                newValue = newValue.concat(selectedOptions.map(o => o.value));
+                newValue.push(option.value);
+            }
+            onChange && onChange(newValue);
+        }
+        writeValue(newValue);
+    };
+    const show = () => {
+        if (!disabled && !readOnly) {
+            setIsShow(true);
+        }
+    };
+    const hide = () => setIsShow(false);
+    const isActive = (option) => {
+        return selectedOptions.indexOf(option) >= 0 || hoverIndex === options.indexOf(option);
+    };
+    const renderSingleViewModel = () => {
+        let result = null;
+        if (selectedOptions.length > 0) {
+            result = React.createElement("span", null, selectedOptions[0].label);
+        }
+        return result;
+    };
+    const renderMultipleViewModel = () => {
+        let result = null;
+        if (selectedOptions.length <= multipleMaxCountItems && selectedOptions.length > 0) {
+            result = selectedOptions
+                .map(option => React.createElement(Chip, { key: option.value, className: "mr-2", color: COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option) }, option.label));
+        }
+        else {
+            result = React.createElement("span", null,
+                selectedOptions.length,
+                " Items selected");
+        }
+        return result;
+    };
+    const handleOnDelete = (event, option) => {
+        event.stopPropagation();
+        handleOnClick(option);
+    };
+    // TODO - extract with wrapper?
+    const handleOnKeyDown = (e) => {
+        if (isShow) {
+            onKeyDown && onKeyDown(e);
+            switch (e.code) {
+                case 'Escape':
+                    hide();
+                    break;
+                case 'ArrowDown':
+                    if (hoverIndex) {
+                        setHoverIndex(hoverIndex + 1);
+                    }
+                    break;
+                case 'ArrowUp':
+                    // TODO
+                    if (hoverIndex) {
+                        setHoverIndex(hoverIndex - 1);
+                    }
+                    break;
+                case 'Enter':
+                    if (hoverIndex) {
+                        const option = options[hoverIndex];
+                        if (option)
+                            handleOnClick(option);
+                    }
+                    break;
+            }
+        }
+    };
+    return (React.createElement("div", { ref: selectConainter, className: styles$y.selectContainer },
+        React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
+            !multiple && renderSingleViewModel(),
+            multiple && renderMultipleViewModel(),
+            React.createElement(Icon, { className: "ml-auto" },
+                React.createElement(ChevronDownSolidIcon, null))),
+        isShow &&
+            createPortal(React.createElement(React.Fragment, null,
+                React.createElement("div", { className: styles$y.selectMenu, style: { left: (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x, top: (_b = selectConainter.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().y, width: (_c = selectConainter.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width } },
+                    React.createElement(List, null, options && options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
+                        multiple &&
+                            React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
+                        React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
+                React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body)));
+};
+
+var css_248z$x = ".Textarea-module_textarea__L5zqa {\n  min-height: calc(10em + 0.75rem + 2px);\n  display: block;\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  background-clip: padding-box;\n  border: 2px solid var(--input-border-color);\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border-radius: var(--borderRadius);\n  resize: vertical;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px #00000013;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  border: 1px solid #ced4da; }\n  .Textarea-module_textarea__L5zqa:focus:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\n    outline: none !important;\n    border-color: var(--primary); }\n  .Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n    border-color: #dc3545;\n    box-shadow: 0 0 0 0.25rem #dc354540; }\n";
+var styles$x = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
+styleInject(css_248z$x);
+
+const Textarea = (props) => {
+    const { className, error } = props, rest = __rest(props, ["className", "error"]);
+    const getCssClass = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$x.textarea);
+        className && cssClasses.push(className);
+        error && cssClasses.push(styles$x['isInvalid']);
+        return cssClasses.filter(r => r).join(' ');
+    };
+    return (React.createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
+};
+
+var css_248z$w = ".FormInput-module_formInput__VXZip {\n  display: block;\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  -webkit-appearance: none;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n  .FormInput-module_formInput__VXZip:focus:not(.FormInput-module_formInput__VXZip.FormInput-module_disabled__EjdD9) {\n    color: #212529;\n    background-color: #fff;\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }\n  .FormInput-module_formInput__VXZip.FormInput-module_isInvalid__vQDuz {\n    border-color: #dc3545;\n    box-shadow: 0 0 0 0.25rem #dc354540; }\n";
+var styles$w = {"formInput":"FormInput-module_formInput__VXZip","disabled":"FormInput-module_disabled__EjdD9","isInvalid":"FormInput-module_isInvalid__vQDuz"};
+styleInject(css_248z$w);
+
+const FormInput = (props) => {
+    const { value, name, type, placeholder, className, isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$w.formInput);
+        className && cssClasses.push(className);
+        !isValid && cssClasses.push(styles$w['isInvalid']);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleOnInput = (value, type, name) => {
+        onInput && onInput({ value, type, name });
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleOnChange = (value, type, name) => {
+        onChange && onChange({ value, type, name });
+    };
+    return (React.createElement(Fragment, null,
+        (type === 'text' ||
+            type === 'date' ||
+            type === 'datetime-local' ||
+            type === 'email' ||
+            type === 'number' ||
+            type === 'password' ||
+            type === 'color' ||
+            type === 'time')
+            &&
+                React.createElement("input", { id: name, name: name, type: type, className: getCssClasses(), value: value, autoFocus: autoFocus, onInput: e => handleOnInput(e.target.value, type, name), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), onBlur: onBlur, placeholder: placeholder, readOnly: readonly, disabled: disabled, onKeyDown: onKeyDown }),
+        type === 'file' &&
+            React.createElement(FileInput, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, readOnly: readonly, disabled: disabled, onChange: e => handleOnChange(e.target.value, type, name) }, "choose a file"),
+        type === 'textarea' &&
+            React.createElement(Textarea, { id: name, name: name, className: className, error: !isValid, value: value, autoFocus: autoFocus, onInput: e => handleOnInput(e.target.value, type, name), onChange: e => handleOnChange(e.target.value, type, name), placeholder: placeholder, rows: textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.rows, style: (textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.resize) !== false ? undefined : { resize: 'none' } }),
+        type === 'select' &&
+            React.createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.multiple, onChange: e => handleOnChange(e, type, name), 
+                // onKeyDown={e => onKeyDown(e)}
+                options: options }),
+        type === 'autocomplete' &&
+            React.createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e => handleOnChange(e, type, name), options: options }),
+        type === 'checkbox' &&
+            React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).checked, type, name), checked: value }),
+        type === 'radio' &&
+            React.createElement(React.Fragment, null, options.map((option) => React.createElement("div", { className: "form-check", key: option.id },
+                React.createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), value: option.value, checked: value === option.value, onKeyDown: onKeyDown }),
+                React.createElement("label", { className: "form-check-label", htmlFor: option.id }, option.label))))));
+};
+
+const FormHint = (props) => {
+    const { children, className = 'form-text text-muted' } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("small", { className: getCssClasses() }, children));
+};
+
+var css_248z$v = ".FormError-module_isInvalid__tO1Sw {\n  width: 100%;\n  margin-top: 0.25rem;\n  font-size: 0.875em;\n  color: #dc3545; }\n";
+var styles$v = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
+styleInject(css_248z$v);
+
+const FormError = (props) => {
+    const { className = styles$v.isInvalid, errors = [] } = props;
+    return (React.createElement(Fragment, null, errors &&
+        React.createElement("div", { className: className }, errors.map(e => React.createElement("div", { key: e.validator }, e.message)))));
+};
+
+const IsEmptyValidator = (value) => value.trim() === '' || value === null || value === undefined;
+
+const EmailValidator = (value) => {
+    const isInvalidEmailFormat = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i) === null;
+    const isInvalid = !IsEmptyValidator(value) && isInvalidEmailFormat;
+    return isInvalid;
+};
+
+const IsEqualValidator = (valueA, valueB) => valueA === valueB;
+
+// values, isSubmitting, handleChange, handleBlur, handleSubmit
+class Form extends Component {
+    constructor(props) {
+        super(props);
+        this.myForm = createRef();
+        this.state = { controls: undefined, isValid: false, isChanged: false, isSubmitted: false, submitOnEnter: props.submitOnEnter !== undefined ? props.submitOnEnter : true };
+    }
+    static getDerivedStateFromProps(nextProps, state) {
+        if (!state.controls && nextProps.controls) {
+            return ({ controls: nextProps.controls });
+        }
+        return null;
+    }
+    handleChange() {
+        // get value by myForm instead of getControl?
+        if (this.state.isChanged || this.state.isSubmitted) {
+            const keys = Object.keys(this.state.controls);
+            const values = keys.reduce((obj, f) => {
+                const control = this.getControl(f);
+                // TODO - refactor
+                const newValue = ((control.type === 'date' || control.type === 'datetime-local') && control.value && isValidDate((control.value))) ? new Date((control.value)).toISOString() : control.value;
+                return (Object.assign(Object.assign({}, obj), { [f]: newValue }));
+            }, {});
+            if (this.state.isValid && this.state.isSubmitted) {
+                this.props.onSubmit && this.props.onSubmit(values);
+            }
+            this.props.onChange && this.props.onChange(values);
+            this.setState({ isChanged: false, isSubmitted: false });
+        }
+    }
+    // extract to service?
+    validateField(fieldValue, fieldValidators) {
+        const errors = [];
+        if (fieldValidators) {
+            for (const validator of fieldValidators) {
+                const validatorSplitted = validator.split(':');
+                const validatorName = validatorSplitted[0];
+                const validatorParam = validatorSplitted.length > 1 ? validatorSplitted[1] : null;
+                switch (validatorName) {
+                    case 'required':
+                        if (IsEmptyValidator(fieldValue)) {
+                            errors.push({ validator: validatorName, message: 'This field is required' });
+                        }
+                        break;
+                    case 'email':
+                        if (EmailValidator(fieldValue)) {
+                            errors.push({ validator: validatorName, message: 'Email format is wrong' });
+                        }
+                        break;
+                    case 'match':
+                        if (validatorParam) {
+                            const matchControl = this.getControl(validatorParam);
+                            if (matchControl) {
+                                if (!IsEqualValidator(fieldValue, matchControl.value)) {
+                                    errors.push({ validator: validatorName, message: 'Values do not match' });
+                                }
+                            }
+                            else {
+                                console.error(`Form: Field ${validatorParam} not found`);
+                            }
+                        }
+                        break;
+                }
+            }
+        }
+        return errors;
+    }
+    handleInputChange(name, value) {
+        const field = this.getControl(name);
+        field.value = value;
+        // redundant mit handleOnBlur
+        field.isDirty = true;
+        field.errors = this.validateField(field.value, field.validators);
+        field.isValid = field.errors.length === 0;
+        const newControls = Object.assign({}, this.state.controls);
+        newControls[name] = field;
+        this.setState({ controls: newControls, isChanged: true }, () => this.handleChange());
+    }
+    handleOnBlur(e) {
+        if (this.props.validateOnBlur) {
+            const { name } = e.target;
+            const field = this.getControl(name);
+            field.isDirty = true;
+            field.errors = this.validateField(field.value, field.validators);
+            field.isValid = field.errors.length === 0;
+            const controls = this.state.controls;
+            if (controls) {
+                controls[name] = field;
+                this.setState({ controls: controls, isChanged: true }, () => this.handleChange());
+            }
+        }
+    }
+    isRequired(fieldName) {
+        let result = false;
+        result = this.getControl(fieldName).validators.indexOf('required') >= 0;
+        return result;
+    }
+    isInvalid(fieldName) {
+        let result = false;
+        const field = this.getControl(fieldName);
+        result = field.isDirty && !field.isValid;
+        return result;
+    }
+    getControl(name) {
+        return this.state.controls[name];
+    }
+    renderLabel(fieldKey, label, labelClassName = 'form-label') {
+        const cssClasses = [labelClassName, this.isRequired(fieldKey) ? 'required' : undefined];
+        return React.createElement(FormLabel, { htmlFor: fieldKey, className: cssClasses.join(' ') }, label);
+    }
+    // trigger via ref
+    handleFormSubmit() {
+        for (const fieldKey of Object.keys(this.state.controls)) {
+            const field = this.getControl(fieldKey);
+            // redundant mit handleBlur
+            field.isDirty = true;
+            field.errors = this.validateField(field.value, field.validators);
+            field.isValid = field.errors.length === 0;
+        }
+        this.setState({
+            controls: Object.assign({}, this.state.controls),
+            isSubmitted: true,
+            isValid: Object.keys(this.state.controls).map(f => this.getControl(f).isValid).every(valid => valid === true)
+        }, () => this.handleChange());
+    }
+    // trigger via ref
+    handleFormReset() {
+        for (const fieldKey of Object.keys(this.state.controls)) {
+            const field = this.getControl(fieldKey);
+            field.value = '';
+            field.isDirty = false;
+            field.errors = [];
+            field.isValid = field.errors.length === 0;
+        }
+        this.setState({
+            controls: Object.assign({}, this.state.controls),
+            isSubmitted: false,
+            isChanged: false,
+            isValid: false
+        });
+    }
+    handleOnKeyDown(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.state.submitOnEnter && this.handleFormSubmit();
+        }
+    }
+    destroy() {
+        this.setState({ controls: {}, isValid: false, isChanged: false, isSubmitted: false });
+    }
+    getFormGroupCssClass(fieldKey) {
+        const result = this.getControl(fieldKey).config.formGroupClassName;
+        return result;
+    }
+    render() {
+        return (React.createElement("form", { ref: this.myForm }, this.state && this.state.controls && Object.keys(this.state.controls).map((fieldKey) => {
+            return (React.createElement(FormGroup, { key: fieldKey, className: this.getFormGroupCssClass(fieldKey) },
+                this.getControl(fieldKey).config.labelPosition !== 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
+                    this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
+                React.createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: ({ name, value }) => this.handleInputChange(name, value), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
+                this.getControl(fieldKey).config.labelPosition === 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
+                    this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
+                this.getControl(fieldKey).config.hint &&
+                    React.createElement(FormHint, null, this.getControl(fieldKey).config.hint),
+                this.getControl(fieldKey).errors &&
+                    React.createElement(FormError, { errors: this.getControl(fieldKey).errors })));
+        })));
+    }
+}
+function isValidDate(dateObject) {
+    return new Date(dateObject).toString() !== 'Invalid Date';
+}
+
+class FormControl {
+    constructor(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value, validators = [], type, config) {
+        this.value = value;
+        this.validators = validators;
+        this.type = type;
+        this.config = config;
+        this.errors = [];
+        this.isValid = false;
+        this.isDirty = false;
+    }
+}
+
+const DaySelect = (props) => {
+    const { className, day = new Date().getDate(), month = new Date().getMonth(), year = new Date().getFullYear(), disabled, id, name, onChange } = props;
+    useEffect(() => {
+        init();
+    }, [month, year]);
+    const init = () => {
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const newDays = [];
+        for (let i = 1; i <= daysInMonth; i++) {
+            newDays.push({ value: i.toString(), label: i.toString() });
+        }
+        setDayOptions(newDays);
+    };
+    const [value, setValue] = useState(day);
+    const [dayOptions, setDayOptions] = useState();
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleOnChange = (e) => {
+        setValue(e);
+        onChange && onChange(e);
+    };
+    return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: dayOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: value.toString() }));
+};
+
+const MonthSelect = (props) => {
+    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    const { className, value = new Date().getMonth(), id, name, disabled, onChange } = props;
+    const [newValue, setNewValue] = useState(value);
+    const [monthOptions, setMonthOptions] = useState();
+    useEffect(() => {
+        setMonthOptions(months.map((m, index) => ({ value: index.toString(), label: m })));
+    }, []);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleOnChange = (e) => {
+        setNewValue(e);
+        onChange && onChange(e);
+    };
+    return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: monthOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
+};
+
+const YearSelect = (props) => {
+    const { className, from = 1970, to = new Date().getFullYear().toString(), value = new Date().getFullYear().toString(), id, name, disabled, onChange } = props;
+    const [newValue, setNewValue] = useState(value.toString());
+    const [years, setYears] = useState();
+    useEffect(() => {
+        const newYears = [];
+        for (let i = from; i <= to; i++) {
+            newYears.push({ value: i.toString(), label: i.toString() });
+        }
+        setYears(newYears.reverse());
+    }, [from, to]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleOnChange = (e) => {
+        setNewValue(e);
+        onChange && onChange(parseInt(e));
+    };
+    return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: years, onChange: handleOnChange, disabled: disabled, value: newValue }));
+};
+
+var DATEMODE;
+(function (DATEMODE) {
+    DATEMODE[DATEMODE["YEAR"] = 0] = "YEAR";
+    DATEMODE[DATEMODE["MONTH"] = 1] = "MONTH";
+    DATEMODE[DATEMODE["DAY"] = 2] = "DAY";
+})(DATEMODE || (DATEMODE = {}));
+const DateSelect = (props) => {
+    const { className, value = new Date(), disabled, yearConfig, onChange } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push('row');
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const [currDate, setCurrDate] = useState(value);
+    const handleOnChange = (e, mode) => {
+        const currYear = mode === DATEMODE.YEAR ? e : currDate.getFullYear();
+        const currMonth = mode === DATEMODE.MONTH ? e : currDate.getMonth();
+        const currday = mode === DATEMODE.DAY ? e : currDate.getDate();
+        const newDate = new Date(currYear, currMonth, currday);
+        setCurrDate(newDate);
+        onChange && onChange(newDate);
+    };
+    return (React.createElement(Row, { className: getCssClasses() },
+        React.createElement(Column, null,
+            React.createElement(FormLabel, null, "Year"),
+            React.createElement(YearSelect, { value: currDate.getFullYear(), disabled: disabled, from: yearConfig === null || yearConfig === void 0 ? void 0 : yearConfig.from, to: yearConfig === null || yearConfig === void 0 ? void 0 : yearConfig.to, onChange: e => handleOnChange(e, DATEMODE.YEAR) })),
+        React.createElement(Column, null,
+            React.createElement(FormLabel, null, "Month"),
+            React.createElement(MonthSelect, { value: currDate.getMonth(), disabled: disabled, onChange: e => handleOnChange(e, DATEMODE.MONTH) })),
+        React.createElement(Column, null,
+            React.createElement(FormLabel, null, "Day"),
+            React.createElement(DaySelect, { day: currDate.getDate(), month: currDate.getMonth(), year: currDate.getFullYear(), disabled: disabled, onChange: e => handleOnChange(e, DATEMODE.DAY) }))));
+};
+/*
+* result = { year, month, day, dayOfWeek, weekNumber }
+*/
+// const getWeekNumber = () => {
+// 	var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
+// 	var dayNum = d.getUTCDay() || 7;
+// 	d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+// 	var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+// 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
+// };
+
+var css_248z$u = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 280px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n    box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
+var styles$u = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
+styleInject(css_248z$u);
+
+const Drawer = (props) => {
+    const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
+    useEffect(() => {
+        document.body.classList.add(styles$u.drawerOpen);
+        return () => {
+            document.body.classList.remove(styles$u.drawerOpen);
+        };
+    }, []);
+    const handleClickBackdrop = () => {
+        onClickBackdrop && onClickBackdrop();
+    };
+    return createPortal(React.createElement(React.Fragment, null,
+        React.createElement(DrawerContent, Object.assign({ className: className, position: position, permanent: permanent, shadow: shadow }, rest), children),
+        !permanent && React.createElement(Backdrop, { onClick: handleClickBackdrop })), target);
+};
+const DrawerContent = (props) => {
+    const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$u.drawer);
+        shadow && cssClasses.push(styles$u.shadow);
+        !!permanent && cssClasses.push(styles$u['permanent']);
+        position === 'left' ? cssClasses.push(styles$u['left']) : cssClasses.push(styles$u['right']);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const positionStyles = {
+        left: { left: '0px' },
+        right: { right: '0px' },
+    };
+    const getStyles = () => {
+        return !permanent ? positionStyles[position] : undefined;
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
+};
+
+var css_248z$t = ".MenuBody-module_menuBody__u4FIQ {\n  z-index: 1111;\n  margin: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  min-width: 10rem;\n  padding: 8px 0px;\n  font-size: 1rem;\n  color: #212529;\n  text-align: left;\n  list-style: none;\n  background-color: #fff;\n  background-clip: padding-box;\n  border-radius: var(--borderRadius); }\n  .MenuBody-module_menuBody__u4FIQ.MenuBody-module_shadow__OBp-f {\n    box-shadow: var(--shadow); }\n";
+var styles$t = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
+styleInject(css_248z$t);
+
+const MenuBody = (props) => {
+    const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
+    const menuBodyRef = useRef(null);
+    useEffect(() => {
+        if (menuBodyRef && parentRef.current && menuBodyRef.current) {
+            createPopper(parentRef.current, menuBodyRef.current, {
+                placement: `${menuPosition}-start`,
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            offset: ({ placement, popper }) => {
+                                if (placement === 'left-start') {
+                                    return [0, -popper.width]; // y, x
+                                }
+                                if (placement === 'right-start') {
+                                    return [0, -popper.width];
+                                }
+                                return [];
+                            },
+                        },
+                    },
+                ]
+            });
+        }
+    }, [menuBodyRef]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$t.menuBody);
+        shadow && cssClasses.push(styles$t.shadow);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleClickBackdrop = () => {
+        onClickBackdrop && onClickBackdrop();
+    };
+    return (createPortal(React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: menuBodyRef, className: getCssClasses() }, children),
+        React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
+};
+
+var css_248z$s = ".Menu-module_menu__p8QL- {\n  display: flex; }\n";
+var styles$s = {"menu":"Menu-module_menu__p8QL-"};
+styleInject(css_248z$s);
+
+const Menu = (props) => {
+    const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
+    const menuContainer = useRef(null);
+    const toggleContainerRef = useRef(null);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$s.menu);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleClickBackdrop = () => {
+        onClickBackdrop && onClickBackdrop();
+    };
+    return (React.createElement("div", Object.assign({ ref: menuContainer, className: getCssClasses() }, rest),
+        React.createElement("div", { ref: toggleContainerRef }, toggle),
+        open &&
+            React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
+};
+
+var css_248z$r = ".MenuItem-module_menuItem__MeBxN {\n  display: flex;\n  width: 100%;\n  padding: 0.25rem 1.5rem;\n  clear: both;\n  font-weight: 400;\n  color: #212529;\n  text-align: inherit;\n  text-decoration: none;\n  white-space: nowrap;\n  background-color: transparent;\n  border: 0; }\n  .MenuItem-module_menuItem__MeBxN.MenuItem-module_menuItemHeader__2l732 {\n    margin-bottom: 0;\n    font-size: 0.875rem; }\n  .MenuItem-module_menuItem__MeBxN:hover {\n    cursor: pointer;\n    color: #1e2125;\n    background-color: rgba(0, 0, 0, 0.04); }\n";
+var styles$r = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
+styleInject(css_248z$r);
+
+const MenuItem = (props) => {
+    const { children, onClick, type = 'item' } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$r.menuItem);
+        if (type === 'header') {
+            cssClasses.push(styles$r.menuItemHeader);
+        }
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleClick = (e) => {
+        e.stopPropagation();
+        onClick && onClick(e);
+    };
+    return (React.createElement(ConditionalWrapper, { condition: true, wrapper: children => ((type === 'item' ? (React.createElement("a", { className: getCssClasses(), onClick: handleClick }, children)) :
+            React.createElement("div", { className: getCssClasses(), onClick: handleClick }, children))) }, children));
+};
+
+const MenuToggle = ({ children }) => {
+    return (React.createElement(Fragment, null, children));
+};
+
+var css_248z$q = ".MenuDivider-module_menuItemDivider__oRP-j {\n  height: 0;\n  margin: 0.5rem 0;\n  overflow: hidden;\n  border-top: 1px solid #e9ecef; }\n";
+var styles$q = {"menuItemDivider":"MenuDivider-module_menuItemDivider__oRP-j"};
+styleInject(css_248z$q);
+
+const MenuDivider = () => React.createElement("div", { className: styles$q.menuItemDivider });
+
+var css_248z$p = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n  padding: 8px 16px 16px; }\n";
+var styles$p = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
+styleInject(css_248z$p);
+
+const ExpansionPanelContent = ({ children }) => {
+    return (React.createElement("div", { className: styles$p.expansionPanelContent }, children));
+};
+
+var css_248z$o = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n  min-height: 48px; }\n  .ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n    cursor: pointer;\n    background-color: var(--highlight); }\n";
+var styles$o = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
+styleInject(css_248z$o);
+
+const ExpansionPanelHeader = (props) => {
+    const { children, isExpanded, onClick } = props;
+    const handleClick = (e) => {
+        e.stopPropagation();
+        onClick && onClick(e);
+    };
+    return (React.createElement("div", { className: styles$o.expansionPanelHeader, onClick: handleClick },
+        children,
+        React.createElement("span", { className: "ml-auto text-muted" },
+            React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
+};
+
+var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n  background-color: var(--white);\n  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n  .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph {\n    margin: 16px 0; }\n    .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n      margin-top: 0; }\n    .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n      margin-bottom: 0; }\n";
+var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
+styleInject(css_248z$n);
+
+const ExpansionPanel = (props) => {
+    const { header, children, isExpanded = false, onChange } = props;
+    const [_isExpanded, setIsExpanded] = useState(false);
+    useEffect(() => {
+        setIsExpanded(isExpanded);
+    }, [isExpanded]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$n.expansionPanel);
+        if (_isExpanded) {
+            cssClasses.push(styles$n.isExpanded);
+        }
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleClickHeader = (event) => {
+        setIsExpanded(!_isExpanded);
+        onChange && onChange(event, !_isExpanded);
+    };
+    return (React.createElement("div", { className: getCssClasses() },
+        React.createElement(ExpansionPanelHeader, { isExpanded: _isExpanded, onClick: handleClickHeader }, header),
+        _isExpanded &&
+            React.createElement(ExpansionPanelContent, null, children)));
+};
+
+var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow); }\n  .FloatingActionButton-module_fab__Rw3kd.FloatingActionButton-module_fixed__XQOkG {\n    position: fixed;\n    bottom: 16px;\n    right: 16px;\n    z-index: 1000; }\n";
+var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG"};
+styleInject(css_248z$m);
+
+const FloatingActionButton = (props) => {
+    const { className, icon, color = COLOR.primary, fixed, size = SIZE.lg, isActive, disabled, onClick } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$m.fab);
+        fixed && cssClasses.push(styles$m['fixed']);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleClick = (e) => {
+        e.stopPropagation();
+        onClick && onClick(e);
+    };
+    return (React.createElement(IconButton, { className: getCssClasses(), color: color, size: size, isActive: isActive, disabled: disabled, icon: icon, variant: VARIANT.contained, onClick: handleClick }));
+};
+
+var css_248z$l = ".Link-module_link__YlJQl {\n  color: var(--primary);\n  text-decoration: underline; }\n  .Link-module_link__YlJQl:hover {\n    color: var(--primary-dark); }\n";
+var styles$l = {"link":"Link-module_link__YlJQl"};
+styleInject(css_248z$l);
+
+const Link = (props) => {
+    const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
+    const [status, setStatus] = useState(STATUS.NORMAL);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$l.link);
+        className && cssClasses.push(className);
+        status !== STATUS.NORMAL && cssClasses.push(status);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const onMouseEnter = () => {
+        setStatus(STATUS.HOVERED);
+    };
+    const onMouseLeave = () => {
+        setStatus(STATUS.NORMAL);
+    };
+    return (React.createElement("a", Object.assign({ className: getCssClasses(), href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
+};
+
+var css_248z$k = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%; }\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n  animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n  animation-duration: 5000ms;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  width: 24px;\n  height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n  from {\n    transform: rotate(0deg); }\n  to {\n    transform: rotate(360deg); } }\n";
+var styles$k = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
+styleInject(css_248z$k);
+
+const LoadingIndicator = (_a) => {
+    var rest = __rest(_a, []);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$k.loadingIndicator);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
+        React.createElement(SpinnerSolidIcon, null)));
+};
+
+const LoadingIndicatorContainer = ({ children }) => {
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$k.loadingIndicatorContainer);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", { className: getCssClasses() }, children));
+};
+
+class LoadingIndicatorService {
+    show() {
+        if (this.container) {
+            this.hide();
+        }
+        this.container = document.createElement('div');
+        this.container.classList.add('snackbar-container');
+        document.body.appendChild(this.container);
+        render(React.createElement(LoadingIndicatorContainer, null,
+            React.createElement(LoadingIndicator, null)), this.container);
+    }
+    hide() {
+        if (this.container) {
+            unmountComponentAtNode(this.container);
+            document.body.removeChild(this.container);
+            this.container = undefined;
+            this.handler && clearTimeout(this.handler);
+        }
+    }
+}
+const loadingIndicatorService = new LoadingIndicatorService();
+
+var css_248z$j = ".ModalHeader-module_modalHeader__tw-u- {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 1rem;\n  border-top-left-radius: calc(0.3rem - 1px);\n  border-top-right-radius: calc(0.3rem - 1px);\n  border-bottom: none;\n  align-items: center; }\n\n.ModalHeader-module_modalTitle__2xShH {\n  margin-bottom: 0;\n  line-height: 1.5; }\n";
+var styles$j = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
+styleInject(css_248z$j);
+
+const ModalHeader = (props) => {
+    const { children, isDismissable = false, onClose } = props, rest = __rest(props, ["children", "isDismissable", "onClose"]);
+    const handleClick = () => {
+        onClose && onClose();
+    };
+    return (React.createElement("div", Object.assign({ className: styles$j.modalHeader }, rest),
+        React.createElement("h5", { className: styles$j.modalTitle }, children),
+        isDismissable &&
+            React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
+};
+
+var css_248z$i = ".ModalBody-module_modalBody__D-gk2 {\n  position: relative;\n  flex: 1 1 auto;\n  padding: 1rem; }\n";
+var styles$i = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
+styleInject(css_248z$i);
+
+const ModalBody = ({ children }) => (React.createElement("div", { className: styles$i.modalBody }, children));
+
+var css_248z$h = ".ModalFooter-module_modalFooter__SNm-f {\n  display: flex;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0.75rem;\n  border-bottom-right-radius: calc(0.3rem - 1px);\n  border-bottom-left-radius: calc(0.3rem - 1px); }\n  .ModalFooter-module_modalFooter__SNm-f > * {\n    margin: 0.25rem; }\n";
+var styles$h = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
+styleInject(css_248z$h);
+
+const ModalFooter = ({ children }) => (React.createElement("div", { className: styles$h.modalFooter }, children));
+
+var css_248z$g = ".Modal-module_modal__HMxWV {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  outline: 0;\n  z-index: 1111 !important;\n  border-radius: var(--borderRadius); }\n  .Modal-module_modal__HMxWV .Modal-module_sm__CsR6U {\n    max-width: 300px; }\n  .Modal-module_modal__HMxWV .Modal-module_md__lNggx {\n    max-width: 500px; }\n  .Modal-module_modal__HMxWV .Modal-module_lg__6dtT2 {\n    max-width: 1140px; }\n  @media (min-width: 576px) {\n    .Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf {\n      max-width: 600px; } }\n\n.Modal-module_modalDialog__fNqyK {\n  position: relative;\n  width: auto;\n  pointer-events: none; }\n  @media (min-width: 576px) {\n    .Modal-module_modalDialog__fNqyK {\n      max-width: 500px;\n      margin: 1.75rem auto; } }\n\n.Modal-module_modalDialogCentered__sa2wv {\n  min-height: calc(100% - 3.5rem);\n  display: flex;\n  align-items: center; }\n\n.Modal-module_modalContent__9wAwB {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  pointer-events: auto;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n  border-radius: 0.3rem;\n  box-shadow: 0 0.125rem 0.25rem black;\n  outline: 0; }\n\n.Modal-module_fullscreen__iepGa {\n  width: 100% !important;\n  height: 100% !important;\n  max-height: 100% !important;\n  margin: 0;\n  padding: 0; }\n  .Modal-module_fullscreen__iepGa .Modal-module_modalContent__9wAwB {\n    height: auto;\n    min-height: 100%;\n    max-height: 100%;\n    border-radius: 0;\n    overflow: auto; }\n  @media (min-width: 320px) {\n    .Modal-module_fullscreen__iepGa {\n      max-width: 100% !important; } }\n";
+var styles$g = {"modal":"Modal-module_modal__HMxWV","sm":"Modal-module_sm__CsR6U","md":"Modal-module_md__lNggx","lg":"Modal-module_lg__6dtT2","modal-dialog":"Modal-module_modal-dialog__U2wGf","modalDialog":"Modal-module_modalDialog__fNqyK","modalDialogCentered":"Modal-module_modalDialogCentered__sa2wv","modalContent":"Modal-module_modalContent__9wAwB","fullscreen":"Modal-module_fullscreen__iepGa"};
+styleInject(css_248z$g);
+
+const Modal = (props) => {
+    const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
+    const getCssClass = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$g.modalDialog);
+        cssClasses.push(styles$g.modalDialogCentered);
+        fullScreen && cssClasses.push(styles$g.fullscreen);
+        size && cssClasses.push(styles$g[size]);
+        className && cssClasses.push(className);
+        return cssClasses.filter(r => r).join(' ');
+    };
+    useEffect(() => {
+        document.body.classList.add('modal-open');
+        return () => {
+            document.body.classList.remove('modal-open');
+        };
+    }, []);
+    const handleClickBackdrop = () => {
+        onBackdropClick && onBackdropClick();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: styles$g.modal },
+            React.createElement("div", { className: getCssClass() },
+                React.createElement("div", { className: styles$g.modalContent },
+                    header &&
+                        React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
+                    React.createElement(ModalBody, null, children),
+                    footer &&
+                        React.createElement(ModalFooter, null, footer)))),
+        React.createElement(Backdrop, { onClick: handleClickBackdrop })));
+};
+
+// export enum MODALRESULT { OK = 'OK', CANCEL = 'CANCEL', DELETE = 'DELETE' }
+var MODALTYPE;
+(function (MODALTYPE) {
+    MODALTYPE["BASIC"] = "BASIC";
+    MODALTYPE["FORM"] = "FORM";
+})(MODALTYPE || (MODALTYPE = {}));
+var MODALBUTTONTYPE;
+(function (MODALBUTTONTYPE) {
+    MODALBUTTONTYPE["OK"] = "OK";
+    MODALBUTTONTYPE["CANCEL"] = "CANCEL";
+    MODALBUTTONTYPE["RESET"] = "RESET";
+    MODALBUTTONTYPE["DEFAULT"] = "DEFAULT";
+})(MODALBUTTONTYPE || (MODALBUTTONTYPE = {}));
+
+const GlobalModal = ({ title, description, formControls, onOk, onCancel, isDismissable = false, buttons = [
+    { label: 'Cancel', type: MODALBUTTONTYPE.CANCEL, color: COLOR.secondary, variant: VARIANT.text, shadow: false },
+    { label: 'Ok', type: MODALBUTTONTYPE.OK, variant: VARIANT.contained, focus: true },
+], size = SIZE.md, fullScreen = false }) => {
+    // workaround for getDerivedStateFromProps
+    const [myControls, setMyControls] = useState(null);
+    useEffect(() => {
+        setMyControls(Object.assign({}, formControls));
+    }, []);
+    // end
+    const modalType = formControls ? MODALTYPE.FORM : MODALTYPE.BASIC;
+    const myForm = useRef(null);
+    const handleOk = () => {
+        var _a;
+        if (modalType === MODALTYPE.FORM) {
+            (_a = myForm === null || myForm === void 0 ? void 0 : myForm.current) === null || _a === void 0 ? void 0 : _a.handleFormSubmit();
+        }
+        else {
+            onOk && onOk();
+        }
+    };
+    const handleCancel = () => {
+        onCancel && onCancel();
+    };
+    const onSubmit = (values) => {
+        onOk && onOk(values);
+    };
+    const handleClickButton = (button) => {
+        switch (button.type) {
+            case MODALBUTTONTYPE.OK:
+                handleOk();
+                break;
+            case MODALBUTTONTYPE.CANCEL:
+                handleCancel();
+                break;
+            default:
+                handleCancel();
+                break;
+        }
+        button.handler && button.handler();
+    };
+    return (React.createElement(Modal, { size: size, fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, isDismissable: isDismissable, footer: React.createElement(Fragment, null, buttons.map((button, index) => (React.createElement(Button, { key: index, variant: button.variant, color: button.color, autoFocus: button.autoFocus, shadow: button.shadow, onClick: () => handleClickButton(button) }, button.label)))) },
+        description && React.createElement("div", null, description),
+        modalType === MODALTYPE.FORM &&
+            React.createElement(Fragment, null,
+                React.createElement(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit }))));
+};
+
+class ModalService {
+    show(title, description, options) {
+        return new Promise((resolve, reject) => {
+            if (!this.container) {
+                this.container = document.createElement('div');
+                document.body.appendChild(this.container);
+                const handleOk = (values) => {
+                    resolve(values);
+                    this.hide();
+                };
+                const handleCancel = () => {
+                    reject();
+                    this.hide();
+                };
+                render(React.createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title, description: description, formControls: options && options.formControls, onCancel: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }), this.container);
+            }
+        });
+    }
+    hide() {
+        if (this.container) {
+            unmountComponentAtNode(this.container);
+            document.body.removeChild(this.container);
+            this.container = undefined;
+        }
+    }
+}
+const modalService = new ModalService();
+
+const NumberSelect = (props) => {
+    const { className, value = 0, from = 0, to = 100, id, name, disabled = false, onChange } = props;
+    const [newValue, setNewValue] = useState(0);
+    const [numberOptions, setNumberOptions] = useState();
+    useEffect(() => {
+        setNewValue(value);
+    }, [value]);
+    useEffect(() => {
+        const options = [];
+        for (let i = from; i <= to; i++) {
+            options.push({ value: i.toString(), label: i.toString() });
+        }
+        setNumberOptions(options);
+    }, [from, to]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleOnChange = (e) => {
+        setNewValue(e);
+        onChange && onChange(e);
+    };
+    return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
+};
+
+class SidebarItemModel {
+    constructor(id, label, path, icon, isActive, items, isCollapsible = false, isCollapsed = false) {
+        this.id = id;
+        this.label = label;
+        this.path = path;
+        this.icon = icon;
+        this.isActive = isActive;
+        this.items = items;
+        this.isCollapsible = isCollapsible;
+        this.isCollapsed = isCollapsed;
+    }
+}
+
+const Sidebar = (props) => {
+    const { className, items, currentUrl, onItemClicked } = props, rest = __rest(props, ["className", "items", "currentUrl", "onItemClicked"]);
+    const [menuItems, setMenuItems] = useState([]);
+    useEffect(() => {
+        if (items && items.length > 0) {
+            initMenuItems();
+        }
+    }, []);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const initMenuItems = () => {
+        const newItems = items.map(item => new SidebarItemModel(item.id, item.label, item.path, item.icon, isMenuItemActive(item.path), item.items && item.items.map(subItem => new SidebarItemModel(subItem.id, subItem.label, subItem.path, subItem.icon, isMenuItemActive(`${item.path}/${subItem.path}`))), item.isCollapsible, item.isCollapsed));
+        setMenuItems(newItems);
+    };
+    const isMenuItemActive = (path) => {
+        const lastSegment = currentUrl.substring(currentUrl.lastIndexOf('/') + 1, currentUrl.length);
+        let result = false;
+        if (currentUrl === '/' && path === '') {
+            result = true;
+        }
+        else if (path !== '') {
+            result = lastSegment ? lastSegment.toLowerCase() === path.toLowerCase() : false;
+        }
+        return result;
+    };
+    const navigate = (e, path) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onItemClicked(path);
+    };
+    const handleClickItem = (item, e) => {
+        if (item.items && item.items.length > 0 && item.isCollapsible) {
+            const newMenuItems = menuItems.map((menuItem) => {
+                if (item.id === menuItem.id) {
+                    menuItem.isCollapsed = !item.isCollapsed;
+                }
+                return menuItem;
+            });
+            setMenuItems(newMenuItems);
+        }
+        else {
+            navigate(e, `/${item.path}`);
+        }
+    };
+    const handleClickSubItem = (itemPath, subItemPath, e) => {
+        navigate(e, `/${itemPath}/${subItemPath}`);
+    };
+    return (React.createElement("nav", Object.assign({ className: getCssClasses() }, rest),
+        React.createElement(List, null, menuItems.map(item => (React.createElement(React.Fragment, { key: item.id },
+            React.createElement(ListItem, { active: isMenuItemActive(item.path), onClick: (e) => handleClickItem(item, e) },
+                React.createElement(ListItemText, { primary: React.createElement(React.Fragment, null,
+                        item.label,
+                        item.items && item.items.length > 0 && (React.createElement("small", { className: "ml-2" },
+                            "(",
+                            item.items.length,
+                            ")"))) }),
+                item.items && item.items.length > 0 &&
+                    React.createElement(ListItemAction, null, item.isCollapsed ? React.createElement(ChevronDownSolidIcon, null) : React.createElement(ChevronUpSolidIcon, null))),
+            !item.isCollapsed && item.items && item.items.length > 0 && (React.createElement(List, { className: "list-level-1", key: `${item.id}-sub` }, item.items.map(subItem => (React.createElement(ListItem, { className: "list-item-level-1", active: isMenuItemActive(subItem.path), key: subItem.id, onClick: (e) => handleClickSubItem(item.path, subItem.path, e) }, subItem.label)))))))))));
+};
+
+var css_248z$f = ".Snackbar-module_snackbar__O5T2b {\n  display: flex;\n  align-items: center;\n  min-width: 288px;\n  padding: 6px 16px;\n  transform-origin: center;\n  min-height: 52px;\n  animation: Snackbar-module_bounceIn__E47iD 0.4s ease;\n  z-index: 1001;\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%);\n  bottom: 2%;\n  border-radius: var(--borderRadius); }\n  .Snackbar-module_snackbar__O5T2b.Snackbar-module_primary__ZBOTN {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .Snackbar-module_snackbar__O5T2b.Snackbar-module_accent__0MnFy {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .Snackbar-module_snackbar__O5T2b.Snackbar-module_secondary__s8-ez {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .Snackbar-module_snackbar__O5T2b.Snackbar-module_light__Vrd7o {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Snackbar-module_snackbar__O5T2b.Snackbar-module_dark__U-5io {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n\n.Snackbar-module_text__G5r5D {\n  width: 100%;\n  padding: 8px 0; }\n\n.Snackbar-module_action__vus2Y {\n  margin-left: auto; }\n  .Snackbar-module_action__vus2Y:hover {\n    cursor: pointer; }\n\n@keyframes Snackbar-module_bounceIn__E47iD {\n  0% {\n    opacity: 0; }\n  50% {\n    opacity: 0.9; }\n  80% {\n    opacity: 1; }\n  100% {\n    opacity: 1; } }\n";
+var styles$f = {"snackbar":"Snackbar-module_snackbar__O5T2b","bounceIn":"Snackbar-module_bounceIn__E47iD","primary":"Snackbar-module_primary__ZBOTN","accent":"Snackbar-module_accent__0MnFy","secondary":"Snackbar-module_secondary__s8-ez","light":"Snackbar-module_light__Vrd7o","dark":"Snackbar-module_dark__U-5io","text":"Snackbar-module_text__G5r5D","action":"Snackbar-module_action__vus2Y"};
+styleInject(css_248z$f);
+
+const Snackbar = (props) => {
+    const { children, color = COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$f.snackbar);
+        cssClasses.push(`shadow-lg`);
+        cssClasses.push(styles$f[color]);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleClickAction = (e) => {
+        onOk && onOk(e);
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
+        React.createElement("div", { className: styles$f.text }, children),
+        React.createElement("div", { className: styles$f.action + " text-accent", onClick: handleClickAction },
+            React.createElement("span", null, actionText))));
+};
+
+class SnackbarService {
+    show(message, options) {
+        const defaultOptions = { timeout: 3000, actionText: 'ok', color: COLOR.dark, target: document.body };
+        const mergedOptions = Object.assign(defaultOptions, options);
+        return new Promise((resolve) => {
+            if (this.container) {
+                this.hide();
+            }
+            this.container = document.createElement('div');
+            this.container.classList.add('snackbar-container');
+            mergedOptions.target.appendChild(this.container);
+            if (mergedOptions.timeout && mergedOptions.timeout > 0) {
+                this.handler = setTimeout(() => {
+                    this.hide();
+                }, mergedOptions.timeout);
+            }
+            const handleOk = () => {
+                resolve();
+                this.hide();
+            };
+            render(React.createElement(Snackbar, { color: mergedOptions.color, actionText: mergedOptions.actionText, onOk: handleOk }, message), this.container);
+        });
+    }
+    hide() {
+        if (this.container) {
+            unmountComponentAtNode(this.container);
+            document.body.removeChild(this.container);
+            this.container = undefined;
+            this.handler && clearTimeout(this.handler);
+        }
+    }
+}
+const snackbarService = new SnackbarService();
+
+var css_248z$e = ".SpeedDialActions-module_speedDialActions__cY2i3 {\n  margin-bottom: -32px;\n  flex-direction: column-reverse;\n  padding-bottom: 48px;\n  display: flex;\n  pointer-events: auto; }\n";
+var styles$e = {"speedDialActions":"SpeedDialActions-module_speedDialActions__cY2i3"};
+styleInject(css_248z$e);
+
+const SpeedDialActions = (props) => {
+    const { children } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$e.speedDialActions);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", { className: getCssClasses() }, children));
+};
+
+var css_248z$d = ".SpeedDial-module_speedDial__W3VN2 {\n  position: absolute;\n  flex-direction: column-reverse;\n  display: flex;\n  z-index: 1050;\n  align-items: center;\n  right: 16px;\n  bottom: 16px;\n  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n";
+var styles$d = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
+styleInject(css_248z$d);
+
+const SpeedDial = (props) => {
+    const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$d.speedDial);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleClick = (e) => {
+        if (open)
+            onClose && onClose(e);
+        else
+            onOpen && onOpen(e);
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
+        React.createElement("div", { style: { 'transform': open ? 'rotate(45deg)' : undefined } },
+            React.createElement(FloatingActionButton, { icon: React.createElement(PlusSolidIcon, null), onClick: handleClick })),
+        open &&
+            React.createElement(SpeedDialActions, null, children)));
+};
+
+var css_248z$c = ".SpeedDialAction-module_speedDialAction__kJLpz + .SpeedDialAction-module_speedDialAction__kJLpz {\n  margin-bottom: 10px; }\n";
+var styles$c = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz"};
+styleInject(css_248z$c);
+
+const SpeedDialAction = (props) => {
+    const { icon, color = COLOR.light, onClick, className } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$c.speedDialAction);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement(IconButton, { className: getCssClasses(), icon: icon, color: color, variant: VARIANT.contained, shadow: true, onClick: onClick }));
+};
+
+const SpeedDialIcon = (props) => {
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z$b = ".StepperActions-module_stepperActions__hBUkh {\n  display: flex; }\n";
+var styles$b = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
+styleInject(css_248z$b);
+
+const StepperActions = (props) => {
+    const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$b.stepperActions);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", { className: getCssClasses() },
+        React.createElement(Button, { className: "mr-2", variant: VARIANT.outline, disabled: isFirstStep, startIcon: !isFirstStep ? React.createElement(ChevronLeftSolidIcon, null) : undefined, onClick: () => onBack && onBack() }, "Back"),
+        React.createElement("div", { className: "ml-auto" },
+            isCompleted && (React.createElement(Button, { className: "mr-2", color: COLOR.secondary, variant: VARIANT.text, onClick: () => onReset && onReset() }, "Reset")),
+            isStepOptional && (React.createElement(Button, { className: "mr-2", variant: VARIANT.contained, color: COLOR.primary, onClick: () => onSkip && onSkip() }, "Skip")),
+            React.createElement(Button, { variant: VARIANT.contained, color: COLOR.primary, startIcon: isCompleted ? React.createElement(CheckSolidIcon, null) : undefined, endIcon: !isCompleted ? React.createElement(ChevronRightSolidIcon, null) : undefined, onClick: () => onNext && onNext() }, isCompleted ? 'Done' : 'Next'))));
+};
+
+const StepPanel = (props) => {
+    const { children } = props;
+    return (React.createElement("div", { className: "steppanel" }, children));
+};
+
+var css_248z$a = ".StepConnector-module_stepConnector__A7A-7 {\n  flex: 1 1 auto;\n  flex-shrink: 0;\n  min-width: 20px; }\n\n.StepConnector-module_stepConnectorLine__8rQxv {\n  display: block;\n  border-color: var(--secondary);\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .StepConnector-module_stepConnectorLine__8rQxv.StepConnector-module_isActive__TUIKV {\n    border-color: var(--primary); }\n\n.StepConnector-module_stepConnectorLineHorizontal__i09K0 {\n  border-top-style: solid;\n  border-top-width: 1px; }\n";
+var styles$a = {"stepConnector":"StepConnector-module_stepConnector__A7A-7","stepConnectorLine":"StepConnector-module_stepConnectorLine__8rQxv","isActive":"StepConnector-module_isActive__TUIKV","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__i09K0"};
+styleInject(css_248z$a);
+
+const StepConnector = (props) => {
+    const { isActive, isHorizontal = true } = props;
+    const getCssClassesConnector = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$a.stepConnector);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const getCssClassesLine = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$a.stepConnectorLine);
+        isActive && cssClasses.push(styles$a['isActive']);
+        isHorizontal && cssClasses.push(styles$a.stepConnectorLineHorizontal);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", { className: getCssClassesConnector() },
+        React.createElement("div", { className: getCssClassesLine() })));
+};
+
+var css_248z$9 = ".Stepper-module_stepper__V6odG {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 10px; }\n  .Stepper-module_stepper__V6odG.Stepper-module_isHorizontal__Q-3Wu {\n    overflow-x: auto; }\n";
+var styles$9 = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Stepper-module_isHorizontal__Q-3Wu"};
+styleInject(css_248z$9);
+
+const Stepper = (props) => {
+    const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
+    const [steps, setSteps] = useState();
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    const [skipped, setSkipped] = React.useState(new Set());
+    useEffect(() => {
+        if (children) {
+            setSteps(React.Children.toArray(children));
+        }
+    }, [children]);
+    useEffect(() => {
+        if (value !== undefined) {
+            setActiveIndex(value);
+        }
+    }, [value]);
+    const isStepSkipped = (step) => {
+        return skipped.has(step);
+    };
+    const handleClickStep = (event, newValue, index) => {
+        setActiveIndex(() => {
+            onChange && onChange(index);
+            return index;
+        });
+    };
+    const renderSteps = (child, index) => {
+        return React.isValidElement(child) &&
+            cloneElement(child, {
+                index: index,
+                isActive: activeIndex >= index,
+                isDone: activeIndex > index,
+                isDisabled: isLinear && (activeIndex + 1 < index),
+                showLabel: showLabel,
+                showProgressCheckIcon: showProgressCheckIcon,
+                onClick: (e) => handleClickStep(e.event, e.value, index)
+            });
+    };
+    const isStepOptional = (index) => {
+        return steps && steps[index].props.isOptional;
+    };
+    const handleBack = () => {
+        setActiveIndex((prevActiveStep) => {
+            const newIndex = prevActiveStep - 1;
+            onChange && onChange(newIndex);
+            return newIndex;
+        });
+    };
+    // TODO
+    const handleSkip = () => {
+        if (!isStepOptional(activeIndex)) {
+            throw new Error("You can't skip a step that isn't optional.");
+        }
+        setActiveIndex((prevActiveStep) => prevActiveStep + 1);
+        setSkipped((prevSkipped) => {
+            const newSkipped = new Set(prevSkipped.values());
+            newSkipped.add(activeIndex);
+            return newSkipped;
+        });
+    };
+    // TODO
+    const handleNext = () => {
+        if (!isLastStep()) {
+            let newSkipped = skipped;
+            if (isStepSkipped(activeIndex)) {
+                newSkipped = new Set(newSkipped.values());
+                newSkipped.delete(activeIndex);
+            }
+            setActiveIndex((prevActiveStep) => {
+                const newIndex = prevActiveStep + 1;
+                onChange && onChange(newIndex);
+                return newIndex;
+            });
+            setSkipped(newSkipped);
+        }
+        else {
+            onFinish && onFinish();
+        }
+    };
+    const handleReset = () => {
+        setActiveIndex(0);
+        onChange && onChange(0);
+    };
+    const isLastStep = () => {
+        return steps && activeIndex === steps.length - 1;
+    };
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$9.stepper);
+        isHorizontal && cssClasses.push(styles$9['isHorizontal']);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement(React.Fragment, null, steps &&
+        React.createElement(React.Fragment, null,
+            React.createElement("div", { className: getCssClasses() }, steps.map((child, index) => (React.createElement(React.Fragment, { key: child.props.value },
+                renderSteps(child, index),
+                index !== steps.length - 1 && React.createElement(StepConnector, { isActive: activeIndex > index }))))),
+            steps && steps.map((step, index) => React.createElement(Fragment, { key: step.props.value }, index === activeIndex &&
+                React.createElement(StepPanel, null, step.props.children))),
+            React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
+};
+
+var css_248z$8 = ".Typography-module_typography__sw-td {\n  text-overflow: ellipsis;\n  font-family: var(--fontFamily); }\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
+var styles$8 = {"typography":"Typography-module_typography__sw-td"};
+styleInject(css_248z$8);
+
+const Wrapper = (props) => {
+    const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$8.typography);
+        cssClasses.push(styles$8.as);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return React.createElement(as, Object.assign(Object.assign({}, rest), { className: getCssClasses() }), children);
+};
+const Typography = (_a) => {
+    var { children, as = 'span' } = _a, rest = __rest(_a, ["children", "as"]);
+    return (React.createElement(Wrapper, Object.assign({ as: as }, rest), children));
+};
+
+var css_248z$7 = ".Step-module_stepWrapper__IQwq1 {\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  padding-right: 8px;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_stepWrapper__IQwq1.Step-module_hasLabel__LZNvd:not(.Step-module_disabled__JnxUP):hover {\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04);\n    border-radius: var(--borderRadius); }\n\n.Step-module_step__k42go {\n  width: 40px;\n  height: 40px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_step__k42go:not(.Step-module_hasLabel__LZNvd):not(.Step-module_disabled__JnxUP):hover {\n    border-radius: 100%;\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04); }\n  .Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n    width: 18px !important;\n    height: 18px !important; }\n\n.Step-module_stepIconCircle__hnxIV svg {\n  width: 24px;\n  height: 24px; }\n\n.Step-module_stepValue__B0-xv {\n  position: absolute;\n  color: var(--secondary-contrast-text); }\n  .Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n    color: var(--primary-contrast-text); }\n";
+var styles$7 = {"stepWrapper":"Step-module_stepWrapper__IQwq1","hasLabel":"Step-module_hasLabel__LZNvd","disabled":"Step-module_disabled__JnxUP","step":"Step-module_step__k42go","stepIconCircle":"Step-module_stepIconCircle__hnxIV","stepValue":"Step-module_stepValue__B0-xv","isActive":"Step-module_isActive__3GGcl"};
+styleInject(css_248z$7);
+
+const Step = (props) => {
+    const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
+    const [hoverRef, isHovered] = useHover();
+    const handleClick = (event) => {
+        if (!isDisabled) {
+            onClick && onClick({ event, value });
+        }
+    };
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$7.stepWrapper);
+        label && showLabel && cssClasses.push(styles$7['hasLabel']);
+        isDisabled && cssClasses.push(styles$7['disabled']);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const getCssClassesStep = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$7.step);
+        label && showLabel && cssClasses.push(styles$7['hasLabel']);
+        isDisabled && cssClasses.push(styles$7['disabled']);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const getCssClassesStepValue = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$7.stepValue);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        isActive && cssClasses.push(styles$7.stepValue['isActive']);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
+        React.createElement("div", { className: getCssClassesStep() },
+            React.createElement(Icon, { className: styles$7.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? COLOR.primary : COLOR.secondary },
+                React.createElement(CircleSolidIcon, null)),
+            React.createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
+                React.createElement(Icon, null,
+                    React.createElement(CheckSolidIcon, null))
+                :
+                    React.createElement(Typography, null, index + 1))),
+        label && showLabel &&
+            React.createElement(Typography, { className: "flex-shrink-0" }, label)));
+};
+
+var css_248z$6 = ".Table-module_table__DHKNv {\n  --bs-table-bg: transparent;\n  --bs-table-accent-bg: transparent;\n  --bs-table-striped-color: #212529;\n  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);\n  --bs-table-active-color: #212529;\n  --bs-table-active-bg: rgba(0, 0, 0, 0.1);\n  --bs-table-hover-color: #212529;\n  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);\n  width: 100%;\n  margin-bottom: 1rem;\n  color: #212529;\n  vertical-align: top;\n  border-color: #dee2e6; }\n  .Table-module_table__DHKNv thead {\n    vertical-align: bottom; }\n  .Table-module_table__DHKNv > :not(caption) > * > * {\n    padding: 0.5rem 0.5rem;\n    background-color: var(--bs-table-bg);\n    border-bottom-width: 1px;\n    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); }\n  .Table-module_table__DHKNv > :not(:first-child) {\n    border-top: 2px solid currentColor; }\n\n.Table-module_bordered__1Kp1p > :not(caption) > * > * {\n  border-width: 0 1px; }\n\n.Table-module_bordered__1Kp1p > :not(caption) > * {\n  border-width: 1px 0; }\n\n.Table-module_striped__jmxgE > tbody > tr:nth-of-type(odd) > * {\n  --bs-table-accent-bg: var(--bs-table-striped-bg);\n  color: var(--bs-table-striped-color); }\n\n.Table-module_hover__P6r3y > tbody > tr:hover > * {\n  --bs-table-accent-bg: var(--bs-table-hover-bg);\n  color: var(--bs-table-hover-color); }\n\n.Table-module_tableResponsive__ykttB {\n  overflow-x: auto; }\n";
+var styles$6 = {"table":"Table-module_table__DHKNv","bordered":"Table-module_bordered__1Kp1p","striped":"Table-module_striped__jmxgE","hover":"Table-module_hover__P6r3y","tableResponsive":"Table-module_tableResponsive__ykttB"};
+styleInject(css_248z$6);
+
+const Table = (props) => {
+    const { children, className, bordered, striped, hover, responsive = false } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$6.table);
+        bordered && cssClasses.push(styles$6['bordered']);
+        striped && cssClasses.push(styles$6['striped']);
+        hover && cssClasses.push(styles$6['hover']);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className: styles$6.tableResponsive }, children) },
+        React.createElement("table", { className: getCssClasses() }, children)));
+};
+
+var css_248z$5 = ".TabIndicator-module_tabIndicator__jSJhH {\n  bottom: 0;\n  height: 2px;\n  position: absolute;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .TabIndicator-module_tabIndicator__jSJhH.TabIndicator-module_primary__Q5jEo {\n    background-color: var(--primary); }\n  .TabIndicator-module_tabIndicator__jSJhH.TabIndicator-module_accent__qbgIG {\n    background-color: var(--accent); }\n";
+var styles$5 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primary":"TabIndicator-module_primary__Q5jEo","accent":"TabIndicator-module_accent__qbgIG"};
+styleInject(css_248z$5);
+
+const TabIndicator = (props) => {
+    const { color = COLOR.accent, width, amount, index } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$5.tabIndicator);
+        cssClasses.push(styles$5[color]);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("span", { className: getCssClasses(), style: {
+            width: width,
+            left: `calc(calc(100% / ${amount}) * ${index})`
+        } }));
+};
+
+var css_248z$4 = ".Tabs-module_tabs__YyRTZ {\n  display: flex;\n  position: relative; }\n";
+var styles$4 = {"tabs":"Tabs-module_tabs__YyRTZ"};
+styleInject(css_248z$4);
+
+const Tabs = (props) => {
+    const { children, className, fixed, indicatorColor, onChange, value } = props;
+    const [selectedValue, setSelectedValue] = useState(value);
+    const [selectedIndex, setSelectedIndex] = useState();
+    useEffect(() => {
+        React.Children.toArray(children).forEach((child, index) => {
+            if (child.props.value === value) {
+                setSelectedIndex(index);
+            }
+        });
+    }, [children, value]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$4.tabs);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleClickTab = (event, newValue, index) => {
+        setSelectedValue(newValue);
+        setSelectedIndex(index);
+        onChange && onChange({ event, newValue });
+    };
+    const renderTabs = (child, index) => {
+        return React.isValidElement(child) && cloneElement(child, {
+            key: child.props.value,
+            isActive: child.props.value === selectedValue,
+            fixed: fixed,
+            onClick: (e) => handleClickTab(e.event, e.value, index),
+        });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: getCssClasses() },
+            children && React.Children.toArray(children).map((child, index) => renderTabs(child, index)),
+            children &&
+                React.createElement(TabIndicator, { color: indicatorColor, width: (100 / React.Children.toArray(children).length) + '%', index: selectedIndex, amount: React.Children.toArray(children).length }))));
+};
+
+var css_248z$3 = ".Tab-module_tab__Q8w1f {\n  padding: 6px 12px;\n  overflow: hidden;\n  position: relative;\n  font-size: 0.875rem;\n  min-width: 72px;\n  box-sizing: border-box;\n  min-height: 48px;\n  text-align: center;\n  font-weight: 500;\n  line-height: 1.75;\n  white-space: normal;\n  letter-spacing: 0.02857em;\n  text-transform: uppercase;\n  border-radius: 0;\n  flex-grow: 1;\n  flex-basis: 0;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n";
+var styles$3 = {"tab":"Tab-module_tab__Q8w1f"};
+styleInject(css_248z$3);
+
+const Tab = (props) => {
+    const { label, className, isActive, disabled, value, onClick } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$3.tab);
+        if (isActive) {
+            cssClasses.push(`show active`);
+        }
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement(Button, { className: getCssClasses(), onClick: (event) => onClick && onClick({ event, value }), isActive: isActive, disabled: disabled }, label));
+};
+
+const TabPanel = (props) => {
+    const { children, value, index } = props, rest = __rest(props, ["children", "value", "index"]);
+    return (React.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
+};
+
+var css_248z$2 = ".Tooltip-module_tooltipContainer__9ZWx3 {\n  display: inline; }\n\n.Tooltip-module_tooltip__x5HOu {\n  background-color: #333;\n  color: white;\n  padding: 5px 10px;\n  border-radius: 4px;\n  font-size: 13px;\n  position: absolute;\n  left: -1000000px;\n  z-index: 1100; }\n  .Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe,\n  .Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    z-index: -1; }\n  .Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n    content: \"\";\n    transform: rotate(45deg);\n    background: #333; }\n  .Tooltip-module_tooltip__x5HOu[data-popper-placement^=\"top\"] > #Tooltip-module_arrow__B6lfe {\n    bottom: -4px; }\n  .Tooltip-module_tooltip__x5HOu[data-popper-placement^=\"bottom\"] > #Tooltip-module_arrow__B6lfe {\n    top: -4px; }\n  .Tooltip-module_tooltip__x5HOu[data-popper-placement^=\"left\"] > #Tooltip-module_arrow__B6lfe {\n    right: -4px; }\n  .Tooltip-module_tooltip__x5HOu[data-popper-placement^=\"right\"] > #Tooltip-module_arrow__B6lfe {\n    left: -4px; }\n";
+var styles$2 = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
+styleInject(css_248z$2);
+
+const Tooltip = (props) => {
+    const { children, text, placement = 'bottom' } = props;
+    const [show, setShow] = useState(false);
+    const refChild = useRef();
+    const refTooltip = useRef();
+    useEffect(() => {
+        if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
+            // TODO - extract to own component?
+            createPopper(refChild.current, refTooltip.current, {
+                placement: placement,
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: { offset: [0, 8] }
+                    },
+                ]
+            });
+        }
+    }, [show]);
+    const handleMouseOver = () => {
+        setShow(true);
+    };
+    const handleMouseLeave = () => {
+        setShow(false);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: styles$2.tooltipContainer, ref: refChild, id: "tooltip-container" }, cloneElement(children, {
+            onMouseOver: handleMouseOver,
+            onMouseLeave: handleMouseLeave,
+        })),
+        show &&
+            React.createElement("div", { className: styles$2.tooltip, ref: refTooltip, id: "tooltip" },
+                text,
+                React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
+};
+
+const HourSelect = (props) => {
+    const { className, value = 0, id, name, disabled, onChange } = props;
+    const [newValue, setNewValue] = useState(value);
+    const [hourOptions, setHourOptions] = useState();
+    useEffect(() => {
+        const newHourOptions = [];
+        for (let i = 0; i < 24; i++) {
+            newHourOptions.push({ value: i.toString(), label: i.toString() });
+        }
+        setHourOptions(newHourOptions);
+    }, []);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleOnChange = (e) => {
+        setNewValue(e);
+        onChange && onChange(e);
+    };
+    return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: hourOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
+};
+
+const MilliSecondSelect = (props) => {
+    const { className, value = 0, steps = 100, id, name, disabled, onChange } = props;
+    const [newValue, setNewValue] = useState(value);
+    const [milliSecondOptions, setMilliSecondOptions] = useState();
+    useEffect(() => {
+        const newMilliSecondOptions = [];
+        for (let i = 0; i < 1000; i += steps) {
+            newMilliSecondOptions.push({ value: i.toString(), label: i.toString() });
+        }
+        setMilliSecondOptions(newMilliSecondOptions);
+    }, []);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleOnChange = (e) => {
+        setNewValue(e);
+        onChange && onChange(e);
+    };
+    return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: milliSecondOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
+};
+
+const MinuteSelect = (props) => {
+    const { className, value = 0, id, name, disabled, onChange } = props;
+    const [newValue, setNewValue] = useState(value);
+    const [minuteOptions, setMinuteOptions] = useState();
+    useEffect(() => {
+        const newMinuteOptions = [];
+        for (let i = 0; i < 60; i++) {
+            newMinuteOptions.push({ value: i.toString(), label: i.toString() });
+        }
+        setMinuteOptions(newMinuteOptions);
+    }, []);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleOnChange = (e) => {
+        setNewValue(e);
+        onChange && onChange(e);
+    };
+    return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: minuteOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
+};
+
+const SecondSelect = (props) => {
+    const { className, value = 0, id, name, disabled, onChange } = props;
+    const [newValue, setNewValue] = useState(value);
+    const [secondOptions, setSecondOptions] = useState();
+    useEffect(() => {
+        const newSecondOptions = [];
+        for (let i = 0; i < 60; i++) {
+            newSecondOptions.push({ value: i.toString(), label: i.toString() });
+        }
+        setSecondOptions(newSecondOptions);
+    }, []);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleOnChange = (e) => {
+        setNewValue(e);
+        onChange && onChange(e);
+    };
+    return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: secondOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
+};
+
+var TIMEMODE;
+(function (TIMEMODE) {
+    TIMEMODE[TIMEMODE["HOUR"] = 0] = "HOUR";
+    TIMEMODE[TIMEMODE["MINUTE"] = 1] = "MINUTE";
+    TIMEMODE[TIMEMODE["SECONDS"] = 2] = "SECONDS";
+    TIMEMODE[TIMEMODE["MILLISECONDS"] = 3] = "MILLISECONDS";
+})(TIMEMODE || (TIMEMODE = {}));
+const TimeSelect = (props) => {
+    const { className, value = new Date(), disabled, showHours = true, showMinutes = true, showSeconds = false, showMilliSeconds = false, onChange } = props;
+    const [currDate, setCurrDate] = useState(value);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push('row');
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleOnChange = (e, mode) => {
+        const currYear = currDate.getFullYear();
+        const currMonth = currDate.getMonth();
+        const currday = currDate.getDate();
+        const currHour = mode === TIMEMODE.HOUR ? e : currDate.getHours();
+        const currMinute = mode === TIMEMODE.MINUTE ? e : currDate.getMinutes();
+        const currSeconds = mode === TIMEMODE.SECONDS ? e : currDate.getSeconds();
+        const currMilliSeconds = mode === TIMEMODE.MILLISECONDS ? e : currDate.getMilliseconds();
+        const newDate = new Date(currYear, currMonth, currday, currHour, currMinute, currSeconds, currMilliSeconds);
+        setCurrDate(newDate);
+        onChange && onChange(newDate);
+    };
+    return (React.createElement(Row, { className: getCssClasses() },
+        showHours &&
+            React.createElement(Column, null,
+                React.createElement(FormLabel, null, "Hours"),
+                React.createElement(HourSelect, { value: currDate.getHours(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.HOUR) })),
+        showMinutes &&
+            React.createElement(Column, null,
+                React.createElement(FormLabel, null, "Minutes"),
+                React.createElement(MinuteSelect, { value: currDate.getMinutes(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.MINUTE) })),
+        showSeconds &&
+            React.createElement(Column, null,
+                React.createElement(FormLabel, null, "Seconds"),
+                React.createElement(SecondSelect, { value: currDate.getSeconds(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.SECONDS) })),
+        showMilliSeconds &&
+            React.createElement(Column, null,
+                React.createElement(FormLabel, null, "Milliseconds"),
+                React.createElement(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.MILLISECONDS) }))));
+};
+
+var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important; }\n  .TreeView-module_treeView__VVj-4 ul {\n    padding-left: 48px !important; }\n";
+var styles$1 = {"treeView":"TreeView-module_treeView__VVj-4"};
+styleInject(css_248z$1);
+
+const TreeView = (props) => {
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$1.treeView);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z = ".TreeItem-module_treeItem__Mxsjr {\n  display: flex;\n  flex-direction: column;\n  min-height: 48px;\n  justify-content: center; }\n";
+var styles = {"treeItem":"TreeItem-module_treeItem__Mxsjr"};
+styleInject(css_248z);
+
+const TreeItem = (props) => {
+    const { nodeId, label, children, className, isExpanded, isSelected, isSelectable, onToggleExpand, onItemSelect } = props;
+    const [_isExpanded, setIsExpanded] = useState(false);
+    const [_isSelected, setIsSelected] = useState(false);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles.treeItem);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    useEffect(() => {
+        if (isExpanded !== undefined)
+            setIsExpanded(isExpanded);
+    }, [isExpanded]);
+    useEffect(() => {
+        if (isSelected !== undefined)
+            setIsSelected(isSelected);
+    }, [isSelected]);
+    const handleOnToggleExpand = (nodeId) => {
+        setIsExpanded(!_isExpanded);
+        onToggleExpand && onToggleExpand(nodeId);
+    };
+    const handleOnSelect = (nodeId) => {
+        setIsSelected(!_isSelected);
+        onItemSelect && onItemSelect({ id: nodeId, isSelected: !_isSelected });
+    };
+    return (React.createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
+        React.createElement("div", { className: "d-flex align-items-center" },
+            children &&
+                React.createElement(IconButton, { onClick: () => handleOnToggleExpand(nodeId), icon: !_isExpanded ? React.createElement(ChevronRightSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null) }),
+            isSelectable &&
+                React.createElement(Checkbox, { checked: _isSelected, onChange: () => handleOnSelect(nodeId) }),
+            label),
+        children && _isExpanded ? React.createElement("ul", null, children) : null));
+};
+
+export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useDebounce, useHover, useWindowSize };