@kvdbil/components 14.2.4 → 14.2.6

package/esm/components/CheckBox/index.js

@@ -1,4 +1,4 @@
-import t from"react";import i,{css as r}from"styled-components";import m from"../../icons/components/CheckmarkIcon.js";import{generateNameHash as x}from"../../shared/helpers.js";import s from"../../theme.js";import{BodyText as g}from"../../typography/BodyText/index.js";import{BackgroundStyles as u}from"../IconButton.js";import"../../shared/media-queries.js";const b=r`
+import r from"react";import s,{css as i}from"styled-components";import h from"../../icons/components/CheckmarkIcon.js";import{generateNameHash as x}from"../../shared/helpers.js";import t from"../../theme.js";import{BodyText as b}from"../../typography/BodyText/index.js";import{BackgroundStyles as g}from"../IconButton.js";import"../../shared/media-queries.js";const u=i`
   width: 24px;
   height: 24px;
 
@@ -6,7 +6,7 @@ import t from"react";import i,{css as r}from"styled-components";import m from"..
     width: 15px;
     height: 15px;
   }
-`,k=r`
+`,f=i`
   width: 32px;
   height: 32px;
 
@@ -14,10 +14,10 @@ import t from"react";import i,{css as r}from"styled-components";import m from"..
     width: 22px;
     height: 22px;
   }
-`,d={regular:b,large:k},y=r`
+`,d={regular:u,large:f},k=i`
   cursor: default;
-  border: 2px solid ${s.colors.gray.light2};
-`,f=e=>r`
+  border: 2px solid ${t.colors.gray.light2};
+`,y=e=>i`
   svg {
     opacity: 1;
   }
@@ -25,16 +25,16 @@ import t from"react";import i,{css as r}from"styled-components";import m from"..
   :hover {
   }
 
-  background: ${s.colors[e].main};
-  border: 2px solid ${s.colors[e].main};
-`,$=r`
-  background: ${s.colors.gray.light2};
+  background: ${t.colors[e].main};
+  border: 2px solid ${t.colors[e].main};
+`,$=i`
+  background: ${t.colors.gray.light2};
   z-index: 1;
-`,z=i.div`
+`,z=s.div`
   display: flex;
   align-items: flex-start;
   box-sizing: border-box;
-`,v=i.input.attrs({type:"checkbox"})`
+`,v=s.input.attrs({type:"checkbox"})`
   position: absolute;
   appearance: none;
   width: 100%;
@@ -48,9 +48,9 @@ import t from"react";import i,{css as r}from"styled-components";import m from"..
 
   :focus-visible {
     transition: background-color 400ms;
-    ${u}
+    ${g}
   }
-`,C=i.span`
+`,D=s.span`
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -59,7 +59,7 @@ import t from"react";import i,{css as r}from"styled-components";import m from"..
   justify-content: center;
   z-index: 0;
 
-  border: 2px solid ${s.colors.gray.dark5};
+  border: 2px solid ${t.colors.gray.dark5};
 
   ${e=>d[e.size]};
 
@@ -68,14 +68,14 @@ import t from"react";import i,{css as r}from"styled-components";import m from"..
     color: ${({theme:e})=>e.colors.common.white};
   }
 
-  ${e=>e.isChecked&&f(e.color)};
-  ${e=>e.isDisabled&&y};
+  ${e=>e.isChecked&&y(e.color)};
+  ${e=>e.isDisabled&&k};
 
   ${e=>e.isChecked&&e.isDisabled&&$};
-`,S=i(g)`
+`,j=s(b)`
   flex: 1;
   cursor: ${({isDisabled:e})=>e?"default":"pointer"};
   user-select: none;
   color: ${({theme:e,isDisabled:o})=>o?e.colors.text.disabled:e.colors.text.dark};
   margin-left: 0.5rem;
-`,h=({name:e=x("check-box"),isDisabled:o=!1,size:c="regular",checked:n=!1,color:a="secondary",label:l,...p})=>t.createElement(z,null,t.createElement(v,{...p,type:"checkbox",checked:n,"data-validate":"checked",name:e,id:e,color:a,disabled:o,isDisabled:o,boxSize:c}),t.createElement(C,{size:c,color:a,isChecked:n,isDisabled:o},t.createElement(m,null)),l&&t.createElement(S,{as:"label",htmlFor:e,isDisabled:o},l));export{h as CheckBox,h as default};
+`,p=({name:e=x("check-box"),isDisabled:o=!1,size:a="regular",checked:l=!1,color:c="secondary",label:n,...m})=>r.createElement(z,null,r.createElement(v,{...m,type:"checkbox",checked:l,"data-validate":"checked",name:e,id:e,color:c,disabled:o,isDisabled:o,boxSize:a}),r.createElement(D,{size:a,color:c,isChecked:l,isDisabled:o},r.createElement(h,null)),n&&r.createElement(j,{as:"label",htmlFor:e,isDisabled:o},n));export{p as CheckBox,p as default};

package/esm/components/Chip/index.js

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

package/esm/components/Chip/styles.js

