@kvdbil/components 16.0.8 → 17.0.1

package/esm/components/Chip/index.js

@@ -1,20 +1,20 @@
-import{jsx as i,jsxs as x}from"react/jsx-runtime";import t from"styled-components";import v from"../../icons/components/CloseIcon.js";import{getFontSize as y,getCursorType as p,getBackgroundColor as C,getColor as $,getBorderColor as k,getHoverBorderColor as z,getHoverBackgroundColor as B,getHoverColor as D,getActiveBackgroundColor as b,getActiveBorderColor as j,getActiveColor as H,getSufixHoverBackgroundColor as w}from"./styles.js";import"../../utils/utils.js";const A={small:"2px 16px",regular:"3px 16px",large:"7px 16px"},S=t.div`
+import{jsx as l,jsxs as k}from"react/jsx-runtime";import a from"styled-components";import C from"../../icons/components/CloseIcon.js";import{getFontSize as $,getCursorType as b,getBackgroundColor as D,getColor as z,getBorderColor as B,getHoverBorderColor as H,getHoverBackgroundColor as j,getHoverColor as w,getActiveBackgroundColor as m,getActiveBorderColor as A,getActiveColor as F,getSufixHoverBackgroundColor as I}from"./styles.js";import"../../utils/utils.js";const P={small:"2px 16px",regular:"3px 16px",large:"7px 16px"},S=a.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
-  font-size: ${({size:e})=>y(e)};
+  font-size: ${({size:e})=>$(e)};
   font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
   line-height: 1.25;
   letter-spacing: 0.1px;
   display: inline-flex;
-  cursor: ${p};
+  cursor: ${b};
   align-items: center;
-  background: ${C};
-  color: ${$};
+  background: ${D};
+  color: ${z};
   justify-content: center;
   border-width: 1px;
   border-style: solid;
-  border-color: ${k};
+  border-color: ${B};
   border-radius: 1.293rem;
-  padding: ${({size:e,isDeletable:l})=>l?"0 0.5rem 0 1rem":A[e]};
+  padding: ${({size:e,isDeletable:n})=>n?"0 0.5rem 0 1rem":P[e]};
   transition:
     color 0.3s ease,
     background-color 0.3s ease,
@@ -22,28 +22,28 @@ import{jsx as i,jsxs as x}from"react/jsx-runtime";import t from"styled-component
   box-sizing: border-box;
 
   ${e=>!e.isDisabled&&e.isClickable&&` &:hover {
-    border-color: ${z(e)};
-    background-color: ${B(e)};
-    color: ${D(e)};
+    border-color: ${H(e)};
+    background-color: ${j(e)};
+    color: ${w(e)};
   } &:active {
-    background-color: ${b(e)};
-    border-color: ${j(e)};
-    color: ${H(e)};
+    background-color: ${m(e)};
+    border-color: ${A(e)};
+    color: ${F(e)};
   }`}
-`,F=t.span`
+`,T=a.span`
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   line-height: 1.5;
-`,I=t.span`
+`,W=a.span`
   margin-right: 0.625rem;
   display: flex;
   align-items: center;
-`,N=t.span`
+`,E=a.span`
   display: flex;
   align-items: center;
-  cursor: ${p};
+  cursor: ${b};
   padding: 0.5rem;
   margin-left: 0.25rem;
   margin-right: -0.25rem;
@@ -59,16 +59,16 @@ import{jsx as i,jsxs as x}from"react/jsx-runtime";import t from"styled-component
     width: 80%;
     border-radius: 50%;
     z-index: -1;
-    background-color: ${w};
+    background-color: ${I};
     opacity: 0;
   }
 
   &:active:before {
-    background-color: ${b};
+    background-color: ${m};
     opacity: 1;
   }
 
   &:hover:before {
     opacity: 1;
   }
-`,m=({color:e="primary",children:l,component:u="div",isDisabled:r,onClick:s,size:h="regular",prefix:n,onDelete:a,variant:c="solid",...f})=>{const o=!!(s&&!r),d=!!(a&&!r);return i(S,{...f,role:o?"button":void 0,onClick:o?s:void 0,tabIndex:o?0:void 0,as:o?"button":u,color:e,isDisabled:r,size:h,isClickable:o,isDeletable:d,variant:c,hasPrefix:!!n,children:x(F,{children:[n&&i(I,{className:"prefix",children:n}),l,a&&i(N,{role:"button",onClick:d?g=>{g.stopPropagation(),a?.(g)}:void 0,color:e,variant:c,isClickable:o,isDisabled:r,isDeletable:!0,size:"regular",children:i(v,{})})]})})};export{m as Chip,m as default};
+`,u=({color:e="primary",children:n,component:f,isDisabled:r,onClick:d,size:h="regular",prefix:s,onDelete:c,variant:g="solid",role:x,...v})=>{const i=!!(d&&!r),t=!!(c&&!r),y=!!s,p=o=>{o.stopPropagation(),c?.(o)};return l(S,{...v,role:x??(i?"button":void 0),onClick:i?d:void 0,tabIndex:i?0:void 0,as:f??(i?"button":"div"),color:e,isDisabled:r,size:h,isClickable:i,isDeletable:t,variant:g,hasPrefix:y,"aria-disabled":r,children:k(T,{children:[s&&l(W,{className:"prefix",children:s}),n,c&&l(E,{role:"button","aria-label":"Remove","aria-disabled":r,onClick:t?p:void 0,color:e,variant:g,isClickable:i,isDisabled:r,isDeletable:!0,size:"regular",tabIndex:t?0:void 0,onKeyDown:o=>{(o.key==="Enter"||o.key===" ")&&t&&(o.preventDefault(),p(o))},children:l(C,{})})]})})};export{u as Chip,u as default};

package/esm/components/Dialog/index.js

@@ -1,4 +1,4 @@
-import{jsxs as d,jsx as i}from"react/jsx-runtime";import r from"styled-components";import{Modal as f}from"../Modal/index.js";import h from"../../theme.js";import{TinyTitleBold as c}from"../../typography/Heading/index.js";import"react";import"react-dom";import"react-transition-group";import"../Icons/Close.js";import"../../shared/media-queries.js";const g=r(c)`
+import{jsxs as d,jsx as i}from"react/jsx-runtime";import r from"styled-components";import{Modal as f}from"../Modal/index.js";import h from"../../theme.js";import{TinyTitleBold as c}from"../../typography/Heading/index.js";import"react";import"react-dom";import"react-transition-group";import"../../icons/components/CloseIcon.js";import"../../utils/utils.js";import"../Modal/FocudTrap.js";import"../../shared/media-queries.js";const g=r(c)`
   font-weight: ${h.typography.fontAlternativeRegularWeight};
   margin: 0;
 `,w=r.div`

package/esm/components/ErrorMessage/index.js

@@ -1,4 +1,4 @@
-import{jsx as n}from"react/jsx-runtime";import a from"styled-components";const i=a.div`
+import{jsx as a}from"react/jsx-runtime";import i from"styled-components";const n=i.div`
   font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
   font-weight: ${({theme:e})=>e.typography.fontAlternativeRegularWeight};
   background: ${({theme:e})=>e.colors.error.lighter};
@@ -7,4 +7,4 @@ import{jsx as n}from"react/jsx-runtime";import a from"styled-components";const i
   font-size: 13px;
   padding: 10px;
   ${({centered:e})=>e&&"text-align: center;"}
-`,r=({children:e,centered:t,...o})=>n(i,{centered:t,...o,children:e});export{r as ErrorMessage,r as default};
+`,r=({children:e,centered:t,...o})=>a(n,{centered:t,role:"alert","aria-live":"assertive",...o,children:e});export{r as ErrorMessage,r as default};

package/esm/components/Icon/index.js

@@ -1,4 +1,4 @@
-import{jsxs as c,Fragment as u,jsx as e}from"react/jsx-runtime";import{useState as x}from"react";import i from"styled-components";import{Caption as h}from"../../typography/BodyText/index.js";import{Title as b}from"../../typography/Heading/index.js";import p from"../../theme.js";import{Snackbar as k}from"../Snackbar/index.js";import"../../shared/media-queries.js";import"../Icons/CheckCircle.js";import"../Icons/Close.js";import"../Icons/ErrorCircle.js";import"../Icons/InfoCircle.js";import"react-transition-group";import"../../utils/utils.js";const w=i.div`
+import{jsxs as c,Fragment as u,jsx as e}from"react/jsx-runtime";import{useState as x}from"react";import i from"styled-components";import{Caption as h}from"../../typography/BodyText/index.js";import{Title as b}from"../../typography/Heading/index.js";import p from"../../theme.js";import{Snackbar as k}from"../Snackbar/index.js";import"../../shared/media-queries.js";import"react-transition-group";import"../../utils/utils.js";import"../../icons/components/AlertIcon.js";import"../../icons/components/CheckCircleIcon.js";import"../../icons/components/CloseIcon.js";import"../../icons/components/InfoIcon.js";const w=i.div`
   margin: 0 auto;
   max-width: 700px;
 `,y=i(b)`

package/esm/components/Link/index.js

@@ -1,14 +1,12 @@
-import{jsxs as F,jsx as t,Fragment as W}from"react/jsx-runtime";import{Status as z,CaptionLink as I,Caption2 as v,Caption as U,BodyText as _,BodyLink as j}from"../../typography/BodyText/index.js";import l,{css as H}from"styled-components";import f from"../../theme.js";import{Display3 as R,Display2 as J,Display1 as K,TinyTitleBold as M,TinyTitleRegular as N,Subtitle as O,Title as P,Headline as Q}from"../../typography/Heading/index.js";import{Button as V}from"../Button/index.js";import{Link as q}from"react-router-dom";import"../../shared/media-queries.js";import"react";import"../Spinner/index.js";import"../../utils/utils.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const h=H`
+import{jsxs as F,jsx as i,Fragment as v}from"react/jsx-runtime";import{Status as I,CaptionLink as W,Caption2 as z,Caption as U,BodyText as _,BodyLink as j}from"../../typography/BodyText/index.js";import h,{css as H}from"styled-components";import f from"../../theme.js";import{Display3 as R,Display2 as J,Display1 as K,TinyTitleBold as M,TinyTitleRegular as O,Subtitle as P,Title as V,Headline as q}from"../../typography/Heading/index.js";import{Button as A}from"../Button/index.js";import{Link as E}from"react-router-dom";import"../../shared/media-queries.js";import"react";import"../Spinner/index.js";import"../../utils/utils.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const m=H`
   text-decoration: ${({$withUnderline:n})=>n?`underline ${f.colors.info.dark}`:"none"};
 
   span {
     color: ${({$isButton:n})=>!n&&`${f.colors.info.dark}`};
     font-weight: 600;
   }
