@sebgroup/green-react 1.0.0-beta.3 → 1.0.0-beta.34

package/{react.esm.js → index.esm.js}

@@ -1,6 +1,6 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { ModalRole, randomId } from '@sebgroup/extract';
-import { useState, useEffect, useMemo, useRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useState, useLayoutEffect, useEffect, useMemo, useRef } from 'react';
+import { randomId, validateClassName, createStepper, createDropdown, dropdownValues } from '@sebgroup/extract';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -10,7 +10,7 @@ var check = function (it) {
 
 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
 var global$r =
-  // eslint-disable-next-line es/no-global-this -- safe
+  // eslint-disable-next-line es-x/no-global-this -- safe
   check(typeof globalThis == 'object' && globalThis) ||
   check(typeof window == 'object' && window) ||
   // eslint-disable-next-line no-restricted-globals -- safe
@@ -21,7 +21,7 @@ var global$r =
 
 var objectGetOwnPropertyDescriptor = {};
 
-var fails$9 = function (exec) {
+var fails$a = function (exec) {
   try {
     return !!exec();
   } catch (error) {
@@ -29,24 +29,35 @@ var fails$9 = function (exec) {
   }
 };
 
-var fails$8 = fails$9;
+var fails$9 = fails$a;
 
 // Detect IE8's incomplete defineProperty implementation
-var descriptors = !fails$8(function () {
-  // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+var descriptors = !fails$9(function () {
+  // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
   return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7;
 });
 
+var fails$8 = fails$a;
+
+var functionBindNative = !fails$8(function () {
+  // eslint-disable-next-line es-x/no-function-prototype-bind -- safe
+  var test = (function () { /* empty */ }).bind();
+  // eslint-disable-next-line no-prototype-builtins -- safe
+  return typeof test != 'function' || test.hasOwnProperty('prototype');
+});
+
+var NATIVE_BIND$1 = functionBindNative;
+
 var call$6 = Function.prototype.call;
 
-var functionCall = call$6.bind ? call$6.bind(call$6) : function () {
+var functionCall = NATIVE_BIND$1 ? call$6.bind(call$6) : function () {
   return call$6.apply(call$6, arguments);
 };
 
 var objectPropertyIsEnumerable = {};
 
 var $propertyIsEnumerable = {}.propertyIsEnumerable;
-// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
 var getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
 
 // Nashorn ~ JDK8 bug
@@ -68,35 +79,37 @@ var createPropertyDescriptor$3 = function (bitmap, value) {
   };
 };
 
+var NATIVE_BIND = functionBindNative;
+
 var FunctionPrototype$1 = Function.prototype;
 var bind = FunctionPrototype$1.bind;
 var call$5 = FunctionPrototype$1.call;
-var callBind = bind && bind.bind(call$5);
+var uncurryThis$c = NATIVE_BIND && bind.bind(call$5, call$5);
 
-var functionUncurryThis = bind ? function (fn) {
-  return fn && callBind(call$5, fn);
+var functionUncurryThis = NATIVE_BIND ? function (fn) {
+  return fn && uncurryThis$c(fn);
 } : function (fn) {
   return fn && function () {
     return call$5.apply(fn, arguments);
   };
 };
 
-var uncurryThis$c = functionUncurryThis;
+var uncurryThis$b = functionUncurryThis;
 
-var toString$4 = uncurryThis$c({}.toString);
-var stringSlice = uncurryThis$c(''.slice);
+var toString$3 = uncurryThis$b({}.toString);
+var stringSlice$1 = uncurryThis$b(''.slice);
 
 var classofRaw$1 = function (it) {
-  return stringSlice(toString$4(it), 8, -1);
+  return stringSlice$1(toString$3(it), 8, -1);
 };
 
 var global$q = global$r;
-var uncurryThis$b = functionUncurryThis;
-var fails$7 = fails$9;
+var uncurryThis$a = functionUncurryThis;
+var fails$7 = fails$a;
 var classof$2 = classofRaw$1;
 
 var Object$5 = global$q.Object;
-var split = uncurryThis$b(''.split);
+var split = uncurryThis$a(''.split);
 
 // fallback for non-array-like ES3 and non-enumerable old V8 strings
 var indexedObject = fails$7(function () {
@@ -113,45 +126,45 @@ var TypeError$8 = global$p.TypeError;
 
 // `RequireObjectCoercible` abstract operation
 // https://tc39.es/ecma262/#sec-requireobjectcoercible
-var requireObjectCoercible$3 = function (it) {
+var requireObjectCoercible$2 = function (it) {
   if (it == undefined) throw TypeError$8("Can't call method on " + it);
   return it;
 };
 
 // toObject with fallback for non-array-like ES3 strings
 var IndexedObject$1 = indexedObject;
-var requireObjectCoercible$2 = requireObjectCoercible$3;
+var requireObjectCoercible$1 = requireObjectCoercible$2;
 
 var toIndexedObject$5 = function (it) {
-  return IndexedObject$1(requireObjectCoercible$2(it));
+  return IndexedObject$1(requireObjectCoercible$1(it));
 };
 
 // `IsCallable` abstract operation
 // https://tc39.es/ecma262/#sec-iscallable
-var isCallable$e = function (argument) {
+var isCallable$f = function (argument) {
   return typeof argument == 'function';
 };
 
-var isCallable$d = isCallable$e;
+var isCallable$e = isCallable$f;
 
 var isObject$5 = function (it) {
-  return typeof it == 'object' ? it !== null : isCallable$d(it);
+  return typeof it == 'object' ? it !== null : isCallable$e(it);
 };
 
 var global$o = global$r;
-var isCallable$c = isCallable$e;
+var isCallable$d = isCallable$f;
 
 var aFunction = function (argument) {
-  return isCallable$c(argument) ? argument : undefined;
+  return isCallable$d(argument) ? argument : undefined;
 };
 
 var getBuiltIn$4 = function (namespace, method) {
   return arguments.length < 2 ? aFunction(global$o[namespace]) : global$o[namespace] && global$o[namespace][method];
 };
 
-var uncurryThis$a = functionUncurryThis;
+var uncurryThis$9 = functionUncurryThis;
 
-var objectIsPrototypeOf = uncurryThis$a({}.isPrototypeOf);
+var objectIsPrototypeOf = uncurryThis$9({}.isPrototypeOf);
 
 var getBuiltIn$3 = getBuiltIn$4;
 
@@ -185,12 +198,12 @@ if (!version && userAgent) {
 
 var engineV8Version = version;
 
-/* eslint-disable es/no-symbol -- required for testing */
+/* eslint-disable es-x/no-symbol -- required for testing */
 
 var V8_VERSION = engineV8Version;
-var fails$6 = fails$9;
+var fails$6 = fails$a;
 
-// eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
+// eslint-disable-next-line es-x/no-object-getownpropertysymbols -- required for testing
 var nativeSymbol = !!Object.getOwnPropertySymbols && !fails$6(function () {
   var symbol = Symbol();
   // Chrome 38 Symbol has incorrect toString conversion
@@ -200,18 +213,18 @@ var nativeSymbol = !!Object.getOwnPropertySymbols && !fails$6(function () {
     !Symbol.sham && V8_VERSION && V8_VERSION < 41;
 });
 
-/* eslint-disable es/no-symbol -- required for testing */
+/* eslint-disable es-x/no-symbol -- required for testing */
 
-var NATIVE_SYMBOL$1 = nativeSymbol;
+var NATIVE_SYMBOL$2 = nativeSymbol;
 
-var useSymbolAsUid = NATIVE_SYMBOL$1
+var useSymbolAsUid = NATIVE_SYMBOL$2
   && !Symbol.sham
   && typeof Symbol.iterator == 'symbol';
 
 var global$m = global$r;
 var getBuiltIn$2 = getBuiltIn$4;
-var isCallable$b = isCallable$e;
-var isPrototypeOf = objectIsPrototypeOf;
+var isCallable$c = isCallable$f;
+var isPrototypeOf$1 = objectIsPrototypeOf;
 var USE_SYMBOL_AS_UID$1 = useSymbolAsUid;
 
 var Object$4 = global$m.Object;
@@ -220,7 +233,7 @@ var isSymbol$2 = USE_SYMBOL_AS_UID$1 ? function (it) {
   return typeof it == 'symbol';
 } : function (it) {
   var $Symbol = getBuiltIn$2('Symbol');
-  return isCallable$b($Symbol) && isPrototypeOf($Symbol.prototype, Object$4(it));
+  return isCallable$c($Symbol) && isPrototypeOf$1($Symbol.prototype, Object$4(it));
 };
 
 var global$l = global$r;
@@ -236,14 +249,14 @@ var tryToString$1 = function (argument) {
 };
 
 var global$k = global$r;
-var isCallable$a = isCallable$e;
+var isCallable$b = isCallable$f;
 var tryToString = tryToString$1;
 
 var TypeError$7 = global$k.TypeError;
 
 // `Assert: IsCallable(argument) is true`
 var aCallable$1 = function (argument) {
-  if (isCallable$a(argument)) return argument;
+  if (isCallable$b(argument)) return argument;
   throw TypeError$7(tryToString(argument) + ' is not a function');
 };
 
@@ -258,7 +271,7 @@ var getMethod$1 = function (V, P) {
 
 var global$j = global$r;
 var call$4 = functionCall;
-var isCallable$9 = isCallable$e;
+var isCallable$a = isCallable$f;
 var isObject$4 = isObject$5;
 
 var TypeError$6 = global$j.TypeError;
@@ -267,9 +280,9 @@ var TypeError$6 = global$j.TypeError;
 // https://tc39.es/ecma262/#sec-ordinarytoprimitive
 var ordinaryToPrimitive$1 = function (input, pref) {
   var fn, val;
-  if (pref === 'string' && isCallable$9(fn = input.toString) && !isObject$4(val = call$4(fn, input))) return val;
-  if (isCallable$9(fn = input.valueOf) && !isObject$4(val = call$4(fn, input))) return val;
-  if (pref !== 'string' && isCallable$9(fn = input.toString) && !isObject$4(val = call$4(fn, input))) return val;
+  if (pref === 'string' && isCallable$a(fn = input.toString) && !isObject$4(val = call$4(fn, input))) return val;
+  if (isCallable$a(fn = input.valueOf) && !isObject$4(val = call$4(fn, input))) return val;
+  if (pref !== 'string' && isCallable$a(fn = input.toString) && !isObject$4(val = call$4(fn, input))) return val;
   throw TypeError$6("Can't convert object to primitive value");
 };
 
@@ -277,12 +290,12 @@ var shared$3 = {exports: {}};
 
 var global$i = global$r;
 
-// eslint-disable-next-line es/no-object-defineproperty -- safe
-var defineProperty$2 = Object.defineProperty;
+// eslint-disable-next-line es-x/no-object-defineproperty -- safe
+var defineProperty$4 = Object.defineProperty;
 
 var setGlobal$3 = function (key, value) {
   try {
-    defineProperty$2(global$i, key, { value: value, configurable: true, writable: true });
+    defineProperty$4(global$i, key, { value: value, configurable: true, writable: true });
   } catch (error) {
     global$i[key] = value;
   } return value;
@@ -301,60 +314,63 @@ var store$2 = sharedStore;
 (shared$3.exports = function (key, value) {
   return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.19.0',
+  version: '3.22.2',
   mode: 'global',
-  copyright: '© 2021 Denis Pushkarev (zloirock.ru)'
+  copyright: '© 2014-2022 Denis Pushkarev (zloirock.ru)',
+  license: 'https://github.com/zloirock/core-js/blob/v3.22.2/LICENSE',
+  source: 'https://github.com/zloirock/core-js'
 });
 
 var global$g = global$r;
-var requireObjectCoercible$1 = requireObjectCoercible$3;
+var requireObjectCoercible = requireObjectCoercible$2;
 
 var Object$3 = global$g.Object;
 
 // `ToObject` abstract operation
 // https://tc39.es/ecma262/#sec-toobject
 var toObject$3 = function (argument) {
-  return Object$3(requireObjectCoercible$1(argument));
+  return Object$3(requireObjectCoercible(argument));
 };
 
-var uncurryThis$9 = functionUncurryThis;
+var uncurryThis$8 = functionUncurryThis;
 var toObject$2 = toObject$3;
 
-var hasOwnProperty = uncurryThis$9({}.hasOwnProperty);
+var hasOwnProperty = uncurryThis$8({}.hasOwnProperty);
 
 // `HasOwnProperty` abstract operation
 // https://tc39.es/ecma262/#sec-hasownproperty
+// eslint-disable-next-line es-x/no-object-hasown -- safe
 var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
   return hasOwnProperty(toObject$2(it), key);
 };
 
-var uncurryThis$8 = functionUncurryThis;
+var uncurryThis$7 = functionUncurryThis;
 
 var id = 0;
 var postfix = Math.random();
-var toString$3 = uncurryThis$8(1.0.toString);
+var toString$2 = uncurryThis$7(1.0.toString);
 
 var uid$2 = function (key) {
-  return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$3(++id + postfix, 36);
+  return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$2(++id + postfix, 36);
 };
 
 var global$f = global$r;
 var shared$2 = shared$3.exports;
-var hasOwn$8 = hasOwnProperty_1;
+var hasOwn$9 = hasOwnProperty_1;
 var uid$1 = uid$2;
-var NATIVE_SYMBOL = nativeSymbol;
+var NATIVE_SYMBOL$1 = nativeSymbol;
 var USE_SYMBOL_AS_UID = useSymbolAsUid;
 
 var WellKnownSymbolsStore = shared$2('wks');
-var Symbol$2 = global$f.Symbol;
-var symbolFor = Symbol$2 && Symbol$2['for'];
-var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$2 : Symbol$2 && Symbol$2.withoutSetter || uid$1;
+var Symbol$1 = global$f.Symbol;
+var symbolFor = Symbol$1 && Symbol$1['for'];
+var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || uid$1;
 
 var wellKnownSymbol$8 = function (name) {
-  if (!hasOwn$8(WellKnownSymbolsStore, name) || !(NATIVE_SYMBOL || typeof WellKnownSymbolsStore[name] == 'string')) {
+  if (!hasOwn$9(WellKnownSymbolsStore, name) || !(NATIVE_SYMBOL$1 || typeof WellKnownSymbolsStore[name] == 'string')) {
     var description = 'Symbol.' + name;
-    if (NATIVE_SYMBOL && hasOwn$8(Symbol$2, name)) {
-      WellKnownSymbolsStore[name] = Symbol$2[name];
+    if (NATIVE_SYMBOL$1 && hasOwn$9(Symbol$1, name)) {
+      WellKnownSymbolsStore[name] = Symbol$1[name];
     } else if (USE_SYMBOL_AS_UID && symbolFor) {
       WellKnownSymbolsStore[name] = symbolFor(description);
     } else {
@@ -411,43 +427,56 @@ var documentCreateElement$2 = function (it) {
   return EXISTS$1 ? document$1.createElement(it) : {};
 };
 
-var DESCRIPTORS$6 = descriptors;
-var fails$5 = fails$9;
+var DESCRIPTORS$9 = descriptors;
+var fails$5 = fails$a;
 var createElement = documentCreateElement$2;
 
-// Thank's IE8 for his funny defineProperty
-var ie8DomDefine = !DESCRIPTORS$6 && !fails$5(function () {
-  // eslint-disable-next-line es/no-object-defineproperty -- requied for testing
+// Thanks to IE8 for its funny defineProperty
+var ie8DomDefine = !DESCRIPTORS$9 && !fails$5(function () {
+  // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
   return Object.defineProperty(createElement('div'), 'a', {
     get: function () { return 7; }
   }).a != 7;
 });
 
-var DESCRIPTORS$5 = descriptors;
+var DESCRIPTORS$8 = descriptors;
 var call$2 = functionCall;
 var propertyIsEnumerableModule$1 = objectPropertyIsEnumerable;
 var createPropertyDescriptor$2 = createPropertyDescriptor$3;
 var toIndexedObject$4 = toIndexedObject$5;
 var toPropertyKey$1 = toPropertyKey$2;
-var hasOwn$7 = hasOwnProperty_1;
+var hasOwn$8 = hasOwnProperty_1;
 var IE8_DOM_DEFINE$1 = ie8DomDefine;
 
-// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
-var $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
+var $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
 
 // `Object.getOwnPropertyDescriptor` method
 // https://tc39.es/ecma262/#sec-object.getownpropertydescriptor
-objectGetOwnPropertyDescriptor.f = DESCRIPTORS$5 ? $getOwnPropertyDescriptor : function getOwnPropertyDescriptor(O, P) {
+objectGetOwnPropertyDescriptor.f = DESCRIPTORS$8 ? $getOwnPropertyDescriptor$1 : function getOwnPropertyDescriptor(O, P) {
   O = toIndexedObject$4(O);
   P = toPropertyKey$1(P);
   if (IE8_DOM_DEFINE$1) try {
-    return $getOwnPropertyDescriptor(O, P);
+    return $getOwnPropertyDescriptor$1(O, P);
   } catch (error) { /* empty */ }
-  if (hasOwn$7(O, P)) return createPropertyDescriptor$2(!call$2(propertyIsEnumerableModule$1.f, O, P), O[P]);
+  if (hasOwn$8(O, P)) return createPropertyDescriptor$2(!call$2(propertyIsEnumerableModule$1.f, O, P), O[P]);
 };
 
 var objectDefineProperty = {};
 
+var DESCRIPTORS$7 = descriptors;
+var fails$4 = fails$a;
+
+// V8 ~ Chrome 36-
+// https://bugs.chromium.org/p/v8/issues/detail?id=3334
+var v8PrototypeDefineBug = DESCRIPTORS$7 && fails$4(function () {
+  // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
+  return Object.defineProperty(function () { /* empty */ }, 'prototype', {
+    value: 42,
+    writable: false
+  }).prototype != 42;
+});
+
 var global$c = global$r;
 var isObject$1 = isObject$5;
 
@@ -461,18 +490,39 @@ var anObject$5 = function (argument) {
 };
 
 var global$b = global$r;
-var DESCRIPTORS$4 = descriptors;
+var DESCRIPTORS$6 = descriptors;
 var IE8_DOM_DEFINE = ie8DomDefine;
+var V8_PROTOTYPE_DEFINE_BUG$1 = v8PrototypeDefineBug;
 var anObject$4 = anObject$5;
 var toPropertyKey = toPropertyKey$2;
 
 var TypeError$3 = global$b.TypeError;
-// eslint-disable-next-line es/no-object-defineproperty -- safe
+// eslint-disable-next-line es-x/no-object-defineproperty -- safe
 var $defineProperty = Object.defineProperty;
+// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
+var $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+var ENUMERABLE = 'enumerable';
+var CONFIGURABLE$1 = 'configurable';
+var WRITABLE = 'writable';
 
 // `Object.defineProperty` method
 // https://tc39.es/ecma262/#sec-object.defineproperty
-objectDefineProperty.f = DESCRIPTORS$4 ? $defineProperty : function defineProperty(O, P, Attributes) {
+objectDefineProperty.f = DESCRIPTORS$6 ? V8_PROTOTYPE_DEFINE_BUG$1 ? function defineProperty(O, P, Attributes) {
+  anObject$4(O);
+  P = toPropertyKey(P);
+  anObject$4(Attributes);
+  if (typeof O === 'function' && P === 'prototype' && 'value' in Attributes && WRITABLE in Attributes && !Attributes[WRITABLE]) {
+    var current = $getOwnPropertyDescriptor(O, P);
+    if (current && current[WRITABLE]) {
+      O[P] = Attributes.value;
+      Attributes = {
+        configurable: CONFIGURABLE$1 in Attributes ? Attributes[CONFIGURABLE$1] : current[CONFIGURABLE$1],
+        enumerable: ENUMERABLE in Attributes ? Attributes[ENUMERABLE] : current[ENUMERABLE],
+        writable: false
+      };
+    }
+  } return $defineProperty(O, P, Attributes);
+} : $defineProperty : function defineProperty(O, P, Attributes) {
   anObject$4(O);
   P = toPropertyKey(P);
   anObject$4(Attributes);
@@ -484,11 +534,11 @@ objectDefineProperty.f = DESCRIPTORS$4 ? $defineProperty : function defineProper
   return O;
 };
 
-var DESCRIPTORS$3 = descriptors;
+var DESCRIPTORS$5 = descriptors;
 var definePropertyModule$3 = objectDefineProperty;
 var createPropertyDescriptor$1 = createPropertyDescriptor$3;
 
-var createNonEnumerableProperty$5 = DESCRIPTORS$3 ? function (object, key, value) {
+var createNonEnumerableProperty$5 = DESCRIPTORS$5 ? function (object, key, value) {
   return definePropertyModule$3.f(object, key, createPropertyDescriptor$1(1, value));
 } : function (object, key, value) {
   object[key] = value;
@@ -497,14 +547,14 @@ var createNonEnumerableProperty$5 = DESCRIPTORS$3 ? function (object, key, value
 
 var redefine$3 = {exports: {}};
 
-var uncurryThis$7 = functionUncurryThis;
-var isCallable$8 = isCallable$e;
+var uncurryThis$6 = functionUncurryThis;
+var isCallable$9 = isCallable$f;
 var store$1 = sharedStore;
 
-var functionToString = uncurryThis$7(Function.toString);
+var functionToString = uncurryThis$6(Function.toString);
 
 // this helper broken in `core-js@3.4.1-3.4.4`, so we can't use `shared` helper
-if (!isCallable$8(store$1.inspectSource)) {
+if (!isCallable$9(store$1.inspectSource)) {
   store$1.inspectSource = function (it) {
     return functionToString(it);
   };
@@ -513,12 +563,12 @@ if (!isCallable$8(store$1.inspectSource)) {
 var inspectSource$2 = store$1.inspectSource;
 
 var global$a = global$r;
-var isCallable$7 = isCallable$e;
+var isCallable$8 = isCallable$f;
 var inspectSource$1 = inspectSource$2;
 
 var WeakMap$1 = global$a.WeakMap;
 
-var nativeWeakMap = isCallable$7(WeakMap$1) && /native code/.test(inspectSource$1(WeakMap$1));
+var nativeWeakMap = isCallable$8(WeakMap$1) && /native code/.test(inspectSource$1(WeakMap$1));
 
 var shared$1 = shared$3.exports;
 var uid = uid$2;
@@ -533,10 +583,10 @@ var hiddenKeys$4 = {};
 
 var NATIVE_WEAK_MAP = nativeWeakMap;
 var global$9 = global$r;
-var uncurryThis$6 = functionUncurryThis;
+var uncurryThis$5 = functionUncurryThis;
 var isObject = isObject$5;
 var createNonEnumerableProperty$4 = createNonEnumerableProperty$5;
-var hasOwn$6 = hasOwnProperty_1;
+var hasOwn$7 = hasOwnProperty_1;
 var shared = sharedStore;
 var sharedKey$2 = sharedKey$3;
 var hiddenKeys$3 = hiddenKeys$4;
@@ -561,9 +611,9 @@ var getterFor = function (TYPE) {
 
 if (NATIVE_WEAK_MAP || shared.state) {
   var store = shared.state || (shared.state = new WeakMap());
-  var wmget = uncurryThis$6(store.get);
-  var wmhas = uncurryThis$6(store.has);
-  var wmset = uncurryThis$6(store.set);
+  var wmget = uncurryThis$5(store.get);
+  var wmhas = uncurryThis$5(store.has);
+  var wmset = uncurryThis$5(store.set);
   set = function (it, metadata) {
     if (wmhas(store, it)) throw new TypeError$2(OBJECT_ALREADY_INITIALIZED);
     metadata.facade = it;
@@ -580,16 +630,16 @@ if (NATIVE_WEAK_MAP || shared.state) {
   var STATE = sharedKey$2('state');
   hiddenKeys$3[STATE] = true;
   set = function (it, metadata) {
-    if (hasOwn$6(it, STATE)) throw new TypeError$2(OBJECT_ALREADY_INITIALIZED);
+    if (hasOwn$7(it, STATE)) throw new TypeError$2(OBJECT_ALREADY_INITIALIZED);
     metadata.facade = it;
     createNonEnumerableProperty$4(it, STATE, metadata);
     return metadata;
   };
   get = function (it) {
-    return hasOwn$6(it, STATE) ? it[STATE] : {};
+    return hasOwn$7(it, STATE) ? it[STATE] : {};
   };
   has = function (it) {
-    return hasOwn$6(it, STATE);
+    return hasOwn$7(it, STATE);
   };
 }
 
@@ -601,17 +651,17 @@ var internalState = {
   getterFor: getterFor
 };
 
-var DESCRIPTORS$2 = descriptors;
-var hasOwn$5 = hasOwnProperty_1;
+var DESCRIPTORS$4 = descriptors;
+var hasOwn$6 = hasOwnProperty_1;
 
 var FunctionPrototype = Function.prototype;
-// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
-var getDescriptor = DESCRIPTORS$2 && Object.getOwnPropertyDescriptor;
+// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
+var getDescriptor = DESCRIPTORS$4 && Object.getOwnPropertyDescriptor;
 
-var EXISTS = hasOwn$5(FunctionPrototype, 'name');
+var EXISTS = hasOwn$6(FunctionPrototype, 'name');
 // additional protection from minified / mangled / dropped function names
 var PROPER = EXISTS && (function something() { /* empty */ }).name === 'something';
-var CONFIGURABLE = EXISTS && (!DESCRIPTORS$2 || (DESCRIPTORS$2 && getDescriptor(FunctionPrototype, 'name').configurable));
+var CONFIGURABLE = EXISTS && (!DESCRIPTORS$4 || (DESCRIPTORS$4 && getDescriptor(FunctionPrototype, 'name').configurable));
 
 var functionName = {
   EXISTS: EXISTS,
@@ -620,8 +670,8 @@ var functionName = {
 };
 
 var global$8 = global$r;
-var isCallable$6 = isCallable$e;
-var hasOwn$4 = hasOwnProperty_1;
+var isCallable$7 = isCallable$f;
+var hasOwn$5 = hasOwnProperty_1;
 var createNonEnumerableProperty$3 = createNonEnumerableProperty$5;
 var setGlobal$1 = setGlobal$3;
 var inspectSource = inspectSource$2;
@@ -638,11 +688,11 @@ var TEMPLATE = String(String).split('String');
   var noTargetGet = options ? !!options.noTargetGet : false;
   var name = options && options.name !== undefined ? options.name : key;
   var state;
-  if (isCallable$6(value)) {
+  if (isCallable$7(value)) {
     if (String(name).slice(0, 7) === 'Symbol(') {
       name = '[' + String(name).replace(/^Symbol\(([^)]*)\)/, '$1') + ']';
     }
-    if (!hasOwn$4(value, 'name') || (CONFIGURABLE_FUNCTION_NAME$1 && value.name !== name)) {
+    if (!hasOwn$5(value, 'name') || (CONFIGURABLE_FUNCTION_NAME$1 && value.name !== name)) {
       createNonEnumerableProperty$3(value, 'name', name);
     }
     state = enforceInternalState(value);
@@ -663,7 +713,7 @@ var TEMPLATE = String(String).split('String');
   else createNonEnumerableProperty$3(O, key, value);
 // add fake Function#toString for correct work wrapped methods / constructors with methods like LoDash isNative
 })(Function.prototype, 'toString', function toString() {
-  return isCallable$6(this) && getInternalState$1(this).source || inspectSource(this);
+  return isCallable$7(this) && getInternalState$1(this).source || inspectSource(this);
 });
 
 var objectGetOwnPropertyNames = {};
@@ -715,7 +765,7 @@ var toAbsoluteIndex = toAbsoluteIndex$1;
 var lengthOfArrayLike = lengthOfArrayLike$1;
 
 // `Array.prototype.{ indexOf, includes }` methods implementation
-var createMethod$1 = function (IS_INCLUDES) {
+var createMethod = function (IS_INCLUDES) {
   return function ($this, el, fromIndex) {
     var O = toIndexedObject$3($this);
     var length = lengthOfArrayLike(O);
@@ -737,28 +787,28 @@ var createMethod$1 = function (IS_INCLUDES) {
 var arrayIncludes = {
   // `Array.prototype.includes` method
   // https://tc39.es/ecma262/#sec-array.prototype.includes
-  includes: createMethod$1(true),
+  includes: createMethod(true),
   // `Array.prototype.indexOf` method
   // https://tc39.es/ecma262/#sec-array.prototype.indexof
-  indexOf: createMethod$1(false)
+  indexOf: createMethod(false)
 };
 
-var uncurryThis$5 = functionUncurryThis;
-var hasOwn$3 = hasOwnProperty_1;
+var uncurryThis$4 = functionUncurryThis;
+var hasOwn$4 = hasOwnProperty_1;
 var toIndexedObject$2 = toIndexedObject$5;
 var indexOf = arrayIncludes.indexOf;
 var hiddenKeys$2 = hiddenKeys$4;
 
-var push = uncurryThis$5([].push);
+var push = uncurryThis$4([].push);
 
 var objectKeysInternal = function (object, names) {
   var O = toIndexedObject$2(object);
   var i = 0;
   var result = [];
   var key;
-  for (key in O) !hasOwn$3(hiddenKeys$2, key) && hasOwn$3(O, key) && push(result, key);
+  for (key in O) !hasOwn$4(hiddenKeys$2, key) && hasOwn$4(O, key) && push(result, key);
   // Don't enum bug & hidden keys
-  while (names.length > i) if (hasOwn$3(O, key = names[i++])) {
+  while (names.length > i) if (hasOwn$4(O, key = names[i++])) {
     ~indexOf(result, key) || push(result, key);
   }
   return result;
@@ -782,23 +832,23 @@ var hiddenKeys$1 = enumBugKeys$2.concat('length', 'prototype');
 
 // `Object.getOwnPropertyNames` method
 // https://tc39.es/ecma262/#sec-object.getownpropertynames
-// eslint-disable-next-line es/no-object-getownpropertynames -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertynames -- safe
 objectGetOwnPropertyNames.f = Object.getOwnPropertyNames || function getOwnPropertyNames(O) {
   return internalObjectKeys$1(O, hiddenKeys$1);
 };
 
 var objectGetOwnPropertySymbols = {};
 
-// eslint-disable-next-line es/no-object-getownpropertysymbols -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertysymbols -- safe
 objectGetOwnPropertySymbols.f = Object.getOwnPropertySymbols;
 
 var getBuiltIn$1 = getBuiltIn$4;
-var uncurryThis$4 = functionUncurryThis;
+var uncurryThis$3 = functionUncurryThis;
 var getOwnPropertyNamesModule = objectGetOwnPropertyNames;
 var getOwnPropertySymbolsModule$1 = objectGetOwnPropertySymbols;
 var anObject$3 = anObject$5;
 
-var concat$1 = uncurryThis$4([].concat);
+var concat$1 = uncurryThis$3([].concat);
 
 // all object keys, includes non-enumerable and symbols
 var ownKeys$1 = getBuiltIn$1('Reflect', 'ownKeys') || function ownKeys(it) {
@@ -807,23 +857,25 @@ var ownKeys$1 = getBuiltIn$1('Reflect', 'ownKeys') || function ownKeys(it) {
   return getOwnPropertySymbols ? concat$1(keys, getOwnPropertySymbols(it)) : keys;
 };
 
-var hasOwn$2 = hasOwnProperty_1;
+var hasOwn$3 = hasOwnProperty_1;
 var ownKeys = ownKeys$1;
 var getOwnPropertyDescriptorModule = objectGetOwnPropertyDescriptor;
 var definePropertyModule$2 = objectDefineProperty;
 
-var copyConstructorProperties$1 = function (target, source) {
+var copyConstructorProperties$2 = function (target, source, exceptions) {
   var keys = ownKeys(source);
   var defineProperty = definePropertyModule$2.f;
   var getOwnPropertyDescriptor = getOwnPropertyDescriptorModule.f;
   for (var i = 0; i < keys.length; i++) {
     var key = keys[i];
-    if (!hasOwn$2(target, key)) defineProperty(target, key, getOwnPropertyDescriptor(source, key));
+    if (!hasOwn$3(target, key) && !(exceptions && hasOwn$3(exceptions, key))) {
+      defineProperty(target, key, getOwnPropertyDescriptor(source, key));
+    }
   }
 };
 
-var fails$4 = fails$9;
-var isCallable$5 = isCallable$e;
+var fails$3 = fails$a;
+var isCallable$6 = isCallable$f;
 
 var replacement = /#|\.prototype\./;
 
@@ -831,7 +883,7 @@ var isForced$1 = function (feature, detection) {
   var value = data[normalize(feature)];
   return value == POLYFILL ? true
     : value == NATIVE ? false
-    : isCallable$5(detection) ? fails$4(detection)
+    : isCallable$6(detection) ? fails$3(detection)
     : !!detection;
 };
 
@@ -850,7 +902,7 @@ var getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f;
 var createNonEnumerableProperty$2 = createNonEnumerableProperty$5;
 var redefine$2 = redefine$3.exports;
 var setGlobal = setGlobal$3;
-var copyConstructorProperties = copyConstructorProperties$1;
+var copyConstructorProperties$1 = copyConstructorProperties$2;
 var isForced = isForced_1;
 
 /*
@@ -890,7 +942,7 @@ var _export = function (options, source) {
     // contained in target
     if (!FORCED && targetProperty !== undefined) {
       if (typeof sourceProperty == typeof targetProperty) continue;
-      copyConstructorProperties(sourceProperty, targetProperty);
+      copyConstructorProperties$1(sourceProperty, targetProperty);
     }
     // add a flag to not completely full polyfills
     if (options.sham || (targetProperty && targetProperty.sham)) {
@@ -906,35 +958,35 @@ var enumBugKeys$1 = enumBugKeys$3;
 
 // `Object.keys` method
 // https://tc39.es/ecma262/#sec-object.keys
-// eslint-disable-next-line es/no-object-keys -- safe
+// eslint-disable-next-line es-x/no-object-keys -- safe
 var objectKeys$2 = Object.keys || function keys(O) {
   return internalObjectKeys(O, enumBugKeys$1);
 };
 
-var DESCRIPTORS$1 = descriptors;
-var uncurryThis$3 = functionUncurryThis;
+var DESCRIPTORS$3 = descriptors;
+var uncurryThis$2 = functionUncurryThis;
 var call$1 = functionCall;
-var fails$3 = fails$9;
+var fails$2 = fails$a;
 var objectKeys$1 = objectKeys$2;
 var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
 var propertyIsEnumerableModule = objectPropertyIsEnumerable;
 var toObject$1 = toObject$3;
 var IndexedObject = indexedObject;
 
-// eslint-disable-next-line es/no-object-assign -- safe
+// eslint-disable-next-line es-x/no-object-assign -- safe
 var $assign = Object.assign;
-// eslint-disable-next-line es/no-object-defineproperty -- required for testing
-var defineProperty$1 = Object.defineProperty;
-var concat = uncurryThis$3([].concat);
+// eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
+var defineProperty$3 = Object.defineProperty;
+var concat = uncurryThis$2([].concat);
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
-var objectAssign = !$assign || fails$3(function () {
+var objectAssign = !$assign || fails$2(function () {
   // should have correct order of operations (Edge bug)
-  if (DESCRIPTORS$1 && $assign({ b: 1 }, $assign(defineProperty$1({}, 'a', {
+  if (DESCRIPTORS$3 && $assign({ b: 1 }, $assign(defineProperty$3({}, 'a', {
     enumerable: true,
     get: function () {
-      defineProperty$1(this, 'b', {
+      defineProperty$3(this, 'b', {
         value: 3,
         enumerable: false
       });
@@ -943,7 +995,7 @@ var objectAssign = !$assign || fails$3(function () {
   // should work with symbols and should have deterministic property order (V8 bug)
   var A = {};
   var B = {};
-  // eslint-disable-next-line es/no-symbol -- safe
+  // eslint-disable-next-line es-x/no-symbol -- safe
   var symbol = Symbol();
   var alphabet = 'abcdefghijklmnopqrst';
   A[symbol] = 7;
@@ -963,7 +1015,7 @@ var objectAssign = !$assign || fails$3(function () {
     var key;
     while (length > j) {
       key = keys[j++];
-      if (!DESCRIPTORS$1 || call$1(propertyIsEnumerable, S, key)) T[key] = S[key];
+      if (!DESCRIPTORS$3 || call$1(propertyIsEnumerable, S, key)) T[key] = S[key];
     }
   } return T;
 } : $assign;
@@ -973,12 +1025,12 @@ var assign = objectAssign;
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
-// eslint-disable-next-line es/no-object-assign -- required for testing
+// eslint-disable-next-line es-x/no-object-assign -- required for testing
 $$2({ target: 'Object', stat: true, forced: Object.assign !== assign }, {
   assign: assign
 });
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -1009,11 +1061,13 @@ function Button({
   children,
   variant,
   onClick,
+  disabled,
   active = false,
   type = 'button'
 }) {
   const props = {
-    type
+    type,
+    disabled
   };
   const classNames = [];
   if (variant) classNames.push(variant);
@@ -1022,7 +1076,7 @@ function Button({
   if (onClick) props.onClick = onClick;
   return jsx("button", Object.assign({}, props, {
     children: children
-  }), void 0);
+  }));
 }
 
 const ModalHeader = ({
@@ -1038,7 +1092,7 @@ const ModalHeader = ({
   }, {
     children: [jsx("h3", {
       children: _header
-    }, void 0), jsx("button", Object.assign({
+    }), jsx("button", Object.assign({
       className: "close",
       onClick: handleClose
     }, {
@@ -1046,9 +1100,9 @@ const ModalHeader = ({
         className: "sr-only"
       }, {
         children: "Close"
-      }), void 0)
-    }), void 0)]
-  }), void 0);
+      }))
+    }))]
+  }));
 };
 
 const ModalBody = ({
@@ -1058,7 +1112,7 @@ const ModalBody = ({
     className: "body"
   }, {
     children: children
-  }), void 0);
+  }));
 };
 
 const ModalFooter = ({
@@ -1086,29 +1140,60 @@ const ModalFooter = ({
       onClick: handleDismiss
     }, {
       children: dismiss
-    }), void 0), confirm && jsx(Button, Object.assign({
+    })), confirm && jsx(Button, Object.assign({
       variant: "primary",
       onClick: handleConfirm
     }, {
       children: confirm
-    }), void 0)]
-  }), void 0);
+    }))]
+  }));
 };
 
 const Modal = _a => {
   var {
-    type = 'default'
+    type = 'default',
+    isOpen
   } = _a,
-      props = __rest(_a, ["type"]);
+      props = __rest(_a, ["type", "isOpen"]);
 
-  return jsxs("section", Object.assign({
-    role: ModalRole[type]
-  }, {
-    children: [jsx(ModalHeader, Object.assign({}, props), void 0), jsx(ModalBody, Object.assign({}, props), void 0), jsx(ModalFooter, Object.assign({}, props), void 0)]
-  }), void 0);
+  const modalContent = () => {
+    switch (type) {
+      case 'slideout':
+        {
+          return jsxs("aside", Object.assign({
+            role: "dialog"
+          }, {
+            children: [jsx(ModalHeader, Object.assign({}, props)), jsx(ModalBody, Object.assign({}, props)), jsx(ModalFooter, Object.assign({}, props))]
+          }));
+        }
+
+      case 'takeover':
+        {
+          return jsxs("main", Object.assign({
+            role: "dialog"
+          }, {
+            children: [jsx(ModalHeader, Object.assign({}, props)), jsx(ModalBody, Object.assign({}, props)), jsx(ModalFooter, Object.assign({}, props))]
+          }));
+        }
+
+      default:
+        {
+          return jsxs("section", Object.assign({
+            role: "dialog"
+          }, {
+            children: [jsx(ModalHeader, Object.assign({}, props)), jsx(ModalBody, Object.assign({}, props)), jsx(ModalFooter, Object.assign({}, props))]
+          }));
+        }
+    }
+  };
+
+  return isOpen ? modalContent() : null;
 };
 
-var DESCRIPTORS = descriptors;
+var objectDefineProperties = {};
+
+var DESCRIPTORS$2 = descriptors;
+var V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug;
 var definePropertyModule$1 = objectDefineProperty;
 var anObject$2 = anObject$5;
 var toIndexedObject$1 = toIndexedObject$5;
@@ -1116,8 +1201,8 @@ var objectKeys = objectKeys$2;
 
 // `Object.defineProperties` method
 // https://tc39.es/ecma262/#sec-object.defineproperties
-// eslint-disable-next-line es/no-object-defineproperties -- safe
-var objectDefineProperties = DESCRIPTORS ? Object.defineProperties : function defineProperties(O, Properties) {
+// eslint-disable-next-line es-x/no-object-defineproperties -- safe
+objectDefineProperties.f = DESCRIPTORS$2 && !V8_PROTOTYPE_DEFINE_BUG ? Object.defineProperties : function defineProperties(O, Properties) {
   anObject$2(O);
   var props = toIndexedObject$1(Properties);
   var keys = objectKeys(Properties);
@@ -1135,7 +1220,7 @@ var html$1 = getBuiltIn('document', 'documentElement');
 /* global ActiveXObject -- old IE, WSH */
 
 var anObject$1 = anObject$5;
-var defineProperties = objectDefineProperties;
+var definePropertiesModule = objectDefineProperties;
 var enumBugKeys = enumBugKeys$3;
 var hiddenKeys = hiddenKeys$4;
 var html = html$1;
@@ -1204,6 +1289,7 @@ hiddenKeys[IE_PROTO$1] = true;
 
 // `Object.create` method
 // https://tc39.es/ecma262/#sec-object.create
+// eslint-disable-next-line es-x/no-object-create -- safe
 var objectCreate = Object.create || function create(O, Properties) {
   var result;
   if (O !== null) {
@@ -1213,7 +1299,7 @@ var objectCreate = Object.create || function create(O, Properties) {
     // add "__proto__" for Object.getPrototypeOf polyfill
     result[IE_PROTO$1] = O;
   } else result = NullProtoObject();
-  return Properties === undefined ? result : defineProperties(result, Properties);
+  return Properties === undefined ? result : definePropertiesModule.f(result, Properties);
 };
 
 var wellKnownSymbol$6 = wellKnownSymbol$8;
@@ -1239,18 +1325,18 @@ var addToUnscopables$1 = function (key) {
 
 var iterators = {};
 
-var fails$2 = fails$9;
+var fails$1 = fails$a;
 
-var correctPrototypeGetter = !fails$2(function () {
+var correctPrototypeGetter = !fails$1(function () {
   function F() { /* empty */ }
   F.prototype.constructor = null;
-  // eslint-disable-next-line es/no-object-getprototypeof -- required for testing
+  // eslint-disable-next-line es-x/no-object-getprototypeof -- required for testing
   return Object.getPrototypeOf(new F()) !== F.prototype;
 });
 
 var global$6 = global$r;
-var hasOwn$1 = hasOwnProperty_1;
-var isCallable$4 = isCallable$e;
+var hasOwn$2 = hasOwnProperty_1;
+var isCallable$5 = isCallable$f;
 var toObject = toObject$3;
 var sharedKey = sharedKey$3;
 var CORRECT_PROTOTYPE_GETTER = correctPrototypeGetter;
@@ -1263,27 +1349,27 @@ var ObjectPrototype = Object$2.prototype;
 // https://tc39.es/ecma262/#sec-object.getprototypeof
 var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? Object$2.getPrototypeOf : function (O) {
   var object = toObject(O);
-  if (hasOwn$1(object, IE_PROTO)) return object[IE_PROTO];
+  if (hasOwn$2(object, IE_PROTO)) return object[IE_PROTO];
   var constructor = object.constructor;
-  if (isCallable$4(constructor) && object instanceof constructor) {
+  if (isCallable$5(constructor) && object instanceof constructor) {
     return constructor.prototype;
   } return object instanceof Object$2 ? ObjectPrototype : null;
 };
 
-var fails$1 = fails$9;
-var isCallable$3 = isCallable$e;
+var fails = fails$a;
+var isCallable$4 = isCallable$f;
 var getPrototypeOf$1 = objectGetPrototypeOf;
 var redefine$1 = redefine$3.exports;
 var wellKnownSymbol$5 = wellKnownSymbol$8;
 
-var ITERATOR$3 = wellKnownSymbol$5('iterator');
+var ITERATOR$2 = wellKnownSymbol$5('iterator');
 var BUGGY_SAFARI_ITERATORS$1 = false;
 
 // `%IteratorPrototype%` object
 // https://tc39.es/ecma262/#sec-%iteratorprototype%-object
 var IteratorPrototype$2, PrototypeOfArrayIteratorPrototype, arrayIterator;
 
-/* eslint-disable es/no-array-prototype-keys -- safe */
+/* eslint-disable es-x/no-array-prototype-keys -- safe */
 if ([].keys) {
   arrayIterator = [].keys();
   // Safari 8 has buggy iterators w/o `next`
@@ -1294,18 +1380,18 @@ if ([].keys) {
   }
 }
 
-var NEW_ITERATOR_PROTOTYPE = IteratorPrototype$2 == undefined || fails$1(function () {
+var NEW_ITERATOR_PROTOTYPE = IteratorPrototype$2 == undefined || fails(function () {
   var test = {};
   // FF44- legacy iterators case
-  return IteratorPrototype$2[ITERATOR$3].call(test) !== test;
+  return IteratorPrototype$2[ITERATOR$2].call(test) !== test;
 });
 
 if (NEW_ITERATOR_PROTOTYPE) IteratorPrototype$2 = {};
 
 // `%IteratorPrototype%[@@iterator]()` method
 // https://tc39.es/ecma262/#sec-%iteratorprototype%-@@iterator
-if (!isCallable$3(IteratorPrototype$2[ITERATOR$3])) {
-  redefine$1(IteratorPrototype$2, ITERATOR$3, function () {
+if (!isCallable$4(IteratorPrototype$2[ITERATOR$2])) {
+  redefine$1(IteratorPrototype$2, ITERATOR$2, function () {
     return this;
   });
 }
@@ -1315,15 +1401,16 @@ var iteratorsCore = {
   BUGGY_SAFARI_ITERATORS: BUGGY_SAFARI_ITERATORS$1
 };
 
-var defineProperty = objectDefineProperty.f;
-var hasOwn = hasOwnProperty_1;
+var defineProperty$2 = objectDefineProperty.f;
+var hasOwn$1 = hasOwnProperty_1;
 var wellKnownSymbol$4 = wellKnownSymbol$8;
 
 var TO_STRING_TAG$3 = wellKnownSymbol$4('toStringTag');
 
-var setToStringTag$2 = function (it, TAG, STATIC) {
-  if (it && !hasOwn(it = STATIC ? it : it.prototype, TO_STRING_TAG$3)) {
-    defineProperty(it, TO_STRING_TAG$3, { configurable: true, value: TAG });
+var setToStringTag$2 = function (target, TAG, STATIC) {
+  if (target && !STATIC) target = target.prototype;
+  if (target && !hasOwn$1(target, TO_STRING_TAG$3)) {
+    defineProperty$2(target, TO_STRING_TAG$3, { configurable: true, value: TAG });
   }
 };
 
@@ -1335,42 +1422,42 @@ var Iterators$2 = iterators;
 
 var returnThis$1 = function () { return this; };
 
-var createIteratorConstructor$1 = function (IteratorConstructor, NAME, next) {
+var createIteratorConstructor$1 = function (IteratorConstructor, NAME, next, ENUMERABLE_NEXT) {
   var TO_STRING_TAG = NAME + ' Iterator';
-  IteratorConstructor.prototype = create(IteratorPrototype$1, { next: createPropertyDescriptor(1, next) });
+  IteratorConstructor.prototype = create(IteratorPrototype$1, { next: createPropertyDescriptor(+!ENUMERABLE_NEXT, next) });
   setToStringTag$1(IteratorConstructor, TO_STRING_TAG, false);
   Iterators$2[TO_STRING_TAG] = returnThis$1;
   return IteratorConstructor;
 };
 
 var global$5 = global$r;
-var isCallable$2 = isCallable$e;
+var isCallable$3 = isCallable$f;
 
 var String$2 = global$5.String;
 var TypeError$1 = global$5.TypeError;
 
 var aPossiblePrototype$1 = function (argument) {
-  if (typeof argument == 'object' || isCallable$2(argument)) return argument;
+  if (typeof argument == 'object' || isCallable$3(argument)) return argument;
   throw TypeError$1("Can't set " + String$2(argument) + ' as a prototype');
 };
 
 /* eslint-disable no-proto -- safe */
 
-var uncurryThis$2 = functionUncurryThis;
+var uncurryThis$1 = functionUncurryThis;
 var anObject = anObject$5;
 var aPossiblePrototype = aPossiblePrototype$1;
 
 // `Object.setPrototypeOf` method
 // https://tc39.es/ecma262/#sec-object.setprototypeof
 // Works with __proto__ only. Old v8 can't work with null proto objects.
-// eslint-disable-next-line es/no-object-setprototypeof -- safe
+// eslint-disable-next-line es-x/no-object-setprototypeof -- safe
 var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? function () {
   var CORRECT_SETTER = false;
   var test = {};
   var setter;
   try {
-    // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
-    setter = uncurryThis$2(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__').set);
+    // eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
+    setter = uncurryThis$1(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__').set);
     setter(test, []);
     CORRECT_SETTER = test instanceof Array;
   } catch (error) { /* empty */ }
@@ -1386,7 +1473,7 @@ var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? functio
 var $$1 = _export;
 var call = functionCall;
 var FunctionName = functionName;
-var isCallable$1 = isCallable$e;
+var isCallable$2 = isCallable$f;
 var createIteratorConstructor = createIteratorConstructor$1;
 var getPrototypeOf = objectGetPrototypeOf;
 var setPrototypeOf = objectSetPrototypeOf;
@@ -1401,7 +1488,7 @@ var PROPER_FUNCTION_NAME = FunctionName.PROPER;
 var CONFIGURABLE_FUNCTION_NAME = FunctionName.CONFIGURABLE;
 var IteratorPrototype = IteratorsCore.IteratorPrototype;
 var BUGGY_SAFARI_ITERATORS = IteratorsCore.BUGGY_SAFARI_ITERATORS;
-var ITERATOR$2 = wellKnownSymbol$3('iterator');
+var ITERATOR$1 = wellKnownSymbol$3('iterator');
 var KEYS = 'keys';
 var VALUES = 'values';
 var ENTRIES = 'entries';
@@ -1424,7 +1511,7 @@ var defineIterator$1 = function (Iterable, NAME, IteratorConstructor, next, DEFA
   var TO_STRING_TAG = NAME + ' Iterator';
   var INCORRECT_VALUES_NAME = false;
   var IterablePrototype = Iterable.prototype;
-  var nativeIterator = IterablePrototype[ITERATOR$2]
+  var nativeIterator = IterablePrototype[ITERATOR$1]
     || IterablePrototype['@@iterator']
     || DEFAULT && IterablePrototype[DEFAULT];
   var defaultIterator = !BUGGY_SAFARI_ITERATORS && nativeIterator || getIterationMethod(DEFAULT);
@@ -1438,8 +1525,8 @@ var defineIterator$1 = function (Iterable, NAME, IteratorConstructor, next, DEFA
       if (getPrototypeOf(CurrentIteratorPrototype) !== IteratorPrototype) {
         if (setPrototypeOf) {
           setPrototypeOf(CurrentIteratorPrototype, IteratorPrototype);
-        } else if (!isCallable$1(CurrentIteratorPrototype[ITERATOR$2])) {
-          redefine(CurrentIteratorPrototype, ITERATOR$2, returnThis);
+        } else if (!isCallable$2(CurrentIteratorPrototype[ITERATOR$1])) {
+          redefine(CurrentIteratorPrototype, ITERATOR$1, returnThis);
         }
       }
       // Set @@toStringTag to native iterators
@@ -1472,8 +1559,8 @@ var defineIterator$1 = function (Iterable, NAME, IteratorConstructor, next, DEFA
   }
 
   // define iterator
-  if (IterablePrototype[ITERATOR$2] !== defaultIterator) {
-    redefine(IterablePrototype, ITERATOR$2, defaultIterator, { name: DEFAULT });
+  if (IterablePrototype[ITERATOR$1] !== defaultIterator) {
+    redefine(IterablePrototype, ITERATOR$1, defaultIterator, { name: DEFAULT });
   }
   Iterators$1[NAME] = defaultIterator;
 
@@ -1484,7 +1571,9 @@ var toIndexedObject = toIndexedObject$5;
 var addToUnscopables = addToUnscopables$1;
 var Iterators = iterators;
 var InternalStateModule = internalState;
+var defineProperty$1 = objectDefineProperty.f;
 var defineIterator = defineIterator$1;
+var DESCRIPTORS$1 = descriptors;
 
 var ARRAY_ITERATOR = 'Array Iterator';
 var setInternalState = InternalStateModule.set;
@@ -1526,13 +1615,18 @@ var es_array_iterator = defineIterator(Array, 'Array', function (iterated, kind)
 // argumentsList[@@iterator] is %ArrayProto_values%
 // https://tc39.es/ecma262/#sec-createunmappedargumentsobject
 // https://tc39.es/ecma262/#sec-createmappedargumentsobject
-Iterators.Arguments = Iterators.Array;
+var values = Iterators.Arguments = Iterators.Array;
 
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
 addToUnscopables('keys');
 addToUnscopables('values');
 addToUnscopables('entries');
 
+// V8 ~ Chrome 45- bug
+if (DESCRIPTORS$1 && values.name !== 'values') try {
+  defineProperty$1(values, 'name', { value: 'values' });
+} catch (error) { /* empty */ }
+
 // iterable DOM collections
 // flag - `iterable` interface - 'entries', 'keys', 'values', 'forEach' methods
 var domIterables = {
@@ -1584,17 +1678,17 @@ var ArrayIteratorMethods = es_array_iterator;
 var createNonEnumerableProperty = createNonEnumerableProperty$5;
 var wellKnownSymbol$2 = wellKnownSymbol$8;
 
-var ITERATOR$1 = wellKnownSymbol$2('iterator');
+var ITERATOR = wellKnownSymbol$2('iterator');
 var TO_STRING_TAG$2 = wellKnownSymbol$2('toStringTag');
 var ArrayValues = ArrayIteratorMethods.values;
 
 var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
   if (CollectionPrototype) {
     // some Chrome versions have non-configurable methods on DOMTokenList
-    if (CollectionPrototype[ITERATOR$1] !== ArrayValues) try {
-      createNonEnumerableProperty(CollectionPrototype, ITERATOR$1, ArrayValues);
+    if (CollectionPrototype[ITERATOR] !== ArrayValues) try {
+      createNonEnumerableProperty(CollectionPrototype, ITERATOR, ArrayValues);
     } catch (error) {
-      CollectionPrototype[ITERATOR$1] = ArrayValues;
+      CollectionPrototype[ITERATOR] = ArrayValues;
     }
     if (!CollectionPrototype[TO_STRING_TAG$2]) {
       createNonEnumerableProperty(CollectionPrototype, TO_STRING_TAG$2, COLLECTION_NAME);
@@ -1616,71 +1710,65 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-const Flexbox = ({
-  alignContent,
-  alignItems,
-  alignSelf,
-  children,
-  justifyContent
-}) => {
+const Flexbox = _a => {
+  var {
+    alignContent,
+    alignItems,
+    alignSelf,
+    children,
+    justifyContent,
+    flexDirection,
+    flexWrap,
+    className
+  } = _a,
+      props = __rest(_a, ["alignContent", "alignItems", "alignSelf", "children", "justifyContent", "flexDirection", "flexWrap", "className"]);
+
   const [classes, setClasses] = useState(['d-flex']);
-  const [className, setClassName] = useState('d-flex'); // update className when classes change
+  const [flexClassName, setFlexClassName] = useState('d-flex'); // // update className when classes change
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const newClassName = classes.join(' ');
-    if (newClassName !== className) setClassName(newClassName);
-  }, [classes, className]); // update classes when props change
+    if (newClassName !== flexClassName) setFlexClassName(newClassName);
+  }, [classes, flexClassName]); // // update classes when props change
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const newClasses = ['d-flex'];
-    if (alignItems) newClasses.push(`align-items-${alignItems}`);
-    if (alignContent) newClasses.push(`align-content-${alignContent}`);
-    if (alignSelf) newClasses.push(`align-content-${alignSelf}`);
-    if (justifyContent) newClasses.push(`justify-content-${justifyContent}`);
+    alignItems && newClasses.push(`align-items-${alignItems}`);
+    alignContent && newClasses.push(`align-content-${alignContent}`);
+    alignSelf && newClasses.push(`align-self-${alignSelf}`);
+    justifyContent && newClasses.push(`justify-content-${justifyContent}`);
+    flexDirection && newClasses.push(`flex-${flexDirection}`);
+    flexWrap && newClasses.push(`flex-${flexWrap}`);
+    className && newClasses.push(className);
     setClasses(newClasses);
-  }, [alignContent, alignItems, alignSelf, justifyContent]);
+  }, [alignContent, alignItems, alignSelf, justifyContent, flexDirection, flexWrap, className]);
   return jsx("div", Object.assign({
-    className: className
-  }, {
+    className: flexClassName
+  }, props, {
     children: children
-  }), void 0);
+  }));
 };
 
-function Group({
-  children
-}) {
-  return jsx("div", Object.assign({
-    className: "group"
-  }, {
-    children: children
-  }), void 0);
-}
-
 function Card({
   children,
-  headline,
-  buttons
+  header,
+  footer
 }) {
-  return jsx("section", Object.assign({
+  return jsxs("section", Object.assign({
     className: "card"
   }, {
-    children: jsxs("div", Object.assign({
-      className: "card-body"
-    }, {
-      children: [headline && jsx("h2", {
-        children: headline
-      }, void 0), jsx("p", {
-        children: children
-      }, void 0), buttons && jsx("footer", {
-        children: buttons
-      }, void 0)]
-    }), void 0)
-  }), void 0);
+    children: [jsx("header", {
+      children: header
+    }), children, jsx("footer", {
+      children: footer
+    })]
+  }));
 }
 
 function Alert({
   type,
-  heading,
+  header,
+  footer,
   children,
   closeText,
   isCloseable = true
@@ -1690,23 +1778,33 @@ function Alert({
     if (!isCloseable) {
       setCloseButton(null);
     } else {
-      if (closeText) setCloseButton(jsx(Button, {
-        children: closeText
-      }, void 0));else setCloseButton(jsx("button", {
+      if (closeText) setCloseButton(jsx(Button, Object.assign({
+        variant: "ghost"
+      }, {
+        children: jsx("span", Object.assign({
+          className: "sr-only"
+        }, {
+          children: closeText
+        }))
+      })));else setCloseButton(jsx("button", {
         className: "close"
-      }, void 0));
+      }));
     }
   }, [isCloseable, closeText]);
   return jsxs("div", Object.assign({
     role: "alert",
     className: type
   }, {
-    children: [heading && jsx("h3", {
-      children: heading
-    }, void 0), jsx("p", {
+    children: [header && jsxs("header", {
+      children: [/*#__PURE__*/React.isValidElement(header) ? header : jsx("h3", {
+        children: header
+      }), closeButton]
+    }), jsx("p", {
       children: children
-    }, void 0), closeButton]
-  }), void 0);
+    }), footer && jsx("footer", {
+      children: footer
+    })]
+  }));
 }
 
 const ButtonGroup = ({
@@ -1734,149 +1832,220 @@ const ButtonGroup = ({
   }, [children, selected, variant]);
   return jsx(Group, {
     children: buttons.map(props => jsx(Button, Object.assign({}, props), props.key))
-  }, void 0);
+  });
 };
 
-function Form({
-  children,
-  direction = 'vertical',
-  size = 'md'
-}) {
-  return jsx("form", Object.assign({
-    className: [direction, `size-${size}`].join(' ')
-  }, {
-    children: children
-  }), void 0);
-}
-
-var wellKnownSymbol$1 = wellKnownSymbol$8;
-
-var TO_STRING_TAG$1 = wellKnownSymbol$1('toStringTag');
-var test = {};
-
-test[TO_STRING_TAG$1] = 'z';
-
-var toStringTagSupport = String(test) === '[object z]';
+const validateInputValue = (target, rules, setError) => {
+  const errorMessage = validateInputValueErrors(rules, target);
+  errorMessage ? setErrorInsert(setError, target.name) : setErrorRemove(setError, target.name);
+  return errorMessage;
+};
 
-var global$3 = global$r;
-var TO_STRING_TAG_SUPPORT = toStringTagSupport;
-var isCallable = isCallable$e;
-var classofRaw = classofRaw$1;
-var wellKnownSymbol = wellKnownSymbol$8;
+const validateInputValueErrors = (rules, target) => {
+  const {
+    value
+  } = target;
 
-var TO_STRING_TAG = wellKnownSymbol('toStringTag');
-var Object$1 = global$3.Object;
+  if ((rules === null || rules === void 0 ? void 0 : rules.custom) instanceof Function) {
+    return rules === null || rules === void 0 ? void 0 : rules.custom();
+  }
 
-// ES3 wrong here
-var CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) == 'Arguments';
+  return validateTextInputValues(value, rules);
+};
 
-// fallback for IE11 Script Access Denied error
-var tryGet = function (it, key) {
-  try {
-    return it[key];
-  } catch (error) { /* empty */ }
+const setErrorInsert = (setError, name) => {
+  setError(errors => {
+    return Object.assign(Object.assign({}, errors), {
+      [name]: true
+    });
+  });
 };
 
-// getting tag from ES6+ `Object.prototype.toString`
-var classof$1 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
-  var O, tag, result;
-  return it === undefined ? 'Undefined' : it === null ? 'Null'
-    // @@toStringTag case
-    : typeof (tag = tryGet(O = Object$1(it), TO_STRING_TAG)) == 'string' ? tag
-    // builtinTag case
-    : CORRECT_ARGUMENTS ? classofRaw(O)
-    // ES3 arguments fallback
-    : (result = classofRaw(O)) == 'Object' && isCallable(O.callee) ? 'Arguments' : result;
+const setErrorRemove = (setError, name) => {
+  setError(errors => {
+    const newError = Object.assign({}, errors);
+    delete newError[name];
+    return newError;
+  });
 };
 
-var global$2 = global$r;
-var classof = classof$1;
+const validateTextInputValues = (value, rules) => {
+  switch (rules === null || rules === void 0 ? void 0 : rules.type) {
+    case 'Required':
+      {
+        return value === '' || value === undefined || value === null ? 'error' : null;
+      }
 
-var String$1 = global$2.String;
+    default:
+      {
+        return;
+      }
+  }
+};
 
-var toString$2 = function (argument) {
-  if (classof(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
-  return String$1(argument);
+const FormContext = /*#__PURE__*/React.createContext({});
+const useFormContext = () => {
+  return React.useContext(FormContext);
 };
+const FormProvider = _a => {
+  var {
+    children,
+    direction = 'vertical',
+    formSize = 'md',
+    onSubmit,
+    onFormSubmit
+  } = _a,
+      props = __rest(_a, ["children", "direction", "formSize", "onSubmit", "onFormSubmit"]);
+
+  const [values, setValues] = React.useState();
+  const [errors, setErrors] = React.useState();
+  const [fields, setFields] = React.useState({});
+
+  const formSubmit = event => {
+    let hasError = false;
+    event.preventDefault();
+    Object.keys(fields).forEach(key => {
+      const errorMessage = validateInputValue({
+        name: key,
+        value: values === null || values === void 0 ? void 0 : values[key]
+      }, fields[key], setErrors);
+      hasError = hasError || !!errorMessage;
+    });
 
-// a string of all valid unicode whitespaces
-var whitespaces$2 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' +
-  '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
+    if (!hasError) {
+      onFormSubmit && onFormSubmit(values);
+    }
+  };
 
-var uncurryThis$1 = functionUncurryThis;
-var requireObjectCoercible = requireObjectCoercible$3;
-var toString$1 = toString$2;
-var whitespaces$1 = whitespaces$2;
-
-var replace = uncurryThis$1(''.replace);
-var whitespace = '[' + whitespaces$1 + ']';
-var ltrim = RegExp('^' + whitespace + whitespace + '*');
-var rtrim = RegExp(whitespace + whitespace + '*$');
-
-// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
-var createMethod = function (TYPE) {
-  return function ($this) {
-    var string = toString$1(requireObjectCoercible($this));
-    if (TYPE & 1) string = replace(string, ltrim, '');
-    if (TYPE & 2) string = replace(string, rtrim, '');
-    return string;
+  const resetForm = () => {
+    setValues({});
+    setErrors({});
   };
+
+  return jsx(FormContext.Provider, Object.assign({
+    value: {
+      setValues,
+      setErrors,
+      setFields,
+      errors,
+      values
+    }
+  }, {
+    children: jsx("form", Object.assign({
+      className: [direction, `size-${formSize}`].join(' '),
+      onSubmit: formSubmit
+    }, props, {
+      onReset: resetForm
+    }, {
+      children: children
+    }))
+  }));
 };
 
-var stringTrim = {
-  // `String.prototype.{ trimLeft, trimStart }` methods
-  // https://tc39.es/ecma262/#sec-string.prototype.trimstart
-  start: createMethod(1),
-  // `String.prototype.{ trimRight, trimEnd }` methods
-  // https://tc39.es/ecma262/#sec-string.prototype.trimend
-  end: createMethod(2),
-  // `String.prototype.trim` method
-  // https://tc39.es/ecma262/#sec-string.prototype.trim
-  trim: createMethod(3)
+const Form = props => {
+  return jsx(FormProvider, Object.assign({}, props));
 };
 
-var global$1 = global$r;
-var fails = fails$9;
-var uncurryThis = functionUncurryThis;
-var toString = toString$2;
-var trim = stringTrim.trim;
-var whitespaces = whitespaces$2;
-
-var $parseInt$1 = global$1.parseInt;
-var Symbol$1 = global$1.Symbol;
-var ITERATOR = Symbol$1 && Symbol$1.iterator;
-var hex = /^[+-]?0x/i;
-var exec = uncurryThis(hex.exec);
-var FORCED = $parseInt$1(whitespaces + '08') !== 8 || $parseInt$1(whitespaces + '0x16') !== 22
-  // MS Edge 18- broken with boxed symbols
-  || (ITERATOR && !fails(function () { $parseInt$1(Object(ITERATOR)); }));
-
-// `parseInt` method
-// https://tc39.es/ecma262/#sec-parseint-string-radix
-var numberParseInt = FORCED ? function parseInt(string, radix) {
-  var S = trim(toString(string));
-  return $parseInt$1(S, (radix >>> 0) || (exec(hex, S) ? 16 : 10));
-} : $parseInt$1;
+const FormItems = ({
+  children,
+  validate,
+  name
+}) => {
+  const {
+    setValues,
+    setErrors,
+    setFields,
+    errors
+  } = useFormContext();
+  React.useEffect(() => {
+    setFields(fields => Object.assign(Object.assign({}, fields), {
+      [name]: validate === null || validate === void 0 ? void 0 : validate.rules
+    }));
+
+    const removeValues = values => {
+      const newValues = Object.assign({}, values);
+      delete newValues[name];
+      return newValues;
+    };
 
-var $ = _export;
-var $parseInt = numberParseInt;
+    return () => {
+      setFields(fields => removeValues(fields));
+      setValues(values => removeValues(values));
+      setErrors(errors => removeValues(errors));
+    };
+  }, []);
 
-// `parseInt` method
-// https://tc39.es/ecma262/#sec-parseint-string-radix
-$({ global: true, forced: parseInt != $parseInt }, {
-  parseInt: $parseInt
-});
+  const onChange = event => {
+    if (!event.target) return;
+    const {
+      value,
+      name,
+      type,
+      checked
+    } = event.target;
+    let inputValue;
+
+    if (type === 'checkbox') {
+      inputValue = checked ? value : null;
+      checked ? setValues(values => Object.assign(Object.assign({}, values), {
+        [name]: value
+      })) : setValues(values => Object.assign(Object.assign({}, values), {
+        [name]: null
+      }));
+    } else {
+      inputValue = value;
+      setValues(values => Object.assign(Object.assign({}, values), {
+        [name]: value
+      }));
+    }
 
-const useInput = (props, evaluator, notify) => {
+    validateInputValue({
+      value: inputValue,
+      name,
+      type,
+      checked
+    }, validate === null || validate === void 0 ? void 0 : validate.rules, setErrors);
+  };
+
+  return /*#__PURE__*/React.cloneElement(children, {
+    validator: (errors === null || errors === void 0 ? void 0 : errors[name]) && validate,
+    name,
+    onChange
+  });
+};
+
+function Group({
+  children,
+  error,
+  groupBorder = false
+}) {
+  const groupClassName = `group ${groupBorder ? 'group-border' : ''} ${error ? 'is-invalid' : ''}`;
+  const errorMessage = error ? error.message || error : '';
+  return jsxs("div", Object.assign({
+    className: "form-group"
+  }, {
+    children: [jsx("div", Object.assign({
+      className: groupClassName
+    }, {
+      children: children
+    })), error && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: errorMessage
+    }))]
+  }));
+}
+
+const useInput = (props, onChanges, onChangeInput) => {
   const id = useMemo(() => props.id || randomId(), [props.id]);
   const ref = useRef(null);
-  const [value, setValue] = useState(props.value);
-  const [checked, setChecked] = useState(props.checked);
+  const [value, setValue] = useState(props.value ? props.value : '');
+  const [checked, setChecked] = useState(props.checked ? props.checked : false);
   useEffect(() => {
     if (ref.current && ref.current.form) {
       const resetListener = () => {
-        setValue(props.value);
-        setChecked(props.checked);
+        setValue(props.value ? props.value : '');
+        setChecked(props.checked ? props.checked : false);
       };
 
       const form = ref.current.form;
@@ -1890,8 +2059,9 @@ const useInput = (props, evaluator, notify) => {
 
   const onChange = event => {
     setValue(event.target.value);
-    setChecked(event.target.checked);
-    if (notify) notify(evaluator(event.target));
+    setChecked(event.currentTarget.checked);
+    onChanges && onChanges(event);
+    onChangeInput && onChangeInput(event.target.value);
   };
 
   return Object.assign(Object.assign({}, props), {
@@ -1903,8 +2073,8 @@ const useInput = (props, evaluator, notify) => {
   });
 };
 
-const RenderInput = (type, props, evaluator, label, info, listener) => {
-  const _a = useInput(props, evaluator, listener),
+const RenderInput = (type, props, onChange, onChangeInput, label, info, validator) => {
+  const _a = useInput(props, onChange, onChangeInput),
         {
     value
   } = _a,
@@ -1912,72 +2082,840 @@ const RenderInput = (type, props, evaluator, label, info, listener) => {
 
   const propsWithDescription = info ? Object.assign(Object.assign({}, inputProps), {
     'aria-describedby': `${inputProps.id}_info`
-  }) : inputProps;
+  }) : inputProps; // Render naked
+
+  if (!label && !info) return jsx("input", Object.assign({
+    type: type,
+    value: value
+  }, propsWithDescription));
   return jsxs("div", Object.assign({
-    className: "form-field"
+    className: "form-group"
   }, {
     children: [label && jsx("label", Object.assign({
       htmlFor: inputProps.id
     }, {
       children: label
-    }), void 0), info && jsx("span", Object.assign({
+    })), info && jsx("span", Object.assign({
       className: "form-info",
-      id: "{inputProps.id}_info"
+      id: `${inputProps.id}_info`
     }, {
       children: info
-    }), void 0), jsx("input", Object.assign({
+    })), jsx("input", Object.assign({
       type: type,
       value: value
-    }, propsWithDescription), void 0)]
-  }), void 0);
+    }, propsWithDescription, {
+      className: validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)
+    })), validator && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: validator.message
+    }))]
+  }));
 };
-
 const TextInput = _a => {
   var {
     label,
     info,
-    onChangeText
+    onChange,
+    onChangeInput,
+    validator
   } = _a,
-      props = __rest(_a, ["label", "info", "onChangeText"]);
+      props = __rest(_a, ["label", "info", "onChange", "onChangeInput", "validator"]);
 
-  return RenderInput('text', props, e => e.value, label, info, onChangeText);
+  return RenderInput('text', props, onChange, onChangeInput, label, info, validator);
 };
 const EmailInput = _a => {
   var {
     label,
     info,
-    onChangeText
+    onChange,
+    onChangeInput,
+    validator
   } = _a,
-      props = __rest(_a, ["label", "info", "onChangeText"]);
+      props = __rest(_a, ["label", "info", "onChange", "onChangeInput", "validator"]);
 
-  return RenderInput('email', props, e => e.value, label, info, onChangeText);
+  return RenderInput('email', props, onChange, onChangeInput, label, info, validator);
 };
 const NumberInput = _a => {
   var {
     label,
     info,
-    onChangeText
+    onChange,
+    onChangeInput,
+    validator
   } = _a,
-      props = __rest(_a, ["label", "info", "onChangeText"]);
+      props = __rest(_a, ["label", "info", "onChange", "onChangeInput", "validator"]);
 
-  return RenderInput('number', props, e => e.value.length ? parseInt(e.value, 10) : undefined, label, info, onChangeText);
+  return RenderInput('number', props, onChange, onChangeInput, label, info, validator);
 };
 const Checkbox = _a => {
   var {
     label,
-    onChecked
+    onChange,
+    validator
+  } = _a,
+      props = __rest(_a, ["label", "onChange", "validator"]);
+
+  const inputProps = useInput(props, onChange);
+  const validatorClassName = validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
+  return jsxs(Fragment, {
+    children: [jsxs("label", Object.assign({
+      htmlFor: inputProps.id,
+      className: `form-control ${validatorClassName}`
+    }, {
+      children: [label, jsx("input", Object.assign({
+        type: "checkbox"
+      }, inputProps)), jsx("span", {}), jsx("i", {})]
+    })), validator && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: validator.message
+    }))]
+  });
+};
+const RadioButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+    label,
+    validator
   } = _a,
-      props = __rest(_a, ["label", "onChecked"]);
+      props = __rest(_a, ["label", "validator"]);
 
-  const inputProps = useInput(props, e => e.checked, onChecked);
+  const {
+    id
+  } = useInput(props);
   return jsxs("label", Object.assign({
-    htmlFor: inputProps.id,
+    htmlFor: id,
     className: "form-control"
   }, {
-    children: [label, jsx("input", Object.assign({
-      type: "checkbox"
-    }, inputProps), void 0), jsx("span", {}, void 0)]
-  }), void 0);
+    children: [jsx("input", Object.assign({
+      id: id,
+      type: "radio"
+    }, props, {
+      className: validator,
+      ref: ref
+    })), jsx("span", {
+      children: label
+    }), jsx("i", {})]
+  }));
+});
+
+const Text = ({
+  children
+}) => jsx("span", Object.assign({
+  className: "form-text"
+}, {
+  children: children
+}));
+
+var wellKnownSymbol$1 = wellKnownSymbol$8;
+
+var TO_STRING_TAG$1 = wellKnownSymbol$1('toStringTag');
+var test = {};
+
+test[TO_STRING_TAG$1] = 'z';
+
+var toStringTagSupport = String(test) === '[object z]';
+
+var global$3 = global$r;
+var TO_STRING_TAG_SUPPORT = toStringTagSupport;
+var isCallable$1 = isCallable$f;
+var classofRaw = classofRaw$1;
+var wellKnownSymbol = wellKnownSymbol$8;
+
+var TO_STRING_TAG = wellKnownSymbol('toStringTag');
+var Object$1 = global$3.Object;
+
+// ES3 wrong here
+var CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) == 'Arguments';
+
+// fallback for IE11 Script Access Denied error
+var tryGet = function (it, key) {
+  try {
+    return it[key];
+  } catch (error) { /* empty */ }
+};
+
+// getting tag from ES6+ `Object.prototype.toString`
+var classof$1 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
+  var O, tag, result;
+  return it === undefined ? 'Undefined' : it === null ? 'Null'
+    // @@toStringTag case
+    : typeof (tag = tryGet(O = Object$1(it), TO_STRING_TAG)) == 'string' ? tag
+    // builtinTag case
+    : CORRECT_ARGUMENTS ? classofRaw(O)
+    // ES3 arguments fallback
+    : (result = classofRaw(O)) == 'Object' && isCallable$1(O.callee) ? 'Arguments' : result;
+};
+
+var global$2 = global$r;
+var classof = classof$1;
+
+var String$1 = global$2.String;
+
+var toString$1 = function (argument) {
+  if (classof(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
+  return String$1(argument);
+};
+
+var $ = _export;
+var DESCRIPTORS = descriptors;
+var global$1 = global$r;
+var uncurryThis = functionUncurryThis;
+var hasOwn = hasOwnProperty_1;
+var isCallable = isCallable$f;
+var isPrototypeOf = objectIsPrototypeOf;
+var toString = toString$1;
+var defineProperty = objectDefineProperty.f;
+var copyConstructorProperties = copyConstructorProperties$2;
+
+var NativeSymbol = global$1.Symbol;
+var SymbolPrototype = NativeSymbol && NativeSymbol.prototype;
+
+if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototype) ||
+  // Safari 12 bug
+  NativeSymbol().description !== undefined
+)) {
+  var EmptyStringDescriptionStore = {};
+  // wrap Symbol constructor for correct work with undefined description
+  var SymbolWrapper = function Symbol() {
+    var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString(arguments[0]);
+    var result = isPrototypeOf(SymbolPrototype, this)
+      ? new NativeSymbol(description)
+      // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
+      : description === undefined ? NativeSymbol() : NativeSymbol(description);
+    if (description === '') EmptyStringDescriptionStore[result] = true;
+    return result;
+  };
+
+  copyConstructorProperties(SymbolWrapper, NativeSymbol);
+  SymbolWrapper.prototype = SymbolPrototype;
+  SymbolPrototype.constructor = SymbolWrapper;
+
+  var NATIVE_SYMBOL = String(NativeSymbol('test')) == 'Symbol(test)';
+  var symbolToString = uncurryThis(SymbolPrototype.toString);
+  var symbolValueOf = uncurryThis(SymbolPrototype.valueOf);
+  var regexp = /^Symbol\((.*)\)[^)]+$/;
+  var replace = uncurryThis(''.replace);
+  var stringSlice = uncurryThis(''.slice);
+
+  defineProperty(SymbolPrototype, 'description', {
+    configurable: true,
+    get: function description() {
+      var symbol = symbolValueOf(this);
+      var string = symbolToString(symbol);
+      if (hasOwn(EmptyStringDescriptionStore, symbol)) return '';
+      var desc = NATIVE_SYMBOL ? stringSlice(string, 7, -1) : replace(string, regexp, '$1');
+      return desc === '' ? undefined : desc;
+    }
+  });
+
+  $({ global: true, forced: true }, {
+    Symbol: SymbolWrapper
+  });
+}
+
+const RadioGroup = ({
+  defaultSelected,
+  description,
+  title,
+  validator,
+  onChangeRadio,
+  onChange,
+  name,
+  children
+}) => {
+  const [checked, setChecked] = React.useState();
+  const validatorClassName = validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
+
+  const onChanges = event => {
+    setChecked(event.target.value);
+    onChangeRadio && onChangeRadio(event.target.value);
+    onChange && onChange(event);
+  };
+
+  const radioBtnRef = React.useRef(null);
+  React.useEffect(() => {
+    var _a;
+
+    if (radioBtnRef && radioBtnRef.current) {
+      if (defaultSelected) setChecked(defaultSelected);
+      const form = (_a = radioBtnRef === null || radioBtnRef === void 0 ? void 0 : radioBtnRef.current) === null || _a === void 0 ? void 0 : _a.form;
+
+      const resetListner = () => {
+        setChecked(undefined);
+      };
+
+      form === null || form === void 0 ? void 0 : form.addEventListener('reset', resetListner);
+      return () => form === null || form === void 0 ? void 0 : form.removeEventListener('reset', resetListner);
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {};
+    }
+  }, []);
+  return jsxs("div", Object.assign({
+    className: "form-group"
+  }, {
+    children: [jsxs("fieldset", Object.assign({
+      className: validatorClassName
+    }, {
+      children: [jsx("legend", {
+        children: title
+      }), jsx("span", Object.assign({
+        className: "form-info"
+      }, {
+        children: description
+      })), React.Children.map(children, Child => {
+        return /*#__PURE__*/React.isValidElement(Child) ? /*#__PURE__*/React.cloneElement(Child, {
+          validator: validatorClassName,
+          onChange: onChanges,
+          checked: checked === Child.props.value,
+          name,
+          ref: radioBtnRef
+        }) : Child;
+      })]
+    })), (validator === null || validator === void 0 ? void 0 : validator.message) && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: validator === null || validator === void 0 ? void 0 : validator.message
+    }))]
+  }));
+};
+
+const ListItem = _a => {
+  var {
+    listType,
+    tableRowData,
+    children
+  } = _a,
+      props = __rest(_a, ["listType", "tableRowData", "children"]);
+
+  if (listType === 'table') {
+    return jsx("dl", {
+      children: jsxs("div", {
+        children: [jsx("dt", {
+          children: tableRowData === null || tableRowData === void 0 ? void 0 : tableRowData.title
+        }), tableRowData === null || tableRowData === void 0 ? void 0 : tableRowData.definition.map((item, index) => jsx("dd", {
+          children: item
+        }, index))]
+      })
+    });
+  } else {
+    return jsx("li", Object.assign({}, props, {
+      children: children
+    }));
+  }
+};
+
+const List = _a => {
+  var {
+    listType,
+    tableCaption,
+    tableData,
+    children
+  } = _a,
+      props = __rest(_a, ["listType", "tableCaption", "tableData", "children"]);
+
+  if (listType === 'ordered') {
+    return jsx("ol", Object.assign({}, props, {
+      children: children === null || children === void 0 ? void 0 : children.map((child, index) => jsx(ListItem, {
+        children: child
+      }, index))
+    }));
+  } else if (listType !== 'table') {
+    return jsx("ul", Object.assign({}, props, {
+      className: listType
+    }, {
+      children: children === null || children === void 0 ? void 0 : children.map((child, index) => jsx(ListItem, {
+        children: child
+      }, index))
+    }));
+  } else {
+    return jsxs("figure", {
+      children: [jsx("figcaption", Object.assign({
+        className: "table-list-caption"
+      }, {
+        children: tableCaption
+      })), jsx("dl", {
+        children: tableData === null || tableData === void 0 ? void 0 : tableData.map((data, index) => jsx(ListItem, {
+          listType: listType,
+          tableRowData: data
+        }, index))
+      })]
+    });
+  }
+};
+
+const Link = _a => {
+  var {
+    button,
+    children
+  } = _a,
+      props = __rest(_a, ["button", "children"]);
+
+  const [anchorProps, setAnchorProps] = useState({});
+  useEffect(() => {
+    const className = button ? typeof button === 'string' ? `button ${button}` : 'button' : undefined;
+    const newProps = Object.assign({
+      role: button ? 'button' : undefined,
+      className: className
+    }, props);
+    setAnchorProps(newProps);
+  }, [button]);
+  return jsx("a", Object.assign({}, anchorProps, {
+    children: children
+  }));
+};
+
+const Navbar = ({
+  children,
+  variant,
+  title,
+  titleLink,
+  brandLink: _brandLink = 'https://www.seb.se',
+  brandAriaLabel: _brandAriaLabel = 'Open seb.se in new tab'
+}) => {
+  const [props, setProps] = useState({});
+  useEffect(() => {
+    const classNames = [];
+    if (variant) classNames.push(variant);
+    setProps(Object.assign(Object.assign({}, props), {
+      className: classNames.join(' ')
+    })); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [variant]);
+  return jsxs("nav", Object.assign({
+    role: "navigation"
+  }, props, {
+    children: [jsx(Link, {
+      "aria-label": _brandAriaLabel,
+      href: _brandLink,
+      target: "_blank",
+      className: "brand"
+    }), jsx("div", Object.assign({
+      className: "container-fluid"
+    }, {
+      children: jsxs("div", Object.assign({
+        className: "row justify-content-between align-items-center"
+      }, {
+        children: [jsx("div", Object.assign({
+          className: "col-auto"
+        }, {
+          children: titleLink ? jsx(Link, Object.assign({
+            className: "mx-4",
+            href: titleLink
+          }, {
+            children: jsx("h1", {
+              children: title
+            })
+          })) : jsx("h1", {
+            children: title
+          })
+        })), jsx("div", Object.assign({
+          className: "col-auto"
+        }, {
+          children: jsx("div", Object.assign({
+            className: "group size-sm"
+          }, {
+            children: children
+          }))
+        }))]
+      }))
+    }))]
+  }));
+};
+
+function Badge(_a) {
+  var {
+    children,
+    badgeType,
+    isCloseable,
+    closeText,
+    customColor,
+    customBackgroundColor
+  } = _a,
+      props = __rest(_a, ["children", "badgeType", "isCloseable", "closeText", "customColor", "customBackgroundColor"]);
+
+  const [isClosed, setIsClosed] = React.useState(false);
+  const [type, setType] = React.useState('');
+  React.useEffect(() => {
+    if (badgeType) {
+      setType(badgeType);
+    }
+
+    if (!!customColor || !!customBackgroundColor) {
+      setType('');
+    }
+  }, []);
+  return !isClosed ? jsxs("span", Object.assign({}, props, {
+    className: `badge ${type}`,
+    style: {
+      color: customColor,
+      backgroundColor: customBackgroundColor
+    }
+  }, {
+    children: [jsx("strong", {
+      children: children
+    }), isCloseable && jsx("button", Object.assign({
+      type: "button",
+      className: "close",
+      onClick: () => setIsClosed(true)
+    }, {
+      children: closeText
+    }))]
+  })) : null;
+}
+
+const noop = () => {};
+
+const useStepper = ({
+  min,
+  max,
+  value: _value = 0,
+  step: _step = 1,
+  id: _id = randomId()
+}) => {
+  const pStepper = {
+    down: noop,
+    setMax: noop,
+    setMin: noop,
+    setStep: noop,
+    setValue: noop,
+    up: noop
+  };
+  const [stepper, setStepper] = useState(pStepper);
+  const [data, setData] = useState({
+    id: _id,
+    value: _value,
+    min,
+    max,
+    step: _step
+  });
+  useEffect(() => {
+    if (max !== data.max) stepper.setMax(max);
+  }, [stepper, max]);
+  useEffect(() => {
+    if (min !== data.min) stepper.setMin(min);
+  }, [stepper, min]);
+  useEffect(() => {
+    if (_step !== data.step) stepper.setStep(_step || 1);
+  }, [stepper, _step]);
+  useEffect(() => {
+    if (_value !== data.value) stepper.setValue(_value || 0);
+  }, [stepper, _value]);
+  useEffect(() => {
+    setStepper(createStepper({
+      id: _id,
+      value: _value,
+      min,
+      max,
+      step: _step
+    }, setData));
+  }, []);
+  return [stepper, data];
+};
+
+function Stepper(_a) {
+  var {
+    label,
+    description,
+    statusMessage,
+    onChange
+  } = _a,
+      props = __rest(_a, ["label", "description", "statusMessage", "onChange"]);
+
+  const [stepper, data] = useStepper(props);
+  useEffect(() => {
+    if (typeof data.value === 'undefined') return;
+    if (onChange) onChange(data.value);
+  }, [data.value]);
+
+  const onChangeEvent = e => {
+    stepper.setValue(e.target.valueAsNumber);
+  };
+
+  return jsxs("div", Object.assign({
+    className: "form-group"
+  }, {
+    children: [label && jsx("label", Object.assign({
+      htmlFor: data.id
+    }, {
+      children: label
+    })), description && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: description
+    })), jsxs("div", Object.assign({
+      className: "group group-border group-stepper"
+    }, {
+      children: [jsx("button", Object.assign({
+        onClick: () => stepper.down()
+      }, {
+        children: "-"
+      })), jsx("input", {
+        id: data.id,
+        type: "number",
+        onChange: onChangeEvent,
+        onFocus: ({
+          target
+        }) => target.select(),
+        placeholder: "0",
+        value: data.value
+      }), jsx("button", Object.assign({
+        onClick: () => stepper.up()
+      }, {
+        children: "+"
+      }))]
+    })), statusMessage && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: statusMessage
+    }))]
+  }));
+}
+
+const useDropdown = ({
+  id,
+  value,
+  texts,
+  options,
+  loop,
+  multiSelect,
+  searchable,
+  searchFilter,
+  compareWith,
+  useValue,
+  display,
+  togglerRef,
+  listboxRef,
+  onChange,
+  validator
+}) => {
+  const [handler, setHandler] = useState();
+  const [dropdown, setDropdown] = useState();
+  const [togglerProps, setTogglerProps] = useState({});
+  const [listboxProps, setListboxProps] = useState({});
+  const [listItems, setListItems] = useState([]);
+  const [multiSelectProps, setMultiSelectProps] = useState({}); // When dropdown data changes
+
+  useEffect(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+
+    if (!dropdown) return;
+    const {
+      elements: {
+        toggler,
+        listbox
+      }
+    } = dropdown;
+    const newToggleProps = Object.assign(Object.assign({}, toggler === null || toggler === void 0 ? void 0 : toggler.attributes), {
+      className: (_a = toggler === null || toggler === void 0 ? void 0 : toggler.classes) === null || _a === void 0 ? void 0 : _a.join(' '),
+      children: (_b = dropdown === null || dropdown === void 0 ? void 0 : dropdown.texts) === null || _b === void 0 ? void 0 : _b.select,
+      onClick: () => handler === null || handler === void 0 ? void 0 : handler.toggle()
+    });
+    setTogglerProps(newToggleProps);
+    const newListboxProps = Object.assign(Object.assign({}, listbox === null || listbox === void 0 ? void 0 : listbox.attributes), {
+      className: (_c = listbox === null || listbox === void 0 ? void 0 : listbox.classes) === null || _c === void 0 ? void 0 : _c.join(' ')
+    });
+    setListboxProps(newListboxProps);
+
+    if (!dropdown.isMultiSelect) {
+      const newListItems = dropdown.options.map(o => {
+        var _a;
+
+        return Object.assign(Object.assign({}, o.attributes), {
+          className: (_a = o.classes) === null || _a === void 0 ? void 0 : _a.join(' '),
+          children: o[dropdown.display],
+          selected: o.selected,
+          onClick: () => handler === null || handler === void 0 ? void 0 : handler.select(o)
+        });
+      });
+      setListItems(newListItems);
+    } else {
+      const checkboxes = dropdown.options.map(o => ({
+        labelProps: Object.assign(Object.assign({}, o.attributes), {
+          className: ['form-control', ...o.classes].join(' ')
+        }),
+        inputProps: {
+          defaultChecked: o.selected,
+          type: 'checkbox',
+          onClick: () => handler === null || handler === void 0 ? void 0 : handler.select(o, false)
+        },
+        spanProps: {
+          children: o[dropdown.display]
+        }
+      }));
+      const newMultiselect = {
+        fieldsetProps: {
+          'aria-describedby': (_f = (_e = (_d = dropdown === null || dropdown === void 0 ? void 0 : dropdown.elements) === null || _d === void 0 ? void 0 : _d.fieldset) === null || _e === void 0 ? void 0 : _e.attributes) === null || _f === void 0 ? void 0 : _f.id,
+          'aria-multiselectable': true,
+          role: 'listbox',
+          tabIndex: -1
+        },
+        legendProps: {
+          className: 'sr-only',
+          id: (_j = (_h = (_g = dropdown === null || dropdown === void 0 ? void 0 : dropdown.elements) === null || _g === void 0 ? void 0 : _g.fieldset) === null || _h === void 0 ? void 0 : _h.attributes) === null || _j === void 0 ? void 0 : _j.id,
+          children: dropdown.texts.optionsDescription
+        },
+        checkboxes
+      };
+      setMultiSelectProps(newMultiselect);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [dropdown]); // When dropdown properties change
+
+  useEffect(() => {
+    if (!dropdown) return;
+    handler === null || handler === void 0 ? void 0 : handler.update({
+      id,
+      value,
+      texts,
+      options,
+      loop,
+      multiSelect,
+      searchable,
+      searchFilter,
+      compareWith,
+      useValue,
+      display,
+      validator
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, texts, options, loop, multiSelect, searchable, searchFilter, compareWith, useValue, display]);
+  useEffect(() => {
+    if (!dropdown) return;
+    handler === null || handler === void 0 ? void 0 : handler.selectByValue(value);
+    console.log('new value'); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]); // When validator changes
+
+  useEffect(() => {
+    if (!dropdown) return;
+    if (validator) handler === null || handler === void 0 ? void 0 : handler.validate(validator); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [validator]); // Create dropdown handler
+
+  useEffect(() => {
+    if (!handler && togglerRef.current && listboxRef.current) {
+      setHandler(createDropdown({
+        id,
+        value,
+        texts,
+        options,
+        loop,
+        multiSelect,
+        searchable,
+        searchFilter,
+        compareWith,
+        useValue,
+        display,
+        validator
+      }, togglerRef.current, listboxRef.current, listboxRef.current, dd => setDropdown(dd), value => onChange === null || onChange === void 0 ? void 0 : onChange(value)));
+    }
+
+    return () => handler === null || handler === void 0 ? void 0 : handler.destroy(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [togglerRef, listboxRef]);
+  return {
+    dropdown: handler,
+    togglerProps,
+    listboxProps,
+    listItems,
+    multiSelectProps
+  };
+};
+
+const Dropdown = ({
+  id,
+  value,
+  options,
+  loop,
+  multiSelect,
+  searchable,
+  searchFilter,
+  compareWith,
+  useValue,
+  display,
+  texts,
+  onChange,
+  validator
+}) => {
+  var _a;
+
+  const togglerRef = useRef(null);
+  const listboxRef = useRef(null);
+  const {
+    dropdown,
+    listboxProps,
+    togglerProps,
+    listItems,
+    multiSelectProps
+  } = useDropdown({
+    id,
+    value,
+    options,
+    loop,
+    multiSelect,
+    searchable,
+    searchFilter,
+    compareWith,
+    useValue,
+    display,
+    togglerRef,
+    listboxRef,
+    texts,
+    onChange,
+    validator
+  });
+
+  const getListBoxProps = props => {
+    var _a, _b, _c;
+
+    if (Object.keys(props).length === 0) return {
+      role: 'listbox',
+      tabIndex: -1,
+      className: (_c = (_b = (_a = dropdownValues.elements) === null || _a === void 0 ? void 0 : _a.listbox) === null || _b === void 0 ? void 0 : _b.classes) === null || _c === void 0 ? void 0 : _c.join(' ')
+    };
+    return props;
+  };
+
+  return jsxs("div", Object.assign({
+    className: "form-group"
+  }, {
+    children: [jsx("button", Object.assign({
+      type: "button"
+    }, togglerProps, {
+      ref: togglerRef
+    }, {
+      children: jsx("span", {
+        children: togglerProps.children
+      })
+    })), jsxs("div", Object.assign({}, getListBoxProps(listboxProps), {
+      ref: listboxRef
+    }, {
+      children: [jsx("button", Object.assign({
+        type: "button",
+        className: "close m-4 m-sm-2 d-block d-sm-none",
+        onClick: dropdown === null || dropdown === void 0 ? void 0 : dropdown.close
+      }, {
+        children: jsx("span", Object.assign({
+          className: "sr-only"
+        }, {
+          children: dropdown === null || dropdown === void 0 ? void 0 : dropdown.dropdown.texts.close
+        }))
+      })), (dropdown === null || dropdown === void 0 ? void 0 : dropdown.dropdown.isMultiSelect) ? jsx("div", Object.assign({
+        className: "sg-fieldset-container"
+      }, {
+        children: jsxs("fieldset", Object.assign({}, multiSelectProps.fieldsetProps, {
+          children: [jsx("legend", Object.assign({}, multiSelectProps.legendProps)), (_a = multiSelectProps.checkboxes) === null || _a === void 0 ? void 0 : _a.map(checkboxItem => jsxs("label", Object.assign({}, checkboxItem.labelProps, {
+            children: [jsx("input", Object.assign({}, checkboxItem.inputProps)), jsx("span", Object.assign({}, checkboxItem.spanProps)), jsx("i", {})]
+          }), checkboxItem.labelProps.id))]
+        }))
+      })) : jsx("ul", Object.assign({
+        role: "listbox"
+      }, {
+        children: listItems.map(liProps => jsx("li", Object.assign({}, liProps), liProps.id))
+      }))]
+    })), validator && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: validator === null || validator === void 0 ? void 0 : validator.message
+    }))]
+  }));
 };
 
-export { Alert, Button, ButtonGroup, Card, Checkbox, EmailInput, Flexbox, Form, Group, Modal, NumberInput, TextInput };
+export { Alert, Badge, Button, ButtonGroup, Card, Checkbox, Dropdown, EmailInput, Flexbox, Form, FormItems, Group, Link, List, Modal, Navbar, NumberInput, RadioButton, RadioGroup, RenderInput, Stepper, Text, TextInput };