@structyl/core 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1516 @@
+'use strict';
+
+var React17 = require('react');
+var ReactDOM = require('react-dom');
+var react = require('@floating-ui/react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React17__namespace = /*#__PURE__*/_interopNamespace(React17);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var Slot = React17__namespace.forwardRef((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+  const childrenArray = React17__namespace.Children.toArray(children);
+  const slottable = childrenArray.find(isSlottable);
+  if (slottable) {
+    const newElement = slottable.props.children;
+    const newChildren = childrenArray.map((child) => {
+      if (child === slottable) {
+        if (React17__namespace.Children.count(newElement) > 1) return React17__namespace.Children.only(null);
+        return React17__namespace.isValidElement(newElement) ? newElement.props.children : null;
+      }
+      return child;
+    });
+    return /* @__PURE__ */ React17__namespace.createElement(SlotClone, { ...slotProps, ref: forwardedRef }, React17__namespace.isValidElement(newElement) ? React17__namespace.cloneElement(newElement, void 0, newChildren) : null);
+  }
+  const singleChild = childrenArray.length === 1 ? childrenArray[0] : children;
+  return /* @__PURE__ */ React17__namespace.createElement(SlotClone, { ...slotProps, ref: forwardedRef }, singleChild);
+});
+Slot.displayName = "Slot";
+var SlotClone = React17__namespace.forwardRef((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+  if (React17__namespace.isValidElement(children)) {
+    const childRef = getElementRef(children);
+    const ref = forwardedRef ? composeRefs(forwardedRef, childRef) : childRef;
+    return React17__namespace.cloneElement(
+      children,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      { ...mergeProps(slotProps, children.props), ref }
+    );
+  }
+  return React17__namespace.Children.count(children) > 1 ? React17__namespace.Children.only(null) : null;
+});
+SlotClone.displayName = "SlotClone";
+var Slottable = ({ children }) => /* @__PURE__ */ React17__namespace.createElement(React17__namespace.Fragment, null, children);
+function isSlottable(child) {
+  return React17__namespace.isValidElement(child) && child.type === Slottable;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function composeRefs(...refs) {
+  return (node) => refs.forEach((ref) => {
+    if (typeof ref === "function") ref(node);
+    else if (ref != null) ref.current = node;
+  });
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+
+// src/primitive.tsx
+var NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive = NODES.reduce((primitive, node) => {
+  const Node = React17__namespace.forwardRef(
+    (props, forwardedRef) => {
+      const { asChild, ...rest } = props;
+      const Comp = asChild ? Slot : node;
+      return /* @__PURE__ */ React17__namespace.createElement(Comp, { ...rest, ref: forwardedRef });
+    }
+  );
+  Node.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node };
+}, {});
+function createContext2(rootComponentName, defaultContext) {
+  const Context = React17__namespace.createContext(defaultContext);
+  function Provider(props) {
+    const { children, ...context } = props;
+    const value = React17__namespace.useMemo(() => context, Object.values(context));
+    return /* @__PURE__ */ React17__namespace.createElement(Context.Provider, { value }, children);
+  }
+  Provider.displayName = `${rootComponentName}Provider`;
+  function useContextHook(consumerName) {
+    const ctx = React17__namespace.useContext(Context);
+    if (ctx !== void 0) return ctx;
+    if (defaultContext !== void 0) return defaultContext;
+    throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+  }
+  return [Provider, useContextHook];
+}
+function createContextScope(scopeName, createContextScopeDeps = []) {
+  let defaultContexts = [];
+  function createScopedContext(rootComponentName, defaultContext) {
+    const BaseContext = React17__namespace.createContext(defaultContext);
+    const index = defaultContexts.push(BaseContext) - 1;
+    function Provider(props) {
+      const { scope, children, ...context } = props;
+      const Context = scope?.[scopeName]?.[index] ?? BaseContext;
+      const value = React17__namespace.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ React17__namespace.createElement(Context.Provider, { value }, children);
+    }
+    Provider.displayName = `${rootComponentName}Provider`;
+    function useScopedContext(consumerName, scope) {
+      const Context = scope?.[scopeName]?.[index] ?? BaseContext;
+      const ctx = React17__namespace.useContext(Context);
+      if (ctx !== void 0) return ctx;
+      if (defaultContext !== void 0) return defaultContext;
+      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+    }
+    return [Provider, useScopedContext];
+  }
+  const createScope = () => {
+    const scopeContexts = defaultContexts.map(
+      () => React17__namespace.createContext(void 0)
+    );
+    return function useScopeHook(parentScope) {
+      return {
+        [`__scope${scopeName}`]: { ...parentScope, [scopeName]: scopeContexts }
+      };
+    };
+  };
+  createScope.scopeName = scopeName;
+  return [
+    createScopedContext,
+    composeContextScopes(createScope, ...createContextScopeDeps)
+  ];
+}
+function composeContextScopes(...scopes) {
+  const composed = () => {
+    const scopeHooks = scopes.map((scope) => scope());
+    return function useComposedScopeHook(parentScope) {
+      return scopeHooks.reduce(
+        (nextScope, hook) => ({ ...nextScope, ...hook(parentScope) }),
+        {}
+      );
+    };
+  };
+  composed.scopeName = scopes.map((s) => s.scopeName).join(",");
+  return composed;
+}
+var Portal = React17__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { container: containerProp, ...portalProps } = props;
+    const [mounted, setMounted] = React17__namespace.useState(false);
+    React17__namespace.useEffect(() => setMounted(true), []);
+    const container = containerProp ?? (typeof document !== "undefined" ? document.body : null);
+    if (!mounted || !container) return null;
+    return ReactDOM__namespace.createPortal(
+      /* @__PURE__ */ React17__namespace.createElement(Primitive.div, { ...portalProps, ref: forwardedRef }),
+      container
+    );
+  }
+);
+Portal.displayName = "Portal";
+var VISUALLY_HIDDEN_STYLES = {
+  position: "absolute",
+  border: 0,
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  wordWrap: "normal"
+};
+var VisuallyHidden = React17__namespace.forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ React17__namespace.createElement(
+    Primitive.span,
+    {
+      ...props,
+      ref: forwardedRef,
+      style: { ...VISUALLY_HIDDEN_STYLES, ...props.style }
+    }
+  )
+);
+VisuallyHidden.displayName = "VisuallyHidden";
+var DirectionContext = React17__namespace.createContext(void 0);
+var DirectionProvider = ({ dir, children }) => /* @__PURE__ */ React17__namespace.createElement(DirectionContext.Provider, { value: dir }, children);
+function useDirection(localDir) {
+  const globalDir = React17__namespace.useContext(DirectionContext);
+  return localDir ?? globalDir ?? "ltr";
+}
+function setRef(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref != null && typeof ref === "object")
+    ref.current = value;
+}
+function composeRefs2(...refs) {
+  return (node) => refs.forEach((ref) => setRef(ref, node));
+}
+function useComposedRefs(...refs) {
+  return React17__namespace.useCallback(composeRefs2(...refs), refs);
+}
+function useCallbackRef(callback) {
+  const callbackRef = React17__namespace.useRef(callback);
+  React17__namespace.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React17__namespace.useMemo(
+    () => ((...args) => callbackRef.current?.(...args)),
+    []
+  );
+}
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange = () => {
+  }
+}) {
+  const [uncontrolled, setUncontrolled] = React17__namespace.useState(defaultProp);
+  const isControlled = prop !== void 0;
+  const value = isControlled ? prop : uncontrolled;
+  const handleChange = useCallbackRef(onChange);
+  const setValue = React17__namespace.useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        const setter = nextValue;
+        const newValue = typeof setter === "function" ? setter(prop) : setter;
+        if (newValue !== prop) handleChange(newValue);
+      } else {
+        setUncontrolled((prev) => {
+          const setter = nextValue;
+          const newValue = typeof setter === "function" ? setter(prev) : setter;
+          if (newValue !== prev) handleChange(newValue);
+          return newValue;
+        });
+      }
+    },
+    [isControlled, prop, handleChange]
+  );
+  return [value, setValue];
+}
+var idCounter = 0;
+function useReactId() {
+  return React17__namespace.useId?.() ?? "";
+}
+function useId2(prefix) {
+  const reactId = useReactId();
+  const [id, setId] = React17__namespace.useState(reactId);
+  React17__namespace.useEffect(() => {
+    if (!reactId) setId(`yl-${++idCounter}`);
+  }, [reactId]);
+  return id || reactId;
+}
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler?.(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      ourEventHandler?.(event);
+    }
+  };
+}
+
+// src/presence.tsx
+var machine = {
+  mounted: {
+    UNMOUNT: "unmounted",
+    ANIMATION_OUT: "unmountSuspended"
+  },
+  unmountSuspended: {
+    MOUNT: "mounted",
+    ANIMATION_END: "unmounted"
+  },
+  unmounted: {
+    MOUNT: "mounted"
+  }
+};
+function usePresence(present) {
+  const [node, setNode] = React17__namespace.useState(null);
+  const stylesRef = React17__namespace.useRef(null);
+  const prevPresentRef = React17__namespace.useRef(present);
+  const prevAnimationNameRef = React17__namespace.useRef("none");
+  const initialState = present ? "mounted" : "unmounted";
+  const [state, setState] = React17__namespace.useState(initialState);
+  const send = React17__namespace.useCallback((event) => {
+    setState((prev) => {
+      const next = machine[prev][event];
+      return next ?? prev;
+    });
+  }, []);
+  React17__namespace.useEffect(() => {
+    const currentAnimationName = getAnimationName(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  React17__namespace.useEffect(() => {
+    const styles = stylesRef.current;
+    const wasPresent = prevPresentRef.current;
+    const hasPresentChanged = wasPresent !== present;
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.current;
+      const currentAnimationName = getAnimationName(styles);
+      if (present) {
+        send("MOUNT");
+      } else if (currentAnimationName === "none" || styles?.display === "none") {
+        send("UNMOUNT");
+      } else {
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        if (wasPresent && isAnimating) {
+          send("ANIMATION_OUT");
+        } else {
+          send("UNMOUNT");
+        }
+      }
+      prevPresentRef.current = present;
+    }
+  }, [present, send]);
+  React17__namespace.useEffect(() => {
+    if (!node) {
+      send("ANIMATION_END");
+      return;
+    }
+    const handleAnimationEnd = (event) => {
+      const currentAnimationName = getAnimationName(stylesRef.current);
+      const animationName = "animationName" in event ? event.animationName : "";
+      const isCurrent = currentAnimationName.includes(animationName) || animationName === "";
+      if (event.target === node && isCurrent) {
+        send("ANIMATION_END");
+      }
+    };
+    const handleAnimationStart = (event) => {
+      if (event.target === node) {
+        prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+      }
+    };
+    node.addEventListener("animationstart", handleAnimationStart);
+    node.addEventListener("animationcancel", handleAnimationEnd);
+    node.addEventListener("animationend", handleAnimationEnd);
+    node.addEventListener("transitioncancel", handleAnimationEnd);
+    node.addEventListener("transitionend", handleAnimationEnd);
+    return () => {
+      node.removeEventListener("animationstart", handleAnimationStart);
+      node.removeEventListener("animationcancel", handleAnimationEnd);
+      node.removeEventListener("animationend", handleAnimationEnd);
+      node.removeEventListener("transitioncancel", handleAnimationEnd);
+      node.removeEventListener("transitionend", handleAnimationEnd);
+    };
+  }, [node, send]);
+  return {
+    isPresent: state !== "unmounted",
+    ref: React17__namespace.useCallback((el) => {
+      stylesRef.current = el ? getComputedStyle(el) : null;
+      setNode(el);
+    }, [])
+  };
+}
+function getAnimationName(styles) {
+  return styles?.animationName || "none";
+}
+var Presence = (props) => {
+  const { present, children, forceMount } = props;
+  const presence = usePresence(present);
+  const isFunctionChild = typeof children === "function";
+  const child = isFunctionChild ? children({ present: presence.isPresent }) : React17__namespace.Children.only(children);
+  const childRef = getElementRef2(child);
+  const ref = useComposedRefs(presence.ref, childRef);
+  const shouldRender = forceMount || isFunctionChild || presence.isPresent;
+  if (!shouldRender) return null;
+  return React17__namespace.cloneElement(child, { ref });
+};
+Presence.displayName = "Presence";
+function getElementRef2(element) {
+  const props = element.props;
+  const ref19 = props?.ref;
+  const ref18 = element.ref;
+  return ref19 ?? ref18;
+}
+var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
+var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
+var EVENT_OPTIONS = { bubbles: false, cancelable: true };
+var FocusScope = React17__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      loop = false,
+      trapped = false,
+      onMountAutoFocus: onMountAutoFocusProp,
+      onUnmountAutoFocus: onUnmountAutoFocusProp,
+      ...scopeProps
+    } = props;
+    const [container, setContainer] = React17__namespace.useState(null);
+    const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
+    const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
+    const lastFocusedElementRef = React17__namespace.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, setContainer);
+    const scope = React17__namespace.useRef({
+      paused: false,
+      pause() {
+        this.paused = true;
+      },
+      resume() {
+        this.paused = false;
+      }
+    }).current;
+    React17__namespace.useEffect(() => {
+      if (!trapped) return;
+      const handleFocusIn = (event) => {
+        if (focusScopesStack.active !== scope) return;
+        const target = event.target;
+        if (container?.contains(target)) {
+          lastFocusedElementRef.current = target;
+        } else {
+          focus(lastFocusedElementRef.current, { select: true });
+        }
+      };
+      const handleFocusOut = (event) => {
+        if (focusScopesStack.active !== scope) return;
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget === null) return;
+        if (!container?.contains(relatedTarget)) {
+          focus(lastFocusedElementRef.current, { select: true });
+        }
+      };
+      const handleMutations = (mutations) => {
+        const focusedEl = document.activeElement;
+        if (focusedEl !== document.body) return;
+        for (const mutation of mutations) {
+          if (mutation.removedNodes.length > 0) {
+            focus(container, { select: true });
+          }
+        }
+      };
+      document.addEventListener("focusin", handleFocusIn);
+      document.addEventListener("focusout", handleFocusOut);
+      const mutationObserver = new MutationObserver(handleMutations);
+      if (container) {
+        mutationObserver.observe(container, { childList: true, subtree: true });
+      }
+      return () => {
+        document.removeEventListener("focusin", handleFocusIn);
+        document.removeEventListener("focusout", handleFocusOut);
+        mutationObserver.disconnect();
+      };
+    }, [trapped, container, scope]);
+    React17__namespace.useEffect(() => {
+      if (!container) return;
+      focusScopesStack.add(scope);
+      const previouslyFocusedElement = document.activeElement;
+      const hasFocusedCandidate = container.contains(previouslyFocusedElement);
+      if (!hasFocusedCandidate) {
+        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
+        container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+        container.dispatchEvent(mountEvent);
+        if (!mountEvent.defaultPrevented) {
+          focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
+          if (document.activeElement === previouslyFocusedElement) {
+            focus(container);
+          }
+        }
+      }
+      return () => {
+        container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+        setTimeout(() => {
+          const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
+          container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
+          container.dispatchEvent(unmountEvent);
+          if (!unmountEvent.defaultPrevented) {
+            focus(previouslyFocusedElement ?? document.body, { select: true });
+          }
+          container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
+          focusScopesStack.remove(scope);
+        }, 0);
+      };
+    }, [container, onMountAutoFocus, onUnmountAutoFocus, scope]);
+    const handleKeyDown = React17__namespace.useCallback(
+      (event) => {
+        if (!loop && !trapped) return;
+        if (scope.paused) return;
+        const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
+        const focusedElement = document.activeElement;
+        if (!isTabKey || !focusedElement) return;
+        const containerEl = event.currentTarget;
+        const [first, last] = getTabbableEdges(containerEl);
+        const hasTabbable = first && last;
+        if (!hasTabbable) {
+          if (focusedElement === containerEl) event.preventDefault();
+        } else {
+          if (!event.shiftKey && focusedElement === last) {
+            event.preventDefault();
+            if (loop) focus(first, { select: true });
+          } else if (event.shiftKey && focusedElement === first) {
+            event.preventDefault();
+            if (loop) focus(last, { select: true });
+          }
+        }
+      },
+      [loop, trapped, scope.paused]
+    );
+    return /* @__PURE__ */ React17__namespace.createElement(
+      Primitive.div,
+      {
+        tabIndex: -1,
+        ...scopeProps,
+        ref: composedRefs,
+        onKeyDown: handleKeyDown
+      }
+    );
+  }
+);
+FocusScope.displayName = "FocusScope";
+function focus(element, { select = false } = {}) {
+  if (element && element.focus) {
+    const previouslyFocusedElement = document.activeElement;
+    element.focus({ preventScroll: true });
+    if (element !== previouslyFocusedElement && isSelectableInput(element) && select) {
+      element.select();
+    }
+  }
+}
+function focusFirst(candidates, { select = false } = {}) {
+  const previouslyFocusedElement = document.activeElement;
+  for (const candidate of candidates) {
+    focus(candidate, { select });
+    if (document.activeElement !== previouslyFocusedElement) return;
+  }
+}
+function getTabbableEdges(container) {
+  const candidates = getTabbableCandidates(container);
+  const first = findVisible(candidates, container);
+  const last = findVisible(candidates.reverse(), container);
+  return [first, last];
+}
+function getTabbableCandidates(container) {
+  const nodes = [];
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => {
+      const el = node;
+      const isHiddenInput = el.tagName === "INPUT" && el.type === "hidden";
+      if (el.hasAttribute("disabled") || el.hasAttribute("hidden") || isHiddenInput) {
+        return NodeFilter.FILTER_SKIP;
+      }
+      return el.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  while (walker.nextNode()) nodes.push(walker.currentNode);
+  return nodes;
+}
+function findVisible(elements, container) {
+  for (const element of elements) {
+    if (!isHidden(element, { upTo: container })) return element;
+  }
+  return void 0;
+}
+function isHidden(node, { upTo } = {}) {
+  if (getComputedStyle(node).visibility === "hidden") return true;
+  let current = node;
+  while (current) {
+    if (upTo !== void 0 && current === upTo) return false;
+    if (getComputedStyle(current).display === "none") return true;
+    current = current.parentElement;
+  }
+  return false;
+}
+function isSelectableInput(element) {
+  return element instanceof HTMLInputElement && "select" in element;
+}
+function removeLinks(items) {
+  return items.filter((item) => item.tagName !== "A");
+}
+var focusScopesStack = createFocusScopesStack();
+function createFocusScopesStack() {
+  let stack = [];
+  return {
+    add(focusScope) {
+      const active = stack[0];
+      if (focusScope !== active) active?.pause();
+      stack = arrayRemove(stack, focusScope);
+      stack.unshift(focusScope);
+    },
+    remove(focusScope) {
+      stack = arrayRemove(stack, focusScope);
+      stack[0]?.resume();
+    },
+    get active() {
+      return stack[0];
+    }
+  };
+}
+function arrayRemove(arr, item) {
+  const newArr = [...arr];
+  const idx = newArr.indexOf(item);
+  if (idx !== -1) newArr.splice(idx, 1);
+  return newArr;
+}
+var count = 0;
+function useFocusGuards() {
+  React17__namespace.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const edgeGuards = document.querySelectorAll("[data-structyl-focus-guard]");
+    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
+    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
+    count++;
+    return () => {
+      if (count === 1) {
+        document.querySelectorAll("[data-structyl-focus-guard]").forEach((node) => node.remove());
+      }
+      count--;
+    };
+  }, []);
+}
+function createFocusGuard() {
+  const element = document.createElement("span");
+  element.setAttribute("data-structyl-focus-guard", "");
+  element.tabIndex = 0;
+  element.style.cssText = "outline: none; opacity: 0; position: fixed; pointer-events: none";
+  return element;
+}
+var FocusGuards = ({ children }) => {
+  useFocusGuards();
+  return /* @__PURE__ */ React17__namespace.createElement(React17__namespace.Fragment, null, children);
+};
+FocusGuards.displayName = "FocusGuards";
+var CONTEXT_UPDATE = "dismissableLayer.update";
+var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
+var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
+var originalBodyPointerEvents;
+var DismissableLayerContext = React17__namespace.createContext({
+  layers: /* @__PURE__ */ new Set(),
+  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
+  branches: /* @__PURE__ */ new Set()
+});
+var DismissableLayer = React17__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      disableOutsidePointerEvents = false,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      onDismiss,
+      ...layerProps
+    } = props;
+    const context = React17__namespace.useContext(DismissableLayerContext);
+    const [node, setNode] = React17__namespace.useState(null);
+    const [, forceUpdate] = React17__namespace.useState({});
+    const ownerDocument = node?.ownerDocument ?? (typeof document !== "undefined" ? document : null);
+    const layers = Array.from(context.layers);
+    const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
+    const highestLayerWithOutsidePointerEventsDisabledIndex = highestLayerWithOutsidePointerEventsDisabled ? layers.indexOf(highestLayerWithOutsidePointerEventsDisabled) : -1;
+    const index = node ? layers.indexOf(node) : -1;
+    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
+    const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
+    const pointerDownOutside = usePointerDownOutside((event) => {
+      const target = event.target;
+      const isPointerDownOnBranch = [...context.branches].some(
+        (branch) => branch.contains(target)
+      );
+      if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
+      onPointerDownOutside?.(event);
+      onInteractOutside?.(event);
+      if (!event.defaultPrevented) onDismiss?.();
+    }, ownerDocument);
+    const focusOutside = useFocusOutside((event) => {
+      const target = event.target;
+      const isFocusOnBranch = [...context.branches].some(
+        (branch) => branch.contains(target)
+      );
+      if (isFocusOnBranch) return;
+      onFocusOutside?.(event);
+      onInteractOutside?.(event);
+      if (!event.defaultPrevented) onDismiss?.();
+    }, ownerDocument);
+    useEscapeKeydown((event) => {
+      const layers2 = Array.from(context.layers);
+      const index2 = node ? layers2.indexOf(node) : -1;
+      const isHighest = node != null && index2 === layers2.length - 1;
+      if (!isHighest) return;
+      onEscapeKeyDown?.(event);
+      if (!event.defaultPrevented && onDismiss) {
+        event.preventDefault();
+        onDismiss();
+      }
+    }, ownerDocument);
+    React17__namespace.useLayoutEffect(() => {
+      if (!node) return;
+      if (disableOutsidePointerEvents) {
+        if (context.layersWithOutsidePointerEventsDisabled.size === 0 && ownerDocument) {
+          originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+          ownerDocument.body.style.pointerEvents = "none";
+        }
+        context.layersWithOutsidePointerEventsDisabled.add(node);
+      }
+      context.layers.add(node);
+      updatePointerEventsOnNode(node, context);
+      dispatchUpdate();
+      forceUpdate({});
+      return () => {
+        if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1 && ownerDocument) {
+          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+        }
+      };
+    }, [node, ownerDocument, disableOutsidePointerEvents, context]);
+    React17__namespace.useLayoutEffect(() => {
+      return () => {
+        if (!node) return;
+        context.layers.delete(node);
+        context.layersWithOutsidePointerEventsDisabled.delete(node);
+        dispatchUpdate();
+      };
+    }, [node, context]);
+    React17__namespace.useEffect(() => {
+      const handleUpdate = () => {
+        if (node) updatePointerEventsOnNode(node, context);
+        forceUpdate({});
+      };
+      document.addEventListener(CONTEXT_UPDATE, handleUpdate);
+      return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
+    }, [node, context]);
+    const composedRefs = useComposedRefs(forwardedRef, setNode);
+    return /* @__PURE__ */ React17__namespace.createElement(
+      Primitive.div,
+      {
+        ...layerProps,
+        ref: composedRefs,
+        style: {
+          pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
+          ...layerProps.style
+        },
+        onFocusCapture: composeEventHandlers(layerProps.onFocusCapture, focusOutside.onFocusCapture),
+        onBlurCapture: composeEventHandlers(layerProps.onBlurCapture, focusOutside.onBlurCapture),
+        onPointerDownCapture: composeEventHandlers(
+          layerProps.onPointerDownCapture,
+          pointerDownOutside.onPointerDownCapture
+        )
+      }
+    );
+  }
+);
+DismissableLayer.displayName = "DismissableLayer";
+var DismissableLayerBranch = React17__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const context = React17__namespace.useContext(DismissableLayerContext);
+    const ref = React17__namespace.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref);
+    React17__namespace.useEffect(() => {
+      const node = ref.current;
+      if (!node) return;
+      context.branches.add(node);
+      return () => {
+        context.branches.delete(node);
+      };
+    }, [context]);
+    return /* @__PURE__ */ React17__namespace.createElement(Primitive.div, { ...props, ref: composedRefs });
+  }
+);
+DismissableLayerBranch.displayName = "DismissableLayerBranch";
+function updatePointerEventsOnNode(node, context) {
+  const layers = Array.from(context.layers);
+  const [highest] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
+  const highestIndex = highest ? layers.indexOf(highest) : -1;
+  const nodeIndex = layers.indexOf(node);
+  const isBodyDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
+  const isEnabled = nodeIndex >= highestIndex;
+  if (isBodyDisabled) {
+    node.style.pointerEvents = isEnabled ? "auto" : "none";
+  } else {
+    node.style.removeProperty("pointer-events");
+  }
+}
+function dispatchUpdate() {
+  if (typeof document === "undefined") return;
+  const event = new CustomEvent(CONTEXT_UPDATE);
+  document.dispatchEvent(event);
+}
+function usePointerDownOutside(onPointerDownOutside, ownerDocument = typeof document !== "undefined" ? document : null) {
+  const handler = useCallbackRef(onPointerDownOutside);
+  const isPointerInsideReactTreeRef = React17__namespace.useRef(false);
+  const handleClickRef = React17__namespace.useRef(() => {
+  });
+  React17__namespace.useEffect(() => {
+    if (!ownerDocument) return;
+    const handlePointerDown = (event) => {
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        const eventDetail = { originalEvent: event };
+        const handleAndDispatchPointerDownOutsideEvent = () => {
+          const customEvent = new CustomEvent(POINTER_DOWN_OUTSIDE, {
+            bubbles: false,
+            cancelable: true,
+            detail: eventDetail
+          });
+          const targetEl = event.target;
+          targetEl.addEventListener(POINTER_DOWN_OUTSIDE, handler, { once: true });
+          targetEl.dispatchEvent(customEvent);
+        };
+        if (event.pointerType === "touch") {
+          ownerDocument.removeEventListener("click", handleClickRef.current);
+          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
+          ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
+        } else {
+          handleAndDispatchPointerDownOutsideEvent();
+        }
+      } else {
+        ownerDocument.removeEventListener("click", handleClickRef.current);
+      }
+      isPointerInsideReactTreeRef.current = false;
+    };
+    const timerId = window.setTimeout(() => {
+      ownerDocument.addEventListener("pointerdown", handlePointerDown);
+    }, 0);
+    return () => {
+      window.clearTimeout(timerId);
+      ownerDocument.removeEventListener("pointerdown", handlePointerDown);
+      ownerDocument.removeEventListener("click", handleClickRef.current);
+    };
+  }, [ownerDocument, handler]);
+  return {
+    onPointerDownCapture: () => {
+      isPointerInsideReactTreeRef.current = true;
+    }
+  };
+}
+function useFocusOutside(onFocusOutside, ownerDocument = typeof document !== "undefined" ? document : null) {
+  const handler = useCallbackRef(onFocusOutside);
+  const isFocusInsideReactTreeRef = React17__namespace.useRef(false);
+  React17__namespace.useEffect(() => {
+    if (!ownerDocument) return;
+    const handleFocus = (event) => {
+      if (event.target && !isFocusInsideReactTreeRef.current) {
+        const eventDetail = { originalEvent: event };
+        const customEvent = new CustomEvent(FOCUS_OUTSIDE, {
+          bubbles: false,
+          cancelable: true,
+          detail: eventDetail
+        });
+        const targetEl = event.target;
+        targetEl.addEventListener(FOCUS_OUTSIDE, handler, { once: true });
+        targetEl.dispatchEvent(customEvent);
+      }
+    };
+    ownerDocument.addEventListener("focusin", handleFocus);
+    return () => ownerDocument.removeEventListener("focusin", handleFocus);
+  }, [ownerDocument, handler]);
+  return {
+    onFocusCapture: () => {
+      isFocusInsideReactTreeRef.current = true;
+    },
+    onBlurCapture: () => {
+      isFocusInsideReactTreeRef.current = false;
+    }
+  };
+}
+function useEscapeKeydown(onEscapeKeyDown, ownerDocument = typeof document !== "undefined" ? document : null) {
+  const handler = useCallbackRef(onEscapeKeyDown);
+  React17__namespace.useEffect(() => {
+    if (!ownerDocument) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") handler(event);
+    };
+    ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
+  }, [handler, ownerDocument]);
+}
+function createCollection(name) {
+  const CollectionContext = React17__namespace.createContext({
+    collectionRef: { current: null },
+    itemMap: /* @__PURE__ */ new Map()
+  });
+  const CollectionProvider = ({ children }) => {
+    const collectionRef = React17__namespace.useRef(null);
+    const itemMap = React17__namespace.useRef(/* @__PURE__ */ new Map()).current;
+    const value = React17__namespace.useMemo(() => ({ collectionRef, itemMap }), [itemMap]);
+    return /* @__PURE__ */ React17__namespace.createElement(CollectionContext.Provider, { value }, children);
+  };
+  CollectionProvider.displayName = `${name}CollectionProvider`;
+  const CollectionSlot = React17__namespace.forwardRef(
+    ({ children }, forwardedRef) => {
+      const context = React17__namespace.useContext(CollectionContext);
+      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
+      return /* @__PURE__ */ React17__namespace.createElement(Slot, { ref: composedRefs }, children);
+    }
+  );
+  CollectionSlot.displayName = `${name}CollectionSlot`;
+  const ITEM_DATA_ATTR = `data-${name.toLowerCase()}-collection-item`;
+  const CollectionItemSlot = React17__namespace.forwardRef(
+    (props, forwardedRef) => {
+      const { children, ...itemData } = props;
+      const ref = React17__namespace.useRef(null);
+      const composedRefs = useComposedRefs(forwardedRef, ref);
+      const context = React17__namespace.useContext(CollectionContext);
+      React17__namespace.useEffect(() => {
+        context.itemMap.set(ref, { ref, ...itemData });
+        return () => {
+          context.itemMap.delete(ref);
+        };
+      });
+      return /* @__PURE__ */ React17__namespace.createElement(Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs }, children);
+    }
+  );
+  CollectionItemSlot.displayName = `${name}CollectionItemSlot`;
+  function useCollection2() {
+    const context = React17__namespace.useContext(CollectionContext);
+    return React17__namespace.useCallback(() => {
+      const collectionNode = context.collectionRef.current;
+      if (!collectionNode) return [];
+      const orderedNodes = Array.from(
+        collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)
+      );
+      const items = Array.from(context.itemMap.values());
+      items.sort(
+        (a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
+      );
+      return items;
+    }, [context.collectionRef, context.itemMap]);
+  }
+  return [
+    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
+    useCollection2
+  ];
+}
+
+// src/roving-focus-group.tsx
+var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
+var EVENT_OPTIONS2 = { bubbles: false, cancelable: true };
+var [Collection, useCollection] = createCollection("RovingFocus");
+var [RovingFocusProvider, useRovingFocusContext] = createContext2("RovingFocusGroup");
+var RovingFocusGroup = React17__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      orientation,
+      dir: dirProp,
+      loop = false,
+      currentTabStopId: currentTabStopIdProp,
+      defaultCurrentTabStopId,
+      onCurrentTabStopIdChange,
+      onEntryFocus,
+      preventScrollOnEntryFocus = false,
+      ...groupProps
+    } = props;
+    const ref = React17__namespace.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const dir = useDirection(dirProp);
+    const [currentTabStopId = null, setCurrentTabStopId] = useControllableState({
+      prop: currentTabStopIdProp,
+      defaultProp: defaultCurrentTabStopId,
+      onChange: onCurrentTabStopIdChange
+    });
+    const [isTabbingBackOut, setIsTabbingBackOut] = React17__namespace.useState(false);
+    const handleEntryFocus = useCallbackRef(onEntryFocus);
+    const getItems = useCollection();
+    const isClickFocusRef = React17__namespace.useRef(false);
+    const [focusableItemsCount, setFocusableItemsCount] = React17__namespace.useState(0);
+    React17__namespace.useEffect(() => {
+      const node = ref.current;
+      if (!node) return;
+      const handler = (e) => handleEntryFocus(e);
+      node.addEventListener(ENTRY_FOCUS, handler);
+      return () => node.removeEventListener(ENTRY_FOCUS, handler);
+    }, [handleEntryFocus]);
+    return /* @__PURE__ */ React17__namespace.createElement(Collection.Provider, null, /* @__PURE__ */ React17__namespace.createElement(Collection.Slot, null, /* @__PURE__ */ React17__namespace.createElement(
+      RovingFocusProvider,
+      {
+        orientation,
+        dir,
+        loop,
+        currentTabStopId,
+        onItemFocus: React17__namespace.useCallback(
+          (id) => setCurrentTabStopId(id),
+          [setCurrentTabStopId]
+        ),
+        onItemShiftTab: React17__namespace.useCallback(() => setIsTabbingBackOut(true), []),
+        onFocusableItemAdd: React17__namespace.useCallback(
+          () => setFocusableItemsCount((c) => c + 1),
+          []
+        ),
+        onFocusableItemRemove: React17__namespace.useCallback(
+          () => setFocusableItemsCount((c) => c - 1),
+          []
+        )
+      },
+      /* @__PURE__ */ React17__namespace.createElement(
+        Primitive.div,
+        {
+          tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
+          "data-orientation": orientation,
+          ...groupProps,
+          ref: composedRefs,
+          style: { outline: "none", ...groupProps.style },
+          onMouseDown: composeEventHandlers(groupProps.onMouseDown, () => {
+            isClickFocusRef.current = true;
+          }),
+          onFocus: composeEventHandlers(groupProps.onFocus, (event) => {
+            const isKeyboardFocus = !isClickFocusRef.current;
+            if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+              const entryEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS2);
+              event.currentTarget.dispatchEvent(entryEvent);
+              if (!entryEvent.defaultPrevented) {
+                const items = getItems().filter((item) => item.focusable);
+                const activeItem = items.find((item) => item.active);
+                const currentItem = items.find((item) => item.id === currentTabStopId);
+                const candidateItems = [activeItem, currentItem, ...items].filter(
+                  Boolean
+                );
+                focusFirst2(
+                  candidateItems.map((i) => i.ref.current).filter(Boolean),
+                  preventScrollOnEntryFocus
+                );
+              }
+            }
+            isClickFocusRef.current = false;
+          }),
+          onBlur: composeEventHandlers(groupProps.onBlur, () => setIsTabbingBackOut(false))
+        }
+      )
+    )));
+  }
+);
+RovingFocusGroup.displayName = "RovingFocusGroup";
+var RovingFocusItem = React17__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { focusable = true, active = false, tabStopId, ...itemProps } = props;
+    const autoId = useId2();
+    const id = tabStopId ?? autoId;
+    const context = useRovingFocusContext("RovingFocusItem");
+    const isCurrentTabStop = context.currentTabStopId === id;
+    const getItems = useCollection();
+    const { onFocusableItemAdd, onFocusableItemRemove } = context;
+    React17__namespace.useEffect(() => {
+      if (!focusable) return void 0;
+      onFocusableItemAdd();
+      return () => onFocusableItemRemove();
+    }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
+    return /* @__PURE__ */ React17__namespace.createElement(Collection.ItemSlot, { id, focusable, active }, /* @__PURE__ */ React17__namespace.createElement(
+      Primitive.span,
+      {
+        tabIndex: isCurrentTabStop ? 0 : -1,
+        "data-orientation": context.orientation,
+        ...itemProps,
+        ref: forwardedRef,
+        onMouseDown: composeEventHandlers(itemProps.onMouseDown, (event) => {
+          if (!focusable) event.preventDefault();
+          else context.onItemFocus(id);
+        }),
+        onFocus: composeEventHandlers(itemProps.onFocus, () => context.onItemFocus(id)),
+        onKeyDown: composeEventHandlers(itemProps.onKeyDown, (event) => {
+          if (event.key === "Tab" && event.shiftKey) {
+            context.onItemShiftTab();
+            return;
+          }
+          if (event.target !== event.currentTarget) return;
+          const focusIntent = getFocusIntent(event, context.orientation, context.dir);
+          if (focusIntent !== void 0) {
+            if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+            event.preventDefault();
+            let candidateNodes = getItems().filter((item) => item.focusable).map((item) => item.ref.current).filter(Boolean);
+            if (focusIntent === "last") candidateNodes.reverse();
+            else if (focusIntent === "prev" || focusIntent === "next") {
+              if (focusIntent === "prev") candidateNodes.reverse();
+              const currentIndex = candidateNodes.indexOf(event.currentTarget);
+              candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
+            }
+            setTimeout(() => focusFirst2(candidateNodes));
+          }
+        })
+      }
+    ));
+  }
+);
+RovingFocusItem.displayName = "RovingFocusItem";
+var MAP_KEY_TO_FOCUS_INTENT = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+function getDirectionAwareKey(key, dir) {
+  if (dir !== "rtl") return key;
+  if (key === "ArrowLeft") return "ArrowRight";
+  if (key === "ArrowRight") return "ArrowLeft";
+  return key;
+}
+function getFocusIntent(event, orientation, dir) {
+  const key = getDirectionAwareKey(event.key, dir);
+  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
+  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
+  return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function focusFirst2(candidates, preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidate of candidates) {
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus({ preventScroll });
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function wrapArray(arr, startIdx) {
+  return arr.map((_, index) => arr[(startIdx + index) % arr.length]);
+}
+var Arrow = React17__namespace.forwardRef((props, forwardedRef) => {
+  const { width = 10, height = 5, ...arrowProps } = props;
+  return /* @__PURE__ */ React17__namespace.createElement(
+    Primitive.svg,
+    {
+      ...arrowProps,
+      ref: forwardedRef,
+      width,
+      height,
+      viewBox: "0 0 30 10",
+      preserveAspectRatio: "none"
+    },
+    /* @__PURE__ */ React17__namespace.createElement("polygon", { points: "0,0 30,0 15,10", fill: "currentColor" })
+  );
+});
+Arrow.displayName = "Arrow";
+var AccessibleIcon = ({ label, children }) => {
+  const child = React17__namespace.Children.only(children);
+  return /* @__PURE__ */ React17__namespace.createElement(React17__namespace.Fragment, null, React17__namespace.cloneElement(child, {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ...child.props,
+    "aria-hidden": "true",
+    focusable: "false"
+  }), /* @__PURE__ */ React17__namespace.createElement(VisuallyHidden, null, label));
+};
+AccessibleIcon.displayName = "AccessibleIcon";
+var lockCount = 0;
+var originalOverflow = "";
+var originalPaddingRight = "";
+function getScrollbarWidth() {
+  if (typeof window === "undefined" || typeof document === "undefined") return 0;
+  return window.innerWidth - document.documentElement.clientWidth;
+}
+function useScrollLock(enabled = true) {
+  React17__namespace.useEffect(() => {
+    if (!enabled || typeof document === "undefined") return;
+    if (lockCount === 0) {
+      const body = document.body;
+      const scrollbarWidth = getScrollbarWidth();
+      originalOverflow = body.style.overflow;
+      originalPaddingRight = body.style.paddingRight;
+      const existingPadding = parseInt(window.getComputedStyle(body).paddingRight, 10) || 0;
+      body.style.overflow = "hidden";
+      if (scrollbarWidth > 0) {
+        body.style.paddingRight = `${existingPadding + scrollbarWidth}px`;
+      }
+    }
+    lockCount++;
+    return () => {
+      lockCount--;
+      if (lockCount === 0) {
+        document.body.style.overflow = originalOverflow;
+        document.body.style.paddingRight = originalPaddingRight;
+      }
+    };
+  }, [enabled]);
+}
+var ScrollLock = ({
+  children,
+  enabled = true
+}) => {
+  useScrollLock(enabled);
+  return /* @__PURE__ */ React17__namespace.createElement(React17__namespace.Fragment, null, children);
+};
+ScrollLock.displayName = "ScrollLock";
+
+// src/popper.tsx
+var popper_exports = {};
+__export(popper_exports, {
+  Anchor: () => PopperAnchor,
+  Arrow: () => PopperArrow,
+  Content: () => PopperContent,
+  Root: () => Popper
+});
+var [PopperProvider, usePopperContext] = createContext2("Popper");
+var Popper = ({ children }) => {
+  const [anchor, setAnchor] = React17__namespace.useState(null);
+  return /* @__PURE__ */ React17__namespace.createElement(PopperProvider, { anchor, onAnchorChange: setAnchor }, children);
+};
+Popper.displayName = "Popper";
+var PopperAnchor = React17__namespace.forwardRef((props, forwardedRef) => {
+  const { virtualRef, ...anchorProps } = props;
+  const ctx = usePopperContext("PopperAnchor");
+  const ref = React17__namespace.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  React17__namespace.useEffect(() => {
+    ctx.onAnchorChange(virtualRef?.current ?? ref.current);
+  });
+  return virtualRef ? null : /* @__PURE__ */ React17__namespace.createElement(Primitive.div, { ...anchorProps, ref: composedRefs });
+});
+PopperAnchor.displayName = "PopperAnchor";
+var [PopperContentProvider, useContentContext] = createContext2("PopperContent");
+var PopperContent = React17__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      side = "bottom",
+      sideOffset = 0,
+      align = "center",
+      alignOffset = 0,
+      arrowPadding = 0,
+      avoidCollisions = true,
+      collisionBoundary = [],
+      collisionPadding: collisionPaddingProp = 0,
+      sticky = "partial",
+      hideWhenDetached = false,
+      updatePositionStrategy = "optimized",
+      onPlaced,
+      strategy = "fixed",
+      ...contentProps
+    } = props;
+    const ctx = usePopperContext("PopperContent");
+    const [content, setContent] = React17__namespace.useState(null);
+    const composedRefs = useComposedRefs(forwardedRef, setContent);
+    const [arrow, setArrow] = React17__namespace.useState(null);
+    const arrowSize = useSize(arrow);
+    const arrowWidth = arrowSize?.width ?? 0;
+    const arrowHeight = arrowSize?.height ?? 0;
+    const dir = useDirection();
+    const desiredPlacement = side + (align !== "center" ? "-" + align : "");
+    const collisionPadding = typeof collisionPaddingProp === "number" ? collisionPaddingProp : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
+    const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary].filter(Boolean);
+    const detectOverflowOptions = {
+      padding: collisionPadding,
+      boundary: boundary.filter(isHTMLElement),
+      altBoundary: boundary.length > 0
+    };
+    const middleware = [
+      react.offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
+      avoidCollisions && react.shift({
+        mainAxis: true,
+        crossAxis: true,
+        limiter: sticky === "partial" ? react.limitShift() : void 0,
+        ...detectOverflowOptions
+      }),
+      avoidCollisions && react.flip({ ...detectOverflowOptions }),
+      react.size({
+        ...detectOverflowOptions,
+        apply: ({ elements, rects, availableWidth, availableHeight }) => {
+          const { width: anchorWidth, height: anchorHeight } = rects.reference;
+          const contentStyle = elements.floating.style;
+          contentStyle.setProperty("--structyl-popper-available-width", `${availableWidth}px`);
+          contentStyle.setProperty("--structyl-popper-available-height", `${availableHeight}px`);
+          contentStyle.setProperty("--structyl-popper-anchor-width", `${anchorWidth}px`);
+          contentStyle.setProperty("--structyl-popper-anchor-height", `${anchorHeight}px`);
+        }
+      }),
+      arrow && react.arrow({ element: arrow, padding: arrowPadding }),
+      transformOrigin({ arrowWidth, arrowHeight }),
+      hideWhenDetached && react.hide({ strategy: "referenceHidden" })
+    ].filter(Boolean);
+    const { refs, floatingStyles, placement, isPositioned, middlewareData } = react.useFloating({
+      strategy,
+      placement: desiredPlacement,
+      whileElementsMounted: (...args) => react.autoUpdate(...args, {
+        animationFrame: updatePositionStrategy === "always"
+      }),
+      middleware
+    });
+    React17__namespace.useLayoutEffect(() => {
+      refs.setPositionReference(ctx.anchor);
+    }, [ctx.anchor, refs]);
+    const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+    const handlePlaced = useCallbackRef(onPlaced);
+    React17__namespace.useLayoutEffect(() => {
+      if (isPositioned) handlePlaced();
+    }, [isPositioned, handlePlaced]);
+    const arrowX = middlewareData.arrow?.x;
+    const arrowY = middlewareData.arrow?.y;
+    const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+    const contentStyleZIndex = contentProps.style?.zIndex;
+    const [contentZIndex, setContentZIndex] = React17__namespace.useState(
+      contentStyleZIndex ?? 50
+    );
+    React17__namespace.useLayoutEffect(() => {
+      if (!content) {
+        setContentZIndex(contentStyleZIndex ?? 50);
+        return;
+      }
+      const computedZIndex = window.getComputedStyle(content).zIndex;
+      setContentZIndex(computedZIndex === "auto" ? contentStyleZIndex ?? 50 : computedZIndex);
+    }, [content, contentProps.className, contentStyleZIndex]);
+    return /* @__PURE__ */ React17__namespace.createElement(
+      "div",
+      {
+        ref: refs.setFloating,
+        "data-structyl-popper-content-wrapper": "",
+        style: {
+          ...floatingStyles,
+          transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)",
+          minWidth: "max-content",
+          zIndex: contentZIndex,
+          ["--structyl-popper-transform-origin"]: [middlewareData.transformOrigin?.x, middlewareData.transformOrigin?.y].join(" ") || void 0,
+          ...middlewareData.hide?.referenceHidden && {
+            visibility: "hidden",
+            pointerEvents: "none"
+          }
+        },
+        dir
+      },
+      /* @__PURE__ */ React17__namespace.createElement(
+        PopperContentProvider,
+        {
+          placedSide,
+          placedAlign,
+          arrowX,
+          arrowY,
+          shouldHideArrow: cannotCenterArrow,
+          onArrowChange: setArrow
+        },
+        /* @__PURE__ */ React17__namespace.createElement(
+          Primitive.div,
+          {
+            "data-side": placedSide,
+            "data-align": placedAlign,
+            ...contentProps,
+            ref: composedRefs,
+            style: { ...contentProps.style, animation: !isPositioned ? "none" : void 0 }
+          }
+        )
+      )
+    );
+  }
+);
+PopperContent.displayName = "PopperContent";
+var OPPOSITE_SIDE = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+var PopperArrow = React17__namespace.forwardRef((props, forwardedRef) => {
+  const { ...arrowProps } = props;
+  const contentContext = useContentContext("PopperArrow");
+  const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
+  return /* @__PURE__ */ React17__namespace.createElement(
+    "span",
+    {
+      ref: contentContext.onArrowChange,
+      style: {
+        position: "absolute",
+        left: contentContext.arrowX,
+        top: contentContext.arrowY,
+        [baseSide]: 0,
+        transformOrigin: {
+          top: "",
+          right: "0 0",
+          bottom: "center 0",
+          left: "100% 0"
+        }[contentContext.placedSide],
+        transform: {
+          top: "translateY(100%)",
+          right: "translateY(50%) rotate(90deg) translateX(-50%)",
+          bottom: "rotate(180deg)",
+          left: "translateY(50%) rotate(-90deg) translateX(50%)"
+        }[contentContext.placedSide],
+        visibility: contentContext.shouldHideArrow ? "hidden" : void 0
+      }
+    },
+    /* @__PURE__ */ React17__namespace.createElement(
+      Arrow,
+      {
+        ...arrowProps,
+        ref: forwardedRef,
+        style: { ...arrowProps.style, display: "block" }
+      }
+    )
+  );
+});
+PopperArrow.displayName = "PopperArrow";
+function isHTMLElement(value) {
+  return value instanceof Element;
+}
+function getSideAndAlignFromPlacement(placement) {
+  const [side, align = "center"] = placement.split("-");
+  return [side, align];
+}
+function transformOrigin(options) {
+  return {
+    name: "transformOrigin",
+    options,
+    fn(data) {
+      const { placement, rects, middlewareData } = data;
+      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+      const isArrowHidden = cannotCenterArrow;
+      const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+      const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+      const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+      const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
+      const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+      const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
+      let x = "";
+      let y = "";
+      if (placedSide === "bottom") {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+        y = `${-arrowHeight}px`;
+      } else if (placedSide === "top") {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+        y = `${rects.floating.height + arrowHeight}px`;
+      } else if (placedSide === "right") {
+        x = `${-arrowHeight}px`;
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+      } else if (placedSide === "left") {
+        x = `${rects.floating.width + arrowHeight}px`;
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+      }
+      return { data: { x, y } };
+    }
+  };
+}
+function useSize(element) {
+  const [size, setSize] = React17__namespace.useState(void 0);
+  React17__namespace.useLayoutEffect(() => {
+    if (!element) {
+      setSize(void 0);
+      return;
+    }
+    setSize({ width: element.offsetWidth, height: element.offsetHeight });
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const borderBox = entry.borderBoxSize?.[0];
+      const w = borderBox ? borderBox.inlineSize : entry.contentRect.width;
+      const h = borderBox ? borderBox.blockSize : entry.contentRect.height;
+      setSize({ width: w, height: h });
+    });
+    observer.observe(element, { box: "border-box" });
+    return () => observer.disconnect();
+  }, [element]);
+  return size;
+}
+
+exports.AccessibleIcon = AccessibleIcon;
+exports.Arrow = Arrow;
+exports.DirectionProvider = DirectionProvider;
+exports.DismissableLayer = DismissableLayer;
+exports.DismissableLayerBranch = DismissableLayerBranch;
+exports.FocusGuards = FocusGuards;
+exports.FocusScope = FocusScope;
+exports.Popper = popper_exports;
+exports.Portal = Portal;
+exports.Presence = Presence;
+exports.Primitive = Primitive;
+exports.RovingFocusGroup = RovingFocusGroup;
+exports.RovingFocusItem = RovingFocusItem;
+exports.ScrollLock = ScrollLock;
+exports.Slot = Slot;
+exports.Slottable = Slottable;
+exports.VisuallyHidden = VisuallyHidden;
+exports.composeContextScopes = composeContextScopes;
+exports.createCollection = createCollection;
+exports.createContext = createContext2;
+exports.createContextScope = createContextScope;
+exports.useDirection = useDirection;
+exports.useFocusGuards = useFocusGuards;
+exports.usePresence = usePresence;
+exports.useScrollLock = useScrollLock;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map