@dbcdk/react-components 0.0.96 → 0.0.98

package/dist/components/overlay/fade-overlay/FadeOverlay.module.css

@@ -1,54 +0,0 @@
-.overlay {
-  --fade-overlay-color: var(--color-bg-surface);
-  --fade-overlay-size: 65%;
-
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  pointer-events: none;
-  border-radius: inherit;
-}
-
-.bottom {
-  background: linear-gradient(
-    to top,
-    var(--fade-overlay-color) 0%,
-    transparent var(--fade-overlay-size)
-  );
-}
-
-.top {
-  background: linear-gradient(
-    to bottom,
-    var(--fade-overlay-color) 0%,
-    transparent var(--fade-overlay-size)
-  );
-}
-
-.left {
-  background: linear-gradient(
-    to right,
-    var(--fade-overlay-color) 0%,
-    transparent var(--fade-overlay-size)
-  );
-}
-
-.right {
-  background: linear-gradient(
-    to left,
-    var(--fade-overlay-color) 0%,
-    transparent var(--fade-overlay-size)
-  );
-}
-
-.sm {
-  --fade-overlay-size: 40%;
-}
-
-.md {
-  --fade-overlay-size: 65%;
-}
-
-.lg {
-  --fade-overlay-size: 85%;
-}

package/dist/components/overlay/modal/Modal.js

@@ -1,115 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from 'lucide-react';
-import { useEffect, useId, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { Button } from '../../../components/button/Button';
-import { Headline } from '../../../components/headline/Headline';
-import styles from './Modal.module.css';
-export function Modal({ isOpen, onRequestClose, header, subheader, content, children, primaryAction, secondaryAction, closeOnOverlayClick = true, severity, disableContentSpacing = false, isLoading, dataCy, width, }) {
-    const titleId = useId();
-    const dialogRef = useRef(null);
-    const lastActiveElementRef = useRef(null);
-    const [mounted, setMounted] = useState(false);
-    // Always call the latest onRequestClose without re-running effects
-    const onRequestCloseRef = useRef(onRequestClose);
-    useEffect(() => {
-        onRequestCloseRef.current = onRequestClose;
-    }, [onRequestClose]);
-    useEffect(() => {
-        setMounted(true); // eslint-disable-line react-hooks/set-state-in-effect -- intentional: SSR portal guard, runs once after hydration
-    }, []);
-    // Track open transition so we only autofocus once per open
-    const wasOpenRef = useRef(false);
-    useEffect(() => {
-        var _a;
-        const wasOpen = wasOpenRef.current;
-        wasOpenRef.current = isOpen;
-        if (!isOpen)
-            return;
-        // Only do focus setup when opening (false -> true)
-        if (!wasOpen) {
-            lastActiveElementRef.current = document.activeElement;
-            const dialog = dialogRef.current;
-            if (dialog) {
-                const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-                const focusable = dialog.querySelectorAll(focusableSelectors);
-                if (focusable.length > 0) {
-                    const preferred = (_a = dialog.querySelector('input, select, textarea')) !== null && _a !== void 0 ? _a : focusable[0];
-                    preferred.focus();
-                }
-                else {
-                    dialog.focus();
-                }
-            }
-        }
-        const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-        const getFocusable = () => { var _a, _b; return (_b = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelectors)) !== null && _b !== void 0 ? _b : []; };
-        const handleKeyDown = (event) => {
-            if (event.key === 'Escape') {
-                onRequestCloseRef.current();
-                return;
-            }
-            if (event.key === 'Tab' && dialogRef.current) {
-                const focusable = getFocusable();
-                if (focusable.length === 0)
-                    return;
-                const first = focusable[0];
-                const last = focusable[focusable.length - 1];
-                if (event.shiftKey) {
-                    if (document.activeElement === first ||
-                        !dialogRef.current.contains(document.activeElement)) {
-                        event.preventDefault();
-                        last.focus();
-                    }
-                }
-                else {
-                    if (document.activeElement === last ||
-                        !dialogRef.current.contains(document.activeElement)) {
-                        event.preventDefault();
-                        first.focus();
-                    }
-                }
-            }
-        };
-        // Redirect focus back into the dialog if it escapes (e.g. via mouse click on overlay)
-        const handleFocusIn = (event) => {
-            const dialog = dialogRef.current;
-            if (!dialog || dialog.contains(event.target))
-                return;
-            const focusable = getFocusable();
-            if (focusable.length > 0)
-                focusable[0].focus();
-            else
-                dialog.focus();
-        };
-        document.addEventListener('keydown', handleKeyDown);
-        document.addEventListener('focusin', handleFocusIn);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-            document.removeEventListener('focusin', handleFocusIn);
-            if (lastActiveElementRef.current) {
-                lastActiveElementRef.current.focus();
-            }
-        };
-    }, [isOpen]);
-    if (!isOpen || !mounted)
-        return null;
-    const handleOverlayClick = () => {
-        if (closeOnOverlayClick) {
-            onRequestCloseRef.current();
-        }
-    };
-    const stopPropagation = e => {
-        e.stopPropagation();
-    };
-    const resolvedSecondaryAction = primaryAction || secondaryAction
-        ? { label: 'Luk', onClick: onRequestClose, ...secondaryAction }
-        : undefined;
-    const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
-    const body = children !== null && children !== void 0 ? children : content;
-    const resolvedWidth = typeof width === 'number' ? `${width}px` : typeof width === 'string' ? width : undefined;
-    return createPortal(_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, style: resolvedWidth
-                ? { ['--modal-width']: resolvedWidth }
-                : undefined, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, tabIndex: -1, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, subheader: subheader, children: header })), _jsx(Button, { type: "button", variant: "inline", onClick: () => onRequestCloseRef.current(), "aria-label": "Luk", shape: "round", icon: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [resolvedSecondaryAction.icon && (_jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon })), _jsx("span", { children: resolvedSecondaryAction.label })] })), primaryAction && (_jsxs(Button, { type: "button", variant: primaryAction.severity || 'primary', onClick: primaryAction.onClick, disabled: primaryAction.disabled || isLoading, loading: isLoading, children: [primaryAction.icon && _jsx("span", { className: styles.icon, children: primaryAction.icon }), _jsx("span", { children: primaryAction.label })] }))] }))] }) }), document.body);
-}

