@cruk/cruk-react-components 1.1.6 → 1.1.7

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.7] - 2022-08-19
+
+### Changed
+
+Adding react and react-dom 18 as peer dependency option and removeing a types that use FC or FunctionComponent [#540](https://github.com/CRUKorg/cruk-react-components/issues/#540))
+
 ## [1.1.6] - 2022-08-15
 
 ### Fixed

package/lib/cjs/src/components/Carousel/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../../node_modules/react-intersection-observer/react-intersection-observer.modern.mjs.js"),r=require("../Box/index.js"),n=require("./Dots.js"),l=require("./styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(e),a=function(o){var a=o.startPosition,s=void 0===a?0:a,i=o.children,c=o.onPositionChanged,d=o.shrinkUnselectedPages,f=void 0!==d&&d,h=e.useState(s),m=h[0],v=h[1],C=e.useState(!0),E=C[0],g=C[1],p=e.useRef(null),j=u.default.Children.toArray(i).filter(Boolean),x=function(e){if(p&&p.current){var t=p.current.scrollWidth,r=0===e,n=e===p.current.children.length-1,l=p.current.children[e];if(!l)return;var o=l.offsetLeft;r?p.current.scrollTo(0,0):n?p.current.scrollTo(t,0):p.current.scrollTo(o,0),E||g(!0)}};e.useEffect((function(){0!==s&&g(!1)}),[s]),e.useEffect((function(){!1===E&&x(s)}),[E]);var y=1===j.length;return u.default.createElement(u.default.Fragment,null,u.default.createElement(r.default,null,u.default.createElement(l.CarouselWrapper,null,u.default.createElement(l.CarouselScrollArea,{ref:p,"aria-live":"assertive",smoothScrolling:E,tabIndex:0},j.map((function(e,r){var n=r===m;return u.default.createElement(l.CarouselCard,{key:r,onlyChild:y},u.default.createElement(t.InView,{threshold:.5,as:"div",onChange:function(e){var t;e&&m!==(t=r)&&(v(t),c&&c(t))}},u.default.createElement(l.CarouselCardInner,{onlyChild:y,isSelected:n,shrinkUnselectedPages:f},e)))}))))),j.length>1?u.default.createElement(r.default,null,u.default.createElement(n.Dots,{count:j.length,currentPosition:m,scrollToPosition:x,next:function(){x(m+1)},previous:function(){x(m-1)}})):null)},s=e.memo(a);exports.Carousel=a,exports.default=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../../node_modules/react-intersection-observer/react-intersection-observer.modern.mjs.js"),r=require("../Box/index.js"),n=require("./Dots.js"),l=require("./styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(e),u=function(o){var u=o.startPosition,s=void 0===u?0:u,c=o.children,i=o.onPositionChanged,d=o.shrinkUnselectedPages,f=void 0!==d&&d,h=e.useState(s),m=h[0],v=h[1],C=e.useState(!0),E=C[0],g=C[1],p=e.useRef(null),j=a.default.Children.toArray(c).filter(Boolean),x=function(e){if(p&&p.current){var t=p.current.scrollWidth,r=0===e,n=e===p.current.children.length-1,l=p.current.children[e];if(!l)return;var o=l.offsetLeft;r?p.current.scrollTo(0,0):n?p.current.scrollTo(t,0):p.current.scrollTo(o,0),E||g(!0)}};e.useEffect((function(){0!==s&&g(!1)}),[s]),e.useEffect((function(){!1===E&&x(s)}),[E]);var y=1===j.length;return a.default.createElement(a.default.Fragment,null,a.default.createElement(r.default,null,a.default.createElement(l.CarouselWrapper,null,a.default.createElement(l.CarouselScrollArea,{ref:p,"aria-live":"assertive",smoothScrolling:E,tabIndex:0},j.map((function(e,r){var n=r===m;return a.default.createElement(l.CarouselCard,{key:"card".concat(r),onlyChild:y},a.default.createElement(t.InView,{threshold:.5,as:"div",onChange:function(e){var t;e&&m!==(t=r)&&(v(t),i&&i(t))}},a.default.createElement(l.CarouselCardInner,{onlyChild:y,isSelected:n,shrinkUnselectedPages:f},e)))}))))),j.length>1?a.default.createElement(r.default,null,a.default.createElement(n.Dots,{count:j.length,currentPosition:m,scrollToPosition:x,next:function(){x(m+1)},previous:function(){x(m-1)}})):null)},s=e.memo(u);exports.Carousel=u,exports.default=s;
 //# sourceMappingURL=index.js.map

package/lib/cjs/src/components/Footer/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/tslib/tslib.es6.js"),t=require("react"),l=require("styled-components"),r=require("../../themes/cruk.js"),n=require("../Text/index.js"),a=require("./styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(t),d=function(t){var o=t.children,d=t.middleSection,s=u.default.Children.toArray(o),i=l.useTheme(),f=e.__assign(e.__assign({},r.default),i);return u.default.createElement(l.ThemeProvider,{theme:f},u.default.createElement(a.StyledFooter,null,u.default.createElement(a.FooterContentWrapper,null,u.default.createElement(a.FooterSectionLogo,null,u.default.createElement(a.StyledRegulatorLogo,{alt:f.siteConfig.footerLogoAlt||"",src:f.siteConfig.footerLogoSrc||""})),u.default.createElement(a.FooterSectionLinks,null,u.default.createElement(a.StyledNav,{"aria-label":"footer links"},u.default.createElement(a.StyledUL,null,s.length?s.map((function(e,t){return u.default.createElement(a.StyledLI,{key:t},e)})):null))),u.default.createElement(a.FooterSection,null,d?"string"==typeof d?u.default.createElement(n.Text,{textSize:"s"},d):u.default.createElement(u.default.Fragment,null,d):u.default.createElement(n.Text,{textSize:"s"},f.siteConfig.footerCopyText)),u.default.createElement(a.FooterSectionAddress,null,u.default.createElement(a.StyledAddress,null,u.default.createElement(n.Text,{as:"span",textSize:"s"},"2 Redman Place"),u.default.createElement(n.Text,{as:"span",textSize:"s"},"London"),u.default.createElement(n.Text,{as:"span",textSize:"s"},"E20 1JQ"))))))};exports.Footer=d,exports.default=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/tslib/tslib.es6.js"),t=require("react"),l=require("styled-components"),r=require("../../themes/cruk.js"),n=require("../Text/index.js"),a=require("./styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(t),d=function(t){var o=t.children,d=t.middleSection,s=u.default.Children.toArray(o),i=l.useTheme(),c=e.__assign(e.__assign({},r.default),i);return u.default.createElement(l.ThemeProvider,{theme:c},u.default.createElement(a.StyledFooter,null,u.default.createElement(a.FooterContentWrapper,null,u.default.createElement(a.FooterSectionLogo,null,u.default.createElement(a.StyledRegulatorLogo,{alt:c.siteConfig.footerLogoAlt||"",src:c.siteConfig.footerLogoSrc||""})),u.default.createElement(a.FooterSectionLinks,null,u.default.createElement(a.StyledNav,{"aria-label":"footer links"},u.default.createElement(a.StyledUL,null,s.length?s.map((function(e,t){return u.default.createElement(a.StyledLI,{key:"footerLink".concat(t)},e)})):null))),u.default.createElement(a.FooterSection,null,d?"string"==typeof d?u.default.createElement(n.Text,{textSize:"s"},d):u.default.createElement(u.default.Fragment,null,d):u.default.createElement(n.Text,{textSize:"s"},c.siteConfig.footerCopyText)),u.default.createElement(a.FooterSectionAddress,null,u.default.createElement(a.StyledAddress,null,u.default.createElement(n.Text,{as:"span",textSize:"s"},"2 Redman Place"),u.default.createElement(n.Text,{as:"span",textSize:"s"},"London"),u.default.createElement(n.Text,{as:"span",textSize:"s"},"E20 1JQ"))))))};exports.Footer=d,exports.default=d;
 //# sourceMappingURL=index.js.map

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

@@ -32,30 +32,5 @@ export declare 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<Pick<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;
-    /** 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;
-}, "apiKey" | "countries" | "errorMessage" | "hasError" | "isValid" | "isValidVisible" | "isInvalidVisible" | "label" | "onAddressError" | "onAddressSelected" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+declare const AddressLookup: React.ForwardRefExoticComponent<Pick<AddressLookupProps, "apiKey" | "countries" | "errorMessage" | "hasError" | "isValid" | "isValidVisible" | "isInvalidVisible" | "label" | "onAddressError" | "onAddressSelected" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export default AddressLookup;

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

@@ -24,23 +24,5 @@ export declare type Props = ButtonHTMLAttributes<HTMLElement> & {
  *
  * Design system documentation SU2C https://zeroheight.com/79db39f7e/p/22ff0e-button/b/32e1a2
  */
-export declare const Button: React.ForwardRefExoticComponent<Pick<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<any> | 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;
-}, keyof React.ButtonHTMLAttributes<HTMLElement> | "appearance" | "full" | "href" | "size" | "css" | "as" | "isIconButton"> & React.RefAttributes<HTMLElement>>;
+export declare const Button: React.ForwardRefExoticComponent<Pick<Props, keyof React.ButtonHTMLAttributes<HTMLElement> | "appearance" | "full" | "href" | "size" | "css" | "as" | "isIconButton"> & React.RefAttributes<HTMLElement>>;
 export default Button;

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

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

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

