@pantheon-systems/pds-toolkit-react 2.0.0-alpha.8 → 2.0.0-alpha.81

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

@@ -1,9 +1,9 @@
 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';
@@ -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,6 @@
-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 CardPaddingScale = Exclude<PaddingScale, 'none'>;
+export type CardBackground = 'default' | 'secondary' | 'transparent';
 export type VerticalAlignOptions = 'start' | 'center' | 'end';
+export type ImageDisplayVariant = 'bleed' | 'inset';

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/arrowDownWideShort.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="M249 369L145 473c-9.4 9.4-24.6 9.4-33.9 0L7 369c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l63 63 0-342.1c0-13.3 10.7-24 24-24s24 10.7 24 24l0 342.1 63-63c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zm63 111c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-48 0zm0-128c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0zm0-128c-13.3 0-24-10.7-24-24s10.7-24 24-24l176 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-176 0zm0-128c-13.3 0-24-10.7-24-24s10.7-24 24-24l240 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L312 96z"/>
+</svg>

package/dist/svg/arrowUpShortWide.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="M145 39c-9.4-9.4-24.6-9.4-33.9 0L7 143c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l63-63 0 342.1c0 13.3 10.7 24 24 24s24-10.7 24-24l0-342.1 63 63c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L145 39zm167 9c-13.3 0-24 10.7-24 24s10.7 24 24 24l48 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0zm0 128c-13.3 0-24 10.7-24 24s10.7 24 24 24l112 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-112 0zm0 128c-13.3 0-24 10.7-24 24s10.7 24 24 24l176 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-176 0zm0 128c-13.3 0-24 10.7-24 24s10.7 24 24 24l240 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-240 0z"/>
+</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/bookmark.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="M0 64C0 28.7 28.7 0 64 0L320 0c35.3 0 64 28.7 64 64l0 417.1c0 25.6-28.5 40.8-49.8 26.6L192 412.8 49.8 507.7C28.5 521.9 0 506.6 0 481.1L0 64zM64 48c-8.8 0-16 7.2-16 16l0 387.2 117.4-78.2c16.1-10.7 37.1-10.7 53.2 0L336 451.2 336 64c0-8.8-7.2-16-16-16L64 48z"/>
+</svg>

package/dist/svg/bookmarkSolid.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="M64 0C28.7 0 0 28.7 0 64L0 480c0 11.5 6.2 22.2 16.2 27.8s22.3 5.5 32.2-.4L192 421.3 335.5 507.4c9.9 5.9 22.2 6.1 32.2 .4S384 491.5 384 480l0-416c0-35.3-28.7-64-64-64L64 0z"/>
+</svg>

package/dist/svg/box.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="M400 176l0 240c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16l0-240 352 0zm-11-48l-141 0 0-64 87.1 0c5.2 0 10 2.5 13 6.7L389 128zm-189 0L59 128 99.9 70.7c3-4.2 7.9-6.7 13-6.7l87.1 0 0 64zM11.9 111.3C4.2 122.2 0 135.2 0 148.5L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-267.5c0-13.3-4.2-26.3-11.9-37.2L387.1 42.8C375.1 26 355.7 16 335.1 16L112.9 16C92.3 16 72.9 26 60.9 42.8L11.9 111.3z"/>
+</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>

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/landmark.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="M242.9 11.9c8-5.2 18.3-5.2 26.3 0l232 152c8.9 5.8 12.9 16.8 9.8 26.9S498.6 208 488 208l-40 0 0 160 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L56 416c-13.3 0-24-10.7-24-24s10.7-24 24-24l8 0 0-160-40 0c-10.6 0-20-7-23-17.1s1-21.1 9.8-26.9l232-152zM112 368l64 0 0-160-64 0 0 160zm112 0l64 0 0-160-64 0 0 160zm112 0l64 0 0-160-64 0 0 160zM104.4 160L407.6 160 256 60.7 104.4 160zM24 464l464 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L24 512c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/>
+</svg>

