@cruk/cruk-react-components 7.0.0 → 7.1.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/DateField/index.tsx"],"sourcesContent":["import React, { type InputHTMLAttributes } from \"react\";\n\nimport { ErrorText } from \"../ErrorText\";\nimport { Text } from \"../Text\";\nimport { TextField } from \"../TextField\";\n\nimport {\n  Fieldset,\n  DateTextFieldWrapper,\n  LargeDateTextFieldWrapper,\n  ErrorTextWrapper,\n  LegendText,\n} from \"./styles\";\n\nexport type DateFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  /** label text */\n  label: string;\n  /** hind text */\n  hintText?: string;\n  /** day field text value  */\n  day: string;\n  /** month field text value  */\n  month: string;\n  /** year field text value  */\n  year: string;\n  /** name passed to day field input element */\n  dayName?: string;\n  /** name passed to month field input element */\n  monthName?: string;\n  /** name passed to year field input element */\n  yearName?: string;\n  /** flag of error styling on day field */\n  dayHasError?: boolean;\n  /** flag of error styling on month field */\n  monthHasError?: boolean;\n  /** flag of error styling on year field */\n  yearHasError?: boolean;\n  /** error message text */\n  errorMessage?: string;\n};\n\n/**\n * To be used in forms entering dates like date of birth which are known dates and would take too long to get to with a date picker\n * */\nexport function DateField({\n  label,\n  hintText,\n  day,\n  month,\n  year,\n  dayName = \"day\",\n  monthName = \"month\",\n  yearName = \"year\",\n  dayHasError,\n  monthHasError,\n  yearHasError,\n  errorMessage,\n  onChange = () => {\n    // no op\n  },\n  onBlur = () => {\n    // no op\n  },\n  onFocus = () => {\n    // no op\n  },\n  disabled,\n  required,\n}: DateFieldProps) {\n  return (\n    <Fieldset>\n      <LegendText>\n        {label}\n        {!required && (\n          <span\n            style={{\n              fontWeight: \"var(--typ-font-weight-base, 300)\",\n            }}\n          >\n            {` (optional)`}\n          </span>\n        )}\n      </LegendText>\n      {hintText && <Text textColor=\"text-mid\">{hintText}</Text>}\n      <DateTextFieldWrapper>\n        <TextField\n          label=\"Day\"\n          type=\"text\"\n          name={dayName}\n          required={!!required}\n          hideRequiredIndicationInLabel\n          maxLength={2}\n          autoComplete=\"bday-day\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={day}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={dayHasError}\n          disabled={disabled}\n        />\n      </DateTextFieldWrapper>\n      <DateTextFieldWrapper>\n        <TextField\n          label=\"Month\"\n          type=\"text\"\n          name={monthName}\n          required={!!required}\n          hideRequiredIndicationInLabel\n          maxLength={2}\n          autoComplete=\"bday-month\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={month}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={monthHasError}\n          disabled={disabled}\n        />\n      </DateTextFieldWrapper>\n      <LargeDateTextFieldWrapper>\n        <TextField\n          label=\"Year\"\n          type=\"text\"\n          name={yearName}\n          required={!!required}\n          hideRequiredIndicationInLabel\n          maxLength={4}\n          autoComplete=\"bday-year\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={year}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={yearHasError}\n          disabled={disabled}\n        />\n      </LargeDateTextFieldWrapper>\n      {errorMessage && (\n        <ErrorTextWrapper>\n          <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>\n        </ErrorTextWrapper>\n      )}\n    </Fieldset>\n  );\n}\n\nexport default DateField;\n"],"names":["DateField","_a","label","hintText","day","month","year","_b","dayName","_c","monthName","_d","yearName","dayHasError","monthHasError","yearHasError","errorMessage","_e","onChange","_f","onBlur","_g","onFocus","disabled","required","React","Fieldset","createElement","LegendText","style","fontWeight","Text","textColor","DateTextFieldWrapper","TextField","type","name","hideRequiredIndicationInLabel","maxLength","autoComplete","pattern","inputMode","value","hasError","LargeDateTextFieldWrapper","ErrorTextWrapper","ErrorText","marginTop"],"mappings":"uSA4CM,SAAUA,EAAUC,OACxBC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAGH,EAAAG,IACHC,EAAKJ,EAAAI,MACLC,EAAIL,EAAAK,KACJC,EAAAN,EAAAO,QAAAA,OAAO,IAAAD,EAAG,MAAKA,EACfE,EAAAR,EAAAS,UAAAA,OAAS,IAAAD,EAAG,QAAOA,EACnBE,aAAAC,aAAW,OAAMD,EACjBE,EAAWZ,EAAAY,YACXC,EAAab,EAAAa,cACbC,EAAYd,EAAAc,aACZC,iBACAC,EAAAhB,EAAAiB,SAAAA,OAAQ,IAAAD,EAAG,WAEX,EAACA,EACDE,EAAAlB,EAAAmB,OAAAA,OAAM,IAAAD,EAAG,WAET,EAACA,EACDE,EAAApB,EAAAqB,QAAAA,OAAO,IAAAD,EAAG,WAEV,IACAE,EAAQtB,EAAAsB,SACRC,EAAQvB,EAAAuB,SAER,OACEC,gBAACC,EAAQ,KACPD,EAAAE,cAACC,EAAU,KACR1B,GACCsB,GACAC,EAAAE,cAAA,OAAA,CACEE,MAAO,CACLC,WAAY,qCAGb,gBAIN3B,GAAYsB,gBAACM,EAAI,CAACC,UAAU,YAAY7B,GACzCsB,EAAAE,cAACM,EAAoB,KACnBR,EAAAE,cAACO,EAAS,CACRhC,MAAM,MACNiC,KAAK,OACLC,KAAM5B,EACNgB,WAAYA,EACZa,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,WACbC,QAAQ,SACRC,UAAU,UACVC,MAAOtC,EACPc,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTqB,SAAU9B,EACVU,SAAUA,KAGdE,EAAAE,cAACM,EAAoB,KACnBR,EAAAE,cAACO,EAAS,CACRhC,MAAM,QACNiC,KAAK,OACLC,KAAM1B,EACNc,WAAYA,EACZa,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,aACbC,QAAQ,SACRC,UAAU,UACVC,MAAOrC,EACPa,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTqB,SAAU7B,EACVS,SAAUA,KAGdE,EAAAE,cAACiB,EAAyB,KACxBnB,EAAAE,cAACO,EAAS,CACRhC,MAAM,OACNiC,KAAK,OACLC,KAAMxB,EACNY,WAAYA,EACZa,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,YACbC,QAAQ,SACRC,UAAU,UACVC,MAAOpC,EACPY,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTqB,SAAU5B,EACVQ,SAAUA,KAGbP,GACCS,EAAAE,cAACkB,EAAgB,KACfpB,EAAAE,cAACmB,EAAS,CAACC,UAAU,OAAO/B,IAKtC"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/DateField/index.tsx"],"sourcesContent":["import React, { type InputHTMLAttributes } from \"react\";\n\nimport { ErrorText } from \"../ErrorText\";\nimport { Text } from \"../Text\";\nimport { TextField } from \"../TextField\";\n\n/**\n * To be used in forms entering dates like date of birth which are known dates and would take too long to get to with a date picker\n * */\nexport function DateField({\n  label,\n  hintText,\n  day,\n  month,\n  year,\n  dayName = \"day\",\n  monthName = \"month\",\n  yearName = \"year\",\n  dayHasError,\n  monthHasError,\n  yearHasError,\n  errorMessage,\n  onChange = () => {\n    // no op\n  },\n  onBlur = () => {\n    // no op\n  },\n  onFocus = () => {\n    // no op\n  },\n  disabled,\n  required,\n}: InputHTMLAttributes<HTMLInputElement> & {\n  /** label text */\n  label: string;\n  /** hind text */\n  hintText?: string;\n  /** day field text value  */\n  day: string;\n  /** month field text value  */\n  month: string;\n  /** year field text value  */\n  year: string;\n  /** name passed to day field input element */\n  dayName?: string;\n  /** name passed to month field input element */\n  monthName?: string;\n  /** name passed to year field input element */\n  yearName?: string;\n  /** flag of error styling on day field */\n  dayHasError?: boolean;\n  /** flag of error styling on month field */\n  monthHasError?: boolean;\n  /** flag of error styling on year field */\n  yearHasError?: boolean;\n  /** error message text */\n  errorMessage?: string;\n}) {\n  return (\n    <fieldset className=\"component-date-field\">\n      <legend>\n        {label}\n        {!required && (\n          <span\n            style={{\n              fontWeight: \"var(--typ-font-weight-base, 300)\",\n            }}\n          >\n            {` (optional)`}\n          </span>\n        )}\n      </legend>\n      {hintText && <Text textColor=\"text-mid\">{hintText}</Text>}\n      <div className=\"date-text-field-wrapper\">\n        <TextField\n          label=\"Day\"\n          type=\"text\"\n          name={dayName}\n          required={!!required}\n          hideRequiredIndicationInLabel\n          maxLength={2}\n          autoComplete=\"bday-day\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={day}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={dayHasError}\n          disabled={disabled}\n        />\n      </div>\n      <div className=\"date-text-field-wrapper\">\n        <TextField\n          label=\"Month\"\n          type=\"text\"\n          name={monthName}\n          required={!!required}\n          hideRequiredIndicationInLabel\n          maxLength={2}\n          autoComplete=\"bday-month\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={month}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={monthHasError}\n          disabled={disabled}\n        />\n      </div>\n      <div className=\"large-date-text-field-wrapper\">\n        <TextField\n          label=\"Year\"\n          type=\"text\"\n          name={yearName}\n          required={!!required}\n          hideRequiredIndicationInLabel\n          maxLength={4}\n          autoComplete=\"bday-year\"\n          pattern=\"[0-9]*\"\n          inputMode=\"numeric\"\n          value={year}\n          onChange={onChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          hasError={yearHasError}\n          disabled={disabled}\n        />\n      </div>\n      {errorMessage && (\n        <div className=\"error-text-wrapper\">\n          <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>\n        </div>\n      )}\n    </fieldset>\n  );\n}\n\nexport default DateField;\n"],"names":["DateField","_a","label","hintText","day","month","year","_b","dayName","_c","monthName","_d","yearName","dayHasError","monthHasError","yearHasError","errorMessage","_e","onChange","_f","onBlur","_g","onFocus","disabled","required","React","createElement","className","style","fontWeight","Text","textColor","TextField","type","name","hideRequiredIndicationInLabel","maxLength","autoComplete","pattern","inputMode","value","hasError","ErrorText","marginTop"],"mappings":"iKASM,SAAUA,EAAUC,OACxBC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAGH,EAAAG,IACHC,EAAKJ,EAAAI,MACLC,EAAIL,EAAAK,KACJC,EAAAN,EAAAO,QAAAA,OAAO,IAAAD,EAAG,MAAKA,EACfE,EAAAR,EAAAS,UAAAA,OAAS,IAAAD,EAAG,QAAOA,EACnBE,aAAAC,aAAW,OAAMD,EACjBE,EAAWZ,EAAAY,YACXC,EAAab,EAAAa,cACbC,EAAYd,EAAAc,aACZC,iBACAC,EAAAhB,EAAAiB,SAAAA,OAAQ,IAAAD,EAAG,WAEX,EAACA,EACDE,EAAAlB,EAAAmB,OAAAA,OAAM,IAAAD,EAAG,WAET,EAACA,EACDE,EAAApB,EAAAqB,QAAAA,OAAO,IAAAD,EAAG,WAEV,IACAE,EAAQtB,EAAAsB,SACRC,EAAQvB,EAAAuB,SA2BR,OACEC,EAAAC,cAAA,WAAA,CAAUC,UAAU,wBAClBF,EAAAC,cAAA,SAAA,KACGxB,GACCsB,GACAC,EAAAC,cAAA,OAAA,CACEE,MAAO,CACLC,WAAY,qCAGb,gBAIN1B,GAAYsB,gBAACK,EAAI,CAACC,UAAU,YAAY5B,GACzCsB,EAAAC,cAAA,MAAA,CAAKC,UAAU,2BACbF,EAAAC,cAACM,EAAS,CACR9B,MAAM,MACN+B,KAAK,OACLC,KAAM1B,EACNgB,WAAYA,EACZW,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,WACbC,QAAQ,SACRC,UAAU,UACVC,MAAOpC,EACPc,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTmB,SAAU5B,EACVU,SAAUA,KAGdE,EAAAC,cAAA,MAAA,CAAKC,UAAU,2BACbF,EAAAC,cAACM,EAAS,CACR9B,MAAM,QACN+B,KAAK,OACLC,KAAMxB,EACNc,WAAYA,EACZW,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,aACbC,QAAQ,SACRC,UAAU,UACVC,MAAOnC,EACPa,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTmB,SAAU3B,EACVS,SAAUA,KAGdE,EAAAC,cAAA,MAAA,CAAKC,UAAU,iCACbF,EAAAC,cAACM,EAAS,CACR9B,MAAM,OACN+B,KAAK,OACLC,KAAMtB,EACNY,WAAYA,EACZW,+BAA6B,EAC7BC,UAAW,EACXC,aAAa,YACbC,QAAQ,SACRC,UAAU,UACVC,MAAOlC,EACPY,SAAUA,EACVE,OAAQA,EACRE,QAASA,EACTmB,SAAU1B,EACVQ,SAAUA,KAGbP,GACCS,EAAAC,cAAA,MAAA,CAAKC,UAAU,sBACbF,EAAAC,cAACgB,EAAS,CAACC,UAAU,OAAO3B,IAKtC"}

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

@@ -1,13 +1,14 @@
-import React, { type HTMLAttributes } from "react";
-import { type SpacingProps } from "../Spacing";
-export type ErrorTextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
-    as?: React.ElementType;
-};
+import React, { type Ref, type HTMLAttributes } from "react";
+import { type SpacingProps, type TextProps, type ColourProps } from "../../types";
 /**
  *
  * To be used in forms for inline validation. Applies styling and accessibility attribute so that it will be read by screen readers.
  *
  * Please be aware that some input components already have this component built in and can be passed an "errorMessage" prop
  */
-export declare function ErrorText({ children, as, ...props }: ErrorTextProps): React.JSX.Element;
+export declare function ErrorText({ textColor, backgroundColor, margin, marginTop, marginRight, marginBottom, marginLeft, marginVertical, marginHorizontal, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingVertical, paddingHorizontal, textSize, textAlign, textWeight, textFontFamily, wordBreak, overflowWrap, as, children, ref, ...htmlAttributes }: SpacingProps & TextProps & ColourProps & HTMLAttributes<HTMLElement> & {
+    children?: React.ReactNode;
+    as?: "span" | "div" | "p";
+    ref?: Ref<HTMLSpanElement | HTMLDivElement | HTMLParagraphElement>;
+}): React.JSX.Element;
 export default ErrorText;

