@kvdbil/components 16.0.7 → 17.0.0

package/cjs/components/Accordion/index.js

@@ -1,20 +1,20 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),o=require("react-collapse"),n=require("../../shared/media-queries.js"),a=require("../../icons/components/ArrowDownIcon.js");var s,i=(s=r)&&s.__esModule?s:{default:s};const l=i.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),o=require("react-collapse"),n=require("../../shared/media-queries.js"),s=require("../../icons/components/ArrowDownIcon.js"),a=require("../../shared/helpers.js");var i,l=(i=r)&&i.__esModule?i:{default:i};const d=l.default.div`
   display: flex;
   flex-direction: column;
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
-`,d=i.default.ul`
+`,c=l.default.ul`
   margin: 0;
   padding: 0;
   list-style: none;
-`,c=i.default.div`
+`,m=l.default.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   cursor: pointer;
   margin: 0.5rem 0;
-`,m=i.default.div`
+`,u=l.default.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -22,19 +22,19 @@
   color: ${({theme:e})=>e.colors.text.dark};
   transition: 200ms ease-in-out;
   transform: ${({isOpen:e})=>`rotate(${e?"180deg":"0deg"})`};
-`,p=i.default.li`
+`,p=l.default.li`
   border-top: ${({theme:e})=>`1px solid ${e.colors.grayscaleToned.light2}`};
   padding: ${({isOpen:e})=>e?"0.5rem 0 1rem 0":"0.5rem 0"};
 
   &:last-child {
     border-bottom: ${({theme:e})=>`1px solid ${e.colors.grayscaleToned.light2}`};
   }
-`,u=i.default.span`
+`,h=l.default.span`
   color: ${({theme:e})=>e.colors.text.dark};
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: 0.9375rem;
   font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
-`,h=i.default.div`
+`,f=l.default.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   color: ${({theme:e})=>e.colors.text.dark};
   font-size: 0.9375rem;
@@ -48,4 +48,4 @@
     margin-top: 0;
     margin-bottom: 0;
   }
-`,f=({items:r,...n})=>{const[s,i]=t.useState({}),f=e=>{i((t=>({...t,[e]:!t[e]})))},g=e=>()=>{f(e)},y=e=>t=>{"Enter"===t.key&&f(e)};return e.jsx(l,{...n,children:e.jsx(d,{className:"accordionList",children:r.map(((t,r)=>{const n=!!s[r];return e.jsxs(p,{isOpen:n,className:"accordionItem",children:[e.jsxs(c,{onClick:g(r),onKeyPress:y(r),className:"accordionItemTitle",role:"button",tabIndex:0,"aria-expanded":n,id:`panel${r}-header`,"aria-controls":`panel${r}-content`,children:[e.jsx(u,{as:"span",children:t.title}),e.jsx(m,{isOpen:n,children:e.jsx(a.default,{})})]}),e.jsx(o.UnmountClosed,{isOpened:n,children:e.jsx(h,{"aria-labelledby":`panel${r}-header`,id:`panel${r}-content`,role:"region",className:"wysiwyg",dangerouslySetInnerHTML:{__html:t.text}})},r)]},t.title)}))})})};exports.Accordion=f,exports.default=f;
+`,g=({items:r,...n})=>{const[i,l]=t.useState({}),g=t.useRef(a.generateNameHash("accordion")),y=e=>{l((t=>({...t,[e]:!t[e]})))},x=e=>()=>{y(e)},$=e=>t=>{("Enter"===t.key||" "===t.key)&&(t.preventDefault(),y(e))};return e.jsx(d,{...n,children:e.jsx(c,{className:"accordionList",children:r.map(((t,r)=>{const n=!!i[r],a=`${g.current}-${r}-header`,l=`${g.current}-${r}-content`;return e.jsxs(p,{isOpen:n,className:"accordionItem",children:[e.jsxs(m,{id:a,onClick:x(r),onKeyDown:$(r),className:"accordionItemTitle",role:"button",tabIndex:0,"aria-expanded":n,"aria-controls":l,children:[e.jsx(h,{as:"span",children:t.title}),e.jsx(u,{isOpen:n,children:e.jsx(s.default,{})})]}),e.jsx(o.UnmountClosed,{isOpened:n,children:e.jsx(f,{id:l,"aria-labelledby":a,role:"region",className:"wysiwyg",dangerouslySetInnerHTML:{__html:t.text}})},r)]},t.title)}))})})};exports.Accordion=g,exports.default=g;

