@kvdbil/components 15.0.3 → 15.0.5

package/README.md

@@ -47,4 +47,6 @@ When adding new icons:
 
 ## Outdated dependencies
 
-- typescript - @typescript-eslint/typescript-estree does not support any Typescript version above 5.5.4
+- typescript - @typescript-eslint/typescript-estree does not support any Typescript version above 5.5.4
+- @types/react, @types/react-dom, react, react-dom, react-is - Waiting for React 19
+- react-day-picker - quite a big task (KVDBIL-3865)

package/cjs/components/Breadcrumbs/BreadcrumbsItem.js

@@ -1,20 +1,21 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../typography/BodyText/index.js");require("../../shared/media-queries.js");var i,o=(i=t)&&i.__esModule?i:{default:i};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,o=(r=t)&&r.__esModule?r:{default:r};const i=o.default.li`
   display: flex;
   align-items: center;
   margin: 0;
   text-indent: 0;
   list-style-type: none;
-  overflow: hidden;
+  ${({$onlyLastTruncated:e})=>!e&&"\n    overflow: hidden;\n  "}
 
   a {
-    ${r.BodyTextStyle}
+    ${n.BodyTextStyle}
     font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
     color: ${({theme:e})=>e.colors.info.main};
     text-decoration: none;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    ${({$onlyLastTruncated:e})=>!e&&"\n      overflow: hidden;\n      text-overflow: ellipsis;\n    "}
   }
-`,n=o.default(r.BodyText)`
+
+  ${({$onlyLastTruncated:e})=>e&&"\n    &:last-child {\n      overflow: hidden;\n    }\n  "}
+`,l=o.default(n.BodyText)`
   color: ${({theme:e})=>e.colors.text.dark};
   overflow: hidden;
   text-overflow: ellipsis;
@@ -33,4 +34,4 @@
     width: 1rem;
     height: 1rem;
   }
-`;exports.default=({link:t,separator:r,isLast:i})=>e.jsx(e.Fragment,{children:e.jsxs(l,{children:[t.prefixIcon&&e.jsx(s,{children:t.prefixIcon}),i?e.jsx(n,{as:"span",children:t.component}):e.jsxs(e.Fragment,{children:[t.component,e.jsx(d,{children:r})]})]})});
+`;exports.default=({link:t,separator:n,isLast:r,onlyLastTruncated:o})=>e.jsx(e.Fragment,{children:e.jsxs(i,{$onlyLastTruncated:o,children:[t.prefixIcon&&e.jsx(s,{children:t.prefixIcon}),r?e.jsx(l,{as:"span",children:t.component}):e.jsxs(e.Fragment,{children:[t.component,e.jsx(d,{children:n})]})]})});

package/cjs/components/Breadcrumbs/index.js

@@ -4,4 +4,4 @@
   padding: 0;
   white-space: nowrap;
   overflow: hidden;
-`;exports.default=({links:e,separator:s=r.jsx(a.default,{})})=>r.jsx(i,{children:e.map(((a,i)=>r.jsx(t.default,{link:a,separator:s,isLast:i===e.length-1},i)))});
+`;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)))});

package/esm/components/Breadcrumbs/BreadcrumbsItem.js

@@ -1,31 +1,41 @@
-import{jsx as o,Fragment as t,jsxs as r}from"react/jsx-runtime";import i from"styled-components";import{BodyTextStyle as d,BodyText as s}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const a=i.li`
+import{jsx as t,Fragment as n,jsxs as i}from"react/jsx-runtime";import o from"styled-components";import{BodyTextStyle as a,BodyText as s}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const h=o.li`
   display: flex;
   align-items: center;
   margin: 0;
   text-indent: 0;
   list-style-type: none;
-  overflow: hidden;
+  ${({$onlyLastTruncated:e})=>!e&&`
+    overflow: hidden;
+  `}
 
   a {
-    ${d}
+    ${a}
     font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
     color: ${({theme:e})=>e.colors.info.main};
     text-decoration: none;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    ${({$onlyLastTruncated:e})=>!e&&`
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `}
   }
-`,h=i(s)`
+
+  ${({$onlyLastTruncated:e})=>e&&`
+    &:last-child {
+      overflow: hidden;
+    }
+  `}
+`,c=o(s)`
   color: ${({theme:e})=>e.colors.text.dark};
   overflow: hidden;
   text-overflow: ellipsis;
-`,m=i.span`
+`,m=o.span`
   display: inline-flex;
   padding-right: 0.5rem;
   svg {
     width: 1rem;
     height: 1rem;
   }
-`,p=i.span`
+`,p=o.span`
   display: inline-flex;
   padding: 0 0.5rem;
   color: ${({theme:e})=>e.colors.gray.light1};
@@ -33,4 +43,4 @@ import{jsx as o,Fragment as t,jsxs as r}from"react/jsx-runtime";import i from"st
     width: 1rem;
     height: 1rem;
   }
-`,c=({link:e,separator:n,isLast:l})=>o(t,{children:r(a,{children:[e.prefixIcon&&o(m,{children:e.prefixIcon}),l?o(h,{as:"span",children:e.component}):r(t,{children:[e.component,o(p,{children:n})]})]})});export{c as default};
+`,f=({link:e,separator:r,isLast:l,onlyLastTruncated:d})=>t(n,{children:i(h,{$onlyLastTruncated:d,children:[e.prefixIcon&&t(m,{children:e.prefixIcon}),l?t(c,{as:"span",children:e.component}):i(n,{children:[e.component,t(p,{children:r})]})]})});export{f as default};

package/esm/components/Breadcrumbs/index.js

@@ -1,7 +1,7 @@
-import{jsx as r}from"react/jsx-runtime";import p from"styled-components";import a from"./BreadcrumbsItem.js";import m from"../../icons/components/NextIcon.js";import"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const n=p.ul`
+import{jsx as r}from"react/jsx-runtime";import n from"styled-components";import p from"./BreadcrumbsItem.js";import s from"../../icons/components/NextIcon.js";import"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const l=n.ul`
   display: flex;
   align-items: center;
   padding: 0;
   white-space: nowrap;
   overflow: hidden;
-`,s=({links:o,separator:t=r(m,{})})=>r(n,{children:o.map((e,i)=>r(a,{link:e,separator:t,isLast:i===o.length-1},i))});export{s as default};
+`,m=({links:t,separator:a=r(s,{}),onlyLastTruncated:e=!1})=>r(l,{children:t.map((i,o)=>r(p,{link:i,separator:a,isLast:o===t.length-1,onlyLastTruncated:e},o))});export{m as default};

