@cruk/cruk-react-components 4.2.2 → 5.0.0

package/lib/components/DateField/styles.d.ts

@@ -1,10 +1,14 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type ThemeProps = {
     theme: ThemeType;
 };
-export declare const Fieldset: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
-export declare const TextAsLabel: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Text").TextProps>, any, ThemeProps, never>;
-export declare const DateTextFieldWrapper: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
-export declare const LargeDateTextFieldWrapper: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
-export declare const ErrorTextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Fieldset: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
+export declare const TextAsLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
+}, ThemeProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const DateTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThemeProps>> & string;
+export declare const LargeDateTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & ThemeProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const ErrorTextWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/lib/components/Divider.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { type ReactNode } from "react";
 type DividerProps = {
     children?: ReactNode;
 };

package/lib/components/ErrorText/ErrorText.stories.d.ts

@@ -1,9 +1,8 @@
-import React from "react";
 import { StoryObj } from "@storybook/react";
 import ErrorText from ".";
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<import(".").ErrorTextProps>;
+    component: typeof ErrorText;
     args: {
         children: string;
     };

package/lib/components/ErrorText/index.d.ts

@@ -1,5 +1,5 @@
-import React, { FunctionComponent, HTMLAttributes } from "react";
-import { SpacingProps } from "../Spacing";
+import React, { type HTMLAttributes } from "react";
+import { type SpacingProps } from "../Spacing";
 export type ErrorTextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     as?: React.ElementType;
 };
@@ -9,5 +9,5 @@ export type ErrorTextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
  *
  * Please be aware that some input components already have this component built in and can be passed an "errorMessage" prop
  */
-declare const ErrorText: FunctionComponent<ErrorTextProps>;
+export declare function ErrorText({ children, as, ...props }: ErrorTextProps): React.JSX.Element;
 export default ErrorText;

package/lib/components/ErrorText/styles.d.ts

@@ -1,6 +1,8 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type ThemeProps = {
     theme: ThemeType;
 };
-export declare const StyledErrorText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Text").TextProps>, any, ThemeProps, never>;
+export declare const StyledErrorText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
+}, ThemeProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
 export default StyledErrorText;

package/lib/components/Flex.d.ts

@@ -1,3 +1,7 @@
-import { SpacingProps } from "./Spacing";
-declare const Flex: import("styled-components").StyledComponent<"div", any, SpacingProps, never>;
+import { type SpacingProps } from "./Spacing";
+import { type ThemeType } from "../types";
+type Props = SpacingProps & {
+    theme: ThemeType;
+};
+export declare const Flex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>> & string;
 export default Flex;

package/lib/components/Fontface.d.ts

@@ -1,2 +1,4 @@
-export declare const fontFaceStyleString: string;
-export default fontFaceStyleString;
+import { type CustomFontType } from "../types";
+export declare const buildCustomFonts: (customFonts: CustomFontType[]) => string;
+export declare const Fontface: string;
+export default Fontface;

package/lib/components/Footer/Footer.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryObj } from "@storybook/react";
 import Footer, { FooterProps } from ".";
 declare const _default: {
     title: string;
-    component: ({ children, middleSection }: FooterProps) => React.JSX.Element;
+    component: typeof Footer;
     render: (args: FooterProps) => React.JSX.Element;
     tags: string[];
 };

