@gsa-tts/graymatter-ui 0.0.1

package/assets/images/partners/mistral-ai-logo.svg

@@ -0,0 +1,10 @@
+<svg width="38" height="26" viewBox="0 0 38 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3029_8960)">
+<path d="M16.4873 25.8936H0.744141V20.7158H16.4873V25.8936ZM37.4775 20.7158V25.8936H21.7344V20.7158H37.4775ZM11.2373 20.7119H5.99121V15.5342H11.2373V20.7119ZM21.7324 20.7119H16.4863V15.5342H21.7324V20.7119ZM32.2275 20.7119H26.9805V15.5342H32.2275V20.7119ZM11.2373 5.17773H16.4844V10.3555H21.7344V5.17773H26.9805V0H32.2275V15.5342H5.99121V0H11.2373V5.17773Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_3029_8960">
+<rect width="38" height="26" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/partners/open-ai-logo.svg

@@ -0,0 +1,8 @@
+<svg width="90" height="24" viewBox="0 0 90 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.49612 -0.000244141C4.27325 -0.000244141 0 4.27217 0 9.494C0 14.7158 4.27325 18.9883 9.49612 18.9883C14.719 18.9883 18.9922 14.7422 18.9922 9.494C18.9922 4.24573 14.7453 -0.000244141 9.49612 -0.000244141ZM9.49612 15.5861C6.25164 15.5861 3.64013 12.9225 3.64013 9.494C3.64013 6.06552 6.25164 3.40181 9.49612 3.40181C12.7406 3.40181 15.352 6.06552 15.352 9.494C15.352 12.9225 12.7406 15.5861 9.49612 15.5861Z" fill="black"/>
+<path d="M28.5932 5.27496C26.8786 5.27496 25.2168 5.96068 24.3463 7.1211V5.53867H20.9171V23.9997H24.3463V17.3274C25.2168 18.4087 26.8258 18.9889 28.5932 18.9889C32.2861 18.9889 35.1877 16.0878 35.1877 12.1319C35.1877 8.17603 32.2861 5.27496 28.5932 5.27496ZM28.0129 16.0088C26.0609 16.0088 24.3199 14.4791 24.3199 12.1319C24.3199 9.78473 26.0609 8.25509 28.0129 8.25509C29.9649 8.25509 31.7058 9.78473 31.7058 12.1319C31.7058 14.4791 29.9649 16.0088 28.0129 16.0088Z" fill="black"/>
+<path d="M43.2596 5.27496C39.5139 5.27496 36.5596 8.20238 36.5596 12.1319C36.5596 16.0615 39.1446 18.9889 43.3651 18.9889C46.8206 18.9889 49.0364 16.9054 49.7223 14.5582H46.3723C45.9502 15.5341 44.7632 16.2197 43.3387 16.2197C41.5714 16.2197 40.2261 14.9802 39.9096 13.2132H49.8805V11.8682C49.8805 8.28145 47.3746 5.27496 43.2596 5.27496ZM39.9359 10.7869C40.3053 9.12545 41.6769 8.04417 43.3387 8.04417C45.1061 8.04417 46.4513 9.20452 46.6097 10.7869H39.9359Z" fill="black"/>
+<path d="M59.0071 5.27496C57.4772 5.27496 55.8681 5.96068 55.1295 7.09475V5.53867H51.7003V18.7252H55.1295V11.6309C55.1295 9.57373 56.2373 8.22874 58.031 8.22874C59.6929 8.22874 60.5895 9.49467 60.5895 11.2617V18.7252H64.0188V10.7078C64.0188 7.43752 62.0139 5.27496 59.0071 5.27496Z" fill="black"/>
+<path d="M72.8023 0.264343L65.3372 18.7254H69.0038L70.5862 14.6904H79.0803L80.6628 18.7254H84.3818L76.9699 0.264343H72.8023ZM71.7732 11.6311L74.8333 3.90383L77.8663 11.6311H71.7732Z" fill="black"/>
+<path d="M89.2627 0.264343H85.781V18.7254H89.2627V0.264343Z" fill="black"/>
+</svg>

package/assets/images/partners/stability-ai-logo.svg