package/lib/src/components/ErrorText/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{faTriangleExclamation as o}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{StyledErrorText as s}from"./styles.js";import{IconFa as i}from"../IconFa/index.js";import{Box as n}from"../Box/index.js";function a(a){var m=a.children,l=a.as,d=void 0===l?"span":l,f=e(a,["children","as"]),c="string"==typeof m&&m.length;return t.createElement(s,r({forwardedAs:d},f,{role:"alert",textColor:"var(--clr-text-error, #d93025)",textWeight:"var(--typ-font-weight-heavy, 700)"}),c?t.createElement(n,{as:"span",marginRight:"xxs"},t.createElement(i,{faIcon:o,size:"1em"})):null,m)}export{a as ErrorText,a as default};
+import{__rest as t,__assign as a}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{faTriangleExclamation as e}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as o}from"../IconFa/index.js";import{Box as n}from"../Box/index.js";import{removeEmpty as i}from"../../utils/Helper.js";function d(d){var l=d.textColor,p=d.backgroundColor,g=d.margin,m=d.marginTop,s=d.marginRight,c=d.marginBottom,f=d.marginLeft,x=d.marginVertical,h=d.marginHorizontal,u=d.padding,z=d.paddingTop,v=d.paddingRight,w=d.paddingBottom,b=d.paddingLeft,j=d.paddingVertical,B=d.paddingHorizontal,E=d.textSize,F=d.textAlign,k=d.textWeight,H=d.textFontFamily,R=d.wordBreak,y=d.overflowWrap,C=d.as,L=d.children,T=d.ref,V=t(d,["textColor","backgroundColor","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","textSize","textAlign","textWeight","textFontFamily","wordBreak","overflowWrap","as","children","ref"]),W=i({"data-color":l,"data-bg-color":p,"data-text-size":E,"data-text-align":F,"data-text-weight":k,"data-text-font-family":H,"data-word-break":R,"data-overflow-wrap":y,"data-margin":g,"data-margin-top":m,"data-margin-right":s,"data-margin-bottom":c,"data-margin-left":f,"data-margin-vertical":x,"data-margin-horizontal":h,"data-padding":u,"data-padding-top":z,"data-padding-right":v,"data-padding-bottom":w,"data-padding-left":b,"data-padding-vertical":j,"data-padding-horizontal":B}),N="string"==typeof L&&L.length,A=r.createElement(r.Fragment,null,N?r.createElement(n,{as:"span",marginRight:"xxs"},r.createElement(o,{faIcon:e,size:"1em"})):null,L);return r.createElement(r.Fragment,null,C&&"span"!==C?null:r.createElement("span",a({className:["component-error-text","text-props","spacing-props","color-props"].join(" "),ref:T},V,W,{role:"alert"}),A),"div"===C?r.createElement("div",a({className:["component-error-text","text-props","spacing-props","color-props"].join(" "),ref:T},V,W,{role:"alert"}),A):null,"p"===C?r.createElement("p",a({className:["component-error-text","text-props","spacing-props","color-props"].join(" "),ref:T},V,W,{role:"alert"}),A):null)}export{d as ErrorText,d as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ErrorText/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes } from \"react\";\nimport { faTriangleExclamation } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledErrorText } from \"./styles\";\nimport { IconFa } from \"../IconFa\";\nimport { Box } from \"../Box\";\n\nexport type ErrorTextProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n  };\n\n/**\n *\n * To be used in forms for inline validation. Applies styling and accessibility attribute so that it will be read by screen readers.\n *\n * Please be aware that some input components already have this component built in and can be passed an \"errorMessage\" prop\n */\nexport function ErrorText({ children, as = \"span\", ...props }: ErrorTextProps) {\n  const shouldShowIcon = typeof children === \"string\" && children.length;\n  return (\n    <StyledErrorText\n      forwardedAs={as}\n      {...props}\n      role=\"alert\"\n      textColor=\"var(--clr-text-error, #d93025)\"\n      textWeight=\"var(--typ-font-weight-heavy, 700)\"\n    >\n      {shouldShowIcon ? (\n        <Box as=\"span\" marginRight=\"xxs\">\n          <IconFa faIcon={faTriangleExclamation} size=\"1em\" />\n        </Box>\n      ) : null}\n      {children}\n    </StyledErrorText>\n  );\n}\n\nexport default ErrorText;\n"],"names":["ErrorText","_a","children","_b","as","props","__rest","shouldShowIcon","length","React","StyledErrorText","__assign","forwardedAs","role","textColor","textWeight","createElement","Box","marginRight","IconFa","faIcon","faTriangleExclamation","size"],"mappings":"8UAmBM,SAAUA,EAAUC,GAAE,IAAAC,EAAQD,EAAAC,SAAEC,EAAAF,EAAAG,GAAAA,OAAE,IAAAD,EAAG,OAAMA,EAAKE,EAAKC,EAAAL,EAAjC,mBAClBM,EAAqC,iBAAbL,GAAyBA,EAASM,OAChE,OACEC,gBAACC,EAAeC,EAAA,CACdC,YAAaR,GACTC,EAAK,CACTQ,KAAK,QACLC,UAAU,iCACVC,WAAW,sCAEVR,EACCE,EAAAO,cAACC,EAAG,CAACb,GAAG,OAAOc,YAAY,OACzBT,EAAAO,cAACG,EAAM,CAACC,OAAQC,EAAuBC,KAAK,SAE5C,KACHpB,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ErrorText/index.tsx"],"sourcesContent":["import React, { type Ref, type HTMLAttributes } from \"react\";\nimport { faTriangleExclamation } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\nimport { Box } from \"../Box\";\n\nimport { removeEmpty } from \"../../utils/Helper\";\n\nimport {\n  type SpacingProps,\n  type TextProps,\n  type ColourProps,\n} from \"../../types\";\n\n/**\n *\n * To be used in forms for inline validation. Applies styling and accessibility attribute so that it will be read by screen readers.\n *\n * Please be aware that some input components already have this component built in and can be passed an \"errorMessage\" prop\n */\nexport function ErrorText({\n  textColor,\n  backgroundColor,\n  margin,\n  marginTop,\n  marginRight,\n  marginBottom,\n  marginLeft,\n  marginVertical,\n  marginHorizontal,\n  padding,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n  paddingVertical,\n  paddingHorizontal,\n  textSize,\n  textAlign,\n  textWeight,\n  textFontFamily,\n  wordBreak,\n  overflowWrap,\n  as,\n  children,\n  ref,\n  ...htmlAttributes\n}: SpacingProps &\n  TextProps &\n  ColourProps &\n  HTMLAttributes<HTMLElement> & {\n    children?: React.ReactNode;\n    as?: \"span\" | \"div\" | \"p\";\n    ref?: Ref<HTMLSpanElement | HTMLDivElement | HTMLParagraphElement>;\n  }) {\n  const convertedProps = {\n    \"data-color\": textColor,\n    \"data-bg-color\": backgroundColor,\n    \"data-text-size\": textSize,\n    \"data-text-align\": textAlign,\n    \"data-text-weight\": textWeight,\n    \"data-text-font-family\": textFontFamily,\n    \"data-word-break\": wordBreak,\n    \"data-overflow-wrap\": overflowWrap,\n    \"data-margin\": margin,\n    \"data-margin-top\": marginTop,\n    \"data-margin-right\": marginRight,\n    \"data-margin-bottom\": marginBottom,\n    \"data-margin-left\": marginLeft,\n    \"data-margin-vertical\": marginVertical,\n    \"data-margin-horizontal\": marginHorizontal,\n    \"data-padding\": padding,\n    \"data-padding-top\": paddingTop,\n    \"data-padding-right\": paddingRight,\n    \"data-padding-bottom\": paddingBottom,\n    \"data-padding-left\": paddingLeft,\n    \"data-padding-vertical\": paddingVertical,\n    \"data-padding-horizontal\": paddingHorizontal,\n  };\n\n  const convertedPropsFiltered = removeEmpty(convertedProps);\n\n  const shouldShowIcon = typeof children === \"string\" && children.length;\n\n  const innerContent = (\n    <>\n      {shouldShowIcon ? (\n        <Box as=\"span\" marginRight=\"xxs\">\n          <IconFa faIcon={faTriangleExclamation} size=\"1em\" />\n        </Box>\n      ) : null}\n      {children}\n    </>\n  );\n  return (\n    <>\n      {!as || as === \"span\" ? (\n        <span\n          className={[\n            \"component-error-text\",\n            \"text-props\",\n            \"spacing-props\",\n            \"color-props\",\n          ].join(\" \")}\n          ref={ref as Ref<HTMLSpanElement>}\n          {...htmlAttributes}\n          {...convertedPropsFiltered}\n          role=\"alert\"\n        >\n          {innerContent}\n        </span>\n      ) : null}\n      {as === \"div\" ? (\n        <div\n          className={[\n            \"component-error-text\",\n            \"text-props\",\n            \"spacing-props\",\n            \"color-props\",\n          ].join(\" \")}\n          ref={ref as Ref<HTMLDivElement>}\n          {...htmlAttributes}\n          {...convertedPropsFiltered}\n          role=\"alert\"\n        >\n          {innerContent}\n        </div>\n      ) : null}\n      {as === \"p\" ? (\n        <p\n          className={[\n            \"component-error-text\",\n            \"text-props\",\n            \"spacing-props\",\n            \"color-props\",\n          ].join(\" \")}\n          ref={ref as Ref<HTMLParagraphElement>}\n          {...htmlAttributes}\n          {...convertedPropsFiltered}\n          role=\"alert\"\n        >\n          {innerContent}\n        </p>\n      ) : null}\n    </>\n  );\n}\n\nexport default ErrorText;\n"],"names":["ErrorText","_a","textColor","backgroundColor","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","textSize","textAlign","textWeight","textFontFamily","wordBreak","overflowWrap","as","children","ref","htmlAttributes","__rest","convertedPropsFiltered","removeEmpty","shouldShowIcon","length","innerContent","React","createElement","Fragment","Box","IconFa","faIcon","faTriangleExclamation","size","__assign","className","join","role"],"mappings":"oVAoBM,SAAUA,EAAUC,GACxB,IAAAC,EAASD,EAAAC,UACTC,EAAeF,EAAAE,gBACfC,EAAMH,EAAAG,OACNC,cACAC,EAAWL,EAAAK,YACXC,EAAYN,EAAAM,aACZC,EAAUP,EAAAO,WACVC,EAAcR,EAAAQ,eACdC,qBACAC,EAAOV,EAAAU,QACPC,EAAUX,EAAAW,WACVC,EAAYZ,EAAAY,aACZC,EAAab,EAAAa,cACbC,EAAWd,EAAAc,YACXC,EAAef,EAAAe,gBACfC,sBACAC,EAAQjB,EAAAiB,SACRC,EAASlB,EAAAkB,UACTC,EAAUnB,EAAAmB,WACVC,EAAcpB,EAAAoB,eACdC,cACAC,EAAYtB,EAAAsB,aACZC,EAAEvB,EAAAuB,GACFC,EAAQxB,EAAAwB,SACRC,EAAGzB,EAAAyB,IACAC,EAAcC,EAAA3B,EA1BO,oVA4DlB4B,EAAyBC,EAzBR,CACrB,aAAc5B,EACd,gBAAiBC,EACjB,iBAAkBe,EAClB,kBAAmBC,EACnB,mBAAoBC,EACpB,wBAAyBC,EACzB,kBAAmBC,EACnB,qBAAsBC,EACtB,cAAenB,EACf,kBAAmBC,EACnB,oBAAqBC,EACrB,qBAAsBC,EACtB,mBAAoBC,EACpB,uBAAwBC,EACxB,yBAA0BC,EAC1B,eAAgBC,EAChB,mBAAoBC,EACpB,qBAAsBC,EACtB,sBAAuBC,EACvB,oBAAqBC,EACrB,wBAAyBC,EACzB,0BAA2BC,IAKvBc,EAAqC,iBAAbN,GAAyBA,EAASO,OAE1DC,EACJC,EAAAC,cAAAD,EAAAE,SAAA,KACGL,EACCG,EAAAC,cAACE,EAAG,CAACb,GAAG,OAAOlB,YAAY,OACzB4B,EAAAC,cAACG,EAAM,CAACC,OAAQC,EAAuBC,KAAK,SAE5C,KACHhB,GAGL,OACES,EAAAC,cAAAD,EAAAE,SAAA,KACIZ,GAAa,SAAPA,EAeJ,KAdFU,EAAAC,cAAA,OAAAO,EAAA,CACEC,UAAW,CACT,uBACA,aACA,gBACA,eACAC,KAAK,KACPlB,IAAKA,GACDC,EACAE,EAAsB,CAC1BgB,KAAK,UAEJZ,GAGG,QAAPT,EACCU,EAAAC,cAAA,MAAAO,EAAA,CACEC,UAAW,CACT,uBACA,aACA,gBACA,eACAC,KAAK,KACPlB,IAAKA,GACDC,EACAE,EAAsB,CAC1BgB,KAAK,UAEJZ,GAED,KACI,MAAPT,EACCU,EAAAC,cAAA,IAAAO,EAAA,CACEC,UAAW,CACT,uBACA,aACA,gBACA,eACAC,KAAK,KACPlB,IAAKA,GACDC,EACAE,EAAsB,CAC1BgB,KAAK,UAEJZ,GAED,KAGV"}

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

