@cruk/cruk-react-components 4.2.2 → 5.0.1

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;
+    $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,54 @@ export type SpacingProps = {
     paddingVertical?: SpaceType;
     paddingHorizontal?: SpaceType;
 };
-export declare const Spacing: (props: SpacingProps, theme: ThemeType) => string;
-export default Spacing;
+interface SpacingPropsInterface {
+    margin?: SpaceType;
+    marginTop?: SpaceType;
+    marginRight?: SpaceType;
+    marginBottom?: SpaceType;
+    marginLeft?: SpaceType;
+    marginVertical?: SpaceType;
+    marginHorizontal?: SpaceType;
+    padding?: SpaceType;
+    paddingTop?: SpaceType;
+    paddingRight?: SpaceType;
+    paddingBottom?: SpaceType;
+    paddingLeft?: SpaceType;
+    paddingVertical?: SpaceType;
+    paddingHorizontal?: SpaceType;
+}
+export type SpacingPropsInternal = {
+    $margin?: SpaceType;
+    $marginTop?: SpaceType;
+    $marginRight?: SpaceType;
+    $marginBottom?: SpaceType;
+    $marginLeft?: SpaceType;
+    $marginVertical?: SpaceType;
+    $marginHorizontal?: SpaceType;
+    $padding?: SpaceType;
+    $paddingTop?: SpaceType;
+    $paddingRight?: SpaceType;
+    $paddingBottom?: SpaceType;
+    $paddingLeft?: SpaceType;
+    $paddingVertical?: SpaceType;
+    $paddingHorizontal?: SpaceType;
+};
+interface SpacingPropsInternalInterface {
+    $margin?: SpaceType;
+    $marginTop?: SpaceType;
+    $marginRight?: SpaceType;
+    $marginBottom?: SpaceType;
+    $marginLeft?: SpaceType;
+    $marginVertical?: SpaceType;
+    $marginHorizontal?: SpaceType;
+    $padding?: SpaceType;
+    $paddingTop?: SpaceType;
+    $paddingRight?: SpaceType;
+    $paddingBottom?: SpaceType;
+    $paddingLeft?: SpaceType;
+    $paddingVertical?: SpaceType;
+    $paddingHorizontal?: SpaceType;
+}
+export declare function spacingPropsToSpacingPropsInternal(props: SpacingPropsInterface): SpacingPropsInternalInterface;
+export declare function spacing(props: SpacingPropsInternal, theme: ThemeType): string;
+export default spacing;

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

@@ -1,9 +1,8 @@
-import React from "react";
 import { StoryObj } from "@storybook/react";
 import Step from ".";
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<import(".").StepProps>;
+    component: typeof Step;
     args: {
         current: number;
         steps: string[];

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode } from "react";
+import React, { type ReactNode } from "react";
 export type StepProps = {
     /** current step number */
     current: number;
@@ -11,5 +11,5 @@ export type StepProps = {
  * Visually show where a user is in a multi-step process. Calculate the number of steps and the width of each step required to fit the progress bar in the parent container.
  * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.
  */
-declare const Step: FunctionComponent<StepProps>;
+export declare function Step({ steps, current, children }: StepProps): React.JSX.Element;
 export default Step;

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

@@ -1,17 +1,16 @@
-import { ThemeType } from "../../types";
-export declare const StepWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-type StepListProps = {
-    total: number;
-};
-type ThemeProps = {
+import { type ThemeType } from "../../types";
+export declare const StepWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StepList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
+    $total: number;
+}>> & string;
+export declare const StepBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     theme: ThemeType;
-};
-export declare const StepList: import("styled-components").StyledComponent<"ul", any, StepListProps, never>;
-export declare const StepBar: import("styled-components").StyledComponent<"span", any, ThemeProps, never>;
-export declare const StepTick: import("styled-components").StyledComponent<"span", any, ThemeProps, never>;
-type StepItemProps = {
-    active: boolean;
-    done: boolean;
-};
-export declare const StepItem: import("styled-components").StyledComponent<"li", any, StepItemProps, never>;
-export {};
+}>> & string;
+export declare const StepTick: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    theme: ThemeType;
+}>> & string;
+export declare const StepItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
+    $active: boolean;
+    $done: boolean;
+    theme: ThemeType;
+}>> & string;

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

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

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

