@teamsparta/stack-bottom-sheet/dist/chunk-ALWYKHLT.mjs

stack bottom sheet

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

export {
  bottomSheetBodyPaddingVar,
  overlayCss,
  contentWrapperCss,
  contentCss,
  fogCss,
  bodyCss,
  headerCss,
  headerDismissibleCss,
  titleCss,
  subTitleCss,
  descriptionCss,
  footerCss,
  captionCss,
  scrollAreaRootCss,
  scrollAreaContentCss,
  scrollAreaScrollbarCss,
  scrollAreaThumbCss,
  closeButtonCss,
  grabberCss
};