@@ -1,2 +1,2 @@
-import e from"react";import{Text as a}from"../Text/index.js";import{StyledFooter as n,Bar as t,FooterContentWrapper as r,FooterSection as l,StyledNav as s,StyledUL as c,StyledLI as i,StyledRegulatorLogo as d,StyledAddress as o}from"./styles.js";function m(m){var u=m.children,h=m.themeName,g=void 0===h?"cruk":h,f=m.footerText,E=e.Children.toArray(u);return e.createElement(n,null,e.createElement(t,null),e.createElement(r,null,e.createElement(l,null,e.createElement(s,{"aria-label":"footer links"},e.createElement(c,null,E.length?E.map(function(a,n){var t="footerLink".concat(n);return e.createElement(i,{key:t},a)}):null))),e.createElement(l,null,e.createElement(d,{width:130,height:40,alt:"Registered with Fundraising Regulator",src:"https://rcl.assets.cancerresearchuk.org/images/logos/fundreg.png"})),e.createElement(l,null,f?e.createElement(a,{textSize:"m"},f):e.createElement(e.Fragment,null,e.createElement(a,{textSize:"m",as:"span"},function(e){switch(e){case"su2c":return"Stand Up To Cancer and Stand Up To Cancer Brand Marks are registered trademarks of the Entertainment Industry Foundation. Cancer Research UK is a registered charity in England and Wales (1089464), Scotland(SC041666), the Isle of Man (1103) and Jersey (247). A company limited by guarantee. Registered company in England and Wales (4325234) and the Isle of Man (5713F). Registered address: 2 Redman Place, London, E20 1JQ. Donations will be made to Cancer Research UK in support of the Stand Up To Cancer campaign.";case"bowelbabe":return"The Bowelbabe Fund for Cancer Research UK, raises money to fund clinical trials, research and cancer information and awareness, as well as other initiatives to combat cancer and support those affected by cancer. The Bowelbabe Fund is a restricted fund within Cancer Research UK. Cancer Research UK is a registered charity in England and Wales (1089464), Scotland (SC041666), the Isle of Man (1103) and Jersey (247) and is registered with the Fundraising Regulator.";default:return"Cancer Research UK is a registered charity in England and Wales (1089464), Scotland (SC041666), the Isle of Man (1103) and Jersey (247). A company limited by guarantee. Registered company in England and Wales(4325234) and the Isle of Man (5713F)."}}(g)," Registered address:"),e.createElement(o,null,e.createElement(a,{textSize:"m",as:"span"}," ","2 Redman Place, London, E20 1JQ"))))))}export{m as Footer,m as default};
+import e from"react";import{Text as a}from"../Text/index.js";function t(t){var n=t.children,r=t.themeName,s=void 0===r?"cruk":r,o=t.footerText,c=e.Children.toArray(n);return e.createElement("footer",{className:"component-footer"},e.createElement("div",{className:"footer-bar"}),e.createElement("div",{className:"footer-wrapper"},e.createElement("div",{className:"footer-section"},e.createElement("nav",{className:"footer-nav","aria-label":"footer links"},e.createElement("ul",{className:"footer-ul"},c.length?c.map(function(a,t){var n="footerLink".concat(t);return e.createElement("li",{key:n,className:"footer-li"},a)}):null))),e.createElement("div",{className:"footer-section"},e.createElement("img",{className:"footer-regulator-logo",width:130,height:40,alt:"Registered with Fundraising Regulator",src:"https://rcl.assets.cancerresearchuk.org/images/logos/fundreg.png"})),e.createElement("div",{className:"footer-section"},o?e.createElement(a,{textSize:"m"},o):e.createElement(e.Fragment,null,e.createElement(a,{textSize:"m",as:"span"},function(e){switch(e){case"su2c":return"Stand Up To Cancer and Stand Up To Cancer Brand Marks are registered trademarks of the Entertainment Industry Foundation. Cancer Research UK is a registered charity in England and Wales (1089464), Scotland(SC041666), the Isle of Man (1103) and Jersey (247). A company limited by guarantee. Registered company in England and Wales (4325234) and the Isle of Man (5713F). Registered address: 2 Redman Place, London, E20 1JQ. Donations will be made to Cancer Research UK in support of the Stand Up To Cancer campaign.";case"bowelbabe":return"The Bowelbabe Fund for Cancer Research UK, raises money to fund clinical trials, research and cancer information and awareness, as well as other initiatives to combat cancer and support those affected by cancer. The Bowelbabe Fund is a restricted fund within Cancer Research UK. Cancer Research UK is a registered charity in England and Wales (1089464), Scotland (SC041666), the Isle of Man (1103) and Jersey (247) and is registered with the Fundraising Regulator.";default:return"Cancer Research UK is a registered charity in England and Wales (1089464), Scotland (SC041666), the Isle of Man (1103) and Jersey (247). A company limited by guarantee. Registered company in England and Wales(4325234) and the Isle of Man (5713F)."}}(s)," Registered address:"),e.createElement("address",{className:"footer-address"},e.createElement(a,{textSize:"m",as:"span"}," ","2 Redman Place, London, E20 1JQ"))))))}export{t as Footer,t as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Footer/index.tsx"],"sourcesContent":["import React, { type ReactNode, type HTMLAttributes } from \"react\";\nimport { Text } from \"../Text\";\n\nimport {\n  StyledFooter,\n  FooterContentWrapper,\n  FooterSection,\n  StyledAddress,\n  StyledRegulatorLogo,\n  StyledNav,\n  StyledUL,\n  StyledLI,\n  Bar,\n} from \"./styles\";\nimport { type ThemeNameType } from \"../../types\";\n\nconst footerTextCruk =\n  \"Cancer Research UK is a registered charity in England and Wales (1089464), Scotland (SC041666), the Isle of Man (1103) and Jersey (247). A company limited by guarantee. Registered company in England and Wales(4325234) and the Isle of Man (5713F).\";\nconst footerTextSu2c =\n  \"Stand Up To Cancer and Stand Up To Cancer Brand Marks are registered trademarks of the Entertainment Industry Foundation. Cancer Research UK is a registered charity in England and Wales (1089464), Scotland(SC041666), the Isle of Man (1103) and Jersey (247). A company limited by guarantee. Registered company in England and Wales (4325234) and the Isle of Man (5713F). Registered address: 2 Redman Place, London, E20 1JQ. Donations will be made to Cancer Research UK in support of the Stand Up To Cancer campaign.\";\nconst footerTextBowelBabe =\n  \"The Bowelbabe Fund for Cancer Research UK, raises money to fund clinical trials, research and cancer information and awareness, as well as other initiatives to combat cancer and support those affected by cancer. The Bowelbabe Fund is a restricted fund within Cancer Research UK. Cancer Research UK is a registered charity in England and Wales (1089464), Scotland (SC041666), the Isle of Man (1103) and Jersey (247) and is registered with the Fundraising Regulator.\";\n\nfunction footerTextForTheme(themeName: string): string {\n  switch (themeName) {\n    case \"su2c\":\n      return footerTextSu2c;\n    case \"bowelbabe\":\n      return footerTextBowelBabe;\n    default:\n      return footerTextCruk;\n  }\n}\n\n/**\n * There should be only one footer component at the bottom of the body of each page. Links can be passed as children\n * */\nexport function Footer({\n  children,\n  themeName = \"cruk\",\n  footerText,\n}: HTMLAttributes<HTMLElement> & {\n  /** used to customise text in middle section, it could also be react element, this is not to be confused with the component children which is primarily for the links in the footer */\n  middleSection?: ReactNode;\n  children?: ReactNode;\n  themeName?: ThemeNameType;\n  footerText?: string;\n}) {\n  const childArray = React.Children.toArray(children);\n\n  return (\n    <StyledFooter>\n      <Bar />\n      <FooterContentWrapper>\n        <FooterSection>\n          <StyledNav aria-label=\"footer links\">\n            <StyledUL>\n              {childArray.length\n                ? childArray.map((child, index) => {\n                    const footerLinkKey = `footerLink${index}`;\n                    return <StyledLI key={footerLinkKey}>{child}</StyledLI>;\n                  })\n                : null}\n            </StyledUL>\n          </StyledNav>\n        </FooterSection>\n        <FooterSection>\n          <StyledRegulatorLogo\n            width={130}\n            height={40}\n            alt=\"Registered with Fundraising Regulator\"\n            src=\"https://rcl.assets.cancerresearchuk.org/images/logos/fundreg.png\"\n          />\n        </FooterSection>\n\n        <FooterSection>\n          {footerText ? (\n            <Text textSize=\"m\">{footerText}</Text>\n          ) : (\n            <>\n              <Text textSize=\"m\" as=\"span\">\n                {footerTextForTheme(themeName)} Registered address:\n              </Text>\n              <StyledAddress>\n                <Text textSize=\"m\" as=\"span\">\n                  {\" \"}\n                  2 Redman Place, London, E20 1JQ\n                </Text>\n              </StyledAddress>\n            </>\n          )}\n        </FooterSection>\n      </FooterContentWrapper>\n    </StyledFooter>\n  );\n}\n\nexport default Footer;\n"],"names":["Footer","_a","children","_b","themeName","footerText","childArray","React","Children","toArray","StyledFooter","createElement","Bar","FooterContentWrapper","FooterSection","StyledNav","StyledUL","length","map","child","index","footerLinkKey","concat","StyledLI","key","StyledRegulatorLogo","width","height","alt","src","Text","textSize","Fragment","as","footerTextForTheme","StyledAddress"],"mappings":"qPAqCM,SAAUA,EAAOC,OACrBC,EAAQD,EAAAC,SACRC,EAAAF,EAAAG,UAAAA,aAAY,OAAMD,EAClBE,EAAUJ,EAAAI,WAQJC,EAAaC,EAAMC,SAASC,QAAQP,GAE1C,OACEK,gBAACG,EAAY,KACXH,EAAAI,cAACC,EAAG,MACJL,EAAAI,cAACE,EAAoB,KACnBN,EAAAI,cAACG,EAAa,KACZP,EAAAI,cAACI,gBAAqB,gBACpBR,EAAAI,cAACK,EAAQ,KACNV,EAAWW,OACRX,EAAWY,IAAI,SAACC,EAAOC,GACrB,IAAMC,EAAgB,aAAAC,OAAaF,GACnC,OAAOb,EAAAI,cAACY,EAAQ,CAACC,IAAKH,GAAgBF,EACxC,GACA,QAIVZ,EAAAI,cAACG,EAAa,KACZP,EAAAI,cAACc,EAAmB,CAClBC,MAAO,IACPC,OAAQ,GACRC,IAAI,wCACJC,IAAI,sEAIRtB,EAAAI,cAACG,OACET,EACCE,gBAACuB,EAAI,CAACC,SAAS,KAAK1B,GAEpBE,EAAAI,cAAAJ,EAAAyB,SAAA,KACEzB,EAAAI,cAACmB,GAAKC,SAAS,IAAIE,GAAG,QAzDpC,SAA4B7B,GAC1B,OAAQA,GACN,IAAK,OACH,MAPJ,ogBAQE,IAAK,YACH,MAPJ,mdAQE,QACE,MAbJ,yPAeF,CAiDiB8B,CAAmB9B,GACf,wBACPG,EAAAI,cAACwB,EAAa,KACZ5B,EAAAI,cAACmB,GAAKC,SAAS,IAAIE,GAAG,QACnB,IAEI,uCAQvB"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Footer/index.tsx"],"sourcesContent":["import React, { type ReactNode, type HTMLAttributes } from \"react\";\nimport { Text } from \"../Text\";\n\nimport { type ThemeNameType } from \"../../types\";\n\nconst footerTextCruk =\n  \"Cancer Research UK is a registered charity in England and Wales (1089464), Scotland (SC041666), the Isle of Man (1103) and Jersey (247). A company limited by guarantee. Registered company in England and Wales(4325234) and the Isle of Man (5713F).\";\nconst footerTextSu2c =\n  \"Stand Up To Cancer and Stand Up To Cancer Brand Marks are registered trademarks of the Entertainment Industry Foundation. Cancer Research UK is a registered charity in England and Wales (1089464), Scotland(SC041666), the Isle of Man (1103) and Jersey (247). A company limited by guarantee. Registered company in England and Wales (4325234) and the Isle of Man (5713F). Registered address: 2 Redman Place, London, E20 1JQ. Donations will be made to Cancer Research UK in support of the Stand Up To Cancer campaign.\";\nconst footerTextBowelBabe =\n  \"The Bowelbabe Fund for Cancer Research UK, raises money to fund clinical trials, research and cancer information and awareness, as well as other initiatives to combat cancer and support those affected by cancer. The Bowelbabe Fund is a restricted fund within Cancer Research UK. Cancer Research UK is a registered charity in England and Wales (1089464), Scotland (SC041666), the Isle of Man (1103) and Jersey (247) and is registered with the Fundraising Regulator.\";\n\nfunction footerTextForTheme(themeName: string): string {\n  switch (themeName) {\n    case \"su2c\":\n      return footerTextSu2c;\n    case \"bowelbabe\":\n      return footerTextBowelBabe;\n    default:\n      return footerTextCruk;\n  }\n}\n\n/**\n * There should be only one footer component at the bottom of the body of each page. Links can be passed as children\n * */\nexport function Footer({\n  children,\n  themeName = \"cruk\",\n  footerText,\n}: HTMLAttributes<HTMLElement> & {\n  /** used to customise text in middle section, it could also be react element, this is not to be confused with the component children which is primarily for the links in the footer */\n  middleSection?: ReactNode;\n  children?: ReactNode;\n  themeName?: ThemeNameType;\n  footerText?: string;\n}) {\n  const childArray = React.Children.toArray(children);\n\n  return (\n    <footer className=\"component-footer\">\n      <div className=\"footer-bar\" />\n      <div className=\"footer-wrapper\">\n        <div className=\"footer-section\">\n          <nav className=\"footer-nav\" aria-label=\"footer links\">\n            <ul className=\"footer-ul\">\n              {childArray.length\n                ? childArray.map((child, index) => {\n                    const footerLinkKey = `footerLink${index}`;\n                    return (\n                      <li key={footerLinkKey} className=\"footer-li\">\n                        {child}\n                      </li>\n                    );\n                  })\n                : null}\n            </ul>\n          </nav>\n        </div>\n        <div className=\"footer-section\">\n          <img\n            className=\"footer-regulator-logo\"\n            width={130}\n            height={40}\n            alt=\"Registered with Fundraising Regulator\"\n            src=\"https://rcl.assets.cancerresearchuk.org/images/logos/fundreg.png\"\n          />\n        </div>\n        <div className=\"footer-section\">\n          {footerText ? (\n            <Text textSize=\"m\">{footerText}</Text>\n          ) : (\n            <>\n              <Text textSize=\"m\" as=\"span\">\n                {footerTextForTheme(themeName)} Registered address:\n              </Text>\n              <address className=\"footer-address\">\n                <Text textSize=\"m\" as=\"span\">\n                  {\" \"}\n                  2 Redman Place, London, E20 1JQ\n                </Text>\n              </address>\n            </>\n          )}\n        </div>\n      </div>\n    </footer>\n  );\n}\n\nexport default Footer;\n"],"names":["Footer","_a","children","_b","themeName","footerText","childArray","React","Children","toArray","createElement","className","length","map","child","index","footerLinkKey","concat","key","width","height","alt","src","Text","textSize","Fragment","as","footerTextForTheme"],"mappings":"6DA0BM,SAAUA,EAAOC,OACrBC,EAAQD,EAAAC,SACRC,EAAAF,EAAAG,UAAAA,aAAY,OAAMD,EAClBE,EAAUJ,EAAAI,WAQJC,EAAaC,EAAMC,SAASC,QAAQP,GAE1C,OACEK,EAAAG,cAAA,SAAA,CAAQC,UAAU,oBAChBJ,EAAAG,cAAA,MAAA,CAAKC,UAAU,eACfJ,EAAAG,cAAA,MAAA,CAAKC,UAAU,kBACbJ,EAAAG,cAAA,MAAA,CAAKC,UAAU,kBACbJ,EAAAG,cAAA,MAAA,CAAKC,UAAU,aAAY,aAAY,gBACrCJ,EAAAG,cAAA,KAAA,CAAIC,UAAU,aACXL,EAAWM,OACRN,EAAWO,IAAI,SAACC,EAAOC,GACrB,IAAMC,EAAgB,aAAAC,OAAaF,GACnC,OACER,EAAAG,cAAA,KAAA,CAAIQ,IAAKF,EAAeL,UAAU,aAC/BG,EAGP,GACA,QAIVP,EAAAG,cAAA,MAAA,CAAKC,UAAU,kBACbJ,EAAAG,cAAA,MAAA,CACEC,UAAU,wBACVQ,MAAO,IACPC,OAAQ,GACRC,IAAI,wCACJC,IAAI,sEAGRf,EAAAG,cAAA,MAAA,CAAKC,UAAU,kBACZN,EACCE,EAAAG,cAACa,GAAKC,SAAS,KAAKnB,GAEpBE,EAAAG,cAAAH,EAAAkB,SAAA,KACElB,EAAAG,cAACa,GAAKC,SAAS,IAAIE,GAAG,QA7DpC,SAA4BtB,GAC1B,OAAQA,GACN,IAAK,OACH,MAPJ,ogBAQE,IAAK,YACH,MAPJ,mdAQE,QACE,MAbJ,yPAeF,CAqDiBuB,CAAmBvB,GACf,wBACPG,EAAAG,cAAA,UAAA,CAASC,UAAU,kBACjBJ,EAAAG,cAACa,GAAKC,SAAS,IAAIE,GAAG,QACnB,IAEI,uCAQvB"}

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