@@ -1 +1 @@
-const i=(t="smaller")=>({smaller:"0.625rem",small:"0.75rem",regular:"1rem",large:"1rem"})[t],a=({isDisabled:t,variant:o,color:r,theme:l})=>t?l.colors.gray.light5:r==="neutralLight"?{solid:l.colors.background.gray,flat:l.colors.background.light,outline:"transparent"}[o]:{solid:l.colors[r].main,flat:l.colors.background.light,outline:"transparent"}[o],u=({isDisabled:t,variant:o,color:r,theme:l})=>t?l.colors.text.disabled:r==="neutralLight"?o==="outline"?l.colors.text.disabled:l.colors.text.dark:{solid:l.colors.text.light,flat:l.colors[r].main,outline:l.colors[r].main}[o],c=({color:t,isDisabled:o,variant:r,theme:l})=>o?l.colors.gray.light5:t==="neutralLight"?{solid:"transparent",flat:"transparent",outline:l.colors.text.disabled}[r]:{solid:l.colors[t].main,flat:"transparent",outline:l.colors[t].main}[r],g=({isDisabled:t,isClickable:o,isDeletable:r})=>t?"not-allowed":o||r?"pointer":"auto",e=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.gray.light4,flat:r.colors.background.light,outline:"transparent"}[t]:{solid:r.colors[o].dark,flat:r.colors.background.light,outline:"transparent"}[t],d=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.gray.light4,flat:"transparent",outline:r.colors.text.dark}[t]:{solid:r.colors[o].dark,flat:"transparent",outline:r.colors[o].dark}[t],f=({variant:t,color:o,theme:r})=>o==="neutralLight"?r.colors.text.dark:{solid:r.colors.text.light,flat:r.colors[o].dark,outline:r.colors[o].dark}[t],k=({variant:t,color:o,isClickable:r,isDisabled:l,theme:n})=>l?n.colors.gray.light5:o==="neutralLight"?{solid:n.colors.gray.light2,flat:n.colors.gray.light4,outline:n.colors.gray.light4}[t]:t==="solid"?r?n.colors[o].darker:n.colors[o].dark:n.colors.background.gray,C=({color:t,variant:o,isDisabled:r,theme:l})=>r?"transparent":t==="neutralLight"?l.colors.background.light:o==="solid"?l.colors[t].light:"transparent",L=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.background.light,flat:"transparent",outline:r.colors.background.light}[t]:{solid:r.colors[o].light,flat:"transparent",outline:r.colors[o].light}[t],p=({variant:t,color:o,theme:r})=>o==="neutralLight"?r.colors.text.dark:t==="solid"?r.colors.text.light:r.colors[o].light;export{C as getActiveBackgroundColor,L as getActiveBorderColor,p as getActiveColor,a as getBackgroundColor,c as getBorderColor,u as getColor,g as getCursorType,i as getFontSize,e as getHoverBackgroundColor,d as getHoverBorderColor,f as getHoverColor,k as getSufixHoverBackgroundColor};
+const e=(t="smaller")=>({smaller:"0.625rem",small:"0.75rem",regular:"1rem",large:"1rem"})[t],i=({isDisabled:t,variant:l,color:o,theme:r})=>t?r.colors.gray.light5:o==="neutralLight"?{solid:r.colors.background.gray,flat:r.colors.background.light,outline:"transparent"}[l]:{solid:r.colors[o].main,flat:r.colors.background.light,outline:"transparent"}[l],s=({isDisabled:t,variant:l,color:o,theme:r})=>t?r.colors.text.disabled:o==="neutralLight"?l==="outline"?r.colors.text.disabled:r.colors.text.dark:{solid:r.colors.text.light,flat:r.colors[o].main,outline:r.colors[o].main}[l],n=({color:t,isDisabled:l,variant:o,theme:r})=>l?r.colors.gray.light5:t==="neutralLight"?{solid:"transparent",flat:"transparent",outline:r.colors.text.disabled}[o]:{solid:r.colors[t].main,flat:"transparent",outline:r.colors[t].main}[o],c=({isDisabled:t,isClickable:l,isDeletable:o})=>t?"not-allowed":l||o?"pointer":"auto",g=({variant:t,color:l,theme:o})=>l==="neutralLight"?{solid:o.colors.gray.light4,flat:o.colors.background.light,outline:"transparent"}[t]:{solid:o.colors[l].dark,flat:o.colors.background.light,outline:"transparent"}[t],d=({variant:t,color:l,theme:o})=>l==="neutralLight"?{solid:o.colors.gray.light4,flat:"transparent",outline:o.colors.text.dark}[t]:{solid:o.colors[l].dark,flat:"transparent",outline:o.colors[l].dark}[t],h=({variant:t,color:l,theme:o})=>l==="neutralLight"?o.colors.text.dark:{solid:o.colors.text.light,flat:o.colors[l].dark,outline:o.colors[l].dark}[t],u=({variant:t,color:l,isClickable:o,isDisabled:r,theme:a})=>r?a.colors.gray.light5:l==="neutralLight"?{solid:a.colors.gray.light2,flat:a.colors.gray.light4,outline:a.colors.gray.light4}[t]:t==="solid"?o?a.colors[l].darker:a.colors[l].dark:a.colors.background.gray,k=({color:t,variant:l,isDisabled:o,theme:r})=>o?"transparent":t==="neutralLight"?r.colors.background.light:l==="solid"?r.colors[t].light:"transparent",m=({variant:t,color:l,theme:o})=>l==="neutralLight"?{solid:o.colors.background.light,flat:"transparent",outline:o.colors.background.light}[t]:{solid:o.colors[l].light,flat:"transparent",outline:o.colors[l].light}[t],b=({variant:t,color:l,theme:o})=>l==="neutralLight"?o.colors.text.dark:t==="solid"?o.colors.text.light:o.colors[l].light;export{k as getActiveBackgroundColor,m as getActiveBorderColor,b as getActiveColor,i as getBackgroundColor,n as getBorderColor,s as getColor,c as getCursorType,e as getFontSize,g as getHoverBackgroundColor,d as getHoverBorderColor,h as getHoverColor,u as getSufixHoverBackgroundColor};

