@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/overlay/tooltip/useTooltipTrigger.js

@@ -0,0 +1,115 @@
+import { useContext, useId, useRef, useState, useCallback, useEffect } from 'react';
+import { TooltipContext } from './TooltipProvider';
+
+function useTooltipTrigger(options) {
+  const ctx = useContext(TooltipContext);
+  if (!ctx) throw new Error("useTooltipTrigger must be used within <TooltipProvider>.");
+  const {
+    content,
+    placement = "top",
+    offset = 8,
+    open,
+    defaultOpen = false,
+    delayOpenMs = 150,
+    delayCloseMs = 50,
+    focusOpenMode = "focus-visible",
+    closeOnPointerDown = true
+  } = options;
+  const id = useId();
+  const triggerElRef = useRef(null);
+  const isControlled = open !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isOpen = isControlled ? !!open : uncontrolledOpen;
+  const openTimer = useRef(null);
+  const closeTimer = useRef(null);
+  const clearTimers = () => {
+    if (openTimer.current) window.clearTimeout(openTimer.current);
+    if (closeTimer.current) window.clearTimeout(closeTimer.current);
+    openTimer.current = null;
+    closeTimer.current = null;
+  };
+  const lastSentRef = useRef(null);
+  const show = useCallback(() => {
+    if (!content) return;
+    ctx.show({
+      id,
+      content,
+      placement,
+      offset,
+      triggerEl: triggerElRef.current
+    });
+    lastSentRef.current = { content, placement, offset };
+  }, [ctx, id, content, placement, offset]);
+  const hide = useCallback(() => {
+    ctx.hide(id);
+  }, [ctx, id]);
+  useEffect(() => {
+    if (!isOpen) {
+      hide();
+      return;
+    }
+    show();
+  }, [isOpen, show, hide]);
+  useEffect(() => {
+    var _a;
+    if (!isOpen) return;
+    if (((_a = ctx.active) == null ? void 0 : _a.id) !== id) return;
+    const last = lastSentRef.current;
+    const changed = !last || last.content !== content || last.placement !== placement || last.offset !== offset;
+    if (!changed) return;
+    ctx.update(id, {
+      content,
+      placement,
+      offset,
+      triggerEl: triggerElRef.current
+    });
+    lastSentRef.current = { content, placement, offset };
+  }, [ctx, id, isOpen, content, placement, offset]);
+  const setOpen = (next) => {
+    if (isControlled) return;
+    setUncontrolledOpen(next);
+  };
+  const onPointerEnter = () => {
+    clearTimers();
+    if (isControlled) return;
+    openTimer.current = window.setTimeout(() => setOpen(true), delayOpenMs);
+  };
+  const onPointerLeave = () => {
+    clearTimers();
+    if (isControlled) return;
+    closeTimer.current = window.setTimeout(() => setOpen(false), delayCloseMs);
+  };
+  const onPointerDown = () => {
+    clearTimers();
+    if (!isControlled && closeOnPointerDown) setOpen(false);
+  };
+  const onFocus = (e) => {
+    clearTimers();
+    if (focusOpenMode === "off") return;
+    const shouldOpen = focusOpenMode === "any" || e.currentTarget.matches(":focus-visible");
+    if (!isControlled && shouldOpen) {
+      openTimer.current = window.setTimeout(() => setOpen(true), delayOpenMs);
+    }
+  };
+  const onBlur = () => {
+    clearTimers();
+    if (!isControlled) setOpen(false);
+  };
+  return {
+    id,
+    isOpen,
+    triggerProps: {
+      ref: (node) => {
+        triggerElRef.current = node;
+      },
+      onPointerEnter,
+      onPointerLeave,
+      onPointerDown,
+      onFocus,
+      onBlur,
+      "aria-describedby": content ? id : void 0
+    }
+  };
+}
+
+export { useTooltipTrigger };

