@cruk/cruk-react-components 4.2.2 → 5.0.1

package/README.md

@@ -32,6 +32,50 @@ const MyComponent = () => (
 );
 ```
 
+## Migration from V4 to V5
+
+Because Styped Components now manages its own types on stead of relying on the community efforts on the DefinitelyTyped project, you may need to use generics instead of inline prop type definition inside styledComponents componets.
+
+### Before:
+
+```tsx
+export const StyledButton = styled(Button)`
+  border-radius: ${({ theme }: StyledButtonProps) => theme.button.borderRadius};
+`;
+```
+
+### Now:
+
+```tsx
+export const StyledButton = styled(Button)<StyledButtonProps>`
+  border-radius: ${({ theme }) => theme.button.borderRadius};
+`;
+```
+
+Styled components 6 also no longer filters out custom props, so to stop a prop bleeding into child components or the underlying html element, prefix the prop name with a $ see size prop in example below:
+
+### Before:
+
+```tsx
+<StyledAvatar
+  {...rest}
+  size={theme.avatar[size || "m"]}
+  src={avatarUrl()}
+  alt={alt}
+/>
+```
+
+### Now:
+
+```tsx
+<StyledAvatar
+  {...rest}
+  $size={theme.avatar[size || "m"]}
+  src={avatarUrl()}
+  alt={alt}
+/>
+```
+
 ## Migration from V0 to V1
 
 1.  Find all instances of RadioGroup and change it to the new component name of RadioConsent
@@ -70,11 +114,11 @@ However this isn't as well maintained as the storybook stories and will soon be
 
 ## Testing
 
-Jest: Unit testing,
+Node: Unit testing,
 Cypress: Component function, accessibility
 Chromatic: Image snapshot comparison service, this happens in CI, people are given access to this service via their Github login.
 
-Run all tests Jest and Cypress
+Run all tests Unit and Cypress
 
 ```sh
  npm run test
