@ainias42/react-bootstrap-mobile 0.1.32 → 0.2.1

package/dist/bootstrapReactMobile.js

@@ -1,23 +1,13 @@
 /*!
  * 
- *   @ainias42/react-bootstrap-mobile v0.1.31
+ *   @ainias42/react-bootstrap-mobile v0.2.0
  *   git+https://github.com/Ainias/Bootstrap-React-Mobile.git
  *   Copyright (c) Silas Günther and project contributors.
  *   This source code is licensed under the MIT license found in the
  *   LICENSE file in the root directory of this source tree.
  *
  */
-(function webpackUniversalModuleDefinition(root, factory) {
-	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory();
-	else if(typeof define === 'function' && define.amd)
-		define([], factory);
-	else {
-		var a = factory();
-		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
-	}
-})(this, () => {
-return /******/ (() => { // webpackBootstrap
+/******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
 /***/ 6353:
@@ -1324,13 +1314,15 @@ var ___CSS_LOADER_API_SOURCEMAP_IMPORT___ = __webpack_require__(1354);
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(6314);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.button__jnst2{cursor:pointer;margin:0;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none;letter-spacing:0;vertical-align:middle;border-radius:3px;transition:none}.button__jnst2.flavor-accent{--button-color:var(--flavor-accent)}.button__jnst2.flavor-basic{--button-color:var(--flavor-basic)}.material-design .button__jnst2{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);min-height:40px;line-height:40px;padding:0 16px;text-align:center;font-size:14px;text-transform:uppercase;font-weight:500}.flat-design .button__jnst2{line-height:32px;padding:4px 18px;font-size:17px}.button__jnst2.primary__cT39p{background-color:var(--button-color);border:0 solid currentColor;color:#fff;--text-primary-default-color: white}.button__jnst2.secondary__Fozj5{background-color:rgba(0,0,0,0);border:1px solid var(--button-color);color:var(--button-color);--text-primary-default-color: var(--button-color)}.button__jnst2.disabled__tYMFZ{opacity:.3;cursor:default;pointer-events:none}`, "",{"version":3,"sources":["webpack://./src/Components/FormElements/Button/button.scss","webpack://./src/scss/_flavorMixin.scss","webpack://./src/scss/_designMixin.scss","webpack://./src/scss/_variables.scss"],"names":[],"mappings":"AAIA,eACE,cAAA,CACA,QAAA,CACA,gBAAA,CACA,sBAAA,CACA,kBAAA,CACA,eAAA,CACA,oBAAA,CACA,gBAAA,CACA,qBAAA,CACA,iBAAA,CACA,eAAA,CCZA,6BACE,mCAAA,CAEF,4BACE,kCAAA,CCHS,gCFgBT,gGGDgB,CHEhB,eAAA,CACA,gBAAA,CACA,cAAA,CACA,iBAAA,CACA,cAAA,CACA,wBAAA,CACA,eAAA,CEvBS,4BF2BT,gBAAA,CACA,gBAAA,CACA,cAAA,CAGF,8BACE,oCAAA,CACA,2BAAA,CACA,UAAA,CACA,mCAAA,CAGF,gCACE,8BAAA,CACA,oCAAA,CACA,yBAAA,CACA,iDAAA,CAGF,+BACE,UAAA,CACA,cAAA,CACA,mBAAA","sourcesContent":["@import \"../../../scss/variables\";\n@import \"../../../scss/designMixin\";\n@import \"../../../scss/flavorMixin\";\n\n.button {\n  cursor: pointer;\n  margin: 0;\n  user-select: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  text-decoration: none;\n  letter-spacing: 0;\n  vertical-align: middle;\n  border-radius: 3px;\n  transition: none;\n\n  @include flavorSelection(--button-color);\n\n  @include design($material) {\n    box-shadow: $boxShadowMaterial;\n    min-height: 40px;\n    line-height: 40px;\n    padding: 0 16px;\n    text-align: center;\n    font-size: 14px;\n    text-transform: uppercase;\n    font-weight: 500;\n  }\n\n  @include design($flat) {\n    line-height: 32px;\n    padding: 4px 18px;\n    font-size: 17px;\n  }\n\n  &.primary {\n    background-color: var(--button-color);\n    border: 0 solid currentColor;\n    color: white;\n    --text-primary-default-color: white;\n  }\n\n  &.secondary {\n    background-color: transparent;\n    border: 1px solid var(--button-color);\n    color: var(--button-color);\n    --text-primary-default-color: var(--button-color);\n  }\n\n  &.disabled {\n    opacity: 0.3;\n    cursor: default;\n    pointer-events: none;\n  }\n}\n","@use 'sass:selector';\n\n@mixin flavorSelection($varName) {\n  &:global(.flavor-accent) {\n    #{$varName}: var(--flavor-accent);\n  }\n  &:global(.flavor-basic) {\n    #{$varName}: var(--flavor-basic);\n  }\n}\n","@use 'sass:selector';\n\n@mixin design($designName) {\n  @if & {\n    @at-root #{selector.nest(':global(.'+$designName+\")\", &)} {\n      @content\n    }\n  } @else {\n    :global(.#{$designName}) {\n      @content\n    }\n  }\n}\n","@import 'bootstrap/scss/functions';\n@import 'bootstrap/scss/variables';\n\n$classPrefix: \"rbm-\";\n\n$material: \"material-design\";\n$flat: \"flat-design\";\n\n$android: $material;\n$ios: $flat;\n\n$animationDuration: 0.3s;\n$animationDurationMaterial: $animationDuration;\n$animationDurationFlat: $animationDuration;\n$animationDurationAndroid: $animationDurationMaterial;\n$animationDurationIos: $animationDurationFlat;\n\n$fontSizeBase: 16px;\n\n$boxShadowMaterial: 0 2px 2px 0 rgb(0 0 0 / 14%),\n0 1px 5px 0 rgb(0 0 0 / 12%),\n0 3px 1px -2px rgb(0 0 0 / 20%);\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `.button__jnst2{cursor:pointer;margin:0;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none;letter-spacing:0;vertical-align:middle;border-radius:3px;transition:none}.button__jnst2.flavor-accent{--button-color:var(--flavor-accent)}.button__jnst2.flavor-basic{--button-color:var(--flavor-basic)}.material-design .button__jnst2{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);min-height:40px;line-height:40px;padding:0 16px;text-align:center;font-size:14px;text-transform:uppercase;font-weight:500}.flat-design .button__jnst2{line-height:32px;padding:4px 18px;font-size:17px}.button__jnst2.primary__cT39p{background-color:var(--button-color);border:0 solid currentColor;color:#fff;--text-primary-default-color: white}.button__jnst2.secondary__Fozj5{background-color:rgba(0,0,0,0);border:1px solid var(--button-color);color:var(--button-color);--text-primary-default-color: var(--button-color)}.button__jnst2.disabled__tYMFZ{opacity:.3;cursor:default;pointer-events:none}.material-design .button__jnst2.small__dpDPv{min-height:17px;line-height:17px;padding:0 8px}.flat-design .button__jnst2.small__dpDPv{line-height:17px;padding:4px 9px}.button__jnst2.fullWidth__E_iTN{width:100%}`, "",{"version":3,"sources":["webpack://./src/Components/FormElements/Button/button.scss","webpack://./src/scss/_flavorMixin.scss","webpack://./src/scss/_designMixin.scss","webpack://./src/scss/_variables.scss"],"names":[],"mappings":"AAIA,eACE,cAAA,CACA,QAAA,CACA,gBAAA,CACA,sBAAA,CACA,kBAAA,CACA,eAAA,CACA,oBAAA,CACA,gBAAA,CACA,qBAAA,CACA,iBAAA,CACA,eAAA,CCZA,6BACE,mCAAA,CAEF,4BACE,kCAAA,CCHS,gCFgBT,gGGDgB,CHEhB,eAAA,CACA,gBAAA,CACA,cAAA,CACA,iBAAA,CACA,cAAA,CACA,wBAAA,CACA,eAAA,CEvBS,4BF2BT,gBAAA,CACA,gBAAA,CACA,cAAA,CAGF,8BACE,oCAAA,CACA,2BAAA,CACA,UAAA,CACA,mCAAA,CAGF,gCACE,8BAAA,CACA,oCAAA,CACA,yBAAA,CACA,iDAAA,CAGF,+BACE,UAAA,CACA,cAAA,CACA,mBAAA,CEjDS,6CFsDP,eAAA,CACA,gBAAA,CACA,aAAA,CExDO,yCF4DP,gBAAA,CACA,eAAA,CAIJ,gCACE,UAAA","sourcesContent":["@import \"../../../scss/variables\";\n@import \"../../../scss/designMixin\";\n@import \"../../../scss/flavorMixin\";\n\n.button {\n  cursor: pointer;\n  margin: 0;\n  user-select: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  text-decoration: none;\n  letter-spacing: 0;\n  vertical-align: middle;\n  border-radius: 3px;\n  transition: none;\n\n  @include flavorSelection(--button-color);\n\n  @include design($material) {\n    box-shadow: $boxShadowMaterial;\n    min-height: 40px;\n    line-height: 40px;\n    padding: 0 16px;\n    text-align: center;\n    font-size: 14px;\n    text-transform: uppercase;\n    font-weight: 500;\n  }\n\n  @include design($flat) {\n    line-height: 32px;\n    padding: 4px 18px;\n    font-size: 17px;\n  }\n\n  &.primary {\n    background-color: var(--button-color);\n    border: 0 solid currentColor;\n    color: white;\n    --text-primary-default-color: white;\n  }\n\n  &.secondary {\n    background-color: transparent;\n    border: 1px solid var(--button-color);\n    color: var(--button-color);\n    --text-primary-default-color: var(--button-color);\n  }\n\n  &.disabled {\n    opacity: 0.3;\n    cursor: default;\n    pointer-events: none;\n  }\n\n  &.small {\n    @include design($material) {\n      min-height: 17px;\n      line-height: 17px;\n      padding: 0 8px;\n    }\n\n    @include design($flat) {\n      line-height: 17px;\n      padding: 4px 9px;\n    }\n  }\n\n  &.fullWidth {\n    width: 100%;\n  }\n}\n","@use 'sass:selector';\n\n@mixin flavorSelection($varName) {\n  &:global(.flavor-accent) {\n    #{$varName}: var(--flavor-accent);\n  }\n  &:global(.flavor-basic) {\n    #{$varName}: var(--flavor-basic);\n  }\n}\n","@use 'sass:selector';\n\n@mixin design($designName) {\n  @if & {\n    @at-root #{selector.nest(':global(.'+$designName+\")\", &)} {\n      @content\n    }\n  } @else {\n    :global(.#{$designName}) {\n      @content\n    }\n  }\n}\n","@import 'bootstrap/scss/functions';\n@import 'bootstrap/scss/variables';\n\n$classPrefix: \"rbm-\";\n\n$material: \"material-design\";\n$flat: \"flat-design\";\n\n$android: $material;\n$ios: $flat;\n\n$animationDuration: 0.3s;\n$animationDurationMaterial: $animationDuration;\n$animationDurationFlat: $animationDuration;\n$animationDurationAndroid: $animationDurationMaterial;\n$animationDurationIos: $animationDurationFlat;\n\n$fontSizeBase: 16px;\n\n$boxShadowMaterial: 0 2px 2px 0 rgb(0 0 0 / 14%),\n0 1px 5px 0 rgb(0 0 0 / 12%),\n0 3px 1px -2px rgb(0 0 0 / 20%);\n"],"sourceRoot":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"button": `button__jnst2`,
 	"primary": `primary__cT39p`,
 	"secondary": `secondary__Fozj5`,
-	"disabled": `disabled__tYMFZ`
+	"disabled": `disabled__tYMFZ`,
+	"small": `small__dpDPv`,
+	"fullWidth": `fullWidth__E_iTN`
 };
 module.exports = ___CSS_LOADER_EXPORT___;
 
@@ -1388,7 +1380,7 @@ var ___CSS_LOADER_API_SOURCEMAP_IMPORT___ = __webpack_require__(1354);
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(6314);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.fileInput__h2WBs{display:flex;flex-direction:column;position:relative;cursor:pointer}.fileInput__h2WBs .previewContainer__IdxyI{align-items:stretch;flex-grow:1}.fileInput__h2WBs .previewContainer__IdxyI .preview__cd_2A{position:relative;border:1px solid var(--border-light)}.fileInput__h2WBs .previewContainer__IdxyI .preview__cd_2A .previewRemove__GYrmU{position:absolute;top:5px;right:5px;opacity:0;font-size:1.5rem}.fileInput__h2WBs .previewContainer__IdxyI .preview__cd_2A .previewRemove__GYrmU svg{background:rgba(255,255,255,.2)}.fileInput__h2WBs .previewContainer__IdxyI .preview__cd_2A:hover .previewRemove__GYrmU{opacity:.7}.fileInput__h2WBs .previewContainer__IdxyI .previewImage__v8Iv_{width:100%;height:100%;object-fit:contain}.fileInput__h2WBs .previewContainer__IdxyI .previewText__BD6Nu{width:100%;height:100%;min-height:4rem;display:flex;justify-content:center;align-items:center}.fileInput__h2WBs .previewContainer__IdxyI .previewTextIcon__MUiWT{padding-right:4px}.fileInput__h2WBs .previewContainer__IdxyI .addFile__l9v3S{position:relative;border-radius:3px;background-color:var(--border-light);display:flex;justify-content:center;align-items:center;font-size:2rem}.fileInput__h2WBs .previewContainer__IdxyI .addFile__l9v3S .addFileButton__tJkSa{width:100%;height:100%;min-height:4rem;display:flex;justify-content:center;align-items:center}.fileInput__h2WBs .previewContainer__IdxyI .addFile__l9v3S.hidden__p2FRj{display:none}.fileInput__h2WBs .value__lzxOL{display:none}`, "",{"version":3,"sources":["webpack://./src/Components/FormElements/Input/FileInput/fileInput.scss"],"names":[],"mappings":"AAAA,kBACE,YAAA,CACA,qBAAA,CACA,iBAAA,CACA,cAAA,CAEA,2CACE,mBAAA,CACA,WAAA,CAEA,2DACE,iBAAA,CACA,oCAAA,CAEA,iFACE,iBAAA,CACA,OAAA,CACA,SAAA,CACA,SAAA,CACA,gBAAA,CAEA,qFACE,+BAAA,CAIJ,uFACE,UAAA,CAIJ,gEACE,UAAA,CACA,WAAA,CACA,kBAAA,CAGF,+DACE,UAAA,CACA,WAAA,CACA,eAAA,CAEA,YAAA,CACA,sBAAA,CACA,kBAAA,CAGF,mEACE,iBAAA,CAIF,2DACE,iBAAA,CACA,iBAAA,CACA,oCAAA,CAEA,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,cAAA,CAEA,iFACE,UAAA,CACA,WAAA,CACA,eAAA,CAEA,YAAA,CACA,sBAAA,CACA,kBAAA,CAGF,yEACE,YAAA,CAMN,gCACE,YAAA","sourcesContent":[".fileInput {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  cursor: pointer;\n\n  .previewContainer {\n    align-items: stretch;\n    flex-grow: 1;\n\n    .preview {\n      position: relative;\n      border: 1px solid var(--border-light);\n\n      .previewRemove {\n        position: absolute;\n        top: 5px;\n        right: 5px;\n        opacity: 0;\n        font-size: 1.5rem;\n\n        svg {\n          background: rgba(255, 255, 255, 0.2);\n        }\n      }\n\n      &:hover .previewRemove {\n        opacity: 0.7;\n      }\n    }\n\n    .previewImage {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n    }\n\n    .previewText {\n      width: 100%;\n      height: 100%;\n      min-height: 4rem;\n\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n\n    .previewTextIcon {\n      padding-right: 4px;\n    }\n\n\n    .addFile {\n      position: relative;\n      border-radius: 3px;\n      background-color: var(--border-light);\n\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      font-size: 2rem;\n\n      .addFileButton {\n        width: 100%;\n        height: 100%;\n        min-height: 4rem;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      &.hidden {\n        display: none;\n      }\n    }\n  }\n\n\n  .value {\n    display: none;\n    //position: absolute;\n    //top: 0;\n    //left: 0;\n    //right: 0;\n    //bottom: 0;\n    //opacity: 0;\n  }\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `.fileInput__h2WBs{display:flex;flex-direction:column;position:relative;cursor:pointer}.fileInput__h2WBs .previewContainer__IdxyI{align-items:stretch;flex-grow:1}.fileInput__h2WBs .previewContainer__IdxyI .preview__cd_2A{position:relative;border:1px solid var(--border-light)}.fileInput__h2WBs .previewContainer__IdxyI .preview__cd_2A .previewRemove__GYrmU{position:absolute;top:5px;right:5px;opacity:0;font-size:1.5rem}.fileInput__h2WBs .previewContainer__IdxyI .preview__cd_2A .previewRemove__GYrmU svg{background:rgba(255,255,255,.2)}.fileInput__h2WBs .previewContainer__IdxyI .preview__cd_2A:hover .previewRemove__GYrmU{opacity:.7}.fileInput__h2WBs .previewContainer__IdxyI .previewImage__v8Iv_{width:100%;height:100%;object-fit:contain}.fileInput__h2WBs .previewContainer__IdxyI .previewText__BD6Nu{width:100%;height:100%;min-height:4rem;display:flex;justify-content:center;align-items:center}.fileInput__h2WBs .previewContainer__IdxyI .previewTextIcon__MUiWT{padding-right:4px}.fileInput__h2WBs .previewContainer__IdxyI .addFile__l9v3S{position:relative;border-radius:3px;background-color:var(--border-light);display:flex;justify-content:center;align-items:center;font-size:2rem}.fileInput__h2WBs .previewContainer__IdxyI .addFile__l9v3S .addFileButton__tJkSa{width:100%;height:100%;min-height:4rem;display:flex;justify-content:center;align-items:center}.fileInput__h2WBs .previewContainer__IdxyI .addFile__l9v3S.hidden__p2FRj{display:none}.fileInput__h2WBs .value__lzxOL{display:none}.fileInput__h2WBs .error__v0GST{font-size:.7rem;--text-primary-default-color: var(--text-error) }`, "",{"version":3,"sources":["webpack://./src/Components/FormElements/Input/FileInput/fileInput.scss"],"names":[],"mappings":"AAAA,kBACE,YAAA,CACA,qBAAA,CACA,iBAAA,CACA,cAAA,CAEA,2CACE,mBAAA,CACA,WAAA,CAEA,2DACE,iBAAA,CACA,oCAAA,CAEA,iFACE,iBAAA,CACA,OAAA,CACA,SAAA,CACA,SAAA,CACA,gBAAA,CAEA,qFACE,+BAAA,CAIJ,uFACE,UAAA,CAIJ,gEACE,UAAA,CACA,WAAA,CACA,kBAAA,CAGF,+DACE,UAAA,CACA,WAAA,CACA,eAAA,CAEA,YAAA,CACA,sBAAA,CACA,kBAAA,CAGF,mEACE,iBAAA,CAIF,2DACE,iBAAA,CACA,iBAAA,CACA,oCAAA,CAEA,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,cAAA,CAEA,iFACE,UAAA,CACA,WAAA,CACA,eAAA,CAEA,YAAA,CACA,sBAAA,CACA,kBAAA,CAGF,yEACE,YAAA,CAMN,gCACE,YAAA,CAGF,gCACE,eAAA,CACA,gDAAA","sourcesContent":[".fileInput {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  cursor: pointer;\n\n  .previewContainer {\n    align-items: stretch;\n    flex-grow: 1;\n\n    .preview {\n      position: relative;\n      border: 1px solid var(--border-light);\n\n      .previewRemove {\n        position: absolute;\n        top: 5px;\n        right: 5px;\n        opacity: 0;\n        font-size: 1.5rem;\n\n        svg {\n          background: rgba(255, 255, 255, 0.2);\n        }\n      }\n\n      &:hover .previewRemove {\n        opacity: 0.7;\n      }\n    }\n\n    .previewImage {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n    }\n\n    .previewText {\n      width: 100%;\n      height: 100%;\n      min-height: 4rem;\n\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n\n    .previewTextIcon {\n      padding-right: 4px;\n    }\n\n\n    .addFile {\n      position: relative;\n      border-radius: 3px;\n      background-color: var(--border-light);\n\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      font-size: 2rem;\n\n      .addFileButton {\n        width: 100%;\n        height: 100%;\n        min-height: 4rem;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      &.hidden {\n        display: none;\n      }\n    }\n  }\n\n\n  .value {\n    display: none;\n  }\n\n  .error {\n    font-size: 0.7rem;\n    --text-primary-default-color: var(--text-error)\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"fileInput": `fileInput__h2WBs`,
@@ -1401,7 +1393,8 @@ ___CSS_LOADER_EXPORT___.locals = {
 	"addFile": `addFile__l9v3S`,
 	"addFileButton": `addFileButton__tJkSa`,
 	"hidden": `hidden__p2FRj`,
-	"value": `value__lzxOL`
+	"value": `value__lzxOL`,
+	"error": `error__v0GST`
 };
 module.exports = ___CSS_LOADER_EXPORT___;
 
@@ -1435,7 +1428,7 @@ var ___CSS_LOADER_API_SOURCEMAP_IMPORT___ = __webpack_require__(1354);
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(6314);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.input__ylsuY{width:100%}.input__ylsuY.inline__CuO0B{--basis: 50%;display:flex}.input__ylsuY.inline__CuO0B .label__Uty0i{display:inline-block;flex-grow:1;flex-shrink:0;flex-basis:var(--basis);font-weight:normal}.input__ylsuY.inline__CuO0B .text__OJDZ5{min-width:41px}.input__ylsuY .label__Uty0i{display:block;font-weight:bold}.input__ylsuY .text__OJDZ5{width:100%;background-color:rgba(0,0,0,0);border:0;outline:none;padding:0;font-size:1rem}.material-design .input__ylsuY .text__OJDZ5{color:#212121;background-image:linear-gradient(to top, transparent 1px, #afafaf 1px);background-size:100% 2px;background-repeat:no-repeat;background-position:center bottom;padding-bottom:2px}.material-design .input__ylsuY .text__OJDZ5:read-only,.material-design .input__ylsuY .text__OJDZ5:read-only:focus{background-image:none;border-bottom:1px solid rgba(0,0,0,0)}.material-design .input__ylsuY .text__OJDZ5:focus{background-image:linear-gradient(var(--flavor-accent), var(--flavor-accent)),linear-gradient(to top, transparent 1px, #afafaf 1px)}.flat-design .input__ylsuY .text__OJDZ5{color:#1f1f21}.flat-design .input__ylsuY .text__OJDZ5,.flat-design .input__ylsuY .text__OJDZ5:focus{border-bottom:1px solid var(--border-light)}.input__ylsuY.hiddenInput__KSMQB .text__OJDZ5{background-image:none;border-bottom:1px solid rgba(0,0,0,0)}.input__ylsuY.hiddenInput__KSMQB.noFocusHint__bBtc8 .text__OJDZ5:focus{background-image:none;border-bottom:1px solid rgba(0,0,0,0)}`, "",{"version":3,"sources":["webpack://./src/Components/FormElements/Input/input.scss","webpack://./src/scss/_designMixin.scss"],"names":[],"mappings":"AAGA,cACE,UAAA,CAEA,4BACE,YAAA,CACA,YAAA,CACA,0CACE,oBAAA,CACA,WAAA,CACA,aAAA,CACA,uBAAA,CACA,kBAAA,CAEF,yCAEE,cAAA,CAIJ,4BACE,aAAA,CACA,gBAAA,CAGF,2BACE,UAAA,CACA,8BAAA,CACA,QAAA,CACA,YAAA,CACA,SAAA,CACA,cAAA,CC7BS,4CDgCP,aAAA,CACA,sEAAA,CACA,wBAAA,CACA,2BAAA,CACA,iCAAA,CACA,kBAAA,CAEA,kHACE,qBAAA,CACA,qCAAA,CAGF,kDACE,kIAAA,CC7CK,wCDmDP,aAAA,CACA,sFACE,2CAAA,CAMJ,8CACE,qBAAA,CACA,qCAAA,CAKE,uEACE,qBAAA,CACA,qCAAA","sourcesContent":["@import \"../../../scss/variables\";\n@import \"../../../scss/designMixin\";\n\n.input {\n  width: 100%;\n\n  &.inline {\n    --basis: 50%;\n    display: flex;\n    .label {\n      display: inline-block;\n      flex-grow: 1;\n      flex-shrink: 0;\n      flex-basis: var(--basis);\n      font-weight: normal;\n    }\n    .text {\n      // 3 numbers\n      min-width: 41px;\n    }\n  }\n\n  .label {\n    display: block;\n    font-weight: bold;\n  }\n\n  .text {\n    width: 100%;\n    background-color: transparent;\n    border: 0;\n    outline: none;\n    padding: 0;\n    font-size: 1rem;\n\n    @include design($material) {\n      color: #212121;\n      background-image: linear-gradient(to top, transparent 1px, #afafaf 1px);\n      background-size: 100% 2px;\n      background-repeat: no-repeat;\n      background-position: center bottom;\n      padding-bottom: 2px;\n\n      &:read-only, &:read-only:focus {\n        background-image: none;\n        border-bottom: 1px solid transparent;\n      }\n\n      &:focus {\n        background-image: linear-gradient(var(--flavor-accent), var(--flavor-accent)),\n        linear-gradient(to top, transparent 1px, #afafaf 1px);\n      }\n    }\n\n    @include design($flat) {\n      color: #1f1f21;\n      &, &:focus {\n        border-bottom: 1px solid var(--border-light);\n      }\n    }\n  }\n\n  &.hiddenInput {\n    .text {\n      background-image: none;\n      border-bottom: 1px solid transparent;\n    }\n\n    &.noFocusHint {\n      .text {\n        &:focus {\n          background-image: none;\n          border-bottom: 1px solid transparent;\n        }\n      }\n    }\n  }\n}\n","@use 'sass:selector';\n\n@mixin design($designName) {\n  @if & {\n    @at-root #{selector.nest(':global(.'+$designName+\")\", &)} {\n      @content\n    }\n  } @else {\n    :global(.#{$designName}) {\n      @content\n    }\n  }\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `.input__ylsuY{width:100%}.input__ylsuY.inline__CuO0B{--basis: 50%;display:flex}.input__ylsuY.inline__CuO0B .label__Uty0i{display:inline-block;flex-grow:1;flex-shrink:0;flex-basis:var(--basis);font-weight:normal}.input__ylsuY.inline__CuO0B .text__OJDZ5{min-width:41px}.input__ylsuY .label__Uty0i{display:block;font-weight:bold}.input__ylsuY .text__OJDZ5{width:100%;background-color:rgba(0,0,0,0);border:0;outline:none;padding:0;font-size:1rem}.material-design .input__ylsuY .text__OJDZ5{color:#212121;background-image:linear-gradient(to top, transparent 1px, #afafaf 1px);background-size:100% 2px;background-repeat:no-repeat;background-position:center bottom;padding-bottom:2px}.material-design .input__ylsuY .text__OJDZ5:read-only,.material-design .input__ylsuY .text__OJDZ5:read-only:focus{background-image:none;border-bottom:1px solid rgba(0,0,0,0)}.material-design .input__ylsuY .text__OJDZ5:focus{background-image:linear-gradient(var(--flavor-accent), var(--flavor-accent)),linear-gradient(to top, transparent 1px, #afafaf 1px)}.flat-design .input__ylsuY .text__OJDZ5{color:#1f1f21}.flat-design .input__ylsuY .text__OJDZ5,.flat-design .input__ylsuY .text__OJDZ5:focus{border-bottom:1px solid var(--border-light)}.input__ylsuY.hiddenInput__KSMQB .text__OJDZ5{background-image:none;border-bottom:1px solid rgba(0,0,0,0)}.input__ylsuY.hiddenInput__KSMQB.noFocusHint__bBtc8 .text__OJDZ5:focus{background-image:none;border-bottom:1px solid rgba(0,0,0,0)}.input__ylsuY .error__LVBul{font-size:.7rem;--text-primary-default-color: var(--text-error) }`, "",{"version":3,"sources":["webpack://./src/Components/FormElements/Input/input.scss","webpack://./src/scss/_designMixin.scss"],"names":[],"mappings":"AAGA,cACE,UAAA,CAEA,4BACE,YAAA,CACA,YAAA,CACA,0CACE,oBAAA,CACA,WAAA,CACA,aAAA,CACA,uBAAA,CACA,kBAAA,CAEF,yCAEE,cAAA,CAIJ,4BACE,aAAA,CACA,gBAAA,CAGF,2BACE,UAAA,CACA,8BAAA,CACA,QAAA,CACA,YAAA,CACA,SAAA,CACA,cAAA,CC7BS,4CDgCP,aAAA,CACA,sEAAA,CACA,wBAAA,CACA,2BAAA,CACA,iCAAA,CACA,kBAAA,CAEA,kHACE,qBAAA,CACA,qCAAA,CAGF,kDACE,kIAAA,CC7CK,wCDmDP,aAAA,CACA,sFACE,2CAAA,CAMJ,8CACE,qBAAA,CACA,qCAAA,CAKE,uEACE,qBAAA,CACA,qCAAA,CAMR,4BACE,eAAA,CACA,gDAAA","sourcesContent":["@import \"../../../scss/variables\";\n@import \"../../../scss/designMixin\";\n\n.input {\n  width: 100%;\n\n  &.inline {\n    --basis: 50%;\n    display: flex;\n    .label {\n      display: inline-block;\n      flex-grow: 1;\n      flex-shrink: 0;\n      flex-basis: var(--basis);\n      font-weight: normal;\n    }\n    .text {\n      // 3 numbers\n      min-width: 41px;\n    }\n  }\n\n  .label {\n    display: block;\n    font-weight: bold;\n  }\n\n  .text {\n    width: 100%;\n    background-color: transparent;\n    border: 0;\n    outline: none;\n    padding: 0;\n    font-size: 1rem;\n\n    @include design($material) {\n      color: #212121;\n      background-image: linear-gradient(to top, transparent 1px, #afafaf 1px);\n      background-size: 100% 2px;\n      background-repeat: no-repeat;\n      background-position: center bottom;\n      padding-bottom: 2px;\n\n      &:read-only, &:read-only:focus {\n        background-image: none;\n        border-bottom: 1px solid transparent;\n      }\n\n      &:focus {\n        background-image: linear-gradient(var(--flavor-accent), var(--flavor-accent)),\n        linear-gradient(to top, transparent 1px, #afafaf 1px);\n      }\n    }\n\n    @include design($flat) {\n      color: #1f1f21;\n      &, &:focus {\n        border-bottom: 1px solid var(--border-light);\n      }\n    }\n  }\n\n  &.hiddenInput {\n    .text {\n      background-image: none;\n      border-bottom: 1px solid transparent;\n    }\n\n    &.noFocusHint {\n      .text {\n        &:focus {\n          background-image: none;\n          border-bottom: 1px solid transparent;\n        }\n      }\n    }\n  }\n\n  .error {\n    font-size: 0.7rem;\n    --text-primary-default-color: var(--text-error)\n  }\n}\n","@use 'sass:selector';\n\n@mixin design($designName) {\n  @if & {\n    @at-root #{selector.nest(':global(.'+$designName+\")\", &)} {\n      @content\n    }\n  } @else {\n    :global(.#{$designName}) {\n      @content\n    }\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"input": `input__ylsuY`,
@@ -1443,7 +1436,8 @@ ___CSS_LOADER_EXPORT___.locals = {
 	"label": `label__Uty0i`,
 	"text": `text__OJDZ5`,
 	"hiddenInput": `hiddenInput__KSMQB`,
-	"noFocusHint": `noFocusHint__bBtc8`
+	"noFocusHint": `noFocusHint__bBtc8`,
+	"error": `error__LVBul`
 };
 module.exports = ___CSS_LOADER_EXPORT___;
 
@@ -1483,14 +1477,15 @@ var ___CSS_LOADER_API_SOURCEMAP_IMPORT___ = __webpack_require__(1354);
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(6314);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.select__mz94a{width:100%}.select__mz94a .label__oyzeA{font-weight:bold;display:block}.select__mz94a .input__HyuSy{outline:none;background-color:rgba(0,0,0,0);height:2rem;line-height:2rem;color:#1f1f21;appearance:none;border:none;border-radius:0;padding:0 20px 0 0;background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=");background-repeat:no-repeat}.select__mz94a .input__HyuSy:focus{outline:none}.material-design .select__mz94a .input__HyuSy{-webkit-font-smoothing:antialiased;font-size:15px;background-size:auto,100% 1px;background-position:right center,left bottom}.flat-design .select__mz94a .input__HyuSy{font-size:17px;background-position:right center}.select__mz94a.inline__VLoaD{display:flex;align-items:center}.select__mz94a.inline__VLoaD .label__oyzeA{padding-right:4px;flex:1}.select__mz94a.small__UbTP3 .input__HyuSy{height:initial;line-height:1.5rem}`, "",{"version":3,"sources":["webpack://./src/Components/FormElements/Select/select.scss","webpack://./src/scss/_designMixin.scss"],"names":[],"mappings":"AAGA,eACE,UAAA,CAEA,6BACE,gBAAA,CACA,aAAA,CAGF,6BACE,YAAA,CACA,8BAAA,CACA,WAAA,CACA,gBAAA,CACA,aAAA,CACA,eAAA,CACA,WAAA,CACA,eAAA,CACA,kBAAA,CACA,8lCAAA,CACA,2BAAA,CAEA,mCACE,YAAA,CCrBO,8CDyBP,kCAAA,CACA,cAAA,CACA,6BAAA,CACA,4CAAA,CC5BO,0CDgCP,cAAA,CACA,gCAAA,CAIJ,6BACE,YAAA,CACA,kBAAA,CAEA,2CACE,iBAAA,CACA,MAAA,CAIJ,0CACE,cAAA,CACA,kBAAA","sourcesContent":["@import \"../../../scss/variables\";\n@import \"../../../scss/designMixin\";\n\n.select {\n  width: 100%;\n\n  .label {\n    font-weight: bold;\n    display: block;\n  }\n\n  .input {\n    outline: none;\n    background-color: transparent;\n    height: 2rem;\n    line-height: 2rem;\n    color: #1f1f21;\n    appearance: none;\n    border: none;\n    border-radius: 0;\n    padding: 0 20px 0 0;\n    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');\n    background-repeat: no-repeat;\n\n    &:focus {\n      outline: none;\n    }\n\n    @include design($material) {\n      -webkit-font-smoothing: antialiased;\n      font-size: 15px;\n      background-size: auto, 100% 1px;\n      background-position: right center, left bottom;\n    }\n\n    @include design($flat) {\n      font-size: 17px;\n      background-position: right center;\n    }\n  }\n\n  &.inline {\n    display: flex;\n    align-items: center;\n\n    .label {\n      padding-right: 4px;\n      flex: 1;\n    }\n  }\n\n  &.small .input {\n    height: initial;\n    line-height: 1.5rem;\n  }\n}\n","@use 'sass:selector';\n\n@mixin design($designName) {\n  @if & {\n    @at-root #{selector.nest(':global(.'+$designName+\")\", &)} {\n      @content\n    }\n  } @else {\n    :global(.#{$designName}) {\n      @content\n    }\n  }\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `.select__mz94a{width:100%}.select__mz94a .label__oyzeA{font-weight:bold;display:block}.select__mz94a .input__HyuSy{outline:none;background-color:rgba(0,0,0,0);height:2rem;line-height:2rem;color:#1f1f21;appearance:none;border:none;border-radius:0;padding:0 20px 0 0;background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=");background-repeat:no-repeat}.select__mz94a .input__HyuSy:focus{outline:none}.material-design .select__mz94a .input__HyuSy{-webkit-font-smoothing:antialiased;font-size:15px;background-size:auto,100% 1px;background-position:right center,left bottom}.flat-design .select__mz94a .input__HyuSy{font-size:17px;background-position:right center}.select__mz94a.inline__VLoaD{display:flex;align-items:center}.select__mz94a.inline__VLoaD .label__oyzeA{padding-right:4px;flex:1}.select__mz94a.small__UbTP3 .input__HyuSy{height:initial;line-height:1.5rem}.select__mz94a .error__VJG4n{font-size:.7rem;--text-primary-default-color: var(--text-error) }`, "",{"version":3,"sources":["webpack://./src/Components/FormElements/Select/select.scss","webpack://./src/scss/_designMixin.scss"],"names":[],"mappings":"AAGA,eACE,UAAA,CAEA,6BACE,gBAAA,CACA,aAAA,CAGF,6BACE,YAAA,CACA,8BAAA,CACA,WAAA,CACA,gBAAA,CACA,aAAA,CACA,eAAA,CACA,WAAA,CACA,eAAA,CACA,kBAAA,CACA,8lCAAA,CACA,2BAAA,CAEA,mCACE,YAAA,CCrBO,8CDyBP,kCAAA,CACA,cAAA,CACA,6BAAA,CACA,4CAAA,CC5BO,0CDgCP,cAAA,CACA,gCAAA,CAIJ,6BACE,YAAA,CACA,kBAAA,CAEA,2CACE,iBAAA,CACA,MAAA,CAIJ,0CACE,cAAA,CACA,kBAAA,CAGF,6BACE,eAAA,CACA,gDAAA","sourcesContent":["@import \"../../../scss/variables\";\n@import \"../../../scss/designMixin\";\n\n.select {\n  width: 100%;\n\n  .label {\n    font-weight: bold;\n    display: block;\n  }\n\n  .input {\n    outline: none;\n    background-color: transparent;\n    height: 2rem;\n    line-height: 2rem;\n    color: #1f1f21;\n    appearance: none;\n    border: none;\n    border-radius: 0;\n    padding: 0 20px 0 0;\n    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');\n    background-repeat: no-repeat;\n\n    &:focus {\n      outline: none;\n    }\n\n    @include design($material) {\n      -webkit-font-smoothing: antialiased;\n      font-size: 15px;\n      background-size: auto, 100% 1px;\n      background-position: right center, left bottom;\n    }\n\n    @include design($flat) {\n      font-size: 17px;\n      background-position: right center;\n    }\n  }\n\n  &.inline {\n    display: flex;\n    align-items: center;\n\n    .label {\n      padding-right: 4px;\n      flex: 1;\n    }\n  }\n\n  &.small .input {\n    height: initial;\n    line-height: 1.5rem;\n  }\n\n  .error {\n    font-size: 0.7rem;\n    --text-primary-default-color: var(--text-error)\n  }\n}\n","@use 'sass:selector';\n\n@mixin design($designName) {\n  @if & {\n    @at-root #{selector.nest(':global(.'+$designName+\")\", &)} {\n      @content\n    }\n  } @else {\n    :global(.#{$designName}) {\n      @content\n    }\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"select": `select__mz94a`,
 	"label": `label__oyzeA`,
 	"input": `input__HyuSy`,
 	"inline": `inline__VLoaD`,
-	"small": `small__UbTP3`
+	"small": `small__UbTP3`,
+	"error": `error__VJG4n`
 };
 module.exports = ___CSS_LOADER_EXPORT___;
 
@@ -1546,11 +1541,12 @@ var ___CSS_LOADER_API_SOURCEMAP_IMPORT___ = __webpack_require__(1354);
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(6314);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.container__oHydJ{width:100%;height:10rem}.container__oHydJ .label__flbC2{display:block}.container__oHydJ textarea{background-color:#efeff4;color:#1f1f21;box-shadow:none;appearance:none;width:100%;height:100%;resize:none;outline:none;padding:5px;border-radius:4px;border:1px solid var(--border-light)}`, "",{"version":3,"sources":["webpack://./src/Components/FormElements/Textarea/textarea.scss"],"names":[],"mappings":"AAAA,kBACE,UAAA,CACA,YAAA,CAEA,gCACE,aAAA,CAGF,2BACE,wBAAA,CACA,aAAA,CACA,eAAA,CACA,eAAA,CACA,UAAA,CACA,WAAA,CACA,WAAA,CACA,YAAA,CACA,WAAA,CACA,iBAAA,CACA,oCAAA","sourcesContent":[".container {\n  width: 100%;\n  height: 10rem;\n\n  .label {\n    display: block;\n  }\n\n  textarea {\n    background-color: #efeff4;\n    color: #1f1f21;\n    box-shadow: none;\n    appearance: none;\n    width: 100%;\n    height: 100%;\n    resize: none;\n    outline: none;\n    padding: 5px;\n    border-radius: 4px;\n    border: 1px solid var(--border-light);\n  }\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `.container__oHydJ{width:100%;min-height:10rem;height:100%;display:flex;flex-direction:column}.container__oHydJ .label__flbC2{display:block}.container__oHydJ textarea{flex:1;background-color:#efeff4;color:#1f1f21;box-shadow:none;appearance:none;width:100%;height:100%;resize:none;outline:none;padding:5px;border-radius:4px;border:1px solid var(--border-light)}.container__oHydJ .error__cup_B{font-size:.7rem;--text-primary-default-color: var(--text-error) }`, "",{"version":3,"sources":["webpack://./src/Components/FormElements/Textarea/textarea.scss"],"names":[],"mappings":"AAAA,kBACE,UAAA,CACA,gBAAA,CACA,WAAA,CACA,YAAA,CACA,qBAAA,CAEA,gCACE,aAAA,CAGF,2BACE,MAAA,CACA,wBAAA,CACA,aAAA,CACA,eAAA,CACA,eAAA,CACA,UAAA,CACA,WAAA,CACA,WAAA,CACA,YAAA,CACA,WAAA,CACA,iBAAA,CACA,oCAAA,CAGF,gCACE,eAAA,CACA,gDAAA","sourcesContent":[".container {\n  width: 100%;\n  min-height: 10rem;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n\n  .label {\n    display: block;\n  }\n\n  textarea {\n    flex: 1;\n    background-color: #efeff4;\n    color: #1f1f21;\n    box-shadow: none;\n    appearance: none;\n    width: 100%;\n    height: 100%;\n    resize: none;\n    outline: none;\n    padding: 5px;\n    border-radius: 4px;\n    border: 1px solid var(--border-light);\n  }\n\n  .error {\n    font-size: 0.7rem;\n    --text-primary-default-color: var(--text-error)\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"container": `container__oHydJ`,
-	"label": `label__flbC2`
+	"label": `label__flbC2`,
+	"error": `error__cup_B`
 };
 module.exports = ___CSS_LOADER_EXPORT___;
 
@@ -2619,12 +2615,13 @@ var ___CSS_LOADER_API_SOURCEMAP_IMPORT___ = __webpack_require__(1354);
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(6314);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.topBar__kgza0{flex-wrap:nowrap;justify-content:flex-start;position:relative;display:flex;align-items:center;padding-top:.5rem;padding-bottom:.5rem;background:#fff;height:56px}.topBar__kgza0 .container__Jfy20{display:flex;flex-wrap:inherit;align-items:center;justify-content:center}.topBar__kgza0 .button__mbT9f{display:block;padding:.5rem 1rem;color:#0d3efd;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.topBar__kgza0 .button__mbT9f.disabled__LCcLl{color:#6c757d;pointer-events:none;cursor:default}.topBar__kgza0.transparent__wUpRR{opacity:.65;z-index:1}.topBar__kgza0.drawBehind__iJMZU{position:absolute;left:0;right:0}.topBar__kgza0 .titleContainer__Txca2{overflow:hidden}.topBar__kgza0 .titleContainer__Txca2 .title__VtrMU{color:rgba(0,0,0,.55);padding-bottom:.5rem;padding-top:.5rem;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.topBar__kgza0 .buttonContainer__E2k7a{white-space:nowrap;display:flex;flex:1;min-width:-webkit-min-content}.topBar__kgza0 .buttonContainer__E2k7a.right__ep1X_{justify-content:flex-end}.topBar__kgza0 .buttonContainer__E2k7a.left__Mpk3V{justify-content:flex-start}.topBar__kgza0 .hiddenContainer__oNK0f{position:relative}.topBar__kgza0 .hiddenContainer__oNK0f .hiddenCloseCurtain__isl1J{position:fixed;top:0;left:0;right:0;bottom:0;z-index:998}.topBar__kgza0 .hiddenContainer__oNK0f .hiddenMenu__juNeE{position:absolute;right:0;white-space:nowrap;display:flex;min-width:-webkit-min-content;justify-content:flex-start;flex-direction:column;z-index:999;background-color:#fff;border:1px solid var(--border-strong)}.material-design .topBar__kgza0{box-shadow:0 1px 5px rgba(0,0,0,.3)}.material-design .topBar__kgza0 .hiddenActionMenu__ozkKS{display:none}.flat-design .topBar__kgza0{background-size:100% 1px;background-repeat:no-repeat;background-position:bottom;background-image:linear-gradient(0deg, #b2b2b2, #b2b2b2 100%)}.flat-design .topBar__kgza0 .hiddenContainer__oNK0f{display:none}`, "",{"version":3,"sources":["webpack://./src/Components/TopBar/topBar.scss","webpack://./src/scss/_designMixin.scss"],"names":[],"mappings":"AAGA,eAEE,gBAAA,CACA,0BAAA,CAGA,iBAAA,CACA,YAAA,CACA,kBAAA,CACA,iBAAA,CACA,oBAAA,CAEA,eAAA,CACA,WAAA,CAEA,iCACE,YAAA,CACA,iBAAA,CACA,kBAAA,CACA,sBAAA,CAGF,8BACE,aAAA,CACA,kBAAA,CACA,aAAA,CACA,oBAAA,CACA,iGAAA,CAEA,8CACE,aAAA,CACA,mBAAA,CACA,cAAA,CAIJ,kCACE,WAAA,CACA,SAAA,CAGF,iCACE,iBAAA,CACA,MAAA,CACA,OAAA,CAGF,sCACE,eAAA,CAEA,oDACE,qBAAA,CACA,oBAAA,CACA,iBAAA,CAEA,kBAAA,CACA,UAAA,CACA,eAAA,CACA,sBAAA,CAIJ,uCACE,kBAAA,CACA,YAAA,CACA,MAAA,CACA,6BAAA,CAEA,oDACE,wBAAA,CAGF,mDACE,0BAAA,CAIJ,uCACE,iBAAA,CAEA,kEACE,cAAA,CACA,KAAA,CACA,MAAA,CACA,OAAA,CACA,QAAA,CACA,WAAA,CAGF,0DACE,iBAAA,CACA,OAAA,CACA,kBAAA,CACA,YAAA,CACA,6BAAA,CACA,0BAAA,CACA,qBAAA,CACA,WAAA,CACA,qBAAA,CACA,qCAAA,CClGO,gCDuGT,mCAAA,CAEA,yDACE,YAAA,CC1GO,4BD8GT,wBAAA,CACA,2BAAA,CACA,0BAAA,CACA,6DAAA,CAEA,oDACE,YAAA","sourcesContent":["@import \"../../scss/variables\";\n@import \"../../scss/designMixin\";\n\n.topBar {\n  // navbar-expand\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n\n  // navbar\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n\n  background: white;\n  height: 56px;\n\n  .container {\n    display: flex;\n    flex-wrap: inherit;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .button {\n    display: block;\n    padding: 0.5rem 1rem;\n    color: #0d3efd; // TODO change color\n    text-decoration: none;\n    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;\n\n    &.disabled {\n      color: #6c757d; // TODO change color\n      pointer-events: none;\n      cursor: default;\n    }\n  }\n\n  &.transparent {\n    opacity: 0.65;\n    z-index: 1;\n  }\n\n  &.drawBehind {\n    position: absolute;\n    left: 0;\n    right: 0;\n  }\n\n  .titleContainer {\n    overflow: hidden;\n\n    .title {\n      color: rgba(0, 0, 0, 0.55); // TODO Change color\n      padding-bottom: 0.5rem;\n      padding-top: 0.5rem;\n\n      white-space: nowrap;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  .buttonContainer {\n    white-space: nowrap;\n    display: flex;\n    flex: 1;\n    min-width: -webkit-min-content;\n\n    &.right {\n      justify-content: flex-end;\n    }\n\n    &.left {\n      justify-content: flex-start;\n    }\n  }\n\n  .hiddenContainer {\n    position: relative;\n\n    .hiddenCloseCurtain {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 998;\n    }\n\n    .hiddenMenu {\n      position: absolute;\n      right: 0;\n      white-space: nowrap;\n      display: flex;\n      min-width: -webkit-min-content;\n      justify-content: flex-start;\n      flex-direction: column;\n      z-index: 999;\n      background-color: white;\n      border: 1px solid var(--border-strong);\n    }\n  }\n\n  @include design($material) {\n    box-shadow: 0 1px 5px rgb(0 0 0 / 30%);\n\n    .hiddenActionMenu {\n      display: none;\n    }\n  }\n  @include design($flat) {\n    background-size: 100% 1px;\n    background-repeat: no-repeat;\n    background-position: bottom;\n    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 100%);\n\n    .hiddenContainer {\n      display: none;\n    }\n  }\n}\n","@use 'sass:selector';\n\n@mixin design($designName) {\n  @if & {\n    @at-root #{selector.nest(':global(.'+$designName+\")\", &)} {\n      @content\n    }\n  } @else {\n    :global(.#{$designName}) {\n      @content\n    }\n  }\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `.topBar__kgza0{flex-wrap:nowrap;justify-content:flex-start;position:relative;display:flex;align-items:center;padding-top:.5rem;padding-bottom:.5rem;background:#fff;height:56px}.topBar__kgza0 .container__Jfy20{display:flex;flex-wrap:inherit;align-items:center;justify-content:center}.topBar__kgza0 .button__mbT9f{display:block;padding:.5rem 1rem;color:#0d3efd;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.topBar__kgza0 .button__mbT9f.active__UTNIz{cursor:pointer}.topBar__kgza0 .button__mbT9f.disabled__LCcLl{color:#6c757d;pointer-events:none;cursor:default}.topBar__kgza0.transparent__wUpRR{opacity:.65;z-index:1}.topBar__kgza0.drawBehind__iJMZU{position:absolute;left:0;right:0}.topBar__kgza0 .titleContainer__Txca2{overflow:hidden}.topBar__kgza0 .titleContainer__Txca2 .title__VtrMU{color:rgba(0,0,0,.55);padding-bottom:.5rem;padding-top:.5rem;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.topBar__kgza0 .buttonContainer__E2k7a{white-space:nowrap;display:flex;flex:1;min-width:-webkit-min-content}.topBar__kgza0 .buttonContainer__E2k7a.right__ep1X_{justify-content:flex-end}.topBar__kgza0 .buttonContainer__E2k7a.left__Mpk3V{justify-content:flex-start}.topBar__kgza0 .hiddenContainer__oNK0f{position:relative}.topBar__kgza0 .hiddenContainer__oNK0f .hiddenCloseCurtain__isl1J{position:fixed;top:0;left:0;right:0;bottom:0;z-index:998}.topBar__kgza0 .hiddenContainer__oNK0f .hiddenMenu__juNeE{position:absolute;right:0;white-space:nowrap;display:flex;min-width:-webkit-min-content;justify-content:flex-start;flex-direction:column;z-index:999;background-color:#fff;border:1px solid var(--border-strong)}.material-design .topBar__kgza0{box-shadow:0 1px 5px rgba(0,0,0,.3)}.material-design .topBar__kgza0 .hiddenActionMenu__ozkKS{display:none}.flat-design .topBar__kgza0{background-size:100% 1px;background-repeat:no-repeat;background-position:bottom;background-image:linear-gradient(0deg, #b2b2b2, #b2b2b2 100%)}.flat-design .topBar__kgza0 .hiddenContainer__oNK0f{display:none}`, "",{"version":3,"sources":["webpack://./src/Components/TopBar/topBar.scss","webpack://./src/scss/_designMixin.scss"],"names":[],"mappings":"AAGA,eAEE,gBAAA,CACA,0BAAA,CAGA,iBAAA,CACA,YAAA,CACA,kBAAA,CACA,iBAAA,CACA,oBAAA,CAEA,eAAA,CACA,WAAA,CAEA,iCACE,YAAA,CACA,iBAAA,CACA,kBAAA,CACA,sBAAA,CAGF,8BAKE,aAAA,CACA,kBAAA,CACA,aAAA,CACA,oBAAA,CACA,iGAAA,CARA,4CACE,cAAA,CASF,8CACE,aAAA,CACA,mBAAA,CACA,cAAA,CAIJ,kCACE,WAAA,CACA,SAAA,CAGF,iCACE,iBAAA,CACA,MAAA,CACA,OAAA,CAGF,sCACE,eAAA,CAEA,oDACE,qBAAA,CACA,oBAAA,CACA,iBAAA,CAEA,kBAAA,CACA,UAAA,CACA,eAAA,CACA,sBAAA,CAIJ,uCACE,kBAAA,CACA,YAAA,CACA,MAAA,CACA,6BAAA,CAEA,oDACE,wBAAA,CAGF,mDACE,0BAAA,CAIJ,uCACE,iBAAA,CAEA,kEACE,cAAA,CACA,KAAA,CACA,MAAA,CACA,OAAA,CACA,QAAA,CACA,WAAA,CAGF,0DACE,iBAAA,CACA,OAAA,CACA,kBAAA,CACA,YAAA,CACA,6BAAA,CACA,0BAAA,CACA,qBAAA,CACA,WAAA,CACA,qBAAA,CACA,qCAAA,CCtGO,gCD2GT,mCAAA,CAEA,yDACE,YAAA,CC9GO,4BDkHT,wBAAA,CACA,2BAAA,CACA,0BAAA,CACA,6DAAA,CAEA,oDACE,YAAA","sourcesContent":["@import \"../../scss/variables\";\n@import \"../../scss/designMixin\";\n\n.topBar {\n  // navbar-expand\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n\n  // navbar\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n\n  background: white;\n  height: 56px;\n\n  .container {\n    display: flex;\n    flex-wrap: inherit;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .button {\n    &.active {\n      cursor: pointer;\n    }\n\n    display: block;\n    padding: 0.5rem 1rem;\n    color: #0d3efd; // TODO change color\n    text-decoration: none;\n    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;\n\n    &.disabled {\n      color: #6c757d; // TODO change color\n      pointer-events: none;\n      cursor: default;\n    }\n  }\n\n  &.transparent {\n    opacity: 0.65;\n    z-index: 1;\n  }\n\n  &.drawBehind {\n    position: absolute;\n    left: 0;\n    right: 0;\n  }\n\n  .titleContainer {\n    overflow: hidden;\n\n    .title {\n      color: rgba(0, 0, 0, 0.55); // TODO Change color\n      padding-bottom: 0.5rem;\n      padding-top: 0.5rem;\n\n      white-space: nowrap;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  .buttonContainer {\n    white-space: nowrap;\n    display: flex;\n    flex: 1;\n    min-width: -webkit-min-content;\n\n    &.right {\n      justify-content: flex-end;\n    }\n\n    &.left {\n      justify-content: flex-start;\n    }\n  }\n\n  .hiddenContainer {\n    position: relative;\n\n    .hiddenCloseCurtain {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 998;\n    }\n\n    .hiddenMenu {\n      position: absolute;\n      right: 0;\n      white-space: nowrap;\n      display: flex;\n      min-width: -webkit-min-content;\n      justify-content: flex-start;\n      flex-direction: column;\n      z-index: 999;\n      background-color: white;\n      border: 1px solid var(--border-strong);\n    }\n  }\n\n  @include design($material) {\n    box-shadow: 0 1px 5px rgb(0 0 0 / 30%);\n\n    .hiddenActionMenu {\n      display: none;\n    }\n  }\n  @include design($flat) {\n    background-size: 100% 1px;\n    background-repeat: no-repeat;\n    background-position: bottom;\n    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 100%);\n\n    .hiddenContainer {\n      display: none;\n    }\n  }\n}\n","@use 'sass:selector';\n\n@mixin design($designName) {\n  @if & {\n    @at-root #{selector.nest(':global(.'+$designName+\")\", &)} {\n      @content\n    }\n  } @else {\n    :global(.#{$designName}) {\n      @content\n    }\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"topBar": `topBar__kgza0`,
 	"container": `container__Jfy20`,
 	"button": `button__mbT9f`,
+	"active": `active__UTNIz`,
 	"disabled": `disabled__LCcLl`,
 	"transparent": `transparent__wUpRR`,
 	"drawBehind": `drawBehind__iJMZU`,
@@ -10014,6 +10011,7 @@ __webpack_require__.d(__webpack_exports__, {
   Grow: () => (/* reexport */ Grow),
   Heading: () => (/* reexport */ HeadingMemo),
   HiddenInput: () => (/* reexport */ HiddenInput_tmp),
+  HookForm: () => (/* reexport */ HookForm),
   HoverMenu: () => (/* reexport */ HoverMenu),
   Icon: () => (/* reexport */ Icon),
   Image: () => (/* reexport */ ImageMemo),
@@ -10021,6 +10019,7 @@ __webpack_require__.d(__webpack_exports__, {
   Inline: () => (/* reexport */ InlineMemo),
   InlineBlock: () => (/* reexport */ InlineBlockMemo),
   Input: () => (/* reexport */ Input),
+  InputController: () => (/* reexport */ InputController),
   List: () => (/* reexport */ List),
   ListItem: () => (/* reexport */ ListItemMemo),
   ListRow: () => (/* reexport */ ListRow),
@@ -10033,10 +10032,15 @@ __webpack_require__.d(__webpack_exports__, {
   MenuItem: () => (/* reexport */ MenuItem),
   MoreButton: () => (/* reexport */ MoreButtonMemo),
   MultipleFileInput: () => (/* reexport */ MultipleFileInput),
+  MultipleFileInputController: () => (/* reexport */ MultipleFileInputController),
   PasswordInput: () => (/* reexport */ PasswordInput),
+  PasswordInputController: () => (/* reexport */ PasswordInputController),
   RESTRICT_CHILDREN: () => (/* reexport */ RESTRICT_CHILDREN),
   SearchSelectInput: () => (/* reexport */ SearchSelectInput),
   Select: () => (/* reexport */ Select),
+  SelectController: () => (/* reexport */ SelectController),
+  SendFormContext: () => (/* reexport */ SendFormContext),
+  Size: () => (/* reexport */ Size),
   SizeCalculator: () => (/* reexport */ SizeCalculatorMemo),
   Slider: () => (/* reexport */ Slider_Slider),
   Spoiler: () => (/* reexport */ SpoilerMemo),
@@ -10051,8 +10055,10 @@ __webpack_require__.d(__webpack_exports__, {
   Table: () => (/* reexport */ Table_tmp),
   Text: () => (/* reexport */ tmp),
   Textarea: () => (/* reexport */ Textarea),
+  TextareaController: () => (/* reexport */ TextareaController),
   Toast: () => (/* reexport */ ToastMemo),
   ToastContainer: () => (/* reexport */ ToastContainerMemo),
+  ToastContext: () => (/* reexport */ ToastContext),
   TopBar: () => (/* reexport */ TopBarMemo),
   TopBarButton: () => (/* reexport */ TopBarButtonMemo),
   View: () => (/* reexport */ View),
@@ -10082,12 +10088,15 @@ __webpack_require__.d(__webpack_exports__, {
   useOnChangeDone: () => (/* reexport */ useOnChangeDone),
   useOnMount: () => (/* reexport */ useOnMount),
   useOnce: () => (/* reexport */ useOnce),
+  useSendFormContext: () => (/* reexport */ useSendFormContext),
   useSharedSelectedColor: () => (/* reexport */ useSharedSelectedColor),
   useSpoilerGroup: () => (/* reexport */ useSpoilerGroup),
   useStrictEnabled: () => (/* reexport */ useStrictEnabled),
+  useToast: () => (/* reexport */ useToast),
   useWindow: () => (/* reexport */ useWindow),
   useWindowDimensions: () => (/* reexport */ useWindowDimensions),
   withForwardRef: () => (/* reexport */ withForwardRef),
+  withHookController: () => (/* reexport */ withHookController),
   withMemo: () => (/* reexport */ withMemo),
   withRenderBrowserOnly: () => (/* reexport */ withRenderBrowserOnly),
   withRestrictedChildren: () => (/* reexport */ withRestrictedChildren)
@@ -10240,18 +10249,18 @@ function withForwardRef(component, styles, defaultAllowChildren) {
 }
 ;// CONCATENATED MODULE: ./src/Components/Hooks/useComposedRef.ts
 
-const useComposedRef = (ref, initialValue = null) => {
-  const targetRef = (0,external_react_.useRef)(initialValue);
-  (0,external_react_.useEffect)(() => {
-    if (!ref) return;
-    if (typeof ref === 'function') {
-      ref(targetRef.current);
-    } else {
-      ref.current = targetRef.current;
+function useComposedRef(...refs) {
+  return (0,external_react_.useCallback)(val => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') {
+        ref(val);
+      } else if (ref) {
+        ref.current = val;
+      }
     }
-  }, [ref]);
-  return targetRef;
-};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
+}
 ;// CONCATENATED MODULE: ./src/Components/Clickable/Clickable.tsx
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var Clickable_rest = undefined && undefined.__rest || function (s, e) {
@@ -10281,12 +10290,15 @@ function Clickable(_a, ref) {
       interactable = true,
       preventDefault = false,
       stopPropagation = true,
-      useReactOnMouseLeave = false
+      useReactOnMouseLeave = false,
+      tabIndex,
+      draggable
     } = _a,
-    clickData = Clickable_rest(_a, ["className", "children", "style", "href", "target", "id", "interactable", "preventDefault", "stopPropagation", "useReactOnMouseLeave"]);
+    clickData = Clickable_rest(_a, ["className", "children", "style", "href", "target", "id", "interactable", "preventDefault", "stopPropagation", "useReactOnMouseLeave", "tabIndex", "draggable"]);
   // States
   // Refs
-  const clickableRef = useComposedRef(ref);
+  const clickableRef = (0,external_react_.useRef)(null);
+  const refSetter = useComposedRef(ref, clickableRef);
   // Callbacks
   const onClickInner = useListener('onClick', clickData);
   const realOnClick = (0,external_react_.useCallback)(e => {
@@ -10372,6 +10384,18 @@ function Clickable(_a, ref) {
       onDragOver(e);
     }
   }, [clickData.onDragOver, onDragOver, preventDefault, stopPropagation]);
+  const onDragStartListener = useListener('onDragStart', clickData);
+  const realOnDragStartListener = (0,external_react_.useCallback)(e => {
+    if (clickData.onDragStart) {
+      if (stopPropagation) {
+        e.stopPropagation();
+      }
+      if (preventDefault) {
+        e.preventDefault();
+      }
+      onDragStartListener(e);
+    }
+  }, [clickData.onDragStart, onDragStartListener, preventDefault, stopPropagation]);
   const onMouseEnter = useListener('onMouseEnter', clickData);
   const realOnMouseEnter = (0,external_react_.useCallback)(e => {
     if (clickData.onMouseEnter) {
@@ -10438,16 +10462,18 @@ function Clickable(_a, ref) {
     onMouseEnter: realOnMouseEnter,
     onMouseLeave: useReactOnMouseLeave ? realOnMouseLeave : undefined,
     onDoubleClick: realOnDoubleClick,
-    tabIndex: interactable ? 0 : undefined
+    tabIndex: interactable ? 0 : tabIndex,
+    draggable,
+    onDragStart: realOnDragStartListener
   };
   if (typeof href === 'string') {
     return /*#__PURE__*/external_react_.createElement("a", _extends({}, props, {
       href: href,
-      ref: clickableRef
+      ref: refSetter
     }), children);
   }
   return /*#__PURE__*/external_react_.createElement("span", _extends({}, props, {
-    ref: clickableRef
+    ref: refSetter
   }), children);
 }
 const ClickableMemo = withForwardRef(Clickable, (clickable_default()));
@@ -11231,7 +11257,10 @@ const DialogBackground = withMemo(function DialogBackground({
 }, (dialogBackground_default()));
 ;// CONCATENATED MODULE: ./src/Components/Dialog/DialogContext.ts
 
-const DialogContext = /*#__PURE__*/external_react_default().createContext(() => Promise.reject());
+const DialogContext = /*#__PURE__*/external_react_default().createContext(() => {
+  console.error("DialogContext not initialized");
+  return Promise.reject("DialogContext not initialized");
+});
 const DialogProvider = DialogContext.Provider;
 function useDialog() {
   return (0,external_react_.useContext)(DialogContext);
@@ -11442,6 +11471,17 @@ var ButtonType;
   ButtonType["Primary"] = "primary";
   ButtonType["Secondary"] = "secondary";
 })(ButtonType || (ButtonType = {}));
+;// CONCATENATED MODULE: ./src/Size.ts
+var Size;
+(function (Size) {
+  Size[Size["xSmall"] = 0] = "xSmall";
+  Size[Size["small"] = 1] = "small";
+  Size[Size["medium"] = 2] = "medium";
+  Size[Size["large"] = 3] = "large";
+  Size[Size["xLarge"] = 4] = "xLarge";
+  Size[Size["xxLarge"] = 5] = "xxLarge";
+})(Size || (Size = {}));
+;
 ;// CONCATENATED MODULE: ./src/Components/FormElements/Button/Button.tsx
 function Button_extends() { return Button_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, Button_extends.apply(null, arguments); }
 var Button_rest = undefined && undefined.__rest || function (s, e) {
@@ -11459,26 +11499,32 @@ var Button_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 const Button = withMemo(function Button(_a) {
   var {
       children,
       className,
       disabled,
+      size,
+      fullWidth = false,
       flavor = Flavor.Accent,
       type = ButtonType.Primary
     } = _a,
-    props = Button_rest(_a, ["children", "className", "disabled", "flavor", "type"]);
+    props = Button_rest(_a, ["children", "className", "disabled", "size", "fullWidth", "flavor", "type"]);
   const [onClick, otherProps] = useListenerWithExtractedProps('onClick', props);
   const classes = {
     [(button_default()).primary]: type === ButtonType.Primary,
     [(button_default()).secondary]: type === ButtonType.Secondary,
-    [(button_default()).disabled]: disabled
+    [(button_default()).disabled]: disabled,
+    [(button_default()).small]: size === Size.small
   };
   return /*#__PURE__*/external_react_.createElement("button", Button_extends({}, otherProps, {
     disabled: disabled,
     type: "button",
     onClick: onClick,
-    className: classnames_default()((button_default()).button, classes, flavor, className)
+    className: classnames_default()((button_default()).button, {
+      [(button_default()).fullWidth]: fullWidth
+    }, classes, flavor, className)
   }), children);
 }, (button_default()));
 // EXTERNAL MODULE: ./src/Components/FormElements/CheckBox/checkbox.scss
@@ -22803,7 +22849,7 @@ const external_react_dom_namespaceObject = require("react-dom");
 function useClientLayoutEffect(...params) {
   if (typeof window !== 'undefined') {
     // eslint-disable-next-line react-hooks/exhaustive-deps,react-hooks/rules-of-hooks
-    (0,external_react_.useLayoutEffect)(...params);
+    external_react_default().useLayoutEffect(...params);
   }
 }
 ;// CONCATENATED MODULE: ./src/Components/Menu/Menu.tsx
@@ -23076,49 +23122,97 @@ function ColorInput(_a) {
 // Need ColorInputMemo for autocompletion of phpstorm
 const ColorInputMemo = withMemo(ColorInput, (colorInput_default()));
 
-// EXTERNAL MODULE: ./src/Components/FormElements/Input/FileInput/fileInput.scss
-var fileInput = __webpack_require__(4372);
-var fileInput_default = /*#__PURE__*/__webpack_require__.n(fileInput);
-;// CONCATENATED MODULE: ./src/Components/Layout/Grow.tsx
+;// CONCATENATED MODULE: external "react-hook-form"
+const external_react_hook_form_namespaceObject = require("react-hook-form");
+// EXTERNAL MODULE: ./src/Components/LoadingCircle/loadingCircle.scss
+var loadingCircle = __webpack_require__(5391);
+var loadingCircle_default = /*#__PURE__*/__webpack_require__.n(loadingCircle);
+;// CONCATENATED MODULE: ./src/Components/LoadingCircle/LoadingCircle.tsx
 
 
 
 
-const Grow = withForwardRef(function Grow({
+function LoadingCircle({
+  size = 32,
+  className,
+  style
+}) {
+  // Variables
+  // States
+  // Refs
+  // Callbacks
+  // Effects
+  // Other
+  // Render Functions
+  return /*#__PURE__*/external_react_.createElement("svg", {
+    className: classnames_default()((loadingCircle_default()).loadingCircle, className),
+    viewBox: `0 0 ${size} ${size}`,
+    width: size,
+    height: size,
+    style: style
+  }, /*#__PURE__*/external_react_.createElement("circle", {
+    cx: "50%",
+    cy: "50%",
+    r: "40%",
+    fill: "none",
+    className: (loadingCircle_default()).spinner
+  }));
+}
+const LoadingCircleMemo = withMemo(LoadingCircle, (loadingCircle_default()));
+
+// EXTERNAL MODULE: ./src/Components/LoadingArea/loadingArea.scss
+var loadingArea = __webpack_require__(5455);
+var loadingArea_default = /*#__PURE__*/__webpack_require__.n(loadingArea);
+;// CONCATENATED MODULE: ./src/Components/LoadingArea/LoadingArea.tsx
+
+
+
+
+
+function LoadingArea({
+  loading,
+  fullWidth = false,
+  fullSize = false,
+  fullHeight = false,
+  opacity = 0.65,
   className,
-  children,
-  center = false,
   style,
-  weight = 1
-}, ref) {
+  children
+}) {
   // Variables
+  if (fullSize) {
+    fullHeight = true;
+    fullWidth = true;
+  }
   // States
   // Refs
   // Callbacks
   // Effects
   // Other
   // Render Functions
-  return /*#__PURE__*/external_react_.createElement("div", {
-    ref: ref,
-    className: classnames_default()((layout_default()).grow, {
-      [(layout_default()).center]: center,
-      [(layout_default()).weight0]: weight === 0,
-      [(layout_default()).weight1]: weight === 1,
-      [(layout_default()).weight2]: weight === 2,
-      [(layout_default()).weight3]: weight === 3,
-      [(layout_default()).weight4]: weight === 4,
-      [(layout_default()).weight5]: weight === 5,
-      [(layout_default()).weight6]: weight === 6
-    }, className),
+  return /*#__PURE__*/external_react_.createElement("span", {
+    className: classnames_default()((loadingArea_default()).loadingArea, className, {
+      'full-height': fullHeight,
+      'full-width': fullWidth
+    }),
     style: style
-  }, children);
-}, (layout_default()));
-// EXTERNAL MODULE: ./src/Components/Image/image.scss
-var Image_image = __webpack_require__(6435);
-var image_default = /*#__PURE__*/__webpack_require__.n(Image_image);
-;// CONCATENATED MODULE: ./src/Components/Image/Image.tsx
-function Image_extends() { return Image_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, Image_extends.apply(null, arguments); }
-var Image_rest = undefined && undefined.__rest || function (s, e) {
+  }, children, loading ? /*#__PURE__*/external_react_.createElement("span", {
+    className: (loadingArea_default()).curtain,
+    style: {
+      opacity
+    }
+  }, /*#__PURE__*/external_react_.createElement(LoadingCircleMemo, null)) : null);
+}
+const LoadingAreaMemo = withMemo(LoadingArea, (loadingArea_default()));
+
+;// CONCATENATED MODULE: ./src/Components/FormElements/Controller/SendFormContext.ts
+
+const SendFormContext = /*#__PURE__*/(0,external_react_.createContext)(undefined);
+function useSendFormContext() {
+  return (0,external_react_.useContext)(SendFormContext);
+}
+;// CONCATENATED MODULE: ./src/Components/FormElements/Controller/HookForm.tsx
+var HookForm_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -23130,62 +23224,49 @@ var Image_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-function Image(_a) {
-  // Variables
+
+const HookForm = withMemo(function HookForm(_a) {
+  // Refs
   var {
-      src,
-      alt = '',
-      className,
-      style
+      children,
+      onSend
     } = _a,
-    otherProps = Image_rest(_a, ["src", "alt", "className", "style"]);
-  // Refs
-  // States
-  // Selectors
+    methods = HookForm_rest(_a, ["children", "onSend"]);
+  // States/Variables/Selectors
+  // Create an inner, as the onSend may have other attributes
+  const innerOnSend = (0,external_react_.useCallback)(() => onSend === null || onSend === void 0 ? void 0 : onSend(), [onSend]);
+  // Dispatch
   // Callbacks
   // Effects
   // Other
-  // Render Functions
-  return /*#__PURE__*/external_react_.createElement("img", Image_extends({
-    src: src,
-    alt: alt,
-    className: classnames_default()((image_default()).image, className),
-    style: style
-  }, otherProps));
-}
-// Need ImageMemo for autocompletion of phpstorm
-const ImageMemo = withMemo(Image, (image_default()));
+  // RenderFunctions
+  return /*#__PURE__*/external_react_default().createElement(external_react_hook_form_namespaceObject.FormProvider, methods, /*#__PURE__*/external_react_default().createElement(SendFormContext.Provider, {
+    value: innerOnSend
+  }, /*#__PURE__*/external_react_default().createElement(LoadingAreaMemo, {
+    loading: methods.formState.isSubmitting,
+    __allowChildren: "all"
+  }, children)));
+});
+// EXTERNAL MODULE: ./src/Components/FormElements/Input/input.scss
+var input = __webpack_require__(2923);
+var input_default = /*#__PURE__*/__webpack_require__.n(input);
+;// CONCATENATED MODULE: ./src/Components/FormElements/hooks/useOnChangeDone.ts
 
-;// CONCATENATED MODULE: ./src/Components/FormElements/Input/FileInput/MultipleFileInput.tsx
-function MultipleFileInput_extends() { return MultipleFileInput_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, MultipleFileInput_extends.apply(null, arguments); }
-var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-var MultipleFileInput_rest = undefined && undefined.__rest || function (s, e) {
+function useOnChangeDone(onChangeDone, ref) {
+  const innerRef = (0,external_react_.useRef)(null);
+  const usedRef = ref !== null && ref !== void 0 ? ref : innerRef;
+  (0,external_react_.useEffect)(() => {
+    const elem = usedRef.current;
+    elem === null || elem === void 0 ? void 0 : elem.addEventListener('change', onChangeDone);
+    return () => {
+      elem === null || elem === void 0 ? void 0 : elem.removeEventListener('change', onChangeDone);
+    };
+  }, [onChangeDone, usedRef]);
+  return usedRef;
+}
+;// CONCATENATED MODULE: ./src/Components/FormElements/Input/Input.tsx
+function Input_extends() { return Input_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, Input_extends.apply(null, arguments); }
+var Input_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -23204,307 +23285,37 @@ var MultipleFileInput_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-
-
-
-
-const MultipleFileInput = withMemo(function MultipleImageInput(_a) {
+const Input = withForwardRef(function Input(_a, ref) {
   // Variables
   var {
+      label,
       className,
       style,
+      onKeyDown,
+      inline = false,
       value,
-      label,
-      mimeTypes = ['image/*'],
-      maxFiles = 1,
-      maxSizePerFile = 1024 * 1024 * 10,
-      allowOverride = maxFiles === 1,
-      onError,
-      showDeleteButton = true
+      error,
+      onChangeText,
+      onEnter
     } = _a,
-    otherProps = MultipleFileInput_rest(_a, ["className", "style", "value", "label", "mimeTypes", "maxFiles", "maxSizePerFile", "allowOverride", "onError", "showDeleteButton"]);
-  // Refs
-  const inputRef = (0,external_react_.useRef)(null);
-  const indexRef = (0,external_react_.useRef)(undefined);
+    otherProps = Input_rest(_a, ["label", "className", "style", "onKeyDown", "inline", "value", "error", "onChangeText", "onEnter"]);
   // States
-  // Selectors
-  // Callbacks
-  const checkMimeType = (0,external_react_.useCallback)(fileType => {
-    return mimeTypes.some(type => {
-      if (type === '*/*' || type === '*') {
-        return true;
+  const usedValue = (0,external_react_.useMemo)(() => {
+    if (otherProps.type !== "number" || typeof value === "number") {
+      return value;
+    }
+    if (typeof value === "string") {
+      if (value === "-") {
+        return value;
       }
-      if (type.endsWith('/*')) {
-        return fileType.startsWith(type.substring(0, type.length - 2));
-      }
-      return fileType === type;
-    });
-  }, [mimeTypes]);
-  const [onChangeFiles, ...props] = useListenerWithExtractedProps('onChangeFiles', otherProps);
-  const getBase64 = (0,external_react_.useCallback)(inputFiles => {
-    const promises = inputFiles.map(file => new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = () => {
-        resolve(reader.result);
-      };
-      reader.onerror = reject;
-      reader.readAsDataURL(file);
-    }));
-    return Promise.all(promises);
-  }, []);
-  const onNewFiles = (0,external_react_.useCallback)((newFiles, index) => __awaiter(this, void 0, void 0, function* () {
-    if (newFiles.some(file => !checkMimeType(file.type))) {
-      onError === null || onError === void 0 ? void 0 : onError('Eine Datei ist im falschen Format');
-      return;
-    }
-    if (newFiles.length + value.length > maxFiles && (!allowOverride || index === undefined || index + newFiles.length > maxFiles)) {
-      onError === null || onError === void 0 ? void 0 : onError(`Es sind nur ${maxFiles} Dateien erlaubt.`);
-      return;
-    }
-    if (maxSizePerFile && newFiles.some(file => file.size > maxSizePerFile)) {
-      onError === null || onError === void 0 ? void 0 : onError(`Eine Datei ist zu groß. Jede Datei darf nur ${maxSizePerFile / 1024 / 1024}MB groß sein.`);
-      return;
-    }
-    const newUrls = yield getBase64(newFiles);
-    const newValue = newFiles.map((file, fileIndex) => ({
-      name: file.name,
-      data: newUrls[fileIndex],
-      mimeType: file.type,
-      blob: file
-    }));
-    if (newFiles.length + value.length > maxFiles && index !== undefined) {
-      const onChangeFilesValue = [...value];
-      onChangeFilesValue.splice(index, newFiles.length, ...newValue);
-      onChangeFiles(onChangeFilesValue);
-    } else {
-      onChangeFiles([...value, ...newValue]);
-    }
-  }), [allowOverride, checkMimeType, getBase64, maxFiles, maxSizePerFile, onChangeFiles, onError, value]);
-  const onInputChange = (0,external_react_.useCallback)(e => __awaiter(this, void 0, void 0, function* () {
-    const index = indexRef.current;
-    indexRef.current = undefined;
-    if (!e.target.files || e.target.files.length === 0) {
-      return;
-    }
-    const newFiles = Array.from(e.target.files);
-    yield onNewFiles(newFiles, index);
-  }), [onNewFiles]);
-  const removeFile = (0,external_react_.useCallback)((_, index) => {
-    if (index >= 0 && index < value.length) {
-      const newData = [...value];
-      newData.splice(index, 1);
-      onChangeFiles(newData);
-    }
-  }, [onChangeFiles, value]);
-  const onDrop = (0,external_react_.useCallback)((event, index) => __awaiter(this, void 0, void 0, function* () {
-    event.preventDefault();
-    const files = [];
-    if (event.dataTransfer.items) {
-      for (let i = 0; i < event.dataTransfer.items.length; i++) {
-        if (event.dataTransfer.items[i].kind === 'file') {
-          const file = event.dataTransfer.items[i].getAsFile();
-          if (file) {
-            files.push(file);
-          }
-        }
-      }
-    } else {
-      for (let i = 0; i < event.dataTransfer.files.length; i++) {
-        files.push(event.dataTransfer.files[i]);
-      }
-    }
-    yield onNewFiles(files, index);
-  }), [onNewFiles]);
-  const onDragOver = (0,external_react_.useCallback)(e => e.preventDefault(), []);
-  const clickOnFile = (0,external_react_.useCallback)((_, index) => {
-    if (index !== undefined && !allowOverride || !inputRef.current) {
-      return;
-    }
-    indexRef.current = index;
-    inputRef.current.dispatchEvent(new MouseEvent("click"));
-  }, [allowOverride]);
-  // Effects
-  // Other
-  // Render Functions
-  const renderFile = file => {
-    if (file.mimeType.startsWith('image/')) {
-      return /*#__PURE__*/external_react_.createElement(ImageMemo, {
-        key: file.data,
-        src: file.data,
-        alt: file.name,
-        className: classnames_default()((fileInput_default()).previewImage, file.data)
-      });
-    }
-    // TODO style
-    return /*#__PURE__*/external_react_.createElement(BlockMemo, {
-      className: (fileInput_default()).previewText
-    }, /*#__PURE__*/external_react_.createElement(Icon, {
-      icon: free_solid_svg_icons_namespaceObject.faFile,
-      className: (fileInput_default()).previewTextIcon
-    }), /*#__PURE__*/external_react_.createElement(tmp, null, file.name));
-  };
-  return /*#__PURE__*/external_react_.createElement("span", {
-    className: classnames_default()((fileInput_default()).fileInput, className),
-    style: style
-  }, /*#__PURE__*/external_react_.createElement(Flex_tmp, {
-    horizontal: true
-  }, !!label && /*#__PURE__*/external_react_.createElement(Grow, null, /*#__PURE__*/external_react_.createElement(tmp, null, label)), maxFiles > 1 && /*#__PURE__*/external_react_.createElement(InlineMemo, null, /*#__PURE__*/external_react_.createElement(tmp, null, value.length, "/", maxFiles))), /*#__PURE__*/external_react_.createElement(Flex_tmp, {
-    horizontal: true,
-    className: (fileInput_default()).previewContainer
-  }, value === null || value === void 0 ? void 0 : value.map((file, index) => {
-    return /*#__PURE__*/external_react_.createElement(Grow, {
-      className: (fileInput_default()).preview,
-      center: true,
-      key: file.data
-    }, /*#__PURE__*/external_react_.createElement(ClickableMemo, {
-      onDrop: onDrop,
-      onDragOver: onDragOver,
-      onDropData: index,
-      onClick: clickOnFile,
-      onClickData: index
-    }, renderFile(file), showDeleteButton && /*#__PURE__*/external_react_.createElement(ClickableMemo, {
-      className: (fileInput_default()).previewRemove,
-      onClick: removeFile,
-      onClickData: index
-    }, /*#__PURE__*/external_react_.createElement(Icon, {
-      icon: free_solid_svg_icons_namespaceObject.faTimesCircle
-    }))));
-  }), /*#__PURE__*/external_react_.createElement(Grow, {
-    className: classnames_default()((fileInput_default()).addFile, {
-      [(fileInput_default()).hidden]: value.length >= maxFiles
-    }),
-    center: true
-  }, /*#__PURE__*/external_react_.createElement(ClickableMemo, {
-    className: (fileInput_default()).addFileButton,
-    onDrop: onDrop,
-    onDragOver: onDragOver,
-    onDropData: maxFiles,
-    onClick: clickOnFile,
-    __allowChildren: "html"
-  }, /*#__PURE__*/external_react_.createElement(Icon, {
-    icon: free_solid_svg_icons_namespaceObject.faPlus
-  }), /*#__PURE__*/external_react_.createElement("input", MultipleFileInput_extends({}, props, {
-    ref: inputRef,
-    className: (fileInput_default()).value,
-    onChange: onInputChange,
-    value: "",
-    type: "file",
-    multiple: maxFiles > 1,
-    accept: mimeTypes.join(', ')
-  }))))));
-}, (fileInput_default()));
-;// CONCATENATED MODULE: ./src/Components/FormElements/Input/FileInput/FileInput.tsx
-function FileInput_extends() { return FileInput_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, FileInput_extends.apply(null, arguments); }
-var FileInput_rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-
-
-
-
-
-// TODO use MultipleFileInput internal
-const FileInput = withMemo(function FileInput(_a) {
-  // Variables
-  var {
-      value,
-      mimeType,
-      required = false
-    } = _a,
-    otherProps = FileInput_rest(_a, ["value", "mimeType", "required"]);
-  // Refs
-  // States
-  const mimeTypes = (0,external_react_.useMemo)(() => mimeType ? [mimeType] : undefined, [mimeType]);
-  const innerValue = (0,external_react_.useMemo)(() => value ? [value] : [], [value]);
-  // Selectors
-  // Callbacks
-  const [onChangeFile, multipleFileInputProps] = useListenerWithExtractedProps("onChangeFile", otherProps);
-  const onChangeFiles = (0,external_react_.useCallback)(files => {
-    if (!required || files[0]) {
-      onChangeFile(files[0]);
-    }
-  }, [onChangeFile, required]);
-  // Effects
-  // Other
-  //  Render Functions
-  return /*#__PURE__*/external_react_.createElement(MultipleFileInput, FileInput_extends({
-    maxFiles: 1,
-    value: innerValue,
-    onChangeFiles: onChangeFiles,
-    mimeTypes: mimeTypes,
-    showDeleteButton: !required
-  }, multipleFileInputProps));
-}, (fileInput_default()));
-// EXTERNAL MODULE: ./src/Components/FormElements/Input/input.scss
-var input = __webpack_require__(2923);
-var input_default = /*#__PURE__*/__webpack_require__.n(input);
-;// CONCATENATED MODULE: ./src/Components/FormElements/hooks/useOnChangeDone.ts
-
-function useOnChangeDone(onChangeDone, ref) {
-  const innerRef = (0,external_react_.useRef)(null);
-  const usedRef = ref !== null && ref !== void 0 ? ref : innerRef;
-  (0,external_react_.useEffect)(() => {
-    const elem = usedRef.current;
-    elem === null || elem === void 0 ? void 0 : elem.addEventListener('change', onChangeDone);
-    return () => {
-      elem === null || elem === void 0 ? void 0 : elem.removeEventListener('change', onChangeDone);
-    };
-  }, [ref, onChangeDone, usedRef]);
-  return usedRef;
-}
-;// CONCATENATED MODULE: ./src/Components/FormElements/Input/Input.tsx
-function Input_extends() { return Input_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, Input_extends.apply(null, arguments); }
-var Input_rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-
-
-
-
-
-
-
-const Input = withForwardRef(function Input(_a, ref) {
-  // Variables
-  var {
-      label,
-      className,
-      style,
-      onKeyDown,
-      inline = false,
-      value,
-      onChangeText
-    } = _a,
-    otherProps = Input_rest(_a, ["label", "className", "style", "onKeyDown", "inline", "value", "onChangeText"]);
-  // States
-  const usedValue = (0,external_react_.useMemo)(() => {
-    if (otherProps.type !== "number" || typeof value === "number") {
-      return value;
-    }
-    if (typeof value === "string") {
-      if (value === "-") {
-        return value;
-      }
-      const numberValue = parseFloat(value);
-      if (!Number.isNaN(numberValue) && Number.isFinite(numberValue)) {
-        if (otherProps.max !== undefined && numberValue > Number(otherProps.max)) {
-          return otherProps.max;
-        }
-        if (otherProps.min !== undefined && numberValue < Number(otherProps.min)) {
-          return otherProps.min;
-        }
+      const numberValue = parseFloat(value);
+      if (!Number.isNaN(numberValue) && Number.isFinite(numberValue)) {
+        if (otherProps.max !== undefined && numberValue > Number(otherProps.max)) {
+          return otherProps.max;
+        }
+        if (otherProps.min !== undefined && numberValue < Number(otherProps.min)) {
+          return otherProps.min;
+        }
       }
       if (!Number.isNaN(Number(value))) {
         // Do not parse to allow ., and so on
@@ -23517,8 +23328,11 @@ const Input = withForwardRef(function Input(_a, ref) {
     return "";
   }, [value, otherProps.max, otherProps.min, otherProps.type]);
   // Refs
-  const innerRef = useComposedRef(ref);
+  const innerRef = (0,external_react_.useRef)(null);
+  const refFunction = useComposedRef(ref, innerRef);
   // Callbacks
+  const sendForm = useSendFormContext();
+  onEnter !== null && onEnter !== void 0 ? onEnter : onEnter = sendForm;
   const [onChangeWithData, otherPropsWithoutOnchange] = useListenerWithExtractedProps('onChange', otherProps);
   const onChange = (0,external_react_.useCallback)(e => {
     if (onChangeText) {
@@ -23539,13 +23353,13 @@ const Input = withForwardRef(function Input(_a, ref) {
   const [onChangeDone, otherPropsWithoutData] = useListenerWithExtractedProps('onChangeDone', otherPropsWithoutBlur);
   const realOnKeyDown = (0,external_react_.useCallback)(e => {
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-    if (otherProps.onEnter && e.key === 'Enter' && !e.defaultPrevented) {
+    if (onEnter && e.key === 'Enter' && !e.defaultPrevented) {
       if (otherProps.type === "number") {
         const stringValue = e.target.value;
         const val = !Number.isNaN(Number(stringValue)) ? stringValue : !Number.isNaN(parseFloat(stringValue)) ? String(parseFloat(stringValue)) : "";
-        otherProps.onEnter(val);
+        onEnter(val);
       } else {
-        otherProps.onEnter(e.target.value);
+        onEnter(e.target.value);
       }
     }
     if (otherProps.type === "number") {
@@ -23594,16 +23408,18 @@ const Input = withForwardRef(function Input(_a, ref) {
   }, otherPropsWithoutData, {
     value: usedValue,
     type: otherProps.type === "number" ? "text" : otherProps.type,
-    ref: innerRef,
+    ref: refFunction,
     className: (input_default()).text,
     onBlur: onBlur,
     onChange: onChange,
     onKeyDown: realOnKeyDown
-  })));
+  })), error && /*#__PURE__*/external_react_.createElement(InlineBlockMemo, {
+    className: (input_default()).error
+  }, /*#__PURE__*/external_react_.createElement(tmp, null, error)));
 }, (input_default()));
-;// CONCATENATED MODULE: ./src/Components/FormElements/Input/HiddenInput.tsx
-function HiddenInput_extends() { return HiddenInput_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, HiddenInput_extends.apply(null, arguments); }
-var HiddenInput_rest = undefined && undefined.__rest || function (s, e) {
+;// CONCATENATED MODULE: ./src/Components/FormElements/Controller/withHookController.tsx
+function withHookController_extends() { return withHookController_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, withHookController_extends.apply(null, arguments); }
+var withHookController_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -23615,28 +23431,373 @@ var HiddenInput_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-
-function HiddenInput(_a) {
-  // Variables
-  var {
-      noFocusHint = false,
-      className
-    } = _a,
-    props = HiddenInput_rest(_a, ["noFocusHint", "className"]);
+function withHookController(Comp, onChangeProp, emptyValue = null) {
+  function WithHookComponent(_a, ref) {
+    var _b, _c;
+    var {
+        name
+      } = _a,
+      otherProps = withHookController_rest(_a, ["name"]);
+    const children = "children" in otherProps ? otherProps.children : undefined;
+    const {
+      field,
+      fieldState
+    } = (0,external_react_hook_form_namespaceObject.useController)({
+      name
+    });
+    const {
+      clearErrors
+    } = (0,external_react_hook_form_namespaceObject.useFormContext)();
+    const composedRef = useComposedRef(ref, field.ref);
+    const errorMessage = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    const internalOnChange = (0,external_react_.useCallback)(arg => {
+      clearErrors(name);
+      field.onChange(arg);
+    }, [clearErrors, field, name]);
+    const onChangeProps = {
+      [onChangeProp]: internalOnChange
+    };
+    return (
+      /*#__PURE__*/
+      // @ts-expect-error Because of the prop spreading, typescript is really confused here
+      external_react_default().createElement(Comp, withHookController_extends({}, otherProps, field, onChangeProps, {
+        value: (_c = field.value) !== null && _c !== void 0 ? _c : emptyValue,
+        ref: composedRef,
+        error: errorMessage
+      }), children)
+    );
+  }
+  return withForwardRef(WithHookComponent);
+}
+;// CONCATENATED MODULE: ./src/Components/FormElements/Controller/InputController.ts
+
+
+const InputController = withHookController(Input, "onChangeText");
+// EXTERNAL MODULE: ./src/Components/FormElements/Input/FileInput/fileInput.scss
+var fileInput = __webpack_require__(4372);
+var fileInput_default = /*#__PURE__*/__webpack_require__.n(fileInput);
+;// CONCATENATED MODULE: ./src/Components/Layout/Grow.tsx
+
+
+
+
+const Grow = withForwardRef(function Grow({
+  className,
+  children,
+  center = false,
+  style,
+  weight = 1
+}, ref) {
+  // Variables
   // States
   // Refs
   // Callbacks
   // Effects
   // Other
   // Render Functions
-  return /*#__PURE__*/external_react_.createElement(Input, HiddenInput_extends({
-    className: classnames_default()((input_default()).hiddenInput, {
-      [(input_default()).noFocusHint]: noFocusHint
-    }, className)
-  }, props));
+  return /*#__PURE__*/external_react_.createElement("div", {
+    ref: ref,
+    className: classnames_default()((layout_default()).grow, {
+      [(layout_default()).center]: center,
+      [(layout_default()).weight0]: weight === 0,
+      [(layout_default()).weight1]: weight === 1,
+      [(layout_default()).weight2]: weight === 2,
+      [(layout_default()).weight3]: weight === 3,
+      [(layout_default()).weight4]: weight === 4,
+      [(layout_default()).weight5]: weight === 5,
+      [(layout_default()).weight6]: weight === 6
+    }, className),
+    style: style
+  }, children);
+}, (layout_default()));
+// EXTERNAL MODULE: ./src/Components/Image/image.scss
+var Image_image = __webpack_require__(6435);
+var image_default = /*#__PURE__*/__webpack_require__.n(Image_image);
+;// CONCATENATED MODULE: ./src/Components/Image/Image.tsx
+function Image_extends() { return Image_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, Image_extends.apply(null, arguments); }
+var Image_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+function Image(_a) {
+  // Variables
+  var {
+      src,
+      alt = '',
+      className,
+      style
+    } = _a,
+    otherProps = Image_rest(_a, ["src", "alt", "className", "style"]);
+  // Refs
+  // States
+  // Selectors
+  // Callbacks
+  // Effects
+  // Other
+  // Render Functions
+  return /*#__PURE__*/external_react_.createElement("img", Image_extends({
+    src: src,
+    alt: alt,
+    className: classnames_default()((image_default()).image, className),
+    style: style
+  }, otherProps));
 }
-const HiddenInput_tmp = withMemo(HiddenInput);
+// Need ImageMemo for autocompletion of phpstorm
+const ImageMemo = withMemo(Image, (image_default()));
+
+;// CONCATENATED MODULE: ./src/Components/FormElements/Input/FileInput/MultipleFileInput.tsx
+function MultipleFileInput_extends() { return MultipleFileInput_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, MultipleFileInput_extends.apply(null, arguments); }
+var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+var MultipleFileInput_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const MultipleFileInput = withMemo(function MultipleImageInput(_a) {
+  // Variables
+  var {
+      className,
+      style,
+      value,
+      label,
+      mimeTypes = ['image/*'],
+      maxFiles = 1,
+      maxSizePerFile = 1024 * 1024 * 10,
+      allowOverride = maxFiles === 1,
+      onError,
+      showDeleteButton = true,
+      error
+    } = _a,
+    otherProps = MultipleFileInput_rest(_a, ["className", "style", "value", "label", "mimeTypes", "maxFiles", "maxSizePerFile", "allowOverride", "onError", "showDeleteButton", "error"]);
+  // Refs
+  const inputRef = (0,external_react_.useRef)(null);
+  const indexRef = (0,external_react_.useRef)(undefined);
+  // States
+  // Selectors
+  // Callbacks
+  const checkMimeType = (0,external_react_.useCallback)(fileType => {
+    return mimeTypes.some(type => {
+      if (type === '*/*' || type === '*') {
+        return true;
+      }
+      if (type.endsWith('/*')) {
+        return fileType.startsWith(type.substring(0, type.length - 2));
+      }
+      return fileType === type;
+    });
+  }, [mimeTypes]);
+  const [onChangeFiles, ...props] = useListenerWithExtractedProps('onChangeFiles', otherProps);
+  const getBase64 = (0,external_react_.useCallback)(inputFiles => {
+    const promises = inputFiles.map(file => new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        resolve(reader.result);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    }));
+    return Promise.all(promises);
+  }, []);
+  const onNewFiles = (0,external_react_.useCallback)((newFiles, index) => __awaiter(this, void 0, void 0, function* () {
+    if (newFiles.some(file => !checkMimeType(file.type))) {
+      onError === null || onError === void 0 ? void 0 : onError('Eine Datei ist im falschen Format');
+      return;
+    }
+    if (newFiles.length + value.length > maxFiles && (!allowOverride || index === undefined || index + newFiles.length > maxFiles)) {
+      onError === null || onError === void 0 ? void 0 : onError(`Es sind nur ${maxFiles} Dateien erlaubt.`);
+      return;
+    }
+    if (maxSizePerFile && newFiles.some(file => file.size > maxSizePerFile)) {
+      onError === null || onError === void 0 ? void 0 : onError(`Eine Datei ist zu groß. Jede Datei darf nur ${maxSizePerFile / 1024 / 1024}MB groß sein.`);
+      return;
+    }
+    const newUrls = yield getBase64(newFiles);
+    const newValue = newFiles.map((file, fileIndex) => ({
+      name: file.name,
+      data: newUrls[fileIndex],
+      mimeType: file.type,
+      blob: file
+    }));
+    if (newFiles.length + value.length > maxFiles && index !== undefined) {
+      const onChangeFilesValue = [...value];
+      onChangeFilesValue.splice(index, newFiles.length, ...newValue);
+      onChangeFiles(onChangeFilesValue);
+    } else {
+      onChangeFiles([...value, ...newValue]);
+    }
+  }), [allowOverride, checkMimeType, getBase64, maxFiles, maxSizePerFile, onChangeFiles, onError, value]);
+  const onInputChange = (0,external_react_.useCallback)(e => __awaiter(this, void 0, void 0, function* () {
+    const index = indexRef.current;
+    indexRef.current = undefined;
+    if (!e.target.files || e.target.files.length === 0) {
+      return;
+    }
+    const newFiles = Array.from(e.target.files);
+    yield onNewFiles(newFiles, index);
+  }), [onNewFiles]);
+  const removeFile = (0,external_react_.useCallback)((_, index) => {
+    if (index >= 0 && index < value.length) {
+      const newData = [...value];
+      newData.splice(index, 1);
+      onChangeFiles(newData);
+    }
+  }, [onChangeFiles, value]);
+  const onDrop = (0,external_react_.useCallback)((event, index) => __awaiter(this, void 0, void 0, function* () {
+    event.preventDefault();
+    const files = [];
+    if (event.dataTransfer.items) {
+      for (let i = 0; i < event.dataTransfer.items.length; i++) {
+        if (event.dataTransfer.items[i].kind === 'file') {
+          const file = event.dataTransfer.items[i].getAsFile();
+          if (file) {
+            files.push(file);
+          }
+        }
+      }
+    } else {
+      for (let i = 0; i < event.dataTransfer.files.length; i++) {
+        files.push(event.dataTransfer.files[i]);
+      }
+    }
+    yield onNewFiles(files, index);
+  }), [onNewFiles]);
+  const onDragOver = (0,external_react_.useCallback)(e => e.preventDefault(), []);
+  const clickOnFile = (0,external_react_.useCallback)((_, index) => {
+    if (index !== undefined && !allowOverride || !inputRef.current) {
+      return;
+    }
+    indexRef.current = index;
+    inputRef.current.dispatchEvent(new MouseEvent("click"));
+  }, [allowOverride]);
+  // Effects
+  // Other
+  // Render Functions
+  const renderFile = file => {
+    if (file.mimeType.startsWith('image/')) {
+      return /*#__PURE__*/external_react_.createElement(ImageMemo, {
+        key: file.data,
+        src: file.data,
+        alt: file.name,
+        className: classnames_default()((fileInput_default()).previewImage, file.data)
+      });
+    }
+    // TODO style
+    return /*#__PURE__*/external_react_.createElement(BlockMemo, {
+      className: (fileInput_default()).previewText
+    }, /*#__PURE__*/external_react_.createElement(Icon, {
+      icon: free_solid_svg_icons_namespaceObject.faFile,
+      className: (fileInput_default()).previewTextIcon
+    }), /*#__PURE__*/external_react_.createElement(tmp, null, file.name));
+  };
+  return /*#__PURE__*/external_react_.createElement("span", {
+    className: classnames_default()((fileInput_default()).fileInput, className),
+    style: style
+  }, /*#__PURE__*/external_react_.createElement(Flex_tmp, {
+    horizontal: true
+  }, !!label && /*#__PURE__*/external_react_.createElement(Grow, null, /*#__PURE__*/external_react_.createElement(tmp, null, label)), maxFiles > 1 && /*#__PURE__*/external_react_.createElement(InlineMemo, null, /*#__PURE__*/external_react_.createElement(tmp, null, value.length, "/", maxFiles))), /*#__PURE__*/external_react_.createElement(Flex_tmp, {
+    horizontal: true,
+    className: (fileInput_default()).previewContainer
+  }, value === null || value === void 0 ? void 0 : value.map((file, index) => {
+    return /*#__PURE__*/external_react_.createElement(Grow, {
+      className: (fileInput_default()).preview,
+      center: true,
+      key: file.data
+    }, /*#__PURE__*/external_react_.createElement(ClickableMemo, {
+      onDrop: onDrop,
+      onDragOver: onDragOver,
+      onDropData: index,
+      onClick: clickOnFile,
+      onClickData: index
+    }, renderFile(file), showDeleteButton && /*#__PURE__*/external_react_.createElement(ClickableMemo, {
+      className: (fileInput_default()).previewRemove,
+      onClick: removeFile,
+      onClickData: index
+    }, /*#__PURE__*/external_react_.createElement(Icon, {
+      icon: free_solid_svg_icons_namespaceObject.faTimesCircle
+    }))));
+  }), /*#__PURE__*/external_react_.createElement(Grow, {
+    className: classnames_default()((fileInput_default()).addFile, {
+      [(fileInput_default()).hidden]: value.length >= maxFiles
+    }),
+    center: true
+  }, /*#__PURE__*/external_react_.createElement(ClickableMemo, {
+    className: (fileInput_default()).addFileButton,
+    onDrop: onDrop,
+    onDragOver: onDragOver,
+    onDropData: maxFiles,
+    onClick: clickOnFile,
+    __allowChildren: "html"
+  }, /*#__PURE__*/external_react_.createElement(Icon, {
+    icon: free_solid_svg_icons_namespaceObject.faPlus
+  }), /*#__PURE__*/external_react_.createElement("input", MultipleFileInput_extends({}, props, {
+    ref: inputRef,
+    className: (fileInput_default()).value,
+    onChange: onInputChange,
+    value: "",
+    type: "file",
+    multiple: maxFiles > 1,
+    accept: mimeTypes.join(', ')
+  }))))), error && /*#__PURE__*/external_react_.createElement(InlineBlockMemo, {
+    className: (fileInput_default()).error
+  }, /*#__PURE__*/external_react_.createElement(tmp, null, error)));
+}, (fileInput_default()));
+;// CONCATENATED MODULE: ./src/Components/FormElements/Controller/MultipleFileInputController.ts
+
 
+const MultipleFileInputController = withHookController(MultipleFileInput, 'onChangeFiles');
 // EXTERNAL MODULE: ./src/Components/FormElements/Input/PasswordInput/passwordInput.scss
 var passwordInput = __webpack_require__(1436);
 var passwordInput_default = /*#__PURE__*/__webpack_require__.n(passwordInput);
@@ -23685,11 +23846,261 @@ const PasswordInput = withForwardRef(function PasswordInput(_a, ref) {
     ref: ref
   }))), /*#__PURE__*/external_react_default().createElement(ClickableMemo, {
     onClick: toggleVisible,
-    className: (passwordInput_default()).showButton
+    className: (passwordInput_default()).showButton,
+    interactable: false
   }, /*#__PURE__*/external_react_default().createElement(Icon, {
     icon: isVisible ? free_solid_svg_icons_namespaceObject.faEye : free_solid_svg_icons_namespaceObject.faEyeSlash
   })));
 }, (passwordInput_default()));
+;// CONCATENATED MODULE: ./src/Components/FormElements/Controller/PasswordInputController.ts
+
+
+const PasswordInputController = withHookController(PasswordInput, "onChangeText");
+// EXTERNAL MODULE: ./src/Components/FormElements/Select/select.scss
+var Select_select = __webpack_require__(8581);
+var select_default = /*#__PURE__*/__webpack_require__.n(Select_select);
+;// CONCATENATED MODULE: ./src/Components/FormElements/Select/Select.tsx
+function Select_extends() { return Select_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, Select_extends.apply(null, arguments); }
+var Select_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+
+
+
+const Select = withMemo(function Select(_a) {
+  // Variables
+  var {
+      label,
+      options,
+      className,
+      style,
+      onChangeValue,
+      inline = false,
+      small = false,
+      error
+    } = _a,
+    otherProps = Select_rest(_a, ["label", "options", "className", "style", "onChangeValue", "inline", "small", "error"]);
+  // Refs
+  // States
+  // Selectors
+  // Callbacks
+  const [onChangeWithData, propsWithoutData] = useListenerWithExtractedProps('onChange', otherProps);
+  const onChange = (0,external_react_.useCallback)(e => {
+    onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(e.target.value);
+    onChangeWithData(e);
+  }, [onChangeWithData, onChangeValue]);
+  // Effects
+  // Other
+  // Render Functions
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    external_react_.createElement("label", {
+      className: classnames_default()((select_default()).select, {
+        [(select_default()).inline]: inline,
+        [(select_default()).small]: small
+      }, className),
+      style: style
+    }, label ? /*#__PURE__*/external_react_.createElement("span", {
+      className: (select_default()).label
+    }, label) : null, /*#__PURE__*/external_react_.createElement("select", Select_extends({}, propsWithoutData, {
+      className: (select_default()).input,
+      onChange: onChange
+    }), options.map(option => {
+      var _a;
+      return /*#__PURE__*/external_react_.createElement("option", {
+        value: option.value,
+        key: (_a = option.key) !== null && _a !== void 0 ? _a : option.value
+      }, option.label);
+    })), error && /*#__PURE__*/external_react_.createElement(InlineBlockMemo, {
+      className: (select_default()).error
+    }, /*#__PURE__*/external_react_.createElement(tmp, null, error)))
+  );
+}, (select_default()));
+;// CONCATENATED MODULE: ./src/Components/FormElements/Controller/SelectController.ts
+
+
+const SelectController = withHookController(Select, "onChangeValue");
+// EXTERNAL MODULE: ./src/Components/FormElements/Textarea/textarea.scss
+var Textarea_textarea = __webpack_require__(817);
+var textarea_default = /*#__PURE__*/__webpack_require__.n(Textarea_textarea);
+;// CONCATENATED MODULE: ./src/Components/FormElements/Textarea/Textarea.tsx
+function Textarea_extends() { return Textarea_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, Textarea_extends.apply(null, arguments); }
+var Textarea_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+
+
+
+
+
+const Textarea = withForwardRef(function Textarea(_a, ref) {
+  var {
+      label,
+      className,
+      style,
+      onKeyUp,
+      onChangeText,
+      onEnter,
+      onEscape,
+      textareaStyles,
+      containerRef,
+      error
+    } = _a,
+    otherProps = Textarea_rest(_a, ["label", "className", "style", "onKeyUp", "onChangeText", "onEnter", "onEscape", "textareaStyles", "containerRef", "error"]);
+  // Refs
+  const innerRef = (0,external_react_.useRef)(null);
+  const refSetter = useComposedRef(ref, innerRef);
+  // Variables
+  // States
+  // Callbacks
+  const [onChangeWithData, otherPropsWithoutOnchange] = useListenerWithExtractedProps('onChange', otherProps);
+  const [onChangeDone, otherPropsWithoutData] = useListenerWithExtractedProps('onChangeDone', otherPropsWithoutOnchange);
+  const onChange = (0,external_react_.useCallback)(e => {
+    if (onChangeText) {
+      onChangeText(e.target.value);
+    }
+    onChangeWithData(e);
+  }, [onChangeWithData, onChangeText]);
+  const realOnKeyPress = (0,external_react_.useCallback)(e => {
+    if (onKeyUp) {
+      onKeyUp(e);
+    }
+    if (onEnter && e.key === 'Enter' && !e.defaultPrevented) {
+      onEnter(e.target.value);
+    }
+    if (onEscape && e.key === 'Escape' && !e.defaultPrevented) {
+      onEscape(e.target.value);
+    }
+  }, [onEnter, onEscape, onKeyUp]);
+  // Effects
+  useOnChangeDone(onChangeDone, innerRef);
+  // Other
+  // Render Functions
+  return /*#__PURE__*/external_react_.createElement("label", {
+    className: classnames_default()((textarea_default()).container, className),
+    style: style,
+    ref: containerRef
+  }, label ? /*#__PURE__*/external_react_.createElement("span", {
+    className: (textarea_default()).label
+  }, label) : null, /*#__PURE__*/external_react_.createElement("textarea", Textarea_extends({}, otherPropsWithoutData, {
+    style: textareaStyles,
+    onKeyUp: realOnKeyPress,
+    className: (textarea_default()).textarea,
+    onChange: onChange,
+    ref: refSetter
+  })), error && /*#__PURE__*/external_react_.createElement(InlineBlockMemo, {
+    className: (textarea_default()).error
+  }, /*#__PURE__*/external_react_.createElement(tmp, null, error)));
+}, (textarea_default()));
+;// CONCATENATED MODULE: ./src/Components/FormElements/Controller/TextareaController.ts
+
+
+const TextareaController = withHookController(Textarea, 'onChangeText');
+;// CONCATENATED MODULE: ./src/Components/FormElements/Input/FileInput/FileInput.tsx
+function FileInput_extends() { return FileInput_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, FileInput_extends.apply(null, arguments); }
+var FileInput_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+
+// TODO use MultipleFileInput internal
+const FileInput = withMemo(function FileInput(_a) {
+  // Variables
+  var {
+      value,
+      mimeType,
+      required = false
+    } = _a,
+    otherProps = FileInput_rest(_a, ["value", "mimeType", "required"]);
+  // Refs
+  // States
+  const mimeTypes = (0,external_react_.useMemo)(() => mimeType ? [mimeType] : undefined, [mimeType]);
+  const innerValue = (0,external_react_.useMemo)(() => value ? [value] : [], [value]);
+  // Selectors
+  // Callbacks
+  const [onChangeFile, multipleFileInputProps] = useListenerWithExtractedProps("onChangeFile", otherProps);
+  const onChangeFiles = (0,external_react_.useCallback)(files => {
+    if (!required || files[0]) {
+      onChangeFile(files[0]);
+    }
+  }, [onChangeFile, required]);
+  // Effects
+  // Other
+  //  Render Functions
+  return /*#__PURE__*/external_react_.createElement(MultipleFileInput, FileInput_extends({
+    maxFiles: 1,
+    value: innerValue,
+    onChangeFiles: onChangeFiles,
+    mimeTypes: mimeTypes,
+    showDeleteButton: !required
+  }, multipleFileInputProps));
+}, (fileInput_default()));
+;// CONCATENATED MODULE: ./src/Components/FormElements/Input/HiddenInput.tsx
+function HiddenInput_extends() { return HiddenInput_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, HiddenInput_extends.apply(null, arguments); }
+var HiddenInput_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+function HiddenInput(_a) {
+  // Variables
+  var {
+      noFocusHint = false,
+      className
+    } = _a,
+    props = HiddenInput_rest(_a, ["noFocusHint", "className"]);
+  // States
+  // Refs
+  // Callbacks
+  // Effects
+  // Other
+  // Render Functions
+  return /*#__PURE__*/external_react_.createElement(Input, HiddenInput_extends({
+    className: classnames_default()((input_default()).hiddenInput, {
+      [(input_default()).noFocusHint]: noFocusHint
+    }, className)
+  }, props));
+}
+const HiddenInput_tmp = withMemo(HiddenInput);
+
 // EXTERNAL MODULE: ./src/Components/FormElements/SearchSelectInput/seachSelectInput.scss
 var seachSelectInput = __webpack_require__(6245);
 var seachSelectInput_default = /*#__PURE__*/__webpack_require__.n(seachSelectInput);
@@ -23840,72 +24251,6 @@ const SearchSelectInput = withMemo(function SearchSelectInput({
     }, selectableOptions.map(renderSelectableOption)))
   );
 }, (seachSelectInput_default()));
-// EXTERNAL MODULE: ./src/Components/FormElements/Select/select.scss
-var Select_select = __webpack_require__(8581);
-var select_default = /*#__PURE__*/__webpack_require__.n(Select_select);
-;// CONCATENATED MODULE: ./src/Components/FormElements/Select/Select.tsx
-function Select_extends() { return Select_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, Select_extends.apply(null, arguments); }
-var Select_rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-
-
-
-
-
-const Select = withMemo(function Select(_a) {
-  // Variables
-  var {
-      label,
-      options,
-      className,
-      style,
-      onChangeValue,
-      inline = false,
-      small = false
-    } = _a,
-    otherProps = Select_rest(_a, ["label", "options", "className", "style", "onChangeValue", "inline", "small"]);
-  // Refs
-  // States
-  // Selectors
-  // Callbacks
-  const [onChangeWithData, propsWithoutData] = useListenerWithExtractedProps('onChange', otherProps);
-  const onChange = (0,external_react_.useCallback)(e => {
-    onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(e.target.value);
-    onChangeWithData(e);
-  }, [onChangeWithData, onChangeValue]);
-  // Effects
-  // Other
-  // Render Functions
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    external_react_.createElement("label", {
-      className: classnames_default()((select_default()).select, {
-        [(select_default()).inline]: inline,
-        [(select_default()).small]: small
-      }, className),
-      style: style
-    }, label ? /*#__PURE__*/external_react_.createElement("span", {
-      className: (select_default()).label
-    }, label) : null, /*#__PURE__*/external_react_.createElement("select", Select_extends({}, propsWithoutData, {
-      className: (select_default()).input,
-      onChange: onChange
-    }), options.map(option => {
-      var _a;
-      return /*#__PURE__*/external_react_.createElement("option", {
-        value: option.value,
-        key: (_a = option.key) !== null && _a !== void 0 ? _a : option.value
-      }, option.label);
-    })))
-  );
-}, (select_default()));
 // EXTERNAL MODULE: ./src/Components/FormElements/Slider/slider.scss
 var slider = __webpack_require__(5471);
 var slider_default = /*#__PURE__*/__webpack_require__.n(slider);
@@ -24038,82 +24383,6 @@ const Switch = withMemo(function Switch(_a) {
     className: (switch_default()).label
   }, label)));
 }, (switch_default()));
-// EXTERNAL MODULE: ./src/Components/FormElements/Textarea/textarea.scss
-var Textarea_textarea = __webpack_require__(817);
-var textarea_default = /*#__PURE__*/__webpack_require__.n(Textarea_textarea);
-;// CONCATENATED MODULE: ./src/Components/FormElements/Textarea/Textarea.tsx
-function Textarea_extends() { return Textarea_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, Textarea_extends.apply(null, arguments); }
-var Textarea_rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-
-
-
-
-
-
-
-const Textarea = withForwardRef(function Textarea(_a, ref) {
-  var {
-      label,
-      className,
-      style,
-      onKeyUp,
-      onChangeText,
-      onEnter,
-      onEscape,
-      textareaStyles,
-      containerRef
-    } = _a,
-    otherProps = Textarea_rest(_a, ["label", "className", "style", "onKeyUp", "onChangeText", "onEnter", "onEscape", "textareaStyles", "containerRef"]);
-  // Refs
-  const innerRef = useComposedRef(ref);
-  // Variables
-  // States
-  // Callbacks
-  const [onChangeWithData, otherPropsWithoutOnchange] = useListenerWithExtractedProps('onChange', otherProps);
-  const [onChangeDone, otherPropsWithoutData] = useListenerWithExtractedProps('onChangeDone', otherPropsWithoutOnchange);
-  const onChange = (0,external_react_.useCallback)(e => {
-    if (onChangeText) {
-      onChangeText(e.target.value);
-    }
-    onChangeWithData(e);
-  }, [onChangeWithData, onChangeText]);
-  const realOnKeyPress = (0,external_react_.useCallback)(e => {
-    if (onKeyUp) {
-      onKeyUp(e);
-    }
-    if (onEnter && e.key === 'Enter' && !e.defaultPrevented) {
-      onEnter(e.target.value);
-    }
-    if (onEscape && e.key === 'Escape' && !e.defaultPrevented) {
-      onEscape(e.target.value);
-    }
-  }, [onEnter, onEscape, onKeyUp]);
-  // Effects
-  useOnChangeDone(onChangeDone, innerRef);
-  // Other
-  // Render Functions
-  return /*#__PURE__*/external_react_.createElement("label", {
-    className: classnames_default()((textarea_default()).container, className),
-    style: style,
-    ref: containerRef
-  }, label ? /*#__PURE__*/external_react_.createElement("span", {
-    className: (textarea_default()).label
-  }, label) : null, /*#__PURE__*/external_react_.createElement("textarea", Textarea_extends({}, otherPropsWithoutData, {
-    style: textareaStyles,
-    onKeyUp: realOnKeyPress,
-    className: (textarea_default()).textarea,
-    onChange: onChange,
-    ref: innerRef
-  })));
-}, (textarea_default()));
 ;// CONCATENATED MODULE: ./src/Components/FullScreen/FullScreen.tsx
 var FullScreen_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
@@ -27275,87 +27544,6 @@ const List = withMemo(function List({
     }, renderItemInner));
   });
 }, (list_default()));
-// EXTERNAL MODULE: ./src/Components/LoadingCircle/loadingCircle.scss
-var loadingCircle = __webpack_require__(5391);
-var loadingCircle_default = /*#__PURE__*/__webpack_require__.n(loadingCircle);
-;// CONCATENATED MODULE: ./src/Components/LoadingCircle/LoadingCircle.tsx
-
-
-
-
-function LoadingCircle({
-  size = 32,
-  className,
-  style
-}) {
-  // Variables
-  // States
-  // Refs
-  // Callbacks
-  // Effects
-  // Other
-  // Render Functions
-  return /*#__PURE__*/external_react_.createElement("svg", {
-    className: classnames_default()((loadingCircle_default()).loadingCircle, className),
-    viewBox: `0 0 ${size} ${size}`,
-    width: size,
-    height: size,
-    style: style
-  }, /*#__PURE__*/external_react_.createElement("circle", {
-    cx: "50%",
-    cy: "50%",
-    r: "40%",
-    fill: "none",
-    className: (loadingCircle_default()).spinner
-  }));
-}
-const LoadingCircleMemo = withMemo(LoadingCircle, (loadingCircle_default()));
-
-// EXTERNAL MODULE: ./src/Components/LoadingArea/loadingArea.scss
-var loadingArea = __webpack_require__(5455);
-var loadingArea_default = /*#__PURE__*/__webpack_require__.n(loadingArea);
-;// CONCATENATED MODULE: ./src/Components/LoadingArea/LoadingArea.tsx
-
-
-
-
-
-function LoadingArea({
-  loading,
-  fullWidth = false,
-  fullSize = false,
-  fullHeight = false,
-  opacity = 0.65,
-  className,
-  style,
-  children
-}) {
-  // Variables
-  if (fullSize) {
-    fullHeight = true;
-    fullWidth = true;
-  }
-  // States
-  // Refs
-  // Callbacks
-  // Effects
-  // Other
-  // Render Functions
-  return /*#__PURE__*/external_react_.createElement("span", {
-    className: classnames_default()((loadingArea_default()).loadingArea, className, {
-      'full-height': fullHeight,
-      'full-width': fullWidth
-    }),
-    style: style
-  }, children, loading ? /*#__PURE__*/external_react_.createElement("span", {
-    className: (loadingArea_default()).curtain,
-    style: {
-      opacity
-    }
-  }, /*#__PURE__*/external_react_.createElement(LoadingCircleMemo, null)) : null);
-}
-const LoadingAreaMemo = withMemo(LoadingArea, (loadingArea_default()));
-
 ;// CONCATENATED MODULE: ./src/Components/Menu/HoverMenu.tsx
 
 
@@ -28069,7 +28257,21 @@ function Toast(_a) {
 }
 const ToastMemo = withMemo(Toast, (toast_default()), 'text');
 
+;// CONCATENATED MODULE: ./src/Components/Toast/ToastContext.ts
+
+const ToastContext = /*#__PURE__*/(0,external_react_.createContext)(() => {
+  console.error("ToastContext not initialized");
+});
+function useToast() {
+  return (0,external_react_.useContext)(ToastContext);
+}
 ;// CONCATENATED MODULE: ./src/Components/Toast/ToastContainer.tsx
+function ToastContainer_extends() { return ToastContainer_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, ToastContainer_extends.apply(null, arguments); }
+
+
+
+
+
 
 
 
@@ -28082,17 +28284,49 @@ function ToastContainer({
 }) {
   // Variables
   // States
+  const lastId = (0,external_react_.useRef)(0);
+  const [toasts, setToasts] = (0,external_react_.useState)({});
   // Refs
   // Callbacks
+  const removeToast = (0,external_react_.useCallback)(id => {
+    setToasts(oldToasts => {
+      const newToasts = Object.assign({}, oldToasts);
+      delete newToasts[id];
+      return newToasts;
+    });
+  }, []);
+  const addToast = (0,external_react_.useCallback)((text, action, duration = 2500) => {
+    lastId.current++;
+    const id = lastId.current;
+    setToasts(oldToasts => {
+      return Object.assign(Object.assign({}, oldToasts), {
+        [id]: {
+          id,
+          text,
+          duration,
+          action
+        }
+      });
+    });
+  }, []);
   // Effects
   // Other
   // Render Functions
-  return /*#__PURE__*/external_react_.createElement(Container, {
+  return /*#__PURE__*/external_react_.createElement(ToastContext.Provider, {
+    value: addToast
+  }, children, /*#__PURE__*/external_react_.createElement(Container, {
     className: classnames_default()((toast_default()).toastContainer, className),
     fluid: true,
     __allowChildren: "all",
     style: style
-  }, children);
+  }, js_helper.ObjectHelper.values(toasts).map(toast => /*#__PURE__*/external_react_.createElement(ToastMemo, ToastContainer_extends({
+    key: toast.id,
+    timeToShow: toast.duration,
+    onDismissed: removeToast,
+    onDismissedData: toast.id
+  }, toast.action ? Object.assign(Object.assign({}, toast.action), {
+    actionName: toast.action.name
+  }) : {}), /*#__PURE__*/external_react_.createElement(tmp, null, toast.text)))));
 }
 const ToastContainerMemo = withMemo(ToastContainer, (toast_default()));
 
@@ -28113,7 +28347,6 @@ var TopBarButton_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-
 function TopBarButton(_a) {
   var {
       disabled = false,
@@ -28122,13 +28355,13 @@ function TopBarButton(_a) {
       children
     } = _a,
     rbmProps = TopBarButton_rest(_a, ["disabled", "onClick", "className", "children"]);
-  const cb = (0,external_react_.useCallback)(() => onClick ? onClick() : null, [onClick]);
   return /*#__PURE__*/external_react_.createElement("a", TopBarButton_extends({
     role: "button"
   }, rbmProps, {
-    onClick: cb,
+    onClick: onClick,
     className: classnames_default()((topBar_default()).button, {
-      [(topBar_default()).disabled]: disabled
+      [(topBar_default()).disabled]: disabled,
+      [(topBar_default()).active]: !disabled && onClick
     }, className)
   }), children);
 }
@@ -28441,6 +28674,16 @@ function nonEmptyString(str, other = Characters.NBSP) {
 
 
 
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -28454,8 +28697,129 @@ function nonEmptyString(str, other = Characters.NBSP) {
 
 })();
 
-/******/ 	return __webpack_exports__;
+exports.ActionSheet = __webpack_exports__.ActionSheet;
+exports.AlertDialog = __webpack_exports__.AlertDialog;
+exports.Block = __webpack_exports__.Block;
+exports.BreakpointNames = __webpack_exports__.BreakpointNames;
+exports.Breakpoints = __webpack_exports__.Breakpoints;
+exports.BulletList = __webpack_exports__.BulletList;
+exports.Button = __webpack_exports__.Button;
+exports.ButtonDialog = __webpack_exports__.ButtonDialog;
+exports.ButtonType = __webpack_exports__.ButtonType;
+exports.CONTAINER_CLASSES = __webpack_exports__.CONTAINER_CLASSES;
+exports.Card = __webpack_exports__.Card;
+exports.Characters = __webpack_exports__.Characters;
+exports.Checkbox = __webpack_exports__.Checkbox;
+exports.Clickable = __webpack_exports__.Clickable;
+exports.ColorInput = __webpack_exports__.ColorInput;
+exports.ConfirmDialog = __webpack_exports__.ConfirmDialog;
+exports.Container = __webpack_exports__.Container;
+exports.Dialog = __webpack_exports__.Dialog;
+exports.DialogBackground = __webpack_exports__.DialogBackground;
+exports.DialogContainer = __webpack_exports__.DialogContainer;
+exports.DialogProvider = __webpack_exports__.DialogProvider;
+exports.DoubleIcon = __webpack_exports__.DoubleIcon;
+exports.DragItem = __webpack_exports__.DragItem;
+exports.DropArea = __webpack_exports__.DropArea;
+exports.FileInput = __webpack_exports__.FileInput;
+exports.Flavor = __webpack_exports__.Flavor;
+exports.Flex = __webpack_exports__.Flex;
+exports.FullScreen = __webpack_exports__.FullScreen;
+exports.Grid = __webpack_exports__.Grid;
+exports.GridItem = __webpack_exports__.GridItem;
+exports.Grow = __webpack_exports__.Grow;
+exports.Heading = __webpack_exports__.Heading;
+exports.HiddenInput = __webpack_exports__.HiddenInput;
+exports.HookForm = __webpack_exports__.HookForm;
+exports.HoverMenu = __webpack_exports__.HoverMenu;
+exports.Icon = __webpack_exports__.Icon;
+exports.Image = __webpack_exports__.Image;
+exports.InViewport = __webpack_exports__.InViewport;
+exports.Inline = __webpack_exports__.Inline;
+exports.InlineBlock = __webpack_exports__.InlineBlock;
+exports.Input = __webpack_exports__.Input;
+exports.InputController = __webpack_exports__.InputController;
+exports.List = __webpack_exports__.List;
+exports.ListItem = __webpack_exports__.ListItem;
+exports.ListRow = __webpack_exports__.ListRow;
+exports.LoadingArea = __webpack_exports__.LoadingArea;
+exports.LoadingCircle = __webpack_exports__.LoadingCircle;
+exports.MENU_CONTAINER_CLASS = __webpack_exports__.MENU_CONTAINER_CLASS;
+exports.Menu = __webpack_exports__.Menu;
+exports.MenuCloseContextProvider = __webpack_exports__.MenuCloseContextProvider;
+exports.MenuDivider = __webpack_exports__.MenuDivider;
+exports.MenuItem = __webpack_exports__.MenuItem;
+exports.MoreButton = __webpack_exports__.MoreButton;
+exports.MultipleFileInput = __webpack_exports__.MultipleFileInput;
+exports.MultipleFileInputController = __webpack_exports__.MultipleFileInputController;
+exports.PasswordInput = __webpack_exports__.PasswordInput;
+exports.PasswordInputController = __webpack_exports__.PasswordInputController;
+exports.RESTRICT_CHILDREN = __webpack_exports__.RESTRICT_CHILDREN;
+exports.SearchSelectInput = __webpack_exports__.SearchSelectInput;
+exports.Select = __webpack_exports__.Select;
+exports.SelectController = __webpack_exports__.SelectController;
+exports.SendFormContext = __webpack_exports__.SendFormContext;
+exports.Size = __webpack_exports__.Size;
+exports.SizeCalculator = __webpack_exports__.SizeCalculator;
+exports.Slider = __webpack_exports__.Slider;
+exports.Spoiler = __webpack_exports__.Spoiler;
+exports.SpoilerList = __webpack_exports__.SpoilerList;
+exports.StyleProvider = __webpack_exports__.StyleProvider;
+exports.Submenu = __webpack_exports__.Submenu;
+exports.Switch = __webpack_exports__.Switch;
+exports.TEXT_PRIO = __webpack_exports__.TEXT_PRIO;
+exports.TEXT_SIZE = __webpack_exports__.TEXT_SIZE;
+exports.TabBar = __webpack_exports__.TabBar;
+exports.TabBarButton = __webpack_exports__.TabBarButton;
+exports.Table = __webpack_exports__.Table;
+exports.Text = __webpack_exports__.Text;
+exports.Textarea = __webpack_exports__.Textarea;
+exports.TextareaController = __webpack_exports__.TextareaController;
+exports.Toast = __webpack_exports__.Toast;
+exports.ToastContainer = __webpack_exports__.ToastContainer;
+exports.ToastContext = __webpack_exports__.ToastContext;
+exports.TopBar = __webpack_exports__.TopBar;
+exports.TopBarButton = __webpack_exports__.TopBarButton;
+exports.View = __webpack_exports__.View;
+exports.ViewWithoutListeners = __webpack_exports__.ViewWithoutListeners;
+exports.WindowContext = __webpack_exports__.WindowContext;
+exports.WrongChildError = __webpack_exports__.WrongChildError;
+exports.memoComparator = __webpack_exports__.memoComparator;
+exports.nonEmptyString = __webpack_exports__.nonEmptyString;
+exports.useAlertDialog = __webpack_exports__.useAlertDialog;
+exports.useBreakpoint = __webpack_exports__.useBreakpoint;
+exports.useBreakpointSelect = __webpack_exports__.useBreakpointSelect;
+exports.useClientLayoutEffect = __webpack_exports__.useClientLayoutEffect;
+exports.useComposedRef = __webpack_exports__.useComposedRef;
+exports.useConfirmDialog = __webpack_exports__.useConfirmDialog;
+exports.useDebounced = __webpack_exports__.useDebounced;
+exports.useDelayed = __webpack_exports__.useDelayed;
+exports.useDialog = __webpack_exports__.useDialog;
+exports.useInViewport = __webpack_exports__.useInViewport;
+exports.useKeyListener = __webpack_exports__.useKeyListener;
+exports.useKeyPressed = __webpack_exports__.useKeyPressed;
+exports.useKeyUpListener = __webpack_exports__.useKeyUpListener;
+exports.useListener = __webpack_exports__.useListener;
+exports.useListenerWithExtractedProps = __webpack_exports__.useListenerWithExtractedProps;
+exports.useMenu = __webpack_exports__.useMenu;
+exports.useMenuClose = __webpack_exports__.useMenuClose;
+exports.useMousePosition = __webpack_exports__.useMousePosition;
+exports.useOnChangeDone = __webpack_exports__.useOnChangeDone;
+exports.useOnMount = __webpack_exports__.useOnMount;
+exports.useOnce = __webpack_exports__.useOnce;
+exports.useSendFormContext = __webpack_exports__.useSendFormContext;
+exports.useSharedSelectedColor = __webpack_exports__.useSharedSelectedColor;
+exports.useSpoilerGroup = __webpack_exports__.useSpoilerGroup;
+exports.useStrictEnabled = __webpack_exports__.useStrictEnabled;
+exports.useToast = __webpack_exports__.useToast;
+exports.useWindow = __webpack_exports__.useWindow;
+exports.useWindowDimensions = __webpack_exports__.useWindowDimensions;
+exports.withForwardRef = __webpack_exports__.withForwardRef;
+exports.withHookController = __webpack_exports__.withHookController;
+exports.withMemo = __webpack_exports__.withMemo;
+exports.withRenderBrowserOnly = __webpack_exports__.withRenderBrowserOnly;
+exports.withRestrictedChildren = __webpack_exports__.withRestrictedChildren;
+Object.defineProperty(exports, "__esModule", { value: true });
 /******/ })()
 ;
-});
 //# sourceMappingURL=bootstrapReactMobile.js.map