/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/pages/ThreeColumnLayout/ThreeColumnLayout.tsx
/**
* Three-column layout with sticky side columns.
*
* On large screens: left (16rem) | content (flex) | right (14rem).
* On smaller screens the side columns are hidden and only
* the main content is shown.
*/
function ThreeColumnLayout({ left, right, children, className = "" }) {
	return /* @__PURE__ */ jsx("div", {
		className: `mx-auto max-w-8xl px-4 sm:px-6 lg:px-8 ${className}`,
		children: /* @__PURE__ */ jsxs("div", {
			className: "lg:grid lg:grid-cols-[16rem_1fr_14rem] lg:gap-8",
			children: [
				/* @__PURE__ */ jsx("aside", {
					"aria-label": "Primary sidebar",
					className: "hidden lg:block lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)] lg:overflow-y-auto lg:py-8 lg:pr-4",
					children: left
				}),
				/* @__PURE__ */ jsx("main", {
					className: "min-w-0 py-8",
					children
				}),
				right && /* @__PURE__ */ jsx("aside", {
					"aria-label": "Secondary sidebar",
					className: "hidden lg:block lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)] lg:overflow-y-auto lg:py-8 lg:pl-4",
					children: right
				})
			]
		})
	});
}
//#endregion
export { ThreeColumnLayout };

//# sourceMappingURL=ThreeColumnLayout.js.map