import { c as _c } from "react/compiler-runtime";
import * as stylex from "@stylexjs/stylex";
import { memo } from "react";
import { Drawer } from "vaul";
import VisuallyHidden from "./VisuallyHidden";
import { blackAlpha, color, fontSize, padding, size } from "./tokens.stylex";
const styles = stylex.create({
  overlay: {
    position: "fixed",
    inset: 0,
    backgroundColor: blackAlpha.blackAlpha40
  },
  title: {
    fontSize: fontSize.h5,
    fontWeight: 400
  },
  content: {
    display: "flex",
    position: "fixed",
    flexDirection: "column",
    outline: "none",
    right: 0,
    bottom: 0,
    left: 0,
    marginTop: size.rem16,
    height: "auto",
    maxHeight: "70vh",
    // overflowY: "auto",

    backgroundColor: color.gray600,
    borderTopLeftRadius: size.px2,
    borderTopRightRadius: size.px2,
    padding: size.px4,
    paddingBottom: padding.minBottom4
  },
  handle: {
    marginBottom: size.rem5,
    marginTop: size.rem1,
    backgroundColor: color.white900
  }
});

/**
 * This component should be lazy-loaded because it uses some heavy components.
 */
export default memo(function BottomDrawer(t0) {
  const $ = _c(14);
  const {
    screenReaderTitle,
    trigger,
    children
  } = t0;
  let t1;
  if ($[0] !== trigger) {
    t1 = <Drawer.Trigger asChild={true}>{trigger}</Drawer.Trigger>;
    $[0] = trigger;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  let t2;
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = <Drawer.Overlay {...stylex.props(styles.overlay)} />;
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  let t3;
  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = stylex.props(styles.content);
    $[3] = t3;
  } else {
    t3 = $[3];
  }
  let t4;
  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
    t4 = <Drawer.Handle {...stylex.props(styles.handle)} />;
    $[4] = t4;
  } else {
    t4 = $[4];
  }
  let t5;
  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
    t5 = stylex.props(styles.title);
    $[5] = t5;
  } else {
    t5 = $[5];
  }
  let t6;
  if ($[6] !== screenReaderTitle) {
    t6 = <VisuallyHidden><Drawer.Title {...t5}>{screenReaderTitle}</Drawer.Title></VisuallyHidden>;
    $[6] = screenReaderTitle;
    $[7] = t6;
  } else {
    t6 = $[7];
  }
  let t7;
  if ($[8] !== children || $[9] !== t6) {
    t7 = <Drawer.Portal>{t2}<Drawer.Content {...t3}>{t4}{t6}{children}</Drawer.Content></Drawer.Portal>;
    $[8] = children;
    $[9] = t6;
    $[10] = t7;
  } else {
    t7 = $[10];
  }
  let t8;
  if ($[11] !== t1 || $[12] !== t7) {
    t8 = <Drawer.Root>{t1}{t7}</Drawer.Root>;
    $[11] = t1;
    $[12] = t7;
    $[13] = t8;
  } else {
    t8 = $[13];
  }
  return t8;
});
//# sourceMappingURL=BottomDrawer.jsx.map