@nationaldesignstudio/react 0.5.0 → 0.5.1

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.js

@@ -0,0 +1,159 @@
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import * as n from "react";
+import { tv as i } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+import { themeToStyleVars as b } from "../../../lib/theme.js";
+import { BackgroundOverlay as V } from "../../atoms/background/background.js";
+import { Background as P, BackgroundImage as Y, BackgroundStream as _, BackgroundVideo as D, BackgroundGradient as F } from "../../atoms/background/background.js";
+const j = "typography-h1-display", A = i({
+  slots: {
+    root: "relative flex w-full flex-col overflow-hidden",
+    top: "relative z-10 w-full",
+    content: [
+      "relative z-10 mx-auto flex w-full max-w-screen-xl flex-1 flex-col",
+      "p-20",
+      "md:p-56"
+    ],
+    title: j
+  },
+  variants: {
+    variant: {
+      A1: {
+        root: "min-h-[80vh]",
+        content: ["justify-end", "lg:p-72"]
+      },
+      A2: {
+        root: "min-h-[80vh]",
+        content: ["justify-start", "lg:p-64"]
+      },
+      A3: {
+        root: "min-h-[80vh]",
+        content: ["items-center justify-center", "lg:p-64"]
+      }
+    },
+    colorScheme: {
+      dark: {
+        root: "bg-bg-page",
+        title: "text-text-primary"
+      },
+      light: {
+        root: "bg-gray-900",
+        title: "text-text-inverted"
+      }
+    },
+    hasBackground: {
+      true: {
+        root: "bg-transparent"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "A1",
+    colorScheme: "dark"
+  }
+}), C = i({
+  base: "relative z-10 w-full"
+}), z = i({
+  base: [
+    "relative z-10 mx-auto flex w-full max-w-screen-xl flex-1 flex-col",
+    "p-20",
+    "md:p-56",
+    "lg:p-72"
+  ]
+}), u = n.forwardRef(
+  ({ className: e, ...r }, t) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: t,
+      className: C({ class: e }),
+      ...r
+    }
+  )
+);
+u.displayName = "Hero.Header";
+const v = n.forwardRef(
+  ({ className: e, ...r }, t) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: t,
+      className: z({ class: e }),
+      ...r
+    }
+  )
+);
+v.displayName = "Hero.Content";
+function T(e) {
+  return typeof e == "string" && (e.startsWith("#") || e.startsWith("rgb") || e.startsWith("hsl") || /^(var\(|[a-z]+$)/i.test(e));
+}
+const c = n.forwardRef(
+  ({
+    className: e,
+    children: r,
+    title: t,
+    titleClassName: y,
+    colorScheme: H = "dark",
+    top: d,
+    variant: k,
+    background: a,
+    overlayOpacity: m = 0,
+    overlayColor: l = "black",
+    borderRadius: f,
+    theme: B,
+    style: w,
+    ...N
+  }, S) => {
+    const h = T(a), g = a && !h, s = A({
+      variant: k,
+      colorScheme: H,
+      hasBackground: !!a
+    }), p = {
+      ...b(B),
+      ...h ? { backgroundColor: a } : {},
+      ...f ? { borderRadius: f } : {},
+      ...w
+    };
+    return /* @__PURE__ */ x(
+      "section",
+      {
+        ref: S,
+        className: s.root({ class: e }),
+        style: Object.keys(p).length > 0 ? p : void 0,
+        ...N,
+        children: [
+          g && a,
+          g && m > 0 && /* @__PURE__ */ o(
+            V,
+            {
+              opacity: m,
+              className: l !== "black" ? void 0 : "bg-black",
+              style: l !== "black" ? { backgroundColor: l } : void 0
+            }
+          ),
+          d && /* @__PURE__ */ o("div", { className: s.top(), children: d }),
+          /* @__PURE__ */ x("div", { className: s.content(), children: [
+            t && /* @__PURE__ */ o("h1", { className: s.title({ class: y }), children: t }),
+            r
+          ] })
+        ]
+      }
+    );
+  }
+);
+c.displayName = "Hero";
+c.Header = u;
+c.Content = v;
+export {
+  j as DEFAULT_TITLE_TYPOGRAPHY,
+  c as Hero,
+  P as HeroBackground,
+  Y as HeroBackgroundImage,
+  _ as HeroBackgroundStream,
+  D as HeroBackgroundVideo,
+  v as HeroContent,
+  F as HeroGradient,
+  u as HeroHeader,
+  V as HeroOverlay,
+  z as heroContentVariants,
+  C as heroHeaderVariants,
+  A as heroVariants
+};
+//# sourceMappingURL=hero.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hero.js","sources":["../../../../src/components/sections/hero/hero.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { BackgroundOverlay } from \"@/components/atoms/background\";\nimport { type ComponentTheme, themeToStyleVars } from \"@/lib/theme\";\n\n// Re-export Background components for convenience as HeroBackground\nexport {\n\tBackground as HeroBackground,\n\tBackgroundGradient as HeroGradient,\n\ttype BackgroundGradientProps as HeroGradientProps,\n\tBackgroundImage as HeroBackgroundImage,\n\ttype BackgroundImageProps as HeroBackgroundImageProps,\n\tBackgroundOverlay as HeroOverlay,\n\ttype BackgroundOverlayProps as HeroOverlayProps,\n\tBackgroundStream as HeroBackgroundStream,\n\ttype BackgroundStreamProps as HeroBackgroundStreamProps,\n\tBackgroundVideo as HeroBackgroundVideo,\n\ttype BackgroundVideoProps as HeroBackgroundVideoProps,\n} from \"@/components/atoms/background\";\n\nconst DEFAULT_TITLE_TYPOGRAPHY = \"typography-h1-display\";\n\nconst heroVariants = tv({\n\tslots: {\n\t\troot: \"relative flex w-full flex-col overflow-hidden\",\n\t\ttop: \"relative z-10 w-full\",\n\t\tcontent: [\n\t\t\t\"relative z-10 mx-auto flex w-full max-w-screen-xl flex-1 flex-col\",\n\t\t\t\"p-20\",\n\t\t\t\"md:p-56\",\n\t\t],\n\t\ttitle: DEFAULT_TITLE_TYPOGRAPHY,\n\t},\n\tvariants: {\n\t\tvariant: {\n\t\t\tA1: {\n\t\t\t\troot: \"min-h-[80vh]\",\n\t\t\t\tcontent: [\"justify-end\", \"lg:p-72\"],\n\t\t\t},\n\t\t\tA2: {\n\t\t\t\troot: \"min-h-[80vh]\",\n\t\t\t\tcontent: [\"justify-start\", \"lg:p-64\"],\n\t\t\t},\n\t\t\tA3: {\n\t\t\t\troot: \"min-h-[80vh]\",\n\t\t\t\tcontent: [\"items-center justify-center\", \"lg:p-64\"],\n\t\t\t},\n\t\t},\n\t\tcolorScheme: {\n\t\t\tdark: {\n\t\t\t\troot: \"bg-bg-page\",\n\t\t\t\ttitle: \"text-text-primary\",\n\t\t\t},\n\t\t\tlight: {\n\t\t\t\troot: \"bg-gray-900\",\n\t\t\t\ttitle: \"text-text-inverted\",\n\t\t\t},\n\t\t},\n\t\thasBackground: {\n\t\t\ttrue: {\n\t\t\t\troot: \"bg-transparent\",\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"A1\",\n\t\tcolorScheme: \"dark\",\n\t},\n});\n\n// =============================================================================\n// Standalone variants for sub-components (for external use)\n// =============================================================================\n\nconst heroHeaderVariants = tv({\n\tbase: \"relative z-10 w-full\",\n});\n\nconst heroContentVariants = tv({\n\tbase: [\n\t\t\"relative z-10 mx-auto flex w-full max-w-screen-xl flex-1 flex-col\",\n\t\t\"p-20\",\n\t\t\"md:p-56\",\n\t\t\"lg:p-72\",\n\t],\n});\n\nexport interface HeroHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Header slot for Hero - used for navigation, gov banners, etc.\n * Full-width with no padding, sits at the top of the hero.\n */\nconst HeroHeader = React.forwardRef<HTMLDivElement, HeroHeaderProps>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={heroHeaderVariants({ class: className })}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nHeroHeader.displayName = \"Hero.Header\";\n\nexport interface HeroContentProps\n\textends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Content container for Hero - use for main content.\n * Has padding and sits above backgrounds with z-10.\n */\nconst HeroContent = React.forwardRef<HTMLDivElement, HeroContentProps>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={heroContentVariants({ class: className })}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nHeroContent.displayName = \"Hero.Content\";\n\n// =============================================================================\n// Hero Component\n// =============================================================================\n\nexport interface HeroProps\n\textends Omit<React.HTMLAttributes<HTMLElement>, \"title\">,\n\t\tVariantProps<typeof heroVariants> {\n\t/**\n\t * The title text displayed in the hero.\n\t * If provided, renders an h1 with default typography.\n\t * Omit to use children for custom content composition.\n\t */\n\ttitle?: string;\n\t/**\n\t * Custom typography class for the title using primitive tokens.\n\t * Default: \"typography-h1-display\"\n\t */\n\ttitleClassName?: string;\n\t/**\n\t * Color scheme for text content.\n\t * - dark: Dark text for use on light backgrounds (default)\n\t * - light: Light text for use on dark backgrounds\n\t */\n\tcolorScheme?: \"dark\" | \"light\";\n\t/**\n\t * Content for the top slot (full-width, no padding).\n\t * Use for USGovBanner, Navigation, etc.\n\t */\n\ttop?: React.ReactNode;\n\t/**\n\t * Background for the hero. Can be:\n\t * - A color string (hex, rgb, etc.) for solid backgrounds\n\t * - A ReactNode (use HeroBackground.Image, HeroBackground.Video, or HeroBackground.Stream)\n\t */\n\tbackground?: React.ReactNode | string;\n\t/**\n\t * Opacity of the overlay (0-1, default: 0)\n\t * Only applies when using a background slot\n\t */\n\toverlayOpacity?: number;\n\t/**\n\t * Color of the overlay (default: \"black\")\n\t */\n\toverlayColor?: string;\n\t/**\n\t * Border radius for the hero container\n\t * Useful for designs with rounded bottom corners\n\t */\n\tborderRadius?: string;\n\t/**\n\t * Theme overrides for component styling via CSS custom properties\n\t */\n\ttheme?: ComponentTheme;\n}\n\n/**\n * Checks if the background prop is a color string\n */\nfunction isColorString(\n\tbackground: React.ReactNode | string | undefined,\n): background is string {\n\treturn (\n\t\ttypeof background === \"string\" &&\n\t\t(background.startsWith(\"#\") ||\n\t\t\tbackground.startsWith(\"rgb\") ||\n\t\t\tbackground.startsWith(\"hsl\") ||\n\t\t\t/^(var\\(|[a-z]+$)/i.test(background))\n\t);\n}\n\n/**\n * Hero component for page headers with large display typography.\n *\n * Slots:\n * - `top`: Full-width slot at top for USGovBanner, Navigation (no padding)\n * - `children`: Main content slot with padding and alignment\n *\n * The `title` prop is a convenience for simple heroes - it renders an h1 with\n * responsive typography. Children are always rendered, so you can use both\n * or just children for full control.\n *\n * Variants:\n * - A1: Content at bottom (default)\n * - A2: Content at top\n * - A3: Content centered\n *\n * @example\n * ```tsx\n * // Simple - just title and background\n * <Hero title=\"Welcome\" background=\"#1a1a1a\" />\n *\n * // With top slot for banner/nav\n * <Hero\n *   variant=\"A1\"\n *   background={<HeroBackground.Image src=\"/hero.jpg\" />}\n *   top={\n *     <>\n *       <USGovBanner variant=\"inverted\" />\n *       <Navigation />\n *     </>\n *   }\n * >\n *   <h1>Board of Peace</h1>\n *   <p>Subtitle goes here</p>\n * </Hero>\n * ```\n */\nconst Hero = React.forwardRef<HTMLElement, HeroProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\ttitle,\n\t\t\ttitleClassName,\n\t\t\tcolorScheme = \"dark\",\n\t\t\ttop,\n\t\t\tvariant,\n\t\t\tbackground,\n\t\t\toverlayOpacity = 0,\n\t\t\toverlayColor = \"black\",\n\t\t\tborderRadius,\n\t\t\ttheme,\n\t\t\tstyle,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isColor = isColorString(background);\n\t\tconst hasMediaBackground = background && !isColor;\n\t\tconst styles = heroVariants({\n\t\t\tvariant,\n\t\t\tcolorScheme,\n\t\t\thasBackground: !!background,\n\t\t});\n\t\tconst themeStyles = themeToStyleVars(theme);\n\t\tconst combinedStyles = {\n\t\t\t...themeStyles,\n\t\t\t...(isColor ? { backgroundColor: background } : {}),\n\t\t\t...(borderRadius ? { borderRadius } : {}),\n\t\t\t...style,\n\t\t};\n\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={styles.root({ class: className })}\n\t\t\t\tstyle={\n\t\t\t\t\tObject.keys(combinedStyles).length > 0 ? combinedStyles : undefined\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{hasMediaBackground && background}\n\n\t\t\t\t{hasMediaBackground && overlayOpacity > 0 && (\n\t\t\t\t\t<BackgroundOverlay\n\t\t\t\t\t\topacity={overlayOpacity}\n\t\t\t\t\t\tclassName={overlayColor !== \"black\" ? undefined : \"bg-black\"}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\toverlayColor !== \"black\"\n\t\t\t\t\t\t\t\t? { backgroundColor: overlayColor }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{top && <div className={styles.top()}>{top}</div>}\n\n\t\t\t\t<div className={styles.content()}>\n\t\t\t\t\t{title && (\n\t\t\t\t\t\t<h1 className={styles.title({ class: titleClassName })}>{title}</h1>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Children - always render if provided */}\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n) as React.ForwardRefExoticComponent<\n\tHeroProps & React.RefAttributes<HTMLElement>\n> & {\n\tHeader: typeof HeroHeader;\n\tContent: typeof HeroContent;\n};\nHero.displayName = \"Hero\";\n\n// Attach sub-components\nHero.Header = HeroHeader;\nHero.Content = HeroContent;\n\nexport {\n\tHero,\n\theroVariants,\n\theroContentVariants,\n\theroHeaderVariants,\n\tDEFAULT_TITLE_TYPOGRAPHY,\n\tHeroHeader,\n\tHeroContent,\n};\n"],"names":["DEFAULT_TITLE_TYPOGRAPHY","heroVariants","tv","heroHeaderVariants","heroContentVariants","HeroHeader","React","className","props","ref","jsx","HeroContent","isColorString","background","Hero","children","title","titleClassName","colorScheme","top","variant","overlayOpacity","overlayColor","borderRadius","theme","style","isColor","hasMediaBackground","styles","combinedStyles","themeToStyleVars","jsxs","BackgroundOverlay"],"mappings":"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"}

package/dist/components/sections/prose/prose.js

@@ -0,0 +1,48 @@
+import { jsx as s, jsxs as f } from "react/jsx-runtime";
+import * as t from "react";
+import { cnBase as l } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+const i = t.forwardRef(
+  ({ className: a, children: o, ...e }, r) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: r,
+      className: l(
+        "flex w-full max-w-[700px] flex-col overflow-hidden",
+        // Responsive gap between sections
+        "gap-56 md:gap-72 xl:gap-96",
+        a
+      ),
+      ...e,
+      children: o
+    }
+  )
+);
+i.displayName = "Prose";
+const n = t.forwardRef(
+  ({ className: a, heading: o, as: e = "h2", children: r, ...p }, c) => {
+    const m = e, d = e === "h2" ? "typography-h3" : "typography-h4";
+    return /* @__PURE__ */ f(
+      "section",
+      {
+        ref: c,
+        className: l(
+          "flex w-full flex-col",
+          // Responsive gap between heading and body
+          "gap-24 md:gap-40",
+          a
+        ),
+        ...p,
+        children: [
+          /* @__PURE__ */ s(m, { className: l(d, "text-gray-900"), children: o }),
+          /* @__PURE__ */ s("div", { className: "typography-body-medium flex flex-col gap-[1em] text-gray-800 break-words", children: r })
+        ]
+      }
+    );
+  }
+);
+n.displayName = "ProseSection";
+export {
+  i as Prose,
+  n as ProseSection
+};
+//# sourceMappingURL=prose.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prose.js","sources":["../../../../src/components/sections/prose/prose.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ProseProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Prose container for long-form content with proper typography and spacing.\n *\n * Provides responsive spacing between content blocks:\n * - Desktop (1440px+): 96px gap\n * - Tablet (768px+): 72px gap\n * - Mobile: 56px gap\n *\n * Use with ProseSection components for proper content structure.\n */\nconst Prose = React.forwardRef<HTMLDivElement, ProseProps>(\n\t({ className, children, ...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 w-full max-w-[700px] flex-col overflow-hidden\",\n\t\t\t\t\t// Responsive gap between sections\n\t\t\t\t\t\"gap-56 md:gap-72 xl:gap-96\",\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</div>\n\t\t);\n\t},\n);\nProse.displayName = \"Prose\";\n\nexport interface ProseSectionProps extends React.HTMLAttributes<HTMLElement> {\n\t/**\n\t * The heading text for this section\n\t */\n\theading: string;\n\t/**\n\t * The heading level to render (h2 or h3)\n\t * @default \"h2\"\n\t */\n\tas?: \"h2\" | \"h3\";\n\tchildren: React.ReactNode;\n}\n\n/**\n * A section within Prose content, containing a heading and body text.\n *\n * Responsive typography:\n * - h2: Uses typography-h3\n * - h3: Uses typography-h4\n * - Body: Uses typography-body-medium\n */\nconst ProseSection = React.forwardRef<HTMLElement, ProseSectionProps>(\n\t({ className, heading, as = \"h2\", children, ...props }, ref) => {\n\t\tconst Heading = as;\n\t\tconst headingClass = as === \"h2\" ? \"typography-h3\" : \"typography-h4\";\n\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex w-full flex-col\",\n\t\t\t\t\t// Responsive gap between heading and body\n\t\t\t\t\t\"gap-24 md:gap-40\",\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<Heading className={cn(headingClass, \"text-gray-900\")}>\n\t\t\t\t\t{heading}\n\t\t\t\t</Heading>\n\t\t\t\t<div className=\"typography-body-medium flex flex-col gap-[1em] text-gray-800 break-words\">\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n);\nProseSection.displayName = \"ProseSection\";\n\nexport { Prose, ProseSection };\n"],"names":["Prose","React","className","children","props","ref","jsx","cn","ProseSection","heading","as","Heading","headingClass","jsxs"],"mappings":";;;AAiBA,MAAMA,IAAQC,EAAM;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAElC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAAD;AAAA,MACA,WAAWE;AAAAA,QACV;AAAA;AAAA,QAEA;AAAA,QACAL;AAAA,MAAA;AAAA,MAEA,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAIL;AACAH,EAAM,cAAc;AAuBpB,MAAMQ,IAAeP,EAAM;AAAA,EAC1B,CAAC,EAAE,WAAAC,GAAW,SAAAO,GAAS,IAAAC,IAAK,MAAM,UAAAP,GAAU,GAAGC,EAAA,GAASC,MAAQ;AAC/D,UAAMM,IAAUD,GACVE,IAAeF,MAAO,OAAO,kBAAkB;AAErD,WACC,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,KAAAR;AAAA,QACA,WAAWE;AAAAA,UACV;AAAA;AAAA,UAEA;AAAA,UACAL;AAAA,QAAA;AAAA,QAEA,GAAGE;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAE,EAACK,KAAQ,WAAWJ,EAAGK,GAAc,eAAe,GAClD,UAAAH,GACF;AAAA,UACA,gBAAAH,EAAC,OAAA,EAAI,WAAU,4EACb,UAAAH,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGH;AACD;AACAK,EAAa,cAAc;"}