@@ -1,12 +1,12 @@
-import { FunctionComponent, HTMLAttributes, Ref, ElementType } from "react";
-import { SpacingProps } from "../Spacing";
-import { WordBreakType, FontSizeType, ColorKeyType, OverflowWrapType } from "../../types";
+import React, { type HTMLAttributes, type Ref, type ElementType } from "react";
+import { type SpacingProps } from "../Spacing";
+import { type WordBreakType, type FontSizeType, type OverflowWrapType } from "../../types";
 /**
  * Text is to be used as the main paragraph component (or span using as="span"). Using the Text component is preferred to simply adding text to a div and styling that div, this will guarantee we are always using the correct font and default text colour.
  */
 export type TextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     /** text colour  */
-    textColor?: ColorKeyType | string;
+    textColor?: string;
     /** text horizontal alignment  */
     textAlign?: "left" | "right" | "center" | "justify";
     /** font size FontSizeType t-shirt sizes  */
@@ -24,5 +24,5 @@ export type TextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     /** react reference to the DOM element sometime used to scroll to or set focus after an error */
     ref?: Ref<HTMLElement>;
 };
-export declare const Text: FunctionComponent<TextProps>;
+export declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default Text;

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

@@ -1,25 +1,15 @@
-import { ElementType } from "react";
-import { SpacingProps } from "../Spacing";
-import { WordBreakType, FontSizeType, ThemeType, ColorKeyType, OverflowWrapType } from "../../types";
-export type TextStyledProps = SpacingProps & {
-    textColor?: ColorKeyType;
-    textAlign?: "left" | "right" | "center" | "justify";
-    textSize?: FontSizeType;
-    textWeight?: number;
+import { type ElementType } from "react";
+import { type SpacingPropsInternal } from "../Spacing";
+import { type WordBreakType, type FontSizeType, type ThemeType, type OverflowWrapType } from "../../types";
+export type TextStyledProps = SpacingPropsInternal & {
+    $textColor?: string;
+    $textAlign?: "left" | "right" | "center" | "justify";
+    $textSize?: FontSizeType;
+    $textWeight?: number | string;
     as?: ElementType;
-    wordBreak?: WordBreakType;
-    overflowWrap?: OverflowWrapType;
-    textFontFamily?: string;
+    $wordBreak?: WordBreakType;
+    $overflowWrap?: OverflowWrapType;
+    $textFontFamily?: string;
     theme: ThemeType;
 };
-export declare const TextStyled: import("styled-components").StyledComponent<"p", any, SpacingProps & {
-    textColor?: keyof import("../../types").ColorsType | undefined;
-    textAlign?: "left" | "right" | "center" | "justify" | undefined;
-    textSize?: FontSizeType | undefined;
-    textWeight?: number | undefined;
-    as?: ElementType | undefined;
-    wordBreak?: WordBreakType | undefined;
-    overflowWrap?: OverflowWrapType | undefined;
-    textFontFamily?: string | undefined;
-    theme: ThemeType;
-}, never>;
+export declare const TextStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TextStyledProps>> & string;

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

@@ -3,11 +3,9 @@ import { StoryObj } from "@storybook/react";
 import TextAreaField from ".";
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<import(".").TextAreaFieldProps>;
+    component: React.ForwardRefExoticComponent<Omit<import(".").TextAreaFieldProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
     args: {
-        children: string;
-        textColor: string;
-        value: undefined;
+        defaultValue: string;
         disabled: boolean;
         required: boolean;
         label: string;

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode, TextareaHTMLAttributes, Ref } from "react";
+import React, { type ReactNode, type TextareaHTMLAttributes, type Ref } from "react";
 export type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
     /** error message text */
     errorMessage?: string;
@@ -18,5 +18,5 @@ export type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
 /**
  * TextAreaField lets users enter and edit multiline text.
  */
-declare const TextField: FunctionComponent<TextAreaFieldProps>;
-export default TextField;
+export declare const TextAreaField: React.ForwardRefExoticComponent<Omit<TextAreaFieldProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export default TextAreaField;

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

@@ -1,10 +1,10 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type StyledTextareaProps = {
-    hasError: boolean;
+    $hasError: boolean;
+    $lineCount: number;
     resize: "both" | "vertical" | "horizontal" | "none";
-    lineCount: number;
     theme: ThemeType;
 };
-declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", any, StyledTextareaProps, never>;
+declare const StyledTextArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, StyledTextareaProps>> & string;
 export default StyledTextArea;
 export { StyledTextArea };

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

@@ -3,7 +3,7 @@ import { StoryObj } from "@storybook/react";
 import TextField from ".";
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<import(".").TextFieldProps>;
+    component: React.ForwardRefExoticComponent<Omit<import(".").TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
     args: {
         value: undefined;
         disabled: boolean;

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, InputHTMLAttributes, ReactNode, Ref } from "react";
+import React, { type InputHTMLAttributes, type ReactNode, type Ref } from "react";
 export type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
     /** error message text  */
     errorMessage?: string;
@@ -30,5 +30,5 @@ export type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
 /**
  * TextFields let users enter and edit text. For multiline text entry please consider using the TextAreaFieldComponent.
  * */
-declare const TextField: FunctionComponent<TextFieldProps>;
+export declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default TextField;

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

@@ -1,18 +1,22 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type ExtraProps = {
     theme: ThemeType;
 };
 type StyledInputProps = {
-    hasError: boolean;
-    isValid: boolean;
+    $hasError: boolean;
+    $isValid: boolean;
     theme: ThemeType;
-    isValidVisible?: boolean;
-    isInvalidVisible?: boolean;
+    $isValidVisible?: boolean;
+    $isInvalidVisible?: boolean;
 };
-export declare const Extra: import("styled-components").StyledComponent<"span", any, ExtraProps, never>;
-export declare const ExtraLeft: import("styled-components").StyledComponent<"span", any, ExtraProps, never>;
-export declare const ExtraRight: import("styled-components").StyledComponent<"span", any, ExtraProps, never>;
-export declare const ExtraWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledInputWrapper: import("styled-components").StyledComponent<"span", any, StyledInputProps, never>;
-export declare const StyledInput: import("styled-components").StyledComponent<"input", any, StyledInputProps, never>;
+export declare const Extra: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ExtraProps>> & string;
+export declare const ExtraLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "theme"> & ExtraProps, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | 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<HTMLSpanElement> | null | undefined;
+}, never>> & string;
+export declare const ExtraRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "theme"> & ExtraProps, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | 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<HTMLSpanElement> | null | undefined;
+}, ExtraProps>> & string;
+export declare const ExtraWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledInputProps>> & string;
+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>, StyledInputProps>> & string;
 export {};

