@ainias42/react-bootstrap-mobile 0.2.1 → 0.2.3

package/dist/bootstrapReactMobile.js

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @ainias42/react-bootstrap-mobile v0.2.0
+ *   @ainias42/react-bootstrap-mobile v0.2.2
  *   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
@@ -1253,13 +1253,14 @@ 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, `.buttonDialog__FKbnS{font-weight:400;max-width:95%;overflow:hidden;min-width:270px}.buttonDialog__FKbnS .title__WvvXx{font-weight:500}.buttonDialog__FKbnS .buttonContainer__e9ZHw{width:100%}.buttonDialog__FKbnS .buttonContainer__e9ZHw .button__HSgul{color:var(--flavor-accent);padding:0 8px}.flat-design .buttonDialog__FKbnS{border-radius:8px;background-color:#f4f4f4;padding-top:16px;color:#1f1f21;font-family:-apple-system,"Helvetica Neue","Helvetica","Arial","Lucida Grande",sans-serif;text-align:center}.flat-design .buttonDialog__FKbnS .title__WvvXx{font-size:17px;padding:0 8px}.flat-design .buttonDialog__FKbnS .message__yLthE{font-size:14px;padding:4px 12px 8px;min-height:36px}.flat-design .buttonDialog__FKbnS .buttonContainer__e9ZHw{display:flex;white-space:nowrap}.flat-design .buttonDialog__FKbnS .buttonContainer__e9ZHw .button__HSgul{flex:1;display:block;border-left:1px solid var(--border-light);border-top:1px solid var(--border-light);text-overflow:ellipsis;letter-spacing:0;vertical-align:middle;font-size:16px;text-align:center;height:44px;line-height:44px;overflow:hidden}.flat-design .buttonDialog__FKbnS .buttonContainer__e9ZHw .button__HSgul:first-child{border-left:none}.material-design .buttonDialog__FKbnS{border-radius:2px;background-color:#fff;padding:22px 0 0;box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.4);color:#31313a;font-family:"Roboto","Noto",sans-serif;text-align:left}.material-design .buttonDialog__FKbnS .title__WvvXx{font-size:20px;padding:0 24px}.material-design .buttonDialog__FKbnS .message__yLthE{font-size:16px;line-height:20px;padding:0 24px;margin:24px 0 10px 0;min-height:0;color:rgba(49,49,58,.85)}.material-design .buttonDialog__FKbnS .buttonContainer__e9ZHw{display:block;padding:0;height:52px;line-height:1}.material-design .buttonDialog__FKbnS .buttonContainer__e9ZHw .button__HSgul{text-transform:uppercase;display:inline-block;width:auto;float:right;border-radius:2px;font-size:14px;font-weight:500;height:36px;line-height:36px;margin:8px 8px 8px 0;min-width:50px}`, "",{"version":3,"sources":["webpack://./src/Components/Dialog/buttonDialog.scss","webpack://./src/scss/_designMixin.scss"],"names":[],"mappings":"AAGA,qBACE,eAAA,CACA,aAAA,CACA,eAAA,CACA,eAAA,CAEA,mCACE,eAAA,CAMF,6CACE,UAAA,CAEA,4DACE,0BAAA,CACA,aAAA,CCjBO,kCDsBT,iBAAA,CACA,wBAAA,CACA,gBAAA,CACA,aAAA,CACA,yFAAA,CACA,iBAAA,CAEA,gDACE,cAAA,CACA,aAAA,CAGF,kDACE,cAAA,CACA,oBAAA,CACA,eAAA,CAGF,0DACE,YAAA,CACA,kBAAA,CAEA,yEACE,MAAA,CACA,aAAA,CACA,yCAAA,CACA,wCAAA,CACA,sBAAA,CACA,gBAAA,CACA,qBAAA,CACA,cAAA,CACA,iBAAA,CACA,WAAA,CACA,gBAAA,CACA,eAAA,CAEA,qFACE,gBAAA,CC3DG,sCDkET,iBAAA,CACA,qBAAA,CACA,gBAAA,CACA,wGAAA,CACA,aAAA,CACA,sCAAA,CACA,eAAA,CAEA,oDACE,cAAA,CACA,cAAA,CAGF,sDACE,cAAA,CACA,gBAAA,CACA,cAAA,CACA,oBAAA,CACA,YAAA,CACA,wBAAA,CAGF,8DACE,aAAA,CACA,SAAA,CACA,WAAA,CACA,aAAA,CAEA,6EACE,wBAAA,CACA,oBAAA,CACA,UAAA,CACA,WAAA,CACA,iBAAA,CACA,cAAA,CACA,eAAA,CACA,WAAA,CACA,gBAAA,CACA,oBAAA,CACA,cAAA","sourcesContent":["@import \"../../scss/variables\";\n@import \"../../scss/designMixin\";\n\n.buttonDialog {\n  font-weight: 400;\n  max-width: 95%;\n  overflow: hidden;\n  min-width: 270px;\n\n  .title {\n    font-weight: 500;\n  }\n\n  .message {\n  }\n\n  .buttonContainer {\n    width: 100%;\n\n    .button {\n      color: var(--flavor-accent);\n      padding: 0 8px;\n    }\n  }\n\n  @include design($flat) {\n    border-radius: 8px;\n    background-color: #f4f4f4;\n    padding-top: 16px;\n    color: #1f1f21;\n    font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;\n    text-align: center;\n\n    .title {\n      font-size: 17px;\n      padding: 0 8px;\n    }\n\n    .message {\n      font-size: 14px;\n      padding: 4px 12px 8px;\n      min-height: 36px;\n    }\n\n    .buttonContainer {\n      display: flex;\n      white-space: nowrap;\n\n      .button {\n        flex: 1;\n        display: block;\n        border-left: 1px solid var(--border-light);\n        border-top: 1px solid var(--border-light);\n        text-overflow: ellipsis;\n        letter-spacing: 0;\n        vertical-align: middle;\n        font-size: 16px;\n        text-align: center;\n        height: 44px;\n        line-height: 44px;\n        overflow: hidden;\n\n        &:first-child {\n          border-left: none;\n        }\n      }\n    }\n  }\n\n  @include design($material) {\n    border-radius: 2px;\n    background-color: #ffffff;\n    padding: 22px 0 0;\n    box-shadow: 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 40%);\n    color: #31313a;\n    font-family: 'Roboto', 'Noto', sans-serif;\n    text-align: left;\n\n    .title {\n      font-size: 20px;\n      padding: 0 24px;\n    }\n\n    .message {\n      font-size: 16px;\n      line-height: 20px;\n      padding: 0 24px;\n      margin: 24px 0 10px 0;\n      min-height: 0;\n      color: rgba(49, 49, 58, .85);\n    }\n\n    .buttonContainer {\n      display: block;\n      padding: 0;\n      height: 52px;\n      line-height: 1;\n\n      .button {\n        text-transform: uppercase;\n        display: inline-block;\n        width: auto;\n        float: right;\n        border-radius: 2px;\n        font-size: 14px;\n        font-weight: 500;\n        height: 36px;\n        line-height: 36px;\n        margin: 8px 8px 8px 0;\n        min-width: 50px;\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, `.buttonDialog__FKbnS{font-weight:400;max-width:95%;overflow:hidden;min-width:270px}.buttonDialog__FKbnS .title__WvvXx{font-weight:500}.buttonDialog__FKbnS .buttonContainer__e9ZHw{width:100%}.buttonDialog__FKbnS .buttonContainer__e9ZHw .button__HSgul{padding:0 8px}.buttonDialog__FKbnS .buttonContainer__e9ZHw .button__HSgul .buttonText__O0SYI.flavor-accent{--text-primary-default-color:var(--flavor-accent)}.buttonDialog__FKbnS .buttonContainer__e9ZHw .button__HSgul .buttonText__O0SYI.flavor-basic{--text-primary-default-color:var(--flavor-basic)}.buttonDialog__FKbnS .buttonContainer__e9ZHw .button__HSgul .buttonText__O0SYI.flavor-destructive{--text-primary-default-color:var(--flavor-destructive)}.buttonDialog__FKbnS .buttonContainer__e9ZHw .button__HSgul .buttonText__O0SYI.flavor-constructive{--text-primary-default-color:var(--flavor-constructive)}.flat-design .buttonDialog__FKbnS{border-radius:8px;background-color:#f4f4f4;padding-top:16px;color:#1f1f21;font-family:-apple-system,"Helvetica Neue","Helvetica","Arial","Lucida Grande",sans-serif;text-align:center}.flat-design .buttonDialog__FKbnS .title__WvvXx{font-size:17px;padding:0 8px}.flat-design .buttonDialog__FKbnS .message__yLthE{font-size:14px;padding:4px 12px 8px;min-height:36px}.flat-design .buttonDialog__FKbnS .buttonContainer__e9ZHw{display:flex;white-space:nowrap}.flat-design .buttonDialog__FKbnS .buttonContainer__e9ZHw .button__HSgul{flex:1;display:block;border-left:1px solid var(--border-light);border-top:1px solid var(--border-light);vertical-align:middle;text-align:center;height:44px;overflow:hidden}.flat-design .buttonDialog__FKbnS .buttonContainer__e9ZHw .button__HSgul .buttonText__O0SYI{line-height:44px;text-overflow:ellipsis;letter-spacing:0;font-size:16px}.flat-design .buttonDialog__FKbnS .buttonContainer__e9ZHw .button__HSgul:first-child{border-left:none}.material-design .buttonDialog__FKbnS{border-radius:2px;background-color:#fff;padding:22px 0 0;box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.4);color:#31313a;font-family:"Roboto","Noto",sans-serif;text-align:left}.material-design .buttonDialog__FKbnS .title__WvvXx{font-size:20px;padding:0 24px}.material-design .buttonDialog__FKbnS .message__yLthE{font-size:16px;line-height:20px;padding:0 24px;margin:24px 0 10px 0;min-height:0;color:rgba(49,49,58,.85)}.material-design .buttonDialog__FKbnS .buttonContainer__e9ZHw{display:block;padding:0;height:52px;line-height:1}.material-design .buttonDialog__FKbnS .buttonContainer__e9ZHw .button__HSgul{text-transform:uppercase;display:inline-block;width:auto;float:right;border-radius:2px;height:36px;margin:8px 8px 8px 0;min-width:50px}.material-design .buttonDialog__FKbnS .buttonContainer__e9ZHw .button__HSgul .buttonText__O0SYI{line-height:36px;font-size:14px;font-weight:500}`, "",{"version":3,"sources":["webpack://./src/Components/Dialog/buttonDialog.scss","webpack://./src/scss/_flavorMixin.scss","webpack://./src/scss/_designMixin.scss"],"names":[],"mappings":"AAIA,qBACE,eAAA,CACA,aAAA,CACA,eAAA,CACA,eAAA,CAEA,mCACE,eAAA,CAMF,6CACE,UAAA,CAEA,4DACE,aAAA,CClBJ,6FACE,iDAAA,CAEF,4FACE,gDAAA,CAEF,kGACE,sDAAA,CAEF,mGACE,uDAAA,CCTS,kCF4BT,iBAAA,CACA,wBAAA,CACA,gBAAA,CACA,aAAA,CACA,yFAAA,CACA,iBAAA,CAEA,gDACE,cAAA,CACA,aAAA,CAGF,kDACE,cAAA,CACA,oBAAA,CACA,eAAA,CAGF,0DACE,YAAA,CACA,kBAAA,CAEA,yEACE,MAAA,CACA,aAAA,CACA,yCAAA,CACA,wCAAA,CACA,qBAAA,CACA,iBAAA,CACA,WAAA,CACA,eAAA,CAEA,4FACE,gBAAA,CACA,sBAAA,CACA,gBAAA,CACA,cAAA,CAGF,qFACE,gBAAA,CEpEG,sCF2ET,iBAAA,CACA,qBAAA,CACA,gBAAA,CACA,wGAAA,CACA,aAAA,CACA,sCAAA,CACA,eAAA,CAEA,oDACE,cAAA,CACA,cAAA,CAGF,sDACE,cAAA,CACA,gBAAA,CACA,cAAA,CACA,oBAAA,CACA,YAAA,CACA,wBAAA,CAGF,8DACE,aAAA,CACA,SAAA,CACA,WAAA,CACA,aAAA,CAEA,6EACE,wBAAA,CACA,oBAAA,CACA,UAAA,CACA,WAAA,CACA,iBAAA,CACA,WAAA,CACA,oBAAA,CACA,cAAA,CAEA,gGACE,gBAAA,CACA,cAAA,CACA,eAAA","sourcesContent":["@import \"../../scss/variables\";\n@import \"../../scss/designMixin\";\n@import \"../../scss/flavorMixin\";\n\n.buttonDialog {\n  font-weight: 400;\n  max-width: 95%;\n  overflow: hidden;\n  min-width: 270px;\n\n  .title {\n    font-weight: 500;\n  }\n\n  .message {\n  }\n\n  .buttonContainer {\n    width: 100%;\n\n    .button {\n      padding: 0 8px;\n\n      .buttonText {\n        @include flavorSelection(--text-primary-default-color);\n\n      }\n\n    }\n  }\n\n  @include design($flat) {\n    border-radius: 8px;\n    background-color: #f4f4f4;\n    padding-top: 16px;\n    color: #1f1f21;\n    font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;\n    text-align: center;\n\n    .title {\n      font-size: 17px;\n      padding: 0 8px;\n    }\n\n    .message {\n      font-size: 14px;\n      padding: 4px 12px 8px;\n      min-height: 36px;\n    }\n\n    .buttonContainer {\n      display: flex;\n      white-space: nowrap;\n\n      .button {\n        flex: 1;\n        display: block;\n        border-left: 1px solid var(--border-light);\n        border-top: 1px solid var(--border-light);\n        vertical-align: middle;\n        text-align: center;\n        height: 44px;\n        overflow: hidden;\n\n        .buttonText {\n          line-height: 44px;\n          text-overflow: ellipsis;\n          letter-spacing: 0;\n          font-size: 16px;\n        }\n\n        &:first-child {\n          border-left: none;\n        }\n      }\n    }\n  }\n\n  @include design($material) {\n    border-radius: 2px;\n    background-color: #ffffff;\n    padding: 22px 0 0;\n    box-shadow: 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 40%);\n    color: #31313a;\n    font-family: 'Roboto', 'Noto', sans-serif;\n    text-align: left;\n\n    .title {\n      font-size: 20px;\n      padding: 0 24px;\n    }\n\n    .message {\n      font-size: 16px;\n      line-height: 20px;\n      padding: 0 24px;\n      margin: 24px 0 10px 0;\n      min-height: 0;\n      color: rgba(49, 49, 58, .85);\n    }\n\n    .buttonContainer {\n      display: block;\n      padding: 0;\n      height: 52px;\n      line-height: 1;\n\n      .button {\n        text-transform: uppercase;\n        display: inline-block;\n        width: auto;\n        float: right;\n        border-radius: 2px;\n        height: 36px;\n        margin: 8px 8px 8px 0;\n        min-width: 50px;\n\n        .buttonText {\n          line-height: 36px;\n          font-size: 14px;\n          font-weight: 500;\n        }\n      }\n    }\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  &:global(.flavor-destructive) {\n    #{$varName}: var(--flavor-destructive);\n  }\n  &:global(.flavor-constructive) {\n    #{$varName}: var(--flavor-constructive);\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 = {
 	"buttonDialog": `buttonDialog__FKbnS`,
 	"title": `title__WvvXx`,
 	"buttonContainer": `buttonContainer__e9ZHw`,
 	"button": `button__HSgul`,
+	"buttonText": `buttonText__O0SYI`,
 	"message": `message__yLthE`
 };
 module.exports = ___CSS_LOADER_EXPORT___;
@@ -1314,7 +1315,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, `.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":""}]);
+___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)}.button__jnst2.flavor-destructive{--button-color:var(--flavor-destructive)}.button__jnst2.flavor-constructive{--button-color:var(--flavor-constructive)}.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,CAEF,kCACE,wCAAA,CAEF,mCACE,yCAAA,CCTS,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  &:global(.flavor-destructive) {\n    #{$varName}: var(--flavor-destructive);\n  }\n  &:global(.flavor-constructive) {\n    #{$varName}: var(--flavor-constructive);\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`,
@@ -10016,6 +10017,7 @@ __webpack_require__.d(__webpack_exports__, {
   Icon: () => (/* reexport */ Icon),
   Image: () => (/* reexport */ ImageMemo),
   InViewport: () => (/* reexport */ InViewportMemo),
+  InfiniteList: () => (/* reexport */ InfiniteList),
   Inline: () => (/* reexport */ InlineMemo),
   InlineBlock: () => (/* reexport */ InlineBlockMemo),
   Input: () => (/* reexport */ Input),
@@ -11013,6 +11015,14 @@ const CardMemo = withMemo(Card, (card_default()));
 // EXTERNAL MODULE: ./src/Components/Dialog/buttonDialog.scss
 var buttonDialog = __webpack_require__(7661);
 var buttonDialog_default = /*#__PURE__*/__webpack_require__.n(buttonDialog);
+;// CONCATENATED MODULE: ./src/Components/Flavor.ts
+var Flavor;
+(function (Flavor) {
+  Flavor["Accent"] = "flavor-accent";
+  Flavor["Basic"] = "flavor-basic";
+  Flavor["Destructive"] = "flavor-destructive";
+  Flavor["Constructive"] = "flavor-constructive";
+})(Flavor || (Flavor = {}));
 ;// CONCATENATED MODULE: ./src/Components/Dialog/ButtonDialog.tsx
 
 
@@ -11021,12 +11031,14 @@ var buttonDialog_default = /*#__PURE__*/__webpack_require__.n(buttonDialog);
 
 
 
+
 function ButtonDialog({
   title,
   message,
   buttons,
   style,
-  className
+  className,
+  extraContent
 }) {
   // Variables
   // Refs
@@ -11039,20 +11051,27 @@ function ButtonDialog({
   return /*#__PURE__*/external_react_.createElement(BlockMemo, {
     className: classnames_default()((buttonDialog_default()).buttonDialog, className),
     style: style
-  }, !!title && /*#__PURE__*/external_react_.createElement(BlockMemo, {
+  }, !!title && /*#__PURE__*/external_react_.createElement(BlockMemo, null, /*#__PURE__*/external_react_.createElement(tmp, {
+    size: TEXT_SIZE.large,
     className: (buttonDialog_default()).title
-  }, /*#__PURE__*/external_react_.createElement(tmp, null, title)), /*#__PURE__*/external_react_.createElement(BlockMemo, {
+  }, title)), /*#__PURE__*/external_react_.createElement(BlockMemo, null, /*#__PURE__*/external_react_.createElement(tmp, {
     className: (buttonDialog_default()).message
-  }, /*#__PURE__*/external_react_.createElement(tmp, null, message)), /*#__PURE__*/external_react_.createElement(BlockMemo, {
+  }, message)), extraContent, /*#__PURE__*/external_react_.createElement(BlockMemo, {
     className: (buttonDialog_default()).buttonContainer
-  }, buttons.map((b, i) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-array-index-key
-  external_react_.createElement(ClickableMemo, {
-    onClick: b.callback,
-    className: (buttonDialog_default()).button,
-    key: i + b.text
-  }, /*#__PURE__*/external_react_.createElement(tmp, null, b.text)))));
+  }, buttons.map((b, i) => {
+    var _a;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      external_react_.createElement(ClickableMemo, {
+        onClick: b.callback,
+        className: classnames_default()((buttonDialog_default()).button),
+        key: i + b.text
+      }, /*#__PURE__*/external_react_.createElement(tmp, {
+        className: classnames_default()((buttonDialog_default()).buttonText, (_a = b.flavor) !== null && _a !== void 0 ? _a : Flavor.Accent)
+      }, b.text))
+    );
+  })));
 }
 // Need ButtonDialogMemo for autocompletion of phpstorm
 const ButtonDialogMemo = withMemo(ButtonDialog, (buttonDialog_default()));
@@ -11094,6 +11113,7 @@ const AlertDialogMemo = withMemo(AlertDialog);
 
 
 
+// TODO Translation
 function ConfirmDialog({
   title,
   message,
@@ -11456,12 +11476,6 @@ const DropArea = withMemo(function DropArea(_a) {
     className: className
   }), children, placeholder));
 });
