@ainias42/react-bootstrap-mobile 0.2.4 → 0.2.6

package/dist/bootstrapReactMobile.js

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @ainias42/react-bootstrap-mobile v0.2.3
+ *   @ainias42/react-bootstrap-mobile v0.2.5
  *   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
@@ -1223,7 +1223,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, `.card__JNkK_{margin:8px;padding:16px;word-wrap:break-word;background-color:#fff}.card__JNkK_.fullHeight__xYEuK{height:calc(100% - 16px)}.card__JNkK_.noPaddingHeight__hOIog{padding-top:0;padding-bottom:0}.card__JNkK_.noPaddingWidth__ontjp{padding-left:0;padding-right:0}.card__JNkK_.noPadding__bi80V{padding:0}.card__JNkK_.noMargin__NLiNU{margin:0}.card__JNkK_.noMargin__NLiNU.fullHeight__xYEuK{height:100%}.card__JNkK_ .content__jwaqW{font-size:16px;margin:0;line-height:1.4}.card__JNkK_ .title__BrHn0{padding:0}.material-design .card__JNkK_{border-radius:2px;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)}.material-design .card__JNkK_ .content__jwaqW{color:#000;color:rgba(0,0,0,.54)}.material-design .card__JNkK_ .title__BrHn0{margin:8px 0 12px 0;font-size:24px}.flat-design .card__JNkK_{border-radius:8px;box-shadow:0 1px 2px 0 rgba(0,0,0,.12)}.flat-design .card__JNkK_ .content__jwaqW{color:#030303}.flat-design .card__JNkK_ .title__BrHn0{margin:4px 0 8px 0;font-size:20px}`, "",{"version":3,"sources":["webpack://./src/Components/Card/card.scss","webpack://./src/scss/_variables.scss","webpack://./src/scss/_designMixin.scss"],"names":[],"mappings":"AAKA,aACE,UAHW,CAIX,YAAA,CACA,oBAAA,CACA,qBAAA,CAEA,+BACE,wBAAA,CAGF,oCACE,aAAA,CACA,gBAAA,CAGF,mCACE,cAAA,CACA,eAAA,CAGF,8BACE,SAAA,CAGF,6BACE,QAAA,CAEA,+CACE,WAAA,CAIJ,6BACE,cCrBW,CDsBX,QAAA,CACA,eAAA,CAGF,2BACE,SAAA,CExCS,8BF4CT,iBAAA,CACA,gGC9BgB,CDgChB,8CACE,UAAA,CACA,qBAAA,CAGF,4CACE,mBAAA,CACA,cAAA,CEtDO,0BF2DT,iBAAA,CACA,sCAAA,CAEA,0CACE,aAAA,CAGF,wCACE,kBAAA,CACA,cAAA","sourcesContent":["@import \"../../scss/variables\";\n@import \"../../scss/designMixin\";\n\n$marginCard: 8px;\n\n.card {\n  margin: $marginCard;\n  padding: 16px;\n  word-wrap: break-word;\n  background-color: #ffffff;\n\n  &.fullHeight {\n    height: calc(100% - #{2*$marginCard})\n  }\n\n  &.noPaddingHeight {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n\n  &.noPaddingWidth {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  &.noPadding {\n    padding: 0\n  }\n\n  &.noMargin {\n    margin: 0;\n\n    &.fullHeight {\n      height: 100%\n    }\n  }\n\n  .content {\n    font-size: $fontSizeBase;\n    margin: 0;\n    line-height: 1.4;\n  }\n\n  .title {\n    padding: 0;\n  }\n\n  @include design($material) {\n    border-radius: 2px;\n    box-shadow: $boxShadowMaterial;\n\n    .content {\n      color: #000000;\n      color: rgba(0, 0, 0, 0.54);\n    }\n\n    .title {\n      margin: 8px 0 12px 0;\n      font-size: 24px;\n    }\n  }\n\n  @include design($flat) {\n    border-radius: 8px;\n    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 12%);\n\n    .content {\n      color: #030303;\n    }\n\n    .title {\n      margin: 4px 0 8px 0;\n      font-size: 20px;\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","@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, `.card__JNkK_{margin:8px;padding:16px;word-wrap:break-word;background-color:#fff}.card__JNkK_.fullHeight__xYEuK{height:calc(100% - 16px)}.card__JNkK_.noPaddingHeight__hOIog{padding-top:0;padding-bottom:0}.card__JNkK_.noPaddingWidth__ontjp{padding-left:0;padding-right:0}.card__JNkK_.noPadding__bi80V{padding:0}.card__JNkK_.noMargin__NLiNU{margin:0}.card__JNkK_.noMargin__NLiNU.fullHeight__xYEuK{height:100%}.card__JNkK_ .content__jwaqW{font-size:16px;margin:0;line-height:1.4}.card__JNkK_ .title__BrHn0{padding:0}.material-design .card__JNkK_{border-radius:2px;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)}.material-design .card__JNkK_ .content__jwaqW{color:#000;color:var(--card-text-color, rgba(0, 0, 0, 0.54))}.material-design .card__JNkK_ .title__BrHn0{margin:8px 0 12px 0;font-size:24px}.flat-design .card__JNkK_{border-radius:8px;box-shadow:0 1px 2px 0 rgba(0,0,0,.12)}.flat-design .card__JNkK_ .content__jwaqW{color:var(--card-text-color, #030303)}.flat-design .card__JNkK_ .title__BrHn0{margin:4px 0 8px 0;font-size:20px}`, "",{"version":3,"sources":["webpack://./src/Components/Card/card.scss","webpack://./src/scss/_variables.scss","webpack://./src/scss/_designMixin.scss"],"names":[],"mappings":"AAKA,aACE,UAHW,CAIX,YAAA,CACA,oBAAA,CACA,qBAAA,CAEA,+BACE,wBAAA,CAGF,oCACE,aAAA,CACA,gBAAA,CAGF,mCACE,cAAA,CACA,eAAA,CAGF,8BACE,SAAA,CAGF,6BACE,QAAA,CAEA,+CACE,WAAA,CAIJ,6BACE,cCrBW,CDsBX,QAAA,CACA,eAAA,CAGF,2BACE,SAAA,CExCS,8BF4CT,iBAAA,CACA,gGC9BgB,CDgChB,8CACE,UAAA,CACA,iDAAA,CAGF,4CACE,mBAAA,CACA,cAAA,CEtDO,0BF2DT,iBAAA,CACA,sCAAA,CAEA,0CACE,qCAAA,CAGF,wCACE,kBAAA,CACA,cAAA","sourcesContent":["@import \"../../scss/variables\";\n@import \"../../scss/designMixin\";\n\n$marginCard: 8px;\n\n.card {\n  margin: $marginCard;\n  padding: 16px;\n  word-wrap: break-word;\n  background-color: #ffffff;\n\n  &.fullHeight {\n    height: calc(100% - #{2*$marginCard})\n  }\n\n  &.noPaddingHeight {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n\n  &.noPaddingWidth {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  &.noPadding {\n    padding: 0\n  }\n\n  &.noMargin {\n    margin: 0;\n\n    &.fullHeight {\n      height: 100%\n    }\n  }\n\n  .content {\n    font-size: $fontSizeBase;\n    margin: 0;\n    line-height: 1.4;\n  }\n\n  .title {\n    padding: 0;\n  }\n\n  @include design($material) {\n    border-radius: 2px;\n    box-shadow: $boxShadowMaterial;\n\n    .content {\n      color: #000000;\n      color: var(--card-text-color, rgba(0, 0, 0, 0.54));\n    }\n\n    .title {\n      margin: 8px 0 12px 0;\n      font-size: 24px;\n    }\n  }\n\n  @include design($flat) {\n    border-radius: 8px;\n    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 12%);\n\n    .content {\n      color: var(--card-text-color, #030303);\n    }\n\n    .title {\n      margin: 4px 0 8px 0;\n      font-size: 20px;\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","@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 = {
 	"card": `card__JNkK_`,
@@ -1443,7 +1443,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)}.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":""}]);
+___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:var(--input-text-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:var(--input-text-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,sCAAA,CACA,sEAAA,CACA,wBAAA,CACA,2BAAA,CACA,iCAAA,CACA,kBAAA,CAEA,kHACE,qBAAA,CACA,qCAAA,CAGF,kDACE,kIAAA,CC7CK,wCDmDP,sCAAA,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: var(--input-text-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: var(--input-text-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`,
@@ -1566,6 +1566,24 @@ ___CSS_LOADER_EXPORT___.locals = {
 module.exports = ___CSS_LOADER_EXPORT___;
 
 
+/***/ }),
+
+/***/ 7666:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+// Imports
+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, `.error__TgU4D{font-size:.7rem;--text-primary-default-color: var(--text-error) }`, "",{"version":3,"sources":["webpack://./src/Components/FormElements/formError.scss"],"names":[],"mappings":"AAAA,cACE,eAAA,CACA,gDAAA","sourcesContent":[".error {\n  font-size: 0.7rem;\n  --text-primary-default-color: var(--text-error)\n}\n"],"sourceRoot":""}]);
+// Exports
+___CSS_LOADER_EXPORT___.locals = {
+	"error": `error__TgU4D`
+};
+module.exports = ___CSS_LOADER_EXPORT___;
+
+
 /***/ }),
 
 /***/ 4325:
@@ -3273,6 +3291,28 @@ module.exports = StyleContext;
     if (false) { var removeCss; }
   
 
+/***/ }),
+
+/***/ 8704:
+/***/ ((module, exports, __webpack_require__) => {
+
+
+    var refs = 0;
+    var css = __webpack_require__(7666);
+    var insertCss = __webpack_require__(1352);
+    var content = typeof css === 'string' ? [[module.id, css, '']] : css;
+
+    exports = module.exports = css.locals || {};
+    exports._getContent = function() { return content; };
+    exports._getCss = function() { return '' + css; };
+    exports._insertCss = function(options) { return insertCss(content, options) };
+
+    // Hot Module Replacement
+    // https://webpack.github.io/docs/hot-module-replacement
+    // Only activated in browser context
+    if (false) { var removeCss; }
+  
+
 /***/ }),
 
 /***/ 4023:
@@ -4763,7 +4803,7 @@ module.exports = baseForOwn;
 /***/ 7422:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-var castPath = __webpack_require__(1769),
+var castPath = __webpack_require__(4150),
     toKey = __webpack_require__(7797);
 
 /**
@@ -5653,7 +5693,7 @@ module.exports = castFunction;
 
 /***/ }),
 
-/***/ 1769:
+/***/ 4150:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 var isArray = __webpack_require__(6449),
@@ -6732,7 +6772,7 @@ module.exports = getValue;
 /***/ 9326:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-var castPath = __webpack_require__(1769),
+var castPath = __webpack_require__(4150),
     isArguments = __webpack_require__(2428),
     isArray = __webpack_require__(6449),
     isIndex = __webpack_require__(361),
@@ -10008,6 +10048,7 @@ __webpack_require__.d(__webpack_exports__, {
   Checkbox: () => (/* reexport */ Checkbox_tmp),
   Clickable: () => (/* reexport */ ClickableMemo),
   ColorInput: () => (/* reexport */ ColorInputMemo),
+  ColorInputController: () => (/* reexport */ ColorInputController),
   ConfirmDialog: () => (/* reexport */ ConfirmDialogMemo),
   Container: () => (/* reexport */ Container),
   Dialog: () => (/* reexport */ DialogMemo),
@@ -10018,8 +10059,10 @@ __webpack_require__.d(__webpack_exports__, {
   DragItem: () => (/* reexport */ DragItemMemo),
   DropArea: () => (/* reexport */ DropArea),
   FileInput: () => (/* reexport */ FileInput),
+  FileInputController: () => (/* reexport */ FileInputController),
   Flavor: () => (/* reexport */ Flavor),
   Flex: () => (/* reexport */ Flex_tmp),
+  FormError: () => (/* reexport */ FormError),
   FullScreen: () => (/* reexport */ FullScreen),
   Grid: () => (/* reexport */ GridMemo),
   GridItem: () => (/* reexport */ GridItemMemo),
@@ -10092,6 +10135,7 @@ __webpack_require__.d(__webpack_exports__, {
   useConfirmDialog: () => (/* reexport */ useConfirmDialog),
   useDebounced: () => (/* reexport */ useDebounced),
   useDelayed: () => (/* reexport */ useDelayed),
+  useDelayedEffect: () => (/* reexport */ useDelayedEffect),
   useDelayedState: () => (/* reexport */ useDelayedState),
   useDialog: () => (/* reexport */ useDialog),
   useInViewport: () => (/* reexport */ useInViewport),
@@ -11562,6 +11606,32 @@ const Button = withMemo(function Button(_a) {
 // EXTERNAL MODULE: ./src/Components/FormElements/CheckBox/checkbox.scss
 var CheckBox_checkbox = __webpack_require__(4675);
 var checkbox_default = /*#__PURE__*/__webpack_require__.n(CheckBox_checkbox);
+// EXTERNAL MODULE: ./src/Components/FormElements/formError.scss
+var formError = __webpack_require__(8704);
+var formError_default = /*#__PURE__*/__webpack_require__.n(formError);
+;// CONCATENATED MODULE: ./src/Components/FormElements/FormError.tsx
+
+
+
+
+
+const FormError = withMemo(function FormError({
+  error
+}) {
+  // Refs
+  // States/Variables/Selectors
+  // Dispatch
+  // Callbacks
+  // Effects
+  // Other
+  // RenderFunctions
+  if (!error) {
+    return null;
+  }
+  return /*#__PURE__*/external_react_default().createElement(BlockMemo, {
+    className: (formError_default()).error
+  }, /*#__PURE__*/external_react_default().createElement(tmp, null, error));
+}, (formError_default()));
 ;// CONCATENATED MODULE: ./src/Components/FormElements/CheckBox/Checkbox.tsx
 function Checkbox_extends() { return Checkbox_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; }, Checkbox_extends.apply(null, arguments); }
 var Checkbox_rest = undefined && undefined.__rest || function (s, e) {
@@ -11578,6 +11648,7 @@ var Checkbox_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 function Checkbox(_a) {
   // Variables
   var {
@@ -11586,9 +11657,10 @@ function Checkbox(_a) {
       isLabelBeforeCheckbox = false,
       id,
       className,
+      error,
       style
     } = _a,
-    props = Checkbox_rest(_a, ["children", "label", "isLabelBeforeCheckbox", "id", "className", "style"]);
+    props = Checkbox_rest(_a, ["children", "label", "isLabelBeforeCheckbox", "id", "className", "error", "style"]);
   // States
   // Refs
   // Callbacks
@@ -11625,7 +11697,9 @@ function Checkbox(_a) {
     className: (checkbox_default()).checkmark
   }), /*#__PURE__*/external_react_.createElement("span", {
     className: (checkbox_default()).label
-  }, label)));
+  }, label), /*#__PURE__*/external_react_.createElement(FormError, {
+    error: error
+  })));
 }
 const Checkbox_tmp = withMemo(Checkbox, (checkbox_default()));
 
@@ -23035,6 +23109,7 @@ var ColorInput_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 function convertToHex(color, disableAlpha) {
   let newColor = `#${color.r.toString(16).padStart(2, '0')}${color.g.toString(16).padStart(2, '0')}${color.b.toString(16).padStart(2, '0')}`;
   if (color.a !== undefined && !disableAlpha) {
@@ -23056,10 +23131,11 @@ function ColorInput(_a) {
       onClose,
       disableAlpha,
       presetColors,
+      error,
       sharedColorKey = "default",
       disabled
     } = _a,
-    otherProps = ColorInput_rest(_a, ["defaultValue", "value", "label", "onChangeColor", "onChangeColorComplete", "onOpen", "onClose", "disableAlpha", "presetColors", "sharedColorKey", "disabled"]);
+    otherProps = ColorInput_rest(_a, ["defaultValue", "value", "label", "onChangeColor", "onChangeColorComplete", "onOpen", "onClose", "disableAlpha", "presetColors", "error", "sharedColorKey", "disabled"]);
   // Refs
   const modalRef = (0,external_react_.useRef)(null);
   // States
@@ -23127,7 +23203,7 @@ function ColorInput(_a) {
   }, [position]);
   // Other
   // Render Functions
-  return /*#__PURE__*/external_react_.createElement("span", {
+  return /*#__PURE__*/external_react_.createElement(external_react_.Fragment, null, /*#__PURE__*/external_react_.createElement("span", {
     className: (colorInput_default()).colorInput
   }, /*#__PURE__*/external_react_.createElement(Menu, {
     x: position.x,
@@ -23149,6 +23225,8 @@ function ColorInput(_a) {
       backgroundColor: colVal
     },
     className: (colorInput_default()).preview
+  })), /*#__PURE__*/external_react_.createElement(FormError, {
+    error: error
   }));
 }
 // Need ColorInputMemo for autocompletion of phpstorm
@@ -23156,95 +23234,110 @@ const ColorInputMemo = withMemo(ColorInput, (colorInput_default()));
 
 ;// 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
+;// 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++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 
 
 
 
-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
-  }));
+function withHookController(Comp, onChangeProp, emptyValue = null) {
+  function WithHookComponent(_a, ref) {
+    var _b, _c, _d;
+    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, {
+        name: field.name,
+        onBlur: field.onBlur,
+        disabled: field.disabled
+      }, onChangeProps, {
+        value: (_c = field.value) !== null && _c !== void 0 ? _c : emptyValue,
+        checked: (_d = field.value) !== null && _d !== void 0 ? _d : emptyValue,
+        ref: composedRef,
+        error: errorMessage
+      }), children)
+    );
+  }
+  return withForwardRef(WithHookComponent);
 }
