@cruk/cruk-react-components 7.0.0 → 7.1.0

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

@@ -1,28 +1,8 @@
-import React, { type HTMLAttributes, type Ref, type ElementType } from "react";
-import { type SpacingProps } from "../Spacing";
-import { type WordBreakType, type FontSizeType, type OverflowWrapType, type colours } from "../../types";
-/**
- * Text is to be used as the main paragraph component (or span using as="span"). Using the Text component is preferred to simply adding text to a div and styling that div, this will guarantee we are always using the correct font and default text colour.
- */
-export type TextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
-    /** text colour  */
-    textColor?: (typeof colours)[number] | string;
-    /** text horizontal alignment  */
-    textAlign?: "left" | "right" | "center" | "justify";
-    /** font size FontSizeType t-shirt sizes  */
-    textSize?: FontSizeType;
-    /** font weight theme.typography{fontWeightHeavy/fontWeightNormal/fontWeightMedium/fontWeightLight/fontWeightVLight} is better than a random number */
-    textWeight?: number | string;
-    /** font family theme.typography{fontFamilyBase/fontFamilyHeadings} is better than a random string */
-    textFontFamily?: string;
-    /** styled-components polymorphism where you can set this to "span", "p" or "h2" it default to "p" */
-    as?: ElementType;
-    /** word-break behaviour */
-    wordBreak?: WordBreakType;
-    /** overflow-wrap behaviour */
-    overflowWrap?: OverflowWrapType;
-    /** react reference to the DOM element sometime used to scroll to or set focus after an error */
-    ref?: Ref<HTMLElement>;
-};
-export declare const Text: (props: TextProps) => React.JSX.Element;
+import React, { type Ref, type HTMLAttributes } from "react";
+import { type ColourProps, type SpacingProps, type TextProps } from "../../types";
+export declare const Text: ({ textColor, backgroundColor, textAlign, textSize, textWeight, textFontFamily, wordBreak, overflowWrap, margin, marginTop, marginRight, marginBottom, marginLeft, marginVertical, marginHorizontal, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingVertical, paddingHorizontal, as, ref, ...htmlAttributes }: HTMLAttributes<HTMLElement> & ColourProps & SpacingProps & TextProps & {
+    as?: "span" | "div" | "p" | "address";
+    ref?: Ref<HTMLSpanElement | HTMLDivElement | HTMLParagraphElement>;
+    style?: React.CSSProperties;
+}) => React.JSX.Element;
 export default Text;

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

@@ -1,2 +1,2 @@
-import{__rest as t,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{themeColorOrString as o}from"../../utils/themeUtils.js";import{spacingPropsToSpacingPropsInternal as i}from"../Spacing/index.js";import{TextStyled as l}from"./styles.js";var x=function(x){var a=x.textColor,m=x.textAlign,f=x.textSize,n=x.textWeight,s=x.textFontFamily,p=x.wordBreak,d=x.overflowWrap,g=x.ref,$=t(x,["textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref"]),v=i($),w=a?o(a):void 0;return r.createElement(l,e({$textColor:w,$textAlign:m,$textSize:f,$textWeight:n,$textFontFamily:s,$wordBreak:p,$overflowWrap:d},v,{ref:g}))};export{x as Text,x as default};
+import{__rest as a,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{removeEmpty as r}from"../../utils/Helper.js";var e=function(e){var i=e.textColor,n=e.backgroundColor,d=e.textAlign,p=e.textSize,g=e.textWeight,m=e.textFontFamily,l=e.wordBreak,s=e.overflowWrap,c=e.margin,x=e.marginTop,f=e.marginRight,h=e.marginBottom,v=e.marginLeft,z=e.marginVertical,b=e.marginHorizontal,u=e.padding,w=e.paddingTop,j=e.paddingRight,B=e.paddingBottom,k=e.paddingLeft,E=e.paddingVertical,F=e.paddingHorizontal,H=e.as,C=e.ref,L=a(e,["textColor","backgroundColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","as","ref"]),N=r({"data-color":i,"data-bg-color":n,"data-text-size":p,"data-text-align":d,"data-text-weight":g,"data-text-font-family":m,"data-word-break":l,"data-overflow-wrap":s,"data-margin":c,"data-margin-top":x,"data-margin-right":f,"data-margin-bottom":h,"data-margin-left":v,"data-margin-vertical":z,"data-margin-horizontal":b,"data-padding":u,"data-padding-top":w,"data-padding-right":j,"data-padding-bottom":B,"data-padding-left":k,"data-padding-vertical":E,"data-padding-horizontal":F});return o.createElement(o.Fragment,null,(!H||"p"===H)&&o.createElement("p",t({className:["component-text","text-props","spacing-props","color-props"].join(" "),ref:C},L,N)),"div"===H&&o.createElement("div",t({className:["component-text","text-props","spacing-props","color-props"].join(" "),ref:C},L,N)),"span"===H&&o.createElement("span",t({className:["component-text","text-props","spacing-props","color-props"].join(" "),ref:C},L,N)),"address"===H&&o.createElement("address",t({className:["component-text","text-props","spacing-props","color-props"].join(" "),ref:C},L,N)))};export{e as Text,e as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Text/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type Ref, type ElementType } from \"react\";\n\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\n\nimport { TextStyled } from \"./styles\";\n\nimport {\n  type WordBreakType,\n  type FontSizeType,\n  type OverflowWrapType,\n  type colours,\n} from \"../../types\";\n\n// the 'as' prop is for styled component casting\n// text hover color prop is only used in Link which extends Text\n\n/**\n * Text is to be used as the main paragraph component (or span using as=\"span\"). Using the Text component is preferred to simply adding text to a div and styling that div, this will guarantee we are always using the correct font and default text colour.\n */\nexport type TextProps = SpacingProps &\n  HTMLAttributes<HTMLElement> & {\n    /** text colour  */\n    textColor?: (typeof colours)[number] | string;\n    /** text horizontal alignment  */\n    textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n    /** font size FontSizeType t-shirt sizes  */\n    textSize?: FontSizeType;\n    /** font weight theme.typography{fontWeightHeavy/fontWeightNormal/fontWeightMedium/fontWeightLight/fontWeightVLight} is better than a random number */\n    textWeight?: number | string;\n    /** font family theme.typography{fontFamilyBase/fontFamilyHeadings} is better than a random string */\n    textFontFamily?: string;\n    /** styled-components polymorphism where you can set this to \"span\", \"p\" or \"h2\" it default to \"p\" */\n    as?: ElementType;\n    /** word-break behaviour */\n    wordBreak?: WordBreakType;\n    /** overflow-wrap behaviour */\n    overflowWrap?: OverflowWrapType;\n    /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n    ref?: Ref<HTMLElement>;\n  };\n\nexport const Text = (props: TextProps) => {\n  const {\n    textColor,\n    textAlign,\n    textSize,\n    textWeight,\n    textFontFamily,\n    wordBreak,\n    overflowWrap,\n    ref,\n    ...rest\n  } = props;\n\n  const withInternalSpacingProps = spacingPropsToSpacingPropsInternal(rest);\n\n  const textColorFound = textColor ? themeColorOrString(textColor) : undefined;\n\n  return (\n    <TextStyled\n      $textColor={textColorFound}\n      $textAlign={textAlign}\n      $textSize={textSize}\n      $textWeight={textWeight}\n      $textFontFamily={textFontFamily}\n      $wordBreak={wordBreak}\n      $overflowWrap={overflowWrap}\n      {...withInternalSpacingProps}\n      ref={ref as Ref<HTMLParagraphElement>}\n    />\n  );\n};\n\nexport default Text;\n"],"names":["Text","props","textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref","rest","withInternalSpacingProps","spacingPropsToSpacingPropsInternal","textColorFound","themeColorOrString","undefined","React","createElement","TextStyled","__assign","$textColor","$textSize","$textWeight","$textFontFamily","$wordBreak","$overflowWrap"],"mappings":"sRA8CO,IAAMA,EAAO,SAACC,GAEjB,IAAAC,EASED,EAAKC,UARPC,EAQEF,EAAKE,UAPPC,EAOEH,WANFI,EAMEJ,EAAKI,WALPC,EAKEL,iBAJFM,EAIEN,EAAKM,UAHPC,EAGEP,EAAKO,aAFPC,EAEER,MADCS,IACDT,EAVE,CAAA,YAAA,YAAA,WAAA,aAAA,iBAAA,YAAA,eAAA,QAYAU,EAA2BC,EAAmCF,GAE9DG,EAAiBX,EAAYY,EAAmBZ,QAAaa,EAEnE,OACEC,EAAAC,cAACC,EAAUC,EAAA,CAAAC,WACGP,aACAV,EAASkB,UACVjB,EAAQkB,YACNjB,EAAUkB,gBACNjB,EAAckB,WACnBjB,EAASkB,cACNjB,GACXG,EAAwB,CAC5BF,IAAKA,IAGX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Text/index.tsx"],"sourcesContent":["import React, { type Ref, type HTMLAttributes } from \"react\";\n\nimport { removeEmpty } from \"../../utils/Helper\";\n\nimport {\n  type ColourProps,\n  type SpacingProps,\n  type TextProps,\n} from \"../../types\";\n\nexport const Text = ({\n  textColor,\n  backgroundColor,\n  textAlign,\n  textSize,\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  as,\n  ref,\n  ...htmlAttributes\n}: HTMLAttributes<HTMLElement> &\n  ColourProps &\n  SpacingProps &\n  TextProps & {\n    as?: \"span\" | \"div\" | \"p\" | \"address\";\n    ref?: Ref<HTMLSpanElement | HTMLDivElement | HTMLParagraphElement>;\n    style?: React.CSSProperties;\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  return (\n    <>\n      {(!as || as === \"p\") && (\n        <p\n          className={[\n            \"component-text\",\n            \"text-props\",\n            \"spacing-props\",\n            \"color-props\",\n          ].join(\" \")}\n          ref={ref as Ref<HTMLParagraphElement>}\n          {...htmlAttributes}\n          {...convertedPropsFiltered}\n        />\n      )}\n      {as === \"div\" && (\n        <div\n          className={[\n            \"component-text\",\n            \"text-props\",\n            \"spacing-props\",\n            \"color-props\",\n          ].join(\" \")}\n          ref={ref as Ref<HTMLDivElement>}\n          {...htmlAttributes}\n          {...convertedPropsFiltered}\n        />\n      )}\n      {as === \"span\" && (\n        <span\n          className={[\n            \"component-text\",\n            \"text-props\",\n            \"spacing-props\",\n            \"color-props\",\n          ].join(\" \")}\n          ref={ref as Ref<HTMLSpanElement>}\n          {...htmlAttributes}\n          {...convertedPropsFiltered}\n        />\n      )}\n      {as === \"address\" && (\n        <address\n          className={[\n            \"component-text\",\n            \"text-props\",\n            \"spacing-props\",\n            \"color-props\",\n          ].join(\" \")}\n          ref={ref as Ref<HTMLSpanElement>}\n          {...htmlAttributes}\n          {...convertedPropsFiltered}\n        />\n      )}\n    </>\n  );\n};\n\nexport default Text;\n"],"names":["Text","_a","textColor","backgroundColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","margin","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","as","ref","htmlAttributes","__rest","convertedPropsFiltered","removeEmpty","React","createElement","Fragment","__assign","className","join"],"mappings":"yJAUO,IAAMA,EAAO,SAACC,GACnB,IAAAC,EAASD,EAAAC,UACTC,oBACAC,EAASH,EAAAG,UACTC,EAAQJ,EAAAI,SACRC,EAAUL,EAAAK,WACVC,EAAcN,EAAAM,eACdC,cACAC,EAAYR,EAAAQ,aACZC,EAAMT,EAAAS,OACNC,EAASV,EAAAU,UACTC,EAAWX,EAAAW,YACXC,iBACAC,EAAUb,EAAAa,WACVC,EAAcd,EAAAc,eACdC,EAAgBf,EAAAe,iBAChBC,EAAOhB,EAAAgB,QACPC,eACAC,EAAYlB,EAAAkB,aACZC,EAAanB,EAAAmB,cACbC,EAAWpB,EAAAoB,YACXC,EAAerB,EAAAqB,gBACfC,sBACAC,EAAEvB,EAAAuB,GACFC,EAAGxB,EAAAwB,IACAC,EAAcC,EAAA1B,EAzBE,yUA2Db2B,EAAyBC,EAzBR,CACrB,aAAc3B,EACd,gBAAiBC,EACjB,iBAAkBE,EAClB,kBAAmBD,EACnB,mBAAoBE,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,IAK7B,OACEO,EAAAC,cAAAD,EAAAE,SAAA,OACKR,GAAa,MAAPA,IACPM,EAAAC,cAAA,IAAAE,EAAA,CACEC,UAAW,CACT,iBACA,aACA,gBACA,eACAC,KAAK,KACPV,IAAKA,GACDC,EACAE,IAGA,QAAPJ,GACCM,EAAAC,cAAA,MAAAE,EAAA,CACEC,UAAW,CACT,iBACA,aACA,gBACA,eACAC,KAAK,KACPV,IAAKA,GACDC,EACAE,IAGA,SAAPJ,GACCM,EAAAC,cAAA,OAAAE,EAAA,CACEC,UAAW,CACT,iBACA,aACA,gBACA,eACAC,KAAK,KACPV,IAAKA,GACDC,EACAE,IAGA,YAAPJ,GACCM,EAAAC,cAAA,UAAAE,EAAA,CACEC,UAAW,CACT,iBACA,aACA,gBACA,eACAC,KAAK,KACPV,IAAKA,GACDC,EACAE,IAKd"}

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

