@neasg/design-system 0.4.11 → 0.4.13

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, } from "./avatar";
 export type { AvatarProps, AvatarSize, AvatarProfileProps, AvatarRootProps, } from "./avatar";
+export { AvatarProfilePopover, AvatarProfilePopoverContent, AvatarProfilePopoverHeader, AvatarProfilePopoverSection, AvatarProfilePopoverFooter, AvatarProfilePopoverFooterAction, } from "./avatar-profile-popover";
+export type { AvatarProfilePopoverProps, AvatarProfilePopoverContentProps, AvatarProfilePopoverHeaderProps, AvatarProfilePopoverSectionProps, AvatarProfilePopoverFooterProps, AvatarProfilePopoverFooterActionProps, } from "./avatar-profile-popover";
 export * from "./animated-icons";
 export { Alert, AlertAction, AlertConsent, alertVariants } from "./alert";
 export type { AlertActionProps, AlertConsentProps, AlertProps } from "./alert";
@@ -63,7 +65,7 @@ export type { LinkProps } from "./link";
 export { Dialog } from "./dialog";
 export type { DialogAction, DialogProps } from "./dialog";
 export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, } from "./command";
-export { CommandSearch, type CommandSearchFilter, type CommandSearchItem, type CommandSearchProps, type CommandSearchSection, type CommandSearchShowAllResultsLabel, } from "./command-search";
+export { CommandSearch, type CommandSearchFilter, type CommandSearchFilterSelectDetails, type CommandSearchItem, type CommandSearchItemDetail, type CommandSearchProps, type CommandSearchSection, type CommandSearchSectionAction, type CommandSearchShowAllResultsLabel, type CommandSearchShortcutPlatform, } from "./command-search";
 export { FileUpload } from "./file-upload";
 export type { FileUploadProps } from "./file-upload";
 export { FileUploadStatusToast, showFileUploadStatusToast, } from "./file-upload-status-toast";
@@ -90,8 +92,12 @@ export { SectionNav } from "./section-nav";
 export type { SectionNavItem, SectionNavProps } from "./section-nav";
 export { GovtMasthead } from "./govt-masthead";
 export type { GovtMastheadProps } from "./govt-masthead";
+export { GuidanceTip } from "./guidance-tip";
+export type { GuidanceTipAction, GuidanceTipProps } from "./guidance-tip";
 export { SearchHighlight, useSearchHighlight, } from "./use-search-highlight";
 export type { SearchHighlightProps, SearchHighlightSegment, } from "./use-search-highlight";
+export { clearJumpTargetHighlights, highlightJumpTarget, jumpTargetHighlightAttribute, jumpTargetHighlightClassName, jumpTargetHighlightDurationMs, jumpTargetHighlightIterations, jumpTargetHighlightSelector, } from "./jump-target-highlight";
+export type { HighlightJumpTargetOptions, JumpTargetHighlightRoot, } from "./jump-target-highlight";
 export { useErrorShake } from "./use-error-shake";
 export type { UseErrorShakeOptions } from "./use-error-shake";
 export { useStickySentinel } from "./use-sticky-sentinel";
@@ -100,19 +106,22 @@ export { useViewportThreshold } from "./use-viewport-threshold";
 export type { UseViewportThresholdOptions, UseViewportThresholdReturn, } from "./use-viewport-threshold";
 export { Textarea } from "./textarea";
 export type { TextareaProps } from "./textarea";
-export { DraggableTabs, type DraggableTabBadge, type DraggableTabItem, type DraggableTabsProps, } from "./draggable-tabs";
+export { DraggableTabs, type DraggableTabBadge, type DraggableTabGuidance, type DraggableTabItem, type DraggableTabsProps, } from "./draggable-tabs";
 export { Drawer, } from "./drawer";
 export type { DrawerAction, DrawerProps, DrawerSide } from "./drawer";
