@rhc-shared-components/packages-table 0.1.0

package/dist/index.modern.js

@@ -0,0 +1,4460 @@
+import * as React from 'react';
+import React__default, { useState, useEffect, useCallback, cloneElement } from 'react';
+import { setTabIndex, useOUIAProps, handleArrows, Tooltip as Tooltip$1, Button, Popover, Checkbox, Toolbar, ToolbarContent, ToolbarItem, Pagination, Bullseye, EmptyState, EmptyStateIcon, Title, TextInput, Select, SelectOption, ToggleGroup as ToggleGroup$1, ToggleGroupItem } from '@patternfly/react-core';
+import { sortBy, uniqueId } from 'lodash';
+import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip/Tooltip';
+import { Button as Button$1 } from '@patternfly/react-core/dist/esm/components/Button/Button';
+import mergeWith from 'lodash/mergeWith';
+import { Dropdown } from '@patternfly/react-core/dist/esm/components/Dropdown';
+import { KebabToggle } from '@patternfly/react-core/dist/esm/components/Dropdown/KebabToggle';
+import { DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown/DropdownItem';
+import { DropdownSeparator } from '@patternfly/react-core/dist/esm/components/Dropdown/DropdownSeparator';
+import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/components/Dropdown/dropdownConstants';
+import { format } from 'date-fns';
+
+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 _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);
+}
+
+let logger = () => 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
+
+  const polyfillPresent = window.WebComponents;
+  const 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 (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 (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 (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}
+//  * */
+
+
+const prefix = "pfe";
+/**
+ * @class PFElement
+ * @extends HTMLElement
+ * @version 1.12.3
+ * @classdesc Serves as the baseline for all PatternFly Element components.
+ */
+
+class PFElement extends 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
+   */
+  static debugLog(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;
+   */
+
+
+  static trackPerformance(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;
+   */
+
+
+  static get config() {
+    // @TODO: Add config validation in the future.
+    return window.PfeConfig || {};
+  }
+  /**
+   * A logging wrapper which checks the debugLog boolean and prints to the console if true.
+   *
+   * @example PFElement.log("Hello");
+   */
+
+
+  static log(...msgs) {
+    if (PFElement.debugLog()) {
+      console.log(...msgs);
+    }
+  }
+  /**
+   * Local logging that outputs the tag name as a prefix automatically
+   *
+   * @example this.log("Hello");
+   */
+
+
+  log(...msgs) {
+    PFElement.log(`[${this.tag}${this.id ? `#${this.id}` : ""}]`, ...msgs);
+  }
+  /**
+   * A console warning wrapper which formats your output with useful debugging information.
+   *
+   * @example PFElement.warn("Hello");
+   */
+
+
+  static warn(...msgs) {
+    console.warn(...msgs);
+  }
+  /**
+   * Local warning wrapper that outputs the tag name as a prefix automatically.
+   * For use inside a component's function.
+   * @example this.warn("Hello");
+   */
+
+
+  warn(...msgs) {
+    PFElement.warn(`[${this.tag}${this.id ? `#${this.id}` : ``}]`, ...msgs);
+  }
+  /**
+   * A console error wrapper which formats your output with useful debugging information.
+   * For use inside a component's function.
+   * @example PFElement.error("Hello");
+   */
+
+
+  static error(...msgs) {
+    throw new Error([...msgs].join(" "));
+  }
+  /**
+   * Local error wrapper that outputs the tag name as a prefix automatically.
+   * For use inside a component's function.
+   * @example this.error("Hello");
+   */
+
+
+  error(...msgs) {
+    PFElement.error(`[${this.tag}${this.id ? `#${this.id}` : ``}]`, ...msgs);
+  }
+  /**
+   * A global definition of component types (a general way of defining the purpose of a
+   * component and how it is put together).
+   */
+
+
+  static get PfeTypes() {
+    return {
+      Container: "container",
+      Content: "content",
+      Combo: "combo"
+    };
+  }
+  /**
+   * The current version of a component; set by the compiler using the package.json data.
+   */
+
+
+  static get version() {
+    return "1.12.3";
+  }
+  /**
+   * A local alias to the static version.
+   * For use in the console to validate version being loaded.
+   * @example PfeAccordion.version
+   */
+
+
+  get version() {
+    return this._pfeClass.version;
+  }
+  /**
+   * Global property definitions: properties managed by the base class that apply to all components.
+   */
+
+
+  static get properties() {
+    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: el => 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"]
+      }
+    };
+  }
+
+  static get observedAttributes() {
+    const properties = this.allProperties;
+
+    if (properties) {
+      const oa = Object.keys(properties).filter(prop => properties[prop].observer || properties[prop].cascade || properties[prop].alias).map(p => this._convertPropNameToAttrName(p));
+      return [...oa];
+    }
+  }
+  /**
+   * 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;
+   */
+
+
+  get randomId() {
+    return `${prefix}-` + Math.random().toString(36).substr(2, 9);
+  }
+  /**
+   * Set the --context variable with the provided value in this component.
+   */
+
+
+  set contextVariable(value) {
+    this.cssVariable("context", value);
+  }
+  /**
+   * Get the current value of the --context variable in this component.
+   * @return {string} [dark|light|saturated]
+   */
+
+
+  get contextVariable() {
+    /* @DEPRECATED --theme in 1.0, to be removed in 2.0 */
+    return this.cssVariable("context") || this.cssVariable("theme");
+  }
+  /**
+   * Returns a boolean statement of whether or not this component contains any light DOM.
+   * @returns {boolean}
+   * @example if(this.hasLightDOM()) this._init();
+   */
+
+
+  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");
+   */
+
+
+  hasSlot(name) {
+    if (!name) {
+      this.warn(`Please provide at least one slot name for which to search.`);
+      return;
+    }
+
+    if (typeof name === "string") {
+      return [...this.children].filter(child => child.hasAttribute("slot") && child.getAttribute("slot") === name).length > 0;
+    } else if (Array.isArray(name)) {
+      return name.reduce(n => [...this.children].filter(child => 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")`
+   */
+
+
+  getSlot(name = "unassigned") {
+    if (name !== "unassigned") {
+      return [...this.children].filter(child => child.hasAttribute("slot") && child.getAttribute("slot") === name);
+    } else {
+      return [...this.children].filter(child => !child.hasAttribute("slot"));
+    }
+  }
+
+  cssVariable(name, value, 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
+   */
+
+
+  contextUpdate() {
+    // Loop over light DOM elements, find direct descendants that are components
+    const lightEls = [...this.querySelectorAll("*")].filter(item => item.tagName.toLowerCase().slice(0, 4) === `${prefix}-`) // Closest will return itself or it's ancestor matching that selector
+    .filter(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(`[${this._pfeClass._getCache("prop2attr").pfelement}]`) === this;
+    }); // Loop over shadow elements, find direct descendants that are components
+
+    let shadowEls = [...this.shadowRoot.querySelectorAll("*")].filter(item => item.tagName.toLowerCase().slice(0, 4) === `${prefix}-`) // Closest will return itself or it's ancestor matching that selector
+    .filter(item => {
+      // If there is a parent element and we can find another web component in the ancestor tree
+      if (item.parentElement && item.parentElement.closest(`[${this._pfeClass._getCache("prop2attr").pfelement}]`)) {
+        return item.parentElement.closest(`[${this._pfeClass._getCache("prop2attr").pfelement}]`) === this;
+      } // Otherwise, check if the host matches this context
+
+
+      if (item.getRootNode().host === this) return true; // If neither state is true, return false
+
+      return false;
+    });
+    const 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(child => {
+      if (child.resetContext) {
+        this.log(`Update context of ${child.tagName.toLowerCase()}`); // Ask the component to recheck it's context in case it changed
+
+        child.resetContext(this.on);
+      }
+    });
+  }
+
+  resetContext(fallback) {
+    if (this.isIE11) return; // Priority order for context values to be pulled from:
+    //--> 1. context (OLD: pfe-theme)
+    //--> 2. --context (OLD: --theme)
+
+    let 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;
+  }
+
+  constructor(pfeClass, {
+    type = null,
+    delayRender = false
+  } = {}) {
+    super();
+    this._pfeClass = pfeClass;
+    this.tag = pfeClass.tag;
+    this._parseObserver = this._parseObserver.bind(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();
+  }
+  /**
+   * Standard connected callback; fires when the component is added to the DOM.
+   */
+
+
+  connectedCallback() {
+    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(() => this._initializeSlots(this.tag, this.slots));
+
+      this._initializeSlots(this.tag, this.slots);
+    }
+  }
+  /**
+   * Standard disconnected callback; fires when a componet is removed from the DOM.
+   * Add your removeEventListeners here.
+   */
+
+
+  disconnectedCallback() {
+    if (this._cascadeObserver) this._cascadeObserver.disconnect();
+    if (this._slotsObserver) this._slotsObserver.disconnect(); // Remove this instance from the pointer
+
+    const classIdx = this._pfeClass.instances.find(item => item !== this);
+
+    delete this._pfeClass.instances[classIdx];
+    const globalIdx = PFElement.allInstances.find(item => item !== this);
+    delete PFElement.allInstances[globalIdx];
+  }
+  /**
+   * Attribute changed callback fires when attributes are updated.
+   * This combines the global and the component-specific logic.
+   */
+
+
+  attributeChangedCallback(attr, oldVal, newVal) {
+    if (!this._pfeClass.allProperties) return;
+
+    let propName = this._pfeClass._attr2prop(attr);
+
+    const 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) {
+        const aliasedPropDef = this._pfeClass.allProperties[propDef.alias];
+
+        const aliasedAttr = this._pfeClass._prop2attr(propDef.alias);
+
+        const 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.
+   */
+
+
+  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.
+   */
+
+
+  emitEvent(name, {
+    bubbles = true,
+    cancelable = false,
+    composed = true,
+    detail = {}
+  } = {}) {
+    if (detail) this.log(`Custom event: ${name}`, detail);else this.log(`Custom event: ${name}`);
+    this.dispatchEvent(new CustomEvent(name, {
+      bubbles,
+      cancelable,
+      composed,
+      detail
+    }));
+  }
+  /**
+   * Handles the cascading of properties to nested components when new elements are added
+   * Attribute updates/additions are handled by the attribute callback
+   */
+
+
+  cascadeProperties(nodeList) {
+    const cascade = this._pfeClass._getCache("cascadingProperties");
+
+    if (cascade) {
+      if (this._cascadeObserver) this._cascadeObserver.disconnect();
+      let selectors = Object.keys(cascade); // Find out if anything in the nodeList matches any of the observed selectors for cacading properties
+
+      if (selectors) {
+        if (nodeList) {
+          [...nodeList].forEach(nodeItem => {
+            selectors.forEach(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)) {
+                let attrNames = cascade[selector]; // each selector can match multiple properties/attributes, so
+                // copy each of them
+
+                attrNames.forEach(attrName => this._copyAttribute(attrName, nodeItem));
+              }
+            });
+          });
+        } else {
+          // If a match was found, cascade each attribute to the element
+          const components = selectors.filter(item => item.slice(0, prefix.length + 1) === `${prefix}-`).map(name => customElements.whenDefined(name));
+          if (components) Promise.all(components).then(() => {
+            this._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
+   */
+
+
+  _upgradeObserver() {
+    this.classList.add("PFElement");
+  }
+  /**
+   * This responds to changes in the context attribute; manual override tool
+   */
+
+
+  _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
+   */
+
+
+  _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
+   */
+
+
+  _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
+
+      const regex = /--[\w|-]*(?:context|theme):\s*(?:\"*(light|dark|saturated)\"*)/gi;
+      let match = regex.exec(newValue); // If no match is returned, exit the observer
+
+      if (!match) return;
+      const 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
+   */
+
+
+  _parseObserver(mutationsList) {
+    // Iterate over the mutation list, look for cascade updates
+    for (let mutation of mutationsList) {
+      // If a new node is added, attempt to cascade attributes to it
+      if (mutation.type === "childList" && mutation.addedNodes.length) {
+        const nonTextNodes = [...mutation.addedNodes].filter(n => n.nodeType !== HTMLElement.TEXT_NODE);
+        this.cascadeProperties(nonTextNodes);
+      }
+    }
+  }
+  /* --- End observers --- */
+
+  /**
+   * Validate that the property meets the requirements for type and naming.
+   */
+
+
+  static _validateProperties() {
+    for (let propName in this.allProperties) {
+      const 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`);
+      }
+
+      const 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.
+   */
+
+
+  _castPropertyValue(propDef, attrValue) {
+    switch (propDef.type) {
+      case Number:
+        // map various attribute string values to their respective
+        // desired property values
+        return {
+          [attrValue]: Number(attrValue),
+          null: null,
+          NaN: NaN,
+          undefined: undefined
+        }[attrValue];
+
+      case Boolean:
+        return attrValue !== null;
+
+      case String:
+        return {
+          [attrValue]: attrValue,
+          undefined: undefined
+        }[attrValue];
+
+      default:
+        return attrValue;
+    }
+  }
+  /**
+   * Map provided value to the attribute name on the component.
+   */
+
+
+  _assignValueToAttribute(obj, attr, value) {
+    // If the default is false and the property is boolean, we don't need to do anything
+    const isBooleanFalse = obj.type === Boolean && !value;
+    const isNull = value === null;
+    const 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
+   */
+
+
+  _initializeSlots(tag, slots) {
+    this.log("Validate slots...");
+    if (this._slotsObserver) this._slotsObserver.disconnect(); // Loop over the properties provided by the schema
+
+    Object.keys(slots).forEach(slot => {
+      let slotObj = slots[slot]; // Only attach the information if the data provided is a schema object
+
+      if (typeof slotObj === "object") {
+        let slotExists = false;
+        let result = []; // If it's a named slot, look for that slot definition
+
+        if (slotObj.namedSlot) {
+          // Check prefixed slots
+          result = this.getSlot(`${tag}--${slot}`);
+
+          if (result.length > 0) {
+            slotObj.nodes = result;
+            slotExists = true;
+          } // Check for unprefixed slots
+
+
+          result = this.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 = [...this.children].filter(child => !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) {
+          this.setAttribute(`has_${slot}`, "");
+        } else {
+          this.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.
+   */
+
+
+  _initializeProperties() {
+    const properties = this._pfeClass.allProperties;
+    let hasCascade = false;
+    if (Object.keys(properties).length > 0) this.log(`Initialize properties`);
+
+    for (let propName in properties) {
+      const 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 this[propName] !== "undefined") {
+        this.log(`Property "${propName}" on ${this.constructor.name} cannot be defined because the property name is reserved`);
+      } else {
+        const attrName = this._pfeClass._prop2attr(propName);
+
+        if (propDef.cascade) hasCascade = true;
+        Object.defineProperty(this, propName, {
+          get: () => {
+            const attrValue = this.getAttribute(attrName);
+            return this._castPropertyValue(propDef, attrValue);
+          },
+          set: rawNewVal => {
+            // Assign the value to the attribute
+            this._assignValueToAttribute(propDef, attrName, rawNewVal);
+
+            return rawNewVal;
+          },
+          writeable: true,
+          enumerable: true,
+          configurable: false
+        });
+      }
+    } // 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.
+   */
+
+
+  _initializeAttributeDefaults() {
+    const properties = this._pfeClass.allProperties;
+
+    for (let propName in properties) {
+      const propDef = properties[propName];
+
+      const attrName = this._pfeClass._prop2attr(propName);
+
+      if (propDef.hasOwnProperty("default")) {
+        let 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
+
+
+  _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.
+   */
+
+
+  static _prop2attr(propName) {
+    return this._getCache("prop2attr")[propName];
+  }
+  /**
+   * Look up an property name linked to a given attribute name.
+   */
+
+
+  static _attr2prop(attrName) {
+    return this._getCache("attr2prop")[attrName];
+  }
+  /**
+   * Convert a property name to an attribute name.
+   */
+
+
+  static _convertPropNameToAttrName(propName) {
+    const propDef = this.allProperties[propName];
+
+    if (propDef.attr) {
+      return propDef.attr;
+    }
+
+    return propName.replace(/^_/, "").replace(/^[A-Z]/, l => l.toLowerCase()).replace(/[A-Z]/g, l => `-${l.toLowerCase()}`);
+  }
+  /**
+   * Convert an attribute name to a property name.
+   */
+
+
+  static _convertAttrNameToPropName(attrName) {
+    for (let prop in this.allProperties) {
+      if (this.allProperties[prop].attr === attrName) {
+        return prop;
+      }
+    } // Convert the property name to kebab case
+
+
+    const propName = attrName.replace(/-([A-Za-z])/g, l => l[1].toUpperCase());
+    return propName;
+  }
+
+  _cascadeAttributes(selectors, set) {
+    selectors.forEach(selector => {
+      set[selector].forEach(attr => {
+        this._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.
+   */
+
+
+  _cascadeAttribute(name, to) {
+    const recipients = [...this.querySelectorAll(to), ...this.shadowRoot.querySelectorAll(to)];
+
+    for (const node of recipients) {
+      this._copyAttribute(name, node);
+    }
+  }
+  /**
+   * Copy the named attribute to a target element.
+   */
+
+
+  _copyAttribute(name, el) {
+    this.log(`copying ${name} to ${el}`);
+    const value = this.getAttribute(name);
+    const fname = value == null ? "removeAttribute" : "setAttribute";
+    el[fname](name, value);
+  }
+
+  static _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;
+  }
+
+  static _parsePropertiesForCascade(mergedProperties) {
+    let cascadingProperties = {}; // Parse the properties to pull out attributes that cascade
+
+    for (const [propName, config] of Object.entries(mergedProperties)) {
+      let cascadeTo = this._convertSelectorsToArray(config.cascade); // Iterate over each node in the cascade list for this property
+
+
+      if (cascadeTo) cascadeTo.map(nodeItem => {
+        let attr = this._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);
+      });
+    }
+
+    return cascadingProperties;
+  }
+  /**
+   * Caching the attributes and properties data for efficiency
+   */
+
+
+  static 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
+      const 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.`);
+      }
+    }
+  }
+
+  static _createCache() {
+    this._cache = {
+      properties: {},
+      globalProperties: {},
+      componentProperties: {},
+      cascadingProperties: {},
+      attr2prop: {},
+      prop2attr: {}
+    };
+  }
+  /**
+   * Cache an object in a given cache namespace.  This overwrites anything
+   * already in that namespace.
+   */
+
+
+  static _setCache(namespace, object) {
+    this._cache[namespace] = object;
+  }
+  /**
+   * Get a cached object by namespace, or get all cached objects.
+   */
+
+
+  static _getCache(namespace) {
+    return namespace ? this._cache[namespace] : this._cache;
+  }
+  /**
+   * Populate initial values for properties cache.
+   */
+
+
+  static _populateCache(pfe) {
+    // @TODO add a warning when a component property conflicts with a global property.
+    const 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
+
+
+    const prop2attr = {};
+    const attr2prop = {};
+
+    for (let propName in mergedProperties) {
+      const attrName = this._convertPropNameToAttrName(propName);
+
+      prop2attr[propName] = attrName;
+      attr2prop[attrName] = propName;
+    }
+
+    pfe._setCache("attr2prop", attr2prop);
+
+    pfe._setCache("prop2attr", prop2attr);
+
+    const 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.
+   */
+
+
+  static get allProperties() {
+    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.
+   */
+
+
+  static get cascadingProperties() {
+    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)
+   */
+
+
+  static get breakpoint() {
+    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;
+
+    };
+  }
+
+} // 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 (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.
+ * 
+*/
+
+
+const TAB_CONTENT_MUTATION_CONFIG = {
+  characterData: true,
+  childList: true,
+  subtree: true
+};
+
+class PfeTab extends PFElement {
+  // Injected at build-time
+  static get version() {
+    return "1.12.3";
+  } // Injected at build-time
+
+
+  get html() {
+    return `
+<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>
+<span id="tab"></span>`;
+  }
+
+  static get tag() {
+    return "pfe-tab";
+  }
+
+  get styleUrl() {
+    return "pfe-tab.scss";
+  }
+
+  get templateUrl() {
+    return "pfe-tab.html";
+  }
+
+  static get properties() {
+    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
+
+
+  static get PfeType() {
+    return PFElement.PfeTypes.Content;
+  }
+
+  constructor() {
+    super(PfeTab, {
+      type: PfeTab.PfeType
+    });
+    this._init = this._init.bind(this);
+    this._setTabContent = this._setTabContent.bind(this);
+    this._getTabElement = this._getTabElement.bind(this);
+    this._observer = new MutationObserver(this._init);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._tabItem = this.shadowRoot.querySelector(`#tab`);
+    if (this.hasLightDOM()) this._init();
+
+    this._observer.observe(this, TAB_CONTENT_MUTATION_CONFIG);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this._observer.disconnect();
+  }
+
+  _selectedHandler() {
+    if (this.selected === "true") this.tabindex = 0;else this.tabindex = -1;
+  }
+
+  _oldPfeIdChanged(oldVal, newVal) {
+    if (!this.id) this.id = newVal;
+  }
+
+  _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);
+  }
+
+  _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") {
+        const 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.`);
+        const htags = slotted.filter(slot => 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;
+  }
+
+  _setTabContent() {
+    let label = "";
+    let isTag = false;
+
+    let 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;
+    }
+
+    let 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
+
+
+    let 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);
+    }
+  }
+
+}
+/*!
+ * 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.
+ * 
+*/
+
+
+const TAB_PANEL_MUTATION_CONFIG = {
+  childList: true,
+  subtree: true
+};
+
+class PfeTabPanel extends PFElement {
+  // Injected at build-time
+  static get version() {
+    return "1.12.3";
+  } // Injected at build-time
+
+
+  get html() {
+    return `
+<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>
+<div tabindex="-1" role="tabpanel">
+  <div class="container">
+    <slot></slot>
+  </div>
+</div>`;
+  }
+
+  static get tag() {
+    return "pfe-tab-panel";
+  }
+
+  get styleUrl() {
+    return "pfe-tab-panel.scss";
+  }
+
+  get templateUrl() {
+    return "pfe-tab-panel.html";
+  }
+
+  static get properties() {
+    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
+
+
+  static get PfeType() {
+    return PFElement.PfeTypes.Container;
+  }
+
+  constructor() {
+    super(PfeTabPanel, {
+      type: PfeTabPanel.PfeType
+    });
+    this._init = this._init.bind(this);
+    this._observer = new MutationObserver(this._init);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasLightDOM()) this._init();
+
+    this._observer.observe(this, TAB_PANEL_MUTATION_CONFIG);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this._observer.disconnect();
+  }
+
+  _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);
+  }
+
+  _oldPfeIdChanged(oldVal, newVal) {
+    if (!this.id) this.id = newVal;
+  }
+
+}
+/*!
+ * 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.
+ * 
+*/
+
+
+const KEYCODE = {
+  DOWN: 40,
+  LEFT: 37,
+  RIGHT: 39,
+  UP: 38,
+  HOME: 36,
+  END: 35
+}; // @IE11 doesn't support URLSearchParams
+// https://caniuse.com/#search=urlsearchparams
+
+const CAN_USE_URLSEARCHPARAMS = window.URLSearchParams ? true : false;
+const TABS_MUTATION_CONFIG = {
+  childList: true,
+  subtree: true
+};
+
+class PfeTabs extends PFElement {
+  // Injected at build-time
+  static get version() {
+    return "1.12.3";
+  } // Injected at build-time
+
+
+  get html() {
+    return `
+<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>
+<div class="tabs">
+  <div class="tabs-prefix"></div>
+  <slot name="tab"></slot>
+  <div class="tabs-suffix"></div>
+</div>
+<div class="panels">
+  <slot name="panel"></slot>
+</div>`;
+  }
+
+  static get tag() {
+    return "pfe-tabs";
+  }
+
+  get styleUrl() {
+    return "pfe-tabs.scss";
+  }
+
+  static get meta() {
+    return {
+      title: "Tabs",
+      description: "This element creates a tabbed interface."
+    };
+  }
+
+  get templateUrl() {
+    return "pfe-tabs.html";
+  } // Each set contains a header and a panel
+
+
+  static get contentTemplate() {
+    return `
+      <pfe-tab content-type="header" slot="tab"></pfe-tab>
+      <pfe-tab-panel content-type="panel" slot="panel"></pfe-tab-panel>
+    `;
+  }
+
+  static get properties() {
+    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"
+      }
+    };
+  }
+
+  static get slots() {
+    return {
+      tab: {
+        title: "Tab",
+        type: "array",
+        namedSlot: true,
+        items: {
+          $ref: "pfe-tab"
+        }
+      },
+      panel: {
+        title: "Panel",
+        type: "array",
+        namedSlot: true,
+        items: {
+          $ref: "pfe-tab-panel"
+        }
+      }
+    };
+  }
+
+  static get events() {
+    return {
+      hiddenTab: `${this.tag}:hidden-tab`,
+      shownTab: `${this.tag}:shown-tab`
+    };
+  } // Declare the type of this component
+
+
+  static get PfeType() {
+    return PFElement.PfeTypes.Combo;
+  }
+
+  constructor() {
+    super(PfeTabs, {
+      type: PfeTabs.PfeType
+    });
+    this._linked = false;
+    this._init = this._init.bind(this);
+    this._onClick = this._onClick.bind(this);
+    this._linkPanels = this._linkPanels.bind(this);
+    this._popstateEventHandler = this._popstateEventHandler.bind(this);
+    this._observer = new MutationObserver(this._init);
+    this._updateHistory = true;
+  }
+
+  connectedCallback() {
+    Promise.all([customElements.whenDefined(PfeTab.tag), customElements.whenDefined(PfeTabPanel.tag)]).then(() => {
+      super.connectedCallback();
+      if (this.hasLightDOM()) this._init();
+
+      this._observer.observe(this, TABS_MUTATION_CONFIG);
+
+      this.addEventListener("keydown", this._onKeyDown);
+      this.addEventListener("click", this._onClick);
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._onKeyDown);
+
+    this._allTabs().forEach(tab => tab.removeEventListener("click", this._onClick));
+
+    this._observer.disconnect();
+
+    if (this.tabHistory) window.removeEventListener("popstate", this._popstateEventHandler);
+  }
+
+  _verticalHandler() {
+    if (this.vertical) this.orientation = "vertical";else this.orientation = "horizontal";
+  }
+
+  _selectedIndexHandler(oldVal, newVal) {
+    // Wait until the tab and panels are loaded
+    Promise.all([customElements.whenDefined(PfeTab.tag), customElements.whenDefined(PfeTabPanel.tag)]).then(() => {
+      this._linkPanels();
+
+      this.selectIndex(newVal);
+      this._updateHistory = true;
+    });
+  }
+
+  _tabHistoryHandler() {
+    if (!this.tabHistory) window.removeEventListener("popstate", this._popstateEventHandler);else window.addEventListener("popstate", this._popstateEventHandler);
+  }
+
+  _oldPfeIdChanged(oldVal, newVal) {
+    if (!this.id && newVal) this.id = newVal;
+  }
+
+  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);
+  }
+
+  selectIndex(_index) {
+    if (_index === undefined || _index === null) return;
+    const index = parseInt(_index, 10);
+
+    const tabs = this._allTabs();
+
+    const 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
+      const pathname = window.location.pathname;
+      const urlParams = new URLSearchParams(window.location.search);
+      const hash = window.location.hash;
+      urlParams.set(this.id, tab.id);
+      history.pushState({}, "", `${pathname}?${urlParams.toString()}${hash}`);
+    }
+
+    this._selectTab(tab);
+
+    return tab;
+  }
+
+  _init() {
+    const 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);
+  }
+
+  _linkPanels() {
+    if (this._linked) return;
+    if (window.ShadyCSS) this._observer.disconnect();
+
+    this._allTabs().forEach(tab => {
+      const panel = tab.nextElementSibling;
+
+      if (panel.tagName.toLowerCase() !== PfeTabPanel.tag) {
+        this.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", this._onClick);
+    });
+
+    this._linked = true;
+    if (window.ShadyCSS) this._observer.observe(this, TABS_MUTATION_CONFIG);
+  }
+
+  _allPanels() {
+    return [...this.children].filter(child => child.matches(PfeTabPanel.tag));
+  }
+
+  _allTabs() {
+    return [...this.children].filter(child => child.matches(PfeTab.tag));
+  }
+
+  _panelForTab(tab) {
+    if (!tab || !tab.controls) return;
+    return this.querySelector(`#${tab.controls}`);
+  }
+
+  _prevTab() {
+    const tabs = this._allTabs();
+
+    let newIdx = tabs.findIndex(tab => tab.selected === "true") - 1;
+    return tabs[(newIdx + tabs.length) % tabs.length];
+  }
+
+  _firstTab() {
+    const tabs = this._allTabs();
+
+    return tabs[0];
+  }
+
+  _lastTab() {
+    const tabs = this._allTabs();
+
+    return tabs[tabs.length - 1];
+  }
+
+  _nextTab() {
+    const tabs = this._allTabs();
+
+    let newIdx = tabs.findIndex(tab => tab.selected === "true") + 1;
+    return tabs[newIdx % tabs.length];
+  }
+
+  _getTabIndex(_tab) {
+    if (_tab) {
+      const tabs = this._allTabs();
+
+      return tabs.findIndex(tab => tab.id === _tab.id);
+    } else {
+      this.warn(`No tab was provided to _getTabIndex; required to return the index value.`);
+      return 0;
+    }
+  }
+
+  reset() {
+    const tabs = this._allTabs();
+
+    const panels = this._allPanels();
+
+    tabs.forEach(tab => tab.selected = "false");
+    panels.forEach(panel => panel.hidden = true);
+  }
+
+  _selectTab(newTab) {
+    if (!newTab) return;
+    this.reset();
+
+    const newPanel = this._panelForTab(newTab);
+
+    let 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;
+  }
+
+  _onKeyDown(event) {
+    const tabs = this._allTabs();
+
+    const foundTab = tabs.find(tab => tab === event.target);
+
+    if (!foundTab) {
+      return;
+    }
+
+    if (event.altKey) {
+      return;
+    }
+
+    let 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.`);
+    }
+  }
+
+  _onClick(event) {
+    // Find the clicked tab
+    const foundTab = this._allTabs().find(tab => 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);
+  }
+
+  _getTabIndexFromURL() {
+    let 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);
+      const tabsetInUrl = urlParams.has(`${this.id}`) || urlParams.has(`pfe-${this.id}`); // remove this condition when it's no longer used in production
+
+      if (urlParams && tabsetInUrl) {
+        let 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(tab => tab.id === id);
+      }
+    }
+
+    return -1;
+  }
+
+  _popstateEventHandler() {
+    const tabIndexFromURL = this._getTabIndexFromURL();
+
+    this._updateHistory = false;
+    if (tabIndexFromURL > -1) this.selectedIndex = tabIndexFromURL;
+  }
+
+}
+
+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;
+})();
+
+class PfeIconSet {
+  /**
+   * Run the icon set's name resolver to turn an icon name into an icon path, id, etc.
+   */
+  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' }`
+   */
+
+
+  constructor(name, path, resolveIconName) {
+    this.name = name;
+    this.path = path;
+    this._resolveIconName = resolveIconName;
+  }
+
+}
+/**
+ * An 'init' function to add the PFE built-in icon sets to the current page.
+ */
+
+
+function addBuiltIns({
+  PfeIcon,
+  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.
+
+
+  const 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"
+  }];
+
+  let resolveDefaultIconName = (name, iconSetName, iconSetPath) => {
+    const regex = new RegExp(`^${iconSetName}(-icon)?-(.*)`);
+    const [,, iconName] = regex.exec(name);
+    const iconId = `${iconSetName}-icon-${iconName}`;
+    const iconPath = `${iconSetPath}/${iconId}.svg`;
+    return iconPath;
+  }; // Register the icon sets.
+
+
+  iconSets.forEach(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) {
+  const 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);
+}
+
+class PfeIcon extends PFElement {
+  // Injected at build-time
+  static get version() {
+    return "1.12.3";
+  } // Injected at build-time
+
+
+  get html() {
+    return `
+<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>
+<div class="pfe-icon--fallback">
+  <slot></slot>
+</div>
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20">
+  <filter color-interpolation-filters="sRGB" x="0" y="0" height="100%" width="100%">
+    <feFlood result="COLOR" />
+    <feComposite operator="in" in="COLOR" in2="SourceAlpha" />
+  </filter>
+  <image xlink:href="" width="100%" height="100%"></image>
+</svg>`;
+  }
+
+  static get tag() {
+    return "pfe-icon";
+  }
+
+  get templateUrl() {
+    return "pfe-icon.html";
+  }
+
+  get styleUrl() {
+    return "pfe-icon.scss";
+  }
+
+  get schemaUrl() {
+    return "pfe-icon.json";
+  } // Declare the type of this component
+
+
+  static get PfeType() {
+    return PFElement.PfeTypes.Content;
+  }
+
+  static get properties() {
+    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"
+      }
+    };
+  }
+
+  static get EVENTS() {
+    return {
+      ADD_ICON_SET: `${this.tag}:add-icon-set`
+    };
+  }
+
+  get upgraded() {
+    return this.image.hasAttribute("xlink:href");
+  }
+
+  _iconLoad() {
+    this.classList.remove("load-failed");
+  }
+
+  _iconLoadError(e) {
+    this.classList.add("load-failed");
+    if (this.hasLightDOM()) this.classList.add("has-fallback");
+  }
+
+  _colorChanged() {
+    // Update the context
+    this.resetContext();
+  }
+
+  constructor() {
+    super(PfeIcon, {
+      type: PfeIcon.PfeType
+    });
+    this._iconLoad = this._iconLoad.bind(this);
+    this._iconLoadError = this._iconLoadError.bind(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, () => this.updateIcon());
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    if (this.image) {
+      this.image.removeEventListener("load", this._iconLoad);
+      this.image.removeEventListener("error", this._iconLoadError);
+    }
+  }
+
+  updateIcon() {
+    const {
+      set
+    } = PfeIcon.getIconSet(this.icon);
+
+    if (set) {
+      const 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
+   */
+
+
+  static getIconSet(iconName) {
+    let set;
+
+    if (iconName) {
+      const [setName] = iconName.split("-");
+      set = this._iconSets[setName];
+    }
+
+    return {
+      set
+    };
+  }
+
+  static addIconSet(name, path, resolveIconName) {
+    let 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]
+      }
+    }));
+  }
+
+}
+
+PfeIcon._iconSets = {}; // Allow the user to supply their own icon sets via config.
+// See more in the pfe-icon README.md.
+
+const config = PFElement.config;
+addBuiltIns({
+  PfeIcon,
+  config
+});
+PFElement.create(PfeIcon);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function __rest(s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+
+import('./inline-edit-b186d03c.js');
+var inlineStyles = {
+  "button": "pf-c-button",
+  "inlineEdit": "pf-c-inline-edit",
+  "inlineEditAction": "pf-c-inline-edit__action",
+  "inlineEditEditableText": "pf-c-inline-edit__editable-text",
+  "inlineEditGroup": "pf-c-inline-edit__group",
+  "inlineEditInput": "pf-c-inline-edit__input",
+  "inlineEditLabel": "pf-c-inline-edit__label",
+  "inlineEditValue": "pf-c-inline-edit__value",
+  "modifiers": {
+    "iconGroup": "pf-m-icon-group",
+    "footer": "pf-m-footer",
+    "column": "pf-m-column",
+    "valid": "pf-m-valid",
+    "plain": "pf-m-plain",
+    "actionGroup": "pf-m-action-group",
+    "enableEditable": "pf-m-enable-editable",
+    "inlineEditable": "pf-m-inline-editable",
+    "enable": "pf-m-enable",
+    "bold": "pf-m-bold"
+  }
+};
+
+/** Joins args into a className string
+ *
+ * @param {any} args list of objects, string, or arrays to reduce
+ */
+function css(...args) {
+    // Adapted from https://github.com/JedWatson/classnames/blob/master/index.js
+    const classes = [];
+    const hasOwn = {}.hasOwnProperty;
+    args.filter(Boolean).forEach((arg) => {
+        const argType = typeof arg;
+        if (argType === 'string' || argType === 'number') {
+            classes.push(arg);
+        }
+        else if (Array.isArray(arg) && arg.length) {
+            const inner = css(...arg);
+            if (inner) {
+                classes.push(inner);
+            }
+        }
+        else if (argType === 'object') {
+            for (const key in arg) {
+                if (hasOwn.call(arg, key) && arg[key]) {
+                    classes.push(key);
+                }
+            }
+        }
+    });
+    return classes.join(' ');
+}
+
+import('./table-ffd0513c.js');
+var styles$1 = {
+  "button": "pf-c-button",
+  "modifiers": {
+    "hidden": "pf-m-hidden",
+    "hiddenOnSm": "pf-m-hidden-on-sm",
+    "visibleOnSm": "pf-m-visible-on-sm",
+    "hiddenOnMd": "pf-m-hidden-on-md",
+    "visibleOnMd": "pf-m-visible-on-md",
+    "hiddenOnLg": "pf-m-hidden-on-lg",
+    "visibleOnLg": "pf-m-visible-on-lg",
+    "hiddenOnXl": "pf-m-hidden-on-xl",
+    "visibleOnXl": "pf-m-visible-on-xl",
+    "hiddenOn_2xl": "pf-m-hidden-on-2xl",
+    "visibleOn_2xl": "pf-m-visible-on-2xl",
+    "fixed": "pf-m-fixed",
+    "stickyHeader": "pf-m-sticky-header",
+    "striped": "pf-m-striped",
+    "expandable": "pf-m-expandable",
+    "stripedEven": "pf-m-striped-even",
+    "ghostRow": "pf-m-ghost-row",
+    "center": "pf-m-center",
+    "help": "pf-m-help",
+    "favorite": "pf-m-favorite",
+    "borderRight": "pf-m-border-right",
+    "borderLeft": "pf-m-border-left",
+    "nestedColumnHeader": "pf-m-nested-column-header",
+    "truncate": "pf-m-truncate",
+    "wrap": "pf-m-wrap",
+    "nowrap": "pf-m-nowrap",
+    "fitContent": "pf-m-fit-content",
+    "breakWord": "pf-m-break-word",
+    "noBorderRows": "pf-m-no-border-rows",
+    "expanded": "pf-m-expanded",
+    "hoverable": "pf-m-hoverable",
+    "selected": "pf-m-selected",
+    "firstCellOffsetReset": "pf-m-first-cell-offset-reset",
+    "dragOver": "pf-m-drag-over",
+    "favorited": "pf-m-favorited",
+    "noPadding": "pf-m-no-padding",
+    "compact": "pf-m-compact",
+    "width_10": "pf-m-width-10",
+    "width_15": "pf-m-width-15",
+    "width_20": "pf-m-width-20",
+    "width_25": "pf-m-width-25",
+    "width_30": "pf-m-width-30",
+    "width_35": "pf-m-width-35",
+    "width_40": "pf-m-width-40",
+    "width_45": "pf-m-width-45",
+    "width_50": "pf-m-width-50",
+    "width_60": "pf-m-width-60",
+    "width_70": "pf-m-width-70",
+    "width_80": "pf-m-width-80",
+    "width_90": "pf-m-width-90",
+    "width_100": "pf-m-width-100"
+  },
+  "table": "pf-c-table",
+  "tableAction": "pf-c-table__action",
+  "tableButton": "pf-c-table__button",
+  "tableButtonContent": "pf-c-table__button-content",
+  "tableCheck": "pf-c-table__check",
+  "tableColumnHelp": "pf-c-table__column-help",
+  "tableColumnHelpAction": "pf-c-table__column-help-action",
+  "tableCompoundExpansionToggle": "pf-c-table__compound-expansion-toggle",
+  "tableControlRow": "pf-c-table__control-row",
+  "tableDraggable": "pf-c-table__draggable",
+  "tableExpandableRow": "pf-c-table__expandable-row",
+  "tableExpandableRowContent": "pf-c-table__expandable-row-content",
+  "tableFavorite": "pf-c-table__favorite",
+  "tableIcon": "pf-c-table__icon",
+  "tableIconInline": "pf-c-table__icon-inline",
+  "tableInlineEditAction": "pf-c-table__inline-edit-action",
+  "tableSort": "pf-c-table__sort",
+  "tableSortIndicator": "pf-c-table__sort-indicator",
+  "tableSubhead": "pf-c-table__subhead",
+  "tableText": "pf-c-table__text",
+  "tableToggle": "pf-c-table__toggle",
+  "tableToggleIcon": "pf-c-table__toggle-icon",
+  "themeDark": "pf-theme-dark"
+};
+
+import('./table-grid-5d7f8359.js');
+var stylesGrid = {
+  "button": "pf-c-button",
+  "modifiers": {
+    "grid": "pf-m-grid",
+    "compact": "pf-m-compact",
+    "expanded": "pf-m-expanded",
+    "selected": "pf-m-selected",
+    "noPadding": "pf-m-no-padding",
+    "hoverable": "pf-m-hoverable",
+    "nowrap": "pf-m-nowrap",
+    "fitContent": "pf-m-fit-content",
+    "truncate": "pf-m-truncate",
+    "gridMd": "pf-m-grid-md",
+    "gridLg": "pf-m-grid-lg",
+    "gridXl": "pf-m-grid-xl",
+    "grid_2xl": "pf-m-grid-2xl"
+  },
+  "table": "pf-c-table",
+  "tableAction": "pf-c-table__action",
+  "tableButton": "pf-c-table__button",
+  "tableCheck": "pf-c-table__check",
+  "tableCompoundExpansionToggle": "pf-c-table__compound-expansion-toggle",
+  "tableExpandableRow": "pf-c-table__expandable-row",
+  "tableExpandableRowContent": "pf-c-table__expandable-row-content",
+  "tableFavorite": "pf-c-table__favorite",
+  "tableIcon": "pf-c-table__icon",
+  "tableInlineEditAction": "pf-c-table__inline-edit-action",
+  "tableText": "pf-c-table__text",
+  "tableToggle": "pf-c-table__toggle",
+  "tableToggleIcon": "pf-c-table__toggle-icon"
+};
+
+import('./table-tree-view-ee6ac38a.js');
+var stylesTreeView = {
+  "dropdown": "pf-c-dropdown",
+  "modifiers": {
+    "treeView": "pf-m-tree-view",
+    "treeViewGrid": "pf-m-tree-view-grid",
+    "treeViewDetailsExpanded": "pf-m-tree-view-details-expanded",
+    "treeViewGridMd": "pf-m-tree-view-grid-md",
+    "treeViewGridLg": "pf-m-tree-view-grid-lg",
+    "treeViewGridXl": "pf-m-tree-view-grid-xl",
+    "treeViewGrid_2xl": "pf-m-tree-view-grid-2xl"
+  },
+  "table": "pf-c-table",
+  "tableAction": "pf-c-table__action",
+  "tableCheck": "pf-c-table__check",
+  "tableToggle": "pf-c-table__toggle",
+  "tableToggleIcon": "pf-c-table__toggle-icon",
+  "tableTreeViewDetailsToggle": "pf-c-table__tree-view-details-toggle",
+  "tableTreeViewIcon": "pf-c-table__tree-view-icon",
+  "tableTreeViewMain": "pf-c-table__tree-view-main",
+  "tableTreeViewText": "pf-c-table__tree-view-text",
+  "tableTreeViewTitleCell": "pf-c-table__tree-view-title-cell",
+  "tableTreeViewTitleHeaderCell": "pf-c-table__tree-view-title-header-cell"
+};
+
+const camelize = (s) => s
+    .toUpperCase()
+    .replace('-', '')
+    .replace('_', '');
+const toCamel = (s) => s.replace(/([-_][a-z])/gi, camelize);
+/**
+ * @param {string} input - String to capitalize
+ */
+function capitalize(input) {
+    return input[0].toUpperCase() + input.substring(1);
+}
+
+var TableGridBreakpoint;
+(function (TableGridBreakpoint) {
+    TableGridBreakpoint["none"] = "";
+    TableGridBreakpoint["grid"] = "grid";
+    TableGridBreakpoint["gridMd"] = "grid-md";
+    TableGridBreakpoint["gridLg"] = "grid-lg";
+    TableGridBreakpoint["gridXl"] = "grid-xl";
+    TableGridBreakpoint["grid2xl"] = "grid-2xl";
+})(TableGridBreakpoint || (TableGridBreakpoint = {}));
+var TableVariant;
+(function (TableVariant) {
+    TableVariant["compact"] = "compact";
+})(TableVariant || (TableVariant = {}));
+
+const TableComposableContext = React.createContext({
+    registerSelectableRow: () => { }
+});
+const TableComposableBase = (_a) => {
+    var _b, _c;
+    var { children, className, variant, borders = true, isStickyHeader = false, gridBreakPoint = TableGridBreakpoint.gridMd, 'aria-label': ariaLabel, role = 'grid', innerRef, ouiaId, ouiaSafe = true, isTreeTable = false, isNested = false, isStriped = false, isExpandable = false, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    nestedHeaderColumnSpans, hasSelectableRowCaption, selectableRowCaptionText } = _a, props = __rest(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "isStriped", "isExpandable", "nestedHeaderColumnSpans", "hasSelectableRowCaption", "selectableRowCaptionText"]);
+    const tableRef = innerRef || React.useRef(null);
+    const [hasSelectableRows, setHasSelectableRows] = React.useState(false);
+    const [tableCaption, setTableCaption] = React.useState();
+    React.useEffect(() => {
+        document.addEventListener('keydown', handleKeys);
+        // sets up roving tab-index to tree tables only
+        if (tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) {
+            const tbody = tableRef.current.querySelector('tbody');
+            tbody && setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
+        }
+        return function cleanup() {
+            document.removeEventListener('keydown', handleKeys);
+        };
+    }, [tableRef, tableRef.current]);
+    React.useEffect(() => {
+        if (selectableRowCaptionText) {
+            setTableCaption(React.createElement("caption", null,
+                selectableRowCaptionText,
+                React.createElement("div", { className: "pf-screen-reader" }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter.")));
+        }
+        else {
+            setTableCaption(React.createElement("caption", { className: "pf-screen-reader" }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter."));
+        }
+    }, [selectableRowCaptionText]);
+    const ouiaProps = useOUIAProps('Table', ouiaId, ouiaSafe);
+    const grid = (_b = stylesGrid.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
+    const breakPointPrefix = `treeView${gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1)}`;
+    const treeGrid = (_c = stylesTreeView.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
+    const handleKeys = (event) => {
+        if (isNested ||
+            !(tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) || // implements roving tab-index to tree tables only
+            (tableRef && tableRef.current !== event.target.closest('.pf-c-table:not(.pf-m-nested)'))) {
+            return;
+        }
+        const activeElement = document.activeElement;
+        const key = event.key;
+        const rows = Array.from(tableRef.current.querySelectorAll('tbody tr')).filter(el => !el.classList.contains('pf-m-disabled') && !el.hidden);
+        if (key === 'Space' || key === 'Enter') {
+            activeElement.click();
+            event.preventDefault();
+        }
+        const getFocusableElement = (element) => element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
+        handleArrows(event, rows, (element) => element === activeElement.closest('tr'), getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
+    };
+    const registerSelectableRow = () => {
+        !hasSelectableRows && setHasSelectableRows(true);
+    };
+    return (React.createElement(TableComposableContext.Provider, { value: { registerSelectableRow } },
+        React.createElement("table", Object.assign({ "aria-label": ariaLabel, role: role, className: css(className, styles$1.table, isTreeTable ? treeGrid : grid, styles$1.modifiers[variant], !borders && styles$1.modifiers.noBorderRows, isStickyHeader && styles$1.modifiers.stickyHeader, isTreeTable && stylesTreeView.modifiers.treeView, isStriped && styles$1.modifiers.striped, isExpandable && styles$1.modifiers.expandable, isNested && 'pf-m-nested'), ref: tableRef }, (isTreeTable && { role: 'treegrid' }), ouiaProps, props),
+            hasSelectableRowCaption && hasSelectableRows && tableCaption,
+            children)));
+};
+const TableComposable = React.forwardRef((props, ref) => (React.createElement(TableComposableBase, Object.assign({}, props, { innerRef: ref }))));
+TableComposable.displayName = 'TableComposable';
+
+const TheadBase = (_a) => {
+    var { children, className, noWrap = false, innerRef, hasNestedHeader } = _a, props = __rest(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
+    return (React.createElement("thead", Object.assign({ className: css(className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader), ref: innerRef }, props), children));
+};
+const Thead = React.forwardRef((props, ref) => (React.createElement(TheadBase, Object.assign({}, props, { innerRef: ref }))));
+Thead.displayName = 'Thead';
+
+const TbodyBase = (_a) => {
+    var { children, className, isExpanded, innerRef, isEvenStriped = false, isOddStriped = false } = _a, props = __rest(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
+    return (React.createElement("tbody", Object.assign({ role: "rowgroup", className: css(className, isExpanded && styles$1.modifiers.expanded, isOddStriped && styles$1.modifiers.striped, isEvenStriped && styles$1.modifiers.stripedEven), ref: innerRef }, props), children));
+};
+const Tbody = React.forwardRef((props, ref) => (React.createElement(TbodyBase, Object.assign({}, props, { innerRef: ref }))));
+Tbody.displayName = 'Tbody';
+
+const TrBase = (_a) => {
+    var { children, className, isExpanded, isEditable, isHidden = false, isHoverable = false, isRowSelected = false, isStriped = false, innerRef, ouiaId, ouiaSafe = true, resetOffset = false, onRowClick, isSelectable, 'aria-label': passedAriaLabel } = _a, props = __rest(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isHoverable", "isRowSelected", "isStriped", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick", "isSelectable", 'aria-label']);
+    const ouiaProps = useOUIAProps('TableRow', ouiaId, ouiaSafe);
+    const [computedAriaLabel, setComputedAriaLabel] = React.useState('');
+    let onKeyDown = null;
+    if (onRowClick) {
+        onKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                onRowClick(e);
+                e.preventDefault();
+            }
+        };
+    }
+    const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded);
+    const { registerSelectableRow } = React.useContext(TableComposableContext);
+    React.useEffect(() => {
+        if (isSelectable && !rowIsHidden) {
+            setComputedAriaLabel(`${isRowSelected ? 'Selected' : 'Unselected'}, selectable row.`);
+            registerSelectableRow();
+        }
+        else {
+            setComputedAriaLabel(undefined);
+        }
+    }, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]);
+    const ariaLabel = passedAriaLabel || computedAriaLabel;
+    return (React.createElement(React.Fragment, null,
+        isSelectable && React.createElement("output", { className: "pf-screen-reader" }, ariaLabel),
+        React.createElement("tr", Object.assign({ className: css(className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isHoverable && styles$1.modifiers.hoverable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, resetOffset && styles$1.modifiers.firstCellOffsetReset), hidden: rowIsHidden }, (isHoverable && { tabIndex: 0 }), { "aria-label": ariaLabel, ref: innerRef }, (onRowClick && { onClick: onRowClick, onKeyDown }), ouiaProps, props), children)));
+};
+const Tr = React.forwardRef((props, ref) => (React.createElement(TrBase, Object.assign({}, props, { innerRef: ref }))));
+Tr.displayName = 'Tr';
+
+import('./table-scrollable-01103545.js');
+var styles = {
+  "modifiers": {
+    "borderRight": "pf-m-border-right",
+    "borderLeft": "pf-m-border-left",
+    "stickyHeader": "pf-m-sticky-header"
+  },
+  "scrollInnerWrapper": "pf-c-scroll-inner-wrapper",
+  "scrollOuterWrapper": "pf-c-scroll-outer-wrapper",
+  "table": "pf-c-table",
+  "tableStickyColumn": "pf-c-table__sticky-column"
+};
+
+var IconSize;
+(function (IconSize) {
+    IconSize["sm"] = "sm";
+    IconSize["md"] = "md";
+    IconSize["lg"] = "lg";
+    IconSize["xl"] = "xl";
+})(IconSize || (IconSize = {}));
+const getSize = (size) => {
+    switch (size) {
+        case IconSize.sm:
+            return '1em';
+        case IconSize.md:
+            return '1.5em';
+        case IconSize.lg:
+            return '2em';
+        case IconSize.xl:
+            return '3em';
+        default:
+            return '1em';
+    }
+};
+let currentId = 0;
+/**
+ * Factory to create Icon class components for consumers
+ */
+function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
+    var _a;
+    return _a = class SVGIcon extends React.Component {
+            constructor() {
+                super(...arguments);
+                this.id = `icon-title-${currentId++}`;
+            }
+            render() {
+                const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
+                const hasTitle = Boolean(title);
+                const heightWidth = getSize(size);
+                const baseAlign = -0.125 * Number.parseFloat(heightWidth);
+                const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
+                const viewBox = [xOffset, yOffset, width, height].join(' ');
+                return (React.createElement("svg", Object.assign({ style: style, fill: color, height: heightWidth, width: heightWidth, viewBox: viewBox, "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
+                    hasTitle && React.createElement("title", { id: this.id }, title),
+                    React.createElement("path", { d: svgPath })));
+            }
+        },
+        _a.displayName = name,
+        _a.defaultProps = {
+            color: 'currentColor',
+            size: IconSize.sm,
+            noVerticalAlign: false
+        },
+        _a;
+}
+
+const HelpIconConfig = {
+  name: 'HelpIcon',
+  height: 1024,
+  width: 1024,
+  svgPath: 'M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const HelpIcon = createIcon(HelpIconConfig);
+
+var HelpIcon$1 = HelpIcon;
+
+var TableTextVariant;
+(function (TableTextVariant) {
+    TableTextVariant["div"] = "div";
+    TableTextVariant["nav"] = "nav";
+})(TableTextVariant || (TableTextVariant = {}));
+var WrapModifier;
+(function (WrapModifier) {
+    WrapModifier["wrap"] = "wrap";
+    WrapModifier["nowrap"] = "nowrap";
+    WrapModifier["truncate"] = "truncate";
+    WrapModifier["breakWord"] = "breakWord";
+    WrapModifier["fitContent"] = "fitContent";
+})(WrapModifier || (WrapModifier = {}));
+const TableText = (_a) => {
+    var { children = null, className = '', variant = 'span', wrapModifier = null, tooltip: tooltipProp = '', tooltipProps = {}, onMouseEnter: onMouseEnterProp = () => { } } = _a, props = __rest(_a, ["children", "className", "variant", "wrapModifier", "tooltip", "tooltipProps", "onMouseEnter"]);
+    const Component = variant;
+    const [tooltip, setTooltip] = React.useState('');
+    const onMouseEnter = (event) => {
+        if (event.target.offsetWidth < event.target.scrollWidth) {
+            setTooltip(tooltipProp || event.target.innerText);
+        }
+        else {
+            setTooltip('');
+        }
+        onMouseEnterProp(event);
+    };
+    const text = (React.createElement(Component, Object.assign({ onMouseEnter: onMouseEnter, className: css(className, wrapModifier && styles$1.modifiers[wrapModifier], styles$1.tableText) }, props), children));
+    return tooltip !== '' ? (React.createElement(Tooltip, Object.assign({ content: tooltip, isVisible: true }, tooltipProps), text)) : (text);
+};
+TableText.displayName = 'TableText';
+
+const HeaderCellInfoWrapper = ({ children, info, className, variant = 'tooltip', popoverProps, tooltipProps, ariaLabel }) => (React.createElement("div", { className: css(styles$1.tableColumnHelp, className) },
+    typeof children === 'string' ? React.createElement(TableText, null, children) : children,
+    React.createElement("span", { className: css(styles$1.tableColumnHelpAction) }, variant === 'tooltip' ? (React.createElement(Tooltip$1, Object.assign({ content: info }, tooltipProps),
+        React.createElement(Button, { variant: "plain", "aria-label": ariaLabel || (typeof info === 'string' && info) || 'More info' },
+            React.createElement(HelpIcon$1, { noVerticalAlign: true })))) : (React.createElement(Popover, Object.assign({ bodyContent: info }, popoverProps),
+        React.createElement(Button, { variant: "plain", "aria-label": ariaLabel || (typeof info === 'string' && info) || 'More info' },
+            React.createElement(HelpIcon$1, { noVerticalAlign: true })))))));
+HeaderCellInfoWrapper.displayName = 'HeaderCellInfoWrapper';
+
+const info = ({ tooltip, tooltipProps, popover, popoverProps, className, ariaLabel }) => {
+    const infoObj = (value) => ({
+        className: styles$1.modifiers.help,
+        children: tooltip ? (React.createElement(HeaderCellInfoWrapper, { variant: "tooltip", info: tooltip, tooltipProps: tooltipProps, ariaLabel: ariaLabel, className: className }, value)) : (React.createElement(HeaderCellInfoWrapper, { variant: "popover", info: popover, popoverProps: popoverProps, ariaLabel: ariaLabel, className: className }, value))
+    });
+    return infoObj;
+};
+
+const LongArrowAltUpIconConfig = {
+  name: 'LongArrowAltUpIcon',
+  height: 512,
+  width: 256,
+  svgPath: 'M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const LongArrowAltUpIcon = createIcon(LongArrowAltUpIconConfig);
+
+var LongArrowAltUpIcon$1 = LongArrowAltUpIcon;
+
+const LongArrowAltDownIconConfig = {
+  name: 'LongArrowAltDownIcon',
+  height: 512,
+  width: 256,
+  svgPath: 'M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const LongArrowAltDownIcon = createIcon(LongArrowAltDownIconConfig);
+
+var LongArrowAltDownIcon$1 = LongArrowAltDownIcon;
+
+const ArrowsAltVIconConfig = {
+  name: 'ArrowsAltVIcon',
+  height: 512,
+  width: 256,
+  svgPath: 'M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const ArrowsAltVIcon = createIcon(ArrowsAltVIconConfig);
+
+var ArrowsAltVIcon$1 = ArrowsAltVIcon;
+
+var SortByDirection;
+(function (SortByDirection) {
+    SortByDirection["asc"] = "asc";
+    SortByDirection["desc"] = "desc";
+})(SortByDirection || (SortByDirection = {}));
+const SortColumn = (_a) => {
+    var { children = null, className = '', isSortedBy = false, onSort = null, sortDirection = '', type = 'button' } = _a, props = __rest(_a, ["children", "className", "isSortedBy", "onSort", "sortDirection", "type"]);
+    let SortedByIcon;
+    if (isSortedBy) {
+        SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon$1 : LongArrowAltDownIcon$1;
+    }
+    else {
+        SortedByIcon = ArrowsAltVIcon$1;
+    }
+    return (React.createElement("button", Object.assign({}, props, { type: type, className: css(className, styles$1.tableButton), onClick: event => onSort && onSort(event) }),
+        React.createElement("div", { className: css(className, styles$1.tableButtonContent) },
+            React.createElement(TableText, null, children),
+            React.createElement("span", { className: css(styles$1.tableSortIndicator) },
+                React.createElement(SortedByIcon, null)))));
+};
+SortColumn.displayName = 'SortColumn';
+
+const StarIconConfig = {
+  name: 'StarIcon',
+  height: 512,
+  width: 576,
+  svgPath: 'M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const StarIcon = createIcon(StarIconConfig);
+
+var StarIcon$1 = StarIcon;
+
+const sortableFavorites = (sort) => () => sortable(React.createElement(StarIcon$1, { "aria-hidden": true }), {
+    columnIndex: sort.columnIndex,
+    className: styles$1.modifiers.favorite,
+    ariaLabel: 'Sort favorites',
+    column: {
+        extraParams: {
+            sortBy: sort.sortBy,
+            onSort: sort === null || sort === void 0 ? void 0 : sort.onSort
+        }
+    }
+});
+const sortable = (label, { columnIndex, column, property, className, ariaLabel }) => {
+    const { extraParams: { sortBy, onSort } } = column;
+    const extraData = {
+        columnIndex,
+        column,
+        property
+    };
+    const isSortedBy = sortBy && columnIndex === sortBy.index;
+    /**
+     * @param {React.MouseEvent} event - React mouse event
+     */
+    function sortClicked(event) {
+        let reversedDirection;
+        if (!isSortedBy) {
+            reversedDirection = sortBy.defaultDirection ? sortBy.defaultDirection : SortByDirection.asc;
+        }
+        else {
+            reversedDirection = sortBy.direction === SortByDirection.asc ? SortByDirection.desc : SortByDirection.asc;
+        }
+        // tslint:disable-next-line:no-unused-expression
+        onSort && onSort(event, columnIndex, reversedDirection, extraData);
+    }
+    return {
+        className: css(styles$1.tableSort, isSortedBy && styles$1.modifiers.selected, className),
+        'aria-sort': isSortedBy ? `${sortBy.direction}ending` : 'none',
+        children: (React.createElement(SortColumn, { isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortBy.direction : '', onSort: sortClicked, "aria-label": ariaLabel }, label))
+    };
+};
+
+var RowSelectVariant;
+(function (RowSelectVariant) {
+    RowSelectVariant["radio"] = "radio";
+    RowSelectVariant["checkbox"] = "checkbox";
+})(RowSelectVariant || (RowSelectVariant = {}));
+const SelectColumn = (_a) => {
+    var { children = null, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    className, onSelect = null, selectVariant } = _a, props = __rest(_a, ["children", "className", "onSelect", "selectVariant"]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("label", null,
+            React.createElement("input", Object.assign({}, props, { type: selectVariant, onChange: onSelect }))),
+        children));
+};
+SelectColumn.displayName = 'SelectColumn';
+
+import('./check-317f30b2.js');
+var checkStyles = {
+  "check": "pf-c-check",
+  "checkBody": "pf-c-check__body",
+  "checkDescription": "pf-c-check__description",
+  "checkInput": "pf-c-check__input",
+  "checkLabel": "pf-c-check__label",
+  "modifiers": {
+    "standalone": "pf-m-standalone",
+    "disabled": "pf-m-disabled"
+  }
+};
+
+const selectable = (label, { rowIndex, columnIndex, rowData, column, property }) => {
+    const { extraParams: { onSelect, selectVariant, allRowsSelected, isHeaderSelectDisabled } } = column;
+    const extraData = {
+        rowIndex,
+        columnIndex,
+        column,
+        property
+    };
+    if (rowData && rowData.hasOwnProperty('parent') && !rowData.showSelect && !rowData.fullWidth) {
+        return {
+            component: 'td',
+            isVisible: true
+        };
+    }
+    const rowId = rowIndex !== undefined ? rowIndex : -1;
+    /**
+     * @param {React.FormEvent} event - React form event
+     */
+    function selectClick(event) {
+        const selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected;
+        // tslint:disable-next-line:no-unused-expression
+        onSelect && onSelect(event, selected, rowId, rowData, extraData);
+    }
+    const customProps = Object.assign(Object.assign(Object.assign({}, (rowId !== -1
+        ? {
+            checked: rowData && !!rowData.selected,
+            'aria-label': `Select row ${rowIndex}`
+        }
+        : {
+            checked: allRowsSelected,
+            'aria-label': 'Select all rows'
+        })), (rowData &&
+        (rowData.disableCheckbox || rowData.disableSelection) && {
+        disabled: true,
+        className: checkStyles.checkInput
+    })), (!rowData && isHeaderSelectDisabled && { disabled: true }));
+    let selectName = 'check-all';
+    if (rowId !== -1 && selectVariant === RowSelectVariant.checkbox) {
+        selectName = `checkrow${rowIndex}`;
+    }
+    else if (rowId !== -1) {
+        selectName = 'radioGroup';
+    }
+    return {
+        className: css(styles$1.tableCheck),
+        component: 'td',
+        isVisible: !rowData || !rowData.fullWidth,
+        children: (React.createElement(SelectColumn, Object.assign({}, customProps, { selectVariant: selectVariant, onSelect: selectClick, name: selectName }), label))
+    };
+};
+
+const AngleDownIconConfig = {
+  name: 'AngleDownIcon',
+  height: 512,
+  width: 320,
+  svgPath: 'M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const AngleDownIcon = createIcon(AngleDownIconConfig);
+
+var AngleDownIcon$1 = AngleDownIcon;
+
+const CollapseColumn = (_a) => {
+    var { className = '', children = null, isOpen, onToggle } = _a, props = __rest(_a, ["className", "children", "isOpen", "onToggle"]);
+    return (React.createElement(React.Fragment, null,
+        isOpen !== undefined && (React.createElement(Button$1, Object.assign({ className: css(className, isOpen && styles$1.modifiers.expanded) }, props, { variant: "plain", "aria-label": props['aria-label'] || 'Details', onClick: onToggle, "aria-expanded": isOpen }),
+            React.createElement("div", { className: css(styles$1.tableToggleIcon) },
+                React.createElement(AngleDownIcon$1, null)))),
+        children));
+};
+CollapseColumn.displayName = 'CollapseColumn';
+
+const collapsible = (value, { rowIndex, columnIndex, rowData, column, property }) => {
+    const { extraParams: { onCollapse, rowLabeledBy = 'simple-node', expandId = 'expand-toggle', allRowsExpanded, collapseAllAriaLabel } } = column;
+    const extraData = {
+        rowIndex,
+        columnIndex,
+        column,
+        property
+    };
+    const rowId = rowIndex !== undefined ? rowIndex : -1;
+    const customProps = Object.assign({}, (rowId !== -1
+        ? {
+            isOpen: rowData === null || rowData === void 0 ? void 0 : rowData.isOpen,
+            'aria-labelledby': `${rowLabeledBy}${rowId} ${expandId}${rowId}`
+        }
+        : {
+            isOpen: allRowsExpanded,
+            'aria-label': collapseAllAriaLabel || 'Expand all rows'
+        }));
+    /**
+     * @param {React.MouseEvent} event - Mouse event
+     */
+    function onToggle(event) {
+        const open = rowData ? !rowData.isOpen : !allRowsExpanded;
+        // tslint:disable-next-line:no-unused-expression
+        onCollapse && onCollapse(event, rowIndex, open, rowData, extraData);
+    }
+    return {
+        className: ((rowData === null || rowData === void 0 ? void 0 : rowData.isOpen) !== undefined || rowId === -1) && css(styles$1.tableToggle),
+        isVisible: !(rowData === null || rowData === void 0 ? void 0 : rowData.fullWidth),
+        children: (React.createElement(CollapseColumn, Object.assign({ "aria-labelledby": `${rowLabeledBy}${rowId} ${expandId}${rowId}`, onToggle: onToggle, id: expandId + rowId }, customProps), value))
+    };
+};
+
+const cellWidth = (width) => () => ({
+    className: css(styles$1.modifiers[typeof width === 'number' ? `width_${width}` : `width${capitalize(width)}`])
+});
+
+const visibilityModifiers = [
+    'hidden',
+    'hiddenOnSm',
+    'hiddenOnMd',
+    'hiddenOnLg',
+    'hiddenOnXl',
+    'hiddenOn_2xl',
+    'visibleOnSm',
+    'visibleOnMd',
+    'visibleOnLg',
+    'visibleOnXl',
+    'visibleOn_2xl'
+];
+const Visibility = visibilityModifiers
+    .filter(key => styles$1.modifiers[key])
+    .reduce((acc, curr) => {
+    const key2 = curr.replace('_2xl', '2Xl');
+    acc[key2] = styles$1.modifiers[curr];
+    return acc;
+}, {});
+const classNames = (...classes) => () => ({
+    className: css(...classes)
+});
+
+/**
+ * merge-props.js
+ *
+ * Forked from reactabular-table version 8.14.0
+ * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src
+ */
+/**
+ * @param {any} props - Props
+ */
+function mergeProps(...props) {
+    const firstProps = props[0];
+    const restProps = props.slice(1);
+    if (!restProps.length) {
+        return mergeWith({}, firstProps);
+    }
+    // Avoid mutating the first prop collection
+    return mergeWith(mergeWith({}, firstProps), ...restProps, (a, b, key) => {
+        if (key === 'children') {
+            if (a && b) {
+                // compose the two
+                return React.cloneElement(a, {
+                    children: b
+                });
+            }
+            // Children have to be merged in reverse order for Reactabular
+            // logic to work.
+            return Object.assign(Object.assign({}, b), a);
+        }
+        if (key === 'className') {
+            // Process class names through classNames to merge properly
+            // as a string.
+            return css(a, b);
+        }
+        return undefined;
+    });
+}
+
+const ThBase = (_a) => {
+    var { children, className, component = 'th', dataLabel, scope = 'col', textCenter = false, sort = null, modifier, select = null, expand: collapse = null, tooltip = '', onMouseEnter: onMouseEnterProp = () => { }, width, visibility, innerRef, info: infoProps, isStickyColumn = false, hasRightBorder = false, stickyMinWidth = '120px', stickyLeftOffset, isSubheader = false } = _a, props = __rest(_a, ["children", "className", "component", "dataLabel", "scope", "textCenter", "sort", "modifier", "select", "expand", "tooltip", "onMouseEnter", "width", "visibility", "innerRef", "info", "isStickyColumn", "hasRightBorder", "stickyMinWidth", "stickyLeftOffset", "isSubheader"]);
+    const [showTooltip, setShowTooltip] = React.useState(false);
+    const onMouseEnter = (event) => {
+        if (event.target.offsetWidth < event.target.scrollWidth) {
+            !showTooltip && setShowTooltip(true);
+        }
+        else {
+            showTooltip && setShowTooltip(false);
+        }
+        onMouseEnterProp(event);
+    };
+    let sortParams = null;
+    if (sort) {
+        if (sort.isFavorites) {
+            sortParams = sortableFavorites({
+                onSort: sort === null || sort === void 0 ? void 0 : sort.onSort,
+                columnIndex: sort.columnIndex,
+                sortBy: sort.sortBy
+            })();
+        }
+        else {
+            sortParams = sortable(children, {
+                columnIndex: sort.columnIndex,
+                column: {
+                    extraParams: {
+                        sortBy: sort.sortBy,
+                        onSort: sort === null || sort === void 0 ? void 0 : sort.onSort
+                    }
+                }
+            });
+        }
+    }
+    const selectParams = select
+        ? selectable(children, {
+            column: {
+                extraParams: {
+                    onSelect: select === null || select === void 0 ? void 0 : select.onSelect,
+                    selectVariant: 'checkbox',
+                    allRowsSelected: select.isSelected,
+                    isHeaderSelectDisabled: !!select.isHeaderSelectDisabled
+                }
+            }
+        })
+        : null;
+    const collapseParams = collapse
+        ? collapsible(children, {
+            column: {
+                extraParams: {
+                    onCollapse: collapse === null || collapse === void 0 ? void 0 : collapse.onToggle,
+                    allRowsExpanded: !collapse.areAllExpanded,
+                    collapseAllAriaLabel: ''
+                }
+            }
+        })
+        : null;
+    const widthParams = width ? cellWidth(width)() : null;
+    const visibilityParams = visibility
+        ? classNames(...visibility.map((vis) => Visibility[vis]))()
+        : null;
+    let transformedChildren = (sortParams === null || sortParams === void 0 ? void 0 : sortParams.children) || (selectParams === null || selectParams === void 0 ? void 0 : selectParams.children) || (collapseParams === null || collapseParams === void 0 ? void 0 : collapseParams.children) || children;
+    // info can wrap other transformedChildren
+    let infoParams = null;
+    if (infoProps) {
+        infoParams = info(infoProps)(transformedChildren);
+        transformedChildren = infoParams.children;
+    }
+    const merged = mergeProps(sortParams, selectParams, collapseParams, widthParams, visibilityParams, infoParams);
+    const { 
+    // ignore the merged children since we transform them ourselves so we can wrap it with info
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    children: mergedChildren = null, 
+    // selectable adds this but we don't want it
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    isVisible = null, className: mergedClassName = '', component: MergedComponent = component } = merged, mergedProps = __rest(merged, ["children", "isVisible", "className", "component"]);
+    const cell = (React.createElement(MergedComponent, Object.assign({ "data-label": dataLabel, onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp, scope: component === 'th' && children ? scope : null, ref: innerRef, className: css(className, textCenter && styles$1.modifiers.center, isSubheader && styles$1.tableSubhead, isStickyColumn && styles.tableStickyColumn, hasRightBorder && styles.modifiers.borderRight, modifier && styles$1.modifiers[modifier], mergedClassName) }, mergedProps, props, (isStickyColumn && {
+        style: Object.assign({ '--pf-c-table__sticky-column--MinWidth': stickyMinWidth ? stickyMinWidth : undefined, '--pf-c-table__sticky-column--Left': stickyLeftOffset ? stickyLeftOffset : undefined }, props.style)
+    })), transformedChildren));
+    const canDefault = tooltip === '' ? typeof children === 'string' : true;
+    return tooltip !== null && canDefault && showTooltip ? (React.createElement(Tooltip, { content: tooltip || (tooltip === '' && children), isVisible: true }, cell)) : (cell);
+};
+const Th = React.forwardRef((props, ref) => (React.createElement(ThBase, Object.assign({}, props, { innerRef: ref }))));
+Th.displayName = 'Th';
+
+class ActionsColumn extends React.Component {
+    constructor(props) {
+        super(props);
+        this.toggleRef = React.createRef();
+        this.onToggle = (isOpen) => {
+            this.setState({
+                isOpen
+            });
+        };
+        this.onClick = (event, onClick) => {
+            const { rowData, extraData } = this.props;
+            // Only prevent default if onClick is provided.  This allows href support.
+            if (onClick) {
+                event.preventDefault();
+                // tslint:disable-next-line:no-unused-expression
+                onClick(event, extraData && extraData.rowIndex, rowData, extraData);
+            }
+        };
+        this.state = {
+            isOpen: false
+        };
+    }
+    render() {
+        const { isOpen } = this.state;
+        const { items, children, dropdownPosition, dropdownDirection, isDisabled, rowData, actionsToggle } = this.props;
+        const actionsToggleClone = actionsToggle ? (actionsToggle({ onToggle: this.onToggle, isOpen, isDisabled })) : (React.createElement(KebabToggle, { isDisabled: isDisabled, onToggle: this.onToggle }));
+        return (React.createElement(React.Fragment, null,
+            items
+                .filter(item => item.isOutsideDropdown)
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                .map((_a, key) => {
+                var { title, itemKey, onClick, isOutsideDropdown } = _a, props = __rest(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
+                return typeof title === 'string' ? (React.createElement(Button$1, Object.assign({ onClick: event => this.onClick(event, onClick) }, props, { isDisabled: isDisabled, key: itemKey || `outside_dropdown_${key}`, "data-key": itemKey || `outside_dropdown_${key}` }), title)) : (React.cloneElement(title, Object.assign({ onClick, isDisabled }, props)));
+            }),
+            React.createElement(Dropdown, Object.assign({ toggle: actionsToggleClone, position: dropdownPosition, direction: dropdownDirection, isOpen: isOpen, dropdownItems: items
+                    .filter(item => !item.isOutsideDropdown)
+                    .map((_a, key) => {
+                    var { title, itemKey, onClick, isSeparator } = _a, props = __rest(_a, ["title", "itemKey", "onClick", "isSeparator"]);
+                    return isSeparator ? (React.createElement(DropdownSeparator, Object.assign({}, props, { key: itemKey || key, "data-key": itemKey || key }))) : (React.createElement(DropdownItem, Object.assign({ component: "button", onClick: event => {
+                            this.onClick(event, onClick);
+                            this.onToggle(!isOpen);
+                        } }, props, { key: itemKey || key, "data-key": itemKey || key }), title));
+                }), isPlain: true }, (rowData && rowData.actionProps))),
+            children));
+    }
+}
+ActionsColumn.displayName = 'ActionsColumn';
+ActionsColumn.defaultProps = {
+    children: null,
+    items: [],
+    dropdownPosition: DropdownPosition.right,
+    dropdownDirection: DropdownDirection.down,
+    rowData: {},
+    extraData: {}
+};
+
+const resolveOrDefault = (resolver, defaultValue, rowData, extraData) => (typeof resolver === 'function' ? resolver(rowData, extraData) : defaultValue);
+const cellActions = (actions, actionResolver, areActionsDisabled) => (label, { rowData, column, rowIndex, columnIndex, column: { extraParams: { dropdownPosition, dropdownDirection, actionsToggle } }, property }) => {
+    const extraData = {
+        rowIndex,
+        columnIndex,
+        column,
+        property
+    };
+    const resolvedActions = resolveOrDefault(actionResolver, actions, rowData, extraData);
+    const resolvedIsDisabled = resolveOrDefault(areActionsDisabled, rowData && rowData.disableActions, rowData, extraData);
+    const renderProps = resolvedActions && resolvedActions.length > 0
+        ? {
+            children: (React.createElement(ActionsColumn, { items: resolvedActions, dropdownPosition: dropdownPosition, dropdownDirection: dropdownDirection, isDisabled: resolvedIsDisabled, rowData: rowData, extraData: extraData, actionsToggle: actionsToggle }, label))
+        }
+        : {};
+    return Object.assign({ className: css(styles$1.tableAction), style: { paddingRight: 0 }, isVisible: true }, renderProps);
+};
+
+const compoundExpand = (value, { rowIndex, columnIndex, rowData, column, property }) => {
+    if (!value) {
+        return null;
+    }
+    const { title, props } = value;
+    const { extraParams: { onExpand } } = column;
+    const extraData = {
+        rowIndex,
+        columnIndex,
+        column,
+        property
+    };
+    /**
+     * @param {React.MouseEvent} event - Mouse event
+     */
+    function onToggle(event) {
+        // tslint:disable-next-line:no-unused-expression
+        onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
+    }
+    return {
+        className: css(styles$1.tableCompoundExpansionToggle, props.isOpen && styles$1.modifiers.expanded),
+        children: props.isOpen !== undefined && (React.createElement("button", { type: "button", className: css(styles$1.tableButton), onClick: onToggle, "aria-expanded": props.isOpen, "aria-controls": props.ariaControls },
+            React.createElement(TableText, null, title)))
+    };
+};
+
+const FavoritesCell = (_a) => {
+    var { className = '', onFavorite, isFavorited, rowIndex } = _a, props = __rest(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
+    const ariaProps = rowIndex === undefined
+        ? {}
+        : {
+            id: `favorites-button-${rowIndex}`,
+            'aria-labelledby': `favorites-button-${rowIndex}`
+        };
+    return (React.createElement(Button$1, Object.assign({ variant: "plain", className: className, type: "button", "aria-label": isFavorited ? 'Starred' : 'Not starred', onClick: onFavorite }, ariaProps, props),
+        React.createElement(StarIcon$1, { "aria-hidden": true })));
+};
+FavoritesCell.displayName = 'FavoritesCell';
+
+const favoritable = (value, { rowIndex, columnIndex, rowData, column, property }) => {
+    const { extraParams: { onFavorite } } = column;
+    const extraData = {
+        rowIndex,
+        columnIndex,
+        column,
+        property
+    };
+    // this is a child row which should not display the favorites icon
+    if (rowData && rowData.hasOwnProperty('parent') && !rowData.fullWidth) {
+        return {
+            component: 'td',
+            isVisible: true
+        };
+    }
+    /**
+     * @param {React.MouseEvent} event - Mouse event
+     */
+    function favoritesClick(event) {
+        // tslint:disable-next-line:no-unused-expression
+        onFavorite && onFavorite(event, rowData && !rowData.favorited, rowIndex, rowData, extraData);
+    }
+    const additionalProps = rowData.favoritesProps || {};
+    return {
+        className: css(styles$1.tableFavorite, rowData && rowData.favorited && styles$1.modifiers.favorited),
+        isVisible: !rowData || !rowData.fullWidth,
+        children: (React.createElement(FavoritesCell, Object.assign({ rowIndex: rowIndex, onFavorite: favoritesClick, isFavorited: rowData && rowData.favorited }, additionalProps)))
+    };
+};
+
+const GripVerticalIconConfig = {
+  name: 'GripVerticalIcon',
+  height: 512,
+  width: 320,
+  svgPath: 'M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const GripVerticalIcon = createIcon(GripVerticalIconConfig);
+
+var GripVerticalIcon$1 = GripVerticalIcon;
+
+const DraggableCell = (_a) => {
+    var { className, onClick, 'aria-label': ariaLabel, id } = _a, props = __rest(_a, ["className", "onClick", 'aria-label', "id"]);
+    return (React.createElement(Button$1, Object.assign({ id: id, variant: "plain", className: className, type: "button", "aria-label": ariaLabel || `Draggable row draggable button`, onClick: onClick }, props),
+        React.createElement(GripVerticalIcon$1, { "aria-hidden": true })));
+};
+DraggableCell.displayName = 'DraggableCell';
+
+const draggable = (value, { rowData }) => {
+    const { id } = rowData;
+    return {
+        className: '',
+        children: React.createElement(DraggableCell, { id: id })
+    };
+};
+
+const EllipsisHIconConfig = {
+  name: 'EllipsisHIcon',
+  height: 512,
+  width: 512,
+  svgPath: 'M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const EllipsisHIcon = createIcon(EllipsisHIconConfig);
+
+var EllipsisHIcon$1 = EllipsisHIcon;
+
+const treeRow = (onCollapse, onCheckChange, onToggleRowDetails) => (value, { rowIndex, rowData }) => {
+    const { isExpanded, isDetailsExpanded, 'aria-level': level, 'aria-setsize': setsize, toggleAriaLabel, checkAriaLabel, showDetailsAriaLabel, isChecked, checkboxId, icon } = rowData.props;
+    const content = value.title || value;
+    const text = (React.createElement("div", { className: css(stylesTreeView.tableTreeViewText), key: "tree-view-text" },
+        icon && (React.createElement("span", { className: css(stylesTreeView.tableTreeViewIcon), key: "tree-view-text-icon" }, icon)),
+        React.createElement("span", { className: "pf-c-table__text", key: "table-text" }, content)));
+    const onChange = (isChecked, event) => {
+        onCheckChange(event, isChecked, rowIndex, content, rowData);
+    };
+    return {
+        component: 'th',
+        className: 'pf-c-table__tree-view-title-cell',
+        children: level !== undefined ? (React.createElement("div", { className: css(stylesTreeView.tableTreeViewMain) },
+            setsize > 0 && (React.createElement("span", { className: css(stylesTreeView.tableToggle), key: "table-toggle" },
+                React.createElement(Button, { variant: "plain", onClick: event => onCollapse && onCollapse(event, rowIndex, content, rowData), className: css(isExpanded && styles$1.modifiers.expanded), "aria-expanded": isExpanded, "aria-label": toggleAriaLabel || `${isExpanded ? 'Collapse' : 'Expand'} row ${rowIndex}` },
+                    React.createElement("div", { className: css(stylesTreeView.tableToggleIcon) },
+                        React.createElement(AngleDownIcon$1, { "aria-hidden": "true" }))))),
+            !!onCheckChange && (React.createElement("span", { className: css(stylesTreeView.tableCheck), key: "table-check" },
+                React.createElement("label", { htmlFor: checkboxId || `checkbox_${rowIndex}` },
+                    React.createElement(Checkbox, { id: checkboxId || `checkbox_${rowIndex}`, "aria-label": checkAriaLabel || `Row ${rowIndex} checkbox`, isChecked: isChecked, onChange: onChange })))),
+            text,
+            !!onToggleRowDetails && (React.createElement("span", { className: css(stylesTreeView.tableTreeViewDetailsToggle), key: "view-details-toggle" },
+                React.createElement(Button, { variant: "plain", "aria-expanded": isDetailsExpanded, "aria-label": showDetailsAriaLabel || 'Show row details', onClick: event => onToggleRowDetails && onToggleRowDetails(event, rowIndex, content, rowData) },
+                    React.createElement("span", { className: "pf-c-table__details-toggle-icon" },
+                        React.createElement(EllipsisHIcon$1, { "aria-hidden": true }))))))) : (text)
+    };
+};
+
+const TdBase = (_a) => {
+    var { children, className, isActionCell = false, component = 'td', dataLabel, textCenter = false, modifier, select = null, actions = null, expand = null, treeRow: treeRowProp = null, compoundExpand: compoundExpandProp = null, noPadding, width, visibility, innerRef, favorites = null, draggableRow: draggableRowProp = null } = _a, props = __rest(_a, ["children", "className", "isActionCell", "component", "dataLabel", "textCenter", "modifier", "select", "actions", "expand", "treeRow", "compoundExpand", "noPadding", "width", "visibility", "innerRef", "favorites", "draggableRow"]);
+    const selectParams = select
+        ? selectable(children, {
+            rowIndex: select.rowIndex,
+            rowData: {
+                selected: select.isSelected,
+                disableSelection: select === null || select === void 0 ? void 0 : select.disable,
+                props: select === null || select === void 0 ? void 0 : select.props
+            },
+            column: {
+                extraParams: {
+                    onSelect: select === null || select === void 0 ? void 0 : select.onSelect,
+                    selectVariant: select.variant || 'checkbox'
+                }
+            }
+        })
+        : null;
+    const favoriteParams = favorites
+        ? favoritable(null, {
+            rowIndex: favorites === null || favorites === void 0 ? void 0 : favorites.rowIndex,
+            rowData: {
+                favorited: favorites.isFavorited,
+                favoritesProps: favorites === null || favorites === void 0 ? void 0 : favorites.props
+            },
+            column: {
+                extraParams: {
+                    onFavorite: favorites === null || favorites === void 0 ? void 0 : favorites.onFavorite
+                }
+            }
+        })
+        : null;
+    const draggableParams = draggableRowProp !== null
+        ? draggable(null, {
+            rowData: {
+                id: draggableRowProp.id
+            }
+        })
+        : null;
+    const actionParamsFunc = actions ? cellActions(actions.items, null, null) : null;
+    const actionParams = actionParamsFunc
+        ? actionParamsFunc(null, {
+            rowIndex: actions === null || actions === void 0 ? void 0 : actions.rowIndex,
+            rowData: {
+                disableActions: actions === null || actions === void 0 ? void 0 : actions.disable
+            },
+            column: {
+                extraParams: {
+                    dropdownPosition: actions === null || actions === void 0 ? void 0 : actions.dropdownPosition,
+                    dropdownDirection: actions === null || actions === void 0 ? void 0 : actions.dropdownDirection,
+                    actionsToggle: actions === null || actions === void 0 ? void 0 : actions.actionsToggle
+                }
+            }
+        })
+        : null;
+    const expandableParams = expand !== null
+        ? collapsible(null, {
+            rowIndex: expand.rowIndex,
+            columnIndex: expand === null || expand === void 0 ? void 0 : expand.columnIndex,
+            rowData: {
+                isOpen: expand.isExpanded
+            },
+            column: {
+                extraParams: {
+                    onCollapse: expand === null || expand === void 0 ? void 0 : expand.onToggle
+                }
+            }
+        })
+        : null;
+    const compoundParams = compoundExpandProp !== null
+        ? compoundExpand({
+            title: children,
+            props: {
+                isOpen: compoundExpandProp.isExpanded
+            }
+        }, {
+            column: {
+                extraParams: {
+                    onExpand: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.onToggle
+                }
+            }
+        })
+        : null;
+    const widthParams = width ? cellWidth(width)() : null;
+    const visibilityParams = visibility
+        ? classNames(...visibility.map((vis) => Visibility[vis]))()
+        : null;
+    const treeRowParams = treeRowProp !== null
+        ? treeRow(treeRowProp.onCollapse, treeRowProp.onCheckChange, treeRowProp.onToggleRowDetails)({
+            title: children
+        }, {
+            rowIndex: treeRowProp.rowIndex,
+            rowData: {
+                props: treeRowProp.props
+            }
+        })
+        : null;
+    const merged = mergeProps(selectParams, actionParams, expandableParams, compoundParams, widthParams, visibilityParams, favoriteParams, treeRowParams, draggableParams);
+    const { 
+    // selectable adds this but we don't want it
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    isVisible = null, children: mergedChildren = null, className: mergedClassName = '', component: MergedComponent = component } = merged, mergedProps = __rest(merged, ["isVisible", "children", "className", "component"]);
+    const treeTableTitleCell = (className && className.includes('pf-c-table__tree-view-title-cell')) ||
+        (mergedClassName && mergedClassName.includes('pf-c-table__tree-view-title-cell'));
+    return (React.createElement(MergedComponent, Object.assign({}, (!treeTableTitleCell && { 'data-label': dataLabel }), { className: css(className, isActionCell && styles$1.tableAction, textCenter && styles$1.modifiers.center, noPadding && styles$1.modifiers.noPadding, styles$1.modifiers[modifier], draggableParams && styles$1.tableDraggable, mergedClassName), ref: innerRef }, mergedProps, props), mergedChildren || children));
+};
+const Td = React.forwardRef((props, ref) => (React.createElement(TdBase, Object.assign({}, props, { innerRef: ref }))));
+Td.displayName = 'Td';
+
+const SearchIconConfig = {
+  name: 'SearchIcon',
+  height: 512,
+  width: 512,
+  svgPath: 'M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const SearchIcon = createIcon(SearchIconConfig);
+
+/* eslint-disable no-unused-vars */
+const DEFAULT_PAGE = 1;
+const DEFAULT_PERPAGE = 10;
+function FilterableTable({
+  columns,
+  items,
+  isLoading,
+  renderRow,
+  filters,
+  actions,
+  perPageOptions
+}) {
+
+  const [page, setPage] = useState(DEFAULT_PAGE);
+  const [perPage, setPerPage] = useState(DEFAULT_PERPAGE );
+  const [sortTableBy, setSortTableBy] = useState({});
+  const [rows, setRows] = useState([]);
+  const [filteredItems, setFilteredItems] = useState(items);
+  const [tableFilters, setTableFilters] = useState([]);
+  /**
+   * Sorts table by the selected column in ascending or decending order
+   * @param _event click
+   * @param index column index
+   * @param direction asc || desc
+   */
+
+  const onSort = (_event, index, direction) => {
+    var _columns$index, _columns$index2;
+
+    const sortField = columns == null ? void 0 : (_columns$index = columns[index]) == null ? void 0 : _columns$index.sortField;
+    const sortFn = columns == null ? void 0 : (_columns$index2 = columns[index]) == null ? void 0 : _columns$index2.sortFn;
+    const sortedRows = sortFn ? sortBy(filteredItems, sortFn) : sortField ? sortBy(filteredItems, item => item[sortField]) : filteredItems;
+    setPage(1);
+    setSortTableBy({
+      index,
+      direction
+    });
+    setFilteredItems(direction === SortByDirection.asc ? [...sortedRows] : [...(sortedRows == null ? void 0 : sortedRows.reverse())]);
+  };
+  /**
+   * Set table rows to display based on current list of filtered items, page, and perPage settings
+   */
+
+
+  useEffect(() => {
+    const startIndex = (page - 1) * perPage;
+    const endIndex = startIndex + perPage;
+    const itemsInPage = filteredItems.slice(startIndex, endIndex);
+    setRows(itemsInPage);
+  }, [filteredItems, page, perPage]);
+  /**
+   * If the list of items change, reset to the first page
+   */
+
+  function handleItemsPropChange() {
+    setPage(1);
+  }
+
+  const handleItemsPropChangeCallback = useCallback(handleItemsPropChange, [setPage, items]);
+  useEffect(handleItemsPropChangeCallback, [handleItemsPropChangeCallback]);
+  /**
+   * Whenever a filter is selected or a user enter a search string, run each item through each filter condition
+   * and check it includes the search string. Only inlcude the item in the table if it passes all filter/search string
+   * conditions.
+   */
+
+  useEffect(() => setFilteredItems(items.filter(item => tableFilters.map((f, i) => {
+    var _filters$i, _filters$i$props;
+
+    return !f ? true : filters == null ? void 0 : (_filters$i = filters[i]) == null ? void 0 : (_filters$i$props = _filters$i.props) == null ? void 0 : _filters$i$props.onChange(f, item);
+  }).reduce((r, v) => r && v, true))), [filters, items, tableFilters]);
+  /**
+   * Whenever a new filter is selected by the user, update the state of selectedFilters
+   * @param selected filter selections
+   * @param index filter to update with new selections
+   */
+
+  const onFilterChange = (selected, index) => {
+    setTableFilters(prevState => {
+      prevState[index] = selected;
+      return [...prevState];
+    });
+  };
+  /**
+   * Pagination component
+   * @param variant top or bottom
+   * @returns Pagination component based on variant
+   */
+
+
+  const renderPagination = variant => {
+    return (filteredItems == null ? void 0 : filteredItems.length) > 0 && React__default.createElement(Pagination, {
+      itemCount: (filteredItems == null ? void 0 : filteredItems.length) || 0,
+      page: page,
+      perPage: perPage,
+      onSetPage: (_, page) => setPage(page),
+      onPerPageSelect: (_, perPage) => {
+        setPage(1);
+        setPerPage(perPage);
+      },
+      perPageOptions: perPageOptions,
+      isCompact: true,
+      variant: variant
+    });
+  };
+  /**
+   * Toolbar populated with provided filters
+   */
+
+
+  const header = React__default.createElement(Toolbar, null, React__default.createElement(ToolbarContent, null, filters == null ? void 0 : filters.map((el, i) => {
+    return React__default.createElement(ToolbarItem, {
+      key: i,
+      className: 'filterable-table__toolbar__item--filter'
+    }, cloneElement(el, {
+      onChange: selectedFilters => onFilterChange(selectedFilters, i)
+    }));
+  }), actions == null ? void 0 : actions.map((el, i) => {
+    return React__default.createElement(ToolbarItem, {
+      key: i,
+      className: 'filterable-table__toolbar__item--action'
+    }, el);
+  }), React__default.createElement(ToolbarItem, {
+    variant: 'pagination'
+  }, renderPagination('top'))));
+  return React__default.createElement("div", {
+    className: 'filterable-table'
+  }, isLoading ? React__default.createElement(Bullseye, null, React__default.createElement("div", null, React__default.createElement("pfe-progress-indicator", {
+    "pfe-indeterminate": true,
+    size: 'lg'
+  }))) : React__default.createElement(React__default.Fragment, null, header, React__default.createElement(TableComposable, {
+    "aria-label": 'Packages Table'
+  }, React__default.createElement(Thead, null, React__default.createElement(Tr, null, columns.map((col, colIdx) => React__default.createElement(Th, Object.assign({
+    key: `pkg-table-head-${colIdx}`
+  }, col.sortField ? {
+    sort: {
+      onSort: onSort,
+      sortBy: sortTableBy,
+      columnIndex: colIdx
+    }
+  } : {}), col.title)))), React__default.createElement(Tbody, null, rows.length > 0 ? rows.map((row, rowIdx) => React__default.createElement(Tr, {
+    key: `pkg-table-row-${rowIdx}`
+  }, columns.map((_col, colIdx) => {
+    var _renderRow;
+
+    return React__default.createElement(Td, {
+      key: `pkg-table-row-${rowIdx}-col-${colIdx}`
+    }, (_renderRow = renderRow(row)) == null ? void 0 : _renderRow[colIdx]);
+  }))) : React__default.createElement(Td, {
+    colSpan: columns.length
+  }, React__default.createElement(EmptyState, null, React__default.createElement(EmptyStateIcon, {
+    icon: SearchIcon
+  }), React__default.createElement(Title, {
+    headingLevel: 'h5',
+    size: 'lg'
+  }, "No results found")))))), renderPagination('bottom'));
+}
+
+const FilterInput = ({
+  onChange: onChangeHandler,
+  placeholder
+}) => {
+  const [searchStr, setSearchStr] = useState('');
+
+  const onChange = (text, event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    setSearchStr(() => {
+      onChangeHandler && onChangeHandler(text, event);
+      return text;
+    });
+  };
+
+  return React__default.createElement("div", {
+    className: 'filter-input'
+  }, React__default.createElement(TextInput, {
+    value: searchStr,
+    type: 'text',
+    placeholder: placeholder,
+    onChange: onChange,
+    "aria-label": 'Text input filter',
+    onFocus: event => {
+      event.stopPropagation();
+      event.preventDefault();
+    },
+    onClick: event => {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }), searchStr && React__default.createElement("pfe-icon", {
+    class: 'clear-icon action-icon',
+    icon: 'fas-times',
+    onClick: event => onChange('', event)
+  }), React__default.createElement("pfe-icon", {
+    class: 'search-icon action-icon',
+    icon: 'fas-search-solid'
+  }));
+};
+
+const ExcludedPackagesTable = ({
+  excludedPackages,
+  isLoading
+}) => {
+  const renderPackagesRow = ({
+    gpg,
+    name,
+    version,
+    release,
+    architecture,
+    nvra,
+    summary
+  }) => {
+    return [gpg ? React__default.createElement("a", {
+      href: `https://access.redhat.com/downloads/content/${name}/${version}}-${release}/${architecture}/${gpg == null ? void 0 : gpg.slice(-8)}/package`,
+      target: '_blank',
+      rel: 'noopener noreferrer'
+    }, nvra) : React__default.createElement("span", null, nvra), summary];
+  };
+
+  const onTextInputFilterChange = (text, {
+    nvra,
+    summary
+  }) => `${nvra + summary}`.toLowerCase().includes(text.toLowerCase());
+
+  return React__default.createElement("div", {
+    className: 'excluded-packages-table'
+  }, React__default.createElement(FilterableTable, {
+    isLoading: isLoading,
+    tableName: 'Excluded packages table',
+    columns: [{
+      title: 'Excluded Package'
+    }, {
+      title: 'Summary'
+    }],
+    items: excludedPackages,
+    renderRow: renderPackagesRow,
+    perPageOptions: [{
+      title: '5',
+      value: 5
+    }, {
+      title: '10',
+      value: 10
+    }, {
+      title: '20',
+      value: 20
+    }],
+    filters: [React__default.createElement(FilterInput, {
+      key: 'excluded-packages-table__filter-input',
+      onChange: onTextInputFilterChange,
+      placeholder: 'Filter excluded packages'
+    })]
+  }));
+};
+
+function EcoSelect({
+  variant,
+  placeholderText,
+  options,
+  onChange,
+  'aria-label': ariaLabel
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState([]);
+
+  const onToggle = isOpen => setIsOpen(isOpen);
+
+  const onSelect = (event, selection) => {
+    const result = selected.includes(selection) ? selected.filter(item => item !== selection) : [selection, ...selected];
+    setSelected(() => {
+      onChange && onChange(result, event);
+      return result;
+    });
+  };
+
+  const id = uniqueId('select-');
+  return React__default.createElement("div", {
+    className: 'select'
+  }, React__default.createElement(Select, {
+    id: id,
+    variant: variant,
+    "aria-label": ariaLabel,
+    onToggle: onToggle,
+    onSelect: onSelect,
+    selections: selected,
+    isOpen: isOpen,
+    placeholderText: placeholderText
+  }, options.map(option => React__default.createElement(SelectOption, {
+    key: option,
+    value: option
+  }))));
+}
+
+const ToggleGroup = props => {
+  const [selected, setSelected] = useState('');
+
+  const onClick = (_, event) => {
+    const id = event.currentTarget.id;
+    setSelected(() => {
+      props.onChange && props.onChange(id, event);
+      return id;
+    });
+  };
+
+  return React__default.createElement(ToggleGroup$1, {
+    "aria-label": props['aria-label']
+  }, props.options.map((option, index) => React__default.createElement(ToggleGroupItem, {
+    text: option.text,
+    key: index,
+    buttonId: option.id,
+    isSelected: selected === option.id,
+    onChange: onClick
+  })));
+};
+
+/* eslint-disable camelcase */
+const VulnerabilitiesTable = ({
+  vulnerabilities,
+  isLoading
+}) => {
+  const getImpact = ({
+    severity
+  }) => {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: 'vulnerabilities-table__impact-cell'
+    }, React__default.createElement("pfe-icon", {
+      class: `color-${severity.toLowerCase()}`,
+      className: `color-${severity.toLowerCase()}`,
+      icon: 'fas-shield-fill-exclamation'
+    }), React__default.createElement("span", null, severity)));
+  };
+
+  const getCVE = ({
+    cve_id
+  }) => {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: 'vulnerabilities-table__cve-cell'
+    }, React__default.createElement("a", {
+      href: `https://access.redhat.com/security/cve/${cve_id}`,
+      target: '_blank',
+      rel: 'noopener noreferrer'
+    }, cve_id)));
+  };
+
+  const getAffectedPackages = rpms => {
+    return React__default.createElement(React__default.Fragment, null, rpms == null ? void 0 : rpms.map(({
+      gpg,
+      name,
+      version,
+      release,
+      architecture,
+      nvra
+    } = {}, index) => {
+      return gpg ? React__default.createElement("div", {
+        className: 'vulnerabilities-table__affected-packages-cell',
+        key: `affected-package-${index}`
+      }, React__default.createElement("a", {
+        href: `https://access.redhat.com/downloads/content/${name}/${version}-${release}/${architecture}/${gpg == null ? void 0 : gpg.slice(-8)}/package`,
+        target: '_blank',
+        rel: 'noopener noreferrer'
+      }, nvra)) : React__default.createElement("div", {
+        key: `affected-package-${index}`,
+        className: 'vulnerabilities-table__affected-packages-cell'
+      }, React__default.createElement("span", null, nvra));
+    }));
+  };
+
+  const getRPMAdvisory = ({
+    advisory_type,
+    advisory_id
+  }) => {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: 'vulnerabilities-table__rpm-advisory-cell'
+    }, React__default.createElement("a", {
+      href: `https://access.redhat.com/errata/${advisory_type}-${advisory_id}`,
+      target: '_blank',
+      rel: 'noopener noreferrer'
+    }, advisory_type, "-", advisory_id)));
+  };
+
+  const renderVulnerabilitiesRow = vulnerability => {
+    return [getImpact(vulnerability), getCVE(vulnerability), getAffectedPackages(vulnerability.rpm_nvra_with_link_data), getRPMAdvisory(vulnerability), vulnerability != null && vulnerability.creation_date ? format(new Date(vulnerability == null ? void 0 : vulnerability.creation_date), 'MMM dd, yyyy hh:mm a') : ''];
+  };
+
+  const onTextInputFilterChange = (text, {
+    rpm_nvra_with_link_data,
+    severity,
+    cve_id,
+    advisory_id
+  }) => {
+    const nvraList = rpm_nvra_with_link_data.reduce((result, {
+      nvra
+    }) => result += nvra, '');
+    return `${severity + cve_id + advisory_id + nvraList}`.toLowerCase().includes(text.toLowerCase());
+  };
+
+  const onStatusFilterChange = (selected, vulnerability) => {
+    return selected === 'fixed' ? vulnerability.advisory_id !== null : selected === 'unfixed' ? vulnerability.advisory_id === null : true;
+  };
+
+  const onImpactFilterChange = (selected, vulnerability) => {
+    return selected.length > 0 ? selected.includes(vulnerability.severity) : true;
+  };
+
+  return React__default.createElement("div", {
+    className: 'vulnerabilities-table'
+  }, React__default.createElement(FilterableTable, {
+    tableName: 'Vulnerabilities impact table',
+    columns: [{
+      title: 'Impact',
+      sortField: 'severity',
+      sortFn: vulnerability => severitySortOrder[vulnerability.severity]
+    }, {
+      title: 'CVE',
+      sortField: 'cve_id'
+    }, {
+      title: 'Affected Package(s)'
+    }, {
+      title: 'RPM Advisory',
+      sortField: 'advisory_id'
+    }, {
+      title: 'Created',
+      sortField: 'creation_date',
+      sortFn: vulnerability => new Date(vulnerability == null ? void 0 : vulnerability.creation_date).getTime()
+    }],
+    items: vulnerabilities,
+    renderRow: renderVulnerabilitiesRow,
+    isLoading: isLoading,
+    perPageOptions: [{
+      title: '5',
+      value: 5
+    }, {
+      title: '10',
+      value: 10
+    }, {
+      title: '20',
+      value: 20
+    }],
+    filters: [React__default.createElement(FilterInput, {
+      key: 'vulnerabilities-table__filter-input',
+      onChange: onTextInputFilterChange,
+      placeholder: 'Filter vulnerabilities'
+    }), React__default.createElement(ToggleGroup, {
+      key: 'vulnerabilities-table__toggle-group',
+      onChange: onStatusFilterChange,
+      "aria-label": 'Vulnerability status filter',
+      options: [{
+        id: 'all',
+        text: 'All'
+      }, {
+        id: 'fixed',
+        text: 'Fixed'
+      }, {
+        id: 'unfixed',
+        text: 'Unfixed'
+      }]
+    }), React__default.createElement(EcoSelect, {
+      key: 'vulnerabilities-table__select',
+      onChange: onImpactFilterChange,
+      "aria-label": 'Impact filter',
+      placeholderText: 'Impact',
+      variant: 'checkbox',
+      options: Array.from(new Set(vulnerabilities.map(vulnerability => vulnerability.severity)))
+    })]
+  }));
+};
+
+/* eslint-disable camelcase */
+const severitySortOrder = {
+  Critical: 1,
+  Important: 2,
+  Moderate: 3,
+  Low: 4
+};
+PfeIcon.addIconSet('fas', './img', (iconName, _, path) => {
+  const name = iconName.replace('fas-', '');
+  return `${path}/${name}.svg`;
+});
+
+const InsertCss = () => {
+  const styleId = 'example-component-styles';
+
+  if (!document.getElementById(styleId)) {
+    const styleTag = document.createElement('style');
+    styleTag.id = styleId;
+    styleTag.innerHTML = css_248z;
+    document.body.appendChild(styleTag);
+  }
+};
+
+const PackagesTable = ({
+  vulnerabilities: _vulnerabilities = [],
+  rpms: _rpms = [],
+  isLoading: _isLoading = false
+}) => {
+  const [excludedPackages, setExcludedPackages] = React.useState([]);
+  const [uniqueVulnerabilities, setUniqueVulnerabilities] = React.useState([]);
+  React.useEffect(() => {
+    const VALID_REDHAT_GPG_KEYS = ['199e2f91fd431d51', '5326810137017186', '45689c882fa658e0', '219180cddb42a60e', '7514f77d8366b0d9', 'fd372689897da07a', '938a80caf21541eb', '08b871e6a5787476'];
+
+    const packages = _rpms.filter(({
+      gpg
+    }) => !VALID_REDHAT_GPG_KEYS.includes(gpg));
+
+    setExcludedPackages(packages);
+    const uniqueVulnerabilities = [..._vulnerabilities]; // augment vulnerabilities with link data
+
+    uniqueVulnerabilities.forEach(vulnerability => {
+      var _vulnerability$packag;
+
+      vulnerability.rpm_nvra_with_link_data = [];
+      return vulnerability == null ? void 0 : (_vulnerability$packag = vulnerability.packages) == null ? void 0 : _vulnerability$packag.forEach(p => {
+        var _p$rpm_nvra;
+
+        return p == null ? void 0 : (_p$rpm_nvra = p.rpm_nvra) == null ? void 0 : _p$rpm_nvra.forEach(rpm_nvra => {
+          const link_data = _rpms == null ? void 0 : _rpms.filter(pk => pk.nvra === rpm_nvra);
+          vulnerability.rpm_nvra_with_link_data.push(link_data[0]);
+        });
+      });
+    }); // sort vulnerabilities by severity
+
+    uniqueVulnerabilities.sort(vulnerability => severitySortOrder[vulnerability.severity]); // filter out vulnerabilities with duplicate CVE IDs
+
+    uniqueVulnerabilities.filter((value, index, self) => self.findIndex(vulnerability => vulnerability.cve_id === value.cve_id) === index);
+    setUniqueVulnerabilities(uniqueVulnerabilities);
+  }, [_rpms, _vulnerabilities]);
+  InsertCss();
+  return React.createElement(React.Fragment, null, (uniqueVulnerabilities.length > 0 || excludedPackages.length > 0) && React.createElement("div", {
+    className: 'packages-table'
+  }, React.createElement("pfe-tabs", {
+    "pfe-variant": 'earth',
+    on: 'light'
+  }, uniqueVulnerabilities.length > 0 && React.createElement(React.Fragment, null, React.createElement("pfe-tab", {
+    slot: 'tab',
+    role: 'heading'
+  }, "Vulnerabilities ", `(${uniqueVulnerabilities.length})`), React.createElement("pfe-tab-panel", {
+    slot: 'panel',
+    role: 'region'
+  }, React.createElement(VulnerabilitiesTable, {
+    vulnerabilities: uniqueVulnerabilities,
+    isLoading: _isLoading
+  }))), excludedPackages.length > 0 && React.createElement(React.Fragment, null, React.createElement("pfe-tab", {
+    slot: 'tab',
+    role: 'heading'
+  }, "Excluded Packages ", `(${excludedPackages.length})`), React.createElement("pfe-tab-panel", {
+    slot: 'panel',
+    role: 'region'
+  }, React.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.createElement(ExcludedPackagesTable, {
+    excludedPackages: excludedPackages,
+    isLoading: _isLoading
+  }))))));
+};
+
+export { PackagesTable, severitySortOrder };