@dbcdk/react-components 0.0.96 → 0.0.98

package/dist/components/segmented-progress-bar/SegmentedProgressBar.module.css

@@ -1,167 +0,0 @@
-.container {
-  width: 100%;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-}
-
-.progressBar {
-  --progress-radius: 10px;
-  --progress-separator: color-mix(in srgb, var(--color-border-subtle) 55%, transparent);
-
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  display: flex;
-  align-items: stretch;
-  overflow: hidden;
-
-  border-radius: var(--progress-radius);
-  background: var(--color-bg-surface-subtle);
-  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
-}
-
-.progressBar[data-rounded='false'] {
-  border-radius: 0;
-}
-
-.segmentsContainer {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-}
-
-.segmentWrapper {
-  display: flex;
-  height: 100%;
-  min-width: 2px;
-  min-height: 0;
-}
-
-.progressSegment {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background: var(--segment-color, var(--color-bg-surface-strong));
-}
-
-/* Subtle separators between segments */
-.segmentWrapper + .segmentWrapper .progressSegment::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block: 2px;
-  width: 1px;
-  background: var(--progress-separator);
-  pointer-events: none;
-}
-
-/* =====================================
-   Custom progress semantics (quiet)
-   ===================================== */
-
-.progressSegment[data-severity='done'] {
-  background: color-mix(in srgb, var(--color-fg-default) 25%, var(--color-bg-surface));
-}
-
-.progressSegment[data-severity='progress'] {
-  background: color-mix(in srgb, var(--color-fg-subtle) 5%, var(--color-bg-surface));
-}
-
-.progressSegment[data-severity='missing'] {
-  background: color-mix(in srgb, var(--color-fg-subtle) 2.5%, var(--color-bg-surface));
-}
-
-.progressSegment[data-severity='neutral'] {
-  background: var(--color-bg-surface-strong);
-}
-
-/* =====================================
-   Existing semantic severities
-   Keep these semantic and more colorful
-   for consumers who want that behavior
-   ===================================== */
-
-.progressSegment[data-severity='success'] {
-  background: color-mix(in srgb, var(--color-status-success) 50%, var(--color-bg-surface));
-}
-
-.progressSegment[data-severity='info'] {
-  background: color-mix(in srgb, var(--color-status-info) 50%, var(--color-bg-surface));
-}
-
-.progressSegment[data-severity='warning'] {
-  background: color-mix(in srgb, var(--color-status-warning) 50%, var(--color-bg-surface));
-}
-
-.progressSegment[data-severity='error'] {
-  background: color-mix(in srgb, var(--color-status-error) 50%, var(--color-bg-surface));
-}
-
-/* Label overlay */
-.progressCenter {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-inline: 8px;
-  pointer-events: none;
-}
-
-.progressCenterLabel {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  max-width: calc(100% - 8px);
-  color: var(--color-fg-default);
-  font-size: var(--font-size-xs);
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-  letter-spacing: 0.01em;
-  line-height: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  text-shadow: none;
-}
-
-.emptySegments .progressCenterLabel {
-  color: var(--color-fg-subtle);
-}
-
-/* Rounded ends only on the outer edges */
-.segmentWrapper:first-child .progressSegment {
-  border-top-left-radius: var(--progress-radius);
-  border-bottom-left-radius: var(--progress-radius);
-}
-
-.segmentWrapper:last-child .progressSegment {
-  border-top-right-radius: var(--progress-radius);
-  border-bottom-right-radius: var(--progress-radius);
-}
-
-.progressBar[data-rounded='false'] .segmentWrapper:first-child .progressSegment,
-.progressBar[data-rounded='false'] .segmentWrapper:last-child .progressSegment {
-  border-radius: 0;
-}
-
-.progressBar,
-.progressSegment,
-.progressCenterLabel {
-  transition:
-    background-color 140ms ease,
-    color 140ms ease,
-    box-shadow 140ms ease;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .progressBar,
-  .progressSegment,
-  .progressCenterLabel {
-    transition: none;
-  }
-}

package/dist/components/sidebar/Sidebar.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SidebarContainer } from './components/sidebar-container/SidebarContainer';
-import { SidebarProvider } from './providers/SidebarProvider';
-export function Sidebar({ items, productLogo, activeLink, version, hideSearch, searchPlaceholder, showSettings, footer, resizable, defaultWidth, minWidth, storageKey, }) {
-    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink, version: version, hideSearch: hideSearch, searchPlaceholder: searchPlaceholder, showSettings: showSettings, footer: footer, resizable: resizable, defaultWidth: defaultWidth, minWidth: minWidth, storageKey: storageKey }) }));
-}

