@teamturing/react-kit 2.11.0 → 2.13.0

package/dist/index.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var styled = require('styled-components');
+var ReactDOM = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -25,6 +26,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 
 /**
  * @public
@@ -509,7 +511,7 @@ const getValueAsType = (value, type) => {
         : value;
 };
 
-const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
+const clamp$1 = (min, max, v) => Math.min(Math.max(v, min), max);
 
 const number = {
     test: (v) => typeof v === "number",
@@ -518,7 +520,7 @@ const number = {
 };
 const alpha = {
     ...number,
-    transform: (v) => clamp(0, 1, v),
+    transform: (v) => clamp$1(0, 1, v),
 };
 const scale = {
     ...number,
@@ -1215,7 +1217,7 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
     return values;
 }
 
-const noop = (any) => any;
+const noop$1 = (any) => any;
 
 class Queue {
     constructor() {
@@ -1377,7 +1379,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     return { schedule, cancel, state, steps };
 }
 
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop$1, true);
 
 const svgMotionConfig = {
     useVisualState: makeUseVisualState({
@@ -1627,9 +1629,9 @@ function fireSyntheticPointerEvent(name, handler) {
 class PressGesture extends Feature {
     constructor() {
         super(...arguments);
-        this.removeStartListeners = noop;
-        this.removeEndListeners = noop;
-        this.removeAccessibleListeners = noop;
+        this.removeStartListeners = noop$1;
+        this.removeEndListeners = noop$1;
+        this.removeAccessibleListeners = noop$1;
         this.startPointerPress = (startEvent, startInfo) => {
             this.removeEndListeners();
             if (this.isPressing)
@@ -1895,8 +1897,8 @@ function resolveVariant(visualElement, definition, custom) {
 const optimizedAppearDataId = "framerAppearId";
 const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
 
-let warning = noop;
-let invariant = noop;
+let warning = noop$1;
+let invariant = noop$1;
 if (process.env.NODE_ENV !== "production") {
     warning = (check, message) => {
         if (!check && typeof console !== "undefined") {
@@ -2022,7 +2024,7 @@ function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
 function cubicBezier(mX1, mY1, mX2, mY2) {
     // If this is a linear gradient, return linear easing
     if (mX1 === mY1 && mX2 === mY2)
-        return noop;
+        return noop$1;
     const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
     // If animation is at start/end, return t without easing
     return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
@@ -2055,7 +2057,7 @@ const backInOut = mirrorEasing(backIn);
 const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
 
 const easingLookup = {
-    linear: noop,
+    linear: noop$1,
     easeIn,
     easeInOut,
     easeOut,
@@ -2102,7 +2104,7 @@ const splitColor = (aName, bName, cName) => (v) => {
     };
 };
 
-const clampRgbUnit = (v) => clamp(0, 255, v);
+const clampRgbUnit = (v) => clamp$1(0, 255, v);
 const rgbUnit = {
     ...number,
     transform: (v) => Math.round(clampRgbUnit(v)),
@@ -2303,7 +2305,7 @@ const cssVarTokeniser = {
     regex: cssVariableRegex,
     countKey: "Vars",
     token: "${v}",
-    parse: noop,
+    parse: noop$1,
 };
 const colorTokeniser = {
     regex: colorRegex,
@@ -2472,7 +2474,7 @@ function createMixers(output, ease, customMixer) {
     for (let i = 0; i < numMixers; i++) {
         let mixer = mixerFactory(output[i], output[i + 1]);
         if (ease) {
-            const easingFunction = Array.isArray(ease) ? ease[i] || noop : ease;
+            const easingFunction = Array.isArray(ease) ? ease[i] || noop$1 : ease;
             mixer = pipe(easingFunction, mixer);
         }
         mixers.push(mixer);
@@ -2526,7 +2528,7 @@ function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {})
         return mixers[i](progressInRange);
     };
     return isClamp
-        ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v))
+        ? (v) => interpolator(clamp$1(input[0], input[inputLength - 1], v))
         : interpolator;
 }
 
@@ -2620,8 +2622,8 @@ function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, })
     /**
      * Restrict dampingRatio and duration to within acceptable ranges.
      */
