@rhc-shared-components/packages-table 0.1.0 → 0.1.1

package/dist/index.js

@@ -35,3056 +35,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var mergeWith__default = /*#__PURE__*/_interopDefaultLegacy(mergeWith);
 
-var css_248z = ".packages-table pfe-tab-panel {\n  --pfe-tabs__panel--PaddingTop: 1.5rem;\n  --pfe-tabs__panel--PaddingLeft: 0; }\n\n.vulnerabilities-table pfe-icon {\n  font-size: 1rem;\n  padding-right: 0.5rem; }\n  .vulnerabilities-table pfe-icon.color-critical {\n    --pfe-icon--Color: #a30000; }\n  .vulnerabilities-table pfe-icon.color-important {\n    --pfe-icon--Color: #ec7a08; }\n  .vulnerabilities-table pfe-icon.color-moderate {\n    --pfe-icon--Color: #f5c12e; }\n  .vulnerabilities-table pfe-icon.color-low {\n    --pfe-icon--Color: #777; }\n\n.vulnerabilities-table__affected-packages-cell {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap; }\n\n.vulnerabilities-table__impact-cell {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap; }\n\n.filterable-table {\n  padding-bottom: var(--pf-global--spacer--lg); }\n  .filterable-table__bottom-pagination[class] {\n    margin-top: 1rem; }\n  .filterable-table .pf-c-toolbar {\n    padding-top: 0; }\n    .filterable-table .pf-c-toolbar__content {\n      --pf-c-toolbar__content--PaddingRight: 0;\n      --pf-c-toolbar__content--PaddingLeft: 0; }\n  .filterable-table .pf-c-input-group {\n    min-width: 20rem; }\n    .filterable-table .pf-c-input-group__text {\n      --pf-c-input-group__text--PaddingRight: 0; }\n  .filterable-table .pf-c-pagination.pf-m-bottom {\n    --pf-c-pagination--m-bottom--md--PaddingRight: 0; }\n\n.filter-input {\n  width: 18rem;\n  margin: 1rem 0 1rem 0; }\n  .filter-input pfe-icon {\n    --pfe-icon--Color: #777;\n    font-size: 1rem;\n    position: absolute;\n    margin-top: 9px; }\n    .filter-input pfe-icon.clear-icon {\n      margin-left: -50px;\n      cursor: pointer; }\n    .filter-input pfe-icon.search-icon {\n      margin-left: -30px; }\n";
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function _construct(Parent, args, Class) {
-  if (_isNativeReflectConstruct()) {
-    _construct = Reflect.construct;
-  } else {
-    _construct = function _construct(Parent, args, Class) {
-      var a = [null];
-      a.push.apply(a, args);
-      var Constructor = Function.bind.apply(Parent, a);
-      var instance = new Constructor();
-      if (Class) _setPrototypeOf(instance, Class.prototype);
-      return instance;
-    };
-  }
-
-  return _construct.apply(null, arguments);
-}
-
-function _isNativeFunction(fn) {
-  return Function.toString.call(fn).indexOf("[native code]") !== -1;
-}
-
-function _wrapNativeSuper(Class) {
-  var _cache = typeof Map === "function" ? new Map() : undefined;
-
-  _wrapNativeSuper = function _wrapNativeSuper(Class) {
-    if (Class === null || !_isNativeFunction(Class)) return Class;
-
-    if (typeof Class !== "function") {
-      throw new TypeError("Super expression must either be null or a function");
-    }
-
-    if (typeof _cache !== "undefined") {
-      if (_cache.has(Class)) return _cache.get(Class);
-
-      _cache.set(Class, Wrapper);
-    }
-
-    function Wrapper() {
-      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
-    }
-
-    Wrapper.prototype = Object.create(Class.prototype, {
-      constructor: {
-        value: Wrapper,
-        enumerable: false,
-        writable: true,
-        configurable: true
-      }
-    });
-    return _setPrototypeOf(Wrapper, Class);
-  };
-
-  return _wrapNativeSuper(Class);
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
-  }
-
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var logger = function logger() {
-  return null;
-};
-/**
- * Reveal web components when loading is complete by removing the unresolved attribute
- * from the body tag; log the event.
- * @throws debugging log indicating the reveal event
- */
-
-
-function reveal() {
-  logger("[reveal] elements ready, revealing the body");
-  window.document.body.removeAttribute("unresolved");
-}
-/**
- * Auto-reveal functionality prevents a flash of unstyled content before components
- * have finished loading.
- * @param {function} logFunction
- * @see https://github.com/github/webcomponentsjs#webcomponents-loaderjs
- */
-
-
-function autoReveal(logFunction) {
-  logger = logFunction; // If Web Components are already ready, run the handler right away.  If they
-  // are not yet ready, wait.
-  //
-  // see https://github.com/github/webcomponentsjs#webcomponents-loaderjs for
-  // info about web component readiness events
-
-  var polyfillPresent = window.WebComponents;
-  var polyfillReady = polyfillPresent && window.WebComponents.ready;
-
-  if (!polyfillPresent || polyfillReady) {
-    handleWebComponentsReady();
-  } else {
-    window.addEventListener("WebComponentsReady", handleWebComponentsReady);
-  }
-}
-/**
- * Reveal web components when loading is complete and log event.
- * @throws debugging log indicating the web components are ready
- */
-
-
-function handleWebComponentsReady() {
-  logger("[reveal] web components ready");
-  reveal();
-}
-/**
- * Verify that a property definition's `type` field contains one of the allowed
- * types.  If the definition type resolves to falsy, assumes String type.
- * @param {constructor} definition
- * @default String
- * @return {Boolean} True if the definition type is one of String, Number, or Boolean
- */
-
-
-function isAllowedType(definition) {
-  return [String, Number, Boolean].includes(definition.type || String);
-}
-/**
- * Verify that a property definition's `default` value is of the correct type.
- *
- * A `default` value is valid if it's of the same type as the `type`
- * definition.  Or, if there is no `type` definition, then it must be a String
- * (the default value for `type`).
- * @param {type} definition
- * @return {Boolean} True if the default value matches the type of the definition object.
- */
-
-
-function isValidDefaultType(definition) {
-  return definition.hasOwnProperty("default") && definition["default"].constructor === definition.type;
-} // @POLYFILL  Array.includes
-
-/** @see https://tc39.github.io/ecma262/#sec-array.prototype.includes */
-
-
-if (!Array.prototype.includes) {
-  Object.defineProperty(Array.prototype, "includes", {
-    value: function value(valueToFind, fromIndex) {
-      if (this == null) {
-        throw new TypeError('"this" is null or not defined');
-      } // 1. Let O be ? ToObject(this value).
-
-
-      var o = Object(this); // 2. Let len be ? ToLength(? Get(O, "length")).
-
-      var len = o.length >>> 0; // 3. If len is 0, return false.
-
-      if (len === 0) {
-        return false;
-      } // 4. Let n be ? ToInteger(fromIndex).
-      //    (If fromIndex is undefined, this step produces the value 0.)
-
-
-      var n = fromIndex | 0; // 5. If n ≥ 0, then
-      //  a. Let k be n.
-      // 6. Else n < 0,
-      //  a. Let k be len + n.
-      //  b. If k < 0, let k be 0.
-
-      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
-
-      function sameValueZero(x, y) {
-        return x === y || typeof x === "number" && typeof y === "number" && isNaN(x) && isNaN(y);
-      } // 7. Repeat, while k < len
-
-
-      while (k < len) {
-        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
-        // b. If SameValueZero(valueToFind, elementK) is true, return true.
-        if (sameValueZero(o[k], valueToFind)) {
-          return true;
-        } // c. Increase k by 1.
-
-
-        k++;
-      } // 8. Return false
-
-
-      return false;
-    }
-  });
-} // @POLYFILL Object.entries
-
-/** @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries */
-
-
-if (!Object.entries) {
-  Object.entries = function (obj) {
-    var ownProps = Object.keys(obj),
-        i = ownProps.length,
-        resArray = new Array(i); // preallocate the Array
-
-    while (i--) {
-      resArray[i] = [ownProps[i], obj[ownProps[i]]];
-    }
-
-    return resArray;
-  };
-} // @POLYFILL String.startsWith
-
-/** @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith#polyfill */
-
-
-if (!String.prototype.startsWith) {
-  Object.defineProperty(String.prototype, "startsWith", {
-    value: function value(search, rawPos) {
-      var pos = rawPos > 0 ? rawPos | 0 : 0;
-      return this.substring(pos, pos + search.length) === search;
-    }
-  });
-} // @POLYFILL  Element.closest
-// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
-
-
-if (!Element.prototype.closest) {
-  Element.prototype.closest = function (s) {
-    var el = this;
-
-    do {
-      if (el.matches(s)) return el;
-      el = el.parentElement || el.parentNode;
-    } while (el !== null && el.nodeType === 1);
-
-    return null;
-  };
-} // @POLYFILL  Element.matches
-// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
-
-
-if (!Element.prototype.matches) {
-  Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
-} // @POLYFILL  Array.prototype.find
-// https://tc39.github.io/ecma262/#sec-array.prototype.find
-
-
-if (!Array.prototype.find) {
-  Object.defineProperty(Array.prototype, "find", {
-    value: function value(predicate) {
-      // 1. Let O be ? ToObject(this value).
-      if (this == null) {
-        throw new TypeError('"this" is null or not defined');
-      }
-
-      var o = Object(this); // 2. Let len be ? ToLength(? Get(O, "length")).
-
-      var len = o.length >>> 0; // 3. If IsCallable(predicate) is false, throw a TypeError exception.
-
-      if (typeof predicate !== "function") {
-        throw new TypeError("predicate must be a function");
-      } // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
-
-
-      var thisArg = arguments[1]; // 5. Let k be 0.
-
-      var k = 0; // 6. Repeat, while k < len
-
-      while (k < len) {
-        // a. Let Pk be ! ToString(k).
-        // b. Let kValue be ? Get(O, Pk).
-        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
-        // d. If testResult is true, return kValue.
-        var kValue = o[k];
-
-        if (predicate.call(thisArg, kValue, k, o)) {
-          return kValue;
-        } // e. Increase k by 1.
-
-
-        k++;
-      } // 7. Return undefined.
-
-
-      return undefined;
-    },
-    configurable: true,
-    writable: true
-  });
-}
-/*!
- * PatternFly Elements: PFElement 1.12.3
- * @license
- * Copyright 2021 Red Hat, Inc.
- * 
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- * 
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- * 
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- * 
-*/
-// /**
-//  * Global prefix used for all components in the project.
-//  * @constant {String}
-//  * */
-
-
-var prefix = "pfe";
-/**
- * @class PFElement
- * @extends HTMLElement
- * @version 1.12.3
- * @classdesc Serves as the baseline for all PatternFly Element components.
- */
-
-var PFElement = /*#__PURE__*/function (_HTMLElement) {
-  _inheritsLoose(PFElement, _HTMLElement);
-
-  /**
-   * A boolean value that indicates if the logging should be printed to the console; used for debugging.
-   * For use in a JS file or script tag; can also be added in the constructor of a component during development.
-   * @example PFElement.debugLog(true);
-   * @tags debug
-   */
-  PFElement.debugLog = function debugLog(preference) {
-    if (preference === void 0) {
-      preference = null;
-    }
-
-    if (preference !== null) {
-      // wrap localStorage references in a try/catch; merely referencing it can
-      // throw errors in some locked down environments
-      try {
-        localStorage.pfeLog = !!preference;
-      } catch (e) {
-        // if localStorage fails, fall back to PFElement._debugLog
-        PFElement._debugLog = !!preference;
-        return PFElement._debugLog;
-      }
-    } // @TODO the reference to _debugLog is for backwards compatibiilty and will be removed in 2.0
-
-
-    return localStorage.pfeLog === "true" || PFElement._debugLog;
-  }
-  /**
-   * A boolean value that indicates if the performance should be tracked.
-   * For use in a JS file or script tag; can also be added in the constructor of a component during development.
-   * @example PFElement._trackPerformance = true;
-   */
-  ;
-
-  PFElement.trackPerformance = function trackPerformance(preference) {
-    if (preference === void 0) {
-      preference = null;
-    }
-
-    if (preference !== null) {
-      PFElement._trackPerformance = !!preference;
-    }
-
-    return PFElement._trackPerformance;
-  }
-  /**
-   * A object that contains configuration set outside of pfe.
-   *
-   * @example const config = PFElement.config;
-   */
-  ;
-
-  /**
-   * A logging wrapper which checks the debugLog boolean and prints to the console if true.
-   *
-   * @example PFElement.log("Hello");
-   */
-  PFElement.log = function log() {
-    if (PFElement.debugLog()) {
-      var _console;
-
-      (_console = console).log.apply(_console, [].slice.call(arguments));
-    }
-  }
-  /**
-   * Local logging that outputs the tag name as a prefix automatically
-   *
-   * @example this.log("Hello");
-   */
-  ;
-
-  var _proto = PFElement.prototype;
-
-  _proto.log = function log() {
-    PFElement.log.apply(PFElement, ["[" + this.tag + (this.id ? "#" + this.id : "") + "]"].concat([].slice.call(arguments)));
-  }
-  /**
-   * A console warning wrapper which formats your output with useful debugging information.
-   *
-   * @example PFElement.warn("Hello");
-   */
-  ;
-
-  PFElement.warn = function warn() {
-    var _console2;
-
-    (_console2 = console).warn.apply(_console2, [].slice.call(arguments));
-  }
-  /**
-   * Local warning wrapper that outputs the tag name as a prefix automatically.
-   * For use inside a component's function.
-   * @example this.warn("Hello");
-   */
-  ;
-
-  _proto.warn = function warn() {
-    PFElement.warn.apply(PFElement, ["[" + this.tag + (this.id ? "#" + this.id : "") + "]"].concat([].slice.call(arguments)));
-  }
-  /**
-   * A console error wrapper which formats your output with useful debugging information.
-   * For use inside a component's function.
-   * @example PFElement.error("Hello");
-   */
-  ;
-
-  PFElement.error = function error() {
-    throw new Error([].concat([].slice.call(arguments)).join(" "));
-  }
-  /**
-   * Local error wrapper that outputs the tag name as a prefix automatically.
-   * For use inside a component's function.
-   * @example this.error("Hello");
-   */
-  ;
-
-  _proto.error = function error() {
-    PFElement.error.apply(PFElement, ["[" + this.tag + (this.id ? "#" + this.id : "") + "]"].concat([].slice.call(arguments)));
-  }
-  /**
-   * A global definition of component types (a general way of defining the purpose of a
-   * component and how it is put together).
-   */
-  ;
-
-  /**
-   * Returns a boolean statement of whether or not this component contains any light DOM.
-   * @returns {boolean}
-   * @example if(this.hasLightDOM()) this._init();
-   */
-  _proto.hasLightDOM = function hasLightDOM() {
-    return this.children.length || this.textContent.trim().length;
-  }
-  /**
-   * Returns a boolean statement of whether or not that slot exists in the light DOM.
-   *
-   * @param {String|Array} name The slot name.
-   * @example this.hasSlot("header");
-   */
-  ;
-
-  _proto.hasSlot = function hasSlot(name) {
-    var _this2 = this;
-
-    if (!name) {
-      this.warn("Please provide at least one slot name for which to search.");
-      return;
-    }
-
-    if (typeof name === "string") {
-      return [].concat(this.children).filter(function (child) {
-        return child.hasAttribute("slot") && child.getAttribute("slot") === name;
-      }).length > 0;
-    } else if (Array.isArray(name)) {
-      return name.reduce(function (n) {
-        return [].concat(_this2.children).filter(function (child) {
-          return child.hasAttribute("slot") && child.getAttribute("slot") === n;
-        }).length > 0;
-      });
-    } else {
-      this.warn("Expected hasSlot argument to be a string or an array, but it was given: " + typeof name + ".");
-      return;
-    }
-  }
-  /**
-   * Given a slot name, returns elements assigned to the slot as an arry.
-   * If no value is provided (i.e., `this.getSlot()`), it returns all children not assigned to a slot (without a slot attribute).
-   *
-   * @example: `this.getSlot("header")`
-   */
-  ;
-
-  _proto.getSlot = function getSlot(name) {
-    if (name === void 0) {
-      name = "unassigned";
-    }
-
-    if (name !== "unassigned") {
-      return [].concat(this.children).filter(function (child) {
-        return child.hasAttribute("slot") && child.getAttribute("slot") === name;
-      });
-    } else {
-      return [].concat(this.children).filter(function (child) {
-        return !child.hasAttribute("slot");
-      });
-    }
-  };
-
-  _proto.cssVariable = function cssVariable(name, value, element) {
-    if (element === void 0) {
-      element = this;
-    }
-
-    name = name.substr(0, 2) !== "--" ? "--" + name : name;
-
-    if (value) {
-      element.style.setProperty(name, value);
-      return value;
-    }
-
-    return window.getComputedStyle(element).getPropertyValue(name).trim() || null;
-  }
-  /**
-   * This alerts nested components to a change in the context
-   */
-  ;
-
-  _proto.contextUpdate = function contextUpdate() {
-    var _this3 = this;
-
-    // Loop over light DOM elements, find direct descendants that are components
-    var lightEls = [].concat(this.querySelectorAll("*")).filter(function (item) {
-      return item.tagName.toLowerCase().slice(0, 4) === prefix + "-";
-    }) // Closest will return itself or it's ancestor matching that selector
-    .filter(function (item) {
-      // If there is no parent element, return null
-      if (!item.parentElement) return; // Otherwise, find the closest component that's this one
-      else return item.parentElement.closest("[" + _this3._pfeClass._getCache("prop2attr").pfelement + "]") === _this3;
-    }); // Loop over shadow elements, find direct descendants that are components
-
-    var shadowEls = [].concat(this.shadowRoot.querySelectorAll("*")).filter(function (item) {
-      return item.tagName.toLowerCase().slice(0, 4) === prefix + "-";
-    }) // Closest will return itself or it's ancestor matching that selector
-    .filter(function (item) {
-      // If there is a parent element and we can find another web component in the ancestor tree
-      if (item.parentElement && item.parentElement.closest("[" + _this3._pfeClass._getCache("prop2attr").pfelement + "]")) {
-        return item.parentElement.closest("[" + _this3._pfeClass._getCache("prop2attr").pfelement + "]") === _this3;
-      } // Otherwise, check if the host matches this context
-
-
-      if (item.getRootNode().host === _this3) return true; // If neither state is true, return false
-
-      return false;
-    });
-    var nestedEls = lightEls.concat(shadowEls); // If nested elements don't exist, return without processing
-
-    if (nestedEls.length === 0) return; // Loop over the nested elements and reset their context
-
-    nestedEls.map(function (child) {
-      if (child.resetContext) {
-        _this3.log("Update context of " + child.tagName.toLowerCase()); // Ask the component to recheck it's context in case it changed
-
-
-        child.resetContext(_this3.on);
-      }
-    });
-  };
-
-  _proto.resetContext = function resetContext(fallback) {
-    if (this.isIE11) return; // Priority order for context values to be pulled from:
-    //--> 1. context (OLD: pfe-theme)
-    //--> 2. --context (OLD: --theme)
-
-    var value = this.context || this.contextVariable || fallback; // Validate that the current context (this.on) and the new context (value) are the same OR
-    // no context is set and there isn't a new context being set
-
-    if (this.on === value || !this.on && !value) return;
-    this.log("Resetting context from " + this.on + " to " + (value || "null"));
-    this.on = value;
-  };
-
-  function PFElement(pfeClass, _temp) {
-    var _this;
-
-    var _ref = _temp === void 0 ? {} : _temp,
-        _ref$type = _ref.type,
-        type = _ref$type === void 0 ? null : _ref$type,
-        _ref$delayRender = _ref.delayRender,
-        delayRender = _ref$delayRender === void 0 ? false : _ref$delayRender;
-
-    _this = _HTMLElement.call(this) || this;
-    _this._pfeClass = pfeClass;
-    _this.tag = pfeClass.tag;
-    _this._parseObserver = _this._parseObserver.bind(_assertThisInitialized(_this));
-    _this.isIE11 = /MSIE|Trident|Edge\//.test(window.navigator.userAgent); // Initialize the array of jump links pointers
-    // Expects items in the array to be NodeItems
-
-    if (!_this._pfeClass.instances || !(_this._pfeClass.instances.length >= 0)) _this._pfeClass.instances = []; // Set up the mark ID based on existing ID on component if it exists
-
-    if (!_this.id) {
-      _this._markId = _this.randomId.replace("pfe", _this.tag);
-    } else if (_this.id.startsWith("pfe-") && !_this.id.startsWith(_this.tag)) {
-      _this._markId = _this.id.replace("pfe", _this.tag);
-    } else {
-      _this._markId = _this.tag + "-" + _this.id;
-    }
-
-    _this._markCount = 0; // TODO: Deprecated for 1.0 release
-
-    _this.schemaProps = pfeClass.schemaProperties; // TODO: Migrate this out of schema for 1.0
-
-    _this.slots = pfeClass.slots;
-    _this.template = document.createElement("template"); // Set the default value to the passed in type
-
-    if (type && _this._pfeClass.allProperties.type) _this._pfeClass.allProperties.type["default"] = type; // Initalize the properties and attributes from the property getter
-
-    _this._initializeProperties();
-
-    _this.attachShadow({
-      mode: "open"
-    }); // Tracks if the component has been initially rendered. Useful if for debouncing
-    // template updates.
-
-
-    _this._rendered = false;
-    if (!delayRender) _this.render();
-    return _this;
-  }
-  /**
-   * Standard connected callback; fires when the component is added to the DOM.
-   */
-
-
-  _proto.connectedCallback = function connectedCallback() {
-    var _this4 = this;
-
-    this._initializeAttributeDefaults();
-
-    if (window.ShadyCSS) window.ShadyCSS.styleElement(this); // Register this instance with the pointer for the scoped class and the global context
-
-    this._pfeClass.instances.push(this);
-
-    PFElement.allInstances.push(this); // If the slot definition exists, set up an observer
-
-    if (typeof this.slots === "object") {
-      this._slotsObserver = new MutationObserver(function () {
-        return _this4._initializeSlots(_this4.tag, _this4.slots);
-      });
-
-      this._initializeSlots(this.tag, this.slots);
-    }
-  }
-  /**
-   * Standard disconnected callback; fires when a componet is removed from the DOM.
-   * Add your removeEventListeners here.
-   */
-  ;
-
-  _proto.disconnectedCallback = function disconnectedCallback() {
-    var _this5 = this;
-
-    if (this._cascadeObserver) this._cascadeObserver.disconnect();
-    if (this._slotsObserver) this._slotsObserver.disconnect(); // Remove this instance from the pointer
-
-    var classIdx = this._pfeClass.instances.find(function (item) {
-      return item !== _this5;
-    });
-
-    delete this._pfeClass.instances[classIdx];
-    var globalIdx = PFElement.allInstances.find(function (item) {
-      return item !== _this5;
-    });
-    delete PFElement.allInstances[globalIdx];
-  }
-  /**
-   * Attribute changed callback fires when attributes are updated.
-   * This combines the global and the component-specific logic.
-   */
-  ;
-
-  _proto.attributeChangedCallback = function attributeChangedCallback(attr, oldVal, newVal) {
-    if (!this._pfeClass.allProperties) return;
-
-    var propName = this._pfeClass._attr2prop(attr);
-
-    var propDef = this._pfeClass.allProperties[propName]; // If the attribute that changed derives from a property definition
-
-    if (propDef) {
-      // If the property/attribute pair has an alias, copy the new value to the alias target
-      if (propDef.alias) {
-        var aliasedPropDef = this._pfeClass.allProperties[propDef.alias];
-
-        var aliasedAttr = this._pfeClass._prop2attr(propDef.alias);
-
-        var aliasedAttrVal = this.getAttribute(aliasedAttr);
-
-        if (aliasedAttrVal !== newVal) {
-          this[propDef.alias] = this._castPropertyValue(aliasedPropDef, newVal);
-        }
-      } // If the property/attribute pair has an observer, fire it
-      // Observers receive the oldValue and the newValue from the attribute changed callback
-
-
-      if (propDef.observer) {
-        this[propDef.observer](this._castPropertyValue(propDef, oldVal), this._castPropertyValue(propDef, newVal));
-      } // If the property/attribute pair has a cascade target, copy the attribute to the matching elements
-      // Note: this handles the cascading of new/updated attributes
-
-
-      if (propDef.cascade) {
-        this._cascadeAttribute(attr, this._pfeClass._convertSelectorsToArray(propDef.cascade));
-      }
-    }
-  }
-  /**
-   * Standard render function.
-   */
-  ;
-
-  _proto.render = function render() {
-    this.shadowRoot.innerHTML = "";
-    this.template.innerHTML = this.html;
-
-    if (window.ShadyCSS) {
-      window.ShadyCSS.prepareTemplate(this.template, this.tag);
-    }
-
-    this.shadowRoot.appendChild(this.template.content.cloneNode(true));
-    this.log("render"); // Cascade properties to the rendered template
-
-    this.cascadeProperties(); // Update the display context
-
-    this.contextUpdate();
-
-    if (PFElement.trackPerformance()) {
-      try {
-        performance.mark(this._markId + "-rendered");
-
-        if (this._markCount < 1) {
-          this._markCount = this._markCount + 1; // Navigation start, i.e., the browser first sees that the user has navigated to the page
-
-          performance.measure(this._markId + "-from-navigation-to-first-render", undefined, this._markId + "-rendered"); // Render is run before connection unless delayRender is used
-
-          performance.measure(this._markId + "-from-defined-to-first-render", this._markId + "-defined", this._markId + "-rendered");
-        }
-      } catch (err) {
-        this.log("Performance marks are not supported by this browser.");
-      }
-    } // If the slot definition exists, set up an observer
-
-
-    if (typeof this.slots === "object" && this._slotsObserver) {
-      this._slotsObserver.observe(this, {
-        childList: true
-      });
-    } // If an observer was defined, set it to begin observing here
-
-
-    if (this._cascadeObserver) {
-      this._cascadeObserver.observe(this, {
-        attributes: true,
-        childList: true,
-        subtree: true
-      });
-    }
-
-    this._rendered = true;
-  }
-  /**
-   * A wrapper around an event dispatch to standardize formatting.
-   */
-  ;
-
-  _proto.emitEvent = function emitEvent(name, _temp2) {
-    var _ref2 = _temp2 === void 0 ? {} : _temp2,
-        _ref2$bubbles = _ref2.bubbles,
-        bubbles = _ref2$bubbles === void 0 ? true : _ref2$bubbles,
-        _ref2$cancelable = _ref2.cancelable,
-        cancelable = _ref2$cancelable === void 0 ? false : _ref2$cancelable,
-        _ref2$composed = _ref2.composed,
-        composed = _ref2$composed === void 0 ? true : _ref2$composed,
-        _ref2$detail = _ref2.detail,
-        detail = _ref2$detail === void 0 ? {} : _ref2$detail;
-
-    if (detail) this.log("Custom event: " + name, detail);else this.log("Custom event: " + name);
-    this.dispatchEvent(new CustomEvent(name, {
-      bubbles: bubbles,
-      cancelable: cancelable,
-      composed: composed,
-      detail: detail
-    }));
-  }
-  /**
-   * Handles the cascading of properties to nested components when new elements are added
-   * Attribute updates/additions are handled by the attribute callback
-   */
-  ;
-
-  _proto.cascadeProperties = function cascadeProperties(nodeList) {
-    var _this6 = this;
-
-    var cascade = this._pfeClass._getCache("cascadingProperties");
-
-    if (cascade) {
-      if (this._cascadeObserver) this._cascadeObserver.disconnect();
-      var selectors = Object.keys(cascade); // Find out if anything in the nodeList matches any of the observed selectors for cacading properties
-
-      if (selectors) {
-        if (nodeList) {
-          [].concat(nodeList).forEach(function (nodeItem) {
-            selectors.forEach(function (selector) {
-              // if this node has a match function (i.e., it's an HTMLElement, not
-              // a text node), see if it matches the selector, otherwise drop it (like it's hot).
-              if (nodeItem.matches && nodeItem.matches(selector)) {
-                var attrNames = cascade[selector]; // each selector can match multiple properties/attributes, so
-                // copy each of them
-
-                attrNames.forEach(function (attrName) {
-                  return _this6._copyAttribute(attrName, nodeItem);
-                });
-              }
-            });
-          });
-        } else {
-          // If a match was found, cascade each attribute to the element
-          var components = selectors.filter(function (item) {
-            return item.slice(0, prefix.length + 1) === prefix + "-";
-          }).map(function (name) {
-            return customElements.whenDefined(name);
-          });
-          if (components) Promise.all(components).then(function () {
-            _this6._cascadeAttributes(selectors, cascade);
-          });else this._cascadeAttributes(selectors, cascade);
-        }
-      }
-
-      if (this._rendered && this._cascadeObserver) this._cascadeObserver.observe(this, {
-        attributes: true,
-        childList: true,
-        subtree: true
-      });
-    }
-  }
-  /* --- Observers for global properties --- */
-
-  /**
-   * This responds to changes in the pfelement attribute; indicates if the component upgraded
-   * @TODO maybe we should use just the attribute instead of the class?
-   * https://github.com/angular/angular/issues/15399#issuecomment-318785677
-   */
-  ;
-
-  _proto._upgradeObserver = function _upgradeObserver() {
-    this.classList.add("PFElement");
-  }
-  /**
-   * This responds to changes in the context attribute; manual override tool
-   */
-  ;
-
-  _proto._contextObserver = function _contextObserver(oldValue, newValue) {
-    if (newValue && (oldValue && oldValue !== newValue || !oldValue)) {
-      this.log("Running the context observer");
-      this.on = newValue;
-      this.cssVariable("context", newValue);
-    }
-  }
-  /**
-   * This responds to changes in the context; source of truth for components
-   */
-  ;
-
-  _proto._onObserver = function _onObserver(oldValue, newValue) {
-    if (oldValue && oldValue !== newValue || newValue && !oldValue) {
-      this.log("Context update"); // Fire an event for child components
-
-      this.contextUpdate();
-    }
-  }
-  /**
-   * This responds to inline style changes and greps for context or theme updates.
-   * @TODO: --theme will be deprecated in 2.0
-   */
-  ;
-
-  _proto._inlineStyleObserver = function _inlineStyleObserver(oldValue, newValue) {
-    if (oldValue === newValue) return; // If there are no inline styles, a context might have been deleted, so call resetContext
-
-    if (!newValue) this.resetContext();else {
-      this.log("Style observer activated on " + this.tag, "" + (newValue || "null")); // Grep for context/theme
-
-      var regex = /--[\w|-]*(?:context|theme):\s*(?:\"*(light|dark|saturated)\"*)/gi;
-      var match = regex.exec(newValue); // If no match is returned, exit the observer
-
-      if (!match) return;
-      var newContext = match[1]; // If the new context value differs from the on value, update
-
-      if (newContext !== this.on && !this.context) this.on = newContext;
-    }
-  }
-  /**
-   * This is connected with a mutation observer that watches for updates to the light DOM
-   * and pushes down the cascading values
-   */
-  ;
-
-  _proto._parseObserver = function _parseObserver(mutationsList) {
-    // Iterate over the mutation list, look for cascade updates
-    for (var _iterator = _createForOfIteratorHelperLoose(mutationsList), _step; !(_step = _iterator()).done;) {
-      var mutation = _step.value;
-
-      // If a new node is added, attempt to cascade attributes to it
-      if (mutation.type === "childList" && mutation.addedNodes.length) {
-        var nonTextNodes = [].concat(mutation.addedNodes).filter(function (n) {
-          return n.nodeType !== HTMLElement.TEXT_NODE;
-        });
-        this.cascadeProperties(nonTextNodes);
-      }
-    }
-  }
-  /* --- End observers --- */
-
-  /**
-   * Validate that the property meets the requirements for type and naming.
-   */
-  ;
-
-  PFElement._validateProperties = function _validateProperties() {
-    for (var propName in this.allProperties) {
-      var propDef = this.allProperties[propName]; // Verify that properties conform to the allowed data types
-
-      if (!isAllowedType(propDef)) {
-        this.error("Property \"" + propName + "\" on " + this.name + " must have type String, Number, or Boolean.");
-      } // Verify the property name conforms to our naming rules
-
-
-      if (!/^[a-z_]/.test(propName)) {
-        this.error("Property " + this.name + "." + propName + " defined, but prop names must begin with a lower-case letter or an underscore");
-      }
-
-      var isFunction = typeof propDef["default"] === "function"; // If the default value is not the same type as defined by the property
-      // and it's not a function (we can't validate the output of the function
-      // on the class level), throw a warning
-
-      if (propDef["default"] && !isValidDefaultType(propDef) && !isFunction) this.error("[" + this.name + "] The default value `" + propDef["default"] + "` does not match the assigned type " + propDef.type.name + " for the '" + propName + "' property");
-    }
-  }
-  /**
-   * Convert provided property value to the correct type as defined in the properties method.
-   */
-  ;
-
-  _proto._castPropertyValue = function _castPropertyValue(propDef, attrValue) {
-    var _attrValue$null$NaN$u, _attrValue$undefined$;
-
-    switch (propDef.type) {
-      case Number:
-        // map various attribute string values to their respective
-        // desired property values
-        return (_attrValue$null$NaN$u = {}, _attrValue$null$NaN$u[attrValue] = Number(attrValue), _attrValue$null$NaN$u["null"] = null, _attrValue$null$NaN$u.NaN = NaN, _attrValue$null$NaN$u.undefined = undefined, _attrValue$null$NaN$u)[attrValue];
-
-      case Boolean:
-        return attrValue !== null;
-
-      case String:
-        return (_attrValue$undefined$ = {}, _attrValue$undefined$[attrValue] = attrValue, _attrValue$undefined$.undefined = undefined, _attrValue$undefined$)[attrValue];
-
-      default:
-        return attrValue;
-    }
-  }
-  /**
-   * Map provided value to the attribute name on the component.
-   */
-  ;
-
-  _proto._assignValueToAttribute = function _assignValueToAttribute(obj, attr, value) {
-    // If the default is false and the property is boolean, we don't need to do anything
-    var isBooleanFalse = obj.type === Boolean && !value;
-    var isNull = value === null;
-    var isUndefined = typeof value === "undefined"; // If the attribute is not defined, set the default value
-
-    if (isBooleanFalse || isNull || isUndefined) {
-      this.removeAttribute(attr);
-    } else {
-      // Boolean values get an empty string: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes
-      if (obj.type === Boolean && typeof value === "boolean") {
-        this.setAttribute(attr, "");
-      } else {
-        // Validate against the provided values
-        if (obj.values) {
-          this._validateAttributeValue(obj, attr, value);
-        } // Still accept the value provided even if it's not valid
-
-
-        this.setAttribute(attr, value);
-      }
-    }
-  }
-  /**
-   * Maps the defined slots into an object that is easier to query
-   */
-  ;
-
-  _proto._initializeSlots = function _initializeSlots(tag, slots) {
-    var _this7 = this;
-
-    this.log("Validate slots...");
-    if (this._slotsObserver) this._slotsObserver.disconnect(); // Loop over the properties provided by the schema
-
-    Object.keys(slots).forEach(function (slot) {
-      var slotObj = slots[slot]; // Only attach the information if the data provided is a schema object
-
-      if (typeof slotObj === "object") {
-        var slotExists = false;
-        var result = []; // If it's a named slot, look for that slot definition
-
-        if (slotObj.namedSlot) {
-          // Check prefixed slots
-          result = _this7.getSlot(tag + "--" + slot);
-
-          if (result.length > 0) {
-            slotObj.nodes = result;
-            slotExists = true;
-          } // Check for unprefixed slots
-
-
-          result = _this7.getSlot("" + slot);
-
-          if (result.length > 0) {
-            slotObj.nodes = result;
-            slotExists = true;
-          } // If it's the default slot, look for direct children not assigned to a slot
-
-        } else {
-          result = [].concat(_this7.children).filter(function (child) {
-            return !child.hasAttribute("slot");
-          });
-
-          if (result.length > 0) {
-            slotObj.nodes = result;
-            slotExists = true;
-          }
-        } // If the slot exists, attach an attribute to the parent to indicate that
-
-
-        if (slotExists) {
-          _this7.setAttribute("has_" + slot, "");
-        } else {
-          _this7.removeAttribute("has_" + slot);
-        }
-      }
-    });
-    this.log("Slots validated.");
-    if (this._slotsObserver) this._slotsObserver.observe(this, {
-      childList: true
-    });
-  }
-  /**
-   * Sets up the property definitions based on the properties method.
-   */
-  ;
-
-  _proto._initializeProperties = function _initializeProperties() {
-    var _this8 = this;
-
-    var properties = this._pfeClass.allProperties;
-    var hasCascade = false;
-    if (Object.keys(properties).length > 0) this.log("Initialize properties");
-
-    var _loop = function _loop(propName) {
-      var propDef = properties[propName]; // Check if the property exists, throw a warning if it does.
-      // HTMLElements have a LOT of properties; it wouldn't be hard
-      // to overwrite one accidentally.
-
-      if (typeof _this8[propName] !== "undefined") {
-        _this8.log("Property \"" + propName + "\" on " + _this8.constructor.name + " cannot be defined because the property name is reserved");
-      } else {
-        var attrName = _this8._pfeClass._prop2attr(propName);
-
-        if (propDef.cascade) hasCascade = true;
-        Object.defineProperty(_this8, propName, {
-          get: function get() {
-            var attrValue = _this8.getAttribute(attrName);
-
-            return _this8._castPropertyValue(propDef, attrValue);
-          },
-          set: function set(rawNewVal) {
-            // Assign the value to the attribute
-            _this8._assignValueToAttribute(propDef, attrName, rawNewVal);
-
-            return rawNewVal;
-          },
-          writeable: true,
-          enumerable: true,
-          configurable: false
-        });
-      }
-    };
-
-    for (var propName in properties) {
-      _loop(propName);
-    } // If any of the properties has cascade, attach a new mutation observer to the component
-
-
-    if (hasCascade) {
-      this._cascadeObserver = new MutationObserver(this._parseObserver);
-    }
-  }
-  /**
-   * Intialize the default value for an attribute.
-   */
-  ;
-
-  _proto._initializeAttributeDefaults = function _initializeAttributeDefaults() {
-    var properties = this._pfeClass.allProperties;
-
-    for (var propName in properties) {
-      var propDef = properties[propName];
-
-      var attrName = this._pfeClass._prop2attr(propName);
-
-      if (propDef.hasOwnProperty("default")) {
-        var value = propDef["default"]; // Check if default is a function
-
-        if (typeof propDef["default"] === "function") {
-          value = propDef["default"](this);
-        } // If the attribute has not already been set, assign the default value
-
-
-        if (!this.hasAttribute(attrName)) {
-          // Assign the value to the attribute
-          this._assignValueToAttribute(propDef, attrName, value);
-        }
-      }
-    }
-  }
-  /**
-   * Validate the value against provided values.
-   */
-  // @TODO add support for a validation function
-  ;
-
-  _proto._validateAttributeValue = function _validateAttributeValue(propDef, attr, value) {
-    if (Array.isArray(propDef.values) && propDef.values.length > 0 && !propDef.values.includes(value) // ||
-    // (typeof propDef.values === "string" && propDef.values !== value) ||
-    // (typeof propDef.values === "function" && !propDef.values(value))
-    ) {
-      this.warn(value + " is not a valid value for " + attr + ". Please provide one of the following values: " + propDef.values.join(", "));
-    }
-
-    return value;
-  }
-  /**
-   * Look up an attribute name linked to a given property name.
-   */
-  ;
-
-  PFElement._prop2attr = function _prop2attr(propName) {
-    return this._getCache("prop2attr")[propName];
-  }
-  /**
-   * Look up an property name linked to a given attribute name.
-   */
-  ;
-
-  PFElement._attr2prop = function _attr2prop(attrName) {
-    return this._getCache("attr2prop")[attrName];
-  }
-  /**
-   * Convert a property name to an attribute name.
-   */
-  ;
-
-  PFElement._convertPropNameToAttrName = function _convertPropNameToAttrName(propName) {
-    var propDef = this.allProperties[propName];
-
-    if (propDef.attr) {
-      return propDef.attr;
-    }
-
-    return propName.replace(/^_/, "").replace(/^[A-Z]/, function (l) {
-      return l.toLowerCase();
-    }).replace(/[A-Z]/g, function (l) {
-      return "-" + l.toLowerCase();
-    });
-  }
-  /**
-   * Convert an attribute name to a property name.
-   */
-  ;
-
-  PFElement._convertAttrNameToPropName = function _convertAttrNameToPropName(attrName) {
-    for (var prop in this.allProperties) {
-      if (this.allProperties[prop].attr === attrName) {
-        return prop;
-      }
-    } // Convert the property name to kebab case
-
-
-    var propName = attrName.replace(/-([A-Za-z])/g, function (l) {
-      return l[1].toUpperCase();
-    });
-    return propName;
-  };
-
-  _proto._cascadeAttributes = function _cascadeAttributes(selectors, set) {
-    var _this9 = this;
-
-    selectors.forEach(function (selector) {
-      set[selector].forEach(function (attr) {
-        _this9._cascadeAttribute(attr, selector);
-      });
-    });
-  }
-  /**
-   * Trigger a cascade of the named attribute to any child elements that match
-   * the `to` selector.  The selector can match elements in the light DOM and
-   * shadow DOM.
-   * @param {String} name The name of the attribute to cascade (not necessarily the same as the property name).
-   * @param {String} to A CSS selector that matches the elements that should received the cascaded attribute.  The selector will be applied within `this` element's light and shadow DOM trees.
-   */
-  ;
-
-  _proto._cascadeAttribute = function _cascadeAttribute(name, to) {
-    var recipients = [].concat(this.querySelectorAll(to), this.shadowRoot.querySelectorAll(to));
-
-    for (var _iterator2 = _createForOfIteratorHelperLoose(recipients), _step2; !(_step2 = _iterator2()).done;) {
-      var node = _step2.value;
-
-      this._copyAttribute(name, node);
-    }
-  }
-  /**
-   * Copy the named attribute to a target element.
-   */
-  ;
-
-  _proto._copyAttribute = function _copyAttribute(name, el) {
-    this.log("copying " + name + " to " + el);
-    var value = this.getAttribute(name);
-    var fname = value == null ? "removeAttribute" : "setAttribute";
-    el[fname](name, value);
-  };
-
-  PFElement._convertSelectorsToArray = function _convertSelectorsToArray(selectors) {
-    if (selectors) {
-      if (typeof selectors === "string") return selectors.split(",");else if (typeof selectors === "object") return selectors;else {
-        this.warn("selectors should be provided as a string, array, or object; received: " + typeof selectors + ".");
-      }
-    }
-
-    return;
-  };
-
-  PFElement._parsePropertiesForCascade = function _parsePropertiesForCascade(mergedProperties) {
-    var _this10 = this;
-
-    var cascadingProperties = {}; // Parse the properties to pull out attributes that cascade
-
-    var _loop2 = function _loop2() {
-      var _Object$entries$_i = _Object$entries[_i],
-          propName = _Object$entries$_i[0],
-          config = _Object$entries$_i[1];
-
-      var cascadeTo = _this10._convertSelectorsToArray(config.cascade); // Iterate over each node in the cascade list for this property
-
-
-      if (cascadeTo) cascadeTo.map(function (nodeItem) {
-        var attr = _this10._prop2attr(propName); // Create an object with the node as the key and an array of attributes
-        // that are to be cascaded down to it
-
-
-        if (!cascadingProperties[nodeItem]) cascadingProperties[nodeItem] = [attr];else cascadingProperties[nodeItem].push(attr);
-      });
-    };
-
-    for (var _i = 0, _Object$entries = Object.entries(mergedProperties); _i < _Object$entries.length; _i++) {
-      _loop2();
-    }
-
-    return cascadingProperties;
-  }
-  /**
-   * Caching the attributes and properties data for efficiency
-   */
-  ;
-
-  PFElement.create = function create(pfe) {
-    pfe._createCache();
-
-    pfe._populateCache(pfe);
-
-    pfe._validateProperties();
-
-    try {
-      window.customElements.define(pfe.tag, pfe);
-    } catch (err) {
-      // Capture the class currently using this tag in the registry
-      var prevDefinition = window.customElements.get(pfe.tag); // Check if the previous definition's version matches this one
-
-      if (prevDefinition && prevDefinition.version !== pfe.version) {
-        this.warn(pfe.tag + " was registered at version " + prevDefinition.version + "; cannot register version " + pfe.version + ".");
-      } // @TODO Should this error be reported to the console?
-
-
-      if (err && err.message) this.log(err.message);
-    }
-
-    if (PFElement.trackPerformance()) {
-      try {
-        performance.mark(this._markId + "-defined");
-      } catch (err) {
-        this.log("Performance marks are not supported by this browser.");
-      }
-    }
-  };
-
-  PFElement._createCache = function _createCache() {
-    this._cache = {
-      properties: {},
-      globalProperties: {},
-      componentProperties: {},
-      cascadingProperties: {},
-      attr2prop: {},
-      prop2attr: {}
-    };
-  }
-  /**
-   * Cache an object in a given cache namespace.  This overwrites anything
-   * already in that namespace.
-   */
-  ;
-
-  PFElement._setCache = function _setCache(namespace, object) {
-    this._cache[namespace] = object;
-  }
-  /**
-   * Get a cached object by namespace, or get all cached objects.
-   */
-  ;
-
-  PFElement._getCache = function _getCache(namespace) {
-    return namespace ? this._cache[namespace] : this._cache;
-  }
-  /**
-   * Populate initial values for properties cache.
-   */
-  ;
-
-  PFElement._populateCache = function _populateCache(pfe) {
-    // @TODO add a warning when a component property conflicts with a global property.
-    var mergedProperties = _extends({}, pfe.properties, PFElement.properties);
-
-    pfe._setCache("componentProperties", pfe.properties);
-
-    pfe._setCache("globalProperties", PFElement.properties);
-
-    pfe._setCache("properties", mergedProperties); // create mapping objects to go from prop name to attrname and back
-
-
-    var prop2attr = {};
-    var attr2prop = {};
-
-    for (var propName in mergedProperties) {
-      var attrName = this._convertPropNameToAttrName(propName);
-
-      prop2attr[propName] = attrName;
-      attr2prop[attrName] = propName;
-    }
-
-    pfe._setCache("attr2prop", attr2prop);
-
-    pfe._setCache("prop2attr", prop2attr);
-
-    var cascadingProperties = this._parsePropertiesForCascade(mergedProperties);
-
-    if (Object.keys(cascadingProperties)) pfe._setCache("cascadingProperties", cascadingProperties);
-  }
-  /**
-   * allProperties returns an object containing PFElement's global properties
-   * and the descendents' (such as PfeCard, etc) component properties.  The two
-   * objects are merged together and in the case of a property name conflict,
-   * PFElement's properties override the component's properties.
-   */
-  ;
-
-  _createClass(PFElement, [{
-    key: "version",
-    get:
-    /**
-     * A local alias to the static version.
-     * For use in the console to validate version being loaded.
-     * @example PfeAccordion.version
-     */
-    function get() {
-      return this._pfeClass.version;
-    }
-    /**
-     * Global property definitions: properties managed by the base class that apply to all components.
-     */
-
-  }, {
-    key: "randomId",
-    get:
-    /**
-     * A quick way to fetch a random ID value.
-     * _Note:_ All values are prefixes with `pfe` automatically to ensure an ID-safe value is returned.
-     *
-     * @example this.id = this.randomID;
-     */
-    function get() {
-      return prefix + "-" + Math.random().toString(36).substr(2, 9);
-    }
-    /**
-     * Set the --context variable with the provided value in this component.
-     */
-
-  }, {
-    key: "contextVariable",
-    get:
-    /**
-     * Get the current value of the --context variable in this component.
-     * @return {string} [dark|light|saturated]
-     */
-    function get() {
-      /* @DEPRECATED --theme in 1.0, to be removed in 2.0 */
-      return this.cssVariable("context") || this.cssVariable("theme");
-    },
-    set: function set(value) {
-      this.cssVariable("context", value);
-    }
-  }], [{
-    key: "config",
-    get: function get() {
-      // @TODO: Add config validation in the future.
-      return window.PfeConfig || {};
-    }
-  }, {
-    key: "PfeTypes",
-    get: function get() {
-      return {
-        Container: "container",
-        Content: "content",
-        Combo: "combo"
-      };
-    }
-    /**
-     * The current version of a component; set by the compiler using the package.json data.
-     */
-
-  }, {
-    key: "version",
-    get: function get() {
-      return "1.12.3";
-    }
-  }, {
-    key: "properties",
-    get: function get() {
-      return {
-        pfelement: {
-          title: "Upgraded flag",
-          type: Boolean,
-          "default": true,
-          observer: "_upgradeObserver"
-        },
-        on: {
-          title: "Context",
-          description: "Describes the visual context (backgrounds).",
-          type: String,
-          values: ["light", "dark", "saturated"],
-          "default": function _default(el) {
-            return el.contextVariable;
-          },
-          observer: "_onObserver"
-        },
-        context: {
-          title: "Context hook",
-          description: "Lets you override the system-set context.",
-          type: String,
-          values: ["light", "dark", "saturated"],
-          observer: "_contextObserver"
-        },
-        // @TODO: Deprecated with 1.0
-        oldTheme: {
-          type: String,
-          values: ["light", "dark", "saturated"],
-          alias: "context",
-          attr: "pfe-theme"
-        },
-        _style: {
-          title: "Custom styles",
-          type: String,
-          attr: "style",
-          observer: "_inlineStyleObserver"
-        },
-        type: {
-          title: "Component type",
-          type: String,
-          values: ["container", "content", "combo"]
-        }
-      };
-    }
-  }, {
-    key: "observedAttributes",
-    get: function get() {
-      var _this11 = this;
-
-      var properties = this.allProperties;
-
-      if (properties) {
-        var oa = Object.keys(properties).filter(function (prop) {
-          return properties[prop].observer || properties[prop].cascade || properties[prop].alias;
-        }).map(function (p) {
-          return _this11._convertPropNameToAttrName(p);
-        });
-        return [].concat(oa);
-      }
-    }
-  }, {
-    key: "allProperties",
-    get: function get() {
-      return this._getCache("properties");
-    }
-    /**
-     * cascadingProperties returns an object containing PFElement's global properties
-     * and the descendents' (such as PfeCard, etc) component properties.  The two
-     * objects are merged together and in the case of a property name conflict,
-     * PFElement's properties override the component's properties.
-     */
-
-  }, {
-    key: "cascadingProperties",
-    get: function get() {
-      return this._getCache("cascadingProperties");
-    }
-    /**
-     * Breakpoint object mapping human-readable size names to viewport sizes
-     * To overwrite this at the component-level, include `static get breakpoint` in your component's class definition
-     * @returns {Object} keys are t-shirt sizes and values map to screen-sizes (sourced from PF4)
-     */
-
-  }, {
-    key: "breakpoint",
-    get: function get() {
-      return {
-        xs: "0px",
-        // $pf-global--breakpoint--xs: 0 !default;
-        sm: "576px",
-        // $pf-global--breakpoint--sm: 576px !default;
-        md: "768px",
-        // $pf-global--breakpoint--md: 768px !default;
-        lg: "992px",
-        // $pf-global--breakpoint--lg: 992px !default;
-        xl: "1200px",
-        // $pf-global--breakpoint--xl: 1200px !default;
-        "2xl": "1450px" // $pf-global--breakpoint--2xl: 1450px !default;
-
-      };
-    }
-  }]);
-
-  return PFElement;
-}( /*#__PURE__*/_wrapNativeSuper(HTMLElement)); // Initialize the global instances
-
-
-PFElement.allInstances = [];
-autoReveal(PFElement.log);
-
-// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
-
-if (!Array.prototype.findIndex) {
-  Object.defineProperty(Array.prototype, "findIndex", {
-    value: function value(predicate) {
-      // 1. Let O be ? ToObject(this value).
-      if (this == null) {
-        throw new TypeError('"this" is null or not defined');
-      }
-
-      var o = Object(this); // 2. Let len be ? ToLength(? Get(O, "length")).
-
-      var len = o.length >>> 0; // 3. If IsCallable(predicate) is false, throw a TypeError exception.
-
-      if (typeof predicate !== "function") {
-        throw new TypeError("predicate must be a function");
-      } // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
-
-
-      var thisArg = arguments[1]; // 5. Let k be 0.
-
-      var k = 0; // 6. Repeat, while k < len
-
-      while (k < len) {
-        // a. Let Pk be ! ToString(k).
-        // b. Let kValue be ? Get(O, Pk).
-        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
-        // d. If testResult is true, return k.
-        var kValue = o[k];
-
-        if (predicate.call(thisArg, kValue, k, o)) {
-          return k;
-        } // e. Increase k by 1.
-
-
-        k++;
-      } // 7. Return -1.
-
-
-      return -1;
-    },
-    configurable: true,
-    writable: true
-  });
-}
-/*!
- * PatternFly Elements: PfeTabs 1.12.3
- * @license
- * Copyright 2021 Red Hat, Inc.
- * 
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- * 
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- * 
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- * 
-*/
-
-
-var TAB_CONTENT_MUTATION_CONFIG = {
-  characterData: true,
-  childList: true,
-  subtree: true
-};
-
-var PfeTab = /*#__PURE__*/function (_PFElement) {
-  _inheritsLoose(PfeTab, _PFElement);
-
-  function PfeTab() {
-    var _this;
-
-    _this = _PFElement.call(this, PfeTab, {
-      type: PfeTab.PfeType
-    }) || this;
-    _this._init = _this._init.bind(_assertThisInitialized(_this));
-    _this._setTabContent = _this._setTabContent.bind(_assertThisInitialized(_this));
-    _this._getTabElement = _this._getTabElement.bind(_assertThisInitialized(_this));
-    _this._observer = new MutationObserver(_this._init);
-    return _this;
-  }
-
-  var _proto = PfeTab.prototype;
-
-  _proto.connectedCallback = function connectedCallback() {
-    _PFElement.prototype.connectedCallback.call(this);
-
-    this._tabItem = this.shadowRoot.querySelector("#tab");
-    if (this.hasLightDOM()) this._init();
-
-    this._observer.observe(this, TAB_CONTENT_MUTATION_CONFIG);
-  };
-
-  _proto.disconnectedCallback = function disconnectedCallback() {
-    _PFElement.prototype.disconnectedCallback.call(this);
-
-    this._observer.disconnect();
-  };
-
-  _proto._selectedHandler = function _selectedHandler() {
-    if (this.selected === "true") this.tabindex = 0;else this.tabindex = -1;
-  };
-
-  _proto._oldPfeIdChanged = function _oldPfeIdChanged(oldVal, newVal) {
-    if (!this.id) this.id = newVal;
-  };
-
-  _proto._init = function _init() {
-    if (window.ShadyCSS) this._observer.disconnect(); // Force role to be set to tab
-
-    this.role = "tab"; // Copy the tab content into the template
-
-    this._setTabContent(); // If an ID is not defined, generate a random one
-
-
-    if (!this.id) this.id = this.randomId;
-    if (window.ShadyCSS) this._observer.observe(this, TAB_CONTENT_MUTATION_CONFIG);
-  };
-
-  _proto._getTabElement = function _getTabElement() {
-    // Check if there is no nested element or nested textNodes
-    if (!this.firstElementChild && !this.firstChild) {
-      this.warn("No tab content provided");
-      return;
-    }
-
-    if (this.firstElementChild && this.firstElementChild.tagName) {
-      // If the first element is a slot, query for it's content
-      if (this.firstElementChild.tagName === "SLOT") {
-        var slotted = this.firstElementChild.assignedNodes(); // If there is no content inside the slot, return empty with a warning
-
-        if (slotted.length === 0) {
-          this.warn("No heading information exists within this slot.");
-          return;
-        } // If there is more than 1 element in the slot, capture the first h-tag
-
-
-        if (slotted.length > 1) this.warn("Tab heading currently only supports 1 heading tag.");
-        var htags = slotted.filter(function (slot) {
-          return slot.tagName.match(/^H[1-6]/) || slot.tagName === "P";
-        });
-        if (htags.length > 0) return htags[0];else return;
-      } else if (this.firstElementChild.tagName.match(/^H[1-6]/) || this.firstElementChild.tagName === "P") {
-        return this.firstElementChild;
-      } else {
-        this.warn("Tab heading should contain at least 1 heading tag for correct semantics.");
-      }
-    }
-
-    return;
-  };
-
-  _proto._setTabContent = function _setTabContent() {
-    var label = "";
-    var isTag = false;
-
-    var tabElement = this._getTabElement();
-
-    if (tabElement) {
-      // Copy the tab content into the template
-      label = tabElement.textContent.trim().replace(/\s+/g, " ");
-      isTag = true;
-    }
-
-    if (!tabElement) {
-      // If no element is found, try for a text node
-      if (this.textContent.trim().replace(/\s+/g, " ")) {
-        label = this.textContent.trim().replace(/\s+/g, " ");
-      }
-    }
-
-    if (!label) {
-      this.warn("There does not appear to be any content in the tab region.");
-      return;
-    }
-
-    var semantics = "h3";
-
-    if (isTag) {
-      semantics = tabElement.tagName.toLowerCase();
-    } // Create an h-level tag for the shadow tab, default h3
-    // or use the provided semantics from light DOM
-
-
-    var heading = document.createElement(semantics); // Assign the label content to the new heading
-
-    heading.textContent = label; // Attach the heading to the tabItem
-
-    if (this._tabItem) {
-      this._tabItem.innerHTML = "";
-
-      this._tabItem.appendChild(heading);
-    }
-  };
-
-  _createClass(PfeTab, [{
-    key: "html",
-    get: // Injected at build-time
-    function get() {
-      return "\n<style>:host{text-align:left;position:relative;display:block;cursor:pointer;margin:0 0 calc(1px * -1);margin:var(--pfe-tabs__tab--Margin,0 0 calc(var(--pfe-theme--ui--border-width,1px) * -1));padding:1rem calc(1rem * 2) 1rem calc(1rem * 2);padding:var(--pfe-tabs__tab--PaddingTop,var(--pfe-theme--container-padding,1rem)) var(--pfe-tabs__tab--PaddingRight,calc(var(--pfe-theme--container-padding,1rem) * 2)) var(--pfe-tabs__tab--PaddingBottom,var(--pfe-theme--container-padding,1rem)) var(--pfe-tabs__tab--PaddingLeft,calc(var(--pfe-theme--container-padding,1rem) * 2));border-style:solid;border-style:var(--pfe-theme--ui--border-style,solid);border-width:1px;border-width:var(--pfe-theme--ui--border-width,1px);border-color:transparent;border-bottom-width:3px;border-bottom-width:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px));background-color:none;background-color:var(--pfe-tabs--BackgroundColor--inactive,none);text-align:center;text-align:var(--pfe-tabs__tab--TextAlign,center);text-transform:none;text-transform:var(--pfe-tabs__tab--TextTransform,none);color:#6a6e73;color:var(--pfe-tabs--Color,var(--pfe-theme--color--text--muted,#6a6e73));font-size:1rem;font-size:var(--pfe-tabs__tab--FontSize,var(--pf-global--FontSize--md,1rem));font-family:\"Red Hat Text\",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-tabs__tab--LineHeight, var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif));line-height:1.5;line-height:var(--pfe-tabs__tab--LineHeight,var(--pfe-theme--line-height,1.5));font-weight:400;font-weight:var(--pfe-tabs__tab--FontWeight,var(--pfe-theme--font-weight--normal,400));--pf-c--FontSize:var(--pfe-tabs--FontSize)}:host #tab{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:100%}:host #tab *{font-size:inherit;font-weight:inherit;color:inherit;margin:0}:host([aria-selected=true]){background-color:transparent;background-color:var(--pfe-tabs--BackgroundColor,transparent);border-bottom-color:#06c;border-bottom-color:var(--pfe-tabs--BorderColor,var(--pfe-tabs--highlight,var(--pfe-theme--color--ui-accent,#06c)))}:host([aria-selected=true]) #tab *{color:#151515;color:var(--pfe-tabs--Color--focus,var(--pfe-tabs--focus,var(--pfe-theme--color--text,#151515)))}:host(:active),:host(:hover){background-color:transparent;background-color:var(--pfe-tabs--BackgroundColor,transparent);border-bottom-color:#b8bbbe;border-bottom-color:var(--pfe-tabs--BorderColor--hover,#b8bbbe)}:host(:active) #tab *,:host(:hover) #tab *{color:#151515;color:var(--pfe-tabs--Color--focus,var(--pfe-tabs--focus,var(--pfe-theme--color--text,#151515)))}@media screen and (min-width:768px){:host([vertical]){border-bottom-color:transparent;border-bottom-width:0;border-left-color:#d2d2d2;border-left-color:var(--pfe-theme--color--surface--border,#d2d2d2);border-left-width:1px;border-left-width:var(--pfe-theme--ui--border-width,1px);padding:1rem;padding:var(--pfe-theme--container-padding,1rem);--pfe-tabs--Margin:0 calc(var(--pfe-theme--ui--border-width, 1px) * -1) 0 0}:host([vertical][aria-selected=true]){border-left-color:#06c;border-left-color:var(--pfe-tabs--BorderColor,var(--pfe-tabs--highlight,var(--pfe-theme--color--ui-accent,#06c)));border-left-width:3px}:host([vertical]:not([variant=earth])){border-left:1px solid #d2d2d2;border-left:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2);text-align:left!important}:host([vertical]:not([variant=earth])[aria-selected=true]){border-right:3px solid transparent;border-right:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px)) var(--pfe-theme--ui--border-style,solid) transparent;border-left:3px solid #06c;border-left:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-tabs--BorderColor,var(--pfe-tabs--highlight,var(--pfe-theme--color--ui-accent,#06c)));padding-left:calc(1rem - 2px);padding-left:calc(var(--pfe-theme--container-padding,1rem) - 2px)}:host([vertical]:not([variant=earth])[aria-selected=false]){border-right:3px solid transparent;border-right:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px)) var(--pfe-theme--ui--border-style,solid) transparent}:host([vertical]:not([variant=earth])[aria-selected=false]:hover){border-right:3px solid transparent;border-right:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px)) var(--pfe-theme--ui--border-style,solid) transparent;border-bottom:0;border-left:3px solid #b8bbbe;border-left:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-tabs--BorderColor--hover,#b8bbbe);padding-left:calc(1rem - 2px);padding-left:calc(var(--pfe-theme--container-padding,1rem) - 2px)}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([variant=earth]){background-color:#f0f0f0;color:#6a6e73}}:host(:not([vertical])[variant=earth]:not([aria-selected=true]):first-of-type){border-left-color:transparent}:host(:not([vertical])[variant=earth]:not([aria-selected=true]):last-of-type){border-right-color:transparent}:host([variant=earth][aria-selected=false]){background-color:#f0f0f0;background-color:var(--pfe-tabs--BackgroundColor--inactive,var(--pfe-theme--color--surface--lighter,#f0f0f0));border-color:#d2d2d2;border-color:var(--pfe-theme--color--surface--border,#d2d2d2);border-top-width:3px;border-top-width:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px));border-top-color:transparent;border-bottom-color:#b8bbbe;border-bottom-color:var(--pfe-tabs--BorderColor--hover,#b8bbbe);border-bottom-width:1px;border-bottom-width:var(--pfe-theme--ui--border-width,1px)}:host([variant=earth][aria-selected=false]:hover){border-top-color:#b8bbbe;border-top-color:var(--pfe-tabs--BorderColor--hover,#b8bbbe)}:host([variant=earth][aria-selected=true]){background-color:#fff;background-color:var(--pfe-tabs--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border-bottom:0;border-left-color:#d2d2d2;border-left-color:var(--pfe-theme--color--surface--border,#d2d2d2);border-right-color:#d2d2d2;border-right-color:var(--pfe-theme--color--surface--border,#d2d2d2);border-top:solid #06c 3px;border-top:solid var(--pfe-tabs--BorderColor,var(--pfe-tabs--highlight,var(--pfe-theme--color--ui-accent,#06c))) var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([variant=earth][aria-selected=true]){color:#6a6e73;background-color:#fff;border-left:1px solid #d2d2d2;border-top:3px solid #06c;border-top:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px)) solid var(--pfe-tabs--BorderColor,var(--pfe-tabs--highlight,var(--pfe-theme--color--ui-accent,#06c)));border-bottom:0}}:host([variant=earth][aria-selected=true]:last-of-type){border-right:1px solid #d2d2d2;border-right:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2)}@media screen and (min-width:768px){:host([vertical][variant=earth]){border-top:1px solid #d2d2d2;border-top:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2);border-bottom:1px solid #d2d2d2;border-bottom:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2);border-left-width:3px;border-left-width:var(--pfe-theme--ui--border-width--active,3px);text-align:left}:host([vertical][variant=earth][aria-selected=false]:first-of-type){border-top-color:transparent;border-left:3px solid transparent;border-left:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px)) var(--pfe-theme--ui--border-style,solid) transparent}:host([vertical][variant=earth][aria-selected=false]:last-of-type){border-bottom-color:transparent}:host([vertical][variant=earth][aria-selected=false]){border-right:0;border-bottom-color:transparent;border-left-color:transparent}:host([vertical][variant=earth][aria-selected=false]:hover){border-left-color:#b8bbbe;border-left-color:var(--pfe-tabs--BorderColor--hover,#b8bbbe);border-top-color:#d2d2d2;border-top-color:var(--pfe-theme--color--surface--border,#d2d2d2)}:host([vertical][variant=earth][aria-selected=false]:first-of-type:hover){border-left-color:#d2d2d2;border-left-color:var(--pfe-theme--color--surface--border,#d2d2d2);border-top-color:transparent}:host([vertical][variant=earth][aria-selected=true]){border-top-color:#d2d2d2;border-top-color:var(--pfe-theme--color--surface--border,#d2d2d2);border-left-color:#06c;border-left-color:var(--pfe-tabs--BorderColor,var(--pfe-tabs--highlight,var(--pfe-theme--color--ui-accent,#06c)));border-right-color:transparent;margin-right:-1px}}:host([on=dark][variant=earth]){--pfe-tabs--Color:var(--pfe-theme--color--text--on-dark, #fff);--pfe-tabs--Color--focus:var(--pfe-theme--color--text--on-dark, #fff);border-right-color:#6a6e73;border-right-color:var(--pfe-theme--color--surface--border--darker,#6a6e73);border-left-color:#6a6e73;border-left-color:var(--pfe-theme--color--surface--border--darker,#6a6e73)}:host([on=dark][variant=earth][aria-selected=false]){--pfe-tabs--Color:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-tabs--BackgroundColor--inactive:var(--pfe-theme--color--surface--darker, #3c3f42)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([on=dark][variant=earth][aria-selected=false]){background-color:#fff!important;background-color:var(--pfe-theme--color--surface--lightest,#fff)!important}:host([on=dark][variant=earth][aria-selected=false]) #tab *{color:#151515!important}}:host([on=dark][variant=earth][aria-selected=true]){--pfe-tabs--Color--focus:var(--pfe-theme--color--text--on-dark, #fff);--pfe-tabs--BackgroundColor:var(--pfe-theme--color--surface--darkest, #151515)}:host([variant=earth][on=saturated][aria-selected=false]){--pfe-tabs--BackgroundColor:var(--pfe-theme--color--surface--lighter, #f0f0f0)}:host([variant=earth][on=saturated][aria-selected=true]){--pfe-tabs--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff)}:host([on=saturated]:not([variant=earth])){--pfe-tabs--Color:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-tabs--Color--focus:var(--pfe-theme--color--text--on-saturated, #fff)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([on=saturated]:not([variant=earth])){background-color:transparent}:host([on=saturated]:not([variant=earth])) #tab *{color:#151515!important}}:host([on=saturated]:not([variant=earth])[aria-selected=true]){--pfe-tabs--Color--focus:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-tabs--BorderColor:var(--pfe-theme--color--ui-base--on-saturated, #fff)}:host([on=saturated]:not([variant=earth])[aria-selected=false]){--pfe-tabs--Color:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2)}:host([on=saturated]:not([variant=earth])[aria-selected=false]:hover){--pfe-tabs--BorderColor:var(--pfe-theme--color--surface--border, #d2d2d2)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([on=saturated]:not([variant=earth])[aria-selected=true]:last-of-type){border-left:0!important}}:host([on=dark]:not([variant=earth])){--pfe-tabs--Color:var(--pfe-theme--color--text--on-dark, #fff);--pfe-tabs--Color--focus:var(--pfe-theme--color--text--on-dark, #fff)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([on=dark]:not([variant=earth])) #tab *{color:#151515!important}}:host([on=dark]:not([variant=earth])[aria-selected=false]){--pfe-tabs--Color:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2)}:host([on=dark]:not([variant=earth])[aria-selected=false]:hover){--pfe-tabs--BorderColor:var(--pfe-theme--color--surface--lightest, #fff);border-bottom-color:#f0f0f0;border-bottom-color:var(--pfe-theme--color--surface--base,#f0f0f0);--pfe-tabs__tab--BorderBottom:var(--pfe-tabs--BorderWidth, var(--pfe-theme--ui--border-width--active, 3px)) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #d2d2d2)}:host([on=dark]:not([variant=earth])[vertical][aria-selected=false]:hover){border-bottom-color:transparent} /*# sourceMappingURL=pfe-tab.min.css.map */</style>\n<span id=\"tab\"></span>";
-    }
-  }, {
-    key: "styleUrl",
-    get: function get() {
-      return "pfe-tab.scss";
-    }
-  }, {
-    key: "templateUrl",
-    get: function get() {
-      return "pfe-tab.html";
-    }
-  }], [{
-    key: "version",
-    get: // Injected at build-time
-    function get() {
-      return "1.12.3";
-    }
-  }, {
-    key: "tag",
-    get: function get() {
-      return "pfe-tab";
-    }
-  }, {
-    key: "properties",
-    get: function get() {
-      return {
-        selected: {
-          title: "Selected tab",
-          type: String,
-          "default": "false",
-          attr: "aria-selected",
-          values: ["true", "false"],
-          observer: "_selectedHandler"
-        },
-        controls: {
-          title: "Connected panel ID",
-          type: String,
-          attr: "aria-controls"
-        },
-        role: {
-          type: String,
-          "default": "tab"
-        },
-        tabindex: {
-          type: Number,
-          "default": -1
-        },
-        variant: {
-          title: "Variant",
-          type: String,
-          "enum": ["wind", "earth"]
-        },
-        // @TODO: Deprecated in 1.0
-        oldPfeId: {
-          type: String,
-          attr: "pfe-id",
-          observer: "_oldPfeIdChanged"
-        }
-      };
-    } // Declare the type of this component
-
-  }, {
-    key: "PfeType",
-    get: function get() {
-      return PFElement.PfeTypes.Content;
-    }
-  }]);
-
-  return PfeTab;
-}(PFElement);
-/*!
- * PatternFly Elements: PfeTabs 1.12.3
- * @license
- * Copyright 2021 Red Hat, Inc.
- * 
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- * 
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- * 
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- * 
-*/
-
-
-var TAB_PANEL_MUTATION_CONFIG = {
-  childList: true,
-  subtree: true
-};
-
-var PfeTabPanel = /*#__PURE__*/function (_PFElement2) {
-  _inheritsLoose(PfeTabPanel, _PFElement2);
-
-  function PfeTabPanel() {
-    var _this2;
-
-    _this2 = _PFElement2.call(this, PfeTabPanel, {
-      type: PfeTabPanel.PfeType
-    }) || this;
-    _this2._init = _this2._init.bind(_assertThisInitialized(_this2));
-    _this2._observer = new MutationObserver(_this2._init);
-    return _this2;
-  }
-
-  var _proto2 = PfeTabPanel.prototype;
-
-  _proto2.connectedCallback = function connectedCallback() {
-    _PFElement2.prototype.connectedCallback.call(this);
-
-    if (this.hasLightDOM()) this._init();
-
-    this._observer.observe(this, TAB_PANEL_MUTATION_CONFIG);
-  };
-
-  _proto2.disconnectedCallback = function disconnectedCallback() {
-    _PFElement2.prototype.disconnectedCallback.call(this);
-
-    this._observer.disconnect();
-  };
-
-  _proto2._init = function _init() {
-    if (window.ShadyCSS) this._observer.disconnect(); // If an ID is not defined, generate a random one
-
-    if (!this.id) this.id = this.randomId; // Force role to be set to tab
-
-    this.role = "tabpanel";
-
-    if (this.previousElementSibling && this.previousElementSibling.selected !== "true") {
-      this.hidden = true;
-    }
-
-    if (window.ShadyCSS) this._observer.observe(this, TAB_PANEL_MUTATION_CONFIG);
-  };
-
-  _proto2._oldPfeIdChanged = function _oldPfeIdChanged(oldVal, newVal) {
-    if (!this.id) this.id = newVal;
-  };
-
-  _createClass(PfeTabPanel, [{
-    key: "html",
-    get: // Injected at build-time
-    function get() {
-      return "\n<style>:host{display:block;color:#3c3f42;color:var(--pfe-broadcasted--text,#3c3f42)}:host(:focus){outline:0}:host [tabindex]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%}:host .container{margin:0;width:100%;background-color:transparent;background-color:var(--pfe-tabs__panel--BackgroundColor,transparent);border-top:0;border-top:var(--pfe-tabs__panel--BorderTop,0);border-right:0;border-right:var(--pfe-tabs__panel--BorderRight,0);border-bottom:0;border-bottom:var(--pfe-tabs__panel--BorderBottom,0);border-left:0;border-left:var(--pfe-tabs__panel--BorderLeft,0);padding-top:calc(1rem * 3);padding-top:var(--pfe-tabs__panel--PaddingTop,calc(var(--pfe-theme--container-padding,1rem) * 3))}@media screen and (min-width:1200px){:host .container{padding-top:calc(1rem * 3);padding-top:var(--pfe-tabs__panel--PaddingTop,calc(var(--pfe-theme--container-padding,1rem) * 3));padding-right:0;padding-right:var(--pfe-tabs__panel--PaddingRight,0);padding-bottom:0;padding-bottom:var(--pfe-tabs__panel--PaddingBottom,0);padding-left:0;padding-left:var(--pfe-tabs__panel--PaddingLeft,0)}}:host .container::after{clear:both;content:\"\";display:table}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host .container{padding:1em;background-color:#fff!important;color:#151515!important}}:host([hidden]){display:none}:host([variant=earth]){background-color:#fff;background-color:var(--pfe-tabs__panel--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff))}:host([variant=earth]) .container{padding-top:calc(1rem * 3);padding-top:var(--pfe-tabs__panel--PaddingTop,calc(var(--pfe-theme--container-padding,1rem) * 3));padding-right:calc(1rem * 3);padding-right:var(--pfe-tabs__panel--PaddingRight,calc(var(--pfe-theme--container-padding,1rem) * 3));padding-bottom:calc(1rem * 3);padding-bottom:var(--pfe-tabs__panel--PaddingBottom,calc(var(--pfe-theme--container-padding,1rem) * 3));padding-left:calc(1rem * 3);padding-left:var(--pfe-tabs__panel--PaddingLeft,calc(var(--pfe-theme--container-padding,1rem) * 3))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([variant=earth]) .container{background-color:#fff;padding:1em;border-right:1px solid #d2d2d2;border-bottom:1px solid #d2d2d2;border-left:1px solid #d2d2d2}}@media screen and (min-width:768px){:host([variant=wind][vertical]) .container{padding-top:0;padding-top:var(--pfe-tabs__panel--PaddingTop,0);padding-bottom:0;padding-bottom:var(--pfe-tabs__panel--PaddingBottom,0);padding-right:0;padding-right:var(--pfe-tabs__panel--PaddingRight,0);margin:0 calc(1rem - 2px);margin:0 calc(var(--pfe-theme--container-spacer,1rem) - 2px)}}@media screen and (min-width:768px) and (-ms-high-contrast:active),screen and (min-width:768px) and (-ms-high-contrast:none){:host([variant=wind][vertical]) .container{padding:1em 0 1em 2em}}@media screen and (min-width:768px){:host([variant=earth][vertical]){border-top:0;border-top:var(--pfe-tabs--BorderTop,0);border-left:1px solid #d2d2d2;border-left:var(--pfe-tabs--BorderLeft,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2));height:100%;background-color:#fff;background-color:var(--pfe-tabs__panel--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff))}:host([variant=earth][vertical]) .container{padding-left:calc(1rem * 3);padding-left:var(--pfe-tabs__panel--PaddingLeft,calc(var(--pfe-theme--container-padding,1rem) * 3))}}@media screen and (min-width:768px) and (-ms-high-contrast:active),screen and (min-width:768px) and (-ms-high-contrast:none){:host([variant=earth][vertical]) .container{border-top:1px solid #d2d2d2}}:host([variant=earth]) .container{padding-top:calc(1rem * 3);padding-top:var(--pfe-tabs__panel--PaddingTop,calc(var(--pfe-theme--container-padding,1rem) * 3));padding-right:calc(1rem * 3);padding-right:var(--pfe-tabs__panel--PaddingRight,calc(var(--pfe-theme--container-padding,1rem) * 3));padding-bottom:calc(1rem * 3);padding-bottom:var(--pfe-tabs__panel--PaddingBottom,calc(var(--pfe-theme--container-padding,1rem) * 3));padding-left:calc(1rem * 3);padding-left:var(--pfe-tabs__panel--PaddingLeft,calc(var(--pfe-theme--container-padding,1rem) * 3))}:host([on=dark][variant=earth]){background-color:#151515;background-color:var(--pfe-tabs__panel--BackgroundColor,var(--pfe-theme--color--surface--darkest,#151515));--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated][variant=earth]){background-color:#fff;background-color:var(--pfe-tabs__panel--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted, #6a6e73);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host([on=saturated]:not([variant=earth])){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=dark]:not([variant=earth])){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)} /*# sourceMappingURL=pfe-tab-panel.min.css.map */</style>\n<div tabindex=\"-1\" role=\"tabpanel\">\n  <div class=\"container\">\n    <slot></slot>\n  </div>\n</div>";
-    }
-  }, {
-    key: "styleUrl",
-    get: function get() {
-      return "pfe-tab-panel.scss";
-    }
-  }, {
-    key: "templateUrl",
-    get: function get() {
-      return "pfe-tab-panel.html";
-    }
-  }], [{
-    key: "version",
-    get: // Injected at build-time
-    function get() {
-      return "1.12.3";
-    }
-  }, {
-    key: "tag",
-    get: function get() {
-      return "pfe-tab-panel";
-    }
-  }, {
-    key: "properties",
-    get: function get() {
-      return {
-        selected: {
-          title: "Selected tab",
-          type: Boolean,
-          "default": false,
-          attr: "aria-selected",
-          observer: "_selectedHandler"
-        },
-        hidden: {
-          title: "Visibility",
-          type: Boolean,
-          "default": false
-        },
-        role: {
-          type: String,
-          "default": "tabpanel"
-        },
-        tabindex: {
-          type: Number,
-          "default": 0
-        },
-        labelledby: {
-          type: String,
-          attr: "aria-labelledby"
-        },
-        variant: {
-          title: "Variant",
-          type: String,
-          "enum": ["wind", "earth"]
-        },
-        // @TODO: Deprecated in 1.0
-        oldPfeId: {
-          type: String,
-          attr: "pfe-id",
-          observer: "_oldPfeIdChanged"
-        }
-      };
-    } // Declare the type of this component
-
-  }, {
-    key: "PfeType",
-    get: function get() {
-      return PFElement.PfeTypes.Container;
-    }
-  }]);
-
-  return PfeTabPanel;
-}(PFElement);
-/*!
- * PatternFly Elements: PfeTabs 1.12.3
- * @license
- * Copyright 2021 Red Hat, Inc.
- * 
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- * 
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- * 
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- * 
-*/
-
-
-var KEYCODE = {
-  DOWN: 40,
-  LEFT: 37,
-  RIGHT: 39,
-  UP: 38,
-  HOME: 36,
-  END: 35
-}; // @IE11 doesn't support URLSearchParams
-// https://caniuse.com/#search=urlsearchparams
-
-var CAN_USE_URLSEARCHPARAMS = window.URLSearchParams ? true : false;
-var TABS_MUTATION_CONFIG = {
-  childList: true,
-  subtree: true
-};
-
-var PfeTabs = /*#__PURE__*/function (_PFElement3) {
-  _inheritsLoose(PfeTabs, _PFElement3);
-
-  function PfeTabs() {
-    var _this3;
-
-    _this3 = _PFElement3.call(this, PfeTabs, {
-      type: PfeTabs.PfeType
-    }) || this;
-    _this3._linked = false;
-    _this3._init = _this3._init.bind(_assertThisInitialized(_this3));
-    _this3._onClick = _this3._onClick.bind(_assertThisInitialized(_this3));
-    _this3._linkPanels = _this3._linkPanels.bind(_assertThisInitialized(_this3));
-    _this3._popstateEventHandler = _this3._popstateEventHandler.bind(_assertThisInitialized(_this3));
-    _this3._observer = new MutationObserver(_this3._init);
-    _this3._updateHistory = true;
-    return _this3;
-  }
-
-  var _proto3 = PfeTabs.prototype;
-
-  _proto3.connectedCallback = function connectedCallback() {
-    var _this4 = this;
-
-    Promise.all([customElements.whenDefined(PfeTab.tag), customElements.whenDefined(PfeTabPanel.tag)]).then(function () {
-      _PFElement3.prototype.connectedCallback.call(_this4);
-
-      if (_this4.hasLightDOM()) _this4._init();
-
-      _this4._observer.observe(_this4, TABS_MUTATION_CONFIG);
-
-      _this4.addEventListener("keydown", _this4._onKeyDown);
-
-      _this4.addEventListener("click", _this4._onClick);
-    });
-  };
-
-  _proto3.disconnectedCallback = function disconnectedCallback() {
-    var _this5 = this;
-
-    _PFElement3.prototype.disconnectedCallback.call(this);
-
-    this.removeEventListener("keydown", this._onKeyDown);
-
-    this._allTabs().forEach(function (tab) {
-      return tab.removeEventListener("click", _this5._onClick);
-    });
-
-    this._observer.disconnect();
-
-    if (this.tabHistory) window.removeEventListener("popstate", this._popstateEventHandler);
-  };
-
-  _proto3._verticalHandler = function _verticalHandler() {
-    if (this.vertical) this.orientation = "vertical";else this.orientation = "horizontal";
-  };
-
-  _proto3._selectedIndexHandler = function _selectedIndexHandler(oldVal, newVal) {
-    var _this6 = this;
-
-    // Wait until the tab and panels are loaded
-    Promise.all([customElements.whenDefined(PfeTab.tag), customElements.whenDefined(PfeTabPanel.tag)]).then(function () {
-      _this6._linkPanels();
-
-      _this6.selectIndex(newVal);
-
-      _this6._updateHistory = true;
-    });
-  };
-
-  _proto3._tabHistoryHandler = function _tabHistoryHandler() {
-    if (!this.tabHistory) window.removeEventListener("popstate", this._popstateEventHandler);else window.addEventListener("popstate", this._popstateEventHandler);
-  };
-
-  _proto3._oldPfeIdChanged = function _oldPfeIdChanged(oldVal, newVal) {
-    if (!this.id && newVal) this.id = newVal;
-  };
-
-  _proto3.select = function select(newTab) {
-    if (!newTab) return;
-
-    if (newTab.tagName.toLowerCase() !== PfeTab.tag) {
-      this.warn("the tab must be a " + PfeTab.tag + " element");
-      return;
-    }
-
-    this.selectedIndex = this._getTabIndex(newTab);
-  };
-
-  _proto3.selectIndex = function selectIndex(_index) {
-    if (_index === undefined || _index === null) return;
-    var index = parseInt(_index, 10);
-
-    var tabs = this._allTabs();
-
-    var tab = tabs[index];
-
-    if (tabs.length > 0 && !tab) {
-      this.warn("tab " + _index + " does not exist");
-      return;
-    } else if (!tabs && !tab) {
-      // Wait for upgrade?
-      return;
-    }
-
-    if (this.selected && this.tabHistory && this._updateHistory && CAN_USE_URLSEARCHPARAMS) {
-      // @IE11 doesn't support URLSearchParams
-      // https://caniuse.com/#search=urlsearchparams
-      // rebuild the url
-      var pathname = window.location.pathname;
-      var urlParams = new URLSearchParams(window.location.search);
-      var hash = window.location.hash;
-      urlParams.set(this.id, tab.id);
-      history.pushState({}, "", pathname + "?" + urlParams.toString() + hash);
-    }
-
-    this._selectTab(tab);
-
-    return tab;
-  };
-
-  _proto3._init = function _init() {
-    var tabIndexFromURL = this._getTabIndexFromURL();
-
-    this._linked = false;
-
-    this._linkPanels(); // Force role to be set to tablist
-
-
-    if (window.ShadyCSS) this._observer.disconnect();
-    this.role = "tablist";
-
-    if (tabIndexFromURL > -1) {
-      this._setFocus = true;
-      this.selectedIndex = tabIndexFromURL;
-    }
-
-    if (this.selectedIndex === null) this.selectedIndex = 0;
-    if (window.ShadyCSS) this._observer.observe(this, TABS_MUTATION_CONFIG);
-  };
-
-  _proto3._linkPanels = function _linkPanels() {
-    var _this7 = this;
-
-    if (this._linked) return;
-    if (window.ShadyCSS) this._observer.disconnect();
-
-    this._allTabs().forEach(function (tab) {
-      var panel = tab.nextElementSibling;
-
-      if (panel.tagName.toLowerCase() !== PfeTabPanel.tag) {
-        _this7.warn("not a sibling of a <" + PfeTabPanel.tag + ">");
-
-        return;
-      } // Connect the 2 items via appropriate aria attributes
-
-
-      tab.controls = panel.id;
-      panel.labelledby = tab.id;
-      tab.addEventListener("click", _this7._onClick);
-    });
-
-    this._linked = true;
-    if (window.ShadyCSS) this._observer.observe(this, TABS_MUTATION_CONFIG);
-  };
-
-  _proto3._allPanels = function _allPanels() {
-    return [].concat(this.children).filter(function (child) {
-      return child.matches(PfeTabPanel.tag);
-    });
-  };
-
-  _proto3._allTabs = function _allTabs() {
-    return [].concat(this.children).filter(function (child) {
-      return child.matches(PfeTab.tag);
-    });
-  };
-
-  _proto3._panelForTab = function _panelForTab(tab) {
-    if (!tab || !tab.controls) return;
-    return this.querySelector("#" + tab.controls);
-  };
-
-  _proto3._prevTab = function _prevTab() {
-    var tabs = this._allTabs();
-
-    var newIdx = tabs.findIndex(function (tab) {
-      return tab.selected === "true";
-    }) - 1;
-    return tabs[(newIdx + tabs.length) % tabs.length];
-  };
-
-  _proto3._firstTab = function _firstTab() {
-    var tabs = this._allTabs();
-
-    return tabs[0];
-  };
-
-  _proto3._lastTab = function _lastTab() {
-    var tabs = this._allTabs();
-
-    return tabs[tabs.length - 1];
-  };
-
-  _proto3._nextTab = function _nextTab() {
-    var tabs = this._allTabs();
-
-    var newIdx = tabs.findIndex(function (tab) {
-      return tab.selected === "true";
-    }) + 1;
-    return tabs[newIdx % tabs.length];
-  };
-
-  _proto3._getTabIndex = function _getTabIndex(_tab) {
-    if (_tab) {
-      var tabs = this._allTabs();
-
-      return tabs.findIndex(function (tab) {
-        return tab.id === _tab.id;
-      });
-    } else {
-      this.warn("No tab was provided to _getTabIndex; required to return the index value.");
-      return 0;
-    }
-  };
-
-  _proto3.reset = function reset() {
-    var tabs = this._allTabs();
-
-    var panels = this._allPanels();
-
-    tabs.forEach(function (tab) {
-      return tab.selected = "false";
-    });
-    panels.forEach(function (panel) {
-      return panel.hidden = true;
-    });
-  };
-
-  _proto3._selectTab = function _selectTab(newTab) {
-    if (!newTab) return;
-    this.reset();
-
-    var newPanel = this._panelForTab(newTab);
-
-    var newTabSelected = false;
-    if (!newPanel) this.warn("No panel was found for the selected tab" + (newTab.id ? ": pfe-tab#" + newTab.id : "")); // this.selected on tabs contains a pointer to the selected tab element
-
-    if (this.selected && this.selected !== newTab) {
-      newTabSelected = true;
-      this.emitEvent(PfeTabs.events.hiddenTab, {
-        detail: {
-          tab: this.selected
-        }
-      });
-    }
-
-    newTab.selected = "true";
-    newPanel.hidden = false; // Update the value of the selected pointer to the new tab
-
-    this.selected = newTab;
-
-    if (newTabSelected) {
-      if (this._setFocus) newTab.focus();
-      this.emitEvent(PfeTabs.events.shownTab, {
-        detail: {
-          tab: this.selected
-        }
-      });
-    }
-
-    this._setFocus = false;
-  };
-
-  _proto3._onKeyDown = function _onKeyDown(event) {
-    var tabs = this._allTabs();
-
-    var foundTab = tabs.find(function (tab) {
-      return tab === event.target;
-    });
-
-    if (!foundTab) {
-      return;
-    }
-
-    if (event.altKey) {
-      return;
-    }
-
-    var newTab;
-
-    switch (event.keyCode) {
-      case KEYCODE.LEFT:
-      case KEYCODE.UP:
-        newTab = this._prevTab();
-        break;
-
-      case KEYCODE.RIGHT:
-      case KEYCODE.DOWN:
-        newTab = this._nextTab();
-        break;
-
-      case KEYCODE.HOME:
-        newTab = this._firstTab();
-        break;
-
-      case KEYCODE.END:
-        newTab = this._lastTab();
-        break;
-
-      default:
-        return;
-    }
-
-    event.preventDefault();
-
-    if (newTab) {
-      this.selectedIndex = this._getTabIndex(newTab);
-      this._setFocus = true;
-    } else {
-      this.warn("No new tab could be found.");
-    }
-  };
-
-  _proto3._onClick = function _onClick(event) {
-    // Find the clicked tab
-    var foundTab = this._allTabs().find(function (tab) {
-      return tab === event.currentTarget;
-    }); // If the tab wasn't found in the markup, exit the handler
-
-
-    if (!foundTab) return; // Update the selected index to the clicked tab
-
-    this.selectedIndex = this._getTabIndex(event.currentTarget);
-  };
-
-  _proto3._getTabIndexFromURL = function _getTabIndexFromURL() {
-    var urlParams; // @IE11 doesn't support URLSearchParams
-    // https://caniuse.com/#search=urlsearchparams
-    // @Deprecated in 1.0
-    // the "pfe-" prefix has been deprecated but we'll continue to support it
-    // we'll give priority to the urlParams.has(`${this.id}`) attribute first
-    // and fallback to urlParams.has(`pfe-${this.id}`) if it exists. We should
-    // be able to remove the || part of the if statement in the future
-
-    if (CAN_USE_URLSEARCHPARAMS) {
-      urlParams = new URLSearchParams(window.location.search);
-      var tabsetInUrl = urlParams.has("" + this.id) || urlParams.has("pfe-" + this.id); // remove this condition when it's no longer used in production
-
-      if (urlParams && tabsetInUrl) {
-        var id = urlParams.get("" + this.id) || urlParams.get("pfe-" + this.id); // remove this condition when it's no longer used in production
-
-        return this._allTabs().findIndex(function (tab) {
-          return tab.id === id;
-        });
-      }
-    }
-
-    return -1;
-  };
-
-  _proto3._popstateEventHandler = function _popstateEventHandler() {
-    var tabIndexFromURL = this._getTabIndexFromURL();
-
-    this._updateHistory = false;
-    if (tabIndexFromURL > -1) this.selectedIndex = tabIndexFromURL;
-  };
-
-  _createClass(PfeTabs, [{
-    key: "html",
-    get: // Injected at build-time
-    function get() {
-      return "\n<style>@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host{display:block;display:var(--pfe-tabs--Display,block);padding:0;padding:var(--pfe-tabs--Padding,0)}:host .tabs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;flex-direction:var(--pfe-tabs__tabs--FlexDirection,row);width:auto;width:var(--pfe-tabs__tabs--Width,auto);border-top:0;border-top:var(--pfe-tabs__tabs--BorderTop,0);border-right:0;border-right:var(--pfe-tabs__tabs--BorderRight,0);border-bottom:1px solid #d2d2d2;border-bottom:var(--pfe-tabs__tabs--BorderBottom,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-tabs__tabs--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2)));border-left:0;border-left:var(--pfe-tabs__tabs--BorderLeft,0);padding:0;padding:var(--pfe-tabs__tabs--Padding,0)}:host .panels{width:auto;width:var(--pfe-tabs__panels--Width,auto)}:host(:not([vertical])[tab-align=center]) .tabs{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:768px){:host([vertical]){--pfe-tabs--Display:flex;--pfe-tabs__tabs--FlexDirection:column;--pfe-tabs__tabs--Width:20%;--pfe-tabs__tabs--BorderRight:var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-tabs--BorderColor);--pfe-tabs__tabs--BorderBottom:0;--pfe-tabs__panels--Width:80%;--pfe-tabs__panels--PaddingRight:var(--pfe-theme--container-padding, 1rem)}}@media screen and (min-width:768px) and (-ms-high-contrast:active),screen and (min-width:768px) and (-ms-high-contrast:none){:host([vertical]){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}:host([vertical]) .tabs{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:22.22%;border-right:1px solid #d2d2d2;border-right:1px solid var(--pfe-theme--color--surface--border,#d2d2d2);border-bottom:0}:host([vertical]) .panels{width:77.8%;padding-right:1em}}@media screen and (min-width:768px) and (-ms-high-contrast:active),screen and (min-width:768px) and (-ms-high-contrast:none){:host([vertical][variant=earth]) .tabs{padding:1em 0 0 0}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host(:not([variant=earth])){background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff);color:#151515;color:var(--pfe-theme--color--text,#151515)}}:host([variant=earth]){--pfe-tabs__tabs--PaddingLeft:var(--pfe-theme--container-padding, 1rem)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([variant=earth]) .tabs{padding-left:1em}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted, #6a6e73);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host([vertical]) .tabs-prefix,:host([vertical]) .tabs-suffix{left:0;top:0;content:\" \";height:calc(1rem * 2);height:calc(var(--pfe-theme--container-padding,1rem) * 2);width:1px;position:relative}@media screen and (min-width:768px){:host([vertical]:not([variant=earth])) .tabs-prefix,:host([vertical]:not([variant=earth])) .tabs-suffix{background-color:#d2d2d2;background-color:var(--pfe-tabs__tabs--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2))}}:host(:not([vertical])[variant=earth]) .tabs-prefix{left:0;top:0;content:\" \";height:1px;width:1rem;width:var(--pfe-theme--container-padding,1rem);position:relative}@media screen and (min-width:768px){:host(:not([vertical])[variant=earth]) .tabs-prefix{width:calc(1rem * 2);width:calc(var(--pfe-theme--container-padding,1rem) * 2)}}:host([hidden]){display:none} /*# sourceMappingURL=pfe-tabs.min.css.map */</style>\n<div class=\"tabs\">\n  <div class=\"tabs-prefix\"></div>\n  <slot name=\"tab\"></slot>\n  <div class=\"tabs-suffix\"></div>\n</div>\n<div class=\"panels\">\n  <slot name=\"panel\"></slot>\n</div>";
-    }
-  }, {
-    key: "styleUrl",
-    get: function get() {
-      return "pfe-tabs.scss";
-    }
-  }, {
-    key: "templateUrl",
-    get: function get() {
-      return "pfe-tabs.html";
-    } // Each set contains a header and a panel
-
-  }], [{
-    key: "version",
-    get: // Injected at build-time
-    function get() {
-      return "1.12.3";
-    }
-  }, {
-    key: "tag",
-    get: function get() {
-      return "pfe-tabs";
-    }
-  }, {
-    key: "meta",
-    get: function get() {
-      return {
-        title: "Tabs",
-        description: "This element creates a tabbed interface."
-      };
-    }
-  }, {
-    key: "contentTemplate",
-    get: function get() {
-      return "\n      <pfe-tab content-type=\"header\" slot=\"tab\"></pfe-tab>\n      <pfe-tab-panel content-type=\"panel\" slot=\"panel\"></pfe-tab-panel>\n    ";
-    }
-  }, {
-    key: "properties",
-    get: function get() {
-      return {
-        vertical: {
-          title: "Vertical orientation",
-          type: Boolean,
-          "default": false,
-          cascade: "pfe-tab,pfe-tab-panel",
-          observer: "_verticalHandler"
-        },
-        orientation: {
-          title: "Orientation",
-          type: String,
-          attr: "aria-orientation",
-          "default": "horizontal",
-          values: ["horizontal", "vertical"]
-        },
-        // Do not set a default of 0, it causes a the URL history to
-        // be updated on load for every tab; infinite looping goodness
-        // Seriously, don't set a default here unless you do a rewrite
-        selectedIndex: {
-          title: "Index of the selected tab",
-          type: Number,
-          observer: "_selectedIndexHandler"
-        },
-        tabAlign: {
-          title: "Tab alignment",
-          type: String,
-          "enum": ["center"]
-        },
-        controls: {
-          type: String,
-          attr: "aria-controls"
-        },
-        variant: {
-          title: "Variant",
-          type: String,
-          "enum": ["wind", "earth"],
-          "default": "wind",
-          cascade: "pfe-tab,pfe-tab-panel"
-        },
-        tabHistory: {
-          title: "Tab History",
-          type: Boolean,
-          "default": false,
-          observer: "_tabHistoryHandler"
-        },
-        role: {
-          type: String,
-          "default": "tablist"
-        },
-        // @TODO: Deprecated for 1.0
-        oldVariant: {
-          type: String,
-          attr: "pfe-variant",
-          alias: "variant"
-        },
-        // @TODO: Deprecated for 1.0
-        oldTabHistory: {
-          type: Boolean,
-          alias: "tabHistory",
-          attr: "pfe-tab-history"
-        },
-        // @TODO: Deprecated for 1.0
-        oldPfeId: {
-          type: String,
-          attr: "pfe-id",
-          observer: "_oldPfeIdChanged"
-        }
-      };
-    }
-  }, {
-    key: "slots",
-    get: function get() {
-      return {
-        tab: {
-          title: "Tab",
-          type: "array",
-          namedSlot: true,
-          items: {
-            $ref: "pfe-tab"
-          }
-        },
-        panel: {
-          title: "Panel",
-          type: "array",
-          namedSlot: true,
-          items: {
-            $ref: "pfe-tab-panel"
-          }
-        }
-      };
-    }
-  }, {
-    key: "events",
-    get: function get() {
-      return {
-        hiddenTab: this.tag + ":hidden-tab",
-        shownTab: this.tag + ":shown-tab"
-      };
-    } // Declare the type of this component
-
-  }, {
-    key: "PfeType",
-    get: function get() {
-      return PFElement.PfeTypes.Combo;
-    }
-  }]);
-
-  return PfeTabs;
-}(PFElement);
-
-PFElement.create(PfeTab);
-PFElement.create(PfeTabPanel);
-PFElement.create(PfeTabs);
-
-// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
-
-(function () {
-  if (typeof window.CustomEvent === "function") return false;
-
-  function CustomEvent(event, params) {
-    params = params || {
-      bubbles: false,
-      cancelable: false,
-      detail: null
-    };
-    var evt = document.createEvent("CustomEvent");
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-    return evt;
-  }
-
-  window.CustomEvent = CustomEvent;
-})();
-
-var PfeIconSet = /*#__PURE__*/function () {
-  var _proto = PfeIconSet.prototype;
-
-  /**
-   * Run the icon set's name resolver to turn an icon name into an icon path, id, etc.
-   */
-  _proto.resolveIconName = function resolveIconName(iconName) {
-    return this._resolveIconName(iconName, this.name, this.path);
-  }
-  /**
-   * Create a new icon set.  Icon sets have a name (ie, a namespace).  For
-   * example, an icon with a name of "rh-logo" represents a "logo" icon from the
-   * "rh" set.  Icon set names are always separated from the rest of the icon
-   * name with a hyphen `-`.  This means that set names cannot contain a hyphen.
-   *
-   * @param {String} name the namespace of the icon set
-   * @param {String} path the web-accessible path to the icon set (for instance, a CDN)
-   * @param {Function} resolveIconName an optional function to combine the path and an icon name into a final path.  The function will be passed the namespaced icon name (for example, "rh-api" where rh is the namespace and api is the individual icon's name)
-   * @returns {Object} an object with the status of the icon set installation, such as `{ result: true, text: 'icon set installed' }` or `{ result: false, text: 'icon set is already installed' }`
-   */
-  ;
-
-  function PfeIconSet(name, path, resolveIconName) {
-    this.name = name;
-    this.path = path;
-    this._resolveIconName = resolveIconName;
-  }
-
-  return PfeIconSet;
-}();
-/**
- * An 'init' function to add the PFE built-in icon sets to the current page.
- */
-
-
-function addBuiltIns(_ref) {
-  var PfeIcon = _ref.PfeIcon,
-      config = _ref.config;
-
-  // If the user wants to completely opt out of default icon sets,
-  // allow them to.
-  if (config.IconSets && config.IconSets.length === 0) {
-    return;
-  } // If the user provides their own icon sets, use them. If not, use our defaults.
-  // @TODO: Switch from access.redhat.com to another icon set.
-
-
-  var iconSets = config.IconSets || [{
-    name: "web",
-    path: "https://access.redhat.com/webassets/avalon/j/lib/rh-iconfont-svgs"
-  }, {
-    name: "rh",
-    path: "https://access.redhat.com/webassets/avalon/j/lib/rh-iconfont-svgs"
-  }];
-
-  var resolveDefaultIconName = function resolveDefaultIconName(name, iconSetName, iconSetPath) {
-    var regex = new RegExp("^" + iconSetName + "(-icon)?-(.*)");
-
-    var _regex$exec = regex.exec(name),
-        iconName = _regex$exec[2];
-
-    var iconId = iconSetName + "-icon-" + iconName;
-    var iconPath = iconSetPath + "/" + iconId + ".svg";
-    return iconPath;
-  }; // Register the icon sets.
-
-
-  iconSets.forEach(function (set) {
-    // If there's a `resolveIconName` function provided, use it. If not, fall back
-    // to the `resolveDefaultIconName` function.
-    if (set.resolveIconName && typeof set.resolveIconName === "function") {
-      resolveDefaultIconName = set.resolveIconName;
-    }
-
-    PfeIcon.addIconSet(set.name, set.path, resolveDefaultIconName);
-  });
-}
-/*!
- * PatternFly Elements: PfeIcon 1.12.3
- * @license
- * Copyright 2021 Red Hat, Inc.
- * 
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- * 
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- * 
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- * 
-*/
-
-/**
- * Sets the id attribute on the <filter> element and points the CSS `filter` at that id.
- */
-
-
-function _setRandomFilterId(el) {
-  var randomId = "filter-" + Math.random().toString().slice(2, 10); // set the CSS filter property to point at the given id
-
-  el.shadowRoot.querySelector("svg image").style.filter = "url(#" + randomId + ")"; // set the id attribute on the SVG filter element to match
-
-  el.shadowRoot.querySelector("svg filter").setAttribute("id", randomId);
-}
-
-var PfeIcon = /*#__PURE__*/function (_PFElement) {
-  _inheritsLoose(PfeIcon, _PFElement);
-
-  var _proto2 = PfeIcon.prototype;
-
-  _proto2._iconLoad = function _iconLoad() {
-    this.classList.remove("load-failed");
-  };
-
-  _proto2._iconLoadError = function _iconLoadError(e) {
-    this.classList.add("load-failed");
-    if (this.hasLightDOM()) this.classList.add("has-fallback");
-  };
-
-  _proto2._colorChanged = function _colorChanged() {
-    // Update the context
-    this.resetContext();
-  };
-
-  function PfeIcon() {
-    var _this;
-
-    _this = _PFElement.call(this, PfeIcon, {
-      type: PfeIcon.PfeType
-    }) || this;
-    _this._iconLoad = _this._iconLoad.bind(_assertThisInitialized(_this));
-    _this._iconLoadError = _this._iconLoadError.bind(_assertThisInitialized(_this));
-    _this.image = _this.shadowRoot.querySelector("svg image");
-
-    if (_this.image) {
-      _this.image.addEventListener("load", _this._iconLoad);
-
-      _this.image.addEventListener("error", _this._iconLoadError);
-    } // Attach a listener for the registration of an icon set
-    // Leaving this attached allows for the registered set to be updated
-
-
-    document.body.addEventListener(PfeIcon.EVENTS.ADD_ICON_SET, function () {
-      return _this.updateIcon();
-    });
-    return _this;
-  }
-
-  _proto2.disconnectedCallback = function disconnectedCallback() {
-    _PFElement.prototype.disconnectedCallback.call(this);
-
-    if (this.image) {
-      this.image.removeEventListener("load", this._iconLoad);
-      this.image.removeEventListener("error", this._iconLoadError);
-    }
-  };
-
-  _proto2.updateIcon = function updateIcon() {
-    var _PfeIcon$getIconSet = PfeIcon.getIconSet(this.icon),
-        set = _PfeIcon$getIconSet.set;
-
-    if (set) {
-      var iconPath = set.resolveIconName(this.icon);
-      this.image.setAttribute("xlink:href", iconPath);
-
-      _setRandomFilterId(this);
-    }
-  }
-  /**
-   * Get an icon set by providing the set's name, _or_ the name of an icon from that set.
-   *
-   * @param {String} iconName the name of the set, or the name of an icon from that set.
-   * @return {PfeIconSet} the icon set
-   */
-  ;
-
-  PfeIcon.getIconSet = function getIconSet(iconName) {
-    var set;
-
-    if (iconName) {
-      var _iconName$split = iconName.split("-"),
-          setName = _iconName$split[0];
-
-      set = this._iconSets[setName];
-    }
-
-    return {
-      set: set
-    };
-  };
-
-  PfeIcon.addIconSet = function addIconSet(name, path, resolveIconName) {
-    var resolveFunction;
-
-    if (typeof resolveIconName === "function") {
-      resolveFunction = resolveIconName;
-    } else if (typeof resolveIconName === "undefined" && this._iconSets[name] && typeof this._iconSets[name]._resolveIconName === "function") {
-      resolveFunction = this._iconSets[name]._resolveIconName;
-    } else if (typeof resolveIconName !== "function" && typeof resolveIconName !== "undefined") {
-      PfeIcon.warn("[" + this.tag + "]: The third input to addIconSet should be a function that parses and returns the icon's filename.");
-    } else {
-      PfeIcon.warn("[" + this.tag + "]: The set " + name + " needs a resolve function for the icon names.");
-    } // Register the icon set and set up the event indicating the change
-
-
-    this._iconSets[name] = new PfeIconSet(name, path, resolveFunction);
-    document.body.dispatchEvent(new CustomEvent(this.EVENTS.ADD_ICON_SET, {
-      bubbles: false,
-      detail: {
-        set: this._iconSets[name]
-      }
-    }));
-  };
-
-  _createClass(PfeIcon, [{
-    key: "html",
-    get: // Injected at build-time
-    function get() {
-      return "\n<style>@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted, #6a6e73);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host{--context:var(--pfe-icon--context, light);position:relative;display:inline-block;-webkit-box-sizing:content-box!important;box-sizing:content-box!important;width:-webkit-fit-content!important;width:-moz-fit-content!important;width:fit-content!important;height:-webkit-fit-content!important;height:-moz-fit-content!important;height:fit-content!important;line-height:0;max-width:1em;max-width:var(--pfe-icon--size,var(--pfe-theme--icon-size,1em));max-height:1em;max-height:var(--pfe-icon--size,var(--pfe-theme--icon-size,1em))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{width:1em!important;width:var(--pfe-theme--icon-size,1em)!important;height:1em!important;height:var(--pfe-theme--icon-size,1em)!important}}:host svg{width:1em;width:var(--pfe-icon--size,var(--pfe-theme--icon-size,1em));height:1em;height:var(--pfe-icon--size,var(--pfe-theme--icon-size,1em))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host svg{width:1em!important;width:var(--pfe-theme--icon-size,1em)!important;height:1em!important;height:var(--pfe-theme--icon-size,1em)!important}}:host([block]){display:block;margin-bottom:1rem;margin-bottom:var(--pfe-icon--spacing,var(--pfe-theme--container-spacer,1rem));margin-top:1rem;margin-top:var(--pfe-icon--spacing,var(--pfe-theme--container-spacer,1rem))}:host([block]):first-child{margin-top:0}:host(:not(.load-failed)){vertical-align:middle;border-radius:50%;background-color:transparent;background-color:var(--pfe-icon--BackgroundColor,transparent);border:1px solid transparent;border:var(--pfe-icon--BorderWidth,var(--pfe-theme--ui--border-width,1px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,transparent));padding:0;padding:var(--pfe-icon--Padding,0)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host(:not(.load-failed)){background-color:#fff!important}:host(:not(.load-failed)) svg filter feFlood{flood-color:#000!important}}@supports (-ms-accelerator:true){:host(:not(.load-failed)){background-color:#fff!important}:host(:not(.load-failed)) svg filter feFlood{flood-color:#000!important}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host(:not(.load-failed)) svg image{-webkit-filter:none;filter:none}}:host(:not(.load-failed)) filter feFlood{flood-color:#3c3f42;flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-broadcasted--text,#3c3f42)))}:host(:not(.load-failed)) .pfe-icon--fallback{display:none}:host([size=\"2x\"]){max-width:2em;max-width:var(--pfe-icon--size,2em);max-height:2em;max-height:var(--pfe-icon--size,2em)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=\"2x\"]){width:2em!important;height:2em!important}}:host([size=\"2x\"]) svg{width:2em;width:var(--pfe-icon--size,2em);height:2em;height:var(--pfe-icon--size,2em)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=\"2x\"]) svg{width:2em!important;height:2em!important}}:host([size=\"3x\"]){max-width:3em;max-width:var(--pfe-icon--size,3em);max-height:3em;max-height:var(--pfe-icon--size,3em)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=\"3x\"]){width:3em!important;height:3em!important}}:host([size=\"3x\"]) svg{width:3em;width:var(--pfe-icon--size,3em);height:3em;height:var(--pfe-icon--size,3em)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=\"3x\"]) svg{width:3em!important;height:3em!important}}:host([size=\"4x\"]){max-width:4em;max-width:var(--pfe-icon--size,4em);max-height:4em;max-height:var(--pfe-icon--size,4em)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=\"4x\"]){width:4em!important;height:4em!important}}:host([size=\"4x\"]) svg{width:4em;width:var(--pfe-icon--size,4em);height:4em;height:var(--pfe-icon--size,4em)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=\"4x\"]) svg{width:4em!important;height:4em!important}}:host([size=xl]){max-width:100px;max-width:var(--pfe-icon--size,100px);max-height:100px;max-height:var(--pfe-icon--size,100px)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=xl]){width:100px!important;height:100px!important}}:host([size=xl]) svg{width:100px;width:var(--pfe-icon--size,100px);height:100px;height:var(--pfe-icon--size,100px)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=xl]) svg{width:100px!important;height:100px!important}}:host([size=lg]){max-width:64px;max-width:var(--pfe-icon--size,64px);max-height:64px;max-height:var(--pfe-icon--size,64px)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=lg]){width:64px!important;height:64px!important}}:host([size=lg]) svg{width:64px;width:var(--pfe-icon--size,64px);height:64px;height:var(--pfe-icon--size,64px)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=lg]) svg{width:64px!important;height:64px!important}}:host([size=md]){max-width:32px;max-width:var(--pfe-icon--size,32px);max-height:32px;max-height:var(--pfe-icon--size,32px)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=md]){width:32px!important;height:32px!important}}:host([size=md]) svg{width:32px;width:var(--pfe-icon--size,32px);height:32px;height:var(--pfe-icon--size,32px)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=md]) svg{width:32px!important;height:32px!important}}:host([size=sm]){max-width:14px;max-width:var(--pfe-icon--size,14px);max-height:14px;max-height:var(--pfe-icon--size,14px)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=sm]){width:14px!important;height:14px!important}}:host([size=sm]) svg{width:14px;width:var(--pfe-icon--size,14px);height:14px;height:var(--pfe-icon--size,14px)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=sm]) svg{width:14px!important;height:14px!important}}:host([circled]:not([circled=false])){padding:.5em;padding:var(--pfe-icon--Padding,.5em);background-color:#fff;background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border-color:#d2d2d2;border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--border,#d2d2d2)))}:host([color=critical]:not([circled])) filter feFlood,:host([color=critical][circled=false]) filter feFlood{flood-color:#a30000;flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--critical,#a30000)))}:host([color=critical][circled]:not([circled=false])){background-color:#a30000;background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--critical,#a30000));border-color:#a30000;border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--critical,#a30000)));--pfe-icon--context:dark}:host([color=important]:not([circled])) filter feFlood,:host([color=important][circled=false]) filter feFlood{flood-color:#c9190b;flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--important,#c9190b)))}:host([color=important][circled]:not([circled=false])){background-color:#c9190b;background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--important,#c9190b));border-color:#c9190b;border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--important,#c9190b)));--pfe-icon--context:dark}:host([color=moderate]:not([circled])) filter feFlood,:host([color=moderate][circled=false]) filter feFlood{flood-color:#f0ab00;flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--moderate,#f0ab00)))}:host([color=moderate][circled]:not([circled=false])){background-color:#f0ab00;background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--moderate,#f0ab00));border-color:#f0ab00;border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--moderate,#f0ab00)))}:host([color=success]:not([circled])) filter feFlood,:host([color=success][circled=false]) filter feFlood{flood-color:#3e8635;flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--success,#3e8635)))}:host([color=success][circled]:not([circled=false])){background-color:#3e8635;background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--success,#3e8635));border-color:#3e8635;border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--success,#3e8635)));--pfe-icon--context:dark}:host([color=info]:not([circled])) filter feFlood,:host([color=info][circled=false]) filter feFlood{flood-color:#06c;flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--info,#06c)))}:host([color=info][circled]:not([circled=false])){background-color:#06c;background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--info,#06c));border-color:#06c;border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--info,#06c)));--pfe-icon--context:dark}:host([color=default]:not([circled])) filter feFlood,:host([color=default][circled=false]) filter feFlood{flood-color:#4f5255;flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--default,#4f5255)))}:host([color=default][circled]:not([circled=false])){background-color:#4f5255;background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--default,#4f5255));border-color:#4f5255;border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--default,#4f5255)));--pfe-icon--context:dark}:host([color=lightest]:not([circled])) filter feFlood,:host([color=lightest][circled=false]) filter feFlood{flood-color:#fff;flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--lightest,#fff)))}:host([color=lightest][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--lightest--context, light);background-color:#fff;background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border-color:#fff;border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff)))}:host([color=base]:not([circled])) filter feFlood,:host([color=base][circled=false]) filter feFlood{flood-color:#f0f0f0;flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--base,#f0f0f0)))}:host([color=base][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--base--context, light);background-color:#f0f0f0;background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0));border-color:#f0f0f0;border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0)))}:host([color=darker]:not([circled])) filter feFlood,:host([color=darker][circled=false]) filter feFlood{flood-color:#3c3f42;flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--darker,#3c3f42)))}:host([color=darker][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--darker--context, dark);background-color:#3c3f42;background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--darker,#3c3f42));border-color:#3c3f42;border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--darker,#3c3f42)))}:host([color=darkest]:not([circled])) filter feFlood,:host([color=darkest][circled=false]) filter feFlood{flood-color:#151515;flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--darkest,#151515)))}:host([color=darkest][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--darkest--context, dark);background-color:#151515;background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--darkest,#151515));border-color:#151515;border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--darkest,#151515)))}:host([color=complement]:not([circled])) filter feFlood,:host([color=complement][circled=false]) filter feFlood{flood-color:#002952;flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--complement,#002952)))}:host([color=complement][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--complement--context, saturated);background-color:#002952;background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--complement,#002952));border-color:#002952;border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--complement,#002952)))}:host([color=accent]:not([circled])) filter feFlood,:host([color=accent][circled=false]) filter feFlood{flood-color:#004080;flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--accent,#004080)))}:host([color=accent][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--accent--context, saturated);background-color:#004080;background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--accent,#004080));border-color:#004080;border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--accent,#004080)))}:host(.load-failed) svg image,:host(.load-failed.has-fallback) svg,:host(.load-failed[on-fail=collapse]) svg{display:none}:host(.load-failed[on-fail=collapse]){max-width:0;max-width:var(--pfe-icon--size,0);max-height:0;max-height:var(--pfe-icon--size,0)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host(.load-failed[on-fail=collapse]){width:0!important;height:0!important}}:host(.load-failed[on-fail=collapse]) svg{width:0;width:var(--pfe-icon--size,0);height:0;height:var(--pfe-icon--size,0)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host(.load-failed[on-fail=collapse]) svg{width:0!important;height:0!important}} /*# sourceMappingURL=pfe-icon.min.css.map */</style>\n<div class=\"pfe-icon--fallback\">\n  <slot></slot>\n</div>\n<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\">\n  <filter color-interpolation-filters=\"sRGB\" x=\"0\" y=\"0\" height=\"100%\" width=\"100%\">\n    <feFlood result=\"COLOR\" />\n    <feComposite operator=\"in\" in=\"COLOR\" in2=\"SourceAlpha\" />\n  </filter>\n  <image xlink:href=\"\" width=\"100%\" height=\"100%\"></image>\n</svg>";
-    }
-  }, {
-    key: "templateUrl",
-    get: function get() {
-      return "pfe-icon.html";
-    }
-  }, {
-    key: "styleUrl",
-    get: function get() {
-      return "pfe-icon.scss";
-    }
-  }, {
-    key: "schemaUrl",
-    get: function get() {
-      return "pfe-icon.json";
-    } // Declare the type of this component
-
-  }, {
-    key: "upgraded",
-    get: function get() {
-      return this.image.hasAttribute("xlink:href");
-    }
-  }], [{
-    key: "version",
-    get: // Injected at build-time
-    function get() {
-      return "1.12.3";
-    }
-  }, {
-    key: "tag",
-    get: function get() {
-      return "pfe-icon";
-    }
-  }, {
-    key: "PfeType",
-    get: function get() {
-      return PFElement.PfeTypes.Content;
-    }
-  }, {
-    key: "properties",
-    get: function get() {
-      return {
-        icon: {
-          type: String,
-          observer: "updateIcon",
-          prefix: false
-        },
-        size: {
-          type: String,
-          values: ["xl", "lg", "md", "sm", "1x", "2x", "3x", "4x"],
-          "default": "1x"
-        },
-        color: {
-          type: String,
-          values: ["complement", "accent", "lightest", "base", "darker", "darkest", "critical", "important", "moderate", "success", "info"],
-          observer: "_colorChanged"
-        },
-        onFail: {
-          type: String,
-          values: ["collapse"]
-        },
-        circled: {
-          type: Boolean
-        },
-        block: {
-          type: Boolean
-        },
-        // TODO: Deprecated for 1.0
-        oldColor: {
-          type: String,
-          alias: "color",
-          attr: "pfe-color"
-        },
-        // TODO: Deprecated for 1.0
-        oldSize: {
-          type: String,
-          alias: "size",
-          attr: "pfe-size"
-        },
-        // TODO: Deprecated for 1.0
-        oldCircled: {
-          type: Boolean,
-          alias: "circled",
-          attr: "pfe-circled"
-        },
-        // TODO: Deprecated for 1.0
-        oldBlock: {
-          type: Boolean,
-          alias: "block",
-          attr: "data-block"
-        }
-      };
-    }
-  }, {
-    key: "EVENTS",
-    get: function get() {
-      return {
-        ADD_ICON_SET: this.tag + ":add-icon-set"
-      };
-    }
-  }]);
-
-  return PfeIcon;
-}(PFElement);
-
-PfeIcon._iconSets = {}; // Allow the user to supply their own icon sets via config.
-// See more in the pfe-icon README.md.
-
-var config = PFElement.config;
-addBuiltIns({
-  PfeIcon: PfeIcon,
-  config: config
-});
-PFElement.create(PfeIcon);
+var css_248z = ".vulnerabilities-table .impact-icon {\n  font-size: 1.5rem;\n  padding-right: 0.5rem; }\n  .vulnerabilities-table .impact-icon.color-critical {\n    color: #a30000; }\n  .vulnerabilities-table .impact-icon.color-important {\n    color: #ec7a08; }\n  .vulnerabilities-table .impact-icon.color-moderate {\n    color: #f5c12e; }\n  .vulnerabilities-table .impact-icon.color-low {\n    color: #777; }\n\n.vulnerabilities-table__affected-packages-cell {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap; }\n\n.vulnerabilities-table__impact-cell {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap; }\n\n.filterable-table {\n  padding-bottom: var(--pf-global--spacer--lg); }\n  .filterable-table__bottom-pagination[class] {\n    margin-top: 1rem; }\n  .filterable-table .pf-c-toolbar {\n    padding-top: 0; }\n    .filterable-table .pf-c-toolbar__content {\n      --pf-c-toolbar__content--PaddingRight: 0;\n      --pf-c-toolbar__content--PaddingLeft: 0; }\n  .filterable-table .pf-c-input-group__text {\n    --pf-c-input-group__text--PaddingRight: 0; }\n  .filterable-table .pf-c-pagination.pf-m-bottom {\n    --pf-c-pagination--m-bottom--md--PaddingRight: 0; }\n\n.packages-table .pf-c-tabs__item > button {\n  padding: 1rem 1.5rem; }\n\n.packages-table__excluded-packages-disclaimer {\n  margin: 1rem 0 0 0.5rem; }\n\n.filter-input {\n  width: 18rem;\n  margin: 1rem 0 1rem 0; }\n";
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -4299,7 +1250,17 @@ const SearchIconConfig = {
 
 const SearchIcon = createIcon(SearchIconConfig);
 
-/* eslint-disable no-unused-vars */
+const SecurityIconConfig = {
+  name: 'SecurityIcon',
+  height: 1024,
+  width: 896,
+  svgPath: 'M861.5,0 L34.5,0 C15.4,0 0,14.3 0,32 L0,452.1 C0,768 387.7,1024 448.5,1024 C509.3,1024 896,768 896,452.2 L896,32 C896,14.3 880.6,0 861.5,0 Z M490.7,768 L405.3,768 C393.5,767.8 384.2,757.5 384,744.7 L384,663.3 C384.2,650.5 393.6,640.3 405.3,640 L490.7,640 C502.5,640.2 511.8,650.5 512,663.3 L512,744.7 L512.1,744.7 C511.8,757.5 502.4,767.8 490.7,768 Z M543.9,162.7 L517.2,514.4 C515.8,530.9 502,544 485.3,544 L410.6,544 C394,544 380.1,531.2 378.7,514.7 L352.1,163 C350.5,144.3 365.3,128.3 384,128.3 L512,128 C530.7,128 545.4,144 543.9,162.7 Z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const SecurityIcon = createIcon(SecurityIconConfig);
+
 var DEFAULT_PAGE = 1;
 var DEFAULT_PERPAGE = 10;
 function FilterableTable(_ref) {
@@ -4456,10 +1417,15 @@ function FilterableTable(_ref) {
   }, renderPagination('top'))));
   return React__default["default"].createElement("div", {
     className: 'filterable-table'
-  }, isLoading ? React__default["default"].createElement(reactCore.Bullseye, null, React__default["default"].createElement("div", null, React__default["default"].createElement("pfe-progress-indicator", {
-    "pfe-indeterminate": true,
+  }, isLoading ? React__default["default"].createElement(reactCore.Bullseye, {
+    style: {
+      minHeight: '15rem'
+    }
+  }, React__default["default"].createElement("div", null, React__default["default"].createElement(reactCore.Title, {
+    headingLevel: 'h3'
+  }, React__default["default"].createElement(reactCore.Spinner, {
     size: 'lg'
-  }))) : React__default["default"].createElement(React__default["default"].Fragment, null, header, React__default["default"].createElement(TableComposable, {
+  })))) : React__default["default"].createElement(React__default["default"].Fragment, null, header, React__default["default"].createElement(TableComposable, {
     "aria-label": 'Packages Table'
   }, React__default["default"].createElement(Thead, null, React__default["default"].createElement(Tr, null, columns.map(function (col, colIdx) {
     return React__default["default"].createElement(Th, Object.assign({
@@ -4510,9 +1476,8 @@ var FilterInput = function FilterInput(_ref) {
 
   return React__default["default"].createElement("div", {
     className: 'filter-input'
-  }, React__default["default"].createElement(reactCore.TextInput, {
+  }, React__default["default"].createElement(reactCore.SearchInput, {
     value: searchStr,
-    type: 'text',
     placeholder: placeholder,
     onChange: onChange,
     "aria-label": 'Text input filter',
@@ -4523,16 +1488,10 @@ var FilterInput = function FilterInput(_ref) {
     onClick: function onClick(event) {
       event.stopPropagation();
       event.preventDefault();
+    },
+    onClear: function onClear(event) {
+      return onChange("", event);
     }
-  }), searchStr && React__default["default"].createElement("pfe-icon", {
-    "class": 'clear-icon action-icon',
-    icon: 'fas-times',
-    onClick: function onClick(event) {
-      return onChange('', event);
-    }
-  }), React__default["default"].createElement("pfe-icon", {
-    "class": 'search-icon action-icon',
-    icon: 'fas-search-solid'
   }));
 };
 
@@ -4675,10 +1634,8 @@ var VulnerabilitiesTable = function VulnerabilitiesTable(_ref) {
     var severity = _ref2.severity;
     return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
       className: 'vulnerabilities-table__impact-cell'
-    }, React__default["default"].createElement("pfe-icon", {
-      "class": "color-" + severity.toLowerCase(),
-      className: "color-" + severity.toLowerCase(),
-      icon: 'fas-shield-fill-exclamation'
+    }, React__default["default"].createElement(SecurityIcon, {
+      className: "impact-icon color-" + severity.toLowerCase()
     }), React__default["default"].createElement("span", null, severity)));
   };
 
@@ -4746,7 +1703,7 @@ var VulnerabilitiesTable = function VulnerabilitiesTable(_ref) {
   };
 
   var onStatusFilterChange = function onStatusFilterChange(selected, vulnerability) {
-    return selected === 'fixed' ? vulnerability.advisory_id !== null : selected === 'unfixed' ? vulnerability.advisory_id === null : true;
+    return selected === 'fixed' ? !!(vulnerability != null && vulnerability.advisory_id) : selected === 'unfixed' ? !(vulnerability != null && vulnerability.advisory_id) : true;
   };
 
   var onImpactFilterChange = function onImpactFilterChange(selected, vulnerability) {
@@ -4829,10 +1786,6 @@ var severitySortOrder = {
   Moderate: 3,
   Low: 4
 };
-PfeIcon.addIconSet('fas', './img', function (iconName, _, path) {
-  var name = iconName.replace('fas-', '');
-  return path + "/" + name + ".svg";
-});
 
 var InsertCss = function InsertCss() {
   var styleId = 'example-component-styles';
@@ -4861,6 +1814,10 @@ var PackagesTable = function PackagesTable(_ref) {
       uniqueVulnerabilities = _React$useState2[0],
       setUniqueVulnerabilities = _React$useState2[1];
 
+  var _React$useState3 = React__namespace.useState(0),
+      activeKey = _React$useState3[0],
+      setActiveKey = _React$useState3[1];
+
   React__namespace.useEffect(function () {
     var VALID_REDHAT_GPG_KEYS = ['199e2f91fd431d51', '5326810137017186', '45689c882fa658e0', '219180cddb42a60e', '7514f77d8366b0d9', 'fd372689897da07a', '938a80caf21541eb', '08b871e6a5787476'];
     var packages = rpms.filter(function (_ref2) {
@@ -4900,30 +1857,29 @@ var PackagesTable = function PackagesTable(_ref) {
   InsertCss();
   return React__namespace.createElement(React__namespace.Fragment, null, (uniqueVulnerabilities.length > 0 || excludedPackages.length > 0) && React__namespace.createElement("div", {
     className: 'packages-table'
-  }, React__namespace.createElement("pfe-tabs", {
-    "pfe-variant": 'earth',
-    on: 'light'
-  }, uniqueVulnerabilities.length > 0 && React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("pfe-tab", {
-    slot: 'tab',
-    role: 'heading'
-  }, "Vulnerabilities ", "(" + uniqueVulnerabilities.length + ")"), React__namespace.createElement("pfe-tab-panel", {
-    slot: 'panel',
-    role: 'region'
+  }, React__namespace.createElement(reactCore.Tabs, {
+    activeKey: activeKey,
+    onSelect: function onSelect(_evt, tabKey) {
+      return setActiveKey(tabKey);
+    },
+    variant: 'default',
+    isBox: true,
+    "aria-label": 'vulnerability tab'
+  }, uniqueVulnerabilities.length > 0 && React__namespace.createElement(reactCore.Tab, {
+    eventKey: 0,
+    title: "Vulnerabilities (" + uniqueVulnerabilities.length + ")"
   }, React__namespace.createElement(VulnerabilitiesTable, {
     vulnerabilities: uniqueVulnerabilities,
     isLoading: isLoading
-  }))), excludedPackages.length > 0 && React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("pfe-tab", {
-    slot: 'tab',
-    role: 'heading'
-  }, "Excluded Packages ", "(" + excludedPackages.length + ")"), React__namespace.createElement("pfe-tab-panel", {
-    slot: 'panel',
-    role: 'region'
+  })), excludedPackages.length >= 0 && React__namespace.createElement(reactCore.Tab, {
+    eventKey: 1,
+    title: "Excluded Packages (" + excludedPackages.length + ")"
   }, React__namespace.createElement("p", {
     className: 'packages-table__excluded-packages-disclaimer'
   }, "The following packages were found in this image and cannot be scanned or compared to public vulnerability information. This image may include additional packages or content not found or listed below."), React__namespace.createElement(ExcludedPackagesTable, {
     excludedPackages: excludedPackages,
     isLoading: isLoading
-  }))))));
+  })))));
 };
 
 exports.PackagesTable = PackagesTable;