package/dist/components/sidebar/components/SidebarItem.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SidebarItemContent } from './sidebar-item-content/SidebarItemContent';
-export function SidebarItem({ component: Component, label, icon, href, iconWidth, truncateLabel, }) {
-    if (!Component) {
-        return null;
-    }
-    return (_jsx(Component, { children: _jsx(SidebarItemContent, { icon: icon, iconWidth: iconWidth, label: label, href: href, truncateLabel: truncateLabel }) }));
-}

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -1,63 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import styles from './ExpandableSidebarItem.module.css';
-import { Button } from '../../../button/Button';
-import { useSidebar } from '../../providers/SidebarProvider';
-import { ExpandableSidebarItem as ExpandableChild } from '../expandable-sidebar-item/ExpandableSidebarItem';
-import { SidebarItemContent } from '../sidebar-item-content/SidebarItemContent';
-import { SidebarItem } from '../SidebarItem';
-const isGroup = (item) => item.type === 'group';
-const isExpandable = (item) => item.type === 'expandable';
-export function ExpandableSidebarItem({ items, label, icon, component: Component, href, iconWidth, truncateLabel, }) {
-    const { defaultExpanded, resetExpandAll, isSidebarCollapsed, handleSidebarCollapseChange, expandItem, collapseItem, isExpanded, } = useSidebar();
-    // Local-only state for animation coordination
-    const [closing, setClosing] = useState(false);
-    const ready = true;
-    // Single source of truth: expanded comes from provider state
-    const expanded = useMemo(() => isExpanded(href), [href, isExpanded]);
-    // Expand-all behavior (e.g. search)
-    useEffect(() => {
-        if (defaultExpanded === null)
-            return;
-        if (defaultExpanded)
-            expandItem(href);
-        else
-            collapseItem(href);
-    }, [defaultExpanded, expandItem, collapseItem, href]);
-    const handleAnimationEnd = useCallback(() => {
-        if (!ready)
-            return;
-        if (closing) {
-            // After collapse animation, commit closed state
-            collapseItem(href);
-            setClosing(false);
-        }
-    }, [closing, ready, collapseItem, href]);
-    const toggleAccordion = useCallback((e, onlyExpand = false) => {
-        e === null || e === void 0 ? void 0 : e.preventDefault();
-        e === null || e === void 0 ? void 0 : e.stopPropagation();
-        resetExpandAll();
-        handleSidebarCollapseChange(false);
-        if (!expanded) {
-            expandItem(href);
-            return;
-        }
-        if (!isSidebarCollapsed && !onlyExpand) {
-            // Start collapse animation; state commit happens onAnimationEnd
-            setClosing(true);
-        }
-    }, [expanded, expandItem, href, handleSidebarCollapseChange, isSidebarCollapsed, resetExpandAll]);
-    const renderNavItem = (item, key) => {
-        var _a, _b;
-        if (isGroup(item)) {
-            return (_jsxs("div", { className: styles.group, children: [_jsx("div", { className: styles.groupLabel, children: item.label }), (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child, idx) => renderNavItem(child, `${key}-${idx}`))] }, key));
-        }
-        if (isExpandable(item)) {
-            return (_jsx(ExpandableChild, { items: (_b = item.children) !== null && _b !== void 0 ? _b : [], label: item.label, icon: item.icon, href: item.href, iconWidth: item.iconWidth, component: item.component }, key));
-        }
-        return (_jsx(SidebarItem, { component: item.component, label: item.label, icon: item.icon, href: item.href, iconWidth: item.iconWidth, truncateLabel: item.truncateLabel }, key));
-    };
-    return (_jsxs("div", { className: `${styles.container}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { headerStyle: expanded, icon: icon, iconWidth: iconWidth, label: label, href: href, disableActiveStyles: expanded, truncateLabel: truncateLabel, suffixIcon: isSidebarCollapsed ? null : (_jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: _jsx(ChevronDown, { className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ''}` }) })) }) }), expanded && !isSidebarCollapsed && (_jsx("div", { onAnimationEnd: handleAnimationEnd, className: `${styles.childrenContainer} ${closing ? 'animate--collapse' : ''} ${expanded ? 'animate--expand' : 'visually-hidden'}`, children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`)) }))] }));
-}

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.module.css

@@ -1,29 +0,0 @@
-.container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--border-radius-default);
-}
-
-.container button {
-  color: var(--color-text);
-  min-block-size: 20px !important;
-  min-inline-size: 20px !important;
-  max-block-size: 20px !important;
-  max-inline-size: 20px !important;
-  &:hover {
-    background-color: var(--color-bg-contextual-subtle) !important;
-  }
-}
-
-.childrenContainer {
-  overflow: hidden;
-}
-
-.chevron {
-  transition: transform 0.3s ease;
-}
-
-.chevronExpanded {
-  transform: rotate(180deg);
-}

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js

@@ -1,153 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronLeft } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Logo } from '../../../../assets/logo';
-import { Button } from '../../../../components/button/Button';
-import { SidebarItems } from '../../../../components/sidebar/components/sidebar-items/SidebarItems';
-import SidenavFiltering from '../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering';
-import { useSidebar } from '../../../../components/sidebar/providers/SidebarProvider';
-import styles from './SidebarContainer.module.css';
-function clamp(n, min, max) {
-    return Math.max(min, Math.min(max, n));
-}
-function readStoredWidth(key) {
-    try {
-        const raw = localStorage.getItem(key);
-        if (!raw)
-            return null;
-        const num = Number(raw);
-        return Number.isFinite(num) ? num : null;
-    }
-    catch {
-        return null;
-    }
-}
-function writeStoredWidth(key, value) {
-    try {
-        localStorage.setItem(key, String(Math.round(value)));
-    }
-    catch {
-        // ignore
-    }
-}
-function removeStoredWidth(key) {
-    try {
-        localStorage.removeItem(key);
-    }
-    catch {
-        // ignore
-    }
-}
-export function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, searchPlaceholder = 'Filtrer menu', showSettings = false, footer, resizable, defaultWidth = 240, minWidth = 160, storageKey, }) {
-    const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
-    // Always start from defaultWidth so server and client render identical HTML.
-    // localStorage is read in a useEffect after hydration to avoid SSR mismatch.
-    const [sidebarWidth, setSidebarWidth] = useState(defaultWidth);
-    const [manualWidth, setManualWidth] = useState(null);
-    const [isResizing, setIsResizing] = useState(false);
-    const [ariaMaxWidth, setAriaMaxWidth] = useState(undefined);
-    const containerRef = useRef(null);
-    const draggingRef = useRef(false);
-    const pointerIdRef = useRef(null);
-    const startXRef = useRef(0);
-    const startWidthRef = useRef(0);
-    const maxWidthRef = useRef(Infinity);
-    // Use the viewport width as the ceiling — avoids the circular-dependency
-    // that occurs when the sidebar lives in an `auto`-width grid column whose
-    // size is determined by the sidebar itself (e.g. PageLayout vertical).
-    const getMaxWidth = useCallback(() => {
-        const viewportWidth = typeof window !== 'undefined'
-            ? window.innerWidth || document.documentElement.clientWidth
-            : Infinity;
-        return Math.max(minWidth, viewportWidth - minWidth);
-    }, [minWidth]);
-    // Read stored width after hydration — never during render to avoid SSR mismatch.
-    useEffect(() => {
-        if (!storageKey)
-            return;
-        const stored = readStoredWidth(storageKey);
-        if (stored === null)
-            return;
-        setManualWidth(stored);
-        setSidebarWidth(stored);
-    }, [storageKey]);
-    useEffect(() => {
-        if (!storageKey)
-            return;
-        if (manualWidth === null) {
-            removeStoredWidth(storageKey);
-            return;
-        }
-        writeStoredWidth(storageKey, manualWidth);
-    }, [manualWidth, storageKey]);
-    useEffect(() => {
-        setAriaMaxWidth(getMaxWidth());
-    }, [getMaxWidth]);
-    useEffect(() => {
-        return () => {
-            document.body.style.cursor = '';
-            document.body.style.userSelect = '';
-        };
-    }, []);
-    const updateWidth = useCallback((nextWidth) => {
-        setManualWidth(nextWidth);
-        setSidebarWidth(nextWidth);
-    }, []);
-    const onResizePointerDown = useCallback((e) => {
-        const maxWidth = getMaxWidth();
-        if (maxWidth === null)
-            return;
-        e.currentTarget.setPointerCapture(e.pointerId);
-        maxWidthRef.current = maxWidth;
-        draggingRef.current = true;
-        pointerIdRef.current = e.pointerId;
-        startXRef.current = e.clientX;
-        startWidthRef.current = sidebarWidth;
-        setIsResizing(true);
-        document.body.style.userSelect = 'none';
-        document.body.style.cursor = 'col-resize';
-    }, [getMaxWidth, sidebarWidth]);
-    const onResizePointerMove = useCallback((e) => {
-        if (!draggingRef.current)
-            return;
-        if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current)
-            return;
-        const next = startWidthRef.current + (e.clientX - startXRef.current);
-        updateWidth(clamp(next, minWidth, maxWidthRef.current));
-    }, [minWidth, updateWidth]);
-    const endResizeDrag = useCallback(() => {
-        if (!draggingRef.current)
-            return;
-        draggingRef.current = false;
-        pointerIdRef.current = null;
-        setIsResizing(false);
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
-    }, []);
-    const resetWidth = useCallback(() => {
-        setManualWidth(null);
-        setSidebarWidth(clamp(defaultWidth, minWidth, getMaxWidth()));
-    }, [defaultWidth, getMaxWidth, minWidth]);
-    const onKeyDown = useCallback((e) => {
-        const maxWidth = getMaxWidth();
-        const step = e.shiftKey ? 32 : 8;
-        let next = null;
-        if (e.key === 'ArrowLeft')
-            next = sidebarWidth - step;
-        if (e.key === 'ArrowRight')
-            next = sidebarWidth + step;
-        if (e.key === 'Home')
-            next = minWidth;
-        if (e.key === 'End')
-            next = maxWidth;
-        if (next === null)
-            return;
-        e.preventDefault();
-        updateWidth(clamp(next, minWidth, maxWidth));
-    }, [getMaxWidth, minWidth, sidebarWidth, updateWidth]);
-    const containerStyle = useMemo(() => ({
-        '--sidebar-width': `${sidebarWidth}px`,
-    }), [sidebarWidth]);
-    return (_jsxs("div", { ref: containerRef, role: "complementary", className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''} ${isResizing ? styles.resizing : ''}`, style: containerStyle, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: styles.productHeader, children: [_jsx("div", { className: styles.productLogo, children: productLogo }), _jsx(Button, { size: "md", variant: "inline", shape: "round", "aria-label": "Collapse sidebar", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) })] }) }), _jsxs("div", { className: styles.content, children: [!hideSearch && (_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, { placeholder: searchPlaceholder, showSettings: showSettings }) })), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), footer && _jsx("div", { className: styles.footerSlot, children: footer }), _jsxs("div", { className: styles.footer, children: [_jsx("div", { className: styles.companyLogo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) }), version && _jsx("div", { className: `${styles.version} dbc-muted-text dbc-sm-text`, children: version })] }), resizable && (_jsx("div", { className: styles.resizeHandle, role: "separator", "aria-label": "Resize sidebar", "aria-orientation": "vertical", "aria-valuemin": Math.round(minWidth), "aria-valuemax": ariaMaxWidth !== undefined ? Math.round(ariaMaxWidth) : undefined, "aria-valuenow": Math.round(sidebarWidth), tabIndex: isSidebarCollapsed ? -1 : 0, onPointerDown: onResizePointerDown, onPointerMove: onResizePointerMove, onPointerUp: endResizeDrag, onPointerCancel: endResizeDrag, onDoubleClick: resetWidth, onKeyDown: onKeyDown }))] }));
-}

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -1,260 +0,0 @@
-.container {
-  position: relative;
-  flex-shrink: 1;
-  height: 100%;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  width: var(--sidebar-width);
-  inline-size: var(--sidebar-width);
-  box-sizing: border-box;
-  border-inline-end: var(--border-width-thin) solid var(--color-border-default);
-  transition:
-    width var(--transition-fast) var(--ease-standard),
-    inline-size var(--transition-fast) var(--ease-standard);
-}
-
-.container.resizing {
-  transition: none;
-}
-
-/* Collapsed state */
-.container.collapsed {
-  width: var(--component-size-lg);
-  inline-size: var(--component-size-lg);
-  box-sizing: content-box;
-  gap: var(--spacing-sm);
-}
-
-/* Global links / focus */
-.container a {
-  text-decoration: none;
-  color: inherit;
-}
-
-.container a:focus-visible,
-.container button:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-/* HEADER (product + collapse) */
-.header {
-  flex: 0 0 auto;
-  box-sizing: border-box;
-  box-shadow: 0 1px 0 var(--color-border-default);
-  padding-inline: var(--spacing-xs);
-  min-block-size: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.productHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-sm);
-  flex-grow: 1;
-}
-
-/* Product logo container */
-.productLogo {
-  display: flex;
-  align-items: center;
-  max-inline-size: 100%;
-  block-size: 25px;
-  min-width: 0;
-}
-
-/* Let wrapper elements such as Next.js <Link> inherit the logo sizing context */
-.productLogo > * {
-  display: flex;
-  align-items: center;
-  max-inline-size: 100%;
-  block-size: 100%;
-  min-inline-size: 0;
-}
-
-/* Keep product logo visible in expanded state even when wrapped */
-.productLogo :is(img, svg) {
-  display: block;
-  block-size: 100%;
-  inline-size: auto;
-  max-inline-size: 100%;
-}
-
-/* Collapse button */
-.productHeader button {
-  flex: 0 0 auto;
-}
-
-/* Rotate icon when collapsed */
-.collapsedIcon {
-  transform: rotate(180deg);
-  transition: transform 0.3s ease;
-}
-
-/* CONTENT */
-.content {
-  overflow: auto;
-  flex: 1 1 auto;
-  overflow-y: visible;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  gap: 5px;
-}
-
-.container:not(.collapsed) .content {
-  gap: var(--spacing-md);
-}
-
-/* FILTER */
-.filter button {
-  border-radius: 0;
-  min-height: var(--component-size-md);
-  width: 100%;
-  padding: var(--spacing-xs);
-  color: var(--color-fg-muted);
-}
-
-.container:not(.collapsed) .filter {
-  padding-inline: var(--spacing-xs);
-}
-
-/* LINKS */
-.links {
-  overflow: auto;
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  gap: 2px;
-  font-size: var(--font-size-sm);
-}
-
-.container:not(.collapsed) .links {
-  padding-inline: var(--spacing-xs);
-}
-
-.container .links button {
-  background: none;
-  border: 0;
-  font-size: inherit;
-  color: inherit;
-  display: inline-flex;
-  padding: 0;
-}
-
-/* RESIZE HANDLE */
-.resizeHandle {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 8px;
-  cursor: col-resize;
-  z-index: 1;
-  user-select: none;
-  touch-action: none;
-  outline: none;
-}
-
-.resizeHandle::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: var(--border-width-thin);
-  background-color: var(--color-border-subtle);
-  opacity: 0;
-  transition:
-    opacity var(--transition-fast) var(--ease-standard),
-    background-color var(--transition-fast) var(--ease-standard);
-}
-
-.resizeHandle:hover::after,
-.resizeHandle:active::after {
-  opacity: 1;
-  background-color: var(--color-border-strong);
-}
-
-.resizeHandle:active::after {
-  background-color: var(--color-brand);
-}
-
-.resizeHandle:focus-visible {
-  box-shadow: var(--focus-ring);
-}
-
-.container.collapsed .resizeHandle {
-  display: none;
-}
-
-/* CUSTOM FOOTER SLOT */
-.footerSlot {
-  flex: 0 0 auto;
-}
-
-.container:not(.collapsed) .footerSlot {
-  padding-inline: var(--spacing-xs);
-}
-
-/* FOOTER (company logo) */
-.footer {
-  flex: 0 0 auto;
-  border-top: 1px solid var(--color-border-default);
-  padding: var(--spacing-sm);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.companyLogo {
-  opacity: 0.6;
-}
-
-.companyLogo svg {
-  width: 80px;
-  height: auto;
-  display: block;
-}
-
-/* Hide company logo in collapsed state */
-.container.collapsed .companyLogo {
-  display: none;
-}
-
-.version {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-.logo {
-  display: none;
-}
-
-/* === Collapsed header behavior ===
-   Hide product logo entirely so the collapse button can truly center. */
-.container.collapsed .productLogo {
-  display: none;
-}
-
-/* Center the collapse button in collapsed state */
-.container.collapsed .productHeader {
-  justify-content: center;
-  gap: 0;
-}
-
-.container.collapsed .header {
-  padding: 0;
-}
-
-.container.collapsed .productHeader button {
-  margin-inline: auto;
-}