@cruk/cruk-react-components 0.1.5 → 1.0.1

package/lib/cjs/src/themes/su2c.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../node_modules/tslib/tslib.es6.js"),e=require("./cruk.js"),a=r.__assign(r.__assign({},e.default.utilities),{useBackgroundStyleLinks:!0}),t=r.__assign(r.__assign({},e.default.siteConfig),{logoSrc:"https://fundraise.cancerresearchuk.org/profiles/cruk_fundraising/themes/cruk_of_bootstrap/images/su2c-logo.png",footerCopyText:"Stand Up To Cancer and Stand Up To Cancer Brand Marks are registered trademarks of the Entertainment Industry Foundation. Cancer Research UK is a registered charity in England and Wales (1089464), Scotland(SC041666), the Isle of Man (1103) and Jersey (247). A company limited by guarantee. Registered company in England and Wales (4325234) and the Isle of Man (5713F). Registered address: 2 Redman Place, London, E20 1JQ. Donations will be made to Cancer Research UK in support of the Stand Up To Cancer campaign."}),o=r.__assign(r.__assign({},e.default.avatar),{path:"https://fundraise.cancerresearchuk.org/profiles/cruk_fundraising/themes/cruk_of_bootstrap/images/icon-avatars/su2c/"}),s=r.__assign(r.__assign({},e.default.button),{borderRadius:"1.5rem",borderRadiusLarge:"2rem",textTransform:"uppercase"}),n=r.__assign({},e.default.breakpoint),u=r.__assign(r.__assign({},e.default.tokenColors),{su2cOrange5:"#FF8E00",su2cOrange3:"#FFB04D",su2cOrange2:"#FFDAAD",su2cOrange1:"#FFF6EB",su2cBlack:"#231F20",su2cGrey1:"#555759",su2cGrey2:"#A5A5A9",su2cRed:"#EF4135",su2cYellow:"#FFC325"}),i=r.__assign(r.__assign({},e.default.colors),{primary:u.su2cOrange5,secondary:u.su2cOrange5,tertiary:u.su2cBlack,textOnPrimary:u.su2cBlack,progressBar:u.su2cOrange5,circularProgress:u.su2cOrange3,linkColor:u.su2cOrange5,linkColorHover:u.su2cRed,backgroundLightColor:u.su2cOrange2,loaderColor1:u.su2cOrange5,loaderColor2:u.su2cRed,loaderColor3:u.su2cBlack,paginationBackground:u.su2cBlack,buttonPrimaryBackground:u.su2cOrange5,buttonPrimaryText:u.su2cBlack,buttonPrimaryBorder:u.su2cOrange5,buttonPrimaryBackgroundHover:u.su2cOrange3,buttonPrimaryTextHover:u.su2cBlack,buttonPrimaryBorderHover:u.su2cOrange3,buttonPrimaryDisabledBackground:u.grey_300,buttonPrimaryDisabledText:u.white,buttonPrimaryDisabledBorder:u.grey_300,buttonSecondaryBackground:u.white,buttonSecondaryText:u.su2cOrange5,buttonSecondaryBorder:u.su2cOrange5,buttonSecondaryBackgroundHover:u.su2cOrange1,buttonSecondaryTextHover:u.su2cOrange5,buttonSecondaryBorderHover:u.su2cOrange5,buttonSecondaryDisabledBackground:u.white,buttonSecondaryDisabledText:u.grey_300,buttonSecondaryDisabledBorder:u.grey_300,buttonTertiaryBackground:u.white,buttonTertiaryText:u.su2cOrange5,buttonTertiaryBorder:u.su2cGrey2,buttonTertiaryBackgroundHover:u.su2cOrange1,buttonTertiaryTextHover:u.su2cOrange5,buttonTertiaryBorderHover:u.su2cGrey2,buttonTertiaryDisabledBackground:u.white,buttonTertiaryDisabledText:u.grey_300,buttonTertiaryDisabledBorder:u.grey_300}),c=r.__assign({},e.default.spacing),d=r.__assign({},e.default.fontSizes),g=r.__assign(r.__assign({},e.default.typography),{customFonts:[{family:"itc_avant_garde_pro_mdbold",url:"https://crukorg.github.io/SU2C-drupal/assets/fonts/su2c/itc_-_itcavantgardepro-bold-webfont"}],fontFamilyHeadings:"itc_avant_garde_pro_mdbold,Arial,sans-serif",linkTextDecoration:"none",headerLineHeight:"1.5em",headerTextTransform:"uppercase"}),l={name:"su2c",avatar:o,breakpoint:n,button:s,tokenColors:u,colors:i,spacing:c,fontSizes:d,siteConfig:t,typography:g,utilities:a};exports.AVATAR=o,exports.BREAKPOINT=n,exports.BUTTON=s,exports.COLORS=i,exports.FONT_SIZES=d,exports.SITE_CONFIG=t,exports.SPACING=c,exports.TOKEN_COLORS=u,exports.TYPOGRAPHY=g,exports.UTILITIES=a,exports.default=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("./cruk.js"),a=e.__assign(e.__assign({},r.default.utilities),{useBackgroundStyleLinks:!0}),t=e.__assign(e.__assign({},r.default.siteConfig),{logoSrc:"https://fundraise.cancerresearchuk.org/profiles/cruk_fundraising/themes/cruk_of_bootstrap/images/su2c-logo.png",footerCopyText:"Stand Up To Cancer and Stand Up To Cancer Brand Marks are registered trademarks of the Entertainment Industry Foundation. Cancer Research UK is a registered charity in England and Wales (1089464), Scotland(SC041666), the Isle of Man (1103) and Jersey (247). A company limited by guarantee. Registered company in England and Wales (4325234) and the Isle of Man (5713F). Registered address: 2 Redman Place, London, E20 1JQ. Donations will be made to Cancer Research UK in support of the Stand Up To Cancer campaign."}),s=e.__assign(e.__assign({},r.default.avatar),{path:"https://fundraise.cancerresearchuk.org/profiles/cruk_fundraising/themes/cruk_of_bootstrap/images/icon-avatars/su2c/"}),o=e.__assign(e.__assign({},r.default.button),{borderRadius:"1.5rem",borderRadiusLarge:"2rem",textTransform:"uppercase"}),n=e.__assign({},r.default.breakpoint),i=e.__assign(e.__assign({},r.default.tokenColors),{su2cOrange5:"#FF8E00",su2cOrange3:"#FFB04D",su2cOrange2:"#FFDAAD",su2cOrange1:"#FFF6EB",su2cBlack:"#231F20",su2cGrey1:"#555759",su2cGrey2:"#A5A5A9",su2cRed:"#EF4135",su2cYellow:"#FFC325"}),u=e.__assign(e.__assign({},r.default.colors),{primary:i.su2cOrange5,secondary:i.su2cOrange5,tertiary:i.su2cBlack,textOnPrimary:i.su2cBlack,progressBar:i.su2cOrange5,circularProgress:i.su2cOrange3,linkColor:i.su2cOrange5,linkColorHover:i.su2cRed,backgroundLightColor:i.su2cOrange2,loaderColor1:i.su2cOrange5,loaderColor2:i.su2cRed,loaderColor3:i.su2cBlack,paginationText:i.su2cBlack,paginationBackground:i.su2cBlack,totaliserBubbleColor:i.su2cBlack,totaliserBubbleTextColor:i.white,totaliserBubbleTotalColor:i.white,buttonPrimaryBackground:i.su2cOrange5,buttonPrimaryText:i.su2cBlack,buttonPrimaryBorder:i.su2cOrange5,buttonPrimaryBackgroundHover:i.su2cOrange3,buttonPrimaryTextHover:i.su2cBlack,buttonPrimaryBorderHover:i.su2cOrange3,buttonPrimaryDisabledBackground:i.grey_300,buttonPrimaryDisabledText:i.white,buttonPrimaryDisabledBorder:i.grey_300,buttonSecondaryBackground:i.white,buttonSecondaryText:i.su2cOrange5,buttonSecondaryBorder:i.su2cOrange5,buttonSecondaryBackgroundHover:i.su2cOrange1,buttonSecondaryTextHover:i.su2cOrange5,buttonSecondaryBorderHover:i.su2cOrange5,buttonSecondaryDisabledBackground:i.white,buttonSecondaryDisabledText:i.grey_300,buttonSecondaryDisabledBorder:i.grey_300,buttonTertiaryText:i.su2cOrange5,buttonTertiaryTextHover:i.su2cOrange5,buttonTertiaryDisabledText:i.grey_300}),c=e.__assign({},r.default.spacing),d=e.__assign({},r.default.fontSizes),g=e.__assign(e.__assign({},r.default.typography),{customFonts:[{family:"itc_avant_garde_pro_mdbold",url:"https://crukorg.github.io/SU2C-drupal/assets/fonts/su2c/itc_-_itcavantgardepro-bold-webfont"}],fontFamilyHeadings:"itc_avant_garde_pro_mdbold,Arial,sans-serif",linkTextDecoration:"none",headerLineHeight:"1.5em",headerTextTransform:"uppercase"}),l={name:"su2c",avatar:s,breakpoint:n,button:o,tokenColors:i,colors:u,spacing:c,fontSizes:d,siteConfig:t,typography:g,utilities:a};exports.AVATAR=s,exports.BREAKPOINT=n,exports.BUTTON=o,exports.COLORS=u,exports.FONT_SIZES=d,exports.SITE_CONFIG=t,exports.SPACING=c,exports.TOKEN_COLORS=i,exports.TYPOGRAPHY=g,exports.UTILITIES=a,exports.default=l;
 //# sourceMappingURL=su2c.js.map

