@teamsparta/stack-bottom-sheet/dist/BottomSheet.js

stack bottom sheet

"use client";

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/BottomSheet.tsx
var BottomSheet_exports = {};
__export(BottomSheet_exports, {
  Body: () => Body,
  Button: () => Button2,
  ButtonGroup: () => ButtonGroup,
  Caption: () => Caption,
  Close: () => Close,
  CloseButton: () => CloseButton,
  Content: () => Content,
  Description: () => Description,
  Footer: () => Footer,
  Header: () => Header,
  Overlay: () => Overlay,
  Root: () => Root2,
  SubTitle: () => SubTitle,
  Title: () => Title,
  Trigger: () => Trigger
});
module.exports = __toCommonJS(BottomSheet_exports);

// src/compounds/BottomSheetBody.tsx
var import_react3 = require("react");

// src/style.ts
var import_react = require("@emotion/react");
var import_stack_tokens = require("@teamsparta/stack-tokens");
var import_stack_utils = require("@teamsparta/stack-utils");
var import_stack_z_index = require("@teamsparta/stack-z-index");
var bottomSheetBodyPaddingVar = "--stack-bottom-sheet-body-padding";
var BOTTOM_SHEET_MAX_WIDTH = 600;
var overlayCss = (0, import_react.css)({
  backgroundColor: import_stack_tokens.vars.dimm.default,
  position: "fixed",
  inset: 0
});
var contentWrapperCss = (0, import_react.css)({
  position: "fixed",
  bottom: 0,
  left: 0,
  right: 0,
  backgroundColor: import_stack_tokens.vars.background.modal,
  borderRadius: "20px 20px 0 0",
  boxShadow: import_stack_tokens.vars.shadow.elevation1,
  zIndex: import_stack_z_index.zIndex.modal,
  width: "100%",
  maxWidth: BOTTOM_SHEET_MAX_WIDTH,
  margin: "0 auto"
});
var contentCss = (0, import_react.css)({
  display: "flex",
  flexDirection: "column",
  width: "100%",
  maxHeight: "calc(100dvh - 40px)",
  height: "auto"
});
var fogCss = (0, import_react.css)({
  position: "absolute",
  bottom: 0,
  left: 0,
  right: 0,
  height: "16px",
  background: `linear-gradient(to bottom, color-mix(in srgb, ${import_stack_tokens.vars.background.modal} 0%, transparent), ${import_stack_tokens.vars.background.modal})`
});
var bodyCss = (0, import_react.css)({
  padding: (0, import_stack_utils.getVar)(bottomSheetBodyPaddingVar),
  flex: 1
});
var headerCss = (0, import_react.css)({
  position: "relative",
  padding: "28px 20px 16px 20px"
});
var headerDismissibleCss = (0, import_react.css)({
  paddingTop: "40px"
});
var titleCss = (0, import_react.css)({
  wordBreak: "keep-all",
  whiteSpace: "pre-wrap"
});
var subTitleCss = (0, import_react.css)({
  marginBottom: "4px"
});
var descriptionCss = (0, import_react.css)({
  wordBreak: "keep-all",
  whiteSpace: "pre-wrap",
  marginTop: "4px"
});
var footerCss = (0, import_react.css)({
  padding: "8px 20px 20px 20px"
});
var captionCss = (0, import_react.css)({
  width: "100%",
  marginTop: 16,
  wordBreak: "keep-all",
  whiteSpace: "pre-wrap"
});
var scrollAreaRootCss = (0, import_react.css)({
  height: "100%",
  width: "100%",
  overflow: "hidden",
  display: "flex",
  flexDirection: "column"
});
var scrollAreaContentCss = (0, import_react.css)({
  flex: 1,
  overflow: "auto"
});
var scrollAreaScrollbarCss = (0, import_react.css)({
  width: "12px",
  display: "flex",
  userSelect: "none",
  touchAction: "none",
  paddingInline: "4px",
  transition: "background-color 160ms ease-out"
});
var scrollAreaThumbCss = (0, import_react.css)({
  flex: 1,
  backgroundColor: import_stack_tokens.vars.neutral[30],
  borderRadius: "10px",
  position: "relative",
  transition: "background-color 160ms ease-out"
});
var closeButtonCss = (0, import_react.css)({
  position: "absolute",
  right: 16,
  top: 20,
  zIndex: 1,
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  padding: 0,
  width: 28,
  height: 28,
  flexShrink: 0,
  borderRadius: "50%",
  backgroundColor: import_stack_tokens.vars.fill.subtle,
  border: "none",
  cursor: "pointer"
});
var grabberCss = (0, import_react.css)({
  "&&": {
    position: "absolute",
    top: 12,
    left: "50%",
    transform: "translateX(-50%)",
    width: 40,
    height: 4,
    borderRadius: 100,
    backgroundColor: import_stack_tokens.vars.bottomSheet.grabber.background
  },
  "& [data-vaul-handle-hitarea]": {
    width: "100vw",
    maxWidth: BOTTOM_SHEET_MAX_WIDTH
  }
});