-const LoadingCircleMemo = withMemo(LoadingCircle, (loadingCircle_default()));
+;// CONCATENATED MODULE: ./src/Components/FormElements/Controller/ColorInputController.ts
 
-// 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
 
+const ColorInputController = withHookController(ColorInputMemo, "onChangeColor");
+// 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
 
 
 
 
-function LoadingArea({
-  loading,
-  fullWidth = false,
-  fullSize = false,
-  fullHeight = false,
-  opacity = 0.65,
+const Grow = withForwardRef(function Grow({
   className,
+  children,
+  center = false,
   style,
-  children
-}) {
+  weight = 1
+}, ref) {
   // 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
-    }),
+  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, 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) {
+  }, 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++) {
@@ -23256,64 +23349,62 @@ var HookForm_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-
-const HookForm = withMemo(function HookForm(_a) {
-  // Refs
+function Image(_a) {
+  // Variables
   var {
-      children,
-      onSend
+      src,
+      alt = '',
+      className,
+      style
     } = _a,
-    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
+    otherProps = Image_rest(_a, ["src", "alt", "className", "style"]);
+  // Refs
+  // States
+  // Selectors
   // Callbacks
   // Effects
   // Other
-  // 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
-
-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;
+  // Render Functions
+  return /*#__PURE__*/external_react_.createElement("img", Image_extends({
+    src: src,
+    alt: alt,
+    className: classnames_default()((image_default()).image, className),
+    style: style
+  }, otherProps));
 }
-;// CONCATENATED MODULE: ./src/Components/Hooks/useDebounced.ts
+// Need ImageMemo for autocompletion of phpstorm
+const ImageMemo = withMemo(Image, (image_default()));
 
-function useDebounced(callback, dependencies, delay = 100) {
-  const [shared] = (0,external_react_.useState)({
-    timeout: undefined
-  });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const realCB = (0,external_react_.useCallback)(callback, dependencies);
-  return (0,external_react_.useCallback)((...newArgs) => {
-    if (shared.timeout === undefined) {
-      realCB(...newArgs);
-      shared.timeout = setTimeout(() => shared.timeout = undefined, delay);
+;// 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);
+      }
     }
-  }, [delay, realCB, shared]);
-}
-;// 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) {
+    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++) {
@@ -23333,142 +23424,206 @@ var Input_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-const Input = withForwardRef(function Input(_a, ref) {
+
+
+
+
+const MultipleFileInput = withMemo(function MultipleImageInput(_a) {
   // 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
+      "data-test-id": testId
     } = _a,
-    otherProps = Input_rest(_a, ["label", "className", "style", "onKeyDown", "inline", "value", "error", "onChangeText", "onEnter"]);
+    otherProps = MultipleFileInput_rest(_a, ["className", "style", "value", "label", "mimeTypes", "maxFiles", "maxSizePerFile", "allowOverride", "onError", "showDeleteButton", "error", "data-test-id"]);
+  // Refs
+  const inputRef = (0,external_react_.useRef)(null);
+  const indexRef = (0,external_react_.useRef)(undefined);
   // 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;
-        }
-      }
-      if (!Number.isNaN(Number(value))) {
-        // Do not parse to allow ., and so on
-        return value;
+  // Selectors
+  // Callbacks
+  const checkMimeType = (0,external_react_.useCallback)(fileType => {
+    return mimeTypes.some(type => {
+      if (type === '*/*' || type === '*') {
+        return true;
       }
-      if (!Number.isNaN(numberValue)) {
-        return parseFloat(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;
     }
-    return "";
-  }, [value, otherProps.max, otherProps.min, otherProps.type]);
-  // Refs
-  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) {
-      if (otherProps.type === "number") {
-        if (e.currentTarget.value === "-") {
-          onChangeText(e.currentTarget.value);
-          return;
-        }
-        const val = !Number.isNaN(Number(e.currentTarget.value)) ? e.currentTarget.value : !Number.isNaN(parseFloat(e.currentTarget.value)) ? String(parseFloat(e.currentTarget.value)) : "";
-        onChangeText(val);
-      } else {
-        onChangeText(e.currentTarget.value);
-      }
+    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;
     }
-    onChangeWithData(e);
-  }, [onChangeWithData, onChangeText, otherProps.type]);
-  const [onBlur, otherPropsWithoutBlur] = useListenerWithExtractedProps('onBlur', otherPropsWithoutOnchange);
-  const [onChangeDoneWithoutDeboune, otherPropsWithoutData] = useListenerWithExtractedProps('onChangeDone', otherPropsWithoutBlur);
-  const onChangeDone = useDebounced(onChangeDoneWithoutDeboune, [onChangeDoneWithoutDeboune]);
-  const realOnKeyDown = (0,external_react_.useCallback)(e => {
-    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-    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)) : "";
-        onEnter(val);
-      } else {
-        onEnter(e.target.value);
-      }
+    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;
     }
-    if (otherProps.type === "number") {
-      const step = otherProps.step ? Number(otherProps.step) : 1;
-      if (e.key === "ArrowUp") {
-        let newValue = (parseFloat(e.currentTarget.value) || 0) + step;
-        if (otherProps.max !== undefined && newValue > Number(otherProps.max)) {
-          newValue = Number(otherProps.max);
-        }
-        e.currentTarget.value = newValue.toString();
-        onChange(e);
-      } else if (e.key === "ArrowDown") {
-        let newValue = (parseFloat(e.currentTarget.value) || 0) - step;
-        if (otherProps.min !== undefined && newValue < Number(otherProps.min)) {
-          newValue = Number(otherProps.min);
+    const newUrls = yield getBase64(newFiles);
+    const newValue = newFiles.map((file, fileIndex) => ({
+      name: file.name,
+      src: newUrls[fileIndex],
+      type: 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);
+          }
         }
-        e.currentTarget.value = newValue.toString();
-        onChange(e);
+      }
+    } else {
+      for (let i = 0; i < event.dataTransfer.files.length; i++) {
+        files.push(event.dataTransfer.files[i]);
       }
     }
-  }, [onKeyDown, onEnter, otherProps.type, otherProps.step, otherProps.max, otherProps.min, onChange]);
-  // Effects
-  useOnChangeDone(onChangeDone, innerRef);
-  (0,external_react_.useEffect)(() => {
-    // Add the onChangeDone for numbers
-    if (otherProps.type === "number") {
-      const elem = innerRef.current;
-      elem === null || elem === void 0 ? void 0 : elem.addEventListener('blur', onChangeDone);
-      return () => {
-        elem === null || elem === void 0 ? void 0 : elem.removeEventListener('blur', onChangeDone);
-      };
+    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;
     }
-    return undefined;
-  }, [ref, onChangeDone, innerRef, otherProps.type]);
+    indexRef.current = index;
+    inputRef.current.dispatchEvent(new MouseEvent("click"));
+  }, [allowOverride]);
+  // Effects
   // Other
   // Render Functions
