@cruk/cruk-react-components 6.2.3 → 7.0.0

package/README.md

@@ -32,6 +32,55 @@ const MyComponent = () => (
 );
 ```
 
+## Migration from V5 and V6 to V7
+
+Styled Components has entered maintenance mode.
+
+- The first phase is to uses CSS variables and data attributes on HTML elements for theming, instead of using Styled Components themes and ThemeProvider.
+- The second phase is to convert components written in Styled Components into html and css modules and remove Styled Components.
+
+### Themeing
+
+So intstead of themeing like this
+
+```tsx
+import { Button, crukTheme } from "cruk-react-components";
+import { ThemeProvider } from "styled-components";
+
+const MyComponent = () => (
+<ThemeProvider theme={crukTheme}>
+  <Button/>
+<ThemeProvider />
+);
+
+```
+
+you only need an html element with `data-theme="cruk"`, the inner most element with data-theme will override outer wrapping elements.
+
+```tsx
+const MyComponent = () => (
+  <span data-theme="su2c">
+    <Button/>
+  <span/>
+);
+```
+
+### Components with theme dependent content
+
+Because the new themeing strategy only effects CSS and not content, components which have theme specific content now have a required property of "themeName". This prop will have to be entered by the app that uses these components. The following components require the themeName prop:
+
+- Avatar
+- Header
+- Footer
+- UserBlock
+- Modal\*
+
+\* Modal is a special case, it needs themeName prop because the any theme provider will not work. Modals uses React Portals which places the elements in whole new html context.
+
+### Theme variable naming conventions
+
+Because the theme names now come from CSS variable instead of theme objects, the theme names that were camel cased, are now snake cased so `textDark` now becomes `text-dark`
+
 ## Migration from V4 to V5
 
 Because Styped Components now manages its own types on stead of relying on the community efforts on the DefinitelyTyped project, you may need to use generics instead of inline prop type definition inside styledComponents componets.

package/lib/index.css

@@ -0,0 +1,2 @@
+@font-face{font-family:Progress;font-weight:400;src:url(https://rcl.assets.cancerresearchuk.org/fonts/Progress-Regular.woff2) format("woff")}@font-face{font-family:Progress;font-weight:600;src:url(https://rcl.assets.cancerresearchuk.org/fonts/Progress-SemiBold.woff2) format("woff")}@font-face{font-family:Poppins;font-weight:600;src:url(https://rcl.assets.cancerresearchuk.org/fonts/Poppins-SemiBold.woff2) format("woff")}@font-face{font-family:Poppins;font-weight:500;src:url(https://rcl.assets.cancerresearchuk.org/fonts/Poppins-Medium.woff) format("woff")}@font-face{font-family:Poppins;font-weight:400;src:url(https://rcl.assets.cancerresearchuk.org/fonts/Poppins-Regular.woff2) format("woff")}@font-face{font-family:Poppins;font-weight:300;src:url(https://rcl.assets.cancerresearchuk.org/fonts/Poppins-Light.woff) format("woff")}@font-face{font-family:juana;font-weight:600;src:url(https://rcl.assets.cancerresearchuk.org/fonts/juana-semibold-webfont.woff2) format("woff2")}@font-face{font-family:ITCAvantGarde;font-weight:700;src:url(https://rcl.assets.cancerresearchuk.org/fonts/itc_-_itcavantgardepro-bold-webfont.woff) format("woff")}@font-face{font-family:ITCAvantGarde;font-weight:600;src:url(https://rcl.assets.cancerresearchuk.org/fonts/ITCAvantGardePro-Demi.woff) format("woff")}@font-face{font-family:ITCAvantGarde;font-weight:400;src:url(https://rcl.assets.cancerresearchuk.org/fonts/ITCAvantGardeStd-Bk.woff) format("woff")}*,:after,:before{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-direction:reverse!important;animation-play-state:paused!important;scroll-behavior:auto!important;transition:none!important}}body{margin:0}table,td,th{border:1px solid #ccc;border-spacing:0;padding:10px}.no-focus-outline a:focus,.no-focus-outline button:focus{outline:none}img{height:auto}img,section{width:100%}button{font-size:1em}:root{--theme:"cruk";--content-max-width:1020px;--breakpoint-mobile:576px;--breakpoint-tablet:768px;--breakpoint-desktop:992px;--breakpoint-desktop-large:1200px;--spacing-none:0;--spacing-auto:auto;--spacing-xxxs:0.25rem;--spacing-xxs:0.5rem;--spacing-xs:1rem;--spacing-s:1.5rem;--spacing-m:2rem;--spacing-l:2.5rem;--spacing-xl:3rem;--spacing-xxl:3.5rem;--font-size-xs:0.75rem;--font-size-s:0.875rem;--font-size-m:1rem;--font-size-ml:1.125rem;--font-size-l:1.25rem;--font-size-xl:1.5625rem;--font-size-xxl:2rem;--font-size-xxxl:2.5rem;--font-size-xxxxl:3.125rem;--size-border-width:1px;--btn-border-radius:0px;--btn-border-radius-large:0px;--btn-border-thickness:1px;--btn-text-decoration:none;--btn-text-transform:none;--btn-horizontal-padding:2em;--typ-font-family-base:"Poppins",Arial,sans-serif;--typ-font-family-buttons:"Poppins",Arial,sans-serif;--typ-font-family-links:"Poppins",Arial,sans-serif;--typ-font-family-headings:"Progress",Arial,sans-serif;--typ-font-family-label:"Poppins",Arial,sans-serif;--typ-font-size-base:16px;--typ-font-weight-base:300;--typ-font-weight-headings:400;--typ-font-weight-links:700;--typ-font-weight-buttons:400;--typ-font-weight-labels:500;--typ-font-weight-heavy:700;--typ-font-weight-medium:500;--typ-font-weight-normal:400;--typ-font-weight-light:300;--typ-font-weight-vlight:100;--typ-link-text-decoration:underline;--typ-link-primary-text-decoration:underline;--typ-line-height:1.5em;--typ-header-line-height:1.25em;--typ-header-text-transform:none;--clr-cruk-navy-100:#e5e5ff;--clr-cruk-navy-600:#00007e;--clr-cruk-navy-700:#006;--clr-cruk-navy-800:#00004d;--clr-cruk-magenta-100:#ffe6f3;--clr-cruk-magenta-600:#ff0087;--clr-cruk-magenta-700:#e60079;--clr-cruk-magenta-800:#cc006c;--clr-cruk-cyan-600:#009cee;--clr-cruk-cyan-700:#006da7;--clr-cruk-grey-100:#f2f2f2;--clr-cruk-grey-200:#e6e6e6;--clr-cruk-grey-300:#c6c6c6;--clr-cruk-grey-600:#666;--clr-cruk-grey-800:#575757;--clr-cruk-grey-900:#2e2d2c;--clr-cruk-white:#fff;--clr-cruk-black:#000;--clr-cruk-red:#d51311;--clr-cruk-yellow:#fdc02f;--clr-cruk-green:#3d854d;--clr-su2c-orange-8:#bd3900;--clr-su2c-orange-7:#d74100;--clr-su2c-orange-6:#ee5a04;--clr-su2c-orange-5:#ff8e00;--clr-su2c-orange-3:#ffb04d;--clr-su2c-orange-1:#ffefdb;--clr-su2c-black:#231f20;--clr-su2c-grey-1:#555759;--clr-su2c-grey-2:#a5a5a9;--clr-su2c-red:#ef4135;--clr-su2c-yellow:#ffc325;--clr-bowelbabe-purple:#501e70;--clr-bowelbabe-light-green:#92ddcb;--clr-bowelbabe-green:#26bb98;--clr-bowelbabe-pastel-green:#d4f1ea;--clr-bowelbabe-pink:#d81272;--clr-bowelbabe-pastel-pink:#eb88b8;--clr-bowelbabe-blue:#009ed1;--clr-bowelbabe-teal:#005e85;--clr-bowelbabe-yellow:#e4b50b;--clr-bowelbabe-pastel-yellow:#f1da85;--clr-primary:var(--clr-cruk-navy-600);--clr-secondary:var(--clr-cruk-magenta-700);--clr-tertiary:var(--clr-cruk-cyan-600);--clr-text-on-primary:var(--clr-cruk-white);--clr-text-on-secondary:var(--clr-cruk-white);--clr-text-on-tertiary:var(--clr-cruk-white);--clr-text-header-default:var(--clr-cruk-black);--clr-disabled:var(--clr-cruk-grey-200);--clr-danger:var(--clr-cruk-red);--clr-warning:var(--clr-cruk-yellow);--clr-success:var(--clr-cruk-green);--clr-info:var(--clr-cruk-cyan-600);--clr-text-error:var(--clr-cruk-red);--clr-text-dark:var(--clr-cruk-black);--clr-text-light:var(--clr-cruk-white);--clr-text-mid:var(--clr-cruk-grey-600);--clr-sports-activity:var(--clr-cruk-cyan-700);--clr-link:var(--clr-cruk-magenta-700);--clr-link-hover:var(--clr-cruk-magenta-800);--clr-link-secondary:var(--clr-cruk-magenta-700);--clr-link-secondary-hover:var(--clr-cruk-magenta-800);--clr-avatar-border:var(--clr-cruk-navy-600);--clr-progress-bar:var(--clr-cruk-navy-600);--clr-progress-bar-secondary:var(--clr-cruk-magenta-700);--clr-progress-bar-background:var(--clr-cruk-grey-200);--clr-circular-progress:var(--clr-cruk-cyan-600);--clr-circular-progress-secondary:var(--clr-cruk-magenta-700);--clr-circular-progress-background:var(--clr-cruk-grey-200);--clr-button-primary-background:var(--clr-cruk-magenta-700);--clr-button-primary-text:var(--clr-cruk-white);--clr-button-primary-border:var(--clr-cruk-magenta-700);--clr-button-primary-background-hover:var(--clr-cruk-magenta-800);--clr-button-primary-text-hover:var(--clr-cruk-white);--clr-button-primary-border-hover:var(--clr-cruk-magenta-800);--clr-button-primary-disabled-background:var(--clr-cruk-grey-200);--clr-button-primary-disabled-text:var(--clr-cruk-grey-600);--clr-button-primary-disabled-border:var(--clr-cruk-grey-200);--clr-button-secondary-background:var(--clr-cruk-white);--clr-button-secondary-text:var(--clr-cruk-magenta-700);--clr-button-secondary-border:var(--clr-cruk-magenta-700);--clr-button-secondary-background-hover:var(--clr-cruk-magenta-100);--clr-button-secondary-text-hover:var(--clr-cruk-magenta-800);--clr-button-secondary-border-hover:var(--clr-cruk-magenta-100);--clr-button-secondary-disabled-background:var(--clr-cruk-grey-200);--clr-button-secondary-disabled-text:var(--clr-cruk-grey-600);--clr-button-secondary-disabled-border:var(--clr-cruk-grey-200);--clr-button-tertiary-text:var(--clr-cruk-magenta-700);--clr-button-tertiary-text-hover:var(--clr-cruk-magenta-800);--clr-button-tertiary-disabled-text:var(--clr-cruk-grey-600);--clr-collapse-header:var(--clr-cruk-navy-600);--clr-selection-border:var(--clr-cruk-grey-600);--clr-text-input-border:var(--clr-cruk-grey-900);--clr-input-border:var(--clr-cruk-grey-900);--clr-check:var(--clr-cruk-magenta-700);--clr-carousel-button:var(--clr-primary);--clr-header-background:var(--clr-cruk-white);--clr-background-light:var(--clr-cruk-white);--clr-background-light-color:var(--clr-cruk-navy-100);--clr-background-mid:var(--clr-cruk-grey-200);--clr-background-mid-light:var(--clr-cruk-grey-100);--clr-loader-color-1:var(--clr-cruk-navy-600);--clr-loader-color-2:var(--clr-cruk-magenta-600);--clr-loader-color-3:var(--clr-cruk-cyan-600);--clr-pagination-text:var(--clr-cruk-navy-600);--clr-pagination-active:var(--clr-cruk-grey-200);--clr-pagination-background:var(--clr-cruk-navy-600);--clr-footer-background:var(--clr-cruk-white);--clr-header-border:var(--clr-cruk-grey-200);--clr-header-tagline-text:var(--clr-cruk-black);--clr-step-border:var(--clr-cruk-grey-200);--clr-step-background:var(--clr-cruk-white);--clr-popover-background:var(--clr-cruk-white);--clr-text-input-extra-info:var(--clr-cruk-grey-200);--clr-totaliser-bubble:var(--clr-cruk-grey-200);--clr-totaliser-bubble-text:var(--clr-cruk-black);--clr-totaliser-bubble-total:var(--clr-cruk-navy-600);--clr-select-background:var(--clr-cruk-black);--clr-modal-backdrop:var(--clr-cruk-black);--clr-user-block-extra-text:var(--clr-cruk-grey-800);--shadow-s:0px 0px 2px 1px var(--clr-cruk-grey-300);--shadow-m:0px 0px 4px 1px var(--clr-cruk-grey-300);--shadow-l:0px 0px 7px 1px var(--clr-cruk-grey-300)}[data-theme=cruk]>*{--theme:"cruk"}[data-theme=rfl]>*{--theme:"rfl";--typ-font-weight-headings:600;--clr-text-header-default:var(--clr-cruk-navy-600);--clr-header-tagline-text:var(--clr-cruk-navy-600);--clr-progress-bar:var(--clr-cruk-magenta-700);--clr-progress-bar-secondary:var(--clr-cruk-navy-600)}[data-theme=su2c]>*{--theme:"su2c";--btn-border-radius:1.5rem;--btn-border-radius-large:2rem;--btn-text-transform:uppercase;--btn-border-thickness:2px;--typ-font-family-headings:"ITCAvantGarde",Arial,sans-serif;--typ-font-family-links:"ITCAvantGarde",Arial,sans-serif;--typ-font-family-buttons:"ITCAvantGarde",Arial,sans-serif;--typ-font-family-base:"ITCAvantGarde",Arial,Calibri,nimbussansl,liberationsans,freesans,clean,sans-serif;--typ-font-family-label:"ITCAvantGarde",Arial,Calibri,nimbussansl,liberationsans,freesans,clean,sans-serif;--typ-link-text-decoration:none;--typ-header-line-height:1.5em;--typ-header-text-transform:uppercase;--typ-font-weight-base:400;--typ-font-weight-links:700;--typ-font-weight-buttons:700;--typ-font-weight-labels:600;--typ-font-weight-headings:700;--typ-link-primary-text-decoration:none;--clr-primary:var(--clr-su2c-orange-5);--clr-secondary:var(--clr-su2c-orange-5);--clr-tertiary:var(--clr-su2c-black);--clr-text-header-default:var(--clr-su2c-black);--clr-text-on-primary:var(--clr-su2c-black);--clr-text-on-secondary:var(--clr-su2c-black);--clr-avatar-border:var(--clr-su2c-black);--clr-progress-bar:var(--clr-su2c-orange-5);--clr-progress-bar-secondary:var(--clr-su2c-red);--clr-circular-progress:var(--clr-su2c-orange-3);--clr-circular-progress-secondary:var(--clr-su2c-red);--clr-link:var(--clr-su2c-orange-7);--clr-link-hover:var(--clr-su2c-orange-8);--clr-link-secondary:var(--clr-su2c-orange-7);--clr-link-secondary-hover:var(--clr-su2c-orange-8);--clr-background-light-color:var(--clr-su2c-orange-2);--clr-loader-color-1:var(--clr-su2c-orange-5);--clr-loader-color-2:var(--clr-su2c-red);--clr-loader-color-3:var(--clr-su2c-black);--clr-pagination-text:var(--clr-su2c-black);--clr-pagination-background:var(--clr-su2c-black);--clr-totaliser-bubble:var(--clr-su2c-black);--clr-totaliser-bubble-text:var(--clr-cruk-white);--clr-totaliser-bubble-total:var(--clr-cruk-white);--clr-collapse-header:var(--clr-su2c-orange-7);--clr-check:var(--clr-su2c-black);--clr-carousel-button:var(--clr-su2c-black);--clr-header-tagline-text:var(--clr-su2c-black);--clr-button-primary-background:var(--clr-su2c-orange-5);--clr-button-primary-text:var(--clr-su2c-black);--clr-button-primary-border:var(--clr-su2c-orange-5);--clr-button-primary-background-hover:var(--clr-su2c-orange-6);--clr-button-primary-text-hover:var(--clr-su2c-black);--clr-button-primary-border-hover:var(--clr-su2c-orange-6);--clr-button-primary-disabled-background:var(--clr-grey-200);--clr-button-primary-disabled-text:var(--clr-grey-600);--clr-button-primary-disabled-border:var(--clr-grey-200);--clr-button-secondary-background:var(--clr-cruk-white);--clr-button-secondary-text:var(--clr-su2c-black);--clr-button-secondary-border:var(--clr-su2c-orange-6);--clr-button-secondary-background-hover:var(--clr-su2c-orange-1);--clr-button-secondary-text-hover:var(--clr-su2c-black);--clr-button-secondary-border-hover:var(--clr-su2c-orange-1);--clr-button-secondary-disabled-background:var(--clr-cruk-white);--clr-button-secondary-disabled-text:var(--clr-grey-200);--clr-button-secondary-disabled-border:var(--clr-grey-200);--clr-button-tertiary-text:var(--clr-su2c-orange-7);--clr-button-tertiary-text-hover:var(--clr-su2c-orange-8);--clr-button-tertiary-disabled-text:var(--clr-grey-200)}[data-theme=bowelbabe]>*{--theme:"bowelbabe";--btn-border-radius:2em;--btn-horizontal-padding:1rem;--btn-border-thickness:2px;--typ-font-family-headings:"juana",Arial,sans-serif;--typ-font-family-links:"juana",Arial,sans-serif;--typ-font-family-buttons:"juana",Arial,sans-serif;--typ-font-family-base:Arial,Calibri,nimbussansl,liberationsans,freesans,clean,sans-serif;--typ-font-family-label:Arial,Calibri,nimbussansl,liberationsans,freesans,clean,sans-serif;--typ-header-line-height:1.5em;--typ-font-weight-base:400;--typ-font-weight-links:600;--typ-font-weight-headings:600;--typ-font-weight-buttons:600;--typ-font-weight-labels:600;--typ-link-primary-text-decoration:none;--clr-primary:var(--clr-bowelbabe-purple);--clr-secondary:var(--clr-bowelbabe-green);--clr-tertiary:var(--clr-bowelbabe-teal);--clr-text-on-primary:var(--clr-cruk-white);--clr-text-on-secondary:var(--clr-bowelbabe-purple);--clr-text-on-tertiary:var(--clr-cruk-white);--clr-warning:var(--clr-bowelbabe-yellow);--clr-success:var(--clr-bowelbabe-green);--clr-info:var(--clr-bowelbabe-blue);--clr-avatar-border:var(--clr-bowelbabe-purple);--clr-progress-bar:var(--clr-bowelbabe-light-green);--clr-progress-bar-secondary:var(--clr-bowelbabe-green);--clr-circular-progress:var(--clr-bowelbabe-light-green);--clr-circular-progress-secondary:var(--clr-bowelbabe-green);--clr-link:var(--clr-bowelbabe-purple);--clr-link-hover:var(--clr-bowelbabe-pink);--clr-link-secondary:var(--clr-bowelbabe-purple);--clr-link-secondary-hover:var(--clr-bowelbabe-pink);--clr-background-light-color:var(--clr-bowelbabe-pastel-green);--clr-collapse-header:var(--clr-bowelbabe-pink);--clr-check:var(--clr-bowelbabe-purple);--clr-carousel-button:var(--clr-bowelbabe-purple);--clr-header-tagline-text:var(--clr-bowelbabe-purple);--clr-loader-color-1:var(--clr-bowelbabe-purple);--clr-loader-color-2:var(--clr-bowelbabe-light-green);--clr-loader-color-3:var(--clr-bowelbabe-pink);--clr-pagination-text:var(--clr-bowelbabe-purple);--clr-pagination-background:var(--clr-bowelbabe-purple);--clr-totaliser-bubble:var(--clr-bowelbabe-purple);--clr-totaliser-bubble-text:var(--clr-bowelbabe-light-green);--clr-totaliser-bubble-total:var(--clr-cruk-white);--clr-button-primary-background:var(--clr-bowelbabe-pastel-yellow);--clr-button-primary-text:var(--clr-bowelbabe-purple);--clr-button-primary-border:var(--clr-bowelbabe-pastel-yellow);--clr-button-primary-background-hover:var(--clr-bowelbabe-pastel-pink);--clr-button-primary-text-hover:var(--clr-bowelbabe-purple);--clr-button-primary-border-hover:var(--clr-bowelbabe-pastel-pink);--clr-button-primary-disabled-background:var(--clr-cruk-grey-200);--clr-button-primary-disabled-text:var(--clr-cruk-grey-800);--clr-button-primary-disabled-border:var(--clr-cruk-grey-200);--clr-button-secondary-background:var(--clr-cruk-white);--clr-button-secondary-text:var(--clr-bowelbabe-purple);--clr-button-secondary-border:var(--clr-bowelbabe-pastel-yellow);--clr-button-secondary-background-hover:var(--clr-bowelbabe-pastel-pink);--clr-button-secondary-text-hover:var(--clr-bowelbabe-purple);--clr-button-secondary-border-hover:var(--clr-bowelbabe-pastel-yellow);--clr-button-secondary-disabled-background:var(--clr-cruk-grey-200);--clr-button-secondary-disabled-text:var(--clr-cruk-grey-800);--clr-button-secondary-disabled-border:var(--clr-cruk-grey-200);--clr-button-tertiary-text:var(--clr-bowelbabe-purple);--clr-button-tertiary-text-hover:var(--clr-bowelbabe-pink);--clr-button-tertiary-disabled-text:var(--clr-cruk-grey-200)}@keyframes styles-module_bounce-delay__cM1SL{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.styles-module_screen-reader-only__rkMmb{height:1px;left:-10000px;overflow:hidden;position:absolute;top:auto;width:1px}.styles-module_spinner__FNAgO{margin-top:var(--spacing-s,1.5rem);text-align:center;width:100%;span{animation:styles-module_bounce-delay__cM1SL 1.2s ease-in-out infinite both;background-color:var(--clr-loader-color-1,#00007e);border-radius:100%;display:inline-block;height:16px;margin:0 2px;width:16px}span:first-child{animation-delay:-.32s;-webkit-animation-delay:-.32s}span:nth-child(2){animation-delay:-.16s;background-color:var(--clr-loader-color-2,#ff0087)}span:nth-child(3){background-color:var(--clr-loader-color-3,#009cee)}}
+/*# sourceMappingURL=index.css.map */

package/lib/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["global-styles.css","styles.module.css"],"names":[],"mappings":"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","file":"index.css","sourcesContent":["@font-face {\n  font-family: \"Progress\";\n  src: url(\"https://rcl.assets.cancerresearchuk.org/fonts/Progress-Regular.woff2\")\n    format(\"woff\");\n  font-weight: 400;\n}\n\n@font-face {\n  font-family: \"Progress\";\n  src: url(\"https://rcl.assets.cancerresearchuk.org/fonts/Progress-SemiBold.woff2\")\n    format(\"woff\");\n  font-weight: 600;\n}\n\n@font-face {\n  font-family: \"Poppins\";\n  src: url(\"https://rcl.assets.cancerresearchuk.org/fonts/Poppins-SemiBold.woff2\")\n    format(\"woff\");\n  font-weight: 600;\n}\n\n@font-face {\n  font-family: \"Poppins\";\n  src: url(\"https://rcl.assets.cancerresearchuk.org/fonts/Poppins-Medium.woff\")\n    format(\"woff\");\n  font-weight: 500;\n}\n\n@font-face {\n  font-family: \"Poppins\";\n  src: url(\"https://rcl.assets.cancerresearchuk.org/fonts/Poppins-Regular.woff2\")\n    format(\"woff\");\n  font-weight: 400;\n}\n\n@font-face {\n  font-family: \"Poppins\";\n  src: url(\"https://rcl.assets.cancerresearchuk.org/fonts/Poppins-Light.woff\")\n    format(\"woff\");\n  font-weight: 300;\n}\n\n@font-face {\n  font-family: \"juana\";\n  src: url(\"https://rcl.assets.cancerresearchuk.org/fonts/juana-semibold-webfont.woff2\")\n    format(\"woff2\");\n  font-weight: 600;\n}\n\n@font-face {\n  font-family: \"ITCAvantGarde\";\n  src: url(\"https://rcl.assets.cancerresearchuk.org/fonts/itc_-_itcavantgardepro-bold-webfont.woff\")\n    format(\"woff\");\n  font-weight: 700;\n}\n\n@font-face {\n  font-family: \"ITCAvantGarde\";\n  src: url(\"https://rcl.assets.cancerresearchuk.org/fonts/ITCAvantGardePro-Demi.woff\")\n    format(\"woff\");\n  font-weight: 600;\n}\n\n@font-face {\n  font-family: \"ITCAvantGarde\";\n  src: url(\"https://rcl.assets.cancerresearchuk.org/fonts/ITCAvantGardeStd-Bk.woff\")\n    format(\"woff\");\n  font-weight: 400;\n}\n\n*,\n*:after,\n*:before {\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *:after,\n  *:before {\n    animation-play-state: paused !important;\n    animation-direction: reverse !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n\nbody {\n  margin: 0;\n}\n\ntable,\ntd,\nth {\n  border-spacing: 0;\n  border: 1px solid #ccc;\n  padding: 10px;\n}\n.no-focus-outline a:focus,\n.no-focus-outline button:focus {\n  outline: none;\n}\nimg {\n  width: 100%;\n  height: auto;\n}\nsection {\n  width: 100%;\n}\nbutton {\n  font-size: 1em;\n}\n\n:root {\n  --theme: \"cruk\";\n\n  --content-max-width: 1020px;\n  --breakpoint-mobile: 576px;\n  --breakpoint-tablet: 768px;\n  --breakpoint-desktop: 992px;\n  --breakpoint-desktop-large: 1200px;\n\n  --spacing-none: 0;\n  --spacing-auto: auto;\n  --spacing-xxxs: 0.25rem; /* 4px */\n  --spacing-xxs: 0.5rem; /* 8px */\n  --spacing-xs: 1rem; /* 16px */\n  --spacing-s: 1.5rem; /* 24px */\n  --spacing-m: 2rem; /* 32px */\n  --spacing-l: 2.5rem; /* 40px */\n  --spacing-xl: 3rem; /* 48px */\n  --spacing-xxl: 3.5rem; /* 56px */\n\n  --font-size-xs: 0.75rem; /* 12px */\n  --font-size-s: 0.875rem; /* 14px */\n  --font-size-m: 1rem; /* 16px */\n  --font-size-ml: 1.125rem; /* 18px */\n  --font-size-l: 1.25rem; /* 20px */\n  --font-size-xl: 1.5625rem; /* 25px */\n  --font-size-xxl: 2rem; /* 32px */\n  --font-size-xxxl: 2.5rem; /* 40px */\n  --font-size-xxxxl: 3.125rem; /* 45px */\n\n  --size-border-width: 1px;\n\n  --btn-border-radius: 0px;\n  --btn-border-radius-large: 0px;\n  --btn-border-thickness: 1px;\n  --btn-text-decoration: none;\n  --btn-text-transform: none;\n  --btn-horizontal-padding: 2em;\n\n  --typ-font-family-base: \"Poppins\", Arial, sans-serif;\n  --typ-font-family-buttons: \"Poppins\", Arial, sans-serif;\n  --typ-font-family-links: \"Poppins\", Arial, sans-serif;\n  --typ-font-family-headings: \"Progress\", Arial, sans-serif;\n  --typ-font-family-label: \"Poppins\", Arial, sans-serif;\n  --typ-font-size-base: 16px;\n  --typ-font-weight-base: 300;\n  --typ-font-weight-headings: 400;\n  --typ-font-weight-links: 700;\n  --typ-font-weight-buttons: 400;\n  --typ-font-weight-labels: 500;\n  --typ-font-weight-heavy: 700;\n  --typ-font-weight-medium: 500;\n  --typ-font-weight-normal: 400;\n  --typ-font-weight-light: 300;\n  --typ-font-weight-vlight: 100;\n\n  --typ-link-text-decoration: underline;\n  --typ-link-primary-text-decoration: underline;\n  --typ-line-height: 1.5em;\n  --typ-header-line-height: 1.25em;\n  --typ-header-text-transform: none;\n\n  --clr-cruk-navy-100: #e5e5ff;\n  --clr-cruk-navy-600: #00007e;\n  --clr-cruk-navy-700: #000066;\n  --clr-cruk-navy-800: #00004d;\n\n  --clr-cruk-magenta-100: #ffe6f3;\n  --clr-cruk-magenta-600: #ff0087;\n  --clr-cruk-magenta-700: #e60079;\n  --clr-cruk-magenta-800: #cc006c;\n\n  --clr-cruk-cyan-600: #009cee;\n  --clr-cruk-cyan-700: #006da7;\n\n  --clr-cruk-grey-100: #f2f2f2;\n  --clr-cruk-grey-200: #e6e6e6;\n  --clr-cruk-grey-300: #c6c6c6; /* used for shadows */\n  --clr-cruk-grey-600: #666666;\n  --clr-cruk-grey-800: #575757;\n  --clr-cruk-grey-900: #2e2d2c;\n\n  --clr-cruk-white: #fff;\n  --clr-cruk-black: #000;\n\n  --clr-cruk-red: #d51311;\n  --clr-cruk-yellow: #fdc02f;\n  --clr-cruk-green: #3d854d;\n\n  --clr-su2c-orange-8: #bd3900;\n  --clr-su2c-orange-7: #d74100;\n  --clr-su2c-orange-6: #ee5a04;\n  --clr-su2c-orange-5: #ff8e00;\n  --clr-su2c-orange-3: #ffb04d;\n  /* --clr-su2c-orange-1: #fff6eb; */\n  --clr-su2c-orange-1: #ffefdb;\n\n  --clr-su2c-black: #231f20;\n  --clr-su2c-grey-1: #555759;\n  --clr-su2c-grey-2: #a5a5a9;\n\n  --clr-su2c-red: #ef4135;\n  --clr-su2c-yellow: #ffc325;\n\n  --clr-bowelbabe-purple: #501e70;\n  --clr-bowelbabe-light-green: #92ddcb;\n  --clr-bowelbabe-green: #26bb98;\n  --clr-bowelbabe-pastel-green: #d4f1ea;\n  --clr-bowelbabe-pink: #d81272;\n  --clr-bowelbabe-pastel-pink: #eb88b8;\n  --clr-bowelbabe-blue: #009ed1;\n  --clr-bowelbabe-teal: #005e85;\n  --clr-bowelbabe-yellow: #e4b50b;\n  --clr-bowelbabe-pastel-yellow: #f1da85;\n\n  --clr-primary: var(--clr-cruk-navy-600);\n  --clr-secondary: var(--clr-cruk-magenta-700);\n  --clr-tertiary: var(--clr-cruk-cyan-600);\n\n  --clr-text-on-primary: var(--clr-cruk-white);\n  --clr-text-on-secondary: var(--clr-cruk-white);\n  --clr-text-on-tertiary: var(--clr-cruk-white);\n  --clr-text-header-default: var(--clr-cruk-black);\n\n  --clr-disabled: var(--clr-cruk-grey-200);\n  --clr-danger: var(--clr-cruk-red);\n  --clr-warning: var(--clr-cruk-yellow);\n  --clr-success: var(--clr-cruk-green);\n  --clr-info: var(--clr-cruk-cyan-600);\n  --clr-text-error: var(--clr-cruk-red);\n  --clr-text-dark: var(--clr-cruk-black);\n  --clr-text-light: var(--clr-cruk-white);\n  --clr-text-mid: var(--clr-cruk-grey-600);\n  --clr-sports-activity: var(--clr-cruk-cyan-700);\n\n  --clr-link: var(--clr-cruk-magenta-700);\n  --clr-link-hover: var(--clr-cruk-magenta-800);\n  --clr-link-secondary: var(--clr-cruk-magenta-700);\n  --clr-link-secondary-hover: var(--clr-cruk-magenta-800);\n\n  --clr-avatar-border: var(--clr-cruk-navy-600);\n\n  --clr-progress-bar: var(--clr-cruk-navy-600);\n  --clr-progress-bar-secondary: var(--clr-cruk-magenta-700);\n  --clr-progress-bar-background: var(--clr-cruk-grey-200);\n  --clr-circular-progress: var(--clr-cruk-cyan-600);\n  --clr-circular-progress-secondary: var(--clr-cruk-magenta-700);\n  --clr-circular-progress-background: var(--clr-cruk-grey-200);\n\n  --clr-button-primary-background: var(--clr-cruk-magenta-700);\n  --clr-button-primary-text: var(--clr-cruk-white);\n  --clr-button-primary-border: var(--clr-cruk-magenta-700);\n  --clr-button-primary-background-hover: var(--clr-cruk-magenta-800);\n  --clr-button-primary-text-hover: var(--clr-cruk-white);\n  --clr-button-primary-border-hover: var(--clr-cruk-magenta-800);\n  --clr-button-primary-disabled-background: var(--clr-cruk-grey-200);\n  --clr-button-primary-disabled-text: var(--clr-cruk-grey-600);\n  --clr-button-primary-disabled-border: var(--clr-cruk-grey-200);\n\n  --clr-button-secondary-background: var(--clr-cruk-white);\n  --clr-button-secondary-text: var(--clr-cruk-magenta-700);\n  --clr-button-secondary-border: var(--clr-cruk-magenta-700);\n  --clr-button-secondary-background-hover: var(--clr-cruk-magenta-100);\n  --clr-button-secondary-text-hover: var(--clr-cruk-magenta-800);\n  --clr-button-secondary-border-hover: var(--clr-cruk-magenta-100);\n  --clr-button-secondary-disabled-background: var(--clr-cruk-grey-200);\n  --clr-button-secondary-disabled-text: var(--clr-cruk-grey-600);\n  --clr-button-secondary-disabled-border: var(--clr-cruk-grey-200);\n\n  --clr-button-tertiary-text: var(--clr-cruk-magenta-700);\n  --clr-button-tertiary-text-hover: var(--clr-cruk-magenta-800);\n  --clr-button-tertiary-disabled-text: var(--clr-cruk-grey-600);\n\n  --clr-collapse-header: var(--clr-cruk-navy-600);\n\n  --clr-selection-border: var(--clr-cruk-grey-600);\n\n  --clr-text-input-border: var(--clr-cruk-grey-900);\n  --clr-input-border: var(--clr-cruk-grey-900);\n  --clr-check: var(--clr-cruk-magenta-700);\n  --clr-carousel-button: var(--clr-primary);\n\n  --clr-header-background: var(--clr-cruk-white);\n  --clr-background-light: var(--clr-cruk-white);\n  --clr-background-light-color: var(--clr-cruk-navy-100);\n  --clr-background-mid: var(--clr-cruk-grey-200);\n  --clr-background-mid-light: var(--clr-cruk-grey-100);\n\n  --clr-loader-color-1: var(--clr-cruk-navy-600);\n  --clr-loader-color-2: var(--clr-cruk-magenta-600);\n  --clr-loader-color-3: var(--clr-cruk-cyan-600);\n\n  --clr-pagination-text: var(--clr-cruk-navy-600);\n  --clr-pagination-active: var(--clr-cruk-grey-200);\n  --clr-pagination-background: var(--clr-cruk-navy-600);\n\n  --clr-footer-background: var(--clr-cruk-white);\n\n  --clr-header-border: var(--clr-cruk-grey-200);\n  --clr-header-tagline-text: var(--clr-cruk-black);\n\n  --clr-step-border: var(--clr-cruk-grey-200);\n  --clr-step-background: var(--clr-cruk-white);\n\n  --clr-popover-background: var(--clr-cruk-white);\n\n  --clr-text-input-extra-info: var(--clr-cruk-grey-200);\n\n  --clr-totaliser-bubble: var(--clr-cruk-grey-200);\n  --clr-totaliser-bubble-text: var(--clr-cruk-black);\n  --clr-totaliser-bubble-total: var(--clr-cruk-navy-600);\n\n  --clr-select-background: var(--clr-cruk-black);\n\n  --clr-modal-backdrop: var(--clr-cruk-black);\n\n  --clr-user-block-extra-text: var(--clr-cruk-grey-800);\n\n  --shadow-s: 0px 0px 2px 1px var(--clr-cruk-grey-300);\n  --shadow-m: 0px 0px 4px 1px var(--clr-cruk-grey-300);\n  --shadow-l: 0px 0px 7px 1px var(--clr-cruk-grey-300);\n}\n\n[data-theme=\"cruk\"] > * {\n  --theme: \"cruk\";\n}\n\n[data-theme=\"rfl\"] > * {\n  --theme: \"rfl\";\n\n  --typ-font-weight-headings: 600;\n\n  --clr-text-header-default: var(--clr-cruk-navy-600);\n  --clr-header-tagline-text: var(--clr-cruk-navy-600);\n\n  --clr-progress-bar: var(--clr-cruk-magenta-700);\n  --clr-progress-bar-secondary: var(--clr-cruk-navy-600);\n}\n\n[data-theme=\"su2c\"] > * {\n  --theme: \"su2c\";\n\n  --btn-border-radius: 1.5rem;\n  --btn-border-radius-large: 2rem;\n  --btn-text-transform: uppercase;\n  --btn-border-thickness: 2px;\n\n  --typ-font-family-headings: \"ITCAvantGarde\", Arial, sans-serif;\n  --typ-font-family-links: \"ITCAvantGarde\", Arial, sans-serif;\n  --typ-font-family-buttons: \"ITCAvantGarde\", Arial, sans-serif;\n  --typ-font-family-base:\n    \"ITCAvantGarde\", Arial, Calibri, nimbussansl, liberationsans, freesans,\n    clean, sans-serif;\n  --typ-font-family-label:\n    \"ITCAvantGarde\", Arial, Calibri, nimbussansl, liberationsans, freesans,\n    clean, sans-serif;\n  --typ-link-text-decoration: none;\n  --typ-header-line-height: 1.5em;\n  --typ-header-text-transform: uppercase;\n  --typ-font-weight-base: 400;\n  --typ-font-weight-links: 700;\n  --typ-font-weight-buttons: 700;\n  --typ-font-weight-labels: 600;\n  --typ-font-weight-headings: 700;\n  --typ-link-primary-text-decoration: none;\n\n  --clr-primary: var(--clr-su2c-orange-5);\n  --clr-secondary: var(--clr-su2c-orange-5);\n  --clr-tertiary: var(--clr-su2c-black);\n  --clr-text-header-default: var(--clr-su2c-black);\n\n  --clr-text-on-primary: var(--clr-su2c-black);\n  --clr-text-on-secondary: var(--clr-su2c-black);\n\n  --clr-avatar-border: var(--clr-su2c-black);\n  --clr-progress-bar: var(--clr-su2c-orange-5);\n  --clr-progress-bar-secondary: var(--clr-su2c-red);\n  --clr-circular-progress: var(--clr-su2c-orange-3);\n  --clr-circular-progress-secondary: var(--clr-su2c-red);\n\n  --clr-link: var(--clr-su2c-orange-7);\n  --clr-link-hover: var(--clr-su2c-orange-8);\n  --clr-link-secondary: var(--clr-su2c-orange-7);\n  --clr-link-secondary-hover: var(--clr-su2c-orange-8);\n\n  --clr-background-light-color: var(--clr-su2c-orange-2);\n\n  --clr-loader-color-1: var(--clr-su2c-orange-5);\n  --clr-loader-color-2: var(--clr-su2c-red);\n  --clr-loader-color-3: var(--clr-su2c-black);\n\n  --clr-pagination-text: var(--clr-su2c-black);\n  --clr-pagination-background: var(--clr-su2c-black);\n\n  --clr-totaliser-bubble: var(--clr-su2c-black);\n  --clr-totaliser-bubble-text: var(--clr-cruk-white);\n  --clr-totaliser-bubble-total: var(--clr-cruk-white);\n\n  --clr-collapse-header: var(--clr-su2c-orange-7);\n  --clr-check: var(--clr-su2c-black);\n  --clr-carousel-button: var(--clr-su2c-black);\n\n  --clr-header-tagline-text: var(--clr-su2c-black);\n\n  --clr-button-primary-background: var(--clr-su2c-orange-5);\n  --clr-button-primary-text: var(--clr-su2c-black);\n  --clr-button-primary-border: var(--clr-su2c-orange-5);\n  --clr-button-primary-background-hover: var(--clr-su2c-orange-6);\n  --clr-button-primary-text-hover: var(--clr-su2c-black);\n  --clr-button-primary-border-hover: var(--clr-su2c-orange-6);\n  --clr-button-primary-disabled-background: var(--clr-grey-200);\n  --clr-button-primary-disabled-text: var(--clr-grey-600);\n  --clr-button-primary-disabled-border: var(--clr-grey-200);\n\n  --clr-button-secondary-background: var(--clr-cruk-white);\n  --clr-button-secondary-text: var(--clr-su2c-black);\n  --clr-button-secondary-border: var(--clr-su2c-orange-6);\n  --clr-button-secondary-background-hover: var(--clr-su2c-orange-1);\n  --clr-button-secondary-text-hover: var(--clr-su2c-black);\n  --clr-button-secondary-border-hover: var(--clr-su2c-orange-1);\n  --clr-button-secondary-disabled-background: var(--clr-cruk-white);\n  --clr-button-secondary-disabled-text: var(--clr-grey-200);\n  --clr-button-secondary-disabled-border: var(--clr-grey-200);\n\n  --clr-button-tertiary-text: var(--clr-su2c-orange-7);\n  --clr-button-tertiary-text-hover: var(--clr-su2c-orange-8);\n  --clr-button-tertiary-disabled-text: var(--clr-grey-200);\n}\n\n[data-theme=\"bowelbabe\"] > * {\n  --theme: \"bowelbabe\";\n\n  --btn-border-radius: 2em;\n  --btn-horizontal-padding: 1rem;\n  --btn-border-thickness: 2px;\n\n  --typ-font-family-headings: \"juana\", Arial, sans-serif;\n  --typ-font-family-links: \"juana\", Arial, sans-serif;\n  --typ-font-family-buttons: \"juana\", Arial, sans-serif;\n  --typ-font-family-base:\n    Arial, Calibri, nimbussansl, liberationsans, freesans, clean, sans-serif;\n  --typ-font-family-label:\n    Arial, Calibri, nimbussansl, liberationsans, freesans, clean, sans-serif;\n  --typ-header-line-height: 1.5em;\n  --typ-font-weight-base: 400;\n  --typ-font-weight-links: 600;\n  --typ-font-weight-headings: 600;\n  --typ-font-weight-buttons: 600;\n  --typ-font-weight-labels: 600;\n  /* might not be needed */\n  --typ-link-primary-text-decoration: none;\n\n  --clr-primary: var(--clr-bowelbabe-purple);\n  --clr-secondary: var(--clr-bowelbabe-green);\n  --clr-tertiary: var(--clr-bowelbabe-teal);\n\n  --clr-text-on-primary: var(--clr-cruk-white);\n  --clr-text-on-secondary: var(--clr-bowelbabe-purple);\n  --clr-text-on-tertiary: var(--clr-cruk-white);\n\n  --clr-warning: var(--clr-bowelbabe-yellow);\n  --clr-success: var(--clr-bowelbabe-green);\n  --clr-info: var(--clr-bowelbabe-blue);\n\n  --clr-avatar-border: var(--clr-bowelbabe-purple);\n  --clr-progress-bar: var(--clr-bowelbabe-light-green);\n  --clr-progress-bar-secondary: var(--clr-bowelbabe-green);\n  --clr-circular-progress: var(--clr-bowelbabe-light-green);\n  --clr-circular-progress-secondary: var(--clr-bowelbabe-green);\n  --clr-link: var(--clr-bowelbabe-purple);\n  --clr-link-hover: var(--clr-bowelbabe-pink);\n  --clr-link-secondary: var(--clr-bowelbabe-purple);\n  --clr-link-secondary-hover: var(--clr-bowelbabe-pink);\n\n  --clr-background-light-color: var(--clr-bowelbabe-pastel-green);\n\n  --clr-collapse-header: var(--clr-bowelbabe-pink);\n  --clr-check: var(--clr-bowelbabe-purple);\n  --clr-carousel-button: var(--clr-bowelbabe-purple);\n\n  --clr-header-tagline-text: var(--clr-bowelbabe-purple);\n\n  --clr-loader-color-1: var(--clr-bowelbabe-purple);\n  --clr-loader-color-2: var(--clr-bowelbabe-light-green);\n  --clr-loader-color-3: var(--clr-bowelbabe-pink);\n\n  --clr-pagination-text: var(--clr-bowelbabe-purple);\n  --clr-pagination-background: var(--clr-bowelbabe-purple);\n\n  --clr-totaliser-bubble: var(--clr-bowelbabe-purple);\n  --clr-totaliser-bubble-text: var(--clr-bowelbabe-light-green);\n  --clr-totaliser-bubble-total: var(--clr-cruk-white);\n\n  --clr-button-primary-background: var(--clr-bowelbabe-pastel-yellow);\n  --clr-button-primary-text: var(--clr-bowelbabe-purple);\n  --clr-button-primary-border: var(--clr-bowelbabe-pastel-yellow);\n  --clr-button-primary-background-hover: var(--clr-bowelbabe-pastel-pink);\n  --clr-button-primary-text-hover: var(--clr-bowelbabe-purple);\n  --clr-button-primary-border-hover: var(--clr-bowelbabe-pastel-pink);\n  --clr-button-primary-disabled-background: var(--clr-cruk-grey-200);\n  --clr-button-primary-disabled-text: var(--clr-cruk-grey-800);\n  --clr-button-primary-disabled-border: var(--clr-cruk-grey-200);\n\n  --clr-button-secondary-background: var(--clr-cruk-white);\n  --clr-button-secondary-text: var(--clr-bowelbabe-purple);\n  --clr-button-secondary-border: var(--clr-bowelbabe-pastel-yellow);\n  --clr-button-secondary-background-hover: var(--clr-bowelbabe-pastel-pink);\n  --clr-button-secondary-text-hover: var(--clr-bowelbabe-purple);\n  --clr-button-secondary-border-hover: var(--clr-bowelbabe-pastel-yellow);\n  --clr-button-secondary-disabled-background: var(--clr-cruk-grey-200);\n  --clr-button-secondary-disabled-text: var(--clr-cruk-grey-800);\n  --clr-button-secondary-disabled-border: var(--clr-cruk-grey-200);\n\n  --clr-button-tertiary-text: var(--clr-bowelbabe-purple);\n  --clr-button-tertiary-text-hover: var(--clr-bowelbabe-pink);\n  --clr-button-tertiary-disabled-text: var(--clr-cruk-grey-200);\n}\n","@keyframes bounce-delay {\n  0%,\n  80%,\n  100% {\n    transform: scale(0);\n  }\n  40% {\n    transform: scale(1);\n  }\n}\n\n.screen-reader-only {\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n.spinner {\n  width: 100%;\n  text-align: center;\n  margin-top: var(--spacing-s, 1.5rem);\n\n  span {\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    margin: 0 2px;\n    background-color: var(--clr-loader-color-1, #00007e);\n    border-radius: 100%;\n    animation: bounce-delay 1.2s infinite ease-in-out both;\n  }\n\n  span:nth-child(1) {\n    animation-delay: -0.32s;\n    -webkit-animation-delay: -0.32s;\n  }\n\n  span:nth-child(2) {\n    background-color: var(--clr-loader-color-2, #ff0087);\n    animation-delay: -0.16s;\n  }\n\n  span:nth-child(3) {\n    background-color: var(--clr-loader-color-3, #009cee);\n  }\n}\n"]}

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

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import n,{useState as r,useRef as o,useCallback as s,useEffect as a}from"react";import{useTheme as i}from"styled-components";import{faChevronRight as l}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{useKey as c}from"../../hooks/useKey.js";import{debounce as d}from"../../utils/debounce.js";import{removeCommasFromObjectStringValues as u}from"../../utils/Helper.js";import{Text as m}from"../Text/index.js";import{TextField as f}from"../TextField/index.js";import{IconFa as p}from"../IconFa/index.js";import{crukTheme as h}from"../../themes/cruk.js";import{ScreenReaderOnly as g,ListWrapper as v,List as y,ListItem as E}from"./styles.js";var w=function(w){var b=w.apiKey,x=w.countries,I=w.errorMessage,j=w.hasError,T=w.isValid,V=w.isValidVisible,k=w.isInvalidVisible,A=w.label,C=w.hintText,K=w.ref,D=w.onAddressError,F=void 0===D?function(e){console.log(e)}:D,S=w.onAddressSelected,M=w.onChange,_=w.onBlur,B=e(w,["apiKey","countries","errorMessage","hasError","isValid","isValidVisible","isInvalidVisible","label","hintText","ref","onAddressError","onAddressSelected","onChange","onBlur"]),H=r([]),L=H[0],O=H[1],U=r(-1),q=U[0],R=U[1],W=o(null),$=i(),z=t(t({},h),$),G=function(){R(-1),O([])},J=s(d(500,function(e){N(e)}),[]),N=function(e,t){if(void 0===t&&(t=""),0===e.length)return O([]);var n="".concat("https://api.addressy.com/Capture/Interactive/Find/v1.1/json3.ws","?Key=").concat(b,"&Text=").concat(e,"&Container=").concat(t);return void 0!==x&&(n="".concat(n,"&Countries=").concat(x.join(","))),fetch(n).then(function(e){if(!e.ok)throw new Error("Something went wrong please try again");return e.json()}).then(function(e){var t;if((null===(t=null==e?void 0:e.Items)||void 0===t?void 0:t.length)>0&&e.Items[0].Error)throw new Error("Something went wrong please try again");return O(e.Items||[]),null}).catch(function(e){return F(e)}),null},P=function(e){fetch("".concat("https://api.addressy.com/Capture/Interactive/Retrieve/v1/json3.ws","?Key=").concat(b,"&Id=").concat(e)).then(function(e){if(!e.ok)throw new Error("Something went wrong please try again");return e.json()}).then(function(e){var t=e.Items[0],n=u(t);return S(n),G(),null}).catch(function(e){return F(e)})},Q=function(e){return"Address"===e.Type?P(e.Id):(N(e.Text,e.Id),null)},X=function(e){W.current&&e.target instanceof HTMLElement&&!W.current.contains(e.target)&&G()};return a(function(){return document.addEventListener("mousedown",X),function(){document.removeEventListener("mousedown",X)}}),c(function(){G()},{detectKeys:["Escape","Tab"]},[]),n.createElement(n.Fragment,null,n.createElement(f,t({"aria-activedescendant":L.length?"addressOptions-".concat(q):"","aria-owns":"found_addresses","aria-autocomplete":"both","aria-expanded":L.length?"true":"false",autoComplete:"off",hasError:j||!!I,errorMessage:I,hintText:null!=C?C:"Start typing your address or postcode",isValid:T,isValidVisible:V,isInvalidVisible:k,label:null!=A?A:"Home address",ref:K,required:!0,role:"combobox",type:"search"},B,{onKeyDown:function(e){"Enter"===e.key&&L[q]?(e.preventDefault(),"Address"===L[q].Type&&P(L[q].Id),N(L[q].Text,L[q].Id),R(-1)):"ArrowUp"===e.key?(e.preventDefault(),q<=-1&&R(L.length-1),R(q-1)):"ArrowDown"===e.key?(e.preventDefault(),q+1>=L.length&&R(0),R(q+1)):R(-1)},onChange:function(e){J(e.target.value),M&&M(e)},onBlur:function(e){var t=!!L.length;_&&!t&&_(e)}})),!!L.length&&n.createElement(n.Fragment,null,n.createElement(g,{role:"status","aria-live":"assertive"},!!L.length&&"We have found ".concat(L.length," result").concat(1!==L.length?"s":""," matching your search. Use up and down arrow keys to navigate")),n.createElement(v,{ref:W},n.createElement(y,{"aria-label":"found addresses",id:"found_addresses",role:"listbox",theme:z},L.map(function(e,t){return n.createElement(E,{tabIndex:0,id:"addressOptions-".concat(t),$isActive:t===q,key:e.Id,onClick:function(){Q(e)},onKeyDown:function(t){"Enter"===t.key&&Q(e)},role:"option","data-hj-suppress":!0,theme:z},n.createElement(m,{as:"span","data-hj-suppress":!0},e.Text," ",e.Description),"Address"!==e.Type&&n.createElement(n.Fragment,null,n.createElement(g,null,"press enter for these addresses"),n.createElement(p,{faIcon:l})))})))))};export{w as AddressLookup,w as default};
+import{__rest as e,__assign as n}from"../../../node_modules/tslib/tslib.es6.js";import t,{useState as r,useRef as o,useCallback as s,useEffect as a}from"react";import{faChevronRight as i}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{useKey as l}from"../../hooks/useKey.js";import{debounce as c}from"../../utils/debounce.js";import{removeCommasFromObjectStringValues as d}from"../../utils/Helper.js";import{Text as u}from"../Text/index.js";import{TextField as f}from"../TextField/index.js";import{IconFa as m}from"../IconFa/index.js";import{ScreenReaderOnly as p,ListWrapper as h,List as g,ListItem as v}from"./styles.js";var y=function(y){var E=y.apiKey,w=y.countries,b=y.errorMessage,x=y.hasError,I=y.isValid,j=y.isValidVisible,T=y.isInvalidVisible,V=y.label,k=y.hintText,A=y.ref,C=y.onAddressError,K=void 0===C?function(e){console.log(e)}:C,D=y.onAddressSelected,F=y.onChange,S=y.onBlur,M=e(y,["apiKey","countries","errorMessage","hasError","isValid","isValidVisible","isInvalidVisible","label","hintText","ref","onAddressError","onAddressSelected","onChange","onBlur"]),_=r([]),B=_[0],H=_[1],L=r(-1),O=L[0],U=L[1],q=o(null),R=function(){U(-1),H([])},W=s(c(500,function(e){$(e)}),[]),$=function(e,n){if(void 0===n&&(n=""),0===e.length)return H([]);var t="".concat("https://api.addressy.com/Capture/Interactive/Find/v1.1/json3.ws","?Key=").concat(E,"&Text=").concat(e,"&Container=").concat(n);return void 0!==w&&(t="".concat(t,"&Countries=").concat(w.join(","))),fetch(t).then(function(e){if(!e.ok)throw new Error("Something went wrong please try again");return e.json()}).then(function(e){var n;if((null===(n=null==e?void 0:e.Items)||void 0===n?void 0:n.length)>0&&e.Items[0].Error)throw new Error("Something went wrong please try again");return H(e.Items||[]),null}).catch(function(e){return K(e)}),null},z=function(e){fetch("".concat("https://api.addressy.com/Capture/Interactive/Retrieve/v1/json3.ws","?Key=").concat(E,"&Id=").concat(e)).then(function(e){if(!e.ok)throw new Error("Something went wrong please try again");return e.json()}).then(function(e){var n=e.Items[0],t=d(n);return D(t),R(),null}).catch(function(e){return K(e)})},G=function(e){return"Address"===e.Type?z(e.Id):($(e.Text,e.Id),null)},J=function(e){q.current&&e.target instanceof HTMLElement&&!q.current.contains(e.target)&&R()};return a(function(){return document.addEventListener("mousedown",J),function(){document.removeEventListener("mousedown",J)}}),l(function(){R()},{detectKeys:["Escape","Tab"]},[]),t.createElement(t.Fragment,null,t.createElement(f,n({"aria-activedescendant":B.length?"addressOptions-".concat(O):"","aria-owns":"found_addresses","aria-autocomplete":"both","aria-expanded":B.length?"true":"false",autoComplete:"off",hasError:x||!!b,errorMessage:b,hintText:null!=k?k:"Start typing your address or postcode",isValid:I,isValidVisible:j,isInvalidVisible:T,label:null!=V?V:"Home address",ref:A,required:!0,role:"combobox",type:"search"},M,{onKeyDown:function(e){"Enter"===e.key&&B[O]?(e.preventDefault(),"Address"===B[O].Type&&z(B[O].Id),$(B[O].Text,B[O].Id),U(-1)):"ArrowUp"===e.key?(e.preventDefault(),O<=-1&&U(B.length-1),U(O-1)):"ArrowDown"===e.key?(e.preventDefault(),O+1>=B.length&&U(0),U(O+1)):U(-1)},onChange:function(e){W(e.target.value),F&&F(e)},onBlur:function(e){var n=!!B.length;S&&!n&&S(e)}})),!!B.length&&t.createElement(t.Fragment,null,t.createElement(p,{role:"status","aria-live":"assertive"},!!B.length&&"We have found ".concat(B.length," result").concat(1!==B.length?"s":""," matching your search. Use up and down arrow keys to navigate")),t.createElement(h,{ref:q},t.createElement(g,{"aria-label":"found addresses",id:"found_addresses",role:"listbox"},B.map(function(e,n){return t.createElement(v,{tabIndex:0,id:"addressOptions-".concat(n),$isActive:n===O,key:e.Id,onClick:function(){G(e)},onKeyDown:function(n){"Enter"===n.key&&G(e)},role:"option","data-hj-suppress":!0},t.createElement(u,{as:"span","data-hj-suppress":!0},e.Text," ",e.Description),"Address"!==e.Type&&t.createElement(t.Fragment,null,t.createElement(p,null,"press enter for these addresses"),t.createElement(m,{faIcon:i})))})))))};export{y as AddressLookup,y as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/AddressLookup/index.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  useRef,\n  type InputHTMLAttributes,\n  type Ref,\n  type FocusEvent,\n  type ChangeEvent,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { faChevronRight } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { type AddressDataType, type AddressOptionsType } from \"../../types\";\nimport { useKey } from \"../../hooks/useKey\";\n\nimport { debounce } from \"../../utils/debounce\";\nimport { removeCommasFromObjectStringValues } from \"../../utils/Helper\";\nimport { Text } from \"../Text\";\nimport { TextField } from \"../TextField\";\nimport { IconFa } from \"../IconFa\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { ListWrapper, ListItem, ScreenReaderOnly, List } from \"./styles\";\n\nconst FIND_URL =\n  \"https://api.addressy.com/Capture/Interactive/Find/v1.1/json3.ws\";\nconst RETRIEVE_URL =\n  \"https://api.addressy.com/Capture/Interactive/Retrieve/v1/json3.ws\";\n\nexport type AddressLookupProps = InputHTMLAttributes<HTMLInputElement> & {\n  /** api key for loqate */\n  apiKey: string;\n  /** list of countries codes you want the address look up to search within */\n  countries?: string[];\n  /** callback function which is passed the selected address data */\n  onAddressSelected: (address: AddressDataType) => void;\n  /** error message */\n  errorMessage?: string;\n  /** when true a input has a red border */\n  hasError?: boolean;\n  /** flag which effects the check or cross icons to the right of the input */\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  /** label text */\n  label?: string;\n  /** hint text text */\n  hintText?: ReactNode;\n  /** callback function which is passed the error */\n  onAddressError?: (error: Error) => void;\n  /** onBlur handler */\n  onBlur?: (e: FocusEvent) => void;\n  /** attach a DOM reference variable to your component */\n  ref?: Ref<HTMLInputElement>;\n};\n\n/**\n * This component creates a combobox for a user to type in a post code or partial address and be presented with a of verified addresses.\n * We use Loqate (formerly Addressy and Postcode Anywhere) API v3, we have looked at v4 but it is more expensive without many benefits for our use case.\n * You will need a Loqate api key, the examples below use \"MG17-ZD93-FF33-KF13\" our development key.\n * This component is generally only used for country codes including \"GBR\", \"GGY\", \"IMN\", \"JEY\". An example of this behavior is included bellow.\n */\nexport const AddressLookup = ({\n  apiKey,\n  countries,\n  errorMessage,\n  hasError,\n  isValid,\n  isValidVisible,\n  isInvalidVisible,\n  label,\n  hintText,\n  ref,\n  onAddressError = (error: Error) => {\n    console.log(error);\n  },\n  onAddressSelected,\n  onChange,\n  onBlur,\n  ...props\n}: AddressLookupProps) => {\n  const [addressOptions, setAddressOptions] = useState<AddressOptionsType[]>(\n    [],\n  );\n  const [activeOption, setActiveOption] = useState(-1);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const clearOptions = () => {\n    setActiveOption(-1);\n    setAddressOptions([]);\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const searchDebounced = useCallback(\n    debounce(500, (query: string) => {\n      search(query);\n    }),\n    [],\n  );\n\n  const search = (query: string, id = \"\") => {\n    if (query.length === 0) return setAddressOptions([]);\n    let searchUrl = `${FIND_URL}?Key=${apiKey}&Text=${query}&Container=${id}`;\n    if (countries !== undefined) {\n      searchUrl = `${searchUrl}&Countries=${countries.join(\",\")}`;\n    }\n    fetch(searchUrl)\n      .then((res: Response) => {\n        if (!res.ok) throw new Error(\"Something went wrong please try again\");\n        return res.json();\n      })\n      .then((data: { Items: AddressOptionsType[] }) => {\n        // Occasionally get the error \"The query didn't respond fast enough, it may be too complex.\"\n        // returned with a 200 response. Example query \"n17 6t\"\n        if (data?.Items?.length > 0 && data.Items[0].Error)\n          throw new Error(\"Something went wrong please try again\");\n        setAddressOptions(data.Items || []);\n        return null;\n      })\n      .catch((err) => onAddressError(err as Error));\n    return null;\n  };\n\n  const getAddress = (id: string) => {\n    fetch(`${RETRIEVE_URL}?Key=${apiKey}&Id=${id}`)\n      .then((res: Response) => {\n        if (!res.ok) throw new Error(\"Something went wrong please try again\");\n        return res.json();\n      })\n      .then((data: { Items: AddressDataType[] }) => {\n        const selectedAddress = data.Items[0];\n        const selectedAddressWithoutCommas =\n          removeCommasFromObjectStringValues<AddressDataType>(selectedAddress);\n        onAddressSelected(selectedAddressWithoutCommas);\n        clearOptions();\n        return null;\n      })\n      .catch((err) => onAddressError(err as Error));\n  };\n\n  const selectAddress = (address: AddressOptionsType) => {\n    if (address.Type === \"Address\") return getAddress(address.Id);\n    search(address.Text, address.Id);\n    return null;\n  };\n\n  const handleKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === \"Enter\" && addressOptions[activeOption]) {\n      e.preventDefault();\n      if (addressOptions[activeOption].Type === \"Address\")\n        getAddress(addressOptions[activeOption].Id);\n      search(\n        addressOptions[activeOption].Text,\n        addressOptions[activeOption].Id,\n      );\n      setActiveOption(-1);\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      if (activeOption <= -1) setActiveOption(addressOptions.length - 1);\n      setActiveOption(activeOption - 1);\n    } else if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      if (activeOption + 1 >= addressOptions.length) setActiveOption(0);\n      setActiveOption(activeOption + 1);\n    } else {\n      setActiveOption(-1);\n    }\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    searchDebounced(e.target.value);\n    if (onChange) onChange(e);\n  };\n\n  const handleBlur = (e: FocusEvent) => {\n    const isOptionsOpen = !!addressOptions.length;\n    if (onBlur && !isOptionsOpen) onBlur(e);\n  };\n\n  const handleClickOutside = (event: MouseEvent) => {\n    if (\n      wrapperRef.current &&\n      event.target instanceof HTMLElement &&\n      !wrapperRef.current.contains(event.target)\n    )\n      clearOptions();\n  };\n\n  useEffect(() => {\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  });\n\n  useKey(\n    () => {\n      clearOptions();\n    },\n    {\n      detectKeys: [\"Escape\", \"Tab\"],\n    },\n    [],\n  );\n\n  return (\n    <>\n      <TextField\n        aria-activedescendant={\n          addressOptions.length ? `addressOptions-${activeOption}` : \"\"\n        }\n        aria-owns=\"found_addresses\"\n        aria-autocomplete=\"both\"\n        aria-expanded={addressOptions.length ? \"true\" : \"false\"}\n        autoComplete=\"off\"\n        hasError={hasError || !!errorMessage}\n        errorMessage={errorMessage}\n        hintText={hintText ?? \"Start typing your address or postcode\"}\n        isValid={isValid}\n        isValidVisible={isValidVisible}\n        isInvalidVisible={isInvalidVisible}\n        label={label ?? \"Home address\"}\n        ref={ref}\n        required\n        role=\"combobox\"\n        type=\"search\"\n        {...props}\n        onKeyDown={handleKeyDown}\n        onChange={handleChange}\n        onBlur={handleBlur}\n      />\n\n      {!!addressOptions.length && (\n        <>\n          <ScreenReaderOnly role=\"status\" aria-live=\"assertive\">\n            {!!addressOptions.length &&\n              `We have found ${addressOptions.length} result${\n                addressOptions.length !== 1 ? \"s\" : \"\"\n              } matching your search. Use up and down arrow keys to navigate`}\n          </ScreenReaderOnly>\n          <ListWrapper ref={wrapperRef}>\n            <List\n              aria-label=\"found addresses\"\n              id=\"found_addresses\"\n              role=\"listbox\"\n              theme={theme}\n            >\n              {addressOptions.map((address, index) => (\n                <ListItem\n                  tabIndex={0}\n                  id={`addressOptions-${index}`}\n                  $isActive={index === activeOption}\n                  key={address.Id}\n                  onClick={() => {\n                    selectAddress(address);\n                  }}\n                  onKeyDown={(e) => {\n                    if (e.key === \"Enter\") {\n                      selectAddress(address);\n                    }\n                  }}\n                  role=\"option\"\n                  data-hj-suppress\n                  theme={theme}\n                >\n                  <Text as=\"span\" data-hj-suppress>\n                    {address.Text} {address.Description}\n                  </Text>\n                  {address.Type !== \"Address\" && (\n                    <>\n                      <ScreenReaderOnly>\n                        press enter for these addresses\n                      </ScreenReaderOnly>\n                      <IconFa faIcon={faChevronRight} />\n                    </>\n                  )}\n                </ListItem>\n              ))}\n            </List>\n          </ListWrapper>\n        </>\n      )}\n    </>\n  );\n};\n\nexport default AddressLookup;\n"],"names":["AddressLookup","_a","apiKey","countries","errorMessage","hasError","isValid","isValidVisible","isInvalidVisible","label","hintText","ref","_b","onAddressError","error","console","log","onAddressSelected","onChange","onBlur","props","__rest","_c","useState","addressOptions","setAddressOptions","_d","activeOption","setActiveOption","wrapperRef","useRef","foundTheme","useTheme","theme","__assign","defaultTheme","clearOptions","searchDebounced","useCallback","debounce","query","search","id","length","searchUrl","concat","undefined","join","fetch","then","res","ok","Error","json","data","Items","catch","err","getAddress","selectedAddress","selectedAddressWithoutCommas","removeCommasFromObjectStringValues","selectAddress","address","Type","Id","Text","handleClickOutside","event","current","target","HTMLElement","contains","useEffect","document","addEventListener","removeEventListener","useKey","detectKeys","React","createElement","Fragment","TextField","autoComplete","required","role","type","onKeyDown","e","key","preventDefault","value","isOptionsOpen","ScreenReaderOnly","ListWrapper","List","map","index","ListItem","tabIndex","onClick","as","Description","IconFa","faIcon","faChevronRight"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/AddressLookup/index.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  useRef,\n  type InputHTMLAttributes,\n  type Ref,\n  type FocusEvent,\n  type ChangeEvent,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { faChevronRight } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { type AddressDataType, type AddressOptionsType } from \"../../types\";\nimport { useKey } from \"../../hooks/useKey\";\n\nimport { debounce } from \"../../utils/debounce\";\nimport { removeCommasFromObjectStringValues } from \"../../utils/Helper\";\nimport { Text } from \"../Text\";\nimport { TextField } from \"../TextField\";\nimport { IconFa } from \"../IconFa\";\n\nimport { ListWrapper, ListItem, ScreenReaderOnly, List } from \"./styles\";\n\nconst FIND_URL =\n  \"https://api.addressy.com/Capture/Interactive/Find/v1.1/json3.ws\";\nconst RETRIEVE_URL =\n  \"https://api.addressy.com/Capture/Interactive/Retrieve/v1/json3.ws\";\n\nexport type AddressLookupProps = InputHTMLAttributes<HTMLInputElement> & {\n  /** api key for loqate */\n  apiKey: string;\n  /** list of countries codes you want the address look up to search within */\n  countries?: string[];\n  /** callback function which is passed the selected address data */\n  onAddressSelected: (address: AddressDataType) => void;\n  /** error message */\n  errorMessage?: string;\n  /** when true a input has a red border */\n  hasError?: boolean;\n  /** flag which effects the check or cross icons to the right of the input */\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  /** label text */\n  label?: string;\n  /** hint text text */\n  hintText?: ReactNode;\n  /** callback function which is passed the error */\n  onAddressError?: (error: Error) => void;\n  /** onBlur handler */\n  onBlur?: (e: FocusEvent) => void;\n  /** attach a DOM reference variable to your component */\n  ref?: Ref<HTMLInputElement>;\n};\n\n/**\n * This component creates a combobox for a user to type in a post code or partial address and be presented with a of verified addresses.\n * We use Loqate (formerly Addressy and Postcode Anywhere) API v3, we have looked at v4 but it is more expensive without many benefits for our use case.\n * You will need a Loqate api key, the examples below use \"MG17-ZD93-FF33-KF13\" our development key.\n * This component is generally only used for country codes including \"GBR\", \"GGY\", \"IMN\", \"JEY\". An example of this behavior is included bellow.\n */\nexport const AddressLookup = ({\n  apiKey,\n  countries,\n  errorMessage,\n  hasError,\n  isValid,\n  isValidVisible,\n  isInvalidVisible,\n  label,\n  hintText,\n  ref,\n  onAddressError = (error: Error) => {\n    console.log(error);\n  },\n  onAddressSelected,\n  onChange,\n  onBlur,\n  ...props\n}: AddressLookupProps) => {\n  const [addressOptions, setAddressOptions] = useState<AddressOptionsType[]>(\n    [],\n  );\n  const [activeOption, setActiveOption] = useState(-1);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const clearOptions = () => {\n    setActiveOption(-1);\n    setAddressOptions([]);\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const searchDebounced = useCallback(\n    debounce(500, (query: string) => {\n      search(query);\n    }),\n    [],\n  );\n\n  const search = (query: string, id = \"\") => {\n    if (query.length === 0) return setAddressOptions([]);\n    let searchUrl = `${FIND_URL}?Key=${apiKey}&Text=${query}&Container=${id}`;\n    if (countries !== undefined) {\n      searchUrl = `${searchUrl}&Countries=${countries.join(\",\")}`;\n    }\n    fetch(searchUrl)\n      .then((res: Response) => {\n        if (!res.ok) throw new Error(\"Something went wrong please try again\");\n        return res.json();\n      })\n      .then((data: { Items: AddressOptionsType[] }) => {\n        // Occasionally get the error \"The query didn't respond fast enough, it may be too complex.\"\n        // returned with a 200 response. Example query \"n17 6t\"\n        if (data?.Items?.length > 0 && data.Items[0].Error)\n          throw new Error(\"Something went wrong please try again\");\n        setAddressOptions(data.Items || []);\n        return null;\n      })\n      .catch((err) => onAddressError(err as Error));\n    return null;\n  };\n\n  const getAddress = (id: string) => {\n    fetch(`${RETRIEVE_URL}?Key=${apiKey}&Id=${id}`)\n      .then((res: Response) => {\n        if (!res.ok) throw new Error(\"Something went wrong please try again\");\n        return res.json();\n      })\n      .then((data: { Items: AddressDataType[] }) => {\n        const selectedAddress = data.Items[0];\n        const selectedAddressWithoutCommas =\n          removeCommasFromObjectStringValues<AddressDataType>(selectedAddress);\n        onAddressSelected(selectedAddressWithoutCommas);\n        clearOptions();\n        return null;\n      })\n      .catch((err) => onAddressError(err as Error));\n  };\n\n  const selectAddress = (address: AddressOptionsType) => {\n    if (address.Type === \"Address\") return getAddress(address.Id);\n    search(address.Text, address.Id);\n    return null;\n  };\n\n  const handleKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === \"Enter\" && addressOptions[activeOption]) {\n      e.preventDefault();\n      if (addressOptions[activeOption].Type === \"Address\")\n        getAddress(addressOptions[activeOption].Id);\n      search(\n        addressOptions[activeOption].Text,\n        addressOptions[activeOption].Id,\n      );\n      setActiveOption(-1);\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      if (activeOption <= -1) setActiveOption(addressOptions.length - 1);\n      setActiveOption(activeOption - 1);\n    } else if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      if (activeOption + 1 >= addressOptions.length) setActiveOption(0);\n      setActiveOption(activeOption + 1);\n    } else {\n      setActiveOption(-1);\n    }\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    searchDebounced(e.target.value);\n    if (onChange) onChange(e);\n  };\n\n  const handleBlur = (e: FocusEvent) => {\n    const isOptionsOpen = !!addressOptions.length;\n    if (onBlur && !isOptionsOpen) onBlur(e);\n  };\n\n  const handleClickOutside = (event: MouseEvent) => {\n    if (\n      wrapperRef.current &&\n      event.target instanceof HTMLElement &&\n      !wrapperRef.current.contains(event.target)\n    )\n      clearOptions();\n  };\n\n  useEffect(() => {\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  });\n\n  useKey(\n    () => {\n      clearOptions();\n    },\n    {\n      detectKeys: [\"Escape\", \"Tab\"],\n    },\n    [],\n  );\n\n  return (\n    <>\n      <TextField\n        aria-activedescendant={\n          addressOptions.length ? `addressOptions-${activeOption}` : \"\"\n        }\n        aria-owns=\"found_addresses\"\n        aria-autocomplete=\"both\"\n        aria-expanded={addressOptions.length ? \"true\" : \"false\"}\n        autoComplete=\"off\"\n        hasError={hasError || !!errorMessage}\n        errorMessage={errorMessage}\n        hintText={hintText ?? \"Start typing your address or postcode\"}\n        isValid={isValid}\n        isValidVisible={isValidVisible}\n        isInvalidVisible={isInvalidVisible}\n        label={label ?? \"Home address\"}\n        ref={ref}\n        required\n        role=\"combobox\"\n        type=\"search\"\n        {...props}\n        onKeyDown={handleKeyDown}\n        onChange={handleChange}\n        onBlur={handleBlur}\n      />\n\n      {!!addressOptions.length && (\n        <>\n          <ScreenReaderOnly role=\"status\" aria-live=\"assertive\">\n            {!!addressOptions.length &&\n              `We have found ${addressOptions.length} result${\n                addressOptions.length !== 1 ? \"s\" : \"\"\n              } matching your search. Use up and down arrow keys to navigate`}\n          </ScreenReaderOnly>\n          <ListWrapper ref={wrapperRef}>\n            <List\n              aria-label=\"found addresses\"\n              id=\"found_addresses\"\n              role=\"listbox\"\n            >\n              {addressOptions.map((address, index) => (\n                <ListItem\n                  tabIndex={0}\n                  id={`addressOptions-${index}`}\n                  $isActive={index === activeOption}\n                  key={address.Id}\n                  onClick={() => {\n                    selectAddress(address);\n                  }}\n                  onKeyDown={(e) => {\n                    if (e.key === \"Enter\") {\n                      selectAddress(address);\n                    }\n                  }}\n                  role=\"option\"\n                  data-hj-suppress\n                >\n                  <Text as=\"span\" data-hj-suppress>\n                    {address.Text} {address.Description}\n                  </Text>\n                  {address.Type !== \"Address\" && (\n                    <>\n                      <ScreenReaderOnly>\n                        press enter for these addresses\n                      </ScreenReaderOnly>\n                      <IconFa faIcon={faChevronRight} />\n                    </>\n                  )}\n                </ListItem>\n              ))}\n            </List>\n          </ListWrapper>\n        </>\n      )}\n    </>\n  );\n};\n\nexport default AddressLookup;\n"],"names":["AddressLookup","_a","apiKey","countries","errorMessage","hasError","isValid","isValidVisible","isInvalidVisible","label","hintText","ref","_b","onAddressError","error","console","log","onAddressSelected","onChange","onBlur","props","__rest","_c","useState","addressOptions","setAddressOptions","_d","activeOption","setActiveOption","wrapperRef","useRef","clearOptions","searchDebounced","useCallback","debounce","query","search","id","length","searchUrl","concat","undefined","join","fetch","then","res","ok","Error","json","data","Items","catch","err","getAddress","selectedAddress","selectedAddressWithoutCommas","removeCommasFromObjectStringValues","selectAddress","address","Type","Id","Text","handleClickOutside","event","current","target","HTMLElement","contains","useEffect","document","addEventListener","removeEventListener","useKey","detectKeys","React","createElement","Fragment","TextField","autoComplete","required","role","type","onKeyDown","e","key","preventDefault","value","isOptionsOpen","ScreenReaderOnly","ListWrapper","List","map","index","ListItem","tabIndex","$isActive","onClick","as","Description","IconFa","faIcon","faChevronRight"],"mappings":"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"}