@@ -1,5 +1,8 @@
 import React, { type ReactNode, type TextareaHTMLAttributes, type Ref } from "react";
-export type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+/**
+ * TextAreaField lets users enter and edit multiline text.
+ */
+export declare const TextAreaField: ({ errorMessage, hasError, hintText, label, resize, lineCount, ref, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement> & {
     /** error message text */
     errorMessage?: string;
     /** flag for error styling */
@@ -14,9 +17,5 @@ export type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
     lineCount?: number;
     /** react reference to the DOM element sometime used to scroll to or set focus after an error */
     ref?: Ref<HTMLTextAreaElement>;
-};
-/**
- * TextAreaField lets users enter and edit multiline text.
- */
-export declare const TextAreaField: ({ errorMessage, hasError, hintText, label, resize, lineCount, ref, ...props }: TextAreaFieldProps) => React.JSX.Element;
+}) => React.JSX.Element;
 export default TextAreaField;

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

@@ -1,2 +1,2 @@
-import{__rest as r,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";import{ErrorText as t}from"../ErrorText/index.js";import{LabelWrapper as o}from"../LabelWrapper/index.js";import{StyledTextArea as a}from"./styles.js";var s=function(s){var n=s.errorMessage,d=s.hasError,l=s.hintText,m=s.label,c=s.resize,p=void 0===c?"vertical":c,f=s.lineCount,u=void 0===f?3:f,x=s.ref,b=r(s,["errorMessage","hasError","hintText","label","resize","lineCount","ref"]);return i.createElement(o,{label:m,hintText:l,required:b.required||!1},i.createElement(a,e({},b,{"aria-invalid":d||!!n||!1,"aria-describedby":b.id&&n?"".concat(b.id,"-error"):void 0,$hasError:d||!!n||!1,$resize:p,$lineCount:u,ref:x,"data-hj-suppress":!0})),!!n&&i.createElement(t,{marginTop:"xxs",id:b.id?"".concat(b.id,"-error"):void 0},n))};export{s as TextAreaField,s as default};
+import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{ErrorText as i}from"../ErrorText/index.js";import{LabelWrapper as a}from"../LabelWrapper/index.js";var o=function(o){var n=o.errorMessage,s=o.hasError,l=o.hintText,d=o.label,m=o.resize,c=void 0===m?"vertical":m,p=o.lineCount,x=void 0===p?3:p,f=o.ref,u=e(o,["errorMessage","hasError","hintText","label","resize","lineCount","ref"]),h=s||!!(null==n?void 0:n.length);return t.createElement(a,{label:d,hintText:l,required:u.required||!1},t.createElement("textarea",r({className:"component-textarea-field"},u,{"aria-invalid":h,"aria-describedby":u.id&&n?"".concat(u.id,"-error"):void 0,style:{resize:c,height:"".concat(1.5*x,"em")},ref:f,"data-hj-suppress":!0})),!!n&&t.createElement(i,{marginTop:"xxs",id:u.id?"".concat(u.id,"-error"):void 0},n))};export{o as TextAreaField,o as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/TextAreaField/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type TextareaHTMLAttributes,\n  type Ref,\n} from \"react\";\n\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport { StyledTextArea } from \"./styles\";\n\nexport type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n  /** label text */\n  label: string;\n  /** resize behaviour using the resize button on the bottom right of the component */\n  resize?: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n  /** number of visible lines of text before scroll is required this affect the height of the input field */\n  lineCount?: number;\n  /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n  ref?: Ref<HTMLTextAreaElement>;\n};\n\n/**\n * TextAreaField lets users enter and edit multiline text.\n */\nexport const TextAreaField = ({\n  errorMessage,\n  hasError,\n  hintText,\n  label,\n  resize = \"vertical\",\n  lineCount = 3,\n  ref,\n  ...props\n}: TextAreaFieldProps) => {\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={props.required || false}\n    >\n      <StyledTextArea\n        {...props}\n        aria-invalid={hasError || !!errorMessage || false}\n        aria-describedby={\n          !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n        }\n        $hasError={hasError || !!errorMessage || false}\n        $resize={resize}\n        $lineCount={lineCount}\n        ref={ref}\n        data-hj-suppress\n      />\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </LabelWrapper>\n  );\n};\n\nexport default TextAreaField;\n"],"names":["TextAreaField","_a","errorMessage","hasError","hintText","label","_b","resize","_c","lineCount","ref","props","__rest","React","createElement","LabelWrapper","required","StyledTextArea","id","undefined","$hasError","$resize","$lineCount","ErrorText","marginTop","concat"],"mappings":"4PA+BO,IAAMA,EAAgB,SAACC,GAC5B,IAAAC,EAAYD,EAAAC,aACZC,aACAC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAAL,EAAAM,OAAAA,OAAM,IAAAD,EAAG,WAAUA,EACnBE,EAAAP,EAAAQ,UAAAA,aAAY,EAACD,EACbE,EAAGT,EAAAS,IACAC,EAAKC,EAAAX,EARoB,2EAU5B,OACEY,EAAAC,cAACC,GACCV,MAAOA,EACPD,SAAUA,EACVY,SAAUL,EAAMK,WAAY,GAE5BH,EAAAC,cAACG,OACKN,EAAK,CAAA,eACKR,KAAcD,IAAgB,qBAExCS,EAAMO,IAAQhB,EAAe,UAAGS,EAAMO,GAAE,eAAWC,EAASC,UAErDjB,KAAcD,IAAgB,EAAKmB,QACrCd,EAAMe,WACHb,EACZC,IAAKA,EAAG,oBAAA,OAGPR,GACDW,gBAACU,EAAS,CACRC,UAAU,MACVN,GAAIP,EAAMO,GAAK,GAAAO,OAAGd,EAAMO,kBAAaC,GAEpCjB,GAKX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/TextAreaField/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type TextareaHTMLAttributes,\n  type Ref,\n} from \"react\";\n\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\n/**\n * TextAreaField lets users enter and edit multiline text.\n */\nexport const TextAreaField = ({\n  errorMessage,\n  hasError,\n  hintText,\n  label,\n  resize = \"vertical\",\n  lineCount = 3,\n  ref,\n  ...props\n}: TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n  /** label text */\n  label: string;\n  /** resize behaviour using the resize button on the bottom right of the component */\n  resize?: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n  /** number of visible lines of text before scroll is required this affect the height of the input field */\n  lineCount?: number;\n  /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n  ref?: Ref<HTMLTextAreaElement>;\n}) => {\n  const invalid = hasError || !!errorMessage?.length;\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={props.required || false}\n    >\n      <textarea\n        className=\"component-textarea-field\"\n        {...props}\n        aria-invalid={invalid}\n        aria-describedby={\n          !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n        }\n        style={{\n          resize: resize,\n          height: `${lineCount * 1.5}em`,\n        }}\n        ref={ref}\n        data-hj-suppress\n      />\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </LabelWrapper>\n  );\n};\n\nexport default TextAreaField;\n"],"names":["TextAreaField","_a","errorMessage","hasError","hintText","label","_b","resize","_c","lineCount","ref","props","__rest","invalid","length","React","createElement","LabelWrapper","required","__assign","className","id","concat","undefined","style","height","ErrorText","marginTop"],"mappings":"+MAYO,IAAMA,EAAgB,SAACC,GAC5B,IAAAC,EAAYD,EAAAC,aACZC,aACAC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAAL,EAAAM,OAAAA,OAAM,IAAAD,EAAG,WAAUA,EACnBE,EAAAP,EAAAQ,UAAAA,aAAY,EAACD,EACbE,EAAGT,EAAAS,IACAC,EAAKC,EAAAX,EARoB,2EAyBtBY,EAAUV,MAAcD,aAAY,EAAZA,EAAcY,QAC5C,OACEC,EAAAC,cAACC,GACCZ,MAAOA,EACPD,SAAUA,EACVc,SAAUP,EAAMO,WAAY,GAE5BH,EAAAC,cAAA,WAAAG,EAAA,CACEC,UAAU,4BACNT,EAAK,CAAA,eACKE,EAAO,mBAEjBF,EAAMU,IAAQnB,EAAe,GAAAoB,OAAGX,EAAMU,GAAE,eAAWE,EAEvDC,MAAO,CACLjB,OAAQA,EACRkB,OAAQ,GAAAH,OAAe,IAAZb,EAAe,OAE5BC,IAAKA,EAAG,oBAAA,OAGPR,GACDa,gBAACW,EAAS,CACRC,UAAU,MACVN,GAAIV,EAAMU,GAAK,GAAAC,OAAGX,EAAMU,kBAAaE,GAEpCrB,GAKX"}

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

@@ -1,5 +1,7 @@
 import React, { type InputHTMLAttributes, type ReactNode, type Ref } from "react";
+import { type fontSizes } from "../../types";
 export type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
+    textSize?: (typeof fontSizes)[number];
     /** error message text  */
     errorMessage?: string;
     /** custom component/text that appears underneath the input field */
@@ -30,5 +32,5 @@ export type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
 /**
  * TextFields let users enter and edit text. For multiline text entry please consider using the TextAreaFieldComponent.
  * */