@@ -1,2 +1,2 @@
-import e,{useState as t}from"react";import l from"../../hooks/useScrollPosition.js";import{StyledHeader as r,HeaderStickyPlaceHolder as s,HeaderStickyContainer as a,SkipToMain as n,HeaderMainContent as c,StyledLink as o,LogoWrapper as i,Logo as u,Tagline as m,ChildWrapper as g,ChildInner as h}from"./styles.js";function f(f){var k=f.themeName,p=f.isSticky,d=f.siteSlogan,E=f.logoAltText,S=f.logoImageSrc,y=f.logoLinkTitle,$=f.logoLinkUrl,b=f.fullWidth,v=f.children,w=t(!1),P=w[0],j=w[1],x="undefined"!=typeof window;l(function(e){var t=e.currPos,l=!!x&&t.y>240;l!==P&&j(l)},[P],null,!0,50);var L=function(e){switch(e){case"su2c":return"https://rcl.assets.cancerresearchuk.org/images/logos/su2c-160.png";case"bowelbabe":return"https://rcl.assets.cancerresearchuk.org/images/logos/bowelbabe-logo-160.png";case"rfl":return"https://rcl.assets.cancerresearchuk.org/images/logos/rfl.svg";default:return"https://rcl.assets.cancerresearchuk.org/images/logos/cruk.svg"}}(k);return e.createElement(r,null,e.createElement(s,null,e.createElement(a,{"data-testid":"header-sticky-container",$isSmall:P,$isSticky:p},e.createElement(n,{href:"#main"},"Skip to main content"),e.createElement(c,{$fullWidth:b},e.createElement(o,{href:null!=$?$:"/",title:null!=y?y:"Home"},e.createElement(i,{$isSmall:P,$isSticky:p},e.createElement(u,{height:80,src:null!=S?S:L,alt:null!=E?E:"Cancer Research UK Giving Pages"}))),d?e.createElement(m,{$isSmall:P,$isSticky:p},d):null,e.createElement(g,null,e.createElement(h,null,v))))))}export{f as Header,f as default};
+import e,{useState as a}from"react";import t from"../../hooks/useScrollPosition.js";function l(l){var r=l.themeName,s=l.isSticky,c=l.siteSlogan,n=l.logoAltText,o=l.logoImageSrc,i=l.logoLinkTitle,m=l.logoLinkUrl,d=l.fullWidth,g=l.children,h=a(!1),u=h[0],p=h[1],f="undefined"!=typeof window;t(function(e){var a=e.currPos,t=!!f&&a.y>240;t!==u&&p(t)},[u],null,!0,50);var k=function(e){switch(e){case"su2c":return"https://rcl.assets.cancerresearchuk.org/images/logos/su2c-160.png";case"bowelbabe":return"https://rcl.assets.cancerresearchuk.org/images/logos/bowelbabe-logo-160.png";case"rfl":return"https://rcl.assets.cancerresearchuk.org/images/logos/rfl.svg";default:return"https://rcl.assets.cancerresearchuk.org/images/logos/cruk.svg"}}(r);return e.createElement("header",{className:"component-header","data-is-sticky":s||!1,"data-is-small":u||!1,"data-full-width":d||!1},e.createElement("div",{className:"header-sticky-placeholder"},e.createElement("div",{className:"header-sticky-container","data-testid":"header-sticky-container"},e.createElement("a",{className:"skip-to-main",href:"#main"},"Skip to main content"),e.createElement("div",{className:"header-main-content","data-$full-width":d},e.createElement("a",{className:"header-logo-link",href:null!=m?m:"/",title:null!=i?i:"Home"},e.createElement("div",{className:"logo-wrapper"},e.createElement("img",{className:"logo",width:160,height:80,src:null!=o?o:k,alt:null!=n?n:"Cancer Research UK Giving Pages"}))),c?e.createElement("p",{className:"tagline"},c):null,e.createElement("div",{className:"child-wrapper"},e.createElement("div",{className:"child-inner"},g))))))}export{l as Header,l as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Header/index.tsx"],"sourcesContent":["import React, { useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { useScrollPosition } from \"../../hooks/useScrollPosition\";\n\nimport {\n  StyledHeader,\n  HeaderStickyContainer,\n  HeaderStickyPlaceHolder,\n  HeaderMainContent,\n  SkipToMain,\n  StyledLink,\n  Logo,\n  LogoWrapper,\n  Tagline,\n  ChildWrapper,\n  ChildInner,\n} from \"./styles\";\n\nimport { type ThemeNameType } from \"../../types\";\n\nconst HEADER_SCROLL_THRESHOLD = 240;\n\nconst crukLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/cruk.svg\";\nconst rflLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/rfl.svg\";\nconst su2cLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/su2c-160.png\";\nconst bowelbabeLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/bowelbabe-logo-160.png\";\n\nfunction getLogoFromThemeName(themeName: ThemeNameType) {\n  switch (themeName) {\n    case \"su2c\":\n      return su2cLogoUrl;\n    case \"bowelbabe\":\n      return bowelbabeLogoUrl;\n    case \"rfl\":\n      return rflLogoUrl;\n    default:\n      return crukLogoUrl;\n  }\n}\n\n/**\n * There should be only one header component near or at the top of the body of each page.\n *\n * ### Logos\n * It is recommended that logo images are at least 80px high if they are not SVGs and that the logo is still clearly legible when reduced to 40px high for mobile.\n * It is also recommended that the logo width doesn't exceed 350px. If you need a wide logo that is shorter than 80px to keep the aspect ratio please make sure that the logo is centered with transparent space at the top and bottom and still 80px high.\n *\n * ### Site Slogan Text (optional)\n * This is a single line of text and the character limit depends on the theme, logo and children width. This is only visible on desktop at the top of the page\n *\n * ### Right section (optional)\n * This has been kept quite open you can place any child elements in here but ideally it is narrow and its height is 50px or smaller.\n *\n * ### Accessability\n * There is a hidden skip link in the header which will only reveals itself on the first tab and to screen readers. This link helps users skip to the main page content, however this will only work with there is an element with an id of 'main' which the developer should create for every page.\n *\n */\nexport function Header({\n  themeName,\n  isSticky,\n  siteSlogan,\n  logoAltText,\n  logoImageSrc,\n  logoLinkTitle,\n  logoLinkUrl,\n  fullWidth,\n  children,\n}: HTMLAttributes<HTMLElement> & {\n  themeName: ThemeNameType;\n  /** flag which make header fixed to the top even when scrolling */\n  isSticky?: boolean;\n  /** text in the middle of the header */\n  siteSlogan?: string;\n  /** text to explain the content of the icon for a11y usually a description of where the link will take you */\n  logoAltText?: string;\n  /** header logo image url */\n  logoImageSrc?: string;\n  /** title of the header image component, this is mainly for the tooltip text on hover */\n  logoLinkTitle?: string;\n  /** the url of the logo link */\n  logoLinkUrl?: string;\n  /** instead of the contents of the header being centered to max width as defined in theme it is 100% width fo viewport */\n  fullWidth?: boolean;\n\n  children?: ReactNode;\n}) {\n  const [isSmall, setIsSmall] = useState(false);\n  const isBrowser = typeof window !== `undefined`;\n\n  useScrollPosition(\n    ({\n      currPos,\n    }: {\n      prevPos: { x: number; y: number };\n      currPos: { x: number; y: number };\n    }) => {\n      const shouldShrink = isBrowser\n        ? currPos.y > HEADER_SCROLL_THRESHOLD\n        : false;\n      if (shouldShrink !== isSmall) {\n        setIsSmall(shouldShrink);\n      }\n    },\n    [isSmall],\n    null,\n    true,\n    50,\n  );\n\n  const logoUrl = getLogoFromThemeName(themeName);\n\n  return (\n    <StyledHeader>\n      <HeaderStickyPlaceHolder>\n        <HeaderStickyContainer\n          data-testid=\"header-sticky-container\"\n          $isSmall={isSmall}\n          $isSticky={isSticky}\n        >\n          <SkipToMain href=\"#main\">Skip to main content</SkipToMain>\n          <HeaderMainContent $fullWidth={fullWidth}>\n            <StyledLink\n              href={logoLinkUrl ?? \"/\"}\n              title={logoLinkTitle ?? \"Home\"}\n            >\n              <LogoWrapper $isSmall={isSmall} $isSticky={isSticky}>\n                <Logo\n                  height={80}\n                  src={logoImageSrc ?? logoUrl}\n                  alt={logoAltText ?? \"Cancer Research UK Giving Pages\"}\n                />\n              </LogoWrapper>\n            </StyledLink>\n            {siteSlogan ? (\n              <Tagline $isSmall={isSmall} $isSticky={isSticky}>\n                {siteSlogan}\n              </Tagline>\n            ) : null}\n            <ChildWrapper>\n              <ChildInner>{children}</ChildInner>\n            </ChildWrapper>\n          </HeaderMainContent>\n        </HeaderStickyContainer>\n      </HeaderStickyPlaceHolder>\n    </StyledHeader>\n  );\n}\n\nexport default Header;\n"],"names":["Header","_a","themeName","isSticky","siteSlogan","logoAltText","logoImageSrc","logoLinkTitle","logoLinkUrl","fullWidth","children","_b","useState","isSmall","setIsSmall","isBrowser","window","useScrollPosition","currPos","shouldShrink","y","logoUrl","getLogoFromThemeName","React","StyledHeader","createElement","HeaderStickyPlaceHolder","HeaderStickyContainer","$isSmall","SkipToMain","href","HeaderMainContent","StyledLink","title","LogoWrapper","$isSticky","Logo","height","src","alt","Tagline","ChildWrapper","ChildInner"],"mappings":"wTA6DM,SAAUA,EAAOC,OACrBC,EAASD,EAAAC,UACTC,EAAQF,EAAAE,SACRC,EAAUH,EAAAG,WACVC,EAAWJ,EAAAI,YACXC,iBACAC,EAAaN,EAAAM,cACbC,EAAWP,EAAAO,YACXC,EAASR,EAAAQ,UACTC,EAAQT,EAAAS,SAoBFC,EAAwBC,GAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAA8B,oBAAXC,OAEzBC,EACE,SAAChB,GACC,IAAAiB,EAAOjB,EAAAiB,QAKDC,IAAeJ,GACjBG,EAAQE,EAjFc,IAmFtBD,IAAiBN,GACnBC,EAAWK,EAEf,EACA,CAACN,GACD,MACA,EACA,IAGF,IAAMQ,EAlFR,SAA8BnB,GAC5B,OAAQA,GACN,IAAK,OACH,MAPJ,oEAQE,IAAK,YACH,MAPJ,8EAQE,IAAK,MACH,MAbJ,+DAcE,QACE,MAjBJ,gEAmBF,CAuEkBoB,CAAqBpB,GAErC,OACEqB,gBAACC,EAAY,KACXD,EAAAE,cAACC,EAAuB,KACtBH,EAAAE,cAACE,EAAqB,CAAA,cACR,0BAAyBC,SAC3Bf,YACCV,GAEXoB,EAAAE,cAACI,EAAU,CAACC,KAAK,SAAO,wBACxBP,EAAAE,cAACM,cAA8BtB,GAC7Bc,EAAAE,cAACO,GACCF,KAAMtB,QAAAA,EAAe,IACrByB,MAAO1B,QAAAA,EAAiB,QAExBgB,EAAAE,cAACS,EAAW,CAAAN,SAAWf,EAAOsB,UAAahC,GACzCoB,EAAAE,cAACW,EAAI,CACHC,OAAQ,GACRC,IAAKhC,QAAAA,EAAgBe,EACrBkB,IAAKlC,QAAAA,EAAe,sCAIzBD,EACCmB,EAAAE,cAACe,EAAO,CAAAZ,SAAWf,EAAOsB,UAAahC,GACpCC,GAED,KACJmB,EAAAE,cAACgB,EAAY,KACXlB,EAAAE,cAACiB,EAAU,KAAEhC,OAO3B"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Header/index.tsx"],"sourcesContent":["import React, { useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { useScrollPosition } from \"../../hooks/useScrollPosition\";\n\nimport { type ThemeNameType } from \"../../types\";\n\nconst HEADER_SCROLL_THRESHOLD = 240;\n\nconst crukLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/cruk.svg\";\nconst rflLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/rfl.svg\";\nconst su2cLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/su2c-160.png\";\nconst bowelbabeLogoUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/logos/bowelbabe-logo-160.png\";\n\nfunction getLogoFromThemeName(themeName: ThemeNameType) {\n  switch (themeName) {\n    case \"su2c\":\n      return su2cLogoUrl;\n    case \"bowelbabe\":\n      return bowelbabeLogoUrl;\n    case \"rfl\":\n      return rflLogoUrl;\n    default:\n      return crukLogoUrl;\n  }\n}\n\n/**\n * There should be only one header component near or at the top of the body of each page.\n *\n * ### Logos\n * It is recommended that logo images are at least 80px high if they are not SVGs and that the logo is still clearly legible when reduced to 40px high for mobile.\n * It is also recommended that the logo width doesn't exceed 350px. If you need a wide logo that is shorter than 80px to keep the aspect ratio please make sure that the logo is centered with transparent space at the top and bottom and still 80px high.\n *\n * ### Site Slogan Text (optional)\n * This is a single line of text and the character limit depends on the theme, logo and children width. This is only visible on desktop at the top of the page\n *\n * ### Right section (optional)\n * This has been kept quite open you can place any child elements in here but ideally it is narrow and its height is 50px or smaller.\n *\n * ### Accessability\n * There is a hidden skip link in the header which will only reveals itself on the first tab and to screen readers. This link helps users skip to the main page content, however this will only work with there is an element with an id of 'main' which the developer should create for every page.\n *\n */\nexport function Header({\n  themeName,\n  isSticky,\n  siteSlogan,\n  logoAltText,\n  logoImageSrc,\n  logoLinkTitle,\n  logoLinkUrl,\n  fullWidth,\n  children,\n}: HTMLAttributes<HTMLElement> & {\n  themeName: ThemeNameType;\n  /** flag which make header fixed to the top even when scrolling */\n  isSticky?: boolean;\n  /** text in the middle of the header */\n  siteSlogan?: string;\n  /** text to explain the content of the icon for a11y usually a description of where the link will take you */\n  logoAltText?: string;\n  /** header logo image url */\n  logoImageSrc?: string;\n  /** title of the header image component, this is mainly for the tooltip text on hover */\n  logoLinkTitle?: string;\n  /** the url of the logo link */\n  logoLinkUrl?: string;\n  /** instead of the contents of the header being centered to max width as defined in theme it is 100% width fo viewport */\n  fullWidth?: boolean;\n\n  children?: ReactNode;\n}) {\n  const [isSmall, setIsSmall] = useState(false);\n  const isBrowser = typeof window !== `undefined`;\n\n  useScrollPosition(\n    ({\n      currPos,\n    }: {\n      prevPos: { x: number; y: number };\n      currPos: { x: number; y: number };\n    }) => {\n      const shouldShrink = isBrowser\n        ? currPos.y > HEADER_SCROLL_THRESHOLD\n        : false;\n      if (shouldShrink !== isSmall) {\n        setIsSmall(shouldShrink);\n      }\n    },\n    [isSmall],\n    null,\n    true,\n    50,\n  );\n\n  const logoUrl = getLogoFromThemeName(themeName);\n\n  return (\n    <header\n      className=\"component-header\"\n      data-is-sticky={isSticky || false}\n      data-is-small={isSmall || false}\n      data-full-width={fullWidth || false}\n    >\n      <div className=\"header-sticky-placeholder\">\n        <div\n          className=\"header-sticky-container\"\n          data-testid=\"header-sticky-container\"\n        >\n          <a className=\"skip-to-main\" href=\"#main\">\n            Skip to main content\n          </a>\n          <div className=\"header-main-content\" data-$full-width={fullWidth}>\n            <a\n              className=\"header-logo-link\"\n              href={logoLinkUrl ?? \"/\"}\n              title={logoLinkTitle ?? \"Home\"}\n            >\n              <div className=\"logo-wrapper\">\n                <img\n                  className=\"logo\"\n                  width={160}\n                  height={80}\n                  src={logoImageSrc ?? logoUrl}\n                  alt={logoAltText ?? \"Cancer Research UK Giving Pages\"}\n                />\n              </div>\n            </a>\n            {siteSlogan ? <p className=\"tagline\">{siteSlogan}</p> : null}\n            <div className=\"child-wrapper\">\n              <div className=\"child-inner\">{children}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </header>\n  );\n}\n\nexport default Header;\n"],"names":["Header","_a","themeName","isSticky","siteSlogan","logoAltText","logoImageSrc","logoLinkTitle","logoLinkUrl","fullWidth","children","_b","useState","isSmall","setIsSmall","isBrowser","window","useScrollPosition","currPos","shouldShrink","y","logoUrl","getLogoFromThemeName","React","createElement","className","href","title","width","height","src","alt"],"mappings":"oFA+CM,SAAUA,EAAOC,OACrBC,EAASD,EAAAC,UACTC,EAAQF,EAAAE,SACRC,EAAUH,EAAAG,WACVC,EAAWJ,EAAAI,YACXC,iBACAC,EAAaN,EAAAM,cACbC,EAAWP,EAAAO,YACXC,EAASR,EAAAQ,UACTC,EAAQT,EAAAS,SAoBFC,EAAwBC,GAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAA8B,oBAAXC,OAEzBC,EACE,SAAChB,GACC,IAAAiB,EAAOjB,EAAAiB,QAKDC,IAAeJ,GACjBG,EAAQE,EAjFc,IAmFtBD,IAAiBN,GACnBC,EAAWK,EAEf,EACA,CAACN,GACD,MACA,EACA,IAGF,IAAMQ,EAlFR,SAA8BnB,GAC5B,OAAQA,GACN,IAAK,OACH,MAPJ,oEAQE,IAAK,YACH,MAPJ,8EAQE,IAAK,MACH,MAbJ,+DAcE,QACE,MAjBJ,gEAmBF,CAuEkBoB,CAAqBpB,GAErC,OACEqB,EAAAC,cAAA,SAAA,CACEC,UAAU,oCACMtB,IAAY,EAAK,gBAClBU,IAAW,EAAK,kBACdJ,IAAa,GAE9Bc,EAAAC,cAAA,MAAA,CAAKC,UAAU,6BACbF,EAAAC,cAAA,MAAA,CACEC,UAAU,0BAAyB,cACvB,2BAEZF,EAAAC,cAAA,IAAA,CAAGC,UAAU,eAAeC,KAAK,SAAO,wBAGxCH,EAAAC,cAAA,MAAA,CAAKC,UAAU,sBAAqB,mBAAmBhB,GACrDc,EAAAC,cAAA,IAAA,CACEC,UAAU,mBACVC,KAAMlB,QAAAA,EAAe,IACrBmB,MAAOpB,QAAAA,EAAiB,QAExBgB,EAAAC,cAAA,MAAA,CAAKC,UAAU,gBACbF,EAAAC,cAAA,MAAA,CACEC,UAAU,OACVG,MAAO,IACPC,OAAQ,GACRC,IAAKxB,QAAAA,EAAgBe,EACrBU,IAAK1B,QAAAA,EAAe,sCAIzBD,EAAamB,EAAAC,cAAA,IAAA,CAAGC,UAAU,WAAWrB,GAAkB,KACxDmB,EAAAC,cAAA,MAAA,CAAKC,UAAU,iBACbF,EAAAC,cAAA,MAAA,CAAKC,UAAU,eAAef,OAO5C"}

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

