@cruk/cruk-react-components 5.0.7 → 5.0.8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/InfoBox/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { Box } from \"../Box\";\nimport { Text } from \"../Text\";\nimport { Heading } from \"../Heading\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledInfoBox } from \"./styles\";\n\nexport type InfoBoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of wrapping element, this will add default padding */\n    backgroundColor?: string;\n    /** Title text */\n    titleText: string;\n    /** Title text colour */\n    titleTextColor?: string;\n    /** Description text */\n    descriptionText: string;\n    /** Description text colour */\n    descriptionTextColor?: string;\n    /** Space for extra element underneath description */\n    children?: ReactNode;\n    /** Icon in left column usually 2em squared */\n    icon?: ReactNode;\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n   * Box is used to wrap other components to add margin and padding. The values will be in the t-shirt sizes specified in the theme sizes.\n  \n  The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n   */\nexport const InfoBox = forwardRef(\n  (\n    {\n      children,\n      titleText,\n      titleTextColor,\n      descriptionText,\n      descriptionTextColor,\n      icon,\n      ...spacingAndHTMLElementProps\n    }: InfoBoxProps,\n    ref?: Ref<HTMLElement>,\n  ) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n\n    const backgroundColorOrDefault =\n      spacingAndHTMLElementProps.backgroundColor || theme.tokenColors.grey_200;\n\n    return (\n      <StyledInfoBox\n        theme={theme}\n        {...spacingAndHTMLElementProps}\n        backgroundColor={backgroundColorOrDefault}\n        margin={spacingAndHTMLElementProps.margin || \"none\"}\n        ref={ref}\n      >\n        {icon && <Box marginRight=\"s\">{icon}</Box>}\n        <div>\n          {titleText && (\n            <Heading\n              as=\"p\"\n              margin=\"none\"\n              h4\n              marginBottom=\"xxs\"\n              textColor={titleTextColor || theme.colors.textDark}\n            >\n              {titleText}\n            </Heading>\n          )}\n          {descriptionText && (\n            <Text\n              textColor={descriptionTextColor || theme.colors.textDark}\n              marginBottom=\"none\"\n            >\n              {descriptionText}\n            </Text>\n          )}\n          {children}\n        </div>\n      </StyledInfoBox>\n    );\n  },\n);\n\nexport default InfoBox;\n"],"names":["InfoBox","forwardRef","_a","ref","children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","spacingAndHTMLElementProps","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","backgroundColorOrDefault","backgroundColor","tokenColors","grey_200","React","createElement","StyledInfoBox","margin","Box","marginRight","Heading","as","h4","marginBottom","textColor","colors","textDark","Text"],"mappings":"gYA2CaA,EAAUC,GACrB,SACEC,EASAC,GARE,IAAAC,aACAC,cACAC,mBACAC,oBACAC,yBACAC,SACGC,EAPLC,EAAAT,EAAA,CAAA,WAAA,YAAA,iBAAA,kBAAA,uBAAA,SAWMU,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACJP,EAA2BQ,iBAAmBJ,EAAMK,YAAYC,SAElE,OACEC,EAACC,cAAAC,EACCR,EAAA,CAAAD,MAAOA,GACHJ,EAA0B,CAC9BQ,gBAAiBD,EACjBO,OAAQd,EAA2Bc,QAAU,OAC7CrB,IAAKA,IAEJM,GAAQY,gBAACI,EAAG,CAACC,YAAY,KAAKjB,GAC/BY,EAAAC,cAAA,MAAA,KACGjB,GACCgB,EAACC,cAAAK,EACC,CAAAC,GAAG,IACHJ,OAAO,OACPK,IAAE,EACFC,aAAa,MACbC,UAAWzB,GAAkBQ,EAAMkB,OAAOC,UAEzC5B,GAGJE,GACCc,EAACC,cAAAY,GACCH,UAAWvB,GAAwBM,EAAMkB,OAAOC,SAChDH,aAAa,QAEZvB,GAGJH,GAIT"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/InfoBox/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { Box } from \"../Box\";\nimport { Text } from \"../Text\";\nimport { Heading } from \"../Heading\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledInfoBox } from \"./styles\";\n\nexport type InfoBoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of wrapping element, this will add default padding */\n    backgroundColor?: string;\n    /** Title text */\n    titleText: string;\n    /** Title text colour */\n    titleTextColor?: string;\n    /** Description text */\n    descriptionText: string;\n    /** Description text colour */\n    descriptionTextColor?: string;\n    /** Space for extra element underneath description */\n    children?: ReactNode;\n    /** Icon in left column usually 2em squared */\n    icon?: ReactNode;\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n   * Box is used to wrap other components to add margin and padding. The values will be in the t-shirt sizes specified in the theme sizes.\n  \n  The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n   */\nexport const InfoBox = forwardRef(\n  (\n    {\n      children,\n      titleText,\n      titleTextColor,\n      descriptionText,\n      descriptionTextColor,\n      icon,\n      ...spacingAndHTMLElementProps\n    }: InfoBoxProps,\n    ref?: Ref<HTMLElement>,\n  ) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n\n    const backgroundColorOrDefault =\n      spacingAndHTMLElementProps.backgroundColor || theme.tokenColors.grey_200;\n\n    return (\n      <StyledInfoBox\n        theme={theme}\n        {...spacingAndHTMLElementProps}\n        backgroundColor={backgroundColorOrDefault}\n        margin={spacingAndHTMLElementProps.margin || \"none\"}\n        ref={ref}\n      >\n        {icon && <Box marginRight=\"s\">{icon}</Box>}\n        <div>\n          {titleText && (\n            <Heading\n              as=\"p\"\n              margin=\"none\"\n              h4\n              marginBottom=\"xxs\"\n              textColor={titleTextColor || theme.colors.textDark}\n            >\n              {titleText}\n            </Heading>\n          )}\n          {descriptionText && (\n            <Text\n              textColor={descriptionTextColor || theme.colors.textDark}\n              marginBottom=\"none\"\n            >\n              {descriptionText}\n            </Text>\n          )}\n          {children}\n        </div>\n      </StyledInfoBox>\n    );\n  },\n);\n\nInfoBox.displayName = \"InfoBox\";\n\nexport default InfoBox;\n"],"names":["InfoBox","forwardRef","children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","spacingAndHTMLElementProps","ref","foundTheme","useTheme","theme","defaultTheme","backgroundColorOrDefault","backgroundColor","tokenColors","grey_200","React","createElement","StyledInfoBox","margin","Box","marginRight","Heading","as","h4","marginBottom","textColor","colors","textDark","Text","displayName"],"mappings":"4SA2Ca,MAAAA,EAAUC,GACrB,EAEIC,WACAC,YACAC,iBACAC,kBACAC,uBACAC,UACGC,GAELC,KAEA,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EACJN,EAA2BO,iBAAmBH,EAAMI,YAAYC,SAElE,OACEC,EAACC,cAAAC,EACC,CAAAR,MAAOA,KACHJ,EACJO,gBAAiBD,EACjBO,OAAQb,EAA2Ba,QAAU,OAC7CZ,IAAKA,GAEJF,GAAQW,gBAACI,EAAG,CAACC,YAAY,KAAKhB,GAC/BW,EAAAC,cAAA,MAAA,KACGhB,GACCe,EAACC,cAAAK,EACC,CAAAC,GAAG,IACHJ,OAAO,OACPK,IAAE,EACFC,aAAa,MACbC,UAAWxB,GAAkBQ,EAAMiB,OAAOC,UAEzC3B,GAGJE,GACCa,EAACC,cAAAY,GACCH,UAAWtB,GAAwBM,EAAMiB,OAAOC,SAChDH,aAAa,QAEZtB,GAGJH,GAEW,IAKtBF,EAAQgC,YAAc"}

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

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

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

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

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 e from"react";import{useTheme as t,ThemeProvider as r}from"styled-components";import{Text as n}from"../Text/index.js";import{crukTheme as m}from"../../themes/cruk.js";import{Label as l,LabelText as o,RequiredText as i}from"./styles.js";function a({label:a,hintText:c,required:s=!1,hideRequiredInLabel:u=!1,children:f,...p}){const d=t(),h={...m,...d},E=c&&("string"==typeof c&&c.length||"number"==typeof c)?e.createElement(n,null,c):c;return e.createElement(r,{theme:h},a?e.createElement(l,{...p},e.createElement(o,{$hasHintText:!!c},a,s&&!u&&e.createElement(i,null," (required)")),E,f):e.createElement(e.Fragment,null,f))}export{a as LabelWrapper,a 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,GAAgB,EAK3B,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"}
+{"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","label","hintText","required","hideRequiredInLabel","children","otherHTMLLabelProps","foundTheme","useTheme","theme","defaultTheme","hintTextElement","length","React","createElement","Text","ThemeProvider","Label","LabelText","$hasHintText","RequiredText","Fragment"],"mappings":"mPAoBM,SAAUA,GAAaC,MAC3BA,EAAKC,SACLA,EAAQC,SACRA,GAAW,EAAKC,oBAChBA,GAAsB,EAAKC,SAC3BA,KACGC,IAEH,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EACFT,IACoB,iBAAbA,GAAyBA,EAASU,QACrB,iBAAbV,GACPW,EAACC,cAAAC,OAAMb,GAAgB,EAK3B,OACEW,EAACC,cAAAE,EAAc,CAAAP,MAAOA,GACnBR,EACCY,EAACC,cAAAG,MAAUX,GACTO,EAAAC,cAACI,EAAS,CAAAC,eAAiBjB,GACxBD,EACAE,IAAaC,GACZS,EAACC,cAAAM,EAAc,KAAA,gBAGlBT,EACAN,GAGHQ,EAAGC,cAAAD,EAAAQ,SAAA,KAAAhB,GAIX"}

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

