@sebgroup/green-react 1.7.0 → 1.8.1

package/index.js

@@ -1,6 +1,6 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useLayoutEffect, useEffect, useRef, useMemo } from 'react';
-import { randomId, debounce, validateClassName, delay, sliderColors, getSliderTrackBackground, createStepper, createDropdown, dropdownValues, createDatepicker, months, years } from '@sebgroup/extract';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useState, useEffect, useRef, useLayoutEffect, useMemo } from 'react';
+import { randomId, createDatepicker, createDropdown, dropdownValues, months, years, debounce, validateClassName, delay, sliderColors, getSliderTrackBackground, createStepper } from '@sebgroup/extract';
 import classNames from 'classnames';
 
 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$c =
+var global$d =
   // eslint-disable-next-line es/no-global-this -- safe
   check(typeof globalThis == 'object' && globalThis) ||
   check(typeof window == 'object' && window) ||
@@ -22,7 +22,7 @@ var global$c =
 
 var objectGetOwnPropertyDescriptor = {};
 
-var fails$b = function (exec) {
+var fails$c = function (exec) {
   try {
     return !!exec();
   } catch (error) {
@@ -30,17 +30,17 @@ var fails$b = function (exec) {
   }
 };
 
-var fails$a = fails$b;
+var fails$b = fails$c;
 
 // Detect IE8's incomplete defineProperty implementation
-var descriptors = !fails$a(function () {
+var descriptors = !fails$b(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7;
 });
 
-var fails$9 = fails$b;
+var fails$a = fails$c;
 
-var functionBindNative = !fails$9(function () {
+var functionBindNative = !fails$a(function () {
   // eslint-disable-next-line es/no-function-prototype-bind -- safe
   var test = (function () { /* empty */ }).bind();
   // eslint-disable-next-line no-prototype-builtins -- safe
@@ -92,24 +92,24 @@ var functionUncurryThis = NATIVE_BIND ? uncurryThisWithBind : function (fn) {
   };
 };
 
-var uncurryThis$b = functionUncurryThis;
+var uncurryThis$d = functionUncurryThis;
 
-var toString$3 = uncurryThis$b({}.toString);
-var stringSlice$2 = uncurryThis$b(''.slice);
+var toString$5 = uncurryThis$d({}.toString);
+var stringSlice$2 = uncurryThis$d(''.slice);
 
 var classofRaw$1 = function (it) {
-  return stringSlice$2(toString$3(it), 8, -1);
+  return stringSlice$2(toString$5(it), 8, -1);
 };
 
-var uncurryThis$a = functionUncurryThis;
-var fails$8 = fails$b;
+var uncurryThis$c = functionUncurryThis;
+var fails$9 = fails$c;
 var classof$2 = classofRaw$1;
 
 var $Object$4 = Object;
-var split = uncurryThis$a(''.split);
+var split = uncurryThis$c(''.split);
 
 // fallback for non-array-like ES3 and non-enumerable old V8 strings
-var indexedObject = fails$8(function () {
+var indexedObject = fails$9(function () {
   // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
   // eslint-disable-next-line no-prototype-builtins -- safe
   return !$Object$4('z').propertyIsEnumerable(0);
@@ -129,17 +129,17 @@ var $TypeError$6 = TypeError;
 
 // `RequireObjectCoercible` abstract operation
 // https://tc39.es/ecma262/#sec-requireobjectcoercible
-var requireObjectCoercible$2 = function (it) {
+var requireObjectCoercible$3 = function (it) {
   if (isNullOrUndefined$1(it)) throw $TypeError$6("Can't call method on " + it);
   return it;
 };
 
 // toObject with fallback for non-array-like ES3 strings
 var IndexedObject$1 = indexedObject;
-var requireObjectCoercible$1 = requireObjectCoercible$2;
+var requireObjectCoercible$2 = requireObjectCoercible$3;
 
 var toIndexedObject$5 = function (it) {
-  return IndexedObject$1(requireObjectCoercible$1(it));
+  return IndexedObject$1(requireObjectCoercible$2(it));
 };
 
 var documentAll$2 = typeof document == 'object' && document.all;
@@ -176,7 +176,7 @@ var isObject$6 = $documentAll.IS_HTMLDDA ? function (it) {
   return typeof it == 'object' ? it !== null : isCallable$f(it);
 };
 
-var global$b = global$c;
+var global$c = global$d;
 var isCallable$e = isCallable$g;
 
 var aFunction = function (argument) {
@@ -184,20 +184,20 @@ var aFunction = function (argument) {
 };
 
 var getBuiltIn$3 = function (namespace, method) {
-  return arguments.length < 2 ? aFunction(global$b[namespace]) : global$b[namespace] && global$b[namespace][method];
+  return arguments.length < 2 ? aFunction(global$c[namespace]) : global$c[namespace] && global$c[namespace][method];
 };
 
-var uncurryThis$9 = functionUncurryThis;
+var uncurryThis$b = functionUncurryThis;
 
-var objectIsPrototypeOf = uncurryThis$9({}.isPrototypeOf);
+var objectIsPrototypeOf = uncurryThis$b({}.isPrototypeOf);
 
 var engineUserAgent = typeof navigator != 'undefined' && String(navigator.userAgent) || '';
 
-var global$a = global$c;
+var global$b = global$d;
 var userAgent = engineUserAgent;
 
-var process = global$a.process;
-var Deno = global$a.Deno;
+var process = global$b.process;
+var Deno = global$b.Deno;
 var versions = process && process.versions || Deno && Deno.version;
 var v8 = versions && versions.v8;
 var match, version;
@@ -224,10 +224,10 @@ var engineV8Version = version;
 /* eslint-disable es/no-symbol -- required for testing */
 
 var V8_VERSION = engineV8Version;
-var fails$7 = fails$b;
+var fails$8 = fails$c;
 
 // eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
-var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$7(function () {
+var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$8(function () {
   var symbol = Symbol();
   // Chrome 38 Symbol has incorrect toString conversion
   // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
@@ -307,24 +307,24 @@ var ordinaryToPrimitive$1 = function (input, pref) {
 
 var shared$3 = {exports: {}};
 
-var global$9 = global$c;
+var global$a = global$d;
 
 // eslint-disable-next-line es/no-object-defineproperty -- safe
 var defineProperty$6 = Object.defineProperty;
 
 var defineGlobalProperty$3 = function (key, value) {
   try {
-    defineProperty$6(global$9, key, { value: value, configurable: true, writable: true });
+    defineProperty$6(global$a, key, { value: value, configurable: true, writable: true });
   } catch (error) {
-    global$9[key] = value;
+    global$a[key] = value;
   } return value;
 };
 
-var global$8 = global$c;
+var global$9 = global$d;
 var defineGlobalProperty$2 = defineGlobalProperty$3;
 
 var SHARED = '__core-js_shared__';
-var store$3 = global$8[SHARED] || defineGlobalProperty$2(SHARED, {});
+var store$3 = global$9[SHARED] || defineGlobalProperty$2(SHARED, {});
 
 var sharedStore = store$3;
 
@@ -340,20 +340,20 @@ var store$2 = sharedStore;
   source: 'https://github.com/zloirock/core-js'
 });
 
-var requireObjectCoercible = requireObjectCoercible$2;
+var requireObjectCoercible$1 = requireObjectCoercible$3;
 
 var $Object$2 = Object;
 
 // `ToObject` abstract operation
 // https://tc39.es/ecma262/#sec-toobject
 var toObject$3 = function (argument) {
-  return $Object$2(requireObjectCoercible(argument));
+  return $Object$2(requireObjectCoercible$1(argument));
 };
 
-var uncurryThis$8 = functionUncurryThis;
+var uncurryThis$a = functionUncurryThis;
 var toObject$2 = toObject$3;
 
-var hasOwnProperty = uncurryThis$8({}.hasOwnProperty);
+var hasOwnProperty = uncurryThis$a({}.hasOwnProperty);
 
 // `HasOwnProperty` abstract operation
 // https://tc39.es/ecma262/#sec-hasownproperty
@@ -362,31 +362,31 @@ var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
   return hasOwnProperty(toObject$2(it), key);
 };
 
-var uncurryThis$7 = functionUncurryThis;
+var uncurryThis$9 = functionUncurryThis;
 
 var id = 0;
 var postfix = Math.random();
-var toString$2 = uncurryThis$7(1.0.toString);
+var toString$4 = uncurryThis$9(1.0.toString);
 
 var uid$2 = function (key) {
-  return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$2(++id + postfix, 36);
+  return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$4(++id + postfix, 36);
 };
 
-var global$7 = global$c;
+var global$8 = global$d;
 var shared$2 = shared$3.exports;
 var hasOwn$9 = hasOwnProperty_1;
 var uid$1 = uid$2;
 var NATIVE_SYMBOL$1 = symbolConstructorDetection;
 var USE_SYMBOL_AS_UID = useSymbolAsUid;
 
-var Symbol$1 = global$7.Symbol;
+var Symbol$2 = global$8.Symbol;
 var WellKnownSymbolsStore = shared$2('wks');
-var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1['for'] || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || uid$1;
+var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$2['for'] || Symbol$2 : Symbol$2 && Symbol$2.withoutSetter || uid$1;
 
 var wellKnownSymbol$8 = function (name) {
   if (!hasOwn$9(WellKnownSymbolsStore, name)) {
-    WellKnownSymbolsStore[name] = NATIVE_SYMBOL$1 && hasOwn$9(Symbol$1, name)
-      ? Symbol$1[name]
+    WellKnownSymbolsStore[name] = NATIVE_SYMBOL$1 && hasOwn$9(Symbol$2, name)
+      ? Symbol$2[name]
       : createWellKnownSymbol('Symbol.' + name);
   } return WellKnownSymbolsStore[name];
 };
@@ -427,10 +427,10 @@ var toPropertyKey$2 = function (argument) {
   return isSymbol(key) ? key : key + '';
 };
 
-var global$6 = global$c;
+var global$7 = global$d;
 var isObject$3 = isObject$6;
 
-var document$1 = global$6.document;
+var document$1 = global$7.document;
 // typeof document.createElement is 'object' in old IE
 var EXISTS$1 = isObject$3(document$1) && isObject$3(document$1.createElement);
 
@@ -439,11 +439,11 @@ var documentCreateElement$2 = function (it) {
 };
 
 var DESCRIPTORS$a = descriptors;
-var fails$6 = fails$b;
+var fails$7 = fails$c;
 var createElement = documentCreateElement$2;
 
 // Thanks to IE8 for its funny defineProperty
-var ie8DomDefine = !DESCRIPTORS$a && !fails$6(function () {
+var ie8DomDefine = !DESCRIPTORS$a && !fails$7(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty(createElement('div'), 'a', {
     get: function () { return 7; }
@@ -476,11 +476,11 @@ objectGetOwnPropertyDescriptor.f = DESCRIPTORS$9 ? $getOwnPropertyDescriptor$1 :
 var objectDefineProperty = {};
 
 var DESCRIPTORS$8 = descriptors;
-var fails$5 = fails$b;
+var fails$6 = fails$c;
 
 // V8 ~ Chrome 36-
 // https://bugs.chromium.org/p/v8/issues/detail?id=3334
-var v8PrototypeDefineBug = DESCRIPTORS$8 && fails$5(function () {
+var v8PrototypeDefineBug = DESCRIPTORS$8 && fails$6(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty(function () { /* empty */ }, 'prototype', {
     value: 42,
@@ -574,11 +574,11 @@ var functionName = {
   CONFIGURABLE: CONFIGURABLE
 };
 
-var uncurryThis$6 = functionUncurryThis;
+var uncurryThis$8 = functionUncurryThis;
 var isCallable$a = isCallable$g;
 var store$1 = sharedStore;
 
-var functionToString = uncurryThis$6(Function.toString);
+var functionToString = uncurryThis$8(Function.toString);
 
 // this helper broken in `core-js@3.4.1-3.4.4`, so we can't use `shared` helper
 if (!isCallable$a(store$1.inspectSource)) {
@@ -589,10 +589,10 @@ if (!isCallable$a(store$1.inspectSource)) {
 
 var inspectSource$1 = store$1.inspectSource;
 
-var global$5 = global$c;
+var global$6 = global$d;
 var isCallable$9 = isCallable$g;
 
-var WeakMap$1 = global$5.WeakMap;
+var WeakMap$1 = global$6.WeakMap;
 
 var weakMapBasicDetection = isCallable$9(WeakMap$1) && /native code/.test(String(WeakMap$1));
 
@@ -608,7 +608,7 @@ var sharedKey$3 = function (key) {
 var hiddenKeys$4 = {};
 
 var NATIVE_WEAK_MAP = weakMapBasicDetection;
-var global$4 = global$c;
+var global$5 = global$d;
 var isObject$1 = isObject$6;
 var createNonEnumerableProperty$3 = createNonEnumerableProperty$4;
 var hasOwn$6 = hasOwnProperty_1;
@@ -617,8 +617,8 @@ var sharedKey$2 = sharedKey$3;
 var hiddenKeys$3 = hiddenKeys$4;
 
 var OBJECT_ALREADY_INITIALIZED = 'Object already initialized';
-var TypeError$1 = global$4.TypeError;
-var WeakMap = global$4.WeakMap;
+var TypeError$1 = global$5.TypeError;
+var WeakMap = global$5.WeakMap;
 var set, get, has;
 
 var enforce = function (it) {
@@ -678,8 +678,8 @@ var internalState = {
   getterFor: getterFor
 };
 
-var uncurryThis$5 = functionUncurryThis;
-var fails$4 = fails$b;
+var uncurryThis$7 = functionUncurryThis;
+var fails$5 = fails$c;
 var isCallable$8 = isCallable$g;
 var hasOwn$5 = hasOwnProperty_1;
 var DESCRIPTORS$4 = descriptors;
@@ -692,11 +692,11 @@ var getInternalState$1 = InternalStateModule$1.get;
 var $String$2 = String;
 // eslint-disable-next-line es/no-object-defineproperty -- safe
 var defineProperty$5 = Object.defineProperty;
-var stringSlice$1 = uncurryThis$5(''.slice);
-var replace$1 = uncurryThis$5(''.replace);
-var join = uncurryThis$5([].join);
+var stringSlice$1 = uncurryThis$7(''.slice);
+var replace$2 = uncurryThis$7(''.replace);
+var join = uncurryThis$7([].join);
 
-var CONFIGURABLE_LENGTH = DESCRIPTORS$4 && !fails$4(function () {
+var CONFIGURABLE_LENGTH = DESCRIPTORS$4 && !fails$5(function () {
   return defineProperty$5(function () { /* empty */ }, 'length', { value: 8 }).length !== 8;
 });
 
@@ -704,7 +704,7 @@ var TEMPLATE = String(String).split('String');
 
 var makeBuiltIn$2 = makeBuiltIn$3.exports = function (value, name, options) {
   if (stringSlice$1($String$2(name), 0, 7) === 'Symbol(') {
-    name = '[' + replace$1($String$2(name), /^Symbol\(([^)]*)\)/, '$1') + ']';
+    name = '[' + replace$2($String$2(name), /^Symbol\(([^)]*)\)/, '$1') + ']';
   }
   if (options && options.getter) name = 'get ' + name;
   if (options && options.setter) name = 'set ' + name;
@@ -820,7 +820,7 @@ var toAbsoluteIndex = toAbsoluteIndex$1;
 var lengthOfArrayLike = lengthOfArrayLike$1;
 
 // `Array.prototype.{ indexOf, includes }` methods implementation
-var createMethod = function (IS_INCLUDES) {
+var createMethod$1 = function (IS_INCLUDES) {
   return function ($this, el, fromIndex) {
     var O = toIndexedObject$3($this);
     var length = lengthOfArrayLike(O);
@@ -842,19 +842,19 @@ var createMethod = function (IS_INCLUDES) {
 var arrayIncludes = {
   // `Array.prototype.includes` method
   // https://tc39.es/ecma262/#sec-array.prototype.includes
-  includes: createMethod(true),
+  includes: createMethod$1(true),
   // `Array.prototype.indexOf` method
   // https://tc39.es/ecma262/#sec-array.prototype.indexof
-  indexOf: createMethod(false)
+  indexOf: createMethod$1(false)
 };
 
-var uncurryThis$4 = functionUncurryThis;
+var uncurryThis$6 = functionUncurryThis;
 var hasOwn$4 = hasOwnProperty_1;
 var toIndexedObject$2 = toIndexedObject$5;
 var indexOf = arrayIncludes.indexOf;
 var hiddenKeys$2 = hiddenKeys$4;
 
-var push = uncurryThis$4([].push);
+var push = uncurryThis$6([].push);
 
 var objectKeysInternal = function (object, names) {
   var O = toIndexedObject$2(object);
@@ -898,12 +898,12 @@ var objectGetOwnPropertySymbols = {};
 objectGetOwnPropertySymbols.f = Object.getOwnPropertySymbols;
 
 var getBuiltIn$1 = getBuiltIn$3;
-var uncurryThis$3 = functionUncurryThis;
+var uncurryThis$5 = functionUncurryThis;
 var getOwnPropertyNamesModule = objectGetOwnPropertyNames;
 var getOwnPropertySymbolsModule$1 = objectGetOwnPropertySymbols;
 var anObject$3 = anObject$5;
 
-var concat$1 = uncurryThis$3([].concat);
+var concat$1 = uncurryThis$5([].concat);
 
 // all object keys, includes non-enumerable and symbols
 var ownKeys$1 = getBuiltIn$1('Reflect', 'ownKeys') || function ownKeys(it) {
@@ -929,7 +929,7 @@ var copyConstructorProperties$2 = function (target, source, exceptions) {
   }
 };
 
-var fails$3 = fails$b;
+var fails$4 = fails$c;
 var isCallable$6 = isCallable$g;
 
 var replacement = /#|\.prototype\./;
@@ -938,7 +938,7 @@ var isForced$1 = function (feature, detection) {
   var value = data[normalize(feature)];
   return value == POLYFILL ? true
     : value == NATIVE ? false
-    : isCallable$6(detection) ? fails$3(detection)
+    : isCallable$6(detection) ? fails$4(detection)
     : !!detection;
 };
 
@@ -952,7 +952,7 @@ var POLYFILL = isForced$1.POLYFILL = 'P';
 
 var isForced_1 = isForced$1;
 
-var global$3 = global$c;
+var global$4 = global$d;
 var getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f;
 var createNonEnumerableProperty$2 = createNonEnumerableProperty$4;
 var defineBuiltIn$2 = defineBuiltIn$3;
@@ -981,11 +981,11 @@ var _export = function (options, source) {
   var STATIC = options.stat;
   var FORCED, target, key, targetProperty, sourceProperty, descriptor;
   if (GLOBAL) {
-    target = global$3;
+    target = global$4;
   } else if (STATIC) {
-    target = global$3[TARGET] || defineGlobalProperty(TARGET, {});
+    target = global$4[TARGET] || defineGlobalProperty(TARGET, {});
   } else {
-    target = (global$3[TARGET] || {}).prototype;
+    target = (global$4[TARGET] || {}).prototype;
   }
   if (target) for (key in source) {
     sourceProperty = source[key];
@@ -1018,9 +1018,9 @@ var objectKeys$2 = Object.keys || function keys(O) {
 };
 
 var DESCRIPTORS$3 = descriptors;
-var uncurryThis$2 = functionUncurryThis;
+var uncurryThis$4 = functionUncurryThis;
 var call$1 = functionCall;
-var fails$2 = fails$b;
+var fails$3 = fails$c;
 var objectKeys$1 = objectKeys$2;
 var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
 var propertyIsEnumerableModule = objectPropertyIsEnumerable;
@@ -1031,11 +1031,11 @@ var IndexedObject = indexedObject;
 var $assign = Object.assign;
 // eslint-disable-next-line es/no-object-defineproperty -- required for testing
 var defineProperty$4 = Object.defineProperty;
-var concat = uncurryThis$2([].concat);
+var concat = uncurryThis$4([].concat);
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
-var objectAssign = !$assign || fails$2(function () {
+var objectAssign = !$assign || fails$3(function () {
   // should have correct order of operations (Edge bug)
   if (DESCRIPTORS$3 && $assign({ b: 1 }, $assign(defineProperty$4({}, 'a', {
     enumerable: true,
@@ -1074,178 +1074,16 @@ var objectAssign = !$assign || fails$2(function () {
   } return T;
 } : $assign;
 
-var $$2 = _export;
+var $$3 = _export;
 var assign = objectAssign;
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
 // eslint-disable-next-line es/no-object-assign -- required for testing
-$$2({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
+$$3({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
   assign: assign
 });
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function Button({
-  children,
-  variant,
-  onClick,
-  disabled,
-  active = false,
-  type = 'button',
-  size
-}) {
-  const props = {
-    type,
-    disabled
-  };
-  const classNames = [];
-  if (variant) classNames.push(variant);
-  if (active) classNames.push('active');
-  if (size) classNames.push(size);
-  if (classNames.length) props.className = classNames.join(' ');
-  if (onClick) props.onClick = onClick;
-  return jsx("button", Object.assign({}, props, {
-    children: children
-  }));
-}
-
-const ModalHeader = ({
-  header: _header = '',
-  onClose
-}) => {
-  const handleClose = event => {
-    if (onClose) onClose(event);
-  };
-  return jsxs("div", Object.assign({
-    className: "header"
-  }, {
-    children: [jsx("h3", {
-      children: _header
-    }), jsxs("button", Object.assign({
-      className: "close",
-      onClick: handleClose
-    }, {
-      children: [jsx("span", Object.assign({
-        className: "sr-only"
-      }, {
-        children: "Close"
-      })), jsx("i", {})]
-    }))]
-  }));
-};
-const ModalBody = ({
-  children
-}) => {
-  return jsx("div", Object.assign({
-    className: "body"
-  }, {
-    children: children
-  }));
-};
-const ModalFooter = ({
-  confirm,
-  dismiss,
-  onClose,
-  onConfirm,
-  onDismiss
-}) => {
-  const handleConfirm = event => {
-    if (onConfirm) onConfirm(event);
-    if (onClose) onClose(event);
-  };
-  const handleDismiss = event => {
-    if (onDismiss) onDismiss(event);
-    if (onClose) onClose(event);
-  };
-  return jsxs("div", Object.assign({
-    className: "footer"
-  }, {
-    children: [dismiss && jsx(Button, Object.assign({
-      variant: "secondary",
-      onClick: handleDismiss
-    }, {
-      children: dismiss
-    })), confirm && jsx(Button, Object.assign({
-      variant: "primary",
-      onClick: handleConfirm
-    }, {
-      children: confirm
-    }))]
-  }));
-};
-const Modal = _a => {
-  var {
-      type = 'default',
-      isOpen
-    } = _a,
-    props = __rest(_a, ["type", "isOpen"]);
-  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 objectDefineProperties = {};
 
 var DESCRIPTORS$2 = descriptors;
@@ -1381,9 +1219,9 @@ var addToUnscopables$1 = function (key) {
 
 var iterators = {};
 
-var fails$1 = fails$b;
+var fails$2 = fails$c;
 
-var correctPrototypeGetter = !fails$1(function () {
+var correctPrototypeGetter = !fails$2(function () {
   function F() { /* empty */ }
   F.prototype.constructor = null;
   // eslint-disable-next-line es/no-object-getprototypeof -- required for testing
@@ -1412,14 +1250,14 @@ var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object$1.getPrototypeOf :
   } return object instanceof $Object$1 ? ObjectPrototype : null;
 };
 
-var fails = fails$b;
+var fails$1 = fails$c;
 var isCallable$4 = isCallable$g;
 var isObject = isObject$6;
 var getPrototypeOf$1 = objectGetPrototypeOf;
 var defineBuiltIn$1 = defineBuiltIn$3;
 var wellKnownSymbol$5 = wellKnownSymbol$8;
 
-var ITERATOR$2 = wellKnownSymbol$5('iterator');
+var ITERATOR$3 = wellKnownSymbol$5('iterator');
 var BUGGY_SAFARI_ITERATORS$1 = false;
 
 // `%IteratorPrototype%` object
@@ -1437,18 +1275,18 @@ if ([].keys) {
   }
 }
 
-var NEW_ITERATOR_PROTOTYPE = !isObject(IteratorPrototype$2) || fails(function () {
+var NEW_ITERATOR_PROTOTYPE = !isObject(IteratorPrototype$2) || fails$1(function () {
   var test = {};
   // FF44- legacy iterators case
-  return IteratorPrototype$2[ITERATOR$2].call(test) !== test;
+  return IteratorPrototype$2[ITERATOR$3].call(test) !== test;
 });
 
 if (NEW_ITERATOR_PROTOTYPE) IteratorPrototype$2 = {};
 
 // `%IteratorPrototype%[@@iterator]()` method
 // https://tc39.es/ecma262/#sec-%iteratorprototype%-@@iterator
-if (!isCallable$4(IteratorPrototype$2[ITERATOR$2])) {
-  defineBuiltIn$1(IteratorPrototype$2, ITERATOR$2, function () {
+if (!isCallable$4(IteratorPrototype$2[ITERATOR$3])) {
+  defineBuiltIn$1(IteratorPrototype$2, ITERATOR$3, function () {
     return this;
   });
 }
@@ -1487,13 +1325,13 @@ var iteratorCreateConstructor = function (IteratorConstructor, NAME, next, ENUME
   return IteratorConstructor;
 };
 
-var uncurryThis$1 = functionUncurryThis;
+var uncurryThis$3 = functionUncurryThis;
 var aCallable = aCallable$2;
 
 var functionUncurryThisAccessor = function (object, key, method) {
   try {
     // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
-    return uncurryThis$1(aCallable(Object.getOwnPropertyDescriptor(object, key)[method]));
+    return uncurryThis$3(aCallable(Object.getOwnPropertyDescriptor(object, key)[method]));
   } catch (error) { /* empty */ }
 };
 
@@ -1535,7 +1373,7 @@ var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? functio
   };
 }() : undefined);
 
-var $$1 = _export;
+var $$2 = _export;
 var call = functionCall;
 var FunctionName = functionName;
 var isCallable$2 = isCallable$g;
@@ -1553,7 +1391,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$1 = wellKnownSymbol$3('iterator');
+var ITERATOR$2 = wellKnownSymbol$3('iterator');
 var KEYS = 'keys';
 var VALUES = 'values';
 var ENTRIES = 'entries';
@@ -1576,7 +1414,7 @@ var iteratorDefine = function (Iterable, NAME, IteratorConstructor, next, DEFAUL
   var TO_STRING_TAG = NAME + ' Iterator';
   var INCORRECT_VALUES_NAME = false;
   var IterablePrototype = Iterable.prototype;
-  var nativeIterator = IterablePrototype[ITERATOR$1]
+  var nativeIterator = IterablePrototype[ITERATOR$2]
     || IterablePrototype['@@iterator']
     || DEFAULT && IterablePrototype[DEFAULT];
   var defaultIterator = !BUGGY_SAFARI_ITERATORS && nativeIterator || getIterationMethod(DEFAULT);
@@ -1590,8 +1428,8 @@ var iteratorDefine = function (Iterable, NAME, IteratorConstructor, next, DEFAUL
       if (getPrototypeOf(CurrentIteratorPrototype) !== IteratorPrototype) {
         if (setPrototypeOf) {
           setPrototypeOf(CurrentIteratorPrototype, IteratorPrototype);
-        } else if (!isCallable$2(CurrentIteratorPrototype[ITERATOR$1])) {
-          defineBuiltIn(CurrentIteratorPrototype, ITERATOR$1, returnThis);
+        } else if (!isCallable$2(CurrentIteratorPrototype[ITERATOR$2])) {
+          defineBuiltIn(CurrentIteratorPrototype, ITERATOR$2, returnThis);
         }
       }
       // Set @@toStringTag to native iterators
@@ -1620,12 +1458,12 @@ var iteratorDefine = function (Iterable, NAME, IteratorConstructor, next, DEFAUL
       if (BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME || !(KEY in IterablePrototype)) {
         defineBuiltIn(IterablePrototype, KEY, methods[KEY]);
       }
-    } else $$1({ target: NAME, proto: true, forced: BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME }, methods);
+    } else $$2({ target: NAME, proto: true, forced: BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME }, methods);
   }
 
   // define iterator
-  if (IterablePrototype[ITERATOR$1] !== defaultIterator) {
-    defineBuiltIn(IterablePrototype, ITERATOR$1, defaultIterator, { name: DEFAULT });
+  if (IterablePrototype[ITERATOR$2] !== defaultIterator) {
+    defineBuiltIn(IterablePrototype, ITERATOR$2, defaultIterator, { name: DEFAULT });
   }
   Iterators$1[NAME] = defaultIterator;
 
@@ -1743,24 +1581,24 @@ var DOMTokenListPrototype$1 = classList && classList.constructor && classList.co
 
 var domTokenListPrototype = DOMTokenListPrototype$1 === Object.prototype ? undefined : DOMTokenListPrototype$1;
 
-var global$2 = global$c;
+var global$3 = global$d;
 var DOMIterables = domIterables;
 var DOMTokenListPrototype = domTokenListPrototype;
 var ArrayIteratorMethods = es_array_iterator;
 var createNonEnumerableProperty = createNonEnumerableProperty$4;
 var wellKnownSymbol$2 = wellKnownSymbol$8;
 
-var ITERATOR = wellKnownSymbol$2('iterator');
+var ITERATOR$1 = 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] !== ArrayValues) try {
-      createNonEnumerableProperty(CollectionPrototype, ITERATOR, ArrayValues);
+    if (CollectionPrototype[ITERATOR$1] !== ArrayValues) try {
+      createNonEnumerableProperty(CollectionPrototype, ITERATOR$1, ArrayValues);
     } catch (error) {
-      CollectionPrototype[ITERATOR] = ArrayValues;
+      CollectionPrototype[ITERATOR$1] = ArrayValues;
     }
     if (!CollectionPrototype[TO_STRING_TAG$2]) {
       createNonEnumerableProperty(CollectionPrototype, TO_STRING_TAG$2, COLLECTION_NAME);
@@ -1777,82 +1615,65 @@ var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
 };
 
 for (var COLLECTION_NAME in DOMIterables) {
-  handlePrototype(global$2[COLLECTION_NAME] && global$2[COLLECTION_NAME].prototype, COLLECTION_NAME);
+  handlePrototype(global$3[COLLECTION_NAME] && global$3[COLLECTION_NAME].prototype, COLLECTION_NAME);
 }
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-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 [flexClassName, setFlexClassName] = useState('d-flex');
-  // // update className when classes change
-  useLayoutEffect(() => {
-    const newClassName = classes.join(' ');
-    if (newClassName !== flexClassName) setFlexClassName(newClassName);
-  }, [classes, flexClassName]);
-  // // update classes when props change
-  useLayoutEffect(() => {
-    const newClasses = ['d-flex'];
-    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, flexDirection, flexWrap, className]);
-  return jsx("div", Object.assign({
-    className: flexClassName
-  }, props, {
-    children: children
-  }));
-};
-
-function Card({
-  children,
-  header,
-  footer
-}) {
-  return jsxs("section", Object.assign({
-    className: "card"
-  }, {
-    children: [jsx("header", {
-      children: header
-    }), children, jsx("footer", {
-      children: footer
-    })]
-  }));
-}
-
-const Check = ({
-  focusable: _focusable = false,
-  title
-}) => {
-  let id;
-  if (title) id = randomId();
-  return jsxs("svg", Object.assign({
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    focusable: _focusable,
-    "aria-labelledby": id
-  }, {
-    children: ["title && ", jsx("title", Object.assign({
-      id: id
-    }, {
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(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 Check = ({
+  focusable: _focusable = false,
+  title
+}) => {
+  let id;
+  if (title) id = randomId();
+  return jsxs("svg", Object.assign({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    focusable: _focusable,
+    "aria-labelledby": id
+  }, {
+    children: ["title && ", jsx("title", Object.assign({
+      id: id
+    }, {
       children: title
     })), jsx("path", {
       d: "M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z",
@@ -2073,441 +1894,948 @@ function AlertRibbon({
   }));
 }
 
-const IconButton = _a => {
+function Badge(_a) {
   var {
       children,
-      onClick
+      badgeType,
+      isCloseable,
+      closeText,
+      customColor,
+      customBackgroundColor
     } = _a,
-    props = __rest(_a, ["children", "onClick"]);
-  return jsx("button", Object.assign({
-    className: "icon",
-    onClick: onClick,
-    "aria-controls": props['aria-controls'],
-    "aria-expanded": props['aria-expanded']
+    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('');
+    }
+  }, [badgeType, customColor, customBackgroundColor]);
+  return !isClosed ? jsxs("span", Object.assign({}, props, {
+    className: `badge ${type}`,
+    style: {
+      color: customColor,
+      backgroundColor: customBackgroundColor
+    }
   }, {
-    children: children
-  }));
-};
+    children: [jsx("strong", {
+      children: children
+    }), isCloseable && jsxs("button", Object.assign({
+      type: "button",
+      className: "close",
+      onClick: () => setIsClosed(true)
+    }, {
+      children: [closeText, jsx("i", {})]
+    }))]
+  })) : null;
+}
 
-const ButtonGroup = ({
+function Card({
   children,
-  selectedIndex,
-  variant,
-  id
-}) => {
-  const [selected, setSelected] = useState(selectedIndex);
-  const [buttons, setButtons] = useState([]);
-  useEffect(() => {
-    const buttonProps = (children instanceof Array ? children : [children]).filter(b => b && b.props).map((b, ix) => {
-      const bp = b.props;
-      const props = Object.assign(Object.assign({}, bp), {
-        variant,
-        key: bp.key || `btn_${ix}`,
-        active: ix === selected,
-        onClick: e => {
-          setSelected(ix);
-          if (bp.onClick) bp.onClick(e);
-        }
-      });
-      return props;
-    });
-    setButtons(buttonProps);
-  }, [children, selected, variant]);
-  return jsx(Group, Object.assign({
-    "data-label": "button-group",
-    id: id
+  header,
+  footer
+}) {
+  return jsxs("section", Object.assign({
+    className: "card"
   }, {
-    children: buttons.map(props => jsx(Button, Object.assign({}, props), props.key))
+    children: [jsx("header", {
+      children: header
+    }), children, jsx("footer", {
+      children: footer
+    })]
   }));
-};
-
-/* eslint-disable-next-line */
-const validateInputValue = (target, rules, setError) => {
-  const errorMessage = validateInputValueErrors(rules, target);
-  errorMessage ? setErrorInsert(setError, target.name) : setErrorRemove(setError, target.name);
-  return errorMessage;
-};
-const validateInputValueErrors = (rules, target) => {
-  const {
-    value
-  } = target;
-  if ((rules === null || rules === void 0 ? void 0 : rules.custom) instanceof Function) {
-    return rules === null || rules === void 0 ? void 0 : rules.custom();
-  }
-  return validateTextInputValues(value, rules);
-};
-/* eslint-disable-next-line */
-const setErrorInsert = (setError, name) => {
-  /* eslint-disable-next-line */
-  setError(errors => {
-    return Object.assign(Object.assign({}, errors), {
-      [name]: true
-    });
-  });
-};
-/* eslint-disable-next-line */
-const setErrorRemove = (setError, name) => {
-  /* eslint-disable-next-line */
-  setError(errors => {
-    /* eslint-disable-next-line */
-    const newError = Object.assign({}, errors);
-    delete newError[name];
-    return newError;
-  });
-};
-const validateTextInputValues = (value, rules) => {
-  switch (rules === null || rules === void 0 ? void 0 : rules.type) {
-    case 'Required':
-      {
-        return value === '' || value === undefined || value === null ? 'error' : null;
-      }
-    default:
-      {
-        return;
-      }
-  }
-};
+}
 
-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"]);
-  /* eslint-disable-next-line */
-  const [values, setValues] = React.useState();
-  /* eslint-disable-next-line */
-  const [errors, setErrors] = React.useState();
-  /* eslint-disable-next-line */
-  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;
-    });
-    if (!hasError) {
-      onFormSubmit && onFormSubmit(values);
+const useDatepicker = (datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options = {}) => {
+  const dataStub = {
+    formattedSelectedDate: '',
+    calendar: {
+      headers: [],
+      calendarGrid: []
     }
   };
-  const resetForm = () => {
-    setValues({});
-    setErrors({});
-  };
-  return jsx(FormContext.Provider, Object.assign({
-    value: {
-      setValues,
-      setErrors,
-      setFields,
-      errors,
-      values
+  const [data, setData] = useState(dataStub);
+  const [state, setState] = useState({
+    isActive: false
+  });
+  const datepickerStub = {};
+  const [datepicker, setDatepicker] = useState(datepickerStub);
+  useEffect(() => {
+    if (!datepicker.open && datepickerRef.current && datepickerDialogRef.current && dateInputRef.current && datepickerTriggerRef.current) {
+      setDatepicker(createDatepicker((data, state) => {
+        if (data) setData(data);
+        if (state) setState(state);
+      }, options, datepickerRef.current, datepickerDialogRef.current, dateInputRef.current, datepickerTriggerRef.current));
     }
-  }, {
-    children: jsx("form", Object.assign({
-      className: [direction, `size-${formSize}`].join(' '),
-      onSubmit: formSubmit
-    }, props, {
-      onReset: resetForm
-    }, {
-      children: children
-    }))
-  }));
-};
-
-const Form = props => {
-  return jsx(FormProvider, Object.assign({}, props));
+  }, [datepicker, datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options]);
+  return {
+    datepicker,
+    data,
+    state
+  };
 };
 
-const FormItems = ({
-  children,
-  validate,
-  name
+const useDropdown = ({
+  id,
+  value,
+  texts,
+  options,
+  loop,
+  multiSelect,
+  searchable,
+  searchFilter,
+  compareWith,
+  useValue,
+  display,
+  togglerRef,
+  listboxRef,
+  onChange,
+  validator
 }) => {
-  const {
-    setValues,
-    setErrors,
-    setFields,
-    errors
-  } = useFormContext();
-  React.useEffect(() => {
-    /* eslint-disable-next-line */
-    setFields(fields => Object.assign(Object.assign({}, fields), {
-      [name]: validate === null || validate === void 0 ? void 0 : validate.rules
-    }));
-    /* eslint-disable-next-line */
-    const removeValues = values => {
-      /* eslint-disable-next-line */
-      const newValues = Object.assign({}, values);
-      delete newValues[name];
-      return newValues;
-    };
-    return () => {
-      /* eslint-disable-next-line */
-      setFields(fields => removeValues(fields));
-      /* eslint-disable-next-line */
-      setValues(values => removeValues(values));
-      /* eslint-disable-next-line */
-      setErrors(errors => removeValues(errors));
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const onChange = event => {
-    if (!event.target) return;
+  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 {
-      value,
-      name,
-      type,
-      checked
-    } = event.target;
-    let inputValue;
-    if (type === 'checkbox') {
-      inputValue = checked ? value : null;
-      /* eslint-disable-next-line */
-      checked ? setValues(values => Object.assign(Object.assign({}, values), {
-        [name]: value
-      })) : setValues(values => Object.assign(Object.assign({}, values), {
-        [name]: null
-      }));
+      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 {
-      inputValue = value;
-      /* eslint-disable-next-line */
-      setValues(values => Object.assign(Object.assign({}, values), {
-        [name]: value
+      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);
     }
-    validateInputValue({
-      value: inputValue,
-      name,
-      type,
-      checked
-    }, validate === null || validate === void 0 ? void 0 : validate.rules, setErrors);
+    // 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
   };
-  /* eslint-disable-next-line */
-  return /*#__PURE__*/React.cloneElement(children, {
-    validator: (errors === null || errors === void 0 ? void 0 : errors[name]) && validate,
-    name,
-    onChange
-  });
 };
 
-function Group({
+const Dropdown = ({
+  compareWith,
+  display,
   id,
-  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",
-    id: id
-  }, {
-    children: [jsx("div", Object.assign({
-      className: groupClassName
-    }, {
-      children: children
-    })), error && jsx("span", Object.assign({
-      className: "form-info"
-    }, {
-      children: errorMessage
-    }))]
-  }));
-}
-
-const FormItem = ({
-  expandableInfo,
+  informationLabel,
   label,
-  labelInformation,
+  loop,
+  multiSelect,
+  onChange,
+  options,
+  searchFilter,
+  searchable,
+  texts,
+  useValue,
   validator,
-  inputId,
-  children,
-  expandableInfoButtonLabel,
-  role
+  value
 }) => {
-  const expandableInnerRef = useRef(null);
-  const expandableRef = useRef(null);
-  const [expandableHeight, setExpandableHeight] = useState(0);
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [isHidden, setIsHidden] = useState(false);
-  useLayoutEffect(() => {
-    expandableInnerRef.current && setExpandableHeight(expandableInnerRef.current['clientHeight']);
-    setIsHidden(true);
-  }, []);
-  useEffect(() => {
-    const handleResize = debounce(function setExpandableHeightAfterResize() {
-      isExpanded && expandableInnerRef.current && setExpandableHeight(expandableInnerRef.current['clientHeight']);
-    }, 300);
-    if (expandableRef.current) {
-      window.addEventListener('resize', handleResize);
-    }
-    return () => {
-      window.removeEventListener('resize', handleResize);
+  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(' ')
     };
-  }, [isExpanded, expandableInnerRef]);
-  if (!inputId) inputId = randomId();
-  const formItemClassNames = classNames('gds-form-item', validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
+    return props;
+  };
   return jsxs("div", Object.assign({
-    className: formItemClassNames,
-    role: role ? role : undefined,
-    "aria-labelledby": role ? `${inputId}-label` : undefined
+    className: "form-group"
   }, {
-    children: [expandableInfo && jsx("div", {
-      className: "gds-form-item__backdrop"
-    }), jsxs("div", Object.assign({
-      className: "gds-form-item__header"
+    children: [label && jsx("label", Object.assign({
+      htmlFor: togglerProps.id
+    }, {
+      children: label
+    })), informationLabel && jsx("div", Object.assign({
+      className: "form-info"
+    }, {
+      children: informationLabel
+    })), jsx("button", Object.assign({
+      type: "button"
+    }, togglerProps, {
+      ref: togglerRef
+    }, {
+      children: jsx("span", {
+        children: togglerProps.children
+      })
+    })), jsxs("div", Object.assign({}, getListBoxProps(listboxProps), {
+      ref: listboxRef
     }, {
       children: [jsxs("div", Object.assign({
-        className: "gds-form-item__labels"
+        className: "d-flex d-sm-none align-items-center"
       }, {
-        children: [label && jsx("label", Object.assign({
-          id: role ? `${inputId}-label` : undefined,
-          htmlFor: role ? undefined : inputId
+        children: [jsx("span", Object.assign({
+          className: "flex-grow-1 ps-4 fs-2 fw-bolder"
         }, {
           children: label
-        })), labelInformation && jsx("div", Object.assign({
-          className: "form-info",
-          id: `${inputId}_info`
+        })), 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,
+          "aria-label": dropdown === null || dropdown === void 0 ? void 0 : dropdown.dropdown.texts.close
         }, {
-          children: labelInformation
+          children: jsx("i", {})
         }))]
-      })), expandableInfo && jsx(IconButton, Object.assign({
-        "aria-expanded": isExpanded,
-        "aria-controls": `${inputId}-expandable-info`,
-        onClick: event => __awaiter(void 0, void 0, void 0, function* () {
-          if (!isExpanded) {
-            setIsHidden(false);
-            yield delay(10);
-            expandableInnerRef.current && setExpandableHeight(expandableInnerRef.current['clientHeight']);
-            setIsExpanded(true);
-          } else {
-            setIsExpanded(false);
-            yield delay(300);
-            setIsHidden(true);
-          }
-        })
+      })), (dropdown === null || dropdown === void 0 ? void 0 : dropdown.dropdown.isMultiSelect) ? jsx("div", Object.assign({
+        className: "sg-fieldset-container"
       }, {
-        children: isExpanded ? jsx(Times, {
-          title: expandableInfoButtonLabel
-        }) : jsx(InfoCircle, {
-          title: expandableInfoButtonLabel
-        })
-      }))]
-    })), expandableInfo && jsx("div", Object.assign({
-      ref: expandableRef,
-      id: `gds-expandable-info-${inputId}`,
-      className: "gds-form-item__expandable-info",
-      hidden: isHidden,
-      style: {
-        height: isExpanded ? expandableHeight : 0
-      }
-    }, {
-      children: jsxs("div", Object.assign({
-        ref: expandableInnerRef
+        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: [" ", expandableInfo, " "]
-      }))
-    })), children, jsx("div", Object.assign({
-      className: "gds-form-item__footer"
+        children: listItems.map(liProps => jsx("li", Object.assign({}, liProps), liProps.id))
+      }))]
+    })), validator && jsx("span", Object.assign({
+      className: "form-info"
     }, {
-      children: validator && jsx("span", Object.assign({
-        className: "form-info"
-      }, {
-        children: validator.message
-      }))
+      children: validator === null || validator === void 0 ? void 0 : validator.message
     }))]
   }));
 };
 
-const useInput = (props, onChanges, onChangeInput) => {
-  const id = useMemo(() => props.id || randomId(), [props.id]);
-  const ref = useRef(null);
-  const onChange = event => {
-    onChanges && onChanges(event);
-    onChangeInput && onChangeInput(event.target.value);
-  };
-  return Object.assign(Object.assign({}, props), {
-    id,
-    ref,
-    onChange
-  });
-};
-
-const RenderInput = (type, props, onChange, onChangeInput, label, info, validator, expandableInfo, expandableInfoButtonLabel, testId) => {
-  const _a = useInput(props, onChange, onChangeInput),
-    {
-      value
-    } = _a,
-    inputProps = __rest(_a, ["value"]);
-  const propsWithDescription = info ? Object.assign(Object.assign({}, inputProps), {
-    'aria-describedby': `${inputProps.id}_info`
-  }) : inputProps;
-  // Render naked
-  if (!label && !info && !expandableInfo) return jsx("input", Object.assign({
-    type: type,
-    value: value,
-    "data-testid": testId
-  }, propsWithDescription));
-  return jsx(FormItem, Object.assign({
-    validator: validator,
-    labelInformation: info,
-    label: label,
-    expandableInfo: expandableInfo,
-    expandableInfoButtonLabel: expandableInfoButtonLabel,
-    inputId: inputProps.id
-  }, {
-    children: jsx("div", Object.assign({
-      className: "gds-input-wrapper"
+const Datepicker = (options = {}) => {
+  const [uuid] = useState(randomId());
+  const id = `sgr-datepicker-${uuid}`;
+  const datepickerRef = useRef(null);
+  const datepickerTriggerRef = useRef(null);
+  const datepickerDialogRef = useRef(null);
+  const dateInputRef = useRef(null);
+  const {
+    datepicker,
+    data,
+    state
+  } = useDatepicker(datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options);
+  useEffect(() => {
+    var _a;
+    const selDateSub = (_a = datepicker.selectedDate$) === null || _a === void 0 ? void 0 : _a.subscribe(newDate => options.onChange && options.onChange(newDate));
+    return () => selDateSub === null || selDateSub === void 0 ? void 0 : selDateSub.unsubscribe();
+  }, [datepicker, options]);
+  const classNames = day => Object.entries({
+    disabled: !day.currentMonth,
+    'sg-date-today': day.today
+    // 'sg-date-holiday': day.holiday,
+  }).map(([className, add]) => add ? className : '').join(' ');
+  return jsxs(Fragment, {
+    children: [jsxs("div", Object.assign({
+      className: "form-group"
     }, {
-      children: jsx("input", Object.assign({
-        type: type,
-        value: value
-      }, propsWithDescription, {
-        className: validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator),
-        "data-testid": testId
-      }))
-    }))
-  }));
-};
-const TextInput = _a => {
-  var {
-      label,
-      info,
-      testId,
-      onChange,
-      onChangeInput,
-      validator,
-      expandableInfo,
-      expandableInfoButtonLabel
-    } = _a,
-    props = __rest(_a, ["label", "info", "testId", "onChange", "onChangeInput", "validator", "expandableInfo", "expandableInfoButtonLabel"]);
-  return RenderInput('text', props, onChange, onChangeInput, label, info, validator, expandableInfo, expandableInfoButtonLabel, testId);
-};
-const EmailInput = _a => {
-  var {
-      label,
-      info,
-      onChange,
-      onChangeInput,
-      validator,
-      testId
-    } = _a,
-    props = __rest(_a, ["label", "info", "onChange", "onChangeInput", "validator", "testId"]);
-  return RenderInput('email', props, onChange, onChangeInput, label, info, validator, testId);
-};
-const NumberInput = _a => {
-  var {
-      label,
+      children: [jsx("label", Object.assign({
+        htmlFor: id
+      }, {
+        children: "Date"
+      })), jsxs("div", Object.assign({
+        className: "group",
+        ref: datepickerRef
+      }, {
+        children: [jsx("input", {
+          ref: dateInputRef,
+          id: id,
+          type: "text",
+          placeholder: "yyyy-mm-dd",
+          value: data.formattedSelectedDate,
+          onChange: e => datepicker.select(e.target.value)
+        }), jsx("button", Object.assign({
+          ref: datepickerTriggerRef,
+          type: "button",
+          className: "primary",
+          onClick: () => datepicker.toggle()
+        }, {
+          children: jsx("i", Object.assign({
+            className: "sg-icon sg-icon-calendar"
+          }, {
+            children: "Select date"
+          }))
+        }))]
+      })), jsx("span", Object.assign({
+        className: "form-info"
+      }, {
+        children: "Select a date"
+      }))]
+    })), jsx("div", Object.assign({
+      ref: datepickerDialogRef,
+      className: `popover popover-datepicker ${state.isActive ? 'active' : ''}`,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Choose Date"
+    }, {
+      children: state.isActive && jsxs("div", Object.assign({
+        className: "sg-date"
+      }, {
+        children: [jsxs("header", {
+          children: [jsx("button", Object.assign({
+            className: "link",
+            onClick: () => datepicker.sub(1, 'months')
+          }, {
+            children: jsx("i", Object.assign({
+              className: "sg-icon sg-icon-previous"
+            }, {
+              children: "Previous month"
+            }))
+          })), jsx(Dropdown, {
+            options: months({}),
+            display: "key",
+            texts: {
+              placeholder: data.monthName
+            }
+          }), jsx(Dropdown, {
+            options: years({}),
+            display: "key",
+            texts: {
+              placeholder: data.year + ''
+            }
+          }), jsx("button", Object.assign({
+            className: "link",
+            onClick: () => datepicker.add(1, 'months')
+          }, {
+            children: jsx("i", Object.assign({
+              className: "sg-icon sg-icon-next"
+            }, {
+              children: "Next month"
+            }))
+          }))]
+        }), jsx("main", {
+          children: jsxs("table", Object.assign({
+            role: "grid"
+          }, {
+            children: [jsx("thead", {
+              children: jsx("tr", {
+                children: data.calendar.headers.map((header, ix) => jsx("th", Object.assign({
+                  scope: "col",
+                  abbr: header.abbr,
+                  className: header.type === 'week' ? 'sg-week-header' : 'sg-day-header'
+                }, {
+                  children: header.displayText
+                }), `week_${ix}`))
+              })
+            }), jsx("tbody", {
+              children: data.calendar.calendarGrid.map((week, ix) => jsxs("tr", {
+                children: [data.calendar.weekNumbers ? jsx("th", Object.assign({
+                  className: "sg-week-number"
+                }, {
+                  children: data.calendar.weekNumbers[ix]
+                })) : '', week.map(day => jsx("td", Object.assign({
+                  "data-date": day.formattedDate,
+                  className: classNames(day),
+                  title: day.today ? 'Today' : '',
+                  tabIndex: day.highlighted || day.selected && !(data === null || data === void 0 ? void 0 : data.highlightedDate) || day.today && !(data === null || data === void 0 ? void 0 : data.highlightedDate) && !(data === null || data === void 0 ? void 0 : data.selectedDate) ? 0 : -1,
+                  role: day.selected ? 'gridcell' : undefined,
+                  "aria-selected": day.selected && !(data === null || data === void 0 ? void 0 : data.highlightedDate) ? true : undefined,
+                  onClick: () => {
+                    day.currentMonth && datepicker.select(day.date);
+                  }
+                }, {
+                  children: day.day
+                }), day.day))]
+              }, `week_${ix}`))
+            })]
+          }))
+        })]
+      }))
+    }))]
+  });
+};
+
+function Button({
+  children,
+  variant,
+  onClick,
+  disabled,
+  active = false,
+  type = 'button',
+  size
+}) {
+  const props = {
+    type,
+    disabled
+  };
+  const classNames = [];
+  if (variant) classNames.push(variant);
+  if (active) classNames.push('active');
+  if (size) classNames.push(size);
+  if (classNames.length) props.className = classNames.join(' ');
+  if (onClick) props.onClick = onClick;
+  return jsx("button", Object.assign({}, props, {
+    children: children
+  }));
+}
+
+const IconButton = _a => {
+  var {
+      children,
+      onClick
+    } = _a,
+    props = __rest(_a, ["children", "onClick"]);
+  return jsx("button", Object.assign({
+    className: "icon",
+    onClick: onClick,
+    "aria-controls": props['aria-controls'],
+    "aria-expanded": props['aria-expanded']
+  }, {
+    children: children
+  }));
+};
+
+const ButtonGroup = ({
+  children,
+  selectedIndex,
+  variant,
+  id
+}) => {
+  const [selected, setSelected] = useState(selectedIndex);
+  const [buttons, setButtons] = useState([]);
+  useEffect(() => {
+    const buttonProps = (children instanceof Array ? children : [children]).filter(b => b && b.props).map((b, ix) => {
+      const bp = b.props;
+      const props = Object.assign(Object.assign({}, bp), {
+        variant,
+        key: bp.key || `btn_${ix}`,
+        active: ix === selected,
+        onClick: e => {
+          setSelected(ix);
+          if (bp.onClick) bp.onClick(e);
+        }
+      });
+      return props;
+    });
+    setButtons(buttonProps);
+  }, [children, selected, variant]);
+  return jsx(Group, Object.assign({
+    "data-label": "button-group",
+    id: id
+  }, {
+    children: buttons.map(props => jsx(Button, Object.assign({}, props), props.key))
+  }));
+};
+
+/* eslint-disable-next-line */
+const validateInputValue = (target, rules, setError) => {
+  const errorMessage = validateInputValueErrors(rules, target);
+  errorMessage ? setErrorInsert(setError, target.name) : setErrorRemove(setError, target.name);
+  return errorMessage;
+};
+const validateInputValueErrors = (rules, target) => {
+  const {
+    value
+  } = target;
+  if ((rules === null || rules === void 0 ? void 0 : rules.custom) instanceof Function) {
+    return rules === null || rules === void 0 ? void 0 : rules.custom();
+  }
+  return validateTextInputValues(value, rules);
+};
+/* eslint-disable-next-line */
+const setErrorInsert = (setError, name) => {
+  /* eslint-disable-next-line */
+  setError(errors => {
+    return Object.assign(Object.assign({}, errors), {
+      [name]: true
+    });
+  });
+};
+/* eslint-disable-next-line */
+const setErrorRemove = (setError, name) => {
+  /* eslint-disable-next-line */
+  setError(errors => {
+    /* eslint-disable-next-line */
+    const newError = Object.assign({}, errors);
+    delete newError[name];
+    return newError;
+  });
+};
+const validateTextInputValues = (value, rules) => {
+  switch (rules === null || rules === void 0 ? void 0 : rules.type) {
+    case 'Required':
+      {
+        return value === '' || value === undefined || value === null ? 'error' : null;
+      }
+    default:
+      {
+        return;
+      }
+  }
+};
+
+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"]);
+  /* eslint-disable-next-line */
+  const [values, setValues] = React.useState();
+  /* eslint-disable-next-line */
+  const [errors, setErrors] = React.useState();
+  /* eslint-disable-next-line */
+  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;
+    });
+    if (!hasError) {
+      onFormSubmit && onFormSubmit(values);
+    }
+  };
+  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
+    }))
+  }));
+};
+
+const Form = props => {
+  return jsx(FormProvider, Object.assign({}, props));
+};
+
+const FormItems = ({
+  children,
+  validate,
+  name
+}) => {
+  const {
+    setValues,
+    setErrors,
+    setFields,
+    errors
+  } = useFormContext();
+  React.useEffect(() => {
+    /* eslint-disable-next-line */
+    setFields(fields => Object.assign(Object.assign({}, fields), {
+      [name]: validate === null || validate === void 0 ? void 0 : validate.rules
+    }));
+    /* eslint-disable-next-line */
+    const removeValues = values => {
+      /* eslint-disable-next-line */
+      const newValues = Object.assign({}, values);
+      delete newValues[name];
+      return newValues;
+    };
+    return () => {
+      /* eslint-disable-next-line */
+      setFields(fields => removeValues(fields));
+      /* eslint-disable-next-line */
+      setValues(values => removeValues(values));
+      /* eslint-disable-next-line */
+      setErrors(errors => removeValues(errors));
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onChange = event => {
+    if (!event.target) return;
+    const {
+      value,
+      name,
+      type,
+      checked
+    } = event.target;
+    let inputValue;
+    if (type === 'checkbox') {
+      inputValue = checked ? value : null;
+      /* eslint-disable-next-line */
+      checked ? setValues(values => Object.assign(Object.assign({}, values), {
+        [name]: value
+      })) : setValues(values => Object.assign(Object.assign({}, values), {
+        [name]: null
+      }));
+    } else {
+      inputValue = value;
+      /* eslint-disable-next-line */
+      setValues(values => Object.assign(Object.assign({}, values), {
+        [name]: value
+      }));
+    }
+    validateInputValue({
+      value: inputValue,
+      name,
+      type,
+      checked
+    }, validate === null || validate === void 0 ? void 0 : validate.rules, setErrors);
+  };
+  /* eslint-disable-next-line */
+  return /*#__PURE__*/React.cloneElement(children, {
+    validator: (errors === null || errors === void 0 ? void 0 : errors[name]) && validate,
+    name,
+    onChange
+  });
+};
+
+function Group({
+  id,
+  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",
+    id: id
+  }, {
+    children: [jsx("div", Object.assign({
+      className: groupClassName
+    }, {
+      children: children
+    })), error && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: errorMessage
+    }))]
+  }));
+}
+
+const FormItem = ({
+  expandableInfo,
+  label,
+  labelInformation,
+  validator,
+  inputId,
+  children,
+  expandableInfoButtonLabel,
+  role
+}) => {
+  const expandableInnerRef = useRef(null);
+  const expandableRef = useRef(null);
+  const [expandableHeight, setExpandableHeight] = useState(0);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isHidden, setIsHidden] = useState(false);
+  useLayoutEffect(() => {
+    expandableInnerRef.current && setExpandableHeight(expandableInnerRef.current['clientHeight']);
+    setIsHidden(true);
+  }, []);
+  useEffect(() => {
+    const handleResize = debounce(function setExpandableHeightAfterResize() {
+      isExpanded && expandableInnerRef.current && setExpandableHeight(expandableInnerRef.current['clientHeight']);
+    }, 300);
+    if (expandableRef.current) {
+      window.addEventListener('resize', handleResize);
+    }
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [isExpanded, expandableInnerRef]);
+  if (!inputId) inputId = randomId();
+  const formItemClassNames = classNames('gds-form-item', validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
+  return jsxs("div", Object.assign({
+    className: formItemClassNames,
+    role: role ? role : undefined,
+    "aria-labelledby": role ? `${inputId}-label` : undefined
+  }, {
+    children: [expandableInfo && jsx("div", {
+      className: "gds-form-item__backdrop"
+    }), jsxs("div", Object.assign({
+      className: "gds-form-item__header"
+    }, {
+      children: [jsxs("div", Object.assign({
+        className: "gds-form-item__labels"
+      }, {
+        children: [label && jsx("label", Object.assign({
+          id: role ? `${inputId}-label` : undefined,
+          htmlFor: role ? undefined : inputId
+        }, {
+          children: label
+        })), labelInformation && jsx("div", Object.assign({
+          className: "form-info",
+          id: `${inputId}_info`
+        }, {
+          children: labelInformation
+        }))]
+      })), expandableInfo && jsx(IconButton, Object.assign({
+        "aria-expanded": isExpanded,
+        "aria-controls": `${inputId}-expandable-info`,
+        onClick: event => __awaiter(void 0, void 0, void 0, function* () {
+          if (!isExpanded) {
+            setIsHidden(false);
+            yield delay(10);
+            expandableInnerRef.current && setExpandableHeight(expandableInnerRef.current['clientHeight']);
+            setIsExpanded(true);
+          } else {
+            setIsExpanded(false);
+            yield delay(300);
+            setIsHidden(true);
+          }
+        })
+      }, {
+        children: isExpanded ? jsx(Times, {
+          title: expandableInfoButtonLabel
+        }) : jsx(InfoCircle, {
+          title: expandableInfoButtonLabel
+        })
+      }))]
+    })), expandableInfo && jsx("div", Object.assign({
+      ref: expandableRef,
+      id: `gds-expandable-info-${inputId}`,
+      className: "gds-form-item__expandable-info",
+      hidden: isHidden,
+      style: {
+        height: isExpanded ? expandableHeight : 0
+      }
+    }, {
+      children: jsxs("div", Object.assign({
+        ref: expandableInnerRef
+      }, {
+        children: [" ", expandableInfo, " "]
+      }))
+    })), children, jsx("div", Object.assign({
+      className: "gds-form-item__footer"
+    }, {
+      children: validator && jsx("span", Object.assign({
+        className: "form-info"
+      }, {
+        children: validator.message
+      }))
+    }))]
+  }));
+};
+
+const useInput = (props, onChanges, onChangeInput) => {
+  const id = useMemo(() => props.id || randomId(), [props.id]);
+  const ref = useRef(null);
+  const onChange = event => {
+    onChanges && onChanges(event);
+    onChangeInput && onChangeInput(event.target.value);
+  };
+  return Object.assign(Object.assign({}, props), {
+    id,
+    ref,
+    onChange
+  });
+};
+
+const RenderInput = (type, props, onChange, onChangeInput, label, info, validator, expandableInfo, expandableInfoButtonLabel, testId) => {
+  const _a = useInput(props, onChange, onChangeInput),
+    {
+      value
+    } = _a,
+    inputProps = __rest(_a, ["value"]);
+  const propsWithDescription = info ? Object.assign(Object.assign({}, inputProps), {
+    'aria-describedby': `${inputProps.id}_info`
+  }) : inputProps;
+  // Render naked
+  if (!label && !info && !expandableInfo) return jsx("input", Object.assign({
+    type: type,
+    value: value,
+    "data-testid": testId
+  }, propsWithDescription));
+  return jsx(FormItem, Object.assign({
+    validator: validator,
+    labelInformation: info,
+    label: label,
+    expandableInfo: expandableInfo,
+    expandableInfoButtonLabel: expandableInfoButtonLabel,
+    inputId: inputProps.id
+  }, {
+    children: jsx("div", Object.assign({
+      className: "gds-input-wrapper"
+    }, {
+      children: jsx("input", Object.assign({
+        type: type,
+        value: value
+      }, propsWithDescription, {
+        className: validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator),
+        "data-testid": testId
+      }))
+    }))
+  }));
+};
+const TextInput = _a => {
+  var {
+      label,
+      info,
+      testId,
+      onChange,
+      onChangeInput,
+      validator,
+      expandableInfo,
+      expandableInfoButtonLabel
+    } = _a,
+    props = __rest(_a, ["label", "info", "testId", "onChange", "onChangeInput", "validator", "expandableInfo", "expandableInfoButtonLabel"]);
+  return RenderInput('text', props, onChange, onChangeInput, label, info, validator, expandableInfo, expandableInfoButtonLabel, testId);
+};
+const EmailInput = _a => {
+  var {
+      label,
+      info,
+      onChange,
+      onChangeInput,
+      validator,
+      testId
+    } = _a,
+    props = __rest(_a, ["label", "info", "onChange", "onChangeInput", "validator", "testId"]);
+  return RenderInput('email', props, onChange, onChangeInput, label, info, validator, testId);
+};
+const NumberInput = _a => {
+  var {
+      label,
       info,
       onChange,
       onChangeInput,
@@ -2629,7 +2957,7 @@ var classof = classof$1;
 
 var $String = String;
 
-var toString$1 = function (argument) {
+var toString$3 = function (argument) {
   if (classof(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
   return $String(argument);
 };
@@ -2643,18 +2971,18 @@ var defineBuiltInAccessor$1 = function (target, name, descriptor) {
   return defineProperty.f(target, name, descriptor);
 };
 
-var $ = _export;
+var $$1 = _export;
 var DESCRIPTORS = descriptors;
-var global$1 = global$c;
-var uncurryThis = functionUncurryThis;
+var global$2 = global$d;
+var uncurryThis$2 = functionUncurryThis;
 var hasOwn = hasOwnProperty_1;
 var isCallable = isCallable$g;
 var isPrototypeOf = objectIsPrototypeOf;
-var toString = toString$1;
+var toString$2 = toString$3;
 var defineBuiltInAccessor = defineBuiltInAccessor$1;
 var copyConstructorProperties = copyConstructorProperties$2;
 
-var NativeSymbol = global$1.Symbol;
+var NativeSymbol = global$2.Symbol;
 var SymbolPrototype = NativeSymbol && NativeSymbol.prototype;
 
 if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototype) ||
@@ -2664,7 +2992,7 @@ if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototy
   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 description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString$2(arguments[0]);
     var result = isPrototypeOf(SymbolPrototype, this)
       ? new NativeSymbol(description)
       // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
@@ -2678,11 +3006,11 @@ if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototy
   SymbolPrototype.constructor = SymbolWrapper;
 
   var NATIVE_SYMBOL = String(NativeSymbol('test')) == 'Symbol(test)';
-  var thisSymbolValue = uncurryThis(SymbolPrototype.valueOf);
-  var symbolDescriptiveString = uncurryThis(SymbolPrototype.toString);
+  var thisSymbolValue = uncurryThis$2(SymbolPrototype.valueOf);
+  var symbolDescriptiveString = uncurryThis$2(SymbolPrototype.toString);
   var regexp = /^Symbol\((.*)\)[^)]+$/;
-  var replace = uncurryThis(''.replace);
-  var stringSlice = uncurryThis(''.slice);
+  var replace$1 = uncurryThis$2(''.replace);
+  var stringSlice = uncurryThis$2(''.slice);
 
   defineBuiltInAccessor(SymbolPrototype, 'description', {
     configurable: true,
@@ -2690,12 +3018,12 @@ if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototy
       var symbol = thisSymbolValue(this);
       if (hasOwn(EmptyStringDescriptionStore, symbol)) return '';
       var string = symbolDescriptiveString(symbol);
-      var desc = NATIVE_SYMBOL ? stringSlice(string, 7, -1) : replace(string, regexp, '$1');
+      var desc = NATIVE_SYMBOL ? stringSlice(string, 7, -1) : replace$1(string, regexp, '$1');
       return desc === '' ? undefined : desc;
     }
   });
 
-  $({ global: true, constructor: true, forced: true }, {
+  $$1({ global: true, constructor: true, forced: true }, {
     Symbol: SymbolWrapper
   });
 }
@@ -2779,6 +3107,65 @@ const RadioGroup = ({
   }));
 };
 
+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 [flexClassName, setFlexClassName] = useState('d-flex');
+  // // update className when classes change
+  useLayoutEffect(() => {
+    const newClassName = classes.join(' ');
+    if (newClassName !== flexClassName) setFlexClassName(newClassName);
+  }, [classes, flexClassName]);
+  // // update classes when props change
+  useLayoutEffect(() => {
+    const newClasses = ['d-flex'];
+    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, flexDirection, flexWrap, className]);
+  return jsx("div", Object.assign({
+    className: flexClassName
+  }, props, {
+    children: children
+  }));
+};
+
+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);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [button]);
+  return jsx("a", Object.assign({}, anchorProps, {
+    children: children
+  }));
+};
+
 const ListItem = _a => {
   var {
       listType,
@@ -2868,40 +3255,19 @@ const List = ({
   }));
 };
 var valueList = {
-  List,
-  Label,
-  Value
-};
-
-var valueList$1 = /*#__PURE__*/Object.freeze({
-	__proto__: null,
-	Label: Label,
-	Value: Value,
-	List: List,
-	'default': valueList
-});
-
-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);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [button]);
-  return jsx("a", Object.assign({}, anchorProps, {
-    children: children
-  }));
+  List,
+  Label,
+  Value
 };
 
+var valueList$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	Label: Label,
+	Value: Value,
+	List: List,
+	'default': valueList
+});
+
 //TODO: Add variants
 const Navbar = ({
   children,
@@ -2961,45 +3327,6 @@ const Navbar = ({
   }));
 };
 
-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('');
-    }
-  }, [badgeType, customColor, customBackgroundColor]);
-  return !isClosed ? jsxs("span", Object.assign({}, props, {
-    className: `badge ${type}`,
-    style: {
-      color: customColor,
-      backgroundColor: customBackgroundColor
-    }
-  }, {
-    children: [jsx("strong", {
-      children: children
-    }), isCloseable && jsxs("button", Object.assign({
-      type: "button",
-      className: "close",
-      onClick: () => setIsClosed(true)
-    }, {
-      children: [closeText, jsx("i", {})]
-    }))]
-  })) : null;
-}
-
 const Select = /*#__PURE__*/React.forwardRef(({
   id,
   className,
@@ -3096,64 +3423,93 @@ function Slider({
   hasTextbox = false,
   unitLabel,
   disabled = false,
-  onChange
+  onChange,
+  enableClamping = true,
+  onClamp
 }) {
-  var _a;
   const [background, setBackground] = React.useState();
-  const [sliderValue, setSliderValue] = React.useState((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : 0);
+  const [sliderValue, setSliderValue] = React.useState(value !== null && value !== void 0 ? value : defaultValue);
+  const [inputFieldValue, setInputFieldValue] = React.useState(sliderValue + '');
   React.useLayoutEffect(() => {
     if (disabled) {
       setBackground(sliderColors.disabled);
       return;
     }
-    const percent = (sliderValue - min) / (max - min) * 100;
+    let percent = 0;
+    if (sliderValue !== undefined) percent = (sliderValue - min) / (max - min) * 100;
     setBackground(getSliderTrackBackground(percent));
   }, [disabled, sliderValue]);
+  const clamp = unclamped => {
+    if (!enableClamping) return Number(unclamped);
+    if (typeof unclamped === 'string') unclamped = Number(unclamped);
+    if (!unclamped || Number.isNaN(unclamped)) return min;
+    const clamped = Math.min(Math.max(min, unclamped), max);
+    if (clamped !== unclamped && onClamp) onClamp(unclamped);
+    return clamped;
+  };
+  const setNumValue = value => {
+    if (value === '') value = min;
+    const unclamped = Number(value);
+    const clamped = clamp(unclamped);
+    setSliderValue(clamped);
+    return [unclamped, clamped];
+  };
   React.useEffect(() => {
-    setSliderValue(Number(value));
+    setNumValue(value);
   }, [value]);
-  const handleChange = e => {
-    const {
-      value
-    } = e.target;
-    setSliderValue(Number(value));
-    if (onChange) onChange(Number(value));
+  const handleChange = value => {
+    const [unclamped, clamped] = setNumValue(value);
+    setInputFieldValue(unclamped + '');
+    if (onChange) onChange(clamped);
+  };
+  const handleInputFieldChange = (value, shouldClamp = false) => {
+    handleChange(value);
+    if (value === '') setInputFieldValue('');else if (shouldClamp) setInputFieldValue(clamp(value) + '');
   };
   return jsxs(Fragment, {
-    children: [label && jsxs("div", Object.assign({
+    children: [jsxs("div", Object.assign({
       className: "gds-slider-label-container"
     }, {
-      children: [jsxs("div", {
-        children: [jsx("label", Object.assign({
-          htmlFor: name
-        }, {
-          children: label
-        })), instruction && jsx("p", {
-          children: instruction
-        })]
+      children: [jsx("div", {
+        children: label && jsxs(Fragment, {
+          children: [jsx("label", Object.assign({
+            htmlFor: name
+          }, {
+            children: label
+          })), instruction && jsx("p", {
+            children: instruction
+          })]
+        })
       }), hasTextbox && jsx(InputWrapper, Object.assign({
         unitLabel: unitLabel
       }, {
         children: jsx("input", {
           type: "number",
-          value: sliderValue,
+          value: inputFieldValue,
           id: `${name}-textbox`,
           name: name,
           className: errorMessage ? 'is-invalid' : '',
           disabled: disabled,
-          onChange: handleChange
+          onChange: e => handleInputFieldChange(e.currentTarget.value),
+          onKeyDown: e => e.key === 'Enter' && handleInputFieldChange(e.currentTarget.value, true),
+          onBlur: e => handleInputFieldChange(e.currentTarget.value, true),
+          min: min,
+          max: max,
+          onInvalid: e => {
+            e.preventDefault();
+          }
         })
       }))]
     })), jsx("input", {
       type: "range",
-      value: sliderValue,
+      value: sliderValue || 0,
       id: name,
       name: name,
       min: min,
       max: max,
       step: step,
       disabled: disabled,
-      onChange: handleChange,
+      onChange: e => handleChange(e.currentTarget.value),
       style: {
         background
       }
@@ -3176,536 +3532,315 @@ const useStepper = ({
   onChange
 }) => {
   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
-  });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    if (max !== data.max) stepper.setMax(max);
-  }, [stepper, max]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    if (min !== data.min) stepper.setMin(min);
-  }, [stepper, min]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    if (_step !== data.step) stepper.setStep(_step || 1);
-  }, [stepper, _step]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    if (_value !== data.value) stepper.setValue(_value || 0, false);
-  }, [stepper, _value]);
-  useEffect(() => {
-    setStepper(createStepper({
-      id: _id,
-      value: _value,
-      min,
-      max,
-      step: _step,
-      onChange
-    }, setData));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return [stepper, data];
-};
-
-// TODO: Should be named "Numeric input" instead of stepper?
-function Stepper(_a) {
-  var {
-      label,
-      description,
-      statusMessage,
-      validator
-    } = _a,
-    stepperArgs = __rest(_a, ["label", "description", "statusMessage", "validator"]);
-  const [stepper, data] = useStepper(stepperArgs);
-  const onChangeEvent = e => {
-    stepper.setValue(e.target.valueAsNumber);
-  };
-  const PrimitiveStepper = jsxs("div", Object.assign({
-    className: `group group-border group-stepper ${validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)}`
-  }, {
-    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: "+"
-    }))]
-  }));
-  if (!label && !description && !statusMessage && !validator) return PrimitiveStepper;
-  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: "stepper-wrapper"
-    }, {
-      children: [PrimitiveStepper, validator && jsx("span", Object.assign({
-        className: "form-info"
-      }, {
-        children: validator.message
-      }))]
-    }))]
-  }));
-}
-
-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
+    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
+  });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   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]);
+    if (max !== data.max) stepper.setMax(max);
+  }, [stepper, max]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   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
+    if (min !== data.min) stepper.setMin(min);
+  }, [stepper, min]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   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
+    if (_step !== data.step) stepper.setStep(_step || 1);
+  }, [stepper, _step]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   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();
+    if (_value !== data.value) stepper.setValue(_value || 0, false);
+  }, [stepper, _value]);
+  useEffect(() => {
+    setStepper(createStepper({
+      id: _id,
+      value: _value,
+      min,
+      max,
+      step: _step,
+      onChange
+    }, setData));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [togglerRef, listboxRef]);
-  return {
-    dropdown: handler,
-    togglerProps,
-    listboxProps,
-    listItems,
-    multiSelectProps
-  };
+  }, []);
+  return [stepper, data];
 };
 
-const Dropdown = ({
-  compareWith,
-  display,
-  id,
-  informationLabel,
-  label,
-  loop,
-  multiSelect,
-  onChange,
-  options,
-  searchFilter,
-  searchable,
-  texts,
-  useValue,
-  validator,
-  value
-}) => {
-  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;
+// TODO: Should be named "Numeric input" instead of stepper?
+function Stepper(_a) {
+  var {
+      label,
+      description,
+      statusMessage,
+      validator
+    } = _a,
+    stepperArgs = __rest(_a, ["label", "description", "statusMessage", "validator"]);
+  const [stepper, data] = useStepper(stepperArgs);
+  const onChangeEvent = e => {
+    stepper.setValue(e.target.valueAsNumber);
   };
+  const PrimitiveStepper = jsxs("div", Object.assign({
+    className: `group group-border group-stepper ${validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)}`
+  }, {
+    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: "+"
+    }))]
+  }));
+  if (!label && !description && !statusMessage && !validator) return PrimitiveStepper;
   return jsxs("div", Object.assign({
     className: "form-group"
   }, {
     children: [label && jsx("label", Object.assign({
-      htmlFor: togglerProps.id
+      htmlFor: data.id
     }, {
       children: label
-    })), informationLabel && jsx("div", Object.assign({
-      className: "form-info"
-    }, {
-      children: informationLabel
-    })), jsx("button", Object.assign({
-      type: "button"
-    }, togglerProps, {
-      ref: togglerRef
-    }, {
-      children: jsx("span", {
-        children: togglerProps.children
-      })
-    })), jsxs("div", Object.assign({}, getListBoxProps(listboxProps), {
-      ref: listboxRef
-    }, {
-      children: [jsxs("div", Object.assign({
-        className: "d-flex d-sm-none align-items-center"
-      }, {
-        children: [jsx("span", Object.assign({
-          className: "flex-grow-1 ps-4 fs-2 fw-bolder"
-        }, {
-          children: label
-        })), 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,
-          "aria-label": dropdown === null || dropdown === void 0 ? void 0 : dropdown.dropdown.texts.close
-        }, {
-          children: jsx("i", {})
-        }))]
-      })), (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({
+    })), description && jsx("span", Object.assign({
       className: "form-info"
     }, {
-      children: validator === null || validator === void 0 ? void 0 : validator.message
-    }))]
-  }));
-};
-
-const useDatepicker = (datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options = {}) => {
-  const dataStub = {
-    formattedSelectedDate: '',
-    calendar: {
-      headers: [],
-      calendarGrid: []
-    }
-  };
-  const [data, setData] = useState(dataStub);
-  const [state, setState] = useState({
-    isActive: false
-  });
-  const datepickerStub = {};
-  const [datepicker, setDatepicker] = useState(datepickerStub);
-  useEffect(() => {
-    if (!datepicker.open && datepickerRef.current && datepickerDialogRef.current && dateInputRef.current && datepickerTriggerRef.current) {
-      setDatepicker(createDatepicker((data, state) => {
-        if (data) setData(data);
-        if (state) setState(state);
-      }, options, datepickerRef.current, datepickerDialogRef.current, dateInputRef.current, datepickerTriggerRef.current));
-    }
-  }, [datepicker, datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options]);
-  return {
-    datepicker,
-    data,
-    state
+      children: description
+    })), jsxs("div", Object.assign({
+      className: "stepper-wrapper"
+    }, {
+      children: [PrimitiveStepper, validator && jsx("span", Object.assign({
+        className: "form-info"
+      }, {
+        children: validator.message
+      }))]
+    }))]
+  }));
+}
+
+// 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';
+
+var uncurryThis$1 = functionUncurryThis;
+var requireObjectCoercible = requireObjectCoercible$3;
+var toString$1 = toString$3;
+var whitespaces$1 = whitespaces$2;
+
+var replace = uncurryThis$1(''.replace);
+var ltrim = RegExp('^[' + whitespaces$1 + ']+');
+var rtrim = RegExp('(^|[^' + whitespaces$1 + '])[' + whitespaces$1 + ']+$');
+
+// `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, '$1');
+    return string;
   };
 };
 
-const Datepicker = (options = {}) => {
-  const [uuid] = useState(randomId());
-  const id = `sgr-datepicker-${uuid}`;
-  const datepickerRef = useRef(null);
-  const datepickerTriggerRef = useRef(null);
-  const datepickerDialogRef = useRef(null);
-  const dateInputRef = useRef(null);
-  const {
-    datepicker,
-    data,
-    state
-  } = useDatepicker(datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options);
-  useEffect(() => {
-    var _a;
-    const selDateSub = (_a = datepicker.selectedDate$) === null || _a === void 0 ? void 0 : _a.subscribe(newDate => options.onChange && options.onChange(newDate));
-    return () => selDateSub === null || selDateSub === void 0 ? void 0 : selDateSub.unsubscribe();
-  }, [datepicker, options]);
-  const classNames = day => Object.entries({
-    disabled: !day.currentMonth,
-    'sg-date-today': day.today
-    // 'sg-date-holiday': day.holiday,
-  }).map(([className, add]) => add ? className : '').join(' ');
+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)
+};
+
+var global$1 = global$d;
+var fails = fails$c;
+var uncurryThis = functionUncurryThis;
+var toString = toString$3;
+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;
+
+var $ = _export;
+var $parseInt = numberParseInt;
+
+// `parseInt` method
+// https://tc39.es/ecma262/#sec-parseint-string-radix
+$({ global: true, forced: parseInt != $parseInt }, {
+  parseInt: $parseInt
+});
+
+const Tabs = ({
+  list,
+  onTabChange,
+  children
+}) => {
+  const [selectedTab, setSelectedTab] = useState(0);
+  const onClick = event => {
+    event.preventDefault();
+    if (event.currentTarget.ariaDisabled !== 'true') {
+      const focusedIndex = parseInt(event.currentTarget.dataset.indexNumber);
+      setSelectedTab(focusedIndex);
+      onTabChange && onTabChange(focusedIndex);
+    }
+  };
   return jsxs(Fragment, {
-    children: [jsxs("div", Object.assign({
-      className: "form-group"
+    children: [jsx("nav", Object.assign({
+      role: "tablist"
     }, {
-      children: [jsx("label", Object.assign({
-        htmlFor: id
-      }, {
-        children: "Date"
-      })), jsxs("div", Object.assign({
-        className: "group",
-        ref: datepickerRef
+      children: list === null || list === void 0 ? void 0 : list.map((value, index) => jsx("a", Object.assign({
+        href: value.disabled ? undefined : value.href || '#',
+        onClick: onClick,
+        role: "tab",
+        "data-index-number": index,
+        "aria-disabled": value.disabled,
+        "aria-selected": selectedTab === index
       }, {
-        children: [jsx("input", {
-          ref: dateInputRef,
-          id: id,
-          type: "text",
-          placeholder: "yyyy-mm-dd",
-          value: data.formattedSelectedDate,
-          onChange: e => datepicker.select(e.target.value)
-        }), jsx("button", Object.assign({
-          ref: datepickerTriggerRef,
-          type: "button",
-          className: "primary",
-          onClick: () => datepicker.toggle()
-        }, {
-          children: jsx("i", Object.assign({
-            className: "sg-icon sg-icon-calendar"
-          }, {
-            children: "Select date"
-          }))
-        }))]
-      })), jsx("span", Object.assign({
-        className: "form-info"
+        children: value.text
+      }), index))
+    })), jsx("section", {
+      children: list === null || list === void 0 ? void 0 : list.map((value, index) => jsx("article", Object.assign({
+        role: "tabpanel",
+        "aria-hidden": selectedTab !== index
       }, {
-        children: "Select a date"
-      }))]
-    })), jsx("div", Object.assign({
-      ref: datepickerDialogRef,
-      className: `popover popover-datepicker ${state.isActive ? 'active' : ''}`,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-label": "Choose Date"
+        children: value.text
+      }), index))
+    })]
+  });
+};
+
+const ModalHeader = ({
+  header: _header = '',
+  onClose
+}) => {
+  const handleClose = event => {
+    if (onClose) onClose(event);
+  };
+  return jsxs("div", Object.assign({
+    className: "header"
+  }, {
+    children: [jsx("h3", {
+      children: _header
+    }), jsxs("button", Object.assign({
+      className: "close",
+      onClick: handleClose
     }, {
-      children: state.isActive && jsxs("div", Object.assign({
-        className: "sg-date"
+      children: [jsx("span", Object.assign({
+        className: "sr-only"
       }, {
-        children: [jsxs("header", {
-          children: [jsx("button", Object.assign({
-            className: "link",
-            onClick: () => datepicker.sub(1, 'months')
+        children: "Close"
+      })), jsx("i", {})]
+    }))]
+  }));
+};
+const ModalBody = ({
+  children
+}) => {
+  return jsx("div", Object.assign({
+    className: "body"
+  }, {
+    children: children
+  }));
+};
+const ModalFooter = ({
+  confirm,
+  dismiss,
+  onClose,
+  onConfirm,
+  onDismiss
+}) => {
+  const handleConfirm = event => {
+    if (onConfirm) onConfirm(event);
+    if (onClose) onClose(event);
+  };
+  const handleDismiss = event => {
+    if (onDismiss) onDismiss(event);
+    if (onClose) onClose(event);
+  };
+  return jsxs("div", Object.assign({
+    className: "footer"
+  }, {
+    children: [dismiss && jsx(Button, Object.assign({
+      variant: "secondary",
+      onClick: handleDismiss
+    }, {
+      children: dismiss
+    })), confirm && jsx(Button, Object.assign({
+      variant: "primary",
+      onClick: handleConfirm
+    }, {
+      children: confirm
+    }))]
+  }));
+};
+const Modal = _a => {
+  var {
+      type = 'default',
+      isOpen
+    } = _a,
+    props = __rest(_a, ["type", "isOpen"]);
+  const modalContent = () => {
+    switch (type) {
+      case 'slideout':
+        {
+          return jsxs("aside", Object.assign({
+            role: "dialog"
           }, {
-            children: jsx("i", Object.assign({
-              className: "sg-icon sg-icon-previous"
-            }, {
-              children: "Previous month"
-            }))
-          })), jsx(Dropdown, {
-            options: months({}),
-            display: "key",
-            texts: {
-              placeholder: data.monthName
-            }
-          }), jsx(Dropdown, {
-            options: years({}),
-            display: "key",
-            texts: {
-              placeholder: data.year + ''
-            }
-          }), jsx("button", Object.assign({
-            className: "link",
-            onClick: () => datepicker.add(1, 'months')
+            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("i", Object.assign({
-              className: "sg-icon sg-icon-next"
-            }, {
-              children: "Next month"
-            }))
-          }))]
-        }), jsx("main", {
-          children: jsxs("table", Object.assign({
-            role: "grid"
+            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("thead", {
-              children: jsx("tr", {
-                children: data.calendar.headers.map((header, ix) => jsx("th", Object.assign({
-                  scope: "col",
-                  abbr: header.abbr,
-                  className: header.type === 'week' ? 'sg-week-header' : 'sg-day-header'
-                }, {
-                  children: header.displayText
-                }), `week_${ix}`))
-              })
-            }), jsx("tbody", {
-              children: data.calendar.calendarGrid.map((week, ix) => jsxs("tr", {
-                children: [data.calendar.weekNumbers ? jsx("th", Object.assign({
-                  className: "sg-week-number"
-                }, {
-                  children: data.calendar.weekNumbers[ix]
-                })) : '', week.map(day => jsx("td", Object.assign({
-                  "data-date": day.formattedDate,
-                  className: classNames(day),
-                  title: day.today ? 'Today' : '',
-                  tabIndex: day.highlighted || day.selected && !(data === null || data === void 0 ? void 0 : data.highlightedDate) || day.today && !(data === null || data === void 0 ? void 0 : data.highlightedDate) && !(data === null || data === void 0 ? void 0 : data.selectedDate) ? 0 : -1,
-                  role: day.selected ? 'gridcell' : undefined,
-                  "aria-selected": day.selected && !(data === null || data === void 0 ? void 0 : data.highlightedDate) ? true : undefined,
-                  onClick: () => {
-                    day.currentMonth && datepicker.select(day.date);
-                  }
-                }, {
-                  children: day.day
-                }), day.day))]
-              }, `week_${ix}`))
-            })]
-          }))
-        })]
-      }))
-    }))]
-  });
+            children: [jsx(ModalHeader, Object.assign({}, props)), jsx(ModalBody, Object.assign({}, props)), jsx(ModalFooter, Object.assign({}, props))]
+          }));
+        }
+    }
+  };
+  return isOpen ? modalContent() : null;
 };
 
-export { AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Slider, Stepper, Text, TextInput, valueList$1 as ValueList };
+export { AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Slider, Stepper, Tabs, Text, TextInput, valueList$1 as ValueList };