@cruk/cruk-react-components 6.2.2 → 7.0.0

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";import{Button as t}from"../Button/index.js";var i,e,r,a,l=.5,s=o.span(i||(i=n(["\n  display: inline-block;\n  transform: ",";\n  transition-duration: ","s;\n"],["\n  display: inline-block;\n  transform: ",";\n  transition-duration: ","s;\n"])),function(n){return n.$open?"translateY(0.1em) scaleY(-1)":"initial"},.5),f=o(t)(e||(e=n(["\n  display: flex;\n  color: ",";\n  font-size: ",";\n  font-family: ",";\n  font-weight: normal;\n  margin-bottom: 0;\n  height: initial;\n  text-decoration: none;\n  text-align: left;\n  border-radius: 0;\n  &:hover,\n  &:focus {\n    color: ",";\n  }\n"],["\n  display: flex;\n  color: ",";\n  font-size: ",";\n  font-family: ",";\n  font-weight: normal;\n  margin-bottom: 0;\n  height: initial;\n  text-decoration: none;\n  text-align: left;\n  border-radius: 0;\n  &:hover,\n  &:focus {\n    color: ",";\n  }\n"])),function(n){var o=n.theme,t=n.$textColor;return t&&void 0!==o.colors[t]?o.colors[t]:t||o.colors.collapseHeaderColor},function(n){var o=n.theme,t=o.fontSizes,i=o.fontSizes.m,e=n.$textSize;return e?t[e]:i},function(n){var o=n.theme;return n.$textFontFamily||o.typography.fontFamilyBase},function(n){var o=n.theme.colors,t=n.$textColor;return t&&void 0!==o[t]?o[t]:t||o.collapseHeaderColor}),m=o.div(r||(r=n(["\n  margin: 0;\n  transition: ","s ease;\n  height: ",";\n  visibility: ",";\n  overflow: hidden;\n  & > p {\n    margin-top: 0;\n  }\n"],["\n  margin: 0;\n  transition: ","s ease;\n  height: ",";\n  visibility: ",";\n  overflow: hidden;\n  & > p {\n    margin-top: 0;\n  }\n"])),.5,function(n){return n.$contentHeight},function(n){return n.$openStatus?"visible":"hidden"}),c=o.div(a||(a=n(["\n  cursor: pointer;\n"],["\n  cursor: pointer;\n"])));export{m as CollapseContent,c as CustomHeader,f as DefaultHeader,s as FlippingIcon,l as transitionDurationSeconds};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";import{Button as i}from"../Button/index.js";var o,r,e,a,s=.5,l=t.span(o||(o=n(["\n  display: inline-block;\n  transform: ",";\n  transition-duration: ","s;\n"],["\n  display: inline-block;\n  transform: ",";\n  transition-duration: ","s;\n"])),function(n){return n.$open?"translateY(0.1em) scaleY(-1)":"initial"},.5),f=t(i)(r||(r=n(["\n  display: flex;\n  color: ",";\n  font-size: ",";\n  font-family: ",";\n  font-weight: normal;\n  margin-bottom: 0;\n  height: initial;\n  text-decoration: none;\n  text-align: left;\n  border-radius: 0;\n  &:hover,\n  &:focus {\n    color: ",";\n  }\n"],["\n  display: flex;\n  color: ",";\n  font-size: ",";\n  font-family: ",";\n  font-weight: normal;\n  margin-bottom: 0;\n  height: initial;\n  text-decoration: none;\n  text-align: left;\n  border-radius: 0;\n  &:hover,\n  &:focus {\n    color: ",";\n  }\n"])),function(n){return n.$textColor},function(n){return n.$textSize},function(n){return n.$textFontFamily||'var(--typ-font-family-base, "Poppins", Arial, sans-serif)'},function(n){return n.$textColor}),m=t.div(e||(e=n(["\n  margin: 0;\n  transition: ","s ease;\n  height: ",";\n  visibility: ",";\n  overflow: hidden;\n  & > p {\n    margin-top: 0;\n  }\n"],["\n  margin: 0;\n  transition: ","s ease;\n  height: ",";\n  visibility: ",";\n  overflow: hidden;\n  & > p {\n    margin-top: 0;\n  }\n"])),.5,function(n){return n.$contentHeight},function(n){return n.$openStatus?"visible":"hidden"}),u=t.div(a||(a=n(["\n  cursor: pointer;\n"],["\n  cursor: pointer;\n"])));export{m as CollapseContent,u as CustomHeader,f as DefaultHeader,l as FlippingIcon,s as transitionDurationSeconds};
 //# sourceMappingURL=styles.js.map

package/lib/src/components/Collapse/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Collapse/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport {\n  type FontSizeType,\n  type ThemeType,\n  type ColorKeyType,\n} from \"../../types\";\nimport Button from \"../Button\";\n\nexport const transitionDurationSeconds = 0.5;\n\nexport const FlippingIcon = styled.span<{ $open: boolean }>`\n  display: inline-block;\n  transform: ${({ $open }) =>\n    $open ? \"translateY(0.1em) scaleY(-1)\" : \"initial\"};\n  transition-duration: ${transitionDurationSeconds}s;\n`;\n\nexport const DefaultHeader = styled(Button)<{\n  theme: ThemeType;\n  $textColor?: string;\n  $textSize?: FontSizeType;\n  $textFontFamily?: string;\n}>`\n  display: flex;\n  color: ${({ theme, $textColor }) =>\n    !!$textColor &&\n    typeof theme.colors[$textColor as ColorKeyType] !== \"undefined\"\n      ? theme.colors[$textColor as ColorKeyType]\n      : $textColor || theme.colors.collapseHeaderColor};\n  font-size: ${({\n    theme: {\n      fontSizes,\n      fontSizes: { m },\n    },\n    $textSize,\n  }) => ($textSize ? fontSizes[$textSize] : m)};\n  font-family: ${({ theme, $textFontFamily }) =>\n    $textFontFamily || theme.typography.fontFamilyBase};\n  font-weight: normal;\n  margin-bottom: 0;\n  height: initial;\n  text-decoration: none;\n  text-align: left;\n  border-radius: 0;\n  &:hover,\n  &:focus {\n    color: ${({ theme: { colors }, $textColor }) =>\n      $textColor && typeof colors[$textColor as ColorKeyType] !== \"undefined\"\n        ? colors[$textColor as ColorKeyType]\n        : $textColor || colors.collapseHeaderColor};\n  }\n`;\n\nexport const CollapseContent = styled.div<{\n  $contentHeight: string;\n  $openStatus: boolean;\n}>`\n  margin: 0;\n  transition: ${transitionDurationSeconds}s ease;\n  height: ${({ $contentHeight }: { $contentHeight: string }) => $contentHeight};\n  visibility: ${({ $openStatus }: { $openStatus: boolean }) =>\n    $openStatus ? \"visible\" : \"hidden\"};\n  overflow: hidden;\n  & > p {\n    margin-top: 0;\n  }\n`;\n\nexport const CustomHeader = styled.div`\n  cursor: pointer;\n`;\n"],"names":["transitionDurationSeconds","FlippingIcon","styled","span","templateObject_1","__makeTemplateObject","_a","$open","DefaultHeader","Button","templateObject_2","theme","$textColor","colors","collapseHeaderColor","_b","fontSizes","m","$textSize","$textFontFamily","typography","fontFamilyBase","CollapseContent","div","templateObject_3","$contentHeight","$openStatus","CustomHeader","templateObject_4"],"mappings":"6JASO,YAAMA,EAA4B,GAE5BC,EAAeC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,4CAAA,6BAAA,QAAA,CAAoB,4CAGL,6BACJ,UAFnC,SAACC,GACZ,OADmBA,EAAAC,MACX,+BAAiC,SAAzC,EALqC,IAS5BC,EAAgBN,EAAOO,EAAPP,CAAcQ,IAAAA,EAAAL,EAAA,CAAA,gCAAA,mBAAA,qBAAA,+KAAA,YAAA,CAKzC,gCAMoD,mBAOR,qBAEQ,+KAYJ,cAzBvC,SAACC,OAAEK,EAAKL,EAAAK,MAAEC,EAAUN,EAAAM,WAC3B,OAAEA,QACkD,IAA7CD,EAAME,OAAOD,GAChBD,EAAME,OAAOD,GACbA,GAAcD,EAAME,OAAOC,mBAH/B,EAIW,SAACR,OACZS,EAAAT,EAAAK,MACEK,EAASD,EAAAC,UACIC,EAACF,EAAAC,UAAAC,EAEhBC,EAASZ,EAAAY,UACL,OAACA,EAAYF,EAAUE,GAAaD,CAApC,EACS,SAACX,OAAEK,EAAKL,EAAAK,MACrB,OADsCL,EAAAa,iBACnBR,EAAMS,WAAWC,cAApC,EASS,SAACf,OAAWO,EAAMP,EAAAK,MAAAE,OAAID,EAAUN,EAAAM,WACvC,OAAAA,QAA4D,IAAvCC,EAAOD,GACxBC,EAAOD,GACPA,GAAcC,EAAOC,mBAFzB,GAMOQ,EAAkBpB,EAAOqB,IAAGC,IAAAA,EAAAnB,EAAA,CAAA,iCAAA,sBAAA,oBAAA,gEAAA,CAGvC,iCAEuC,sBACqC,oBAExC,kEArDG,GAmD7B,SAACC,GAAmD,OAAnCA,EAAAmB,cAAmC,EAChD,SAACnB,GACb,OAD0BA,EAAAoB,YACZ,UAAY,QAA1B,GAOSC,EAAezB,EAAOqB,IAAGK,IAAAA,EAAAvB,EAAA,CAAA,0BAAA,CAAA"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Collapse/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport Button from \"../Button\";\n\nexport const transitionDurationSeconds = 0.5;\n\nexport const FlippingIcon = styled.span<{ $open: boolean }>`\n  display: inline-block;\n  transform: ${({ $open }) =>\n    $open ? \"translateY(0.1em) scaleY(-1)\" : \"initial\"};\n  transition-duration: ${transitionDurationSeconds}s;\n`;\n\nexport const DefaultHeader = styled(Button)<{\n  $textColor?: string;\n  $textSize?: string;\n  $textFontFamily?: string;\n}>`\n  display: flex;\n  color: ${({ $textColor }) => $textColor};\n  font-size: ${({ $textSize }) => $textSize};\n  font-family: ${({ $textFontFamily }) =>\n    $textFontFamily ||\n    `var(--typ-font-family-base, \"Poppins\", Arial, sans-serif)`};\n  font-weight: normal;\n  margin-bottom: 0;\n  height: initial;\n  text-decoration: none;\n  text-align: left;\n  border-radius: 0;\n  &:hover,\n  &:focus {\n    color: ${({ $textColor }) => $textColor};\n  }\n`;\n\nexport const CollapseContent = styled.div<{\n  $contentHeight: string;\n  $openStatus: boolean;\n}>`\n  margin: 0;\n  transition: ${transitionDurationSeconds}s ease;\n  height: ${({ $contentHeight }: { $contentHeight: string }) => $contentHeight};\n  visibility: ${({ $openStatus }: { $openStatus: boolean }) =>\n    $openStatus ? \"visible\" : \"hidden\"};\n  overflow: hidden;\n  & > p {\n    margin-top: 0;\n  }\n`;\n\nexport const CustomHeader = styled.div`\n  cursor: pointer;\n`;\n"],"names":["transitionDurationSeconds","FlippingIcon","styled","span","templateObject_1","__makeTemplateObject","_a","$open","DefaultHeader","Button","templateObject_2","$textColor","$textSize","$textFontFamily","CollapseContent","div","templateObject_3","$contentHeight","$openStatus","CustomHeader","templateObject_4"],"mappings":"6JAIO,YAAMA,EAA4B,GAE5BC,EAAeC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,4CAAA,6BAAA,QAAA,CAAoB,4CAGL,6BACJ,UAFnC,SAACC,GACZ,OADmBA,EAAAC,MACX,+BAAiC,SAAzC,EALqC,IAS5BC,EAAgBN,EAAOO,EAAPP,CAAcQ,IAAAA,EAAAL,EAAA,CAAA,gCAAA,mBAAA,qBAAA,+KAAA,YAAA,CAIzC,gCAEuC,mBACE,qBAGoB,+KASpB,cAbhC,SAACC,GAAmB,OAAPA,EAAAK,UAAO,EAChB,SAACL,GAAkB,OAAPA,EAAAM,SAAO,EACjB,SAACN,GACd,OAD+BA,EAAAO,iBAE/B,2DADA,EAUS,SAACP,GAAmB,OAAPA,EAAAK,UAAO,GAIpBG,EAAkBZ,EAAOa,IAAGC,IAAAA,EAAAX,EAAA,CAAA,iCAAA,sBAAA,oBAAA,gEAAA,CAGvC,iCAEuC,sBACqC,oBAExC,kEAxCG,GAsC7B,SAACC,GAAmD,OAAnCA,EAAAW,cAAmC,EAChD,SAACX,GACb,OAD0BA,EAAAY,YACZ,UAAY,QAA1B,GAOSC,EAAejB,EAAOa,IAAGK,IAAAA,EAAAf,EAAA,CAAA,0BAAA,CAAA"}

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