// src/compounds/ScrollArea.tsx
var RadixScrollArea = __toESM(require("@radix-ui/react-scroll-area"));
var import_react2 = require("react");
var import_jsx_runtime = require("@emotion/react/jsx-runtime");
var ScrollArea = (0, import_react2.forwardRef)((_a, ref) => {
  var _b = _a, { children, scrollHideDelay = 100 } = _b, restProps = __objRest(_b, ["children", "scrollHideDelay"]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    RadixScrollArea.Root,
    __spreadProps(__spreadValues({
      ref,
      scrollHideDelay,
      css: scrollAreaRootCss
    }, restProps), {
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixScrollArea.Viewport, { css: scrollAreaContentCss, children }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          RadixScrollArea.Scrollbar,
          {
            orientation: "vertical",
            css: scrollAreaScrollbarCss,
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixScrollArea.Thumb, { css: scrollAreaThumbCss })
          }
        )
      ]
    })
  );
});
ScrollArea.displayName = "ScrollArea";

// src/compounds/BottomSheetBody.tsx
var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
var BottomSheetBody = (0, import_react3.forwardRef)(
  (_a, ref) => {
    var _b = _a, {
      children,
      padding = "0 20px 20px 20px",
      style: styleFromProps
    } = _b, restProps = __objRest(_b, [
      "children",
      "padding",
      "style"
    ]);
    const style = __spreadValues({
      [bottomSheetBodyPaddingVar]: padding
    }, styleFromProps);
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", __spreadProps(__spreadValues({ ref, style, css: bodyCss }, restProps), { children: [
      children,
      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "aria-hidden": "true", css: fogCss })
    ] })) });
  }
);
BottomSheetBody.displayName = "BottomSheetBody";

// src/compounds/BottomSheetButton.tsx
var import_stack_button = require("@teamsparta/stack-button");
var import_react4 = require("react");
var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
var BottomSheetButton = (0, import_react4.forwardRef)(
  (_a, ref) => {
    var _b = _a, {
      children,
      variant = "solid",
      colorScheme = "primary",
      size = "lg",
      fullWidth = true
    } = _b, restProps = __objRest(_b, [
      "children",
      "variant",
      "colorScheme",
      "size",
      "fullWidth"
    ]);
    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      import_stack_button.Button,
      __spreadProps(__spreadValues({
        ref,
        variant,
        colorScheme,
        size,
        fullWidth
      }, restProps), {
        children
      })
    );
  }
);
BottomSheetButton.displayName = "BottomSheetButton";

// src/compounds/BottomSheetButtonGroup.tsx
var import_stack_flex = require("@teamsparta/stack-flex");
var import_react5 = require("react");
var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
var BottomSheetButtonGroup = (0, import_react5.forwardRef)(
  (_a, ref) => {
    var _b = _a, { children, gap = 8, direction = "row", fullWidth = true } = _b, restProps = __objRest(_b, ["children", "gap", "direction", "fullWidth"]);
    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
      import_stack_flex.Flex,
      __spreadProps(__spreadValues({
        ref,
        gap,
        direction,
        fullWidth
      }, restProps), {
        children
      })
    );
  }
);
BottomSheetButtonGroup.displayName = "BottomSheetButtonGroup";