package/dist/components/page/Page.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Page.module.css');
+var Breadcrumbs = require('../breadcrumbs/Breadcrumbs');
+var Headline = require('../headline/Headline');
+var SkeletonLoader = require('../skeleton-loader/SkeletonLoader');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Page({
+  header,
+  subheader,
+  severity,
+  headerIcon,
+  headerAddition,
+  breadcrumbs,
+  disableContentBox,
+  contentBox = false,
+  disableTopPadding = true,
+  maxWidth,
+  containScrolling = false,
+  children,
+  loading = false
+}) {
+  const showContentBox = contentBox && !disableContentBox;
+  const maxWidthClass = maxWidth ? styles__default.default[`maxWidth${maxWidth.charAt(0).toUpperCase()}${maxWidth.slice(1)}`] : "";
+  const showHeaderContainer = Boolean(header || headerAddition);
+  const showHeadline = Boolean(header || subheader);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `${styles__default.default.container} ${containScrolling ? styles__default.default.containScrolling : styles__default.default.documentScrolling} ${disableTopPadding ? styles__default.default.disableTopPadding : ""} ${maxWidthClass}`,
+      children: [
+        showHeaderContainer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerContainer, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerMain, children: [
+          breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx(Breadcrumbs.Breadcrumbs, { items: breadcrumbs }) : null,
+          showHeadline ? /* @__PURE__ */ jsxRuntime.jsx(
+            Headline.Headline,
+            {
+              disableMargin: true,
+              size: 2,
+              severity,
+              icon: headerIcon,
+              subheader,
+              addition: headerAddition,
+              children: header
+            }
+          ) : headerAddition
+        ] }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `${styles__default.default.content} ${loading ? styles__default.default.contentLoading : ""} ${showContentBox ? styles__default.default.contentBox : ""}`,
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) : children
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.Page = Page;

package/dist/components/page/Page.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import { Severity } from '../../constants/severity.types';
+import { BreadcrumbItem } from '../breadcrumbs/Breadcrumbs';
+interface PageProps {
+    header?: string;
+    subheader?: ReactNode;
+    severity?: Severity;
+    headerIcon?: ReactNode;
+    children?: ReactNode;
+    headerAddition?: ReactNode;
+    /** @deprecated use contentBox instead */
+    disableContentBox?: boolean;
+    contentBox?: boolean;
+    disableTopPadding?: boolean;
+    maxWidth?: 'sm' | 'md' | 'lg';
+    breadcrumbs?: BreadcrumbItem[];
+    containScrolling?: boolean;
+    loading?: boolean;
+}
+export declare function Page({ header, subheader, severity, headerIcon, headerAddition, breadcrumbs, disableContentBox, contentBox, disableTopPadding, maxWidth, containScrolling, children, loading, }: PageProps): ReactNode;
+export {};

package/dist/components/page/Page.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './Page.module.css';
+import { Breadcrumbs } from '../breadcrumbs/Breadcrumbs';
+import { Headline } from '../headline/Headline';
+import { SkeletonLoader } from '../skeleton-loader/SkeletonLoader';
+
+function Page({
+  header,
+  subheader,
+  severity,
+  headerIcon,
+  headerAddition,
+  breadcrumbs,
+  disableContentBox,
+  contentBox = false,
+  disableTopPadding = true,
+  maxWidth,
+  containScrolling = false,
+  children,
+  loading = false
+}) {
+  const showContentBox = contentBox && !disableContentBox;
+  const maxWidthClass = maxWidth ? styles[`maxWidth${maxWidth.charAt(0).toUpperCase()}${maxWidth.slice(1)}`] : "";
+  const showHeaderContainer = Boolean(header || headerAddition);
+  const showHeadline = Boolean(header || subheader);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${styles.container} ${containScrolling ? styles.containScrolling : styles.documentScrolling} ${disableTopPadding ? styles.disableTopPadding : ""} ${maxWidthClass}`,
+      children: [
+        showHeaderContainer ? /* @__PURE__ */ jsx("div", { className: styles.headerContainer, children: /* @__PURE__ */ jsxs("div", { className: styles.headerMain, children: [
+          breadcrumbs ? /* @__PURE__ */ jsx(Breadcrumbs, { items: breadcrumbs }) : null,
+          showHeadline ? /* @__PURE__ */ jsx(
+            Headline,
+            {
+              disableMargin: true,
+              size: 2,
+              severity,
+              icon: headerIcon,
+              subheader,
+              addition: headerAddition,
+              children: header
+            }
+          ) : headerAddition
+        ] }) }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${styles.content} ${loading ? styles.contentLoading : ""} ${showContentBox ? styles.contentBox : ""}`,
+            children: loading ? /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) : children
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Page };

package/dist/components/page/Page.module.css