@@ -1,2 +1,2 @@
-import e from"react";import{useTheme as t}from"styled-components";import{ErrorText as n}from"../ErrorText/index.js";import{Text as r}from"../Text/index.js";import{TextField as a}from"../TextField/index.js";import{Fieldset as o,LegendText as l,DateTextFieldWrapper as i,LargeDateTextFieldWrapper as m,ErrorTextWrapper as d}from"./styles.js";function u(u){var s=u.label,c=u.hintText,p=u.day,h=u.month,y=u.year,E=u.dayName,x=void 0===E?"day":E,b=u.monthName,f=void 0===b?"month":b,g=u.yearName,v=void 0===g?"year":g,C=u.dayHasError,q=u.monthHasError,I=u.yearHasError,L=u.errorMessage,M=u.onChange,B=void 0===M?function(){}:M,F=u.onBlur,T=void 0===F?function(){}:F,j=u.onFocus,H=void 0===j?function(){}:j,N=u.disabled,R=u.required,W=t();return e.createElement(o,null,e.createElement(l,null,s,!R&&e.createElement("span",{style:{fontWeight:W.typography.fontWeightBase}}," (optional)")),c&&e.createElement(r,{textColor:W.colors.textMid},c),e.createElement(i,null,e.createElement(a,{label:"Day",type:"text",name:x,required:!!R,hideRequiredIndicationInLabel:!0,maxLength:2,autoComplete:"bday-day",pattern:"[0-9]*",inputMode:"numeric",value:p,onChange:B,onBlur:T,onFocus:H,hasError:C,disabled:N})),e.createElement(i,null,e.createElement(a,{label:"Month",type:"text",name:f,required:!!R,hideRequiredIndicationInLabel:!0,maxLength:2,autoComplete:"bday-month",pattern:"[0-9]*",inputMode:"numeric",value:h,onChange:B,onBlur:T,onFocus:H,hasError:q,disabled:N})),e.createElement(m,null,e.createElement(a,{label:"Year",type:"text",name:v,required:!!R,hideRequiredIndicationInLabel:!0,maxLength:4,autoComplete:"bday-year",pattern:"[0-9]*",inputMode:"numeric",value:y,onChange:B,onBlur:T,onFocus:H,hasError:I,disabled:N})),L&&e.createElement(d,null,e.createElement(n,{marginTop:"xxs"},L)))}export{u as DateField,u as default};
+import e from"react";import{ErrorText as t}from"../ErrorText/index.js";import{Text as n}from"../Text/index.js";import{TextField as r}from"../TextField/index.js";import{Fieldset as a,LegendText as o,DateTextFieldWrapper as l,LargeDateTextFieldWrapper as i,ErrorTextWrapper as d}from"./styles.js";function m(m){var u=m.label,c=m.hintText,s=m.day,h=m.month,p=m.year,y=m.dayName,E=void 0===y?"day":y,x=m.monthName,b=void 0===x?"month":x,f=m.yearName,g=void 0===f?"year":f,v=m.dayHasError,C=m.monthHasError,q=m.yearHasError,I=m.errorMessage,L=m.onChange,F=void 0===L?function(){}:L,M=m.onBlur,T=void 0===M?function(){}:M,j=m.onFocus,B=void 0===j?function(){}:j,H=m.disabled,N=m.required;return e.createElement(a,null,e.createElement(o,null,u,!N&&e.createElement("span",{style:{fontWeight:"var(--typ-font-weight-base, 300)"}}," (optional)")),c&&e.createElement(n,{textColor:"text-mid"},c),e.createElement(l,null,e.createElement(r,{label:"Day",type:"text",name:E,required:!!N,hideRequiredIndicationInLabel:!0,maxLength:2,autoComplete:"bday-day",pattern:"[0-9]*",inputMode:"numeric",value:s,onChange:F,onBlur:T,onFocus:B,hasError:v,disabled:H})),e.createElement(l,null,e.createElement(r,{label:"Month",type:"text",name:b,required:!!N,hideRequiredIndicationInLabel:!0,maxLength:2,autoComplete:"bday-month",pattern:"[0-9]*",inputMode:"numeric",value:h,onChange:F,onBlur:T,onFocus:B,hasError:C,disabled:H})),e.createElement(i,null,e.createElement(r,{label:"Year",type:"text",name:g,required:!!N,hideRequiredIndicationInLabel:!0,maxLength:4,autoComplete:"bday-year",pattern:"[0-9]*",inputMode:"numeric",value:p,onChange:F,onBlur:T,onFocus:B,hasError:q,disabled:H})),I&&e.createElement(d,null,e.createElement(t,{marginTop:"xxs"},I)))}export{m as DateField,m as default};
 //# 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 { useTheme } from \"styled-components\";\nimport { ErrorText } from \"../ErrorText\";\nimport { Text } from \"../Text\";\nimport { TextField } from \"../TextField\";\n\nimport {\n  Fieldset,\n  DateTextFieldWrapper,\n  LargeDateTextFieldWrapper,\n  ErrorTextWrapper,\n  LegendText,\n} from \"./styles\";\nimport { type ThemeType } from \"../../types\";\n\nexport type DateFieldProps = 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\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}: DateFieldProps) {\n  const theme = useTheme();\n  const typedTheme = theme as ThemeType;\n  return (\n    <Fieldset>\n      <LegendText>\n        {label}\n        {!required && (\n          <span\n            style={{\n              fontWeight: typedTheme.typography.fontWeightBase,\n            }}\n          >\n            {` (optional)`}\n          </span>\n        )}\n      </LegendText>\n      {hintText && (\n        <Text textColor={typedTheme.colors.textMid}>{hintText}</Text>\n      )}\n      <DateTextFieldWrapper>\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      </DateTextFieldWrapper>\n      <DateTextFieldWrapper>\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      </DateTextFieldWrapper>\n      <LargeDateTextFieldWrapper>\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      </LargeDateTextFieldWrapper>\n      {errorMessage && (\n        <ErrorTextWrapper>\n          <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>\n        </ErrorTextWrapper>\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","typedTheme","useTheme","React","Fieldset","createElement","LegendText","style","fontWeight","typography","fontWeightBase","Text","textColor","colors","textMid","DateTextFieldWrapper","TextField","type","name","hideRequiredIndicationInLabel","maxLength","autoComplete","pattern","inputMode","value","hasError","LargeDateTextFieldWrapper","ErrorTextWrapper","ErrorText","marginTop"],"mappings":"oVA8CM,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,SAGFC,EADQC,IAEd,OACEC,gBAACC,EAAQ,KACPD,EAAAE,cAACC,EAAU,KACR5B,GACCsB,GACAG,EAAAE,cAAA,OAAA,CACEE,MAAO,CACLC,WAAYP,EAAWQ,WAAWC,iBAGnC,gBAIN/B,GACCwB,EAAAE,cAACM,GAAKC,UAAWX,EAAWY,OAAOC,SAAUnC,GAE/CwB,EAAAE,cAACU,EAAoB,KACnBZ,EAAAE,cAACW,EAAS,CACRtC,MAAM,MACNuC,KAAK,OACLC,KAAMlC,EACNgB,WAAYA,EACZmB,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,WACbC,QAAQ,SACRC,UAAU,UACVC,MAAO5C,EACPc,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACT2B,SAAUpC,EACVU,SAAUA,KAGdI,EAAAE,cAACU,EAAoB,KACnBZ,EAAAE,cAACW,EAAS,CACRtC,MAAM,QACNuC,KAAK,OACLC,KAAMhC,EACNc,WAAYA,EACZmB,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,aACbC,QAAQ,SACRC,UAAU,UACVC,MAAO3C,EACPa,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACT2B,SAAUnC,EACVS,SAAUA,KAGdI,EAAAE,cAACqB,EAAyB,KACxBvB,EAAAE,cAACW,EAAS,CACRtC,MAAM,OACNuC,KAAK,OACLC,KAAM9B,EACNY,WAAYA,EACZmB,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,YACbC,QAAQ,SACRC,UAAU,UACVC,MAAO1C,EACPY,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACT2B,SAAUlC,EACVQ,SAAUA,KAGbP,GACCW,EAAAE,cAACsB,EAAgB,KACfxB,EAAAE,cAACuB,EAAS,CAACC,UAAU,OAAOrC,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\nimport {\n  Fieldset,\n  DateTextFieldWrapper,\n  LargeDateTextFieldWrapper,\n  ErrorTextWrapper,\n  LegendText,\n} from \"./styles\";\n\nexport type DateFieldProps = 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\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}: DateFieldProps) {\n  return (\n    <Fieldset>\n      <LegendText>\n        {label}\n        {!required && (\n          <span\n            style={{\n              fontWeight: \"var(--typ-font-weight-base, 300)\",\n            }}\n          >\n            {` (optional)`}\n          </span>\n        )}\n      </LegendText>\n      {hintText && <Text textColor=\"text-mid\">{hintText}</Text>}\n      <DateTextFieldWrapper>\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      </DateTextFieldWrapper>\n      <DateTextFieldWrapper>\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      </DateTextFieldWrapper>\n      <LargeDateTextFieldWrapper>\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      </LargeDateTextFieldWrapper>\n      {errorMessage && (\n        <ErrorTextWrapper>\n          <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>\n        </ErrorTextWrapper>\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","Fieldset","createElement","LegendText","style","fontWeight","Text","textColor","DateTextFieldWrapper","TextField","type","name","hideRequiredIndicationInLabel","maxLength","autoComplete","pattern","inputMode","value","hasError","LargeDateTextFieldWrapper","ErrorTextWrapper","ErrorText","marginTop"],"mappings":"uSA4CM,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,SAER,OACEC,gBAACC,EAAQ,KACPD,EAAAE,cAACC,EAAU,KACR1B,GACCsB,GACAC,EAAAE,cAAA,OAAA,CACEE,MAAO,CACLC,WAAY,qCAGb,gBAIN3B,GAAYsB,gBAACM,EAAI,CAACC,UAAU,YAAY7B,GACzCsB,EAAAE,cAACM,EAAoB,KACnBR,EAAAE,cAACO,EAAS,CACRhC,MAAM,MACNiC,KAAK,OACLC,KAAM5B,EACNgB,WAAYA,EACZa,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,WACbC,QAAQ,SACRC,UAAU,UACVC,MAAOtC,EACPc,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTqB,SAAU9B,EACVU,SAAUA,KAGdE,EAAAE,cAACM,EAAoB,KACnBR,EAAAE,cAACO,EAAS,CACRhC,MAAM,QACNiC,KAAK,OACLC,KAAM1B,EACNc,WAAYA,EACZa,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,aACbC,QAAQ,SACRC,UAAU,UACVC,MAAOrC,EACPa,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTqB,SAAU7B,EACVS,SAAUA,KAGdE,EAAAE,cAACiB,EAAyB,KACxBnB,EAAAE,cAACO,EAAS,CACRhC,MAAM,OACNiC,KAAK,OACLC,KAAMxB,EACNY,WAAYA,EACZa,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,YACbC,QAAQ,SACRC,UAAU,UACVC,MAAOpC,EACPY,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTqB,SAAU5B,EACVQ,SAAUA,KAGbP,GACCS,EAAAE,cAACkB,EAAgB,KACfpB,EAAAE,cAACmB,EAAS,CAACC,UAAU,OAAO/B,IAKtC"}

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

