@cruk/cruk-react-components 6.2.3 → 7.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Select/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type SelectHTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { LabelWrapper } from \"../LabelWrapper\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport { StyledSelect } from \"./styles\";\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling of component */\n  hasError?: boolean;\n  /** label text */\n  label: string;\n  /** hind text or custom component */\n  hintText?: ReactNode;\n  /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */\n  hideRequiredIndicationInLabel?: boolean;\n  /** react DOM reference of object used scrolling to it with errors etc */\n  ref?: Ref<HTMLSelectElement>;\n};\n\n/**\n * Select components are used for collecting user provided information from a list of options.\n *\n */\nexport const Select = ({\n  errorMessage,\n  hasError,\n  required,\n  label,\n  hintText,\n  hideRequiredIndicationInLabel,\n  ref,\n  ...props\n}: SelectProps) => {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={(!hideRequiredIndicationInLabel && required) || false}\n    >\n      <StyledSelect\n        {...props}\n        ref={ref}\n        theme={theme}\n        required={required}\n        aria-invalid={hasError || !!errorMessage || false}\n        aria-describedby={\n          !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n        }\n        $hasError={hasError || !!errorMessage || false}\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 Select;\n"],"names":["Select","_a","errorMessage","hasError","required","label","hintText","hideRequiredIndicationInLabel","ref","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","LabelWrapper","createElement","StyledSelect","id","concat","undefined","$hasError","ErrorText","marginTop"],"mappings":"wUAgCO,IAAMA,EAAS,SAACC,GACrB,IAAAC,EAAYD,EAAAC,aACZC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAQL,EAAAK,SACRC,EAA6BN,EAAAM,8BAC7BC,QACGC,EAAKC,EAAAT,EARa,CAAA,eAAA,WAAA,WAAA,QAAA,WAAA,gCAAA,QAUfU,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGL,OACEK,gBAACC,EAAY,CACXZ,MAAOA,EACPC,SAAUA,EACVF,UAAYG,GAAiCH,IAAa,GAE1DY,EAAAE,cAACC,EAAYL,EAAA,CAAA,EACPL,EAAK,CACTD,IAAKA,EACLK,MAAOA,EACPT,SAAUA,EAAQ,eACJD,KAAcD,IAAgB,EAAK,mBAE7CO,EAAMW,IAAQlB,EAAe,GAAAmB,OAAGZ,EAAMW,kBAAaE,EAASC,UAErDpB,KAAcD,IAAgB,OAExCA,GACDc,gBAACQ,EAAS,CACRC,UAAU,MACVL,GAAIX,EAAMW,GAAK,GAAAC,OAAGZ,EAAMW,kBAAaE,GAEpCpB,GAKX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Select/index.tsx"],"sourcesContent":["import React, {\n  type ReactNode,\n  type SelectHTMLAttributes,\n  type Ref,\n} from \"react\";\n\nimport { LabelWrapper } from \"../LabelWrapper\";\nimport { ErrorText } from \"../ErrorText\";\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n  /** error message text */\n  errorMessage?: string;\n  /** flag for error styling of component */\n  hasError?: boolean;\n  /** label text */\n  label: string;\n  /** hind text or custom component */\n  hintText?: ReactNode;\n  /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */\n  hideRequiredIndicationInLabel?: boolean;\n  /** react DOM reference of object used scrolling to it with errors etc */\n  ref?: Ref<HTMLSelectElement>;\n};\n\n/**\n * Select components are used for collecting user provided information from a list of options.\n *\n */\nexport const Select = ({\n  errorMessage,\n  hasError,\n  required,\n  label,\n  hintText,\n  hideRequiredIndicationInLabel,\n  ref,\n  ...props\n}: SelectProps) => {\n  return (\n    <LabelWrapper\n      label={label}\n      hintText={hintText}\n      required={(!hideRequiredIndicationInLabel && required) || false}\n    >\n      <select\n        className=\"component-select\"\n        {...props}\n        ref={ref}\n        required={required}\n        aria-invalid={hasError || !!errorMessage || false}\n        aria-describedby={\n          !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n        }\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 Select;\n"],"names":["Select","_a","errorMessage","hasError","required","label","hintText","hideRequiredIndicationInLabel","ref","props","__rest","React","LabelWrapper","createElement","__assign","className","id","concat","undefined","ErrorText","marginTop"],"mappings":"+MA4BO,IAAMA,EAAS,SAACC,GACrB,IAAAC,EAAYD,EAAAC,aACZC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAQL,EAAAK,SACRC,EAA6BN,EAAAM,8BAC7BC,QACGC,EAAKC,EAAAT,EARa,CAAA,eAAA,WAAA,WAAA,QAAA,WAAA,gCAAA,QAUrB,OACEU,gBAACC,EAAY,CACXP,MAAOA,EACPC,SAAUA,EACVF,UAAYG,GAAiCH,IAAa,GAE1DO,EAAAE,cAAA,SAAAC,EAAA,CACEC,UAAU,oBACNN,EAAK,CACTD,IAAKA,EACLJ,SAAUA,EAAQ,eACJD,KAAcD,IAAgB,qBAExCO,EAAMO,IAAQd,EAAe,GAAAe,OAAGR,EAAMO,GAAE,eAAWE,OAGtDhB,GACDS,gBAACQ,EAAS,CACRC,UAAU,MACVJ,GAAIP,EAAMO,GAAK,GAAAC,OAAGR,EAAMO,kBAAaE,GAEpChB,GAKX"}

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

