@cruk/cruk-react-components 5.0.8 → 6.0.0

package/README.md

@@ -14,9 +14,9 @@ Add cruk-react-components and its peer dependencies react, react-dom and styled-
 
 ```sh
 "dependencies": {
-  "react": "^16.2.0",
-  "react-dom": "^16.2.0",
-  "styled-components": "^5.0.0"
+  "react": "^19",
+  "react-dom": "^19",
+  "styled-components": "^6"
 }
 ```
 
@@ -152,10 +152,23 @@ and see if it can successfully build the library before running the release scri
 
 ### Releases
 
-Please update the version number in the package.json and follow the semver standards for version numbers.
+#### Pre-release
 
-Make sure that your current node version is Node 16.
+Please update the version number in the package.json and follow the semver standards for version numbers.
+Run `nvm use` to make sure that you are on the correct version of node.
 Run `npm i` to make sure that the correct version in the lockfile.
 Update the CHANGELOG.md which should list the changes for the release, instructions are at the bottom of the file.
-Make sure that you have the correct permissions for the @cruk on NPM
-Run the release script with `npm run release` this should make and push the tag, build the lib and release it on NPM.
+These changes need to be merged into master.
+
+#### Releasing
+
+Make sure that you have the correct permissions for the @cruk org on NPM.
+Run the release script with `npm run release` this should use `release-it` to allow you to select the same version number as stated in the package JSON and it should take care of the rest:
+
+- it runs npm ci
+- it does the build
+- it makes and pushes the tag
+- it releases the build lib to NPM
+- it requestions if you want to document the release on github and autogenerates the release notes.
+
+Agree to all these steps release-it walks through and when Github opens up with the release click on the `Publish` button. If anything goes wrong release-it should roll back.

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

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import { type AddressLookupProps } from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<AddressLookupProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    component: ({ apiKey, countries, errorMessage, hasError, isValid, isValidVisible, isInvalidVisible, label, hintText, ref, onAddressError, onAddressSelected, onChange, onBlur, ...props }: AddressLookupProps) => React.JSX.Element;
     args: {
         disabled: boolean;
         errorMessage: string;

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

@@ -34,5 +34,5 @@ export type AddressLookupProps = InputHTMLAttributes<HTMLInputElement> & {
  * You will need a Loqate api key, the examples below use "MG17-ZD93-FF33-KF13" our development key.
  * This component is generally only used for country codes including "GBR", "GGY", "IMN", "JEY". An example of this behavior is included bellow.
  */
-export declare const AddressLookup: React.ForwardRefExoticComponent<Omit<AddressLookupProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const AddressLookup: ({ apiKey, countries, errorMessage, hasError, isValid, isValidVisible, isInvalidVisible, label, hintText, ref, onAddressError, onAddressSelected, onChange, onBlur, ...props }: AddressLookupProps) => React.JSX.Element;
 export default AddressLookup;

package/lib/src/components/AddressLookup/index.js

@@ -1,2 +1,2 @@
-import e,{forwardRef as t,useState as r,useRef as n,useCallback as s,useEffect as o}from"react";import{useTheme as a}from"styled-components";import{faChevronRight as i}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{useKey as l}from"../../hooks/useKey.js";import{debounce as d}from"../../utils/debounce.js";import{removeCommasFromObjectStringValues as m}from"../../utils/Helper.js";import{Text as u}from"../Text/index.js";import{TextField as c}from"../TextField/index.js";import{IconFa as p}from"../IconFa/index.js";import{crukTheme as h}from"../../themes/cruk.js";import{ScreenReaderOnly as f,ListWrapper as g,List as y,ListItem as w}from"./styles.js";const E=t((({apiKey:t,countries:E,errorMessage:v,hasError:x,isValid:j,isValidVisible:I,isInvalidVisible:b,label:T,hintText:k,onAddressError:$=e=>{console.log(e)},onAddressSelected:A,onChange:C,onBlur:V,...D},K)=>{const[F,S]=r([]),[L,H]=r(-1),M=n(null),_=a(),B={...h,..._},O=()=>{H(-1),S([])},U=s(d(500,(e=>{q(e)})),[]),q=(e,r="")=>{if(0===e.length)return S([]);let n=`https://api.addressy.com/Capture/Interactive/Find/v1.1/json3.ws?Key=${t}&Text=${e}&Container=${r}`;return void 0!==E&&(n=`${n}&Countries=${E.join(",")}`),fetch(n).then((e=>{if(!e.ok)throw new Error("Something went wrong please try again");return e.json()})).then((e=>{if(e.Items[0].Error)throw new Error("Something went wrong please try again");return S(e.Items||[]),null})).catch((e=>$(e))),null},N=e=>{fetch(`https://api.addressy.com/Capture/Interactive/Retrieve/v1/json3.ws?Key=${t}&Id=${e}`).then((e=>{if(!e.ok)throw new Error("Something went wrong please try again");return e.json()})).then((e=>{const t=e.Items[0],r=m(t);return A(r),O(),null})).catch((e=>$(e)))},R=e=>"Address"===e.Type?N(e.Id):(q(e.Text,e.Id),null),W=e=>{M.current&&e.target instanceof HTMLElement&&!M.current.contains(e.target)&&O()};return o((()=>(document.addEventListener("mousedown",W),()=>{document.removeEventListener("mousedown",W)}))),l((()=>{O()}),{detectKeys:["Escape","Tab"]},[]),e.createElement(e.Fragment,null,e.createElement(c,{"aria-activedescendant":F.length?`addressOptions-${L}`:"","aria-owns":"found_addresses","aria-autocomplete":"both","aria-expanded":F.length?"true":"false",autoComplete:"off",hasError:x||!!v,errorMessage:v,hintText:k??"Start typing your address or postcode",isValid:j,isValidVisible:I,isInvalidVisible:b,label:T??"Home address",ref:K,required:!0,role:"combobox",type:"search",...D,onKeyDown:e=>{"Enter"===e.key&&F[L]?(e.preventDefault(),"Address"===F[L].Type&&N(F[L].Id),q(F[L].Text,F[L].Id),H(-1)):"ArrowUp"===e.key?(e.preventDefault(),L<=-1&&H(F.length-1),H(L-1)):"ArrowDown"===e.key?(e.preventDefault(),L+1>=F.length&&H(0),H(L+1)):H(-1)},onChange:e=>{U(e.target.value),C&&C(e)},onBlur:e=>{const t=!!F.length;V&&!t&&V(e)}}),!!F.length&&e.createElement(e.Fragment,null,e.createElement(f,{role:"status","aria-live":"assertive"},!!F.length&&`We have found ${F.length} result${1!==F.length?"s":""} matching your search. Use up and down arrow keys to navigate`),e.createElement(g,{ref:M},e.createElement(y,{"aria-label":"found addresses",id:"found_addresses",role:"listbox",theme:B},F.map(((t,r)=>e.createElement(w,{tabIndex:0,id:`addressOptions-${r}`,$isActive:r===L,key:t.Id,onClick:()=>{R(t)},onKeyDown:e=>{"Enter"===e.key&&R(t)},role:"option","data-hj-suppress":!0,theme:B},e.createElement(u,{as:"span","data-hj-suppress":!0},t.Text," ",t.Description),"Address"!==t.Type&&e.createElement(e.Fragment,null,e.createElement(f,null,"press enter for these addresses"),e.createElement(p,{faIcon:i})))))))))}));E.displayName="AddressLookup";export{E as AddressLookup,E as default};
+import e,{useState as t,useRef as r,useCallback as n,useEffect as s}from"react";import{useTheme as o}from"styled-components";import{faChevronRight as a}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{useKey as i}from"../../hooks/useKey.js";import{debounce as l}from"../../utils/debounce.js";import{removeCommasFromObjectStringValues as d}from"../../utils/Helper.js";import{Text as m}from"../Text/index.js";import{TextField as c}from"../TextField/index.js";import{IconFa as u}from"../IconFa/index.js";import{crukTheme as p}from"../../themes/cruk.js";import{ScreenReaderOnly as h,ListWrapper as f,List as g,ListItem as y}from"./styles.js";const w=({apiKey:w,countries:E,errorMessage:v,hasError:x,isValid:j,isValidVisible:I,isInvalidVisible:b,label:T,hintText:$,ref:k,onAddressError:A=e=>{console.log(e)},onAddressSelected:C,onChange:V,onBlur:D,...K})=>{const[F,S]=t([]),[H,L]=t(-1),M=r(null),_=o(),B={...p,..._},O=()=>{L(-1),S([])},U=n(l(500,(e=>{q(e)})),[]),q=(e,t="")=>{if(0===e.length)return S([]);let r=`https://api.addressy.com/Capture/Interactive/Find/v1.1/json3.ws?Key=${w}&Text=${e}&Container=${t}`;return void 0!==E&&(r=`${r}&Countries=${E.join(",")}`),fetch(r).then((e=>{if(!e.ok)throw new Error("Something went wrong please try again");return e.json()})).then((e=>{if(e.Items[0].Error)throw new Error("Something went wrong please try again");return S(e.Items||[]),null})).catch((e=>A(e))),null},R=e=>{fetch(`https://api.addressy.com/Capture/Interactive/Retrieve/v1/json3.ws?Key=${w}&Id=${e}`).then((e=>{if(!e.ok)throw new Error("Something went wrong please try again");return e.json()})).then((e=>{const t=e.Items[0],r=d(t);return C(r),O(),null})).catch((e=>A(e)))},W=e=>"Address"===e.Type?R(e.Id):(q(e.Text,e.Id),null),z=e=>{M.current&&e.target instanceof HTMLElement&&!M.current.contains(e.target)&&O()};return s((()=>(document.addEventListener("mousedown",z),()=>{document.removeEventListener("mousedown",z)}))),i((()=>{O()}),{detectKeys:["Escape","Tab"]},[]),e.createElement(e.Fragment,null,e.createElement(c,{"aria-activedescendant":F.length?`addressOptions-${H}`:"","aria-owns":"found_addresses","aria-autocomplete":"both","aria-expanded":F.length?"true":"false",autoComplete:"off",hasError:x||!!v,errorMessage:v,hintText:$??"Start typing your address or postcode",isValid:j,isValidVisible:I,isInvalidVisible:b,label:T??"Home address",ref:k,required:!0,role:"combobox",type:"search",...K,onKeyDown:e=>{"Enter"===e.key&&F[H]?(e.preventDefault(),"Address"===F[H].Type&&R(F[H].Id),q(F[H].Text,F[H].Id),L(-1)):"ArrowUp"===e.key?(e.preventDefault(),H<=-1&&L(F.length-1),L(H-1)):"ArrowDown"===e.key?(e.preventDefault(),H+1>=F.length&&L(0),L(H+1)):L(-1)},onChange:e=>{U(e.target.value),V&&V(e)},onBlur:e=>{const t=!!F.length;D&&!t&&D(e)}}),!!F.length&&e.createElement(e.Fragment,null,e.createElement(h,{role:"status","aria-live":"assertive"},!!F.length&&`We have found ${F.length} result${1!==F.length?"s":""} matching your search. Use up and down arrow keys to navigate`),e.createElement(f,{ref:M},e.createElement(g,{"aria-label":"found addresses",id:"found_addresses",role:"listbox",theme:B},F.map(((t,r)=>e.createElement(y,{tabIndex:0,id:`addressOptions-${r}`,$isActive:r===H,key:t.Id,onClick:()=>{W(t)},onKeyDown:e=>{"Enter"===e.key&&W(t)},role:"option","data-hj-suppress":!0,theme:B},e.createElement(m,{as:"span","data-hj-suppress":!0},t.Text," ",t.Description),"Address"!==t.Type&&e.createElement(e.Fragment,null,e.createElement(h,null,"press enter for these addresses"),e.createElement(u,{faIcon:a})))))))))};export{w as AddressLookup,w as default};
 //# sourceMappingURL=index.js.map

package/lib/src/components/AddressLookup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/AddressLookup/index.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  forwardRef,\n  useRef,\n  type InputHTMLAttributes,\n  type Ref,\n  type FocusEvent,\n  type ChangeEvent,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { faChevronRight } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { type AddressDataType, type AddressOptionsType } from \"../../types\";\nimport { useKey } from \"../../hooks/useKey\";\n\nimport { debounce } from \"../../utils/debounce\";\nimport { removeCommasFromObjectStringValues } from \"../../utils/Helper\";\nimport { Text } from \"../Text\";\nimport { TextField } from \"../TextField\";\nimport { IconFa } from \"../IconFa\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { ListWrapper, ListItem, ScreenReaderOnly, List } from \"./styles\";\n\nconst FIND_URL =\n  \"https://api.addressy.com/Capture/Interactive/Find/v1.1/json3.ws\";\nconst RETRIEVE_URL =\n  \"https://api.addressy.com/Capture/Interactive/Retrieve/v1/json3.ws\";\n\nexport type AddressLookupProps = InputHTMLAttributes<HTMLInputElement> & {\n  /** api key for loqate */\n  apiKey: string;\n  /** list of countries codes you want the address look up to search within */\n  countries?: string[];\n  /** callback function which is passed the selected address data */\n  onAddressSelected: (address: AddressDataType) => void;\n  /** error message */\n  errorMessage?: string;\n  /** when true a input has a red border */\n  hasError?: boolean;\n  /** flag which effects the check or cross icons to the right of the input */\n  isValid?: boolean;\n  /** flag to hide or show the check icon when valid */\n  isValidVisible?: boolean;\n  /** flag to hide or show the cross icon when invalid */\n  isInvalidVisible?: boolean;\n  /** label text */\n  label?: string;\n  /** hint text text */\n  hintText?: ReactNode;\n  /** callback function which is passed the error */\n  onAddressError?: (error: Error) => void;\n  /** onBlur handler */\n  onBlur?: (e: FocusEvent) => void;\n  /** attach a DOM reference variable to your component */\n  ref?: Ref<HTMLInputElement>;\n};\n\n/**\n * This component creates a combobox for a user to type in a post code or partial address and be presented with a of verified addresses.\n * We use Loqate (formerly Addressy and Postcode Anywhere) API v3, we have looked at v4 but it is more expensive without many benefits for our use case.\n * You will need a Loqate api key, the examples below use \"MG17-ZD93-FF33-KF13\" our development key.\n * This component is generally only used for country codes including \"GBR\", \"GGY\", \"IMN\", \"JEY\". An example of this behavior is included bellow.\n */\nexport const AddressLookup = forwardRef(\n  (\n    {\n      apiKey,\n      countries,\n      errorMessage,\n      hasError,\n      isValid,\n      isValidVisible,\n      isInvalidVisible,\n      label,\n      hintText,\n\n      onAddressError = (error: Error) => {\n        console.log(error);\n      },\n      onAddressSelected,\n      onChange,\n      onBlur,\n      ...props\n    }: AddressLookupProps,\n    ref?: Ref<HTMLInputElement>,\n  ) => {\n    const [addressOptions, setAddressOptions] = useState<AddressOptionsType[]>(\n      [],\n    );\n    const [activeOption, setActiveOption] = useState(-1);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n\n    const clearOptions = () => {\n      setActiveOption(-1);\n      setAddressOptions([]);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    const searchDebounced = useCallback(\n      debounce(500, (query: string) => {\n        search(query);\n      }),\n      [],\n    );\n\n    const search = (query: string, id = \"\") => {\n      if (query.length === 0) return setAddressOptions([]);\n      let searchUrl = `${FIND_URL}?Key=${apiKey}&Text=${query}&Container=${id}`;\n      if (countries !== undefined) {\n        searchUrl = `${searchUrl}&Countries=${countries.join(\",\")}`;\n      }\n      fetch(searchUrl)\n        .then((res: Response) => {\n          if (!res.ok) throw new Error(\"Something went wrong please try again\");\n          return res.json();\n        })\n        .then((data: { Items: AddressOptionsType[] }) => {\n          // Occasionally get the error \"The query didn't respond fast enough, it may be too complex.\"\n          // returned with a 200 response. Example query \"n17 6t\"\n          if (data.Items[0].Error)\n            throw new Error(\"Something went wrong please try again\");\n          setAddressOptions(data.Items || []);\n          return null;\n        })\n        .catch((err) => onAddressError(err as Error));\n      return null;\n    };\n\n    const getAddress = (id: string) => {\n      fetch(`${RETRIEVE_URL}?Key=${apiKey}&Id=${id}`)\n        .then((res: Response) => {\n          if (!res.ok) throw new Error(\"Something went wrong please try again\");\n          return res.json();\n        })\n        .then((data: { Items: AddressDataType[] }) => {\n          const selectedAddress = data.Items[0];\n          const selectedAddressWithoutCommas =\n            removeCommasFromObjectStringValues<AddressDataType>(\n              selectedAddress,\n            );\n          onAddressSelected(selectedAddressWithoutCommas);\n          clearOptions();\n          return null;\n        })\n        .catch((err) => onAddressError(err as Error));\n    };\n\n    const selectAddress = (address: AddressOptionsType) => {\n      if (address.Type === \"Address\") return getAddress(address.Id);\n      search(address.Text, address.Id);\n      return null;\n    };\n\n    const handleKeyDown = (e: KeyboardEvent): void => {\n      if (e.key === \"Enter\" && addressOptions[activeOption]) {\n        e.preventDefault();\n        if (addressOptions[activeOption].Type === \"Address\")\n          getAddress(addressOptions[activeOption].Id);\n        search(\n          addressOptions[activeOption].Text,\n          addressOptions[activeOption].Id,\n        );\n        setActiveOption(-1);\n      } else if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        if (activeOption <= -1) setActiveOption(addressOptions.length - 1);\n        setActiveOption(activeOption - 1);\n      } else if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        if (activeOption + 1 >= addressOptions.length) setActiveOption(0);\n        setActiveOption(activeOption + 1);\n      } else {\n        setActiveOption(-1);\n      }\n    };\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      searchDebounced(e.target.value);\n      if (onChange) onChange(e);\n    };\n\n    const handleBlur = (e: FocusEvent) => {\n      const isOptionsOpen = !!addressOptions.length;\n      if (onBlur && !isOptionsOpen) onBlur(e);\n    };\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        wrapperRef.current &&\n        event.target instanceof HTMLElement &&\n        !wrapperRef.current.contains(event.target)\n      )\n        clearOptions();\n    };\n\n    useEffect(() => {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n      return () => {\n        document.removeEventListener(\"mousedown\", handleClickOutside);\n      };\n    });\n\n    useKey(\n      () => {\n        clearOptions();\n      },\n      {\n        detectKeys: [\"Escape\", \"Tab\"],\n      },\n      [],\n    );\n\n    return (\n      <>\n        <TextField\n          aria-activedescendant={\n            addressOptions.length ? `addressOptions-${activeOption}` : \"\"\n          }\n          aria-owns=\"found_addresses\"\n          aria-autocomplete=\"both\"\n          aria-expanded={addressOptions.length ? \"true\" : \"false\"}\n          autoComplete=\"off\"\n          hasError={hasError || !!errorMessage}\n          errorMessage={errorMessage}\n          hintText={hintText ?? \"Start typing your address or postcode\"}\n          isValid={isValid}\n          isValidVisible={isValidVisible}\n          isInvalidVisible={isInvalidVisible}\n          label={label ?? \"Home address\"}\n          ref={ref}\n          required\n          role=\"combobox\"\n          type=\"search\"\n          {...props}\n          onKeyDown={handleKeyDown}\n          onChange={handleChange}\n          onBlur={handleBlur}\n        />\n\n        {!!addressOptions.length && (\n          <>\n            <ScreenReaderOnly role=\"status\" aria-live=\"assertive\">\n              {!!addressOptions.length &&\n                `We have found ${addressOptions.length} result${\n                  addressOptions.length !== 1 ? \"s\" : \"\"\n                } matching your search. Use up and down arrow keys to navigate`}\n            </ScreenReaderOnly>\n            <ListWrapper ref={wrapperRef}>\n              <List\n                aria-label=\"found addresses\"\n                id=\"found_addresses\"\n                role=\"listbox\"\n                theme={theme}\n              >\n                {addressOptions.map((address, index) => (\n                  <ListItem\n                    tabIndex={0}\n                    id={`addressOptions-${index}`}\n                    $isActive={index === activeOption}\n                    key={address.Id}\n                    onClick={() => {\n                      selectAddress(address);\n                    }}\n                    onKeyDown={(e) => {\n                      if (e.key === \"Enter\") {\n                        selectAddress(address);\n                      }\n                    }}\n                    role=\"option\"\n                    data-hj-suppress\n                    theme={theme}\n                  >\n                    <Text as=\"span\" data-hj-suppress>\n                      {address.Text} {address.Description}\n                    </Text>\n                    {address.Type !== \"Address\" && (\n                      <>\n                        <ScreenReaderOnly>\n                          press enter for these addresses\n                        </ScreenReaderOnly>\n                        <IconFa faIcon={faChevronRight} />\n                      </>\n                    )}\n                  </ListItem>\n                ))}\n              </List>\n            </ListWrapper>\n          </>\n        )}\n      </>\n    );\n  },\n);\n\nAddressLookup.displayName = \"AddressLookup\";\n\nexport default AddressLookup;\n"],"names":["AddressLookup","forwardRef","apiKey","countries","errorMessage","hasError","isValid","isValidVisible","isInvalidVisible","label","hintText","onAddressError","error","console","log","onAddressSelected","onChange","onBlur","props","ref","addressOptions","setAddressOptions","useState","activeOption","setActiveOption","wrapperRef","useRef","foundTheme","useTheme","theme","defaultTheme","clearOptions","searchDebounced","useCallback","debounce","query","search","id","length","searchUrl","undefined","join","fetch","then","res","ok","Error","json","data","Items","catch","err","getAddress","selectedAddress","selectedAddressWithoutCommas","removeCommasFromObjectStringValues","selectAddress","address","Type","Id","Text","handleClickOutside","event","current","target","HTMLElement","contains","useEffect","document","addEventListener","removeEventListener","useKey","detectKeys","React","createElement","Fragment","TextField","autoComplete","required","role","type","onKeyDown","e","key","preventDefault","value","isOptionsOpen","ScreenReaderOnly","ListWrapper","List","map","index","ListItem","tabIndex","$isActive","onClick","as","Description","IconFa","faIcon","faChevronRight","displayName"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/AddressLookup/index.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  useRef,\n  type InputHTMLAttributes,\n  type Ref,\n  type FocusEvent,\n  type ChangeEvent,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { faChevronRight } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { type AddressDataType, type AddressOptionsType } from \"../../types\";\nimport { useKey } from \"../../hooks/useKey\";\n\nimport { debounce } from \"../../utils/debounce\";\nimport { removeCommasFromObjectStringValues } from \"../../utils/Helper\";\nimport { Text } from \"../Text\";\nimport { TextField } from \"../TextField\";\nimport { IconFa } from \"../IconFa\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { ListWrapper, ListItem, ScreenReaderOnly, List } from \"./styles\";\n\nconst FIND_URL =\n  \"https://api.addressy.com/Capture/Interactive/Find/v1.1/json3.ws\";\nconst RETRIEVE_URL =\n  \"https://api.addressy.com/Capture/Interactive/Retrieve/v1/json3.ws\";\n\nexport type AddressLookupProps = InputHTMLAttributes<HTMLInputElement> & {\n  /** api key for loqate */\n  apiKey: string;\n  /** list of countries codes you want the address look up to search within */\n  countries?: string[];\n  /** callback function which is passed the selected address data */\n  onAddressSelected: (address: AddressDataType) => void;\n  /** error message */\n  errorMessage?: string;\n  /** when true a input has a red border */\n  hasError?: boolean;\n  /** flag which effects the check or cross icons to the right of the input */\n  isValid?: boolean;\n  /** flag to hide or show the check icon when valid */\n  isValidVisible?: boolean;\n  /** flag to hide or show the cross icon when invalid */\n  isInvalidVisible?: boolean;\n  /** label text */\n  label?: string;\n  /** hint text text */\n  hintText?: ReactNode;\n  /** callback function which is passed the error */\n  onAddressError?: (error: Error) => void;\n  /** onBlur handler */\n  onBlur?: (e: FocusEvent) => void;\n  /** attach a DOM reference variable to your component */\n  ref?: Ref<HTMLInputElement>;\n};\n\n/**\n * This component creates a combobox for a user to type in a post code or partial address and be presented with a of verified addresses.\n * We use Loqate (formerly Addressy and Postcode Anywhere) API v3, we have looked at v4 but it is more expensive without many benefits for our use case.\n * You will need a Loqate api key, the examples below use \"MG17-ZD93-FF33-KF13\" our development key.\n * This component is generally only used for country codes including \"GBR\", \"GGY\", \"IMN\", \"JEY\". An example of this behavior is included bellow.\n */\nexport const AddressLookup = ({\n  apiKey,\n  countries,\n  errorMessage,\n  hasError,\n  isValid,\n  isValidVisible,\n  isInvalidVisible,\n  label,\n  hintText,\n  ref,\n  onAddressError = (error: Error) => {\n    console.log(error);\n  },\n  onAddressSelected,\n  onChange,\n  onBlur,\n  ...props\n}: AddressLookupProps) => {\n  const [addressOptions, setAddressOptions] = useState<AddressOptionsType[]>(\n    [],\n  );\n  const [activeOption, setActiveOption] = useState(-1);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const clearOptions = () => {\n    setActiveOption(-1);\n    setAddressOptions([]);\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const searchDebounced = useCallback(\n    debounce(500, (query: string) => {\n      search(query);\n    }),\n    [],\n  );\n\n  const search = (query: string, id = \"\") => {\n    if (query.length === 0) return setAddressOptions([]);\n    let searchUrl = `${FIND_URL}?Key=${apiKey}&Text=${query}&Container=${id}`;\n    if (countries !== undefined) {\n      searchUrl = `${searchUrl}&Countries=${countries.join(\",\")}`;\n    }\n    fetch(searchUrl)\n      .then((res: Response) => {\n        if (!res.ok) throw new Error(\"Something went wrong please try again\");\n        return res.json();\n      })\n      .then((data: { Items: AddressOptionsType[] }) => {\n        // Occasionally get the error \"The query didn't respond fast enough, it may be too complex.\"\n        // returned with a 200 response. Example query \"n17 6t\"\n        if (data.Items[0].Error)\n          throw new Error(\"Something went wrong please try again\");\n        setAddressOptions(data.Items || []);\n        return null;\n      })\n      .catch((err) => onAddressError(err as Error));\n    return null;\n  };\n\n  const getAddress = (id: string) => {\n    fetch(`${RETRIEVE_URL}?Key=${apiKey}&Id=${id}`)\n      .then((res: Response) => {\n        if (!res.ok) throw new Error(\"Something went wrong please try again\");\n        return res.json();\n      })\n      .then((data: { Items: AddressDataType[] }) => {\n        const selectedAddress = data.Items[0];\n        const selectedAddressWithoutCommas =\n          removeCommasFromObjectStringValues<AddressDataType>(selectedAddress);\n        onAddressSelected(selectedAddressWithoutCommas);\n        clearOptions();\n        return null;\n      })\n      .catch((err) => onAddressError(err as Error));\n  };\n\n  const selectAddress = (address: AddressOptionsType) => {\n    if (address.Type === \"Address\") return getAddress(address.Id);\n    search(address.Text, address.Id);\n    return null;\n  };\n\n  const handleKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === \"Enter\" && addressOptions[activeOption]) {\n      e.preventDefault();\n      if (addressOptions[activeOption].Type === \"Address\")\n        getAddress(addressOptions[activeOption].Id);\n      search(\n        addressOptions[activeOption].Text,\n        addressOptions[activeOption].Id,\n      );\n      setActiveOption(-1);\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      if (activeOption <= -1) setActiveOption(addressOptions.length - 1);\n      setActiveOption(activeOption - 1);\n    } else if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      if (activeOption + 1 >= addressOptions.length) setActiveOption(0);\n      setActiveOption(activeOption + 1);\n    } else {\n      setActiveOption(-1);\n    }\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    searchDebounced(e.target.value);\n    if (onChange) onChange(e);\n  };\n\n  const handleBlur = (e: FocusEvent) => {\n    const isOptionsOpen = !!addressOptions.length;\n    if (onBlur && !isOptionsOpen) onBlur(e);\n  };\n\n  const handleClickOutside = (event: MouseEvent) => {\n    if (\n      wrapperRef.current &&\n      event.target instanceof HTMLElement &&\n      !wrapperRef.current.contains(event.target)\n    )\n      clearOptions();\n  };\n\n  useEffect(() => {\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  });\n\n  useKey(\n    () => {\n      clearOptions();\n    },\n    {\n      detectKeys: [\"Escape\", \"Tab\"],\n    },\n    [],\n  );\n\n  return (\n    <>\n      <TextField\n        aria-activedescendant={\n          addressOptions.length ? `addressOptions-${activeOption}` : \"\"\n        }\n        aria-owns=\"found_addresses\"\n        aria-autocomplete=\"both\"\n        aria-expanded={addressOptions.length ? \"true\" : \"false\"}\n        autoComplete=\"off\"\n        hasError={hasError || !!errorMessage}\n        errorMessage={errorMessage}\n        hintText={hintText ?? \"Start typing your address or postcode\"}\n        isValid={isValid}\n        isValidVisible={isValidVisible}\n        isInvalidVisible={isInvalidVisible}\n        label={label ?? \"Home address\"}\n        ref={ref}\n        required\n        role=\"combobox\"\n        type=\"search\"\n        {...props}\n        onKeyDown={handleKeyDown}\n        onChange={handleChange}\n        onBlur={handleBlur}\n      />\n\n      {!!addressOptions.length && (\n        <>\n          <ScreenReaderOnly role=\"status\" aria-live=\"assertive\">\n            {!!addressOptions.length &&\n              `We have found ${addressOptions.length} result${\n                addressOptions.length !== 1 ? \"s\" : \"\"\n              } matching your search. Use up and down arrow keys to navigate`}\n          </ScreenReaderOnly>\n          <ListWrapper ref={wrapperRef}>\n            <List\n              aria-label=\"found addresses\"\n              id=\"found_addresses\"\n              role=\"listbox\"\n              theme={theme}\n            >\n              {addressOptions.map((address, index) => (\n                <ListItem\n                  tabIndex={0}\n                  id={`addressOptions-${index}`}\n                  $isActive={index === activeOption}\n                  key={address.Id}\n                  onClick={() => {\n                    selectAddress(address);\n                  }}\n                  onKeyDown={(e) => {\n                    if (e.key === \"Enter\") {\n                      selectAddress(address);\n                    }\n                  }}\n                  role=\"option\"\n                  data-hj-suppress\n                  theme={theme}\n                >\n                  <Text as=\"span\" data-hj-suppress>\n                    {address.Text} {address.Description}\n                  </Text>\n                  {address.Type !== \"Address\" && (\n                    <>\n                      <ScreenReaderOnly>\n                        press enter for these addresses\n                      </ScreenReaderOnly>\n                      <IconFa faIcon={faChevronRight} />\n                    </>\n                  )}\n                </ListItem>\n              ))}\n            </List>\n          </ListWrapper>\n        </>\n      )}\n    </>\n  );\n};\n\nexport default AddressLookup;\n"],"names":["AddressLookup","apiKey","countries","errorMessage","hasError","isValid","isValidVisible","isInvalidVisible","label","hintText","ref","onAddressError","error","console","log","onAddressSelected","onChange","onBlur","props","addressOptions","setAddressOptions","useState","activeOption","setActiveOption","wrapperRef","useRef","foundTheme","useTheme","theme","defaultTheme","clearOptions","searchDebounced","useCallback","debounce","query","search","id","length","searchUrl","undefined","join","fetch","then","res","ok","Error","json","data","Items","catch","err","getAddress","selectedAddress","selectedAddressWithoutCommas","removeCommasFromObjectStringValues","selectAddress","address","Type","Id","Text","handleClickOutside","event","current","target","HTMLElement","contains","useEffect","document","addEventListener","removeEventListener","useKey","detectKeys","React","createElement","Fragment","TextField","autoComplete","required","role","type","onKeyDown","e","key","preventDefault","value","isOptionsOpen","ScreenReaderOnly","ListWrapper","List","map","index","ListItem","tabIndex","$isActive","onClick","as","Description","IconFa","faIcon","faChevronRight"],"mappings":"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"}

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

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

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