package/esm/components/DayPicker/DayPickerNavBar.js

@@ -1,11 +1,11 @@
-import e from"react";import t from"styled-components";import c from"../Icons/Arrow.js";import r from"../../theme.js";import{BodyText as m}from"../../typography/BodyText/index.js";import{formatMonthTitle as p}from"./localeUtils.js";import"../../shared/media-queries.js";const d=t.div`
+import e from"react";import t from"styled-components";import s from"../Icons/Arrow.js";import o from"../../theme.js";import{BodyText as c}from"../../typography/BodyText/index.js";import{formatMonthTitle as p}from"./localeUtils.js";import"../../shared/media-queries.js";const d=t.div`
   display: flex;
   justify-content: space-between;
   padding: 0 2em;
-`,f=t(m)`
+`,f=t(c)`
   font-size: 1.5em;
-  color: ${r.colors.text.dark};
-`,o=t.button`
+  color: ${o.colors.text.dark};
+`,r=t.button`
   appearance: none;
   background-color: transparent;
   border: 0;
@@ -14,12 +14,12 @@ import e from"react";import t from"styled-components";import c from"../Icons/Arr
   outline: none;
   display: flex;
   align-items: center;
-`,n=t(c)`
+`,n=t(s)`
   width: 16px;
   height: 16px;
-  fill: ${r.colors.gray.dark3};
+  fill: ${o.colors.gray.dark3};
 `,h=t(n)`
   transform: rotate(90deg);
-`,y=t(n)`
+`,x=t(n)`
   transform: rotate(-90deg);
-`,u=({month:a,onPreviousClick:i,onNextClick:l,locale:s})=>e.createElement(d,null,e.createElement(o,{onClick:()=>i()},e.createElement(h,{title:"prev-month"})),e.createElement(f,{as:"h3"},p(a,s)),e.createElement(o,{onClick:()=>l()},e.createElement(y,{title:"next-month"})));export{u as default};
+`,y=({month:a,onPreviousClick:l,onNextClick:i,locale:m})=>e.createElement(d,null,e.createElement(r,{onClick:()=>l()},e.createElement(h,{title:"prev-month"})),e.createElement(f,{as:"h3"},p(a,m)),e.createElement(r,{onClick:()=>i()},e.createElement(x,{title:"next-month"})));export{y as default};

package/esm/components/DayPicker/index.js

@@ -1,5 +1,5 @@
-import t from"react";import s from"react-day-picker";import n from"styled-components";import r from"../../theme.js";import y from"./DayPickerNavBar.js";import{MONTHS as c,WEEKDAYS_LONG as p,WEEKDAYS_SHORT as d,FIRST_DAY_OF_THE_WEEK as l}from"./localeUtils.js";import f from"./style.js";import"../Icons/Arrow.js";import"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const E=n.div`
+import o from"react";import i from"react-day-picker";import s from"styled-components";import t from"../../theme.js";import c from"./DayPickerNavBar.js";import{MONTHS as n,WEEKDAYS_LONG as p,WEEKDAYS_SHORT as y,FIRST_DAY_OF_THE_WEEK as d}from"./localeUtils.js";import f from"./style.js";import"../Icons/Arrow.js";import"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const E=s.div`
   ${f}
 
   font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
-`,k=e=>({selected:{color:r.colors.text.light,background:r.colors[e].main},today:{color:r.colors[e].main}}),a=({locale:e="sv",color:o="primary",...m})=>t.createElement(E,{color:o},t.createElement(s,{...m,locale:e,months:c[e],weekdaysLong:p[e],weekdaysShort:d[e],firstDayOfWeek:l[e],navbarElement:i=>t.createElement(y,{...i,locale:e}),captionElement:t.createElement("div",null),modifiersStyles:k(o)}));export{a as DayPicker,a as default};
+`,h=e=>({selected:{color:t.colors.text.light,background:t.colors[e].main},today:{color:t.colors[e].main}}),a=({locale:e="sv",color:r="primary",...m})=>o.createElement(E,{color:r},o.createElement(i,{...m,locale:e,months:n[e],weekdaysLong:p[e],weekdaysShort:y[e],firstDayOfWeek:d[e],navbarElement:l=>o.createElement(c,{...l,locale:e}),captionElement:o.createElement("div",null),modifiersStyles:h(r)}));export{a as DayPicker,a as default};

package/esm/components/DayPicker/localeUtils.js

@@ -1 +1 @@
-const r={sv:["Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober","November","December"],en:["January","February","March","April","May","June","July","August","September","October","November","December"]},n={sv:["S\xF6ndag","M\xE5ndag","Tisdag","Onsdag","Torsdag","Fredag","L\xF6rdag"],en:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},t={sv:["S\xF6","M\xE5","Ti","On","To","Fr","L\xF6"],en:["Su","Mo","Tu","We","Th","Fr","Sa"]},u={sv:1,en:1},s=(e,a="sv")=>`${r[a][e.getMonth()]} ${e.getFullYear()}`;export{u as FIRST_DAY_OF_THE_WEEK,r as MONTHS,n as WEEKDAYS_LONG,t as WEEKDAYS_SHORT,s as formatMonthTitle};
+const r={sv:["Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober","November","December"],en:["January","February","March","April","May","June","July","August","September","October","November","December"]},u={sv:["S\xF6ndag","M\xE5ndag","Tisdag","Onsdag","Torsdag","Fredag","L\xF6rdag"],en:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},n={sv:["S\xF6","M\xE5","Ti","On","To","Fr","L\xF6"],en:["Su","Mo","Tu","We","Th","Fr","Sa"]},d={sv:1,en:1},s=(e,a="sv")=>`${r[a][e.getMonth()]} ${e.getFullYear()}`;export{d as FIRST_DAY_OF_THE_WEEK,r as MONTHS,u as WEEKDAYS_LONG,n as WEEKDAYS_SHORT,s as formatMonthTitle};

