@nationaldesignstudio/react 0.5.0 → 0.5.1

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

@@ -0,0 +1,178 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import * as u from "react";
+import { tv as N, cnBase as e } 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";
+const w = N({
+  base: [
+    // Full width
+    "w-full",
+    // Positioning context for background
+    "relative overflow-hidden",
+    // Responsive height: 600px mobile, 750px tablet, 900px desktop
+    "h-[600px] md:h-[750px] lg:h-[900px]"
+  ],
+  variants: {
+    colorScheme: {
+      light: "",
+      dark: ""
+    },
+    align: {
+      left: "",
+      center: ""
+    }
+  },
+  defaultVariants: {
+    colorScheme: "light",
+    align: "left"
+  }
+}), S = u.forwardRef(
+  ({
+    className: n,
+    colorScheme: s = "light",
+    align: i = "left",
+    headline: m,
+    body: o,
+    primaryAction: g,
+    secondaryAction: p,
+    backgroundMedia: h,
+    footer: d,
+    theme: t,
+    style: x,
+    ...y
+  }, f) => {
+    const r = i === "center", c = s === "dark", v = b(t);
+    return /* @__PURE__ */ a(
+      "section",
+      {
+        ref: f,
+        className: w({ colorScheme: s, align: i, class: n }),
+        style: { ...v, ...x },
+        ...y,
+        children: [
+          /* @__PURE__ */ a(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-0 pointer-events-none",
+              children: [
+                /* @__PURE__ */ l("div", { className: "absolute inset-0 bg-gray-500" }),
+                h
+              ]
+            }
+          ),
+          /* @__PURE__ */ l(
+            "div",
+            {
+              className: e(
+                // Position above background
+                "relative z-10",
+                // Grid setup with responsive columns
+                "grid w-full h-full",
+                // Mobile: 4 columns with gap-20
+                "grid-cols-4 gap-20",
+                // Tablet (md): 12 columns
+                "md:grid-cols-12",
+                // Desktop (lg): 24 columns
+                "lg:grid-cols-24",
+                // Max width and centering like grid-container
+                "max-w-[var(--breakpoint-lg)] mx-auto",
+                // Responsive margins matching grid-container - uses primitive spacing tokens
+                "px-20 md:px-56 lg:px-72",
+                // Vertical padding to position content at bottom - uses primitive spacing tokens
+                "py-36 md:py-56 lg:py-72"
+              ),
+              style: {
+                // Grid spacing theme overrides
+                ...t?.spatial?.gridSmallMargin && {
+                  paddingLeft: "var(--theme-grid-small-margin)",
+                  paddingRight: "var(--theme-grid-small-margin)"
+                },
+                ...t?.spatial?.gridSmallGutter && {
+                  gap: "var(--theme-grid-small-gutter)"
+                }
+              },
+              children: /* @__PURE__ */ a(
+                "div",
+                {
+                  className: e(
+                    // Flex container for content
+                    "flex flex-col",
+                    r ? "justify-start items-center" : "justify-end",
+                    // Responsive gap between text and buttons - uses primitive spacing tokens
+                    "gap-28 md:gap-36",
+                    // Mobile: all 4 cols
+                    "col-span-4",
+                    // Tablet & Desktop: 9 cols left-aligned, full width centered
+                    r ? "md:col-span-12 lg:col-span-24" : "md:col-span-9"
+                  ),
+                  children: [
+                    /* @__PURE__ */ a(
+                      "div",
+                      {
+                        className: e(
+                          "flex flex-col gap-16",
+                          r && "items-center text-center"
+                        ),
+                        children: [
+                          /* @__PURE__ */ l(
+                            "h2",
+                            {
+                              className: e(
+                                "typography-h4",
+                                c ? "text-gray-100" : "text-gray-900"
+                              ),
+                              style: {
+                                color: t?.colors?.textPrimary ? "var(--theme-text-primary)" : void 0
+                              },
+                              children: m
+                            }
+                          ),
+                          o && /* @__PURE__ */ l(
+                            "p",
+                            {
+                              className: e(
+                                "typography-body-small",
+                                c ? "text-gray-400" : "text-gray-800"
+                              ),
+                              style: {
+                                color: t?.colors?.textSecondary ? "var(--theme-text-secondary)" : void 0
+                              },
+                              children: o
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ a(
+                      "div",
+                      {
+                        className: e(
+                          "flex flex-row",
+                          r ? "justify-center" : "items-start",
+                          // Responsive gap between buttons
+                          "gap-8 md:gap-12",
+                          "[&>*]:flex-shrink-0"
+                        ),
+                        children: [
+                          g,
+                          p
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          d && /* @__PURE__ */ l("div", { className: "absolute bottom-6 md:bottom-8 left-0 right-0 z-10", children: d })
+        ]
+      }
+    );
+  }
+);
+S.displayName = "Tout";
+export {
+  S as Tout,
+  w as toutVariants
+};
+//# sourceMappingURL=tout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tout.js","sources":["../../../../src/components/sections/tout/tout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { type ComponentTheme, themeToStyleVars } from \"@/lib/theme\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Tout variants for background and content styling\n */\nconst toutVariants = tv({\n\tbase: [\n\t\t// Full width\n\t\t\"w-full\",\n\t\t// Positioning context for background\n\t\t\"relative overflow-hidden\",\n\t\t// Responsive height: 600px mobile, 750px tablet, 900px desktop\n\t\t\"h-[600px] md:h-[750px] lg:h-[900px]\",\n\t],\n\tvariants: {\n\t\tcolorScheme: {\n\t\t\tlight: \"\",\n\t\t\tdark: \"\",\n\t\t},\n\t\talign: {\n\t\t\tleft: \"\",\n\t\t\tcenter: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolorScheme: \"light\",\n\t\talign: \"left\",\n\t},\n});\n\n/**\n * Tout component based on Figma BaseKit / Touts\n *\n * A full-bleed section with a background image and overlaid content.\n * Content can be positioned on the left side or centered.\n *\n * Color schemes:\n * - light: Light text styling (default)\n * - dark: Dark text styling\n *\n * Alignment:\n * - left: Content aligned to the left (default)\n * - center: Content centered\n *\n * Responsive behavior:\n * - Mobile (sm): 600px height, 4 columns with gap-20, content spans all 4 cols\n * - Tablet (md): 750px height, 12 columns with gap-20, content spans 9 cols (left) or centered\n * - Desktop (lg): 900px height, 24 columns with gap-20, content spans 9 cols (left) or centered\n *\n * This component is self-contained - do NOT wrap in a grid-container.\n */\nexport interface ToutProps\n\textends React.HTMLAttributes<HTMLElement>,\n\t\tVariantProps<typeof toutVariants> {\n\t/**\n\t * The headline displayed in the tout\n\t */\n\theadline: React.ReactNode;\n\t/**\n\t * The body text displayed below the headline (optional)\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 * Background media (image or video element)\n\t * Should be a full-bleed element that covers the entire section\n\t */\n\tbackgroundMedia: React.ReactNode;\n\t/**\n\t * Optional footer content to display at the bottom of the section.\n\t * Use with NdstudioFooter component for the branded footer.\n\t */\n\tfooter?: React.ReactNode;\n\t/**\n\t * Component-level theme overrides.\n\t * Allows customization of colors, spacing, and surface properties.\n\t */\n\ttheme?: ComponentTheme;\n}\n\n/**\n * Tout component for hero-like sections with background media and overlaid content.\n *\n * This component is self-contained with its own grid.\n * Grid setup:\n * - Desktop (lg): 24 columns, gap-20, content spans 9 cols\n * - Tablet (md): 12 columns, gap-20, content spans 9 cols\n * - Mobile: 4 columns, gap-20, content spans all 4 cols\n *\n * @example\n * ```tsx\n * <Tout\n *   headline=\"Feature Headline\"\n *   body=\"Description of the feature...\"\n *   primaryAction={<Button>Primary</Button>}\n *   secondaryAction={<Button variant=\"outline\" colorScheme=\"light\">Secondary</Button>}\n *   backgroundMedia={\n *     <img\n *       src=\"/background.jpg\"\n *       alt=\"\"\n *       className=\"absolute inset-0 w-full h-full object-cover\"\n *     />\n *   }\n *   footer={<NdstudioFooter />}\n * />\n * ```\n */\nconst Tout = React.forwardRef<HTMLElement, ToutProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tcolorScheme = \"light\",\n\t\t\talign = \"left\",\n\t\t\theadline,\n\t\t\tbody,\n\t\t\tprimaryAction,\n\t\t\tsecondaryAction,\n\t\t\tbackgroundMedia,\n\t\t\tfooter,\n\t\t\ttheme,\n\t\t\tstyle,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isCentered = align === \"center\";\n\t\tconst isDark = colorScheme === \"dark\";\n\t\tconst themeStyles = themeToStyleVars(theme);\n\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={toutVariants({ colorScheme, align, class: className })}\n\t\t\t\tstyle={{ ...themeStyles, ...style }}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Background layer - full bleed */}\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"absolute inset-0 pointer-events-none\"\n\t\t\t\t>\n\t\t\t\t\t{/* Fallback background color */}\n\t\t\t\t\t<div className=\"absolute inset-0 bg-gray-500\" />\n\t\t\t\t\t{/* Background media */}\n\t\t\t\t\t{backgroundMedia}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Inner grid for content alignment - uses primitive spacing tokens */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t// Position above background\n\t\t\t\t\t\t\"relative z-10\",\n\t\t\t\t\t\t// Grid setup with responsive columns\n\t\t\t\t\t\t\"grid w-full h-full\",\n\t\t\t\t\t\t// Mobile: 4 columns with gap-20\n\t\t\t\t\t\t\"grid-cols-4 gap-20\",\n\t\t\t\t\t\t// Tablet (md): 12 columns\n\t\t\t\t\t\t\"md:grid-cols-12\",\n\t\t\t\t\t\t// Desktop (lg): 24 columns\n\t\t\t\t\t\t\"lg:grid-cols-24\",\n\t\t\t\t\t\t// Max width and centering like grid-container\n\t\t\t\t\t\t\"max-w-[var(--breakpoint-lg)] mx-auto\",\n\t\t\t\t\t\t// Responsive margins matching grid-container - uses primitive spacing tokens\n\t\t\t\t\t\t\"px-20 md:px-56 lg:px-72\",\n\t\t\t\t\t\t// Vertical padding to position content at bottom - uses primitive spacing tokens\n\t\t\t\t\t\t\"py-36 md:py-56 lg:py-72\",\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t// Grid spacing theme overrides\n\t\t\t\t\t\t...(theme?.spatial?.gridSmallMargin && {\n\t\t\t\t\t\t\tpaddingLeft: \"var(--theme-grid-small-margin)\",\n\t\t\t\t\t\t\tpaddingRight: \"var(--theme-grid-small-margin)\",\n\t\t\t\t\t\t}),\n\t\t\t\t\t\t...(theme?.spatial?.gridSmallGutter && {\n\t\t\t\t\t\t\tgap: \"var(--theme-grid-small-gutter)\",\n\t\t\t\t\t\t}),\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{/* Content column - aligned to grid */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t// Flex container for content\n\t\t\t\t\t\t\t\"flex flex-col\",\n\t\t\t\t\t\t\tisCentered ? \"justify-start items-center\" : \"justify-end\",\n\t\t\t\t\t\t\t// Responsive gap between text and buttons - uses primitive spacing tokens\n\t\t\t\t\t\t\t\"gap-28 md:gap-36\",\n\t\t\t\t\t\t\t// Mobile: all 4 cols\n\t\t\t\t\t\t\t\"col-span-4\",\n\t\t\t\t\t\t\t// Tablet & Desktop: 9 cols left-aligned, full width centered\n\t\t\t\t\t\t\tisCentered ? \"md:col-span-12 lg:col-span-24\" : \"md:col-span-9\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Text content stack - uses primitive spacing tokens */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex flex-col gap-16\",\n\t\t\t\t\t\t\t\tisCentered && \"items-center text-center\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<h2\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"typography-h4\",\n\t\t\t\t\t\t\t\t\tisDark ? \"text-gray-100\" : \"text-gray-900\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: theme?.colors?.textPrimary\n\t\t\t\t\t\t\t\t\t\t? \"var(--theme-text-primary)\"\n\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{headline}\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t{body && (\n\t\t\t\t\t\t\t\t<p\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"typography-body-small\",\n\t\t\t\t\t\t\t\t\t\tisDark ? \"text-gray-400\" : \"text-gray-800\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: theme?.colors?.textSecondary\n\t\t\t\t\t\t\t\t\t\t\t? \"var(--theme-text-secondary)\"\n\t\t\t\t\t\t\t\t\t\t\t: undefined,\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\t{body}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{/* CTA buttons - uses primitive spacing tokens */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex flex-row\",\n\t\t\t\t\t\t\t\tisCentered ? \"justify-center\" : \"items-start\",\n\t\t\t\t\t\t\t\t// Responsive gap between buttons\n\t\t\t\t\t\t\t\t\"gap-8 md:gap-12\",\n\t\t\t\t\t\t\t\t\"[&>*]:flex-shrink-0\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{primaryAction}\n\t\t\t\t\t\t\t{secondaryAction}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Footer slot */}\n\t\t\t\t{footer && (\n\t\t\t\t\t<div className=\"absolute bottom-6 md:bottom-8 left-0 right-0 z-10\">\n\t\t\t\t\t\t{footer}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</section>\n\t\t);\n\t},\n);\nTout.displayName = \"Tout\";\n\nexport { Tout, toutVariants };\n"],"names":["toutVariants","tv","Tout","React","className","colorScheme","align","headline","body","primaryAction","secondaryAction","backgroundMedia","footer","theme","style","props","ref","isCentered","isDark","themeStyles","themeToStyleVars","jsxs","jsx","cn"],"mappings":"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"}

package/dist/components/sections/two-column-section/two-column-section.js

@@ -0,0 +1,113 @@
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import * as c from "react";
+import { tv as m, cnBase as e } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+const n = m({
+  // Base styles - responsive padding using primitive spacing tokens
+  base: [
+    "w-full",
+    // Small (mobile): 20px x, 56px top, 20px bottom
+    "px-20 pt-56 pb-20",
+    // Medium (tablet): 56px x, 56px y
+    "md:px-56 md:py-56",
+    // Large (desktop): 72px x, 72px top, 112px bottom
+    "lg:px-72 lg:pt-72 lg:pb-112"
+  ],
+  variants: {
+    colorScheme: {
+      dark: "bg-gray-1200",
+      light: "bg-white"
+    },
+    layout: {
+      asymmetric: "",
+      equal: ""
+    }
+  },
+  defaultVariants: {
+    colorScheme: "dark",
+    layout: "asymmetric"
+  }
+}), y = c.forwardRef(
+  ({
+    className: g,
+    colorScheme: a = "dark",
+    layout: t,
+    title: i,
+    lead: l,
+    children: d,
+    ...o
+  }, p) => /* @__PURE__ */ r(
+    "section",
+    {
+      ref: p,
+      className: n({
+        colorScheme: a,
+        layout: t,
+        class: g
+      }),
+      ...o,
+      children: /* @__PURE__ */ s(
+        "div",
+        {
+          className: e(
+            "border-t pt-36",
+            a === "dark" ? "border-gray-700" : "border-gray-300",
+            // Grid layout - uses primitive spacing tokens
+            "grid grid-cols-1 gap-56",
+            t === "equal" ? "md:grid-cols-2" : "lg:grid-cols-24 lg:gap-56"
+          ),
+          children: [
+            /* @__PURE__ */ r(
+              "h2",
+              {
+                className: e(
+                  "typography-subheading-medium",
+                  a === "dark" ? "text-gray-100" : "text-gray-900",
+                  // Column span based on layout
+                  t !== "equal" && "lg:col-span-9"
+                ),
+                children: i
+              }
+            ),
+            /* @__PURE__ */ s(
+              "div",
+              {
+                className: e(
+                  "flex flex-col gap-56",
+                  t !== "equal" && "lg:col-span-15"
+                ),
+                children: [
+                  l && /* @__PURE__ */ r(
+                    "div",
+                    {
+                      className: e(
+                        "typography-body-large",
+                        a === "dark" ? "text-gray-100" : "text-gray-900"
+                      ),
+                      children: typeof l == "string" ? /* @__PURE__ */ r("p", { children: l }) : l
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    "div",
+                    {
+                      className: e(
+                        "typography-body-medium flex flex-col gap-[1em]",
+                        a === "dark" ? "text-gray-400" : "text-gray-600"
+                      ),
+                      children: d
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  )
+);
+y.displayName = "TwoColumnSection";
+export {
+  y as TwoColumnSection,
+  n as twoColumnSectionVariants
+};
+//# sourceMappingURL=two-column-section.js.map

package/dist/components/sections/two-column-section/two-column-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"two-column-section.js","sources":["../../../../src/components/sections/two-column-section/two-column-section.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * TwoColumnSection component for text-heavy content sections\n *\n * Layout:\n * - Desktop (lg+): Title left, content right with border-top divider\n * - Mobile/Tablet: Stacked vertically\n *\n * Uses the 24-column grid system.\n */\nconst twoColumnSectionVariants = tv({\n\t// Base styles - responsive padding using primitive spacing tokens\n\tbase: [\n\t\t\"w-full\",\n\t\t// Small (mobile): 20px x, 56px top, 20px bottom\n\t\t\"px-20 pt-56 pb-20\",\n\t\t// Medium (tablet): 56px x, 56px y\n\t\t\"md:px-56 md:py-56\",\n\t\t// Large (desktop): 72px x, 72px top, 112px bottom\n\t\t\"lg:px-72 lg:pt-72 lg:pb-112\",\n\t],\n\tvariants: {\n\t\tcolorScheme: {\n\t\t\tdark: \"bg-gray-1200\",\n\t\t\tlight: \"bg-white\",\n\t\t},\n\t\tlayout: {\n\t\t\tasymmetric: \"\",\n\t\t\tequal: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolorScheme: \"dark\",\n\t\tlayout: \"asymmetric\",\n\t},\n});\n\nexport interface TwoColumnSectionProps\n\textends React.HTMLAttributes<HTMLElement>,\n\t\tVariantProps<typeof twoColumnSectionVariants> {\n\t/**\n\t * The title text displayed in the left column\n\t */\n\ttitle: string;\n\t/**\n\t * Lead content - prominently styled (brighter text)\n\t * Can be a string or ReactNode for rich content\n\t */\n\tlead?: React.ReactNode;\n\t/**\n\t * Body content - secondary styled (muted text)\n\t * Can be a string or ReactNode for rich content\n\t */\n\tchildren: React.ReactNode;\n\t/**\n\t * Layout style for the columns\n\t * - \"asymmetric\" (default): Uses 24-column grid with ~40/60 split (title: 9, content: 15)\n\t * - \"equal\": Simple 2-column equal-width layout at md+ breakpoints\n\t */\n\tlayout?: \"asymmetric\" | \"equal\";\n}\n\n/**\n * TwoColumnSection component for text-heavy content with title/content split.\n *\n * Layout:\n * - Mobile/Tablet: Stacked (title above content)\n * - Desktop (lg+): Title left (~40%), Content right (~60%)\n *\n * @example\n * ```tsx\n * <TwoColumnSection\n *   title=\"US Tech Force\"\n *   lead=\"The US Tech Force is recruiting an elite corps of engineers...\"\n *   variant=\"dark\"\n * >\n *   <p>Through a two-year program, participants will work...</p>\n *   <p>Upon completing the program, engineers can seek...</p>\n * </TwoColumnSection>\n * ```\n */\nconst TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tcolorScheme = \"dark\",\n\t\t\tlayout,\n\t\t\ttitle,\n\t\t\tlead,\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={twoColumnSectionVariants({\n\t\t\t\t\tcolorScheme,\n\t\t\t\t\tlayout,\n\t\t\t\t\tclass: className,\n\t\t\t\t})}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Inner container with border-top - uses primitive spacing tokens */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"border-t pt-36\",\n\t\t\t\t\t\tcolorScheme === \"dark\" ? \"border-gray-700\" : \"border-gray-300\",\n\t\t\t\t\t\t// Grid layout - uses primitive spacing tokens\n\t\t\t\t\t\t\"grid grid-cols-1 gap-56\",\n\t\t\t\t\t\tlayout === \"equal\" ? \"md:grid-cols-2\" : \"lg:grid-cols-24 lg:gap-56\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{/* Title column */}\n\t\t\t\t\t<h2\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"typography-subheading-medium\",\n\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-100\" : \"text-gray-900\",\n\t\t\t\t\t\t\t// Column span based on layout\n\t\t\t\t\t\t\tlayout !== \"equal\" && \"lg:col-span-9\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h2>\n\n\t\t\t\t\t{/* Content column - uses primitive spacing tokens */}\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 gap-56\",\n\t\t\t\t\t\t\tlayout !== \"equal\" && \"lg:col-span-15\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Lead content - brighter/prominent */}\n\t\t\t\t\t\t{lead && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"typography-body-large\",\n\t\t\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-100\" : \"text-gray-900\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{typeof lead === \"string\" ? <p>{lead}</p> : lead}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{/* Body content - muted */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"typography-body-medium flex flex-col gap-[1em]\",\n\t\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-400\" : \"text-gray-600\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n);\nTwoColumnSection.displayName = \"TwoColumnSection\";\n\nexport { TwoColumnSection, twoColumnSectionVariants };\n"],"names":["twoColumnSectionVariants","tv","TwoColumnSection","React","className","colorScheme","layout","title","lead","children","props","ref","jsx","jsxs","cn"],"mappings":";;;AAaA,MAAMA,IAA2BC,EAAG;AAAA;AAAA,EAEnC,MAAM;AAAA,IACL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAAA,EAED,UAAU;AAAA,IACT,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,IAER,QAAQ;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IAAA;AAAA,EACR;AAAA,EAED,iBAAiB;AAAA,IAChB,aAAa;AAAA,IACb,QAAQ;AAAA,EAAA;AAEV,CAAC,GA8CKC,IAAmBC,EAAM;AAAA,EAC9B,CACC;AAAA,IACC,WAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MAGC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAAD;AAAA,MACA,WAAWX,EAAyB;AAAA,QACnC,aAAAK;AAAA,QACA,QAAAC;AAAA,QACA,OAAOF;AAAA,MAAA,CACP;AAAA,MACA,GAAGM;AAAA,MAGJ,UAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAWC;AAAAA,YACV;AAAA,YACAT,MAAgB,SAAS,oBAAoB;AAAA;AAAA,YAE7C;AAAA,YACAC,MAAW,UAAU,mBAAmB;AAAA,UAAA;AAAA,UAIzC,UAAA;AAAA,YAAA,gBAAAM;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,WAAWE;AAAAA,kBACV;AAAA,kBACAT,MAAgB,SAAS,kBAAkB;AAAA;AAAA,kBAE3CC,MAAW,WAAW;AAAA,gBAAA;AAAA,gBAGtB,UAAAC;AAAA,cAAA;AAAA,YAAA;AAAA,YAIF,gBAAAM;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,WAAWC;AAAAA,kBACV;AAAA,kBACAR,MAAW,WAAW;AAAA,gBAAA;AAAA,gBAItB,UAAA;AAAA,kBAAAE,KACA,gBAAAI;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACA,WAAWE;AAAAA,wBACV;AAAA,wBACAT,MAAgB,SAAS,kBAAkB;AAAA,sBAAA;AAAA,sBAG3C,iBAAOG,KAAS,WAAW,gBAAAI,EAAC,KAAA,EAAG,aAAK,IAAOJ;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAK9C,gBAAAI;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACA,WAAWE;AAAAA,wBACV;AAAA,wBACAT,MAAgB,SAAS,kBAAkB;AAAA,sBAAA;AAAA,sBAG3C,UAAAI;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAAA;AAAA,UACD;AAAA,QAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA;AAIJ;AACAP,EAAiB,cAAc;"}

package/dist/components/shared/floating-arrow.js

@@ -0,0 +1,51 @@
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import { tv as s, cnBase as d } from "../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+const n = s({
+  base: [
+    // Display flex to properly size the arrow container
+    "flex",
+    // Positioning based on floating side (uses spacing tokens since --spacing: 1px)
+    "data-[side=bottom]:-top-7",
+    "data-[side=left]:-right-12 data-[side=left]:rotate-90",
+    "data-[side=right]:-left-12 data-[side=right]:-rotate-90",
+    "data-[side=top]:-bottom-7 data-[side=top]:rotate-180",
+    // Animation - follows popup
+    "data-[starting-style]:opacity-0",
+    "data-[ending-style]:opacity-0"
+  ]
+}), c = ({
+  fillClassName: e,
+  borderClassName: t,
+  className: i
+}) => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "20",
+    height: "10",
+    viewBox: "0 0 20 10",
+    fill: "none",
+    className: d("block", i),
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ a(
+        "path",
+        {
+          d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+          className: e
+        }
+      ),
+      t && /* @__PURE__ */ a(
+        "path",
+        {
+          d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
+          className: t
+        }
+      )
+    ]
+  }
+);
+export {
+  c as FloatingArrowSvg,
+  n as floatingArrowVariants
+};
+//# sourceMappingURL=floating-arrow.js.map