package/dist/components/overlay/modal/Modal.module.css

@@ -1,109 +0,0 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--overlay-scrim);
-
-  display: flex;
-  justify-content: center;
-
-  padding: clamp(var(--spacing-sm), 10vh, var(--spacing-xl));
-  z-index: var(--z-backdrop-modal);
-
-  /* Always a scroll container so overscroll-behavior can absorb wheel/touch
-     events and prevent the background page from scrolling. */
-  overflow-y: scroll;
-  overscroll-behavior: none;
-
-  /* Hide the overlay's own scrollbar — it's only there to absorb events */
-  scrollbar-width: none;
-}
-
-.overlay::-webkit-scrollbar {
-  display: none;
-}
-
-/* Default width can be overridden by --modal-width from props */
-.modal {
-  --modal-width: 500px;
-
-  background: var(--color-bg-surface);
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-lg);
-  font-family: var(--font-family);
-  color: var(--color-fg-default);
-  z-index: var(--z-modal);
-
-  /* Responsive width: never exceed viewport */
-  width: min(
-    var(--modal-width),
-    calc(100vw - 2 * clamp(var(--spacing-sm), 4vw, var(--spacing-lg)))
-  );
-  min-width: 320px;
-
-  /* Critical: prevent “below bottom of screen”
-     Prefer svh on mobile; fallback to vh. */
-  max-height: calc(100svh - 2 * clamp(var(--spacing-sm), 10vh, var(--spacing-xl)));
-  max-height: calc(100vh - 2 * clamp(var(--spacing-sm), 10vh, var(--spacing-xl)));
-
-  display: flex;
-  flex-direction: column;
-
-  /* If you want it slightly lower than top padding, keep it aligned start */
-  align-self: flex-start;
-
-  /* Helps on iOS when address bar changes */
-  overscroll-behavior: contain;
-}
-
-/* Header/footer pinned; body scrolls */
-.header {
-  font-size: var(--font-size-md);
-  font-weight: var(--font-weight-semibold);
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  padding: var(--spacing-md);
-  padding-bottom: 0;
-
-  /* Keeps header readable if body scrolls underneath */
-  flex: 0 0 auto;
-}
-
-.body {
-  flex: 1 1 auto;
-  overflow: auto;
-
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-  color: var(--color-fg-muted);
-
-  padding: var(--spacing-md);
-  min-height: 0; /* IMPORTANT: allows flex child to actually scroll */
-}
-
-.footer {
-  flex: 0 0 auto;
-
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--spacing-xs);
-
-  padding: var(--spacing-md);
-  padding-top: 0;
-}
-
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.contentSpacing .body > :first-child {
-  margin-top: 0;
-}
-
-.contentSpacing .body > :last-child {
-  margin-bottom: 0;
-}