package/lib/src/components/AddressLookup/styles.d.ts

@@ -1,17 +1,12 @@
-import { type ThemeType } from "../../types";
 interface ListWrapperProps extends React.HTMLProps<HTMLDivElement> {
     tabIndex?: number;
 }
-type ListProps = {
-    theme: ThemeType;
-    $isActive?: boolean;
-};
 export declare const ListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ListWrapperProps>> & string;
-export declare const List: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, ListProps & {
-    ref?: React.Ref<HTMLUListElement>;
+export declare const List: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
+    $isActive?: boolean;
 }>> & string;
-export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ListProps & {
-    ref?: React.Ref<HTMLLIElement>;
+export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
+    $isActive?: boolean;
 }>> & string;
 export declare const ScreenReaderOnly: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";var i,r,e,t,p=o.div(i||(i=n(["\n  position: relative;\n"],["\n  position: relative;\n"]))),d=o.ul(r||(r=n(["\n  background-color: ",";\n  border-radius: 3px;\n  border: 2px solid #ccc;\n  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);\n  list-style: none;\n  margin-top: 0;\n  max-height: 400px;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  width: 100%;\n  z-index: 999;\n"],["\n  background-color: ",";\n  border-radius: 3px;\n  border: 2px solid #ccc;\n  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);\n  list-style: none;\n  margin-top: 0;\n  max-height: 400px;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  width: 100%;\n  z-index: 999;\n"])),function(n){return n.theme.colors.backgroundLight}),a=o.li(e||(e=n(["\n  align-items: center;\n  background-color: ",";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  padding: 5px;\n  &:hover,\n  &:focus {\n    background-color: #ddd;\n  }\n"],["\n  align-items: center;\n  background-color: ",";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  padding: 5px;\n  &:hover,\n  &:focus {\n    background-color: #ddd;\n  }\n"])),function(n){var o=n.theme;return n.$isActive?o.colors.backgroundMid:o.colors.backgroundLight}),s=o.div(t||(t=n(["\n  border: 0px;\n  clip: rect(0px, 0px, 0px, 0px);\n  height: 1px;\n  margin-bottom: -1px;\n  margin-right: -1px;\n  overflow: hidden;\n  padding: 0px;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n"],["\n  border: 0px;\n  clip: rect(0px, 0px, 0px, 0px);\n  height: 1px;\n  margin-bottom: -1px;\n  margin-right: -1px;\n  overflow: hidden;\n  padding: 0px;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n"])));export{d as List,a as ListItem,p as ListWrapper,s as ScreenReaderOnly};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";var r,i,e,t,p=o.div(r||(r=n(["\n  position: relative;\n"],["\n  position: relative;\n"]))),d=o.ul(i||(i=n(["\n  background-color: var(--clr-background-light, #ffffff);\n  border-radius: 3px;\n  border: 2px solid #ccc;\n  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);\n  list-style: none;\n  margin-top: 0;\n  max-height: 400px;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  width: 100%;\n  z-index: 999;\n"],["\n  background-color: var(--clr-background-light, #ffffff);\n  border-radius: 3px;\n  border: 2px solid #ccc;\n  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);\n  list-style: none;\n  margin-top: 0;\n  max-height: 400px;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  width: 100%;\n  z-index: 999;\n"]))),a=o.li(e||(e=n(["\n  align-items: center;\n  background-color: ",";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  padding: 5px;\n  &:hover,\n  &:focus {\n    background-color: #ddd;\n  }\n"],["\n  align-items: center;\n  background-color: ",";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  padding: 5px;\n  &:hover,\n  &:focus {\n    background-color: #ddd;\n  }\n"])),function(n){return n.$isActive?"var(--clr-background-mid, #f0f0f0)":"var(--clr-background-light, #ffffff)"}),c=o.div(t||(t=n(["\n  border: 0px;\n  clip: rect(0px, 0px, 0px, 0px);\n  height: 1px;\n  margin-bottom: -1px;\n  margin-right: -1px;\n  overflow: hidden;\n  padding: 0px;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n"],["\n  border: 0px;\n  clip: rect(0px, 0px, 0px, 0px);\n  height: 1px;\n  margin-bottom: -1px;\n  margin-right: -1px;\n  overflow: hidden;\n  padding: 0px;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n"])));export{d as List,a as ListItem,p as ListWrapper,c as ScreenReaderOnly};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/AddressLookup/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ninterface ListWrapperProps extends React.HTMLProps<HTMLDivElement> {\n  tabIndex?: number;\n}\n\ntype ListProps = {\n  theme: ThemeType;\n  $isActive?: boolean;\n};\n\nexport const ListWrapper = styled.div<ListWrapperProps>`\n  position: relative;\n`;\n\nexport const List = styled.ul<\n  ListProps & { ref?: React.Ref<HTMLUListElement> }\n>`\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  border-radius: 3px;\n  border: 2px solid #ccc;\n  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);\n  list-style: none;\n  margin-top: 0;\n  max-height: 400px;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  width: 100%;\n  z-index: 999;\n`;\n\nexport const ListItem = styled.li<\n  ListProps & {\n    ref?: React.Ref<HTMLLIElement>;\n  }\n>`\n  align-items: center;\n  background-color: ${({ theme, $isActive }: ListProps) =>\n    $isActive ? theme.colors.backgroundMid : theme.colors.backgroundLight};\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  padding: 5px;\n  &:hover,\n  &:focus {\n    background-color: #ddd;\n  }\n`;\n\n// TODO move to its own component\nexport const ScreenReaderOnly = styled.div`\n  border: 0px;\n  clip: rect(0px, 0px, 0px, 0px);\n  height: 1px;\n  margin-bottom: -1px;\n  margin-right: -1px;\n  overflow: hidden;\n  padding: 0px;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],"names":["ListWrapper","styled","div","templateObject_1","__makeTemplateObject","List","ul","templateObject_2","_a","theme","colors","backgroundLight","ListItem","li","templateObject_3","$isActive","backgroundMid","ScreenReaderOnly","templateObject_4"],"mappings":"iHAYO,YAAMA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,6BAAA,CAAkB,gCAI1CC,EAAOJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,yBAAA,kQAAA,CAE5B,yBACgE,oQAA3C,SAACI,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,GAcxBC,EAAWX,EAAOY,GAAEC,IAAAA,EAAAV,EAAA,CAAA,iDAAA,4JAAA,CAIhC,iDAGwE,8JADnD,SAACI,OAAEC,EAAKD,EAAAC,MAC1B,OADqCD,EAAAO,UACzBN,EAAMC,OAAOM,cAAgBP,EAAMC,OAAOC,eAAtD,GAYSM,EAAmBhB,EAAOC,IAAGgB,IAAAA,EAAAd,EAAA,CAAA,4NAAA,CAAA"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/AddressLookup/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\ninterface ListWrapperProps extends React.HTMLProps<HTMLDivElement> {\n  tabIndex?: number;\n}\n\ntype ListProps = {\n  $isActive?: boolean;\n};\n\nexport const ListWrapper = styled.div<ListWrapperProps>`\n  position: relative;\n`;\n\nexport const List = styled.ul<{\n  $isActive?: boolean;\n}>`\n  background-color: var(--clr-background-light, #ffffff);\n  border-radius: 3px;\n  border: 2px solid #ccc;\n  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);\n  list-style: none;\n  margin-top: 0;\n  max-height: 400px;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  width: 100%;\n  z-index: 999;\n`;\n\nexport const ListItem = styled.li<{\n  $isActive?: boolean;\n}>`\n  align-items: center;\n  background-color: ${({ $isActive }: ListProps) =>\n    $isActive\n      ? \"var(--clr-background-mid, #f0f0f0)\"\n      : \"var(--clr-background-light, #ffffff)\"};\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  padding: 5px;\n  &:hover,\n  &:focus {\n    background-color: #ddd;\n  }\n`;\n\n// TODO move to its own component\nexport const ScreenReaderOnly = styled.div`\n  border: 0px;\n  clip: rect(0px, 0px, 0px, 0px);\n  height: 1px;\n  margin-bottom: -1px;\n  margin-right: -1px;\n  overflow: hidden;\n  padding: 0px;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],"names":["ListWrapper","styled","div","templateObject_1","__makeTemplateObject","List","ul","templateObject_2","ListItem","li","templateObject_3","_a","$isActive","ScreenReaderOnly","templateObject_4"],"mappings":"iHAUO,YAAMA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,6BAAA,CAAkB,gCAI1CC,EAAOJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,4TAAA,CAE3B,+TAeWI,EAAWP,EAAOQ,GAAEC,IAAAA,EAAAN,EAAA,CAAA,iDAAA,4JAAA,CAE/B,iDAK4C,8JAHxB,SAACO,GACnB,OAD8BA,EAAAC,UAE1B,qCACA,sCAFJ,GAcSC,EAAmBZ,EAAOC,IAAGY,IAAAA,EAAAV,EAAA,CAAA,4NAAA,CAAA"}

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

