@dbcdk/react-components 0.0.95 → 0.0.97

package/dist/components/overlay/tooltip/Tooltip.module.css

@@ -1,104 +0,0 @@
-/* Layout neutral wrapper */
-.container {
-  display: contents;
-}
-
-/* Measurable trigger box without forcing full width */
-.trigger {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-}
-
-.trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-  border-radius: var(--border-radius-default);
-}
-
-/* Bubble */
-.bubble {
-  position: fixed;
-  z-index: var(--z-tooltip);
-  pointer-events: none;
-  background: var(--color-fg-default);
-  color: var(--color-fg-on-strong);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-tight);
-  padding: var(--spacing-xxs) var(--spacing-sm);
-  border-radius: var(--border-radius-default);
-
-  /*
-    - Don't let it run wild horizontally
-    - But don't clip: allow wrap
-    - Keep some relation to viewport
-  */
-  max-width: min(360px, calc(100vw - 16px));
-  white-space: normal;
-  overflow-wrap: break-word; /* wrap long words nicely */
-  word-break: normal;
-
-  /*
-    If your tooltips often include URLs/IDs, consider 'anywhere' instead:
-    overflow-wrap: anywhere;
-  */
-
-  /* Optional: nicer shadow than box-shadow for rounded bubble */
-  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.22));
-
-  /* Hidden by default */
-  opacity: 0;
-  visibility: hidden;
-
-  /* Base transform gets overridden by placement rules below */
-  transform: translate3d(0, 0, 0);
-
-  transition:
-    opacity var(--transition-fast),
-    transform var(--transition-fast),
-    visibility 0s linear var(--transition-fast);
-}
-
-.bubble[data-open='true'] {
-  opacity: 1;
-  visibility: visible;
-  transition:
-    opacity var(--transition-fast),
-    transform var(--transition-fast),
-    visibility 0s;
-}
-
-/* Placement-based motion (so it “comes from” the trigger) */
-.bubble[data-placement='top'] {
-  transform: translate3d(0, -6px, 0);
-}
-.bubble[data-placement='bottom'] {
-  transform: translate3d(0, 6px, 0);
-}
-.bubble[data-placement='left'] {
-  transform: translate3d(-6px, 0, 0);
-}
-.bubble[data-placement='right'] {
-  transform: translate3d(6px, 0, 0);
-}
-
-/* Open state resets transform to 0 for all placements */
-.bubble[data-open='true'][data-placement='top'],
-.bubble[data-open='true'][data-placement='bottom'],
-.bubble[data-open='true'][data-placement='left'],
-.bubble[data-open='true'][data-placement='right'] {
-  transform: translate3d(0, 0, 0);
-}
-
-.bubble svg {
-  height: 20px;
-  width: 20px;
-  flex: 0 0 auto;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bubble {
-    transition: none;
-    transform: none;
-  }
-}

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

