@hirobius/design-system 0.8.1

package/dist/types/src/index.d.ts

@@ -0,0 +1,2276 @@
+export * from './app/components/alert';
+export * from './app/components/asset-img';
+export * from './app/components/avatar';
+export * from './app/components/badge';
+export * from './app/components/button';
+export * from './app/components/callout';
+export * from './app/components/field';
+export * from './app/components/stat';
+export * from './app/components/status-list-item';
+export * from './app/components/card';
+export * from './app/components/cinematic-link';
+export * from './app/components/code-block';
+export * from './app/components/component-instance-matrix';
+export * from './app/components/container';
+export * from './app/components/dialog';
+export * from './app/components/divider';
+export * from './app/components/menu';
+export * from './app/components/popover';
+export * from './app/components/doc-link-card';
+export * from './app/components/grid';
+export * from './app/components/heading-stack';
+export * from './app/components/history-card';
+export * from './app/components/icon';
+export * from './app/components/inline-code';
+export * from './app/components/inline-link';
+export * from './app/components/input';
+export * from './app/components/checkbox';
+export * from './app/components/radio';
+export * from './app/components/slider';
+export * from './app/components/toggle';
+export * from './app/components/nav-item';
+export * from './app/components/progress';
+export * from './app/components/skeleton';
+export * from './app/components/spinner';
+export * from './app/components/segmented-control';
+export * from './app/components/stack';
+export * from './app/components/surface';
+export * from './app/components/table';
+export * from './app/components/tag';
+export * from './app/components/text';
+export * from './app/components/token';
+export * from './app/components/page';
+export * from './app/components/empty-state';
+export * from './app/components/error-boundary';
+export * from './app/components/not-found-pattern';
+export * from './app/components/tabs';
+export * from './app/components/tile-grid';
+export * from './app/components/status-tile';
+export * from './app/components/activity-feed';
+export * from './app/components/breadcrumb';
+export * from './app/components/combobox';
+export * from './app/components/disclosure';
+export * from './app/components/form';
+export * from './app/components/foundation-swatch';
+export * from './app/components/icon-button';
+export * from './app/components/nav-group';
+export * from './app/components/pagination';
+export * from './app/components/sketch';
+export * from './app/components/stepper-field';
+export * from './app/components/text-lockup';
+export * from './app/components/toast';
+export * from './app/layouts/CaseStudyLayout';
+export * from './app/components/error-pattern';
+export * from './app/components/info-page';
+export * from './app/pages/hds/HdsSystemDocLayout';
+export { default as hds } from './app/design-system/tokens';
+/** Raw DTCG design tokens (the contents of `hirobius.tokens.json`). */
+export declare const tokens: {
+    $schema: string;
+    $description: string;
+    primitive: {
+        $description: string;
+        color: {
+            $type: string;
+            neutral: {
+                "50": {
+                    $value: string;
+                    $description: string;
+                };
+                "100": {
+                    $value: string;
+                    $description: string;
+                };
+                "200": {
+                    $value: string;
+                    $description: string;
+                };
+                "300": {
+                    $value: string;
+                    $description: string;
+                };
+                "400": {
+                    $value: string;
+                    $description: string;
+                };
+                "500": {
+                    $value: string;
+                    $description: string;
+                };
+                "600": {
+                    $value: string;
+                    $description: string;
+                };
+                "700": {
+                    $value: string;
+                    $description: string;
+                };
+                "800": {
+                    $value: string;
+                    $description: string;
+                };
+                "850": {
+                    $value: string;
+                    $description: string;
+                };
+                "900": {
+                    $value: string;
+                    $description: string;
+                };
+                "950": {
+                    $value: string;
+                    $description: string;
+                };
+                $description: string;
+                white: {
+                    $value: string;
+                    $description: string;
+                };
+                black: {
+                    $value: string;
+                    $description: string;
+                };
+            };
+            blue: {
+                "50": {
+                    $value: string;
+                    $description: string;
+                };
+                "100": {
+                    $value: string;
+                    $description: string;
+                };
+                "200": {
+                    $value: string;
+                    $description: string;
+                };
+                "300": {
+                    $value: string;
+                    $description: string;
+                };
+                "400": {
+                    $value: string;
+                    $description: string;
+                };
+                "450": {
+                    $value: string;
+                    $description: string;
+                };
+                "500": {
+                    $value: string;
+                    $description: string;
+                };
+                "600": {
+                    $value: string;
+                    $description: string;
+                };
+                "700": {
+                    $value: string;
+                    $description: string;
+                };
+                "800": {
+                    $value: string;
+                    $description: string;
+                };
+                "900": {
+                    $value: string;
+                    $description: string;
+                };
+                $description: string;
+            };
+            red: {
+                "50": {
+                    $value: string;
+                    $description: string;
+                };
+                "400": {
+                    $value: string;
+                    $description: string;
+                };
+                "700": {
+                    $value: string;
+                    $description: string;
+                };
+                "950": {
+                    $value: string;
+                    $description: string;
+                };
+                $description: string;
+            };
+            green: {
+                "50": {
+                    $value: string;
+                    $description: string;
+                };
+                "400": {
+                    $value: string;
+                    $description: string;
+                };
+                "700": {
+                    $value: string;
+                    $description: string;
+                };
+                "950": {
+                    $value: string;
+                    $description: string;
+                };
+                $description: string;
+            };
+            amber: {
+                "50": {
+                    $value: string;
+                    $description: string;
+                };
+                "400": {
+                    $value: string;
+                    $description: string;
+                };
+                "800": {
+                    $value: string;
+                    $description: string;
+                };
+                "950": {
+                    $value: string;
+                    $description: string;
+                };
+                $description: string;
+            };
+            stone: {
+                $description: string;
+                "100": {
+                    $value: string;
+                    $description: string;
+                };
+                "400": {
+                    $value: string;
+                    $description: string;
+                };
+                "450": {
+                    $value: string;
+                    $description: string;
+                };
+                "500": {
+                    $value: string;
+                    $description: string;
+                };
+                "600": {
+                    $value: string;
+                    $description: string;
+                };
+                "700": {
+                    $value: string;
+                    $description: string;
+                };
+                "800": {
+                    $value: string;
+                    $description: string;
+                };
+                "950": {
+                    $value: string;
+                    $description: string;
+                };
+            };
+            projectBrand: {
+                microsoftGameDev: {
+                    "100": {
+                        $value: string;
+                        $description: string;
+                    };
+                    "500": {
+                        $value: string;
+                        $description: string;
+                    };
+                    "900": {
+                        $value: string;
+                        $description: string;
+                    };
+                    $description: string;
+                };
+                $description: string;
+            };
+        };
+        space: {
+            "0": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "1": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "2": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "3": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "4": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "5": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "6": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "7": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "8": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "10": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "12": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "16": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "20": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "24": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "32": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            $type: string;
+            $description: string;
+            px1: {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            px2: {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            px6: {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            px10: {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+        };
+        blur: {
+            "8": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            "16": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            $type: string;
+            $description: string;
+        };
+        radius: {
+            "0": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "2": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "4": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "8": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            "12": {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            $type: string;
+            full: {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+        };
+        typography: {
+            family: {
+                $type: string;
+                primary: {
+                    $value: string[];
+                    $description: string;
+                };
+                display: {
+                    $value: string[];
+                    $description: string;
+                };
+                mono: {
+                    $value: string[];
+                    $description: string;
+                };
+            };
+            size: {
+                $type: string;
+                "2xs": {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                xs: {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                sm: {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                base: {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                lg: {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                xl: {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                "2xl": {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                "3xl": {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                "4xl": {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                "5xl": {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                "7xl": {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                    $description: string;
+                };
+            };
+            weight: {
+                $type: string;
+                light: {
+                    $value: number;
+                    $description: string;
+                };
+                regular: {
+                    $value: number;
+                };
+                medium: {
+                    $value: number;
+                };
+                semibold: {
+                    $value: number;
+                };
+                bold: {
+                    $value: number;
+                };
+            };
+            lineHeight: {
+                $type: string;
+                compact: {
+                    $value: number;
+                };
+                none: {
+                    $value: number;
+                };
+                tight: {
+                    $value: number;
+                };
+                snug: {
+                    $value: number;
+                    $description: string;
+                };
+                normal: {
+                    $value: number;
+                };
+                relaxed: {
+                    $value: number;
+                    $description: string;
+                };
+            };
+            letterSpacing: {
+                $type: string;
+                tighter: {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                tight: {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                normal: {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                wide: {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                wider: {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                caps: {
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                    $description: string;
+                };
+            };
+        };
+        duration: {
+            $type: string;
+            instant: {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            short: {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            medium: {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            long: {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+        };
+        easing: {
+            $type: string;
+            emphasized: {
+                $value: number[];
+                $description: string;
+            };
+            decelerate: {
+                $value: number[];
+                $description: string;
+            };
+            accelerate: {
+                $value: number[];
+                $description: string;
+            };
+            elastic: {
+                $type: string;
+                $value: {
+                    type: string;
+                    stiffness: number;
+                    damping: number;
+                    mass: number;
+                };
+                $description: string;
+            };
+        };
+        shadow: {
+            color: {
+                $type: string;
+                $value: string;
+                $description: string;
+                $extensions: {
+                    "com.figma.variables": {
+                        modes: {
+                            Light: string;
+                            Dark: string;
+                        };
+                    };
+                };
+            };
+        };
+        breakpoint: {
+            $description: string;
+            xs: {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            sm: {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            md: {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            lg: {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            xl: {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+        };
+        size: {
+            "8": {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            "10": {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            "12": {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            "16": {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            "20": {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            "24": {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            "32": {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            "40": {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            "48": {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            "64": {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            "80": {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            "96": {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
+            $description: string;
+            interactive: {
+                $description: string;
+                min: {
+                    $type: string;
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                    $description: string;
+                };
+            };
+            width: {
+                "96": {
+                    $type: string;
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                    $description: string;
+                };
+                "760": {
+                    $type: string;
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                "1200": {
+                    $type: string;
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                "50ch": {
+                    $type: string;
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+            };
+        };
+        grid: {
+            columns: {
+                "1": {
+                    $type: string;
+                    $value: number;
+                };
+                "2": {
+                    $type: string;
+                    $value: number;
+                };
+                "3": {
+                    $type: string;
+                    $value: number;
+                };
+            };
+        };
+        zIndex: {
+            "0": {
+                $type: string;
+                $value: number;
+            };
+            "10": {
+                $type: string;
+                $value: number;
+            };
+            "100": {
+                $type: string;
+                $value: number;
+            };
+            "1000": {
+                $type: string;
+                $value: number;
+            };
+            $description: string;
+        };
+        borderWidth: {
+            $type: string;
+            xs: {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            sm: {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+            md: {
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+            };
+        };
+    };
+    semantic: {
+        motion: {
+            $type: string;
+            productive: {
+                $value: {
+                    duration: string;
+                    easing: string;
+                };
+                $description: string;
+            };
+            expressive: {
+                $value: {
+                    duration: string;
+                    easing: string;
+                };
+                $description: string;
+            };
+            spatial: {
+                $value: {
+                    duration: string;
+                    easing: string;
+                };
+                $description: string;
+            };
+            exit: {
+                $value: {
+                    duration: string;
+                    easing: string;
+                };
+                $description: string;
+            };
+        };
+        color: {
+            $type: string;
+            surface: {
+                page: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                raised: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                overlay: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                inverse: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                accent: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                accentSubtle: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+            };
+            content: {
+                primary: {
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                secondary: {
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                disabled: {
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                inverse: {
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                accent: {
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                onAccent: {
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+            };
+            border: {
+                default: {
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                subdued: {
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                subtle: {
+                    $value: string;
+                    $description: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                strong: {
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                accent: {
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+            };
+            feedback: {
+                error: {
+                    $type: string;
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                success: {
+                    $type: string;
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                warning: {
+                    $type: string;
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                info: {
+                    $type: string;
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
+                bg: {
+                    error: {
+                        $type: string;
+                        $value: string;
+                        $extensions: {
+                            "com.figma.variables": {
+                                modes: {
+                                    Light: string;
+                                    Dark: string;
+                                };
+                            };
+                        };
+                    };
+                    success: {
+                        $type: string;
+                        $value: string;
+                        $extensions: {
+                            "com.figma.variables": {
+                                modes: {
+                                    Light: string;
+                                    Dark: string;
+                                };
+                            };
+                        };
+                    };
+                    warning: {
+                        $type: string;
+                        $value: string;
+                        $extensions: {
+                            "com.figma.variables": {
+                                modes: {
+                                    Light: string;
+                                    Dark: string;
+                                };
+                            };
+                        };
+                    };
+                    info: {
+                        $type: string;
+                        $value: string;
+                        $extensions: {
+                            "com.figma.variables": {
+                                modes: {
+                                    Light: string;
+                                    Dark: string;
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        space: {
+            $type: string;
+            $description: string;
+            subgrid: {
+                hairline: {
+                    $value: string;
+                    $description: string;
+                };
+                xs: {
+                    $value: string;
+                    $description: string;
+                };
+                gap: {
+                    $value: string;
+                    $description: string;
+                };
+            };
+            component: {
+                gap: {
+                    $value: string;
+                    $description: string;
+                };
+                medium: {
+                    $value: string;
+                    $description: string;
+                };
+                padding: {
+                    $value: string;
+                    $description: string;
+                };
+            };
+            layout: {
+                tight: {
+                    $value: string;
+                    $description: string;
+                };
+                normal: {
+                    $value: string;
+                    $description: string;
+                };
+                gutter: {
+                    $value: string;
+                    $description: string;
+                };
+                inset: {
+                    $value: string;
+                    $description: string;
+                };
+                spacious: {
+                    $value: string;
+                    $description: string;
+                };
+            };
+            section: {
+                stack: {
+                    $value: string;
+                    $description: string;
+                };
+                inset: {
+                    $value: string;
+                    $description: string;
+                };
+                heroMax: {
+                    $value: string;
+                    $description: string;
+                };
+            };
+            sidebar: {
+                indent: {
+                    $value: string;
+                    $description: string;
+                };
+                gap: {
+                    $value: string;
+                    $description: string;
+                };
+                sectionGap: {
+                    $value: string;
+                    $description: string;
+                };
+                railPadding: {
+                    $value: string;
+                    $description: string;
+                };
+            };
+        };
+        layout: {
+            width: {
+                content: {
+                    $type: string;
+                    $value: string;
+                    $description: string;
+                };
+                max: {
+                    $type: string;
+                    $value: string;
+                    $description: string;
+                };
+            };
+            container: {
+                maxWidth: {
+                    $type: string;
+                    $value: string;
+                };
+            };
+            content: {
+                maxWidth: {
+                    $type: string;
+                    $value: string;
+                };
+            };
+            prose: {
+                maxWidth: {
+                    $type: string;
+                    $value: string;
+                };
+            };
+            section: {
+                paddingY: {
+                    $type: string;
+                    $value: string;
+                };
+            };
+            grid: {
+                gap: {
+                    $type: string;
+                    $value: string;
+                };
+                columns: {
+                    mobile: {
+                        $type: string;
+                        $value: string;
+                    };
+                    tablet: {
+                        $type: string;
+                        $value: string;
+                    };
+                    desktop: {
+                        $type: string;
+                        $value: string;
+                    };
+                };
+            };
+        };
+        typography: {
+            $type: string;
+            $description: string;
+            display: {
+                $value: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    letterSpacing: string;
+                    lineHeight: string;
+                };
+                $description: string;
+                $extensions: {
+                    "com.figma.variables": {
+                        fontSize: string;
+                        note: string;
+                    };
+                };
+            };
+            h1: {
+                $value: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    letterSpacing: string;
+                    lineHeight: string;
+                };
+                $description: string;
+                $extensions: {
+                    "com.figma.variables": {
+                        fontSize: string;
+                        note: string;
+                    };
+                };
+            };
+            h2: {
+                $value: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    letterSpacing: string;
+                    lineHeight: string;
+                };
+                $description: string;
+                $extensions: {
+                    "com.figma.variables": {
+                        fontSize: string;
+                        note: string;
+                    };
+                };
+            };
+            h3: {
+                $value: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    letterSpacing: string;
+                    lineHeight: string;
+                };
+                $description: string;
+                $extensions: {
+                    "com.figma.variables": {
+                        fontSize: string;
+                        note: string;
+                    };
+                };
+            };
+            body: {
+                $value: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    letterSpacing: string;
+                    lineHeight: string;
+                    maxWidth: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                $description: string;
+            };
+            ui: {
+                $value: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    letterSpacing: string;
+                    lineHeight: string;
+                    maxWidth: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                $description: string;
+            };
+            eyebrow: {
+                $value: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    letterSpacing: string;
+                    lineHeight: string;
+                    textTransform: string;
+                };
+                $description: string;
+            };
+            mono: {
+                $value: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    letterSpacing: string;
+                    lineHeight: string;
+                    maxWidth: {
+                        value: number;
+                        unit: string;
+                    };
+                };
+                $description: string;
+            };
+            lineHeight: {
+                none: {
+                    $type: string;
+                    $value: string;
+                    $description: string;
+                };
+            };
+        };
+        docs: {
+            $description: string;
+            space: {
+                $type: string;
+                section: {
+                    $value: string;
+                    $description: string;
+                };
+                paragraph: {
+                    $value: string;
+                    $description: string;
+                };
+                inline: {
+                    $value: string;
+                    $description: string;
+                };
+            };
+        };
+        accent: {
+            $type: string;
+            rest: {
+                $value: string;
+                $description: string;
+                $extensions: {
+                    "com.figma.variables": {
+                        modes: {
+                            Light: string;
+                            Dark: string;
+                        };
+                    };
+                };
+            };
+            hover: {
+                $value: string;
+                $description: string;
+                $extensions: {
+                    "com.figma.variables": {
+                        modes: {
+                            Light: string;
+                            Dark: string;
+                        };
+                    };
+                };
+            };
+            pressed: {
+                $value: string;
+                $description: string;
+                $extensions: {
+                    "com.figma.variables": {
+                        modes: {
+                            Light: string;
+                            Dark: string;
+                        };
+                    };
+                };
+            };
+            inactive: {
+                $value: string;
+                $description: string;
+                $extensions: {
+                    "com.figma.variables": {
+                        modes: {
+                            Light: string;
+                            Dark: string;
+                        };
+                    };
+                };
+            };
+            disabled: {
+                $value: string;
+                $description: string;
+                $extensions: {
+                    "com.figma.variables": {
+                        modes: {
+                            Light: string;
+                            Dark: string;
+                        };
+                    };
+                };
+            };
+            content: {
+                $value: string;
+                $description: string;
+                $extensions: {
+                    "com.figma.variables": {
+                        modes: {
+                            Light: string;
+                            Dark: string;
+                        };
+                    };
+                };
+            };
+            contentHover: {
+                $value: string;
+                $description: string;
+                $extensions: {
+                    "com.figma.variables": {
+                        modes: {
+                            Light: string;
+                            Dark: string;
+                        };
+                    };
+                };
+            };
+            subtle: {
+                $value: string;
+                $description: string;
+                $extensions: {
+                    "com.figma.variables": {
+                        modes: {
+                            Light: string;
+                            Dark: string;
+                        };
+                    };
+                };
+            };
+        };
+        radius: {
+            action: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+        };
+        borderWidth: {
+            default: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            emphasis: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+        };
+        shadow: {
+            $type: string;
+            subtle: {
+                $value: string;
+                $description: string;
+            };
+            floating: {
+                $value: string;
+                $description: string;
+            };
+            overlay: {
+                $value: string;
+                $description: string;
+            };
+        };
+        elevation: {
+            $type: string;
+            flat: {
+                $value: {
+                    surface: string;
+                    shadow: any;
+                    border: string;
+                };
+                $description: string;
+            };
+            raised: {
+                $value: {
+                    surface: string;
+                    shadow: string;
+                    border: any;
+                };
+                $description: string;
+            };
+            floating: {
+                $value: {
+                    surface: string;
+                    shadow: string;
+                    border: any;
+                };
+                $description: string;
+            };
+            overlay: {
+                $value: {
+                    surface: string;
+                    shadow: string;
+                    border: any;
+                };
+                $description: string;
+            };
+        };
+    };
+    component: {
+        nav: {
+            bg: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            bgActive: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            borderActive: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            text: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            textActive: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            height: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            paddingX: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            paddingY: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+        };
+        tag: {
+            background: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            text: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            border: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            radius: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            fontSize: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            fontWeight: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            lineHeight: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            minWidth: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            minHeight: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            paddingX: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            paddingY: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            activeText: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            activeBackground: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            activeBorder: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            activeHover: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+        };
+        badge: {
+            fontSize: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            fontWeight: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            text: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            bg: {
+                $type: string;
+                $value: string;
+                $extensions: {
+                    "com.figma.variables": {
+                        modes: {
+                            Light: string;
+                            Dark: string;
+                        };
+                    };
+                };
+                $description: string;
+            };
+            radius: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            height: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            minWidth: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            paddingY: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            paddingX: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+        };
+        button: {
+            bg: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            bgHover: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            text: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            radius: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            paddingX: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            paddingY: {
+                $type: string;
+                $value: string;
+                $description: string;
+            };
+            size: {
+                sm: {
+                    paddingX: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    paddingY: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    fontSize: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    iconSize: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    height: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    itemSpacing: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                };
+                md: {
+                    paddingX: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    paddingY: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    fontSize: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    iconSize: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    height: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    itemSpacing: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                };
+                lg: {
+                    paddingX: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    paddingY: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    fontSize: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    iconSize: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    height: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    itemSpacing: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                };
+            };
+            primary: {
+                textDisabled: {
+                    $type: string;
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                    $description: string;
+                };
+                bgDisabled: {
+                    $type: string;
+                    $value: string;
+                    $description: string;
+                };
+            };
+            secondary: {
+                bg: {
+                    rest: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    hover: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    pressed: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                };
+                border: {
+                    rest: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    hover: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    pressed: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                    disabled: {
+                        $type: string;
+                        $value: string;
+                        $description: string;
+                    };
+                };
+                text: {
+                    $type: string;
+                    $value: string;
+                    $description: string;
+                };
+            };
+        };
+        input: {
+            bg: {
+                $type: string;
+                $value: string;
+            };
+            text: {
+                $type: string;
+                $value: string;
+            };
+            border: {
+                $type: string;
+                $value: string;
+            };
+            borderError: {
+                $type: string;
+                $value: string;
+            };
+            radius: {
+                $type: string;
+                $value: string;
+            };
+            paddingX: {
+                $type: string;
+                $value: string;
+            };
+            paddingY: {
+                $type: string;
+                $value: string;
+            };
+        };
+        card: {
+            bg: {
+                $type: string;
+                $value: string;
+            };
+            border: {
+                $type: string;
+                $value: string;
+            };
+            radius: {
+                $type: string;
+                $value: string;
+            };
+            padding: {
+                $type: string;
+                $value: string;
+            };
+            gap: {
+                $type: string;
+                $value: string;
+            };
+        };
+        lightbox: {
+            backdrop: {
+                blur: {
+                    $type: string;
+                    $value: string;
+                    $description: string;
+                };
+            };
+        };
+    };
+    role: {
+        $description: string;
+        background: {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        foreground: {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        card: {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        "card-foreground": {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        popover: {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        "popover-foreground": {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        primary: {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        "primary-foreground": {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        secondary: {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        "secondary-foreground": {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        muted: {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        "muted-foreground": {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        accent: {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        "accent-foreground": {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        destructive: {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        "destructive-foreground": {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        border: {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        input: {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        ring: {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+        radius: {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
+    };
+};
+export { cn } from './lib/utils';
+export { HdsRouterProvider, useHdsRouter } from './app/context/RouterContext';
+export type { HdsRouterAdapter, HdsRouterProviderProps, HdsLinkComponent, HdsLinkProps, HdsNavigateOptions, } from './app/context/RouterContext';