package/esm/components/Button/styles.js

@@ -1,4 +1,4 @@
-import{ButtonLargeTextStyle as c,ButtonRegularTextStyle as e,ButtonSmallTextStyle as a}from"../../typography/ButtonText/index.js";import"react/jsx-runtime";import"styled-components";const n={smaller:a,small:e,regular:e,large:c},d=()=>`
+import{ButtonSmallTextStyle as c,ButtonRegularTextStyle as e,ButtonLargeTextStyle as a}from"../../typography/ButtonText/index.js";import"react/jsx-runtime";import"styled-components";const n={smaller:c,small:e,regular:e,large:a},d=()=>`
   padding: 0.25rem 0.75rem;
   min-height: 2.5rem;
 `,g=()=>`

package/esm/components/Card/index.js

@@ -1,8 +1,8 @@
-import{jsxs as n,jsx as t}from"react/jsx-runtime";import i from"styled-components";import s from"../../theme.js";const m=i.div``,p=i.div`
+import{jsxs as s,jsx as i}from"react/jsx-runtime";import l from"styled-components";import n from"../../theme.js";const m=l.div``,p=l.div`
   background: ${({topBorder:r})=>r};
   height: 0.25rem;
-`,g=i.div`
-  background: ${s.colors.background.light};
+`,g=l.div`
+  background: ${n.colors.background.light};
 
   ${({noFrame:r,topBorder:o,lineBorder:e,theme:d})=>!o&&(!r||e)&&`border-top: 1px solid ${d.colors.gray.light5};`}
 
@@ -11,4 +11,4 @@ import{jsxs as n,jsx as t}from"react/jsx-runtime";import i from"styled-component
 
   ${({noFrame:r,lineBorder:o,theme:e})=>!r&&!o&&`border-right: 1px solid ${e.colors.gray.light5};
      border-left: 1px solid ${e.colors.gray.light5};`}
-`,l=({children:r,topBorder:o,noFrame:e=!1,lineBorder:d=!1,as:a="div"})=>n(m,{as:a,children:[o&&t(p,{topBorder:o}),t(g,{topBorder:o,noFrame:e,lineBorder:d,children:r})]});export{l as Card,l as default};
+`,t=({children:r,topBorder:o,noFrame:e=!1,lineBorder:d=!1,as:a="div"})=>s(m,{as:a,children:[o&&i(p,{topBorder:o}),i(g,{topBorder:o,noFrame:e,lineBorder:d,children:r})]});export{t as Card,t as default};

package/esm/components/CheckBox/index.js

@@ -1,4 +1,4 @@
-import{jsxs as b,jsx as s}from"react/jsx-runtime";import t,{css as r}from"styled-components";import m from"../../icons/components/CheckmarkIcon.js";import{generateNameHash as g}from"../../shared/helpers.js";import i from"../../theme.js";import{BodyText as u}from"../../typography/BodyText/index.js";import{BackgroundStyles as f}from"../IconButton.js";import"../../shared/media-queries.js";const k=r`
+import{jsxs as b,jsx as s}from"react/jsx-runtime";import t,{css as r}from"styled-components";import m from"../../icons/components/CheckmarkIcon.js";import{generateNameHash as g}from"../../shared/helpers.js";import i from"../../theme.js";import{BodyText as f}from"../../typography/BodyText/index.js";import{BackgroundStyles as u}from"../IconButton.js";import"../../shared/media-queries.js";const k=r`
   width: 24px;
   height: 24px;
 
@@ -51,7 +51,7 @@ import{jsxs as b,jsx as s}from"react/jsx-runtime";import t,{css as r}from"styled
 
   :focus-visible {
     transition: background-color 400ms;
-    ${f}
+    ${u}
   }
 `,S=t.span`
   box-sizing: border-box;
@@ -75,7 +75,7 @@ import{jsxs as b,jsx as s}from"react/jsx-runtime";import t,{css as r}from"styled
   ${e=>e.isDisabled&&y};
   ${e=>e.hasError&&D};
   ${e=>e.isChecked&&e.isDisabled&&z};
-`,j=t(u)`
+`,j=t(f)`
   flex: 1;
   cursor: ${({isDisabled:e})=>e?"default":"pointer"};
   user-select: none;

package/esm/components/Chip/index.js