-;// CONCATENATED MODULE: ./src/Components/Flavor.ts
-var Flavor;
-(function (Flavor) {
-  Flavor["Accent"] = "flavor-accent";
-  Flavor["Basic"] = "flavor-basic";
-})(Flavor || (Flavor = {}));
 // EXTERNAL MODULE: ./src/Components/FormElements/Button/button.scss
 var Button_button = __webpack_require__(2853);
 var button_default = /*#__PURE__*/__webpack_require__.n(Button_button);
@@ -23264,6 +23278,21 @@ function useOnChangeDone(onChangeDone, ref) {
   }, [onChangeDone, usedRef]);
   return usedRef;
 }
+;// CONCATENATED MODULE: ./src/Components/Hooks/useDebounced.ts
+
+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);
+    }
+  }, [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) {
@@ -23285,6 +23314,7 @@ var Input_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 const Input = withForwardRef(function Input(_a, ref) {
   // Variables
   var {
@@ -23350,7 +23380,8 @@ const Input = withForwardRef(function Input(_a, ref) {
     onChangeWithData(e);
   }, [onChangeWithData, onChangeText, otherProps.type]);
   const [onBlur, otherPropsWithoutBlur] = useListenerWithExtractedProps('onBlur', otherPropsWithoutOnchange);
-  const [onChangeDone, otherPropsWithoutData] = useListenerWithExtractedProps('onChangeDone', otherPropsWithoutBlur);
+  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) {
@@ -23380,7 +23411,7 @@ const Input = withForwardRef(function Input(_a, ref) {
         onChange(e);
       }
     }
-  }, [onKeyDown, onChange, otherProps]);
+  }, [onKeyDown, onEnter, otherProps.type, otherProps.step, otherProps.max, otherProps.min, onChange]);
   // Effects
   useOnChangeDone(onChangeDone, innerRef);
   (0,external_react_.useEffect)(() => {
@@ -23619,9 +23650,10 @@ const MultipleFileInput = withMemo(function MultipleImageInput(_a) {
       allowOverride = maxFiles === 1,
       onError,
       showDeleteButton = true,
-      error
+      error,
+      "data-test-id": testId
     } = _a,
-    otherProps = MultipleFileInput_rest(_a, ["className", "style", "value", "label", "mimeTypes", "maxFiles", "maxSizePerFile", "allowOverride", "onError", "showDeleteButton", "error"]);
+    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);
@@ -23639,7 +23671,7 @@ const MultipleFileInput = withMemo(function MultipleImageInput(_a) {
       return fileType === type;
     });
   }, [mimeTypes]);
