@bcgov/design-system-react-components 0.0.3 → 0.0.4

package/dist/esm/index.js

@@ -543,7 +543,7 @@ function $8ae05eaa5c114e9c$export$7f54fc3180508a52(fn) {
     // @ts-ignore
     return (useCallback)((...args)=>{
         const f = ref.current;
-        return f(...args);
+        return f === null || f === void 0 ? void 0 : f(...args);
     }, []);
 }
 
@@ -554,6 +554,7 @@ function $1dbecbe27a04f9af$export$14d238f342723f25(defaultValue) {
     // Store the function in a ref so we can always access the current version
     // which has the proper `value` in scope.
     let nextRef = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)(()=>{
+        if (!effect.current) return;
         // Run the generator to the next yield.
         let newValue = effect.current.next();
         // If the generator is done, reset the effect.
@@ -796,7 +797,7 @@ function $7215afc6de606d6b$var$supportsPreventScroll() {
     if ($7215afc6de606d6b$var$supportsPreventScrollCached == null) {
         $7215afc6de606d6b$var$supportsPreventScrollCached = false;
         try {
-            var focusElem = document.createElement("div");
+            let focusElem = document.createElement("div");
             focusElem.focus({
                 get preventScroll () {
                     $7215afc6de606d6b$var$supportsPreventScrollCached = true;
@@ -810,9 +811,9 @@ function $7215afc6de606d6b$var$supportsPreventScroll() {
     return $7215afc6de606d6b$var$supportsPreventScrollCached;
 }
 function $7215afc6de606d6b$var$getScrollableElements(element) {
-    var parent = element.parentNode;
-    var scrollableElements = [];
-    var rootScrollingElement = document.scrollingElement || document.documentElement;
+    let parent = element.parentNode;
+    let scrollableElements = [];
+    let rootScrollingElement = document.scrollingElement || document.documentElement;
     while(parent instanceof HTMLElement && parent !== rootScrollingElement){
         if (parent.offsetHeight < parent.scrollHeight || parent.offsetWidth < parent.scrollWidth) scrollableElements.push({
             element: parent,
@@ -989,7 +990,11 @@ let $bbed8b41f857bcc0$var$transitionsByElement = new Map();
 let $bbed8b41f857bcc0$var$transitionCallbacks = new Set();
 function $bbed8b41f857bcc0$var$setupGlobalEvents() {
     if (typeof window === "undefined") return;
+    function isTransitionEvent(event) {
+        return "propertyName" in event;
+    }
     let onTransitionStart = (e)=>{
+        if (!isTransitionEvent(e) || !e.target) return;
         // Add the transitioning property to the list for this element.
         let transitions = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
         if (!transitions) {
@@ -998,11 +1003,14 @@ function $bbed8b41f857bcc0$var$setupGlobalEvents() {
             // 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);
+            e.target.addEventListener("transitioncancel", onTransitionEnd, {
+                once: true
+            });
         }
         transitions.add(e.propertyName);
     };
     let onTransitionEnd = (e)=>{
+        if (!isTransitionEvent(e) || !e.target) return;
         // Remove property from list of transitioning properties.
         let properties = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
         if (!properties) return;
@@ -1137,7 +1145,7 @@ function $313b98861ee5dd6c$export$d6875122194c7b44(props, defaultLabel) {
  * governing permissions and limitations under the License.
  */ 
 function $df56164dff5785e2$export$4338b53315abf666(forwardedRef) {
-    const objRef = (useRef)();
+    const objRef = (useRef)(null);
     return (useMemo)(()=>({
             get current () {
                 return objRef.current;
@@ -1230,7 +1238,7 @@ function $e7801be82b4b2a53$export$4debdb1a3f0fa79e(context, ref) {
         if (context && context.ref && ref) {
             context.ref.current = ref.current;
             return ()=>{
-                context.ref.current = null;
+                if (context.ref) context.ref.current = null;
             };
         }
     });
@@ -1248,9 +1256,10 @@ function $e7801be82b4b2a53$export$4debdb1a3f0fa79e(context, ref) {
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ function $62d8ded9296f3872$export$cfa2225e87938781(node, checkForOverflow) {
-    if ($62d8ded9296f3872$export$2bb74740c4e19def(node, checkForOverflow)) node = node.parentElement;
-    while(node && !$62d8ded9296f3872$export$2bb74740c4e19def(node, checkForOverflow))node = node.parentElement;
-    return node || document.scrollingElement || document.documentElement;
+    let scrollableNode = node;
+    if ($62d8ded9296f3872$export$2bb74740c4e19def(scrollableNode, checkForOverflow)) scrollableNode = scrollableNode.parentElement;
+    while(scrollableNode && !$62d8ded9296f3872$export$2bb74740c4e19def(scrollableNode, checkForOverflow))scrollableNode = scrollableNode.parentElement;
+    return scrollableNode || document.scrollingElement || document.documentElement;
 }
 function $62d8ded9296f3872$export$2bb74740c4e19def(node, checkForOverflow) {
     let style = window.getComputedStyle(node);
@@ -1275,7 +1284,7 @@ function $62d8ded9296f3872$export$2bb74740c4e19def(node, checkForOverflow) {
 let $ef06256079686ba0$var$descriptionId = 0;
 const $ef06256079686ba0$var$descriptionNodes = new Map();
 function $ef06256079686ba0$export$f8aeda7b10753fa1(description) {
-    let [id, setId] = (useState)(undefined);
+    let [id, setId] = (useState)();
     ($f0a04ccd8dbdd83b$export$e5c5a5f917a5871c)(()=>{
         if (!description) return;
         let desc = $ef06256079686ba0$var$descriptionNodes.get(description);
@@ -1295,7 +1304,7 @@ function $ef06256079686ba0$export$f8aeda7b10753fa1(description) {
         } else setId(desc.element.id);
         desc.refCount++;
         return ()=>{
-            if (--desc.refCount === 0) {
+            if (desc && --desc.refCount === 0) {
                 desc.element.remove();
                 $ef06256079686ba0$var$descriptionNodes.delete(description);
             }
@@ -1326,7 +1335,7 @@ function $e9faafb641e167db$export$90fc3a17d93f704c(ref, event, handler, options)
     let handleEvent = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)(handler);
     let isDisabled = handler == null;
     (useEffect)(()=>{
-        if (isDisabled) return;
+        if (isDisabled || !ref.current) return;
         let element = ref.current;
         element.addEventListener(event, handleEvent, options);
         return ()=>{
@@ -1580,6 +1589,7 @@ function _class_private_field_set(receiver, privateMap, value) {
 
 
 
+
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -1647,7 +1657,6 @@ function $14c0b72509d70225$export$b0d6fa1ab32e3295(target) {
 }
 
 
-
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -1798,8 +1807,13 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
                         state.isPressed = true;
                         shouldStopPropagation = 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(($431fbd86ca7dc216$export$b204af158042fbac)(e.currentTarget), "keyup", onKeyUp, false);
+                        // instead of the same element where the key down event occurred. Make it capturing so that it will trigger
+                        // before stopPropagation from useKeyboard on a child element may happen and thus we can still call triggerPress for the parent element.
+                        let originalTarget = e.currentTarget;
+                        let pressUp = (e)=>{
+                            if ($f6c31cce2adf654f$var$isValidKeyboardEvent(e, originalTarget) && !e.repeat && originalTarget.contains(e.target) && state.target) triggerPressUp($f6c31cce2adf654f$var$createEvent(state.target, e), "keyboard");
+                        };
+                        addGlobalListener(($431fbd86ca7dc216$export$b204af158042fbac)(e.currentTarget), "keyup", ($ff5963eb1fccf552$export$e08e3b67e392101e)(pressUp, onKeyUp), true);
                     }
                     if (shouldStopPropagation) e.stopPropagation();
                     // Keep track of the keydown events that occur while the Meta (e.g. Command) key is held.
@@ -1812,9 +1826,6 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
                     if (e.metaKey && ($c87311424ea30a05$export$9ac100e40613ea10)()) (_state_metaKeyEvents = state.metaKeyEvents) === null || _state_metaKeyEvents === void 0 ? void 0 : _state_metaKeyEvents.set(e.key, e.nativeEvent);
                 } else if (e.key === "Meta") state.metaKeyEvents = new Map();
             },
-            onKeyUp (e) {
-                if ($f6c31cce2adf654f$var$isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && !e.repeat && e.currentTarget.contains(e.target) && state.target) triggerPressUp($f6c31cce2adf654f$var$createEvent(state.target, e), "keyboard");
-            },
             onClick (e) {
                 if (e && !e.currentTarget.contains(e.target)) return;
                 if (e && e.button === 0 && !state.isTriggeringEvent && !($ea8dcbcb9ea1b556$export$95185d699e05d4d7).isOpening) {
@@ -1842,9 +1853,8 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
                 var _state_metaKeyEvents1;
                 if ($f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(e.target, e.key)) e.preventDefault();
                 let target = e.target;
-                let shouldStopPropagation = triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), "keyboard", state.target.contains(target));
+                triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), "keyboard", state.target.contains(target));
                 removeAllGlobalListeners();
-                if (shouldStopPropagation) e.stopPropagation();
                 // If a link was triggered with a key other than Enter, open the URL ourselves.
                 // This means the link has a role override, and the default browser behavior
                 // only applies when using the Enter key.
@@ -2387,7 +2397,7 @@ function $a1ea59d68270f0dd$export$f8168d8dd8fd66e6(props) {
 
 let $507fabe10e71c6fb$var$currentModality = null;
 let $507fabe10e71c6fb$var$changeHandlers = new Set();
-let $507fabe10e71c6fb$var$hasSetupGlobalListeners = false;
+let $507fabe10e71c6fb$export$d90243b58daecda7 = new Map(); // We use a map here to support setting event listeners across multiple document objects.
 let $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
 let $507fabe10e71c6fb$var$hasBlurredWindowRecently = false;
 // Only Tab or Esc keys will make focus visible on text input elements
@@ -2446,39 +2456,82 @@ function $507fabe10e71c6fb$var$handleWindowBlur() {
 }
 /**
  * Setup global event listeners to control when keyboard focus style should be visible.
- */ function $507fabe10e71c6fb$var$setupGlobalFocusEvents() {
-    if (typeof window === "undefined" || $507fabe10e71c6fb$var$hasSetupGlobalListeners) return;
+ */ function $507fabe10e71c6fb$var$setupGlobalFocusEvents(element) {
+    if (typeof window === "undefined" || $507fabe10e71c6fb$export$d90243b58daecda7.get(($431fbd86ca7dc216$export$f21a1ffae260145a)(element))) return;
+    const windowObject = ($431fbd86ca7dc216$export$f21a1ffae260145a)(element);
+    const documentObject = ($431fbd86ca7dc216$export$b204af158042fbac)(element);
     // 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() {
+    let focus = windowObject.HTMLElement.prototype.focus;
+    windowObject.HTMLElement.prototype.focus = function() {
         $507fabe10e71c6fb$var$hasEventBeforeFocus = true;
         focus.apply(this, arguments);
     };
-    document.addEventListener("keydown", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
-    document.addEventListener("keyup", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
-    document.addEventListener("click", $507fabe10e71c6fb$var$handleClickEvent, true);
+    documentObject.addEventListener("keydown", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+    documentObject.addEventListener("keyup", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+    documentObject.addEventListener("click", $507fabe10e71c6fb$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", $507fabe10e71c6fb$var$handleFocusEvent, true);
-    window.addEventListener("blur", $507fabe10e71c6fb$var$handleWindowBlur, false);
+    windowObject.addEventListener("focus", $507fabe10e71c6fb$var$handleFocusEvent, true);
+    windowObject.addEventListener("blur", $507fabe10e71c6fb$var$handleWindowBlur, false);
     if (typeof PointerEvent !== "undefined") {
-        document.addEventListener("pointerdown", $507fabe10e71c6fb$var$handlePointerEvent, true);
-        document.addEventListener("pointermove", $507fabe10e71c6fb$var$handlePointerEvent, true);
-        document.addEventListener("pointerup", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.addEventListener("pointerdown", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.addEventListener("pointermove", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.addEventListener("pointerup", $507fabe10e71c6fb$var$handlePointerEvent, true);
     } else {
-        document.addEventListener("mousedown", $507fabe10e71c6fb$var$handlePointerEvent, true);
-        document.addEventListener("mousemove", $507fabe10e71c6fb$var$handlePointerEvent, true);
-        document.addEventListener("mouseup", $507fabe10e71c6fb$var$handlePointerEvent, true);
-    }
-    $507fabe10e71c6fb$var$hasSetupGlobalListeners = true;
+        documentObject.addEventListener("mousedown", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.addEventListener("mousemove", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.addEventListener("mouseup", $507fabe10e71c6fb$var$handlePointerEvent, true);
+    }
+    // Add unmount handler
+    windowObject.addEventListener("beforeunload", ()=>{
+        $507fabe10e71c6fb$var$tearDownWindowFocusTracking(element);
+    }, {
+        once: true
+    });
+    $507fabe10e71c6fb$export$d90243b58daecda7.set(windowObject, {
+        focus: focus
+    });
 }
-if (typeof document !== "undefined") {
-    if (document.readyState !== "loading") $507fabe10e71c6fb$var$setupGlobalFocusEvents();
-    else document.addEventListener("DOMContentLoaded", $507fabe10e71c6fb$var$setupGlobalFocusEvents);
+const $507fabe10e71c6fb$var$tearDownWindowFocusTracking = (element, loadListener)=>{
+    const windowObject = ($431fbd86ca7dc216$export$f21a1ffae260145a)(element);
+    const documentObject = ($431fbd86ca7dc216$export$b204af158042fbac)(element);
+    if (loadListener) documentObject.removeEventListener("DOMContentLoaded", loadListener);
+    if (!$507fabe10e71c6fb$export$d90243b58daecda7.has(windowObject)) return;
+    windowObject.HTMLElement.prototype.focus = $507fabe10e71c6fb$export$d90243b58daecda7.get(windowObject).focus;
+    documentObject.removeEventListener("keydown", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+    documentObject.removeEventListener("keyup", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+    documentObject.removeEventListener("click", $507fabe10e71c6fb$var$handleClickEvent, true);
+    windowObject.removeEventListener("focus", $507fabe10e71c6fb$var$handleFocusEvent, true);
+    windowObject.removeEventListener("blur", $507fabe10e71c6fb$var$handleWindowBlur, false);
+    if (typeof PointerEvent !== "undefined") {
+        documentObject.removeEventListener("pointerdown", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.removeEventListener("pointermove", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.removeEventListener("pointerup", $507fabe10e71c6fb$var$handlePointerEvent, true);
+    } else {
+        documentObject.removeEventListener("mousedown", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.removeEventListener("mousemove", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.removeEventListener("mouseup", $507fabe10e71c6fb$var$handlePointerEvent, true);
+    }
+    $507fabe10e71c6fb$export$d90243b58daecda7.delete(windowObject);
+};
+function $507fabe10e71c6fb$export$2f1888112f558a7d(element) {
+    const documentObject = ($431fbd86ca7dc216$export$b204af158042fbac)(element);
+    let loadListener;
+    if (documentObject.readyState !== "loading") $507fabe10e71c6fb$var$setupGlobalFocusEvents(element);
+    else {
+        loadListener = ()=>{
+            $507fabe10e71c6fb$var$setupGlobalFocusEvents(element);
+        };
+        documentObject.addEventListener("DOMContentLoaded", loadListener);
+    }
+    return ()=>$507fabe10e71c6fb$var$tearDownWindowFocusTracking(element, loadListener);
 }
+// Server-side rendering does not have the document object defined
+// eslint-disable-next-line no-restricted-globals
+if (typeof document !== "undefined") $507fabe10e71c6fb$export$2f1888112f558a7d();
 function $507fabe10e71c6fb$export$b9b3dfddab17db27() {
     return $507fabe10e71c6fb$var$currentModality !== "pointer";
 }
@@ -2519,8 +2572,12 @@ const $507fabe10e71c6fb$var$nonTextInputTypes = new Set([
  * focus visible style can be properly set.
  */ function $507fabe10e71c6fb$var$isKeyboardFocusEvent(isTextInput, modality, e) {
     var _e_target;
-    isTextInput = isTextInput || (e === null || e === void 0 ? void 0 : e.target) instanceof HTMLInputElement && !$507fabe10e71c6fb$var$nonTextInputTypes.has(e === null || e === void 0 ? void 0 : (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.type) || (e === null || e === void 0 ? void 0 : e.target) instanceof HTMLTextAreaElement || (e === null || e === void 0 ? void 0 : e.target) instanceof HTMLElement && (e === null || e === void 0 ? void 0 : e.target.isContentEditable);
-    return !(isTextInput && modality === "keyboard" && e instanceof KeyboardEvent && !$507fabe10e71c6fb$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]);
+    const IHTMLInputElement = typeof window !== "undefined" ? ($431fbd86ca7dc216$export$f21a1ffae260145a)(e === null || e === void 0 ? void 0 : e.target).HTMLInputElement : HTMLInputElement;
+    const IHTMLTextAreaElement = typeof window !== "undefined" ? ($431fbd86ca7dc216$export$f21a1ffae260145a)(e === null || e === void 0 ? void 0 : e.target).HTMLTextAreaElement : HTMLTextAreaElement;
+    const IHTMLElement = typeof window !== "undefined" ? ($431fbd86ca7dc216$export$f21a1ffae260145a)(e === null || e === void 0 ? void 0 : e.target).HTMLElement : HTMLElement;
+    const IKeyboardEvent = typeof window !== "undefined" ? ($431fbd86ca7dc216$export$f21a1ffae260145a)(e === null || e === void 0 ? void 0 : e.target).KeyboardEvent : KeyboardEvent;
+    isTextInput = isTextInput || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLInputElement && !$507fabe10e71c6fb$var$nonTextInputTypes.has(e === null || e === void 0 ? void 0 : (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.type) || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLTextAreaElement || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLElement && (e === null || e === void 0 ? void 0 : e.target.isContentEditable);
+    return !(isTextInput && modality === "keyboard" && e instanceof IKeyboardEvent && !$507fabe10e71c6fb$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]);
 }
 function $507fabe10e71c6fb$export$ec71b4b83ac08ec3(fn, deps, opts) {
     $507fabe10e71c6fb$var$setupGlobalFocusEvents();
@@ -4969,6 +5026,7 @@ let $edcf132a9284368a$var$visualViewport = typeof document !== "undefined" && wi
 function $edcf132a9284368a$var$getContainerDimensions(containerNode) {
     let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0;
     let scroll = {};
+    let isPinchZoomedIn = ($edcf132a9284368a$var$visualViewport === null || $edcf132a9284368a$var$visualViewport === void 0 ? void 0 : $edcf132a9284368a$var$visualViewport.scale) > 1;
     if (containerNode.tagName === "BODY") {
         let documentElement = document.documentElement;
         totalWidth = documentElement.clientWidth;
@@ -4979,6 +5037,13 @@ function $edcf132a9284368a$var$getContainerDimensions(containerNode) {
         height = (_visualViewport_height = $edcf132a9284368a$var$visualViewport === null || $edcf132a9284368a$var$visualViewport === void 0 ? void 0 : $edcf132a9284368a$var$visualViewport.height) !== null && _visualViewport_height !== void 0 ? _visualViewport_height : totalHeight;
         scroll.top = documentElement.scrollTop || containerNode.scrollTop;
         scroll.left = documentElement.scrollLeft || containerNode.scrollLeft;
+        // The goal of the below is to get a top/left value that represents the top/left of the visual viewport with
+        // respect to the layout viewport origin. This combined with the scrollTop/scrollLeft will allow us to calculate
+        // coordinates/values with respect to the visual viewport or with respect to the layout viewport.
+        if ($edcf132a9284368a$var$visualViewport) {
+            top = $edcf132a9284368a$var$visualViewport.offsetTop;
+            left = $edcf132a9284368a$var$visualViewport.offsetLeft;
+        }
     } else {
         ({ width: width, height: height, top: top, left: left } = $edcf132a9284368a$var$getOffset(containerNode));
         scroll.top = containerNode.scrollTop;
@@ -4986,6 +5051,16 @@ function $edcf132a9284368a$var$getContainerDimensions(containerNode) {
         totalWidth = width;
         totalHeight = height;
     }
+    if (($c87311424ea30a05$export$78551043582a6a98)() && (containerNode.tagName === "BODY" || containerNode.tagName === "HTML") && isPinchZoomedIn) {
+        // Safari will report a non-zero scrollTop/Left for the non-scrolling body/HTML element when pinch zoomed in unlike other browsers.
+        // Set to zero for parity calculations so we get consistent positioning of overlays across all browsers.
+        // Also switch to visualViewport.pageTop/pageLeft so that we still accomodate for scroll positioning for body/HTML elements that are actually scrollable
+        // before pinch zoom happens
+        scroll.top = 0;
+        scroll.left = 0;
+        top = $edcf132a9284368a$var$visualViewport.pageTop;
+        left = $edcf132a9284368a$var$visualViewport.pageLeft;
+    }
     return {
         width: width,
         height: height,
@@ -5004,6 +5079,7 @@ function $edcf132a9284368a$var$getScroll(node) {
         height: node.scrollHeight
     };
 }
+// Determines the amount of space required when moving the overlay to ensure it remains in the boundary
 function $edcf132a9284368a$var$getDelta(axis, offset, size, // The dimensions of the boundary element that the popover is
 // positioned within (most of the time this is the <body>).
 boundaryDimensions, // The dimensions of the containing block element that the popover is
@@ -5011,13 +5087,20 @@ boundaryDimensions, // The dimensions of the containing block element that the p
 // Usually this is the same as the boundary element, but if the popover
 // is portaled somewhere other than the body and has an ancestor with
 // position: relative/absolute, it will be different.
-containerDimensions, padding) {
+containerDimensions, padding, containerOffsetWithBoundary) {
     let containerScroll = containerDimensions.scroll[axis];
-    let boundaryHeight = boundaryDimensions[$edcf132a9284368a$var$AXIS_SIZE[axis]];
-    let startEdgeOffset = offset - padding - containerScroll;
-    let endEdgeOffset = offset + padding - containerScroll + size;
-    if (startEdgeOffset < 0) return -startEdgeOffset;
-    else if (endEdgeOffset > boundaryHeight) return Math.max(boundaryHeight - endEdgeOffset, -startEdgeOffset);
+    // The height/width of the boundary. Matches the axis along which we are adjusting the overlay position
+    let boundarySize = boundaryDimensions[$edcf132a9284368a$var$AXIS_SIZE[axis]];
+    // Calculate the edges of the boundary (accomodating for the boundary padding) and the edges of the overlay.
+    // Note that these values are with respect to the visual viewport (aka 0,0 is the top left of the viewport)
+    let boundaryStartEdge = boundaryDimensions.scroll[$edcf132a9284368a$var$AXIS[axis]] + padding;
+    let boundaryEndEdge = boundarySize + boundaryDimensions.scroll[$edcf132a9284368a$var$AXIS[axis]] - padding;
+    let startEdgeOffset = offset - containerScroll + containerOffsetWithBoundary[axis] - boundaryDimensions[$edcf132a9284368a$var$AXIS[axis]];
+    let endEdgeOffset = offset - containerScroll + size + containerOffsetWithBoundary[axis] - boundaryDimensions[$edcf132a9284368a$var$AXIS[axis]];
+    // If any of the overlay edges falls outside of the boundary, shift the overlay the required amount to align one of the overlay's
+    // edges with the closest boundary edge.
+    if (startEdgeOffset < boundaryStartEdge) return boundaryStartEdge - startEdgeOffset;
+    else if (endEdgeOffset > boundaryEndEdge) return Math.max(boundaryEndEdge - endEdgeOffset, boundaryStartEdge - startEdgeOffset);
     else return 0;
 }
 function $edcf132a9284368a$var$getMargins(node) {
@@ -5061,7 +5144,6 @@ function $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions,
      /* else {
     the overlay top should match the button top
   } */ 
-    // add the crossOffset from props
     position[crossAxis] += crossOffset;
     // overlay top overlapping arrow with button bottom
     const minPosition = childOffset[crossAxis] - overlaySize[crossSize] + arrowSize + arrowBoundaryOffset;
@@ -5079,14 +5161,20 @@ function $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions,
     } else position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
     return position;
 }
-function $edcf132a9284368a$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding) {
-    return position.top != null ? Math.max(0, boundaryDimensions.height + boundaryDimensions.top + boundaryDimensions.scroll.top // this is the bottom of the boundary
-     - (containerOffsetWithBoundary.top + position.top // this is the top of the overlay
-    ) - (margins.top + margins.bottom + padding // save additional space for margin and padding
-    )) : Math.max(0, childOffset.top + containerOffsetWithBoundary.top // this is the top of the trigger
+function $edcf132a9284368a$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, isContainerPositioned, margins, padding, overlayHeight, heightGrowthDirection) {
+    const containerHeight = isContainerPositioned ? containerOffsetWithBoundary.height : boundaryDimensions[$edcf132a9284368a$var$TOTAL_SIZE.height];
+    // For cases where position is set via "bottom" instead of "top", we need to calculate the true overlay top with respect to the boundary. Reverse calculate this with the same method
+    // used in computePosition.
+    let overlayTop = position.top != null ? containerOffsetWithBoundary.top + position.top : containerOffsetWithBoundary.top + (containerHeight - position.bottom - overlayHeight);
+    let maxHeight = heightGrowthDirection !== "top" ? // We want the distance between the top of the overlay to the bottom of the boundary
+    Math.max(0, boundaryDimensions.height + boundaryDimensions.top + boundaryDimensions.scroll.top // this is the bottom of the boundary
+     - overlayTop // this is the top of the overlay
+     - (margins.top + margins.bottom + padding // save additional space for margin and padding
+    )) : Math.max(0, overlayTop + overlayHeight // this is the bottom of the overlay
      - (boundaryDimensions.top + boundaryDimensions.scroll.top // this is the top of the boundary
     ) - (margins.top + margins.bottom + padding // save additional space for margin and padding
     ));
+    return Math.min(boundaryDimensions.height - padding * 2, maxHeight);
 }
 function $edcf132a9284368a$var$getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding, placementInfo) {
     let { placement: placement, axis: axis, size: size } = placementInfo;
@@ -5111,13 +5199,22 @@ function $edcf132a9284368a$export$6839422d1f33cee9(placementInput, childOffset,
             normalizedOffset = offset;
         }
     }
-    let delta = $edcf132a9284368a$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding);
+    // Determine the direction the height of the overlay can grow so that we can choose how to calculate the max height
+    let heightGrowthDirection = "bottom";
+    if (placementInfo.axis === "top") {
+        if (placementInfo.placement === "top") heightGrowthDirection = "top";
+        else if (placementInfo.placement === "bottom") heightGrowthDirection = "bottom";
+    } else if (placementInfo.crossAxis === "top") {
+        if (placementInfo.crossPlacement === "top") heightGrowthDirection = "bottom";
+        else if (placementInfo.crossPlacement === "bottom") heightGrowthDirection = "top";
+    }
+    let delta = $edcf132a9284368a$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
     position[crossAxis] += delta;
-    let maxHeight = $edcf132a9284368a$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding);
+    let maxHeight = $edcf132a9284368a$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, isContainerPositioned, margins, padding, overlaySize.height, heightGrowthDirection);
     if (userSetMaxHeight && userSetMaxHeight < maxHeight) maxHeight = userSetMaxHeight;
     overlaySize.height = Math.min(overlaySize.height, maxHeight);
     position = $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
-    delta = $edcf132a9284368a$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding);
+    delta = $edcf132a9284368a$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
     position[crossAxis] += delta;
     let arrowPosition = {};
     // All values are transformed so that 0 is at the top/left of the overlay depending on the orientation
@@ -5159,7 +5256,14 @@ function $edcf132a9284368a$export$b3ceb0cbf1056d98(opts) {
     let scrollSize = $edcf132a9284368a$var$getScroll(scrollNode);
     let boundaryDimensions = $edcf132a9284368a$var$getContainerDimensions(boundaryElement);
     let containerDimensions = $edcf132a9284368a$var$getContainerDimensions(container);
+    // If the container is the HTML element wrapping the body element, the retrieved scrollTop/scrollLeft will be equal to the
+    // body element's scroll. Set the container's scroll values to 0 since the overlay's edge position value in getDelta don't then need to be further offset
+    // by the container scroll since they are essentially the same containing element and thus in the same coordinate system
     let containerOffsetWithBoundary = boundaryElement.tagName === "BODY" ? $edcf132a9284368a$var$getOffset(container) : $edcf132a9284368a$var$getPosition(container, boundaryElement);
+    if (container.tagName === "HTML" && boundaryElement.tagName === "BODY") {
+        containerDimensions.scroll.top = 0;
+        containerDimensions.scroll.left = 0;
+    }
     return $edcf132a9284368a$export$6839422d1f33cee9(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, maxHeight, arrowSize, arrowBoundaryOffset);
 }
 function $edcf132a9284368a$var$getOffset(node) {
@@ -5295,8 +5399,21 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
         arrowBoundaryOffset,
         arrowSize
     ];
+    // Note, the position freezing breaks if body sizes itself dynamicly with the visual viewport but that might
+    // just be a non-realistic use case
+    // Upon opening a overlay, record the current visual viewport scale so we can freeze the overlay styles
+    let lastScale = (useRef)($2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.scale);
+    (useEffect)(()=>{
+        if (isOpen) lastScale.current = $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.scale;
+    }, [
+        isOpen
+    ]);
     let updatePosition = (useCallback)(()=>{
         if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) return;
+        if (($2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.scale) !== lastScale.current) return;
+        // Always reset the overlay's previous max height if not defined by the user so that we can compensate for
+        // RAC collections populating after a second render and properly set a correct max height + positioning when it populates.
+        if (!maxHeight && overlayRef.current) overlayRef.current.style.maxHeight = "none";
         let position = ($edcf132a9284368a$export$b3ceb0cbf1056d98)({
             placement: $2a41e45df1593e64$var$translateRTL(placement, direction),
             overlayNode: overlayRef.current,
@@ -5342,11 +5459,16 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
             }, 500);
             updatePosition();
         };
+        // Only reposition the overlay if a scroll event happens immediately as a result of resize (aka the virtual keyboard has appears)
+        // We don't want to reposition the overlay if the user has pinch zoomed in and is scrolling the viewport around.
+        let onScroll = ()=>{
+            if (isResizing.current) onResize();
+        };
         $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.addEventListener("resize", onResize);
-        $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.addEventListener("scroll", onResize);
+        $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.addEventListener("scroll", onScroll);
         return ()=>{
             $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.removeEventListener("resize", onResize);
-            $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.removeEventListener("scroll", onResize);
+            $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.removeEventListener("scroll", onScroll);
         };
     }, [
         updatePosition
@@ -6413,7 +6535,8 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
             let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
             if (element && (modality === "keyboard" || autoFocusRef.current)) {
                 if (!isVirtualized) ($2f04cbc44ee30ce0$export$53a0910f038337bd)(scrollRef.current, element);
-                ($2f04cbc44ee30ce0$export$c826860796309d1b)(element, {
+                // Avoid scroll in iOS VO, since it may cause overlay to close (i.e. RAC submenu)
+                if (modality !== "virtual") ($2f04cbc44ee30ce0$export$c826860796309d1b)(element, {
                     containingElement: ref.current
                 });
             }
@@ -6742,7 +6865,7 @@ class $2a25aae57d74318e$export$a05409b8bb224a5a {
         let key = this.collection.getFirstKey();
         while(key != null){
             let item = this.collection.getItem(key);
-            if (item.type === "item" && !this.disabledKeys.has(key)) return key;
+            if ((item === null || item === void 0 ? void 0 : item.type) === "item" && !this.disabledKeys.has(key)) return key;
             key = this.collection.getKeyAfter(key);
         }
         return null;
@@ -7759,120 +7882,6 @@ function $168583247155ddda$export$dc9c12ed27dd1b49(props, state, ref) {
     };
 }
 
-/*
- * 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.
- */ /*
- * 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.
- */ 
-
-
-
-
-
-
-function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
-    let { inputElementType: inputElementType = "input", isDisabled: isDisabled = false, isRequired: isRequired = false, isReadOnly: isReadOnly = false, type: type = "text", validationBehavior: validationBehavior = "aria" } = props;
-    let [value, setValue] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, props.defaultValue || "", props.onChange);
-    let { focusableProps: focusableProps } = ($e6afbd83fe6ebbd2$export$4c014de7c8940b4c)(props, ref);
-    let validationState = ($e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
-        ...props,
-        value: value
-    });
-    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation;
-    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = ($2baaea4c71418dea$export$294aa081a6c6f55d)({
-        ...props,
-        isInvalid: isInvalid,
-        errorMessage: props.errorMessage || validationErrors
-    });
-    let domProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props, {
-        labelable: true
-    });
-    const inputOnlyProps = {
-        type: type,
-        pattern: props.pattern
-    };
-    ($99facab73266f662$export$5add1d006293d136)(ref, value, setValue);
-    ($e93e671b31057976$export$b8473d3665f3a75a)(props, validationState, ref);
-    (useEffect)(()=>{
-        // This works around a React/Chrome bug that prevents textarea elements from validating when controlled.
-        // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,
-        // which causes Chrome to skip validation. Only updating `value` is ok in our case since our
-        // textareas are always controlled. React is planning on removing this synchronization in a
-        // future major version.
-        // https://github.com/facebook/react/issues/19474
-        // https://github.com/facebook/react/issues/11896
-        if (ref.current instanceof ($431fbd86ca7dc216$export$f21a1ffae260145a)(ref.current).HTMLTextAreaElement) {
-            let input = ref.current;
-            Object.defineProperty(input, "defaultValue", {
-                get: ()=>input.value,
-                set: ()=>{},
-                configurable: true
-            });
-        }
-    }, [
-        ref
-    ]);
-    return {
-        labelProps: labelProps,
-        inputProps: ($3ef42575df84b30b$export$9d1611c77c2fe928)(domProps, inputElementType === "input" && inputOnlyProps, {
-            disabled: isDisabled,
-            readOnly: isReadOnly,
-            required: isRequired && validationBehavior === "native",
-            "aria-required": isRequired && validationBehavior === "aria" || undefined,
-            "aria-invalid": isInvalid || undefined,
-            "aria-errormessage": props["aria-errormessage"],
-            "aria-activedescendant": props["aria-activedescendant"],
-            "aria-autocomplete": props["aria-autocomplete"],
-            "aria-haspopup": props["aria-haspopup"],
-            value: value,
-            onChange: (e)=>setValue(e.target.value),
-            autoComplete: props.autoComplete,
-            autoCapitalize: props.autoCapitalize,
-            maxLength: props.maxLength,
-            minLength: props.minLength,
-            name: props.name,
-            placeholder: props.placeholder,
-            inputMode: props.inputMode,
-            // Clipboard events
-            onCopy: props.onCopy,
-            onCut: props.onCut,
-            onPaste: props.onPaste,
-            // Composition events
-            onCompositionEnd: props.onCompositionEnd,
-            onCompositionStart: props.onCompositionStart,
-            onCompositionUpdate: props.onCompositionUpdate,
-            // Selection events
-            onSelect: props.onSelect,
-            // Input events
-            onBeforeInput: props.onBeforeInput,
-            onInput: props.onInput,
-            ...focusableProps,
-            ...fieldProps
-        }),
-        descriptionProps: descriptionProps,
-        errorMessageProps: errorMessageProps,
-        isInvalid: isInvalid,
-        validationErrors: validationErrors,
-        validationDetails: validationDetails
-    };
-}
-
 var $682989befd4f478d$exports = {};
 $682989befd4f478d$exports = {
     "deselectedItem": (args)=>`${args.item} \u{63A}\u{64A}\u{631} \u{627}\u{644}\u{645}\u{62D}\u{62F}\u{62F}`,
@@ -9390,7 +9399,7 @@ function $d7323bca8d074eeb$export$4f8b5cda58b7e8ff(props, state, ref) {
     // If the last tag is removed, focus the container.
     let prevCount = (useRef)(state.collection.size);
     (useEffect)(()=>{
-        if (prevCount.current > 0 && state.collection.size === 0 && isFocusWithin) ref.current.focus();
+        if (ref.current && prevCount.current > 0 && state.collection.size === 0 && isFocusWithin) ref.current.focus();
         prevCount.current = state.collection.size;
     }, [
         state.collection.size,
@@ -9502,18 +9511,19 @@ function $fc6126c82a4601f1$export$3f568fff7dff2f03(props, state, ref) {
     }, state, ref);
     // We want the group to handle keyboard navigation between tags.
     delete rowProps.onKeyDownCapture;
-    delete states.descriptionProps;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let { descriptionProps: _, ...stateWithoutDescription } = states;
     let onKeyDown = (e)=>{
         if (e.key === "Delete" || e.key === "Backspace") {
             e.preventDefault();
-            if (state.selectionManager.isSelected(item.key)) onRemove(new Set(state.selectionManager.selectedKeys));
-            else onRemove(new Set([
+            if (state.selectionManager.isSelected(item.key)) onRemove === null || onRemove === void 0 ? void 0 : onRemove(new Set(state.selectionManager.selectedKeys));
+            else onRemove === null || onRemove === void 0 ? void 0 : onRemove(new Set([
                 item.key
             ]));
         }
     };
     let modality = ($507fabe10e71c6fb$export$98e20ec92f614cfe)();
-    if (modality === "virtual" && typeof window !== "undefined" && "ontouchstart" in window) modality = "touch";
+    if (modality === "virtual" && typeof window !== "undefined" && "ontouchstart" in window) modality = "pointer";
     let description = onRemove && (modality === "keyboard" || modality === "virtual") ? stringFormatter.format("removeDescription") : "";
     let descProps = ($ef06256079686ba0$export$f8aeda7b10753fa1)(description);
     let isFocused = item.key === state.selectionManager.focusedKey;
@@ -9539,7 +9549,7 @@ function $fc6126c82a4601f1$export$3f568fff7dff2f03(props, state, ref) {
             "aria-errormessage": props["aria-errormessage"],
             "aria-label": props["aria-label"]
         }),
-        ...states,
+        ...stateWithoutDescription,
         allowsRemoving: !!onRemove
     };
 }
@@ -10573,7 +10583,10 @@ function $parcel$interopDefault(a) {
  * 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.
- */ /*
+ */ // Mark as a client only package. This will cause a build time error if you try 
+// to import it from a React Server Component in a framework like Next.js.
+
+/*
  * Copyright 2022 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
@@ -10983,7 +10996,7 @@ class $7135fc7d473fd974$export$b34a105447964f9f extends $7135fc7d473fd974$var$Ba
     updateCollection() {
         for (let element of this.dirtyNodes)if (element instanceof $7135fc7d473fd974$export$dc064fe9e59310fd && element.isConnected) element.updateNode();
         this.dirtyNodes.clear();
-        if (this.mutatedNodes.size) {
+        if (this.mutatedNodes.size || this.collectionMutated) {
             var _this_firstChild, _this_lastChild;
             let collection = this.getMutableCollection();
             for (let element of this.mutatedNodes)if (element.isConnected) collection.addNode(element.node);
@@ -11031,6 +11044,7 @@ class $7135fc7d473fd974$export$b34a105447964f9f extends $7135fc7d473fd974$var$Ba
 function $7135fc7d473fd974$export$727c8fc270210f13(props) {
     let { children: children, items: items, idScope: idScope, addIdAndValue: addIdAndValue, dependencies: dependencies = [] } = props;
     // Invalidate the cache whenever the parent value changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     let cache = (useMemo)(()=>new WeakMap(), dependencies);
     return (useMemo)(()=>{
         if (items && typeof children === "function") {
@@ -11580,22 +11594,6 @@ function $01b77f81d0f07f68$var$Label(props, ref) {
     });
 }
 const $01b77f81d0f07f68$export$b04be29aa201d4f5 = /*#__PURE__*/ ($64fa3d84918910a7$export$86427a43e3e48ebb)($01b77f81d0f07f68$var$Label);
-
-
-/*
- * Copyright 2022 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 $3985021b0ad6602f$export$37fb8590cf2c088c = /*#__PURE__*/ (createContext)({});
 const $d8f176866e6dc039$export$f55761759794cf55 = /*#__PURE__*/ (createContext)(null);
 function $d8f176866e6dc039$var$DropIndicator(props, ref) {
     let { render: render } = (useContext)($d8f176866e6dc039$export$f55761759794cf55);
@@ -11938,11 +11936,13 @@ function $eed445e0843c11d0$var$ListBoxItem(props, ref) {
  * A ListBoxItem represents an individual option in a ListBox.
  */ const $eed445e0843c11d0$export$a11e76429ed99b4 = /*#__PURE__*/ (forwardRef)($eed445e0843c11d0$var$ListBoxItem);
 function $eed445e0843c11d0$var$Option({ item: item }) {
+    var _item_props;
     let ref = ($df56164dff5785e2$export$4338b53315abf666)(item.props.ref);
     let state = (useContext)($eed445e0843c11d0$export$7c5906fe4f1f2af2);
     let { dragAndDropHooks: dragAndDropHooks, dragState: dragState, dropState: dropState } = (useContext)(($d8f176866e6dc039$export$d188a835a7bc5783));
     let { optionProps: optionProps, labelProps: labelProps, descriptionProps: descriptionProps, ...states } = ($293f70390ea03370$export$497855f14858aa34)({
-        key: item.key
+        key: item.key,
+        "aria-label": (_item_props = item.props) === null || _item_props === void 0 ? void 0 : _item_props["aria-label"]
     }, state, ref);
     let { hoverProps: hoverProps, isHovered: isHovered } = ($6179b936705e76d3$export$ae780daf29e6d456)({
         isDisabled: !states.allowsSelection && !states.hasAction
@@ -12159,6 +12159,7 @@ function $07b14b47974efb58$var$PopoverInner({ state: state, isExiting: isExiting
         isExiting: isExiting,
         portalContainer: UNSTABLE_portalContainer
     }, !props.isNonModal && state.isOpen && /*#__PURE__*/ ($dGqE5$react).createElement("div", {
+        "data-testid": "underlay",
         ...underlayProps,
         style: {
             position: "fixed",
@@ -12721,159 +12722,100 @@ function $eaf9e70818b436db$var$TagItem({ item: item }) {
     }, renderProps.children)));
 }
 
-
-
-
-
-
-const $216918bed6669f72$export$2dc6166a7e65358c = /*#__PURE__*/ (createContext)({});
-
-
-/*
- * Copyright 2022 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 $bcdf0525bf22703d$export$2129e27b3ef0d483 = /*#__PURE__*/ (createContext)(null);
-function $bcdf0525bf22703d$var$TextField(props, ref) {
-    [props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $bcdf0525bf22703d$export$2129e27b3ef0d483);
-    let inputRef = (useRef)(null);
-    let [labelRef, label] = ($64fa3d84918910a7$export$9d4c57ee4c6ffdd8)();
-    let [inputElementType, setInputElementType] = (useState)("input");
-    var _props_validationBehavior;
-    let { labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, ...validation } = ($2d73ec29415bd339$export$712718f7aec83d5)({
-        ...($64fa3d84918910a7$export$ef03459518577ad4)(props),
-        inputElementType: inputElementType,
-        label: label,
-        validationBehavior: (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : "native"
-    }, inputRef);
-    // Intercept setting the input ref so we can determine what kind of element we have.
-    // useTextField uses this to determine what props to include.
-    let inputOrTextAreaRef = (useCallback)((el)=>{
-        inputRef.current = el;
-        if (el) setInputElementType(el instanceof HTMLTextAreaElement ? "textarea" : "input");
-    }, []);
-    let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
-        ...props,
-        values: {
-            isDisabled: props.isDisabled || false,
-            isInvalid: validation.isInvalid
-        },
-        defaultClassName: "react-aria-TextField"
-    });
-    return /*#__PURE__*/ ($dGqE5$react).createElement("div", {
-        ...($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props),
-        ...renderProps,
-        ref: ref,
-        slot: props.slot || undefined,
-        "data-disabled": props.isDisabled || undefined,
-        "data-invalid": validation.isInvalid || undefined
-    }, /*#__PURE__*/ ($dGqE5$react).createElement(($64fa3d84918910a7$export$2881499e37b75b9a), {
-        values: [
-            [
-                ($01b77f81d0f07f68$export$75b6ee27786ba447),
-                {
-                    ...labelProps,
-                    ref: labelRef
-                }
-            ],
-            [
-                ($3985021b0ad6602f$export$37fb8590cf2c088c),
-                {
-                    ...inputProps,
-                    ref: inputOrTextAreaRef
-                }
-            ],
-            [
-                ($216918bed6669f72$export$2dc6166a7e65358c),
-                {
-                    ...inputProps,
-                    ref: inputOrTextAreaRef
-                }
-            ],
-            [
-                ($514c0188e459b4c0$export$9afb8bc826b033ea),
-                {
-                    slots: {
-                        description: descriptionProps,
-                        errorMessage: errorMessageProps
-                    }
-                }
-            ],
-            [
-                ($ee014567cb39d3f0$export$ff05c3ac10437e03),
-                validation
-            ]
-        ]
-    }, renderProps.children));
-}
-/**
- * A text field allows a user to enter a plain text value with a keyboard.
- */ (forwardRef)($bcdf0525bf22703d$var$TextField);
-
-var css_248z$5 = ".react-aria-Button {\n  border: none;\n  border-radius: var(--layout-border-radius-medium, 4px);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--layout-padding-small);\n  font: var(--typography-regular-body);\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.react-aria-Button[data-disabled] {\n  cursor: not-allowed;\n}\n.react-aria-Button[data-focused] {\n  outline: 2px solid var(--surface-primary-active);\n}\n\n/* Icon button */\n.react-aria-Button.icon {\n  align-items: center;\n  justify-content: space-around;\n}\n\n/* Sizes */\n.react-aria-Button.small {\n  min-height: 32px;\n}\n.react-aria-Button.small.icon {\n  padding: unset;\n  height: 32px;\n  width: 32px;\n}\n.react-aria-Button.medium {\n  min-height: 40px;\n}\n.react-aria-Button.medium.icon {\n  padding: unset;\n  height: 40px;\n  width: 40px;\n}\n\n/* Variant - Primary */\n.react-aria-Button.primary {\n  background: var(--surface-primary-default);\n  color: var(--typography-color-primary-invert);\n}\n.react-aria-Button.primary.danger {\n  background-color: var(--surface-danger-default);\n}\n.react-aria-Button.primary[data-disabled] {\n  background-color: var(--surface-primary-disabled);\n  color: var(--typography-color-disabled);\n}\n.react-aria-Button.primary[data-hovered] {\n  background-color: var(--surface-primary-hover);\n}\n.react-aria-Button.primary.danger[data-hovered] {\n  background-color: var(--surface-danger-hover);\n}\n\n/* Variant - Secondary */\n.react-aria-Button.secondary {\n  background-color: var(--surface-secondary-default);\n  border: 1px solid var(--surface-border-dark);\n  color: var(--typography-color-primary);\n}\n.react-aria-Button.secondary.danger {\n  border-color: var(--surface-support-border-color-danger);\n  color: var(--surface-danger-default);\n}\n.react-aria-Button.secondary[data-disabled] {\n  background-color: var(--surface-primary-disabled);\n  border-color: var(--surface-border-light);\n  color: var(--typography-color-disabled);\n}\n.react-aria-Button.secondary[data-hovered] {\n  background-color: var(--surface-secondary-hover);\n}\n.react-aria-Button.secondary.danger[data-hovered] {\n  background-color: var(--surface-support-surface-color-danger);\n}\n\n/* Variant - Tertiary */\n.react-aria-Button.tertiary {\n  background-color: var(--surface-tertiary-default);\n  color: var(--typography-color-primary);\n}\n.react-aria-Button.tertiary.danger {\n  color: var(--surface-danger-default);\n}\n.react-aria-Button.tertiary[data-disabled] {\n  background-color: var(--surface-tertiary-default);\n  color: var(--typography-color-disabled);\n}\n.react-aria-Button.tertiary[data-hovered] {\n  background-color: var(--surface-tertiary-hover);\n}\n.react-aria-Button.tertiary.danger[data-hovered] {\n  background-color: var(--surface-support-surface-color-danger);\n}\n\n/* Variant - Link */\n.react-aria-Button.link {\n  background-color: var(--surface-tertiary-default);\n  color: var(--typography-color-link);\n  text-decoration: underline;\n  text-underline-offset: 0.3em;\n}\n.react-aria-Button.link.danger {\n  color: var(--surface-danger-default);\n}\n.react-aria-Button.link[data-disabled] {\n  color: var(--typography-color-disabled);\n}\n";
+var css_248z$5 = ".bcds-react-aria-Button {\n  border: none;\n  border-radius: var(--layout-border-radius-medium, 4px);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--layout-padding-small);\n  font: var(--typography-regular-body);\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.bcds-react-aria-Button[data-disabled] {\n  cursor: not-allowed;\n}\n.bcds-react-aria-Button[data-focused] {\n  outline: 2px solid var(--surface-primary-active);\n}\n\n/* Icon button */\n.bcds-react-aria-Button.icon {\n  align-items: center;\n  justify-content: space-around;\n}\n\n/* Sizes */\n.bcds-react-aria-Button.small {\n  min-height: 32px;\n}\n.bcds-react-aria-Button.small.icon {\n  padding: unset;\n  height: 32px;\n  width: 32px;\n  min-width: 32px;\n}\n.bcds-react-aria-Button.medium {\n  min-height: 40px;\n}\n.bcds-react-aria-Button.medium.icon {\n  padding: unset;\n  height: 40px;\n  width: 40px;\n  min-width: 40px;\n}\n\n/* Variant - Primary */\n.bcds-react-aria-Button.primary {\n  background: var(--surface-primary-default);\n  color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Button.primary.danger {\n  background-color: var(--surface-danger-default);\n}\n.bcds-react-aria-Button.primary[data-disabled] {\n  background-color: var(--surface-primary-disabled);\n  color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.primary[data-hovered] {\n  background-color: var(--surface-primary-hover);\n}\n.bcds-react-aria-Button.primary.danger[data-hovered] {\n  background-color: var(--surface-danger-hover);\n}\n\n/* Variant - Secondary */\n.bcds-react-aria-Button.secondary {\n  background-color: var(--surface-secondary-default);\n  border: 1px solid var(--surface-border-dark);\n  color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.secondary.danger {\n  border-color: var(--surface-support-border-color-danger);\n  color: var(--surface-danger-default);\n}\n.bcds-react-aria-Button.secondary[data-disabled] {\n  background-color: var(--surface-primary-disabled);\n  border-color: var(--surface-border-light);\n  color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.secondary[data-hovered] {\n  background-color: var(--surface-secondary-hover);\n}\n.bcds-react-aria-Button.secondary.danger[data-hovered] {\n  background-color: var(--surface-support-surface-color-danger);\n}\n\n/* Variant - Tertiary */\n.bcds-react-aria-Button.tertiary {\n  background-color: var(--surface-tertiary-default);\n  color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.tertiary.danger {\n  color: var(--surface-danger-default);\n}\n.bcds-react-aria-Button.tertiary[data-disabled] {\n  background-color: var(--surface-tertiary-default);\n  color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.tertiary[data-hovered] {\n  background-color: var(--surface-tertiary-hover);\n}\n.bcds-react-aria-Button.tertiary.danger[data-hovered] {\n  background-color: var(--surface-support-surface-color-danger);\n}\n\n/* Variant - Link */\n.bcds-react-aria-Button.link {\n  background-color: var(--surface-tertiary-default);\n  color: var(--typography-color-link);\n  text-decoration: underline;\n  text-underline-offset: 0.3em;\n}\n.bcds-react-aria-Button.link.danger {\n  color: var(--surface-danger-default);\n}\n.bcds-react-aria-Button.link[data-disabled] {\n  color: var(--typography-color-disabled);\n}\n";
 styleInject(css_248z$5);
 
 function Button({ size = "medium", variant = "primary", danger = false, isIconButton = false, ...props }) {
-    return (jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: `react-aria-Button ${size} ${variant} ${danger ? "danger" : ""} ${isIconButton ? "icon" : ""}`, ...props }));
+    return (jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: `bcds-react-aria-Button ${size} ${variant} ${danger ? "danger" : ""} ${isIconButton ? "icon" : ""}`, ...props }));
 }
 
-var css_248z$4 = ".react-aria-Select {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--layout-margin-xsmall);\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Label above select input */\n.react-aria-Select--Label {\n  font: var(--typography-regular-label);\n}\n.react-aria-Select[data-disabled] > .react-aria-Select--Label {\n  color: var(--typography-color-disabled);\n}\n\n/* \"(optional)\" text after Label*/\n.react-aria-Select--Label > .optional {\n  color: var(--typography-color-disabled);\n}\n\n/* Select input equivalent */\n.react-aria-Select--Button {\n  background-color: var(--surface-secondary-default);\n  border: 1px solid var(--surface-border-light);\n  border-radius: var(--surface-border-radius-medium);\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  gap: var(--layout-margin-small);\n  align-items: center;\n  padding: 0 12px;\n  flex: 1 1 auto;\n}\n.react-aria-Select[data-invalid] > .react-aria-Select--Button {\n  border-color: var(--surface-support-border-color-danger);\n}\n.react-aria-Select--Button[data-disabled] {\n  background-color: var(--surface-secondary-disabled);\n  cursor: not-allowed;\n}\n.react-aria-Select--Button[data-hovered] {\n  border-color: var(--surface-border-dark);\n}\n.react-aria-Select--Button[data-focused] {\n  border-color: var(--surface-primary-active);\n  outline: none;\n}\n.react-aria-Select--Button[data-pressed] {\n  border-color: var(--surface-primary-active);\n}\n.react-aria-Select--Button.medium {\n  height: 40px;\n}\n.react-aria-Select--Button.small {\n  height: 32px;\n}\n.react-aria-Select--Button > .react-aria-SelectValue {\n  font: var(--typography-regular-body);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.react-aria-Select--Button > svg {\n  flex-shrink: 0;\n}\n\n/* Dropdown menu panel */\n.react-aria-Select--Popover {\n  background-color: var(--surface-secondary-default);\n  border: 1px solid var(--surface-border-light);\n  border-radius: var(--surface-border-radius-medium);\n  box-shadow: var(--surface-shadow-medium);\n  box-sizing: border-box;\n  overflow-y: auto;\n  padding: var(--layout-margin-hair) var(--layout-margin-xsmall);\n  width: var(--trigger-width);\n}\n.react-aria-Select--ListBox[data-focused] {\n  outline: none;\n}\n.react-aria-Select--ListBox > .react-aria-Section {\n  border-top: 1px solid var(--surface-border-light);\n  margin-top: 1px;\n  padding-top: 2px;\n}\n.react-aria-Select--ListBox > .react-aria-Section:first-child {\n  border-top: none;\n}\n\n/* Header label within Section of multi-section Select */\n.react-aria-Select--Header {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-label);\n  padding: var(--layout-margin-hair) var(--layout-margin-small);\n}\n\n/* ListBox option item */\n.react-aria-Select--ListBoxItem {\n  border-radius: var(--layout-margin-xsmall);\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  padding: 6.5px var(--layout-padding-small);\n}\n.react-aria-Select--ListBoxItem[data-focused],\n.react-aria-Select--ListBoxItem[data-hovered] {\n  background-color: var(--surface-secondary-hover);\n  outline: none;\n}\n.react-aria-Select--ListBoxItem-Text-container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n.react-aria-Select--ListBoxItem-Text-label {\n  font: var(--typography-regular-body);\n}\n.react-aria-Select--ListBoxItem.destructive {\n  color: var(--surface-danger-default);\n}\n.react-aria-Select--ListBoxItem.destructive\n  .react-aria-Select--ListBoxItem-Text-label {\n  color: var(--surface-danger-default);\n}\n.react-aria-Select--ListBoxItem-Text-description {\n  font: var(--typography-regular-label);\n  color: var(--typography-color-secondary);\n}\n";
+var css_248z$4 = ".bcds-header {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-around;\n  background-color: var(--surface-background-white);\n  border-bottom-color: var(--surface-border-light);\n  border-bottom-style: solid;\n  border-bottom-width: var(--layout-border-width-small);\n  min-height: 65px;\n  padding: var(--layout-padding-none) var(--layout-padding-medium);\n  width: 100%;\n}\n\n.bcds-header > .bcds-header--container {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-padding-medium);\n  max-width: 1100px;\n}\n\n.bcds-header > .bcds-header--container > .bcds-header--title {\n  flex-grow: 1;\n  font: var(--typography-bold-h4);\n  color: var(--typography-color-primary);\n}\n\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n}\n\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li a,\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li button {\n  background-color: var(--surface-background-white);\n  box-sizing: border-box;\n  color: var(--typography-color-link);\n  font: var(--typography-regular-body);\n  margin-top: -17.5px; /* Center the link visually in a single line header */\n  padding: var(--layout-padding-xsmall) var(--layout-padding-medium);\n  position: absolute;\n  margin-left: -100000px;\n}\n\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li a:focus,\n.bcds-header\n  > .bcds-header--container\n  > ul.bcds-header--skiplinks\n  li\n  button:focus {\n  margin-left: 0; /* Line up left edge with left edge of logo image */\n  text-wrap: nowrap;\n}\n\n.bcds-header > .bcds-header--container > .bcds-header--line {\n  background-color: var(--surface-border-light);\n  width: 1px;\n  height: 32px;\n}\n\n.bcds-header > .bcds-header--container svg#bcgov-logo {\n  min-width: 129px;\n  width: 129px;\n}\n";
 styleInject(css_248z$4);
 
+// This logo is available as a plain SVG at src/assets/BCID_H_rgb_pos.svg
+function SvgBcLogo() {
+    return (jsxs("svg", { id: "bcgov-logo", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 847.65 327.01", children: [jsx("path", { d: "M109.59,226.32c44.7,0,106.54,25.17,151.41,25.17,32.02,0,63.26-8.54,81.04-21.13,1.24-7.39,1.9-14.97,1.9-22.72,0-75.13-60.91-136.04-136.04-136.04s-136.04,60.91-136.04,136.04c0,7.65.64,15.15,1.86,22.46,4.9-.91,21.57-3.79,35.87-3.79Z", style: { fill: "#fff", strokeWidth: "0px" } }), jsxs("g", { children: [jsxs("g", { children: [jsx("rect", { x: "415.4", y: "252.98", width: "314.66", height: "3.82", style: { fill: "#e3a82b", strokeWidth: "0px" } }), jsx("path", { d: "M423.47,116.64c0-6.39-.45-8.08-4.76-8.43l-3-.21c-.49-.39-.35-2.12.1-2.16,5.17-.46,11.69-.69,20.6-.69,6.04,0,11.79.43,16.1,2.42,4.12,1.81,7.28,5.26,7.28,10.79,0,6.22-4.03,9.41-9.77,11.83,0,.86.77,1.12,1.82,1.29,5.17.86,12.84,5.18,12.84,14.42,0,10.01-8.24,16.75-25.49,16.75-2.78,0-7.47-.26-11.5-.26s-7.47.17-11.02.26c-.57-.26-.77-1.64-.19-2.16l1.73-.26c5.08-.78,5.27-1.73,5.27-10.79v-32.8ZM431.32,128.12c0,2.42.1,2.59,4.98,2.42,9.77-.35,15.04-2.94,15.04-11.05s-7-11.65-14.28-11.65c-2.11,0-3.55.17-4.41.52-.96.26-1.34.69-1.34,2.24v17.52ZM431.32,148.14c0,3.11.19,7.51,2.01,9.41,1.82,1.98,4.7,2.42,7.57,2.42,8.53,0,15.04-3.45,15.04-12.08,0-6.82-3.83-14.76-19.07-14.76-5.17,0-5.56.52-5.56,2.24v12.77Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M531.26,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.06-.07,10.15-.22c.49.22.65,1.55.16,1.84l-2.04.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.04.22c.49.29.33,1.62-.16,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.66-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M576.66,151.53c0,7.74.15,8.85,4.6,9.22l2.45.22c.46.29.31,1.62-.15,1.84-4.37-.15-6.98-.22-10.05-.22s-5.75.07-10.66.22c-.46-.22-.62-1.47,0-1.84l2.76-.22c4.37-.37,4.75-1.48,4.75-9.22v-32.96c0-2.28,0-2.36-2.3-2.36h-4.22c-3.3,0-7.51.15-9.43,1.84-1.84,1.62-2.61,3.24-3.45,5.09-.62.44-1.69.07-1.99-.52,1.22-3.32,2.38-8.04,2.91-10.98.23-.15,1.23-.22,1.46,0,.46,2.36,2.99,2.29,6.52,2.29h31.05c4.14,0,4.83-.15,5.98-2.06.38-.15,1.23-.07,1.38.22-.84,3.02-1.38,9-1.15,11.21-.31.59-1.61.59-1.99.15-.23-1.84-.77-4.57-1.92-5.38-1.76-1.25-4.68-1.84-8.89-1.84h-5.44c-2.3,0-2.22.07-2.22,2.51v32.81Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M609.53,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.05-.07,10.15-.22c.49.22.66,1.55.17,1.84l-2.05.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.05.22c.49.29.33,1.62-.17,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.65-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M646.2,163.57c-7.31,0-11.92-1.92-13.57-2.73-1.04-1.62-2.18-6.86-2.35-10.32.44-.52,1.74-.66,2.09-.22,1.31,3.76,4.87,10.98,14.96,10.98,7.31,0,10.87-4.05,10.87-8.48,0-3.24-.78-6.86-7.13-10.32l-8.26-4.57c-4.35-2.43-9.4-6.64-9.4-12.68,0-7,6.44-12.68,17.75-12.68,2.7,0,5.83.44,8.09.96,1.13.29,2.35.44,3.04.44.78,1.77,1.57,5.9,1.57,9-.35.44-1.74.66-2.18.22-1.13-3.54-3.48-8.33-11.83-8.33s-10.35,4.79-10.35,8.18c0,4.28,4.18,7.38,7.39,9.07l6.96,3.69c5.48,2.88,10.88,7.15,10.88,14.16,0,8.11-7.22,13.64-18.53,13.64Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M689.99,138.78c-3.81,0-3.96.15-3.96,2.36v10.4c0,7.74.4,8.77,4.84,9.22l2.3.22c.48.29.32,1.62-.16,1.84-4.28-.15-6.98-.22-10.08-.22-3.41,0-6.11.15-9.2.22-.47-.22-.63-1.4-.16-1.84l1.35-.22c4.45-.74,4.6-1.48,4.6-9.22v-26.54c0-7.74-.55-8.99-4.68-9.29l-2.06-.15c-.48-.29-.32-1.62.16-1.84,3.89.07,6.58.22,10,.22,3.1,0,5.79-.07,9.2-.22.48.22.63,1.55.16,1.84l-1.51.15c-4.6.44-4.76,1.55-4.76,9.29v8.48c0,2.28.16,2.36,3.96,2.36h22.69c3.81,0,3.97-.07,3.97-2.36v-8.48c0-7.74-.16-8.85-4.84-9.29l-1.51-.15c-.48-.29-.32-1.62.16-1.84,3.65.15,6.35.22,9.6.22s5.79-.07,9.36-.22c.48.22.63,1.55.16,1.84l-1.66.15c-4.6.44-4.76,1.55-4.76,9.29v26.54c0,7.74.16,8.7,4.76,9.22l1.9.22c.47.29.32,1.62-.16,1.84-3.81-.15-6.51-.22-9.6-.22-3.25,0-6.11.07-9.6.22-.48-.22-.63-1.4-.16-1.84l1.51-.22c4.84-.74,4.84-1.48,4.84-9.22v-10.4c0-2.21-.16-2.36-3.97-2.36h-22.69Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M378.06,179.01c6.52-5.07,14.83-7.57,24.12-7.57,4.82,0,11.61.98,15.81,2.14,1.07.27,1.7.45,2.5.36.09,2.05.54,7.65,1.25,13.09-.45.62-1.79.71-2.41.18-1.34-6.05-5.36-13-18.31-13-13.67,0-25.28,8.64-25.28,27.06s11.88,29.02,26.53,29.02c11.52,0,16.62-7.48,18.67-12.73.63-.44,1.97-.27,2.32.36-.62,4.63-2.95,10.5-4.29,12.2-1.07.18-2.14.53-3.13.89-1.97.71-8.4,2.05-14.11,2.05-8.04,0-15.72-1.6-22.24-5.96-7.15-4.9-12.69-12.99-12.69-24.48,0-9.88,4.47-18.34,11.26-23.59Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M426.92,207.81c0-14.75,11.61-26.03,27.56-26.03,17.88,0,26.86,12.31,26.86,25.29,0,14.89-11.92,25.73-26.86,25.73-17.19,0-27.56-11.72-27.56-25ZM473.6,209.35c0-12.17-5.65-25.29-20.44-25.29-8.05,0-18.5,5.24-18.5,21.38,0,10.91,5.57,25.07,20.82,25.07,9.29,0,18.12-6.64,18.12-21.16Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M568.68,201.47c0-4.57-.16-13.05-1.49-15.26-.55-.89-1.95-1.4-3.91-1.55l-1.95-.15c-.47-.52-.31-1.47.15-1.77,2.97.15,5.86.22,8.91.22,3.28,0,5.39-.08,8.21-.22.62.37.55,1.33.16,1.77l-1.88.15c-1.95.15-3.44.81-3.91,1.77-1.09,2.43-1.09,10.91-1.09,15.04v8.33c0,6.42-1.1,13.2-5.47,17.62-3.36,3.47-9.14,5.38-14.93,5.38-5.39,0-10.79-.96-14.62-4.05-4.14-3.24-6.1-8.63-6.1-17.4v-17.4c0-7.67-.16-8.92-4.69-9.29l-1.96-.15c-.47-.29-.31-1.55.15-1.77,3.91.15,6.57.22,9.69.22s5.78-.08,9.61-.22c.47.22.63,1.47.16,1.77l-1.88.15c-4.53.37-4.69,1.62-4.69,9.29v15.93c0,11.87,3.91,19.69,15.87,19.69,11.33,0,15.63-8.41,15.63-19.61v-8.48Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M659.52,192.26c0-5.51-.35-6.93-4.23-7.22l-2.77-.27c-.31-.28-.48-1.78.09-1.82,4.67-.35,10.54-.59,18.57-.59,5.44,0,10.62.37,14.51,2.08,3.71,1.57,6.56,4.54,6.56,9.31,0,5.36-3.63,8.12-8.81,10.2,0,.75.69.97,1.64,1.12,4.67.74,11.58,4.47,11.58,12.44,0,8.64-7.43,14.45-22.98,14.45-2.5,0-6.74-.22-10.37-.22s-6.74.15-9.93.22c-.52-.22-.69-1.41-.17-1.86l1.55-.22c4.58-.67,4.75-1.49,4.75-9.31v-28.3ZM666.6,202.16c0,2.09.09,2.24,4.49,2.09,8.81-.3,13.56-2.53,13.56-9.53s-6.3-10.05-12.87-10.05c-1.9,0-3.2.15-3.97.45-.87.22-1.21.59-1.21,1.94v15.12ZM666.6,219.44c0,2.68.17,6.48,1.81,8.12,1.64,1.71,4.23,2.08,6.82,2.08,7.69,0,13.56-2.98,13.56-10.43,0-5.88-3.45-12.73-17.19-12.73-4.67,0-5.01.44-5.01,1.94v11.02Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M518.75,160.97l-2.05-.18c-.41-.04-.78-.1-1.13-.15-2.99-.53-4.19-3.2-5.6-5.67l-7.08-12.32c-1.22-2.05-2.53-4.82-5.33-5.21,7.25-.87,13.81-5.06,13.81-12.24,0-8.3-8.21-12.01-16.52-12.01-4.98,0-9.52.13-14.59.13-2.79,0-6.12-.13-8.92-.13-1.55,0-1.57.32-1.57,1.18,0,1.28.54.92,2.19,1.02,5.9.33,5.68,1.43,5.68,6.49v32.31c0,4.62.4,6-4.46,6.44,0,0-.74.08-1.17.12l-2.06.21c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.12,3.03-.12,2.69-.08,5.38-.28,8.06-.28s5.29.21,7.95.29h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.07-.2c-.42-.05-1.15-.11-1.15-.11-4.9-.33-4.6-1.71-4.6-6.46v-12.17c0-.71-.09-2.61.44-3.16.44-.48,1.22-.4,1.92-.4,6.64,0,6.55.63,9.7,6.16l8.56,15.4c.7,1.19,1.22,2.69,2.97,2.69h7.44c.94.03,1.92.06,3.01.1.49-.22.65-1.4.16-1.84ZM488.92,136.74c-1.49,0-4.46.55-4.46-1.42v-14.14c0-5.53.18-6.32,6.82-6.32,7.78,0,12.58,3.95,12.58,11.22,0,3.16-1.14,6.08-4.02,8.06-3.32,2.29-6.9,2.61-10.92,2.61Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxs("g", { children: [jsx("path", { d: "M490.53,194.2c0-7.74-.16-8.92-5.27-9.29l-2.03-.15c-.49-.3-.32-1.62.16-1.84,4.54.15,7.3.22,10.54.22s5.92-.07,9.98-.22c.49.22.65,1.55.16,1.84l-1.95.15c-4.78.37-4.95,1.55-4.95,9.29v25.66c0,4.64.24,6.56,1.7,7.96.89.81,2.43,1.7,8.84,1.7,6.89,0,8.6-.3,9.9-.96,1.62-.89,3.73-3.54,5.35-7.3.49-.37,2.03-.07,2.03.44,0,.81-2.27,8.33-3.41,10.32-4.13-.15-11.84-.22-20.2-.22h-7.46c-3.41,0-6,.07-10.54.22-.49-.22-.65-1.4-.16-1.84l2.43-.22c4.7-.44,4.87-1.48,4.87-9.22v-26.54Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M707.79,194.34c0-7.81-.16-9.07-4.86-9.44l-1.99-.15c-.48-.3-.32-1.62.16-1.84,3.98.15,6.69.22,10.03.22s5.89-.07,9.87-.22c.48.22.64,1.55.16,1.84l-1.99.15c-4.7.37-4.86,1.62-4.86,9.44v26.25c0,7.82.16,8.85,4.86,9.36l1.99.22c.48.3.32,1.62-.16,1.84-3.98-.15-6.69-.22-9.87-.22-3.35,0-6.05.07-10.03.22-.48-.22-.64-1.4-.16-1.84l1.99-.22c4.7-.52,4.86-1.55,4.86-9.36v-26.25Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M644.16,229.94c-.41-.04-1.17-.1-1.17-.1-.84-.08-1.59-.2-2.19-.86-1.03-1.1-.95-4.23-.95-5.48v-32.31c0-1.41-.34-4.46.69-5.56.52-.58,1.59-.67,2.55-.73h0c.58-.05.6-.05,1.11-.07l2.05-.15c.49-.3.33-1.62-.16-1.84-1.09.04-2.09.02-3.03.05h0s-8.7,0-8.7,0c-.95,0-1.81,0-2.32,1.02l-17.73,36.92-15.66-35.67c-.52-1.25-.6-2.27-2.24-2.27h-9.05c-.94-.03-1.98-.02-3.08-.06-.49.22-.66,1.55-.16,1.84l2.05.15c.42.03,1.19.09,1.19.09,3.4.22,3.61.98,3.3,4.55l-2.67,34.65c-.23,3.48-.42,5.32-4.07,5.66,0,0-.77.1-1.19.14l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,3-.1,3-.1,1.85-.09,3.73-.25,5.61-.25,2.03,0,4.06.19,6.1.27h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.04-.22c-.54-.04-1.14-.1-1.14-.1-5.26-.36-5.14-4.07-4.81-8.62l2.5-32.23h.6l16.95,39.66c.17.55.43,1.49,1.29,1.49.78,0,1.03-.86,1.29-1.41l19.1-40.68h.6v35.44c0,1.41.17,4.3-1.29,5.4-.76.57-3.25.91-3.25.91-.34.05-.7.1-1.11.15l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,2.99-.1,2.99-.1,2.77-.08,5.59-.28,8.41-.28,2.03,0,6,.19,6,.19.95.03,2.02.13,3.12.17.49-.22.66-1.4.16-1.84l-2.05-.22Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M777.13,230.14l-.28-.22c-.41-.04-.77-.09-1.11-.15-3.19-.71-4.43-4.55-5.61-7.29l-16.41-38.83c-.16-.47-.49-1.47-1.14-1.47-.89,0-1.14,1.08-1.38,1.7l-15.68,38.76c-.57,1.47-2.03,5.03-3.09,6.11-.81.83-1.86.99-2.99,1.1,0,0-.88.08-1.31.13l-1.93.2c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.11,3.03-.11,2.14-.03,4.29-.3,6.44-.3,1.81,0,3.61.19,5.41.27,0,0,1.94.07,3.03.11.49-.22.65-1.4.16-1.84l-2.05-.22c-.41-.04-1.11-.11-1.11-.11-1.89-.21-4.24-.55-4.24-2.62,0-1.39.65-3.02,1.14-4.25l2.44-5.8c1.22-2.78.73-3.1,3.98-3.1h11.05c3.9,0,3.33,0,5.04,3.95l2.6,5.88c.41,1.01,1.14,2.71,1.14,3.79,0,1.94-2.12,2.07-4.11,2.24,0,0-.66.06-1.23.1l-1.97.14c-.49.44-.33,1.62.17,1.84,1.09-.04,3.03-.12,3.03-.12,2.31-.08,4.64-.26,6.87-.26,2.85,0,5.69.19,8.54.27h0c.93.03.14.06,1.22.1.49-.22.65-1.4.16-1.84ZM755.64,211.89h-9.57c-.33,0-3,.31-3-.47,0-.24.17-.7.25-.94l5.75-14.23c.17-.39.75-2.35,1.41-2.35.5,0,1.17,2.03,1.33,2.35l5.66,13.29c0,.16.58,1.41.58,1.72,0,.86-1.91.62-2.41.62Z", style: { fill: "#234075", strokeWidth: "0px" } })] }), jsx("rect", { width: "847.65", height: "327.01", style: { fill: "none", strokeWidth: "0px" } })] }), jsxs("g", { children: [jsx("polygon", { points: "295.89 176.17 301.27 178.4 313.19 170.08 295.89 176.17", style: { fill: "#e3a82b", strokeWidth: "0px" } }), jsx("path", { d: "M95.46,166.88l-14.14-4.97.71-1.73,15.92,5.31.07-.04,2.1-1.19.84-.53-17.36-7.39.73-1.82,38.75,15.67,1.28-.53-38.44-18.73.86-1.76,40.73,18.96.56-.29-39.49-22.4.81-1.68,57.03,31.03c.47-.86,1.44-2.44,1.95-3.28-21.68-20.39-42.61-35.69-42.61-35.69,0,0,21.52,14.41,48.07,27.81.88-1.09,1.6-1.97,2.53-3.01l-48.65-42.83,1.31-1.34,39.27,33.47-36.38-36.43,1.36-1.41,40.84,39.47-38.02-42.2,1.45-1.31,35.14,37.63-32.07-40.41,1.38-1.26,41.11,50.03c1.06-.92,1.95-1.61,3.06-2.46-12.44-26.91-26.02-48.8-26.02-48.8,0,0,14.46,21.28,33.96,43.56,1.19-.67,2.4-1.31,3.63-1.92l-.21-.13-28.81-57.5,1.71-.75,23.87,45.74-20.08-47.41,1.79-.8,23.08,51.9-19.45-53.37,1.84-.67,18.49,48.05-14.6-49.49,1.75-.65,19.22,61.38-.04.16.05-.02c1.28-.43,2.58-.81,3.89-1.16-1.46-29.48-5.82-54.7-5.82-54.7,0,0,5.4,25,15.08,52.87,1.35-.17,2.71-.31,4.07-.4l-.04-.06h.17l-.1-.14-5.17-64.11,1.87-.06,5,51.35-.86-51.48,1.96-.07,1.96,56.77,1.96-56.77,1.96.07-.86,51.48,5-51.35,1.87.06-5.17,64.11-.1.14h.03v.02s.07,0,.07,0c1.34.08,2.66.22,3.98.38,9.67-27.84,15.06-52.8,15.06-52.8,0,0-4.35,25.14-5.82,54.57,1.32.35,2.63.73,3.91,1.15l19.15-61.16,1.76.65-14.6,49.48,18.49-48.05,1.84.67-19.45,53.37,23.08-51.9,1.79.8-20.08,47.41,23.87-45.74,1.71.75-28.71,57.3.05.02c1.18.58,2.34,1.19,3.49,1.83,19.42-22.21,33.79-43.37,33.79-43.37,0,0-13.49,21.74-25.89,48.52,1.11.84,2.19,1.7,3.24,2.6l40.63-49.49,1.39,1.26-32.08,40.41,35.14-37.63,1.45,1.31-38.02,42.2,40.84-39.47,1.36,1.41-36.38,36.43,39.27-33.47,1.31,1.34-48.06,42.35.03.03c.84.94,1.65,1.9,2.44,2.88,26.39-13.34,47.71-27.62,47.71-27.62,0,0-20.72,15.16-42.29,35.4.59.99,1.55,2.67,2.09,3.69l56.22-30.61.81,1.69-44.88,25.45,46.68-21.72.86,1.76-43.48,21.19.83.29,44.24-17.89.74,1.82-41.12,17.49.77.32,27.4-9.13,4.13-2.88,1.37,1.05,9.02-3.01.71,1.73-7.8,2.75,11.27,8.6,3.61,2.01c-14.49-60.58-68.98-105.62-134-105.62s-121.42,46.63-134.73,108.82c.17-.08.34-.16.51-.24l1.65-.75,1.01-.47,19.01-10.66Z", style: { fill: "#e3a82b", strokeWidth: "0px" } })] }), jsx("path", { d: "M72.5,233.02s20.32-4.06,37.29-4.06c44.7,0,106.54,25.17,151.41,25.17,32.91,0,65.02-9.03,82.51-22.19,1.37-7.79,2.08-15.8,2.08-23.98,0-11.08-1.32-21.85-3.79-32.17l-18.7-10.43-21.95,15.39-14.76-5.75c-5,2.53-35.83,23.15-35.83,23.15l-11.84-8.57-12.7-2.51-16.93-12.33-19.42,13.33s-21.67,12.58-22.41,12.58-26.14-20.13-26.14-20.13l-11.7-12.33c-1.99,1.26-9.95,4.91-9.95,4.91l-.41.11-7.7-2.38-9.35-4.96-28.41,12.88c-.17.08-.34.16-.51.24-2,9.34-3.06,19.03-3.06,28.96,0,8.56.79,16.93,2.28,25.06Z", style: { fill: "#234075", strokeWidth: "0px" } })] })] }));
+}
+function Header({ children, logoLinkElement, logoImage = jsx(SvgBcLogo, {}), skipLinks, title = "", titleElement = "span", }) {
+    function getLogo() {
+        if (!logoLinkElement)
+            return (jsx("a", { href: "/", title: "Government of British Columbia", children: logoImage }));
+        return $dGqE5$react.cloneElement(logoLinkElement, { children: logoImage });
+    }
+    function getTitle() {
+        switch (titleElement) {
+            case "h1":
+                return jsx("h1", { className: "bcds-header--title", children: title });
+            case "h2":
+                return jsx("h2", { className: "bcds-header--title", children: title });
+            case "h3":
+                return jsx("h3", { className: "bcds-header--title", children: title });
+            case "h4":
+                return jsx("h4", { className: "bcds-header--title", children: title });
+            case "h5":
+                return jsx("h5", { className: "bcds-header--title", children: title });
+            case "h6":
+                return jsx("h6", { className: "bcds-header--title", children: title });
+            case "p":
+                return jsx("p", { className: "bcds-header--title", children: title });
+            default:
+                return jsx("span", { className: "bcds-header--title", children: title });
+        }
+    }
+    return (jsx("header", { className: "bcds-header", children: jsxs("div", { className: "bcds-header--container", children: [getLogo(), skipLinks && (jsx("ul", { className: "bcds-header--skiplinks", children: skipLinks.map((link, index) => {
+                        return jsx("li", { children: link }, `skiplink-${index}`);
+                    }) })), title && (jsxs(Fragment, { children: [jsx("div", { className: "bcds-header--line" }), getTitle()] })), children] }) }));
+}
+
+var css_248z$3 = ".bcds-react-aria-Select {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--layout-margin-xsmall);\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Label above select input */\n.bcds-react-aria-Select--Label {\n  font: var(--typography-regular-label);\n}\n.bcds-react-aria-Select[data-disabled] > .bcds-react-aria-Select--Label {\n  color: var(--typography-color-disabled);\n}\n\n/* \"(optional)\" text after Label*/\n.bcds-react-aria-Select--Label > .optional {\n  color: var(--typography-color-disabled);\n}\n\n/* Select input equivalent */\n.bcds-react-aria-Select--Button {\n  background-color: var(--surface-secondary-default);\n  border: 1px solid var(--surface-border-light);\n  border-radius: var(--surface-border-radius-medium);\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  gap: var(--layout-margin-small);\n  align-items: center;\n  padding: 0 12px;\n}\n.bcds-react-aria-Select--Button.invalid {\n  border-color: var(--surface-support-border-color-danger);\n}\n.bcds-react-aria-Select[data-invalid] > .bcds-react-aria-Select--Button {\n  border-color: var(--surface-support-border-color-danger);\n}\n.bcds-react-aria-Select--Button[data-disabled] {\n  background-color: var(--surface-secondary-disabled);\n  cursor: not-allowed;\n}\n.bcds-react-aria-Select--Button[data-hovered] {\n  border-color: var(--surface-border-dark);\n}\n.bcds-react-aria-Select--Button[data-focused] {\n  border-color: var(--surface-primary-active);\n  outline: none;\n}\n.bcds-react-aria-Select--Button[data-pressed] {\n  border-color: var(--surface-primary-active);\n}\n.bcds-react-aria-Select--Button.medium {\n  height: 40px;\n}\n.bcds-react-aria-Select--Button.small {\n  height: 32px;\n}\n.bcds-react-aria-Select--Button > .bcds-react-aria-SelectValue {\n  font: var(--typography-regular-body);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.bcds-react-aria-Select--Button > svg {\n  flex-shrink: 0;\n}\n\n/* Dropdown menu panel */\n.bcds-react-aria-Select--Popover {\n  background-color: var(--surface-secondary-default);\n  border: 1px solid var(--surface-border-light);\n  border-radius: var(--surface-border-radius-medium);\n  box-shadow: var(--surface-shadow-medium);\n  box-sizing: border-box;\n  overflow-y: auto;\n  padding: var(--layout-margin-hair) var(--layout-margin-xsmall);\n  width: var(--trigger-width);\n}\n.bcds-react-aria-Select--ListBox[data-focused] {\n  outline: none;\n}\n.bcds-react-aria-Select--ListBox > .bcds-react-aria-Section:not(:first-child) {\n  border-top: 1px solid var(--surface-border-light);\n  margin-top: 1px;\n  padding-top: 2px;\n}\n\n/* Header label within Section of multi-section Select */\n.bcds-react-aria-Select--Header {\n  color: var(--typography-color-secondary);\n  font: var(--typography-regular-label);\n  padding: var(--layout-margin-hair) var(--layout-margin-small);\n}\n\n/* ListBox option item */\n.bcds-react-aria-Select--ListBoxItem {\n  border-radius: var(--layout-margin-xsmall);\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  padding: 6.5px var(--layout-padding-small);\n}\n.bcds-react-aria-Select--ListBoxItem[data-focused],\n.bcds-react-aria-Select--ListBoxItem[data-hovered] {\n  background-color: var(--surface-secondary-hover);\n  outline: none;\n}\n.bcds-react-aria-Select--ListBoxItem-icon {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  /* This `min-width` rule can cause horizontal overflow on very narrow Select\n  instances, but if we leave it out, the icons will shrink instead. */\n  min-width: 20px;\n}\n.bcds-react-aria-Select--ListBoxItem-Text-container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n.bcds-react-aria-Select--ListBoxItem-Text-label {\n  font: var(--typography-regular-body);\n}\n.bcds-react-aria-Select--ListBoxItem.destructive {\n  color: var(--surface-danger-default);\n}\n.bcds-react-aria-Select--ListBoxItem.destructive\n  .bcds-react-aria-Select--ListBoxItem-Text-label {\n  color: var(--surface-danger-default);\n}\n.bcds-react-aria-Select--ListBoxItem-Text-description {\n  font: var(--typography-regular-label);\n  color: var(--typography-color-secondary);\n}\n";
+styleInject(css_248z$3);
+
 function ChevronDown() {
     return (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M15.7882 9.15569L10.4858 14.236C10.3192 14.3748 10.1527 14.4303 10.0139 14.4303C9.84731 14.4303 9.68074 14.3748 9.54194 14.2637L4.21182 9.15569C3.9342 8.90584 3.9342 8.46167 4.18405 8.21182C4.4339 7.9342 4.87808 7.9342 5.12793 8.18405L10.0139 12.8479L14.872 8.18405C15.1219 7.9342 15.5661 7.9342 15.8159 8.21182C16.0658 8.46167 16.0658 8.90584 15.7882 9.15569Z", fill: "currentColor" }) }));
 }
 function ChevronUp() {
     return (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M4.21231 13.3146L9.52695 8.2226C9.6939 8.08348 9.86086 8 10.0278 8C10.1948 8 10.3339 8.05565 10.473 8.16695L15.7876 13.259C16.066 13.5372 16.066 13.9546 15.8155 14.2051C15.5651 14.4833 15.1477 14.4833 14.8694 14.2329L10.0278 9.61387L5.13054 14.2885C4.88011 14.539 4.43491 14.539 4.18448 14.2607C3.93405 13.9825 3.93405 13.5651 4.21231 13.3146Z", fill: "currentColor" }) }));
 }
-function Select({ items, sections, label, size = "medium", ...props }) {
-    return (jsx($82d7e5349645de74$export$ef9b1a59e592288f, { ...props, children: ({ isOpen, isRequired }) => (jsxs(Fragment, { children: [label && (jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "react-aria-Select--Label", children: [label, !isRequired && (jsxs(Fragment, { children: [" ", jsx("span", { className: "optional", children: "(optional)" })] }))] })), jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: `react-aria-Select--Button ${size === "medium" ? "medium" : "small"}`, children: [jsx($82d7e5349645de74$export$e288731fd71264f0, { children: (value) => value?.selectedText ? value.selectedText : "Select an item" }), isOpen ? jsx(ChevronUp, {}) : jsx(ChevronDown, {})] }), jsx($07b14b47974efb58$export$5b6b19405a83ff9d, { className: "react-aria-Select--Popover", offset: 4, children: jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "react-aria-Select--ListBox", items: sections
+/** Select displays a collapsible list of options and allows a user to select one of them. */
+function Select({ items, sections, label, placeholder, size = "medium", ...props }) {
+    return (jsx($82d7e5349645de74$export$ef9b1a59e592288f, { ...props, children: ({ isOpen, isRequired, isInvalid }) => (jsxs(Fragment, { children: [label && (jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-Select--Label", children: [label, !isRequired && (jsxs(Fragment, { children: [" ", jsx("span", { className: "optional", children: "(optional)" })] }))] })), jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: `bcds-react-aria-Select--Button ${size === "medium" ? "medium" : "small"} ${isInvalid && "invalid"}`, children: [jsx($82d7e5349645de74$export$e288731fd71264f0, { className: "bcds-react-aria-SelectValue", children: (value) => {
+                                if (value.selectedText)
+                                    return value.selectedText;
+                                if (placeholder)
+                                    return placeholder;
+                                return "Select an item";
+                            } }), isOpen ? jsx(ChevronUp, {}) : jsx(ChevronDown, {})] }), jsx($07b14b47974efb58$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Select--Popover", offset: 4, children: jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "bcds-react-aria-Select--ListBox", 
+                        // This ternary statement is used to mock the data for `sections`
+                        // if a flat list of `items` was passed instead. This allows us to
+                        // use one component to support both flat and sectioned lists of
+                        // items. If this causes problems, maybe in the future we break
+                        // this into separate components or add additional logic to
+                        // support different markup within the same component.
+                        items: sections
                             ? sections
-                            : [{ id: "1", header: "", items: items ? items : [] }], children: (section) => (jsxs($7135fc7d473fd974$export$6e2c8f0811a474ce, { id: section.id, children: [section?.header && (jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "react-aria-Select--Header", children: section.header })), jsx($7135fc7d473fd974$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsxs($eed445e0843c11d0$export$a11e76429ed99b4, { id: item?.id ? item.id : item.label, className: `react-aria-Select--ListBoxItem ${item?.isDestructive ? "destructive" : ""}`, textValue: item.label, children: [item?.iconLeft, jsxs("div", { className: "react-aria-Select--ListBoxItem-Text-container", children: [jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "label", className: "react-aria-Select--ListBoxItem-Text-label", children: item.label }), item.description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "react-aria-Select--ListBoxItem-Text-description", children: item.description }))] }), item?.iconRight] })) })] })) }) })] })) }));
-}
-
-var css_248z$3 = "/* ListBox option item */\n.react-aria-Select--ListBoxItem {\n  border-radius: var(--layout-margin-xsmall);\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  padding: 6.5px var(--layout-padding-small);\n}\n.react-aria-Select--ListBoxItem[data-hovered] {\n  background-color: var(--surface-secondary-hover);\n  outline: none;\n}\n.react-aria-Select--ListBoxItem-Text-container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n.react-aria-Select--ListBoxItem-Text-label {\n  font: var(--typography-regular-body);\n}\n.react-aria-Select--ListBoxItem.destructive\n  .react-aria-Select--ListBoxItem-Text-label {\n  color: var(--surface-danger-default);\n}\n.react-aria-Select--ListBoxItem-Text-description {\n  font: var(--typography-regular-label);\n  color: var(--typography-color-secondary);\n}\n";
-styleInject(css_248z$3);
-
-function SelectItem({ description, id, iconLeft, iconRight, isDestructive, label, }) {
-    return (jsxs($eed445e0843c11d0$export$a11e76429ed99b4, { id: id ? id : label, className: `react-aria-Select--ListBoxItem ${isDestructive ? "destructive" : ""}`, textValue: label, children: [iconLeft, jsxs("div", { className: "react-aria-Select--ListBoxItem-Text-container", children: [jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "label", className: "react-aria-Select--ListBoxItem-Text-label", children: label }), description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "react-aria-Select--ListBoxItem-Text-description", children: description }))] }), iconRight] }));
+                            : [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxs($7135fc7d473fd974$export$6e2c8f0811a474ce, { id: section.id, className: "bcds-react-aria-Section", children: [section?.header && (jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "bcds-react-aria-Select--Header", children: section.header })), jsx($7135fc7d473fd974$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsxs($eed445e0843c11d0$export$a11e76429ed99b4, { id: item?.id ? item.id : item.label, className: `bcds-react-aria-Select--ListBoxItem ${item?.isDestructive ? "destructive" : ""}`, textValue: item.label, children: [item?.iconLeft && (jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconLeft })), jsxs("div", { className: "bcds-react-aria-Select--ListBoxItem-Text-container", children: [jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "label", className: "bcds-react-aria-Select--ListBoxItem-Text-label", children: item.label }), item.description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-Select--ListBoxItem-Text-description", children: item.description }))] }), item?.iconRight && (jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconRight }))] })) })] })) }) })] })) }));
 }
 
-var css_248z$2 = ".react-aria-Tag {\n  color: var(--typography-color-primary, #2d2d2d);\n  cursor: pointer;\n  border-radius: var(--layout-margin-hair, 2px);\n  border: 1px solid;\n  box-sizing: content-box;\n  font: var(--typography-regular-label, 400 0.875rem/1.313rem \"BC Sans\");\n  padding: 2px 8px;\n  width: fit-content;\n}\n.react-aria-Tag__contents {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.react-aria-Tag__contents .react-aria-Button {\n  background: none;\n  border: none;\n  color: var(--typography-color-primary, #2d2d2d);\n  cursor: pointer;\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n/* Tag colors */\n.react-aria-Tag.bc-blue {\n  background-color: var(--surface-color-primary-default, #013366);\n  border-color: var(--surface-color-primary-hover, #1e5189);\n  color: var(--typography-color-primary-invert, #ffffff);\n}\n.react-aria-Tag.bc-blue .react-aria-Tag__contents > .react-aria-Button {\n  color: var(--typography-color-primary-invert, #ffffff);\n}\n.react-aria-Tag.bc-gold {\n  background-color: var(--surface-color-brand-gold-60, #f8ba47);\n  border-color: var(--surface-color-primary-hover, #1e5189);\n}\n.react-aria-Tag.blue {\n  background-color: var(--surface-support-surface-color-info, #f7f9fc);\n  border-color: var(--surface-support-border-color-info, #053662);\n}\n.react-aria-Tag.dark {\n  border-color: var(--surface-primary-hover, #1e5189);\n  background: var(--surface-brand-gray-110, #252423);\n  color: var(--typography-color-primary-invert, #ffffff);\n}\n.react-aria-Tag.dark .react-aria-Tag__contents > .react-aria-Button {\n  color: var(--typography-color-primary-invert, #ffffff);\n}\n.react-aria-Tag.gray,\n.react-aria-Tag.grey {\n  background-color: var(--surface-brand-gray-20, #f3f2f1);\n  border-color: var(--surface-border-dark, #353433);\n}\n.react-aria-Tag.green {\n  background-color: var(--surface-support-surface-color-success, #f6fff8);\n  border-color: var(--surface-support-border-color-success, #42814a);\n}\n.react-aria-Tag.red {\n  background-color: var(--surface-support-surface-color-danger, #f4e1e2);\n  border-color: var(--surface-support-border-color-danger, #ce3e39);\n}\n.react-aria-Tag.yellow {\n  background-color: var(--surface-support-surface-color-warning, #fef1d8);\n  border-color: var(--surface-support-border-color-warning, #f8bb47);\n}\n\n/* Selected */\n.react-aria-Tag[data-selected] {\n  border: 2px solid var(--surface-primary-active, #2e5dd7);\n  padding: 1px 7px;\n}\n\n/* Focused */\n.react-aria-Tag[data-focused] {\n  outline: 4px solid #3b99fc;\n  outline-offset: 1px;\n}\n\n/* Disabled */\n.react-aria-Tag[data-disabled] {\n  background-color: var(--surface-primary-disabled, #edebe9);\n  border-color: var(--surface-border-light, #d8d8d8);\n  color: var(--typography-color-disabled, #9f9d9c);\n  cursor: not-allowed;\n}\n";
+var css_248z$2 = ".bcds-react-aria-Tag {\n  color: var(--typography-color-primary, #2d2d2d);\n  cursor: pointer;\n  border-radius: var(--layout-margin-hair, 2px);\n  border: 1px solid;\n  box-sizing: content-box;\n  font: var(--typography-regular-label, 400 0.875rem/1.313rem \"BC Sans\");\n  padding: 2px 8px;\n  width: fit-content;\n}\n.bcds-react-aria-Tag--contents {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.bcds-react-aria-Tag--contents .react-aria-Button {\n  background: none;\n  border: none;\n  color: var(--typography-color-primary, #2d2d2d);\n  cursor: pointer;\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n/* Tag colors */\n.bcds-react-aria-Tag.bc-blue {\n  background-color: var(--surface-color-primary-default, #013366);\n  border-color: var(--surface-color-primary-hover, #1e5189);\n  color: var(--typography-color-primary-invert, #ffffff);\n}\n.bcds-react-aria-Tag.bc-blue\n  .bcds-react-aria-Tag--contents\n  > .react-aria-Button {\n  color: var(--typography-color-primary-invert, #ffffff);\n}\n.bcds-react-aria-Tag.bc-gold {\n  background-color: var(--surface-color-brand-gold-60, #f8ba47);\n  border-color: var(--surface-color-primary-hover, #1e5189);\n}\n.bcds-react-aria-Tag.blue {\n  background-color: var(--surface-support-surface-color-info, #f7f9fc);\n  border-color: var(--surface-support-border-color-info, #053662);\n}\n.bcds-react-aria-Tag.dark {\n  border-color: var(--surface-primary-hover, #1e5189);\n  background: var(--surface-brand-gray-110, #252423);\n  color: var(--typography-color-primary-invert, #ffffff);\n}\n.bcds-react-aria-Tag.dark .bcds-react-aria-Tag--contents > .react-aria-Button {\n  color: var(--typography-color-primary-invert, #ffffff);\n}\n.bcds-react-aria-Tag.gray,\n.bcds-react-aria-Tag.grey {\n  background-color: var(--surface-brand-gray-20, #f3f2f1);\n  border-color: var(--surface-border-dark, #353433);\n}\n.bcds-react-aria-Tag.green {\n  background-color: var(--surface-support-surface-color-success, #f6fff8);\n  border-color: var(--surface-support-border-color-success, #42814a);\n}\n.bcds-react-aria-Tag.red {\n  background-color: var(--surface-support-surface-color-danger, #f4e1e2);\n  border-color: var(--surface-support-border-color-danger, #ce3e39);\n}\n.bcds-react-aria-Tag.yellow {\n  background-color: var(--surface-support-surface-color-warning, #fef1d8);\n  border-color: var(--surface-support-border-color-warning, #f8bb47);\n}\n\n/* Selected */\n.bcds-react-aria-Tag[data-selected] {\n  border: 2px solid var(--surface-primary-active, #2e5dd7);\n  padding: 1px 7px;\n}\n\n/* Focused */\n.bcds-react-aria-Tag[data-focused] {\n  outline: 4px solid #3b99fc;\n  outline-offset: 1px;\n}\n\n/* Disabled */\n.bcds-react-aria-Tag[data-disabled] {\n  background-color: var(--surface-primary-disabled, #edebe9);\n  border-color: var(--surface-border-light, #d8d8d8);\n  color: var(--typography-color-disabled, #9f9d9c);\n  cursor: not-allowed;\n}\n";
 styleInject(css_248z$2);
 
-function Tag({ className, color = "blue", icon, id, textValue, }) {
-    return (jsx($eaf9e70818b436db$export$3288d34c523a1192, { className: className ? className : `react-aria-Tag ${color}`, id: id, textValue: textValue, children: ({ allowsRemoving, isDisabled }) => (jsxs("div", { className: "react-aria-Tag__contents", children: [icon, textValue, !isDisabled && allowsRemoving && (jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { "aria-label": `Remove ${textValue}`, slot: "remove", children: jsx("svg", { width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { id: "Icons / Close", children: jsx("path", { id: "Vector", d: "M12.6004 3.03239L11.4684 1.90039L7.00039 6.36839L2.53239 1.90039L1.40039 3.03239L5.86839 7.50039L1.40039 11.9684L2.53239 13.1004L7.00039 8.63239L11.4684 13.1004L12.6004 11.9684L8.13239 7.50039L12.6004 3.03239Z", fill: "currentColor" }) }) }) }))] })) }));
+function Tag({ color = "blue", icon, id, textValue }) {
+    return (jsx($eaf9e70818b436db$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color}`, id: id, textValue: textValue, children: ({ allowsRemoving, isDisabled }) => (jsxs("div", { className: "bcds-react-aria-Tag--contents", children: [icon, textValue, !isDisabled && allowsRemoving && (jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { "aria-label": `Remove ${textValue}`, slot: "remove", children: jsx("svg", { width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { id: "Icons / Close", children: jsx("path", { id: "Vector", d: "M12.6004 3.03239L11.4684 1.90039L7.00039 6.36839L2.53239 1.90039L1.40039 3.03239L5.86839 7.50039L1.40039 11.9684L2.53239 13.1004L7.00039 8.63239L11.4684 13.1004L12.6004 11.9684L8.13239 7.50039L12.6004 3.03239Z", fill: "currentColor" }) }) }) }))] })) }));
 }
 
-var css_248z$1 = ".react-aria-TagGroup {\n  color: var(--typography-color-primary, #2d2d2d);\n  font: var(--typography-regular-label, 400 0.875rem/1.313rem \"BC Sans\");\n}\n\n.react-aria-TagGroup--Label,\n.react-aria-TagGroup--Text-description,\n.react-aria-TagGroup--Text-error {\n  display: block;\n  margin: var(--layout-margin-small) var(--layout-margin-none);\n}\n\n.react-aria-TagGroup--Text-error {\n  color: var(--surface-danger-default, #ce3e39);\n}\n";
+var css_248z$1 = ".bcds-react-aria-TagGroup {\n  color: var(--typography-color-primary, #2d2d2d);\n  font: var(--typography-regular-label, 400 0.875rem/1.313rem \"BC Sans\");\n}\n\n.bcds-react-aria-TagGroup--Label,\n.bcds-react-aria-TagGroup--Text-description,\n.bcds-react-aria-TagGroup--Text-error {\n  display: block;\n  margin: var(--layout-margin-small) var(--layout-margin-none);\n}\n\n.bcds-react-aria-TagGroup--Text-error {\n  color: var(--surface-danger-default, #ce3e39);\n}\n";
 styleInject(css_248z$1);
 
 function TagGroup({ children, label, description, errorMessage, ...props }) {
-    return (jsxs($eaf9e70818b436db$export$67ea30858aaf75e3, { ...props, children: [label && jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "react-aria-TagGroup--Label", children: label }), children, description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "react-aria-TagGroup--Text-description", children: description })), errorMessage && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "errorMessage", className: "react-aria-TagGroup--Text-error", children: errorMessage }))] }));
+    return (jsxs($eaf9e70818b436db$export$67ea30858aaf75e3, { className: "bcds-react-aria-TagGroup", ...props, children: [label && (jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TagGroup--Label", children: label })), children, description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-TagGroup--Text-description", children: description })), errorMessage && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "errorMessage", className: "bcds-react-aria-TagGroup--Text-error", children: errorMessage }))] }));
 }
 
-var css_248z = ".react-aria-TagList {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--layout-padding-small);\n  width: fit-content;\n}\n\n.react-aria-TagList.horizontal {\n  flex-direction: row;\n}\n\n.react-aria-TagList.vertical {\n  flex-direction: column;\n}\n";
+var css_248z = ".bcds-react-aria-TagList {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--layout-padding-small);\n  width: fit-content;\n}\n\n.bcds-react-aria-TagList.horizontal {\n  flex-direction: row;\n}\n\n.bcds-react-aria-TagList.vertical {\n  flex-direction: column;\n}\n";
 styleInject(css_248z);
 
 function TagList({ items, orientation = "horizontal", renderEmptyState, ...props }) {
-    return (jsx($eaf9e70818b436db$export$f9fef0f55402315b, { className: `react-aria-TagList ${orientation}`, ...props, renderEmptyState: renderEmptyState, items: items, children: (item) => createElement(Tag, { ...item, key: item.id }) }));
+    return (jsx($eaf9e70818b436db$export$f9fef0f55402315b, { className: `bcds-react-aria-TagList ${orientation}`, ...props, renderEmptyState: renderEmptyState, items: items, children: (item) => createElement(Tag, { ...item, key: item.id }) }));
 }
 
-export { Button, Select, SelectItem, Tag, TagGroup, TagList };
+export { Button, Header, Select, SvgBcLogo, Tag, TagGroup, TagList };
 //# sourceMappingURL=index.js.map