@@ -1,7 +1,7 @@
 import React, { type ReactNode } from "react";
-import { type ThemeType } from "../types";
-export declare const TestThemeWrapper: ({ children, theme, }: {
-    theme?: ThemeType;
+import { type ThemeNameType } from "../types";
+export declare const TestThemeWrapper: ({ children, themeName, }: {
+    themeName: ThemeNameType;
     children?: ReactNode;
 }) => React.JSX.Element;
 export declare const AllThemesWrapper: ({ children }: {

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

@@ -1,15 +1,16 @@
 import React, { type ImgHTMLAttributes } from "react";
-export type AvatarProps = ImgHTMLAttributes<HTMLElement> & {
+import { type ThemeNameType } from "../../types";
+/**
+ *
+ * You can use an avatar to display ownership of an item of content. If you pass a URL of an image that will be displayed otherwise the first letter of the name will be used to display a branded avatar.
+ */
+export declare function Avatar({ url, name, size, alt, themeName, ...rest }: ImgHTMLAttributes<HTMLElement> & {
     /** name of user/entity */
     name?: string;
     /** image url */
     url?: string;
     /** image size */
     size?: "s" | "m" | "l" | "xl";
-};
-/**
- *
- * You can use an avatar to display ownership of an item of content. If you pass a URL of an image that will be displayed otherwise the first letter of the name will be used to display a branded avatar.
- */
-export declare function Avatar({ url, name, size, alt, ...rest }: AvatarProps): React.JSX.Element;
+    themeName?: ThemeNameType;
+}): React.JSX.Element;
 export default Avatar;

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

@@ -1,2 +1,2 @@
-import{__rest as t,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{useTheme as a}from"styled-components";import{crukTheme as e}from"../../themes/cruk.js";import{StyledAvatar as n}from"./styles.js";function m(m){var i=m.url,s=m.name,c=m.size,p=void 0===c?"m":c,l=m.alt,u=void 0===l?"":l,f=t(m,["url","name","size","alt"]),v=a(),d=r(r({},e),v);return o.createElement(n,r({},f,{$size:d.avatar[p||"m"],src:function(){if(i)return i;var t=s&&"string"==typeof s&&"Anonymous"!==s&&/[a-z]/i.exec(s[0].trim())?"icon-avatar-".concat(s[0].trim().toUpperCase(),".png"):"icon-avatar-Anonymous.png";return"".concat(d.avatar.path).concat(t)}(),alt:u}))}export{m as Avatar,m as default};
+import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import a from"react";import{StyledAvatar as t}from"./styles.js";var s=function(e){var r=e.url,a=e.name,t=e.themeName;if(r)return r;var s=a&&"string"==typeof a&&"Anonymous"!==a&&/[a-z]/i.exec(a[0].trim())?"icon-avatar-".concat(a[0].trim().toUpperCase(),".png"):"icon-avatar-Anonymous.png",c="".concat(function(e){switch(e){case"su2c":return"https://rcl.assets.cancerresearchuk.org/images/avatar/su2c/";case"bowelbabe":return"https://rcl.assets.cancerresearchuk.org/images/avatar/bowelbabe/";case"rfl":return"https://rcl.assets.cancerresearchuk.org/images/avatar/rfl/";default:return"https://rcl.assets.cancerresearchuk.org/images/avatar/cruk2/"}}(t)).concat(s);return c};function c(c){var n=c.url,o=c.name,m=c.size,u=void 0===m?"m":m,i=c.alt,l=void 0===i?"":i,h=c.themeName,p=void 0===h?"cruk":h,v=e(c,["url","name","size","alt","themeName"]);return a.createElement(t,r({},v,{$size:u,src:s({url:n,name:o,themeName:p}),alt:l}))}export{c as Avatar,c as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Avatar/index.tsx"],"sourcesContent":["import React, { type ImgHTMLAttributes } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StyledAvatar } from \"./styles\";\n\nexport type AvatarProps = ImgHTMLAttributes<HTMLElement> & {\n  /** name of user/entity */\n  name?: string;\n  /** image url */\n  url?: string;\n  /** image size */\n  size?: \"s\" | \"m\" | \"l\" | \"xl\";\n};\n\n/**\n *\n * You can use an avatar to display ownership of an item of content. If you pass a URL of an image that will be displayed otherwise the first letter of the name will be used to display a branded avatar.\n */\nexport function Avatar({\n  url,\n  name,\n  size = \"m\",\n  alt = \"\",\n  ...rest\n}: AvatarProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const avatarUrl = () => {\n    if (url) return url;\n    const fileName =\n      name &&\n      typeof name === \"string\" &&\n      name !== \"Anonymous\" &&\n      /[a-z]/i.exec(name[0].trim())\n        ? `icon-avatar-${name[0].trim().toUpperCase()}.png`\n        : \"icon-avatar-Anonymous.png\";\n\n    return `${theme.avatar.path}${fileName}`;\n  };\n\n  return (\n    <StyledAvatar\n      {...rest}\n      $size={theme.avatar[size || \"m\"]}\n      src={avatarUrl()}\n      alt={alt}\n    />\n  );\n}\n\nexport default Avatar;\n"],"names":["Avatar","_a","url","name","_b","size","_c","alt","rest","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","createElement","StyledAvatar","avatar","src","fileName","exec","trim","concat","toUpperCase","path","avatarUrl"],"mappings":"8OAoBM,SAAUA,EAAOC,GACrB,IAAAC,QACAC,SACAC,EAAAH,EAAAI,KAAAA,OAAI,IAAAD,EAAG,MACPE,EAAAL,EAAAM,IAAAA,OAAG,IAAAD,EAAG,KACHE,EAAIC,EAAAR,EALc,CAAA,MAAA,OAAA,OAAA,QAOfS,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAgBL,OACEK,EAAAC,cAACC,EAAYJ,EAAA,GACPL,SACGI,EAAMM,OAAOb,GAAQ,KAC5Bc,IAjBc,WAChB,GAAIjB,EAAK,OAAOA,EAChB,IAAMkB,EACJjB,GACgB,iBAATA,GACE,cAATA,GACA,SAASkB,KAAKlB,EAAK,GAAGmB,QAClB,eAAAC,OAAepB,EAAK,GAAGmB,OAAOE,cAAa,QAC3C,4BAEN,MAAO,GAAAD,OAAGX,EAAMM,OAAOO,MAAIF,OAAGH,EAChC,CAMSM,GACLnB,IAAKA,IAGX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Avatar/index.tsx"],"sourcesContent":["import React, { type ImgHTMLAttributes } from \"react\";\n\nimport { StyledAvatar } from \"./styles\";\nimport { type ThemeNameType } from \"../../types\";\n\nconst crukAvatarBaseUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/avatar/cruk2/\";\nconst bowelbabeAvatarBaseUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/avatar/bowelbabe/\";\nconst rflAvatarBaseUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/avatar/rfl/\";\nconst su2cAvatarBaseUrl =\n  \"https://rcl.assets.cancerresearchuk.org/images/avatar/su2c/\";\n\nfunction getAvatarBaseUrl(themeName: ThemeNameType) {\n  switch (themeName) {\n    case \"su2c\":\n      return su2cAvatarBaseUrl;\n    case \"bowelbabe\":\n      return bowelbabeAvatarBaseUrl;\n    case \"rfl\":\n      return rflAvatarBaseUrl;\n    default:\n      return crukAvatarBaseUrl;\n  }\n}\n\nconst avatarUrl = ({\n  url,\n  name,\n  themeName,\n}: {\n  url?: string;\n  name?: string;\n  themeName: ThemeNameType;\n}) => {\n  if (url) return url;\n  const fileName =\n    name &&\n    typeof name === \"string\" &&\n    name !== \"Anonymous\" &&\n    /[a-z]/i.exec(name[0].trim())\n      ? `icon-avatar-${name[0].trim().toUpperCase()}.png`\n      : \"icon-avatar-Anonymous.png\";\n  const fullUrl = `${getAvatarBaseUrl(themeName)}${fileName}`;\n  return fullUrl;\n};\n\n/**\n *\n * You can use an avatar to display ownership of an item of content. If you pass a URL of an image that will be displayed otherwise the first letter of the name will be used to display a branded avatar.\n */\nexport function Avatar({\n  url,\n  name,\n  size = \"m\",\n  alt = \"\",\n  themeName = \"cruk\",\n  ...rest\n}: ImgHTMLAttributes<HTMLElement> & {\n  /** name of user/entity */\n  name?: string;\n  /** image url */\n  url?: string;\n  /** image size */\n  size?: \"s\" | \"m\" | \"l\" | \"xl\";\n  themeName?: ThemeNameType;\n}) {\n  return (\n    <StyledAvatar\n      {...rest}\n      $size={size}\n      src={avatarUrl({ url, name, themeName })}\n      alt={alt}\n    />\n  );\n}\n\nexport default Avatar;\n"],"names":["avatarUrl","_a","url","name","themeName","fileName","exec","trim","concat","toUpperCase","fullUrl","getAvatarBaseUrl","Avatar","_b","size","_c","alt","_d","rest","__rest","React","createElement","StyledAvatar","__assign","$size","src"],"mappings":"gJA2BA,IAAMA,EAAY,SAACC,GACjB,IAAAC,QACAC,EAAIF,EAAAE,KACJC,EAASH,EAAAG,UAMT,GAAIF,EAAK,OAAOA,EAChB,IAAMG,EACJF,GACgB,iBAATA,GACE,cAATA,GACA,SAASG,KAAKH,EAAK,GAAGI,QAClB,eAAAC,OAAeL,EAAK,GAAGI,OAAOE,cAAa,QAC3C,4BACAC,EAAU,GAAAF,OA9BlB,SAA0BJ,GACxB,OAAQA,GACN,IAAK,OACH,MALJ,8DAME,IAAK,YACH,MAXJ,mEAYE,IAAK,MACH,MAXJ,6DAYE,QACE,MAjBJ,+DAmBF,CAmBqBO,CAAiBP,IAAUI,OAAGH,GACjD,OAAOK,CACT,EAMM,SAAUE,EAAOX,GACrB,IAAAC,EAAGD,EAAAC,IACHC,EAAIF,EAAAE,KACJU,EAAAZ,EAAAa,KAAAA,OAAI,IAAAD,EAAG,IAAGA,EACVE,EAAAd,EAAAe,IAAAA,OAAG,IAAAD,EAAG,GAAEA,EACRE,EAAAhB,EAAAG,UAAAA,OAAS,IAAAa,EAAG,OAAMA,EACfC,EAAIC,EAAAlB,EANc,yCAgBrB,OACEmB,EAAAC,cAACC,EAAYC,EAAA,GACPL,EAAI,CAAAM,MACDV,EACPW,IAAKzB,EAAU,CAAEE,IAAGA,EAAEC,KAAIA,EAAEC,UAASA,IACrCY,IAAKA,IAGX"}

package/lib/src/components/Avatar/styles.d.ts

@@ -1,6 +1,4 @@
-import { type ThemeType } from "../../types";
 export declare const StyledAvatar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
-    $size?: string;
-    theme: ThemeType;
+    $size: "s" | "m" | "l" | "xl";
 }>> & string;
 export default StyledAvatar;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as r}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";var e,n=o.img(e||(e=r(["\n  box-sizing: border-box;\n  border-radius: 50%;\n  height: ",";\n  object-fit: cover;\n  width: ",";\n  border-style: solid;\n  border-width: 2px;\n  border-color: ",";\n"],["\n  box-sizing: border-box;\n  border-radius: 50%;\n  height: ",";\n  object-fit: cover;\n  width: ",";\n  border-style: solid;\n  border-width: 2px;\n  border-color: ",";\n"])),function(r){return r.$size},function(r){return r.$size},function(r){return r.theme.colors.avatarBorder});export{n as StyledAvatar,n as default};
