@spscommerce/ds-react 3.16.1-ie → 3.16.3

package/lib/index.cjs.js

@@ -15,6 +15,7 @@ var positioning = require('@spscommerce/positioning');
 var moment$6 = require('moment-timezone');
 var isPlainObject = require('lodash.isplainobject');
 var dsColors = require('@spscommerce/ds-colors');
+var collections = require('@react-stately/collections');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,6 +40,7 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
 var PropTypes__namespace = /*#__PURE__*/_interopNamespace(PropTypes);
 var nanoid__default = /*#__PURE__*/_interopDefaultLegacy(nanoid);
@@ -1778,7 +1780,7 @@ Object.assign(SpsCardTabbedPane, {
  * @param activeTab
  * @param isTabbedCard
  */
-function useTab(children, activeTab, isTabbedCard) {
+function useTab$1(children, activeTab, isTabbedCard) {
     // STATE: Currently active tab state
     var _a = __read(React__namespace.useState({
         index: 0,
@@ -1862,7 +1864,7 @@ function SpsCard(props) {
     var activeTab = props.activeTab, children = props.children, className = props.className, footer = props.footer, headerContent = props.headerContent, headerIcon = props.headerIcon, headerTitle = props.headerTitle, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["activeTab", "children", "className", "footer", "headerContent", "headerIcon", "headerTitle", 'data-testid', "unsafelyReplaceClassName"]);
     // This used to be a prop but now we derive it
     var isTabbedCard = React__namespace.Children.toArray(children).some(function (child) { return React__namespace.isValidElement(child) && child.type === SpsCardTabbedPane; });
-    var _a = __read(useTab(children, activeTab, isTabbedCard), 2), currentlyActiveTab = _a[0], setCurrentlyActiveTab = _a[1];
+    var _a = __read(useTab$1(children, activeTab, isTabbedCard), 2), currentlyActiveTab = _a[0], setCurrentlyActiveTab = _a[1];
     var classes = clsx__default['default'](unsafelyReplaceClassName || 'sps-card', className);
     return (React__namespace.createElement("div", __assign({}, rest, { className: classes, "data-testid": testId + "__card" }),
         (headerTitle || headerContent) && (React__namespace.createElement(SpsCardHeader, { title: headerTitle, content: contentOf(headerContent), icon: headerIcon, "data-testid": testId + "__header" })),
@@ -9170,6 +9172,20 @@ function SpsTaskQueue(_a) {
     var _g = __read(React__namespace.useState(hasTasks), 2), showNotification = _g[0], setShowNotification = _g[1];
     var toggleRef = React__namespace.useRef(null);
     var taskQueueDropdownRef = React__namespace.useRef(null);
+    var resizeListener = React__namespace.useCallback(function () {
+        setIsOpen(false);
+        if (onClose) {
+            onClose();
+        }
+    }, []);
+    React__namespace.useEffect(function () {
+        if (isOpen) {
+            window.addEventListener('resize', resizeListener);
+        }
+        else {
+            window.removeEventListener('resize', resizeListener);
+        }
+    }, [isOpen]);
     var portal = usePortal('sps-task-queue-portal');
     var portalContext = React__namespace.useContext(PortalContext);
     var _h = __read(isOpen
@@ -9184,13 +9200,6 @@ function SpsTaskQueue(_a) {
     // this gives us a stable reference to the freshest onClose handler
     var onCloseRef = React__namespace.useRef(onClose);
     onCloseRef.current = onClose;
-    // this gives us a stable getter for the freshest available positioning options
-    var getPositioningOptions = function () { return ({
-        relativeTo: toggleRef.current,
-        position: taskQueuePosition,
-    }); };
-    var getPositioningOptionsRef = React__namespace.useRef(getPositioningOptions);
-    getPositioningOptionsRef.current = getPositioningOptions;
     var handleToggle = function () {
         if (hasTasks && !isOpen) {
             setIsOpen(true);
@@ -9378,7 +9387,6 @@ var SpsTextInput = React__namespace.forwardRef(function (_a, ref) {
         setAndPropagateValue('');
     }
     function handleChange(event) {
-        console.log('handleChange', event.target.value);
         setAndPropagateValue(event.target.value, event);
     }
     var classes = clsx__default['default'](unsafelyReplaceClassName || 'sps-text-input', className);
@@ -10388,6 +10396,3232 @@ var MANIFEST = {
     },
 };
 
+function useControlledState(value, defaultValue, onChange) {
+  let [stateValue, setStateValue] = React.useState(value || defaultValue);
+  let ref = React.useRef(value !== undefined);
+  let wasControlled = ref.current;
+  let isControlled = value !== undefined; // Internal state reference for useCallback
+
+  let stateRef = React.useRef(stateValue);
+
+  if (wasControlled !== isControlled) {
+    console.warn("WARN: A component changed from " + (wasControlled ? 'controlled' : 'uncontrolled') + " to " + (isControlled ? 'controlled' : 'uncontrolled') + ".");
+  }
+
+  ref.current = isControlled;
+  let setValue = React.useCallback(function (value) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    let onChangeCaller = function onChangeCaller(value) {
+      if (onChange) {
+        if (!Object.is(stateRef.current, value)) {
+          for (var _len2 = arguments.length, onChangeArgs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+            onChangeArgs[_key2 - 1] = arguments[_key2];
+          }
+
+          onChange(value, ...onChangeArgs);
+        }
+      }
+
+      if (!isControlled) {
+        stateRef.current = value;
+      }
+    };
+
+    if (typeof value === 'function') {
+      // this supports functional updates https://reactjs.org/docs/hooks-reference.html#functional-updates
+      // when someone using useControlledState calls setControlledState(myFunc)
+      // this will call our useState setState with a function as well which invokes myFunc and calls onChange with the value from myFunc
+      // if we're in an uncontrolled state, then we also return the value of myFunc which to setState looks as though it was just called with myFunc from the beginning
+      // otherwise we just return the controlled value, which won't cause a rerender because React knows to bail out when the value is the same
+      let updateFunction = function updateFunction(oldValue) {
+        for (var _len3 = arguments.length, functionArgs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+          functionArgs[_key3 - 1] = arguments[_key3];
+        }
+
+        let interceptedValue = value(isControlled ? stateRef.current : oldValue, ...functionArgs);
+        onChangeCaller(interceptedValue, ...args);
+
+        if (!isControlled) {
+          return interceptedValue;
+        }
+
+        return oldValue;
+      };
+
+      setStateValue(updateFunction);
+    } else {
+      if (!isControlled) {
+        setStateValue(value);
+      }
+
+      onChangeCaller(value, ...args);
+    }
+  }, [isControlled, onChange]); // If a controlled component's value prop changes, we need to update stateRef
+
+  if (isControlled) {
+    stateRef.current = value;
+  } else {
+    value = stateValue;
+  }
+
+  return [value, setValue];
+}
+
+function _extends$3() {
+  _extends$3 = 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$3.apply(this, arguments);
+}
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/**
+ * A Selection is a special Set containing Keys, which also has an anchor
+ * and current selected key for use when range selecting.
+ */
+class $c91e86e24f2dc9a2182dcc2674c58c$export$Selection extends Set {
+  constructor(keys, anchorKey, currentKey) {
+    super(keys);
+    this.anchorKey = void 0;
+    this.currentKey = void 0;
+
+    if (keys instanceof $c91e86e24f2dc9a2182dcc2674c58c$export$Selection) {
+      this.anchorKey = anchorKey || keys.anchorKey;
+      this.currentKey = currentKey || keys.currentKey;
+    } else {
+      this.anchorKey = anchorKey;
+      this.currentKey = currentKey;
+    }
+  }
+
+}
+
+/**
+ * Manages state for multiple selection and focus in a collection.
+ */
+function useMultipleSelectionState(props) {
+  let {
+    selectionMode = 'none',
+    disallowEmptySelection
+  } = props; // We want synchronous updates to `isFocused` and `focusedKey` after their setters are called.
+  // But we also need to trigger a react re-render. So, we have both a ref (sync) and state (async).
+
+  let isFocusedRef = React.useRef(false);
+  let [, setFocused] = React.useState(false);
+  let focusedKeyRef = React.useRef(null);
+  let childFocusStrategyRef = React.useRef(null);
+  let [, setFocusedKey] = React.useState(null);
+  let selectedKeysProp = React.useMemo(() => $c86d35e876e048ac11515eee40c7$var$convertSelection(props.selectedKeys), [props.selectedKeys]);
+  let defaultSelectedKeys = React.useMemo(() => $c86d35e876e048ac11515eee40c7$var$convertSelection(props.defaultSelectedKeys, new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection()), [props.defaultSelectedKeys]);
+  let [selectedKeys, setSelectedKeys] = useControlledState(selectedKeysProp, defaultSelectedKeys, props.onSelectionChange);
+  let disabledKeysProp = React.useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]);
+  return {
+    selectionMode,
+    disallowEmptySelection,
+
+    get isFocused() {
+      return isFocusedRef.current;
+    },
+
+    setFocused(f) {
+      isFocusedRef.current = f;
+      setFocused(f);
+    },
+
+    get focusedKey() {
+      return focusedKeyRef.current;
+    },
+
+    get childFocusStrategy() {
+      return childFocusStrategyRef.current;
+    },
+
+    setFocusedKey(k, childFocusStrategy) {
+      if (childFocusStrategy === void 0) {
+        childFocusStrategy = 'first';
+      }
+
+      focusedKeyRef.current = k;
+      childFocusStrategyRef.current = childFocusStrategy;
+      setFocusedKey(k);
+    },
+
+    selectedKeys,
+    setSelectedKeys,
+    disabledKeys: disabledKeysProp
+  };
+}
+
+function $c86d35e876e048ac11515eee40c7$var$convertSelection(selection, defaultValue) {
+  if (!selection) {
+    return defaultValue;
+  }
+
+  return selection === 'all' ? 'all' : new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection(selection);
+}
+
+/**
+ * An interface for reading and updating multiple selection state.
+ */
+class SelectionManager {
+  constructor(collection, state, options) {
+    var _options$allowsCellSe;
+
+    this.collection = void 0;
+    this.state = void 0;
+    this.allowsCellSelection = void 0;
+    this._isSelectAll = void 0;
+    this.collection = collection;
+    this.state = state;
+    this.allowsCellSelection = (_options$allowsCellSe = options == null ? void 0 : options.allowsCellSelection) != null ? _options$allowsCellSe : false;
+    this._isSelectAll = null;
+  }
+  /**
+   * The type of selection that is allowed in the collection.
+   */
+
+
+  get selectionMode() {
+    return this.state.selectionMode;
+  }
+  /**
+   * Whether the collection allows empty selection.
+   */
+
+
+  get disallowEmptySelection() {
+    return this.state.disallowEmptySelection;
+  }
+  /**
+   * Whether the collection is currently focused.
+   */
+
+
+  get isFocused() {
+    return this.state.isFocused;
+  }
+  /**
+   * Sets whether the collection is focused.
+   */
+
+
+  setFocused(isFocused) {
+    this.state.setFocused(isFocused);
+  }
+  /**
+   * The current focused key in the collection.
+   */
+
+
+  get focusedKey() {
+    return this.state.focusedKey;
+  }
+  /** Whether the first or last child of the focused key should receive focus. */
+
+
+  get childFocusStrategy() {
+    return this.state.childFocusStrategy;
+  }
+  /**
+   * Sets the focused key.
+   */
+
+
+  setFocusedKey(key, childFocusStrategy) {
+    this.state.setFocusedKey(key, childFocusStrategy);
+  }
+  /**
+   * The currently selected keys in the collection.
+   */
+
+
+  get selectedKeys() {
+    return this.state.selectedKeys === 'all' ? new Set(this.getSelectAllKeys()) : this.state.selectedKeys;
+  }
+  /**
+   * The raw selection value for the collection.
+   * Either 'all' for select all, or a set of keys.
+   */
+
+
+  get rawSelection() {
+    return this.state.selectedKeys;
+  }
+  /**
+   * Returns whether a key is selected.
+   */
+
+
+  isSelected(key) {
+    if (this.state.selectionMode === 'none') {
+      return false;
+    }
+
+    key = this.getKey(key);
+    return this.state.selectedKeys === 'all' ? !this.state.disabledKeys.has(key) : this.state.selectedKeys.has(key);
+  }
+  /**
+   * Whether the selection is empty.
+   */
+
+
+  get isEmpty() {
+    return this.state.selectedKeys !== 'all' && this.state.selectedKeys.size === 0;
+  }
+  /**
+   * Whether all items in the collection are selected.
+   */
+
+
+  get isSelectAll() {
+    if (this.isEmpty) {
+      return false;
+    }
+
+    if (this.state.selectedKeys === 'all') {
+      return true;
+    }
+
+    if (this._isSelectAll != null) {
+      return this._isSelectAll;
+    }
+
+    let allKeys = this.getSelectAllKeys();
+    let selectedKeys = this.state.selectedKeys;
+    this._isSelectAll = allKeys.every(k => selectedKeys.has(k));
+    return this._isSelectAll;
+  }
+
+  get firstSelectedKey() {
+    var _first;
+
+    let first = null;
+
+    for (let key of this.state.selectedKeys) {
+      let item = this.collection.getItem(key);
+
+      if (!first || (item == null ? void 0 : item.index) < first.index) {
+        first = item;
+      }
+    }
+
+    return (_first = first) == null ? void 0 : _first.key;
+  }
+
+  get lastSelectedKey() {
+    var _last;
+
+    let last = null;
+
+    for (let key of this.state.selectedKeys) {
+      let item = this.collection.getItem(key);
+
+      if (!last || (item == null ? void 0 : item.index) > last.index) {
+        last = item;
+      }
+    }
+
+    return (_last = last) == null ? void 0 : _last.key;
+  }
+  /**
+   * Extends the selection to the given key.
+   */
+
+
+  extendSelection(toKey) {
+    toKey = this.getKey(toKey);
+    let selection; // Only select the one key if coming from a select all.
+
+    if (this.state.selectedKeys === 'all') {
+      selection = new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection([toKey], toKey, toKey);
+    } else {
+      let selectedKeys = this.state.selectedKeys;
+      let anchorKey = selectedKeys.anchorKey || toKey;
+      selection = new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection(selectedKeys, anchorKey, toKey);
+
+      for (let key of this.getKeyRange(anchorKey, selectedKeys.currentKey || toKey)) {
+        selection.delete(key);
+      }
+
+      for (let key of this.getKeyRange(toKey, anchorKey)) {
+        if (!this.state.disabledKeys.has(key)) {
+          selection.add(key);
+        }
+      }
+    }
+
+    this.state.setSelectedKeys(selection);
+  }
+
+  getKeyRange(from, to) {
+    let fromItem = this.collection.getItem(from);
+    let toItem = this.collection.getItem(to);
+
+    if (fromItem && toItem) {
+      if (fromItem.index <= toItem.index) {
+        return this.getKeyRangeInternal(from, to);
+      }
+
+      return this.getKeyRangeInternal(to, from);
+    }
+
+    return [];
+  }
+
+  getKeyRangeInternal(from, to) {
+    let keys = [];
+    let key = from;
+
+    while (key) {
+      let item = this.collection.getItem(key);
+
+      if (item && item.type === 'item' || item.type === 'cell' && this.allowsCellSelection) {
+        keys.push(key);
+      }
+
+      if (key === to) {
+        return keys;
+      }
+
+      key = this.collection.getKeyAfter(key);
+    }
+
+    return [];
+  }
+
+  getKey(key) {
+    let item = this.collection.getItem(key);
+
+    if (!item) {
+      // ¯\_(ツ)_/¯
+      return key;
+    } // If cell selection is allowed, just return the key.
+
+
+    if (item.type === 'cell' && this.allowsCellSelection) {
+      return key;
+    } // Find a parent item to select
+
+
+    while (item.type !== 'item' && item.parentKey) {
+      item = this.collection.getItem(item.parentKey);
+    }
+
+    if (!item || item.type !== 'item') {
+      return null;
+    }
+
+    return item.key;
+  }
+  /**
+   * Toggles whether the given key is selected.
+   */
+
+
+  toggleSelection(key) {
+    key = this.getKey(key);
+
+    if (key == null) {
+      return;
+    }
+
+    let keys = new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection(this.state.selectedKeys === 'all' ? this.getSelectAllKeys() : this.state.selectedKeys);
+
+    if (keys.has(key)) {
+      keys.delete(key); // TODO: move anchor to last selected key...
+      // Does `current` need to move here too?
+    } else {
+      keys.add(key);
+      keys.anchorKey = key;
+      keys.currentKey = key;
+    }
+
+    if (this.disallowEmptySelection && keys.size === 0) {
+      return;
+    }
+
+    this.state.setSelectedKeys(keys);
+  }
+  /**
+   * Replaces the selection with only the given key.
+   */
+
+
+  replaceSelection(key) {
+    key = this.getKey(key);
+
+    if (key == null) {
+      return;
+    }
+
+    this.state.setSelectedKeys(new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection([key], key, key));
+  }
+  /**
+   * Replaces the selection with the given keys.
+   */
+
+
+  setSelectedKeys(keys) {
+    if (this.selectionMode === 'none') {
+      return;
+    }
+
+    let selection = new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection();
+
+    for (let key of keys) {
+      key = this.getKey(key);
+
+      if (key != null) {
+        selection.add(key);
+
+        if (this.selectionMode === 'single') {
+          break;
+        }
+      }
+    }
+
+    this.state.setSelectedKeys(selection);
+  }
+
+  getSelectAllKeys() {
+    let keys = [];
+
+    let addKeys = key => {
+      while (key) {
+        if (!this.state.disabledKeys.has(key)) {
+          let item = this.collection.getItem(key);
+
+          if (item.type === 'item') {
+            keys.push(key);
+          } // Add child keys. If cell selection is allowed, then include item children too.
+
+
+          if (item.hasChildNodes && (this.allowsCellSelection || item.type !== 'item')) {
+            addKeys([...item.childNodes][0].key);
+          }
+        }
+
+        key = this.collection.getKeyAfter(key);
+      }
+    };
+
+    addKeys(this.collection.getFirstKey());
+    return keys;
+  }
+  /**
+   * Selects all items in the collection.
+   */
+
+
+  selectAll() {
+    if (this.selectionMode === 'multiple') {
+      this.state.setSelectedKeys('all');
+    }
+  }
+  /**
+   * Removes all keys from the selection.
+   */
+
+
+  clearSelection() {
+    if (!this.disallowEmptySelection && (this.state.selectedKeys === 'all' || this.state.selectedKeys.size > 0)) {
+      this.state.setSelectedKeys(new $c91e86e24f2dc9a2182dcc2674c58c$export$Selection());
+    }
+  }
+  /**
+   * Toggles between select all and an empty selection.
+   */
+
+
+  toggleSelectAll() {
+    if (this.isSelectAll) {
+      this.clearSelection();
+    } else {
+      this.selectAll();
+    }
+  }
+
+  select(key, e) {
+    if (this.selectionMode === 'none') {
+      return;
+    }
+
+    if (this.selectionMode === 'single') {
+      if (this.isSelected(key) && !this.disallowEmptySelection) {
+        this.toggleSelection(key);
+      } else {
+        this.replaceSelection(key);
+      }
+    } else if (e && e.shiftKey) {
+      this.extendSelection(key);
+    } else {
+      this.toggleSelection(key);
+    }
+  }
+  /**
+   * Returns whether the current selection is equal to the given selection.
+   */
+
+
+  isSelectionEqual(selection) {
+    if (selection === this.state.selectedKeys) {
+      return true;
+    } // Check if the set of keys match.
+
+
+    let selectedKeys = this.selectedKeys;
+
+    if (selection.size !== selectedKeys.size) {
+      return false;
+    }
+
+    for (let key of selection) {
+      if (!selectedKeys.has(key)) {
+        return false;
+      }
+    }
+
+    for (let key of selectedKeys) {
+      if (!selection.has(key)) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+}
+
+let $ed5d55e571caf578a4f08babbaa26be$var$_Symbol$iterator;
+$ed5d55e571caf578a4f08babbaa26be$var$_Symbol$iterator = Symbol.iterator;
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+class ListCollection {
+  constructor(nodes) {
+    var _last;
+
+    this.keyMap = new Map();
+    this.iterable = void 0;
+    this.firstKey = void 0;
+    this.lastKey = void 0;
+    this.iterable = nodes;
+
+    let visit = node => {
+      this.keyMap.set(node.key, node);
+
+      if (node.childNodes && node.type === 'section') {
+        for (let child of node.childNodes) {
+          visit(child);
+        }
+      }
+    };
+
+    for (let node of nodes) {
+      visit(node);
+    }
+
+    let last;
+    let index = 0;
+
+    for (let [key, node] of this.keyMap) {
+      if (last) {
+        last.nextKey = key;
+        node.prevKey = last.key;
+      } else {
+        this.firstKey = key;
+        node.prevKey = undefined;
+      }
+
+      if (node.type === 'item') {
+        node.index = index++;
+      }
+
+      last = node; // Set nextKey as undefined since this might be the last node
+      // If it isn't the last node, last.nextKey will properly set at start of new loop
+
+      last.nextKey = undefined;
+    }
+
+    this.lastKey = (_last = last) == null ? void 0 : _last.key;
+  }
+
+  *[$ed5d55e571caf578a4f08babbaa26be$var$_Symbol$iterator]() {
+    yield* this.iterable;
+  }
+
+  get size() {
+    return this.keyMap.size;
+  }
+
+  getKeys() {
+    return this.keyMap.keys();
+  }
+
+  getKeyBefore(key) {
+    let node = this.keyMap.get(key);
+    return node ? node.prevKey : null;
+  }
+
+  getKeyAfter(key) {
+    let node = this.keyMap.get(key);
+    return node ? node.nextKey : null;
+  }
+
+  getFirstKey() {
+    return this.firstKey;
+  }
+
+  getLastKey() {
+    return this.lastKey;
+  }
+
+  getItem(key) {
+    return this.keyMap.get(key);
+  }
+
+  at(idx) {
+    const keys = [...this.getKeys()];
+    return this.getItem(keys[idx]);
+  }
+
+}
+
+/**
+ * Provides state management for list-like components. Handles building a collection
+ * of items from props, and manages multiple selection state.
+ */
+function useListState(props) {
+  let {
+    filter
+  } = props;
+  let selectionState = useMultipleSelectionState(props);
+  let disabledKeys = React.useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]);
+
+  let factory = nodes => filter ? new ListCollection(filter(nodes)) : new ListCollection(nodes);
+
+  let context = React.useMemo(() => ({
+    suppressTextValueWarning: props.suppressTextValueWarning
+  }), [props.suppressTextValueWarning]);
+  let collection = collections.useCollection(props, factory, context, [filter]); // Reset focused key if that item is deleted from the collection.
+
+  React.useEffect(() => {
+    if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey)) {
+      selectionState.setFocusedKey(null);
+    }
+  }, [collection, selectionState.focusedKey]);
+  return {
+    collection,
+    disabledKeys,
+    selectionManager: new SelectionManager(collection, selectionState)
+  };
+}
+
+/**
+ * Provides state management for list-like components with single selection.
+ * Handles building a collection of items from props, and manages selection state.
+ */
+function useSingleSelectListState(props) {
+  var _props$defaultSelecte;
+
+  let [selectedKey, setSelectedKey] = useControlledState(props.selectedKey, (_props$defaultSelecte = props.defaultSelectedKey) != null ? _props$defaultSelecte : null, props.onSelectionChange);
+  let selectedKeys = React.useMemo(() => selectedKey != null ? [selectedKey] : [], [selectedKey]);
+  let {
+    collection,
+    disabledKeys,
+    selectionManager
+  } = useListState(_extends$3({}, props, {
+    selectionMode: 'single',
+    disallowEmptySelection: true,
+    selectedKeys,
+    onSelectionChange: keys => {
+      let key = keys.values().next().value; // Always fire onSelectionChange, even if the key is the same
+      // as the current key (useControlledState does not).
+
+      if (key === selectedKey && props.onSelectionChange) {
+        props.onSelectionChange(key);
+      }
+
+      setSelectedKey(key);
+    }
+  }));
+  let selectedItem = selectedKey != null ? collection.getItem(selectedKey) : null;
+  return {
+    collection,
+    disabledKeys,
+    selectionManager,
+    selectedKey,
+    setSelectedKey,
+    selectedItem
+  };
+}
+
+function _extends$2() {
+  _extends$2 = 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$2.apply(this, arguments);
+}
+
+/**
+ * Provides state management for a Tabs component. Tabs include a TabList which tracks
+ * which tab is currently selected and displays the content associated with that Tab in a TabPanel.
+ */
+function useTabListState(props) {
+  let state = useSingleSelectListState(_extends$2({}, props, {
+    suppressTextValueWarning: true
+  }));
+  React.useEffect(() => {
+    // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)
+    let selectedKey = state.selectedKey;
+
+    if (state.selectionManager.isEmpty || !state.collection.getItem(selectedKey)) {
+      selectedKey = state.collection.getFirstKey();
+      state.selectionManager.replaceSelection(selectedKey);
+    }
+
+    if (state.selectionManager.focusedKey == null) {
+      state.selectionManager.setFocusedKey(selectedKey);
+    }
+  }, [state.selectionManager, state.selectedKey, state.collection]);
+  return state;
+}
+
+// Default context value to use in case there is no SSRProvider. This is fine for
+// client-only apps. In order to support multiple copies of React Aria potentially
+// being on the page at once, the prefix is set to a random number. SSRProvider
+// will reset this to zero for consistency between server and client, so in the
+// SSR case multiple copies of React Aria is not supported.
+const $f01a183cc7bdff77849e49ad26eb904$var$defaultContext = {
+  prefix: Math.round(Math.random() * 10000000000),
+  current: 0
+};
+
+const $f01a183cc7bdff77849e49ad26eb904$var$SSRContext = /*#__PURE__*/React__default['default'].createContext($f01a183cc7bdff77849e49ad26eb904$var$defaultContext);
+let $f01a183cc7bdff77849e49ad26eb904$var$canUseDOM = Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+/** @private */
+
+function useSSRSafeId(defaultId) {
+  let ctx = React.useContext($f01a183cc7bdff77849e49ad26eb904$var$SSRContext); // If we are rendering in a non-DOM environment, and there's no SSRProvider,
+  // provide a warning to hint to the developer to add one.
+
+  if (ctx === $f01a183cc7bdff77849e49ad26eb904$var$defaultContext && !$f01a183cc7bdff77849e49ad26eb904$var$canUseDOM) {
+    console.warn('When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.');
+  }
+
+  return React.useMemo(() => defaultId || "react-aria-" + ctx.prefix + "-" + ++ctx.current, [defaultId]);
+}
+/**
+ * Returns whether the component is currently being server side rendered or
+ * hydrated on the client. Can be used to delay browser-specific rendering
+ * until after hydration.
+ */
+
+function useIsSSR() {
+  let cur = React.useContext($f01a183cc7bdff77849e49ad26eb904$var$SSRContext);
+  let isInSSRContext = cur !== $f01a183cc7bdff77849e49ad26eb904$var$defaultContext;
+  let [isSSR, setIsSSR] = React.useState(isInSSRContext); // If on the client, and the component was initially server rendered,
+  // then schedule a layout effect to update the component after hydration.
+
+  if (typeof window !== 'undefined' && isInSSRContext) {
+    // This if statement technically breaks the rules of hooks, but is safe
+    // because the condition never changes after mounting.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useLayoutEffect(() => {
+      setIsSSR(false);
+    }, []);
+  }
+
+  return isSSR;
+}
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+// https://en.wikipedia.org/wiki/Right-to-left
+const $d26e725ad56fbcb2c25f52b7de27$var$RTL_SCRIPTS = new Set(['Arab', 'Syrc', 'Samr', 'Mand', 'Thaa', 'Mend', 'Nkoo', 'Adlm', 'Rohg', 'Hebr']);
+const $d26e725ad56fbcb2c25f52b7de27$var$RTL_LANGS = new Set(['ae', 'ar', 'arc', 'bcc', 'bqi', 'ckb', 'dv', 'fa', 'glk', 'he', 'ku', 'mzn', 'nqo', 'pnb', 'ps', 'sd', 'ug', 'ur', 'yi']);
+/**
+ * Determines if a locale is read right to left using [Intl.Locale]{@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale}.
+ */
+
+function $d26e725ad56fbcb2c25f52b7de27$export$isRTL(locale) {
+  // If the Intl.Locale API is available, use it to get the script for the locale.
+  // This is more accurate than guessing by language, since languages can be written in multiple scripts.
+  // @ts-ignore
+  if (Intl.Locale) {
+    // @ts-ignore
+    let script = new Intl.Locale(locale).maximize().script;
+    return $d26e725ad56fbcb2c25f52b7de27$var$RTL_SCRIPTS.has(script);
+  } // If not, just guess by the language (first part of the locale)
+
+
+  let lang = locale.split('-')[0];
+  return $d26e725ad56fbcb2c25f52b7de27$var$RTL_LANGS.has(lang);
+}
+
+/**
+ * Gets the locale setting of the browser.
+ */
+function $e851d0b81d46abd5f971c8e95c27f1$export$getDefaultLocale() {
+  // @ts-ignore
+  let locale = typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage) || 'en-US';
+  return {
+    locale,
+    direction: $d26e725ad56fbcb2c25f52b7de27$export$isRTL(locale) ? 'rtl' : 'ltr'
+  };
+}
+
+let $e851d0b81d46abd5f971c8e95c27f1$var$currentLocale = $e851d0b81d46abd5f971c8e95c27f1$export$getDefaultLocale();
+let $e851d0b81d46abd5f971c8e95c27f1$var$listeners = new Set();
+
+function $e851d0b81d46abd5f971c8e95c27f1$var$updateLocale() {
+  $e851d0b81d46abd5f971c8e95c27f1$var$currentLocale = $e851d0b81d46abd5f971c8e95c27f1$export$getDefaultLocale();
+
+  for (let listener of $e851d0b81d46abd5f971c8e95c27f1$var$listeners) {
+    listener($e851d0b81d46abd5f971c8e95c27f1$var$currentLocale);
+  }
+}
+/**
+ * Returns the current browser/system language, and updates when it changes.
+ */
+
+
+function $e851d0b81d46abd5f971c8e95c27f1$export$useDefaultLocale() {
+  let isSSR = useIsSSR();
+  let [defaultLocale, setDefaultLocale] = React.useState($e851d0b81d46abd5f971c8e95c27f1$var$currentLocale);
+  React.useEffect(() => {
+    if ($e851d0b81d46abd5f971c8e95c27f1$var$listeners.size === 0) {
+      window.addEventListener('languagechange', $e851d0b81d46abd5f971c8e95c27f1$var$updateLocale);
+    }
+
+    $e851d0b81d46abd5f971c8e95c27f1$var$listeners.add(setDefaultLocale);
+    return () => {
+      $e851d0b81d46abd5f971c8e95c27f1$var$listeners.delete(setDefaultLocale);
+
+      if ($e851d0b81d46abd5f971c8e95c27f1$var$listeners.size === 0) {
+        window.removeEventListener('languagechange', $e851d0b81d46abd5f971c8e95c27f1$var$updateLocale);
+      }
+    };
+  }, []); // We cannot determine the browser's language on the server, so default to
+  // en-US. This will be updated after hydration on the client to the correct value.
+
+  if (isSSR) {
+    return {
+      locale: 'en-US',
+      direction: 'ltr'
+    };
+  }
+
+  return defaultLocale;
+}
+
+const $cff8541df3b5c83067b2ab3ee0d20$var$I18nContext = /*#__PURE__*/React__default['default'].createContext(null);
+/**
+ * Returns the current locale and layout direction.
+ */
+
+function useLocale() {
+  let defaultLocale = $e851d0b81d46abd5f971c8e95c27f1$export$useDefaultLocale();
+  let context = React.useContext($cff8541df3b5c83067b2ab3ee0d20$var$I18nContext);
+  return context || defaultLocale;
+}
+
+// During SSR, React emits a warning when calling useLayoutEffect.
+// Since neither useLayoutEffect nor useEffect run on the server,
+// we can suppress this by replace it with a noop on the server.
+const useLayoutEffect = typeof window !== 'undefined' ? React__default['default'].useLayoutEffect : () => {};
+let $f8b5fdd96fb429d7102983f777c41307$var$idsUpdaterMap = new Map();
+/**
+ * If a default is not provided, generate an id.
+ * @param defaultId - Default component id.
+ */
+
+function useId(defaultId) {
+  let isRendering = React.useRef(true);
+  isRendering.current = true;
+  let [value, setValue] = React.useState(defaultId);
+  let nextId = React.useRef(null);
+  let res = useSSRSafeId(value); // don't memo this, we want it new each render so that the Effects always run
+
+  let updateValue = val => {
+    if (!isRendering.current) {
+      setValue(val);
+    } else {
+      nextId.current = val;
+    }
+  };
+
+  $f8b5fdd96fb429d7102983f777c41307$var$idsUpdaterMap.set(res, updateValue);
+  useLayoutEffect(() => {
+    isRendering.current = false;
+  }, [updateValue]);
+  useLayoutEffect(() => {
+    let r = res;
+    return () => {
+      $f8b5fdd96fb429d7102983f777c41307$var$idsUpdaterMap.delete(r);
+    };
+  }, [res]);
+  React.useEffect(() => {
+    let newId = nextId.current;
+
+    if (newId) {
+      setValue(newId);
+      nextId.current = null;
+    }
+  }, [setValue, updateValue]);
+  return res;
+}
+/**
+ * Merges two ids.
+ * Different ids will trigger a side-effect and re-render components hooked up with `useId`.
+ */
+
+function mergeIds(idA, idB) {
+  if (idA === idB) {
+    return idA;
+  }
+
+  let setIdA = $f8b5fdd96fb429d7102983f777c41307$var$idsUpdaterMap.get(idA);
+
+  if (setIdA) {
+    setIdA(idB);
+    return idB;
+  }
+
+  let setIdB = $f8b5fdd96fb429d7102983f777c41307$var$idsUpdaterMap.get(idB);
+
+  if (setIdB) {
+    setIdB(idA);
+    return idA;
+  }
+
+  return idB;
+}
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/**
+ * Calls all functions in the order they were chained with the same arguments.
+ */
+function chain() {
+  for (var _len = arguments.length, callbacks = new Array(_len), _key = 0; _key < _len; _key++) {
+    callbacks[_key] = arguments[_key];
+  }
+
+  return function () {
+    for (let callback of callbacks) {
+      if (typeof callback === 'function') {
+        callback(...arguments);
+      }
+    }
+  };
+}
+
+/**
+ * Merges multiple props objects together. Event handlers are chained,
+ * classNames are combined, and ids are deduplicated - different ids
+ * will trigger a side-effect and re-render components hooked up with `useId`.
+ * For all other props, the last prop object overrides all previous ones.
+ * @param args - Multiple sets of props to merge together.
+ */
+function mergeProps() {
+  let result = {};
+
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  for (let props of args) {
+    for (let key in result) {
+      // Chain events
+      if (/^on[A-Z]/.test(key) && typeof result[key] === 'function' && typeof props[key] === 'function') {
+        result[key] = chain(result[key], props[key]); // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
+      } else if (key === 'className' && typeof result.className === 'string' && typeof props.className === 'string') {
+        result[key] = clsx__default['default'](result.className, props.className);
+      } else if (key === 'UNSAFE_className' && typeof result.UNSAFE_className === 'string' && typeof props.UNSAFE_className === 'string') {
+        result[key] = clsx__default['default'](result.UNSAFE_className, props.UNSAFE_className);
+      } else if (key === 'id' && result.id && props.id) {
+        result.id = mergeIds(result.id, props.id); // Override others
+      } else {
+        result[key] = props[key] !== undefined ? props[key] : result[key];
+      }
+    } // Add props from b that are not in a
+
+
+    for (let key in props) {
+      if (result[key] === undefined) {
+        result[key] = props[key];
+      }
+    }
+  }
+
+  return result;
+}
+// Currently necessary for Safari and old Edge:
+// https://caniuse.com/#feat=mdn-api_htmlelement_focus_preventscroll_option
+// See https://bugs.webkit.org/show_bug.cgi?id=178583
+//
+// Original licensing for the following methods can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/calvellido/focus-options-polyfill
+function focusWithoutScrolling(element) {
+  if ($bc7c9c3af78f5218ff72cecce15730$var$supportsPreventScroll()) {
+    element.focus({
+      preventScroll: true
+    });
+  } else {
+    let scrollableElements = $bc7c9c3af78f5218ff72cecce15730$var$getScrollableElements(element);
+    element.focus();
+    $bc7c9c3af78f5218ff72cecce15730$var$restoreScrollPosition(scrollableElements);
+  }
+}
+let $bc7c9c3af78f5218ff72cecce15730$var$supportsPreventScrollCached = null;
+
+function $bc7c9c3af78f5218ff72cecce15730$var$supportsPreventScroll() {
+  if ($bc7c9c3af78f5218ff72cecce15730$var$supportsPreventScrollCached == null) {
+    $bc7c9c3af78f5218ff72cecce15730$var$supportsPreventScrollCached = false;
+
+    try {
+      var focusElem = document.createElement('div');
+      focusElem.focus({
+        get preventScroll() {
+          $bc7c9c3af78f5218ff72cecce15730$var$supportsPreventScrollCached = true;
+          return true;
+        }
+
+      });
+    } catch (e) {// Ignore
+    }
+  }
+
+  return $bc7c9c3af78f5218ff72cecce15730$var$supportsPreventScrollCached;
+}
+
+function $bc7c9c3af78f5218ff72cecce15730$var$getScrollableElements(element) {
+  var parent = element.parentNode;
+  var scrollableElements = [];
+  var rootScrollingElement = document.scrollingElement || document.documentElement;
+
+  while (parent instanceof HTMLElement && parent !== rootScrollingElement) {
+    if (parent.offsetHeight < parent.scrollHeight || parent.offsetWidth < parent.scrollWidth) {
+      scrollableElements.push({
+        element: parent,
+        scrollTop: parent.scrollTop,
+        scrollLeft: parent.scrollLeft
+      });
+    }
+
+    parent = parent.parentNode;
+  }
+
+  if (rootScrollingElement instanceof HTMLElement) {
+    scrollableElements.push({
+      element: rootScrollingElement,
+      scrollTop: rootScrollingElement.scrollTop,
+      scrollLeft: rootScrollingElement.scrollLeft
+    });
+  }
+
+  return scrollableElements;
+}
+
+function $bc7c9c3af78f5218ff72cecce15730$var$restoreScrollPosition(scrollableElements) {
+  for (let {
+    element,
+    scrollTop,
+    scrollLeft
+  } of scrollableElements) {
+    element.scrollTop = scrollTop;
+    element.scrollLeft = scrollLeft;
+  }
+}
+// mapped to a set of CSS properties that are transitioning for that element.
+// This is necessary rather than a simple count of transitions because of browser
+// bugs, e.g. Chrome sometimes fires both transitionend and transitioncancel rather
+// than one or the other. So we need to track what's actually transitioning so that
+// we can ignore these duplicate events.
+let $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionsByElement = new Map(); // A list of callbacks to call once there are no transitioning elements.
+
+let $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionCallbacks = new Set();
+
+function $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$setupGlobalEvents() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  let onTransitionStart = e => {
+    // Add the transitioning property to the list for this element.
+    let transitions = $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionsByElement.get(e.target);
+
+    if (!transitions) {
+      transitions = new Set();
+      $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionsByElement.set(e.target, transitions); // The transitioncancel event must be registered on the element itself, rather than as a global
+      // event. This enables us to handle when the node is deleted from the document while it is transitioning.
+      // In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
+
+      e.target.addEventListener('transitioncancel', onTransitionEnd);
+    }
+
+    transitions.add(e.propertyName);
+  };
+
+  let onTransitionEnd = e => {
+    // Remove property from list of transitioning properties.
+    let properties = $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionsByElement.get(e.target);
+
+    if (!properties) {
+      return;
+    }
+
+    properties.delete(e.propertyName); // If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
+
+    if (properties.size === 0) {
+      e.target.removeEventListener('transitioncancel', onTransitionEnd);
+      $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionsByElement.delete(e.target);
+    } // If no transitioning elements, call all of the queued callbacks.
+
+
+    if ($b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionsByElement.size === 0) {
+      for (let cb of $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionCallbacks) {
+        cb();
+      }
+
+      $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionCallbacks.clear();
+    }
+  };
+
+  document.body.addEventListener('transitionrun', onTransitionStart);
+  document.body.addEventListener('transitionend', onTransitionEnd);
+}
+
+if (typeof document !== 'undefined') {
+  if (document.readyState !== 'loading') {
+    $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$setupGlobalEvents();
+  } else {
+    document.addEventListener('DOMContentLoaded', $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$setupGlobalEvents);
+  }
+}
+
+function runAfterTransition(fn) {
+  // Wait one frame to see if an animation starts, e.g. a transition on mount.
+  requestAnimationFrame(() => {
+    // If no transitions are running, call the function immediately.
+    // Otherwise, add it to a list of callbacks to run at the end of the animation.
+    if ($b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionsByElement.size === 0) {
+      fn();
+    } else {
+      $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionCallbacks.add(fn);
+    }
+  });
+}
+function useGlobalListeners() {
+  let globalListeners = React.useRef(new Map());
+  let addGlobalListener = React.useCallback((eventTarget, type, listener, options) => {
+    globalListeners.current.set(listener, {
+      type,
+      eventTarget,
+      options
+    });
+    eventTarget.addEventListener(type, listener, options);
+  }, []);
+  let removeGlobalListener = React.useCallback((eventTarget, type, listener, options) => {
+    eventTarget.removeEventListener(type, listener, options);
+    globalListeners.current.delete(listener);
+  }, []);
+  let removeAllGlobalListeners = React.useCallback(() => {
+    globalListeners.current.forEach((value, key) => {
+      removeGlobalListener(value.eventTarget, value.type, key, value.options);
+    });
+  }, [removeGlobalListener]); // eslint-disable-next-line arrow-body-style
+
+  React.useEffect(() => {
+    return removeAllGlobalListeners;
+  }, [removeAllGlobalListeners]);
+  return {
+    addGlobalListener,
+    removeGlobalListener,
+    removeAllGlobalListeners
+  };
+}
+
+/**
+ * Merges aria-label and aria-labelledby into aria-labelledby when both exist.
+ * @param props - Aria label props.
+ * @param defaultLabel - Default value for aria-label when not present.
+ */
+function useLabels(props, defaultLabel) {
+  let {
+    id,
+    'aria-label': label,
+    'aria-labelledby': labelledBy
+  } = props; // If there is both an aria-label and aria-labelledby,
+  // combine them by pointing to the element itself.
+
+  id = useId(id);
+
+  if (labelledBy && label) {
+    let ids = new Set([...labelledBy.trim().split(/\s+/), id]);
+    labelledBy = [...ids].join(' ');
+  } else if (labelledBy) {
+    labelledBy = labelledBy.trim().split(/\s+/).join(' ');
+  } // If no labels are provided, use the default
+
+
+  if (!label && !labelledBy && defaultLabel) {
+    label = defaultLabel;
+  }
+
+  return {
+    id,
+    'aria-label': label,
+    'aria-labelledby': labelledBy
+  };
+}
+// Syncs ref from context with ref passed to hook
+function useSyncRef(context, ref) {
+  useLayoutEffect(() => {
+    if (context && context.ref && ref) {
+      context.ref.current = ref.current;
+      return () => {
+        context.ref.current = null;
+      };
+    }
+  }, [context, ref]);
+}
+
+function $b0986c1243f71db8e992f67117a1ed9$var$testPlatform(re) {
+  return typeof window !== 'undefined' && window.navigator != null ? re.test(window.navigator.platform) : false;
+}
+
+function isMac() {
+  return $b0986c1243f71db8e992f67117a1ed9$var$testPlatform(/^Mac/);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+let $e17c9db826984f8ab8e5d837bf0b8$var$state = 'default';
+let $e17c9db826984f8ab8e5d837bf0b8$var$savedUserSelect = '';
+
+function $e17c9db826984f8ab8e5d837bf0b8$export$disableTextSelection() {
+  if ($e17c9db826984f8ab8e5d837bf0b8$var$state === 'default') {
+    $e17c9db826984f8ab8e5d837bf0b8$var$savedUserSelect = document.documentElement.style.webkitUserSelect;
+    document.documentElement.style.webkitUserSelect = 'none';
+  }
+
+  $e17c9db826984f8ab8e5d837bf0b8$var$state = 'disabled';
+}
+
+function $e17c9db826984f8ab8e5d837bf0b8$export$restoreTextSelection() {
+  // If the state is already default, there's nothing to do.
+  // If it is restoring, then there's no need to queue a second restore.
+  if ($e17c9db826984f8ab8e5d837bf0b8$var$state !== 'disabled') {
+    return;
+  }
+
+  $e17c9db826984f8ab8e5d837bf0b8$var$state = 'restoring'; // There appears to be a delay on iOS where selection still might occur
+  // after pointer up, so wait a bit before removing user-select.
+
+  setTimeout(() => {
+    // Wait for any CSS transitions to complete so we don't recompute style
+    // for the whole page in the middle of the animation and cause jank.
+    runAfterTransition(() => {
+      // Avoid race conditions
+      if ($e17c9db826984f8ab8e5d837bf0b8$var$state === 'restoring') {
+        if (document.documentElement.style.webkitUserSelect === 'none') {
+          document.documentElement.style.webkitUserSelect = $e17c9db826984f8ab8e5d837bf0b8$var$savedUserSelect || '';
+        }
+
+        $e17c9db826984f8ab8e5d837bf0b8$var$savedUserSelect = '';
+        $e17c9db826984f8ab8e5d837bf0b8$var$state = 'default';
+      }
+    });
+  }, 300);
+}
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+// Original licensing for the following method can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/facebook/react/blob/3c713d513195a53788b3f8bb4b70279d68b15bcc/packages/react-interactions/events/src/dom/shared/index.js#L74-L87
+// Keyboards, Assistive Technologies, and element.click() all produce a "virtual"
+// click event. This is a method of inferring such clicks. Every browser except
+// IE 11 only sets a zero value of "detail" for click events that are "virtual".
+// However, IE 11 uses a zero value for all click events. For IE 11 we rely on
+// the quirk that it produces click events that are of type PointerEvent, and
+// where only the "virtual" click lacks a pointerType field.
+function $f67ef9f1b8ed09b4b00fd0840cd8b94b$export$isVirtualClick(event) {
+  // JAWS/NVDA with Firefox.
+  if (event.mozInputSource === 0 && event.isTrusted) {
+    return true;
+  }
+
+  return event.detail === 0 && !event.pointerType;
+}
+
+const $a3ff51240de6f955c79cf17a88e349$export$PressResponderContext = /*#__PURE__*/React__default['default'].createContext(null);
+
+$a3ff51240de6f955c79cf17a88e349$export$PressResponderContext.displayName = 'PressResponderContext';
+
+function $ffc54430b1dbeee65879852feaaff07d$var$usePressResponderContext(props) {
+  // Consume context from <PressResponder> and merge with props.
+  let context = React.useContext($a3ff51240de6f955c79cf17a88e349$export$PressResponderContext);
+
+  if (context) {
+    let {
+      register
+    } = context,
+        contextProps = _objectWithoutPropertiesLoose(context, ["register"]);
+
+    props = mergeProps(contextProps, props);
+    register();
+  }
+
+  useSyncRef(context, props.ref);
+  return props;
+}
+/**
+ * Handles press interactions across mouse, touch, keyboard, and screen readers.
+ * It normalizes behavior across browsers and platforms, and handles many nuances
+ * of dealing with pointer and keyboard events.
+ */
+
+
+function usePress(props) {
+  let _usePressResponderCon = $ffc54430b1dbeee65879852feaaff07d$var$usePressResponderContext(props),
+      {
+    onPress,
+    onPressChange,
+    onPressStart,
+    onPressEnd,
+    onPressUp,
+    isDisabled,
+    isPressed: isPressedProp,
+    preventFocusOnPress
+  } = _usePressResponderCon,
+      domProps = _objectWithoutPropertiesLoose(_usePressResponderCon, ["onPress", "onPressChange", "onPressStart", "onPressEnd", "onPressUp", "isDisabled", "isPressed", "preventFocusOnPress", "ref"]);
+
+  let propsRef = React.useRef(null);
+  propsRef.current = {
+    onPress,
+    onPressChange,
+    onPressStart,
+    onPressEnd,
+    onPressUp,
+    isDisabled
+  };
+  let [isPressed, setPressed] = React.useState(false);
+  let ref = React.useRef({
+    isPressed: false,
+    ignoreEmulatedMouseEvents: false,
+    ignoreClickAfterPress: false,
+    didFirePressStart: false,
+    activePointerId: null,
+    target: null,
+    isOverTarget: false,
+    pointerType: null
+  });
+  let {
+    addGlobalListener,
+    removeAllGlobalListeners
+  } = useGlobalListeners();
+  let pressProps = React.useMemo(() => {
+    let state = ref.current;
+
+    let triggerPressStart = (originalEvent, pointerType) => {
+      let {
+        onPressStart,
+        onPressChange,
+        isDisabled
+      } = propsRef.current;
+
+      if (isDisabled || state.didFirePressStart) {
+        return;
+      }
+
+      if (onPressStart) {
+        onPressStart({
+          type: 'pressstart',
+          pointerType,
+          target: originalEvent.currentTarget,
+          shiftKey: originalEvent.shiftKey,
+          metaKey: originalEvent.metaKey,
+          ctrlKey: originalEvent.ctrlKey
+        });
+      }
+
+      if (onPressChange) {
+        onPressChange(true);
+      }
+
+      state.didFirePressStart = true;
+      setPressed(true);
+    };
+
+    let triggerPressEnd = function triggerPressEnd(originalEvent, pointerType, wasPressed) {
+      if (wasPressed === void 0) {
+        wasPressed = true;
+      }
+
+      let {
+        onPressEnd,
+        onPressChange,
+        onPress,
+        isDisabled
+      } = propsRef.current;
+
+      if (!state.didFirePressStart) {
+        return;
+      }
+
+      state.ignoreClickAfterPress = true;
+      state.didFirePressStart = false;
+
+      if (onPressEnd) {
+        onPressEnd({
+          type: 'pressend',
+          pointerType,
+          target: originalEvent.currentTarget,
+          shiftKey: originalEvent.shiftKey,
+          metaKey: originalEvent.metaKey,
+          ctrlKey: originalEvent.ctrlKey
+        });
+      }
+
+      if (onPressChange) {
+        onPressChange(false);
+      }
+
+      setPressed(false);
+
+      if (onPress && wasPressed && !isDisabled) {
+        onPress({
+          type: 'press',
+          pointerType,
+          target: originalEvent.currentTarget,
+          shiftKey: originalEvent.shiftKey,
+          metaKey: originalEvent.metaKey,
+          ctrlKey: originalEvent.ctrlKey
+        });
+      }
+    };
+
+    let triggerPressUp = (originalEvent, pointerType) => {
+      let {
+        onPressUp,
+        isDisabled
+      } = propsRef.current;
+
+      if (isDisabled) {
+        return;
+      }
+
+      if (onPressUp) {
+        onPressUp({
+          type: 'pressup',
+          pointerType,
+          target: originalEvent.currentTarget,
+          shiftKey: originalEvent.shiftKey,
+          metaKey: originalEvent.metaKey,
+          ctrlKey: originalEvent.ctrlKey
+        });
+      }
+    };
+
+    let cancel = e => {
+      if (state.isPressed) {
+        if (state.isOverTarget) {
+          triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), state.pointerType, false);
+        }
+
+        state.isPressed = false;
+        state.isOverTarget = false;
+        state.activePointerId = null;
+        state.pointerType = null;
+        removeAllGlobalListeners();
+        $e17c9db826984f8ab8e5d837bf0b8$export$restoreTextSelection();
+      }
+    };
+
+    let pressProps = {
+      onKeyDown(e) {
+        if ($ffc54430b1dbeee65879852feaaff07d$var$isValidKeyboardEvent(e.nativeEvent) && e.currentTarget.contains(e.target)) {
+          e.preventDefault();
+          e.stopPropagation(); // If the event is repeating, it may have started on a different element
+          // after which focus moved to the current element. Ignore these events and
+          // only handle the first key down event.
+
+          if (!state.isPressed && !e.repeat) {
+            state.target = e.currentTarget;
+            state.isPressed = true;
+            triggerPressStart(e, 'keyboard'); // Focus may move before the key up event, so register the event on the document
+            // instead of the same element where the key down event occurred.
+
+            addGlobalListener(document, 'keyup', onKeyUp, false);
+          }
+        }
+      },
+
+      onKeyUp(e) {
+        if ($ffc54430b1dbeee65879852feaaff07d$var$isValidKeyboardEvent(e.nativeEvent) && !e.repeat && e.currentTarget.contains(e.target)) {
+          triggerPressUp($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), 'keyboard');
+        }
+      },
+
+      onClick(e) {
+        if (e && !e.currentTarget.contains(e.target)) {
+          return;
+        }
+
+        if (e && e.button === 0) {
+          e.stopPropagation();
+
+          if (isDisabled) {
+            e.preventDefault();
+          } // If triggered from a screen reader or by using element.click(),
+          // trigger as if it were a keyboard click.
+
+
+          if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && $f67ef9f1b8ed09b4b00fd0840cd8b94b$export$isVirtualClick(e.nativeEvent)) {
+            // Ensure the element receives focus (VoiceOver on iOS does not do this)
+            if (!isDisabled && !preventFocusOnPress) {
+              focusWithoutScrolling(e.currentTarget);
+            }
+
+            triggerPressStart(e, 'virtual');
+            triggerPressUp(e, 'virtual');
+            triggerPressEnd(e, 'virtual');
+          }
+
+          state.ignoreEmulatedMouseEvents = false;
+          state.ignoreClickAfterPress = false;
+        }
+      }
+
+    };
+
+    let onKeyUp = e => {
+      if (state.isPressed && $ffc54430b1dbeee65879852feaaff07d$var$isValidKeyboardEvent(e)) {
+        e.preventDefault();
+        e.stopPropagation();
+        state.isPressed = false;
+        triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), 'keyboard', e.target === state.target);
+        removeAllGlobalListeners(); // If the target is a link, trigger the click method to open the URL,
+        // but defer triggering pressEnd until onClick event handler.
+
+        if (e.target === state.target && $ffc54430b1dbeee65879852feaaff07d$var$isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link') {
+          state.target.click();
+        }
+      }
+    };
+
+    if (typeof PointerEvent !== 'undefined') {
+      pressProps.onPointerDown = e => {
+        // Only handle left clicks, and ignore events that bubbled through portals.
+        if (e.button !== 0 || !e.currentTarget.contains(e.target)) {
+          return;
+        } // Due to browser inconsistencies, especially on mobile browsers, we prevent
+        // default on pointer down and handle focusing the pressable element ourselves.
+
+
+        if ($ffc54430b1dbeee65879852feaaff07d$var$shouldPreventDefault(e.target)) {
+          e.preventDefault();
+        } // iOS safari fires pointer events from VoiceOver (but only when outside an iframe...)
+        // https://bugs.webkit.org/show_bug.cgi?id=222627
+
+
+        state.pointerType = $ffc54430b1dbeee65879852feaaff07d$var$isVirtualPointerEvent(e.nativeEvent) ? 'virtual' : e.pointerType;
+        e.stopPropagation();
+
+        if (!state.isPressed) {
+          state.isPressed = true;
+          state.isOverTarget = true;
+          state.activePointerId = e.pointerId;
+          state.target = e.currentTarget;
+
+          if (!isDisabled && !preventFocusOnPress) {
+            focusWithoutScrolling(e.currentTarget);
+          }
+
+          $e17c9db826984f8ab8e5d837bf0b8$export$disableTextSelection();
+          triggerPressStart(e, state.pointerType);
+          addGlobalListener(document, 'pointermove', onPointerMove, false);
+          addGlobalListener(document, 'pointerup', onPointerUp, false);
+          addGlobalListener(document, 'pointercancel', onPointerCancel, false);
+        }
+      };
+
+      pressProps.onMouseDown = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+
+        if (e.button === 0) {
+          // Chrome and Firefox on touch Windows devices require mouse down events
+          // to be canceled in addition to pointer events, or an extra asynchronous
+          // focus event will be fired.
+          if ($ffc54430b1dbeee65879852feaaff07d$var$shouldPreventDefault(e.target)) {
+            e.preventDefault();
+          }
+
+          e.stopPropagation();
+        }
+      };
+
+      pressProps.onPointerUp = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        } // Only handle left clicks
+        // Safari on iOS sometimes fires pointerup events, even
+        // when the touch isn't over the target, so double check.
+
+
+        if (e.button === 0 && $ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(e, e.currentTarget)) {
+          triggerPressUp(e, state.pointerType);
+        }
+      }; // Safari on iOS < 13.2 does not implement pointerenter/pointerleave events correctly.
+      // Use pointer move events instead to implement our own hit testing.
+      // See https://bugs.webkit.org/show_bug.cgi?id=199803
+
+
+      let onPointerMove = e => {
+        if (e.pointerId !== state.activePointerId) {
+          return;
+        }
+
+        if ($ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(e, state.target)) {
+          if (!state.isOverTarget) {
+            state.isOverTarget = true;
+            triggerPressStart($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), state.pointerType);
+          }
+        } else if (state.isOverTarget) {
+          state.isOverTarget = false;
+          triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), state.pointerType, false);
+        }
+      };
+
+      let onPointerUp = e => {
+        if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0) {
+          if ($ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(e, state.target)) {
+            triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), state.pointerType);
+          } else if (state.isOverTarget) {
+            triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), state.pointerType, false);
+          }
+
+          state.isPressed = false;
+          state.isOverTarget = false;
+          state.activePointerId = null;
+          state.pointerType = null;
+          removeAllGlobalListeners();
+          $e17c9db826984f8ab8e5d837bf0b8$export$restoreTextSelection();
+        }
+      };
+
+      let onPointerCancel = e => {
+        cancel(e);
+      };
+
+      pressProps.onDragStart = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        } // Safari does not call onPointerCancel when a drag starts, whereas Chrome and Firefox do.
+
+
+        cancel(e);
+      };
+    } else {
+      pressProps.onMouseDown = e => {
+        // Only handle left clicks
+        if (e.button !== 0 || !e.currentTarget.contains(e.target)) {
+          return;
+        } // Due to browser inconsistencies, especially on mobile browsers, we prevent
+        // default on mouse down and handle focusing the pressable element ourselves.
+
+
+        if ($ffc54430b1dbeee65879852feaaff07d$var$shouldPreventDefault(e.target)) {
+          e.preventDefault();
+        }
+
+        e.stopPropagation();
+
+        if (state.ignoreEmulatedMouseEvents) {
+          return;
+        }
+
+        state.isPressed = true;
+        state.isOverTarget = true;
+        state.target = e.currentTarget;
+        state.pointerType = $f67ef9f1b8ed09b4b00fd0840cd8b94b$export$isVirtualClick(e.nativeEvent) ? 'virtual' : 'mouse';
+
+        if (!isDisabled && !preventFocusOnPress) {
+          focusWithoutScrolling(e.currentTarget);
+        }
+
+        triggerPressStart(e, state.pointerType);
+        addGlobalListener(document, 'mouseup', onMouseUp, false);
+      };
+
+      pressProps.onMouseEnter = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+
+        e.stopPropagation();
+
+        if (state.isPressed && !state.ignoreEmulatedMouseEvents) {
+          state.isOverTarget = true;
+          triggerPressStart(e, state.pointerType);
+        }
+      };
+
+      pressProps.onMouseLeave = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+
+        e.stopPropagation();
+
+        if (state.isPressed && !state.ignoreEmulatedMouseEvents) {
+          state.isOverTarget = false;
+          triggerPressEnd(e, state.pointerType, false);
+        }
+      };
+
+      pressProps.onMouseUp = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+
+        if (!state.ignoreEmulatedMouseEvents && e.button === 0) {
+          triggerPressUp(e, state.pointerType);
+        }
+      };
+
+      let onMouseUp = e => {
+        // Only handle left clicks
+        if (e.button !== 0) {
+          return;
+        }
+
+        state.isPressed = false;
+        removeAllGlobalListeners();
+
+        if (state.ignoreEmulatedMouseEvents) {
+          state.ignoreEmulatedMouseEvents = false;
+          return;
+        }
+
+        if ($ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(e, state.target)) {
+          triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), state.pointerType);
+        } else if (state.isOverTarget) {
+          triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), state.pointerType, false);
+        }
+
+        state.isOverTarget = false;
+      };
+
+      pressProps.onTouchStart = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+
+        e.stopPropagation();
+        let touch = $ffc54430b1dbeee65879852feaaff07d$var$getTouchFromEvent(e.nativeEvent);
+
+        if (!touch) {
+          return;
+        }
+
+        state.activePointerId = touch.identifier;
+        state.ignoreEmulatedMouseEvents = true;
+        state.isOverTarget = true;
+        state.isPressed = true;
+        state.target = e.currentTarget;
+        state.pointerType = 'touch'; // Due to browser inconsistencies, especially on mobile browsers, we prevent default
+        // on the emulated mouse event and handle focusing the pressable element ourselves.
+
+        if (!isDisabled && !preventFocusOnPress) {
+          focusWithoutScrolling(e.currentTarget);
+        }
+
+        $e17c9db826984f8ab8e5d837bf0b8$export$disableTextSelection();
+        triggerPressStart(e, state.pointerType);
+        addGlobalListener(window, 'scroll', onScroll, true);
+      };
+
+      pressProps.onTouchMove = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+
+        e.stopPropagation();
+
+        if (!state.isPressed) {
+          return;
+        }
+
+        let touch = $ffc54430b1dbeee65879852feaaff07d$var$getTouchById(e.nativeEvent, state.activePointerId);
+
+        if (touch && $ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(touch, e.currentTarget)) {
+          if (!state.isOverTarget) {
+            state.isOverTarget = true;
+            triggerPressStart(e, state.pointerType);
+          }
+        } else if (state.isOverTarget) {
+          state.isOverTarget = false;
+          triggerPressEnd(e, state.pointerType, false);
+        }
+      };
+
+      pressProps.onTouchEnd = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+
+        e.stopPropagation();
+
+        if (!state.isPressed) {
+          return;
+        }
+
+        let touch = $ffc54430b1dbeee65879852feaaff07d$var$getTouchById(e.nativeEvent, state.activePointerId);
+
+        if (touch && $ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(touch, e.currentTarget)) {
+          triggerPressUp(e, state.pointerType);
+          triggerPressEnd(e, state.pointerType);
+        } else if (state.isOverTarget) {
+          triggerPressEnd(e, state.pointerType, false);
+        }
+
+        state.isPressed = false;
+        state.activePointerId = null;
+        state.isOverTarget = false;
+        state.ignoreEmulatedMouseEvents = true;
+        $e17c9db826984f8ab8e5d837bf0b8$export$restoreTextSelection();
+        removeAllGlobalListeners();
+      };
+
+      pressProps.onTouchCancel = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+
+        e.stopPropagation();
+
+        if (state.isPressed) {
+          cancel(e);
+        }
+      };
+
+      let onScroll = e => {
+        if (state.isPressed && e.target.contains(state.target)) {
+          cancel({
+            currentTarget: state.target,
+            shiftKey: false,
+            ctrlKey: false,
+            metaKey: false
+          });
+        }
+      };
+
+      pressProps.onDragStart = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+
+        cancel(e);
+      };
+    }
+
+    return pressProps;
+  }, [addGlobalListener, isDisabled, preventFocusOnPress, removeAllGlobalListeners]); // Remove user-select: none in case component unmounts immediately after pressStart
+  // eslint-disable-next-line arrow-body-style
+
+  React.useEffect(() => {
+    return () => $e17c9db826984f8ab8e5d837bf0b8$export$restoreTextSelection();
+  }, []);
+  return {
+    isPressed: isPressedProp || isPressed,
+    pressProps: mergeProps(domProps, pressProps)
+  };
+}
+
+function $ffc54430b1dbeee65879852feaaff07d$var$isHTMLAnchorLink(target) {
+  return target.tagName === 'A' && target.hasAttribute('href');
+}
+
+function $ffc54430b1dbeee65879852feaaff07d$var$isValidKeyboardEvent(event) {
+  const {
+    key,
+    target
+  } = event;
+  const element = target;
+  const {
+    tagName,
+    isContentEditable
+  } = element;
+  const role = element.getAttribute('role'); // Accessibility for keyboards. Space and Enter only.
+  // "Spacebar" is for IE 11
+
+  return (key === 'Enter' || key === ' ' || key === 'Spacebar') && tagName !== 'INPUT' && tagName !== 'TEXTAREA' && isContentEditable !== true && ( // A link with a valid href should be handled natively,
+  // unless it also has role='button' and was triggered using Space.
+  !$ffc54430b1dbeee65879852feaaff07d$var$isHTMLAnchorLink(element) || role === 'button' && key !== 'Enter') && // An element with role='link' should only trigger with Enter key
+  !(role === 'link' && key !== 'Enter');
+}
+
+function $ffc54430b1dbeee65879852feaaff07d$var$getTouchFromEvent(event) {
+  const {
+    targetTouches
+  } = event;
+
+  if (targetTouches.length > 0) {
+    return targetTouches[0];
+  }
+
+  return null;
+}
+
+function $ffc54430b1dbeee65879852feaaff07d$var$getTouchById(event, pointerId) {
+  const changedTouches = event.changedTouches;
+
+  for (let i = 0; i < changedTouches.length; i++) {
+    const touch = changedTouches[i];
+
+    if (touch.identifier === pointerId) {
+      return touch;
+    }
+  }
+
+  return null;
+}
+
+function $ffc54430b1dbeee65879852feaaff07d$var$createEvent(target, e) {
+  return {
+    currentTarget: target,
+    shiftKey: e.shiftKey,
+    ctrlKey: e.ctrlKey,
+    metaKey: e.metaKey
+  };
+}
+
+function $ffc54430b1dbeee65879852feaaff07d$var$getPointClientRect(point) {
+  let offsetX = point.width / 2 || point.radiusX || 0;
+  let offsetY = point.height / 2 || point.radiusY || 0;
+  return {
+    top: point.clientY - offsetY,
+    right: point.clientX + offsetX,
+    bottom: point.clientY + offsetY,
+    left: point.clientX - offsetX
+  };
+}
+
+function $ffc54430b1dbeee65879852feaaff07d$var$areRectanglesOverlapping(a, b) {
+  // check if they cannot overlap on x axis
+  if (a.left > b.right || b.left > a.right) {
+    return false;
+  } // check if they cannot overlap on y axis
+
+
+  if (a.top > b.bottom || b.top > a.bottom) {
+    return false;
+  }
+
+  return true;
+}
+
+function $ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(point, target) {
+  let rect = target.getBoundingClientRect();
+  let pointRect = $ffc54430b1dbeee65879852feaaff07d$var$getPointClientRect(point);
+  return $ffc54430b1dbeee65879852feaaff07d$var$areRectanglesOverlapping(rect, pointRect);
+}
+
+function $ffc54430b1dbeee65879852feaaff07d$var$shouldPreventDefault(target) {
+  // We cannot prevent default if the target is inside a draggable element.
+  return !target.closest('[draggable="true"]');
+}
+
+function $ffc54430b1dbeee65879852feaaff07d$var$isVirtualPointerEvent(event) {
+  // If the pointer size is zero, then we assume it's from a screen reader.
+  return event.width === 0 && event.height === 0;
+}
+let $d01f69bb2ab5f70dfd0005370a2a2cbc$var$currentModality = null;
+let $d01f69bb2ab5f70dfd0005370a2a2cbc$var$changeHandlers = new Set();
+let $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasSetupGlobalListeners = false;
+let $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = false;
+let $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasBlurredWindowRecently = false; // Only Tab or Esc keys will make focus visible on text input elements
+
+function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$triggerChangeHandlers(modality, e) {
+  for (let handler of $d01f69bb2ab5f70dfd0005370a2a2cbc$var$changeHandlers) {
+    handler(modality, e);
+  }
+}
+/**
+ * Helper function to determine if a KeyboardEvent is unmodified and could make keyboard focus styles visible.
+ */
+
+
+function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$isValidKey(e) {
+  // Control and Shift keys trigger when navigating back to the tab with keyboard.
+  return !(e.metaKey || !isMac() && e.altKey || e.ctrlKey || e.type === 'keyup' && (e.key === 'Control' || e.key === 'Shift'));
+}
+
+function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleKeyboardEvent(e) {
+  $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = true;
+
+  if ($d01f69bb2ab5f70dfd0005370a2a2cbc$var$isValidKey(e)) {
+    $d01f69bb2ab5f70dfd0005370a2a2cbc$var$currentModality = 'keyboard';
+    $d01f69bb2ab5f70dfd0005370a2a2cbc$var$triggerChangeHandlers('keyboard', e);
+  }
+}
+
+function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handlePointerEvent(e) {
+  $d01f69bb2ab5f70dfd0005370a2a2cbc$var$currentModality = 'pointer';
+
+  if (e.type === 'mousedown' || e.type === 'pointerdown') {
+    $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = true;
+    $d01f69bb2ab5f70dfd0005370a2a2cbc$var$triggerChangeHandlers('pointer', e);
+  }
+}
+
+function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleClickEvent(e) {
+  if ($f67ef9f1b8ed09b4b00fd0840cd8b94b$export$isVirtualClick(e)) {
+    $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = true;
+    $d01f69bb2ab5f70dfd0005370a2a2cbc$var$currentModality = 'virtual';
+  }
+}
+
+function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleFocusEvent(e) {
+  // Firefox fires two extra focus events when the user first clicks into an iframe:
+  // first on the window, then on the document. We ignore these events so they don't
+  // cause keyboard focus rings to appear.
+  if (e.target === window || e.target === document) {
+    return;
+  } // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.
+  // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
+
+
+  if (!$d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus && !$d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasBlurredWindowRecently) {
+    $d01f69bb2ab5f70dfd0005370a2a2cbc$var$currentModality = 'virtual';
+    $d01f69bb2ab5f70dfd0005370a2a2cbc$var$triggerChangeHandlers('virtual', e);
+  }
+
+  $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = false;
+  $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasBlurredWindowRecently = false;
+}
+
+function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleWindowBlur() {
+  // When the window is blurred, reset state. This is necessary when tabbing out of the window,
+  // for example, since a subsequent focus event won't be fired.
+  $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = false;
+  $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasBlurredWindowRecently = true;
+}
+/**
+ * Setup global event listeners to control when keyboard focus style should be visible.
+ */
+
+
+function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$setupGlobalFocusEvents() {
+  if (typeof window === 'undefined' || $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasSetupGlobalListeners) {
+    return;
+  } // Programmatic focus() calls shouldn't affect the current input modality.
+  // However, we need to detect other cases when a focus event occurs without
+  // a preceding user event (e.g. screen reader focus). Overriding the focus
+  // method on HTMLElement.prototype is a bit hacky, but works.
+
+
+  let focus = HTMLElement.prototype.focus;
+
+  HTMLElement.prototype.focus = function () {
+    $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = true;
+    focus.apply(this, arguments);
+  };
+
+  document.addEventListener('keydown', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleKeyboardEvent, true);
+  document.addEventListener('keyup', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleKeyboardEvent, true);
+  document.addEventListener('click', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleClickEvent, true); // Register focus events on the window so they are sure to happen
+  // before React's event listeners (registered on the document).
+
+  window.addEventListener('focus', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleFocusEvent, true);
+  window.addEventListener('blur', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleWindowBlur, false);
+
+  if (typeof PointerEvent !== 'undefined') {
+    document.addEventListener('pointerdown', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handlePointerEvent, true);
+    document.addEventListener('pointermove', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handlePointerEvent, true);
+    document.addEventListener('pointerup', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handlePointerEvent, true);
+  } else {
+    document.addEventListener('mousedown', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handlePointerEvent, true);
+    document.addEventListener('mousemove', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handlePointerEvent, true);
+    document.addEventListener('mouseup', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handlePointerEvent, true);
+  }
+
+  $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasSetupGlobalListeners = true;
+}
+
+if (typeof document !== 'undefined') {
+  if (document.readyState !== 'loading') {
+    $d01f69bb2ab5f70dfd0005370a2a2cbc$var$setupGlobalFocusEvents();
+  } else {
+    document.addEventListener('DOMContentLoaded', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$setupGlobalFocusEvents);
+  }
+}
+function getInteractionModality() {
+  return $d01f69bb2ab5f70dfd0005370a2a2cbc$var$currentModality;
+}
+
+/**
+ * A utility function that focuses an element while avoiding undesired side effects such
+ * as page scrolling and screen reader issues with CSS transitions.
+ */
+function focusSafely(element) {
+  // If the user is interacting with a virtual cursor, e.g. screen reader, then
+  // wait until after any animated transitions that are currently occurring on
+  // the page before shifting focus. This avoids issues with VoiceOver on iOS
+  // causing the page to scroll when moving focus if the element is transitioning
+  // from off the screen.
+  if (getInteractionModality() === 'virtual') {
+    let lastFocusedElement = document.activeElement;
+    runAfterTransition(() => {
+      // If focus did not move and the element is still in the document, focus it.
+      if (document.activeElement === lastFocusedElement && document.contains(element)) {
+        focusWithoutScrolling(element);
+      }
+    });
+  } else {
+    focusWithoutScrolling(element);
+  }
+}
+
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+function $ee5e90cbb4a22466973155c14222fa1$var$isStyleVisible(element) {
+  if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {
+    return false;
+  }
+
+  let {
+    display,
+    visibility
+  } = element.style;
+  let isVisible = display !== 'none' && visibility !== 'hidden' && visibility !== 'collapse';
+
+  if (isVisible) {
+    const {
+      getComputedStyle
+    } = element.ownerDocument.defaultView;
+    let {
+      display: computedDisplay,
+      visibility: computedVisibility
+    } = getComputedStyle(element);
+    isVisible = computedDisplay !== 'none' && computedVisibility !== 'hidden' && computedVisibility !== 'collapse';
+  }
+
+  return isVisible;
+}
+
+function $ee5e90cbb4a22466973155c14222fa1$var$isAttributeVisible(element, childElement) {
+  return !element.hasAttribute('hidden') && (element.nodeName === 'DETAILS' && childElement && childElement.nodeName !== 'SUMMARY' ? element.hasAttribute('open') : true);
+}
+/**
+ * Adapted from https://github.com/testing-library/jest-dom and 
+ * https://github.com/vuejs/vue-test-utils-next/.
+ * Licensed under the MIT License.
+ * @param element - Element to evaluate for display or visibility.
+ */
+
+
+function $ee5e90cbb4a22466973155c14222fa1$export$isElementVisible(element, childElement) {
+  return element.nodeName !== '#comment' && $ee5e90cbb4a22466973155c14222fa1$var$isStyleVisible(element) && $ee5e90cbb4a22466973155c14222fa1$var$isAttributeVisible(element, childElement) && (!element.parentElement || $ee5e90cbb4a22466973155c14222fa1$export$isElementVisible(element.parentElement, element));
+}
+
+const $c9e8f80f5bb1841844f54e4ad30b$var$focusableElements = ['input:not([disabled]):not([type=hidden])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'a[href]', 'area[href]', 'summary', 'iframe', 'object', 'embed', 'audio[controls]', 'video[controls]', '[contenteditable]'];
+const $c9e8f80f5bb1841844f54e4ad30b$var$FOCUSABLE_ELEMENT_SELECTOR = $c9e8f80f5bb1841844f54e4ad30b$var$focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';
+$c9e8f80f5bb1841844f54e4ad30b$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
+const $c9e8f80f5bb1841844f54e4ad30b$var$TABBABLE_ELEMENT_SELECTOR = $c9e8f80f5bb1841844f54e4ad30b$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
+
+const $c9e8f80f5bb1841844f54e4ad30b$var$focusScopeDataAttrNames = ['data-focus-scope-start', 'data-focus-scope-end'];
+
+function $c9e8f80f5bb1841844f54e4ad30b$var$isFocusScopeDirectChild(scope) {
+  return $c9e8f80f5bb1841844f54e4ad30b$var$focusScopeDataAttrNames.some(name => scope.getAttribute(name) !== null);
+}
+
+function $c9e8f80f5bb1841844f54e4ad30b$var$isFocusScopeNestedChild(scope) {
+  return $c9e8f80f5bb1841844f54e4ad30b$var$focusScopeDataAttrNames.some(name => scope.querySelector("[" + name + "]"));
+}
+
+function $c9e8f80f5bb1841844f54e4ad30b$var$isFocusScopeInScope(scopes) {
+  return scopes.some(scope => $c9e8f80f5bb1841844f54e4ad30b$var$isFocusScopeDirectChild(scope) || $c9e8f80f5bb1841844f54e4ad30b$var$isFocusScopeNestedChild(scope));
+}
+
+function $c9e8f80f5bb1841844f54e4ad30b$var$isElementInScope(element, scope) {
+  return !$c9e8f80f5bb1841844f54e4ad30b$var$isFocusScopeInScope(scope) && scope.some(node => node.contains(element));
+}
+/**
+ * Create a [TreeWalker]{@link https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker}
+ * that matches all focusable/tabbable elements.
+ */
+
+
+function getFocusableTreeWalker(root, opts, scope) {
+  let selector = opts != null && opts.tabbable ? $c9e8f80f5bb1841844f54e4ad30b$var$TABBABLE_ELEMENT_SELECTOR : $c9e8f80f5bb1841844f54e4ad30b$var$FOCUSABLE_ELEMENT_SELECTOR;
+  let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+    acceptNode(node) {
+      var _opts$from;
+
+      // Skip nodes inside the starting node.
+      if (opts != null && (_opts$from = opts.from) != null && _opts$from.contains(node)) {
+        return NodeFilter.FILTER_REJECT;
+      }
+
+      if (node.matches(selector) && $ee5e90cbb4a22466973155c14222fa1$export$isElementVisible(node) && (!scope || $c9e8f80f5bb1841844f54e4ad30b$var$isElementInScope(node, scope))) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+
+      return NodeFilter.FILTER_SKIP;
+    }
+
+  });
+
+  if (opts != null && opts.from) {
+    walker.currentNode = opts.from;
+  }
+
+  return walker;
+}
+
+function _extends$1() {
+  _extends$1 = 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$1.apply(this, arguments);
+}
+
+/**
+ * Handles typeahead interactions with collections.
+ */
+function useTypeSelect(options) {
+  let {
+    keyboardDelegate,
+    selectionManager,
+    onTypeSelect
+  } = options;
+  let state = React.useRef({
+    search: '',
+    timeout: null
+  }).current;
+
+  let onKeyDown = e => {
+    let character = $c78d7fa5f7d5832f9b4f97b33a679865$var$getStringForKey(e.key);
+
+    if (!character || e.ctrlKey || e.metaKey) {
+      return;
+    } // Do not propagate the Spacebar event if it's meant to be part of the search.
+    // When we time out, the search term becomes empty, hence the check on length.
+    // Trimming is to account for the case of pressing the Spacebar more than once,
+    // which should cycle through the selection/deselection of the focused item.
+
+
+    if (character === ' ' && state.search.trim().length > 0) {
+      e.preventDefault();
+
+      if (!('continuePropagation' in e)) {
+        e.stopPropagation();
+      }
+    }
+
+    state.search += character; // Use the delegate to find a key to focus.
+    // Prioritize items after the currently focused item, falling back to searching the whole list.
+
+    let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey); // If no key found, search from the top.
+
+    if (key == null) {
+      key = keyboardDelegate.getKeyForSearch(state.search);
+    }
+
+    if (key != null) {
+      selectionManager.setFocusedKey(key);
+
+      if (onTypeSelect) {
+        onTypeSelect(key);
+      }
+    }
+
+    clearTimeout(state.timeout);
+    state.timeout = setTimeout(() => {
+      state.search = '';
+    }, 500);
+  };
+
+  return {
+    typeSelectProps: {
+      // Using a capturing listener to catch the keydown event before
+      // other hooks in order to handle the Spacebar event.
+      onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : null
+    }
+  };
+}
+
+function $c78d7fa5f7d5832f9b4f97b33a679865$var$getStringForKey(key) {
+  // If the key is of length 1, it is an ASCII value.
+  // Otherwise, if there are no ASCII characters in the key name,
+  // it is a Unicode character.
+  // See https://www.w3.org/TR/uievents-key/
+  if (key.length === 1 || !/^[A-Z]/i.test(key)) {
+    return key;
+  }
+
+  return '';
+}
+
+function $a9b9aa71af07c56ab1d89ca45381f4b$var$isCtrlKeyPressed(e) {
+  if (isMac()) {
+    return e.metaKey;
+  }
+
+  return e.ctrlKey;
+}
+
+/**
+ * Handles interactions with selectable collections.
+ */
+function useSelectableCollection(options) {
+  let {
+    selectionManager: manager,
+    keyboardDelegate: delegate,
+    ref,
+    autoFocus = false,
+    shouldFocusWrap = false,
+    disallowEmptySelection = false,
+    disallowSelectAll = false,
+    selectOnFocus = false,
+    disallowTypeAhead = false,
+    shouldUseVirtualFocus,
+    allowsTabNavigation = false
+  } = options;
+  let {
+    direction
+  } = useLocale();
+
+  let onKeyDown = e => {
+    // Prevent option + tab from doing anything since it doesn't move focus to the cells, only buttons/checkboxes
+    if (e.altKey && e.key === 'Tab') {
+      e.preventDefault();
+    } // Let child element (e.g. menu button) handle the event if the Alt key is pressed.
+    // Keyboard events bubble through portals. Don't handle keyboard events
+    // for elements outside the collection (e.g. menus).
+
+
+    if (e.altKey || !ref.current.contains(e.target)) {
+      return;
+    }
+
+    const navigateToKey = (key, childFocus) => {
+      if (key != null) {
+        manager.setFocusedKey(key, childFocus);
+
+        if (e.shiftKey && manager.selectionMode === 'multiple') {
+          manager.extendSelection(key);
+        } else if (selectOnFocus) {
+          manager.replaceSelection(key);
+        }
+      }
+    };
+
+    switch (e.key) {
+      case 'ArrowDown':
+        {
+          if (delegate.getKeyBelow) {
+            e.preventDefault();
+            let nextKey = manager.focusedKey != null ? delegate.getKeyBelow(manager.focusedKey) : delegate.getFirstKey == null ? void 0 : delegate.getFirstKey();
+
+            if (nextKey == null && shouldFocusWrap) {
+              nextKey = delegate.getFirstKey == null ? void 0 : delegate.getFirstKey(manager.focusedKey);
+            }
+
+            navigateToKey(nextKey);
+          }
+
+          break;
+        }
+
+      case 'ArrowUp':
+        {
+          if (delegate.getKeyAbove) {
+            e.preventDefault();
+            let nextKey = manager.focusedKey != null ? delegate.getKeyAbove(manager.focusedKey) : delegate.getLastKey == null ? void 0 : delegate.getLastKey();
+
+            if (nextKey == null && shouldFocusWrap) {
+              nextKey = delegate.getLastKey == null ? void 0 : delegate.getLastKey(manager.focusedKey);
+            }
+
+            navigateToKey(nextKey);
+          }
+
+          break;
+        }
+
+      case 'ArrowLeft':
+        {
+          if (delegate.getKeyLeftOf) {
+            e.preventDefault();
+            let nextKey = delegate.getKeyLeftOf(manager.focusedKey);
+            navigateToKey(nextKey, direction === 'rtl' ? 'first' : 'last');
+          }
+
+          break;
+        }
+
+      case 'ArrowRight':
+        {
+          if (delegate.getKeyRightOf) {
+            e.preventDefault();
+            let nextKey = delegate.getKeyRightOf(manager.focusedKey);
+            navigateToKey(nextKey, direction === 'rtl' ? 'last' : 'first');
+          }
+
+          break;
+        }
+
+      case 'Home':
+        if (delegate.getFirstKey) {
+          e.preventDefault();
+          let firstKey = delegate.getFirstKey(manager.focusedKey, $a9b9aa71af07c56ab1d89ca45381f4b$var$isCtrlKeyPressed(e));
+          manager.setFocusedKey(firstKey);
+
+          if ($a9b9aa71af07c56ab1d89ca45381f4b$var$isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
+            manager.extendSelection(firstKey);
+          } else if (selectOnFocus) {
+            manager.replaceSelection(firstKey);
+          }
+        }
+
+        break;
+
+      case 'End':
+        if (delegate.getLastKey) {
+          e.preventDefault();
+          let lastKey = delegate.getLastKey(manager.focusedKey, $a9b9aa71af07c56ab1d89ca45381f4b$var$isCtrlKeyPressed(e));
+          manager.setFocusedKey(lastKey);
+
+          if ($a9b9aa71af07c56ab1d89ca45381f4b$var$isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
+            manager.extendSelection(lastKey);
+          } else if (selectOnFocus) {
+            manager.replaceSelection(lastKey);
+          }
+        }
+
+        break;
+
+      case 'PageDown':
+        if (delegate.getKeyPageBelow) {
+          e.preventDefault();
+          let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
+          navigateToKey(nextKey);
+        }
+
+        break;
+
+      case 'PageUp':
+        if (delegate.getKeyPageAbove) {
+          e.preventDefault();
+          let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
+          navigateToKey(nextKey);
+        }
+
+        break;
+
+      case 'a':
+        if ($a9b9aa71af07c56ab1d89ca45381f4b$var$isCtrlKeyPressed(e) && manager.selectionMode === 'multiple' && disallowSelectAll !== true) {
+          e.preventDefault();
+          manager.selectAll();
+        }
+
+        break;
+
+      case 'Escape':
+        e.preventDefault();
+
+        if (!disallowEmptySelection) {
+          manager.clearSelection();
+        }
+
+        break;
+
+      case 'Tab':
+        {
+          if (!allowsTabNavigation) {
+            // There may be elements that are "tabbable" inside a collection (e.g. in a grid cell).
+            // However, collections should be treated as a single tab stop, with arrow key navigation internally.
+            // We don't control the rendering of these, so we can't override the tabIndex to prevent tabbing.
+            // Instead, we handle the Tab key, and move focus manually to the first/last tabbable element
+            // in the collection, so that the browser default behavior will apply starting from that element
+            // rather than the currently focused one.
+            if (e.shiftKey) {
+              ref.current.focus();
+            } else {
+              let walker = getFocusableTreeWalker(ref.current, {
+                tabbable: true
+              });
+              let next;
+              let last;
+
+              do {
+                last = walker.lastChild();
+
+                if (last) {
+                  next = last;
+                }
+              } while (last);
+
+              if (next && !next.contains(document.activeElement)) {
+                focusWithoutScrolling(next);
+              }
+            }
+
+            break;
+          }
+        }
+    }
+  };
+
+  let onFocus = e => {
+    if (manager.isFocused) {
+      // If a focus event bubbled through a portal, reset focus state.
+      if (!e.currentTarget.contains(e.target)) {
+        manager.setFocused(false);
+      }
+
+      return;
+    } // Focus events can bubble through portals. Ignore these events.
+
+
+    if (!e.currentTarget.contains(e.target)) {
+      return;
+    }
+
+    manager.setFocused(true);
+
+    if (manager.focusedKey == null) {
+      // If the user hasn't yet interacted with the collection, there will be no focusedKey set.
+      // Attempt to detect whether the user is tabbing forward or backward into the collection
+      // and either focus the first or last item accordingly.
+      let relatedTarget = e.relatedTarget;
+
+      if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) {
+        var _manager$lastSelected;
+
+        manager.setFocusedKey((_manager$lastSelected = manager.lastSelectedKey) != null ? _manager$lastSelected : delegate.getLastKey());
+      } else {
+        var _manager$firstSelecte;
+
+        manager.setFocusedKey((_manager$firstSelecte = manager.firstSelectedKey) != null ? _manager$firstSelecte : delegate.getFirstKey());
+      }
+    }
+  };
+
+  let onBlur = e => {
+    // Don't set blurred and then focused again if moving focus within the collection.
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      manager.setFocused(false);
+    }
+  };
+
+  const autoFocusRef = React.useRef(autoFocus);
+  React.useEffect(() => {
+    if (autoFocusRef.current) {
+      let focusedKey = null; // Check focus strategy to determine which item to focus
+
+      if (autoFocus === 'first') {
+        focusedKey = delegate.getFirstKey();
+      }
+
+      if (autoFocus === 'last') {
+        focusedKey = delegate.getLastKey();
+      } // If there are any selected keys, make the first one the new focus target
+
+
+      let selectedKeys = manager.selectedKeys;
+
+      if (selectedKeys.size) {
+        focusedKey = selectedKeys.values().next().value;
+      }
+
+      manager.setFocused(true);
+      manager.setFocusedKey(focusedKey); // If no default focus key is selected, focus the collection itself.
+
+      if (focusedKey == null && !shouldUseVirtualFocus) {
+        focusSafely(ref.current);
+      }
+    }
+
+    autoFocusRef.current = false; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  let handlers = {
+    onKeyDown,
+    onFocus,
+    onBlur,
+
+    onMouseDown(e) {
+      // Ignore events that bubbled through portals.
+      if (e.currentTarget.contains(e.target)) {
+        // Prevent focus going to the collection when clicking on the scrollbar.
+        e.preventDefault();
+      }
+    }
+
+  };
+  let {
+    typeSelectProps
+  } = useTypeSelect({
+    keyboardDelegate: delegate,
+    selectionManager: manager
+  });
+
+  if (!disallowTypeAhead) {
+    handlers = mergeProps(typeSelectProps, handlers);
+  } // If nothing is focused within the collection, make the collection itself tabbable.
+  // This will be marshalled to either the first or last item depending on where focus came from.
+  // If using virtual focus, don't set a tabIndex at all so that VoiceOver on iOS 14 doesn't try
+  // to move real DOM focus to the element anyway.
+
+
+  let tabIndex;
+
+  if (!shouldUseVirtualFocus) {
+    tabIndex = manager.focusedKey == null ? 0 : -1;
+  }
+
+  return {
+    collectionProps: _extends$1({}, handlers, {
+      tabIndex
+    })
+  };
+}
+
+/**
+ * Handles interactions with an item in a selectable collection.
+ */
+function useSelectableItem(options) {
+  let {
+    selectionManager: manager,
+    key,
+    ref,
+    shouldSelectOnPressUp,
+    isVirtualized,
+    shouldUseVirtualFocus,
+    focus
+  } = options;
+
+  let onSelect = e => manager.select(key, e); // Focus the associated DOM node when this item becomes the focusedKey
+
+
+  let isFocused = key === manager.focusedKey;
+  React.useEffect(() => {
+    if (isFocused && manager.isFocused && !shouldUseVirtualFocus && document.activeElement !== ref.current) {
+      if (focus) {
+        focus();
+      } else {
+        focusSafely(ref.current);
+      }
+    }
+  }, [ref, isFocused, manager.focusedKey, manager.childFocusStrategy, manager.isFocused, shouldUseVirtualFocus]); // Set tabIndex to 0 if the element is focused, or -1 otherwise so that only the last focused
+  // item is tabbable.  If using virtual focus, don't set a tabIndex at all so that VoiceOver
+  // on iOS 14 doesn't try to move real DOM focus to the item anyway.
+
+  let itemProps = {};
+
+  if (!shouldUseVirtualFocus) {
+    itemProps = {
+      tabIndex: isFocused ? 0 : -1,
+
+      onFocus(e) {
+        if (e.target === ref.current) {
+          manager.setFocusedKey(key);
+        }
+      }
+
+    };
+  } // By default, selection occurs on pointer down. This can be strange if selecting an
+  // item causes the UI to disappear immediately (e.g. menus).
+  // If shouldSelectOnPressUp is true, we use onPressUp instead of onPressStart.
+  // onPress requires a pointer down event on the same element as pointer up. For menus,
+  // we want to be able to have the pointer down on the trigger that opens the menu and
+  // the pointer up on the menu item rather than requiring a separate press.
+  // For keyboard events, selection still occurs on key down.
+
+
+  if (shouldSelectOnPressUp) {
+    itemProps.onPressStart = e => {
+      if (e.pointerType === 'keyboard') {
+        onSelect(e);
+      }
+    };
+
+    itemProps.onPressUp = e => {
+      if (e.pointerType !== 'keyboard') {
+        onSelect(e);
+      }
+    };
+  } else {
+    // On touch, it feels strange to select on touch down, so we special case this.
+    itemProps.onPressStart = e => {
+      if (e.pointerType !== 'touch') {
+        onSelect(e);
+      }
+    };
+
+    itemProps.onPress = e => {
+      if (e.pointerType === 'touch') {
+        onSelect(e);
+      }
+    };
+  }
+
+  if (!isVirtualized) {
+    itemProps['data-key'] = key;
+  }
+
+  return {
+    itemProps
+  };
+}
+
+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);
+}
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+const $c5c378b07d37fb3729fd37493414d657$export$tabsIds = new WeakMap();
+
+function $c5c378b07d37fb3729fd37493414d657$export$generateId(state, key, role) {
+  if (typeof key === 'string') {
+    key = key.replace(/\s+/g, '');
+  }
+
+  let baseId = $c5c378b07d37fb3729fd37493414d657$export$tabsIds.get(state);
+  return baseId + "-" + role + "-" + key;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a tab.
+ * When selected, the associated tab panel is shown.
+ */
+function useTab(props, state, ref) {
+  let {
+    key,
+    isDisabled: propsDisabled
+  } = props;
+  let {
+    selectionManager: manager,
+    selectedKey
+  } = state;
+  let isSelected = key === selectedKey;
+  let {
+    itemProps
+  } = useSelectableItem({
+    selectionManager: manager,
+    key,
+    ref
+  });
+  let isDisabled = propsDisabled || state.disabledKeys.has(key);
+  let {
+    pressProps
+  } = usePress(_extends({}, itemProps, {
+    isDisabled
+  }));
+  let tabId = $c5c378b07d37fb3729fd37493414d657$export$generateId(state, key, 'tab');
+  let tabPanelId = $c5c378b07d37fb3729fd37493414d657$export$generateId(state, key, 'tabpanel');
+  let {
+    tabIndex
+  } = pressProps;
+  return {
+    tabProps: _extends({}, pressProps, {
+      id: tabId,
+      'aria-selected': isSelected,
+      'aria-disabled': isDisabled || undefined,
+      'aria-controls': isSelected ? tabPanelId : undefined,
+      tabIndex: isDisabled ? undefined : tabIndex,
+      role: 'tab'
+    })
+  };
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a tab panel. A tab panel is a container for
+ * the contents of a tab, and is shown when the tab is selected.
+ */
+function useTabPanel(props, state, ref) {
+  let [tabIndex, setTabIndex] = React.useState(0); // The tabpanel should have tabIndex=0 when there are no tabbable elements within it.
+  // Otherwise, tabbing from the focused tab should go directly to the first tabbable element
+  // within the tabpanel.
+
+  React.useLayoutEffect(() => {
+    if (ref != null && ref.current) {
+      let update = () => {
+        // Detect if there are any tabbable elements and update the tabIndex accordingly.
+        let walker = getFocusableTreeWalker(ref.current, {
+          tabbable: true
+        });
+        setTabIndex(walker.nextNode() ? undefined : 0);
+      };
+
+      update(); // Update when new elements are inserted, or the tabIndex/disabled attribute updates.
+
+      let observer = new MutationObserver(update);
+      observer.observe(ref.current, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ['tabIndex', 'disabled']
+      });
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [ref]);
+  const id = $c5c378b07d37fb3729fd37493414d657$export$generateId(state, state == null ? void 0 : state.selectedKey, 'tabpanel');
+  const tabPanelProps = useLabels(_extends({}, props, {
+    id,
+    'aria-labelledby': $c5c378b07d37fb3729fd37493414d657$export$generateId(state, state == null ? void 0 : state.selectedKey, 'tab')
+  }));
+  return {
+    tabPanelProps: mergeProps(tabPanelProps, {
+      tabIndex,
+      role: 'tabpanel',
+      'aria-describedby': props['aria-describedby'],
+      'aria-details': props['aria-details']
+    })
+  };
+}
+
+class $ace72fda23df319bd9db38f00073d9$export$TabsKeyboardDelegate {
+  constructor(collection, direction, orientation, disabledKeys) {
+    if (disabledKeys === void 0) {
+      disabledKeys = new Set();
+    }
+
+    this.collection = void 0;
+    this.flipDirection = void 0;
+    this.disabledKeys = void 0;
+    this.orientation = void 0;
+    this.collection = collection;
+    this.flipDirection = direction === 'rtl' && orientation === 'horizontal';
+    this.orientation = orientation;
+    this.disabledKeys = disabledKeys;
+  }
+
+  getKeyLeftOf(key) {
+    if (this.flipDirection) {
+      return this.getNextKey(key);
+    } else {
+      if (this.orientation === 'horizontal') {
+        return this.getPreviousKey(key);
+      }
+
+      return null;
+    }
+  }
+
+  getKeyRightOf(key) {
+    if (this.flipDirection) {
+      return this.getPreviousKey(key);
+    } else {
+      if (this.orientation === 'horizontal') {
+        return this.getNextKey(key);
+      }
+
+      return null;
+    }
+  }
+
+  getKeyAbove(key) {
+    if (this.orientation === 'vertical') {
+      return this.getPreviousKey(key);
+    }
+
+    return null;
+  }
+
+  getKeyBelow(key) {
+    if (this.orientation === 'vertical') {
+      return this.getNextKey(key);
+    }
+
+    return null;
+  }
+
+  getFirstKey() {
+    let key = this.collection.getFirstKey();
+
+    if (this.disabledKeys.has(key)) {
+      key = this.getNextKey(key);
+    }
+
+    return key;
+  }
+
+  getLastKey() {
+    let key = this.collection.getLastKey();
+
+    if (this.disabledKeys.has(key)) {
+      key = this.getPreviousKey(key);
+    }
+
+    return key;
+  }
+
+  getNextKey(key) {
+    do {
+      key = this.collection.getKeyAfter(key);
+
+      if (key == null) {
+        key = this.collection.getFirstKey();
+      }
+    } while (this.disabledKeys.has(key));
+
+    return key;
+  }
+
+  getPreviousKey(key) {
+    do {
+      key = this.collection.getKeyBefore(key);
+
+      if (key == null) {
+        key = this.collection.getLastKey();
+      }
+    } while (this.disabledKeys.has(key));
+
+    return key;
+  }
+
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a tab list.
+ * Tabs organize content into multiple sections and allow users to navigate between them.
+ */
+function useTabList(props, state, ref) {
+  let {
+    orientation = 'horizontal',
+    keyboardActivation = 'automatic'
+  } = props;
+  let {
+    collection,
+    selectionManager: manager,
+    disabledKeys
+  } = state;
+  let {
+    direction
+  } = useLocale();
+  let delegate = React.useMemo(() => new $ace72fda23df319bd9db38f00073d9$export$TabsKeyboardDelegate(collection, direction, orientation, disabledKeys), [collection, disabledKeys, orientation, direction]);
+  let {
+    collectionProps
+  } = useSelectableCollection({
+    ref,
+    selectionManager: manager,
+    keyboardDelegate: delegate,
+    selectOnFocus: keyboardActivation === 'automatic',
+    disallowEmptySelection: true
+  }); // Compute base id for all tabs
+
+  let tabsId = useId();
+  $c5c378b07d37fb3729fd37493414d657$export$tabsIds.set(state, tabsId);
+  let tabListLabelProps = useLabels(_extends({}, props, {
+    id: tabsId
+  }));
+  return {
+    tabListProps: _extends({}, mergeProps(collectionProps, tabListLabelProps), {
+      role: 'tablist',
+      'aria-orientation': orientation,
+      tabIndex: undefined
+    })
+  };
+}
+
+function SpsTab(_a) {
+    var item = _a.item, state = _a.state;
+    var key = item.key;
+    var ref = React__namespace.useRef();
+    var tabProps = useTab({ key: key }, state, ref).tabProps;
+    var isSelected = state.selectedKey === key;
+    var isDisabled = state.disabledKeys.has(key);
+    return (React__namespace.createElement("div", __assign({}, tabProps, { ref: ref, className: clsx__default['default']('sps-nav__item', 'sps-nav__link', isSelected && 'active', isDisabled && 'sps-nav__item--disabled') }), item.rendered));
+}
+
+function SpsTabPanel(_a) {
+    var state = _a.state, props = __rest(_a, ["state"]);
+    var ref = React__namespace.useRef();
+    var tabPanelProps = useTabPanel(props, state, ref).tabPanelProps;
+    return (React__namespace.createElement("div", __assign({}, tabPanelProps, { ref: ref, className: "sps-card__body" }), state.selectedItem ? state.selectedItem.props.children : null));
+}
+
+function SpsTabsV2(props) {
+    var state = useTabListState(props);
+    var ref = React__namespace.useRef();
+    var tabListProps = useTabList(props, state, ref).tabListProps;
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement("div", __assign({}, tabListProps, { ref: ref, className: "sps-nav sps-nav--tabs sps-tabs-v2" }), __spreadArray([], __read(state.collection)).map(function (item) { return (React__namespace.createElement(SpsTab, { key: item.key, item: item, state: state })); })),
+        React__namespace.createElement(SpsTabPanel, { key: state.selectedItem ? state.selectedItem.key : null, state: state })));
+}
+
+function SpsCardV2Footer(_a) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React__namespace.createElement("div", __assign({ className: clsx__default['default']('sps-card__footer', className) }, rest), children));
+}
+
+function SpsCardV2Header(_a) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React__namespace.createElement("div", __assign({ className: clsx__default['default']('sps-card__header', className) }, rest), children));
+}
+
+function SpsCardV2(_a) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    var _b = __read(selectChildren(children, [
+        { type: SpsCardV2Header },
+        { type: SpsTabsV2 },
+        { type: SpsCardV2Footer },
+    ]), 4), header = _b[0], tabs = _b[1], footer = _b[2], bodyContent = _b[3];
+    return (React__namespace.createElement("div", __assign({ className: clsx__default['default']('sps-card', className) }, rest),
+        header,
+        tabs.length > 0
+            ? tabs
+            : (React__namespace.createElement("div", { className: "sps-card__body" }, bodyContent)),
+        footer));
+}
+
+function SpsCardV2Title(_a) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React__namespace.createElement("div", __assign({ className: clsx__default['default']('sps-card__title', className) }, rest), children));
+}
+
 var moment$2 = moment__namespace.default || moment__namespace;
 function newWeekArray() {
     return (new Array(7)).fill(null);
@@ -11223,6 +14457,10 @@ exports.SpsButtonGroup = SpsButtonGroup;
 exports.SpsCard = SpsCard;
 exports.SpsCardExamples = SpsCardExamples;
 exports.SpsCardTabbedPane = SpsCardTabbedPane;
+exports.SpsCardV2 = SpsCardV2;
+exports.SpsCardV2Footer = SpsCardV2Footer;
+exports.SpsCardV2Header = SpsCardV2Header;
+exports.SpsCardV2Title = SpsCardV2Title;
 exports.SpsCheckbox = SpsCheckbox;
 exports.SpsCheckboxDropdown = SpsCheckboxDropdown;
 exports.SpsCheckboxExamples = SpsCheckboxExamples;
@@ -11339,6 +14577,8 @@ exports.SpsSummaryListColumn = SpsSummaryListColumn;
 exports.SpsSummaryListExamples = SpsSummaryListExamples;
 exports.SpsSummaryListExpansion = SpsSummaryListExpansion;
 exports.SpsSummaryListRow = SpsSummaryListRow;
+exports.SpsTab = SpsTab;
+exports.SpsTabPanel = SpsTabPanel;
 exports.SpsTable = SpsTable;
 exports.SpsTableBody = SpsTableBody;
 exports.SpsTableCell = SpsTableCell;
@@ -11346,6 +14586,7 @@ exports.SpsTableExamples = SpsTableExamples;
 exports.SpsTableHead = SpsTableHead;
 exports.SpsTableHeader = SpsTableHeader;
 exports.SpsTableRow = SpsTableRow;
+exports.SpsTabsV2 = SpsTabsV2;
 exports.SpsTag = SpsTag;
 exports.SpsTagExamples = SpsTagExamples;
 exports.SpsTaskQueue = SpsTaskQueue;