@epignosis_llc/gnosis 1.0.2 → 1.3.1

package/dist/cjs/{index-e52c28e4.js → index-110c08b3.js}

@@ -2,7 +2,7 @@
   /**
    * @license
    * author: epignosis front-end team
-   * @epignosis_llc/gnosis.js v1.0.1
+   * @epignosis_llc/gnosis.js v1.3.0
    * Released under the MIT license.
    */
 
@@ -96,7 +96,13 @@ var StyleSheet = /*#__PURE__*/function () {
       var before;
 
       if (_this.tags.length === 0) {
-        before = _this.prepend ? _this.container.firstChild : _this.before;
+        if (_this.insertionPoint) {
+          before = _this.insertionPoint.nextSibling;
+        } else if (_this.prepend) {
+          before = _this.container.firstChild;
+        } else {
+          before = _this.before;
+        }
       } else {
         before = _this.tags[_this.tags.length - 1].nextSibling;
       }
@@ -114,6 +120,7 @@ var StyleSheet = /*#__PURE__*/function () {
     this.key = options.key;
     this.container = options.container;
     this.prepend = options.prepend;
+    this.insertionPoint = options.insertionPoint;
     this.before = null;
   }
 
@@ -1247,7 +1254,8 @@ var createCache = function createCache(options) {
       container: container,
       nonce: options.nonce,
       speedy: options.speedy,
-      prepend: options.prepend
+      prepend: options.prepend,
+      insertionPoint: options.insertionPoint
     }),
     nonce: options.nonce,
     inserted: inserted,
@@ -2066,7 +2074,7 @@ var serializeStyles = function serializeStyles(args, registered, mergedProps) {
   };
 };
 
-var hasOwnProperty$3 = Object.prototype.hasOwnProperty;
+var hasOwnProperty$3 = {}.hasOwnProperty;
 
 var EmotionCacheContext = /* #__PURE__ */React$n.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
@@ -2201,6 +2209,11 @@ var createEmotionProps = function createEmotionProps(type, props) {
 
   return newProps;
 };
+
+var Noop$1 = function Noop() {
+  return null;
+};
+
 var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
   var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
   // not passing the registered cache to serializeStyles because it would
@@ -2243,8 +2256,10 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
   newProps.ref = ref;
   newProps.className = className;
   var ele = /*#__PURE__*/React$n.createElement(type, newProps);
+  var possiblyStyleElement = /*#__PURE__*/React$n.createElement(Noop$1, null);
 