-  return /*#__PURE__*/external_react_.createElement("label", {
-    className: classnames_default()((input_default()).input, {
-      [(input_default()).inline]: inline
-    }, className),
-    style: style
-  }, label ? /*#__PURE__*/external_react_.createElement("span", {
-    className: (input_default()).label
-  }, label) : null, /*#__PURE__*/external_react_.createElement("input", Input_extends({
-    inputMode: otherProps.type === "number" ? "numeric" : undefined
-  }, otherPropsWithoutData, {
-    value: usedValue,
-    type: otherProps.type === "number" ? "text" : otherProps.type,
-    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/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) {
+  const renderFile = file => {
+    if (file.type.startsWith('image/')) {
+      return /*#__PURE__*/external_react_.createElement(ImageMemo, {
+        key: file.src,
+        src: file.src,
+        alt: file.name,
+        className: classnames_default()((fileInput_default()).previewImage)
+      });
+    }
+    // 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));
+  };
+  if (error) {
+    console.log("LOG-d error inside MultipleFileInput:", error);
+  }
+  return /*#__PURE__*/external_react_.createElement("span", {
+    className: classnames_default()((fileInput_default()).fileInput, className),
+    style: style,
+    "data-test-id": testId
+  }, /*#__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.src
+    }, /*#__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(', ')
+  }))))), /*#__PURE__*/external_react_.createElement(FormError, {
+    error: error
+  }));
+}, (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++) {
@@ -23480,92 +23635,175 @@ var withHookController_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-function withHookController(Comp, onChangeProp, emptyValue = null) {
-  function WithHookComponent(_a, ref) {
-    var _b, _c, _d;
-    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,
-        checked: (_d = field.value) !== null && _d !== void 0 ? _d : emptyValue,
-        ref: composedRef,
-        error: errorMessage
-      }), children)
-    );
+
+
+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 ? Array.isArray(mimeType) ? 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]) {
+      console.log("LOG-d onChangeFile", 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/Controller/FileInputController.tsx
+function FileInputController_extends() { return FileInputController_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; }, FileInputController_extends.apply(null, arguments); }
+var FileInputController_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 withForwardRef(WithHookComponent);
+  return t;
+};
+
+
+
+
+const FileInputController = withMemo(function FileInputController(_a) {
+  var _b, _c, _d, _e, _f, _g, _h;
+  var {
+      name
+    } = _a,
+    otherProps = FileInputController_rest(_a, ["name"]);
+  const {
+    field,
+    fieldState
+  } = (0,external_react_hook_form_namespaceObject.useController)({
+    name
+  });
+  const {
+    errors
+  } = (0,external_react_hook_form_namespaceObject.useFormState)();
+  const {
+    clearErrors
+  } = (0,external_react_hook_form_namespaceObject.useFormContext)();
+  const errorMessage = (_g = (_e = (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : (_d = errors[`${name}.src`]) === null || _d === void 0 ? void 0 : _d.message) !== null && _e !== void 0 ? _e : (_f = errors[`${name}.name`]) === null || _f === void 0 ? void 0 : _f.message) !== null && _g !== void 0 ? _g : (_h = errors[`${name}.type`]) === null || _h === void 0 ? void 0 : _h.message;
+  const internalOnChange = (0,external_react_.useCallback)(arg => {
+    clearErrors(name);
+    clearErrors(`${name}.name`);
+    clearErrors(`${name}.src`);
+    clearErrors(`${name}.type`);
+    field.onChange(arg);
+  }, [clearErrors, field, name]);
+  return /*#__PURE__*/external_react_default().createElement(FileInput, FileInputController_extends({}, otherProps, field, {
+    onChangeFile: internalOnChange,
+    value: field.value,
+    error: errorMessage
+  }));
+});
+// 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
+  }));
 }