package/dist/svg/move.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="M273.5 7c-9.4-9.4-24.6-9.4-33.9 0l-72 72c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l31-31 0 150.1-150.1 0 31-31c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-72 72c-9.4 9.4-9.4 24.6 0 33.9l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-31-31 150.1 0 0 150.1-31-31c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c9.4 9.4 24.6 9.4 33.9 0l72-72c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-31 31 0-150.1 150.1 0-31 31c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l72-72c9.4-9.4 9.4-24.6 0-33.9l-72-72c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l31 31-150.1 0 0-150.1 31 31c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-72-72z"/>
+</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/pause.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="M48 80l0 352 64 0 0-352-64 0zM0 80C0 53.5 21.5 32 48 32l64 0c26.5 0 48 21.5 48 48l0 352c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48L0 80zm272 0l0 352 64 0 0-352-64 0zm-48 0c0-26.5 21.5-48 48-48l64 0c26.5 0 48 21.5 48 48l0 352c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-352z"/>
+</svg>

package/dist/svg/penPaintbrush.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="M116.1 222.1l33.9-33.9-94.2-94.2c-5-5-7.9-11.9-7.9-19 0-14.9 12-26.9 26.9-26.9 7.1 0 14 2.8 19 7.9l94.2 94.2 33.9-33.9-94.2-94.2C113.8 7.9 94.8 0 74.9 0 33.5 0 0 33.5 0 74.9 0 94.8 7.9 113.8 21.9 127.9l94.2 94.2zM291.8 458c21.5 32.5 58.3 54 100.2 54l152 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-6 0c-18.1 0-30.1-19.8-27.4-37.6 .9-6 1.4-12.1 1.4-18.4 0-41.9-21.5-78.7-54-100.2l-35.2 35.2c24.3 11.6 41.1 36.3 41.1 65.1 0 3.8-.3 7.5-.8 11.1-3.3 21.4 2.2 43.1 13.8 60l.7 .9-85.6 0c-28.7 0-53.5-16.8-65.1-41.1L291.8 458zM90.9 315.1c-10.7 10.7-18.5 24.1-22.6 38.7L32.9 481.6c-2.3 8.3 0 17.3 6.2 23.4s15.1 8.5 23.4 6.2l127.8-35.5c14.6-4.1 27.9-11.8 38.7-22.6l294-294C536.4 145.6 544 127.2 544 108s-7.6-37.6-21.2-51.1L487.1 21.2C473.6 7.6 455.2 0 436 0s-37.6 7.6-51.1 21.2l-294 294zM436 48c6.4 0 12.6 2.6 17.2 7.1l35.7 35.7c4.6 4.6 7.1 10.7 7.1 17.2s-2.6 12.6-7.1 17.2L436 178.1 365.9 108 418.8 55.1c4.6-4.6 10.7-7.1 17.2-7.1zM124.9 349.1L332 141.9 402.1 212 194.9 419.1c-4.9 4.9-10.9 8.4-17.6 10.3l-86.9 24.1 24.1-86.9c1.8-6.6 5.4-12.7 10.3-17.6z"/>
+</svg>

package/dist/svg/sidebar.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 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128zM176 240c0-13.3-10.7-24-24-24l-80 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24zm0 88c0-13.3-10.7-24-24-24l-80 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24zm48 72l224 0c8.8 0 16-7.2 16-16l0-256c0-8.8-7.2-16-16-16l-224 0 0 288zM176 152c0-13.3-10.7-24-24-24l-80 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24z"/>
+</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/svg/userSolid.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="M224 248a120 120 0 1 0 0-240 120 120 0 1 0 0 240zm-29.7 56C95.8 304 16 383.8 16 482.3 16 498.7 29.3 512 45.7 512l356.6 0c16.4 0 29.7-13.3 29.7-29.7 0-98.5-79.8-178.3-178.3-178.3l-59.4 0z"/>
+</svg>

package/dist/{layouts → utilities}/FlexContainer/FlexContainer.d.ts

@@ -1,12 +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 FlexGapOptions = GridGapOptions | 'minimal' | 'none';
 interface FlexContainerProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Aligns content when there is extra space in the cross-axis.
@@ -33,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.
      */
