@i-dot-ai-npm/component-library-react 0.0.1

package/src/date-input/DateInputItem.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type DateInputItemProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function DateInputItem({ class: className, children, ...rest }: DateInputItemProps) {
+    const classes = ["govuk-date-input__item", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/details/Details.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type DetailsProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Details({ class: className, children, ...rest }: DetailsProps) {
+    const classes = ["govuk-details", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <details className={classes} {...rest}>
+            {children ?? ""}
+        </details>
+    );
+}

package/src/details/DetailsSummary.tsx

@@ -0,0 +1,19 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type DetailsSummaryProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function DetailsSummary({ class: className, children, ...rest }: DetailsSummaryProps) {
+    const classes = ["govuk-details__summary", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <summary className={classes} {...rest}>
+            <span className="govuk-details__summary-text">
+                {children ?? ""}
+            </span>
+        </summary>
+    );
+}

package/src/details/DetailsText.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type DetailsTextProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function DetailsText({ class: className, children, ...rest }: DetailsTextProps) {
+    const classes = ["govuk-details__text", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/error-message/ErrorMessage.tsx

@@ -0,0 +1,20 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type ErrorMessageProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function ErrorMessage({ class: className, children, ...rest }: ErrorMessageProps) {
+    const classes = ["govuk-error-message", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <p className={classes} {...rest}>
+            <span className="govuk-visually-hidden">
+                Error:
+            </span>
+            {children ?? ""}
+        </p>
+    );
+}

package/src/error-summary/ErrorSummary.tsx

@@ -0,0 +1,19 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type ErrorSummaryProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function ErrorSummary({ class: className, children, ...rest }: ErrorSummaryProps) {
+    const classes = ["govuk-error-summary", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} data-module="govuk-error-summary" {...rest}>
+            <div role="alert">
+                {children ?? ""}
+            </div>
+        </div>
+    );
+}

package/src/error-summary/ErrorSummaryBody.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type ErrorSummaryBodyProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function ErrorSummaryBody({ class: className, children, ...rest }: ErrorSummaryBodyProps) {
+    const classes = ["govuk-error-summary__body", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/error-summary/ErrorSummaryItem.tsx

@@ -0,0 +1,19 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type ErrorSummaryItemProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function ErrorSummaryItem({ class: className, children, ...rest }: ErrorSummaryItemProps) {
+    const classes = ["", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <li>
+            <a className={classes} {...rest}>
+                {children ?? ""}
+            </a>
+        </li>
+    );
+}

package/src/error-summary/ErrorSummaryList.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type ErrorSummaryListProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function ErrorSummaryList({ class: className, children, ...rest }: ErrorSummaryListProps) {
+    const classes = ["govuk-list govuk-error-summary__list", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <ul className={classes} {...rest}>
+            {children ?? ""}
+        </ul>
+    );
+}

package/src/error-summary/ErrorSummaryTitle.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type ErrorSummaryTitleProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function ErrorSummaryTitle({ class: className, children, ...rest }: ErrorSummaryTitleProps) {
+    const classes = ["govuk-error-summary__title", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <h2 className={classes} {...rest}>
+            {children ?? ""}
+        </h2>
+    );
+}

package/src/fieldset/Fieldset.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type FieldsetProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Fieldset({ class: className, children, ...rest }: FieldsetProps) {
+    const classes = ["govuk-fieldset", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <fieldset className={classes} {...rest}>
+            {children ?? ""}
+        </fieldset>
+    );
+}

package/src/fieldset/FieldsetLegend.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type FieldsetLegendProps = {
+    size?: "small" | "medium" | "large" | "xl";
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function FieldsetLegend({ size, class: className, children, ...rest }: FieldsetLegendProps) {
+    const classes = [
+        "govuk-fieldset__legend",
+        ({ "small": "govuk-fieldset__legend--s", "medium": "govuk-fieldset__legend--m", "large": "govuk-fieldset__legend--l", "xl": "govuk-fieldset__legend--xl" }[size] ?? ""),
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <legend className={classes} {...rest}>
+            {children ?? ""}
+        </legend>
+    );
+}

package/src/file-upload/FileUpload.tsx

@@ -0,0 +1,14 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type FileUploadProps = {
+    class?: string;
+    [key: string]: unknown;
+};
+
+export default function FileUpload({ class: className, ...rest }: FileUploadProps) {
+    const classes = ["govuk-file-upload", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <input className={classes} type="file" {...rest} />
+    );
+}

package/src/form-group/FormGroup.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type FormGroupProps = {
+    inline?: boolean;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function FormGroup({ inline, class: className, children, ...rest }: FormGroupProps) {
+    const classes = [
+        "govuk-form-group",
+        inline ? "govuk-form-group--inline" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/header/Header.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type HeaderProps = {
+    href?: string;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Header({ href, class: className, children, ...rest }: HeaderProps) {
+    const classes = ["govuk-generic-header", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            <div className="govuk-generic-header__container govuk-width-container">
+                <div className="govuk-generic-header__logo">
+                    <a className="govuk-generic-header__homepage-link" href={href}>
+                        {children ?? ""}
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/hint/Hint.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type HintProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Hint({ class: className, children, ...rest }: HintProps) {
+    const classes = ["govuk-hint", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/index.ts

@@ -0,0 +1,110 @@
+// AUTO-GENERATED barrel. Do not edit by hand.
+export { default as AccordionSectionContent } from "./accordion/AccordionSectionContent";
+export { default as AccordionSectionHeader } from "./accordion/AccordionSectionHeader";
+export { default as AccordionSectionHeading } from "./accordion/AccordionSectionHeading";
+export { default as AccordionSectionSummary } from "./accordion/AccordionSectionSummary";
+export { default as AccordionSection } from "./accordion/AccordionSection";
+export { default as Accordion } from "./accordion/Accordion";
+export { default as BackLink } from "./back-link/BackLink";
+export { default as BreadcrumbItem } from "./breadcrumbs/BreadcrumbItem";
+export { default as Breadcrumbs } from "./breadcrumbs/Breadcrumbs";
+export { default as Button } from "./button/Button";
+export { default as ButtonGroup } from "./button-group/ButtonGroup";
+export { default as CardContent } from "./card/CardContent";
+export { default as CardGroup } from "./card/CardGroup";
+export { default as CardHeading } from "./card/CardHeading";
+export { default as CardIcon } from "./card/CardIcon";
+export { default as CardLink } from "./card/CardLink";
+export { default as Card } from "./card/Card";
+export { default as CharacterCountMessage } from "./character-count/CharacterCountMessage";
+export { default as CharacterCount } from "./character-count/CharacterCount";
+export { default as CheckboxDivider } from "./checkboxes/CheckboxDivider";
+export { default as CheckboxInput } from "./checkboxes/CheckboxInput";
+export { default as CheckboxItem } from "./checkboxes/CheckboxItem";
+export { default as CheckboxLabel } from "./checkboxes/CheckboxLabel";
+export { default as Checkboxes } from "./checkboxes/Checkboxes";
+export { default as CookieBannerActions } from "./cookie-banner/CookieBannerActions";
+export { default as CookieBannerContent } from "./cookie-banner/CookieBannerContent";
+export { default as CookieBannerHeading } from "./cookie-banner/CookieBannerHeading";
+export { default as CookieBannerMessage } from "./cookie-banner/CookieBannerMessage";
+export { default as CookieBanner } from "./cookie-banner/CookieBanner";
+export { default as DateInputField } from "./date-input/DateInputField";
+export { default as DateInputItem } from "./date-input/DateInputItem";
+export { default as DateInput } from "./date-input/DateInput";
+export { default as DetailsSummary } from "./details/DetailsSummary";
+export { default as DetailsText } from "./details/DetailsText";
+export { default as Details } from "./details/Details";
+export { default as ErrorMessage } from "./error-message/ErrorMessage";
+export { default as ErrorSummaryBody } from "./error-summary/ErrorSummaryBody";
+export { default as ErrorSummaryItem } from "./error-summary/ErrorSummaryItem";
+export { default as ErrorSummaryList } from "./error-summary/ErrorSummaryList";
+export { default as ErrorSummaryTitle } from "./error-summary/ErrorSummaryTitle";
+export { default as ErrorSummary } from "./error-summary/ErrorSummary";
+export { default as FieldsetLegend } from "./fieldset/FieldsetLegend";
+export { default as Fieldset } from "./fieldset/Fieldset";
+export { default as FileUpload } from "./file-upload/FileUpload";
+export { default as FormGroup } from "./form-group/FormGroup";
+export { default as Header } from "./header/Header";
+export { default as Hint } from "./hint/Hint";
+export { default as Input } from "./input/Input";
+export { default as InputLabel } from "./input-label/InputLabel";
+export { default as InsetText } from "./inset-text/InsetText";
+export { default as Link } from "./link/Link";
+export { default as ListItem } from "./list/ListItem";
+export { default as List } from "./list/List";
+export { default as NotificationBannerContent } from "./notification-banner/NotificationBannerContent";
+export { default as NotificationBannerHeader } from "./notification-banner/NotificationBannerHeader";
+export { default as NotificationBannerHeading } from "./notification-banner/NotificationBannerHeading";
+export { default as NotificationBannerTitle } from "./notification-banner/NotificationBannerTitle";
+export { default as NotificationBanner } from "./notification-banner/NotificationBanner";
+export { default as PaginationItem } from "./pagination/PaginationItem";
+export { default as PaginationList } from "./pagination/PaginationList";
+export { default as PaginationNext } from "./pagination/PaginationNext";
+export { default as PaginationPrev } from "./pagination/PaginationPrev";
+export { default as Pagination } from "./pagination/Pagination";
+export { default as PasswordInput } from "./password-input/PasswordInput";
+export { default as PhaseBanner } from "./phase-banner/PhaseBanner";
+export { default as RadioDivider } from "./radios/RadioDivider";
+export { default as RadioInput } from "./radios/RadioInput";
+export { default as RadioItem } from "./radios/RadioItem";
+export { default as Radios } from "./radios/Radios";
+export { default as SelectOption } from "./select/SelectOption";
+export { default as Select } from "./select/Select";
+export { default as ServiceNavigationItem } from "./service-navigation/ServiceNavigationItem";
+export { default as ServiceNavigation } from "./service-navigation/ServiceNavigation";
+export { default as SideNavItem } from "./side-nav/SideNavItem";
+export { default as SideNavList } from "./side-nav/SideNavList";
+export { default as SideNavSubnavHeading } from "./side-nav/SideNavSubnavHeading";
+export { default as SideNavSubnavList } from "./side-nav/SideNavSubnavList";
+export { default as SideNavTitle } from "./side-nav/SideNavTitle";
+export { default as SideNav } from "./side-nav/SideNav";
+export { default as SkipLink } from "./skip-link/SkipLink";
+export { default as SummaryListActions } from "./summary-list/SummaryListActions";
+export { default as SummaryListKey } from "./summary-list/SummaryListKey";
+export { default as SummaryListRow } from "./summary-list/SummaryListRow";
+export { default as SummaryListValue } from "./summary-list/SummaryListValue";
+export { default as SummaryList } from "./summary-list/SummaryList";
+export { default as TableBody } from "./table/TableBody";
+export { default as TableCaption } from "./table/TableCaption";
+export { default as TableCell } from "./table/TableCell";
+export { default as TableHead } from "./table/TableHead";
+export { default as TableHeader } from "./table/TableHeader";
+export { default as TableRow } from "./table/TableRow";
+export { default as Table } from "./table/Table";
+export { default as TabPanel } from "./tabs/TabPanel";
+export { default as Tab } from "./tabs/Tab";
+export { default as TabsList } from "./tabs/TabsList";
+export { default as TabsTitle } from "./tabs/TabsTitle";
+export { default as Tabs } from "./tabs/Tabs";
+export { default as Tag } from "./tag/Tag";
+export { default as TaskListHint } from "./task-list/TaskListHint";
+export { default as TaskListItem } from "./task-list/TaskListItem";
+export { default as TaskListLink } from "./task-list/TaskListLink";
+export { default as TaskListNameAndHint } from "./task-list/TaskListNameAndHint";
+export { default as TaskListStatus } from "./task-list/TaskListStatus";
+export { default as TaskList } from "./task-list/TaskList";
+export { default as Textarea } from "./textarea/Textarea";
+export { default as ToggleItem } from "./toggle/ToggleItem";
+export { default as ToggleLabel } from "./toggle/ToggleLabel";
+export { default as Toggle } from "./toggle/Toggle";
+export { default as WarningText } from "./warning-text/WarningText";

package/src/input/Input.tsx

@@ -0,0 +1,27 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type InputProps = {
+    error?: boolean;
+    extraLetterSpacing?: boolean;
+    subtle?: boolean;
+    width?: "2" | "3" | "4" | "5" | "10" | "20" | "30";
+    class?: string;
+    [key: string]: unknown;
+};
+
+export default function Input({ error, extraLetterSpacing, subtle, width, class: className, ...rest }: InputProps) {
+    const classes = [
+        "govuk-input",
+        error ? "govuk-input--error" : "",
+        extraLetterSpacing ? "govuk-input--extra-letter-spacing" : "",
+        subtle ? "govuk-input--subtle" : "",
+        ({ "2": "govuk-input--width-2", "3": "govuk-input--width-3", "4": "govuk-input--width-4", "5": "govuk-input--width-5", "10": "govuk-input--width-10", "20": "govuk-input--width-20", "30": "govuk-input--width-30" }[width] ?? ""),
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <input className={classes} type="text" {...rest} />
+    );
+}

package/src/input-label/InputLabel.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type InputLabelProps = {
+    size?: "small" | "medium" | "large" | "xl";
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function InputLabel({ size, class: className, children, ...rest }: InputLabelProps) {
+    const classes = [
+        "govuk-label",
+        ({ "small": "govuk-label--s", "medium": "govuk-label--m", "large": "govuk-label--l", "xl": "govuk-label--xl" }[size] ?? ""),
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <label className={classes} {...rest}>
+            {children ?? ""}
+        </label>
+    );
+}

package/src/inset-text/InsetText.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type InsetTextProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function InsetText({ class: className, children, ...rest }: InsetTextProps) {
+    const classes = ["govuk-inset-text", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/link/Link.tsx

@@ -0,0 +1,28 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type LinkProps = {
+    noUnderline?: boolean;
+    noVisitedState?: boolean;
+    variant?: "warning" | "inverse";
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Link({ noUnderline, noVisitedState, variant, class: className, children, ...rest }: LinkProps) {
+    const classes = [
+        "govuk-link",
+        noUnderline ? "govuk-link--no-underline" : "",
+        noVisitedState ? "govuk-link--no-visited-state" : "",
+        ({ "warning": "govuk-link--warning", "inverse": "govuk-link--inverse" }[variant] ?? ""),
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <a className={classes} {...rest}>
+            {children ?? ""}
+        </a>
+    );
+}

package/src/list/List.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type ListProps = {
+    spaced?: boolean;
+    numbered?: string;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function List({ spaced, numbered, class: className, children, ...rest }: ListProps) {
+
+    return (
+        numbered ? (
+        <ol className={["govuk-list govuk-list--number", spaced ? "govuk-list--spaced" : "", className ?? ""].filter(Boolean).join(" ")} {...rest}>
+            {children ?? ""}
+        </ol>
+        ) : (
+        <ul className={["govuk-list", spaced ? "govuk-list--spaced" : "", className ?? ""].filter(Boolean).join(" ")} {...rest}>
+            {children ?? ""}
+        </ul>
+        )
+    );
+}

package/src/list/ListItem.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type ListItemProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function ListItem({ class: className, children, ...rest }: ListItemProps) {
+    const classes = ["govuk-list-item", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <li className={classes} {...rest}>
+            {children ?? ""}
+        </li>
+    );
+}

package/src/notification-banner/NotificationBanner.tsx

@@ -0,0 +1,23 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type NotificationBannerProps = {
+    success?: string;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function NotificationBanner({ success, class: className, children, ...rest }: NotificationBannerProps) {
+
+    return (
+        success ? (
+        <div className={["govuk-notification-banner govuk-notification-banner--success", className ?? ""].filter(Boolean).join(" ")} role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner" {...rest}>
+            {children ?? ""}
+        </div>
+        ) : (
+        <div className={["govuk-notification-banner", className ?? ""].filter(Boolean).join(" ")} role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner" {...rest}>
+            {children ?? ""}
+        </div>
+        )
+    );
+}

package/src/notification-banner/NotificationBannerContent.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type NotificationBannerContentProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function NotificationBannerContent({ class: className, children, ...rest }: NotificationBannerContentProps) {
+    const classes = ["govuk-notification-banner__content", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/notification-banner/NotificationBannerHeader.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type NotificationBannerHeaderProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function NotificationBannerHeader({ class: className, children, ...rest }: NotificationBannerHeaderProps) {
+    const classes = ["govuk-notification-banner__header", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/notification-banner/NotificationBannerHeading.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type NotificationBannerHeadingProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function NotificationBannerHeading({ class: className, children, ...rest }: NotificationBannerHeadingProps) {
+    const classes = ["govuk-notification-banner__heading", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <p className={classes} {...rest}>
+            {children ?? ""}
+        </p>
+    );
+}