@@ -14,5 +14,5 @@ export type BoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
  * The more specific the the target the higher priority the css will have.
  * For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.
  */
-export declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Box: ({ ...props }: BoxProps) => React.JSX.Element;
 export default Box;

package/lib/src/components/Box/index.js

@@ -1,2 +1,2 @@
-import o,{forwardRef as r}from"react";import{useTheme as e}from"styled-components";import{crukTheme as t}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as m}from"../Spacing/index.js";import{StyledBox as s}from"./styles.js";const n=r((({...r},n)=>{const{children:c,backgroundColor:a,...i}=r,p=e(),l={...t,...p},d=m(i);return o.createElement(s,{theme:l,$backgroundColor:a,...d,ref:n},c)}));n.displayName="Box";export{n as Box,n as default};
+import r from"react";import{useTheme as o}from"styled-components";import{crukTheme as e}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as t}from"../Spacing/index.js";import{StyledBox as m}from"./styles.js";const n=({...n})=>{const{children:s,backgroundColor:c,ref:f,...i}=n,p=o(),a={...e,...p},l=t(i);return r.createElement(m,{theme:a,$backgroundColor:c,...l,ref:f},s)};export{n as Box,n as default};
 //# sourceMappingURL=index.js.map

package/lib/src/components/Box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Box/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\nimport { StyledBox } from \"./styles\";\n\nexport type BoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of box, this will add default padding */\n    backgroundColor?: string;\n    ref?: Ref<HTMLDivElement>;\n    children?: ReactNode;\n    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n * Box is used to wrap other components to add margin and padding.\n * The values will be in the t-shirt sizes specified in the theme sizes.\n * The more specific the the target the higher priority the css will have.\n * For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n */\nexport const Box = forwardRef(\n  ({ ...props }: BoxProps, ref?: Ref<HTMLDivElement>) => {\n    const { children, backgroundColor, ...rest } = props;\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n    const restWithInternalSpacingProps =\n      spacingPropsToSpacingPropsInternal(rest);\n\n    return (\n      <StyledBox\n        theme={theme}\n        $backgroundColor={backgroundColor}\n        {...restWithInternalSpacingProps}\n        ref={ref}\n      >\n        {children}\n      </StyledBox>\n    );\n  },\n);\n\nBox.displayName = \"Box\";\n\nexport default Box;\n"],"names":["Box","forwardRef","props","ref","children","backgroundColor","rest","foundTheme","useTheme","theme","defaultTheme","restWithInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","StyledBox","$backgroundColor","displayName"],"mappings":"qPAiCO,MAAMA,EAAMC,GACjB,KAAMC,GAAmBC,KACvB,MAAMC,SAAEA,EAAQC,gBAAEA,KAAoBC,GAASJ,EACzCK,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAECI,EACJC,EAAmCN,GAErC,OACEO,EAACC,cAAAC,GACCN,MAAOA,EACWO,iBAAAX,KACdM,EACJR,IAAKA,GAEJC,EACS,IAKlBJ,EAAIiB,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Box/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\nimport { StyledBox } from \"./styles\";\n\nexport type BoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of box, this will add default padding */\n    backgroundColor?: string;\n    ref?: Ref<HTMLDivElement>;\n    children?: ReactNode;\n    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n * Box is used to wrap other components to add margin and padding.\n * The values will be in the t-shirt sizes specified in the theme sizes.\n * The more specific the the target the higher priority the css will have.\n * For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n */\nexport const Box = ({ ...props }: BoxProps) => {\n  const { children, backgroundColor, ref, ...rest } = props;\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const restWithInternalSpacingProps = spacingPropsToSpacingPropsInternal(rest);\n\n  return (\n    <StyledBox\n      theme={theme}\n      $backgroundColor={backgroundColor}\n      {...restWithInternalSpacingProps}\n      ref={ref}\n    >\n      {children}\n    </StyledBox>\n  );\n};\n\nexport default Box;\n"],"names":["Box","props","children","backgroundColor","ref","rest","foundTheme","useTheme","theme","defaultTheme","restWithInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","StyledBox","$backgroundColor"],"mappings":"oOAgCa,MAAAA,EAAM,KAAMC,MACvB,MAAMC,SAAEA,EAAQC,gBAAEA,EAAeC,IAAEA,KAAQC,GAASJ,EAC9CK,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAECI,EAA+BC,EAAmCN,GAExE,OACEO,EAACC,cAAAC,GACCN,MAAOA,EACWO,iBAAAZ,KACdO,EACJN,IAAKA,GAEJF,EACS"}

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

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import { Button } from "./";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import("./").ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    component: (props: import("./").ButtonProps) => React.JSX.Element;
     args: {
         appearance: string;
         disabled: boolean;

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

@@ -24,5 +24,5 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLElement> & {
  *
  * Design system documentation SU2C https://zeroheight.com/79db39f7e/p/22ff0e-button/b/32e1a2
  */
-export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const Button: (props: ButtonProps) => React.JSX.Element;
 export default Button;

package/lib/src/components/Button/index.js

@@ -1,2 +1,2 @@
-import e,{forwardRef as t}from"react";import{useTheme as r}from"styled-components";import{crukTheme as n}from"../../themes/cruk.js";import{IconFa as o}from"../IconFa/index.js";import{StyledButton as l,Spacer as m}from"./styles.js";const a=t(((t,a)=>{const i=r(),s={...n,...i},{appearance:p="primary",isIconButton:c=!1,full:f=!1,size:h="m",children:u,...d}=t,y=e.Children.toArray(u),$="string"==typeof y[0],g=y[0],j=!(!c&&(1===y.length&&!$&&g?.type)!==o);return e.createElement(l,{as:t.href?"a":"button",...t.href?{role:"button"}:{},$full:!!f,$size:h,$appearance:p,$isIconButton:j,...d,theme:s,ref:a},t.children&&y.length?e.Children.map(t.children,((t,r)=>e.createElement(m,{theme:s,key:r},t))):null)}));a.displayName="Button";export{a as Button,a as default};
+import e from"react";import{useTheme as t}from"styled-components";import{crukTheme as r}from"../../themes/cruk.js";import{IconFa as n}from"../IconFa/index.js";import{StyledButton as o,Spacer as l}from"./styles.js";const m=m=>{const a=t(),i={...r,...a},{appearance:s="primary",isIconButton:c=!1,full:p=!1,size:f="m",children:h,ref:u,...d}=m,y=e.Children.toArray(h),$="string"==typeof y[0],g=y[0],j=!(!c&&(1===y.length&&!$&&g?.type)!==n);return e.createElement(o,{as:m.href?"a":"button",...m.href?{role:"button"}:{},$full:!!p,$size:f,$appearance:s,$isIconButton:j,...d,theme:i,ref:u},m.children&&y.length?e.Children.map(m.children,((t,r)=>e.createElement(l,{theme:i,key:r},t))):null)};export{m as Button,m as default};
 //# sourceMappingURL=index.js.map

package/lib/src/components/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Button/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type ButtonHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactElement,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { IconFa } from \"../IconFa\";\n\nimport { Spacer, StyledButton } from \"./styles\";\nimport { type ButtonAppearanceType } from \"../../types\";\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLElement> & {\n  /** the look and feel of the button */\n  appearance?: ButtonAppearanceType;\n  /** flag to stretch but to 100% width */\n  full?: boolean;\n  /** this is a url which will convert the button to an anchor tag */\n  href?: string;\n  /** the height of the button, this will add padding not increase text size */\n  size?: \"m\" | \"l\";\n  css?: unknown;\n  /** styled-components polymorphism where you can use the styling of a button but convert to another element like an anchor tag */\n  as?: ElementType;\n  /** flag to force button into an icon button shape which is square or round */\n  isIconButton?: boolean;\n  /** Element reference */\n  ref?: Ref<HTMLElement>;\n  /** Component reference */\n  children?: ReactNode;\n};\n\n/**\n * Design system documentation CRUK https://zeroheight.com/23de8a59a/p/180ef6-buttons/b/32e1a2\n *\n * Design system documentation SU2C https://zeroheight.com/79db39f7e/p/22ff0e-button/b/32e1a2\n */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref?: Ref<HTMLElement>) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n    const {\n      appearance = \"primary\",\n      isIconButton = false,\n      full = false,\n      size = \"m\",\n      children,\n      ...rest\n    } = props;\n\n    const childArray = React.Children.toArray(children);\n    const isChildString = typeof childArray[0] === \"string\";\n    const firstElement = childArray[0] as ReactElement;\n\n    // button has a fixed width if there is a single icon\n    const setIconButton = !!(\n      isIconButton ||\n      (childArray.length === 1 && !isChildString && firstElement?.type) ===\n        IconFa\n    );\n\n    return (\n      <StyledButton\n        as={props.href ? \"a\" : \"button\"}\n        {...(props.href ? { role: \"button\" } : {})}\n        $full={!!full}\n        $size={size}\n        $appearance={appearance}\n        $isIconButton={setIconButton}\n        {...rest}\n        theme={theme}\n        ref={ref}\n      >\n        {props.children && childArray.length\n          ? React.Children.map(\n              props.children,\n              (child: ReactNode, index: number) => (\n                <Spacer theme={theme} key={index}>\n                  {child}\n                </Spacer>\n              ),\n            )\n          : null}\n      </StyledButton>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n"],"names":["Button","forwardRef","props","ref","foundTheme","useTheme","theme","defaultTheme","appearance","isIconButton","full","size","children","rest","childArray","React","Children","toArray","isChildString","firstElement","setIconButton","length","type","IconFa","createElement","StyledButton","as","href","role","$full","$size","$appearance","$isIconButton","map","child","index","Spacer","key","displayName"],"mappings":"uOAyCa,MAAAA,EAASC,GACpB,CAACC,EAAoBC,KACnB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAECI,WACJA,EAAa,UAASC,aACtBA,GAAe,EAAKC,KACpBA,GAAO,EAAKC,KACZA,EAAO,IAAGC,SACVA,KACGC,GACDX,EAEEY,EAAaC,EAAMC,SAASC,QAAQL,GACpCM,EAAyC,iBAAlBJ,EAAW,GAClCK,EAAeL,EAAW,GAG1BM,KACJX,IACuB,IAAtBK,EAAWO,SAAiBH,GAAiBC,GAAcG,QAC1DC,GAGJ,OACER,EAAAS,cAACC,EAAY,CACXC,GAAIxB,EAAMyB,KAAO,IAAM,YAClBzB,EAAMyB,KAAO,CAAEC,KAAM,UAAa,CAAA,EAChCC,QAAEnB,EACFoB,MAAAnB,EACMoB,YAAAvB,EACEwB,cAAAZ,KACXP,EACJP,MAAOA,EACPH,IAAKA,GAEJD,EAAMU,UAAYE,EAAWO,OAC1BN,EAAMC,SAASiB,IACb/B,EAAMU,UACN,CAACsB,EAAkBC,IACjBpB,EAAAS,cAACY,EAAM,CAAC9B,MAAOA,EAAO+B,IAAKF,GACxBD,KAIP,KACS,IAKrBlC,EAAOsC,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Button/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type ButtonHTMLAttributes,\n  type Ref,\n  type ReactElement,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { IconFa } from \"../IconFa\";\n\nimport { Spacer, StyledButton } from \"./styles\";\nimport { type ButtonAppearanceType } from \"../../types\";\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLElement> & {\n  /** the look and feel of the button */\n  appearance?: ButtonAppearanceType;\n  /** flag to stretch but to 100% width */\n  full?: boolean;\n  /** this is a url which will convert the button to an anchor tag */\n  href?: string;\n  /** the height of the button, this will add padding not increase text size */\n  size?: \"m\" | \"l\";\n  css?: unknown;\n  /** styled-components polymorphism where you can use the styling of a button but convert to another element like an anchor tag */\n  as?: ElementType;\n  /** flag to force button into an icon button shape which is square or round */\n  isIconButton?: boolean;\n  /** Element reference */\n  ref?: Ref<HTMLElement>;\n  /** Component reference */\n  children?: ReactNode;\n};\n\n/**\n * Design system documentation CRUK https://zeroheight.com/23de8a59a/p/180ef6-buttons/b/32e1a2\n *\n * Design system documentation SU2C https://zeroheight.com/79db39f7e/p/22ff0e-button/b/32e1a2\n */\nexport const Button = (props: ButtonProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const {\n    appearance = \"primary\",\n    isIconButton = false,\n    full = false,\n    size = \"m\",\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  const childArray = React.Children.toArray(children);\n  const isChildString = typeof childArray[0] === \"string\";\n  const firstElement = childArray[0] as ReactElement<HTMLElement>;\n\n  // button has a fixed width if there is a single icon\n  const setIconButton = !!(\n    isIconButton ||\n    (childArray.length === 1 && !isChildString && firstElement?.type) === IconFa\n  );\n\n  return (\n    <StyledButton\n      as={props.href ? \"a\" : \"button\"}\n      {...(props.href ? { role: \"button\" } : {})}\n      $full={!!full}\n      $size={size}\n      $appearance={appearance}\n      $isIconButton={setIconButton}\n      {...rest}\n      theme={theme}\n      ref={ref}\n    >\n      {props.children && childArray.length\n        ? React.Children.map(\n            props.children,\n            (child: ReactNode, index: number) => (\n              <Spacer theme={theme} key={index}>\n                {child}\n              </Spacer>\n            ),\n          )\n        : null}\n    </StyledButton>\n  );\n};\n\nexport default Button;\n"],"names":["Button","props","foundTheme","useTheme","theme","defaultTheme","appearance","isIconButton","full","size","children","ref","rest","childArray","React","Children","toArray","isChildString","firstElement","setIconButton","length","type","IconFa","createElement","StyledButton","as","href","role","$full","$size","$appearance","$isIconButton","map","child","index","Spacer","key"],"mappings":"sNAwCa,MAAAA,EAAUC,IACrB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAECI,WACJA,EAAa,UAASC,aACtBA,GAAe,EAAKC,KACpBA,GAAO,EAAKC,KACZA,EAAO,IAAGC,SACVA,EAAQC,IACRA,KACGC,GACDX,EAEEY,EAAaC,EAAMC,SAASC,QAAQN,GACpCO,EAAyC,iBAAlBJ,EAAW,GAClCK,EAAeL,EAAW,GAG1BM,KACJZ,IACuB,IAAtBM,EAAWO,SAAiBH,GAAiBC,GAAcG,QAAUC,GAGxE,OACER,EAAAS,cAACC,EAAY,CACXC,GAAIxB,EAAMyB,KAAO,IAAM,YAClBzB,EAAMyB,KAAO,CAAEC,KAAM,UAAa,CAAA,EAChCC,QAAEpB,EACFqB,MAAApB,EACMqB,YAAAxB,EACEyB,cAAAZ,KACXP,EACJR,MAAOA,EACPO,IAAKA,GAEJV,EAAMS,UAAYG,EAAWO,OAC1BN,EAAMC,SAASiB,IACb/B,EAAMS,UACN,CAACuB,EAAkBC,IACjBpB,EAAAS,cAACY,EAAM,CAAC/B,MAAOA,EAAOgC,IAAKF,GACxBD,KAIP,KACS"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  useEffect,\n  memo,\n  type ReactNode,\n} from \"react\";\nimport { InView } from \"react-intersection-observer\";\n\nimport { Box } from \"../Box\";\nimport { Dots } from \"./Dots\";\n\nimport {\n  CarouselWrapper,\n  CarouselCardInner,\n  CarouselCard,\n  CarouselScrollArea,\n} from \"./styles\";\n\nexport type CarouselProps = {\n  /** Index in which the carousel is scrolled to on mount */\n  startPosition?: number;\n  /** call back for on position changed first prop is the possition */\n  onPositionChanged?: (position: number) => void;\n  /** show item left and right of current smaller than current item */\n  shrinkUnselectedPages?: boolean;\n  /** childrent item of the carousel */\n  children?: ReactNode;\n  /** set carousel image to full width of parent */\n  fullWidthChild?: boolean;\n};\n\n/**\n *\n * Lightweight carousel component that works with mouse and touch events,\n * Accepts react node array as children so will work with any html element as a child.\n *\n * Also works with external state that holds carousel postion,\n * by accepting a starting position as a prop, whilst also accepting a handler\n * with current position as a prop triggered when carousel component is interacted with.\n */\nexport const Carousel = ({\n  startPosition,\n  children,\n  onPositionChanged,\n  shrinkUnselectedPages = false,\n  fullWidthChild = false,\n}: CarouselProps) => {\n  const timer = React.useRef<NodeJS.Timeout | string | number | undefined>();\n  const isStartPositionSet = typeof startPosition !== \"undefined\";\n  const [currentPosition, setCurrentPosition] = useState(startPosition || 0);\n  const [smoothScrolling, setSmoothScrolling] = useState(!isStartPositionSet);\n  const scrollRef = useRef<HTMLUListElement>(null);\n\n  // remove null children\n  const childArray = React.Children.toArray(children).filter(Boolean);\n\n  const setPosition = (to: number) => {\n    if (currentPosition === to) return;\n    setCurrentPosition(to);\n\n    if (timer) {\n      clearTimeout(timer?.current);\n    }\n    timer.current = setTimeout(() => {\n      if (onPositionChanged && smoothScrolling) {\n        // Timer to debounce and only send the new position at the end of the scroll.\n        // When using external state which also sets start position,\n        // if scrolling to a new position past multiple cards,\n        // it would effectively scroll to the past the first adjacent card,\n        // receive the postion of the first card and stop there before it scrolls any further.\n        onPositionChanged(to);\n      }\n    }, 500);\n  };\n\n  const next = () => {\n    scrollToPosition(currentPosition + 1);\n  };\n\n  const previous = () => {\n    scrollToPosition(currentPosition - 1);\n  };\n\n  const scrollToPosition = (to: number) => {\n    if (scrollRef?.current) {\n      const containerWidth = scrollRef.current.scrollWidth;\n      const totalItems = scrollRef.current.children.length;\n      const atBegining = to === 0;\n      const atEnd = to === totalItems - 1;\n\n      const item = scrollRef.current.children[to] as HTMLElement;\n      if (!item) return;\n      const newScroll = item.offsetLeft;\n\n      if (atBegining) {\n        scrollRef.current.scrollTo(0, 0);\n      } else if (atEnd) {\n        scrollRef.current.scrollTo(containerWidth, 0);\n      } else {\n        scrollRef.current.scrollTo(newScroll, 0);\n      }\n\n      // always resume normal smooth scrolling behaviour after the first scroll\n      if (!smoothScrolling) {\n        setSmoothScrolling(true);\n      }\n    }\n  };\n\n  // Stop smooth scrolling when moving to a starting position\n  useEffect(() => {\n    if (isStartPositionSet) {\n      setSmoothScrolling(false);\n    }\n  }, [startPosition]);\n\n  useEffect(() => {\n    if (!smoothScrolling) {\n      scrollToPosition(startPosition || 0);\n    }\n  }, [smoothScrolling]);\n\n  const onlyChild = childArray.length === 1;\n\n  return (\n    <>\n      <Box>\n        <CarouselWrapper>\n          <CarouselScrollArea\n            ref={scrollRef}\n            aria-live=\"assertive\"\n            $smoothScrolling={smoothScrolling}\n            tabIndex={0}\n          >\n            {childArray.map((child, index) => {\n              const isSelected = index === currentPosition;\n              const keyString = `card-${index}`;\n              return (\n                <CarouselCard\n                  key={keyString}\n                  $onlyChild={onlyChild}\n                  $fullWidthChild={fullWidthChild}\n                >\n                  <InView\n                    threshold={0.5}\n                    as=\"div\"\n                    onChange={(inView) => {\n                      if (inView) {\n                        setPosition(index);\n                      }\n                    }}\n                  >\n                    <CarouselCardInner\n                      $onlyChild={onlyChild}\n                      $isSelected={isSelected}\n                      $shrinkUnselectedPages={shrinkUnselectedPages}\n                      $fullWidthChild={fullWidthChild}\n                    >\n                      {child}\n                    </CarouselCardInner>\n                  </InView>\n                </CarouselCard>\n              );\n            })}\n          </CarouselScrollArea>\n        </CarouselWrapper>\n      </Box>\n      {childArray.length > 1 ? (\n        <Box>\n          <Dots\n            count={childArray.length}\n            currentPosition={currentPosition}\n            scrollToPosition={scrollToPosition}\n            next={next}\n            previous={previous}\n          />\n        </Box>\n      ) : null}\n    </>\n  );\n};\n\nexport default memo(Carousel);\n"],"names":["Carousel","startPosition","children","onPositionChanged","shrinkUnselectedPages","fullWidthChild","timer","React","useRef","isStartPositionSet","currentPosition","setCurrentPosition","useState","smoothScrolling","setSmoothScrolling","scrollRef","childArray","Children","toArray","filter","Boolean","scrollToPosition","to","current","containerWidth","scrollWidth","atBegining","atEnd","length","item","newScroll","offsetLeft","scrollTo","useEffect","onlyChild","createElement","Fragment","Box","CarouselWrapper","CarouselScrollArea","ref","$smoothScrolling","tabIndex","map","child","index","isSelected","keyString","CarouselCard","key","$onlyChild","$fullWidthChild","InView","threshold","as","onChange","inView","clearTimeout","setTimeout","CarouselCardInner","$isSelected","$shrinkUnselectedPages","Dots","count","next","previous","memo"],"mappings":"8VAyCaA,EAAW,EACtBC,gBACAC,WACAC,oBACAC,yBAAwB,EACxBC,kBAAiB,MAEjB,MAAMC,EAAQC,EAAMC,SACdC,OAA8C,IAAlBR,GAC3BS,EAAiBC,GAAsBC,EAASX,GAAiB,IACjEY,EAAiBC,GAAsBF,GAAUH,GAClDM,EAAYP,EAAyB,MAGrCQ,EAAaT,EAAMU,SAASC,QAAQhB,GAAUiB,OAAOC,SA6BrDC,EAAoBC,IACxB,GAAIP,GAAWQ,QAAS,CACtB,MAAMC,EAAiBT,EAAUQ,QAAQE,YAEnCC,EAAoB,IAAPJ,EACbK,EAAQL,IAFKP,EAAUQ,QAAQrB,SAAS0B,OAEZ,EAE5BC,EAAOd,EAAUQ,QAAQrB,SAASoB,GACxC,IAAKO,EAAM,OACX,MAAMC,EAAYD,EAAKE,WAEnBL,EACFX,EAAUQ,QAAQS,SAAS,EAAG,GACrBL,EACTZ,EAAUQ,QAAQS,SAASR,EAAgB,GAE3CT,EAAUQ,QAAQS,SAASF,EAAW,GAInCjB,GACHC,GAAmB,KAMzBmB,GAAU,KACJxB,GACFK,GAAmB,KAEpB,CAACb,IAEJgC,GAAU,KACHpB,GACHQ,EAAiBpB,GAAiB,KAEnC,CAACY,IAEJ,MAAMqB,EAAkC,IAAtBlB,EAAWY,OAE7B,OACErB,EAAA4B,cAAA5B,EAAA6B,SAAA,KACE7B,EAAA4B,cAACE,EAAG,KACF9B,EAAA4B,cAACG,EAAe,KACd/B,EAAC4B,cAAAI,GACCC,IAAKzB,EACK,YAAA,YACQ0B,iBAAA5B,EAClB6B,SAAU,GAET1B,EAAW2B,KAAI,CAACC,EAAOC,KACtB,MAAMC,EAAaD,IAAUnC,EACvBqC,EAAY,QAAQF,IAC1B,OACEtC,EAAC4B,cAAAa,EACC,CAAAC,IAAKF,EAASG,WACFhB,EAASiB,gBACJ9C,GAEjBE,EAAA4B,cAACiB,EAAM,CACLC,UAAW,GACXC,GAAG,MACHC,SAAWC,IA1FT,IAAClC,EA2FGkC,GA1FlB9C,KADeY,EA4FauB,KA1FhClC,EAAmBW,GAEfhB,GACFmD,aAAanD,GAAOiB,SAEtBjB,EAAMiB,QAAUmC,YAAW,KACrBvD,GAAqBU,GAMvBV,EAAkBmB,KAEnB,QAgFaf,EAAA4B,cAACwB,EAAiB,CAAAT,WACJhB,EAAS0B,YACRd,EACWe,uBAAAzD,EACP+C,gBAAA9C,GAEhBuC,IAGQ,OAMxB5B,EAAWY,OAAS,EACnBrB,EAAA4B,cAACE,EAAG,KACF9B,EAAA4B,cAAC2B,EAAI,CACHC,MAAO/C,EAAWY,OAClBlB,gBAAiBA,EACjBW,iBAAkBA,EAClB2C,KAlGG,KACX3C,EAAiBX,EAAkB,EAAE,EAkG7BuD,SA/FO,KACf5C,EAAiBX,EAAkB,EAAE,KAiG/B,KACH,EAIQwD,EAAKlE"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  useEffect,\n  memo,\n  type ReactNode,\n} from \"react\";\nimport { InView } from \"react-intersection-observer\";\n\nimport { Box } from \"../Box\";\nimport { Dots } from \"./Dots\";\n\nimport {\n  CarouselWrapper,\n  CarouselCardInner,\n  CarouselCard,\n  CarouselScrollArea,\n} from \"./styles\";\n\nexport type CarouselProps = {\n  /** Index in which the carousel is scrolled to on mount */\n  startPosition?: number;\n  /** call back for on position changed first prop is the possition */\n  onPositionChanged?: (position: number) => void;\n  /** show item left and right of current smaller than current item */\n  shrinkUnselectedPages?: boolean;\n  /** childrent item of the carousel */\n  children?: ReactNode;\n  /** set carousel image to full width of parent */\n  fullWidthChild?: boolean;\n};\n\n/**\n *\n * Lightweight carousel component that works with mouse and touch events,\n * Accepts react node array as children so will work with any html element as a child.\n *\n * Also works with external state that holds carousel postion,\n * by accepting a starting position as a prop, whilst also accepting a handler\n * with current position as a prop triggered when carousel component is interacted with.\n */\nexport const Carousel = ({\n  startPosition,\n  children,\n  onPositionChanged,\n  shrinkUnselectedPages = false,\n  fullWidthChild = false,\n}: CarouselProps) => {\n  const timer = React.useRef<NodeJS.Timeout | string | number | undefined>(\n    undefined,\n  );\n  const isStartPositionSet = typeof startPosition !== \"undefined\";\n  const [currentPosition, setCurrentPosition] = useState(startPosition || 0);\n  const [smoothScrolling, setSmoothScrolling] = useState(!isStartPositionSet);\n  const scrollRef = useRef<HTMLUListElement>(null);\n\n  // remove null children\n  const childArray = React.Children.toArray(children).filter(Boolean);\n\n  const setPosition = (to: number) => {\n    if (currentPosition === to) return;\n    setCurrentPosition(to);\n\n    if (timer) {\n      clearTimeout(timer?.current);\n    }\n    timer.current = setTimeout(() => {\n      if (onPositionChanged && smoothScrolling) {\n        // Timer to debounce and only send the new position at the end of the scroll.\n        // When using external state which also sets start position,\n        // if scrolling to a new position past multiple cards,\n        // it would effectively scroll to the past the first adjacent card,\n        // receive the postion of the first card and stop there before it scrolls any further.\n        onPositionChanged(to);\n      }\n    }, 500);\n  };\n\n  const next = () => {\n    scrollToPosition(currentPosition + 1);\n  };\n\n  const previous = () => {\n    scrollToPosition(currentPosition - 1);\n  };\n\n  const scrollToPosition = (to: number) => {\n    if (scrollRef?.current) {\n      const containerWidth = scrollRef.current.scrollWidth;\n      const totalItems = scrollRef.current.children.length;\n      const atBegining = to === 0;\n      const atEnd = to === totalItems - 1;\n\n      const item = scrollRef.current.children[to] as HTMLElement;\n      if (!item) return;\n      const newScroll = item.offsetLeft;\n\n      if (atBegining) {\n        scrollRef.current.scrollTo(0, 0);\n      } else if (atEnd) {\n        scrollRef.current.scrollTo(containerWidth, 0);\n      } else {\n        scrollRef.current.scrollTo(newScroll, 0);\n      }\n\n      // always resume normal smooth scrolling behaviour after the first scroll\n      if (!smoothScrolling) {\n        setSmoothScrolling(true);\n      }\n    }\n  };\n\n  // Stop smooth scrolling when moving to a starting position\n  useEffect(() => {\n    if (isStartPositionSet) {\n      setSmoothScrolling(false);\n    }\n  }, [startPosition]);\n\n  useEffect(() => {\n    if (!smoothScrolling) {\n      scrollToPosition(startPosition || 0);\n    }\n  }, [smoothScrolling]);\n\n  const onlyChild = childArray.length === 1;\n\n  return (\n    <>\n      <Box>\n        <CarouselWrapper>\n          <CarouselScrollArea\n            ref={scrollRef}\n            aria-live=\"assertive\"\n            $smoothScrolling={smoothScrolling}\n            tabIndex={0}\n          >\n            {childArray.map((child, index) => {\n              const isSelected = index === currentPosition;\n              const keyString = `card-${index}`;\n              return (\n                <CarouselCard\n                  key={keyString}\n                  $onlyChild={onlyChild}\n                  $fullWidthChild={fullWidthChild}\n                >\n                  <InView\n                    threshold={0.5}\n                    as=\"div\"\n                    onChange={(inView) => {\n                      if (inView) {\n                        setPosition(index);\n                      }\n                    }}\n                  >\n                    <CarouselCardInner\n                      $onlyChild={onlyChild}\n                      $isSelected={isSelected}\n                      $shrinkUnselectedPages={shrinkUnselectedPages}\n                      $fullWidthChild={fullWidthChild}\n                    >\n                      {child}\n                    </CarouselCardInner>\n                  </InView>\n                </CarouselCard>\n              );\n            })}\n          </CarouselScrollArea>\n        </CarouselWrapper>\n      </Box>\n      {childArray.length > 1 ? (\n        <Box>\n          <Dots\n            count={childArray.length}\n            currentPosition={currentPosition}\n            scrollToPosition={scrollToPosition}\n            next={next}\n            previous={previous}\n          />\n        </Box>\n      ) : null}\n    </>\n  );\n};\n\nexport default memo(Carousel);\n"],"names":["Carousel","startPosition","children","onPositionChanged","shrinkUnselectedPages","fullWidthChild","timer","React","useRef","undefined","isStartPositionSet","currentPosition","setCurrentPosition","useState","smoothScrolling","setSmoothScrolling","scrollRef","childArray","Children","toArray","filter","Boolean","scrollToPosition","to","current","containerWidth","scrollWidth","atBegining","atEnd","length","item","newScroll","offsetLeft","scrollTo","useEffect","onlyChild","createElement","Fragment","Box","CarouselWrapper","CarouselScrollArea","ref","$smoothScrolling","tabIndex","map","child","index","isSelected","keyString","CarouselCard","key","$onlyChild","$fullWidthChild","InView","threshold","as","onChange","inView","clearTimeout","setTimeout","CarouselCardInner","$isSelected","$shrinkUnselectedPages","Dots","count","next","previous","memo"],"mappings":"8VAyCaA,EAAW,EACtBC,gBACAC,WACAC,oBACAC,yBAAwB,EACxBC,kBAAiB,MAEjB,MAAMC,EAAQC,EAAMC,YAClBC,GAEIC,OAA8C,IAAlBT,GAC3BU,EAAiBC,GAAsBC,EAASZ,GAAiB,IACjEa,EAAiBC,GAAsBF,GAAUH,GAClDM,EAAYR,EAAyB,MAGrCS,EAAaV,EAAMW,SAASC,QAAQjB,GAAUkB,OAAOC,SA6BrDC,EAAoBC,IACxB,GAAIP,GAAWQ,QAAS,CACtB,MAAMC,EAAiBT,EAAUQ,QAAQE,YAEnCC,EAAoB,IAAPJ,EACbK,EAAQL,IAFKP,EAAUQ,QAAQtB,SAAS2B,OAEZ,EAE5BC,EAAOd,EAAUQ,QAAQtB,SAASqB,GACxC,IAAKO,EAAM,OACX,MAAMC,EAAYD,EAAKE,WAEnBL,EACFX,EAAUQ,QAAQS,SAAS,EAAG,GACrBL,EACTZ,EAAUQ,QAAQS,SAASR,EAAgB,GAE3CT,EAAUQ,QAAQS,SAASF,EAAW,GAInCjB,GACHC,GAAmB,KAMzBmB,GAAU,KACJxB,GACFK,GAAmB,KAEpB,CAACd,IAEJiC,GAAU,KACHpB,GACHQ,EAAiBrB,GAAiB,KAEnC,CAACa,IAEJ,MAAMqB,EAAkC,IAAtBlB,EAAWY,OAE7B,OACEtB,EAAA6B,cAAA7B,EAAA8B,SAAA,KACE9B,EAAA6B,cAACE,EAAG,KACF/B,EAAA6B,cAACG,EAAe,KACdhC,EAAC6B,cAAAI,GACCC,IAAKzB,EACK,YAAA,YACQ0B,iBAAA5B,EAClB6B,SAAU,GAET1B,EAAW2B,KAAI,CAACC,EAAOC,KACtB,MAAMC,EAAaD,IAAUnC,EACvBqC,EAAY,QAAQF,IAC1B,OACEvC,EAAC6B,cAAAa,EACC,CAAAC,IAAKF,EAASG,WACFhB,EAASiB,gBACJ/C,GAEjBE,EAAA6B,cAACiB,EAAM,CACLC,UAAW,GACXC,GAAG,MACHC,SAAWC,IA1FT,IAAClC,EA2FGkC,GA1FlB9C,KADeY,EA4FauB,KA1FhClC,EAAmBW,GAEfjB,GACFoD,aAAapD,GAAOkB,SAEtBlB,EAAMkB,QAAUmC,YAAW,KACrBxD,GAAqBW,GAMvBX,EAAkBoB,KAEnB,QAgFahB,EAAA6B,cAACwB,EAAiB,CAAAT,WACJhB,EAAS0B,YACRd,EACWe,uBAAA1D,EACPgD,gBAAA/C,GAEhBwC,IAGQ,OAMxB5B,EAAWY,OAAS,EACnBtB,EAAA6B,cAACE,EAAG,KACF/B,EAAA6B,cAAC2B,EAAI,CACHC,MAAO/C,EAAWY,OAClBlB,gBAAiBA,EACjBW,iBAAkBA,EAClB2C,KAlGG,KACX3C,EAAiBX,EAAkB,EAAE,EAkG7BuD,SA/FO,KACf5C,EAAiBX,EAAkB,EAAE,KAiG/B,KACH,EAIQwD,EAAKnE"}

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

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import CheckBox, { type CheckBoxProps } from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<CheckBoxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    component: (props: CheckBoxProps) => React.JSX.Element;
     args: {
         id: string;
         disabled: boolean;

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

@@ -1,6 +1,6 @@
-import React, { type InputHTMLAttributes, type Ref, type ReactNode, type LegacyRef } from "react";
+import React, { type InputHTMLAttributes, type Ref, type ReactNode } from "react";
 export type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {
-    ref?: Ref<HTMLInputElement> | LegacyRef<HTMLInputElement>;
+    ref?: Ref<HTMLInputElement>;
     /** flag for error styling */
     hasError?: boolean;
     /** error message text  */
@@ -12,5 +12,5 @@ export type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {
  *
  * The value or children becomes the label, if you want an outer label for a checkbox or group of checkboxes please use a LegendWrapper component
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckBoxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: (props: CheckBoxProps) => React.JSX.Element;
 export default Checkbox;

package/lib/src/components/Checkbox/index.js

@@ -1,2 +1,2 @@
-import e,{forwardRef as r}from"react";import{useTheme as o,ThemeProvider as t}from"styled-components";import{faCheck as l}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as s}from"../../themes/cruk.js";import{ErrorText as i}from"../ErrorText/index.js";import{IconFa as d}from"../IconFa/index.js";import{StyledLabel as m,StyledInput as a,SelectedBorder as c,CheckWrapper as n,Check as f}from"./styles.js";const u=r(((r,u)=>{const p=o(),h={...s,...p},{children:E,hasError:x,errorMessage:b,...k}=r;return e.createElement(t,{theme:h},e.createElement(m,{$hasError:x||!!b||!1,$checked:r.checked||r.defaultChecked||!1,$disabled:r.disabled||!1},e.createElement(a,{...k,disabled:r.disabled||!1,type:"checkbox",ref:u,"aria-describedby":r.id&&b?`${r.id}-error`:void 0}),e.createElement(c,null),E||r.value,h.utilities.useDefaultFromControls?null:e.createElement(n,null,e.createElement(f,null,e.createElement(d,{faIcon:l,color:"check",size:"1.25em"})))),!!b&&e.createElement(i,{marginTop:"xxs",id:r.id?`${r.id}-error`:void 0},b))}));u.displayName="Checkbox";export{u as Checkbox,u as default};
+import e from"react";import{useTheme as r,ThemeProvider as o}from"styled-components";import{faCheck as t}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as l}from"../../themes/cruk.js";import{ErrorText as s}from"../ErrorText/index.js";import{IconFa as i}from"../IconFa/index.js";import{StyledLabel as d,StyledInput as m,SelectedBorder as c,CheckWrapper as a,Check as n}from"./styles.js";const f=f=>{const u=r(),p={...l,...u},{children:E,hasError:h,errorMessage:x,ref:b,...k}=f;return e.createElement(o,{theme:p},e.createElement(d,{$hasError:h||!!x||!1,$checked:f.checked||f.defaultChecked||!1,$disabled:f.disabled||!1},e.createElement(m,{...k,disabled:f.disabled||!1,type:"checkbox",ref:b,"aria-describedby":f.id&&x?`${f.id}-error`:void 0}),e.createElement(c,null),E||f.value,p.utilities.useDefaultFromControls?null:e.createElement(a,null,e.createElement(n,null,e.createElement(i,{faIcon:t,color:"check",size:"1.25em"})))),!!x&&e.createElement(s,{marginTop:"xxs",id:f.id?`${f.id}-error`:void 0},x))};export{f as Checkbox,f as default};
 //# sourceMappingURL=index.js.map

package/lib/src/components/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type LegacyRef,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { IconFa } from \"../IconFa\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  CheckWrapper,\n  Check,\n  SelectedBorder,\n} from \"./styles\";\n\nexport type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement> | LegacyRef<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * Checkboxes allow the user to select one or more items.\n *\n * 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\n */\nexport const Checkbox = forwardRef(\n  (props: CheckBoxProps, ref?: Ref<HTMLInputElement>) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n\n    const { children, hasError, errorMessage, ...rest } = props;\n\n    return (\n      <ThemeProvider theme={theme}>\n        <StyledLabel\n          $hasError={hasError || !!errorMessage || false}\n          $checked={props.checked || props.defaultChecked || false}\n          $disabled={props.disabled || false}\n        >\n          <StyledInput\n            {...rest}\n            disabled={props.disabled || false}\n            type=\"checkbox\"\n            ref={ref}\n            aria-describedby={\n              !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n            }\n          />\n          <SelectedBorder />\n          {children || props.value}\n          {theme.utilities.useDefaultFromControls ? null : (\n            <CheckWrapper>\n              <Check>\n                <IconFa faIcon={faCheck} color=\"check\" size=\"1.25em\" />\n              </Check>\n            </CheckWrapper>\n          )}\n        </StyledLabel>\n        {!!errorMessage && (\n          <ErrorText\n            marginTop=\"xxs\"\n            id={props.id ? `${props.id}-error` : undefined}\n          >\n            {errorMessage}\n          </ErrorText>\n        )}\n      </ThemeProvider>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","props","ref","foundTheme","useTheme","theme","defaultTheme","children","hasError","errorMessage","rest","React","createElement","ThemeProvider","StyledLabel","$hasError","$checked","checked","defaultChecked","disabled","StyledInput","type","id","undefined","SelectedBorder","value","utilities","useDefaultFromControls","CheckWrapper","Check","IconFa","faIcon","faCheck","color","size","ErrorText","marginTop","displayName"],"mappings":"4bAoCa,MAAAA,EAAWC,GACtB,CAACC,EAAsBC,KACrB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAGCI,SAAEA,EAAQC,SAAEA,EAAQC,aAAEA,KAAiBC,GAAST,EAEtD,OACEU,EAACC,cAAAC,EAAc,CAAAR,MAAOA,GACpBM,EAACC,cAAAE,EACY,CAAAC,UAAAP,KAAcC,IAAgB,EAAKO,SACpCf,EAAMgB,SAAWhB,EAAMiB,iBAAkB,YACxCjB,EAAMkB,WAAY,GAE7BR,EAAAC,cAACQ,EACK,IAAAV,EACJS,SAAUlB,EAAMkB,WAAY,EAC5BE,KAAK,WACLnB,IAAKA,EAAG,mBAEJD,EAAMqB,IAAQb,EAAe,GAAGR,EAAMqB,gBAAaC,IAGzDZ,EAAAC,cAACY,EAAiB,MACjBjB,GAAYN,EAAMwB,MAClBpB,EAAMqB,UAAUC,uBAAyB,KACxChB,gBAACiB,EAAY,KACXjB,EAAAC,cAACiB,EAAK,KACJlB,EAAAC,cAACkB,EAAO,CAAAC,OAAQC,EAASC,MAAM,QAAQC,KAAK,gBAKjDzB,GACDE,gBAACwB,EAAS,CACRC,UAAU,MACVd,GAAIrB,EAAMqB,GAAK,GAAGrB,EAAMqB,gBAAaC,GAEpCd,GAGS,IAKtBV,EAASsC,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  type ReactNode,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { IconFa } from \"../IconFa\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  CheckWrapper,\n  Check,\n  SelectedBorder,\n} from \"./styles\";\n\nexport type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * Checkboxes allow the user to select one or more items.\n *\n * 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\n */\nexport const Checkbox = (props: CheckBoxProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const { children, hasError, errorMessage, ref, ...rest } = props;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledLabel\n        $hasError={hasError || !!errorMessage || false}\n        $checked={props.checked || props.defaultChecked || false}\n        $disabled={props.disabled || false}\n      >\n        <StyledInput\n          {...rest}\n          disabled={props.disabled || false}\n          type=\"checkbox\"\n          ref={ref}\n          aria-describedby={\n            !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n          }\n        />\n        <SelectedBorder />\n        {children || props.value}\n        {theme.utilities.useDefaultFromControls ? null : (\n          <CheckWrapper>\n            <Check>\n              <IconFa faIcon={faCheck} color=\"check\" size=\"1.25em\" />\n            </Check>\n          </CheckWrapper>\n        )}\n      </StyledLabel>\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </ThemeProvider>\n  );\n};\n\nexport default Checkbox;\n"],"names":["Checkbox","props","foundTheme","useTheme","theme","defaultTheme","children","hasError","errorMessage","ref","rest","React","createElement","ThemeProvider","StyledLabel","$hasError","$checked","checked","defaultChecked","disabled","StyledInput","type","id","undefined","SelectedBorder","value","utilities","useDefaultFromControls","CheckWrapper","Check","IconFa","faIcon","faCheck","color","size","ErrorText","marginTop"],"mappings":"2aAkCa,MAAAA,EAAYC,IACvB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAGCI,SAAEA,EAAQC,SAAEA,EAAQC,aAAEA,EAAYC,IAAEA,KAAQC,GAAST,EAE3D,OACEU,EAACC,cAAAC,EAAc,CAAAT,MAAOA,GACpBO,EAACC,cAAAE,EACY,CAAAC,UAAAR,KAAcC,IAAgB,EAAKQ,SACpCf,EAAMgB,SAAWhB,EAAMiB,iBAAkB,YACxCjB,EAAMkB,WAAY,GAE7BR,EAAAC,cAACQ,EACK,IAAAV,EACJS,SAAUlB,EAAMkB,WAAY,EAC5BE,KAAK,WACLZ,IAAKA,EAAG,mBAEJR,EAAMqB,IAAQd,EAAe,GAAGP,EAAMqB,gBAAaC,IAGzDZ,EAAAC,cAACY,EAAiB,MACjBlB,GAAYL,EAAMwB,MAClBrB,EAAMsB,UAAUC,uBAAyB,KACxChB,gBAACiB,EAAY,KACXjB,EAAAC,cAACiB,EAAK,KACJlB,EAAAC,cAACkB,EAAO,CAAAC,OAAQC,EAASC,MAAM,QAAQC,KAAK,gBAKjD1B,GACDG,gBAACwB,EAAS,CACRC,UAAU,MACVd,GAAIrB,EAAMqB,GAAK,GAAGrB,EAAMqB,gBAAaC,GAEpCf,GAGS"}

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

