@pantheon-systems/pds-toolkit-react 2.0.0-alpha.4 → 2.0.0-alpha.41

package/dist/index.source.d.ts

@@ -1,5 +1,5 @@
 export * from './components/Avatar/Avatar';
-export * from './components/badges/IndicatorBadge/IndicatorBadge';
+export * from './components/badges/Badge/Badge';
 export * from './components/badges/StatusBadge/StatusBadge';
 export * from './components/badges/Tally/Tally';
 export * from './components/BranchDiff/BranchDiff';
@@ -7,6 +7,7 @@ export * from './components/buttons/Button/Button';
 export * from './components/buttons/ButtonLink/ButtonLink';
 export * from './components/buttons/ClipboardButton/ClipboardButton';
 export * from './components/buttons/CloseButton/CloseButton';
+export * from './components/buttons/FilterButton/FilterButton';
 export * from './components/buttons/IconButton/IconButton';
 export * from './components/buttons/MenuButton/MenuButton';
 export * from './components/buttons/SegmentedButton/SegmentedButton';
@@ -14,31 +15,25 @@ export * from './components/buttons/SplitButton/SplitButton';
 export * from './components/buttons/SSOButton/SSOButton';
 export * from './components/buttons/UtilityButton/UtilityButton';
 export * from './components/Callout/Callout';
+export * from './components/cards/ActionCard/ActionCard';
 export * from './components/cards/Card/Card';
-export * from './components/cards/CardHeading/CardHeading';
-export * from './components/cards/CardSelectGroup/CardSelectGroup';
-export * from './components/cards/EmptyStateCard/EmptyStateCard';
-export * from './components/cards/LinksCard/LinksCard';
-export * from './components/cards/NewSiteCard/NewSiteCard';
-export * from './components/cards/PaymentCard/PaymentCard';
-export * from './components/cards/PricingCard/PricingCard';
-export * from './components/cards/SiteCard/SiteCard';
+export * from './components/cards/CardSelect/CardSelect';
+export * from './components/charts/BarChart/BarChart';
+export * from './components/charts/LineChart/LineChart';
+export * from './components/charts/PieChart/PieChart';
+export * from './components/charts/ProportionBar/ProportionBar';
+export * from './components/charts/shared/types';
 export * from './components/CodeBlock/CodeBlock';
 export * from './components/ComparisonList/ComparisonList';
-export * from './components/CTALink/CTALink';
-export * from './components/CTASlice/CTASlice';
-export * from './components/DashboardStat/DashboardStat';
+export * from './components/Dropdown/Dropdown';
 export * from './components/empty-states/CompactEmptyState/CompactEmptyState';
 export * from './components/empty-states/HorizontalEmptyState/HorizontalEmptyState';
 export * from './components/empty-states/VerticalEmptyState/VerticalEmptyState';
 export * from './components/FileDiff/FileDiff';
-export * from './components/FlowSteps/FlowSteps';
-export * from './components/footer/FooterHeading/FooterHeading';
-export * from './components/footer/FooterLinks/FooterLinks';
-export * from './components/footer/SiteFooter/SiteFooter';
 export * from './components/icons/Icon/Icon';
 export * from './components/icons/PaymentIcon/PaymentIcon';
 export * from './components/icons/PlatformIcon/PlatformIcon';
+export * from './components/IdentityBlock/IdentityBlock';
 export * from './components/inputs/Checkbox/Checkbox';
 export * from './components/inputs/CheckboxFieldset/CheckboxFieldset';
 export * from './components/inputs/CheckboxGroup/CheckboxGroup';
@@ -53,50 +48,55 @@ export * from './components/inputs/Switch/Switch';
 export * from './components/inputs/TagsInput/TagsInput';
 export * from './components/inputs/Textarea/Textarea';
 export * from './components/inputs/TextInput/TextInput';
-export * from './components/LinkNewWindow/LinkNewWindow';
+export * from './components/links/CTALink/CTALink';
+export * from './components/links/LinkNewWindow/LinkNewWindow';
+export * from './components/links/Skiplink/Skiplink';
 export * from './components/loading-indicators/Skeleton/Skeleton';
 export * from './components/loading-indicators/Spinner/Spinner';