@@ -1,13 +1,18 @@
-import React, { FC } from "react";
+import React, { ReactNode } from "react";
 export declare type CarouselProps = {
+    /** Index in which the carousel is scrolled to on mount */
     startPosition?: number;
+    /** call back for on position changed first prop is the possition */
     onPositionChanged?: (position: number) => void;
+    /** show item left and right of current smaller than current item */
     shrinkUnselectedPages?: boolean;
+    /** childrent item of the carousel */
+    children?: ReactNode;
 };
 /**
  *
  * Light weight carousel component that works with mouse and touch events, will work with divs and much anything you chuck in children
  */
-export declare const Carousel: FC<CarouselProps>;
-declare const _default: React.MemoExoticComponent<React.FC<CarouselProps>>;
+export declare const Carousel: ({ startPosition, children, onPositionChanged, shrinkUnselectedPages, }: CarouselProps) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ startPosition, children, onPositionChanged, shrinkUnselectedPages, }: CarouselProps) => JSX.Element>;
 export default _default;

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

@@ -1,15 +1,16 @@
-import { FC, InputHTMLAttributes, Ref } from "react";
+import React, { InputHTMLAttributes, Ref, ReactNode } from "react";
 export declare type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {
     ref?: Ref<HTMLInputElement>;
     /** flag for error styling */
     hasError?: boolean;
     /** error message text  */
     errorMessage?: string;
+    children?: ReactNode;
 };
 /**
  * Checkboxes allow the user to select one or more items.
  *
  * 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: FC<CheckBoxProps>;
+declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckBoxProps, keyof React.InputHTMLAttributes<HTMLInputElement> | "hasError" | "errorMessage"> & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

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

@@ -4,17 +4,7 @@ export declare const transitionDurationSeconds = 0.5;
 export declare const FlippingIcon: import("styled-components").StyledComponent<({ faIcon, color, size, ...rest }: import("../IconFa").IconFaProps) => JSX.Element, any, {
     open: boolean;
 }, never>;
-export declare const DefaultHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").ButtonHTMLAttributes<HTMLElement> & {
-    appearance?: import("../../types").ButtonAppearanceType | undefined;
-    full?: boolean | undefined;
-    href?: string | undefined;
-    size?: "m" | "l" | undefined;
-    css?: any;
-    as?: import("react").ElementType<any> | undefined;
-    isIconButton?: boolean | undefined;
-    ref?: import("react").Ref<HTMLElement> | undefined;
-    children?: import("react").ReactNode;
-}, "size" | keyof import("react").ButtonHTMLAttributes<HTMLElement> | "appearance" | "full" | "href" | "css" | "as" | "isIconButton"> & import("react").RefAttributes<HTMLElement>>, any, {
+export declare const DefaultHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("../Button").Props, "size" | keyof import("react").ButtonHTMLAttributes<HTMLElement> | "appearance" | "full" | "href" | "css" | "as" | "isIconButton"> & import("react").RefAttributes<HTMLElement>>, any, {
     textColor?: string | undefined;
     textSize?: FontSizeType | undefined;
     textFontFamily?: string | undefined;

package/lib/components/Divider.d.ts

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

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

@@ -1,10 +1,11 @@
-import { FC, ReactNode, HTMLAttributes } from "react";
+import { 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;
+    children?: ReactNode;
 };
 /**
  * There should be only one footer component at the bottom of the body of each page. Links can be passed as children
  * */