@@ -1,25 +1,13 @@
-import React, { type HTMLAttributes, type ElementType } from "react";
-import { type SpacingProps } from "../Spacing";
-import { type FontSizeType, type WordBreakType, type OverflowWrapType } from "../../types";
-export type HeadingProps = SpacingProps & HTMLAttributes<HTMLElement> & {
+import React, { type HTMLAttributes } from "react";
+import { type SpacingProps, type TextProps, type ColourProps } from "../../types";
+export type HeadingProps = SpacingProps & TextProps & ColourProps & HTMLAttributes<HTMLElement> & {
     h1?: boolean;
     h2?: boolean;
     h3?: boolean;
     h4?: boolean;
     h5?: boolean;
     h6?: boolean;
-    /** font size FontSizeType t-shirt sizes  */
-    textSize?: FontSizeType;
-    /** horizontal alignment of text */
-    textAlign?: "left" | "right" | "center";
-    /** color of text */
-    textColor?: string;
-    /** word-break behavior */
-    wordBreak?: WordBreakType;
-    /** overflow-wrap behavior */
-    overflowWrap?: OverflowWrapType;
-    /** styled-component polymorphic feature so you take the styling of a header and cast the component to be a "span" for example */
-    as?: ElementType;
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "legend";
 };
 /**
  *
@@ -28,5 +16,5 @@ Markup headings semantically using the appropriate <h#> level HTML element and
 use 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.
  *
  */
-export declare function Heading({ textSize, textAlign, textColor, wordBreak, overflowWrap, h1, h2, h3, h4, h5, h6, ...props }: HeadingProps): React.JSX.Element;
+export declare function Heading({ textColor, backgroundColor, textSize, textAlign, textWeight, textFontFamily, wordBreak, overflowWrap, margin, marginTop, marginRight, marginBottom, marginLeft, marginVertical, marginHorizontal, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingVertical, paddingHorizontal, h1, h2, h3, h4, h5, h6, as, ...htmlProps }: HeadingProps): React.JSX.Element;
 export default Heading;

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{spacingPropsToSpacingPropsInternal as o}from"../Spacing/index.js";import{H1 as l,H2 as $,H3 as a,H4 as i,H5 as x,H6 as n}from"./styles.js";import{themeColorOrString as m}from"../../utils/themeUtils.js";function w(w){var f=w.textSize,p=w.textAlign,d=w.textColor,h=w.wordBreak,s=w.overflowWrap,c=w.h1,v=w.h2,g=w.h3,S=w.h4,k=w.h5,z=w.h6,A=e(w,["textSize","textAlign","textColor","wordBreak","overflowWrap","h1","h2","h3","h4","h5","h6"]),B=o(A),C=d?m(d):"var(--clr-text-header-default, #000)";return c?r.createElement(l,t({},B,{$textSize:f,$textAlign:p,$textColor:C,$wordBreak:h,$overflowWrap:s})):v?r.createElement($,t({},B,{$textSize:f,$textAlign:p,$textColor:C,$wordBreak:h,$overflowWrap:s})):g?r.createElement(a,t({},B,{$textSize:f,$textAlign:p,$textColor:C,$wordBreak:h,$overflowWrap:s})):S?r.createElement(i,t({},B,{$textSize:f,$textAlign:p,$textColor:C,$wordBreak:h,$overflowWrap:s})):k?r.createElement(x,t({},B,{$textSize:f,$textAlign:p,$textColor:C,$wordBreak:h,$overflowWrap:s})):z?r.createElement(n,t({},B,{$textSize:f,$textAlign:p,$textColor:C,$wordBreak:h,$overflowWrap:s})):r.createElement($,t({},B,{$textSize:f,$textAlign:p,$textColor:C,$wordBreak:h,$overflowWrap:s}))}export{w as Heading,w as default};
+import{__rest as a,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import e from"react";function n(n){var o=n.textColor,p=n.backgroundColor,r=n.textSize,i=n.textAlign,d=n.textWeight,l=n.textFontFamily,g=n.wordBreak,s=n.overflowWrap,c=n.margin,m=n.marginTop,h=n.marginRight,x=n.marginBottom,u=n.marginLeft,f=n.marginVertical,j=n.marginHorizontal,E=n.padding,z=n.paddingTop,N=n.paddingRight,b=n.paddingBottom,w=n.paddingLeft,v=n.paddingVertical,B=n.paddingHorizontal,k=n.h1,F=n.h2,C=n.h3,H=n.h4,L=n.h5,R=n.h6,T=n.as,V=a(n,["textColor","backgroundColor","textSize","textAlign","textWeight","textFontFamily","wordBreak","overflowWrap","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","h1","h2","h3","h4","h5","h6","as"]),W=k?"h1":F?"h2":C?"h3":H?"h4":L?"h5":R?"h6":"h2",y=T||W,A={"data-color":o,"data-bg-color":p,"data-text-size":r,"data-text-align":i,"data-text-weight":d,"data-text-font-family":l,"data-word-break":g,"data-overflow-wrap":s,"data-margin":c,"data-margin-top":m,"data-margin-right":h,"data-margin-bottom":x,"data-margin-left":u,"data-margin-vertical":f,"data-margin-horizontal":j,"data-padding":E,"data-padding-top":z,"data-padding-right":N,"data-padding-bottom":b,"data-padding-left":w,"data-padding-vertical":v,"data-padding-horizontal":B};return e.createElement(e.Fragment,null,"h1"===y?e.createElement("h1",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h2"===y?e.createElement("h2",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h3"===y?e.createElement("h3",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h4"===y?e.createElement("h4",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h5"===y?e.createElement("h5",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"h6"===y?e.createElement("h6",t({className:["component-heading","color-props","spacing-props","text-props"].join(" "),"data-appearance":W},A,V)):null,"p"===y?e.createElement("p",t({className:["component-heading","color-props","spacing-props","text-props"].join(" ")},A,V)):null,"span"===y?e.createElement("span",t({className:["component-heading","color-props","spacing-props","text-props"].join(" ")},A,V)):null,"legend"===y?e.createElement("legend",t({className:["component-heading","color-props","spacing-props","text-props"].join(" ")},A,V)):null)}export{n as Heading,n as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Heading/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type ElementType } from \"react\";\n\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\n\nimport {\n  type FontSizeType,\n  type WordBreakType,\n  type OverflowWrapType,\n} from \"../../types\";\nimport { H1, H2, H3, H4, H5, H6 } from \"./styles\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\nexport type HeadingProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    h1?: boolean;\n    h2?: boolean;\n    h3?: boolean;\n    h4?: boolean;\n    h5?: boolean;\n    h6?: boolean;\n    /** font size FontSizeType t-shirt sizes  */\n    textSize?: FontSizeType;\n    /** horizontal alignment of text */\n    textAlign?: \"left\" | \"right\" | \"center\";\n    /** color of text */\n    textColor?: string;\n    /** word-break behavior */\n    wordBreak?: WordBreakType;\n    /** overflow-wrap behavior */\n    overflowWrap?: OverflowWrapType;\n    /** styled-component polymorphic feature so you take the styling of a header and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n * \n * Use headings consistently to create a clear hierarchy throughout your service.\nMarkup headings semantically using the appropriate <h#> level HTML element and\nuse the corresponding heading class (h1, h2, h3, ....). Write all headings in sentence case. Heading differs from the Text component by using a different font-family and it changes the font size according to the screen width breakpoints.\n * \n */\nexport function Heading({\n  textSize,\n  textAlign,\n  textColor,\n  wordBreak,\n  overflowWrap,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  ...props\n}: HeadingProps) {\n  const propsConvertedToInternalSpacingProps =\n    spacingPropsToSpacingPropsInternal(props);\n\n  const textColorFinal = textColor\n    ? themeColorOrString(textColor)\n    : \"var(--clr-text-header-default, #000)\";\n\n  if (h1)\n    return (\n      <H1\n        {...propsConvertedToInternalSpacingProps}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColorFinal}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h2)\n    return (\n      <H2\n        {...propsConvertedToInternalSpacingProps}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColorFinal}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h3)\n    return (\n      <H3\n        {...propsConvertedToInternalSpacingProps}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColorFinal}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h4)\n    return (\n      <H4\n        {...propsConvertedToInternalSpacingProps}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColorFinal}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h5)\n    return (\n      <H5\n        {...propsConvertedToInternalSpacingProps}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColorFinal}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  if (h6)\n    return (\n      <H6\n        {...propsConvertedToInternalSpacingProps}\n        $textSize={textSize}\n        $textAlign={textAlign}\n        $textColor={textColorFinal}\n        $wordBreak={wordBreak}\n        $overflowWrap={overflowWrap}\n      />\n    );\n  return (\n    <H2\n      {...propsConvertedToInternalSpacingProps}\n      $textSize={textSize}\n      $textAlign={textAlign}\n      $textColor={textColorFinal}\n      $wordBreak={wordBreak}\n      $overflowWrap={overflowWrap}\n    />\n  );\n}\n\nexport default Heading;\n"],"names":["Heading","_a","textSize","textAlign","textColor","wordBreak","overflowWrap","h1","h2","h3","h4","h5","h6","props","__rest","propsConvertedToInternalSpacingProps","spacingPropsToSpacingPropsInternal","textColorFinal","themeColorOrString","React","createElement","H1","__assign","$textAlign","$textColor","$wordBreak","H2","H3","H4","H5","H6"],"mappings":"sTA4CM,SAAUA,EAAQC,GACtB,IAAAC,EAAQD,EAAAC,SACRC,EAASF,EAAAE,UACTC,EAASH,EAAAG,UACTC,cACAC,EAAYL,EAAAK,aACZC,EAAEN,EAAAM,GACFC,EAAEP,EAAAO,GACFC,EAAER,EAAAQ,GACFC,OACAC,EAAEV,EAAAU,GACFC,EAAEX,EAAAW,GACCC,EAAKC,EAAAb,EAZc,+FAchBc,EACJC,EAAmCH,GAE/BI,EAAiBb,EACnBc,EAAmBd,GACnB,uCAEJ,OAAIG,EAEAY,EAAAC,cAACC,EAAEC,EAAA,GACGP,aACOb,EAAQqB,WACPpB,EAASqB,WACTP,EAAcQ,WACdpB,gBACGC,KAGjBE,EAEAW,EAAAC,cAACM,EAAEJ,EAAA,GACGP,aACOb,EAAQqB,WACPpB,EAASqB,WACTP,EAAcQ,WACdpB,gBACGC,KAGjBG,EAEAU,EAAAC,cAACO,EAAEL,EAAA,GACGP,aACOb,EAAQqB,WACPpB,EAASqB,WACTP,EAAcQ,WACdpB,gBACGC,KAGjBI,EAEAS,EAAAC,cAACQ,EAAEN,EAAA,GACGP,aACOb,EAAQqB,WACPpB,EAASqB,WACTP,EAAcQ,WACdpB,gBACGC,KAGjBK,EAEAQ,EAAAC,cAACS,EAAEP,EAAA,GACGP,aACOb,EAAQqB,WACPpB,EAASqB,WACTP,EAAcQ,WACdpB,gBACGC,KAGjBM,EAEAO,EAAAC,cAACU,EAAER,EAAA,GACGP,aACOb,EAAQqB,WACPpB,EAASqB,WACTP,EAAcQ,WACdpB,gBACGC,KAInBa,EAAAC,cAACM,EAAEJ,EAAA,GACGP,aACOb,EAAQqB,WACPpB,EAASqB,WACTP,EAAcQ,WACdpB,gBACGC,IAGrB"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Heading/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes } from \"react\";\n\nimport {\n  type SpacingProps,\n  type TextProps,\n  type ColourProps,\n} from \"../../types\";\n\nexport type HeadingProps = SpacingProps &\n  TextProps &\n  ColourProps &\n  HTMLAttributes<HTMLElement> & {\n    h1?: boolean;\n    h2?: boolean;\n    h3?: boolean;\n    h4?: boolean;\n    h5?: boolean;\n    h6?: boolean;\n    as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\" | \"legend\";\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  textColor,\n  backgroundColor,\n  textSize,\n  textAlign,\n  textWeight,\n  textFontFamily,\n  wordBreak,\n  overflowWrap,\n  margin,\n  marginTop,\n  marginRight,\n  marginBottom,\n  marginLeft,\n  marginVertical,\n  marginHorizontal,\n  padding,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n  paddingVertical,\n  paddingHorizontal,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  as,\n  ...htmlProps\n}: HeadingProps) {\n  const calculatedHTag = h1\n    ? \"h1\"\n    : h2\n      ? \"h2\"\n      : h3\n        ? \"h3\"\n        : h4\n          ? \"h4\"\n          : h5\n            ? \"h5\"\n            : h6\n              ? \"h6\"\n              : \"h2\";\n  // as can be explicitly set or inferred from h1-h6 props\n  const calculatedAs = as ? as : calculatedHTag;\n\n  const convertedProps = {\n    \"data-color\": textColor,\n    \"data-bg-color\": backgroundColor,\n    \"data-text-size\": textSize,\n    \"data-text-align\": textAlign,\n    \"data-text-weight\": textWeight,\n    \"data-text-font-family\": textFontFamily,\n    \"data-word-break\": wordBreak,\n    \"data-overflow-wrap\": overflowWrap,\n    \"data-margin\": margin,\n    \"data-margin-top\": marginTop,\n    \"data-margin-right\": marginRight,\n    \"data-margin-bottom\": marginBottom,\n    \"data-margin-left\": marginLeft,\n    \"data-margin-vertical\": marginVertical,\n    \"data-margin-horizontal\": marginHorizontal,\n    \"data-padding\": padding,\n    \"data-padding-top\": paddingTop,\n    \"data-padding-right\": paddingRight,\n    \"data-padding-bottom\": paddingBottom,\n    \"data-padding-left\": paddingLeft,\n    \"data-padding-vertical\": paddingVertical,\n    \"data-padding-horizontal\": paddingHorizontal,\n  };\n\n  return (\n    <>\n      {calculatedAs === \"h1\" ? (\n        <h1\n          className={[\n            \"component-heading\",\n            \"color-props\",\n            \"spacing-props\",\n            \"text-props\",\n          ].join(\" \")}\n          data-appearance={calculatedHTag}\n          {...convertedProps}\n          {...htmlProps}\n        />\n      ) : null}\n\n      {calculatedAs === \"h2\" ? (\n        <h2\n          className={[\n            \"component-heading\",\n            \"color-props\",\n            \"spacing-props\",\n            \"text-props\",\n          ].join(\" \")}\n          data-appearance={calculatedHTag}\n          {...convertedProps}\n          {...htmlProps}\n        />\n      ) : null}\n\n      {calculatedAs === \"h3\" ? (\n        <h3\n          className={[\n            \"component-heading\",\n            \"color-props\",\n            \"spacing-props\",\n            \"text-props\",\n          ].join(\" \")}\n          data-appearance={calculatedHTag}\n          {...convertedProps}\n          {...htmlProps}\n        />\n      ) : null}\n\n      {calculatedAs === \"h4\" ? (\n        <h4\n          className={[\n            \"component-heading\",\n            \"color-props\",\n            \"spacing-props\",\n            \"text-props\",\n          ].join(\" \")}\n          data-appearance={calculatedHTag}\n          {...convertedProps}\n          {...htmlProps}\n        />\n      ) : null}\n\n      {calculatedAs === \"h5\" ? (\n        <h5\n          className={[\n            \"component-heading\",\n            \"color-props\",\n            \"spacing-props\",\n            \"text-props\",\n          ].join(\" \")}\n          data-appearance={calculatedHTag}\n          {...convertedProps}\n          {...htmlProps}\n        />\n      ) : null}\n\n      {calculatedAs === \"h6\" ? (\n        <h6\n          className={[\n            \"component-heading\",\n            \"color-props\",\n            \"spacing-props\",\n            \"text-props\",\n          ].join(\" \")}\n          data-appearance={calculatedHTag}\n          {...convertedProps}\n          {...htmlProps}\n        />\n      ) : null}\n\n      {calculatedAs === \"p\" ? (\n        <p\n          className={[\n            \"component-heading\",\n            \"color-props\",\n            \"spacing-props\",\n            \"text-props\",\n          ].join(\" \")}\n          {...convertedProps}\n          {...htmlProps}\n        />\n      ) : null}\n\n      {calculatedAs === \"span\" ? (\n        <span\n          className={[\n            \"component-heading\",\n            \"color-props\",\n            \"spacing-props\",\n            \"text-props\",\n          ].join(\" \")}\n          {...convertedProps}\n          {...htmlProps}\n        />\n      ) : null}\n      {calculatedAs === \"legend\" ? (\n        <legend\n          className={[\n            \"component-heading\",\n            \"color-props\",\n            \"spacing-props\",\n            \"text-props\",\n          ].join(\" \")}\n          {...convertedProps}\n          {...htmlProps}\n        />\n      ) : null}\n    </>\n  );\n}\n\nexport default Heading;\n"],"names":["Heading","_a","textColor","backgroundColor","textSize","textAlign","textWeight","textFontFamily","wordBreak","overflowWrap","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","h1","h2","h3","h4","h5","h6","as","htmlProps","__rest","calculatedHTag","calculatedAs","convertedProps","React","createElement","Fragment","__assign","className","join"],"mappings":"qGA4BM,SAAUA,EAAQC,GACtB,IAAAC,EAASD,EAAAC,UACTC,EAAeF,EAAAE,gBACfC,EAAQH,EAAAG,SACRC,EAASJ,EAAAI,UACTC,EAAUL,EAAAK,WACVC,EAAcN,EAAAM,eACdC,EAASP,EAAAO,UACTC,EAAYR,EAAAQ,aACZC,EAAMT,EAAAS,OACNC,EAASV,EAAAU,UACTC,EAAWX,EAAAW,YACXC,EAAYZ,EAAAY,aACZC,EAAUb,EAAAa,WACVC,EAAcd,EAAAc,eACdC,EAAgBf,EAAAe,iBAChBC,EAAOhB,EAAAgB,QACPC,EAAUjB,EAAAiB,WACVC,EAAYlB,EAAAkB,aACZC,EAAanB,EAAAmB,cACbC,EAAWpB,EAAAoB,YACXC,EAAerB,EAAAqB,gBACfC,EAAiBtB,EAAAsB,kBACjBC,EAAEvB,EAAAuB,GACFC,EAAExB,EAAAwB,GACFC,EAAEzB,EAAAyB,GACFC,EAAE1B,EAAA0B,GACFC,EAAE3B,EAAA2B,GACFC,EAAE5B,EAAA4B,GACFC,EAAE7B,EAAA6B,GACCC,EAASC,EAAA/B,EA9BU,iWAgChBgC,EAAiBT,EACnB,KACAC,EACE,KACAC,EACE,KACAC,EACE,KACAC,EACE,KACAC,EACE,KACA,KAERK,EAAeJ,GAAUG,EAEzBE,EAAiB,CACrB,aAAcjC,EACd,gBAAiBC,EACjB,iBAAkBC,EAClB,kBAAmBC,EACnB,mBAAoBC,EACpB,wBAAyBC,EACzB,kBAAmBC,EACnB,qBAAsBC,EACtB,cAAeC,EACf,kBAAmBC,EACnB,oBAAqBC,EACrB,qBAAsBC,EACtB,mBAAoBC,EACpB,uBAAwBC,EACxB,yBAA0BC,EAC1B,eAAgBC,EAChB,mBAAoBC,EACpB,qBAAsBC,EACtB,sBAAuBC,EACvB,oBAAqBC,EACrB,wBAAyBC,EACzB,0BAA2BC,GAG7B,OACEa,EAAAC,cAAAD,EAAAE,SAAA,KACoB,OAAjBJ,EACCE,EAAAC,cAAA,KAAAE,EAAA,CACEC,UAAW,CACT,oBACA,cACA,gBACA,cACAC,KAAK,uBACUR,GACbE,EACAJ,IAEJ,KAEc,OAAjBG,EACCE,EAAAC,cAAA,KAAAE,EAAA,CACEC,UAAW,CACT,oBACA,cACA,gBACA,cACAC,KAAK,uBACUR,GACbE,EACAJ,IAEJ,KAEc,OAAjBG,EACCE,EAAAC,cAAA,KAAAE,EAAA,CACEC,UAAW,CACT,oBACA,cACA,gBACA,cACAC,KAAK,uBACUR,GACbE,EACAJ,IAEJ,KAEc,OAAjBG,EACCE,EAAAC,cAAA,KAAAE,EAAA,CACEC,UAAW,CACT,oBACA,cACA,gBACA,cACAC,KAAK,uBACUR,GACbE,EACAJ,IAEJ,KAEc,OAAjBG,EACCE,EAAAC,cAAA,KAAAE,EAAA,CACEC,UAAW,CACT,oBACA,cACA,gBACA,cACAC,KAAK,uBACUR,GACbE,EACAJ,IAEJ,KAEc,OAAjBG,EACCE,EAAAC,cAAA,KAAAE,EAAA,CACEC,UAAW,CACT,oBACA,cACA,gBACA,cACAC,KAAK,uBACUR,GACbE,EACAJ,IAEJ,KAEc,MAAjBG,EACCE,EAAAC,cAAA,IAAAE,EAAA,CACEC,UAAW,CACT,oBACA,cACA,gBACA,cACAC,KAAK,MACHN,EACAJ,IAEJ,KAEc,SAAjBG,EACCE,EAAAC,cAAA,OAAAE,EAAA,CACEC,UAAW,CACT,oBACA,cACA,gBACA,cACAC,KAAK,MACHN,EACAJ,IAEJ,KACc,WAAjBG,EACCE,EAAAC,cAAA,SAAAE,EAAA,CACEC,UAAW,CACT,oBACA,cACA,gBACA,cACAC,KAAK,MACHN,EACAJ,IAEJ,KAGV"}

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

@@ -1,17 +1,17 @@
 import React from "react";
 import { type IconDefinition } from "@fortawesome/fontawesome-common-types";
-export type IconFaProps = {
-    /** imported icon definition from "@fortawesome/free-solid-svg-icons" or "@fortawesome/free-brands-svg-icons" */
-    faIcon: IconDefinition;
-    /** color of icon, inherits current text colour by default */
-    color?: string;
-    /** size of ion 1.1em by default */
-    size?: string;
-};
+import { type spaces, type colours } from "src/types";
 /**
  * The IconFa component (Icon Font Awesome) displays an icon glyph as an `<svg>` element.
  *
  * This is an svg icon wrapper where a font awesome icon definition can be passed in a long with colour and size
  * */
-export declare function IconFa({ faIcon, color, size }: IconFaProps): React.JSX.Element;
+export declare function IconFa({ faIcon, size, color, }: {
+    /** imported icon definition from "@fortawesome/free-solid-svg-icons" or "@fortawesome/free-brands-svg-icons" */
+    faIcon: IconDefinition;
+    /** size of ion 1.1em by default */
+    size?: (typeof spaces)[number] | "full" | string;
+    /** color of icon */
+    color?: string | (typeof colours)[number];
+}): React.JSX.Element;
 export default IconFa;

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

@@ -1,2 +1,2 @@
-import e from"react";import{StyledIcon as t}from"./styles.js";import{themeColorOrString as o,themeSpacingSizeOrString as r}from"../../utils/themeUtils.js";function c(c){var i=c.faIcon,a=c.color,n=c.size,m=void 0===n?"1rem":n,s=i.icon,l=s[0],f=s[1],p=s[4];return e.createElement(t,{role:"presentation",viewBox:"0 0 ".concat(l," ").concat(f),$size:r(m),$color:o(a)},p&&e.createElement("path",{d:p}))}export{c as IconFa,c as default};
+import e from"react";import{themeSpacingSizeOrString as t,themeColorOrString as o}from"../../utils/themeUtils.js";function c(c){var r=c.faIcon,a=c.size,n=c.color,i=r.icon,s=i[0],l=i[1],m=i[4],f=o(n),p=t(a||"xs");return e.createElement("svg",{className:"component-icon-fa",role:"presentation",viewBox:"0 0 ".concat(s," ").concat(l),style:{color:f,height:p,width:p}},m&&e.createElement("path",{d:m}))}export{c as IconFa,c as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/IconFa/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { type IconDefinition } from \"@fortawesome/fontawesome-common-types\";\n\nimport { StyledIcon } from \"./styles\";\nimport {\n  themeColorOrString,\n  themeSpacingSizeOrString,\n} from \"../../utils/themeUtils\";\n\nexport type IconFaProps = {\n  /** imported icon definition from \"@fortawesome/free-solid-svg-icons\" or \"@fortawesome/free-brands-svg-icons\" */\n  faIcon: IconDefinition;\n  /** color of icon, inherits current text colour by default */\n  color?: string;\n  /** size of ion 1.1em by default */\n  size?: string;\n};\n\n/**\n * The IconFa component (Icon Font Awesome) displays an icon glyph as an `<svg>` element.\n *\n * This is an svg icon wrapper where a font awesome icon definition can be passed in a long with colour and size\n * */\nexport function IconFa({ faIcon, color, size = \"1rem\" }: IconFaProps) {\n  const [width, height, , , svgPathData] = faIcon.icon;\n\n  return (\n    <StyledIcon\n      role=\"presentation\"\n      viewBox={`0 0 ${width} ${height}`}\n      $size={themeSpacingSizeOrString(size)}\n      $color={themeColorOrString(color)}\n    >\n      {svgPathData && <path d={svgPathData as string} />}\n    </StyledIcon>\n  );\n}\n\nexport default IconFa;\n"],"names":["IconFa","_a","faIcon","color","_b","size","_c","icon","width","height","svgPathData","React","createElement","StyledIcon","role","viewBox","concat","$size","themeSpacingSizeOrString","$color","themeColorOrString","d"],"mappings":"2JAuBM,SAAUA,EAAOC,OAAEC,EAAMD,EAAAC,OAAEC,EAAKF,EAAAE,MAAEC,SAAAC,OAAI,IAAAD,EAAG,OAAMA,EAC7CE,EAAmCJ,EAAOK,KAAzCC,EAAKF,EAAA,GAAEG,EAAMH,EAAA,GAAMI,OAE1B,OACEC,EAAAC,cAACC,EAAU,CACTC,KAAK,eACLC,QAAS,OAAAC,OAAOR,EAAK,KAAAQ,OAAIP,GAAQQ,MAC1BC,EAAyBb,GAAKc,OAC7BC,EAAmBjB,IAE1BO,GAAeC,EAAAC,cAAA,OAAA,CAAMS,EAAGX,IAG/B"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/IconFa/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { type IconDefinition } from \"@fortawesome/fontawesome-common-types\";\n\nimport {\n  themeColorOrString,\n  themeSpacingSizeOrString,\n} from \"../../utils/themeUtils\";\n\nimport { type spaces, type colours } from \"src/types\";\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({\n  faIcon,\n  size,\n  color,\n}: {\n  /** imported icon definition from \"@fortawesome/free-solid-svg-icons\" or \"@fortawesome/free-brands-svg-icons\" */\n  faIcon: IconDefinition;\n  /** size of ion 1.1em by default */\n  size?: (typeof spaces)[number] | \"full\" | string;\n  /** color of icon */\n  color?: string | (typeof colours)[number];\n}) {\n  const [width, height, , , svgPathData] = faIcon.icon;\n\n  const themeColorOrStringValue = themeColorOrString(color);\n  const themeSizeValueOrString = themeSpacingSizeOrString(size || \"xs\");\n\n  return (\n    <svg\n      className={\"component-icon-fa\"}\n      role=\"presentation\"\n      viewBox={`0 0 ${width} ${height}`}\n      style={{\n        color: themeColorOrStringValue,\n        height: themeSizeValueOrString,\n        width: themeSizeValueOrString,\n      }}\n    >\n      {svgPathData && <path d={svgPathData as string} />}\n    </svg>\n  );\n}\n\nexport default IconFa;\n"],"names":["IconFa","_a","faIcon","size","color","_b","icon","width","height","svgPathData","themeColorOrStringValue","themeColorOrString","themeSizeValueOrString","themeSpacingSizeOrString","React","createElement","className","role","viewBox","concat","style","d"],"mappings":"kHAeM,SAAUA,EAAOC,GACrB,IAAAC,WACAC,EAAIF,EAAAE,KACJC,EAAKH,EAAAG,MASCC,EAAmCH,EAAOI,KAAzCC,EAAKF,EAAA,GAAEG,EAAMH,EAAA,GAAMI,OAEpBC,EAA0BC,EAAmBP,GAC7CQ,EAAyBC,EAAyBV,GAAQ,MAEhE,OACEW,EAAAC,cAAA,MAAA,CACEC,UAAW,oBACXC,KAAK,eACLC,QAAS,cAAOX,EAAK,KAAAY,OAAIX,GACzBY,MAAO,CACLhB,MAAOM,EACPF,OAAQI,EACRL,MAAOK,IAGRH,GAAeK,EAAAC,cAAA,OAAA,CAAMM,EAAGZ,IAG/B"}

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

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