package/dist/components/overlay/modal/provider/ModalProvider.js

@@ -1,73 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useRef, useState, } from 'react';
-import { createPortal } from 'react-dom';
-import { Modal } from '../Modal';
-const ModalContext = createContext(undefined);
-export function ModalProvider({ children }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [config, setConfig] = useState(null);
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => {
-        setMounted(true); // eslint-disable-line react-hooks/set-state-in-effect -- intentional: SSR portal guard, runs once after hydration
-    }, []);
-    const [isLoading, setIsLoading] = useState(false);
-    const markAsLoading = useCallback((loading = true) => setIsLoading(loading), []);
-    const pendingResolverRef = useRef(null);
-    const resolvePending = useCallback((value) => {
-        if (pendingResolverRef.current) {
-            pendingResolverRef.current(value);
-            pendingResolverRef.current = null;
-        }
-    }, []);
-    const closeModal = useCallback(() => {
-        setIsOpen(false);
-        setIsLoading(false);
-    }, []);
-    const openModal = useCallback((newConfig) => {
-        resolvePending(false);
-        setConfig(newConfig);
-        setIsOpen(true);
-    }, [resolvePending]);
-    const handleRequestClose = useCallback(() => {
-        var _a;
-        (_a = config === null || config === void 0 ? void 0 : config.onRequestClose) === null || _a === void 0 ? void 0 : _a.call(config);
-        resolvePending(false);
-        closeModal();
-    }, [config, closeModal, resolvePending]);
-    const confirm = useCallback((confirmConfig) => {
-        return new Promise(resolve => {
-            resolvePending(false);
-            pendingResolverRef.current = resolve;
-            const { confirmLabel = 'Ok', cancelLabel = 'Annuller', ...rest } = confirmConfig;
-            setConfig({
-                ...rest,
-                primaryAction: {
-                    label: confirmLabel,
-                    severity: confirmConfig.confirmButtonSeverity || 'primary',
-                    onClick: () => {
-                        resolvePending(true);
-                        closeModal();
-                    },
-                },
-                secondaryAction: {
-                    label: cancelLabel,
-                    onClick: () => {
-                        resolvePending(false);
-                        closeModal();
-                    },
-                },
-            });
-            setIsOpen(true);
-        });
-    }, [resolvePending]);
-    const modalNode = (_jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm, markAsLoading }, children: [children, mounted &&
-                createPortal(_jsx(Modal, { ...(config !== null && config !== void 0 ? config : {}), isOpen: isOpen, isLoading: isLoading, onRequestClose: handleRequestClose, children: config === null || config === void 0 ? void 0 : config.children }), document.body)] }));
-    return modalNode;
-}
-export function useModal() {
-    const ctx = useContext(ModalContext);
-    if (!ctx)
-        throw new Error('useModal must be used within a ModalProvider');
-    return ctx;
-}

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

