@nationaldesignstudio/react 0.5.0 → 0.5.2

package/dist/components/organisms/card/card.d.ts

@@ -1,235 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import * as React from "react";
-declare const cardVariants: import('tailwind-variants').TVReturnType<{
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
-    };
-}, undefined, "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
-    };
-}, {
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
-    };
-}>, {
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
-    };
-}, undefined, "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
-    };
-}, {
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
-    };
-}>, unknown, unknown, undefined>>;
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
-}
-/**
- * Card component for displaying content in a contained, scannable format.
- *
- * Layouts:
- * - vertical: Image on top, content below (default)
- * - horizontal: Image on left, content on right
- * - overlay: Full-bleed background with content on top
- *
- * Use with CardImage, CardContent, CardEyebrow, CardTitle, CardDescription, and CardActions.
- * For overlay layout, use Background components for full-bleed backgrounds.
- */
-declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
-declare const cardImageVariants: 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 CardImageProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The image source URL
-     */
-    src?: string;
-    /**
-     * Alt text for the image
-     */
-    alt?: string;
-}
-/**
- * Card image area. For vertical layout, displays with 16:9 aspect ratio.
- * For horizontal layout, takes up ~40% width and stretches to content height.
- */
-declare const CardImage: React.ForwardRefExoticComponent<CardImageProps & React.RefAttributes<HTMLDivElement>>;
-declare const cardContentVariants: import('tailwind-variants').TVReturnType<{
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-    };
-}, undefined, "flex w-full flex-1 flex-col gap-spatial-card-large-gap p-spatial-card-large-padding", import('tailwind-variants/dist/config.js').TVConfig<{
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-    };
-}, {
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-    };
-}>, {
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-    };
-}, undefined, "flex w-full flex-1 flex-col gap-spatial-card-large-gap p-spatial-card-large-padding", import('tailwind-variants/dist/config.js').TVConfig<{
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-    };
-}, {
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-    };
-}>, unknown, unknown, undefined>>;
-export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardContentVariants> {
-}
-/**
- * Card content container with proper padding and spacing.
- * Uses spatial card tokens for consistent sizing.
- * For overlay layout, add `relative z-10` to ensure content sits above background.
- *
- * @example
- * ```tsx
- * // Content at bottom of overlay card
- * <Card layout="overlay">
- *   <Background.Image src="/hero.jpg" />
- *   <CardContent justify="end" className="relative z-10">
- *     <CardTitle>Title</CardTitle>
- *   </CardContent>
- * </Card>
- * ```
- */
-declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const cardEyebrowVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-overline text-text-muted uppercase tracking-wider", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-overline text-text-muted uppercase tracking-wider", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface CardEyebrowProps extends React.HTMLAttributes<HTMLParagraphElement> {
-}
-/**
- * Optional eyebrow text above the card title.
- */
-declare const CardEyebrow: React.ForwardRefExoticComponent<CardEyebrowProps & React.RefAttributes<HTMLParagraphElement>>;
-declare const cardTitleVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-h5 text-text-primary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-h5 text-text-primary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
-    /**
-     * The heading level to render (h1-h6). Defaults to h3.
-     */
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-}
-/**
- * Card title/heading. Use the `as` prop to change the heading level.
- */
-declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-declare const cardDescriptionVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-body-small text-text-secondary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-body-small text-text-secondary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
-}
-/**
- * Card body/description text.
- */
-declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
-declare const cardBodyVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex w-full flex-col gap-spatial-card-small-gap", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex w-full flex-col gap-spatial-card-small-gap", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-/**
- * Container for card text content (eyebrow, title, description).
- * Uses spatial card tokens for consistent sizing.
- */
-declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
-declare const cardActionsVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex gap-12", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex gap-12", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-/**
- * Container for card action buttons.
- * Uses primitive spacing tokens.
- */
-declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
-export { Card, cardVariants, CardImage, cardImageVariants, CardContent, cardContentVariants, CardEyebrow, cardEyebrowVariants, CardTitle, cardTitleVariants, CardDescription, cardDescriptionVariants, CardBody, cardBodyVariants, CardActions, cardActionsVariants, };