-export { DashboardContent, DashboardLayout, DashboardRightPanel, DashboardRightPanelBody, DashboardRightPanelHeader, DashboardRightPanelSection, DashboardRightPanelTabs, DashboardSidebar, DashboardSidebarProfile, SidebarProvider, useSidebar, } from "./layout";
-export type { DashboardContentProps, DashboardLayoutProps, DashboardRightPanelBodyProps, DashboardRightPanelHeaderProps, DashboardRightPanelMode, DashboardRightPanelProps, DashboardRightPanelSectionProps, DashboardRightPanelTabsProps, DashboardSidebarNavDropdownItem, DashboardSidebarNavGroup, DashboardSidebarNavItem, DashboardSidebarNavLinkItem, DashboardSidebarProfileProps, } from "./layout";
+export { DashboardContent, DashboardLayout, DashboardRightPanel, DashboardRightPanelBody, DashboardRightPanelHeader, DashboardRightPanelSection, DashboardRightPanelTabs, DashboardSidebar, DashboardSidebarProfile, DashboardSidebarProfilePopover, SidebarProvider, useSidebar, } from "./layout";
+export type { DashboardContentProps, DashboardLayoutProps, DashboardRightPanelBodyProps, DashboardRightPanelHeaderProps, DashboardRightPanelMode, DashboardRightPanelProps, DashboardRightPanelSectionProps, DashboardRightPanelTabsProps, DashboardSidebarNavDropdownItem, DashboardSidebarNavGroup, DashboardSidebarNavItem, DashboardSidebarNavLinkItem, DashboardSidebarProfileProps, DashboardSidebarProfilePopoverProps, } from "./layout";
 export { PageHeader } from "./page-header";
+export { PageLayout, PageLayoutContext, PageLayoutControls, PageLayoutHeader, PageLayoutSection, PageLayoutStack, PageLayoutTitle, pageLayoutGapClassNames, pageLayoutStackGapClassNames, } from "./page-layout";
+export type { PageLayoutGap, PageLayoutProps, PageLayoutStackGap, PageLayoutStackProps, PageLayoutTitleProps, } from "./page-layout";
 export { WorkspaceHeader } from "./workspace-header";
 export type { WorkspaceHeaderProps } from "./workspace-header";
 export { PageSection, PageSectionGroup } from "./page-section";
 export type { PageSectionGroupProps, PageSectionProps } from "./page-section";
 export { Typography, typographyVariants } from "./typography";
 export type { TypographyProps } from "./typography";
-export { neaPalette, semanticColorTokens, typographyTokens, radiusTokens, spacingTokens, layoutTokens, } from "./theme";
+export { darkThemeTokenMapping, neaDarkNeutralPalette, neaDarkNeutralTokenMapping, neaPalette, neaPaletteDarkTokenMapping, semanticColorTokens, typographyTokens, radiusTokens, spacingTokens, layoutTokens, } from "./theme";
+export type { CssTokenMapping, SemanticColorToken } from "./theme";
 export { neaDesignSystemContent, neaTailwindPreset, } from "./tailwind-preset";
 export { Pagination } from "./pagination";
 export type { PaginationProps } from "./pagination";
@@ -123,7 +132,7 @@ export type { TableColumnVisibilityMenuProps } from "./table-column-visibility";
 export { useTableSort } from "./use-table-sort";
 export type { UseTableSortOptions, UseTableSortReturn, } from "./use-table-sort";
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
-export type { TableColumn, TableProps, TableRowTone, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
+export type { TableColumn, TableColumnWidths, TableProps, TableRowTone, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
 export { Tabs, TabsRoot, TabWithDropdown, type TabsItem, type TabsItemLabel, type TabsItemLabelProps, type TabsProps, TabsList, TabsTrigger, TabsContent, type TabWithDropdownProps, useTabsContext, type TabDropdownSection, } from "./tabs";
 export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, type TooltipProps, } from "./tooltip";
 export { Toaster, toast } from "./toaster";

package/dist/index.js

@@ -1,4 +1,5 @@
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, } from "./avatar";
+export { AvatarProfilePopover, AvatarProfilePopoverContent, AvatarProfilePopoverHeader, AvatarProfilePopoverSection, AvatarProfilePopoverFooter, AvatarProfilePopoverFooterAction, } from "./avatar-profile-popover";
 export * from "./animated-icons";
 export { Alert, AlertAction, AlertConsent, alertVariants } from "./alert";
 export { Badge, badgeVariants } from "./badge";