-export * from './components/Modal/Modal';
+export * from './components/media/Picture/Picture';
+export * from './components/media/VideoEmbed/VideoEmbed';
 export * from './components/navigation/Breadcrumb/Breadcrumb';
 export * from './components/navigation/ButtonNav/ButtonNav';
-export * from './components/navigation/DashboardNav/DashboardNav';
-export * from './components/navigation/DashboardNav/DashboardNavItem';
-export * from './components/navigation/DashboardSearch/DashboardSearch';
 export * from './components/navigation/DropdownMenu/DropdownMenu';
 export * from './components/navigation/Navbar/Navbar';
-export * from './components/navigation/NavMenu/NavMenu';
 export * from './components/navigation/SideNav/SideNav';
-export * from './components/navigation/SideNavCompact/SideNavCompact';
 export * from './components/navigation/SideNavGlobal/SideNavGlobal';
 export * from './components/navigation/SideNavGlobal/SideNavGlobalItem';
+export * from './components/navigation/SiteMenu/SiteMenu';
 export * from './components/navigation/TabMenu/TabMenu';
+export * from './components/navigation/TreeNav/TreeNav';
 export * from './components/navigation/UserMenu/UserMenu';
 export * from './components/navigation/WorkspaceSelector/WorkspaceSelector';
 export * from './components/notifications/Banner/Banner';
 export * from './components/notifications/InlineMessage/InlineMessage';
-export * from './components/notifications/NotificationHubIcon/NotificationHubIcon';
-export * from './components/notifications/NotificationsPopover/NotificationsPopover';
 export * from './components/notifications/SectionMessage/SectionMessage';
 export * from './components/notifications/Toaster/Toast';
 export * from './components/notifications/Toaster/Toaster';
 export * from './components/notifications/Toaster/useToast';
-export * from './components/Pagination/Pagination';
+export * from './components/overlays/Drawer/Drawer';
+export * from './components/overlays/FullScreenOverlay/FullScreenOverlay';
+export * from './components/overlays/Modal/Modal';
+export * from './components/pagination/Pagination/Pagination';
+export * from './components/pagination/PaginationCompact/PaginationCompact';
+export * from './components/pagination/PaginationMini/PaginationMini';
 export * from './components/panels/ExpansionPanel/ExpansionPanel';
 export * from './components/panels/ExpansionPanelGroup/ExpansionPanelGroup';
 export * from './components/panels/Panel/Panel';
 export * from './components/panels/PanelList/PanelList';
 export * from './components/panels/PanelList/PanelRow';
 export * from './components/PantheonLogo/PantheonLogo';
-export * from './components/Picture/Picture';
 export * from './components/Popover/Popover';
 export * from './components/progress-indicators/ProgressBar/ProgressBar';
 export * from './components/progress-indicators/ProgressRing/ProgressRing';
-export * from './components/PullQuote/PullQuote';
-export * from './components/RefreshChecker/RefreshChecker';
-export * from './components/SiteDashboardHeading/SiteDashboardHeading';
-export * from './components/Skiplink/Skiplink';
-export * from './components/SocialLinks/SocialLinks';
+export * from './components/SiteFooter/SiteFooter';
+export * from './components/SiteSearch/SiteSearch';
+export * from './components/SortableList/SortableList';
+export * from './components/SortableList/SortableListHeader';
+export * from './components/SortableList/SortableRow';
+export * from './components/SortableList/types';
+export * from './components/StatusChecker/StatusChecker';
 export * from './components/StatusIndicator/StatusIndicator';
+export * from './components/steppers/StepList/StepList';
 export * from './components/steppers/Stepper/Stepper';
 export * from './components/steppers/VerticalStepper/VerticalStepper';
 export * from './components/Table/Table';
@@ -104,30 +104,27 @@ export * from './components/TableOfContents/TableOfContents';
 export * from './components/Tabs/Tabs';
 export * from './components/Tag/Tag';
 export * from './components/ThemeSwitcher/ThemeSwitcher';