package/dist/components/organisms/navbar/navbar.d.ts

@@ -1,66 +0,0 @@
-import * as React from "react";
-export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
-}
-/**
- * Main navigation bar container.
- * Provides responsive layout for brand, links, and actions.
- */
-declare const Navbar: React.ForwardRefExoticComponent<NavbarProps & React.RefAttributes<HTMLElement>>;
-export interface NavbarBrandProps extends React.HTMLAttributes<HTMLDivElement> {
-    asChild?: boolean;
-}
-/**
- * Brand/logo area of the navbar.
- * Use asChild to render as a link.
- */
-declare const NavbarBrand: React.ForwardRefExoticComponent<NavbarBrandProps & React.RefAttributes<HTMLDivElement>>;
-export interface NavbarLinksProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-/**
- * Container for navigation links.
- * Centers links on desktop, hidden on mobile (use NavbarMobileMenu instead).
- */
-declare const NavbarLinks: React.ForwardRefExoticComponent<NavbarLinksProps & React.RefAttributes<HTMLDivElement>>;
-export interface NavbarLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    asChild?: boolean;
-    active?: boolean;
-}
-/**
- * Individual navigation link.
- * Use asChild to render with a router Link component.
- */
-declare const NavbarLink: React.ForwardRefExoticComponent<NavbarLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-export interface NavbarActionsProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-/**
- * Container for navbar action items (search, menu button, etc).
- */
-declare const NavbarActions: React.ForwardRefExoticComponent<NavbarActionsProps & React.RefAttributes<HTMLDivElement>>;
-export interface NavbarMobileMenuProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-/**
- * Mobile menu container that displays navigation links on mobile devices.
- * Hidden on desktop (md and above). Should be used with NavbarMobileMenuButton.
- * Built on Base UI Dialog for accessibility (focus trap, escape key, click-outside).
- */
-declare const NavbarMobileMenu: React.ForwardRefExoticComponent<NavbarMobileMenuProps & React.RefAttributes<HTMLDivElement>>;
-export interface NavbarMobileMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    asChild?: boolean;
-}
-/**
- * Button to toggle the mobile menu.
- * Should be placed in NavbarActions on mobile.
- * Use asChild to render as a custom button component (e.g., IconButton).
- */
-declare const NavbarMobileMenuButton: React.ForwardRefExoticComponent<NavbarMobileMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export interface NavbarMobileMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    asChild?: boolean;
-    active?: boolean;
-}
-/**
- * Navigation link for the mobile menu.
- * Automatically closes the mobile menu when clicked.
- * Use asChild to render with a router Link component.
- */
-declare const NavbarMobileMenuLink: React.ForwardRefExoticComponent<NavbarMobileMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-export { Navbar, NavbarBrand, NavbarLinks, NavbarLink, NavbarActions, NavbarMobileMenu, NavbarMobileMenuButton, NavbarMobileMenuLink, };

package/dist/components/organisms/us-gov-banner/us-gov-banner.d.ts

