@cruk/cruk-react-components 4.2.1 → 5.0.0

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;

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

@@ -1,5 +1,5 @@
-import React, { AnchorHTMLAttributes, Ref, ElementType, ReactNode } from "react";
-import { TextProps } from "../Text";
+import React, { type AnchorHTMLAttributes, type Ref, type ElementType, type ReactNode } from "react";
+import { type TextProps } from "../Text";
 export type LinkProps = Omit<AnchorHTMLAttributes<HTMLElement>, "nonce"> & Omit<TextProps, "as" | "ref" | "nonce"> & {
     /** link text hover colour */
     textHoverColor?: string;
@@ -22,16 +22,5 @@ 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<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 */
-    appearance?: "primary" | "secondary" | undefined;
-    /** styled-components polymorphism where you can use the styling of a link but convert to another element like a button */
-    ref?: React.Ref<HTMLElement> | undefined;
-    /** styled-component polymorphic feature so you take the styling of a link and cast the component to be a "span" for example */
-    as?: React.ElementType | undefined;
-    /** Component children */
-    children?: ReactNode;
-}, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default Link;

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

@@ -1,19 +1,12 @@
-import { AnchorHTMLAttributes } from "react";
-import { TextProps } from "../Text";
-import { ThemeType } from "../../types";
-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?: string | number | undefined;
-    textFontFamily?: string | undefined;
-    as?: import("react").ElementType | undefined;
-    wordBreak?: import("../../types").WordBreakType | undefined;
-    overflowWrap?: import("../../types").OverflowWrapType | undefined;
-    ref?: import("react").Ref<HTMLElement> | undefined;
-} & {
+import { type AnchorHTMLAttributes } from "react";
+import { type TextProps } from "../Text";
+import { type ThemeType } from "../../types";
+type StyledLinkProps = AnchorHTMLAttributes<HTMLElement> & TextProps & {
     theme: ThemeType;
-    appearance?: "primary" | "secondary" | undefined;
-    textHoverColor?: string | undefined;
-}, never>;
+    appearance?: "primary" | "secondary";
+    textHoverColor?: string;
+};
+export declare const StyledLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<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;
+}, StyledLinkProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<TextProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
 export default StyledLink;

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

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

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

@@ -3,5 +3,5 @@ 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: () => React.JSX.Element;
+export declare function Loader(): React.JSX.Element;
 export default Loader;

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

@@ -1,7 +1,7 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type SpinnerProps = {
     theme: ThemeType;
 };
-export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const Spinner: import("styled-components").StyledComponent<"div", any, SpinnerProps, never>;
+export declare const ScreenReaderOnly: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SpinnerProps>> & string;
 export {};

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

@@ -1,9 +1,8 @@
-import React from "react";
 import { StoryObj } from "@storybook/react";
-import Modal, { ModalProps } from ".";
+import Modal 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) => React.JSX.Element;
+    component: typeof Modal;
     args: {};
     tags: string[];
 };

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