package/esm/components/Dialog/index.js

@@ -1,9 +1,9 @@
-import e from"react";import r from"styled-components";import{Modal as p}from"../Modal/index.js";import c from"../../theme.js";import{TinyTitleBold as f}from"../../typography/Heading/index.js";import"react-dom";import"react-transition-group";import"../Icons/Close.js";import"../../shared/media-queries.js";const g=r(f)`
+import e from"react";import i from"styled-components";import{Modal as d}from"../Modal/index.js";import c from"../../theme.js";import{TinyTitleBold as f}from"../../typography/Heading/index.js";import"react-dom";import"react-transition-group";import"../Icons/Close.js";import"../../shared/media-queries.js";const g=i(f)`
   font-weight: ${c.typography.fontAlternativeRegularWeight};
   margin: 0;
-`,u=r.div`
+`,h=i.div`
   display: flex;
   justify-content: flex-end;
   gap: 1rem;
   overflow-x: hidden;
-`,n=({isOpen:i,title:t,children:l,actions:o,onClose:m,withPortal:a,withCloseIcon:s=!0,...d})=>e.createElement(p,{onClose:m,withPortal:a,isOpen:i,withCloseIcon:s,...d},typeof t=="string"?e.createElement(g,null,t):t,e.createElement("div",null,l),o&&e.createElement(u,null,o));export{n as Dialog,n as default};
+`,r=({isOpen:n,title:t,children:l,actions:o,onClose:a,withPortal:s,withCloseIcon:m=!0,...p})=>e.createElement(d,{onClose:a,withPortal:s,isOpen:n,withCloseIcon:m,...p},typeof t=="string"?e.createElement(g,null,t):t,e.createElement("div",null,l),o&&e.createElement(h,null,o));export{r as Dialog,r as default};

package/esm/components/EditRow/index.js

@@ -1,34 +1,34 @@
-import t,{useState as u,useEffect as N}from"react";import l from"styled-components";import E from"../../theme.js";import{BodyLink as O,BodyText as z}from"../../typography/BodyText/index.js";import{Button as f}from"../Button/index.js";import{Chip as A}from"../Chip/index.js";import{TextField as G}from"../Textfield/index.js";import"../../shared/media-queries.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"../../icons/components/CloseIcon.js";import"../Chip/styles.js";import"../FieldLabel.js";import"../../shared/helpers.js";const H=l.div`
+import t,{useState as p,useEffect as I}from"react";import l from"styled-components";import E from"../../theme.js";import{BodyLink as J,BodyText as K}from"../../typography/BodyText/index.js";import{Button as u}from"../Button/index.js";import{Chip as N}from"../Chip/index.js";import{TextField as O}from"../Textfield/index.js";import"../../shared/media-queries.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"../../icons/components/CloseIcon.js";import"../Chip/styles.js";import"../FieldLabel.js";import"../../shared/helpers.js";const Q=l.div`
   display: flex;
   border-bottom: 1px solid ${E.colors.gray.light5};
-`,J=l.form`
+`,U=l.form`
   flex: 1;
   flex-direction: column;
   margin-bottom: 1rem;
-`,K=l(G)`
+`,V=l(O)`
   max-width: 20rem;
-`,M=l.div`
+`,W=l.div`
   flex: 1;
   display: flex;
   align-items: flex-end;
   justify-content: flex-end;
   margin-top: 1rem;
-`,P=l(f)`
+`,X=l(u)`
   min-width: 5rem;
-`,Q=l(f)`
+`,Y=l(u)`
   min-width: 5rem;
   margin-right: 1rem;
-`,v=l(O)`
+`,j=l(J)`
   flex: 1;
   margin-right: 1rem;
-`,j=l(z)`
+`,b=l(K)`
   flex: 1rem;
   flex: 4;
-`,U=l(j)`
+`,Z=l(b)`
   color: ${E.colors.text.disabled};
-`,W=l.div`
+`,z=l.div`
   display: flex;
   flex-wrap: wrap;
-`,X=l(A)`
+`,A=l(N)`
   margin: 0.5rem;