@@ -0,0 +1,10 @@
+<svg width="124" height="24" viewBox="0 0 124 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3029_8962)">
+<path d="M90.834 14.7852L93.9082 6.01953H97.3369L90.3037 24H86.6426L89.0469 18.5713L83.9473 6.01953H87.751L90.834 14.7852ZM4.97656 5.70605C7.87196 5.70605 9.10726 6.70718 9.33984 6.92285L9.38086 6.96387V9.49121C9.38086 9.49121 8.21659 8.32425 5.00293 8.32422C3.99199 8.32422 3.39551 8.73944 3.39551 9.49121C3.39572 10.349 3.95282 10.6506 5.08789 10.9219L5.28809 10.9678L6.66211 11.3057C8.91682 11.824 10.1873 13.1974 10.1875 15.167C10.1875 17.7073 8.13937 19.3144 4.95117 19.3145C1.55934 19.3145 0.279083 18.2256 0.0419922 17.9902L0 17.9463V14.915C0 14.915 1.63941 16.6708 4.9248 16.6709C6.06524 16.6709 6.71376 16.2045 6.71387 15.375C6.71387 14.4679 6.11718 14.1563 4.9248 13.8711L3.50488 13.5303C1.25022 12.9676 6.73694e-05 11.633 0 9.69824C0 7.26173 1.91804 5.70616 4.97656 5.70605ZM99.292 15.3975C100.45 15.3976 101.271 16.1942 101.271 17.3281C101.27 18.4377 100.426 19.2577 99.292 19.2578C98.1581 19.2578 97.338 18.462 97.3379 17.3281C97.3379 16.1942 98.158 15.3975 99.292 15.3975ZM16.8086 5.96484H20.3369V8.80469H16.8086V14.0977C16.8086 15.6533 17.2986 16.318 18.7061 16.3428L18.8193 16.3447C19.3753 16.3546 19.8106 16.3542 20.1162 16.3516L20.6426 16.3428V19.1602H18.3154C15.0806 19.1602 13.5 17.5798 13.5 14.3203V8.80469H11.6318V5.96484H13.5V3.13379H16.8086V5.96484ZM28.0479 5.70605C29.893 5.70605 31.5105 6.50062 32.3818 7.91016V5.98828H35.4795V18.8779H32.3818V16.9561C31.4851 18.3653 29.8422 19.16 27.9717 19.1602C24.3584 19.1602 21.8468 16.4183 21.8467 12.4463C21.8467 8.47425 24.3834 5.70618 28.0479 5.70605ZM79.3574 5.96484H82.8857V8.80469H79.3574V14.0977C79.3574 15.6533 79.8473 16.318 81.2549 16.3428L81.3672 16.3447C81.9234 16.3546 82.3593 16.3542 82.665 16.3516L83.1914 16.3428V19.1602H80.8643C77.6294 19.1602 76.0488 17.5798 76.0488 14.3203V8.80469H74.1807V5.96484H76.0488V3.13379H79.3574V5.96484ZM109.469 5.70605C111.314 5.70606 112.931 6.50087 113.802 7.91016V5.98828H116.9V18.8789H113.802V16.957C112.905 18.3662 111.262 19.1602 109.392 19.1602C105.778 19.16 103.268 16.4183 103.268 12.4463C103.268 8.47419 105.804 5.70605 109.469 5.70605ZM58.4053 19.0908H55.0967V6.09375H58.4053V19.0908ZM71.9375 19.0908H68.6289V6.09375H71.9375V19.0908ZM123.628 19.0908H120.319V6.09375H123.628V19.0908ZM42.0537 8.27051C42.9179 6.96188 44.1577 5.70608 46.2324 5.70605C50.0103 5.70605 52.208 8.78725 52.208 12.5654C52.208 16.3681 49.6895 19.085 46.2324 19.085C44.4298 19.0849 42.7937 18.3698 41.9541 17.0117V18.8887H38.7441V0.0742188H42.0537V8.27051ZM65.2344 18.9346H61.8242V0H65.2344V18.9346ZM28.5967 8.70801C26.5405 8.70801 25.125 10.3453 25.125 12.5654C25.125 14.8132 26.5137 16.4229 28.5967 16.4229C30.6528 16.4227 32.2012 14.8132 32.2012 12.5654C32.2012 10.3454 30.6795 8.70812 28.5967 8.70801ZM110.017 8.70801C107.961 8.70826 106.545 10.3456 106.545 12.5654C106.545 14.8131 107.934 16.4226 110.017 16.4229C112.073 16.4229 113.622 14.8132 113.622 12.5654C113.622 10.3454 112.099 8.70801 110.017 8.70801ZM45.5967 8.74707C43.5327 8.74722 41.9249 10.2747 41.9248 12.4189C41.9248 14.5903 43.3989 16.1982 45.5166 16.1982C47.5538 16.1982 49.0283 14.5902 49.0283 12.4189C49.0283 10.2477 47.6875 8.74707 45.5967 8.74707ZM121.963 0.206055C123.014 0.206077 123.758 0.928062 123.758 1.95703C123.758 2.96407 122.992 3.70896 121.963 3.70898C120.934 3.70898 120.189 2.98594 120.189 1.95703C120.19 0.928047 120.934 0.206055 121.963 0.206055ZM56.7402 0.205078C57.7909 0.205302 58.5352 0.928149 58.5352 1.95703C58.5351 2.96383 57.769 3.70777 56.7402 3.70801C55.7114 3.70801 54.9669 2.98584 54.9668 1.95703C54.9668 0.92799 55.7113 0.205078 56.7402 0.205078ZM70.2725 0.205078C71.3231 0.205295 72.0674 0.928144 72.0674 1.95703C72.0673 2.96383 71.3012 3.70778 70.2725 3.70801C69.2436 3.70801 68.4991 2.98584 68.499 1.95703C68.499 0.92799 69.2436 0.205078 70.2725 0.205078Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_3029_8962">
+<rect width="124" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/partners/x-ai-logo.svg