package/lib/cjs/src/utils/Helper.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e="undefined"!=typeof window,r=function(e){if(!e)return"";var r=e.toString().split(".");return r[0].replace(/\B(?=(\d{3})+(?!\d))/g,",")+(r[1]?"."+r[1]:"")};exports.calculatePercentRounded=function(e,r){var t=e/r*100;return t===Number.POSITIVE_INFINITY||Number.isNaN(t)?0:Math.floor(t<1?Math.ceil(t):Math.floor(t))},exports.formatMoneyWithCommas=function(e){var t=Number.parseFloat((Math.round(100*e)/100).toString()).toFixed(2);return Number.isNaN(parseFloat(t))||isNaN(e)?"0":r(t)},exports.isBrowser=e,exports.numberWithCommas=r;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e="undefined"!=typeof window,r=function(e){if(!e)return"";var r=e.toString().split(".");return"".concat(r[0].replace(/\B(?=(\d{3})+(?!\d))/g,",")).concat(r[1]?".".concat(r[1]):"")};exports.calculatePercentRounded=function(e,r){var t=e/r*100;return t===Number.POSITIVE_INFINITY||Number.isNaN(t)?0:Math.floor(t<1?Math.ceil(t):Math.floor(t))},exports.formatMoneyWithCommas=function(e){var t=Number.parseFloat((Math.round(100*e)/100).toString()).toFixed(2);return Number.isNaN(parseFloat(t))||Number.isNaN(e)?"0":r(t)},exports.isBrowser=e,exports.numberWithCommas=r;
 //# sourceMappingURL=Helper.js.map

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { AddressLookupProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { AddressLookupProps } from ".";
 declare const _default: Meta<AddressLookupProps>;
 export default _default;
 export declare const AddressLookUp: Story<AddressLookupProps>;

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

@@ -1,5 +1,5 @@
-import { FunctionComponent, InputHTMLAttributes, Ref, FocusEvent } from 'react';
-import { AddressDataType } from 'src/types';
+import { FunctionComponent, InputHTMLAttributes, Ref, FocusEvent } from "react";
+import { AddressDataType } from "../../types";
 export declare type AddressLookupProps = InputHTMLAttributes<HTMLInputElement> & {
     /** api key for loqate */
     apiKey: string;
@@ -17,7 +17,7 @@ export declare type AddressLookupProps = InputHTMLAttributes<HTMLInputElement> &
     isValidVisible?: boolean;
     /** flag to hide or show the cross icon when invalid */
     isInvalidVisible?: boolean;
-    /** label text*/
+    /** label text */
     label?: string;
     /** callback function which is passed the error */
     onAddressError?: (error: Error) => void;

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

@@ -4,11 +4,11 @@ interface ListWrapperProps extends React.HTMLProps<HTMLDivElement> {
 }
 export declare const ListWrapper: import("styled-components").StyledComponent<"div", any, ListWrapperProps, never>;
 export declare const List: import("styled-components").StyledComponent<"ul", any, {
-    ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
+    ref?: import("react").Ref<HTMLUListElement> | undefined;
 }, never>;
 export declare const ListItem: import("styled-components").StyledComponent<"li", any, {
     isActive: boolean;
-    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+    ref?: import("react").Ref<HTMLLIElement> | undefined;
 }, never>;
 export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { AvatarProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { AvatarProps } from ".";
 declare const _default: Meta<AvatarProps>;
 export default _default;
 export declare const Default: Story;

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

@@ -1,11 +1,11 @@
-import { FC, ReactNode, ImgHTMLAttributes } from 'react';
+import { FC, ImgHTMLAttributes } from "react";
 export declare type AvatarProps = ImgHTMLAttributes<HTMLElement> & {
     /** name of user/entity */
-    name?: ReactNode;
+    name?: string;
     /** image url */
     url?: string;
     /** image size */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: "s" | "m" | "l" | "xl";
 };
 /**
  *

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

@@ -1,5 +1,7 @@
+import { ThemeType } from "../../types";
 declare type AvatarStyledProps = {
     size?: string;
+    theme: ThemeType;
 };
 export declare const StyledAvatar: import("styled-components").StyledComponent<"img", any, AvatarStyledProps, never>;
-export {};
+export default StyledAvatar;

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { BadgeProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { BadgeProps } from ".";
 declare const _default: Meta<BadgeProps>;
 export default _default;
 export declare const BadgeWithText: Story;

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

@@ -1,5 +1,5 @@
-import { FunctionComponent, ReactNode } from 'react';
-import { SpaceType } from 'src/types';
+import { FunctionComponent, ReactNode } from "react";
+import { SpaceType } from "../../types";
 export declare type BadgeProps = {
     /** background colour of badge */
     backgroundColor?: string;

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

@@ -1,4 +1,4 @@
-import { SpaceType, ThemeType } from 'src/types';
+import { SpaceType, ThemeType } from "../../types";
 declare type StyleBadgeProps = {
     backgroundColor?: string;
     borderColor?: string;
@@ -8,4 +8,4 @@ declare type StyleBadgeProps = {
     theme: ThemeType;
 };
 export declare const StyledBadge: import("styled-components").StyledComponent<"span", any, StyleBadgeProps, never>;
-export {};
+export default StyledBadge;

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { BoxProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { BoxProps } from ".";
 declare const _default: Meta<BoxProps>;
 export default _default;
 export declare const Default: Story;

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

@@ -1,9 +1,9 @@
-import { FunctionComponent, HTMLAttributes, Ref } from 'react';
-import { SpacingProps } from 'src/components/Spacing';
+import { FunctionComponent, HTMLAttributes, Ref } from "react";
+import { SpacingProps } from "../Spacing";
 export declare type BoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     /** background color of box, this will add default padding */
     backgroundColor?: string;
-    css?: any;
+    css?: string;
     ref?: Ref<HTMLDivElement>;
 };
 /**

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

@@ -1,7 +1,8 @@
-import { SpacingProps } from 'src/components/Spacing';
-declare type StyledBoxProps = SpacingProps & {
-    backgroundColor?: string;
-    css?: any;
-};
-export declare const StyledBox: import("styled-components").StyledComponent<"div", any, StyledBoxProps, never>;
-export {};
+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;
+    theme: ThemeType;
+}, never>;
+export default StyledBox;

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { Props } from './';
+import { Story, Meta } from "@storybook/react";
+import { Props } from ".";
 declare const _default: Meta<Props>;
 export default _default;
 export declare const Primary: Story;

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

@@ -1,5 +1,5 @@
-import { FunctionComponent, ButtonHTMLAttributes, Ref } from 'react';
-import { ButtonAppearanceType } from 'src/types';
+import { FunctionComponent, ButtonHTMLAttributes, Ref } from "react";
+import { ButtonAppearanceType } from "../../types";
 export declare type Props = ButtonHTMLAttributes<HTMLElement> & {
     /** the look and feel of the button */
     appearance?: ButtonAppearanceType;
@@ -8,10 +8,12 @@ export declare type Props = ButtonHTMLAttributes<HTMLElement> & {
     /** 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';
+    size?: "m" | "l";
     css?: any;
     /** styled-components polymorphism where you can use the styling of a button but convert to another element like an anchor tag */
     as?: any;
+    /** flag to force button into an icon button shape which is square or round */
+    isIconButton?: boolean;
     ref?: Ref<HTMLElement>;
 };
 /**

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

@@ -1,4 +1,4 @@
-import { ThemeType, ButtonAppearanceType } from 'src/types';
+import { ThemeType, ButtonAppearanceType } from "../../types";
 export declare const Spacer: import("styled-components").StyledComponent<"span", any, {}, never>;
 declare type StyledButtonProps = {
     isIconButton: boolean;
@@ -6,8 +6,8 @@ declare type StyledButtonProps = {
     full?: boolean;
     theme: ThemeType;
     href?: string;
-    size?: 'm' | 'l';
-    css?: any;
+    size?: "m" | "l";
+    css?: string;
 };
 export declare const StyledButton: import("styled-components").StyledComponent<"button", any, StyledButtonProps, never>;
 export {};

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { CheckBoxProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { CheckBoxProps } from ".";
 declare const _default: Meta<CheckBoxProps>;
 export default _default;
 export declare const CheckboxDefault: Story;

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

@@ -1,4 +1,4 @@
-import { FC, InputHTMLAttributes, Ref } from 'react';
+import { FC, InputHTMLAttributes, Ref } from "react";
 export declare type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {
     ref?: Ref<HTMLInputElement>;
     /** flag for error styling */

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

@@ -1,7 +1,9 @@
+import { ThemeType } from "../../types";
 declare type StyledLabelProps = {
     checked: boolean;
     disabled: boolean;
     hasError: boolean;
+    theme: ThemeType;
 };
 export declare const CheckWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Check: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { CollapseProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { CollapseProps } from ".";
 declare const _default: Meta<CollapseProps>;
 export default _default;
 export declare const CollapseWithTextHeader: Story<CollapseProps>;

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

@@ -1,5 +1,5 @@
-import { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
-import { FontSizeType } from 'src/types';
+import { FunctionComponent, ReactNode, HTMLAttributes } from "react";
+import { FontSizeType } from "../../types";
 export declare type CollapseProps = HTMLAttributes<HTMLElement> & {
     /** id is required for a11y reasons as we use aria attributes which depends on an id  */
     id: string;

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
+import { FontSizeType } from "../../types";
 export declare const transitionDurationSeconds = 0.5;
 export declare const FlippingIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Icon").IconProps>, any, {
     open: boolean;
 }, never>;
 export declare const DefaultHeader: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").Props>, any, {
     textColor?: string | undefined;
-    textSize?: "s" | "xs" | "m" | "l" | "xl" | "xxl" | "xxxl" | "xxxxl" | undefined;
+    textSize?: FontSizeType | undefined;
     textFontFamily?: string | undefined;
 }, never>;
 export declare const CollapseContent: import("styled-components").StyledComponent<"div", any, {

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { DateFieldProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { DateFieldProps } from ".";
 declare const _default: Meta<DateFieldProps>;
 export default _default;
 export declare const DateFieldWithLabel: Story<DateFieldProps>;

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

@@ -1,6 +1,6 @@
-import { FC, InputHTMLAttributes } from 'react';
+import { FC, InputHTMLAttributes } from "react";
 export declare type DateFieldProps = InputHTMLAttributes<HTMLInputElement> & {
-    /**label text */
+    /** label text */
     label: string;
     /** hind text */
     hintText?: string;

package/lib/components/Divider.d.ts

@@ -1,3 +1,3 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent } from "react";
 export declare const Divider: FunctionComponent;
 export default Divider;

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { ErrorTextProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { ErrorTextProps } from ".";
 declare const _default: Meta<ErrorTextProps>;
 export default _default;
 export declare const ErrorTextDefault: Story;

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

@@ -1,7 +1,7 @@
-import { FC, HTMLAttributes } from 'react';
-import { SpacingProps } from 'src/components/Spacing';
+import React, { FunctionComponent, HTMLAttributes } from "react";
+import { SpacingProps } from "../Spacing";
 export declare type ErrorTextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
-    as?: any;
+    as?: React.ElementType;
 };
 /**
  *
@@ -9,5 +9,5 @@ export declare type ErrorTextProps = SpacingProps & HTMLAttributes<HTMLElement>
  *
  * Please be aware that some input components already have this component built in and can be passed an "errorMessage" prop
  */
-declare const ErrorText: FC<ErrorTextProps>;
+declare const ErrorText: FunctionComponent<ErrorTextProps>;
 export default ErrorText;

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

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare const StyledErrorText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Text").TextProps>, any, {}, never>;
+export default StyledErrorText;

package/lib/components/Flex.d.ts

@@ -1,6 +1,3 @@
-import { SpacingProps } from 'src/components/Spacing';
-declare type FlexProps = SpacingProps & {
-    css: string;
-};
-declare const Flex: import("styled-components").StyledComponent<"div", any, FlexProps, never>;
+import { SpacingProps } from "./Spacing";
+declare const Flex: import("styled-components").StyledComponent<"div", any, SpacingProps, never>;
 export default Flex;

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { FooterProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { FooterProps } from ".";
 declare const _default: Meta<FooterProps>;
 export default _default;
 export declare const FooterDefault: Story;

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode, HTMLAttributes } from 'react';
+import { FC, ReactNode, HTMLAttributes } from "react";
 export declare type FooterProps = HTMLAttributes<HTMLElement> & {
     /** used to customise text in middle section, it could also be react element, this is not to be confused with the component children which is primarily for the links in the footer */
     middleSection?: ReactNode;

package/lib/components/GlobalStyle.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<{}, never> & {
-    theme?: import("styled-components").DefaultTheme | undefined;
-} & {
+declare const _default: import("react").ForwardRefExoticComponent<{
+    ref?: import("react").Ref<import("react").Component<import("styled-components").ThemedGlobalStyledClassProps<{}, import("styled-components").DefaultTheme>, any, any>> | undefined;
     suppressMultiMountWarning?: boolean | undefined;
-} & import("react").RefAttributes<import("react").Component<import("styled-components").ThemedGlobalStyledClassProps<{}, import("styled-components").DefaultTheme>, any, any>>, "ref" | "suppressMultiMountWarning" | "key"> & {
+    key?: import("react").Key | null | undefined;
+} & {
     theme?: any;
 }>;
 export default _default;

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { HeaderProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { HeaderProps } from ".";
 declare const _default: Meta<HeaderProps>;
 export default _default;
 export declare const HeaderDefault: Story<HeaderProps>;

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, HTMLAttributes } from 'react';
+import { FunctionComponent, HTMLAttributes } from "react";
 export declare type HeaderProps = HTMLAttributes<HTMLElement> & {
     /** flag which make header fixed to the top even when scrolling */
     isSticky?: boolean;
@@ -12,7 +12,7 @@ export declare type HeaderProps = HTMLAttributes<HTMLElement> & {
     logoLinkTitle?: string;
     /** the url of the logo link */
     logoLinkUrl?: string;
-    /** instead of the contents of the header being centered to max width as defined in theme it is 100% width fo viewport*/
+    /** instead of the contents of the header being centered to max width as defined in theme it is 100% width fo viewport */
     fullWidth?: boolean;
 };
 /**

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { HeadingProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { HeadingProps } from ".";
 declare const _default: Meta<HeadingProps>;
 export default _default;
 export declare const DefaultHeading: Story;

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

@@ -1,6 +1,6 @@
-import { FunctionComponent, HTMLAttributes } from 'react';
-import { SpacingProps } from 'src/components/Spacing';
-import { FontSizeType, WordBreakType } from 'src/types';
+import { FunctionComponent, HTMLAttributes } from "react";
+import { SpacingProps } from "../Spacing";
+import { FontSizeType, WordBreakType } from "../../types";
 export declare type HeadingProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     h1?: boolean;
     h2?: boolean;
@@ -9,7 +9,7 @@ export declare type HeadingProps = SpacingProps & HTMLAttributes<HTMLElement> &
     h5?: boolean;
     h6?: boolean;
     textSize?: FontSizeType;
-    textAlign?: 'left' | 'right' | 'center';
+    textAlign?: "left" | "right" | "center";
     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?: any;

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

@@ -1,16 +1,44 @@
-import { SpacingProps } from 'src/components/Spacing';
-import { ThemeType, FontSizeType, ColorKeyType, WordBreakType } from 'src/types';
-declare type StyledHeadingProps = SpacingProps & {
+import { SpacingProps } from "../Spacing";
+import { ThemeType, FontSizeType, WordBreakType } from "../../types";
+export declare const H1: import("styled-components").StyledComponent<"h1", any, SpacingProps & {
     theme: ThemeType;
-    textSize?: FontSizeType;
-    textAlign?: 'left' | 'right' | 'center';
-    textColor?: ColorKeyType | string;
-    wordBreak?: WordBreakType;
-};
-export declare const H1: import("styled-components").StyledComponent<"h1", any, StyledHeadingProps, never>;
-export declare const H2: import("styled-components").StyledComponent<"h2", any, StyledHeadingProps, never>;
-export declare const H3: import("styled-components").StyledComponent<"h3", any, StyledHeadingProps, never>;
-export declare const H4: import("styled-components").StyledComponent<"h4", any, StyledHeadingProps, never>;
-export declare const H5: import("styled-components").StyledComponent<"h5", any, StyledHeadingProps, never>;
-export declare const H6: import("styled-components").StyledComponent<"h6", any, StyledHeadingProps, never>;
-export {};
+    textSize?: FontSizeType | undefined;
+    textAlign?: "left" | "right" | "center" | undefined;
+    textColor?: string | undefined;
+    wordBreak?: WordBreakType | undefined;
+}, never>;
+export declare const H2: import("styled-components").StyledComponent<"h2", any, SpacingProps & {
+    theme: ThemeType;
+    textSize?: FontSizeType | undefined;
+    textAlign?: "left" | "right" | "center" | undefined;
+    textColor?: string | undefined;
+    wordBreak?: WordBreakType | undefined;
+}, never>;
+export declare const H3: import("styled-components").StyledComponent<"h3", any, SpacingProps & {
+    theme: ThemeType;
+    textSize?: FontSizeType | undefined;
+    textAlign?: "left" | "right" | "center" | undefined;
+    textColor?: string | undefined;
+    wordBreak?: WordBreakType | undefined;
+}, never>;
+export declare const H4: import("styled-components").StyledComponent<"h4", any, SpacingProps & {
+    theme: ThemeType;
+    textSize?: FontSizeType | undefined;
+    textAlign?: "left" | "right" | "center" | undefined;
+    textColor?: string | undefined;
+    wordBreak?: WordBreakType | undefined;
+}, never>;
+export declare const H5: import("styled-components").StyledComponent<"h5", any, SpacingProps & {
+    theme: ThemeType;
+    textSize?: FontSizeType | undefined;
+    textAlign?: "left" | "right" | "center" | undefined;
+    textColor?: string | undefined;
+    wordBreak?: WordBreakType | undefined;
+}, never>;
+export declare const H6: import("styled-components").StyledComponent<"h6", any, SpacingProps & {
+    theme: ThemeType;
+    textSize?: FontSizeType | undefined;
+    textAlign?: "left" | "right" | "center" | undefined;
+    textColor?: string | undefined;
+    wordBreak?: WordBreakType | undefined;
+}, never>;

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { IconProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { IconProps } from ".";
 declare const _default: Meta<IconProps>;
 export default _default;
 export declare const IconDefault: Story<IconProps>;

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

@@ -1,5 +1,5 @@
-import { FunctionComponent } from 'react';
-import { ICONS } from './iconList';
+import { FunctionComponent } from "react";
+import { ICONS } from "./iconList";
 export declare const ICON_NAMES: {
     [key: string]: string;
 };

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

@@ -2,3 +2,4 @@ export declare const StyledIcon: import("styled-components").StyledComponent<"sv
     color?: string | undefined;
     size?: string | undefined;
 }, never>;
+export default StyledIcon;

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode } from "react";
 declare type LabelWrapperProps = {
     /** label text */
     label: string;

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

@@ -1,4 +1,4 @@
-import { ThemeType } from 'src/types';
+import { ThemeType } from "../../types";
 export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
 export declare const LabelText: import("styled-components").StyledComponent<"span", any, {
     hasHintText: boolean;

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { LegendWrapperProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { LegendWrapperProps } from ".";
 declare const _default: Meta<LegendWrapperProps>;
 export default _default;
 export declare const LegendWrapperDefault: Story<LegendWrapperProps>;

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode } from "react";
 export declare type LegendWrapperProps = {
     children?: ReactNode;
     /** legend text */

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

@@ -1,8 +1,8 @@
-import { ThemeType } from 'src/types';
+import { ThemeType } from "../../types";
 declare type StyledFieldsetProps = {
-    hasError: boolean;
+    hasError?: boolean;
     theme: ThemeType;
-    hasHintText: boolean;
+    hasHintText?: boolean;
 };
 export declare const LegendSpan: import("styled-components").StyledComponent<"span", any, {
     hasHintText: boolean;

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { LinkProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { LinkProps } from ".";
 declare const _default: Meta<LinkProps>;
 export default _default;
 export declare const Default: Story<LinkProps>;

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

@@ -1,14 +1,14 @@
-import { FC, AnchorHTMLAttributes, Ref } from 'react';
-import { TextProps } from 'src/components/Text';
+import { FC, AnchorHTMLAttributes, Ref } from "react";
+import { TextProps } from "../Text";
 export declare type LinkProps = AnchorHTMLAttributes<HTMLElement> & TextProps & {
     /** link text hover colour */
     textHoverColor?: string;
     /** link appearance varient, undefined is a standarding link withing a text block */
-    appearance?: 'primary' | 'secondary';
+    appearance?: "primary" | "secondary";
     /** styled-components polymorphism where you can use the styling of a link but convert to another element like a button */
     ref?: Ref<HTMLElement>;
 };
-/**Links are for wrapping plain text or elements to create clickable link.
+/** Links are for wrapping plain text or elements to create clickable link.
  * This is to be treated as an anchor tag with the addition of the Text component API.
  * This component contains standard Anchor tag props like 'href' and 'target', but it also contains Text component props like 'textColor' and 'textAlign'.
  *