-`,Y=({value:p,label:a,onChange:h,onEdit:m,options:C=[],inputProps:B={},isClearable:b=!1,isEditionDisabled:w=!1,editText:S,saveText:T,cancelText:V,noValueText:k,formatterFunc:c,isSingleSelect:F,color:d="secondary"})=>{const[n,r]=u(p),[D,L]=u(p),[o,x]=u(!1),s=typeof n=="string",I=c&&s?c==null?void 0:c(n):n,R=s?I:n.join(", "),g=n.length>0;N(()=>m==null?void 0:m(o),[m,o]);const y=()=>{o?r(D):L(n),x(e=>!e)},_=e=>{e.preventDefault(),h==null||h(n),x(!1)},$=e=>{if(typeof n!="object")throw new Error("Cannot toggle chip on other than array");if(F){if(n.includes(e)&&b){r([]);return}r([e]);return}if(n.includes(e)){const i=n.filter(q=>q!==e);r(i);return}r(i=>[...i,e])};return t.createElement(H,null,!o&&t.createElement(t.Fragment,null,t.createElement(v,null,a),g&&t.createElement(j,null,R),!g&&t.createElement(U,null,k),t.createElement(f,{variant:"flat",color:d,onClick:y,isDisabled:w},S)),o&&t.createElement(J,{onSubmit:_},t.createElement(v,null,a),s&&t.createElement(K,{...B,autoFocus:!0,value:n,label:a,onChange:e=>r(e.target.value)}),!s&&t.createElement(W,null,C.map(e=>t.createElement(X,{color:d,onClick:i=>{i.preventDefault(),$(e)},key:e,variant:n.includes(e)?"solid":"outline"},e))),t.createElement(M,null,t.createElement(Q,{type:"button",variant:"flat",color:"neutral",onClick:y},V),t.createElement(P,{type:"submit",color:d},T))))};export{Y as default};
+`,M=({value:f,label:m,onChange:x,onEdit:s,options:v=[],inputProps:C={},isClearable:T=!1,isEditionDisabled:w=!1,editText:B,saveText:k,cancelText:D,noValueText:F,formatterFunc:c,isSingleSelect:S,color:d="secondary"})=>{const[r,n]=p(f),[_,L]=p(f),[o,h]=p(!1),a=typeof r=="string",P=c&&a?c==null?void 0:c(r):r,$=a?P:r.join(", "),y=r.length>0;I(()=>s==null?void 0:s(o),[s,o]);const g=()=>{o?n(_):L(r),h(e=>!e)},q=e=>{e.preventDefault(),x==null||x(r),h(!1)},G=e=>{if(typeof r!="object")throw new Error("Cannot toggle chip on other than array");if(S){if(r.includes(e)&&T){n([]);return}n([e]);return}if(r.includes(e)){const i=r.filter(H=>H!==e);n(i);return}n(i=>[...i,e])};return t.createElement(Q,null,!o&&t.createElement(t.Fragment,null,t.createElement(j,null,m),y&&t.createElement(b,null,$),!y&&t.createElement(Z,null,F),t.createElement(u,{variant:"flat",color:d,onClick:g,isDisabled:w},B)),o&&t.createElement(U,{onSubmit:q},t.createElement(j,null,m),a&&t.createElement(V,{...C,autoFocus:!0,value:r,label:m,onChange:e=>n(e.target.value)}),!a&&t.createElement(z,null,v.map(e=>t.createElement(A,{color:d,onClick:i=>{i.preventDefault(),G(e)},key:e,variant:r.includes(e)?"solid":"outline"},e))),t.createElement(W,null,t.createElement(Y,{type:"button",variant:"flat",color:"neutral",onClick:g},D),t.createElement(X,{type:"submit",color:d},k))))};export{M as default};

package/esm/components/ErrorMessage/index.js

@@ -1,10 +1,10 @@
-import a from"react";import n from"styled-components";const i=n.div`
-  font-family: ${({theme:t})=>t.typography.fontAlternativeFamily};
-  font-weight: ${({theme:t})=>t.typography.fontAlternativeRegularWeight};
-  background: ${({theme:t})=>t.colors.error.main};
+import n from"react";import a from"styled-components";const i=a.div`
+  font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
+  font-weight: ${({theme:e})=>e.typography.fontAlternativeRegularWeight};
+  background: ${({theme:e})=>e.colors.error.main};
   color: white;
   border-radius: 0.25rem;
   font-size: 13px;
   padding: 10px;
-  ${({centered:t})=>t&&"text-align: center;"}
-`,e=({children:t,centered:r,...o})=>a.createElement(i,{centered:r,...o},t);export{e as ErrorMessage,e as default};
+  ${({centered:e})=>e&&"text-align: center;"}
+`,t=({children:e,centered:r,...o})=>n.createElement(i,{centered:r,...o},e);export{t as ErrorMessage,t as default};

package/esm/components/FieldLabel.js

@@ -1,39 +1,39 @@
-import a,{css as e}from"styled-components";import{BodyTextStyle as c}from"../typography/BodyText/index.js";import"react";import"../shared/media-queries.js";const l="0.5rem",n=(o,t)=>e`
+import i,{css as t}from"styled-components";import{BodyTextStyle as l}from"../typography/BodyText/index.js";import"react";import"../shared/media-queries.js";const a="0.5rem",c=(e,o)=>t`
   background-color: ${({theme:r})=>r.colors.background.light};
-  transform: translateY(${o});
+  transform: translateY(${e});
   line-height: 0.875rem;
   font-size: 0.75rem;
   transform-origin: 0 0;
-  padding: 0 ${l};
-  left: ${l};
-  color: ${({theme:r})=>t?r.colors.error.dark:r.colors.text.dark};
-`,i=e`
-  color: ${({theme:o,hasError:t})=>t?o.colors.error.dark:o.colors.text.dark};
-`,d=e`
-  color: ${({theme:o})=>o.colors.gray.light1};
-  background-color: ${({theme:o})=>o.colors.background.light};
-`,m=e`
+  padding: 0 ${a};
+  left: ${a};
+  color: ${({theme:r})=>o?r.colors.error.dark:r.colors.text.dark};
+`,n=t`
+  color: ${({theme:e,hasError:o})=>o?e.colors.error.dark:e.colors.text.dark};
+`,d=t`
+  color: ${({theme:e})=>e.colors.gray.light1};
+  background-color: ${({theme:e})=>e.colors.background.light};
+`,m=t`
   width: max-content;
   left: 0;
   right: 0;
   margin-right: auto;
   margin-left: auto;