-;// CONCATENATED MODULE: ./src/Components/FormElements/Controller/InputController.ts
+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
 
-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({
+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++) {
@@ -23577,62 +23815,64 @@ 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));
+  // 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
+
+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;
 }
-// Need ImageMemo for autocompletion of phpstorm
-const ImageMemo = withMemo(Image, (image_default()));
+;// CONCATENATED MODULE: ./src/Components/Hooks/useDebounced.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());
+function useDebounced(callback, dependencies, delay = 100) {
+  const [shared] = (0,external_react_.useState)({
+    timeout: undefined
   });
-};
-var MultipleFileInput_rest = undefined && undefined.__rest || function (s, e) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const realCB = (0,external_react_.useCallback)(callback, dependencies);
+  return (0,external_react_.useCallback)((...newArgs) => {
+    if (shared.timeout === undefined) {
+      realCB(...newArgs);
+      shared.timeout = setTimeout(() => shared.timeout = undefined, delay);
+    }
+  }, [delay, realCB, shared]);
+}
+;// 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++) {
@@ -23651,204 +23891,147 @@ 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,
-      "data-test-id": testId
+      onChangeText,
+      onEnter
     } = _a,
-    otherProps = MultipleFileInput_rest(_a, ["className", "style", "value", "label", "mimeTypes", "maxFiles", "maxSizePerFile", "allowOverride", "onError", "showDeleteButton", "error", "data-test-id"]);
-  // 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);
+    otherProps = Input_rest(_a, ["label", "className", "style", "onKeyDown", "inline", "value", "error", "onChangeText", "onEnter"]);
+  // States
+  const usedValue = (0,external_react_.useMemo)(() => {
+    if (otherProps.type !== "number" || typeof value === "number") {
+      return value;
     }
-  }, [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);
-          }
+    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;
         }
       }