+import{__makeTemplateObject as a}from"../../../node_modules/tslib/tslib.es6.js";import r from"styled-components";var e,t=r.img(e||(e=a(["\n  --avatar-size-s: 32px;\n  --avatar-size-m: 48px;\n  --avatar-size-l: 64px;\n  --avatar-size-xl: 128px;\n\n  --_avatar-size: var(--avatar-size-m);\n  --_avatar-size: var(--avatar-size-",");\n\n  height: var(--_avatar-size);\n  width: var(--_avatar-size);\n  box-sizing: border-box;\n  border-radius: 50%;\n  object-fit: cover;\n  border-style: solid;\n  border-width: 2px;\n  border-color: var(--clr-avatar-border, #cccccc);\n"],["\n  --avatar-size-s: 32px;\n  --avatar-size-m: 48px;\n  --avatar-size-l: 64px;\n  --avatar-size-xl: 128px;\n\n  --_avatar-size: var(--avatar-size-m);\n  --_avatar-size: var(--avatar-size-",");\n\n  height: var(--_avatar-size);\n  width: var(--_avatar-size);\n  box-sizing: border-box;\n  border-radius: 50%;\n  object-fit: cover;\n  border-style: solid;\n  border-width: 2px;\n  border-color: var(--clr-avatar-border, #cccccc);\n"])),function(a){return a.$size});export{t as StyledAvatar,t as default};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Avatar/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StyledAvatar = styled.img<{\n  $size?: string;\n  theme: ThemeType;\n}>`\n  box-sizing: border-box;\n  border-radius: 50%;\n  height: ${({ $size }) => $size};\n  object-fit: cover;\n  width: ${({ $size }) => $size};\n  border-style: solid;\n  border-width: 2px;\n  border-color: ${({ theme }) => theme.colors.avatarBorder};\n`;\n\nexport default StyledAvatar;\n"],"names":["StyledAvatar","styled","img","templateObject_1","__makeTemplateObject","_a","$size","theme","colors","avatarBorder"],"mappings":"iHAGO,MAAMA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,iEAAA,qCAAA,oEAAA,OAAA,CAGpC,iEAG8B,qCAED,oEAG2B,SAL9C,SAACC,GAAc,OAAPA,EAAAC,KAAO,EAEhB,SAACD,GAAc,OAAPA,EAAAC,KAAO,EAGR,SAACD,GAAc,OAAPA,EAAAE,MAAaC,OAAOC,YAAb"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Avatar/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledAvatar = styled.img<{\n  $size: \"s\" | \"m\" | \"l\" | \"xl\";\n}>`\n  --avatar-size-s: 32px;\n  --avatar-size-m: 48px;\n  --avatar-size-l: 64px;\n  --avatar-size-xl: 128px;\n\n  --_avatar-size: var(--avatar-size-m);\n  --_avatar-size: var(--avatar-size-${({ $size }) => $size});\n\n  height: var(--_avatar-size);\n  width: var(--_avatar-size);\n  box-sizing: border-box;\n  border-radius: 50%;\n  object-fit: cover;\n  border-style: solid;\n  border-width: 2px;\n  border-color: var(--clr-avatar-border, #cccccc);\n`;\n\nexport default StyledAvatar;\n"],"names":["StyledAvatar","styled","img","templateObject_1","__makeTemplateObject","_a","$size"],"mappings":"iHAEO,MAAMA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,8LAAA,mPAAA,CAEpC,8LAOwD,qPAApB,SAACC,GAAc,OAAPA,EAAAC,KAAO"}

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