-`,g=a.label`
-  ${c}
+`,h=i.label`
+  ${l}
   pointer-events: none;
   position: absolute;
   max-width: calc(100% - 2rem);
   z-index: 1;
-  top: ${({height:o})=>o?`${o}rem`:"0.75rem"};
+  top: ${({height:e})=>e?`${e}rem`:"0.75rem"};
   left: calc(0.75rem + 2px);
   transition: 150ms;
-  color: ${({theme:o})=>o.colors.gray.dark5};
+  color: ${({theme:e})=>e.colors.gray.dark5};
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  ${({hasValue:o,isFocused:t,height:r=.7,hasError:s})=>(o||t)&&n(`-${r+.4}rem`,s)}
-  ${({centered:o,hasValue:t,isFocused:r})=>(t||r)&&o&&m}
-  ${({isFocused:o})=>o&&i}
-  ${({disabled:o})=>o&&d}
-`;export{g as Label};
+  ${({hasValue:e,isFocused:o,height:r=.7,hasError:s})=>(e||o)&&c(`-${r+.4}rem`,s)}
+  ${({centered:e,hasValue:o,isFocused:r})=>(o||r)&&e&&m}
+  ${({isFocused:e})=>e&&n}
+  ${({disabled:e})=>e&&d}
+`;export{h as Label};

package/esm/components/Flex/index.js

@@ -1,19 +1,19 @@
-import p from"react";import b,{css as r}from"styled-components";import{mq as j}from"../../shared/media-queries.js";const y="row",k="1rem",g="center",$=(e,t)=>(t==="gap"||t==="row-gap")&&typeof e=="number"?`${e}rem`:e,q=({$direction:e,$justify:t,$align:a,$gap:i,$rowGap:s,$wrap:o,$basis:f,$grow:u,$shrink:m})=>r`
+import h from"react";import b,{css as a}from"styled-components";import{mq as x}from"../../shared/media-queries.js";const j="row",k="1rem",c="center",g=(r,e)=>(e==="gap"||e==="row-gap")&&typeof r=="number"?`${r}rem`:r,v=({$direction:r,$justify:e,$align:s,$gap:t,$rowGap:o,$wrap:l,$basis:$,$grow:p,$shrink:f})=>a`
   display: flex;
 
-  ${e&&["column","column-reverse"].includes(String(e))&&r`
+  ${r&&["column","column-reverse"].includes(String(r))&&a`
       & > * {
         width: 100%;
       }
     `}
 
-  ${[[e,"flex-direction"],[t,"justify-content"],[a,"align-items"],[i,"gap"],[s,"row-gap"],[s,"row-gap"],[o,"flex-wrap"],[f,"flex-basis"],[u,"flex-grow"],[m,"flex-shrink"]].map(([n,l])=>{if(typeof n=="string"||typeof n=="number")return r`
-        ${l}: ${$(n,l)};
-      `;if(typeof n=="object"){const c=[],{initial:d,...w}=n;return d&&c.push(r`
-          ${l}: ${$(d,l)};
-        `),Object.entries(w).forEach(([x,h])=>{c.push(r`
-          ${j(x)} {
-            ${l}: ${$(h,l)};
+  ${[[r,"flex-direction"],[e,"justify-content"],[s,"align-items"],[t,"gap"],[o,"row-gap"],[o,"row-gap"],[l,"flex-wrap"],[$,"flex-basis"],[p,"flex-grow"],[f,"flex-shrink"]].map(([i,n])=>{if(typeof i=="string"||typeof i=="number")return a`
+        ${n}: ${g(i,n)};
+      `;if(typeof i=="object"){const u=[],{initial:m,...w}=i;return m&&u.push(a`
+          ${n}: ${g(m,n)};
+        `),Object.entries(w).forEach(([d,y])=>{u.push(a`
+          ${x(d)} {
+            ${n}: ${g(y,n)};
           }
-        `)}),c}else return""})}
-`,E=b.div(q),F=({direction:e,justify:t,align:a,gap:i,rowGap:s,wrap:o,basis:f,grow:u,shrink:m,...n})=>p.createElement(E,{$direction:e!=null?e:y,$justify:t!=null?t:g,$align:a!=null?a:g,$gap:i!=null?i:k,$rowGap:s,$wrap:o,$basis:f,$grow:u,$shrink:m,...n});export{F as default};
+        `)}),u}else return""})}
+`,G=b.div(v),q=({direction:r,justify:e,align:s,gap:t,rowGap:o,wrap:l,basis:$,grow:p,shrink:f,...i})=>h.createElement(G,{$direction:r??j,$justify:e??c,$align:s??c,$gap:t??k,$rowGap:o,$wrap:l,$basis:$,$grow:p,$shrink:f,...i});export{q as default};

package/esm/components/Hero/index.js

@@ -1,9 +1,9 @@
-import r from"react";import n,{keyframes as I}from"styled-components";import{Display3 as W,Title as q}from"../../typography/Heading/index.js";import{mq as f}from"../../shared/media-queries.js";const L=n.div`
+import i from"react";import o,{keyframes as q}from"styled-components";import{Display3 as C,Title as I}from"../../typography/Heading/index.js";import{mq as $}from"../../shared/media-queries.js";const P=o.div`
   position: relative;
   min-height: 440px;
   display: flex;
   flex-direction: column;
-`,$=I`
+`,g=q`
   0% {
     background-color:#f5f5f5;
   }
@@ -14,11 +14,11 @@ import r from"react";import n,{keyframes as I}from"styled-components";import{Dis
 
   100% {
     background-color:#f5f5f5;
-  }`,R=n.div`
+  }`,A=o.div`
   width: 100%;
   height: 440px;
-  animation: ${$} 2s linear infinite;
-`,_=n.div`
+  animation: ${g} 2s linear infinite;
+`,D=o.div`
   pointer-events: ${({$pointerEvents:e})=>e};
   display: flex;
   flex-direction: ${({$direction:e})=>e};
@@ -27,13 +27,13 @@ import r from"react";import n,{keyframes as I}from"styled-components";import{Dis
   padding: 3rem 1.5rem;
   z-index: 1;
   flex: 1;
-`,A=n.iframe`
+`,F=o.iframe`
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-`,l=e=>typeof e=="number",p=e=>typeof e=="string",D=({$positionX:e,$positionY:t})=>{if(l(e)&&l(t))return`${e}% ${t}%`;if(p(e)&&p(t))return`${e} ${t}`;if(e||t){const a=l(e)?`${e}%`:e,o=l(t)?`${t}%`:t;return`${a||"50%"} ${o||"50%"}`}return"50% 50%"},F=n.div`
+`,a=e=>typeof e=="number",f=e=>typeof e=="string",H=({$positionX:e,$positionY:t})=>{if(a(e)&&a(t))return`${e}% ${t}%`;if(f(e)&&f(t))return`${e} ${t}`;if(e||t){const n=a(e)?`${e}%`:e,r=a(t)?`${t}%`:t;return`${n||"50%"} ${r||"50%"}`}return"50% 50%"},T=o.div`
   width: 100%;
   min-height: 440px;
   display: flex;
@@ -44,18 +44,18 @@ import r from"react";import n,{keyframes as I}from"styled-components";import{Dis
     background: url('${e}');
     background-repeat: no-repeat;
     background-size: cover;
-    background-position: ${D(t)};
+    background-position: ${H(t)};
   `}