-`,A=l.a`
-  ${h}
-`,E=l(q)`
-  ${h}
-`,G=l(V)`
-  font-family: ${({$fontFamily:n})=>`${n}, sans-serif`};
-`;function X(n,r){switch(r){case"BodyLink":return t(j,{as:"span",children:n});case"BodyText":return t(_,{as:"span",children:n});case"Caption":return t(U,{as:"span",children:n});case"Caption2":return t(v,{as:"span",children:n});case"CaptionLink":return t(I,{as:"span",children:n});case"Status":return t(z,{as:"span",children:n});case"Headline":return t(Q,{as:"span",children:n});case"Title":return t(P,{as:"span",children:n});case"Subtitle":return t(O,{as:"span",children:n});case"TinyTitleRegular":return t(N,{as:"span",children:n});case"TinyTitleBold":return t(M,{as:"span",children:n});case"Display1":return t(K,{as:"span",children:n});case"Display2":return t(J,{as:"span",children:n});case"Display3":return t(R,{as:"span",children:n})}}const Y=(n,r,o,e,i)=>F(W,{children:[r,o?t(G,{color:i.color,colorShade:i.colorShade,variant:i.variant,fullWidth:i.fullWidth,size:i.size,prefixIcon:i.prefixIcon,$fontFamily:i.fontFamily,isDisabled:i.isDisabled,children:n}):n&&X(n,e)]}),m=({path:n,text:r,url:o,rel:e,ariaLabel:i,typographyType:y="BodyLink",target:s,isButton:c=!1,buttonColor:b="primary",buttonColorShade:k,buttonVariant:$,fullWidth:x,buttonSize:T,withUnderline:B=!1,buttonPrefixIcon:D,children:w,fontFamily:L="Next Book",isDisabled:S=!1})=>{const a=o??n??"",d=a.startsWith("http")&&typeof window<"u"&&!a.includes(window.location.hostname),g=()=>{if(e)return e;if(s==="_blank")return d?"noopener noreferrer":"noopener"},C={color:b,colorShade:k,variant:$,fullWidth:x,size:T,prefixIcon:D,fontFamily:L,isDisabled:S},p={$isButton:c,$withUnderline:B,rel:g(),"aria-label":i},u=Y(r,w,c,y,C);return d?t(A,{href:a,target:s??"_blank",...p,"data-testid":"external-link",children:u}):t(E,{to:a,target:s??"_self",...p,"data-testid":"internal-link",children:u})};export{m as Link,m as default};
+`,G=h.a`
+  ${m}
+`,N=h(E)`
+  ${m}
+`;function Q(n,r){switch(r){case"BodyLink":return i(j,{as:"span",children:n});case"BodyText":return i(_,{as:"span",children:n});case"Caption":return i(U,{as:"span",children:n});case"Caption2":return i(z,{as:"span",children:n});case"CaptionLink":return i(W,{as:"span",children:n});case"Status":return i(I,{as:"span",children:n});case"Headline":return i(q,{as:"span",children:n});case"Title":return i(V,{as:"span",children:n});case"Subtitle":return i(P,{as:"span",children:n});case"TinyTitleRegular":return i(O,{as:"span",children:n});case"TinyTitleBold":return i(M,{as:"span",children:n});case"Display1":return i(K,{as:"span",children:n});case"Display2":return i(J,{as:"span",children:n});case"Display3":return i(R,{as:"span",children:n})}}const X=(n,r,o,a,t)=>F(v,{children:[r,o?i(A,{as:"span",color:t.color,colorShade:t.colorShade,variant:t.variant,fullWidth:t.fullWidth,size:t.size,prefixIcon:t.prefixIcon,isDisabled:t.isDisabled,style:{display:"inline-flex",fontFamily:t.fontFamily?`${t.fontFamily}, sans-serif`:void 0},children:n}):n&&Q(n,a)]}),y=({path:n,text:r,url:o,rel:a,ariaLabel:t,typographyType:b="BodyLink",target:s,isButton:d=!1,buttonColor:k="primary",buttonColorShade:x,buttonVariant:T,fullWidth:$,buttonSize:B,withUnderline:D=!1,buttonPrefixIcon:w,children:L,fontFamily:S,isDisabled:l=!1})=>{const e=o??n??"",c=e.startsWith("http")&&typeof window<"u"&&!e.includes(window.location.hostname),g=()=>{if(a)return a;if(s==="_blank")return c?"noopener noreferrer":"noopener"},C={color:k,colorShade:x,variant:T,fullWidth:$,size:B,prefixIcon:w,fontFamily:S,isDisabled:l},p={$isButton:d,$withUnderline:D,rel:g(),"aria-label":t},u=X(r,L,d,b,C);return c?i(G,{href:e,target:s??"_blank",...p,"data-testid":"external-link",children:u}):i(N,{to:e,target:s??"_self",...p,"data-testid":"internal-link","aria-disabled":l,tabIndex:l?-1:void 0,children:u})};export{y as Link,y as default};