-export declare const TextField: ({ errorMessage, extraBottom, extraLeft, extraRight, extraTop, hasError, hintText, isValid, isValidVisible, isInvalidVisible, label, hideRequiredIndicationInLabel, ref, ...props }: TextFieldProps) => React.JSX.Element;
+export declare const TextField: ({ textSize, errorMessage, extraBottom, extraLeft, extraRight, extraTop, hasError, hintText, isValid, isValidVisible, isInvalidVisible, label, hideRequiredIndicationInLabel, ref, ...props }: TextFieldProps) => React.JSX.Element;
 export default TextField;

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as i}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{ErrorText as a}from"../ErrorText/index.js";import{LabelWrapper as t}from"../LabelWrapper/index.js";import{ExtraLeft as l,StyledInputWrapper as n,StyledInput as s,ExtraRight as d,Extra as o,ExtraWrapper as m}from"./styles.js";var c=function(c){var b=c.errorMessage,x=c.extraBottom,u=c.extraLeft,V=c.extraRight,E=c.extraTop,h=c.hasError,p=c.hintText,f=c.isValid,v=c.isValidVisible,I=c.isInvalidVisible,$=c.label,T=c.hideRequiredIndicationInLabel,g=c.ref,L=e(c,["errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredIndicationInLabel","ref"]),j=r.createElement(r.Fragment,null,!!u&&r.createElement(l,null,u),r.createElement(n,{$hasError:h||!!b||!1,$isValid:void 0!==f?f:!h&&!b,"aria-invalid":h||!!b||!1,$isValidVisible:v||!1,$isInvalidVisible:I||!1},r.createElement(s,i({$hasError:h||!!b||!1,$isValid:void 0!==f?f:!h&&!b,"aria-invalid":h||!!b||!1,"aria-describedby":L.id&&b?"".concat(L.id,"-error"):void 0,$isValidVisible:v||!1,$isInvalidVisible:I||!1},L,{"data-hj-suppress":!0,ref:g}))),!!V&&r.createElement(d,null,V));return r.createElement(t,{label:$,hintText:p,required:L.required||!1,hideRequiredIndicationInLabel:T},!!E&&r.createElement(o,null,E),V||u?r.createElement(m,null,j):j,!!x&&r.createElement(o,null,x),!!b&&r.createElement(a,{marginTop:"xxs",id:L.id?"".concat(L.id,"-error"):void 0},b))};export{c as TextField,c as default};
+import{__rest as e,__assign as a}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{ErrorText as i}from"../ErrorText/index.js";import{LabelWrapper as r}from"../LabelWrapper/index.js";var l=function(l){var s=l.textSize,n=l.errorMessage,d=l.extraBottom,o=l.extraLeft,m=l.extraRight,c=l.extraTop,p=l.hasError,x=l.hintText,b=l.isValid,v=l.isValidVisible,u=l.isInvalidVisible,h=l.label,E=l.hideRequiredIndicationInLabel,f=l.ref,g=e(l,["textSize","errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredIndicationInLabel","ref"]),I=void 0!==b?b:!p&&!(null==n?void 0:n.length),N=t.createElement(t.Fragment,null,!!o&&t.createElement("span",{className:["extra","extra-left"].join(" ")},o),t.createElement("span",{className:"input-wrapper","data-is-valid-visible":v||!1,"data-is-invalid-visible":u||!1},t.createElement("input",a({className:"input text-props","aria-invalid":!I,"aria-describedby":g.id&&n?"".concat(g.id,"-error"):void 0,"data-is-valid-visible":v||!1,"data-is-invalid-visible":u||!1,"data-text-size":s},g,{"data-hj-suppress":!0,ref:f}))),!!m&&t.createElement("span",{className:["extra-right","extra"].join(" ")},m));return t.createElement(r,{label:h,hintText:x,required:g.required||!1,hideRequiredIndicationInLabel:E},t.createElement("span",{className:"component-text-field"},!!c&&t.createElement("span",{className:"extra"},c),m||o?t.createElement("span",{className:"extra-wrapper"},N):N,!!d&&t.createElement("span",{className:"extra"},d),!!(null==n?void 0:n.length)&&t.createElement(i,{marginTop:"xxs",id:g.id?"".concat(g.id,"-error"):void 0},n)))};export{l as TextField,l as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/TextField/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport {\n  ExtraLeft,\n  ExtraRight,\n  Extra,\n  ExtraWrapper,\n  StyledInput,\n  StyledInputWrapper,\n} from \"./styles\";\n\nexport type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  /** error message text  */\n  errorMessage?: string;\n  /** custom component/text that appears underneath the input field */\n  extraBottom?: ReactNode;\n  /** custom component/text that appears to the left of the input field for example prefixes like \"£\" */\n  extraLeft?: ReactNode;\n  /** custom component/text that appears to the right of the input field for example a search button */\n  extraRight?: ReactNode;\n  /** custom component/text that appears above the input field for example a url domain */\n  extraTop?: ReactNode;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** flag which controls the whether a cross icon or check icon is displayed to the right of the input field */\n  isValid?: boolean;\n  /** flag to hide or show the check icon when valid */\n  isValidVisible?: boolean;\n  /** flag to hide or show the cross icon when invalid */\n  isInvalidVisible?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n  /** label text */\n  label: string;\n  /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */\n  hideRequiredIndicationInLabel?: boolean;\n  /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n  ref?: Ref<HTMLInputElement>;\n};\n\n/**\n * TextFields let users enter and edit text. For multiline text entry please consider using the TextAreaFieldComponent.\n * */\nexport const TextField = ({\n  errorMessage,\n  extraBottom,\n  extraLeft,\n  extraRight,\n  extraTop,\n  hasError,\n  hintText,\n  isValid,\n  isValidVisible,\n  isInvalidVisible,\n  label,\n  hideRequiredIndicationInLabel,\n  ref,\n  ...props\n}: TextFieldProps) => {\n  const renderContent = (\n    <>\n      {!!extraLeft && <ExtraLeft>{extraLeft}</ExtraLeft>}\n      <StyledInputWrapper\n        $hasError={hasError || !!errorMessage || false}\n        $isValid={\n          typeof isValid !== \"undefined\" ? isValid : !hasError && !errorMessage\n        }\n        aria-invalid={hasError || !!errorMessage || false}\n        $isValidVisible={isValidVisible || false}\n        $isInvalidVisible={isInvalidVisible || false}\n      >\n        <StyledInput\n          $hasError={hasError || !!errorMessage || false}\n          $isValid={\n            typeof isValid !== \"undefined\"\n              ? isValid\n              : !hasError && !errorMessage\n          }\n          aria-invalid={hasError || !!errorMessage || false}\n          aria-describedby={\n            !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n          }\n          $isValidVisible={isValidVisible || false}\n          $isInvalidVisible={isInvalidVisible || false}\n          {...props}\n          data-hj-suppress\n          ref={ref}\n        />\n      </StyledInputWrapper>\n      {!!extraRight && <ExtraRight>{extraRight}</ExtraRight>}\n    </>\n  );\n\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={props.required || false}\n      hideRequiredIndicationInLabel={hideRequiredIndicationInLabel}\n    >\n      {!!extraTop && <Extra>{extraTop}</Extra>}\n      {!!extraRight || !!extraLeft ? (\n        <ExtraWrapper>{renderContent}</ExtraWrapper>\n      ) : (\n        renderContent\n      )}\n      {!!extraBottom && <Extra>{extraBottom}</Extra>}\n      {!!errorMessage && (\n        <ErrorText\n          marginTop=\"xxs\"\n          id={props.id ? `${props.id}-error` : undefined}\n        >\n          {errorMessage}\n        </ErrorText>\n      )}\n    </LabelWrapper>\n  );\n};\n\nexport default TextField;\n"],"names":["TextField","_a","errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredIndicationInLabel","ref","props","__rest","renderContent","React","createElement","Fragment","ExtraLeft","StyledInputWrapper","$hasError","$isValid","$isInvalidVisible","StyledInput","__assign","id","concat","undefined","$isValidVisible","ExtraRight","LabelWrapper","required","Extra","ExtraWrapper","ErrorText","marginTop"],"mappings":"6UAkDO,IAAMA,EAAY,SAACC,GACxB,IAAAC,EAAYD,EAAAC,aACZC,EAAWF,EAAAE,YACXC,EAASH,EAAAG,UACTC,EAAUJ,EAAAI,WACVC,EAAQL,EAAAK,SACRC,EAAQN,EAAAM,SACRC,EAAQP,EAAAO,SACRC,EAAOR,EAAAQ,QACPC,EAAcT,EAAAS,eACdC,EAAgBV,EAAAU,iBAChBC,EAAKX,EAAAW,MACLC,EAA6BZ,EAAAY,8BAC7BC,EAAGb,EAAAa,IACAC,EAAKC,EAAAf,EAdgB,sLAgBlBgB,EACJC,EAAAC,cAAAD,EAAAE,SAAA,OACKhB,GAAac,gBAACG,EAAS,KAAEjB,GAC5Bc,EAAAC,cAACG,EAAkB,CAAAC,UACNhB,KAAcL,IAAgB,EAAKsB,cAEzB,IAAZf,EAA0BA,GAAWF,IAAaL,EAAY,eAEzDK,KAAcL,IAAgB,kBAC3BQ,IAAkB,EAAKe,kBACrBd,IAAoB,GAEvCO,EAAAC,cAACO,EAAWC,EAAA,CAAAJ,UACChB,KAAcL,IAAgB,EAAKsB,cAEzB,IAAZf,EACHA,GACCF,IAAaL,EAAY,eAElBK,KAAcL,IAAgB,EAAK,mBAE7Ca,EAAMa,IAAQ1B,EAAe,GAAA2B,OAAGd,EAAMa,GAAE,eAAWE,EAASC,gBAE/CrB,IAAkB,EAAKe,kBACrBd,IAAoB,GACnCI,yBAEJD,IAAKA,QAGNT,GAAca,EAAAC,cAACa,OAAY3B,IAIlC,OACEa,gBAACe,EAAY,CACXrB,MAAOA,EACPJ,SAAUA,EACV0B,SAAUnB,EAAMmB,WAAY,EAC5BrB,8BAA+BA,KAE5BP,GAAYY,gBAACiB,EAAK,KAAE7B,GACpBD,GAAgBD,EACjBc,gBAACkB,EAAY,KAAEnB,GAA6B,IAI3Cd,GAAee,gBAACiB,EAAK,KAAEhC,KACvBD,GACDgB,gBAACmB,EAAS,CACRC,UAAU,MACVV,GAAIb,EAAMa,GAAK,GAAAC,OAAGd,EAAMa,kBAAaE,GAEpC5B,GAKX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/TextField/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport { type fontSizes } from \"../../types\";\n\nexport type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  textSize?: (typeof fontSizes)[number];\n  /** error message text  */\n  errorMessage?: string;\n  /** custom component/text that appears underneath the input field */\n  extraBottom?: ReactNode;\n  /** custom component/text that appears to the left of the input field for example prefixes like \"£\" */\n  extraLeft?: ReactNode;\n  /** custom component/text that appears to the right of the input field for example a search button */\n  extraRight?: ReactNode;\n  /** custom component/text that appears above the input field for example a url domain */\n  extraTop?: ReactNode;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** flag which controls the whether a cross icon or check icon is displayed to the right of the input field */\n  isValid?: boolean;\n  /** flag to hide or show the check icon when valid */\n  isValidVisible?: boolean;\n  /** flag to hide or show the cross icon when invalid */\n  isInvalidVisible?: boolean;\n  /** hint text */\n  hintText?: ReactNode;\n  /** label text */\n  label: string;\n  /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */\n  hideRequiredIndicationInLabel?: boolean;\n  /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n  ref?: Ref<HTMLInputElement>;\n};\n\n/**\n * TextFields let users enter and edit text. For multiline text entry please consider using the TextAreaFieldComponent.\n * */\nexport const TextField = ({\n  textSize,\n  errorMessage,\n  extraBottom,\n  extraLeft,\n  extraRight,\n  extraTop,\n  hasError,\n  hintText,\n  isValid,\n  isValidVisible,\n  isInvalidVisible,\n  label,\n  hideRequiredIndicationInLabel,\n  ref,\n  ...props\n}: TextFieldProps) => {\n  const isValidCalculated =\n    typeof isValid !== \"undefined\"\n      ? isValid\n      : !hasError && !errorMessage?.length;\n\n  const renderContent = (\n    <>\n      {!!extraLeft && (\n        <span className={[\"extra\", \"extra-left\"].join(\" \")}>{extraLeft}</span>\n      )}\n      <span\n        className=\"input-wrapper\"\n        data-is-valid-visible={isValidVisible || false}\n        data-is-invalid-visible={isInvalidVisible || false}\n      >\n        <input\n          className=\"input text-props\"\n          aria-invalid={!isValidCalculated}\n          aria-describedby={\n            !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n          }\n          data-is-valid-visible={isValidVisible || false}\n          data-is-invalid-visible={isInvalidVisible || false}\n          data-text-size={textSize}\n          {...props}\n          data-hj-suppress\n          ref={ref}\n        />\n      </span>\n      {!!extraRight && (\n        <span className={[\"extra-right\", \"extra\"].join(\" \")}>{extraRight}</span>\n      )}\n    </>\n  );\n\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={props.required || false}\n      hideRequiredIndicationInLabel={hideRequiredIndicationInLabel}\n    >\n      <span className=\"component-text-field\">\n        {!!extraTop && <span className=\"extra\">{extraTop}</span>}\n        {!!extraRight || !!extraLeft ? (\n          <span className=\"extra-wrapper\">{renderContent}</span>\n        ) : (\n          renderContent\n        )}\n        {!!extraBottom && <span className=\"extra\">{extraBottom}</span>}\n        {!!errorMessage?.length && (\n          <ErrorText\n            marginTop=\"xxs\"\n            id={props.id ? `${props.id}-error` : undefined}\n          >\n            {errorMessage}\n          </ErrorText>\n        )}\n      </span>\n    </LabelWrapper>\n  );\n};\n\nexport default TextField;\n"],"names":["TextField","_a","textSize","errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredIndicationInLabel","ref","props","__rest","isValidCalculated","length","renderContent","React","createElement","Fragment","className","join","__assign","id","undefined","LabelWrapper","required","ErrorText","marginTop"],"mappings":"+MA4CO,IAAMA,EAAY,SAACC,GACxB,IAAAC,aACAC,iBACAC,gBACAC,cACAC,eACAC,aACAC,aACAC,aACAC,YACAC,mBACAC,qBACAC,UACAC,kCACAC,QACGC,EAAKC,EAAAhB,EAfgB,CAAA,WAAA,eAAA,cAAA,YAAA,aAAA,WAAA,WAAA,WAAA,UAAA,iBAAA,mBAAA,QAAA,gCAAA,QAiBlBiB,OACe,IAAZR,EACHA,GACCF,KAAaL,aAAY,EAAZA,EAAcgB,QAE5BC,EACJC,EAAAC,cAAAD,EAAAE,SAAA,OACKlB,GACDgB,wBAAMG,UAAW,CAAC,QAAS,cAAcC,KAAK,MAAOpB,GAEvDgB,EAAAC,cAAA,OAAA,CACEE,UAAU,gBAAe,wBACFb,IAAkB,EAAK,0BACrBC,IAAoB,GAE7CS,EAAAC,cAAA,QAAAI,EAAA,CACEF,UAAU,mBAAkB,gBACbN,EAAiB,mBAE5BF,EAAMW,IAAQxB,EAAe,UAAGa,EAAMW,GAAE,eAAWC,0BAEhCjB,IAAkB,EAAK,0BACrBC,IAAoB,EAAK,iBAClCV,GACZc,yBAEJD,IAAKA,QAGNT,GACDe,wBAAMG,UAAW,CAAC,cAAe,SAASC,KAAK,MAAOnB,IAK5D,OACEe,gBAACQ,EAAY,CACXhB,MAAOA,EACPJ,SAAUA,EACVqB,SAAUd,EAAMc,WAAY,EAC5BhB,8BAA+BA,GAE/BO,EAAAC,cAAA,OAAA,CAAME,UAAU,0BACXjB,GAAYc,EAAAC,cAAA,OAAA,CAAME,UAAU,SAASjB,GACrCD,GAAgBD,EACjBgB,EAAAC,cAAA,OAAA,CAAME,UAAU,iBAAiBJ,GAAqB,IAIrDhB,GAAeiB,EAAAC,cAAA,OAAA,CAAME,UAAU,SAASpB,MACxCD,aAAY,EAAZA,EAAcgB,SACfE,gBAACU,EAAS,CACRC,UAAU,MACVL,GAAIX,EAAMW,GAAK,UAAGX,EAAMW,GAAE,eAAWC,GAEpCzB,IAMb"}

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