@@ -0,0 +1,95 @@
+.container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.maxWidthSm,
+.maxWidthMd,
+.maxWidthLg {
+  margin-inline: auto;
+  width: 100%;
+}
+
+.maxWidthSm {
+  max-width: 560px;
+}
+.maxWidthMd {
+  max-width: 768px;
+}
+.maxWidthLg {
+  max-width: 1024px;
+}
+
+.containScrolling {
+  height: 100%;
+  overflow: hidden;
+}
+
+.documentScrolling {
+  height: auto;
+  overflow: visible;
+}
+
+.headerContainer {
+  display: flex;
+  align-items: flex-start;
+  padding: var(--spacing-lg) 0;
+  padding-block-end: var(--spacing-md);
+  gap: var(--spacing-md);
+  min-width: 0;
+  flex: 0 0 auto;
+}
+
+.disableTopPadding {
+  padding-block-start: 0;
+}
+
+.disableTopPadding .headerContainer {
+  padding-block-start: 0;
+}
+
+.headerMain {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.content {
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+}
+
+.contentLoading {
+  flex: 1 1 auto;
+}
+
+.documentScrolling .content {
+  overflow: visible;
+}
+
+.contentBox {
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-md);
+}
+
+@media (max-width: 767px) {
+  .headerContainer {
+    padding-block: var(--spacing-md);
+  }
+
+  .contentBox {
+    padding-block: var(--spacing-md);
+    padding-inline: 0;
+    border: 0;
+    border-radius: 0;
+  }
+}

package/dist/components/page-layout/PageLayout.cjs

