@orangesk/orange-design-system 2.0.0-alpha.0 → 2.0.0-alpha.1

package/build/components/index.js

@@ -1,5 +1,27 @@
-import require$$0 from 'react';
+import React, { useContext, cloneElement, useRef, useEffect, useCallback } from 'react';
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+function _defineProperties(e, r) {
+  for (var t = 0; t < r.length; t++) {
+    var o = r[t];
+    o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
+  }
+}
+function _createClass(e, r, t) {
+  return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
+    writable: false
+  }), e;
+}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -8,6 +30,36 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -29,6 +81,9 @@ function _objectSpread2(e) {
   }
   return e;
 }
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -43,6 +98,13 @@ function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -506,7 +568,7 @@ function requireReactJsxRuntime_development () {
 	        node._store &&
 	        (node._store.validated = 1);
 	    }
-	    var React = require$$0,
+	    var React$1 = React,
 	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
 	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
 	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
@@ -522,7 +584,7 @@ function requireReactJsxRuntime_development () {
 	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
 	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
 	      ReactSharedInternals =
-	        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+	        React$1.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
 	      hasOwnProperty = Object.prototype.hasOwnProperty,
 	      isArrayImpl = Array.isArray,
 	      createTask = console.createTask
@@ -530,15 +592,15 @@ function requireReactJsxRuntime_development () {
 	        : function () {
 	            return null;
 	          };
-	    React = {
+	    React$1 = {
 	      "react-stack-bottom-frame": function (callStackForError) {
 	        return callStackForError();
 	      }
 	    };
 	    var specialPropKeyWarningShown;
 	    var didWarnAboutElementRef = {};
-	    var unknownOwnerDebugStack = React["react-stack-bottom-frame"].bind(
-	      React,
+	    var unknownOwnerDebugStack = React$1["react-stack-bottom-frame"].bind(
+	      React$1,
 	      UnknownOwner
 	    )();
 	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
@@ -596,21 +658,3021 @@ function requireJsxRuntime () {
 
 var jsxRuntimeExports = requireJsxRuntime();
 
-var CLASS_ROOT = "badge";
-var Badge = function Badge(_a) {
-  var color = _a.color,
-    isRound = _a.isRound,
-    className = _a.className,
+var SpritePathContext = /*#__PURE__*/React.createContext("/sprite.svg");
+
+var CLASS_ROOT$8 = "icon";
+var Icon = function Icon(_a) {
+  var className = _a.className,
+    alt = _a.alt,
+    color = _a.color,
+    name = _a.name,
+    size = _a.size,
+    _a$spritePath = _a.spritePath,
+    spritePath = _a$spritePath === void 0 ? "/sprite.svg" : _a$spritePath,
+    other = __rest(_a, ["className", "alt", "color", "name", "size", "spritePath"]);
+  var contextPath = useContext(SpritePathContext);
+  var classes = cx(CLASS_ROOT$8, _defineProperty(_defineProperty({}, "".concat(CLASS_ROOT$8, "--").concat(size), size), "".concat(CLASS_ROOT$8, "--").concat(color), color), className);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs("svg", _objectSpread2(_objectSpread2({
+    className: classes,
+    "aria-hidden": alt !== undefined ? undefined : "true",
+    role: alt !== undefined ? "img" : undefined
+  }, other), {}, {
+    children: [alt !== undefined && alt.length > 0 && /*#__PURE__*/jsxRuntimeExports.jsx("title", {
+      children: alt
+    }), /*#__PURE__*/jsxRuntimeExports.jsx("use", {
+      xlinkHref: spritePath !== "/sprite.svg" || typeof contextPath === "undefined" ? "".concat(spritePath, "#").concat(name) : "".concat(contextPath, "#").concat(name)
+    })]
+  }));
+};
+Icon.displayName = "Icon";
+
+var CLASS_ROOT$7 = "buttons";
+var Buttons = function Buttons(_a) {
+  var isStackedOnXs = _a.isStackedOnXs,
     children = _a.children,
-    other = __rest(_a, ["color", "isRound", "className", "children"]);
-  var classes = cx(CLASS_ROOT, className, _defineProperty(_defineProperty({}, "badge--".concat(color), color), "badge--round", isRound));
-  return /*#__PURE__*/jsxRuntimeExports.jsx("span", _objectSpread2(_objectSpread2({
-    className: classes
+    className = _a.className,
+    other = __rest(_a, ["isStackedOnXs", "children", "className"]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx("div", _objectSpread2(_objectSpread2({
+    className: cx(CLASS_ROOT$7, _defineProperty({}, "".concat(CLASS_ROOT$7, "--stack-on-xs"), isStackedOnXs), className)
   }, other), {}, {
     children: children
   }));
 };
-Badge.displayName = "Badge";
+Buttons.displayName = "Buttons";
+
+var propTypes$1 = {exports: {}};
+
+var reactIs = {exports: {}};
+
+var reactIs_production_min = {};
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_production_min;
+
+function requireReactIs_production_min () {
+	if (hasRequiredReactIs_production_min) return reactIs_production_min;
+	hasRequiredReactIs_production_min = 1;
+var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
+	Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
+	function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;
+	reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n};reactIs_production_min.isFragment=function(a){return z(a)===e};reactIs_production_min.isLazy=function(a){return z(a)===t};
+	reactIs_production_min.isMemo=function(a){return z(a)===r};reactIs_production_min.isPortal=function(a){return z(a)===d};reactIs_production_min.isProfiler=function(a){return z(a)===g};reactIs_production_min.isStrictMode=function(a){return z(a)===f};reactIs_production_min.isSuspense=function(a){return z(a)===p};
+	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min.typeOf=z;
+	return reactIs_production_min;
+}
+
+var reactIs_development = {};
+
+/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_development;
+
+function requireReactIs_development () {
+	if (hasRequiredReactIs_development) return reactIs_development;
+	hasRequiredReactIs_development = 1;
+
+
+
+	if (process.env.NODE_ENV !== "production") {
+	  (function() {
+
+	// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+	// nor polyfill, then a plain number is used for performance.
+	var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+	var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+	var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+	var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+	var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+	var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+	var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+	var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+	// (unstable) APIs that have been removed. Can we remove the symbols?
+
+	var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+	var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+	var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+	var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+	var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+	var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+	var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+	var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+	var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+	var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+	var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+
+	function isValidElementType(type) {
+	  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+	  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+	}
+
+	function typeOf(object) {
+	  if (typeof object === 'object' && object !== null) {
+	    var $$typeof = object.$$typeof;
+
+	    switch ($$typeof) {
+	      case REACT_ELEMENT_TYPE:
+	        var type = object.type;
+
+	        switch (type) {
+	          case REACT_ASYNC_MODE_TYPE:
+	          case REACT_CONCURRENT_MODE_TYPE:
+	          case REACT_FRAGMENT_TYPE:
+	          case REACT_PROFILER_TYPE:
+	          case REACT_STRICT_MODE_TYPE:
+	          case REACT_SUSPENSE_TYPE:
+	            return type;
+
+	          default:
+	            var $$typeofType = type && type.$$typeof;
+
+	            switch ($$typeofType) {
+	              case REACT_CONTEXT_TYPE:
+	              case REACT_FORWARD_REF_TYPE:
+	              case REACT_LAZY_TYPE:
+	              case REACT_MEMO_TYPE:
+	              case REACT_PROVIDER_TYPE:
+	                return $$typeofType;
+
+	              default:
+	                return $$typeof;
+	            }
+
+	        }
+
+	      case REACT_PORTAL_TYPE:
+	        return $$typeof;
+	    }
+	  }
+
+	  return undefined;
+	} // AsyncMode is deprecated along with isAsyncMode
+
+	var AsyncMode = REACT_ASYNC_MODE_TYPE;
+	var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+	var ContextConsumer = REACT_CONTEXT_TYPE;
+	var ContextProvider = REACT_PROVIDER_TYPE;
+	var Element = REACT_ELEMENT_TYPE;
+	var ForwardRef = REACT_FORWARD_REF_TYPE;
+	var Fragment = REACT_FRAGMENT_TYPE;
+	var Lazy = REACT_LAZY_TYPE;
+	var Memo = REACT_MEMO_TYPE;
+	var Portal = REACT_PORTAL_TYPE;
+	var Profiler = REACT_PROFILER_TYPE;
+	var StrictMode = REACT_STRICT_MODE_TYPE;
+	var Suspense = REACT_SUSPENSE_TYPE;
+	var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+
+	function isAsyncMode(object) {
+	  {
+	    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+	      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+	      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+	    }
+	  }
+
+	  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+	}
+	function isConcurrentMode(object) {
+	  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+	}
+	function isContextConsumer(object) {
+	  return typeOf(object) === REACT_CONTEXT_TYPE;
+	}
+	function isContextProvider(object) {
+	  return typeOf(object) === REACT_PROVIDER_TYPE;
+	}
+	function isElement(object) {
+	  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+	}
+	function isForwardRef(object) {
+	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+	}
+	function isFragment(object) {
+	  return typeOf(object) === REACT_FRAGMENT_TYPE;
+	}
+	function isLazy(object) {
+	  return typeOf(object) === REACT_LAZY_TYPE;
+	}
+	function isMemo(object) {
+	  return typeOf(object) === REACT_MEMO_TYPE;
+	}
+	function isPortal(object) {
+	  return typeOf(object) === REACT_PORTAL_TYPE;
+	}
+	function isProfiler(object) {
+	  return typeOf(object) === REACT_PROFILER_TYPE;
+	}
+	function isStrictMode(object) {
+	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+	}
+	function isSuspense(object) {
+	  return typeOf(object) === REACT_SUSPENSE_TYPE;
+	}
+
+	reactIs_development.AsyncMode = AsyncMode;
+	reactIs_development.ConcurrentMode = ConcurrentMode;
+	reactIs_development.ContextConsumer = ContextConsumer;
+	reactIs_development.ContextProvider = ContextProvider;
+	reactIs_development.Element = Element;
+	reactIs_development.ForwardRef = ForwardRef;
+	reactIs_development.Fragment = Fragment;
+	reactIs_development.Lazy = Lazy;
+	reactIs_development.Memo = Memo;
+	reactIs_development.Portal = Portal;
+	reactIs_development.Profiler = Profiler;
+	reactIs_development.StrictMode = StrictMode;
+	reactIs_development.Suspense = Suspense;
+	reactIs_development.isAsyncMode = isAsyncMode;
+	reactIs_development.isConcurrentMode = isConcurrentMode;
+	reactIs_development.isContextConsumer = isContextConsumer;
+	reactIs_development.isContextProvider = isContextProvider;
+	reactIs_development.isElement = isElement;
+	reactIs_development.isForwardRef = isForwardRef;
+	reactIs_development.isFragment = isFragment;
+	reactIs_development.isLazy = isLazy;
+	reactIs_development.isMemo = isMemo;
+	reactIs_development.isPortal = isPortal;
+	reactIs_development.isProfiler = isProfiler;
+	reactIs_development.isStrictMode = isStrictMode;
+	reactIs_development.isSuspense = isSuspense;
+	reactIs_development.isValidElementType = isValidElementType;
+	reactIs_development.typeOf = typeOf;
+	  })();
+	}
+	return reactIs_development;
+}
+
+var hasRequiredReactIs;
+
+function requireReactIs () {
+	if (hasRequiredReactIs) return reactIs.exports;
+	hasRequiredReactIs = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  reactIs.exports = requireReactIs_production_min();
+	} else {
+	  reactIs.exports = requireReactIs_development();
+	}
+	return reactIs.exports;
+}
+
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+var objectAssign;
+var hasRequiredObjectAssign;
+
+function requireObjectAssign () {
+	if (hasRequiredObjectAssign) return objectAssign;
+	hasRequiredObjectAssign = 1;
+	/* eslint-disable no-unused-vars */
+	var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+	var hasOwnProperty = Object.prototype.hasOwnProperty;
+	var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+
+	function toObject(val) {
+		if (val === null || val === undefined) {
+			throw new TypeError('Object.assign cannot be called with null or undefined');
+		}
+
+		return Object(val);
+	}
+
+	function shouldUseNative() {
+		try {
+			if (!Object.assign) {
+				return false;
+			}
+
+			// Detect buggy property enumeration order in older V8 versions.
+
+			// https://bugs.chromium.org/p/v8/issues/detail?id=4118
+			var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
+			test1[5] = 'de';
+			if (Object.getOwnPropertyNames(test1)[0] === '5') {
+				return false;
+			}
+
+			// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+			var test2 = {};
+			for (var i = 0; i < 10; i++) {
+				test2['_' + String.fromCharCode(i)] = i;
+			}
+			var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
+				return test2[n];
+			});
+			if (order2.join('') !== '0123456789') {
+				return false;
+			}
+
+			// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+			var test3 = {};
+			'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
+				test3[letter] = letter;
+			});
+			if (Object.keys(Object.assign({}, test3)).join('') !==
+					'abcdefghijklmnopqrst') {
+				return false;
+			}
+
+			return true;
+		} catch (err) {
+			// We don't expect any of the above to throw, but better to be safe.
+			return false;
+		}
+	}
+
+	objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
+		var from;
+		var to = toObject(target);
+		var symbols;
+
+		for (var s = 1; s < arguments.length; s++) {
+			from = Object(arguments[s]);
+
+			for (var key in from) {
+				if (hasOwnProperty.call(from, key)) {
+					to[key] = from[key];
+				}
+			}
+
+			if (getOwnPropertySymbols) {
+				symbols = getOwnPropertySymbols(from);
+				for (var i = 0; i < symbols.length; i++) {
+					if (propIsEnumerable.call(from, symbols[i])) {
+						to[symbols[i]] = from[symbols[i]];
+					}
+				}
+			}
+		}
+
+		return to;
+	};
+	return objectAssign;
+}
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var ReactPropTypesSecret_1;
+var hasRequiredReactPropTypesSecret;
+
+function requireReactPropTypesSecret () {
+	if (hasRequiredReactPropTypesSecret) return ReactPropTypesSecret_1;
+	hasRequiredReactPropTypesSecret = 1;
+
+	var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+
+	ReactPropTypesSecret_1 = ReactPropTypesSecret;
+	return ReactPropTypesSecret_1;
+}
+
+var has;
+var hasRequiredHas;
+
+function requireHas () {
+	if (hasRequiredHas) return has;
+	hasRequiredHas = 1;
+	has = Function.call.bind(Object.prototype.hasOwnProperty);
+	return has;
+}
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var checkPropTypes_1;
+var hasRequiredCheckPropTypes;
+
+function requireCheckPropTypes () {
+	if (hasRequiredCheckPropTypes) return checkPropTypes_1;
+	hasRequiredCheckPropTypes = 1;
+
+	var printWarning = function() {};
+
+	if (process.env.NODE_ENV !== 'production') {
+	  var ReactPropTypesSecret = requireReactPropTypesSecret();
+	  var loggedTypeFailures = {};
+	  var has = requireHas();
+
+	  printWarning = function(text) {
+	    var message = 'Warning: ' + text;
+	    if (typeof console !== 'undefined') {
+	      console.error(message);
+	    }
+	    try {
+	      // --- Welcome to debugging React ---
+	      // This error was thrown as a convenience so that you can use this stack
+	      // to find the callsite that caused this warning to fire.
+	      throw new Error(message);
+	    } catch (x) { /**/ }
+	  };
+	}
+
+	/**
+	 * Assert that the values match with the type specs.
+	 * Error messages are memorized and will only be shown once.
+	 *
+	 * @param {object} typeSpecs Map of name to a ReactPropType
+	 * @param {object} values Runtime values that need to be type-checked
+	 * @param {string} location e.g. "prop", "context", "child context"
+	 * @param {string} componentName Name of the component for error messages.
+	 * @param {?Function} getStack Returns the component stack.
+	 * @private
+	 */
+	function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
+	  if (process.env.NODE_ENV !== 'production') {
+	    for (var typeSpecName in typeSpecs) {
+	      if (has(typeSpecs, typeSpecName)) {
+	        var error;
+	        // Prop type validation may throw. In case they do, we don't want to
+	        // fail the render phase where it didn't fail before. So we log it.
+	        // After these have been cleaned up, we'll let them throw.
+	        try {
+	          // This is intentionally an invariant that gets caught. It's the same
+	          // behavior as without this statement except with a better message.
+	          if (typeof typeSpecs[typeSpecName] !== 'function') {
+	            var err = Error(
+	              (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
+	              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +
+	              'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'
+	            );
+	            err.name = 'Invariant Violation';
+	            throw err;
+	          }
+	          error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);
+	        } catch (ex) {
+	          error = ex;
+	        }
+	        if (error && !(error instanceof Error)) {
+	          printWarning(
+	            (componentName || 'React class') + ': type specification of ' +
+	            location + ' `' + typeSpecName + '` is invalid; the type checker ' +
+	            'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
+	            'You may have forgotten to pass an argument to the type checker ' +
+	            'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
+	            'shape all require an argument).'
+	          );
+	        }
+	        if (error instanceof Error && !(error.message in loggedTypeFailures)) {
+	          // Only monitor this failure once because there tends to be a lot of the
+	          // same error.
+	          loggedTypeFailures[error.message] = true;
+
+	          var stack = getStack ? getStack() : '';
+
+	          printWarning(
+	            'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
+	          );
+	        }
+	      }
+	    }
+	  }
+	}
+
+	/**
+	 * Resets warning cache when testing.
+	 *
+	 * @private
+	 */
+	checkPropTypes.resetWarningCache = function() {
+	  if (process.env.NODE_ENV !== 'production') {
+	    loggedTypeFailures = {};
+	  }
+	};
+
+	checkPropTypes_1 = checkPropTypes;
+	return checkPropTypes_1;
+}
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var factoryWithTypeCheckers;
+var hasRequiredFactoryWithTypeCheckers;
+
+function requireFactoryWithTypeCheckers () {
+	if (hasRequiredFactoryWithTypeCheckers) return factoryWithTypeCheckers;
+	hasRequiredFactoryWithTypeCheckers = 1;
+
+	var ReactIs = requireReactIs();
+	var assign = requireObjectAssign();
+
+	var ReactPropTypesSecret = requireReactPropTypesSecret();
+	var has = requireHas();
+	var checkPropTypes = requireCheckPropTypes();
+
+	var printWarning = function() {};
+
+	if (process.env.NODE_ENV !== 'production') {
+	  printWarning = function(text) {
+	    var message = 'Warning: ' + text;
+	    if (typeof console !== 'undefined') {
+	      console.error(message);
+	    }
+	    try {
+	      // --- Welcome to debugging React ---
+	      // This error was thrown as a convenience so that you can use this stack
+	      // to find the callsite that caused this warning to fire.
+	      throw new Error(message);
+	    } catch (x) {}
+	  };
+	}
+
+	function emptyFunctionThatReturnsNull() {
+	  return null;
+	}
+
+	factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
+	  /* global Symbol */
+	  var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+	  var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
+
+	  /**
+	   * Returns the iterator method function contained on the iterable object.
+	   *
+	   * Be sure to invoke the function with the iterable as context:
+	   *
+	   *     var iteratorFn = getIteratorFn(myIterable);
+	   *     if (iteratorFn) {
+	   *       var iterator = iteratorFn.call(myIterable);
+	   *       ...
+	   *     }
+	   *
+	   * @param {?object} maybeIterable
+	   * @return {?function}
+	   */
+	  function getIteratorFn(maybeIterable) {
+	    var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
+	    if (typeof iteratorFn === 'function') {
+	      return iteratorFn;
+	    }
+	  }
+
+	  /**
+	   * Collection of methods that allow declaration and validation of props that are
+	   * supplied to React components. Example usage:
+	   *
+	   *   var Props = require('ReactPropTypes');
+	   *   var MyArticle = React.createClass({
+	   *     propTypes: {
+	   *       // An optional string prop named "description".
+	   *       description: Props.string,
+	   *
+	   *       // A required enum prop named "category".
+	   *       category: Props.oneOf(['News','Photos']).isRequired,
+	   *
+	   *       // A prop named "dialog" that requires an instance of Dialog.
+	   *       dialog: Props.instanceOf(Dialog).isRequired
+	   *     },
+	   *     render: function() { ... }
+	   *   });
+	   *
+	   * A more formal specification of how these methods are used:
+	   *
+	   *   type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
+	   *   decl := ReactPropTypes.{type}(.isRequired)?
+	   *
+	   * Each and every declaration produces a function with the same signature. This
+	   * allows the creation of custom validation functions. For example:
+	   *
+	   *  var MyLink = React.createClass({
+	   *    propTypes: {
+	   *      // An optional string or URI prop named "href".
+	   *      href: function(props, propName, componentName) {
+	   *        var propValue = props[propName];
+	   *        if (propValue != null && typeof propValue !== 'string' &&
+	   *            !(propValue instanceof URI)) {
+	   *          return new Error(
+	   *            'Expected a string or an URI for ' + propName + ' in ' +
+	   *            componentName
+	   *          );
+	   *        }
+	   *      }
+	   *    },
+	   *    render: function() {...}
+	   *  });
+	   *
+	   * @internal
+	   */
+
+	  var ANONYMOUS = '<<anonymous>>';
+
+	  // Important!
+	  // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
+	  var ReactPropTypes = {
+	    array: createPrimitiveTypeChecker('array'),
+	    bigint: createPrimitiveTypeChecker('bigint'),
+	    bool: createPrimitiveTypeChecker('boolean'),
+	    func: createPrimitiveTypeChecker('function'),
+	    number: createPrimitiveTypeChecker('number'),
+	    object: createPrimitiveTypeChecker('object'),
+	    string: createPrimitiveTypeChecker('string'),
+	    symbol: createPrimitiveTypeChecker('symbol'),
+
+	    any: createAnyTypeChecker(),
+	    arrayOf: createArrayOfTypeChecker,
+	    element: createElementTypeChecker(),
+	    elementType: createElementTypeTypeChecker(),
+	    instanceOf: createInstanceTypeChecker,
+	    node: createNodeChecker(),
+	    objectOf: createObjectOfTypeChecker,
+	    oneOf: createEnumTypeChecker,
+	    oneOfType: createUnionTypeChecker,
+	    shape: createShapeTypeChecker,
+	    exact: createStrictShapeTypeChecker,
+	  };
+
+	  /**
+	   * inlined Object.is polyfill to avoid requiring consumers ship their own
+	   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+	   */
+	  /*eslint-disable no-self-compare*/
+	  function is(x, y) {
+	    // SameValue algorithm
+	    if (x === y) {
+	      // Steps 1-5, 7-10
+	      // Steps 6.b-6.e: +0 != -0
+	      return x !== 0 || 1 / x === 1 / y;
+	    } else {
+	      // Step 6.a: NaN == NaN
+	      return x !== x && y !== y;
+	    }
+	  }
+	  /*eslint-enable no-self-compare*/
+
+	  /**
+	   * We use an Error-like object for backward compatibility as people may call
+	   * PropTypes directly and inspect their output. However, we don't use real
+	   * Errors anymore. We don't inspect their stack anyway, and creating them
+	   * is prohibitively expensive if they are created too often, such as what
+	   * happens in oneOfType() for any type before the one that matched.
+	   */
+	  function PropTypeError(message, data) {
+	    this.message = message;
+	    this.data = data && typeof data === 'object' ? data: {};
+	    this.stack = '';
+	  }
+	  // Make `instanceof Error` still work for returned errors.
+	  PropTypeError.prototype = Error.prototype;
+
+	  function createChainableTypeChecker(validate) {
+	    if (process.env.NODE_ENV !== 'production') {
+	      var manualPropTypeCallCache = {};
+	      var manualPropTypeWarningCount = 0;
+	    }
+	    function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
+	      componentName = componentName || ANONYMOUS;
+	      propFullName = propFullName || propName;
+
+	      if (secret !== ReactPropTypesSecret) {
+	        if (throwOnDirectAccess) {
+	          // New behavior only for users of `prop-types` package
+	          var err = new Error(
+	            'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
+	            'Use `PropTypes.checkPropTypes()` to call them. ' +
+	            'Read more at http://fb.me/use-check-prop-types'
+	          );
+	          err.name = 'Invariant Violation';
+	          throw err;
+	        } else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
+	          // Old behavior for people using React.PropTypes
+	          var cacheKey = componentName + ':' + propName;
+	          if (
+	            !manualPropTypeCallCache[cacheKey] &&
+	            // Avoid spamming the console because they are often not actionable except for lib authors
+	            manualPropTypeWarningCount < 3
+	          ) {
+	            printWarning(
+	              'You are manually calling a React.PropTypes validation ' +
+	              'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
+	              'and will throw in the standalone `prop-types` package. ' +
+	              'You may be seeing this warning due to a third-party PropTypes ' +
+	              'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
+	            );
+	            manualPropTypeCallCache[cacheKey] = true;
+	            manualPropTypeWarningCount++;
+	          }
+	        }
+	      }
+	      if (props[propName] == null) {
+	        if (isRequired) {
+	          if (props[propName] === null) {
+	            return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
+	          }
+	          return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
+	        }
+	        return null;
+	      } else {
+	        return validate(props, propName, componentName, location, propFullName);
+	      }
+	    }
+
+	    var chainedCheckType = checkType.bind(null, false);
+	    chainedCheckType.isRequired = checkType.bind(null, true);
+
+	    return chainedCheckType;
+	  }
+
+	  function createPrimitiveTypeChecker(expectedType) {
+	    function validate(props, propName, componentName, location, propFullName, secret) {
+	      var propValue = props[propName];
+	      var propType = getPropType(propValue);
+	      if (propType !== expectedType) {
+	        // `propValue` being instance of, say, date/regexp, pass the 'object'
+	        // check, but we can offer a more precise error message here rather than
+	        // 'of type `object`'.
+	        var preciseType = getPreciseType(propValue);
+
+	        return new PropTypeError(
+	          'Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'),
+	          {expectedType: expectedType}
+	        );
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createAnyTypeChecker() {
+	    return createChainableTypeChecker(emptyFunctionThatReturnsNull);
+	  }
+
+	  function createArrayOfTypeChecker(typeChecker) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      if (typeof typeChecker !== 'function') {
+	        return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
+	      }
+	      var propValue = props[propName];
+	      if (!Array.isArray(propValue)) {
+	        var propType = getPropType(propValue);
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
+	      }
+	      for (var i = 0; i < propValue.length; i++) {
+	        var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret);
+	        if (error instanceof Error) {
+	          return error;
+	        }
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createElementTypeChecker() {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      if (!isValidElement(propValue)) {
+	        var propType = getPropType(propValue);
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createElementTypeTypeChecker() {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      if (!ReactIs.isValidElementType(propValue)) {
+	        var propType = getPropType(propValue);
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createInstanceTypeChecker(expectedClass) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      if (!(props[propName] instanceof expectedClass)) {
+	        var expectedClassName = expectedClass.name || ANONYMOUS;
+	        var actualClassName = getClassName(props[propName]);
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createEnumTypeChecker(expectedValues) {
+	    if (!Array.isArray(expectedValues)) {
+	      if (process.env.NODE_ENV !== 'production') {
+	        if (arguments.length > 1) {
+	          printWarning(
+	            'Invalid arguments supplied to oneOf, expected an array, got ' + arguments.length + ' arguments. ' +
+	            'A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).'
+	          );
+	        } else {
+	          printWarning('Invalid argument supplied to oneOf, expected an array.');
+	        }
+	      }
+	      return emptyFunctionThatReturnsNull;
+	    }
+
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      for (var i = 0; i < expectedValues.length; i++) {
+	        if (is(propValue, expectedValues[i])) {
+	          return null;
+	        }
+	      }
+
+	      var valuesString = JSON.stringify(expectedValues, function replacer(key, value) {
+	        var type = getPreciseType(value);
+	        if (type === 'symbol') {
+	          return String(value);
+	        }
+	        return value;
+	      });
+	      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + String(propValue) + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createObjectOfTypeChecker(typeChecker) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      if (typeof typeChecker !== 'function') {
+	        return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
+	      }
+	      var propValue = props[propName];
+	      var propType = getPropType(propValue);
+	      if (propType !== 'object') {
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
+	      }
+	      for (var key in propValue) {
+	        if (has(propValue, key)) {
+	          var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
+	          if (error instanceof Error) {
+	            return error;
+	          }
+	        }
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createUnionTypeChecker(arrayOfTypeCheckers) {
+	    if (!Array.isArray(arrayOfTypeCheckers)) {
+	      process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
+	      return emptyFunctionThatReturnsNull;
+	    }
+
+	    for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+	      var checker = arrayOfTypeCheckers[i];
+	      if (typeof checker !== 'function') {
+	        printWarning(
+	          'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
+	          'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'
+	        );
+	        return emptyFunctionThatReturnsNull;
+	      }
+	    }
+
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var expectedTypes = [];
+	      for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+	        var checker = arrayOfTypeCheckers[i];
+	        var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret);
+	        if (checkerResult == null) {
+	          return null;
+	        }
+	        if (checkerResult.data && has(checkerResult.data, 'expectedType')) {
+	          expectedTypes.push(checkerResult.data.expectedType);
+	        }
+	      }
+	      var expectedTypesMessage = (expectedTypes.length > 0) ? ', expected one of type [' + expectedTypes.join(', ') + ']': '';
+	      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createNodeChecker() {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      if (!isNode(props[propName])) {
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function invalidValidatorError(componentName, location, propFullName, key, type) {
+	    return new PropTypeError(
+	      (componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' +
+	      'it must be a function, usually from the `prop-types` package, but received `' + type + '`.'
+	    );
+	  }
+
+	  function createShapeTypeChecker(shapeTypes) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      var propType = getPropType(propValue);
+	      if (propType !== 'object') {
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+	      }
+	      for (var key in shapeTypes) {
+	        var checker = shapeTypes[key];
+	        if (typeof checker !== 'function') {
+	          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+	        }
+	        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
+	        if (error) {
+	          return error;
+	        }
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createStrictShapeTypeChecker(shapeTypes) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      var propType = getPropType(propValue);
+	      if (propType !== 'object') {
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+	      }
+	      // We need to check all keys in case some are required but missing from props.
+	      var allKeys = assign({}, props[propName], shapeTypes);
+	      for (var key in allKeys) {
+	        var checker = shapeTypes[key];
+	        if (has(shapeTypes, key) && typeof checker !== 'function') {
+	          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+	        }
+	        if (!checker) {
+	          return new PropTypeError(
+	            'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
+	            '\nBad object: ' + JSON.stringify(props[propName], null, '  ') +
+	            '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  ')
+	          );
+	        }
+	        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
+	        if (error) {
+	          return error;
+	        }
+	      }
+	      return null;
+	    }
+
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function isNode(propValue) {
+	    switch (typeof propValue) {
+	      case 'number':
+	      case 'string':
+	      case 'undefined':
+	        return true;
+	      case 'boolean':
+	        return !propValue;
+	      case 'object':
+	        if (Array.isArray(propValue)) {
+	          return propValue.every(isNode);
+	        }
+	        if (propValue === null || isValidElement(propValue)) {
+	          return true;
+	        }
+
+	        var iteratorFn = getIteratorFn(propValue);
+	        if (iteratorFn) {
+	          var iterator = iteratorFn.call(propValue);
+	          var step;
+	          if (iteratorFn !== propValue.entries) {
+	            while (!(step = iterator.next()).done) {
+	              if (!isNode(step.value)) {
+	                return false;
+	              }
+	            }
+	          } else {
+	            // Iterator will provide entry [k,v] tuples rather than values.
+	            while (!(step = iterator.next()).done) {
+	              var entry = step.value;
+	              if (entry) {
+	                if (!isNode(entry[1])) {
+	                  return false;
+	                }
+	              }
+	            }
+	          }
+	        } else {
+	          return false;
+	        }
+
+	        return true;
+	      default:
+	        return false;
+	    }
+	  }
+
+	  function isSymbol(propType, propValue) {
+	    // Native Symbol.
+	    if (propType === 'symbol') {
+	      return true;
+	    }
+
+	    // falsy value can't be a Symbol
+	    if (!propValue) {
+	      return false;
+	    }
+
+	    // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
+	    if (propValue['@@toStringTag'] === 'Symbol') {
+	      return true;
+	    }
+
+	    // Fallback for non-spec compliant Symbols which are polyfilled.
+	    if (typeof Symbol === 'function' && propValue instanceof Symbol) {
+	      return true;
+	    }
+
+	    return false;
+	  }
+
+	  // Equivalent of `typeof` but with special handling for array and regexp.
+	  function getPropType(propValue) {
+	    var propType = typeof propValue;
+	    if (Array.isArray(propValue)) {
+	      return 'array';
+	    }
+	    if (propValue instanceof RegExp) {
+	      // Old webkits (at least until Android 4.0) return 'function' rather than
+	      // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
+	      // passes PropTypes.object.
+	      return 'object';
+	    }
+	    if (isSymbol(propType, propValue)) {
+	      return 'symbol';
+	    }
+	    return propType;
+	  }
+
+	  // This handles more types than `getPropType`. Only used for error messages.
+	  // See `createPrimitiveTypeChecker`.
+	  function getPreciseType(propValue) {
+	    if (typeof propValue === 'undefined' || propValue === null) {
+	      return '' + propValue;
+	    }
+	    var propType = getPropType(propValue);
+	    if (propType === 'object') {
+	      if (propValue instanceof Date) {
+	        return 'date';
+	      } else if (propValue instanceof RegExp) {
+	        return 'regexp';
+	      }
+	    }
+	    return propType;
+	  }
+
+	  // Returns a string that is postfixed to a warning about an invalid type.
+	  // For example, "undefined" or "of type array"
+	  function getPostfixForTypeWarning(value) {
+	    var type = getPreciseType(value);
+	    switch (type) {
+	      case 'array':
+	      case 'object':
+	        return 'an ' + type;
+	      case 'boolean':
+	      case 'date':
+	      case 'regexp':
+	        return 'a ' + type;
+	      default:
+	        return type;
+	    }
+	  }
+
+	  // Returns class name of the object, if any.
+	  function getClassName(propValue) {
+	    if (!propValue.constructor || !propValue.constructor.name) {
+	      return ANONYMOUS;
+	    }
+	    return propValue.constructor.name;
+	  }
+
+	  ReactPropTypes.checkPropTypes = checkPropTypes;
+	  ReactPropTypes.resetWarningCache = checkPropTypes.resetWarningCache;
+	  ReactPropTypes.PropTypes = ReactPropTypes;
+
+	  return ReactPropTypes;
+	};
+	return factoryWithTypeCheckers;
+}
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var factoryWithThrowingShims;
+var hasRequiredFactoryWithThrowingShims;
+
+function requireFactoryWithThrowingShims () {
+	if (hasRequiredFactoryWithThrowingShims) return factoryWithThrowingShims;
+	hasRequiredFactoryWithThrowingShims = 1;
+
+	var ReactPropTypesSecret = requireReactPropTypesSecret();
+
+	function emptyFunction() {}
+	function emptyFunctionWithReset() {}
+	emptyFunctionWithReset.resetWarningCache = emptyFunction;
+
+	factoryWithThrowingShims = function() {
+	  function shim(props, propName, componentName, location, propFullName, secret) {
+	    if (secret === ReactPropTypesSecret) {
+	      // It is still safe when called from React.
+	      return;
+	    }
+	    var err = new Error(
+	      'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
+	      'Use PropTypes.checkPropTypes() to call them. ' +
+	      'Read more at http://fb.me/use-check-prop-types'
+	    );
+	    err.name = 'Invariant Violation';
+	    throw err;
+	  }	  shim.isRequired = shim;
+	  function getShim() {
+	    return shim;
+	  }	  // Important!
+	  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
+	  var ReactPropTypes = {
+	    array: shim,
+	    bigint: shim,
+	    bool: shim,
+	    func: shim,
+	    number: shim,
+	    object: shim,
+	    string: shim,
+	    symbol: shim,
+
+	    any: shim,
+	    arrayOf: getShim,
+	    element: shim,
+	    elementType: shim,
+	    instanceOf: getShim,
+	    node: shim,
+	    objectOf: getShim,
+	    oneOf: getShim,
+	    oneOfType: getShim,
+	    shape: getShim,
+	    exact: getShim,
+
+	    checkPropTypes: emptyFunctionWithReset,
+	    resetWarningCache: emptyFunction
+	  };
+
+	  ReactPropTypes.PropTypes = ReactPropTypes;
+
+	  return ReactPropTypes;
+	};
+	return factoryWithThrowingShims;
+}
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredPropTypes;
+
+function requirePropTypes () {
+	if (hasRequiredPropTypes) return propTypes$1.exports;
+	hasRequiredPropTypes = 1;
+	if (process.env.NODE_ENV !== 'production') {
+	  var ReactIs = requireReactIs();
+
+	  // By explicitly using `prop-types` you are opting into new development behavior.
+	  // http://fb.me/prop-types-in-prod
+	  var throwOnDirectAccess = true;
+	  propTypes$1.exports = requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
+	} else {
+	  // By explicitly using `prop-types` you are opting into new production behavior.
+	  // http://fb.me/prop-types-in-prod
+	  propTypes$1.exports = requireFactoryWithThrowingShims()();
+	}
+	return propTypes$1.exports;
+}
+
+var propTypesExports = requirePropTypes();
+
+var propTypes = {
+  /** When to wrap children */
+  condition: propTypesExports.bool,
+  /** Wrapper element */
+  wrapper: propTypesExports.element
+};
+var ConditionalWrapper = function ConditionalWrapper(_ref) {
+  var condition = _ref.condition,
+    wrapper = _ref.wrapper,
+    children = _ref.children;
+  return condition ? /*#__PURE__*/cloneElement(wrapper, wrapper.props, children) : children;
+};
+ConditionalWrapper.propTypes = propTypes;
+
+var alertData = {
+  warning: "warning-important",
+  info: "info",
+  danger: "error-severe",
+  success: "checked"
+};
+
+var CLASS_ROOT$6 = "alert";
+var Alert = function Alert(_a) {
+  var className = _a.className,
+    _a$type = _a.type,
+    type = _a$type === void 0 ? "info" : _a$type,
+    title = _a.title,
+    renderTitle = _a.renderTitle,
+    description = _a.description,
+    _a$headingLevel = _a.headingLevel,
+    headingLevel = _a$headingLevel === void 0 ? 3 : _a$headingLevel,
+    actionButtons = _a.actionButtons,
+    isFullWidth = _a.isFullWidth,
+    isInverse = _a.isInverse,
+    onClose = _a.onClose,
+    other = __rest(_a, ["className", "type", "title", "renderTitle", "description", "headingLevel", "actionButtons", "isFullWidth", "isInverse", "onClose"]);
+  var HEADINGTAG = "h".concat(headingLevel);
+  var classes = cx(CLASS_ROOT$6, _defineProperty(_defineProperty(_defineProperty({}, "".concat(CLASS_ROOT$6, "--").concat(type), type), "".concat(CLASS_ROOT$6, "--full-width"), isFullWidth), "".concat(CLASS_ROOT$6, "--inverse"), isInverse), className);
+  var alertTitle = renderTitle && renderTitle(Object.assign({
+    className: className,
+    type: type,
+    title: title,
+    renderTitle: renderTitle,
+    description: description,
+    headingLevel: headingLevel,
+    actionButtons: actionButtons,
+    isFullWidth: isFullWidth,
+    isInverse: isInverse,
+    onClose: onClose
+  }, other)) || title && /*#__PURE__*/React.createElement(HEADINGTAG, {
+    className: "".concat(CLASS_ROOT$6, "__title")
+  }, title);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs("div", _objectSpread2(_objectSpread2({
+    className: classes
+  }, other), {}, {
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+      className: "".concat(CLASS_ROOT$6, "__icon"),
+      children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {
+        name: alertData[type],
+        color: type,
+        size: "medium"
+      })
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+      className: "".concat(CLASS_ROOT$6, "__content"),
+      children: [alertTitle, description && /*#__PURE__*/jsxRuntimeExports.jsx(ConditionalWrapper, {
+        condition: typeof description === "string",
+        wrapper: /*#__PURE__*/jsxRuntimeExports.jsx("p", {}),
+        children: description
+      }), actionButtons && /*#__PURE__*/jsxRuntimeExports.jsx(ConditionalWrapper, {
+        condition: React.Children.count(actionButtons) > 1,
+        wrapper: /*#__PURE__*/jsxRuntimeExports.jsx(Buttons, {}),
+        children: React.Children.map(actionButtons, function (button) {
+          return button;
+        })
+      })]
+    }), onClose && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+      className: "".concat(CLASS_ROOT$6, "__close"),
+      children: /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+        onClick: onClose,
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {
+          name: "close",
+          size: "medium"
+        })
+      })
+    })]
+  }));
+};
+Alert.displayName = "Alert";
+
+var CLASS_ROOT$5 = "badge";
+var Badge = function Badge(_a) {
+  var color = _a.color,
+    isDark = _a.isDark,
+    isRound = _a.isRound,
+    className = _a.className,
+    children = _a.children,
+    other = __rest(_a, ["color", "isDark", "isRound", "className", "children"]);
+  var classes = cx(CLASS_ROOT$5, className, _defineProperty(_defineProperty({
+    "badge--dark": isDark
+  }, "badge--".concat(color), color), "badge--round", isRound));
+  return /*#__PURE__*/jsxRuntimeExports.jsx("span", _objectSpread2(_objectSpread2({
+    className: classes
+  }, other), {}, {
+    children: children
+  }));
+};
+Badge.displayName = "Badge";
+
+var CLASS_ROOT$4 = "btn";
+var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    children = props.children,
+    _props$htmlType = props.htmlType,
+    htmlType = _props$htmlType === void 0 ? "button" : _props$htmlType,
+    href = props.href,
+    isActive = props.isActive,
+    isDefault = props.isDefault,
+    isDisabled = props.isDisabled,
+    isInverse = props.isInverse,
+    size = props.size,
+    isSquare = props.isSquare,
+    type = props.type,
+    elemRef = props.elemRef,
+    other = __rest(props, ["className", "children", "htmlType", "href", "isActive", "isDefault", "isDisabled", "isInverse", "size", "isSquare", "type", "elemRef"]);
+  var classes = cx(CLASS_ROOT$4, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(CLASS_ROOT$4, "--square"), isSquare), "".concat(CLASS_ROOT$4, "--").concat(size), size), "".concat(CLASS_ROOT$4, "--").concat(type), type), "".concat(CLASS_ROOT$4, "--default"), isDefault), "".concat(CLASS_ROOT$4, "--inverse"), isInverse), "is-active", isActive), className);
+  if (href) {
+    // Anchor element
+    var anchorProps = other;
+    return /*#__PURE__*/jsxRuntimeExports.jsx("a", _objectSpread2(_objectSpread2({
+      href: href,
+      className: classes,
+      "aria-disabled": isDisabled ? "true" : undefined,
+      ref: elemRef || ref
+    }, anchorProps), {}, {
+      children: children
+    }));
+  } else {
+    // Button element
+    var buttonProps = other;
+    return /*#__PURE__*/jsxRuntimeExports.jsx("button", _objectSpread2(_objectSpread2({
+      type: htmlType,
+      className: classes,
+      disabled: isDisabled ? true : undefined,
+      "aria-disabled": isDisabled ? "true" : undefined,
+      ref: elemRef || ref
+    }, buttonProps), {}, {
+      children: children
+    }));
+  }
+});
+Button.displayName = "Button";
+
+var IconButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var iconName = _a.iconName,
+    _a$iconPosition = _a.iconPosition,
+    iconPosition = _a$iconPosition === void 0 ? "left" : _a$iconPosition,
+    iconClassName = _a.iconClassName,
+    children = _a.children,
+    size = _a.size,
+    isSquare = _a.isSquare,
+    other = __rest(_a, ["iconName", "iconPosition", "iconClassName", "children", "size", "isSquare"]);
+  var IconComponent = function IconComponent(_a) {
+    var className = _a.className,
+      props = __rest(_a, ["className"]);
+    return /*#__PURE__*/jsxRuntimeExports.jsx(Icon, _objectSpread2({
+      name: iconName,
+      size: size !== null && size !== void 0 ? size : "medium",
+      className: cx(iconClassName, className)
+    }, props));
+  };
+  if (isSquare) {
+    return /*#__PURE__*/jsxRuntimeExports.jsxs(Button, _objectSpread2(_objectSpread2({
+      size: size,
+      isSquare: true
+    }, other), {}, {
+      ref: ref,
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(IconComponent, {}), /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+        className: "visually-hidden",
+        children: children
+      })]
+    }));
+  }
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(Button, _objectSpread2(_objectSpread2({
+    ref: ref,
+    size: size
+  }, other), {}, {
+    children: [iconPosition === "left" && /*#__PURE__*/jsxRuntimeExports.jsx(IconComponent, {
+      className: "btn__icon-left"
+    }), children, iconPosition === "right" && /*#__PURE__*/jsxRuntimeExports.jsx(IconComponent, {
+      className: "btn__icon-right"
+    })]
+  }));
+});
+IconButton.displayName = "IconButton";
+
+var ButtonPrimary = function ButtonPrimary(props) {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(Button, _objectSpread2({
+    type: "primary"
+  }, props));
+};
+ButtonPrimary.displayName = "ButtonPrimary";
+var ButtonFill = function ButtonFill(props) {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(Button, _objectSpread2({
+    type: "fill"
+  }, props));
+};
+ButtonFill.displayName = "ButtonFill";
+var ButtonGhost = function ButtonGhost(props) {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(Button, _objectSpread2({
+    type: "ghost"
+  }, props));
+};
+ButtonGhost.displayName = "ButtonGhost";
+
+var idx = 0;
+var uuid = function uuid() {
+  return idx += 1;
+};
+/**
+ * Generates a unique ID string with an optional name prefix
+ * @param name Optional prefix for the ID
+ * @returns A unique ID string
+ */
+function generateId(name) {
+  return "id".concat('', "-").concat(uuid());
+}
+
+/**
+ * A hook to create and manage an instance of a "static" class
+ * @param StaticClass The class to instantiate
+ * @param config Configuration options for the class
+ * @returns [ref callback, instance reference]
+ */
+var useStatic = function useStatic(StaticClass) {
+  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var instance = useRef(null);
+  var configRef = useRef(config);
+  useEffect(function () {
+    configRef.current = config !== null && config !== void 0 ? config : {};
+  }, [config]);
+  var ref = useCallback(function (node) {
+    var _a, _b;
+    // use latest config available
+    var currentConfig = configRef.current;
+    if (node) {
+      if (instance.current === null) {
+        instance.current = new StaticClass(node, currentConfig);
+      } else {
+        (_b = (_a = instance.current).update) === null || _b === void 0 ? void 0 : _b.call(_a, currentConfig);
+      }
+    }
+  }, [StaticClass]);
+  useEffect(function () {
+    return function () {
+      var _a, _b;
+      if (instance.current) {
+        (_b = (_a = instance.current).destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+        instance.current = null;
+      }
+    };
+  }, []);
+  return [ref, instance];
+};
+
+const not = {
+  inert: ':not([inert]):not([inert] *)',
+  negTabIndex: ':not([tabindex^="-"])',
+  disabled: ':not(:disabled)',
+};
+
+var focusableSelectors = [
+  `a[href]${not.inert}${not.negTabIndex}`,
+  `area[href]${not.inert}${not.negTabIndex}`,
+  `input:not([type="hidden"]):not([type="radio"])${not.inert}${not.negTabIndex}${not.disabled}`,
+  `input[type="radio"]${not.inert}${not.negTabIndex}${not.disabled}`,
+  `select${not.inert}${not.negTabIndex}${not.disabled}`,
+  `textarea${not.inert}${not.negTabIndex}${not.disabled}`,
+  `button${not.inert}${not.negTabIndex}${not.disabled}`,
+  `details${not.inert} > summary:first-of-type${not.negTabIndex}`,
+  // Discard until Firefox supports `:has()`
+  // See: https://github.com/KittyGiraudel/focusable-selectors/issues/12
+  // `details:not(:has(> summary))${not.inert}${not.negTabIndex}`,
+  `iframe${not.inert}${not.negTabIndex}`,
+  `audio[controls]${not.inert}${not.negTabIndex}`,
+  `video[controls]${not.inert}${not.negTabIndex}`,
+  `[contenteditable]${not.inert}${not.negTabIndex}`,
+  `[tabindex]${not.inert}${not.negTabIndex}`,
+];
+
+/**
+ * Set the focus to the first element with `autofocus` with the element or the
+ * element itself.
+ */
+function focus(el) {
+    (el.querySelector('[autofocus]') || el).focus();
+}
+/**
+ * Get the first and last focusable elements within a given element.
+ */
+function getFocusableEdges(el) {
+    // Check for a focusable element within the subtree of the given element.
+    const firstEl = findFocusableEl(el, true);
+    // Only if we find the first element do we need to look for the last one. If
+    // there’s no last element, we set `lastEl` as a reference to `firstEl` so
+    // that the returned array is still always of length 2.
+    const lastEl = firstEl ? findFocusableEl(el, false) || firstEl : null;
+    return [firstEl, lastEl];
+}
+/**
+ * Find the first focusable element inside the given element if `forward` is
+ * truthy or the last focusable element otherwise.
+ */
+function findFocusableEl(el, forward) {
+    // If we’re walking forward, check if this element is focusable, and return it
+    // immediately if it is.
+    if (forward && isFocusable(el))
+        return el;
+    // We should only search the subtree of this element if it can have focusable
+    // children.
+    if (canHaveFocusableChildren(el)) {
+        // Start walking the DOM tree, looking for focusable elements.
+        // Case 1: If this element has a shadow root, search it recursively.
+        if (el.shadowRoot) {
+            // Descend into this subtree.
+            let next = getNextChildEl(el.shadowRoot, forward);
+            // Traverse the siblings, searching the subtree of each one for focusable
+            // elements.
+            while (next) {
+                const focusableEl = findFocusableEl(next, forward);
+                if (focusableEl)
+                    return focusableEl;
+                next = getNextSiblingEl(next, forward);
+            }
+        }
+        // Case 2: If this element is a slot for a Custom Element, search its
+        // assigned elements recursively.
+        else if (el.localName === 'slot') {
+            const assignedElements = el.assignedElements({
+                flatten: true,
+            });
+            if (!forward)
+                assignedElements.reverse();
+            for (const assignedElement of assignedElements) {
+                const focusableEl = findFocusableEl(assignedElement, forward);
+                if (focusableEl)
+                    return focusableEl;
+            }
+        }
+        // Case 3: this is a regular Light DOM element. Search its subtree.
+        else {
+            // Descend into this subtree.
+            let next = getNextChildEl(el, forward);
+            // Traverse siblings, searching the subtree of each one
+            // for focusable elements.
+            while (next) {
+                const focusableEl = findFocusableEl(next, forward);
+                if (focusableEl)
+                    return focusableEl;
+                next = getNextSiblingEl(next, forward);
+            }
+        }
+    }
+    // If we’re walking backward, we want to check the element’s entire subtree
+    // before checking the element itself. If this element is focusable, return
+    // it.
+    if (!forward && isFocusable(el))
+        return el;
+    return null;
+}
+function getNextChildEl(el, forward) {
+    return forward ? el.firstElementChild : el.lastElementChild;
+}
+function getNextSiblingEl(el, forward) {
+    return forward ? el.nextElementSibling : el.previousElementSibling;
+}
+/**
+ * Determine if an element is hidden from the user.
+ */
+const isHidden$1 = (el) => {
+    // Browsers hide all non-<summary> descendants of closed <details> elements
+    // from user interaction, but those non-<summary> elements may still match our
+    // focusable-selectors and may still have dimensions, so we need a special
+    // case to ignore them.
+    if (el.matches('details:not([open]) *') &&
+        !el.matches('details>summary:first-of-type'))
+        return true;
+    // If this element has no painted dimensions, it's hidden.
+    return !(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
+};
+/**
+ * Determine if an element is focusable and has user-visible painted dimensions.
+ */
+const isFocusable = (el) => {
+    // A shadow host that delegates focus will never directly receive focus,
+    // even with `tabindex=0`. Consider our <fancy-button> custom element, which
+    // delegates focus to its shadow button:
+    //
+    // <fancy-button tabindex="0">
+    //  #shadow-root
+    //  <button><slot></slot></button>
+    // </fancy-button>
+    //
+    // The browser acts as as if there is only one focusable element – the shadow
+    // button. Our library should behave the same way.
+    if (el.shadowRoot?.delegatesFocus)
+        return false;
+    return el.matches(focusableSelectors.join(',')) && !isHidden$1(el);
+};
+/**
+ * Determine if an element can have focusable children. Useful for bailing out
+ * early when walking the DOM tree.
+ * @example
+ * This div is inert, so none of its children can be focused, even though they
+ * meet our criteria for what is focusable. Once we check the div, we can skip
+ * the rest of the subtree.
+ * ```html
+ * <div inert>
+ *   <button>Button</button>
+ *   <a href="#">Link</a>
+ * </div>
+ * ```
+ */
+function canHaveFocusableChildren(el) {
+    // The browser will never send focus into a Shadow DOM if the host element
+    // has a negative tabindex. This applies to both slotted Light DOM Shadow DOM
+    // children
+    if (el.shadowRoot && el.getAttribute('tabindex') === '-1')
+        return false;
+    // Elemments matching this selector are either hidden entirely from the user,
+    // or are visible but unavailable for interaction. Their descentants can never
+    // receive focus.
+    return !el.matches(':disabled,[hidden],[inert]');
+}
+/**
+ * Get the active element, accounting for Shadow DOM subtrees.
+ * @author Cory LaViska
+ * @see: https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
+ */
+function getActiveEl(root = document) {
+    const activeEl = root.activeElement;
+    if (!activeEl)
+        return null;
+    // If there’s a shadow root, recursively find the active element within it.
+    // If the recursive call returns null, return the active element
+    // of the top-level Document.
+    if (activeEl.shadowRoot)
+        return getActiveEl(activeEl.shadowRoot) || document.activeElement;
+    // If not, we can just return the active element
+    return activeEl;
+}
+/**
+ * Trap the focus inside the given element
+ */
+function trapTabKey(el, event) {
+    const [firstFocusableEl, lastFocusableEl] = getFocusableEdges(el);
+    // If there are no focusable children in the dialog, prevent the user from
+    // tabbing out of it
+    if (!firstFocusableEl)
+        return event.preventDefault();
+    const activeEl = getActiveEl();
+    // If the SHIFT key is pressed while tabbing (moving backwards) and the
+    // currently focused item is the first one, move the focus to the last
+    // focusable item from the dialog element
+    if (event.shiftKey && activeEl === firstFocusableEl) {
+        // @ts-ignore: we know that `lastFocusableEl` is not null here
+        lastFocusableEl.focus();
+        event.preventDefault();
+    }
+    // If the SHIFT key is not pressed (moving forwards) and the currently focused
+    // item is the last one, move the focus to the first focusable item from the
+    // dialog element
+    else if (!event.shiftKey && activeEl === lastFocusableEl) {
+        firstFocusableEl.focus();
+        event.preventDefault();
+    }
+}
+/**
+ * Find the closest element to the given element matching the given selector,
+ * accounting for Shadow DOM subtrees.
+ * @author Louis St-Amour
+ * @see: https://stackoverflow.com/a/56105394
+ */
+function closest(selector, base) {
+    function from(el) {
+        if (!el || el === document || el === window)
+            return null;
+        // Reading the `assignedSlot` property from the element (as suggested by the
+        // aforementioned StackOverflow answer) is not enough, because it does not
+        // take into consideration elements nested deeply within a <slot>. For these
+        // elements, the `assignedSlot` property is `null` as it is only specified
+        // for top-level elements within a <slot>. To still find the closest <slot>,
+        // we walk up the tree looking for the `assignedSlot` property.
+        const slot = findAssignedSlot(el);
+        if (slot)
+            el = slot;
+        return (el.closest(selector) ||
+            from(el.getRootNode().host));
+    }
+    return from(base);
+}
+function findAssignedSlot(node) {
+    return (node.assignedSlot ||
+        (node.parentNode ? findAssignedSlot(node.parentNode) : null));
+}
+
+const SCOPE = 'data-a11y-dialog';
+class A11yDialog {
+    $el;
+    id;
+    previouslyFocused;
+    shown;
+    constructor(element) {
+        this.$el = element;
+        this.id = this.$el.getAttribute(SCOPE) || this.$el.id;
+        this.previouslyFocused = null;
+        this.shown = false;
+        this.maintainFocus = this.maintainFocus.bind(this);
+        this.bindKeypress = this.bindKeypress.bind(this);
+        this.handleTriggerClicks = this.handleTriggerClicks.bind(this);
+        this.show = this.show.bind(this);
+        this.hide = this.hide.bind(this);
+        this.$el.setAttribute('aria-hidden', 'true');
+        this.$el.setAttribute('aria-modal', 'true');
+        this.$el.setAttribute('tabindex', '-1');
+        if (!this.$el.hasAttribute('role')) {
+            this.$el.setAttribute('role', 'dialog');
+        }
+        document.addEventListener('click', this.handleTriggerClicks, true);
+    }
+    /**
+     * Destroy the current instance (after making sure the dialog has been hidden)
+     * and remove all associated listeners from dialog openers and closers
+     */
+    destroy() {
+        // Dispatch a `destroy` event
+        const destroyEvent = this.fire('destroy');
+        // If the event was prevented, do not continue with the normal behavior
+        if (destroyEvent.defaultPrevented)
+            return this;
+        // Hide the dialog to avoid destroying an open instance
+        this.hide();
+        // Remove the click event delegates for our openers and closers
+        document.removeEventListener('click', this.handleTriggerClicks, true);
+        // Clone and replace the dialog element to prevent memory leaks caused by
+        // event listeners that the author might not have cleaned up.
+        this.$el.replaceWith(this.$el.cloneNode(true));
+        return this;
+    }
+    /**
+     * Show the dialog element, trap the current focus within it, listen for some
+     * specific key presses and fire all registered callbacks for `show` event
+     */
+    show(event) {
+        // If the dialog is already open, abort
+        if (this.shown)
+            return this;
+        // Dispatch a `show` event
+        const showEvent = this.fire('show', event);
+        // If the event was prevented, do not continue with the normal behavior
+        if (showEvent.defaultPrevented)
+            return this;
+        // Keep a reference to the currently focused element to be able to restore
+        // it later
+        this.shown = true;
+        this.$el.removeAttribute('aria-hidden');
+        this.previouslyFocused = getActiveEl();
+        // Due to a long lasting bug in Safari, clicking an interactive element
+        // (like a <button>) does *not* move the focus to that element, which means
+        // `document.activeElement` is whatever element is currently focused (like
+        // an <input>), or the <body> element otherwise. We can work around that
+        // problem by checking whether the focused element is the <body>, and if it,
+        // store the click event target.
+        // See: https://bugs.webkit.org/show_bug.cgi?id=22261
+        if (this.previouslyFocused?.tagName === 'BODY' && event?.target) {
+            this.previouslyFocused = event.target;
+        }
+        // Set the focus to the dialog element
+        // See: https://github.com/KittyGiraudel/a11y-dialog/pull/583
+        if (event?.type === 'focus') {
+            this.maintainFocus();
+        }
+        else {
+            focus(this.$el);
+        }
+        // Bind a focus event listener to the body element to make sure the focus
+        // stays trapped inside the dialog while open, and start listening for some
+        // specific key presses (TAB and ESC)
+        document.body.addEventListener('focus', this.maintainFocus, true);
+        this.$el.addEventListener('keydown', this.bindKeypress, true);
+        return this;
+    }
+    /**
+     * Hide the dialog element, restore the focus to the previously active
+     * element, stop listening for some specific key presses and fire all
+     * registered callbacks for `hide` event
+     */
+    hide(event) {
+        // If the dialog is already closed, abort
+        if (!this.shown)
+            return this;
+        // Dispatch a `hide` event
+        const hideEvent = this.fire('hide', event);
+        // If the event was prevented, do not continue with the normal behavior
+        if (hideEvent.defaultPrevented)
+            return this;
+        this.shown = false;
+        this.$el.setAttribute('aria-hidden', 'true');
+        // Remove the focus event listener to the body element and stop listening
+        // for specific key presses
+        document.body.removeEventListener('focus', this.maintainFocus, true);
+        this.$el.removeEventListener('keydown', this.bindKeypress, true);
+        // Ensure the previously focused element (if any) has a `focus` method
+        // before attempting to call it to account for SVG elements
+        // See: https://github.com/KittyGiraudel/a11y-dialog/issues/108
+        this.previouslyFocused?.focus?.();
+        return this;
+    }
+    /**
+     * Register a new callback for the given event type
+     */
+    on(type, handler, options) {
+        this.$el.addEventListener(type, handler, options);
+        return this;
+    }
+    /**
+     * Unregister an existing callback for the given event type
+     */
+    off(type, handler, options) {
+        this.$el.removeEventListener(type, handler, options);
+        return this;
+    }
+    /**
+     * Dispatch and return a custom event from the DOM element associated with
+     * this dialog; this allows authors to listen for and respond to the events
+     * in their own code
+     */
+    fire(type, event) {
+        const customEvent = new CustomEvent(type, {
+            detail: event,
+            cancelable: true,
+        });
+        this.$el.dispatchEvent(customEvent);
+        return customEvent;
+    }
+    /**
+     * Add a delegated event listener for when elememts that open or close the
+     * dialog are clicked, and call `show` or `hide`, respectively
+     */
+    handleTriggerClicks(event) {
+        // We need to retrieve the click target while accounting for Shadow DOM.
+        // When within a web component, `event.target` is the shadow root (e.g.
+        // `<my-dialog>`), so we need to use `event.composedPath()` to get the click
+        // target
+        // See: https://github.com/KittyGiraudel/a11y-dialog/issues/582
+        const target = event.composedPath()[0];
+        const opener = closest(`[${SCOPE}-show="${this.id}"]`, target);
+        const explicitCloser = closest(`[${SCOPE}-hide="${this.id}"]`, target);
+        const implicitCloser = closest(`[${SCOPE}-hide]`, target) &&
+            closest('[aria-modal="true"]', target) === this.$el;
+        // We use `closest(..)` (instead of `matches(..)`) so that clicking an
+        // element nested within a dialog opener does cause the dialog to open, and
+        // we use our custom `closest(..)` function so that it can cross shadow
+        // boundaries
+        // See: https://github.com/KittyGiraudel/a11y-dialog/issues/712
+        if (opener)
+            this.show(event);
+        if (explicitCloser || implicitCloser)
+            this.hide(event);
+    }
+    /**
+     * Private event handler used when listening to some specific key presses
+     * (namely ESC and TAB)
+     */
+    bindKeypress(event) {
+        // This is an escape hatch in case there are nested open dialogs, so that
+        // only the top most dialog gets interacted with (`closest` is basically
+        // `Element.prototype.closest()` accounting for Shadow DOM subtrees)
+        if (closest('[aria-modal="true"]', getActiveEl()) !== this.$el) {
+            return;
+        }
+        let hasOpenPopover = false;
+        try {
+            hasOpenPopover = !!this.$el.querySelector('[popover]:not([popover="manual"]):popover-open');
+        }
+        catch {
+            // Run that DOM query in a try/catch because not all browsers support the
+            // `:popover-open` selector, which would cause the whole expression to
+            // fail
+            // See: https://caniuse.com/mdn-css_selectors_popover-open
+            // See: https://github.com/KittyGiraudel/a11y-dialog/pull/578#discussion_r1343215149
+        }
+        // If the dialog is shown and the ESC key is pressed, prevent any further
+        // effects from the ESC key and hide the dialog, unless:
+        // - its role is `alertdialog`, which means it should be modal
+        // - or it contains an open popover, in which case ESC should close it
+        if (event.key === 'Escape' &&
+            this.$el.getAttribute('role') !== 'alertdialog' &&
+            !hasOpenPopover) {
+            event.preventDefault();
+            this.hide(event);
+        }
+        // If the dialog is shown and the TAB key is pressed, make sure the focus
+        // stays trapped within the dialog element
+        if (event.key === 'Tab') {
+            trapTabKey(this.$el, event);
+        }
+    }
+    /**
+     * If the dialog is shown and the focus is not within a dialog element (either
+     * this one or another one in case of nested dialogs) or an element with the
+     * ignore attribute, move it back to the dialog container
+     * See: https://github.com/KittyGiraudel/a11y-dialog/issues/177
+     */
+    maintainFocus() {
+        // We use `getActiveEl()` and not `event.target` here because the latter can
+        // be a shadow root. This can happen when having a focusable element after
+        // slotted content: tabbing out of it causes this focus listener to trigger
+        // with the shadow root as a target event. In such a case, the focus would
+        // be incorrectly moved to the dialog, which shouldn’t happen. Getting the
+        // active element (while accounting for Shadow DOM) avoids that problem.
+        // See: https://github.com/KittyGiraudel/a11y-dialog/issues/778
+        const target = getActiveEl();
+        if (!closest(`[aria-modal="true"], [${SCOPE}-ignore-focus-trap]`, target)) {
+            focus(this.$el);
+        }
+    }
+}
+
+function instantiateDialogs() {
+    for (const el of document.querySelectorAll('[data-a11y-dialog]')) {
+        new A11yDialog(el);
+    }
+}
+if (typeof document !== 'undefined') {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', instantiateDialogs);
+    }
+    else {
+        instantiateDialogs();
+    }
+}
+
+/*!
+* tabbable 6.2.0
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+// NOTE: separate `:not()` selectors has broader browser support than the newer
+//  `:not([inert], [inert] *)` (Feb 2023)
+// CAREFUL: JSDom does not support `:not([inert] *)` as a selector; using it causes
+//  the entire query to fail, resulting in no nodes found, which will break a lot
+//  of things... so we have to rely on JS to identify nodes inside an inert container
+var candidateSelectors = ['input:not([inert])', 'select:not([inert])', 'textarea:not([inert])', 'a[href]:not([inert])', 'button:not([inert])', '[tabindex]:not(slot):not([inert])', 'audio[controls]:not([inert])', 'video[controls]:not([inert])', '[contenteditable]:not([contenteditable="false"]):not([inert])', 'details>summary:first-of-type:not([inert])', 'details:not([inert])'];
+var candidateSelector = /* #__PURE__ */candidateSelectors.join(',');
+var NoElement = typeof Element === 'undefined';
+var matches = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+var getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {
+  var _element$getRootNode;
+  return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);
+} : function (element) {
+  return element === null || element === void 0 ? void 0 : element.ownerDocument;
+};
+
+/**
+ * Determines if a node is inert or in an inert ancestor.
+ * @param {Element} [node]
+ * @param {boolean} [lookUp] If true and `node` is not inert, looks up at ancestors to
+ *  see if any of them are inert. If false, only `node` itself is considered.
+ * @returns {boolean} True if inert itself or by way of being in an inert ancestor.
+ *  False if `node` is falsy.
+ */
+var isInert = function isInert(node, lookUp) {
+  var _node$getAttribute;
+  if (lookUp === void 0) {
+    lookUp = true;
+  }
+  // CAREFUL: JSDom does not support inert at all, so we can't use the `HTMLElement.inert`
+  //  JS API property; we have to check the attribute, which can either be empty or 'true';
+  //  if it's `null` (not specified) or 'false', it's an active element
+  var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, 'inert');
+  var inert = inertAtt === '' || inertAtt === 'true';
+
+  // NOTE: this could also be handled with `node.matches('[inert], :is([inert] *)')`
+  //  if it weren't for `matches()` not being a function on shadow roots; the following
+  //  code works for any kind of node
+  // CAREFUL: JSDom does not appear to support certain selectors like `:not([inert] *)`
+  //  so it likely would not support `:is([inert] *)` either...
+  var result = inert || lookUp && node && isInert(node.parentNode); // recursive
+
+  return result;
+};
+
+/**
+ * Determines if a node's content is editable.
+ * @param {Element} [node]
+ * @returns True if it's content-editable; false if it's not or `node` is falsy.
+ */
+var isContentEditable = function isContentEditable(node) {
+  var _node$getAttribute2;
+  // CAREFUL: JSDom does not support the `HTMLElement.isContentEditable` API so we have
+  //  to use the attribute directly to check for this, which can either be empty or 'true';
+  //  if it's `null` (not specified) or 'false', it's a non-editable element
+  var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, 'contenteditable');
+  return attValue === '' || attValue === 'true';
+};
+
+/**
+ * @private
+ * Determines if the node has an explicitly specified `tabindex` attribute.
+ * @param {HTMLElement} node
+ * @returns {boolean} True if so; false if not.
+ */
+var hasTabIndex = function hasTabIndex(node) {
+  return !isNaN(parseInt(node.getAttribute('tabindex'), 10));
+};
+
+/**
+ * Determine the tab index of a given node.
+ * @param {HTMLElement} node
+ * @returns {number} Tab order (negative, 0, or positive number).
+ * @throws {Error} If `node` is falsy.
+ */
+var getTabIndex = function getTabIndex(node) {
+  if (!node) {
+    throw new Error('No node provided');
+  }
+  if (node.tabIndex < 0) {
+    // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
+    // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
+    // yet they are still part of the regular tab order; in FF, they get a default
+    // `tabIndex` of 0; since Chrome still puts those elements in the regular tab
+    // order, consider their tab index to be 0.
+    // Also browsers do not return `tabIndex` correctly for contentEditable nodes;
+    // so if they don't have a tabindex attribute specifically set, assume it's 0.
+    if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {
+      return 0;
+    }
+  }
+  return node.tabIndex;
+};
+var isInput = function isInput(node) {
+  return node.tagName === 'INPUT';
+};
+var isHiddenInput = function isHiddenInput(node) {
+  return isInput(node) && node.type === 'hidden';
+};
+var isDetailsWithSummary = function isDetailsWithSummary(node) {
+  var r = node.tagName === 'DETAILS' && Array.prototype.slice.apply(node.children).some(function (child) {
+    return child.tagName === 'SUMMARY';
+  });
+  return r;
+};
+var getCheckedRadio = function getCheckedRadio(nodes, form) {
+  for (var i = 0; i < nodes.length; i++) {
+    if (nodes[i].checked && nodes[i].form === form) {
+      return nodes[i];
+    }
+  }
+};
+var isTabbableRadio = function isTabbableRadio(node) {
+  if (!node.name) {
+    return true;
+  }
+  var radioScope = node.form || getRootNode(node);
+  var queryRadios = function queryRadios(name) {
+    return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
+  };
+  var radioSet;
+  if (typeof window !== 'undefined' && typeof window.CSS !== 'undefined' && typeof window.CSS.escape === 'function') {
+    radioSet = queryRadios(window.CSS.escape(node.name));
+  } else {
+    try {
+      radioSet = queryRadios(node.name);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s', err.message);
+      return false;
+    }
+  }
+  var checked = getCheckedRadio(radioSet, node.form);
+  return !checked || checked === node;
+};
+var isRadio = function isRadio(node) {
+  return isInput(node) && node.type === 'radio';
+};
+var isNonTabbableRadio = function isNonTabbableRadio(node) {
+  return isRadio(node) && !isTabbableRadio(node);
+};
+
+// determines if a node is ultimately attached to the window's document
+var isNodeAttached = function isNodeAttached(node) {
+  var _nodeRoot;
+  // The root node is the shadow root if the node is in a shadow DOM; some document otherwise
+  //  (but NOT _the_ document; see second 'If' comment below for more).
+  // If rootNode is shadow root, it'll have a host, which is the element to which the shadow
+  //  is attached, and the one we need to check if it's in the document or not (because the
+  //  shadow, and all nodes it contains, is never considered in the document since shadows
+  //  behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,
+  //  is hidden, or is not in the document itself but is detached, it will affect the shadow's
+  //  visibility, including all the nodes it contains). The host could be any normal node,
+  //  or a custom element (i.e. web component). Either way, that's the one that is considered
+  //  part of the document, not the shadow root, nor any of its children (i.e. the node being
+  //  tested).
+  // To further complicate things, we have to look all the way up until we find a shadow HOST
+  //  that is attached (or find none) because the node might be in nested shadows...
+  // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the
+  //  document (per the docs) and while it's a Document-type object, that document does not
+  //  appear to be the same as the node's `ownerDocument` for some reason, so it's safer
+  //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,
+  //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when
+  //  node is actually detached.
+  // NOTE: If `nodeRootHost` or `node` happens to be the `document` itself (which is possible
+  //  if a tabbable/focusable node was quickly added to the DOM, focused, and then removed
+  //  from the DOM as in https://github.com/focus-trap/focus-trap-react/issues/905), then
+  //  `ownerDocument` will be `null`, hence the optional chaining on it.
+  var nodeRoot = node && getRootNode(node);
+  var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;
+
+  // in some cases, a detached node will return itself as the root instead of a document or
+  //  shadow root object, in which case, we shouldn't try to look further up the host chain
+  var attached = false;
+  if (nodeRoot && nodeRoot !== node) {
+    var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;
+    attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));
+    while (!attached && nodeRootHost) {
+      var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;
+      // since it's not attached and we have a root host, the node MUST be in a nested shadow DOM,
+      //  which means we need to get the host's host and check if that parent host is contained
+      //  in (i.e. attached to) the document
+      nodeRoot = getRootNode(nodeRootHost);
+      nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;
+      attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));
+    }
+  }
+  return attached;
+};
+var isZeroArea = function isZeroArea(node) {
+  var _node$getBoundingClie = node.getBoundingClientRect(),
+    width = _node$getBoundingClie.width,
+    height = _node$getBoundingClie.height;
+  return width === 0 && height === 0;
+};
+var isHidden = function isHidden(node, _ref) {
+  var displayCheck = _ref.displayCheck,
+    getShadowRoot = _ref.getShadowRoot;
+  // NOTE: visibility will be `undefined` if node is detached from the document
+  //  (see notes about this further down), which means we will consider it visible
+  //  (this is legacy behavior from a very long way back)
+  // NOTE: we check this regardless of `displayCheck="none"` because this is a
+  //  _visibility_ check, not a _display_ check
+  if (getComputedStyle(node).visibility === 'hidden') {
+    return true;
+  }
+  var isDirectSummary = matches.call(node, 'details>summary:first-of-type');
+  var nodeUnderDetails = isDirectSummary ? node.parentElement : node;
+  if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {
+    return true;
+  }
+  if (!displayCheck || displayCheck === 'full' || displayCheck === 'legacy-full') {
+    if (typeof getShadowRoot === 'function') {
+      // figure out if we should consider the node to be in an undisclosed shadow and use the
+      //  'non-zero-area' fallback
+      var originalNode = node;
+      while (node) {
+        var parentElement = node.parentElement;
+        var rootNode = getRootNode(node);
+        if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true // check if there's an undisclosed shadow
+        ) {
+          // node has an undisclosed shadow which means we can only treat it as a black box, so we
+          //  fall back to a non-zero-area test
+          return isZeroArea(node);
+        } else if (node.assignedSlot) {
+          // iterate up slot
+          node = node.assignedSlot;
+        } else if (!parentElement && rootNode !== node.ownerDocument) {
+          // cross shadow boundary
+          node = rootNode.host;
+        } else {
+          // iterate up normal dom
+          node = parentElement;
+        }
+      }
+      node = originalNode;
+    }
+    // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
+    //  (i.e. it does not also presume that all nodes might have undisclosed shadows); or
+    //  it might be a falsy value, which means shadow DOM support is disabled
+
+    // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)
+    //  now we can just test to see if it would normally be visible or not, provided it's
+    //  attached to the main document.
+    // NOTE: We must consider case where node is inside a shadow DOM and given directly to
+    //  `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.
+
+    if (isNodeAttached(node)) {
+      // this works wherever the node is: if there's at least one client rect, it's
+      //  somehow displayed; it also covers the CSS 'display: contents' case where the
+      //  node itself is hidden in place of its contents; and there's no need to search
+      //  up the hierarchy either
+      return !node.getClientRects().length;
+    }
+
+    // Else, the node isn't attached to the document, which means the `getClientRects()`
+    //  API will __always__ return zero rects (this can happen, for example, if React
+    //  is used to render nodes onto a detached tree, as confirmed in this thread:
+    //  https://github.com/facebook/react/issues/9117#issuecomment-284228870)
+    //
+    // It also means that even window.getComputedStyle(node).display will return `undefined`
+    //  because styles are only computed for nodes that are in the document.
+    //
+    // NOTE: THIS HAS BEEN THE CASE FOR YEARS. It is not new, nor is it caused by tabbable
+    //  somehow. Though it was never stated officially, anyone who has ever used tabbable
+    //  APIs on nodes in detached containers has actually implicitly used tabbable in what
+    //  was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck="none"` mode -- essentially
+    //  considering __everything__ to be visible because of the innability to determine styles.
+    //
+    // v6.0.0: As of this major release, the default 'full' option __no longer treats detached
+    //  nodes as visible with the 'none' fallback.__
+    if (displayCheck !== 'legacy-full') {
+      return true; // hidden
+    }
+    // else, fallback to 'none' mode and consider the node visible
+  } else if (displayCheck === 'non-zero-area') {
+    // NOTE: Even though this tests that the node's client rect is non-zero to determine
+    //  whether it's displayed, and that a detached node will __always__ have a zero-area
+    //  client rect, we don't special-case for whether the node is attached or not. In
+    //  this mode, we do want to consider nodes that have a zero area to be hidden at all
+    //  times, and that includes attached or not.
+    return isZeroArea(node);
+  }
+
+  // visible, as far as we can tell, or per current `displayCheck=none` mode, we assume
+  //  it's visible
+  return false;
+};
+
+// form fields (nested) inside a disabled fieldset are not focusable/tabbable
+//  unless they are in the _first_ <legend> element of the top-most disabled
+//  fieldset
+var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
+  if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {
+    var parentNode = node.parentElement;
+    // check if `node` is contained in a disabled <fieldset>
+    while (parentNode) {
+      if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {
+        // look for the first <legend> among the children of the disabled <fieldset>
+        for (var i = 0; i < parentNode.children.length; i++) {
+          var child = parentNode.children.item(i);
+          // when the first <legend> (in document order) is found
+          if (child.tagName === 'LEGEND') {
+            // if its parent <fieldset> is not nested in another disabled <fieldset>,
+            // return whether `node` is a descendant of its first <legend>
+            return matches.call(parentNode, 'fieldset[disabled] *') ? true : !child.contains(node);
+          }
+        }
+        // the disabled <fieldset> containing `node` has no <legend>
+        return true;
+      }
+      parentNode = parentNode.parentElement;
+    }
+  }
+
+  // else, node's tabbable/focusable state should not be affected by a fieldset's
+  //  enabled/disabled state
+  return false;
+};
+var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
+  if (node.disabled ||
+  // we must do an inert look up to filter out any elements inside an inert ancestor
+  //  because we're limited in the type of selectors we can use in JSDom (see related
+  //  note related to `candidateSelectors`)
+  isInert(node) || isHiddenInput(node) || isHidden(node, options) ||
+  // For a details element with a summary, the summary element gets the focus
+  isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
+    return false;
+  }
+  return true;
+};
+var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
+  if (isNonTabbableRadio(node) || getTabIndex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
+    return false;
+  }
+  return true;
+};
+var isTabbable = function isTabbable(node, options) {
+  options = options || {};
+  if (!node) {
+    throw new Error('No node provided');
+  }
+  if (matches.call(node, candidateSelector) === false) {
+    return false;
+  }
+  return isNodeMatchingSelectorTabbable(options, node);
+};
+
+var defaultConfig$1 = function defaultConfig() {
+  return {
+    /** Class which indicates that modal is open */
+    classModalIsOpen: "is-active",
+    /** Class on body which indicates that modal is open */
+    classModalIsOpenBody: "has-modal",
+    /** Root of page content which should be hidden when modal is open */
+    root: "#root",
+    /** Move modal into this element selector (must be unique in DOM) */
+    modalsRoot: "#root-modals"
+  };
+};
+var Modal$1 = /*#__PURE__*/function () {
+  function Modal(element, config) {
+    _classCallCheck(this, Modal);
+    this.element = element;
+    this.config = Object.assign(Object.assign({}, defaultConfig$1()), config);
+    this.handleShow = this.handleShow.bind(this);
+    this.handleHide = this.handleHide.bind(this);
+    this.show = this.show.bind(this);
+    this.hide = this.hide.bind(this);
+    this.headerFirstItemSpacing = this.headerFirstItemSpacing.bind(this);
+    Modal.moveToModalRoot = Modal.moveToModalRoot.bind(this);
+    Modal.lockBody = Modal.lockBody.bind(this);
+    Modal.unlockBody = Modal.unlockBody.bind(this);
+    this.element.ODS_Modal = this;
+    this.init();
+    return this;
+  }
+  return _createClass(Modal, [{
+    key: "handleShow",
+    value: function handleShow(el) {
+      Modal.lockBody();
+      if (el) el.classList.add(this.config.classModalIsOpen);
+      // Long modals can have first focusabble element under the fold, so static content above the fold should be focused instead to prevent undesirable scrolling
+      var initialFocusEl = el.querySelector("[data-a11y-dialog-initial-focus]");
+      if (!initialFocusEl) {
+        return;
+      }
+      // set tabindex to -1 so element can't be focused via keyboard
+      if (!isTabbable(initialFocusEl)) {
+        initialFocusEl.setAttribute("tabindex", "-1");
+      }
+      initialFocusEl.focus();
+    }
+  }, {
+    key: "handleHide",
+    value: function handleHide(el) {
+      Modal.unlockBody();
+      if (el) el.classList.remove(this.config.classModalIsOpen);
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      this.instance.show();
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      this.instance.hide();
+    }
+  }, {
+    key: "headerFirstItemSpacing",
+    value: function headerFirstItemSpacing() {
+      /**
+       * Target the first element which is not .btn inside .modal__header and add margin-right 40px.
+       * css has its limitations and it is not possible with pseudo selectors
+       */
+      var modalHeader = this.element.querySelector(".modal__header");
+      if (modalHeader) {
+        var firstNonBtnElement = Array.from(modalHeader.children).find(function (child) {
+          return !child.classList.contains("btn");
+        });
+        if (firstNonBtnElement) {
+          firstNonBtnElement.style.marginRight = "40px";
+        }
+      }
+    }
+  }, {
+    key: "init",
+    value: function init() {
+      var _this = this;
+      if (this.config.modalsRoot) {
+        Modal.moveToModalRoot(this.element, document.querySelector(this.config.modalsRoot));
+      }
+      this.instance = new A11yDialog(this.element);
+      this.instance.on("show", function (event) {
+        var dialogEl = event.currentTarget;
+        _this.handleShow(dialogEl);
+      });
+      this.instance.on("hide", function (event) {
+        var dialogEl = event.currentTarget;
+        _this.handleHide(dialogEl);
+      });
+      this.headerFirstItemSpacing();
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.instance.destroy();
+      this.element.ODS_Modal = this;
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      this.destroy();
+      this.init();
+    }
+  }], [{
+    key: "getInstance",
+    value: function getInstance(el) {
+      if (!el) return null;
+      var modalEl = el;
+      return modalEl.ODS_Modal || null;
+    }
+  }, {
+    key: "moveToModalRoot",
+    value: function moveToModalRoot(el, container) {
+      var _a;
+      if (container) {
+        container.appendChild(el);
+      } else {
+        console.warn("`modalsRoot: ".concat((_a = this.config) === null || _a === void 0 ? void 0 : _a.modalsRoot, "` element is not present in DOM. Modal will be placed inside content which can affect it's styling. Please provide `modalsRoot` selector (should be placed outside of main contant, usualy in end of <body /> tag)"));
+      }
+    }
+  }, {
+    key: "lockBody",
+    value: function lockBody(className, root) {
+      var _a, _b;
+      var actualClassName = className || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.classModalIsOpenBody);
+      var actualRoot = root || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.root);
+      var container = document.querySelector(actualRoot);
+      // store current scrollTop value
+      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      document.body.setAttribute("data-lock-scrolltop", scrollTop.toString());
+      // add locking styles to body
+      document.body.style.height = "100%";
+      document.body.style.width = "100%";
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "fixed";
+      // add locking styles to scrollTop
+      if (container) {
+        container.style.height = "100%";
+        container.style.width = "100%";
+        container.style.overflow = "hidden";
+        container.style.position = "fixed";
+        // scroll page-container to scrollTop position
+        container.scrollTop = scrollTop;
+      }
+      // add modal class
+      document.body.classList.add(actualClassName);
+      // attempt to scroll top fixed position
+      window.requestAnimationFrame(function () {
+        window.scrollTo(0, scrollTop);
+      });
+    }
+  }, {
+    key: "unlockBody",
+    value: function unlockBody(className, root) {
+      var _a, _b;
+      var actualClassName = className || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.classModalIsOpenBody);
+      var actualRoot = root || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.root);
+      var container = document.querySelector(actualRoot);
+      var scrollTop = document.body.getAttribute("data-lock-scrolltop") || "0";
+      // remove locking styles from body
+      document.body.style.height = "";
+      document.body.style.width = "";
+      document.body.style.overflow = "";
+      document.body.style.position = "";
+      // add modal class
+      document.body.classList.remove(actualClassName);
+      // remove locking styles from page-container
+      if (container) {
+        container.style.height = "";
+        container.style.width = "";
+        container.style.overflow = "";
+        container.style.position = "";
+      }
+      // set scroll position back
+      window.requestAnimationFrame(function () {
+        window.scrollTo({
+          left: 0,
+          top: parseInt(scrollTop, 10),
+          behavior: "instant"
+        });
+      });
+    }
+  }]);
+}();
+
+var ModalCloseButton = function ModalCloseButton(props) {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, _objectSpread2({
+    iconName: "delete",
+    type: "ghost",
+    isSquare: true,
+    size: "small",
+    className: "modal__close",
+    "data-a11y-dialog-hide": true,
+    "aria-label": "Zatvori\u0165"
+  }, props));
+};
+ModalCloseButton.displayName = "ModalCloseButton";
+
+var ModalTitle = function ModalTitle(_a) {
+  var size = _a.size,
+    className = _a.className,
+    children = _a.children,
+    other = __rest(_a, ["size", "className", "children"]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx("h2", _objectSpread2(_objectSpread2({
+    className: cx(className, {
+      "display-3": size === "large",
+      h2: size === "small"
+    })
+  }, other), {}, {
+    children: children
+  }));
+};
+ModalTitle.displayName = "ModalTitle";
+
+var CLASS_ROOT$3 = "modal__body";
+var ModalBody = function ModalBody(_a) {
+  var color = _a.color,
+    className = _a.className,
+    children = _a.children,
+    other = __rest(_a, ["color", "className", "children"]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx("div", _objectSpread2(_objectSpread2({
+    className: cx(CLASS_ROOT$3, className, _defineProperty(_defineProperty({}, "bg-".concat(color), color), "".concat(CLASS_ROOT$3, "--colorful"), color))
+  }, other), {}, {
+    children: children
+  }));
+};
+ModalBody.displayName = "ModalBody";
+
+var CLASS_ROOT$2 = "modal";
+var defaultProps = {
+  actions: [/*#__PURE__*/jsxRuntimeExports.jsx(Button, {
+    "data-a11y-dialog-hide": true,
+    children: "Zatvori\u0165"
+  }, "1")],
+  noInit: false
+};
+var Modal = function Modal(_a) {
+  var _a$actions = _a.actions,
+    actions = _a$actions === void 0 ? defaultProps.actions : _a$actions,
+    className = _a.className,
+    children = _a.children,
+    hasStickyFooter = _a.hasStickyFooter,
+    id = _a.id,
+    _a$noInit = _a.noInit,
+    noInit = _a$noInit === void 0 ? defaultProps.noInit : _a$noInit,
+    isActive = _a.isActive,
+    size = _a.size,
+    title = _a.title,
+    renderBody = _a.renderBody,
+    renderTitle = _a.renderTitle,
+    renderFooter = _a.renderFooter,
+    fullHeight = _a.fullHeight,
+    other = __rest(_a, ["actions", "className", "children", "hasStickyFooter", "id", "noInit", "isActive", "size", "title", "renderBody", "renderTitle", "renderFooter", "fullHeight"]);
+  var _useStatic = useStatic(Modal$1),
+    _useStatic2 = _slicedToArray(_useStatic, 2),
+    modalRef = _useStatic2[0],
+    instance = _useStatic2[1];
+  useEffect(function () {
+    if (isActive && instance && instance.current) {
+      instance.current.show();
+    }
+  }, [instance, isActive]);
+  var dialogClasses = cx("".concat(CLASS_ROOT$2, "__dialog"), _defineProperty(_defineProperty({}, "".concat(CLASS_ROOT$2, "__dialog--").concat(size), size), "".concat(CLASS_ROOT$2, "__dialog--full-height"), fullHeight), className);
+  var titleId = "".concat(id, "-title");
+  var dialogTitle = renderTitle ? renderTitle(id) : /*#__PURE__*/jsxRuntimeExports.jsx(ModalTitle, {
+    id: titleId,
+    size: size,
+    "data-a11y-dialog-initial-focus": true,
+    children: title
+  });
+  return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+    id: id,
+    "data-modal": !noInit,
+    className: CLASS_ROOT$2,
+    ref: modalRef,
+    role: "dialog",
+    "aria-hidden": "true",
+    "aria-modal": "true",
+    "aria-labelledby": titleId,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+      className: "modal__overlay",
+      tabIndex: -1,
+      "data-a11y-dialog-hide": true
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", _objectSpread2(_objectSpread2({
+      className: dialogClasses,
+      role: "document"
+    }, other), {}, {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+        className: "".concat(CLASS_ROOT$2, "__header"),
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx(ModalCloseButton, {}), dialogTitle]
+      }), renderBody ? renderBody() : /*#__PURE__*/jsxRuntimeExports.jsx(ModalBody, {
+        children: children
+      }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+        className: cx("".concat(CLASS_ROOT$2, "__footer"), _defineProperty({}, "".concat(CLASS_ROOT$2, "__footer--sticky"), hasStickyFooter)),
+        children: renderFooter ? renderFooter() : /*#__PURE__*/jsxRuntimeExports.jsx(ConditionalWrapper, {
+          condition: actions.length > 1,
+          wrapper: /*#__PURE__*/jsxRuntimeExports.jsx(Buttons, {}),
+          children: actions.map(function (action) {
+            return action;
+          })
+        })
+      })]
+    }))]
+  });
+};
+Modal.displayName = "Modal";
+
+var CLASS_ROOT$1 = 'container';
+var Container = function Container(_a) {
+  var className = _a.className,
+    other = __rest(_a, ["className"]);
+  var classes = cx(CLASS_ROOT$1, className);
+  return /*#__PURE__*/jsxRuntimeExports.jsx("div", _objectSpread2({
+    className: classes
+  }, other));
+};
+Container.displayName = 'Container';
+
+var CLASS_ROOT = "section";
+var Section = function Section(_a) {
+  var className = _a.className,
+    _a$color = _a.color,
+    color = _a$color === void 0 ? "white" : _a$color,
+    spacing = _a.spacing,
+    _a$tag = _a.tag,
+    Tag = _a$tag === void 0 ? "div" : _a$tag,
+    children = _a.children,
+    other = __rest(_a, ["className", "color", "spacing", "tag", "children"]);
+  var classes = cx(CLASS_ROOT, _defineProperty(_defineProperty({}, "".concat(CLASS_ROOT, "--").concat(spacing), spacing), "bg-".concat(color), color !== "white"), className);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(Tag, _objectSpread2(_objectSpread2({
+    className: classes
+  }, other), {}, {
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(Container, {
+      children: children
+    })
+  }));
+};
+Section.displayName = "Section";
+
+var CLASS_TABLIST_ITEM = "tab-list__item";
+var CLASS_TABLIST_TAB = "tab-list__tab";
+var Tab = function Tab(_a) {
+  var href = _a.href,
+    children = _a.children,
+    className = _a.className,
+    controls = _a.controls,
+    isDisabled = _a.isDisabled,
+    isActive = _a.isActive,
+    other = __rest(_a, ["href", "children", "className", "controls", "isDisabled", "isActive"]);
+  var tabClasses = cx(CLASS_TABLIST_TAB, className);
+  var tabindex = isActive ? 0 : -1;
+  var Tag = href ? "a" : "button";
+  return /*#__PURE__*/jsxRuntimeExports.jsx("li", {
+    className: CLASS_TABLIST_ITEM,
+    role: "presentation",
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(Tag, _objectSpread2(_objectSpread2({
+      type: href ? undefined : "button",
+      role: href ? undefined : "tab",
+      href: href,
+      className: tabClasses,
+      "aria-selected": isActive,
+      "aria-controls": controls || undefined,
+      tabIndex: tabindex,
+      "aria-disabled": isDisabled
+    }, other), {}, {
+      children: children
+    }))
+  });
+};
+Tab.displayName = "Tab";
+
+// we use array to include old browser key names like IE11
+// ie. navigation keys https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#navigation_keys
+var keys = {
+  TAB: ['Tab'],
+  ARROWLEFT: ['Left', 'ArrowLeft'],
+  ARROWUP: ['Up', 'ArrowUp'],
+  ARROWRIGHT: ['Right', 'ArrowRight'],
+  ARROWDOWN: ['Down', 'ArrowDown']
+};
+
+var RovingTabindex = /*#__PURE__*/function () {
+  function RovingTabindex(elems) {
+    var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      direction: 'horizontal'
+    };
+    _classCallCheck(this, RovingTabindex);
+    this.elems = elems;
+    this.config = config;
+    this.isActive = false;
+    this.onKeydown = this.onKeydown.bind(this);
+  }
+  return _createClass(RovingTabindex, [{
+    key: "init",
+    value: function init() {
+      document.addEventListener('keydown', this.onKeydown);
+      this.isActive = true;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      document.removeEventListener('keydown', this.onKeydown);
+      this.isActive = false;
+    }
+  }, {
+    key: "update",
+    value: function update(elems) {
+      this.elems = elems;
+    }
+  }, {
+    key: "onKeydown",
+    value: function onKeydown(e) {
+      var activeElemIndex = this.elems.indexOf(document.activeElement);
+      if ((keys.ARROWUP.includes(e.key) || keys.ARROWDOWN.includes(e.key)) && this.config.direction === 'horizontal') {
+        return;
+      }
+      if ((keys.ARROWLEFT.includes(e.key) || keys.ARROWRIGHT.includes(e.key)) && this.config.direction === 'vertical') {
+        return;
+      }
+      if (keys.ARROWDOWN.includes(e.key) || keys.ARROWRIGHT.includes(e.key)) {
+        e.preventDefault();
+        if (activeElemIndex >= 0 && activeElemIndex < this.elems.length - 1) {
+          this.elems[activeElemIndex + 1].focus();
+        } else {
+          this.elems[0].focus();
+        }
+      }
+      if (keys.ARROWUP.includes(e.key) || keys.ARROWLEFT.includes(e.key)) {
+        e.preventDefault();
+        if (activeElemIndex >= 1) {
+          this.elems[activeElemIndex - 1].focus();
+        } else {
+          this.elems[this.elems.length - 1].focus();
+        }
+      }
+      if (keys.TAB.includes(e.key)) {
+        this.destroy();
+      }
+    }
+  }]);
+}();
+
+var defaultConfig = {
+  tabSelector: '[role="tab"]'
+};
+var Tabs$1 = /*#__PURE__*/function () {
+  function Tabs(element, config) {
+    _classCallCheck(this, Tabs);
+    this.isActive = function (el) {
+      return el ? !el.hasAttribute("hidden") : false;
+    };
+    this.isSelected = function (el) {
+      return el.getAttribute("aria-selected") === "true";
+    };
+    this.element = element;
+    this.config = Object.assign(Object.assign({}, defaultConfig), config);
+    this.tabs = [];
+    this.tabPanels = [];
+    this.activeTabIndex = null;
+    this.rovingTabindex = null;
+    this.handleClick = this.handleClick.bind(this);
+    this.handleTabFocus = this.handleTabFocus.bind(this);
+    this.element.ODS_Tabs = this;
+    this.init();
+    return this;
+  }
+  return _createClass(Tabs, [{
+    key: "init",
+    value: function init() {
+      var _this = this;
+      this.tabs = Array.from(this.element.querySelectorAll(this.config.tabSelector));
+      this.tabs.map(function (tab, index) {
+        var controlId = tab.getAttribute("aria-controls");
+        _this.tabPanels.push(controlId ? document.getElementById(controlId) : null);
+        tab.addEventListener("click", _this.handleClick);
+        tab.addEventListener("focus", _this.handleTabFocus);
+        if (_this.isSelected(tab)) {
+          _this.activeTabIndex = index;
+        }
+        return tab;
+      });
+      if (!this.rovingTabindex) {
+        this.rovingTabindex = new RovingTabindex(this.tabs, {
+          direction: "any"
+        });
+      } else {
+        this.rovingTabindex.update(this.tabs);
+      }
+      if (this.activeTabIndex !== null) {
+        this.toggleTabPanel(this.tabPanels[this.activeTabIndex], "on");
+      } else if (this.tabs.length > 0) {
+        this.activateNthTab(0);
+      }
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this2 = this;
+      this.tabs.map(function (tab) {
+        tab.removeEventListener("click", _this2.handleClick);
+        tab.removeEventListener("focus", _this2.handleTabFocus);
+        return tab;
+      });
+      this.tabs = [];
+      this.tabPanels = [];
+      if (this.rovingTabindex) {
+        this.rovingTabindex.destroy();
+      }
+      this.element.ODS_Tabs = null;
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      this.destroy();
+      this.init();
+    }
+  }, {
+    key: "handleClick",
+    value: function handleClick(e) {
+      var _this3 = this;
+      var clickedTab = e.currentTarget;
+      if (clickedTab.hasAttribute("aria-disabled")) {
+        e.preventDefault();
+        return;
+      }
+      this.tabs.map(function (tab, i) {
+        if (tab === clickedTab) {
+          _this3.activeTabIndex = i;
+          return _this3.toggleTab(tab, "on");
+        }
+        return _this3.toggleTab(tab, "off");
+      });
+      this.tabPanels.map(function (tabPanel) {
+        if (tabPanel && tabPanel.getAttribute("id") === clickedTab.getAttribute("aria-controls")) {
+          return _this3.toggleTabPanel(tabPanel, "on");
+        }
+        return _this3.toggleTabPanel(tabPanel, "off");
+      });
+    }
+  }, {
+    key: "toggleTab",
+    value: function toggleTab(el, state) {
+      var isActive = this.isSelected(el);
+      if (state === "on" && !isActive) {
+        el.setAttribute("aria-selected", "true");
+        el.setAttribute("tabindex", "0");
+      }
+      if (state === "off" && isActive) {
+        el.setAttribute("aria-selected", "false");
+        el.setAttribute("tabindex", "-1");
+      }
+    }
+  }, {
+    key: "toggleTabPanel",
+    value: function toggleTabPanel(el, state) {
+      if (!el) return;
+      var isActive = this.isActive(el);
+      if (state === "on" && !isActive) {
+        el.removeAttribute("hidden");
+      }
+      if (state === "off" && isActive) {
+        el.setAttribute("hidden", "");
+      }
+    }
+  }, {
+    key: "activateNthTab",
+    value: function activateNthTab(index) {
+      var _this4 = this;
+      this.tabs.map(function (tab, i) {
+        if (i === index) {
+          _this4.activeTabIndex = i;
+          return _this4.toggleTab(tab, "on");
+        }
+        return _this4.toggleTab(tab, "off");
+      });
+      this.tabPanels.map(function (tabPanel, i) {
+        if (i === index) {
+          return _this4.toggleTabPanel(tabPanel, "on");
+        }
+        return _this4.toggleTabPanel(tabPanel, "off");
+      });
+    }
+  }, {
+    key: "handleTabFocus",
+    value: function handleTabFocus() {
+      if (this.rovingTabindex && !this.rovingTabindex.isActive) {
+        this.rovingTabindex.init();
+      }
+    }
+  }], [{
+    key: "getInstance",
+    value: function getInstance(el) {
+      return el && el.ODS_Tabs ? el.ODS_Tabs : null;
+    }
+  }]);
+}();
+
+var Tabs = function Tabs(_a) {
+  var _a$activeTabIndex = _a.activeTabIndex,
+    activeTabIndex = _a$activeTabIndex === void 0 ? 0 : _a$activeTabIndex,
+    className = _a.className,
+    classesTabNav = _a.classesTabNav,
+    _a$colour = _a.colour,
+    colour = _a$colour === void 0 ? "default" : _a$colour,
+    isFullWidth = _a.isFullWidth,
+    isLink = _a.isLink,
+    hasEqualTabWidth = _a.hasEqualTabWidth,
+    _a$variant = _a.variant,
+    variant = _a$variant === void 0 ? "standard" : _a$variant,
+    children = _a.children,
+    other = __rest(_a, ["activeTabIndex", "className", "classesTabNav", "colour", "isFullWidth", "isLink", "hasEqualTabWidth", "variant", "children"]);
+  var CLASS_TABNAV = "tab-list";
+  var tabNavClasses = cx(CLASS_TABNAV, _defineProperty({}, "".concat(CLASS_TABNAV, "--equal"), hasEqualTabWidth), _defineProperty({}, "".concat(CLASS_TABNAV, "--fullwidth"), isFullWidth), _defineProperty({}, "".concat(CLASS_TABNAV, "--inverse"), colour === "inverse"), _defineProperty({}, "".concat(CLASS_TABNAV, "--light"), variant === "light"), classesTabNav, className);
+  var _useStatic = useStatic(Tabs$1),
+    _useStatic2 = _slicedToArray(_useStatic, 1),
+    tabListRef = _useStatic2[0];
+  function getTabs() {
+    return children.map(function (tabPanel, i) {
+      var isActive = i === activeTabIndex;
+      var _tabPanel$props = tabPanel.props,
+        renderTab = _tabPanel$props.renderTab,
+        id = _tabPanel$props.id,
+        isDisabled = _tabPanel$props.isDisabled,
+        tab = _tabPanel$props.tab,
+        href = _tabPanel$props.href;
+      if (!renderTab) {
+        return /*#__PURE__*/React.createElement(Tab, {
+          key: id,
+          controls: !href ? id : "",
+          href: href,
+          isDisabled: isDisabled,
+          isActive: isActive
+        }, tab);
+      }
+      var renderedTab = renderTab(tabPanel.props);
+      return /*#__PURE__*/React.cloneElement(renderedTab, {
+        key: id,
+        isActive: isActive
+      });
+    });
+  }
+  function getPanels() {
+    return children.map(function (tabPanel, i) {
+      var isActive = i === activeTabIndex;
+      var id = tabPanel.props.id;
+      return /*#__PURE__*/React.cloneElement(tabPanel, {
+        key: id,
+        isActive: isActive,
+        tab: undefined
+      });
+    });
+  }
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+    children: [/*#__PURE__*/jsxRuntimeExports.jsxs("ul", _objectSpread2(_objectSpread2({
+      className: tabNavClasses,
+      role: isLink ? "navigation" : "tablist",
+      ref: tabListRef,
+      "data-tabs": isLink ? undefined : "true"
+    }, other), {}, {
+      children: [getTabs(), isFullWidth && /*#__PURE__*/jsxRuntimeExports.jsx("li", {
+        role: "presentation",
+        className: "tab-list__hr"
+      })]
+    })), !isLink ? getPanels() : null]
+  });
+};
+Tabs.displayName = "Tabs";
+
+var TabPanel = function TabPanel(_a) {
+  var children = _a.children,
+    isActive = _a.isActive,
+    id = _a.id,
+    href = _a.href,
+    other = __rest(_a, ["children", "isActive", "id", "href"]);
+  var currentId = id || generateId();
+  return /*#__PURE__*/jsxRuntimeExports.jsx("div", _objectSpread2(_objectSpread2({
+    id: currentId,
+    role: href ? "" : "tabpanel",
+    tabIndex: 0,
+    hidden: !isActive
+  }, other), {}, {
+    children: children
+  }));
+};
+TabPanel.displayName = "TabPanel";
 
-export { Badge };
+export { Alert, Badge, Button, ButtonFill, ButtonGhost, ButtonPrimary, Buttons, Icon, IconButton, Modal, ModalBody, ModalCloseButton, ModalTitle, Section, Tab, TabPanel, Tabs };
 //# sourceMappingURL=index.js.map