@cruk/cruk-react-components 5.0.0 → 5.0.2

package/README.md

@@ -52,6 +52,30 @@ export const StyledButton = styled(Button)<StyledButtonProps>`
 `;
 ```
 
+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

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

@@ -4,7 +4,7 @@ interface ListWrapperProps extends React.HTMLProps<HTMLDivElement> {
 }
 type ListProps = {
     theme: ThemeType;
-    isActive?: boolean;
+    $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 & {

package/lib/components/AllThemesWrapper.d.ts

@@ -1,12 +1,10 @@
 import React, { type ReactNode } from "react";
 import { type ThemeType } from "../types";
-type TestThemeWrapperProps = {
+export declare const TestThemeWrapper: ({ children, theme, }: {
     theme?: ThemeType;
     children?: ReactNode;
-};
-export declare const TestThemeWrapper: ({ children, theme, }: TestThemeWrapperProps) => React.JSX.Element;
-type AllThemesWrapperProps = {
+}) => React.JSX.Element;
+export declare const AllThemesWrapper: ({ children }: {
     children?: ReactNode;
-};
-export declare const AllThemesWrapper: ({ children }: AllThemesWrapperProps) => React.JSX.Element;
+}) => React.JSX.Element;
 export default AllThemesWrapper;

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

@@ -1,7 +1,6 @@
 import { type ThemeType } from "../../types";
-type AvatarStyledProps = {
-    size?: string;
+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>, {
+    $size?: string;
     theme: ThemeType;
-};
-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;
+}>> & string;
 export default StyledAvatar;

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

@@ -1,6 +1,6 @@
-import React, { type ReactNode } from "react";
+import React, { type HTMLAttributes, type ReactNode } from "react";
 import { type SpaceType } from "../../types";
-export type BadgeProps = {
+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.
  */
-export declare function 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,10 @@
 import { type SpaceType, type ThemeType } from "../../types";
-type StyleBadgeProps = {
-    backgroundColor?: string;
-    borderColor?: string;
-    textColor?: string;
-    isText?: boolean;
-    size: SpaceType;
+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>, {
+    $backgroundColor?: string;
+    $borderColor?: string;
+    $textColor?: string;
+    $isText?: boolean;
+    $size: SpaceType;
     theme: ThemeType;
-};
-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;
+}>> & string;
 export default StyledBadge;

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

@@ -1,8 +1,8 @@
-import { type SpacingProps } from "../Spacing";
+import { type SpacingPropsInternal } from "../Spacing";
 import { type ThemeType } from "../../types";
-type StyledBoxProps = SpacingProps & {
-    backgroundColor?: string;
-    css?: string;
+type StyledBoxProps = SpacingPropsInternal & {
+    $backgroundColor?: string;
+    $css?: string;
     theme: ThemeType;
 };
 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;

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

@@ -2,14 +2,12 @@ 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;
 }>> & string;
-type StyledButtonProps = {
-    isIconButton: boolean;
-    appearance?: ButtonAppearanceType;
-    full?: boolean;
+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>, {
     theme: ThemeType;
     href?: string;
-    size?: "m" | "l";
-    css?: string;
-};
-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 {};
+    $isIconButton: boolean;
+    $appearance?: ButtonAppearanceType;
+    $full?: boolean;
+    $size?: "m" | "l";
+    $css?: string;
+}>> & string;

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

@@ -1,12 +1,11 @@
 import React, { type ButtonHTMLAttributes } from "react";
-type DotProps = {
+export declare const CarouselLeftButton: (props: ButtonHTMLAttributes<HTMLElement>) => React.JSX.Element;
+export declare const CarouselRightButton: (props: ButtonHTMLAttributes<HTMLElement>) => React.JSX.Element;
+export declare const Dots: ({ count, currentPosition, scrollToPosition, next, previous, }: {
     count: number;
     currentPosition: number;
     scrollToPosition: (to: number) => void;
     next: () => void;
     previous: () => void;
-};
-export declare const CarouselLeftButton: (props: ButtonHTMLAttributes<HTMLElement>) => React.JSX.Element;
-export declare const CarouselRightButton: (props: ButtonHTMLAttributes<HTMLElement>) => React.JSX.Element;
-export declare const Dots: ({ count, currentPosition, scrollToPosition, next, previous, }: DotProps) => React.JSX.Element;
+}) => React.JSX.Element;
 export default Dots;

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

@@ -1,35 +1,30 @@
-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;
-};
-type CarouselScrollAreaProps = {
-    smoothScrolling: boolean;
-};
-type CarouselCardProps = {
-    onlyChild: boolean;
-    fullWidthChild: boolean;
-};
-type CarouselCardInnerProps = {
-    isSelected: boolean;
-    shrinkUnselectedPages: boolean;
-    onlyChild: boolean;
-    fullWidthChild: boolean;
-};
-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 CarouselScrollArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
+    $smoothScrolling: boolean;
+}>> & 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>, {
+    $onlyChild: boolean;
+    $fullWidthChild: boolean;
+}>> & 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>, {
+    $isSelected: boolean;
+    $shrinkUnselectedPages: boolean;
+    $onlyChild: boolean;
+    $fullWidthChild: boolean;
+}>> & 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;
-};
-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;
+export declare const CarouselButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    disabled: boolean;
+    theme: ThemeType;
+}>> & string;
+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>, {
+    $count: number;
+    theme: ThemeType;
+}>> & string;
+export declare const Dot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $selected: boolean;
+    theme: ThemeType;
 }>> & 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/styles.d.ts

@@ -1,16 +1,17 @@
 import { type ThemeType } from "../../types";
-type StyledLabelProps = {
-    checked: boolean;
-    disabled: boolean;
-    hasError: boolean;
+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>, {
     theme: ThemeType;
-};
-type 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>, {
     theme: ThemeType;
-};
-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;
+}>> & 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>, {
+    $checked: boolean;
+    $disabled: boolean;
+    $hasError: boolean;
+    theme: ThemeType;
+}>> & 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 {};
+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>, {
+    theme: ThemeType;
+}>> & string;

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

@@ -2,18 +2,18 @@ import { type FontSizeType, type ThemeType } from "../../types";
 import IconFa from "../IconFa";
 export declare const transitionDurationSeconds = 0.5;
 export declare const FlippingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../IconFa").IconFaProps, {
-    open: boolean;
+    $open: boolean;
 }>> & string & Omit<typeof IconFa, keyof import("react").Component<any, {}, any>>;
 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;
 }, {
-    textColor?: string;
-    textSize?: FontSizeType;
-    textFontFamily?: string;
     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>>;
 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;
+    $contentHeight: string;
+    $openStatus: boolean;
 }>> & string;
 export declare const CustomHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,14 +1,16 @@
 import { type ThemeType } from "../../types";
-type ThemeProps = {
-    theme: ThemeType;
-};
 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;
-}, ThemeProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLElement>>, 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>, ThemeProps>> & 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"> & ThemeProps, "ref"> & {
+}, {
+    theme: ThemeType;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLElement>>, 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"> & {
+    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;
-export {};

package/lib/components/Divider.d.ts

@@ -1,6 +1,5 @@
 import React, { type ReactNode } from "react";
-type DividerProps = {
+export declare const Divider: ({ children }: {
     children?: ReactNode;
-};
-export declare const Divider: ({ children }: DividerProps) => React.JSX.Element;
+}) => React.JSX.Element;
 export default Divider;

package/lib/components/Flex.d.ts

@@ -1,7 +1,8 @@
+import React from "react";
 import { type SpacingProps } from "./Spacing";
 import { type ThemeType } from "../types";
 type Props = SpacingProps & {
     theme: ThemeType;
 };
-export declare const Flex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>> & string;
+export declare function Flex(props: Props): React.JSX.Element;
 export default Flex;

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

@@ -1,36 +1,33 @@
 import { type ThemeType } from "../../types";
-type StyledHeaderProps = {
+export declare const StyledHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
     theme: ThemeType;
-    isSmall?: boolean;
-    isSticky?: boolean;
-    fullWidth?: boolean;
-};
-export declare const StyledHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, StyledHeaderProps>> & string;
-export declare const HeaderStickyPlaceHolder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledHeaderProps>> & string;
-type HeaderStickyProps = {
-    isSmall?: boolean;
-    isSticky?: boolean;
+}>> & string;
+export declare const HeaderStickyPlaceHolder: 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 HeaderStickyContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isSmall?: boolean;
+    $isSticky?: boolean;
     theme: ThemeType;
-};
-export declare const HeaderStickyContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HeaderStickyProps>> & string;
+}>> & string;
 export declare const HeaderMainContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    fullWidth?: boolean;
+    $fullWidth?: boolean;
     theme: ThemeType;
 }>> & string;
 export declare const Logo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
-type LogoWrapperProps = {
-    isSmall?: boolean;
-    isSticky?: boolean;
+export declare const LogoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isSmall?: boolean;
+    $isSticky?: boolean;
     theme: ThemeType;
-};
-export declare const LogoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LogoWrapperProps>> & string;
+}>> & string;
 export declare const StyledLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
-export declare const SkipToMain: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, StyledHeaderProps>> & string;
+export declare const SkipToMain: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
+    theme: ThemeType;
+}>> & string;
 export declare const Tagline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
-    isSmall?: boolean;
-    isSticky?: boolean;
+    $isSmall?: boolean;
+    $isSticky?: boolean;
     theme: ThemeType;
 }>> & string;
 export declare const ChildWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ChildInner: 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/Heading/index.d.ts

@@ -14,12 +14,12 @@ export type HeadingProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     textAlign?: "left" | "right" | "center";
     /** color of text */
     textColor?: string;
-    /** styled-component polymorphic feature so you take the styling of a header and cast the component to be a "span" for example */
-    as?: ElementType;
     /** word-break behavior */
     wordBreak?: WordBreakType;
     /** overflow-wrap behavior */
     overflowWrap?: OverflowWrapType;
+    /** styled-component polymorphic feature so you take the styling of a header and cast the component to be a "span" for example */
+    as?: ElementType;
 };
 /**
  *
@@ -28,5 +28,5 @@ Markup headings semantically using the appropriate <h#> level HTML element and
 use the corresponding heading class (h1, h2, h3, ....). Write all headings in sentence case. Heading differs from the Text component by using a different font-family and it changes the font size according to the screen width breakpoints.
  *
  */
-export declare function Heading({ h1, h2, h3, h4, h5, h6, ...props }: HeadingProps): React.JSX.Element;
+export declare function Heading({ textSize, textAlign, textColor, wordBreak, overflowWrap, h1, h2, h3, h4, h5, h6, ...props }: HeadingProps): React.JSX.Element;
 export default Heading;

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

@@ -1,12 +1,12 @@
-import { type SpacingProps } from "../Spacing";
-import { type ThemeType, type FontSizeType, type WordBreakType } from "../../types";
-type StyledHeadingProps = SpacingProps & {
+import { type SpacingPropsInternal } from "../Spacing";
+import { type ThemeType, type FontSizeType, type WordBreakType, type OverflowWrapType } from "../../types";
+type StyledHeadingProps = SpacingPropsInternal & {
     theme: ThemeType;
-    textSize?: FontSizeType;
-    textAlign?: "left" | "right" | "center";
-    textColor?: string;
-    wordBreak?: WordBreakType;
-    overflowWrap?: WordBreakType;
+    $textSize?: FontSizeType;
+    $textAlign?: "left" | "right" | "center";
+    $textColor?: string;
+    $wordBreak?: WordBreakType;
+    $overflowWrap?: OverflowWrapType;
 };
 export declare const H1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, StyledHeadingProps>> & string;
 export declare const H2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, StyledHeadingProps>> & string;

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

@@ -13,5 +13,5 @@ export type IconFaProps = {
  *
  * This is an svg icon wrapper where a font awesome icon definition can be passed in a long with colour and size
  * */
-export declare function IconFa({ faIcon, color, size, ...rest }: IconFaProps): React.JSX.Element;
+export declare function IconFa({ faIcon, color, size }: IconFaProps): React.JSX.Element;
 export default IconFa;

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

@@ -1,6 +1,6 @@
 import { type ThemeType } from "../../types";
 type LabelTextProp = {
-    hasHintText: boolean;
+    $hasHintText: boolean;
     theme: ThemeType;
 };
 export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {

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

@@ -1,11 +1,11 @@
 import { type ThemeType } from "../../types";
 type StyledFieldsetProps = {
-    hasError?: boolean;
+    $hasError?: boolean;
+    $hasHintText?: boolean;
     theme: ThemeType;
-    hasHintText?: boolean;
 };
 export declare const LegendSpan: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    hasHintText: boolean;
+    $hasHintText: boolean;
     theme: ThemeType;
 }>> & string;
 export declare const StyledFieldset: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, StyledFieldsetProps>> & string;

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

@@ -3,8 +3,8 @@ import { type TextProps } from "../Text";
 import { type ThemeType } from "../../types";
 type StyledLinkProps = AnchorHTMLAttributes<HTMLElement> & TextProps & {
     theme: ThemeType;
-    appearance?: "primary" | "secondary";
-    textHoverColor?: string;
+    $appearance?: "primary" | "secondary";
+    $textHoverColor?: string;
 };
 export declare const StyledLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<TextProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;

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

@@ -1,20 +1,19 @@
 import { type ThemeType } from "../../types";
-type ThemeProp = {
+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;
-};
-type ContentProps = {
-    backgroundColor?: string;
-    theme: ThemeType;
-    top: string;
-    width: string;
-    maxWidth: string;
-};
-export declare const Background: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThemeProp>> & string;
+}>> & string;
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Box").BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, ContentProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Box").BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+}, {
+    $backgroundColor?: string;
+    $top: string;
+    $width: string;
+    $maxWidth: string;
+    theme: ThemeType;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Box").BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
-}, ThemeProp>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
-export {};
+}, {
+    theme: ThemeType;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;

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

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

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

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