@@ -59,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`.
      */
@@ -68,5 +68,5 @@ interface FlexContainerProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Flex Container UI component
  */
-export declare const FlexContainer: ({ alignContent, alignItems, children, className, flexDirection, flexWrap, gap, justifyContent, mobileAlignContent, mobileAlignItems, mobileFlexDirection, mobileFlexWrap, mobileGap, mobileJustifyContent, ...props }: FlexContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FlexContainer: ({ alignContent, alignItems, children, className, flexDirection, flexWrap, gap, justifyContent, mobileAlignContent, mobileAlignItems, mobileFlexDirection, mobileFlexWrap, mobileGap, mobileJustifyContent, style, ...props }: FlexContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/utilities/GlobalWrapper/GlobalWrapper.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { ThemeContextProviderProps } from '../context-providers/ThemeContext/ThemeContext';
+/**
+ * Prop types for GlobalWrapper
+ */
+interface GlobalWrapperProps {
+    /**
+     * Child components
+     */
+    children: ReactNode;
+    /**
+     * Opt in to color-mode theme switching. When `true`, children are wrapped in
+     * a `ThemeContextProvider` that owns the theme and drives the `data-theme`
+     * attribute on the document root. Defaults to `false` so apps that manage
+     * their own theme are unaffected. Configure via `themeProps`.
+     */
+    enableThemeSwitching?: boolean;
+    /**
+     * Maximum viewport width in pixels at which mobile nav mode is active.
+     * Sets the `data-pds-mobile` attribute on `:root` for CSS to react to.
+     * Defaults to 767 to align with `--pds-bp-s-only` (`max-width: 767px`).
+     */
+    mobileMaxWidth?: number;
+    /**
+     * Configuration forwarded to the `ThemeContextProvider` (for example,
+     * `defaultTheme`, `storageKey`, or controlled `theme`/`onThemeChange`).
+     * Only applied when `enableThemeSwitching` is `true`.
+     */
+    themeProps?: Omit<ThemeContextProviderProps, 'children'>;
+}
+/**
+ * GlobalWrapper wrapper component.
+ */
+export declare const GlobalWrapper: ({ children, enableThemeSwitching, mobileMaxWidth, themeProps, }: GlobalWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/utilities/auto-grid/AutoGrid.d.ts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { GapScale } from '../../libs/types/layout-types';
+import './auto-grid.css';
+/**
+ * Prop types for AutoGrid
+ */
+export interface AutoGridProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Grid content. Each child is placed directly as a grid item -- no
+     * wrapper component needed.
+     */
+    children: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Gap between items, from the numbered spacing scale. Fixed at all
+     * breakpoints; set `mobileGap` to change it on small screens. Defaults
+     * to `xl`.
+     */
+    gap?: GapScale;
+    /**
+     * Minimum width of each item, as a CSS length (e.g. `'13rem'`). Items
+     * grow to evenly fill each row up to that width, wrapping to a new row
+     * once another item can't fit at it. Every item is always the same
+     * width, regardless of how many end up in the last row -- an
+     * incomplete row just leaves blank trailing space instead of
+     * stretching its items wider.
+     */
+    itemMinWidth: string;
+    /**
+     * Caps the number of columns, regardless of how much width is
+     * available. Uncapped by default.
+     */
+    maxColumns?: number;
+    /**
+     * Gap on small (mobile) screens. If not set, uses the same value as `gap`.
+     */
+    mobileGap?: GapScale;
+}
+/**
+ * AutoGrid layout component — a responsive grid that fits as many
+ * `itemMinWidth`-wide items per row as will fit, evenly filling the row up
+ * to that width, and wraps the rest to new rows. Every item is always the
+ * same width. Optionally cap the column count with `maxColumns`.
+ */
+export declare const AutoGrid: ({ children, className, gap, itemMinWidth, maxColumns, mobileGap, ...props }: AutoGridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/utilities/context-providers/ThemeContext/ThemeContext.d.ts

@@ -0,0 +1,113 @@
+import React, { ReactNode, RefObject } from 'react';
+/**
+ * The user's color-mode choice. Matches the ThemeSwitcher component's options.
+ * `'system'` follows the OS via `prefers-color-scheme`.
+ */
+export type Theme = 'light' | 'dark' | 'system';
+/**
+ * The concrete theme applied to the `data-theme` attribute. `'system'` is
+ * resolved to one of these before being applied.
+ */
+export type ResolvedTheme = 'light' | 'dark';
+interface ThemeContextValue {
+    /** Resolved theme applied to `data-theme` (`'system'` → `'light' | 'dark'`). */
+    resolvedTheme: ResolvedTheme;
+    /** Update the theme. In controlled mode this only notifies `onThemeChange`. */
+    setTheme: (theme: Theme) => void;
+    /** The user's current choice (`'system'` preserved as-is). */
+    theme: Theme;
+}
+export declare const ThemeContext: React.Context<ThemeContextValue>;
+/**
+ * Prop types for ThemeContextProvider
+ */
+export interface ThemeContextProviderProps {
+    /**
+     * Child components.
+     */
+    children: ReactNode;
+    /**
+     * Fallback theme when nothing is stored (and in uncontrolled mode).
+     * Defaults to `'light'`.
+     */
+    defaultTheme?: Theme;
+    /**
+     * Opt out of the inline anti-flash script the provider renders before its
+     * children. That script sets `data-theme` from `localStorage` during SSR
+     * before first paint, preventing a flash of the wrong theme. It is only
+     * rendered for the uncontrolled, persisted, whole-page case (no `nodeRef`);
+     * set this to `true` to suppress it — for example, if you inject the script
+     * yourself via {@link getThemeInitScript}. Defaults to `false`.
+     */
+    disableInitScript?: boolean;
+    /**
+     * Element to receive the `data-theme` attribute. Defaults to
+     * `document.documentElement` (the whole page). Provide a ref to scope theming
+     * to a subtree — for example, an embedded preview or a themed region.
+     */
+    nodeRef?: RefObject<HTMLElement | null>;
+    /**
+     * Callback fired whenever the user changes the theme. This is the hook point
+     * for persisting to a server/preference service later. Fires in both
+     * controlled and uncontrolled modes.
+     */
+    onThemeChange?: (theme: Theme) => void;
+    /**
+     * Whether to persist the theme to `localStorage`. Ignored in controlled
+     * mode (when `theme` is provided). Defaults to `true`.
+     */
+    persist?: boolean;
+    /**
+     * `localStorage` key used to persist the theme. Defaults to `'pds-theme'`.
+     */
+    storageKey?: string;
+    /**
+     * Controlled theme value. When provided, the consuming app owns the value
+     * (for example, sourced from a preference service) and the provider stops
+     * writing to `localStorage` — it only resolves and applies the value. Pair
+     * with `onThemeChange` to receive user-initiated changes.
+     */
+    theme?: Theme;
+}
+/**
+ * Options for {@link getThemeInitScript}. Match these to the values passed to
+ * the `ThemeContextProvider` (or `GlobalWrapper`'s `themeProps`).
+ */
+export interface ThemeInitScriptOptions {
+    /** Fallback theme when nothing is stored. Defaults to `'light'`. */
+    defaultTheme?: Theme;
+    /** `localStorage` key the provider persists to. Defaults to `'pds-theme'`. */
+    storageKey?: string;
+}
+/**
+ * Returns a tiny synchronous script (as a string) that sets the `data-theme`
+ * attribute on the document root from the persisted preference **before first
+ * paint** — preventing a flash of the wrong theme on server-rendered pages (a
+ * flash the provider alone cannot prevent, since it only applies the theme
+ * after hydration).
+ *
+ * The `ThemeContextProvider` renders this script automatically for the
+ * uncontrolled, persisted, whole-page case, so most apps never call this
+ * directly. It is exported for advanced setups that want to place the script
+ * themselves (for example, in the document `<head>`). Note: importing it drags
+ * in this client module, so it cannot be called from a React Server Component —
+ * let the provider inject it, or inline the string. Either way, add
+ * `suppressHydrationWarning` to the `<html>` element, since the script mutates
+ * it before React hydrates.
+ */
+export declare const getThemeInitScript: ({ defaultTheme, storageKey, }?: ThemeInitScriptOptions) => string;
+/**
+ * ThemeContextProvider — owns color-mode state and drives the `data-theme`
+ * attribute on the document root.
+ *
+ * Works standalone or via `GlobalWrapper`'s opt-in. Persists to `localStorage`
+ * by default, and exposes a controlled mode (`theme` + `onThemeChange`) so an
+ * application can take over persistence.
+ */
+export declare const ThemeContextProvider: ({ children, defaultTheme, disableInitScript, nodeRef, onThemeChange, persist, storageKey, theme: controlledTheme, }: ThemeContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Access the current theme, the resolved theme, and a setter. Returns a no-op
+ * default when no `ThemeContextProvider` is present.
+ */
+export declare const useTheme: () => ThemeContextValue;
+export {};

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 {};