-    } else {
-      for (let i = 0; i < event.dataTransfer.files.length; i++) {
-        files.push(event.dataTransfer.files[i]);
+      if (!Number.isNaN(Number(value))) {
+        // Do not parse to allow ., and so on
+        return value;
+      }
+      if (!Number.isNaN(numberValue)) {
+        return parseFloat(value);
       }
     }
-    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;
+    return "";
+  }, [value, otherProps.max, otherProps.min, otherProps.type]);
+  // Refs
+  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) {
+      if (otherProps.type === "number") {
+        if (e.currentTarget.value === "-") {
+          onChangeText(e.currentTarget.value);
+          return;
+        }
+        const val = !Number.isNaN(Number(e.currentTarget.value)) ? e.currentTarget.value : !Number.isNaN(parseFloat(e.currentTarget.value)) ? String(parseFloat(e.currentTarget.value)) : "";
+        onChangeText(val);
+      } else {
+        onChangeText(e.currentTarget.value);
+      }
     }
-    indexRef.current = index;
-    inputRef.current.dispatchEvent(new MouseEvent("click"));
-  }, [allowOverride]);
+    onChangeWithData(e);
+  }, [onChangeWithData, onChangeText, otherProps.type]);
+  const [onBlur, otherPropsWithoutBlur] = useListenerWithExtractedProps('onBlur', otherPropsWithoutOnchange);
+  const [onChangeDoneWithoutDeboune, otherPropsWithoutData] = useListenerWithExtractedProps('onChangeDone', otherPropsWithoutBlur);
+  const onChangeDone = useDebounced(onChangeDoneWithoutDeboune, [onChangeDoneWithoutDeboune]);
+  const realOnKeyDown = (0,external_react_.useCallback)(e => {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    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)) : "";
+        onEnter(val);
+      } else {
+        onEnter(e.target.value);
+      }
+    }
+    if (otherProps.type === "number") {
+      const step = otherProps.step ? Number(otherProps.step) : 1;
+      if (e.key === "ArrowUp") {
+        let newValue = (parseFloat(e.currentTarget.value) || 0) + step;
+        if (otherProps.max !== undefined && newValue > Number(otherProps.max)) {
+          newValue = Number(otherProps.max);
+        }
+        e.currentTarget.value = newValue.toString();
+        onChange(e);
+      } else if (e.key === "ArrowDown") {
+        let newValue = (parseFloat(e.currentTarget.value) || 0) - step;
+        if (otherProps.min !== undefined && newValue < Number(otherProps.min)) {
+          newValue = Number(otherProps.min);
+        }
+        e.currentTarget.value = newValue.toString();
+        onChange(e);
+      }
+    }
+  }, [onKeyDown, onEnter, otherProps.type, otherProps.step, otherProps.max, otherProps.min, onChange]);
   // Effects