@@ -1,2 +1,2 @@
-import e from"react";import{calculatePercentRounded as t,formatMoneyWithCommas as n}from"../../utils/Helper.js";import{Text as l}from"../Text/index.js";import{Badge as a}from"../Badge/index.js";import{Box as r}from"../Box/index.js";import{TotaliserWrapper as m,BubbleWrapper as o,BubbleText as c,Total as i,GiftAid as s,ProgressBarWrapper as u,StyledProgressBar as E,Summary as d,CompactWrapper as p}from"./styles.js";function g(g){var f=g.total,x=g.additionalAmount,j=g.giftAid,v=g.target,h=void 0===v?null:v,y=g.isCompact,A=g.summaryMessage,B=void 0===A?void 0:A,C=g.children,H=t(+f,h||0),T=t(x?+f+(x||0):0,h||0),$="".concat(H,"% of the £").concat(n(h||0)," target");return e.createElement(m,{$isCompact:y||!1},y?e.createElement(r,{marginHorizontal:"none",marginRight:"xxs",marginBottom:"none"},e.createElement(a,null,"£".concat(n(f)))):e.createElement(o,null,e.createElement(c,null,"Total raised"),e.createElement(i,null,"£",n(f)),e.createElement(s,null,"+ £",n(j||0)," Gift Aid")),(!!h||!!B)&&e.createElement(e.Fragment,null,e.createElement(u,{$isCompact:y||!1},e.createElement(E,{percentage:H,secondaryPercentage:T}),y?e.createElement(p,null,null!==h&&e.createElement(d,null,e.createElement(l,{as:"span"},$))):B?e.createElement(d,null,B):e.createElement(d,null,e.createElement(l,{as:"span"},$)))),C)}export{g as Totaliser,g as default};
+import e from"react";import{calculatePercentRounded as a,formatMoneyWithCommas as t}from"../../utils/Helper.js";import{Text as r}from"../Text/index.js";import{Badge as m}from"../Badge/index.js";import{Box as n}from"../Box/index.js";import{ProgressBar as s}from"../ProgressBar/index.js";function l(l){var c=l.total,o=l.additionalAmount,i=l.giftAid,p=l.target,d=void 0===p?null:p,E=l.isCompact,g=l.summaryMessage,u=void 0===g?void 0:g,f=l.children,x=a(+c,d||0),N=a(o?+c+(o||0):0,d||0),v="".concat(x,"% of the £").concat(t(d||0)," target");return e.createElement("div",{className:"component-totaliser"},E?e.createElement(n,{marginHorizontal:"none",marginRight:"xxs",marginBottom:"none"},e.createElement(m,null,"£".concat(t(c)))):e.createElement("div",{className:"bubble-wrapper"},e.createElement("p",{className:"bubble-text"},"Total raised"),e.createElement("p",{className:"total"},"£",t(c)),e.createElement("p",{className:"gift-aid"},"+ £",t(i||0)," Gift Aid")),(!!d||!!u)&&e.createElement(e.Fragment,null,e.createElement("div",{className:"progress-bar-wrapper","data-is-compact":E||!1},e.createElement(s,{percentage:x,secondaryPercentage:N}),E?e.createElement("div",{className:"compact-wrapper"},null!==d&&e.createElement("span",{className:"summary"},e.createElement(r,{as:"span"},v))):u?e.createElement("span",{className:"summary"},u):e.createElement("span",{className:"summary"},e.createElement(r,{as:"span"},v)))),f)}export{l as Totaliser,l as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Totaliser/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\n\nimport {\n  calculatePercentRounded,\n  formatMoneyWithCommas,\n} from \"../../utils/Helper\";\n\nimport { Text } from \"../Text\";\nimport { Badge } from \"../Badge\";\nimport { Box } from \"../Box\";\n\nimport {\n  TotaliserWrapper,\n  CompactWrapper,\n  Summary,\n  BubbleWrapper,\n  BubbleText,\n  GiftAid,\n  Total,\n  ProgressBarWrapper,\n  StyledProgressBar,\n} from \"./styles\";\n\n// TODO figure out how we want to handle AriaAttributes\n\n/**\n * Think Blue Peter, used to display total raised and if target prop is passed will display percentage of target reached.\n * */\nexport function Totaliser({\n  total,\n  additionalAmount,\n  giftAid,\n  target = null,\n  isCompact,\n  summaryMessage = undefined,\n  children,\n}: {\n  /** financial total as a number */\n  total: number;\n  /** additional donation amount as a number */\n  additionalAmount?: number;\n  /** git aid total as a number */\n  giftAid?: number;\n  /** money target as a number */\n  target?: number | null;\n  /** flag for low height compact appearance */\n  isCompact?: boolean;\n  /** component for custom summary message underneath total graph only visible if there is a target */\n  summaryMessage?: ReactNode;\n  /** component children */\n  children?: ReactNode;\n}) {\n  const percentageOfTotal = calculatePercentRounded(+total, target || 0);\n  const withAdditionalPercentageOfTotal = calculatePercentRounded(\n    additionalAmount ? +total + (additionalAmount || 0) : 0,\n    target || 0,\n  );\n\n  const summaryString = `${percentageOfTotal}% of the £${formatMoneyWithCommas(\n    target || 0,\n  )} target`;\n\n  return (\n    <TotaliserWrapper $isCompact={isCompact || false}>\n      {!isCompact ? (\n        <BubbleWrapper>\n          <BubbleText>Total raised</BubbleText>\n          <Total>£{formatMoneyWithCommas(total)}</Total>\n          <GiftAid>+ £{formatMoneyWithCommas(giftAid || 0)} Gift Aid</GiftAid>\n        </BubbleWrapper>\n      ) : (\n        <Box marginHorizontal=\"none\" marginRight=\"xxs\" marginBottom=\"none\">\n          <Badge>{`£${formatMoneyWithCommas(total)}`}</Badge>\n        </Box>\n      )}\n      {/* We don't want to show the default summaryMessage if there is no target, because the summary is associated with the target progress bar */}\n      {/* However, if we explicitly pass a summaryMessage string/component, then we want to always display it even if the target is zero */}\n\n      {(!!target || !!summaryMessage) && (\n        <>\n          <ProgressBarWrapper $isCompact={isCompact || false}>\n            <StyledProgressBar\n              percentage={percentageOfTotal}\n              secondaryPercentage={withAdditionalPercentageOfTotal}\n            />\n            {!isCompact ? (\n              summaryMessage ? (\n                <Summary>{summaryMessage}</Summary>\n              ) : (\n                <Summary>\n                  <Text as=\"span\">{summaryString}</Text>\n                </Summary>\n              )\n            ) : (\n              <CompactWrapper>\n                {target !== null && (\n                  <Summary>\n                    <Text as=\"span\">{summaryString}</Text>\n                  </Summary>\n                )}\n              </CompactWrapper>\n            )}\n          </ProgressBarWrapper>\n        </>\n      )}\n      {children}\n    </TotaliserWrapper>\n  );\n}\n\nexport default Totaliser;\n"],"names":["Totaliser","_a","total","additionalAmount","giftAid","_b","target","isCompact","_c","summaryMessage","undefined","children","percentageOfTotal","calculatePercentRounded","withAdditionalPercentageOfTotal","summaryString","concat","formatMoneyWithCommas","React","createElement","TotaliserWrapper","$isCompact","Box","marginHorizontal","marginRight","marginBottom","Badge","BubbleWrapper","BubbleText","Total","GiftAid","Fragment","ProgressBarWrapper","StyledProgressBar","percentage","secondaryPercentage","CompactWrapper","Summary","Text","as"],"mappings":"kaA4BM,SAAUA,EAAUC,OACxBC,EAAKD,EAAAC,MACLC,EAAgBF,EAAAE,iBAChBC,EAAOH,EAAAG,QACPC,EAAAJ,EAAAK,OAAAA,OAAM,IAAAD,EAAG,OACTE,EAASN,EAAAM,UACTC,EAAAP,EAAAQ,eAAAA,OAAc,IAAAD,OAAGE,EAASF,EAC1BG,EAAQV,EAAAU,SAiBFC,EAAoBC,GAAyBX,EAAOI,GAAU,GAC9DQ,EAAkCD,EACtCV,GAAoBD,GAASC,GAAoB,GAAK,EACtDG,GAAU,GAGNS,EAAgB,GAAAC,OAAGJ,EAAiB,cAAAI,OAAaC,EACrDX,GAAU,GACX,WAED,OACEY,EAAAC,cAACC,EAAgB,CAAAC,WAAad,IAAa,GACvCA,EAOAW,EAAAC,cAACG,EAAG,CAACC,iBAAiB,OAAOC,YAAY,MAAMC,aAAa,QAC1DP,EAAAC,cAACO,EAAK,KAAE,IAAAV,OAAIC,EAAsBf,MAPpCgB,gBAACS,EAAa,KACZT,EAAAC,cAACS,EAAU,KAAA,gBACXV,EAAAC,cAACU,EAAK,SAAGZ,EAAsBf,IAC/BgB,EAAAC,cAACW,EAAO,WAAKb,EAAsBb,GAAW,GAAsB,iBAUpEE,KAAYG,IACdS,EAAAC,cAAAD,EAAAa,SAAA,KACEb,EAAAC,cAACa,EAAkB,CAAAX,WAAad,IAAa,GAC3CW,EAAAC,cAACc,GACCC,WAAYtB,EACZuB,oBAAqBrB,IAErBP,EASAW,EAAAC,cAACiB,EAAc,KACD,OAAX9B,GACCY,EAAAC,cAACkB,EAAO,KACNnB,EAAAC,cAACmB,EAAI,CAACC,GAAG,QAAQxB,KAXvBN,EACES,gBAACmB,EAAO,KAAE5B,GAEVS,EAAAC,cAACkB,EAAO,KACNnB,EAAAC,cAACmB,EAAI,CAACC,GAAG,QAAQxB,MAe5BJ,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Totaliser/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\n\nimport {\n  calculatePercentRounded,\n  formatMoneyWithCommas,\n} from \"../../utils/Helper\";\n\nimport { Text } from \"../Text\";\nimport { Badge } from \"../Badge\";\nimport { Box } from \"../Box\";\n\nimport { ProgressBar } from \"../ProgressBar\";\n\n// TODO figure out how we want to handle AriaAttributes\n\n/**\n * Think Blue Peter, used to display total raised and if target prop is passed will display percentage of target reached.\n * */\nexport function Totaliser({\n  total,\n  additionalAmount,\n  giftAid,\n  target = null,\n  isCompact,\n  summaryMessage = undefined,\n  children,\n}: {\n  /** financial total as a number */\n  total: number;\n  /** additional donation amount as a number */\n  additionalAmount?: number;\n  /** git aid total as a number */\n  giftAid?: number;\n  /** money target as a number */\n  target?: number | null;\n  /** flag for low height compact appearance */\n  isCompact?: boolean;\n  /** component for custom summary message underneath total graph only visible if there is a target */\n  summaryMessage?: ReactNode;\n  /** component children */\n  children?: ReactNode;\n}) {\n  const percentageOfTotal = calculatePercentRounded(+total, target || 0);\n  const withAdditionalPercentageOfTotal = calculatePercentRounded(\n    additionalAmount ? +total + (additionalAmount || 0) : 0,\n    target || 0,\n  );\n\n  const summaryString = `${percentageOfTotal}% of the £${formatMoneyWithCommas(\n    target || 0,\n  )} target`;\n\n  return (\n    <div className=\"component-totaliser\">\n      {!isCompact ? (\n        <div className=\"bubble-wrapper\">\n          <p className=\"bubble-text\">Total raised</p>\n          <p className=\"total\">£{formatMoneyWithCommas(total)}</p>\n          <p className=\"gift-aid\">\n            + £{formatMoneyWithCommas(giftAid || 0)} Gift Aid\n          </p>\n        </div>\n      ) : (\n        <Box marginHorizontal=\"none\" marginRight=\"xxs\" marginBottom=\"none\">\n          <Badge>{`£${formatMoneyWithCommas(total)}`}</Badge>\n        </Box>\n      )}\n      {/* We don't want to show the default summaryMessage if there is no target, because the summary is associated with the target progress bar */}\n      {/* However, if we explicitly pass a summaryMessage string/component, then we want to always display it even if the target is zero */}\n\n      {(!!target || !!summaryMessage) && (\n        <>\n          <div\n            className=\"progress-bar-wrapper\"\n            data-is-compact={isCompact || false}\n          >\n            <ProgressBar\n              percentage={percentageOfTotal}\n              secondaryPercentage={withAdditionalPercentageOfTotal}\n            />\n            {!isCompact ? (\n              summaryMessage ? (\n                <span className=\"summary\">{summaryMessage}</span>\n              ) : (\n                <span className=\"summary\">\n                  <Text as=\"span\">{summaryString}</Text>\n                </span>\n              )\n            ) : (\n              <div className=\"compact-wrapper\">\n                {target !== null && (\n                  <span className=\"summary\">\n                    <Text as=\"span\">{summaryString}</Text>\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n        </>\n      )}\n      {children}\n    </div>\n  );\n}\n\nexport default Totaliser;\n"],"names":["Totaliser","_a","total","additionalAmount","giftAid","_b","target","isCompact","_c","summaryMessage","undefined","children","percentageOfTotal","calculatePercentRounded","withAdditionalPercentageOfTotal","summaryString","concat","formatMoneyWithCommas","React","createElement","className","Box","marginHorizontal","marginRight","marginBottom","Badge","Fragment","ProgressBar","percentage","secondaryPercentage","Text","as"],"mappings":"8RAkBM,SAAUA,EAAUC,OACxBC,EAAKD,EAAAC,MACLC,EAAgBF,EAAAE,iBAChBC,EAAOH,EAAAG,QACPC,EAAAJ,EAAAK,OAAAA,OAAM,IAAAD,EAAG,OACTE,EAASN,EAAAM,UACTC,EAAAP,EAAAQ,eAAAA,OAAc,IAAAD,OAAGE,EAASF,EAC1BG,EAAQV,EAAAU,SAiBFC,EAAoBC,GAAyBX,EAAOI,GAAU,GAC9DQ,EAAkCD,EACtCV,GAAoBD,GAASC,GAAoB,GAAK,EACtDG,GAAU,GAGNS,EAAgB,GAAAC,OAAGJ,EAAiB,cAAAI,OAAaC,EACrDX,GAAU,GACX,WAED,OACEY,EAAAC,cAAA,MAAA,CAAKC,UAAU,uBACXb,EASAW,EAAAC,cAACE,EAAG,CAACC,iBAAiB,OAAOC,YAAY,MAAMC,aAAa,QAC1DN,EAAAC,cAACM,EAAK,KAAE,IAAAT,OAAIC,EAAsBf,MATpCgB,EAAAC,cAAA,MAAA,CAAKC,UAAU,kBACbF,EAAAC,cAAA,IAAA,CAAGC,UAAU,eAAa,gBAC1BF,EAAAC,cAAA,IAAA,CAAGC,UAAU,aAAUH,EAAsBf,IAC7CgB,EAAAC,cAAA,IAAA,CAAGC,UAAU,kBACPH,EAAsBb,GAAW,GACnC,iBAUJE,KAAYG,IACdS,EAAAC,cAAAD,EAAAQ,SAAA,KACER,EAAAC,cAAA,MAAA,CACEC,UAAU,uBAAsB,kBACfb,IAAa,GAE9BW,EAAAC,cAACQ,GACCC,WAAYhB,EACZiB,oBAAqBf,IAErBP,EASAW,EAAAC,cAAA,MAAA,CAAKC,UAAU,mBACD,OAAXd,GACCY,EAAAC,cAAA,OAAA,CAAMC,UAAU,WACdF,EAAAC,cAACW,EAAI,CAACC,GAAG,QAAQhB,KAXvBN,EACES,EAAAC,cAAA,OAAA,CAAMC,UAAU,WAAWX,GAE3BS,EAAAC,cAAA,OAAA,CAAMC,UAAU,WACdF,EAAAC,cAACW,EAAI,CAACC,GAAG,QAAQhB,MAe5BJ,EAGP"}

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