@@ -1,13 +1,13 @@
-import{jsx as i,jsxs as v}from"react/jsx-runtime";import t from"styled-components";import y from"../../icons/components/CloseIcon.js";import{getFontSize as C,getCursorType as m,getBackgroundColor as $,getColor as x,getBorderColor as k,getHoverBorderColor as B,getHoverBackgroundColor as z,getHoverColor as D,getActiveBackgroundColor as p,getActiveBorderColor as j,getActiveColor as H,getSufixHoverBackgroundColor as w}from"./styles.js";const A={smaller:"0.25rem 1rem",small:"0.25rem 1rem",regular:"0.25rem 1rem",large:"0.5rem 1rem"},S=t.div`
+import{jsx as i,jsxs as y}from"react/jsx-runtime";import t from"styled-components";import C from"../../icons/components/CloseIcon.js";import{getFontSize as $,getCursorType as m,getBackgroundColor as v,getColor as x,getBorderColor as k,getHoverBorderColor as B,getHoverBackgroundColor as z,getHoverColor as D,getActiveBackgroundColor as p,getActiveBorderColor as j,getActiveColor as H,getSufixHoverBackgroundColor as w}from"./styles.js";const A={smaller:"0.25rem 1rem",small:"0.25rem 1rem",regular:"0.25rem 1rem",large:"0.5rem 1rem"},S=t.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
-  font-size: ${({size:e})=>C(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: ${m};
   align-items: center;
-  background: ${$};
+  background: ${v};
   color: ${x};
   justify-content: center;
   border-width: 1px;
@@ -70,4 +70,4 @@ import{jsx as i,jsxs as v}from"react/jsx-runtime";import t from"styled-component
   &:hover:before {
     opacity: 1;
   }
-`,b=({color:e="primary",children:l,component:h="div",isDisabled:r,onClick:s,size:u="regular",prefix:a,onDelete:n,variant:c="solid",...f})=>{const o=!!(s&&!r),d=!!(n&&!r);return i(S,{...f,role:o?"button":void 0,onClick:o?s:void 0,tabIndex:o?0:void 0,as:o?"button":h,color:e,isDisabled:r,size:u,isClickable:o,isDeletable:d,variant:c,hasPrefix:!!a,children:v(F,{children:[a&&i(I,{className:"prefix",children:a}),l,n&&i(P,{role:"button",onClick:d?g=>{g.stopPropagation(),n?.(g)}:void 0,color:e,variant:c,isClickable:o,isDisabled:r,isDeletable:!0,size:"regular",children:i(y,{})})]})})};export{b as Chip,b as default};
+`,b=({color:e="primary",children:l,component:u="div",isDisabled:o,onClick:s,size:f="regular",prefix:n,onDelete:a,variant:c="solid",...h})=>{const r=!!(s&&!o),d=!!(a&&!o);return i(S,{...h,role:r?"button":void 0,onClick:r?s:void 0,tabIndex:r?0:void 0,as:r?"button":u,color:e,isDisabled:o,size:f,isClickable:r,isDeletable:d,variant:c,hasPrefix:!!n,children:y(F,{children:[n&&i(I,{className:"prefix",children:n}),l,a&&i(P,{role:"button",onClick:d?g=>{g.stopPropagation(),a?.(g)}:void 0,color:e,variant:c,isClickable:r,isDisabled:o,isDeletable:!0,size:"regular",children:i(C,{})})]})})};export{b as Chip,b as default};

package/esm/components/DayPicker/index.js

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

package/esm/components/EditRow/index.js

@@ -31,4 +31,4 @@ import{jsxs as m,Fragment as P,jsx as o}from"react/jsx-runtime";import{useState
   flex-wrap: wrap;
 `,M=i(V)`
   margin: 0.5rem;
-`,ee=({value:p,label:c,onChange:w,onEdit:h,options:j=[],inputProps:T={},isClearable:D=!1,isEditionDisabled:k=!1,editText:E,saveText:F,cancelText:S,noValueText:B,formatterFunc:u,isSingleSelect:$,color:d="secondary"})=>{const[r,t]=s(p),[G,H]=s(p),[l,x]=s(!1),a=typeof r=="string",J=u&&a?u?.(r):r,K=a?J:r.join(", "),g=r.length>0;Q(()=>h?.(l),[h,l]);const b=()=>{l?t(G):H(r),x(e=>!e)},L=e=>{e.preventDefault(),w?.(r),x(!1)},N=e=>{if(typeof r!="object")throw new Error("Cannot toggle chip on other than array");if($){if(r.includes(e)&&D){t([]);return}t([e]);return}if(r.includes(e)){const n=r.filter(O=>O!==e);t(n);return}t(n=>[...n,e])};return m(X,{children:[!l&&m(P,{children:[o(v,{children:c}),g&&o(C,{children:K}),!g&&o(A,{children:B}),o(f,{variant:"flat",color:d,onClick:b,isDisabled:k,children:E})]}),l&&m(Y,{onSubmit:L,children:[o(v,{children:c}),a&&o(Z,{...T,autoFocus:!0,value:r,label:c,onChange:e=>t(e.target.value)}),!a&&o(I,{children:j.map(e=>o(M,{color:d,onClick:n=>{n.preventDefault(),N(e)},variant:r.includes(e)?"solid":"outline",children:e},e))}),m(_,{children:[o(z,{type:"button",variant:"flat",color:"neutral",onClick:b,children:S}),o(q,{type:"submit",color:d,children:F})]})]})]})};export{ee as default};
+`,ee=({value:p,label:c,onChange:w,onEdit:u,options:j=[],inputProps:T={},isClearable:D=!1,isEditionDisabled:k=!1,editText:E,saveText:F,cancelText:S,noValueText:B,formatterFunc:h,isSingleSelect:$,color:d="secondary"})=>{const[r,t]=s(p),[G,H]=s(p),[l,x]=s(!1),a=typeof r=="string",J=h&&a?h?.(r):r,K=a?J:r.join(", "),g=r.length>0;Q(()=>u?.(l),[u,l]);const b=()=>{l?t(G):H(r),x(e=>!e)},L=e=>{e.preventDefault(),w?.(r),x(!1)},N=e=>{if(typeof r!="object")throw new Error("Cannot toggle chip on other than array");if($){if(r.includes(e)&&D){t([]);return}t([e]);return}if(r.includes(e)){const n=r.filter(O=>O!==e);t(n);return}t(n=>[...n,e])};return m(X,{children:[!l&&m(P,{children:[o(v,{children:c}),g&&o(C,{children:K}),!g&&o(A,{children:B}),o(f,{variant:"flat",color:d,onClick:b,isDisabled:k,children:E})]}),l&&m(Y,{onSubmit:L,children:[o(v,{children:c}),a&&o(Z,{...T,autoFocus:!0,value:r,label:c,onChange:e=>t(e.target.value)}),!a&&o(I,{children:j.map(e=>o(M,{color:d,onClick:n=>{n.preventDefault(),N(e)},variant:r.includes(e)?"solid":"outline",children:e},e))}),m(_,{children:[o(z,{type:"button",variant:"flat",color:"neutral",onClick:b,children:S}),o(q,{type:"submit",color:d,children:F})]})]})]})};export{ee as default};

package/esm/components/Hero/index.js

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

package/esm/components/Icon/index.js

@@ -1,4 +1,4 @@
-import{jsxs as s,Fragment as u,jsx as e}from"react/jsx-runtime";import{useState as x}from"react";import i from"styled-components";import{Caption as b}from"../../typography/BodyText/index.js";import{Title as h}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";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 b}from"../../typography/BodyText/index.js";import{Title as h}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";const w=i.div`
   margin: 0 auto;
   max-width: 700px;
 `,y=i(h)`