@@ -1,5 +1,5 @@
-import React, { ReactNode } from "react";
-import { SpacingProps } from "../Spacing";
+import React, { type ReactNode } from "react";
+import { type SpacingProps } from "../Spacing";
 export type ModalProps = SpacingProps & {
     /** modal name used for aria-label */
     modalName: string;
@@ -28,5 +28,5 @@ export type ModalProps = SpacingProps & {
  * ## Accessibility
  * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.
  */
-declare const Modal: ({ 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;
+export declare function Modal({ 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;
 export default Modal;

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

@@ -1,4 +1,4 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type ThemeProp = {
     theme: ThemeType;
 };
@@ -9,18 +9,12 @@ type ContentProps = {
     width: string;
     maxWidth: string;
 };
-export declare const Background: import("styled-components").StyledComponent<"div", any, ThemeProp, never>;
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Content: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Box").BoxProps>, any, ContentProps, never>;
-export declare const CloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLElement> & {
-    appearance?: import("../../types").ButtonAppearanceType | undefined;
-    full?: boolean | undefined;
-    href?: string | undefined;
-    size?: "m" | "l" | undefined;
-    css?: any;
-    as?: import("react").ElementType | undefined;
-    isIconButton?: boolean | undefined;
-    ref?: import("react").Ref<HTMLElement> | undefined;
-    children?: import("react").ReactNode;
-}, "ref"> & import("react").RefAttributes<HTMLElement>>, any, ThemeProp, never>;
+export declare const Background: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThemeProp>> & string;
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Box").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;
+}, ContentProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Box").BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Button").ButtonProps, "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;
+}, ThemeProp>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
 export {};

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

@@ -1,9 +1,8 @@
-import React from "react";
 import { StoryObj } from "@storybook/react";
 import Pagination from ".";
 declare const _default: {
     title: string;
-    component: ({ current, items, hideLast, pagerCallback, perPage, searchParam, children, id, }: import(".").PaginationProps) => React.JSX.Element;
+    component: typeof Pagination;
     args: {
         current: number;
         perPage: number;

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

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, ReactNode } from "react";
+import React, { type HTMLAttributes, type ReactNode } from "react";
 export type PaginationProps = {
     /** set current page number */
     current: number;
@@ -20,5 +20,5 @@ export type PaginationProps = {
 Data is split into multiple pages and pagination is used to
 easily navigate through these pages.
  */
-declare const Pagination: ({ current, items, hideLast, pagerCallback, perPage, searchParam, children, id, }: PaginationProps) => React.JSX.Element;
+export declare function Pagination({ current, items, hideLast, pagerCallback, perPage, searchParam, children, id, }: PaginationProps): React.JSX.Element;
 export default Pagination;

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

@@ -1,14 +1,14 @@
-import { ThemeType } from "../../types";
-type PaginationStyledProps = {
+import { type ThemeType } from "../../types";
+type ThemeProps = {
+    theme: ThemeType;
+};
+type PaginationStyledProps = ThemeProps & {
     active?: boolean;
     name?: string;
     disabled?: boolean;
 };
-type ThemeProps = {
-    theme: ThemeType;
-};
-export declare const PagerWrapper: import("styled-components").StyledComponent<"div", any, PaginationStyledProps, never>;
-export declare const PagerList: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const PagerLink: import("styled-components").StyledComponent<"a", any, PaginationStyledProps, never>;
-export declare const PagerItem: import("styled-components").StyledComponent<"li", any, ThemeProps, never>;
+export declare const PagerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PaginationStyledProps>> & string;
+export declare const PagerList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const PagerLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, PaginationStyledProps>> & string;
+export declare const PagerItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ThemeProps>> & string;
 export {};

package/lib/components/PopOver/Popover.stories.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { StoryObj } from "@storybook/react";
-import PopOver, { PopOverProps } from ".";
+import PopOver from ".";
 declare const _default: {
     title: string;
-    component: ({ onPopOverIsOpenChange, children, minWidth, maxWidth, position, modalLabel, modalContent, css, full, }: PopOverProps) => React.JSX.Element;
+    component: typeof PopOver;
     args: {
         modalLabel: string;
         minWidth: string;

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

@@ -1,5 +1,5 @@
-import React, { ReactNode } from "react";
-import { PopOverPositionType } from "../../types";
+import React, { type ReactNode } from "react";
+import { type PopOverPositionType } from "../../types";
 export type PopOverProps = {
     /** modalLabel: used for aria-label of modal */
     modalLabel: string;
@@ -22,5 +22,5 @@ export type PopOverProps = {
  * Popover is a non-modal dialog that floats around its disclosure. It's
 commonly used for displaying additional rich content on top of something.
 */
-declare const PopOver: ({ onPopOverIsOpenChange, children, minWidth, maxWidth, position, modalLabel, modalContent, css, full, }: PopOverProps) => React.JSX.Element;
+export declare function PopOver({ onPopOverIsOpenChange, children, minWidth, maxWidth, position, modalLabel, modalContent, css, full, }: PopOverProps): React.JSX.Element;
 export default PopOver;

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

@@ -1,11 +1,11 @@
-import { ThemeType, PopOverPositionType } from "../../types";
-export declare const PopOverWrapper: import("styled-components").StyledComponent<"div", any, {
+import { type ThemeType, type PopOverPositionType } from "../../types";
+export declare const PopOverWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     full: boolean;
-    css?: string | undefined;
-}, never>;
-export declare const PopOverModal: import("styled-components").StyledComponent<"div", any, {
+    css?: string;
+}>> & string;
+export declare const PopOverModal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     position: PopOverPositionType;
-    theme?: ThemeType | undefined;
+    theme?: ThemeType;
     maxWidth: string;
     minWidth: string;
-}, never>;
+}>> & string;

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

@@ -1,9 +1,8 @@
-import React from "react";
 import { StoryObj } from "@storybook/react";
 import ProgressBar from ".";
 declare const _default: {
     title: string;
-    component: ({ percentage, isCircular, circleContents, circleSize, barColor, secondaryBarColor, secondaryPercentage, children, }: import(".").ProgressBarProps) => React.JSX.Element;
+    component: typeof ProgressBar;
     args: {
         percentage: number;
         secondaryPercentage: number;

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { type ReactNode } from "react";
 export type ProgressBarProps = {
     /** percentage value of the progressbar */
     percentage: number;
@@ -20,5 +20,5 @@ export type ProgressBarProps = {
  * Provide up-to-date feedback on the progress of a workflow or action with
 simple yet flexible progress bars.
 */
-declare const ProgressBar: ({ percentage, isCircular, circleContents, circleSize, barColor, secondaryBarColor, secondaryPercentage, children, }: ProgressBarProps) => React.JSX.Element;
+export declare function ProgressBar({ percentage, isCircular, circleContents, circleSize, barColor, secondaryBarColor, secondaryPercentage, children, }: ProgressBarProps): React.JSX.Element;
 export default ProgressBar;

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

@@ -1,4 +1,4 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type ThemeProp = {
     theme: ThemeType;
 };
@@ -6,25 +6,31 @@ type LineProgressBarProps = {
     percentage: number;
     barColor?: string;
     isSecondary?: boolean;
+    theme: ThemeType;
 };
 type LineProgressWrapperProps = {
     percentage: number;
     secondaryPercentage: number;
+    theme: ThemeType;
+};
+type CircleProps = ThemeProp & {
+    strokeDashoffsetInit: number;
+    strokeDashoffset: number;
+    barColor?: string;
+    isSecondary?: boolean;
+    theme: ThemeType;
 };
 type CircleWrapperProps = {
     circleSize: string;
+    theme: ThemeType;
 };
-export declare const ProgressBarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LineProgressBarWrapper: import("styled-components").StyledComponent<"div", any, LineProgressWrapperProps, never>;
-export declare const LineProgressBar: import("styled-components").StyledComponent<"div", any, LineProgressBarProps, never>;
-export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const CircularWrapper: import("styled-components").StyledComponent<"div", any, CircleWrapperProps, never>;
-export declare const CircleSvg: import("styled-components").StyledComponent<"svg", any, {}, never>;
-export declare const EmptyCircle: import("styled-components").StyledComponent<"circle", any, ThemeProp, never>;
-export declare const FullCircle: import("styled-components").StyledComponent<"circle", any, ThemeProp & {
-    strokeDashoffsetInit: number;
-    barColor?: string | undefined;
-    isSecondary?: boolean | undefined;
-}, never>;
-export declare const CircularValue: import("styled-components").StyledComponent<"div", any, ThemeProp, never>;
+export declare const ProgressBarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LineProgressBarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LineProgressWrapperProps>> & string;
+export declare const LineProgressBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LineProgressBarProps>> & string;
+export declare const ScreenReaderOnly: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const CircularWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CircleWrapperProps>> & string;
+export declare const CircleSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string;
+export declare const EmptyCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, ThemeProp>> & string;
+export declare const FullCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, CircleProps>> & string;
+export declare const CircularValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThemeProp>> & string;
 export {};

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

@@ -1,14 +1,9 @@
 import React from "react";
 import { StoryObj } from "@storybook/react";
-import Radio from ".";
+import Radio, { RadioProps } from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement> & {
-        ref?: React.Ref<HTMLInputElement> | undefined;
-        hasError?: boolean | undefined;
-        errorMessage?: string | undefined;
-        children?: React.ReactNode;
-    }, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    component: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
     args: {
         id: string;
         value: string;

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

@@ -1,6 +1,6 @@
-import React, { InputHTMLAttributes, Ref, ReactNode } from "react";
+import React, { type InputHTMLAttributes, type Ref, type ReactNode, type LegacyRef } from "react";
 export type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
-    ref?: Ref<HTMLInputElement>;
+    ref?: Ref<HTMLInputElement> | LegacyRef<HTMLInputElement>;
     /** flag for error styling */
     hasError?: boolean;
     /** error message text  */
@@ -12,12 +12,5 @@ export type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
  *
  * The value or children becomes the label, if you want an outer label for a radio or group of radios please use a LegendWrapper component
  */
-declare const Radio: 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;
-}, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default Radio;

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

@@ -1,21 +1,21 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type ThemeProp = {
     theme: ThemeType;
 };
-export declare const CheckWrapper: import("styled-components").StyledComponent<"div", any, ThemeProp, never>;
-export declare const Check: import("styled-components").StyledComponent<"span", any, ThemeProp, never>;
+export declare const CheckWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThemeProp>> & string;
+export declare const Check: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ThemeProp>> & string;
 type StyledLabelProps = {
     hasError: boolean;
     disabled: boolean;
     checked: boolean;
     theme: ThemeType;
 };
-export declare const StyledLabel: import("styled-components").StyledComponent<"label", any, StyledLabelProps, never>;
-export declare const VerticalAlign: import("styled-components").StyledComponent<"span", any, ThemeProp, never>;
-export declare const SelectedBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledLabelProps>> & string;
+export declare const VerticalAlign: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ThemeProp>> & string;
+export declare const SelectedBorder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 type StyledInputType = {
     disabled: boolean;
     theme: ThemeType;
 };
-export declare const StyledInput: import("styled-components").StyledComponent<"input", any, StyledInputType, never>;
+export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledInputType>> & string;
 export {};

package/lib/components/RadioConsent/Radio.stories.d.ts

@@ -1,9 +1,8 @@
-import React from "react";
 import { StoryObj } from "@storybook/react";
-import RadioConsent, { RadioConsentProps } from ".";
+import RadioConsent from ".";
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<RadioConsentProps>;
+    component: typeof RadioConsent;
     args: {
         legend: string;
         name: string;

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

@@ -1,12 +1,13 @@
-import React, { FunctionComponent } from "react";
+import React from "react";
+type Attribute = {
+    value: string;
+    option: string;
+};
 export type RadioConsentProps = {
     /** because each radio has its own label this is the consent group label text */
     legend: string;
     /** array of option for radio constent group where option is the option name and value is the option value  */
-    attributes: Array<{
-        value: string;
-        option: string;
-    }>;
+    attributes: Attribute[];
     /** on change handler callback passed change event */
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     /** set the value of selected option */
@@ -20,5 +21,5 @@ export type RadioConsentProps = {
  *
  * This is always a controlled component that will only change state with the selectedValue prop
  */
-declare const RadioConsent: FunctionComponent<RadioConsentProps>;
+export declare function RadioConsent(props: RadioConsentProps): React.JSX.Element;
 export default RadioConsent;

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

@@ -1,15 +1,13 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type ThemeProp = {
     theme: ThemeType;
 };
-export declare const StyledRadio: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement> & {
-    ref?: import("react").Ref<HTMLInputElement> | undefined;
-    hasError?: boolean | undefined;
-    errorMessage?: string | undefined;
-    children?: import("react").ReactNode;
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>>, any, {
+type StyleRadioWidthProp = {
     numberOfAttributes: number;
-} & ThemeProp, never>;
-export declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, ThemeProp, never>;
-export declare const StyledFieldSet: import("styled-components").StyledComponent<"fieldset", any, ThemeProp, never>;
+} & ThemeProp;
+export declare const StyledRadio: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Radio").RadioProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | 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<HTMLInputElement> | null | undefined;
+}, StyleRadioWidthProp>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Radio").RadioProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, ThemeProp>> & 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>, ThemeProp>> & string;
 export {};

package/lib/components/Select/Selelct.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryObj } from "@storybook/react";
 import Select, { SelectProps } from ".";
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<SelectProps>;
+    component: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
     args: {
         disabled: boolean;
         required: boolean;

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode, SelectHTMLAttributes, Ref } from "react";
+import React, { type ReactNode, type SelectHTMLAttributes, type Ref, type LegacyRef } from "react";
 export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
     /** error message text */
     errorMessage?: string;
@@ -11,11 +11,11 @@ export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
     /** flag to stop (required) appearing in label, useful for compound form components like DateInput */
     hideRequiredInLabel?: boolean;
     /** react DOM reference of object used scrolling to it with errors etc */
-    ref?: Ref<HTMLSelectElement>;
+    ref?: Ref<HTMLSelectElement> | LegacyRef<HTMLSelectElement>;
 };
 /**
  * Select components are used for collecting user provided information from a list of options.
  *
  */
-declare const Select: FunctionComponent<SelectProps>;
+export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

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

@@ -1,9 +1,9 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type StyledSelectProps = {
     hasError: boolean;
     errorMessage?: string;
     theme: ThemeType;
 };
-declare const StyledSelect: import("styled-components").StyledComponent<"select", any, StyledSelectProps, never>;
+declare const StyledSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, StyledSelectProps>> & string;
 export default StyledSelect;
 export { StyledSelect };

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

@@ -1,4 +1,4 @@
-import { SpaceType, ThemeType } from "../../types";
+import { type SpaceType, type ThemeType } from "../../types";
 export type SpacingProps = {
     margin?: SpaceType;
     marginTop?: SpaceType;
@@ -15,5 +15,5 @@ export type SpacingProps = {
     paddingVertical?: SpaceType;
     paddingHorizontal?: SpaceType;
 };
-export declare const Spacing: (props: SpacingProps, theme: ThemeType) => string;
+export declare function Spacing(props: SpacingProps, theme: ThemeType): string;
 export default Spacing;