@haiilo/catalyst 0.1.1 → 0.2.0

package/dist/esm/cat-alert_7.entry.js

@@ -0,0 +1,3105 @@
+import { r as registerInstance, h, c as createEvent, C as CatIconRegistry, H as Host } from './cat-icon-registry-d877de13.js';
+
+const catAlertCss = ":host{display:block;margin-bottom:1rem}:host([hidden]){display:none}.cat-alert{font:inherit;color:rgb(var(--text));background-color:rgba(var(--bg), 0.1);box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);border-radius:0.25rem;padding:0.75rem 1rem;width:100%}::slotted(:last-child){margin-bottom:0 !important}.cat-alert-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.cat-alert-secondary{--bg:105, 118, 135;--text:0, 0, 0;--border:105, 118, 135}.cat-alert-success{--bg:0, 132, 88;--text:0, 132, 88;--border:0, 132, 88}.cat-alert-warning{--bg:255, 206, 128;--text:159, 97, 0;--border:159, 97, 0}.cat-alert-danger{--bg:217, 52, 13;--text:217, 52, 13;--border:217, 52, 13}";
+
+let CatAlert = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * The color palette of the alert.
+     */
+    this.color = 'primary';
+  }
+  render() {
+    return (h("div", { part: "alert", class: {
+        'cat-alert': true,
+        [`cat-alert-${this.color}`]: Boolean(this.color)
+      } }, h("slot", null)));
+  }
+};
+CatAlert.style = catAlertCss;
+
+const catBadgeCss = ":host{display:inline-flex;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.cat-badge{font:inherit;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;width:100%;box-sizing:border-box;line-height:1;white-space:nowrap}.cat-badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-badge-round{border-radius:10rem}.cat-badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.cat-badge-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.cat-badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.cat-badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.cat-badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.cat-badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.cat-badge-xs{height:0.75rem;min-width:0.75rem;font-size:0.75rem;padding:0 0.1875rem}.cat-badge-s{height:1rem;min-width:1rem;font-size:0.75rem;padding:0 0.25rem}.cat-badge-m{height:1.25rem;min-width:1.25rem;font-size:0.75rem;padding:0 0.3125rem}.cat-badge-l{height:1.5rem;min-width:1.5rem;font-size:0.875rem;padding:0 0.375rem}.cat-badge-xl{height:1.75rem;min-width:1.75rem;font-size:0.9375rem;padding:0 0.4375rem}.cat-badge-pulse.cat-badge-filled{animation:1.5s ease 0s infinite normal none running pulse}.cat-badge-pulse.cat-badge-outlined{animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0px 0px 0px 0.5rem}100%{box-shadow:transparent 0px 0px 0px 0px}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--border), 0.2)}70%{box-shadow:transparent 0px 0px 0px 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0px 0px 0px 0px, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
+
+let CatBadge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * The rendering style of the badge.
+     */
+    this.variant = 'filled';
+    /**
+     * The color palette of the badge.
+     */
+    this.color = 'primary';
+    /**
+     * The size of the badge.
+     */
+    this.size = 'm';
+    /**
+     * Use round badge edges.
+     */
+    this.round = false;
+    /**
+     * Draw attention to the badge with a subtle animation.
+     */
+    this.pulse = false;
+  }
+  render() {
+    return (h("span", { part: "badge", class: {
+        'cat-badge': true,
+        'cat-badge-round': this.round,
+        'cat-badge-pulse': this.pulse,
+        [`cat-badge-${this.variant}`]: Boolean(this.variant),
+        [`cat-badge-${this.color}`]: Boolean(this.color),
+        [`cat-badge-${this.size}`]: Boolean(this.size)
+      } }, h("slot", null)));
+  }
+};
+CatBadge.style = catBadgeCss;
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+var loglevel = createCommonjsModule(function (module) {
+/*
+* loglevel - https://github.com/pimterry/loglevel
+*
+* Copyright (c) 2013 Tim Perry
+* Licensed under the MIT license.
+*/
+(function (root, definition) {
+    if (module.exports) {
+        module.exports = definition();
+    } else {
+        root.log = definition();
+    }
+}(commonjsGlobal, function () {
+
+    // Slightly dubious tricks to cut down minimized file size
+    var noop = function() {};
+    var undefinedType = "undefined";
+    var isIE = (typeof window !== undefinedType) && (typeof window.navigator !== undefinedType) && (
+        /Trident\/|MSIE /.test(window.navigator.userAgent)
+    );
+
+    var logMethods = [
+        "trace",
+        "debug",
+        "info",
+        "warn",
+        "error"
+    ];
+
+    // Cross-browser bind equivalent that works at least back to IE6
+    function bindMethod(obj, methodName) {
+        var method = obj[methodName];
+        if (typeof method.bind === 'function') {
+            return method.bind(obj);
+        } else {
+            try {
+                return Function.prototype.bind.call(method, obj);
+            } catch (e) {
+                // Missing bind shim or IE8 + Modernizr, fallback to wrapping
+                return function() {
+                    return Function.prototype.apply.apply(method, [obj, arguments]);
+                };
+            }
+        }
+    }
+
+    // Trace() doesn't print the message in IE, so for that case we need to wrap it
+    function traceForIE() {
+        if (console.log) {
+            if (console.log.apply) {
+                console.log.apply(console, arguments);
+            } else {
+                // In old IE, native console methods themselves don't have apply().
+                Function.prototype.apply.apply(console.log, [console, arguments]);
+            }
+        }
+        if (console.trace) console.trace();
+    }
+
+    // Build the best logging method possible for this env
+    // Wherever possible we want to bind, not wrap, to preserve stack traces
+    function realMethod(methodName) {
+        if (methodName === 'debug') {
+            methodName = 'log';
+        }
+
+        if (typeof console === undefinedType) {
+            return false; // No method possible, for now - fixed later by enableLoggingWhenConsoleArrives
+        } else if (methodName === 'trace' && isIE) {
+            return traceForIE;
+        } else if (console[methodName] !== undefined) {
+            return bindMethod(console, methodName);
+        } else if (console.log !== undefined) {
+            return bindMethod(console, 'log');
+        } else {
+            return noop;
+        }
+    }
+
+    // These private functions always need `this` to be set properly
+
+    function replaceLoggingMethods(level, loggerName) {
+        /*jshint validthis:true */
+        for (var i = 0; i < logMethods.length; i++) {
+            var methodName = logMethods[i];
+            this[methodName] = (i < level) ?
+                noop :
+                this.methodFactory(methodName, level, loggerName);
+        }
+
+        // Define log.log as an alias for log.debug
+        this.log = this.debug;
+    }
+
+    // In old IE versions, the console isn't present until you first open it.
+    // We build realMethod() replacements here that regenerate logging methods
+    function enableLoggingWhenConsoleArrives(methodName, level, loggerName) {
+        return function () {
+            if (typeof console !== undefinedType) {
+                replaceLoggingMethods.call(this, level, loggerName);
+                this[methodName].apply(this, arguments);
+            }
+        };
+    }
+
+    // By default, we use closely bound real methods wherever possible, and
+    // otherwise we wait for a console to appear, and then try again.
+    function defaultMethodFactory(methodName, level, loggerName) {
+        /*jshint validthis:true */
+        return realMethod(methodName) ||
+               enableLoggingWhenConsoleArrives.apply(this, arguments);
+    }
+
+    function Logger(name, defaultLevel, factory) {
+      var self = this;
+      var currentLevel;
+      defaultLevel = defaultLevel == null ? "WARN" : defaultLevel;
+
+      var storageKey = "loglevel";
+      if (typeof name === "string") {
+        storageKey += ":" + name;
+      } else if (typeof name === "symbol") {
+        storageKey = undefined;
+      }
+
+      function persistLevelIfPossible(levelNum) {
+          var levelName = (logMethods[levelNum] || 'silent').toUpperCase();
+
+          if (typeof window === undefinedType || !storageKey) return;
+
+          // Use localStorage if available
+          try {
+              window.localStorage[storageKey] = levelName;
+              return;
+          } catch (ignore) {}
+
+          // Use session cookie as fallback
+          try {
+              window.document.cookie =
+                encodeURIComponent(storageKey) + "=" + levelName + ";";
+          } catch (ignore) {}
+      }
+
+      function getPersistedLevel() {
+          var storedLevel;
+
+          if (typeof window === undefinedType || !storageKey) return;
+
+          try {
+              storedLevel = window.localStorage[storageKey];
+          } catch (ignore) {}
+
+          // Fallback to cookies if local storage gives us nothing
+          if (typeof storedLevel === undefinedType) {
+              try {
+                  var cookie = window.document.cookie;
+                  var location = cookie.indexOf(
+                      encodeURIComponent(storageKey) + "=");
+                  if (location !== -1) {
+                      storedLevel = /^([^;]+)/.exec(cookie.slice(location))[1];
+                  }
+              } catch (ignore) {}
+          }
+
+          // If the stored level is not valid, treat it as if nothing was stored.
+          if (self.levels[storedLevel] === undefined) {
+              storedLevel = undefined;
+          }
+
+          return storedLevel;
+      }
+
+      function clearPersistedLevel() {
+          if (typeof window === undefinedType || !storageKey) return;
+
+          // Use localStorage if available
+          try {
+              window.localStorage.removeItem(storageKey);
+              return;
+          } catch (ignore) {}
+
+          // Use session cookie as fallback
+          try {
+              window.document.cookie =
+                encodeURIComponent(storageKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+          } catch (ignore) {}
+      }
+
+      /*
+       *
+       * Public logger API - see https://github.com/pimterry/loglevel for details
+       *
+       */
+
+      self.name = name;
+
+      self.levels = { "TRACE": 0, "DEBUG": 1, "INFO": 2, "WARN": 3,
+          "ERROR": 4, "SILENT": 5};
+
+      self.methodFactory = factory || defaultMethodFactory;
+
+      self.getLevel = function () {
+          return currentLevel;
+      };
+
+      self.setLevel = function (level, persist) {
+          if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) {
+              level = self.levels[level.toUpperCase()];
+          }
+          if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
+              currentLevel = level;
+              if (persist !== false) {  // defaults to true
+                  persistLevelIfPossible(level);
+              }
+              replaceLoggingMethods.call(self, level, name);
+              if (typeof console === undefinedType && level < self.levels.SILENT) {
+                  return "No console available for logging";
+              }
+          } else {
+              throw "log.setLevel() called with invalid level: " + level;
+          }
+      };
+
+      self.setDefaultLevel = function (level) {
+          defaultLevel = level;
+          if (!getPersistedLevel()) {
+              self.setLevel(level, false);
+          }
+      };
+
+      self.resetLevel = function () {
+          self.setLevel(defaultLevel, false);
+          clearPersistedLevel();
+      };
+
+      self.enableAll = function(persist) {
+          self.setLevel(self.levels.TRACE, persist);
+      };
+
+      self.disableAll = function(persist) {
+          self.setLevel(self.levels.SILENT, persist);
+      };
+
+      // Initialize with the right level
+      var initialLevel = getPersistedLevel();
+      if (initialLevel == null) {
+          initialLevel = defaultLevel;
+      }
+      self.setLevel(initialLevel, false);
+    }
+
+    /*
+     *
+     * Top-level API
+     *
+     */
+
+    var defaultLogger = new Logger();
+
+    var _loggersByName = {};
+    defaultLogger.getLogger = function getLogger(name) {
+        if ((typeof name !== "symbol" && typeof name !== "string") || name === "") {
+          throw new TypeError("You must supply a name when creating a logger.");
+        }
+
+        var logger = _loggersByName[name];
+        if (!logger) {
+          logger = _loggersByName[name] = new Logger(
+            name, defaultLogger.getLevel(), defaultLogger.methodFactory);
+        }
+        return logger;
+    };
+
+    // Grab the current global log variable in case of overwrite
+    var _log = (typeof window !== undefinedType) ? window.log : undefined;
+    defaultLogger.noConflict = function() {
+        if (typeof window !== undefinedType &&
+               window.log === defaultLogger) {
+            window.log = _log;
+        }
+
+        return defaultLogger;
+    };
+
+    defaultLogger.getLoggers = function getLoggers() {
+        return _loggersByName;
+    };
+
+    // ES6 default export, for compatibility
+    defaultLogger['default'] = defaultLogger;
+
+    return defaultLogger;
+}));
+});
+
+const _breakpoints = ['xs', 's', 'm', 'l', 'xl'];
+const Breakpoints = {
+  xs: '(max-width: 539.98px)',
+  s: '(max-width: 767.98px)',
+  m: '(max-width: 991.98px)',
+  l: '(max-width: 1199.98px)',
+  xl: '(max-width: 1399.98px)'
+};
+function isBreakpoint(value) {
+  return typeof value === 'string' && _breakpoints.includes(value);
+}
+
+// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts
+// Whether the current platform supports the V8 Break Iterator. The V8 check
+// is necessary to detect all Blink based browsers.
+let hasV8BreakIterator;
+// We need a try/catch around the reference to `Intl`, because accessing it in some cases can
+// cause IE to throw. These cases are tied to particular versions of Windows and can happen if
+// the consumer is providing a polyfilled `Map`. See:
+// https://github.com/Microsoft/ChakraCore/issues/3189
+// https://github.com/angular/components/issues/15687
+try {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  hasV8BreakIterator = typeof Intl !== 'undefined' && Intl.v8BreakIterator;
+}
+catch (_a) {
+  hasV8BreakIterator = false;
+}
+class Platform {
+  constructor() {
+    /** Whether the current browser is Microsoft Edge. */
+    this.EDGE = /(edge)/i.test(navigator.userAgent);
+    /** Whether the current rendering engine is Microsoft Trident. */
+    this.TRIDENT = /(msie|trident)/i.test(navigator.userAgent);
+    // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.
+    /** Whether the current rendering engine is Blink. */
+    this.BLINK = 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    !!(window.chrome || hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;
+    // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to
+    // ensure that Webkit runs standalone and is not used as another engine's base.
+    /** Whether the current rendering engine is WebKit. */
+    this.WEBKIT = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;
+    /** Whether the current platform is Apple iOS. */
+    this.IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);
+    // It's difficult to detect the plain Gecko engine, because most of the browsers identify
+    // them self as Gecko-like browsers and modify the userAgent's according to that.
+    // Since we only cover one explicit Firefox case, we can simply check for Firefox
+    // instead of having an unstable check for Gecko.
+    /** Whether the current browser is Firefox. */
+    this.FIREFOX = /(firefox|minefield)/i.test(navigator.userAgent);
+    /** Whether the current platform is Android. */
+    // Trident on mobile adds the android platform to the userAgent to trick detections.
+    this.ANDROID = /android/i.test(navigator.userAgent) && !this.TRIDENT;
+    // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake
+    // this and just place the Safari keyword in the userAgent. To be more safe about Safari every
+    // Safari browser should also use Webkit as its layout engine.
+    /** Whether the current browser is Safari. */
+    this.SAFARI = /safari/i.test(navigator.userAgent) && this.WEBKIT;
+  }
+}
+
+// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts
+/** Global registry for all dynamically-created, injected media queries. */
+const mediaQueriesForWebkitCompatibility = new Set();
+/** Style tag that holds all of the dynamically-created media queries. */
+let mediaQueryStyleNode;
+/** A utility for calling matchMedia queries. */
+class MediaMatcher {
+  constructor() {
+    this._platform = new Platform();
+    this._matchMedia = window.matchMedia.bind(window);
+  }
+  /**
+   * Evaluates the given media query and returns the native MediaQueryList from which results
+   * can be retrieved.
+   * Confirms the layout engine will trigger for the selector query provided and returns the
+   * MediaQueryList for the query provided.
+   */
+  matchMedia(query) {
+    if (this._platform.WEBKIT || this._platform.BLINK) {
+      createEmptyStyleRule(query);
+    }
+    return this._matchMedia(query);
+  }
+}
+/**
+ * Creates an empty stylesheet that is used to work around browser inconsistencies related to
+ * `matchMedia`. At the time of writing, it handles the following cases:
+ * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`
+ * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.
+ * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules
+ * inside the `@media` match existing elements on the page. We work around it by having one rule
+ * targeting the `body`. See https://github.com/angular/components/issues/23546.
+ */
+function createEmptyStyleRule(query) {
+  if (mediaQueriesForWebkitCompatibility.has(query)) {
+    return;
+  }
+  try {
+    if (!mediaQueryStyleNode) {
+      mediaQueryStyleNode = document.createElement('style');
+      mediaQueryStyleNode.setAttribute('type', 'text/css');
+      document.head.appendChild(mediaQueryStyleNode);
+    }
+    if (mediaQueryStyleNode.sheet) {
+      mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);
+      mediaQueriesForWebkitCompatibility.add(query);
+    }
+  }
+  catch (e) {
+    loglevel.error(e);
+  }
+}
+
+const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid #0071ff;outline-offset:1px}.cat-button-content{flex:1 1 auto;text-align:center}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:underline}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text:174, 42, 10}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1rem;padding-right:1rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1rem;padding-right:1rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1rem;padding-right:1rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1rem;padding-right:1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1rem;padding-right:1rem}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host-context(nav) .cat-button-content{text-align:left}";
+
+let CatButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.catClick = createEvent(this, "catClick", 7);
+    this.catFocus = createEvent(this, "catFocus", 7);
+    this.catBlur = createEvent(this, "catBlur", 7);
+    this._iconOnly = true;
+    /**
+     * The rendering style of the button.
+     */
+    this.variant = 'outlined';
+    /**
+     * The color palette of the button.
+     */
+    this.color = 'secondary';
+    /**
+     * The size of the button.
+     */
+    this.size = 'm';
+    /**
+     * Specifies that the button should be disabled. A disabled button is unusable
+     * and un-clickable. Corresponds with the native HTML disabled attribute.
+     */
+    this.disabled = false;
+    /**
+     * Displays the button in a loading state with a spinner. Just like a disabled
+     * button, an inactive button is unusable and un-clickable. However, it
+     * retains the current focus state.
+     */
+    this.loading = false;
+    /**
+     * Allows the button to submit a form.
+     */
+    this.submit = false;
+    /**
+     * Ellipse overflowing button content.
+     */
+    this.ellipsed = true;
+    /**
+     * Use round button edges.
+     */
+    this.round = false;
+    /**
+     * Hide the actual button content and only display the icon.
+     */
+    this.iconOnly = false;
+    /**
+     * Display the icon as a suffix.
+     */
+    this.iconSuffix = false;
+  }
+  onIconOnlyChanged(value) {
+    var _a, _b;
+    // teardown
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    (_a = this.mediaQueryList) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.mediaQueryListener);
+    this.mediaQueryList = undefined;
+    this.mediaQueryListener = undefined;
+    // setup
+    if (isBreakpoint(value)) {
+      (_b = this.mediaMatcher) !== null && _b !== void 0 ? _b : (this.mediaMatcher = new MediaMatcher());
+      this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);
+      this.mediaQueryListener = (event) => (this._iconOnly = event.matches);
+      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);
+      this._iconOnly = this.mediaQueryList.matches;
+    }
+    else {
+      this._iconOnly = value;
+    }
+  }
+  componentWillLoad() {
+    this.onIconOnlyChanged(this.iconOnly);
+  }
+  componentWillRender() {
+    if (this.isIconButton && !this.a11yLabel) {
+      loglevel.warn('[A11y] Missing ARIA label on icon button', this);
+    }
+  }
+  haltDisabledEvents(event) {
+    if (this.disabled || this.loading) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+  /**
+   * Sets focus on the button. Use this method instead of `button.focus()`.
+   *
+   * @param options An optional object providing options to control aspects of
+   * the focusing process.
+   */
+  async setFocus(options) {
+    this.button.focus(options);
+  }
+  render() {
+    var _a;
+    if (this.url) {
+      return (h("a", { ref: el => (this.button = el), href: this.disabled ? undefined : this.url, target: this.urlTarget, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, id: this.buttonId, part: "button", class: {
+          'cat-button': true,
+          'cat-button-icon': this.isIconButton,
+          'cat-button-round': this.round,
+          'cat-button-loading': this.loading,
+          'cat-button-disabled': this.disabled,
+          'cat-button-ellipsed': this.ellipsed && !this.isIconButton,
+          [`cat-button-${this.variant}`]: Boolean(this.variant),
+          [`cat-button-${this.color}`]: Boolean(this.color),
+          [`cat-button-${this.size}`]: Boolean(this.size)
+        }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
+    }
+    else {
+      return (h("button", { ref: el => (this.button = el), type: this.submit ? 'submit' : 'button', name: this.name, value: this.value, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, id: this.buttonId, part: "button", class: {
+          'cat-button': true,
+          'cat-button-icon': this.isIconButton,
+          'cat-button-round': (_a = this.round) !== null && _a !== void 0 ? _a : this.isIconButton,
+          'cat-button-loading': this.loading,
+          'cat-button-disabled': this.disabled,
+          'cat-button-ellipsed': this.ellipsed && !this.isIconButton,
+          [`cat-button-${this.variant}`]: Boolean(this.variant),
+          [`cat-button-${this.color}`]: Boolean(this.color),
+          [`cat-button-${this.size}`]: Boolean(this.size)
+        }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
+    }
+  }
+  get iconSize() {
+    switch (this.size) {
+      case 'xs':
+        return 's';
+      default:
+        return 'l';
+    }
+  }
+  get spinnerSize() {
+    switch (this.size) {
+      case 'xs':
+        return 'xs';
+      default:
+        return 'm';
+    }
+  }
+  get isIconButton() {
+    return Boolean(this.icon) && this._iconOnly;
+  }
+  get hasPrefixIcon() {
+    return Boolean(this.icon) && !this._iconOnly && !this.iconSuffix;
+  }
+  get hasSuffixIcon() {
+    return Boolean(this.icon) && !this._iconOnly && this.iconSuffix;
+  }
+  get content() {
+    return [
+      this.hasPrefixIcon ? (h("cat-icon", { icon: this.icon, size: this.iconSize, class: "cat-button-prefix", part: "prefix" })) : null,
+      this.isIconButton ? (h("cat-icon", { icon: this.icon, size: this.iconSize })) : (h("span", { class: "cat-button-content", part: "content" }, h("slot", null))),
+      this.hasSuffixIcon ? (h("cat-icon", { icon: this.icon, size: this.iconSize, class: "cat-button-suffix", part: "suffix" })) : null,
+      this.loading ? h("cat-spinner", { size: this.spinnerSize }) : null
+    ];
+  }
+  onClick(event) {
+    this.catClick.emit(event);
+  }
+  onFocus(event) {
+    this.catFocus.emit(event);
+  }
+  onBlur(event) {
+    this.catBlur.emit(event);
+  }
+  static get watchers() { return {
+    "iconOnly": ["onIconOnlyChanged"]
+  }; }
+};
+CatButton.style = catButtonCss;
+
+const catIconCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}span{display:inline-flex}svg{fill:currentColor;stroke:none;transform-origin:center center;width:1em;height:1em}.cat-icon-xs svg{font-size:0.75rem}.cat-icon-s svg{font-size:1rem}.cat-icon-m svg{font-size:1.25rem}.cat-icon-l svg{font-size:1.5rem}.cat-icon-xl svg{font-size:1.75rem}";
+
+let CatIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.iconRegistry = CatIconRegistry.getInstance();
+    /**
+     * The name of the icon.
+     */
+    this.icon = '';
+    /**
+     * The size of the icon.
+     */
+    this.size = 'm';
+  }
+  render() {
+    return (h("span", { innerHTML: this.iconRegistry.getIcon(this.icon), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
+        [`cat-icon-${this.size}`]: this.size !== 'inline'
+      } }));
+  }
+};
+CatIcon.style = catIconCss;
+
+function getSide(placement) {
+  return placement.split('-')[0];
+}
+
+function getAlignment(placement) {
+  return placement.split('-')[1];
+}
+
+function getMainAxisFromPlacement(placement) {
+  return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y';
+}
+
+function getLengthFromAxis(axis) {
+  return axis === 'y' ? 'height' : 'width';
+}
+
+function computeCoordsFromPlacement(_ref, placement, rtl) {
+  let {
+    reference,
+    floating
+  } = _ref;
+  const commonX = reference.x + reference.width / 2 - floating.width / 2;
+  const commonY = reference.y + reference.height / 2 - floating.height / 2;
+  const mainAxis = getMainAxisFromPlacement(placement);
+  const length = getLengthFromAxis(mainAxis);
+  const commonAlign = reference[length] / 2 - floating[length] / 2;
+  const side = getSide(placement);
+  const isVertical = mainAxis === 'x';
+  let coords;
+
+  switch (side) {
+    case 'top':
+      coords = {
+        x: commonX,
+        y: reference.y - floating.height
+      };
+      break;
+
+    case 'bottom':
+      coords = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+
+    case 'right':
+      coords = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+
+    case 'left':
+      coords = {
+        x: reference.x - floating.width,
+        y: commonY
+      };
+      break;
+
+    default:
+      coords = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+
+  switch (getAlignment(placement)) {
+    case 'start':
+      coords[mainAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+
+    case 'end':
+      coords[mainAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+  }
+
+  return coords;
+}
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a reference element when it is given a certain positioning strategy.
+ *
+ * This export does not have any `platform` interface logic. You will need to
+ * write one for the platform you are using Floating UI with.
+ */
+
+const computePosition$1 = async (reference, floating, config) => {
+  const {
+    placement = 'bottom',
+    strategy = 'absolute',
+    middleware = [],
+    platform
+  } = config;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
+
+  let rects = await platform.getElementRects({
+    reference,
+    floating,
+    strategy
+  });
+  let {
+    x,
+    y
+  } = computeCoordsFromPlacement(rects, placement, rtl);
+  let statefulPlacement = placement;
+  let middlewareData = {};
+
+  for (let i = 0; i < middleware.length; i++) {
+
+    const {
+      name,
+      fn
+    } = middleware[i];
+    const {
+      x: nextX,
+      y: nextY,
+      data,
+      reset
+    } = await fn({
+      x,
+      y,
+      initialPlacement: placement,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData,
+      rects,
+      platform,
+      elements: {
+        reference,
+        floating
+      }
+    });
+    x = nextX != null ? nextX : x;
+    y = nextY != null ? nextY : y;
+    middlewareData = { ...middlewareData,
+      [name]: { ...middlewareData[name],
+        ...data
+      }
+    };
+
+    if (reset) {
+      if (typeof reset === 'object') {
+        if (reset.placement) {
+          statefulPlacement = reset.placement;
+        }
+
+        if (reset.rects) {
+          rects = reset.rects === true ? await platform.getElementRects({
+            reference,
+            floating,
+            strategy
+          }) : reset.rects;
+        }
+
+        ({
+          x,
+          y
+        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+      }
+
+      i = -1;
+      continue;
+    }
+  }
+
+  return {
+    x,
+    y,
+    placement: statefulPlacement,
+    strategy,
+    middlewareData
+  };
+};
+
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+
+function getSideObjectFromPadding(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+
+function rectToClientRect(rect) {
+  return { ...rect,
+    top: rect.y,
+    left: rect.x,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
+  };
+}
+
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(middlewareArguments, options) {
+  var _await$platform$isEle;
+
+  if (options === void 0) {
+    options = {};
+  }
+
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = middlewareArguments;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = options;
+  const paddingObject = getSideObjectFromPadding(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    rect: elementContext === 'floating' ? { ...rects.floating,
+      x,
+      y
+    } : rects.reference,
+    offsetParent: await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)),
+    strategy
+  }) : rects[elementContext]); // positive = overflowing the clipping rect
+  // 0 or negative = within the clipping rect
+
+  return {
+    top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
+    bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
+    left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
+    right: elementClientRect.right - clippingClientRect.right + paddingObject.right
+  };
+}
+
+const hash$1 = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, matched => hash$1[matched]);
+}
+
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+
+  const alignment = getAlignment(placement);
+  const mainAxis = getMainAxisFromPlacement(placement);
+  const length = getLengthFromAxis(mainAxis);
+  let mainAlignmentSide = mainAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
+
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+
+  return {
+    main: mainAlignmentSide,
+    cross: getOppositePlacement(mainAlignmentSide)
+  };
+}
+
+const hash = {
+  start: 'end',
+  end: 'start'
+};
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, matched => hash[matched]);
+}
+
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+
+/**
+ * Changes the placement of the floating element to one that will fit if the
+ * initially specified `placement` does not.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  return {
+    name: 'flip',
+    options,
+
+    async fn(middlewareArguments) {
+      var _middlewareData$flip;
+
+      const {
+        placement,
+        middlewareData,
+        rects,
+        initialPlacement,
+        platform,
+        elements
+      } = middlewareArguments;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true,
+        fallbackPlacements: specifiedFallbackPlacements,
+        fallbackStrategy = 'bestFit',
+        flipAlignment = true,
+        ...detectOverflowOptions
+      } = options;
+      const side = getSide(placement);
+      const isBasePlacement = side === initialPlacement;
+      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+      const placements = [initialPlacement, ...fallbackPlacements];
+      const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
+      const overflows = [];
+      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+
+      if (checkMainAxis) {
+        overflows.push(overflow[side]);
+      }
+
+      if (checkCrossAxis) {
+        const {
+          main,
+          cross
+        } = getAlignmentSides(placement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+        overflows.push(overflow[main], overflow[cross]);
+      }
+
+      overflowsData = [...overflowsData, {
+        placement,
+        overflows
+      }]; // One or more sides is overflowing
+
+      if (!overflows.every(side => side <= 0)) {
+        var _middlewareData$flip$, _middlewareData$flip2;
+
+        const nextIndex = ((_middlewareData$flip$ = (_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) != null ? _middlewareData$flip$ : 0) + 1;
+        const nextPlacement = placements[nextIndex];
+
+        if (nextPlacement) {
+          // Try next placement and re-run the lifecycle
+          return {
+            data: {
+              index: nextIndex,
+              overflows: overflowsData
+            },
+            reset: {
+              placement: nextPlacement
+            }
+          };
+        }
+
+        let resetPlacement = 'bottom';
+
+        switch (fallbackStrategy) {
+          case 'bestFit':
+            {
+              var _overflowsData$slice$;
+
+              const placement = (_overflowsData$slice$ = overflowsData.slice().sort((a, b) => a.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0) - b.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0))[0]) == null ? void 0 : _overflowsData$slice$.placement;
+
+              if (placement) {
+                resetPlacement = placement;
+              }
+
+              break;
+            }
+
+          case 'initialPlacement':
+            resetPlacement = initialPlacement;
+            break;
+        }
+
+        if (placement !== resetPlacement) {
+          return {
+            reset: {
+              placement: resetPlacement
+            }
+          };
+        }
+      }
+
+      return {};
+    }
+
+  };
+};
+
+function convertValueToCoords(placement, rects, value, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getMainAxisFromPlacement(placement) === 'x';
+  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = typeof value === 'function' ? value({ ...rects,
+    placement
+  }) : value;
+  const isNumber = typeof rawValue === 'number'; // eslint-disable-next-line prefer-const
+
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = isNumber ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: 0,
+    crossAxis: 0,
+    alignmentAxis: null,
+    ...rawValue
+  };
+
+  if (alignment && typeof alignmentAxis === 'number') {
+    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
+  }
+
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+/**
+ * Displaces the floating element from its reference element.
+ * @see https://floating-ui.com/docs/offset
+ */
+
+const offset = function (value) {
+  if (value === void 0) {
+    value = 0;
+  }
+
+  return {
+    name: 'offset',
+    options: value,
+
+    async fn(middlewareArguments) {
+      const {
+        x,
+        y,
+        placement,
+        rects,
+        platform,
+        elements
+      } = middlewareArguments;
+      const diffCoords = convertValueToCoords(placement, rects, value, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: diffCoords
+      };
+    }
+
+  };
+};
+
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === '[object Window]';
+}
+function getWindow(node) {
+  if (node == null) {
+    return window;
+  }
+
+  if (!isWindow(node)) {
+    const ownerDocument = node.ownerDocument;
+    return ownerDocument ? ownerDocument.defaultView || window : window;
+  }
+
+  return node;
+}
+
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+
+function getNodeName(node) {
+  return isWindow(node) ? '' : node ? (node.nodeName || '').toLowerCase() : '';
+}
+
+function isHTMLElement(value) {
+  return value instanceof getWindow(value).HTMLElement;
+}
+function isElement(value) {
+  return value instanceof getWindow(value).Element;
+}
+function isNode(value) {
+  return value instanceof getWindow(value).Node;
+}
+function isShadowRoot(node) {
+  const OwnElement = getWindow(node).ShadowRoot;
+  return node instanceof OwnElement || node instanceof ShadowRoot;
+}
+function isOverflowElement(element) {
+  // Firefox wants us to check `-x` and `-y` variations as well
+  const {
+    overflow,
+    overflowX,
+    overflowY
+  } = getComputedStyle$1(element);
+  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
+}
+function isTableElement(element) {
+  return ['table', 'td', 'th'].includes(getNodeName(element));
+}
+function isContainingBlock(element) {
+  // TODO: Try and use feature detection here instead
+  const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
+  const css = getComputedStyle$1(element); // This is non-exhaustive but covers the most common CSS properties that
+  // create a containing block.
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+
+  return css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].includes(css.willChange) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false);
+}
+function isLayoutViewport() {
+  // Not Safari
+  return !/^((?!chrome|android).)*safari/i.test(navigator.userAgent); // Feature detection for this fails in various ways
+  // • Always-visible scrollbar or not
+  // • Width of <html>, etc.
+  // const vV = win.visualViewport;
+  // return vV ? Math.abs(win.innerWidth / vV.scale - vV.width) < 0.5 : true;
+}
+
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+
+  const clientRect = element.getBoundingClientRect();
+  let scaleX = 1;
+  let scaleY = 1;
+
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
+  }
+
+  const win = isElement(element) ? getWindow(element) : window;
+  const addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  const x = (clientRect.left + (addVisualOffsets ? win.visualViewport.offsetLeft : 0)) / scaleX;
+  const y = (clientRect.top + (addVisualOffsets ? win.visualViewport.offsetTop : 0)) / scaleY;
+  const width = clientRect.width / scaleX;
+  const height = clientRect.height / scaleY;
+  return {
+    width,
+    height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x,
+    y
+  };
+}
+
+function getDocumentElement(node) {
+  return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement;
+}
+
+function getNodeScroll(element) {
+  if (isWindow(element)) {
+    return {
+      scrollLeft: element.pageXOffset,
+      scrollTop: element.pageYOffset
+    };
+  }
+
+  return {
+    scrollLeft: element.scrollLeft,
+    scrollTop: element.scrollTop
+  };
+}
+
+function getWindowScrollBarX(element) {
+  // If <html> has a CSS width greater than the viewport, then this will be
+  // incorrect for RTL.
+  return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
+}
+
+function isScaled(element) {
+  const rect = getBoundingClientRect(element);
+  return round(rect.width) !== element.offsetWidth || round(rect.height) !== element.offsetHeight;
+}
+
+function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  const rect = getBoundingClientRect(element, isOffsetParentAnElement && isScaled(offsetParent), strategy === 'fixed');
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const offsets = {
+    x: 0,
+    y: 0
+  };
+
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+
+    if (isHTMLElement(offsetParent)) {
+      const offsetRect = getBoundingClientRect(offsetParent, true);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    } else if (documentElement) {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
+  }
+
+  return {
+    x: rect.left + scroll.scrollLeft - offsets.x,
+    y: rect.top + scroll.scrollTop - offsets.y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+
+  return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
+    // @ts-ignore
+    node.assignedSlot || // step into the shadow DOM of the parent of a slotted node
+    node.parentNode || ( // DOM Element detected
+    isShadowRoot(node) ? node.host : null) || // ShadowRoot detected
+    getDocumentElement(node) // fallback
+
+  );
+}
+
+function getTrueOffsetParent(element) {
+  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
+    return null;
+  }
+
+  return element.offsetParent;
+}
+
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
+  while (isHTMLElement(currentNode) && !['html', 'body'].includes(getNodeName(currentNode))) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else {
+      currentNode = currentNode.parentNode;
+    }
+  }
+
+  return null;
+} // Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+
+
+function getOffsetParent(element) {
+  const window = getWindow(element);
+  let offsetParent = getTrueOffsetParent(element);
+
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
+    offsetParent = getTrueOffsetParent(offsetParent);
+  }
+
+  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
+    return window;
+  }
+
+  return offsetParent || getContainingBlock(element) || window;
+}
+
+function getDimensions(element) {
+  if (isHTMLElement(element)) {
+    return {
+      width: element.offsetWidth,
+      height: element.offsetHeight
+    };
+  }
+
+  const rect = getBoundingClientRect(element);
+  return {
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+  let {
+    rect,
+    offsetParent,
+    strategy
+  } = _ref;
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+
+  if (offsetParent === documentElement) {
+    return rect;
+  }
+
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const offsets = {
+    x: 0,
+    y: 0
+  };
+
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+
+    if (isHTMLElement(offsetParent)) {
+      const offsetRect = getBoundingClientRect(offsetParent, true);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    } // This doesn't appear to be need to be negated.
+    // else if (documentElement) {
+    //   offsets.x = getWindowScrollBarX(documentElement);
+    // }
+
+  }
+
+  return { ...rect,
+    x: rect.x - scroll.scrollLeft + offsets.x,
+    y: rect.y - scroll.scrollTop + offsets.y
+  };
+}
+
+function getViewportRect(element, strategy) {
+  const win = getWindow(element);
+  const html = getDocumentElement(element);
+  const visualViewport = win.visualViewport;
+  let width = html.clientWidth;
+  let height = html.clientHeight;
+  let x = 0;
+  let y = 0;
+
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    const layoutViewport = isLayoutViewport();
+
+    if (layoutViewport || !layoutViewport && strategy === 'fixed') {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable
+
+function getDocumentRect(element) {
+  var _element$ownerDocumen;
+
+  const html = getDocumentElement(element);
+  const scroll = getNodeScroll(element);
+  const body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
+  const width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
+  const height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
+  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+  const y = -scroll.scrollTop;
+
+  if (getComputedStyle$1(body || html).direction === 'rtl') {
+    x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
+  }
+
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+
+  if (['html', 'body', '#document'].includes(getNodeName(parentNode))) {
+    // @ts-ignore assume body is always available
+    return node.ownerDocument.body;
+  }
+
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+
+  return getNearestOverflowAncestor(parentNode);
+}
+
+function getOverflowAncestors(node, list) {
+  var _node$ownerDocument;
+
+  if (list === void 0) {
+    list = [];
+  }
+
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
+  const win = getWindow(scrollableAncestor);
+  const target = isBody ? [win].concat(win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []) : scrollableAncestor;
+  const updatedList = list.concat(target);
+  return isBody ? updatedList : // @ts-ignore: isBody tells us target will be an HTMLElement here
+  updatedList.concat(getOverflowAncestors(getParentNode(target)));
+}
+
+function contains(parent, child) {
+  const rootNode = child.getRootNode == null ? void 0 : child.getRootNode(); // First, attempt with faster native method
+
+  if (parent.contains(child)) {
+    return true;
+  } // then fallback to custom implementation with Shadow DOM support
+  else if (rootNode && isShadowRoot(rootNode)) {
+    let next = child;
+
+    do {
+      // use `===` replace node.isSameNode()
+      if (next && parent === next) {
+        return true;
+      } // @ts-ignore: need a better way to handle this...
+
+
+      next = next.parentNode || next.host;
+    } while (next);
+  }
+
+  return false;
+}
+
+function getInnerBoundingClientRect(element, strategy) {
+  const clientRect = getBoundingClientRect(element, false, strategy === 'fixed');
+  const top = clientRect.top + element.clientTop;
+  const left = clientRect.left + element.clientLeft;
+  return {
+    top,
+    left,
+    x: left,
+    y: top,
+    right: left + element.clientWidth,
+    bottom: top + element.clientHeight,
+    width: element.clientWidth,
+    height: element.clientHeight
+  };
+}
+
+function getClientRectFromClippingAncestor(element, clippingParent, strategy) {
+  if (clippingParent === 'viewport') {
+    return rectToClientRect(getViewportRect(element, strategy));
+  }
+
+  if (isElement(clippingParent)) {
+    return getInnerBoundingClientRect(clippingParent, strategy);
+  }
+
+  return rectToClientRect(getDocumentRect(getDocumentElement(element)));
+} // A "clipping ancestor" is an overflowable container with the characteristic of
+// clipping (or hiding) overflowing elements with a position different from
+// `initial`
+
+
+function getClippingAncestors(element) {
+  const clippingAncestors = getOverflowAncestors(element);
+  const canEscapeClipping = ['absolute', 'fixed'].includes(getComputedStyle$1(element).position);
+  const clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
+
+  if (!isElement(clipperElement)) {
+    return [];
+  } // @ts-ignore isElement check ensures we return Array<Element>
+
+
+  return clippingAncestors.filter(clippingAncestors => isElement(clippingAncestors) && contains(clippingAncestors, clipperElement) && getNodeName(clippingAncestors) !== 'body');
+} // Gets the maximum area that the element is visible in due to any number of
+// clipping ancestors
+
+
+function getClippingRect(_ref) {
+  let {
+    element,
+    boundary,
+    rootBoundary,
+    strategy
+  } = _ref;
+  const mainClippingAncestors = boundary === 'clippingAncestors' ? getClippingAncestors(element) : [].concat(boundary);
+  const clippingAncestors = [...mainClippingAncestors, rootBoundary];
+  const firstClippingAncestor = clippingAncestors[0];
+  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
+    accRect.top = max(rect.top, accRect.top);
+    accRect.right = min(rect.right, accRect.right);
+    accRect.bottom = min(rect.bottom, accRect.bottom);
+    accRect.left = max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+  return {
+    width: clippingRect.right - clippingRect.left,
+    height: clippingRect.bottom - clippingRect.top,
+    x: clippingRect.left,
+    y: clippingRect.top
+  };
+}
+
+const platform = {
+  getClippingRect,
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  isElement,
+  getDimensions,
+  getOffsetParent,
+  getDocumentElement,
+  getElementRects: _ref => {
+    let {
+      reference,
+      floating,
+      strategy
+    } = _ref;
+    return {
+      reference: getRectRelativeToOffsetParent(reference, getOffsetParent(floating), strategy),
+      floating: { ...getDimensions(floating),
+        x: 0,
+        y: 0
+      }
+    };
+  },
+  getClientRects: element => Array.from(element.getClientRects()),
+  isRTL: element => getComputedStyle$1(element).direction === 'rtl'
+};
+
+/**
+ * Automatically updates the position of the floating element when necessary.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  const {
+    ancestorScroll: _ancestorScroll = true,
+    ancestorResize: _ancestorResize = true,
+    elementResize: _elementResize = true,
+    animationFrame = false
+  } = options;
+  let cleanedUp = false;
+  const ancestorScroll = _ancestorScroll && !animationFrame;
+  const ancestorResize = _ancestorResize && !animationFrame;
+  const elementResize = _elementResize && !animationFrame;
+  const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)] : [];
+  ancestors.forEach(ancestor => {
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener('resize', update);
+  });
+  let observer = null;
+
+  if (elementResize) {
+    observer = new ResizeObserver(update);
+    isElement(reference) && observer.observe(reference);
+    observer.observe(floating);
+  }
+
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+
+  if (animationFrame) {
+    frameLoop();
+  }
+
+  function frameLoop() {
+    if (cleanedUp) {
+      return;
+    }
+
+    const nextRefRect = getBoundingClientRect(reference);
+
+    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+      update();
+    }
+
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+
+  return () => {
+    var _observer;
+
+    cleanedUp = true;
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.removeEventListener('scroll', update);
+      ancestorResize && ancestor.removeEventListener('resize', update);
+    });
+    (_observer = observer) == null ? void 0 : _observer.disconnect();
+    observer = null;
+
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a reference element when it is given a certain CSS positioning
+ * strategy.
+ */
+
+const computePosition = (reference, floating, options) => computePosition$1(reference, floating, {
+  platform,
+  ...options
+});
+
+/*!
+* tabbable 5.3.0-beta.1
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]:not(slot)', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
+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) {
+  return element.getRootNode();
+} : function (element) {
+  return element.ownerDocument;
+};
+/**
+ * @param {Element} el container to check in
+ * @param {boolean} includeContainer add container to check
+ * @param {(node: Element) => boolean} filter filter candidates
+ * @returns {Element[]}
+ */
+
+var getCandidates = function getCandidates(el, includeContainer, filter) {
+  var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
+
+  if (includeContainer && matches.call(el, candidateSelector)) {
+    candidates.unshift(el);
+  }
+
+  candidates = candidates.filter(filter);
+  return candidates;
+};
+/**
+ * @callback GetShadowRoot
+ * @param {Element} element to check for shadow root
+ * @returns {ShadowRoot|boolean} ShadowRoot if available or boolean indicating if a shadowRoot is attached but not available.
+ */
+
+/**
+ * @typedef {Object} CandidatesScope
+ * @property {Element} scope contains inner candidates
+ * @property {Element[]} candidates
+ */
+
+/**
+ * @typedef {Object} IterativeOptions
+ * @property {GetShadowRoot|boolean} getShadowRoot true if shadow support is enabled; falsy if not;
+ *  if a function, implies shadow support is enabled and either returns the shadow root of an element
+ *  or a boolean stating if it has an undisclosed shadow root
+ * @property {(node: Element) => boolean} filter filter candidates
+ * @property {boolean} flatten if true then result will flatten any CandidatesScope into the returned list
+ */
+
+/**
+ * @param {Element[]} elements list of element containers to match candidates from
+ * @param {boolean} includeContainer add container list to check
+ * @param {IterativeOptions} options
+ * @returns {Array.<Element|CandidatesScope>}
+ */
+
+
+var getCandidatesIteratively = function getCandidatesIteratively(elements, includeContainer, options) {
+  var candidates = [];
+  var elementsToCheck = Array.from(elements);
+
+  while (elementsToCheck.length) {
+    var element = elementsToCheck.shift();
+
+    if (element.tagName === 'SLOT') {
+      // add shadow dom slot scope (slot itself cannot be focusable)
+      var assigned = element.assignedElements();
+      var content = assigned.length ? assigned : element.children;
+      var nestedCandidates = getCandidatesIteratively(content, true, options);
+
+      if (options.flatten) {
+        candidates.push.apply(candidates, nestedCandidates);
+      } else {
+        candidates.push({
+          scope: element,
+          candidates: nestedCandidates
+        });
+      }
+    } else {
+      // check candidate element
+      var validCandidate = matches.call(element, candidateSelector);
+
+      if (validCandidate && options.filter(element) && (includeContainer || !elements.includes(element))) {
+        candidates.push(element);
+      } // iterate over shadow content if possible
+
+
+      var shadowRoot = element.shadowRoot || // check for an undisclosed shadow
+      typeof options.getShadowRoot === 'function' && options.getShadowRoot(element);
+
+      if (shadowRoot) {
+        // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed
+        //  shadow exists, so look at light dom children as fallback BUT create a scope for any
+        //  child candidates found because they're likely slotted elements (elements that are
+        //  children of the web component element (which has the shadow), in the light dom, but
+        //  slotted somewhere _inside_ the undisclosed shadow) -- the scope is created below,
+        //  _after_ we return from this recursive call
+        var _nestedCandidates = getCandidatesIteratively(shadowRoot === true ? element.children : shadowRoot.children, true, options);
+
+        if (options.flatten) {
+          candidates.push.apply(candidates, _nestedCandidates);
+        } else {
+          candidates.push({
+            scope: element,
+            candidates: _nestedCandidates
+          });
+        }
+      } else {
+        // there's not shadow so just dig into the element's (light dom) children
+        //  __without__ giving the element special scope treatment
+        elementsToCheck.unshift.apply(elementsToCheck, element.children);
+      }
+    }
+  }
+
+  return candidates;
+};
+
+var isContentEditable = function isContentEditable(node) {
+  return node.contentEditable === 'true';
+};
+
+var getTabindex = function getTabindex(node, isScope) {
+  var tabindexAttr = parseInt(node.getAttribute('tabindex'), 10);
+
+  if (!isNaN(tabindexAttr)) {
+    return tabindexAttr;
+  } // 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 (isContentEditable(node)) {
+    return 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.
+  //
+  // isScope is positive for custom element with shadow root or slot that by default
+  // have tabIndex -1, but need to be sorted by document order in order for their
+  // content to be inserted in the correct position
+
+
+  if ((isScope || node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') && node.getAttribute('tabindex') === null) {
+    return 0;
+  }
+
+  return node.tabIndex;
+};
+
+var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
+  return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.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);
+};
+
+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;
+
+  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') {
+    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
+    // didn't find it sitting in an undisclosed shadow (or shadows are disabled) so now we
+    //  can just test to see if it would normally be visible or not
+    // 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 if (displayCheck === 'non-zero-area') {
+    return isZeroArea(node);
+  }
+
+  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 || 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 (!isNodeMatchingSelectorFocusable(options, node) || isNonTabbableRadio(node) || getTabindex(node) < 0) {
+    return false;
+  }
+
+  return true;
+};
+/**
+ * @param {Array.<Element|CandidatesScope>} candidates
+ * @returns Element[]
+ */
+
+
+var sortByOrder = function sortByOrder(candidates) {
+  var regularTabbables = [];
+  var orderedTabbables = [];
+  candidates.forEach(function (item, i) {
+    var isScope = !!item.scope;
+    var element = isScope ? item.scope : item;
+    var candidateTabindex = getTabindex(element, isScope);
+    var elements = isScope ? sortByOrder(item.candidates) : element;
+
+    if (candidateTabindex === 0) {
+      isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
+    } else {
+      orderedTabbables.push({
+        documentOrder: i,
+        tabIndex: candidateTabindex,
+        item: item,
+        isScope: isScope,
+        content: elements
+      });
+    }
+  });
+  return orderedTabbables.sort(sortOrderedTabbables).reduce(function (acc, sortable) {
+    sortable.isScope ? acc.push.apply(acc, sortable.content) : acc.push(sortable.content);
+    return acc;
+  }, []).concat(regularTabbables);
+};
+
+var tabbable = function tabbable(el, options) {
+  options = options || {};
+  var candidates;
+
+  if (options.getShadowRoot) {
+    candidates = getCandidatesIteratively([el], options.includeContainer, {
+      filter: isNodeMatchingSelectorTabbable.bind(null, options),
+      flatten: false,
+      getShadowRoot: options.getShadowRoot
+    });
+  } else {
+    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
+  }
+
+  return sortByOrder(candidates);
+};
+
+var focusable = function focusable(el, options) {
+  options = options || {};
+  var candidates;
+
+  if (options.getShadowRoot) {
+    candidates = getCandidatesIteratively([el], options.includeContainer, {
+      filter: isNodeMatchingSelectorFocusable.bind(null, options),
+      flatten: true,
+      getShadowRoot: options.getShadowRoot
+    });
+  } else {
+    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
+  }
+
+  return candidates;
+};
+
+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 focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');
+
+var isFocusable = function isFocusable(node, options) {
+  options = options || {};
+
+  if (!node) {
+    throw new Error('No node provided');
+  }
+
+  if (matches.call(node, focusableCandidateSelector) === false) {
+    return false;
+  }
+
+  return isNodeMatchingSelectorFocusable(options, node);
+};
+
+/*!
+* focus-trap 6.8.0-beta.2
+* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
+*/
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+var activeFocusTraps = function () {
+  var trapQueue = [];
+  return {
+    activateTrap: function activateTrap(trap) {
+      if (trapQueue.length > 0) {
+        var activeTrap = trapQueue[trapQueue.length - 1];
+
+        if (activeTrap !== trap) {
+          activeTrap.pause();
+        }
+      }
+
+      var trapIndex = trapQueue.indexOf(trap);
+
+      if (trapIndex === -1) {
+        trapQueue.push(trap);
+      } else {
+        // move this existing trap to the front of the queue
+        trapQueue.splice(trapIndex, 1);
+        trapQueue.push(trap);
+      }
+    },
+    deactivateTrap: function deactivateTrap(trap) {
+      var trapIndex = trapQueue.indexOf(trap);
+
+      if (trapIndex !== -1) {
+        trapQueue.splice(trapIndex, 1);
+      }
+
+      if (trapQueue.length > 0) {
+        trapQueue[trapQueue.length - 1].unpause();
+      }
+    }
+  };
+}();
+
+var isSelectableInput = function isSelectableInput(node) {
+  return node.tagName && node.tagName.toLowerCase() === 'input' && typeof node.select === 'function';
+};
+
+var isEscapeEvent = function isEscapeEvent(e) {
+  return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27;
+};
+
+var isTabEvent = function isTabEvent(e) {
+  return e.key === 'Tab' || e.keyCode === 9;
+};
+
+var delay = function delay(fn) {
+  return setTimeout(fn, 0);
+}; // Array.find/findIndex() are not supported on IE; this replicates enough
+//  of Array.findIndex() for our needs
+
+
+var findIndex = function findIndex(arr, fn) {
+  var idx = -1;
+  arr.every(function (value, i) {
+    if (fn(value)) {
+      idx = i;
+      return false; // break
+    }
+
+    return true; // next
+  });
+  return idx;
+};
+/**
+ * Get an option's value when it could be a plain value, or a handler that provides
+ *  the value.
+ * @param {*} value Option's value to check.
+ * @param {...*} [params] Any parameters to pass to the handler, if `value` is a function.
+ * @returns {*} The `value`, or the handler's returned value.
+ */
+
+
+var valueOrHandler = function valueOrHandler(value) {
+  for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    params[_key - 1] = arguments[_key];
+  }
+
+  return typeof value === 'function' ? value.apply(void 0, params) : value;
+};
+
+var getActualTarget = function getActualTarget(event) {
+  // NOTE: If the trap is _inside_ a shadow DOM, event.target will always be the
+  //  shadow host. However, event.target.composedPath() will be an array of
+  //  nodes "clicked" from inner-most (the actual element inside the shadow) to
+  //  outer-most (the host HTML document). If we have access to composedPath(),
+  //  then use its first element; otherwise, fall back to event.target (and
+  //  this only works for an _open_ shadow DOM; otherwise,
+  //  composedPath()[0] === event.target always).
+  return event.target.shadowRoot && typeof event.composedPath === 'function' ? event.composedPath()[0] : event.target;
+};
+
+var createFocusTrap = function createFocusTrap(elements, userOptions) {
+  // SSR: a live trap shouldn't be created in this type of environment so this
+  //  should be safe code to execute if the `document` option isn't specified
+  var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document;
+
+  var config = _objectSpread2({
+    returnFocusOnDeactivate: true,
+    escapeDeactivates: true,
+    delayInitialFocus: true
+  }, userOptions);
+
+  var state = {
+    // containers given to createFocusTrap()
+    // @type {Array<HTMLElement>}
+    containers: [],
+    // list of objects identifying tabbable nodes in `containers` in the trap
+    // NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap
+    //  is active, but the trap should never get to a state where there isn't at least one group
+    //  with at least one tabbable node in it (that would lead to an error condition that would
+    //  result in an error being thrown)
+    // @type {Array<{
+    //   container: HTMLElement,
+    //   tabbableNodes: Array<HTMLElement>, // empty if none
+    //   focusableNodes: Array<HTMLElement>, // empty if none
+    //   firstTabbableNode: HTMLElement|null,
+    //   lastTabbableNode: HTMLElement|null,
+    //   nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined
+    // }>}
+    containerGroups: [],
+    // same order/length as `containers` list
+    // references to objects in `containerGroups`, but only those that actually have
+    //  tabbable nodes in them
+    // NOTE: same order as `containers` and `containerGroups`, but __not necessarily__
+    //  the same length
+    tabbableGroups: [],
+    nodeFocusedBeforeActivation: null,
+    mostRecentlyFocusedNode: null,
+    active: false,
+    paused: false,
+    // timer ID for when delayInitialFocus is true and initial focus in this trap
+    //  has been delayed during activation
+    delayInitialFocusTimer: undefined
+  };
+  var trap; // eslint-disable-line prefer-const -- some private functions reference it, and its methods reference private functions, so we must declare here and define later
+
+  /**
+   * Gets a configuration option value.
+   * @param {Object|undefined} configOverrideOptions If true, and option is defined in this set,
+   *  value will be taken from this object. Otherwise, value will be taken from base configuration.
+   * @param {string} optionName Name of the option whose value is sought.
+   * @param {string|undefined} [configOptionName] Name of option to use __instead of__ `optionName`
+   *  IIF `configOverrideOptions` is not defined. Otherwise, `optionName` is used.
+   */
+
+  var getOption = function getOption(configOverrideOptions, optionName, configOptionName) {
+    return configOverrideOptions && configOverrideOptions[optionName] !== undefined ? configOverrideOptions[optionName] : config[configOptionName || optionName];
+  };
+  /**
+   * Finds the index of the container that contains the element.
+   * @param {HTMLElement} element
+   * @returns {number} Index of the container in either `state.containers` or
+   *  `state.containerGroups` (the order/length of these lists are the same); -1
+   *  if the element isn't found.
+   */
+
+
+  var findContainerIndex = function findContainerIndex(element) {
+    // NOTE: search `containerGroups` because it's possible a group contains no tabbable
+    //  nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)
+    //  and we still need to find the element in there
+    return state.containerGroups.findIndex(function (_ref) {
+      var container = _ref.container,
+          tabbableNodes = _ref.tabbableNodes;
+      return container.contains(element) || // fall back to explicit tabbable search which will take into consideration any
+      //  web components if the `tabbableOptions.getShadowRoot` option was used for
+      //  the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
+      //  look inside web components even if open)
+      tabbableNodes.find(function (node) {
+        return node === element;
+      });
+    });
+  };
+  /**
+   * Gets the node for the given option, which is expected to be an option that
+   *  can be either a DOM node, a string that is a selector to get a node, `false`
+   *  (if a node is explicitly NOT given), or a function that returns any of these
+   *  values.
+   * @param {string} optionName
+   * @returns {undefined | false | HTMLElement | SVGElement} Returns
+   *  `undefined` if the option is not specified; `false` if the option
+   *  resolved to `false` (node explicitly not given); otherwise, the resolved
+   *  DOM node.
+   * @throws {Error} If the option is set, not `false`, and is not, or does not
+   *  resolve to a node.
+   */
+
+
+  var getNodeForOption = function getNodeForOption(optionName) {
+    var optionValue = config[optionName];
+
+    if (typeof optionValue === 'function') {
+      for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        params[_key2 - 1] = arguments[_key2];
+      }
+
+      optionValue = optionValue.apply(void 0, params);
+    }
+
+    if (!optionValue) {
+      if (optionValue === undefined || optionValue === false) {
+        return optionValue;
+      } // else, empty string (invalid), null (invalid), 0 (invalid)
+
+
+      throw new Error("`".concat(optionName, "` was specified but was not a node, or did not return a node"));
+    }
+
+    var node = optionValue; // could be HTMLElement, SVGElement, or non-empty string at this point
+
+    if (typeof optionValue === 'string') {
+      node = doc.querySelector(optionValue); // resolve to node, or null if fails
+
+      if (!node) {
+        throw new Error("`".concat(optionName, "` as selector refers to no known node"));
+      }
+    }
+
+    return node;
+  };
+
+  var getInitialFocusNode = function getInitialFocusNode() {
+    var node = getNodeForOption('initialFocus'); // false explicitly indicates we want no initialFocus at all
+
+    if (node === false) {
+      return false;
+    }
+
+    if (node === undefined) {
+      // option not specified: use fallback options
+      if (findContainerIndex(doc.activeElement) >= 0) {
+        node = doc.activeElement;
+      } else {
+        var firstTabbableGroup = state.tabbableGroups[0];
+        var firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode; // NOTE: `fallbackFocus` option function cannot return `false` (not supported)
+
+        node = firstTabbableNode || getNodeForOption('fallbackFocus');
+      }
+    }
+
+    if (!node) {
+      throw new Error('Your focus-trap needs to have at least one focusable element');
+    }
+
+    return node;
+  };
+
+  var updateTabbableNodes = function updateTabbableNodes() {
+    state.containerGroups = state.containers.map(function (container) {
+      var _config$tabbableOptio, _config$tabbableOptio2;
+
+      var tabbableNodes = tabbable(container, {
+        getShadowRoot: (_config$tabbableOptio = config.tabbableOptions) === null || _config$tabbableOptio === void 0 ? void 0 : _config$tabbableOptio.getShadowRoot
+      }); // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes
+      //  are a superset of tabbable nodes
+
+      var focusableNodes = focusable(container, {
+        getShadowRoot: (_config$tabbableOptio2 = config.tabbableOptions) === null || _config$tabbableOptio2 === void 0 ? void 0 : _config$tabbableOptio2.getShadowRoot
+      });
+      return {
+        container: container,
+        tabbableNodes: tabbableNodes,
+        focusableNodes: focusableNodes,
+        firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null,
+        lastTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : null,
+
+        /**
+         * Finds the __tabbable__ node that follows the given node in the specified direction,
+         *  in this container, if any.
+         * @param {HTMLElement} node
+         * @param {boolean} [forward] True if going in forward tab order; false if going
+         *  in reverse.
+         * @returns {HTMLElement|undefined} The next tabbable node, if any.
+         */
+        nextTabbableNode: function nextTabbableNode(node) {
+          var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+          // NOTE: If tabindex is positive (in order to manipulate the tab order separate
+          //  from the DOM order), this __will not work__ because the list of focusableNodes,
+          //  while it contains tabbable nodes, does not sort its nodes in any order other
+          //  than DOM order, because it can't: Where would you place focusable (but not
+          //  tabbable) nodes in that order? They have no order, because they aren't tabbale...
+          // Support for positive tabindex is already broken and hard to manage (possibly
+          //  not supportable, TBD), so this isn't going to make things worse than they
+          //  already are, and at least makes things better for the majority of cases where
+          //  tabindex is either 0/unset or negative.
+          // FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
+          var nodeIdx = focusableNodes.findIndex(function (n) {
+            return n === node;
+          });
+
+          if (nodeIdx < 0) {
+            return undefined;
+          }
+
+          if (forward) {
+            return focusableNodes.slice(nodeIdx + 1).find(function (n) {
+              return isTabbable(n);
+            });
+          }
+
+          return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {
+            return isTabbable(n);
+          });
+        }
+      };
+    });
+    state.tabbableGroups = state.containerGroups.filter(function (group) {
+      return group.tabbableNodes.length > 0;
+    }); // throw if no groups have tabbable nodes and we don't have a fallback focus node either
+
+    if (state.tabbableGroups.length <= 0 && !getNodeForOption('fallbackFocus') // returning false not supported for this option
+    ) {
+      throw new Error('Your focus-trap must have at least one container with at least one tabbable node in it at all times');
+    }
+  };
+
+  var tryFocus = function tryFocus(node) {
+    if (node === false) {
+      return;
+    }
+
+    if (node === doc.activeElement) {
+      return;
+    }
+
+    if (!node || !node.focus) {
+      tryFocus(getInitialFocusNode());
+      return;
+    }
+
+    node.focus({
+      preventScroll: !!config.preventScroll
+    });
+    state.mostRecentlyFocusedNode = node;
+
+    if (isSelectableInput(node)) {
+      node.select();
+    }
+  };
+
+  var getReturnFocusNode = function getReturnFocusNode(previousActiveElement) {
+    var node = getNodeForOption('setReturnFocus', previousActiveElement);
+    return node ? node : node === false ? false : previousActiveElement;
+  }; // This needs to be done on mousedown and touchstart instead of click
+  // so that it precedes the focus event.
+
+
+  var checkPointerDown = function checkPointerDown(e) {
+    var target = getActualTarget(e);
+
+    if (findContainerIndex(target) >= 0) {
+      // allow the click since it ocurred inside the trap
+      return;
+    }
+
+    if (valueOrHandler(config.clickOutsideDeactivates, e)) {
+      // immediately deactivate the trap
+      trap.deactivate({
+        // if, on deactivation, we should return focus to the node originally-focused
+        //  when the trap was activated (or the configured `setReturnFocus` node),
+        //  then assume it's also OK to return focus to the outside node that was
+        //  just clicked, causing deactivation, as long as that node is focusable;
+        //  if it isn't focusable, then return focus to the original node focused
+        //  on activation (or the configured `setReturnFocus` node)
+        // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,
+        //  which will result in the outside click setting focus to the node
+        //  that was clicked, whether it's focusable or not; by setting
+        //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused
+        //  on activation (or the configured `setReturnFocus` node)
+        returnFocus: config.returnFocusOnDeactivate && !isFocusable(target)
+      });
+      return;
+    } // This is needed for mobile devices.
+    // (If we'll only let `click` events through,
+    // then on mobile they will be blocked anyways if `touchstart` is blocked.)
+
+
+    if (valueOrHandler(config.allowOutsideClick, e)) {
+      // allow the click outside the trap to take place
+      return;
+    } // otherwise, prevent the click
+
+
+    e.preventDefault();
+  }; // In case focus escapes the trap for some strange reason, pull it back in.
+
+
+  var checkFocusIn = function checkFocusIn(e) {
+    var target = getActualTarget(e);
+    var targetContained = findContainerIndex(target) >= 0; // In Firefox when you Tab out of an iframe the Document is briefly focused.
+
+    if (targetContained || target instanceof Document) {
+      if (targetContained) {
+        state.mostRecentlyFocusedNode = target;
+      }
+    } else {
+      // escaped! pull it back in to where it just left
+      e.stopImmediatePropagation();
+      tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());
+    }
+  }; // Hijack Tab events on the first and last focusable nodes of the trap,
+  // in order to prevent focus from escaping. If it escapes for even a
+  // moment it can end up scrolling the page and causing confusion so we
+  // kind of need to capture the action at the keydown phase.
+
+
+  var checkTab = function checkTab(e) {
+    var target = getActualTarget(e);
+    updateTabbableNodes();
+    var destinationNode = null;
+
+    if (state.tabbableGroups.length > 0) {
+      // make sure the target is actually contained in a group
+      // NOTE: the target may also be the container itself if it's focusable
+      //  with tabIndex='-1' and was given initial focus
+      var containerIndex = findContainerIndex(target);
+      var containerGroup = containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;
+
+      if (containerIndex < 0) {
+        // target not found in any group: quite possible focus has escaped the trap,
+        //  so bring it back in to...
+        if (e.shiftKey) {
+          // ...the last node in the last group
+          destinationNode = state.tabbableGroups[state.tabbableGroups.length - 1].lastTabbableNode;
+        } else {
+          // ...the first node in the first group
+          destinationNode = state.tabbableGroups[0].firstTabbableNode;
+        }
+      } else if (e.shiftKey) {
+        // REVERSE
+        // is the target the first tabbable node in a group?
+        var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref2) {
+          var firstTabbableNode = _ref2.firstTabbableNode;
+          return target === firstTabbableNode;
+        });
+
+        if (startOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target) && !isTabbable(target) && !containerGroup.nextTabbableNode(target, false))) {
+          // an exception case where the target is either the container itself, or
+          //  a non-tabbable node that was given focus (i.e. tabindex is negative
+          //  and user clicked on it or node was programmatically given focus)
+          //  and is not followed by any other tabbable node, in which
+          //  case, we should handle shift+tab as if focus were on the container's
+          //  first tabbable node, and go to the last tabbable node of the LAST group
+          startOfGroupIndex = containerIndex;
+        }
+
+        if (startOfGroupIndex >= 0) {
+          // YES: then shift+tab should go to the last tabbable node in the
+          //  previous group (and wrap around to the last tabbable node of
+          //  the LAST group if it's the first tabbable node of the FIRST group)
+          var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
+          var destinationGroup = state.tabbableGroups[destinationGroupIndex];
+          destinationNode = destinationGroup.lastTabbableNode;
+        }
+      } else {
+        // FORWARD
+        // is the target the last tabbable node in a group?
+        var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {
+          var lastTabbableNode = _ref3.lastTabbableNode;
+          return target === lastTabbableNode;
+        });
+
+        if (lastOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target) && !isTabbable(target) && !containerGroup.nextTabbableNode(target))) {
+          // an exception case where the target is the container itself, or
+          //  a non-tabbable node that was given focus (i.e. tabindex is negative
+          //  and user clicked on it or node was programmatically given focus)
+          //  and is not followed by any other tabbable node, in which
+          //  case, we should handle tab as if focus were on the container's
+          //  last tabbable node, and go to the first tabbable node of the FIRST group
+          lastOfGroupIndex = containerIndex;
+        }
+
+        if (lastOfGroupIndex >= 0) {
+          // YES: then tab should go to the first tabbable node in the next
+          //  group (and wrap around to the first tabbable node of the FIRST
+          //  group if it's the last tabbable node of the LAST group)
+          var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
+
+          var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];
+          destinationNode = _destinationGroup.firstTabbableNode;
+        }
+      }
+    } else {
+      // NOTE: the fallbackFocus option does not support returning false to opt-out
+      destinationNode = getNodeForOption('fallbackFocus');
+    }
+
+    if (destinationNode) {
+      e.preventDefault();
+      tryFocus(destinationNode);
+    } // else, let the browser take care of [shift+]tab and move the focus
+
+  };
+
+  var checkKey = function checkKey(e) {
+    if (isEscapeEvent(e) && valueOrHandler(config.escapeDeactivates, e) !== false) {
+      e.preventDefault();
+      trap.deactivate();
+      return;
+    }
+
+    if (isTabEvent(e)) {
+      checkTab(e);
+      return;
+    }
+  };
+
+  var checkClick = function checkClick(e) {
+    if (valueOrHandler(config.clickOutsideDeactivates, e)) {
+      return;
+    }
+
+    var target = getActualTarget(e);
+
+    if (findContainerIndex(target) >= 0) {
+      return;
+    }
+
+    if (valueOrHandler(config.allowOutsideClick, e)) {
+      return;
+    }
+
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }; //
+  // EVENT LISTENERS
+  //
+
+
+  var addListeners = function addListeners() {
+    if (!state.active) {
+      return;
+    } // There can be only one listening focus trap at a time
+
+
+    activeFocusTraps.activateTrap(trap); // Delay ensures that the focused element doesn't capture the event
+    // that caused the focus trap activation.
+
+    state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function () {
+      tryFocus(getInitialFocusNode());
+    }) : tryFocus(getInitialFocusNode());
+    doc.addEventListener('focusin', checkFocusIn, true);
+    doc.addEventListener('mousedown', checkPointerDown, {
+      capture: true,
+      passive: false
+    });
+    doc.addEventListener('touchstart', checkPointerDown, {
+      capture: true,
+      passive: false
+    });
+    doc.addEventListener('click', checkClick, {
+      capture: true,
+      passive: false
+    });
+    doc.addEventListener('keydown', checkKey, {
+      capture: true,
+      passive: false
+    });
+    return trap;
+  };
+
+  var removeListeners = function removeListeners() {
+    if (!state.active) {
+      return;
+    }
+
+    doc.removeEventListener('focusin', checkFocusIn, true);
+    doc.removeEventListener('mousedown', checkPointerDown, true);
+    doc.removeEventListener('touchstart', checkPointerDown, true);
+    doc.removeEventListener('click', checkClick, true);
+    doc.removeEventListener('keydown', checkKey, true);
+    return trap;
+  }; //
+  // TRAP DEFINITION
+  //
+
+
+  trap = {
+    activate: function activate(activateOptions) {
+      if (state.active) {
+        return this;
+      }
+
+      var onActivate = getOption(activateOptions, 'onActivate');
+      var onPostActivate = getOption(activateOptions, 'onPostActivate');
+      var checkCanFocusTrap = getOption(activateOptions, 'checkCanFocusTrap');
+
+      if (!checkCanFocusTrap) {
+        updateTabbableNodes();
+      }
+
+      state.active = true;
+      state.paused = false;
+      state.nodeFocusedBeforeActivation = doc.activeElement;
+
+      if (onActivate) {
+        onActivate();
+      }
+
+      var finishActivation = function finishActivation() {
+        if (checkCanFocusTrap) {
+          updateTabbableNodes();
+        }
+
+        addListeners();
+
+        if (onPostActivate) {
+          onPostActivate();
+        }
+      };
+
+      if (checkCanFocusTrap) {
+        checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);
+        return this;
+      }
+
+      finishActivation();
+      return this;
+    },
+    deactivate: function deactivate(deactivateOptions) {
+      if (!state.active) {
+        return this;
+      }
+
+      clearTimeout(state.delayInitialFocusTimer); // noop if undefined
+
+      state.delayInitialFocusTimer = undefined;
+      removeListeners();
+      state.active = false;
+      state.paused = false;
+      activeFocusTraps.deactivateTrap(trap);
+      var onDeactivate = getOption(deactivateOptions, 'onDeactivate');
+      var onPostDeactivate = getOption(deactivateOptions, 'onPostDeactivate');
+      var checkCanReturnFocus = getOption(deactivateOptions, 'checkCanReturnFocus');
+
+      if (onDeactivate) {
+        onDeactivate();
+      }
+
+      var returnFocus = getOption(deactivateOptions, 'returnFocus', 'returnFocusOnDeactivate');
+
+      var finishDeactivation = function finishDeactivation() {
+        delay(function () {
+          if (returnFocus) {
+            tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
+          }
+
+          if (onPostDeactivate) {
+            onPostDeactivate();
+          }
+        });
+      };
+
+      if (returnFocus && checkCanReturnFocus) {
+        checkCanReturnFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)).then(finishDeactivation, finishDeactivation);
+        return this;
+      }
+
+      finishDeactivation();
+      return this;
+    },
+    pause: function pause() {
+      if (state.paused || !state.active) {
+        return this;
+      }
+
+      state.paused = true;
+      removeListeners();
+      return this;
+    },
+    unpause: function unpause() {
+      if (!state.paused || !state.active) {
+        return this;
+      }
+
+      state.paused = false;
+      updateTabbableNodes();
+      addListeners();
+      return this;
+    },
+    updateContainerElements: function updateContainerElements(containerElements) {
+      var elementsAsArray = [].concat(containerElements).filter(Boolean);
+      state.containers = elementsAsArray.map(function (element) {
+        return typeof element === 'string' ? doc.querySelector(element) : element;
+      });
+
+      if (state.active) {
+        updateTabbableNodes();
+      }
+
+      return this;
+    }
+  }; // initialize container elements
+
+  trap.updateContainerElements(elements);
+  return trap;
+};
+
+const catMenuCss = ":host{display:inline-block}:host([hidden]){display:none}.content{padding-top:0.5rem;padding-bottom:0.5rem;position:absolute;background:white;display:none;overflow:auto;-webkit-overflow-scrolling:touch;min-width:8rem;max-width:16rem;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem}";
+
+let nextUniqueId = 0;
+let CatMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.catOpen = createEvent(this, "catOpen", 7);
+    this.catClose = createEvent(this, "catClose", 7);
+    this.id = nextUniqueId++;
+    /**
+     * The placement of the menu.
+     */
+    this.placement = 'bottom-start';
+  }
+  clickHandler(event) {
+    var _a;
+    // hide menu on button click
+    if (this.content && event.composedPath().includes(this.content)) {
+      (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+      this.hide();
+    }
+  }
+  componentDidLoad() {
+    var _a, _b, _c, _d, _e;
+    this.trigger = this.firstTabbable(this.triggerSlot);
+    (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', 'true');
+    (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
+    (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-controls', this.contentId);
+    (_d = this.content) === null || _d === void 0 ? void 0 : _d.setAttribute('id', this.contentId);
+    if (this.trigger && this.content) {
+      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('click', () => this.show());
+      autoUpdate(this.trigger, this.content, () => this.update());
+    }
+    this.keyListener = event => {
+      if (this.content && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
+        const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });
+        const activeElement = this.firstTabbable(document.activeElement);
+        const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
+        const activeOff = event.key === 'ArrowDown' ? 1 : -1;
+        const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
+        targetElements[targetIdx].focus();
+        event.preventDefault();
+      }
+    };
+    document.addEventListener('keydown', this.keyListener);
+  }
+  disconnectedCallback() {
+    if (this.keyListener) {
+      document.removeEventListener('keydown', this.keyListener);
+    }
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { class: "content", ref: el => (this.content = el) }, h("slot", { name: "content" }))));
+  }
+  get contentId() {
+    return `cat-menu-${this.id}`;
+  }
+  show() {
+    var _a;
+    if (this.content) {
+      this.content.style.display = 'block';
+      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
+      this.catOpen.emit();
+      this.trap = this.trap
+        ? this.trap.updateContainerElements(this.content)
+        : createFocusTrap(this.content, {
+          tabbableOptions: {
+            getShadowRoot: true
+          },
+          allowOutsideClick: true,
+          clickOutsideDeactivates: event => !this.content || !event.composedPath().includes(this.content),
+          onPostDeactivate: () => this.hide()
+        });
+      this.trap.activate();
+    }
+  }
+  hide() {
+    var _a;
+    if (this.content) {
+      this.content.style.display = '';
+      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
+      this.catClose.emit();
+    }
+  }
+  update() {
+    if (this.trigger && this.content) {
+      computePosition(this.trigger, this.content, {
+        placement: this.placement,
+        middleware: [offset(CatMenu.OFFSET), flip()]
+      }).then(({ x, y }) => {
+        if (this.content) {
+          Object.assign(this.content.style, {
+            left: `${x}px`,
+            top: `${y}px`
+          });
+        }
+      });
+    }
+  }
+  firstTabbable(container) {
+    return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
+  }
+};
+CatMenu.OFFSET = 4;
+CatMenu.style = catMenuCss;
+
+const catSkeletonCss = ":host{display:flex;flex-direction:column;position:relative;--background:#ebecf0;--highlight:#d7dbe0;--speed:2s}:host([variant=square]),:host([variant=circle]){display:inline-flex}:host([hidden]){display:none}:host([variant=head]){margin-bottom:0.5rem}:host([variant=body]){margin-bottom:1rem}.cat-skeleton{display:block;border-radius:0.25rem;background:var(--background)}.cat-skeleton-circle{border-radius:10rem}.cat-skeleton-xs.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 1.5rem)}.cat-skeleton-xs.cat-skeleton-square,.cat-skeleton-xs.cat-skeleton-circle{width:var(--width, 1.5rem);height:var(--height, 1.5rem)}.cat-skeleton-xs.cat-skeleton-head,.cat-skeleton-xs.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-xs.cat-skeleton-head{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.cat-skeleton-xs.cat-skeleton-body{height:calc(0.75rem - 4px);margin:calc((1rem - 0.75rem + 4px) * 0.5) 0}.cat-skeleton-s.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2rem)}.cat-skeleton-s.cat-skeleton-square,.cat-skeleton-s.cat-skeleton-circle{width:var(--width, 2rem);height:var(--height, 2rem)}.cat-skeleton-s.cat-skeleton-head,.cat-skeleton-s.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-s.cat-skeleton-head{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.cat-skeleton-s.cat-skeleton-body{height:calc(0.875rem - 4px);margin:calc((1rem - 0.875rem + 4px) * 0.5) 0}.cat-skeleton-m.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2.5rem)}.cat-skeleton-m.cat-skeleton-square,.cat-skeleton-m.cat-skeleton-circle{width:var(--width, 2.5rem);height:var(--height, 2.5rem)}.cat-skeleton-m.cat-skeleton-head,.cat-skeleton-m.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-m.cat-skeleton-head{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.cat-skeleton-m.cat-skeleton-body{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.cat-skeleton-l.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3rem)}.cat-skeleton-l.cat-skeleton-square,.cat-skeleton-l.cat-skeleton-circle{width:var(--width, 3rem);height:var(--height, 3rem)}.cat-skeleton-l.cat-skeleton-head,.cat-skeleton-l.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-l.cat-skeleton-head{height:calc(1.5rem - 4px);margin:calc((1.75rem - 1.5rem + 4px) * 0.5) 0}.cat-skeleton-l.cat-skeleton-body{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.cat-skeleton-xl.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3.5rem)}.cat-skeleton-xl.cat-skeleton-square,.cat-skeleton-xl.cat-skeleton-circle{width:var(--width, 3.5rem);height:var(--height, 3.5rem)}.cat-skeleton-xl.cat-skeleton-head,.cat-skeleton-xl.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-xl.cat-skeleton-head{height:calc(1.75rem - 4px);margin:calc((2rem - 1.75rem + 4px) * 0.5) 0}.cat-skeleton-xl.cat-skeleton-body{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.cat-skeleton-sheen{background:linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%) var(--background);background-size:300% 100%;animation:sheen var(--speed) ease-in-out infinite}.cat-skeleton-pulse{position:relative;overflow:hidden}.cat-skeleton-pulse::before{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:var(--highlight);animation:var(--speed) ease-in-out 0.5s infinite normal none running pulse;opacity:0}@keyframes sheen{0%{background-position:right}}@keyframes pulse{50%{opacity:1}}";
+
+let CatSkeleton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * The animation style of the skeleton.
+     */
+    this.effect = 'sheen';
+    /**
+     * The rendering style of the skeleton.
+     */
+    this.variant = 'rectangle';
+    /**
+     * The size of the skeleton. If the variant is set to "head", the size values
+     * "xs" to "xl" translate to the head levels `h1` to `h5`.
+     */
+    this.size = 'm';
+  }
+  render() {
+    return (h(Host, null, Array.from(Array(this.count)).map(() => (h("div", { style: this.style, class: {
+        'cat-skeleton': true,
+        [`cat-skeleton-${this.effect}`]: Boolean(this.effect),
+        [`cat-skeleton-${this.variant}`]: Boolean(this.variant),
+        [`cat-skeleton-${this.size}`]: Boolean(this.size)
+      } })))));
+  }
+  get count() {
+    switch (this.variant) {
+      case 'head':
+        return Math.max(1, this.lines || 1);
+      case 'body':
+        return Math.max(1, this.lines || 3);
+      default:
+        return 1;
+    }
+  }
+  get style() {
+    return this.variant === 'head' || this.variant === 'body'
+      ? {
+        '--line-width': `${this.random(50, 100)}%`
+      }
+      : undefined;
+  }
+  random(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  }
+};
+CatSkeleton.style = catSkeletonCss;
+
+const catSpinnerCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host[hidden]{display:none}span{display:inline-flex}svg{fill:none;stroke:currentColor;stroke-dasharray:135px;stroke-dashoffset:95px;stroke-linecap:round;stroke-width:5px;transform-origin:center center;animation:cat-spinner 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;width:1em;height:1em}.cat-spinner-xs svg{font-size:0.75rem}.cat-spinner-s svg{font-size:1rem}.cat-spinner-m svg{font-size:1.25rem}.cat-spinner-l svg{font-size:1.5rem}.cat-spinner-xl svg{font-size:1.75rem}@keyframes cat-spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";
+
+let CatSpinner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * The size of the spinner.
+     */
+    this.size = 'm';
+  }
+  render() {
+    return (h("span", { "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
+        [`cat-spinner-${this.size}`]: this.size !== 'inline'
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, h("circle", { cx: "24", cy: "24", r: "21.5" }))));
+  }
+};
+CatSpinner.style = catSpinnerCss;
+
+export { CatAlert as cat_alert, CatBadge as cat_badge, CatButton as cat_button, CatIcon as cat_icon, CatMenu as cat_menu, CatSkeleton as cat_skeleton, CatSpinner as cat_spinner };