@nationaldesignstudio/react 0.3.0 → 0.5.1

package/dist/components/organisms/navbar/navbar.js

@@ -0,0 +1,204 @@
+import { jsx as i, jsxs as g } from "react/jsx-runtime";
+import { Root as d } from "../../../node_modules/.bun/@radix-ui_react-slot@1.2.4_09a4a3ac15cb54ba/node_modules/@radix-ui/react-slot/dist/index.js";
+import * as o from "react";
+import { cnBase as l } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+import { DialogRoot as v } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/dialog/root/DialogRoot.js";
+import { DialogPortal as f } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/dialog/portal/DialogPortal.js";
+import { DialogPopup as y } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/dialog/popup/DialogPopup.js";
+import { DialogTitle as N } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/dialog/title/DialogTitle.js";
+const b = o.createContext({
+  isMobileMenuOpen: !1,
+  setIsMobileMenuOpen: () => {
+  }
+}), x = o.forwardRef(
+  ({ className: e, children: t, ...a }, n) => {
+    const [r, s] = o.useState(!1), c = o.useRef(null);
+    o.useEffect(() => {
+      const p = () => {
+        if (c.current) {
+          const u = c.current.offsetHeight;
+          document.documentElement.style.setProperty(
+            "--navbar-height",
+            `${u}px`
+          );
+        }
+      };
+      return p(), window.addEventListener("resize", p), () => window.removeEventListener("resize", p);
+    }, []);
+    const m = o.useCallback(
+      (p) => {
+        c.current = p, typeof n == "function" ? n(p) : n && (n.current = p);
+      },
+      [n]
+    );
+    return /* @__PURE__ */ i(b.Provider, { value: { isMobileMenuOpen: r, setIsMobileMenuOpen: s }, children: /* @__PURE__ */ i(
+      "nav",
+      {
+        ref: m,
+        className: l("relative z-50 w-full bg-gray-50", e),
+        ...a,
+        children: /* @__PURE__ */ i(
+          "div",
+          {
+            className: l(
+              "flex w-full items-center justify-between",
+              // Mobile
+              "px-spacing-component-navbar-padding-x-mobile py-spacing-component-navbar-padding-y-mobile",
+              // Tablet
+              "md:px-spacing-component-navbar-padding-x-tablet md:py-spacing-component-navbar-padding-y-tablet",
+              // Desktop
+              "xl:px-spacing-component-navbar-padding-x-desktop xl:py-spacing-component-navbar-padding-y-desktop"
+            ),
+            children: t
+          }
+        )
+      }
+    ) });
+  }
+);
+x.displayName = "Navbar";
+const M = o.forwardRef(
+  ({ className: e, asChild: t = !1, ...a }, n) => /* @__PURE__ */ i(t ? d : "div", { ref: n, className: l("shrink-0", e), ...a })
+);
+M.displayName = "NavbarBrand";
+const h = o.forwardRef(
+  ({ className: e, ...t }, a) => /* @__PURE__ */ i(
+    "div",
+    {
+      ref: a,
+      className: l(
+        "hidden items-center gap-spacing-component-navbar-gap-links md:flex",
+        e
+      ),
+      ...t
+    }
+  )
+);
+h.displayName = "NavbarLinks";
+const C = o.forwardRef(
+  ({ className: e, asChild: t = !1, active: a, ...n }, r) => /* @__PURE__ */ i(
+    t ? d : "a",
+    {
+      ref: r,
+      className: l(
+        "typography-body-small font-medium text-gray-900 transition-colors hover:text-gray-700",
+        a && "text-gray-1100",
+        e
+      ),
+      ...n
+    }
+  )
+);
+C.displayName = "NavbarLink";
+const k = o.forwardRef(
+  ({ className: e, ...t }, a) => /* @__PURE__ */ i(
+    "div",
+    {
+      ref: a,
+      className: l(
+        "flex items-center gap-spacing-component-navbar-gap-actions",
+        e
+      ),
+      ...t
+    }
+  )
+);
+k.displayName = "NavbarActions";
+const w = o.forwardRef(({ className: e, children: t, ...a }, n) => {
+  const { isMobileMenuOpen: r, setIsMobileMenuOpen: s } = o.useContext(b);
+  return /* @__PURE__ */ i(v, { open: r, onOpenChange: s, children: /* @__PURE__ */ i(f, { children: /* @__PURE__ */ g(
+    y,
+    {
+      ref: n,
+      className: l(
+        "fixed inset-0 z-50 bg-gray-50 md:hidden",
+        // Position below navbar
+        "pt-[calc(var(--navbar-height,60px)+1px)]",
+        // Smooth transition
+        "transition-opacity duration-200",
+        e
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ i(N, { className: "sr-only", children: "Navigation menu" }),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: l(
+              "flex flex-col",
+              // Padding matching navbar
+              "px-spacing-component-navbar-padding-x-mobile py-spacing-component-navbar-padding-y-tablet",
+              // Gap between links
+              "gap-spacing-component-navbar-gap-mobile-menu"
+            ),
+            children: t
+          }
+        )
+      ]
+    }
+  ) }) });
+});
+w.displayName = "NavbarMobileMenu";
+const R = o.forwardRef(({ className: e, asChild: t = !1, children: a, ...n }, r) => {
+  const { isMobileMenuOpen: s, setIsMobileMenuOpen: c } = o.useContext(b), m = () => {
+    c(!s);
+  };
+  return t ? /* @__PURE__ */ i(
+    d,
+    {
+      ref: r,
+      "aria-label": "Toggle navigation menu",
+      "aria-expanded": s,
+      "aria-controls": "navbar-mobile-menu",
+      onClick: m,
+      className: e,
+      ...n,
+      children: a
+    }
+  ) : /* @__PURE__ */ i(
+    "button",
+    {
+      ref: r,
+      type: "button",
+      "aria-label": "Toggle navigation menu",
+      "aria-expanded": s,
+      "aria-controls": "navbar-mobile-menu",
+      onClick: m,
+      className: l("transition-colors", e),
+      ...n,
+      children: a
+    }
+  );
+});
+R.displayName = "NavbarMobileMenuButton";
+const O = o.forwardRef(({ className: e, asChild: t = !1, active: a, onClick: n, ...r }, s) => {
+  const { setIsMobileMenuOpen: c } = o.useContext(b), m = t ? d : "a", p = (u) => {
+    c(!1), n?.(u);
+  };
+  return /* @__PURE__ */ i(
+    m,
+    {
+      ref: s,
+      className: l(
+        "typography-body-medium font-medium text-gray-900 transition-colors hover:text-gray-700",
+        "py-spacing-component-navbar-padding-y-mobile",
+        a && "text-gray-1100",
+        e
+      ),
+      onClick: p,
+      ...r
+    }
+  );
+});
+O.displayName = "NavbarMobileMenuLink";
+export {
+  x as Navbar,
+  k as NavbarActions,
+  M as NavbarBrand,
+  C as NavbarLink,
+  h as NavbarLinks,
+  w as NavbarMobileMenu,
+  R as NavbarMobileMenuButton,
+  O as NavbarMobileMenuLink
+};
+//# sourceMappingURL=navbar.js.map