package/esm/components/ListItem/index.js

@@ -1,15 +1,15 @@
-import{jsxs as d,jsx as l}from"react/jsx-runtime";import i from"styled-components";import{BodyText as m}from"../../typography/BodyText/index.js";import{TinyTitleBold as a}from"../../typography/Heading/index.js";import"../../shared/media-queries.js";const p=i.li`
+import{jsxs as d,jsx as l}from"react/jsx-runtime";import i from"styled-components";import{BodyText as m}from"../../typography/BodyText/index.js";import{TinyTitleBold as c}from"../../typography/Heading/index.js";import"../../shared/media-queries.js";const s=i.li`
   display: flex;
   flex-direction: column;
   padding-bottom: 20px;
   &:last-child {
     padding-bottom: 0;
   }
-`,s=i.div`
+`,h=i.div`
   display: flex;
   align-items: center;
   margin: 0;
-`,h=i(a)`
+`,p=i(c)`
   margin: 0;
 `,x=i.div`
   display: flex;
@@ -21,4 +21,4 @@ import{jsxs as d,jsx as l}from"react/jsx-runtime";import i from"styled-component
   }
 `,g=i.div`
   padding-left: ${({hasIcon:t})=>t?"54px":0};
-`,f=({title:t,text:n,icon:e,component:r="li",children:o,...c})=>d(p,{as:r,...c,children:[d(s,{children:[e&&l(x,{children:e}),l(h,{children:t})]}),l(g,{hasIcon:!!e,children:d(m,{children:[n,o]})})]});export{f as default};
+`,f=({title:t,text:n,icon:e,component:o="li",children:r,...a})=>d(s,{as:o,role:o!=="li"?"listitem":void 0,...a,children:[d(h,{children:[e&&l(x,{"aria-hidden":"true",children:e}),l(p,{as:"h4",children:t})]}),(n||r)&&l(g,{hasIcon:!!e,children:d(m,{children:[n,r]})})]});export{f as default};

