@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/overlay/side-panel/useSidePanel.js

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+export function useSidePanel() {
+    const [isOpen, setIsOpen] = useState(false);
+    const openSidePanel = () => setIsOpen(true);
+    const closeSidePanel = () => setIsOpen(false);
+    return {
+        isOpen,
+        openSidePanel,
+        closeSidePanel,
+    };
+}

package/dist/components/overlay/tooltip/Tooltip.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode, type HTMLAttributes, type ReactElement } from 'react';
+import { TooltipPlacement } from './TooltipProvider';
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
+    children: ReactNode;
+    content: ReactNode;
+    placement?: TooltipPlacement;
+    open?: boolean;
+    offset?: number;
+    delayOpenMs?: number;
+    delayCloseMs?: number;
+    className?: string;
+}
+export declare function Tooltip({ children, content, placement, open, offset, delayOpenMs, delayCloseMs, className, ...rest }: TooltipProps): ReactElement;

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

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTooltipTrigger } from './useTooltipTrigger';
+export function Tooltip({ children, content, placement = 'top', open, offset = 8, delayOpenMs, delayCloseMs, className, ...rest }) {
+    const { triggerProps } = useTooltipTrigger({
+        content,
+        placement,
+        offset,
+        open,
+        delayOpenMs,
+        delayCloseMs,
+    });
+    const rootClass = useMemo(() => ['TooltipContainer', className].filter(Boolean).join(' '), [className]);
+    if (!content)
+        return _jsx(_Fragment, { children: children });
+    return (_jsx("span", { className: rootClass, ...rest, children: _jsx("span", { className: "TooltipTrigger", tabIndex: 0, ...triggerProps, children: children }) }));
+}

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

@@ -0,0 +1,106 @@
+/* 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);
+
+  /*
+    ✅ Width behavior:
+    - 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.d.ts

@@ -0,0 +1,20 @@
+import React, { type ReactNode } from 'react';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipState = {
+    id: string;
+    open: boolean;
+    content: ReactNode;
+    placement: TooltipPlacement;
+    offset: number;
+    triggerEl: HTMLElement | null;
+};
+export type TooltipContextValue = {
+    show: (next: Omit<TooltipState, 'open'>) => void;
+    hide: (id: string) => void;
+    update: (id: string, patch: Partial<Omit<TooltipState, 'id'>>) => void;
+    active: TooltipState | null;
+};
+export declare const TooltipContext: React.Context<TooltipContextValue | null>;
+export declare function TooltipProvider({ children }: {
+    children: ReactNode;
+}): React.ReactElement;

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

@@ -0,0 +1,244 @@
+'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;
+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 show = useCallback((next) => {
+        setActive(curr => {
+            const proposed = { ...next, open: true };
+            return shallowEqualActive(curr, proposed) ? curr : proposed;
+        });
+    }, []);
+    const hide = useCallback((id) => {
+        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.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { TooltipPlacement } from './TooltipProvider';
+type UseTooltipOptions = {
+    content: ReactNode;
+    placement?: TooltipPlacement;
+    offset?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    delayOpenMs?: number;
+    delayCloseMs?: number;
+};
+export declare function useTooltipTrigger(options: UseTooltipOptions): {
+    id: string;
+    isOpen: boolean;
+    triggerProps: {
+        ref: (node: HTMLElement | null) => void;
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+        'aria-describedby'?: string;
+    };
+};
+export {};

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

@@ -0,0 +1,108 @@
+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, } = 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]);
+    // ✅ Only call update if THIS tooltip is the active one AND something changed
+    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 onFocus = () => {
+        clearTimers();
+        if (!isControlled)
+            setOpen(true);
+    };
+    const onBlur = () => {
+        clearTimers();
+        if (!isControlled)
+            setOpen(false);
+    };
+    return {
+        id,
+        isOpen,
+        triggerProps: {
+            ref: (node) => {
+                triggerElRef.current = node;
+            },
+            onPointerEnter,
+            onPointerLeave,
+            onFocus,
+            onBlur,
+            'aria-describedby': content ? id : undefined,
+        },
+    };
+}

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

@@ -1,13 +1,14 @@
-import { Severity } from '@/constants/severity.types';
+import type { ReactNode } from 'react';
+import { Severity } from '../../constants/severity.types';
 import { BreadcrumbItem } from '../breadcrumbs/Breadcrumbs';
-interface Page {
+interface PageProps {
     header?: string;
     severity?: Severity;
-    headerIcon?: React.ReactNode;
-    children?: React.ReactNode;
-    headerAddition?: React.ReactNode;
+    headerIcon?: ReactNode;
+    children?: ReactNode;
+    headerAddition?: ReactNode;
     disableContentBox?: boolean;
     breadcrumbs?: BreadcrumbItem[];
 }
-export declare function Page({ header, severity, headerIcon, headerAddition, breadcrumbs, disableContentBox, children, }: Page): React.ReactNode;
+export declare function Page({ header, severity, headerIcon, headerAddition, breadcrumbs, disableContentBox, children, }: PageProps): ReactNode;
 export {};

package/dist/components/page/Page.js

@@ -1,24 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Headline } from '../headline/Headline';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Page.module.css';
 import { Breadcrumbs } from '../breadcrumbs/Breadcrumbs';
-
-function Page({
-  header,
-  severity,
-  headerIcon,
-  headerAddition,
-  breadcrumbs,
-  disableContentBox,
-  children
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "grow-container", children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
-      breadcrumbs ? /* @__PURE__ */ jsx(Breadcrumbs, { items: breadcrumbs }) : /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, severity, icon: headerIcon, children: header }),
-      headerAddition
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: `${styles.content} ${disableContentBox ? styles.disableContentBox : ""}`, children })
-  ] });
+import { Headline } from '../headline/Headline';
+export function Page({ header, severity, headerIcon, headerAddition, breadcrumbs, disableContentBox, children, }) {
+    return (_jsxs("div", { className: "grow-container", children: [_jsxs("div", { className: styles.headerContainer, children: [breadcrumbs ? (_jsx(Breadcrumbs, { items: breadcrumbs })) : (_jsx(Headline, { disableMargin: true, size: 2, severity: severity, icon: headerIcon, children: header })), headerAddition] }), _jsx("div", { className: `${styles.content} ${disableContentBox ? styles.disableContentBox : ''}`, children: children })] }));
 }