-`,N=n.div`
+`,X=o.div`
   padding-left: 1rem;
   padding-right: 1rem;
   z-index: 2;
 
-  ${f("tablet")} {
+  ${$("tablet")} {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
-`,O=n.div`
+`,Y=o.div`
   ${({$centered:e})=>e&&`
     display: flex;
     flex-direction: column;
@@ -71,29 +71,29 @@ import r from"react";import n,{keyframes as I}from"styled-components";import{Dis
   `}
 
   ${({$dynamicGutter:e})=>e&&`
-    ${f("tablet")} {
+    ${$("tablet")} {
       margin-left: ${e.tabletVw}vw;
       margin-right: ${e.tabletVw}vw;
     }
 
-    ${f("laptop")} {
+    ${$("laptop")} {
       margin-left: ${e.laptopVw}vw;
       margin-right: ${e.laptopVw}vw;
     }
   `}
-`,S=n(W)`
+`,_=o(C)`
   margin: 0;
   color: ${({$color:e,theme:t})=>t.colors.text[e]};
 
   ${({$shadow:e})=>e&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
-`,T=n(q)`
+`,B=o(I)`
   margin: 0.25rem 0;
   color: ${({$color:e,theme:t})=>t.colors.text[e]};
 
   ${({$shadow:e})=>e&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
-`,J=n.div`
+`,J=o.div`
   display: inline-block;
   margin-top: 3rem;
 
   ${({$shadow:e,theme:t})=>e&&`box-shadow: ${t.elevations.elevation8};`}
-`,K=({imageProps:e,imageElement:t,videoProps:a,children:o,align:g,direction:x,justify:h,contentMaxWidth:v=64,heading:i,headingColor:m="dark",subheading:d,button:c,dynamicGutter:b,isLoading:w=!1,contentCentered:y=!1,containerStyle:k,elementShadow:s=!1})=>{const{autoplay:E=0,controls:j=0,disablekb:C=0,end:u,loop:V=0,modestbranding:B=1,start:z=0,showInfo:H=0}=(a==null?void 0:a.ytConfig)||{};return w?r.createElement(R,{"data-testid":"loader"}):r.createElement(L,{style:k},a?r.createElement(A,{"data-testid":"hero-video",title:"video-frame",src:`${a.src}?disabledkb=${C}&autoplay=${E}&controls=${j}&loop=${V}&modestbranding=${B}&start=${z}&showInfo=${H}${u?`&end=${u}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):r.createElement(F,{"data-testid":"hero-image",$positionX:t||e==null?void 0:e.x,$positionY:t||e==null?void 0:e.y,$url:t||e==null?void 0:e.src},t,r.createElement(N,null,(i||d||c)&&r.createElement(O,{$maxWidth:v,$dynamicGutter:b,$centered:y},i&&r.createElement(S,{as:"h1",$color:m,$shadow:s},i),d&&r.createElement(T,{$color:m,$shadow:s},d),c&&r.createElement(J,{$shadow:s},c)),o&&r.createElement(_,{$pointerEvents:a?"none":"auto",$align:g||"flex-start",$direction:x||"column",$justify:h||"flex-start"},o))))};export{$ as colorAnimation,K as default};
+`,L=({imageProps:e,imageElement:t,videoProps:n,children:r,align:h,direction:u,justify:x,contentMaxWidth:y=64,heading:l,headingColor:m="dark",subheading:d,button:s,dynamicGutter:w,isLoading:b=!1,contentCentered:v=!1,containerStyle:E,elementShadow:c=!1})=>{const{autoplay:k=0,controls:j=0,disablekb:G=0,end:p,loop:z=0,modestbranding:S=1,start:V=0,showInfo:W=0}=(n==null?void 0:n.ytConfig)||{};return b?i.createElement(A,{"data-testid":"loader"}):i.createElement(P,{style:E},n?i.createElement(F,{"data-testid":"hero-video",title:"video-frame",src:`${n.src}?disabledkb=${G}&autoplay=${k}&controls=${j}&loop=${z}&modestbranding=${S}&start=${V}&showInfo=${W}${p?`&end=${p}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):i.createElement(T,{"data-testid":"hero-image",$positionX:t||e==null?void 0:e.x,$positionY:t||e==null?void 0:e.y,$url:t||e==null?void 0:e.src},t,i.createElement(X,null,(l||d||s)&&i.createElement(Y,{$maxWidth:y,$dynamicGutter:w,$centered:v},l&&i.createElement(_,{as:"h1",$color:m,$shadow:c},l),d&&i.createElement(B,{$color:m,$shadow:c},d),s&&i.createElement(J,{$shadow:c},s)),r&&i.createElement(D,{$pointerEvents:n?"none":"auto",$align:h||"flex-start",$direction:u||"column",$justify:x||"flex-start"},r))))};export{g as colorAnimation,L as default};

package/esm/components/Icon/index.js

@@ -1,14 +1,14 @@
-import e,{useState as y}from"react";import o from"styled-components";import{Caption as f}from"../../typography/BodyText/index.js";import{Title as g}from"../../typography/Heading/index.js";import c from"../../theme.js";import{Snackbar as x}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";const k=o.div`
+import e,{useState as g}from"react";import t from"styled-components";import{Caption as y}from"../../typography/BodyText/index.js";import{Title as f}from"../../typography/Heading/index.js";import c 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";const x=t.div`
   margin: 0 auto;
   max-width: 700px;
-`,h=o(g)`
+`,b=t(f)`
   margin: 0.5rem;
-`,w=o.ul`
+`,w=t.ul`
   display: flex;
   list-style: none;
   flex-wrap: wrap;
   padding: 0;
-`,b=o.li`
+`,h=t.li`
   background: ${({background:r})=>r};
   display: flex;
   justify-content: center;
@@ -20,13 +20,13 @@ import e,{useState as y}from"react";import o from"styled-components";import{Capt
   border-radius: 3px;
   margin: 0.5rem;
   cursor: pointer;
-`,C=o(f)`
+`,C=t(y)`
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
   text-align: center;
-`,j=o.span`
+`,j=t.span`
   font-size: ${({size:r})=>r};
   color: ${({color:r})=>r};
-`,E=({background:r=c.colors.background.light,color:l=c.colors.text.dark,icons:p,size:m="2rem"})=>{const[a,s]=y({isOpen:!1,message:"",type:"info",color:"neutral"}),d=async t=>{const i=`import { ${t} } from 'kvdbil-components';`;if(!!navigator.clipboard)try{await navigator.clipboard.writeText(i),s(n=>({...n,isOpen:!0,message:`copied import for ${t}`,type:"success",color:"success"}))}catch(n){s(u=>({...u,isOpen:!0,message:`Could not copy text: ${n}`,type:"error",color:"error"}))}};return e.createElement(e.Fragment,null,e.createElement(k,null,e.createElement(h,{as:"h2"},"Click to copy import declaration for icon"),e.createElement(w,null,p.map(([t,i],n)=>e.createElement(b,{key:n,background:r,onClick:()=>{d(t)}},e.createElement(C,null,t),e.createElement(j,{size:m,color:l},e.createElement(i,null)))))),e.createElement(x,{message:a.message,isOpen:a.isOpen,type:a.type,color:a.color,onClose:()=>s(t=>({...t,isOpen:!1}))}))};export{E as default};
+`,E=({background:r=c.colors.background.light,color:l=c.colors.text.dark,icons:p,size:m="2rem"})=>{const[a,i]=g({isOpen:!1,message:"",type:"info",color:"neutral"}),d=async o=>{const s=`import { ${o} } from 'kvdbil-components';`;if(navigator.clipboard)try{await navigator.clipboard.writeText(s),i(n=>({...n,isOpen:!0,message:`copied import for ${o}`,type:"success",color:"success"}))}catch(n){i(u=>({...u,isOpen:!0,message:`Could not copy text: ${n}`,type:"error",color:"error"}))}};return e.createElement(e.Fragment,null,e.createElement(x,null,e.createElement(b,{as:"h2"},"Click to copy import declaration for icon"),e.createElement(w,null,p.map(([o,s],n)=>e.createElement(h,{key:n,background:r,onClick:()=>{d(o)}},e.createElement(C,null,o),e.createElement(j,{size:m,color:l},e.createElement(s,null)))))),e.createElement(k,{message:a.message,isOpen:a.isOpen,type:a.type,color:a.color,onClose:()=>i(o=>({...o,isOpen:!1}))}))};export{E as default};