package/esm/components/MenuItem/index.js

@@ -1,4 +1,4 @@
-import{jsxs as h,jsx as r}from"react/jsx-runtime";import t from"styled-components";import n from"../../theme.js";const o={1:{size:"2rem",lineHeight:"3rem",bottom:"2rem",fontFamily:n.typography.fontAlternativeFamily},2:{size:"1.5rem",lineHeight:"2.5rem",bottom:"1rem",fontFamily:n.typography.fontAlternativeFamily},3:{size:"1rem",lineHeight:"1.5rem",bottom:"1rem",fontFamily:n.typography.fontBaseFamily}},g=t.li`
+import{jsxs as s,jsx as r}from"react/jsx-runtime";import t from"styled-components";import n from"../../theme.js";const o={1:{size:"2rem",lineHeight:"3rem",bottom:"2rem",fontFamily:n.typography.fontAlternativeFamily},2:{size:"1.5rem",lineHeight:"2.5rem",bottom:"1rem",fontFamily:n.typography.fontAlternativeFamily},3:{size:"1rem",lineHeight:"1.5rem",bottom:"1rem",fontFamily:n.typography.fontBaseFamily}},g=t.li`
   list-style-type: none;
   display: flex;
   flex-direction: column;
@@ -35,4 +35,4 @@ import{jsxs as h,jsx as r}from"react/jsx-runtime";import t from"styled-component
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   color: ${({theme:e})=>e.colors.text.dark};
   margin-top: ${({level:e})=>e===3?"0.25rem":0};
-`,f=({preamble:e,title:l,level:i,component:p="li",children:y,...s})=>{const a=!!e;return h(g,{as:p,...s,hasPreamble:a,children:[l&&r(v,{children:l}),h(c,{level:i,children:[r(d,{level:i,hasPreamble:a,children:y}),e&&r($,{level:i,children:e})]})]})};export{f as MenuItem,f as default};
+`,f=({preamble:e,title:l,level:i,component:a="li",children:p,...y})=>{const h=!!e;return s(g,{as:a,role:a!=="li"?"listitem":void 0,...y,hasPreamble:h,children:[l&&r(v,{as:"h3",children:l}),s(c,{level:i,children:[r(d,{level:i,hasPreamble:h,children:p}),e&&r($,{level:i,children:e})]})]})};export{f as MenuItem,f as default};

package/esm/components/Message/index.js

@@ -1,9 +1,9 @@
-import{jsx as o,jsxs as a}from"react/jsx-runtime";import{useRef as h,useState as x}from"react";import s from"styled-components";import{TinyTitleRegular as k}from"../../typography/Heading/index.js";import y from"../../icons/components/AlertIcon.js";import b from"../../icons/components/CheckCircleIcon.js";import $ from"../../icons/components/CloseIcon.js";import v from"../../icons/components/InfoIcon.js";import w from"../../icons/components/WarningIcon.js";import"../../shared/media-queries.js";const C=(e,t,r)=>{const n=r.colors.text.dark,i=r.colors.background.light;switch(e){case"info":return{text:t?r.colors.info.dark:n,background:t?i:r.colors.info.lighter};case"success":return{text:t?r.colors.success.dark:n,background:t?i:r.colors.success.lighter};case"warning":return{text:t?r.colors.warning.dark:n,background:t?i:r.colors.warning.lighter};case"error":return{text:t?r.colors.error.dark:n,background:t?i:r.colors.error.lighter};case"text":default:return{text:t?r.colors.text.light:n,background:t?r.colors.background.dark:i}}},T=e=>{switch(e){case"success":return o(b,{});case"warning":return o(w,{});case"error":return o(y,{});case"info":case"text":default:return o(v,{})}},j=s.div`
+import{jsx as o,jsxs as a}from"react/jsx-runtime";import{useRef as h,useState as x}from"react";import s from"styled-components";import{TinyTitleRegular as v}from"../../typography/Heading/index.js";import b from"../../icons/components/AlertIcon.js";import k from"../../icons/components/CheckCircleIcon.js";import y from"../../icons/components/CloseIcon.js";import $ from"../../icons/components/InfoIcon.js";import w from"../../icons/components/WarningIcon.js";import{resetButtonStyle as C}from"../../utils/utils.js";import"../../shared/media-queries.js";const T=(e,r,t)=>{const n=t.colors.text.dark,i=t.colors.background.light;switch(e){case"info":return{text:r?t.colors.info.dark:n,background:r?i:t.colors.info.lighter};case"success":return{text:r?t.colors.success.dark:n,background:r?i:t.colors.success.lighter};case"warning":return{text:r?t.colors.warning.dark:n,background:r?i:t.colors.warning.lighter};case"error":return{text:r?t.colors.error.dark:n,background:r?i:t.colors.error.lighter};case"text":default:return{text:r?t.colors.text.light:n,background:r?t.colors.background.dark:i}}},j=e=>{switch(e){case"success":return o(k,{});case"warning":return o(w,{});case"error":return o(b,{});case"info":case"text":default:return o($,{})}},D=s.div`
   ${({isDeleted:e})=>e&&`
       opacity: 0;
       transition: opacity 0.3s;
     `}