package/cjs/components/Badge/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../theme.js");var i,o=(i=t)&&i.__esModule?i:{default:i};const d=o.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../theme.js");var i,o=(i=t)&&i.__esModule?i:{default:i};const a=o.default.div`
   border-radius: 0.75rem;
   background: ${r.default.colors.secondary.mainAlt};
   display: inline-flex;
@@ -9,13 +9,13 @@
   height: 1.5rem;
   box-sizing: border-box;
   cursor: default;
-`,n=o.default(d)`
+`,d=o.default(a)`
   width: 1rem;
   height: 1rem;
   border-radius: 50%;
   min-width: 1rem;
   position: relative;
-`,a=o.default.div`
+`,l=o.default.div`
   display: block;
   width: 100%;
   height: 100%;
@@ -26,10 +26,10 @@
   position: absolute;
   top: 0;
   left: 0;
-`,l=o.default.span`
+`,n=o.default.span`
   font-size: 0.75rem;
   line-height: 0.75rem;
   color: white;
   font-weight: ${({theme:e})=>e.typography.fontAlternativeBoldWeight};
   font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
-`,s=({notificationAmount:t=0,withNumber:r=!0,...i})=>{if((t<=0||!t)&&r)return null;if(!r)return e.jsx(n,{...i,children:e.jsx(a,{"data-test":"middle-dot"})});const o=(e=>e>=100?"99+":`${e}`)(t);return e.jsx(d,{...i,children:e.jsx(l,{children:o})})};exports.Badge=s,exports.default=s;
+`,s=({notificationAmount:t=0,withNumber:r=!0,ariaLabel:i,...o})=>{if((t<=0||!t)&&r)return null;if(!r)return e.jsx(d,{...o,children:e.jsx(l,{"data-test":"middle-dot"})});const s=(e=>e>=100?"99+":`${e}`)(t);return e.jsx(a,{role:i?"status":void 0,"aria-label":i?`${s} ${i}`:void 0,...o,children:e.jsx(n,{children:s})})};exports.Badge=s,exports.default=s;

package/cjs/components/Breadcrumbs/BreadcrumbsItem.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),n=require("../../typography/BodyText/index.js");require("../../shared/media-queries.js");var r,o=(r=t)&&r.__esModule?r:{default:r};const l=o.default.li`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),n=require("../../typography/BodyText/index.js");require("../../shared/media-queries.js");var r,i=(r=t)&&r.__esModule?r:{default:r};const o=i.default.li`
   display: flex;
   align-items: center;
   margin: 0;
@@ -15,18 +15,18 @@
   }
 
   ${({$onlyLastTruncated:e})=>e&&"\n    &:last-child {\n      overflow: hidden;\n    }\n  "}
-`,i=o.default(n.BodyText)`
+`,l=i.default(n.BodyText)`
   color: ${({theme:e})=>e.colors.text.dark};
   overflow: hidden;
   text-overflow: ellipsis;
-`,s=o.default.span`
+`,a=i.default.span`
   display: inline-flex;
   padding-right: 0.5rem;
   svg {
     width: 1rem;
     height: 1rem;
   }
-`,d=o.default.span`
+`,d=i.default.span`
   display: inline-flex;
   padding: 0 0.5rem;
   color: ${({theme:e})=>e.colors.grayscaleToned.light1};
@@ -34,4 +34,4 @@
     width: 1rem;
     height: 1rem;
   }
-`;exports.default=({link:t,separator:n,isLast:r,onlyLastTruncated:o})=>e.jsx(e.Fragment,{children:e.jsxs(l,{$onlyLastTruncated:o,children:[t.prefixIcon&&e.jsx(s,{children:t.prefixIcon}),r?e.jsx(i,{as:"span",children:t.component}):e.jsxs(e.Fragment,{children:[t.component,e.jsx(d,{children:n})]})]})});
+`;exports.default=({link:t,separator:n,isLast:r,onlyLastTruncated:i})=>e.jsx(e.Fragment,{children:e.jsxs(o,{$onlyLastTruncated:i,children:[t.prefixIcon&&e.jsx(a,{"aria-hidden":"true",children:t.prefixIcon}),r?e.jsx(l,{as:"span","aria-current":"page",children:t.component}):e.jsxs(e.Fragment,{children:[t.component,e.jsx(d,{"aria-hidden":"true",children:n})]})]})});

package/cjs/components/Breadcrumbs/index.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("react/jsx-runtime"),s=require("styled-components"),t=require("./BreadcrumbsItem.js"),a=require("../../icons/components/NextIcon.js");require("../../typography/BodyText/index.js"),require("../../shared/media-queries.js");const i=((e=s)&&e.__esModule?e:{default:e}).default.ul`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("react/jsx-runtime"),s=require("react"),a=require("styled-components"),t=require("./BreadcrumbsItem.js"),n=require("../../icons/components/NextIcon.js"),i=require("../../shared/helpers.js");require("../../typography/BodyText/index.js"),require("../../shared/media-queries.js");const u=((e=a)&&e.__esModule?e:{default:e}).default.ol`
   display: flex;
   align-items: center;
   padding: 0;
   white-space: nowrap;
   overflow: hidden;
-`;exports.default=({links:e,separator:s=r.jsx(a.default,{}),onlyLastTruncated:n=!1})=>r.jsx(i,{children:e.map(((a,i)=>r.jsx(t.default,{link:a,separator:s,isLast:i===e.length-1,onlyLastTruncated:n},i)))});
+`;exports.default=({links:e,separator:a=r.jsx(n.default,{}),onlyLastTruncated:d=!1})=>{const l=s.useRef(i.generateNameHash("breadcrumb"));return r.jsx("nav",{"aria-label":"Breadcrumb",id:l.current,children:r.jsx(u,{children:e.map(((s,n)=>r.jsx(t.default,{link:s,separator:a,isLast:n===e.length-1,onlyLastTruncated:d},`${l.current}-${n}`)))})})};

package/cjs/components/Button/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),r=require("styled-components"),s=require("../../theme.js"),t=require("../Spinner/index.js"),o=require("../../typography/ButtonText/index.js"),l=require("./styles.js");function a(e){return e&&e.__esModule?e:{default:e}}require("../../utils/utils.js");var n=a(i),d=a(r);const u=d.default.button`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),r=require("styled-components"),t=require("../../theme.js"),s=require("../Spinner/index.js"),o=require("../../typography/ButtonText/index.js"),l=require("./styles.js");function a(e){return e&&e.__esModule?e:{default:e}}require("../../utils/utils.js");var n=a(i),d=a(r);const u=d.default.button`
   ${o.BasicButtonFontStyle}
   box-sizing: border-box;
   outline: none;
@@ -7,11 +7,11 @@
   position: relative;
   border: none;
   ${({$noRadius:e})=>!e&&"border-radius: 0.5rem;"}
-  min-width: ${({minWidth:e})=>e||"auto"};
-  width: ${({fullWidth:e})=>e&&"100%"};
+  min-width: ${({$minWidth:e})=>e||"auto"};
+  width: ${({$fullWidth:e})=>e&&"100%"};
   display: flex;
   align-items: center;
-  justify-content: ${({sufixIcon:e,prefixIcon:i,isLoading:r})=>r||!e&&!i?"center":"space-between"};
+  justify-content: ${({$isIcon:e,$isLoading:i})=>!i&&e?"space-between":"center"};
 
   ${({$size:e})=>l.fontSizes[e]||o.ButtonRegularTextStyle}
   ${({$size:e})=>r.css`