@@ -29,4 +29,4 @@ import{jsxs as s,Fragment as u,jsx as e}from"react/jsx-runtime";import{useState
 `,v=i.span`
   font-size: ${({size:r})=>r};
   color: ${({color:r})=>r};
-`,z=({background:r=p.colors.background.light,color:l=p.colors.text.dark,icons:m,size:d="2rem"})=>{const[a,n]=x({isOpen:!1,message:"",type:"info",color:"neutral"}),g=async o=>{const c=`import { ${o} } from 'kvdbil-components';`;if(navigator.clipboard)try{await navigator.clipboard.writeText(c),n(t=>({...t,isOpen:!0,message:`copied import for ${o}`,type:"success",color:"success"}))}catch(t){n(f=>({...f,isOpen:!0,message:`Could not copy text: ${t}`,type:"error",color:"error"}))}};return s(u,{children:[s(w,{children:[e(y,{as:"h2",children:"Click to copy import declaration for icon"}),e(O,{children:m.map(([o,c],t)=>s($,{background:r,onClick:()=>{g(o)},children:[e(C,{children:o}),e(v,{size:d,color:l,children:e(c,{})})]},t))})]}),e(k,{message:a.message,isOpen:a.isOpen,type:a.type,color:a.color,onClose:()=>n(o=>({...o,isOpen:!1}))})]})};export{z as default};
+`,z=({background:r=p.colors.background.light,color:l=p.colors.text.dark,icons:m,size:d="2rem"})=>{const[a,n]=x({isOpen:!1,message:"",type:"info",color:"neutral"}),g=async o=>{const s=`import { ${o} } from 'kvdbil-components';`;if(navigator.clipboard)try{await navigator.clipboard.writeText(s),n(t=>({...t,isOpen:!0,message:`copied import for ${o}`,type:"success",color:"success"}))}catch(t){n(f=>({...f,isOpen:!0,message:`Could not copy text: ${t}`,type:"error",color:"error"}))}};return c(u,{children:[c(w,{children:[e(y,{as:"h2",children:"Click to copy import declaration for icon"}),e(O,{children:m.map(([o,s],t)=>c($,{background:r,onClick:()=>{g(o)},children:[e(C,{children:o}),e(v,{size:d,color:l,children:e(s,{})})]},t))})]}),e(k,{message:a.message,isOpen:a.isOpen,type:a.type,color:a.color,onClose:()=>n(o=>({...o,isOpen:!1}))})]})};export{z as default};

package/esm/components/IconButton.js

@@ -1,11 +1,11 @@
-import{jsxs as u,jsx as d}from"react/jsx-runtime";import n,{css as a}from"styled-components";const b=a`
+import{jsxs as u,jsx as d}from"react/jsx-runtime";import r,{css as a}from"styled-components";const b=a`
   background-color: transparent;
 `,s="400ms",m="1500ms",f="750ms",c=a`
-  background-color: ${({theme:i,color:r})=>i.colors[r].main};
+  background-color: ${({theme:o,color:n})=>o.colors[n].main};
   opacity: 0.1;
-  ${i=>i.isDisabled&&b};
-`,k=n.div`
-  cursor: ${i=>i.isDisabled?"default":"pointer"};
+  ${o=>o.isDisabled&&b};
+`,k=r.div`
+  cursor: ${o=>o.isDisabled?"default":"pointer"};
   outline: none;
 
   display: inline-block;
@@ -62,7 +62,7 @@ import{jsxs as u,jsx as d}from"react/jsx-runtime";import n,{css as a}from"styled
       clip-path: circle(50%);
     }
   }
-`,g=n.div`
+`,g=r.div`
   top: 0;
   left: 0;
 
@@ -72,4 +72,4 @@ import{jsxs as u,jsx as d}from"react/jsx-runtime";import n,{css as a}from"styled
 
   position: absolute;
   border-radius: 10rem;
-`,h=({children:i,isActive:r,isDisabled:e,onClick:t,noTabIndex:l=!1,color:p})=>u(k,{color:p,isActive:r,isDisabled:e,onClick:o=>{o.stopPropagation(),o.preventDefault(),o.persist(),!e&&typeof t=="function"&&t(o)},onKeyDown:o=>{o.key==="Enter"&&!e&&typeof t=="function"&&(o.persist(),t(o))},tabIndex:e||l?void 0:0,children:[d(g,{className:"button-background"}),i]});export{c as BackgroundStyles,h as default};
+`,h=({children:o,isActive:n,isDisabled:i,onClick:t,noTabIndex:l=!1,color:p})=>u(k,{color:p,isActive:n,isDisabled:i,onClick:e=>{e.stopPropagation(),e.preventDefault(),e.persist(),!i&&typeof t=="function"&&t(e)},onKeyDown:e=>{e.key==="Enter"&&!i&&typeof t=="function"&&(e.persist(),t(e))},tabIndex:i||l?void 0:0,children:[d(g,{className:"button-background"}),o]});export{c as BackgroundStyles,h as default};

package/esm/components/Message/index.js

@@ -1,4 +1,4 @@
-import{jsx as o,jsxs as c}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 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`
   ${({isDeleted:e})=>e&&`
       opacity: 0;
       transition: opacity 0.3s;
@@ -36,4 +36,4 @@ import{jsx as o,jsxs as c}from"react/jsx-runtime";import{useRef as h,useState as
   font-size: 2.5rem;
   cursor: pointer;
   }
-`,E=({children:e,type:t,withIcon:r=!1,isDeletable:n=!1,fullWidth:i=!1,inverted:a=!1,textCenter:d=!1,...u})=>{const l=h(null),[m,f]=x(!1),g=p=>{p.stopPropagation(),f(!0),setTimeout(()=>{l.current&&l.current.remove()},300)};return o(j,{isDeleted:m,children:c(D,{messageType:t,fullWidth:i,inverted:a,textCenter:d,role:"alert",ref:l,...u,children:[c(W,{children:[r&&o(P,{children:T(t)}),c(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};
+`,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};

package/esm/components/Modal/index.js

@@ -76,4 +76,4 @@ import{jsx as t,jsxs as e,Fragment as x}from"react/jsx-runtime";import{useEffect
   }
 `,O=d`
   ${s}
-`,c=({children:m,isOpen:n,contentStyles:p,withPortal:l=!1,withCloseIcon:g=!0,onClose:i,...h})=>{b(()=>{const a=w=>{w.key==="Escape"&&n&&i()};return window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[i,n]);const u=!!(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,{...h,children:[t(E,{"data-testid":"background",onClick:i}),e(C,{style:p,children:[g&&t(S,{onClick:i,"data-testid":"close",children:t(v,{})}),m]}),t(L,{})]})]})});return l&&u?f(r,document.body):r};export{c as Modal,c as default};
+`,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};

package/esm/components/OffCanvas/Overlay.js