// src/compounds/BottomSheetCaption.tsx
var import_stack_text = require("@teamsparta/stack-text");
var import_stack_tokens2 = require("@teamsparta/stack-tokens");
var import_react6 = require("react");
var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
var BottomSheetCaption = (0, import_react6.forwardRef)(
  (_a, ref) => {
    var _b = _a, {
      children,
      font = "captionM",
      color = import_stack_tokens2.vars.text.quaternary,
      align = "center"
    } = _b, restProps = __objRest(_b, [
      "children",
      "font",
      "color",
      "align"
    ]);
    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
      import_stack_text.Text,
      __spreadProps(__spreadValues({
        ref,
        as: "p",
        font,
        color,
        align,
        css: captionCss
      }, restProps), {
        children
      })
    );
  }
);
BottomSheetCaption.displayName = "BottomSheetCaption";

// src/compounds/BottomSheetClose.tsx
var import_react7 = require("react");
var import_vaul = require("vaul");
var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
var BottomSheetClose = (0, import_react7.forwardRef)((_a, ref) => {
  var _b = _a, { asChild = true, children } = _b, restProps = __objRest(_b, ["asChild", "children"]);
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_vaul.Drawer.Close, __spreadProps(__spreadValues({ ref, asChild }, restProps), { children }));
});
BottomSheetClose.displayName = "BottomSheetClose";

// src/compounds/BottomSheetCloseButton.tsx
var import_stack_icons = require("@teamsparta/stack-icons");
var import_stack_tokens3 = require("@teamsparta/stack-tokens");
var import_react8 = require("react");
var import_vaul2 = require("vaul");
var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
var BottomSheetCloseButton = (0, import_react8.forwardRef)((_a, ref) => {
  var _b = _a, { asChild = true } = _b, restProps = __objRest(_b, ["asChild"]);
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_vaul2.Drawer.Close, __spreadProps(__spreadValues({ ref, asChild }, restProps), { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "aria-label": "\uB2EB\uAE30", css: closeButtonCss, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_stack_icons.NavigationClose, { size: 16, color: import_stack_tokens3.vars.icon.quaternary }) }) }));
});
BottomSheetCloseButton.displayName = "BottomSheetCloseButton";

// src/compounds/BottomSheetContent.tsx
var import_react10 = require("react");
var import_vaul4 = require("vaul");

// src/context.ts
var import_stack_utils2 = require("@teamsparta/stack-utils");
var [BottomSheetProvider, useBottomSheet] = (0, import_stack_utils2.createContext)("BottomSheetRoot");

// src/compounds/BottomSheetOverlay.tsx
var import_stack_core = require("@teamsparta/stack-core");
var import_stack_z_index2 = require("@teamsparta/stack-z-index");
var import_react9 = require("react");
var import_vaul3 = require("vaul");
var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
var BottomSheetOverlay = (0, import_react9.forwardRef)((_a, ref) => {
  var _b = _a, { children, style: styleFromProps } = _b, restProps = __objRest(_b, ["children", "style"]);
  const { theme } = useBottomSheet("BottomSheetOverlay");
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
    import_vaul3.Drawer.Overlay,
    __spreadProps(__spreadValues({
      asChild: false,
      ref,
      style: __spreadValues({
        position: "relative",
        zIndex: import_stack_z_index2.zIndex.overlay
      }, styleFromProps)
    }, restProps), {
      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_stack_core.StackThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { css: overlayCss, children }) })
    })
  );
});
BottomSheetOverlay.displayName = "BottomSheetOverlay";

// src/compounds/BottomSheetContent.tsx
var import_jsx_runtime9 = require("@emotion/react/jsx-runtime");
var BottomSheetContent = (0, import_react10.forwardRef)(
  (_a, ref) => {
    var _b = _a, {
      children,
      onInteractOutside,
      style,
      overlay = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BottomSheetOverlay, {})
    } = _b, restProps = __objRest(_b, [
      "children",
      "onInteractOutside",
      "style",
      "overlay"
    ]);
    const {
      closeOnInteractOutside: closeOnInteractOutsideFromContext,
      theme,
      dismissible
    } = useBottomSheet("BottomSheetContent");
    const hasOverlay = overlay !== null;
    const closeOnInteractOutside = hasOverlay && dismissible ? closeOnInteractOutsideFromContext : false;
    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_vaul4.Drawer.Portal, { children: [
      overlay,
      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
        import_vaul4.Drawer.Content,
        __spreadProps(__spreadValues({
          "data-stack-color-theme": theme,
          ref,
          asChild: false,
          css: contentWrapperCss,
          style,
          onInteractOutside: closeOnInteractOutside ? onInteractOutside : (e) => {
            e.preventDefault();
            onInteractOutside == null ? void 0 : onInteractOutside(e);
          }
        }, restProps), {
          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { css: contentCss, children })
        })
      )
    ] });
  }
);
BottomSheetContent.displayName = "BottomSheetContent";

