@cruk/cruk-react-components 6.2.2 → 7.0.0

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 e from"styled-components";var i,t,a,o,r,h,d,s,l,g,p,x=e.header(i||(i=n(["\n  --_header-height-large: 120px;\n  --_header-height-small: 72px;\n  --_header-logo-height-large: 80px;\n  --_header-logo-height-small: 40px;\n  --_header-padding: var(--spacing-xs, 1rem);\n  --_animation-speed: 0.2s;\n\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  background-color: var(--clr-header-background, #ffffff);\n  z-index: 9998;\n"],["\n  --_header-height-large: 120px;\n  --_header-height-small: 72px;\n  --_header-logo-height-large: 80px;\n  --_header-logo-height-small: 40px;\n  --_header-padding: var(--spacing-xs, 1rem);\n  --_animation-speed: 0.2s;\n\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  background-color: var(--clr-header-background, #ffffff);\n  z-index: 9998;\n"]))),f=e.div(t||(t=n(["\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--_header-height-small, 72px);\n\n  @media (min-width: 992px) {\n    height: var(--_header-height-large, 120px);\n  }\n"],["\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--_header-height-small, 72px);\n\n  @media (min-width: 992px) {\n    height: var(--_header-height-large, 120px);\n  }\n"]))),c=e.div(a||(a=n(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  padding: 0 var(--_header-padding, 1rem);\n  background-color: var(--clr-header-background, #ffffff);\n  position: relative;\n  border-bottom: solid 1px var(--clr-header-border, #e6e6e6);\n  height: var(--_header-height-small, 72px);\n  box-shadow: ",";\n  top: ",";\n  position: ",";\n  transition: height var(--_animation-speed, 0.2s) ease;\n  @media (min-width: 992px) {\n    position: ",";\n    height: ",";\n  }\n"],["\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  padding: 0 var(--_header-padding, 1rem);\n  background-color: var(--clr-header-background, #ffffff);\n  position: relative;\n  border-bottom: solid 1px var(--clr-header-border, #e6e6e6);\n  height: var(--_header-height-small, 72px);\n  box-shadow: ",";\n  top: ",";\n  position: ",";\n  transition: height var(--_animation-speed, 0.2s) ease;\n  @media (min-width: 992px) {\n    position: ",";\n    height: ",";\n  }\n"])),function(n){return n.$isSticky?"var(--shadow-l)":"none"},function(n){return n.$isSticky?0:"auto"},function(n){return n.$isSticky?"fixed":"relative"},function(n){return n.$isSticky?"fixed":"relative"},function(n){var e=n.$isSmall,i=n.$isSticky;return e&&i?"var(--_header-height-small, 72px)":"var(--_header-height-large, 120px)"}),m=e.div(o||(o=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){return n.$fullWidth?"100%":"var(--content-max-width, 1000px)"}),u=e.img(r||(r=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"]))),v=e.div(h||(h=n(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  width: auto;\n  transition: height var(--_animation-speed, 0.2s) ease;\n\n  height: var(--_header-logo-height-small, 40px);\n\n  @media (min-width: 992px) {\n    height: ",";\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  width: auto;\n  transition: height var(--_animation-speed, 0.2s) ease;\n\n  height: var(--_header-logo-height-small, 40px);\n\n  @media (min-width: 992px) {\n    height: ",";\n  }\n"])),function(n){var e=n.$isSmall,i=n.$isSticky;return e&&i?"var(--_header-logo-height-small, 40px)":"var(--_header-logo-height-large, 80px)"}),b=e.a(d||(d=n(["\n  display: inline-block;\n"],["\n  display: inline-block;\n"]))),w=e.a(s||(s=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: var(--spacing-xs, 1rem);\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: var(--spacing-xs, 1rem);\n    border-radius: 15px;\n    border: 4px solid yellow;\n    text-align: center;\n    font-size: 1.2em;\n    z-index: 999;\n  }\n"]))),y=e.p(l||(l=n(['\n  flex: 1 1 auto;\n  font-family: var(--typ-font-family-headings, "Progress", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-headings, 400);\n  font-size: var(--font-size-xl, 1.5625rem);\n  color: var(--clr-header-tagline-text, #000000);\n  text-align: center;\n  opacity: 0;\n  transition: opacity var(--_animation-speed, 0.2s) ease;\n  display: none;\n\n  @media (min-width: 992px) {\n    display: block;\n    opacity: ',";\n  }\n"],['\n  flex: 1 1 auto;\n  font-family: var(--typ-font-family-headings, "Progress", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-headings, 400);\n  font-size: var(--font-size-xl, 1.5625rem);\n  color: var(--clr-header-tagline-text, #000000);\n  text-align: center;\n  opacity: 0;\n  transition: opacity var(--_animation-speed, 0.2s) ease;\n  display: none;\n\n  @media (min-width: 992px) {\n    display: block;\n    opacity: ',";\n  }\n"])),function(n){var e=n.$isSmall,i=n.$isSticky;return e&&i?0:1}),_=e.div(g||(g=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"]))),z=e.div(p||(p=n(["\n  height: auto;\n  margin: auto 0;\n"],["\n  height: auto;\n  margin: auto 0;\n"])));export{z as ChildInner,_ as ChildWrapper,m as HeaderMainContent,c as HeaderStickyContainer,f as HeaderStickyPlaceHolder,u as Logo,v as LogoWrapper,w as SkipToMain,x as StyledHeader,b as StyledLink,y 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\nexport const StyledHeader = styled.header`\n  --_header-height-large: 120px;\n  --_header-height-small: 72px;\n  --_header-logo-height-large: 80px;\n  --_header-logo-height-small: 40px;\n  --_header-padding: var(--spacing-xs, 1rem);\n  --_animation-speed: 0.2s;\n\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  background-color: var(--clr-header-background, #ffffff);\n  z-index: 9998;\n`;\n\nexport const HeaderStickyPlaceHolder = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--_header-height-small, 72px);\n\n  @media (min-width: 992px) {\n    height: var(--_header-height-large, 120px);\n  }\n`;\n\nexport const HeaderStickyContainer = styled.div<{\n  $isSmall?: boolean;\n  $isSticky?: boolean;\n}>`\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  padding: 0 var(--_header-padding, 1rem);\n  background-color: var(--clr-header-background, #ffffff);\n  position: relative;\n  border-bottom: solid 1px var(--clr-header-border, #e6e6e6);\n  height: var(--_header-height-small, 72px);\n  box-shadow: ${({ $isSticky }) => ($isSticky ? \"var(--shadow-l)\" : \"none\")};\n  top: ${({ $isSticky }) => ($isSticky ? 0 : \"auto\")};\n  position: ${({ $isSticky }) => ($isSticky ? \"fixed\" : \"relative\")};\n  transition: height var(--_animation-speed, 0.2s) ease;\n  @media (min-width: 992px) {\n    position: ${({ $isSticky }) => ($isSticky ? \"fixed\" : \"relative\")};\n    height: ${({ $isSmall, $isSticky }) =>\n      $isSmall && $isSticky\n        ? \"var(--_header-height-small, 72px)\"\n        : \"var(--_header-height-large, 120px)\"};\n  }\n`;\n\nexport const HeaderMainContent = styled.div<{\n  $fullWidth?: boolean;\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: ${({ $fullWidth }) =>\n    $fullWidth ? `100%` : `var(--content-max-width, 1000px)`};\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}>`\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  width: auto;\n  transition: height var(--_animation-speed, 0.2s) ease;\n\n  height: var(--_header-logo-height-small, 40px);\n\n  @media (min-width: 992px) {\n    height: ${({ $isSmall, $isSticky }) =>\n      $isSmall && $isSticky\n        ? \"var(--_header-logo-height-small, 40px)\"\n        : \"var(--_header-logo-height-large, 80px)\"};\n  }\n`;\n\nexport const StyledLink = styled.a`\n  display: inline-block;\n`;\n\nexport const SkipToMain = styled.a`\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: var(--spacing-xs, 1rem);\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}>`\n  flex: 1 1 auto;\n  font-family: var(--typ-font-family-headings, \"Progress\", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-headings, 400);\n  font-size: var(--font-size-xl, 1.5625rem);\n  color: var(--clr-header-tagline-text, #000000);\n  text-align: center;\n  opacity: 0;\n  transition: opacity var(--_animation-speed, 0.2s) ease;\n  display: none;\n\n  @media (min-width: 992px) {\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":["StyledHeader","styled","header","templateObject_1","__makeTemplateObject","HeaderStickyPlaceHolder","div","templateObject_2","HeaderStickyContainer","_a","$isSticky","$isSmall","HeaderMainContent","templateObject_4","$fullWidth","Logo","img","templateObject_5","LogoWrapper","templateObject_6","StyledLink","a","templateObject_7","SkipToMain","templateObject_8","Tagline","p","templateObject_9","ChildWrapper","templateObject_10","ChildInner","templateObject_11"],"mappings":"iHAEO,0BAAMA,EAAeC,EAAOC,OAAMC,IAAAA,EAAAC,EAAA,CAAA,mXAAA,CAAA,sXAe5BC,EAA0BJ,EAAOK,IAAGC,IAAAA,EAAAH,EAAA,CAAA,6MAAA,CAAA,gNAWpCI,EAAwBP,EAAOK,mfAG1C,2TASyE,aACvB,kBACe,6GAGE,kBAIvB,cAT9B,SAACG,GAAkB,OAAPA,EAAAC,UAAoB,kBAAoB,MAAjC,EAC1B,SAACD,GAAkB,OAAPA,EAAAC,UAAoB,EAAI,MAAjB,EACd,SAACD,GAAkB,OAAPA,EAAAC,UAAoB,QAAU,UAAvB,EAGjB,SAACD,GAAkB,OAAPA,EAAAC,UAAoB,QAAU,UAAvB,EACrB,SAACD,OAAEE,EAAQF,EAAAE,SAAED,EAASD,EAAAC,UAC9B,OAAAC,GAAYD,EACR,oCACA,oCAFJ,GAMOE,EAAoBX,EAAOK,IAAGO,IAAAA,EAAAT,EAAA,CAAA,8KAAA,OAAA,CAEzC,8KAS0D,SAD7C,SAACK,GACZ,OADwBA,EAAAK,WACX,OAAS,kCAAtB,GAGSC,EAAOd,EAAOe,IAAGC,IAAAA,EAAAb,EAAA,CAAA,gFAAA,CAAA,mFAOjBc,EAAcjB,EAAOK,IAAGa,IAAAA,EAAAf,EAAA,CAAA,gQAAA,YAAA,CAGnC,gQAagD,cAHpC,SAACK,OAAEE,EAAQF,EAAAE,SAAED,EAASD,EAAAC,UAC9B,OAAAC,GAAYD,EACR,yCACA,wCAFJ,GAMOU,EAAanB,EAAOoB,EAACC,IAAAA,EAAAlB,EAAA,CAAA,gCAAA,CAAA,mCAIrBmB,EAAatB,EAAOoB,EAACG,IAAAA,EAAApB,EAAA,CAAA,wcAAA,CAAA,2cA0BrBqB,EAAUxB,EAAOyB,EAACC,IAAAA,EAAAvB,EAAA,CAAA,qbAAA,YAAA,CAG7B,qbAayE,cAA5D,SAACK,OAAEE,EAAQF,EAAAE,SAAED,EAASD,EAAAC,UAAO,OAACC,GAAYD,EAAY,EAAI,CAA7B,GAI/BkB,EAAe3B,EAAOK,IAAGuB,IAAAA,EAAAzB,EAAA,CAAA,sGAAA,CAAA,yGAOzB0B,EAAa7B,EAAOK,IAAGyB,IAAAA,EAAA3B,EAAA,CAAA,0CAAA,CAAA"}

package/lib/src/components/Heading/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 o}from"styled-components";import{crukTheme as l}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as $}from"../Spacing/index.js";import{H1 as a,H2 as i,H3 as m,H4 as x,H5 as n,H6 as h}from"./styles.js";function p(p){var w=p.textSize,f=p.textAlign,d=p.textColor,s=p.wordBreak,c=p.overflowWrap,g=p.h1,k=p.h2,v=p.h3,S=p.h4,z=p.h5,A=p.h6,B=e(p,["textSize","textAlign","textColor","wordBreak","overflowWrap","h1","h2","h3","h4","h5","h6"]),C=o(),W=t(t({},l),C),E=$(B);return g?r.createElement(a,t({},E,{theme:W,$textSize:w,$textAlign:f,$textColor:d,$wordBreak:s,$overflowWrap:c})):k?r.createElement(i,t({},E,{theme:W,$textSize:w,$textAlign:f,$textColor:d,$wordBreak:s,$overflowWrap:c})):v?r.createElement(m,t({},E,{theme:W,$textSize:w,$textAlign:f,$textColor:d,$wordBreak:s,$overflowWrap:c})):S?r.createElement(x,t({},E,{theme:W,$textSize:w,$textAlign:f,$textColor:d,$wordBreak:s,$overflowWrap:c})):z?r.createElement(n,t({},E,{theme:W,$textSize:w,$textAlign:f,$textColor:d,$wordBreak:s,$overflowWrap:c})):A?r.createElement(h,t({},E,{theme:W,$textSize:w,$textAlign:f,$textColor:d,$wordBreak:s,$overflowWrap:c})):r.createElement(i,t({},E,{theme:W,$textSize:w,$textAlign:f,$textColor:d,$wordBreak:s,$overflowWrap:c}))}export{p as Heading,p as default};
+import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{spacingPropsToSpacingPropsInternal as o}from"../Spacing/index.js";import{H1 as l,H2 as $,H3 as a,H4 as i,H5 as x,H6 as n}from"./styles.js";import{themeColorOrString as m}from"../../utils/themeUtils.js";function w(w){var f=w.textSize,p=w.textAlign,d=w.textColor,h=w.wordBreak,s=w.overflowWrap,c=w.h1,v=w.h2,g=w.h3,S=w.h4,k=w.h5,z=w.h6,A=e(w,["textSize","textAlign","textColor","wordBreak","overflowWrap","h1","h2","h3","h4","h5","h6"]),B=o(A),C=d?m(d):"var(--clr-text-header-default, #000)";return c?r.createElement(l,t({},B,{$textSize:f,$textAlign:p,$textColor:C,$wordBreak:h,$overflowWrap:s})):v?r.createElement($,t({},B,{$textSize:f,$textAlign:p,$textColor:C,$wordBreak:h,$overflowWrap:s})):g?r.createElement(a,t({},B,{$textSize:f,$textAlign:p,$textColor:C,$wordBreak:h,$overflowWrap:s})):S?r.createElement(i,t({},B,{$textSize:f,$textAlign:p,$textColor:C,$wordBreak:h,$overflowWrap:s})):k?r.createElement(x,t({},B,{$textSize:f,$textAlign:p,$textColor:C,$wordBreak:h,$overflowWrap:s})):z?r.createElement(n,t({},B,{$textSize:f,$textAlign:p,$textColor:C,$wordBreak:h,$overflowWrap:s})):r.createElement($,t({},B,{$textSize:f,$textAlign:p,$textColor:C,$wordBreak:h,$overflowWrap:s}))}export{w as Heading,w as default};
 //# sourceMappingURL=index.js.map

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,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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Heading/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type ElementType } from \"react\";\n\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\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\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 propsConvertedToInternalSpacingProps =\n    spacingPropsToSpacingPropsInternal(props);\n\n  const textColorFinal = textColor\n    ? themeColorOrString(textColor)\n    : \"var(--clr-text-header-default, #000)\";\n\n  if (h1)\n    return (\n      <H1\n        {...propsConvertedToInternalSpacingProps}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColorFinal}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h2)\n    return (\n      <H2\n        {...propsConvertedToInternalSpacingProps}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColorFinal}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h3)\n    return (\n      <H3\n        {...propsConvertedToInternalSpacingProps}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColorFinal}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h4)\n    return (\n      <H4\n        {...propsConvertedToInternalSpacingProps}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColorFinal}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h5)\n    return (\n      <H5\n        {...propsConvertedToInternalSpacingProps}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColorFinal}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h6)\n    return (\n      <H6\n        {...propsConvertedToInternalSpacingProps}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColorFinal}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  return (\n    <H2\n      {...propsConvertedToInternalSpacingProps}\n      $textSize={textSize}\n      $textAlign={textAlign}\n      $textColor={textColorFinal}\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","propsConvertedToInternalSpacingProps","spacingPropsToSpacingPropsInternal","textColorFinal","themeColorOrString","React","createElement","H1","__assign","$textAlign","$textColor","$wordBreak","H2","H3","H4","H5","H6"],"mappings":"sTA4CM,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,EACJC,EAAmCH,GAE/BI,EAAiBb,EACnBc,EAAmBd,GACnB,uCAEJ,OAAIG,EAEAY,EAAAC,cAACC,EAAEC,EAAA,GACGP,aACOb,EAAQqB,WACPpB,EAASqB,WACTP,EAAcQ,WACdpB,gBACGC,KAGjBE,EAEAW,EAAAC,cAACM,EAAEJ,EAAA,GACGP,aACOb,EAAQqB,WACPpB,EAASqB,WACTP,EAAcQ,WACdpB,gBACGC,KAGjBG,EAEAU,EAAAC,cAACO,EAAEL,EAAA,GACGP,aACOb,EAAQqB,WACPpB,EAASqB,WACTP,EAAcQ,WACdpB,gBACGC,KAGjBI,EAEAS,EAAAC,cAACQ,EAAEN,EAAA,GACGP,aACOb,EAAQqB,WACPpB,EAASqB,WACTP,EAAcQ,WACdpB,gBACGC,KAGjBK,EAEAQ,EAAAC,cAACS,EAAEP,EAAA,GACGP,aACOb,EAAQqB,WACPpB,EAASqB,WACTP,EAAcQ,WACdpB,gBACGC,KAGjBM,EAEAO,EAAAC,cAACU,EAAER,EAAA,GACGP,aACOb,EAAQqB,WACPpB,EAASqB,WACTP,EAAcQ,WACdpB,gBACGC,KAInBa,EAAAC,cAACM,EAAEJ,EAAA,GACGP,aACOb,EAAQqB,WACPpB,EAASqB,WACTP,EAAcQ,WACdpB,gBACGC,IAGrB"}

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