+  useOnChangeDone(onChangeDone, innerRef);
+  (0,external_react_.useEffect)(() => {
+    // Add the onChangeDone for numbers
+    if (otherProps.type === "number") {
+      const elem = innerRef.current;
+      elem === null || elem === void 0 ? void 0 : elem.addEventListener('blur', onChangeDone);
+      return () => {
+        elem === null || elem === void 0 ? void 0 : elem.removeEventListener('blur', onChangeDone);
+      };
+    }
+    return undefined;
+  }, [ref, onChangeDone, innerRef, otherProps.type]);
   // 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,
-    "data-test-id": testId
-  }, /*#__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()));
+  return /*#__PURE__*/external_react_.createElement("label", {
+    className: classnames_default()((input_default()).input, {
+      [(input_default()).inline]: inline
+    }, className),
+    style: style
+  }, label ? /*#__PURE__*/external_react_.createElement("span", {
+    className: (input_default()).label
+  }, label) : null, /*#__PURE__*/external_react_.createElement("input", Input_extends({
+    inputMode: otherProps.type === "number" ? "numeric" : undefined
+  }, otherPropsWithoutData, {
+    value: usedValue,
+    type: otherProps.type === "number" ? "text" : otherProps.type,
+    ref: refFunction,
+    className: (input_default()).text,
+    onBlur: onBlur,
+    onChange: onChange,
+    onKeyDown: realOnKeyDown
+  })), /*#__PURE__*/external_react_.createElement(FormError, {
+    error: error
+  }));
+}, (input_default()));
+;// CONCATENATED MODULE: ./src/Components/FormElements/Controller/InputController.ts
+
+
+const InputController = withHookController(Input, "onChangeText");
 ;// CONCATENATED MODULE: ./src/Components/FormElements/Controller/MultipleFileInputController.ts
 
 