@@ -1,10 +1,7 @@
-import { type ThemeType } from "../../types";
 export declare const Fieldset: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
-export declare const LegendText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, {
-    theme: ThemeType;
-}>> & string;
-export declare const TextAsLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
-    textColor?: string;
+export declare const LegendText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
+export declare const TextAsLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    textColor?: typeof import("..").colours[number] | string;
     textAlign?: "left" | "right" | "center" | "justify";
     textSize?: import("..").FontSizeType;
     textWeight?: number | string;
@@ -13,13 +10,7 @@ export declare const TextAsLabel: import("styled-components/dist/types").IStyled
     wordBreak?: import("..").WordBreakType;
     overflowWrap?: import("..").OverflowWrapType;
     ref?: import("react").Ref<HTMLElement>;
-}, {
-    theme: ThemeType;
-}>> & string & Omit<(props: import("../Text").TextProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const DateTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    theme: ThemeType;
-}>> & string;
-export declare const LargeDateTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & {
-    theme: ThemeType;
-}, never>> & string;
+}, never>> & string & Omit<(props: import("../Text").TextProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const DateTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LargeDateTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ErrorTextWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";import{Text as i}from"../Text/index.js";var e=t.fieldset(r||(r=n(["\n  margin: 0;\n  padding: 0;\n  border: 0;\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n"],["\n  margin: 0;\n  padding: 0;\n  border: 0;\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n"]))),o=t.legend(a||(a=n(["\n  font-family: ",";\n  font-weight: ",";\n  margin-bottom: ",";\n\n  // do not increase font size of check icon at this breakpoint\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  font-family: ",";\n  font-weight: ",";\n  margin-bottom: ",";\n\n  // do not increase font size of check icon at this breakpoint\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),function(n){return n.theme.typography.fontFamilyLabel},function(n){return n.theme.typography.fontWeightLabels||500},function(n){return n.theme.spacing.xxs},function(n){return n.theme.breakpoint.desktopLarge},function(n){return n.theme.fontSizes.ml});t(i)(m||(m=n(["\n  font-family: ",";\n"],["\n  font-family: ",";\n"])),function(n){return n.theme.typography.fontFamilyLabel});var r,a,m,s,f,b,g=t.div(s||(s=n(["\n  display: inline-block;\n  width: 60px;\n  margin-right: ",";\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: ",";\n  }\n"],["\n  display: inline-block;\n  width: 60px;\n  margin-right: ",";\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: ",";\n  }\n"])),function(n){return n.theme.spacing.xs},function(n){return n.theme.typography.fontWeightBase}),h=t(g)(f||(f=n(["\n  width: 80px;\n"],["\n  width: 80px;\n"]))),d=t.div(b||(b=n(["\n  clear: left;\n"],["\n  clear: left;\n"])));export{g as DateTextFieldWrapper,d as ErrorTextWrapper,e as Fieldset,h as LargeDateTextFieldWrapper,o as LegendText};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import i from"styled-components";import{Text as t}from"../Text/index.js";var a=i.fieldset(r||(r=n(["\n  margin: 0;\n  padding: 0;\n  border: 0;\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n"],["\n  margin: 0;\n  padding: 0;\n  border: 0;\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n"]))),e=i.legend(o||(o=n(['\n  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-labels, 500);\n  margin-bottom: var(--spacing-xxs, 1rem);\n\n  // do not increase font size of check icon at this breakpoint\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n'],['\n  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-labels, 500);\n  margin-bottom: var(--spacing-xxs, 1rem);\n\n  // do not increase font size of check icon at this breakpoint\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n'])));i(t)(s||(s=n(['\n  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);\n'],['\n  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);\n'])));var r,o,s,m,l,p,f=i.div(m||(m=n(["\n  display: inline-block;\n  width: 60px;\n  margin-right: var(--spacing-xs, 1rem);\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: var(--typ-font-weight-base, 300);\n  }\n"],["\n  display: inline-block;\n  width: 60px;\n  margin-right: var(--spacing-xs, 1rem);\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: var(--typ-font-weight-base, 300);\n  }\n"]))),b=i.div(l||(l=n(["\n  display: inline-block;\n  width: 80px;\n  margin-right: var(--spacing-xs, 1rem);\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: var(--typ-font-weight-base, 300);\n  }\n"],["\n  display: inline-block;\n  width: 80px;\n  margin-right: var(--spacing-xs, 1rem);\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: var(--typ-font-weight-base, 300);\n  }\n"]))),g=i.div(p||(p=n(["\n  clear: left;\n"],["\n  clear: left;\n"])));export{f as DateTextFieldWrapper,g as ErrorTextWrapper,a as Fieldset,b as LargeDateTextFieldWrapper,e as LegendText};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/DateField/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\nimport Text from \"../Text\";\n\nexport const Fieldset = styled.fieldset`\n  margin: 0;\n  padding: 0;\n  border: 0;\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n`;\n\nexport const LegendText = styled.legend<{ theme: ThemeType }>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels || 500};\n  margin-bottom: ${({ theme }) => theme.spacing.xxs};\n\n  // do not increase font size of check icon at this breakpoint\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktopLarge}) {\n    font-size: ${({ theme }) => theme.fontSizes.ml};\n  }\n`;\n\nexport const TextAsLabel = styled(Text)<{ theme: ThemeType }>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n`;\n\nexport const DateTextFieldWrapper = styled.div<{ theme: ThemeType }>`\n  display: inline-block;\n  width: 60px;\n  margin-right: ${({ theme }) => theme.spacing.xs};\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n  }\n`;\n\nexport const LargeDateTextFieldWrapper = styled(DateTextFieldWrapper)`\n  width: 80px;\n`;\n\nexport const ErrorTextWrapper = styled.div`\n  clear: left;\n`;\n"],"names":["Fieldset","styled","fieldset","templateObject_1","__makeTemplateObject","LegendText","legend","_a","theme","typography","fontFamilyLabel","fontWeightLabels","spacing","xxs","breakpoint","desktopLarge","fontSizes","ml","Text","templateObject_3","DateTextFieldWrapper","div","templateObject_4","xs","fontWeightBase","LargeDateTextFieldWrapper","templateObject_5","ErrorTextWrapper","templateObject_6"],"mappings":"yJAIO,IAAMA,EAAWC,EAAOC,SAAQC,IAAAA,EAAAC,EAAA,CAAA,0LAAA,CAAA,6LAa1BC,EAAaJ,EAAOK,kNAA4B,oBACG,qBACQ,uBACrB,8FAGgB,uBACjB,cANjC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,EACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWE,kBAAoB,GAArC,EACb,SAACJ,GAAc,OAAPA,EAAAC,MAAaI,QAAQC,GAAd,EAGX,SAACN,GAAc,OAAPA,EAAAC,MAAaM,WAAWC,YAAjB,EACrB,SAACR,GAAc,OAAPA,EAAAC,MAAaQ,UAAUC,EAAhB,GAILhB,EAAOiB,EAAPjB,CAAYkB,IAAAA,EAAAf,EAAA,CAAA,oBAAA,OAAA,CAAsB,oBACG,SAA/C,SAACG,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,GAGzB,gBAAMU,EAAuBnB,EAAOoB,IAAGC,IAAAA,EAAAlB,EAAA,CAAA,+DAAA,kGAAA,YAAA,CAAsB,+DAGnB,kGAGgB,cAH/C,SAACG,GAAc,OAAPA,EAAAC,MAAaI,QAAQW,EAAd,EAGd,SAAChB,GAAc,OAAPA,EAAAC,MAAaC,WAAWe,cAAjB,GAIrBC,EAA4BxB,EAAOmB,EAAPnB,CAA4ByB,IAAAA,EAAAtB,EAAA,CAAA,sBAAA,CAAA,yBAIxDuB,EAAmB1B,EAAOoB,IAAGO,IAAAA,EAAAxB,EAAA,CAAA,sBAAA,CAAA"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/DateField/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport Text from \"../Text\";\n\nexport const Fieldset = styled.fieldset`\n  margin: 0;\n  padding: 0;\n  border: 0;\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n`;\n\nexport const LegendText = styled.legend`\n  font-family: var(--typ-font-family-label, \"Poppins\", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-labels, 500);\n  margin-bottom: var(--spacing-xxs, 1rem);\n\n  // do not increase font size of check icon at this breakpoint\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n`;\n\nexport const TextAsLabel = styled(Text)`\n  font-family: var(--typ-font-family-label, \"Poppins\", Arial, sans-serif);\n`;\n\nexport const DateTextFieldWrapper = styled.div`\n  display: inline-block;\n  width: 60px;\n  margin-right: var(--spacing-xs, 1rem);\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: var(--typ-font-weight-base, 300);\n  }\n`;\n\nexport const LargeDateTextFieldWrapper = styled.div`\n  display: inline-block;\n  width: 80px;\n  margin-right: var(--spacing-xs, 1rem);\n  span {\n    margin-bottom: 0.25rem; // this is smaller than xxs spacing\n    font-weight: var(--typ-font-weight-base, 300);\n  }\n`;\n\nexport const ErrorTextWrapper = styled.div`\n  clear: left;\n`;\n"],"names":["Fieldset","styled","fieldset","templateObject_1","__makeTemplateObject","LegendText","legend","templateObject_2","Text","templateObject_3","DateTextFieldWrapper","div","templateObject_4","LargeDateTextFieldWrapper","templateObject_5","ErrorTextWrapper","templateObject_6"],"mappings":"yJAGO,IAAMA,EAAWC,EAAOC,SAAQC,IAAAA,EAAAC,EAAA,CAAA,0LAAA,CAAA,6LAa1BC,EAAaJ,EAAOK,OAAMC,IAAAA,EAAAH,EAAA,CAAA,yUAAA,CAAA,4UAWZH,EAAOO,EAAPP,CAAYQ,IAAAA,EAAAL,EAAA,CAAA,kFAAA,CAAA,qFAIhC,gBAAMM,EAAuBT,EAAOU,IAAGC,IAAAA,EAAAR,EAAA,CAAA,8NAAA,CAAA,iOAUjCS,EAA4BZ,EAAOU,IAAGG,IAAAA,EAAAV,EAAA,CAAA,8NAAA,CAAA,iOAUtCW,EAAmBd,EAAOU,IAAGK,IAAAA,EAAAZ,EAAA,CAAA,sBAAA,CAAA"}

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as t}from"styled-components";import{faTriangleExclamation as s}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as m}from"../../themes/cruk.js";import{StyledErrorText as n}from"./styles.js";import{IconFa as i}from"../IconFa/index.js";import{Box as a}from"../Box/index.js";function l(l){var d=l.children,f=l.as,p=void 0===f?"span":f,c=e(l,["children","as"]),u=t(),x=o(o({},m),u),h="string"==typeof d&&d.length;return r.createElement(n,o({forwardedAs:p},c,{theme:x,role:"alert"}),h?r.createElement(a,{as:"span",marginRight:"xxs"},r.createElement(i,{faIcon:s,size:"1em"})):null,d)}export{l as ErrorText,l as default};
+import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{faTriangleExclamation as o}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{StyledErrorText as s}from"./styles.js";import{IconFa as i}from"../IconFa/index.js";import{Box as n}from"../Box/index.js";function a(a){var m=a.children,l=a.as,d=void 0===l?"span":l,f=e(a,["children","as"]),c="string"==typeof m&&m.length;return t.createElement(s,r({forwardedAs:d},f,{role:"alert",textColor:"var(--clr-text-error, #d93025)",textWeight:"var(--typ-font-weight-heavy, 700)"}),c?t.createElement(n,{as:"span",marginRight:"xxs"},t.createElement(i,{faIcon:o,size:"1em"})):null,m)}export{a as ErrorText,a as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ErrorText/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { faTriangleExclamation } from \"@fortawesome/free-solid-svg-icons\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledErrorText } from \"./styles\";\nimport { IconFa } from \"../IconFa\";\nimport { Box } from \"../Box\";\n\nexport type ErrorTextProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n  };\n\n/**\n *\n * To be used in forms for inline validation. Applies styling and accessibility attribute so that it will be read by screen readers.\n *\n * Please be aware that some input components already have this component built in and can be passed an \"errorMessage\" prop\n */\nexport function ErrorText({ children, as = \"span\", ...props }: ErrorTextProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const shouldShowIcon = typeof children === \"string\" && children.length;\n  return (\n    <StyledErrorText forwardedAs={as} {...props} theme={theme} role=\"alert\">\n      {shouldShowIcon ? (\n        <Box as=\"span\" marginRight=\"xxs\">\n          <IconFa faIcon={faTriangleExclamation} size=\"1em\" />\n        </Box>\n      ) : null}\n      {children}\n    </StyledErrorText>\n  );\n}\n\nexport default ErrorText;\n"],"names":["ErrorText","_a","children","_b","as","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","shouldShowIcon","length","React","createElement","StyledErrorText","forwardedAs","role","Box","marginRight","IconFa","faIcon","faTriangleExclamation","size"],"mappings":"4aAqBM,SAAUA,EAAUC,GAAE,IAAAC,EAAQD,EAAAC,SAAEC,EAAAF,EAAAG,GAAAA,OAAE,IAAAD,EAAG,OAAMA,EAAKE,EAAKC,EAAAL,EAAjC,mBAClBM,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGCK,EAAqC,iBAAbV,GAAyBA,EAASW,OAChE,OACEC,EAAAC,cAACC,EAAeN,EAAA,CAACO,YAAab,GAAQC,EAAK,CAAEI,MAAOA,EAAOS,KAAK,UAC7DN,EACCE,EAAAC,cAACI,EAAG,CAACf,GAAG,OAAOgB,YAAY,OACzBN,EAAAC,cAACM,EAAM,CAACC,OAAQC,EAAuBC,KAAK,SAE5C,KACHtB,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ErrorText/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes } from \"react\";\nimport { faTriangleExclamation } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledErrorText } from \"./styles\";\nimport { IconFa } from \"../IconFa\";\nimport { Box } from \"../Box\";\n\nexport type ErrorTextProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n  };\n\n/**\n *\n * To be used in forms for inline validation. Applies styling and accessibility attribute so that it will be read by screen readers.\n *\n * Please be aware that some input components already have this component built in and can be passed an \"errorMessage\" prop\n */\nexport function ErrorText({ children, as = \"span\", ...props }: ErrorTextProps) {\n  const shouldShowIcon = typeof children === \"string\" && children.length;\n  return (\n    <StyledErrorText\n      forwardedAs={as}\n      {...props}\n      role=\"alert\"\n      textColor=\"var(--clr-text-error, #d93025)\"\n      textWeight=\"var(--typ-font-weight-heavy, 700)\"\n    >\n      {shouldShowIcon ? (\n        <Box as=\"span\" marginRight=\"xxs\">\n          <IconFa faIcon={faTriangleExclamation} size=\"1em\" />\n        </Box>\n      ) : null}\n      {children}\n    </StyledErrorText>\n  );\n}\n\nexport default ErrorText;\n"],"names":["ErrorText","_a","children","_b","as","props","__rest","shouldShowIcon","length","React","StyledErrorText","__assign","forwardedAs","role","textColor","textWeight","createElement","Box","marginRight","IconFa","faIcon","faTriangleExclamation","size"],"mappings":"8UAmBM,SAAUA,EAAUC,GAAE,IAAAC,EAAQD,EAAAC,SAAEC,EAAAF,EAAAG,GAAAA,OAAE,IAAAD,EAAG,OAAMA,EAAKE,EAAKC,EAAAL,EAAjC,mBAClBM,EAAqC,iBAAbL,GAAyBA,EAASM,OAChE,OACEC,gBAACC,EAAeC,EAAA,CACdC,YAAaR,GACTC,EAAK,CACTQ,KAAK,QACLC,UAAU,iCACVC,WAAW,sCAEVR,EACCE,EAAAO,cAACC,EAAG,CAACb,GAAG,OAAOc,YAAY,OACzBT,EAAAO,cAACG,EAAM,CAACC,OAAQC,EAAuBC,KAAK,SAE5C,KACHpB,EAGP"}

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