-export * from './components/tiles/AvatarTileList/AvatarTileList';
-export * from './components/tiles/Tile/Tile';
-export * from './components/tiles/TileGrid/TileGrid';
 export * from './components/Tooltip/Tooltip';
-export * from './components/VideoEmbed/VideoEmbed';
+export * from './components/UtilityBar/UtilityBar';
 export * from './libs/components/SiteOptionDisplay/SiteOptionDisplay';
 export * from './layouts/AppLayout/AppLayout';
-export * from './layouts/Container/Container';
-export * from './layouts/DashboardGlobal/DashboardGlobal';
-export * from './layouts/DashboardInner/DashboardInner';
 export * from './layouts/DocsLayout/DocsLayout';
-export * from './layouts/FlexContainer/FlexContainer';
-export * from './layouts/GlobalWrapper/GlobalWrapper';
 export * from './layouts/SidebarLayout/SidebarLayout';
 export * from './layouts/StepperLayout/StepperLayout';
 export * from './layouts/ThreeItemLayout/ThreeItemLayout';
 export * from './layouts/TwoItemLayout/TwoItemLayout';
+export * from './utilities/Container/Container';
+export * from './utilities/FlexContainer/FlexContainer';
+export * from './utilities/GlobalWrapper/GlobalWrapper';
 export * from './libs/types/custom-types';
 export * from './libs/types/input-types';
 export * from './libs/types/layout-types';
 export * from './libs/types/navigation-types';
-export * from './utilities/context-providers/ResponsiveContext/ResponsiveContext';
+export * from './utilities/grid/Grid';
+export * from './utilities/grid/GridItem';
 export * from './utilities/hooks/useBreakpoint/useBreakpoint';
 export * from './utilities/hooks/useClipboard/useClipboard';
+export * from './utilities/hooks/useDropdown';
 export * from './utilities/hooks/useKeyPress/useKeyPress';
 export * from './utilities/hooks/useMediaQuery/useMediaQuery';
 export * from './utilities/hooks/useWindowWidth/useWindowWidth';

package/dist/layouts/AppLayout/AppLayout.d.ts

@@ -1,12 +1,21 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { ContainerWidth } from '../../libs/types/custom-types';
+import { DrawerProps } from '../../components/overlays/Drawer/Drawer';
 import './app-layout.css';
 /**
  * Prop types for AppLayout
  */
-interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
+export interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
     /**
-     * Children to render in the layout.
+     * Children to render in the layout, assigned to named slots:
+     * - `header` — full-width region above the sidebar and main content (e.g. a Navbar).
+     * - `footer` — region below the main content, aligned with it (e.g. a SiteFooter);
+     *   the sidebar spans the full height alongside the main + footer column.
+     * - `identity` — top of the sidebar (e.g. a workspace/account block).
+     * - `content-top` — sidebar content above the navigation.
+     * - `navigation` — the sidebar's primary navigation (e.g. SideNavGlobal).
+     * - `content-bottom` — sidebar content pinned to the bottom.
+     * - `sidebar` — legacy single-slot sidebar body (pre-V2).
+     * - unslotted children render as the main content.
      */
     children: ReactNode;
     /**
@@ -14,39 +23,87 @@ interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
      */
     className?: string;
     /**
-     * PDS container width.
+     * Content for the left-side Drawer (e.g., workspace switcher).
+     * Only rendered when `hasDrawerToggle` is true.
      */
-    containerWidth?: ContainerWidth;
+    drawerContent?: ReactNode;
+    /**
+     * Pass-through props for the Drawer component.
+     */
+    drawerProps?: Partial<DrawerProps>;
+    /**
+     * Show a toggle button in the sidebar header that opens a Drawer overlay.
+     */
+    hasDrawerToggle?: boolean;
     /**
      * Is the sidebar able to be collapsed and expanded by the user?
      * If false or not provided, the sidebar will always be expanded.
      */
     hasSidebarToggle?: boolean;
+    /**
+     * Controlled open state for the drawer.
+     */
+    isDrawerOpen?: boolean;
     /**
      * Is the sidebar collapsed?
      * This is only relevant if `hasSidebarToggle` is true.
      */
     isSidebarCollapsed?: boolean;