@@ -1,19 +1,5 @@
 import React, { type ReactNode } from "react";
 import { type SpaceType } from "../../types";
-export type BadgeProps = {
-    /** background colour of badge */
-    backgroundColor?: string;
-    /** border colour of badge */
-    borderColor?: string;
-    /** text colour of badge */
-    textColor?: string;
-    /** size of badge */
-    size?: SpaceType;
-    /** contents of badge */
-    children?: ReactNode;
-    /** forces shape to have equal width and height set by size attribute */
-    isSquare?: boolean;
-};
 /**
  * Displays a numeric or icon indicator. You can use the icon prop to
 indicate the importance of the badge to the user.
@@ -27,5 +13,18 @@ at the end of a sentence, link, or button. Unless the context is clear,
 consider including additional context with a visually hidden piece of
 additional text.
  */
-export declare function Badge({ children, size, backgroundColor, borderColor, textColor, isSquare, }: BadgeProps): React.JSX.Element;
+export declare function Badge({ children, size, backgroundColor, borderColor, textColor, isSquare, }: {
+    /** background colour of badge */
+    backgroundColor?: string;
+    /** border colour of badge */
+    borderColor?: string;
+    /** text colour of badge */
+    textColor?: string;
+    /** size of badge */
+    size?: SpaceType;
+    /** contents of badge */
+    children?: ReactNode;
+    /** forces shape to have equal width and height set by size attribute */
+    isSquare?: boolean;
+}): React.JSX.Element;
 export default Badge;

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

