@cruk/cruk-react-components 5.0.0 → 5.0.1

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

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

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

package/lib/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 m}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{H1 as h,H2 as l,H3 as n,H4 as s,H5 as a,H6 as c}from"./styles.js";function i(i){var f=i.h1,p=i.h2,E=i.h3,u=i.h4,d=i.h5,j=i.h6,b=e(i,["h1","h2","h3","h4","h5","h6"]),y=m(),k=t(t({},o),y),v=t(t({},b),{theme:k});return f?r.createElement(h,t({},v)):p?r.createElement(l,t({},v)):E?r.createElement(n,t({},v)):u?r.createElement(s,t({},v)):d?r.createElement(a,t({},v)):j?r.createElement(c,t({},v)):r.createElement(l,t({},v))}export{i as Heading,i as default};
+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};
 //# 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 { type SpacingProps } 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    /** 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    /** word-break behavior */\n    wordBreak?: WordBreakType;\n    /** overflow-wrap behavior */\n    overflowWrap?: OverflowWrapType;\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({ h1, h2, h3, h4, h5, h6, ...props }: HeadingProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const propsWithTheme = {\n    ...props,\n    theme,\n  };\n\n  if (h1) return <H1 {...propsWithTheme} />;\n  if (h2) return <H2 {...propsWithTheme} />;\n  if (h3) return <H3 {...propsWithTheme} />;\n  if (h4) return <H4 {...propsWithTheme} />;\n  if (h5) return <H5 {...propsWithTheme} />;\n  if (h6) return <H6 {...propsWithTheme} />;\n  return <H2 {...propsWithTheme} />;\n}\n\nexport default Heading;\n"],"names":["Heading","_a","h1","h2","h3","h4","h5","h6","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","propsWithTheme","React","createElement","H1","H2","H3","H4","H5","H6"],"mappings":"4QA0CM,SAAUA,EAAQC,GAAE,IAAAC,OAAIC,OAAIC,OAAIC,OAAIC,OAAIC,OAAOC,EAA7BC,EAAAR,EAAA,CAAA,KAAA,KAAA,KAAA,KAAA,KAAA,OAChBS,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACDF,EAAAA,EAAA,CAAA,EAAAL,IACHI,MAAKA,IAGP,OAAIV,EAAWc,EAACC,cAAAC,EAAOL,EAAA,CAAA,EAAAE,IACnBZ,EAAWa,EAACC,cAAAE,EAAON,EAAA,CAAA,EAAAE,IACnBX,EAAWY,EAACC,cAAAG,EAAOP,EAAA,CAAA,EAAAE,IACnBV,EAAWW,EAACC,cAAAI,EAAOR,EAAA,CAAA,EAAAE,IACnBT,EAAWU,EAACC,cAAAK,EAAOT,EAAA,CAAA,EAAAE,IACnBR,EAAWS,EAACC,cAAAM,EAAOV,EAAA,CAAA,EAAAE,IAChBC,EAACC,cAAAE,EAAON,EAAA,CAAA,EAAAE,GACjB"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Heading/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type ElementType } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\n\nimport {\n  type FontSizeType,\n  type WordBreakType,\n  type OverflowWrapType,\n} from \"../../types\";\nimport { H1, H2, H3, H4, H5, H6 } from \"./styles\";\n\nexport type HeadingProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    h1?: boolean;\n    h2?: boolean;\n    h3?: boolean;\n    h4?: boolean;\n    h5?: boolean;\n    h6?: boolean;\n    /** font size FontSizeType t-shirt sizes  */\n    textSize?: FontSizeType;\n    /** horizontal alignment of text */\n    textAlign?: \"left\" | \"right\" | \"center\";\n    /** color of text */\n    textColor?: string;\n    /** word-break behavior */\n    wordBreak?: WordBreakType;\n    /** overflow-wrap behavior */\n    overflowWrap?: OverflowWrapType;\n    /** styled-component polymorphic feature so you take the styling of a header and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n * \n * Use headings consistently to create a clear hierarchy throughout your service.\nMarkup headings semantically using the appropriate <h#> level HTML element and\nuse the corresponding heading class (h1, h2, h3, ....). Write all headings in sentence case. Heading differs from the Text component by using a different font-family and it changes the font size according to the screen width breakpoints.\n * \n */\nexport function Heading({\n  textSize,\n  textAlign,\n  textColor,\n  wordBreak,\n  overflowWrap,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  ...props\n}: HeadingProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const propsConvertedToInternalSpacingProps =\n    spacingPropsToSpacingPropsInternal(props);\n\n  if (h1)\n    return (\n      <H1\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h2)\n    return (\n      <H2\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h3)\n    return (\n      <H3\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h4)\n    return (\n      <H4\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h5)\n    return (\n      <H5\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h6)\n    return (\n      <H6\n        {...propsConvertedToInternalSpacingProps}\n        theme={theme}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColor}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  return (\n    <H2\n      {...propsConvertedToInternalSpacingProps}\n      theme={theme}\n      $textSize={textSize}\n      $textAlign={textAlign}\n      $textColor={textColor}\n      $wordBreak={wordBreak}\n      $overflowWrap={overflowWrap}\n    />\n  );\n}\n\nexport default Heading;\n"],"names":["Heading","_a","textSize","textAlign","textColor","wordBreak","overflowWrap","h1","h2","h3","h4","h5","h6","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","propsConvertedToInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","H1","$textSize","$textAlign","$wordBreak","$overflowWrap","H2","H3","H4","H5","H6"],"mappings":"qVA6CM,SAAUA,EAAQC,GACtB,IAAAC,EAAQD,EAAAC,SACRC,EAASF,EAAAE,UACTC,EAASH,EAAAG,UACTC,cACAC,EAAYL,EAAAK,aACZC,EAAEN,EAAAM,GACFC,EAAEP,EAAAO,GACFC,EAAER,EAAAQ,GACFC,OACAC,EAAEV,EAAAU,GACFC,EAAEX,EAAAW,GACCC,EAAKC,EAAAb,EAZc,+FAchBc,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACJC,EAAmCR,GAErC,OAAIN,EAEAe,gBAACC,EAAEL,EAAA,CAAA,EACGE,EACJ,CAAAH,MAAOA,EAAKO,UACDtB,EACCuB,WAAAtB,aACAC,EAASsB,WACTrB,EACGsB,cAAArB,KAGjBE,EAEAc,gBAACM,EAAEV,EAAA,CAAA,EACGE,EACJ,CAAAH,MAAOA,EAAKO,UACDtB,EACCuB,WAAAtB,aACAC,EAASsB,WACTrB,EACGsB,cAAArB,KAGjBG,EAEAa,gBAACO,EAAEX,EAAA,CAAA,EACGE,EACJ,CAAAH,MAAOA,EAAKO,UACDtB,EACCuB,WAAAtB,aACAC,EAASsB,WACTrB,EACGsB,cAAArB,KAGjBI,EAEAY,gBAACQ,EAAEZ,EAAA,CAAA,EACGE,EACJ,CAAAH,MAAOA,EAAKO,UACDtB,EACCuB,WAAAtB,aACAC,EAASsB,WACTrB,EACGsB,cAAArB,KAGjBK,EAEAW,gBAACS,EAAEb,EAAA,CAAA,EACGE,EACJ,CAAAH,MAAOA,EAAKO,UACDtB,EACCuB,WAAAtB,aACAC,EAASsB,WACTrB,EACGsB,cAAArB,KAGjBM,EAEAU,gBAACU,EAAEd,EAAA,CAAA,EACGE,EACJ,CAAAH,MAAOA,EAAKO,UACDtB,EACCuB,WAAAtB,aACAC,EAASsB,WACTrB,EACGsB,cAAArB,KAInBgB,gBAACM,EAAEV,EAAA,CAAA,EACGE,EACJ,CAAAH,MAAOA,EAAKO,UACDtB,EACCuB,WAAAtB,aACAC,EAASsB,WACTrB,EACGsB,cAAArB,IAGrB"}

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

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

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

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as l,ThemeProvider as n}from"styled-components";import{Text as i}from"../Text/index.js";import{crukTheme as m}from"../../themes/cruk.js";import{Label as o,LabelText as a,RequiredText as d}from"./styles.js";function s(s){var u=s.label,c=s.hintText,f=s.required,h=void 0!==f&&f,p=s.hideRequiredInLabel,b=void 0!==p&&p,x=s.children,E=e(s,["label","hintText","required","hideRequiredInLabel","children"]),q=l(),j=t(t({},m),q),y=c&&("string"==typeof c&&c.length||"number"==typeof c)?r.createElement(i,null,c):c;return r.createElement(n,{theme:j},u?r.createElement(o,t({},E),r.createElement(a,{hasHintText:!!c},u,h&&!b&&r.createElement(d,null," (required)")),y,x):r.createElement(r.Fragment,null,x))}export{s as LabelWrapper,s as default};
+import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as l,ThemeProvider as n}from"styled-components";import{Text as i}from"../Text/index.js";import{crukTheme as m}from"../../themes/cruk.js";import{Label as o,LabelText as a,RequiredText as d}from"./styles.js";function s(s){var u=s.label,c=s.hintText,f=s.required,h=void 0!==f&&f,p=s.hideRequiredInLabel,b=void 0!==p&&p,x=s.children,E=e(s,["label","hintText","required","hideRequiredInLabel","children"]),q=l(),j=t(t({},m),q),y=c&&("string"==typeof c&&c.length||"number"==typeof c)?r.createElement(i,null,c):c;return r.createElement(n,{theme:j},u?r.createElement(o,t({},E),r.createElement(a,{$hasHintText:!!c},u,h&&!b&&r.createElement(d,null," (required)")),y,x):r.createElement(r.Fragment,null,x))}export{s as LabelWrapper,s as default};
 //# 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 { Text } from \"../Text\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { LabelText, Label, RequiredText } 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  /** when required (required) appears in label */\n  required?: boolean;\n  /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n  hideRequiredInLabel?: boolean;\n  children?: ReactNode;\n};\n\nexport function LabelWrapper({\n  label,\n  hintText,\n  required = false,\n  hideRequiredInLabel = 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      <Text>{hintText}</Text>\n    ) : (\n      hintText\n    );\n\n  return (\n    <ThemeProvider theme={theme}>\n      {label ? (\n        <Label {...otherHTMLLabelProps}>\n          <LabelText hasHintText={!!hintText}>\n            {label}\n            {required && !hideRequiredInLabel && (\n              <RequiredText>{` (required)`}</RequiredText>\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","hideRequiredInLabel","children","otherHTMLLabelProps","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","hintTextElement","length","React","createElement","Text","ThemeProvider","Label","LabelText","hasHintText","RequiredText","Fragment"],"mappings":"mUAoBM,SAAUA,EAAaC,GAC3B,IAAAC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAAH,EAAAI,SAAAA,OAAW,IAAAD,GAAKA,EAChBE,wBAAAC,OAAsB,IAAAD,GAAKA,EAC3BE,EAAQP,EAAAO,SACLC,EANwBC,EAAAT,EAAA,CAAA,QAAA,WAAA,WAAA,sBAAA,aAQrBU,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACFb,IACoB,iBAAbA,GAAyBA,EAASc,QACrB,iBAAbd,GACPe,EAACC,cAAAC,OAAMjB,GAEP,EAGJ,OACEe,EAACC,cAAAE,EAAc,CAAAR,MAAOA,GACnBX,EACCgB,EAACC,cAAAG,OAAUb,GACTS,EAAAC,cAACI,EAAU,CAAAC,cAAerB,GACvBD,EACAG,IAAaE,GACZW,EAACC,cAAAM,EAAc,KAAA,gBAGlBT,EACAR,GAGHU,EAAGC,cAAAD,EAAAQ,SAAA,KAAAlB,GAIX"}