+    /**
+     * Enable keyboard shortcuts to toggle the sidebar.
+     * `[` collapses, `]` expands. Only active when `hasSidebarToggle` is true.
+     */
+    keyboardShortcuts?: boolean;
     /**
      * Labels for translatable strings.
      */
     labels?: {
         collapseSidebar: string;
+        drawerToggle: string;
         expandSidebar: string;
     };
+    /**
+     * Background color for the main content area. Use a PDS CSS custom property
+     * (e.g. 'var(--pds-color-surface-default-secondary)') so dark mode works automatically.
+     */
+    mainBackground?: string;
     /**
      * Element type for the main content area.
      */
     mainContentElement?: 'div' | 'main';
+    /**
+     * Maximum width of the main content (and the footer content, which stays
+     * aligned with it). The content is centered within the region once it grows
+     * past this width, while the region itself — background, border, padding —
+     * remains full-bleed.
+     *
+     * A number is treated as pixels; a string is used as-is (e.g. '90rem').
+     * Pass `null` to remove the cap so content fills the full region width.
+     * Defaults to `1600` (the recommended value).
+     */
+    mainContentMaxWidth?: number | string | null;
     /**
      * Additional props for the main content element.
      */
     mainContentProps?: ComponentPropsWithoutRef<'div'> | ComponentPropsWithoutRef<'main'>;
+    /**
+     * Callback when the drawer toggle button is clicked.
+     */
+    onDrawerToggle?: () => void;
     /**
      * Callback function to handle sidebar toggle.
      * If not provided, the sidebar will use an internal function to manage collapsed state.
      */
     onSidebarToggle?: () => void;
+    /**
+     * When true, the sidebar stays fixed and only the main content area scrolls.
+     */
+    scrollableContent?: boolean;
+    /**
+     * Background color for the sidebar. Use a PDS CSS custom property
+     * (e.g. 'var(--pds-color-surface-default)') so dark mode works automatically.
+     */
+    sidebarBackground?: string;
     /**
      * Width of the sidebar when collapsed in rems. This should not need to be modified.
      */
@@ -56,6 +113,11 @@ interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * This is also the width of the sidebar when it is not collapsable (hasSidebarToggle is false).
      */
     sidebarExpandedWidth?: string;
+    /**
+     * Maximum width of the sidebar when expanded in rems.
+     * Prevents the sidebar from growing too wide on large screens.
+     */
+    sidebarExpandedWidthMax?: number;
     /**
      * 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).
@@ -69,5 +131,4 @@ interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * AppLayout UI component
  */
-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 {};
+export declare const AppLayout: ({ children, className, drawerContent, drawerProps, hasDrawerToggle, hasSidebarToggle, isDrawerOpen, isSidebarCollapsed, keyboardShortcuts, labels, mainBackground, mainContentElement, mainContentMaxWidth, mainContentProps, onDrawerToggle, onSidebarToggle, scrollableContent, sidebarBackground, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarExpandedWidthMax, sidebarExpandedWidthMin, sidebarProps, ...props }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/layouts/DocsLayout/DocsLayout.d.ts

@@ -13,18 +13,20 @@ interface DocsLayoutProps extends ComponentPropsWithoutRef<'div'> {
      */
     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).
+     * Width of the sidebar as a percentage.
      */
-    sidebarMinWidth?: number;
+    sidebarWidth?: string;
     /**
-     * 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).
+     * Maximum width of the sidebar in rems. Prevents the sidebar from growing too wide on large screens.
      */
-    sidebarWidth?: string;
+    sidebarWidthMax?: number;
+    /**
+     * Minimum width of the sidebar in rems. Ensures the sidebar remains usable on medium-sized screens.
+     */
+    sidebarWidthMin?: number;
 }
 /**
  * DocsLayout UI component
  */
