@pantheon-systems/pds-toolkit-react 2.0.0-alpha.37 → 2.0.0-alpha.39

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';
@@ -119,6 +120,8 @@ 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/grid/Grid';
+export * from './utilities/grid/GridItem';
 export * from './utilities/hooks/useBreakpoint/useBreakpoint';
 export * from './utilities/hooks/useClipboard/useClipboard';
 export * from './utilities/hooks/useDropdown';

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

@@ -6,7 +6,16 @@ import './app-layout.css';
  */
 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;
     /**
@@ -62,6 +71,17 @@ export interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * 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.
      */
@@ -111,4 +131,4 @@ export interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * AppLayout UI component
  */
-export declare const AppLayout: ({ children, className, drawerContent, drawerProps, hasDrawerToggle, hasSidebarToggle, isDrawerOpen, isSidebarCollapsed, keyboardShortcuts, labels, mainBackground, mainContentElement, mainContentProps, onDrawerToggle, onSidebarToggle, scrollableContent, sidebarBackground, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarExpandedWidthMax, sidebarExpandedWidthMin, sidebarProps, ...props }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
+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/SidebarLayout/SidebarLayout.d.ts

@@ -1,5 +1,5 @@
 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
@@ -15,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.
      */

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/types/custom-types.d.ts

@@ -3,7 +3,7 @@ import { PDSIcon } from '../../components/icons/Icon/Icon';
 export type ButtonDisplayType = 'label-only' | 'icon-start' | 'icon-end';
 export type ButtonSize = 'xs' | 's' | 'm' | 'l';
 export type ButtonType = 'button' | 'submit' | 'reset';
-export type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'brand' | 'highlight' | 'reverse' | 'reverse-secondary' | 'critical' | 'critical-secondary' | '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';
@@ -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.

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

@@ -1,2 +1,3 @@
-export type GridGapOptions = 'wide' | 'standard' | 'narrow' | 'none';
+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/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/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/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>

package/dist/svg/floppyDisk.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="M64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l320 0c8.8 0 16-7.2 16-16l0-242.7c0-4.2-1.7-8.3-4.7-11.3L320 86.6 320 176c0 17.7-14.3 32-32 32l-160 0c-17.7 0-32-14.3-32-32l0-96-32 0zm80 0l0 80 128 0 0-80-128 0zM0 96C0 60.7 28.7 32 64 32l242.7 0c17 0 33.3 6.7 45.3 18.7L429.3 128c12 12 18.7 28.3 18.7 45.3L448 416c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM160 320a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/>
+</svg>

package/dist/svg/grid.svg

@@ -1,3 +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="M0 64C0 46.3 14.3 32 32 32l48 0c17.7 0 32 14.3 32 32l0 48c0 17.7-14.3 32-32 32l-48 0c-17.7 0-32-14.3-32-32L0 64zM0 232c0-17.7 14.3-32 32-32l48 0c17.7 0 32 14.3 32 32l0 48c0 17.7-14.3 32-32 32l-48 0c-17.7 0-32-14.3-32-32l0-48zM112 400l0 48c0 17.7-14.3 32-32 32l-48 0c-17.7 0-32-14.3-32-32l0-48c0-17.7 14.3-32 32-32l48 0c17.7 0 32 14.3 32 32zM168 64c0-17.7 14.3-32 32-32l48 0c17.7 0 32 14.3 32 32l0 48c0 17.7-14.3 32-32 32l-48 0c-17.7 0-32-14.3-32-32l0-48zM280 232l0 48c0 17.7-14.3 32-32 32l-48 0c-17.7 0-32-14.3-32-32l0-48c0-17.7 14.3-32 32-32l48 0c17.7 0 32 14.3 32 32zM168 400c0-17.7 14.3-32 32-32l48 0c17.7 0 32 14.3 32 32l0 48c0 17.7-14.3 32-32 32l-48 0c-17.7 0-32-14.3-32-32l0-48zM448 64l0 48c0 17.7-14.3 32-32 32l-48 0c-17.7 0-32-14.3-32-32l0-48c0-17.7 14.3-32 32-32l48 0c17.7 0 32 14.3 32 32zM336 232c0-17.7 14.3-32 32-32l48 0c17.7 0 32 14.3 32 32l0 48c0 17.7-14.3 32-32 32l-48 0c-17.7 0-32-14.3-32-32l0-48zM448 400l0 48c0 17.7-14.3 32-32 32l-48 0c-17.7 0-32-14.3-32-32l0-48c0-17.7 14.3-32 32-32l48 0c17.7 0 32 14.3 32 32z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M112 64l0 48-48 0 0-48 48 0zM64 24C41.9 24 24 41.9 24 64l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40L64 24zm48 208l0 48-48 0 0-48 48 0zM64 192c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0zm0 208l48 0 0 48-48 0 0-48zm-40 0l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM280 64l0 48-48 0 0-48 48 0zM232 24c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0zm0 208l48 0 0 48-48 0 0-48zm-40 0l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zm88 168l0 48-48 0 0-48 48 0zm-48-40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0zM400 64l48 0 0 48-48 0 0-48zm-40 0l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zm88 168l0 48-48 0 0-48 48 0zm-48-40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0zm0 208l48 0 0 48-48 0 0-48zm-40 0l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40z"/>
 </svg>

package/dist/svg/grid2.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="M48 80l0 96 96 0 0-96-96 0zM0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM48 336l0 96 96 0 0-96-96 0zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zM400 80l-96 0 0 96 96 0 0-96zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm0 304l0 96 96 0 0-96-96 0zm-48 0c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96z"/>
+</svg>

package/dist/svg/octagonExclamation.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="M330.9 .1c12.7 0 25 5.1 34 14.1L498.3 147.6c9 9 14.1 21.2 14.1 33.9l0 148.8c0 12.7-5.1 25-14.1 34L364.8 497.9c-9 9-21.2 14.1-34 14.1l-148.8 0c-12.7 0-24.9-5.1-33.9-14.1L14.6 364.4c-9-9-14.1-21.2-14.1-34l0-148.8c0-12.7 5.1-24.9 14.1-33.9L148.1 14.1c9-9 21.2-14.1 33.9-14.1l148.8 0zM48.5 181.6l0 148.8 133.5 133.5 148.8 0 133.5-133.5 0-148.8-133.5-133.5-148.8 0-133.5 133.5zM256.4 384a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm0-256c18.2 0 32.7 15.5 31.4 33.7l-7.4 104c-.9 12.6-11.4 22.3-23.9 22.3-12.6 0-23-9.7-23.9-22.3l-7.4-104c-1.3-18.2 13.1-33.7 31.4-33.7z"/>
+</svg>

package/dist/svg/openai.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="M15.3417 14.5625V10.7656C15.3417 10.4453 15.4579 10.2031 15.7367 10.0469L23.3107 5.64844C24.3408 5.04687 25.5721 4.76562 26.8422 4.76562C31.5973 4.76562 34.6176 8.48437 34.6176 12.4453C34.6176 12.7266 34.6176 13.0469 34.5789 13.3672L26.7183 8.72656C26.2459 8.44531 25.7657 8.44531 25.2933 8.72656L15.3417 14.5625ZM33.0223 29.3594V20.2812C33.0223 19.7188 32.7822 19.3203 32.3098 19.0391L22.3582 13.2031L25.6108 11.3203C25.8896 11.1641 26.1297 11.1641 26.4008 11.3203L33.9748 15.7266C36.1588 17.0078 37.6225 19.7266 37.6225 22.3672C37.6225 25.4063 35.8412 28.2109 33.0223 29.3672V29.3594ZM13.0029 21.3594L9.75024 19.4375C9.47144 19.2813 9.35528 19.0391 9.35528 18.7188V9.92187C9.35528 5.64062 12.6079 2.39844 17.0068 2.39844C18.6718 2.39844 20.2207 2.96094 21.5295 3.96094L13.7154 8.52344C13.243 8.80469 13.0029 9.20312 13.0029 9.76562V21.3672V21.3594ZM20.0039 25.4375L15.3417 22.7969V17.1953L20.0039 14.5547L24.666 17.1953V22.7969L20.0039 25.4375ZM23.001 37.6016C21.3359 37.6016 19.787 37.0391 18.4782 36.0391L26.2924 31.4766C26.7648 31.1953 27.0048 30.7969 27.0048 30.2344V18.6328L30.2962 20.5547C30.575 20.7109 30.6912 20.9531 30.6912 21.2734V30.0703C30.6912 34.3516 27.3998 37.5938 23.001 37.5938V37.6016ZM13.5915 28.6797L6.02517 24.2813C3.84124 23 2.37754 20.2813 2.37754 17.6406C2.37754 14.5625 4.20523 11.7969 7.01646 10.6406V19.7578C7.01646 20.3203 7.25653 20.7188 7.72895 21L17.6418 26.7969L14.3892 28.6797C14.1104 28.8359 13.8703 28.8359 13.5992 28.6797H13.5915ZM13.1578 35.2422C8.67377 35.2422 5.38238 31.8438 5.38238 27.6406C5.38238 27.3203 5.4211 27 5.45983 26.6797L13.274 31.2422C13.7464 31.5234 14.2265 31.5234 14.6989 31.2422L24.6505 25.4453V29.2422C24.6505 29.5625 24.5344 29.8047 24.2556 29.9609L16.6815 34.3594C15.6515 34.9609 14.4201 35.2422 13.15 35.2422H13.1578ZM22.9932 40C27.7948 40 31.7986 36.5625 32.7047 32C37.1423 30.8359 40 26.6406 40 22.3594C40 19.5625 38.8074 16.8359 36.6699 14.8828C36.8713 14.0391 36.9874 13.2031 36.9874 12.3594C36.9874 6.64063 32.3872 2.35937 27.0745 2.35937C26.0058 2.35937 24.9758 2.51563 23.9458 2.88281C22.1646 1.125 19.7018 0 17.0068 0C12.2052 0 8.20135 3.4375 7.29526 8C2.8577 9.15625 0 13.3594 0 17.6406C0 20.4375 1.19264 23.1641 3.33011 25.1172C3.12875 25.9609 3.01258 26.7969 3.01258 27.6406C3.01258 33.3594 7.61278 37.6406 12.9255 37.6406C13.9942 37.6406 15.0242 37.4844 16.0542 37.1172C17.8354 38.875 20.2982 40 22.9932 40Z"/>
+</svg>

package/dist/svg/slider.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M384 144c8.8 0 16 7.2 16 16l0 192c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-192c0-8.8 7.2-16 16-16l32 0zM352 96c-35.3 0-64 28.7-64 64l0 192c0 35.3 28.7 64 64 64l32 0c35.3 0 64-28.7 64-64l0-72 104 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-104 0 0-72c0-35.3-28.7-64-64-64l-32 0zM0 256c0 13.3 10.7 24 24 24l216 0 0-48-216 0c-13.3 0-24 10.7-24 24z"/>
+</svg>

package/dist/svg/squareDashed.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="M88 32c13.3 0 24 10.7 24 24S101.3 80 88 80c-22.1 0-40 17.9-40 40 0 13.3-10.7 24-24 24S0 133.3 0 120C0 71.4 39.4 32 88 32zM24 192c13.3 0 24 10.7 24 24l0 80c0 13.3-10.7 24-24 24S0 309.3 0 296l0-80c0-13.3 10.7-24 24-24zm400 0c13.3 0 24 10.7 24 24l0 80c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-80c0-13.3 10.7-24 24-24zm0-48c-13.3 0-24-10.7-24-24 0-22.1-17.9-40-40-40-13.3 0-24-10.7-24-24s10.7-24 24-24c48.6 0 88 39.4 88 88 0 13.3-10.7 24-24 24zm24 248c0 48.6-39.4 88-88 88-13.3 0-24-10.7-24-24s10.7-24 24-24c22.1 0 40-17.9 40-40 0-13.3 10.7-24 24-24s24 10.7 24 24zM48 392c0 22.1 17.9 40 40 40 13.3 0 24 10.7 24 24s-10.7 24-24 24c-48.6 0-88-39.4-88-88 0-13.3 10.7-24 24-24s24 10.7 24 24zm136 88c-13.3 0-24-10.7-24-24s10.7-24 24-24l80 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0zM160 56c0-13.3 10.7-24 24-24l80 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24z"/>
+</svg>

package/dist/svg/tableColumns.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="M48 416l0-256 152 0 0 272-136 0c-8.8 0-16-7.2-16-16zm200 16l0-272 152 0 0 256c0 8.8-7.2 16-16 16l-136 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"/>
+</svg>

package/dist/utilities/FlexContainer/FlexContainer.d.ts

@@ -1,13 +1,11 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions } from '../../libs/types/layout-types';
+import { GapScale } 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';
 type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 type FlexJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
 type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-type SpacingGapOptions = '5xs' | '4xs' | '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