@@ -1,15 +1,14 @@
 import React, { type ReactNode } from "react";
-export type StepProps = {
-    /** current step number */
-    current: number;
-    /** list of step  */
-    steps: string[];
-    children?: ReactNode;
-};
 /**
  *
  * Visually show where a user is in a multi-step process. Calculate the number of steps and the width of each step required to fit the progress bar in the parent container.
  * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.
  */
-export declare function Step({ steps, current, children }: StepProps): React.JSX.Element;
+export declare function Step({ steps, current, children, }: {
+    /** current step number */
+    current: number;
+    /** list of step  */
+    steps: string[];
+    children?: ReactNode;
+}): React.JSX.Element;
 export default Step;

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as r,ThemeProvider as n}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{StepWrapper as l,StepList as m,StepItem as a,StepBar as s,StepTick as c}from"./styles.js";function i(i){var u=i.steps,p=void 0===u?[]:u,d=i.current,f=void 0===d?1:d,y=i.children,E=r(),v=e(e({},o),E),h=Array.isArray(p)?Object.keys(p).length:0;return t.createElement(n,{theme:v},t.createElement(l,null,t.createElement(m,{$total:h},Array.isArray(p)&&p.map(function(e,r){var n="step".concat(r);return t.createElement(a,{key:n,$active:r+1===f,$done:r+1<f},t.createElement(s,null,r+1<f&&t.createElement(c,null)),e)})),y))}export{i as Step,i as default};
+import e from"react";function t(t){var a=t.steps,s=void 0===a?[]:a,r=t.current,c=void 0===r?1:r,n=t.children,i=Array.isArray(s)?Object.keys(s).length:0,l="".concat(i>0?100/i:100,"%");return e.createElement("div",{className:"component-step"},e.createElement("ul",{className:"step-list"},Array.isArray(s)&&s.map(function(t,a){return e.createElement("li",{className:"step-item",key:"step".concat(a),"data-is-active":a+1===c,"data-is-done":a+1<c,style:{"--_step-item-width":l}},e.createElement("span",{className:"step-bar"},a+1<c&&e.createElement("span",{className:"step-tick"})),t)})),n)}export{t as Step,t as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Step/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StepBar, StepItem, StepList, StepTick, StepWrapper } from \"./styles\";\n\nexport type StepProps = {\n  /** current step number */\n  current: number;\n  /** list of step  */\n  steps: string[];\n  children?: ReactNode;\n};\n\n// TODO think about AriaAttributes and how we want to pass them down\n\n/**\n *\n * Visually show where a user is in a multi-step process. Calculate the number of steps and the width of each step required to fit the progress bar in the parent container.\n * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.\n */\nexport function Step({ steps = [], current = 1, children }: StepProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const totalSteps: number = Array.isArray(steps)\n    ? Object.keys(steps).length\n    : 0;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StepWrapper>\n        <StepList $total={totalSteps}>\n          {Array.isArray(steps) &&\n            steps.map((step, i) => {\n              const key = `step${i}`;\n              return (\n                <StepItem\n                  key={key}\n                  $active={i + 1 === current}\n                  $done={i + 1 < current}\n                >\n                  <StepBar>{i + 1 < current && <StepTick />}</StepBar>\n                  {step}\n                </StepItem>\n              );\n            })}\n        </StepList>\n        {children}\n      </StepWrapper>\n    </ThemeProvider>\n  );\n}\nexport default Step;\n"],"names":["Step","_a","_b","steps","_c","current","children","foundTheme","useTheme","theme","__assign","defaultTheme","totalSteps","Array","isArray","Object","keys","length","React","createElement","ThemeProvider","StepWrapper","StepList","map","step","i","key","concat","StepItem","$active","$done","StepBar","StepTick"],"mappings":"2SAsBM,SAAUA,EAAKC,GAAE,IAAAC,EAAAD,EAAAE,MAAAA,OAAK,IAAAD,EAAG,KAAIE,EAAAH,EAAAI,QAAAA,OAAO,IAAAD,EAAG,EAACA,EAAEE,EAAQL,EAAAK,SAChDC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAECK,EAAqBC,MAAMC,QAAQX,GACrCY,OAAOC,KAAKb,GAAOc,OACnB,EAEJ,OACEC,EAAAC,cAACC,EAAa,CAACX,MAAOA,GACpBS,EAAAC,cAACE,EAAW,KACVH,EAAAC,cAACG,UAAiBV,GACfC,MAAMC,QAAQX,IACbA,EAAMoB,IAAI,SAACC,EAAMC,GACf,IAAMC,EAAM,OAAAC,OAAOF,GACnB,OACEP,EAAAC,cAACS,GACCF,IAAKA,EAAGG,QACCJ,EAAI,IAAMpB,EAAOyB,MACnBL,EAAI,EAAIpB,GAEfa,EAAAC,cAACY,EAAO,KAAEN,EAAI,EAAIpB,GAAWa,EAAAC,cAACa,EAAQ,OACrCR,EAGP,IAEHlB,GAIT"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Step/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\n\n/**\n *\n * Visually show where a user is in a multi-step process. Calculate the number of steps and the width of each step required to fit the progress bar in the parent container.\n * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.\n */\nexport function Step({\n  steps = [],\n  current = 1,\n  children,\n}: {\n  /** current step number */\n  current: number;\n  /** list of step  */\n  steps: string[];\n  children?: ReactNode;\n}) {\n  const totalSteps: number = Array.isArray(steps)\n    ? Object.keys(steps).length\n    : 0;\n  const itemWidth = `${totalSteps > 0 ? 100 / totalSteps : 100}%`;\n\n  return (\n    <div className=\"component-step\">\n      <ul className=\"step-list\">\n        {Array.isArray(steps) &&\n          steps.map((step, i) => (\n            <li\n              className=\"step-item\"\n              key={`step${i}`}\n              data-is-active={i + 1 === current}\n              data-is-done={i + 1 < current}\n              style={{ \"--_step-item-width\": itemWidth } as React.CSSProperties}\n            >\n              <span className=\"step-bar\">\n                {i + 1 < current && <span className=\"step-tick\" />}\n              </span>\n              {step}\n            </li>\n          ))}\n      </ul>\n      {children}\n    </div>\n  );\n}\nexport default Step;\n"],"names":["Step","_a","_b","steps","_c","current","children","totalSteps","Array","isArray","Object","keys","length","itemWidth","concat","React","createElement","className","map","step","i","key","style"],"mappings":"qBAOM,SAAUA,EAAKC,GACnB,IAAAC,EAAAD,EAAAE,MAAAA,OAAK,IAAAD,EAAG,KACRE,EAAAH,EAAAI,QAAAA,OAAO,IAAAD,EAAG,EAACA,EACXE,EAAQL,EAAAK,SAQFC,EAAqBC,MAAMC,QAAQN,GACrCO,OAAOC,KAAKR,GAAOS,OACnB,EACEC,EAAY,GAAAC,OAAGP,EAAa,EAAI,IAAMA,EAAa,SAEzD,OACEQ,EAAAC,cAAA,MAAA,CAAKC,UAAU,kBACbF,EAAAC,cAAA,KAAA,CAAIC,UAAU,aACXT,MAAMC,QAAQN,IACbA,EAAMe,IAAI,SAACC,EAAMC,GAAM,OACrBL,sBACEE,UAAU,YACVI,IAAK,OAAAP,OAAOM,GAAG,iBACCA,EAAI,IAAMf,EAAO,eACnBe,EAAI,EAAIf,EACtBiB,MAAO,CAAE,qBAAsBT,IAE/BE,EAAAC,cAAA,OAAA,CAAMC,UAAU,YACbG,EAAI,EAAIf,GAAWU,EAAAC,cAAA,OAAA,CAAMC,UAAU,eAErCE,EAXkB,IAe1Bb,EAGP"}

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 } 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?: 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{__assign as t,__rest as e}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as o}from"styled-components";import{crukTheme as i}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as m}from"../Spacing/index.js";import{TextStyled as l}from"./styles.js";var x=function(x){var a=o(),n=t(t({},i),a),f=x.textColor,s=x.textAlign,p=x.textSize,d=x.textWeight,g=x.textFontFamily,$=x.wordBreak,c=x.overflowWrap,w=x.ref,F=e(x,["textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref"]),W=m(F);return r.createElement(l,t({$textColor:f,$textAlign:s,$textSize:p,$textWeight:d,$textFontFamily:g,$wordBreak:$,$overflowWrap:c},W,{theme:n,ref:w}))};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\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n  spacingPropsToSpacingPropsInternal,\n  type SpacingProps,\n} from \"../Spacing\";\nimport {\n  type WordBreakType,\n  type FontSizeType,\n  type OverflowWrapType,\n} from \"../../types\";\nimport { TextStyled } from \"./styles\";\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?: 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 foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\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  return (\n    <TextStyled\n      $textColor={textColor}\n      $textAlign={textAlign}\n      $textSize={textSize}\n      $textWeight={textWeight}\n      $textFontFamily={textFontFamily}\n      $wordBreak={wordBreak}\n      $overflowWrap={overflowWrap}\n      {...withInternalSpacingProps}\n      theme={theme}\n      ref={ref as Ref<HTMLParagraphElement>}\n    />\n  );\n};\n\nexport default Text;\n"],"names":["Text","props","foundTheme","useTheme","theme","__assign","defaultTheme","textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref","rest","withInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","TextStyled","$textColor","$textAlign","$textSize","$textWeight","$textFontFamily","$wordBreak","$overflowWrap"],"mappings":"qTA4CO,IAAMA,EAAO,SAACC,GACnB,IAAMC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGHK,EASEN,EAAKM,UARPC,EAQEP,EAAKO,UAPPC,EAOER,WANFS,EAMET,EAAKS,WALPC,EAKEV,iBAJFW,EAIEX,EAAKW,UAHPC,EAGEZ,EAAKY,aAFPC,EAEEb,MADCc,IACDd,EAVE,CAAA,YAAA,YAAA,WAAA,aAAA,iBAAA,YAAA,eAAA,QAYAe,EAA2BC,EAAmCF,GAEpE,OACEG,EAAAC,cAACC,EAAUf,EAAA,CAAAgB,WACGd,EAASe,WACTd,EAASe,UACVd,EAAQe,YACNd,EAAUe,gBACNd,EAAce,WACnBd,EAASe,cACNd,GACXG,EAAwB,CAC5BZ,MAAOA,EACPU,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{useTheme as t}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{ErrorText as s}from"../ErrorText/index.js";import{LabelWrapper as a}from"../LabelWrapper/index.js";import n from"./styles.js";var m=function(m){var d=m.errorMessage,l=m.hasError,p=m.hintText,c=m.label,f=m.resize,u=void 0===f?"vertical":f,h=m.lineCount,x=void 0===h?3:h,b=m.ref,v=r(m,["errorMessage","hasError","hintText","label","resize","lineCount","ref"]),E=t(),j=e(e({},o),E);return i.createElement(a,{label:c,hintText:p,required:v.required||!1},i.createElement(n,e({},v,{"aria-invalid":l||!!d||!1,"aria-describedby":v.id&&d?"".concat(v.id,"-error"):void 0,$hasError:l||!!d||!1,$resize:u,$lineCount:x,theme:j,ref:b,"data-hj-suppress":!0})),!!d&&i.createElement(s,{marginTop:"xxs",id:v.id?"".concat(v.id,"-error"):void 0},d))};export{m as TextAreaField,m 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\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\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  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\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        theme={theme}\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","foundTheme","useTheme","theme","__assign","defaultTheme","React","createElement","LabelWrapper","required","StyledTextArea","id","concat","undefined","$resize","$lineCount","ErrorText","marginTop"],"mappings":"wUAiCO,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,2EAUtBY,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGL,OACEK,EAAAC,cAACC,GACCf,MAAOA,EACPD,SAAUA,EACViB,SAAUV,EAAMU,WAAY,GAE5BH,EAAAC,cAACG,EAAcN,EAAA,CAAA,EACTL,EAAK,CAAA,eACKR,KAAcD,IAAgB,EAAK,mBAE7CS,EAAMY,IAAQrB,EAAe,GAAAsB,OAAGb,EAAMY,GAAE,eAAWE,YAE5CtB,KAAcD,IAAgB,EAAKwB,QACrCnB,EAAMoB,WACHlB,EACZM,MAAOA,EACPL,IAAKA,EAAG,oBAAA,OAGPR,GACDgB,gBAACU,EAAS,CACRC,UAAU,MACVN,GAAIZ,EAAMY,GAAK,GAAAC,OAAGb,EAAMY,kBAAaE,GAEpCvB,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{useTheme as t}from"styled-components";import{crukTheme as a}from"../../themes/cruk.js";import{ErrorText as l}from"../ErrorText/index.js";import{LabelWrapper as s}from"../LabelWrapper/index.js";import{ExtraLeft as o,StyledInputWrapper as d,StyledInput as n,ExtraRight as m,Extra as c,ExtraWrapper as h}from"./styles.js";var b=function(b){var x=b.errorMessage,p=b.extraBottom,V=b.extraLeft,E=b.extraRight,f=b.extraTop,u=b.hasError,v=b.hintText,I=b.isValid,$=b.isValidVisible,T=b.isInvalidVisible,g=b.label,j=b.hideRequiredIndicationInLabel,L=b.ref,q=e(b,["errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredIndicationInLabel","ref"]),R=t(),y=i(i({},a),R),B=r.createElement(r.Fragment,null,!!V&&r.createElement(o,{theme:y},V),r.createElement(d,{$hasError:u||!!x||!1,$isValid:void 0!==I?I:!u&&!x,"aria-invalid":u||!!x||!1,$isValidVisible:$||!1,$isInvalidVisible:T||!1,theme:y},r.createElement(n,i({$hasError:u||!!x||!1,$isValid:void 0!==I?I:!u&&!x,"aria-invalid":u||!!x||!1,"aria-describedby":q.id&&x?"".concat(q.id,"-error"):void 0,$isValidVisible:$||!1,$isInvalidVisible:T||!1},q,{theme:y,"data-hj-suppress":!0,ref:L}))),!!E&&r.createElement(m,{theme:y},E));return r.createElement(s,{label:g,hintText:v,required:q.required||!1,hideRequiredIndicationInLabel:j},!!f&&r.createElement(c,{theme:y},f),E||V?r.createElement(h,null,B):B,!!p&&r.createElement(c,{theme:y},p),!!x&&r.createElement(l,{marginTop:"xxs",id:q.id?"".concat(q.id,"-error"):void 0},x))};export{b as TextField,b 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\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\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 foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const renderContent = (\n    <>\n      {!!extraLeft && <ExtraLeft theme={theme}>{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        theme={theme}\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          theme={theme}\n          data-hj-suppress\n          ref={ref}\n        />\n      </StyledInputWrapper>\n      {!!extraRight && <ExtraRight theme={theme}>{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 theme={theme}>{extraTop}</Extra>}\n      {!!extraRight || !!extraLeft ? (\n        <ExtraWrapper>{renderContent}</ExtraWrapper>\n      ) : (\n        renderContent\n      )}\n      {!!extraBottom && <Extra theme={theme}>{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","foundTheme","useTheme","theme","__assign","defaultTheme","renderContent","React","createElement","Fragment","ExtraLeft","StyledInputWrapper","$isValid","$isInvalidVisible","StyledInput","$hasError","id","undefined","$isValidVisible","ExtraRight","LabelWrapper","required","Extra","ExtraWrapper","ErrorText","marginTop","concat"],"mappings":"2aAoDO,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,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGCK,EACJC,EAAAC,cAAAD,EAAAE,SAAA,OACKrB,GAAamB,EAAAC,cAACE,EAAS,CAACP,MAAOA,GAAQf,GAC1CmB,EAAAC,cAACG,aACYpB,KAAcL,IAAgB,EAAK0B,cAEzB,IAAZnB,EAA0BA,GAAWF,IAAaL,EAAY,eAEzDK,KAAcL,IAAgB,kBAC3BQ,IAAkB,EAAKmB,kBACrBlB,IAAoB,EACvCQ,MAAOA,GAEPI,EAAAC,cAACM,EAAWV,EAAA,CAAAW,UACCxB,KAAcL,IAAgB,EAAK0B,cAEzB,IAAZnB,EACHA,GACCF,IAAaL,EAAY,eAElBK,KAAcL,IAAgB,EAAK,mBAE7Ca,EAAMiB,IAAQ9B,EAAe,UAAGa,EAAMiB,GAAE,eAAWC,EAASC,gBAE/CxB,IAAkB,EAAKmB,kBACrBlB,IAAoB,GACnCI,EAAK,CACTI,MAAOA,EAAK,oBAAA,EAEZL,IAAKA,QAGNT,GAAckB,EAAAC,cAACW,EAAU,CAAChB,MAAOA,GAAQd,IAIhD,OACEkB,gBAACa,EAAY,CACXxB,MAAOA,EACPJ,SAAUA,EACV6B,SAAUtB,EAAMsB,WAAY,EAC5BxB,8BAA+BA,KAE5BP,GAAYiB,EAAAC,cAACc,EAAK,CAACnB,MAAOA,GAAQb,GAClCD,GAAgBD,EACjBmB,gBAACgB,EAAY,KAAEjB,GAA6B,IAI3CnB,GAAeoB,EAAAC,cAACc,EAAK,CAACnB,MAAOA,GAAQhB,KACrCD,GACDqB,gBAACiB,EAAS,CACRC,UAAU,MACVT,GAAIjB,EAAMiB,GAAK,GAAAU,OAAG3B,EAAMiB,kBAAaC,GAEpC/B,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.d.ts