@@ -25,21 +25,22 @@
     background-color 0.3s ease,
     border 0.3s ease,
     filter 0.3s;
-  ${({$variant:e="solid",$color:i,$colorShade:s,disabled:t,theme:o})=>r.css`
-    ${t?l.disabledColorStyles(o,e):l.colorStyles[e]({theme:o,$color:i,$colorShade:s,$variant:e})}
+  ${({$variant:e="solid",$color:i,$colorShade:t,disabled:s,theme:o})=>r.css`
+    ${s?l.disabledColorStyles(o,e):l.colorStyles[e]({theme:o,$color:i,$colorShade:t,$variant:e})}
   `}
   &:focus-visible {
     box-shadow: 0px 0px 0px 1px
       ${({theme:e})=>e.colors.grayscaleToned.light5};
+    outline: revert;
   }
-`,c={small:"1rem",regular:"1.25rem",large:"1.5rem"},f={small:"0.5rem",regular:"1rem",large:"1rem"},p=d.default.span`
+`,c={small:"1rem",regular:"1.25rem",large:"1.5rem"},$={small:"0.5rem",regular:"1rem",large:"1rem"},p=d.default.span`
   display: flex;
-  margin-right: ${({type:e,size:i})=>"prefix"===e?f[i]:0};
-  margin-left: ${({type:e,size:i})=>"sufix"===e?f[i]:0};
+  margin-right: ${({type:e,size:i})=>"prefix"===e?$[i]:0};
+  margin-left: ${({type:e,size:i})=>"sufix"===e?$[i]:0};
   font-size: ${({size:e})=>c[e]};
   opacity: ${({isLoading:e})=>e?0:1};
-`,g=d.default(t.default)`
+`,f=d.default(s.default)`
   position: absolute;
-`,m=d.default.span`
-  opacity: ${({isLoading:e})=>e?0:1};
-`,x={small:1,regular:1.25,large:1.5},$=i.forwardRef((({size:i="regular",color:r,colorShade:t="mainAlt",variant:o="solid",fullWidth:l=!1,isDisabled:a=!1,isLoading:d=!1,children:c,sufixIcon:f,prefixIcon:$,minWidth:y,as:h="button",noRadius:b=!1,...z},S)=>{return e.jsx(u,{...z,as:h,minWidth:y,$color:r,$colorShade:t,disabled:a||d,fullWidth:l,theme:s.default,$variant:o,$size:i,isLoading:d,ref:S,prefixIcon:$,sufixIcon:f,$noRadius:b,children:e.jsxs(e.Fragment,{children:[$&&e.jsx(p,{size:i,type:"prefix",isLoading:d,children:$}),(j=c,v=d,"string"==typeof j||"number"==typeof j?e.jsx(m,{isLoading:v,children:j}):n.default.isValidElement(j)?n.default.cloneElement(j,{style:{...j.props.style,opacity:v?0:1}}):j),f&&e.jsx(p,{size:i,type:"sufix",isLoading:d,children:f}),d&&e.jsx(g,{customColor:s.default.colors.grayscaleToned.light1,size:x[i]})]})});var j,v}));$.displayName="Button",exports.Button=$,exports.default=$;
+`,g=d.default.span`
+  opacity: ${({$isLoading:e})=>e?0:1};
+`,m={small:1,regular:1.25,large:1.5},y=i.forwardRef((({size:i="regular",color:r,colorShade:s="mainAlt",variant:o="solid",fullWidth:l=!1,isDisabled:a=!1,isLoading:d=!1,children:c,sufixIcon:$,prefixIcon:y,minWidth:x,as:h="button",noRadius:b=!1,...z},S)=>{return e.jsx(u,{...z,as:h,$minWidth:x,$color:r,$colorShade:s,disabled:a||d,$fullWidth:l,theme:t.default,$variant:o,$size:i,$isLoading:d,ref:S,$isIcon:!(!y&&!$),$noRadius:b,"aria-disabled":"button"===h?a||d:void 0,"aria-busy":"button"===h?d:void 0,children:e.jsxs(e.Fragment,{children:[y&&e.jsx(p,{size:i,type:"prefix",isLoading:d,children:y}),(j=c,v=d,"string"==typeof j||"number"==typeof j?e.jsx(g,{$isLoading:v,children:j}):n.default.isValidElement(j)?n.default.cloneElement(j,{style:{...j.props.style,opacity:v?0:1}}):j),$&&e.jsx(p,{size:i,type:"sufix",isLoading:d,children:$}),d&&e.jsx(f,{customColor:t.default.colors.grayscaleToned.light1,size:m[i]})]})});var j,v}));y.displayName="Button",exports.Button=y,exports.default=y;

package/cjs/components/Card/index.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("styled-components"),r=require("../../theme.js");var d,l=(d=o)&&d.__esModule?d:{default:d};const t=l.default.div``,s=l.default.div`
-  background: ${({theme:e,$customColor:o,$color:r="secondary",$colorShade:d})=>o||e.colors[r][d]};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("styled-components"),r=require("../../theme.js");var l,d=(l=o)&&l.__esModule?l:{default:l};const t=d.default.div``,s=d.default.div`
+  background: ${({theme:e,$customColor:o,$color:r="secondary",$colorShade:l})=>o||e.colors[r][l]};
   height: 0.25rem;
-`,a=l.default.div`
+`,a=d.default.div`
   background: ${r.default.colors.background.light};
 
-  ${({noFrame:e,topBorder:o,lineBorder:r,theme:d})=>!o&&(!e||r)&&`border-top: 1px solid ${d.colors.grayscaleToned.light5};`}
+  ${({noFrame:e,topBorder:o,lineBorder:r,theme:l})=>!o&&(!e||r)&&`border-top: 1px solid ${l.colors.grayscaleToned.light5};`}
 
   ${({noFrame:e,lineBorder:o,theme:r})=>(!e||o)&&`border-bottom: 1px solid ${r.colors.grayscaleToned.light5};\n  `}
 
   ${({noFrame:e,lineBorder:o,theme:r})=>!e&&!o&&`border-right: 1px solid ${r.colors.grayscaleToned.light5};\n     border-left: 1px solid ${r.colors.grayscaleToned.light5};`}
-`,i=({children:o,topBorder:r,topBorderColor:d,topBorderColorShade:l="mainAlt",noFrame:i=!1,lineBorder:n=!1,as:c="div"})=>e.jsxs(t,{as:c,children:[(r||d)&&e.jsx(s,{$customColor:r,$color:d,$colorShade:l}),e.jsx(a,{topBorder:r,noFrame:i,lineBorder:n,children:o})]});exports.Card=i,exports.default=i;
+`,i=({children:o,topBorder:r,topBorderColor:l,topBorderColorShade:d="mainAlt",noFrame:i=!1,lineBorder:n=!1,as:c="div"})=>e.jsxs(t,{as:c,role:"region",children:[(r||l)&&e.jsx(s,{$customColor:r,$color:l,$colorShade:d}),e.jsx(a,{topBorder:r,noFrame:i,lineBorder:n,children:o})]});exports.Card=i,exports.default=i;

package/cjs/components/CheckBox/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),o=require("../../icons/components/CheckmarkIcon.js"),s=require("../../shared/helpers.js"),i=require("../../theme.js"),t=require("../../typography/BodyText/index.js"),a=require("../IconButton.js");require("../../shared/media-queries.js"),require("../../utils/utils.js");var l,d=(l=r)&&l.__esModule?l:{default:l};const c={regular:r.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),o=require("../../icons/components/CheckmarkIcon.js"),s=require("../../shared/helpers.js"),i=require("../../theme.js"),a=require("../../typography/BodyText/index.js"),l=require("../IconButton.js");require("../../shared/media-queries.js"),require("../../utils/utils.js");var d,t=(d=r)&&d.__esModule?d:{default:d};const c={regular:r.css`
   width: 24px;
   height: 24px;
 
@@ -22,12 +22,12 @@
   z-index: 1;
 `,u=r.css`
   border: 2px solid ${i.default.colors.error.dark};
-`,x=d.default.div`
+`,x=t.default.div`
   display: flex;
   align-items: flex-start;
   box-sizing: border-box;
   position: relative;
-`,p=d.default.input.attrs({type:"checkbox"})`
+`,p=t.default.input.attrs({type:"checkbox"})`
   position: absolute;
   appearance: none;
   width: 100%;
@@ -42,9 +42,9 @@
   &:hover,
   &:focus {
     transition: background-color 400ms;
-    ${a.BackgroundStyles}
+    ${l.BackgroundStyles}
   }
-`,b=d.default.span`
+`,b=t.default.span`
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -76,10 +76,10 @@
   ${e=>e.isDisabled&&n};
   ${e=>e.hasError&&u};
   ${e=>e.isChecked&&e.isDisabled&&h};
-`,g=d.default(t.BodyText)`
+`,g=t.default(a.BodyText)`
   flex: 1;
   cursor: ${({isDisabled:e})=>e?"default":"pointer"};
   user-select: none;
   color: ${({theme:e,isDisabled:r})=>r?e.colors.text.disabled:e.colors.text.dark};
   margin-left: 0.5rem;
-`,f=({name:r=s.generateNameHash("check-box"),isDisabled:i=!1,size:t="regular",checked:a=!1,color:l="secondary",colorShade:d="mainAlt",hasError:c=!1,label:n,...h})=>e.jsxs(x,{children:[e.jsx(p,{...h,type:"checkbox",checked:a,"data-validate":"checked",name:r,id:r,$color:l,$colorShade:d,disabled:i,isDisabled:i,boxSize:t}),e.jsx(b,{size:t,$color:l,$colorShade:d,isChecked:a,isDisabled:i,hasError:c,children:e.jsx(o.default,{})}),n&&e.jsx(g,{as:"label",htmlFor:r,isDisabled:i,children:n})]});exports.CheckBox=f,exports.default=f;
+`,f=({name:r=s.generateNameHash("check-box"),isDisabled:i=!1,size:a="regular",checked:l=!1,color:d="secondary",colorShade:t="mainAlt",hasError:c=!1,label:n,...h})=>e.jsxs(x,{children:[e.jsx(p,{...h,type:"checkbox",checked:l,"data-validate":"checked",name:r,id:r,$color:d,$colorShade:t,disabled:i,isDisabled:i,boxSize:a,"aria-label":n?void 0:r,"aria-checked":l,"aria-invalid":c||void 0}),e.jsx(b,{size:a,$color:d,$colorShade:t,isChecked:l,isDisabled:i,hasError:c,children:e.jsx(o.default,{})}),n&&e.jsx(g,{as:"label",htmlFor:r,isDisabled:i,children:n})]});exports.CheckBox=f,exports.default=f;

package/cjs/components/Chip/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),o=require("../../icons/components/CloseIcon.js"),i=require("./styles.js");require("../../utils/utils.js");var t,l=(t=r)&&t.__esModule?t:{default:t};const n={small:"2px 16px",regular:"3px 16px",large:"7px 16px"},s=l.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),o=require("../../icons/components/CloseIcon.js"),i=require("./styles.js");require("../../utils/utils.js");var t,l=(t=r)&&t.__esModule?t:{default:t};const a={small:"2px 16px",regular:"3px 16px",large:"7px 16px"},n=l.default.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: ${({size:e})=>i.getFontSize(e)};
   font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