@@ -0,0 +1,13 @@
+<svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1018_775)">
+<path d="M0.578979 9.89642L13.6348 27.9992H19.4374L6.38161 9.89642H0.578979Z" fill="black"/>
+<path d="M0.572266 27.9992H6.37881L9.27984 23.9774L6.37657 19.9512L0.572266 27.9992Z" fill="black"/>
+<path d="M26.5722 -0.000244141H20.7657L10.7314 13.9128L13.6353 17.9384L26.5722 -0.000244141Z" fill="black"/>
+<path d="M21.8157 27.9992H26.5723V2.01257L21.8157 8.60782V27.9992Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1018_775">
+<rect width="26" height="28" fill="white" transform="translate(0.572266 -0.000244141)"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/progress-arrows.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84" height="83" viewBox="0 0 84 83" fill="none">
+  <path d="M21.3864 14.0002L48.8296 41.4434L21.3864 68.8866" stroke="black" stroke-width="1.4"/>
+  <path d="M32.3636 14.0002L59.8068 41.4434L32.3636 68.8866" stroke="black" stroke-width="1.4"/>
+  <path d="M42.5568 14.0002L70 41.4434L42.5568 68.8866" stroke="black" stroke-width="1.4"/>
+  <path d="M18.2501 31.2502L28.4432 41.4434L18.2501 51.6366" stroke="black" stroke-width="1.4"/>
+  <path d="M28.4432 31.2502L38.6364 41.4434L28.4432 51.6366" stroke="black" stroke-width="1.4"/>
+  <path d="M1 14.0002L13.5455 27.3298" stroke="black" stroke-width="1.4"/>
+  <path d="M11.1931 14.0002L23.7386 27.3298" stroke="black" stroke-width="1.4"/>
+  <path d="M1 68.8866L13.5455 55.5571" stroke="black" stroke-width="1.4"/>
+  <path d="M11.1931 68.8866L23.7386 55.5571" stroke="black" stroke-width="1.4"/>
+</svg>

package/assets/images/sidebar_icon.svg

@@ -0,0 +1,4 @@
+<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="96" height="96" rx="6" stroke="black" stroke-width="8"/>
+<line x1="30" y1="2" x2="30" y2="102" stroke="black" stroke-width="8"/>
+</svg>

package/assets/images/stacked-arrows.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84" height="83" viewBox="0 0 84 83" fill="none">
+  <path d="M1 44.188L21.4867 64.6747L41.9734 44.188" stroke="black" stroke-width="1.4"/>
+  <path d="M29.0266 39.5048L49.5133 19.0181L70.0001 39.5048" stroke="black" stroke-width="1.4"/>
+  <path d="M1 32.1825L21.4867 52.6692L41.9734 32.1825" stroke="black" stroke-width="1.4"/>
+  <path d="M29.0266 51.5104L49.5133 31.0237L70.0001 51.5104" stroke="black" stroke-width="1.4"/>
+  <path d="M1 20.1761L21.4867 40.6628L41.9734 20.1761" stroke="black" stroke-width="1.4"/>
+  <path d="M29.0266 63.5165L49.5133 43.0298L70.0001 63.5165" stroke="black" stroke-width="1.4"/>
+  <path d="M1 56.2055L21.4867 76.6923L41.9734 56.2055" stroke="black" stroke-width="1.4"/>
+  <path d="M29.0266 27.487L49.5133 7.00024L70.0001 27.487" stroke="black" stroke-width="1.4"/>
+</svg>

