@pantheon-systems/pds-toolkit-react 1.0.0-dev.9999 → 1.1.0

package/_dist/layouts/AppLayout/AppLayout.d.ts

@@ -1,5 +1,5 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { ContainerWidth } from '@libs/types/custom-types';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ContainerWidth } from '../../libs/types/custom-types';
 import './app-layout.css';
 /**
  * Prop types for AppLayout
@@ -9,6 +9,10 @@ interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * Children to render in the layout.
      */
     children: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * PDS container width.
      */
@@ -61,13 +65,9 @@ interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * Additional props for the sidebar `<div>` element.
      */
     sidebarProps?: ComponentPropsWithoutRef<'div'>;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * AppLayout UI component
  */
-export declare const AppLayout: ({ children, containerWidth, hasSidebarToggle, isSidebarCollapsed, labels, mainContentElement, mainContentProps, onSidebarToggle, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarExpandedWidthMin, sidebarProps, className, ...props }: AppLayoutProps) => React.JSX.Element;
+export declare const AppLayout: ({ children, className, containerWidth, hasSidebarToggle, isSidebarCollapsed, labels, mainContentElement, mainContentProps, onSidebarToggle, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarExpandedWidthMin, sidebarProps, ...props }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/layouts/Container/Container.d.ts

@@ -1,5 +1,5 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { ContainerWidth } from '@libs/types/custom-types';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ContainerWidth } from '../../libs/types/custom-types';
 import '../../utilities/container.css';
 /**
  * Prop types for Container
@@ -9,17 +9,17 @@ interface ContainerProps extends ComponentPropsWithoutRef<'div'> {
      * Container content.
      */
     children?: ReactNode;
-    /**
-     * Width of the container.
-     */
-    width?: ContainerWidth;
     /**
      * Additional class names
      */
     className?: string;
+    /**
+     * Width of the container.
+     */
+    width?: ContainerWidth;
 }
 /**
  * Container UI component
  */