package/dist/components/organisms/navbar/navbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.js","sources":["../../../../src/components/organisms/navbar/navbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog } from \"@base-ui-components/react/dialog\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n// Context for mobile menu state\nconst NavbarContext = React.createContext<{\n\tisMobileMenuOpen: boolean;\n\tsetIsMobileMenuOpen: (open: boolean) => void;\n}>({\n\tisMobileMenuOpen: false,\n\tsetIsMobileMenuOpen: () => {},\n});\n\nexport interface NavbarProps extends React.HTMLAttributes<HTMLElement> {}\n\n/**\n * Main navigation bar container.\n * Provides responsive layout for brand, links, and actions.\n */\nconst Navbar = React.forwardRef<HTMLElement, NavbarProps>(\n\t({ className, children, ...props }, ref) => {\n\t\tconst [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);\n\t\tconst navRef = React.useRef<HTMLElement>(null);\n\n\t\t// Set navbar height CSS variable for mobile menu positioning\n\t\tReact.useEffect(() => {\n\t\t\tconst updateHeight = () => {\n\t\t\t\tif (navRef.current) {\n\t\t\t\t\tconst height = navRef.current.offsetHeight;\n\t\t\t\t\tdocument.documentElement.style.setProperty(\n\t\t\t\t\t\t\"--navbar-height\",\n\t\t\t\t\t\t`${height}px`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tupdateHeight();\n\t\t\twindow.addEventListener(\"resize\", updateHeight);\n\t\t\treturn () => window.removeEventListener(\"resize\", updateHeight);\n\t\t}, []);\n\n\t\t// Merge refs\n\t\tconst mergedRef = React.useCallback(\n\t\t\t(node: HTMLElement | null) => {\n\t\t\t\t(navRef as React.MutableRefObject<HTMLElement | null>).current = node;\n\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\tref(node);\n\t\t\t\t} else if (ref) {\n\t\t\t\t\tref.current = node;\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ref],\n\t\t);\n\n\t\treturn (\n\t\t\t<NavbarContext.Provider value={{ isMobileMenuOpen, setIsMobileMenuOpen }}>\n\t\t\t\t<nav\n\t\t\t\t\tref={mergedRef}\n\t\t\t\t\tclassName={cn(\"relative z-50 w-full bg-gray-50\", className)}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"flex w-full items-center justify-between\",\n\t\t\t\t\t\t\t// Mobile\n\t\t\t\t\t\t\t\"px-spacing-component-navbar-padding-x-mobile py-spacing-component-navbar-padding-y-mobile\",\n\t\t\t\t\t\t\t// Tablet\n\t\t\t\t\t\t\t\"md:px-spacing-component-navbar-padding-x-tablet md:py-spacing-component-navbar-padding-y-tablet\",\n\t\t\t\t\t\t\t// Desktop\n\t\t\t\t\t\t\t\"xl:px-spacing-component-navbar-padding-x-desktop xl:py-spacing-component-navbar-padding-y-desktop\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</nav>\n\t\t\t</NavbarContext.Provider>\n\t\t);\n\t},\n);\nNavbar.displayName = \"Navbar\";\n\nexport interface NavbarBrandProps extends React.HTMLAttributes<HTMLDivElement> {\n\tasChild?: boolean;\n}\n\n/**\n * Brand/logo area of the navbar.\n * Use asChild to render as a link.\n */\nconst NavbarBrand = React.forwardRef<HTMLDivElement, NavbarBrandProps>(\n\t({ className, asChild = false, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"div\";\n\t\treturn <Comp ref={ref} className={cn(\"shrink-0\", className)} {...props} />;\n\t},\n);\nNavbarBrand.displayName = \"NavbarBrand\";\n\nexport interface NavbarLinksProps\n\textends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Container for navigation links.\n * Centers links on desktop, hidden on mobile (use NavbarMobileMenu instead).\n */\nconst NavbarLinks = React.forwardRef<HTMLDivElement, NavbarLinksProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"hidden items-center gap-spacing-component-navbar-gap-links md:flex\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nNavbarLinks.displayName = \"NavbarLinks\";\n\nexport interface NavbarLinkProps\n\textends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n\tasChild?: boolean;\n\tactive?: boolean;\n}\n\n/**\n * Individual navigation link.\n * Use asChild to render with a router Link component.\n */\nconst NavbarLink = React.forwardRef<HTMLAnchorElement, NavbarLinkProps>(\n\t({ className, asChild = false, active, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"a\";\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"typography-body-small font-medium text-gray-900 transition-colors hover:text-gray-700\",\n\t\t\t\t\tactive && \"text-gray-1100\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nNavbarLink.displayName = \"NavbarLink\";\n\nexport interface NavbarActionsProps\n\textends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Container for navbar action items (search, menu button, etc).\n */\nconst NavbarActions = React.forwardRef<HTMLDivElement, NavbarActionsProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex items-center gap-spacing-component-navbar-gap-actions\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nNavbarActions.displayName = \"NavbarActions\";\n\nexport interface NavbarMobileMenuProps\n\textends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Mobile menu container that displays navigation links on mobile devices.\n * Hidden on desktop (md and above). Should be used with NavbarMobileMenuButton.\n * Built on Base UI Dialog for accessibility (focus trap, escape key, click-outside).\n */\nconst NavbarMobileMenu = React.forwardRef<\n\tHTMLDivElement,\n\tNavbarMobileMenuProps\n>(({ className, children, ...props }, ref) => {\n\tconst { isMobileMenuOpen, setIsMobileMenuOpen } =\n\t\tReact.useContext(NavbarContext);\n\n\treturn (\n\t\t<Dialog.Root open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>\n\t\t\t<Dialog.Portal>\n\t\t\t\t<Dialog.Popup\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"fixed inset-0 z-50 bg-gray-50 md:hidden\",\n\t\t\t\t\t\t// Position below navbar\n\t\t\t\t\t\t\"pt-[calc(var(--navbar-height,60px)+1px)]\",\n\t\t\t\t\t\t// Smooth transition\n\t\t\t\t\t\t\"transition-opacity duration-200\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<Dialog.Title className=\"sr-only\">Navigation menu</Dialog.Title>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"flex flex-col\",\n\t\t\t\t\t\t\t// Padding matching navbar\n\t\t\t\t\t\t\t\"px-spacing-component-navbar-padding-x-mobile py-spacing-component-navbar-padding-y-tablet\",\n\t\t\t\t\t\t\t// Gap between links\n\t\t\t\t\t\t\t\"gap-spacing-component-navbar-gap-mobile-menu\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</Dialog.Popup>\n\t\t\t</Dialog.Portal>\n\t\t</Dialog.Root>\n\t);\n});\nNavbarMobileMenu.displayName = \"NavbarMobileMenu\";\n\nexport interface NavbarMobileMenuButtonProps\n\textends React.ButtonHTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean;\n}\n\n/**\n * Button to toggle the mobile menu.\n * Should be placed in NavbarActions on mobile.\n * Use asChild to render as a custom button component (e.g., IconButton).\n */\nconst NavbarMobileMenuButton = React.forwardRef<\n\tHTMLButtonElement,\n\tNavbarMobileMenuButtonProps\n>(({ className, asChild = false, children, ...props }, ref) => {\n\tconst { isMobileMenuOpen, setIsMobileMenuOpen } =\n\t\tReact.useContext(NavbarContext);\n\n\tconst handleClick = () => {\n\t\tsetIsMobileMenuOpen(!isMobileMenuOpen);\n\t};\n\n\tif (asChild) {\n\t\treturn (\n\t\t\t<Slot\n\t\t\t\tref={ref}\n\t\t\t\taria-label=\"Toggle navigation menu\"\n\t\t\t\taria-expanded={isMobileMenuOpen}\n\t\t\t\taria-controls=\"navbar-mobile-menu\"\n\t\t\t\tonClick={handleClick}\n\t\t\t\tclassName={className}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Slot>\n\t\t);\n\t}\n\n\treturn (\n\t\t<button\n\t\t\tref={ref}\n\t\t\ttype=\"button\"\n\t\t\taria-label=\"Toggle navigation menu\"\n\t\t\taria-expanded={isMobileMenuOpen}\n\t\t\taria-controls=\"navbar-mobile-menu\"\n\t\t\tonClick={handleClick}\n\t\t\tclassName={cn(\"transition-colors\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n});\nNavbarMobileMenuButton.displayName = \"NavbarMobileMenuButton\";\n\nexport interface NavbarMobileMenuLinkProps\n\textends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n\tasChild?: boolean;\n\tactive?: boolean;\n}\n\n/**\n * Navigation link for the mobile menu.\n * Automatically closes the mobile menu when clicked.\n * Use asChild to render with a router Link component.\n */\nconst NavbarMobileMenuLink = React.forwardRef<\n\tHTMLAnchorElement,\n\tNavbarMobileMenuLinkProps\n>(({ className, asChild = false, active, onClick, ...props }, ref) => {\n\tconst { setIsMobileMenuOpen } = React.useContext(NavbarContext);\n\tconst Comp = asChild ? Slot : \"a\";\n\n\tconst handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n\t\tsetIsMobileMenuOpen(false);\n\t\tonClick?.(event);\n\t};\n\n\treturn (\n\t\t<Comp\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"typography-body-medium font-medium text-gray-900 transition-colors hover:text-gray-700\",\n\t\t\t\t\"py-spacing-component-navbar-padding-y-mobile\",\n\t\t\t\tactive && \"text-gray-1100\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={handleClick}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nNavbarMobileMenuLink.displayName = \"NavbarMobileMenuLink\";\n\nexport {\n\tNavbar,\n\tNavbarBrand,\n\tNavbarLinks,\n\tNavbarLink,\n\tNavbarActions,\n\tNavbarMobileMenu,\n\tNavbarMobileMenuButton,\n\tNavbarMobileMenuLink,\n};\n"],"names":["NavbarContext","React","Navbar","className","children","props","ref","isMobileMenuOpen","setIsMobileMenuOpen","navRef","updateHeight","height","mergedRef","node","jsx","cn","NavbarBrand","asChild","Slot","NavbarLinks","NavbarLink","active","NavbarActions","NavbarMobileMenu","Dialog.Root","Dialog.Portal","jsxs","Dialog.Popup","Dialog.Title","NavbarMobileMenuButton","handleClick","NavbarMobileMenuLink","onClick","Comp","event"],"mappings":"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"}

