@cruk/cruk-react-components 6.0.2 → 6.1.0

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,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGL,OACEH,EAACQ,cAAAC,EAAc,CAAAJ,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,EAACQ,cAAAc,gBAAqB,gBACpBtB,EAAAQ,cAACe,EAAQ,KACNxB,EAAWyB,OACRzB,EAAW0B,KAAI,SAACC,EAAOC,GACrB,IAAMC,EAAgB,aAAaC,OAAAF,GACnC,OAAO3B,EAAAQ,cAACsB,EAAS,CAAAC,IAAKH,GAAgBF,EACvC,IACD,QAKV1B,EAACQ,cAAAwB,EACE,KAAAlC,EAC0B,iBAAlBA,EACLE,EAACQ,cAAAyB,EAAK,CAAAC,SAAS,KAAKpC,GAEpBE,EAAGQ,cAAAR,EAAAmC,SAAA,KAAArC,GAGLE,EAACQ,cAAAyB,GAAKC,SAAS,KAAK7B,EAAMY,WAAWmB,iBAIzCpC,EAAAQ,cAAC6B,EAAoB,KACnBrC,EAAAQ,cAAC8B,EAAa,KACZtC,EAACQ,cAAAyB,GAAKM,GAAG,OAAOL,SAAS,KAElB,kBACPlC,EAACQ,cAAAyB,GAAKM,GAAG,OAAOL,SAAS,KAElB,UACPlC,EAAAQ,cAACyB,EAAK,CAAAM,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 { 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"}

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 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};
 //# 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,OAAkBC,IAAAA,EAAAC,EAAA,CAAA,OAAA,+GAAA,OAAA,CAAA,OACV,+GAKuB,UAL9D,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,WAAb,IAKG,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,IAGxBC,EAAuBT,EAAOU,IAAeC,IAAAA,EAAAR,EAAA,CAAA,kBAAA,mEAAA,iGAAA,CAAA,kBACG,mEAIC,oGAJ/C,SAACC,GAAc,OAAPA,EAAAC,MAAaO,UAAUC,eAAhB,IAIP,SAACT,GAAc,OAAPA,EAAAC,MAAaS,WAAWC,OAAjB,IAOzBC,EAAgBhB,EAAOU,IAAGO,IAAAA,EAAAd,EAAA,CAAA,qEAAA,iEAAA,CAAY,qEAGP,oEAA/B,SAACC,GAAc,OAAPA,EAAAC,MAAaa,QAAQC,EAAd,IAMfC,EAAoBpB,EAAOgB,EAAPhB,CAAqBqB,IAAAA,EAAAlB,EAAA,CAAA,8EAAA,sDAAA,CAAA,8EAKQ,yDAAvC,SAACC,GAAc,OAAPA,EAAAC,MAAaS,WAAWC,OAAjB,IAQzBO,EAAqBtB,EAAOgB,EAAPhB,CAAqBuB,IAAAA,EAAApB,EAAA,CAAA,8EAAA,sDAAA,CAAA,8EAKO,yDAAvC,SAACC,GAAc,OAAPA,EAAAC,MAAaS,WAAWC,OAAjB,IAMzBS,EAAYxB,EAAOyB,IAAeC,IAAAA,EAAAvB,EAAA,CAAA,wEAAA,uBAAA,YAAA,CAAA,wEAIE,uBAKZ,eALpB,SAACC,GAAc,OAAPA,EAAAC,MAAasB,UAAUC,CAAhB,IACb,SAACxB,GAIE,OAFeA,EAAAC,MAAAwB,WAAAC,eAEf,IAITC,EAAW/B,EAAOgC,GAAEC,IAAAA,EAAA9B,EAAA,CAAA,mCAAA,CAAA,sCAKpB+B,EAAWlC,EAAOmC,GAAEC,IAAAA,EAAAjC,EAAA,CAAA,oHAAA,OAAA,CAAY,oHAUlC,UAJS,SAACC,GAIb,OAFYA,EAAAC,MAAAa,QAAAmB,GAEZ,IAGKC,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\";\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"}

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

@@ -0,0 +1,2 @@
+export declare const GlobalStyle: import("react").ForwardRefExoticComponent<import("styled-components").ExecutionProps & import("react").RefAttributes<import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>>> & import("styled-components/dist/utils/hoist").NonReactStatics<import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>>;
+export default GlobalStyle;

package/lib/src/components/GlobalStyle.js

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n,__assign as o}from"../../node_modules/tslib/tslib.es6.js";import{withTheme as t,createGlobalStyle as e}from"styled-components";import{crukTheme as i}from"../themes/cruk.js";var r,a=t(e(r||(r=n(["\n  ","\n  *, *:after, *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  \n  @media (prefers-reduced-motion: reduce) {\n    *, *:after, *:before {\n      animation-play-state: paused !important;\n      animation-direction: reverse !important;\n      transition: none !important;\n      scroll-behavior: auto !important;\n    }\n  }\n\n  table, td, th {\n    border-spacing: 0;\n    border: 1px solid #ccc;\n    padding: 10px;\n  }\n  .no-focus-outline a:focus,\n  .no-focus-outline button:focus {\n    outline: none;\n  }\n  img {\n    width: 100%;\n    height: auto;\n  }\n  section {\n    width: 100%;\n  }\n    button {\n    font-size: 1em;\n  }\n"],["\n  ","\n  *, *:after, *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  \n  @media (prefers-reduced-motion: reduce) {\n    *, *:after, *:before {\n      animation-play-state: paused !important;\n      animation-direction: reverse !important;\n      transition: none !important;\n      scroll-behavior: auto !important;\n    }\n  }\n\n  table, td, th {\n    border-spacing: 0;\n    border: 1px solid #ccc;\n    padding: 10px;\n  }\n  .no-focus-outline a:focus,\n  .no-focus-outline button:focus {\n    outline: none;\n  }\n  img {\n    width: 100%;\n    height: auto;\n  }\n  section {\n    width: 100%;\n  }\n    button {\n    font-size: 1em;\n  }\n"])),(function(n){var t,e=o(o({},i),n.theme);return"\n      ".concat((t=e.typography.customFonts,t.map((function(n){return"\n        @font-face {\n          font-family: ".concat(n.family,";\n          src: ").concat((null==n?void 0:n.urlWoff2)?'url("'.concat(n.urlWoff2,"\") format('woff2')"):"").concat(n.urlWoff&&(null==n?void 0:n.urlWoff2)?", ":"","\n          ").concat((null==n?void 0:n.urlWoff)?'url("'.concat(n.urlWoff,"\") format('woff')"):"",";\n          font-weight: ").concat(null==n?void 0:n.fontWeight,";\n          font-style: normal;\n          font-display: fallback;\n        }\n      ")})).join("")),"\n      html {\n        font-size: ").concat(e.typography.fontSizeBase,";\n        font-family: ").concat(e.typography.fontFamilyBase,";\n        line-height: ").concat(e.typography.lineHeight,";\n      }\n      body {\n        background-color: ").concat(e.colors.backgroundMidLight,";\n        color: ").concat(e.colors.textDark,";\n        margin: 0;\n        padding: 0;\n        overflow-x: hidden;\n        -webkit-text-size-adjust: 100%;\n        -moz-text-size-adjust: none;\n        -ms-text-size-adjust: 100%;\n      }\n    ")})));export{a as GlobalStyle,a as default};
+import{__makeTemplateObject as n,__assign as o}from"../../node_modules/tslib/tslib.es6.js";import{withTheme as t,createGlobalStyle as e}from"styled-components";import{crukTheme as i}from"../themes/cruk.js";var r,a=t(e(r||(r=n(["\n  ","\n  *, *:after, *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  \n  @media (prefers-reduced-motion: reduce) {\n    *, *:after, *:before {\n      animation-play-state: paused !important;\n      animation-direction: reverse !important;\n      transition: none !important;\n      scroll-behavior: auto !important;\n    }\n  }\n\n  table, td, th {\n    border-spacing: 0;\n    border: 1px solid #ccc;\n    padding: 10px;\n  }\n  .no-focus-outline a:focus,\n  .no-focus-outline button:focus {\n    outline: none;\n  }\n  img {\n    width: 100%;\n    height: auto;\n  }\n  section {\n    width: 100%;\n  }\n    button {\n    font-size: 1em;\n  }\n"],["\n  ","\n  *, *:after, *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  \n  @media (prefers-reduced-motion: reduce) {\n    *, *:after, *:before {\n      animation-play-state: paused !important;\n      animation-direction: reverse !important;\n      transition: none !important;\n      scroll-behavior: auto !important;\n    }\n  }\n\n  table, td, th {\n    border-spacing: 0;\n    border: 1px solid #ccc;\n    padding: 10px;\n  }\n  .no-focus-outline a:focus,\n  .no-focus-outline button:focus {\n    outline: none;\n  }\n  img {\n    width: 100%;\n    height: auto;\n  }\n  section {\n    width: 100%;\n  }\n    button {\n    font-size: 1em;\n  }\n"])),function(n){var t,e=o(o({},i),n.theme);return"\n      ".concat((t=e.typography.customFonts,t.map(function(n){return"\n        @font-face {\n          font-family: ".concat(n.family,";\n          src: ").concat((null==n?void 0:n.urlWoff2)?'url("'.concat(n.urlWoff2,"\") format('woff2')"):"").concat(n.urlWoff&&(null==n?void 0:n.urlWoff2)?", ":"","\n          ").concat((null==n?void 0:n.urlWoff)?'url("'.concat(n.urlWoff,"\") format('woff')"):"",";\n          font-weight: ").concat(null==n?void 0:n.fontWeight,";\n          font-style: normal;\n          font-display: fallback;\n        }\n      ")}).join("")),"\n      html {\n        font-size: ").concat(e.typography.fontSizeBase,";\n        font-family: ").concat(e.typography.fontFamilyBase,";\n        line-height: ").concat(e.typography.lineHeight,";\n      }\n      body {\n        background-color: ").concat(e.colors.backgroundMidLight,";\n        color: ").concat(e.colors.textDark,";\n        margin: 0;\n        padding: 0;\n        overflow-x: hidden;\n        -webkit-text-size-adjust: 100%;\n        -moz-text-size-adjust: none;\n        -ms-text-size-adjust: 100%;\n      }\n    ")}));export{a as GlobalStyle,a as default};
 //# sourceMappingURL=GlobalStyle.js.map

