@cruk/cruk-react-components 7.1.5 → 7.2.2

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  useRef,\n  type InputHTMLAttributes,\n  type Ref,\n  type FocusEvent,\n  type ChangeEvent,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\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\";\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\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}: 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  const [addressOptions, setAddressOptions] = useState<AddressOptionsType[]>(\n    [],\n  );\n  const [activeOption, setActiveOption] = useState(-1);\n  const wrapperRef = useRef<HTMLDivElement>(null);\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?.length > 0 && 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          <div\n            className=\"screen-reader-only\"\n            role=\"status\"\n            aria-live=\"assertive\"\n          >\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          </div>\n          <div className=\"address-lookup-list-wrapper\" ref={wrapperRef}>\n            <ul\n              aria-label=\"found addresses\"\n              id=\"found_addresses\"\n              role=\"listbox\"\n            >\n              {addressOptions.map((address, index) => (\n                <li\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                >\n                  <Text as=\"span\" data-hj-suppress>\n                    {address.Text} {address.Description}\n                  </Text>\n                  {address.Type !== \"Address\" && (\n                    <>\n                      <div className=\"screen-reader-only\">\n                        press enter for these addresses\n                      </div>\n                      <IconFa faIcon={faChevronRight} />\n                    </>\n                  )}\n                </li>\n              ))}\n            </ul>\n          </div>\n        </>\n      )}\n    </>\n  );\n};\n\nexport default AddressLookup;\n"],"names":["AddressLookup","_a","apiKey","countries","errorMessage","hasError","isValid","isValidVisible","isInvalidVisible","label","hintText","ref","_b","onAddressError","error","console","log","onAddressSelected","onChange","onBlur","props","__rest","_c","useState","addressOptions","setAddressOptions","_d","activeOption","setActiveOption","wrapperRef","useRef","clearOptions","searchDebounced","useCallback","debounce","query","search","id","length","searchUrl","concat","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","className","map","index","tabIndex","onClick","as","Description","IconFa","faIcon","faChevronRight"],"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\";\n\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\";\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\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}: 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  const [addressOptions, setAddressOptions] = useState<AddressOptionsType[]>(\n    [],\n  );\n  const [activeOption, setActiveOption] = useState(-1);\n  const wrapperRef = useRef<HTMLDivElement>(null);\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?.length > 0 && 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          <div\n            className=\"screen-reader-only\"\n            role=\"status\"\n            aria-live=\"assertive\"\n          >\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          </div>\n          <div className=\"address-lookup-list-wrapper\" ref={wrapperRef}>\n            <ul\n              aria-label=\"found addresses\"\n              id=\"found_addresses\"\n              role=\"listbox\"\n            >\n              {addressOptions.map((address, index) => (\n                <li\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                >\n                  <Text as=\"span\" data-hj-suppress>\n                    {address.Text} {address.Description}\n                  </Text>\n                  {address.Type !== \"Address\" && (\n                    <>\n                      <div className=\"screen-reader-only\">\n                        press enter for these addresses\n                      </div>\n                      <IconFa faIcon={faChevronRight} />\n                    </>\n                  )}\n                </li>\n              ))}\n            </ul>\n          </div>\n        </>\n      )}\n    </>\n  );\n};\n\nexport default AddressLookup;\n"],"names":["AddressLookup","_a","apiKey","countries","errorMessage","hasError","isValid","isValidVisible","isInvalidVisible","label","hintText","ref","_b","onAddressError","error","console","log","onAddressSelected","onChange","onBlur","props","__rest","_c","useState","addressOptions","setAddressOptions","_d","activeOption","setActiveOption","wrapperRef","useRef","clearOptions","searchDebounced","useCallback","debounce","query","search","id","length","searchUrl","concat","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","className","map","index","tabIndex","onClick","as","Description","IconFa","faIcon","faChevronRight"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{__rest as a,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";var t=function(a){var e=a.url,r=a.name,t=a.themeName;if(e)return e;var s=r&&"string"==typeof r&&"Anonymous"!==r&&/[a-z]/i.exec(r[0].trim())?"icon-avatar-".concat(r[0].trim().toUpperCase(),".png"):"icon-avatar-Anonymous.png",c="".concat(function(a){switch(a){case"su2c":return"https://rcl.assets.cancerresearchuk.org/images/avatar/su2c/";case"bowelbabe":return"https://rcl.assets.cancerresearchuk.org/images/avatar/bowelbabe/";case"rfl":return"https://rcl.assets.cancerresearchuk.org/images/avatar/rfl/";default:return"https://rcl.assets.cancerresearchuk.org/images/avatar/cruk2/"}}(t)).concat(s);return c};function s(s){var c=s.url,n=s.name,o=s.size,m=void 0===o?"m":o,u=s.alt,i=void 0===u?"":u,l=s.themeName,v=void 0===l?"cruk":l,h=a(s,["url","name","size","alt","themeName"]);return r.createElement("img",e({className:"component-avatar","data-size":m,src:t({url:c,name:n,themeName:v}),alt:i},h))}export{s as Avatar,s as default};
+import{__rest as e,__assign as a}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";var t=function(e){var a=e.url,r=e.name,t=e.themeName;if(a)return a;var s=r&&"string"==typeof r&&"Anonymous"!==r&&/[a-z]/i.exec(r[0].trim())?"icon-avatar-".concat(r[0].trim().toUpperCase(),".png"):"icon-avatar-Anonymous.png",c="".concat(function(e){switch(e){case"su2c":return"https://rcl.assets.cancerresearchuk.org/images/avatar/su2c/";case"bowelbabe":return"https://rcl.assets.cancerresearchuk.org/images/avatar/bowelbabe/";case"rfl":return"https://rcl.assets.cancerresearchuk.org/images/avatar/rfl/";default:return"https://rcl.assets.cancerresearchuk.org/images/avatar/cruk2/"}}(t)).concat(s);return c};function s(s){var c=s.url,n=s.name,o=s.size,m=void 0===o?"m":o,i=s.alt,u=void 0===i?"":i,l=s.themeName,v=void 0===l?"cruk":l,h=e(s,["url","name","size","alt","themeName"]);return r.createElement("img",a({className:"component-avatar","data-size":m,src:t({url:c,name:n,themeName:v}),alt:u},h))}export{s as Avatar};
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-import{__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{themeColorOrString as e}from"../../utils/themeUtils.js";function t(t){var s=t.children,i=t.size,l=t.isSquare,a=t.backgroundColor,d=t.textColor,n=t.borderColor,m=null!=l?l:!("string"==typeof s),u=d?e(d):void 0,c=a?e(a):void 0,b=n?e(n):void 0,p={"data-size":i,"data-is-square":m};return r.createElement("span",o({className:["component-badge"].join(" ")},p,{style:{color:u,backgroundColor:c,borderColor:b}}),s)}export{t as Badge,t as default};
+import{__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{themeColorOrString as e}from"../../utils/themeUtils.js";function t(t){var i=t.children,s=t.size,l=t.isSquare,a=t.backgroundColor,n=t.textColor,d=t.borderColor,m=null!=l?l:!("string"==typeof i),c=n?e(n):void 0,u=a?e(a):void 0,b=d?e(d):void 0,p={"data-size":s,"data-is-square":m};return r.createElement("span",o({className:["component-badge"].join(" ")},p,{style:{color:c,backgroundColor:u,borderColor:b}}),i)}export{t as Badge};
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-import{__rest as a,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";var n=function(n){var r=a(n,[]),o=r.textColor,d=r.backgroundColor,g=r.margin,e=r.marginTop,p=r.marginRight,m=r.marginBottom,l=r.marginLeft,c=r.marginVertical,s=r.marginHorizontal,f=r.padding,h=r.paddingTop,b=r.paddingRight,u=r.paddingBottom,v=r.paddingLeft,z=r.paddingVertical,x=r.paddingHorizontal,B=r.as,C=r.children,H=r.ref,L=a(r,["textColor","backgroundColor","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","as","children","ref"]),R={"data-color":o,"data-bg-color":d,"data-margin":g,"data-margin-top":e,"data-margin-right":p,"data-margin-bottom":m,"data-margin-left":l,"data-margin-vertical":c,"data-margin-horizontal":s,"data-padding":f,"data-padding-top":h,"data-padding-right":b,"data-padding-bottom":u,"data-padding-left":v,"data-padding-vertical":z,"data-padding-horizontal":x};return i.createElement(i.Fragment,null,B&&"div"!==B?null:i.createElement("div",t({ref:H,className:["component-box","color-props","spacing-props"].join(" ")},L,R),C),"span"===B?i.createElement("span",t({ref:H,className:["component-box","color-props","spacing-props"].join(" ")},L,R),C):null)};export{n as Box,n as default};
+import{__rest as a,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";var n=function(n){var r=a(n,[]),o=r.textColor,d=r.backgroundColor,g=r.margin,p=r.marginTop,e=r.marginRight,m=r.marginBottom,l=r.marginLeft,c=r.marginVertical,s=r.marginHorizontal,f=r.padding,h=r.paddingTop,b=r.paddingRight,u=r.paddingBottom,v=r.paddingLeft,z=r.paddingVertical,x=r.paddingHorizontal,B=r.as,C=r.children,H=r.ref,L=a(r,["textColor","backgroundColor","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","as","children","ref"]),R={"data-color":o,"data-bg-color":d,"data-margin":g,"data-margin-top":p,"data-margin-right":e,"data-margin-bottom":m,"data-margin-left":l,"data-margin-vertical":c,"data-margin-horizontal":s,"data-padding":f,"data-padding-top":h,"data-padding-right":b,"data-padding-bottom":u,"data-padding-left":v,"data-padding-vertical":z,"data-padding-horizontal":x};return i.createElement(i.Fragment,null,B&&"div"!==B?null:i.createElement("div",t({ref:H,className:["component-box","color-props","spacing-props"].join(" ")},L,R),C),"span"===B?i.createElement("span",t({ref:H,className:["component-box","color-props","spacing-props"].join(" ")},L,R),C):null)};export{n as Box};
 //# sourceMappingURL=index.js.map

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 a}from"./Dots.js";var c=function(t){var c=t.startPosition,s=t.children,d=t.onPositionChanged,u=t.shrinkUnselectedPages,h=void 0!==u&&u,m=t.fullWidthChild,f=void 0!==m&&m,v=e.useRef(void 0),g=void 0!==c,p=r(c||0),E=p[0],x=p[1],T=r(!g),y=T[0],P=T[1],C=n(null),j=e.Children.toArray(s).filter(Boolean),k=function(e){if(null==C?void 0:C.current){var t=C.current.scrollWidth,r=0===e,n=e===C.current.children.length-1,l=C.current.children[e];if(!l)return;var o=l.offsetLeft;r?C.current.scrollTo(0,0):n?C.current.scrollTo(t,0):C.current.scrollTo(o,0),y||P(!0)}};l(function(){g&&P(!1)},[c]),l(function(){y||k(c||0)},[y]);var N=1===j.length;return e.createElement("div",{className:"component-carousel","data-only-child":N},e.createElement(i,null,e.createElement("ul",{className:"carousel-scroll-area",ref:C,"aria-live":"assertive","data-smooth-scrolling":y,tabIndex:0},j.map(function(t,r){var n=r===E,l="card-".concat(r);return e.createElement("li",{key:l,"data-only-child":N,"data-full-width-child":f},e.createElement(o,{threshold:.5,as:"div",onChange:function(e){var t;e&&E!==(t=r)&&(x(t),v&&clearTimeout(null==v?void 0:v.current),v.current=setTimeout(function(){d&&y&&d(t)},500))}},e.createElement("div",{className:"carousel-card-inner","data-only-child":N,"data-selected":n,"data-shrink-unselected-pages":h,"data-full-width-child":f},t)))}))),j.length>1?e.createElement(i,null,e.createElement(a,{count:j.length,currentPosition:E,scrollToPosition:k,next:function(){k(E+1)},previous:function(){k(E-1)}})):null)};t(c);export{c as Carousel};
+import e,{memo as t,useState as n,useRef as r,useCallback as a,useEffect as l}from"react";import{faCaretLeft as c,faCaretRight as o}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{Box as i}from"../Box/index.js";import{IconFa as s}from"../IconFa/index.js";var u=function(t){var u=t.startPosition,d=t.children,m=t.onPositionChanged,f=t.shrinkUnselectedPages,h=void 0!==f&&f,v=t.fullWidthChild,E=void 0!==v&&v,p=e.useRef(void 0),x=void 0!==u,b=n(u||0),g=b[0],N=b[1],y=n(!x),k=y[0],I=y[1],w=r(null),C=e.Children.toArray(d).filter(Boolean),T=1===C.length,S=C.length,j=g!==S-1,A=0!==g,P=a(function(e){g!==e&&(N(e),p&&clearTimeout(null==p?void 0:p.current),p.current=setTimeout(function(){m&&k&&m(e)},500))},[g,m,k]),z=a(function(e){if(null==w?void 0:w.current){var t=w.current.scrollWidth,n=0===e,r=e===w.current.children.length-1,a=w.current.children[e];if(!a)return;var l=a.offsetLeft;n?w.current.scrollTo(0,0):r?w.current.scrollTo(t,0):w.current.scrollTo(l,0),k||I(!0)}},[k]);return l(function(){x&&I(!1)},[x,u]),l(function(){k||z(u||0)},[z,k,u]),l(function(){if(w.current){var e=new IntersectionObserver(function(e){e.forEach(function(e){if(e.isIntersecting){var t=parseInt(e.target.getAttribute("data-carousel-item-index")||"0",10);P(t)}})},{root:w.current,threshold:.5});return w.current.querySelectorAll("li").forEach(function(t){return e.observe(t)}),function(){return e.disconnect()}}},[d,N,P]),e.createElement("div",{className:"component-carousel","data-only-child":T},e.createElement(i,null,e.createElement("ul",{className:"carousel-scroll-area",ref:w,"aria-live":"assertive","data-smooth-scrolling":k,tabIndex:0},C.map(function(t,n){var r=n===g,a="card-".concat(n);return e.createElement("li",{key:a,"data-only-child":T,"data-full-width-child":E,"data-carousel-item-index":n},e.createElement("div",{className:"carousel-card-inner","data-only-child":T,"data-selected":r,"data-shrink-unselected-pages":h,"data-full-width-child":E},t))}))),C.length>1?e.createElement(i,null,e.createElement("div",{className:"button-wrapper"},e.createElement("button",{className:"carousel-button",disabled:!A,"aria-label":"previous",onClick:function(){z(g-1)}},e.createElement("span",{className:"vertical-align"},e.createElement(s,{faIcon:c,size:"1.25em"}),e.createElement("span",{className:"screen-reader-only"},"Scroll carousel to previous index"))),e.createElement("div",{className:"dot-container","data-count":S},C.map(function(t,n){return e.createElement("button",{className:"dot",key:"arrayIndex".concat(n),role:"switch","aria-checked":n===g,"data-index":n,onClick:function(){z(n)}},e.createElement("span",{className:"screen-reader-only"},"Scroll carousel to index ".concat(n)))})),e.createElement("button",{className:"carousel-button",disabled:!j,"aria-label":"next",onClick:function(){z(g+1)}},e.createElement("span",{className:"vertical-align"},e.createElement(s,{faIcon:o,size:"1.25em"}),e.createElement("span",{className:"screen-reader-only"},"Scroll carousel to next index"))))):null)};t(u);export{u 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\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}: {\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  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    <div className=\"component-carousel\" data-only-child={onlyChild}>\n      <Box>\n        <ul\n          className=\"carousel-scroll-area\"\n          ref={scrollRef}\n          aria-live=\"assertive\"\n          data-smooth-scrolling={smoothScrolling}\n          tabIndex={0}\n        >\n          {childArray.map((child, index) => {\n            const isSelected = index === currentPosition;\n            const keyString = `card-${index}`;\n            return (\n              <li\n                key={keyString}\n                data-only-child={onlyChild}\n                data-full-width-child={fullWidthChild}\n              >\n                <InView\n                  threshold={0.5}\n                  as=\"div\"\n                  onChange={(inView) => {\n                    if (inView) {\n                      setPosition(index);\n                    }\n                  }}\n                >\n                  <div\n                    className=\"carousel-card-inner\"\n                    data-only-child={onlyChild}\n                    data-selected={isSelected}\n                    data-shrink-unselected-pages={shrinkUnselectedPages}\n                    data-full-width-child={fullWidthChild}\n                  >\n                    {child}\n                  </div>\n                </InView>\n              </li>\n            );\n          })}\n        </ul>\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    </div>\n  );\n};\n\nexport default memo(Carousel);\n"],"names":["Carousel","_a","startPosition","children","onPositionChanged","_b","shrinkUnselectedPages","_c","fullWidthChild","timer","React","useRef","undefined","isStartPositionSet","_d","useState","currentPosition","setCurrentPosition","_e","smoothScrolling","setSmoothScrolling","scrollRef","childArray","Children","toArray","filter","Boolean","scrollToPosition","to","current","containerWidth","scrollWidth","atBegining","atEnd","length","item","newScroll","offsetLeft","scrollTo","useEffect","onlyChild","createElement","className","Box","ref","tabIndex","map","child","index","isSelected","keyString","concat","key","InView","threshold","as","onChange","inView","clearTimeout","setTimeout","Dots","count","next","previous","memo"],"mappings":"yOAqBO,IAAMA,EAAW,SAACC,OACvBC,EAAaD,EAAAC,cACbC,EAAQF,EAAAE,SACRC,EAAiBH,EAAAG,kBACjBC,EAAAJ,EAAAK,sBAAAA,OAAqB,IAAAD,KACrBE,EAAAN,EAAAO,eAAAA,OAAc,IAAAD,GAAQA,EAahBE,EAAQC,EAAMC,YAClBC,GAEIC,OAA8C,IAAlBX,EAC5BY,EAAwCC,EAASb,GAAiB,GAAjEc,EAAeF,EAAA,GAAEG,OAClBC,EAAwCH,GAAUF,GAAjDM,EAAeD,EAAA,GAAEE,EAAkBF,EAAA,GACpCG,EAAYV,EAAyB,MAGrCW,EAAaZ,EAAMa,SAASC,QAAQrB,GAAUsB,OAAOC,SA6BrDC,EAAmB,SAACC,GACxB,GAAIP,aAAS,EAATA,EAAWQ,QAAS,CACtB,IAAMC,EAAiBT,EAAUQ,QAAQE,YAEnCC,EAAoB,IAAPJ,EACbK,EAAQL,IAFKP,EAAUQ,QAAQ1B,SAAS+B,OAEZ,EAE5BC,EAAOd,EAAUQ,QAAQ1B,SAASyB,GACxC,IAAKO,EAAM,OACX,IAAMC,EAAYD,EAAKE,WAEnBL,EACFX,EAAUQ,QAAQS,SAAS,EAAG,GACrBL,EACTZ,EAAUQ,QAAQS,SAASR,EAAgB,GAE3CT,EAAUQ,QAAQS,SAASF,EAAW,GAInCjB,GACHC,GAAmB,EAEvB,CACF,EAGAmB,EAAU,WACJ1B,GACFO,GAAmB,EAEvB,EAAG,CAAClB,IAEJqC,EAAU,WACHpB,GACHQ,EAAiBzB,GAAiB,EAEtC,EAAG,CAACiB,IAEJ,IAAMqB,EAAkC,IAAtBlB,EAAWY,OAE7B,OACExB,EAAA+B,cAAA,MAAA,CAAKC,UAAU,uCAAsCF,GACnD9B,EAAA+B,cAACE,EAAG,KACFjC,EAAA+B,cAAA,KAAA,CACEC,UAAU,uBACVE,IAAKvB,EAAS,YACJ,YAAW,wBACEF,EACvB0B,SAAU,GAETvB,EAAWwB,IAAI,SAACC,EAAOC,GACtB,IAAMC,EAAaD,IAAUhC,EACvBkC,EAAY,QAAAC,OAAQH,GAC1B,OACEtC,sBACE0C,IAAKF,EAAS,kBACGV,0BACMhC,GAEvBE,EAAA+B,cAACY,EAAM,CACLC,UAAW,GACXC,GAAG,MACHC,SAAU,SAACC,GA1FP,IAAC7B,EA2FC6B,GA1FhBzC,KADeY,EA4FWoB,KA1F9B/B,EAAmBW,GAEfnB,GACFiD,aAAajD,eAAAA,EAAOoB,SAEtBpB,EAAMoB,QAAU8B,WAAW,WACrBvD,GAAqBe,GAMvBf,EAAkBwB,EAEtB,EAAG,KA8EW,GAEAlB,EAAA+B,cAAA,MAAA,CACEC,UAAU,sBAAqB,kBACdF,kBACFS,EAAU,+BACK3C,EAAqB,wBAC5BE,GAEtBuC,IAKX,KAGHzB,EAAWY,OAAS,EACnBxB,EAAA+B,cAACE,EAAG,KACFjC,EAAA+B,cAACmB,EAAI,CACHC,MAAOvC,EAAWY,OAClBlB,gBAAiBA,EACjBW,iBAAkBA,EAClBmC,KAlGG,WACXnC,EAAiBX,EAAkB,EACrC,EAiGU+C,SA/FO,WACfpC,EAAiBX,EAAkB,EACrC,KAgGQ,KAGV,EAEegD,EAAKhE"}
+{"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  useCallback,\n} from \"react\";\nimport { faCaretLeft, faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { Box } from \"../Box\";\nimport { IconFa } from \"../IconFa\";\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}: {\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  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  const childArray = React.Children.toArray(children).filter(Boolean); // remove null children\n  const onlyChild = childArray.length === 1;\n  const count = childArray.length;\n  const moreOnRight = currentPosition !== count - 1;\n  const moreOnLeft = currentPosition !== 0;\n\n  // setPosition is used instead of setCurrentPosition on scroll observers\n  // because both startPosition and setCurrentPosition might be used\n  // as the getter and setter of an external state,\n  // if we have intersection observers also updating external state\n  // calling onPositionChanged they will conflict with each other.\n  // To avoid this we debounce and delay the calls to onPositionChanged.\n  const setPosition = useCallback(\n    (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    [currentPosition, onPositionChanged, smoothScrolling],\n  );\n\n  const next = () => {\n    scrollToPosition(currentPosition + 1);\n  };\n\n  const previous = () => {\n    scrollToPosition(currentPosition - 1);\n  };\n\n  const scrollToPosition = useCallback(\n    (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    [smoothScrolling],\n  );\n\n  // Stop smooth scrolling when moving to a starting position\n  useEffect(() => {\n    if (isStartPositionSet) {\n      setSmoothScrolling(false);\n    }\n  }, [isStartPositionSet, startPosition]);\n\n  // if smooth scrolling is disabled then we must be setting a start position scroll to start position\n  // scrollToPosition will scroll to start position and re-enable smooth scrolling\n  useEffect(() => {\n    if (!smoothScrolling) {\n      scrollToPosition(startPosition || 0);\n    }\n  }, [scrollToPosition, smoothScrolling, startPosition]);\n\n  // set up intersection observer to update current position on scroll\n  useEffect(() => {\n    if (!scrollRef.current) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            const slideIndex = parseInt(\n              entry.target.getAttribute(\"data-carousel-item-index\") || \"0\",\n              10,\n            );\n            setPosition(slideIndex);\n          }\n        });\n      },\n      {\n        root: scrollRef.current,\n        threshold: 0.5,\n      },\n    );\n\n    const slideElements = scrollRef.current.querySelectorAll(\"li\");\n    slideElements.forEach((slide) => observer.observe(slide));\n\n    return () => observer.disconnect();\n  }, [children, setCurrentPosition, setPosition]);\n\n  return (\n    <div className=\"component-carousel\" data-only-child={onlyChild}>\n      <Box>\n        <ul\n          className=\"carousel-scroll-area\"\n          ref={scrollRef}\n          aria-live=\"assertive\"\n          data-smooth-scrolling={smoothScrolling}\n          tabIndex={0}\n        >\n          {childArray.map((child, index) => {\n            const isSelected = index === currentPosition;\n            const keyString = `card-${index}`;\n            return (\n              <li\n                key={keyString}\n                data-only-child={onlyChild}\n                data-full-width-child={fullWidthChild}\n                data-carousel-item-index={index}\n              >\n                <div\n                  className=\"carousel-card-inner\"\n                  data-only-child={onlyChild}\n                  data-selected={isSelected}\n                  data-shrink-unselected-pages={shrinkUnselectedPages}\n                  data-full-width-child={fullWidthChild}\n                >\n                  {child}\n                </div>\n              </li>\n            );\n          })}\n        </ul>\n      </Box>\n      {childArray.length > 1 ? (\n        <Box>\n          <div className=\"button-wrapper\">\n            <button\n              className=\"carousel-button\"\n              disabled={!moreOnLeft}\n              aria-label=\"previous\"\n              onClick={() => {\n                previous();\n              }}\n            >\n              <span className=\"vertical-align\">\n                <IconFa faIcon={faCaretLeft} size=\"1.25em\" />\n                <span className=\"screen-reader-only\">\n                  Scroll carousel to previous index\n                </span>\n              </span>\n            </button>\n\n            <div className=\"dot-container\" data-count={count}>\n              {childArray.map((item, index) => {\n                const scrollTo = () => {\n                  scrollToPosition(index);\n                };\n                return (\n                  <button\n                    className=\"dot\"\n                    key={`arrayIndex${index}`}\n                    role=\"switch\"\n                    aria-checked={index === currentPosition}\n                    data-index={index}\n                    onClick={scrollTo}\n                  >\n                    <span className=\"screen-reader-only\">{`Scroll carousel to index ${index}`}</span>\n                  </button>\n                );\n              })}\n            </div>\n\n            <button\n              className=\"carousel-button\"\n              disabled={!moreOnRight}\n              aria-label=\"next\"\n              onClick={() => {\n                next();\n              }}\n            >\n              <span className=\"vertical-align\">\n                <IconFa faIcon={faCaretRight} size=\"1.25em\" />\n                <span className=\"screen-reader-only\">\n                  Scroll carousel to next index\n                </span>\n              </span>\n            </button>\n          </div>\n        </Box>\n      ) : null}\n    </div>\n  );\n};\n\nexport default memo(Carousel);\n"],"names":["Carousel","_a","startPosition","children","onPositionChanged","_b","shrinkUnselectedPages","_c","fullWidthChild","timer","React","useRef","undefined","isStartPositionSet","_d","useState","currentPosition","setCurrentPosition","_e","smoothScrolling","setSmoothScrolling","scrollRef","childArray","Children","toArray","filter","Boolean","onlyChild","length","count","moreOnRight","moreOnLeft","setPosition","useCallback","to","clearTimeout","current","setTimeout","scrollToPosition","containerWidth","scrollWidth","atBegining","atEnd","item","newScroll","offsetLeft","scrollTo","useEffect","observer","IntersectionObserver","entries","forEach","entry","isIntersecting","slideIndex","parseInt","target","getAttribute","root","threshold","querySelectorAll","slide","observe","disconnect","createElement","className","Box","ref","tabIndex","map","child","index","isSelected","keyString","concat","key","disabled","onClick","IconFa","faIcon","faCaretLeft","size","role","faCaretRight","memo"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{faCheck as a}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{ErrorText as t}from"../ErrorText/index.js";import{IconFa as i}from"../IconFa/index.js";var c=function(c){var s=c.children,l=c.hasError,n=c.errorMessage,d=c.ref,m=e(c,["children","hasError","errorMessage","ref"]);return o.createElement(o.Fragment,null,o.createElement("label",{className:"component-checkbox"},o.createElement("input",r({},m,{type:"checkbox",disabled:c.disabled||!1,"aria-invalid":l||!!n||!1,ref:d,"aria-describedby":c.id&&n?"".concat(c.id,"-error"):void 0})),s||c.value,o.createElement("div",{className:"check-wrapper"},o.createElement("div",{className:"check"},o.createElement(i,{faIcon:a,color:"text-light",size:"full"})))),!!n&&o.createElement(t,{marginTop:"xxs",id:c.id?"".concat(c.id,"-error"):void 0},n))};export{c as Checkbox,c as default};
+import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{faCheck as a}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{ErrorText as t}from"../ErrorText/index.js";import{IconFa as i}from"../IconFa/index.js";var c=function(c){var s=c.children,l=c.hasError,n=c.errorMessage,d=c.ref,m=e(c,["children","hasError","errorMessage","ref"]);return o.createElement(o.Fragment,null,o.createElement("label",{className:"component-checkbox"},o.createElement("input",r({},m,{type:"checkbox",disabled:c.disabled||!1,"aria-invalid":l||!!n||!1,ref:d,"aria-describedby":c.id&&n?"".concat(c.id,"-error"):void 0})),s||c.value,o.createElement("div",{className:"check-wrapper"},o.createElement("div",{className:"check"},o.createElement(i,{faIcon:a,color:"text-light",size:"full"})))),!!n&&o.createElement(t,{marginTop:"xxs",id:c.id?"".concat(c.id,"-error"):void 0},n))};export{c as Checkbox};
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-import e,{useState as a,useRef as t,useEffect as n}from"react";import{faChevronDown as o}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as r}from"../IconFa/index.js";function c(c){var i=c.id,l=c.headerTitleText,d=c.headerTitleTextColor,s=c.headerTitleTextSize,m=c.headerTitleTextFontFamily,p=c.headerComponent,u=c.startOpen,f=c.onOpenChange,h=c.children,x=a(u||!1),v=x[0],b=x[1],E=a(!!u),T=E[0],y=E[1],N=t(null),k=t(null),C=function(){var e=!v;b(e),!1===e?k.current=setTimeout(function(){return y(!1)},500):setTimeout(function(){return y(!0)},0),void 0!==f&&f(e)};return n(function(){b(u||!1),y(!!u)},[u]),e.createElement("div",{id:i,className:"component-collapse"},p?e.createElement("div",{className:"custom-header","aria-controls":"".concat(i,"-header"),"aria-expanded":v,id:"".concat(i,"-header"),onClick:C,"aria-disabled":!1,"aria-label":l,onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key&&"Spacebar"!==e.key||(e.preventDefault(),C())},role:"button",tabIndex:0},p):e.createElement("button",{className:["default-header","color-props","text-props"].join(" "),id:"".concat(i,"-header"),type:"button",onClick:C,"aria-controls":"".concat(i,"-header"),"aria-expanded":v,"data-color":d,"data-text-size":s||"m","data-text-font-family":m},e.createElement("span",{className:"spacer"},l),e.createElement("span",{className:"spacer"},e.createElement("span",{className:"flipping-icon"},e.createElement(r,{faIcon:o})))),e.createElement("div",{className:"collapse-content",id:"".concat(i,"-content"),ref:N,role:"region","aria-hidden":!v,"data-is-visible":T,"aria-labelledby":"".concat(i,"-header")},e.createElement("div",{style:{overflow:"hidden"}},h)))}export{c as Collapse,c as default};
+import e,{useState as a,useRef as t,useEffect as n}from"react";import{faChevronDown as o}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as r}from"../IconFa/index.js";function c(c){var i=c.id,l=c.headerTitleText,d=c.headerTitleTextColor,s=c.headerTitleTextSize,m=c.headerTitleTextFontFamily,p=c.headerComponent,u=c.startOpen,f=c.onOpenChange,h=c.children,x=a(u||!1),v=x[0],b=x[1],E=a(!!u),T=E[0],y=E[1],N=t(null),k=t(null),C=function(){var e=!v;b(e),!1===e?k.current=setTimeout(function(){return y(!1)},500):setTimeout(function(){return y(!0)},0),void 0!==f&&f(e)};return n(function(){b(u||!1),y(!!u)},[u]),e.createElement("div",{id:i,className:"component-collapse"},p?e.createElement("div",{className:"custom-header","aria-controls":"".concat(i,"-header"),"aria-expanded":v,id:"".concat(i,"-header"),onClick:C,"aria-disabled":!1,"aria-label":l,onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key&&"Spacebar"!==e.key||(e.preventDefault(),C())},role:"button",tabIndex:0},p):e.createElement("button",{className:["default-header","color-props","text-props"].join(" "),id:"".concat(i,"-header"),type:"button",onClick:C,"aria-controls":"".concat(i,"-header"),"aria-expanded":v,"data-color":d,"data-text-size":s||"m","data-text-font-family":m},e.createElement("span",{className:"spacer"},l),e.createElement("span",{className:"spacer"},e.createElement("span",{className:"flipping-icon"},e.createElement(r,{faIcon:o})))),e.createElement("div",{className:"collapse-content",id:"".concat(i,"-content"),ref:N,role:"region","aria-hidden":!v,"data-is-visible":T,"aria-labelledby":"".concat(i,"-header")},e.createElement("div",{style:{overflow:"hidden"}},h)))}export{c as Collapse};
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-import e from"react";import{ErrorText as t}from"../ErrorText/index.js";import{Text as a}from"../Text/index.js";import{TextField as r}from"../TextField/index.js";function n(n){var o=n.label,i=n.hintText,d=n.day,l=n.month,m=n.year,s=n.dayName,u=void 0===s?"day":s,c=n.monthName,p=void 0===c?"month":c,h=n.yearName,x=void 0===h?"year":h,y=n.dayHasError,E=n.monthHasError,f=n.yearHasError,b=n.errorMessage,v=n.onChange,g=void 0===v?function(){}:v,C=n.onBlur,N=void 0===C?function(){}:C,q=n.onFocus,I=void 0===q?function(){}:q,L=n.disabled,w=n.required;return e.createElement("fieldset",{className:"component-date-field"},e.createElement("legend",null,o,!w&&e.createElement("span",{style:{fontWeight:"var(--typ-font-weight-base, 300)"}}," (optional)")),i&&e.createElement(a,{textColor:"text-mid"},i),e.createElement("div",{className:"date-text-field-wrapper"},e.createElement(r,{label:"Day",type:"text",name:u,required:!!w,hideRequiredIndicationInLabel:!0,maxLength:2,autoComplete:"bday-day",pattern:"[0-9]*",inputMode:"numeric",value:d,onChange:g,onBlur:N,onFocus:I,hasError:y,disabled:L})),e.createElement("div",{className:"date-text-field-wrapper"},e.createElement(r,{label:"Month",type:"text",name:p,required:!!w,hideRequiredIndicationInLabel:!0,maxLength:2,autoComplete:"bday-month",pattern:"[0-9]*",inputMode:"numeric",value:l,onChange:g,onBlur:N,onFocus:I,hasError:E,disabled:L})),e.createElement("div",{className:"large-date-text-field-wrapper"},e.createElement(r,{label:"Year",type:"text",name:x,required:!!w,hideRequiredIndicationInLabel:!0,maxLength:4,autoComplete:"bday-year",pattern:"[0-9]*",inputMode:"numeric",value:m,onChange:g,onBlur:N,onFocus:I,hasError:f,disabled:L})),b&&e.createElement("div",{className:"error-text-wrapper"},e.createElement(t,{marginTop:"xxs"},b)))}export{n as DateField,n as default};
+import e from"react";import{ErrorText as t}from"../ErrorText/index.js";import{Text as a}from"../Text/index.js";import{TextField as r}from"../TextField/index.js";function n(n){var o=n.label,i=n.hintText,d=n.day,l=n.month,m=n.year,s=n.dayName,c=void 0===s?"day":s,u=n.monthName,p=void 0===u?"month":u,h=n.yearName,x=void 0===h?"year":h,y=n.dayHasError,E=n.monthHasError,b=n.yearHasError,f=n.errorMessage,v=n.onChange,g=void 0===v?function(){}:v,C=n.onBlur,N=void 0===C?function(){}:C,q=n.onFocus,I=void 0===q?function(){}:q,L=n.disabled,w=n.required;return e.createElement("fieldset",{className:"component-date-field"},e.createElement("legend",null,o,!w&&e.createElement("span",{style:{fontWeight:"var(--typ-font-weight-base, 300)"}}," (optional)")),i&&e.createElement(a,{textColor:"text-mid"},i),e.createElement("div",{className:"date-text-field-wrapper"},e.createElement(r,{label:"Day",type:"text",name:c,required:!!w,hideRequiredIndicationInLabel:!0,maxLength:2,autoComplete:"bday-day",pattern:"[0-9]*",inputMode:"numeric",value:d,onChange:g,onBlur:N,onFocus:I,hasError:y,disabled:L})),e.createElement("div",{className:"date-text-field-wrapper"},e.createElement(r,{label:"Month",type:"text",name:p,required:!!w,hideRequiredIndicationInLabel:!0,maxLength:2,autoComplete:"bday-month",pattern:"[0-9]*",inputMode:"numeric",value:l,onChange:g,onBlur:N,onFocus:I,hasError:E,disabled:L})),e.createElement("div",{className:"large-date-text-field-wrapper"},e.createElement(r,{label:"Year",type:"text",name:x,required:!!w,hideRequiredIndicationInLabel:!0,maxLength:4,autoComplete:"bday-year",pattern:"[0-9]*",inputMode:"numeric",value:m,onChange:g,onBlur:N,onFocus:I,hasError:b,disabled:L})),f&&e.createElement("div",{className:"error-text-wrapper"},e.createElement(t,{marginTop:"xxs"},f)))}export{n as DateField};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/DateField/index.tsx"],"sourcesContent":["import React, { type InputHTMLAttributes } from \"react\";\n\nimport { ErrorText } from \"../ErrorText\";\nimport { Text } from \"../Text\";\nimport { TextField } from \"../TextField\";\n\n/**\n * To be used in forms entering dates like date of birth which are known dates and would take too long to get to with a date picker\n * */\nexport function DateField({\n  label,\n  hintText,\n  day,\n  month,\n  year,\n  dayName = \"day\",\n  monthName = \"month\",\n  yearName = \"year\",\n  dayHasError,\n  monthHasError,\n  yearHasError,\n  errorMessage,\n  onChange = () => {\n    // no op\n  },\n  onBlur = () => {\n    // no op\n  },\n  onFocus = () => {\n    // no op\n  },\n  disabled,\n  required,\n}: InputHTMLAttributes<HTMLInputElement> & {\n  /** label text */\n  label: string;\n  /** hind text */\n  hintText?: string;\n  /** day field text value  */\n  day: string;\n  /** month field text value  */\n  month: string;\n  /** year field text value  */\n  year: string;\n  /** name passed to day field input element */\n  dayName?: string;\n  /** name passed to month field input element */\n  monthName?: string;\n  /** name passed to year field input element */\n  yearName?: string;\n  /** flag of error styling on day field */\n  dayHasError?: boolean;\n  /** flag of error styling on month field */\n  monthHasError?: boolean;\n  /** flag of error styling on year field */\n  yearHasError?: boolean;\n  /** error message text */\n  errorMessage?: string;\n}) {\n  return (\n    <fieldset className=\"component-date-field\">\n      <legend>\n        {label}\n        {!required && (\n          <span\n            style={{\n              fontWeight: \"var(--typ-font-weight-base, 300)\",\n            }}\n          >\n            {` (optional)`}\n          </span>\n        )}\n      </legend>\n      {hintText && <Text textColor=\"text-mid\">{hintText}</Text>}\n      <div className=\"date-text-field-wrapper\">\n        <TextField\n          label=\"Day\"\n          type=\"text\"\n          name={dayName}\n          required={!!required}\n          hideRequiredIndicationInLabel\n          maxLength={2}\n          autoComplete=\"bday-day\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={day}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={dayHasError}\n          disabled={disabled}\n        />\n      </div>\n      <div className=\"date-text-field-wrapper\">\n        <TextField\n          label=\"Month\"\n          type=\"text\"\n          name={monthName}\n          required={!!required}\n          hideRequiredIndicationInLabel\n          maxLength={2}\n          autoComplete=\"bday-month\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={month}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={monthHasError}\n          disabled={disabled}\n        />\n      </div>\n      <div className=\"large-date-text-field-wrapper\">\n        <TextField\n          label=\"Year\"\n          type=\"text\"\n          name={yearName}\n          required={!!required}\n          hideRequiredIndicationInLabel\n          maxLength={4}\n          autoComplete=\"bday-year\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={year}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={yearHasError}\n          disabled={disabled}\n        />\n      </div>\n      {errorMessage && (\n        <div className=\"error-text-wrapper\">\n          <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>\n        </div>\n      )}\n    </fieldset>\n  );\n}\n\nexport default DateField;\n"],"names":["DateField","_a","label","hintText","day","month","year","_b","dayName","_c","monthName","_d","yearName","dayHasError","monthHasError","yearHasError","errorMessage","_e","onChange","_f","onBlur","_g","onFocus","disabled","required","React","createElement","className","style","fontWeight","Text","textColor","TextField","type","name","hideRequiredIndicationInLabel","maxLength","autoComplete","pattern","inputMode","value","hasError","ErrorText","marginTop"],"mappings":"iKASM,SAAUA,EAAUC,OACxBC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAGH,EAAAG,IACHC,EAAKJ,EAAAI,MACLC,EAAIL,EAAAK,KACJC,EAAAN,EAAAO,QAAAA,OAAO,IAAAD,EAAG,MAAKA,EACfE,EAAAR,EAAAS,UAAAA,OAAS,IAAAD,EAAG,QAAOA,EACnBE,aAAAC,aAAW,OAAMD,EACjBE,EAAWZ,EAAAY,YACXC,EAAab,EAAAa,cACbC,EAAYd,EAAAc,aACZC,iBACAC,EAAAhB,EAAAiB,SAAAA,OAAQ,IAAAD,EAAG,WAEX,EAACA,EACDE,EAAAlB,EAAAmB,OAAAA,OAAM,IAAAD,EAAG,WAET,EAACA,EACDE,EAAApB,EAAAqB,QAAAA,OAAO,IAAAD,EAAG,WAEV,IACAE,EAAQtB,EAAAsB,SACRC,EAAQvB,EAAAuB,SA2BR,OACEC,EAAAC,cAAA,WAAA,CAAUC,UAAU,wBAClBF,EAAAC,cAAA,SAAA,KACGxB,GACCsB,GACAC,EAAAC,cAAA,OAAA,CACEE,MAAO,CACLC,WAAY,qCAGb,gBAIN1B,GAAYsB,gBAACK,EAAI,CAACC,UAAU,YAAY5B,GACzCsB,EAAAC,cAAA,MAAA,CAAKC,UAAU,2BACbF,EAAAC,cAACM,EAAS,CACR9B,MAAM,MACN+B,KAAK,OACLC,KAAM1B,EACNgB,WAAYA,EACZW,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,WACbC,QAAQ,SACRC,UAAU,UACVC,MAAOpC,EACPc,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTmB,SAAU5B,EACVU,SAAUA,KAGdE,EAAAC,cAAA,MAAA,CAAKC,UAAU,2BACbF,EAAAC,cAACM,EAAS,CACR9B,MAAM,QACN+B,KAAK,OACLC,KAAMxB,EACNc,WAAYA,EACZW,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,aACbC,QAAQ,SACRC,UAAU,UACVC,MAAOnC,EACPa,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTmB,SAAU3B,EACVS,SAAUA,KAGdE,EAAAC,cAAA,MAAA,CAAKC,UAAU,iCACbF,EAAAC,cAACM,EAAS,CACR9B,MAAM,OACN+B,KAAK,OACLC,KAAMtB,EACNY,WAAYA,EACZW,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,YACbC,QAAQ,SACRC,UAAU,UACVC,MAAOlC,EACPY,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTmB,SAAU1B,EACVQ,SAAUA,KAGbP,GACCS,EAAAC,cAAA,MAAA,CAAKC,UAAU,sBACbF,EAAAC,cAACgB,EAAS,CAACC,UAAU,OAAO3B,IAKtC"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/DateField/index.tsx"],"sourcesContent":["import React, { type InputHTMLAttributes } from \"react\";\n\nimport { ErrorText } from \"../ErrorText\";\nimport { Text } from \"../Text\";\nimport { TextField } from \"../TextField\";\n\n/**\n * To be used in forms entering dates like date of birth which are known dates and would take too long to get to with a date picker\n * */\nexport function DateField({\n  label,\n  hintText,\n  day,\n  month,\n  year,\n  dayName = \"day\",\n  monthName = \"month\",\n  yearName = \"year\",\n  dayHasError,\n  monthHasError,\n  yearHasError,\n  errorMessage,\n  onChange = () => {\n    // no op\n  },\n  onBlur = () => {\n    // no op\n  },\n  onFocus = () => {\n    // no op\n  },\n  disabled,\n  required,\n}: InputHTMLAttributes<HTMLInputElement> & {\n  /** label text */\n  label: string;\n  /** hind text */\n  hintText?: string;\n  /** day field text value  */\n  day: string;\n  /** month field text value  */\n  month: string;\n  /** year field text value  */\n  year: string;\n  /** name passed to day field input element */\n  dayName?: string;\n  /** name passed to month field input element */\n  monthName?: string;\n  /** name passed to year field input element */\n  yearName?: string;\n  /** flag of error styling on day field */\n  dayHasError?: boolean;\n  /** flag of error styling on month field */\n  monthHasError?: boolean;\n  /** flag of error styling on year field */\n  yearHasError?: boolean;\n  /** error message text */\n  errorMessage?: string;\n}) {\n  return (\n    <fieldset className=\"component-date-field\">\n      <legend>\n        {label}\n        {!required && (\n          <span\n            style={{\n              fontWeight: \"var(--typ-font-weight-base, 300)\",\n            }}\n          >\n            {` (optional)`}\n          </span>\n        )}\n      </legend>\n      {hintText && <Text textColor=\"text-mid\">{hintText}</Text>}\n      <div className=\"date-text-field-wrapper\">\n        <TextField\n          label=\"Day\"\n          type=\"text\"\n          name={dayName}\n          required={!!required}\n          hideRequiredIndicationInLabel\n          maxLength={2}\n          autoComplete=\"bday-day\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={day}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={dayHasError}\n          disabled={disabled}\n        />\n      </div>\n      <div className=\"date-text-field-wrapper\">\n        <TextField\n          label=\"Month\"\n          type=\"text\"\n          name={monthName}\n          required={!!required}\n          hideRequiredIndicationInLabel\n          maxLength={2}\n          autoComplete=\"bday-month\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={month}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={monthHasError}\n          disabled={disabled}\n        />\n      </div>\n      <div className=\"large-date-text-field-wrapper\">\n        <TextField\n          label=\"Year\"\n          type=\"text\"\n          name={yearName}\n          required={!!required}\n          hideRequiredIndicationInLabel\n          maxLength={4}\n          autoComplete=\"bday-year\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={year}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={yearHasError}\n          disabled={disabled}\n        />\n      </div>\n      {errorMessage && (\n        <div className=\"error-text-wrapper\">\n          <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>\n        </div>\n      )}\n    </fieldset>\n  );\n}\n\nexport default DateField;\n"],"names":["DateField","_a","label","hintText","day","month","year","_b","dayName","_c","monthName","_d","yearName","dayHasError","monthHasError","yearHasError","errorMessage","_e","onChange","_f","onBlur","_g","onFocus","disabled","required","React","createElement","className","style","fontWeight","Text","textColor","TextField","type","name","hideRequiredIndicationInLabel","maxLength","autoComplete","pattern","inputMode","value","hasError","ErrorText","marginTop"],"mappings":"iKASM,SAAUA,EAAUC,OACxBC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAGH,EAAAG,IACHC,EAAKJ,EAAAI,MACLC,EAAIL,EAAAK,KACJC,EAAAN,EAAAO,QAAAA,OAAO,IAAAD,EAAG,MAAKA,EACfE,EAAAR,EAAAS,UAAAA,WAASD,EAAG,QAAOA,EACnBE,aAAAC,aAAW,OAAMD,EACjBE,EAAWZ,EAAAY,YACXC,EAAab,EAAAa,cACbC,EAAYd,EAAAc,aACZC,iBACAC,EAAAhB,EAAAiB,SAAAA,OAAQ,IAAAD,EAAG,WAEX,EAACA,EACDE,EAAAlB,EAAAmB,OAAAA,OAAM,IAAAD,EAAG,WAET,EAACA,EACDE,EAAApB,EAAAqB,QAAAA,OAAO,IAAAD,EAAG,WAEV,IACAE,EAAQtB,EAAAsB,SACRC,EAAQvB,EAAAuB,SA2BR,OACEC,EAAAC,cAAA,WAAA,CAAUC,UAAU,wBAClBF,EAAAC,cAAA,SAAA,KACGxB,GACCsB,GACAC,EAAAC,cAAA,OAAA,CACEE,MAAO,CACLC,WAAY,qCAGb,gBAIN1B,GAAYsB,gBAACK,EAAI,CAACC,UAAU,YAAY5B,GACzCsB,EAAAC,cAAA,MAAA,CAAKC,UAAU,2BACbF,EAAAC,cAACM,EAAS,CACR9B,MAAM,MACN+B,KAAK,OACLC,KAAM1B,EACNgB,WAAYA,EACZW,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,WACbC,QAAQ,SACRC,UAAU,UACVC,MAAOpC,EACPc,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTmB,SAAU5B,EACVU,SAAUA,KAGdE,EAAAC,cAAA,MAAA,CAAKC,UAAU,2BACbF,EAAAC,cAACM,EAAS,CACR9B,MAAM,QACN+B,KAAK,OACLC,KAAMxB,EACNc,WAAYA,EACZW,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,aACbC,QAAQ,SACRC,UAAU,UACVC,MAAOnC,EACPa,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTmB,SAAU3B,EACVS,SAAUA,KAGdE,EAAAC,cAAA,MAAA,CAAKC,UAAU,iCACbF,EAAAC,cAACM,EAAS,CACR9B,MAAM,OACN+B,KAAK,OACLC,KAAMtB,EACNY,WAAYA,EACZW,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,YACbC,QAAQ,SACRC,UAAU,UACVC,MAAOlC,EACPY,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTmB,SAAU1B,EACVQ,SAAUA,KAGbP,GACCS,EAAAC,cAAA,MAAA,CAAKC,UAAU,sBACbF,EAAAC,cAACgB,EAAS,CAACC,UAAU,OAAO3B,IAKtC"}

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