@@ -3,14 +3,22 @@ export declare const transitionDurationSeconds = 0.5;
 export declare const FlippingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $open: boolean;
 }>> & string;
-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;
+export declare const DefaultHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ButtonHTMLAttributes<HTMLElement> & {
+    appearance?: import("../../types").ButtonAppearanceType;
+    full?: boolean;
+    href?: string;
+    size?: "m" | "l";
+    css?: unknown;
+    as?: import("react").ElementType;
+    isIconButton?: boolean;
+    ref?: import("react").Ref<HTMLElement>;
+    children?: import("react").ReactNode;
 }, {
     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>>;
+}>> & string & Omit<(props: import("../Button").ButtonProps) => import("react").JSX.Element, 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;

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

@@ -1,16 +1,22 @@
 import { type ThemeType } from "../../types";
 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;
+export declare const TextAsLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    textColor?: string;
+    textAlign?: "left" | "right" | "center" | "justify";
+    textSize?: import("../../types").FontSizeType;
+    textWeight?: number | string;
+    textFontFamily?: string;
+    as?: import("react").ElementType;
+    wordBreak?: import("../../types").WordBreakType;
+    overflowWrap?: import("../../types").OverflowWrapType;
+    ref?: import("react").Ref<HTMLElement>;
 }, {
     theme: ThemeType;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<(props: import("../Text").TextProps) => import("react").JSX.Element, 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"> & {
+export declare const LargeDateTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<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;

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

@@ -2,7 +2,15 @@ import { type ThemeType } from "../../types";
 type ThemeProps = {
     theme: ThemeType;
 };
-export declare const StyledErrorText: 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 StyledErrorText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    textColor?: string;
+    textAlign?: "left" | "right" | "center" | "justify";
+    textSize?: import("../../types").FontSizeType;
+    textWeight?: number | string;
+    textFontFamily?: string;
+    as?: import("react").ElementType;
+    wordBreak?: import("../../types").WordBreakType;
+    overflowWrap?: import("../../types").OverflowWrapType;
+    ref?: import("react").Ref<HTMLElement>;
+}, ThemeProps>> & string & Omit<(props: import("../Text").TextProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default StyledErrorText;

package/lib/src/components/Footer/styles.d.ts

@@ -5,18 +5,12 @@ type ThemeProps = {
 export declare const StyledFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, ThemeProps>> & string;
 export declare const FooterContentWrapper: 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 FooterSection: 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 FooterSectionLogo: 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"> & {
-    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 FooterSectionLinks: 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"> & {
-    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 FooterSectionLogo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & ThemeProps, never>> & string;
+export declare const FooterSectionLinks: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & ThemeProps, never>> & string;
 export declare const StyledNav: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, ThemeProps>> & string;
 export declare const StyledUL: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 export declare const StyledLI: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ThemeProps>> & string;
-export declare const FooterSectionAddress: 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"> & {
-    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 FooterSectionAddress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & ThemeProps, never>> & string;
 export declare const StyledRegulatorLogo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
 export declare const StyledAddress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 export {};

package/lib/src/components/GlobalStyle.d.ts

@@ -1,2 +1,2 @@
-export declare const GlobalStyle: import("react").ForwardRefExoticComponent<import("styled-components").ExecutionProps & import("react").RefAttributes<import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>>> & {};
+export declare const GlobalStyle: import("react").ForwardRefExoticComponent<Omit<JSX.LibraryManagedAttributes<T, import("styled-components").ExecutionProps>, "ref"> & import("react").RefAttributes<import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>>> & {};
 export default GlobalStyle;

package/lib/src/components/GlobalStyleNoFontFace.d.ts

@@ -1,2 +1,2 @@
-export declare const GlobalStyleNoFontFace: import("react").ForwardRefExoticComponent<import("styled-components").ExecutionProps & import("react").RefAttributes<import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>>> & {};
+export declare const GlobalStyleNoFontFace: import("react").ForwardRefExoticComponent<Omit<JSX.LibraryManagedAttributes<T, import("styled-components").ExecutionProps>, "ref"> & import("react").RefAttributes<import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>>> & {};
 export default GlobalStyleNoFontFace;

package/lib/src/components/InfoBox/InfoBox.stories.d.ts

@@ -3,7 +3,7 @@ import { type StoryObj } from "@storybook/react";
 import InfoBox from ".";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import(".").InfoBoxProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    component: ({ children, titleText, titleTextColor, descriptionText, descriptionTextColor, icon, ref, ...spacingAndHTMLElementProps }: import(".").InfoBoxProps) => React.JSX.Element;
     args: {
         titleText: string;
         titleTextColor: string;

package/lib/src/components/InfoBox/index.d.ts

@@ -24,5 +24,5 @@ export type InfoBoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
   
   The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.
    */
-export declare const InfoBox: React.ForwardRefExoticComponent<Omit<InfoBoxProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const InfoBox: ({ children, titleText, titleTextColor, descriptionText, descriptionTextColor, icon, ref, ...spacingAndHTMLElementProps }: InfoBoxProps) => React.JSX.Element;
 export default InfoBox;

package/lib/src/components/InfoBox/index.js

@@ -1,2 +1,2 @@
-import e,{forwardRef as o}from"react";import{useTheme as t}from"styled-components";import{crukTheme as r}from"../../themes/cruk.js";import{Box as n}from"../Box/index.js";import{Text as m}from"../Text/index.js";import{Heading as i}from"../Heading/index.js";import{StyledInfoBox as l}from"./styles.js";const a=o((({children:o,titleText:a,titleTextColor:s,descriptionText:c,descriptionTextColor:x,icon:d,...p},g)=>{const f=t(),C={...r,...f},k=p.backgroundColor||C.tokenColors.grey_200;return e.createElement(l,{theme:C,...p,backgroundColor:k,margin:p.margin||"none",ref:g},d&&e.createElement(n,{marginRight:"s"},d),e.createElement("div",null,a&&e.createElement(i,{as:"p",margin:"none",h4:!0,marginBottom:"xxs",textColor:s||C.colors.textDark},a),c&&e.createElement(m,{textColor:x||C.colors.textDark,marginBottom:"none"},c),o))}));a.displayName="InfoBox";export{a as InfoBox,a as default};
+import e from"react";import{useTheme as t}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{Box as r}from"../Box/index.js";import{Text as n}from"../Text/index.js";import{Heading as m}from"../Heading/index.js";import{StyledInfoBox as i}from"./styles.js";const l=({children:l,titleText:s,titleTextColor:a,descriptionText:c,descriptionTextColor:x,icon:d,ref:p,...g})=>{const f=t(),C={...o,...f},k=g.backgroundColor||C.tokenColors.grey_200;return e.createElement(i,{theme:C,...g,backgroundColor:k,margin:g.margin||"none",ref:p},d&&e.createElement(r,{marginRight:"s"},d),e.createElement("div",null,s&&e.createElement(m,{as:"p",margin:"none",h4:!0,marginBottom:"xxs",textColor:a||C.colors.textDark},s),c&&e.createElement(n,{textColor:x||C.colors.textDark,marginBottom:"none"},c),l))};export{l as InfoBox,l as default};
 //# sourceMappingURL=index.js.map