@@ -1,7 +1,6 @@
 import { type SpacingPropsInternal } from "../Spacing";
-import { type ThemeType, type FontSizeType, type WordBreakType, type OverflowWrapType } from "../../types";
+import { type FontSizeType, type WordBreakType, type OverflowWrapType } from "../../types";
 type StyledHeadingProps = SpacingPropsInternal & {
-    theme: ThemeType;
     $textSize?: FontSizeType;
     $textAlign?: "left" | "right" | "center";
     $textColor?: string;

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 e}from"../../../node_modules/tslib/tslib.es6.js";import t,{css as r}from"styled-components";import{spacing as i}from"../Spacing/index.js";var a,o,f,m,s,x,l,u=function(t){return r(a||(a=n(['\n  font-family: var(--typ-font-family-headings, "Progress", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-headings, 400);\n  word-break: ',";\n  overflow-wrap: ",";\n  color: ",";\n  line-height: var(--typ-header-line-height, 1.25em);\n  text-transform: var(--typ-header-text-transform, none);\n  margin-top: var(--spacing-m, 2rem);\n  margin-bottom: var(--spacing-s, 1.5rem);\n  max-width: 100%;\n  text-align: ",";\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  ","\n"],['\n  font-family: var(--typ-font-family-headings, "Progress", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-headings, 400);\n  word-break: ',";\n  overflow-wrap: ",";\n  color: ",";\n  line-height: var(--typ-header-line-height, 1.25em);\n  text-transform: var(--typ-header-text-transform, none);\n  margin-top: var(--spacing-m, 2rem);\n  margin-bottom: var(--spacing-s, 1.5rem);\n  max-width: 100%;\n  text-align: ",";\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  ","\n"])),t.$wordBreak||"normal",t.$overflowWrap||"break-word",t.$textColor?t.$textColor:"var(--clr-text-header-default, #000)",t.$textAlign||"left",function(){var n=e(t,[]);return i(n)})},z=function(n,e){switch(n){case"m":return"var(--font-size-m, 1rem)";case"l":return"var(--font-size-l, 1.25rem)";case"xl":return"var(--font-size-xl, 1.5rem)";case"xxl":return"var(--font-size-xxl, 1.75rem)";case"xxxl":return"var(--font-size-xxxl, 2rem)";case"xxxxl":return"var(--font-size-xxxxl, 2.25rem)";default:return e}},d=function(n,e){switch(n){case"m":return"var(--font-size-m, 1rem)";case"l":case"xl":return"var(--font-size-l, 1.25rem)";case"xxl":return"var(--font-size-xl, 1.5rem)";case"xxxl":return"var(--font-size-xxl, 1.75rem)";case"xxxxl":return"var(--font-size-xxxl, 2rem)";default:return e}},v=function(n,e){switch(n){case"m":return"var(--font-size-m, 1rem)";case"l":case"xl":case"xxl":return"var(--font-size-l, 1.25rem)";case"xxxl":return"var(--font-size-xl, 1.5rem)";case"xxxxl":return"var(--font-size-xxl, 1.75rem)";default:return e}},c=t.h1(o||(o=n(["\n  ","\n  font-size: ",";\n  @media (min-width: 768px) {\n    font-size: ",";\n  }\n  @media (min-width: 992px) {\n    font-size: ",";\n  }\n"],["\n  ","\n  font-size: ",";\n  @media (min-width: 768px) {\n    font-size: ",";\n  }\n  @media (min-width: 992px) {\n    font-size: ",";\n  }\n"])),function(n){return u(n)},function(n){var e=n.$textSize;return v(e||null,"var(--font-size-xxl, 1.75rem)")},function(n){var e=n.$textSize;return d(e||null,"var(--font-size-xxxl, 2rem)")},function(n){var e=n.$textSize;return z(e||null,"var(--font-size-xxxxl, 2.25rem)")}),h=t.h2(f||(f=n(["\n  ","\n  font-size: ",";\n\n  @media (min-width: 768px) {\n    font-size: ",";\n  }\n  @media (min-width: 992px) {\n    font-size: ",";\n  }\n"],["\n  ","\n  font-size: ",";\n\n  @media (min-width: 768px) {\n    font-size: ",";\n  }\n  @media (min-width: 992px) {\n    font-size: ",";\n  }\n"])),function(n){return u(n)},function(n){var e=n.$textSize;return v(e||null,"var(--font-size-xl, 1.5rem)")},function(n){var e=n.$textSize;return d(e||null,"var(--font-size-xxl, 1.75rem)")},function(n){var e=n.$textSize;return z(e||null,"var(--font-size-xxxl, 2rem)")}),p=t.h3(m||(m=n(["\n  ","\n  font-size: ",";\n  @media (min-width: 768px) {\n    font-size: ",";\n  }\n  @media (min-width: 992px) {\n    font-size: ",";\n  }\n"],["\n  ","\n  font-size: ",";\n  @media (min-width: 768px) {\n    font-size: ",";\n  }\n  @media (min-width: 992px) {\n    font-size: ",";\n  }\n"])),function(n){return u(n)},function(n){var e=n.$textSize;return v(e||null,"var(--font-size-l, 1.25rem)")},function(n){var e=n.$textSize;return d(e||null,"var(--font-size-xl, 1.5rem)")},function(n){var e=n.$textSize;return z(e||null,"var(--font-size-xxl, 1.75rem)")}),w=t.h4(s||(s=n(["\n  ","\n  font-size: ",";\n  @media (min-width: 768px) {\n    font-size: ",";\n  }\n  @media (min-width: 992px) {\n    font-size: ",";\n  }\n"],["\n  ","\n  font-size: ",";\n  @media (min-width: 768px) {\n    font-size: ",";\n  }\n  @media (min-width: 992px) {\n    font-size: ",";\n  }\n"])),function(n){return u(n)},function(n){var e=n.$textSize;return v(e||null,"var(--font-size-l, 1.25rem)")},function(n){var e=n.$textSize;return d(e||null,"var(--font-size-l, 1.25rem)")},function(n){var e=n.$textSize;return z(e||null,"var(--font-size-xl, 1.5rem)")}),g=t.h5(x||(x=n(["\n  ","\n\n  font-size: ",";\n  @media (min-width: 768px) {\n    font-size: ",";\n  }\n  @media (min-width: 992px) {\n    font-size: ",";\n  }\n"],["\n  ","\n\n  font-size: ",";\n  @media (min-width: 768px) {\n    font-size: ",";\n  }\n  @media (min-width: 992px) {\n    font-size: ",";\n  }\n"])),function(n){return u(n)},function(n){var e=n.$textSize;return v(e||null,"var(--font-size-l, 1.25rem)")},function(n){var e=n.$textSize;return d(e||null,"var(--font-size-l, 1.25rem)")},function(n){var e=n.$textSize;return z(e||null,"var(--font-size-l, 1.25rem)")}),$=t.h6(l||(l=n(["\n  ","\n\n  font-size: ",";\n  @media (min-width: 768px) {\n    font-size: ",";\n  }\n  @media (min-width: 992px) {\n    font-size: ",";\n  }\n"],["\n  ","\n\n  font-size: ",";\n  @media (min-width: 768px) {\n    font-size: ",";\n  }\n  @media (min-width: 992px) {\n    font-size: ",";\n  }\n"])),function(n){return u(n)},function(n){var e=n.$textSize;return v(e||null,"var(--font-size-m, 1rem)")},function(n){var e=n.$textSize;return d(e||null,"var(--font-size-m, 1rem)")},function(n){var e=n.$textSize;return z(e||null,"var(--font-size-m, 1rem)")});export{c as H1,h as H2,p as H3,w as H4,g 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 FontSizeType,\n  type WordBreakType,\n  type OverflowWrapType,\n} from \"../../types\";\n\ntype StyledHeadingProps = SpacingPropsInternal & {\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: var(--typ-font-family-headings, \"Progress\", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-headings, 400);\n  word-break: ${props.$wordBreak || \"normal\"};\n  overflow-wrap: ${props.$overflowWrap || \"break-word\"};\n  color: ${props.$textColor\n    ? props.$textColor\n    : `var(--clr-text-header-default, #000)`};\n  line-height: var(--typ-header-line-height, 1.25em);\n  text-transform: var(--typ-header-text-transform, none);\n  margin-top: var(--spacing-m, 2rem);\n  margin-bottom: var(--spacing-s, 1.5rem);\n  max-width: 100%;\n  text-align: ${props.$textAlign || \"left\"};\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  ${() => {\n    const { ...propsWithoutTheme } = props;\n\n    return spacing(propsWithoutTheme);\n  }}\n`;\n\nconst desktopFontSize = (\n  $textSize: FontSizeType | null,\n  defaultFontSize: string,\n) => {\n  switch ($textSize) {\n    case \"m\":\n      return \"var(--font-size-m, 1rem)\";\n    case \"l\":\n      return \"var(--font-size-l, 1.25rem)\";\n    case \"xl\":\n      return \"var(--font-size-xl, 1.5rem)\";\n    case \"xxl\":\n      return \"var(--font-size-xxl, 1.75rem)\";\n    case \"xxxl\":\n      return \"var(--font-size-xxxl, 2rem)\";\n    case \"xxxxl\":\n      return \"var(--font-size-xxxxl, 2.25rem)\";\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) => {\n  switch ($textSize) {\n    case \"m\":\n      return \"var(--font-size-m, 1rem)\";\n    case \"l\":\n      return \"var(--font-size-l, 1.25rem)\";\n    case \"xl\":\n      return \"var(--font-size-l, 1.25rem)\";\n    case \"xxl\":\n      return \"var(--font-size-xl, 1.5rem)\";\n    case \"xxxl\":\n      return \"var(--font-size-xxl, 1.75rem)\";\n    case \"xxxxl\":\n      return \"var(--font-size-xxxl, 2rem)\";\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) => {\n  switch ($textSize) {\n    case \"m\":\n      return \"var(--font-size-m, 1rem)\";\n    case \"l\":\n      return \"var(--font-size-l, 1.25rem)\";\n    case \"xl\":\n      return \"var(--font-size-l, 1.25rem)\";\n    case \"xxl\":\n      return \"var(--font-size-l, 1.25rem)\";\n    case \"xxxl\":\n      return \"var(--font-size-xl, 1.5rem)\";\n    case \"xxxxl\":\n      return \"var(--font-size-xxl, 1.75rem)\";\n\n    default:\n      return defaultFontSize;\n  }\n};\n\nexport const H1 = styled.h1<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ $textSize }) =>\n    mobileFontSize($textSize || null, \"var(--font-size-xxl, 1.75rem)\")};\n  @media (min-width: 768px) {\n    font-size: ${({ $textSize }) =>\n      tabletFontSize($textSize || null, \"var(--font-size-xxxl, 2rem)\")};\n  }\n  @media (min-width: 992px) {\n    font-size: ${({ $textSize }) =>\n      desktopFontSize($textSize || null, \"var(--font-size-xxxxl, 2.25rem)\")};\n  }\n`;\n\nexport const H2 = styled.h2<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ $textSize }) =>\n    mobileFontSize($textSize || null, \"var(--font-size-xl, 1.5rem)\")};\n\n  @media (min-width: 768px) {\n    font-size: ${({ $textSize }) =>\n      tabletFontSize($textSize || null, \"var(--font-size-xxl, 1.75rem)\")};\n  }\n  @media (min-width: 992px) {\n    font-size: ${({ $textSize }) =>\n      desktopFontSize($textSize || null, \"var(--font-size-xxxl, 2rem)\")};\n  }\n`;\n\nexport const H3 = styled.h3<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ $textSize }) =>\n    mobileFontSize($textSize || null, \"var(--font-size-l, 1.25rem)\")};\n  @media (min-width: 768px) {\n    font-size: ${({ $textSize }) =>\n      tabletFontSize($textSize || null, \"var(--font-size-xl, 1.5rem)\")};\n  }\n  @media (min-width: 992px) {\n    font-size: ${({ $textSize }) =>\n      desktopFontSize($textSize || null, \"var(--font-size-xxl, 1.75rem)\")};\n  }\n`;\n\nexport const H4 = styled.h4<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n  font-size: ${({ $textSize }) =>\n    mobileFontSize($textSize || null, \"var(--font-size-l, 1.25rem)\")};\n  @media (min-width: 768px) {\n    font-size: ${({ $textSize }) =>\n      tabletFontSize($textSize || null, \"var(--font-size-l, 1.25rem)\")};\n  }\n  @media (min-width: 992px) {\n    font-size: ${({ $textSize }) =>\n      desktopFontSize($textSize || null, \"var(--font-size-xl, 1.5rem)\")};\n  }\n`;\n\nexport const H5 = styled.h5<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n\n  font-size: ${({ $textSize }) =>\n    mobileFontSize($textSize || null, \"var(--font-size-l, 1.25rem)\")};\n  @media (min-width: 768px) {\n    font-size: ${({ $textSize }) =>\n      tabletFontSize($textSize || null, \"var(--font-size-l, 1.25rem)\")};\n  }\n  @media (min-width: 992px) {\n    font-size: ${({ $textSize }) =>\n      desktopFontSize($textSize || null, \"var(--font-size-l, 1.25rem)\")};\n  }\n`;\n\nexport const H6 = styled.h6<StyledHeadingProps>`\n  ${(props) => StyledHeading(props)}\n\n  font-size: ${({ $textSize }) =>\n    mobileFontSize($textSize || null, \"var(--font-size-m, 1rem)\")};\n  @media (min-width: 768px) {\n    font-size: ${({ $textSize }) =>\n      tabletFontSize($textSize || null, \"var(--font-size-m, 1rem)\")};\n  }\n  @media (min-width: 992px) {\n    font-size: ${({ $textSize }) =>\n      desktopFontSize($textSize || null, \"var(--font-size-m, 1rem)\")};\n  }\n`;\n"],"names":["StyledHeading","props","css","templateObject_1","__makeTemplateObject","$wordBreak","$overflowWrap","$textColor","$textAlign","propsWithoutTheme","__rest","spacing","desktopFontSize","$textSize","defaultFontSize","tabletFontSize","mobileFontSize","H1","styled","h1","templateObject_2","_a","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/src/components/IconFa/index.js

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{useTheme as t}from"styled-components";import{crukTheme as r}from"../../themes/cruk.js";import{StyledIcon as m}from"./styles.js";import{themeColorOrString as s,themeSizeOrString as i}from"../../utils/themeUtils.js";function c(c){var n=c.faIcon,l=c.color,a=c.size,p=void 0===a?"1rem":a,f=t(),d=e(e({},r),f),u=n.icon,h=u[0],j=u[1],v=u[4];return o.createElement(m,{theme:d,role:"presentation",viewBox:"0 0 ".concat(h," ").concat(j),$size:i(p,d),$color:s(l,d)},v&&o.createElement("path",{d:v}))}export{c as IconFa,c as default};
+import e from"react";import{StyledIcon as t}from"./styles.js";import{themeColorOrString as o,themeSpacingSizeOrString as r}from"../../utils/themeUtils.js";function c(c){var i=c.faIcon,a=c.color,n=c.size,m=void 0===n?"1rem":n,s=i.icon,l=s[0],f=s[1],p=s[4];return e.createElement(t,{role:"presentation",viewBox:"0 0 ".concat(l," ").concat(f),$size:r(m),$color:o(a)},p&&e.createElement("path",{d:p}))}export{c as IconFa,c as default};
 //# sourceMappingURL=index.js.map

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 = \"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,OAAMA,EAC7CE,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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/IconFa/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { type IconDefinition } from \"@fortawesome/fontawesome-common-types\";\n\nimport { StyledIcon } from \"./styles\";\nimport {\n  themeColorOrString,\n  themeSpacingSizeOrString,\n} 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 = \"1rem\" }: IconFaProps) {\n  const [width, height, , , svgPathData] = faIcon.icon;\n\n  return (\n    <StyledIcon\n      role=\"presentation\"\n      viewBox={`0 0 ${width} ${height}`}\n      $size={themeSpacingSizeOrString(size)}\n      $color={themeColorOrString(color)}\n    >\n      {svgPathData && <path d={svgPathData as string} />}\n    </StyledIcon>\n  );\n}\n\nexport default IconFa;\n"],"names":["IconFa","_a","faIcon","color","_b","size","_c","icon","width","height","svgPathData","React","createElement","StyledIcon","role","viewBox","concat","$size","themeSpacingSizeOrString","$color","themeColorOrString","d"],"mappings":"2JAuBM,SAAUA,EAAOC,OAAEC,EAAMD,EAAAC,OAAEC,EAAKF,EAAAE,MAAEC,SAAAC,OAAI,IAAAD,EAAG,OAAMA,EAC7CE,EAAmCJ,EAAOK,KAAzCC,EAAKF,EAAA,GAAEG,EAAMH,EAAA,GAAMI,OAE1B,OACEC,EAAAC,cAACC,EAAU,CACTC,KAAK,eACLC,QAAS,OAAAC,OAAOR,EAAK,KAAAQ,OAAIP,GAAQQ,MAC1BC,EAAyBb,GAAKc,OAC7BC,EAAmBjB,IAE1BO,GAAeC,EAAAC,cAAA,OAAA,CAAMS,EAAGX,IAG/B"}

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