@@ -1,2 +1,2 @@
-import{__rest as t,__assign as a}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{faTriangleExclamation as e}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as o}from"../IconFa/index.js";import{Box as n}from"../Box/index.js";import{removeEmpty as i}from"../../utils/Helper.js";function d(d){var l=d.textColor,p=d.backgroundColor,g=d.margin,m=d.marginTop,s=d.marginRight,c=d.marginBottom,f=d.marginLeft,x=d.marginVertical,h=d.marginHorizontal,u=d.padding,z=d.paddingTop,v=d.paddingRight,w=d.paddingBottom,b=d.paddingLeft,j=d.paddingVertical,B=d.paddingHorizontal,E=d.textSize,F=d.textAlign,k=d.textWeight,H=d.textFontFamily,R=d.wordBreak,y=d.overflowWrap,C=d.as,L=d.children,T=d.ref,V=t(d,["textColor","backgroundColor","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","textSize","textAlign","textWeight","textFontFamily","wordBreak","overflowWrap","as","children","ref"]),W=i({"data-color":l,"data-bg-color":p,"data-text-size":E,"data-text-align":F,"data-text-weight":k,"data-text-font-family":H,"data-word-break":R,"data-overflow-wrap":y,"data-margin":g,"data-margin-top":m,"data-margin-right":s,"data-margin-bottom":c,"data-margin-left":f,"data-margin-vertical":x,"data-margin-horizontal":h,"data-padding":u,"data-padding-top":z,"data-padding-right":v,"data-padding-bottom":w,"data-padding-left":b,"data-padding-vertical":j,"data-padding-horizontal":B}),N="string"==typeof L&&L.length,A=r.createElement(r.Fragment,null,N?r.createElement(n,{as:"span",marginRight:"xxs"},r.createElement(o,{faIcon:e,size:"1em"})):null,L);return r.createElement(r.Fragment,null,C&&"span"!==C?null:r.createElement("span",a({className:["component-error-text","text-props","spacing-props","color-props"].join(" "),ref:T},V,W,{role:"alert"}),A),"div"===C?r.createElement("div",a({className:["component-error-text","text-props","spacing-props","color-props"].join(" "),ref:T},V,W,{role:"alert"}),A):null,"p"===C?r.createElement("p",a({className:["component-error-text","text-props","spacing-props","color-props"].join(" "),ref:T},V,W,{role:"alert"}),A):null)}export{d as ErrorText,d as default};
+import{__rest as t,__assign as a}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{faTriangleExclamation as e}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as o}from"../IconFa/index.js";import{Box as n}from"../Box/index.js";import{removeEmpty as i}from"../../utils/Helper.js";function d(d){var l=d.textColor,p=d.backgroundColor,g=d.margin,m=d.marginTop,s=d.marginRight,c=d.marginBottom,f=d.marginLeft,x=d.marginVertical,h=d.marginHorizontal,u=d.padding,z=d.paddingTop,v=d.paddingRight,w=d.paddingBottom,b=d.paddingLeft,j=d.paddingVertical,B=d.paddingHorizontal,E=d.textSize,F=d.textAlign,k=d.textWeight,H=d.textFontFamily,R=d.wordBreak,y=d.overflowWrap,C=d.as,L=d.children,T=d.ref,V=t(d,["textColor","backgroundColor","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","textSize","textAlign","textWeight","textFontFamily","wordBreak","overflowWrap","as","children","ref"]),W=i({"data-color":l,"data-bg-color":p,"data-text-size":E,"data-text-align":F,"data-text-weight":k,"data-text-font-family":H,"data-word-break":R,"data-overflow-wrap":y,"data-margin":g,"data-margin-top":m,"data-margin-right":s,"data-margin-bottom":c,"data-margin-left":f,"data-margin-vertical":x,"data-margin-horizontal":h,"data-padding":u,"data-padding-top":z,"data-padding-right":v,"data-padding-bottom":w,"data-padding-left":b,"data-padding-vertical":j,"data-padding-horizontal":B}),N="string"==typeof L&&L.length,A=r.createElement(r.Fragment,null,N?r.createElement(n,{as:"span",marginRight:"xxs"},r.createElement(o,{faIcon:e,size:"1em"})):null,L);return r.createElement(r.Fragment,null,C&&"span"!==C?null:r.createElement("span",a({className:["component-error-text","text-props","spacing-props","color-props"].join(" "),ref:T},V,W,{role:"alert"}),A),"div"===C?r.createElement("div",a({className:["component-error-text","text-props","spacing-props","color-props"].join(" "),ref:T},V,W,{role:"alert"}),A):null,"p"===C?r.createElement("p",a({className:["component-error-text","text-props","spacing-props","color-props"].join(" "),ref:T},V,W,{role:"alert"}),A):null)}export{d as ErrorText};
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-import e from"react";import{Text as a}from"../Text/index.js";function t(t){var n=t.children,r=t.themeName,s=void 0===r?"cruk":r,o=t.footerText,c=e.Children.toArray(n);return e.createElement("footer",{className:"component-footer"},e.createElement("div",{className:"footer-bar"}),e.createElement("div",{className:"footer-wrapper"},e.createElement("div",{className:"footer-section"},e.createElement("nav",{className:"footer-nav","aria-label":"footer links"},e.createElement("ul",{className:"footer-ul"},c.length?c.map(function(a,t){var n="footerLink".concat(t);return e.createElement("li",{key:n,className:"footer-li"},a)}):null))),e.createElement("div",{className:"footer-section"},e.createElement("img",{className:"footer-regulator-logo",width:130,height:40,alt:"Registered with Fundraising Regulator",src:"https://rcl.assets.cancerresearchuk.org/images/logos/fundreg.png"})),e.createElement("div",{className:"footer-section"},o?e.createElement(a,{textSize:"m"},o):e.createElement(e.Fragment,null,e.createElement(a,{textSize:"m",as:"span"},function(e){switch(e){case"su2c":return"Stand Up To Cancer and Stand Up To Cancer Brand Marks are registered trademarks of the Entertainment Industry Foundation. Cancer Research UK is a registered charity in England and Wales (1089464), Scotland(SC041666), the Isle of Man (1103) and Jersey (247). A company limited by guarantee. Registered company in England and Wales (4325234) and the Isle of Man (5713F). Registered address: 2 Redman Place, London, E20 1JQ. Donations will be made to Cancer Research UK in support of the Stand Up To Cancer campaign.";case"bowelbabe":return"The Bowelbabe Fund for Cancer Research UK, raises money to fund clinical trials, research and cancer information and awareness, as well as other initiatives to combat cancer and support those affected by cancer. The Bowelbabe Fund is a restricted fund within Cancer Research UK. Cancer Research UK is a registered charity in England and Wales (1089464), Scotland (SC041666), the Isle of Man (1103) and Jersey (247) and is registered with the Fundraising Regulator.";default:return"Cancer Research UK is a registered charity in England and Wales (1089464), Scotland (SC041666), the Isle of Man (1103) and Jersey (247). A company limited by guarantee. Registered company in England and Wales(4325234) and the Isle of Man (5713F)."}}(s)," Registered address:"),e.createElement("address",{className:"footer-address"},e.createElement(a,{textSize:"m",as:"span"}," ","2 Redman Place, London, E20 1JQ"))))))}export{t as Footer,t as default};
+import e from"react";import{Text as a}from"../Text/index.js";function t(t){var n=t.children,r=t.themeName,s=void 0===r?"cruk":r,o=t.footerText,c=e.Children.toArray(n);return e.createElement("footer",{className:"component-footer"},e.createElement("div",{className:"footer-bar"}),e.createElement("div",{className:"footer-wrapper"},e.createElement("div",{className:"footer-section"},e.createElement("nav",{className:"footer-nav","aria-label":"footer links"},e.createElement("ul",{className:"footer-ul"},c.length?c.map(function(a,t){var n="footerLink".concat(t);return e.createElement("li",{key:n,className:"footer-li"},a)}):null))),e.createElement("div",{className:"footer-section"},e.createElement("img",{className:"footer-regulator-logo",width:130,height:40,alt:"Registered with Fundraising Regulator",src:"https://rcl.assets.cancerresearchuk.org/images/logos/fundreg.png"})),e.createElement("div",{className:"footer-section"},o?e.createElement(a,{textSize:"m"},o):e.createElement(e.Fragment,null,e.createElement(a,{textSize:"m",as:"span"},function(e){switch(e){case"su2c":return"Stand Up To Cancer and Stand Up To Cancer Brand Marks are registered trademarks of the Entertainment Industry Foundation. Cancer Research UK is a registered charity in England and Wales (1089464), Scotland(SC041666), the Isle of Man (1103) and Jersey (247). A company limited by guarantee. Registered company in England and Wales (4325234) and the Isle of Man (5713F). Registered address: 2 Redman Place, London, E20 1JQ. Donations will be made to Cancer Research UK in support of the Stand Up To Cancer campaign.";case"bowelbabe":return"The Bowelbabe Fund for Cancer Research UK, raises money to fund clinical trials, research and cancer information and awareness, as well as other initiatives to combat cancer and support those affected by cancer. The Bowelbabe Fund is a restricted fund within Cancer Research UK. Cancer Research UK is a registered charity in England and Wales (1089464), Scotland (SC041666), the Isle of Man (1103) and Jersey (247) and is registered with the Fundraising Regulator.";default:return"Cancer Research UK is a registered charity in England and Wales (1089464), Scotland (SC041666), the Isle of Man (1103) and Jersey (247). A company limited by guarantee. Registered company in England and Wales(4325234) and the Isle of Man (5713F)."}}(s)," Registered address:"),e.createElement("address",{className:"footer-address"},e.createElement(a,{textSize:"m",as:"span"}," ","2 Redman Place, London, E20 1JQ"))))))}export{t as Footer};
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-import e,{useState as a}from"react";import t from"../../hooks/useScrollPosition.js";function l(l){var r=l.themeName,s=l.isSticky,c=l.siteSlogan,n=l.logoAltText,o=l.logoImageSrc,i=l.logoLinkTitle,m=l.logoLinkUrl,d=l.fullWidth,g=l.children,h=a(!1),u=h[0],p=h[1],f="undefined"!=typeof window;t(function(e){var a=e.currPos,t=!!f&&a.y>240;t!==u&&p(t)},[u],null,!0,50);var k=function(e){switch(e){case"su2c":return"https://rcl.assets.cancerresearchuk.org/images/logos/su2c-160.png";case"bowelbabe":return"https://rcl.assets.cancerresearchuk.org/images/logos/bowelbabe-logo-160.png";case"rfl":return"https://rcl.assets.cancerresearchuk.org/images/logos/rfl.svg";default:return"https://rcl.assets.cancerresearchuk.org/images/logos/cruk.svg"}}(r);return e.createElement("header",{className:"component-header","data-is-sticky":s||!1,"data-is-small":u||!1,"data-full-width":d||!1},e.createElement("div",{className:"header-sticky-placeholder"},e.createElement("div",{className:"header-sticky-container","data-testid":"header-sticky-container"},e.createElement("a",{className:"skip-to-main",href:"#main"},"Skip to main content"),e.createElement("div",{className:"header-main-content","data-$full-width":d},e.createElement("a",{className:"header-logo-link",href:null!=m?m:"/",title:null!=i?i:"Home"},e.createElement("div",{className:"logo-wrapper"},e.createElement("img",{className:"logo",width:160,height:80,src:null!=o?o:k,alt:null!=n?n:"Cancer Research UK Giving Pages"}))),c?e.createElement("p",{className:"tagline"},c):null,e.createElement("div",{className:"child-wrapper"},e.createElement("div",{className:"child-inner"},g))))))}export{l as Header,l as default};
+import e,{useState as a}from"react";import{useScrollPosition as t}from"../../hooks/useScrollPosition.js";function r(r){var l=r.themeName,s=r.isSticky,c=r.siteSlogan,n=r.logoAltText,o=r.logoImageSrc,i=r.logoLinkTitle,m=r.logoLinkUrl,d=r.fullWidth,g=r.children,h=a(!1),u=h[0],p=h[1],k="undefined"!=typeof window;t(function(e){var a=e.currPos,t=!!k&&a.y>240;t!==u&&p(t)},[u],null,!0,50);var f=function(e){switch(e){case"su2c":return"https://rcl.assets.cancerresearchuk.org/images/logos/su2c-160.png";case"bowelbabe":return"https://rcl.assets.cancerresearchuk.org/images/logos/bowelbabe-logo-160.png";case"rfl":return"https://rcl.assets.cancerresearchuk.org/images/logos/rfl.svg";default:return"https://rcl.assets.cancerresearchuk.org/images/logos/cruk.svg"}}(l);return e.createElement("header",{className:"component-header","data-is-sticky":s||!1,"data-is-small":u||!1,"data-full-width":d||!1},e.createElement("div",{className:"header-sticky-placeholder"},e.createElement("div",{className:"header-sticky-container","data-testid":"header-sticky-container"},e.createElement("a",{className:"skip-to-main",href:"#main"},"Skip to main content"),e.createElement("div",{className:"header-main-content","data-$full-width":d},e.createElement("a",{className:"header-logo-link",href:null!=m?m:"/",title:null!=i?i:"Home"},e.createElement("div",{className:"logo-wrapper"},e.createElement("img",{className:"logo",width:160,height:80,src:null!=o?o:f,alt:null!=n?n:"Cancer Research UK Giving Pages"}))),c?e.createElement("p",{className:"tagline"},c):null,e.createElement("div",{className:"child-wrapper"},e.createElement("div",{className:"child-inner"},g))))))}export{r as Header};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Header/index.tsx"],"sourcesContent":["import React, { useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { useScrollPosition } from \"../../hooks/useScrollPosition\";\n\nimport { type ThemeNameType } from \"../../types\";\n\nconst HEADER_SCROLL_THRESHOLD = 240;\n\nconst crukLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/cruk.svg\";\nconst rflLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/rfl.svg\";\nconst su2cLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/su2c-160.png\";\nconst bowelbabeLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/bowelbabe-logo-160.png\";\n\nfunction getLogoFromThemeName(themeName: ThemeNameType) {\n  switch (themeName) {\n    case \"su2c\":\n      return su2cLogoUrl;\n    case \"bowelbabe\":\n      return bowelbabeLogoUrl;\n    case \"rfl\":\n      return rflLogoUrl;\n    default:\n      return crukLogoUrl;\n  }\n}\n\n/**\n * There should be only one header component near or at the top of the body of each page.\n *\n * ### Logos\n * It is recommended that logo images are at least 80px high if they are not SVGs and that the logo is still clearly legible when reduced to 40px high for mobile.\n * It is also recommended that the logo width doesn't exceed 350px. If you need a wide logo that is shorter than 80px to keep the aspect ratio please make sure that the logo is centered with transparent space at the top and bottom and still 80px high.\n *\n * ### Site Slogan Text (optional)\n * This is a single line of text and the character limit depends on the theme, logo and children width. This is only visible on desktop at the top of the page\n *\n * ### Right section (optional)\n * This has been kept quite open you can place any child elements in here but ideally it is narrow and its height is 50px or smaller.\n *\n * ### Accessability\n * There is a hidden skip link in the header which will only reveals itself on the first tab and to screen readers. This link helps users skip to the main page content, however this will only work with there is an element with an id of 'main' which the developer should create for every page.\n *\n */\nexport function Header({\n  themeName,\n  isSticky,\n  siteSlogan,\n  logoAltText,\n  logoImageSrc,\n  logoLinkTitle,\n  logoLinkUrl,\n  fullWidth,\n  children,\n}: HTMLAttributes<HTMLElement> & {\n  themeName: ThemeNameType;\n  /** flag which make header fixed to the top even when scrolling */\n  isSticky?: boolean;\n  /** text in the middle of the header */\n  siteSlogan?: string;\n  /** text to explain the content of the icon for a11y usually a description of where the link will take you */\n  logoAltText?: string;\n  /** header logo image url */\n  logoImageSrc?: string;\n  /** title of the header image component, this is mainly for the tooltip text on hover */\n  logoLinkTitle?: string;\n  /** the url of the logo link */\n  logoLinkUrl?: string;\n  /** instead of the contents of the header being centered to max width as defined in theme it is 100% width fo viewport */\n  fullWidth?: boolean;\n\n  children?: ReactNode;\n}) {\n  const [isSmall, setIsSmall] = useState(false);\n  const isBrowser = typeof window !== `undefined`;\n\n  useScrollPosition(\n    ({\n      currPos,\n    }: {\n      prevPos: { x: number; y: number };\n      currPos: { x: number; y: number };\n    }) => {\n      const shouldShrink = isBrowser\n        ? currPos.y > HEADER_SCROLL_THRESHOLD\n        : false;\n      if (shouldShrink !== isSmall) {\n        setIsSmall(shouldShrink);\n      }\n    },\n    [isSmall],\n    null,\n    true,\n    50,\n  );\n\n  const logoUrl = getLogoFromThemeName(themeName);\n\n  return (\n    <header\n      className=\"component-header\"\n      data-is-sticky={isSticky || false}\n      data-is-small={isSmall || false}\n      data-full-width={fullWidth || false}\n    >\n      <div className=\"header-sticky-placeholder\">\n        <div\n          className=\"header-sticky-container\"\n          data-testid=\"header-sticky-container\"\n        >\n          <a className=\"skip-to-main\" href=\"#main\">\n            Skip to main content\n          </a>\n          <div className=\"header-main-content\" data-$full-width={fullWidth}>\n            <a\n              className=\"header-logo-link\"\n              href={logoLinkUrl ?? \"/\"}\n              title={logoLinkTitle ?? \"Home\"}\n            >\n              <div className=\"logo-wrapper\">\n                <img\n                  className=\"logo\"\n                  width={160}\n                  height={80}\n                  src={logoImageSrc ?? logoUrl}\n                  alt={logoAltText ?? \"Cancer Research UK Giving Pages\"}\n                />\n              </div>\n            </a>\n            {siteSlogan ? <p className=\"tagline\">{siteSlogan}</p> : null}\n            <div className=\"child-wrapper\">\n              <div className=\"child-inner\">{children}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </header>\n  );\n}\n\nexport default Header;\n"],"names":["Header","_a","themeName","isSticky","siteSlogan","logoAltText","logoImageSrc","logoLinkTitle","logoLinkUrl","fullWidth","children","_b","useState","isSmall","setIsSmall","isBrowser","window","useScrollPosition","currPos","shouldShrink","y","logoUrl","getLogoFromThemeName","React","createElement","className","href","title","width","height","src","alt"],"mappings":"oFA+CM,SAAUA,EAAOC,OACrBC,EAASD,EAAAC,UACTC,EAAQF,EAAAE,SACRC,EAAUH,EAAAG,WACVC,EAAWJ,EAAAI,YACXC,iBACAC,EAAaN,EAAAM,cACbC,EAAWP,EAAAO,YACXC,EAASR,EAAAQ,UACTC,EAAQT,EAAAS,SAoBFC,EAAwBC,GAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAA8B,oBAAXC,OAEzBC,EACE,SAAChB,GACC,IAAAiB,EAAOjB,EAAAiB,QAKDC,IAAeJ,GACjBG,EAAQE,EAjFc,IAmFtBD,IAAiBN,GACnBC,EAAWK,EAEf,EACA,CAACN,GACD,MACA,EACA,IAGF,IAAMQ,EAlFR,SAA8BnB,GAC5B,OAAQA,GACN,IAAK,OACH,MAPJ,oEAQE,IAAK,YACH,MAPJ,8EAQE,IAAK,MACH,MAbJ,+DAcE,QACE,MAjBJ,gEAmBF,CAuEkBoB,CAAqBpB,GAErC,OACEqB,EAAAC,cAAA,SAAA,CACEC,UAAU,oCACMtB,IAAY,EAAK,gBAClBU,IAAW,EAAK,kBACdJ,IAAa,GAE9Bc,EAAAC,cAAA,MAAA,CAAKC,UAAU,6BACbF,EAAAC,cAAA,MAAA,CACEC,UAAU,0BAAyB,cACvB,2BAEZF,EAAAC,cAAA,IAAA,CAAGC,UAAU,eAAeC,KAAK,SAAO,wBAGxCH,EAAAC,cAAA,MAAA,CAAKC,UAAU,sBAAqB,mBAAmBhB,GACrDc,EAAAC,cAAA,IAAA,CACEC,UAAU,mBACVC,KAAMlB,QAAAA,EAAe,IACrBmB,MAAOpB,QAAAA,EAAiB,QAExBgB,EAAAC,cAAA,MAAA,CAAKC,UAAU,gBACbF,EAAAC,cAAA,MAAA,CACEC,UAAU,OACVG,MAAO,IACPC,OAAQ,GACRC,IAAKxB,QAAAA,EAAgBe,EACrBU,IAAK1B,QAAAA,EAAe,sCAIzBD,EAAamB,EAAAC,cAAA,IAAA,CAAGC,UAAU,WAAWrB,GAAkB,KACxDmB,EAAAC,cAAA,MAAA,CAAKC,UAAU,iBACbF,EAAAC,cAAA,MAAA,CAAKC,UAAU,eAAef,OAO5C"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Header/index.tsx"],"sourcesContent":["import React, { useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { useScrollPosition } from \"../../hooks/useScrollPosition\";\n\nimport { type ThemeNameType } from \"../../types\";\n\nconst HEADER_SCROLL_THRESHOLD = 240;\n\nconst crukLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/cruk.svg\";\nconst rflLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/rfl.svg\";\nconst su2cLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/su2c-160.png\";\nconst bowelbabeLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/bowelbabe-logo-160.png\";\n\nfunction getLogoFromThemeName(themeName: ThemeNameType) {\n  switch (themeName) {\n    case \"su2c\":\n      return su2cLogoUrl;\n    case \"bowelbabe\":\n      return bowelbabeLogoUrl;\n    case \"rfl\":\n      return rflLogoUrl;\n    default:\n      return crukLogoUrl;\n  }\n}\n\n/**\n * There should be only one header component near or at the top of the body of each page.\n *\n * ### Logos\n * It is recommended that logo images are at least 80px high if they are not SVGs and that the logo is still clearly legible when reduced to 40px high for mobile.\n * It is also recommended that the logo width doesn't exceed 350px. If you need a wide logo that is shorter than 80px to keep the aspect ratio please make sure that the logo is centered with transparent space at the top and bottom and still 80px high.\n *\n * ### Site Slogan Text (optional)\n * This is a single line of text and the character limit depends on the theme, logo and children width. This is only visible on desktop at the top of the page\n *\n * ### Right section (optional)\n * This has been kept quite open you can place any child elements in here but ideally it is narrow and its height is 50px or smaller.\n *\n * ### Accessability\n * There is a hidden skip link in the header which will only reveals itself on the first tab and to screen readers. This link helps users skip to the main page content, however this will only work with there is an element with an id of 'main' which the developer should create for every page.\n *\n */\nexport function Header({\n  themeName,\n  isSticky,\n  siteSlogan,\n  logoAltText,\n  logoImageSrc,\n  logoLinkTitle,\n  logoLinkUrl,\n  fullWidth,\n  children,\n}: HTMLAttributes<HTMLElement> & {\n  themeName: ThemeNameType;\n  /** flag which make header fixed to the top even when scrolling */\n  isSticky?: boolean;\n  /** text in the middle of the header */\n  siteSlogan?: string;\n  /** text to explain the content of the icon for a11y usually a description of where the link will take you */\n  logoAltText?: string;\n  /** header logo image url */\n  logoImageSrc?: string;\n  /** title of the header image component, this is mainly for the tooltip text on hover */\n  logoLinkTitle?: string;\n  /** the url of the logo link */\n  logoLinkUrl?: string;\n  /** instead of the contents of the header being centered to max width as defined in theme it is 100% width fo viewport */\n  fullWidth?: boolean;\n\n  children?: ReactNode;\n}) {\n  const [isSmall, setIsSmall] = useState(false);\n  const isBrowser = typeof window !== `undefined`;\n\n  useScrollPosition(\n    ({\n      currPos,\n    }: {\n      prevPos: { x: number; y: number };\n      currPos: { x: number; y: number };\n    }) => {\n      const shouldShrink = isBrowser\n        ? currPos.y > HEADER_SCROLL_THRESHOLD\n        : false;\n      if (shouldShrink !== isSmall) {\n        setIsSmall(shouldShrink);\n      }\n    },\n    [isSmall],\n    null,\n    true,\n    50,\n  );\n\n  const logoUrl = getLogoFromThemeName(themeName);\n\n  return (\n    <header\n      className=\"component-header\"\n      data-is-sticky={isSticky || false}\n      data-is-small={isSmall || false}\n      data-full-width={fullWidth || false}\n    >\n      <div className=\"header-sticky-placeholder\">\n        <div\n          className=\"header-sticky-container\"\n          data-testid=\"header-sticky-container\"\n        >\n          <a className=\"skip-to-main\" href=\"#main\">\n            Skip to main content\n          </a>\n          <div className=\"header-main-content\" data-$full-width={fullWidth}>\n            <a\n              className=\"header-logo-link\"\n              href={logoLinkUrl ?? \"/\"}\n              title={logoLinkTitle ?? \"Home\"}\n            >\n              <div className=\"logo-wrapper\">\n                <img\n                  className=\"logo\"\n                  width={160}\n                  height={80}\n                  src={logoImageSrc ?? logoUrl}\n                  alt={logoAltText ?? \"Cancer Research UK Giving Pages\"}\n                />\n              </div>\n            </a>\n            {siteSlogan ? <p className=\"tagline\">{siteSlogan}</p> : null}\n            <div className=\"child-wrapper\">\n              <div className=\"child-inner\">{children}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </header>\n  );\n}\n\nexport default Header;\n"],"names":["Header","_a","themeName","isSticky","siteSlogan","logoAltText","logoImageSrc","logoLinkTitle","logoLinkUrl","fullWidth","children","_b","useState","isSmall","setIsSmall","isBrowser","window","useScrollPosition","currPos","shouldShrink","y","logoUrl","getLogoFromThemeName","React","createElement","className","href","title","width","height","src","alt"],"mappings":"yGA+CM,SAAUA,EAAOC,OACrBC,EAASD,EAAAC,UACTC,EAAQF,EAAAE,SACRC,EAAUH,EAAAG,WACVC,EAAWJ,EAAAI,YACXC,iBACAC,EAAaN,EAAAM,cACbC,EAAWP,EAAAO,YACXC,EAASR,EAAAQ,UACTC,EAAQT,EAAAS,SAoBFC,EAAwBC,GAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAA8B,oBAAXC,OAEzBC,EACE,SAAChB,GACC,IAAAiB,EAAOjB,EAAAiB,QAKDC,IAAeJ,GACjBG,EAAQE,EAjFc,IAmFtBD,IAAiBN,GACnBC,EAAWK,EAEf,EACA,CAACN,GACD,MACA,EACA,IAGF,IAAMQ,EAlFR,SAA8BnB,GAC5B,OAAQA,GACN,IAAK,OACH,MAPJ,oEAQE,IAAK,YACH,MAPJ,8EAQE,IAAK,MACH,MAbJ,+DAcE,QACE,MAjBJ,gEAmBF,CAuEkBoB,CAAqBpB,GAErC,OACEqB,EAAAC,cAAA,SAAA,CACEC,UAAU,oCACMtB,IAAY,EAAK,gBAClBU,IAAW,EAAK,kBACdJ,IAAa,GAE9Bc,EAAAC,cAAA,MAAA,CAAKC,UAAU,6BACbF,EAAAC,cAAA,MAAA,CACEC,UAAU,0BAAyB,cACvB,2BAEZF,EAAAC,cAAA,IAAA,CAAGC,UAAU,eAAeC,KAAK,SAAO,wBAGxCH,EAAAC,cAAA,MAAA,CAAKC,UAAU,sBAAqB,mBAAmBhB,GACrDc,EAAAC,cAAA,IAAA,CACEC,UAAU,mBACVC,KAAMlB,QAAAA,EAAe,IACrBmB,MAAOpB,QAAAA,EAAiB,QAExBgB,EAAAC,cAAA,MAAA,CAAKC,UAAU,gBACbF,EAAAC,cAAA,MAAA,CACEC,UAAU,OACVG,MAAO,IACPC,OAAQ,GACRC,IAAKxB,QAAAA,EAAgBe,EACrBU,IAAK1B,QAAAA,EAAe,sCAIzBD,EAAamB,EAAAC,cAAA,IAAA,CAAGC,UAAU,WAAWrB,GAAkB,KACxDmB,EAAAC,cAAA,MAAA,CAAKC,UAAU,iBACbF,EAAAC,cAAA,MAAA,CAAKC,UAAU,eAAef,OAO5C"}

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

