@octanejs/base-ui 0.1.50 → 0.1.52

package/dist/cjs/collapsible.cjs

@@ -1,700 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var collapsible_exports = {};
-__export(collapsible_exports, {
-  Collapsible: () => Collapsible,
-  CollapsiblePanel: () => CollapsiblePanel,
-  CollapsiblePanelCssVars: () => CollapsiblePanelCssVars,
-  CollapsibleRoot: () => CollapsibleRoot,
-  CollapsibleRootContext: () => CollapsibleRootContext,
-  CollapsibleTrigger: () => CollapsibleTrigger,
-  useCollapsiblePanel: () => useCollapsiblePanel,
-  useCollapsibleRoot: () => useCollapsibleRoot,
-  useCollapsibleRootContext: () => useCollapsibleRootContext
-});
-module.exports = __toCommonJS(collapsible_exports);
-var import_octane = require("octane");
-var import_internal = require("./internal.cjs");
-var import_useRenderElement = require("./utils/useRenderElement.cjs");
-var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
-var import_useButton = require("./utils/useButton.cjs");
-var import_useControlled = require("./utils/useControlled.cjs");
-var import_useStableCallback = require("./utils/useStableCallback.cjs");
-var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
-var import_useTransitionStatus = require("./utils/useTransitionStatus.cjs");
-var import_addEventListener = require("./utils/addEventListener.cjs");
-var import_useAnimationFrame = require("./utils/useAnimationFrame.cjs");
-var import_owner = require("./utils/owner.cjs");
-var import_resolveStyle = require("./utils/resolveStyle.cjs");
-var import_useAnimationsFinished = require("./utils/useAnimationsFinished.cjs");
-var import_useOpenChangeComplete = require("./utils/useOpenChangeComplete.cjs");
-var import_useValueAsRef = require("./utils/useValueAsRef.cjs");
-var import_collapsibleOpenStateMapping = require("./utils/collapsibleOpenStateMapping.cjs");
-const rootStateAttributesMapping = {
-  ...import_collapsibleOpenStateMapping.collapsibleOpenStateMapping,
-  ...import_useTransitionStatus.transitionStatusMapping
-};
-const triggerStateAttributesMapping = {
-  ...import_collapsibleOpenStateMapping.collapsibleTriggerOpenStateMapping,
-  ...import_useTransitionStatus.transitionStatusMapping
-};
-const CollapsibleRootContext = (0, import_octane.createContext)(
-  void 0
-);
-function useCollapsibleRootContext() {
-  const context = (0, import_octane.useContext)(CollapsibleRootContext);
-  if (context === void 0) {
-    throw new Error(
-      "Base UI: CollapsibleRootContext is missing. Collapsible parts must be placed within <Collapsible.Root>."
-    );
-  }
-  return context;
-}
-function useCollapsibleRoot(...args) {
-  const [user, slotArg] = (0, import_internal.splitSlot)(args);
-  const slot = slotArg ?? (0, import_internal.S)("useCollapsibleRoot");
-  const {
-    open: openParam,
-    defaultOpen,
-    onOpenChange,
-    disabled
-  } = user[0];
-  const [open, setOpen] = (0, import_useControlled.useControlled)(
-    { controlled: openParam, default: defaultOpen, name: "Collapsible", state: "open" },
-    (0, import_internal.subSlot)(slot, "ctrl")
-  );
-  const { mounted, setMounted, transitionStatus } = (0, import_useTransitionStatus.useTransitionStatus)(
-    open,
-    true,
-    true,
-    (0, import_internal.subSlot)(slot, "transition")
-  );
-  const defaultPanelId = (0, import_useBaseUiId.useBaseUiId)(void 0, (0, import_internal.subSlot)(slot, "id"));
-  const [panelIdState, setPanelIdState] = (0, import_octane.useState)(
-    void 0,
-    (0, import_internal.subSlot)(slot, "panelId")
-  );
-  const panelId = panelIdState ?? defaultPanelId;
-  const handleTrigger = (0, import_useStableCallback.useStableCallback)(
-    (event) => {
-      const nextOpen = !open;
-      const eventDetails = (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.triggerPress, event);
-      onOpenChange(nextOpen, eventDetails);
-      if (eventDetails.isCanceled) {
-        return;
-      }
-      setOpen(nextOpen);
-    },
-    (0, import_internal.subSlot)(slot, "trigger")
-  );
-  return (0, import_octane.useMemo)(
-    () => ({
-      disabled,
-      handleTrigger,
-      mounted,
-      open,
-      panelId,
-      setMounted,
-      setOpen,
-      setPanelIdState,
-      transitionStatus
-    }),
-    [
-      disabled,
-      handleTrigger,
-      mounted,
-      open,
-      panelId,
-      setMounted,
-      setOpen,
-      setPanelIdState,
-      transitionStatus
-    ],
-    (0, import_internal.subSlot)(slot, "memo")
-  );
-}
-function CollapsibleRoot(props) {
-  const slot = (0, import_internal.S)("CollapsibleRoot");
-  const {
-    render,
-    className,
-    defaultOpen = false,
-    disabled = false,
-    onOpenChange: onOpenChangeProp,
-    open,
-    style,
-    ref,
-    ...elementProps
-  } = props;
-  const onOpenChange = (0, import_useStableCallback.useStableCallback)(onOpenChangeProp ?? (() => {
-  }), (0, import_internal.subSlot)(slot, "onOpen"));
-  const collapsible = useCollapsibleRoot(
-    { open, defaultOpen, onOpenChange, disabled },
-    (0, import_internal.subSlot)(slot, "root")
-  );
-  const state = (0, import_octane.useMemo)(
-    () => ({
-      open: collapsible.open,
-      disabled: collapsible.disabled,
-      transitionStatus: collapsible.transitionStatus
-    }),
-    [collapsible.open, collapsible.disabled, collapsible.transitionStatus],
-    (0, import_internal.subSlot)(slot, "state")
-  );
-  const contextValue = (0, import_octane.useMemo)(
-    () => ({ ...collapsible, onOpenChange, state }),
-    [collapsible, onOpenChange, state],
-    (0, import_internal.subSlot)(slot, "ctx")
-  );
-  const element = (0, import_useRenderElement.useRenderElement)(
-    "div",
-    { render, className, style },
-    {
-      state,
-      ref,
-      props: elementProps,
-      stateAttributesMapping: rootStateAttributesMapping
-    },
-    (0, import_internal.subSlot)(slot, "re")
-  );
-  return (0, import_octane.createElement)(CollapsibleRootContext.Provider, {
-    value: contextValue,
-    children: element
-  });
-}
-function CollapsibleTrigger(props) {
-  const slot = (0, import_internal.S)("CollapsibleTrigger");
-  const {
-    panelId,
-    open,
-    handleTrigger,
-    state,
-    disabled: contextDisabled
-  } = useCollapsibleRootContext();
-  const {
-    className,
-    disabled = contextDisabled,
-    render,
-    nativeButton = true,
-    style,
-    ref,
-    ...elementProps
-  } = props;
-  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
-    { disabled, focusableWhenDisabled: true, native: nativeButton },
-    (0, import_internal.subSlot)(slot, "button")
-  );
-  return (0, import_useRenderElement.useRenderElement)(
-    "button",
-    { render, className, style },
-    {
-      state,
-      ref: [ref, buttonRef],
-      props: [
-        {
-          "aria-controls": open ? panelId : void 0,
-          "aria-expanded": open,
-          onClick: handleTrigger
-        },
-        elementProps,
-        getButtonProps
-      ],
-      stateAttributesMapping: triggerStateAttributesMapping
-    },
-    (0, import_internal.subSlot)(slot, "re")
-  );
-}
-const CollapsiblePanelCssVars = {
-  collapsiblePanelHeight: "--collapsible-panel-height",
-  collapsiblePanelWidth: "--collapsible-panel-width"
-};
-const EMPTY_DIMENSIONS = { height: void 0, width: void 0 };
-function getDimensions(element) {
-  return { height: element.scrollHeight, width: element.scrollWidth };
-}
-function hasNonZeroDuration(value) {
-  return value.split(",").map((part) => part.trim()).some((part) => part !== "" && Number.parseFloat(part) > 0);
-}
-function getAnimationType(element, hasSuppressedMountAnimation = false) {
-  const panelStyles = (0, import_owner.ownerWindow)(element).getComputedStyle(element);
-  const hasAnimation = (panelStyles.animationName.split(",").map((name) => name.trim()).some((name) => name !== "" && name !== "none") || hasSuppressedMountAnimation) && hasNonZeroDuration(panelStyles.animationDuration);
-  const hasTransition = hasNonZeroDuration(panelStyles.transitionDuration);
-  if (hasAnimation && hasTransition) {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        "Base UI: CSS transitions and CSS animations both detected on Collapsible or Accordion panel. Only one of either animation type should be used."
-      );
-    }
-    return "css-transition";
-  }
-  if (hasTransition) {
-    return "css-transition";
-  }
-  if (hasAnimation) {
-    return "css-animation";
-  }
-  return "none";
-}
-function setTemporaryStyle(element, property, value) {
-  const previousValue = element.style.getPropertyValue(property);
-  const previousPriority = element.style.getPropertyPriority(property);
-  element.style.setProperty(property, value);
-  return () => {
-    if (previousValue === "") {
-      element.style.removeProperty(property);
-      return;
-    }
-    element.style.setProperty(property, previousValue, previousPriority);
-  };
-}
-function resetLayoutStyles(element) {
-  const originalLayoutStyles = {
-    "justify-content": element.style.justifyContent,
-    "align-items": element.style.alignItems,
-    "align-content": element.style.alignContent,
-    "justify-items": element.style.justifyItems
-  };
-  Object.keys(originalLayoutStyles).forEach((key) => {
-    element.style.setProperty(key, "initial", "important");
-  });
-  function restoreLayoutStyles() {
-    Object.entries(originalLayoutStyles).forEach(([key, value]) => {
-      if (value === "") {
-        element.style.removeProperty(key);
-        return;
-      }
-      element.style.setProperty(key, value);
-    });
-  }
-  const frame = import_useAnimationFrame.AnimationFrame.request(restoreLayoutStyles);
-  return () => {
-    import_useAnimationFrame.AnimationFrame.cancel(frame);
-    restoreLayoutStyles();
-  };
-}
-function useCollapsiblePanel(...args) {
-  const [user, slotArg] = (0, import_internal.splitSlot)(args);
-  const slot = slotArg ?? (0, import_internal.S)("useCollapsiblePanel");
-  const {
-    hiddenUntilFound,
-    id: idParam,
-    keepMounted,
-    mounted,
-    onOpenChange,
-    open,
-    setMounted,
-    setOpen,
-    transitionStatus
-  } = user[0];
-  const panelRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "panelRef"));
-  const animationTypeRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "animType"));
-  const [dimensions, setDimensionsUnwrapped] = (0, import_octane.useState)(
-    EMPTY_DIMENSIONS,
-    (0, import_internal.subSlot)(slot, "dims")
-  );
-  const lastMeasuredDimensionsRef = (0, import_octane.useRef)(EMPTY_DIMENSIONS, (0, import_internal.subSlot)(slot, "lastDims"));
-  const shouldSkipNextOpenRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "skipOpen"));
-  const shouldPreventMountAnimationRef = (0, import_octane.useRef)(open, (0, import_internal.subSlot)(slot, "preventMount"));
-  const shouldPreventActivityResumeAnimationRef = (0, import_octane.useRef)(
-    false,
-    (0, import_internal.subSlot)(slot, "preventActivityResume")
-  );
-  const [forcePanelIdle, setForcePanelIdle] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "forceIdle"));
-  const pendingTemporaryStyleRestoreRef = (0, import_octane.useRef)(
-    null,
-    (0, import_internal.subSlot)(slot, "pendingRestore")
-  );
-  const latestStateRef = (0, import_useValueAsRef.useValueAsRef)(
-    { mounted, open },
-    (0, import_internal.subSlot)(slot, "latest")
-  );
-  const runOnceCloseAnimationsFinish = (0, import_useAnimationsFinished.useAnimationsFinished)(
-    panelRef,
-    false,
-    false,
-    (0, import_internal.subSlot)(slot, "closeAnims")
-  );
-  const hidden = !open && !mounted;
-  const panelTransitionStatus = forcePanelIdle ? "idle" : transitionStatus;
-  const shouldPreventOpenAnimation = open && (shouldPreventMountAnimationRef.current || shouldPreventActivityResumeAnimationRef.current);
-  const renderedDimensions = !open && mounted && animationTypeRef.current === "css-animation" && dimensions.height === void 0 && dimensions.width === void 0 ? lastMeasuredDimensionsRef.current : dimensions;
-  const shouldPersistHiddenTransitionStyles = hiddenUntilFound && hidden && animationTypeRef.current !== "css-animation";
-  const setDimensions = (0, import_useStableCallback.useStableCallback)(
-    (next, shouldCacheMeasurement = true) => {
-      if (shouldCacheMeasurement) {
-        lastMeasuredDimensionsRef.current = next;
-      }
-      setDimensionsUnwrapped(next);
-    },
-    (0, import_internal.subSlot)(slot, "setDims")
-  );
-  const restorePendingTemporaryStyle = (0, import_useStableCallback.useStableCallback)(
-    () => {
-      pendingTemporaryStyleRestoreRef.current?.();
-      pendingTemporaryStyleRestoreRef.current = null;
-    },
-    (0, import_internal.subSlot)(slot, "restorePending")
-  );
-  const markActivityResumeAnimationSuppressed = (0, import_useStableCallback.useStableCallback)(
-    () => {
-      if (open && mounted && animationTypeRef.current === "css-animation") {
-        shouldPreventActivityResumeAnimationRef.current = true;
-      }
-    },
-    (0, import_internal.subSlot)(slot, "markActivityResume")
-  );
-  const setPendingTemporaryStyleRestore = (0, import_useStableCallback.useStableCallback)(
-    (restore) => {
-      restorePendingTemporaryStyle();
-      pendingTemporaryStyleRestoreRef.current = () => {
-        pendingTemporaryStyleRestoreRef.current = null;
-        restore();
-      };
-    },
-    (0, import_internal.subSlot)(slot, "setPending")
-  );
-  (0, import_octane.useLayoutEffect)(
-    () => {
-      if (!forcePanelIdle || transitionStatus === "starting") {
-        return;
-      }
-      setForcePanelIdle(false);
-    },
-    [forcePanelIdle, transitionStatus],
-    (0, import_internal.subSlot)(slot, "idleEffect")
-  );
-  (0, import_octane.useEffect)(
-    () => () => {
-      markActivityResumeAnimationSuppressed();
-      restorePendingTemporaryStyle();
-    },
-    [markActivityResumeAnimationSuppressed, restorePendingTemporaryStyle],
-    (0, import_internal.subSlot)(slot, "unmount")
-  );
-  (0, import_octane.useLayoutEffect)(
-    () => {
-      const panel = panelRef.current;
-      if (!panel) {
-        return void 0;
-      }
-      if (!open && pendingTemporaryStyleRestoreRef.current) {
-        restorePendingTemporaryStyle();
-      }
-      const animationType = getAnimationType(panel, shouldPreventOpenAnimation);
-      animationTypeRef.current = animationType;
-      if (open && transitionStatus === "idle" && shouldPreventMountAnimationRef.current && animationType === "css-animation") {
-        lastMeasuredDimensionsRef.current = getDimensions(panel);
-        return void 0;
-      }
-      if (open && transitionStatus === "starting") {
-        const skipNextOpen = shouldSkipNextOpenRef.current;
-        shouldSkipNextOpenRef.current = false;
-        if (animationType === "none") {
-          setDimensions(getDimensions(panel));
-          setForcePanelIdle(true);
-          return void 0;
-        }
-        if (animationType === "css-transition") {
-          const restoreLayout = resetLayoutStyles(panel);
-          setDimensions(getDimensions(panel));
-          if (!skipNextOpen) {
-            return restoreLayout;
-          }
-          setPendingTemporaryStyleRestore(setTemporaryStyle(panel, "transition-duration", "0s"));
-          setForcePanelIdle(true);
-          return restoreLayout;
-        }
-        if (animationType === "css-animation") {
-          setDimensions(getDimensions(panel));
-          if (!skipNextOpen) {
-            setTemporaryStyle(panel, "animation-name", "none")();
-            return void 0;
-          }
-          const restoreAnimationName = setTemporaryStyle(panel, "animation-name", "none");
-          const restoreAnimationDuration = setTemporaryStyle(panel, "animation-duration", "0s");
-          restoreAnimationName();
-          setPendingTemporaryStyleRestore(restoreAnimationDuration);
-          setForcePanelIdle(true);
-          return void 0;
-        }
-      }
-      if (!open && mounted && (transitionStatus === "idle" || transitionStatus === "starting")) {
-        shouldPreventMountAnimationRef.current = false;
-        shouldPreventActivityResumeAnimationRef.current = false;
-        if (animationType === "none") {
-          setDimensions(EMPTY_DIMENSIONS, false);
-          setMounted(false);
-          return void 0;
-        }
-        setDimensions(getDimensions(panel));
-        return void 0;
-      }
-      if (transitionStatus !== "ending") {
-        return void 0;
-      }
-      if (animationType === "none") {
-        setMounted(false);
-        return void 0;
-      }
-      const nextDimensions = getDimensions(panel);
-      const hasMeasuredSize = (nextDimensions.height ?? 0) > 0 || (nextDimensions.width ?? 0) > 0;
-      if (!hasMeasuredSize) {
-        setMounted(false);
-        return void 0;
-      }
-      setDimensions(nextDimensions);
-      if (animationType === "css-animation") {
-        setTemporaryStyle(panel, "animation-name", "none")();
-      }
-      return void 0;
-    },
-    [
-      mounted,
-      open,
-      restorePendingTemporaryStyle,
-      setDimensions,
-      setMounted,
-      setPendingTemporaryStyleRestore,
-      shouldPreventOpenAnimation,
-      transitionStatus
-    ],
-    (0, import_internal.subSlot)(slot, "mainEffect")
-  );
-  (0, import_useOpenChangeComplete.useOpenChangeComplete)(
-    {
-      enabled: open && mounted && panelTransitionStatus === "idle",
-      open: true,
-      ref: panelRef,
-      onComplete() {
-        if (!open) {
-          return;
-        }
-        setDimensions(EMPTY_DIMENSIONS, false);
-      }
-    },
-    (0, import_internal.subSlot)(slot, "openComplete")
-  );
-  (0, import_octane.useEffect)(
-    () => {
-      if (open || !mounted || panelTransitionStatus !== "ending") {
-        return void 0;
-      }
-      const panel = panelRef.current;
-      if (!panel) {
-        return void 0;
-      }
-      const abortController = new AbortController();
-      function handleComplete() {
-        if (latestStateRef.current.open) {
-          return;
-        }
-        setMounted(false);
-        setDimensions(EMPTY_DIMENSIONS, false);
-      }
-      const endingStyleFrame = import_useAnimationFrame.AnimationFrame.request(() => {
-        if (!abortController.signal.aborted) {
-          runOnceCloseAnimationsFinish(handleComplete, abortController.signal);
-        }
-      });
-      return () => {
-        import_useAnimationFrame.AnimationFrame.cancel(endingStyleFrame);
-        abortController.abort();
-      };
-    },
-    [
-      latestStateRef,
-      mounted,
-      open,
-      panelTransitionStatus,
-      runOnceCloseAnimationsFinish,
-      setDimensions,
-      setMounted
-    ],
-    (0, import_internal.subSlot)(slot, "closeEffect")
-  );
-  (0, import_octane.useLayoutEffect)(
-    () => {
-      const panel = panelRef.current;
-      if (!panel || !hiddenUntilFound || !hidden) {
-        return;
-      }
-      panel.setAttribute("hidden", "until-found");
-    },
-    [hidden, hiddenUntilFound],
-    (0, import_internal.subSlot)(slot, "hiddenEffect")
-  );
-  (0, import_octane.useEffect)(
-    () => {
-      const panel = panelRef.current;
-      if (!panel) {
-        return void 0;
-      }
-      function handleBeforeMatch(event) {
-        const eventDetails = (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.none, event);
-        onOpenChange(true, eventDetails);
-        if (eventDetails.isCanceled) {
-          return;
-        }
-        shouldSkipNextOpenRef.current = true;
-        setOpen(true);
-      }
-      return (0, import_addEventListener.addEventListener)(panel, "beforematch", handleBeforeMatch);
-    },
-    [onOpenChange, setOpen],
-    (0, import_internal.subSlot)(slot, "beforematch")
-  );
-  const shouldRender = keepMounted || hiddenUntilFound || mounted || open;
-  return {
-    height: renderedDimensions.height,
-    props: {
-      ...shouldPersistHiddenTransitionStyles ? { "data-starting-style": "" } : void 0,
-      hidden,
-      id: idParam
-    },
-    panelRef,
-    shouldPreventOpenAnimation,
-    shouldRender,
-    transitionStatus: panelTransitionStatus,
-    width: renderedDimensions.width
-  };
-}
-function CollapsiblePanel(props) {
-  const slot = (0, import_internal.S)("CollapsiblePanel");
-  const {
-    className,
-    hiddenUntilFound: hiddenUntilFoundProp,
-    keepMounted: keepMountedProp,
-    render,
-    id: idProp,
-    style,
-    ref,
-    ...elementProps
-  } = props;
-  const {
-    mounted,
-    onOpenChange,
-    open,
-    panelId,
-    setMounted,
-    setPanelIdState,
-    setOpen,
-    state,
-    transitionStatus
-  } = useCollapsibleRootContext();
-  const hiddenUntilFound = hiddenUntilFoundProp ?? false;
-  const keepMounted = keepMountedProp ?? false;
-  if (process.env.NODE_ENV !== "production") {
-    (0, import_octane.useLayoutEffect)(
-      () => {
-        if (hiddenUntilFound && keepMountedProp === false) {
-          console.warn(
-            "Base UI: The `keepMounted={false}` prop on `Collapsible.Panel` is ignored when `hiddenUntilFound` is enabled, since the panel must remain mounted while closed."
-          );
-        }
-      },
-      [hiddenUntilFound, keepMountedProp],
-      (0, import_internal.subSlot)(slot, "warn")
-    );
-  }
-  (0, import_octane.useLayoutEffect)(
-    () => {
-      if (idProp) {
-        setPanelIdState(idProp);
-        return () => {
-          setPanelIdState(void 0);
-        };
-      }
-      return void 0;
-    },
-    [idProp, setPanelIdState],
-    (0, import_internal.subSlot)(slot, "registerId")
-  );
-  const {
-    height,
-    props: panelProps,
-    panelRef,
-    shouldPreventOpenAnimation,
-    shouldRender,
-    transitionStatus: panelTransitionStatus,
-    width
-  } = useCollapsiblePanel(
-    {
-      hiddenUntilFound,
-      id: panelId,
-      keepMounted,
-      mounted,
-      onOpenChange,
-      open,
-      setMounted,
-      setOpen,
-      transitionStatus
-    },
-    (0, import_internal.subSlot)(slot, "panel")
-  );
-  const panelState = {
-    ...state,
-    transitionStatus: panelTransitionStatus
-  };
-  const resolvedStyle = (0, import_resolveStyle.resolveStyle)(style, panelState);
-  const element = (0, import_useRenderElement.useRenderElement)(
-    "div",
-    { render, className, style: void 0 },
-    {
-      state: panelState,
-      ref: [ref, panelRef],
-      props: [
-        panelProps,
-        {
-          style: {
-            [CollapsiblePanelCssVars.collapsiblePanelHeight]: height === void 0 ? "auto" : `${height}px`,
-            [CollapsiblePanelCssVars.collapsiblePanelWidth]: width === void 0 ? "auto" : `${width}px`
-          }
-        },
-        elementProps,
-        resolvedStyle ? { style: resolvedStyle } : void 0,
-        // The public `style` prop is resolved above so a temporary `animationName: 'none'`
-        // can still win after the user's inline styles have been merged.
-        shouldPreventOpenAnimation ? { style: { animationName: "none" } } : void 0
-      ],
-      stateAttributesMapping: rootStateAttributesMapping
-    },
-    (0, import_internal.subSlot)(slot, "re")
-  );
-  if (!shouldRender) {
-    return null;
-  }
-  return element;
-}
-const Collapsible = {
-  Root: CollapsibleRoot,
-  Trigger: CollapsibleTrigger,
-  Panel: CollapsiblePanel
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Collapsible,
-  CollapsiblePanel,
-  CollapsiblePanelCssVars,
-  CollapsibleRoot,
-  CollapsibleRootContext,
-  CollapsibleTrigger,
-  useCollapsiblePanel,
-  useCollapsibleRoot,
-  useCollapsibleRootContext
-});