@cruk/cruk-react-components 5.0.8 → 6.0.1

package/README.md

@@ -14,9 +14,9 @@ Add cruk-react-components and its peer dependencies react, react-dom and styled-
 
 ```sh
 "dependencies": {
-  "react": "^16.2.0",
-  "react-dom": "^16.2.0",
-  "styled-components": "^5.0.0"
+  "react": "^19",
+  "react-dom": "^19",
+  "styled-components": "^6"
 }
 ```
 
@@ -152,10 +152,23 @@ and see if it can successfully build the library before running the release scri
 
 ### Releases
 
-Please update the version number in the package.json and follow the semver standards for version numbers.
+#### Pre-release
 
-Make sure that your current node version is Node 16.
+Please update the version number in the package.json and follow the semver standards for version numbers.
+Run `nvm use` to make sure that you are on the correct version of node.
 Run `npm i` to make sure that the correct version in the lockfile.
 Update the CHANGELOG.md which should list the changes for the release, instructions are at the bottom of the file.
-Make sure that you have the correct permissions for the @cruk on NPM
-Run the release script with `npm run release` this should make and push the tag, build the lib and release it on NPM.
+These changes need to be merged into master.
+
+#### Releasing
+
+Make sure that you have the correct permissions for the @cruk org on NPM.
+Run the release script with `npm run release` this should use `release-it` to allow you to select the same version number as stated in the package JSON and it should take care of the rest:
+
+- it runs npm ci
+- it does the build
+- it makes and pushes the tag
+- it releases the build lib to NPM
+- it requestions if you want to document the release on github and autogenerates the release notes.
+
+Agree to all these steps release-it walks through and when Github opens up with the release click on the `Publish` button. If anything goes wrong release-it should roll back.

package/lib/{src/components → components}/AddressLookup/AddressLookup.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import { type AddressLookupProps } from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<AddressLookupProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    component: ({ apiKey, countries, errorMessage, hasError, isValid, isValidVisible, isInvalidVisible, label, hintText, ref, onAddressError, onAddressSelected, onChange, onBlur, ...props }: AddressLookupProps) => React.JSX.Element;
     args: {
         disabled: boolean;
         errorMessage: string;

package/lib/{src/components → components}/AddressLookup/index.d.ts

@@ -34,5 +34,5 @@ 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.
  */
-export declare const AddressLookup: React.ForwardRefExoticComponent<Omit<AddressLookupProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const AddressLookup: ({ apiKey, countries, errorMessage, hasError, isValid, isValidVisible, isInvalidVisible, label, hintText, ref, onAddressError, onAddressSelected, onChange, onBlur, ...props }: AddressLookupProps) => React.JSX.Element;
 export default AddressLookup;

package/lib/{src/components → components}/Box/Box.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import Box from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import(".").BoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    component: ({ ...props }: import(".").BoxProps) => React.JSX.Element;
     args: {};
     tags: string[];
 };

package/lib/{src/components → components}/Box/index.d.ts

@@ -14,5 +14,5 @@ export type BoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
  * The more specific the the target the higher priority the css will have.
  * For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.
  */
-export declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Box: ({ ...props }: BoxProps) => React.JSX.Element;
 export default Box;