@@ -46,19 +47,22 @@ export { PopoverMenuContent, PopoverMenuCheckboxItem, PopoverMenuHeader, Popover
 export { SearchInput } from "./search-input";
 export { SectionNav } from "./section-nav";
 export { GovtMasthead } from "./govt-masthead";
+export { GuidanceTip } from "./guidance-tip";
 export { SearchHighlight, useSearchHighlight, } from "./use-search-highlight";
+export { clearJumpTargetHighlights, highlightJumpTarget, jumpTargetHighlightAttribute, jumpTargetHighlightClassName, jumpTargetHighlightDurationMs, jumpTargetHighlightIterations, jumpTargetHighlightSelector, } from "./jump-target-highlight";
 export { useErrorShake } from "./use-error-shake";
 export { useStickySentinel } from "./use-sticky-sentinel";
 export { useViewportThreshold } from "./use-viewport-threshold";
 export { Textarea } from "./textarea";
 export { DraggableTabs, } from "./draggable-tabs";
 export { Drawer, } from "./drawer";
-export { DashboardContent, DashboardLayout, DashboardRightPanel, DashboardRightPanelBody, DashboardRightPanelHeader, DashboardRightPanelSection, DashboardRightPanelTabs, DashboardSidebar, DashboardSidebarProfile, SidebarProvider, useSidebar, } from "./layout";
+export { DashboardContent, DashboardLayout, DashboardRightPanel, DashboardRightPanelBody, DashboardRightPanelHeader, DashboardRightPanelSection, DashboardRightPanelTabs, DashboardSidebar, DashboardSidebarProfile, DashboardSidebarProfilePopover, SidebarProvider, useSidebar, } from "./layout";
 export { PageHeader } from "./page-header";
+export { PageLayout, PageLayoutContext, PageLayoutControls, PageLayoutHeader, PageLayoutSection, PageLayoutStack, PageLayoutTitle, pageLayoutGapClassNames, pageLayoutStackGapClassNames, } from "./page-layout";
 export { WorkspaceHeader } from "./workspace-header";
 export { PageSection, PageSectionGroup } from "./page-section";
 export { Typography, typographyVariants } from "./typography";
-export { neaPalette, semanticColorTokens, typographyTokens, radiusTokens, spacingTokens, layoutTokens, } from "./theme";
+export { darkThemeTokenMapping, neaDarkNeutralPalette, neaDarkNeutralTokenMapping, neaPalette, neaPaletteDarkTokenMapping, semanticColorTokens, typographyTokens, radiusTokens, spacingTokens, layoutTokens, } from "./theme";
 export { neaDesignSystemContent, neaTailwindPreset, } from "./tailwind-preset";
 export { Pagination } from "./pagination";
 export { TableToolbar } from "./table-toolbar";

package/dist/jump-target-highlight.d.ts

@@ -0,0 +1,13 @@
+export declare const jumpTargetHighlightAttribute = "data-jump-target-highlight";
+export declare const jumpTargetHighlightSelector = "[data-jump-target-highlight=\"true\"]";
+export declare const jumpTargetHighlightDurationMs = 420;
+export declare const jumpTargetHighlightIterations = 2;
+export declare const jumpTargetHighlightClassName = "transition-[background-color,box-shadow,border-color] duration-150 data-[jump-target-highlight=true]:border-ring/40 data-[jump-target-highlight=true]:bg-primary/5 data-[jump-target-highlight=true]:shadow-[0_0_0_2px_hsl(var(--ring)_/_0.16)] motion-reduce:transition-none";
+export type JumpTargetHighlightRoot = Document | DocumentFragment | Element;
+export interface HighlightJumpTargetOptions {
+    root?: JumpTargetHighlightRoot;
+    durationMs?: number;
+    iterations?: number;
+}
+export declare function clearJumpTargetHighlights(root?: JumpTargetHighlightRoot): void;
+export declare function highlightJumpTarget(target: HTMLElement | null | undefined, { root, durationMs, iterations, }?: HighlightJumpTargetOptions): () => void;

package/dist/jump-target-highlight.js

@@ -0,0 +1,95 @@
+export const jumpTargetHighlightAttribute = "data-jump-target-highlight";
+export const jumpTargetHighlightSelector = `[${jumpTargetHighlightAttribute}="true"]`;
+export const jumpTargetHighlightDurationMs = 420;
+export const jumpTargetHighlightIterations = 2;
+export const jumpTargetHighlightClassName = "transition-[background-color,box-shadow,border-color] duration-150 data-[jump-target-highlight=true]:border-ring/40 data-[jump-target-highlight=true]:bg-primary/5 data-[jump-target-highlight=true]:shadow-[0_0_0_2px_hsl(var(--ring)_/_0.16)] motion-reduce:transition-none";
+const jumpTargetHighlightIdDataKey = "jumpTargetHighlightId";
+const activeJumpTargetHighlights = new WeakMap();
+function getJumpTargetHighlightTotalMs(durationMs, iterations) {
+    return durationMs * iterations;
+}
+function prefersReducedMotion(ownerWindow) {
+    return (typeof ownerWindow.matchMedia === "function" &&
+        ownerWindow.matchMedia("(prefers-reduced-motion: reduce)").matches);
+}
+function clearJumpTargetElement(element) {
+    const activeHighlight = activeJumpTargetHighlights.get(element);
+    if (activeHighlight) {
+        activeJumpTargetHighlights.delete(element);
+        if (activeHighlight.timeoutId !== undefined) {
+            activeHighlight.ownerWindow.clearTimeout(activeHighlight.timeoutId);
+        }
+        if (activeHighlight.animation) {
+            activeHighlight.animation.onfinish = null;
+            activeHighlight.animation.oncancel = null;
+            activeHighlight.animation.cancel();
+        }
+    }
+    element.removeAttribute(jumpTargetHighlightAttribute);
+    delete element.dataset[jumpTargetHighlightIdDataKey];
+}
+export function clearJumpTargetHighlights(root) {
+    const highlightRoot = root !== null && root !== void 0 ? root : (typeof document === "undefined" ? undefined : document);
+    if (!highlightRoot) {
+        return;
+    }
+    highlightRoot
+        .querySelectorAll(jumpTargetHighlightSelector)
+        .forEach(clearJumpTargetElement);
+}
+export function highlightJumpTarget(target, { root, durationMs = jumpTargetHighlightDurationMs, iterations = jumpTargetHighlightIterations, } = {}) {
+    if (!target) {
+        return () => undefined;
+    }
+    const ownerWindow = target.ownerDocument.defaultView;
+    if (!ownerWindow) {
+        return () => undefined;
+    }
+    clearJumpTargetHighlights(root !== null && root !== void 0 ? root : target.ownerDocument);
+    const highlightId = `${Date.now()}`;
+    const clearHighlight = () => {
+        if (target.dataset[jumpTargetHighlightIdDataKey] !== highlightId) {
+            return;
+        }
+        clearJumpTargetElement(target);
+    };
+    target.dataset[jumpTargetHighlightIdDataKey] = highlightId;
+    target.setAttribute(jumpTargetHighlightAttribute, "true");
+    if (!prefersReducedMotion(ownerWindow) &&
+        typeof target.animate === "function") {
+        const animation = target.animate([
+            {
+                backgroundColor: "hsl(var(--primary) / 0.04)",
+                borderColor: "hsl(var(--ring) / 0.35)",
+                boxShadow: "0 0 0 2px hsl(var(--ring) / 0.12)",
+            },
+            {
+                backgroundColor: "hsl(var(--primary) / 0.12)",
+                borderColor: "hsl(var(--ring) / 0.6)",
+                boxShadow: "0 0 0 3px hsl(var(--ring) / 0.24)",
+            },
+            {
+                backgroundColor: "hsl(var(--primary) / 0.04)",
+                borderColor: "hsl(var(--ring) / 0.35)",
+                boxShadow: "0 0 0 2px hsl(var(--ring) / 0.12)",
+            },
+        ], {
+            duration: durationMs,
+            easing: "ease-in-out",
+            iterations,
+        });
+        activeJumpTargetHighlights.set(target, {
+            animation,
+            ownerWindow,
+        });
+        animation.onfinish = clearHighlight;
+        animation.oncancel = clearHighlight;
+        return clearHighlight;
+    }
+    const timeoutId = ownerWindow.setTimeout(clearHighlight, getJumpTargetHighlightTotalMs(durationMs, iterations));
+    activeJumpTargetHighlights.set(target, {
+        ownerWindow,
+        timeoutId,
+    });
+    return clearHighlight;
+}

package/dist/layout.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { type AvatarProfileProps } from "./avatar";
+import { type AvatarProfilePopoverProps } from "./avatar-profile-popover";
 import { type CountBadgeProps } from "./count-badge";
 import { type TabsProps } from "./tabs";
 export type DashboardRightPanelMode = "responsive" | "persistent";
@@ -32,6 +33,14 @@ export interface DashboardLayoutProps extends React.HTMLAttributes<HTMLDivElemen
     rightPanelMode?: DashboardRightPanelMode;
     /** Allows users to drag-resize a persistent right panel. */
     rightPanelResizable?: boolean;
+    /** Shows an edge control that collapses and reopens a persistent right panel. */
+    rightPanelCollapsible?: boolean;
+    /** Controlled collapsed state for a persistent right panel. */
+    rightPanelCollapsed?: boolean;
+    /** Initial collapsed state for an uncontrolled persistent right panel. */
+    defaultRightPanelCollapsed?: boolean;
+    /** Called when the persistent right panel collapse state changes. */
+    onRightPanelCollapsedChange?: (collapsed: boolean) => void;
     /** Initial persistent right panel width in pixels when resizing is enabled. */
     rightPanelDefaultWidth?: number;
     /** Minimum persistent right panel width in pixels when resizing is enabled. */
@@ -46,7 +55,7 @@ export interface DashboardLayoutProps extends React.HTMLAttributes<HTMLDivElemen
     /** Initial sidebar state on desktop before the user toggles it. */
     defaultSidebarCollapsed?: boolean;
 }