@@ -1,9 +1,5 @@
-import { type ThemeType } from "../../types";
-type ThemeProps = {
-    theme: ThemeType;
-};
-export declare const StyledErrorText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
-    textColor?: string;
+export declare const StyledErrorText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    textColor?: typeof import("..").colours[number] | string;
     textAlign?: "left" | "right" | "center" | "justify";
     textSize?: import("..").FontSizeType;
     textWeight?: number | string;
@@ -12,5 +8,5 @@ export declare const StyledErrorText: import("styled-components/dist/types").ISt
     wordBreak?: import("..").WordBreakType;
     overflowWrap?: import("..").OverflowWrapType;
     ref?: import("react").Ref<HTMLElement>;
-}, ThemeProps>> & string & Omit<(props: import("../Text").TextProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+}, never>> & string & Omit<(props: import("../Text").TextProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default StyledErrorText;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as o}from"../../../node_modules/tslib/tslib.es6.js";import n from"styled-components";import{Text as t}from"../Text/index.js";var e,r=n(t)(e||(e=o(["\n  display: inline-block;\n  color: ",";\n  font-weight: ",";\n"],["\n  display: inline-block;\n  color: ",";\n  font-weight: ",";\n"])),function(o){return o.theme.colors.textError},function(o){return o.theme.typography.fontWeightHeavy});export{r as StyledErrorText,r as default};
+import{__makeTemplateObject as o}from"../../../node_modules/tslib/tslib.es6.js";import i from"styled-components";import{Text as n}from"../Text/index.js";var e,l=i(n)(e||(e=o(["\n  display: inline-block;\n"],["\n  display: inline-block;\n"])));export{l as StyledErrorText,l as default};
 //# sourceMappingURL=styles.js.map

package/lib/src/components/ErrorText/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/ErrorText/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport Text from \"../Text\";\nimport { type ThemeType } from \"../../types\";\n\ntype ThemeProps = {\n  theme: ThemeType;\n};\nexport const StyledErrorText = styled(Text)<ThemeProps>`\n  display: inline-block;\n  color: ${({ theme }) => theme.colors.textError};\n  font-weight: ${({ theme }) => theme.typography.fontWeightHeavy};\n`;\n\nexport default StyledErrorText;\n"],"names":["StyledErrorText","styled","Text","templateObject_1","__makeTemplateObject","_a","theme","colors","textError","typography","fontWeightHeavy"],"mappings":"yJAOO,MAAMA,EAAkBC,EAAOC,EAAPD,CAAYE,IAAAA,EAAAC,EAAA,CAAA,wCAAA,qBAAA,OAAA,CAAY,wCAEP,qBACgB,SADrD,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,SAAb,EACT,SAACH,GAAc,OAAPA,EAAAC,MAAaG,WAAWC,eAAjB"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/ErrorText/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport Text from \"../Text\";\n\nexport const StyledErrorText = styled(Text)`\n  display: inline-block;\n`;\n\nexport default StyledErrorText;\n"],"names":["StyledErrorText","styled","Text","templateObject_1","__makeTemplateObject"],"mappings":"yJAGO,MAAMA,EAAkBC,EAAOC,EAAPD,CAAYE,IAAAA,EAAAC,EAAA,CAAA,gCAAA,CAAA"}

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

@@ -1,11 +1,13 @@
 import React, { type ReactNode, type HTMLAttributes } from "react";
-export type FooterProps = HTMLAttributes<HTMLElement> & {
-    /** used to customise text in middle section, it could also be react element, this is not to be confused with the component children which is primarily for the links in the footer */
-    middleSection?: ReactNode;
-    children?: ReactNode;
-};
+import { type ThemeNameType } from "../../types";
 /**
  * There should be only one footer component at the bottom of the body of each page. Links can be passed as children
  * */