-export declare const DocsLayout: ({ children, className, sidebarMinWidth, sidebarWidth, ...props }: DocsLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DocsLayout: ({ children, className, sidebarWidth, sidebarWidthMax, sidebarWidthMin, style, ...props }: DocsLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/layouts/SidebarLayout/SidebarLayout.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions } from '../../libs/types/layout-types';
+import { GapScale } from '../../libs/types/layout-types';
+import './sidebar-layout.css';
 /**
  * Prop types for SidebarLayout
  */
@@ -14,9 +15,10 @@ interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {
      */
     className?: string;
     /**
-     * Gap between grid items
+     * Gap between the main content and sidebar, from the numbered spacing scale.
+     * Defaults to `xl`.
      */
-    gridGap?: GridGapOptions;
+    gridGap?: GapScale;
     /**
      * Sidebar location.
      */
@@ -26,12 +28,20 @@ interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {
      */
     sidebarMobileLocation?: 'before' | 'after';
     /**
-     * Sidebar width.
+     * Width of the sidebar as a percentage (e.g. `'33%'`).
      */
-    sidebarWidth?: 'narrow' | 'standard' | 'wide';
+    sidebarWidth?: string;
+    /**
+     * Maximum width of the sidebar in rems. Prevents the sidebar from growing too wide on large screens.
+     */
+    sidebarWidthMax?: number;
+    /**
+     * Minimum width of the sidebar in rems. Ensures the sidebar remains usable on medium-sized screens.
+     */
+    sidebarWidthMin?: number;
 }
 /**
  * SidebarLayout UI component
  */
-export declare const SidebarLayout: ({ children, className, gridGap, sidebarLocation, sidebarMobileLocation, sidebarWidth, ...props }: SidebarLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarLayout: ({ children, className, gridGap, sidebarLocation, sidebarMobileLocation, sidebarWidth, sidebarWidthMax, sidebarWidthMin, ...props }: SidebarLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/layouts/ThreeItemLayout/ThreeItemLayout.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions, VerticalAlignOptions } from '../../libs/types/layout-types';
+import { GapScale, VerticalAlignOptions } from '../../libs/types/layout-types';
 import '../../utilities/grid/grid.css';
 import './three-item-layout.css';
 /**
@@ -15,9 +15,9 @@ interface TwoItemLayoutProps extends ComponentPropsWithoutRef<'div'> {
      */
     className?: string;
     /**
-     * Width of gap between items.
+     * Gap between items, from the numbered spacing scale. Defaults to `xl`.
      */
-    gridGap?: GridGapOptions;
+    gridGap?: GapScale;
     /**
      * Vertical alignment of items.
      */

package/dist/layouts/TwoItemLayout/TwoItemLayout.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions, VerticalAlignOptions } from '../../libs/types/layout-types';
+import { GapScale, VerticalAlignOptions } from '../../libs/types/layout-types';
 import '../../utilities/grid/grid.css';
 import './two-item-layout.css';
 /**
@@ -15,9 +15,9 @@ interface TwoItemLayoutProps extends ComponentPropsWithoutRef<'div'> {
      */
     className?: string;
     /**
-     * Width of gap between items.
+     * Gap between items, from the numbered spacing scale. Defaults to `xl`.
      */
-    gridGap?: GridGapOptions;
+    gridGap?: GapScale;
     /**
      * Layout variant for column widths.
      */

package/dist/libs/components/NavAccordion/NavAccordion.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import './nav-accordion.css';
+interface NavAccordionProps {
+    /**
+     * Expandable content shown when open.
+     */
+    children: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Disables the toggle button.
+     */
+    disabled?: boolean;
+    /**
+     * Content of the toggle button — any ReactNode.
+     */
+    label: ReactNode;
+}
+/**
+ * Internal accordion component for the mobile navbar panel.
+ * Renders a toggle button with a rotating chevron and expandable content.
+ * Used by MenuButton, UserMenu, and WorkspaceSelector.
+ */
+export declare const NavAccordion: ({ children, className, disabled, label, }: NavAccordionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/libs/components/StatusDot/StatusDot.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { StatusType } from '../../types/custom-types';
+import './status-dot.css';
+export type StatusDotType = StatusType | 'neutral';
+export interface StatusDotProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Status type — determines the dot color
+     */
+    status: StatusDotType;
+}
+export declare const StatusDot: ({ className, status, ...props }: StatusDotProps) => import("react/jsx-runtime").JSX.Element;

package/dist/libs/components/utils.d.ts

@@ -1,4 +1,3 @@
-export function createRandomID(): string;
 export function getDescendants(node: any, collect: any): any;
 export function initiateSlots(children: any): {
     __unslotted: any[];

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

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 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 = 'xs' | 's' | 'm' | 'l' | 'xl';
+export type ButtonSize = 'xs' | 's' | 'm' | 'l';
 export type ButtonType = 'button' | 'submit' | 'reset';
-export type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'brand' | 'accent' | 'reverse' | 'reverse-secondary' | 'critical' | 'critical-secondary' | 'navbar' | 'inline';
+export type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'brand' | 'highlight' | 'reverse' | 'reverse-secondary' | 'critical' | 'critical-secondary' | 'link';
 export type ContainerWidth = 'narrow' | 'standard' | 'wide' | 'x-wide' | 'full';
+export type DataContext = 'product' | 'marketing';
 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';
@@ -28,7 +28,7 @@ export type HeadingItemType = {
 };
 export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
 export type HeadingLevelCommon = Exclude<HeadingLevel, 'h1' | 'h5' | 'h6'>;
-export type IconSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
+export type IconSize = 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
 export type LinkItemType = {
     /**
      * Screen reader label for critical items. Only used when isCritical is true.
@@ -46,6 +46,10 @@ export type LinkItemType = {
      * Optional icon for this item. Choose from available icons in the Icon component.
      */
     iconName?: PDSIcon;
+    /**
+     * Size of the icon. Defaults to 's'.
+     */
+    iconSize?: IconSize;
     /**
      * Is this a critical action item?
      */
@@ -85,6 +89,10 @@ export type MenuItemType = {
      * Optional icon for this item. Choose from available icons in the Icon component.
      */
     iconName?: PDSIcon;
+    /**
+     * Size of the icon. Defaults to 's'.
+     */
+    iconSize?: IconSize;
     /**
      * Optional ID value for this item.
      */
@@ -135,8 +143,6 @@ export declare const isSeparatorItemType: (item: MenuItem) => item is SeparatorI
 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' | 'restricted';
 export type SiteType = 'drupal' | 'wordpress' | 'gatsby' | 'nextjs';
 export declare const SiteTypeLabel: Record<SiteType, string>;

package/dist/libs/types/layout-types.d.ts

@@ -1,2 +1,3 @@
-export type GridGapOptions = 'wide' | 'standard' | 'narrow';
+export type GapScale = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export type PaddingScale = 'none' | 'condensed' | 'standard' | 'spacious';
 export type VerticalAlignOptions = 'start' | 'center' | 'end';

package/dist/libs/types/navigation-types.d.ts

@@ -4,6 +4,10 @@ export type NavigationItem = {
      * A boolean indicating whether the item is the active item.
      */
     isActive?: boolean | null;
+    /**
+     * Renders a visual separator instead of a navigation item. When true, all other fields are ignored.
+     */
+    isSeparator?: boolean;
     /**
      * 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.
      */
@@ -18,6 +22,10 @@ export type FlattenedNavigationItem = {
      * A boolean indicating whether the item is the active item.
      */
     isActive?: boolean | null;
+    /**
+     * Renders a visual separator instead of a navigation item.
+     */
+    isSeparator?: boolean;
     /**
      * Nesting level of the item.
      */
@@ -31,7 +39,7 @@ export interface NavMenuItem {
     id?: string;
     isActive?: boolean | null;
     isSeparator?: boolean;
-    label: string;
+    label?: string;
     linkContent?: ReactElement;
     links?: NavMenuItem[];
 }

package/dist/svg/anglesDown.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M369.5 113l-160 160c-9.4 9.4-24.6 9.4-33.9 0L15.5 113c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zm0 192l-160 160c-9.4 9.4-24.6 9.4-33.9 0L15.5 305c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/>
+</svg>

package/dist/svg/anglesUp.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M209.5 47c-9.4-9.4-24.6-9.4-33.9 0L15.5 207c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l143-143 143 143c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L209.5 47zm160 352l-160-160c-9.4-9.4-24.6-9.4-33.9 0L15.5 399c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l143-143 143 143c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9z"/>
+</svg>

package/dist/svg/barsStaggered.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M0 88C0 74.7 10.7 64 24 64l400 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L24 112C10.7 112 0 101.3 0 88zM64 256c0-13.3 10.7-24 24-24l400 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L88 280c-13.3 0-24-10.7-24-24zM448 424c0 13.3-10.7 24-24 24L24 448c-13.3 0-24-10.7-24-24s10.7-24 24-24l400 0c13.3 0 24 10.7 24 24z"/>
+</svg>

package/dist/svg/circleExclamationSolid.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"/>
+</svg>

package/dist/svg/circleHalfStroke.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M280 462.6l0-413.3C383.6 61.3 464 149.2 464 256S383.6 450.7 280 462.6zm-48 0C128.4 450.7 48 362.8 48 256S128.4 61.3 232 49.4l0 413.3zM256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512z"/>
+</svg>

package/dist/svg/circleInfoSolid.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/>
+</svg>

package/dist/svg/circleQuestionSolid.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-336c-17.7 0-32 14.3-32 32 0 13.3-10.7 24-24 24s-24-10.7-24-24c0-44.2 35.8-80 80-80s80 35.8 80 80c0 47.2-36 67.2-56 74.5l0 3.8c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-8.1c0-20.5 14.8-35.2 30.1-40.2 6.4-2.1 13.2-5.5 18.2-10.3 4.3-4.2 7.7-10 7.7-19.6 0-17.7-14.3-32-32-32zM224 368a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/>
+</svg>

package/dist/svg/claude.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M7.84666 26.5833L15.7246 22.1684L15.8576 21.7855L15.7246 21.5745H15.3413L14.027 21.4964L9.52865 21.3714L5.62488 21.2073L1.84627 21.0041L0.891844 20.8009L0 19.6288L0.0938787 19.0428L0.891844 18.5036L2.04185 18.6052C3.52044 18.7068 5.6327 18.8474 8.37864 19.0428L11.1324 19.2069L15.2161 19.6288H15.8654L15.9593 19.3632L15.7403 19.1991L15.5682 19.035L11.6331 16.3704L7.37727 13.5573L5.14766 11.9398L3.94289 11.1194L3.33268 10.3536L3.06669 8.67357L4.16194 7.47021L5.6327 7.57179L6.00821 7.67337L7.49462 8.82203L10.6787 11.2835L14.8328 14.3387L15.443 14.8466L15.6855 14.6747L15.7168 14.5497L15.443 14.0965L13.1821 10.0176L10.7725 5.86833L9.70076 4.14925L9.41913 3.1178C9.31743 2.69584 9.24702 2.33639 9.24702 1.90662L10.4909 0.218792L11.1793 0L12.8379 0.218792L13.5341 0.828287L14.5668 3.18812L16.241 6.89979L18.8383 11.9476L19.5971 13.4479L20.0039 14.8388L20.1526 15.2608H20.4185V15.0186L20.6298 12.1743L21.0209 8.68138L21.4043 4.18832L21.5373 2.92245L22.1631 1.40652L23.407 0.586052L24.3771 1.04708L25.175 2.19574L25.0655 2.93807L24.5883 6.02461L23.6573 10.8615L23.0471 14.1043H23.3992L23.806 13.698L25.4489 11.5257L28.2026 8.0797L29.4152 6.71225L30.8312 5.20414L31.7387 4.48525H33.4598L34.7272 6.36843L34.1561 8.31412L32.3802 10.5567L30.9094 12.4634L28.7972 15.2999L27.4829 17.5659L27.6081 17.7457L27.921 17.7144L32.6853 16.6986L35.2591 16.2375L38.3337 15.714L39.7262 16.3626L39.8748 17.0189L39.3272 18.363L36.0415 19.1756L32.1924 19.9414L26.458 21.2932L26.3876 21.3479L26.4659 21.4495L29.0475 21.6917L30.1506 21.7542H32.8574L37.8956 22.1293L39.2099 22.9967L40 24.0594L39.867 24.872L37.8408 25.9035C36.6282 25.6144 33.585 24.8955 28.719 23.739L26.5285 23.192H26.2233V23.3717L28.0462 25.1534L31.3867 28.1696L35.5721 32.0609L35.7833 33.0221L35.2435 33.78L34.6724 33.7019L30.9955 30.9357L29.5795 29.6933L26.3642 26.9896H26.1529V27.271L26.8961 28.3571L30.8077 34.2332L31.0111 36.0305L30.7295 36.6165L29.7125 36.9682L28.6016 36.765L26.3094 33.5534L23.9468 29.9355L22.0379 26.6927L21.8032 26.8256L20.6767 38.9217L20.1526 39.539L18.94 40L17.9229 39.2342L17.3831 37.9918L17.9229 35.5304L18.5723 32.3188L19.0964 29.7636L19.5736 26.5911L19.8553 25.5362L19.8396 25.4659L19.6049 25.4972L17.211 28.7791L13.5732 33.6941L10.6943 36.7728L10.0059 37.0463L8.80892 36.429L8.91844 35.3272L9.58342 34.3426L13.5654 29.2792L15.9671 26.1379L17.5161 24.3251L17.5083 24.0594H17.4144L6.82965 30.9201L4.94426 31.1623L4.13065 30.4044L4.23235 29.1619L4.61569 28.7556L7.79973 26.5677L7.7919 26.5755V26.5833H7.84666Z"/>
+</svg>

package/dist/svg/clock.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M464 256a208 208 0 1 1 -416 0 208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0 256 256 0 1 0 -512 0zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/>
+</svg>

package/dist/svg/collapseToCenter.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M502.6 54.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L336 130.7 336 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 128c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-50.7 0 121.4-121.4zM80 272c-17.7 0-32 14.3-32 32s14.3 32 32 32l50.7 0-121.4 121.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L176 381.3 176 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-128c0-17.7-14.3-32-32-32L80 272z"/>
+</svg>

package/dist/svg/compress.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M160 56c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 88-88 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l112 0c13.3 0 24-10.7 24-24l0-112zM24 320c-13.3 0-24 10.7-24 24s10.7 24 24 24l88 0 0 88c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24L24 320zM336 56c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24l112 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-88 0 0-88zM312 320c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-88 88 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-112 0z"/>
+</svg>

package/dist/svg/diagramVenn.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M224 432c-97.2 0-176-78.8-176-176S126.8 80 224 80c15.9 0 31.4 2.1 46 6.1-47.8 41.1-78 102-78 169.9s30.3 128.8 78 169.9c-14.7 4-30.1 6.1-46 6.1zm17.1-156l157.8 0c-1.6 13.9-4.8 27.3-9.4 40l-139 0c-4.6-12.7-7.8-26.1-9.4-40zM320 403.5c-19.2-12.5-35.8-28.7-48.9-47.5l97.7 0c-13 18.8-29.6 35-48.9 47.5zM271.1 156c13-18.8 29.6-35 48.9-47.5 19.2 12.5 35.8 28.7 48.9 47.5l-97.7 0zm-20.7 40l139 0c4.6 12.7 7.8 26.1 9.4 40l-157.8 0c1.6-13.9 4.8-27.3 9.4-40zM224 480c34.4 0 66.9-7.7 96-21.6 29.1 13.8 61.6 21.6 96 21.6 123.7 0 224-100.3 224-224S539.7 32 416 32C381.6 32 349.1 39.7 320 53.6 290.9 39.7 258.4 32 224 32 100.3 32 0 132.3 0 256S100.3 480 224 480zM416 80c97.2 0 176 78.8 176 176S513.2 432 416 432c-15.9 0-31.4-2.1-46-6.1 47.8-41.1 78-102 78-169.9S417.7 127.2 370 86.1c14.7-4 30.1-6.1 46-6.1z"/>
+</svg>