package/lib/components/Footer/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, HTMLAttributes } from "react";
+import React, { type ReactNode, type HTMLAttributes } from "react";
 export type FooterProps = HTMLAttributes<HTMLElement> & {
     /** used to customise text in middle section, it could also be react element, this is not to be confused with the component children which is primarily for the links in the footer */
     middleSection?: ReactNode;
@@ -7,5 +7,5 @@ export type FooterProps = HTMLAttributes<HTMLElement> & {
 /**
  * There should be only one footer component at the bottom of the body of each page. Links can be passed as children
  * */
-export declare const Footer: ({ children, middleSection }: FooterProps) => React.JSX.Element;
+export declare function Footer({ children, middleSection }: FooterProps): React.JSX.Element;
 export default Footer;

package/lib/components/Footer/styles.d.ts

@@ -1,16 +1,22 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type ThemeProps = {
     theme: ThemeType;
 };
-export declare const StyledFooter: import("styled-components").StyledComponent<"footer", any, ThemeProps, never>;
-export declare const FooterContentWrapper: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
-export declare const FooterSection: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
-export declare const FooterSectionLogo: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
-export declare const FooterSectionLinks: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
-export declare const StyledNav: import("styled-components").StyledComponent<"nav", any, ThemeProps, never>;
-export declare const StyledUL: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const StyledLI: import("styled-components").StyledComponent<"li", any, ThemeProps, never>;
-export declare const FooterSectionAddress: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
-export declare const StyledRegulatorLogo: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const StyledAddress: import("styled-components").StyledComponent<"address", any, {}, never>;
+export declare const StyledFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, ThemeProps>> & string;
+export declare const FooterContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThemeProps>> & string;
+export declare const FooterSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThemeProps>> & string;
+export declare const FooterSectionLogo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & ThemeProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const FooterSectionLinks: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & ThemeProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const StyledNav: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, ThemeProps>> & string;
+export declare const StyledUL: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const StyledLI: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ThemeProps>> & string;
+export declare const FooterSectionAddress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & ThemeProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const StyledRegulatorLogo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
+export declare const StyledAddress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 export {};

package/lib/components/GlobalStyle.d.ts

@@ -1,8 +1,2 @@
-declare const _default: import("react").ForwardRefExoticComponent<{
-    ref?: import("react").Ref<import("react").Component<import("styled-components").ThemedGlobalStyledClassProps<{}, import("styled-components").DefaultTheme>, any, any>> | undefined;
-    suppressMultiMountWarning?: boolean | undefined;
-    key?: import("react").Key | null | undefined;
-} & {
-    theme?: any;
-}>;
-export default _default;
+export declare const GlobalStyle: import("react").ForwardRefExoticComponent<import("styled-components").ExecutionProps & import("react").RefAttributes<import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>>> & {};
+export default GlobalStyle;

package/lib/components/GlobalStyleNoFontFace.d.ts

@@ -1,8 +1,2 @@
-declare const _default: import("react").ForwardRefExoticComponent<{
-    ref?: import("react").Ref<import("react").Component<import("styled-components").ThemedGlobalStyledClassProps<{}, import("styled-components").DefaultTheme>, any, any>> | undefined;
-    suppressMultiMountWarning?: boolean | undefined;
-    key?: import("react").Key | null | undefined;
-} & {
-    theme?: any;
-}>;
-export default _default;
+export declare const GlobalStyleNoFontFace: import("react").ForwardRefExoticComponent<import("styled-components").ExecutionProps & import("react").RefAttributes<import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>>> & {};
+export default GlobalStyleNoFontFace;

package/lib/components/Header/Header.stories.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { StoryObj } from "@storybook/react";
-import Header, { HeaderProps } from ".";
+import Header from ".";
 declare const _default: {
     title: string;
-    component: ({ isSticky, siteSlogan, logoAltText, logoImageSrc, logoLinkTitle, logoLinkUrl, fullWidth, children, }: HeaderProps) => React.JSX.Element;
+    component: typeof Header;
     args: {
         siteSlogan: string;
         children: React.JSX.Element;

package/lib/components/Header/index.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, ReactNode } from "react";
+import React, { type HTMLAttributes, type ReactNode } from "react";
 export type HeaderProps = HTMLAttributes<HTMLElement> & {
     /** flag which make header fixed to the top even when scrolling */
     isSticky?: boolean;
@@ -33,5 +33,5 @@ export type HeaderProps = HTMLAttributes<HTMLElement> & {
  * There is a hidden skip link in the header which will only reveals itself on the first tab and to screen readers. This link helps users skip to the main page content, however this will only work with there is an element with an id of 'main' which the developer should create for every page.
  *
  */
-export declare const Header: ({ isSticky, siteSlogan, logoAltText, logoImageSrc, logoLinkTitle, logoLinkUrl, fullWidth, children, }: HeaderProps) => React.JSX.Element;
+export declare function Header({ isSticky, siteSlogan, logoAltText, logoImageSrc, logoLinkTitle, logoLinkUrl, fullWidth, children, }: HeaderProps): React.JSX.Element;
 export default Header;

package/lib/components/Header/styles.d.ts

@@ -1,37 +1,36 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type StyledHeaderProps = {
     theme: ThemeType;
     isSmall?: boolean;
     isSticky?: boolean;
     fullWidth?: boolean;
 };
-export declare const StyledHeader: import("styled-components").StyledComponent<"header", any, {
-    isSmall?: boolean | undefined;
-    isSticky?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-}, never>;
-export declare const HeaderStickyPlaceHolder: import("styled-components").StyledComponent<"div", any, StyledHeaderProps, never>;
+export declare const StyledHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, StyledHeaderProps>> & string;
+export declare const HeaderStickyPlaceHolder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledHeaderProps>> & string;
 type HeaderStickyProps = {
     isSmall?: boolean;
     isSticky?: boolean;
     theme: ThemeType;
 };
-export declare const HeaderStickyContainer: import("styled-components").StyledComponent<"div", any, HeaderStickyProps, never>;
-export declare const HeaderMainContent: import("styled-components").StyledComponent<"div", any, {
-    fullWidth?: boolean | undefined;
-}, never>;
-export declare const Logo: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const HeaderStickyContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HeaderStickyProps>> & string;
+export declare const HeaderMainContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    fullWidth?: boolean;
+    theme: ThemeType;
+}>> & string;
+export declare const Logo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
 type LogoWrapperProps = {
     isSmall?: boolean;
     isSticky?: boolean;
+    theme: ThemeType;
 };
-export declare const LogoWrapper: import("styled-components").StyledComponent<"div", any, LogoWrapperProps, never>;
-export declare const StyledLink: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare const SkipToMain: import("styled-components").StyledComponent<"a", any, StyledHeaderProps, never>;
-export declare const Tagline: import("styled-components").StyledComponent<"p", any, {
-    isSmall?: boolean | undefined;
-    isSticky?: boolean | undefined;
-}, never>;
-export declare const ChildWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChildInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LogoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LogoWrapperProps>> & string;
+export declare const StyledLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+export declare const SkipToMain: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, StyledHeaderProps>> & string;
+export declare const Tagline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+    isSmall?: boolean;
+    isSticky?: boolean;
+    theme: ThemeType;
+}>> & string;
+export declare const ChildWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ChildInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/lib/components/Heading/Heading.stories.d.ts

@@ -1,9 +1,8 @@
-import React from "react";
 import { StoryObj } from "@storybook/react";
 import Heading from ".";
 declare const _default: {
     title: string;
-    component: ({ h1, h2, h3, h4, h5, h6, ...props }: import(".").HeadingProps) => React.JSX.Element;
+    component: typeof Heading;
     args: {};
     tags: string[];
 };

package/lib/components/Heading/index.d.ts

@@ -1,6 +1,6 @@
-import React, { HTMLAttributes, ElementType } from "react";
-import { SpacingProps } from "../Spacing";
-import { FontSizeType, WordBreakType, OverflowWrapType } from "../../types";
+import React, { type HTMLAttributes, type ElementType } from "react";
+import { type SpacingProps } from "../Spacing";
+import { type FontSizeType, type WordBreakType, type OverflowWrapType } from "../../types";
 export type HeadingProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     h1?: boolean;
     h2?: boolean;
@@ -28,5 +28,5 @@ Markup headings semantically using the appropriate <h#> level HTML element and
 use the corresponding heading class (h1, h2, h3, ....). Write all headings in sentence case. Heading differs from the Text component by using a different font-family and it changes the font size according to the screen width breakpoints.
  *
  */
-declare const Heading: ({ h1, h2, h3, h4, h5, h6, ...props }: HeadingProps) => React.JSX.Element;
+export declare function Heading({ h1, h2, h3, h4, h5, h6, ...props }: HeadingProps): React.JSX.Element;
 export default Heading;

package/lib/components/Heading/styles.d.ts

@@ -1,50 +1,17 @@
-import { SpacingProps } from "../Spacing";
-import { ThemeType, FontSizeType, WordBreakType } from "../../types";
-export declare const H1: import("styled-components").StyledComponent<"h1", any, SpacingProps & {
+import { type SpacingProps } from "../Spacing";
+import { type ThemeType, type FontSizeType, type WordBreakType } from "../../types";
+type StyledHeadingProps = SpacingProps & {
     theme: ThemeType;
-    textSize?: FontSizeType | undefined;
-    textAlign?: "left" | "right" | "center" | undefined;
-    textColor?: string | undefined;
-    wordBreak?: WordBreakType | undefined;
-    overflowWrap?: WordBreakType | undefined;
-}, never>;
-export declare const H2: import("styled-components").StyledComponent<"h2", any, SpacingProps & {
-    theme: ThemeType;
-    textSize?: FontSizeType | undefined;
-    textAlign?: "left" | "right" | "center" | undefined;
-    textColor?: string | undefined;
-    wordBreak?: WordBreakType | undefined;
-    overflowWrap?: WordBreakType | undefined;
-}, never>;
-export declare const H3: import("styled-components").StyledComponent<"h3", any, SpacingProps & {
-    theme: ThemeType;
-    textSize?: FontSizeType | undefined;
-    textAlign?: "left" | "right" | "center" | undefined;
-    textColor?: string | undefined;
-    wordBreak?: WordBreakType | undefined;
-    overflowWrap?: WordBreakType | undefined;
-}, never>;
-export declare const H4: import("styled-components").StyledComponent<"h4", any, SpacingProps & {
-    theme: ThemeType;
-    textSize?: FontSizeType | undefined;
-    textAlign?: "left" | "right" | "center" | undefined;
-    textColor?: string | undefined;
-    wordBreak?: WordBreakType | undefined;
-    overflowWrap?: WordBreakType | undefined;
-}, never>;
-export declare const H5: import("styled-components").StyledComponent<"h5", any, SpacingProps & {
-    theme: ThemeType;
-    textSize?: FontSizeType | undefined;
-    textAlign?: "left" | "right" | "center" | undefined;
-    textColor?: string | undefined;
-    wordBreak?: WordBreakType | undefined;
-    overflowWrap?: WordBreakType | undefined;
-}, never>;
-export declare const H6: import("styled-components").StyledComponent<"h6", any, SpacingProps & {
-    theme: ThemeType;
-    textSize?: FontSizeType | undefined;
-    textAlign?: "left" | "right" | "center" | undefined;
-    textColor?: string | undefined;
-    wordBreak?: WordBreakType | undefined;
-    overflowWrap?: WordBreakType | undefined;
-}, never>;
+    textSize?: FontSizeType;
+    textAlign?: "left" | "right" | "center";
+    textColor?: string;
+    wordBreak?: WordBreakType;
+    overflowWrap?: WordBreakType;
+};
+export declare const H1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, StyledHeadingProps>> & string;
+export declare const H2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, StyledHeadingProps>> & string;
+export declare const H3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, StyledHeadingProps>> & string;
+export declare const H4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, StyledHeadingProps>> & string;
+export declare const H5: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, StyledHeadingProps>> & string;
+export declare const H6: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, StyledHeadingProps>> & string;
+export {};

package/lib/components/IconFa/IconFa.stories.d.ts

@@ -1,9 +1,8 @@
-import React from "react";
 import { StoryObj } from "@storybook/react";
 import { IconFa } from "..";
 declare const _default: {
     title: string;
-    component: ({ faIcon, color, size, ...rest }: import(".").IconFaProps) => React.JSX.Element;
+    component: typeof IconFa;
     args: {
         faIcon: import("@fortawesome/fontawesome-common-types").IconDefinition;
     };

package/lib/components/IconFa/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import { type IconDefinition } from "@fortawesome/fontawesome-common-types";
 export type IconFaProps = {
     /** imported icon definition from "@fortawesome/free-solid-svg-icons" or "@fortawesome/free-brands-svg-icons" */
     faIcon: IconDefinition;
@@ -13,5 +13,5 @@ export type IconFaProps = {
  *
  * This is an svg icon wrapper where a font awesome icon definition can be passed in a long with colour and size
  * */
-declare const IconFa: ({ faIcon, color, size, ...rest }: IconFaProps) => React.JSX.Element;
+export declare function IconFa({ faIcon, color, size, ...rest }: IconFaProps): React.JSX.Element;
 export default IconFa;

package/lib/components/IconFa/styles.d.ts

@@ -1,5 +1,8 @@
-export declare const StyledIcon: import("styled-components").StyledComponent<"svg", any, {
-    color?: string | undefined;
-    size?: string | undefined;
-}, never>;
+import { type ThemeType } from "../../types";
+type StyledIconProp = {
+    theme: ThemeType;
+    color?: string;
+    size: string;
+};
+export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGSVGElement>, StyledIconProp>> & string;
 export default StyledIcon;

package/lib/components/InfoBox/InfoBox.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryObj } from "@storybook/react";
 import InfoBox from ".";
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<import(".").InfoBoxProps>;
+    component: React.ForwardRefExoticComponent<Omit<import(".").InfoBoxProps, "ref"> & React.RefAttributes<HTMLElement>>;
     args: {
         titleText: string;
         titleTextColor: string;

package/lib/components/InfoBox/index.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent, HTMLAttributes, Ref, ReactNode, ElementType } from "react";
-import { SpacingProps } from "../Spacing";
+import React, { type HTMLAttributes, type Ref, type ReactNode, type ElementType } from "react";
+import { type SpacingProps } from "../Spacing";
 export type InfoBoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     /** background color of wrapping element, this will add default padding */
     backgroundColor?: string;
@@ -24,5 +24,5 @@ export type InfoBoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
   
   The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.
    */
-declare const InfoBox: FunctionComponent<InfoBoxProps>;
+export declare const InfoBox: React.ForwardRefExoticComponent<Omit<InfoBoxProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default InfoBox;

package/lib/components/InfoBox/styles.d.ts

@@ -1,13 +1,10 @@
-import { ThemeType } from "../../types";
-import { BoxProps } from "../Box";
-export declare const StyledInfoBox: import("styled-components").StyledComponent<import("react").FunctionComponent<BoxProps>, any, import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
-    backgroundColor?: string | undefined;
-    css?: string | undefined;
-    ref?: import("react").Ref<HTMLDivElement> | undefined;
-    children?: import("react").ReactNode;
-    as?: import("react").ElementType | undefined;
-} & {
-    css?: string | undefined;
+import { type ThemeType } from "../../types";
+import { type BoxProps } from "../Box";
+type InfoBoxProps = BoxProps & {
+    css?: string;
     theme: ThemeType;
-}, never>;
+};
+export declare const StyledInfoBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, InfoBoxProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export default StyledInfoBox;

package/lib/components/LabelWrapper/index.d.ts

@@ -1,4 +1,4 @@
-import React, { LabelHTMLAttributes, ReactNode } from "react";
+import React, { type LabelHTMLAttributes, type ReactNode } from "react";
 type LabelWrapperProps = LabelHTMLAttributes<HTMLLabelElement> & {
     /** label text */
     label: string;
@@ -10,10 +10,5 @@ type LabelWrapperProps = LabelHTMLAttributes<HTMLLabelElement> & {
     hideRequiredInLabel?: boolean;
     children?: ReactNode;
 };
-export declare const LabelWrapper: {
-    ({ label, hintText, required, hideRequiredInLabel, children, ...otherHTMLLabelProps }: LabelWrapperProps): React.JSX.Element;
-    defaultProps: {
-        required: boolean;
-    };
-};
+export declare function LabelWrapper({ label, hintText, required, hideRequiredInLabel, children, ...otherHTMLLabelProps }: LabelWrapperProps): React.JSX.Element;
 export default LabelWrapper;

package/lib/components/LabelWrapper/styles.d.ts

@@ -1,11 +1,13 @@
-import { ThemeType } from "../../types";
-type LabelProp = {
+import { type ThemeType } from "../../types";
+type LabelTextProp = {
+    hasHintText: boolean;
     theme: ThemeType;
 };
-export declare const Label: import("styled-components").StyledComponent<"label", any, LabelProp, never>;
-export declare const RequiredText: import("styled-components").StyledComponent<"span", any, LabelProp, never>;
-export declare const LabelText: import("styled-components").StyledComponent<"span", any, {
-    hasHintText: boolean;
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    theme: ThemeType;
+}>> & string;
+export declare const RequiredText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     theme: ThemeType;
-}, never>;
+}>> & string;
+export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, LabelTextProp>> & string;
 export {};

package/lib/components/LegendWrapper/LegendWrapper.stories.d.ts

@@ -1,9 +1,8 @@
-import React from "react";
 import { StoryObj } from "@storybook/react";
-import LegendWrapper, { LegendWrapperProps } from ".";
+import LegendWrapper from ".";
 declare const _default: {
     title: string;
-    component: ({ children, legendText, required, errorMessage, hasError, hintText, ...restOfHTMLAttributes }: LegendWrapperProps) => React.JSX.Element;
+    component: typeof LegendWrapper;
     args: {
         legendText: string;
         hintText: string;

package/lib/components/LegendWrapper/index.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, ReactNode } from "react";
+import React, { type HTMLAttributes, type ReactNode } from "react";
 export type LegendWrapperProps = HTMLAttributes<HTMLLegendElement> & {
     children?: ReactNode;
     /** legend text */
@@ -18,5 +18,5 @@ export type LegendWrapperProps = HTMLAttributes<HTMLLegendElement> & {
  * hasError and errorMessage props are just props that can be passed into the component.
  * There is no functionality checking if the children are valid/required etc this functionality will be needed to ne added outside of this component.
  */
-export declare const LegendWrapper: ({ children, legendText, required, errorMessage, hasError, hintText, ...restOfHTMLAttributes }: LegendWrapperProps) => React.JSX.Element;
+export declare function LegendWrapper({ children, legendText, required, errorMessage, hasError, hintText, ...restOfHTMLAttributes }: LegendWrapperProps): React.JSX.Element;
 export default LegendWrapper;

package/lib/components/LegendWrapper/styles.d.ts

@@ -1,12 +1,12 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type StyledFieldsetProps = {
     hasError?: boolean;
     theme: ThemeType;
     hasHintText?: boolean;
 };
-export declare const LegendSpan: import("styled-components").StyledComponent<"span", any, {
+export declare const LegendSpan: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     hasHintText: boolean;
     theme: ThemeType;
-}, never>;
-export declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", any, StyledFieldsetProps, never>;
+}>> & string;
+export declare const StyledFieldset: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, StyledFieldsetProps>> & string;
 export {};

package/lib/components/Link/Link.stories.d.ts

@@ -3,13 +3,7 @@ import { StoryObj } from "@storybook/react";
 import Link from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<Omit<React.AnchorHTMLAttributes<HTMLElement>, "nonce"> & Omit<import("../Text").TextProps, "ref" | "nonce" | "as"> & {
-        textHoverColor?: string | undefined;
-        appearance?: "primary" | "secondary" | undefined;
-        ref?: React.Ref<HTMLElement> | undefined;
-        as?: React.ElementType | undefined;
-        children?: React.ReactNode;
-    }, "ref"> & React.RefAttributes<HTMLElement>>;
+    component: React.ForwardRefExoticComponent<Omit<import(".").LinkProps, "ref"> & React.RefAttributes<HTMLElement>>;
     args: {
         appearance: undefined;
         href: string;