@nationaldesignstudio/react 0.3.0 → 0.5.1

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

package/dist/components/sections/quote-block/quote-block.js

@@ -0,0 +1,130 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import * as v from "react";
+import { tv as b } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+import { BackgroundOverlay as N } from "../../atoms/background/background.js";
+const k = b({
+  slots: {
+    root: "relative flex min-h-[500px] w-full flex-col overflow-hidden rounded-radius-8",
+    content: [
+      "relative z-10 flex max-w-[1440px] flex-1 flex-col items-start justify-end",
+      "p-40",
+      "md:p-80",
+      "lg:p-112"
+    ],
+    quoteWrapper: "relative flex flex-col gap-40 md:gap-48",
+    quote: [
+      "relative text-text-inverted",
+      "typography-small-headline-small",
+      "md:typography-medium-headline-small",
+      "lg:typography-large-headline-small",
+      "font-serif md:font-serif lg:font-serif"
+    ],
+    openQuote: [
+      "absolute text-text-inverted",
+      "typography-small-headline-small",
+      "md:typography-medium-headline-small",
+      "lg:typography-large-headline-small",
+      "font-serif md:font-serif lg:font-serif",
+      "-left-[0.5em] -top-[0.1em]"
+    ],
+    attribution: "flex flex-col items-start gap-4",
+    signature: "h-auto w-[120px] md:w-[153px]",
+    byline: "flex flex-col text-text-inverted",
+    bylineName: "typography-body-medium text-text-inverted",
+    bylineTitle: "typography-body-medium text-text-inverted opacity-80"
+  },
+  variants: {
+    size: {
+      default: {
+        root: ""
+      },
+      compact: {
+        root: "min-h-[400px] lg:min-h-[600px]"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+}), q = v.forwardRef(
+  ({
+    className: c,
+    quote: o,
+    showQuoteMarks: n = !0,
+    signatureImage: r,
+    signatureAlt: m = "Signature",
+    attributionName: t,
+    attributionTitle: s,
+    background: p,
+    overlayOpacity: d = 0,
+    overlayColor: i = "black",
+    quoteClassName: f,
+    bylineNameClassName: x,
+    bylineTitleClassName: h,
+    size: y,
+    ...u
+  }, g) => {
+    const e = k({ size: y });
+    return /* @__PURE__ */ a(
+      "section",
+      {
+        ref: g,
+        className: e.root({ class: c }),
+        ...u,
+        children: [
+          p,
+          d > 0 && /* @__PURE__ */ l(
+            N,
+            {
+              opacity: d,
+              className: i !== "black" ? void 0 : "bg-black",
+              style: i !== "black" ? { backgroundColor: i } : void 0
+            }
+          ),
+          /* @__PURE__ */ l("div", { className: e.content(), children: /* @__PURE__ */ a("div", { className: e.quoteWrapper(), children: [
+            /* @__PURE__ */ a("blockquote", { className: e.quote({ class: f }), children: [
+              n && /* @__PURE__ */ l("span", { className: e.openQuote(), "aria-hidden": "true", children: '"' }),
+              /* @__PURE__ */ l("span", { className: "relative", children: n ? `${o}"` : o })
+            ] }),
+            (r || t || s) && /* @__PURE__ */ a("div", { className: e.attribution(), children: [
+              r && /* @__PURE__ */ l(
+                "img",
+                {
+                  src: r,
+                  alt: m,
+                  className: e.signature()
+                }
+              ),
+              (t || s) && /* @__PURE__ */ a("div", { className: e.byline(), children: [
+                t && /* @__PURE__ */ l(
+                  "span",
+                  {
+                    className: e.bylineName({
+                      class: x
+                    }),
+                    children: t
+                  }
+                ),
+                s && /* @__PURE__ */ l(
+                  "span",
+                  {
+                    className: e.bylineTitle({
+                      class: h
+                    }),
+                    children: s
+                  }
+                )
+              ] })
+            ] })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+q.displayName = "QuoteBlock";
+export {
+  q as QuoteBlock,
+  k as quoteBlockVariants
+};
+//# sourceMappingURL=quote-block.js.map

package/dist/components/sections/quote-block/quote-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quote-block.js","sources":["../../../../src/components/sections/quote-block/quote-block.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { BackgroundOverlay } from \"@/components/atoms/background\";\n\n// =============================================================================\n// QuoteBlock Variants\n// =============================================================================\n\nconst quoteBlockVariants = tv({\n\tslots: {\n\t\troot: \"relative flex min-h-[500px] w-full flex-col overflow-hidden rounded-radius-8\",\n\t\tcontent: [\n\t\t\t\"relative z-10 flex max-w-[1440px] flex-1 flex-col items-start justify-end\",\n\t\t\t\"p-40\",\n\t\t\t\"md:p-80\",\n\t\t\t\"lg:p-112\",\n\t\t],\n\t\tquoteWrapper: \"relative flex flex-col gap-40 md:gap-48\",\n\t\tquote: [\n\t\t\t\"relative text-text-inverted\",\n\t\t\t\"typography-small-headline-small\",\n\t\t\t\"md:typography-medium-headline-small\",\n\t\t\t\"lg:typography-large-headline-small\",\n\t\t\t\"font-serif md:font-serif lg:font-serif\",\n\t\t],\n\t\topenQuote: [\n\t\t\t\"absolute text-text-inverted\",\n\t\t\t\"typography-small-headline-small\",\n\t\t\t\"md:typography-medium-headline-small\",\n\t\t\t\"lg:typography-large-headline-small\",\n\t\t\t\"font-serif md:font-serif lg:font-serif\",\n\t\t\t\"-left-[0.5em] -top-[0.1em]\",\n\t\t],\n\t\tattribution: \"flex flex-col items-start gap-4\",\n\t\tsignature: \"h-auto w-[120px] md:w-[153px]\",\n\t\tbyline: \"flex flex-col text-text-inverted\",\n\t\tbylineName: \"typography-body-medium text-text-inverted\",\n\t\tbylineTitle: \"typography-body-medium text-text-inverted opacity-80\",\n\t},\n\tvariants: {\n\t\tsize: {\n\t\t\tdefault: {\n\t\t\t\troot: \"\",\n\t\t\t},\n\t\t\tcompact: {\n\t\t\t\troot: \"min-h-[400px] lg:min-h-[600px]\",\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"default\",\n\t},\n});\n\n// =============================================================================\n// QuoteBlock Component\n// =============================================================================\n\nexport interface QuoteBlockProps\n\textends Omit<React.HTMLAttributes<HTMLElement>, \"children\">,\n\t\tVariantProps<typeof quoteBlockVariants> {\n\t/**\n\t * The quote text to display\n\t */\n\tquote: string;\n\t/**\n\t * Whether to show decorative quote marks\n\t * @default true\n\t */\n\tshowQuoteMarks?: boolean;\n\t/**\n\t * Signature image URL (optional)\n\t */\n\tsignatureImage?: string;\n\t/**\n\t * Alt text for signature image\n\t */\n\tsignatureAlt?: string;\n\t/**\n\t * Attribution name (e.g., \"Donald J. Trump\")\n\t */\n\tattributionName?: string;\n\t/**\n\t * Attribution title (e.g., \"45 & 47 President of the United States\")\n\t */\n\tattributionTitle?: string;\n\t/**\n\t * Background element - use BackgroundImage or similar\n\t */\n\tbackground?: React.ReactNode;\n\t/**\n\t * Overlay opacity (0-1)\n\t */\n\toverlayOpacity?: number;\n\t/**\n\t * Overlay color\n\t */\n\toverlayColor?: string;\n\t/**\n\t * Custom class for the quote text\n\t */\n\tquoteClassName?: string;\n\t/**\n\t * Custom class for the byline name\n\t */\n\tbylineNameClassName?: string;\n\t/**\n\t * Custom class for the byline title\n\t */\n\tbylineTitleClassName?: string;\n}\n\nconst QuoteBlock = React.forwardRef<HTMLElement, QuoteBlockProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tquote,\n\t\t\tshowQuoteMarks = true,\n\t\t\tsignatureImage,\n\t\t\tsignatureAlt = \"Signature\",\n\t\t\tattributionName,\n\t\t\tattributionTitle,\n\t\t\tbackground,\n\t\t\toverlayOpacity = 0,\n\t\t\toverlayColor = \"black\",\n\t\t\tquoteClassName,\n\t\t\tbylineNameClassName,\n\t\t\tbylineTitleClassName,\n\t\t\tsize,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst styles = quoteBlockVariants({ size });\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\t{...props}\n\t\t\t>\n\t\t\t\t{/* Background */}\n\t\t\t\t{background}\n\n\t\t\t\t{/* Overlay */}\n\t\t\t\t{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{/* Content */}\n\t\t\t\t<div className={styles.content()}>\n\t\t\t\t\t<div className={styles.quoteWrapper()}>\n\t\t\t\t\t\t{/* Quote */}\n\t\t\t\t\t\t<blockquote className={styles.quote({ class: quoteClassName })}>\n\t\t\t\t\t\t\t{showQuoteMarks && (\n\t\t\t\t\t\t\t\t<span className={styles.openQuote()} aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span className=\"relative\">\n\t\t\t\t\t\t\t\t{showQuoteMarks ? `${quote}\"` : quote}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\n\t\t\t\t\t\t{/* Attribution */}\n\t\t\t\t\t\t{(signatureImage || attributionName || attributionTitle) && (\n\t\t\t\t\t\t\t<div className={styles.attribution()}>\n\t\t\t\t\t\t\t\t{signatureImage && (\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\tsrc={signatureImage}\n\t\t\t\t\t\t\t\t\t\talt={signatureAlt}\n\t\t\t\t\t\t\t\t\t\tclassName={styles.signature()}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{(attributionName || attributionTitle) && (\n\t\t\t\t\t\t\t\t\t<div className={styles.byline()}>\n\t\t\t\t\t\t\t\t\t\t{attributionName && (\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={styles.bylineName({\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass: bylineNameClassName,\n\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{attributionName}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{attributionTitle && (\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={styles.bylineTitle({\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass: bylineTitleClassName,\n\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{attributionTitle}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n);\n\nQuoteBlock.displayName = \"QuoteBlock\";\n\nexport { QuoteBlock, quoteBlockVariants };\n"],"names":["quoteBlockVariants","tv","QuoteBlock","React","className","quote","showQuoteMarks","signatureImage","signatureAlt","attributionName","attributionTitle","background","overlayOpacity","overlayColor","quoteClassName","bylineNameClassName","bylineTitleClassName","size","props","ref","styles","jsxs","jsx","BackgroundOverlay"],"mappings":"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"}

package/dist/components/sections/river/river.js

@@ -0,0 +1,100 @@
+import { jsxs as a, jsx as l, Fragment as i } from "react/jsx-runtime";
+import * as f from "react";
+import { tv as x, cnBase as e } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+const v = x({
+  // Base styles - col-full within parent grid, responsive padding using primitive spacing tokens
+  base: [
+    "col-full",
+    // Small (mobile): 20px x, 72px top, 20px bottom
+    "px-20 pt-72 pb-20",
+    // Medium (tablet): 56px x, 96px y
+    "md:px-56 md:py-96",
+    // Large (desktop): 72px x, 128px y
+    "lg:px-72 lg:py-128"
+  ],
+  variants: {
+    variant: {
+      A: "",
+      B: ""
+    }
+  },
+  defaultVariants: {
+    variant: "A"
+  }
+}), y = f.forwardRef(
+  ({
+    className: n,
+    variant: s,
+    headline: t,
+    body: o,
+    primaryAction: d,
+    secondaryAction: m,
+    media: p,
+    ...g
+  }, h) => {
+    const r = /* @__PURE__ */ a(
+      "div",
+      {
+        className: e(
+          "flex flex-col",
+          // Full width on mobile/tablet, 9 cols on desktop
+          "lg:col-span-9"
+        ),
+        children: [
+          /* @__PURE__ */ a("div", { className: "flex flex-col gap-16", children: [
+            /* @__PURE__ */ l("h2", { className: "typography-h4 text-gray-900", children: t }),
+            /* @__PURE__ */ l("p", { className: "typography-body-small text-gray-800", children: o })
+          ] }),
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: e("flex flex-row gap-16 mt-36", "[&>*]:flex-shrink-0"),
+              children: [
+                d,
+                m
+              ]
+            }
+          )
+        ]
+      }
+    ), c = /* @__PURE__ */ l(
+      "div",
+      {
+        className: e(
+          // Full width on mobile/tablet, 15 cols on desktop
+          "lg:col-span-15",
+          // Ensure media fills the container
+          "[&>*]:w-full [&>*]:h-auto"
+        ),
+        children: p
+      }
+    );
+    return /* @__PURE__ */ l(
+      "section",
+      {
+        ref: h,
+        className: v({ variant: s, class: n }),
+        ...g,
+        children: /* @__PURE__ */ l(
+          "div",
+          {
+            className: e("grid grid-cols-1 gap-36", "lg:grid-cols-24 lg:gap-36"),
+            children: s === "B" ? /* @__PURE__ */ a(i, { children: [
+              c,
+              r
+            ] }) : /* @__PURE__ */ a(i, { children: [
+              r,
+              c
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+y.displayName = "River";
+export {
+  y as River,
+  v as riverVariants
+};
+//# sourceMappingURL=river.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"river.js","sources":["../../../../src/components/sections/river/river.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * River component for content sections with text and media\n *\n * Variants:\n * - A: Text on left (9 cols), media on right (15 cols) on desktop\n * - B: Media on left (15 cols), text on right (9 cols) on desktop\n *\n * Uses the 24-column grid system. Must be placed inside a `grid-container`.\n */\nconst riverVariants = tv({\n\t// Base styles - col-full within parent grid, responsive padding using primitive spacing tokens\n\tbase: [\n\t\t\"col-full\",\n\t\t// Small (mobile): 20px x, 72px top, 20px bottom\n\t\t\"px-20 pt-72 pb-20\",\n\t\t// Medium (tablet): 56px x, 96px y\n\t\t\"md:px-56 md:py-96\",\n\t\t// Large (desktop): 72px x, 128px y\n\t\t\"lg:px-72 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 RiverProps\n\textends React.HTMLAttributes<HTMLElement>,\n\t\tVariantProps<typeof riverVariants> {\n\t/**\n\t * The headline text\n\t */\n\theadline: string;\n\t/**\n\t * The body text\n\t */\n\tbody: string;\n\t/**\n\t * Primary action button (required)\n\t */\n\tprimaryAction: React.ReactNode;\n\t/**\n\t * Secondary action button (optional)\n\t */\n\tsecondaryAction?: React.ReactNode;\n\t/**\n\t * Media content (image, video, etc.)\n\t */\n\tmedia: React.ReactNode;\n}\n\n/**\n * River component for content sections with text and media.\n *\n * Uses the 24-column grid system - must be placed inside a `grid-container`.\n *\n * Layout:\n * - Mobile/Tablet: Stacked (text above media)\n * - Desktop (lg+):\n *   - Variant A: Text (9 cols) | Media (15 cols)\n *   - Variant B: Media (15 cols) | Text (9 cols)\n *\n * @example\n * ```tsx\n * <div className=\"grid-container\">\n *   <River\n *     variant=\"A\"\n *     headline=\"Feature Headline\"\n *     body=\"Description of the feature...\"\n *     primaryAction={<Button>Primary</Button>}\n *     secondaryAction={<Button variant=\"outline\">Secondary</Button>}\n *     media={<img src=\"...\" alt=\"Feature\" />}\n *   />\n * </div>\n * ```\n */\nconst River = React.forwardRef<HTMLElement, RiverProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvariant,\n\t\t\theadline,\n\t\t\tbody,\n\t\t\tprimaryAction,\n\t\t\tsecondaryAction,\n\t\t\tmedia,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst contentColumn = (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex flex-col\",\n\t\t\t\t\t// Full width on mobile/tablet, 9 cols on desktop\n\t\t\t\t\t\"lg:col-span-9\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{/* Text content with 16px gap - uses primitive spacing tokens */}\n\t\t\t\t<div className=\"flex flex-col gap-16\">\n\t\t\t\t\t<h2 className=\"typography-h4 text-gray-900\">{headline}</h2>\n\t\t\t\t\t<p className=\"typography-body-small text-gray-800\">{body}</p>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Buttons with 36px gap from text, responsive sizes - uses primitive spacing tokens */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\"flex flex-row gap-16 mt-36\", \"[&>*]:flex-shrink-0\")}\n\t\t\t\t>\n\t\t\t\t\t{primaryAction}\n\t\t\t\t\t{secondaryAction}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\n\t\tconst mediaColumn = (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t// Full width on mobile/tablet, 15 cols on desktop\n\t\t\t\t\t\"lg:col-span-15\",\n\t\t\t\t\t// Ensure media fills the container\n\t\t\t\t\t\"[&>*]:w-full [&>*]:h-auto\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{media}\n\t\t\t</div>\n\t\t);\n\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={riverVariants({ variant, class: className })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Inner grid container for 24-col layout - uses primitive spacing tokens */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\"grid grid-cols-1 gap-36\", \"lg:grid-cols-24 lg:gap-36\")}\n\t\t\t\t>\n\t\t\t\t\t{variant === \"B\" ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{mediaColumn}\n\t\t\t\t\t\t\t{contentColumn}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{contentColumn}\n\t\t\t\t\t\t\t{mediaColumn}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n);\nRiver.displayName = \"River\";\n\nexport { River, riverVariants };\n"],"names":["riverVariants","tv","River","React","className","variant","headline","body","primaryAction","secondaryAction","media","props","ref","contentColumn","jsxs","cn","jsx","mediaColumn","Fragment"],"mappings":";;;AAaA,MAAMA,IAAgBC,EAAG;AAAA;AAAA,EAExB,MAAM;AAAA,IACL;AAAA;AAAA,IAEA;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,GAoDKC,IAAQC,EAAM;AAAA,EACnB,CACC;AAAA,IACC,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MACI;AACJ,UAAMC,IACL,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWC;AAAAA,UACV;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAID,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,wBACd,UAAA;AAAA,YAAA,gBAAAE,EAAC,MAAA,EAAG,WAAU,+BAA+B,UAAAV,GAAS;AAAA,YACtD,gBAAAU,EAAC,KAAA,EAAE,WAAU,uCAAuC,UAAAT,EAAA,CAAK;AAAA,UAAA,GAC1D;AAAA,UAGA,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,WAAWC,EAAG,8BAA8B,qBAAqB;AAAA,cAEhE,UAAA;AAAA,gBAAAP;AAAA,gBACAC;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,GAIIQ,IACL,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWD;AAAAA;AAAAA,UAEV;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAGA,UAAAL;AAAA,MAAA;AAAA,IAAA;AAIH,WACC,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,KAAAJ;AAAA,QACA,WAAWZ,EAAc,EAAE,SAAAK,GAAS,OAAOD,GAAW;AAAA,QACrD,GAAGO;AAAA,QAGJ,UAAA,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAWD,EAAG,2BAA2B,2BAA2B;AAAA,YAEnE,UAAAV,MAAY,MACZ,gBAAAS,EAAAI,GAAA,EACE,UAAA;AAAA,cAAAD;AAAA,cACAJ;AAAA,YAAA,EAAA,CACF,IAEA,gBAAAC,EAAAI,GAAA,EACE,UAAA;AAAA,cAAAL;AAAA,cACAI;AAAA,YAAA,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAEF;AAAA,IAAA;AAAA,EAGH;AACD;AACAf,EAAM,cAAc;"}

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

@@ -127,9 +127,9 @@ export interface ToutProps extends React.HTMLAttributes<HTMLElement>, VariantPro
  *
  * This component is self-contained with its own grid.
  * Grid setup:
- * - Desktop (lg): 24 columns, gap-spacing-20, content spans 9 cols
- * - Tablet (md): 12 columns, gap-spacing-20, content spans 9 cols
- * - Mobile: 4 columns, gap-spacing-20, content spans all 4 cols
+ * - Desktop (lg): 24 columns, gap-20, content spans 9 cols
+ * - Tablet (md): 12 columns, gap-20, content spans 9 cols
+ * - Mobile: 4 columns, gap-20, content spans all 4 cols
  *
  * @example
  * ```tsx