package/lib/components/ThemeCheatSheet.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
-declare const _default: React.ForwardRefExoticComponent<{
-    children?: React.ReactNode;
-} & {
-    theme?: any;
-}>;
+import { type ThemeType } from "../types";
+type Props = {
+    theme?: ThemeType;
+};
+export declare function ThemeCheatSheet({ theme }: Props): React.JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<import("styled-components").ExecutionProps & React.RefAttributes<typeof ThemeCheatSheet>> & {};
 export default _default;

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

@@ -1,9 +1,8 @@
-import React from "react";
 import { StoryObj } from "@storybook/react";
 import Totaliser from ".";
 declare const _default: {
     title: string;
-    component: ({ total, additionalAmount, giftAid, target, isCompact, summaryMessage, children, }: import(".").TotaliserProps) => React.JSX.Element;
+    component: typeof Totaliser;
     args: {
         total: number;
         additionalAmount: number;

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

@@ -1,4 +1,4 @@
-import React, { ReactChild, ReactNode } from "react";
+import React, { type ReactNode } from "react";
 export type TotaliserProps = {
     /** financial total as a number */
     total: number;
@@ -11,12 +11,12 @@ export type TotaliserProps = {
     /** flag for low height compact appearance */
     isCompact?: boolean;
     /** component for custom summary message underneath total graph only visible if there is a target */
-    summaryMessage?: ReactChild;
+    summaryMessage?: ReactNode;
     /** component children */
     children?: ReactNode;
 };
 /**
  * Think Blue Peter, used to display total raised and if target prop is passed will display tercentage of target reached.
  * */
-declare const Totaliser: ({ total, additionalAmount, giftAid, target, isCompact, summaryMessage, children, }: TotaliserProps) => React.JSX.Element;
+export declare function Totaliser({ total, additionalAmount, giftAid, target, isCompact, summaryMessage, children, }: TotaliserProps): React.JSX.Element;
 export default Totaliser;

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

@@ -1,19 +1,27 @@
-import { ThemeType } from "../../types";
-type ThemeProps = {
+import { type ThemeType } from "../../types";
+import ProgressBar from "../ProgressBar";
+export declare const BubbleWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     theme: ThemeType;
-};
-export declare const BubbleWrapper: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
-export declare const ProgressBarWrapper: import("styled-components").StyledComponent<"div", any, {
-    isCompact?: boolean | undefined;
-}, never>;
-export declare const Total: import("styled-components").StyledComponent<"p", any, ThemeProps, never>;
-export declare const BubbleText: import("styled-components").StyledComponent<"p", any, ThemeProps, never>;
-export declare const GiftAid: import("styled-components").StyledComponent<"p", any, ThemeProps, never>;
-export declare const Summary: import("styled-components").StyledComponent<"span", any, ThemeProps, never>;
-type TotaliserWrapperProps = {
-    isCompact: boolean;
-};
-export declare const TotaliserWrapper: import("styled-components").StyledComponent<"div", any, TotaliserWrapperProps, never>;
-export declare const CompactWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledProgressBar: import("styled-components").StyledComponent<({ percentage, isCircular, circleContents, circleSize, barColor, secondaryBarColor, secondaryPercentage, children, }: import("../ProgressBar").ProgressBarProps) => import("react").JSX.Element, any, {}, never>;
-export {};
+}>> & string;
+export declare const ProgressBarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isCompact?: boolean;
+    theme: ThemeType;
+}>> & string;
+export declare const Total: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+    theme: ThemeType;
+}>> & string;
+export declare const BubbleText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+    theme: ThemeType;
+}>> & string;
+export declare const GiftAid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+    theme: ThemeType;
+}>> & string;
+export declare const Summary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    theme: ThemeType;
+}>> & string;
+export declare const TotaliserWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isCompact: boolean;
+    theme: ThemeType;
+}>> & string;
+export declare const CompactWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledProgressBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../ProgressBar").ProgressBarProps, never>> & string & Omit<typeof ProgressBar, keyof import("react").Component<any, {}, any>>;

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