@@ -1,2 +1,2 @@
-import e from"react";import{Avatar as t}from"../Avatar/index.js";import{StyledUserBlock as r,Details as a,Name as m,Extra as n}from"./styles.js";function l(l){var o=l.name,i=l.avatarName,u=l.avatarUrl,s=l.extra,c=l.size,v=void 0===c?"l":c,f=l.themeName,d=void 0===f?"cruk":f;return e.createElement(r,null,e.createElement(t,{name:i||("string"==typeof o?o:"Anonymous"),url:u||void 0,size:v,themeName:d}),e.createElement(a,null,e.createElement(m,null,o||"Anonymous"),!!s&&e.createElement(n,null,s)))}export{l as UserBlock,l as default};
+import e from"react";import{Avatar as a}from"../Avatar/index.js";function t(t){var m=t.name,r=t.avatarName,n=t.avatarUrl,o=t.extra,s=t.size,l=void 0===s?"l":s,c=t.themeName,i=void 0===c?"cruk":c;return e.createElement("div",{className:"component-user-block"},e.createElement(a,{name:r||("string"==typeof m?m:"Anonymous"),url:n||void 0,size:l,themeName:i}),e.createElement("div",{className:"details"},e.createElement("p",{className:"name"},m||"Anonymous"),!!o&&e.createElement("p",{className:"extra"},o)))}export{t as UserBlock,t as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/UserBlock/index.tsx"],"sourcesContent":["import React, { type ReactNode, type HTMLAttributes } from \"react\";\n\nimport { Avatar } from \"../Avatar\";\n\nimport { StyledUserBlock, Details, Name, Extra } from \"./styles\";\nimport { type ThemeNameType } from \"../../types\";\n\nexport type UserBlockProps = HTMLAttributes<HTMLElement> & {\n  /** name component or text */\n  name?: ReactNode;\n  /** string name used in avatar component */\n  avatarName?: string | null;\n  /** avatar image url */\n  avatarUrl?: string | null;\n  /** extra content component appears underneath name */\n  extra?: ReactNode;\n  /** size of avatar component */\n  size?: \"s\" | \"m\" | \"l\" | \"xl\";\n  themeName: ThemeNameType;\n};\n\n/**\n * Display an avatar with title and subtitle\n */\nexport function UserBlock({\n  name,\n  avatarName,\n  avatarUrl,\n  extra,\n  size = \"l\",\n  themeName = \"cruk\",\n}: UserBlockProps) {\n  // name is a reserved html prop so we make sure we don't pass it into the styled component\n  // or it will end up in the markup\n  return (\n    <StyledUserBlock>\n      <Avatar\n        name={avatarName || (typeof name === \"string\" ? name : \"Anonymous\")}\n        url={avatarUrl || undefined}\n        size={size}\n        themeName={themeName}\n      />\n      <Details>\n        <Name>{name || \"Anonymous\"}</Name>\n        {!!extra && <Extra>{extra}</Extra>}\n      </Details>\n    </StyledUserBlock>\n  );\n}\n\nexport default UserBlock;\n"],"names":["UserBlock","_a","name","avatarName","avatarUrl","extra","_b","size","_c","themeName","React","StyledUserBlock","createElement","Avatar","url","undefined","Details","Name","Extra"],"mappings":"iJAwBM,SAAUA,EAAUC,OACxBC,EAAID,EAAAC,KACJC,EAAUF,EAAAE,WACVC,EAASH,EAAAG,UACTC,EAAKJ,EAAAI,MACLC,SAAAC,OAAI,IAAAD,EAAG,IAAGA,EACVE,cAAAC,OAAS,IAAAD,EAAG,OAAMA,EAIlB,OACEE,gBAACC,EAAe,KACdD,EAAAE,cAACC,EAAM,CACLX,KAAMC,IAA+B,iBAATD,EAAoBA,EAAO,aACvDY,IAAKV,QAAaW,EAClBR,KAAMA,EACNE,UAAWA,IAEbC,EAAAE,cAACI,EAAO,KACNN,EAAAE,cAACK,EAAI,KAAEf,GAAQ,eACZG,GAASK,EAAAE,cAACM,EAAK,KAAEb,IAI5B"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/UserBlock/index.tsx"],"sourcesContent":["import React, { type ReactNode, type HTMLAttributes } from \"react\";\n\nimport { Avatar } from \"../Avatar\";\n\nimport { type ThemeNameType } from \"../../types\";\n\nexport type UserBlockProps = HTMLAttributes<HTMLElement> & {\n  /** name component or text */\n  name?: ReactNode;\n  /** string name used in avatar component */\n  avatarName?: string | null;\n  /** avatar image url */\n  avatarUrl?: string | null;\n  /** extra content component appears underneath name */\n  extra?: ReactNode;\n  /** size of avatar component */\n  size?: \"s\" | \"m\" | \"l\" | \"xl\";\n  themeName: ThemeNameType;\n};\n\n/**\n * Display an avatar with title and subtitle\n */\nexport function UserBlock({\n  name,\n  avatarName,\n  avatarUrl,\n  extra,\n  size = \"l\",\n  themeName = \"cruk\",\n}: UserBlockProps) {\n  // name is a reserved html prop so we make sure we don't pass it into the styled component\n  // or it will end up in the markup\n  return (\n    <div className=\"component-user-block\">\n      <Avatar\n        name={avatarName || (typeof name === \"string\" ? name : \"Anonymous\")}\n        url={avatarUrl || undefined}\n        size={size}\n        themeName={themeName}\n      />\n      <div className=\"details\">\n        <p className=\"name\">{name || \"Anonymous\"}</p>\n        {!!extra && <p className=\"extra\">{extra}</p>}\n      </div>\n    </div>\n  );\n}\n\nexport default UserBlock;\n"],"names":["UserBlock","_a","name","avatarName","avatarUrl","extra","_b","size","_c","themeName","React","createElement","className","Avatar","url","undefined"],"mappings":"iEAuBM,SAAUA,EAAUC,OACxBC,EAAID,EAAAC,KACJC,EAAUF,EAAAE,WACVC,EAASH,EAAAG,UACTC,EAAKJ,EAAAI,MACLC,SAAAC,OAAI,IAAAD,EAAG,IAAGA,EACVE,cAAAC,OAAS,IAAAD,EAAG,OAAMA,EAIlB,OACEE,EAAAC,cAAA,MAAA,CAAKC,UAAU,wBACbF,EAAAC,cAACE,EAAM,CACLX,KAAMC,IAA+B,iBAATD,EAAoBA,EAAO,aACvDY,IAAKV,QAAaW,EAClBR,KAAMA,EACNE,UAAWA,IAEbC,EAAAC,cAAA,MAAA,CAAKC,UAAU,WACbF,EAAAC,cAAA,IAAA,CAAGC,UAAU,QAAQV,GAAQ,eAC1BG,GAASK,EAAAC,cAAA,IAAA,CAAGC,UAAU,SAASP,IAI1C"}

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

@@ -1,35 +1,66 @@
 import "./global-styles.css";
 export { AddressLookup } from "./AddressLookup";
+import "./AddressLookup/styles.css";
 export { Avatar } from "./Avatar";
+import "./Avatar/styles.css";
 export { Badge } from "./Badge";
+import "./Badge/styles.css";
 export { Box } from "./Box";
+import "./Box/styles.css";
 export { Button } from "./Button";
+import "./Button/styles.css";
 export { Carousel } from "./Carousel";
+import "./Carousel/styles.css";
 export { Checkbox } from "./Checkbox";
+import "./Checkbox/styles.css";
 export { Collapse } from "./Collapse";
+import "./Collapse/styles.css";
 export { DateField } from "./DateField";
-export { Divider } from "./Divider";
+import "./DateField/styles.css";
 export { ErrorText } from "./ErrorText";
+import "./ErrorText/styles.css";
 export { Footer } from "./Footer";
+import "./Footer/styles.css";
 export { Header } from "./Header";
+import "./Header/styles.css";
 export { Heading } from "./Heading";
+import "./Heading/styles.css";
 export { IconFa } from "./IconFa";
+import "./IconFa/styles.css";
+export { InfoBox } from "./InfoBox";
+import "./InfoBox/styles.css";
 export { LabelWrapper } from "./LabelWrapper";
+import "./LabelWrapper/styles.css";
 export { LegendWrapper } from "./LegendWrapper";
+import "./LegendWrapper/styles.css";
 export { Link } from "./Link";
+import "./Link/styles.css";
 export { Loader } from "./Loader";
+import "./Loader/styles.css";
 export { Modal } from "./Modal";
+import "./Modal/styles.css";
 export { Pagination } from "./Pagination";
+import "./Pagination/styles.css";
 export { PopOver } from "./PopOver";
+import "./PopOver/styles.css";
 export { ProgressBar } from "./ProgressBar";
+import "./ProgressBar/styles.css";
 export { Radio } from "./Radio";
+import "./Radio/styles.css";
 export { RadioConsent } from "./RadioConsent";
+import "./RadioConsent/styles.css";
 export { Select } from "./Select";
+import "./Select/styles.css";
 export { Step } from "./Step";
+import "./Step/styles.css";
 export { Text } from "./Text";
+import "./Text/styles.css";
 export { TextAreaField } from "./TextAreaField";
+import "./TextAreaField/styles.css";
 export { TextField } from "./TextField";
+import "./TextField/styles.css";
 export { Totaliser } from "./Totaliser";
+import "./Totaliser/styles.css";
 export { UserBlock } from "./UserBlock";
-export { InfoBox } from "./InfoBox";
+import "./UserBlock/styles.css";
 export * from "../types";

package/lib/src/components/index.js

@@ -1,2 +1,2 @@
-export{AddressLookup}from"./AddressLookup/index.js";export{Avatar}from"./Avatar/index.js";export{Badge}from"./Badge/index.js";export{Box}from"./Box/index.js";export{Button}from"./Button/index.js";export{Carousel}from"./Carousel/index.js";export{Checkbox}from"./Checkbox/index.js";export{Collapse}from"./Collapse/index.js";export{DateField}from"./DateField/index.js";export{Divider}from"./Divider.js";export{ErrorText}from"./ErrorText/index.js";export{Footer}from"./Footer/index.js";export{Header}from"./Header/index.js";export{Heading}from"./Heading/index.js";export{IconFa}from"./IconFa/index.js";export{LabelWrapper}from"./LabelWrapper/index.js";export{LegendWrapper}from"./LegendWrapper/index.js";export{Link}from"./Link/index.js";export{Loader}from"./Loader/index.js";export{Modal}from"./Modal/index.js";export{Pagination}from"./Pagination/index.js";export{PopOver}from"./PopOver/index.js";export{ProgressBar}from"./ProgressBar/index.js";export{Radio}from"./Radio/index.js";export{RadioConsent}from"./RadioConsent/index.js";export{Select}from"./Select/index.js";export{Step}from"./Step/index.js";export{Text}from"./Text/index.js";export{TextAreaField}from"./TextAreaField/index.js";export{TextField}from"./TextField/index.js";export{Totaliser}from"./Totaliser/index.js";export{UserBlock}from"./UserBlock/index.js";export{InfoBox}from"./InfoBox/index.js";export{colours,fontSizes,spaces,themeNames}from"../types.js";
+export{AddressLookup}from"./AddressLookup/index.js";export{Avatar}from"./Avatar/index.js";export{Badge}from"./Badge/index.js";export{Box}from"./Box/index.js";export{Button}from"./Button/index.js";export{Carousel}from"./Carousel/index.js";export{Checkbox}from"./Checkbox/index.js";export{Collapse}from"./Collapse/index.js";export{DateField}from"./DateField/index.js";export{ErrorText}from"./ErrorText/index.js";export{Footer}from"./Footer/index.js";export{Header}from"./Header/index.js";export{Heading}from"./Heading/index.js";export{IconFa}from"./IconFa/index.js";export{InfoBox}from"./InfoBox/index.js";export{LabelWrapper}from"./LabelWrapper/index.js";export{LegendWrapper}from"./LegendWrapper/index.js";export{Link}from"./Link/index.js";export{Loader}from"./Loader/index.js";export{Modal}from"./Modal/index.js";export{Pagination}from"./Pagination/index.js";export{PopOver}from"./PopOver/index.js";export{ProgressBar}from"./ProgressBar/index.js";export{Radio}from"./Radio/index.js";export{RadioConsent}from"./RadioConsent/index.js";export{Select}from"./Select/index.js";export{Step}from"./Step/index.js";export{Text}from"./Text/index.js";export{TextAreaField}from"./TextAreaField/index.js";export{TextField}from"./TextField/index.js";export{Totaliser}from"./Totaliser/index.js";export{UserBlock}from"./UserBlock/index.js";export{colours,fontAligns,fontFamilyStyles,fontSizes,fontWeights,overflowWraps,spaces,themeNames,wordBreaks}from"../types.js";
 //# sourceMappingURL=index.js.map