@@ -1,2 +1,16 @@
-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 t from"styled-components";const e=t.label`
+  position: relative;
+  display: block;
+  width: 100%;
+  font-family: ${({theme:t})=>t.typography.fontFamilyLabel};
+  font-weight: ${({theme:t})=>t.typography.fontWeightLabels};
+`,o=t.span`
+  font-family: ${({theme:t})=>t.typography.fontFamilyLabel};
+  font-weight: ${({theme:t})=>t.typography.fontWeightBase};
+`,a=t.span`
+  font-family: ${({theme:t})=>t.typography.fontFamilyLabel};
+  font-weight: ${({theme:t})=>t.typography.fontWeightLabels};
+  display: block;
+  margin-bottom: ${({$hasHintText:t,theme:e})=>t?e.spacing.xxs:e.spacing.xs};
+`;export{e as Label,a as LabelText,o 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,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"}
+{"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","theme","typography","fontFamilyLabel","fontWeightLabels","RequiredText","span","fontWeightBase","LabelText","$hasHintText","spacing","xxs","xs"],"mappings":"iCAQa,MAAAA,EAAQC,EAAOC,KAA2B;;;;iBAItC,EAAGC,WAAYA,EAAMC,WAAWC;iBAChC,EAAGF,WAAYA,EAAMC,WAAWE;EAGpCC,EAAeN,EAAOO,IAA0B;iBAC5C,EAAGL,WAAYA,EAAMC,WAAWC;iBAChC,EAAGF,WAAYA,EAAMC,WAAWK;EAGpCC,EAAYT,EAAOO,IAAmB;iBAClC,EAAGL,WAAYA,EAAMC,WAAWC;iBAChC,EAAGF,WAAYA,EAAMC,WAAWE;;mBAE9B,EAAGK,eAAcR,WAChCQ,EAAeR,EAAMS,QAAQC,IAAMV,EAAMS,QAAQE;"}

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

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

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 e from"react";import{useTheme as r,ThemeProvider as t}from"styled-components";import{crukTheme as n}from"../../themes/cruk.js";import{ErrorText as m}from"../ErrorText/index.js";import{Text as o}from"../Text/index.js";import{StyledFieldset as s,LegendSpan as a}from"./styles.js";function i({children:i,legendText:l,required:c,errorMessage:p,hasError:x,hintText:f,...E}){const d=r(),h={...n,...d},u=!f||"string"!=typeof f&&"number"!=typeof f?f:e.createElement(o,{as:"span"},f);return e.createElement(t,{theme:h},e.createElement(s,{$hasError:x||!!p||!1,$hasHintText:!!f},l&&e.createElement("legend",{...E},e.createElement(a,{$hasHintText:!!f},l," ",c&&e.createElement("span",null,"(required)")),u),i,!!p&&e.createElement(m,{marginTop:"xxs"},p)))}export{i as LegendWrapper,i 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\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,EAGtC,EAFAS,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"}
+{"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","children","legendText","required","errorMessage","hasError","hintText","restOfHTMLAttributes","foundTheme","useTheme","theme","defaultTheme","hintTextElement","React","createElement","Text","as","ThemeProvider","StyledFieldset","$hasError","$hasHintText","LegendSpan","ErrorText","marginTop"],"mappings":"sSA4BgBA,GAAcC,SAC5BA,EAAQC,WACRA,EAAUC,SACVA,EAAQC,aACRA,EAAYC,SACZA,EAAQC,SACRA,KACGC,IAEH,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,GACFN,GACmB,iBAAbA,GAA6C,iBAAbA,EAGtC,EAFAO,EAAAC,cAACC,EAAI,CAACC,GAAG,QAAQV,GAIrB,OACEO,EAACC,cAAAG,EAAc,CAAAP,MAAOA,GACpBG,EAAAC,cAACI,EAAc,CAAAC,UACFd,KAAcD,IAAgB,EAAKgB,eAC9Bd,GAEfJ,GACCW,EAAAC,cAAA,SAAA,IAAYP,GACVM,EAAAC,cAACO,EAAU,CAAAD,eAAiBd,GACzBJ,MAAaC,GAAYU,2CAE3BD,GAGJX,IACEG,GACDS,EAAAC,cAACQ,EAAU,CAAAC,UAAU,OAAOnB,IAKtC"}

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