@@ -1,137 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import * as React from "react";
-declare const usGovBannerVariants: import('tailwind-variants').TVReturnType<{
-    variant: {
-        default: {
-            root: string;
-            content: string;
-            text: string;
-        };
-        inverted: {
-            root: string;
-            content: string;
-            text: string;
-        };
-    };
-}, {
-    root: string;
-    content: string;
-    text: string;
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
-        default: {
-            root: string;
-            content: string;
-            text: string;
-        };
-        inverted: {
-            root: string;
-            content: string;
-            text: string;
-        };
-    };
-}, {
-    variant: {
-        default: {
-            root: string;
-            content: string;
-            text: string;
-        };
-        inverted: {
-            root: string;
-            content: string;
-            text: string;
-        };
-    };
-}>, {
-    variant: {
-        default: {
-            root: string;
-            content: string;
-            text: string;
-        };
-        inverted: {
-            root: string;
-            content: string;
-            text: string;
-        };
-    };
-}, {
-    root: string;
-    content: string;
-    text: string;
-}, import('tailwind-variants').TVReturnType<{
-    variant: {
-        default: {
-            root: string;
-            content: string;
-            text: string;
-        };
-        inverted: {
-            root: string;
-            content: string;
-            text: string;
-        };
-    };
-}, {
-    root: string;
-    content: string;
-    text: string;
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
-        default: {
-            root: string;
-            content: string;
-            text: string;
-        };
-        inverted: {
-            root: string;
-            content: string;
-            text: string;
-        };
-    };
-}, {
-    variant: {
-        default: {
-            root: string;
-            content: string;
-            text: string;
-        };
-        inverted: {
-            root: string;
-            content: string;
-            text: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
-export interface USGovBannerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof usGovBannerVariants> {
-    /**
-     * Custom flag icon element. Defaults to a US flag SVG.
-     */
-    flagIcon?: React.ReactNode;
-    /**
-     * Banner text content
-     * @default "An official website of the United States government"
-     */
-    text?: string;
-}
-/**
- * US Government official website banner.
- * Displays the official government website notice with flag icon.
- * Commonly placed at the very top of government websites.
- *
- * Variants:
- * - default: Light background with dark text (for light pages)
- * - inverted: Transparent background with white text/flag (for dark backgrounds/heroes)
- *
- * @example
- * ```tsx
- * // Default (light)
- * <USGovBanner />
- *
- * // Inverted (for dark backgrounds)
- * <USGovBanner variant="inverted" />
- * ```
- */
-declare const USGovBanner: React.ForwardRefExoticComponent<USGovBannerProps & React.RefAttributes<HTMLDivElement>>;
-export { USGovBanner, usGovBannerVariants };

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

@@ -1,97 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import * as React from "react";
-/**
- * Banner component based on Figma BaseKit / Banners
- *
- * Used to surface short, important updates or a single key action
- * without disrupting the main page content.
- *
- * Responsive behavior using 24-column grid:
- * - Mobile (sm): Stacked layout, 20px horizontal / 32px vertical padding
- * - Tablet (md): Horizontal layout, 56px padding
- * - Desktop (lg): Horizontal layout, 72px padding
- *
- * Must be placed inside a `grid-container`. Uses `col-full` to span all columns.
- */
-declare const bannerVariants: import('tailwind-variants').TVReturnType<{
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-}, {
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-}>, {
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-}, {
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-}>, unknown, unknown, undefined>>;
-export interface BannerProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof bannerVariants> {
-    /**
-     * The heading text displayed in the banner
-     */
-    heading: string;
-    /**
-     * The description text displayed below the heading
-     */
-    description: string;
-    /**
-     * Optional action element (typically a Button component)
-     */
-    action?: React.ReactNode;
-}
-/**
- * Banner component for surfacing important updates or CTAs.
- *
- * Uses the 24-column grid system - must be placed inside a `grid-container`.
- * Spans full width with `col-full`.
- *
- * Responsive across breakpoints:
- * - Mobile: Stacked layout with smaller padding
- * - Tablet: Horizontal layout with medium padding
- * - Desktop: Horizontal layout with larger padding
- *
- * @example
- * ```tsx
- * <div className="grid-container">
- *   <Banner
- *     heading="Important Update"
- *     description="Check out our new features."
- *     action={<Button>Learn More</Button>}
- *   />
- * </div>
- *
- * // Dark colorScheme
- * <Banner
- *   colorScheme="dark"
- *   heading="Still Have Questions?"
- *   description="Contact us at support@example.com"
- *   action={<Button variant="secondary">Email Us</Button>}
- * />
- * ```
- */
-declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLElement>>;
-export { Banner, bannerVariants };

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