@@ -1,6 +1,4 @@
-import { type ThemeType } from "../../types";
 export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGSVGElement>, {
-    theme: ThemeType;
     $color?: string;
     $size: string;
 }>> & string;

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  vertical-align: middle;\n  height: ${({ $size }) => $size};\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,oEAAA,eAAA,0BAAA,YAAA,CAIlC,oEAG8B,eACD,0BAEG,cAHtB,SAACC,GAAc,OAAPA,EAAAC,KAAO,EAChB,SAACD,GAAc,OAAPA,EAAAC,KAAO,EAEd,SAACD,GAAe,OAAPA,EAAAE,MAAO"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/IconFa/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledIcon = styled.svg<{\n  $color?: string;\n  $size: string;\n}>`\n  display: inline-block;\n  vertical-align: middle;\n  height: ${({ $size }) => $size};\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":"iHAEO,MAAMA,EAAaC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,oEAAA,eAAA,0BAAA,YAAA,CAGlC,oEAG8B,eACD,0BAEG,cAHtB,SAACC,GAAc,OAAPA,EAAAC,KAAO,EAChB,SAACD,GAAc,OAAPA,EAAAC,KAAO,EAEd,SAACD,GAAe,OAAPA,EAAAE,MAAO"}

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

@@ -1,16 +1,17 @@
 import React, { type HTMLAttributes, type Ref, type ReactNode, type ElementType } from "react";
 import { type SpacingProps } from "../Spacing";