@@ -1,2 +1,2 @@
-import{__rest as a,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import e from"react";function n(n){var o=n.textColor,p=n.backgroundColor,r=n.textSize,i=n.textAlign,d=n.textWeight,l=n.textFontFamily,g=n.wordBreak,s=n.overflowWrap,c=n.margin,m=n.marginTop,h=n.marginRight,x=n.marginBottom,u=n.marginLeft,f=n.marginVertical,j=n.marginHorizontal,E=n.padding,z=n.paddingTop,N=n.paddingRight,b=n.paddingBottom,w=n.paddingLeft,v=n.paddingVertical,B=n.paddingHorizontal,k=n.h1,F=n.h2,C=n.h3,H=n.h4,L=n.h5,R=n.h6,T=n.as,V=a(n,["textColor","backgroundColor","textSize","textAlign","textWeight","textFontFamily","wordBreak","overflowWrap","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","h1","h2","h3","h4","h5","h6","as"]),W=k?"h1":F?"h2":C?"h3":H?"h4":L?"h5":R?"h6":"h2",y=T||W,A={"data-color":o,"data-bg-color":p,"data-text-size":r,"data-text-align":i,"data-text-weight":d,"data-text-font-family":l,"data-word-break":g,"data-overflow-wrap":s,"data-margin":c,"data-margin-top":m,"data-margin-right":h,"data-margin-bottom":x,"data-margin-left":u,"data-margin-vertical":f,"data-margin-horizontal":j,"data-padding":E,"data-padding-top":z,"data-padding-right":N,"data-padding-bottom":b,"data-padding-left":w,"data-padding-vertical":v,"data-padding-horizontal":B};return e.createElement(e.Fragment,null,"h1"===y?e.createElement("h1",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h2"===y?e.createElement("h2",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h3"===y?e.createElement("h3",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h4"===y?e.createElement("h4",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h5"===y?e.createElement("h5",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h6"===y?e.createElement("h6",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"p"===y?e.createElement("p",t({className:["component-heading","color-props","spacing-props","text-props"].join(" ")},A,V)):null,"span"===y?e.createElement("span",t({className:["component-heading","color-props","spacing-props","text-props"].join(" ")},A,V)):null,"legend"===y?e.createElement("legend",t({className:["component-heading","color-props","spacing-props","text-props"].join(" ")},A,V)):null)}export{n as Heading,n as default};
+import{__rest as a,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import e from"react";function n(n){var o=n.textColor,p=n.backgroundColor,r=n.textSize,i=n.textAlign,d=n.textWeight,l=n.textFontFamily,g=n.wordBreak,c=n.overflowWrap,m=n.margin,s=n.marginTop,h=n.marginRight,x=n.marginBottom,u=n.marginLeft,f=n.marginVertical,j=n.marginHorizontal,E=n.padding,z=n.paddingTop,N=n.paddingRight,b=n.paddingBottom,w=n.paddingLeft,v=n.paddingVertical,B=n.paddingHorizontal,k=n.h1,F=n.h2,C=n.h3,H=n.h4,L=n.h5,R=n.h6,T=n.as,V=a(n,["textColor","backgroundColor","textSize","textAlign","textWeight","textFontFamily","wordBreak","overflowWrap","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","h1","h2","h3","h4","h5","h6","as"]),W=k?"h1":F?"h2":C?"h3":H?"h4":L?"h5":R?"h6":"h2",y=T||W,A={"data-color":o,"data-bg-color":p,"data-text-size":r,"data-text-align":i,"data-text-weight":d,"data-text-font-family":l,"data-word-break":g,"data-overflow-wrap":c,"data-margin":m,"data-margin-top":s,"data-margin-right":h,"data-margin-bottom":x,"data-margin-left":u,"data-margin-vertical":f,"data-margin-horizontal":j,"data-padding":E,"data-padding-top":z,"data-padding-right":N,"data-padding-bottom":b,"data-padding-left":w,"data-padding-vertical":v,"data-padding-horizontal":B};return e.createElement(e.Fragment,null,"h1"===y?e.createElement("h1",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h2"===y?e.createElement("h2",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h3"===y?e.createElement("h3",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h4"===y?e.createElement("h4",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h5"===y?e.createElement("h5",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h6"===y?e.createElement("h6",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"p"===y?e.createElement("p",t({className:["component-heading","color-props","spacing-props","text-props"].join(" ")},A,V)):null,"span"===y?e.createElement("span",t({className:["component-heading","color-props","spacing-props","text-props"].join(" ")},A,V)):null,"legend"===y?e.createElement("legend",t({className:["component-heading","color-props","spacing-props","text-props"].join(" ")},A,V)):null)}export{n as Heading};
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-import e from"react";import{themeSpacingSizeOrString as t,themeColorOrString as o}from"../../utils/themeUtils.js";function c(c){var r=c.faIcon,a=c.size,n=c.color,i=r.icon,s=i[0],l=i[1],m=i[4],f=o(n),p=t(a||"xs");return e.createElement("svg",{className:"component-icon-fa",role:"presentation",viewBox:"0 0 ".concat(s," ").concat(l),style:{color:f,height:p,width:p}},m&&e.createElement("path",{d:m}))}export{c as IconFa,c as default};
+import e from"react";import{themeSpacingSizeOrString as t,themeColorOrString as o}from"../../utils/themeUtils.js";function c(c){var r=c.faIcon,n=c.size,a=c.color,i=r.icon,s=i[0],l=i[1],m=i[4],p=o(a),f=t(n||"xs");return e.createElement("svg",{className:"component-icon-fa",role:"presentation",viewBox:"0 0 ".concat(s," ").concat(l),style:{color:p,height:f,width:f}},m&&e.createElement("path",{d:m}))}export{c as IconFa};
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{Box as r}from"../Box/index.js";import{Text as i}from"../Text/index.js";import{Heading as n}from"../Heading/index.js";var l=function(l){var a=l.children,m=l.titleText,c=l.titleTextColor,d=l.descriptionText,s=l.descriptionTextColor,x=l.icon,p=l.backgroundColor,f=l.ref,g=e(l,["children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","backgroundColor","ref"]);return o.createElement("div",t({className:["component-info-box","spacing-props","color-props"].join(" ")},g,{"data-bg-color":p||"background-mid",ref:f}),x&&o.createElement(r,{marginRight:"s"},x),o.createElement("div",null,m&&o.createElement(n,{as:"p",margin:"none",h4:!0,marginBottom:"xxs",textColor:c||"text-dark"},m),d&&o.createElement(i,{textColor:s||"text-dark",marginBottom:"none"},d),a))};export{l as InfoBox,l as default};
+import{__rest as e,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{Box as r}from"../Box/index.js";import{Text as i}from"../Text/index.js";import{Heading as n}from"../Heading/index.js";var l=function(l){var m=l.children,a=l.titleText,c=l.titleTextColor,d=l.descriptionText,x=l.descriptionTextColor,s=l.icon,p=l.backgroundColor,g=l.ref,f=e(l,["children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","backgroundColor","ref"]);return t.createElement("div",o({className:["component-info-box","spacing-props","color-props"].join(" ")},f,{"data-bg-color":p||"background-mid",ref:g}),s&&t.createElement(r,{marginRight:"s"},s),t.createElement("div",null,a&&t.createElement(n,{as:"p",margin:"none",h4:!0,marginBottom:"xxs",textColor:c||"text-dark"},a),d&&t.createElement(i,{textColor:x||"text-dark",marginBottom:"none"},d),m))};export{l as InfoBox};
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import n from"react";function a(a){var l=a.label,i=a.hintText,r=a.required,m=void 0!==r&&r,o=a.hideRequiredIndicationInLabel,c=void 0!==o&&o,d=a.children,s=e(a,["label","hintText","required","hideRequiredIndicationInLabel","children"]),u=i&&("string"==typeof i&&i.length||"number"==typeof i)?n.createElement("span",{className:"hint-text"},i):i;return n.createElement(n.Fragment,null,l?n.createElement("label",t({className:"label-component"},s),n.createElement("span",{className:"label-text","data-hintext":!!i},l,!m&&!c&&n.createElement("span",{className:"required-indication-text"}," (optional)")),u,d):n.createElement(n.Fragment,null,d))}export{a as LabelWrapper,a as default};
+import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import n from"react";function a(a){var l=a.label,i=a.hintText,r=a.required,m=void 0!==r&&r,o=a.hideRequiredIndicationInLabel,c=void 0!==o&&o,d=a.children,s=e(a,["label","hintText","required","hideRequiredIndicationInLabel","children"]),u=i&&("string"==typeof i&&i.length||"number"==typeof i)?n.createElement("span",{className:"hint-text"},i):i;return n.createElement(n.Fragment,null,l?n.createElement("label",t({className:"label-component"},s),n.createElement("span",{className:"label-text","data-hintext":!!i},l,!m&&!c&&n.createElement("span",{className:"required-indication-text"}," (optional)")),u,d):n.createElement(n.Fragment,null,d))}export{a as LabelWrapper};
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{ErrorText as a}from"../ErrorText/index.js";function n(n){var s=n.children,i=n.legendText,o=n.required,l=n.errorMessage,m=n.hasError,d=n.hintText,c=e(n,["children","legendText","required","errorMessage","hasError","hintText"]);return r.createElement("fieldset",{className:"component-legend-wrapper","data-has-error":m||!!l||!1,"data-has-hint-text":!!d},i&&r.createElement("legend",t({},c),r.createElement("span",{className:"legend-span","data-has-hint-text":!!d},i," ",!o&&r.createElement("span",{className:"required-indication-text"},"(optional)")),!d||"string"!=typeof d&&"number"!=typeof d?d:r.createElement("span",{className:"hint-text"},d)),s,!!l&&r.createElement(a,{marginTop:"xxs"},l))}export{n as LegendWrapper,n as default};
+import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{ErrorText as a}from"../ErrorText/index.js";function n(n){var s=n.children,i=n.legendText,o=n.required,l=n.errorMessage,m=n.hasError,d=n.hintText,c=e(n,["children","legendText","required","errorMessage","hasError","hintText"]);return r.createElement("fieldset",{className:"component-legend-wrapper","data-has-error":m||!!l||!1,"data-has-hint-text":!!d},i&&r.createElement("legend",t({},c),r.createElement("span",{className:"legend-span","data-has-hint-text":!!d},i," ",!o&&r.createElement("span",{className:"required-indication-text"},"(optional)")),!d||"string"!=typeof d&&"number"!=typeof d?d:r.createElement("span",{className:"hint-text"},d)),s,!!l&&r.createElement(a,{marginTop:"xxs"},l))}export{n as LegendWrapper};
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-import{__rest as a,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";var n=function(n){var e=n.appearance,i=n.ref,o=n.children,d=n.as,p=n.textColor,g=n.backgroundColor,l=n.textSize,m=n.textAlign,c=n.textWeight,s=n.textFontFamily,f=n.wordBreak,x=n.overflowWrap,h=n.margin,b=n.marginTop,k=n.marginRight,u=n.marginBottom,z=n.marginLeft,w=n.marginVertical,v=n.marginHorizontal,B=n.padding,F=n.paddingTop,L=n.paddingRight,y=n.paddingBottom,C=n.paddingLeft,H=n.paddingVertical,R=n.paddingHorizontal,T=a(n,["appearance","ref","children","as","textColor","backgroundColor","textSize","textAlign","textWeight","textFontFamily","wordBreak","overflowWrap","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal"]),V=T.rel?T.rel:"_blank"===T.target?"noopener noreferrer":"",W={"data-appearance":e,"data-color":p,"data-bg-color":g,"data-text-size":l,"data-text-align":m,"data-text-weight":c,"data-text-font-family":s,"data-word-break":f,"data-overflow-wrap":x,"data-margin":h,"data-margin-top":b,"data-margin-right":k,"data-margin-bottom":u,"data-margin-left":z,"data-margin-vertical":w,"data-margin-horizontal":v,"data-padding":B,"data-padding-top":F,"data-padding-right":L,"data-padding-bottom":y,"data-padding-left":C,"data-padding-vertical":H,"data-padding-horizontal":R};return r.createElement(r.Fragment,null,d&&"a"!==d?null:r.createElement("a",t({className:["component-link","color-props","spacing-props","text-props"].join(" "),ref:i},W,T,{rel:V,"data-appearance":e}),o),"span"===d?r.createElement("span",t({className:["component-link","color-props","spacing-props","text-props"].join(" "),ref:i},T,W,{"data-appearance":e}),o):null)};n.displayName="Link";export{n as Link,n as default};
+import{__rest as a,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";var n=function(n){var e=n.appearance,i=n.ref,o=n.children,d=n.as,p=n.textColor,g=n.backgroundColor,l=n.textSize,m=n.textAlign,c=n.textWeight,s=n.textFontFamily,f=n.wordBreak,x=n.overflowWrap,h=n.margin,b=n.marginTop,k=n.marginRight,z=n.marginBottom,u=n.marginLeft,w=n.marginVertical,v=n.marginHorizontal,B=n.padding,F=n.paddingTop,L=n.paddingRight,y=n.paddingBottom,C=n.paddingLeft,H=n.paddingVertical,R=n.paddingHorizontal,T=a(n,["appearance","ref","children","as","textColor","backgroundColor","textSize","textAlign","textWeight","textFontFamily","wordBreak","overflowWrap","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal"]),V=T.rel?T.rel:"_blank"===T.target?"noopener noreferrer":"",W={"data-appearance":e,"data-color":p,"data-bg-color":g,"data-text-size":l,"data-text-align":m,"data-text-weight":c,"data-text-font-family":s,"data-word-break":f,"data-overflow-wrap":x,"data-margin":h,"data-margin-top":b,"data-margin-right":k,"data-margin-bottom":z,"data-margin-left":u,"data-margin-vertical":w,"data-margin-horizontal":v,"data-padding":B,"data-padding-top":F,"data-padding-right":L,"data-padding-bottom":y,"data-padding-left":C,"data-padding-vertical":H,"data-padding-horizontal":R};return r.createElement(r.Fragment,null,d&&"a"!==d?null:r.createElement("a",t({className:["component-link","color-props","spacing-props","text-props"].join(" "),ref:i},W,T,{rel:V,"data-appearance":e}),o),"span"===d?r.createElement("span",t({className:["component-link","color-props","spacing-props","text-props"].join(" "),ref:i},T,W,{"data-appearance":e}),o):null)};n.displayName="Link";export{n as Link};
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-import e from"react";function a(){return e.createElement("span",{className:"component-loader"},e.createElement("p",{className:"screen-reader-only",role:"alert"},"Loading"),e.createElement("div",{className:"spinner","aria-hidden":"true"},e.createElement("span",null),e.createElement("span",null),e.createElement("span",null)))}export{a as Loader,a as default};
+import e from"react";function n(){return e.createElement("span",{className:"component-loader"},e.createElement("p",{className:"screen-reader-only",role:"alert"},"Loading"),e.createElement("div",{className:"spinner","aria-hidden":"true"},e.createElement("span",null),e.createElement("span",null),e.createElement("span",null)))}export{n as Loader};
 //# sourceMappingURL=index.js.map

package/lib/src/components/Modal/TestModalWithContent.d.ts

@@ -1,4 +1,2 @@
 import React from "react";
-export declare function TestModalWithContent({ themeName }: {
-    themeName: string;
-}): React.JSX.Element;
+export declare function TestModalWithContent(): React.JSX.Element;

package/lib/src/components/Modal/TestModalWithOpenButton.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import "./styles.css";
+export declare function TestModalWithOpenButton(): React.JSX.Element;

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

@@ -7,25 +7,26 @@ import React, { type HTMLAttributes, type ReactNode } from "react";
  * - Modals are unmounted when closed.
  * - Modal's "trap" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.
  * ## Accessibility
- * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.
+ * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal.
+ * You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work,
+ * so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.
  */
-export declare function Modal({ modalName, closeFunction, showCloseButton, themeName, children, isAnimated, top, maxWidth, width, ...htmlAttributes }: HTMLAttributes<HTMLDivElement> & {
-    themeName: string;
+export declare function Modal({ modalName, startOpen, isAnimated, closeFunction, showCloseButton, children, ref: outerRef, style, ...htmlAttributes }: HTMLAttributes<HTMLDialogElement> & {
     /** modal name used for aria-label */
     modalName: string;
+    /** set if the modal start open */
+    startOpen: boolean;
     /** callback function called on modal close */
-    closeFunction: () => void;
+    closeFunction?: () => void;
     /** flag to reveal close button with cross in the top right of modal */
     showCloseButton?: boolean;
-    /** set max width of modal */
-    maxWidth?: string;
-    /** set space from top of view port that modal appears */
-    top?: string;
-    /** children components  */
-    children?: ReactNode;
-    /** width of modal */
-    width?: string;
     /** turn on animate in modal */
     isAnimated?: boolean;
+    /** children components inside modal */
+    children?: ReactNode;
+    /** ref to the dialog element */
+    ref?: React.RefObject<HTMLDialogElement | null>;
+    /** additional style attributes for the dialog element */
+    style?: React.CSSProperties;
 }): React.JSX.Element;
 export default Modal;

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import t,{useEffect as n}from"react";import{createPortal as a}from"react-dom";import i from"../../../node_modules/react-focus-lock/dist/es2015/Combination.js";import{faClose as d}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as m}from"../IconFa/index.js";import{Button as r}from"../Button/index.js";function l(l){var s=l.modalName,c=l.closeFunction,u=l.showCloseButton,f=l.themeName,p=l.children,w=l.isAnimated,h=void 0===w||w,y=l.top,b=l.maxWidth,v=l.width,E=e(l,["modalName","closeFunction","showCloseButton","themeName","children","isAnimated","top","maxWidth","width"]),N=t.useCallback(function(e){"Escape"===e.key&&c&&c()},[c]);return n(function(){if("undefined"!=typeof window)return document.body.style.overflow="hidden",document.addEventListener("keydown",N),function(){"undefined"!=typeof window&&(document.body.style.overflow="unset",document.removeEventListener("keydown",N))}},[N]),t.createElement(t.Fragment,null,"undefined"!=typeof window?a(t.createElement("section",{className:"component-modal","data-theme":f},t.createElement(i,{returnFocus:!0},t.createElement("div",{className:"wrapper",role:"dialog","aria-modal":"true","aria-label":s},t.createElement("div",o({className:["content","spacing-props","colour-props"].join(" "),style:{maxWidth:b,top:y,width:v},"data-is-animated":h},E),u&&c?t.createElement(r,{className:"component-button close-button","aria-label":"close",appearance:"tertiary",onClick:function(){c()}},t.createElement(m,{faIcon:d})):null,p),t.createElement("div",{className:"background","data-is-animated":h})))),document.body):null)}export{l as Modal,l as default};
+import{__rest as e,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import n,{useRef as t,useEffect as l}from"react";import{faClose as r}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as i}from"../IconFa/index.js";import{Button as a}from"../Button/index.js";function s(s){var c=s.modalName,d=s.startOpen,u=void 0===d||d,m=s.isAnimated,f=void 0===m||m,p=s.closeFunction,v=s.showCloseButton,y=s.children,w=s.ref,b=s.style,h=e(s,["modalName","startOpen","isAnimated","closeFunction","showCloseButton","children","ref","style"]),E=t(null),g=null!=w?w:E,j=n.useCallback(function(){var e,o;(null===(e=g.current)||void 0===e?void 0:e.hasAttribute("open"))&&(console.log("closing modal"),null===(o=g.current)||void 0===o||o.close(),p&&p())},[p,g]);return l(function(){var e=function(e){"Escape"===e.key&&j()};if("undefined"!=typeof window)return document.body.style.overflow="hidden",document.addEventListener("keydown",e),function(){"undefined"!=typeof window&&(document.body.style.overflow="unset",document.removeEventListener("keydown",e))}},[j]),l(function(){u&&g&&g.current&&g.current.showModal()},[u,g]),n.createElement(n.Fragment,null,n.createElement("dialog",o({ref:g,className:["component-modal","spacing-props","colour-props"].join(" "),"aria-modal":"true","aria-label":c,open:!1,"data-is-animated":f,style:b},h),v||p?n.createElement(a,{className:"component-button close-button","aria-label":"close",appearance:"tertiary",onClick:function(){j()}},n.createElement(i,{faIcon:r})):null,y))}export{s as Modal};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type ReactNode, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport FocusLock from \"react-focus-lock\";\nimport { faClose } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport Button from \"../Button\";\n\n/**\n *\n * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.\n * ## How modals work\n * - Modals are positioned over everything else in the document and remove scroll from the \"body\" tag so that modal content scrolls instead.\n * - Modals are unmounted when closed.\n * - Modal's \"trap\" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.\n * ## Accessibility\n * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.\n */\nexport function Modal({\n  modalName,\n  closeFunction,\n  showCloseButton,\n  themeName,\n  children,\n  isAnimated = true,\n  top,\n  maxWidth,\n  width,\n  ...htmlAttributes\n}: HTMLAttributes<HTMLDivElement> & {\n  themeName: string;\n  /** modal name used for aria-label */\n  modalName: string;\n  /** callback function called on modal close */\n  closeFunction: () => void;\n  /** flag to reveal close button with cross in the top right of modal */\n  showCloseButton?: boolean;\n  /** set max width of modal */\n  maxWidth?: string;\n  /** set space from top of view port that modal appears */\n  top?: string;\n  /** children components  */\n  children?: ReactNode;\n  /** width of modal */\n  width?: string;\n  /** turn on animate in modal */\n  isAnimated?: boolean;\n}) {\n  const closeByEsc = React.useCallback(\n    (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\" && !!closeFunction) {\n        closeFunction();\n      }\n    },\n    [closeFunction],\n  );\n\n  useEffect(() => {\n    if (typeof window === `undefined`) {\n      return undefined;\n    }\n    document.body.style.overflow = \"hidden\";\n    document.addEventListener(\"keydown\", closeByEsc);\n\n    return () => {\n      if (typeof window === `undefined`) {\n        return;\n      }\n      document.body.style.overflow = \"unset\";\n      document.removeEventListener(\"keydown\", closeByEsc);\n    };\n  }, [closeByEsc]);\n\n  return (\n    <>\n      {typeof window !== `undefined`\n        ? createPortal(\n            <section className=\"component-modal\" data-theme={themeName}>\n              <FocusLock returnFocus>\n                <div\n                  className=\"wrapper\"\n                  role=\"dialog\"\n                  aria-modal=\"true\"\n                  aria-label={modalName}\n                >\n                  <div\n                    className={[\n                      \"content\",\n                      \"spacing-props\",\n                      \"colour-props\",\n                    ].join(\" \")}\n                    style={{\n                      maxWidth,\n                      top,\n                      width,\n                    }}\n                    data-is-animated={isAnimated}\n                    {...htmlAttributes}\n                  >\n                    {showCloseButton && closeFunction ? (\n                      <Button\n                        className=\"component-button close-button\"\n                        aria-label=\"close\"\n                        appearance=\"tertiary\"\n                        onClick={() => {\n                          closeFunction();\n                        }}\n                      >\n                        <IconFa faIcon={faClose} />\n                      </Button>\n                    ) : null}\n                    {children}\n                  </div>\n                  <div className=\"background\" data-is-animated={isAnimated} />\n                </div>\n              </FocusLock>\n            </section>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","_a","modalName","closeFunction","showCloseButton","themeName","children","_b","isAnimated","top","maxWidth","width","htmlAttributes","__rest","closeByEsc","React","useCallback","event","key","useEffect","window","document","body","style","overflow","addEventListener","removeEventListener","createElement","Fragment","createPortal","className","FocusLock","returnFocus","role","__assign","join","Button","appearance","onClick","IconFa","faIcon","faClose"],"mappings":"kaAmBM,SAAUA,EAAMC,GACpB,IAAAC,EAASD,EAAAC,UACTC,kBACAC,EAAeH,EAAAG,gBACfC,EAASJ,EAAAI,UACTC,EAAQL,EAAAK,SACRC,EAAAN,EAAAO,WAAAA,OAAU,IAAAD,GAAOA,EACjBE,QACAC,EAAQT,EAAAS,SACRC,EAAKV,EAAAU,MACFC,EAAcC,EAAAZ,EAVG,8GA8Bda,EAAaC,EAAMC,YACvB,SAACC,GACmB,WAAdA,EAAMC,KAAsBf,GAC9BA,GAEJ,EACA,CAACA,IAmBH,OAhBAgB,EAAU,WACR,GAAsB,oBAAXC,OAMX,OAHAC,SAASC,KAAKC,MAAMC,SAAW,SAC/BH,SAASI,iBAAiB,UAAWX,GAE9B,WACiB,oBAAXM,SAGXC,SAASC,KAAKC,MAAMC,SAAW,QAC/BH,SAASK,oBAAoB,UAAWZ,GAC1C,CACF,EAAG,CAACA,IAGFC,EAAAY,cAAAZ,EAAAa,SAAA,KACqB,oBAAXR,OACJS,EACEd,EAAAY,cAAA,UAAA,CAASG,UAAU,+BAA8BzB,GAC/CU,EAAAY,cAACI,GAAUC,aAAW,GACpBjB,EAAAY,cAAA,MAAA,CACEG,UAAU,UACVG,KAAK,SAAQ,aACF,OAAM,aACL/B,GAEZa,EAAAY,cAAA,MAAAO,EAAA,CACEJ,UAAW,CACT,UACA,gBACA,gBACAK,KAAK,KACPZ,MAAO,CACLb,SAAQA,EACRD,IAAGA,EACHE,MAAKA,GACN,mBACiBH,GACdI,GAEHR,GAAmBD,EAClBY,EAAAY,cAACS,EAAM,CACLN,UAAU,gCAA+B,aAC9B,QACXO,WAAW,WACXC,QAAS,WACPnC,GACF,GAEAY,EAAAY,cAACY,EAAM,CAACC,OAAQC,KAEhB,KACHnC,GAEHS,EAAAY,cAAA,MAAA,CAAKG,UAAU,aAAY,mBAAmBtB,OAIpDa,SAASC,MAEX,KAGV"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { faClose } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport Button from \"../Button\";\n\n/**\n *\n * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.\n * ## How modals work\n * - Modals are positioned over everything else in the document and remove scroll from the \"body\" tag so that modal content scrolls instead.\n * - Modals are unmounted when closed.\n * - Modal's \"trap\" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.\n * ## Accessibility\n * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal.\n * You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work,\n * so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.\n */\nexport function Modal({\n  modalName,\n  startOpen = true,\n  isAnimated = true,\n  closeFunction,\n  showCloseButton,\n  children,\n  ref: outerRef,\n  style,\n  ...htmlAttributes\n}: HTMLAttributes<HTMLDialogElement> & {\n  /** modal name used for aria-label */\n  modalName: string;\n  /** set if the modal start open */\n  startOpen: boolean;\n  /** callback function called on modal close */\n  closeFunction?: () => void;\n  /** flag to reveal close button with cross in the top right of modal */\n  showCloseButton?: boolean;\n  /** turn on animate in modal */\n  isAnimated?: boolean;\n  /** children components inside modal */\n  children?: ReactNode;\n  /** ref to the dialog element */\n  ref?: React.RefObject<HTMLDialogElement | null>;\n  /** additional style attributes for the dialog element */\n  style?: React.CSSProperties;\n}) {\n  const innerRef = useRef<HTMLDialogElement>(null);\n  const ref = outerRef ?? innerRef;\n\n  const doClose = React.useCallback((): void => {\n    if (!ref.current?.hasAttribute(\"open\")) return;\n    console.log(\"closing modal\");\n    ref.current?.close();\n    if (closeFunction) {\n      closeFunction();\n    }\n  }, [closeFunction, ref]);\n\n  useEffect(() => {\n    const closeByEsc = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") {\n        doClose();\n      }\n    };\n    if (typeof window === `undefined`) {\n      return undefined;\n    }\n    document.body.style.overflow = \"hidden\";\n    document.addEventListener(\"keydown\", closeByEsc);\n\n    return () => {\n      if (typeof window === `undefined`) {\n        return;\n      }\n      document.body.style.overflow = \"unset\";\n      document.removeEventListener(\"keydown\", closeByEsc);\n    };\n  }, [doClose]);\n\n  useEffect(() => {\n    if (startOpen && ref && ref.current) {\n      ref.current.showModal();\n    }\n  }, [startOpen, ref]);\n\n  return (\n    <>\n      <dialog\n        ref={ref}\n        className={[\"component-modal\", \"spacing-props\", \"colour-props\"].join(\n          \" \",\n        )}\n        aria-modal=\"true\"\n        aria-label={modalName}\n        open={false}\n        data-is-animated={isAnimated}\n        style={style}\n        {...htmlAttributes}\n      >\n        {showCloseButton || closeFunction ? (\n          <Button\n            className=\"component-button close-button\"\n            aria-label=\"close\"\n            appearance=\"tertiary\"\n            onClick={() => {\n              doClose();\n            }}\n          >\n            <IconFa faIcon={faClose} />\n          </Button>\n        ) : null}\n        {children}\n      </dialog>\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","_a","modalName","_b","startOpen","_c","isAnimated","closeFunction","showCloseButton","children","outerRef","ref","style","htmlAttributes","__rest","innerRef","useRef","doClose","React","useCallback","current","hasAttribute","console","log","close","useEffect","closeByEsc","event","key","window","document","body","overflow","addEventListener","removeEventListener","showModal","createElement","Fragment","__assign","className","join","open","Button","appearance","onClick","IconFa","faIcon","faClose"],"mappings":"oTAwBM,SAAUA,EAAMC,GACpB,IAAAC,EAASD,EAAAC,UACTC,EAAAF,EAAAG,UAAAA,OAAS,IAAAD,GAAOA,EAChBE,EAAAJ,EAAAK,WAAAA,OAAU,IAAAD,GAAOA,EACjBE,EAAaN,EAAAM,cACbC,EAAeP,EAAAO,gBACfC,aACKC,EAAQT,EAAAU,IACbC,EAAKX,EAAAW,MACFC,EAAcC,EAAAb,EATG,mGA4Bdc,EAAWC,EAA0B,MACrCL,EAAMD,QAAAA,EAAYK,EAElBE,EAAUC,EAAMC,YAAY,oBAChB,QAAXlB,EAAAU,EAAIS,eAAO,IAAAnB,OAAA,EAAAA,EAAEoB,aAAa,WAC/BC,QAAQC,IAAI,iBACD,QAAXpB,EAAAQ,EAAIS,mBAAOjB,GAAAA,EAAEqB,QACTjB,GACFA,IAEJ,EAAG,CAACA,EAAeI,IA6BnB,OA3BAc,EAAU,WACR,IAAMC,EAAa,SAACC,GACA,WAAdA,EAAMC,KACRX,GAEJ,EACA,GAAsB,oBAAXY,OAMX,OAHAC,SAASC,KAAKnB,MAAMoB,SAAW,SAC/BF,SAASG,iBAAiB,UAAWP,GAE9B,WACiB,oBAAXG,SAGXC,SAASC,KAAKnB,MAAMoB,SAAW,QAC/BF,SAASI,oBAAoB,UAAWR,GAC1C,CACF,EAAG,CAACT,IAEJQ,EAAU,WACJrB,GAAaO,GAAOA,EAAIS,SAC1BT,EAAIS,QAAQe,WAEhB,EAAG,CAAC/B,EAAWO,IAGbO,EAAAkB,cAAAlB,EAAAmB,SAAA,KACEnB,EAAAkB,cAAA,SAAAE,EAAA,CACE3B,IAAKA,EACL4B,UAAW,CAAC,kBAAmB,gBAAiB,gBAAgBC,KAC9D,KACD,aACU,OAAM,aACLtC,EACZuC,MAAM,EAAK,mBACOnC,EAClBM,MAAOA,GACHC,GAEHL,GAAmBD,EAClBW,EAAAkB,cAACM,EAAM,CACLH,UAAU,gCAA+B,aAC9B,QACXI,WAAW,WACXC,QAAS,WACP3B,GACF,GAEAC,EAAAkB,cAACS,EAAM,CAACC,OAAQC,KAEhB,KACHtC,GAIT"}

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import a from"react";function t(t){var c=t.current,n=t.items,l=t.hideLast,r=t.pagerCallback,i=t.perPage,s=t.searchParam,m=void 0===s?"page":s,o=t.children,d=t.id,p=i>0?i:1,u=Math.ceil(n/p)||1,g=function(e){return{href:"".concat("undefined"!=typeof window?window.location.pathname:"","?").concat(m?"".concat(m,"=").concat(e):""),onClick:function(a){a.preventDefault(),r(e)}}};return a.createElement(a.Fragment,null,n>i&&a.createElement("div",{className:"component-pagination",id:d},a.createElement("ul",{className:"pager-list"},a.createElement("li",{className:"pager-item",key:"Prev"},a.createElement("a",e({className:"pager-link","data-cta":d?"".concat(d,"-prev"):null,"data-name":"Prev","aria-disabled":1===c},1===c&&{tabIndex:-1},1!==c&&g(c-1),{"data-is-disabled":1===c}),"Prev")),function(t,c){for(var n=[],r=[],i=1;i<=c;i+=1)n.push(a.createElement("li",{className:"pager-item",key:i},a.createElement("a",e({className:"pager-link","data-cta":d?"".concat(d,"-").concat(i):null,"data-is-active":i===t},g(i),{"aria-label":"page ".concat(i," of ").concat(c)}),i)));var s=n.slice(0,1).concat(a.createElement("li",{className:"pager-item",key:"first"},a.createElement("span",null,"..."))),m=n.slice(n.length-1).concat(a.createElement("li",{className:"pager-item",key:"last"},a.createElement("span",null,"..."))).reverse();return r=n.slice(0,c),c>7&&(r=t<=4?l?n.slice(0,7):n.slice(0,5).concat(m):t>c-4?s.concat(n.slice(-5)):l?s.concat(n.slice(t-3,t+2)):s.concat(n.slice(t-2,t+1)).concat(m)),r}(c,u),a.createElement("li",{className:"pager-item",key:"Next"},a.createElement("a",e({className:"pager-link","data-cta":d?"".concat(d,"-next"):null,"data-name":"Next","aria-disabled":c===u},c===u&&{tabIndex:-1},c!==u&&g(c+1),{"data-is-disabled":c===u}),"Next"))),o))}export{t as Pagination,t as default};
+import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import a from"react";function t(t){var c=t.current,n=t.items,l=t.hideLast,r=t.pagerCallback,i=t.perPage,s=t.searchParam,m=void 0===s?"page":s,o=t.children,d=t.id,p=i>0?i:1,u=Math.ceil(n/p)||1,g=function(e){return{href:"".concat("undefined"!=typeof window?window.location.pathname:"","?").concat(m?"".concat(m,"=").concat(e):""),onClick:function(a){a.preventDefault(),r(e)}}};return a.createElement(a.Fragment,null,n>i&&a.createElement("div",{className:"component-pagination",id:d},a.createElement("ul",{className:"pager-list"},a.createElement("li",{className:"pager-item",key:"Prev"},a.createElement("a",e({className:"pager-link","data-cta":d?"".concat(d,"-prev"):null,"data-name":"Prev","aria-disabled":1===c},1===c&&{tabIndex:-1},1!==c&&g(c-1),{"data-is-disabled":1===c}),"Prev")),function(t,c){for(var n=[],r=[],i=1;i<=c;i+=1)n.push(a.createElement("li",{className:"pager-item",key:i},a.createElement("a",e({className:"pager-link","data-cta":d?"".concat(d,"-").concat(i):null,"data-is-active":i===t},g(i),{"aria-label":"page ".concat(i," of ").concat(c)}),i)));var s=n.slice(0,1).concat(a.createElement("li",{className:"pager-item",key:"first"},a.createElement("span",null,"..."))),m=n.slice(n.length-1).concat(a.createElement("li",{className:"pager-item",key:"last"},a.createElement("span",null,"..."))).reverse();return r=n.slice(0,c),c>7&&(r=t<=4?l?n.slice(0,7):n.slice(0,5).concat(m):t>c-4?s.concat(n.slice(-5)):l?s.concat(n.slice(t-3,t+2)):s.concat(n.slice(t-2,t+1)).concat(m)),r}(c,u),a.createElement("li",{className:"pager-item",key:"Next"},a.createElement("a",e({className:"pager-link","data-cta":d?"".concat(d,"-next"):null,"data-name":"Next","aria-disabled":c===u},c===u&&{tabIndex:-1},c!==u&&g(c+1),{"data-is-disabled":c===u}),"Next"))),o))}export{t as Pagination};
 //# sourceMappingURL=index.js.map