-export declare function Footer({ children, middleSection }: FooterProps): React.JSX.Element;
+export declare function Footer({ children, themeName, footerText, }: HTMLAttributes<HTMLElement> & {
+    /** used to customise text in middle section, it could also be react element, this is not to be confused with the component children which is primarily for the links in the footer */
+    middleSection?: ReactNode;
+    children?: ReactNode;
+    themeName?: ThemeNameType;
+    footerText?: string;
+}): React.JSX.Element;
 export default Footer;

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as n,ThemeProvider as l}from"styled-components";import{crukTheme as r}from"../../themes/cruk.js";import{Text as o}from"../Text/index.js";import{StyledFooter as a,FooterContentWrapper as m,FooterSectionLogo as i,StyledRegulatorLogo as s,FooterSectionLinks as c,StyledNav as E,StyledUL as f,StyledLI as u,FooterSection as p,FooterSectionAddress as d,StyledAddress as g}from"./styles.js";function x(x){var h=x.children,S=x.middleSection,y=t.Children.toArray(h),z=n(),C=e(e({},r),z);return t.createElement(l,{theme:C},t.createElement(a,null,t.createElement(m,null,t.createElement(i,null,t.createElement(s,{width:130,height:40,alt:C.siteConfig.footerLogoAlt||"",src:C.siteConfig.footerLogoSrc||""})),t.createElement(c,null,t.createElement(E,{"aria-label":"footer links"},t.createElement(f,null,y.length?y.map(function(e,n){var l="footerLink".concat(n);return t.createElement(u,{key:l},e)}):null))),t.createElement(p,null,S?"string"==typeof S?t.createElement(o,{textSize:"s"},S):t.createElement(t.Fragment,null,S):t.createElement(o,{textSize:"s"},C.siteConfig.footerCopyText)),t.createElement(d,null,t.createElement(g,null,t.createElement(o,{as:"span",textSize:"s"},"2 Redman Place"),t.createElement(o,{as:"span",textSize:"s"},"London"),t.createElement(o,{as:"span",textSize:"s"},"E20 1JQ"))))))}export{x as Footer,x as default};
+import e from"react";import{Text as a}from"../Text/index.js";import{StyledFooter as n,Bar as t,FooterContentWrapper as r,FooterSection as l,StyledNav as s,StyledUL as c,StyledLI as i,StyledRegulatorLogo as d,StyledAddress as o}from"./styles.js";function m(m){var u=m.children,h=m.themeName,g=void 0===h?"cruk":h,f=m.footerText,E=e.Children.toArray(u);return e.createElement(n,null,e.createElement(t,null),e.createElement(r,null,e.createElement(l,null,e.createElement(s,{"aria-label":"footer links"},e.createElement(c,null,E.length?E.map(function(a,n){var t="footerLink".concat(n);return e.createElement(i,{key:t},a)}):null))),e.createElement(l,null,e.createElement(d,{width:130,height:40,alt:"Registered with Fundraising Regulator",src:"https://rcl.assets.cancerresearchuk.org/images/logos/fundreg.png"})),e.createElement(l,null,f?e.createElement(a,{textSize:"m"},f):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)."}}(g)," Registered address:"),e.createElement(o,null,e.createElement(a,{textSize:"m",as:"span"}," ","2 Redman Place, London, E20 1JQ"))))))}export{m as Footer,m as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Footer/index.tsx"],"sourcesContent":["import React, { type ReactNode, type HTMLAttributes } from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { Text } from \"../Text\";\n\nimport {\n  StyledFooter,\n  FooterContentWrapper,\n  FooterSectionLogo,\n  FooterSection,\n  FooterSectionAddress,\n  StyledAddress,\n  StyledRegulatorLogo,\n  FooterSectionLinks,\n  StyledNav,\n  StyledUL,\n  StyledLI,\n} from \"./styles\";\n\nexport type FooterProps = HTMLAttributes<HTMLElement> & {\n  /** used to customise text in middle section, it could also be react element, this is not to be confused with the component children which is primarily for the links in the footer */\n  middleSection?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * There should be only one footer component at the bottom of the body of each page. Links can be passed as children\n * */\nexport function Footer({ children, middleSection }: FooterProps) {\n  const childArray = React.Children.toArray(children);\n\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledFooter>\n        <FooterContentWrapper>\n          <FooterSectionLogo>\n            <StyledRegulatorLogo\n              width={130}\n              height={40}\n              alt={theme.siteConfig.footerLogoAlt || \"\"}\n              src={theme.siteConfig.footerLogoSrc || \"\"}\n            />\n          </FooterSectionLogo>\n          <FooterSectionLinks>\n            <StyledNav aria-label=\"footer links\">\n              <StyledUL>\n                {childArray.length\n                  ? childArray.map((child, index) => {\n                      const footerLinkKey = `footerLink${index}`;\n                      return <StyledLI key={footerLinkKey}>{child}</StyledLI>;\n                    })\n                  : null}\n              </StyledUL>\n            </StyledNav>\n          </FooterSectionLinks>\n\n          <FooterSection>\n            {middleSection ? (\n              typeof middleSection === \"string\" ? (\n                <Text textSize=\"s\">{middleSection}</Text>\n              ) : (\n                <>{middleSection}</>\n              )\n            ) : (\n              <Text textSize=\"s\">{theme.siteConfig.footerCopyText}</Text>\n            )}\n          </FooterSection>\n\n          <FooterSectionAddress>\n            <StyledAddress>\n              <Text as=\"span\" textSize=\"s\">\n                2 Redman Place\n              </Text>\n              <Text as=\"span\" textSize=\"s\">\n                London\n              </Text>\n              <Text as=\"span\" textSize=\"s\">\n                E20 1JQ\n              </Text>\n            </StyledAddress>\n          </FooterSectionAddress>\n        </FooterContentWrapper>\n      </StyledFooter>\n    </ThemeProvider>\n  );\n}\n\nexport default Footer;\n"],"names":["Footer","_a","children","middleSection","childArray","React","Children","toArray","foundTheme","useTheme","theme","__assign","defaultTheme","createElement","ThemeProvider","StyledFooter","FooterContentWrapper","FooterSectionLogo","StyledRegulatorLogo","width","height","alt","siteConfig","footerLogoAlt","src","footerLogoSrc","FooterSectionLinks","StyledNav","StyledUL","length","map","child","index","footerLinkKey","concat","StyledLI","key","FooterSection","Text","textSize","Fragment","footerCopyText","FooterSectionAddress","StyledAddress","as"],"mappings":"0eA6BM,SAAUA,EAAOC,OAAEC,EAAQD,EAAAC,SAAEC,EAAaF,EAAAE,cACxCC,EAAaC,EAAMC,SAASC,QAAQL,GAEpCM,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGL,OACEH,EAAAQ,cAACC,EAAa,CAACJ,MAAOA,GACpBL,EAAAQ,cAACE,EAAY,KACXV,EAAAQ,cAACG,EAAoB,KACnBX,EAAAQ,cAACI,EAAiB,KAChBZ,EAAAQ,cAACK,EAAmB,CAClBC,MAAO,IACPC,OAAQ,GACRC,IAAKX,EAAMY,WAAWC,eAAiB,GACvCC,IAAKd,EAAMY,WAAWG,eAAiB,MAG3CpB,EAAAQ,cAACa,EAAkB,KACjBrB,EAAAQ,cAACc,gBAAqB,gBACpBtB,EAAAQ,cAACe,EAAQ,KACNxB,EAAWyB,OACRzB,EAAW0B,IAAI,SAACC,EAAOC,GACrB,IAAMC,EAAgB,aAAAC,OAAaF,GACnC,OAAO3B,EAAAQ,cAACsB,EAAQ,CAACC,IAAKH,GAAgBF,EACxC,GACA,QAKV1B,EAAAQ,cAACwB,EAAa,KACXlC,EAC0B,iBAAlBA,EACLE,EAAAQ,cAACyB,EAAI,CAACC,SAAS,KAAKpC,GAEpBE,EAAAQ,cAAAR,EAAAmC,SAAA,KAAGrC,GAGLE,EAAAQ,cAACyB,GAAKC,SAAS,KAAK7B,EAAMY,WAAWmB,iBAIzCpC,EAAAQ,cAAC6B,EAAoB,KACnBrC,EAAAQ,cAAC8B,EAAa,KACZtC,EAAAQ,cAACyB,GAAKM,GAAG,OAAOL,SAAS,KAAG,kBAG5BlC,EAAAQ,cAACyB,GAAKM,GAAG,OAAOL,SAAS,KAAG,UAG5BlC,EAAAQ,cAACyB,EAAI,CAACM,GAAG,OAAOL,SAAS,KAAG,eAS1C"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Footer/index.tsx"],"sourcesContent":["import React, { type ReactNode, type HTMLAttributes } from \"react\";\nimport { Text } from \"../Text\";\n\nimport {\n  StyledFooter,\n  FooterContentWrapper,\n  FooterSection,\n  StyledAddress,\n  StyledRegulatorLogo,\n  StyledNav,\n  StyledUL,\n  StyledLI,\n  Bar,\n} from \"./styles\";\nimport { type ThemeNameType } from \"../../types\";\n\nconst footerTextCruk =\n  \"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).\";\nconst footerTextSu2c =\n  \"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.\";\nconst footerTextBowelBabe =\n  \"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.\";\n\nfunction footerTextForTheme(themeName: string): string {\n  switch (themeName) {\n    case \"su2c\":\n      return footerTextSu2c;\n    case \"bowelbabe\":\n      return footerTextBowelBabe;\n    default:\n      return footerTextCruk;\n  }\n}\n\n/**\n * There should be only one footer component at the bottom of the body of each page. Links can be passed as children\n * */\nexport function Footer({\n  children,\n  themeName = \"cruk\",\n  footerText,\n}: HTMLAttributes<HTMLElement> & {\n  /** used to customise text in middle section, it could also be react element, this is not to be confused with the component children which is primarily for the links in the footer */\n  middleSection?: ReactNode;\n  children?: ReactNode;\n  themeName?: ThemeNameType;\n  footerText?: string;\n}) {\n  const childArray = React.Children.toArray(children);\n\n  return (\n    <StyledFooter>\n      <Bar />\n      <FooterContentWrapper>\n        <FooterSection>\n          <StyledNav aria-label=\"footer links\">\n            <StyledUL>\n              {childArray.length\n                ? childArray.map((child, index) => {\n                    const footerLinkKey = `footerLink${index}`;\n                    return <StyledLI key={footerLinkKey}>{child}</StyledLI>;\n                  })\n                : null}\n            </StyledUL>\n          </StyledNav>\n        </FooterSection>\n        <FooterSection>\n          <StyledRegulatorLogo\n            width={130}\n            height={40}\n            alt=\"Registered with Fundraising Regulator\"\n            src=\"https://rcl.assets.cancerresearchuk.org/images/logos/fundreg.png\"\n          />\n        </FooterSection>\n\n        <FooterSection>\n          {footerText ? (\n            <Text textSize=\"m\">{footerText}</Text>\n          ) : (\n            <>\n              <Text textSize=\"m\" as=\"span\">\n                {footerTextForTheme(themeName)} Registered address:\n              </Text>\n              <StyledAddress>\n                <Text textSize=\"m\" as=\"span\">\n                  {\" \"}\n                  2 Redman Place, London, E20 1JQ\n                </Text>\n              </StyledAddress>\n            </>\n          )}\n        </FooterSection>\n      </FooterContentWrapper>\n    </StyledFooter>\n  );\n}\n\nexport default Footer;\n"],"names":["Footer","_a","children","_b","themeName","footerText","childArray","React","Children","toArray","StyledFooter","createElement","Bar","FooterContentWrapper","FooterSection","StyledNav","StyledUL","length","map","child","index","footerLinkKey","concat","StyledLI","key","StyledRegulatorLogo","width","height","alt","src","Text","textSize","Fragment","as","footerTextForTheme","StyledAddress"],"mappings":"qPAqCM,SAAUA,EAAOC,OACrBC,EAAQD,EAAAC,SACRC,EAAAF,EAAAG,UAAAA,aAAY,OAAMD,EAClBE,EAAUJ,EAAAI,WAQJC,EAAaC,EAAMC,SAASC,QAAQP,GAE1C,OACEK,gBAACG,EAAY,KACXH,EAAAI,cAACC,EAAG,MACJL,EAAAI,cAACE,EAAoB,KACnBN,EAAAI,cAACG,EAAa,KACZP,EAAAI,cAACI,gBAAqB,gBACpBR,EAAAI,cAACK,EAAQ,KACNV,EAAWW,OACRX,EAAWY,IAAI,SAACC,EAAOC,GACrB,IAAMC,EAAgB,aAAAC,OAAaF,GACnC,OAAOb,EAAAI,cAACY,EAAQ,CAACC,IAAKH,GAAgBF,EACxC,GACA,QAIVZ,EAAAI,cAACG,EAAa,KACZP,EAAAI,cAACc,EAAmB,CAClBC,MAAO,IACPC,OAAQ,GACRC,IAAI,wCACJC,IAAI,sEAIRtB,EAAAI,cAACG,OACET,EACCE,gBAACuB,EAAI,CAACC,SAAS,KAAK1B,GAEpBE,EAAAI,cAAAJ,EAAAyB,SAAA,KACEzB,EAAAI,cAACmB,GAAKC,SAAS,IAAIE,GAAG,QAzDpC,SAA4B7B,GAC1B,OAAQA,GACN,IAAK,OACH,MAPJ,ogBAQE,IAAK,YACH,MAPJ,mdAQE,QACE,MAbJ,yPAeF,CAiDiB8B,CAAmB9B,GACf,wBACPG,EAAAI,cAACwB,EAAa,KACZ5B,EAAAI,cAACmB,GAAKC,SAAS,IAAIE,GAAG,QACnB,IAEI,uCAQvB"}

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