@@ -1,255 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { createPortal } from 'react-dom';
-import styles from './Tooltip.module.css';
-export const TooltipContext = createContext(null);
-const VIEWPORT_PADDING = 8;
-const SHOW_DELAY_MS = 500;
-function clamp(n, min, max) {
-    return Math.max(min, Math.min(n, max));
-}
-function flippedPlacement(p) {
-    if (p === 'top')
-        return 'bottom';
-    if (p === 'bottom')
-        return 'top';
-    if (p === 'left')
-        return 'right';
-    return 'left';
-}
-function computePosition(args) {
-    const { triggerRect, bubbleRect, placement, offset } = args;
-    switch (placement) {
-        case 'top':
-            return {
-                left: triggerRect.left + triggerRect.width / 2 - bubbleRect.width / 2,
-                top: triggerRect.top - bubbleRect.height - offset,
-            };
-        case 'bottom':
-            return {
-                left: triggerRect.left + triggerRect.width / 2 - bubbleRect.width / 2,
-                top: triggerRect.bottom + offset,
-            };
-        case 'left':
-            return {
-                left: triggerRect.left - bubbleRect.width - offset,
-                top: triggerRect.top + triggerRect.height / 2 - bubbleRect.height / 2,
-            };
-        case 'right':
-            return {
-                left: triggerRect.right + offset,
-                top: triggerRect.top + triggerRect.height / 2 - bubbleRect.height / 2,
-            };
-    }
-}
-function fitsViewport(pos, bubbleRect) {
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const leftOk = pos.left >= VIEWPORT_PADDING;
-    const rightOk = pos.left + bubbleRect.width <= vw - VIEWPORT_PADDING;
-    const topOk = pos.top >= VIEWPORT_PADDING;
-    const bottomOk = pos.top + bubbleRect.height <= vh - VIEWPORT_PADDING;
-    return leftOk && rightOk && topOk && bottomOk;
-}
-function shallowEqualActive(a, b) {
-    if (a === b)
-        return true;
-    if (!a || !b)
-        return false;
-    return (a.id === b.id &&
-        a.open === b.open &&
-        a.content === b.content &&
-        a.placement === b.placement &&
-        a.offset === b.offset &&
-        a.triggerEl === b.triggerEl);
-}
-export function TooltipProvider({ children }) {
-    const [active, setActive] = useState(null);
-    const showTimerRef = useRef(null);
-    const show = useCallback((next) => {
-        if (showTimerRef.current)
-            clearTimeout(showTimerRef.current);
-        showTimerRef.current = setTimeout(() => {
-            showTimerRef.current = null;
-            setActive(curr => {
-                const proposed = { ...next, open: true };
-                return shallowEqualActive(curr, proposed) ? curr : proposed;
-            });
-        }, SHOW_DELAY_MS);
-    }, []);
-    const hide = useCallback((id) => {
-        if (showTimerRef.current) {
-            clearTimeout(showTimerRef.current);
-            showTimerRef.current = null;
-        }
-        setActive(curr => {
-            if (!curr || curr.id !== id)
-                return curr;
-            return null;
-        });
-    }, []);
-    const update = useCallback((id, patch) => {
-        setActive(curr => {
-            if (!curr || curr.id !== id)
-                return curr;
-            const proposed = { ...curr, ...patch };
-            return shallowEqualActive(curr, proposed) ? curr : proposed;
-        });
-    }, []);
-    const value = useMemo(() => ({ show, hide, update, active }), [show, hide, update, active]);
-    return (_jsxs(TooltipContext.Provider, { value: value, children: [children, _jsx(TooltipLayer, {})] }));
-}
-function TooltipLayer() {
-    const ctx = useContext(TooltipContext);
-    const active = ctx === null || ctx === void 0 ? void 0 : ctx.active;
-    const bubbleRef = useRef(null);
-    const [mounted, setMounted] = useState(false);
-    // "open" follows provider state; "visible" only becomes true after a successful measure+position.
-    const [open, setOpen] = useState(false);
-    const [visible, setVisible] = useState(false);
-    const [placement, setPlacement] = useState('top');
-    const [pos, setPos] = useState({ top: 0, left: 0 });
-    // Prevent unnecessary state churn
-    const lastPlacementRef = useRef('top');
-    const lastPosRef = useRef({ top: 0, left: 0 });
-    // Robust switching between triggers (prevents showing new tooltip at old coords)
-    const lastActiveIdRef = useRef(null);
-    // Track and cancel scheduled recomputes
-    const rafRef = useRef(null);
-    useEffect(() => setMounted(true), []);
-    const recompute = useCallback(() => {
-        if (!(active === null || active === void 0 ? void 0 : active.open))
-            return;
-        const trigger = active.triggerEl;
-        const bubble = bubbleRef.current;
-        if (!trigger || !bubble)
-            return;
-        const triggerRect = trigger.getBoundingClientRect();
-        const bubbleRect = bubble.getBoundingClientRect();
-        // Keep hidden until bubble has real dimensions
-        if (bubbleRect.width === 0 || bubbleRect.height === 0) {
-            if (visible)
-                setVisible(false);
-            if (rafRef.current)
-                cancelAnimationFrame(rafRef.current);
-            rafRef.current = requestAnimationFrame(recompute);
-            return;
-        }
-        const candidates = [active.placement, flippedPlacement(active.placement)];
-        let chosen = candidates[0];
-        let nextPos = computePosition({
-            triggerRect,
-            bubbleRect,
-            placement: chosen,
-            offset: active.offset,
-        });
-        if (!fitsViewport(nextPos, bubbleRect)) {
-            const alt = candidates[1];
-            const altPos = computePosition({
-                triggerRect,
-                bubbleRect,
-                placement: alt,
-                offset: active.offset,
-            });
-            if (fitsViewport(altPos, bubbleRect)) {
-                chosen = alt;
-                nextPos = altPos;
-            }
-        }
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        const left = clamp(nextPos.left, VIEWPORT_PADDING, vw - bubbleRect.width - VIEWPORT_PADDING);
-        const top = clamp(nextPos.top, VIEWPORT_PADDING, vh - bubbleRect.height - VIEWPORT_PADDING);
-        // Only update state if changed
-        const prevPos = lastPosRef.current;
-        if (prevPos.left !== left || prevPos.top !== top) {
-            lastPosRef.current = { left, top };
-            setPos({ left, top });
-        }
-        if (lastPlacementRef.current !== chosen) {
-            lastPlacementRef.current = chosen;
-            setPlacement(chosen);
-        }
-        if (!visible)
-            setVisible(true);
-    }, [active === null || active === void 0 ? void 0 : active.open, active === null || active === void 0 ? void 0 : active.triggerEl, active === null || active === void 0 ? void 0 : active.placement, active === null || active === void 0 ? void 0 : active.offset, visible]);
-    // Drive open/close local state, reset visibility on open.
-    useEffect(() => {
-        const nextOpen = !!(active === null || active === void 0 ? void 0 : active.open);
-        setOpen(prev => (prev === nextOpen ? prev : nextOpen));
-        if (nextOpen)
-            setVisible(false);
-        if (!nextOpen)
-            lastActiveIdRef.current = null;
-    }, [active === null || active === void 0 ? void 0 : active.open]);
-    // Handle switching from one trigger to another (hide before paint + recompute)
-    useLayoutEffect(() => {
-        var _a;
-        const id = (_a = active === null || active === void 0 ? void 0 : active.id) !== null && _a !== void 0 ? _a : null;
-        if (!id)
-            return;
-        if (lastActiveIdRef.current && lastActiveIdRef.current !== id) {
-            // Switching tooltips: hide immediately to avoid flash at previous position
-            setVisible(false);
-        }
-        lastActiveIdRef.current = id;
-        // Schedule a recompute after DOM updates
-        if (rafRef.current)
-            cancelAnimationFrame(rafRef.current);
-        rafRef.current = requestAnimationFrame(recompute);
-        return () => {
-            if (rafRef.current) {
-                cancelAnimationFrame(rafRef.current);
-                rafRef.current = null;
-            }
-        };
-    }, [active === null || active === void 0 ? void 0 : active.id, recompute]);
-    // Auto-update while open (resize/scroll/resize-observer)
-    useLayoutEffect(() => {
-        if (!open)
-            return;
-        if (rafRef.current)
-            cancelAnimationFrame(rafRef.current);
-        rafRef.current = requestAnimationFrame(recompute);
-        const onResize = () => recompute();
-        const onScroll = () => recompute();
-        window.addEventListener('resize', onResize);
-        window.addEventListener('scroll', onScroll, true);
-        const ro = new ResizeObserver(() => recompute());
-        if (active === null || active === void 0 ? void 0 : active.triggerEl)
-            ro.observe(active.triggerEl);
-        if (bubbleRef.current)
-            ro.observe(bubbleRef.current);
-        return () => {
-            if (rafRef.current) {
-                cancelAnimationFrame(rafRef.current);
-                rafRef.current = null;
-            }
-            window.removeEventListener('resize', onResize);
-            window.removeEventListener('scroll', onScroll, true);
-            ro.disconnect();
-        };
-    }, [open, recompute, active === null || active === void 0 ? void 0 : active.triggerEl]);
-    // Escape closes
-    useEffect(() => {
-        if (!open || !active)
-            return;
-        const onKeyDown = (e) => {
-            if (e.key === 'Escape')
-                ctx.hide(active.id);
-        };
-        window.addEventListener('keydown', onKeyDown);
-        return () => window.removeEventListener('keydown', onKeyDown);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open, active === null || active === void 0 ? void 0 : active.id]);
-    if (!ctx)
-        return null;
-    if (!mounted || !active)
-        return null;
-    // While not yet visible, keep it offscreen so it can be measured but never flashes at stale coords.
-    const bubbleStyle = visible
-        ? { top: pos.top, left: pos.left }
-        : { top: -9999, left: -9999 };
-    return createPortal(_jsx("div", { ref: bubbleRef, id: active.id, role: "tooltip", className: styles.bubble, "data-open": visible ? 'true' : 'false', "data-placement": placement, style: bubbleStyle, "aria-hidden": !visible, children: active.content }), document.body);
-}

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