package/lib/src/components/InfoBox/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{Box as o}from"../Box/index.js";import{Text as i}from"../Text/index.js";import{Heading as n}from"../Heading/index.js";import{StyledInfoBox as l}from"./styles.js";import{themeColorOrString as m}from"../../utils/themeUtils.js";var a=function(a){var c=a.children,s=a.titleText,x=a.titleTextColor,d=a.descriptionText,p=a.descriptionTextColor,f=a.icon,g=a.backgroundColor,u=a.ref,C=e(a,["children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","backgroundColor","ref"]),T=g?m(g):"var(--clr-cruk-grey-200, #e6e6e6)",j=x?m(x):"var(--clr-text-dark, #000)",k=p?m(p):"var(--clr-text-dark, #000)";return t.createElement(l,r({},C,{backgroundColor:T,margin:C.margin||"none",ref:u}),f&&t.createElement(o,{marginRight:"s"},f),t.createElement("div",null,s&&t.createElement(n,{as:"p",margin:"none",h4:!0,marginBottom:"xxs",textColor:j},s),d&&t.createElement(i,{textColor:k,marginBottom:"none"},d),c))};export{a as InfoBox,a as default};
+import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{Box as r}from"../Box/index.js";import{Text as i}from"../Text/index.js";import{Heading as n}from"../Heading/index.js";var l=function(l){var a=l.children,m=l.titleText,c=l.titleTextColor,d=l.descriptionText,s=l.descriptionTextColor,x=l.icon,p=l.backgroundColor,f=l.ref,g=e(l,["children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","backgroundColor","ref"]);return o.createElement("div",t({className:["component-info-box","spacing-props","color-props"].join(" ")},g,{"data-bg-color":p||"background-mid",ref:f}),x&&o.createElement(r,{marginRight:"s"},x),o.createElement("div",null,m&&o.createElement(n,{as:"p",margin:"none",h4:!0,marginBottom:"xxs",textColor:c||"text-dark"},m),d&&o.createElement(i,{textColor:s||"text-dark",marginBottom:"none"},d),a))};export{l as InfoBox,l as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/InfoBox/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type Ref,\n  type ReactNode,\n  type ElementType,\n} from \"react\";\n\nimport { Box } from \"../Box\";\nimport { Text } from \"../Text\";\nimport { Heading } from \"../Heading\";\n\nimport { type SpacingProps } from \"../Spacing\";\nimport { StyledInfoBox } from \"./styles\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\nimport { type ColourVariableType } from \"src/types\";\n\nexport type InfoBoxProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of wrapping element, this will add default padding */\n    backgroundColor?: ColourVariableType | string;\n    /** Title text */\n    titleText: string;\n    /** Title text colour */\n    titleTextColor?: ColourVariableType | string;\n    /** Description text */\n    descriptionText: string;\n    /** Description text colour */\n    descriptionTextColor?: ColourVariableType | string;\n    /** Space for extra element underneath description */\n    children?: ReactNode;\n    /** Icon in left column usually 2em squared */\n    icon?: ReactNode;\n    ref?: Ref<HTMLElement>;\n    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n    as?: ElementType;\n  };\n\n/**\n   * Box is used to wrap other components to add margin and padding. The values will be in the t-shirt sizes specified in the theme sizes.\n  \n  The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n   */\nexport const InfoBox = ({\n  children,\n  titleText,\n  titleTextColor,\n  descriptionText,\n  descriptionTextColor,\n  icon,\n  backgroundColor,\n  ref,\n  ...spacingAndHTMLElementProps\n}: InfoBoxProps) => {\n  const backgroundColorOrDefault = backgroundColor\n    ? themeColorOrString(backgroundColor)\n    : \"var(--clr-cruk-grey-200, #e6e6e6)\";\n\n  const textColorOrDefault = titleTextColor\n    ? themeColorOrString(titleTextColor)\n    : \"var(--clr-text-dark, #000)\";\n\n  const descriptionTextColorOrDefault = descriptionTextColor\n    ? themeColorOrString(descriptionTextColor)\n    : \"var(--clr-text-dark, #000)\";\n\n  return (\n    <StyledInfoBox\n      {...spacingAndHTMLElementProps}\n      backgroundColor={backgroundColorOrDefault}\n      margin={spacingAndHTMLElementProps.margin || \"none\"}\n      ref={ref}\n    >\n      {icon && <Box marginRight=\"s\">{icon}</Box>}\n      <div>\n        {titleText && (\n          <Heading\n            as=\"p\"\n            margin=\"none\"\n            h4\n            marginBottom=\"xxs\"\n            textColor={textColorOrDefault}\n          >\n            {titleText}\n          </Heading>\n        )}\n        {descriptionText && (\n          <Text textColor={descriptionTextColorOrDefault} marginBottom=\"none\">\n            {descriptionText}\n          </Text>\n        )}\n        {children}\n      </div>\n    </StyledInfoBox>\n  );\n};\n\nexport default InfoBox;\n"],"names":["InfoBox","_a","children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","backgroundColor","ref","spacingAndHTMLElementProps","__rest","backgroundColorOrDefault","themeColorOrString","textColorOrDefault","descriptionTextColorOrDefault","React","StyledInfoBox","__assign","margin","Box","marginRight","createElement","Heading","as","h4","marginBottom","textColor","Text"],"mappings":"4UA0CO,IAAMA,EAAU,SAACC,GACtB,IAAAC,EAAQD,EAAAC,SACRC,EAASF,EAAAE,UACTC,EAAcH,EAAAG,eACdC,EAAeJ,EAAAI,gBACfC,EAAoBL,EAAAK,qBACpBC,EAAIN,EAAAM,KACJC,EAAeP,EAAAO,gBACfC,EAAGR,EAAAQ,IACAC,EAA0BC,EAAAV,EATP,CAAA,WAAA,YAAA,iBAAA,kBAAA,uBAAA,OAAA,kBAAA,QAWhBW,EAA2BJ,EAC7BK,EAAmBL,GACnB,oCAEEM,EAAqBV,EACvBS,EAAmBT,GACnB,6BAEEW,EAAgCT,EAClCO,EAAmBP,GACnB,6BAEJ,OACEU,gBAACC,EAAaC,EAAA,CAAA,EACRR,EAA0B,CAC9BF,gBAAiBI,EACjBO,OAAQT,EAA2BS,QAAU,OAC7CV,IAAKA,IAEJF,GAAQS,gBAACI,EAAG,CAACC,YAAY,KAAKd,GAC/BS,EAAAM,cAAA,MAAA,KACGnB,GACCa,EAAAM,cAACC,EAAO,CACNC,GAAG,IACHL,OAAO,OACPM,IAAE,EACFC,aAAa,MACbC,UAAWb,GAEVX,GAGJE,GACCW,EAAAM,cAACM,GAAKD,UAAWZ,EAA+BW,aAAa,QAC1DrB,GAGJH,GAIT"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/InfoBox/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type Ref, type ReactNode } from \"react\";\n\nimport { Box } from \"../Box\";\nimport { Text } from \"../Text\";\nimport { Heading } from \"../Heading\";\n\nimport { type ColourVariableType, type SpacingProps } from \"../../types\";\n\n/**\n   * Box is used to wrap other components to add margin and padding. The values will be in the t-shirt sizes specified in the theme sizes.\n  \n  The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n   */\nexport const InfoBox = ({\n  children,\n  titleText,\n  titleTextColor,\n  descriptionText,\n  descriptionTextColor,\n  icon,\n  backgroundColor,\n  ref,\n  ...spacingAndHTMLElementProps\n}: SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** background color of wrapping element, this will add default padding */\n    backgroundColor?: ColourVariableType;\n    /** Title text */\n    titleText: string;\n    /** Title text colour */\n    titleTextColor?: ColourVariableType;\n    /** Description text */\n    descriptionText: string;\n    /** Description text colour */\n    descriptionTextColor?: ColourVariableType;\n    /** Space for extra element underneath description */\n    children?: ReactNode;\n    /** Icon in left column usually 2em squared */\n    icon?: ReactNode;\n    ref?: Ref<HTMLDivElement>;\n  }) => {\n  return (\n    <div\n      className={[\"component-info-box\", \"spacing-props\", \"color-props\"].join(\n        \" \",\n      )}\n      {...spacingAndHTMLElementProps}\n      data-bg-color={backgroundColor || \"background-mid\"}\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 || \"text-dark\"}\n          >\n            {titleText}\n          </Heading>\n        )}\n        {descriptionText && (\n          <Text\n            textColor={descriptionTextColor || \"text-dark\"}\n            marginBottom=\"none\"\n          >\n            {descriptionText}\n          </Text>\n        )}\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default InfoBox;\n"],"names":["InfoBox","_a","children","titleText","titleTextColor","descriptionText","descriptionTextColor","icon","backgroundColor","ref","spacingAndHTMLElementProps","__rest","React","createElement","__assign","className","join","Box","marginRight","Heading","as","margin","h4","marginBottom","textColor","Text"],"mappings":"iOAaO,IAAMA,EAAU,SAACC,GACtB,IAAAC,EAAQD,EAAAC,SACRC,EAASF,EAAAE,UACTC,EAAcH,EAAAG,eACdC,EAAeJ,EAAAI,gBACfC,EAAoBL,EAAAK,qBACpBC,EAAIN,EAAAM,KACJC,EAAeP,EAAAO,gBACfC,EAAGR,EAAAQ,IACAC,EAA0BC,EAAAV,EATP,CAAA,WAAA,YAAA,iBAAA,kBAAA,uBAAA,OAAA,kBAAA,QA4BtB,OACEW,EAAAC,cAAA,MAAAC,EAAA,CACEC,UAAW,CAAC,qBAAsB,gBAAiB,eAAeC,KAChE,MAEEN,EAA0B,CAAA,gBACfF,GAAmB,iBAClCC,IAAKA,IAEJF,GAAQK,gBAACK,EAAG,CAACC,YAAY,KAAKX,GAC/BK,EAAAC,cAAA,MAAA,KACGV,GACCS,EAAAC,cAACM,EAAO,CACNC,GAAG,IACHC,OAAO,OACPC,IAAE,EACFC,aAAa,MACbC,UAAWpB,GAAkB,aAE5BD,GAGJE,GACCO,EAAAC,cAACY,EAAI,CACHD,UAAWlB,GAAwB,YACnCiB,aAAa,QAEZlB,GAGJH,GAIT"}

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 n from"react";import{HintText as l,Label as r,LabelText as i,RequiredIndicationText as a}from"./styles.js";function o(o){var m=o.label,d=o.hintText,u=o.required,c=void 0!==u&&u,s=o.hideRequiredIndicationInLabel,h=void 0!==s&&s,b=o.children,f=e(o,["label","hintText","required","hideRequiredIndicationInLabel","children"]),p=d&&("string"==typeof d&&d.length||"number"==typeof d)?n.createElement(l,null,d):d;return n.createElement(n.Fragment,null,m?n.createElement(r,t({},f),n.createElement(i,{$hasHintText:!!d},m,!c&&!h&&n.createElement(a,null," (optional)")),p,b):n.createElement(n.Fragment,null,b))}export{o as LabelWrapper,o as default};
+import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import n from"react";function a(a){var l=a.label,i=a.hintText,r=a.required,m=void 0!==r&&r,o=a.hideRequiredIndicationInLabel,c=void 0!==o&&o,d=a.children,s=e(a,["label","hintText","required","hideRequiredIndicationInLabel","children"]),u=i&&("string"==typeof i&&i.length||"number"==typeof i)?n.createElement("span",{className:"hint-text"},i):i;return n.createElement(n.Fragment,null,l?n.createElement("label",t({className:"label-component"},s),n.createElement("span",{className:"label-text","data-hintext":!!i},l,!m&&!c&&n.createElement("span",{className:"required-indication-text"}," (optional)")),u,d):n.createElement(n.Fragment,null,d))}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\";\n\nimport { LabelText, Label, RequiredIndicationText, HintText } from \"./styles\";\n\ntype LabelWrapperProps = LabelHTMLAttributes<HTMLLabelElement> & {\n  /** label text */\n  label: string;\n  /** hint text or react element in it's place */\n  hintText?: ReactNode;\n  /** if field is required, when not required (optional) appears in label */\n  required?: boolean;\n  /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */\n  hideRequiredIndicationInLabel?: boolean;\n  children?: ReactNode;\n};\n\nexport function LabelWrapper({\n  label,\n  hintText,\n  required = false,\n  hideRequiredIndicationInLabel = false,\n  children,\n  ...otherHTMLLabelProps\n}: LabelWrapperProps) {\n  const hintTextElement =\n    !!hintText &&\n    ((typeof hintText === \"string\" && hintText.length) ||\n      typeof hintText === \"number\") ? (\n      <HintText>{hintText}</HintText>\n    ) : (\n      hintText\n    );\n\n  return (\n    <>\n      {label ? (\n        <Label {...otherHTMLLabelProps}>\n          <LabelText $hasHintText={!!hintText}>\n            {label}\n            {!required && !hideRequiredIndicationInLabel && (\n              <RequiredIndicationText>{` (optional)`}</RequiredIndicationText>\n            )}\n          </LabelText>\n          {hintTextElement}\n          {children}\n        </Label>\n      ) : (\n        <>{children}</>\n      )}\n    </>\n  );\n}\n\nexport default LabelWrapper;\n"],"names":["LabelWrapper","_a","label","hintText","_b","required","_c","hideRequiredIndicationInLabel","children","otherHTMLLabelProps","__rest","hintTextElement","length","React","createElement","HintText","Fragment","Label","__assign","LabelText","$hasHintText","RequiredIndicationText"],"mappings":"kMAgBM,SAAUA,EAAaC,GAC3B,IAAAC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAAH,EAAAI,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,kCAAAC,OAA6B,IAAAD,GAAQA,EACrCE,EAAQP,EAAAO,SACLC,EAAmBC,EAAAT,EANK,CAAA,QAAA,WAAA,WAAA,gCAAA,aAQrBU,EACFR,IACoB,iBAAbA,GAAyBA,EAASS,QACrB,iBAAbT,GACPU,EAAAC,cAACC,OAAUZ,GAAoB,EAKnC,OACEU,EAAAC,cAAAD,EAAAG,SAAA,KACGd,EACCW,EAAAC,cAACG,EAAKC,EAAA,CAAA,EAAKT,GACTI,EAAAC,cAACK,EAAS,CAAAC,eAAiBjB,GACxBD,GACCG,IAAaE,GACbM,EAAAC,cAACO,EAAsB,KAAE,gBAG5BV,EACAH,GAGHK,EAAAC,cAAAD,EAAAG,SAAA,KAAGR,GAIX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/LabelWrapper/index.tsx"],"sourcesContent":["import React, { type LabelHTMLAttributes, type ReactNode } from \"react\";\n\ntype LabelWrapperProps = LabelHTMLAttributes<HTMLLabelElement> & {\n  /** label text */\n  label: string;\n  /** hint text or react element in it's place */\n  hintText?: ReactNode;\n  /** if field is required, when not required (optional) appears in label */\n  required?: boolean;\n  /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */\n  hideRequiredIndicationInLabel?: boolean;\n  children?: ReactNode;\n};\n\nexport function LabelWrapper({\n  label,\n  hintText,\n  required = false,\n  hideRequiredIndicationInLabel = false,\n  children,\n  ...otherHTMLLabelProps\n}: LabelWrapperProps) {\n  const hintTextElement =\n    !!hintText &&\n    ((typeof hintText === \"string\" && hintText.length) ||\n      typeof hintText === \"number\") ? (\n      <span className=\"hint-text\">{hintText}</span>\n    ) : (\n      hintText\n    );\n\n  return (\n    <>\n      {label ? (\n        <label className=\"label-component\" {...otherHTMLLabelProps}>\n          <span className=\"label-text\" data-hintext={!!hintText}>\n            {label}\n            {!required && !hideRequiredIndicationInLabel && (\n              <span className=\"required-indication-text\">{` (optional)`}</span>\n            )}\n          </span>\n          {hintTextElement}\n          {children}\n        </label>\n      ) : (\n        <>{children}</>\n      )}\n    </>\n  );\n}\n\nexport default LabelWrapper;\n"],"names":["LabelWrapper","_a","label","hintText","_b","required","_c","hideRequiredIndicationInLabel","children","otherHTMLLabelProps","__rest","hintTextElement","length","React","createElement","className","Fragment","__assign"],"mappings":"qGAcM,SAAUA,EAAaC,GAC3B,IAAAC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAAH,EAAAI,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,kCAAAC,OAA6B,IAAAD,GAAQA,EACrCE,EAAQP,EAAAO,SACLC,EAAmBC,EAAAT,EANK,CAAA,QAAA,WAAA,WAAA,gCAAA,aAQrBU,EACFR,IACoB,iBAAbA,GAAyBA,EAASS,QACrB,iBAAbT,GACPU,EAAAC,cAAA,OAAA,CAAMC,UAAU,aAAaZ,GAAgB,EAKjD,OACEU,EAAAC,cAAAD,EAAAG,SAAA,KACGd,EACCW,EAAAC,cAAA,QAAAG,EAAA,CAAOF,UAAU,mBAAsBN,GACrCI,EAAAC,cAAA,OAAA,CAAMC,UAAU,aAAY,iBAAiBZ,GAC1CD,GACCG,IAAaE,GACbM,EAAAC,cAAA,OAAA,CAAMC,UAAU,4BAA4B,gBAG/CJ,EACAH,GAGHK,EAAAC,cAAAD,EAAAG,SAAA,KAAGR,GAIX"}

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{ErrorText as n}from"../ErrorText/index.js";import{HintText as o,StyledFieldset as s,LegendSpan as l}from"./styles.js";function a(a){var i=a.children,m=a.legendText,d=a.required,x=a.errorMessage,c=a.hasError,p=a.hintText,E=e(a,["children","legendText","required","errorMessage","hasError","hintText"]),h=!p||"string"!=typeof p&&"number"!=typeof p?p:t.createElement(o,null,p);return t.createElement(s,{$hasError:c||!!x||!1,$hasHintText:!!p},m&&t.createElement("legend",r({},E),t.createElement(l,{$hasHintText:!!p},m," ",!d&&t.createElement("span",null,"(optional)")),h),i,!!x&&t.createElement(n,{marginTop:"xxs"},x))}export{a as LegendWrapper,a as default};
+import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{ErrorText as a}from"../ErrorText/index.js";function n(n){var s=n.children,i=n.legendText,o=n.required,l=n.errorMessage,m=n.hasError,d=n.hintText,c=e(n,["children","legendText","required","errorMessage","hasError","hintText"]);return r.createElement("fieldset",{className:"component-legend-wrapper","data-has-error":m||!!l||!1,"data-has-hint-text":!!d},i&&r.createElement("legend",t({},c),r.createElement("span",{className:"legend-span","data-has-hint-text":!!d},i," ",!o&&r.createElement("span",{className:"required-indication-text"},"(optional)")),!d||"string"!=typeof d&&"number"!=typeof d?d:r.createElement("span",{className:"hint-text"},d)),s,!!l&&r.createElement(a,{marginTop:"xxs"},l))}export{n as LegendWrapper,n 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\";\n\nimport { ErrorText } from \"../ErrorText\";\n\nimport { StyledFieldset, LegendSpan, HintText } from \"./styles\";\n\nexport type LegendWrapperProps = HTMLAttributes<HTMLLegendElement> & {\n  children?: ReactNode;\n  /** legend text */\n  legendText: string;\n  /** error message text  */\n  errorMessage?: string;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** if field is required, when not required (optional) appears in legend */\n  required?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n};\n/**\n * LegendWrapper allows the user to add an outer label for a checkbox / group of checkboxes / radio buttons or a group of radio buttons.\n *\n * hasError and errorMessage props are just props that can be passed into the component.\n * There is no functionality checking if the children are valid/required etc this functionality will be needed to ne added outside of this component.\n */\nexport function LegendWrapper({\n  children,\n  legendText,\n  required,\n  errorMessage,\n  hasError,\n  hintText,\n  ...restOfHTMLAttributes\n}: LegendWrapperProps) {\n  const hintTextElement =\n    !!hintText &&\n    (typeof hintText === \"string\" || typeof hintText === \"number\") ? (\n      <HintText>{hintText}</HintText>\n    ) : (\n      hintText\n    );\n  return (\n    <StyledFieldset\n      $hasError={hasError || !!errorMessage || false}\n      $hasHintText={!!hintText}\n    >\n      {legendText && (\n        <legend {...restOfHTMLAttributes}>\n          <LegendSpan $hasHintText={!!hintText}>\n            {legendText} {!required && <span>(optional)</span>}\n          </LegendSpan>\n          {hintTextElement}\n        </legend>\n      )}\n      {children}\n      {!!errorMessage && <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>}\n    </StyledFieldset>\n  );\n}\n\nexport default LegendWrapper;\n"],"names":["LegendWrapper","_a","children","legendText","required","errorMessage","hasError","hintText","restOfHTMLAttributes","__rest","hintTextElement","React","createElement","HintText","StyledFieldset","$hasError","$hasHintText","__assign","LegendSpan","ErrorText","marginTop"],"mappings":"kOAyBM,SAAUA,EAAcC,GAC5B,IAAAC,aACAC,eACAC,aACAC,iBACAC,aACAC,aACGC,EAAoBC,EAAAR,EAPK,CAAA,WAAA,aAAA,WAAA,eAAA,WAAA,aAStBS,GACFH,GACmB,iBAAbA,GAA6C,iBAAbA,EACP,EAA/BI,EAAAC,cAACC,EAAQ,KAAEN,GAIf,OACEI,EAAAC,cAACE,EAAc,CAAAC,UACFT,KAAcD,IAAgB,EAAKW,eAC9BT,GAEfJ,GACCQ,EAAAC,cAAA,SAAAK,EAAA,CAAA,EAAYT,GACVG,EAAAC,cAACM,EAAU,CAAAF,eAAiBT,GACzBJ,OAAcC,GAAYO,EAAAC,cAAA,OAAA,KAAA,eAE5BF,GAGJR,IACEG,GAAgBM,EAAAC,cAACO,EAAS,CAACC,UAAU,OAAOf,GAGrD"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/LegendWrapper/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { ErrorText } from \"../ErrorText\";\n\nexport type LegendWrapperProps = HTMLAttributes<HTMLLegendElement> & {\n  children?: ReactNode;\n  /** legend text */\n  legendText: string;\n  /** error message text  */\n  errorMessage?: string;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** if field is required, when not required (optional) appears in legend */\n  required?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n};\n/**\n * LegendWrapper allows the user to add an outer label for a checkbox / group of checkboxes / radio buttons or a group of radio buttons.\n *\n * hasError and errorMessage props are just props that can be passed into the component.\n * There is no functionality checking if the children are valid/required etc this functionality will be needed to ne added outside of this component.\n */\nexport function LegendWrapper({\n  children,\n  legendText,\n  required,\n  errorMessage,\n  hasError,\n  hintText,\n  ...restOfHTMLAttributes\n}: LegendWrapperProps) {\n  return (\n    <fieldset\n      className=\"component-legend-wrapper\"\n      data-has-error={hasError || !!errorMessage || false}\n      data-has-hint-text={!!hintText}\n    >\n      {legendText && (\n        <legend {...restOfHTMLAttributes}>\n          <span className=\"legend-span\" data-has-hint-text={!!hintText}>\n            {legendText}{\" \"}\n            {!required && (\n              <span className=\"required-indication-text\">(optional)</span>\n            )}\n          </span>\n          {!!hintText &&\n          (typeof hintText === \"string\" || typeof hintText === \"number\") ? (\n            <span className=\"hint-text\">{hintText}</span>\n          ) : (\n            hintText\n          )}\n        </legend>\n      )}\n      {children}\n      {!!errorMessage && <ErrorText marginTop=\"xxs\">{errorMessage}</ErrorText>}\n    </fieldset>\n  );\n}\n\nexport default LegendWrapper;\n"],"names":["LegendWrapper","_a","children","legendText","required","errorMessage","hasError","hintText","restOfHTMLAttributes","__rest","React","createElement","className","__assign","ErrorText","marginTop"],"mappings":"uJAuBM,SAAUA,EAAcC,GAC5B,IAAAC,aACAC,eACAC,aACAC,iBACAC,aACAC,aACGC,EAAoBC,EAAAR,EAPK,CAAA,WAAA,aAAA,WAAA,eAAA,WAAA,aAS5B,OACES,EAAAC,cAAA,WAAA,CACEC,UAAU,4CACMN,KAAcD,IAAgB,EAAK,uBAC7BE,GAErBJ,GACCO,EAAAC,cAAA,SAAAE,EAAA,CAAA,EAAYL,GACVE,EAAAC,cAAA,OAAA,CAAMC,UAAU,cAAa,uBAAuBL,GACjDJ,EAAY,KACXC,GACAM,EAAAC,cAAA,OAAA,CAAMC,UAAU,4BAA0B,gBAG3CL,GACkB,iBAAbA,GAA6C,iBAAbA,EACO,EAA7CG,EAAAC,cAAA,OAAA,CAAMC,UAAU,aAAaL,IAMlCL,IACEG,GAAgBK,EAAAC,cAACG,EAAS,CAACC,UAAU,OAAOV,GAGrD"}

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