package/dist/components/organisms/us-gov-banner/us-gov-banner.js

@@ -0,0 +1,97 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import * as H from "react";
+import { tv as c } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+const f = c({
+  slots: {
+    root: "flex w-full items-center justify-center py-12",
+    content: "flex items-center gap-8",
+    text: "text-[11px] leading-[13px] tracking-[0.17px]"
+  },
+  variants: {
+    variant: {
+      default: {
+        root: "bg-gray-50",
+        content: "opacity-70",
+        text: "text-gray-900"
+      },
+      inverted: {
+        root: "bg-transparent",
+        content: "opacity-70",
+        text: "text-text-inverted"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), d = H.forwardRef(
+  ({
+    className: n,
+    variant: a,
+    flagIcon: l,
+    text: r = "An official website of the United States government",
+    ...o
+  }, s) => {
+    const e = f({ variant: a }), V = a === "inverted";
+    return /* @__PURE__ */ t("div", { ref: s, className: e.root({ class: n }), ...o, children: /* @__PURE__ */ i("div", { className: e.content(), children: [
+      l ?? (V ? /* @__PURE__ */ t(h, {}) : /* @__PURE__ */ t(p, {})),
+      /* @__PURE__ */ t("p", { className: e.text(), children: r })
+    ] }) });
+  }
+);
+d.displayName = "USGovBanner";
+function p() {
+  return /* @__PURE__ */ i(
+    "svg",
+    {
+      width: "16",
+      height: "12",
+      viewBox: "0 0 16 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ t("path", { d: "M0 0H16V12H0V0Z", fill: "#212121", fillOpacity: "0.1" }),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M0 0H16V0.923077H0V0ZM0 1.84615H16V2.76923H0V1.84615ZM0 3.69231H16V4.61538H0V3.69231ZM0 5.53846H16V6.46154H0V5.53846ZM0 7.38462H16V8.30769H0V7.38462ZM0 9.23077H16V10.1538H0V9.23077ZM0 11.0769H16V12H0V11.0769Z",
+            fill: "#BF0A30",
+            fillOpacity: "0.8"
+          }
+        ),
+        /* @__PURE__ */ t("path", { d: "M0 0H8V6.46154H0V0Z", fill: "#002868", fillOpacity: "0.8" })
+      ]
+    }
+  );
+}
+function h() {
+  return /* @__PURE__ */ i(
+    "svg",
+    {
+      width: "16",
+      height: "12",
+      viewBox: "0 0 16 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ t("path", { d: "M0 0H16V12H0V0Z", fill: "white", fillOpacity: "0.1" }),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M0 0H16V0.923077H0V0ZM0 1.84615H16V2.76923H0V1.84615ZM0 3.69231H16V4.61538H0V3.69231ZM0 5.53846H16V6.46154H0V5.53846ZM0 7.38462H16V8.30769H0V7.38462ZM0 9.23077H16V10.1538H0V9.23077ZM0 11.0769H16V12H0V11.0769Z",
+            fill: "white",
+            fillOpacity: "0.8"
+          }
+        ),
+        /* @__PURE__ */ t("path", { d: "M0 0H8V6.46154H0V0Z", fill: "white", fillOpacity: "0.6" })
+      ]
+    }
+  );
+}
+export {
+  d as USGovBanner,
+  f as usGovBannerVariants
+};
+//# sourceMappingURL=us-gov-banner.js.map