+import { type ColourVariableType } from "src/types";
 export type InfoBoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     /** background color of wrapping element, this will add default padding */
-    backgroundColor?: string;
+    backgroundColor?: ColourVariableType | string;
     /** Title text */
     titleText: string;
     /** Title text colour */
-    titleTextColor?: string;
+    titleTextColor?: ColourVariableType | string;
     /** Description text */
     descriptionText: string;
     /** Description text colour */
-    descriptionTextColor?: string;
+    descriptionTextColor?: ColourVariableType | string;
     /** Space for extra element underneath description */
     children?: ReactNode;
     /** Icon in left column usually 2em squared */
@@ -24,5 +25,5 @@ export type InfoBoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
   
   The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.
    */
-export declare const InfoBox: ({ children, titleText, titleTextColor, descriptionText, descriptionTextColor, icon, ref, ...spacingAndHTMLElementProps }: InfoBoxProps) => React.JSX.Element;
+export declare const InfoBox: ({ children, titleText, titleTextColor, descriptionText, descriptionTextColor, icon, backgroundColor, ref, ...spacingAndHTMLElementProps }: InfoBoxProps) => React.JSX.Element;
 export default InfoBox;

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{useTheme as r}from"styled-components";import{crukTheme as i}from"../../themes/cruk.js";import{Box as n}from"../Box/index.js";import{Text as m}from"../Text/index.js";import{Heading as l}from"../Heading/index.js";import{StyledInfoBox as s}from"./styles.js";var a=function(a){var c=a.children,x=a.titleText,d=a.titleTextColor,p=a.descriptionText,f=a.descriptionTextColor,g=a.icon,C=a.ref,T=e(a,["children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","ref"]),u=r(),h=t(t({},i),u),j=T.backgroundColor||h.tokenColors.grey_200;return o.createElement(s,t({theme:h},T,{backgroundColor:j,margin:T.margin||"none",ref:C}),g&&o.createElement(n,{marginRight:"s"},g),o.createElement("div",null,x&&o.createElement(l,{as:"p",margin:"none",h4:!0,marginBottom:"xxs",textColor:d||h.colors.textDark},x),p&&o.createElement(m,{textColor:f||h.colors.textDark,marginBottom:"none"},p),c))};export{a as InfoBox,a as default};
+import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{Box as o}from"../Box/index.js";import{Text as i}from"../Text/index.js";import{Heading as n}from"../Heading/index.js";import{StyledInfoBox as l}from"./styles.js";import{themeColorOrString as m}from"../../utils/themeUtils.js";var a=function(a){var c=a.children,s=a.titleText,x=a.titleTextColor,d=a.descriptionText,p=a.descriptionTextColor,f=a.icon,g=a.backgroundColor,u=a.ref,C=e(a,["children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","backgroundColor","ref"]),T=g?m(g):"var(--clr-cruk-grey-200, #e6e6e6)",j=x?m(x):"var(--clr-text-dark, #000)",k=p?m(p):"var(--clr-text-dark, #000)";return t.createElement(l,r({},C,{backgroundColor:T,margin:C.margin||"none",ref:u}),f&&t.createElement(o,{marginRight:"s"},f),t.createElement("div",null,s&&t.createElement(n,{as:"p",margin:"none",h4:!0,marginBottom:"xxs",textColor:j},s),d&&t.createElement(i,{textColor:k,marginBottom:"none"},d),c))};export{a as InfoBox,a as default};
 //# sourceMappingURL=index.js.map

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,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"}
+{"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\";\n\nimport { Box } from \"../Box\";\nimport { Text } from \"../Text\";\nimport { Heading } from \"../Heading\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledInfoBox } from \"./styles\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\nimport { type ColourVariableType } from \"src/types\";\n\nexport type InfoBoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of wrapping element, this will add default padding */\n    backgroundColor?: ColourVariableType | string;\n    /** Title text */\n    titleText: string;\n    /** Title text colour */\n    titleTextColor?: ColourVariableType | string;\n    /** Description text */\n    descriptionText: string;\n    /** Description text colour */\n    descriptionTextColor?: ColourVariableType | 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  backgroundColor,\n  ref,\n  ...spacingAndHTMLElementProps\n}: InfoBoxProps) => {\n  const backgroundColorOrDefault = backgroundColor\n    ? themeColorOrString(backgroundColor)\n    : \"var(--clr-cruk-grey-200, #e6e6e6)\";\n\n  const textColorOrDefault = titleTextColor\n    ? themeColorOrString(titleTextColor)\n    : \"var(--clr-text-dark, #000)\";\n\n  const descriptionTextColorOrDefault = descriptionTextColor\n    ? themeColorOrString(descriptionTextColor)\n    : \"var(--clr-text-dark, #000)\";\n\n  return (\n    <StyledInfoBox\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={textColorOrDefault}\n          >\n            {titleText}\n          </Heading>\n        )}\n        {descriptionText && (\n          <Text textColor={descriptionTextColorOrDefault} marginBottom=\"none\">\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","backgroundColor","ref","spacingAndHTMLElementProps","__rest","backgroundColorOrDefault","themeColorOrString","textColorOrDefault","descriptionTextColorOrDefault","React","StyledInfoBox","__assign","margin","Box","marginRight","createElement","Heading","as","h4","marginBottom","textColor","Text"],"mappings":"4UA0CO,IAAMA,EAAU,SAACC,GACtB,IAAAC,EAAQD,EAAAC,SACRC,EAASF,EAAAE,UACTC,EAAcH,EAAAG,eACdC,EAAeJ,EAAAI,gBACfC,EAAoBL,EAAAK,qBACpBC,EAAIN,EAAAM,KACJC,EAAeP,EAAAO,gBACfC,EAAGR,EAAAQ,IACAC,EAA0BC,EAAAV,EATP,CAAA,WAAA,YAAA,iBAAA,kBAAA,uBAAA,OAAA,kBAAA,QAWhBW,EAA2BJ,EAC7BK,EAAmBL,GACnB,oCAEEM,EAAqBV,EACvBS,EAAmBT,GACnB,6BAEEW,EAAgCT,EAClCO,EAAmBP,GACnB,6BAEJ,OACEU,gBAACC,EAAaC,EAAA,CAAA,EACRR,EAA0B,CAC9BF,gBAAiBI,EACjBO,OAAQT,EAA2BS,QAAU,OAC7CV,IAAKA,IAEJF,GAAQS,gBAACI,EAAG,CAACC,YAAY,KAAKd,GAC/BS,EAAAM,cAAA,MAAA,KACGnB,GACCa,EAAAM,cAACC,EAAO,CACNC,GAAG,IACHL,OAAO,OACPM,IAAE,EACFC,aAAa,MACbC,UAAWb,GAEVX,GAGJE,GACCW,EAAAM,cAACM,GAAKD,UAAWZ,EAA+BW,aAAa,QAC1DrB,GAGJH,GAIT"}

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