@@ -1,16 +1,9 @@
-import { type ThemeType } from "../../types";
-type ThemeProps = {
-    theme: ThemeType;
-};
-export declare const StyledFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, ThemeProps>> & string;
-export declare const FooterContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThemeProps>> & string;
-export declare const FooterSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThemeProps>> & string;
-export declare const FooterSectionLogo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & ThemeProps, never>> & string;
-export declare const FooterSectionLinks: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & ThemeProps, never>> & string;
-export declare const StyledNav: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, ThemeProps>> & string;
+export declare const StyledFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const FooterContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FooterSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledNav: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 export declare const StyledUL: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
-export declare const StyledLI: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ThemeProps>> & string;
-export declare const FooterSectionAddress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & ThemeProps, never>> & string;
+export declare const StyledLI: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
 export declare const StyledRegulatorLogo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
 export declare const StyledAddress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-export {};
+export declare const Bar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>> & string;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import i from"styled-components";var t,e,o,l,d,a,r,s,p,f,c,h=i.footer(t||(t=n(["\n  ",";\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n  width: 100%;\n  background-color: ",";\n"],["\n  ",";\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n  width: 100%;\n  background-color: ",";\n"])),function(n){return n.theme.colors.inputBorder},function(n){return n.theme.colors.footerBackground}),m=i.div(e||(e=n(["\n  max-width: ",";\n  display: block;\n  margin: 0 auto;\n\n  @media (min-width: ",") {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n  }\n"],["\n  max-width: ",";\n  display: block;\n  margin: 0 auto;\n\n  @media (min-width: ",") {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n  }\n"])),function(n){return n.theme.utilities.contentMaxWidth},function(n){return n.theme.breakpoint.desktop}),u=i.div(o||(o=n(["\n  box-sizing: border-box;\n  display: inline-block;\n  padding: ",";\n  position: relative;\n  width: 100%;\n  flex: 0 1 auto;\n"],["\n  box-sizing: border-box;\n  display: inline-block;\n  padding: ",";\n  position: relative;\n  width: 100%;\n  flex: 0 1 auto;\n"])),function(n){return n.theme.spacing.xs}),x=i(u)(l||(l=n(["\n  width: 50%;\n  display: block;\n  float: left;\n\n  @media (min-width: ",") {\n    flex: 0 0 140px;\n    width: auto;\n  }\n"],["\n  width: 50%;\n  display: block;\n  float: left;\n\n  @media (min-width: ",") {\n    flex: 0 0 140px;\n    width: auto;\n  }\n"])),function(n){return n.theme.breakpoint.desktop}),b=i(u)(d||(d=n(["\n  width: 50%;\n  display: block;\n  float: left;\n\n  @media (min-width: ",") {\n    flex: 0 0 170px;\n    width: auto;\n  }\n"],["\n  width: 50%;\n  display: block;\n  float: left;\n\n  @media (min-width: ",") {\n    flex: 0 0 170px;\n    width: auto;\n  }\n"])),function(n){return n.theme.breakpoint.desktop}),g=i.nav(a||(a=n(["\n  display: flex;\n  flex-direction: column;\n  a {\n    font-size: ",";\n    font-weight: ",";\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  a {\n    font-size: ",";\n    font-weight: ",";\n  }\n"])),function(n){return n.theme.fontSizes.s},function(n){return n.theme.typography.fontWeightLinks}),y=i.ul(r||(r=n(["\n  padding: 0;\n  margin: 0;\n"],["\n  padding: 0;\n  margin: 0;\n"]))),w=i.li(s||(s=n(["\n  list-style-type: none;\n  display: block;\n  padding: 0;\n  margin: 0;\n  line-height: 1;\n  padding-bottom: ",";\n"],["\n  list-style-type: none;\n  display: block;\n  padding: 0;\n  margin: 0;\n  line-height: 1;\n  padding-bottom: ",";\n"])),function(n){return n.theme.spacing.xxs}),k=i(u)(p||(p=n(["\n  flex: 0 0 150px;\n"],["\n  flex: 0 0 150px;\n"]))),v=i.img(f||(f=n(["\n  height: 40px;\n  width: auto;\n"],["\n  height: 40px;\n  width: auto;\n"]))),z=i.address(c||(c=n(["\n  display: flex;\n  flex-direction: column;\n  font-style: normal;\n"],["\n  display: flex;\n  flex-direction: column;\n  font-style: normal;\n"])));export{m as FooterContentWrapper,u as FooterSection,k as FooterSectionAddress,b as FooterSectionLinks,x as FooterSectionLogo,z as StyledAddress,h as StyledFooter,w as StyledLI,g as StyledNav,v as StyledRegulatorLogo,y as StyledUL};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import i from"styled-components";var o,e,a,t,r,d,l,s,p,m=i.footer(o||(o=n(["\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n  width: 100%;\n  background-color: var(--clr-footer-background, #fff);\n  padding-bottom: var(--spacing-m, 2rem);\n"],["\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n  width: 100%;\n  background-color: var(--clr-footer-background, #fff);\n  padding-bottom: var(--spacing-m, 2rem);\n"]))),c=i.div(e||(e=n(["\n  max-width: var(--content-max-width, 1020px);\n  display: block;\n  margin: 0 auto;\n\n  @media (min-width: 1200px) {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n"],["\n  max-width: var(--content-max-width, 1020px);\n  display: block;\n  margin: 0 auto;\n\n  @media (min-width: 1200px) {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n"]))),g=i.div(a||(a=n(["\n  box-sizing: border-box;\n  display: inline-block;\n  padding: var(--spacing-s, 1.5rem) var(--spacing-s, 1.5rem) 0;\n  position: relative;\n  width: 100%;\n  flex: 0 1 auto;\n"],["\n  box-sizing: border-box;\n  display: inline-block;\n  padding: var(--spacing-s, 1.5rem) var(--spacing-s, 1.5rem) 0;\n  position: relative;\n  width: 100%;\n  flex: 0 1 auto;\n"]))),b=i.nav(t||(t=n(["\n  display: flex;\n  flex-direction: column;\n  a {\n    font-size: var(--font-size-m, 1rem);\n    font-weight: var(--typ-font-weight-links, 700);\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  a {\n    font-size: var(--font-size-m, 1rem);\n    font-weight: var(--typ-font-weight-links, 700);\n  }\n"]))),h=i.ul(r||(r=n(["\n  padding: 0;\n  margin: 0;\n"],["\n  padding: 0;\n  margin: 0;\n"]))),x=i.li(d||(d=n(["\n  list-style-type: none;\n  display: block;\n  padding: 0;\n  margin: 0;\n  line-height: 1;\n  padding-bottom: var(--spacing-xxs, 0.5rem);\n"],["\n  list-style-type: none;\n  display: block;\n  padding: 0;\n  margin: 0;\n  line-height: 1;\n  padding-bottom: var(--spacing-xxs, 0.5rem);\n"]))),f=i.img(l||(l=n(["\n  height: 40px;\n  width: auto;\n"],["\n  height: 40px;\n  width: auto;\n"]))),v=i.address(s||(s=n(["\n  display: inline;\n  font-style: normal;\n"],["\n  display: inline;\n  font-style: normal;\n"]))),y=i.hr(p||(p=n(["\n  opacity: 1;\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-right: calc(50% - 50vw);\n  margin-left: calc(\n    100% - 100vw\n  ); // to be removed when every page has a white background\n  border-width: 0px 0px 0.25rem;\n  border-image: initial;\n  border-color: var(--clr-cruk-black, #000);\n  border-style: solid;\n  width: auto;\n"],["\n  opacity: 1;\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-right: calc(50% - 50vw);\n  margin-left: calc(\n    100% - 100vw\n  ); // to be removed when every page has a white background\n  border-width: 0px 0px 0.25rem;\n  border-image: initial;\n  border-color: var(--clr-cruk-black, #000);\n  border-style: solid;\n  width: auto;\n"])));export{y as Bar,c as FooterContentWrapper,g as FooterSection,v as StyledAddress,m as StyledFooter,x as StyledLI,b as StyledNav,f as StyledRegulatorLogo,h as StyledUL};
 //# sourceMappingURL=styles.js.map