package/lib/{src/components → components}/Button/Button.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import { Button } from "./";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import("./").ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    component: (props: import("./").ButtonProps) => React.JSX.Element;
     args: {
         appearance: string;
         disabled: boolean;

package/lib/{src/components → components}/Button/index.d.ts

@@ -24,5 +24,5 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLElement> & {
  *
  * Design system documentation SU2C https://zeroheight.com/79db39f7e/p/22ff0e-button/b/32e1a2
  */
-export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const Button: (props: ButtonProps) => React.JSX.Element;
 export default Button;

package/lib/{src/components → components}/Checkbox/Checkbox.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import CheckBox, { type CheckBoxProps } from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<CheckBoxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    component: (props: CheckBoxProps) => React.JSX.Element;
     args: {
         id: string;
         disabled: boolean;

package/lib/{src/components → components}/Checkbox/index.d.ts

@@ -1,6 +1,6 @@
-import React, { type InputHTMLAttributes, type Ref, type ReactNode, type LegacyRef } from "react";
+import React, { type InputHTMLAttributes, type Ref, type ReactNode } from "react";
 export type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {
-    ref?: Ref<HTMLInputElement> | LegacyRef<HTMLInputElement>;
+    ref?: Ref<HTMLInputElement>;
     /** flag for error styling */
     hasError?: boolean;
     /** error message text  */
@@ -12,5 +12,5 @@ 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
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckBoxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: (props: CheckBoxProps) => React.JSX.Element;
 export default Checkbox;

package/lib/{src/components → components}/Collapse/styles.d.ts

@@ -3,14 +3,22 @@ export declare const transitionDurationSeconds = 0.5;
 export declare const FlippingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $open: boolean;
 }>> & string;
-export declare const DefaultHeader: 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;
+export declare const DefaultHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ButtonHTMLAttributes<HTMLElement> & {
+    appearance?: import("../../types").ButtonAppearanceType;
+    full?: boolean;
+    href?: string;
+    size?: "m" | "l";
+    css?: unknown;
+    as?: import("react").ElementType;
+    isIconButton?: boolean;
+    ref?: import("react").Ref<HTMLElement>;
+    children?: import("react").ReactNode;
 }, {
     theme: ThemeType;
     $textColor?: string;
     $textSize?: FontSizeType;
     $textFontFamily?: string;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<(props: import("../Button").ButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export declare const CollapseContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $contentHeight: string;
     $openStatus: boolean;

package/lib/{src/components → components}/DateField/styles.d.ts

@@ -1,16 +1,22 @@
 import { type ThemeType } from "../../types";
 export declare const Fieldset: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
-export declare const TextAsLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
+export declare const TextAsLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    textColor?: string;
+    textAlign?: "left" | "right" | "center" | "justify";
+    textSize?: import("../../types").FontSizeType;
+    textWeight?: number | string;
+    textFontFamily?: string;
+    as?: import("react").ElementType;
+    wordBreak?: import("../../types").WordBreakType;
+    overflowWrap?: import("../../types").OverflowWrapType;
+    ref?: import("react").Ref<HTMLElement>;
 }, {
     theme: ThemeType;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<(props: import("../Text").TextProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export declare const DateTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     theme: ThemeType;
 }>> & string;
-export declare const LargeDateTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & {
+export declare const LargeDateTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & {
     theme: ThemeType;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, never>> & string;
 export declare const ErrorTextWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,16 @@
+import { type ThemeType } from "../../types";
+type ThemeProps = {
+    theme: ThemeType;
+};
+export declare const StyledErrorText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    textColor?: string;
+    textAlign?: "left" | "right" | "center" | "justify";
+    textSize?: import("../../types").FontSizeType;
+    textWeight?: number | string;
+    textFontFamily?: string;
+    as?: import("react").ElementType;
+    wordBreak?: import("../../types").WordBreakType;
+    overflowWrap?: import("../../types").OverflowWrapType;
+    ref?: import("react").Ref<HTMLElement>;
+}, ThemeProps>> & string & Omit<(props: import("../Text").TextProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export default StyledErrorText;

package/lib/{src/components → components}/Footer/styles.d.ts

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

package/lib/components/GlobalStyle.d.ts

@@ -0,0 +1,2 @@
+export declare const GlobalStyle: import("react").ForwardRefExoticComponent<Omit<JSX.LibraryManagedAttributes<T, import("styled-components").ExecutionProps>, "ref"> & import("react").RefAttributes<import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>>> & {};
+export default GlobalStyle;

package/lib/components/GlobalStyleNoFontFace.d.ts

@@ -0,0 +1,2 @@
+export declare const GlobalStyleNoFontFace: import("react").ForwardRefExoticComponent<Omit<JSX.LibraryManagedAttributes<T, import("styled-components").ExecutionProps>, "ref"> & import("react").RefAttributes<import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>>> & {};
+export default GlobalStyleNoFontFace;

package/lib/{src/components → components}/InfoBox/InfoBox.stories.d.ts

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

package/lib/{src/components → components}/InfoBox/index.d.ts

@@ -24,5 +24,5 @@ export type InfoBoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
   
   The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.
    */
-export declare const InfoBox: React.ForwardRefExoticComponent<Omit<InfoBoxProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const InfoBox: ({ children, titleText, titleTextColor, descriptionText, descriptionTextColor, icon, ref, ...spacingAndHTMLElementProps }: InfoBoxProps) => React.JSX.Element;
 export default InfoBox;

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

@@ -0,0 +1,13 @@
+import { type ThemeType } from "../../types";
+import { type BoxProps } from "../Box";
+type InfoBoxProps = BoxProps & {
+    css?: string;
+    theme: ThemeType;
+};
+export declare const StyledInfoBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    backgroundColor?: string;
+    ref?: import("react").Ref<HTMLDivElement>;
+    children?: import("react").ReactNode;
+    as?: import("react").ElementType;
+}, InfoBoxProps>> & string & Omit<({ ...props }: BoxProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export default StyledInfoBox;

package/lib/{src/components → components}/Link/Link.stories.d.ts

@@ -3,7 +3,10 @@ import { type StoryObj } from "@storybook/react";
 import Link from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import(".").LinkProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    component: {
+        (props: import(".").LinkProps): React.JSX.Element;
+        displayName: string;
+    };
     args: {
         appearance: undefined;
         href: string;

package/lib/{src/components → components}/Link/index.d.ts

@@ -22,5 +22,8 @@ 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<LinkProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const Link: {
+    (props: LinkProps): React.JSX.Element;
+    displayName: string;
+};
 export default Link;

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

@@ -0,0 +1,20 @@
+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";
+    $textHoverColor?: string;
+};
+export declare const StyledLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    textColor?: string;
+    textAlign?: "left" | "right" | "center" | "justify";
+    textSize?: import("../../types").FontSizeType;
+    textWeight?: number | string;
+    textFontFamily?: string;
+    as?: import("react").ElementType;
+    wordBreak?: import("../../types").WordBreakType;
+    overflowWrap?: import("../../types").OverflowWrapType;
+    ref?: import("react").Ref<HTMLElement>;
+}, StyledLinkProps>> & string & Omit<(props: TextProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export default StyledLink;

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

@@ -0,0 +1,32 @@
+import { type ThemeType } from "../../types";
+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<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    backgroundColor?: string;
+    ref?: import("react").Ref<HTMLDivElement>;
+    children?: import("react").ReactNode;
+    as?: import("react").ElementType;
+}, {
+    $backgroundColor?: string;
+    $top: string;
+    $width: string;
+    $maxWidth: string;
+    $isAnimated?: boolean;
+    theme: ThemeType;
+}>> & string & Omit<({ ...props }: import("../Box").BoxProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ButtonHTMLAttributes<HTMLElement> & {
+    appearance?: import("../../types").ButtonAppearanceType;
+    full?: boolean;
+    href?: string;
+    size?: "m" | "l";
+    css?: unknown;
+    as?: import("react").ElementType;
+    isIconButton?: boolean;
+    ref?: import("react").Ref<HTMLElement>;
+    children?: import("react").ReactNode;
+}, {
+    theme: ThemeType;
+}>> & string & Omit<(props: import("../Button").ButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+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>, {
+    theme: ThemeType;
+    $isAnimated?: boolean;
+}>> & string;

package/lib/{src/components → components}/Radio/Radio.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import Radio, { type RadioProps } from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    component: (props: RadioProps) => React.JSX.Element;
     args: {
         id: string;
         value: string;

package/lib/{src/components → components}/Radio/index.d.ts

@@ -1,6 +1,6 @@
-import React, { type InputHTMLAttributes, type Ref, type ReactNode, type LegacyRef } from "react";
+import React, { type InputHTMLAttributes, type Ref, type ReactNode } from "react";
 export type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
-    ref?: Ref<HTMLInputElement> | LegacyRef<HTMLInputElement>;
+    ref?: Ref<HTMLInputElement>;
     /** flag for error styling */
     hasError?: boolean;
     /** error message text  */
@@ -12,5 +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
  */
-export declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Radio: (props: RadioProps) => React.JSX.Element;
 export default Radio;

package/lib/{src/components → components}/RadioConsent/styles.d.ts

@@ -3,9 +3,12 @@ type StyleRadioWidthProp = {
     $numberOfAttributes: number;
     theme: ThemeType;
 };
-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 StyledRadio: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").InputHTMLAttributes<HTMLInputElement> & {
+    ref?: import("react").Ref<HTMLInputElement>;
+    hasError?: boolean;
+    errorMessage?: string;
+    children?: import("react").ReactNode;
+}, StyleRadioWidthProp>> & string & Omit<(props: import("../Radio").RadioProps) => import("react").JSX.Element, 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>, {
     theme: ThemeType;
 }>> & string;

package/lib/{src/components → components}/Select/Selelct.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import Select, { type SelectProps } from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+    component: ({ errorMessage, hasError, required, label, hintText, hideRequiredInLabel, ref, ...props }: SelectProps) => React.JSX.Element;
     args: {
         disabled: boolean;
         required: boolean;

package/lib/{src/components → components}/Select/index.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactNode, type SelectHTMLAttributes, type Ref, type LegacyRef } from "react";
+import React, { type ReactNode, type SelectHTMLAttributes, type Ref } 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> | LegacyRef<HTMLSelectElement>;
+    ref?: Ref<HTMLSelectElement>;
 };
 /**
  * Select components are used for collecting user provided information from a list of options.
  *
  */
-export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export declare const Select: ({ errorMessage, hasError, required, label, hintText, hideRequiredInLabel, ref, ...props }: SelectProps) => React.JSX.Element;
 export default Select;

package/lib/{src/components → components}/Text/Text.stories.d.ts

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

package/lib/{src/components → components}/Text/index.d.ts

@@ -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: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const Text: (props: TextProps) => React.JSX.Element;
 export default Text;

package/lib/{src/components → components}/TextAreaField/TextAreaField.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import TextAreaField from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import(".").TextAreaFieldProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+    component: ({ errorMessage, hasError, hintText, label, resize, lineCount, ref, ...props }: import(".").TextAreaFieldProps) => React.JSX.Element;
     args: {
         defaultValue: string;
         disabled: boolean;

package/lib/{src/components → components}/TextAreaField/index.d.ts

@@ -18,5 +18,5 @@ export type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
 /**
  * TextAreaField lets users enter and edit multiline text.
  */
-export declare const TextAreaField: React.ForwardRefExoticComponent<Omit<TextAreaFieldProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const TextAreaField: ({ errorMessage, hasError, hintText, label, resize, lineCount, ref, ...props }: TextAreaFieldProps) => React.JSX.Element;
 export default TextAreaField;

package/lib/{src/components → components}/TextField/TextField.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import TextField from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import(".").TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    component: ({ errorMessage, extraBottom, extraLeft, extraRight, extraTop, hasError, hintText, isValid, isValidVisible, isInvalidVisible, label, hideRequiredInLabel, ref, ...props }: import(".").TextFieldProps) => React.JSX.Element;
     args: {
         value: undefined;
         disabled: boolean;

package/lib/{src/components → components}/TextField/index.d.ts

@@ -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.
  * */
-export declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const TextField: ({ errorMessage, extraBottom, extraLeft, extraRight, extraTop, hasError, hintText, isValid, isValidVisible, isInvalidVisible, label, hideRequiredInLabel, ref, ...props }: TextFieldProps) => React.JSX.Element;
 export default TextField;

package/lib/{src/components → components}/TextField/styles.d.ts

@@ -10,12 +10,8 @@ type StyledInputProps = {
     $isInvalidVisible?: boolean;
 };
 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 ExtraLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "theme"> & ExtraProps, never>> & string;
+export declare const ExtraRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "theme"> & ExtraProps, 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;

package/lib/components/ThemeCheatSheet.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { type ThemeType } from "../types";
+export declare function ThemeCheatSheet({ theme }: {
+    theme?: ThemeType;
+}): React.JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<JSX.LibraryManagedAttributes<T, import("styled-components").ExecutionProps>, "ref"> & React.RefAttributes<typeof ThemeCheatSheet>> & {};
+export default _default;

package/lib/{src/hooks → hooks}/useScrollPosition.d.ts

@@ -1,4 +1,4 @@
-import { type DependencyList, type RefObject, type MutableRefObject } from "react";
+import { type DependencyList, type RefObject } from "react";
 declare const useScrollPosition: (effect: ({ currPos, }: {
     prevPos: {
         x: number;
@@ -8,6 +8,6 @@ declare const useScrollPosition: (effect: ({ currPos, }: {
         x: number;
         y: number;
     };
-}) => void, deps: DependencyList, element: RefObject<HTMLElement> | MutableRefObject<undefined> | null, useWindow: boolean, wait: number) => void;
+}) => void, deps: DependencyList, element: RefObject<HTMLElement | null> | null, useWindow: boolean, wait: number) => void;
 export default useScrollPosition;
 export { useScrollPosition };

package/lib/node_modules/tslib/tslib.es6.js

@@ -1,2 +1,2 @@
-var r=function(){return r=Object.assign||function(r){for(var t,e=1,n=arguments.length;e<n;e++)for(var o in t=arguments[e])Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o]);return r},r.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;export{r as __assign};
+var r=function(){return r=Object.assign||function(r){for(var e,t=1,n=arguments.length;t<n;t++)for(var o in e=arguments[t])Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r},r.apply(this,arguments)};function e(r,e){var t={};for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&e.indexOf(n)<0&&(t[n]=r[n]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(r);o<n.length;o++)e.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(r,n[o])&&(t[n[o]]=r[n[o]])}return t}function t(r,e){return Object.defineProperty?Object.defineProperty(r,"raw",{value:e}):r.raw=e,r}"function"==typeof SuppressedError&&SuppressedError;export{r as __assign,t as __makeTemplateObject,e as __rest};
 //# sourceMappingURL=tslib.es6.js.map