package/lib/src/types.d.ts

@@ -12,6 +12,30 @@ export type BreakPointType = {
 };
 export declare const spaces: readonly ["auto", "xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "none"];
 export type SpaceType = (typeof spaces)[number];
+export type SpacingProps = {
+    margin?: SpaceType;
+    marginTop?: SpaceType;
+    marginRight?: SpaceType;
+    marginBottom?: SpaceType;
+    marginLeft?: SpaceType;
+    marginVertical?: SpaceType;
+    marginHorizontal?: SpaceType;
+    padding?: SpaceType;
+    paddingTop?: SpaceType;
+    paddingRight?: SpaceType;
+    paddingBottom?: SpaceType;
+    paddingLeft?: SpaceType;
+    paddingVertical?: SpaceType;
+    paddingHorizontal?: SpaceType;
+};
+export type TextProps = {
+    textSize?: FontSizeType;
+    textAlign?: FontAlignType;
+    textWeight?: FontWeightType;
+    textFontFamily?: FontFamilyStylesType;
+    wordBreak?: WordBreakType;
+    overflowWrap?: OverflowWrapType;
+};
 export type ShadowsType = {
     s: string;
     m: string;
@@ -75,8 +99,17 @@ export type AddressDataType = {
     SubBuilding: string;
     Type: string;
 };
-export declare const colours: readonly ["primary", "secondary", "tertiary", "text-on-primary", "text-on-secondary", "text-on-tertiary", "text-header-default", "disabled", "danger", "warning", "success", "info", "text-error", "text-dark", "text-light", "text-mid", "sports-activity", "link", "link-hover", "link-secondary", "link-secondary-hover", "avatar-border", "progress-bar", "progress-bar-secondary", "progress-bar-background", "circular-progress", "circular-progress-secondary", "circular-progress-background", "button-primary-background", "button-primary-text", "button-primary-border", "button-primary-background-hover", "button-primary-text-hover", "button-primary-border-hover", "button-primary-disabled-background", "button-primary-disabled-text", "button-primary-disabled-border", "button-secondary-background", "button-secondary-text", "button-secondary-border", "button-secondary-background-hover", "button-secondary-text-hover", "button-secondary-border-hover", "button-secondary-disabled-background", "button-secondary-disabled-text", "button-secondary-disabled-border", "button-tertiary-text", "button-tertiary-text-hover", "button-tertiary-disabled-text", "collapse-header", "selection-border", "input-border", "check", "header-background", "background-light", "background-light-color", "background-mid", "background-mid-light", "loader-color-1", "loader-color-2", "loader-color-3", "pagination-text", "pagination-background", "pagination-active", "footer-background", "header-border", "header-tagline-text", "step-border", "step-background", "popover-background", "text-input-extra-info", "totaliser-bubble", "totaliser-bubble-text", "totaliser-bubble-total", "text-input-border", "select-background", "modal-backdrop", "user-block-extra-text"];
+export declare const colours: readonly ["currentColor", "primary", "secondary", "tertiary", "text-on-primary", "text-on-secondary", "text-on-tertiary", "disabled", "danger", "warning", "success", "info", "sports-activity", "text-dark", "text-light", "text-mid", "background-light", "background-light-color", "background-mid", "background-mid-light"];
 export type ColourVariableType = (typeof colours)[number];
+export type ColourProps = {
+    textColor?: ColourVariableType;
+    backgroundColor?: ColourVariableType;
+    borderColor?: ColourVariableType;
+};
+export declare const fontFamilyStyles: readonly ["base", "headings", "links", "buttons", "label"];
+export type FontFamilyStylesType = (typeof fontFamilyStyles)[number];
+export declare const fontWeights: readonly ["base", "headings", "links", "buttons", "labels", "heavy", "medium", "normal", "light", "vlight"];
+export type FontWeightType = (typeof fontWeights)[number];
 export type AddressOptionsType = {
     Description: string;
     Type: string;
@@ -84,5 +117,9 @@ export type AddressOptionsType = {
     Text: string;
     Error?: Error;
 };
-export type WordBreakType = "normal" | "break-all" | "keep-all" | "break-word" | "inherit" | "initial" | "unset";
-export type OverflowWrapType = "normal" | "anywhere" | "revert" | "revert-layer" | "break-word" | "inherit" | "initial" | "unset";
+export declare const wordBreaks: readonly ["normal", "break-all", "keep-all", "break-word", "inherit", "initial", "unset"];
+export type WordBreakType = (typeof wordBreaks)[number];
+export declare const overflowWraps: readonly ["normal", "anywhere", "revert", "revert-layer", "break-word", "inherit", "initial", "unset"];
+export type OverflowWrapType = (typeof overflowWraps)[number];
+export declare const fontAligns: readonly ["left", "right", "center", "justify"];
+export type FontAlignType = (typeof fontAligns)[number];

package/lib/src/types.js

@@ -1,2 +1,2 @@
-var r=["xs","s","m","ml","l","xl","xxl","xxxl","xxxxl"],t=["cruk","su2c","bowelbabe","rfl"],e=["auto","xxxs","xxs","xs","s","m","l","xl","xxl","none"],o=["primary","secondary","tertiary","text-on-primary","text-on-secondary","text-on-tertiary","text-header-default","disabled","danger","warning","success","info","text-error","text-dark","text-light","text-mid","sports-activity","link","link-hover","link-secondary","link-secondary-hover","avatar-border","progress-bar","progress-bar-secondary","progress-bar-background","circular-progress","circular-progress-secondary","circular-progress-background","button-primary-background","button-primary-text","button-primary-border","button-primary-background-hover","button-primary-text-hover","button-primary-border-hover","button-primary-disabled-background","button-primary-disabled-text","button-primary-disabled-border","button-secondary-background","button-secondary-text","button-secondary-border","button-secondary-background-hover","button-secondary-text-hover","button-secondary-border-hover","button-secondary-disabled-background","button-secondary-disabled-text","button-secondary-disabled-border","button-tertiary-text","button-tertiary-text-hover","button-tertiary-disabled-text","collapse-header","selection-border","input-border","check","header-background","background-light","background-light-color","background-mid","background-mid-light","loader-color-1","loader-color-2","loader-color-3","pagination-text","pagination-background","pagination-active","footer-background","header-border","header-tagline-text","step-border","step-background","popover-background","text-input-extra-info","totaliser-bubble","totaliser-bubble-text","totaliser-bubble-total","text-input-border","select-background","modal-backdrop","user-block-extra-text"];export{o as colours,r as fontSizes,e as spaces,t as themeNames};
+var e=["xs","s","m","ml","l","xl","xxl","xxxl","xxxxl"],r=["cruk","su2c","bowelbabe","rfl"],t=["auto","xxxs","xxs","xs","s","m","l","xl","xxl","none"],a=["currentColor","primary","secondary","tertiary","text-on-primary","text-on-secondary","text-on-tertiary","disabled","danger","warning","success","info","sports-activity","text-dark","text-light","text-mid","background-light","background-light-color","background-mid","background-mid-light"],l=["base","headings","links","buttons","label"],i=["base","headings","links","buttons","labels","heavy","medium","normal","light","vlight"],n=["normal","break-all","keep-all","break-word","inherit","initial","unset"],s=["normal","anywhere","revert","revert-layer","break-word","inherit","initial","unset"],x=["left","right","center","justify"];export{a as colours,x as fontAligns,l as fontFamilyStyles,e as fontSizes,i as fontWeights,s as overflowWraps,t as spaces,r as themeNames,n as wordBreaks};
 //# sourceMappingURL=types.js.map

package/lib/src/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../src/types.ts"],"sourcesContent":["export const fontSizes = [\n  \"xs\",\n  \"s\",\n  \"m\",\n  \"ml\",\n  \"l\",\n  \"xl\",\n  \"xxl\",\n  \"xxxl\",\n  \"xxxxl\",\n] as const;\n\nexport type FontSizeType = (typeof fontSizes)[number];\n\nexport const themeNames = [\"cruk\", \"su2c\", \"bowelbabe\", \"rfl\"] as const;\nexport type ThemeNameType = (typeof themeNames)[number];\n\nexport type ButtonAppearanceType = \"primary\" | \"secondary\" | \"tertiary\";\n\nexport type PopOverPositionType =\n  | \"top\"\n  | \"topLeft\"\n  | \"left\"\n  | \"right\"\n  | \"bottom\"\n  | \"bottomLeft\";\n\nexport type BreakPointType = {\n  mobile: string;\n  tablet: string;\n  desktop: string;\n  desktopLarge: string;\n};\n\nexport const spaces = [\n  \"auto\",\n  \"xxxs\",\n  \"xxs\",\n  \"xs\",\n  \"s\",\n  \"m\",\n  \"l\",\n  \"xl\",\n  \"xxl\",\n  \"none\",\n] as const;\n\nexport type SpaceType = (typeof spaces)[number];\n\nexport type ShadowsType = {\n  s: string;\n  m: string;\n  l: string;\n};\n\nexport type AddressDataType = {\n  AdminAreaCode: string;\n  AdminAreaName: string;\n  Barcode: string;\n  Block: string;\n  BuildingName: string;\n  BuildingNumber: string;\n  City: string;\n  Company: string;\n  CountryIso2: string;\n  CountryIso3: string;\n  CountryIsoNumber: string;\n  CountryName: string;\n  DataLevel: string;\n  Department: string;\n  DomesticId: string;\n  Field1: string;\n  Field10: string;\n  Field11: string;\n  Field12: string;\n  Field13: string;\n  Field14: string;\n  Field15: string;\n  Field16: string;\n  Field17: string;\n  Field18: string;\n  Field19: string;\n  Field2: string;\n  Field20: string;\n  Field3: string;\n  Field4: string;\n  Field5: string;\n  Field6: string;\n  Field7: string;\n  Field8: string;\n  Field9: string;\n  Id: string;\n  Label: string;\n  Language: string;\n  LanguageAlternatives: string;\n  Line1: string;\n  Line2: string;\n  Line3: string;\n  Line4: string;\n  Line5: string;\n  Neighbourhood: string;\n  POBoxNumber: string;\n  PostalCode: string;\n  Province: string;\n  ProvinceCode: string;\n  ProvinceName: string;\n  SecondaryStreet: string;\n  SortingNumber1: string;\n  SortingNumber2: string;\n  Street: string;\n  SubBuilding: string;\n  Type: string;\n};\n\nexport const colours = [\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"text-on-primary\",\n  \"text-on-secondary\",\n  \"text-on-tertiary\",\n  \"text-header-default\",\n\n  \"disabled\",\n  \"danger\",\n  \"warning\",\n  \"success\",\n  \"info\",\n  \"text-error\",\n  \"text-dark\",\n  \"text-light\",\n  \"text-mid\",\n  \"sports-activity\",\n\n  \"link\",\n  \"link-hover\",\n  \"link-secondary\",\n  \"link-secondary-hover\",\n\n  \"avatar-border\",\n\n  \"progress-bar\",\n  \"progress-bar-secondary\",\n  \"progress-bar-background\",\n  \"circular-progress\",\n  \"circular-progress-secondary\",\n  \"circular-progress-background\",\n\n  \"button-primary-background\",\n  \"button-primary-text\",\n  \"button-primary-border\",\n  \"button-primary-background-hover\",\n  \"button-primary-text-hover\",\n  \"button-primary-border-hover\",\n  \"button-primary-disabled-background\",\n  \"button-primary-disabled-text\",\n  \"button-primary-disabled-border\",\n\n  \"button-secondary-background\",\n  \"button-secondary-text\",\n  \"button-secondary-border\",\n  \"button-secondary-background-hover\",\n  \"button-secondary-text-hover\",\n  \"button-secondary-border-hover\",\n  \"button-secondary-disabled-background\",\n  \"button-secondary-disabled-text\",\n  \"button-secondary-disabled-border\",\n\n  \"button-tertiary-text\",\n  \"button-tertiary-text-hover\",\n  \"button-tertiary-disabled-text\",\n\n  \"collapse-header\",\n\n  \"selection-border\",\n\n  \"input-border\",\n  \"check\",\n\n  \"header-background\",\n  \"background-light\",\n  \"background-light-color\",\n  \"background-mid\",\n  \"background-mid-light\",\n\n  \"loader-color-1\",\n  \"loader-color-2\",\n  \"loader-color-3\",\n\n  \"pagination-text\",\n  \"pagination-background\",\n  \"pagination-active\",\n\n  \"footer-background\",\n\n  \"header-border\",\n  \"header-tagline-text\",\n\n  \"step-border\",\n  \"step-background\",\n\n  \"popover-background\",\n\n  \"text-input-extra-info\",\n\n  \"totaliser-bubble\",\n  \"totaliser-bubble-text\",\n  \"totaliser-bubble-total\",\n\n  \"text-input-border\",\n\n  \"select-background\",\n\n  \"modal-backdrop\",\n\n  \"user-block-extra-text\",\n] as const;\nexport type ColourVariableType = (typeof colours)[number];\n\nexport type AddressOptionsType = {\n  Description: string;\n  Type: string;\n  Id: string;\n  Text: string;\n  Error?: Error;\n};\n\nexport type WordBreakType =\n  | \"normal\"\n  | \"break-all\"\n  | \"keep-all\"\n  | \"break-word\"\n  | \"inherit\"\n  | \"initial\"\n  | \"unset\";\n\nexport type OverflowWrapType =\n  | \"normal\"\n  | \"anywhere\"\n  | \"revert\"\n  | \"revert-layer\"\n  | \"break-word\"\n  | \"inherit\"\n  | \"initial\"\n  | \"unset\";\n"],"names":["fontSizes","themeNames","spaces","colours"],"mappings":"AAAO,IAAMA,EAAY,CACvB,KACA,IACA,IACA,KACA,IACA,KACA,MACA,OACA,SAKWC,EAAa,CAAC,OAAQ,OAAQ,YAAa,OAoB3CC,EAAS,CACpB,OACA,OACA,MACA,KACA,IACA,IACA,IACA,KACA,MACA,QAsEWC,EAAU,CACrB,UACA,YACA,WACA,kBACA,oBACA,mBACA,sBAEA,WACA,SACA,UACA,UACA,OACA,aACA,YACA,aACA,WACA,kBAEA,OACA,aACA,iBACA,uBAEA,gBAEA,eACA,yBACA,0BACA,oBACA,8BACA,+BAEA,4BACA,sBACA,wBACA,kCACA,4BACA,8BACA,qCACA,+BACA,iCAEA,8BACA,wBACA,0BACA,oCACA,8BACA,gCACA,uCACA,iCACA,mCAEA,uBACA,6BACA,gCAEA,kBAEA,mBAEA,eACA,QAEA,oBACA,mBACA,yBACA,iBACA,uBAEA,iBACA,iBACA,iBAEA,kBACA,wBACA,oBAEA,oBAEA,gBACA,sBAEA,cACA,kBAEA,qBAEA,wBAEA,mBACA,wBACA,yBAEA,oBAEA,oBAEA,iBAEA"}
+{"version":3,"file":"types.js","sources":["../../src/types.ts"],"sourcesContent":["export const fontSizes = [\n  \"xs\",\n  \"s\",\n  \"m\",\n  \"ml\",\n  \"l\",\n  \"xl\",\n  \"xxl\",\n  \"xxxl\",\n  \"xxxxl\",\n] as const;\n\nexport type FontSizeType = (typeof fontSizes)[number];\n\nexport const themeNames = [\"cruk\", \"su2c\", \"bowelbabe\", \"rfl\"] as const;\nexport type ThemeNameType = (typeof themeNames)[number];\n\nexport type ButtonAppearanceType = \"primary\" | \"secondary\" | \"tertiary\";\n\nexport type PopOverPositionType =\n  | \"top\"\n  | \"topLeft\"\n  | \"left\"\n  | \"right\"\n  | \"bottom\"\n  | \"bottomLeft\";\n\nexport type BreakPointType = {\n  mobile: string;\n  tablet: string;\n  desktop: string;\n  desktopLarge: string;\n};\n\nexport const spaces = [\n  \"auto\",\n  \"xxxs\",\n  \"xxs\",\n  \"xs\",\n  \"s\",\n  \"m\",\n  \"l\",\n  \"xl\",\n  \"xxl\",\n  \"none\",\n] as const;\n\nexport type SpaceType = (typeof spaces)[number];\n\nexport type SpacingProps = {\n  margin?: SpaceType;\n  marginTop?: SpaceType;\n  marginRight?: SpaceType;\n  marginBottom?: SpaceType;\n  marginLeft?: SpaceType;\n  marginVertical?: SpaceType;\n  marginHorizontal?: SpaceType;\n  padding?: SpaceType;\n  paddingTop?: SpaceType;\n  paddingRight?: SpaceType;\n  paddingBottom?: SpaceType;\n  paddingLeft?: SpaceType;\n  paddingVertical?: SpaceType;\n  paddingHorizontal?: SpaceType;\n};\n\nexport type TextProps = {\n  textSize?: FontSizeType;\n  textAlign?: FontAlignType;\n  textWeight?: FontWeightType;\n  textFontFamily?: FontFamilyStylesType;\n  wordBreak?: WordBreakType;\n  overflowWrap?: OverflowWrapType;\n};\n\nexport type ShadowsType = {\n  s: string;\n  m: string;\n  l: string;\n};\n\nexport type AddressDataType = {\n  AdminAreaCode: string;\n  AdminAreaName: string;\n  Barcode: string;\n  Block: string;\n  BuildingName: string;\n  BuildingNumber: string;\n  City: string;\n  Company: string;\n  CountryIso2: string;\n  CountryIso3: string;\n  CountryIsoNumber: string;\n  CountryName: string;\n  DataLevel: string;\n  Department: string;\n  DomesticId: string;\n  Field1: string;\n  Field10: string;\n  Field11: string;\n  Field12: string;\n  Field13: string;\n  Field14: string;\n  Field15: string;\n  Field16: string;\n  Field17: string;\n  Field18: string;\n  Field19: string;\n  Field2: string;\n  Field20: string;\n  Field3: string;\n  Field4: string;\n  Field5: string;\n  Field6: string;\n  Field7: string;\n  Field8: string;\n  Field9: string;\n  Id: string;\n  Label: string;\n  Language: string;\n  LanguageAlternatives: string;\n  Line1: string;\n  Line2: string;\n  Line3: string;\n  Line4: string;\n  Line5: string;\n  Neighbourhood: string;\n  POBoxNumber: string;\n  PostalCode: string;\n  Province: string;\n  ProvinceCode: string;\n  ProvinceName: string;\n  SecondaryStreet: string;\n  SortingNumber1: string;\n  SortingNumber2: string;\n  Street: string;\n  SubBuilding: string;\n  Type: string;\n};\n\nexport const colours = [\n  // Generic colours\n\n  \"currentColor\",\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n\n  \"text-on-primary\",\n  \"text-on-secondary\",\n  \"text-on-tertiary\",\n\n  \"disabled\",\n  \"danger\",\n  \"warning\",\n  \"success\",\n  \"info\",\n  \"sports-activity\",\n\n  \"text-dark\",\n  \"text-light\",\n  \"text-mid\",\n\n  \"background-light\",\n  \"background-light-color\",\n  \"background-mid\",\n  \"background-mid-light\",\n] as const;\n\nexport type ColourVariableType = (typeof colours)[number];\n\nexport type ColourProps = {\n  textColor?: ColourVariableType;\n  backgroundColor?: ColourVariableType;\n  borderColor?: ColourVariableType;\n};\n\nexport const fontFamilyStyles = [\n  \"base\",\n  \"headings\",\n  \"links\",\n  \"buttons\",\n  \"label\",\n] as const;\n\nexport type FontFamilyStylesType = (typeof fontFamilyStyles)[number];\n\nexport const fontWeights = [\n  \"base\",\n  \"headings\",\n\n  \"links\",\n  \"buttons\",\n  \"labels\",\n\n  \"heavy\",\n  \"medium\",\n  \"normal\",\n  \"light\",\n  \"vlight\",\n] as const;\n\nexport type FontWeightType = (typeof fontWeights)[number];\n\nexport type AddressOptionsType = {\n  Description: string;\n  Type: string;\n  Id: string;\n  Text: string;\n  Error?: Error;\n};\n\nexport const wordBreaks = [\n  \"normal\",\n  \"break-all\",\n  \"keep-all\",\n  \"break-word\",\n  \"inherit\",\n  \"initial\",\n  \"unset\",\n] as const;\n\nexport type WordBreakType = (typeof wordBreaks)[number];\n\nexport const overflowWraps = [\n  \"normal\",\n  \"anywhere\",\n  \"revert\",\n  \"revert-layer\",\n  \"break-word\",\n  \"inherit\",\n  \"initial\",\n  \"unset\",\n] as const;\n\nexport type OverflowWrapType = (typeof overflowWraps)[number];\n\nexport const fontAligns = [\"left\", \"right\", \"center\", \"justify\"] as const;\n\nexport type FontAlignType = (typeof fontAligns)[number];\n"],"names":["fontSizes","themeNames","spaces","colours","fontFamilyStyles","fontWeights","wordBreaks","overflowWraps","fontAligns"],"mappings":"AAAO,IAAMA,EAAY,CACvB,KACA,IACA,IACA,KACA,IACA,KACA,MACA,OACA,SAKWC,EAAa,CAAC,OAAQ,OAAQ,YAAa,OAoB3CC,EAAS,CACpB,OACA,OACA,MACA,KACA,IACA,IACA,IACA,KACA,MACA,QAgGWC,EAAU,CAGrB,eACA,UACA,YACA,WAEA,kBACA,oBACA,mBAEA,WACA,SACA,UACA,UACA,OACA,kBAEA,YACA,aACA,WAEA,mBACA,yBACA,iBACA,wBAWWC,EAAmB,CAC9B,OACA,WACA,QACA,UACA,SAKWC,EAAc,CACzB,OACA,WAEA,QACA,UACA,SAEA,QACA,SACA,SACA,QACA,UAaWC,EAAa,CACxB,SACA,YACA,WACA,aACA,UACA,UACA,SAKWC,EAAgB,CAC3B,SACA,WACA,SACA,eACA,aACA,UACA,UACA,SAKWC,EAAa,CAAC,OAAQ,QAAS,SAAU"}

package/lib/src/utils/Helper.d.ts

@@ -5,3 +5,6 @@ export declare const numberWithCommas: (n?: number | string) => string;
 export declare const formatMoneyWithCommas: (value: number) => string;
 export declare const camelize: (str: string) => string;
 export declare const removeCommasFromObjectStringValues: <T>(object: T) => T;
+export declare function removeEmpty(obj: Record<string, unknown>): {
+    [k: string]: unknown;
+};

package/lib/src/utils/Helper.js

@@ -1,2 +1,2 @@
-import{__assign as r}from"../../node_modules/tslib/tslib.es6.js";var t="undefined"!=typeof window,e=function(r,t){var e=r/t*100;return e===Number.POSITIVE_INFINITY||Number.isNaN(e)?0:Math.floor(e<1?Math.ceil(e):Math.floor(e))},n=function(r){if(!r)return"";var t=r.toString().split(".");return"".concat(t[0].replace(/\B(?=(\d{3})+(?!\d))/g,",")).concat(t[1]?".".concat(t[1]):"")},o=function(r){var t=Number.parseFloat((Math.round(100*r)/100).toString()).toFixed(2);return Number.isNaN(parseFloat(t))||Number.isNaN(r)?"0":n(t)},a=function(t){return Object.entries(t).reduce(function(t,e){var n,o=e[0],a=e[1],i="string"==typeof a?a.replace(/,/g,""):a;return r(r({},t),((n={})[o]=i,n))},{})};export{e as calculatePercentRounded,o as formatMoneyWithCommas,t as isBrowser,n as numberWithCommas,a as removeCommasFromObjectStringValues};
+import{__assign as r}from"../../node_modules/tslib/tslib.es6.js";var t="undefined"!=typeof window,e=function(r,t){var e=r/t*100;return e===Number.POSITIVE_INFINITY||Number.isNaN(e)?0:Math.floor(e<1?Math.ceil(e):Math.floor(e))},n=function(r){if(!r)return"";var t=r.toString().split(".");return"".concat(t[0].replace(/\B(?=(\d{3})+(?!\d))/g,",")).concat(t[1]?".".concat(t[1]):"")},o=function(r){var t=Number.parseFloat((Math.round(100*r)/100).toString()).toFixed(2);return Number.isNaN(parseFloat(t))||Number.isNaN(r)?"0":n(t)},i=function(t){return Object.entries(t).reduce(function(t,e){var n,o=e[0],i=e[1],u="string"==typeof i?i.replace(/,/g,""):i;return r(r({},t),((n={})[o]=u,n))},{})};function u(r){return Object.fromEntries(Object.entries(r).filter(function(r){return r[0],null!=r[1]}))}export{e as calculatePercentRounded,o as formatMoneyWithCommas,t as isBrowser,n as numberWithCommas,i as removeCommasFromObjectStringValues,u as removeEmpty};
 //# sourceMappingURL=Helper.js.map

package/lib/src/utils/Helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Helper.js","sources":["../../../src/utils/Helper.ts"],"sourcesContent":["export const isBrowser = typeof window !== \"undefined\";\n\nexport const calculatePercentRounded = (\n  value: number,\n  target: number,\n): number => {\n  const percent = (value / target) * 100;\n  if (percent === Number.POSITIVE_INFINITY || Number.isNaN(percent)) {\n    return 0;\n  }\n  return Math.floor(percent < 1 ? Math.ceil(percent) : Math.floor(percent));\n};\n\nexport const formatMoney = (value: number): string => {\n  const parsed = Number.parseFloat(\n    (Math.round(value * 100) / 100).toString(),\n  ).toFixed(2);\n  if (Number.isNaN(parseFloat(parsed)) || Number.isNaN(value)) {\n    return \"0\";\n  }\n  return parsed;\n};\n\nexport const numberWithCommas = (n?: number | string): string => {\n  if (!n) {\n    return \"\";\n  }\n  const parts = n.toString().split(\".\");\n\n  return `${parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}${\n    parts[1] ? `.${parts[1]}` : \"\"\n  }`;\n};\n\nexport const formatMoneyWithCommas = (value: number): string => {\n  const parsed = Number.parseFloat(\n    (Math.round(value * 100) / 100).toString(),\n  ).toFixed(2);\n  if (Number.isNaN(parseFloat(parsed)) || Number.isNaN(value)) {\n    return \"0\";\n  }\n  return numberWithCommas(parsed);\n};\n\nexport const camelize = (str: string): string =>\n  str\n    .toString()\n    .replace(/(?:^\\w|[A-Z]|\\b\\w)/g, (word: string, index: number) =>\n      index === 0 ? word.toLowerCase() : word.toUpperCase(),\n    )\n    .replace(/\\s+/g, \"\");\n\nexport const removeCommasFromObjectStringValues = <T>(object: T) =>\n  Object.entries(object as Record<string, unknown>).reduce((acc, [k, v]) => {\n    const value = typeof v === \"string\" ? v.replace(/,/g, \"\") : v;\n    return {\n      ...acc,\n      [k as keyof T]: value,\n    };\n  }, {} as T);\n"],"names":["isBrowser","window","calculatePercentRounded","value","target","percent","Number","POSITIVE_INFINITY","isNaN","Math","floor","ceil","numberWithCommas","n","parts","toString","split","concat","replace","formatMoneyWithCommas","parsed","parseFloat","round","toFixed","removeCommasFromObjectStringValues","object","Object","entries","reduce","acc","_a","k","v","__assign","_b"],"mappings":"qEAAaA,EAA8B,oBAAXC,OAEnBC,EAA0B,SACrCC,EACAC,GAEA,IAAMC,EAAWF,EAAQC,EAAU,IACnC,OAAIC,IAAYC,OAAOC,mBAAqBD,OAAOE,MAAMH,GAChD,EAEFI,KAAKC,MAAML,EAAU,EAAII,KAAKE,KAAKN,GAAWI,KAAKC,MAAML,GAClE,EAYaO,EAAmB,SAACC,GAC/B,IAAKA,EACH,MAAO,GAET,IAAMC,EAAQD,EAAEE,WAAWC,MAAM,KAEjC,MAAO,GAAAC,OAAGH,EAAM,GAAGI,QAAQ,wBAAyB,aAClDJ,EAAM,GAAK,IAAAG,OAAIH,EAAM,IAAO,GAEhC,EAEaK,EAAwB,SAAChB,GACpC,IAAMiB,EAASd,OAAOe,YACnBZ,KAAKa,MAAc,IAARnB,GAAe,KAAKY,YAChCQ,QAAQ,GACV,OAAIjB,OAAOE,MAAMa,WAAWD,KAAYd,OAAOE,MAAML,GAC5C,IAEFS,EAAiBQ,EAC1B,EAUaI,EAAqC,SAAIC,GACpD,OAAAC,OAAOC,QAAQF,GAAmCG,OAAO,SAACC,EAAKC,SAACC,EAACD,EAAA,GAAEE,EAACF,EAAA,GAC5D3B,EAAqB,iBAAN6B,EAAiBA,EAAEd,QAAQ,KAAM,IAAMc,EAC5D,OAAAC,EAAAA,EAAA,CAAA,EACKJ,KAAGK,EAAA,CAAA,GACLH,GAAe5B,EAAK+B,GAEzB,EAAG,CAAA,EANH"}
+{"version":3,"file":"Helper.js","sources":["../../../src/utils/Helper.ts"],"sourcesContent":["export const isBrowser = typeof window !== \"undefined\";\n\nexport const calculatePercentRounded = (\n  value: number,\n  target: number,\n): number => {\n  const percent = (value / target) * 100;\n  if (percent === Number.POSITIVE_INFINITY || Number.isNaN(percent)) {\n    return 0;\n  }\n  return Math.floor(percent < 1 ? Math.ceil(percent) : Math.floor(percent));\n};\n\nexport const formatMoney = (value: number): string => {\n  const parsed = Number.parseFloat(\n    (Math.round(value * 100) / 100).toString(),\n  ).toFixed(2);\n  if (Number.isNaN(parseFloat(parsed)) || Number.isNaN(value)) {\n    return \"0\";\n  }\n  return parsed;\n};\n\nexport const numberWithCommas = (n?: number | string): string => {\n  if (!n) {\n    return \"\";\n  }\n  const parts = n.toString().split(\".\");\n\n  return `${parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}${\n    parts[1] ? `.${parts[1]}` : \"\"\n  }`;\n};\n\nexport const formatMoneyWithCommas = (value: number): string => {\n  const parsed = Number.parseFloat(\n    (Math.round(value * 100) / 100).toString(),\n  ).toFixed(2);\n  if (Number.isNaN(parseFloat(parsed)) || Number.isNaN(value)) {\n    return \"0\";\n  }\n  return numberWithCommas(parsed);\n};\n\nexport const camelize = (str: string): string =>\n  str\n    .toString()\n    .replace(/(?:^\\w|[A-Z]|\\b\\w)/g, (word: string, index: number) =>\n      index === 0 ? word.toLowerCase() : word.toUpperCase(),\n    )\n    .replace(/\\s+/g, \"\");\n\nexport const removeCommasFromObjectStringValues = <T>(object: T) =>\n  Object.entries(object as Record<string, unknown>).reduce((acc, [k, v]) => {\n    const value = typeof v === \"string\" ? v.replace(/,/g, \"\") : v;\n    return {\n      ...acc,\n      [k as keyof T]: value,\n    };\n  }, {} as T);\n\n// Removes keys with undefined or null values from an object\n// this is useful for filtering props before passing them to an HTML element to keep the DOM minimal\nexport function removeEmpty(obj: Record<string, unknown>) {\n  return Object.fromEntries(\n    Object.entries(obj).filter(([_, v]) => v != undefined),\n  );\n}\n"],"names":["isBrowser","window","calculatePercentRounded","value","target","percent","Number","POSITIVE_INFINITY","isNaN","Math","floor","ceil","numberWithCommas","n","parts","toString","split","concat","replace","formatMoneyWithCommas","parsed","parseFloat","round","toFixed","removeCommasFromObjectStringValues","object","Object","entries","reduce","acc","_a","k","v","__assign","_b","removeEmpty","obj","fromEntries","filter","undefined"],"mappings":"qEAAaA,EAA8B,oBAAXC,OAEnBC,EAA0B,SACrCC,EACAC,GAEA,IAAMC,EAAWF,EAAQC,EAAU,IACnC,OAAIC,IAAYC,OAAOC,mBAAqBD,OAAOE,MAAMH,GAChD,EAEFI,KAAKC,MAAML,EAAU,EAAII,KAAKE,KAAKN,GAAWI,KAAKC,MAAML,GAClE,EAYaO,EAAmB,SAACC,GAC/B,IAAKA,EACH,MAAO,GAET,IAAMC,EAAQD,EAAEE,WAAWC,MAAM,KAEjC,MAAO,GAAAC,OAAGH,EAAM,GAAGI,QAAQ,wBAAyB,aAClDJ,EAAM,GAAK,IAAAG,OAAIH,EAAM,IAAO,GAEhC,EAEaK,EAAwB,SAAChB,GACpC,IAAMiB,EAASd,OAAOe,YACnBZ,KAAKa,MAAc,IAARnB,GAAe,KAAKY,YAChCQ,QAAQ,GACV,OAAIjB,OAAOE,MAAMa,WAAWD,KAAYd,OAAOE,MAAML,GAC5C,IAEFS,EAAiBQ,EAC1B,EAUaI,EAAqC,SAAIC,GACpD,OAAAC,OAAOC,QAAQF,GAAmCG,OAAO,SAACC,EAAKC,SAACC,EAACD,EAAA,GAAEE,EAACF,EAAA,GAC5D3B,EAAqB,iBAAN6B,EAAiBA,EAAEd,QAAQ,KAAM,IAAMc,EAC5D,OAAAC,EAAAA,EAAA,CAAA,EACKJ,KAAGK,EAAA,CAAA,GACLH,GAAe5B,EAAK+B,GAEzB,EAAG,CAAA,EANH,EAUI,SAAUC,EAAYC,GAC1B,OAAOV,OAAOW,YACZX,OAAOC,QAAQS,GAAKE,OAAO,SAACR,GAAW,OAATA,EAAA,GAAcS,MAAXT,EAAA,EAAM,GAE3C"}