package/lib/src/components/Footer/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Footer/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype ThemeProps = {\n  theme: ThemeType;\n};\nexport const StyledFooter = styled.footer<ThemeProps>`\n  ${({ theme }) => theme.colors.inputBorder};\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.footerBackground};\n`;\n\nexport const FooterContentWrapper = styled.div<ThemeProps>`\n  max-width: ${({ theme }) => theme.utilities.contentMaxWidth};\n  display: block;\n  margin: 0 auto;\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n  }\n`;\n\nexport const FooterSection = styled.div<ThemeProps>`\n  box-sizing: border-box;\n  display: inline-block;\n  padding: ${({ theme }) => theme.spacing.xs};\n  position: relative;\n  width: 100%;\n  flex: 0 1 auto;\n`;\n\nexport const FooterSectionLogo = styled(FooterSection)`\n  width: 50%;\n  display: block;\n  float: left;\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    flex: 0 0 140px;\n    width: auto;\n  }\n`;\n\n// TODO: I'm assuming here that the links have fixed width here with a flex basis\n// and the company info expands to fill the gap but it could be the other way round\nexport const FooterSectionLinks = styled(FooterSection)`\n  width: 50%;\n  display: block;\n  float: left;\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    flex: 0 0 170px;\n    width: auto;\n  }\n`;\n\nexport const StyledNav = styled.nav<ThemeProps>`\n  display: flex;\n  flex-direction: column;\n  a {\n    font-size: ${({ theme }) => theme.fontSizes.s};\n    font-weight: ${({\n      theme: {\n        typography: { fontWeightLinks },\n      },\n    }: ThemeProps) => fontWeightLinks};\n  }\n`;\n\nexport const StyledUL = styled.ul`\n  padding: 0;\n  margin: 0;\n`;\n\nexport const StyledLI = styled.li<ThemeProps>`\n  list-style-type: none;\n  display: block;\n  padding: 0;\n  margin: 0;\n  line-height: 1;\n  padding-bottom: ${({\n    theme: {\n      spacing: { xxs },\n    },\n  }) => xxs};\n`;\n\nexport const FooterSectionAddress = styled(FooterSection)`\n  flex: 0 0 150px;\n`;\n\nexport const StyledRegulatorLogo = styled.img`\n  height: 40px;\n  width: auto;\n`;\n\nexport const StyledAddress = styled.address`\n  display: flex;\n  flex-direction: column;\n  font-style: normal;\n`;\n"],"names":["StyledFooter","styled","footer","templateObject_1","__makeTemplateObject","_a","theme","colors","inputBorder","footerBackground","FooterContentWrapper","div","templateObject_2","utilities","contentMaxWidth","breakpoint","desktop","FooterSection","templateObject_3","spacing","xs","FooterSectionLogo","templateObject_4","FooterSectionLinks","templateObject_5","StyledNav","nav","templateObject_6","fontSizes","s","typography","fontWeightLinks","StyledUL","ul","templateObject_7","StyledLI","li","templateObject_8","xxs","FooterSectionAddress","templateObject_9","StyledRegulatorLogo","img","templateObject_10","StyledAddress","address","templateObject_11"],"mappings":"iHAMO,0BAAMA,EAAeC,EAAOC,OAAMC,IAAAA,EAAAC,EAAA,CAAA,OAAA,+GAAA,OAAA,CAAY,OACV,+GAKuB,SAL9D,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,WAAb,EAKG,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,GAGxBC,EAAuBT,EAAOU,IAAGC,IAAAA,EAAAR,EAAA,CAAA,kBAAA,mEAAA,iGAAA,CAAY,kBACG,mEAIC,mGAJ/C,SAACC,GAAc,OAAPA,EAAAC,MAAaO,UAAUC,eAAhB,EAIP,SAACT,GAAc,OAAPA,EAAAC,MAAaS,WAAWC,OAAjB,GAOzBC,EAAgBhB,EAAOU,IAAGO,IAAAA,EAAAd,EAAA,CAAA,qEAAA,iEAAA,CAAY,qEAGP,mEAA/B,SAACC,GAAc,OAAPA,EAAAC,MAAaa,QAAQC,EAAd,GAMfC,EAAoBpB,EAAOgB,EAAPhB,CAAqBqB,IAAAA,EAAAlB,EAAA,CAAA,8EAAA,sDAAA,CAAA,8EAKQ,wDAAvC,SAACC,GAAc,OAAPA,EAAAC,MAAaS,WAAWC,OAAjB,GAQzBO,EAAqBtB,EAAOgB,EAAPhB,CAAqBuB,IAAAA,EAAApB,EAAA,CAAA,8EAAA,sDAAA,CAAA,8EAKO,wDAAvC,SAACC,GAAc,OAAPA,EAAAC,MAAaS,WAAWC,OAAjB,GAMzBS,EAAYxB,EAAOyB,IAAGC,IAAAA,EAAAvB,EAAA,CAAA,wEAAA,uBAAA,YAAA,CAAY,wEAIE,uBAKZ,cALpB,SAACC,GAAc,OAAPA,EAAAC,MAAasB,UAAUC,CAAhB,EACb,SAACxB,GAIE,OAFeA,EAAAC,MAAAwB,WAAAC,eAEf,GAITC,EAAW/B,EAAOgC,GAAEC,IAAAA,EAAA9B,EAAA,CAAA,mCAAA,CAAA,sCAKpB+B,EAAWlC,EAAOmC,GAAEC,IAAAA,EAAAjC,EAAA,CAAA,oHAAA,OAAA,CAAY,oHAUlC,SAJS,SAACC,GAIb,OAFYA,EAAAC,MAAAa,QAAAmB,GAEZ,GAGKC,EAAuBtC,EAAOgB,EAAPhB,CAAqBuC,IAAAA,EAAApC,EAAA,CAAA,0BAAA,CAAA,6BAI5CqC,EAAsBxC,EAAOyC,IAAGC,IAAAA,EAAAvC,EAAA,CAAA,uCAAA,CAAA,0CAKhCwC,EAAgB3C,EAAO4C,QAAOC,IAAAA,EAAA1C,EAAA,CAAA,0EAAA,CAAA"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Footer/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledFooter = styled.footer`\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n  width: 100%;\n  background-color: var(--clr-footer-background, #fff);\n  padding-bottom: var(--spacing-m, 2rem);\n`;\n\nexport const FooterContentWrapper = styled.div`\n  max-width: var(--content-max-width, 1020px);\n  display: block;\n  margin: 0 auto;\n\n  @media (min-width: 1200px) {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n`;\n\nexport const FooterSection = styled.div`\n  box-sizing: border-box;\n  display: inline-block;\n  padding: var(--spacing-s, 1.5rem) var(--spacing-s, 1.5rem) 0;\n  position: relative;\n  width: 100%;\n  flex: 0 1 auto;\n`;\n\nexport const StyledNav = styled.nav`\n  display: flex;\n  flex-direction: column;\n  a {\n    font-size: var(--font-size-m, 1rem);\n    font-weight: var(--typ-font-weight-links, 700);\n  }\n`;\n\nexport const StyledUL = styled.ul`\n  padding: 0;\n  margin: 0;\n`;\n\nexport const StyledLI = styled.li`\n  list-style-type: none;\n  display: block;\n  padding: 0;\n  margin: 0;\n  line-height: 1;\n  padding-bottom: var(--spacing-xxs, 0.5rem);\n`;\n\nexport const StyledRegulatorLogo = styled.img`\n  height: 40px;\n  width: auto;\n`;\n\nexport const StyledAddress = styled.address`\n  display: inline;\n  font-style: normal;\n`;\n\nexport const Bar = styled.hr`\n  opacity: 1;\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-right: calc(50% - 50vw);\n  margin-left: calc(\n    100% - 100vw\n  ); // to be removed when every page has a white background\n  border-width: 0px 0px 0.25rem;\n  border-image: initial;\n  border-color: var(--clr-cruk-black, #000);\n  border-style: solid;\n  width: auto;\n`;\n"],"names":["StyledFooter","styled","footer","templateObject_1","__makeTemplateObject","FooterContentWrapper","div","templateObject_2","FooterSection","templateObject_3","StyledNav","nav","templateObject_4","StyledUL","ul","templateObject_5","StyledLI","li","templateObject_6","StyledRegulatorLogo","img","templateObject_7","StyledAddress","address","templateObject_8","Bar","hr","templateObject_9"],"mappings":"iHAEO,sBAAMA,EAAeC,EAAOC,OAAMC,IAAAA,EAAAC,EAAA,CAAA,+LAAA,CAAA,kMAS5BC,EAAuBJ,EAAOK,IAAGC,IAAAA,EAAAH,EAAA,CAAA,yNAAA,CAAA,4NAYjCI,EAAgBP,EAAOK,IAAGG,IAAAA,EAAAL,EAAA,CAAA,sLAAA,CAAA,yLAS1BM,EAAYT,EAAOU,IAAGC,IAAAA,EAAAR,EAAA,CAAA,8JAAA,CAAA,iKAStBS,EAAWZ,EAAOa,GAAEC,IAAAA,EAAAX,EAAA,CAAA,mCAAA,CAAA,sCAKpBY,EAAWf,EAAOgB,GAAEC,IAAAA,EAAAd,EAAA,CAAA,kJAAA,CAAA,qJASpBe,EAAsBlB,EAAOmB,IAAGC,IAAAA,EAAAjB,EAAA,CAAA,uCAAA,CAAA,0CAKhCkB,EAAgBrB,EAAOsB,QAAOC,IAAAA,EAAApB,EAAA,CAAA,iDAAA,CAAA,oDAK9BqB,EAAMxB,EAAOyB,GAAEC,IAAAA,EAAAvB,EAAA,CAAA,uVAAA,CAAA"}

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

@@ -1,21 +1,5 @@
 import React, { type HTMLAttributes, type ReactNode } from "react";
-export type HeaderProps = HTMLAttributes<HTMLElement> & {
-    /** flag which make header fixed to the top even when scrolling */
-    isSticky?: boolean;
-    /** text in the middle of the header */
-    siteSlogan?: string;
-    /** text to explain the content of the icon for a11y usually a description of where the link will take you */
-    logoAltText?: string;
-    /** header logo image url */
-    logoImageSrc?: string;
-    /** title of the header image component, this is mainly for the tooltip text on hover */
-    logoLinkTitle?: string;
-    /** the url of the logo link */
-    logoLinkUrl?: string;
-    /** instead of the contents of the header being centered to max width as defined in theme it is 100% width fo viewport */
-    fullWidth?: boolean;
-    children?: ReactNode;
-};
+import { type ThemeNameType } from "../../types";
 /**
  * There should be only one header component near or at the top of the body of each page.
  *
@@ -33,5 +17,22 @@ export type HeaderProps = HTMLAttributes<HTMLElement> & {
  * 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.
  *
  */