package/lib/src/components/GlobalStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStyle.js","sources":["../../../src/components/GlobalStyle.tsx"],"sourcesContent":["import { createGlobalStyle, withTheme } from \"styled-components\";\nimport { type CustomFontType } from \"../types\";\nimport { crukTheme as defaultTheme } from \"../themes/cruk\";\n\n// font-display fall back to stop font's flickering on SSR rehydration\nconst buildCustomFonts = (customFonts: CustomFontType[]) =>\n  customFonts\n    .map(\n      (font) => `\n        @font-face {\n          font-family: ${font.family};\n          src: ${\n            font?.urlWoff2 ? `url(\"${font.urlWoff2}\") format('woff2')` : \"\"\n          }${!!font.urlWoff && !!font?.urlWoff2 ? \", \" : \"\"}\n          ${font?.urlWoff ? `url(\"${font.urlWoff}\") format('woff')` : \"\"};\n          font-weight: ${font?.fontWeight};\n          font-style: normal;\n          font-display: fallback;\n        }\n      `,\n    )\n    .join(\"\");\n\nexport const GlobalStyle = withTheme(createGlobalStyle`\n  ${(props) => {\n    const theme = {\n      ...defaultTheme,\n      ...props.theme,\n    };\n    return `\n      ${buildCustomFonts(theme.typography.customFonts)}\n      html {\n        font-size: ${theme.typography.fontSizeBase};\n        font-family: ${theme.typography.fontFamilyBase};\n        line-height: ${theme.typography.lineHeight};\n      }\n      body {\n        background-color: ${theme.colors.backgroundMidLight};\n        color: ${theme.colors.textDark};\n        margin: 0;\n        padding: 0;\n        overflow-x: hidden;\n        -webkit-text-size-adjust: 100%;\n        -moz-text-size-adjust: none;\n        -ms-text-size-adjust: 100%;\n      }\n    `;\n  }}\n  *, *:after, *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  \n  @media (prefers-reduced-motion: reduce) {\n    *, *:after, *:before {\n      animation-play-state: paused !important;\n      animation-direction: reverse !important;\n      transition: none !important;\n      scroll-behavior: auto !important;\n    }\n  }\n\n  table, td, th {\n    border-spacing: 0;\n    border: 1px solid #ccc;\n    padding: 10px;\n  }\n  .no-focus-outline a:focus,\n  .no-focus-outline button:focus {\n    outline: none;\n  }\n  img {\n    width: 100%;\n    height: auto;\n  }\n  section {\n    width: 100%;\n  }\n    button {\n    font-size: 1em;\n  }\n`);\n\nexport default GlobalStyle;\n"],"names":["GlobalStyle","withTheme","createGlobalStyle","templateObject_1","__makeTemplateObject","props","customFonts","theme","defaultTheme","typography","map","font","concat","family","undefined","urlWoff2","urlWoff","fontWeight","join","fontSizeBase","fontFamilyBase","lineHeight","colors","backgroundMidLight","textDark"],"mappings":"8MAKA,MAkBaA,EAAcC,EAAUC,EAAiBC,IAAAA,EAAAC,EAAA,CAAA,OAAA,4sBAAA,CAAA,OAwBnD,+sBAvBC,SAACC,GACD,IApBsBC,EAoBhBC,SACDC,GACAH,EAAME,OAEX,MAAO,mBAxBeD,EAyBDC,EAAME,WAAWH,YAxBxCA,EACGI,KACC,SAACC,GAAS,MAAA,kDAAAC,OAESD,EAAKE,qCAElBF,aAAIG,EAAJH,EAAMI,UAAW,QAAQH,OAAAD,EAAKI,SAAQ,uBAAuB,IAC5DH,OAAED,EAAKK,UAAaL,aAAIG,EAAJH,EAAMI,UAAW,KAAO,GAC7C,gBAAAH,QAAAD,eAAAA,EAAMK,SAAU,QAAAJ,OAAQD,EAAKK,8BAA6B,GAAE,8BAAAJ,OAC/CD,eAAAA,EAAMM,WAIxB,yFAAA,IAEFC,KAAK,KAWW,uCAAAN,OAAAL,EAAME,WAAWU,aACf,4BAAAP,OAAAL,EAAME,WAAWW,eAAc,4BAAAR,OAC/BL,EAAME,WAAWY,WAAU,wDAAAT,OAGtBL,EAAMe,OAAOC,gDACxBhB,EAAMe,OAAOE,sNAS5B"}
+{"version":3,"file":"GlobalStyle.js","sources":["../../../src/components/GlobalStyle.tsx"],"sourcesContent":["import { createGlobalStyle, withTheme } from \"styled-components\";\nimport { type CustomFontType } from \"../types\";\nimport { crukTheme as defaultTheme } from \"../themes/cruk\";\n\n// font-display fall back to stop font's flickering on SSR rehydration\nconst buildCustomFonts = (customFonts: CustomFontType[]) =>\n  customFonts\n    .map(\n      (font) => `\n        @font-face {\n          font-family: ${font.family};\n          src: ${\n            font?.urlWoff2 ? `url(\"${font.urlWoff2}\") format('woff2')` : \"\"\n          }${!!font.urlWoff && !!font?.urlWoff2 ? \", \" : \"\"}\n          ${font?.urlWoff ? `url(\"${font.urlWoff}\") format('woff')` : \"\"};\n          font-weight: ${font?.fontWeight};\n          font-style: normal;\n          font-display: fallback;\n        }\n      `,\n    )\n    .join(\"\");\n\nexport const GlobalStyle = withTheme(createGlobalStyle`\n  ${(props) => {\n    const theme = {\n      ...defaultTheme,\n      ...props.theme,\n    };\n    return `\n      ${buildCustomFonts(theme.typography.customFonts)}\n      html {\n        font-size: ${theme.typography.fontSizeBase};\n        font-family: ${theme.typography.fontFamilyBase};\n        line-height: ${theme.typography.lineHeight};\n      }\n      body {\n        background-color: ${theme.colors.backgroundMidLight};\n        color: ${theme.colors.textDark};\n        margin: 0;\n        padding: 0;\n        overflow-x: hidden;\n        -webkit-text-size-adjust: 100%;\n        -moz-text-size-adjust: none;\n        -ms-text-size-adjust: 100%;\n      }\n    `;\n  }}\n  *, *:after, *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  \n  @media (prefers-reduced-motion: reduce) {\n    *, *:after, *:before {\n      animation-play-state: paused !important;\n      animation-direction: reverse !important;\n      transition: none !important;\n      scroll-behavior: auto !important;\n    }\n  }\n\n  table, td, th {\n    border-spacing: 0;\n    border: 1px solid #ccc;\n    padding: 10px;\n  }\n  .no-focus-outline a:focus,\n  .no-focus-outline button:focus {\n    outline: none;\n  }\n  img {\n    width: 100%;\n    height: auto;\n  }\n  section {\n    width: 100%;\n  }\n    button {\n    font-size: 1em;\n  }\n`);\n\nexport default GlobalStyle;\n"],"names":["GlobalStyle","withTheme","createGlobalStyle","templateObject_1","__makeTemplateObject","props","customFonts","theme","defaultTheme","typography","map","font","concat","family","urlWoff2","urlWoff","fontWeight","join","fontSizeBase","fontFamilyBase","lineHeight","colors","backgroundMidLight","textDark"],"mappings":"8MAKA,MAkBaA,EAAcC,EAAUC,EAAiBC,IAAAA,EAAAC,EAAA,CAAA,OAAA,4sBAAA,CAAA,OAwBnD,8sBAvBC,SAACC,GACD,IApBsBC,EAoBhBC,SACDC,GACAH,EAAME,OAEX,MAAO,mBAxBeD,EAyBDC,EAAME,WAAWH,YAxBxCA,EACGI,IACC,SAACC,GAAS,MAAA,kDAAAC,OAESD,EAAKE,qCAElBF,aAAI,EAAJA,EAAMG,UAAW,QAAAF,OAAQD,EAAKG,SAAQ,uBAAuB,IAAEF,OAC5DD,EAAKI,UAAaJ,aAAI,EAAJA,EAAMG,UAAW,KAAO,GAAE,gBAAAF,QAC/CD,eAAAA,EAAMI,SAAU,QAAAH,OAAQD,EAAKI,8BAA6B,GAAE,8BAAAH,OAC/CD,eAAAA,EAAMK,WAAU,yFAIlC,GAEFC,KAAK,KAS4C,uCAAAL,OAEjCL,EAAME,WAAWS,aAAY,4BAAAN,OAC3BL,EAAME,WAAWU,eAAc,4BAAAP,OAC/BL,EAAME,WAAWW,WAAU,wDAAAR,OAGtBL,EAAMc,OAAOC,gDACxBf,EAAMc,OAAOE,sNAS5B"}

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

@@ -0,0 +1,2 @@
+export declare const GlobalStyleNoFontFace: import("react").ForwardRefExoticComponent<import("styled-components").ExecutionProps & import("react").RefAttributes<import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>>> & import("styled-components/dist/utils/hoist").NonReactStatics<import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>>;
+export default GlobalStyleNoFontFace;

package/lib/src/components/GlobalStyleNoFontFace.js

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n,__assign as o}from"../../node_modules/tslib/tslib.es6.js";import{withTheme as t,createGlobalStyle as e}from"styled-components";import{crukTheme as i}from"../themes/cruk.js";var r,a=t(e(r||(r=n(["\n  ","\n  *, *:after, *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  \n  @media (prefers-reduced-motion: reduce) {\n    *, *:after, *:before {\n      animation-play-state: paused !important;\n      animation-direction: reverse !important;\n      transition: none !important;\n      scroll-behavior: auto !important;\n    }\n  }\n\n  table, td, th {\n    border-spacing: 0;\n    border: 1px solid #ccc;\n    padding: 10px;\n  }\n  .no-focus-outline a:focus,\n  .no-focus-outline button:focus {\n    outline: none;\n  }\n  img {\n    width: 100%;\n    height: auto;\n  }\n  section {\n    width: 100%;\n  }\n    button {\n    font-size: 1em;\n  }\n"],["\n  ","\n  *, *:after, *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  \n  @media (prefers-reduced-motion: reduce) {\n    *, *:after, *:before {\n      animation-play-state: paused !important;\n      animation-direction: reverse !important;\n      transition: none !important;\n      scroll-behavior: auto !important;\n    }\n  }\n\n  table, td, th {\n    border-spacing: 0;\n    border: 1px solid #ccc;\n    padding: 10px;\n  }\n  .no-focus-outline a:focus,\n  .no-focus-outline button:focus {\n    outline: none;\n  }\n  img {\n    width: 100%;\n    height: auto;\n  }\n  section {\n    width: 100%;\n  }\n    button {\n    font-size: 1em;\n  }\n"])),(function(n){var t=o(o({},i),n.theme);return"\n      html {\n        font-size: ".concat(t.typography.fontSizeBase,";\n        font-family: ").concat(t.typography.fontFamilyBase,";\n        line-height: ").concat(t.typography.lineHeight,";\n      }\n      body {\n        background-color: ").concat(t.colors.backgroundMidLight,";\n        color: ").concat(t.colors.textDark,";\n        margin: 0;\n        padding: 0;\n        overflow-x: hidden;\n        -webkit-text-size-adjust: 100%;\n        -moz-text-size-adjust: none;\n        -ms-text-size-adjust: 100%;\n      }\n    ")})));export{a as GlobalStyleNoFontFace,a as default};
+import{__makeTemplateObject as n,__assign as o}from"../../node_modules/tslib/tslib.es6.js";import{withTheme as t,createGlobalStyle as e}from"styled-components";import{crukTheme as i}from"../themes/cruk.js";var r,a=t(e(r||(r=n(["\n  ","\n  *, *:after, *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  \n  @media (prefers-reduced-motion: reduce) {\n    *, *:after, *:before {\n      animation-play-state: paused !important;\n      animation-direction: reverse !important;\n      transition: none !important;\n      scroll-behavior: auto !important;\n    }\n  }\n\n  table, td, th {\n    border-spacing: 0;\n    border: 1px solid #ccc;\n    padding: 10px;\n  }\n  .no-focus-outline a:focus,\n  .no-focus-outline button:focus {\n    outline: none;\n  }\n  img {\n    width: 100%;\n    height: auto;\n  }\n  section {\n    width: 100%;\n  }\n    button {\n    font-size: 1em;\n  }\n"],["\n  ","\n  *, *:after, *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  \n  @media (prefers-reduced-motion: reduce) {\n    *, *:after, *:before {\n      animation-play-state: paused !important;\n      animation-direction: reverse !important;\n      transition: none !important;\n      scroll-behavior: auto !important;\n    }\n  }\n\n  table, td, th {\n    border-spacing: 0;\n    border: 1px solid #ccc;\n    padding: 10px;\n  }\n  .no-focus-outline a:focus,\n  .no-focus-outline button:focus {\n    outline: none;\n  }\n  img {\n    width: 100%;\n    height: auto;\n  }\n  section {\n    width: 100%;\n  }\n    button {\n    font-size: 1em;\n  }\n"])),function(n){var t=o(o({},i),n.theme);return"\n      html {\n        font-size: ".concat(t.typography.fontSizeBase,";\n        font-family: ").concat(t.typography.fontFamilyBase,";\n        line-height: ").concat(t.typography.lineHeight,";\n      }\n      body {\n        background-color: ").concat(t.colors.backgroundMidLight,";\n        color: ").concat(t.colors.textDark,";\n        margin: 0;\n        padding: 0;\n        overflow-x: hidden;\n        -webkit-text-size-adjust: 100%;\n        -moz-text-size-adjust: none;\n        -ms-text-size-adjust: 100%;\n      }\n    ")}));export{a as GlobalStyleNoFontFace,a as default};
 //# sourceMappingURL=GlobalStyleNoFontFace.js.map

