@i-dot-ai-npm/component-library-react 0.0.7 → 0.0.8

package/src/error-summary/ErrorSummaryTitle.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ErrorSummaryTitleProps = {
+type ErrorSummaryTitleProps = ComponentPropsWithoutRef<'h2'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ErrorSummaryTitle({ class: className, children, ...rest }: ErrorSummaryTitleProps) {

package/src/exit-this-page/ExitThisPage.tsx

@@ -1,11 +1,10 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ExitThisPageProps = {
+type ExitThisPageProps = ComponentPropsWithoutRef<'div'> & {
     redirectUrl?: string;
     id?: string;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ExitThisPage({

package/src/feedback/Feedback.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type FeedbackProps = {
+type FeedbackProps = ComponentPropsWithoutRef<'div'> & {
     title?: string;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Feedback({ title, class: className, children, ...rest }: FeedbackProps) {

package/src/fieldset/Fieldset.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type FieldsetProps = {
+type FieldsetProps = ComponentPropsWithoutRef<'fieldset'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Fieldset({ class: className, children, ...rest }: FieldsetProps) {

package/src/fieldset/FieldsetLegend.tsx

@@ -1,11 +1,10 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type FieldsetLegendProps = {
+type FieldsetLegendProps = ComponentPropsWithoutRef<'legend'> & {
     size?: "small" | "medium" | "large" | "xl";
     isPageHeading?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function FieldsetLegend({ size, isPageHeading, class: className, children, ...rest }: FieldsetLegendProps) {

package/src/file-upload/FileUpload.tsx

@@ -1,6 +1,7 @@
-type FileUploadProps = {
+import type { ComponentPropsWithoutRef } from 'react';
+
+type FileUploadProps = ComponentPropsWithoutRef<'input'> & {
     class?: string;
-    [key: string]: unknown;
 };
 
 export default function FileUpload({ class: className, ...rest }: FileUploadProps) {

package/src/footer/Footer.tsx

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 type FooterLink = { href?: string; text?: string; attributes?: Record<string, string> };
 
-type FooterProps = {
+type FooterProps = ComponentPropsWithoutRef<'div'> & {
     /** Support links shown in the inline list (e.g. Accessibility statement, Cookies, Privacy). */
     links?: FooterLink[];
     /** Visually-hidden heading above the support links. */
@@ -10,7 +10,6 @@ type FooterProps = {
     containerClasses?: string;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Footer({

package/src/form-group/FormGroup.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type FormGroupProps = {
+type FormGroupProps = ComponentPropsWithoutRef<'div'> & {
     inline?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function FormGroup({ inline, class: className, children, ...rest }: FormGroupProps) {

package/src/govuk-footer/GovukFooter.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 function FooterCrown() {
     return (
@@ -67,14 +67,13 @@ type FooterCopyright = {
     content?: ReactNode;
 };
 
-type FooterProps = {
+type FooterProps = ComponentPropsWithoutRef<'div'> & {
     navigation?: FooterNav[];
     meta?: FooterMeta;
     contentLicence?: FooterLicence;
     copyright?: FooterCopyright;
     containerClasses?: string;
     class?: string;
-    [key: string]: unknown;
 };
 
 export default function GovukFooter({

package/src/govuk-header/GovukHeader.tsx

@@ -1,3 +1,5 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
 const CROWN_LOGO = `<svg
             focusable="false"
             role="img"
@@ -21,12 +23,11 @@ const CROWN_LOGO = `<svg
               <path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9"/>
           </svg>`;
 
-type GovukHeaderProps = {
+type GovukHeaderProps = ComponentPropsWithoutRef<'div'> & {
     homepageUrl?: string;
     productName?: string;
     containerClasses?: string;
     class?: string;
-    [key: string]: unknown;
 };
 
 export default function GovukHeader({

package/src/header/Header.tsx

@@ -1,11 +1,10 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type HeaderProps = {
+type HeaderProps = ComponentPropsWithoutRef<'div'> & {
     href?: string;
     class?: string;
     containerClasses?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Header({ href, class: className, containerClasses, children, ...rest }: HeaderProps) {

package/src/hint/Hint.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type HintProps = {
+type HintProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Hint({ class: className, children, ...rest }: HintProps) {

package/src/input/Input.tsx

@@ -1,10 +1,11 @@
-type InputProps = {
+import type { ComponentPropsWithoutRef } from 'react';
+
+type InputProps = Omit<ComponentPropsWithoutRef<'input'>, 'width'> & {
     error?: boolean;
     extraLetterSpacing?: boolean;
     subtle?: boolean;
-    width?: "2" | "3" | "4" | "5" | "10" | "20" | "30";
+    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) {
@@ -13,7 +14,7 @@ export default function Input({ error, extraLetterSpacing, subtle, width, class:
         error ? "govuk-input--error" : "",
         extraLetterSpacing ? "govuk-input--extra-letter-spacing" : "",
         subtle ? "govuk-input--subtle" : "",
-        (width ? { "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] : ""),
+        (width ? { 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)

package/src/input-label/InputLabel.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type InputLabelProps = {
+type InputLabelProps = ComponentPropsWithoutRef<'label'> & {
     size?: "small" | "medium" | "large" | "xl";
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function InputLabel({ size, class: className, children, ...rest }: InputLabelProps) {

package/src/inset-text/InsetText.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type InsetTextProps = {
+type InsetTextProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function InsetText({ class: className, children, ...rest }: InsetTextProps) {

package/src/label/Label.tsx

@@ -1,11 +1,10 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type LabelProps = {
+type LabelProps = ComponentPropsWithoutRef<'label'> & {
     size?: "small" | "medium" | "large" | "xl";
     isPageHeading?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Label({ size, isPageHeading = false, class: className, children, ...rest }: LabelProps) {

package/src/language-navigation/LanguageNavigation.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type LanguageNavigationProps = {
+type LanguageNavigationProps = ComponentPropsWithoutRef<'nav'> & {
     ariaLabel?: string;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function LanguageNavigation({

package/src/language-navigation/LanguageNavigationItem.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type LanguageNavigationItemProps = {
+type LanguageNavigationItemProps = Omit<ComponentPropsWithoutRef<'span'> & ComponentPropsWithoutRef<'a'>, 'href' | 'dir'> & {
     href?: string;
     current?: boolean;
     lang?: string;
@@ -10,7 +10,6 @@ type LanguageNavigationItemProps = {
     /** Visually-hidden description appended to a link item. */
     languageDescriptionText?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function LanguageNavigationItem({

package/src/link/Link.tsx

@@ -1,12 +1,11 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type LinkProps = {
+type LinkProps = ComponentPropsWithoutRef<'a'> & {
     noUnderline?: boolean;
     noVisitedState?: boolean;
     variant?: "warning" | "inverse";
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Link({ noUnderline, noVisitedState, variant, class: className, children, ...rest }: LinkProps) {

package/src/list/List.tsx

@@ -1,11 +1,10 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ListProps = {
+type ListProps = ComponentPropsWithoutRef<'ol'> & ComponentPropsWithoutRef<'ul'> & {
     spaced?: boolean;
     numbered?: string;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function List({ spaced, numbered, class: className, children, ...rest }: ListProps) {

package/src/list/ListItem.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ListItemProps = {
+type ListItemProps = ComponentPropsWithoutRef<'li'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ListItem({ class: className, children, ...rest }: ListItemProps) {

package/src/notification-banner/NotificationBanner.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type NotificationBannerProps = {
+type NotificationBannerProps = ComponentPropsWithoutRef<'div'> & {
     success?: string;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function NotificationBanner({ success, class: className, children, ...rest }: NotificationBannerProps) {

package/src/notification-banner/NotificationBannerContent.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type NotificationBannerContentProps = {
+type NotificationBannerContentProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function NotificationBannerContent({ class: className, children, ...rest }: NotificationBannerContentProps) {

package/src/notification-banner/NotificationBannerHeader.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type NotificationBannerHeaderProps = {
+type NotificationBannerHeaderProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function NotificationBannerHeader({ class: className, children, ...rest }: NotificationBannerHeaderProps) {

package/src/notification-banner/NotificationBannerHeading.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type NotificationBannerHeadingProps = {
+type NotificationBannerHeadingProps = ComponentPropsWithoutRef<'p'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function NotificationBannerHeading({ class: className, children, ...rest }: NotificationBannerHeadingProps) {

package/src/notification-banner/NotificationBannerTitle.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type NotificationBannerTitleProps = {
+type NotificationBannerTitleProps = ComponentPropsWithoutRef<'h2'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function NotificationBannerTitle({ class: className, children, ...rest }: NotificationBannerTitleProps) {

package/src/pagination/Pagination.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type PaginationProps = {
+type PaginationProps = ComponentPropsWithoutRef<'nav'> & {
     block?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Pagination({ block, class: className, children, ...rest }: PaginationProps) {

package/src/pagination/PaginationItem.tsx

@@ -1,13 +1,12 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type PaginationItemProps = {
+type PaginationItemProps = ComponentPropsWithoutRef<'a'> & {
     current?: boolean;
     ellipsis?: boolean;
     /** aria-label for the page link (e.g. "Page 2"). */
     ariaLabel?: string;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function PaginationItem({ current, ellipsis, ariaLabel, class: className, children, ...rest }: PaginationItemProps) {

package/src/pagination/PaginationList.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type PaginationListProps = {
+type PaginationListProps = ComponentPropsWithoutRef<'ul'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function PaginationList({ class: className, children, ...rest }: PaginationListProps) {

package/src/pagination/PaginationNext.tsx

@@ -1,13 +1,12 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type PaginationNextProps = {
+type PaginationNextProps = ComponentPropsWithoutRef<'a'> & {
     /** Block-level layout (no numbered items, just prev/next). */
     block?: boolean;
     /** Descriptive label shown alongside the title (block layout only). */
     labelText?: string;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 const arrow = (

package/src/pagination/PaginationPrev.tsx

@@ -1,13 +1,12 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type PaginationPrevProps = {
+type PaginationPrevProps = ComponentPropsWithoutRef<'a'> & {
     /** Block-level layout (no numbered items, just prev/next). */
     block?: boolean;
     /** Descriptive label shown alongside the title (block layout only). */
     labelText?: string;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 const arrow = (

package/src/panel/Panel.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type PanelProps = {
+type PanelProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Panel({ class: className, children, ...rest }: PanelProps) {

package/src/panel/PanelActions.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type PanelActionsProps = {
+type PanelActionsProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function PanelActions({ class: className, children, ...rest }: PanelActionsProps) {

package/src/panel/PanelBody.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type PanelBodyProps = {
+type PanelBodyProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function PanelBody({ class: className, children, ...rest }: PanelBodyProps) {

package/src/panel/PanelTitle.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type PanelTitleProps = {
+type PanelTitleProps = ComponentPropsWithoutRef<'h1'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function PanelTitle({ class: className, children, ...rest }: PanelTitleProps) {

package/src/password-input/PasswordInput.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type PasswordInputProps = {
+type PasswordInputProps = ComponentPropsWithoutRef<'input'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function PasswordInput({ class: className, children, ...rest }: PasswordInputProps) {

package/src/phase-banner/PhaseBanner.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type PhaseBannerProps = {
+type PhaseBannerProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function PhaseBanner({ class: className, children, ...rest }: PhaseBannerProps) {

package/src/phase-banner/PhaseBannerText.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type PhaseBannerTextProps = {
+type PhaseBannerTextProps = ComponentPropsWithoutRef<'span'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function PhaseBannerText({ class: className, children, ...rest }: PhaseBannerTextProps) {

package/src/radios/RadioConditional.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type RadioConditionalProps = {
+type RadioConditionalProps = ComponentPropsWithoutRef<'div'> & {
     hidden?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function RadioConditional({ hidden = true, class: className, children, ...rest }: RadioConditionalProps) {

package/src/radios/RadioDivider.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type RadioDividerProps = {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function RadioDivider({ class: className, children }: RadioDividerProps) {

package/src/radios/RadioInput.tsx

@@ -1,6 +1,7 @@
-type RadioInputProps = {
+import type { ComponentPropsWithoutRef } from 'react';
+
+type RadioInputProps = ComponentPropsWithoutRef<'input'> & {
     class?: string;
-    [key: string]: unknown;
 };
 
 export default function RadioInput({ class: className, ...rest }: RadioInputProps) {

package/src/radios/RadioItem.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type RadioItemProps = {
+type RadioItemProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function RadioItem({ class: className, children, ...rest }: RadioItemProps) {

package/src/radios/RadioLabel.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type RadioLabelProps = {
+type RadioLabelProps = ComponentPropsWithoutRef<'label'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function RadioLabel({ class: className, children, ...rest }: RadioLabelProps) {