-    dampingRatio = clamp(minDamping, maxDamping, dampingRatio);
-    duration = clamp(minDuration, maxDuration$1, millisecondsToSeconds(duration));
+    dampingRatio = clamp$1(minDamping, maxDamping, dampingRatio);
+    duration = clamp$1(minDuration, maxDuration$1, millisecondsToSeconds(duration));
     if (dampingRatio < 1) {
         /**
          * Underdamped spring
@@ -3080,7 +3082,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
                     frameGenerator = mirroredGenerator;
                 }
             }
-            let p = clamp(0, 1, iterationProgress);
+            let p = clamp$1(0, 1, iterationProgress);
             if (currentTime > totalDuration) {
                 p = repeatType === "reverse" && iterationIsOdd ? 1 : 0;
             }
@@ -3363,7 +3365,7 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         attachTimeline(timeline) {
             animation.timeline = timeline;
             animation.onfinish = null;
-            return noop;
+            return noop$1;
         },
         get time() {
             return millisecondsToSeconds(animation.currentTime || 0);
@@ -3433,15 +3435,15 @@ function createInstantAnimation({ keyframes, delay, onUpdate, onComplete, }) {
             time: 0,
             speed: 1,
             duration: 0,
-            play: (noop),
-            pause: (noop),
-            stop: (noop),
+            play: (noop$1),
+            pause: (noop$1),
+            stop: (noop$1),
             then: (resolve) => {
                 resolve();
                 return Promise.resolve();
             },
-            cancel: (noop),
-            complete: (noop),
+            cancel: (noop$1),
+            complete: (noop$1),
         };
     };
     return delay
@@ -5029,7 +5031,7 @@ function calcOrigin(source, target) {
     else if (sourceLength > targetLength) {
         origin = progress(source.min, source.max - targetLength, target.min);
     }
-    return clamp(0, 1, origin);
+    return clamp$1(0, 1, origin);
 }
 /**
  * Rebase the calculated viewport constraints relative to the layout.min point.
@@ -5719,8 +5721,8 @@ function getCurrentDirection(offset, lockThreshold = 10) {
 class DragGesture extends Feature {
     constructor(node) {
         super(node);
-        this.removeGroupControls = noop;
-        this.removeListeners = noop;
+        this.removeGroupControls = noop$1;
+        this.removeListeners = noop$1;
         this.controls = new VisualElementDragControls(node);
     }
     mount() {
@@ -5730,7 +5732,7 @@ class DragGesture extends Feature {
         if (dragControls) {
             this.removeGroupControls = dragControls.subscribe(this.controls);
         }
-        this.removeListeners = this.controls.addListeners() || noop;
+        this.removeListeners = this.controls.addListeners() || noop$1;
     }
     unmount() {
         this.removeGroupControls();
@@ -5746,7 +5748,7 @@ const asyncHandler = (handler) => (event, info) => {
 class PanGesture extends Feature {
     constructor() {
         super(...arguments);
-        this.removePointerDownListener = noop;
+        this.removePointerDownListener = noop$1;
     }
     onPointerDown(pointerDownEvent) {
         this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), { transformPagePoint: this.node.getTransformPagePoint() });
@@ -6094,7 +6096,7 @@ function getRadius(values, radiusName) {
 //     )(p)
 // }
 const easeCrossfadeIn = compress(0, 0.5, circOut);
-const easeCrossfadeOut = compress(0.5, 0.95, noop);
+const easeCrossfadeOut = compress(0.5, 0.95, noop$1);
 function compress(min, max, easing) {
     return (p) => {
         // Could replace ifs with clamp
@@ -6767,7 +6769,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * to leave a flash of incorrectly styled content.
              */
             const now = performance.now();
-            frameData.delta = clamp(0, 1000 / 60, now - frameData.timestamp);
+            frameData.delta = clamp$1(0, 1000 / 60, now - frameData.timestamp);
             frameData.timestamp = now;
             frameData.isProcessing = true;
             steps.update.process(frameData);
@@ -7851,7 +7853,7 @@ const userAgentContains = (string) => typeof navigator !== "undefined" &&
  */
 const roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/")
     ? Math.round
-    : noop;
+    : noop$1;
 function roundAxis(axis) {
     // Round to the nearest .5 pixels to support subpixel layouts
     axis.min = roundPoint(axis.min);
@@ -8833,7 +8835,7 @@ class DOMVisualElement extends VisualElement {
     }
 }
 
-function getComputedStyle$1(element) {
+function getComputedStyle$2(element) {
     return window.getComputedStyle(element);
 }
 class HTMLVisualElement extends DOMVisualElement {
@@ -8843,7 +8845,7 @@ class HTMLVisualElement extends DOMVisualElement {
             return defaultType ? defaultType.default || 0 : 0;
         }
         else {
-            const computedStyle = getComputedStyle$1(instance);
+            const computedStyle = getComputedStyle$2(instance);
             const value = (isCSSVariableName(key)
                 ? computedStyle.getPropertyValue(key)
                 : computedStyle[key]) || 0;
@@ -11862,7 +11864,7 @@ const BreadcrumbsItemWrapper = styled__default.default.span`
     }
   }
 `;
-var index$3 = Object.assign(Breadcrumbs, {
+var index$4 = Object.assign(Breadcrumbs, {
   Item: BreadcrumbsItem
 });
 
@@ -16001,7 +16003,7 @@ const BaseButton = styled__default.default(UnstyledButton)(({
         }
       } : {})
     },
-    tertiary: {
+    neutral: {
       'backgroundColor': color['bg/neutral'],
       'color': color['text/neutral'],
       '& svg': {
@@ -16154,7 +16156,7 @@ const BaseSpinner = styled__default.default(Spinner)(variant({
     secondary: {
       color: color['icon/primary']
     },
-    tertiary: {
+    neutral: {
       color: color['icon/accent/gray']
     },
     outlined: {
@@ -16440,7 +16442,7 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
         color: color['icon/disabled']
       } : {})
     },
-    'tertiary': {
+    'neutral': {
       'backgroundColor': color['bg/neutral'],
       'color': color['icon/accent/gray'],
       '&:hover:not(:disabled)': {
@@ -16543,15 +16545,695 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
   }
 }));
 
-const MotionView = motion(View);
+function* iterateFocusableElements(container, options = {}) {
+  var _a, _b;
+  const strict = (_a = options.strict) !== null && _a !== void 0 ? _a : false;
+  const acceptFn = ((_b = options.onlyTabbable) !== null && _b !== void 0 ? _b : false) ? isTabbable : isFocusable;
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: node => node instanceof HTMLElement && acceptFn(node, strict) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+  });
+  let nextNode = null;
+  if (!options.reverse && acceptFn(container, strict)) {
+    yield container;
+  }
+  if (options.reverse) {
+    let lastChild = walker.lastChild();
+    while (lastChild) {
+      nextNode = lastChild;
+      lastChild = walker.lastChild();
+    }
+  } else {
+    nextNode = walker.firstChild();
+  }
+  while (nextNode instanceof HTMLElement) {
+    yield nextNode;
+    nextNode = options.reverse ? walker.previousNode() : walker.nextNode();
+  }
+  if (options.reverse && acceptFn(container, strict)) {
+    yield container;
+  }
+  return undefined;
+}
+function getFocusableChild(container, lastChild = false) {
+  return iterateFocusableElements(container, {
+    reverse: lastChild,
+    strict: true,
+    onlyTabbable: true
+  }).next().value;
+}
+function isFocusable(elem, strict = false) {
+  const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) && elem.disabled;
+  const hiddenInert = elem.hidden;
+  const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
+  const sentinelInert = elem.classList.contains('sentinel');
+  if (disabledAttrInert || hiddenInert || hiddenInputInert || sentinelInert) {
+    return false;
+  }
+  if (strict) {
+    const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
+    const visibilityInert = ['hidden', 'collapse'].includes(getComputedStyle(elem).visibility);
+    const clientRectsInert = elem.getClientRects().length === 0;
+    if (sizeInert || visibilityInert || clientRectsInert) {
+      return false;
+    }
+  }
+  if (elem.getAttribute('tabindex') != null) {
+    return true;
+  }
+  if (elem instanceof HTMLAnchorElement && elem.getAttribute('href') == null) {
+    return false;
+  }
+  return elem.tabIndex !== -1;
+}
+function isTabbable(elem, strict = false) {
+  return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
+}
+
+let signalSupported = false;
+function noop() {}
+try {
+  const options = Object.create({}, {
+    signal: {
+      get() {
+        signalSupported = true;
+      }
+    }
+  });
+  window.addEventListener('test', noop, options);
+  window.removeEventListener('test', noop, options);
+} catch (e) {}
+function featureSupported() {
+  return signalSupported;
+}
+function monkeyPatch() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  const originalAddEventListener = EventTarget.prototype.addEventListener;
+  EventTarget.prototype.addEventListener = function (name, originalCallback, optionsOrCapture) {
+    if (typeof optionsOrCapture === 'object' && 'signal' in optionsOrCapture && optionsOrCapture.signal instanceof AbortSignal) {
+      originalAddEventListener.call(optionsOrCapture.signal, 'abort', () => {
+        this.removeEventListener(name, originalCallback, optionsOrCapture);
+      });
+    }
+    return originalAddEventListener.call(this, name, originalCallback, optionsOrCapture);
+  };
+}
+function polyfill() {
+  if (!featureSupported()) {
+    monkeyPatch();
+    signalSupported = true;
+  }
+}
+
+polyfill();
+const suspendedTrapStack = [];
+let activeTrap = undefined;
+function tryReactivate() {
+  const trapToReactivate = suspendedTrapStack.pop();
+  if (trapToReactivate) {
+    focusTrap(trapToReactivate.container, trapToReactivate.initialFocus, trapToReactivate.originalSignal);
+  }
+}
+function followSignal(signal) {
+  const controller = new AbortController();
+  signal.addEventListener('abort', () => {
+    controller.abort();
+  });
+  return controller;
+}
+function focusTrap(container, initialFocus, abortSignal) {
+  const controller = new AbortController();
+  const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
+  container.setAttribute('data-focus-trap', 'active');
+  const sentinelStart = document.createElement('span');
+  sentinelStart.setAttribute('class', 'sentinel');
+  sentinelStart.setAttribute('tabindex', '0');
+  sentinelStart.setAttribute('aria-hidden', 'true');
+  sentinelStart.onfocus = () => {
+    const lastFocusableChild = getFocusableChild(container, true);
+    lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
+  };
+  const sentinelEnd = document.createElement('span');
+  sentinelEnd.setAttribute('class', 'sentinel');
+  sentinelEnd.setAttribute('tabindex', '0');
+  sentinelEnd.setAttribute('aria-hidden', 'true');
+  sentinelEnd.onfocus = () => {
+    const firstFocusableChild = getFocusableChild(container);
+    firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+  };
+  container.prepend(sentinelStart);
+  container.append(sentinelEnd);
+  let lastFocusedChild = undefined;
+  function ensureTrapZoneHasFocus(focusedElement) {
+    if (focusedElement instanceof HTMLElement && document.contains(container)) {
+      if (container.contains(focusedElement)) {
+        lastFocusedChild = focusedElement;
+        return;
+      } else {
+        if (lastFocusedChild && isTabbable(lastFocusedChild) && container.contains(lastFocusedChild)) {
+          lastFocusedChild.focus();
+          return;
+        } else if (initialFocus && container.contains(initialFocus)) {
+          initialFocus.focus();
+          return;
+        } else {
+          const firstFocusableChild = getFocusableChild(container);
+          firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+          return;
+        }
+      }
+    }
+  }
+  const wrappingController = followSignal(signal);
+  if (activeTrap) {
+    const suspendedTrap = activeTrap;
+    activeTrap.container.setAttribute('data-focus-trap', 'suspended');
+    activeTrap.controller.abort();
+    suspendedTrapStack.push(suspendedTrap);
+  }
+  wrappingController.signal.addEventListener('abort', () => {
+    activeTrap = undefined;
+  });
+  signal.addEventListener('abort', () => {
+    container.removeAttribute('data-focus-trap');
+    const sentinels = container.getElementsByClassName('sentinel');
+    while (sentinels.length > 0) sentinels[0].remove();
+    const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
+    if (suspendedTrapIndex >= 0) {
+      suspendedTrapStack.splice(suspendedTrapIndex, 1);
+    }
+    tryReactivate();
+  });
+  document.addEventListener('focus', event => {
+    ensureTrapZoneHasFocus(event.target);
+  }, {
+    signal: wrappingController.signal,
+    capture: true
+  });
+  ensureTrapZoneHasFocus(document.activeElement);
+  activeTrap = {
+    container,
+    controller: wrappingController,
+    initialFocus,
+    originalSignal: signal
+  };
+  const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
+  if (suspendedTrapIndex >= 0) {
+    suspendedTrapStack.splice(suspendedTrapIndex, 1);
+  }
+  if (!abortSignal) {
+    return controller;
+  }
+}
 
-function visible(el) {
-  return !el.hidden && (!el.type || el.type !== 'hidden') && (el.offsetWidth > 0 || el.offsetHeight > 0);
+let isMac = undefined;
+function isMacOS() {
+  if (isMac === undefined) {
+    isMac = /^mac/i.test(window.navigator.platform);
+  }
+  return isMac;
+}
+
+let idSeed = 10000;
+function uniqueId() {
+  return `__primer_id_${idSeed++}`;
+}
+
+polyfill();
+var FocusKeys;
+(function (FocusKeys) {
+  FocusKeys[FocusKeys["ArrowHorizontal"] = 1] = "ArrowHorizontal";
+  FocusKeys[FocusKeys["ArrowVertical"] = 2] = "ArrowVertical";
+  FocusKeys[FocusKeys["JK"] = 4] = "JK";
+  FocusKeys[FocusKeys["HL"] = 8] = "HL";
+  FocusKeys[FocusKeys["HomeAndEnd"] = 16] = "HomeAndEnd";
+  FocusKeys[FocusKeys["PageUpDown"] = 256] = "PageUpDown";
+  FocusKeys[FocusKeys["WS"] = 32] = "WS";
+  FocusKeys[FocusKeys["AD"] = 64] = "AD";
+  FocusKeys[FocusKeys["Tab"] = 128] = "Tab";
+  FocusKeys[FocusKeys["Backspace"] = 512] = "Backspace";
+  FocusKeys[FocusKeys["ArrowAll"] = 3] = "ArrowAll";
+  FocusKeys[FocusKeys["HJKL"] = 12] = "HJKL";
+  FocusKeys[FocusKeys["WASD"] = 96] = "WASD";
+  FocusKeys[FocusKeys["All"] = 511] = "All";
+})(FocusKeys || (FocusKeys = {}));
+const KEY_TO_BIT = {
+  ArrowLeft: FocusKeys.ArrowHorizontal,
+  ArrowDown: FocusKeys.ArrowVertical,
+  ArrowUp: FocusKeys.ArrowVertical,
+  ArrowRight: FocusKeys.ArrowHorizontal,
+  h: FocusKeys.HL,
+  j: FocusKeys.JK,
+  k: FocusKeys.JK,
+  l: FocusKeys.HL,
+  a: FocusKeys.AD,
+  s: FocusKeys.WS,
+  w: FocusKeys.WS,
+  d: FocusKeys.AD,
+  Tab: FocusKeys.Tab,
+  Home: FocusKeys.HomeAndEnd,
+  End: FocusKeys.HomeAndEnd,
+  PageUp: FocusKeys.PageUpDown,
+  PageDown: FocusKeys.PageUpDown,
+  Backspace: FocusKeys.Backspace
+};
+const KEY_TO_DIRECTION = {
+  ArrowLeft: 'previous',
+  ArrowDown: 'next',
+  ArrowUp: 'previous',
+  ArrowRight: 'next',
+  h: 'previous',
+  j: 'next',
+  k: 'previous',
+  l: 'next',
+  a: 'previous',
+  s: 'next',
+  w: 'previous',
+  d: 'next',
+  Tab: 'next',
+  Home: 'start',
+  End: 'end',
+  PageUp: 'start',
+  PageDown: 'end',
+  Backspace: 'previous'
+};
+function getDirection(keyboardEvent) {
+  const direction = KEY_TO_DIRECTION[keyboardEvent.key];
+  if (keyboardEvent.key === 'Tab' && keyboardEvent.shiftKey) {
+    return 'previous';
+  }
+  const isMac = isMacOS();
+  if (isMac && keyboardEvent.metaKey || !isMac && keyboardEvent.ctrlKey) {
+    if (keyboardEvent.key === 'ArrowLeft' || keyboardEvent.key === 'ArrowUp') {
+      return 'start';
+    } else if (keyboardEvent.key === 'ArrowRight' || keyboardEvent.key === 'ArrowDown') {
+      return 'end';
+    }
+  }
+  return direction;
 }
-function focusable(el) {
-  const inputEl = el;
-  return inputEl.tabIndex >= 0 && !inputEl.disabled && visible(inputEl);
+function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
+  const key = keyboardEvent.key;
+  const keyLength = [...key].length;
+  const isTextInput = activeElement instanceof HTMLInputElement && activeElement.type === 'text' || activeElement instanceof HTMLTextAreaElement;
+  if (isTextInput && (keyLength === 1 || key === 'Home' || key === 'End')) {
+    return true;
+  }
+  if (activeElement instanceof HTMLSelectElement) {
+    if (keyLength === 1) {
+      return true;
+    }
+    if (key === 'ArrowDown' && isMacOS() && !keyboardEvent.metaKey) {
+      return true;
+    }
+    if (key === 'ArrowDown' && !isMacOS() && keyboardEvent.altKey) {
+      return true;
+    }
+  }
+  if (activeElement instanceof HTMLTextAreaElement && (key === 'PageUp' || key === 'PageDown')) {
+    return true;
+  }
+  if (isTextInput) {
+    const textInput = activeElement;
+    const cursorAtStart = textInput.selectionStart === 0 && textInput.selectionEnd === 0;
+    const cursorAtEnd = textInput.selectionStart === textInput.value.length && textInput.selectionEnd === textInput.value.length;
+    if (key === 'ArrowLeft' && !cursorAtStart) {
+      return true;
+    }
+    if (key === 'ArrowRight' && !cursorAtEnd) {
+      return true;
+    }
+    if (textInput instanceof HTMLTextAreaElement) {
+      if (key === 'ArrowUp' && !cursorAtStart) {
+        return true;
+      }
+      if (key === 'ArrowDown' && !cursorAtEnd) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+const isActiveDescendantAttribute = 'data-is-active-descendant';
+const activeDescendantActivatedDirectly = 'activated-directly';
+const activeDescendantActivatedIndirectly = 'activated-indirectly';
+const hasActiveDescendantAttribute = 'data-has-active-descendant';
+function focusZone(container, settings) {
+  var _a, _b, _c, _d, _e;
+  const focusableElements = [];
+  const savedTabIndex = new WeakMap();
+  const bindKeys = (_a = settings === null || settings === void 0 ? void 0 : settings.bindKeys) !== null && _a !== void 0 ? _a : ((settings === null || settings === void 0 ? void 0 : settings.getNextFocusable) ? FocusKeys.ArrowAll : FocusKeys.ArrowVertical) | FocusKeys.HomeAndEnd;
+  const focusOutBehavior = (_b = settings === null || settings === void 0 ? void 0 : settings.focusOutBehavior) !== null && _b !== void 0 ? _b : 'stop';
+  const focusInStrategy = (_c = settings === null || settings === void 0 ? void 0 : settings.focusInStrategy) !== null && _c !== void 0 ? _c : 'previous';
+  const activeDescendantControl = settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl;
+  const activeDescendantCallback = settings === null || settings === void 0 ? void 0 : settings.onActiveDescendantChanged;
+  let currentFocusedElement;
+  const preventScroll = (_d = settings === null || settings === void 0 ? void 0 : settings.preventScroll) !== null && _d !== void 0 ? _d : false;
+  function getFirstFocusableElement() {
+    return focusableElements[0];
+  }
+  function isActiveDescendantInputFocused() {
+    return document.activeElement === activeDescendantControl;
+  }
+  function updateFocusedElement(to, directlyActivated = false) {
+    const from = currentFocusedElement;
+    currentFocusedElement = to;
+    if (activeDescendantControl) {
+      if (to && isActiveDescendantInputFocused()) {
+        setActiveDescendant(from, to, directlyActivated);
+      } else {
+        clearActiveDescendant();
+      }
+      return;
+    }
+    if (from && from !== to && savedTabIndex.has(from)) {
+      from.setAttribute('tabindex', '-1');
+    }
+    to === null || to === void 0 ? void 0 : to.setAttribute('tabindex', '0');
+  }
+  function setActiveDescendant(from, to, directlyActivated = false) {
+    if (!to.id) {
+      to.setAttribute('id', uniqueId());
+    }
+    if (from && from !== to) {
+      from.removeAttribute(isActiveDescendantAttribute);
+    }
+    if (!activeDescendantControl || !directlyActivated && activeDescendantControl.getAttribute('aria-activedescendant') === to.id) {
+      return;
+    }
+    activeDescendantControl.setAttribute('aria-activedescendant', to.id);
+    container.setAttribute(hasActiveDescendantAttribute, to.id);
+    to.setAttribute(isActiveDescendantAttribute, directlyActivated ? activeDescendantActivatedDirectly : activeDescendantActivatedIndirectly);
+    activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(to, from, directlyActivated);
+  }
+  function clearActiveDescendant(previouslyActiveElement = currentFocusedElement) {
+    if (focusInStrategy === 'first') {
+      currentFocusedElement = undefined;
+    }
+    activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.removeAttribute('aria-activedescendant');
+    container.removeAttribute(hasActiveDescendantAttribute);
+    previouslyActiveElement === null || previouslyActiveElement === void 0 ? void 0 : previouslyActiveElement.removeAttribute(isActiveDescendantAttribute);
+    activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(undefined, previouslyActiveElement, false);
+  }
+  function beginFocusManagement(...elements) {
+    const filteredElements = elements.filter(e => {
+      var _a, _b;
+      return (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.focusableElementFilter) === null || _a === void 0 ? void 0 : _a.call(settings, e)) !== null && _b !== void 0 ? _b : true;
+    });
+    if (filteredElements.length === 0) {
+      return;
+    }
+    focusableElements.splice(findInsertionIndex(filteredElements), 0, ...filteredElements);
+    for (const element of filteredElements) {
+      if (!savedTabIndex.has(element)) {
+        savedTabIndex.set(element, element.getAttribute('tabindex'));
+      }
+      element.setAttribute('tabindex', '-1');
+    }
+    if (!currentFocusedElement) {
+      updateFocusedElement(getFirstFocusableElement());
+    }
+  }
+  function findInsertionIndex(elementsToInsert) {
+    const firstElementToInsert = elementsToInsert[0];
+    if (focusableElements.length === 0) return 0;
+    let iMin = 0;
+    let iMax = focusableElements.length - 1;
+    while (iMin <= iMax) {
+      const i = Math.floor((iMin + iMax) / 2);
+      const element = focusableElements[i];
+      if (followsInDocument(firstElementToInsert, element)) {
+        iMax = i - 1;
+      } else {
+        iMin = i + 1;
+      }
+    }
+    return iMin;
+  }
+  function followsInDocument(first, second) {
+    return (second.compareDocumentPosition(first) & Node.DOCUMENT_POSITION_PRECEDING) > 0;
+  }
+  function endFocusManagement(...elements) {
+    for (const element of elements) {
+      const focusableElementIndex = focusableElements.indexOf(element);
+      if (focusableElementIndex >= 0) {
+        focusableElements.splice(focusableElementIndex, 1);
+      }
+      const savedIndex = savedTabIndex.get(element);
+      if (savedIndex !== undefined) {
+        if (savedIndex === null) {
+          element.removeAttribute('tabindex');
+        } else {
+          element.setAttribute('tabindex', savedIndex);
+        }
+        savedTabIndex.delete(element);
+      }
+      if (element === currentFocusedElement) {
+        const nextElementToFocus = getFirstFocusableElement();
+        updateFocusedElement(nextElementToFocus);
+      }
+    }
+  }
+  beginFocusManagement(...iterateFocusableElements(container));
+  const initialElement = typeof focusInStrategy === 'function' ? focusInStrategy(document.body) : getFirstFocusableElement();
+  updateFocusedElement(initialElement);
+  const observer = new MutationObserver(mutations => {
+    for (const mutation of mutations) {
+      for (const removedNode of mutation.removedNodes) {
+        if (removedNode instanceof HTMLElement) {
+          endFocusManagement(...iterateFocusableElements(removedNode));
+        }
+      }
+    }
+    for (const mutation of mutations) {
+      for (const addedNode of mutation.addedNodes) {
+        if (addedNode instanceof HTMLElement) {
+          beginFocusManagement(...iterateFocusableElements(addedNode));
+        }
+      }
+    }
+  });
+  observer.observe(container, {
+    subtree: true,
+    childList: true
+  });
+  const controller = new AbortController();
+  const signal = (_e = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _e !== void 0 ? _e : controller.signal;
+  signal.addEventListener('abort', () => {
+    endFocusManagement(...focusableElements);
+  });
+  let elementIndexFocusedByClick = undefined;
+  container.addEventListener('mousedown', event => {
+    if (event.target instanceof HTMLElement && event.target !== document.activeElement) {
+      elementIndexFocusedByClick = focusableElements.indexOf(event.target);
+    }
+  }, {
+    signal
+  });
+  if (activeDescendantControl) {
+    container.addEventListener('focusin', event => {
+      if (event.target instanceof HTMLElement && focusableElements.includes(event.target)) {
+        activeDescendantControl.focus({
+          preventScroll
+        });
+        updateFocusedElement(event.target);
+      }
+    });
+    container.addEventListener('mousemove', ({
+      target
+    }) => {
+      if (!(target instanceof Node)) {
+        return;
+      }
+      const focusableElement = focusableElements.find(element => element.contains(target));
+      if (focusableElement) {
+        updateFocusedElement(focusableElement);
+      }
+    }, {
+      signal,
+      capture: true
+    });
+    activeDescendantControl.addEventListener('focusin', () => {
+      if (!currentFocusedElement) {
+        updateFocusedElement(getFirstFocusableElement());
+      } else {
+        setActiveDescendant(undefined, currentFocusedElement);
+      }
+    });
+    activeDescendantControl.addEventListener('focusout', () => {
+      clearActiveDescendant();
+    });
+  } else {
+    container.addEventListener('focusin', event => {
+      if (event.target instanceof HTMLElement) {
+        if (elementIndexFocusedByClick !== undefined) {
+          if (elementIndexFocusedByClick >= 0) {
+            if (focusableElements[elementIndexFocusedByClick] !== currentFocusedElement) {
+              updateFocusedElement(focusableElements[elementIndexFocusedByClick]);
+            }
+          }
+          elementIndexFocusedByClick = undefined;
+        } else {
+          if (focusInStrategy === 'previous') {
+            updateFocusedElement(event.target);
+          } else if (focusInStrategy === 'closest' || focusInStrategy === 'first') {
+            if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
+              const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.length - 1 : 0;
+              const targetElement = focusableElements[targetElementIndex];
+              targetElement === null || targetElement === void 0 ? void 0 : targetElement.focus({
+                preventScroll
+              });
+              return;
+            } else {
+              updateFocusedElement(event.target);
+            }
+          } else if (typeof focusInStrategy === 'function') {
+            if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
+              const elementToFocus = focusInStrategy(event.relatedTarget);
+              const requestedFocusElementIndex = elementToFocus ? focusableElements.indexOf(elementToFocus) : -1;
+              if (requestedFocusElementIndex >= 0 && elementToFocus instanceof HTMLElement) {
+                elementToFocus.focus({
+                  preventScroll
+                });
+                return;
+              } else {
+                console.warn('Element requested is not a known focusable element.');
+              }
+            } else {
+              updateFocusedElement(event.target);
+            }
+          }
+        }
+      }
+      lastKeyboardFocusDirection = undefined;
+    }, {
+      signal
+    });
+  }
+  const keyboardEventRecipient = activeDescendantControl !== null && activeDescendantControl !== void 0 ? activeDescendantControl : container;
+  let lastKeyboardFocusDirection = undefined;
+  if (focusInStrategy === 'closest') {
+    document.addEventListener('keydown', event => {
+      if (event.key === 'Tab') {
+        lastKeyboardFocusDirection = getDirection(event);
+      }
+    }, {
+      signal,
+      capture: true
+    });
+  }
+  function getCurrentFocusedIndex() {
+    if (!currentFocusedElement) {
+      return 0;
+    }
+    const focusedIndex = focusableElements.indexOf(currentFocusedElement);
+    const fallbackIndex = currentFocusedElement === container ? -1 : 0;
+    return focusedIndex !== -1 ? focusedIndex : fallbackIndex;
+  }
+  keyboardEventRecipient.addEventListener('keydown', event => {
+    var _a;
+    if (event.key in KEY_TO_DIRECTION) {
+      const keyBit = KEY_TO_BIT[event.key];
+      if (!event.defaultPrevented && (keyBit & bindKeys) > 0 && !shouldIgnoreFocusHandling(event, document.activeElement)) {
+        const direction = getDirection(event);
+        let nextElementToFocus = undefined;
+        if (settings === null || settings === void 0 ? void 0 : settings.getNextFocusable) {
+          nextElementToFocus = settings.getNextFocusable(direction, (_a = document.activeElement) !== null && _a !== void 0 ? _a : undefined, event);
+        }
+        if (!nextElementToFocus) {
+          const lastFocusedIndex = getCurrentFocusedIndex();
+          let nextFocusedIndex = lastFocusedIndex;
+          if (direction === 'previous') {
+            nextFocusedIndex -= 1;
+          } else if (direction === 'start') {
+            nextFocusedIndex = 0;
+          } else if (direction === 'next') {
+            nextFocusedIndex += 1;
+          } else {
+            nextFocusedIndex = focusableElements.length - 1;
+          }
+          if (nextFocusedIndex < 0) {
+            if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
+              nextFocusedIndex = focusableElements.length - 1;
+            } else {
+              nextFocusedIndex = 0;
+            }
+          }
+          if (nextFocusedIndex >= focusableElements.length) {
+            if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
+              nextFocusedIndex = 0;
+            } else {
+              nextFocusedIndex = focusableElements.length - 1;
+            }
+          }
+          if (lastFocusedIndex !== nextFocusedIndex) {
+            nextElementToFocus = focusableElements[nextFocusedIndex];
+          }
+        }
+        if (activeDescendantControl) {
+          updateFocusedElement(nextElementToFocus || currentFocusedElement, true);
+        } else if (nextElementToFocus) {
+          lastKeyboardFocusDirection = direction;
+          nextElementToFocus.focus({
+            preventScroll
+          });
+        }
+        if (event.key !== 'Tab' || nextElementToFocus) {
+          event.preventDefault();
+        }
+      }
+    }
+  }, {
+    signal
+  });
+  return controller;
 }
+
+/**
+ * 제공된 `ref`가 없는 경우 새로운 `ref`를 만들어 사용하고, 있는 경우 제공된 ref를 사용할 수 있는 훅입니다.
+ */
+const useProvidedOrCreatedRef = providedRef => {
+  const createdRef = React.useRef(null);
+  return providedRef ?? createdRef;
+};
+
+const useFocusTrap = (settings, dependencies = []) => {
+  const containerRef = useProvidedOrCreatedRef(settings?.containerRef);
+  const initialFocusRef = useProvidedOrCreatedRef(settings?.initialFocusRef);
+  const disabled = settings?.disabled;
+  const abortController = React__namespace.default.useRef();
+  const previousFocusedElement = React__namespace.default.useRef(null);
+  if (!previousFocusedElement.current && !settings?.disabled) {
+    previousFocusedElement.current = document.activeElement;
+  }
+  const disableTrap = () => {
+    abortController.current?.abort();
+    if (settings?.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {
+      previousFocusedElement.current.focus();
+      previousFocusedElement.current = null;
+    }
+  };
+  React__namespace.default.useEffect(() => {
+    if (containerRef.current instanceof HTMLElement) {
+      if (!disabled) {
+        abortController.current = focusTrap(containerRef.current, initialFocusRef.current ?? undefined);
+        return () => {
+          disableTrap();
+        };
+      } else {
+        disableTrap();
+      }
+    }
+  }, [containerRef, initialFocusRef, disabled, ...dependencies]);
+  return {
+    containerRef,
+    initialFocusRef
+  };
+};
+
+const MotionView = motion(View);
+
 const Dialog = ({
   children,
   isOpen,
@@ -16571,41 +17253,19 @@ const Dialog = ({
       handleDismiss?.();
     }
   }, [handleDismiss, dialogRef, overlayRef]);
-  const getFocusableItem = React.useCallback((e, movement) => {
-    if (dialogRef.current) {
-      const items = Array.from(dialogRef.current.querySelectorAll('*')).filter(focusable);
-      if (items.length === 0) return;
-      e.preventDefault();
-      const focusedElement = document.activeElement;
-      if (!focusedElement) {
-        return;
-      }
-      const index = items.indexOf(focusedElement);
-      const offsetIndex = index + movement;
-      const fallbackIndex = movement === 1 ? 0 : items.length - 1;
-      const focusableItem = items[offsetIndex] || items[fallbackIndex];
-      return focusableItem;
-    }
-  }, [dialogRef]);
-  const handleTab = React.useCallback(e => {
-    const movement = e.shiftKey ? -1 : 1;
-    const focusableItem = getFocusableItem(e, movement);
-    if (!focusableItem) {
-      return;
-    }
-    focusableItem.focus();
-  }, [getFocusableItem]);
   const handleKeyDown = React.useCallback(event => {
     switch (event.key) {
-      case 'Tab':
-        handleTab(event);
-        break;
       case 'Escape':
         handleDismiss?.();
         event.stopPropagation();
         break;
     }
   }, [handleDismiss]);
+  useFocusTrap({
+    containerRef: dialogRef,
+    initialFocusRef: closeButtonRef,
+    disabled: !isOpen
+  });
   React.useEffect(() => {
     if (isOpen) {
       document.addEventListener('click', handleOutsideClick);
@@ -16651,7 +17311,7 @@ const Dialog = ({
         height: '100%',
         zIndex: 9999
       },
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Overlay, {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Blanket, {
         ref: overlayRef
       }), /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDialog, {
         ref: dialogRef,
@@ -16695,7 +17355,7 @@ const Dialog = ({
     }) : null
   });
 };
-const Overlay = styled__default.default.span`
+const Blanket = styled__default.default.span`
   &:before {
     position: fixed;
     top: 0;
@@ -16716,7 +17376,7 @@ const BaseDialog = styled__default.default.div(() => ({
   overflow: 'hidden',
   margin: 'auto'
 }), sx);
-var index$2 = /*#__PURE__*/React.forwardRef(Dialog);
+var index$3 = /*#__PURE__*/React.forwardRef(Dialog);
 
 const useDialogHandler = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -17041,67 +17701,1789 @@ const ItemList = ({
   });
 };
 
-const Space = styled__default.default.div`
-  width: inherit;
-  ${space$1};
-  ${sx}
-`;
-
-const Stack = /*#__PURE__*/React.forwardRef(({
-  gapX = 0,
-  gapY = 0,
-  children,
-  alignItems = 'center',
-  ...props
-}, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseStack, {
-  ref: ref,
-  alignItems: alignItems,
-  gapX: gapX,
-  gapY: gapY,
-  ...props,
-  children: children
-}));
-const BaseStack = styled__default.default(View)({
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap'
-}, variant({
-  prop: 'gapX',
-  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
-    const styleValue = {
-      '& > *': {
-        px: forcePixelValue(value / 2)
-      },
-      'mx': forcePixelValue(-value / 2)
-    };
-    return [key, styleValue];
-  }))
-}), variant({
-  prop: 'gapY',
-  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
-    const styleValue = {
-      '& > *': {
-        mt: forcePixelValue(value)
-      },
-      'mt': forcePixelValue(-value)
-    };
-    return [key, styleValue];
-  }))
-}));
-const Item = ({
+const Overlay = ({
   children,
+  isOpen,
+  onDismiss,
+  size = 'm',
+  ignoreOutsideClickRefs = [],
   ...props
-}) => /*#__PURE__*/jsxRuntimeExports.jsx(View, {
-  ...props,
-  children: children
-});
-var Stack$1 = Object.assign(Stack, {
-  Item
-});
-
-const StyledIcon = ({
-  icon: Icon,
-  sx,
+}, ref) => {
+  const overlayRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => overlayRef.current);
+  const handleDismiss = React.useCallback(() => onDismiss?.(), [onDismiss]);
+  const handleOutsideClick = React.useCallback(e => {
+    if (overlayRef.current && e.target instanceof Node && !overlayRef.current.contains(e.target) && ignoreOutsideClickRefs && !ignoreOutsideClickRefs.some(({
+      current
+    }) => current?.contains(e.target))) {
+      handleDismiss?.();
+    }
+  }, [handleDismiss, overlayRef]);
+  const handleKeyDown = React.useCallback(event => {
+    switch (event.key) {
+      case 'Escape':
+        handleDismiss?.();
+        event.stopPropagation();
+        break;
+    }
+  }, [handleDismiss]);
+  React.useEffect(() => {
+    if (overlayRef.current) {
+      const firstItem = iterateFocusableElements(overlayRef.current).next().value;
+      firstItem?.focus();
+    }
+  }, [isOpen]);
+  React.useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [isOpen, handleKeyDown]);
+  React.useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('click', handleOutsideClick);
+      return () => {
+        document.removeEventListener('click', handleOutsideClick);
+      };
+    }
+  }, [isOpen, handleOutsideClick]);
+  return isOpen ? /*#__PURE__*/jsxRuntimeExports.jsx(BaseOverlay, {
+    ref: overlayRef,
+    size: size,
+    ...props,
+    children: children
+  }) : null;
+};
+const BaseOverlay = styled__default.default.div`
+  position: absolute;
+  box-shadow: ${({
+  theme
+}) => theme.shadows['shadow/overlay']};
+  background-color: ${({
+  theme
+}) => theme.colors['surface/overlay']};
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.s)};
+  overflow: hidden;
+  margin: auto;
+  z-index: 99999;
+
+  ${variant({
+  prop: 'size',
+  variants: {
+    m: {
+      width: forcePixelValue(180)
+    }
+  }
+})}
+  ${sx}
+`;
+var Overlay$1 = /*#__PURE__*/React.forwardRef(Overlay);
+
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
+const oppositeSideMap = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+const oppositeAlignmentMap = {
+  start: 'end',
+  end: 'start'
+};
+function clamp(start, value, end) {
+  return max(start, min(value, end));
+}
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split('-')[0];
+}
+function getAlignment(placement) {
+  return placement.split('-')[1];
+}
+function getOppositeAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+function getAxisLength(axis) {
+  return axis === 'y' ? 'height' : 'width';
+}
+function getSideAxis(placement) {
+  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+}
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+}
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
+}
+function getSideList(side, isStart, rtl) {
+  const lr = ['left', 'right'];
+  const rl = ['right', 'left'];
+  const tb = ['top', 'bottom'];
+  const bt = ['bottom', 'top'];
+  switch (side) {
+    case 'top':
+    case 'bottom':
+      if (rtl) return isStart ? rl : lr;
+      return isStart ? lr : rl;
+    case 'left':
+    case 'right':
+      return isStart ? tb : bt;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === 'start', rtl);
+  if (alignment) {
+    list = list.map(side => side + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  return {
+    ...rect,
+    top: rect.y,
+    left: rect.x,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
+  };
+}
+
+function computeCoordsFromPlacement(_ref, placement, rtl) {
+  let {
+    reference,
+    floating
+  } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side = getSide(placement);
+  const isVertical = sideAxis === 'y';
+  const commonX = reference.x + reference.width / 2 - floating.width / 2;
+  const commonY = reference.y + reference.height / 2 - floating.height / 2;
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+  let coords;
+  switch (side) {
+    case 'top':
+      coords = {
+        x: commonX,
+        y: reference.y - floating.height
+      };
+      break;
+    case 'bottom':
+      coords = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+    case 'right':
+      coords = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+    case 'left':
+      coords = {
+        x: reference.x - floating.width,
+        y: commonY
+      };
+      break;
+    default:
+      coords = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+  switch (getAlignment(placement)) {
+    case 'start':
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+    case 'end':
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+  }
+  return coords;
+}
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a reference element when it is given a certain positioning strategy.
+ *
+ * This export does not have any `platform` interface logic. You will need to
+ * write one for the platform you are using Floating UI with.
+ */
+const computePosition$1 = async (reference, floating, config) => {
+  const {
+    placement = 'bottom',
+    strategy = 'absolute',
+    middleware = [],
+    platform
+  } = config;
+  const validMiddleware = middleware.filter(Boolean);
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
+  let rects = await platform.getElementRects({
+    reference,
+    floating,
+    strategy
+  });
+  let {
+    x,
+    y
+  } = computeCoordsFromPlacement(rects, placement, rtl);
+  let statefulPlacement = placement;
+  let middlewareData = {};
+  let resetCount = 0;
+  for (let i = 0; i < validMiddleware.length; i++) {
+    const {
+      name,
+      fn
+    } = validMiddleware[i];
+    const {
+      x: nextX,
+      y: nextY,
+      data,
+      reset
+    } = await fn({
+      x,
+      y,
+      initialPlacement: placement,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData,
+      rects,
+      platform,
+      elements: {
+        reference,
+        floating
+      }
+    });
+    x = nextX != null ? nextX : x;
+    y = nextY != null ? nextY : y;
+    middlewareData = {
+      ...middlewareData,
+      [name]: {
+        ...middlewareData[name],
+        ...data
+      }
+    };
+    if (reset && resetCount <= 50) {
+      resetCount++;
+      if (typeof reset === 'object') {
+        if (reset.placement) {
+          statefulPlacement = reset.placement;
+        }
+        if (reset.rects) {
+          rects = reset.rects === true ? await platform.getElementRects({
+            reference,
+            floating,
+            strategy
+          }) : reset.rects;
+        }
+        ({
+          x,
+          y
+        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+      }
+      i = -1;
+      continue;
+    }
+  }
+  return {
+    x,
+    y,
+    placement: statefulPlacement,
+    strategy,
+    middlewareData
+  };
+};
+
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    ...rects.floating,
+    x,
+    y
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'flip',
+    options,
+    async fn(state) {
+      var _middlewareData$arrow, _middlewareData$flip;
+      const {
+        placement,
+        middlewareData,
+        rects,
+        initialPlacement,
+        platform,
+        elements
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true,
+        fallbackPlacements: specifiedFallbackPlacements,
+        fallbackStrategy = 'bestFit',
+        fallbackAxisSideDirection = 'none',
+        flipAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+
+      // If a reset by the arrow was caused due to an alignment offset being
+      // added, we should skip any logic now since `flip()` has already done its
+      // work.
+      // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
+      if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      const side = getSide(placement);
+      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+      const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
+        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+      }
+      const placements = [initialPlacement, ...fallbackPlacements];
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflows = [];
+      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+      if (checkMainAxis) {
+        overflows.push(overflow[side]);
+      }
+      if (checkCrossAxis) {
+        const sides = getAlignmentSides(placement, rects, rtl);
+        overflows.push(overflow[sides[0]], overflow[sides[1]]);
+      }
+      overflowsData = [...overflowsData, {
+        placement,
+        overflows
+      }];
+
+      // One or more sides is overflowing.
+      if (!overflows.every(side => side <= 0)) {
+        var _middlewareData$flip2, _overflowsData$filter;
+        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+        const nextPlacement = placements[nextIndex];
+        if (nextPlacement) {
+          // Try next placement and re-run the lifecycle.
+          return {
+            data: {
+              index: nextIndex,
+              overflows: overflowsData
+            },
+            reset: {
+              placement: nextPlacement
+            }
+          };
+        }
+
+        // First, find the candidates that fit on the mainAxis side of overflow,
+        // then find the placement that fits the best on the main crossAxis side.
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+
+        // Otherwise fallback.
+        if (!resetPlacement) {
+          switch (fallbackStrategy) {
+            case 'bestFit':
+              {
+                var _overflowsData$map$so;
+                const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+                if (placement) {
+                  resetPlacement = placement;
+                }
+                break;
+              }
+            case 'initialPlacement':
+              resetPlacement = initialPlacement;
+              break;
+          }
+        }
+        if (placement !== resetPlacement) {
+          return {
+            reset: {
+              placement: resetPlacement
+            }
+          };
+        }
+      }
+      return {};
+    }
+  };
+};
+
+// For type backwards-compatibility, the `OffsetOptions` type was also
+// Derivable.
+async function convertValueToCoords(state, options) {
+  const {
+    placement,
+    platform,
+    elements
+  } = state;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getSideAxis(placement) === 'y';
+  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === 'number' ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: 0,
+    crossAxis: 0,
+    alignmentAxis: null,
+    ...rawValue
+  };
+  if (alignment && typeof alignmentAxis === 'number') {
+    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
+  }
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = function (options) {
+  if (options === void 0) {
+    options = 0;
+  }
+  return {
+    name: 'offset',
+    options,
+    async fn(state) {
+      const {
+        x,
+        y
+      } = state;
+      const diffCoords = await convertValueToCoords(state, options);
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: diffCoords
+      };
+    }
+  };
+};
+
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'shift',
+    options,
+    async fn(state) {
+      const {
+        x,
+        y,
+        placement
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = false,
+        limiter = {
+          fn: _ref => {
+            let {
+              x,
+              y
+            } = _ref;
+            return {
+              x,
+              y
+            };
+          }
+        },
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const coords = {
+        x,
+        y
+      };
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const crossAxis = getSideAxis(getSide(placement));
+      const mainAxis = getOppositeAxis(crossAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+      if (checkMainAxis) {
+        const minSide = mainAxis === 'y' ? 'top' : 'left';
+        const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
+        const min = mainAxisCoord + overflow[minSide];
+        const max = mainAxisCoord - overflow[maxSide];
+        mainAxisCoord = clamp(min, mainAxisCoord, max);
+      }
+      if (checkCrossAxis) {
+        const minSide = crossAxis === 'y' ? 'top' : 'left';
+        const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
+        const min = crossAxisCoord + overflow[minSide];
+        const max = crossAxisCoord - overflow[maxSide];
+        crossAxisCoord = clamp(min, crossAxisCoord, max);
+      }
+      const limitedCoords = limiter.fn({
+        ...state,
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      });
+      return {
+        ...limitedCoords,
+        data: {
+          x: limitedCoords.x - x,
+          y: limitedCoords.y - y
+        }
+      };
+    }
+  };
+};
+
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+  return '#document';
+}
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
+function isHTMLElement(value) {
+  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+}
+function isShadowRoot(value) {
+  // Browsers without `ShadowRoot` support.
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle$1(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+}
+function isTableElement(element) {
+  return ['table', 'td', 'th'].includes(getNodeName(element));
+}
+function isContainingBlock(element) {
+  const webkit = isWebKit();
+  const css = getComputedStyle$1(element);
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else {
+      currentNode = getParentNode(currentNode);
+    }
+  }
+  return null;
+}
+function isWebKit() {
+  if (typeof CSS === 'undefined' || !CSS.supports) return false;
+  return CSS.supports('-webkit-backdrop-filter', 'none');
+}
+function isLastTraversableNode(node) {
+  return ['html', 'body', '#document'].includes(getNodeName(node));
+}
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.pageXOffset,
+    scrollTop: element.pageYOffset
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+  const result =
+  // Step into the shadow DOM of the parent of a slotted node.
+  node.assignedSlot ||
+  // DOM Element detected.
+  node.parentNode ||
+  // ShadowRoot detected.
+  isShadowRoot(node) && node.host ||
+  // Fallback.
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list, traverseIframes) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+}
+
+function getCssDimensions(element) {
+  const css = getComputedStyle$1(element);
+  // In testing environments, the `width` and `height` properties are empty
+  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
+  let width = parseFloat(css.width) || 0;
+  let height = parseFloat(css.height) || 0;
+  const hasOffset = isHTMLElement(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    $: shouldFallback
+  };
+}
+
+function unwrapElement(element) {
+  return !isElement(element) ? element.contextElement : element;
+}
+
+function getScale(element) {
+  const domElement = unwrapElement(element);
+  if (!isHTMLElement(domElement)) {
+    return createCoords(1);
+  }
+  const rect = domElement.getBoundingClientRect();
+  const {
+    width,
+    height,
+    $
+  } = getCssDimensions(domElement);
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
+
+  // 0, NaN, or Infinity should always fallback to 1.
+
+  if (!x || !Number.isFinite(x)) {
+    x = 1;
+  }
+  if (!y || !Number.isFinite(y)) {
+    y = 1;
+  }
+  return {
+    x,
+    y
+  };
+}
+
+const noOffsets = /*#__PURE__*/createCoords(0);
+function getVisualOffsets(element) {
+  const win = getWindow(element);
+  if (!isWebKit() || !win.visualViewport) {
+    return noOffsets;
+  }
+  return {
+    x: win.visualViewport.offsetLeft,
+    y: win.visualViewport.offsetTop
+  };
+}
+function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+    return false;
+  }
+  return isFixed;
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+  const clientRect = element.getBoundingClientRect();
+  const domElement = unwrapElement(element);
+  let scale = createCoords(1);
+  if (includeScale) {
+    if (offsetParent) {
+      if (isElement(offsetParent)) {
+        scale = getScale(offsetParent);
+      }
+    } else {
+      scale = getScale(element);
+    }
+  }
+  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
+  let width = clientRect.width / scale.x;
+  let height = clientRect.height / scale.y;
+  if (domElement) {
+    const win = getWindow(domElement);
+    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    let currentIFrame = win.frameElement;
+    while (currentIFrame && offsetParent && offsetWin !== win) {
+      const iframeScale = getScale(currentIFrame);
+      const iframeRect = currentIFrame.getBoundingClientRect();
+      const css = getComputedStyle$1(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      x *= iframeScale.x;
+      y *= iframeScale.y;
+      width *= iframeScale.x;
+      height *= iframeScale.y;
+      x += left;
+      y += top;
+      currentIFrame = getWindow(currentIFrame).frameElement;
+    }
+  }
+  return rectToClientRect({
+    width,
+    height,
+    x,
+    y
+  });
+}
+
+function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+  let {
+    rect,
+    offsetParent,
+    strategy
+  } = _ref;
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  if (offsetParent === documentElement) {
+    return rect;
+  }
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  let scale = createCoords(1);
+  const offsets = createCoords(0);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isHTMLElement(offsetParent)) {
+      const offsetRect = getBoundingClientRect(offsetParent);
+      scale = getScale(offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    }
+  }
+  return {
+    width: rect.width * scale.x,
+    height: rect.height * scale.y,
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
+  };
+}
+
+function getClientRects(element) {
+  return Array.from(element.getClientRects());
+}
+
+function getWindowScrollBarX(element) {
+  // If <html> has a CSS width greater than the viewport, then this will be
+  // incorrect for RTL.
+  return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
+}
+
+// Gets the entire size of the scrollable document area, even extending outside
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
+function getDocumentRect(element) {
+  const html = getDocumentElement(element);
+  const scroll = getNodeScroll(element);
+  const body = element.ownerDocument.body;
+  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+  const y = -scroll.scrollTop;
+  if (getComputedStyle$1(body).direction === 'rtl') {
+    x += max(html.clientWidth, body.clientWidth) - width;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+function getViewportRect(element, strategy) {
+  const win = getWindow(element);
+  const html = getDocumentElement(element);
+  const visualViewport = win.visualViewport;
+  let width = html.clientWidth;
+  let height = html.clientHeight;
+  let x = 0;
+  let y = 0;
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    const visualViewportBased = isWebKit();
+    if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+// Returns the inner client rect, subtracting scrollbars if present.
+function getInnerBoundingClientRect(element, strategy) {
+  const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
+  const top = clientRect.top + element.clientTop;
+  const left = clientRect.left + element.clientLeft;
+  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+  const width = element.clientWidth * scale.x;
+  const height = element.clientHeight * scale.y;
+  const x = left * scale.x;
+  const y = top * scale.y;
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+  let rect;
+  if (clippingAncestor === 'viewport') {
+    rect = getViewportRect(element, strategy);
+  } else if (clippingAncestor === 'document') {
+    rect = getDocumentRect(getDocumentElement(element));
+  } else if (isElement(clippingAncestor)) {
+    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+  } else {
+    const visualOffsets = getVisualOffsets(element);
+    rect = {
+      ...clippingAncestor,
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y
+    };
+  }
+  return rectToClientRect(rect);
+}
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+}
+
+// A "clipping ancestor" is an `overflow` element with the characteristic of
+// clipping (or hiding) child elements. This returns all clipping ancestors
+// of the given element up the tree.
+function getClippingElementAncestors(element, cache) {
+  const cachedResult = cache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
+  let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
+  let currentContainingBlockComputedStyle = null;
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
+  let currentNode = elementIsFixed ? getParentNode(element) : element;
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    const computedStyle = getComputedStyle$1(currentNode);
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
+      currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks.
+      result = result.filter(ancestor => ancestor !== currentNode);
+    } else {
+      // Record last containing block for next iteration.
+      currentContainingBlockComputedStyle = computedStyle;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  cache.set(element, result);
+  return result;
+}
+
+// Gets the maximum area that the element is visible in due to any number of
+// clipping ancestors.
+function getClippingRect(_ref) {
+  let {
+    element,
+    boundary,
+    rootBoundary,
+    strategy
+  } = _ref;
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+  const firstClippingAncestor = clippingAncestors[0];
+  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
+    accRect.top = max(rect.top, accRect.top);
+    accRect.right = min(rect.right, accRect.right);
+    accRect.bottom = min(rect.bottom, accRect.bottom);
+    accRect.left = max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+  return {
+    width: clippingRect.right - clippingRect.left,
+    height: clippingRect.bottom - clippingRect.top,
+    x: clippingRect.left,
+    y: clippingRect.top
+  };
+}
+
+function getDimensions(element) {
+  return getCssDimensions(element);
+}
+
+function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  const isFixed = strategy === 'fixed';
+  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const offsets = createCoords(0);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    } else if (documentElement) {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
+  }
+  return {
+    x: rect.left + scroll.scrollLeft - offsets.x,
+    y: rect.top + scroll.scrollTop - offsets.y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+function getTrueOffsetParent(element, polyfill) {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
+    return null;
+  }
+  if (polyfill) {
+    return polyfill(element);
+  }
+  return element.offsetParent;
+}
+
+// Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+function getOffsetParent(element, polyfill) {
+  const window = getWindow(element);
+  if (!isHTMLElement(element)) {
+    return window;
+  }
+  let offsetParent = getTrueOffsetParent(element, polyfill);
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
+    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+  }
+  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
+    return window;
+  }
+  return offsetParent || getContainingBlock(element) || window;
+}
+
+const getElementRects = async function (_ref) {
+  let {
+    reference,
+    floating,
+    strategy
+  } = _ref;
+  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+  const getDimensionsFn = this.getDimensions;
+  return {
+    reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      ...(await getDimensionsFn(floating))
+    }
+  };
+};
+
+function isRTL(element) {
+  return getComputedStyle$1(element).direction === 'rtl';
+}
+
+const platform = {
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  getDocumentElement,
+  getClippingRect,
+  getOffsetParent,
+  getElementRects,
+  getClientRects,
+  getDimensions,
+  getScale,
+  isElement,
+  isRTL
+};
+
+// https://samthor.au/2021/observing-dom/
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+  function cleanup() {
+    clearTimeout(timeoutId);
+    io && io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = element.getBoundingClientRect();
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    const options = {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    };
+    let isFirstUpdate = true;
+    function handleObserve(entries) {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (!ratio) {
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 100);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      isFirstUpdate = false;
+    }
+
+    // Older browsers don't support a `document` as the root and will throw an
+    // error.
+    try {
+      io = new IntersectionObserver(handleObserve, {
+        ...options,
+        // Handle <iframe>s
+        root: root.ownerDocument
+      });
+    } catch (e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+
+/**
+ * Automatically updates the position of the floating element when necessary.
+ * Should only be called when the floating element is mounted on the DOM or
+ * visible on the screen.
+ * @returns cleanup function that should be invoked when the floating element is
+ * removed from the DOM or hidden from the screen.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    ancestorScroll = true,
+    ancestorResize = true,
+    elementResize = typeof ResizeObserver === 'function',
+    layoutShift = typeof IntersectionObserver === 'function',
+    animationFrame = false
+  } = options;
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
+  ancestors.forEach(ancestor => {
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener('resize', update);
+  });
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let reobserveFrame = -1;
+  let resizeObserver = null;
+  if (elementResize) {
+    resizeObserver = new ResizeObserver(_ref => {
+      let [firstEntry] = _ref;
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+        // Prevent update loops when using the `size` middleware.
+        // https://github.com/floating-ui/floating-ui/issues/1740
+        resizeObserver.unobserve(floating);
+        cancelAnimationFrame(reobserveFrame);
+        reobserveFrame = requestAnimationFrame(() => {
+          resizeObserver && resizeObserver.observe(floating);
+        });
+      }
+      update();
+    });
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
+    }
+    resizeObserver.observe(floating);
+  }
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+  if (animationFrame) {
+    frameLoop();
+  }
+  function frameLoop() {
+    const nextRefRect = getBoundingClientRect(reference);
+    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+      update();
+    }
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+  update();
+  return () => {
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.removeEventListener('scroll', update);
+      ancestorResize && ancestor.removeEventListener('resize', update);
+    });
+    cleanupIo && cleanupIo();
+    resizeObserver && resizeObserver.disconnect();
+    resizeObserver = null;
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a reference element when it is given a certain CSS positioning
+ * strategy.
+ */
+const computePosition = (reference, floating, options) => {
+  // This caches the expensive `getClippingElementAncestors` function so that
+  // multiple lifecycle resets re-use the same result. It only lives for a
+  // single call. If other functions become expensive, we can add them as well.
+  const cache = new Map();
+  const mergedOptions = {
+    platform,
+    ...options
+  };
+  const platformWithCache = {
+    ...mergedOptions.platform,
+    _c: cache
+  };
+  return computePosition$1(reference, floating, {
+    ...mergedOptions,
+    platform: platformWithCache
+  });
+};
+
+var index$2 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+// Fork of `fast-deep-equal` that only does the comparisons we need and compares
+// functions
+function deepEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (typeof a !== typeof b) {
+    return false;
+  }
+  if (typeof a === 'function' && a.toString() === b.toString()) {
+    return true;
+  }
+  let length, i, keys;
+  if (a && b && typeof a == 'object') {
+    if (Array.isArray(a)) {
+      length = a.length;
+      if (length != b.length) return false;
+      for (i = length; i-- !== 0;) {
+        if (!deepEqual(a[i], b[i])) {
+          return false;
+        }
+      }
+      return true;
+    }
+    keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length) {
+      return false;
+    }
+    for (i = length; i-- !== 0;) {
+      if (!{}.hasOwnProperty.call(b, keys[i])) {
+        return false;
+      }
+    }
+    for (i = length; i-- !== 0;) {
+      const key = keys[i];
+      if (key === '_owner' && a.$$typeof) {
+        continue;
+      }
+      if (!deepEqual(a[key], b[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return a !== a && b !== b;
+}
+
+function getDPR(element) {
+  if (typeof window === 'undefined') {
+    return 1;
+  }
+  const win = element.ownerDocument.defaultView || window;
+  return win.devicePixelRatio || 1;
+}
+
+function roundByDPR(element, value) {
+  const dpr = getDPR(element);
+  return Math.round(value * dpr) / dpr;
+}
+
+function useLatestRef(value) {
+  const ref = React__namespace.useRef(value);
+  index$2(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+
+/**
+ * Provides data to position a floating element.
+ * @see https://floating-ui.com/docs/react
+ */
+function useFloating(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    placement = 'bottom',
+    strategy = 'absolute',
+    middleware = [],
+    platform,
+    elements: {
+      reference: externalReference,
+      floating: externalFloating
+    } = {},
+    transform = true,
+    whileElementsMounted,
+    open
+  } = options;
+  const [data, setData] = React__namespace.useState({
+    x: 0,
+    y: 0,
+    strategy,
+    placement,
+    middlewareData: {},
+    isPositioned: false
+  });
+  const [latestMiddleware, setLatestMiddleware] = React__namespace.useState(middleware);
+  if (!deepEqual(latestMiddleware, middleware)) {
+    setLatestMiddleware(middleware);
+  }
+  const [_reference, _setReference] = React__namespace.useState(null);
+  const [_floating, _setFloating] = React__namespace.useState(null);
+  const setReference = React__namespace.useCallback(node => {
+    if (node != referenceRef.current) {
+      referenceRef.current = node;
+      _setReference(node);
+    }
+  }, [_setReference]);
+  const setFloating = React__namespace.useCallback(node => {
+    if (node !== floatingRef.current) {
+      floatingRef.current = node;
+      _setFloating(node);
+    }
+  }, [_setFloating]);
+  const referenceEl = externalReference || _reference;
+  const floatingEl = externalFloating || _floating;
+  const referenceRef = React__namespace.useRef(null);
+  const floatingRef = React__namespace.useRef(null);
+  const dataRef = React__namespace.useRef(data);
+  const whileElementsMountedRef = useLatestRef(whileElementsMounted);
+  const platformRef = useLatestRef(platform);
+  const update = React__namespace.useCallback(() => {
+    if (!referenceRef.current || !floatingRef.current) {
+      return;
+    }
+    const config = {
+      placement,
+      strategy,
+      middleware: latestMiddleware
+    };
+    if (platformRef.current) {
+      config.platform = platformRef.current;
+    }
+    computePosition(referenceRef.current, floatingRef.current, config).then(data => {
+      const fullData = {
+        ...data,
+        isPositioned: true
+      };
+      if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
+        dataRef.current = fullData;
+        ReactDOM__namespace.flushSync(() => {
+          setData(fullData);
+        });
+      }
+    });
+  }, [latestMiddleware, placement, strategy, platformRef]);
+  index$2(() => {
+    if (open === false && dataRef.current.isPositioned) {
+      dataRef.current.isPositioned = false;
+      setData(data => ({
+        ...data,
+        isPositioned: false
+      }));
+    }
+  }, [open]);
+  const isMountedRef = React__namespace.useRef(false);
+  index$2(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  index$2(() => {
+    if (referenceEl) referenceRef.current = referenceEl;
+    if (floatingEl) floatingRef.current = floatingEl;
+    if (referenceEl && floatingEl) {
+      if (whileElementsMountedRef.current) {
+        return whileElementsMountedRef.current(referenceEl, floatingEl, update);
+      } else {
+        update();
+      }
+    }
+  }, [referenceEl, floatingEl, update, whileElementsMountedRef]);
+  const refs = React__namespace.useMemo(() => ({
+    reference: referenceRef,
+    floating: floatingRef,
+    setReference,
+    setFloating
+  }), [setReference, setFloating]);
+  const elements = React__namespace.useMemo(() => ({
+    reference: referenceEl,
+    floating: floatingEl
+  }), [referenceEl, floatingEl]);
+  const floatingStyles = React__namespace.useMemo(() => {
+    const initialStyles = {
+      position: strategy,
+      left: 0,
+      top: 0
+    };
+    if (!elements.floating) {
+      return initialStyles;
+    }
+    const x = roundByDPR(elements.floating, data.x);
+    const y = roundByDPR(elements.floating, data.y);
+    if (transform) {
+      return {
+        ...initialStyles,
+        transform: "translate(" + x + "px, " + y + "px)",
+        ...(getDPR(elements.floating) >= 1.5 && {
+          willChange: 'transform'
+        })
+      };
+    }
+    return {
+      position: strategy,
+      left: x,
+      top: y
+    };
+  }, [strategy, transform, elements.floating, data.x, data.y]);
+  return React__namespace.useMemo(() => ({
+    ...data,
+    update,
+    refs,
+    elements,
+    floatingStyles
+  }), [data, update, refs, elements, floatingStyles]);
+}
+
+const useFocusZone = (settings = {}, dependencies = []) => {
+  const containerRef = useProvidedOrCreatedRef(settings.containerRef);
+  const useActiveDescendant = !!settings.activeDescendantFocus;
+  const passedActiveDescendantRef = typeof settings.activeDescendantFocus === 'boolean' || !settings.activeDescendantFocus ? undefined : settings.activeDescendantFocus;
+  const activeDescendantControlRef = useProvidedOrCreatedRef(passedActiveDescendantRef);
+  const disabled = settings.disabled;
+  const abortController = React.useRef();
+  React.useEffect(() => {
+    if (containerRef.current instanceof HTMLElement && (!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) {
+      if (!disabled) {
+        const defaultSettings = {
+          ...settings,
+          activeDescendantControl: activeDescendantControlRef.current ?? undefined
+        };
+        abortController.current = focusZone(containerRef.current, defaultSettings);
+        return () => {
+          abortController.current?.abort();
+        };
+      } else {
+        abortController.current?.abort();
+      }
+    }
+  }, [disabled, ...dependencies]);
+  return {
+    containerRef,
+    activeDescendantControlRef
+  };
+};
+
+const useToggleHandler = ({
+  initialState = false
+}) => {
+  const [state, setState] = React.useState(initialState);
+  const on = () => {
+    setState(true);
+  };
+  const off = () => {
+    setState(false);
+  };
+  const toggle = React.useCallback(() => {
+    setState(prev => !prev);
+  }, []);
+  return {
+    state,
+    on,
+    off,
+    toggle
+  };
+};
+
+const OverlayPopper = ({
+  children: propChildren,
+  renderOverlay,
+  placement = 'bottom-start',
+  focusZoneSettings,
+  focusTrapSettings
+}) => {
+  const {
+    refs,
+    floatingStyles,
+    isPositioned
+  } = useFloating({
+    placement,
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(space[1]), flip(), shift()],
+    strategy: 'fixed'
+  });
+  const {
+    state: isOpen,
+    toggle: toggleOverlay,
+    off: closeOverlay
+  } = useToggleHandler({
+    initialState: false
+  });
+  const children = React.Children.map(propChildren, child => /*#__PURE__*/React.cloneElement(child, {
+    onClick: toggleOverlay,
+    tabIndex: 0,
+    ...{
+      ref: refs.setReference
+    }
+  }));
+  useFocusZone({
+    containerRef: refs.floating,
+    disabled: !isOpen || !isPositioned,
+    ...focusZoneSettings
+  });
+  useFocusTrap({
+    containerRef: refs.floating,
+    disabled: !isOpen || !isPositioned,
+    ...focusTrapSettings
+  });
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+    children: [children, /*#__PURE__*/jsxRuntimeExports.jsx(Overlay$1, {
+      ref: refs.setFloating,
+      isOpen: isOpen,
+      onDismiss: closeOverlay,
+      ignoreOutsideClickRefs: [refs.reference],
+      style: floatingStyles,
+      children: renderOverlay({
+        isOpen,
+        closeOverlay
+      })
+    })]
+  });
+};
+
+const Space = styled__default.default.div`
+  width: inherit;
+  ${space$1};
+  ${sx}
+`;
+
+const Stack = /*#__PURE__*/React.forwardRef(({
+  gapX = 0,
+  gapY = 0,
+  children,
+  alignItems = 'center',
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseStack, {
+  ref: ref,
+  alignItems: alignItems,
+  gapX: gapX,
+  gapY: gapY,
+  ...props,
+  children: children
+}));
+const BaseStack = styled__default.default(View)({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap'
+}, variant({
+  prop: 'gapX',
+  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+    const styleValue = {
+      '& > *': {
+        px: forcePixelValue(value / 2)
+      },
+      'mx': forcePixelValue(-value / 2)
+    };
+    return [key, styleValue];
+  }))
+}), variant({
+  prop: 'gapY',
+  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+    const styleValue = {
+      '& > *': {
+        mt: forcePixelValue(value)
+      },
+      'mt': forcePixelValue(-value)
+    };
+    return [key, styleValue];
+  }))
+}));
+const Item = ({
+  children,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+  ...props,
+  children: children
+});
+var Stack$1 = Object.assign(Stack, {
+  Item
+});
+
+const StyledIcon = ({
+  icon: Icon,
+  sx,
   ...props
 }) => /*#__PURE__*/jsxRuntimeExports.jsx(View, {
   ...props,
@@ -18292,14 +20674,6 @@ var index$1 = Object.assign(Tab, {
   Item: TabItem
 });
 
-/**
- * 제공된 `ref`가 없는 경우 새로운 `ref`를 만들어 사용하고, 있는 경우 제공된 ref를 사용할 수 있는 훅입니다.
- */
-const useProvidedOrCreatedRef = providedRef => {
-  const createdRef = React.useRef(null);
-  return providedRef ?? createdRef;
-};
-
 const Textarea = /*#__PURE__*/React.forwardRef(({
   disabled,
   ...props
@@ -19427,32 +21801,11 @@ const useOutsideClick = ({
   });
 };
 
-const useToggleHandler = ({
-  initialState = false
-}) => {
-  const [state, setState] = React.useState(initialState);
-  const on = () => {
-    setState(true);
-  };
-  const off = () => {
-    setState(false);
-  };
-  const toggle = React.useCallback(() => {
-    setState(prev => !prev);
-  }, []);
-  return {
-    state,
-    on,
-    off,
-    toggle
-  };
-};
-
 exports.AnimatePresence = AnimatePresence;
-exports.Breadcrumbs = index$3;
+exports.Breadcrumbs = index$4;
 exports.Button = Button;
 exports.Chip = Chip;
-exports.Dialog = index$2;
+exports.Dialog = index$3;
 exports.DialogHandler = DialogHandler;
 exports.EnigmaUI = index;
 exports.GradientText = GradientText;
@@ -19463,6 +21816,8 @@ exports.IconToggleButton = IconToggleButton;
 exports.Image = Image;
 exports.ItemList = ItemList;
 exports.MotionView = MotionView;
+exports.Overlay = Overlay$1;
+exports.OverlayPopper = OverlayPopper;
 exports.Space = Space;
 exports.Spinner = Spinner;
 exports.Stack = Stack$1;
@@ -19481,6 +21836,10 @@ exports.sx = sx;
 exports.textDecoration = textDecoration;
 exports.theme = theme;
 exports.useDevice = useDevice;
+exports.useDialogHandler = useDialogHandler;
+exports.useFocusTrap = useFocusTrap;
+exports.useFocusZone = useFocusZone;
+exports.useMediaQuery = useMediaQuery;
 exports.useOutsideClick = useOutsideClick;
 exports.useProvidedOrCreatedRef = useProvidedOrCreatedRef;
 exports.useResize = useResize;