-
-export { Page };

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

@@ -21,6 +21,6 @@
 
 .content:not(.disableContentBox) {
   padding: var(--spacing-lg);
-  border: 1px solid var(--opac-bg-dark);
+  border: 1px solid var(--color-border-default);
   border-radius: var(--border-radius-default);
-}
+}

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

@@ -1,35 +1,27 @@
-import * as React from 'react';
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactNode, FC } from 'react';
+import { PageLayoutHeroProps } from './components/page-layout-hero/PageLayoutHero';
 type Orientation = 'vertical' | 'horizontal';
 export interface PageLayoutProps extends PropsWithChildren {
     containScrolling?: boolean;
     orientation?: Orientation;
-    sidebar?: React.ReactNode;
-    header?: React.ReactNode;
+    sidebar?: ReactNode;
+    header?: ReactNode;
 }
 export interface PageLayoutHeaderProps {
     maxWidth?: boolean;
-    children: React.ReactNode;
-}
-export interface PageLayoutHeroProps {
-    children?: React.ReactNode;
-    link?: (children: React.ReactNode) => React.ReactNode;
-    image?: React.ReactNode;
-    headline?: string | React.ReactNode;
-    metaHeadline?: string | React.ReactNode;
-    maxWidth?: boolean;
+    children: ReactNode;
 }
 export interface PageLayoutContentProps {
     maxWidth?: boolean;
-    children: React.ReactNode;
+    children: ReactNode;
 }
 export interface PageLayoutFooterProps {
-    children: React.ReactNode;
+    children: ReactNode;
 }
-export declare const PageLayout: React.FC<PageLayoutProps> & {
-    Header: React.FC<PageLayoutHeaderProps>;
-    Hero: React.FC<PageLayoutHeroProps>;
-    Content: React.FC<PageLayoutContentProps>;
-    Footer: React.FC<PageLayoutFooterProps>;
+export declare const PageLayout: FC<PageLayoutProps> & {
+    Header: FC<PageLayoutHeaderProps>;
+    Hero: FC<PageLayoutHeroProps>;
+    Content: FC<PageLayoutContentProps>;
+    Footer: FC<PageLayoutFooterProps>;
 };
 export {};