@@ -92,21 +136,9 @@ Run Cypress headlessly including image snapshots, docker desktop app will need t
 npm run cypress-headless
 ```
 
-To run a specific test Cypress headlessly
-
-```sh
-ARGS="--spec src/components/Modal/test.cypress.tsx" npm run cypress-headless
-```
-
-To run and update a specific snapshot headlessly
-
-```sh
-ARGS="--spec src/components/Modal/test.cypress.tsx" npm run cypress-headless:update
-```
-
-### Maintaining
+## Maintaining
 
-## Dependencies
+### Dependencies
 
 If you update cypress version make sure you update it in the package.json and in the in docker compose file.
 
@@ -118,7 +150,7 @@ npm run rollup:build-lib
 
 and see if it can successfully build the library before running the release script
 
-## Releases
+### Releases
 
 Please update the version number in the package.json and follow the semver standards for version numbers.
 

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

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

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

@@ -1,5 +1,5 @@
-import React, { InputHTMLAttributes, Ref, FocusEvent, ReactNode } from "react";
-import { AddressDataType } from "../../types";
+import React, { type InputHTMLAttributes, type Ref, type FocusEvent, type ReactNode } from "react";
+import { type AddressDataType } from "../../types";
 export type AddressLookupProps = InputHTMLAttributes<HTMLInputElement> & {
     /** api key for loqate */
     apiKey: string;
@@ -34,32 +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.
  */
-declare const AddressLookup: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement> & {
-    /** api key for loqate */
-    apiKey: string;
-    /** list of countries codes you want the address look up to search within */
-    countries?: string[] | undefined;
-    /** callback function which is passed the selected address data */
-    onAddressSelected: (address: AddressDataType) => void;
-    /** error message */
-    errorMessage?: string | undefined;
-    /** when true a input has a red border */
-    hasError?: boolean | undefined;
-    /** flag which effects the check or cross icons to the right of the input */
-    isValid?: boolean | undefined;
-    /** flag to hide or show the check icon when valid */
-    isValidVisible?: boolean | undefined;
-    /** flag to hide or show the cross icon when invalid */
-    isInvalidVisible?: boolean | undefined;
-    /** label text */
-    label?: string | undefined;
-    /** hint text text */
-    hintText?: ReactNode;
-    /** callback function which is passed the error */
-    onAddressError?: ((error: Error) => void) | undefined;
-    /** onBlur handler */
-    onBlur?: ((e: FocusEvent<HTMLInputElement>) => void) | undefined;
-    /** attach a DOM reference variable to your component */
-    ref?: React.Ref<HTMLInputElement> | undefined;
-}, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const AddressLookup: React.ForwardRefExoticComponent<Omit<AddressLookupProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default AddressLookup;

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

@@ -1,13 +1,17 @@
+import { type ThemeType } from "../../types";
 interface ListWrapperProps extends React.HTMLProps<HTMLDivElement> {
     tabIndex?: number;
 }
-export declare const ListWrapper: import("styled-components").StyledComponent<"div", any, ListWrapperProps, never>;
-export declare const List: import("styled-components").StyledComponent<"ul", any, {
-    ref?: import("react").Ref<HTMLUListElement> | undefined;
-}, never>;
-export declare const ListItem: import("styled-components").StyledComponent<"li", any, {
-    isActive: boolean;
-    ref?: import("react").Ref<HTMLLIElement> | undefined;
-}, never>;
-export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"div", any, {}, never>;
+type ListProps = {
+    theme: ThemeType;
+    $isActive?: boolean;
+};
+export declare const ListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ListWrapperProps>> & string;
+export declare const List: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, ListProps & {
+    ref?: React.Ref<HTMLUListElement>;
+}>> & string;
+export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ListProps & {
+    ref?: React.Ref<HTMLLIElement>;
+}>> & string;
+export declare const ScreenReaderOnly: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/lib/components/AllThemesWrapper.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactNode } from "react";
-import { ThemeType } from "../types";
+import React, { type ReactNode } from "react";
+import { type ThemeType } from "../types";
 type TestThemeWrapperProps = {
     theme?: ThemeType;
     children?: ReactNode;

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

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

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

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

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

@@ -1,7 +1,7 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type AvatarStyledProps = {
-    size?: string;
+    $size?: string;
     theme: ThemeType;
 };
-export declare const StyledAvatar: import("styled-components").StyledComponent<"img", any, AvatarStyledProps, never>;
+export declare const StyledAvatar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, AvatarStyledProps>> & string;
 export default StyledAvatar;

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

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

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

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

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

@@ -1,11 +1,11 @@
-import { SpaceType, ThemeType } from "../../types";
+import { type SpaceType, type ThemeType } from "../../types";
 type StyleBadgeProps = {
-    backgroundColor?: string;
-    borderColor?: string;
-    textColor?: string;
-    isText?: boolean;
-    size: SpaceType;
+    $backgroundColor?: string;
+    $borderColor?: string;
+    $textColor?: string;
+    $isText?: boolean;
+    $size: SpaceType;
     theme: ThemeType;
 };
-export declare const StyledBadge: import("styled-components").StyledComponent<"span", any, StyleBadgeProps, never>;
+export declare const StyledBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyleBadgeProps>> & string;
 export default StyledBadge;

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

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

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

@@ -1,5 +1,5 @@
-import { FunctionComponent, HTMLAttributes, Ref, ReactNode, ElementType } from "react";
-import { SpacingProps } from "../Spacing";
+import React, { type HTMLAttributes, type Ref, type ReactNode, type ElementType } from "react";
+import { type SpacingProps } from "../Spacing";
 export type BoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     /** background color of box, this will add default padding */
     backgroundColor?: string;
@@ -10,9 +10,10 @@ export type BoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     as?: ElementType;
 };
 /**
- * Box is used to wrap other components to add margin and padding. The values will be in the t-shirt sizes specified in the theme sizes.
-
-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.
+ * Box is used to wrap other components to add margin and padding.
+ * The values will be in the t-shirt sizes specified in the theme sizes.
+ * The more specific the the target the higher priority the css will have.
+ * For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.
  */
-declare const Box: FunctionComponent<BoxProps>;
+export declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Box;

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

@@ -1,8 +1,9 @@
-import { SpacingProps } from "../Spacing";
-import { ThemeType } from "../../types";
-export declare const StyledBox: import("styled-components").StyledComponent<"div", any, SpacingProps & {
-    backgroundColor?: string | undefined;
-    css?: string | undefined;
+import { type SpacingPropsInternal } from "../Spacing";
+import { type ThemeType } from "../../types";
+type StyledBoxProps = SpacingPropsInternal & {
+    $backgroundColor?: string;
+    $css?: string;
     theme: ThemeType;
-}, never>;
+};
+export declare const StyledBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBoxProps>> & string;
 export default StyledBox;

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

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

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

@@ -1,15 +1,15 @@
-import React, { ReactNode, ButtonHTMLAttributes, Ref, ElementType } from "react";
-import { ButtonAppearanceType } from "../../types";
+import React, { type ReactNode, type ButtonHTMLAttributes, type Ref, type ElementType } from "react";
+import { type ButtonAppearanceType } from "../../types";
 export type ButtonProps = ButtonHTMLAttributes<HTMLElement> & {
     /** the look and feel of the button */
     appearance?: ButtonAppearanceType;
-    /** flag to streatch but to 100% width */
+    /** flag to stretch but to 100% width */
     full?: boolean;
     /** this is a url which will convert the button to an anchor tag */
     href?: string;
     /** the height of the button, this will add padding not increase text size */
     size?: "m" | "l";
-    css?: any;
+    css?: unknown;
     /** styled-components polymorphism where you can use the styling of a button but convert to another element like an anchor tag */
     as?: ElementType;
     /** flag to force button into an icon button shape which is square or round */
@@ -24,23 +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<React.ButtonHTMLAttributes<HTMLElement> & {
-    /** the look and feel of the button */
-    appearance?: ButtonAppearanceType | undefined;
-    /** flag to streatch but to 100% width */
-    full?: boolean | undefined;
-    /** this is a url which will convert the button to an anchor tag */
-    href?: string | undefined;
-    /** the height of the button, this will add padding not increase text size */
-    size?: "m" | "l" | undefined;
-    css?: any;
-    /** styled-components polymorphism where you can use the styling of a button but convert to another element like an anchor tag */
-    as?: React.ElementType | undefined;
-    /** flag to force button into an icon button shape which is square or round */
-    isIconButton?: boolean | undefined;
-    /** Element reference */
-    ref?: React.Ref<HTMLElement> | undefined;
-    /** Component reference */
-    children?: ReactNode;
-}, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default Button;

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

@@ -1,15 +1,15 @@
-import { ThemeType, ButtonAppearanceType } from "../../types";
-export declare const Spacer: import("styled-components").StyledComponent<"span", any, {
+import { type ThemeType, type ButtonAppearanceType } from "../../types";
+export declare const Spacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     theme: ThemeType;
-}, never>;
+}>> & string;
 type StyledButtonProps = {
-    isIconButton: boolean;
-    appearance?: ButtonAppearanceType;
-    full?: boolean;
+    $isIconButton: boolean;
+    $appearance?: ButtonAppearanceType;
+    $full?: boolean;
     theme: ThemeType;
     href?: string;
-    size?: "m" | "l";
-    css?: string;
+    $size?: "m" | "l";
+    $css?: string;
 };
-export declare const StyledButton: import("styled-components").StyledComponent<"button", any, StyledButtonProps, never>;
+export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledButtonProps>> & string;
 export {};

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

@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes } from "react";
+import React, { type ButtonHTMLAttributes } from "react";
 type DotProps = {
     count: number;
     currentPosition: number;

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { type ReactNode } from "react";
 export type CarouselProps = {
     /** Index in which the carousel is scrolled to on mount */
     startPosition?: number;

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

@@ -1,33 +1,35 @@
-import { ThemeType } from "../../types";
-export declare const CarouselWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { type ThemeType } from "../../types";
+import { type ButtonHTMLAttributes } from "react";
+export declare const CarouselWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 type ThemeProps = {
     theme: ThemeType;
 };
 type CarouselScrollAreaProps = {
-    smoothScrolling: boolean;
+    $smoothScrolling: boolean;
 };
 type CarouselCardProps = {
-    onlyChild: boolean;
-    fullWidthChild: boolean;
+    $onlyChild: boolean;
+    $fullWidthChild: boolean;
 };
 type CarouselCardInnerProps = {
-    isSelected: boolean;
-    shrinkUnselectedPages: boolean;
-    onlyChild: boolean;
-    fullWidthChild: boolean;
+    $isSelected: boolean;
+    $shrinkUnselectedPages: boolean;
+    $onlyChild: boolean;
+    $fullWidthChild: boolean;
 };
-export declare const CarouselScrollArea: import("styled-components").StyledComponent<"ul", any, CarouselScrollAreaProps, never>;
-export declare const CarouselCard: import("styled-components").StyledComponent<"li", any, CarouselCardProps, never>;
-export declare const CarouselCardInner: import("styled-components").StyledComponent<"div", any, CarouselCardInnerProps, never>;
-export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const VerticalAlign: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const CarouselButton: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const DotContainer: import("styled-components").StyledComponent<"div", any, ThemeProps & {
+export declare const CarouselScrollArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, CarouselScrollAreaProps>> & string;
+export declare const CarouselCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, CarouselCardProps>> & string;
+export declare const CarouselCardInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CarouselCardInnerProps>> & string;
+export declare const ButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalAlign: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+type CarouselButtonProps = ThemeProps & ButtonHTMLAttributes<HTMLElement>;
+export declare const CarouselButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, CarouselButtonProps>> & string;
+type DotContainerProps = ThemeProps & {
     count: number;
-}, never>;
-export declare const Dot: import("styled-components").StyledComponent<"button", any, {
-    theme: ThemeType;
+};
+export declare const DotContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DotContainerProps>> & string;
+export declare const Dot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ThemeProps & {
     selected: boolean;
-}, never>;
-export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"span", any, {}, never>;
+}>> & 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 {};

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

@@ -1,14 +1,9 @@
 import React from "react";
 import { StoryObj } from "@storybook/react";
-import CheckBox from ".";
+import CheckBox, { CheckBoxProps } 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<CheckBoxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
     args: {
         id: string;
         disabled: boolean;

package/lib/components/Checkbox/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 CheckBoxProps = 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 CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {
  *
  * The value or children becomes the label, if you want an outer label for a checkbox or group of checkboxes please use a LegendWrapper component
  */
-declare const Checkbox: React.ForwardRefExoticComponent<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 Checkbox: React.ForwardRefExoticComponent<Omit<CheckBoxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

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

@@ -1,16 +1,16 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type StyledLabelProps = {
     checked: boolean;
     disabled: boolean;
-    hasError: boolean;
+    $hasError: boolean;
     theme: ThemeType;
 };
 type ThemeProps = {
     theme: ThemeType;
 };
-export declare const CheckWrapper: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
-export declare const Check: import("styled-components").StyledComponent<"span", any, ThemeProps, never>;
-export declare const StyledLabel: import("styled-components").StyledComponent<"label", any, StyledLabelProps, never>;
-export declare const SelectedBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledInput: import("styled-components").StyledComponent<"input", any, ThemeProps, 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>, ThemeProps>> & 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>, ThemeProps>> & string;
+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 SelectedBorder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & 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>, ThemeProps>> & string;
 export {};

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

@@ -3,7 +3,7 @@ import { StoryObj } from "@storybook/react";
 import Collapse from ".";
 declare const _default: {
     title: string;
-    component: ({ id, headerTitleText, headerTitleTextColor, headerTitleTextSize, headerTitleTextFontFamily, headerComponent, startOpen, onOpenChange, children, }: import(".").CollapseProps) => JSX.Element;
+    component: typeof Collapse;
     args: {
         id: string;
         headerTitleText: string;

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

@@ -1,5 +1,5 @@
-import { ReactNode, HTMLAttributes } from "react";
-import { FontSizeType } from "../../types";
+import React, { type ReactNode, type HTMLAttributes } from "react";
+import { type FontSizeType } from "../../types";
 export type CollapseProps = HTMLAttributes<HTMLElement> & {
     /** id is required for a11y reasons as we use aria attributes which depends on an id  */
     id: string;
@@ -25,5 +25,5 @@ export type CollapseProps = HTMLAttributes<HTMLElement> & {
  * Use a collapse component to show and hide content. It has a default view; however, it can be overwritten by passing a custom component as a prop.
  *
  */
-declare const Collapse: ({ id, headerTitleText, headerTitleTextColor, headerTitleTextSize, headerTitleTextFontFamily, headerComponent, startOpen, onOpenChange, children, }: CollapseProps) => JSX.Element;
+export declare function Collapse({ id, headerTitleText, headerTitleTextColor, headerTitleTextSize, headerTitleTextFontFamily, headerComponent, startOpen, onOpenChange, children, }: CollapseProps): React.JSX.Element;
 export default Collapse;