+// TODO Error handling(?)
 const MultipleFileInputController = withHookController(MultipleFileInput, 'onChangeFiles');
 // EXTERNAL MODULE: ./src/Components/FormElements/Input/PasswordInput/passwordInput.scss
 var passwordInput = __webpack_require__(1436);
@@ -24002,6 +24185,7 @@ var Switch_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 const Switch = withMemo(function Switch(_a) {
   // Variables
   var {
@@ -24013,9 +24197,10 @@ const Switch = withMemo(function Switch(_a) {
       id,
       className,
       style,
+      error,
       onChange
     } = _a,
-    props = Switch_rest(_a, ["children", "label", "preLabel", "isLabelBeforeSwitch", "isDual", "id", "className", "style", "onChange"]);
+    props = Switch_rest(_a, ["children", "label", "preLabel", "isLabelBeforeSwitch", "isDual", "id", "className", "style", "error", "onChange"]);
   // States
   // Refs
   // Callbacks
@@ -24056,7 +24241,9 @@ const Switch = withMemo(function Switch(_a) {
     className: (switch_default()).handle
   })), /*#__PURE__*/external_react_.createElement("span", {
     className: (switch_default()).label
-  }, label)));
+  }, label), /*#__PURE__*/external_react_.createElement(FormError, {
+    error: error
+  })));
 }, (switch_default()));
 ;// CONCATENATED MODULE: ./src/Components/FormElements/Controller/SwitchController.ts
 