@@ -1,5 +1,8 @@
 import React, { type ReactNode } from "react";
-export type TotaliserProps = {
+/**
+ * Think Blue Peter, used to display total raised and if target prop is passed will display percentage of target reached.
+ * */
+export declare function Totaliser({ total, additionalAmount, giftAid, target, isCompact, summaryMessage, children, }: {
     /** financial total as a number */
     total: number;
     /** additional donation amount as a number */
@@ -14,9 +17,5 @@ export type TotaliserProps = {
     summaryMessage?: ReactNode;
     /** component children */
     children?: ReactNode;
-};
-/**
- * Think Blue Peter, used to display total raised and if target prop is passed will display tercentage of target reached.
- * */
-export declare function Totaliser({ total, additionalAmount, giftAid, target, isCompact, summaryMessage, children, }: TotaliserProps): React.JSX.Element;
+}): React.JSX.Element;
 export default Totaliser;

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as n}from"styled-components";import{calculatePercentRounded as r,formatMoneyWithCommas as m}from"../../utils/Helper.js";import{crukTheme as l}from"../../themes/cruk.js";import{Text as a}from"../Text/index.js";import{Badge as o}from"../Badge/index.js";import{Box as i}from"../Box/index.js";import{TotaliserWrapper as c,BubbleWrapper as s,BubbleText as d,Total as p,GiftAid as u,ProgressBarWrapper as E,StyledProgressBar as f,Summary as g,CompactWrapper as h}from"./styles.js";function x(x){var j=x.total,v=x.additionalAmount,y=x.giftAid,A=x.target,B=void 0===A?null:A,C=x.isCompact,b=x.summaryMessage,H=void 0===b?void 0:b,T=x.children,$=n(),k=e(e({},l),$),z=r(+j,B||0),F=r(v?+j+(v||0):0,B||0),G="".concat(z,"% of the £").concat(m(B||0)," target");return t.createElement(c,{$isCompact:C||!1,theme:k},C?t.createElement(i,{marginHorizontal:"none",marginRight:"xxs",marginBottom:"none"},t.createElement(o,null,"£".concat(m(j)))):t.createElement(s,{theme:k},t.createElement(d,null,"Total raised"),t.createElement(p,null,"£",m(j)),t.createElement(u,null,"+ £",m(y||0)," Gift Aid")),(!!B||!!H)&&t.createElement(t.Fragment,null,t.createElement(E,{$isCompact:C||!1,theme:k},t.createElement(f,{theme:k,percentage:z,secondaryPercentage:F}),C?t.createElement(h,{theme:k},null!==B&&t.createElement(g,null,t.createElement(a,{as:"span"},G))):H?t.createElement(g,null,H):t.createElement(g,null,t.createElement(a,{as:"span"},G)))),T)}export{x as Totaliser,x 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\";\nimport { useTheme } from \"styled-components\";\n\nimport {\n  calculatePercentRounded,\n  formatMoneyWithCommas,\n} from \"../../utils/Helper\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\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\nexport type TotaliserProps = {\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\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 tercentage of target reached.\n * */\nexport function Totaliser({\n  total,\n  additionalAmount,\n  giftAid,\n  target = null,\n  isCompact,\n  summaryMessage = undefined,\n  children,\n}: TotaliserProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\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} theme={theme}>\n      {!isCompact ? (\n        <BubbleWrapper theme={theme}>\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} theme={theme}>\n            <StyledProgressBar\n              theme={theme}\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 theme={theme}>\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","foundTheme","useTheme","theme","__assign","defaultTheme","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":"okBA+CM,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,SAEFC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAECK,EAAoBC,GAAyBhB,EAAOI,GAAU,GAC9Da,EAAkCD,EACtCf,GAAoBD,GAASC,GAAoB,GAAK,EACtDG,GAAU,GAGNc,EAAgB,GAAAC,OAAGJ,EAAiB,cAAAI,OAAaC,EACrDhB,GAAU,GACX,WAED,OACEiB,EAAAC,cAACC,EAAgB,CAAAC,WAAanB,IAAa,EAAOO,MAAOA,GACrDP,EAOAgB,EAAAC,cAACG,EAAG,CAACC,iBAAiB,OAAOC,YAAY,MAAMC,aAAa,QAC1DP,EAAAC,cAACO,EAAK,KAAE,IAAAV,OAAIC,EAAsBpB,MAPpCqB,gBAACS,EAAa,CAAClB,MAAOA,GACpBS,EAAAC,cAACS,EAAU,KAAA,gBACXV,EAAAC,cAACU,EAAK,SAAGZ,EAAsBpB,IAC/BqB,EAAAC,cAACW,EAAO,WAAKb,EAAsBlB,GAAW,GAAsB,iBAUpEE,KAAYG,IACdc,EAAAC,cAAAD,EAAAa,SAAA,KACEb,EAAAC,cAACa,cAA+B9B,IAAa,EAAOO,MAAOA,GACzDS,EAAAC,cAACc,EAAiB,CAChBxB,MAAOA,EACPyB,WAAYtB,EACZuB,oBAAqBrB,IAErBZ,EASAgB,EAAAC,cAACiB,EAAc,CAAC3B,MAAOA,GACT,OAAXR,GACCiB,EAAAC,cAACkB,EAAO,KACNnB,EAAAC,cAACmB,EAAI,CAACC,GAAG,QAAQxB,KAXvBX,EACEc,gBAACmB,EAAO,KAAEjC,GAEVc,EAAAC,cAACkB,EAAO,KACNnB,EAAAC,cAACmB,EAAI,CAACC,GAAG,QAAQxB,MAe5BT,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.d.ts

@@ -1,4 +1,5 @@
 import React, { type ReactNode, type HTMLAttributes } from "react";
+import { type ThemeNameType } from "../../types";
 export type UserBlockProps = HTMLAttributes<HTMLElement> & {
     /** name component or text */
     name?: ReactNode;
@@ -10,9 +11,10 @@ export type UserBlockProps = HTMLAttributes<HTMLElement> & {
     extra?: ReactNode;
     /** size of avatar component */
     size?: "s" | "m" | "l" | "xl";
+    themeName: ThemeNameType;
 };
 /**
  * Display an avatar with title and subtitle
  */
-export declare function UserBlock({ name, avatarName, avatarUrl, extra, size, }: UserBlockProps): React.JSX.Element;
+export declare function UserBlock({ name, avatarName, avatarUrl, extra, size, themeName, }: UserBlockProps): React.JSX.Element;
 export default UserBlock;

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as r}from"styled-components";import{crukTheme as m}from"../../themes/cruk.js";import{Avatar as o}from"../Avatar/index.js";import{StyledUserBlock as n,Details as a,Name as l,Extra as s}from"./styles.js";function i(i){var u=i.name,c=i.avatarName,f=i.avatarUrl,p=i.extra,d=i.size,v=void 0===d?"l":d,y=r(),E=e(e({},m),y);return t.createElement(n,{theme:E},t.createElement(o,{name:c||("string"==typeof u?u:"Anonymous"),url:f||void 0,size:v}),t.createElement(a,null,t.createElement(l,null,u||"Anonymous"),!!p&&t.createElement(s,null,p)))}export{i as UserBlock,i 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\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { Avatar } from \"../Avatar\";\n\nimport { StyledUserBlock, Details, Name, Extra } from \"./styles\";\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};\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}: UserBlockProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\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 theme={theme}>\n      <Avatar\n        name={avatarName || (typeof name === \"string\" ? name : \"Anonymous\")}\n        url={avatarUrl || undefined}\n        size={size}\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","foundTheme","useTheme","theme","__assign","defaultTheme","React","createElement","StyledUserBlock","Avatar","url","undefined","Details","Name","Extra"],"mappings":"mTAwBM,SAAUA,EAAUC,GACxB,IAAAC,SACAC,EAAUF,EAAAE,WACVC,EAASH,EAAAG,UACTC,EAAKJ,EAAAI,MACLC,EAAAL,EAAAM,KAAAA,OAAI,IAAAD,EAAG,IAAGA,EAEJE,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAKL,OACEK,EAAAC,cAACC,EAAe,CAACL,MAAOA,GACtBG,EAAAC,cAACE,EAAM,CACLd,KAAMC,IAA+B,iBAATD,EAAoBA,EAAO,aACvDe,IAAKb,QAAac,EAClBX,KAAMA,IAERM,EAAAC,cAACK,EAAO,KACNN,EAAAC,cAACM,EAAI,KAAElB,GAAQ,eACZG,GAASQ,EAAAC,cAACO,EAAK,KAAEhB,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,42 +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";
-export { Fontface } from "./Fontface";
-export { Flex } from "./Flex";
+import "./ErrorText/styles.css";
 export { Footer } from "./Footer";
-export { GlobalStyle } from "./GlobalStyle";
-export { GlobalStyleNoFontFace } from "./GlobalStyleNoFontFace";
+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";
-export { bowelbabeTheme } from "../themes/bowelbabe";
-export { crukTheme } from "../themes/cruk";
-export { su2cTheme } from "../themes/su2c";
-export { rflTheme } from "../themes/rfl";
+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{Fontface}from"./Fontface.js";export{Flex}from"./Flex.js";export{Footer}from"./Footer/index.js";export{GlobalStyle}from"./GlobalStyle.js";export{GlobalStyleNoFontFace}from"./GlobalStyleNoFontFace.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{bowelbabeTheme}from"../themes/bowelbabe.js";export{crukTheme}from"../themes/cruk.js";export{su2cTheme}from"../themes/su2c.js";export{rflTheme}from"../themes/rfl.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