@@ -1,2 +1,35 @@
-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 e from"styled-components";const o=e.span`
+  display: block;
+  color: ${({theme:e})=>e.colors.textDark};
+  font-size: ${({theme:e})=>e.fontSizes.m};
+  line-height: ${({theme:e})=>e.typography.lineHeight};
+  font-weight: ${({theme:e})=>e.typography.fontWeightLabels};
+  font-family: ${({theme:e})=>e.typography.fontFamilyLabel};
+  min-width: 3em;
+  margin-bottom: ${({$hasHintText:e,theme:o})=>e?o.spacing.xxs:0};
+
+  & > * {
+    font-weight: ${({theme:e})=>e.typography.fontWeightBase};
+  }
+`,t=e.fieldset`
+  *,
+  *:after,
+  *:before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  border: none;
+  padding: 0;
+  legend {
+    margin-bottom: ${({theme:e})=>e.spacing.xs};
+  }
+  label {
+    border-color: ${({$hasError:e,theme:o})=>e&&o.colors.textError};
+    margin-bottom: ${({theme:e})=>e.spacing.none};
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+`;export{o as LegendSpan,t 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  $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"}
+{"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","theme","colors","textDark","fontSizes","m","typography","lineHeight","fontWeightLabels","fontFamilyLabel","$hasHintText","spacing","xxs","fontWeightBase","StyledFieldset","fieldset","xs","$hasError","textError","none"],"mappings":"iCAUa,MAAAA,EAAaC,EAAOC,IAG/B;;WAES,EAAGC,WAAYA,EAAMC,OAAOC;eACxB,EAAGF,WAAYA,EAAMG,UAAUC;iBAC7B,EAAGJ,WAAYA,EAAMK,WAAWC;iBAChC,EAAGN,WAAYA,EAAMK,WAAWE;iBAChC,EAAGP,WAAYA,EAAMK,WAAWG;;mBAE9B,EAAGC,eAAcT,WAChCS,EAAeT,EAAMU,QAAQC,IAAM;;;mBAGpB,EAAGX,WAAYA,EAAMK,WAAWO;;EAItCC,EAAiBf,EAAOgB,QAA6B;;;;;;;;;;;qBAW7C,EAAGd,WAAYA,EAAMU,QAAQK;;;oBAG9B,EAAGC,YAAWhB,WAC5BgB,GAAahB,EAAMC,OAAOgB;qBACX,EAAGjB,WAAYA,EAAMU,QAAQQ;;;;;"}

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

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

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