@@ -1,13 +1,11 @@
-import { type ThemeType } from "../../types";
-import { type BoxProps } from "../Box";
-type InfoBoxProps = BoxProps & {
+import Box from "../Box";
+type InfoBoxProps = React.ComponentProps<typeof Box> & {
     css?: string;
-    theme: ThemeType;
 };
 export declare const StyledInfoBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
-    backgroundColor?: string;
+    backgroundColor?: string | import("..").ColourVariableType;
     ref?: import("react").Ref<HTMLDivElement>;
     children?: import("react").ReactNode;
     as?: import("react").ElementType;
-}, InfoBoxProps>> & string & Omit<({ ...props }: BoxProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+}, InfoBoxProps>> & string & Omit<({ ...props }: import("../Box").BoxProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default StyledInfoBox;

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,QAJD,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 Box from \"../Box\";\n\ntype InfoBoxProps = React.ComponentProps<typeof Box> & {\n  css?: string;\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":"iKAQO,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/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 n,ThemeProvider as l}from"styled-components";import{crukTheme as i}from"../../themes/cruk.js";import{HintText as o,Label as m,LabelText as a,RequiredIndicationText as d}from"./styles.js";function s(s){var c=s.label,u=s.hintText,h=s.required,p=void 0!==h&&h,f=s.hideRequiredIndicationInLabel,b=void 0!==f&&f,E=s.children,q=e(s,["label","hintText","required","hideRequiredIndicationInLabel","children"]),x=n(),y=t(t({},i),x),I=u&&("string"==typeof u&&u.length||"number"==typeof u)?r.createElement(o,null,u):u;return r.createElement(l,{theme:y},c?r.createElement(m,t({},q),r.createElement(a,{$hasHintText:!!u},c,!p&&!b&&r.createElement(d,null," (optional)")),I,E):r.createElement(r.Fragment,null,E))}export{s as LabelWrapper,s as default};
+import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import n from"react";import{HintText as l,Label as r,LabelText as i,RequiredIndicationText as a}from"./styles.js";function o(o){var m=o.label,d=o.hintText,u=o.required,c=void 0!==u&&u,s=o.hideRequiredIndicationInLabel,h=void 0!==s&&s,b=o.children,f=e(o,["label","hintText","required","hideRequiredIndicationInLabel","children"]),p=d&&("string"==typeof d&&d.length||"number"==typeof d)?n.createElement(l,null,d):d;return n.createElement(n.Fragment,null,m?n.createElement(r,t({},f),n.createElement(i,{$hasHintText:!!d},m,!c&&!h&&n.createElement(a,null," (optional)")),p,b):n.createElement(n.Fragment,null,b))}export{o as LabelWrapper,o as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/LabelWrapper/index.tsx"],"sourcesContent":["import React, { type LabelHTMLAttributes, type ReactNode } from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { LabelText, Label, RequiredIndicationText, HintText } from \"./styles\";\n\ntype LabelWrapperProps = LabelHTMLAttributes<HTMLLabelElement> & {\n  /** label text */\n  label: string;\n  /** hint text or react element in it's place */\n  hintText?: ReactNode;\n  /** if field is required, when not required (optional) appears in label */\n  required?: boolean;\n  /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */\n  hideRequiredIndicationInLabel?: boolean;\n  children?: ReactNode;\n};\n\nexport function LabelWrapper({\n  label,\n  hintText,\n  required = false,\n  hideRequiredIndicationInLabel = false,\n  children,\n  ...otherHTMLLabelProps\n}: LabelWrapperProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const hintTextElement =\n    !!hintText &&\n    ((typeof hintText === \"string\" && hintText.length) ||\n      typeof hintText === \"number\") ? (\n      <HintText>{hintText}</HintText>\n    ) : (\n      hintText\n    );\n\n  return (\n    <ThemeProvider theme={theme}>\n      {label ? (\n        <Label {...otherHTMLLabelProps}>\n          <LabelText $hasHintText={!!hintText}>\n            {label}\n            {!required && !hideRequiredIndicationInLabel && (\n              <RequiredIndicationText>{` (optional)`}</RequiredIndicationText>\n            )}\n          </LabelText>\n          {hintTextElement}\n          {children}\n        </Label>\n      ) : (\n        <>{children}</>\n      )}\n    </ThemeProvider>\n  );\n}\n\nexport default LabelWrapper;\n"],"names":["LabelWrapper","_a","label","hintText","_b","required","_c","hideRequiredIndicationInLabel","children","otherHTMLLabelProps","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","hintTextElement","length","React","createElement","HintText","ThemeProvider","Label","LabelText","$hasHintText","RequiredIndicationText","Fragment"],"mappings":"mTAmBM,SAAUA,EAAaC,GAC3B,IAAAC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAAH,EAAAI,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,kCAAAC,OAA6B,IAAAD,GAAQA,EACrCE,EAAQP,EAAAO,SACLC,EAAmBC,EAAAT,EANK,CAAA,QAAA,WAAA,WAAA,gCAAA,aAQrBU,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGCK,EACFb,IACoB,iBAAbA,GAAyBA,EAASc,QACrB,iBAAbd,GACPe,EAAAC,cAACC,OAAUjB,GAAoB,EAKnC,OACEe,EAAAC,cAACE,EAAa,CAACR,MAAOA,GACnBX,EACCgB,EAAAC,cAACG,OAAUb,GACTS,EAAAC,cAACI,EAAS,CAAAC,eAAiBrB,GACxBD,GACCG,IAAaE,GACbW,EAAAC,cAACM,EAAsB,KAAE,gBAG5BT,EACAR,GAGHU,EAAAC,cAAAD,EAAAQ,SAAA,KAAGlB,GAIX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/LabelWrapper/index.tsx"],"sourcesContent":["import React, { type LabelHTMLAttributes, type ReactNode } from \"react\";\n\nimport { LabelText, Label, RequiredIndicationText, HintText } from \"./styles\";\n\ntype LabelWrapperProps = LabelHTMLAttributes<HTMLLabelElement> & {\n  /** label text */\n  label: string;\n  /** hint text or react element in it's place */\n  hintText?: ReactNode;\n  /** if field is required, when not required (optional) appears in label */\n  required?: boolean;\n  /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */\n  hideRequiredIndicationInLabel?: boolean;\n  children?: ReactNode;\n};\n\nexport function LabelWrapper({\n  label,\n  hintText,\n  required = false,\n  hideRequiredIndicationInLabel = false,\n  children,\n  ...otherHTMLLabelProps\n}: LabelWrapperProps) {\n  const hintTextElement =\n    !!hintText &&\n    ((typeof hintText === \"string\" && hintText.length) ||\n      typeof hintText === \"number\") ? (\n      <HintText>{hintText}</HintText>\n    ) : (\n      hintText\n    );\n\n  return (\n    <>\n      {label ? (\n        <Label {...otherHTMLLabelProps}>\n          <LabelText $hasHintText={!!hintText}>\n            {label}\n            {!required && !hideRequiredIndicationInLabel && (\n              <RequiredIndicationText>{` (optional)`}</RequiredIndicationText>\n            )}\n          </LabelText>\n          {hintTextElement}\n          {children}\n        </Label>\n      ) : (\n        <>{children}</>\n      )}\n    </>\n  );\n}\n\nexport default LabelWrapper;\n"],"names":["LabelWrapper","_a","label","hintText","_b","required","_c","hideRequiredIndicationInLabel","children","otherHTMLLabelProps","__rest","hintTextElement","length","React","createElement","HintText","Fragment","Label","__assign","LabelText","$hasHintText","RequiredIndicationText"],"mappings":"kMAgBM,SAAUA,EAAaC,GAC3B,IAAAC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAAH,EAAAI,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,kCAAAC,OAA6B,IAAAD,GAAQA,EACrCE,EAAQP,EAAAO,SACLC,EAAmBC,EAAAT,EANK,CAAA,QAAA,WAAA,WAAA,gCAAA,aAQrBU,EACFR,IACoB,iBAAbA,GAAyBA,EAASS,QACrB,iBAAbT,GACPU,EAAAC,cAACC,OAAUZ,GAAoB,EAKnC,OACEU,EAAAC,cAAAD,EAAAG,SAAA,KACGd,EACCW,EAAAC,cAACG,EAAKC,EAAA,CAAA,EAAKT,GACTI,EAAAC,cAACK,EAAS,CAAAC,eAAiBjB,GACxBD,GACCG,IAAaE,GACbM,EAAAC,cAACO,EAAsB,KAAE,gBAG5BV,EACAH,GAGHK,EAAAC,cAAAD,EAAAG,SAAA,KAAGR,GAIX"}

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