@@ -0,0 +1,126 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var EnvironmentBanner = require('../../components/environment-banner/EnvironmentBanner');
+var styles = require('./PageLayout.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function getMaxWidthClass(value, styles2) {
+  if (!value) return "";
+  if (value === "sm") return styles2.maxWidthSm;
+  return styles2.maxWidthMd;
+}
+const VALID_ENVIRONMENTS = ["production", "staging", "test"];
+const ENVIRONMENT_ALIASES = { prod: "production" };
+function resolveEnvBanner(environment, customEnv, customEnvSeverity) {
+  var _a;
+  if (customEnv != null && customEnvSeverity != null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentBanner.EnvironmentBanner, { customLabel: customEnv, customSeverity: customEnvSeverity });
+  }
+  const normalised = environment == null ? void 0 : environment.toLowerCase();
+  const resolved = normalised != null ? (_a = ENVIRONMENT_ALIASES[normalised]) != null ? _a : normalised : void 0;
+  if (resolved != null && VALID_ENVIRONMENTS.includes(resolved)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentBanner.EnvironmentBanner, { environment: resolved });
+  }
+  return null;
+}
+function getSlotName(el) {
+  var _a;
+  const t = el.type;
+  return (_a = t == null ? void 0 : t.__PAGE_LAYOUT_SLOT__) != null ? _a : null;
+}
+function splitSlots(children) {
+  const slots = {};
+  const rest = [];
+  react.Children.forEach(children, (child) => {
+    if (!react.isValidElement(child)) {
+      if (child != null) rest.push(child);
+      return;
+    }
+    const slot = getSlotName(child);
+    if (!slot) {
+      rest.push(child);
+      return;
+    }
+    slots[slot] = child;
+  });
+  return { slots, rest };
+}
+const PageLayoutBanner = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+PageLayoutBanner.__PAGE_LAYOUT_SLOT__ = "Banner";
+const PageLayoutSidebar = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+PageLayoutSidebar.__PAGE_LAYOUT_SLOT__ = "Sidebar";
+const PageLayoutHeader = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerContainer, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.headerContent} ${getMaxWidthClass(maxWidth, styles__default.default)}`, children }) });
+};
+PageLayoutHeader.__PAGE_LAYOUT_SLOT__ = "Header";
+const PageLayoutContent = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.contentInner} ${getMaxWidthClass(maxWidth, styles__default.default)}`, children });
+};
+PageLayoutContent.__PAGE_LAYOUT_SLOT__ = "Content";
+const PageLayoutFooter = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.footerContent} ${getMaxWidthClass(maxWidth, styles__default.default)}`, children });
+};
+PageLayoutFooter.__PAGE_LAYOUT_SLOT__ = "Footer";
+const PageLayoutBase = ({
+  children,
+  containScrolling = false,
+  orientation = "vertical",
+  environment,
+  customEnv,
+  customEnvSeverity
+}) => {
+  var _a, _b;
+  const { slots, rest } = splitSlots(children);
+  const envBanner = resolveEnvBanner(environment, customEnv, customEnvSeverity);
+  const content = (_a = slots.Content) != null ? _a : rest.length ? /* @__PURE__ */ jsxRuntime.jsx(PageLayoutContent, { maxWidth: "md", children: rest }) : void 0;
+  const rootClass = [
+    styles__default.default.root,
+    orientation === "vertical" ? styles__default.default.vertical : styles__default.default.horizontal,
+    containScrolling ? styles__default.default.containScrolling : styles__default.default.documentScrolling,
+    slots.Banner || envBanner ? styles__default.default.hasBanner : ""
+  ].filter(Boolean).join(" ");
+  const banner = (_b = slots.Banner) != null ? _b : envBanner;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rootClass, "data-contain-scrolling": containScrolling || void 0, children: [
+    banner ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.banner, children: banner }) : null,
+    slots.Sidebar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sidebar, children: slots.Sidebar }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.mainColumn, children: [
+      slots.Header ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: slots.Header }) : null,
+      slots.Hero ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.hero, children: slots.Hero }) : null,
+      content || slots.Footer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.mainScroll, children: [
+        content ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.content, children: content }) : null,
+        slots.Footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.footer, children: slots.Footer }) : null
+      ] }) : null
+    ] })
+  ] });
+};
+const PageLayout = Object.assign(PageLayoutBase, {
+  Banner: PageLayoutBanner,
+  Sidebar: PageLayoutSidebar,
+  Header: PageLayoutHeader,
+  Content: PageLayoutContent,
+  Footer: PageLayoutFooter
+});
+
+exports.PageLayout = PageLayout;

package/dist/components/page-layout/PageLayout.d.ts

@@ -0,0 +1,47 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+type Orientation = 'vertical' | 'horizontal';
+export type PageLayoutMaxWidth = boolean | 'sm' | 'md';
+export interface PageLayoutProps extends PropsWithChildren {
+    /**
+     * If true, PageLayout becomes a self-contained app shell (100vh) and
+     * scroll is contained inside the intended regions (sidebar/content).
+     * If false, the document scrolls normally (body scroll).
+     */
+    containScrolling?: boolean;
+    orientation?: Orientation;
+    /** Pass a deployment environment string (e.g. process.env.DEPLOYMENT_ENV).
+     *  Renders a banner for 'production', 'staging', or 'test'. 'prod' is accepted as an alias for
+     *  'production'. Ignored for unknown values or undefined. */
+    environment?: string;
+    /** Custom banner label — requires customEnvSeverity. */
+    customEnv?: string;
+    /** Severity for the custom banner. */
+    customEnvSeverity?: Severity;
+}
+export interface PageLayoutHeaderProps {
+    maxWidth?: PageLayoutMaxWidth;
+    children: ReactNode;
+}
+export interface PageLayoutContentProps {
+    maxWidth?: PageLayoutMaxWidth;
+    children: ReactNode;
+}
+export interface PageLayoutFooterProps {
+    maxWidth?: PageLayoutMaxWidth;
+    children: ReactNode;
+}
+export interface PageLayoutBannerProps {
+    children: ReactNode;
+}
+export interface PageLayoutSidebarProps {
+    children: ReactNode;
+}
+export declare const PageLayout: FC<PageLayoutProps> & {
+    Banner: FC<PageLayoutBannerProps>;
+    Sidebar: FC<PageLayoutSidebarProps>;
+    Header: FC<PageLayoutHeaderProps>;
+    Content: FC<PageLayoutContentProps>;
+    Footer: FC<PageLayoutFooterProps>;
+};
+export {};

package/dist/components/page-layout/PageLayout.js

@@ -0,0 +1,120 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Children, isValidElement } from 'react';
+import { EnvironmentBanner } from '../../components/environment-banner/EnvironmentBanner';
+import styles from './PageLayout.module.css';
+
+function getMaxWidthClass(value, styles2) {
+  if (!value) return "";
+  if (value === "sm") return styles2.maxWidthSm;
+  return styles2.maxWidthMd;
+}
+const VALID_ENVIRONMENTS = ["production", "staging", "test"];
+const ENVIRONMENT_ALIASES = { prod: "production" };
+function resolveEnvBanner(environment, customEnv, customEnvSeverity) {
+  var _a;
+  if (customEnv != null && customEnvSeverity != null) {
+    return /* @__PURE__ */ jsx(EnvironmentBanner, { customLabel: customEnv, customSeverity: customEnvSeverity });
+  }
+  const normalised = environment == null ? void 0 : environment.toLowerCase();
+  const resolved = normalised != null ? (_a = ENVIRONMENT_ALIASES[normalised]) != null ? _a : normalised : void 0;
+  if (resolved != null && VALID_ENVIRONMENTS.includes(resolved)) {
+    return /* @__PURE__ */ jsx(EnvironmentBanner, { environment: resolved });
+  }
+  return null;
+}
+function getSlotName(el) {
+  var _a;
+  const t = el.type;
+  return (_a = t == null ? void 0 : t.__PAGE_LAYOUT_SLOT__) != null ? _a : null;
+}
+function splitSlots(children) {
+  const slots = {};
+  const rest = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      if (child != null) rest.push(child);
+      return;
+    }
+    const slot = getSlotName(child);
+    if (!slot) {
+      rest.push(child);
+      return;
+    }
+    slots[slot] = child;
+  });
+  return { slots, rest };
+}
+const PageLayoutBanner = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+PageLayoutBanner.__PAGE_LAYOUT_SLOT__ = "Banner";
+const PageLayoutSidebar = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+PageLayoutSidebar.__PAGE_LAYOUT_SLOT__ = "Sidebar";
+const PageLayoutHeader = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: styles.headerContainer, children: /* @__PURE__ */ jsx("div", { className: `${styles.headerContent} ${getMaxWidthClass(maxWidth, styles)}`, children }) });
+};
+PageLayoutHeader.__PAGE_LAYOUT_SLOT__ = "Header";
+const PageLayoutContent = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: `${styles.contentInner} ${getMaxWidthClass(maxWidth, styles)}`, children });
+};
+PageLayoutContent.__PAGE_LAYOUT_SLOT__ = "Content";
+const PageLayoutFooter = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: `${styles.footerContent} ${getMaxWidthClass(maxWidth, styles)}`, children });
+};
+PageLayoutFooter.__PAGE_LAYOUT_SLOT__ = "Footer";
+const PageLayoutBase = ({
+  children,
+  containScrolling = false,
+  orientation = "vertical",
+  environment,
+  customEnv,
+  customEnvSeverity
+}) => {
+  var _a, _b;
+  const { slots, rest } = splitSlots(children);
+  const envBanner = resolveEnvBanner(environment, customEnv, customEnvSeverity);
+  const content = (_a = slots.Content) != null ? _a : rest.length ? /* @__PURE__ */ jsx(PageLayoutContent, { maxWidth: "md", children: rest }) : void 0;
+  const rootClass = [
+    styles.root,
+    orientation === "vertical" ? styles.vertical : styles.horizontal,
+    containScrolling ? styles.containScrolling : styles.documentScrolling,
+    slots.Banner || envBanner ? styles.hasBanner : ""
+  ].filter(Boolean).join(" ");
+  const banner = (_b = slots.Banner) != null ? _b : envBanner;
+  return /* @__PURE__ */ jsxs("div", { className: rootClass, "data-contain-scrolling": containScrolling || void 0, children: [
+    banner ? /* @__PURE__ */ jsx("div", { className: styles.banner, children: banner }) : null,
+    slots.Sidebar ? /* @__PURE__ */ jsx("div", { className: styles.sidebar, children: slots.Sidebar }) : null,
+    /* @__PURE__ */ jsxs("div", { className: styles.mainColumn, children: [
+      slots.Header ? /* @__PURE__ */ jsx("div", { className: styles.header, children: slots.Header }) : null,
+      slots.Hero ? /* @__PURE__ */ jsx("div", { className: styles.hero, children: slots.Hero }) : null,
+      content || slots.Footer ? /* @__PURE__ */ jsxs("div", { className: styles.mainScroll, children: [
+        content ? /* @__PURE__ */ jsx("div", { className: styles.content, children: content }) : null,
+        slots.Footer ? /* @__PURE__ */ jsx("div", { className: styles.footer, children: slots.Footer }) : null
+      ] }) : null
+    ] })
+  ] });
+};
+const PageLayout = Object.assign(PageLayoutBase, {
+  Banner: PageLayoutBanner,
+  Sidebar: PageLayoutSidebar,
+  Header: PageLayoutHeader,
+  Content: PageLayoutContent,
+  Footer: PageLayoutFooter
+});
+
+export { PageLayout };