@kvdbil/components 16.0.1 → 16.0.3

package/esm/components/StepperAccordion/index.js

@@ -1,8 +1,8 @@
-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`
+import{jsxs as m,jsx as s}from"react/jsx-runtime";import{useState as g,useCallback as b,useEffect as u}from"react";import t,{css as a}from"styled-components";import i 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 d="200ms",k=t.div`
   .ReactCollapse--collapse {
-    transition: height ${n} ease-in-out;
+    transition: height ${d} ease-in-out;
   }
-`,v=l`
+`,v=a`
   margin-top: 0.25rem;
   transform: rotate(-180deg);
 `,E=t.div`
@@ -10,10 +10,10 @@ import{jsxs as m,jsx as e}from"react/jsx-runtime";import{useState as g,useCallba
   align-items: center;
   height: 4rem;
 
-  color: ${i=>i.isDisabled?o.colors.text.disabled:o.colors.text.dark};
-`,w=t(x)`
+  color: ${o=>o.isDisabled?i.colors.text.disabled:i.colors.text.dark};
+`,S=t(x)`
   margin: 0;
-`,j=t(D)`
+`,w=t(D)`
   margin-left: auto;
   height: 1.25rem;
   width: 1.25rem;
@@ -21,23 +21,23 @@ import{jsxs as m,jsx as e}from"react/jsx-runtime";import{useState as g,useCallba
 
   fill: currentColor;
 
-  transition: ${n};
+  transition: ${d};
   transform: rotate(0deg);
   transform-origin: center;
-  ${i=>i.isExpanded&&v};
-`,S=i=>l`
+  ${o=>o.isExpanded&&v};
+`,j=(o,r)=>a`
   color: white;
-  background-color: ${o.colors[i].main};
-`,z=(i,r)=>l`
+  background-color: ${i.colors[o][r]};
+`,z=(o,r,e)=>a`
   fill: white;
-  border: 2px solid ${a(o.colors[r].main,.2)};
+  border: 2px solid ${n(i.colors[r][e],.2)};
 
-  ${i&&`
-      border: 2px solid ${a(o.colors[r].main,0)};
-      background-color: ${a(o.colors[r].main,.5)};
+  ${o&&`
+      border: 2px solid ${n(i.colors[r][e],0)};
+      background-color: ${n(i.colors[r][e],.5)};
     `}
 `,T=t.div`
-  font-family: ${({theme:i})=>i.typography.fontBaseFamily};
+  font-family: ${({theme:o})=>o.typography.fontBaseFamily};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -47,7 +47,7 @@ import{jsxs as m,jsx as e}from"react/jsx-runtime";import{useState as g,useCallba
   width: 2rem;
   height: 2rem;
   border-radius: 2rem;
-  border: 2px solid ${i=>o.colors[i.color].main};
+  border: 2px solid ${o=>i.colors[o.$color][o.$colorShade]};
 
   svg {
     fill: currentColor;
@@ -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 ${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};
+  transition: background-color ${d};
+  ${o=>o.isComplete&&j(o.$color,o.$colorShade)};
+  ${o=>o.isDisabled&&z(o.isComplete,o.$color,o.$colorShade)};
+`,c=o=>{const[r,e]=g(o.isExpanded||!1),p=b(()=>{o.isDisabled||e(l=>!l)},[o.isDisabled]);u(()=>{e(o.isExpanded||!1)},[o.isDisabled,o.isExpanded]);const f=o.step||o.step===0;return m(k,{children:[m(E,{...o,onClick:l=>{const h=o.onClick||p;o.isDisabled||h(l)},isExpanded:r,isDisabled:o.isDisabled||!1,children:[f&&s(T,{isComplete:o.isComplete||!1,isDisabled:o.isDisabled||!1,$color:o.color||"primary",$colorShade:o.colorShade||"main",children:o.isComplete?s(C,{}):s("span",{children:o.step})}),s(S,{children:o.title}),s(w,{isExpanded:r})]}),s(y,{isOpened:r,children:o.children}),o.closedChildren&&o.closedChildren]})};export{c as StepperAccordion,c as default};

package/esm/components/Switcher/index.js

@@ -1,17 +1,17 @@
-import{jsx as l}from"react/jsx-runtime";import a from"styled-components";import r from"../../theme.js";const c=a.button`
+import{jsx as a}from"react/jsx-runtime";import s from"styled-components";import r from"../../theme.js";const n=s.button`
   width: 46px;
   height: 24px;
   border-radius: 12px;
   border: none;
   padding: 2px;
-  background-color: ${({selected:o,disabled:e,color:d})=>e?r.colors.grayscaleToned.light3:o?r.colors[d]?.main:r.colors.grayscaleToned.dark5};
+  background-color: ${({selected:o,disabled:e,$color:l,$colorShade:d})=>e?r.colors.grayscaleToned.light4:o?r.colors[l][d]:r.colors.grayscaleToned.dark5};
   display: flex;
   align-items: center;
   justify-content: ${({selected:o})=>o?"flex-end":"flex-start"};
   cursor: ${({disabled:o})=>o?"not-allowed":"pointer"};
   opacity: ${({disabled:o})=>o?.6:1};
   transition: all 0.3s ease;
-`,n=a.div`
+`,p=s.div`
   width: 20px;
   height: 20px;
   border-radius: 50%;
@@ -20,4 +20,4 @@ import{jsx as l}from"react/jsx-runtime";import a from"styled-components";import
     0 2px 4px rgba(0, 0, 0, 0.1),
     0 2px 4px rgba(0, 0, 0, 0.09),
     0 1px 5px rgba(0, 0, 0, 0.15);
-`,s=({selected:o=!1,disabled:e=!1,onToggle:d,color:i="info",...t})=>l(c,{selected:o,disabled:e,color:i,onClick:()=>{!e&&d&&d(!o)},...t,children:l(n,{disabled:e})});export{s as Switcher,s as default};
+`,i=({selected:o=!1,disabled:e=!1,onToggle:l,color:d="info",colorShade:t="mainAlt",...c})=>a(n,{selected:o,disabled:e,$color:d,$colorShade:t,onClick:()=>{!e&&l&&l(!o)},...c,children:a(p,{disabled:e})});export{i as Switcher,i as default};

package/esm/components/Tabs/Tab.js

@@ -1,18 +1,18 @@
-import{jsx as l}from"react/jsx-runtime";import n from"styled-components";import{Button as p}from"../Button/index.js";import{forwardRef as b}from"react";import{hexToRGB as f}from"../../utils/utils.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const v=n.li`
+import{jsx as c}from"react/jsx-runtime";import d from"styled-components";import{Button as b}from"../Button/index.js";import{forwardRef as v}from"react";import{hexToRGB as f}from"../../utils/utils.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const $=d.li`
   list-style-type: none;
-`,u=n(p)`
+`,h=d(b)`
   && {
     margin-bottom: -3px;
     padding: 0.875rem 1.375rem;
-    border-bottom: ${({theme:r,isActive:o,activeColor:e})=>o?`3px solid ${r.colors[e].main}`:"3px solid transparent"};
+    border-bottom: ${({theme:t,isActive:o,$activeColor:e,$activeColorShade:r})=>o?`3px solid ${t.colors[e][r]}`:"3px solid transparent"};
     transition:
       color 0.3s ease,
       border 0.3s ease;
     border-radius: unset;
 
     :focus-visible {
-      ${({theme:r,isActive:o,activeColor:e})=>!o&&`background-color: ${f(r.colors[e].main,.1)};
+      ${({theme:t,isActive:o,$activeColor:e,$activeColorShade:r})=>!o&&`background-color: ${f(t.colors[e][r],.1)};
       `}
     }
   }
-`,m=b(({label:r,index:o=-1,isActive:e=!1,onClick:t,activeColor:a="secondary",isDisabled:c=!1,onKeyUp:s},d)=>l(v,{role:"presentation",children:l(u,{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=>s&&s(i,o),ref:d,children:r})}));m.displayName="Tab";export{m as default};
+`,n=v(({label:t,index:o=-1,isActive:e=!1,onClick:r,activeColor:a="secondary",activeColorShade:l="mainAlt",isDisabled:m=!1,onKeyUp:s},p)=>c($,{role:"presentation",children:c(h,{tabIndex:e?0:-1,isActive:e,onClick:i=>r&&r(i,o),$activeColor:a,$activeColorShade:l,isDisabled:m,variant:"flat",color:e?a:"neutral",colorShade:l,id:`tab-${o}`,role:"tab","aria-selected":e?"true":"false","aria-controls":`tabpanel-${o}`,onKeyUp:i=>s&&s(i,o),ref:p,children:t})}));n.displayName="Tab";export{n as default};

package/esm/components/Tabs/Tabs.js

@@ -1,8 +1,8 @@
-import{jsx as s,jsxs as x}from"react/jsx-runtime";import{Children as R,useState as W,useRef as B,useEffect as U}from"react";import q from"./Tab.js";import d from"styled-components";import{mq as E}from"../../shared/media-queries.js";import{UnmountClosed as K}from"react-collapse";import{Title as L}from"../../typography/Heading/index.js";import"../Button/index.js";import"../../theme.js";import"../Spinner/index.js";import"../../utils/utils.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const O=d.div`
+import{jsx as n,jsxs as x}from"react/jsx-runtime";import{Children as W,useState as I,useRef as S,useEffect as U}from"react";import q from"./Tab.js";import s from"styled-components";import{mq as E}from"../../shared/media-queries.js";import{UnmountClosed as K}from"react-collapse";import{Title as L}from"../../typography/Heading/index.js";import"../Button/index.js";import"../../theme.js";import"../Spinner/index.js";import"../../utils/utils.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const O=s.div`
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
-`,S=d.ul`
+`,z=s.ul`
   width: 100%;
   padding: 0;
   margin: 0.5rem 0;
@@ -11,18 +11,18 @@ import{jsx as s,jsxs as x}from"react/jsx-runtime";import{Children as R,useState
   justify-content: ${({justify:o})=>o};
   align-items: center;
 
-  ${({theme:o,fullWidthBorder:m,borderColor:l})=>m?`border-bottom: 3px solid ${o.colors.grayscaleToned[l]};`:`& > li {
-          border-bottom: 3px solid ${o.colors.grayscaleToned[l]};
+  ${({theme:o,fullWidthBorder:m,borderColor:p})=>m?`border-bottom: 3px solid ${o.colors.grayscaleToned[p]};`:`& > li {
+          border-bottom: 3px solid ${o.colors.grayscaleToned[p]};
         }`}
 
   ${E(null,"mobileL")} {
     flex-direction: column;
     justify-content: ${({justify:o})=>o};
   }
-`,F=d(L)`
+`,F=s(L)`
   margin: 0;
-`,H=d.div`
+`,H=s.div`
   display: flex;
-`,N=d.div`
+`,N=s.div`
   padding: 0.5rem 0;
-`,z=d.div``,g=({activeColor:o="secondary",justify:m="end",activeIndex:l,initalActive:C,children:k=[],kbNavAutoOpen:u=!0,onTabClick:$,fullWidthBorder:j=!0,borderColor:A="light6",headline:h})=>{const n=R.map(k,r=>r),[a,c]=W(()=>C??n.findIndex(r=>!r.props.isDisabled)),y=B([]),D=!!n[a]?.props?.children,w=(r,e)=>{r.preventDefault(),c(e)};U(()=>{typeof l<"u"&&c(l)},[l]);const T=(r,e)=>{if(r.preventDefault(),r.key==="Enter"&&!u&&c(e),r.key==="ArrowLeft"||r.key==="ArrowRight"){const t=u?a:e,i=r.key==="ArrowRight",p=i?t+1:0,I=i?n.length:t,v=n.slice(p,I);i||v.reverse();const b=v.findIndex(f=>!f.props.isDisabled);if(b!==-1){const f=i?t+(b+1):t-(b+1);u&&c(f),y.current[f].focus()}}};return s(O,{children:x(K,{isOpened:!0,children:[x(S,{fullWidthBorder:j,justify:h?"space-between":m,role:"tablist",borderColor:A,children:[h&&s(F,{children:h}),s(H,{children:n.map((r,e)=>{if(!r)return null;const t=a===e;return s(q,{label:r.props.label,isDisabled:r.props.isDisabled,index:e,id:e,isActive:a===e,activeColor:o,onClick:(i,p)=>{!t&&!r.props.isDisabled&&(r.props.onClick?.(i,p),$?.(i,p),w(i,p))},onKeyUp:T,ref:i=>y.current[e]=i},e)})})]}),D&&s(N,{children:n.map((r,e)=>{const t=r.props.children&&a===e;return s(z,{id:`tabpanel-${e}`,role:"tabpanel","aria-labelledby":`tab-${e}`,"aria-hidden":t?"false":"true",children:t&&r.props.children},e)})})]})})};export{g as Tabs,g as default};
+`,G=s.div``,g=({activeColor:o="secondary",activeColorShade:m="mainAlt",justify:p="end",activeIndex:u,initalActive:k,children:j=[],kbNavAutoOpen:h=!0,onTabClick:A,fullWidthBorder:$=!0,borderColor:D="light6",headline:b})=>{const l=W.map(j,e=>e),[d,c]=I(()=>k??l.findIndex(e=>!e.props.isDisabled)),v=S([]),w=!!l[d]?.props?.children,T=(e,r)=>{e.preventDefault(),c(r)};U(()=>{typeof u<"u"&&c(u)},[u]);const R=(e,r)=>{if(e.preventDefault(),(e.key==="Enter"||e.key===" ")&&!h&&c(r),e.key==="ArrowLeft"||e.key==="ArrowRight"){const t=h?d:r,i=e.key==="ArrowRight",a=i?t+1:0,B=i?l.length:t,C=l.slice(a,B);i||C.reverse();const y=C.findIndex(f=>!f.props.isDisabled);if(y!==-1){const f=i?t+(y+1):t-(y+1);h&&c(f),v.current[f].focus()}}};return n(O,{children:x(K,{isOpened:!0,children:[x(z,{fullWidthBorder:$,justify:b?"space-between":p,role:"tablist",borderColor:D,children:[b&&n(F,{children:b}),n(H,{children:l.map((e,r)=>{if(!e)return null;const t=d===r;return n(q,{label:e.props.label,isDisabled:e.props.isDisabled,index:r,id:r,isActive:d===r,activeColor:o,activeColorShade:m,onClick:(i,a)=>{!t&&!e.props.isDisabled&&(e.props.onClick?.(i,a),A?.(i,a),T(i,a))},onKeyUp:R,ref:i=>v.current[r]=i},r)})})]}),w&&n(N,{children:l.map((e,r)=>{const t=e.props.children&&d===r;return n(G,{id:`tabpanel-${r}`,role:"tabpanel","aria-labelledby":`tab-${r}`,"aria-hidden":t?"false":"true",children:t&&e.props.children},r)})})]})})};export{g as Tabs,g as default};

package/esm/components/TextArea/index.js

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

package/esm/components/Toggle/index.js

@@ -1,10 +1,10 @@
-import{jsxs as p,jsx as r}from"react/jsx-runtime";import{useState as d,useEffect as m}from"react";import l from"styled-components";import c from"../../theme.js";const h=l.div`
+import{jsxs as h,jsx as c}from"react/jsx-runtime";import{useState as p,useEffect as m}from"react";import a from"styled-components";const g=a.div`
   display: flex;
   position: relative;
   border-top: ${({theme:o})=>`1px solid ${o.colors.grayscaleToned.light6}`};
   border-bottom: ${({theme:o})=>`1px solid ${o.colors.grayscaleToned.light6}`};
   padding: 4px;
-`,s=l.div`
+`,s=a.div`
   font-family: ${({theme:o})=>o.typography.fontBaseFamily};
   font-weight: ${({theme:o})=>o.typography.fontBaseRegularWeight};
   display: flex;
@@ -16,10 +16,10 @@ import{jsxs as p,jsx as r}from"react/jsx-runtime";import{useState as d,useEffect
   position: relative;
   cursor: pointer;
 
-  color: ${o=>o.isActive?c.colors.text.light:c.colors.text.dark};
-`,f=l.div`
+  color: ${({theme:o,isActive:e})=>e?o.colors.text.light:o.colors.text.dark};
+`,f=a.div`
   z-index: 0;
-  background-color: ${o=>c.colors[o.color].main};
+  background-color: ${({theme:o,$color:e,$colorShade:i})=>o.colors[e][i]};
   position: absolute;
 
   border-radius: 0.25rem;
@@ -36,4 +36,4 @@ import{jsxs as p,jsx as r}from"react/jsx-runtime";import{useState as d,useEffect
   `}
 
   ${o=>!o.active&&"display: none;"}
-`,g=({onChange:o,...e})=>{const[i,t]=d(e.active);m(()=>{t(e.active)},[e.active]);const a=()=>{t("LEFT"),o("LEFT")},n=()=>{t("RIGHT"),o("RIGHT")};return p(h,{...e,children:[r(f,{color:e.color,active:i}),r(s,{onClick:a,isActive:i==="LEFT",color:e.color,children:e.left}),r(s,{onClick:n,isActive:i==="RIGHT",color:e.color,children:e.right})]})};export{g as Toggle};
+`,x=({onChange:o,color:e,colorShade:i="mainAlt",...t})=>{const[r,l]=p(t.active);m(()=>{l(t.active)},[t.active]);const n=()=>{l("LEFT"),o("LEFT")},d=()=>{l("RIGHT"),o("RIGHT")};return h(g,{children:[c(f,{$color:e,$colorShade:i,active:r}),c(s,{onClick:n,isActive:r==="LEFT",children:t.left}),c(s,{onClick:d,isActive:r==="RIGHT",children:t.right})]})};export{x as Toggle};

package/esm/components/ValuationRange/index.js

@@ -1,43 +1,43 @@
-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`
+import{jsxs as t,jsx as r,Fragment as b}from"react/jsx-runtime";import i from"styled-components";import{Caption as g}from"../../typography/BodyText/index.js";import{Subtitle as p,Title as u}from"../../typography/Heading/index.js";import"../../shared/media-queries.js";const a=({theme:e,$color:l,$colorShade:d,$isDisabled:o})=>o?e.colors[l].lighter:e.colors[l][d],v=i.div`
   margin: 0 1rem;
-`,v=r.div`
+`,w=i.div`
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: flex-end;
-`,b=r.div`
+`,S=i.div`
   white-space: nowrap;
-  color: ${({theme:e,$color:t,$type:o})=>e.colors[t][o]};
-`,w=r(p)`
+  color: ${e=>a(e)};
+`,y=i(p)`
   color: ${({theme:e})=>e.colors.text.disabled};
-`,j=r.div`
+`,D=i.div`
   width: 100%;
   align-items: center;
   display: flex;
   padding: 0.25rem 0;
-`,m=r(y).attrs({as:"span"})`
+`,$=i(g).attrs({as:"span"})`
   white-space: nowrap;
   width: 20%;
   text-align: center;
   color: ${({theme:e})=>e.colors.text.disabled};
-`,S=r.div`
+`,j=i.div`
   width: 80%;
-  border-left: ${({theme:e,$color:t,$type:o})=>`1px solid ${e.colors[t][o]}`};
-  border-right: ${({theme:e,$color:t,$type:o})=>`1px solid ${e.colors[t][o]}`};
+  border-left: 1px solid ${e=>a(e)};
+  border-right: 1px solid ${e=>a(e)};
   height: 0.7rem;
   display: flex;
   position: relative;
   align-items: flex-end;
   justify-content: center;
   margin: auto;
-`,k=r.div`
+`,k=i.div`
   height: 0.33rem;
   width: 100%;
-  background: ${({theme:e,$color:t,$type:o})=>e.colors[t][o]};
-`,C=r.div`
-  background: ${({theme:e,$color:t,$type:o})=>e.colors[t][o]};
+  background: ${e=>a(e)};
+`,A=i.div`
+  background: ${e=>a(e)};
   width: 1px;
   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 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};
+`,F=({intervalMin:e=0,intervalMax:l=0,value:d=0,color:o="primary",colorShade:n="mainAlt",noApproximateSymbol:f=!1,isDisabled:s=!1,manualValuationText:c=""})=>{const h=new Intl.NumberFormat("sv-SE"),m=e>0&&l>0&&!c,x=d>0&&!c;return t(v,{children:[t(D,{children:[r($,{children:m?`- ${h.format(e)}`:""}),r(w,{children:t(S,{$color:o,$colorShade:n,$isDisabled:s,children:[x&&t(b,{children:[r(u,{as:"span",children:`${f?"":"~ "}${h.format(d)} `}),r(p,{as:"span",children:"kr"})]}),c&&r(y,{as:"span",children:c})]})}),r($,{children:m?`+ ${h.format(l)}`:""})]}),t(j,{$color:o,$colorShade:n,$isDisabled:s,children:[r(k,{$color:o,$colorShade:n,$isDisabled:s}),r(A,{$color:o,$colorShade:n,$isDisabled:s})]})]})};export{F as default};

package/esm/index.js

@@ -1 +1 @@
-import{default as P}from"./theme.js";import{mediaQueries as R,mq as A,mqNumberSizes as M,mqSizes as N}from"./shared/media-queries.js";import{Accordion as H}from"./components/Accordion/index.js";import{Button as U}from"./components/Button/index.js";import{default as K}from"./components/IconButton.js";import{TextField as Q}from"./components/Textfield/index.js";import{TextArea as q}from"./components/TextArea/index.js";import{Tabs as Y}from"./components/Tabs/Tabs.js";import{default as J}from"./components/Tabs/Tab.js";import{ErrorMessage as Z}from"./components/ErrorMessage/index.js";import{default as $}from"./components/Spinner/index.js";import{Modal as eo}from"./components/Modal/index.js";import{Dialog as ro}from"./components/Dialog/index.js";import{OffCanvas as fo}from"./components/OffCanvas/index.js";import{CheckBox as po}from"./components/CheckBox/index.js";import{Snackbar as no}from"./components/Snackbar/index.js";import{default as so}from"./components/Spacer/index.js";import{default as co}from"./components/Stack/index.js";import{default as io}from"./components/Flex/index.js";import{Select as yo}from"./components/Select/index.js";import{default as Co}from"./components/ToggleArrow/index.js";import{default as Bo}from"./components/ListItem/index.js";import{default as Fo}from"./components/Table/index.js";import{default as wo}from"./components/EditRow/index.js";import{RadioButton as bo}from"./components/RadioButton/index.js";import{SpinnerThin as Po}from"./components/SpinnerThin/index.js";import{default as Ro}from"./components/Stamp/index.js";import{TimePicker as Mo}from"./components/TimePicker/index.js";import{default as Eo}from"./components/Hero/index.js";import{DayPicker as Vo}from"./components/DayPicker/index.js";import{Logo as Go}from"./components/Logo/index.js";import{Badge as Oo}from"./components/Badge/index.js";import{Toggle as Wo}from"./components/Toggle/index.js";import{Stepper as zo}from"./components/Stepper/index.js";import{StepperAccordion as jo}from"./components/StepperAccordion/index.js";import{Card as Xo}from"./components/Card/index.js";import{Switcher as _o}from"./components/Switcher/index.js";import{NotificationButton as oe}from"./components/NotificationButton/index.js";import{default as te}from"./components/ValuationRange/index.js";import{Chip as ae}from"./components/Chip/index.js";import{default as le}from"./components/Breadcrumbs/index.js";import{default as me}from"./components/Message/index.js";import{default as de}from"./components/RegistrationPlate/index.js";import{MenuItem as se}from"./components/MenuItem/index.js";import{default as ce}from"./icons/components/AddIcon.js";import{default as ie}from"./icons/components/AlertIcon.js";import{default as ye}from"./icons/components/ArrowDownIcon.js";import{default as Ce}from"./icons/components/ArrowLeftIcon.js";import{default as Be}from"./icons/components/ArrowRightIcon.js";import{default as Fe}from"./icons/components/ArrowUpIcon.js";import{default as we}from"./icons/components/AtvIcon.js";import{default as be}from"./icons/components/AuctionIcon.js";import{default as Pe}from"./icons/components/BackIcon.js";import{default as Re}from"./icons/components/BankidIcon.js";import{default as Me}from"./icons/components/BidIcon.js";import{default as Ee}from"./icons/components/BodyIcon.js";import{default as Ve}from"./icons/components/BreaksIcon.js";import{default as Ge}from"./icons/components/CabIcon.js";import{default as Oe}from"./icons/components/CalendarIcon.js";import{default as We}from"./icons/components/CameraIcon.js";import{default as ze}from"./icons/components/CamperIcon.js";import{default as je}from"./icons/components/CancelCircleIcon.js";import{default as Xe}from"./icons/components/CancelIcon.js";import{default as _e}from"./icons/components/CarIcon.js";import{default as ot}from"./icons/components/CarServiceIcon.js";import{default as tt}from"./icons/components/CaravanIcon.js";import{default as at}from"./icons/components/CertifiedIcon.js";import{default as lt}from"./icons/components/ChatIcon.js";import{default as mt}from"./icons/components/CheckCircleIcon.js";import{default as dt}from"./icons/components/CheckFilledIcon.js";import{default as st}from"./icons/components/CheckIcon.js";import{default as ct}from"./icons/components/CheckmarkIcon.js";import{default as it}from"./icons/components/ClockIcon.js";import{default as yt}from"./icons/components/CloseIcon.js";import{default as Ct}from"./icons/components/CommentFilledIcon.js";import{default as Bt}from"./icons/components/CommentIcon.js";import{default as Ft}from"./icons/components/ConditioningIcon.js";import{default as wt}from"./icons/components/ContactIcon.js";import{default as bt}from"./icons/components/ControlNumberIcon.js";import{default as Pt}from"./icons/components/CopyIcon.js";import{default as Rt}from"./icons/components/CountdownIcon.js";import{default as Mt}from"./icons/components/CoupeIcon.js";import{default as Et}from"./icons/components/CraneIcon.js";import{default as Vt}from"./icons/components/CupIcon.js";import{default as Gt}from"./icons/components/DeleteIcon.js";import{default as Ot}from"./icons/components/DisplayIcon.js";import{default as Wt}from"./icons/components/DocumentIcon.js";import{default as zt}from"./icons/components/DownloadIcon.js";import{default as jt}from"./icons/components/EcoIcon.js";import{default as Xt}from"./icons/components/EditIcon.js";import{default as _t}from"./icons/components/EngineIcon.js";import{default as or}from"./icons/components/ErrorFilledIcon.js";import{default as tr}from"./icons/components/ErrorIcon.js";import{default as ar}from"./icons/components/EstoniaFlagIcon.js";import{default as lr}from"./icons/components/ExportIcon.js";import{default as mr}from"./icons/components/FacebookIcon.js";import{default as dr}from"./icons/components/FacilityIcon.js";import{default as sr}from"./icons/components/FavouriteFilledIcon.js";import{default as cr}from"./icons/components/FavouriteIcon.js";import{default as ir}from"./icons/components/FigmaIcon.js";import{default as yr}from"./icons/components/FilterIcon.js";import{default as Cr}from"./icons/components/FinanceIcon.js";import{default as Br}from"./icons/components/FinlandFlagIcon.js";import{default as Fr}from"./icons/components/FirstIcon.js";import{default as wr}from"./icons/components/FixedPriceIcon.js";import{default as br}from"./icons/components/FuelIcon.js";import{default as Pr}from"./icons/components/GearboxIcon.js";import{default as Rr}from"./icons/components/GetPaidIcon.js";import{default as Mr}from"./icons/components/GridViewIcon.js";import{default as Er}from"./icons/components/HatchbackIcon.js";import{default as Vr}from"./icons/components/HelpIcon.js";import{default as Gr}from"./icons/components/HistoryIcon.js";import{default as Or}from"./icons/components/HomeDeliveryIcon.js";import{default as Wr}from"./icons/components/IdIcon.js";import{default as zr}from"./icons/components/ImageIcon.js";import{default as jr}from"./icons/components/InfoIcon.js";import{default as Xr}from"./icons/components/InstagramIcon.js";import{default as _r}from"./icons/components/InsuranceIcon.js";import{default as oa}from"./icons/components/InteriorIcon.js";import{default as ta}from"./icons/components/KvdIcon.js";import{default as aa}from"./icons/components/KvdTestIcon.js";import{default as la}from"./icons/components/KvdproIcon.js";import{default as ma}from"./icons/components/LastIcon.js";import{default as da}from"./icons/components/LeaderIcon.js";import{default as sa}from"./icons/components/LinkedinIcon.js";import{default as ca}from"./icons/components/ListViewIcon.js";import{default as ia}from"./icons/components/LocationIcon.js";import{default as ya}from"./icons/components/MailIcon.js";import{default as Ca}from"./icons/components/MenuIcon.js";import{default as Ba}from"./icons/components/MileageIcon.js";import{default as Fa}from"./icons/components/MinivanIcon.js";import{default as wa}from"./icons/components/ModelYearIcon.js";import{default as ba}from"./icons/components/MoreIcon.js";import{default as Pa}from"./icons/components/MotorbikeIcon.js";import{default as Ra}from"./icons/components/NavigationIcon.js";import{default as Ma}from"./icons/components/NewIcon.js";import{default as Ea}from"./icons/components/NextFilledIcon.js";import{default as Va}from"./icons/components/NextIcon.js";import{default as Ga}from"./icons/components/NotificationIcon.js";import{default as Oa}from"./icons/components/OpenInNewIcon.js";import{default as Wa}from"./icons/components/PayementIcon.js";import{default as za}from"./icons/components/PercentIcon.js";import{default as ja}from"./icons/components/PhoneIcon.js";import{default as Xa}from"./icons/components/PickUpIcon.js";import{default as _a}from"./icons/components/Pickup.js";import{default as of}from"./icons/components/PlayIcon.js";import{default as tf}from"./icons/components/PlugIcon.js";import{default as af}from"./icons/components/PolandFlagIcon.js";import{default as lf}from"./icons/components/PreviousFilledIcon.js";import{default as mf}from"./icons/components/PreviousIcon.js";import{default as df}from"./icons/components/PrintIcon.js";import{default as sf}from"./icons/components/QuoteIcon.js";import{default as cf}from"./icons/components/RatingIcon.js";import{default as Sf}from"./icons/components/ReleasingIcon.js";import{default as gf}from"./icons/components/ReorderIcon.js";import{default as Tf}from"./icons/components/RestartIcon.js";import{default as kf}from"./icons/components/SalesOfferIcon.js";import{default as hf}from"./icons/components/SavedSearchIcon.js";import{default as vf}from"./icons/components/ScheduleIcon.js";import{default as Lf}from"./icons/components/SearchIcon.js";import{default as Df}from"./icons/components/SedanIcon.js";import{default as Af}from"./icons/components/SellFilledIcon.js";import{default as Nf}from"./icons/components/SellIcon.js";import{default as Hf}from"./icons/components/SettingsIcon.js";import{default as Uf}from"./icons/components/ShareIcon.js";import{default as Kf}from"./icons/components/ShowLessIcon.js";import{default as Qf}from"./icons/components/ShowMoreIcon.js";import{default as qf}from"./icons/components/SignInIcon.js";import{default as Yf}from"./icons/components/SignOutIcon.js";import{default as Jf}from"./icons/components/SlackIcon.js";import{default as Zf}from"./icons/components/SmartphoneIcon.js";import{default as $f}from"./icons/components/SmileIcon.js";import{default as el}from"./icons/components/SnowmobileIcon.js";import{default as rl}from"./icons/components/SortColumnIcon.js";import{default as fl}from"./icons/components/SortIcon.js";import{default as pl}from"./icons/components/StorageIcon.js";import{default as nl}from"./icons/components/StoreIcon.js";import{default as ul}from"./icons/components/SuvIcon.js";import{default as xl}from"./icons/components/SwedishFlagIcon.js";import{default as Il}from"./icons/components/ThreeSixtyIcon.js";import{default as Sl}from"./icons/components/TractorIcon.js";import{default as gl}from"./icons/components/TrailerIcon.js";import{default as Tl}from"./icons/components/TransportIcon.js";import{default as kl}from"./icons/components/TruckIcon.js";import{default as hl}from"./icons/components/TwitterIcon.js";import{default as vl}from"./icons/components/TyresIcon.js";import{default as Ll}from"./icons/components/UnitedKingdomFlagIcon.js";import{default as Dl}from"./icons/components/UploadIcon.js";import{default as Al}from"./icons/components/UserIcon.js";import{default as Nl}from"./icons/components/ValuationIcon.js";import{default as Hl}from"./icons/components/VanIcon.js";import{default as Ul}from"./icons/components/VersionIcon.js";import{default as Kl}from"./icons/components/ViewsIcon.js";import{default as Ql}from"./icons/components/WagonIcon.js";import{default as ql}from"./icons/components/WarningIcon.js";import{default as Yl}from"./icons/components/WarrantyIcon.js";import{default as Jl}from"./icons/components/YoutubeIcon.js";import{useDynamicScript as Zl}from"./hooks/useDynamicScript.js";import{Display1 as $l,Display1Style as op,Display2 as ep,Display2Style as tp,Display3 as rp,Display3Style as ap,Headline as fp,HeadlineStyle as lp,Subtitle as pp,SubtitleStyle as mp,TinyTitleBold as np,TinyTitleBoldStyle as dp,TinyTitleRegular as up,TinyTitleRegularStyle as sp,Title as xp,TitleStyle as cp}from"./typography/Heading/index.js";import{BodyLink as ip,BodyLinkStyle as Sp,BodyText as yp,BodyTextStyle as gp,Caption as Cp,CaptionLink as Tp,CaptionLinkStyle as Bp,CaptionStyle as kp,Quote as Fp,QuoteStyle as hp,Status as wp,StatusStyle as vp}from"./typography/BodyText/index.js";import{ButtonLarge as Lp,ButtonLargeTextStyle as Pp,Button as Dp,ButtonRegularTextStyle as Rp,ButtonSmall as Ap,ButtonSmallTextStyle as Mp}from"./typography/ButtonText/index.js";import{hexToRGB as Ep,resetButtonStyle as Hp,resolveColorWithNeutral as Vp}from"./utils/utils.js";import"react/jsx-runtime";import"react";import"styled-components";import"react-collapse";import"./components/Button/styles.js";import"./components/FieldLabel.js";import"./shared/helpers.js";import"react-dom";import"react-transition-group";import"./components/Icons/Close.js";import"./components/OffCanvas/Overlay.js";import"./components/OffCanvas/useClickOutside.js";import"./components/Icons/CheckCircle.js";import"./components/Icons/ErrorCircle.js";import"./components/Icons/InfoCircle.js";import"react-select";import"./shared/constants.js";import"react-day-picker";import"./components/DayPicker/DayPickerNavBar.js";import"./components/Icons/Arrow.js";import"./components/DayPicker/localeUtils.js";import"./components/DayPicker/style.js";import"./components/Logo/LogoSv.js";import"./components/Logo/LogoEn.js";import"./components/Icons/CheckIcon.js";import"./components/Chip/styles.js";import"./components/Breadcrumbs/BreadcrumbsItem.js";import"./components/RegistrationPlate/EuFlagIcon.js";export{H as Accordion,ce as AddIcon,ie as AlertIcon,ye as ArrowDownIcon,Ce as ArrowLeftIcon,Be as ArrowRightIcon,Fe as ArrowUpIcon,we as AtvIcon,be as AuctionIcon,Pe as BackIcon,Oo as Badge,Re as BankidIcon,Me as BidIcon,Ee as BodyIcon,ip as BodyLink,Sp as BodyLinkStyle,yp as BodyText,gp as BodyTextStyle,le as Breadcrumbs,Ve as BreaksIcon,U as Button,Lp as ButtonLargeText,Pp as ButtonLargeTextStyle,Dp as ButtonRegularText,Rp as ButtonRegularTextStyle,Ap as ButtonSmallText,Mp as ButtonSmallTextStyle,Ge as CabIcon,Oe as CalendarIcon,We as CameraIcon,ze as CamperIcon,je as CancelCircleIcon,Xe as CancelIcon,Cp as Caption,Tp as CaptionLink,Bp as CaptionLinkStyle,kp as CaptionStyle,_e as CarIcon,ot as CarServiceIcon,tt as CaravanIcon,Xo as Card,at as CertifiedIcon,lt as ChatIcon,po as CheckBox,mt as CheckCircleIcon,dt as CheckFilledIcon,st as CheckIcon,ct as CheckmarkIcon,ae as Chip,it as ClockIcon,yt as CloseIcon,Ct as CommentFilledIcon,Bt as CommentIcon,Ft as ConditioningIcon,wt as ContactIcon,bt as ControlNumberIcon,Pt as CopyIcon,Rt as CountdownIcon,Mt as CoupeIcon,Et as CraneIcon,Vt as CupIcon,Vo as DayPicker,Gt as DeleteIcon,ro as Dialog,$l as Display1,op as Display1Style,ep as Display2,tp as Display2Style,rp as Display3,ap as Display3Style,Ot as DisplayIcon,Wt as DocumentIcon,zt as DownloadIcon,jt as EcoIcon,Xt as EditIcon,wo as EditRow,_t as EngineIcon,or as ErrorFilledIcon,tr as ErrorIcon,Z as ErrorMessage,ar as EstoniaFlagIcon,lr as ExportIcon,mr as FacebookIcon,dr as FacilityIcon,sr as FavouriteFilledIcon,cr as FavouriteIcon,ir as FigmaIcon,yr as FilterIcon,Cr as FinanceIcon,Br as FinlandFlagIcon,Fr as FirstIcon,wr as FixedPriceIcon,io as Flex,br as FuelIcon,Pr as GearboxIcon,Rr as GetPaidIcon,Mr as GridViewIcon,Er as HatchbackIcon,fp as Headline,lp as HeadlineStyle,Vr as HelpIcon,Eo as Hero,Gr as HistoryIcon,Or as HomeDeliveryIcon,K as IconButton,Wr as IdIcon,zr as ImageIcon,jr as InfoIcon,Xr as InstagramIcon,_r as InsuranceIcon,oa as InteriorIcon,ta as KvdIcon,aa as KvdTestIcon,la as KvdproIcon,ma as LastIcon,da as LeaderIcon,sa as LinkedinIcon,Bo as ListItem,ca as ListViewIcon,ia as LocationIcon,Go as Logo,ya as MailIcon,Ca as MenuIcon,se as MenuItem,me as Message,Ba as MileageIcon,Fa as MinivanIcon,eo as Modal,wa as ModelYearIcon,ba as MoreIcon,Pa as MotorbikeIcon,Ra as NavigationIcon,Ma as NewIcon,Ea as NextFilledIcon,Va as NextIcon,oe as NotificationButton,Ga as NotificationIcon,fo as OffCanvas,Oa as OpenInNewIcon,Wa as PayementIcon,za as PercentIcon,ja as PhoneIcon,Xa as PickUpIcon,_a as Pickup,of as PlayIcon,tf as PlugIcon,af as PolandFlagIcon,lf as PreviousFilledIcon,mf as PreviousIcon,df as PrintIcon,Fp as Quote,sf as QuoteIcon,hp as QuoteStyle,bo as RadioButton,cf as RatingIcon,de as RegistrationPlate,Sf as ReleasingIcon,gf as ReorderIcon,Tf as RestartIcon,kf as SalesOfferIcon,hf as SavedSearchIcon,vf as ScheduleIcon,Lf as SearchIcon,Df as SedanIcon,yo as Select,Af as SellFilledIcon,Nf as SellIcon,Hf as SettingsIcon,Uf as ShareIcon,Kf as ShowLessIcon,Qf as ShowMoreIcon,qf as SignInIcon,Yf as SignOutIcon,Jf as SlackIcon,Zf as SmartphoneIcon,$f as SmileIcon,no as Snackbar,el as SnowmobileIcon,rl as SortColumnIcon,fl as SortIcon,so as Spacer,$ as Spinner,Po as SpinnerThin,co as Stack,Ro as Stamp,wp as Status,vp as StatusStyle,zo as Stepper,jo as StepperAccordion,pl as StorageIcon,nl as StoreIcon,pp as Subtitle,mp as SubtitleStyle,ul as SuvIcon,xl as SwedishFlagIcon,_o as Switcher,J as Tab,Fo as Table,Y as Tabs,q as TextArea,Q as TextField,Il as ThreeSixtyIcon,Mo as TimePicker,np as TinyTitleBold,dp as TinyTitleBoldStyle,up as TinyTitleRegular,sp as TinyTitleRegularStyle,xp as Title,cp as TitleStyle,Wo as Toggle,Co as ToggleArrow,Sl as TractorIcon,gl as TrailerIcon,Tl as TransportIcon,kl as TruckIcon,hl as TwitterIcon,vl as TyresIcon,Ll as UnitedKingdomFlagIcon,Dl as UploadIcon,Al as UserIcon,Nl as ValuationIcon,te as ValuationRange,Hl as VanIcon,Ul as VersionIcon,Kl as ViewsIcon,Ql as WagonIcon,ql as WarningIcon,Yl as WarrantyIcon,Jl as YoutubeIcon,Ep as hexToRGB,R as mediaQueries,A as mq,M as mqNumberSizes,N as mqSizes,Hp as resetButtonStyle,Vp as resolveColorWithNeutral,P as theme,Zl as useDynamicScript};
+import{default as D}from"./theme.js";import{mediaQueries as R,mq as A,mqNumberSizes as M,mqSizes as N}from"./shared/media-queries.js";import{Accordion as H}from"./components/Accordion/index.js";import{Button as U}from"./components/Button/index.js";import{default as K}from"./components/IconButton.js";import{TextField as Q}from"./components/Textfield/index.js";import{TextArea as q}from"./components/TextArea/index.js";import{Tabs as Y}from"./components/Tabs/Tabs.js";import{default as J}from"./components/Tabs/Tab.js";import{ErrorMessage as Z}from"./components/ErrorMessage/index.js";import{default as $}from"./components/Spinner/index.js";import{Modal as eo}from"./components/Modal/index.js";import{Dialog as ro}from"./components/Dialog/index.js";import{OffCanvas as fo}from"./components/OffCanvas/index.js";import{CheckBox as po}from"./components/CheckBox/index.js";import{Snackbar as no}from"./components/Snackbar/index.js";import{default as so}from"./components/Spacer/index.js";import{default as co}from"./components/Stack/index.js";import{default as io}from"./components/Flex/index.js";import{Select as yo}from"./components/Select/index.js";import{default as Co}from"./components/ToggleArrow/index.js";import{default as Bo}from"./components/ListItem/index.js";import{default as ko}from"./components/Table/index.js";import{default as wo}from"./components/EditRow/index.js";import{RadioButton as Lo}from"./components/RadioButton/index.js";import{SpinnerThin as Do}from"./components/SpinnerThin/index.js";import{default as Ro}from"./components/Stamp/index.js";import{TimePicker as Mo}from"./components/TimePicker/index.js";import{default as Eo}from"./components/Hero/index.js";import{DayPicker as Vo}from"./components/DayPicker/index.js";import{Logo as Go}from"./components/Logo/index.js";import{Badge as Oo}from"./components/Badge/index.js";import{Toggle as Wo}from"./components/Toggle/index.js";import{Stepper as zo}from"./components/Stepper/index.js";import{StepperAccordion as jo}from"./components/StepperAccordion/index.js";import{Card as Xo}from"./components/Card/index.js";import{Switcher as _o}from"./components/Switcher/index.js";import{NotificationButton as oe}from"./components/NotificationButton/index.js";import{default as te}from"./components/ValuationRange/index.js";import{Chip as ae}from"./components/Chip/index.js";import{default as le}from"./components/Breadcrumbs/index.js";import{default as me}from"./components/Message/index.js";import{default as de}from"./components/RegistrationPlate/index.js";import{MenuItem as se}from"./components/MenuItem/index.js";import{default as ce}from"./icons/components/AddIcon.js";import{default as ie}from"./icons/components/AlertIcon.js";import{default as ye}from"./icons/components/ArrowDownIcon.js";import{default as Ce}from"./icons/components/ArrowLeftIcon.js";import{default as Be}from"./icons/components/ArrowRightIcon.js";import{default as ke}from"./icons/components/ArrowUpIcon.js";import{default as we}from"./icons/components/AtvIcon.js";import{default as Le}from"./icons/components/AuctionIcon.js";import{default as De}from"./icons/components/BackIcon.js";import{default as Re}from"./icons/components/BankidIcon.js";import{default as Me}from"./icons/components/BidIcon.js";import{default as Ee}from"./icons/components/BodyIcon.js";import{default as Ve}from"./icons/components/BreaksIcon.js";import{default as Ge}from"./icons/components/CabIcon.js";import{default as Oe}from"./icons/components/CalendarIcon.js";import{default as We}from"./icons/components/CameraIcon.js";import{default as ze}from"./icons/components/CamperIcon.js";import{default as je}from"./icons/components/CancelCircleIcon.js";import{default as Xe}from"./icons/components/CancelIcon.js";import{default as _e}from"./icons/components/CarIcon.js";import{default as ot}from"./icons/components/CarServiceIcon.js";import{default as tt}from"./icons/components/CaravanIcon.js";import{default as at}from"./icons/components/CertifiedIcon.js";import{default as lt}from"./icons/components/ChatIcon.js";import{default as mt}from"./icons/components/CheckCircleIcon.js";import{default as dt}from"./icons/components/CheckFilledIcon.js";import{default as st}from"./icons/components/CheckIcon.js";import{default as ct}from"./icons/components/CheckmarkIcon.js";import{default as it}from"./icons/components/ClockIcon.js";import{default as yt}from"./icons/components/CloseIcon.js";import{default as Ct}from"./icons/components/CommentFilledIcon.js";import{default as Bt}from"./icons/components/CommentIcon.js";import{default as kt}from"./icons/components/ConditioningIcon.js";import{default as wt}from"./icons/components/ContactIcon.js";import{default as Lt}from"./icons/components/ControlNumberIcon.js";import{default as Dt}from"./icons/components/CopyIcon.js";import{default as Rt}from"./icons/components/CountdownIcon.js";import{default as Mt}from"./icons/components/CoupeIcon.js";import{default as Et}from"./icons/components/CraneIcon.js";import{default as Vt}from"./icons/components/CupIcon.js";import{default as Gt}from"./icons/components/DeleteIcon.js";import{default as Ot}from"./icons/components/DisplayIcon.js";import{default as Wt}from"./icons/components/DocumentIcon.js";import{default as zt}from"./icons/components/DownloadIcon.js";import{default as jt}from"./icons/components/EcoIcon.js";import{default as Xt}from"./icons/components/EditIcon.js";import{default as _t}from"./icons/components/EngineIcon.js";import{default as or}from"./icons/components/ErrorFilledIcon.js";import{default as tr}from"./icons/components/ErrorIcon.js";import{default as ar}from"./icons/components/EstoniaFlagIcon.js";import{default as lr}from"./icons/components/ExportIcon.js";import{default as mr}from"./icons/components/FacebookIcon.js";import{default as dr}from"./icons/components/FacilityIcon.js";import{default as sr}from"./icons/components/FavouriteFilledIcon.js";import{default as cr}from"./icons/components/FavouriteIcon.js";import{default as ir}from"./icons/components/FigmaIcon.js";import{default as yr}from"./icons/components/FilterIcon.js";import{default as Cr}from"./icons/components/FinanceIcon.js";import{default as Br}from"./icons/components/FinlandFlagIcon.js";import{default as kr}from"./icons/components/FirstIcon.js";import{default as wr}from"./icons/components/FixedPriceIcon.js";import{default as Lr}from"./icons/components/FuelIcon.js";import{default as Dr}from"./icons/components/GearboxIcon.js";import{default as Rr}from"./icons/components/GetPaidIcon.js";import{default as Mr}from"./icons/components/GridViewIcon.js";import{default as Er}from"./icons/components/HatchbackIcon.js";import{default as Vr}from"./icons/components/HelpIcon.js";import{default as Gr}from"./icons/components/HistoryIcon.js";import{default as Or}from"./icons/components/HomeDeliveryIcon.js";import{default as Wr}from"./icons/components/IdIcon.js";import{default as zr}from"./icons/components/ImageIcon.js";import{default as jr}from"./icons/components/InfoIcon.js";import{default as Xr}from"./icons/components/InstagramIcon.js";import{default as _r}from"./icons/components/InsuranceIcon.js";import{default as oa}from"./icons/components/InteriorIcon.js";import{default as ta}from"./icons/components/KvdIcon.js";import{default as aa}from"./icons/components/KvdTestIcon.js";import{default as la}from"./icons/components/KvdproIcon.js";import{default as ma}from"./icons/components/LastIcon.js";import{default as da}from"./icons/components/LeaderIcon.js";import{default as sa}from"./icons/components/LinkedinIcon.js";import{default as ca}from"./icons/components/ListViewIcon.js";import{default as ia}from"./icons/components/LocationIcon.js";import{default as ya}from"./icons/components/MailIcon.js";import{default as Ca}from"./icons/components/MenuIcon.js";import{default as Ba}from"./icons/components/MileageIcon.js";import{default as ka}from"./icons/components/MinivanIcon.js";import{default as wa}from"./icons/components/ModelYearIcon.js";import{default as La}from"./icons/components/MoreIcon.js";import{default as Da}from"./icons/components/MotorbikeIcon.js";import{default as Ra}from"./icons/components/NavigationIcon.js";import{default as Ma}from"./icons/components/NewIcon.js";import{default as Ea}from"./icons/components/NextFilledIcon.js";import{default as Va}from"./icons/components/NextIcon.js";import{default as Ga}from"./icons/components/NotificationIcon.js";import{default as Oa}from"./icons/components/OpenInNewIcon.js";import{default as Wa}from"./icons/components/PayementIcon.js";import{default as za}from"./icons/components/PercentIcon.js";import{default as ja}from"./icons/components/PhoneIcon.js";import{default as Xa}from"./icons/components/PickUpIcon.js";import{default as _a}from"./icons/components/Pickup.js";import{default as of}from"./icons/components/PlayIcon.js";import{default as tf}from"./icons/components/PlugIcon.js";import{default as af}from"./icons/components/PolandFlagIcon.js";import{default as lf}from"./icons/components/PreviousFilledIcon.js";import{default as mf}from"./icons/components/PreviousIcon.js";import{default as df}from"./icons/components/PrintIcon.js";import{default as sf}from"./icons/components/QuoteIcon.js";import{default as cf}from"./icons/components/RatingIcon.js";import{default as Sf}from"./icons/components/ReleasingIcon.js";import{default as gf}from"./icons/components/ReorderIcon.js";import{default as Tf}from"./icons/components/RestartIcon.js";import{default as hf}from"./icons/components/SalesOfferIcon.js";import{default as Ff}from"./icons/components/SavedSearchIcon.js";import{default as vf}from"./icons/components/ScheduleIcon.js";import{default as bf}from"./icons/components/SearchIcon.js";import{default as Pf}from"./icons/components/SedanIcon.js";import{default as Af}from"./icons/components/SellFilledIcon.js";import{default as Nf}from"./icons/components/SellIcon.js";import{default as Hf}from"./icons/components/SettingsIcon.js";import{default as Uf}from"./icons/components/ShareIcon.js";import{default as Kf}from"./icons/components/ShowLessIcon.js";import{default as Qf}from"./icons/components/ShowMoreIcon.js";import{default as qf}from"./icons/components/SignInIcon.js";import{default as Yf}from"./icons/components/SignOutIcon.js";import{default as Jf}from"./icons/components/SlackIcon.js";import{default as Zf}from"./icons/components/SmartphoneIcon.js";import{default as $f}from"./icons/components/SmileIcon.js";import{default as el}from"./icons/components/SnowmobileIcon.js";import{default as rl}from"./icons/components/SortColumnIcon.js";import{default as fl}from"./icons/components/SortIcon.js";import{default as pl}from"./icons/components/StorageIcon.js";import{default as nl}from"./icons/components/StoreIcon.js";import{default as ul}from"./icons/components/SuvIcon.js";import{default as xl}from"./icons/components/SwedishFlagIcon.js";import{default as Il}from"./icons/components/ThreeSixtyIcon.js";import{default as Sl}from"./icons/components/TractorIcon.js";import{default as gl}from"./icons/components/TrailerIcon.js";import{default as Tl}from"./icons/components/TransportIcon.js";import{default as hl}from"./icons/components/TruckIcon.js";import{default as Fl}from"./icons/components/TwitterIcon.js";import{default as vl}from"./icons/components/TyresIcon.js";import{default as bl}from"./icons/components/UnitedKingdomFlagIcon.js";import{default as Pl}from"./icons/components/UploadIcon.js";import{default as Al}from"./icons/components/UserIcon.js";import{default as Nl}from"./icons/components/ValuationIcon.js";import{default as Hl}from"./icons/components/VanIcon.js";import{default as Ul}from"./icons/components/VersionIcon.js";import{default as Kl}from"./icons/components/ViewsIcon.js";import{default as Ql}from"./icons/components/WagonIcon.js";import{default as ql}from"./icons/components/WarningIcon.js";import{default as Yl}from"./icons/components/WarrantyIcon.js";import{default as Jl}from"./icons/components/YoutubeIcon.js";import{useDynamicScript as Zl}from"./hooks/useDynamicScript.js";import{Display1 as $l,Display1Style as op,Display2 as ep,Display2Style as tp,Display3 as rp,Display3Style as ap,Headline as fp,HeadlineStyle as lp,Subtitle as pp,SubtitleStyle as mp,TinyTitleBold as np,TinyTitleBoldStyle as dp,TinyTitleRegular as up,TinyTitleRegularStyle as sp,Title as xp,TitleStyle as cp}from"./typography/Heading/index.js";import{BodyLink as ip,BodyLinkStyle as Sp,BodyText as yp,BodyTextStyle as gp,Caption as Cp,CaptionLink as Tp,CaptionLinkStyle as Bp,CaptionStyle as hp,Quote as kp,QuoteStyle as Fp,Status as wp,StatusStyle as vp}from"./typography/BodyText/index.js";import{ButtonLarge as bp,ButtonLargeTextStyle as Dp,Button as Pp,ButtonRegularTextStyle as Rp,ButtonSmall as Ap,ButtonSmallTextStyle as Mp}from"./typography/ButtonText/index.js";import{getDarkerShade as Ep,getLighterShade as Hp,hexToRGB as Vp,resetButtonStyle as Up,resolveColorWithNeutral as Gp}from"./utils/utils.js";import"react/jsx-runtime";import"react";import"styled-components";import"react-collapse";import"./components/Button/styles.js";import"./components/FieldLabel.js";import"./shared/helpers.js";import"react-dom";import"react-transition-group";import"./components/Icons/Close.js";import"./components/OffCanvas/Overlay.js";import"./components/OffCanvas/useClickOutside.js";import"./components/Icons/CheckCircle.js";import"./components/Icons/ErrorCircle.js";import"./components/Icons/InfoCircle.js";import"react-select";import"./shared/constants.js";import"react-day-picker";import"date-fns/locale";import"date-fns";import"./components/DayPicker/style.js";import"./components/Logo/LogoSv.js";import"./components/Logo/LogoEn.js";import"./components/Icons/CheckIcon.js";import"./components/Icons/Arrow.js";import"./components/Chip/styles.js";import"./components/Breadcrumbs/BreadcrumbsItem.js";import"./components/RegistrationPlate/EuFlagIcon.js";export{H as Accordion,ce as AddIcon,ie as AlertIcon,ye as ArrowDownIcon,Ce as ArrowLeftIcon,Be as ArrowRightIcon,ke as ArrowUpIcon,we as AtvIcon,Le as AuctionIcon,De as BackIcon,Oo as Badge,Re as BankidIcon,Me as BidIcon,Ee as BodyIcon,ip as BodyLink,Sp as BodyLinkStyle,yp as BodyText,gp as BodyTextStyle,le as Breadcrumbs,Ve as BreaksIcon,U as Button,bp as ButtonLargeText,Dp as ButtonLargeTextStyle,Pp as ButtonRegularText,Rp as ButtonRegularTextStyle,Ap as ButtonSmallText,Mp as ButtonSmallTextStyle,Ge as CabIcon,Oe as CalendarIcon,We as CameraIcon,ze as CamperIcon,je as CancelCircleIcon,Xe as CancelIcon,Cp as Caption,Tp as CaptionLink,Bp as CaptionLinkStyle,hp as CaptionStyle,_e as CarIcon,ot as CarServiceIcon,tt as CaravanIcon,Xo as Card,at as CertifiedIcon,lt as ChatIcon,po as CheckBox,mt as CheckCircleIcon,dt as CheckFilledIcon,st as CheckIcon,ct as CheckmarkIcon,ae as Chip,it as ClockIcon,yt as CloseIcon,Ct as CommentFilledIcon,Bt as CommentIcon,kt as ConditioningIcon,wt as ContactIcon,Lt as ControlNumberIcon,Dt as CopyIcon,Rt as CountdownIcon,Mt as CoupeIcon,Et as CraneIcon,Vt as CupIcon,Vo as DayPicker,Gt as DeleteIcon,ro as Dialog,$l as Display1,op as Display1Style,ep as Display2,tp as Display2Style,rp as Display3,ap as Display3Style,Ot as DisplayIcon,Wt as DocumentIcon,zt as DownloadIcon,jt as EcoIcon,Xt as EditIcon,wo as EditRow,_t as EngineIcon,or as ErrorFilledIcon,tr as ErrorIcon,Z as ErrorMessage,ar as EstoniaFlagIcon,lr as ExportIcon,mr as FacebookIcon,dr as FacilityIcon,sr as FavouriteFilledIcon,cr as FavouriteIcon,ir as FigmaIcon,yr as FilterIcon,Cr as FinanceIcon,Br as FinlandFlagIcon,kr as FirstIcon,wr as FixedPriceIcon,io as Flex,Lr as FuelIcon,Dr as GearboxIcon,Rr as GetPaidIcon,Mr as GridViewIcon,Er as HatchbackIcon,fp as Headline,lp as HeadlineStyle,Vr as HelpIcon,Eo as Hero,Gr as HistoryIcon,Or as HomeDeliveryIcon,K as IconButton,Wr as IdIcon,zr as ImageIcon,jr as InfoIcon,Xr as InstagramIcon,_r as InsuranceIcon,oa as InteriorIcon,ta as KvdIcon,aa as KvdTestIcon,la as KvdproIcon,ma as LastIcon,da as LeaderIcon,sa as LinkedinIcon,Bo as ListItem,ca as ListViewIcon,ia as LocationIcon,Go as Logo,ya as MailIcon,Ca as MenuIcon,se as MenuItem,me as Message,Ba as MileageIcon,ka as MinivanIcon,eo as Modal,wa as ModelYearIcon,La as MoreIcon,Da as MotorbikeIcon,Ra as NavigationIcon,Ma as NewIcon,Ea as NextFilledIcon,Va as NextIcon,oe as NotificationButton,Ga as NotificationIcon,fo as OffCanvas,Oa as OpenInNewIcon,Wa as PayementIcon,za as PercentIcon,ja as PhoneIcon,Xa as PickUpIcon,_a as Pickup,of as PlayIcon,tf as PlugIcon,af as PolandFlagIcon,lf as PreviousFilledIcon,mf as PreviousIcon,df as PrintIcon,kp as Quote,sf as QuoteIcon,Fp as QuoteStyle,Lo as RadioButton,cf as RatingIcon,de as RegistrationPlate,Sf as ReleasingIcon,gf as ReorderIcon,Tf as RestartIcon,hf as SalesOfferIcon,Ff as SavedSearchIcon,vf as ScheduleIcon,bf as SearchIcon,Pf as SedanIcon,yo as Select,Af as SellFilledIcon,Nf as SellIcon,Hf as SettingsIcon,Uf as ShareIcon,Kf as ShowLessIcon,Qf as ShowMoreIcon,qf as SignInIcon,Yf as SignOutIcon,Jf as SlackIcon,Zf as SmartphoneIcon,$f as SmileIcon,no as Snackbar,el as SnowmobileIcon,rl as SortColumnIcon,fl as SortIcon,so as Spacer,$ as Spinner,Do as SpinnerThin,co as Stack,Ro as Stamp,wp as Status,vp as StatusStyle,zo as Stepper,jo as StepperAccordion,pl as StorageIcon,nl as StoreIcon,pp as Subtitle,mp as SubtitleStyle,ul as SuvIcon,xl as SwedishFlagIcon,_o as Switcher,J as Tab,ko as Table,Y as Tabs,q as TextArea,Q as TextField,Il as ThreeSixtyIcon,Mo as TimePicker,np as TinyTitleBold,dp as TinyTitleBoldStyle,up as TinyTitleRegular,sp as TinyTitleRegularStyle,xp as Title,cp as TitleStyle,Wo as Toggle,Co as ToggleArrow,Sl as TractorIcon,gl as TrailerIcon,Tl as TransportIcon,hl as TruckIcon,Fl as TwitterIcon,vl as TyresIcon,bl as UnitedKingdomFlagIcon,Pl as UploadIcon,Al as UserIcon,Nl as ValuationIcon,te as ValuationRange,Hl as VanIcon,Ul as VersionIcon,Kl as ViewsIcon,Ql as WagonIcon,ql as WarningIcon,Yl as WarrantyIcon,Jl as YoutubeIcon,Ep as getDarkerShade,Hp as getLighterShade,Vp as hexToRGB,R as mediaQueries,A as mq,M as mqNumberSizes,N as mqSizes,Up as resetButtonStyle,Gp as resolveColorWithNeutral,D as theme,Zl as useDynamicScript};

package/esm/utils/utils.js

@@ -1,4 +1,4 @@
-import{css as l}from"styled-components";const s=e=>{let a=0,r=0,t=0;return e.length===4?(a=parseInt("0x"+e[1]+e[1]),r=parseInt("0x"+e[2]+e[2]),t=parseInt("0x"+e[3]+e[3])):e.length===7&&(a=parseInt("0x"+e[1]+e[2]),r=parseInt("0x"+e[3]+e[4]),t=parseInt("0x"+e[5]+e[6])),(Math.max(Number(a/255),Number(r/255),Number(t/255))+Math.min(Number(a/255),Number(r/255),Number(t/255)))/2*100},c=(e,a=1)=>{const r=parseInt(e.slice(1,3),16),t=parseInt(e.slice(3,5),16),o=parseInt(e.slice(5,7),16);return`rgba(${r}, ${t}, ${o}, ${a})`},i=l`
+import{css as s}from"styled-components";const i=e=>{let t=0,a=0,r=0;return e.length===4?(t=parseInt("0x"+e[1]+e[1]),a=parseInt("0x"+e[2]+e[2]),r=parseInt("0x"+e[3]+e[3])):e.length===7&&(t=parseInt("0x"+e[1]+e[2]),a=parseInt("0x"+e[3]+e[4]),r=parseInt("0x"+e[5]+e[6])),(Math.max(Number(t/255),Number(a/255),Number(r/255))+Math.min(Number(t/255),Number(a/255),Number(r/255)))/2*100},c=(e,t=1)=>{const a=parseInt(e.slice(1,3),16),r=parseInt(e.slice(3,5),16),l=parseInt(e.slice(5,7),16);return`rgba(${a}, ${r}, ${l}, ${t})`},g=s`
   appearance: none;
   background-color: transparent;
   border: 0;
@@ -6,4 +6,4 @@ import{css as l}from"styled-components";const s=e=>{let a=0,r=0,t=0;return e.len
   font-family: inherit;
   outline: none;
   padding: 0;
-`,n=e=>({darker:e.colors.grayscaleNeutral.dark1,dark:e.colors.grayscaleNeutral.dark1,mainAlt:e.colors.grayscaleToned.dark1,main:e.colors.grayscaleToned.dark1,light:e.colors.grayscaleToned.light1}),u=(e,a)=>a==="neutral"?n(e):e.colors[a];export{s as getLuminosity,c as hexToRGB,n as neutralColorSwap,i as resetButtonStyle,u as resolveColorWithNeutral};
+`,o=e=>({darker:e.colors.grayscaleNeutral.dark1,dark:e.colors.grayscaleNeutral.dark1,mainAlt:e.colors.grayscaleToned.dark1,main:e.colors.grayscaleToned.dark1,light:e.colors.grayscaleToned.light1,lighter:e.colors.grayscaleToned.light2,lighter2:e.colors.grayscaleToned.light3,lighter3:e.colors.grayscaleToned.light4}),h=(e,t)=>t==="neutral"?o(e):e.colors[t],n=["darker","dark","mainAlt","main","light","lighter","lighter2","lighter3"],d=e=>{const t=n.indexOf(e);return t>=0&&t<n.length-1?n[t+1]:e},u=e=>{const t=n.indexOf(e);return t>0?n[t-1]:e};export{u as getDarkerShade,d as getLighterShade,i as getLuminosity,c as hexToRGB,o as neutralColorSwap,g as resetButtonStyle,h as resolveColorWithNeutral};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "16.0.1",
+  "version": "16.0.3",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -30,9 +30,10 @@
     "publish-package": "./npm-publish.sh"
   },
   "peerDependencies": {
+    "date-fns": "^4.1.0",
     "react": ">= 17.0.0",
     "react-collapse": ">= 5.0.1",
-    "react-day-picker": ">= 7.4.8",
+    "react-day-picker": "^9.7.0",
     "react-dom": ">= 17.0.0",
     "react-select": ">= 5.8.0",
     "react-transition-group": ">= 4.0.0",
@@ -80,6 +81,7 @@
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-styled-components": "^2.1.4",
     "cross-env": "^7.0.3",
+    "date-fns": "^4.1.0",
     "esbuild": "^0.25.0",
     "eslint": "^9.11.1",
     "eslint-config-prettier": "^10.0.1",
@@ -88,6 +90,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "globals": "^16.0.0",
     "husky": "^9.1.5",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.2.0",
@@ -95,7 +98,7 @@
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-collapse": "^5.0.1",
-    "react-day-picker": "^7.4.8",
+    "react-day-picker": "^9.7.0",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.3.1",
     "react-select": "^5.8.0",

package/package.json.tmp

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "16.0.1",
+  "version": "16.0.3",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -29,9 +29,10 @@
     "publish-package": "./npm-publish.sh"
   },
   "peerDependencies": {
+    "date-fns": "^4.1.0",
     "react": ">= 17.0.0",
     "react-collapse": ">= 5.0.1",
-    "react-day-picker": ">= 7.4.8",
+    "react-day-picker": "^9.7.0",
     "react-dom": ">= 17.0.0",
     "react-select": ">= 5.8.0",
     "react-transition-group": ">= 4.0.0",
@@ -79,6 +80,7 @@
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-styled-components": "^2.1.4",
     "cross-env": "^7.0.3",
+    "date-fns": "^4.1.0",
     "esbuild": "^0.25.0",
     "eslint": "^9.11.1",
     "eslint-config-prettier": "^10.0.1",
@@ -87,6 +89,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "globals": "^16.0.0",
     "husky": "^9.1.5",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.2.0",
@@ -94,7 +97,7 @@
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-collapse": "^5.0.1",
-    "react-day-picker": "^7.4.8",
+    "react-day-picker": "^9.7.0",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.3.1",
     "react-select": "^5.8.0",

package/types/components/Button/styles.d.ts

@@ -17,7 +17,7 @@ export declare const largeSizeStyles: () => string;
 export declare const disabledColorStyles: (theme: Theme, variant: Variant) => string;
 export declare const colorStyles: {
     solid: ({ theme, $color, $colorShade }: ColorStylesProp) => string;
-    outline: ({ theme, $color }: ColorStylesProp) => string;
-    flat: ({ theme, $color }: ColorStylesProp) => string;
+    outline: ({ theme, $color, $colorShade, }: ColorStylesProp) => string;
+    flat: ({ theme, $color, $colorShade }: ColorStylesProp) => string;
 };
 export {};

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

@@ -1,10 +1,13 @@
 import { ReactNode } from 'react';
+import { Color, ColorShade } from '../../Types';
 export interface CardProps {
     children: ReactNode;
     topBorder?: string;
+    topBorderColor?: Color;
+    topBorderColorShade?: ColorShade;
     noFrame?: boolean;
     lineBorder?: boolean;
     as?: keyof JSX.IntrinsicElements;
 }
-export declare const Card: ({ children, topBorder, noFrame, lineBorder, as: element, }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ children, topBorder, topBorderColor, topBorderColorShade, noFrame, lineBorder, as: element, }: CardProps) => import("react/jsx-runtime").JSX.Element;
 export default Card;

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

@@ -1,14 +1,15 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { CheckboxSize, Color } from '../../Types';
+import { CheckboxSize, Color, ColorShade } from '../../Types';
 type ComponentPropsWithoutSize = Omit<ComponentPropsWithoutRef<'input'>, 'size'>;
 export interface CheckBoxProps extends ComponentPropsWithoutSize {
     name?: string;
     size?: CheckboxSize;
     color?: Color;
+    colorShade?: ColorShade;
     checked?: boolean;
     isDisabled?: boolean;
     hasError?: boolean;
     label?: ReactNode;
 }
-export declare const CheckBox: ({ name, isDisabled, size, checked, color, hasError, label, ...rest }: CheckBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckBox: ({ name, isDisabled, size, checked, color, colorShade, hasError, label, ...rest }: CheckBoxProps) => import("react/jsx-runtime").JSX.Element;
 export default CheckBox;

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

@@ -1,9 +1,12 @@
-import { DayPickerProps as ReactDayPickerProps } from 'react-day-picker';
+import { PropsBase } from 'react-day-picker';
 import { Locale } from '../../Types';
-import { Color } from '../../Types';
-export interface DayPickerProps extends ReactDayPickerProps {
+import { Color, ColorShade } from '../../Types';
+export interface DayPickerProps extends Omit<PropsBase, 'locale'> {
     locale?: Locale;
     color?: Color;
+    selectedDay?: Date;
+    disabledDays?: Date[];
+    colorShade?: ColorShade;
 }
-export declare const DayPicker: ({ locale, color, ...props }: DayPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DayPicker: ({ locale, color, colorShade, selectedDay, disabledDays, ...props }: DayPickerProps) => import("react/jsx-runtime").JSX.Element;
 export default DayPicker;

package/types/components/IconButton.d.ts

@@ -1,16 +1,18 @@
 import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import { ColorWithNeutral } from '../Types';
+import { ColorShade, ColorWithNeutral } from '../Types';
 export declare const BackgroundStyles: import("styled-components").RuleSet<{
-    color: ColorWithNeutral;
+    $color: ColorWithNeutral;
+    $colorShade: ColorShade;
     isDisabled: boolean;
 }>;
 interface Props {
     color: ColorWithNeutral;
+    colorShade?: ColorShade;
     children: ReactNode;
     isActive: boolean;
     isDisabled: boolean;
     noTabIndex?: boolean;
     onClick?(event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>): void;
 }
-declare const IconButton: ({ children, isActive, isDisabled, onClick, noTabIndex, color, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const IconButton: ({ children, isActive, isDisabled, onClick, noTabIndex, color, colorShade, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default IconButton;