package/dist/components/organisms/us-gov-banner/us-gov-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"us-gov-banner.js","sources":["../../../../src/components/organisms/us-gov-banner/us-gov-banner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nconst usGovBannerVariants = tv({\n\tslots: {\n\t\troot: \"flex w-full items-center justify-center py-12\",\n\t\tcontent: \"flex items-center gap-8\",\n\t\ttext: \"text-[11px] leading-[13px] tracking-[0.17px]\",\n\t},\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: {\n\t\t\t\troot: \"bg-gray-50\",\n\t\t\t\tcontent: \"opacity-70\",\n\t\t\t\ttext: \"text-gray-900\",\n\t\t\t},\n\t\t\tinverted: {\n\t\t\t\troot: \"bg-transparent\",\n\t\t\t\tcontent: \"opacity-70\",\n\t\t\t\ttext: \"text-text-inverted\",\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"default\",\n\t},\n});\n\nexport interface USGovBannerProps\n\textends React.HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof usGovBannerVariants> {\n\t/**\n\t * Custom flag icon element. Defaults to a US flag SVG.\n\t */\n\tflagIcon?: React.ReactNode;\n\t/**\n\t * Banner text content\n\t * @default \"An official website of the United States government\"\n\t */\n\ttext?: string;\n}\n\n/**\n * US Government official website banner.\n * Displays the official government website notice with flag icon.\n * Commonly placed at the very top of government websites.\n *\n * Variants:\n * - default: Light background with dark text (for light pages)\n * - inverted: Transparent background with white text/flag (for dark backgrounds/heroes)\n *\n * @example\n * ```tsx\n * // Default (light)\n * <USGovBanner />\n *\n * // Inverted (for dark backgrounds)\n * <USGovBanner variant=\"inverted\" />\n * ```\n */\nconst USGovBanner = React.forwardRef<HTMLDivElement, USGovBannerProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvariant,\n\t\t\tflagIcon,\n\t\t\ttext = \"An official website of the United States government\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst styles = usGovBannerVariants({ variant });\n\t\tconst isInverted = variant === \"inverted\";\n\n\t\treturn (\n\t\t\t<div ref={ref} className={styles.root({ class: className })} {...props}>\n\t\t\t\t<div className={styles.content()}>\n\t\t\t\t\t{flagIcon ?? (isInverted ? <WhiteUSFlag /> : <DefaultUSFlag />)}\n\t\t\t\t\t<p className={styles.text()}>{text}</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\nUSGovBanner.displayName = \"USGovBanner\";\n\nfunction DefaultUSFlag() {\n\treturn (\n\t\t<svg\n\t\t\twidth=\"16\"\n\t\t\theight=\"12\"\n\t\t\tviewBox=\"0 0 16 12\"\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<path d=\"M0 0H16V12H0V0Z\" fill=\"#212121\" fillOpacity=\"0.1\" />\n\t\t\t<path\n\t\t\t\td=\"M0 0H16V0.923077H0V0ZM0 1.84615H16V2.76923H0V1.84615ZM0 3.69231H16V4.61538H0V3.69231ZM0 5.53846H16V6.46154H0V5.53846ZM0 7.38462H16V8.30769H0V7.38462ZM0 9.23077H16V10.1538H0V9.23077ZM0 11.0769H16V12H0V11.0769Z\"\n\t\t\t\tfill=\"#BF0A30\"\n\t\t\t\tfillOpacity=\"0.8\"\n\t\t\t/>\n\t\t\t<path d=\"M0 0H8V6.46154H0V0Z\" fill=\"#002868\" fillOpacity=\"0.8\" />\n\t\t</svg>\n\t);\n}\n\nfunction WhiteUSFlag() {\n\treturn (\n\t\t<svg\n\t\t\twidth=\"16\"\n\t\t\theight=\"12\"\n\t\t\tviewBox=\"0 0 16 12\"\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<path d=\"M0 0H16V12H0V0Z\" fill=\"white\" fillOpacity=\"0.1\" />\n\t\t\t<path\n\t\t\t\td=\"M0 0H16V0.923077H0V0ZM0 1.84615H16V2.76923H0V1.84615ZM0 3.69231H16V4.61538H0V3.69231ZM0 5.53846H16V6.46154H0V5.53846ZM0 7.38462H16V8.30769H0V7.38462ZM0 9.23077H16V10.1538H0V9.23077ZM0 11.0769H16V12H0V11.0769Z\"\n\t\t\t\tfill=\"white\"\n\t\t\t\tfillOpacity=\"0.8\"\n\t\t\t/>\n\t\t\t<path d=\"M0 0H8V6.46154H0V0Z\" fill=\"white\" fillOpacity=\"0.6\" />\n\t\t</svg>\n\t);\n}\n\nexport { USGovBanner, usGovBannerVariants };\n"],"names":["usGovBannerVariants","tv","USGovBanner","React","className","variant","flagIcon","text","props","ref","styles","isInverted","jsxs","jsx","WhiteUSFlag","DefaultUSFlag"],"mappings":";;;AAGA,MAAMA,IAAsBC,EAAG;AAAA,EAC9B,OAAO;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAAA,EAEP,UAAU;AAAA,IACT,SAAS;AAAA,MACR,SAAS;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,MAEP,UAAU;AAAA,QACT,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,IACP;AAAA,EACD;AAAA,EAED,iBAAiB;AAAA,IAChB,SAAS;AAAA,EAAA;AAEX,CAAC,GAkCKC,IAAcC,EAAM;AAAA,EACzB,CACC;AAAA,IACC,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAEJC,MACI;AACJ,UAAMC,IAASV,EAAoB,EAAE,SAAAK,GAAS,GACxCM,IAAaN,MAAY;AAE/B,6BACE,OAAA,EAAI,KAAAI,GAAU,WAAWC,EAAO,KAAK,EAAE,OAAON,EAAA,CAAW,GAAI,GAAGI,GAChE,UAAA,gBAAAI,EAAC,SAAI,WAAWF,EAAO,WACrB,UAAA;AAAA,MAAAJ,MAAaK,IAAa,gBAAAE,EAACC,GAAA,CAAA,CAAY,sBAAMC,GAAA,CAAA,CAAc;AAAA,wBAC3D,KAAA,EAAE,WAAWL,EAAO,KAAA,GAAS,UAAAH,EAAA,CAAK;AAAA,IAAA,EAAA,CACpC,EAAA,CACD;AAAA,EAEF;AACD;AACAL,EAAY,cAAc;AAE1B,SAASa,IAAgB;AACxB,SACC,gBAAAH;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAC,EAAC,UAAK,GAAE,mBAAkB,MAAK,WAAU,aAAY,OAAM;AAAA,QAC3D,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,GAAE;AAAA,YACF,MAAK;AAAA,YACL,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEZ,QAAA,EAAK,GAAE,uBAAsB,MAAK,WAAU,aAAY,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlE;AAEA,SAASC,IAAc;AACtB,SACC,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAC,EAAC,UAAK,GAAE,mBAAkB,MAAK,SAAQ,aAAY,OAAM;AAAA,QACzD,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,GAAE;AAAA,YACF,MAAK;AAAA,YACL,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEZ,QAAA,EAAK,GAAE,uBAAsB,MAAK,SAAQ,aAAY,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhE;"}