// src/compounds/BottomSheetDescription.tsx
var import_stack_text2 = require("@teamsparta/stack-text");
var import_stack_tokens4 = require("@teamsparta/stack-tokens");
var import_react11 = require("react");
var import_vaul5 = require("vaul");
var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
var BottomSheetDescription = (0, import_react11.forwardRef)(
  (_a, ref) => {
    var _b = _a, {
      children,
      font = "bodyCompact",
      color = import_stack_tokens4.vars.text.tertiary
    } = _b, restProps = __objRest(_b, [
      "children",
      "font",
      "color"
    ]);
    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_vaul5.Drawer.Description, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
      import_stack_text2.Text,
      __spreadProps(__spreadValues({
        ref,
        as: "p",
        font,
        color,
        css: descriptionCss
      }, restProps), {
        children
      })
    ) });
  }
);
BottomSheetDescription.displayName = "BottomSheetDescription";

// src/compounds/BottomSheetFooter.tsx
var import_stack_flex2 = require("@teamsparta/stack-flex");
var import_react12 = require("react");
var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
var BottomSheetFooter = (0, import_react12.forwardRef)((_a, ref) => {
  var _b = _a, { children, direction = "column" } = _b, restProps = __objRest(_b, ["children", "direction"]);
  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
    import_stack_flex2.Flex,
    __spreadProps(__spreadValues({
      ref,
      as: "footer",
      direction,
      css: footerCss
    }, restProps), {
      children
    })
  );
});
BottomSheetFooter.displayName = "BottomSheetFooter";

// src/compounds/BottomSheetHeader.tsx
var import_stack_flex3 = require("@teamsparta/stack-flex");
var import_react14 = require("react");

// src/compounds/BottomSheetGrabber.tsx
var import_react13 = require("react");
var import_vaul6 = require("vaul");
var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
var BottomSheetGrabber = (0, import_react13.forwardRef)((_a, ref) => {
  var restProps = __objRest(_a, []);
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vaul6.Handle, __spreadValues({ ref, css: grabberCss }, restProps));
});
BottomSheetGrabber.displayName = "BottomSheetGrabber";

// src/compounds/BottomSheetHeader.tsx
var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
var BottomSheetHeader = (0, import_react14.forwardRef)((_a, ref) => {
  var _b = _a, { children, direction = "column" } = _b, restProps = __objRest(_b, ["children", "direction"]);
  const { dismissible, hideCloseButton } = useBottomSheet("BottomSheetHeader");
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
    import_stack_flex3.Flex,
    __spreadProps(__spreadValues({
      ref,
      as: "header",
      direction,
      css: [headerCss, dismissible && headerDismissibleCss]
    }, restProps), {
      children: [
        children,
        !hideCloseButton && dismissible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BottomSheetCloseButton, {}),
        dismissible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BottomSheetGrabber, {})
      ]
    })
  );
});
BottomSheetHeader.displayName = "BottomSheetHeader";