-export declare function Header({ isSticky, siteSlogan, logoAltText, logoImageSrc, logoLinkTitle, logoLinkUrl, fullWidth, children, }: HeaderProps): React.JSX.Element;
+export declare function Header({ themeName, isSticky, siteSlogan, logoAltText, logoImageSrc, logoLinkTitle, logoLinkUrl, fullWidth, children, }: HTMLAttributes<HTMLElement> & {
+    themeName: ThemeNameType;
+    /** flag which make header fixed to the top even when scrolling */
+    isSticky?: boolean;
+    /** text in the middle of the header */
+    siteSlogan?: string;
+    /** text to explain the content of the icon for a11y usually a description of where the link will take you */
+    logoAltText?: string;
+    /** header logo image url */
+    logoImageSrc?: string;
+    /** title of the header image component, this is mainly for the tooltip text on hover */
+    logoLinkTitle?: string;
+    /** the url of the logo link */
+    logoLinkUrl?: string;
+    /** instead of the contents of the header being centered to max width as defined in theme it is 100% width fo viewport */
+    fullWidth?: boolean;
+    children?: ReactNode;
+}): React.JSX.Element;
 export default Header;

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t,{useState as l}from"react";import{useTheme as o,ThemeProvider as n}from"styled-components";import i from"../../hooks/useScrollPosition.js";import{crukTheme as r}from"../../themes/cruk.js";import{StyledHeader as m,HeaderStickyPlaceHolder as s,HeaderStickyContainer as c,SkipToMain as a,HeaderMainContent as u,StyledLink as f,LogoWrapper as d,Logo as g,Tagline as E,ChildWrapper as S,ChildInner as h}from"./styles.js";function k(k){var p=k.isSticky,y=k.siteSlogan,$=k.logoAltText,j=k.logoImageSrc,C=k.logoLinkTitle,b=k.logoLinkUrl,v=k.fullWidth,w=k.children,x=l(!1),A=x[0],L=x[1],P="undefined"!=typeof window,T=o(),U=e(e({},r),T);return i(function(e){var t=e.currPos,l=!!P&&t.y>240;l!==A&&L(l)},[A],null,!0,50),t.createElement(n,{theme:U},t.createElement(m,null,t.createElement(s,null,t.createElement(c,{"data-testid":"header-sticky-container",$isSmall:A,$isSticky:p},t.createElement(a,{href:"#main"},"Skip to main content"),t.createElement(u,{$fullWidth:v},t.createElement(f,{href:null!=b?b:U.siteConfig.logoUrl,title:null!=C?C:"Home"},t.createElement(d,{$isSmall:A,$isSticky:p},t.createElement(g,{height:80,src:null!=j?j:U.siteConfig.logoSrc,alt:null!=$?$:U.siteConfig.logoAlt}))),y?t.createElement(E,{$isSmall:A,$isSticky:p},y):null,t.createElement(S,null,t.createElement(h,null,w)))))))}export{k as Header,k as default};
+import e,{useState as t}from"react";import l from"../../hooks/useScrollPosition.js";import{StyledHeader as r,HeaderStickyPlaceHolder as s,HeaderStickyContainer as a,SkipToMain as n,HeaderMainContent as c,StyledLink as o,LogoWrapper as i,Logo as u,Tagline as m,ChildWrapper as g,ChildInner as h}from"./styles.js";function f(f){var k=f.themeName,p=f.isSticky,d=f.siteSlogan,E=f.logoAltText,S=f.logoImageSrc,y=f.logoLinkTitle,$=f.logoLinkUrl,b=f.fullWidth,v=f.children,w=t(!1),P=w[0],j=w[1],x="undefined"!=typeof window;l(function(e){var t=e.currPos,l=!!x&&t.y>240;l!==P&&j(l)},[P],null,!0,50);var L=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"}}(k);return e.createElement(r,null,e.createElement(s,null,e.createElement(a,{"data-testid":"header-sticky-container",$isSmall:P,$isSticky:p},e.createElement(n,{href:"#main"},"Skip to main content"),e.createElement(c,{$fullWidth:b},e.createElement(o,{href:null!=$?$:"/",title:null!=y?y:"Home"},e.createElement(i,{$isSmall:P,$isSticky:p},e.createElement(u,{height:80,src:null!=S?S:L,alt:null!=E?E:"Cancer Research UK Giving Pages"}))),d?e.createElement(m,{$isSmall:P,$isSticky:p},d):null,e.createElement(g,null,e.createElement(h,null,v))))))}export{f as Header,f as default};
 //# 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\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { useScrollPosition } from \"../../hooks/useScrollPosition\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n  StyledHeader,\n  HeaderStickyContainer,\n  HeaderStickyPlaceHolder,\n  HeaderMainContent,\n  SkipToMain,\n  StyledLink,\n  Logo,\n  LogoWrapper,\n  Tagline,\n  ChildWrapper,\n  ChildInner,\n} from \"./styles\";\n\nconst HEADER_SCROLL_THRESHOLD = 240;\n\nexport type HeaderProps = HTMLAttributes<HTMLElement> & {\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\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  isSticky,\n  siteSlogan,\n  logoAltText,\n  logoImageSrc,\n  logoLinkTitle,\n  logoLinkUrl,\n  fullWidth,\n  children,\n}: HeaderProps) {\n  const [isSmall, setIsSmall] = useState(false);\n  const isBrowser = typeof window !== `undefined`;\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\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  return (\n    <ThemeProvider theme={theme}>\n      <StyledHeader>\n        <HeaderStickyPlaceHolder>\n          <HeaderStickyContainer\n            data-testid=\"header-sticky-container\"\n            $isSmall={isSmall}\n            $isSticky={isSticky}\n          >\n            <SkipToMain href=\"#main\">Skip to main content</SkipToMain>\n            <HeaderMainContent $fullWidth={fullWidth}>\n              <StyledLink\n                href={logoLinkUrl ?? theme.siteConfig.logoUrl}\n                title={logoLinkTitle ?? \"Home\"}\n              >\n                <LogoWrapper $isSmall={isSmall} $isSticky={isSticky}>\n                  <Logo\n                    height={80}\n                    src={logoImageSrc ?? theme.siteConfig.logoSrc}\n                    alt={logoAltText ?? theme.siteConfig.logoAlt}\n                  />\n                </LogoWrapper>\n              </StyledLink>\n              {siteSlogan ? (\n                <Tagline $isSmall={isSmall} $isSticky={isSticky}>\n                  {siteSlogan}\n                </Tagline>\n              ) : null}\n              <ChildWrapper>\n                <ChildInner>{children}</ChildInner>\n              </ChildWrapper>\n            </HeaderMainContent>\n          </HeaderStickyContainer>\n        </HeaderStickyPlaceHolder>\n      </StyledHeader>\n    </ThemeProvider>\n  );\n}\n\nexport default Header;\n"],"names":["Header","_a","isSticky","siteSlogan","logoAltText","logoImageSrc","logoLinkTitle","logoLinkUrl","fullWidth","children","_b","useState","isSmall","setIsSmall","isBrowser","window","foundTheme","useTheme","theme","__assign","defaultTheme","useScrollPosition","currPos","shouldShrink","y","React","createElement","ThemeProvider","StyledHeader","HeaderStickyPlaceHolder","HeaderStickyContainer","$isSmall","SkipToMain","href","HeaderMainContent","StyledLink","siteConfig","logoUrl","title","LogoWrapper","$isSticky","Logo","height","src","logoSrc","alt","logoAlt","Tagline","ChildWrapper","ChildInner"],"mappings":"6eA0DM,SAAUA,EAAOC,OACrBC,EAAQD,EAAAC,SACRC,EAAUF,EAAAE,WACVC,EAAWH,EAAAG,YACXC,EAAYJ,EAAAI,aACZC,EAAaL,EAAAK,cACbC,EAAWN,EAAAM,YACXC,EAASP,EAAAO,UACTC,EAAQR,EAAAQ,SAEFC,EAAwBC,GAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAA8B,oBAAXC,OACnBC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAuBL,OApBAK,EACE,SAACpB,GACC,IAAAqB,EAAOrB,EAAAqB,QAKDC,IAAeT,GACjBQ,EAAQE,EAhEc,IAkEtBD,IAAiBX,GACnBC,EAAWU,EAEf,EACA,CAACX,GACD,MACA,EACA,IAIAa,EAAAC,cAACC,EAAa,CAACT,MAAOA,GACpBO,EAAAC,cAACE,EAAY,KACXH,EAAAC,cAACG,EAAuB,KACtBJ,EAAAC,cAACI,EAAqB,CAAA,cACR,0BAAyBC,SAC3BnB,YACCV,GAEXuB,EAAAC,cAACM,EAAU,CAACC,KAAK,SAAO,wBACxBR,EAAAC,cAACQ,cAA8B1B,GAC7BiB,EAAAC,cAACS,EAAU,CACTF,KAAM1B,QAAAA,EAAeW,EAAMkB,WAAWC,QACtCC,MAAOhC,QAAAA,EAAiB,QAExBmB,EAAAC,cAACa,EAAW,CAAAR,SAAWnB,EAAO4B,UAAatC,GACzCuB,EAAAC,cAACe,EAAI,CACHC,OAAQ,GACRC,IAAKtC,QAAAA,EAAgBa,EAAMkB,WAAWQ,QACtCC,IAAKzC,QAAAA,EAAec,EAAMkB,WAAWU,YAI1C3C,EACCsB,EAAAC,cAACqB,EAAO,CAAAhB,SAAWnB,EAAO4B,UAAatC,GACpCC,GAED,KACJsB,EAAAC,cAACsB,EAAY,KACXvB,EAAAC,cAACuB,EAAU,KAAExC,QAQ7B"}
+{"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 {\n  StyledHeader,\n  HeaderStickyContainer,\n  HeaderStickyPlaceHolder,\n  HeaderMainContent,\n  SkipToMain,\n  StyledLink,\n  Logo,\n  LogoWrapper,\n  Tagline,\n  ChildWrapper,\n  ChildInner,\n} from \"./styles\";\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    <StyledHeader>\n      <HeaderStickyPlaceHolder>\n        <HeaderStickyContainer\n          data-testid=\"header-sticky-container\"\n          $isSmall={isSmall}\n          $isSticky={isSticky}\n        >\n          <SkipToMain href=\"#main\">Skip to main content</SkipToMain>\n          <HeaderMainContent $fullWidth={fullWidth}>\n            <StyledLink\n              href={logoLinkUrl ?? \"/\"}\n              title={logoLinkTitle ?? \"Home\"}\n            >\n              <LogoWrapper $isSmall={isSmall} $isSticky={isSticky}>\n                <Logo\n                  height={80}\n                  src={logoImageSrc ?? logoUrl}\n                  alt={logoAltText ?? \"Cancer Research UK Giving Pages\"}\n                />\n              </LogoWrapper>\n            </StyledLink>\n            {siteSlogan ? (\n              <Tagline $isSmall={isSmall} $isSticky={isSticky}>\n                {siteSlogan}\n              </Tagline>\n            ) : null}\n            <ChildWrapper>\n              <ChildInner>{children}</ChildInner>\n            </ChildWrapper>\n          </HeaderMainContent>\n        </HeaderStickyContainer>\n      </HeaderStickyPlaceHolder>\n    </StyledHeader>\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","StyledHeader","createElement","HeaderStickyPlaceHolder","HeaderStickyContainer","$isSmall","SkipToMain","href","HeaderMainContent","StyledLink","title","LogoWrapper","$isSticky","Logo","height","src","alt","Tagline","ChildWrapper","ChildInner"],"mappings":"wTA6DM,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,gBAACC,EAAY,KACXD,EAAAE,cAACC,EAAuB,KACtBH,EAAAE,cAACE,EAAqB,CAAA,cACR,0BAAyBC,SAC3Bf,YACCV,GAEXoB,EAAAE,cAACI,EAAU,CAACC,KAAK,SAAO,wBACxBP,EAAAE,cAACM,cAA8BtB,GAC7Bc,EAAAE,cAACO,GACCF,KAAMtB,QAAAA,EAAe,IACrByB,MAAO1B,QAAAA,EAAiB,QAExBgB,EAAAE,cAACS,EAAW,CAAAN,SAAWf,EAAOsB,UAAahC,GACzCoB,EAAAE,cAACW,EAAI,CACHC,OAAQ,GACRC,IAAKhC,QAAAA,EAAgBe,EACrBkB,IAAKlC,QAAAA,EAAe,sCAIzBD,EACCmB,EAAAE,cAACe,EAAO,CAAAZ,SAAWf,EAAOsB,UAAahC,GACpCC,GAED,KACJmB,EAAAE,cAACgB,EAAY,KACXlB,EAAAE,cAACiB,EAAU,KAAEhC,OAO3B"}

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

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