package/assets/images/stacked-modules.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84" height="83" viewBox="0 0 84 83" fill="none">
+  <path d="M34.2068 23.5151L30.6868 23.5151C23.5071 23.5151 17.6868 29.3354 17.6868 36.5151L17.6868 59.3241C17.6868 66.5038 23.5071 72.3241 30.6868 72.3241L34.2068 72.3241" stroke="black" stroke-width="1.4"/>
+  <path d="M53.48 72.3242L56.9999 72.3242C64.1796 72.3242 69.9999 66.5039 69.9999 59.3242V36.5153C69.9999 29.3356 64.1796 23.5153 56.9999 23.5153H53.48" stroke="black" stroke-width="1.4"/>
+  <path d="M39.5046 23.5848H48.5433" stroke="black" stroke-width="1.4"/>
+  <path d="M39.5046 72.2548H48.5433" stroke="black" stroke-width="1.4"/>
+  <path d="M17.5198 11.0002L13.9998 11.0002C6.82012 11.0002 0.99983 16.8205 0.999829 24.0002L0.999827 46.8092C0.999827 53.9889 6.82012 59.8092 13.9998 59.8092L17.5198 59.8092" stroke="black" stroke-width="1.4"/>
+  <path d="M36.7932 59.8091L40.3132 59.8091C47.4929 59.8091 53.3132 53.9888 53.3132 46.8091V24.0001C53.3132 16.8204 47.4929 11.0001 40.3132 11.0001H36.7932" stroke="black" stroke-width="1.4"/>
+  <path d="M22.8181 11.0697H31.8568" stroke="black" stroke-width="1.4"/>
+  <path d="M22.8181 59.7397H31.8568" stroke="black" stroke-width="1.4"/>
+</svg>

package/index.ts

@@ -0,0 +1,4 @@
+export * from './src/components';
+export * from './src/constants';
+export * from './src/helpers';
+export * from './src/component-options';

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@gsa-tts/graymatter-ui",
+  "version": "0.0.1",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts",
+    "./assets/*": "./assets/*",
+    "./astro-config": "./src/astro-config/index.ts",
+    "./component-options": "./src/component-options/index.ts",
+    "./component-options/*": "./src/component-options/*",
+    "./components": "./src/components/index.ts",
+    "./components/*": "./src/components/*",
+    "./constants": "./src/constants/index.ts",
+    "./helpers": "./src/helpers/index.ts",
+    "./helpers/*": "./src/helpers/*",
+    "./layouts/*": "./src/layouts/*",
+    "./static/*": "./static/*",
+    "./styles": "./src/styles/index.ts",
+    "./styles/*": "./src/styles/*"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "src",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*",
+    "index.ts",
+    "assets",
+    "static"
+  ],
+  "devDependencies": {
+    "@astrojs/svelte": "^7.0.13",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.8",
+    "@testing-library/user-event": "^14.6.1",
+    "@turbo/gen": "^2.4.0",
+    "@types/node": "^22.13.0",
+    "@uswds/compile": "1.2.2",
+    "@vitest/coverage-istanbul": "^3.0.7",
+    "astro-purgecss": "^5.2.2",
+    "eslint": "^9.21.0",
+    "gulp": "^5.0.0",
+    "svelte": "^5.28.2",
+    "typescript": "5.7.3",
+    "vitest": "^3.0.7",
+    "@gsa-tts/graymatter-eslint-config": "0.0.1",
+    "@gsa-tts/graymatter-typescript-config": "0.0.1",
+    "@gsa-tts/graymatter-vitest-config": "0.0.1"
+  },
+  "dependencies": {
+    "@fontsource-variable/archivo": "^5.2.6",
+    "@uswds/uswds": "3.12.0",
+    "astro": "^5.7.10",
+    "slugify": "^1.6.6",
+    "@gsa-tts/graymatter-style-tokens": "0.0.1"
+  },
+  "scripts": {
+    "build": "gulp update",
+    "lint": "eslint . --max-warnings 0",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}

package/src/astro-config/index.ts