-`,D=s.div`
+`,W=s.div`
   display: ${({fullWidth:e})=>e?"flex":"inline-flex"};
   ${({fullWidth:e})=>e&&"justify-content: space-between;"}
   align-items: center;
@@ -14,25 +14,36 @@ import{jsx as o,jsxs as a}from"react/jsx-runtime";import{useRef as h,useState as
       justify-content: center;
     `}
 
-  ${({theme:e,messageType:t,inverted:r})=>{const{text:n,background:i}=C(t,r,e);return`
+  ${({theme:e,messageType:r,inverted:t})=>{const{text:n,background:i}=T(r,t,e);return`
       color: ${n};
       background-color: ${i};
     `}}
-`,W=s.div`
-  display: flex;
 `,R=s.div`
+  display: flex;
+`,S=s.div`
   padding: 0.75rem 0;
-`,z=s(k)`
+`,z=s(v)`
   margin: 0;
 `,P=s.span`
   display: flex;
   align-items: center;
   margin-right: 1rem;
   font-size: 1.5rem;
-`,A=s.span`
+`,A=s.button`
+  ${C}
   display: flex;
   align-items: center;
   margin-left: 1rem;
-  font-size: 2.5rem;
-  cursor: pointer;
-`,E=({children:e,type:t,withIcon:r=!1,isDeletable:n=!1,fullWidth:i=!1,inverted:c=!1,textCenter:d=!1,...u})=>{const l=h(null),[f,m]=x(!1),g=p=>{p.stopPropagation(),m(!0),setTimeout(()=>{l.current&&l.current.remove()},300)};return o(j,{isDeleted:f,children:a(D,{messageType:t,fullWidth:i,inverted:c,textCenter:d,role:"alert",ref:l,...u,children:[a(W,{children:[r&&o(P,{children:T(t)}),a(R,{children:[typeof e=="string"&&o(z,{children:e}),typeof e!="string"&&e]})]}),n&&o(A,{onClick:g,"aria-label":"Close",children:o($,{})})]})})};export{E as default};
+
+  &:focus-visible {
+    outline: revert;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  svg {
+    font-size: 2.5rem;
+  }
+`,B=({children:e,type:r,withIcon:t=!1,isDeletable:n=!1,fullWidth:i=!1,inverted:c=!1,textCenter:d=!1,...u})=>{const l=h(null),[f,m]=x(!1),g=p=>{p.stopPropagation(),m(!0),setTimeout(()=>{l.current&&l.current.remove()},300)};return o(D,{isDeleted:f,children:a(W,{messageType:r,fullWidth:i,inverted:c,textCenter:d,role:r==="error"||r==="warning"?"alert":void 0,"aria-live":r==="error"||r==="warning"?"assertive":"polite",ref:l,...u,children:[a(R,{children:[t&&o(P,{children:j(r)}),a(S,{children:[typeof e=="string"&&o(z,{children:e}),typeof e!="string"&&e]})]}),n&&o(A,{onClick:g,"aria-label":"Close",type:"button",children:o(y,{})})]})})};export{B as default};

package/esm/components/Modal/FocudTrap.js

@@ -0,0 +1,3 @@
+import{jsx as u}from"react/jsx-runtime";import{useRef as a,useEffect as m}from"react";import b from"styled-components";const p=b.div`
+  display: flex;
+`,h=({children:s})=>{const o=a(null);return m(()=>{const d=["a[href]","button:not([disabled])","textarea:not([disabled])","input:not([disabled])","select:not([disabled])",'[tabindex]:not([tabindex="-1"])'],n=o.current;if(!n)return;const e=Array.from(n.querySelectorAll(d.join(","))),i=r=>{if(r.key!=="Tab")return;if(e.length===0){r.preventDefault();return}const f=e[0],c=e[e.length-1],t=e.findIndex(l=>document.activeElement===l);r.preventDefault(),r.shiftKey?t===-1||t===0?c.focus():e[t-1].focus():t===-1||t===e.length-1?f.focus():e[t+1].focus()};return n.addEventListener("keydown",i),()=>{n.removeEventListener("keydown",i)}},[]),u(p,{ref:o,children:s})};export{h as FocusTrap};

package/esm/components/Modal/index.js

@@ -1,4 +1,4 @@
-import{jsx as t,jsxs as e,Fragment as x}from"react/jsx-runtime";import{useEffect as b}from"react";import{createPortal as f}from"react-dom";import{CSSTransition as y}from"react-transition-group";import o,{css as k,createGlobalStyle as d}from"styled-components";import v from"../Icons/Close.js";const s=k`
+import{jsx as t,jsxs as a,Fragment as y}from"react/jsx-runtime";import{useRef as c,useEffect as v}from"react";import{createPortal as k}from"react-dom";import{CSSTransition as T}from"react-transition-group";import o,{css as E,createGlobalStyle as l}from"styled-components";import C from"../../icons/components/CloseIcon.js";import{resetButtonStyle as S}from"../../utils/utils.js";import{FocusTrap as $}from"./FocudTrap.js";const u=E`
   .backgroundTransition-enter {
     opacity: 0;
   }
@@ -16,21 +16,21 @@ import{jsx as t,jsxs as e,Fragment as x}from"react/jsx-runtime";import{useEffect
     opacity: 0;
     transition: opacity 0.25s ease-in-out;
   }
-`,T=o.div`
-  ${s}
+`,j=o.div`
+  ${u}
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 200;
-`,E=o.div`
+`,z=o.div`
   z-index: -1;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(34, 34, 34, 0.3);
-`,C=o.div`
+`,I=o.div`
   position: relative;
   max-width: 512px;
   padding: 1rem;
@@ -53,20 +53,27 @@ import{jsx as t,jsxs as e,Fragment as x}from"react/jsx-runtime";import{useEffect
     margin-right: auto;
     min-width: 355px;
   }
-`,S=o.div`
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
 
-  :hover {
+  &:focus-visible {
+    outline: none;
+  }
+`,L=o.button`
+  ${S}
+  display: flex;
+  justify-self: flex-end;
+
+  &:focus-visible {
+    outline: revert;
+  }
+
+  &:hover {
     cursor: pointer;
   }
 
   svg {
-    width: 1rem;
-    height: 1rem;
+    font-size: 1.5rem;
   }
-`,L=d`
+`,O=l`
   body {
     overflow: hidden;
 
@@ -74,6 +81,6 @@ import{jsx as t,jsxs as e,Fragment as x}from"react/jsx-runtime";import{useEffect
         padding-right: 15px !important;
     `}
   }
-`,O=d`
-  ${s}
-`,c=({children:m,isOpen:n,contentStyles:p,withPortal:l=!1,withCloseIcon:u=!0,onClose:i,...g})=>{b(()=>{const a=w=>{w.key==="Escape"&&n&&i()};return window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[i,n]);const h=!!(typeof window<"u"&&window.document&&window.document.createElement),r=t(y,{in:n,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition",children:e(x,{children:[t(O,{}),e(T,{...g,children:[t(E,{"data-testid":"background",onClick:i}),e(C,{style:p,children:[u&&t(S,{onClick:i,"data-testid":"close",children:t(v,{})}),m]}),t(L,{})]})]})});return l&&h?f(r,document.body):r};export{c as Modal,c as default};
+`,P=l`
+  ${u}
+`,m=({children:p,isOpen:e,contentStyles:f,withPortal:g=!1,withCloseIcon:x=!0,onClose:i,...b})=>{const n=c(null),r=c(null);v(()=>{const s=w=>{w.key==="Escape"&&e&&i()};return e&&(r.current=document.activeElement,window.addEventListener("keydown",s),n.current&&n.current.focus()),!e&&r.current&&r.current.focus(),()=>{window.removeEventListener("keydown",s)}},[i,e]);const h=!!(typeof window<"u"&&window.document&&window.document.createElement),d=t(T,{in:e,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition",children:a(y,{children:[t(P,{}),a(j,{...b,children:[t(z,{"data-testid":"background",onClick:i}),t($,{children:a(I,{style:f,role:"dialog","aria-modal":"true","aria-labelledby":"modal-title",tabIndex:-1,ref:n,children:[x&&t(L,{onClick:i,"data-testid":"close",type:"button","aria-label":"Close dialog",children:t(C,{})}),p]})}),t(O,{})]})]})});return g&&h?k(d,document.body):d};export{m as Modal,m as default};

package/esm/components/OffCanvas/index.js

@@ -1,18 +1,18 @@
-import{jsxs as v,Fragment as c,jsx as n}from"react/jsx-runtime";import{useRef as x}from"react";import{createPortal as w}from"react-dom";import h from"styled-components";import{CSSTransition as k}from"react-transition-group";import O from"./Overlay.js";import{useOutsideClick as b}from"./useClickOutside.js";const C="offCanvasAnimation",N={timeout:{enter:300,exit:300},mountOnEnter:!0,unmountOnExit:!0},P=h.div`
-  ${({animationName:t,animationDuration:i,width:r,from:o,backgroundColor:a,theme:e})=>`
+import{jsxs as b,Fragment as h,jsx as n}from"react/jsx-runtime";import{useRef as $,useEffect as O}from"react";import{createPortal as C}from"react-dom";import g from"styled-components";import{CSSTransition as y}from"react-transition-group";import E from"./Overlay.js";import{useOutsideClick as N}from"./useClickOutside.js";import{FocusTrap as D}from"../Modal/FocudTrap.js";const P="offCanvasAnimation",S={timeout:{enter:300,exit:300},mountOnEnter:!0,unmountOnExit:!0},j=g.div`
+  ${({animationName:t,animationDuration:l,width:e,from:o,backgroundColor:m,theme:i})=>`
     position: fixed;
     z-index: 1001;
     width: 100%;
     height: 100%;
     top: 0;
     ${o==="left"?"left: 0;":"right: 0;"}
-    background-color: ${a||e.colors.background.light};
-    width: ${r};
+    background-color: ${m||i.colors.background.light};
+    width: ${e};
     box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
 
 
     &.${t}--right-enter {
-      transform: translate3d(${r}, 0, 0);
+      transform: translate3d(${e}, 0, 0);
     }
 
     &.${t}--right-enter.${t}--right-enter-active {
@@ -25,12 +25,12 @@ import{jsxs as v,Fragment as c,jsx as n}from"react/jsx-runtime";import{useRef as
     }
 
     &.${t}--right-exit.${t}--right-exit-active {
-      transform: translate3d(${r}, 0, 0);
+      transform: translate3d(${e}, 0, 0);
       transition: transform 0.2s ease-in-out;
     }
 
     &.${t}--left-enter {
-      transform: translate3d(-${r}, 0, 0);
+      transform: translate3d(-${e}, 0, 0);
     }
 
     &.${t}--left-enter.${t}--left-enter-active {
@@ -43,15 +43,19 @@ import{jsxs as v,Fragment as c,jsx as n}from"react/jsx-runtime";import{useRef as
     }
 
     &.${t}--left-exit.${t}--left-exit-active {
-      transform: translate3d(-${r}, 0, 0);
-      transition: transform ${i}ms ease-in-out;
+      transform: translate3d(-${e}, 0, 0);
+      transition: transform ${l}ms ease-in-out;
+    }
+    
+    &:focus-visible {
+      outline: none;
     }
   `}
-`,y=h.div`
+`,F=g.div`
   position: relative;
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-`,u=({animationName:t=C,animationDuration:i=300,backgroundColor:r,backgroundOverlay:o,children:a,from:e="right",isOpen:s,onClickOutside:m,width:$="375px",withPortal:g,transitionProps:p})=>{const l=x(null);b(l,()=>m?.()),o&&!m&&console.error("Please provide a clickOutside handler when using backgroundOverlay option in OffCanvas component");const f=`${t}--${e}`,d=v(c,{children:[o&&n(O,{isOpen:s}),n(c,{children:n(k,{in:s,className:`${t} ${f}`,classNames:f,...N,...p,children:n(P,{ref:l,animationName:t,animationDuration:i,backgroundColor:r,from:e,width:$,children:n(y,{className:`${t}-content`,children:a})})})})]});return g?w(d,document.body):d};export{u as OffCanvas,u as default};
+`,p=({animationName:t=P,animationDuration:l=300,backgroundColor:e,backgroundOverlay:o,children:m,from:i="right",isOpen:r,onClickOutside:a,width:v="375px",withPortal:w,transitionProps:x})=>{const s=$(null),d=$(null);N(s,()=>a?.()),O(()=>{const u=k=>{k.key==="Escape"&&r&&a?.()};return r&&(d.current=document.activeElement,window.addEventListener("keydown",u),s.current&&s.current.focus()),!r&&d.current&&d.current.focus(),()=>{window.removeEventListener("keydown",u)}},[a,r]),o&&!a&&console.error("Please provide a clickOutside handler when using backgroundOverlay option in OffCanvas component");const c=`${t}--${i}`,f=b(h,{children:[o&&n(E,{isOpen:r}),n(h,{children:n(y,{in:r,className:`${t} ${c}`,classNames:c,...S,...x,children:n(D,{children:n(j,{ref:s,animationName:t,animationDuration:l,backgroundColor:e,from:i,width:v,role:"dialog","aria-modal":"true","aria-label":"Side panel",tabIndex:-1,children:n(F,{className:`${t}-content`,children:m})})})})})]});return w?C(f,document.body):f};export{p as OffCanvas,p as default};

package/esm/components/RadioButton/index.js

@@ -1,4 +1,4 @@
-import{jsxs as b,jsx as c}from"react/jsx-runtime";import i,{css as a}from"styled-components";import{generateNameHash as g}from"../../shared/helpers.js";import e from"../../theme.js";import{BodyText as $}from"../../typography/BodyText/index.js";import{BackgroundStyles as x}from"../IconButton.js";import"../../shared/media-queries.js";import"../../utils/utils.js";const f=a`
+import{jsxs as b,jsx as c}from"react/jsx-runtime";import i,{css as s}from"styled-components";import{generateNameHash as g}from"../../shared/helpers.js";import e from"../../theme.js";import{BodyText as $}from"../../typography/BodyText/index.js";import{BackgroundStyles as x}from"../IconButton.js";import"../../shared/media-queries.js";import"../../utils/utils.js";const f=s`
   .circle {
     &--outer {
       height: 24px;
@@ -11,7 +11,7 @@ import{jsxs as b,jsx as c}from"react/jsx-runtime";import i,{css as a}from"styled
       transform: scale(0.6);
     }
   }
-`,k=a`
+`,k=s`
   .circle {
     &--outer {
       height: 32px;
@@ -24,7 +24,7 @@ import{jsxs as b,jsx as c}from"react/jsx-runtime";import i,{css as a}from"styled
       transform: scale(0.6);
     }
   }
-`,p={regular:f,large:k},y=a`
+`,p={regular:f,large:k},y=s`
   cursor: default;
 
   .circle {
@@ -36,14 +36,14 @@ import{jsxs as b,jsx as c}from"react/jsx-runtime";import i,{css as a}from"styled
       border: 2px solid ${e.colors.grayscaleToned.light2};
     }
   }
-`,D=a`
+`,D=s`
   .circle {
     &--inner {
       opacity: 1;
       background-color: ${e.colors.grayscaleToned.light2};
     }
   }
-`,z=(r,o,s)=>a`
+`,z=(r,o,a)=>s`
   .circle {
     &--inner {
       opacity: 1;
@@ -52,10 +52,10 @@ import{jsxs as b,jsx as c}from"react/jsx-runtime";import i,{css as a}from"styled
 
     &--outer {
       border: 2px solid
-        ${s?e.colors.error.dark:e.colors[r][o]};
+        ${a?e.colors.error.dark:e.colors[r][o]};
     }
   }
-`,E=i.div`
+`,v=i.div`
   display: flex;
   align-items: flex-start;
   box-sizing: border-box;
@@ -79,21 +79,21 @@ import{jsxs as b,jsx as c}from"react/jsx-runtime";import i,{css as a}from"styled
     transition: background-color 400ms;
     ${x}
   }
-`,T=i.input`
+`,E=i.input`
   position: absolute;
   opacity: 0;
   margin: 0;
   ${r=>!r.isDisabled&&"cursor: pointer;"}
   z-index: 1;
   ${r=>p[r.$size]};
-`,v=i.span`
+`,N=i.span`
   display: flex;
   box-sizing: border-box;
   border-radius: 50%;
 
   border: 2px solid
     ${r=>r.$hasError?e.colors.error.dark:e.colors.grayscaleToned.dark5};
-`,w=i.span`
+`,T=i.span`
   box-sizing: border-box;
   opacity: 0;
   margin: auto;
@@ -102,9 +102,9 @@ import{jsxs as b,jsx as c}from"react/jsx-runtime";import i,{css as a}from"styled
   position: absolute;
   top: 0;
   left: 0;
-`,B=i($)`
+`,w=i($)`
   cursor: ${({isDisabled:r})=>r?"default":"pointer"};
   user-select: none;
   color: ${({theme:r,isDisabled:o})=>o?r.colors.text.disabled:r.colors.text.dark};
   margin-left: 0.5rem;
-`,m=({name:r=g("radio-button"),size:o="regular",checked:s=!1,isDisabled:l=!1,color:t="secondary",colorShade:d="mainAlt",label:n,hasError:h,...u})=>b(E,{children:[b(S,{size:o,$color:t,$colorShade:d,isChecked:s,isDisabled:l,$hasError:h,children:[c(T,{"data-validate":"checked",checked:s,type:"radio",name:r,id:r,disabled:l,"aria-label":r,"aria-checked":s,className:"circle circle--outer",$size:o,isDisabled:l,$color:t,$colorShade:d,...u}),c(v,{className:"circle circle--outer",$hasError:h,children:c(w,{className:"circle circle--inner"})})]}),n&&c(B,{as:"label",htmlFor:r,isDisabled:l,children:n})]});export{m as RadioButton,m as default};
+`,m=({name:r=g("radio-button"),size:o="regular",checked:a=!1,isDisabled:l=!1,color:n="secondary",colorShade:h="mainAlt",label:d,hasError:t,...u})=>b(v,{children:[b(S,{size:o,$color:n,$colorShade:h,isChecked:a,isDisabled:l,$hasError:t,children:[c(E,{"data-validate":"checked",checked:a,type:"radio",name:r,id:r,disabled:l,"aria-label":d?void 0:r,"aria-checked":a,"aria-invalid":t||void 0,className:"circle circle--outer",$size:o,isDisabled:l,$color:n,$colorShade:h,...u}),c(N,{className:"circle circle--outer",$hasError:t,children:c(T,{className:"circle circle--inner"})})]}),d&&c(w,{as:"label",htmlFor:r,isDisabled:l,children:d})]});export{m as RadioButton,m as default};

package/esm/components/RegistrationPlate/index.js

@@ -1,4 +1,4 @@
-import{jsxs as i,jsx as o}from"react/jsx-runtime";import t from"styled-components";import l from"./EuFlagIcon.js";const s=t.div`
+import{jsxs as i,jsx as r}from"react/jsx-runtime";import t from"styled-components";import a from"./EuFlagIcon.js";const s=t.div`
   display: grid;
   grid-template: 100% / 16px auto;
   width: 124px;
@@ -17,7 +17,7 @@ import{jsxs as i,jsx as o}from"react/jsx-runtime";import t from"styled-component
     font-size: 11px;
     align-self: center;
   }
-`,a=t.div`
+`,p=t.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -30,10 +30,10 @@ import{jsxs as i,jsx as o}from"react/jsx-runtime";import t from"styled-component
   border-left: none;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
-`,p=t.div`
+`,h=t.div`
   color: ${({theme:e})=>e.colors.text.light};
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: 10px;
   font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
   line-height: 1;
-`,h=({regNumber:e})=>i(s,{children:[i(n,{children:[o(l,{}),o(p,{children:"S"})]}),o(a,{children:(d=>{const r=d.replace(/\s+/g,"").slice(0,6);return`${r.slice(0,3)} ${r.slice(3)}`})(e)})]});export{h as default};
+`,c=({regNumber:e})=>{const d=l=>{const o=l.replace(/\s+/g,"").slice(0,6);return`${o.slice(0,3)} ${o.slice(3)}`};return i(s,{role:"text","aria-label":`Registration plate: ${e}`,children:[i(n,{"aria-hidden":"true",children:[r(a,{"aria-hidden":"true"}),r(h,{children:"S"})]}),r(p,{children:d(e)})]})};export{c as default};