-type FlexGapOptions = GridGapOptions | 'minimal' | 'none' | SpacingGapOptions;
 interface FlexContainerProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Aligns content when there is extra space in the cross-axis.
@@ -34,9 +32,10 @@ interface FlexContainerProps extends ComponentPropsWithoutRef<'div'> {
      */
     flexWrap?: FlexWrap;
     /**
-     * Gap between items.
+     * Gap between items. Fixed at all breakpoints; set `mobileGap` to change it
+     * on small screens.
      */
-    gap?: FlexGapOptions;
+    gap?: GapScale;
     /**
      * Alignment along the main axis.
      */
@@ -60,7 +59,7 @@ interface FlexContainerProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Gap between items on mobile. If not set, will default to the same value as `gap`.
      */
-    mobileGap?: FlexGapOptions;
+    mobileGap?: GapScale;
     /**
      * Justify content for mobile. If not set, will default to the same value as `justifyContent`.
      */

package/dist/utilities/grid/Grid.d.ts

@@ -0,0 +1,58 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { GapScale } from '../../libs/types/layout-types';
+import './grid.css';
+type GridStackBreakpoint = 's' | 'm' | 'l' | 'xl';
+/**
+ * Prop types for Grid
+ */
+export interface GridProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Make the grid an inline-size query container (`container-type: inline-size`,
+     * named `pds-grid`) so its items can respond to the grid's own width with
+     * `@container pds-grid (…)` rules instead of the viewport. Use when the
+     * available width is decoupled from the viewport (e.g. beside a collapsible
+     * sidebar). The restack rule is authored per-layout — see the docs.
+     */
+    asContainer?: boolean;
+    /**
+     * Grid items — typically `GridItem` elements.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Opt in to dense packing (`grid-auto-flow: row dense`), which backfills gaps
+     * left by items with row or column spans instead of leaving holes — useful
+     * for bento layouts. Off by default because it can change the visual order.
+     */
+    dense?: boolean;
+    /**
+     * Gap between grid tracks, from the numbered spacing scale. Fixed at all
+     * breakpoints; set `mobileGap` to change it on small screens. Defaults to
+     * `xl` (24px).
+     */
+    gap?: GapScale;
+    /**
+     * Gap on small (mobile) screens. If not set, uses the same value as `gap`.
+     */
+    mobileGap?: GapScale;
+    /**
+     * Collapse the grid to a single column once its own width drops below this
+     * threshold, regardless of viewport — a curated scale (`s` 30rem, `m` 48rem,
+     * `l` 60rem, `xl` 75rem). Implies `asContainer`. For an off-scale threshold,
+     * use `asContainer` with your own `@container` rule instead.
+     */
+    stackBelow?: GridStackBreakpoint;
+}
+/**
+ * Grid layout component — a typed wrapper over the `pds-grid` utility classes.
+ * A fluid grid that is 4 columns at small viewports and 12 at medium and up;
+ * place `GridItem` children and set their column spans per breakpoint.
+ *
+ * The underlying classes (`pds-grid`, `pds-grid--gap-*`, `pds-grid-item*`) can
+ * also be used directly without this component.
+ */
+export declare const Grid: ({ asContainer, children, className, dense, gap, mobileGap, stackBelow, ...props }: GridProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/utilities/grid/GridItem.d.ts

@@ -0,0 +1,57 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './grid.css';
+type GridSpanSm = 1 | 2 | 3 | 4;
+type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type GridRowSpan = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * Prop types for GridItem
+ */
+export interface GridItemProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Item content.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Rows to span at large viewports (1–6). Falls back to the medium value.
+     */
+    rowSpanLg?: GridRowSpan;
+    /**
+     * Rows to span at medium viewports (1–6). Falls back to a single row.
+     */
+    rowSpanMd?: GridRowSpan;
+    /**
+     * Rows to span at small viewports (1–6). Falls back to a single row.
+     */
+    rowSpanSm?: GridRowSpan;
+    /**
+     * Rows to span at extra-large viewports (1–6). Falls back to the large value.
+     */
+    rowSpanXl?: GridRowSpan;
+    /**
+     * Columns to span at large viewports (1–12). Falls back to the medium value.
+     */
+    spanLg?: GridSpan;
+    /**
+     * Columns to span at medium viewports (1–12). Falls back to full width.
+     */
+    spanMd?: GridSpan;
+    /**
+     * Columns to span at small viewports (1–4). Falls back to full width.
+     */
+    spanSm?: GridSpanSm;
+    /**
+     * Columns to span at extra-large viewports (1–12). Falls back to the large value.
+     */
+    spanXl?: GridSpan;
+}
+/**
+ * GridItem — a child of `Grid`. Sets the column span per breakpoint via the
+ * `pds-grid-item--{breakpoint}-{span}` utility classes. Missing breakpoints
+ * fall back to the full column width for that viewport.
+ */
+export declare const GridItem: ({ children, className, rowSpanLg, rowSpanMd, rowSpanSm, rowSpanXl, spanLg, spanMd, spanSm, spanXl, ...props }: GridItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@pantheon-systems/pds-toolkit-react",
 	"technology": "React",
-	"version": "2.0.0-alpha.37",
+	"version": "2.0.0-alpha.39",
 	"description": "PDS toolkit built using the React framework",
 	"publishConfig": {
 		"access": "public",
@@ -114,6 +114,9 @@
 		"@babel/preset-typescript": "^7.28.5",
 		"@csstools/postcss-design-tokens": "^2.0.4",
 		"@csstools/postcss-global-data": "^1.0.3",
+		"@fortawesome/free-brands-svg-icons": "^7.2.0",
+		"@fortawesome/pro-regular-svg-icons": "^7.2.0",
+		"@fortawesome/pro-solid-svg-icons": "^7.2.0",
 		"@playwright/test": "^1.60.0",
 		"@storybook/addon-a11y": "^10.4.0",
 		"@storybook/addon-docs": "^10.4.0",
@@ -178,7 +181,7 @@
 		"@dnd-kit/utilities": "^3.2.2",
 		"@floating-ui/react": "^0.24.3",
 		"@floating-ui/react-dom": "~1.3.0",
-		"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.55",
+		"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.57",
 		"@reactuses/core": "^5.0.15",
 		"date-fns": "^4.1.0",
 		"downshift": "^9.3.2",
@@ -198,11 +201,6 @@
 		"react-toastify": "^10.0.6",
 		"recharts": "^3.8.1"
 	},
-	"optionalDependencies": {
-		"@fortawesome/free-brands-svg-icons": "^7.2.0",
-		"@fortawesome/pro-regular-svg-icons": "^7.2.0",
-		"@fortawesome/pro-solid-svg-icons": "^7.2.0"
-	},
 	"overrides": {
 		"@babel/plugin-transform-modules-systemjs": "^7.29.4",
 		"fast-uri": "^3.1.2",