-export declare const Container: ({ children, width, className, ...props }: ContainerProps) => React.JSX.Element;
+export declare const Container: ({ children, className, width, ...props }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/layouts/DashboardGlobal/DashboardGlobal.d.ts

@@ -10,25 +10,29 @@ interface DashboardGlobalProps extends ComponentPropsWithoutRef<'div'> {
      */
     children: ReactNode;
     /**
-     * Is the dashboard in admin mode?
+     * Additional class names. Will be merged with existing component root classes.
      */
-    isAdmin?: boolean;
+    className?: string;
     /**
-     * Is the sidebar expanded?
+     * Whether to include a sidebar toggle button.
      */
-    isSidebarExpanded?: boolean;
+    hasSidebarToggle?: boolean;
     /**
-     * Function to set the sidebar expanded state.
+     * Is the dashboard in admin mode?
      */
-    setIsSidebarExpanded?: (isOpen: boolean) => void;
+    isAdmin?: boolean;
     /**
-     * Whether to include a sidebar toggle button.
+     * Is the sidebar expanded?
      */
-    hasSidebarToggle?: boolean;
+    isSidebarExpanded?: boolean;
     /**
      * A fully-formed link element using the router of your choice. The link text will be used as the aria-label. If the logo should not be a link, set to `null`.
      */
     logoLinkContent?: ReactNode;
+    /**
+     * Function to set the sidebar expanded state.
+     */
+    setIsSidebarExpanded?: (isOpen: boolean) => void;
     /**
      * Width of the sidebar when collapsed in rems. This should not need to be modified.
      */
@@ -45,13 +49,9 @@ interface DashboardGlobalProps extends ComponentPropsWithoutRef<'div'> {
      * Translatable string for skiplink.
      */
     skiplinkText?: string;
-    /**
-     * Additional class names. Will be merged with existing component root classes.
-     */
-    className?: string;
 }
 /**
  * DashboardGlobal UI component
  */
-export declare const DashboardGlobal: ({ children, hasSidebarToggle, isAdmin, logoLinkContent, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarToggleLabel, skiplinkText, isSidebarExpanded, setIsSidebarExpanded, className, ...props }: DashboardGlobalProps) => React.JSX.Element;
+export declare const DashboardGlobal: ({ children, className, hasSidebarToggle, isAdmin, isSidebarExpanded, logoLinkContent, setIsSidebarExpanded, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarToggleLabel, skiplinkText, ...props }: DashboardGlobalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/layouts/DashboardInner/DashboardInner.d.ts

@@ -1,13 +1,18 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './dashboard-inner.css';
 /**
  * Prop types for DashboardInner
  */
 interface DashboardInnerProps extends ComponentPropsWithoutRef<'div'> {
     /**
-     * Child elements to be assigned to named slots.
+     * Child elements. Main content can be passed without a slot attribute (unslotted).
+     * Optional named slots: `header-left`, `header-right`, `content` (for backwards compatibility).
      */
     children: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Whether to apply bottom spacing to the second-to-last content child.
      * This prop provides flexibility for different dashboard layouts:
@@ -17,13 +22,9 @@ interface DashboardInnerProps extends ComponentPropsWithoutRef<'div'> {
      * @default false
      */
     hasContentSpacing?: boolean;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * DashboardInner UI component
  */
-export declare const DashboardInner: ({ children, hasContentSpacing, className, ...props }: DashboardInnerProps) => React.JSX.Element;
+export declare const DashboardInner: ({ children, className, hasContentSpacing, ...props }: DashboardInnerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/layouts/DocsLayout/DocsLayout.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './docs-layout.css';
 /**
  * Prop types for DocsLayout
@@ -9,22 +9,22 @@ interface DocsLayoutProps extends ComponentPropsWithoutRef<'div'> {
      */
     children: ReactNode;
     /**
-     * Width of the sidebar when expanded as a percentage.
-     * This is also the width of the sidebar when it is not collapsable (hasSidebarToggle is false).
+     * Additional class names
      */
-    sidebarWidth?: string;
+    className?: string;
     /**
      * Minimum width of the sidebar when expanded in rems.
      * This is also the min-width of the sidebar when it is not collapsable (hasSidebarToggle is false).
      */
     sidebarMinWidth?: number;
     /**
-     * Additional class names
+     * Width of the sidebar when expanded as a percentage.
+     * This is also the width of the sidebar when it is not collapsable (hasSidebarToggle is false).
      */
-    className?: string;
+    sidebarWidth?: string;
 }
 /**
  * DocsLayout UI component
  */
-export declare const DocsLayout: ({ children, sidebarWidth, sidebarMinWidth, className, ...props }: DocsLayoutProps) => React.JSX.Element;
+export declare const DocsLayout: ({ children, className, sidebarMinWidth, sidebarWidth, ...props }: DocsLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/layouts/FlexContainer/FlexContainer.d.ts

@@ -1,5 +1,5 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions } from '@layouts/layout-types';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { GridGapOptions } from '../../libs/types/layout-types';
 import './flex-container.css';
 type FlexAlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch';
 type FlexAlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
@@ -16,6 +16,14 @@ interface FlexContainerProps extends ComponentPropsWithoutRef<'div'> {
      * Aligns items on the cross axis.
      */
     alignItems?: FlexAlignItems;
+    /**
+     * Container content.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Establishes the main-axis, thus defining the direction flex items are placed in the flex container.
      */
@@ -56,17 +64,9 @@ interface FlexContainerProps extends ComponentPropsWithoutRef<'div'> {
      * Justify content for mobile. If not set, will default to the same value as `justifyContent`.
      */
     mobileJustifyContent?: FlexJustifyContent;
-    /**
-     * Container content.
-     */
-    children?: ReactNode;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * Flex Container UI component
  */
-export declare const FlexContainer: ({ alignContent, alignItems, flexDirection, flexWrap, gap, justifyContent, mobileAlignItems, mobileAlignContent, mobileFlexDirection, mobileFlexWrap, mobileGap, mobileJustifyContent, children, className, ...props }: FlexContainerProps) => React.JSX.Element;
+export declare const FlexContainer: ({ alignContent, alignItems, children, className, flexDirection, flexWrap, gap, justifyContent, mobileAlignContent, mobileAlignItems, mobileFlexDirection, mobileFlexWrap, mobileGap, mobileJustifyContent, ...props }: FlexContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/layouts/GlobalWrapper/GlobalWrapper.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactNode } from 'react';
 /**
  * Prop types for GlobalWrapper
  */
@@ -6,7 +6,7 @@ interface GlobalWrapperProps {
     /**
      * Child components
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      *  Mobile menu will be enabled when viewport is at or below this number in pixels.
      */
@@ -15,5 +15,5 @@ interface GlobalWrapperProps {
 /**
  * GlobalWrapper wrapper component.
  */
-export declare const GlobalWrapper: ({ children, mobileMenuMaxWidth, }: GlobalWrapperProps) => React.JSX.Element;
+export declare const GlobalWrapper: ({ children, mobileMenuMaxWidth, }: GlobalWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/layouts/SidebarLayout/SidebarLayout.d.ts

@@ -1,13 +1,18 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions } from '@layouts/layout-types';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { GridGapOptions } from '../../libs/types/layout-types';
 /**
  * Prop types for SidebarLayout
  */
 interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {
     /**
-     * Children to render in the layout. All children must be assigned to a named slot — either 'sidebar' or 'content'.
+     * Children to render in the layout. Main content can be passed without a slot attribute (unslotted).
+     * Optional named slots: `sidebar` for sidebar content, `content` for backwards compatibility.
      */
     children: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Gap between grid items
      */
@@ -24,13 +29,9 @@ interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * Sidebar width.
      */
     sidebarWidth?: 'narrow' | 'standard' | 'wide';
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * SidebarLayout UI component
  */
-export declare const SidebarLayout: ({ children, gridGap, sidebarLocation, sidebarMobileLocation, sidebarWidth, className, ...props }: SidebarLayoutProps) => React.JSX.Element;
+export declare const SidebarLayout: ({ children, className, gridGap, sidebarLocation, sidebarMobileLocation, sidebarWidth, ...props }: SidebarLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/layouts/StepperLayout/StepperLayout.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import './stepper-layout.css';
 /**
  * Prop types for StepperLayout
@@ -16,5 +16,5 @@ interface StepperLayoutProps {
 /**
  * StepperLayout UI component
  */
-export declare const StepperLayout: ({ children, className, ...props }: StepperLayoutProps) => React.JSX.Element;
+export declare const StepperLayout: ({ children, className, ...props }: StepperLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/layouts/ThreeItemLayout/ThreeItemLayout.d.ts

@@ -1,5 +1,5 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions, VerticalAlignOptions } from '@layouts/layout-types';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { GridGapOptions, VerticalAlignOptions } from '../../libs/types/layout-types';
 import '../../utilities/grid/grid.css';
 import './three-item-layout.css';
 /**
@@ -10,6 +10,10 @@ interface TwoItemLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * Item content.
      */
     children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Width of gap between items.
      */
@@ -18,13 +22,9 @@ interface TwoItemLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * Vertical alignment of items.
      */
     verticalAlign?: VerticalAlignOptions;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * ThreeItemLayout UI component.
  */
-export declare const ThreeItemLayout: ({ children, gridGap, verticalAlign, className, ...props }: TwoItemLayoutProps) => React.JSX.Element;
+export declare const ThreeItemLayout: ({ children, className, gridGap, verticalAlign, ...props }: TwoItemLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/layouts/TwoItemLayout/TwoItemLayout.d.ts

@@ -1,5 +1,5 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions, VerticalAlignOptions } from '@layouts/layout-types';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { GridGapOptions, VerticalAlignOptions } from '../../libs/types/layout-types';
 import '../../utilities/grid/grid.css';
 import './two-item-layout.css';
 /**
@@ -10,6 +10,10 @@ interface TwoItemLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * Item content.
      */
     children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Width of gap between items.
      */
@@ -22,13 +26,9 @@ interface TwoItemLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * Vertical alignment of items.
      */
     verticalAlign?: VerticalAlignOptions;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * TwoItemLayout UI component.
  */
-export declare const TwoItemLayout: ({ children, gridGap, layoutVariant, verticalAlign, className, ...props }: TwoItemLayoutProps) => React.JSX.Element;
+export declare const TwoItemLayout: ({ children, className, gridGap, layoutVariant, verticalAlign, ...props }: TwoItemLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/{components/navigation/DashboardSearch → libs/components/SiteOptionDisplay}/SiteOptionDisplay.d.ts

@@ -1,5 +1,9 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-import { SiteStatus, SiteType } from '@libs/types/custom-types';
+import { ComponentPropsWithoutRef } from 'react';
+import { SiteStatus, SiteType } from '../../types/custom-types';
+import './site-option-display.css';
+/**
+ * Site option item type.
+ */
 export type SiteOption = {
     /**
      * ID of the site.
@@ -24,16 +28,16 @@ export type SiteOption = {
 };
 /** Site option display props. */
 export interface SiteOptionDisplayProps extends ComponentPropsWithoutRef<'div'> {
-    /**
-     * Site option to display.
-     */
-    option: SiteOption;
     /**
      * Additional class names
      */
     className?: string;
+    /**
+     * Site option to display.
+     */
+    option: SiteOption;
 }
 /**
  * UI component to display site options.
  */
-export declare const SiteOptionDisplay: ({ option, className, ...props }: SiteOptionDisplayProps) => React.JSX.Element;
+export declare const SiteOptionDisplay: ({ className, option, ...props }: SiteOptionDisplayProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/libs/components/sb-docs-toc-layout.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 export declare const SbDocsTocLayout: ({ children }: {
     children: ReactNode;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/_dist/libs/components/utility-components.d.ts

@@ -1,13 +1,13 @@
-import React, { ReactNode } from 'react';
-import { HeadingLevel } from '@libs/types/custom-types';
+import { ReactNode } from 'react';
+import { HeadingLevel } from '../types/custom-types';
 interface HxProps {
     baseClass?: string;
     children?: ReactNode;
+    className?: string;
     id?: string;
     level: HeadingLevel;
-    className?: string;
 }
-export declare const Hx: ({ baseClass, children, id, level, className, ...props }: HxProps) => React.DetailedReactHTMLElement<{
+export declare const Hx: ({ baseClass, children, className, id, level, ...props }: HxProps) => import("react").DetailedReactHTMLElement<{
     className: any;
     id: string;
 }, HTMLElement>;

package/_dist/libs/types/custom-types.d.ts

@@ -1,31 +1,38 @@
 import { ReactNode } from 'react';
-import { PDSIcon } from '@components/icons/Icon/Icon';
+import { PDSIcon } from '../../components/icons/Icon/Icon';
 export type BadgeColor = 'success' | 'critical' | 'info' | 'warning' | 'neutral' | 'brand' | 'silver' | 'gold' | 'platinum' | 'diamond';
 export type ButtonDisplayType = 'label-only' | 'icon-start' | 'icon-end';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 export type ButtonType = 'button' | 'submit' | 'reset';
-export type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'brand' | 'brand-secondary' | 'critical' | 'navbar' | 'inline';
+export type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'brand' | 'brand-secondary' | 'critical' | 'critical-secondary' | 'navbar' | 'inline';
 export type ContainerWidth = 'narrow' | 'standard' | 'wide' | 'x-wide' | 'full';
 export type Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'flow-root' | 'none' | 'contents' | 'table' | 'table-row' | 'table-cell' | 'table-caption' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row-group' | 'list-item' | 'inherit' | 'initial' | 'revert' | 'unset';
+export type StatusType = 'info' | 'success' | 'warning' | 'critical' | 'discovery';
+export type StatusTypeExtended = StatusType | 'neutral' | 'working';
+export declare const StatusTypeLabels: Record<StatusType, string>;
 export type FuiOffset = number | {
-    mainAxis?: number;
-    crossAxis?: number;
     alignmentAxis?: number | null;
+    crossAxis?: number;
+    mainAxis?: number;
 };
 export type FuiPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
 export type HeadingItemType = {
-    /**
-     * Label for a menu item
-     */
-    label: string;
     /**
      * Is the item a heading?
      */
     isHeading: boolean;
+    /**
+     * Label for a menu item
+     */
+    label: string;
 };
 export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
 export type HeadingLevelCommon = Exclude<HeadingLevel, 'h1' | 'h5' | 'h6'>;
 export type LinkItemType = {
+    /**
+     * Screen reader label for critical items. Only used when isCritical is true.
+     */
+    criticalLabel?: string;
     /**
      * Description of the item
      */
@@ -38,6 +45,10 @@ export type LinkItemType = {
      * Optional icon for this item. Choose from available icons in the Icon component.
      */
     iconName?: PDSIcon;
+    /**
+     * Is this a critical action item?
+     */
+    isCritical?: boolean;
     /**
      * Is the item a link?
      */
@@ -56,6 +67,10 @@ export type MenuItemType = {
      * (optional) Callback function to execute when menu item is activated
      */
     callback?: () => void;
+    /**
+     * Screen reader label for critical items. Only used when isCritical is true.
+     */
+    criticalLabel?: string;
     /**
      * Description of the item
      */
@@ -72,6 +87,10 @@ export type MenuItemType = {
      * Optional ID value for this item.
      */
     id?: string;
+    /**
+     * Is this a critical action item?
+     */
+    isCritical?: boolean;
     /**
      * Label for a menu item
      */
@@ -82,6 +101,18 @@ export type MenuItemType = {
     testId?: string;
 };
 export type NodeItemType = {
+    /**
+     * Screen reader label for critical items. Only used when isCritical is true.
+     */
+    criticalLabel?: string;
+    /**
+     * Is this item disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Is this a critical action item?
+     */
+    isCritical?: boolean;
     /**
      * Is the item a node?
      */
@@ -97,9 +128,14 @@ export type SeparatorItemType = {
      */
     isSeparator: boolean;
 };
-export type SitePlanLevel = 'sandbox' | 'basic' | 'performance-small' | 'performance-medium' | 'performance-large' | 'performance-xl' | 'performance-2xl' | 'elite';
+export type MenuItem = HeadingItemType | LinkItemType | MenuItemType | NodeItemType | SeparatorItemType;
+export declare const isSeparatorItemType: (item: MenuItem) => item is SeparatorItemType;
+export declare const isHeadingItemType: (item: MenuItem) => item is HeadingItemType;
+export declare const isLinkItemType: (item: MenuItem) => item is LinkItemType;
+export declare const isNodeItemType: (item: MenuItem) => item is NodeItemType;
+export type SitePlanLevel = 'sandbox' | 'basic' | 'performance-small' | 'performance-medium' | 'performance-large' | 'performance-xl' | 'performance-2xl' | 'elite' | 'pro' | 'business' | 'flagship-performance';
 export declare const SitePlanLevelLabel: Record<SitePlanLevel, string>;
-export type SiteStatus = 'active' | 'frozen';
+export type SiteStatus = 'active' | 'frozen' | 'restricted';
 export type SiteType = 'drupal' | 'wordpress' | 'gatsby' | 'nextjs';
 export declare const SiteTypeLabel: Record<SiteType, string>;
 export declare const SiteTypeIcon: Record<SiteType, PDSIcon>;

package/_dist/{components/navigation → libs/types}/navigation-types.d.ts

@@ -3,11 +3,11 @@ export type NavigationItem = {
     /**
      * A boolean indicating whether the item is the active item.
      */
-    isActive?: boolean;
+    isActive?: boolean | null;
     /**
      * Link content — a fully-formed link element using the router of your choice. If a string is provided instead, the item will be rendered as a link that navigates to the first child item.
      */
-    linkContent: ReactElement | string;
+    linkContent?: ReactElement | string;
     /**
      * Submenu items.
      */
@@ -17,13 +17,21 @@ export type FlattenedNavigationItem = {
     /**
      * A boolean indicating whether the item is the active item.
      */
-    isActive?: boolean;
-    /**
-     * Link content — a fully-formed link element using the router of your choice.
-     */
-    linkContent: ReactElement;
+    isActive?: boolean | null;
     /**
      * Nesting level of the item.
      */
     level: 'top-level' | 'second-level' | 'third-level' | 'fourth-level';
+    /**
+     * Link content — a fully-formed link element using the router of your choice.
+     */
+    linkContent?: ReactElement;
 };
+export interface NavMenuItem {
+    id?: string;
+    isActive?: boolean | null;
+    isSeparator?: boolean;
+    label: string;
+    linkContent?: ReactElement;
+    links?: NavMenuItem[];
+}