@@ -1,14 +1,10 @@
-import React, { type AnchorHTMLAttributes, type Ref, type ElementType, type ReactNode } from "react";
-import { type TextProps } from "../Text";
-export type LinkProps = Omit<AnchorHTMLAttributes<HTMLElement>, "nonce"> & Omit<TextProps, "as" | "ref" | "nonce"> & {
-    /** link text hover colour */
-    textHoverColor?: string;
+import React, { type AnchorHTMLAttributes, type Ref, type ReactNode } from "react";
+import { type ColourProps, type SpacingProps, type TextProps } from "src/types";
+export type LinkProps = Omit<AnchorHTMLAttributes<HTMLElement>, "nonce"> & SpacingProps & ColourProps & TextProps & {
     /** link appearance variant, undefined is a standarding link withing a text block */
     appearance?: "primary" | "secondary";
-    /** styled-components polymorphism where you can use the styling of a link but convert to another element like a button */
-    ref?: Ref<HTMLElement>;
-    /** styled-component polymorphic feature so you take the styling of a link and cast the component to be a "span" for example */
-    as?: ElementType;
+    ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;
+    as?: "a" | "span";
     /** Component children */
     children?: ReactNode;
 };
@@ -23,7 +19,7 @@ export type LinkProps = Omit<AnchorHTMLAttributes<HTMLElement>, "nonce"> & Omit<
  *
  * 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. */
 export declare const Link: {
-    (props: LinkProps): React.JSX.Element;
+    ({ appearance, ref, children, as, textColor, backgroundColor, textSize, textAlign, textWeight, textFontFamily, wordBreak, overflowWrap, margin, marginTop, marginRight, marginBottom, marginLeft, marginVertical, marginHorizontal, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingVertical, paddingHorizontal, ...htmlAnchorProps }: LinkProps): React.JSX.Element;
     displayName: string;
 };
 export default Link;