package/lib/src/components/GlobalStyleNoFontFace.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStyleNoFontFace.js","sources":["../../../src/components/GlobalStyleNoFontFace.tsx"],"sourcesContent":["import { createGlobalStyle, withTheme } from \"styled-components\";\nimport { crukTheme as defaultTheme } from \"../themes/cruk\";\n\nexport const GlobalStyleNoFontFace = withTheme(createGlobalStyle`\n  ${(props) => {\n    const theme = {\n      ...defaultTheme,\n      ...props.theme,\n    };\n    return `\n      html {\n        font-size: ${theme.typography.fontSizeBase};\n        font-family: ${theme.typography.fontFamilyBase};\n        line-height: ${theme.typography.lineHeight};\n      }\n      body {\n        background-color: ${theme.colors.backgroundMidLight};\n        color: ${theme.colors.textDark};\n        margin: 0;\n        padding: 0;\n        overflow-x: hidden;\n        -webkit-text-size-adjust: 100%;\n        -moz-text-size-adjust: none;\n        -ms-text-size-adjust: 100%;\n      }\n    `;\n  }}\n  *, *:after, *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  \n  @media (prefers-reduced-motion: reduce) {\n    *, *:after, *:before {\n      animation-play-state: paused !important;\n      animation-direction: reverse !important;\n      transition: none !important;\n      scroll-behavior: auto !important;\n    }\n  }\n\n  table, td, th {\n    border-spacing: 0;\n    border: 1px solid #ccc;\n    padding: 10px;\n  }\n  .no-focus-outline a:focus,\n  .no-focus-outline button:focus {\n    outline: none;\n  }\n  img {\n    width: 100%;\n    height: auto;\n  }\n  section {\n    width: 100%;\n  }\n    button {\n    font-size: 1em;\n  }\n`);\n\nexport default GlobalStyleNoFontFace;\n"],"names":["GlobalStyleNoFontFace","withTheme","createGlobalStyle","templateObject_1","__makeTemplateObject","props","theme","defaultTheme","concat","typography","fontSizeBase","fontFamilyBase","lineHeight","colors","backgroundMidLight","textDark"],"mappings":"8MAGO,MAAMA,EAAwBC,EAAUC,EAAiBC,IAAAA,EAAAC,EAAA,CAAA,OAAA,4sBAAA,CAAA,OAuB7D,+sBAtBC,SAACC,GACD,IAAMC,SACDC,GACAF,EAAMC,OAEX,MAAO,sCAEUE,OAAAF,EAAMG,WAAWC,aACf,4BAAAF,OAAAF,EAAMG,WAAWE,kDACjBL,EAAMG,WAAWG,WAAU,wDAAAJ,OAGtBF,EAAMO,OAAOC,mBACxB,sBAAAN,OAAAF,EAAMO,OAAOE,sNAS5B"}
+{"version":3,"file":"GlobalStyleNoFontFace.js","sources":["../../../src/components/GlobalStyleNoFontFace.tsx"],"sourcesContent":["import { createGlobalStyle, withTheme } from \"styled-components\";\nimport { crukTheme as defaultTheme } from \"../themes/cruk\";\n\nexport const GlobalStyleNoFontFace = withTheme(createGlobalStyle`\n  ${(props) => {\n    const theme = {\n      ...defaultTheme,\n      ...props.theme,\n    };\n    return `\n      html {\n        font-size: ${theme.typography.fontSizeBase};\n        font-family: ${theme.typography.fontFamilyBase};\n        line-height: ${theme.typography.lineHeight};\n      }\n      body {\n        background-color: ${theme.colors.backgroundMidLight};\n        color: ${theme.colors.textDark};\n        margin: 0;\n        padding: 0;\n        overflow-x: hidden;\n        -webkit-text-size-adjust: 100%;\n        -moz-text-size-adjust: none;\n        -ms-text-size-adjust: 100%;\n      }\n    `;\n  }}\n  *, *:after, *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  \n  @media (prefers-reduced-motion: reduce) {\n    *, *:after, *:before {\n      animation-play-state: paused !important;\n      animation-direction: reverse !important;\n      transition: none !important;\n      scroll-behavior: auto !important;\n    }\n  }\n\n  table, td, th {\n    border-spacing: 0;\n    border: 1px solid #ccc;\n    padding: 10px;\n  }\n  .no-focus-outline a:focus,\n  .no-focus-outline button:focus {\n    outline: none;\n  }\n  img {\n    width: 100%;\n    height: auto;\n  }\n  section {\n    width: 100%;\n  }\n    button {\n    font-size: 1em;\n  }\n`);\n\nexport default GlobalStyleNoFontFace;\n"],"names":["GlobalStyleNoFontFace","withTheme","createGlobalStyle","templateObject_1","__makeTemplateObject","props","theme","defaultTheme","concat","typography","fontSizeBase","fontFamilyBase","lineHeight","colors","backgroundMidLight","textDark"],"mappings":"8MAGO,MAAMA,EAAwBC,EAAUC,EAAiBC,IAAAA,EAAAC,EAAA,CAAA,OAAA,4sBAAA,CAAA,OAuB7D,8sBAtBC,SAACC,GACD,IAAMC,SACDC,GACAF,EAAMC,OAEX,MAAO,sCAAAE,OAEUF,EAAMG,WAAWC,aAAY,4BAAAF,OAC3BF,EAAMG,WAAWE,kDACjBL,EAAMG,WAAWG,WAAU,wDAAAJ,OAGtBF,EAAMO,OAAOC,mBAAkB,sBAAAN,OAC1CF,EAAMO,OAAOE,sNAS5B"}