@@ -0,0 +1,131 @@
+// @ts-check
+import { defineConfig, fontProviders } from 'astro/config';
+import type { AstroIntegration } from 'astro';
+import svelte from '@astrojs/svelte';
+import purgecss from 'astro-purgecss';
+import { join as pathJoin, dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { normalizeTrailingSlash } from '../helpers/string-formatters';
+
+interface AstroConfigOptions {
+  appDir: string;
+  overrides?: {
+    integrations?: AstroIntegration[];
+    vite?: Record<string, unknown>;
+    [key: string]: unknown;
+  };
+}
+
+/**
+ * Creates an Astro config with app-specific customizations
+ */
+export function createAstroConfig({
+  appDir,
+  overrides = {},
+}: AstroConfigOptions) {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+
+  const baseIntegrations: AstroIntegration[] = [
+    svelte(),
+    // purgecss should go last
+    purgecss({
+      fontFace: true, // Removes unused @font-face rules
+      keyframes: true, // Removes unused keyframes
+      safelist: {
+        standard: [
+          /abbr/,
+          'kbd',
+          'samp',
+          'sub',
+          'optgroup',
+          'fieldset',
+          'summary',
+          'cite',
+          'dfn',
+          'pre',
+        ],
+        deep: [/usa-in-page.+/],
+      },
+      dynamicAttributes: ['contentEditable', 'title', 'type'],
+      blocklist: [],
+      content: [
+        pathJoin(appDir, 'src/**/*.{astro,svelte,ts,tsx,js,jsx,mdx}'),
+        pathJoin(__dirname, '../components/**/*.{svelte,js,jsx,astro}'),
+      ],
+      extractors: [
+        {
+          extractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
+          extensions: ['astro', 'html'],
+        },
+      ],
+    }),
+  ];
+
+  // Handle vite config merging separately
+  const baseViteConfig = {
+    optimizeDeps: {
+      include: ['@gsa-tts/graymatter-ui'],
+    },
+    resolve: {
+      dedupe: ['@gsa-tts/graymatter-ui'],
+      alias: {
+        '@ui-assets': resolve(appDir, '../../packages/ui/assets'),
+      },
+    },
+    ssr: {
+      noExternal: ['@gsa-tts/graymatter-ui'],
+    },
+    assetsInclude: ['**/*.svg'],
+  };
+
+  const mergedViteConfig = overrides.vite
+    ? {
+        ...baseViteConfig,
+        ...overrides.vite,
+        resolve: {
+          ...baseViteConfig.resolve,
+          ...((overrides.vite.resolve as Record<string, unknown>) || {}),
+          alias: {
+            ...baseViteConfig.resolve.alias,
+            ...(((overrides.vite.resolve as Record<string, unknown>)
+              ?.alias as Record<string, unknown>) || {}),
+          },
+        },
+      }
+    : baseViteConfig;
+
+  return defineConfig({
+    base: normalizeTrailingSlash(process.env.BASEURL || ''),
+    integrations: process.env.VITEST
+      ? []
+      : overrides.integrations || baseIntegrations,
+    experimental: {
+      // Astro Experimental Fonts API for managing custom fonts
+      fonts: [
+        {
+          name: 'Archivo',
+          cssVariable: '--ai-font-family-sans', // Scoped variable name
+          provider: fontProviders.fontsource(),
+          weights: [400, 500, 600],
+          fallbacks: ['sans-serif'],
+          subsets: ['latin'],
+          styles: ['normal'],
+          optimizedFallbacks: true,
+        },
+      ],
+    },
+    image: {
+      service: {
+        entrypoint: 'astro/assets/services/noop',
+      },
+    },
+    vite: mergedViteConfig,
+    // Spread other overrides (excluding the ones we handle specifically)
+    ...Object.fromEntries(
+      Object.entries(overrides).filter(
+        ([key]) => !['integrations', 'vite'].includes(key)
+      )
+    ),
+  });
+}

package/src/component-options/componentOptions.ts

@@ -0,0 +1,39 @@
+interface WebsiteComponentOptions {
+  usaBanner?: {
+    theme?: 'inverse' | 'default';
+  };
+  agencyHeader?: {
+    theme?: 'inverse' | 'default';
+  };
+}
+
+interface ApiComponentOptions {
+  usaBanner?: {
+    theme?: 'inverse' | 'default';
+  };
+}
+
+interface ConsoleComponentOptions {
+  usaBanner?: {
+    theme?: 'inverse' | 'default';
+  };
+}
+
+export interface ComponentOptions {
+  website?: WebsiteComponentOptions;
+  api?: ApiComponentOptions;
+  console?: ConsoleComponentOptions;
+}
+
+export const componentOptions: ComponentOptions = {
+  website: {
+    usaBanner: { theme: 'inverse' },
+    agencyHeader: { theme: 'inverse' },
+  },
+  api: {
+    usaBanner: { theme: 'default' },
+  },
+  console: {
+    usaBanner: { theme: 'default' },
+  },
+};

package/src/component-options/index.ts

@@ -0,0 +1 @@
+export * from './componentOptions.js';

package/src/components/Button.svelte

@@ -0,0 +1,245 @@
+<svelte:options customElement={{
+  tag: 'ai-button',
+  props: {
+    variant: { reflect: true, type: 'String', attribute: 'variant' },
+    theme: { reflect: true, type: 'String', attribute: 'theme' },
+    href: { reflect: true, type: 'String', attribute: 'href' },
+    disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
+    size: { reflect: true, type: 'String', attribute: 'size' },
+    type: { reflect: true, type: 'String', attribute: 'type' }
+  }
+}} />
+
+<script lang="ts">
+  interface Props {
+    variant?: 'primary' | 'secondary';
+    theme?: 'default' | 'inverted';
+    href?: string;
+    disabled?: boolean;
+    size: 'small' | 'medium' | 'large';
+    type?: 'button' | 'submit' | 'reset';
+    onclick?: (event: MouseEvent) => void;
+    children: import('svelte').Snippet;
+    class?: string;
+    [key: `data-${string}`]: string;
+    [key: `aria-${string}`]: string;
+  }
+
+  let {
+    variant = 'primary',
+    theme = 'default',
+    href = null,
+    disabled = false,
+    onclick,
+    children,
+    size = 'medium',
+    type = 'button',
+    class: className = '',
+    ...props
+  }: Props = $props();
+
+  const classes = $derived(() => {
+    return [
+      'usa-button',
+      'ai-button',
+      size === 'small' ? 'ai-button--small' : '',
+      theme === 'inverted' && variant === 'primary' ? 'ai-button--inverted' : '',
+      theme === 'inverted' && variant === 'secondary' ? 'ai-button--outline-inverted' : '',
+      variant === 'primary' ? 'usa-button--primary' : '',
+      variant === 'secondary' ? 'usa-button--outline ai-button--outline' : '',
+      variant === 'unstyled' ? 'ai-button--unstyled' : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+  });
+
+  const mergedClasses = $derived(() => `${classes()} ${className}`.trim());
+</script>
+
+{#if href}
+  <a
+    class={mergedClasses()}
+    {href}
+    class:disabled
+    {onclick}
+    {...props}
+  >
+    {@render children()}
+  </a>
+{:else}
+  <button
+    class={mergedClasses()}
+    {type}
+    {disabled}
+    {onclick}
+    {...props}
+  >
+    {@render children()}
+  </button>
+{/if}
+
+
+<style>
+  :root {
+    /* global button */
+    --ai-button-radius: var(--ai-radius-round);
+    --ai-button-padding-x: 2rem;
+    --ai-button-padding-y: 0.75rem;
+    --ai-button-height: 2.5rem;
+    --ai-button-box-shadow: inset 0 0 0 1px;
+
+    /* primary button */
+    --ai-button-background-primary-rest: var(--ai-color-black);
+    --ai-button-background-primary-hover: var(
+      --ai-color-neutral-900
+    );
+    --ai-button-background-primary-disabled: var(
+      --ai-color-neutral-200
+    );
+    --ai-button-text-primary-rest: var(--ai-color-white);
+    --ai-button-text-primary-hover: var(--ai-button-text-primary-rest);
+    --ai-button-text-primary-disabled: var(--ai-color-neutral-800);
+
+    /* inverted button */
+    --ai-button-background-inverted-rest: var(--ai-color-white);
+    --ai-button-background-inverted-hover: var(--ai-color-neutral-200);
+    --ai-button-background-inverted-disabled: var(--ai-color-neutral-500);
+    --ai-button-text-inverted-rest: var(--ai-color-black);
+    --ai-button-text-inverted-hover: var(--ai-color-black);
+    --ai-button-text-inverted-disabled: var(--ai-color-neutral-900);
+    --ai-button-border-inverted-rest: none;
+    --ai-button-border-inverted-hover: none;
+    
+    /* unstyled */
+    --ai-button-text-unstyled-disabled: var(--ai-color-neutral-700);
+    --ai-button-text-unstyled-inverted-disabled: var(--ai-color-neutral-700);
+
+    /* outline button */
+    --ai-button-background-outline-hover: var(--ai-color-black);
+    --ai-button-text-outline-rest: var(--ai-color-black);
+    --ai-button-text-outline-hover: var(--ai-color-white);
+    --ai-button-border-outline-rest: var(--ai-color-black);
+    --ai-button-border-outline-hover: var(--ai-button-border-outline-rest);
+
+    /* outline inverted button */
+    --ai-button-background-outline-inverted-hover: var(--ai-color-white);
+    --ai-button-text-outline-inverted-rest: var(--ai-color-white);
+    --ai-button-text-outline-inverted-hover: var(--ai-color-black);
+    --ai-button-border-outline-inverted-rest: var(--ai-color-white);
+    --ai-button-border-outline-inverted-hover: var(
+      --ai-button-border-outline-inverted-rest
+    );
+  }
+
+  .ai-button {
+    background-color: var(--ai-button-background-primary-rest);
+    border-radius: var(--ai-button-radius);
+    color: var(--ai-button-text-primary-rest);
+    font-weight: var(--ai-font-weight-medium);
+    padding-inline: var(--ai-button-padding-x);
+    padding-block: var(--ai-button-padding-y);
+    margin: 0;
+  }
+
+  .ai-button:is(:hover, :focus) {
+    background-color: var(--ai-button-background-primary-hover);
+    color: var(--ai-button-text-primary-hover);
+  }
+  
+  .ai-button--small {
+    --ai-button-padding-x: var(--ai-size-24);
+    --ai-button-padding-y: var(--ai-size-8);
+    font-size: var(--ai-size-12);
+  }
+
+  .ai-button--outline {
+    background-color: transparent;
+    box-shadow: var(--ai-button-box-shadow) var(--ai-button-border-outline-rest);
+    color: var(--ai-button-text-outline-rest);
+  }
+
+  .ai-button--outline:is(:hover, :focus) {
+    background-color: var(--ai-button-background-outline-hover);
+    box-shadow: var(--ai-button-box-shadow) var(--ai-button-border-outline-hover);
+    color: var(--ai-button-text-outline-hover);
+  }
+
+  .ai-button--outline-inverted {
+    background-color: transparent;
+    box-shadow: var(--ai-button-box-shadow) var(--ai-button-border-outline-inverted-rest);
+    color: var(--ai-button-text-outline-inverted-rest);
+  }
+
+  .ai-button--outline-inverted:is(:hover, :focus) {
+    background-color: var(--ai-button-background-outline-inverted-hover);
+    box-shadow: var(--ai-button-box-shadow) var(--ai-button-border-outline-inverted-hover);
+    color: var(--ai-button-text-outline-inverted-hover);
+  }
+
+  .ai-button--inverted {
+    background-color: var(--ai-button-background-inverted-rest);
+    color: var(--ai-button-text-inverted-rest);
+    box-shadow: none;
+    border: var(--ai-button-border-inverted-rest);
+  }
+
+  .ai-button--inverted:is(:hover, :focus) {
+    background-color: var(--ai-button-background-inverted-hover);
+    color: var(--ai-button-text-inverted-hover);
+    border: var(--ai-button-border-inverted-hover);
+  }
+
+  .ai-button--unstyled {
+    background: none;
+    color: inherit;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: var(--ai-font-underline-offset);
+  }
+
+  .ai-button--unstyled:is(:hover, :focus) {
+    background: none;
+    color: inherit;
+    border: none;
+    box-shadow: none;
+    text-decoration: underline;
+  }
+
+  .ai-menu-buttons {
+    display: flex;
+    gap: var(--ai-size-16);
+  }
+
+  /* disabled button styles */
+  :is(.disabled, [disabled], [aria-disabled=true]) {
+    background: var(--ai-button-background-primary-disabled);
+    color: var(--ai-button-text-primary-disabled);
+    cursor: not-allowed;
+  }
+  
+  .ai-button--inverted:is(.disabled, [disabled], [aria-disabled=true]) {
+    background: var(--ai-button-background-inverted-disabled);
+    color: var(--ai-button-text-inverted-disabled);
+  }
+
+  .ai-button--outline:is(.disabled, [disabled], [aria-disabled=true]) {
+    background: transparent;
+    box-shadow: var(--ai-button-box-shadow) var(--ai-color-neutral-700);
+    color: var(--ai-color-neutral-700);
+  }
+  
+  .ai-button--outline-inverted:is(.disabled, [disabled], [aria-disabled=true]) {
+    box-shadow: var(--ai-button-box-shadow) var(--ai-color-neutral-200);
+    color: var(--ai-color-neutral-600);
+  }
+  
+  .ai-button--unstyled:is(.disabled, [disabled], [aria-disabled=true]) {
+    background: none;
+    color: inherit;
+    opacity: 0.75;
+  }
+</style>

package/src/components/Head.astro

@@ -0,0 +1,33 @@
+---
+const { title } = Astro.props;
+import { Font } from 'astro:assets';
+import { getUrlFromBase } from '@gsa-tts/graymatter-ui/helpers';
+---
+
+<meta name="viewport" content="width=device-width" />
+<link rel="icon" sizes="any" href=`${getUrlFromBase('favicon.ico')}` />
+<link rel="icon" type="image/svg+xml" href=`${getUrlFromBase('favicon.svg')}` />
+<meta name="generator" content={Astro.generator} />
+<title>{title}</title>
+<script is:inline>
+  if ('performance' in window) {
+    performance.mark('gsa:documenthead:start');
+  }
+</script>
+<script is:inline src=`${getUrlFromBase('uswds/js/uswds-init.min.js')}`
+></script>
+<Font cssVariable="--ai-font-family-sans" preload />
+<style>
+  body {
+    font-family: var(--ai-font-family-sans);
+  }
+</style>
+<script>
+  import '../../static/uswds/js/uswds.js';
+</script>
+<!-- This belongs at the very bottom of the head -->
+<script is:inline>
+  if ('performance' in window) {
+    performance.mark('gsa:documenthead:end');
+  }
+</script>

package/src/components/Logo.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  export let isInverted: boolean = false;
+  export let width: number | undefined;
+  export let height: number | undefined;
+  const defaultWidth = 105;
+  const defaultHeight = 33;
+  width = width || defaultWidth;
+  height = height || defaultHeight;
+
+  $: logoColor = isInverted ? 'var(--ai-color-white)' : 'var(--ai-color-black)';
+</script>
+
+<svg
+  {width}
+  {height}
+  viewBox="0 0 105 33"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  style="fill: {logoColor};"
+  {...$$restProps}
+>
+  <g>
+    <path
+      d="M13.4937 19.864H26.5932C25.3427 24.7736 21.4655 27.9119 16.5655 27.9119C10.167 27.9119 4.96116 22.7532 4.96116 16.4125C4.96116 10.0717 10.1636 4.91296 16.5621 4.91296C20.1777 4.91296 23.5248 6.53939 25.7437 9.37806L27.2626 11.321L31.184 8.31061L29.665 6.36765C26.4981 2.3201 21.7238 0 16.5621 0C7.43155 0 0 7.36102 0 16.4125C0 25.4639 7.43155 32.8249 16.5621 32.8249C24.9553 32.8249 31.4218 26.4 31.9383 17.5506L32.0913 14.951H13.4937V19.864Z"
+    />
+    <path
+      d="M52.9238 13.9544H44.0379C41.6559 13.9544 39.7156 12.035 39.7156 9.67113C39.7156 7.30725 41.6559 5.38786 44.0379 5.38786H61.0282V0.478271H44.0379C38.9204 0.478271 34.7578 4.60327 34.7578 9.6745C34.7578 14.7457 38.9204 18.8707 44.0379 18.8707H52.9238C55.3059 18.8707 57.2462 20.7901 57.2462 23.154C57.2462 25.5179 55.3059 27.4373 52.9238 27.4373H35.4V32.3502H52.9238C58.0413 32.3502 62.2039 28.2252 62.2039 23.154C62.2039 18.0828 58.0413 13.9578 52.9238 13.9578V13.9544Z"
+    />
+    <path d="M104.809 0.478271H99.8516V32.3468H104.809V0.478271Z" />
+    <path
+      d="M76.2292 0.478271L62.7559 32.3536H68.1316L79.5287 5.39123H79.9874L91.3811 32.3536H96.7568L83.2835 0.478271H76.2292Z"
+    />
+  </g>
+</svg>