@@ -14,7 +14,7 @@
   border-style: solid;
   border-color: ${i.getBorderColor};
   border-radius: 1.293rem;
-  padding: ${({size:e,isDeletable:r})=>r?"0 0.5rem 0 1rem":n[e]};
+  padding: ${({size:e,isDeletable:r})=>r?"0 0.5rem 0 1rem":a[e]};
   transition:
     color 0.3s ease,
     background-color 0.3s ease,
@@ -22,17 +22,17 @@
   box-sizing: border-box;
 
   ${e=>!e.isDisabled&&e.isClickable&&` &:hover {\n    border-color: ${i.getHoverBorderColor(e)};\n    background-color: ${i.getHoverBackgroundColor(e)};\n    color: ${i.getHoverColor(e)};\n  } &:active {\n    background-color: ${i.getActiveBackgroundColor(e)};\n    border-color: ${i.getActiveBorderColor(e)};\n    color: ${i.getActiveColor(e)};\n  }`}
-`,a=l.default.span`
+`,s=l.default.span`
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   line-height: 1.5;
-`,c=l.default.span`
+`,d=l.default.span`
   margin-right: 0.625rem;
   display: flex;
   align-items: center;
-`,d=l.default.span`
+`,c=l.default.span`
   display: flex;
   align-items: center;
   cursor: ${i.getCursorType};