package/lib/{components → src/components}/Header/Header.stories.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react-vite";
 import Header from ".";
 declare const _default: {
     title: string;

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 c,HeaderStickyContainer as s,SkipToMain as a,HeaderMainContent as u,StyledLink as f,LogoWrapper as g,Logo as d,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(c,null,t.createElement(s,{"data-cy":"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(g,{$isSmall:A,$isSticky:p},t.createElement(d,{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{__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};
 //# 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-cy=\"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,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAuBL,OApBAK,GACE,SAACpB,GACC,IAAAqB,EAAOrB,EAAAqB,QAKDC,IAAeT,GACjBQ,EAAQE,EAhEc,IAkEtBD,IAAiBX,GACnBC,EAAWU,EAEd,GACD,CAACX,GACD,MACA,EACA,IAIAa,EAACC,cAAAC,EAAc,CAAAT,MAAOA,GACpBO,EAAAC,cAACE,EAAY,KACXH,EAAAC,cAACG,EAAuB,KACtBJ,EAAAC,cAACI,EACS,CAAA,UAAA,0BACEC,SAAAnB,YACCV,GAEXuB,EAAAC,cAACM,EAAU,CAACC,KAAK,SAAyC,wBAC1DR,EAACC,cAAAQ,cAA8B1B,GAC7BiB,EAACC,cAAAS,EACC,CAAAF,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,EAAkB,CAAAhB,SAAAnB,EAAoB4B,UAAAtC,GACpCC,GAED,KACJsB,EAAAC,cAACsB,EAAY,KACXvB,EAACC,cAAAuB,EAAY,KAAAxC,QAQ7B"}
+{"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,IAGf,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"}

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import i from"styled-components";import{crukTheme as t}from"../../themes/cruk.js";var e,o,r,a,d,h,s,u,l,c,p,g="120px",x="72px",f=t.spacing.xs,m="40px",b="0.2s",w=i.header(e||(e=n(["\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  background-color: ",";\n  z-index: 9998;\n"],["\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  background-color: ",";\n  z-index: 9998;\n"])),(function(n){return n.theme.colors.headerBackground})),y=i.div(o||(o=n(["\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  height: ",";\n\n  @media (min-width: ",") {\n    height: ",";\n  }\n"],["\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  height: ",";\n\n  @media (min-width: ",") {\n    height: ",";\n  }\n"])),x,(function(n){return n.theme.breakpoint.desktop}),g),v=i.div(r||(r=n(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  padding: 0 ",";\n  background-color: ",";\n  position: relative;\n  border-bottom: ",";\n  height: ",";\n  box-shadow: ",";\n  top: ",";\n  position: ",";\n  transition: height "," ease;\n\n  @media (min-width: ",") {\n    position: ",";\n    height: ",";\n  }\n"],["\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  padding: 0 ",";\n  background-color: ",";\n  position: relative;\n  border-bottom: ",";\n  height: ",";\n  box-shadow: ",";\n  top: ",";\n  position: ",";\n  transition: height "," ease;\n\n  @media (min-width: ",") {\n    position: ",";\n    height: ",";\n  }\n"])),f,(function(n){return n.theme.colors.headerBackground}),(function(n){var i=n.theme.colors.headerBorder;return"solid 1px ".concat(i)}),x,(function(n){var i=n.theme;return n.$isSticky?i.shadows.l:"none"}),(function(n){return n.$isSticky?0:"auto"}),(function(n){return n.$isSticky?"fixed":"relative"}),b,(function(n){return n.theme.breakpoint.desktop}),(function(n){return n.$isSticky?"fixed":"relative"}),(function(n){var i=n.$isSmall,t=n.$isSticky;return i&&t?x:g})),k=i.div(a||(a=n(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  max-width: ",";\n"],["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  max-width: ",";\n"])),(function(n){var i=n.$fullWidth,t=n.theme.utilities.contentMaxWidth;return i?"100%":t})),z=i.img(d||(d=n(["\n  height: 100%;\n  width: auto;\n  max-width: 100%;\n  max-height: 100%;\n"],["\n  height: 100%;\n  width: auto;\n  max-width: 100%;\n  max-height: 100%;\n"]))),S=i.div(h||(h=n(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  width: auto;\n  transition: height "," ease;\n\n  height: ",";\n\n  @media (min-width: ",") {\n    height: ",";\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  width: auto;\n  transition: height "," ease;\n\n  height: ",";\n\n  @media (min-width: ",") {\n    height: ",";\n  }\n"])),b,m,(function(n){return n.theme.breakpoint.desktop}),(function(n){var i=n.$isSmall,t=n.$isSticky;return i&&t?m:"80px"})),$=i.a(s||(s=n(["\n  display: inline-block;\n"],["\n  display: inline-block;\n"]))),j=i.a(u||(u=n(["\n  left: -999px;\n  position: absolute;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  z-index: -999;\n  &:focus,\n  &:active,\n  &:focus-within {\n    left: auto;\n    top: auto;\n    width: 30%;\n    height: auto;\n    overflow: auto;\n    margin: 10px 35%;\n    padding: ",";\n    border-radius: 15px;\n    border: 4px solid yellow;\n    text-align: center;\n    font-size: 1.2em;\n    z-index: 999;\n  }\n"],["\n  left: -999px;\n  position: absolute;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  z-index: -999;\n  &:focus,\n  &:active,\n  &:focus-within {\n    left: auto;\n    top: auto;\n    width: 30%;\n    height: auto;\n    overflow: auto;\n    margin: 10px 35%;\n    padding: ",";\n    border-radius: 15px;\n    border: 4px solid yellow;\n    text-align: center;\n    font-size: 1.2em;\n    z-index: 999;\n  }\n"])),(function(n){return n.theme.spacing.xs})),B=i.p(l||(l=n(["\n  flex: 1 1 auto;\n  font-family: ",";\n  font-weight: ",";\n  font-size: ",";\n  color: ",";\n  text-align: center;\n  opacity: 0;\n  transition: opacity "," ease;\n  display: none;\n\n  @media (min-width: ",") {\n    display: block;\n    opacity: ",";\n  }\n"],["\n  flex: 1 1 auto;\n  font-family: ",";\n  font-weight: ",";\n  font-size: ",";\n  color: ",";\n  text-align: center;\n  opacity: 0;\n  transition: opacity "," ease;\n  display: none;\n\n  @media (min-width: ",") {\n    display: block;\n    opacity: ",";\n  }\n"])),(function(n){return n.theme.typography.fontFamilyHeadings}),(function(n){return n.theme.typography.fontWeightHeadings}),(function(n){return n.theme.fontSizes.xl}),(function(n){return n.theme.colors.headerTaglineText}),b,(function(n){return n.theme.breakpoint.desktop}),(function(n){var i=n.$isSmall,t=n.$isSticky;return i&&t?0:1})),W=i.div(c||(c=n(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n"],["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n"]))),H=i.div(p||(p=n(["\n  height: auto;\n  margin: auto 0;\n"],["\n  height: auto;\n  margin: auto 0;\n"])));export{H as ChildInner,W as ChildWrapper,k as HeaderMainContent,v as HeaderStickyContainer,y as HeaderStickyPlaceHolder,z as Logo,S as LogoWrapper,j as SkipToMain,w as StyledHeader,$ as StyledLink,B as Tagline};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import i from"styled-components";import{crukTheme as t}from"../../themes/cruk.js";var e,o,r,a,d,h,s,u,l,c,p,g="120px",x="72px",f=t.spacing.xs,m="40px",b="0.2s",w=i.header(e||(e=n(["\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  background-color: ",";\n  z-index: 9998;\n"],["\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  background-color: ",";\n  z-index: 9998;\n"])),function(n){return n.theme.colors.headerBackground}),y=i.div(o||(o=n(["\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  height: ",";\n\n  @media (min-width: ",") {\n    height: ",";\n  }\n"],["\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  height: ",";\n\n  @media (min-width: ",") {\n    height: ",";\n  }\n"])),x,function(n){return n.theme.breakpoint.desktop},g),v=i.div(r||(r=n(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  padding: 0 ",";\n  background-color: ",";\n  position: relative;\n  border-bottom: ",";\n  height: ",";\n  box-shadow: ",";\n  top: ",";\n  position: ",";\n  transition: height "," ease;\n\n  @media (min-width: ",") {\n    position: ",";\n    height: ",";\n  }\n"],["\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  padding: 0 ",";\n  background-color: ",";\n  position: relative;\n  border-bottom: ",";\n  height: ",";\n  box-shadow: ",";\n  top: ",";\n  position: ",";\n  transition: height "," ease;\n\n  @media (min-width: ",") {\n    position: ",";\n    height: ",";\n  }\n"])),f,function(n){return n.theme.colors.headerBackground},function(n){var i=n.theme.colors.headerBorder;return"solid 1px ".concat(i)},x,function(n){var i=n.theme;return n.$isSticky?i.shadows.l:"none"},function(n){return n.$isSticky?0:"auto"},function(n){return n.$isSticky?"fixed":"relative"},b,function(n){return n.theme.breakpoint.desktop},function(n){return n.$isSticky?"fixed":"relative"},function(n){var i=n.$isSmall,t=n.$isSticky;return i&&t?x:g}),k=i.div(a||(a=n(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  max-width: ",";\n"],["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  max-width: ",";\n"])),function(n){var i=n.$fullWidth,t=n.theme.utilities.contentMaxWidth;return i?"100%":t}),z=i.img(d||(d=n(["\n  height: 100%;\n  width: auto;\n  max-width: 100%;\n  max-height: 100%;\n"],["\n  height: 100%;\n  width: auto;\n  max-width: 100%;\n  max-height: 100%;\n"]))),S=i.div(h||(h=n(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  width: auto;\n  transition: height "," ease;\n\n  height: ",";\n\n  @media (min-width: ",") {\n    height: ",";\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  width: auto;\n  transition: height "," ease;\n\n  height: ",";\n\n  @media (min-width: ",") {\n    height: ",";\n  }\n"])),b,m,function(n){return n.theme.breakpoint.desktop},function(n){var i=n.$isSmall,t=n.$isSticky;return i&&t?m:"80px"}),$=i.a(s||(s=n(["\n  display: inline-block;\n"],["\n  display: inline-block;\n"]))),j=i.a(u||(u=n(["\n  left: -999px;\n  position: absolute;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  z-index: -999;\n  &:focus,\n  &:active,\n  &:focus-within {\n    left: auto;\n    top: auto;\n    width: 30%;\n    height: auto;\n    overflow: auto;\n    margin: 10px 35%;\n    padding: ",";\n    border-radius: 15px;\n    border: 4px solid yellow;\n    text-align: center;\n    font-size: 1.2em;\n    z-index: 999;\n  }\n"],["\n  left: -999px;\n  position: absolute;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  z-index: -999;\n  &:focus,\n  &:active,\n  &:focus-within {\n    left: auto;\n    top: auto;\n    width: 30%;\n    height: auto;\n    overflow: auto;\n    margin: 10px 35%;\n    padding: ",";\n    border-radius: 15px;\n    border: 4px solid yellow;\n    text-align: center;\n    font-size: 1.2em;\n    z-index: 999;\n  }\n"])),function(n){return n.theme.spacing.xs}),B=i.p(l||(l=n(["\n  flex: 1 1 auto;\n  font-family: ",";\n  font-weight: ",";\n  font-size: ",";\n  color: ",";\n  text-align: center;\n  opacity: 0;\n  transition: opacity "," ease;\n  display: none;\n\n  @media (min-width: ",") {\n    display: block;\n    opacity: ",";\n  }\n"],["\n  flex: 1 1 auto;\n  font-family: ",";\n  font-weight: ",";\n  font-size: ",";\n  color: ",";\n  text-align: center;\n  opacity: 0;\n  transition: opacity "," ease;\n  display: none;\n\n  @media (min-width: ",") {\n    display: block;\n    opacity: ",";\n  }\n"])),function(n){return n.theme.typography.fontFamilyHeadings},function(n){return n.theme.typography.fontWeightHeadings},function(n){return n.theme.fontSizes.xl},function(n){return n.theme.colors.headerTaglineText},b,function(n){return n.theme.breakpoint.desktop},function(n){var i=n.$isSmall,t=n.$isSticky;return i&&t?0:1}),W=i.div(c||(c=n(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n"],["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n"]))),H=i.div(p||(p=n(["\n  height: auto;\n  margin: auto 0;\n"],["\n  height: auto;\n  margin: auto 0;\n"])));export{H as ChildInner,W as ChildWrapper,k as HeaderMainContent,v as HeaderStickyContainer,y as HeaderStickyPlaceHolder,z as Logo,S as LogoWrapper,j as SkipToMain,w as StyledHeader,$ as StyledLink,B as Tagline};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Header/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { type ThemeType } from \"../../types\";\n\nconst HEADER_HEIGHT_LARGE = \"120px\";\nconst HEADER_HEIGHT_SMALL = \"72px\";\nconst HEADER_PADDING = defaultTheme.spacing.xs;\nconst HEADER_LOGO_HEIGHT_LARGE = \"80px\";\nconst HEADER_LOGO_HEIGHT_SMALL = \"40px\";\nconst ANIMATION_SPEED = \"0.2s\";\n\nexport const StyledHeader = styled.header<{ theme: ThemeType }>`\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  background-color: ${({\n    theme: {\n      colors: { headerBackground },\n    },\n  }) => headerBackground};\n  z-index: 9998;\n`;\n\nexport const HeaderStickyPlaceHolder = styled.div<{ theme: ThemeType }>`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  height: ${HEADER_HEIGHT_SMALL};\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    height: ${HEADER_HEIGHT_LARGE};\n  }\n`;\n\nexport const HeaderStickyContainer = styled.div<{\n  $isSmall?: boolean;\n  $isSticky?: boolean;\n  theme: ThemeType;\n}>`\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  padding: 0 ${HEADER_PADDING};\n  background-color: ${({\n    theme: {\n      colors: { headerBackground },\n    },\n  }) => headerBackground};\n  position: relative;\n  border-bottom: ${({\n    theme: {\n      colors: { headerBorder },\n    },\n  }) => `solid 1px ${headerBorder}`};\n  height: ${HEADER_HEIGHT_SMALL};\n  box-shadow: ${({ theme, $isSticky }) =>\n    $isSticky ? theme.shadows.l : \"none\"};\n  top: ${({ $isSticky }) => ($isSticky ? 0 : \"auto\")};\n  position: ${({ $isSticky }) => ($isSticky ? \"fixed\" : \"relative\")};\n  transition: height ${ANIMATION_SPEED} ease;\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    position: ${({ $isSticky }) => ($isSticky ? \"fixed\" : \"relative\")};\n    height: ${({ $isSmall, $isSticky }) =>\n      $isSmall && $isSticky ? HEADER_HEIGHT_SMALL : HEADER_HEIGHT_LARGE};\n  }\n`;\n\nexport const HeaderMainContent = styled.div<{\n  $fullWidth?: boolean;\n  theme: ThemeType;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  max-width: ${({\n    $fullWidth,\n    theme: {\n      utilities: { contentMaxWidth },\n    },\n  }) => ($fullWidth ? `100%` : contentMaxWidth)};\n`;\n\nexport const Logo = styled.img`\n  height: 100%;\n  width: auto;\n  max-width: 100%;\n  max-height: 100%;\n`;\n\nexport const LogoWrapper = styled.div<{\n  $isSmall?: boolean;\n  $isSticky?: boolean;\n  theme: ThemeType;\n}>`\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  width: auto;\n  transition: height ${ANIMATION_SPEED} ease;\n\n  height: ${HEADER_LOGO_HEIGHT_SMALL};\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    height: ${({ $isSmall, $isSticky }) =>\n      $isSmall && $isSticky\n        ? HEADER_LOGO_HEIGHT_SMALL\n        : HEADER_LOGO_HEIGHT_LARGE};\n  }\n`;\n\nexport const StyledLink = styled.a`\n  display: inline-block;\n`;\n\nexport const SkipToMain = styled.a<{ theme: ThemeType }>`\n  left: -999px;\n  position: absolute;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  z-index: -999;\n  &:focus,\n  &:active,\n  &:focus-within {\n    left: auto;\n    top: auto;\n    width: 30%;\n    height: auto;\n    overflow: auto;\n    margin: 10px 35%;\n    padding: ${({\n      theme: {\n        spacing: { xs },\n      },\n    }) => xs};\n    border-radius: 15px;\n    border: 4px solid yellow;\n    text-align: center;\n    font-size: 1.2em;\n    z-index: 999;\n  }\n`;\n\nexport const Tagline = styled.p<{\n  $isSmall?: boolean;\n  $isSticky?: boolean;\n  theme: ThemeType;\n}>`\n  flex: 1 1 auto;\n  font-family: ${({ theme }) => theme.typography.fontFamilyHeadings};\n  font-weight: ${({ theme }) => theme.typography.fontWeightHeadings};\n  font-size: ${({\n    theme: {\n      fontSizes: { xl },\n    },\n  }) => xl};\n  color: ${({ theme }) => theme.colors.headerTaglineText};\n  text-align: center;\n  opacity: 0;\n  transition: opacity ${ANIMATION_SPEED} ease;\n  display: none;\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    display: block;\n    opacity: ${({ $isSmall, $isSticky }) => ($isSmall && $isSticky ? 0 : 1)};\n  }\n`;\n\nexport const ChildWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n`;\n\nexport const ChildInner = styled.div`\n  height: auto;\n  margin: auto 0;\n`;\n"],"names":["HEADER_HEIGHT_LARGE","HEADER_HEIGHT_SMALL","HEADER_PADDING","defaultTheme","spacing","xs","HEADER_LOGO_HEIGHT_SMALL","ANIMATION_SPEED","StyledHeader","styled","header","templateObject_1","__makeTemplateObject","_a","theme","colors","headerBackground","HeaderStickyPlaceHolder","div","templateObject_2","breakpoint","desktop","HeaderStickyContainer","templateObject_3","headerBorder","concat","$isSticky","shadows","l","$isSmall","HeaderMainContent","templateObject_4","$fullWidth","contentMaxWidth","utilities","Logo","img","templateObject_5","LogoWrapper","templateObject_6","StyledLink","a","templateObject_7","SkipToMain","templateObject_8","Tagline","p","templateObject_9","typography","fontFamilyHeadings","fontWeightHeadings","fontSizes","xl","headerTaglineText","ChildWrapper","templateObject_10","ChildInner","templateObject_11"],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Header/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { type ThemeType } from \"../../types\";\n\nconst HEADER_HEIGHT_LARGE = \"120px\";\nconst HEADER_HEIGHT_SMALL = \"72px\";\nconst HEADER_PADDING = defaultTheme.spacing.xs;\nconst HEADER_LOGO_HEIGHT_LARGE = \"80px\";\nconst HEADER_LOGO_HEIGHT_SMALL = \"40px\";\nconst ANIMATION_SPEED = \"0.2s\";\n\nexport const StyledHeader = styled.header<{ theme: ThemeType }>`\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  background-color: ${({\n    theme: {\n      colors: { headerBackground },\n    },\n  }) => headerBackground};\n  z-index: 9998;\n`;\n\nexport const HeaderStickyPlaceHolder = styled.div<{ theme: ThemeType }>`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  height: ${HEADER_HEIGHT_SMALL};\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    height: ${HEADER_HEIGHT_LARGE};\n  }\n`;\n\nexport const HeaderStickyContainer = styled.div<{\n  $isSmall?: boolean;\n  $isSticky?: boolean;\n  theme: ThemeType;\n}>`\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  padding: 0 ${HEADER_PADDING};\n  background-color: ${({\n    theme: {\n      colors: { headerBackground },\n    },\n  }) => headerBackground};\n  position: relative;\n  border-bottom: ${({\n    theme: {\n      colors: { headerBorder },\n    },\n  }) => `solid 1px ${headerBorder}`};\n  height: ${HEADER_HEIGHT_SMALL};\n  box-shadow: ${({ theme, $isSticky }) =>\n    $isSticky ? theme.shadows.l : \"none\"};\n  top: ${({ $isSticky }) => ($isSticky ? 0 : \"auto\")};\n  position: ${({ $isSticky }) => ($isSticky ? \"fixed\" : \"relative\")};\n  transition: height ${ANIMATION_SPEED} ease;\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    position: ${({ $isSticky }) => ($isSticky ? \"fixed\" : \"relative\")};\n    height: ${({ $isSmall, $isSticky }) =>\n      $isSmall && $isSticky ? HEADER_HEIGHT_SMALL : HEADER_HEIGHT_LARGE};\n  }\n`;\n\nexport const HeaderMainContent = styled.div<{\n  $fullWidth?: boolean;\n  theme: ThemeType;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  max-width: ${({\n    $fullWidth,\n    theme: {\n      utilities: { contentMaxWidth },\n    },\n  }) => ($fullWidth ? `100%` : contentMaxWidth)};\n`;\n\nexport const Logo = styled.img`\n  height: 100%;\n  width: auto;\n  max-width: 100%;\n  max-height: 100%;\n`;\n\nexport const LogoWrapper = styled.div<{\n  $isSmall?: boolean;\n  $isSticky?: boolean;\n  theme: ThemeType;\n}>`\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  width: auto;\n  transition: height ${ANIMATION_SPEED} ease;\n\n  height: ${HEADER_LOGO_HEIGHT_SMALL};\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    height: ${({ $isSmall, $isSticky }) =>\n      $isSmall && $isSticky\n        ? HEADER_LOGO_HEIGHT_SMALL\n        : HEADER_LOGO_HEIGHT_LARGE};\n  }\n`;\n\nexport const StyledLink = styled.a`\n  display: inline-block;\n`;\n\nexport const SkipToMain = styled.a<{ theme: ThemeType }>`\n  left: -999px;\n  position: absolute;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  z-index: -999;\n  &:focus,\n  &:active,\n  &:focus-within {\n    left: auto;\n    top: auto;\n    width: 30%;\n    height: auto;\n    overflow: auto;\n    margin: 10px 35%;\n    padding: ${({\n      theme: {\n        spacing: { xs },\n      },\n    }) => xs};\n    border-radius: 15px;\n    border: 4px solid yellow;\n    text-align: center;\n    font-size: 1.2em;\n    z-index: 999;\n  }\n`;\n\nexport const Tagline = styled.p<{\n  $isSmall?: boolean;\n  $isSticky?: boolean;\n  theme: ThemeType;\n}>`\n  flex: 1 1 auto;\n  font-family: ${({ theme }) => theme.typography.fontFamilyHeadings};\n  font-weight: ${({ theme }) => theme.typography.fontWeightHeadings};\n  font-size: ${({\n    theme: {\n      fontSizes: { xl },\n    },\n  }) => xl};\n  color: ${({ theme }) => theme.colors.headerTaglineText};\n  text-align: center;\n  opacity: 0;\n  transition: opacity ${ANIMATION_SPEED} ease;\n  display: none;\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    display: block;\n    opacity: ${({ $isSmall, $isSticky }) => ($isSmall && $isSticky ? 0 : 1)};\n  }\n`;\n\nexport const ChildWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n`;\n\nexport const ChildInner = styled.div`\n  height: auto;\n  margin: auto 0;\n`;\n"],"names":["HEADER_HEIGHT_LARGE","HEADER_HEIGHT_SMALL","HEADER_PADDING","defaultTheme","spacing","xs","HEADER_LOGO_HEIGHT_SMALL","ANIMATION_SPEED","StyledHeader","styled","header","templateObject_1","__makeTemplateObject","_a","theme","colors","headerBackground","HeaderStickyPlaceHolder","div","templateObject_2","breakpoint","desktop","HeaderStickyContainer","templateObject_3","headerBorder","concat","$isSticky","shadows","l","$isSmall","HeaderMainContent","templateObject_4","$fullWidth","contentMaxWidth","utilities","Logo","img","templateObject_5","LogoWrapper","templateObject_6","StyledLink","a","templateObject_7","SkipToMain","templateObject_8","Tagline","p","templateObject_9","typography","fontFamilyHeadings","fontWeightHeadings","fontSizes","xl","headerTaglineText","ChildWrapper","templateObject_10","ChildInner","templateObject_11"],"mappings":"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"}

