@cruk/cruk-react-components 4.2.1 → 5.0.0

package/README.md

@@ -32,6 +32,26 @@ 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};
+`;
+```
+
 ## Migration from V0 to V1
 
 1.  Find all instances of RadioGroup and change it to the new component name of RadioConsent
@@ -70,22 +90,16 @@ However this isn't as well maintained as the storybook stories and will soon be
 
 ## Testing
 
-Jest: Unit testing,
-Cypress: Component function, accessibility and image snapshot tests (Image snapshot test are run in headless mode only they will be skipped in interactive mode).
+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 including image snapshots
-Make sure you have the docker desktop app running in the background
+Run all tests Unit and Cypress
 
 ```sh
  npm run test
 ```
 
-Update Cypress image snapshots
-
-```sh
-npm run test:update
-```
-
 Run Cypress interactive testing suite (functional and accessibility tests)
 
 ```sh
@@ -98,63 +112,21 @@ Run Cypress headlessly including image snapshots, docker desktop app will need t
 npm run cypress-headless
 ```
 
-To run a specific test Cypress headlessly
+## Maintaining
 
-```sh
-ARGS="--spec src/components/Modal/test.cypress.tsx" npm run cypress-headless
-```
+### Dependencies
 
-To run and update a specific snapshot headlessly
-
-```sh
-ARGS="--spec src/components/Modal/test.cypress.tsx" npm run cypress-headless:update
-```
-
-## Docker
-
-A docker-compose.yml file is provided to aid development/testing in a consistent environment.
-
-Install dependencies.
-
-```bash
-docker-compose run npm
-```
-
-Start local development environment
-
-```bash
-docker-compose up server
-```
-
-This should start the server and you should be able to see it running here: http://127.0.0.1:8080/
-Tests will not work locally unless this is running in a terminal
-
-Run Cypress tests
-
-```bash
-docker-compose run cypress
-```
-
-## Run Percy Test
+If you update cypress version make sure you update it in the package.json and in the in docker compose file.
 
-To run percy test locally , create an [.env](.env.example) file with PERCY_TOKEN:
+It is also advices that if you make change to storybook you try and run it before merging and if you make changes to roll up and it's plug ins you try and run
 
 ```bash
-npm run percy
-```
-
-To test specific component , go to .percy.yml and add the regex to match story to the include attribute. Example
-
-```
-#.percy.yml
-
-storybook:
-include: [UserBlock]
+npm run rollup:build-lib
 ```
 
-### Maintaining
+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.
 
@@ -163,15 +135,3 @@ 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.
-
-## Dependencies
-
-If you update cypress version make sure you update it in the package.json and in the in docker compose file.
-
-It is also advices that if you make change to storybook you try and run it before merging and if you make changes to roll up and it's plug ins you try and run
-
-```bash
-npm run rollup:build-lib
-```
-
-and see if it can successfully build the library before running the release script

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;
     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,5 +1,5 @@
-import React, { ReactNode } from "react";
-import { SpaceType } from "../../types";
+import React, { type ReactNode } from "react";
+import { type SpaceType } from "../../types";
 export type BadgeProps = {
     /** background colour of badge */
     backgroundColor?: string;
@@ -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, ...rest }: BadgeProps): React.JSX.Element;
 export default Badge;

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

@@ -1,4 +1,4 @@
-import { SpaceType, ThemeType } from "../../types";
+import { type SpaceType, type ThemeType } from "../../types";
 type StyleBadgeProps = {
     backgroundColor?: string;
     borderColor?: string;
@@ -7,5 +7,5 @@ type StyleBadgeProps = {
     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 SpacingProps } from "../Spacing";
+import { type ThemeType } from "../../types";
+type StyledBoxProps = SpacingProps & {
+    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,7 +1,7 @@
-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;
@@ -11,5 +11,5 @@ type StyledButtonProps = {
     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/Carousel.stories.d.ts

@@ -11,3 +11,4 @@ declare const _default: {
 export default _default;
 type Story = StoryObj<typeof Carousel>;
 export declare const Default: Story;
+export declare const WithExternalPositionState: Story;

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;
@@ -13,7 +13,12 @@ export type CarouselProps = {
 };
 /**
  *
- * Light weight carousel component that works with mouse and touch events, will work with divs and much anything you chuck in children
+ * Lightweight carousel component that works with mouse and touch events,
+ * Accepts react node array as children so will work with any html element as a child.
+ *
+ * Also works with external state that holds carousel postion,
+ * by accepting a starting position as a prop, whilst also accepting a handler
+ * with current position as a prop triggered when carousel component is interacted with.
  */
 export declare const Carousel: ({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => React.JSX.Element;
 declare const _default: React.MemoExoticComponent<({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => React.JSX.Element>;

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

@@ -1,5 +1,6 @@
-import { ThemeType } from "../../types";
-export declare const CarouselWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { type ButtonHTMLAttributes } from "react";
+import { type ThemeType } from "../../types";
+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;
 };
@@ -16,18 +17,19 @@ type CarouselCardInnerProps = {
     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,4 +1,4 @@
-import { ThemeType } from "../../types";
+import { type ThemeType } from "../../types";
 type StyledLabelProps = {
     checked: boolean;
     disabled: boolean;
@@ -8,9 +8,9 @@ type StyledLabelProps = {
 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;