shelving/ui/block/Panel.js

Toolkit for using data in JavaScript.

import { jsx as _jsx } from "react/jsx-runtime";
import { getColorClass } from "../style/Color.js";
import { getPaddingClass } from "../style/Padding.js";
import { getStatusClass } from "../style/Status.js";
import { getThicknessClass } from "../style/Thickness.js";
import { getTypographyClass } from "../style/Typography.js";
import { getClass, getModuleClass } from "../util/css.js";
import PANEL_CSS from "./Panel.module.css";
/**
 * Full-width vertical region that paints the current surface colour. Use to break a page into stacked
 * sections. Has zero block-spacing (Panels butt against each other) but big vertical padding by
 * default — adjust with PaddingVariants (`<Panel padding-large>` etc.).
 *
 * Renders as a `<section>` by default; pass `as="header"` etc. for other semantic elements.
 *
 * @example <Panel><Block narrow><Title>Welcome</Title></Block></Panel>
 * @example <Panel as="header" primary><Title>Welcome</Title></Panel>
 */
export function Panel({ children, as = "section", status, ...props }) {
    const Component = as;
    return (_jsx(Component, { className: getClass(getModuleClass(PANEL_CSS, "panel"), status && getStatusClass(status), getColorClass(props), getPaddingClass(props), getThicknessClass(props), getTypographyClass(props)), children: children }));
}