@@ -1,16 +1,6 @@
-import { type ThemeType } from "../../types";
-type LabelTextProp = {
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+export declare const HintText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const RequiredIndicationText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $hasHintText: boolean;
-    theme: ThemeType;
-};
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
-    theme: ThemeType;
 }>> & string;
-export declare const HintText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    theme: ThemeType;
-}>> & string;
-export declare const RequiredIndicationText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    theme: ThemeType;
-}>> & string;
-export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, LabelTextProp>> & string;
-export {};

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";var o,e,i,r,a=t.label(o||(o=n(["\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: ",";\n  font-weight: ",";\n  margin-bottom: ",";\n"],["\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: ",";\n  font-weight: ",";\n  margin-bottom: ",";\n"])),function(n){return n.theme.typography.fontFamilyLabel},function(n){return n.theme.typography.fontWeightLabels},function(n){return n.theme.spacing.s}),f=t.span(e||(e=n(["\n  font-family: ",";\n  font-weight: ",";\n  display: block;\n  color: ",";\n  margin-bottom: ",";\n"],["\n  font-family: ",";\n  font-weight: ",";\n  display: block;\n  color: ",";\n  margin-bottom: ",";\n"])),function(n){return n.theme.typography.fontFamilyLabel},function(n){return n.theme.typography.fontWeightBase},function(n){return n.theme.colors.textMid},function(n){return n.theme.spacing.xs}),m=t.span(i||(i=n(["\n  font-family: ",";\n  font-weight: ",";\n"],["\n  font-family: ",";\n  font-weight: ",";\n"])),function(n){return n.theme.typography.fontFamilyLabel},function(n){return n.theme.typography.fontWeightBase}),l=t.span(r||(r=n(["\n  font-family: ",";\n  font-weight: ",";\n  display: block;\n  margin-bottom: ",";\n\n  // increase font size for desktop\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  font-family: ",";\n  font-weight: ",";\n  display: block;\n  margin-bottom: ",";\n\n  // increase font size for desktop\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),function(n){return n.theme.typography.fontFamilyLabel},function(n){return n.theme.typography.fontWeightLabels},function(n){var t=n.$hasHintText,o=n.theme;return t?o.spacing.xxxs:o.spacing.xs},function(n){return n.theme.breakpoint.desktopLarge},function(n){return n.theme.fontSizes.ml});export{f as HintText,a as Label,l as LabelText,m as RequiredIndicationText};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";var a,i,o,s,e=t.label(a||(a=n(['\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-labels, 500);\n  margin-bottom: var(--spacing-s, 1.5rem);\n'],['\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-labels, 500);\n  margin-bottom: var(--spacing-s, 1.5rem);\n']))),l=t.span(i||(i=n(['\n  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-base, 300);\n  display: block;\n  color: var(--clr-text-mid, #666);\n  margin-bottom: var(--spacing-xs, 1rem);\n'],['\n  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-base, 300);\n  display: block;\n  color: var(--clr-text-mid, #666);\n  margin-bottom: var(--spacing-xs, 1rem);\n']))),r=t.span(o||(o=n(['\n  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-base, 300);\n'],['\n  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-base, 300);\n']))),f=t.span(s||(s=n(['\n  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-labels, 500);\n  display: block;\n  margin-bottom: ',";\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n"],['\n  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-labels, 500);\n  display: block;\n  margin-bottom: ',";\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n"])),function(n){return n.$hasHintText?"var(--spacing-xxxs, 0.25rem)":"var(--spacing-xs, 1rem)"});export{l as HintText,e as Label,f as LabelText,r as RequiredIndicationText};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/LabelWrapper/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype LabelTextProp = {\n  $hasHintText: boolean;\n  theme: ThemeType;\n};\n\nexport const Label = styled.label<{ theme: ThemeType }>`\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels};\n  margin-bottom: ${({ theme }) => theme.spacing.s};\n`;\n\nexport const HintText = styled.span<{ theme: ThemeType }>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n  display: block;\n  color: ${({ theme }) => theme.colors.textMid};\n  margin-bottom: ${({ theme }) => theme.spacing.xs};\n`;\n\nexport const RequiredIndicationText = styled.span<{ theme: ThemeType }>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n`;\n\nexport const LabelText = styled.span<LabelTextProp>`\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels};\n  display: block;\n  margin-bottom: ${({ $hasHintText, theme }) =>\n    $hasHintText ? theme.spacing.xxxs : theme.spacing.xs};\n\n  // increase font size for desktop\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktopLarge}) {\n    font-size: ${({ theme }) => theme.fontSizes.ml};\n  }\n`;\n"],"names":["Label","styled","label","templateObject_1","__makeTemplateObject","_a","theme","typography","fontFamilyLabel","fontWeightLabels","spacing","s","HintText","span","templateObject_2","fontWeightBase","colors","textMid","xs","RequiredIndicationText","templateObject_3","LabelText","$hasHintText","xxxs","breakpoint","desktopLarge","fontSizes","ml"],"mappings":"iHAQO,YAAMA,EAAQC,EAAOC,MAAKC,IAAAA,EAAAC,EAAA,CAAA,8EAAA,qBAAA,uBAAA,OAAA,CAAsB,8EAIS,qBACC,uBAChB,SAFhC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,EACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWE,gBAAjB,EACb,SAACJ,GAAc,OAAPA,EAAAC,MAAaI,QAAQC,CAAd,GAGrBC,EAAWX,EAAOY,KAAIC,IAAAA,EAAAV,EAAA,CAAA,oBAAA,qBAAA,kCAAA,uBAAA,OAAA,CAAsB,oBACO,qBACD,kCAEjB,uBACI,SAJjC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,EACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWQ,cAAjB,EAErB,SAACV,GAAc,OAAPA,EAAAC,MAAaU,OAAOC,OAAb,EACP,SAACZ,GAAc,OAAPA,EAAAC,MAAaI,QAAQQ,EAAd,GAGrBC,EAAyBlB,EAAOY,KAAIO,IAAAA,EAAAhB,EAAA,CAAA,oBAAA,qBAAA,OAAA,CAAsB,oBACP,qBACD,SAD9C,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,EACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWQ,cAAjB,GAGnBM,EAAYpB,EAAOY,uMAAmB,oBACa,qBACC,0CAGT,kEAGW,uBACjB,cARjC,SAACR,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,EACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWE,gBAAjB,EAEb,SAACJ,OAAEiB,EAAYjB,EAAAiB,aAAEhB,EAAKD,EAAAC,MACrC,OAAAgB,EAAehB,EAAMI,QAAQa,KAAOjB,EAAMI,QAAQQ,EAAlD,EAGmB,SAACb,GAAc,OAAPA,EAAAC,MAAakB,WAAWC,YAAjB,EACrB,SAACpB,GAAc,OAAPA,EAAAC,MAAaoB,UAAUC,EAAhB"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/LabelWrapper/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const Label = styled.label`\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: var(--typ-font-family-label, \"Poppins\", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-labels, 500);\n  margin-bottom: var(--spacing-s, 1.5rem);\n`;\n\nexport const HintText = styled.span`\n  font-family: var(--typ-font-family-label, \"Poppins\", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-base, 300);\n  display: block;\n  color: var(--clr-text-mid, #666);\n  margin-bottom: var(--spacing-xs, 1rem);\n`;\n\nexport const RequiredIndicationText = styled.span`\n  font-family: var(--typ-font-family-label, \"Poppins\", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-base, 300);\n`;\n\nexport const LabelText = styled.span<{\n  $hasHintText: boolean;\n}>`\n  font-family: var(--typ-font-family-label, \"Poppins\", Arial, sans-serif);\n  font-weight: var(--typ-font-weight-labels, 500);\n  display: block;\n  margin-bottom: ${({ $hasHintText }) =>\n    $hasHintText ? \"var(--spacing-xxxs, 0.25rem)\" : \"var(--spacing-xs, 1rem)\"};\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n`;\n"],"names":["Label","styled","label","templateObject_1","__makeTemplateObject","HintText","span","templateObject_2","RequiredIndicationText","templateObject_3","LabelText","templateObject_4","_a","$hasHintText"],"mappings":"iHAEO,YAAMA,EAAQC,EAAOC,MAAKC,IAAAA,EAAAC,EAAA,CAAA,4OAAA,CAAA,+OASpBC,EAAWJ,EAAOK,KAAIC,IAAAA,EAAAH,EAAA,CAAA,uOAAA,CAAA,0OAQtBI,EAAyBP,EAAOK,KAAIG,IAAAA,EAAAL,EAAA,CAAA,oIAAA,CAAA,uIAKpCM,EAAYT,EAAOK,KAAIK,IAAAA,EAAAP,EAAA,CAAA,yKAAA,kIAAA,CAElC,yKAK2E,oIAD1D,SAACQ,GAChB,OAD8BA,EAAAC,aACf,+BAAiC,yBAAhD"}

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as n,ThemeProvider as o}from"styled-components";import{crukTheme as s}from"../../themes/cruk.js";import{ErrorText as m}from"../ErrorText/index.js";import{HintText as l,StyledFieldset as a,LegendSpan as i}from"./styles.js";function c(c){var p=c.children,d=c.legendText,h=c.required,x=c.errorMessage,E=c.hasError,f=c.hintText,u=e(c,["children","legendText","required","errorMessage","hasError","hintText"]),T=n(),g=r(r({},s),T),j=!f||"string"!=typeof f&&"number"!=typeof f?f:t.createElement(l,null,f);return t.createElement(o,{theme:g},t.createElement(a,{$hasError:E||!!x||!1,$hasHintText:!!f},d&&t.createElement("legend",r({},u),t.createElement(i,{$hasHintText:!!f},d," ",!h&&t.createElement("span",null,"(optional)")),j),p,!!x&&t.createElement(m,{marginTop:"xxs"},x)))}export{c as LegendWrapper,c as default};
+import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{ErrorText as n}from"../ErrorText/index.js";import{HintText as o,StyledFieldset as s,LegendSpan as l}from"./styles.js";function a(a){var i=a.children,m=a.legendText,d=a.required,x=a.errorMessage,c=a.hasError,p=a.hintText,E=e(a,["children","legendText","required","errorMessage","hasError","hintText"]),h=!p||"string"!=typeof p&&"number"!=typeof p?p:t.createElement(o,null,p);return t.createElement(s,{$hasError:c||!!x||!1,$hasHintText:!!p},m&&t.createElement("legend",r({},E),t.createElement(l,{$hasHintText:!!p},m," ",!d&&t.createElement("span",null,"(optional)")),h),i,!!x&&t.createElement(n,{marginTop:"xxs"},x))}export{a as LegendWrapper,a as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/LegendWrapper/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type ReactNode } from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport { StyledFieldset, LegendSpan, HintText } from \"./styles\";\n\nexport type LegendWrapperProps = HTMLAttributes<HTMLLegendElement> & {\n  children?: ReactNode;\n  /** legend text */\n  legendText: string;\n  /** error message text  */\n  errorMessage?: string;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** if field is required, when not required (optional) appears in legend */\n  required?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n};\n/**\n * LegendWrapper allows the user to add an outer label for a checkbox / group of checkboxes / radio buttons or a group of radio buttons.\n *\n * hasError and errorMessage props are just props that can be passed into the component.\n * There is no functionality checking if the children are valid/required etc this functionality will be needed to ne added outside of this component.\n */\nexport function LegendWrapper({\n  children,\n  legendText,\n  required,\n  errorMessage,\n  hasError,\n  hintText,\n  ...restOfHTMLAttributes\n}: LegendWrapperProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const hintTextElement =\n    !!hintText &&\n    (typeof hintText === \"string\" || typeof hintText === \"number\") ? (\n      <HintText>{hintText}</HintText>\n    ) : (\n      hintText\n    );\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledFieldset\n        $hasError={hasError || !!errorMessage || false}\n        $hasHintText={!!hintText}\n      >\n        {legendText && (\n          <legend {...restOfHTMLAttributes}>\n            <LegendSpan $hasHintText={!!hintText}>\n              {legendText} {!required && <span>(optional)</span>}\n            </LegendSpan>\n            {hintTextElement}\n          </legend>\n        )}\n        {children}\n        {!!errorMessage && (\n          <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>\n        )}\n      </StyledFieldset>\n    </ThemeProvider>\n  );\n}\n\nexport default LegendWrapper;\n"],"names":["LegendWrapper","_a","children","legendText","required","errorMessage","hasError","hintText","restOfHTMLAttributes","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","hintTextElement","React","createElement","HintText","ThemeProvider","StyledFieldset","$hasError","$hasHintText","LegendSpan","ErrorText","marginTop"],"mappings":"mVA2BM,SAAUA,EAAcC,GAC5B,IAAAC,aACAC,eACAC,aACAC,iBACAC,aACAC,aACGC,EAAoBC,EAAAR,EAPK,CAAA,WAAA,aAAA,WAAA,eAAA,WAAA,aAStBS,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGCK,GACFR,GACmB,iBAAbA,GAA6C,iBAAbA,EACP,EAA/BS,EAAAC,cAACC,EAAQ,KAAEX,GAIf,OACES,EAAAC,cAACE,EAAa,CAACP,MAAOA,GACpBI,EAAAC,cAACG,EAAc,CAAAC,UACFf,KAAcD,IAAgB,EAAKiB,eAC9Bf,GAEfJ,GACCa,EAAAC,cAAA,SAAAJ,EAAA,CAAA,EAAYL,GACVQ,EAAAC,cAACM,EAAU,CAAAD,eAAiBf,GACzBJ,OAAcC,GAAYY,EAAAC,cAAA,OAAA,KAAA,eAE5BF,GAGJb,IACEG,GACDW,EAAAC,cAACO,EAAS,CAACC,UAAU,OAAOpB,IAKtC"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/LegendWrapper/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { ErrorText } from \"../ErrorText\";\n\nimport { StyledFieldset, LegendSpan, HintText } from \"./styles\";\n\nexport type LegendWrapperProps = HTMLAttributes<HTMLLegendElement> & {\n  children?: ReactNode;\n  /** legend text */\n  legendText: string;\n  /** error message text  */\n  errorMessage?: string;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** if field is required, when not required (optional) appears in legend */\n  required?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n};\n/**\n * LegendWrapper allows the user to add an outer label for a checkbox / group of checkboxes / radio buttons or a group of radio buttons.\n *\n * hasError and errorMessage props are just props that can be passed into the component.\n * There is no functionality checking if the children are valid/required etc this functionality will be needed to ne added outside of this component.\n */\nexport function LegendWrapper({\n  children,\n  legendText,\n  required,\n  errorMessage,\n  hasError,\n  hintText,\n  ...restOfHTMLAttributes\n}: LegendWrapperProps) {\n  const hintTextElement =\n    !!hintText &&\n    (typeof hintText === \"string\" || typeof hintText === \"number\") ? (\n      <HintText>{hintText}</HintText>\n    ) : (\n      hintText\n    );\n  return (\n    <StyledFieldset\n      $hasError={hasError || !!errorMessage || false}\n      $hasHintText={!!hintText}\n    >\n      {legendText && (\n        <legend {...restOfHTMLAttributes}>\n          <LegendSpan $hasHintText={!!hintText}>\n            {legendText} {!required && <span>(optional)</span>}\n          </LegendSpan>\n          {hintTextElement}\n        </legend>\n      )}\n      {children}\n      {!!errorMessage && <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>}\n    </StyledFieldset>\n  );\n}\n\nexport default LegendWrapper;\n"],"names":["LegendWrapper","_a","children","legendText","required","errorMessage","hasError","hintText","restOfHTMLAttributes","__rest","hintTextElement","React","createElement","HintText","StyledFieldset","$hasError","$hasHintText","__assign","LegendSpan","ErrorText","marginTop"],"mappings":"kOAyBM,SAAUA,EAAcC,GAC5B,IAAAC,aACAC,eACAC,aACAC,iBACAC,aACAC,aACGC,EAAoBC,EAAAR,EAPK,CAAA,WAAA,aAAA,WAAA,eAAA,WAAA,aAStBS,GACFH,GACmB,iBAAbA,GAA6C,iBAAbA,EACP,EAA/BI,EAAAC,cAACC,EAAQ,KAAEN,GAIf,OACEI,EAAAC,cAACE,EAAc,CAAAC,UACFT,KAAcD,IAAgB,EAAKW,eAC9BT,GAEfJ,GACCQ,EAAAC,cAAA,SAAAK,EAAA,CAAA,EAAYT,GACVG,EAAAC,cAACM,EAAU,CAAAF,eAAiBT,GACzBJ,OAAcC,GAAYO,EAAAC,cAAA,OAAA,KAAA,eAE5BF,GAGJR,IACEG,GAAgBM,EAAAC,cAACO,EAAS,CAACC,UAAU,OAAOf,GAGrD"}

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

@@ -1,15 +1,10 @@
-import { type ThemeType } from "../../types";
 type StyledFieldsetProps = {
     $hasError?: boolean;
     $hasHintText?: boolean;
-    theme: ThemeType;
 };
 export declare const LegendSpan: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $hasHintText: boolean;
-    theme: ThemeType;
-}>> & string;
-export declare const HintText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    theme: ThemeType;
 }>> & string;
+export declare const HintText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const StyledFieldset: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, StyledFieldsetProps>> & string;
 export {};