-declare function DashboardLayout({ className, masthead, prototypeBanner, sidebar, rightPanel, surfaceClassName, contentClassName, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode, rightPanelResizable, rightPanelDefaultWidth, rightPanelMinWidth, rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint, defaultSidebarCollapsed, children, style, ...props }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardLayout({ className, masthead, prototypeBanner, sidebar, rightPanel, surfaceClassName, contentClassName, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode, rightPanelResizable, rightPanelCollapsible, rightPanelCollapsed, defaultRightPanelCollapsed, onRightPanelCollapsedChange, rightPanelDefaultWidth, rightPanelMinWidth, rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint, defaultSidebarCollapsed, children, style, ...props }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
 export interface DashboardSidebarProps extends React.HTMLAttributes<HTMLElement> {
     logo?: React.ReactNode | ((context: {
         isCollapsed: boolean;
@@ -99,12 +108,21 @@ export interface DashboardSidebarNavGroup {
     label?: string;
     items: DashboardSidebarNavItem[];
 }
+type DashboardSidebarProfileStatus = "online" | "busy" | "offline" | "none";
+type DashboardSidebarProfilePopoverPlacementProps = Pick<AvatarProfilePopoverProps, "align" | "alignOffset" | "avoidCollisions" | "collisionPadding" | "defaultOpen" | "modal" | "onOpenChange" | "open" | "side" | "sideOffset">;
 export interface DashboardSidebarProfileProps extends Omit<AvatarProfileProps, "className" | "avatarClassName" | "fallbackClassName" | "avatarOverlay" | "imageClassName" | "contentClassName" | "nameClassName" | "roleClassName" | "topInfoClassName" | "bottomInfoClassName" | "rolePlacement"> {
     isCollapsed?: boolean;
     rolePlacement?: "above" | "below";
-    status?: "online" | "busy" | "offline" | "none";
+    status?: DashboardSidebarProfileStatus;
 }
-declare function DashboardSidebarProfile({ isCollapsed, status, name, role, rolePlacement, size, ...props }: DashboardSidebarProfileProps): import("react/jsx-runtime").JSX.Element;
+export interface DashboardSidebarProfilePopoverProps extends Omit<DashboardSidebarProfileProps, "children">, DashboardSidebarProfilePopoverPlacementProps {
+    children: React.ReactNode;
+    contentClassName?: string;
+    triggerAriaLabel?: string;
+    triggerClassName?: string;
+}
+declare function DashboardSidebarProfile({ isCollapsed, ...props }: DashboardSidebarProfileProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardSidebarProfilePopover({ align, alignOffset, avoidCollisions, children, collisionPadding, contentClassName, defaultOpen, modal, onOpenChange, open, side, sideOffset, triggerAriaLabel, triggerClassName, ...profileProps }: DashboardSidebarProfilePopoverProps): import("react/jsx-runtime").JSX.Element;
 declare function DashboardSidebar({ className, children, logo, search, navGroups, footerItems, footer, toggleAriaLabel, ...props }: DashboardSidebarProps): import("react/jsx-runtime").JSX.Element;
 export interface DashboardContentProps extends React.HTMLAttributes<HTMLElement> {
     hasSidebar?: boolean;
@@ -113,6 +131,10 @@ export interface DashboardContentProps extends React.HTMLAttributes<HTMLElement>
     rightPanelFallbackTrigger?: React.ReactNode;
     rightPanelMode?: DashboardRightPanelMode;
     rightPanelResizable?: boolean;
+    rightPanelCollapsible?: boolean;
+    rightPanelCollapsed?: boolean;
+    defaultRightPanelCollapsed?: boolean;
+    onRightPanelCollapsedChange?: (collapsed: boolean) => void;
     rightPanelDefaultWidth?: number;
     rightPanelMinWidth?: number;
     rightPanelMaxWidth?: number;
@@ -148,5 +170,5 @@ declare function DashboardRightPanelTabs({ className, listWrapperClassName, pane
 declare function DashboardRightPanel({ className, ...props }: DashboardRightPanelProps): import("react/jsx-runtime").JSX.Element;
 declare function DashboardRightPanelHeader({ className, title, subtitle, badge, action, children, ...props }: DashboardRightPanelHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare function DashboardRightPanelBody({ className, contentClassName, footer, footerClassName, children, ...props }: DashboardRightPanelBodyProps): import("react/jsx-runtime").JSX.Element;
-declare function DashboardContent({ className, hasSidebar, rightPanel, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode, rightPanelResizable, rightPanelDefaultWidth, rightPanelMinWidth, rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint, surfaceClassName, children, ...props }: DashboardContentProps): import("react/jsx-runtime").JSX.Element;
-export { DashboardLayout, DashboardSidebar, DashboardSidebarProfile, DashboardContent, DashboardRightPanel, DashboardRightPanelHeader, DashboardRightPanelBody, DashboardRightPanelSection, DashboardRightPanelTabs, };
+declare function DashboardContent({ className, hasSidebar, rightPanel, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode, rightPanelResizable, rightPanelCollapsible, rightPanelCollapsed, defaultRightPanelCollapsed, onRightPanelCollapsedChange, rightPanelDefaultWidth, rightPanelMinWidth, rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint, surfaceClassName, children, ...props }: DashboardContentProps): import("react/jsx-runtime").JSX.Element;
+export { DashboardLayout, DashboardSidebar, DashboardSidebarProfile, DashboardSidebarProfilePopover, DashboardContent, DashboardRightPanel, DashboardRightPanelHeader, DashboardRightPanelBody, DashboardRightPanelSection, DashboardRightPanelTabs, };