-export declare const Footer: FC<FooterProps>;
+export declare const Footer: ({ children, middleSection }: FooterProps) => JSX.Element;
 export default Footer;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ICONS } from "./iconList";
 export declare const ICON_NAMES: {
     [key: string]: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 export declare type IconFaProps = {
     /** imported icon definition from "@fortawesome/free-solid-svg-icons" or "@fortawesome/free-brands-svg-icons" */

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

@@ -8,6 +8,7 @@ declare type LabelWrapperProps = {
     required?: boolean;
     /** flag to stop (required) appearing in label, useful for compound form components like DateInput */
     hideRequiredInLabel?: boolean;
+    children?: ReactNode;
 };
 export declare const LabelWrapper: FunctionComponent<LabelWrapperProps>;
 export default LabelWrapper;

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react";
+import { ReactNode } from "react";
 export declare type LegendWrapperProps = {
     children?: ReactNode;
     /** legend text */
@@ -18,5 +18,5 @@ export declare type LegendWrapperProps = {
  * hasError and errorMessage props are just props that can be passed into the component.
  * There is no functionality checking if the children are valid/required etc this functionality will be needed to ne added outside of this component.
  */
-export declare const LegendWrapper: FC<LegendWrapperProps>;
+export declare const LegendWrapper: ({ children, legendText, required, errorMessage, hasError, hintText, }: LegendWrapperProps) => JSX.Element;
 export default LegendWrapper;

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

@@ -22,25 +22,5 @@ export declare type LinkProps = AnchorHTMLAttributes<HTMLElement> & TextProps &
  * If you want something that looks like a link but behaves like a button ie. nothing to do with navigation, please consider using Link with as='button'
  *
  * If you want something that looks like a button but behaves like a link ie. it takes the user to a new location, please consider using Button and simply passing it an href, it will automatically turn into a link. */
-export declare const Link: React.ForwardRefExoticComponent<Pick<React.AnchorHTMLAttributes<HTMLElement> & import("../Spacing").SpacingProps & React.HTMLAttributes<HTMLElement> & {
-    textColor?: string | undefined;
-    textAlign?: "left" | "right" | "center" | "justify" | undefined;
-    textSize?: import("..").FontSizeType | undefined;
-    textWeight?: number | undefined;
-    as?: any;
-    wordBreak?: import("..").WordBreakType | undefined;
-    overflowWrap?: import("..").OverflowWrapType | undefined;
-    ref?: React.Ref<HTMLElement> | undefined;
-} & {
-    /** link text hover colour */
-    textHoverColor?: string | undefined;
-    /** link appearance variant, undefined is a standarding link withing a text block */
-    appearance?: "primary" | "secondary" | undefined;
-    /** styled-components polymorphism where you can use the styling of a link but convert to another element like a button */
-    ref?: React.Ref<HTMLElement> | undefined;
-    /** styled-component polymorphic feature so you take the styling of a link and cast the component to be a "span" for example */
-    as?: React.ElementType<any> | undefined;
-    /** Component children */
-    children?: ReactNode;
-}, "slot" | "style" | "title" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginVertical" | "marginHorizontal" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingVertical" | "paddingHorizontal" | "textColor" | "textAlign" | "textSize" | "textWeight" | "as" | "wordBreak" | "overflowWrap" | "textHoverColor" | "appearance"> & React.RefAttributes<HTMLElement>>;
+export declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps, "slot" | "style" | "title" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginVertical" | "marginHorizontal" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingVertical" | "paddingHorizontal" | "textColor" | "textAlign" | "textSize" | "textWeight" | "as" | "wordBreak" | "overflowWrap" | "textHoverColor" | "appearance"> & React.RefAttributes<HTMLElement>>;
 export default Link;

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

@@ -1,7 +1,6 @@
-import { FC } from "react";
 /**
  *
  * Loaders are used after some user interaction that we assume will take some time to complete. They inform the user that their request is beeing processed and that they should wait.
  */
-declare const Loader: FC;
+declare const Loader: () => JSX.Element;
 export default Loader;

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

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { ReactNode } from "react";
 export declare type ModalProps = {
     /** modal name used for aria-label */
     modalName: string;
@@ -12,6 +12,8 @@ export declare type ModalProps = {
     top?: string;
     /** background color of dialogue */
     backgroundColor?: string;
+    /** children components  */
+    children?: ReactNode;
 };
 /**
  *
@@ -23,5 +25,5 @@ export declare type ModalProps = {
  * ## Accessibility
  * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.
  */
-declare const Modal: FC<ModalProps>;
+declare const Modal: ({ modalName, closeFunction, showCloseButton, maxWidth, top, backgroundColor, children, }: ModalProps) => JSX.Element;
 export default Modal;

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

@@ -5,14 +5,4 @@ export declare const Content: import("styled-components").StyledComponent<import
     maxWidth: string;
     top: string;
 }, never>;
-export declare const CloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").ButtonHTMLAttributes<HTMLElement> & {
-    appearance?: import("../../types").ButtonAppearanceType | undefined;
-    full?: boolean | undefined;
-    href?: string | undefined;
-    size?: "m" | "l" | undefined;
-    css?: any;
-    as?: import("react").ElementType<any> | undefined;
-    isIconButton?: boolean | undefined;
-    ref?: import("react").Ref<HTMLElement> | undefined;
-    children?: import("react").ReactNode;
-}, "css" | "as" | keyof import("react").ButtonHTMLAttributes<HTMLElement> | "appearance" | "full" | "href" | "size" | "isIconButton"> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("../Button").Props, "css" | "as" | keyof import("react").ButtonHTMLAttributes<HTMLElement> | "appearance" | "full" | "href" | "size" | "isIconButton"> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

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

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, ReactNode } from "react";
 export declare type PaginationProps = {
     /** set current page number */
     current: number;
@@ -12,6 +12,7 @@ export declare type PaginationProps = {
     perPage: number;
     /** the name of the search param in the url that is modified on page click, defaults to 'page' */
     searchParam?: string;
+    children?: ReactNode;
 };
 /**
  *

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react";
+import { ReactNode } from "react";
 import { PopOverPositionType } from "../../types";
 export declare type PopOverProps = {
     /** used for aria-label of modal */
@@ -14,10 +14,11 @@ export declare type PopOverProps = {
     minWidth?: string;
     /**  popover isOpen changed handler */
     onPopOverIsOpenChange?: (isOpen: boolean) => void;
+    children?: ReactNode;
 };
 /**
  * Popover is a non-modal dialog that floats around its disclosure. It's
 commonly used for displaying additional rich content on top of something.
 */
-declare const PopOver: FC<PopOverProps>;
+declare const PopOver: ({ onPopOverIsOpenChange, children, minWidth, maxWidth, position, modalLabel, modalContent, css, }: PopOverProps) => JSX.Element;
 export default PopOver;

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react";
+import { ReactNode } from "react";
 export declare type ProgressBarProps = {
     /** percentage value of the progressbar */
     percentage: number;
@@ -14,10 +14,11 @@ export declare type ProgressBarProps = {
     barColor?: string;
     /** foreground colour of chart secondary bar */
     secondaryBarColor?: string;
+    children?: ReactNode;
 };
 /**
  * Provide up-to-date feedback on the progress of a workflow or action with
 simple yet flexible progress bars.
 */
-declare const ProgressBar: FC<ProgressBarProps>;
+declare const ProgressBar: ({ percentage, isCircular, circleContents, circleSize, barColor, secondaryBarColor, secondaryPercentage, children, }: ProgressBarProps) => JSX.Element;
 export default ProgressBar;

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

@@ -1,15 +1,16 @@
-import { FC, InputHTMLAttributes, Ref } from "react";
+import React, { InputHTMLAttributes, Ref, ReactNode } from "react";
 export declare type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
     ref?: Ref<HTMLInputElement>;
     /** flag for error styling */
     hasError?: boolean;
     /** error message text  */
     errorMessage?: string;
+    children?: ReactNode;
 };
 /**
  * A single radio button which should be part of a field set of radio buttons
  *
  * The value or children becomes the label, if you want an outer label for a radio or group of radios please use a LegendWrapper component
  */
-declare const Radio: FC<RadioProps>;
+declare const Radio: React.ForwardRefExoticComponent<Pick<RadioProps, keyof React.InputHTMLAttributes<HTMLInputElement> | "hasError" | "errorMessage"> & React.RefAttributes<HTMLInputElement>>;
 export default Radio;

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

@@ -3,7 +3,7 @@ import { ThemeType } from "../../types";
 declare type ThemeProp = {
     theme: ThemeType;
 };
-export declare const StyledRadio: import("styled-components").StyledComponent<import("react").FC<import("../Radio").RadioProps>, any, {
+export declare const StyledRadio: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("../Radio").RadioProps, keyof import("react").InputHTMLAttributes<HTMLInputElement> | "hasError" | "errorMessage"> & import("react").RefAttributes<HTMLInputElement>>, any, {
     numberOfAttributes: number;
 } & ThemeProp, never>;
 export declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, {}, never>;

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

@@ -1,9 +1,10 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, ReactNode } from "react";
 export declare type StepProps = {
     /** current step number */
     current: number;
     /** list of step  */
     steps: string[];
+    children?: ReactNode;
 };
 /**
  *

package/lib/components/TestWrapper.d.ts

@@ -1,8 +1,12 @@
-import { FC } from "react";
+import { ReactNode } from "react";
 import { ThemeType } from "src/types";
 declare type TestThemeWrapperProps = {
     theme?: ThemeType;
+    children?: ReactNode;
 };
-export declare const TestThemeWrapper: FC<TestThemeWrapperProps>;
-export declare const TestWrapper: FC;
+export declare const TestThemeWrapper: ({ children, theme, }: TestThemeWrapperProps) => JSX.Element;
+declare type TestWrapperProps = {
+    children?: ReactNode;
+};
+export declare const TestWrapper: ({ children }: TestWrapperProps) => JSX.Element;
 export default TestWrapper;

package/lib/components/ThemeCheatSheet.d.ts

@@ -1,7 +1,5 @@
 import React from "react";
-declare const _default: React.ForwardRefExoticComponent<{
-    children?: React.ReactNode;
-} & {
+declare const _default: React.ForwardRefExoticComponent<{} & {
     theme?: any;
 }>;
 export default _default;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const BubbleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ProgressBarWrapper: import("styled-components").StyledComponent<"div", any, {
     isCompact?: boolean | undefined;
@@ -12,5 +11,5 @@ declare type TotaliserWrapperProps = {
 };
 export declare const TotaliserWrapper: import("styled-components").StyledComponent<"div", any, TotaliserWrapperProps, never>;
 export declare const CompactWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledProgressBar: import("styled-components").StyledComponent<import("react").FC<import("../ProgressBar").ProgressBarProps>, any, {}, never>;
+export declare const StyledProgressBar: import("styled-components").StyledComponent<({ percentage, isCircular, circleContents, circleSize, barColor, secondaryBarColor, secondaryPercentage, children, }: import("../ProgressBar").ProgressBarProps) => JSX.Element, any, {}, never>;
 export {};

package/lib/docs/Docs.d.ts

@@ -0,0 +1,2 @@
+declare const Docs: () => JSX.Element;
+export default Docs;

package/lib/docs/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/es/src/components/Carousel/index.js

@@ -1,2 +1,2 @@
-import e,{memo as r,useState as t,useRef as n,useEffect as o}from"react";import{InView as l}from"../../../node_modules/react-intersection-observer/react-intersection-observer.modern.mjs.js";import i from"../Box/index.js";import{Dots as c}from"./Dots.js";import{CarouselWrapper as s,CarouselScrollArea as a,CarouselCard as u,CarouselCardInner as m}from"./styles.js";var d=function(r){var d=r.startPosition,f=void 0===d?0:d,h=r.children,v=r.onPositionChanged,g=r.shrinkUnselectedPages,E=void 0!==g&&g,p=t(f),P=p[0],j=p[1],x=t(!0),y=x[0],C=x[1],T=n(null),b=e.Children.toArray(h).filter(Boolean),k=function(e){if(T&&T.current){var r=T.current.scrollWidth,t=0===e,n=e===T.current.children.length-1,o=T.current.children[e];if(!o)return;var l=o.offsetLeft;t?T.current.scrollTo(0,0):n?T.current.scrollTo(r,0):T.current.scrollTo(l,0),y||C(!0)}};o((function(){0!==f&&C(!1)}),[f]),o((function(){!1===y&&k(f)}),[y]);var B=1===b.length;return e.createElement(e.Fragment,null,e.createElement(i,null,e.createElement(s,null,e.createElement(a,{ref:T,"aria-live":"assertive",smoothScrolling:y,tabIndex:0},b.map((function(r,t){var n=t===P;return e.createElement(u,{key:t,onlyChild:B},e.createElement(l,{threshold:.5,as:"div",onChange:function(e){var r;e&&P!==(r=t)&&(j(r),v&&v(r))}},e.createElement(m,{onlyChild:B,isSelected:n,shrinkUnselectedPages:E},r)))}))))),b.length>1?e.createElement(i,null,e.createElement(c,{count:b.length,currentPosition:P,scrollToPosition:k,next:function(){k(P+1)},previous:function(){k(P-1)}})):null)},f=r(d);export{d as Carousel,f as default};
+import e,{memo as r,useState as t,useRef as n,useEffect as o}from"react";import{InView as l}from"../../../node_modules/react-intersection-observer/react-intersection-observer.modern.mjs.js";import i from"../Box/index.js";import{Dots as c}from"./Dots.js";import{CarouselWrapper as s,CarouselScrollArea as a,CarouselCard as u,CarouselCardInner as m}from"./styles.js";var d=function(r){var d=r.startPosition,f=void 0===d?0:d,h=r.children,v=r.onPositionChanged,g=r.shrinkUnselectedPages,E=void 0!==g&&g,p=t(f),P=p[0],j=p[1],x=t(!0),y=x[0],C=x[1],T=n(null),b=e.Children.toArray(h).filter(Boolean),k=function(e){if(T&&T.current){var r=T.current.scrollWidth,t=0===e,n=e===T.current.children.length-1,o=T.current.children[e];if(!o)return;var l=o.offsetLeft;t?T.current.scrollTo(0,0):n?T.current.scrollTo(r,0):T.current.scrollTo(l,0),y||C(!0)}};o((function(){0!==f&&C(!1)}),[f]),o((function(){!1===y&&k(f)}),[y]);var B=1===b.length;return e.createElement(e.Fragment,null,e.createElement(i,null,e.createElement(s,null,e.createElement(a,{ref:T,"aria-live":"assertive",smoothScrolling:y,tabIndex:0},b.map((function(r,t){var n=t===P;return e.createElement(u,{key:"card".concat(t),onlyChild:B},e.createElement(l,{threshold:.5,as:"div",onChange:function(e){var r;e&&P!==(r=t)&&(j(r),v&&v(r))}},e.createElement(m,{onlyChild:B,isSelected:n,shrinkUnselectedPages:E},r)))}))))),b.length>1?e.createElement(i,null,e.createElement(c,{count:b.length,currentPosition:P,scrollToPosition:k,next:function(){k(P+1)},previous:function(){k(P-1)}})):null)},f=r(d);export{d as Carousel,f as default};
 //# sourceMappingURL=index.js.map

package/lib/es/src/components/Footer/index.js

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as l,ThemeProvider as n}from"styled-components";import r from"../../themes/cruk.js";import{Text as o}from"../Text/index.js";import{StyledFooter as a,FooterContentWrapper as m,FooterSectionLogo as s,StyledRegulatorLogo as i,FooterSectionLinks as c,StyledNav as E,StyledUL as f,StyledLI as u,FooterSection as p,FooterSectionAddress as d,StyledAddress as x}from"./styles.js";var g=function(g){var S=g.children,y=g.middleSection,h=t.Children.toArray(S),z=l(),C=e(e({},r),z);return t.createElement(n,{theme:C},t.createElement(a,null,t.createElement(m,null,t.createElement(s,null,t.createElement(i,{alt:C.siteConfig.footerLogoAlt||"",src:C.siteConfig.footerLogoSrc||""})),t.createElement(c,null,t.createElement(E,{"aria-label":"footer links"},t.createElement(f,null,h.length?h.map((function(e,l){return t.createElement(u,{key:l},e)})):null))),t.createElement(p,null,y?"string"==typeof y?t.createElement(o,{textSize:"s"},y):t.createElement(t.Fragment,null,y):t.createElement(o,{textSize:"s"},C.siteConfig.footerCopyText)),t.createElement(d,null,t.createElement(x,null,t.createElement(o,{as:"span",textSize:"s"},"2 Redman Place"),t.createElement(o,{as:"span",textSize:"s"},"London"),t.createElement(o,{as:"span",textSize:"s"},"E20 1JQ"))))))};export{g as Footer,g as default};
+import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as n,ThemeProvider as l}from"styled-components";import r from"../../themes/cruk.js";import{Text as o}from"../Text/index.js";import{StyledFooter as a,FooterContentWrapper as m,FooterSectionLogo as s,StyledRegulatorLogo as c,FooterSectionLinks as i,StyledNav as E,StyledUL as f,StyledLI as u,FooterSection as p,FooterSectionAddress as d,StyledAddress as x}from"./styles.js";var g=function(g){var S=g.children,y=g.middleSection,h=t.Children.toArray(S),z=n(),C=e(e({},r),z);return t.createElement(l,{theme:C},t.createElement(a,null,t.createElement(m,null,t.createElement(s,null,t.createElement(c,{alt:C.siteConfig.footerLogoAlt||"",src:C.siteConfig.footerLogoSrc||""})),t.createElement(i,null,t.createElement(E,{"aria-label":"footer links"},t.createElement(f,null,h.length?h.map((function(e,n){return t.createElement(u,{key:"footerLink".concat(n)},e)})):null))),t.createElement(p,null,y?"string"==typeof y?t.createElement(o,{textSize:"s"},y):t.createElement(t.Fragment,null,y):t.createElement(o,{textSize:"s"},C.siteConfig.footerCopyText)),t.createElement(d,null,t.createElement(x,null,t.createElement(o,{as:"span",textSize:"s"},"2 Redman Place"),t.createElement(o,{as:"span",textSize:"s"},"London"),t.createElement(o,{as:"span",textSize:"s"},"E20 1JQ"))))))};export{g as Footer,g as default};
 //# sourceMappingURL=index.js.map

package/lib/hocs/MdxProvider.d.ts

@@ -1,3 +1,6 @@
-import { FunctionComponent } from "react";
-declare const MdxProvider: FunctionComponent;
+import { ReactNode } from "@mdx-js/react/lib";
+declare type MdxProviderProps = {
+    children?: ReactNode;
+};
+declare const MdxProvider: ({ children }: MdxProviderProps) => JSX.Element;
 export default MdxProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cruk/cruk-react-components",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "React components implementing CRUK and SU2C designs",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -99,9 +99,11 @@
     "@types/assert": "^1.5.1",
     "@types/cypress-image-snapshot": "^3.1.6",
     "@types/jest": "^27.4.0",
+    "@types/mdx": "^2.0.2",
     "@types/mdx-js__react": "^1.5.1",
     "@types/node": "^17.0.25",
-    "@types/react": "^17.0.47",
+    "@types/reach__router": "^1.3.10",
+    "@types/react": "^18.0.17",
     "@types/react-dom": "^17.0.17",
     "@types/styled-components": "^5.1.22",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
@@ -147,8 +149,8 @@
     "webpack-dev-server": "^4.7.3"
   },
   "peerDependencies": {
-    "react": "^16.12.0 || ^17.0.1 ",
-    "react-dom": "^16.12.0 || ^17.0.1 ",
+    "react": "^16.12.0 || ^17.0.1 || ^18.0.1 ",
+    "react-dom": "^16.12.0 || ^17.0.1 || ^18.0.1 ",
     "styled-components": "^5.3.5"
   },
   "dependencies": {