@@ -63,4 +63,4 @@
   &:hover:before {
     opacity: 1;
   }
-`,g=({color:r="primary",children:i,component:t="div",isDisabled:l,onClick:n,size:g="regular",prefix:u,onDelete:p,variant:b="solid",...x})=>{const f=!(!n||l),h=!(!p||l);return e.jsx(s,{...x,role:f?"button":void 0,onClick:f?n:void 0,tabIndex:f?0:void 0,as:f?"button":t,color:r,isDisabled:l,size:g,isClickable:f,isDeletable:h,variant:b,hasPrefix:!!u,children:e.jsxs(a,{children:[u&&e.jsx(c,{className:"prefix",children:u}),i,p&&e.jsx(d,{role:"button",onClick:h?e=>{e.stopPropagation(),p?.(e)}:void 0,color:r,variant:b,isClickable:f,isDisabled:l,isDeletable:!0,size:"regular",children:e.jsx(o.default,{})})]})})};exports.Chip=g,exports.default=g;
+`,g=({color:r="primary",children:i,component:t,isDisabled:l,onClick:a,size:g="regular",prefix:u,onDelete:p,variant:b="solid",role:x,...f})=>{const v=!(!a||l),h=!(!p||l),m=!!u,y=e=>{e.stopPropagation(),p?.(e)};return e.jsx(n,{...f,role:x??(v?"button":void 0),onClick:v?a:void 0,tabIndex:v?0:void 0,as:t??(v?"button":"div"),color:r,isDisabled:l,size:g,isClickable:v,isDeletable:h,variant:b,hasPrefix:m,"aria-disabled":l,children:e.jsxs(s,{children:[u&&e.jsx(d,{className:"prefix",children:u}),i,p&&e.jsx(c,{role:"button","aria-label":"Remove","aria-disabled":l,onClick:h?y:void 0,color:r,variant:b,isClickable:v,isDisabled:l,isDeletable:!0,size:"regular",tabIndex:h?0:void 0,onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&h&&(e.preventDefault(),y(e))},children:e.jsx(o.default,{})})]})})};exports.Chip=g,exports.default=g;

