@kvdbil/components 16.0.1 → 16.0.3

package/cjs/components/Badge/index.js

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../theme.js");var i,o=(i=t)&&i.__esModule?i:{default:i};const d=o.default.div`
   border-radius: 0.75rem;
-  background: ${r.default.colors.secondary.main};
+  background: ${r.default.colors.secondary.mainAlt};
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/cjs/components/Breadcrumbs/BreadcrumbsItem.js

@@ -9,7 +9,7 @@
   a {
     ${n.BodyTextStyle}
     font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
-    color: ${({theme:e})=>e.colors.info.main};
+    color: ${({theme:e})=>e.colors.info.dark};
     text-decoration: none;
     ${({$onlyLastTruncated:e})=>!e&&"\n      overflow: hidden;\n      text-overflow: ellipsis;\n    "}
   }

package/cjs/components/Button/index.js

@@ -25,7 +25,7 @@
     background-color 0.3s ease,
     border 0.3s ease,
     filter 0.3s;
-  ${({$variant:e="solid",$color:i,$colorShade:s="main",disabled:t,theme:o})=>r.css`
+  ${({$variant:e="solid",$color:i,$colorShade:s,disabled:t,theme:o})=>r.css`
     ${t?l.disabledColorStyles(o,e):l.colorStyles[e]({theme:o,$color:i,$colorShade:s,$variant:e})}
   `}
   &:focus-visible {

package/cjs/components/Button/styles.js

@@ -1 +1 @@
-"use strict";var r=require("../../typography/ButtonText/index.js"),e=require("../../utils/utils.js");require("react/jsx-runtime"),require("styled-components");const o={small:r.ButtonSmallTextStyle,regular:r.ButtonRegularTextStyle,large:r.ButtonLargeTextStyle},n=r=>`\n  color: ${r.colors.grayscaleToned.light1};\n  cursor: not-allowed;\n`,l={solid:({theme:r,$color:o,$colorShade:n})=>{const l=e.resolveColorWithNeutral(r,o),t="neutral"===o?l.mainAlt:r.colors[o][n];return`\n  color: ${r.colors.text.light};\n  background-color: ${t};\n\n  &:hover {\n    border-color: ${l.dark};\n    filter: brightness(0.9)\n  }\n\n  &:active {\n    border-color: ${l.light};\n    filter: brightness(1.1)\n  }\n`},outline:({theme:r,$color:o})=>{const n=e.resolveColorWithNeutral(r,o);return`\n  color: ${n.mainAlt};\n  border: 2px solid ${n.mainAlt};\n  background-color: transparent;\n\n  &:hover {\n      border: 2px solid ${n.dark};\n      color: ${n.dark};\n  }\n\n  &:active {\n    border: 2px solid ${n.light};\n    color: ${n.light};\n  }\n`},flat:({theme:r,$color:o})=>{const n=e.resolveColorWithNeutral(r,o);return`\n  color: ${n.mainAlt};\n\n  background-color: transparent;\n\n  &:hover, &:active {\n    color: ${n.dark};\n  }\n`}};exports.colorStyles=l,exports.disabledColorStyles=(r,e)=>"solid"===e?`\n    ${n(r)};\n    background-color: ${r.colors.grayscaleToned.light4};`:"outline"===e?`\n    ${n(r)};\n    border: 2px solid ${r.colors.grayscaleToned.light1};`:n(r),exports.fontSizes=o,exports.largeSizeStyles=()=>"\n  padding: 0.25rem 1.5rem;\n  min-height: 3.75rem;\n",exports.regularSizeStyles=()=>"\n  padding: 0.25rem 1.5rem;\n  min-height: 3rem;\n",exports.smallSizeStyles=()=>"\n  padding: 0.25rem 0.75rem;\n  min-height: 2.5rem;\n";
+"use strict";var e=require("../../typography/ButtonText/index.js"),r=require("../../utils/utils.js");require("react/jsx-runtime"),require("styled-components");const o={small:e.ButtonSmallTextStyle,regular:e.ButtonRegularTextStyle,large:e.ButtonLargeTextStyle},n=e=>`\n  color: ${e.colors.grayscaleToned.light1};\n  cursor: not-allowed;\n`,t={solid:({theme:e,$color:o,$colorShade:n})=>{const t=r.resolveColorWithNeutral(e,o);return`\n  color: ${e.colors.text.light};\n  background-color: ${t[n]};\n\n  &:hover {\n    border-color: ${t[r.getDarkerShade(n)]};\n    filter: brightness(0.9)\n  }\n\n  &:active {\n    border-color: ${t[r.getLighterShade(n)]};\n    filter: brightness(1.1)\n  }\n`},outline:({theme:e,$color:o,$colorShade:n})=>{const t=r.resolveColorWithNeutral(e,o),l=r.getDarkerShade(n),s=r.getLighterShade(n);return`\n  color: ${t[n]};\n  border: 2px solid ${t[n]};\n  background-color: transparent;\n\n  &:hover {\n      border: 2px solid ${t[l]};\n      color: ${t[l]};\n  }\n\n  &:active {\n    border: 2px solid ${t[s]};\n    color: ${t[s]};\n  }\n`},flat:({theme:e,$color:o,$colorShade:n})=>{const t=r.resolveColorWithNeutral(e,o);return`\n  color: ${t[n]};\n\n  background-color: transparent;\n\n  &:hover, &:active {\n    color: ${t[r.getDarkerShade(n)]};\n  }\n`}};exports.colorStyles=t,exports.disabledColorStyles=(e,r)=>"solid"===r?`\n    ${n(e)};\n    background-color: ${e.colors.grayscaleToned.light4};`:"outline"===r?`\n    ${n(e)};\n    border: 2px solid ${e.colors.grayscaleToned.light1};`:n(e),exports.fontSizes=o,exports.largeSizeStyles=()=>"\n  padding: 0.25rem 1.5rem;\n  min-height: 3.75rem;\n",exports.regularSizeStyles=()=>"\n  padding: 0.25rem 1.5rem;\n  min-height: 3rem;\n",exports.smallSizeStyles=()=>"\n  padding: 0.25rem 0.75rem;\n  min-height: 2.5rem;\n";

package/cjs/components/Card/index.js

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

package/cjs/components/CheckBox/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),s=require("../../icons/components/CheckmarkIcon.js"),o=require("../../shared/helpers.js"),i=require("../../theme.js"),t=require("../../typography/BodyText/index.js"),a=require("../IconButton.js");require("../../shared/media-queries.js"),require("../../utils/utils.js");var l,d=(l=r)&&l.__esModule?l:{default:l};const c={regular:r.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),o=require("../../icons/components/CheckmarkIcon.js"),s=require("../../shared/helpers.js"),i=require("../../theme.js"),t=require("../../typography/BodyText/index.js"),a=require("../IconButton.js");require("../../shared/media-queries.js"),require("../../utils/utils.js");var l,d=(l=r)&&l.__esModule?l:{default:l};const c={regular:r.css`
   width: 24px;
   height: 24px;
 
@@ -17,10 +17,10 @@
 `},n=r.css`
   cursor: default;
   border: 2px solid ${i.default.colors.grayscaleToned.light2};
-`,u=r.css`
+`,h=r.css`
   background: ${i.default.colors.grayscaleToned.light2};
   z-index: 1;
-`,h=r.css`
+`,u=r.css`
   border: 2px solid ${i.default.colors.error.dark};
 `,x=d.default.div`
   display: flex;
@@ -39,7 +39,8 @@
   z-index: 1;
   ${e=>c[e.boxSize]};
 
-  :focus-visible {
+  &:hover,
+  &:focus {
     transition: background-color 400ms;
     ${a.BackgroundStyles}
   }
@@ -61,7 +62,7 @@
     color: ${({theme:e})=>e.colors.common.white};
   }
 
-  ${e=>e.isChecked&&(e=>r.css`
+  ${e=>e.isChecked&&((e,o)=>r.css`
   svg {
     opacity: 1;
   }
@@ -69,16 +70,16 @@
   :hover {
   }
 
-  background: ${i.default.colors[e].main};
-  border: 2px solid ${i.default.colors[e].main};
-`)(e.color)};
+  background: ${i.default.colors[e][o]};
+  border: 2px solid ${i.default.colors[e][o]};
+`)(e.$color,e.$colorShade)};
   ${e=>e.isDisabled&&n};
-  ${e=>e.hasError&&h};
-  ${e=>e.isChecked&&e.isDisabled&&u};
+  ${e=>e.hasError&&u};
+  ${e=>e.isChecked&&e.isDisabled&&h};
 `,g=d.default(t.BodyText)`
   flex: 1;
   cursor: ${({isDisabled:e})=>e?"default":"pointer"};
   user-select: none;
   color: ${({theme:e,isDisabled:r})=>r?e.colors.text.disabled:e.colors.text.dark};
   margin-left: 0.5rem;
-`,f=({name:r=o.generateNameHash("check-box"),isDisabled:i=!1,size:t="regular",checked:a=!1,color:l="secondary",hasError:d=!1,label:c,...n})=>e.jsxs(x,{children:[e.jsx(p,{...n,type:"checkbox",checked:a,"data-validate":"checked",name:r,id:r,color:l,disabled:i,isDisabled:i,boxSize:t}),e.jsx(b,{size:t,color:l,isChecked:a,isDisabled:i,hasError:d,children:e.jsx(s.default,{})}),c&&e.jsx(g,{as:"label",htmlFor:r,isDisabled:i,children:c})]});exports.CheckBox=f,exports.default=f;
+`,f=({name:r=s.generateNameHash("check-box"),isDisabled:i=!1,size:t="regular",checked:a=!1,color:l="secondary",colorShade:d="mainAlt",hasError:c=!1,label:n,...h})=>e.jsxs(x,{children:[e.jsx(p,{...h,type:"checkbox",checked:a,"data-validate":"checked",name:r,id:r,$color:l,$colorShade:d,disabled:i,isDisabled:i,boxSize:t}),e.jsx(b,{size:t,$color:l,$colorShade:d,isChecked:a,isDisabled:i,hasError:c,children:e.jsx(o.default,{})}),n&&e.jsx(g,{as:"label",htmlFor:r,isDisabled:i,children:n})]});exports.CheckBox=f,exports.default=f;

package/cjs/components/DayPicker/index.js

@@ -1,5 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react-day-picker"),t=require("styled-components"),o=require("../../theme.js"),a=require("./DayPickerNavBar.js"),l=require("./localeUtils.js"),s=require("./style.js");function i(e){return e&&e.__esModule?e:{default:e}}require("../Icons/Arrow.js"),require("../../typography/BodyText/index.js"),require("../../shared/media-queries.js");var u=i(r);const d=i(t).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),o=require("../../theme.js"),l=require("react-day-picker"),a=require("date-fns/locale"),c=require("date-fns"),s=require("./style.js");var i,u=(i=t)&&i.__esModule?i:{default:i},d=function(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}(a);const n=u.default.div`
   ${s.default}
 
+  .rdp-chevron {
+    fill: ${({theme:e})=>e.colors.text.dark};
+  }
+
   font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
-`,c=e=>({selected:{color:o.default.colors.text.light,background:o.default.colors[e].main},today:{color:o.default.colors[e].main}}),n=({locale:r="sv",color:t="primary",...o})=>e.jsx(d,{color:t,children:e.jsx(u.default,{...o,locale:r,months:l.MONTHS[r],weekdaysLong:l.WEEKDAYS_LONG[r],weekdaysShort:l.WEEKDAYS_SHORT[r],firstDayOfWeek:l.FIRST_DAY_OF_THE_WEEK[r],navbarElement:t=>e.jsx(a.default,{...t,locale:r}),captionElement:e.jsx("div",{}),modifiersStyles:c(t)})});exports.DayPicker=n,exports.default=n;
+`,f=(e,r,t)=>{const l=t&&c.isToday(t)?o.default.colors.background.light:o.default.colors[e][r];return{selected:{color:o.default.colors.text.light,background:o.default.colors[e][r]},today:{color:l}}},y=({locale:t="sv",color:o="primary",colorShade:a="mainAlt",selectedDay:c,disabledDays:s,...i})=>{const[u,y]=r.useState(c);return e.jsx(n,{children:e.jsx(l.DayPicker,{...i,mode:"single",selected:u,onSelect:function(e){e&&y(e)},locale:d[t]||d.enGB,modifiersStyles:f(o,a,u),disabled:s})})};exports.DayPicker=y,exports.default=y;