@@ -1,9 +1,8 @@
-import React from "react";
 import { StoryObj } from "@storybook/react";
 import UserBlock from ".";
 declare const _default: {
     title: string;
-    component: ({ name, avatarName, avatarUrl, extra, size, }: import(".").UserBlockProps) => React.JSX.Element;
+    component: typeof UserBlock;
     args: {
         name: string;
         size: string;

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, HTMLAttributes } from "react";
+import React, { type ReactNode, type HTMLAttributes } from "react";
 export type UserBlockProps = HTMLAttributes<HTMLElement> & {
     /** name component or text */
     name?: ReactNode;
@@ -14,5 +14,5 @@ export type UserBlockProps = HTMLAttributes<HTMLElement> & {
 /**
  * Display an avatar with title and subtitle
  */
-declare const UserBlock: ({ name, avatarName, avatarUrl, extra, size, }: UserBlockProps) => React.JSX.Element;
+export declare function UserBlock({ name, avatarName, avatarUrl, extra, size, }: UserBlockProps): React.JSX.Element;
 export default UserBlock;

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

@@ -1,9 +1,9 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type Props = {
     theme: ThemeType;
 };
-export declare const StyledUserBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Details: import("styled-components").StyledComponent<"div", any, Props, never>;
-export declare const Name: import("styled-components").StyledComponent<"div", any, Props, never>;
-export declare const Extra: import("styled-components").StyledComponent<"div", any, Props, never>;
+export declare const StyledUserBlock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Details: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>> & string;
+export declare const Name: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>> & string;
+export declare const Extra: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>> & string;
 export {};

package/lib/components/index.d.ts

@@ -1,42 +1,42 @@
-export { default as AddressLookup } from "./AddressLookup";
-export { default as Avatar } from "./Avatar";
-export { default as Badge } from "./Badge";
-export { default as Box } from "./Box";
-export { default as Button } from "./Button";
-export { default as Carousel } from "./Carousel";
-export { default as Checkbox } from "./Checkbox";
-export { default as Collapse } from "./Collapse";
-export { default as DateField } from "./DateField";
-export { default as Divider } from "./Divider";
-export { default as ErrorText } from "./ErrorText";
-export { default as Flex } from "./Flex";
-export { default as Fontface } from "./Fontface";
-export { default as Footer } from "./Footer";
-export { default as GlobalStyle } from "./GlobalStyle";
-export { default as GlobalStyleNoFontFace } from "./GlobalStyleNoFontFace";
-export { default as Header } from "./Header";
-export { default as Heading } from "./Heading";
-export { default as IconFa } from "./IconFa";
-export { default as LabelWrapper } from "./LabelWrapper";
-export { default as LegendWrapper } from "./LegendWrapper";
-export { default as Link } from "./Link";
-export { default as Loader } from "./Loader";
-export { default as Modal } from "./Modal";
-export { default as Pagination } from "./Pagination";
-export { default as PopOver } from "./PopOver";
-export { default as ProgressBar } from "./ProgressBar";
-export { default as Radio } from "./Radio";
-export { default as RadioConsent } from "./RadioConsent";
-export { default as Select } from "./Select";
-export { default as Step } from "./Step";
-export { default as Text } from "./Text";
-export { default as TextAreaField } from "./TextAreaField";
-export { default as TextField } from "./TextField";
-export { default as Totaliser } from "./Totaliser";
-export { default as UserBlock } from "./UserBlock";
-export { default as InfoBox } from "./InfoBox";
-export { default as bowelbabeTheme } from "../themes/bowelbabe";
-export { default as crukTheme } from "../themes/cruk";
-export { default as su2cTheme } from "../themes/su2c";
-export { default as rflTheme } from "../themes/rfl";
+export { AddressLookup } from "./AddressLookup";
+export { Avatar } from "./Avatar";
+export { Badge } from "./Badge";
+export { Box } from "./Box";
+export { Button } from "./Button";
+export { Carousel } from "./Carousel";
+export { Checkbox } from "./Checkbox";
+export { Collapse } from "./Collapse";
+export { DateField } from "./DateField";
+export { Divider } from "./Divider";
+export { ErrorText } from "./ErrorText";
+export { Fontface } from "./Fontface";
+export { Flex } from "./Flex";
+export { Footer } from "./Footer";
+export { GlobalStyle } from "./GlobalStyle";
+export { GlobalStyleNoFontFace } from "./GlobalStyleNoFontFace";
+export { Header } from "./Header";
+export { Heading } from "./Heading";
+export { IconFa } from "./IconFa";
+export { LabelWrapper } from "./LabelWrapper";
+export { LegendWrapper } from "./LegendWrapper";
+export { Link } from "./Link";
+export { Loader } from "./Loader";
+export { Modal } from "./Modal";
+export { Pagination } from "./Pagination";
+export { PopOver } from "./PopOver";
+export { ProgressBar } from "./ProgressBar";
+export { Radio } from "./Radio";
+export { RadioConsent } from "./RadioConsent";
+export { Select } from "./Select";
+export { Step } from "./Step";
+export { Text } from "./Text";
+export { TextAreaField } from "./TextAreaField";
+export { TextField } from "./TextField";
+export { Totaliser } from "./Totaliser";
+export { UserBlock } from "./UserBlock";
+export { InfoBox } from "./InfoBox";
+export { bowelbabeTheme } from "../themes/bowelbabe";
+export { crukTheme } from "../themes/cruk";
+export { su2cTheme } from "../themes/su2c";
+export { rflTheme } from "../themes/rfl";
 export * from "../types";

package/lib/hooks/useEffectBrowser.d.ts

@@ -1,3 +1,3 @@
-import { EffectCallback, DependencyList } from "react";
+import { type EffectCallback, type DependencyList } from "react";
 export declare function useEffectBrowser(action: EffectCallback, deps: DependencyList): void | null;
 export default useEffectBrowser;

package/lib/hooks/useKey.d.ts

@@ -1,6 +1,6 @@
-import { DependencyList } from "react";
+import { type DependencyList } from "react";
 export declare const useKey: (callback: (event: KeyboardEvent) => void, options: {
-    detectKeys?: string[] | undefined;
-    keyevent?: "keydown" | "keyup" | "keypress" | undefined;
+    detectKeys?: string[];
+    keyevent?: "keydown" | "keyup" | "keypress";
 }, dependencies?: DependencyList) => void;
 export default useKey;

package/lib/hooks/useLayoutEffectBrowser.d.ts

@@ -1,4 +1,4 @@
-import { EffectCallback, DependencyList } from "react";
+import { type EffectCallback, type DependencyList } from "react";
 declare const useLayoutEffectBrowser: (action: EffectCallback, deps: DependencyList) => void | null;
 export default useLayoutEffectBrowser;
 export { useLayoutEffectBrowser };

package/lib/hooks/useScrollPosition.d.ts

@@ -1,4 +1,4 @@
-import { DependencyList, RefObject, MutableRefObject } from "react";
+import { type DependencyList, type RefObject, type MutableRefObject } from "react";
 declare const useScrollPosition: (effect: ({ currPos, }: {
     prevPos: {
         x: number;