@@ -1,2 +1,2 @@
-import{__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{useTheme as t}from"styled-components";import{crukTheme as e}from"../../themes/cruk.js";import{StyledBadge as i}from"./styles.js";import{themeColorOrString as s}from"../../utils/themeUtils.js";function m(m){var l=m.children,n=m.size,a=void 0===n?"xs":n,d=m.backgroundColor,p=void 0===d?"primary":d,u=m.borderColor,f=void 0===u?"transparent":u,c=m.textColor,b=void 0===c?"textOnPrimary":c,C=m.isSquare,v=t(),x=r(r({},e),v),y=null!=C?C:!("string"==typeof l);return o.createElement(i,{theme:x,$isSquare:y,$size:a,$backgroundColor:s(p,x),$borderColor:s(f,x),$textColor:s(b,x)},l)}export{m as Badge,m as default};
+import r from"react";import{StyledBadge as o}from"./styles.js";import{themeColorOrString as t}from"../../utils/themeUtils.js";function e(e){var i=e.children,l=e.size,s=void 0===l?"xs":l,a=e.backgroundColor,n=void 0===a?"primary":a,d=e.borderColor,m=void 0===d?"transparent":d,u=e.textColor,p=void 0===u?"text-on-primary":u,c=e.isSquare,f=null!=c?c:!("string"==typeof i);return r.createElement(o,{$isSquare:f,$size:s,$backgroundColor:t(n),$borderColor:t(m),$textColor:t(p)},i)}export{e as Badge,e as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { type SpaceType } from \"../../types\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StyledBadge } from \"./styles\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\nexport type BadgeProps = {\n  /** background colour of badge */\n  backgroundColor?: string;\n  /** border colour of badge */\n  borderColor?: string;\n  /** text colour of badge */\n  textColor?: string;\n  /** size of badge */\n  size?: SpaceType;\n  /** contents of badge */\n  children?: ReactNode;\n  /** forces shape to have equal width and height set by size attribute */\n  isSquare?: boolean;\n};\n\n/**\n * Displays a numeric or icon indicator. You can use the icon prop to\nindicate the importance of the badge to the user.\n\nNote that depending on how they are used, badges may be confusing for users\nof screen readers and similar assistive technologies. While the styling of\nbadges provides a visual cue as to their purpose, these users will simply\nbe presented with the content of the badge. Depending on the specific\nsituation, these badges may seem like random additional words or numbers\nat the end of a sentence, link, or button. Unless the context is clear,\nconsider including additional context with a visually hidden piece of\nadditional text.\n */\nexport function Badge({\n  children,\n  size = \"xs\",\n  backgroundColor = \"primary\",\n  borderColor = \"transparent\",\n  textColor = \"textOnPrimary\",\n  isSquare,\n}: BadgeProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const isSquareCalculated = isSquare ?? !(typeof children === \"string\");\n\n  return (\n    <StyledBadge\n      theme={theme}\n      $isSquare={isSquareCalculated}\n      $size={size}\n      $backgroundColor={themeColorOrString(backgroundColor, theme)}\n      $borderColor={themeColorOrString(borderColor, theme)}\n      $textColor={themeColorOrString(textColor, theme)}\n    >\n      {children}\n    </StyledBadge>\n  );\n}\n\nexport default Badge;\n"],"names":["Badge","_a","children","_b","size","_c","backgroundColor","_d","borderColor","_e","textColor","isSquare","foundTheme","useTheme","theme","__assign","defaultTheme","isSquareCalculated","React","createElement","StyledBadge","$isSquare","$size","$backgroundColor","themeColorOrString","$borderColor"],"mappings":"gSAqCM,SAAUA,EAAMC,GACpB,IAAAC,EAAQD,EAAAC,SACRC,EAAAF,EAAAG,KAAAA,OAAI,IAAAD,EAAG,KAAIA,EACXE,EAAAJ,EAAAK,gBAAAA,aAAkB,UAASD,EAC3BE,EAAAN,EAAAO,YAAAA,OAAW,IAAAD,EAAG,gBACdE,EAAAR,EAAAS,UAAAA,OAAS,IAAAD,EAAG,gBAAeA,EAC3BE,EAAQV,EAAAU,SAEFC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGCK,EAAqBN,QAAAA,IAAkC,iBAAbT,GAEhD,OACEgB,EAAAC,cAACC,EAAW,CACVN,MAAOA,EAAKO,UACDJ,EAAkBK,MACtBlB,EAAImB,iBACOC,EAAmBlB,EAAiBQ,GAAMW,aAC9CD,EAAmBhB,EAAaM,cAClCU,EAAmBd,EAAWI,IAEzCZ,EAGP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { type SpaceType } from \"../../types\";\n\nimport { StyledBadge } from \"./styles\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\n/**\n * Displays a numeric or icon indicator. You can use the icon prop to\nindicate the importance of the badge to the user.\n\nNote that depending on how they are used, badges may be confusing for users\nof screen readers and similar assistive technologies. While the styling of\nbadges provides a visual cue as to their purpose, these users will simply\nbe presented with the content of the badge. Depending on the specific\nsituation, these badges may seem like random additional words or numbers\nat the end of a sentence, link, or button. Unless the context is clear,\nconsider including additional context with a visually hidden piece of\nadditional text.\n */\nexport function Badge({\n  children,\n  size = \"xs\",\n  backgroundColor = \"primary\",\n  borderColor = \"transparent\",\n  textColor = \"text-on-primary\",\n  isSquare,\n}: {\n  /** background colour of badge */\n  backgroundColor?: string;\n  /** border colour of badge */\n  borderColor?: string;\n  /** text colour of badge */\n  textColor?: string;\n  /** size of badge */\n  size?: SpaceType;\n  /** contents of badge */\n  children?: ReactNode;\n  /** forces shape to have equal width and height set by size attribute */\n  isSquare?: boolean;\n}) {\n  const isSquareCalculated = isSquare ?? !(typeof children === \"string\");\n\n  return (\n    <StyledBadge\n      $isSquare={isSquareCalculated}\n      $size={size}\n      $backgroundColor={themeColorOrString(backgroundColor)}\n      $borderColor={themeColorOrString(borderColor)}\n      $textColor={themeColorOrString(textColor)}\n    >\n      {children}\n    </StyledBadge>\n  );\n}\n\nexport default Badge;\n"],"names":["Badge","_a","children","_b","size","_c","backgroundColor","_d","borderColor","_e","textColor","isSquare","isSquareCalculated","React","createElement","StyledBadge","$isSquare","$size","$backgroundColor","themeColorOrString","$borderColor","$textColor"],"mappings":"8HAmBM,SAAUA,EAAMC,GACpB,IAAAC,EAAQD,EAAAC,SACRC,EAAAF,EAAAG,KAAAA,OAAI,IAAAD,EAAG,KAAIA,EACXE,EAAAJ,EAAAK,gBAAAA,aAAkB,UAASD,EAC3BE,EAAAN,EAAAO,YAAAA,OAAW,IAAAD,EAAG,gBACdE,EAAAR,EAAAS,UAAAA,OAAS,IAAAD,EAAG,kBAAiBA,EAC7BE,EAAQV,EAAAU,SAeFC,EAAqBD,QAAAA,IAAkC,iBAAbT,GAEhD,OACEW,EAAAC,cAACC,EAAW,CAAAC,UACCJ,EAAkBK,MACtBb,EAAIc,iBACOC,EAAmBb,GAAgBc,aACvCD,EAAmBX,GAAYa,WACjCF,EAAmBT,IAE9BR,EAGP"}

