@pantheon-systems/pds-toolkit-react 2.0.0-alpha.5 → 2.0.0-alpha.50

package/dist/index.source.d.ts

@@ -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,29 @@ 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/context-providers/ThemeContext/ThemeContext';
+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/useIsMobile/useIsMobile';
 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,89 @@ 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;
     /**
-     * Labels for translatable strings.
+     * Enable keyboard shortcuts to toggle the sidebar.
+     * `[` collapses, `]` expands. Only active when `hasSidebarToggle` is true.
+     */
+    keyboardShortcuts?: boolean;
+    /**
+     * Labels for translatable strings. Each key is optional and falls back to a
+     * default, so you can override only the labels you need.
      */
     labels?: {
-        collapseSidebar: string;
-        expandSidebar: string;
+        collapseSidebar?: string;
+        drawerToggle?: string;
+        expandSidebar?: string;
+        skipToContent?: 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 +115,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).
@@ -65,9 +129,20 @@ interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * Additional props for the sidebar `<div>` element.
      */
     sidebarProps?: ComponentPropsWithoutRef<'div'>;
+    /**
+     * Distance from the top of the viewport to the top of the layout, used to
+     * size the layout height (`100dvh - topOffset`). Set this when you render
+     * chrome above the layout (e.g. a banner) whose height the layout must
+     * account for — pass the measured height reactively.
+     *
+     * A number is treated as pixels; a string is used as-is (e.g. '3rem').
+     * When provided, this value is used verbatim and the built-in auto-measure
+     * is disabled. When omitted, the layout measures its own offset from the
+     * document top and keeps it updated.
+     */
+    topOffset?: number | string;
 }
 /**
  * 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, topOffset, ...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/StepperLayout/StepperLayout.d.ts

@@ -12,9 +12,21 @@ interface StepperLayoutProps {
      * Additional class names
      */
     className?: string;
+    /**
+     * Width of the form content. `standard` insets the form to a comfortable
+     * reading width for traditional form fields; `full` lets the form content
+     * span the full stepper container width. Use `full` only for non-form
+     * content such as a group of cards or other visual treatment prescribed by
+     * design.
+     */
+    formWidth?: 'standard' | 'full';
+    /**
+     * Wrap the entire experience (stepper, form, and buttons) in a Panel.
+     */
+    hasPanel?: boolean;
 }
 /**
  * StepperLayout UI component
  */
-export declare const StepperLayout: ({ children, className, ...props }: StepperLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StepperLayout: ({ children, className, formWidth, hasPanel, ...props }: StepperLayoutProps) => 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,10 +1,11 @@
 import { ReactNode } from 'react';
 import { PDSIcon } from '../../components/icons/Icon/Icon';
 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';
@@ -27,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.
@@ -45,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?
      */
@@ -84,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.
      */
@@ -134,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,18 @@ export type NavigationItem = {
      * A boolean indicating whether the item is the active item.
      */
     isActive?: boolean | null;
+    /**
+     * Renders a non-interactive section heading instead of a navigation item. Requires `label`. When true, all other fields are ignored, and the heading is hidden when the sidebar is collapsed.
+     */
+    isHeading?: boolean;
+    /**
+     * Renders a visual separator instead of a navigation item. When true, all other fields are ignored.
+     */
+    isSeparator?: boolean;
+    /**
+     * The text of a section heading. Only used when `isHeading` is true.
+     */
+    label?: string;
     /**
      * 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 +30,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 +47,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>