@cruk/cruk-react-components 3.5.1 → 4.0.1

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

@@ -3,7 +3,7 @@ import { StoryObj } from "@storybook/react";
 import AddressLookup from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement> & {
+    component: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement> & {
         apiKey: string;
         countries?: string[] | undefined;
         onAddressSelected: (address: import("..").AddressDataType) => void;
@@ -17,7 +17,7 @@ declare const _default: {
         onAddressError?: ((error: Error) => void) | undefined;
         onBlur?: ((e: React.FocusEvent<HTMLInputElement, Element>) => void) | undefined;
         ref?: React.Ref<HTMLInputElement> | undefined;
-    }, "label" | "apiKey" | "countries" | "errorMessage" | "hasError" | "isValid" | "isValidVisible" | "isInvalidVisible" | "hintText" | "onAddressError" | "onAddressSelected" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+    }, "ref"> & React.RefAttributes<HTMLInputElement>>;
     args: {
         disabled: boolean;
         errorMessage: string;

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

@@ -34,7 +34,7 @@ export type AddressLookupProps = InputHTMLAttributes<HTMLInputElement> & {
  * You will need a Loqate api key, the examples below use "MG17-ZD93-FF33-KF13" our development key.
  * This component is generally only used for country codes including "GBR", "GGY", "IMN", "JEY". An example of this behavior is included bellow.
  */
-declare const AddressLookup: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement> & {
+declare const AddressLookup: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement> & {
     /** api key for loqate */
     apiKey: string;
     /** list of countries codes you want the address look up to search within */
@@ -61,5 +61,5 @@ declare const AddressLookup: React.ForwardRefExoticComponent<Pick<React.InputHTM
     onBlur?: ((e: FocusEvent<HTMLInputElement>) => void) | undefined;
     /** attach a DOM reference variable to your component */
     ref?: React.Ref<HTMLInputElement> | undefined;
-}, "apiKey" | "countries" | "errorMessage" | "hasError" | "isValid" | "isValidVisible" | "isInvalidVisible" | "label" | "hintText" | "onAddressError" | "onAddressSelected" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+}, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default AddressLookup;

package/lib/components/AllThemesWrapper.d.ts

@@ -1,12 +1,12 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { ThemeType } from "../types";
 type TestThemeWrapperProps = {
     theme?: ThemeType;
     children?: ReactNode;
 };
-export declare const TestThemeWrapper: ({ children, theme, }: TestThemeWrapperProps) => JSX.Element;
+export declare const TestThemeWrapper: ({ children, theme, }: TestThemeWrapperProps) => React.JSX.Element;
 type AllThemesWrapperProps = {
     children?: ReactNode;
 };
-export declare const AllThemesWrapper: ({ children }: AllThemesWrapperProps) => JSX.Element;
+export declare const AllThemesWrapper: ({ children }: AllThemesWrapperProps) => React.JSX.Element;
 export default AllThemesWrapper;

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

@@ -1,8 +1,9 @@
+import React from "react";
 import { StoryObj } from "@storybook/react";
 import Avatar from ".";
 declare const _default: {
     title: string;
-    component: ({ url, name, size, alt, ...rest }: import(".").AvatarProps) => JSX.Element;
+    component: ({ url, name, size, alt, ...rest }: import(".").AvatarProps) => React.JSX.Element;
     args: {
         name: string;
         size: string;

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

@@ -1,4 +1,4 @@
-import { ImgHTMLAttributes } from "react";
+import React, { ImgHTMLAttributes } from "react";
 export type AvatarProps = ImgHTMLAttributes<HTMLElement> & {
     /** name of user/entity */
     name?: string;
@@ -11,5 +11,5 @@ export type AvatarProps = ImgHTMLAttributes<HTMLElement> & {
  *
  * You can use an avatar to display ownership of an item of content. If you pass a URL of an image that will be displayed otherwise the first letter of the name will be used to display a branded avatar.
  */
-declare const Avatar: ({ url, name, size, alt, ...rest }: AvatarProps) => JSX.Element;
+declare const Avatar: ({ url, name, size, alt, ...rest }: AvatarProps) => React.JSX.Element;
 export default Avatar;

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

@@ -1,8 +1,9 @@
+import React from "react";
 import { StoryObj } from "@storybook/react";
 import Badge from ".";
 declare const _default: {
     title: string;
-    component: ({ children, ...rest }: import(".").BadgeProps) => JSX.Element;
+    component: ({ children, ...rest }: import(".").BadgeProps) => React.JSX.Element;
     args: {
         borderColor: string;
         backgroundColor: string;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { SpaceType } from "../../types";
 export type BadgeProps = {
     /** background colour of badge */
@@ -25,5 +25,5 @@ at the end of a sentence, link, or button. Unless the context is clear,
 consider including additional context with a visually hidden piece of
 additional text.
  */
-declare const Badge: ({ children, ...rest }: BadgeProps) => JSX.Element;
+declare const Badge: ({ children, ...rest }: BadgeProps) => React.JSX.Element;
 export default Badge;

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

@@ -3,7 +3,7 @@ import { StoryObj } from "@storybook/react";
 import { Button } from "./";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Pick<React.ButtonHTMLAttributes<HTMLElement> & {
+    component: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLElement> & {
         appearance?: import("..").ButtonAppearanceType | undefined;
         full?: boolean | undefined;
         href?: string | undefined;
@@ -13,7 +13,7 @@ declare const _default: {
         isIconButton?: boolean | undefined;
         ref?: React.Ref<HTMLElement> | undefined;
         children?: React.ReactNode;
-    }, "css" | "as" | "size" | keyof React.ButtonHTMLAttributes<HTMLElement> | "appearance" | "full" | "href" | "isIconButton"> & React.RefAttributes<HTMLElement>>;
+    }, "ref"> & React.RefAttributes<HTMLElement>>;
     args: {
         appearance: string;
         disabled: boolean;

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

@@ -24,7 +24,7 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLElement> & {
  *
  * Design system documentation SU2C https://zeroheight.com/79db39f7e/p/22ff0e-button/b/32e1a2
  */
-export declare const Button: React.ForwardRefExoticComponent<Pick<React.ButtonHTMLAttributes<HTMLElement> & {
+export declare const Button: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLElement> & {
     /** the look and feel of the button */
     appearance?: ButtonAppearanceType | undefined;
     /** flag to streatch but to 100% width */
@@ -42,5 +42,5 @@ export declare const Button: React.ForwardRefExoticComponent<Pick<React.ButtonHT
     ref?: React.Ref<HTMLElement> | undefined;
     /** Component reference */
     children?: ReactNode;
-}, keyof React.ButtonHTMLAttributes<HTMLElement> | "appearance" | "full" | "href" | "size" | "css" | "as" | "isIconButton"> & React.RefAttributes<HTMLElement>>;
+}, "ref"> & React.RefAttributes<HTMLElement>>;
 export default Button;

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

@@ -3,9 +3,9 @@ import { StoryObj } from "@storybook/react";
 import Carousel, { CarouselProps } from ".";
 declare const _default: {
     title: string;
-    component: React.MemoExoticComponent<({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => JSX.Element>;
+    component: React.MemoExoticComponent<({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => React.JSX.Element>;
     args: {};
-    render: (args: CarouselProps) => JSX.Element;
+    render: (args: CarouselProps) => React.JSX.Element;
     tags: string[];
 };
 export default _default;

package/lib/components/Carousel/Dots.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes } from "react";
+import React, { ButtonHTMLAttributes } from "react";
 type DotProps = {
     count: number;
     currentPosition: number;
@@ -6,7 +6,7 @@ type DotProps = {
     next: () => void;
     previous: () => void;
 };
-export declare const CarouselLeftButton: (props: ButtonHTMLAttributes<HTMLElement>) => JSX.Element;
-export declare const CarouselRightButton: (props: ButtonHTMLAttributes<HTMLElement>) => JSX.Element;
-export declare const Dots: ({ count, currentPosition, scrollToPosition, next, previous, }: DotProps) => JSX.Element;
+export declare const CarouselLeftButton: (props: ButtonHTMLAttributes<HTMLElement>) => React.JSX.Element;
+export declare const CarouselRightButton: (props: ButtonHTMLAttributes<HTMLElement>) => React.JSX.Element;
+export declare const Dots: ({ count, currentPosition, scrollToPosition, next, previous, }: DotProps) => React.JSX.Element;
 export default Dots;

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

@@ -15,6 +15,6 @@ export type CarouselProps = {
  *
  * Light weight carousel component that works with mouse and touch events, will work with divs and much anything you chuck in children
  */
-export declare const Carousel: ({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => JSX.Element;
-declare const _default: React.MemoExoticComponent<({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => JSX.Element>;
+export declare const Carousel: ({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => React.JSX.Element>;
 export default _default;

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

@@ -3,12 +3,12 @@ import { StoryObj } from "@storybook/react";
 import CheckBox from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement> & {
+    component: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement> & {
         ref?: React.Ref<HTMLInputElement> | undefined;
         hasError?: boolean | undefined;
         errorMessage?: string | undefined;
         children?: React.ReactNode;
-    }, "errorMessage" | "hasError" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+    }, "ref"> & React.RefAttributes<HTMLInputElement>>;
     args: {
         id: string;
         disabled: boolean;

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

@@ -12,12 +12,12 @@ export type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {
  *
  * The value or children becomes the label, if you want an outer label for a checkbox or group of checkboxes please use a LegendWrapper component
  */
-declare const Checkbox: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement> & {
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement> & {
     ref?: React.Ref<HTMLInputElement> | undefined;
     /** flag for error styling */
     hasError?: boolean | undefined;
     /** error message text  */
     errorMessage?: string | undefined;
     children?: ReactNode;
-}, keyof React.InputHTMLAttributes<HTMLInputElement> | "hasError" | "errorMessage"> & React.RefAttributes<HTMLInputElement>>;
+}, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { StoryObj } from "@storybook/react";
 import Collapse from ".";
 declare const _default: {
@@ -6,7 +7,7 @@ declare const _default: {
     args: {
         id: string;
         headerTitleText: string;
-        children: JSX.Element;
+        children: React.JSX.Element;
     };
     tags: string[];
 };

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

@@ -1,9 +1,9 @@
 import { FontSizeType } from "../../types";
 export declare const transitionDurationSeconds = 0.5;
-export declare const FlippingIcon: import("styled-components").StyledComponent<({ faIcon, color, size, ...rest }: import("../IconFa").IconFaProps) => JSX.Element, any, {
+export declare const FlippingIcon: import("styled-components").StyledComponent<({ faIcon, color, size, ...rest }: import("../IconFa").IconFaProps) => import("react").JSX.Element, any, {
     open: boolean;
 }, never>;
-export declare const DefaultHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").ButtonHTMLAttributes<HTMLElement> & {
+export declare const DefaultHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLElement> & {
     appearance?: import("../../types").ButtonAppearanceType | undefined;
     full?: boolean | undefined;
     href?: string | undefined;
@@ -13,7 +13,7 @@ export declare const DefaultHeader: import("styled-components").StyledComponent<
     isIconButton?: boolean | undefined;
     ref?: import("react").Ref<HTMLElement> | undefined;
     children?: import("react").ReactNode;
-}, "size" | keyof import("react").ButtonHTMLAttributes<HTMLElement> | "appearance" | "full" | "href" | "css" | "as" | "isIconButton"> & import("react").RefAttributes<HTMLElement>>, any, {
+}, "ref"> & import("react").RefAttributes<HTMLElement>>, any, {
     textColor?: string | undefined;
     textSize?: FontSizeType | undefined;
     textFontFamily?: string | undefined;

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

@@ -1,8 +1,9 @@
+import React from "react";
 import { StoryObj } from "@storybook/react";
 import DateField from ".";
 declare const _default: {
     title: string;
-    component: ({ label, hintText, day, month, year, dayName, monthName, yearName, dayHasError, monthHasError, yearHasError, errorMessage, onChange, onBlur, onFocus, disabled, required, }: import(".").DateFieldProps) => JSX.Element;
+    component: ({ label, hintText, day, month, year, dayName, monthName, yearName, dayHasError, monthHasError, yearHasError, errorMessage, onChange, onBlur, onFocus, disabled, required, }: import(".").DateFieldProps) => React.JSX.Element;
     args: {
         dayName: string;
         monthName: string;

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

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from "react";
+import React, { InputHTMLAttributes } from "react";
 export type DateFieldProps = InputHTMLAttributes<HTMLInputElement> & {
     /** label text */
     label: string;
@@ -28,5 +28,5 @@ export type DateFieldProps = InputHTMLAttributes<HTMLInputElement> & {
 /**
  * To be used in forms entering dates like date of birth which are known dates and would take too long to get to with a date picker
  * */
-declare const DateField: ({ label, hintText, day, month, year, dayName, monthName, yearName, dayHasError, monthHasError, yearHasError, errorMessage, onChange, onBlur, onFocus, disabled, required, }: DateFieldProps) => JSX.Element;
+declare const DateField: ({ label, hintText, day, month, year, dayName, monthName, yearName, dayHasError, monthHasError, yearHasError, errorMessage, onChange, onBlur, onFocus, disabled, required, }: DateFieldProps) => React.JSX.Element;
 export default DateField;

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

@@ -3,6 +3,7 @@ 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>;

package/lib/components/Divider.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 type DividerProps = {
     children?: ReactNode;
 };
-export declare const Divider: ({ children }: DividerProps) => JSX.Element;
+export declare const Divider: ({ children }: DividerProps) => React.JSX.Element;
 export default Divider;

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

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

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

@@ -1,4 +1,4 @@
-import { ReactNode, HTMLAttributes } from "react";
+import React, { ReactNode, 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) => JSX.Element;
+export declare const Footer: ({ children, middleSection }: FooterProps) => React.JSX.Element;
 export default Footer;

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

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

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from "react";
+import React, { HTMLAttributes, 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) => JSX.Element;
+export declare const Header: ({ isSticky, siteSlogan, logoAltText, logoImageSrc, logoLinkTitle, logoLinkUrl, fullWidth, children, }: HeaderProps) => React.JSX.Element;
 export default Header;

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

@@ -1,8 +1,9 @@
+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) => JSX.Element;
+    component: ({ h1, h2, h3, h4, h5, h6, ...props }: import(".").HeadingProps) => React.JSX.Element;
     args: {};
     tags: string[];
 };

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ElementType } from "react";
+import React, { HTMLAttributes, ElementType } from "react";
 import { SpacingProps } from "../Spacing";
 import { FontSizeType, WordBreakType, OverflowWrapType } from "../../types";
 export type HeadingProps = SpacingProps & HTMLAttributes<HTMLElement> & {
@@ -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) => JSX.Element;
+declare const Heading: ({ h1, h2, h3, h4, h5, h6, ...props }: HeadingProps) => React.JSX.Element;
 export default Heading;

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

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

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { IconDefinition } from "@fortawesome/fontawesome-common-types";
 export type IconFaProps = {
     /** imported icon definition from "@fortawesome/free-solid-svg-icons" or "@fortawesome/free-brands-svg-icons" */
@@ -12,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) => JSX.Element;
+declare const IconFa: ({ faIcon, color, size, ...rest }: IconFaProps) => React.JSX.Element;
 export default IconFa;

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

@@ -9,7 +9,7 @@ declare const _default: {
         titleTextColor: string;
         descriptionText: string;
         descriptionTextColor: string;
-        icon: JSX.Element;
+        icon: React.JSX.Element;
     };
     tags: string[];
 };

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

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

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

@@ -1,6 +1,11 @@
 import { ThemeType } from "../../types";
-export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
+type LabelProp = {
+    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;
     theme: ThemeType;
 }, never>;
+export {};

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

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

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from "react";
+import React, { HTMLAttributes, 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) => JSX.Element;
+export declare const LegendWrapper: ({ children, legendText, required, errorMessage, hasError, hintText, ...restOfHTMLAttributes }: LegendWrapperProps) => React.JSX.Element;
 export default LegendWrapper;

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

@@ -3,13 +3,13 @@ import { StoryObj } from "@storybook/react";
 import Link from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Pick<Omit<React.AnchorHTMLAttributes<HTMLElement>, "nonce"> & Omit<import("../Text").TextProps, "ref" | "nonce" | "as"> & {
+    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;
-    }, "slot" | "style" | "title" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | keyof import("../Spacing").SpacingProps | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "textSize" | "textAlign" | "textColor" | "wordBreak" | "overflowWrap" | "referrerPolicy" | "appearance" | "href" | "download" | "hrefLang" | "media" | "ping" | "rel" | "target" | "textWeight" | "textHoverColor"> & React.RefAttributes<HTMLElement>>;
+    }, "ref"> & React.RefAttributes<HTMLElement>>;
     args: {
         appearance: undefined;
         href: string;

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

@@ -22,7 +22,7 @@ export type LinkProps = Omit<AnchorHTMLAttributes<HTMLElement>, "nonce"> & Omit<
  * If you want something that looks like a link but behaves like a button ie. nothing to do with navigation, please consider using Link with as='button'
  *
  * If you want something that looks like a button but behaves like a link ie. it takes the user to a new location, please consider using Button and simply passing it an href, it will automatically turn into a link. */
-export declare const Link: React.ForwardRefExoticComponent<Pick<Omit<React.AnchorHTMLAttributes<HTMLElement>, "nonce"> & Omit<TextProps, "nonce" | "as" | "ref"> & {
+export declare const Link: React.ForwardRefExoticComponent<Omit<Omit<React.AnchorHTMLAttributes<HTMLElement>, "nonce"> & Omit<TextProps, "nonce" | "as" | "ref"> & {
     /** link text hover colour */
     textHoverColor?: string | undefined;
     /** link appearance variant, undefined is a standarding link withing a text block */
@@ -33,5 +33,5 @@ export declare const Link: React.ForwardRefExoticComponent<Pick<Omit<React.Ancho
     as?: React.ElementType | undefined;
     /** Component children */
     children?: ReactNode;
-}, "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | keyof import("../Spacing").SpacingProps | "textColor" | "textAlign" | "textSize" | "textWeight" | "wordBreak" | "overflowWrap" | "textHoverColor" | "appearance"> & React.RefAttributes<HTMLElement>>;
+}, "ref"> & React.RefAttributes<HTMLElement>>;
 export default Link;

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

@@ -1,15 +1,12 @@
 import { AnchorHTMLAttributes } from "react";
 import { TextProps } from "../Text";
 import { ThemeType } from "../../types";
-type ThemeProp = {
-    theme: ThemeType;
-};
-export declare const ChevyWithLevee: import("styled-components").StyledComponent<({ faIcon, color, size, ...rest }: import("../IconFa").IconFaProps) => JSX.Element, any, ThemeProp, never>;
 export declare const StyledLink: import("styled-components").StyledComponent<import("react").FunctionComponent<TextProps>, any, AnchorHTMLAttributes<HTMLElement> & import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
     textColor?: string | undefined;
     textAlign?: "left" | "right" | "center" | "justify" | undefined;
     textSize?: import("../../types").FontSizeType | undefined;
-    textWeight?: number | undefined;
+    textWeight?: string | number | undefined;
+    textFontFamily?: string | undefined;
     as?: import("react").ElementType | undefined;
     wordBreak?: import("../../types").WordBreakType | undefined;
     overflowWrap?: import("../../types").OverflowWrapType | undefined;
@@ -19,4 +16,4 @@ export declare const StyledLink: import("styled-components").StyledComponent<imp
     appearance?: "primary" | "secondary" | undefined;
     textHoverColor?: string | undefined;
 }, never>;
-export {};
+export default StyledLink;

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

@@ -1,8 +1,9 @@
+import React from "react";
 import { StoryObj } from "@storybook/react";
 import Loader from ".";
 declare const _default: {
     title: string;
-    component: () => JSX.Element;
+    component: () => React.JSX.Element;
     args: {};
     tags: string[];
 };

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

@@ -1,6 +1,7 @@
+import React from "react";
 /**
  *
  * Loaders are used after some user interaction that we assume will take some time to complete. They inform the user that their request is beeing processed and that they should wait.
  */
-declare const Loader: () => JSX.Element;
+declare const Loader: () => React.JSX.Element;
 export default Loader;

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

@@ -1,13 +1,12 @@
+import React from "react";
 import { StoryObj } from "@storybook/react";
 import Modal, { ModalProps } from ".";
 declare const _default: {
     title: string;
-    component: ({ modalName, closeFunction, showCloseButton, maxWidth, top, backgroundColor, children, width, margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft, padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft, }: ModalProps) => JSX.Element;
+    component: ({ modalName, closeFunction, showCloseButton, maxWidth, top, backgroundColor, children, width, margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft, padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft, }: ModalProps) => React.JSX.Element;
     args: {};
     tags: string[];
 };
 export default _default;
 type Story = StoryObj<typeof Modal>;
 export declare const ModalDefault: Story;
-export declare const ModalSU2C: Story;
-export declare const ModalBowelbabe: Story;