package/lib/src/components/Badge/styles.d.ts

@@ -1,10 +1,9 @@
-import { type SpaceType, type ThemeType } from "../../types";
+import { type SpaceType } from "../../types";
 export declare const StyledBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $backgroundColor: string;
     $borderColor: string;
     $textColor: string;
     $isSquare: boolean;
     $size: SpaceType;
-    theme: ThemeType;
 }>> & string;
 export default StyledBadge;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import r from"styled-components";var e,t=r.span(e||(e=n(["\n  display: inline-block;\n  border-width: 1px;\n  border-style: solid;\n  text-align: center;\n  font-size: ",";\n  padding: ",";\n  border-radius: ",";\n  height: ",";\n  width: ",";\n  line-height: ",";\n  min-width: ",";\n\n  background-color: ",";\n  border-color: ",";\n  color: ",";\n"],["\n  display: inline-block;\n  border-width: 1px;\n  border-style: solid;\n  text-align: center;\n  font-size: ",";\n  padding: ",";\n  border-radius: ",";\n  height: ",";\n  width: ",";\n  line-height: ",";\n  min-width: ",";\n\n  background-color: ",";\n  border-color: ",";\n  color: ",";\n"])),function(n){return n.theme.fontSizes.m},function(n){var r=n.theme;return n.$isSquare?0:r.spacing.xxs},function(n){return n.$isSquare?"50%":" 1.5rem"},function(n){var r=n.$isSquare,e=n.$size,t=n.theme;return r?"calc(".concat(t.spacing[e]," + ").concat(t.spacing.xs,")"):"auto"},function(n){var r=n.$isSquare,e=n.$size,t=n.theme;return r?"calc(".concat(t.spacing[e]," + ").concat(t.spacing.xs,")"):"auto"},function(n){var r=n.$isSquare,e=n.$size,t=n.theme;return r?"calc(".concat(t.spacing[e]," + ").concat(t.spacing.xs,")"):" 1rem"},function(n){var r=n.$size,e=n.theme;return"calc(".concat(e.spacing[r]," + ").concat(e.spacing.xs,")")},function(n){return n.$backgroundColor},function(n){return n.$borderColor},function(n){return n.$textColor});export{t as StyledBadge,t as default};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import r from"styled-components";var i,e=r.span(i||(i=n(['\n  --_border-width: 1px;\n\n  display: inline-block;\n  border-width: var(--_border-width, 1px);\n  border-style: solid;\n  text-align: center;\n  font-size: var(--font-size-m, 1rem);\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n  padding: ',";\n  border-radius: ",";\n  height: ",";\n  width: ",";\n  line-height: ",";\n  min-width: ",";\n  background-color: ",";\n  border-color: ",";\n  color: ",";\n"],['\n  --_border-width: 1px;\n\n  display: inline-block;\n  border-width: var(--_border-width, 1px);\n  border-style: solid;\n  text-align: center;\n  font-size: var(--font-size-m, 1rem);\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n  padding: ',";\n  border-radius: ",";\n  height: ",";\n  width: ",";\n  line-height: ",";\n  min-width: ",";\n  background-color: ",";\n  border-color: ",";\n  color: ",";\n"])),function(n){return n.$isSquare?0:"var(--spacing-xxs, 0.5rem)"},function(n){return n.$isSquare?"50%":" 1.5rem"},function(n){var r=n.$isSquare,i=n.$size;return r?"calc(var(--spacing-".concat(i,") + var(--spacing-xs, 1rem) + var(--_border-width, 1px) * 2)"):"auto"},function(n){var r=n.$isSquare,i=n.$size;return r?"calc(var(--spacing-".concat(i,") + var(--spacing-xs, 1rem) + var(--_border-width, 1px) * 2)"):"auto"},function(n){var r=n.$isSquare,i=n.$size;return r?"calc(var(--spacing-".concat(i,") + var(--spacing-xs, 1rem))"):" 1rem"},function(n){var r=n.$size;return"calc(var(--spacing-".concat(r,") + var(--spacing-xs, 1rem))")},function(n){return n.$backgroundColor},function(n){return n.$borderColor},function(n){return n.$textColor});export{e as StyledBadge,e as default};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Badge/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { type SpaceType, type ThemeType } from \"../../types\";\n\nexport const StyledBadge = styled.span<{\n  $backgroundColor: string;\n  $borderColor: string;\n  $textColor: string;\n  $isSquare: boolean;\n  $size: SpaceType;\n  theme: ThemeType;\n}>`\n  display: inline-block;\n  border-width: 1px;\n  border-style: solid;\n  text-align: center;\n  font-size: ${({ theme }) => theme.fontSizes.m};\n  padding: ${({ theme, $isSquare }) => ($isSquare ? 0 : theme.spacing.xxs)};\n  border-radius: ${({ $isSquare }) => ($isSquare ? \"50%\" : ` 1.5rem`)};\n  height: ${({ $isSquare, $size, theme }) =>\n    $isSquare ? `calc(${theme.spacing[$size]} + ${theme.spacing.xs})` : `auto`};\n  width: ${({ $isSquare, $size, theme }) =>\n    $isSquare ? `calc(${theme.spacing[$size]} + ${theme.spacing.xs})` : `auto`};\n  line-height: ${({ $isSquare, $size, theme }) =>\n    $isSquare\n      ? `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`\n      : ` 1rem`};\n  min-width: ${({ $size, theme }) =>\n    `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n\n  background-color: ${({ $backgroundColor }) => $backgroundColor};\n  border-color: ${({ $borderColor }) => $borderColor};\n  color: ${({ $textColor }) => $textColor};\n`;\n\nexport default StyledBadge;\n"],"names":["StyledBadge","styled","span","templateObject_1","__makeTemplateObject","_a","theme","fontSizes","m","$isSquare","spacing","xxs","$size","concat","xs","$backgroundColor","$borderColor","$textColor"],"mappings":"iHAIO,MAAMA,EAAcC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,iHAAA,iBAAA,uBAAA,gBAAA,eAAA,qBAAA,mBAAA,4BAAA,sBAAA,eAAA,OAAA,CAOpC,iHAK6C,iBAC2B,uBACL,gBAES,eAEA,qBAI/D,mBAE0C,4BAEO,sBACZ,eACX,SAhB1B,SAACC,GAAc,OAAPA,EAAAC,MAAaC,UAAUC,CAAhB,EACjB,SAACH,OAAEC,EAAKD,EAAAC,MAAkB,OAAPD,EAAAI,UAAoB,EAAIH,EAAMI,QAAQC,GAA/B,EACpB,SAACN,GAAkB,OAAPA,EAAAI,UAAoB,MAAQ,SAArB,EAC1B,SAACJ,GAAE,IAAAI,cAAWG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MAClC,OAAAG,EAAY,eAAQH,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAE,KAAM,MAApE,EACO,SAACT,GAAE,IAAAI,cAAWG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MACjC,OAAAG,EAAY,eAAQH,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAE,KAAM,MAApE,EACa,SAACT,GAAE,IAAAI,cAAWG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MACvC,OAAAG,EACI,QAAAI,OAAQP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAE,KAClD,OAFJ,EAGW,SAACT,OAAEO,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MAC1B,MAAA,QAAAO,OAAQP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAE,IAAlD,EAEkB,SAACT,GAAyB,OAAPA,EAAAU,gBAAO,EAC9B,SAACV,GAAqB,OAAPA,EAAAW,YAAO,EAC7B,SAACX,GAAmB,OAAPA,EAAAY,UAAO"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Badge/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { type SpaceType } from \"../../types\";\n\nexport const StyledBadge = styled.span<{\n  $backgroundColor: string;\n  $borderColor: string;\n  $textColor: string;\n  $isSquare: boolean;\n  $size: SpaceType;\n}>`\n  --_border-width: 1px;\n\n  display: inline-block;\n  border-width: var(--_border-width, 1px);\n  border-style: solid;\n  text-align: center;\n  font-size: var(--font-size-m, 1rem);\n  font-family: var(--typ-font-family-base, \"Poppins\", Arial, sans-serif);\n  padding: ${({ $isSquare }) => ($isSquare ? 0 : `var(--spacing-xxs, 0.5rem)`)};\n  border-radius: ${({ $isSquare }) => ($isSquare ? \"50%\" : ` 1.5rem`)};\n  height: ${({ $isSquare, $size }) =>\n    $isSquare\n      ? `calc(var(--spacing-${$size}) + var(--spacing-xs, 1rem) + var(--_border-width, 1px) * 2)`\n      : `auto`};\n  width: ${({ $isSquare, $size }) =>\n    $isSquare\n      ? `calc(var(--spacing-${$size}) + var(--spacing-xs, 1rem) + var(--_border-width, 1px) * 2)`\n      : `auto`};\n  line-height: ${({ $isSquare, $size }) =>\n    $isSquare\n      ? `calc(var(--spacing-${$size}) + var(--spacing-xs, 1rem))`\n      : ` 1rem`};\n  min-width: ${({ $size }) =>\n    `calc(var(--spacing-${$size}) + var(--spacing-xs, 1rem))`};\n  background-color: ${({ $backgroundColor }) => $backgroundColor};\n  border-color: ${({ $borderColor }) => $borderColor};\n  color: ${({ $textColor }) => $textColor};\n`;\n\nexport default StyledBadge;\n"],"names":["StyledBadge","styled","span","templateObject_1","__makeTemplateObject","_a","$isSquare","$size","concat","$backgroundColor","$borderColor","$textColor"],"mappings":"iHAIO,MAAMA,EAAcC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,mRAAA,uBAAA,gBAAA,eAAA,qBAAA,mBAAA,0BAAA,sBAAA,eAAA,OAAA,CAMpC,mRAS4E,uBACT,gBAIvD,eAIA,qBAIC,mBAE8C,0BACG,sBACZ,eACX,SAlB5B,SAACC,GAAkB,OAAPA,EAAAC,UAAoB,EAAI,4BAAjB,EACb,SAACD,GAAkB,OAAPA,EAAAC,UAAoB,MAAQ,SAArB,EAC1B,SAACD,OAAEC,EAASD,EAAAC,UAAEC,EAAKF,EAAAE,MAC3B,OAAAD,EACI,sBAAAE,OAAsBD,EAAK,gEAC3B,MAFJ,EAGO,SAACF,OAAEC,EAASD,EAAAC,UAAEC,EAAKF,EAAAE,MAC1B,OAAAD,EACI,sBAAAE,OAAsBD,EAAK,gEAC3B,MAFJ,EAGa,SAACF,OAAEC,EAASD,EAAAC,UAAEC,EAAKF,EAAAE,MAChC,OAAAD,EACI,sBAAAE,OAAsBD,EAAK,gCAC3B,OAFJ,EAGW,SAACF,GAAE,IAAAE,EAAKF,EAAAE,MACnB,MAAA,sBAAAC,OAAsBD,EAAK,+BAA3B,EACkB,SAACF,GAAyB,OAAPA,EAAAI,gBAAO,EAC9B,SAACJ,GAAqB,OAAPA,EAAAK,YAAO,EAC7B,SAACL,GAAmB,OAAPA,EAAAM,UAAO"}

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