package/dist/components/sections/banner/banner.js

@@ -0,0 +1,73 @@
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import * as c from "react";
+import { tv as g, cnBase as e } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+const p = g({
+  base: [
+    // Grid alignment - full width
+    "col-full",
+    // Responsive padding: mobile -> tablet -> desktop
+    // Uses primitive spacing tokens
+    "px-20 py-32",
+    "md:p-56",
+    "lg:px-72 lg:pb-72 lg:pt-0"
+  ],
+  variants: {
+    colorScheme: {
+      light: "bg-gray-50",
+      dark: "bg-gray-1200"
+    }
+  },
+  defaultVariants: {
+    colorScheme: "light"
+  }
+}), o = c.forwardRef(
+  ({ className: s, colorScheme: a, heading: l, description: d, action: i, ...n }, m) => /* @__PURE__ */ r(
+    "section",
+    {
+      ref: m,
+      className: p({ colorScheme: a, class: s }),
+      ...n,
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: e(
+            // Uses primitive spacing tokens
+            "flex flex-col md:flex-row gap-20 items-start md:items-center md:justify-between",
+            a === "dark" && "border-t border-gray-700 py-36"
+          ),
+          children: [
+            /* @__PURE__ */ t("div", { className: "flex flex-col gap-6 items-start", children: [
+              /* @__PURE__ */ r(
+                "h2",
+                {
+                  className: e(
+                    "typography-subheading-small",
+                    a === "dark" ? "text-gray-100" : "text-gray-900"
+                  ),
+                  children: l
+                }
+              ),
+              /* @__PURE__ */ r(
+                "p",
+                {
+                  className: e(
+                    "typography-body-small",
+                    a === "dark" ? "text-gray-500" : "text-gray-800"
+                  ),
+                  children: d
+                }
+              )
+            ] }),
+            i
+          ]
+        }
+      )
+    }
+  )
+);
+o.displayName = "Banner";
+export {
+  o as Banner,
+  p as bannerVariants
+};
+//# sourceMappingURL=banner.js.map