-  const [onChangeFiles, ...props] = useListenerWithExtractedProps('onChangeFiles', otherProps);
+  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();
@@ -23744,7 +23776,8 @@ const MultipleFileInput = withMemo(function MultipleImageInput(_a) {
   };
   return /*#__PURE__*/external_react_.createElement("span", {
     className: classnames_default()((fileInput_default()).fileInput, className),
-    style: style
+    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, {
@@ -24033,7 +24066,6 @@ var FileInput_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-// TODO use MultipleFileInput internal
 const FileInput = withMemo(function FileInput(_a) {
   // Variables
   var {
@@ -24522,21 +24554,6 @@ function useBreakpointSelect(breakpointValues) {
       return breakpointValues[5];
   }
 }
-;// CONCATENATED MODULE: ./src/Components/Hooks/useDebounced.ts
-
-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);
-    }
-  }, [delay, realCB, shared]);
-}
 ;// CONCATENATED MODULE: ./src/Components/Hooks/useDelayed.ts
 
 function useDelayed(callback, dependencies, delay = 100, maxDelay = undefined) {
@@ -24825,7 +24842,7 @@ function Grid({
   useContainerWidth = false,
   className,
   __allowChildren
-}) {
+}, ref) {
   // Variables
   const appliedStyle = (0,external_react_.useMemo)(() => Object.assign(Object.assign({}, style), {
     '--grid-columns': columns,
@@ -24839,6 +24856,7 @@ function Grid({
   // Other
   // Render Functions
   return /*#__PURE__*/external_react_.createElement(BlockMemo, {
+    ref: ref,
     style: appliedStyle,
     className: classnames_default()((grid_default()).grid, className, {
       [(grid_default()).useContainerWidth]: useContainerWidth
@@ -24847,7 +24865,7 @@ function Grid({
   }, children);
 }
 // Need RowMemo for autocompletion of phpstorm
-const GridMemo = withMemo(Grid, (grid_default()));
+const GridMemo = withForwardRef(Grid, (grid_default()));
 
 ;// CONCATENATED MODULE: ./src/Components/Layout/Grid/GridItem.tsx
 
@@ -25025,6 +25043,270 @@ function ListItem({
 // Need ListItemMemo for autocompletion of phpstorm
 const ListItemMemo = withMemo(ListItem);
 
+;// CONCATENATED MODULE: ./node_modules/react-window-infinite-loader/dist/index.esm.js
+
+
+function isInteger(value) {
+  return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
+}
+
+function isRangeVisible(_ref) {
+  var lastRenderedStartIndex = _ref.lastRenderedStartIndex,
+      lastRenderedStopIndex = _ref.lastRenderedStopIndex,
+      startIndex = _ref.startIndex,
+      stopIndex = _ref.stopIndex;
+
+  return !(startIndex > lastRenderedStopIndex || stopIndex < lastRenderedStartIndex);
+}
+
+function scanForUnloadedRanges(_ref) {
+  var isItemLoaded = _ref.isItemLoaded,
+      itemCount = _ref.itemCount,
+      minimumBatchSize = _ref.minimumBatchSize,
+      startIndex = _ref.startIndex,
+      stopIndex = _ref.stopIndex;
+
+  var unloadedRanges = [];
+
+  var rangeStartIndex = null;
+  var rangeStopIndex = null;
+
+  for (var _index = startIndex; _index <= stopIndex; _index++) {
+    var loaded = isItemLoaded(_index);
+
+    if (!loaded) {
+      rangeStopIndex = _index;
+      if (rangeStartIndex === null) {
+        rangeStartIndex = _index;
+      }
+    } else if (rangeStopIndex !== null) {
+      unloadedRanges.push(rangeStartIndex, rangeStopIndex);
+
+      rangeStartIndex = rangeStopIndex = null;
+    }
+  }
+
+  // If :rangeStopIndex is not null it means we haven't ran out of unloaded rows.
+  // Scan forward to try filling our :minimumBatchSize.
+  if (rangeStopIndex !== null) {
+    var potentialStopIndex = Math.min(Math.max(rangeStopIndex, rangeStartIndex + minimumBatchSize - 1), itemCount - 1);
+
+    for (var _index2 = rangeStopIndex + 1; _index2 <= potentialStopIndex; _index2++) {
+      if (!isItemLoaded(_index2)) {
+        rangeStopIndex = _index2;
+      } else {
+        break;
+      }
+    }
+
+    unloadedRanges.push(rangeStartIndex, rangeStopIndex);
+  }
+
+  // Check to see if our first range ended prematurely.
+  // In this case we should scan backwards to try filling our :minimumBatchSize.
+  if (unloadedRanges.length) {
+    while (unloadedRanges[1] - unloadedRanges[0] + 1 < minimumBatchSize && unloadedRanges[0] > 0) {
+      var _index3 = unloadedRanges[0] - 1;
+
+      if (!isItemLoaded(_index3)) {
+        unloadedRanges[0] = _index3;
+      } else {
+        break;
+      }
+    }
+  }
+
+  return unloadedRanges;
+}
+
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+
+var createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
+
+var inherits = function (subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+};
+
+var possibleConstructorReturn = function (self, call) {
+  if (!self) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+};
+
+var InfiniteLoader = function (_PureComponent) {
+  inherits(InfiniteLoader, _PureComponent);
+
+  function InfiniteLoader() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    classCallCheck(this, InfiniteLoader);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = InfiniteLoader.__proto__ || Object.getPrototypeOf(InfiniteLoader)).call.apply(_ref, [this].concat(args))), _this), _this._lastRenderedStartIndex = -1, _this._lastRenderedStopIndex = -1, _this._memoizedUnloadedRanges = [], _this._onItemsRendered = function (_ref2) {
+      var visibleStartIndex = _ref2.visibleStartIndex,
+          visibleStopIndex = _ref2.visibleStopIndex;
+
+      if (false) {}
+
+      _this._lastRenderedStartIndex = visibleStartIndex;
+      _this._lastRenderedStopIndex = visibleStopIndex;
+
+      _this._ensureRowsLoaded(visibleStartIndex, visibleStopIndex);
+    }, _this._setRef = function (listRef) {
+      _this._listRef = listRef;
+    }, _temp), possibleConstructorReturn(_this, _ret);
+  }
+
+  createClass(InfiniteLoader, [{
+    key: 'resetloadMoreItemsCache',
+    value: function resetloadMoreItemsCache() {
+      var autoReload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+      this._memoizedUnloadedRanges = [];
+
+      if (autoReload) {
+        this._ensureRowsLoaded(this._lastRenderedStartIndex, this._lastRenderedStopIndex);
+      }
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (false) {}
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var children = this.props.children;
+
+
+      return children({
+        onItemsRendered: this._onItemsRendered,
+        ref: this._setRef
+      });
+    }
+  }, {
+    key: '_ensureRowsLoaded',
+    value: function _ensureRowsLoaded(startIndex, stopIndex) {
+      var _props = this.props,
+          isItemLoaded = _props.isItemLoaded,
+          itemCount = _props.itemCount,
+          _props$minimumBatchSi = _props.minimumBatchSize,
+          minimumBatchSize = _props$minimumBatchSi === undefined ? 10 : _props$minimumBatchSi,
+          _props$threshold = _props.threshold,
+          threshold = _props$threshold === undefined ? 15 : _props$threshold;
+
+
+      var unloadedRanges = scanForUnloadedRanges({
+        isItemLoaded: isItemLoaded,
+        itemCount: itemCount,
+        minimumBatchSize: minimumBatchSize,
+        startIndex: Math.max(0, startIndex - threshold),
+        stopIndex: Math.min(itemCount - 1, stopIndex + threshold)
+      });
+
+      // Avoid calling load-rows unless range has changed.
+      // This shouldn't be strictly necessary, but is maybe nice to do.
+      if (this._memoizedUnloadedRanges.length !== unloadedRanges.length || this._memoizedUnloadedRanges.some(function (startOrStop, index) {
+        return unloadedRanges[index] !== startOrStop;
+      })) {
+        this._memoizedUnloadedRanges = unloadedRanges;
+        this._loadUnloadedRanges(unloadedRanges);
+      }
+    }
+  }, {
+    key: '_loadUnloadedRanges',
+    value: function _loadUnloadedRanges(unloadedRanges) {
+      var _this2 = this;
+
+      // loadMoreRows was renamed to loadMoreItems in v1.0.3; will be removed in v2.0
+      var loadMoreItems = this.props.loadMoreItems || this.props.loadMoreRows;
+
+      var _loop = function _loop(i) {
+        var startIndex = unloadedRanges[i];
+        var stopIndex = unloadedRanges[i + 1];
+        var promise = loadMoreItems(startIndex, stopIndex);
+        if (promise != null) {
+          promise.then(function () {
+            // Refresh the visible rows if any of them have just been loaded.
+            // Otherwise they will remain in their unloaded visual state.
+            if (isRangeVisible({
+              lastRenderedStartIndex: _this2._lastRenderedStartIndex,
+              lastRenderedStopIndex: _this2._lastRenderedStopIndex,
+              startIndex: startIndex,
+              stopIndex: stopIndex
+            })) {
+              // Handle an unmount while promises are still in flight.
+              if (_this2._listRef == null) {
+                return;
+              }
+
+              // Resize cached row sizes for VariableSizeList,
+              // otherwise just re-render the list.
+              if (typeof _this2._listRef.resetAfterIndex === 'function') {
+                _this2._listRef.resetAfterIndex(startIndex, true);
+              } else {
+                // HACK reset temporarily cached item styles to force PureComponent to re-render.
+                // This is pretty gross, but I'm okay with it for now.
+                // Don't judge me.
+                if (typeof _this2._listRef._getItemStyleCache === 'function') {
+                  _this2._listRef._getItemStyleCache(-1);
+                }
+                _this2._listRef.forceUpdate();
+              }
+            }
+          });
+        }
+      };
+
+      for (var i = 0; i < unloadedRanges.length; i += 2) {
+        _loop(i);
+      }
+    }
+  }]);
+  return InfiniteLoader;
+}(external_react_.PureComponent);
+
+/* harmony default export */ const index_esm = (InfiniteLoader);
+
 // EXTERNAL MODULE: ./src/Components/List/list.scss
 var list = __webpack_require__(2477);
 var list_default = /*#__PURE__*/__webpack_require__.n(list);
@@ -27500,13 +27782,15 @@ const SizeCalculatorMemo = withMemo(SizeCalculator);
 
 
 
-const List = withMemo(function List({
+const List = withForwardRef(function List({
   items,
   renderItem,
   itemHeight: initialItemHeight = 0,
   className,
-  style
-}) {
+  style,
+  onItemsRendered,
+  autoSizeClassName
+}, ref) {
   // Variables
   // States
   const [itemHeight, setItemHeight] = (0,external_react_.useState)(initialItemHeight);
@@ -27520,7 +27804,9 @@ const List = withMemo(function List({
   // Effects
   // Other
   // Render Functions
-  return /*#__PURE__*/external_react_.createElement(AutoSizer, null, ({
+  return /*#__PURE__*/external_react_.createElement(AutoSizer, {
+    className: autoSizeClassName
+  }, ({
     height,
     width
   }) => {
@@ -27528,12 +27814,16 @@ const List = withMemo(function List({
       onSize: setHeight,
       absolute: true
     }, renderItem(items[0], {
+      visibility: 'hidden',
+      pointerEvents: 'none',
       position: 'relative',
       top: '0px',
       left: '0px',
       width: '100%',
       zIndex: -1
     }, 0)), height !== undefined && width !== undefined && /*#__PURE__*/external_react_.createElement(FixedSizeList, {
+      onItemsRendered: onItemsRendered,
+      ref: ref,
       height: height,
       itemCount: items.length,
       width: width,
@@ -27544,6 +27834,87 @@ const List = withMemo(function List({
     }, renderItemInner));
   });
 }, (list_default()));
+;// CONCATENATED MODULE: ./src/Components/List/InfiniteList.tsx
+var InfiniteList_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());
+  });
+};
+
+
+
+
+const InfiniteList = withMemo(function InfiniteList({
+  renderItem,
+  itemHeight,
+  items,
+  renderBefore,
+  keyExtractor,
+  hasNextPage,
+  loadNextPage,
+  style,
+  className
+}) {
+  // Refs
+  // States/Variables/Selectors
+  const [isPageLoading, setIsPageLoading] = (0,external_react_.useState)(false);
+  // Dispatch
+  // Callbacks
+  const isItemLoaded = (0,external_react_.useCallback)(index => !hasNextPage || index < items.length, [hasNextPage, items]);
+  const loadMore = (0,external_react_.useCallback)(() => InfiniteList_awaiter(this, void 0, void 0, function* () {
+    if (!isPageLoading) {
+      setIsPageLoading(true);
+      try {
+        loadNextPage();
+      } finally {
+        setIsPageLoading(false);
+      }
+    }
+  }), [isPageLoading, loadNextPage]);
+  // Effects
+  // Other
+  // RenderFunctions
+  return /*#__PURE__*/external_react_default().createElement(index_esm, {
+    isItemLoaded: isItemLoaded,
+    loadMoreItems: loadMore,
+    itemCount: hasNextPage ? items.length + 1 : items.length
+  }, ({
+    onItemsRendered,
+    ref
+  }) => /*#__PURE__*/external_react_default().createElement(List, {
+    items: items,
+    renderItem: renderItem,
+    style: style,
+    className: className,
+    itemHeight: itemHeight,
+    renderBefore: renderBefore,
+    keyExtractor: keyExtractor,
+    ref: ref,
+    onItemsRendered: onItemsRendered
+  }));
+});
 ;// CONCATENATED MODULE: ./src/Components/Menu/HoverMenu.tsx
 
 
@@ -28693,6 +29064,7 @@ function nonEmptyString(str, other = Characters.NBSP) {
 
 
 
+
 
 
 })();
@@ -28735,6 +29107,7 @@ exports.HoverMenu = __webpack_exports__.HoverMenu;
 exports.Icon = __webpack_exports__.Icon;
 exports.Image = __webpack_exports__.Image;
 exports.InViewport = __webpack_exports__.InViewport;
+exports.InfiniteList = __webpack_exports__.InfiniteList;
 exports.Inline = __webpack_exports__.Inline;
 exports.InlineBlock = __webpack_exports__.InlineBlock;
 exports.Input = __webpack_exports__.Input;