package/cjs/components/Dialog/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),i=require("../Modal/index.js"),t=require("../../theme.js"),o=require("../../typography/Heading/index.js");require("react"),require("react-dom"),require("react-transition-group"),require("../Icons/Close.js"),require("../../shared/media-queries.js");var s,l=(s=r)&&s.__esModule?s:{default:s};const n=l.default(o.TinyTitleBold)`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),i=require("../Modal/index.js"),t=require("../../theme.js"),o=require("../../typography/Heading/index.js");require("react"),require("react-dom"),require("react-transition-group"),require("../../icons/components/CloseIcon.js"),require("../../utils/utils.js"),require("../Modal/FocudTrap.js"),require("../../shared/media-queries.js");var s,l=(s=r)&&s.__esModule?s:{default:s};const n=l.default(o.TinyTitleBold)`
   font-weight: ${t.default.typography.fontAlternativeRegularWeight};
   margin: 0;
 `,a=l.default.div`

package/cjs/components/ErrorMessage/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react/jsx-runtime"),r=require("styled-components");const o=((e=r)&&e.__esModule?e:{default:e}).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("react/jsx-runtime"),t=require("styled-components");const o=((e=t)&&e.__esModule?e:{default:e}).default.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 @@
   font-size: 13px;
   padding: 10px;
   ${({centered:e})=>e&&"text-align: center;"}
