@dbcdk/react-components 0.0.5 → 0.0.7

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-layout/PageLayout.d.ts

@@ -1,28 +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;
+    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 {};

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

@@ -1,78 +1,42 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import styles from './PageLayout.module.css';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PageLayoutHero } from './components/page-layout-hero/PageLayoutHero';
-
-const PageLayoutBase = ({
-  children,
-  sidebar,
-  header,
-  containScrolling = false,
-  orientation = "vertical"
-}) => {
-  if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `${styles.container} ${styles.vertical} ${containScrolling ? styles.containScrolling : ""}`,
-        children: /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", height: "100%", maxWidth: "100%" }, children: [
-          sidebar,
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                flex: 1,
-                display: "flex",
-                flexDirection: "column",
-                height: "100%",
-                maxHeight: "100vh",
-                overflow: "auto"
-              },
-              children: [
-                header && /* @__PURE__ */ jsx("div", { className: styles.header, children: header }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      flex: 1,
-                      display: "flex",
-                      flexDirection: "column",
-                      padding: "var(--spacing-md)",
-                      gap: "var(--spacing-md)",
-                      backgroundColor: "var(--color-bg-surface)",
-                      overflow: "auto"
-                    },
-                    children
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("div", { className: `${styles.container} ${containScrolling ? styles.containScrolling : ""}`, children });
+import styles from './PageLayout.module.css';
+/** Base component */
+const PageLayoutBase = ({ children, sidebar, header, containScrolling = false, orientation = 'vertical', }) => {
+    if (orientation === 'vertical') {
+        return (_jsx("div", { className: `${styles.container} ${styles.vertical} ${containScrolling ? styles.containScrolling : ''}`, children: _jsxs("div", { style: { flex: 1, display: 'flex', height: '100%', maxWidth: '100%' }, children: [sidebar, _jsxs("div", { style: {
+                            flex: 1,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            maxHeight: '100vh',
+                            overflow: 'auto',
+                        }, children: [header && _jsx("div", { className: styles.header, children: header }), _jsx("div", { style: {
+                                    flex: 1,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    padding: 'var(--spacing-md)',
+                                    gap: 'var(--spacing-md)',
+                                    backgroundColor: 'var(--color-bg-surface)',
+                                    overflow: 'auto',
+                                }, children: children })] })] }) }));
+    }
+    return (_jsx("div", { className: `${styles.container} ${containScrolling ? styles.containScrolling : ''}`, children: children }));
 };
-const PageLayoutHeader = ({
-  maxWidth = true,
-  children
-}) => {
-  return /* @__PURE__ */ jsx("div", { className: styles.headerContainer, children: /* @__PURE__ */ jsx("div", { className: `${styles.headerContent} ${maxWidth ? styles.maxWidth : ""}`, children }) });
+/** Subcomponents */
+const PageLayoutHeader = ({ maxWidth = true, children, }) => {
+    return (_jsx("div", { className: styles.headerContainer, children: _jsx("div", { className: `${styles.headerContent} ${maxWidth ? styles.maxWidth : ''}`, children: children }) }));
 };
-const PageLayoutContent = ({
-  maxWidth = true,
-  children
-}) => {
-  return /* @__PURE__ */ jsx("main", { className: `${styles.content} ${maxWidth ? styles.maxWidth : ""}`, children });
+const PageLayoutContent = ({ maxWidth = true, children, }) => {
+    return _jsx("main", { className: `${styles.content} ${maxWidth ? styles.maxWidth : ''}`, children: children });
 };
 const PageLayoutFooter = ({ children }) => {
-  return /* @__PURE__ */ jsx("footer", { className: styles.footer, children });
+    return _jsx("footer", { className: styles.footer, children: children });
 };
-const PageLayout = Object.assign(PageLayoutBase, {
-  Header: PageLayoutHeader,
-  Hero: PageLayoutHero,
-  Content: PageLayoutContent,
-  Footer: PageLayoutFooter
+export const PageLayout = Object.assign(PageLayoutBase, {
+    Header: PageLayoutHeader,
+    Hero: PageLayoutHero,
+    Content: PageLayoutContent,
+    Footer: PageLayoutFooter,
 });
-
-export { PageLayout };

package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.js

@@ -1,25 +1,7 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import heroStyles from './PageLayoutHero.module.css';
 import layoutStyles from '../../PageLayout.module.css';
-
-const PageLayoutHero = ({
-  children,
-  link,
-  metaHeadline,
-  headline,
-  image,
-  maxWidth = true,
-  textBgColor = "var(--color-primary-900)"
-}) => {
-  const content = /* @__PURE__ */ jsx("div", { className: `${heroStyles.heroContainer} ${maxWidth ? layoutStyles.maxWidth : ""}`, children: /* @__PURE__ */ jsxs("div", { className: heroStyles.splitWrapper, children: [
-    /* @__PURE__ */ jsx("div", { className: heroStyles.imageColumn, children: image }),
-    /* @__PURE__ */ jsx("div", { className: heroStyles.textColumn, style: { backgroundColor: textBgColor }, children: /* @__PURE__ */ jsxs("div", { className: heroStyles.textInner, children: [
-      metaHeadline && /* @__PURE__ */ jsx("div", { className: heroStyles.metaHeadline, children: metaHeadline }),
-      headline && /* @__PURE__ */ jsx("div", { className: heroStyles.headline, children: /* @__PURE__ */ jsx("h2", { children: headline }) }),
-      children
-    ] }) })
-  ] }) });
-  return link ? /* @__PURE__ */ jsx(Fragment, { children: link(content) }) : /* @__PURE__ */ jsx(Fragment, { children: content });
+export const PageLayoutHero = ({ children, link, metaHeadline, headline, image, maxWidth = true, textBgColor = 'var(--color-primary-900)', }) => {
+    const content = (_jsx("div", { className: `${heroStyles.heroContainer} ${maxWidth ? layoutStyles.maxWidth : ''}`, children: _jsxs("div", { className: heroStyles.splitWrapper, children: [_jsx("div", { className: heroStyles.imageColumn, children: image }), _jsx("div", { className: heroStyles.textColumn, style: { backgroundColor: textBgColor }, children: _jsxs("div", { className: heroStyles.textInner, children: [metaHeadline && _jsx("div", { className: heroStyles.metaHeadline, children: metaHeadline }), headline && (_jsx("div", { className: heroStyles.headline, children: _jsx("h2", { children: headline }) })), children] }) })] }) }));
+    return link ? _jsx(_Fragment, { children: link(content) }) : _jsx(_Fragment, { children: content });
 };
-
-export { PageLayoutHero };

package/dist/components/pagination/Pagination.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export type PageChangeEvent = {
     page: number;
     take: number;
@@ -15,5 +16,5 @@ interface PaginationProps {
     showFirstLast?: boolean;
     showGoToPage?: boolean;
 }
-export declare function Pagination({ itemsCount, skip, take, onPageChange, pageSizeOptions, showFirstLast, showGoToPage, }: PaginationProps): React.ReactNode;
+export declare function Pagination({ itemsCount, skip, take, onPageChange, pageSizeOptions, showFirstLast, showGoToPage, }: PaginationProps): ReactNode;
 export {};