@@ -1,2 +1,2 @@
-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};
+import e,{forwardRef as r}from"react";import{useTheme as t,ThemeProvider as o}from"styled-components";import{crukTheme as a}from"../../themes/cruk.js";import{StyledLink as m}from"./styles.js";const n=r(((r,n)=>{const s=t(),l={...a,...s},p=r.rel?r.rel:"_blank"===r.target?"noopener noreferrer":"",c=r.as&&"a"!==r.as?void 0:"a",{textHoverColor:f,appearance:i,...d}=r;return e.createElement(o,{theme:l},e.createElement(m,{...d,$textHoverColor:f,$appearance:i,theme:l,rel:p,forwardedAs:c,ref:n},r.children))}));n.displayName="Link";export{n as Link,n 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  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"}
+{"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\nLink.displayName = \"Link\";\n\nexport default Link;\n"],"names":["Link","forwardRef","props","ref","foundTheme","useTheme","theme","defaultTheme","rel","target","forwardAs","as","undefined","textHoverColor","appearance","rest","React","createElement","ThemeProvider","StyledLink","$textHoverColor","$appearance","forwardedAs","children","displayName"],"mappings":"gMAsCa,MAAAA,EAAOC,GAAW,CAACC,EAAkBC,KAChD,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EAAMN,EAAMM,IACdN,EAAMM,IACW,WAAjBN,EAAMO,OACJ,sBACA,GAGAC,EAAYR,EAAMS,IAAmB,MAAbT,EAAMS,QAAaC,EAAY,KAEvDC,eAAEA,EAAcC,WAAEA,KAAeC,GAASb,EAEhD,OACEc,EAACC,cAAAC,EAAc,CAAAZ,MAAOA,GACpBU,EAAAC,cAACE,EAAU,IACLJ,EAAIK,gBACSP,EAAcQ,YAClBP,EACbR,MAAOA,EACPE,IAAKA,EACLc,YAAaZ,EACbP,IAAKA,GAEJD,EAAMqB,UAEK,IAIpBvB,EAAKwB,YAAc"}

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

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