@@ -24148,53 +24335,6 @@ const Textarea = withForwardRef(function Textarea(_a, ref) {
 
 
 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;
-};
-
-
-
-
-
-
-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) {
@@ -24609,6 +24749,20 @@ function useDelayed(callback, dependencies, delay = 100, maxDelay = undefined) {
   const maxDelayTimeout = (0,external_react_.useRef)();
   return func;
 }
+;// CONCATENATED MODULE: ./src/Components/Hooks/useDelayedEffect.ts
+
+function useDelayedEffect(effect, dependencies, delay = 100) {
+  (0,external_react_.useEffect)(() => {
+    let cleanup;
+    let timeout = setTimeout(() => {
+      cleanup = effect();
+    }, delay);
+    return () => {
+      clearTimeout(timeout);
+      cleanup === null || cleanup === void 0 ? void 0 : cleanup();
+    };
+  }, dependencies);
+}
 ;// CONCATENATED MODULE: ./src/Components/Hooks/useDelayedState.ts
 
 
@@ -29118,6 +29272,10 @@ function nonEmptyString(str, other = Characters.NBSP) {
 
 
 
+
+
+
+
 
 
 
@@ -29140,6 +29298,7 @@ exports.Characters = __webpack_exports__.Characters;
 exports.Checkbox = __webpack_exports__.Checkbox;
 exports.Clickable = __webpack_exports__.Clickable;
 exports.ColorInput = __webpack_exports__.ColorInput;
+exports.ColorInputController = __webpack_exports__.ColorInputController;
 exports.ConfirmDialog = __webpack_exports__.ConfirmDialog;
 exports.Container = __webpack_exports__.Container;
 exports.Dialog = __webpack_exports__.Dialog;
@@ -29150,8 +29309,10 @@ exports.DoubleIcon = __webpack_exports__.DoubleIcon;
 exports.DragItem = __webpack_exports__.DragItem;
 exports.DropArea = __webpack_exports__.DropArea;
 exports.FileInput = __webpack_exports__.FileInput;
+exports.FileInputController = __webpack_exports__.FileInputController;
 exports.Flavor = __webpack_exports__.Flavor;
 exports.Flex = __webpack_exports__.Flex;
+exports.FormError = __webpack_exports__.FormError;
 exports.FullScreen = __webpack_exports__.FullScreen;
 exports.Grid = __webpack_exports__.Grid;
 exports.GridItem = __webpack_exports__.GridItem;
@@ -29224,6 +29385,7 @@ exports.useComposedRef = __webpack_exports__.useComposedRef;
 exports.useConfirmDialog = __webpack_exports__.useConfirmDialog;
 exports.useDebounced = __webpack_exports__.useDebounced;
 exports.useDelayed = __webpack_exports__.useDelayed;
+exports.useDelayedEffect = __webpack_exports__.useDelayedEffect;
 exports.useDelayedState = __webpack_exports__.useDelayedState;
 exports.useDialog = __webpack_exports__.useDialog;
 exports.useInViewport = __webpack_exports__.useInViewport;