+{"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 { Text } from \"../Text\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { LabelText, Label, RequiredText } 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  /** when required (required) appears in label */\n  required?: boolean;\n  /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n  hideRequiredInLabel?: boolean;\n  children?: ReactNode;\n};\n\nexport function LabelWrapper({\n  label,\n  hintText,\n  required = false,\n  hideRequiredInLabel = 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      <Text>{hintText}</Text>\n    ) : (\n      hintText\n    );\n\n  return (\n    <ThemeProvider theme={theme}>\n      {label ? (\n        <Label {...otherHTMLLabelProps}>\n          <LabelText $hasHintText={!!hintText}>\n            {label}\n            {required && !hideRequiredInLabel && (\n              <RequiredText>{` (required)`}</RequiredText>\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","hideRequiredInLabel","children","otherHTMLLabelProps","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","hintTextElement","length","React","createElement","Text","ThemeProvider","Label","LabelText","$hasHintText","RequiredText","Fragment"],"mappings":"mUAoBM,SAAUA,EAAaC,GAC3B,IAAAC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAAH,EAAAI,SAAAA,OAAW,IAAAD,GAAKA,EAChBE,wBAAAC,OAAsB,IAAAD,GAAKA,EAC3BE,EAAQP,EAAAO,SACLC,EANwBC,EAAAT,EAAA,CAAA,QAAA,WAAA,WAAA,sBAAA,aAQrBU,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACFb,IACoB,iBAAbA,GAAyBA,EAASc,QACrB,iBAAbd,GACPe,EAACC,cAAAC,OAAMjB,GAEP,EAGJ,OACEe,EAACC,cAAAE,EAAc,CAAAR,MAAOA,GACnBX,EACCgB,EAACC,cAAAG,OAAUb,GACTS,EAAAC,cAACI,EAAS,CAAAC,eAAiBrB,GACxBD,EACAG,IAAaE,GACZW,EAACC,cAAAM,EAAc,KAAA,gBAGlBT,EACAR,GAGHU,EAAGC,cAAAD,EAAAQ,SAAA,KAAAlB,GAIX"}

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,a=t.label(o||(o=n(["\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: ",";\n  font-weight: ",";\n"],["\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: ",";\n  font-weight: ",";\n"])),(function(n){return n.theme.typography.fontFamilyLabel}),(function(n){return n.theme.typography.fontWeightLabels})),f=t.span(e||(e=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})),r=t.span(i||(i=n(["\n  font-family: ",";\n  font-weight: ",";\n  display: block;\n  margin-bottom: ",";\n"],["\n  font-family: ",";\n  font-weight: ",";\n  display: block;\n  margin-bottom: ",";\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.xxs:o.spacing.xs}));export{a as Label,r as LabelText,f as RequiredText};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";var o,e,i,a=t.label(o||(o=n(["\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: ",";\n  font-weight: ",";\n"],["\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: ",";\n  font-weight: ",";\n"])),(function(n){return n.theme.typography.fontFamilyLabel}),(function(n){return n.theme.typography.fontWeightLabels})),f=t.span(e||(e=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})),r=t.span(i||(i=n(["\n  font-family: ",";\n  font-weight: ",";\n  display: block;\n  margin-bottom: ",";\n"],["\n  font-family: ",";\n  font-weight: ",";\n  display: block;\n  margin-bottom: ",";\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.xxs:o.spacing.xs}));export{a as Label,r as LabelText,f as RequiredText};
 //# 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`;\n\nexport const RequiredText = 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.xxs : theme.spacing.xs};\n`;\n"],"names":["Label","styled","label","templateObject_1","__makeTemplateObject","_a","theme","typography","fontFamilyLabel","fontWeightLabels","RequiredText","span","templateObject_2","fontWeightBase","LabelText","templateObject_3","hasHintText","spacing","xxs","xs"],"mappings":"iHAQO,UAAMA,EAAQC,EAAOC,MAA2BC,IAAAA,EAAAC,EAAA,CAAA,8EAAA,qBAAA,OAAA,CAAA,8EAIS,qBACC,UADhD,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWE,gBAAjB,IAGnBC,EAAeT,EAAOU,KAA0BC,IAAAA,EAAAR,EAAA,CAAA,oBAAA,qBAAA,OAAA,CAAA,oBACG,qBACD,UAD9C,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWM,cAAjB,IAGnBC,EAAYb,EAAOU,KAAII,IAAAA,EAAAX,EAAA,CAAA,oBAAA,qBAAA,0CAAA,OAAA,CAAe,oBACa,qBACC,0CAGX,UAJrC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWE,gBAAjB,IAEb,SAACJ,OAAEW,EAAWX,EAAAW,YAAEV,EAAKD,EAAAC,MACpC,OAAAU,EAAcV,EAAMW,QAAQC,IAAMZ,EAAMW,QAAQE,EAAhD"}
+{"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`;\n\nexport const RequiredText = 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.xxs : theme.spacing.xs};\n`;\n"],"names":["Label","styled","label","templateObject_1","__makeTemplateObject","_a","theme","typography","fontFamilyLabel","fontWeightLabels","RequiredText","span","templateObject_2","fontWeightBase","LabelText","templateObject_3","$hasHintText","spacing","xxs","xs"],"mappings":"iHAQO,UAAMA,EAAQC,EAAOC,MAA2BC,IAAAA,EAAAC,EAAA,CAAA,8EAAA,qBAAA,OAAA,CAAA,8EAIS,qBACC,UADhD,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWE,gBAAjB,IAGnBC,EAAeT,EAAOU,KAA0BC,IAAAA,EAAAR,EAAA,CAAA,oBAAA,qBAAA,OAAA,CAAA,oBACG,qBACD,UAD9C,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWM,cAAjB,IAGnBC,EAAYb,EAAOU,KAAII,IAAAA,EAAAX,EAAA,CAAA,oBAAA,qBAAA,0CAAA,OAAA,CAAe,oBACa,qBACC,0CAGV,UAJtC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,eAAjB,IACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,WAAWE,gBAAjB,IAEb,SAACJ,OAAEW,EAAYX,EAAAW,aAAEV,EAAKD,EAAAC,MACrC,OAAAU,EAAeV,EAAMW,QAAQC,IAAMZ,EAAMW,QAAQE,EAAjD"}

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{Text as i}from"../Text/index.js";import{StyledFieldset as a,LegendSpan as l}from"./styles.js";function d(d){var p=d.children,c=d.legendText,x=d.required,f=d.errorMessage,h=d.hasError,E=d.hintText,u=e(d,["children","legendText","required","errorMessage","hasError","hintText"]),T=n(),g=r(r({},s),T),j=!E||"string"!=typeof E&&"number"!=typeof E?E:t.createElement(i,{as:"span"},E);return t.createElement(o,{theme:g},t.createElement(a,{hasError:h||!!f||!1,hasHintText:!!E},c&&t.createElement("legend",r({},u),t.createElement(l,{hasHintText:!!E},c," ",x&&t.createElement("span",null,"(required)")),j),p,!!f&&t.createElement(m,{marginTop:"xxs"},f)))}export{d as LegendWrapper,d as default};
+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{Text as i}from"../Text/index.js";import{StyledFieldset as a,LegendSpan as l}from"./styles.js";function d(d){var p=d.children,c=d.legendText,x=d.required,f=d.errorMessage,h=d.hasError,E=d.hintText,u=e(d,["children","legendText","required","errorMessage","hasError","hintText"]),T=n(),g=r(r({},s),T),j=!E||"string"!=typeof E&&"number"!=typeof E?E:t.createElement(i,{as:"span"},E);return t.createElement(o,{theme:g},t.createElement(a,{$hasError:h||!!f||!1,$hasHintText:!!E},c&&t.createElement("legend",r({},u),t.createElement(l,{$hasHintText:!!E},c," ",x&&t.createElement("span",null,"(required)")),j),p,!!f&&t.createElement(m,{marginTop:"xxs"},f)))}export{d as LegendWrapper,d 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\";\nimport { Text } from \"../Text\";\n\nimport { StyledFieldset, LegendSpan } 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  /** when required (required) 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  const hintTextElement =\n    !!hintText &&\n    (typeof hintText === \"string\" || typeof hintText === \"number\") ? (\n      <Text as=\"span\">{hintText}</Text>\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>(required)</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","Text","as","ThemeProvider","StyledFieldset","hasHintText","LegendSpan","ErrorText","marginTop"],"mappings":"6WA4BM,SAAUA,EAAcC,GAC5B,IAAAC,aACAC,eACAC,aACAC,iBACAC,aACAC,aACGC,EAPyBC,EAAAR,EAAA,CAAA,WAAA,aAAA,WAAA,eAAA,WAAA,aAStBS,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,GACFR,GACmB,iBAAbA,GAA6C,iBAAbA,EACL,EAAjCS,EAAAC,cAACC,EAAI,CAACC,GAAG,QAAQZ,GAIrB,OACES,EAACC,cAAAG,EAAc,CAAAR,MAAOA,GACpBI,EAAAC,cAACI,EACC,CAAAf,SAAUA,KAAcD,IAAgB,EACxCiB,cAAef,GAEdJ,GACCa,EAAAC,cAAA,SAAAJ,EAAA,CAAA,EAAYL,GACVQ,EAAAC,cAACM,EAAW,CAAAD,cAAef,GACxBJ,MAAaC,GAAYY,2CAE3BD,GAGJb,IACEG,GACDW,EAAAC,cAACO,EAAU,CAAAC,UAAU,OAAOpB,IAKtC"}
+{"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\";\nimport { Text } from \"../Text\";\n\nimport { StyledFieldset, LegendSpan } 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  /** when required (required) 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      <Text as=\"span\">{hintText}</Text>\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>(required)</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","Text","as","ThemeProvider","StyledFieldset","$hasError","$hasHintText","LegendSpan","ErrorText","marginTop"],"mappings":"6WA4BM,SAAUA,EAAcC,GAC5B,IAAAC,aACAC,eACAC,aACAC,iBACAC,aACAC,aACGC,EAPyBC,EAAAR,EAAA,CAAA,WAAA,aAAA,WAAA,eAAA,WAAA,aAStBS,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,GACFR,GACmB,iBAAbA,GAA6C,iBAAbA,EACL,EAAjCS,EAAAC,cAACC,EAAI,CAACC,GAAG,QAAQZ,GAIrB,OACES,EAACC,cAAAG,EAAc,CAAAR,MAAOA,GACpBI,EAAAC,cAACI,EAAc,CAAAC,UACFhB,KAAcD,IAAgB,EAAKkB,eAC9BhB,GAEfJ,GACCa,EAAAC,cAAA,SAAAJ,EAAA,CAAA,EAAYL,GACVQ,EAAAC,cAACO,EAAU,CAAAD,eAAiBhB,GACzBJ,MAAaC,GAAYY,2CAE3BD,GAGJb,IACEG,GACDW,EAAAC,cAACQ,EAAU,CAAAC,UAAU,OAAOrB,IAKtC"}

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";var t,e,r=o.span(t||(t=n(["\n  display: block;\n  color: ",";\n  font-size: ",";\n  line-height: ",";\n  font-weight: ",";\n  font-family: ",";\n  min-width: 3em;\n  margin-bottom: ",";\n\n  & > * {\n    font-weight: ",";\n  }\n"],["\n  display: block;\n  color: ",";\n  font-size: ",";\n  line-height: ",";\n  font-weight: ",";\n  font-family: ",";\n  min-width: 3em;\n  margin-bottom: ",";\n\n  & > * {\n    font-weight: ",";\n  }\n"])),(function(n){return n.theme.colors.textDark}),(function(n){return n.theme.fontSizes.m}),(function(n){return n.theme.typography.lineHeight}),(function(n){return n.theme.typography.fontWeightLabels}),(function(n){return n.theme.typography.fontFamilyLabel}),(function(n){var o=n.hasHintText,t=n.theme;return o?t.spacing.xxs:0}),(function(n){return n.theme.typography.fontWeightBase})),i=o.fieldset(e||(e=n(["\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  border: none;\n  padding: 0;\n  legend {\n    margin-bottom: ",";\n  }\n  label {\n    border-color: ",";\n    margin-bottom: ",";\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n"],["\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  border: none;\n  padding: 0;\n  legend {\n    margin-bottom: ",";\n  }\n  label {\n    border-color: ",";\n    margin-bottom: ",";\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n"])),(function(n){return n.theme.spacing.xs}),(function(n){var o=n.hasError,t=n.theme;return o&&t.colors.textError}),(function(n){return n.theme.spacing.none}));export{r as LegendSpan,i as StyledFieldset};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";var t,e,r=o.span(t||(t=n(["\n  display: block;\n  color: ",";\n  font-size: ",";\n  line-height: ",";\n  font-weight: ",";\n  font-family: ",";\n  min-width: 3em;\n  margin-bottom: ",";\n\n  & > * {\n    font-weight: ",";\n  }\n"],["\n  display: block;\n  color: ",";\n  font-size: ",";\n  line-height: ",";\n  font-weight: ",";\n  font-family: ",";\n  min-width: 3em;\n  margin-bottom: ",";\n\n  & > * {\n    font-weight: ",";\n  }\n"])),(function(n){return n.theme.colors.textDark}),(function(n){return n.theme.fontSizes.m}),(function(n){return n.theme.typography.lineHeight}),(function(n){return n.theme.typography.fontWeightLabels}),(function(n){return n.theme.typography.fontFamilyLabel}),(function(n){var o=n.$hasHintText,t=n.theme;return o?t.spacing.xxs:0}),(function(n){return n.theme.typography.fontWeightBase})),i=o.fieldset(e||(e=n(["\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  border: none;\n  padding: 0;\n  legend {\n    margin-bottom: ",";\n  }\n  label {\n    border-color: ",";\n    margin-bottom: ",";\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n"],["\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  border: none;\n  padding: 0;\n  legend {\n    margin-bottom: ",";\n  }\n  label {\n    border-color: ",";\n    margin-bottom: ",";\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n"])),(function(n){return n.theme.spacing.xs}),(function(n){var o=n.$hasError,t=n.theme;return o&&t.colors.textError}),(function(n){return n.theme.spacing.none}));export{r as LegendSpan,i as StyledFieldset};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/LegendWrapper/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\n\ntype StyledFieldsetProps = {\n  hasError?: boolean;\n  theme: ThemeType;\n  hasHintText?: boolean;\n};\n\nexport const LegendSpan = styled.span<{\n  hasHintText: boolean;\n  theme: ThemeType;\n}>`\n  display: block;\n  color: ${({ theme }) => theme.colors.textDark};\n  font-size: ${({ theme }) => theme.fontSizes.m};\n  line-height: ${({ theme }) => theme.typography.lineHeight};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels};\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  min-width: 3em;\n  margin-bottom: ${({ hasHintText, theme }) =>\n    hasHintText ? theme.spacing.xxs : 0};\n\n  & > * {\n    font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n  }\n`;\n\nexport const StyledFieldset = styled.fieldset<StyledFieldsetProps>`\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  border: none;\n  padding: 0;\n  legend {\n    margin-bottom: ${({ theme }) => theme.spacing.xs};\n  }\n  label {\n    border-color: ${({ hasError, theme }) =>\n      hasError && theme.colors.textError};\n    margin-bottom: ${({ theme }) => theme.spacing.none};\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n`;\n"],"names":["LegendSpan","styled","span","templateObject_1","__makeTemplateObject","_a","theme","colors","textDark","fontSizes","m","typography","lineHeight","fontWeightLabels","fontFamilyLabel","hasHintText","spacing","xxs","fontWeightBase","StyledFieldset","fieldset","templateObject_2","xs","hasError","textError","none"],"mappings":"iHAUa,QAAAA,EAAaC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,iCAAA,mBAAA,qBAAA,qBAAA,qBAAA,0CAAA,oCAAA,YAAA,CAGnC,iCAE6C,mBACA,qBACY,qBACM,qBACD,0CAGzB,oCAG0B,eAVtD,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,QAAb,IACX,SAACH,GAAc,OAAPA,EAAAC,MAAaG,UAAUC,CAAhB,IACb,SAACL,GAAc,OAAPA,EAAAC,MAAaK,WAAWC,UAAjB,IACf,SAACP,GAAc,OAAPA,EAAAC,MAAaK,WAAWE,gBAAjB,IACf,SAACR,GAAc,OAAPA,EAAAC,MAAaK,WAAWG,eAAjB,IAEb,SAACT,OAAEU,EAAWV,EAAAU,YAAET,EAAKD,EAAAC,MACpC,OAAAS,EAAcT,EAAMU,QAAQC,IAAM,CAAlC,IAGe,SAACZ,GAAc,OAAPA,EAAAC,MAAaK,WAAWO,cAAjB,IAIrBC,EAAiBlB,EAAOmB,SAAQC,IAAAA,EAAAjB,EAAA,CAAA,6MAAA,wCAAA,yBAAA,kEAAA,CAAqB,6MAWd,wCAIZ,yBACc,qEALjC,SAACC,GAAc,OAAPA,EAAAC,MAAaU,QAAQM,EAAd,IAGhB,SAACjB,OAAEkB,EAAQlB,EAAAkB,SAAEjB,EAAKD,EAAAC,MAChC,OAAAiB,GAAYjB,EAAMC,OAAOiB,SAAzB,IACe,SAACnB,GAAc,OAAPA,EAAAC,MAAaU,QAAQS,IAAd"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/LegendWrapper/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\n\ntype StyledFieldsetProps = {\n  $hasError?: boolean;\n  $hasHintText?: boolean;\n  theme: ThemeType;\n};\n\nexport const LegendSpan = styled.span<{\n  $hasHintText: boolean;\n  theme: ThemeType;\n}>`\n  display: block;\n  color: ${({ theme }) => theme.colors.textDark};\n  font-size: ${({ theme }) => theme.fontSizes.m};\n  line-height: ${({ theme }) => theme.typography.lineHeight};\n  font-weight: ${({ theme }) => theme.typography.fontWeightLabels};\n  font-family: ${({ theme }) => theme.typography.fontFamilyLabel};\n  min-width: 3em;\n  margin-bottom: ${({ $hasHintText, theme }) =>\n    $hasHintText ? theme.spacing.xxs : 0};\n\n  & > * {\n    font-weight: ${({ theme }) => theme.typography.fontWeightBase};\n  }\n`;\n\nexport const StyledFieldset = styled.fieldset<StyledFieldsetProps>`\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  border: none;\n  padding: 0;\n  legend {\n    margin-bottom: ${({ theme }) => theme.spacing.xs};\n  }\n  label {\n    border-color: ${({ $hasError, theme }) =>\n      $hasError && theme.colors.textError};\n    margin-bottom: ${({ theme }) => theme.spacing.none};\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n`;\n"],"names":["LegendSpan","styled","span","templateObject_1","__makeTemplateObject","_a","theme","colors","textDark","fontSizes","m","typography","lineHeight","fontWeightLabels","fontFamilyLabel","$hasHintText","spacing","xxs","fontWeightBase","StyledFieldset","fieldset","templateObject_2","xs","$hasError","textError","none"],"mappings":"iHAUa,QAAAA,EAAaC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,iCAAA,mBAAA,qBAAA,qBAAA,qBAAA,0CAAA,oCAAA,YAAA,CAGnC,iCAE6C,mBACA,qBACY,qBACM,qBACD,0CAGxB,oCAGyB,eAVtD,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,QAAb,IACX,SAACH,GAAc,OAAPA,EAAAC,MAAaG,UAAUC,CAAhB,IACb,SAACL,GAAc,OAAPA,EAAAC,MAAaK,WAAWC,UAAjB,IACf,SAACP,GAAc,OAAPA,EAAAC,MAAaK,WAAWE,gBAAjB,IACf,SAACR,GAAc,OAAPA,EAAAC,MAAaK,WAAWG,eAAjB,IAEb,SAACT,OAAEU,EAAYV,EAAAU,aAAET,EAAKD,EAAAC,MACrC,OAAAS,EAAeT,EAAMU,QAAQC,IAAM,CAAnC,IAGe,SAACZ,GAAc,OAAPA,EAAAC,MAAaK,WAAWO,cAAjB,IAIrBC,EAAiBlB,EAAOmB,SAAQC,IAAAA,EAAAjB,EAAA,CAAA,6MAAA,wCAAA,yBAAA,kEAAA,CAAqB,6MAWd,wCAIX,yBACa,qEALjC,SAACC,GAAc,OAAPA,EAAAC,MAAaU,QAAQM,EAAd,IAGhB,SAACjB,OAAEkB,EAASlB,EAAAkB,UAAEjB,EAAKD,EAAAC,MACjC,OAAAiB,GAAajB,EAAMC,OAAOiB,SAA1B,IACe,SAACnB,GAAc,OAAPA,EAAAC,MAAaU,QAAQS,IAAd"}

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import r,{forwardRef as t}from"react";import{useTheme as o,ThemeProvider as m}from"styled-components";import{crukTheme as s}from"../../themes/cruk.js";import{StyledLink as a}from"./styles.js";var l=t((function(t,l){var n=o(),f=e(e({},s),n),i=t.rel?t.rel:"_blank"===t.target?"noopener noreferrer":"",d=t.as&&"a"!==t.as?void 0:"a";return r.createElement(m,{theme:f},r.createElement(a,e({},t,{theme:f,rel:i,forwardedAs:d,ref:l}),t.children))}));export{l as Link,l as default};
+import{__assign as e,__rest as r}from"../../../node_modules/tslib/tslib.es6.js";import o,{forwardRef as t}from"react";import{useTheme as a,ThemeProvider as m}from"styled-components";import{crukTheme as l}from"../../themes/cruk.js";import{StyledLink as n}from"./styles.js";var s=t((function(t,s){var p=a(),c=e(e({},l),p),f=t.rel?t.rel:"_blank"===t.target?"noopener noreferrer":"",i=t.as&&"a"!==t.as?void 0:"a",d=t.textHoverColor,v=t.appearance,u=r(t,["textHoverColor","appearance"]);return o.createElement(m,{theme:c},o.createElement(n,e({},u,{$textHoverColor:d,$appearance:v,theme:c,rel:f,forwardedAs:i,ref:s}),t.children))}));export{s as Link,s as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Link/index.tsx"],"sourcesContent":["import React, {\n  type AnchorHTMLAttributes,\n  forwardRef,\n  type Ref,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { type TextProps } from \"../Text\";\nimport { StyledLink } from \"./styles\";\n\nexport type LinkProps = Omit<AnchorHTMLAttributes<HTMLElement>, \"nonce\"> &\n  Omit<TextProps, \"as\" | \"ref\" | \"nonce\"> & {\n    /** link text hover colour */\n    textHoverColor?: string;\n    /** link appearance variant, undefined is a standarding link withing a text block */\n    appearance?: \"primary\" | \"secondary\";\n    /** styled-components polymorphism where you can use the styling of a link but convert to another element like a button */\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a link and cast the component to be a \"span\" for example */\n    as?: ElementType;\n    /** Component children */\n    children?: ReactNode;\n  };\n\n/** Links are for wrapping plain text or elements to create clickable link.\n * This is to be treated as an anchor tag with the addition of the Text component API.\n * This component contains standard Anchor tag props like 'href' and 'target', but it also contains Text component props like 'textColor' and 'textAlign'.\n *\n * A link should really only be used for navigation to take a user to as new location.\n * The onClick handler can be use for more complicated scenarios.\n *\n * If you want something that looks like a link but behaves like a button ie. nothing to do with navigation, please consider using Link with as='button'\n *\n * If you want something that looks like a button but behaves like a link ie. it takes the user to a new location, please consider using Button and simply passing it an href, it will automatically turn into a link. */\nexport const Link = forwardRef((props: LinkProps, ref?: Ref<HTMLElement>) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  // security by default\n  const rel = props.rel\n    ? props.rel\n    : props.target === \"_blank\"\n      ? \"noopener noreferrer\"\n      : \"\";\n\n  // only forward As anchor if we are not casting as something that is not an anchor\n  const forwardAs = props.as && props.as !== \"a\" ? undefined : \"a\";\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledLink\n        {...props}\n        theme={theme}\n        rel={rel}\n        forwardedAs={forwardAs}\n        ref={ref}\n      >\n        {props.children}\n      </StyledLink>\n    </ThemeProvider>\n  );\n});\n\nexport default Link;\n"],"names":["Link","forwardRef","props","ref","foundTheme","useTheme","theme","__assign","defaultTheme","rel","target","forwardAs","as","undefined","React","createElement","ThemeProvider","StyledLink","forwardedAs","children"],"mappings":"wQAsCaA,EAAOC,GAAW,SAACC,EAAkBC,GAChD,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAAMP,EAAMO,IACdP,EAAMO,IACW,WAAjBP,EAAMQ,OACJ,sBACA,GAGAC,EAAYT,EAAMU,IAAmB,MAAbV,EAAMU,QAAaC,EAAY,IAE7D,OACEC,EAACC,cAAAC,EAAc,CAAAV,MAAOA,GACpBQ,EAACC,cAAAE,EACKV,EAAA,CAAA,EAAAL,EACJ,CAAAI,MAAOA,EACPG,IAAKA,EACLS,YAAaP,EACbR,IAAKA,IAEJD,EAAMiB,UAIf"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Link/index.tsx"],"sourcesContent":["import React, {\n  type AnchorHTMLAttributes,\n  forwardRef,\n  type Ref,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { type TextProps } from \"../Text\";\nimport { StyledLink } from \"./styles\";\n\nexport type LinkProps = Omit<AnchorHTMLAttributes<HTMLElement>, \"nonce\"> &\n  Omit<TextProps, \"as\" | \"ref\" | \"nonce\"> & {\n    /** link text hover colour */\n    textHoverColor?: string;\n    /** link appearance variant, undefined is a standarding link withing a text block */\n    appearance?: \"primary\" | \"secondary\";\n    /** styled-components polymorphism where you can use the styling of a link but convert to another element like a button */\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a link and cast the component to be a \"span\" for example */\n    as?: ElementType;\n    /** Component children */\n    children?: ReactNode;\n  };\n\n/** Links are for wrapping plain text or elements to create clickable link.\n * This is to be treated as an anchor tag with the addition of the Text component API.\n * This component contains standard Anchor tag props like 'href' and 'target', but it also contains Text component props like 'textColor' and 'textAlign'.\n *\n * A link should really only be used for navigation to take a user to as new location.\n * The onClick handler can be use for more complicated scenarios.\n *\n * If you want something that looks like a link but behaves like a button ie. nothing to do with navigation, please consider using Link with as='button'\n *\n * If you want something that looks like a button but behaves like a link ie. it takes the user to a new location, please consider using Button and simply passing it an href, it will automatically turn into a link. */\nexport const Link = forwardRef((props: LinkProps, ref?: Ref<HTMLElement>) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  // security by default\n  const rel = props.rel\n    ? props.rel\n    : props.target === \"_blank\"\n      ? \"noopener noreferrer\"\n      : \"\";\n\n  // only forward As anchor if we are not casting as something that is not an anchor\n  const forwardAs = props.as && props.as !== \"a\" ? undefined : \"a\";\n\n  const { textHoverColor, appearance, ...rest } = props;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledLink\n        {...rest}\n        $textHoverColor={textHoverColor}\n        $appearance={appearance}\n        theme={theme}\n        rel={rel}\n        forwardedAs={forwardAs}\n        ref={ref}\n      >\n        {props.children}\n      </StyledLink>\n    </ThemeProvider>\n  );\n});\n\nexport default Link;\n"],"names":["Link","forwardRef","props","ref","foundTheme","useTheme","theme","__assign","defaultTheme","rel","target","forwardAs","as","undefined","textHoverColor","appearance","rest","__rest","React","createElement","ThemeProvider","StyledLink","$textHoverColor","$appearance","forwardedAs","children"],"mappings":"oRAsCaA,EAAOC,GAAW,SAACC,EAAkBC,GAChD,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAAMP,EAAMO,IACdP,EAAMO,IACW,WAAjBP,EAAMQ,OACJ,sBACA,GAGAC,EAAYT,EAAMU,IAAmB,MAAbV,EAAMU,QAAaC,EAAY,IAErDC,EAAwCZ,EAA1BY,eAAEC,EAAwBb,EAAda,WAAKC,EAASC,EAAAf,EAA1C,CAAA,iBAAA,eAEN,OACEgB,EAACC,cAAAC,EAAc,CAAAd,MAAOA,GACpBY,EAAAC,cAACE,EAAUd,EAAA,CAAA,EACLS,EAAI,CAAAM,gBACSR,EAAcS,YAClBR,EACbT,MAAOA,EACPG,IAAKA,EACLe,YAAab,EACbR,IAAKA,IAEJD,EAAMuB,UAIf"}

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import r from"styled-components";import{Text as o}from"../Text/index.js";var e,a=r(o)(e||(e=n(["\n  transition:\n    color 0.2s ease,\n    background-size 0.3s ease;\n  overflow-wrap: break-word;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  padding: 0;\n  color: ",";\n  text-decoration: ",";\n  font-family: ",";\n  letter-spacing: ",";\n\n  background: ",";\n  background-repeat: no-repeat;\n  background-position-y: calc(100%);\n  background-size: 100% 2px;\n  font-weight: ",";\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-size: 100% 100%;\n    color: ",";\n  }\n"],["\n  transition:\n    color 0.2s ease,\n    background-size 0.3s ease;\n  overflow-wrap: break-word;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  padding: 0;\n  color: ",";\n  text-decoration: ",";\n  font-family: ",";\n  letter-spacing: ",";\n\n  background: ",";\n  background-repeat: no-repeat;\n  background-position-y: calc(100%);\n  background-size: 100% 2px;\n  font-weight: ",";\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-size: 100% 100%;\n    color: ",";\n  }\n"])),(function(n){var r=n.theme,o=r.colors,e=r.utilities.useBackgroundStyleLinks,a=n.textColor,t=n.appearance;return a&&void 0!==o[a]?o[a]:a||(!t&&e?"currentColor":t&&"primary"===t?o.linkColorSecondary:o.linkColor)}),(function(n){var r=n.appearance,o=n.theme.typography,e=o.linkTextDecoration,a=o.LinkPrimaryTextDecoration;return"primary"===r?a:"secondary"===r?"none":e}),(function(n){var r=n.appearance,o=n.theme.typography,e=o.fontFamilyBase,a=o.fontFamilyLinks;return"primary"===r||"secondary"===r?a:e}),(function(n){var r=n.appearance,o=n.theme.typography.LinkLetterSpacing;return"primary"===r||"secondary"===r?o:"0px"}),(function(n){var r=n.appearance,o=n.theme;return n.theme.utilities.useBackgroundStyleLinks&&!r?"linear-gradient(180deg, rgba(255, 255, 255, 0) 0px, ".concat(o.colors.primary," -4px);"):void 0}),(function(n){return n.theme.typography.fontWeightLinks}),(function(n){var r=n.theme,o=r.colors,e=r.utilities.useBackgroundStyleLinks,a=n.textHoverColor,t=n.appearance;return!a&&e?o.textDark:a&&void 0!==o[a]?o[a]:a?t&&"primary"===t?o.linkColorHover:o.linkColorSecondaryHover:o.linkColorHover}));export{a as StyledLink,a as default};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import r from"styled-components";import{Text as o}from"../Text/index.js";var e,a=r(o)(e||(e=n(["\n  transition:\n    color 0.2s ease,\n    background-size 0.3s ease;\n  overflow-wrap: break-word;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  padding: 0;\n  color: ",";\n  text-decoration: ",";\n  font-family: ",";\n  letter-spacing: ",";\n\n  background: ",";\n  background-repeat: no-repeat;\n  background-position-y: calc(100%);\n  background-size: 100% 2px;\n  font-weight: ",";\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-size: 100% 100%;\n    color: ",";\n  }\n"],["\n  transition:\n    color 0.2s ease,\n    background-size 0.3s ease;\n  overflow-wrap: break-word;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  padding: 0;\n  color: ",";\n  text-decoration: ",";\n  font-family: ",";\n  letter-spacing: ",";\n\n  background: ",";\n  background-repeat: no-repeat;\n  background-position-y: calc(100%);\n  background-size: 100% 2px;\n  font-weight: ",";\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-size: 100% 100%;\n    color: ",";\n  }\n"])),(function(n){var r=n.theme,o=r.colors,e=r.utilities.useBackgroundStyleLinks,a=n.textColor,t=n.$appearance;return a&&void 0!==o[a]?o[a]:a||(!t&&e?"currentColor":t&&"primary"===t?o.linkColorSecondary:o.linkColor)}),(function(n){var r=n.$appearance,o=n.theme.typography,e=o.linkTextDecoration,a=o.LinkPrimaryTextDecoration;return"primary"===r?a:"secondary"===r?"none":e}),(function(n){var r=n.$appearance,o=n.theme.typography,e=o.fontFamilyBase,a=o.fontFamilyLinks;return"primary"===r||"secondary"===r?a:e}),(function(n){var r=n.$appearance,o=n.theme.typography.LinkLetterSpacing;return"primary"===r||"secondary"===r?o:"0px"}),(function(n){var r=n.$appearance,o=n.theme;return n.theme.utilities.useBackgroundStyleLinks&&!r?"linear-gradient(180deg, rgba(255, 255, 255, 0) 0px, ".concat(o.colors.primary," -4px);"):void 0}),(function(n){return n.theme.typography.fontWeightLinks}),(function(n){var r=n.theme,o=r.colors,e=r.utilities.useBackgroundStyleLinks,a=n.$textHoverColor,t=n.$appearance;return!a&&e?o.textDark:a&&void 0!==o[a]?o[a]:a?t&&"primary"===t?o.linkColorHover:o.linkColorSecondaryHover:o.linkColorHover}));export{a as StyledLink,a as default};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Link/styles.ts"],"sourcesContent":["import { type AnchorHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\n\nimport Text, { type TextProps } from \"../Text\";\n\nimport { type ThemeType, type ColorKeyType } from \"../../types\";\n\ntype StyledLinkProps = AnchorHTMLAttributes<HTMLElement> &\n  TextProps & {\n    theme: ThemeType;\n    appearance?: \"primary\" | \"secondary\";\n    textHoverColor?: string;\n  };\n\nexport const StyledLink = styled(Text)<StyledLinkProps>`\n  transition:\n    color 0.2s ease,\n    background-size 0.3s ease;\n  overflow-wrap: break-word;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  padding: 0;\n  color: ${({\n    theme: {\n      colors,\n      utilities: { useBackgroundStyleLinks },\n    },\n    textColor,\n    appearance,\n  }) =>\n    textColor && typeof colors[textColor as ColorKeyType] !== \"undefined\"\n      ? colors[textColor as ColorKeyType]\n      : textColor ||\n        (!appearance && useBackgroundStyleLinks\n          ? \"currentColor\"\n          : appearance && appearance === \"primary\"\n            ? colors.linkColorSecondary\n            : colors.linkColor)};\n  text-decoration: ${({\n    appearance,\n    theme: {\n      typography: { linkTextDecoration, LinkPrimaryTextDecoration },\n    },\n  }) =>\n    appearance === \"primary\"\n      ? LinkPrimaryTextDecoration\n      : appearance === \"secondary\"\n        ? \"none\"\n        : linkTextDecoration};\n  font-family: ${({\n    appearance,\n    theme: {\n      typography: { fontFamilyBase, fontFamilyLinks },\n    },\n  }) =>\n    appearance === \"primary\" || appearance === \"secondary\"\n      ? fontFamilyLinks\n      : fontFamilyBase};\n  letter-spacing: ${({\n    appearance,\n    theme: {\n      typography: { LinkLetterSpacing },\n    },\n  }) =>\n    appearance === \"primary\" || appearance === \"secondary\"\n      ? LinkLetterSpacing\n      : \"0px\"};\n\n  background: ${({\n    appearance,\n    theme,\n    theme: {\n      utilities: { useBackgroundStyleLinks },\n    },\n  }) =>\n    useBackgroundStyleLinks && !appearance\n      ? `linear-gradient(180deg, rgba(255, 255, 255, 0) 0px, ${theme.colors.primary} -4px);`\n      : undefined};\n  background-repeat: no-repeat;\n  background-position-y: calc(100%);\n  background-size: 100% 2px;\n  font-weight: ${({ theme }) => theme.typography.fontWeightLinks};\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-size: 100% 100%;\n    color: ${({\n      theme: {\n        colors,\n        utilities: { useBackgroundStyleLinks },\n      },\n      textHoverColor,\n      appearance,\n    }) =>\n      !textHoverColor && useBackgroundStyleLinks\n        ? colors.textDark\n        : textHoverColor &&\n            typeof colors[textHoverColor as ColorKeyType] !== \"undefined\"\n          ? colors[textHoverColor as ColorKeyType]\n          : textHoverColor\n            ? appearance && appearance === \"primary\"\n              ? colors.linkColorHover\n              : colors.linkColorSecondaryHover\n            : colors.linkColorHover};\n  }\n`;\n\nexport default StyledLink;\n"],"names":["StyledLink","styled","Text","templateObject_1","__makeTemplateObject","_a","_b","theme","colors","useBackgroundStyleLinks","utilities","textColor","appearance","linkColorSecondary","linkColor","typography","linkTextDecoration","LinkPrimaryTextDecoration","fontFamilyBase","fontFamilyLinks","LinkLetterSpacing","concat","primary","undefined","fontWeightLinks","textHoverColor","textDark","linkColorHover","linkColorSecondaryHover"],"mappings":"yJAca,MAAAA,EAAaC,EAAOC,EAAPD,CAAYE,IAAAA,EAAAC,EAAA,CAAA,8LAAA,yBAAA,qBAAA,wBAAA,sBAAA,0HAAA,uIAAA,YAAA,CAAiB,8LAuBxB,yBAWH,qBASN,wBAST,sBAWI,0HAI+C,uIA0B7B,eArFxB,SAACC,OACRC,EAGCD,EAAAE,MAFCC,EAAMF,EAAAE,OACOC,EAAuBH,EAAAI,UAAAD,wBAEtCE,EAASN,EAAAM,UACTC,EAAUP,EAAAO,WAEV,OAAAD,QAA0D,IAAtCH,EAAOG,GACvBH,EAAOG,GACPA,KACEC,GAAcH,EACZ,eACAG,GAA6B,YAAfA,EACZJ,EAAOK,mBACPL,EAAOM,UAPjB,IAQiB,SAACT,OAClBO,EAAUP,EAAAO,WAERN,EAA6DD,EAAAE,MAAAQ,WAA/CC,EAAkBV,EAAAU,mBAAEC,EAAyBX,EAAAW,0BAG7D,MAAe,YAAfL,EACIK,EACe,cAAfL,EACE,OACAI,CAJN,IAKa,SAACX,OACdO,EAAUP,EAAAO,WAERN,EAA+CD,EAAAE,MAAAQ,WAAjCG,EAAcZ,EAAAY,eAAEC,EAAeb,EAAAa,gBAG/C,MAAe,YAAfP,GAA2C,cAAfA,EACxBO,EACAD,CAFJ,IAGgB,SAACb,OACjBO,EAAUP,EAAAO,WAEMQ,EAAiBf,EAAAE,MAAAQ,WAAAK,kBAGjC,MAAe,YAAfR,GAA2C,cAAfA,EACxBQ,EACA,KAFJ,IAIY,SAACf,GACb,IAAAO,eACAL,EAAKF,EAAAE,MAKL,OAHsCF,EAAAE,MAAAG,UAAAD,0BAGVG,EACxB,uDAAuDS,OAAAd,EAAMC,OAAOc,QAAgB,gBACpFC,CAFJ,IAMa,SAAClB,GAAc,OAAPA,EAAAE,MAAaQ,WAAWS,eAAjB,IASnB,SAACnB,OACRC,EAGCD,EAAAE,MAFCC,EAAMF,EAAAE,OACOC,EAAuBH,EAAAI,UAAAD,wBAEtCgB,EAAcpB,EAAAoB,eACdb,EAAUP,EAAAO,WAEV,OAACa,GAAkBhB,EACfD,EAAOkB,SACPD,QACoD,IAA3CjB,EAAOiB,GACdjB,EAAOiB,GACPA,EACEb,GAA6B,YAAfA,EACZJ,EAAOmB,eACPnB,EAAOoB,wBACTpB,EAAOmB,cATf"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Link/styles.ts"],"sourcesContent":["import { type AnchorHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\n\nimport Text, { type TextProps } from \"../Text\";\n\nimport { type ThemeType, type ColorKeyType } from \"../../types\";\n\ntype StyledLinkProps = AnchorHTMLAttributes<HTMLElement> &\n  TextProps & {\n    theme: ThemeType;\n    $appearance?: \"primary\" | \"secondary\";\n    $textHoverColor?: string;\n  };\n\nexport const StyledLink = styled(Text)<StyledLinkProps>`\n  transition:\n    color 0.2s ease,\n    background-size 0.3s ease;\n  overflow-wrap: break-word;\n  background-color: rgba(255, 255, 255, 0);\n  border: none;\n  padding: 0;\n  color: ${({\n    theme: {\n      colors,\n      utilities: { useBackgroundStyleLinks },\n    },\n    textColor,\n    $appearance,\n  }) =>\n    textColor && typeof colors[textColor as ColorKeyType] !== \"undefined\"\n      ? colors[textColor as ColorKeyType]\n      : textColor ||\n        (!$appearance && useBackgroundStyleLinks\n          ? \"currentColor\"\n          : $appearance && $appearance === \"primary\"\n            ? colors.linkColorSecondary\n            : colors.linkColor)};\n  text-decoration: ${({\n    $appearance,\n    theme: {\n      typography: { linkTextDecoration, LinkPrimaryTextDecoration },\n    },\n  }) =>\n    $appearance === \"primary\"\n      ? LinkPrimaryTextDecoration\n      : $appearance === \"secondary\"\n        ? \"none\"\n        : linkTextDecoration};\n  font-family: ${({\n    $appearance,\n    theme: {\n      typography: { fontFamilyBase, fontFamilyLinks },\n    },\n  }) =>\n    $appearance === \"primary\" || $appearance === \"secondary\"\n      ? fontFamilyLinks\n      : fontFamilyBase};\n  letter-spacing: ${({\n    $appearance,\n    theme: {\n      typography: { LinkLetterSpacing },\n    },\n  }) =>\n    $appearance === \"primary\" || $appearance === \"secondary\"\n      ? LinkLetterSpacing\n      : \"0px\"};\n\n  background: ${({\n    $appearance,\n    theme,\n    theme: {\n      utilities: { useBackgroundStyleLinks },\n    },\n  }) =>\n    useBackgroundStyleLinks && !$appearance\n      ? `linear-gradient(180deg, rgba(255, 255, 255, 0) 0px, ${theme.colors.primary} -4px);`\n      : undefined};\n  background-repeat: no-repeat;\n  background-position-y: calc(100%);\n  background-size: 100% 2px;\n  font-weight: ${({ theme }) => theme.typography.fontWeightLinks};\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-size: 100% 100%;\n    color: ${({\n      theme: {\n        colors,\n        utilities: { useBackgroundStyleLinks },\n      },\n      $textHoverColor,\n      $appearance,\n    }) =>\n      !$textHoverColor && useBackgroundStyleLinks\n        ? colors.textDark\n        : $textHoverColor &&\n            typeof colors[$textHoverColor as ColorKeyType] !== \"undefined\"\n          ? colors[$textHoverColor as ColorKeyType]\n          : $textHoverColor\n            ? $appearance && $appearance === \"primary\"\n              ? colors.linkColorHover\n              : colors.linkColorSecondaryHover\n            : colors.linkColorHover};\n  }\n`;\n\nexport default StyledLink;\n"],"names":["StyledLink","styled","Text","templateObject_1","__makeTemplateObject","_a","_b","theme","colors","useBackgroundStyleLinks","utilities","textColor","$appearance","linkColorSecondary","linkColor","typography","linkTextDecoration","LinkPrimaryTextDecoration","fontFamilyBase","fontFamilyLinks","LinkLetterSpacing","concat","primary","undefined","fontWeightLinks","$textHoverColor","textDark","linkColorHover","linkColorSecondaryHover"],"mappings":"yJAca,MAAAA,EAAaC,EAAOC,EAAPD,CAAYE,IAAAA,EAAAC,EAAA,CAAA,8LAAA,yBAAA,qBAAA,wBAAA,sBAAA,0HAAA,uIAAA,YAAA,CAAiB,8LAuBxB,yBAWH,qBASN,wBAST,sBAWI,0HAI+C,uIA0B7B,eArFxB,SAACC,OACRC,EAGCD,EAAAE,MAFCC,EAAMF,EAAAE,OACOC,EAAuBH,EAAAI,UAAAD,wBAEtCE,EAASN,EAAAM,UACTC,EAAWP,EAAAO,YAEX,OAAAD,QAA0D,IAAtCH,EAAOG,GACvBH,EAAOG,GACPA,KACEC,GAAeH,EACb,eACAG,GAA+B,YAAhBA,EACbJ,EAAOK,mBACPL,EAAOM,UAPjB,IAQiB,SAACT,OAClBO,EAAWP,EAAAO,YAETN,EAA6DD,EAAAE,MAAAQ,WAA/CC,EAAkBV,EAAAU,mBAAEC,EAAyBX,EAAAW,0BAG7D,MAAgB,YAAhBL,EACIK,EACgB,cAAhBL,EACE,OACAI,CAJN,IAKa,SAACX,OACdO,EAAWP,EAAAO,YAETN,EAA+CD,EAAAE,MAAAQ,WAAjCG,EAAcZ,EAAAY,eAAEC,EAAeb,EAAAa,gBAG/C,MAAgB,YAAhBP,GAA6C,cAAhBA,EACzBO,EACAD,CAFJ,IAGgB,SAACb,OACjBO,EAAWP,EAAAO,YAEKQ,EAAiBf,EAAAE,MAAAQ,WAAAK,kBAGjC,MAAgB,YAAhBR,GAA6C,cAAhBA,EACzBQ,EACA,KAFJ,IAIY,SAACf,GACb,IAAAO,gBACAL,EAAKF,EAAAE,MAKL,OAHsCF,EAAAE,MAAAG,UAAAD,0BAGVG,EACxB,uDAAuDS,OAAAd,EAAMC,OAAOc,QAAgB,gBACpFC,CAFJ,IAMa,SAAClB,GAAc,OAAPA,EAAAE,MAAaQ,WAAWS,eAAjB,IASnB,SAACnB,OACRC,EAGCD,EAAAE,MAFCC,EAAMF,EAAAE,OACOC,EAAuBH,EAAAI,UAAAD,wBAEtCgB,EAAepB,EAAAoB,gBACfb,EAAWP,EAAAO,YAEX,OAACa,GAAmBhB,EAChBD,EAAOkB,SACPD,QACqD,IAA5CjB,EAAOiB,GACdjB,EAAOiB,GACPA,EACEb,GAA+B,YAAhBA,EACbJ,EAAOmB,eACPnB,EAAOoB,wBACTpB,EAAOmB,cATf"}

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import o,{useEffect as n}from"react";import{createPortal as t}from"react-dom";import{useTheme as i,ThemeProvider as r}from"styled-components";import d from"../../../node_modules/react-focus-lock/dist/es2015/Combination.js";import{faClose as a}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as m}from"../IconFa/index.js";import{crukTheme as l}from"../../themes/cruk.js";import{Wrapper as c,Content as g,CloseButton as p,Background as s}from"./styles.js";function u(u){var f=u.modalName,h=u.closeFunction,w=u.showCloseButton,y=u.maxWidth,v=void 0===y?"500px":y,E=u.top,b=void 0===E?"1rem":E,k=u.backgroundColor,x=void 0===k?"backgroundLight":k,L=u.children,j=u.width,B=void 0===j?"90%":j,C=u.margin,z=u.marginHorizontal,F=u.marginVertical,H=u.marginTop,R=u.marginRight,T=u.marginBottom,V=void 0===T?"xxl":T,_=u.marginLeft,I=u.padding,W=void 0===I?"xs":I,N=u.paddingHorizontal,q=u.paddingVertical,A=u.paddingTop,D=u.paddingRight,G=u.paddingBottom,J=u.paddingLeft,K=i(),M=e(e({},l),K),O=function(e){"Escape"===e.key&&h&&h()};return n((function(){if("undefined"!=typeof window)return document.body.style.overflow="hidden",document.addEventListener("keydown",O),function(){"undefined"!=typeof window&&(document.body.style.overflow="unset",document.removeEventListener("keydown",O))}}),[]),o.createElement(o.Fragment,null,"undefined"!=typeof window?t(o.createElement("section",null,o.createElement(d,{returnFocus:!0},o.createElement(r,{theme:M},o.createElement(c,{role:"dialog","aria-modal":"true","aria-label":f},o.createElement(g,{backgroundColor:x,maxWidth:v,width:B,top:b,margin:C,marginHorizontal:z,marginVertical:F,marginTop:H,marginRight:R,marginBottom:V,marginLeft:_,padding:W,paddingHorizontal:N,paddingVertical:q,paddingTop:A,paddingRight:D,paddingBottom:G,paddingLeft:J},w&&h?o.createElement(p,{"aria-label":"close",appearance:"tertiary",onClick:function(){h()}},o.createElement(m,{faIcon:a})):null,L),o.createElement(s,null))))),document.body):null)}export{u as Modal,u as default};
+import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import o,{useEffect as n}from"react";import{createPortal as t}from"react-dom";import{useTheme as i,ThemeProvider as r}from"styled-components";import d from"../../../node_modules/react-focus-lock/dist/es2015/Combination.js";import{faClose as a}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as m}from"../IconFa/index.js";import{crukTheme as l}from"../../themes/cruk.js";import{Wrapper as c,Content as g,CloseButton as p,Background as s}from"./styles.js";function u(u){var f=u.modalName,h=u.closeFunction,w=u.showCloseButton,y=u.maxWidth,v=void 0===y?"500px":y,E=u.top,b=void 0===E?"1rem":E,k=u.backgroundColor,x=void 0===k?"backgroundLight":k,L=u.children,j=u.width,B=void 0===j?"90%":j,C=u.margin,z=u.marginHorizontal,F=u.marginVertical,H=u.marginTop,R=u.marginRight,T=u.marginBottom,V=void 0===T?"xxl":T,$=u.marginLeft,_=u.padding,I=void 0===_?"xs":_,W=u.paddingHorizontal,N=u.paddingVertical,q=u.paddingTop,A=u.paddingRight,D=u.paddingBottom,G=u.paddingLeft,J=i(),K=e(e({},l),J),M=function(e){"Escape"===e.key&&h&&h()};return n((function(){if("undefined"!=typeof window)return document.body.style.overflow="hidden",document.addEventListener("keydown",M),function(){"undefined"!=typeof window&&(document.body.style.overflow="unset",document.removeEventListener("keydown",M))}}),[]),o.createElement(o.Fragment,null,"undefined"!=typeof window?t(o.createElement("section",null,o.createElement(d,{returnFocus:!0},o.createElement(r,{theme:K},o.createElement(c,{role:"dialog","aria-modal":"true","aria-label":f},o.createElement(g,{backgroundColor:x,$maxWidth:v,$width:B,$top:b,margin:C,marginHorizontal:z,marginVertical:F,marginTop:H,marginRight:R,marginBottom:V,marginLeft:$,padding:I,paddingHorizontal:W,paddingVertical:N,paddingTop:q,paddingRight:A,paddingBottom:D,paddingLeft:G},w&&h?o.createElement(p,{"aria-label":"close",appearance:"tertiary",onClick:function(){h()}},o.createElement(m,{faIcon:a})):null,L),o.createElement(s,null))))),document.body):null)}export{u as Modal,u as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { type ReactNode, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\nimport FocusLock from \"react-focus-lock\";\nimport { faClose } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { CloseButton, Wrapper, Content, Background } from \"./styles\";\n\nimport { type SpacingProps } from \"../Spacing\";\n\nexport type ModalProps = SpacingProps & {\n  /** modal name used for aria-label */\n  modalName: string;\n  /** callback function called on modal close */\n  closeFunction: () => void;\n  /** flag to reveal close button with cross in the top right of modal */\n  showCloseButton?: boolean;\n  /** set max width of modal */\n  maxWidth?: string;\n  /** set space from top of view port that modal appears */\n  top?: string;\n  /** background color of dialogue */\n  backgroundColor?: string;\n  /** children components  */\n  children?: ReactNode;\n  /** width of modal */\n  width?: string;\n};\n\n/**\n *\n * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.\n * ## How modals work\n * - Modals are positioned over everything else in the document and remove scroll from the \"body\" tag so that modal content scrolls instead.\n * - Modals are unmounted when closed.\n * - Modal's \"trap\" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.\n * ## Accessibility\n * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.\n */\nexport function Modal({\n  modalName,\n  closeFunction,\n  showCloseButton,\n  maxWidth = \"500px\",\n  top = \"1rem\",\n  backgroundColor = \"backgroundLight\",\n  children,\n  width = \"90%\",\n  margin,\n  marginHorizontal,\n  marginVertical,\n  marginTop,\n  marginRight,\n  marginBottom = \"xxl\",\n  marginLeft,\n  padding = \"xs\",\n  paddingHorizontal,\n  paddingVertical,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n}: ModalProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const closeByEsc = (event: KeyboardEvent): void => {\n    if (event.key === \"Escape\" && !!closeFunction) {\n      closeFunction();\n    }\n  };\n\n  useEffect(() => {\n    if (typeof window === `undefined`) {\n      return undefined;\n    }\n    document.body.style.overflow = \"hidden\";\n    document.addEventListener(\"keydown\", closeByEsc);\n\n    return () => {\n      if (typeof window === `undefined`) {\n        return;\n      }\n      document.body.style.overflow = \"unset\";\n      document.removeEventListener(\"keydown\", closeByEsc);\n    };\n  }, []);\n\n  return (\n    <>\n      {typeof window !== `undefined`\n        ? createPortal(\n            <section>\n              <FocusLock returnFocus>\n                <ThemeProvider theme={theme}>\n                  <Wrapper\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    aria-label={modalName}\n                  >\n                    <Content\n                      backgroundColor={backgroundColor}\n                      maxWidth={maxWidth}\n                      width={width}\n                      top={top}\n                      margin={margin}\n                      marginHorizontal={marginHorizontal}\n                      marginVertical={marginVertical}\n                      marginTop={marginTop}\n                      marginRight={marginRight}\n                      marginBottom={marginBottom}\n                      marginLeft={marginLeft}\n                      padding={padding}\n                      paddingHorizontal={paddingHorizontal}\n                      paddingVertical={paddingVertical}\n                      paddingTop={paddingTop}\n                      paddingRight={paddingRight}\n                      paddingBottom={paddingBottom}\n                      paddingLeft={paddingLeft}\n                    >\n                      {showCloseButton && closeFunction ? (\n                        <CloseButton\n                          aria-label=\"close\"\n                          appearance=\"tertiary\"\n                          onClick={() => {\n                            closeFunction();\n                          }}\n                        >\n                          <IconFa faIcon={faClose} />\n                        </CloseButton>\n                      ) : null}\n                      {children}\n                    </Content>\n                    <Background />\n                  </Wrapper>\n                </ThemeProvider>\n              </FocusLock>\n            </section>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","_a","modalName","closeFunction","showCloseButton","_b","maxWidth","_c","top","_d","backgroundColor","children","_e","width","margin","marginHorizontal","marginVertical","marginTop","marginRight","_f","marginBottom","marginLeft","_g","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","foundTheme","useTheme","theme","__assign","defaultTheme","closeByEsc","event","key","useEffect","window","document","body","style","overflow","addEventListener","removeEventListener","React","createElement","Fragment","createPortal","FocusLock","returnFocus","ThemeProvider","Wrapper","role","Content","CloseButton","appearance","onClick","IconFa","faIcon","faClose","Background"],"mappings":"+iBA0CM,SAAUA,EAAMC,GACpB,IAAAC,cACAC,kBACAC,oBACAC,EAAAJ,EAAAK,SAAAA,aAAW,QAAOD,EAClBE,EAAYN,EAAAO,IAAZA,OAAM,IAAAD,EAAA,OAAMA,EACZE,oBAAAC,aAAkB,kBAAiBD,EACnCE,EAAQV,EAAAU,SACRC,EAAaX,EAAAY,MAAbA,OAAQ,IAAAD,EAAA,QACRE,WACAC,EAAgBd,EAAAc,iBAChBC,EAAcf,EAAAe,eACdC,EAAShB,EAAAgB,UACTC,EAAWjB,EAAAiB,YACXC,iBAAAC,aAAe,MAAKD,EACpBE,EAAUpB,EAAAoB,WACVC,EAAcrB,EAAAsB,QAAdA,OAAO,IAAAD,EAAG,KAAIA,EACdE,EAAiBvB,EAAAuB,kBACjBC,EAAexB,EAAAwB,gBACfC,EAAUzB,EAAAyB,WACVC,EAAY1B,EAAA0B,aACZC,EAAa3B,EAAA2B,cACbC,EAAW5B,EAAA4B,YAELC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAa,SAACC,GACA,WAAdA,EAAMC,KAAsBlC,GAC9BA,GAEJ,EAkBA,OAhBAmC,GAAU,WACR,GAAsB,oBAAXC,OAMX,OAHAC,SAASC,KAAKC,MAAMC,SAAW,SAC/BH,SAASI,iBAAiB,UAAWT,GAE9B,WACiB,oBAAXI,SAGXC,SAASC,KAAKC,MAAMC,SAAW,QAC/BH,SAASK,oBAAoB,UAAWV,GAC1C,CACD,GAAE,IAGDW,EAAAC,cAAAD,EAAAE,SAAA,KACqB,oBAAXT,OACJU,EACEH,EAAAC,cAAA,UAAA,KACED,EAACC,cAAAG,GAAUC,aAAW,GACpBL,EAAAC,cAACK,EAAa,CAACpB,MAAOA,GACpBc,EAACC,cAAAM,GACCC,KAAK,SACM,aAAA,oBACCpD,GAEZ4C,EAAAC,cAACQ,EAAO,CACN7C,gBAAiBA,EACjBJ,SAAUA,EACVO,MAAOA,EACPL,IAAKA,EACLM,OAAQA,EACRC,iBAAkBA,EAClBC,eAAgBA,EAChBC,UAAWA,EACXC,YAAaA,EACbE,aAAcA,EACdC,WAAYA,EACZE,QAASA,EACTC,kBAAmBA,EACnBC,gBAAiBA,EACjBC,WAAYA,EACZC,aAAcA,EACdC,cAAeA,EACfC,YAAaA,GAEZzB,GAAmBD,EAClB2C,EAACC,cAAAS,EACY,CAAA,aAAA,QACXC,WAAW,WACXC,QAAS,WACPvD,MAGF2C,EAACC,cAAAY,EAAO,CAAAC,OAAQC,KAEhB,KACHlD,GAEHmC,EAACC,cAAAe,EAAa,UAKtBtB,SAASC,MAEX,KAGV"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { type ReactNode, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\nimport FocusLock from \"react-focus-lock\";\nimport { faClose } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { CloseButton, Wrapper, Content, Background } from \"./styles\";\n\nimport { type SpacingProps } from \"../Spacing\";\n\nexport type ModalProps = SpacingProps & {\n  /** modal name used for aria-label */\n  modalName: string;\n  /** callback function called on modal close */\n  closeFunction: () => void;\n  /** flag to reveal close button with cross in the top right of modal */\n  showCloseButton?: boolean;\n  /** set max width of modal */\n  maxWidth?: string;\n  /** set space from top of view port that modal appears */\n  top?: string;\n  /** background color of dialogue */\n  backgroundColor?: string;\n  /** children components  */\n  children?: ReactNode;\n  /** width of modal */\n  width?: string;\n};\n\n/**\n *\n * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.\n * ## How modals work\n * - Modals are positioned over everything else in the document and remove scroll from the \"body\" tag so that modal content scrolls instead.\n * - Modals are unmounted when closed.\n * - Modal's \"trap\" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.\n * ## Accessibility\n * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.\n */\nexport function Modal({\n  modalName,\n  closeFunction,\n  showCloseButton,\n  maxWidth = \"500px\",\n  top = \"1rem\",\n  backgroundColor = \"backgroundLight\",\n  children,\n  width = \"90%\",\n  margin,\n  marginHorizontal,\n  marginVertical,\n  marginTop,\n  marginRight,\n  marginBottom = \"xxl\",\n  marginLeft,\n  padding = \"xs\",\n  paddingHorizontal,\n  paddingVertical,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n}: ModalProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const closeByEsc = (event: KeyboardEvent): void => {\n    if (event.key === \"Escape\" && !!closeFunction) {\n      closeFunction();\n    }\n  };\n\n  useEffect(() => {\n    if (typeof window === `undefined`) {\n      return undefined;\n    }\n    document.body.style.overflow = \"hidden\";\n    document.addEventListener(\"keydown\", closeByEsc);\n\n    return () => {\n      if (typeof window === `undefined`) {\n        return;\n      }\n      document.body.style.overflow = \"unset\";\n      document.removeEventListener(\"keydown\", closeByEsc);\n    };\n  }, []);\n\n  return (\n    <>\n      {typeof window !== `undefined`\n        ? createPortal(\n            <section>\n              <FocusLock returnFocus>\n                <ThemeProvider theme={theme}>\n                  <Wrapper\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    aria-label={modalName}\n                  >\n                    <Content\n                      backgroundColor={backgroundColor}\n                      $maxWidth={maxWidth}\n                      $width={width}\n                      $top={top}\n                      margin={margin}\n                      marginHorizontal={marginHorizontal}\n                      marginVertical={marginVertical}\n                      marginTop={marginTop}\n                      marginRight={marginRight}\n                      marginBottom={marginBottom}\n                      marginLeft={marginLeft}\n                      padding={padding}\n                      paddingHorizontal={paddingHorizontal}\n                      paddingVertical={paddingVertical}\n                      paddingTop={paddingTop}\n                      paddingRight={paddingRight}\n                      paddingBottom={paddingBottom}\n                      paddingLeft={paddingLeft}\n                    >\n                      {showCloseButton && closeFunction ? (\n                        <CloseButton\n                          aria-label=\"close\"\n                          appearance=\"tertiary\"\n                          onClick={() => {\n                            closeFunction();\n                          }}\n                        >\n                          <IconFa faIcon={faClose} />\n                        </CloseButton>\n                      ) : null}\n                      {children}\n                    </Content>\n                    <Background />\n                  </Wrapper>\n                </ThemeProvider>\n              </FocusLock>\n            </section>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","_a","modalName","closeFunction","showCloseButton","_b","maxWidth","_c","top","_d","backgroundColor","children","_e","width","margin","marginHorizontal","marginVertical","marginTop","marginRight","_f","marginBottom","marginLeft","_g","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","foundTheme","useTheme","theme","__assign","defaultTheme","closeByEsc","event","key","useEffect","window","document","body","style","overflow","addEventListener","removeEventListener","React","createElement","Fragment","createPortal","FocusLock","returnFocus","ThemeProvider","Wrapper","role","Content","$maxWidth","$width","$top","CloseButton","appearance","onClick","IconFa","faIcon","faClose","Background"],"mappings":"+iBA0CM,SAAUA,EAAMC,GACpB,IAAAC,cACAC,kBACAC,oBACAC,EAAAJ,EAAAK,SAAAA,aAAW,QAAOD,EAClBE,EAAYN,EAAAO,IAAZA,OAAM,IAAAD,EAAA,OAAMA,EACZE,oBAAAC,aAAkB,kBAAiBD,EACnCE,EAAQV,EAAAU,SACRC,EAAaX,EAAAY,MAAbA,OAAQ,IAAAD,EAAA,QACRE,WACAC,EAAgBd,EAAAc,iBAChBC,EAAcf,EAAAe,eACdC,EAAShB,EAAAgB,UACTC,EAAWjB,EAAAiB,YACXC,iBAAAC,aAAe,MAAKD,EACpBE,EAAUpB,EAAAoB,WACVC,EAAcrB,EAAAsB,QAAdA,OAAO,IAAAD,EAAG,KAAIA,EACdE,EAAiBvB,EAAAuB,kBACjBC,EAAexB,EAAAwB,gBACfC,EAAUzB,EAAAyB,WACVC,EAAY1B,EAAA0B,aACZC,EAAa3B,EAAA2B,cACbC,EAAW5B,EAAA4B,YAELC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAa,SAACC,GACA,WAAdA,EAAMC,KAAsBlC,GAC9BA,GAEJ,EAkBA,OAhBAmC,GAAU,WACR,GAAsB,oBAAXC,OAMX,OAHAC,SAASC,KAAKC,MAAMC,SAAW,SAC/BH,SAASI,iBAAiB,UAAWT,GAE9B,WACiB,oBAAXI,SAGXC,SAASC,KAAKC,MAAMC,SAAW,QAC/BH,SAASK,oBAAoB,UAAWV,GAC1C,CACD,GAAE,IAGDW,EAAAC,cAAAD,EAAAE,SAAA,KACqB,oBAAXT,OACJU,EACEH,EAAAC,cAAA,UAAA,KACED,EAACC,cAAAG,GAAUC,aAAW,GACpBL,EAAAC,cAACK,EAAa,CAACpB,MAAOA,GACpBc,EAACC,cAAAM,GACCC,KAAK,SACM,aAAA,oBACCpD,GAEZ4C,EAAAC,cAACQ,EAAO,CACN7C,gBAAiBA,EAAe8C,UACrBlD,EAAQmD,OACX5C,EAAK6C,KACPlD,EACNM,OAAQA,EACRC,iBAAkBA,EAClBC,eAAgBA,EAChBC,UAAWA,EACXC,YAAaA,EACbE,aAAcA,EACdC,WAAYA,EACZE,QAASA,EACTC,kBAAmBA,EACnBC,gBAAiBA,EACjBC,WAAYA,EACZC,aAAcA,EACdC,cAAeA,EACfC,YAAaA,GAEZzB,GAAmBD,EAClB2C,EAACC,cAAAY,EACY,CAAA,aAAA,QACXC,WAAW,WACXC,QAAS,WACP1D,MAGF2C,EAACC,cAAAe,EAAO,CAAAC,OAAQC,KAEhB,KACHrD,GAEHmC,EAACC,cAAAkB,EAAa,UAKtBzB,SAASC,MAEX,KAGV"}

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";import{Box as t}from"../Box/index.js";import{Button as i}from"../Button/index.js";var r,e,d,a,m=o.div(r||(r=n(["\n  background: ",";\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n"],["\n  background: ",";\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n"])),(function(n){return n.theme.colors.modalBackdrop})),s=o.div(e||(e=n(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n"],["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n"]))),p=o(t)(d||(d=n(["\n  background-color: ",";\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ",";\n  width: ",";\n  min-height: 10rem;\n  max-width: ",";\n  z-index: 9999;\n"],["\n  background-color: ",";\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ",";\n  width: ",";\n  min-height: 10rem;\n  max-width: ",";\n  z-index: 9999;\n"])),(function(n){var o=n.theme.colors,t=n.backgroundColor;return void 0!==t&&void 0!==typeof t?void 0!==o[t]?o[t]:t:o.backgroundLight}),(function(n){var o=n.top;return"".concat(o," auto auto auto")}),(function(n){return n.width}),(function(n){return n.maxWidth})),h=o(i)(a||(a=n(["\n  float: right;\n  margin-left: ",";\n  font-size: 1.2rem;\n  padding: 0;\n"],["\n  float: right;\n  margin-left: ",";\n  font-size: 1.2rem;\n  padding: 0;\n"])),(function(n){return n.theme.spacing.xs}));export{m as Background,h as CloseButton,p as Content,s as Wrapper};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";import{Box as t}from"../Box/index.js";import{Button as i}from"../Button/index.js";var r,e,d,a,m=o.div(r||(r=n(["\n  background: ",";\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n"],["\n  background: ",";\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n"])),(function(n){return n.theme.colors.modalBackdrop})),s=o.div(e||(e=n(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n"],["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n"]))),p=o(t)(d||(d=n(["\n  background-color: ",";\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ",";\n  width: ",";\n  min-height: 10rem;\n  max-width: ",";\n  z-index: 9999;\n"],["\n  background-color: ",";\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ",";\n  width: ",";\n  min-height: 10rem;\n  max-width: ",";\n  z-index: 9999;\n"])),(function(n){var o=n.theme.colors,t=n.backgroundColor;return void 0!==t&&void 0!==typeof t?void 0!==o[t]?o[t]:t:o.backgroundLight}),(function(n){var o=n.$top;return"".concat(o," auto auto auto")}),(function(n){return n.$width}),(function(n){return n.$maxWidth})),h=o(i)(a||(a=n(["\n  float: right;\n  margin-left: ",";\n  font-size: 1.2rem;\n  padding: 0;\n"],["\n  float: right;\n  margin-left: ",";\n  font-size: 1.2rem;\n  padding: 0;\n"])),(function(n){return n.theme.spacing.xs}));export{m as Background,h as CloseButton,p as Content,s as Wrapper};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Modal/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ColorKeyType, type ThemeType } from \"../../types\";\nimport Box from \"../Box\";\nimport { Button } from \"../Button\";\n\ntype ThemeProp = {\n  theme: ThemeType;\n};\n\ntype ContentProps = {\n  backgroundColor?: string;\n  theme: ThemeType;\n  top: string;\n  width: string;\n  maxWidth: string;\n};\n\nexport const Background = styled.div<ThemeProp>`\n  background: ${({ theme }) => theme.colors.modalBackdrop};\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n`;\n\nexport const Wrapper = styled.div`\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n`;\n\nexport const Content = styled(Box)<ContentProps>`\n  background-color: ${({ theme: { colors }, backgroundColor }) =>\n    backgroundColor !== undefined && typeof backgroundColor !== undefined\n      ? colors[backgroundColor as ColorKeyType] !== undefined\n        ? colors[backgroundColor as ColorKeyType]\n        : backgroundColor\n      : colors.backgroundLight};\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ${({ top }) => `${top} auto auto auto`};\n  width: ${({ width }) => width};\n  min-height: 10rem;\n  max-width: ${({ maxWidth }) => maxWidth};\n  z-index: 9999;\n`;\n\nexport const CloseButton = styled(Button)<ThemeProp>`\n  float: right;\n  margin-left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n  font-size: 1.2rem;\n  padding: 0;\n`;\n"],"names":["Background","styled","div","templateObject_1","__makeTemplateObject","_a","theme","colors","modalBackdrop","Wrapper","templateObject_2","Content","Box","templateObject_3","backgroundColor","undefined","backgroundLight","top","concat","width","maxWidth","CloseButton","Button","templateObject_4","spacing","xs"],"mappings":"mMAiBO,YAAMA,EAAaC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,mBAAA,sKAAA,CAAW,mBACU,yKAAzC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,aAAb,IAalBC,EAAUR,EAAOC,IAAGQ,IAAAA,EAAAN,EAAA,CAAA,oIAAA,CAAA,uIAUpBO,EAAUV,EAAOW,EAAPX,CAAyBY,IAAAA,EAAAT,EAAA,CAAA,yBAAA,qFAAA,eAAA,yCAAA,yBAAA,CAAA,yBAMlB,qFAGkB,eACjB,yCAEU,4BAXnB,SAACC,OAAWE,EAAMF,EAAAC,MAAAC,OAAIO,EAAeT,EAAAS,gBACvD,YAAoBC,IAApBD,QAA4DC,WAApBD,OACQC,IAA5CR,EAAOO,GACLP,EAAOO,GACPA,EACFP,EAAOS,eAJX,IAOQ,SAACX,GAAE,IAAAY,EAAGZ,EAAAY,IAAO,MAAA,GAAAC,OAAGD,EAAoB,kBAAvB,IACd,SAACZ,GAAc,OAAPA,EAAAc,KAAO,IAEX,SAACd,GAAiB,OAAPA,EAAAe,QAAO,IAIpBC,EAAcpB,EAAOqB,EAAPrB,CAAcsB,IAAAA,EAAAnB,EAAA,CAAA,qCAAA,4CAAA,CAAW,qCAM1C,+CAJO,SAACC,GAIV,OAFWA,EAAAC,MAAAkB,QAAAC,EAEX"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Modal/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ColorKeyType, type ThemeType } from \"../../types\";\nimport Box from \"../Box\";\nimport { Button } from \"../Button\";\n\nexport const Background = styled.div<{\n  theme: ThemeType;\n}>`\n  background: ${({ theme }) => theme.colors.modalBackdrop};\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n`;\n\nexport const Wrapper = styled.div`\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n`;\n\nexport const Content = styled(Box)<{\n  $backgroundColor?: string;\n  $top: string;\n  $width: string;\n  $maxWidth: string;\n  theme: ThemeType;\n}>`\n  background-color: ${({ theme: { colors }, backgroundColor }) =>\n    backgroundColor !== undefined && typeof backgroundColor !== undefined\n      ? colors[backgroundColor as ColorKeyType] !== undefined\n        ? colors[backgroundColor as ColorKeyType]\n        : backgroundColor\n      : colors.backgroundLight};\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ${({ $top }) => `${$top} auto auto auto`};\n  width: ${({ $width }) => $width};\n  min-height: 10rem;\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  z-index: 9999;\n`;\n\nexport const CloseButton = styled(Button)<{\n  theme: ThemeType;\n}>`\n  float: right;\n  margin-left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n  font-size: 1.2rem;\n  padding: 0;\n`;\n"],"names":["Background","styled","div","templateObject_1","__makeTemplateObject","_a","theme","colors","modalBackdrop","Wrapper","templateObject_2","Content","Box","templateObject_3","backgroundColor","undefined","backgroundLight","$top","concat","$width","$maxWidth","CloseButton","Button","templateObject_4","spacing","xs"],"mappings":"mMAKO,YAAMA,EAAaC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,mBAAA,sKAAA,CAElC,mBACuD,yKAAzC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,aAAb,IAalBC,EAAUR,EAAOC,IAAGQ,IAAAA,EAAAN,EAAA,CAAA,oIAAA,CAAA,uIAUpBO,EAAUV,EAAOW,EAAPX,CAMrBY,IAAAA,EAAAT,EAAA,CAAA,yBAAA,qFAAA,eAAA,yCAAA,yBAAA,CAAA,yBAM4B,qFAGoB,eACjB,yCAEU,4BAXrB,SAACC,OAAWE,EAAMF,EAAAC,MAAAC,OAAIO,EAAeT,EAAAS,gBACvD,YAAoBC,IAApBD,QAA4DC,WAApBD,OACQC,IAA5CR,EAAOO,GACLP,EAAOO,GACPA,EACFP,EAAOS,eAJX,IAOQ,SAACX,GAAE,IAAAY,EAAIZ,EAAAY,KAAO,MAAA,GAAAC,OAAGD,EAAqB,kBAAxB,IACf,SAACZ,GAAe,OAAPA,EAAAc,MAAO,IAEZ,SAACd,GAAkB,OAAPA,EAAAe,SAAO,IAIrBC,EAAcpB,EAAOqB,EAAPrB,CAAcsB,IAAAA,EAAAnB,EAAA,CAAA,qCAAA,4CAAA,CAEvC,qCAMQ,+CAJO,SAACC,GAIV,OAFWA,EAAAC,MAAAkB,QAAAC,EAEX"}

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as a,ThemeProvider as c}from"styled-components";import{crukTheme as n}from"../../themes/cruk.js";import{PagerWrapper as l,PagerList as r,PagerItem as o,PagerLink as i}from"./styles.js";function s(s){var m=s.current,d=s.items,u=s.hideLast,p=s.pagerCallback,f=s.perPage,E=s.searchParam,v=void 0===E?"page":E,b=s.children,h=s.id,k=a(),y=e(e({},n),k),x=f>0?f:1,g=Math.ceil(d/x)||1,P=function(e){return{href:"".concat("undefined"!=typeof window?window.location.pathname:"","?").concat(v?"".concat(v,"=").concat(e):""),onClick:function(t){t.preventDefault(),p(e)}}};return t.createElement(c,{theme:y},d>f&&t.createElement(l,null,t.createElement(r,null,t.createElement(o,{key:"Prev"},t.createElement(i,e({"data-cta":h?"".concat(h,"-prev"):null,name:"Prev",disabled:1===m,"aria-disabled":1===m},1===m&&{tabIndex:-1},1!==m&&P(m-1)),"Prev")),function(a,c){for(var n=[],l=[],r=1;r<=c;r+=1)n.push(t.createElement(o,{key:r},t.createElement(i,e({"data-cta":h?"".concat(h,"-").concat(r):null,active:r===a},P(r),{"aria-label":"page ".concat(r," of ").concat(c)}),r)));var s=n.slice(0,1).concat(t.createElement(o,{key:"first"},t.createElement("span",null,"..."))),m=n.slice(n.length-1).concat(t.createElement(o,{key:"last"},t.createElement("span",null,"..."))).reverse();return l=n.slice(0,c),c>7&&(l=a<=4?u?n.slice(0,7):n.slice(0,5).concat(m):a>c-4?s.concat(n.slice(-5)):u?s.concat(n.slice(a-3,a+2)):s.concat(n.slice(a-2,a+1)).concat(m)),l}(m,g),t.createElement(o,{key:"Next"},t.createElement(i,e({"data-cta":h?"".concat(h,"-next"):null,name:"Next",disabled:m===g,"aria-disabled":m===g},m===g&&{tabIndex:-1},m!==g&&P(m+1)),"Next"))),b))}export{s as Pagination,s as default};
+import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as a,ThemeProvider as c}from"styled-components";import{crukTheme as n}from"../../themes/cruk.js";import{PagerWrapper as l,PagerList as r,PagerItem as o,PagerLink as i}from"./styles.js";function s(s){var m=s.current,d=s.items,u=s.hideLast,p=s.pagerCallback,f=s.perPage,E=s.searchParam,v=void 0===E?"page":E,b=s.children,h=s.id,k=a(),y=e(e({},n),k),x=f>0?f:1,g=Math.ceil(d/x)||1,P=function(e){return{href:"".concat("undefined"!=typeof window?window.location.pathname:"","?").concat(v?"".concat(v,"=").concat(e):""),onClick:function(t){t.preventDefault(),p(e)}}};return t.createElement(c,{theme:y},d>f&&t.createElement(l,null,t.createElement(r,null,t.createElement(o,{key:"Prev"},t.createElement(i,e({"data-cta":h?"".concat(h,"-prev"):null,name:"Prev",disabled:1===m,"aria-disabled":1===m},1===m&&{tabIndex:-1},1!==m&&P(m-1)),"Prev")),function(a,c){for(var n=[],l=[],r=1;r<=c;r+=1)n.push(t.createElement(o,{key:r},t.createElement(i,e({"data-cta":h?"".concat(h,"-").concat(r):null,$active:r===a},P(r),{"aria-label":"page ".concat(r," of ").concat(c)}),r)));var s=n.slice(0,1).concat(t.createElement(o,{key:"first"},t.createElement("span",null,"..."))),m=n.slice(n.length-1).concat(t.createElement(o,{key:"last"},t.createElement("span",null,"..."))).reverse();return l=n.slice(0,c),c>7&&(l=a<=4?u?n.slice(0,7):n.slice(0,5).concat(m):a>c-4?s.concat(n.slice(-5)):u?s.concat(n.slice(a-3,a+2)):s.concat(n.slice(a-2,a+1)).concat(m)),l}(m,g),t.createElement(o,{key:"Next"},t.createElement(i,e({"data-cta":h?"".concat(h,"-next"):null,name:"Next",disabled:m===g,"aria-disabled":m===g},m===g&&{tabIndex:-1},m!==g&&P(m+1)),"Next"))),b))}export{s as Pagination,s as default};
 //# sourceMappingURL=index.js.map