-  return ele;
+
+  return /*#__PURE__*/React$n.createElement(React$n.Fragment, null, possiblyStyleElement, ele);
 });
 
 if (process.env.NODE_ENV !== 'production') {
@@ -2253,7 +2268,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 var pkg = {
 	name: "@emotion/react",
-	version: "11.5.0",
+	version: "11.6.0",
 	main: "dist/emotion-react.cjs.js",
 	module: "dist/emotion-react.esm.js",
 	browser: {
@@ -2266,7 +2281,7 @@ var pkg = {
 		"dist",
 		"jsx-runtime",
 		"jsx-dev-runtime",
-		"isolated-hoist-non-react-statics-do-not-use-this-in-your-code",
+		"_isolated-hnrs",
 		"types/*.d.ts",
 		"macro.js",
 		"macro.d.ts",
@@ -2280,9 +2295,9 @@ var pkg = {
 	},
 	dependencies: {
 		"@babel/runtime": "^7.13.10",
-		"@emotion/cache": "^11.5.0",
+		"@emotion/cache": "^11.6.0",
 		"@emotion/serialize": "^1.0.2",
-		"@emotion/sheet": "^1.0.3",
+		"@emotion/sheet": "^1.1.0",
 		"@emotion/utils": "^1.0.0",
 		"@emotion/weak-memoize": "^0.2.5",
 		"hoist-non-react-statics": "^3.3.1"
@@ -2304,7 +2319,7 @@ var pkg = {
 		"@emotion/css": "11.5.0",
 		"@emotion/css-prettifier": "1.0.0",
 		"@emotion/server": "11.4.0",
-		"@emotion/styled": "11.3.0",
+		"@emotion/styled": "11.6.0",
 		"@types/react": "^16.9.11",
 		dtslint: "^0.3.0",
 		"html-tag-names": "^1.1.2",
@@ -2321,7 +2336,7 @@ var pkg = {
 			"./index.js",
 			"./jsx-runtime.js",
 			"./jsx-dev-runtime.js",
-			"./isolated-hoist-non-react-statics-do-not-use-this-in-your-code.js"
+			"./_isolated-hnrs.js"
 		],
 		umdName: "emotionReact"
 	}
@@ -2513,6 +2528,10 @@ function merge$1(registered, css, className) {
   return rawClassName + css(registeredStyles);
 }
 
+var Noop = function Noop() {
+  return null;
+};
+
 var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
   var hasRendered = false;
 
@@ -2553,8 +2572,10 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
   };
   var ele = props.children(content);
   hasRendered = true;
+  var possiblyStyleElement = /*#__PURE__*/React$n.createElement(Noop, null);
+
 
-  return ele;
+  return /*#__PURE__*/React$n.createElement(React$n.Fragment, null, possiblyStyleElement, ele);
 });
 
 if (process.env.NODE_ENV !== 'production') {
@@ -2768,6 +2789,22 @@ function _objectSpread2$1(target) {
   return target;
 }
 
+function _typeof$2(obj) {
+  "@babel/helpers - typeof";
+
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof$2 = function (obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof$2 = function (obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof$2(obj);
+}
+
 function _defineProperty$3(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -2929,7 +2966,7 @@ var global$y =
 
 var objectGetOwnPropertyDescriptor = {};
 
-var fails$e = function (exec) {
+var fails$f = function (exec) {
   try {
     return !!exec();
   } catch (error) {
@@ -2937,10 +2974,10 @@ var fails$e = function (exec) {
   }
 };
 
-var fails$d = fails$e;
+var fails$e = fails$f;
 
 // Detect IE8's incomplete defineProperty implementation
-var descriptors = !fails$d(function () {
+var descriptors = !fails$e(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7;
 });
@@ -2989,30 +3026,30 @@ var functionUncurryThis = bind$4 ? function (fn) {
   };
 };
 
-var uncurryThis$k = functionUncurryThis;
+var uncurryThis$m = functionUncurryThis;
 
-var toString$8 = uncurryThis$k({}.toString);
-var stringSlice$1 = uncurryThis$k(''.slice);
+var toString$9 = uncurryThis$m({}.toString);
+var stringSlice$1 = uncurryThis$m(''.slice);
 
 var classofRaw$1 = function (it) {
-  return stringSlice$1(toString$8(it), 8, -1);
+  return stringSlice$1(toString$9(it), 8, -1);
 };
 
 var global$x = global$y;
-var uncurryThis$j = functionUncurryThis;
-var fails$c = fails$e;
-var classof$6 = classofRaw$1;
+var uncurryThis$l = functionUncurryThis;
+var fails$d = fails$f;
+var classof$7 = classofRaw$1;
 
 var Object$4 = global$x.Object;
-var split = uncurryThis$j(''.split);
+var split = uncurryThis$l(''.split);
 
 // fallback for non-array-like ES3 and non-enumerable old V8 strings
-var indexedObject = fails$c(function () {
+var indexedObject = fails$d(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);
 }) ? function (it) {
-  return classof$6(it) == 'String' ? split(it, '') : Object$4(it);
+  return classof$7(it) == 'String' ? split(it, '') : Object$4(it);
 } : Object$4;
 
 var global$w = global$y;
@@ -3057,9 +3094,9 @@ var getBuiltIn$5 = function (namespace, method) {
   return arguments.length < 2 ? aFunction(global$v[namespace]) : global$v[namespace] && global$v[namespace][method];
 };
 
-var uncurryThis$i = functionUncurryThis;
+var uncurryThis$k = functionUncurryThis;
 
-var objectIsPrototypeOf = uncurryThis$i({}.isPrototypeOf);
+var objectIsPrototypeOf = uncurryThis$k({}.isPrototypeOf);
 
 var getBuiltIn$4 = getBuiltIn$5;
 
@@ -3096,10 +3133,10 @@ var engineV8Version = version;
 /* eslint-disable es/no-symbol -- required for testing */
 
 var V8_VERSION$2 = engineV8Version;
-var fails$b = fails$e;
+var fails$c = fails$f;
 
 // eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
-var nativeSymbol = !!Object.getOwnPropertySymbols && !fails$b(function () {
+var nativeSymbol = !!Object.getOwnPropertySymbols && !fails$c(function () {
   var symbol = Symbol();
   // Chrome 38 Symbol has incorrect toString conversion
   // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
@@ -3119,7 +3156,7 @@ var useSymbolAsUid = NATIVE_SYMBOL$1
 var global$t = global$y;
 var getBuiltIn$3 = getBuiltIn$5;
 var isCallable$8 = isCallable$b;
-var isPrototypeOf = objectIsPrototypeOf;
+var isPrototypeOf$1 = objectIsPrototypeOf;
 var USE_SYMBOL_AS_UID$1 = useSymbolAsUid;
 
 var Object$3 = global$t.Object;
@@ -3128,7 +3165,7 @@ var isSymbol$3 = USE_SYMBOL_AS_UID$1 ? function (it) {
   return typeof it == 'symbol';
 } : function (it) {
   var $Symbol = getBuiltIn$3('Symbol');
-  return isCallable$8($Symbol) && isPrototypeOf($Symbol.prototype, Object$3(it));
+  return isCallable$8($Symbol) && isPrototypeOf$1($Symbol.prototype, Object$3(it));
 };
 
 var global$s = global$y;
@@ -3209,7 +3246,7 @@ var store$2 = sharedStore;
 (shared$3.exports = function (key, value) {
   return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.19.0',
+  version: '3.19.1',
   mode: 'global',
   copyright: '© 2021 Denis Pushkarev (zloirock.ru)'
 });
@@ -3225,10 +3262,10 @@ var toObject$7 = function (argument) {
   return Object$2(requireObjectCoercible$4(argument));
 };
 
-var uncurryThis$h = functionUncurryThis;
+var uncurryThis$j = functionUncurryThis;
 var toObject$6 = toObject$7;
 
-var hasOwnProperty$2 = uncurryThis$h({}.hasOwnProperty);
+var hasOwnProperty$2 = uncurryThis$j({}.hasOwnProperty);
 
 // `HasOwnProperty` abstract operation
 // https://tc39.es/ecma262/#sec-hasownproperty
@@ -3236,14 +3273,14 @@ var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
   return hasOwnProperty$2(toObject$6(it), key);
 };
 
-var uncurryThis$g = functionUncurryThis;
+var uncurryThis$i = functionUncurryThis;
 
 var id = 0;
 var postfix = Math.random();
-var toString$7 = uncurryThis$g(1.0.toString);
+var toString$8 = uncurryThis$i(1.0.toString);
 
 var uid$2 = function (key) {
-  return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$7(++id + postfix, 36);
+  return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$8(++id + postfix, 36);
 };
 
 var global$m = global$y;
@@ -3320,11 +3357,11 @@ var documentCreateElement$2 = function (it) {
 };
 
 var DESCRIPTORS$7 = descriptors;
-var fails$a = fails$e;
+var fails$b = fails$f;
 var createElement = documentCreateElement$2;
 
 // Thank's IE8 for his funny defineProperty
-var ie8DomDefine = !DESCRIPTORS$7 && !fails$a(function () {
+var ie8DomDefine = !DESCRIPTORS$7 && !fails$b(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- requied for testing
   return Object.defineProperty(createElement('div'), 'a', {
     get: function () { return 7; }
@@ -3363,7 +3400,7 @@ var String$3 = global$j.String;
 var TypeError$6 = global$j.TypeError;
 
 // `Assert: Type(argument) is Object`
-var anObject$4 = function (argument) {
+var anObject$6 = function (argument) {
   if (isObject$6(argument)) return argument;
   throw TypeError$6(String$3(argument) + ' is not an object');
 };
@@ -3371,7 +3408,7 @@ var anObject$4 = function (argument) {
 var global$i = global$y;
 var DESCRIPTORS$5 = descriptors;
 var IE8_DOM_DEFINE = ie8DomDefine;
-var anObject$3 = anObject$4;
+var anObject$5 = anObject$6;
 var toPropertyKey$1 = toPropertyKey$3;
 
 var TypeError$5 = global$i.TypeError;
@@ -3381,9 +3418,9 @@ var $defineProperty = Object.defineProperty;
 // `Object.defineProperty` method
 // https://tc39.es/ecma262/#sec-object.defineproperty
 objectDefineProperty.f = DESCRIPTORS$5 ? $defineProperty : function defineProperty(O, P, Attributes) {
-  anObject$3(O);
+  anObject$5(O);
   P = toPropertyKey$1(P);
-  anObject$3(Attributes);
+  anObject$5(Attributes);
   if (IE8_DOM_DEFINE) try {
     return $defineProperty(O, P, Attributes);
   } catch (error) { /* empty */ }
@@ -3403,13 +3440,13 @@ var createNonEnumerableProperty$4 = DESCRIPTORS$4 ? function (object, key, value
   return object;
 };
 
-var redefine$1 = {exports: {}};
+var redefine$4 = {exports: {}};
 
-var uncurryThis$f = functionUncurryThis;
+var uncurryThis$h = functionUncurryThis;
 var isCallable$5 = isCallable$b;
 var store$1 = sharedStore;
 
-var functionToString$2 = uncurryThis$f(Function.toString);
+var functionToString$2 = uncurryThis$h(Function.toString);
 
 // this helper broken in `core-js@3.4.1-3.4.4`, so we can't use `shared` helper
 if (!isCallable$5(store$1.inspectSource)) {
@@ -3441,7 +3478,7 @@ var hiddenKeys$4 = {};
 
 var NATIVE_WEAK_MAP = nativeWeakMap;
 var global$g = global$y;
-var uncurryThis$e = functionUncurryThis;
+var uncurryThis$g = functionUncurryThis;
 var isObject$5 = isObject$a;
 var createNonEnumerableProperty$3 = createNonEnumerableProperty$4;
 var hasOwn$6 = hasOwnProperty_1;
@@ -3469,9 +3506,9 @@ var getterFor = function (TYPE) {
 
 if (NATIVE_WEAK_MAP || shared.state) {
   var store = shared.state || (shared.state = new WeakMap$1());
-  var wmget = uncurryThis$e(store.get);
-  var wmhas = uncurryThis$e(store.has);
-  var wmset = uncurryThis$e(store.set);
+  var wmget = uncurryThis$g(store.get);
+  var wmhas = uncurryThis$g(store.has);
+  var wmset = uncurryThis$g(store.set);
   set = function (it, metadata) {
     if (wmhas(store, it)) throw new TypeError$4(OBJECT_ALREADY_INITIALIZED);
     metadata.facade = it;
@@ -3540,7 +3577,7 @@ var getInternalState = InternalStateModule.get;
 var enforceInternalState = InternalStateModule.enforce;
 var TEMPLATE = String(String).split('String');
 
-(redefine$1.exports = function (O, key, value, options) {
+(redefine$4.exports = function (O, key, value, options) {
   var unsafe = options ? !!options.unsafe : false;
   var simple = options ? !!options.enumerable : false;
   var noTargetGet = options ? !!options.noTargetGet : false;
@@ -3651,13 +3688,13 @@ var arrayIncludes = {
   indexOf: createMethod$3(false)
 };
 
-var uncurryThis$d = functionUncurryThis;
+var uncurryThis$f = functionUncurryThis;
 var hasOwn$3 = hasOwnProperty_1;
 var toIndexedObject$2 = toIndexedObject$5;
 var indexOf$1 = arrayIncludes.indexOf;
 var hiddenKeys$2 = hiddenKeys$4;
 
-var push$2 = uncurryThis$d([].push);
+var push$2 = uncurryThis$f([].push);
 
 var objectKeysInternal = function (object, names) {
   var O = toIndexedObject$2(object);
@@ -3701,16 +3738,16 @@ var objectGetOwnPropertySymbols = {};
 objectGetOwnPropertySymbols.f = Object.getOwnPropertySymbols;
 
 var getBuiltIn$2 = getBuiltIn$5;
-var uncurryThis$c = functionUncurryThis;
+var uncurryThis$e = functionUncurryThis;
 var getOwnPropertyNamesModule = objectGetOwnPropertyNames;
 var getOwnPropertySymbolsModule$1 = objectGetOwnPropertySymbols;
-var anObject$2 = anObject$4;
+var anObject$4 = anObject$6;
 
-var concat$2 = uncurryThis$c([].concat);
+var concat$2 = uncurryThis$e([].concat);
 
 // all object keys, includes non-enumerable and symbols
 var ownKeys$4 = getBuiltIn$2('Reflect', 'ownKeys') || function ownKeys(it) {
-  var keys = getOwnPropertyNamesModule.f(anObject$2(it));
+  var keys = getOwnPropertyNamesModule.f(anObject$4(it));
   var getOwnPropertySymbols = getOwnPropertySymbolsModule$1.f;
   return getOwnPropertySymbols ? concat$2(keys, getOwnPropertySymbols(it)) : keys;
 };
@@ -3730,7 +3767,7 @@ var copyConstructorProperties$1 = function (target, source) {
   }
 };
 
-var fails$9 = fails$e;
+var fails$a = fails$f;
 var isCallable$2 = isCallable$b;
 
 var replacement = /#|\.prototype\./;
@@ -3739,7 +3776,7 @@ var isForced$1 = function (feature, detection) {
   var value = data[normalize(feature)];
   return value == POLYFILL ? true
     : value == NATIVE ? false
-    : isCallable$2(detection) ? fails$9(detection)
+    : isCallable$2(detection) ? fails$a(detection)
     : !!detection;
 };
 
@@ -3756,7 +3793,7 @@ var isForced_1 = isForced$1;
 var global$e = global$y;
 var getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f;
 var createNonEnumerableProperty$1 = createNonEnumerableProperty$4;
-var redefine = redefine$1.exports;
+var redefine$3 = redefine$4.exports;
 var setGlobal = setGlobal$3;
 var copyConstructorProperties = copyConstructorProperties$1;
 var isForced = isForced_1;
@@ -3805,14 +3842,14 @@ var _export = function (options, source) {
       createNonEnumerableProperty$1(sourceProperty, 'sham', true);
     }
     // extend global
-    redefine(target, key, sourceProperty, options);
+    redefine$3(target, key, sourceProperty, options);
   }
 };
 
-var uncurryThis$b = functionUncurryThis;
+var uncurryThis$d = functionUncurryThis;
 var aCallable$1 = aCallable$3;
 
-var bind$3 = uncurryThis$b(uncurryThis$b.bind);
+var bind$3 = uncurryThis$d(uncurryThis$d.bind);
 
 // optional / simple context binding
 var functionBindContext = function (fn, that) {
@@ -3822,13 +3859,13 @@ var functionBindContext = function (fn, that) {
   };
 };
 
-var classof$5 = classofRaw$1;
+var classof$6 = classofRaw$1;
 
 // `IsArray` abstract operation
 // https://tc39.es/ecma262/#sec-isarray
 // eslint-disable-next-line es/no-array-isarray -- safe
 var isArray$8 = Array.isArray || function isArray(argument) {
-  return classof$5(argument) == 'Array';
+  return classof$6(argument) == 'Array';
 };
 
 var wellKnownSymbol$8 = wellKnownSymbol$a;
@@ -3841,7 +3878,7 @@ test$1[TO_STRING_TAG$1] = 'z';
 var toStringTagSupport = String(test$1) === '[object z]';
 
 var global$d = global$y;
-var TO_STRING_TAG_SUPPORT = toStringTagSupport;
+var TO_STRING_TAG_SUPPORT$2 = toStringTagSupport;
 var isCallable$1 = isCallable$b;
 var classofRaw = classofRaw$1;
 var wellKnownSymbol$7 = wellKnownSymbol$a;
@@ -3860,7 +3897,7 @@ var tryGet = function (it, key) {
 };
 
 // getting tag from ES6+ `Object.prototype.toString`
-var classof$4 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
+var classof$5 = TO_STRING_TAG_SUPPORT$2 ? classofRaw : function (it) {
   var O, tag, result;
   return it === undefined ? 'Undefined' : it === null ? 'Null'
     // @@toStringTag case
@@ -3871,10 +3908,10 @@ var classof$4 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
     : (result = classofRaw(O)) == 'Object' && isCallable$1(O.callee) ? 'Arguments' : result;
 };
 
-var uncurryThis$a = functionUncurryThis;
-var fails$8 = fails$e;
+var uncurryThis$c = functionUncurryThis;
+var fails$9 = fails$f;
 var isCallable = isCallable$b;
-var classof$3 = classof$4;
+var classof$4 = classof$5;
 var getBuiltIn$1 = getBuiltIn$5;
 var inspectSource = inspectSource$3;
 
@@ -3882,7 +3919,7 @@ var noop$2 = function () { /* empty */ };
 var empty = [];
 var construct = getBuiltIn$1('Reflect', 'construct');
 var constructorRegExp = /^\s*(?:class|function)\b/;
-var exec$1 = uncurryThis$a(constructorRegExp.exec);
+var exec$1 = uncurryThis$c(constructorRegExp.exec);
 var INCORRECT_TO_STRING = !constructorRegExp.exec(noop$2);
 
 var isConstructorModern = function (argument) {
@@ -3897,7 +3934,7 @@ var isConstructorModern = function (argument) {
 
 var isConstructorLegacy = function (argument) {
   if (!isCallable(argument)) return false;
-  switch (classof$3(argument)) {
+  switch (classof$4(argument)) {
     case 'AsyncFunction':
     case 'GeneratorFunction':
     case 'AsyncGeneratorFunction': return false;
@@ -3907,7 +3944,7 @@ var isConstructorLegacy = function (argument) {
 
 // `IsConstructor` abstract operation
 // https://tc39.es/ecma262/#sec-isconstructor
-var isConstructor$2 = !construct || fails$8(function () {
+var isConstructor$2 = !construct || fails$9(function () {
   var called;
   return isConstructorModern(isConstructorModern.call)
     || !isConstructorModern(Object)
@@ -3948,13 +3985,13 @@ var arraySpeciesCreate$2 = function (originalArray, length) {
 };
 
 var bind$2 = functionBindContext;
-var uncurryThis$9 = functionUncurryThis;
+var uncurryThis$b = functionUncurryThis;
 var IndexedObject$2 = indexedObject;
 var toObject$5 = toObject$7;
 var lengthOfArrayLike$3 = lengthOfArrayLike$5;
 var arraySpeciesCreate$1 = arraySpeciesCreate$2;
 
-var push$1 = uncurryThis$9([].push);
+var push$1 = uncurryThis$b([].push);
 
 // `Array.prototype.{ forEach, map, filter, some, every, find, findIndex, filterReject }` methods implementation
 var createMethod$2 = function (TYPE) {
@@ -4021,11 +4058,11 @@ var arrayIteration = {
   filterReject: createMethod$2(7)
 };
 
-var fails$7 = fails$e;
+var fails$8 = fails$f;
 
 var arrayMethodIsStrict$2 = function (METHOD_NAME, argument) {
   var method = [][METHOD_NAME];
-  return !!method && fails$7(function () {
+  return !!method && fails$8(function () {
     // eslint-disable-next-line no-useless-call,no-throw-literal -- required for testing
     method.call(null, argument || function () { throw 1; }, 1);
   });
@@ -4053,6 +4090,25 @@ $$c({ target: 'Array', proto: true, forced: [].forEach != forEach$1 }, {
   forEach: forEach$1
 });
 
+var TO_STRING_TAG_SUPPORT$1 = toStringTagSupport;
+var classof$3 = classof$5;
+
+// `Object.prototype.toString` method implementation
+// https://tc39.es/ecma262/#sec-object.prototype.tostring
+var objectToString$1 = TO_STRING_TAG_SUPPORT$1 ? {}.toString : function toString() {
+  return '[object ' + classof$3(this) + ']';
+};
+
+var TO_STRING_TAG_SUPPORT = toStringTagSupport;
+var redefine$2 = redefine$4.exports;
+var toString$7 = objectToString$1;
+
+// `Object.prototype.toString` method
+// https://tc39.es/ecma262/#sec-object.prototype.tostring
+if (!TO_STRING_TAG_SUPPORT) {
+  redefine$2(Object.prototype, 'toString', toString$7, { unsafe: true });
+}
+
 // iterable DOM collections
 // flag - `iterable` interface - 'entries', 'keys', 'values', 'forEach' methods
 var domIterables = {
@@ -4131,9 +4187,9 @@ var objectKeys$2 = Object.keys || function keys(O) {
 };
 
 var DESCRIPTORS$2 = descriptors;
-var uncurryThis$8 = functionUncurryThis;
+var uncurryThis$a = functionUncurryThis;
 var call = functionCall;
-var fails$6 = fails$e;
+var fails$7 = fails$f;
 var objectKeys$1 = objectKeys$2;
 var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
 var propertyIsEnumerableModule = objectPropertyIsEnumerable;
@@ -4144,11 +4200,11 @@ var IndexedObject$1 = indexedObject;
 var $assign = Object.assign;
 // eslint-disable-next-line es/no-object-defineproperty -- required for testing
 var defineProperty$1 = Object.defineProperty;
-var concat$1 = uncurryThis$8([].concat);
+var concat$1 = uncurryThis$a([].concat);
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
-var objectAssign$1 = !$assign || fails$6(function () {
+var objectAssign$1 = !$assign || fails$7(function () {
   // should have correct order of operations (Edge bug)
   if (DESCRIPTORS$2 && $assign({ b: 1 }, $assign(defineProperty$1({}, 'a', {
     enumerable: true,
@@ -4197,14 +4253,14 @@ $$b({ target: 'Object', stat: true, forced: Object.assign !== assign$2 }, {
   assign: assign$2
 });
 
-var uncurryThis$7 = functionUncurryThis;
+var uncurryThis$9 = functionUncurryThis;
 
 // `thisNumberValue` abstract operation
 // https://tc39.es/ecma262/#sec-thisnumbervalue
-var thisNumberValue$1 = uncurryThis$7(1.0.valueOf);
+var thisNumberValue$1 = uncurryThis$9(1.0.valueOf);
 
 var global$a = global$y;
-var classof$2 = classof$4;
+var classof$2 = classof$5;
 
 var String$2 = global$a.String;
 
@@ -4233,18 +4289,18 @@ var stringRepeat = function repeat(count) {
 
 var $$a = _export;
 var global$8 = global$y;
-var uncurryThis$6 = functionUncurryThis;
+var uncurryThis$8 = functionUncurryThis;
 var toIntegerOrInfinity = toIntegerOrInfinity$4;
 var thisNumberValue = thisNumberValue$1;
 var $repeat = stringRepeat;
-var fails$5 = fails$e;
+var fails$6 = fails$f;
 
 var RangeError$1 = global$8.RangeError;
 var String$1 = global$8.String;
 var floor = Math.floor;
-var repeat = uncurryThis$6($repeat);
-var stringSlice = uncurryThis$6(''.slice);
-var un$ToFixed = uncurryThis$6(1.0.toFixed);
+var repeat = uncurryThis$8($repeat);
+var stringSlice = uncurryThis$8(''.slice);
+var un$ToFixed = uncurryThis$8(1.0.toFixed);
 
 var pow = function (x, n, acc) {
   return n === 0 ? acc : n % 2 === 1 ? pow(x, n - 1, acc * x) : pow(x * x, n / 2, acc);
@@ -4294,12 +4350,12 @@ var dataToString = function (data) {
   } return s;
 };
 
-var FORCED$2 = fails$5(function () {
+var FORCED$2 = fails$6(function () {
   return un$ToFixed(0.00008, 3) !== '0.000' ||
     un$ToFixed(0.9, 0) !== '1' ||
     un$ToFixed(1.255, 2) !== '1.25' ||
     un$ToFixed(1000000000000000128.0, 0) !== '1000000000000000128';
-}) || !fails$5(function () {
+}) || !fails$6(function () {
   // V8 ~ Android 4.3-
   un$ToFixed({});
 });
@@ -4400,12 +4456,12 @@ var generateTypeScaleSizes = function generateTypeScaleSizes(typography) {
 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$5 = functionUncurryThis;
+var uncurryThis$7 = functionUncurryThis;
 var requireObjectCoercible$2 = requireObjectCoercible$6;
 var toString$4 = toString$6;
 var whitespaces$1 = whitespaces$2;
 
-var replace$2 = uncurryThis$5(''.replace);
+var replace$2 = uncurryThis$7(''.replace);
 var whitespace = '[' + whitespaces$1 + ']';
 var ltrim = RegExp('^' + whitespace + whitespace + '*');
 var rtrim = RegExp(whitespace + whitespace + '*$');
@@ -4433,8 +4489,8 @@ var stringTrim = {
 };
 
 var global$7 = global$y;
-var fails$4 = fails$e;
-var uncurryThis$4 = functionUncurryThis;
+var fails$5 = fails$f;
+var uncurryThis$6 = functionUncurryThis;
 var toString$3 = toString$6;
 var trim = stringTrim.trim;
 var whitespaces = whitespaces$2;
@@ -4443,10 +4499,10 @@ var $parseInt$1 = global$7.parseInt;
 var Symbol$1 = global$7.Symbol;
 var ITERATOR = Symbol$1 && Symbol$1.iterator;
 var hex$1 = /^[+-]?0x/i;
-var exec = uncurryThis$4(hex$1.exec);
+var exec = uncurryThis$6(hex$1.exec);
 var FORCED$1 = $parseInt$1(whitespaces + '08') !== 8 || $parseInt$1(whitespaces + '0x16') !== 22
   // MS Edge 18- broken with boxed symbols
-  || (ITERATOR && !fails$4(function () { $parseInt$1(Object(ITERATOR)); }));
+  || (ITERATOR && !fails$5(function () { $parseInt$1(Object(ITERATOR)); }));
 
 // `parseInt` method
 // https://tc39.es/ecma262/#sec-parseint-string-radix
@@ -4474,7 +4530,7 @@ var createProperty$2 = function (object, key, value) {
   else object[propertyKey] = value;
 };
 
-var fails$3 = fails$e;
+var fails$4 = fails$f;
 var wellKnownSymbol$5 = wellKnownSymbol$a;
 var V8_VERSION$1 = engineV8Version;
 
@@ -4484,7 +4540,7 @@ var arrayMethodHasSpeciesSupport$4 = function (METHOD_NAME) {
   // We can't use this feature detection in V8 since it causes
   // deoptimization and serious performance degradation
   // https://github.com/zloirock/core-js/issues/677
-  return V8_VERSION$1 >= 51 || !fails$3(function () {
+  return V8_VERSION$1 >= 51 || !fails$4(function () {
     var array = [];
     var constructor = array.constructor = {};
     constructor[SPECIES$1] = function () {
@@ -4494,9 +4550,9 @@ var arrayMethodHasSpeciesSupport$4 = function (METHOD_NAME) {
   });
 };
 
-var uncurryThis$3 = functionUncurryThis;
+var uncurryThis$5 = functionUncurryThis;
 
-var arraySlice = uncurryThis$3([].slice);
+var arraySlice = uncurryThis$5([].slice);
 
 var $$8 = _export;
 var global$6 = global$y;
@@ -4550,7 +4606,7 @@ $$8({ target: 'Array', proto: true, forced: !HAS_SPECIES_SUPPORT$2 }, {
 
 var $$7 = _export;
 var global$5 = global$y;
-var fails$2 = fails$e;
+var fails$3 = fails$f;
 var isArray$5 = isArray$8;
 var isObject$2 = isObject$a;
 var toObject$3 = toObject$7;
@@ -4569,7 +4625,7 @@ var TypeError$3 = global$5.TypeError;
 // We can't use this feature detection in V8 since it causes
 // deoptimization and serious performance degradation
 // https://github.com/zloirock/core-js/issues/679
-var IS_CONCAT_SPREADABLE_SUPPORT = V8_VERSION >= 51 || !fails$2(function () {
+var IS_CONCAT_SPREADABLE_SUPPORT = V8_VERSION >= 51 || !fails$3(function () {
   var array = [];
   array[IS_CONCAT_SPREADABLE] = false;
   return array.concat()[0] !== array;
@@ -7046,12 +7102,12 @@ var defaultTheme = {
   tooltip: tooltip
 };
 
-var uncurryThis$2 = functionUncurryThis;
+var uncurryThis$4 = functionUncurryThis;
 var requireObjectCoercible$1 = requireObjectCoercible$6;
 var toString$2 = toString$6;
 
 var quot = /"/g;
-var replace$1 = uncurryThis$2(''.replace);
+var replace$1 = uncurryThis$4(''.replace);
 
 // `CreateHTML` abstract operation
 // https://tc39.es/ecma262/#sec-createhtml
@@ -7062,12 +7118,12 @@ var createHtml = function (string, tag, attribute, value) {
   return p1 + '>' + S + '</' + tag + '>';
 };
 
-var fails$1 = fails$e;
+var fails$2 = fails$f;
 
 // check the existence of a method, lowercase
 // of a tag and escaping quotes in arguments
 var stringHtmlForced = function (METHOD_NAME) {
-  return fails$1(function () {
+  return fails$2(function () {
     var test = ''[METHOD_NAME]('"');
     return test !== test.toLowerCase() || test.split('"').length > 3;
   });
@@ -15538,24 +15594,29 @@ var container$8 = function container(_ref, _ref2) {
   );
 };
 
+var _excluded$y = ["fullScreen", "size"];
+
 var Loader = function Loader(_ref) {
   var _ref$fullScreen = _ref.fullScreen,
       fullScreen = _ref$fullScreen === void 0 ? false : _ref$fullScreen,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "lg" : _ref$size;
-  return jsx("div", {
+      size = _ref$size === void 0 ? "lg" : _ref$size,
+      rest = _objectWithoutProperties(_ref, _excluded$y);
+
+  return jsx("div", _extends$d({
     css: function css(theme) {
       return container$8(theme, {
         fullScreen: fullScreen,
         size: size
       });
     },
-    "data-testid": "loader",
-    className: "loading-container"
-  }, jsx(reactSpinners.PulseLoader, null));
+    "data-testid": "loader"
+  }, rest, {
+    className: "loading-container".concat(rest !== null && rest !== void 0 && rest.className ? " ".concat(rest === null || rest === void 0 ? void 0 : rest.className) : "")
+  }), jsx(reactSpinners.PulseLoader, null));
 };
 
-var _excluded$g = ["color", "size"];
+var _excluded$x = ["color", "size"];
 var roundDimensions = {
   md: "3.5rem",
   lg: "5rem"
@@ -15654,7 +15715,7 @@ var btnContainer = function btnContainer(_ref3, _ref4) {
 
   var color = _ref4.color,
       size = _ref4.size,
-      attrs = _objectWithoutProperties(_ref4, _excluded$g);
+      attrs = _objectWithoutProperties(_ref4, _excluded$x);
 
   return (
     /*#__PURE__*/
@@ -15668,7 +15729,7 @@ var btnContainer = function btnContainer(_ref3, _ref4) {
   );
 };
 
-var _excluded$f = ["as", "color", "size", "variant", "block", "isLoading", "noGutters", "className", "rounded", "iconBefore", "iconAfter", "children", "disabled"];
+var _excluded$w = ["as", "color", "size", "variant", "block", "isLoading", "noGutters", "className", "rounded", "iconBefore", "iconAfter", "children", "disabled"];
 var iconSizes = {
   sm: 28,
   md: 30,
@@ -15715,7 +15776,7 @@ var Button = function Button(props) {
       iconAfter = props.iconAfter,
       children = props.children,
       disabled = props.disabled,
-      rest = _objectWithoutProperties(props, _excluded$f);
+      rest = _objectWithoutProperties(props, _excluded$w);
 
   var Component = as || "button";
   var PrefixIcon = iconBefore;
@@ -15762,25 +15823,6 @@ var Button = function Button(props) {
   })));
 };
 
-var chipHeight = {
-  md: "2.5rem",
-  lg: "3rem"
-};
-var chip = function chip(_ref, _ref2) {
-  var typeScaleSizes = _ref.typeScaleSizes;
-  var size = _ref2.size;
-  var fontSizes = {
-    md: typeScaleSizes.sm,
-    lg: typeScaleSizes.lg
-  };
-  return (
-    /*#__PURE__*/
-
-    /*#__PURE__*/
-    css("display:inline-flex;align-items:center;font-size:", fontSizes[size], ";", size && "height: ".concat(chipHeight[size]), ";padding:0 0.75rem;border-radius:5px;button{margin-right:0.5rem;display:inline-flex;color:white;background:transparent;border:none;padding:0;}" + (process.env.NODE_ENV === "production" ? "" : ";label:chip;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjWSIsImZpbGUiOiJzdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFRoZW1lLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBTaXplIH0gZnJvbSBcIi4vQ2hpcFwiO1xuXG5jb25zdCBjaGlwSGVpZ2h0ID0ge1xuICBtZDogXCIyLjVyZW1cIixcbiAgbGc6IFwiM3JlbVwiLFxufTtcblxuZXhwb3J0IGNvbnN0IGNoaXAgPSAoeyB0eXBlU2NhbGVTaXplcyB9OiBUaGVtZSwgeyBzaXplIH06IHsgc2l6ZTogU2l6ZSB9KTogU2VyaWFsaXplZFN0eWxlcyA9PiB7XG4gIGNvbnN0IGZvbnRTaXplcyA9IHtcbiAgICBtZDogdHlwZVNjYWxlU2l6ZXMuc20sXG4gICAgbGc6IHR5cGVTY2FsZVNpemVzLmxnLFxuICB9O1xuXG4gIHJldHVybiBjc3NgXG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBmb250LXNpemU6ICR7Zm9udFNpemVzW3NpemVdfTtcbiAgICAke3NpemUgJiYgYGhlaWdodDogJHtjaGlwSGVpZ2h0W3NpemVdfWB9O1xuICAgIHBhZGRpbmc6IDAgMC43NXJlbTtcbiAgICBib3JkZXItcmFkaXVzOiA1cHg7XG5cbiAgICBidXR0b24ge1xuICAgICAgbWFyZ2luLXJpZ2h0OiAwLjVyZW07XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGNvbG9yOiB3aGl0ZTtcbiAgICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgcGFkZGluZzogMDtcbiAgICB9XG4gIGA7XG59O1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:chip;")
-  );
-};
-
 var _path$5, _path2$5;
 
 function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
@@ -15995,7 +16037,26 @@ function SvgHamburger(props) {
   })));
 }
 
-var _excluded$e = ["size", "onClose", "children", "style"];
+var chipHeight = {
+  md: "2.5rem",
+  lg: "3rem"
+};
+var chip = function chip(_ref, _ref2) {
+  var typeScaleSizes = _ref.typeScaleSizes;
+  var size = _ref2.size;
+  var fontSizes = {
+    md: typeScaleSizes.sm,
+    lg: typeScaleSizes.lg
+  };
+  return (
+    /*#__PURE__*/
+
+    /*#__PURE__*/
+    css("display:inline-flex;align-items:center;font-size:", fontSizes[size], ";", size && "height: ".concat(chipHeight[size]), ";padding:0 0.75rem;border-radius:5px;button{margin-right:0.5rem;display:inline-flex;color:white;background:transparent;border:none;padding:0;}" + (process.env.NODE_ENV === "production" ? "" : ";label:chip;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjWSIsImZpbGUiOiJzdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFRoZW1lLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBTaXplIH0gZnJvbSBcIi4vQ2hpcFwiO1xuXG5jb25zdCBjaGlwSGVpZ2h0ID0ge1xuICBtZDogXCIyLjVyZW1cIixcbiAgbGc6IFwiM3JlbVwiLFxufTtcblxuZXhwb3J0IGNvbnN0IGNoaXAgPSAoeyB0eXBlU2NhbGVTaXplcyB9OiBUaGVtZSwgeyBzaXplIH06IHsgc2l6ZTogU2l6ZSB9KTogU2VyaWFsaXplZFN0eWxlcyA9PiB7XG4gIGNvbnN0IGZvbnRTaXplcyA9IHtcbiAgICBtZDogdHlwZVNjYWxlU2l6ZXMuc20sXG4gICAgbGc6IHR5cGVTY2FsZVNpemVzLmxnLFxuICB9O1xuXG4gIHJldHVybiBjc3NgXG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBmb250LXNpemU6ICR7Zm9udFNpemVzW3NpemVdfTtcbiAgICAke3NpemUgJiYgYGhlaWdodDogJHtjaGlwSGVpZ2h0W3NpemVdfWB9O1xuICAgIHBhZGRpbmc6IDAgMC43NXJlbTtcbiAgICBib3JkZXItcmFkaXVzOiA1cHg7XG5cbiAgICBidXR0b24ge1xuICAgICAgbWFyZ2luLXJpZ2h0OiAwLjVyZW07XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGNvbG9yOiB3aGl0ZTtcbiAgICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgcGFkZGluZzogMDtcbiAgICB9XG4gIGA7XG59O1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:chip;")
+  );
+};
+
+var _excluded$v = ["size", "onClose", "children", "style"];
 
 var Chip = function Chip(_ref) {
   var _ref$size = _ref.size,
@@ -16007,7 +16068,7 @@ var Chip = function Chip(_ref) {
     backgroundColor: "#5c5c5c",
     color: "#fff"
   } : _ref$style,
-      rest = _objectWithoutProperties(_ref, _excluded$e);
+      rest = _objectWithoutProperties(_ref, _excluded$v);
 
   return jsx("div", _extends$d({
     css: function css(theme) {
@@ -16060,6 +16121,8 @@ var avatar = function avatar(_ref, _ref2) {
   );
 };
 
+var _excluded$u = ["src", "size", "bgColor", "alt", "children"];
+
 var Avatar = function Avatar(_ref) {
   var src = _ref.src,
       _ref$size = _ref.size,
@@ -16068,16 +16131,16 @@ var Avatar = function Avatar(_ref) {
       bgColor = _ref$bgColor === void 0 ? "#0E59BB" : _ref$bgColor,
       alt = _ref.alt,
       children = _ref.children,
-      className = _ref.className;
-  return jsx("figure", {
+      rest = _objectWithoutProperties(_ref, _excluded$u);
+
+  return jsx("figure", _extends$d({
     css: function css(theme) {
       return avatar(theme, {
         size: size,
         bgColor: bgColor
       });
-    },
-    className: className
-  }, Boolean(src) && jsx("img", {
+    }
+  }, rest), Boolean(src) && jsx("img", {
     src: src,
     alt: alt
   }), children !== undefined && jsx("span", {
@@ -16095,7 +16158,7 @@ var tag = function tag(_ref) {
   );
 };
 
-var _excluded$d = ["children", "style"];
+var _excluded$t = ["children", "style"];
 
 var Tag = function Tag(_ref) {
   var children = _ref.children,
@@ -16104,7 +16167,7 @@ var Tag = function Tag(_ref) {
     backgroundColor: "#a3dfe3",
     color: "#5c5c5c"
   } : _ref$style,
-      rest = _objectWithoutProperties(_ref, _excluded$d);
+      rest = _objectWithoutProperties(_ref, _excluded$t);
 
   return jsx("span", _extends$d({
     css: tag,
@@ -16121,13 +16184,17 @@ var aspectRatioContainer = function aspectRatioContainer(padding) {
   );
 };
 
+var _excluded$s = ["ratio", "children"];
+
 var AspectRatio = function AspectRatio(_ref) {
   var ratio = _ref.ratio,
-      children = _ref.children;
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded$s);
+
   var paddingPercentage = ratio[1] / ratio[0] * 100;
-  return jsx("div", {
+  return jsx("div", _extends$d({
     css: aspectRatioContainer(paddingPercentage)
-  }, jsx("div", {
+  }, rest), jsx("div", {
     className: "aspect-ratio-wrapper"
   }, children));
 };
@@ -16147,6 +16214,8 @@ var container$7 = function container(_ref, _ref2) {
   );
 };
 
+var _excluded$r = ["size", "offset", "children"];
+
 var Badge = function Badge(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? "md" : _ref$size,
@@ -16155,15 +16224,17 @@ var Badge = function Badge(_ref) {
     top: "0",
     right: "-8px"
   } : _ref$offset,
-      children = _ref.children;
-  return jsx("span", {
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded$r);
+
+  return jsx("span", _extends$d({
     css: function css(theme) {
       return container$7(theme, {
         size: size,
         offset: offset
       });
     }
-  }, children);
+  }, rest), children);
 };
 
 var global$4 = global$y;
@@ -16238,9 +16309,9 @@ $$5({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
 var $$4 = _export;
 var toObject$1 = toObject$7;
 var nativeKeys = objectKeys$2;
-var fails = fails$e;
+var fails$1 = fails$f;
 
-var FAILS_ON_PRIMITIVES = fails(function () { nativeKeys(1); });
+var FAILS_ON_PRIMITIVES = fails$1(function () { nativeKeys(1); });
 
 // `Object.keys` method
 // https://tc39.es/ecma262/#sec-object.keys
@@ -23032,7 +23103,7 @@ var screenfull = {exports: {}};
 
 /*!
 * screenfull
-* v5.1.0 - 2020-12-24
+* v5.2.0 - 2021-11-03
 * (c) Sindre Sorhus; MIT License
 */
 
@@ -23987,6 +24058,7 @@ var container$6 = function container(_ref, _ref2) {
   );
 };
 
+var _excluded$q = ["type", "children", "onClose", "icon"];
 var ICONS = {
   info: jsx(SvgInfo, {
     height: 56
@@ -24006,14 +24078,16 @@ var Alert = function Alert(_ref) {
   var type = _ref.type,
       children = _ref.children,
       onClose = _ref.onClose,
-      Icon = _ref.icon;
-  return jsx("div", {
+      Icon = _ref.icon,
+      rest = _objectWithoutProperties(_ref, _excluded$q);
+
+  return jsx("div", _extends$d({
     css: function css(theme) {
       return container$6(theme, {
         type: type
       });
     }
-  }, Icon ? jsx(Icon, {
+  }, rest), Icon ? jsx(Icon, {
     height: 56,
     className: "icon",
     "data-testid": "icon"
@@ -24046,14 +24120,18 @@ var container$5 = function container(_ref, _ref2) {
   );
 };
 
+var _excluded$p = ["percent", "size", "rounded"];
+
 var ProgressBar$1 = function ProgressBar(_ref) {
   var percent = _ref.percent,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "md" : _ref$size,
       _ref$rounded = _ref.rounded,
-      rounded = _ref$rounded === void 0 ? true : _ref$rounded;
+      rounded = _ref$rounded === void 0 ? true : _ref$rounded,
+      rest = _objectWithoutProperties(_ref, _excluded$p);
+
   var showPercentage = percent >= 0 && percent <= 100;
-  return jsx("div", {
+  return jsx("div", _extends$d({
     css: function css(theme) {
       return container$5(theme, {
         percent: percent,
@@ -24061,7 +24139,7 @@ var ProgressBar$1 = function ProgressBar(_ref) {
         rounded: rounded
       });
     }
-  }, showPercentage && jsx("div", null, percent, "%"));
+  }, rest), showPercentage && jsx("div", null, percent, "%"));
 };
 
 var top = 'top';
@@ -25979,7 +26057,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
 }); // eslint-disable-next-line import/no-unused-modules
 
 /**!
-* tippy.js v6.3.2
+* tippy.js v6.3.7
 * (c) 2017-2021 atomiks
 * MIT License
 */
@@ -26119,7 +26197,7 @@ function getOwnerDocument(elementOrElements) {
       element = _normalizeToArray[0]; // Elements created via a <template> have an ownerDocument with no reference to the body
 
 
-  return (element == null ? void 0 : (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body) ? element.ownerDocument : document;
+  return element != null && (_element$ownerDocumen = element.ownerDocument) != null && _element$ownerDocumen.body ? element.ownerDocument : document;
 }
 function isCursorOutsideInteractiveBorder(popperTreeData, event) {
   var clientX = event.clientX,
@@ -26164,13 +26242,13 @@ function actualContains(parent, child) {
   var target = child;
 
   while (target) {
-    var _ref2;
+    var _target$getRootNode;
 
     if (parent.contains(target)) {
       return true;
     }
 
-    target = (_ref2 = target.getRootNode == null ? void 0 : target.getRootNode()) == null ? void 0 : _ref2.host;
+    target = target.getRootNode == null ? void 0 : (_target$getRootNode = target.getRootNode()) == null ? void 0 : _target$getRootNode.host;
   }
 
   return false;
@@ -26349,7 +26427,7 @@ var defaultProps$1 = Object.assign({
   touch: true,
   trigger: 'mouseenter focus',
   triggerTarget: null
-}, pluginProps, {}, renderProps);
+}, pluginProps, renderProps);
 var defaultKeys = Object.keys(defaultProps$1);
 var setDefaultProps = function setDefaultProps(partialProps) {
   /* istanbul ignore else */
@@ -26376,7 +26454,7 @@ function getExtendedPassedProps(passedProps) {
 
     return acc;
   }, {});
-  return Object.assign({}, passedProps, {}, pluginProps);
+  return Object.assign({}, passedProps, pluginProps);
 }
 function getDataAttributeProps(reference, plugins) {
   var propKeys = plugins ? Object.keys(getExtendedPassedProps(Object.assign({}, defaultProps$1, {
@@ -26407,7 +26485,7 @@ function evaluateProps(reference, props) {
   var out = Object.assign({}, props, {
     content: invokeWithArgsOrReturn(props.content, [reference])
   }, props.ignoreAttributes ? {} : getDataAttributeProps(reference, props.plugins));
-  out.aria = Object.assign({}, defaultProps$1.aria, {}, out.aria);
+  out.aria = Object.assign({}, defaultProps$1.aria, out.aria);
   out.aria = {
     expanded: out.aria.expanded === 'auto' ? props.interactive : out.aria.expanded,
     content: out.aria.content === 'auto' ? props.interactive ? null : 'describedby' : out.aria.content
@@ -26460,7 +26538,7 @@ var mouseMoveListeners = []; // Used by `hideAll()`
 
 var mountedInstances = [];
 function createTippy(reference, passedProps) {
-  var props = evaluateProps(reference, Object.assign({}, defaultProps$1, {}, getExtendedPassedProps(removeUndefinedProps(passedProps)))); // ===========================================================================
+  var props = evaluateProps(reference, Object.assign({}, defaultProps$1, getExtendedPassedProps(removeUndefinedProps(passedProps)))); // ===========================================================================
   // 🔒 Private members
   // ===========================================================================
 
@@ -26560,10 +26638,9 @@ function createTippy(reference, passedProps) {
       instance.clearDelayTimeouts();
     }
   });
-  popper.addEventListener('mouseleave', function (event) {
+  popper.addEventListener('mouseleave', function () {
     if (instance.props.interactive && instance.props.trigger.indexOf('mouseenter') >= 0) {
       getDocument().addEventListener('mousemove', debouncedOnMouseMove);
-      debouncedOnMouseMove(event);
     }
   });
   return instance; // ===========================================================================
@@ -26583,7 +26660,7 @@ function createTippy(reference, passedProps) {
     var _instance$props$rende;
 
     // @ts-ignore
-    return !!((_instance$props$rende = instance.props.render) == null ? void 0 : _instance$props$rende.$$tippy);
+    return !!((_instance$props$rende = instance.props.render) != null && _instance$props$rende.$$tippy);
   }
 
   function getCurrentTarget() {
@@ -26610,8 +26687,12 @@ function createTippy(reference, passedProps) {
     return getValueAtIndexOrReturn(instance.props.delay, isShow ? 0 : 1, defaultProps$1.delay);
   }
 
-  function handleStyles() {
-    popper.style.pointerEvents = instance.props.interactive && instance.state.isVisible ? '' : 'none';
+  function handleStyles(fromHide) {
+    if (fromHide === void 0) {
+      fromHide = false;
+    }
+
+    popper.style.pointerEvents = instance.props.interactive && !fromHide ? '' : 'none';
     popper.style.zIndex = "" + instance.props.zIndex;
   }
 
@@ -26622,7 +26703,7 @@ function createTippy(reference, passedProps) {
 
     pluginsHooks.forEach(function (pluginHooks) {
       if (pluginHooks[hook]) {
-        pluginHooks[hook].apply(void 0, args);
+        pluginHooks[hook].apply(pluginHooks, args);
       }
     });
 
@@ -26697,7 +26778,9 @@ function createTippy(reference, passedProps) {
     } // Clicked on the event listeners target
 
 
-    if (actualContains(getCurrentTarget(), actualTarget)) {
+    if (normalizeToArray(instance.props.triggerTarget || reference).some(function (el) {
+      return actualContains(el, actualTarget);
+    })) {
       if (currentInput.isTouch) {
         return;
       }
@@ -27063,6 +27146,7 @@ function createTippy(reference, passedProps) {
       parentNode.appendChild(popper);
     }
 
+    instance.state.isMounted = true;
     createPopperInstance();
     /* istanbul ignore else */
 
@@ -27170,7 +27254,7 @@ function createTippy(reference, passedProps) {
     invokeHook('onBeforeUpdate', [instance, partialProps]);
     removeListeners();
     var prevProps = instance.props;
-    var nextProps = evaluateProps(reference, Object.assign({}, instance.props, {}, partialProps, {
+    var nextProps = evaluateProps(reference, Object.assign({}, prevProps, removeUndefinedProps(partialProps), {
       ignoreAttributes: true
     }));
     instance.props = nextProps;
@@ -27299,7 +27383,6 @@ function createTippy(reference, passedProps) {
       // popper has been positioned for the first time
 
       (_instance$popperInsta2 = instance.popperInstance) == null ? void 0 : _instance$popperInsta2.forceUpdate();
-      instance.state.isMounted = true;
       invokeHook('onMount', [instance]);
 
       if (instance.props.animation && getIsDefaultRenderFn()) {
@@ -27346,7 +27429,7 @@ function createTippy(reference, passedProps) {
 
     cleanupInteractiveMouseListeners();
     removeDocumentPress();
-    handleStyles();
+    handleStyles(true);
 
     if (getIsDefaultRenderFn()) {
       var _getDefaultTemplateCh4 = getDefaultTemplateChildren(),
@@ -27725,17 +27808,16 @@ function TippyGenerator(tippy) {
 
     if (render) {
       computedProps = Object.assign({}, props, {
-        plugins: isSingletonMode ? [].concat(plugins, [{
+        plugins: isSingletonMode && singleton.data != null ? [].concat(plugins, [{
           fn: function fn() {
             return {
-              onTrigger: function onTrigger(_, event) {
-                var _singleton$data$child = singleton.data.children.find(function (_ref2) {
+              onTrigger: function onTrigger(instance, event) {
+                var node = singleton.data.children.find(function (_ref2) {
                   var instance = _ref2.instance;
                   return instance.reference === event.currentTarget;
-                }),
-                    content = _singleton$data$child.content;
-
-                setSingletonContent(content);
+                });
+                instance.state.$$activeSingletonInstance = node.instance;
+                setSingletonContent(node.content);
               }
             };
           }
@@ -27774,7 +27856,8 @@ function TippyGenerator(tippy) {
         singleton.hook({
           instance: instance,
           content: content,
-          props: computedProps
+          props: computedProps,
+          setSingletonContent: setSingletonContent
         });
       }
 
@@ -27817,7 +27900,8 @@ function TippyGenerator(tippy) {
         singleton.hook({
           instance: instance,
           content: content,
-          props: computedProps
+          props: computedProps,
+          setSingletonContent: setSingletonContent
         });
       }
     });
@@ -27908,7 +27992,7 @@ var tooltipContainer = function tooltipContainer(_ref) {
   );
 };
 
-var _excluded$c = ["children", "content", "as", "placement"];
+var _excluded$o = ["children", "content", "as", "placement"];
 
 var Tooltip = function Tooltip(_ref) {
   var children = _ref.children,
@@ -27917,7 +28001,7 @@ var Tooltip = function Tooltip(_ref) {
       as = _ref$as === void 0 ? "div" : _ref$as,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? "top" : _ref$placement,
-      rest = _objectWithoutProperties(_ref, _excluded$c);
+      rest = _objectWithoutProperties(_ref, _excluded$o);
 
   var Tag = as;
   return jsx(Tippy, _extends$d({
@@ -30257,8 +30341,13 @@ function hidesContents(element) {
 
 function visible(element) {
   var parentElement = element;
+  var rootNode = element.getRootNode && element.getRootNode();
   while (parentElement) {
     if (parentElement === document.body) break;
+
+    // if we are not hidden yet, skip to checking outside the Web Component
+    if (rootNode && parentElement === rootNode) parentElement = rootNode.host.parentNode;
+
     if (hidesContents(parentElement)) return false;
     parentElement = parentElement.parentNode;
   }
@@ -30279,7 +30368,10 @@ function tabbable(element) {
 }
 
 function findTabbableDescendants(element) {
-  return [].slice.call(element.querySelectorAll("*"), 0).filter(tabbable);
+  var descendants = [].slice.call(element.querySelectorAll("*"), 0).reduce(function (finished, el) {
+    return finished.concat(!el.shadowRoot ? [el] : findTabbableDescendants(el.shadowRoot));
+  }, []);
+  return descendants.filter(tabbable);
 }
 module.exports = exports["default"];
 }(tabbable, tabbable.exports));
@@ -30315,13 +30407,14 @@ function resetState$4() {
 
 /* istanbul ignore next */
 function log$4() {
-  if (process.env.NODE_ENV === "production") return;
-  console.log("focusManager ----------");
-  focusLaterElements.forEach(function (f) {
-    var check = f || {};
-    console.log(check.nodeName, check.className, check.id);
-  });
-  console.log("end focusManager ----------");
+  if (process.env.NODE_ENV !== "production") {
+    console.log("focusManager ----------");
+    focusLaterElements.forEach(function (f) {
+      var check = f || {};
+      console.log(check.nodeName, check.className, check.id);
+    });
+    console.log("end focusManager ----------");
+  }
 }
 /* eslint-enable no-console */
 
@@ -30414,6 +30507,12 @@ var _tabbable2 = _interopRequireDefault(_tabbable);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function getActiveElement() {
+  var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
+
+  return el.activeElement.shadowRoot ? getActiveElement(el.activeElement.shadowRoot) : el.activeElement;
+}
+
 function scopeTab(node, event) {
   var tabbable = (0, _tabbable2.default)(node);
 
@@ -30428,19 +30527,20 @@ function scopeTab(node, event) {
   var shiftKey = event.shiftKey;
   var head = tabbable[0];
   var tail = tabbable[tabbable.length - 1];
+  var activeElement = getActiveElement();
 
   // proceed with default browser behavior on tab.
   // Focus on last element on shift + tab.
-  if (node === document.activeElement) {
+  if (node === activeElement) {
     if (!shiftKey) return;
     target = tail;
   }
 
-  if (tail === document.activeElement && !shiftKey) {
+  if (tail === activeElement && !shiftKey) {
     target = head;
   }
 
-  if (head === document.activeElement && shiftKey) {
+  if (head === activeElement && shiftKey) {
     target = tail;
   }
 
@@ -30468,7 +30568,7 @@ function scopeTab(node, event) {
   // the focus
   if (!isSafariDesktop) return;
 
-  var x = tabbable.indexOf(document.activeElement);
+  var x = tabbable.indexOf(activeElement);
 
   if (x > -1) {
     x += shiftKey ? -1 : 1;
@@ -30664,11 +30764,12 @@ function resetState$3() {
 
 /* istanbul ignore next */
 function log$3() {
-  if (process.env.NODE_ENV === "production") return;
-  var check = globalElement || {};
-  console.log("ariaAppHider ----------");
-  console.log(check.nodeName, check.className, check.id);
-  console.log("end ariaAppHider ----------");
+  if (process.env.NODE_ENV !== "production") {
+    var check = globalElement || {};
+    console.log("ariaAppHider ----------");
+    console.log(check.nodeName, check.className, check.id);
+    console.log("end ariaAppHider ----------");
+  }
 }
 /* eslint-enable no-console */
 
@@ -30792,26 +30893,26 @@ function resetState$2() {
 
 /* istanbul ignore next */
 function log$2() {
-  if (process.env.NODE_ENV === "production") return;
-
-  var classes = document.getElementsByTagName("html")[0].className;
-  var buffer = "Show tracked classes:\n\n";
+  if (process.env.NODE_ENV !== "production") {
+    var classes = document.getElementsByTagName("html")[0].className;
+    var buffer = "Show tracked classes:\n\n";
 
-  buffer += "<html /> (" + classes + "):\n";
-  for (var x in htmlClassList) {
-    buffer += "  " + x + " " + htmlClassList[x] + "\n";
-  }
+    buffer += "<html /> (" + classes + "):\n  ";
+    for (var x in htmlClassList) {
+      buffer += "  " + x + " " + htmlClassList[x] + "\n  ";
+    }
 
-  classes = document.body.className;
+    classes = document.body.className;
 
-  buffer += "\n\ndoc.body (" + classes + "):\n";
-  for (var _x in docBodyClassList) {
-    buffer += "  " + _x + " " + docBodyClassList[_x] + "\n";
-  }
+    buffer += "\n\ndoc.body (" + classes + "):\n  ";
+    for (var _x in docBodyClassList) {
+      buffer += "  " + _x + " " + docBodyClassList[_x] + "\n  ";
+    }
 
-  buffer += "\n";
+    buffer += "\n";
 
-  console.log(buffer);
+    console.log(buffer);
+  }
 }
 /* eslint-enable no-console */
 
@@ -31985,7 +32086,7 @@ var headingContainer = function headingContainer(_ref, _ref2) {
   );
 };
 
-var _excluded$b = ["size", "as", "children"];
+var _excluded$n = ["size", "as", "children"];
 var SIZES = {
   h1: "3xl",
   h2: "2xl",
@@ -32000,7 +32101,7 @@ var Heading = function Heading(_ref) {
       _ref$as = _ref.as,
       as = _ref$as === void 0 ? "h2" : _ref$as,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$b);
+      rest = _objectWithoutProperties(_ref, _excluded$n);
 
   var HeadingTag = as;
   var selectedSize = size || SIZES[as];
@@ -32605,7 +32706,7 @@ var _default = [{
   lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () { return require(
     /* webpackChunkName: 'reactPlayerYouTube' */
-    './YouTube-8d3d2194.js'); }).then(function (n) { return n.YouTube; });
+    './YouTube-abf3eee1.js'); }).then(function (n) { return n.YouTube; });
   })
 }, {
   key: 'soundcloud',
@@ -32614,7 +32715,7 @@ var _default = [{
   lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () { return require(
     /* webpackChunkName: 'reactPlayerSoundCloud' */
-    './SoundCloud-3b290443.js'); }).then(function (n) { return n.SoundCloud; });
+    './SoundCloud-2ed39496.js'); }).then(function (n) { return n.SoundCloud; });
   })
 }, {
   key: 'vimeo',
@@ -32623,7 +32724,7 @@ var _default = [{
   lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () { return require(
     /* webpackChunkName: 'reactPlayerVimeo' */
-    './Vimeo-70053736.js'); }).then(function (n) { return n.Vimeo; });
+    './Vimeo-2f144a05.js'); }).then(function (n) { return n.Vimeo; });
   })
 }, {
   key: 'facebook',
@@ -32632,7 +32733,7 @@ var _default = [{
   lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () { return require(
     /* webpackChunkName: 'reactPlayerFacebook' */
-    './Facebook-a7149840.js'); }).then(function (n) { return n.Facebook; });
+    './Facebook-eeebbfb3.js'); }).then(function (n) { return n.Facebook; });
   })
 }, {
   key: 'streamable',
@@ -32641,7 +32742,7 @@ var _default = [{
   lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () { return require(
     /* webpackChunkName: 'reactPlayerStreamable' */
-    './Streamable-b9dca7d0.js'); }).then(function (n) { return n.Streamable; });
+    './Streamable-8582a814.js'); }).then(function (n) { return n.Streamable; });
   })
 }, {
   key: 'wistia',
@@ -32650,7 +32751,7 @@ var _default = [{
   lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () { return require(
     /* webpackChunkName: 'reactPlayerWistia' */
-    './Wistia-41d5039d.js'); }).then(function (n) { return n.Wistia; });
+    './Wistia-8639fbed.js'); }).then(function (n) { return n.Wistia; });
   })
 }, {
   key: 'twitch',
@@ -32659,7 +32760,7 @@ var _default = [{
   lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () { return require(
     /* webpackChunkName: 'reactPlayerTwitch' */
-    './Twitch-6312e36c.js'); }).then(function (n) { return n.Twitch; });
+    './Twitch-46c7ebc6.js'); }).then(function (n) { return n.Twitch; });
   })
 }, {
   key: 'dailymotion',
@@ -32668,7 +32769,7 @@ var _default = [{
   lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () { return require(
     /* webpackChunkName: 'reactPlayerDailyMotion' */
-    './DailyMotion-ba338d6f.js'); }).then(function (n) { return n.DailyMotion; });
+    './DailyMotion-9144af5c.js'); }).then(function (n) { return n.DailyMotion; });
   })
 }, {
   key: 'mixcloud',
@@ -32677,7 +32778,7 @@ var _default = [{
   lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () { return require(
     /* webpackChunkName: 'reactPlayerMixcloud' */
-    './Mixcloud-d3d73a71.js'); }).then(function (n) { return n.Mixcloud; });
+    './Mixcloud-e33732a9.js'); }).then(function (n) { return n.Mixcloud; });
   })
 }, {
   key: 'vidyard',
@@ -32686,7 +32787,7 @@ var _default = [{
   lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () { return require(
     /* webpackChunkName: 'reactPlayerVidyard' */
-    './Vidyard-daec704a.js'); }).then(function (n) { return n.Vidyard; });
+    './Vidyard-c53cfb3e.js'); }).then(function (n) { return n.Vidyard; });
   })
 }, {
   key: 'kaltura',
@@ -32695,7 +32796,7 @@ var _default = [{
   lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () { return require(
     /* webpackChunkName: 'reactPlayerKaltura' */
-    './Kaltura-abbcf329.js'); }).then(function (n) { return n.Kaltura; });
+    './Kaltura-45a124de.js'); }).then(function (n) { return n.Kaltura; });
   })
 }, {
   key: 'file',
@@ -32707,7 +32808,7 @@ var _default = [{
   lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
     return Promise.resolve().then(function () { return require(
     /* webpackChunkName: 'reactPlayerFilePlayer' */
-    './FilePlayer-77fcfb98.js'); }).then(function (n) { return n.FilePlayer; });
+    './FilePlayer-d2ff7f00.js'); }).then(function (n) { return n.FilePlayer; });
   })
 }];
 exports["default"] = _default;
@@ -33613,7 +33714,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Preview = /*#__PURE__*/(0, _react.lazy)(function () {
   return Promise.resolve().then(function () { return require(
   /* webpackChunkName: 'reactPlayerPreview' */
-  './Preview-f2c7a33b.js'); }).then(function (n) { return n.Preview; });
+  './Preview-f1746dd1.js'); }).then(function (n) { return n.Preview; });
 });
 var IS_BROWSER = typeof window !== 'undefined' && window.document;
 var IS_GLOBAL = typeof commonjsGlobal !== 'undefined' && commonjsGlobal.window && commonjsGlobal.window.document;
@@ -33874,17 +33975,18 @@ var videoPlayerContainer = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
 };
 
-var _excluded$a = ["src", "controls"];
+var _excluded$m = ["src", "controls", "containerAttrs"];
 
 var VideoPlayer = function VideoPlayer(_ref) {
   var src = _ref.src,
       _ref$controls = _ref.controls,
       controls = _ref$controls === void 0 ? true : _ref$controls,
-      rest = _objectWithoutProperties(_ref, _excluded$a);
+      containerAttrs = _ref.containerAttrs,
+      rest = _objectWithoutProperties(_ref, _excluded$m);
 
-  return jsx("div", {
+  return jsx("div", _extends$d({
     css: videoPlayerContainer
-  }, jsx(ReactPlayer, _extends$d({
+  }, containerAttrs), jsx(ReactPlayer, _extends$d({
     className: "react-player",
     url: src,
     controls: controls,
@@ -33893,28 +33995,29 @@ var VideoPlayer = function VideoPlayer(_ref) {
   }, rest)));
 };
 
-var _excluded$9 = ["src", "controls"];
+var _excluded$l = ["src", "controls", "containerAttrs"];
 
 var AudioPlayer = function AudioPlayer(_ref) {
   var src = _ref.src,
       _ref$controls = _ref.controls,
       controls = _ref$controls === void 0 ? true : _ref$controls,
-      rest = _objectWithoutProperties(_ref, _excluded$9);
+      containerAttrs = _ref.containerAttrs,
+      rest = _objectWithoutProperties(_ref, _excluded$l);
 
-  return jsx(ReactPlayer, _extends$d({
+  return jsx("div", containerAttrs, jsx(ReactPlayer, _extends$d({
     url: src,
     controls: controls,
     className: "react-player",
     height: "3.5rem",
     width: "100%"
-  }, rest));
+  }, rest)));
 };
 
-var _excluded$8 = ["type"];
+var _excluded$k = ["type"];
 
 var MediaPlayer = function MediaPlayer(_ref) {
   var type = _ref.type,
-      rest = _objectWithoutProperties(_ref, _excluded$8);
+      rest = _objectWithoutProperties(_ref, _excluded$k);
 
   switch (type) {
     case "video":
@@ -33940,13 +34043,13 @@ var label = function label(_ref, _ref2) {
   );
 };
 
-var _excluded$7 = ["size", "children"];
+var _excluded$j = ["size", "children"];
 
 var Label = function Label(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? "md" : _ref$size,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$7);
+      rest = _objectWithoutProperties(_ref, _excluded$j);
 
   return jsx("label", _extends$d({
     css: function css(theme) {
@@ -33998,10 +34101,13 @@ var selectContainer = function selectContainer(_ref, _ref2) {
   );
 };
 
-var _excluded$6 = ["id", "status", "size", "label", "inline", "onChange", "className", "children"];
+var _excluded$i = ["id", "status", "size", "label", "inline", "onChange", "children", "containerAttrs"];
 
 var Select = function Select(props, forwardedRef) {
-  var id = props.id,
+  var _containerAttrs$class;
+
+  var _props$id = props.id,
+      id = _props$id === void 0 ? "" : _props$id,
       _props$status = props.status,
       status = _props$status === void 0 ? "valid" : _props$status,
       _props$size = props.size,
@@ -34010,34 +34116,35 @@ var Select = function Select(props, forwardedRef) {
       _props$inline = props.inline,
       inline = _props$inline === void 0 ? false : _props$inline,
       onChange = props.onChange,
-      _props$className = props.className,
-      className = _props$className === void 0 ? "" : _props$className,
       children = props.children,
-      rest = _objectWithoutProperties(props, _excluded$6);
+      containerAttrs = props.containerAttrs,
+      rest = _objectWithoutProperties(props, _excluded$i);
 
   var hasLabel = Boolean(label);
   var containerClassNames = classNames(_defineProperty$3({
     valid: status === "valid",
     error: status === "error",
     inline: hasLabel && inline
-  }, className, className));
-  return jsx("div", {
+  }, (_containerAttrs$class = containerAttrs === null || containerAttrs === void 0 ? void 0 : containerAttrs.className) !== null && _containerAttrs$class !== void 0 ? _containerAttrs$class : "", Boolean(containerAttrs === null || containerAttrs === void 0 ? void 0 : containerAttrs.className)));
+  return jsx("div", _extends$d({
     css: function css(theme) {
       return selectContainer(theme, {
         size: size
       });
-    },
+    }
+  }, containerAttrs, {
     className: containerClassNames
-  }, hasLabel && jsx(Label, {
-    htmlFor: id
+  }), hasLabel && jsx(Label, {
+    htmlFor: id,
+    "aria-labelledby": id
   }, label), jsx("div", {
     className: "select-input-wrapper"
   }, jsx("select", _extends$d({
     ref: forwardedRef,
-    id: id,
     onChange: onChange && function (e) {
       return onChange(e.target.value);
-    }
+    },
+    id: id
   }, rest), children), jsx("span", {
     className: "carret-wrapper"
   }, jsx(SvgCaretDown, {
@@ -34051,25 +34158,26 @@ var container$4 =
 /*#__PURE__*/
 
 /*#__PURE__*/
-css("display:flex;justify-content:center;align-items:center;>div{display:inline-block;}#mobile-pagination{margin:0 1rem;}.previous-page-btn{margin-right:2rem;}.current-page{margin:0 1rem;}.total-pages{", mq["md"], "{margin-right:2rem;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:container;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNEIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBtcSB9IGZyb20gXCJAdGhlbWUvdXRpbHMvYnJlYWtwb2ludHNcIjtcblxuZXhwb3J0IGNvbnN0IGNvbnRhaW5lciA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgPiBkaXYge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgfVxuXG4gICNtb2JpbGUtcGFnaW5hdGlvbiB7XG4gICAgbWFyZ2luOiAwIDFyZW07XG4gIH1cblxuICAucHJldmlvdXMtcGFnZS1idG4ge1xuICAgIG1hcmdpbi1yaWdodDogMnJlbTtcbiAgfVxuXG4gIC5jdXJyZW50LXBhZ2Uge1xuICAgIG1hcmdpbjogMCAxcmVtO1xuICB9XG5cbiAgLnRvdGFsLXBhZ2VzIHtcbiAgICAke21xW1wibWRcIl19IHtcbiAgICAgIG1hcmdpbi1yaWdodDogMnJlbTtcbiAgICB9XG4gIH1cbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:container;");
+css("display:flex;justify-content:center;align-items:center;>div{display:inline-block;}.mobile-pagination{margin:0 1rem;}.previous-page-btn{margin-right:2rem;}.current-page{margin:0 1rem;}.total-pages{", mq["md"], "{margin-right:2rem;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:container;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNEIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBtcSB9IGZyb20gXCJAdGhlbWUvdXRpbHMvYnJlYWtwb2ludHNcIjtcblxuZXhwb3J0IGNvbnN0IGNvbnRhaW5lciA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgPiBkaXYge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgfVxuXG4gIC5tb2JpbGUtcGFnaW5hdGlvbiB7XG4gICAgbWFyZ2luOiAwIDFyZW07XG4gIH1cblxuICAucHJldmlvdXMtcGFnZS1idG4ge1xuICAgIG1hcmdpbi1yaWdodDogMnJlbTtcbiAgfVxuXG4gIC5jdXJyZW50LXBhZ2Uge1xuICAgIG1hcmdpbjogMCAxcmVtO1xuICB9XG5cbiAgLnRvdGFsLXBhZ2VzIHtcbiAgICAke21xW1wibWRcIl19IHtcbiAgICAgIG1hcmdpbi1yaWdodDogMnJlbTtcbiAgICB9XG4gIH1cbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:container;");
 
 var Pagination = function Pagination(_ref) {
   var current = _ref.current,
       _onChange = _ref.onChange,
       totalPages = _ref.totalPages,
       _ref$responsiveView = _ref.responsiveView,
-      responsiveView = _ref$responsiveView === void 0 ? false : _ref$responsiveView;
-  return jsx("div", {
+      responsiveView = _ref$responsiveView === void 0 ? false : _ref$responsiveView,
+      containerAttrs = _ref.containerAttrs;
+  return jsx("div", _extends$d({
     css: container$4
-  }, current > 1 && jsx(React__default["default"].Fragment, null, !responsiveView ? jsx(Button, {
-    "data-testid": "previous-page-btn",
+  }, containerAttrs), current > 1 && jsx(React__default["default"].Fragment, null, !responsiveView ? jsx(Button, {
     className: "previous-page-btn",
+    "data-testid": "previous-page-btn",
     name: "Previous page",
     onClick: function onClick() {
       return _onChange(current - 1);
     }
   }, "Previous") : jsx(Button, {
-    id: "mobile-pagination",
+    className: "mobile-pagination mobile-previous-page-btn",
     noGutters: true,
     name: "Previous page",
     onClick: function onClick() {
@@ -34081,7 +34189,7 @@ var Pagination = function Pagination(_ref) {
   }))), jsx("div", null, "Page"), jsx("div", {
     className: "current-page"
   }, jsx(Select$1, {
-    id: "pagination-page",
+    id: "page-selection",
     "data-testid": "pagination-page",
     value: current,
     onChange: function onChange(value) {
@@ -34095,13 +34203,14 @@ var Pagination = function Pagination(_ref) {
   }))), jsx("div", {
     className: "total-pages"
   }, "of ", totalPages), current < totalPages && jsx(React__default["default"].Fragment, null, !responsiveView ? jsx(Button, {
+    className: "next-page-btn",
     "data-testid": "next-page-btn",
     name: "Next page",
     onClick: function onClick() {
       return _onChange(current + 1);
     }
   }, "Next") : jsx(Button, {
-    id: "mobile-pagination",
+    className: "mobile-pagination mobile-next-page-btn",
     noGutters: true,
     name: "Next page",
     onClick: function onClick() {
@@ -34190,6 +34299,8 @@ var TabsContent = function TabsContent(_ref) {
   }, content);
 };
 
+var _excluded$h = ["children", "stickyHeader", "responsiveHeader"];
+
 var TabPane = function TabPane() {
   return null;
 };
@@ -34199,7 +34310,8 @@ var Tabs = function Tabs(_ref) {
       _ref$stickyHeader = _ref.stickyHeader,
       stickyHeader = _ref$stickyHeader === void 0 ? false : _ref$stickyHeader,
       _ref$responsiveHeader = _ref.responsiveHeader,
-      responsiveHeader = _ref$responsiveHeader === void 0 ? false : _ref$responsiveHeader;
+      responsiveHeader = _ref$responsiveHeader === void 0 ? false : _ref$responsiveHeader,
+      rest = _objectWithoutProperties(_ref, _excluded$h);
 
   var _useState = React$n.useState(0),
       _useState2 = _slicedToArray$2(_useState, 2),
@@ -34225,9 +34337,9 @@ var Tabs = function Tabs(_ref) {
   };
 
   var displayResponsiveHeader = (tabTitles === null || tabTitles === void 0 ? void 0 : tabTitles.length) && responsiveHeader;
-  return jsx("section", {
+  return jsx("section", _extends$d({
     css: container$3
-  }, jsx("nav", {
+  }, rest), jsx("nav", {
     css: function css(theme) {
       return tabsHeader(theme, {
         stickyHeader: stickyHeader
@@ -34284,6 +34396,8 @@ var textContainer = function textContainer(_ref, weight, size) {
   );
 };
 
+var _excluded$g = ["children", "weight", "fontSize", "as"];
+
 var Text = function Text(_ref) {
   var children = _ref.children,
       _ref$weight = _ref.weight,
@@ -34291,15 +34405,15 @@ var Text = function Text(_ref) {
       fontSize = _ref.fontSize,
       _ref$as = _ref.as,
       as = _ref$as === void 0 ? "span" : _ref$as,
-      className = _ref.className;
+      rest = _objectWithoutProperties(_ref, _excluded$g);
+
   var Tag = as;
-  return jsx(Tag, {
+  return jsx(Tag, _extends$d({
     "data-testid": "text-component",
     css: function css(theme) {
       return textContainer(theme, weight, fontSize);
-    },
-    className: className
-  }, children);
+    }
+  }, rest), children);
 };
 
 var container$2 = function container(_ref, _ref2) {
@@ -34314,6 +34428,8 @@ var container$2 = function container(_ref, _ref2) {
   );
 };
 
+var _excluded$f = ["icon", "title", "info", "footer", "size"];
+
 var getIconSize = function getIconSize(isMd) {
   return {
     md: isMd ? 100 : 75,
@@ -34327,21 +34443,22 @@ var Result = function Result(_ref) {
       info = _ref.info,
       footer = _ref.footer,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "lg" : _ref$size;
+      size = _ref$size === void 0 ? "lg" : _ref$size,
+      rest = _objectWithoutProperties(_ref, _excluded$f);
 
   var _useResponsive = useResponsive(),
       md = _useResponsive.md;
 
   var Icon = icon;
   var iconSize = getIconSize(md);
-  return jsx("article", {
+  return jsx("article", _extends$d({
     "data-testid": "empty-state-container",
     css: function css(theme) {
       return container$2(theme, {
         size: size
       });
     }
-  }, Icon && jsx(Icon, {
+  }, rest), Icon && jsx(Icon, {
     height: iconSize[size],
     "data-testid": "result-icon"
   }), jsx("div", {
@@ -34366,7 +34483,9 @@ var container$1 = function container(_ref, _ref2) {
   );
 };
 
-var Item = function Item(_ref) {
+var _excluded$e = ["children", "breadcrumbEl", "separator"];
+
+var Item$1 = function Item(_ref) {
   var children = _ref.children,
       _ref$current = _ref.current,
       current = _ref$current === void 0 ? false : _ref$current;
@@ -34380,21 +34499,22 @@ var Breadcrumb = function Breadcrumb(_ref2) {
       _ref2$breadcrumbEl = _ref2.breadcrumbEl,
       breadcrumbEl = _ref2$breadcrumbEl === void 0 ? null : _ref2$breadcrumbEl,
       _ref2$separator = _ref2.separator,
-      separator = _ref2$separator === void 0 ? "/" : _ref2$separator;
+      separator = _ref2$separator === void 0 ? "/" : _ref2$separator,
+      rest = _objectWithoutProperties(_ref2, _excluded$e);
 
-  var breadcrumb = jsx("nav", {
+  var breadcrumb = jsx("nav", _extends$d({
     css: function css(theme) {
       return container$1(theme, {
         separator: separator
       });
     },
     "aria-label": "breadcrumbs"
-  }, jsx("ol", null, children));
+  }, rest), jsx("ol", null, children));
 
   return breadcrumbEl ? /*#__PURE__*/require$$1$1.createPortal(breadcrumb, breadcrumbEl) : breadcrumb;
 };
 
-Breadcrumb.Item = Item;
+Breadcrumb.Item = Item$1;
 
 var drawerContainer$1 = function drawerContainer(width) {
   return (
@@ -34501,6 +34621,7 @@ var Footer = function Footer(_ref) {
   }, children);
 };
 
+var _excluded$d = ["isOpen", "onClose", "placement", "showMask", "width", "dialogStyles", "dialogClassName", "children"];
 var dialogVariants = {
   initial: function initial(_ref) {
     var placement = _ref.placement,
@@ -34542,7 +34663,9 @@ var Drawer$1 = function Drawer(props) {
       width = _props$width === void 0 ? "31.5rem" : _props$width,
       dialogStyles = props.dialogStyles,
       dialogClassName = props.dialogClassName,
-      children = props.children;
+      children = props.children,
+      rest = _objectWithoutProperties(props, _excluded$d);
+
   var clonedChildren = React$n.Children.map(children, function (child) {
     var _props;
 
@@ -34559,10 +34682,10 @@ var Drawer$1 = function Drawer(props) {
 
   var drawer = jsx(LazyMotion, {
     features: domAnimation
-  }, jsx(AnimatePresence, null, isOpen && jsx("div", {
+  }, jsx(AnimatePresence, null, isOpen && jsx("div", _extends$d({
     css: drawerContainer$1(width),
     "data-testid": "drawer"
-  }, showMask && jsx(Mask, {
+  }, rest), showMask && jsx(Mask, {
     onClose: onClose
   }), jsx(m$1.div, {
     id: "drawer-dialog",
@@ -34688,6 +34811,7 @@ var NavHandle = function NavHandle(_ref) {
   var isExpanded = _ref.isExpanded,
       toggleMainNav = _ref.toggleMainNav;
   return jsx("button", {
+    className: "nav-handle",
     css: navHandleContainer,
     onClick: toggleMainNav
   }, jsx(NavItem, {
@@ -34699,7 +34823,7 @@ var NavHandle = function NavHandle(_ref) {
   }));
 };
 
-var _excluded$5 = ["isCollapsed", "onToggle", "children"];
+var _excluded$c = ["isCollapsed", "onToggle", "children"];
 var navVariants = {
   expanded: {
     minWidth: "15rem",
@@ -34738,7 +34862,7 @@ var Sidebar = function Sidebar(_ref) {
     return void 0;
   } : _ref$onToggle,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$5);
+      rest = _objectWithoutProperties(_ref, _excluded$c);
 
   var isReducedMotion = useReducedMotion();
   var animate;
@@ -34752,11 +34876,11 @@ var Sidebar = function Sidebar(_ref) {
   return jsx(LazyMotion, {
     features: domAnimation
   }, jsx(m$1.nav, _extends$d({
-    id: "sidebar",
     css: mainNavContainer,
     initial: false,
     animate: animate,
-    variants: navVariants
+    variants: navVariants,
+    id: "sidebar"
   }, rest), jsx("div", {
     className: "nav-items-wrapper"
   }, jsx(NavHandle, {
@@ -34962,16 +35086,20 @@ var Drawer = function Drawer(_ref) {
   }))), jsx("p", null, children)), footer && jsx("footer", null, footer))));
 };
 
+var _excluded$b = ["children"];
+
 var Card = function Card(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded$b);
+
   return jsx(LazyMotion, {
     features: domAnimation
-  }, jsx(AnimatePresence, null, jsx(m$1.article, {
+  }, jsx(AnimatePresence, null, jsx(m$1.article, _extends$d({
     initial: "rest",
     whileHover: "hover",
     css: cardContainer,
     "data-testid": "card"
-  }, children)));
+  }, rest), children)));
 };
 
 Card.Header = CardHeader;
@@ -34981,6 +35109,216 @@ Card.Body = Body;
 Card.Overlay = Overlay;
 Card.Drawer = Drawer;
 
+var uncurryThis$3 = functionUncurryThis;
+var redefine$1 = redefine$4.exports;
+
+var DatePrototype = Date.prototype;
+var INVALID_DATE = 'Invalid Date';
+var TO_STRING$1 = 'toString';
+var un$DateToString = uncurryThis$3(DatePrototype[TO_STRING$1]);
+var getTime = uncurryThis$3(DatePrototype.getTime);
+
+// `Date.prototype.toString` method
+// https://tc39.es/ecma262/#sec-date.prototype.tostring
+if (String(new Date(NaN)) != INVALID_DATE) {
+  redefine$1(DatePrototype, TO_STRING$1, function toString() {
+    var value = getTime(this);
+    // eslint-disable-next-line no-self-compare -- NaN check
+    return value === value ? un$DateToString(this) : INVALID_DATE;
+  });
+}
+
+var anObject$3 = anObject$6;
+
+// `RegExp.prototype.flags` getter implementation
+// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
+var regexpFlags = function () {
+  var that = anObject$3(this);
+  var result = '';
+  if (that.global) result += 'g';
+  if (that.ignoreCase) result += 'i';
+  if (that.multiline) result += 'm';
+  if (that.dotAll) result += 's';
+  if (that.unicode) result += 'u';
+  if (that.sticky) result += 'y';
+  return result;
+};
+
+var uncurryThis$2 = functionUncurryThis;
+var PROPER_FUNCTION_NAME = functionName.PROPER;
+var redefine = redefine$4.exports;
+var anObject$2 = anObject$6;
+var isPrototypeOf = objectIsPrototypeOf;
+var $toString = toString$6;
+var fails = fails$f;
+var regExpFlags = regexpFlags;
+
+var TO_STRING = 'toString';
+var RegExpPrototype = RegExp.prototype;
+var n$ToString = RegExpPrototype[TO_STRING];
+var getFlags = uncurryThis$2(regExpFlags);
+
+var NOT_GENERIC = fails(function () { return n$ToString.call({ source: 'a', flags: 'b' }) != '/a/b'; });
+// FF44- RegExp#toString has a wrong name
+var INCORRECT_NAME = PROPER_FUNCTION_NAME && n$ToString.name != TO_STRING;
+
+// `RegExp.prototype.toString` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
+if (NOT_GENERIC || INCORRECT_NAME) {
+  redefine(RegExp.prototype, TO_STRING, function toString() {
+    var R = anObject$2(this);
+    var p = $toString(R.source);
+    var rf = R.flags;
+    var f = $toString(rf === undefined && isPrototypeOf(RegExpPrototype, R) && !('flags' in RegExpPrototype) ? getFlags(R) : rf);
+    return '/' + p + '/' + f;
+  }, { unsafe: true });
+}
+
+var breakpointsKeys = Object.keys(breakpoints);
+
+var getCSSProp = function getCSSProp(prop, attr) {
+  return "".concat(prop, ": ").concat(attr);
+};
+
+var getCSSResponsiveProps = function getCSSResponsiveProps(prop, attrs) {
+  if (typeof attrs === "string") return getCSSProp(prop, attrs);
+  return attrs === null || attrs === void 0 ? void 0 : attrs.map(function (value, i) {
+    if (value) {
+      return "\n          ".concat(mq[breakpointsKeys[i]], " {\n            ").concat(prop, ": ").concat(value, ";\n          }\n        ");
+    }
+
+    return "";
+  });
+};
+
+var generateGridTemplates = function generateGridTemplates(attrs) {
+  var prop = "grid-template-columns";
+  if (typeof attrs === "string") return "".concat(prop, ": repeat(").concat(attrs, ", 1fr)");
+  return attrs === null || attrs === void 0 ? void 0 : attrs.map(function (value, i) {
+    if (value) {
+      return "\n          ".concat(mq[breakpointsKeys[i]], " {\n            ").concat(prop, ": repeat(").concat(value, ", 1fr);\n          }\n        ");
+    }
+
+    return "";
+  });
+};
+
+var gridContainer = function gridContainer(_ref) {
+  var gap = _ref.gap,
+      templateColumns = _ref.templateColumns,
+      columnGap = _ref.columnGap,
+      rowGap = _ref.rowGap;
+  return (
+    /*#__PURE__*/
+
+    /*#__PURE__*/
+    css("display:grid;", gap && "grid-gap: ".concat(gap, "rem"), ";", rowGap && "row-gap: ".concat(rowGap, "rem"), ";", columnGap && "column-gap: ".concat(columnGap, "rem"), ";", generateGridTemplates(templateColumns), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:gridContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxRDJCIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHsgbXEsIGJyZWFrcG9pbnRzIH0gZnJvbSBcIkB0aGVtZS91dGlscy9icmVha3BvaW50c1wiO1xuXG5jb25zdCBicmVha3BvaW50c0tleXMgPSBPYmplY3Qua2V5cyhicmVha3BvaW50cyk7XG5cbmNvbnN0IGdldENTU1Byb3AgPSAocHJvcDogc3RyaW5nLCBhdHRyOiBzdHJpbmcpID0+IGAke3Byb3B9OiAke2F0dHJ9YDtcblxudHlwZSBHcmlkUHJvcCA9IHN0cmluZyB8IChudW1iZXIgfCBudWxsIHwgdW5kZWZpbmVkKVtdIHwgbnVsbDtcblxuY29uc3QgZ2V0Q1NTUmVzcG9uc2l2ZVByb3BzID0gKHByb3A6IHN0cmluZywgYXR0cnM6IEdyaWRQcm9wKSA9PiB7XG4gIGlmICh0eXBlb2YgYXR0cnMgPT09IFwic3RyaW5nXCIpIHJldHVybiBnZXRDU1NQcm9wKHByb3AsIGF0dHJzKTtcblxuICByZXR1cm4gYXR0cnM/Lm1hcCgodmFsdWUsIGkpID0+IHtcbiAgICBpZiAodmFsdWUpIHtcbiAgICAgIHJldHVybiBgXG4gICAgICAgICAgJHttcVticmVha3BvaW50c0tleXNbaV1dfSB7XG4gICAgICAgICAgICAke3Byb3B9OiAke3ZhbHVlfTtcbiAgICAgICAgICB9XG4gICAgICAgIGA7XG4gICAgfVxuXG4gICAgcmV0dXJuIFwiXCI7XG4gIH0pO1xufTtcblxuY29uc3QgZ2VuZXJhdGVHcmlkVGVtcGxhdGVzID0gKGF0dHJzOiBHcmlkUHJvcCkgPT4ge1xuICBjb25zdCBwcm9wID0gXCJncmlkLXRlbXBsYXRlLWNvbHVtbnNcIjtcblxuICBpZiAodHlwZW9mIGF0dHJzID09PSBcInN0cmluZ1wiKSByZXR1cm4gYCR7cHJvcH06IHJlcGVhdCgke2F0dHJzfSwgMWZyKWA7XG5cbiAgcmV0dXJuIGF0dHJzPy5tYXAoKHZhbHVlLCBpKSA9PiB7XG4gICAgaWYgKHZhbHVlKSB7XG4gICAgICByZXR1cm4gYFxuICAgICAgICAgICR7bXFbYnJlYWtwb2ludHNLZXlzW2ldXX0ge1xuICAgICAgICAgICAgJHtwcm9wfTogcmVwZWF0KCR7dmFsdWV9LCAxZnIpO1xuICAgICAgICAgIH1cbiAgICAgICAgYDtcbiAgICB9XG5cbiAgICByZXR1cm4gXCJcIjtcbiAgfSk7XG59O1xuXG5leHBvcnQgY29uc3QgZ3JpZENvbnRhaW5lciA9ICh7XG4gIGdhcCxcbiAgdGVtcGxhdGVDb2x1bW5zLFxuICBjb2x1bW5HYXAsXG4gIHJvd0dhcCxcbn06IHtcbiAgZ2FwOiBudW1iZXI7XG4gIHRlbXBsYXRlQ29sdW1uczogR3JpZFByb3A7XG4gIGNvbHVtbkdhcDogbnVtYmVyIHwgdW5kZWZpbmVkO1xuICByb3dHYXA6IG51bWJlciB8IHVuZGVmaW5lZDtcbn0pOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgZGlzcGxheTogZ3JpZDtcbiAgJHtnYXAgJiYgYGdyaWQtZ2FwOiAke2dhcH1yZW1gfTtcbiAgJHtyb3dHYXAgJiYgYHJvdy1nYXA6ICR7cm93R2FwfXJlbWB9O1xuICAke2NvbHVtbkdhcCAmJiBgY29sdW1uLWdhcDogJHtjb2x1bW5HYXB9cmVtYH07XG4gICR7Z2VuZXJhdGVHcmlkVGVtcGxhdGVzKHRlbXBsYXRlQ29sdW1ucyl9XG5gO1xuXG5jb25zdCBnZW5lcmF0ZUdyaWRTcGFuID0gKHByb3A6IHN0cmluZywgYXR0cnM6IEdyaWRQcm9wKSA9PiB7XG4gIGlmICh0eXBlb2YgYXR0cnMgPT09IFwic3RyaW5nXCIpIHJldHVybiBgJHtwcm9wfTogc3BhbiAke2F0dHJzfWA7XG5cbiAgcmV0dXJuIGF0dHJzPy5tYXAoKHZhbHVlLCBpKSA9PiB7XG4gICAgaWYgKHZhbHVlKSB7XG4gICAgICByZXR1cm4gYFxuICAgICAgICAgICR7bXFbYnJlYWtwb2ludHNLZXlzW2ldXX0ge1xuICAgICAgICAgICAgJHtwcm9wfTogc3BhbiAke3ZhbHVlfTtcbiAgICAgICAgICB9XG4gICAgICAgIGA7XG4gICAgfVxuXG4gICAgcmV0dXJuIFwiXCI7XG4gIH0pO1xufTtcblxuZXhwb3J0IGNvbnN0IGdyaWRJdGVtID0gKHtcbiAgY29sU3BhbixcbiAgY29sU3RhcnQsXG4gIGNvbEVuZCxcbiAgcm93U3BhbixcbiAgcm93U3RhcnQsXG4gIHJvd0VuZCxcbn06IHtcbiAgY29sU3BhbjogR3JpZFByb3A7XG4gIGNvbFN0YXJ0OiBHcmlkUHJvcDtcbiAgY29sRW5kOiBHcmlkUHJvcDtcbiAgcm93U3BhbjogR3JpZFByb3A7XG4gIHJvd1N0YXJ0OiBHcmlkUHJvcDtcbiAgcm93RW5kOiBHcmlkUHJvcDtcbn0pOiBTZXJpYWxpemVkU3R5bGVzID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICAke2NvbFNwYW4gJiYgZ2VuZXJhdGVHcmlkU3BhbihcImdyaWQtY29sdW1uXCIsIGNvbFNwYW4pfTtcbiAgICAke2NvbFN0YXJ0ICYmIGdldENTU1Jlc3BvbnNpdmVQcm9wcyhcImdyaWQtY29sdW1uLXN0YXJ0XCIsIGNvbFN0YXJ0KX07XG4gICAgJHtjb2xFbmQgJiYgZ2V0Q1NTUmVzcG9uc2l2ZVByb3BzKFwiZ3JpZC1jb2x1bW4tZW5kXCIsIGNvbEVuZCl9O1xuICAgICR7cm93U3BhbiAmJiBnZW5lcmF0ZUdyaWRTcGFuKFwiZ3JpZC1yb3dcIiwgcm93U3Bhbil9O1xuICAgICR7cm93U3RhcnQgJiYgZ2V0Q1NTUmVzcG9uc2l2ZVByb3BzKFwiZ3JpZC1yb3ctc3RhcnRcIiwgcm93U3RhcnQpfTtcbiAgICAke3Jvd0VuZCAmJiBnZXRDU1NSZXNwb25zaXZlUHJvcHMoXCJncmlkLXJvdy1lbmRcIiwgcm93RW5kKX07XG4gIGA7XG59O1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:gridContainer;")
+  );
+};
+
+var generateGridSpan = function generateGridSpan(prop, attrs) {
+  if (typeof attrs === "string") return "".concat(prop, ": span ").concat(attrs);
+  return attrs === null || attrs === void 0 ? void 0 : attrs.map(function (value, i) {
+    if (value) {
+      return "\n          ".concat(mq[breakpointsKeys[i]], " {\n            ").concat(prop, ": span ").concat(value, ";\n          }\n        ");
+    }
+
+    return "";
+  });
+};
+
+var gridItem = function gridItem(_ref2) {
+  var colSpan = _ref2.colSpan,
+      colStart = _ref2.colStart,
+      colEnd = _ref2.colEnd,
+      rowSpan = _ref2.rowSpan,
+      rowStart = _ref2.rowStart,
+      rowEnd = _ref2.rowEnd;
+  return (
+    /*#__PURE__*/
+
+    /*#__PURE__*/
+    css(colSpan && generateGridSpan("grid-column", colSpan), ";", colStart && getCSSResponsiveProps("grid-column-start", colStart), ";", colEnd && getCSSResponsiveProps("grid-column-end", colEnd), ";", rowSpan && generateGridSpan("grid-row", rowSpan), ";", rowStart && getCSSResponsiveProps("grid-row-start", rowStart), ";", rowEnd && getCSSResponsiveProps("grid-row-end", rowEnd), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:gridItem;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0RlkiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBtcSwgYnJlYWtwb2ludHMgfSBmcm9tIFwiQHRoZW1lL3V0aWxzL2JyZWFrcG9pbnRzXCI7XG5cbmNvbnN0IGJyZWFrcG9pbnRzS2V5cyA9IE9iamVjdC5rZXlzKGJyZWFrcG9pbnRzKTtcblxuY29uc3QgZ2V0Q1NTUHJvcCA9IChwcm9wOiBzdHJpbmcsIGF0dHI6IHN0cmluZykgPT4gYCR7cHJvcH06ICR7YXR0cn1gO1xuXG50eXBlIEdyaWRQcm9wID0gc3RyaW5nIHwgKG51bWJlciB8IG51bGwgfCB1bmRlZmluZWQpW10gfCBudWxsO1xuXG5jb25zdCBnZXRDU1NSZXNwb25zaXZlUHJvcHMgPSAocHJvcDogc3RyaW5nLCBhdHRyczogR3JpZFByb3ApID0+IHtcbiAgaWYgKHR5cGVvZiBhdHRycyA9PT0gXCJzdHJpbmdcIikgcmV0dXJuIGdldENTU1Byb3AocHJvcCwgYXR0cnMpO1xuXG4gIHJldHVybiBhdHRycz8ubWFwKCh2YWx1ZSwgaSkgPT4ge1xuICAgIGlmICh2YWx1ZSkge1xuICAgICAgcmV0dXJuIGBcbiAgICAgICAgICAke21xW2JyZWFrcG9pbnRzS2V5c1tpXV19IHtcbiAgICAgICAgICAgICR7cHJvcH06ICR7dmFsdWV9O1xuICAgICAgICAgIH1cbiAgICAgICAgYDtcbiAgICB9XG5cbiAgICByZXR1cm4gXCJcIjtcbiAgfSk7XG59O1xuXG5jb25zdCBnZW5lcmF0ZUdyaWRUZW1wbGF0ZXMgPSAoYXR0cnM6IEdyaWRQcm9wKSA9PiB7XG4gIGNvbnN0IHByb3AgPSBcImdyaWQtdGVtcGxhdGUtY29sdW1uc1wiO1xuXG4gIGlmICh0eXBlb2YgYXR0cnMgPT09IFwic3RyaW5nXCIpIHJldHVybiBgJHtwcm9wfTogcmVwZWF0KCR7YXR0cnN9LCAxZnIpYDtcblxuICByZXR1cm4gYXR0cnM/Lm1hcCgodmFsdWUsIGkpID0+IHtcbiAgICBpZiAodmFsdWUpIHtcbiAgICAgIHJldHVybiBgXG4gICAgICAgICAgJHttcVticmVha3BvaW50c0tleXNbaV1dfSB7XG4gICAgICAgICAgICAke3Byb3B9OiByZXBlYXQoJHt2YWx1ZX0sIDFmcik7XG4gICAgICAgICAgfVxuICAgICAgICBgO1xuICAgIH1cblxuICAgIHJldHVybiBcIlwiO1xuICB9KTtcbn07XG5cbmV4cG9ydCBjb25zdCBncmlkQ29udGFpbmVyID0gKHtcbiAgZ2FwLFxuICB0ZW1wbGF0ZUNvbHVtbnMsXG4gIGNvbHVtbkdhcCxcbiAgcm93R2FwLFxufToge1xuICBnYXA6IG51bWJlcjtcbiAgdGVtcGxhdGVDb2x1bW5zOiBHcmlkUHJvcDtcbiAgY29sdW1uR2FwOiBudW1iZXIgfCB1bmRlZmluZWQ7XG4gIHJvd0dhcDogbnVtYmVyIHwgdW5kZWZpbmVkO1xufSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBkaXNwbGF5OiBncmlkO1xuICAke2dhcCAmJiBgZ3JpZC1nYXA6ICR7Z2FwfXJlbWB9O1xuICAke3Jvd0dhcCAmJiBgcm93LWdhcDogJHtyb3dHYXB9cmVtYH07XG4gICR7Y29sdW1uR2FwICYmIGBjb2x1bW4tZ2FwOiAke2NvbHVtbkdhcH1yZW1gfTtcbiAgJHtnZW5lcmF0ZUdyaWRUZW1wbGF0ZXModGVtcGxhdGVDb2x1bW5zKX1cbmA7XG5cbmNvbnN0IGdlbmVyYXRlR3JpZFNwYW4gPSAocHJvcDogc3RyaW5nLCBhdHRyczogR3JpZFByb3ApID0+IHtcbiAgaWYgKHR5cGVvZiBhdHRycyA9PT0gXCJzdHJpbmdcIikgcmV0dXJuIGAke3Byb3B9OiBzcGFuICR7YXR0cnN9YDtcblxuICByZXR1cm4gYXR0cnM/Lm1hcCgodmFsdWUsIGkpID0+IHtcbiAgICBpZiAodmFsdWUpIHtcbiAgICAgIHJldHVybiBgXG4gICAgICAgICAgJHttcVticmVha3BvaW50c0tleXNbaV1dfSB7XG4gICAgICAgICAgICAke3Byb3B9OiBzcGFuICR7dmFsdWV9O1xuICAgICAgICAgIH1cbiAgICAgICAgYDtcbiAgICB9XG5cbiAgICByZXR1cm4gXCJcIjtcbiAgfSk7XG59O1xuXG5leHBvcnQgY29uc3QgZ3JpZEl0ZW0gPSAoe1xuICBjb2xTcGFuLFxuICBjb2xTdGFydCxcbiAgY29sRW5kLFxuICByb3dTcGFuLFxuICByb3dTdGFydCxcbiAgcm93RW5kLFxufToge1xuICBjb2xTcGFuOiBHcmlkUHJvcDtcbiAgY29sU3RhcnQ6IEdyaWRQcm9wO1xuICBjb2xFbmQ6IEdyaWRQcm9wO1xuICByb3dTcGFuOiBHcmlkUHJvcDtcbiAgcm93U3RhcnQ6IEdyaWRQcm9wO1xuICByb3dFbmQ6IEdyaWRQcm9wO1xufSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgICR7Y29sU3BhbiAmJiBnZW5lcmF0ZUdyaWRTcGFuKFwiZ3JpZC1jb2x1bW5cIiwgY29sU3Bhbil9O1xuICAgICR7Y29sU3RhcnQgJiYgZ2V0Q1NTUmVzcG9uc2l2ZVByb3BzKFwiZ3JpZC1jb2x1bW4tc3RhcnRcIiwgY29sU3RhcnQpfTtcbiAgICAke2NvbEVuZCAmJiBnZXRDU1NSZXNwb25zaXZlUHJvcHMoXCJncmlkLWNvbHVtbi1lbmRcIiwgY29sRW5kKX07XG4gICAgJHtyb3dTcGFuICYmIGdlbmVyYXRlR3JpZFNwYW4oXCJncmlkLXJvd1wiLCByb3dTcGFuKX07XG4gICAgJHtyb3dTdGFydCAmJiBnZXRDU1NSZXNwb25zaXZlUHJvcHMoXCJncmlkLXJvdy1zdGFydFwiLCByb3dTdGFydCl9O1xuICAgICR7cm93RW5kICYmIGdldENTU1Jlc3BvbnNpdmVQcm9wcyhcImdyaWQtcm93LWVuZFwiLCByb3dFbmQpfTtcbiAgYDtcbn07XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:gridItem;")
+  );
+};
+
+var _excluded$a = ["gap", "columnGap", "rowGap", "templateColumns", "as", "children"],
+    _excluded2 = ["colSpan", "colStart", "colEnd", "rowSpan", "rowStart", "rowEnd", "as", "children"];
+
+var generateGridValues = function generateGridValues(values) {
+  switch (_typeof$2(values)) {
+    case "undefined":
+      return null;
+
+    case "string":
+      return values;
+
+    case "number":
+      return values.toString();
+
+    default:
+      return values.map(function (value) {
+        return value;
+      });
+  }
+};
+
+var Grid = function Grid(props) {
+  var _props$gap = props.gap,
+      gap = _props$gap === void 0 ? 2 : _props$gap,
+      columnGap = props.columnGap,
+      rowGap = props.rowGap,
+      templateColumns = props.templateColumns,
+      _props$as = props.as,
+      as = _props$as === void 0 ? "div" : _props$as,
+      children = props.children,
+      rest = _objectWithoutProperties(props, _excluded$a);
+
+  var templateColumnAttrs = generateGridValues(templateColumns);
+  var Component = as;
+  return jsx(Component, _extends$d({
+    css: gridContainer({
+      templateColumns: templateColumnAttrs,
+      gap: gap,
+      columnGap: columnGap,
+      rowGap: rowGap
+    })
+  }, rest), children);
+};
+
+var Item = function Item(props) {
+  var colSpan = props.colSpan,
+      colStart = props.colStart,
+      colEnd = props.colEnd,
+      rowSpan = props.rowSpan,
+      rowStart = props.rowStart,
+      rowEnd = props.rowEnd,
+      _props$as2 = props.as,
+      as = _props$as2 === void 0 ? "div" : _props$as2,
+      children = props.children,
+      rest = _objectWithoutProperties(props, _excluded2);
+
+  var colSpanAttrs = generateGridValues(colSpan);
+  var colStartAttrs = generateGridValues(colStart);
+  var colEndAttrs = generateGridValues(colEnd);
+  var rowSpanAttrs = generateGridValues(rowSpan);
+  var rowStartAttrs = generateGridValues(rowStart);
+  var rowEndAttrs = generateGridValues(rowEnd);
+  var Component = as;
+  return jsx(Component, _extends$d({
+    css: gridItem({
+      colSpan: colSpanAttrs,
+      colStart: colStartAttrs,
+      colEnd: colEndAttrs,
+      rowSpan: rowSpanAttrs,
+      rowStart: rowStartAttrs,
+      rowEnd: rowEndAttrs
+    })
+  }, rest), children);
+};
+
+Grid.Item = Item;
+
 var inputContainer = function inputContainer(_ref, _ref2) {
   var formElements = _ref.formElements;
   var size = _ref2.size;
@@ -34997,7 +35335,7 @@ var inputContainer = function inputContainer(_ref, _ref2) {
   );
 };
 
-var _excluded$4 = ["size", "status", "iconBefore", "iconAfter", "label", "inline", "id", "className"];
+var _excluded$9 = ["size", "status", "iconBefore", "iconAfter", "label", "inline", "id", "containerAttrs"];
 
 var Input = function Input(_ref, forwardedRef) {
   var _ref$size = _ref.size,
@@ -35010,27 +35348,27 @@ var Input = function Input(_ref, forwardedRef) {
       _ref$inline = _ref.inline,
       inline = _ref$inline === void 0 ? false : _ref$inline,
       id = _ref.id,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$4);
+      containerAttrs = _ref.containerAttrs,
+      rest = _objectWithoutProperties(_ref, _excluded$9);
 
   var IconBefore = iconBefore;
   var IconAfter = iconAfter;
   var hasLabel = Boolean(label);
-  var containerClasses = classNames(_defineProperty$3({
+  var containerClasses = classNames({
     valid: status === "valid",
     error: status === "error",
     "with-prefix-icon": Boolean(iconBefore),
     "with-suffix-icon": Boolean(iconAfter),
     inline: hasLabel && inline
-  }, className !== null && className !== void 0 ? className : "", className));
-  return jsx("div", {
+  });
+  return jsx("div", _extends$d({
     css: function css(theme) {
       return inputContainer(theme, {
         size: size
       });
     },
     className: containerClasses
-  }, hasLabel && jsx(Label, {
+  }, containerAttrs), hasLabel && jsx(Label, {
     htmlFor: id
   }, label), jsx("div", {
     className: "input-wrapper"
@@ -35063,11 +35401,15 @@ var errorContainer = function errorContainer(_ref) {
   );
 };
 
+var _excluded$8 = ["children"];
+
 var FormError = function FormError(_ref) {
-  var children = _ref.children;
-  return jsx("article", {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded$8);
+
+  return jsx("article", _extends$d({
     css: errorContainer
-  }, children);
+  }, rest), children);
 };
 
 var inputError = function inputError(_ref) {
@@ -35080,13 +35422,13 @@ var inputError = function inputError(_ref) {
   );
 };
 
-var _excluded$3 = ["as", "children"];
+var _excluded$7 = ["as", "children"];
 
 var InputError = function InputError(_ref) {
   var _ref$as = _ref.as,
       as = _ref$as === void 0 ? "div" : _ref$as,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$3);
+      rest = _objectWithoutProperties(_ref, _excluded$7);
 
   var InputErrorTag = as;
   return jsx(InputErrorTag, _extends$d({
@@ -35096,7 +35438,7 @@ var InputError = function InputError(_ref) {
 
 var DESCRIPTORS$1 = descriptors;
 var definePropertyModule$1 = objectDefineProperty;
-var anObject$1 = anObject$4;
+var anObject$1 = anObject$6;
 var toIndexedObject = toIndexedObject$5;
 var objectKeys = objectKeys$2;
 
@@ -35120,7 +35462,7 @@ var html$1 = getBuiltIn('document', 'documentElement');
 
 /* global ActiveXObject -- old IE, WSH */
 
-var anObject = anObject$4;
+var anObject = anObject$6;
 var defineProperties = objectDefineProperties;
 var enumBugKeys = enumBugKeys$3;
 var hiddenKeys = hiddenKeys$4;
@@ -35365,7 +35707,7 @@ var checkboxContainer = function checkboxContainer(_ref, _ref2) {
   );
 };
 
-var _excluded$2 = ["id", "label", "size", "inline", "containerClassName"];
+var _excluded$6 = ["id", "label", "size", "inline", "containerAttrs"];
 
 var Checkbox = function Checkbox(props, ref) {
   var id = props.id,
@@ -35374,19 +35716,18 @@ var Checkbox = function Checkbox(props, ref) {
       size = _props$size === void 0 ? "md" : _props$size,
       _props$inline = props.inline,
       inline = _props$inline === void 0 ? false : _props$inline,
-      containerClassName = props.containerClassName,
-      rest = _objectWithoutProperties(props, _excluded$2);
+      containerAttrs = props.containerAttrs,
+      rest = _objectWithoutProperties(props, _excluded$6);
 
-  return jsx("div", {
+  return jsx("div", _extends$d({
     ref: ref,
     css: function css(theme) {
       return checkboxContainer(theme, {
         size: size,
         inline: inline
       });
-    },
-    className: containerClassName
-  }, jsx("input", _extends$d({
+    }
+  }, containerAttrs), jsx("input", _extends$d({
     id: id,
     type: "checkbox"
   }, rest)), jsx("label", {
@@ -35400,6 +35741,8 @@ var Checkbox = function Checkbox(props, ref) {
 
 var Checkbox$1 = /*#__PURE__*/React$n.forwardRef(Checkbox);
 
+var _excluded$5 = ["groupname", "options", "onChange", "initialValues", "inline", "size"];
+
 var CheckboxGroup = function CheckboxGroup(_ref) {
   var groupname = _ref.groupname,
       options = _ref.options,
@@ -35410,8 +35753,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
       inline = _ref$inline === void 0 ? false : _ref$inline,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "md" : _ref$size,
-      id = _ref.id,
-      className = _ref.className;
+      rest = _objectWithoutProperties(_ref, _excluded$5);
 
   var _useState = React$n.useState(initialValues),
       _useState2 = _slicedToArray$2(_useState, 2),
@@ -35448,11 +35790,9 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
   React$n.useEffect(function () {
     onChange && onChange(selectedValues);
   }, [selectedValues, onChange]);
-  return jsx("fieldset", {
-    css: checkboxGroupContainer(inline),
-    id: id,
-    className: className
-  }, jsx("legend", null, isPartiallySelected && jsx("span", {
+  return jsx("fieldset", _extends$d({
+    css: checkboxGroupContainer(inline)
+  }, rest), jsx("legend", null, isPartiallySelected && jsx("span", {
     className: "dash"
   }), jsx(Checkbox$1, {
     id: "".concat(groupname, "-container"),
@@ -35497,13 +35837,16 @@ var radioButton = function radioButton(_ref, _ref2) {
   );
 };
 
+var _excluded$4 = ["index", "label", "value", "selectedValue", "onClick", "size"];
+
 var RadioButton = function RadioButton(_ref) {
   var index = _ref.index,
       label = _ref.label,
       value = _ref.value,
       selectedValue = _ref.selectedValue,
       onClick = _ref.onClick,
-      size = _ref.size;
+      size = _ref.size,
+      rest = _objectWithoutProperties(_ref, _excluded$4);
 
   var handleClick = function handleClick(e) {
     e.preventDefault();
@@ -35513,9 +35856,10 @@ var RadioButton = function RadioButton(_ref) {
   var cssClasses = classNames({
     "is-selected": value === selectedValue
   });
-  return jsx("button", {
+  var propHTMLClass = rest !== null && rest !== void 0 && rest.className ? rest === null || rest === void 0 ? void 0 : rest.className : "";
+  return jsx("button", _extends$d({
     id: "radio-".concat(index),
-    className: cssClasses,
+    className: "".concat(cssClasses).concat(propHTMLClass),
     onClick: handleClick,
     css: function css(theme) {
       return radioButton(theme, {
@@ -35523,30 +35867,28 @@ var RadioButton = function RadioButton(_ref) {
       });
     },
     "aria-selected": value === selectedValue
-  }, label);
+  }, rest), label);
 };
 
+var _excluded$3 = ["options", "value", "size", "onChange"];
+
 var RadioButtonGroup = function RadioButtonGroup(props) {
   var options = props.options,
       _props$value = props.value,
       value = _props$value === void 0 ? "" : _props$value,
       _props$size = props.size,
       size = _props$size === void 0 ? "md" : _props$size,
-      id = props.id,
-      className = props.className,
-      onChange = props.onChange;
-  return jsx("div", {
-    id: id,
-    className: className
-  }, options.map(function (option, index) {
+      onChange = props.onChange,
+      rest = _objectWithoutProperties(props, _excluded$3);
+
+  return jsx("div", rest, options.map(function (option, index) {
     return jsx(RadioButton, _extends$d({
       key: option.value,
       index: index,
       size: size,
-      selectedValue: value
-    }, option, {
+      selectedValue: value,
       onClick: onChange
-    }));
+    }, option));
   }));
 };
 
@@ -35575,7 +35917,7 @@ var radioButtonContainer = function radioButtonContainer(_ref, _ref2) {
   );
 };
 
-var _excluded$1 = ["id", "label", "size", "inline"];
+var _excluded$2 = ["id", "label", "size", "inline", "containerAttrs"];
 
 var Radio = function Radio(_ref) {
   var id = _ref.id,
@@ -35584,16 +35926,17 @@ var Radio = function Radio(_ref) {
       size = _ref$size === void 0 ? "md" : _ref$size,
       _ref$inline = _ref.inline,
       inline = _ref$inline === void 0 ? false : _ref$inline,
-      rest = _objectWithoutProperties(_ref, _excluded$1);
+      containerAttrs = _ref.containerAttrs,
+      rest = _objectWithoutProperties(_ref, _excluded$2);
 
-  return jsx("div", {
+  return jsx("div", _extends$d({
     css: function css(theme) {
       return radioButtonContainer(theme, {
         size: size,
         inline: inline
       });
     }
-  }, jsx("input", _extends$d({
+  }, containerAttrs), jsx("input", _extends$d({
     id: id,
     type: "radio"
   }, rest)), jsx("label", {
@@ -35601,7 +35944,11 @@ var Radio = function Radio(_ref) {
   }, label));
 };
 
+var _excluded$1 = ["groupname", "options", "onChange", "initialValue", "inline", "size"];
+
 var RadioGroup = function RadioGroup(_ref) {
+  var _rest$id;
+
   var groupname = _ref.groupname,
       options = _ref.options,
       onChange = _ref.onChange,
@@ -35611,8 +35958,7 @@ var RadioGroup = function RadioGroup(_ref) {
       inline = _ref$inline === void 0 ? false : _ref$inline,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "md" : _ref$size,
-      id = _ref.id,
-      className = _ref.className;
+      rest = _objectWithoutProperties(_ref, _excluded$1);
 
   var _useState = React$n.useState(initialValue),
       _useState2 = _slicedToArray$2(_useState, 2),
@@ -35626,11 +35972,10 @@ var RadioGroup = function RadioGroup(_ref) {
   React$n.useEffect(function () {
     onChange && onChange(selectedValue);
   }, [selectedValue, onChange]);
-  return jsx("fieldset", {
+  return jsx("fieldset", _extends$d({
     css: container(inline),
-    id: id || groupname,
-    className: className
-  }, options.map(function (option) {
+    id: (_rest$id = rest === null || rest === void 0 ? void 0 : rest.id) !== null && _rest$id !== void 0 ? _rest$id : groupname
+  }, rest), options.map(function (option) {
     return jsx(Radio, _extends$d({
       key: option.value,
       id: "".concat(groupname, "-").concat(option.value),
@@ -35658,9 +36003,11 @@ var textareaContainer = function textareaContainer(_ref, _ref2) {
   );
 };
 
-var _excluded = ["label", "inline", "id", "resize", "status"];
+var _excluded = ["label", "inline", "id", "resize", "status", "containerAttrs"];
 
 var Textarea = function Textarea(props, forwardedRef) {
+  var _containerAttrs$class;
+
   var label = props.label,
       _props$inline = props.inline,
       inline = _props$inline === void 0 ? false : _props$inline,
@@ -35669,22 +36016,24 @@ var Textarea = function Textarea(props, forwardedRef) {
       resize = _props$resize === void 0 ? "none" : _props$resize,
       _props$status = props.status,
       status = _props$status === void 0 ? "valid" : _props$status,
+      containerAttrs = props.containerAttrs,
       rest = _objectWithoutProperties(props, _excluded);
 
   var hasLabel = Boolean(label);
-  var containerClassNames = classNames({
+  var containerClassNames = classNames(_defineProperty$3({
     inline: hasLabel && inline,
     valid: status === "valid",
     error: status === "error"
-  });
-  return jsx("div", {
+  }, (_containerAttrs$class = containerAttrs === null || containerAttrs === void 0 ? void 0 : containerAttrs.className) !== null && _containerAttrs$class !== void 0 ? _containerAttrs$class : "", Boolean(containerAttrs === null || containerAttrs === void 0 ? void 0 : containerAttrs.className)));
+  return jsx("div", _extends$d({
     css: function css(theme) {
       return textareaContainer(theme, {
         resize: resize
       });
-    },
+    }
+  }, containerAttrs, {
     className: containerClassNames
-  }, hasLabel && jsx(Label, {
+  }), hasLabel && jsx(Label, {
     htmlFor: id
   }, label), jsx("textarea", _extends$d({
     id: id,
@@ -35706,6 +36055,7 @@ exports.CheckboxGroup = CheckboxGroup;
 exports.Chip = Chip;
 exports.Drawer = Drawer$1;
 exports.FormError = FormError;
+exports.Grid = Grid;
 exports.Heading = Heading;
 exports.Input = Input$1;
 exports.InputError = InputError;
@@ -35730,4 +36080,4 @@ exports.Tooltip = Tooltip;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
 exports.patterns = patterns;
 exports.utils = utils;
-//# sourceMappingURL=index-e52c28e4.js.map
+//# sourceMappingURL=index-110c08b3.js.map