package/lib/{components → src/components}/Heading/Heading.stories.d.ts

@@ -1,4 +1,4 @@
-import { type StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react-vite";
 import Heading from ".";
 declare const _default: {
     title: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Heading/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type ElementType } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\n\nimport {\n  type FontSizeType,\n  type WordBreakType,\n  type OverflowWrapType,\n} from \"../../types\";\nimport { H1, H2, H3, H4, H5, H6 } from \"./styles\";\n\nexport type HeadingProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    h1?: boolean;\n    h2?: boolean;\n    h3?: boolean;\n    h4?: boolean;\n    h5?: boolean;\n    h6?: boolean;\n    /** font size FontSizeType t-shirt sizes  */\n    textSize?: FontSizeType;\n    /** horizontal alignment of text */\n    textAlign?: \"left\" | \"right\" | \"center\";\n    /** color of text */\n    textColor?: string;\n    /** word-break behavior */\n    wordBreak?: WordBreakType;\n    /** overflow-wrap behavior */\n    overflowWrap?: OverflowWrapType;\n    /** styled-component polymorphic feature so you take the styling of a header and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n * \n * Use headings consistently to create a clear hierarchy throughout your service.\nMarkup headings semantically using the appropriate <h#> level HTML element and\nuse the corresponding heading class (h1, h2, h3, ....). Write all headings in sentence case. Heading differs from the Text component by using a different font-family and it changes the font size according to the screen width breakpoints.\n * \n */\nexport function Heading({\n  textSize,\n  textAlign,\n  textColor,\n  wordBreak,\n  overflowWrap,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  ...props\n}: HeadingProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const propsConvertedToInternalSpacingProps =\n    spacingPropsToSpacingPropsInternal(props);\n\n  if (h1)\n    return (\n      <H1\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h2)\n    return (\n      <H2\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h3)\n    return (\n      <H3\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h4)\n    return (\n      <H4\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h5)\n    return (\n      <H5\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h6)\n    return (\n      <H6\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  return (\n    <H2\n      {...propsConvertedToInternalSpacingProps}\n      theme={theme}\n      $textSize={textSize}\n      $textAlign={textAlign}\n      $textColor={textColor}\n      $wordBreak={wordBreak}\n      $overflowWrap={overflowWrap}\n    />\n  );\n}\n\nexport default Heading;\n"],"names":["Heading","_a","textSize","textAlign","textColor","wordBreak","overflowWrap","h1","h2","h3","h4","h5","h6","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","propsConvertedToInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","H1","$textSize","$textAlign","$wordBreak","$overflowWrap","H2","H3","H4","H5","H6"],"mappings":"qVA6CM,SAAUA,EAAQC,GACtB,IAAAC,EAAQD,EAAAC,SACRC,EAASF,EAAAE,UACTC,EAASH,EAAAG,UACTC,cACAC,EAAYL,EAAAK,aACZC,EAAEN,EAAAM,GACFC,EAAEP,EAAAO,GACFC,EAAER,EAAAQ,GACFC,OACAC,EAAEV,EAAAU,GACFC,EAAEX,EAAAW,GACCC,EAAKC,EAAAb,EAZc,+FAchBc,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACJC,EAAmCR,GAErC,OAAIN,EAEAe,gBAACC,EAAEL,EAAA,CAAA,EACGE,EACJ,CAAAH,MAAOA,EAAKO,UACDtB,EACCuB,WAAAtB,aACAC,EAASsB,WACTrB,EACGsB,cAAArB,KAGjBE,EAEAc,gBAACM,EAAEV,EAAA,CAAA,EACGE,EACJ,CAAAH,MAAOA,EAAKO,UACDtB,EACCuB,WAAAtB,aACAC,EAASsB,WACTrB,EACGsB,cAAArB,KAGjBG,EAEAa,gBAACO,EAAEX,EAAA,CAAA,EACGE,EACJ,CAAAH,MAAOA,EAAKO,UACDtB,EACCuB,WAAAtB,aACAC,EAASsB,WACTrB,EACGsB,cAAArB,KAGjBI,EAEAY,gBAACQ,EAAEZ,EAAA,CAAA,EACGE,EACJ,CAAAH,MAAOA,EAAKO,UACDtB,EACCuB,WAAAtB,aACAC,EAASsB,WACTrB,EACGsB,cAAArB,KAGjBK,EAEAW,gBAACS,EAAEb,EAAA,CAAA,EACGE,EACJ,CAAAH,MAAOA,EAAKO,UACDtB,EACCuB,WAAAtB,aACAC,EAASsB,WACTrB,EACGsB,cAAArB,KAGjBM,EAEAU,gBAACU,EAAEd,EAAA,CAAA,EACGE,EACJ,CAAAH,MAAOA,EAAKO,UACDtB,EACCuB,WAAAtB,aACAC,EAASsB,WACTrB,EACGsB,cAAArB,KAInBgB,gBAACM,EAAEV,EAAA,CAAA,EACGE,EACJ,CAAAH,MAAOA,EAAKO,UACDtB,EACCuB,WAAAtB,aACAC,EAASsB,WACTrB,EACGsB,cAAArB,IAGrB"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Heading/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type ElementType } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\n\nimport {\n  type FontSizeType,\n  type WordBreakType,\n  type OverflowWrapType,\n} from \"../../types\";\nimport { H1, H2, H3, H4, H5, H6 } from \"./styles\";\n\nexport type HeadingProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    h1?: boolean;\n    h2?: boolean;\n    h3?: boolean;\n    h4?: boolean;\n    h5?: boolean;\n    h6?: boolean;\n    /** font size FontSizeType t-shirt sizes  */\n    textSize?: FontSizeType;\n    /** horizontal alignment of text */\n    textAlign?: \"left\" | \"right\" | \"center\";\n    /** color of text */\n    textColor?: string;\n    /** word-break behavior */\n    wordBreak?: WordBreakType;\n    /** overflow-wrap behavior */\n    overflowWrap?: OverflowWrapType;\n    /** styled-component polymorphic feature so you take the styling of a header and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n * \n * Use headings consistently to create a clear hierarchy throughout your service.\nMarkup headings semantically using the appropriate <h#> level HTML element and\nuse the corresponding heading class (h1, h2, h3, ....). Write all headings in sentence case. Heading differs from the Text component by using a different font-family and it changes the font size according to the screen width breakpoints.\n * \n */\nexport function Heading({\n  textSize,\n  textAlign,\n  textColor,\n  wordBreak,\n  overflowWrap,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  ...props\n}: HeadingProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const propsConvertedToInternalSpacingProps =\n    spacingPropsToSpacingPropsInternal(props);\n\n  if (h1)\n    return (\n      <H1\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h2)\n    return (\n      <H2\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h3)\n    return (\n      <H3\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h4)\n    return (\n      <H4\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h5)\n    return (\n      <H5\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h6)\n    return (\n      <H6\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  return (\n    <H2\n      {...propsConvertedToInternalSpacingProps}\n      theme={theme}\n      $textSize={textSize}\n      $textAlign={textAlign}\n      $textColor={textColor}\n      $wordBreak={wordBreak}\n      $overflowWrap={overflowWrap}\n    />\n  );\n}\n\nexport default Heading;\n"],"names":["Heading","_a","textSize","textAlign","textColor","wordBreak","overflowWrap","h1","h2","h3","h4","h5","h6","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","propsConvertedToInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","H1","$textSize","$textAlign","$wordBreak","$overflowWrap","H2","H3","H4","H5","H6"],"mappings":"qVA6CM,SAAUA,EAAQC,GACtB,IAAAC,EAAQD,EAAAC,SACRC,EAASF,EAAAE,UACTC,EAASH,EAAAG,UACTC,cACAC,EAAYL,EAAAK,aACZC,EAAEN,EAAAM,GACFC,EAAEP,EAAAO,GACFC,EAAER,EAAAQ,GACFC,OACAC,EAAEV,EAAAU,GACFC,EAAEX,EAAAW,GACCC,EAAKC,EAAAb,EAZc,+FAchBc,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGCK,EACJC,EAAmCR,GAErC,OAAIN,EAEAe,gBAACC,EAAEL,EAAA,CAAA,EACGE,EAAoC,CACxCH,MAAOA,EAAKO,UACDtB,EAAQuB,WACPtB,aACAC,EAASsB,WACTrB,EAASsB,cACNrB,KAGjBE,EAEAc,gBAACM,EAAEV,EAAA,CAAA,EACGE,EAAoC,CACxCH,MAAOA,EAAKO,UACDtB,EAAQuB,WACPtB,aACAC,EAASsB,WACTrB,EAASsB,cACNrB,KAGjBG,EAEAa,gBAACO,EAAEX,EAAA,CAAA,EACGE,EAAoC,CACxCH,MAAOA,EAAKO,UACDtB,EAAQuB,WACPtB,aACAC,EAASsB,WACTrB,EAASsB,cACNrB,KAGjBI,EAEAY,gBAACQ,EAAEZ,EAAA,CAAA,EACGE,EAAoC,CACxCH,MAAOA,EAAKO,UACDtB,EAAQuB,WACPtB,aACAC,EAASsB,WACTrB,EAASsB,cACNrB,KAGjBK,EAEAW,gBAACS,EAAEb,EAAA,CAAA,EACGE,EAAoC,CACxCH,MAAOA,EAAKO,UACDtB,EAAQuB,WACPtB,aACAC,EAASsB,WACTrB,EAASsB,cACNrB,KAGjBM,EAEAU,gBAACU,EAAEd,EAAA,CAAA,EACGE,EAAoC,CACxCH,MAAOA,EAAKO,UACDtB,EAAQuB,WACPtB,aACAC,EAASsB,WACTrB,EAASsB,cACNrB,KAInBgB,gBAACM,EAAEV,EAAA,CAAA,EACGE,EAAoC,CACxCH,MAAOA,EAAKO,UACDtB,EAAQuB,WACPtB,aACAC,EAASsB,WACTrB,EAASsB,cACNrB,IAGrB"}

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n,__rest as t}from"../../../node_modules/tslib/tslib.es6.js";import e,{css as i}from"styled-components";import{spacing as r}from"../Spacing/index.js";var o,f,m,a,u,s,l,x=function(e){return i(o||(o=n(["\n  font-family: ",";\n  font-weight: ",";\n  word-break: ",";\n  overflow-wrap: ",";\n  color: ",";\n  line-height: ",";\n  text-transform: ",";\n  margin-top: ",";\n  margin-bottom: ",";\n  max-width: 100%;\n  text-align: ",";\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  ","\n"],["\n  font-family: ",";\n  font-weight: ",";\n  word-break: ",";\n  overflow-wrap: ",";\n  color: ",";\n  line-height: ",";\n  text-transform: ",";\n  margin-top: ",";\n  margin-bottom: ",";\n  max-width: 100%;\n  text-align: ",";\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  ","\n"])),e.theme.typography.fontFamilyHeadings,e.theme.typography.fontWeightHeadings,e.$wordBreak||"normal",e.$overflowWrap||"break-word",e.$textColor&&void 0!==e.theme.colors[e.$textColor]?e.theme.colors[e.$textColor]:e.$textColor||e.theme.colors.textHeaderDefault,e.theme.typography.headerLineHeight,e.theme.typography.headerTextTransform,e.theme.spacing.m,e.theme.spacing.s,e.$textAlign||"left",(function(){e.theme;var n=t(e,["theme"]);return r(n,e.theme)}))},h=function(n,t,e){switch(n){case"m":return e.fontSizes.m;case"l":return e.fontSizes.l;case"xl":return e.fontSizes.xl;case"xxl":return e.fontSizes.xxl;case"xxxl":return e.fontSizes.xxxl;case"xxxxl":return e.fontSizes.xxxxl;default:return t}},z=function(n,t,e){switch(n){case"m":return e.fontSizes.m;case"l":case"xl":return e.fontSizes.l;case"xxl":return e.fontSizes.xl;case"xxxl":return e.fontSizes.xxl;case"xxxxl":return e.fontSizes.xxxl;default:return t}},d=function(n,t,e){switch(n){case"m":return e.fontSizes.m;case"l":case"xl":case"xxl":return e.fontSizes.l;case"xxxl":return e.fontSizes.xl;case"xxxxl":return e.fontSizes.xxl;default:return t}},c=e.h1(f||(f=n(["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),(function(n){return x(n)}),(function(n){var t=n.theme,e=n.$textSize;return d(e||null,t.fontSizes.xxl,t)}),(function(n){return n.theme.breakpoint.tablet}),(function(n){var t=n.theme,e=n.$textSize;return z(e||null,t.fontSizes.xxxl,t)}),(function(n){return n.theme.breakpoint.desktop}),(function(n){var t=n.theme,e=n.$textSize;return h(e||null,t.fontSizes.xxxxl,t)})),S=e.h2(m||(m=n(["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),(function(n){return x(n)}),(function(n){var t=n.theme,e=n.$textSize;return d(e||null,t.fontSizes.xl,t)}),(function(n){return n.theme.breakpoint.tablet}),(function(n){var t=n.theme,e=n.$textSize;return z(e||null,t.fontSizes.xxl,t)}),(function(n){return n.theme.breakpoint.desktop}),(function(n){var t=n.theme,e=n.$textSize;return h(e||null,t.fontSizes.xxxl,t)})),p=e.h3(a||(a=n(["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),(function(n){return x(n)}),(function(n){var t=n.theme,e=n.$textSize;return d(e||null,t.fontSizes.l,t)}),(function(n){return n.theme.breakpoint.tablet}),(function(n){var t=n.theme,e=n.$textSize;return z(e||null,t.fontSizes.xl,t)}),(function(n){return n.theme.breakpoint.desktop}),(function(n){var t=n.theme,e=n.$textSize;return h(e||null,t.fontSizes.xxl,t)})),w=e.h4(u||(u=n(["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),(function(n){return x(n)}),(function(n){var t=n.theme,e=n.$textSize;return d(e||null,t.fontSizes.l,t)}),(function(n){return n.theme.breakpoint.tablet}),(function(n){var t=n.theme,e=n.$textSize;return z(e||null,t.fontSizes.l,t)}),(function(n){return n.theme.breakpoint.desktop}),(function(n){var t=n.theme,e=n.$textSize;return h(e||null,t.fontSizes.xl,t)})),b=e.h5(s||(s=n(["\n  ","\n\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  ","\n\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),(function(n){return x(n)}),(function(n){var t=n.theme,e=n.$textSize;return d(e||null,t.fontSizes.l,t)}),(function(n){return n.theme.breakpoint.tablet}),(function(n){var t=n.theme,e=n.$textSize;return z(e||null,t.fontSizes.l,t)}),(function(n){return n.theme.breakpoint.desktop}),(function(n){var t=n.theme,e=n.$textSize;return h(e||null,t.fontSizes.l,t)})),$=e.h6(l||(l=n(["\n  ","\n\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  ","\n\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),(function(n){return x(n)}),(function(n){var t=n.theme,e=n.$textSize;return d(e||null,t.fontSizes.m,t)}),(function(n){return n.theme.breakpoint.tablet}),(function(n){var t=n.theme,e=n.$textSize;return z(e||null,t.fontSizes.m,t)}),(function(n){return n.theme.breakpoint.desktop}),(function(n){var t=n.theme,e=n.$textSize;return h(e||null,t.fontSizes.m,t)}));export{c as H1,S as H2,p as H3,w as H4,b as H5,$ as H6};
+import{__makeTemplateObject as n,__rest as t}from"../../../node_modules/tslib/tslib.es6.js";import e,{css as i}from"styled-components";import{spacing as r}from"../Spacing/index.js";var o,f,m,a,u,s,l,x=function(e){return i(o||(o=n(["\n  font-family: ",";\n  font-weight: ",";\n  word-break: ",";\n  overflow-wrap: ",";\n  color: ",";\n  line-height: ",";\n  text-transform: ",";\n  margin-top: ",";\n  margin-bottom: ",";\n  max-width: 100%;\n  text-align: ",";\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  ","\n"],["\n  font-family: ",";\n  font-weight: ",";\n  word-break: ",";\n  overflow-wrap: ",";\n  color: ",";\n  line-height: ",";\n  text-transform: ",";\n  margin-top: ",";\n  margin-bottom: ",";\n  max-width: 100%;\n  text-align: ",";\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  ","\n"])),e.theme.typography.fontFamilyHeadings,e.theme.typography.fontWeightHeadings,e.$wordBreak||"normal",e.$overflowWrap||"break-word",e.$textColor&&void 0!==e.theme.colors[e.$textColor]?e.theme.colors[e.$textColor]:e.$textColor||e.theme.colors.textHeaderDefault,e.theme.typography.headerLineHeight,e.theme.typography.headerTextTransform,e.theme.spacing.m,e.theme.spacing.s,e.$textAlign||"left",function(){e.theme;var n=t(e,["theme"]);return r(n,e.theme)})},h=function(n,t,e){switch(n){case"m":return e.fontSizes.m;case"l":return e.fontSizes.l;case"xl":return e.fontSizes.xl;case"xxl":return e.fontSizes.xxl;case"xxxl":return e.fontSizes.xxxl;case"xxxxl":return e.fontSizes.xxxxl;default:return t}},z=function(n,t,e){switch(n){case"m":return e.fontSizes.m;case"l":case"xl":return e.fontSizes.l;case"xxl":return e.fontSizes.xl;case"xxxl":return e.fontSizes.xxl;case"xxxxl":return e.fontSizes.xxxl;default:return t}},d=function(n,t,e){switch(n){case"m":return e.fontSizes.m;case"l":case"xl":case"xxl":return e.fontSizes.l;case"xxxl":return e.fontSizes.xl;case"xxxxl":return e.fontSizes.xxl;default:return t}},c=e.h1(f||(f=n(["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),function(n){return x(n)},function(n){var t=n.theme,e=n.$textSize;return d(e||null,t.fontSizes.xxl,t)},function(n){return n.theme.breakpoint.tablet},function(n){var t=n.theme,e=n.$textSize;return z(e||null,t.fontSizes.xxxl,t)},function(n){return n.theme.breakpoint.desktop},function(n){var t=n.theme,e=n.$textSize;return h(e||null,t.fontSizes.xxxxl,t)}),S=e.h2(m||(m=n(["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),function(n){return x(n)},function(n){var t=n.theme,e=n.$textSize;return d(e||null,t.fontSizes.xl,t)},function(n){return n.theme.breakpoint.tablet},function(n){var t=n.theme,e=n.$textSize;return z(e||null,t.fontSizes.xxl,t)},function(n){return n.theme.breakpoint.desktop},function(n){var t=n.theme,e=n.$textSize;return h(e||null,t.fontSizes.xxxl,t)}),p=e.h3(a||(a=n(["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),function(n){return x(n)},function(n){var t=n.theme,e=n.$textSize;return d(e||null,t.fontSizes.l,t)},function(n){return n.theme.breakpoint.tablet},function(n){var t=n.theme,e=n.$textSize;return z(e||null,t.fontSizes.xl,t)},function(n){return n.theme.breakpoint.desktop},function(n){var t=n.theme,e=n.$textSize;return h(e||null,t.fontSizes.xxl,t)}),w=e.h4(u||(u=n(["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  ","\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),function(n){return x(n)},function(n){var t=n.theme,e=n.$textSize;return d(e||null,t.fontSizes.l,t)},function(n){return n.theme.breakpoint.tablet},function(n){var t=n.theme,e=n.$textSize;return z(e||null,t.fontSizes.l,t)},function(n){return n.theme.breakpoint.desktop},function(n){var t=n.theme,e=n.$textSize;return h(e||null,t.fontSizes.xl,t)}),b=e.h5(s||(s=n(["\n  ","\n\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  ","\n\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),function(n){return x(n)},function(n){var t=n.theme,e=n.$textSize;return d(e||null,t.fontSizes.l,t)},function(n){return n.theme.breakpoint.tablet},function(n){var t=n.theme,e=n.$textSize;return z(e||null,t.fontSizes.l,t)},function(n){return n.theme.breakpoint.desktop},function(n){var t=n.theme,e=n.$textSize;return h(e||null,t.fontSizes.l,t)}),$=e.h6(l||(l=n(["\n  ","\n\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  ","\n\n  font-size: ",";\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),function(n){return x(n)},function(n){var t=n.theme,e=n.$textSize;return d(e||null,t.fontSizes.m,t)},function(n){return n.theme.breakpoint.tablet},function(n){var t=n.theme,e=n.$textSize;return z(e||null,t.fontSizes.m,t)},function(n){return n.theme.breakpoint.desktop},function(n){var t=n.theme,e=n.$textSize;return h(e||null,t.fontSizes.m,t)});export{c as H1,S as H2,p as H3,w as H4,b as H5,$ as H6};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Heading/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\n\nimport {\n  type ThemeType,\n  type FontSizeType,\n  type ColorKeyType,\n  type WordBreakType,\n  type OverflowWrapType,\n} from \"../../types\";\n\ntype StyledHeadingProps = SpacingPropsInternal & {\n  theme: ThemeType;\n  $textSize?: FontSizeType;\n  $textAlign?: \"left\" | \"right\" | \"center\";\n  $textColor?: string;\n  $wordBreak?: WordBreakType;\n  $overflowWrap?: OverflowWrapType;\n};\n\nconst StyledHeading = (props: StyledHeadingProps) => css`\n  font-family: ${props.theme.typography.fontFamilyHeadings};\n  font-weight: ${props.theme.typography.fontWeightHeadings};\n  word-break: ${props.$wordBreak || \"normal\"};\n  overflow-wrap: ${props.$overflowWrap || \"break-word\"};\n  color: ${props.$textColor &&\n  typeof props.theme.colors[props.$textColor as ColorKeyType] !== \"undefined\"\n    ? props.theme.colors[props.$textColor as ColorKeyType]\n    : props.$textColor || props.theme.colors.textHeaderDefault};\n  line-height: ${props.theme.typography.headerLineHeight};\n  text-transform: ${props.theme.typography.headerTextTransform};\n  margin-top: ${props.theme.spacing.m};\n  margin-bottom: ${props.theme.spacing.s};\n  max-width: 100%;\n  text-align: ${props.$textAlign || \"left\"};\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  ${() => {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { theme, ...propsWithoutTheme } = props;\n\n    return spacing(propsWithoutTheme, props.theme);\n  }}\n`;\n\nconst desktopFontSize = (\n  $textSize: FontSizeType | null,\n  defaultFontSize: string,\n  theme: ThemeType,\n) => {\n  switch ($textSize) {\n    case \"m\":\n      return theme.fontSizes.m;\n    case \"l\":\n      return theme.fontSizes.l;\n    case \"xl\":\n      return theme.fontSizes.xl;\n    case \"xxl\":\n      return theme.fontSizes.xxl;\n    case \"xxxl\":\n      return theme.fontSizes.xxxl;\n    case \"xxxxl\":\n      return theme.fontSizes.xxxxl;\n\n    default:\n      return defaultFontSize;\n  }\n};\n\n// everything drops down a size on the typography scale\nconst tabletFontSize = (\n  $textSize: FontSizeType | null,\n  defaultFontSize: string,\n  theme: ThemeType,\n) => {\n  switch ($textSize) {\n    case \"m\":\n      return theme.fontSizes.m;\n    case \"l\":\n      return theme.fontSizes.l;\n    case \"xl\":\n      return theme.fontSizes.l;\n    case \"xxl\":\n      return theme.fontSizes.xl;\n    case \"xxxl\":\n      return theme.fontSizes.xxl;\n    case \"xxxxl\":\n      return theme.fontSizes.xxxl;\n\n    default:\n      return defaultFontSize;\n  }\n};\n\n// everything drops down two sizes on the typography scale\nconst mobileFontSize = (\n  $textSize: FontSizeType | null,\n  defaultFontSize: string,\n  theme: ThemeType,\n) => {\n  switch ($textSize) {\n    case \"m\":\n      return theme.fontSizes.m;\n    case \"l\":\n      return theme.fontSizes.l;\n    case \"xl\":\n      return theme.fontSizes.l;\n    case \"xxl\":\n      return theme.fontSizes.l;\n    case \"xxxl\":\n      return theme.fontSizes.xl;\n    case \"xxxxl\":\n      return theme.fontSizes.xxl;\n\n    default:\n      return defaultFontSize;\n  }\n};\n\nexport const H1 = styled.h1<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.xxl, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.xxxl, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xxxxl, theme)};\n  }\n`;\n\nexport const H2 = styled.h2<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.xl, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.xxl, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xxxl, theme)};\n  }\n`;\n\nexport const H3 = styled.h3<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.l, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.xl, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xxl, theme)};\n  }\n`;\n\nexport const H4 = styled.h4<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.l, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.l, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xl, theme)};\n  }\n`;\n\nexport const H5 = styled.h5<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.l, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.l, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.l, theme)};\n  }\n`;\n\nexport const H6 = styled.h6<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.m, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.m, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.m, theme)};\n  }\n`;\n"],"names":["StyledHeading","props","css","templateObject_1","__makeTemplateObject","theme","typography","fontFamilyHeadings","fontWeightHeadings","$wordBreak","$overflowWrap","$textColor","colors","textHeaderDefault","headerLineHeight","headerTextTransform","spacing","m","s","$textAlign","propsWithoutTheme","__rest","desktopFontSize","$textSize","defaultFontSize","fontSizes","l","xl","xxl","xxxl","xxxxl","tabletFontSize","mobileFontSize","H1","styled","h1","templateObject_2","_a","breakpoint","tablet","desktop","H2","h2","templateObject_3","H3","h3","templateObject_4","H4","h4","templateObject_5","H5","h5","templateObject_6","H6","h6","templateObject_7"],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Heading/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\n\nimport {\n  type ThemeType,\n  type FontSizeType,\n  type ColorKeyType,\n  type WordBreakType,\n  type OverflowWrapType,\n} from \"../../types\";\n\ntype StyledHeadingProps = SpacingPropsInternal & {\n  theme: ThemeType;\n  $textSize?: FontSizeType;\n  $textAlign?: \"left\" | \"right\" | \"center\";\n  $textColor?: string;\n  $wordBreak?: WordBreakType;\n  $overflowWrap?: OverflowWrapType;\n};\n\nconst StyledHeading = (props: StyledHeadingProps) => css`\n  font-family: ${props.theme.typography.fontFamilyHeadings};\n  font-weight: ${props.theme.typography.fontWeightHeadings};\n  word-break: ${props.$wordBreak || \"normal\"};\n  overflow-wrap: ${props.$overflowWrap || \"break-word\"};\n  color: ${props.$textColor &&\n  typeof props.theme.colors[props.$textColor as ColorKeyType] !== \"undefined\"\n    ? props.theme.colors[props.$textColor as ColorKeyType]\n    : props.$textColor || props.theme.colors.textHeaderDefault};\n  line-height: ${props.theme.typography.headerLineHeight};\n  text-transform: ${props.theme.typography.headerTextTransform};\n  margin-top: ${props.theme.spacing.m};\n  margin-bottom: ${props.theme.spacing.s};\n  max-width: 100%;\n  text-align: ${props.$textAlign || \"left\"};\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  ${() => {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { theme, ...propsWithoutTheme } = props;\n\n    return spacing(propsWithoutTheme, props.theme);\n  }}\n`;\n\nconst desktopFontSize = (\n  $textSize: FontSizeType | null,\n  defaultFontSize: string,\n  theme: ThemeType,\n) => {\n  switch ($textSize) {\n    case \"m\":\n      return theme.fontSizes.m;\n    case \"l\":\n      return theme.fontSizes.l;\n    case \"xl\":\n      return theme.fontSizes.xl;\n    case \"xxl\":\n      return theme.fontSizes.xxl;\n    case \"xxxl\":\n      return theme.fontSizes.xxxl;\n    case \"xxxxl\":\n      return theme.fontSizes.xxxxl;\n\n    default:\n      return defaultFontSize;\n  }\n};\n\n// everything drops down a size on the typography scale\nconst tabletFontSize = (\n  $textSize: FontSizeType | null,\n  defaultFontSize: string,\n  theme: ThemeType,\n) => {\n  switch ($textSize) {\n    case \"m\":\n      return theme.fontSizes.m;\n    case \"l\":\n      return theme.fontSizes.l;\n    case \"xl\":\n      return theme.fontSizes.l;\n    case \"xxl\":\n      return theme.fontSizes.xl;\n    case \"xxxl\":\n      return theme.fontSizes.xxl;\n    case \"xxxxl\":\n      return theme.fontSizes.xxxl;\n\n    default:\n      return defaultFontSize;\n  }\n};\n\n// everything drops down two sizes on the typography scale\nconst mobileFontSize = (\n  $textSize: FontSizeType | null,\n  defaultFontSize: string,\n  theme: ThemeType,\n) => {\n  switch ($textSize) {\n    case \"m\":\n      return theme.fontSizes.m;\n    case \"l\":\n      return theme.fontSizes.l;\n    case \"xl\":\n      return theme.fontSizes.l;\n    case \"xxl\":\n      return theme.fontSizes.l;\n    case \"xxxl\":\n      return theme.fontSizes.xl;\n    case \"xxxxl\":\n      return theme.fontSizes.xxl;\n\n    default:\n      return defaultFontSize;\n  }\n};\n\nexport const H1 = styled.h1<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.xxl, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.xxxl, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xxxxl, theme)};\n  }\n`;\n\nexport const H2 = styled.h2<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.xl, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.xxl, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xxxl, theme)};\n  }\n`;\n\nexport const H3 = styled.h3<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.l, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.xl, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xxl, theme)};\n  }\n`;\n\nexport const H4 = styled.h4<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.l, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.l, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.xl, theme)};\n  }\n`;\n\nexport const H5 = styled.h5<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.l, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.l, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.l, theme)};\n  }\n`;\n\nexport const H6 = styled.h6<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n\n  font-size: ${({ theme, $textSize }) =>\n    mobileFontSize($textSize || null, theme.fontSizes.m, theme)};\n  @media (min-width: ${({ theme }) => theme.breakpoint.tablet}) {\n    font-size: ${({ theme, $textSize }) =>\n      tabletFontSize($textSize || null, theme.fontSizes.m, theme)};\n  }\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    font-size: ${({ theme, $textSize }) =>\n      desktopFontSize($textSize || null, theme.fontSizes.m, theme)};\n  }\n`;\n"],"names":["StyledHeading","props","css","templateObject_1","__makeTemplateObject","theme","typography","fontFamilyHeadings","fontWeightHeadings","$wordBreak","$overflowWrap","$textColor","colors","textHeaderDefault","headerLineHeight","headerTextTransform","spacing","m","s","$textAlign","propsWithoutTheme","__rest","desktopFontSize","$textSize","defaultFontSize","fontSizes","l","xl","xxl","xxxl","xxxxl","tabletFontSize","mobileFontSize","H1","styled","h1","templateObject_2","_a","breakpoint","tablet","desktop","H2","h2","templateObject_3","H3","h3","templateObject_4","H4","h4","templateObject_5","H5","h5","templateObject_6","H6","h6","templateObject_7"],"mappings":"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"}

package/lib/{components → src/components}/IconFa/IconFa.stories.d.ts

@@ -1,4 +1,4 @@
-import { type StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react-vite";
 import { IconFa } from "..";
 declare const _default: {
     title: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/IconFa/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { type IconDefinition } from \"@fortawesome/fontawesome-common-types\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StyledIcon } from \"./styles\";\nimport { themeColorOrString, themeSizeOrString } from \"../../utils/themeUtils\";\n\nexport type IconFaProps = {\n  /** imported icon definition from \"@fortawesome/free-solid-svg-icons\" or \"@fortawesome/free-brands-svg-icons\" */\n  faIcon: IconDefinition;\n  /** color of icon, inherits current text colour by default */\n  color?: string;\n  /** size of ion 1.1em by default */\n  size?: string;\n};\n\n/**\n * The IconFa component (Icon Font Awesome) displays an icon glyph as an `<svg>` element.\n *\n * This is an svg icon wrapper where a font awesome icon definition can be passed in a long with colour and size\n * */\nexport function IconFa({ faIcon, color, size = \"1.1rem\" }: IconFaProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const [width, height, , , svgPathData] = faIcon.icon;\n\n  return (\n    <StyledIcon\n      theme={theme}\n      role=\"presentation\"\n      viewBox={`0 0 ${width} ${height}`}\n      $size={themeSizeOrString(size, theme)}\n      $color={themeColorOrString(color, theme)}\n    >\n      {svgPathData && <path d={svgPathData as string} />}\n    </StyledIcon>\n  );\n}\n\nexport default IconFa;\n"],"names":["IconFa","_a","faIcon","color","_b","size","undefined","foundTheme","useTheme","theme","__assign","defaultTheme","_c","icon","width","height","svgPathData","React","createElement","StyledIcon","role","viewBox","concat","$size","themeSizeOrString","$color","themeColorOrString","d"],"mappings":"sTAsBM,SAAUA,EAAOC,OAAEC,EAAMD,EAAAC,OAAEC,EAAKF,EAAAE,MAAEC,SAAAC,OAAOC,IAAAF,EAAA,SAAQA,EAC/CG,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAmCV,EAAOW,KAAzCC,EAAKF,EAAA,GAAEG,EAAMH,EAAA,GAAMI,OAE1B,OACEC,EAACC,cAAAC,GACCV,MAAOA,EACPW,KAAK,eACLC,QAAS,OAAAC,OAAOR,EAAS,KAAAQ,OAAAP,GAClBQ,MAAAC,EAAkBnB,EAAMI,GAAMgB,OAC7BC,EAAmBvB,EAAOM,IAEjCO,GAAeC,wBAAMU,EAAGX,IAG/B"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/IconFa/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { type IconDefinition } from \"@fortawesome/fontawesome-common-types\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StyledIcon } from \"./styles\";\nimport { themeColorOrString, themeSizeOrString } from \"../../utils/themeUtils\";\n\nexport type IconFaProps = {\n  /** imported icon definition from \"@fortawesome/free-solid-svg-icons\" or \"@fortawesome/free-brands-svg-icons\" */\n  faIcon: IconDefinition;\n  /** color of icon, inherits current text colour by default */\n  color?: string;\n  /** size of ion 1.1em by default */\n  size?: string;\n};\n\n/**\n * The IconFa component (Icon Font Awesome) displays an icon glyph as an `<svg>` element.\n *\n * This is an svg icon wrapper where a font awesome icon definition can be passed in a long with colour and size\n * */\nexport function IconFa({ faIcon, color, size = \"1.1rem\" }: IconFaProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const [width, height, , , svgPathData] = faIcon.icon;\n\n  return (\n    <StyledIcon\n      theme={theme}\n      role=\"presentation\"\n      viewBox={`0 0 ${width} ${height}`}\n      $size={themeSizeOrString(size, theme)}\n      $color={themeColorOrString(color, theme)}\n    >\n      {svgPathData && <path d={svgPathData as string} />}\n    </StyledIcon>\n  );\n}\n\nexport default IconFa;\n"],"names":["IconFa","_a","faIcon","color","_b","size","foundTheme","useTheme","theme","__assign","defaultTheme","_c","icon","width","height","svgPathData","React","createElement","StyledIcon","role","viewBox","concat","$size","themeSizeOrString","$color","themeColorOrString","d"],"mappings":"sTAsBM,SAAUA,EAAOC,OAAEC,EAAMD,EAAAC,OAAEC,EAAKF,EAAAE,MAAEC,SAAAC,OAAI,IAAAD,EAAG,SAAQA,EAC/CE,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAECK,EAAmCT,EAAOU,KAAzCC,EAAKF,EAAA,GAAEG,EAAMH,EAAA,GAAMI,OAE1B,OACEC,EAAAC,cAACC,GACCV,MAAOA,EACPW,KAAK,eACLC,QAAS,OAAAC,OAAOR,EAAK,KAAAQ,OAAIP,GAAQQ,MAC1BC,EAAkBlB,EAAMG,GAAMgB,OAC7BC,EAAmBtB,EAAOK,IAEjCO,GAAeC,wBAAMU,EAAGX,IAG/B"}

package/lib/src/components/IconFa/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=i.svg(t||(t=n(["\n  display: inline-block;\n  height: ",";\n  margin-top: -0.2em;\n  vertical-align: middle;\n  width: ",";\n  path {\n    fill: ",";\n  }\n"],["\n  display: inline-block;\n  height: ",";\n  margin-top: -0.2em;\n  vertical-align: middle;\n  width: ",";\n  path {\n    fill: ",";\n  }\n"])),(function(n){return n.$size}),(function(n){return n.$size}),(function(n){return n.$color}));export{e as StyledIcon,e as default};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import i from"styled-components";var t,e=i.svg(t||(t=n(["\n  display: inline-block;\n  height: ",";\n  margin-top: -0.2em;\n  vertical-align: middle;\n  width: ",";\n  path {\n    fill: ",";\n  }\n"],["\n  display: inline-block;\n  height: ",";\n  margin-top: -0.2em;\n  vertical-align: middle;\n  width: ",";\n  path {\n    fill: ",";\n  }\n"])),function(n){return n.$size},function(n){return n.$size},function(n){return n.$color});export{e as StyledIcon,e as default};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/IconFa/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StyledIcon = styled.svg<{\n  theme: ThemeType;\n  $color?: string;\n  $size: string;\n}>`\n  display: inline-block;\n  height: ${({ $size }) => $size};\n  margin-top: -0.2em;\n  vertical-align: middle;\n  width: ${({ $size }) => $size};\n  path {\n    fill: ${({ $color }) => $color};\n  }\n`;\n\nexport default StyledIcon;\n"],"names":["StyledIcon","styled","svg","templateObject_1","__makeTemplateObject","_a","$size","$color"],"mappings":"iHAGa,MAAAA,EAAaC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yCAAA,iEAAA,0BAAA,YAAA,CAIlC,yCAE8B,iEAGD,0BAEG,eALtB,SAACC,GAAc,OAAPA,EAAAC,KAAO,IAGhB,SAACD,GAAc,OAAPA,EAAAC,KAAO,IAEd,SAACD,GAAe,OAAPA,EAAAE,MAAO"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/IconFa/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StyledIcon = styled.svg<{\n  theme: ThemeType;\n  $color?: string;\n  $size: string;\n}>`\n  display: inline-block;\n  height: ${({ $size }) => $size};\n  margin-top: -0.2em;\n  vertical-align: middle;\n  width: ${({ $size }) => $size};\n  path {\n    fill: ${({ $color }) => $color};\n  }\n`;\n\nexport default StyledIcon;\n"],"names":["StyledIcon","styled","svg","templateObject_1","__makeTemplateObject","_a","$size","$color"],"mappings":"iHAGO,MAAMA,EAAaC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yCAAA,iEAAA,0BAAA,YAAA,CAIlC,yCAE8B,iEAGD,0BAEG,cALtB,SAACC,GAAc,OAAPA,EAAAC,KAAO,EAGhB,SAACD,GAAc,OAAPA,EAAAC,KAAO,EAEd,SAACD,GAAe,OAAPA,EAAAE,MAAO"}

package/lib/{components → src/components}/InfoBox/InfoBox.stories.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react-vite";
 import InfoBox from ".";
 declare const _default: {
     title: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/InfoBox/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { Box } from \"../Box\";\nimport { Text } from \"../Text\";\nimport { Heading } from \"../Heading\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledInfoBox } from \"./styles\";\n\nexport type InfoBoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of wrapping element, this will add default padding */\n    backgroundColor?: string;\n    /** Title text */\n    titleText: string;\n    /** Title text colour */\n    titleTextColor?: string;\n    /** Description text */\n    descriptionText: string;\n    /** Description text colour */\n    descriptionTextColor?: string;\n    /** Space for extra element underneath description */\n    children?: ReactNode;\n    /** Icon in left column usually 2em squared */\n    icon?: ReactNode;\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n   * Box is used to wrap other components to add margin and padding. The values will be in the t-shirt sizes specified in the theme sizes.\n  \n  The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n   */\nexport const InfoBox = ({\n  children,\n  titleText,\n  titleTextColor,\n  descriptionText,\n  descriptionTextColor,\n  icon,\n  ref,\n  ...spacingAndHTMLElementProps\n}: InfoBoxProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const backgroundColorOrDefault =\n    spacingAndHTMLElementProps.backgroundColor || theme.tokenColors.grey_200;\n\n  return (\n    <StyledInfoBox\n      theme={theme}\n      {...spacingAndHTMLElementProps}\n      backgroundColor={backgroundColorOrDefault}\n      margin={spacingAndHTMLElementProps.margin || \"none\"}\n      ref={ref}\n    >\n      {icon && <Box marginRight=\"s\">{icon}</Box>}\n      <div>\n        {titleText && (\n          <Heading\n            as=\"p\"\n            margin=\"none\"\n            h4\n            marginBottom=\"xxs\"\n            textColor={titleTextColor || theme.colors.textDark}\n          >\n            {titleText}\n          </Heading>\n        )}\n        {descriptionText && (\n          <Text\n            textColor={descriptionTextColor || theme.colors.textDark}\n            marginBottom=\"none\"\n          >\n            {descriptionText}\n          </Text>\n        )}\n        {children}\n      </div>\n    </StyledInfoBox>\n  );\n};\n\nexport default InfoBox;\n"],"names":["InfoBox","_a","children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","ref","spacingAndHTMLElementProps","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","backgroundColorOrDefault","backgroundColor","tokenColors","grey_200","React","createElement","StyledInfoBox","margin","Box","marginRight","Heading","as","h4","marginBottom","textColor","colors","textDark","Text"],"mappings":"2WA0CO,IAAMA,EAAU,SAACC,GACtB,IAAAC,EAAQD,EAAAC,SACRC,EAASF,EAAAE,UACTC,EAAcH,EAAAG,eACdC,EAAeJ,EAAAI,gBACfC,EAAoBL,EAAAK,qBACpBC,EAAIN,EAAAM,KACJC,QACGC,EARmBC,EAAAT,EAAA,CAAA,WAAA,YAAA,iBAAA,kBAAA,uBAAA,OAAA,QAUhBU,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACJP,EAA2BQ,iBAAmBJ,EAAMK,YAAYC,SAElE,OACEC,EAACC,cAAAC,EACCR,EAAA,CAAAD,MAAOA,GACHJ,EAA0B,CAC9BQ,gBAAiBD,EACjBO,OAAQd,EAA2Bc,QAAU,OAC7Cf,IAAKA,IAEJD,GAAQa,gBAACI,EAAG,CAACC,YAAY,KAAKlB,GAC/Ba,EAAAC,cAAA,MAAA,KACGlB,GACCiB,EAACC,cAAAK,EACC,CAAAC,GAAG,IACHJ,OAAO,OACPK,IAAE,EACFC,aAAa,MACbC,UAAW1B,GAAkBS,EAAMkB,OAAOC,UAEzC7B,GAGJE,GACCe,EAACC,cAAAY,GACCH,UAAWxB,GAAwBO,EAAMkB,OAAOC,SAChDH,aAAa,QAEZxB,GAGJH,GAIT"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/InfoBox/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { Box } from \"../Box\";\nimport { Text } from \"../Text\";\nimport { Heading } from \"../Heading\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledInfoBox } from \"./styles\";\n\nexport type InfoBoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of wrapping element, this will add default padding */\n    backgroundColor?: string;\n    /** Title text */\n    titleText: string;\n    /** Title text colour */\n    titleTextColor?: string;\n    /** Description text */\n    descriptionText: string;\n    /** Description text colour */\n    descriptionTextColor?: string;\n    /** Space for extra element underneath description */\n    children?: ReactNode;\n    /** Icon in left column usually 2em squared */\n    icon?: ReactNode;\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n   * Box is used to wrap other components to add margin and padding. The values will be in the t-shirt sizes specified in the theme sizes.\n  \n  The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n   */\nexport const InfoBox = ({\n  children,\n  titleText,\n  titleTextColor,\n  descriptionText,\n  descriptionTextColor,\n  icon,\n  ref,\n  ...spacingAndHTMLElementProps\n}: InfoBoxProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const backgroundColorOrDefault =\n    spacingAndHTMLElementProps.backgroundColor || theme.tokenColors.grey_200;\n\n  return (\n    <StyledInfoBox\n      theme={theme}\n      {...spacingAndHTMLElementProps}\n      backgroundColor={backgroundColorOrDefault}\n      margin={spacingAndHTMLElementProps.margin || \"none\"}\n      ref={ref}\n    >\n      {icon && <Box marginRight=\"s\">{icon}</Box>}\n      <div>\n        {titleText && (\n          <Heading\n            as=\"p\"\n            margin=\"none\"\n            h4\n            marginBottom=\"xxs\"\n            textColor={titleTextColor || theme.colors.textDark}\n          >\n            {titleText}\n          </Heading>\n        )}\n        {descriptionText && (\n          <Text\n            textColor={descriptionTextColor || theme.colors.textDark}\n            marginBottom=\"none\"\n          >\n            {descriptionText}\n          </Text>\n        )}\n        {children}\n      </div>\n    </StyledInfoBox>\n  );\n};\n\nexport default InfoBox;\n"],"names":["InfoBox","_a","children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","ref","spacingAndHTMLElementProps","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","backgroundColorOrDefault","backgroundColor","tokenColors","grey_200","React","createElement","StyledInfoBox","margin","Box","marginRight","Heading","as","h4","marginBottom","textColor","colors","textDark","Text"],"mappings":"2WA0CO,IAAMA,EAAU,SAACC,GACtB,IAAAC,EAAQD,EAAAC,SACRC,EAASF,EAAAE,UACTC,EAAcH,EAAAG,eACdC,EAAeJ,EAAAI,gBACfC,EAAoBL,EAAAK,qBACpBC,EAAIN,EAAAM,KACJC,QACGC,EAA0BC,EAAAT,EARP,CAAA,WAAA,YAAA,iBAAA,kBAAA,uBAAA,OAAA,QAUhBU,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGCK,EACJP,EAA2BQ,iBAAmBJ,EAAMK,YAAYC,SAElE,OACEC,EAAAC,cAACC,EAAaR,EAAA,CACZD,MAAOA,GACHJ,EAA0B,CAC9BQ,gBAAiBD,EACjBO,OAAQd,EAA2Bc,QAAU,OAC7Cf,IAAKA,IAEJD,GAAQa,gBAACI,EAAG,CAACC,YAAY,KAAKlB,GAC/Ba,EAAAC,cAAA,MAAA,KACGlB,GACCiB,EAAAC,cAACK,EAAO,CACNC,GAAG,IACHJ,OAAO,OACPK,IAAE,EACFC,aAAa,MACbC,UAAW1B,GAAkBS,EAAMkB,OAAOC,UAEzC7B,GAGJE,GACCe,EAAAC,cAACY,GACCH,UAAWxB,GAAwBO,EAAMkB,OAAOC,SAChDH,aAAa,QAEZxB,GAGJH,GAIT"}

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import s,{css as o}from"styled-components";import{Box as r}from"../Box/index.js";var e,i,t=s(r)(i||(i=n(["\n  display: flex;\n  flex-shrink: 0;\n\n  svg {\n    margin-top: 0;\n  }\n\n  ","\n"],["\n  display: flex;\n  flex-shrink: 0;\n\n  svg {\n    margin-top: 0;\n  }\n\n  ","\n"])),(function(s){return s.css&&o(e||(e=n(["\n      ","\n    "],["\n      ","\n    "])),s.css)}));export{t as StyledInfoBox,t as default};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import s,{css as o}from"styled-components";import{Box as r}from"../Box/index.js";var e,i,t=s(r)(i||(i=n(["\n  display: flex;\n  flex-shrink: 0;\n\n  svg {\n    margin-top: 0;\n  }\n\n  ","\n"],["\n  display: flex;\n  flex-shrink: 0;\n\n  svg {\n    margin-top: 0;\n  }\n\n  ","\n"])),function(s){return s.css&&o(e||(e=n(["\n      ","\n    "],["\n      ","\n    "])),s.css)});export{t as StyledInfoBox,t as default};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/InfoBox/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\nimport Box, { type BoxProps } from \"../Box\";\n\ntype InfoBoxProps = BoxProps & {\n  css?: string;\n  theme: ThemeType;\n};\n\nexport const StyledInfoBox = styled(Box)<InfoBoxProps>`\n  display: flex;\n  flex-shrink: 0;\n\n  svg {\n    margin-top: 0;\n  }\n\n  ${(props) =>\n    props.css &&\n    css`\n      ${props.css}\n    `}\n`;\n\nexport default StyledInfoBox;\n"],"names":["StyledInfoBox","styled","Box","templateObject_2","__makeTemplateObject","props","css","templateObject_1"],"mappings":"iKAUO,QAAMA,EAAgBC,EAAOC,EAAPD,CAAWE,IAAAA,EAAAC,EAAA,CAAA,kFAAA,MAAA,CAAc,kFAYjD,SAJD,SAACC,GACD,OAAAA,EAAMC,KACNA,EAAGC,IAAAA,EAAAH,EAAA,CAAA,WAAA,UAAA,CAAA,WACU,YAATC,EAAMC,IAFV"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/InfoBox/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\nimport Box, { type BoxProps } from \"../Box\";\n\ntype InfoBoxProps = BoxProps & {\n  css?: string;\n  theme: ThemeType;\n};\n\nexport const StyledInfoBox = styled(Box)<InfoBoxProps>`\n  display: flex;\n  flex-shrink: 0;\n\n  svg {\n    margin-top: 0;\n  }\n\n  ${(props) =>\n    props.css &&\n    css`\n      ${props.css}\n    `}\n`;\n\nexport default StyledInfoBox;\n"],"names":["StyledInfoBox","styled","Box","templateObject_2","__makeTemplateObject","props","css","templateObject_1"],"mappings":"iKAUO,QAAMA,EAAgBC,EAAOC,EAAPD,CAAWE,IAAAA,EAAAC,EAAA,CAAA,kFAAA,MAAA,CAAc,kFAYjD,QAJD,SAACC,GACD,OAAAA,EAAMC,KACNA,EAAGC,IAAAA,EAAAH,EAAA,CAAA,WAAA,UAAA,CAAA,WACU,YAATC,EAAMC,IAFV"}

package/lib/{components → src/components}/LabelWrapper/index.d.ts

@@ -4,11 +4,11 @@ type LabelWrapperProps = LabelHTMLAttributes<HTMLLabelElement> & {
     label: string;
     /** hint text or react element in it's place */
     hintText?: ReactNode;
-    /** when required (required) appears in label */
+    /** if field is required, when not required (optional) appears in label */
     required?: boolean;
-    /** flag to stop (required) appearing in label, useful for compound form components like DateInput */
-    hideRequiredInLabel?: boolean;
+    /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */
+    hideRequiredIndicationInLabel?: boolean;
     children?: ReactNode;
 };
-export declare function LabelWrapper({ label, hintText, required, hideRequiredInLabel, children, ...otherHTMLLabelProps }: LabelWrapperProps): React.JSX.Element;
+export declare function LabelWrapper({ label, hintText, required, hideRequiredIndicationInLabel, children, ...otherHTMLLabelProps }: LabelWrapperProps): React.JSX.Element;
 export default LabelWrapper;

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as l,ThemeProvider as n}from"styled-components";import{Text as i}from"../Text/index.js";import{crukTheme as m}from"../../themes/cruk.js";import{Label as o,LabelText as a,RequiredText as d}from"./styles.js";function s(s){var u=s.label,c=s.hintText,f=s.required,h=void 0!==f&&f,p=s.hideRequiredInLabel,b=void 0!==p&&p,x=s.children,E=e(s,["label","hintText","required","hideRequiredInLabel","children"]),q=l(),j=t(t({},m),q),y=c&&("string"==typeof c&&c.length||"number"==typeof c)?r.createElement(i,null,c):c;return r.createElement(n,{theme:j},u?r.createElement(o,t({},E),r.createElement(a,{$hasHintText:!!c},u,h&&!b&&r.createElement(d,null," (required)")),y,x):r.createElement(r.Fragment,null,x))}export{s as LabelWrapper,s as default};
+import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as n,ThemeProvider as i}from"styled-components";import{Text as l}from"../Text/index.js";import{crukTheme as o}from"../../themes/cruk.js";import{Label as m,LabelText as a,RequiredIndicationText as d}from"./styles.js";function s(s){var c=s.label,u=s.hintText,p=s.required,f=void 0!==p&&p,h=s.hideRequiredIndicationInLabel,b=void 0!==h&&h,x=s.children,E=e(s,["label","hintText","required","hideRequiredIndicationInLabel","children"]),j=n(),q=t(t({},o),j),y=u&&("string"==typeof u&&u.length||"number"==typeof u)?r.createElement(l,null,u):u;return r.createElement(i,{theme:q},c?r.createElement(m,t({},E),r.createElement(a,{$hasHintText:!!u},c,!f&&!b&&r.createElement(d,null," (optional)")),y,x):r.createElement(r.Fragment,null,x))}export{s as LabelWrapper,s as default};
 //# sourceMappingURL=index.js.map