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

stack bottom sheet

"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);

// src/style.ts
var style_exports = {};
__export(style_exports, {
  bodyCss: () => bodyCss,
  bottomSheetBodyPaddingVar: () => bottomSheetBodyPaddingVar,
  captionCss: () => captionCss,
  closeButtonCss: () => closeButtonCss,
  contentCss: () => contentCss,
  contentWrapperCss: () => contentWrapperCss,
  descriptionCss: () => descriptionCss,
  fogCss: () => fogCss,
  footerCss: () => footerCss,
  grabberCss: () => grabberCss,
  headerCss: () => headerCss,
  headerDismissibleCss: () => headerDismissibleCss,
  overlayCss: () => overlayCss,
  scrollAreaContentCss: () => scrollAreaContentCss,
  scrollAreaRootCss: () => scrollAreaRootCss,
  scrollAreaScrollbarCss: () => scrollAreaScrollbarCss,
  scrollAreaThumbCss: () => scrollAreaThumbCss,
  subTitleCss: () => subTitleCss,
  titleCss: () => titleCss
});
module.exports = __toCommonJS(style_exports);
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
  }
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  bodyCss,
  bottomSheetBodyPaddingVar,
  captionCss,
  closeButtonCss,
  contentCss,
  contentWrapperCss,
  descriptionCss,
  fogCss,
  footerCss,
  grabberCss,
  headerCss,
  headerDismissibleCss,
  overlayCss,
  scrollAreaContentCss,
  scrollAreaRootCss,
  scrollAreaScrollbarCss,
  scrollAreaThumbCss,
  subTitleCss,
  titleCss
});