@nationaldesignstudio/react 0.5.1 → 0.5.2

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

@@ -1,73 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,86 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import * as React from "react";
-/**
- * CardGrid component for displaying cards in a responsive grid layout
- *
- * Variants:
- * - A: 3 columns on desktop, 2 on tablet, 1 on mobile
- * - B: 2 columns on desktop/tablet, 1 on mobile
- *
- * Uses the 24-column grid system with grid-container as root.
- */
-declare const cardGridVariants: import('tailwind-variants').TVReturnType<{
-    variant: {
-        A: string;
-        B: string;
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
-        A: string;
-        B: string;
-    };
-}, {
-    variant: {
-        A: string;
-        B: string;
-    };
-}>, {
-    variant: {
-        A: string;
-        B: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    variant: {
-        A: string;
-        B: string;
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
-        A: string;
-        B: string;
-    };
-}, {
-    variant: {
-        A: string;
-        B: string;
-    };
-}>, unknown, unknown, undefined>>;
-export interface CardGridProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof cardGridVariants> {
-    /**
-     * The title text displayed above the cards
-     */
-    title: string;
-    /**
-     * The card elements to display in the grid
-     */
-    cards: React.ReactNode[];
-}
-/**
- * CardGrid component for displaying cards in a responsive grid layout.
- *
- * Uses the 24-column grid system with grid-container as root.
- *
- * Layout (Variant A):
- * - Mobile (sm): Single column, py-72
- * - Tablet (md): 2 columns, gap-56 between title and cards, gap-y-20 between cards
- * - Desktop (lg+): 3 columns, py-128, gap-64 between title and cards, gap-y-20 between cards
- *
- * Layout (Variant B):
- * - Mobile (sm): Single column, py-72
- * - Tablet (md): 2 columns, gap-56 between title and cards, gap-y-20 between cards
- * - Desktop (lg+): 2 columns, py-128, gap-64 between title and cards, gap-y-20 between cards
- *
- * @example
- * ```tsx
- * <CardGrid
- *   variant="A"
- *   title="Featured Cards"
- *   cards={[
- *     <Card key="1">...</Card>,
- *     <Card key="2">...</Card>,
- *   ]}
- * />
- * ```
- */
-declare const CardGrid: React.ForwardRefExoticComponent<CardGridProps & React.RefAttributes<HTMLElement>>;
-export { CardGrid, cardGridVariants };

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

@@ -1,66 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,44 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import { twoColumnSectionVariants } from '../two-column-section/two-column-section';
-import * as React from "react";
-export interface FaqSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, VariantProps<typeof twoColumnSectionVariants> {
-    /**
-     * The title text displayed in the left column
-     * @default "Frequently Asked Questions"
-     */
-    title?: string;
-    /**
-     * The FAQ content - typically an Accordion with AccordionItems
-     */
-    children: React.ReactNode;
-}
-/**
- * FaqSection component for displaying FAQ content in a two-column layout.
- *
- * Wraps TwoColumnSection with FAQ-specific defaults and typography.
- *
- * Layout:
- * - Mobile/Tablet: Stacked (title above content)
- * - Desktop (lg+): Title left (~40%), FAQ content right (~60%)
- *
- * @example
- * ```tsx
- * <FaqSection>
- *   <Accordion defaultExpanded="faq-1">
- *     <AccordionItem id="faq-1" title="What is the US Tech Force?">
- *       Tech Force will be an elite group of technology specialists...
- *     </AccordionItem>
- *     <AccordionItem id="faq-2" title="What skills are required?">
- *       We're looking for expertise in software engineering...
- *     </AccordionItem>
- *   </Accordion>
- * </FaqSection>
- *
- * // With custom title
- * <FaqSection title="Common Questions" colorScheme="light">
- *   ...
- * </FaqSection>
- * ```
- */
-declare const FaqSection: React.ForwardRefExoticComponent<FaqSectionProps & React.RefAttributes<HTMLElement>>;
-export { FaqSection };

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

@@ -1,37 +0,0 @@
-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

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

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

@@ -1,337 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import { ComponentTheme } from '../../../lib/theme';
-import * as React from "react";
-export { Background as HeroBackground, BackgroundGradient as HeroGradient, type BackgroundGradientProps as HeroGradientProps, BackgroundImage as HeroBackgroundImage, type BackgroundImageProps as HeroBackgroundImageProps, BackgroundOverlay as HeroOverlay, type BackgroundOverlayProps as HeroOverlayProps, BackgroundStream as HeroBackgroundStream, type BackgroundStreamProps as HeroBackgroundStreamProps, BackgroundVideo as HeroBackgroundVideo, type BackgroundVideoProps as HeroBackgroundVideoProps, } from '../../atoms/background';
-declare const DEFAULT_TITLE_TYPOGRAPHY = "typography-h1-display";
-declare const heroVariants: import('tailwind-variants').TVReturnType<{
-    variant: {
-        A1: {
-            root: string;
-            content: string[];
-        };
-        A2: {
-            root: string;
-            content: string[];
-        };
-        A3: {
-            root: string;
-            content: string[];
-        };
-    };
-    colorScheme: {
-        dark: {
-            root: string;
-            title: string;
-        };
-        light: {
-            root: string;
-            title: string;
-        };
-    };
-    hasBackground: {
-        true: {
-            root: string;
-        };
-    };
-}, {
-    root: string;
-    top: string;
-    content: string[];
-    title: string;
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
-        A1: {
-            root: string;
-            content: string[];
-        };
-        A2: {
-            root: string;
-            content: string[];
-        };
-        A3: {
-            root: string;
-            content: string[];
-        };
-    };
-    colorScheme: {
-        dark: {
-            root: string;
-            title: string;
-        };
-        light: {
-            root: string;
-            title: string;
-        };
-    };
-    hasBackground: {
-        true: {
-            root: string;
-        };
-    };
-}, {
-    variant: {
-        A1: {
-            root: string;
-            content: string[];
-        };
-        A2: {
-            root: string;
-            content: string[];
-        };
-        A3: {
-            root: string;
-            content: string[];
-        };
-    };
-    colorScheme: {
-        dark: {
-            root: string;
-            title: string;
-        };
-        light: {
-            root: string;
-            title: string;
-        };
-    };
-    hasBackground: {
-        true: {
-            root: string;
-        };
-    };
-}>, {
-    variant: {
-        A1: {
-            root: string;
-            content: string[];
-        };
-        A2: {
-            root: string;
-            content: string[];
-        };
-        A3: {
-            root: string;
-            content: string[];
-        };
-    };
-    colorScheme: {
-        dark: {
-            root: string;
-            title: string;
-        };
-        light: {
-            root: string;
-            title: string;
-        };
-    };
-    hasBackground: {
-        true: {
-            root: string;
-        };
-    };
-}, {
-    root: string;
-    top: string;
-    content: string[];
-    title: string;
-}, import('tailwind-variants').TVReturnType<{
-    variant: {
-        A1: {
-            root: string;
-            content: string[];
-        };
-        A2: {
-            root: string;
-            content: string[];
-        };
-        A3: {
-            root: string;
-            content: string[];
-        };
-    };
-    colorScheme: {
-        dark: {
-            root: string;
-            title: string;
-        };
-        light: {
-            root: string;
-            title: string;
-        };
-    };
-    hasBackground: {
-        true: {
-            root: string;
-        };
-    };
-}, {
-    root: string;
-    top: string;
-    content: string[];
-    title: string;
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
-        A1: {
-            root: string;
-            content: string[];
-        };
-        A2: {
-            root: string;
-            content: string[];
-        };
-        A3: {
-            root: string;
-            content: string[];
-        };
-    };
-    colorScheme: {
-        dark: {
-            root: string;
-            title: string;
-        };
-        light: {
-            root: string;
-            title: string;
-        };
-    };
-    hasBackground: {
-        true: {
-            root: string;
-        };
-    };
-}, {
-    variant: {
-        A1: {
-            root: string;
-            content: string[];
-        };
-        A2: {
-            root: string;
-            content: string[];
-        };
-        A3: {
-            root: string;
-            content: string[];
-        };
-    };
-    colorScheme: {
-        dark: {
-            root: string;
-            title: string;
-        };
-        light: {
-            root: string;
-            title: string;
-        };
-    };
-    hasBackground: {
-        true: {
-            root: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
-declare const heroHeaderVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "relative z-10 w-full", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "relative z-10 w-full", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-declare const heroContentVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface HeroHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-/**
- * Header slot for Hero - used for navigation, gov banners, etc.
- * Full-width with no padding, sits at the top of the hero.
- */
-declare const HeroHeader: React.ForwardRefExoticComponent<HeroHeaderProps & React.RefAttributes<HTMLDivElement>>;
-export interface HeroContentProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-/**
- * Content container for Hero - use for main content.
- * Has padding and sits above backgrounds with z-10.
- */
-declare const HeroContent: React.ForwardRefExoticComponent<HeroContentProps & React.RefAttributes<HTMLDivElement>>;
-export interface HeroProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, VariantProps<typeof heroVariants> {
-    /**
-     * The title text displayed in the hero.
-     * If provided, renders an h1 with default typography.
-     * Omit to use children for custom content composition.
-     */
-    title?: string;
-    /**
-     * Custom typography class for the title using primitive tokens.
-     * Default: "typography-h1-display"
-     */
-    titleClassName?: string;
-    /**
-     * Color scheme for text content.
-     * - dark: Dark text for use on light backgrounds (default)
-     * - light: Light text for use on dark backgrounds
-     */
-    colorScheme?: "dark" | "light";
-    /**
-     * Content for the top slot (full-width, no padding).
-     * Use for USGovBanner, Navigation, etc.
-     */
-    top?: React.ReactNode;
-    /**
-     * Background for the hero. Can be:
-     * - A color string (hex, rgb, etc.) for solid backgrounds
-     * - A ReactNode (use HeroBackground.Image, HeroBackground.Video, or HeroBackground.Stream)
-     */
-    background?: React.ReactNode | string;
-    /**
-     * Opacity of the overlay (0-1, default: 0)
-     * Only applies when using a background slot
-     */
-    overlayOpacity?: number;
-    /**
-     * Color of the overlay (default: "black")
-     */
-    overlayColor?: string;
-    /**
-     * Border radius for the hero container
-     * Useful for designs with rounded bottom corners
-     */
-    borderRadius?: string;
-    /**
-     * Theme overrides for component styling via CSS custom properties
-     */
-    theme?: ComponentTheme;
-}
-/**
- * Hero component for page headers with large display typography.
- *
- * Slots:
- * - `top`: Full-width slot at top for USGovBanner, Navigation (no padding)
- * - `children`: Main content slot with padding and alignment
- *
- * The `title` prop is a convenience for simple heroes - it renders an h1 with
- * responsive typography. Children are always rendered, so you can use both
- * or just children for full control.
- *
- * Variants:
- * - A1: Content at bottom (default)
- * - A2: Content at top
- * - A3: Content centered
- *
- * @example
- * ```tsx
- * // Simple - just title and background
- * <Hero title="Welcome" background="#1a1a1a" />
- *
- * // With top slot for banner/nav
- * <Hero
- *   variant="A1"
- *   background={<HeroBackground.Image src="/hero.jpg" />}
- *   top={
- *     <>
- *       <USGovBanner variant="inverted" />
- *       <Navigation />
- *     </>
- *   }
- * >
- *   <h1>Board of Peace</h1>
- *   <p>Subtitle goes here</p>
- * </Hero>
- * ```
- */
-declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>> & {
-    Header: typeof HeroHeader;
-    Content: typeof HeroContent;
-};
-export { Hero, heroVariants, heroContentVariants, heroHeaderVariants, DEFAULT_TITLE_TYPOGRAPHY, HeroHeader, HeroContent, };