-`,n=({children:e,centered:r,...n})=>t.jsx(o,{centered:r,...n,children:e});exports.ErrorMessage=n,exports.default=n;
+`,a=({children:e,centered:t,...a})=>r.jsx(o,{centered:t,role:"alert","aria-live":"assertive",...a,children:e});exports.ErrorMessage=a,exports.default=a;

package/cjs/components/Icon/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("styled-components"),s=require("../../typography/BodyText/index.js"),i=require("../../typography/Heading/index.js"),t=require("../../theme.js"),a=require("../Snackbar/index.js");require("../../shared/media-queries.js"),require("../Icons/CheckCircle.js"),require("../Icons/Close.js"),require("../Icons/ErrorCircle.js"),require("../Icons/InfoCircle.js"),require("react-transition-group"),require("../../utils/utils.js");var n,c=(n=o)&&n.__esModule?n:{default:n};const l=c.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("styled-components"),s=require("../../typography/BodyText/index.js"),i=require("../../typography/Heading/index.js"),t=require("../../theme.js"),n=require("../Snackbar/index.js");require("../../shared/media-queries.js"),require("react-transition-group"),require("../../utils/utils.js"),require("../../icons/components/AlertIcon.js"),require("../../icons/components/CheckCircleIcon.js"),require("../../icons/components/CloseIcon.js"),require("../../icons/components/InfoIcon.js");var a,c=(a=o)&&a.__esModule?a:{default:a};const l=c.default.div`
   margin: 0 auto;
   max-width: 700px;
 `,d=c.default(i.Title)`
@@ -20,13 +20,13 @@
   border-radius: 3px;
   margin: 0.5rem;
   cursor: pointer;
-`,x=c.default(s.Caption)`
+`,m=c.default(s.Caption)`
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
   text-align: center;
-`,m=c.default.span`
+`,x=c.default.span`
   font-size: ${({size:e})=>e};
   color: ${({color:e})=>e};
-`;exports.default=({background:o=t.default.colors.background.light,color:s=t.default.colors.text.dark,icons:i,size:n="2rem"})=>{const[c,g]=r.useState({isOpen:!1,message:"",type:"info",color:"neutral"});return e.jsxs(e.Fragment,{children:[e.jsxs(l,{children:[e.jsx(d,{as:"h2",children:"Click to copy import declaration for icon"}),e.jsx(u,{children:i.map((([r,i],t)=>e.jsxs(p,{background:o,onClick:()=>{(async e=>{const r=`import { ${e} } from 'kvdbil-components';`;if(navigator.clipboard)try{await navigator.clipboard.writeText(r),g((r=>({...r,isOpen:!0,message:`copied import for ${e}`,type:"success",color:"success"})))}catch(e){g((r=>({...r,isOpen:!0,message:`Could not copy text: ${e}`,type:"error",color:"error"})))}})(r)},children:[e.jsx(x,{children:r}),e.jsx(m,{size:n,color:s,children:e.jsx(i,{})})]},t)))})]}),e.jsx(a.Snackbar,{message:c.message,isOpen:c.isOpen,type:c.type,color:c.color,onClose:()=>g((e=>({...e,isOpen:!1})))})]})};
+`;exports.default=({background:o=t.default.colors.background.light,color:s=t.default.colors.text.dark,icons:i,size:a="2rem"})=>{const[c,g]=r.useState({isOpen:!1,message:"",type:"info",color:"neutral"});return e.jsxs(e.Fragment,{children:[e.jsxs(l,{children:[e.jsx(d,{as:"h2",children:"Click to copy import declaration for icon"}),e.jsx(u,{children:i.map((([r,i],t)=>e.jsxs(p,{background:o,onClick:()=>{(async e=>{const r=`import { ${e} } from 'kvdbil-components';`;if(navigator.clipboard)try{await navigator.clipboard.writeText(r),g((r=>({...r,isOpen:!0,message:`copied import for ${e}`,type:"success",color:"success"})))}catch(e){g((r=>({...r,isOpen:!0,message:`Could not copy text: ${e}`,type:"error",color:"error"})))}})(r)},children:[e.jsx(m,{children:r}),e.jsx(x,{size:a,color:s,children:e.jsx(i,{})})]},t)))})]}),e.jsx(n.Snackbar,{message:c.message,isOpen:c.isOpen,type:c.type,color:c.color,onClose:()=>g((e=>({...e,isOpen:!1})))})]})};

package/cjs/components/Link/index.js

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

package/cjs/components/ListItem/index.js

@@ -5,11 +5,11 @@
   &:last-child {
     padding-bottom: 0;
   }
-`,n=l.default.div`
+`,a=l.default.div`
   display: flex;
   align-items: center;
   margin: 0;
-`,a=l.default(d.TinyTitleBold)`
+`,n=l.default(d.TinyTitleBold)`
   margin: 0;
 `,o=l.default.div`
   display: flex;
@@ -21,4 +21,4 @@
   }
 `,x=l.default.div`
   padding-left: ${({hasIcon:e})=>e?"54px":0};
-`;exports.default=({title:i,text:d,icon:r,component:l="li",children:c,...p})=>e.jsxs(s,{as:l,...p,children:[e.jsxs(n,{children:[r&&e.jsx(o,{children:r}),e.jsx(a,{children:i})]}),e.jsx(x,{hasIcon:!!r,children:e.jsxs(t.BodyText,{children:[d,c]})})]});
+`;exports.default=({title:i,text:d,icon:r,component:l="li",children:c,...u})=>e.jsxs(s,{as:l,role:"li"!==l?"listitem":void 0,...u,children:[e.jsxs(a,{children:[r&&e.jsx(o,{"aria-hidden":"true",children:r}),e.jsx(n,{as:"h4",children:i})]}),(d||c)&&e.jsx(x,{hasIcon:!!r,children:e.jsxs(t.BodyText,{children:[d,c]})})]});

package/cjs/components/MenuItem/index.js

@@ -35,4 +35,4 @@
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   color: ${({theme:e})=>e.colors.text.dark};
   margin-top: ${({level:e})=>3===e?"0.25rem":0};
-`,y=({preamble:t,title:l,level:r,component:o="li",children:i,...n})=>{const y=!!t;return e.jsxs(a,{as:o,...n,hasPreamble:y,children:[l&&e.jsx(s,{children:l}),e.jsxs(m,{level:r,children:[e.jsx(h,{level:r,hasPreamble:y,children:i}),t&&e.jsx(f,{level:r,children:t})]})]})};exports.MenuItem=y,exports.default=y;
+`,y=({preamble:t,title:l,level:r,component:o="li",children:i,...n})=>{const y=!!t;return e.jsxs(a,{as:o,role:"li"!==o?"listitem":void 0,...n,hasPreamble:y,children:[l&&e.jsx(s,{as:"h3",children:l}),e.jsxs(m,{level:r,children:[e.jsx(h,{level:r,hasPreamble:y,children:i}),t&&e.jsx(f,{level:r,children:t})]})]})};exports.MenuItem=y,exports.default=y;

package/cjs/components/Message/index.js

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

package/cjs/components/Modal/FocudTrap.js

@@ -0,0 +1,3 @@
+"use strict";var e,t=require("react/jsx-runtime"),n=require("react"),r=require("styled-components");const s=((e=r)&&e.__esModule?e:{default:e}).default.div`
+  display: flex;
+`;exports.FocusTrap=({children:e})=>{const r=n.useRef(null);return n.useEffect((()=>{const e=r.current;if(!e)return;const t=Array.from(e.querySelectorAll(["a[href]","button:not([disabled])","textarea:not([disabled])","input:not([disabled])","select:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(","))),n=e=>{if("Tab"!==e.key)return;if(0===t.length)return void e.preventDefault();const n=t[0],r=t[t.length-1],s=t.findIndex((e=>document.activeElement===e));e.preventDefault(),e.shiftKey?-1===s||0===s?r.focus():t[s-1].focus():-1===s||s===t.length-1?n.focus():t[s+1].focus()};return e.addEventListener("keydown",n),()=>{e.removeEventListener("keydown",n)}}),[]),t.jsx(s,{ref:r,children:e})};

package/cjs/components/Modal/index.js

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

package/cjs/components/OffCanvas/index.js

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