// src/compounds/BottomSheetRoot.tsx
var import_stack_core2 = require("@teamsparta/stack-core");
var import_stack_utils3 = require("@teamsparta/stack-utils");
var import_vaul7 = require("vaul");
var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
var BottomSheetRoot = (_a) => {
  var _b = _a, {
    children,
    open: openFromProps,
    onOpenChange: onOpenChangeFromProps,
    defaultOpen: defaultOpenFromProps,
    closeOnInteractOutside = true,
    theme: themeFromProps,
    hideCloseButton = false,
    handleOnly = true,
    dismissible = true,
    repositionInputs = false,
    VAUL_DISMISSIBLE = true
  } = _b, restProps = __objRest(_b, [
    "children",
    "open",
    "onOpenChange",
    "defaultOpen",
    "closeOnInteractOutside",
    "theme",
    "hideCloseButton",
    "handleOnly",
    "dismissible",
    "repositionInputs",
    "VAUL_DISMISSIBLE"
  ]);
  const [open = false, onOpenChange] = (0, import_stack_utils3.useControllableState)({
    prop: openFromProps,
    defaultProp: defaultOpenFromProps,
    onChange: onOpenChangeFromProps
  });
  const { theme: themeFromContext } = (0, import_stack_core2.useThemeContext)("BottomSheet");
  const theme = themeFromProps != null ? themeFromProps : themeFromContext;
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
    BottomSheetProvider,
    {
      closeOnInteractOutside,
      theme,
      hideCloseButton,
      dismissible,
      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
        import_vaul7.Drawer.Root,
        __spreadProps(__spreadValues({
          open,
          onOpenChange,
          handleOnly,
          dismissible: VAUL_DISMISSIBLE,
          repositionInputs
        }, restProps), {
          children
        })
      )
    }
  );
};

// src/compounds/BottomSheetSubTitle.tsx
var import_stack_text3 = require("@teamsparta/stack-text");
var import_stack_tokens5 = require("@teamsparta/stack-tokens");
var import_react15 = require("react");
var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
var BottomSheetSubTitle = (0, import_react15.forwardRef)(
  (_a, ref) => {
    var _b = _a, { children, font = "bodyB", color = import_stack_tokens5.vars.text.tertiary } = _b, restProps = __objRest(_b, ["children", "font", "color"]);
    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
      import_stack_text3.Text,
      __spreadProps(__spreadValues({
        ref,
        as: "h3",
        font,
        color,
        css: subTitleCss
      }, restProps), {
        children
      })
    );
  }
);
BottomSheetSubTitle.displayName = "BottomSheetSubTitle";

// src/compounds/BottomSheetTitle.tsx
var import_stack_text4 = require("@teamsparta/stack-text");
var import_stack_tokens6 = require("@teamsparta/stack-tokens");
var import_react16 = require("react");
var import_vaul8 = require("vaul");
var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
var BottomSheetTitle = (0, import_react16.forwardRef)(
  (_a, ref) => {
    var _b = _a, { children, font = "subTitle2", color = import_stack_tokens6.vars.text.primary } = _b, restProps = __objRest(_b, ["children", "font", "color"]);
    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_vaul8.Drawer.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
      import_stack_text4.Text,
      __spreadProps(__spreadValues({
        ref,
        as: "h2",
        font,
        color,
        css: titleCss
      }, restProps), {
        children
      })
    ) });
  }
);
BottomSheetTitle.displayName = "BottomSheetTitle";

// src/compounds/BottomSheetTrigger.tsx
var import_react17 = require("react");
var import_vaul9 = require("vaul");
var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
var BottomSheetTrigger = (0, import_react17.forwardRef)((_a, ref) => {
  var _b = _a, { children, asChild = true } = _b, restProps = __objRest(_b, ["children", "asChild"]);
  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vaul9.Drawer.Trigger, __spreadProps(__spreadValues({ ref, asChild }, restProps), { children }));
});
BottomSheetTrigger.displayName = "BottomSheetTrigger";

// src/BottomSheet.tsx
var Root2 = BottomSheetRoot;
var Body = BottomSheetBody;
var Button2 = BottomSheetButton;
var ButtonGroup = BottomSheetButtonGroup;
var Close = BottomSheetClose;
var CloseButton = BottomSheetCloseButton;
var Content = BottomSheetContent;
var Description = BottomSheetDescription;
var Footer = BottomSheetFooter;
var Caption = BottomSheetCaption;
var Header = BottomSheetHeader;
var Overlay = BottomSheetOverlay;
var SubTitle = BottomSheetSubTitle;
var Title = BottomSheetTitle;
var Trigger = BottomSheetTrigger;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Body,
  Button,
  ButtonGroup,
  Caption,
  Close,
  CloseButton,
  Content,
  Description,
  Footer,
  Header,
  Overlay,
  Root,
  SubTitle,
  Title,
  Trigger
});