@@ -1,118 +0,0 @@
-import { useCallback, useContext, useEffect, useId, useRef, useState } from 'react';
-import { TooltipContext } from './TooltipProvider';
-export 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 !== undefined;
-    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;
-    };
-    // Track last values so we only call update when something actually changes
-    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]);
-    // Drive global tooltip open/close from local state
-    useEffect(() => {
-        if (!isOpen) {
-            hide();
-            return;
-        }
-        show();
-    }, [isOpen, show, hide]);
-    useEffect(() => {
-        var _a;
-        if (!isOpen)
-            return;
-        if (((_a = ctx.active) === null || _a === void 0 ? 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');
-        // By default we only show for keyboard focus. Callers can opt into opening on any focus.
-        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 : undefined,
-        },
-    };
-}

package/dist/components/page/Page.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './Page.module.css';
-import { Breadcrumbs } from '../breadcrumbs/Breadcrumbs';
-import { Headline } from '../headline/Headline';
-export function Page({ header, subheader, severity, headerIcon, headerAddition, breadcrumbs, disableContentBox, disableTopPadding = true, maxWidth, containScrolling = false, children, }) {
-    const maxWidthClass = maxWidth
-        ? styles[`maxWidth${maxWidth.charAt(0).toUpperCase()}${maxWidth.slice(1)}`]
-        : '';
-    const hasHeadline = Boolean(header || subheader || headerAddition);
-    return (_jsxs("div", { className: `${styles.container} ${containScrolling ? styles.containScrolling : styles.documentScrolling} ${disableTopPadding ? styles.disableTopPadding : ''} ${maxWidthClass}`, children: [_jsx("div", { className: styles.headerContainer, children: _jsxs("div", { className: styles.headerMain, children: [breadcrumbs ? _jsx(Breadcrumbs, { items: breadcrumbs }) : null, hasHeadline ? (_jsx(Headline, { disableMargin: true, size: 2, severity: severity, icon: headerIcon, subheader: subheader, addition: headerAddition, children: header })) : null] }) }), _jsx("div", { className: `${styles.content} ${disableContentBox ? styles.disableContentBox : ''}`, children: children })] }));
-}

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

@@ -1,76 +0,0 @@
-.container {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  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;
-  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 {
-  flex: 1 1 auto;
-  min-height: 0;
-  min-width: 0;
-  overflow: auto;
-}
-
-.documentScrolling .content {
-  overflow: visible;
-}
-
-.content:not(.disableContentBox) {
-  padding: var(--spacing-lg);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--border-radius-default);
-}

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

@@ -1,76 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement } from 'react';
-import { PageLayoutHero, } from './components/page-layout-hero/PageLayoutHero';
-import styles from './PageLayout.module.css';
-function getMaxWidthClass(value, styles) {
-    if (!value)
-        return '';
-    if (value === 'sm')
-        return styles.maxWidthSm;
-    return styles.maxWidthMd;
-}
-function getSlotName(el) {
-    var _a;
-    const t = el.type;
-    return (_a = t === null || t === void 0 ? void 0 : t.__PAGE_LAYOUT_SLOT__) !== null && _a !== void 0 ? _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;
-        }
-        // If multiple of same slot are provided, last wins (simple + predictable).
-        slots[slot] = child;
-    });
-    return { slots, rest };
-}
-/** Slot components */
-const PageLayoutSidebar = ({ children, }) => {
-    // This returns children; layout wrapper decides how to render.
-    // We keep this as a slot marker component.
-    return _jsx(_Fragment, { children: children });
-};
-PageLayoutSidebar.__PAGE_LAYOUT_SLOT__ = 'Sidebar';
-const PageLayoutHeader = ({ maxWidth = false, children, }) => {
-    return (_jsx("div", { className: styles.headerContainer, children: _jsx("div", { className: `${styles.headerContent} ${getMaxWidthClass(maxWidth, styles)}`, children: children }) }));
-};
-PageLayoutHeader.__PAGE_LAYOUT_SLOT__ = 'Header';
-const PageLayoutContent = ({ maxWidth = false, children, }) => {
-    return (_jsx("div", { className: `${styles.contentInner} ${getMaxWidthClass(maxWidth, styles)}`, children: children }));
-};
-PageLayoutContent.__PAGE_LAYOUT_SLOT__ = 'Content';
-const PageLayoutFooter = ({ maxWidth = false, children, }) => {
-    return (_jsx("div", { className: `${styles.footerContent} ${getMaxWidthClass(maxWidth, styles)}`, children: children }));
-};
-PageLayoutFooter.__PAGE_LAYOUT_SLOT__ = 'Footer';
-PageLayoutHero.__PAGE_LAYOUT_SLOT__ = 'Hero';
-const PageLayoutBase = ({ children, containScrolling = false, orientation = 'vertical', }) => {
-    var _a, _b;
-    const { slots, rest } = splitSlots(children);
-    // If no explicit <PageLayout.Content>, we’ll treat remaining children as content.
-    const content = (_a = slots.Content) !== null && _a !== void 0 ? _a : (rest.length ? _jsx(PageLayoutContent, { maxWidth: "md", children: rest }) : undefined);
-    const rootClass = [
-        styles.root,
-        orientation === 'vertical' ? styles.vertical : styles.horizontal,
-        containScrolling ? styles.containScrolling : styles.documentScrolling,
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (_jsxs("div", { className: rootClass, children: [slots.Sidebar ? (_jsx("aside", { className: styles.sidebar, "aria-label": (_b = slots.Sidebar.props) === null || _b === void 0 ? void 0 : _b.ariaLabel, children: slots.Sidebar })) : null, _jsxs("div", { className: styles.mainColumn, children: [slots.Header ? _jsx("header", { className: styles.header, children: slots.Header }) : null, slots.Hero ? _jsx("div", { className: styles.hero, children: slots.Hero }) : null, content || slots.Footer ? (_jsxs("div", { className: styles.mainScroll, children: [content ? _jsx("main", { className: styles.content, children: content }) : null, slots.Footer ? _jsx("footer", { className: styles.footer, children: slots.Footer }) : null] })) : null] })] }));
-};
-export const PageLayout = Object.assign(PageLayoutBase, {
-    Sidebar: PageLayoutSidebar,
-    Header: PageLayoutHeader,
-    Hero: PageLayoutHero,
-    Content: PageLayoutContent,
-    Footer: PageLayoutFooter,
-});