@@ -1,4 +1,4 @@
-import{jsx as n}from"react/jsx-runtime";import{CSSTransition as r}from"react-transition-group";import e from"styled-components";const s={classNames:"backgroundTransition",timeout:{enter:400,exit:400},mountOnEnter:!0,unmountOnExit:!0},c=e.div`
+import{jsx as t}from"react/jsx-runtime";import{CSSTransition as r}from"react-transition-group";import e from"styled-components";const s={classNames:"backgroundTransition",timeout:{enter:400,exit:400},mountOnEnter:!0,unmountOnExit:!0},c=e.div`
   position: fixed;
   z-index: 1000;
   width: 100%;
@@ -24,4 +24,4 @@ import{jsx as n}from"react/jsx-runtime";import{CSSTransition as r}from"react-tra
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
   }
-`,u=({className:t,isOpen:o,onClick:i,transitionProps:a=s})=>n(r,{in:o,...a,className:t,children:n(c,{onClick:()=>{i&&i()}})});export{u as default};
+`,u=({className:n,isOpen:o,onClick:i,transitionProps:a=s})=>t(r,{in:o,...a,className:n,children:t(c,{onClick:()=>{i&&i()}})});export{u as default};

package/esm/components/Select/index.js

@@ -36,4 +36,4 @@ import{jsxs as k,jsx as l}from"react/jsx-runtime";import{useState as F}from"reac
   transform: ${o=>o.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
 
   transform-origin: 50% 60%;
-`,G=(o,n)=>n?e.colors.error.main:o?e.colors.text.dark:e.colors.gray.light1,U=({selectProps:{menuIsOpen:o=!1},isFocused:n=!1,isDisabled:p})=>l(V,{$isDisabled:p,$isFocused:n,$isMenuOpen:o,$theme:e});function w({className:o,color:n="primary",forwardRef:p,hasError:t=!1,height:s,helperText:u,isDisabled:d=!1,onBlur:L=()=>null,onFocus:v=()=>null,onInputChange:C=()=>null,placeholder:I="",name:g,...i}){const[c,f]=F(!1),[T,B]=F(""),z=(r,a)=>{C(r,a),B(r)},b=({isSelected:r,isFocused:a,isDisabled:h})=>r?e.colors[n].main:h?e.colors.background.light:a?e.colors.background.gray:e.colors.background.light,E=r=>{f(!0),v(r)},N=r=>{f(!1),L(r)},x=G(c,t),$=!i.label;return k(M,{className:o,children:[!$&&i.label&&l(H,{htmlFor:g,height:s,isFocused:c,hasValue:!!(i.value||T),disabled:d,theme:e,hasError:t,children:i.label}),i.prefix&&l(A,{isDisabled:d,isFocused:c,children:i.prefix}),l(O,{...i,id:"react-select",inputId:g,name:g,ref:p,isDisabled:d,onInputChange:z,placeholder:I,onFocus:E,onBlur:N,styles:{control:r=>({...r,borderRadius:0,color:e.colors.text.dark,fontFamily:e.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.5rem",backgroundColor:e.colors.background.light,borderColor:x,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...W(d),...j(t),...D(!!i.prefix)}),input:r=>({...r,height:"auto",margin:0,padding:0}),placeholder:r=>{const a={...r,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return $?{...a,color:e.colors.text.dark,fontWeight:600}:{...a,display:c?"static":"none"}},menuList:r=>({...r,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${x}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:r=>({...r,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(r,{isSelected:a,isFocused:h,isDisabled:y})=>({...r,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:y?"not-allowed":"pointer","&:hover":{background:b({isSelected:a,isFocused:!0,isDisabled:y})},background:b({isSelected:a,isFocused:h}),...D(!!i.prefix)}),valueContainer:r=>({...r,position:"static",padding:s?`${s-1}rem 0 `:0,height:s?"auto":"1.5rem"}),clearIndicator:r=>({...r,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:U,...i.components??{}}}),u&&l(_,{hasError:t,children:u})]})}export{w as Select,w as default};
+`,G=(o,t)=>t?e.colors.error.main:o?e.colors.text.dark:e.colors.gray.light1,U=({selectProps:{menuIsOpen:o=!1},isFocused:t=!1,isDisabled:p})=>l(V,{$isDisabled:p,$isFocused:t,$isMenuOpen:o,$theme:e});function w({className:o,color:t="primary",forwardRef:p,hasError:s=!1,height:n,helperText:u,isDisabled:d=!1,onBlur:L=()=>null,onFocus:v=()=>null,onInputChange:C=()=>null,placeholder:I="",name:g,...i}){const[c,f]=F(!1),[T,B]=F(""),z=(r,a)=>{C(r,a),B(r)},b=({isSelected:r,isFocused:a,isDisabled:h})=>r?e.colors[t].main:h?e.colors.background.light:a?e.colors.background.gray:e.colors.background.light,E=r=>{f(!0),v(r)},N=r=>{f(!1),L(r)},x=G(c,s),$=!i.label;return k(M,{className:o,children:[!$&&i.label&&l(H,{htmlFor:g,height:n,isFocused:c,hasValue:!!(i.value||T),disabled:d,theme:e,hasError:s,children:i.label}),i.prefix&&l(A,{isDisabled:d,isFocused:c,children:i.prefix}),l(O,{...i,id:"react-select",inputId:g,name:g,ref:p,isDisabled:d,onInputChange:z,placeholder:I,onFocus:E,onBlur:N,styles:{control:r=>({...r,borderRadius:0,color:e.colors.text.dark,fontFamily:e.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.5rem",backgroundColor:e.colors.background.light,borderColor:x,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...W(d),...j(s),...D(!!i.prefix)}),input:r=>({...r,height:"auto",margin:0,padding:0}),placeholder:r=>{const a={...r,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return $?{...a,color:e.colors.text.dark,fontWeight:600}:{...a,display:c?"static":"none"}},menuList:r=>({...r,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${x}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:r=>({...r,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(r,{isSelected:a,isFocused:h,isDisabled:y})=>({...r,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:y?"not-allowed":"pointer","&:hover":{background:b({isSelected:a,isFocused:!0,isDisabled:y})},background:b({isSelected:a,isFocused:h}),...D(!!i.prefix)}),valueContainer:r=>({...r,position:"static",padding:n?`${n-1}rem 0 `:0,height:n?"auto":"1.5rem"}),clearIndicator:r=>({...r,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:U,...i.components??{}}}),u&&l(_,{hasError:s,children:u})]})}export{w as Select,w as default};

package/esm/components/Snackbar/index.js

@@ -75,4 +75,4 @@ import{jsx as e,jsxs as $}from"react/jsx-runtime";import{useEffect as b}from"rea
   }
 `,T=n.span`
   flex: 1;
-`,j={error:e(E,{}),success:e(k,{}),info:e(w,{}),text:""},d=({message:o,color:a="none",type:l="info",action:c,isOpen:f,origin:h={},onClose:m=()=>{},onExited:x=()=>{},autoHideDuration:s=4e3,...u})=>(b(()=>{const y=setTimeout(m,s);return()=>clearTimeout(y)},[s,m]),e(B,{in:f,timeout:g,mountOnEnter:!0,unmountOnExit:!0,onExited:x,classNames:i,children:$(S,{...u,color:a,origin:h,children:[e(p,{color:a,type:l,children:j[l]}),e(T,{children:o}),c&&c,e(N,{color:a??"none",onClick:m,children:e(v,{})})]})}));export{d as Snackbar,d as default};
+`,j={error:e(E,{}),success:e(k,{}),info:e(w,{}),text:""},d=({message:o,color:a="none",type:l="info",action:c,isOpen:f,origin:h={},onClose:m=()=>{},onExited:u=()=>{},autoHideDuration:s=4e3,...x})=>(b(()=>{const y=setTimeout(m,s);return()=>clearTimeout(y)},[s,m]),e(B,{in:f,timeout:g,mountOnEnter:!0,unmountOnExit:!0,onExited:u,classNames:i,children:$(S,{...x,color:a,origin:h,children:[e(p,{color:a,type:l,children:j[l]}),e(T,{children:o}),c&&c,e(N,{color:a??"none",onClick:m,children:e(v,{})})]})}));export{d as Snackbar,d as default};

package/esm/components/SpinnerThin/index.js

@@ -1,6 +1,6 @@
-import{jsxs as d,jsx as r}from"react/jsx-runtime";import o from"styled-components";import l from"../../icons/components/CheckmarkIcon.js";import c from"../../icons/components/CloseIcon.js";import h from"../Spinner/index.js";import"../../theme.js";const s=o.div`
+import{jsxs as l,jsx as e}from"react/jsx-runtime";import o from"styled-components";import d from"../../icons/components/CheckmarkIcon.js";import f from"../../icons/components/CloseIcon.js";import c from"../Spinner/index.js";import"../../theme.js";const s=o.div`
   position: absolute;
-`,f=o(h)`
+`,h=o(c)`
   position: absolute;
 
   ${({size:i})=>i&&`
@@ -35,4 +35,4 @@ import{jsxs as d,jsx as r}from"react/jsx-runtime";import o from"styled-component
 
   transition: opacity 500ms ease-in-out;
   opacity: ${({isDone:i,isError:t})=>!i&&!t?"0":"1"};
-`,a=({isLoading:i=!0,isDone:t=!1,isError:m=!1,size:e=3.5,...p})=>d(s,{"data-testid":"spinner-thin","aria-label":"Loading...",children:[r(n,{size:e,isDone:t,children:r(l,{})}),r(n,{isClose:!0,size:e,isError:m,children:r(c,{})}),r(f,{size:e,speed:"fast",color:"neutral",isLoading:i,...p})]});export{s as Container,n as IconWrapper,a as SpinnerThin,a as default};
+`,a=({isLoading:i=!0,isDone:t=!1,isError:m=!1,size:r=3.5,...p})=>l(s,{"data-testid":"spinner-thin","aria-label":"Loading...",children:[e(n,{size:r,isDone:t,children:e(d,{})}),e(n,{isClose:!0,size:r,isError:m,children:e(f,{})}),e(h,{size:r,speed:"fast",color:"neutral",isLoading:i,...p})]});export{s as Container,n as IconWrapper,a as SpinnerThin,a as default};

package/esm/components/StepperAccordion/index.js

@@ -1,6 +1,6 @@
-import{jsxs as m,jsx as e}from"react/jsx-runtime";import{useState as g,useCallback as b,useEffect as u}from"react";import t,{css as l}from"styled-components";import o from"../../theme.js";import{Title as x}from"../../typography/Heading/index.js";import C from"../Icons/CheckIcon.js";import D from"../Icons/Arrow.js";import{fadedColor as n}from"../../shared/helpers.js";import{Collapse as y}from"react-collapse";import"../../shared/media-queries.js";const a="200ms",k=t.div`
+import{jsxs as m,jsx as e}from"react/jsx-runtime";import{useState as g,useCallback as b,useEffect as u}from"react";import t,{css as l}from"styled-components";import o from"../../theme.js";import{Title as x}from"../../typography/Heading/index.js";import C from"../Icons/CheckIcon.js";import D from"../Icons/Arrow.js";import{fadedColor as a}from"../../shared/helpers.js";import{Collapse as y}from"react-collapse";import"../../shared/media-queries.js";const n="200ms",k=t.div`
   .ReactCollapse--collapse {
-    transition: height ${a} ease-in-out;
+    transition: height ${n} ease-in-out;
   }
 `,v=l`
   margin-top: 0.25rem;
@@ -21,7 +21,7 @@ import{jsxs as m,jsx as e}from"react/jsx-runtime";import{useState as g,useCallba
 
   fill: currentColor;
 
-  transition: ${a};
+  transition: ${n};
   transform: rotate(0deg);
   transform-origin: center;
   ${i=>i.isExpanded&&v};
@@ -30,11 +30,11 @@ import{jsxs as m,jsx as e}from"react/jsx-runtime";import{useState as g,useCallba
   background-color: ${o.colors[i].main};
 `,z=(i,r)=>l`
   fill: white;
-  border: 2px solid ${n(o.colors[r].main,.2)};
+  border: 2px solid ${a(o.colors[r].main,.2)};
 
   ${i&&`
-      border: 2px solid ${n(o.colors[r].main,0)};
-      background-color: ${n(o.colors[r].main,.5)};
+      border: 2px solid ${a(o.colors[r].main,0)};
+      background-color: ${a(o.colors[r].main,.5)};
     `}
 `,T=t.div`
   font-family: ${({theme:i})=>i.typography.fontBaseFamily};
@@ -66,7 +66,7 @@ import{jsxs as m,jsx as e}from"react/jsx-runtime";import{useState as g,useCallba
     margin-top: 0.1rem;
   }
 
-  transition: background-color ${a};
+  transition: background-color ${n};
   ${i=>i.isComplete&&S(i.color)};
   ${i=>i.isDisabled&&z(i.isComplete,i.color)};
 `,c=i=>{const[r,d]=g(i.isExpanded||!1),p=b(()=>{i.isDisabled||d(s=>!s)},[i.isDisabled]);u(()=>{d(i.isExpanded||!1)},[i.isDisabled,i.isExpanded]);const f=i.step||i.step===0;return m(k,{children:[m(E,{...i,onClick:s=>{const h=i.onClick||p;i.isDisabled||h(s)},isExpanded:r,isDisabled:i.isDisabled||!1,children:[f&&e(T,{isComplete:i.isComplete||!1,isDisabled:i.isDisabled||!1,color:i.color||"primary",children:i.isComplete?e(C,{}):e("span",{children:i.step})}),e(w,{children:i.title}),e(j,{isExpanded:r})]}),e(y,{isOpened:r,children:i.children}),i.closedChildren&&i.closedChildren]})};export{c as StepperAccordion,c as default};

package/esm/components/Tabs/Tab.js

@@ -4,14 +4,14 @@ import{jsx as s}from"react/jsx-runtime";import n from"styled-components";import{
   && {
     margin-bottom: -3px;
     padding: 0.875rem 1.375rem;
-    border-bottom: ${({theme:e,isActive:o,activeColor:r})=>o?`3px solid ${e.colors[r].main}`:"3px solid transparent"};
+    border-bottom: ${({theme:r,isActive:o,activeColor:e})=>o?`3px solid ${r.colors[e].main}`:"3px solid transparent"};
     transition:
       color 0.3s ease,
       border 0.3s ease;
 
     :focus-visible {
-      ${({theme:e,isActive:o,activeColor:r})=>!o&&`background-color: ${f(e.colors[r].main,.1)};
+      ${({theme:r,isActive:o,activeColor:e})=>!o&&`background-color: ${f(r.colors[e].main,.1)};
       `}
     }
   }
-`,m=b(({label:e,index:o=-1,isActive:r=!1,onClick:t,activeColor:a="secondary",isDisabled:c=!1,onKeyUp:l},p)=>s(v,{role:"presentation",children:s(x,{tabIndex:r?0:-1,isActive:r,onClick:i=>t&&t(i,o),activeColor:a,isDisabled:c,variant:"flat",color:r?a:"neutral",id:`tab-${o}`,role:"tab","aria-selected":r?"true":"false","aria-controls":`tabpanel-${o}`,onKeyUp:i=>l&&l(i,o),ref:p,children:e})}));m.displayName="Tab";export{m as default};
+`,m=b(({label:r,index:o=-1,isActive:e=!1,onClick:t,activeColor:a="secondary",isDisabled:c=!1,onKeyUp:l},p)=>s(v,{role:"presentation",children:s(x,{tabIndex:e?0:-1,isActive:e,onClick:i=>t&&t(i,o),activeColor:a,isDisabled:c,variant:"flat",color:e?a:"neutral",id:`tab-${o}`,role:"tab","aria-selected":e?"true":"false","aria-controls":`tabpanel-${o}`,onKeyUp:i=>l&&l(i,o),ref:p,children:r})}));m.displayName="Tab";export{m as default};

package/esm/components/TextArea/index.js

@@ -51,4 +51,4 @@ import{jsxs as m,jsx as a}from"react/jsx-runtime";import{useState as k}from"reac
 `,A=o.span`
   display: block;
   color: ${({theme:r})=>r.colors.error.dark};
-`,x=({placeholder:r="",isDisabled:l=!1,centered:t=!1,hasError:$=!1,className:u,helperText:d,label:i="",resize:y=!0,name:c,errors:n,...s})=>{const[h,b]=k(!1),f=!!s.value;return m(T,{className:u,children:[m(j,{isFocused:h,disabled:l,centered:t,hasError:$,hasPlaceholder:!!r,children:[a(w,{...s,name:c,"aria-label":i||c,resize:y,onFocus:()=>b(!0),onBlur:()=>b(!1),disabled:l,theme:e,placeholder:i&&!h?"":r}),s.suffix&&a(C,{children:s.suffix})]}),i&&a(v,{htmlFor:c,isFocused:h,centered:t,hasError:$,hasValue:f,disabled:l,theme:e,children:i}),(d||n)&&m(N,{centered:t,children:[d&&a(P,{children:d}),n&&n.map(g=>a(A,{children:g},g))]})]})};export{x as TextArea,x as default};
+`,g=({placeholder:r="",isDisabled:l=!1,centered:t=!1,hasError:f=!1,className:u,helperText:d,label:s="",resize:x=!0,name:c,errors:n,...i})=>{const[h,$]=k(!1),y=!!i.value;return m(T,{className:u,children:[m(j,{isFocused:h,disabled:l,centered:t,hasError:f,hasPlaceholder:!!r,children:[a(w,{...i,name:c,"aria-label":s||c,resize:x,onFocus:()=>$(!0),onBlur:()=>$(!1),disabled:l,theme:e,placeholder:s&&!h?"":r}),i.suffix&&a(C,{children:i.suffix})]}),s&&a(v,{htmlFor:c,isFocused:h,centered:t,hasError:f,hasValue:y,disabled:l,theme:e,children:s}),(d||n)&&m(N,{centered:t,children:[d&&a(P,{children:d}),n&&n.map(b=>a(A,{children:b},b))]})]})};export{g as TextArea,g as default};

package/esm/components/Textfield/index.js

@@ -63,4 +63,4 @@ import{jsxs as h,jsx as t}from"react/jsx-runtime";import{useState as B}from"reac
 `,M=r.span`
   display: block;
   color: ${({theme:e})=>e.colors.error.dark};
-`,$=({placeholder:e="",isDisabled:l=!1,centered:d=!1,hasError:p=!1,className:f,helperText:c,label:s="",onBlur:y=()=>null,onFocus:k=()=>null,forwardRef:F,suffix:b,name:a=T("text-input"),errors:i,isAutoFocused:v=!1,...u})=>{const[n,x]=B(!1),w=!!u.value,g=i&&Array.isArray(i)&&i?.length>0;return h(C,{className:f,children:[h(L,{isFocused:n,disabled:l,centered:d,hasError:p,hasPlaceholder:!!e,children:[t(P,{...u,id:a,name:a,"aria-label":s||a,ref:F,onFocus:o=>{x(!0),k(o)},onBlur:o=>{x(!1),y(o)},disabled:l,placeholder:s&&!n?"":e,autoFocus:v}),b&&t(D,{children:b})]}),s&&t(E,{htmlFor:a,isFocused:n,centered:d,hasError:p,hasValue:w,disabled:l,children:s}),(c||g)&&h(H,{centered:d,children:[c&&t(I,{children:c}),g&&i.map(o=>t(M,{children:o},o))]})]})};export{$ as TextField,$ as default};
+`,g=({placeholder:e="",isDisabled:l=!1,centered:d=!1,hasError:p=!1,className:$,helperText:c,label:s="",onBlur:y=()=>null,onFocus:k=()=>null,forwardRef:F,suffix:b,name:a=T("text-input"),errors:i,isAutoFocused:v=!1,...u})=>{const[n,f]=B(!1),w=!!u.value,x=i&&Array.isArray(i)&&i?.length>0;return h(C,{className:$,children:[h(L,{isFocused:n,disabled:l,centered:d,hasError:p,hasPlaceholder:!!e,children:[t(P,{...u,id:a,name:a,"aria-label":s||a,ref:F,onFocus:o=>{f(!0),k(o)},onBlur:o=>{f(!1),y(o)},disabled:l,placeholder:s&&!n?"":e,autoFocus:v}),b&&t(D,{children:b})]}),s&&t(E,{htmlFor:a,isFocused:n,centered:d,hasError:p,hasValue:w,disabled:l,children:s}),(c||x)&&h(H,{centered:d,children:[c&&t(I,{children:c}),x&&i.map(o=>t(M,{children:o},o))]})]})};export{g as TextField,g as default};

package/esm/components/ValuationRange/index.js

@@ -1,4 +1,4 @@
-import{jsxs as l,jsx as i,Fragment as f}from"react/jsx-runtime";import r from"styled-components";import{Caption as y}from"../../typography/BodyText/index.js";import{Subtitle as p,Title as g}from"../../typography/Heading/index.js";import"../../shared/media-queries.js";const u=r.div`
+import{jsxs as l,jsx as i,Fragment as x}from"react/jsx-runtime";import r from"styled-components";import{Caption as y}from"../../typography/BodyText/index.js";import{Subtitle as p,Title as g}from"../../typography/Heading/index.js";import"../../shared/media-queries.js";const u=r.div`
   margin: 0 1rem;
 `,v=r.div`
   flex: 1;
@@ -40,4 +40,4 @@ import{jsxs as l,jsx as i,Fragment as f}from"react/jsx-runtime";import r from"st
   height: 0.7rem;
   top: 0;
   position: absolute;
-`,F=({intervalMin:e=0,intervalMax:t=0,value:o=0,color:n="primary",noApproximateSymbol:h=!1,isDisabled:$=!1,manualValuationText:a=""})=>{const d=new Intl.NumberFormat("sv-SE"),s=e>0&&t>0&&!a,x=o>0&&!a,c=$?"lighter":"main";return l(u,{children:[l(j,{children:[i(m,{children:s?`- ${d.format(e)}`:""}),i(v,{children:l(b,{$color:n,$type:c,children:[x&&l(f,{children:[i(g,{as:"span",children:`${h?"":"~ "}${d.format(o)} `}),i(p,{as:"span",children:"kr"})]}),a&&i(w,{as:"span",children:a})]})}),i(m,{children:s?`+ ${d.format(t)}`:""})]}),l(S,{$color:n,$type:c,children:[i(k,{$color:n,$type:c}),i(C,{$color:n,$type:c})]})]})};export{F as default};
+`,F=({intervalMin:e=0,intervalMax:t=0,value:o=0,color:n="primary",noApproximateSymbol:h=!1,isDisabled:$=!1,manualValuationText:a=""})=>{const c=new Intl.NumberFormat("sv-SE"),d=e>0&&t>0&&!a,f=o>0&&!a,s=$?"lighter":"main";return l(u,{children:[l(j,{children:[i(m,{children:d?`- ${c.format(e)}`:""}),i(v,{children:l(b,{$color:n,$type:s,children:[f&&l(x,{children:[i(g,{as:"span",children:`${h?"":"~ "}${c.format(o)} `}),i(p,{as:"span",children:"kr"})]}),a&&i(w,{as:"span",children:a})]})}),i(m,{children:d?`+ ${c.format(t)}`:""})]}),l(S,{$color:n,$type:s,children:[i(k,{$color:n,$type:s}),i(C,{$color:n,$type:s})]})]})};export{F as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "15.0.3",
+  "version": "15.0.5",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -45,7 +45,8 @@
     "not op_mini all"
   ],
   "resolutions": {
-    "**/cross-spawn": "^7.0.5"
+    "**/cross-spawn": "^7.0.5",
+    "**/@types/react": "^18.3.12"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",

package/package.json.tmp

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "15.0.3",
+  "version": "15.0.5",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -44,7 +44,8 @@
     "not op_mini all"
   ],
   "resolutions": {
-    "**/cross-spawn": "^7.0.5"
+    "**/cross-spawn": "^7.0.5",
+    "**/@types/react": "^18.3.12"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",

package/types/components/Breadcrumbs/BreadcrumbsItem.d.ts

@@ -4,6 +4,7 @@ interface Props {
     link: BreadcrumbLink;
     separator?: ReactNode;
     isLast: boolean;
+    onlyLastTruncated: boolean;
 }
-declare const BreadcrumbsItem: ({ link, separator, isLast }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BreadcrumbsItem: ({ link, separator, isLast, onlyLastTruncated, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BreadcrumbsItem;

package/types/components/Breadcrumbs/index.d.ts

@@ -6,6 +6,7 @@ export interface BreadcrumbLink {
 export interface Props {
     links: BreadcrumbLink[];
     separator?: ReactNode;
+    onlyLastTruncated?: boolean;
 }
-declare const Breadcrumbs: ({ links, separator }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Breadcrumbs: ({ links, separator, onlyLastTruncated, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Breadcrumbs;