package/dist/components/sections/banner/banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.js","sources":["../../../../src/components/sections/banner/banner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Banner component based on Figma BaseKit / Banners\n *\n * Used to surface short, important updates or a single key action\n * without disrupting the main page content.\n *\n * Responsive behavior using 24-column grid:\n * - Mobile (sm): Stacked layout, 20px horizontal / 32px vertical padding\n * - Tablet (md): Horizontal layout, 56px padding\n * - Desktop (lg): Horizontal layout, 72px padding\n *\n * Must be placed inside a `grid-container`. Uses `col-full` to span all columns.\n */\nconst bannerVariants = tv({\n\tbase: [\n\t\t// Grid alignment - full width\n\t\t\"col-full\",\n\t\t// Responsive padding: mobile -> tablet -> desktop\n\t\t// Uses primitive spacing tokens\n\t\t\"px-20 py-32\",\n\t\t\"md:p-56\",\n\t\t\"lg:px-72 lg:pb-72 lg:pt-0\",\n\t],\n\tvariants: {\n\t\tcolorScheme: {\n\t\t\tlight: \"bg-gray-50\",\n\t\t\tdark: \"bg-gray-1200\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolorScheme: \"light\",\n\t},\n});\n\nexport interface BannerProps\n\textends React.HTMLAttributes<HTMLElement>,\n\t\tVariantProps<typeof bannerVariants> {\n\t/**\n\t * The heading text displayed in the banner\n\t */\n\theading: string;\n\t/**\n\t * The description text displayed below the heading\n\t */\n\tdescription: string;\n\t/**\n\t * Optional action element (typically a Button component)\n\t */\n\taction?: React.ReactNode;\n}\n\n/**\n * Banner component for surfacing important updates or CTAs.\n *\n * Uses the 24-column grid system - must be placed inside a `grid-container`.\n * Spans full width with `col-full`.\n *\n * Responsive across breakpoints:\n * - Mobile: Stacked layout with smaller padding\n * - Tablet: Horizontal layout with medium padding\n * - Desktop: Horizontal layout with larger padding\n *\n * @example\n * ```tsx\n * <div className=\"grid-container\">\n *   <Banner\n *     heading=\"Important Update\"\n *     description=\"Check out our new features.\"\n *     action={<Button>Learn More</Button>}\n *   />\n * </div>\n *\n * // Dark colorScheme\n * <Banner\n *   colorScheme=\"dark\"\n *   heading=\"Still Have Questions?\"\n *   description=\"Contact us at support@example.com\"\n *   action={<Button variant=\"secondary\">Email Us</Button>}\n * />\n * ```\n */\nconst Banner = React.forwardRef<HTMLElement, BannerProps>(\n\t({ className, colorScheme, heading, description, action, ...props }, ref) => {\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={bannerVariants({ colorScheme, class: className })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Inner container with border-top for dark colorScheme */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t// Uses primitive spacing tokens\n\t\t\t\t\t\t\"flex flex-col md:flex-row gap-20 items-start md:items-center md:justify-between\",\n\t\t\t\t\t\tcolorScheme === \"dark\" && \"border-t border-gray-700 py-36\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{/* Copy section */}\n\t\t\t\t\t<div className=\"flex flex-col gap-6 items-start\">\n\t\t\t\t\t\t<h2\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"typography-subheading-small\",\n\t\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-100\" : \"text-gray-900\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{heading}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"typography-body-small\",\n\t\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-500\" : \"text-gray-800\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t{/* Action slot */}\n\t\t\t\t\t{action}\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n);\nBanner.displayName = \"Banner\";\n\nexport { Banner, bannerVariants };\n"],"names":["bannerVariants","tv","Banner","React","className","colorScheme","heading","description","action","props","ref","jsx","jsxs","cn"],"mappings":";;;AAiBA,MAAMA,IAAiBC,EAAG;AAAA,EACzB,MAAM;AAAA;AAAA,IAEL;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAED,UAAU;AAAA,IACT,aAAa;AAAA,MACZ,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,EACP;AAAA,EAED,iBAAiB;AAAA,IAChB,aAAa;AAAA,EAAA;AAEf,CAAC,GAiDKC,IAASC,EAAM;AAAA,EACpB,CAAC,EAAE,WAAAC,GAAW,aAAAC,GAAa,SAAAC,GAAS,aAAAC,GAAa,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAEnE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAAD;AAAA,MACA,WAAWV,EAAe,EAAE,aAAAK,GAAa,OAAOD,GAAW;AAAA,MAC1D,GAAGK;AAAA,MAGJ,UAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAWC;AAAAA;AAAAA,YAEV;AAAA,YACAR,MAAgB,UAAU;AAAA,UAAA;AAAA,UAI3B,UAAA;AAAA,YAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,mCACd,UAAA;AAAA,cAAA,gBAAAD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACA,WAAWE;AAAAA,oBACV;AAAA,oBACAR,MAAgB,SAAS,kBAAkB;AAAA,kBAAA;AAAA,kBAG3C,UAAAC;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEF,gBAAAK;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACA,WAAWE;AAAAA,oBACV;AAAA,oBACAR,MAAgB,SAAS,kBAAkB;AAAA,kBAAA;AAAA,kBAG3C,UAAAE;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF,GACD;AAAA,YAECC;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIJ;AACAN,EAAO,cAAc;"}

package/dist/components/sections/card-grid/card-grid.js

@@ -0,0 +1,66 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import * as i from "react";
+import { tv as n, cnBase as l } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+const g = n({
+  // Base styles - grid-container for proper grid context - uses primitive spacing tokens
+  base: [
+    "grid-container",
+    // Small (mobile): 72px y padding
+    "py-72",
+    // Large (desktop): 128px y padding
+    "lg:py-128"
+  ],
+  variants: {
+    variant: {
+      A: "",
+      B: ""
+    }
+  },
+  defaultVariants: {
+    variant: "A"
+  }
+}), p = i.forwardRef(
+  ({ className: d, variant: a, title: e, cards: c, ...t }, o) => /* @__PURE__ */ m(
+    "section",
+    {
+      ref: o,
+      className: g({ variant: a, class: d }),
+      ...t,
+      children: [
+        /* @__PURE__ */ r(
+          "h2",
+          {
+            className: l(
+              "col-full",
+              "typography-h4 text-gray-900",
+              // Gap after title: mobile default, md: 56px, lg: 64px
+              "mb-36 md:mb-56 lg:mb-64"
+            ),
+            children: e
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: l(
+              "col-full",
+              // Mobile: single column
+              "grid grid-cols-1 gap-20",
+              // Tablet: 2 columns
+              "md:grid-cols-2",
+              // Desktop: 3 columns for variant A, 2 columns for variant B
+              a === "A" && "lg:grid-cols-3"
+            ),
+            children: i.Children.toArray(c).map((s) => /* @__PURE__ */ r("div", { children: s }, s.key))
+          }
+        )
+      ]
+    }
+  )
+);
+p.displayName = "CardGrid";
+export {
+  p as CardGrid,
+  g as cardGridVariants
+};
+//# sourceMappingURL=card-grid.js.map

package/dist/components/sections/card-grid/card-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-grid.js","sources":["../../../../src/components/sections/card-grid/card-grid.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * CardGrid component for displaying cards in a responsive grid layout\n *\n * Variants:\n * - A: 3 columns on desktop, 2 on tablet, 1 on mobile\n * - B: 2 columns on desktop/tablet, 1 on mobile\n *\n * Uses the 24-column grid system with grid-container as root.\n */\nconst cardGridVariants = tv({\n\t// Base styles - grid-container for proper grid context - uses primitive spacing tokens\n\tbase: [\n\t\t\"grid-container\",\n\t\t// Small (mobile): 72px y padding\n\t\t\"py-72\",\n\t\t// Large (desktop): 128px y padding\n\t\t\"lg:py-128\",\n\t],\n\tvariants: {\n\t\tvariant: {\n\t\t\tA: \"\",\n\t\t\tB: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"A\",\n\t},\n});\n\nexport interface CardGridProps\n\textends React.HTMLAttributes<HTMLElement>,\n\t\tVariantProps<typeof cardGridVariants> {\n\t/**\n\t * The title text displayed above the cards\n\t */\n\ttitle: string;\n\t/**\n\t * The card elements to display in the grid\n\t */\n\tcards: React.ReactNode[];\n}\n\n/**\n * CardGrid component for displaying cards in a responsive grid layout.\n *\n * Uses the 24-column grid system with grid-container as root.\n *\n * Layout (Variant A):\n * - Mobile (sm): Single column, py-72\n * - Tablet (md): 2 columns, gap-56 between title and cards, gap-y-20 between cards\n * - Desktop (lg+): 3 columns, py-128, gap-64 between title and cards, gap-y-20 between cards\n *\n * Layout (Variant B):\n * - Mobile (sm): Single column, py-72\n * - Tablet (md): 2 columns, gap-56 between title and cards, gap-y-20 between cards\n * - Desktop (lg+): 2 columns, py-128, gap-64 between title and cards, gap-y-20 between cards\n *\n * @example\n * ```tsx\n * <CardGrid\n *   variant=\"A\"\n *   title=\"Featured Cards\"\n *   cards={[\n *     <Card key=\"1\">...</Card>,\n *     <Card key=\"2\">...</Card>,\n *   ]}\n * />\n * ```\n */\nconst CardGrid = React.forwardRef<HTMLElement, CardGridProps>(\n\t({ className, variant, title, cards, ...props }, ref) => {\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardGridVariants({ variant, class: className })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Title - col-full within grid - uses primitive spacing tokens */}\n\t\t\t\t<h2\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"col-full\",\n\t\t\t\t\t\t\"typography-h4 text-gray-900\",\n\t\t\t\t\t\t// Gap after title: mobile default, md: 56px, lg: 64px\n\t\t\t\t\t\t\"mb-36 md:mb-56 lg:mb-64\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</h2>\n\n\t\t\t\t{/* Inner grid for cards - uses primitive spacing tokens */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"col-full\",\n\t\t\t\t\t\t// Mobile: single column\n\t\t\t\t\t\t\"grid grid-cols-1 gap-20\",\n\t\t\t\t\t\t// Tablet: 2 columns\n\t\t\t\t\t\t\"md:grid-cols-2\",\n\t\t\t\t\t\t// Desktop: 3 columns for variant A, 2 columns for variant B\n\t\t\t\t\t\tvariant === \"A\" && \"lg:grid-cols-3\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{React.Children.toArray(cards).map((card) => (\n\t\t\t\t\t\t<div key={(card as React.ReactElement).key}>{card}</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n);\nCardGrid.displayName = \"CardGrid\";\n\nexport { CardGrid, cardGridVariants };\n"],"names":["cardGridVariants","tv","CardGrid","React","className","variant","title","cards","props","ref","jsxs","jsx","cn","card"],"mappings":";;;AAaA,MAAMA,IAAmBC,EAAG;AAAA;AAAA,EAE3B,MAAM;AAAA,IACL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAAA,EAED,UAAU;AAAA,IACT,SAAS;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACJ;AAAA,EAED,iBAAiB;AAAA,IAChB,SAAS;AAAA,EAAA;AAEX,CAAC,GA0CKC,IAAWC,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,OAAAC,GAAO,OAAAC,GAAO,GAAGC,EAAA,GAASC,MAE/C,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAAD;AAAA,MACA,WAAWT,EAAiB,EAAE,SAAAK,GAAS,OAAOD,GAAW;AAAA,MACxD,GAAGI;AAAA,MAGJ,UAAA;AAAA,QAAA,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAWC;AAAAA,cACV;AAAA,cACA;AAAA;AAAA,cAEA;AAAA,YAAA;AAAA,YAGA,UAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,QAIF,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAWC;AAAAA,cACV;AAAA;AAAA,cAEA;AAAA;AAAA,cAEA;AAAA;AAAA,cAEAP,MAAY,OAAO;AAAA,YAAA;AAAA,YAGnB,UAAAF,EAAM,SAAS,QAAQI,CAAK,EAAE,IAAI,CAACM,MACnC,gBAAAF,EAAC,OAAA,EAA4C,UAAAE,EAAA,GAAlCA,EAA4B,GAAW,CAClD;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIJ;AACAX,EAAS,cAAc;"}

package/dist/components/sections/faq-section/faq-section.js

@@ -0,0 +1,37 @@
+import { jsx as m } from "react/jsx-runtime";
+import * as n from "react";
+import { TwoColumnSection as d } from "../two-column-section/two-column-section.js";
+import { cnBase as i } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+const c = n.forwardRef(
+  ({
+    className: o,
+    colorScheme: a = "light",
+    title: t = "Frequently Asked Questions",
+    children: r,
+    layout: e,
+    ...p
+  }, y) => /* @__PURE__ */ m(
+    d,
+    {
+      ref: y,
+      colorScheme: a,
+      layout: e ?? void 0,
+      title: t,
+      className: i(
+        // Override title typography to be larger
+        "[&_h2]:typography-h4",
+        // Accordion typography overrides
+        "[&_button]:typography-body-large [&_button]:md:typography-h5",
+        "[&_[data-accordion-panel]]:typography-body-medium [&_[data-accordion-panel]]:md:typography-body-large",
+        o
+      ),
+      ...p,
+      children: r
+    }
+  )
+);
+c.displayName = "FaqSection";
+export {
+  c as FaqSection
+};
+//# sourceMappingURL=faq-section.js.map

package/dist/components/sections/faq-section/faq-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"faq-section.js","sources":["../../../../src/components/sections/faq-section/faq-section.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\nimport { TwoColumnSection } from \"../two-column-section\";\nimport type { twoColumnSectionVariants } from \"../two-column-section/two-column-section\";\n\nexport interface FaqSectionProps\n\textends Omit<React.HTMLAttributes<HTMLElement>, \"title\">,\n\t\tVariantProps<typeof twoColumnSectionVariants> {\n\t/**\n\t * The title text displayed in the left column\n\t * @default \"Frequently Asked Questions\"\n\t */\n\ttitle?: string;\n\t/**\n\t * The FAQ content - typically an Accordion with AccordionItems\n\t */\n\tchildren: React.ReactNode;\n}\n\n/**\n * FaqSection component for displaying FAQ content in a two-column layout.\n *\n * Wraps TwoColumnSection with FAQ-specific defaults and typography.\n *\n * Layout:\n * - Mobile/Tablet: Stacked (title above content)\n * - Desktop (lg+): Title left (~40%), FAQ content right (~60%)\n *\n * @example\n * ```tsx\n * <FaqSection>\n *   <Accordion defaultExpanded=\"faq-1\">\n *     <AccordionItem id=\"faq-1\" title=\"What is the US Tech Force?\">\n *       Tech Force will be an elite group of technology specialists...\n *     </AccordionItem>\n *     <AccordionItem id=\"faq-2\" title=\"What skills are required?\">\n *       We're looking for expertise in software engineering...\n *     </AccordionItem>\n *   </Accordion>\n * </FaqSection>\n *\n * // With custom title\n * <FaqSection title=\"Common Questions\" colorScheme=\"light\">\n *   ...\n * </FaqSection>\n * ```\n */\nconst FaqSection = React.forwardRef<HTMLElement, FaqSectionProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tcolorScheme = \"light\",\n\t\t\ttitle = \"Frequently Asked Questions\",\n\t\t\tchildren,\n\t\t\tlayout,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<TwoColumnSection\n\t\t\t\tref={ref}\n\t\t\t\tcolorScheme={colorScheme}\n\t\t\t\tlayout={layout ?? undefined}\n\t\t\t\ttitle={title}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t// Override title typography to be larger\n\t\t\t\t\t\"[&_h2]:typography-h4\",\n\t\t\t\t\t// Accordion typography overrides\n\t\t\t\t\t\"[&_button]:typography-body-large [&_button]:md:typography-h5\",\n\t\t\t\t\t\"[&_[data-accordion-panel]]:typography-body-medium [&_[data-accordion-panel]]:md:typography-body-large\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</TwoColumnSection>\n\t\t);\n\t},\n);\nFaqSection.displayName = \"FaqSection\";\n\nexport { FaqSection };\n"],"names":["FaqSection","React","className","colorScheme","title","children","layout","props","ref","jsx","TwoColumnSection","cn"],"mappings":";;;;AAgDA,MAAMA,IAAaC,EAAM;AAAA,EACxB,CACC;AAAA,IACC,WAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MAGC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,KAAAF;AAAA,MACA,aAAAL;AAAA,MACA,QAAQG,KAAU;AAAA,MAClB,OAAAF;AAAA,MACA,WAAWO;AAAAA;AAAAA,QAEV;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACAT;AAAA,MAAA;AAAA,MAEA,GAAGK;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAIL;AACAL,EAAW,cAAc;"}

package/dist/components/sections/hero/hero.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'tailwind-variants';
 import { ComponentTheme } from '../../../lib/theme';
 import * as React from "react";
 export { Background as HeroBackground, BackgroundGradient as HeroGradient, type BackgroundGradientProps as HeroGradientProps, BackgroundImage as HeroBackgroundImage, type BackgroundImageProps as HeroBackgroundImageProps, BackgroundOverlay as HeroOverlay, type BackgroundOverlayProps as HeroOverlayProps, BackgroundStream as HeroBackgroundStream, type BackgroundStreamProps as HeroBackgroundStreamProps, BackgroundVideo as HeroBackgroundVideo, type BackgroundVideoProps as HeroBackgroundVideoProps, } from '../../atoms/background';
-declare const DEFAULT_TITLE_TYPOGRAPHY = "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192 font-medium";
+declare const DEFAULT_TITLE_TYPOGRAPHY = "typography-h1-display";
 declare const heroVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         A1: {
@@ -254,7 +254,7 @@ export interface HeroProps extends Omit<React.HTMLAttributes<HTMLElement>, "titl
     title?: string;
     /**
      * Custom typography class for the title using primitive tokens.
-     * Default: "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192"
+     * Default: "typography-h1-display"
      */
     titleClassName?: string;
     /**