@@ -1,83 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { X } from 'lucide-react';
-import { useEffect, useRef, useState, } from 'react';
-import { createPortal } from 'react-dom';
-import { Button } from '../../../components/button/Button';
-import { Headline } from '../../../components/headline/Headline';
-import { MOTION_MS } from '../../../styles/animation';
-import styles from './SidePanel.module.css';
-export function SidePanel({ isOpen, onClose, children, header, subheader, headerAddition, actions, showBackdrop = true, severity, showHeaderMarker = true, width = '400px', details, detailsHeader = 'Output', detailsWidth = '420px', onCloseDetails, detailsHeaderAddition, ...props }) {
-    const [mounted, setMounted] = useState(false);
-    const [shouldRender, setShouldRender] = useState(isOpen);
-    const [isActive, setIsActive] = useState(false);
-    const panelRef = useRef(null);
-    useEffect(() => setMounted(true), []);
-    // OPEN: ensure rendered so animation can play
-    useEffect(() => {
-        if (isOpen)
-            setShouldRender(true);
-    }, [isOpen]);
-    // Close on ESC key
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const handleKeyDown = (e) => {
-            if (e.key === 'Escape') {
-                e.stopPropagation();
-                onClose();
-            }
-        };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [isOpen, onClose]);
-    // Two-phase OPEN/CLOSE class toggle (lets CSS transitions kick in reliably)
-    useEffect(() => {
-        if (!shouldRender)
-            return;
-        if (!isOpen) {
-            setIsActive(false);
-            return;
-        }
-        const raf = requestAnimationFrame(() => setIsActive(true));
-        return () => cancelAnimationFrame(raf);
-    }, [isOpen, shouldRender]);
-    // When closing: wait for transform transition end to unmount.
-    useEffect(() => {
-        if (!shouldRender)
-            return;
-        const el = panelRef.current;
-        if (!el)
-            return;
-        const onTransitionEnd = (e) => {
-            if (e.target !== el)
-                return;
-            if (e.propertyName !== 'transform')
-                return;
-            if (!isOpen)
-                setShouldRender(false);
-        };
-        el.addEventListener('transitionend', onTransitionEnd);
-        return () => el.removeEventListener('transitionend', onTransitionEnd);
-    }, [isOpen, shouldRender]);
-    if (!mounted)
-        return null;
-    if (!shouldRender)
-        return null;
-    const hasDetails = Boolean(details);
-    return createPortal(_jsxs(_Fragment, { children: [showBackdrop && (_jsx("div", { className: `${styles.backdrop} ${isActive ? styles.backdropOpen : ''}`, onClick: e => {
-                    e.stopPropagation();
-                    onClose(e);
-                } })), _jsxs("div", { ref: panelRef, ...props, className: `${styles.sidePanel} ${isActive ? styles.open : ''} ${hasDetails ? styles.withDetails : styles.noDetails}`, style: {
-                    '--side-panel-width': width,
-                    '--details-width': detailsWidth,
-                    '--panel-dur': MOTION_MS.panelSlide + 'ms',
-                }, "data-cy": "details-panel", role: "dialog", "aria-modal": "true", children: [hasDetails ? (_jsxs("aside", { className: styles.detailsCol, "data-cy": "details-panel-details", children: [_jsxs("div", { className: styles.detailsHeader, children: [_jsx("div", { className: styles.detailsTitle, children: detailsHeader }), _jsxs("div", { className: styles.detailsHeaderActions, children: [detailsHeaderAddition, onCloseDetails ? (_jsx(Button, { type: "button", size: "sm", variant: "outlined", onClick: e => {
-                                                    e.stopPropagation();
-                                                    onCloseDetails();
-                                                }, children: "Luk" })) : null] })] }), _jsx("div", { className: styles.detailsContent, children: details })] })) : null, _jsxs("section", { className: styles.mainCol, "data-cy": "details-panel-main", children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: "dbc-flex dbc-justify-between", children: [_jsx(Headline, { size: 3, disableMargin: true, severity: severity, marker: showHeaderMarker, subheader: subheader, children: header }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xs", children: [headerAddition, _jsx(Button, { type: "button", size: "md", shape: "round", variant: "inline", onClick: e => {
-                                                        e.stopPropagation();
-                                                        onClose(e);
-                                                    }, "aria-label": "Luk panel", "data-cy": "side-panel-close-button", children: _jsx(X, {}) })] })] }) }), _jsx("div", { className: styles.content, "data-cy": "details-panel-content", children: children }), actions && _jsx("div", { className: styles.actions, children: actions })] })] })] }), document.body);
-}