@@ -1,8 +1,9 @@
 import React, { type HTMLAttributes, type Ref, type ReactNode, type ElementType } from "react";
 import { type SpacingProps } from "../Spacing";
+import { type ColourVariableType } from "../../types";
 export type BoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     /** background color of box, this will add default padding */
-    backgroundColor?: string;
+    backgroundColor?: string | ColourVariableType;
     ref?: Ref<HTMLDivElement>;
     children?: ReactNode;
     /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a "span" for example */

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

@@ -1,2 +1,2 @@
-import{__rest as r,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import e from"react";import{useTheme as t}from"styled-components";import{crukTheme as m}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as n}from"../Spacing/index.js";import{StyledBox as s}from"./styles.js";var i=function(i){var l=r(i,[]),c=l.children,f=l.backgroundColor,a=l.ref,d=r(l,["children","backgroundColor","ref"]),p=t(),u=o(o({},m),p),b=n(d);return e.createElement(s,o({theme:u,$backgroundColor:f},b,{ref:a}),c)};export{i as Box,i as default};
+import{__rest as r,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import e from"react";import{spacingPropsToSpacingPropsInternal as t}from"../Spacing/index.js";import{StyledBox as i}from"./styles.js";import{themeColorOrString as l}from"../../utils/themeUtils.js";var m=function(m){var s=r(m,[]),n=s.children,a=s.backgroundColor,d=s.ref,f=r(s,["children","backgroundColor","ref"]),c=t(f),u=a?l(a):void 0;return e.createElement(i,o({$backgroundColor:u},c,{ref:d}),n)};export{m as Box,m as default};
 //# sourceMappingURL=index.js.map