package/lib/src/utils/themeUtils.js

@@ -1,2 +1,2 @@
-import{colours as n,spaces as r,fontSizes as c}from"../types.js";var t=function(n){return r.includes(n)?"var(--spacing-".concat(n,")"):n},o=function(n){return c.includes(n)?"var(--font-size-".concat(n,")"):n},e=function(r){return n.includes(r)?"var(--clr-".concat(r,")"):r||"currentColor"};export{e as themeColorOrString,o as themeFontSizeOrString,t as themeSpacingSizeOrString};
+import{spaces as r,colours as n}from"../types.js";var c=function(n){return r.includes(n)?"var(--spacing-".concat(n,")"):n},t=function(r){return n.includes(r)?"var(--clr-".concat(r,")"):r||"currentColor"};export{t as themeColorOrString,c as themeSpacingSizeOrString};
 //# sourceMappingURL=themeUtils.js.map

package/lib/src/utils/themeUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeUtils.js","sources":["../../../src/utils/themeUtils.ts"],"sourcesContent":["import { spaces, colours, fontSizes } from \"../types\";\n\nexport const themeSpacingSizeOrString = (spaceString: string): string =>\n  spaces.includes(spaceString as (typeof spaces)[number])\n    ? `var(--spacing-${spaceString as (typeof spaces)[number]})`\n    : spaceString;\n\nexport const themeFontSizeOrString = (fontSizeString: string): string =>\n  fontSizes.includes(fontSizeString as (typeof fontSizes)[number])\n    ? `var(--font-size-${fontSizeString as (typeof fontSizes)[number]})`\n    : fontSizeString;\n\nexport const themeColorOrString = (\n  colorString: string | (typeof colours)[number] | undefined,\n): string =>\n  colours.includes(colorString as (typeof colours)[number])\n    ? `var(--clr-${colorString as (typeof colours)[number]})`\n    : colorString || \"currentColor\";\n"],"names":["themeSpacingSizeOrString","spaceString","spaces","includes","concat","themeFontSizeOrString","fontSizeString","fontSizes","themeColorOrString","colorString","colours"],"mappings":"iEAEO,IAAMA,EAA2B,SAACC,GACvC,OAAAC,EAAOC,SAASF,GACZ,iBAAAG,OAAiBH,EAAsC,KACvDA,CAFJ,EAIWI,EAAwB,SAACC,GACpC,OAAAC,EAAUJ,SAASG,GACf,mBAAAF,OAAmBE,EAA4C,KAC/DA,CAFJ,EAIWE,EAAqB,SAChCC,GAEA,OAAAC,EAAQP,SAASM,GACb,aAAAL,OAAaK,EAAuC,KACpDA,GAAe,cAFnB"}
+{"version":3,"file":"themeUtils.js","sources":["../../../src/utils/themeUtils.ts"],"sourcesContent":["import { spaces, colours, fontSizes } from \"../types\";\n\nexport const themeSpacingSizeOrString = (spaceString: string): string =>\n  spaces.includes(spaceString as (typeof spaces)[number])\n    ? `var(--spacing-${spaceString as (typeof spaces)[number]})`\n    : spaceString;\n\nexport const themeFontSizeOrString = (fontSizeString: string): string =>\n  fontSizes.includes(fontSizeString as (typeof fontSizes)[number])\n    ? `var(--font-size-${fontSizeString as (typeof fontSizes)[number]})`\n    : fontSizeString;\n\nexport const themeColorOrString = (\n  colorString: string | (typeof colours)[number] | undefined,\n): string =>\n  colours.includes(colorString as (typeof colours)[number])\n    ? `var(--clr-${colorString as (typeof colours)[number]})`\n    : colorString || \"currentColor\";\n"],"names":["themeSpacingSizeOrString","spaceString","spaces","includes","concat","themeColorOrString","colorString","colours"],"mappings":"kDAEO,IAAMA,EAA2B,SAACC,GACvC,OAAAC,EAAOC,SAASF,GACZ,iBAAAG,OAAiBH,EAAsC,KACvDA,CAFJ,EASWI,EAAqB,SAChCC,GAEA,OAAAC,EAAQJ,SAASG,GACb,aAAAF,OAAaE,EAAuC,KACpDA,GAAe,cAFnB"}