package/dist/components/overlay/side-panel/SidePanel.module.css

@@ -1,177 +0,0 @@
-.sidePanel {
-  --col-pad: var(--spacing-md);
-
-  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1); /* smooth spring-ish without overshoot */
-
-  /* Shadow + edge */
-  --shadow-opacity: 0.22;
-  --edge-opacity: 0.12;
-
-  box-sizing: border-box;
-  padding: 0;
-  height: 100vh;
-
-  position: fixed;
-  right: 0;
-  top: 0;
-
-  background-color: var(--color-bg-surface);
-  z-index: var(--z-drawer);
-
-  transform: translate3d(100%, 0, 0);
-  transition: transform var(--panel-dur) var(--panel-ease);
-  will-change: transform;
-
-  display: grid;
-  gap: var(--spacing-md);
-  align-items: stretch;
-
-  overflow: hidden;
-  pointer-events: auto;
-
-  /* Make pseudo-elements layer properly */
-  isolation: isolate;
-}
-
-/* “Lift” layer: drop-shadow + edge highlight (both fade in) */
-.sidePanel::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: -1; /* behind content but within isolated stacking context */
-
-  /* 1) drop-shadow = smoother than animating box-shadow
-     2) edge gradient = premium depth cue */
-  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, var(--shadow-opacity)));
-  opacity: 0;
-
-  /* Edge highlight from the left edge (panel’s leading edge) */
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, var(--edge-opacity)),
-    rgba(255, 255, 255, 0) 36%
-  );
-
-  transition: opacity var(--panel-dur) var(--panel-ease);
-
-  will-change: opacity;
-}
-
-/* Optional: super subtle “sheen” right as it settles (feels snappy) */
-.sidePanel.open::before {
-  opacity: 1;
-}
-
-.sidePanel.open {
-  transform: translate3d(0, 0, 0);
-}
-
-/* MAIN TRACK WIDTH = content + padding*2 */
-.sidePanel.noDetails {
-  grid-template-columns: calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2));
-  width: calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2));
-}
-
-/* when details show, main track stays the same; panel grows */
-.sidePanel.withDetails {
-  grid-template-columns:
-    calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2))
-    calc(var(--details-width, 420px) + (var(--col-pad) * 2));
-
-  width: calc(
-    (var(--side-panel-width, 400px) + (var(--col-pad) * 2)) +
-      (var(--details-width, 420px) + (var(--col-pad) * 2)) + var(--spacing-md)
-  );
-}
-
-/* columns get the padding */
-.mainCol,
-.detailsCol {
-  box-sizing: border-box;
-  padding: 0 var(--col-pad);
-
-  min-width: 0;
-  min-height: 0;
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-}
-
-.header {
-  padding: var(--spacing-md) 0;
-}
-
-.content {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  font-size: var(--font-size-sm);
-}
-
-.actions {
-  padding: var(--spacing-md) 0;
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--spacing-sm);
-  min-width: 0;
-}
-
-/* details styling */
-.detailsCol {
-  border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  background: var(--color-bg-surface);
-}
-
-.detailsHeader {
-  padding: var(--spacing-sm) 0;
-  border-bottom: 1px solid var(--color-border-subtle);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-sm);
-}
-
-.detailsTitle {
-  font-weight: 600;
-}
-
-.detailsHeaderActions {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.detailsContent {
-  padding: var(--spacing-md) 0;
-  overflow: auto;
-  min-height: 0;
-  flex: 1 1 auto;
-}
-
-/* Backdrop with a nice fade */
-.backdrop {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.45);
-  z-index: var(--z-backdrop-drawer);
-
-  opacity: 0;
-  transition: opacity var(--panel-dur) var(--panel-ease);
-  will-change: opacity;
-}
-
-.backdropOpen {
-  opacity: 1;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .sidePanel,
-  .sidePanel::before,
-  .backdrop {
-    transition: none !important;
-  }
-}

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

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

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

@@ -1,17 +0,0 @@
-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 }) }));
-}