@kvdbil/components 3.3.5 → 3.4.0

package/cjs/shared/media-queries.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e={mobileS:"320px",mobileM:"375px",mobileL:"425px",tablet:"768px",laptop:"1024px",laptopL:"1440px",laptopXL:"1680px",desktop:"2560px"},t={mobileS:o=>`(${o}-width: ${e.mobileS})`,mobileM:o=>`(${o}-width: ${e.mobileM})`,mobileL:o=>`(${o}-width: ${e.mobileL})`,tablet:o=>`(${o}-width: ${e.tablet})`,laptop:o=>`(${o}-width: ${e.laptop})`,laptopL:o=>`(${o}-width: ${e.laptopL})`,desktop:o=>`(${o}-width: ${e.desktop})`,desktopL:o=>`(${o}-width: ${e.desktop})`};exports.mediaQueries=t,exports.mq=(o,p)=>o&&p?`@media (min-width: ${e[o]}) and (max-width: ${e[p]})`:o?`@media (min-width: ${e[o]})`:p?`@media (max-width: ${e[p]})`:(console.error("Invalid use of mq. Available breakpoints are:",e),"@media screen"),exports.mqSizes=e;

package/cjs/theme.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={typography:{fontBaseFamily:"'Open Sans', sans-serif",fontAlternativeFamily:"'Next Book', sans-serif",fontBaseRegularWeight:400,fontBaseBoldWeight:600,fontAlternativeRegularWeight:400,fontAlternativeBoldWeight:700},colors:{primary:{darker:"#d98500",dark:"#e8a100",main:"#f5b400",light:"#f7cf57",lighter:"#fce5ab",lighter2:"#fff7e5"},secondary:{darker:"#00474d",dark:"#007069",main:"#2a9d8f",light:"#6bb8a6",lighter:"#bae3cc",lighter2:"#e5f5ed"},tertiary:{darker:"#5e2636",dark:"#a63640",main:"#ef5b5b",light:"#f5968a",lighter:"#f5c7bf",lighter2:"#fcedeb"},info:{darker:"#17395d",dark:"#004773",main:"#007ab8",light:"#57c2ff",lighter:"#abe0ff",lighter2:"#e5f5ff"},success:{darker:"#175c36",dark:"#269940",main:"#59d771",light:"#91e5a1",lighter:"#c7f2cf",lighter2:"#edfaf0"},warning:{darker:"#d98500",dark:"#e8a100",main:"#f5b400",light:"#f7cf57",lighter:"#fce5ab",lighter2:"#fff7e5"},error:{darker:"#5e2636",dark:"#a63640",main:"#ef5b5b",light:"#f5968a",lighter:"#f5c7bf",lighter2:"#fcedeb"},neutral:{darker:"#1a2030",dark:"#1a2030",main:"#1a2030",light:"#474d59",lighter:"#5e6369",lighte2:"#707378"},text:{dark:"#1a2030",light:"#ffffff",disabled:"#5e6369"},background:{dark:"#1a2030",gray:"#f2f2f2",sand:"#f2efe6",light:"#ffffff"},common:{black:"#000000",white:"#ffffff",purple:{darker:"#42214f",dark:"#732e70",main:"#a13d8f",light:"#c27db5",lighter:"#e0bfd9",lighter2:"#f5edf2"}},gray:{dark1:"#1a2030",dark2:"#303842",dark3:"#474d59",dark4:"#5e6369",dark5:"#707378",light1:"#8c8f91",light2:"#a3a6a8",light3:"#c7c7c4",light4:"#d9d9d6",light5:"#e8e8e8",light6:"#f2f2f2"}},elevations:{elevation2:"0px 1px 5px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)",elevation4:"0px 1px 10px rgba(0, 0, 0, 0.15), 0px 4px 5px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)",elevation8:"0px 4px 5px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.09), 0px 8px 10px rgba(0, 0, 0, 0.1)",elevation16:"0px 8px 10px rgba(0, 0, 0, 0.15), 0px 6px 30px rgba(0, 0, 0, 0.09), 0px 16px 24px rgba(0, 0, 0, 0.1)",elevation24:"0px 11px 15px rgba(0, 0, 0, 0.15), 0px 9px 46px rgba(0, 0, 0, 0.09), 0px 24px 38px rgba(0, 0, 0, 0.1)"}};

package/cjs/typography/BodyText/index.js

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components");function o(g){return g&&typeof g=="object"&&"default"in g?g:{default:g}}var i=o(e),r=o(t);const n=t.css`
+  font-family: ${({theme:g})=>g.typography.fontBaseFamily};
+  font-weight: ${({theme:g})=>g.typography.fontBaseRegularWeight};
+`,a=r.default.p`
+  ${n}
+  font-feature-settings: 'lnum' on;
+`,s=r.default(a)`
+  font-family: Georgia, Cambria, Cochin, Times, 'Times New Roman', serif;
+  font-style: italic;
+`,f=t.css`
+  ${n}
+  font-size: 1rem;
+  line-height: 1.5rem;
+`,l=r.default(a)`
+  font-size: 1rem;
+  line-height: 1.5rem;
+`,p=r.default(l)`
+  font-weight: ${({theme:g})=>g.typography.fontBaseBoldWeight};
+`,h=t.css`
+  ${n}
+  font-size: 0.81rem;
+  line-height: 1.5rem;
+`,m=r.default(a)`
+  font-size: 0.81rem;
+  line-height: 1.5rem;
+`,y=r.default(m)`
+  font-weight: ${({theme:g})=>g.typography.fontBaseBoldWeight};
+`,u=r.default(a)`
+  font-family: ${({theme:g})=>g.typography.fontAlternativeFamily};
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  font-weight: ${({theme:g})=>g.typography.fontAlternativeBoldWeight};
+  text-transform: uppercase;
+`,d=()=>i.default.createElement("div",null);exports.BodyLink=p,exports.BodyText=l,exports.BodyTextStyle=f,exports.BodyTexts=d,exports.Caption=m,exports.CaptionLink=y,exports.CaptionStyle=h,exports.Quote=s,exports.Status=u,exports.StyledBodyText=a,exports.default=d;

package/cjs/typography/ButtonText/index.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components");function r(c){return c&&typeof c=="object"&&"default"in c?c:{default:c}}var o=r(e),l=r(t);const n=t.css`
+  font-family: ${({theme:c})=>c.typography.fontAlternativeFamily};
+  font-weight: ${({theme:c})=>c.typography.fontAlternativeBoldWeight};
+`,s=l.default.span`
+  ${n}
+`,a=t.css`
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+`,u=l.default(s)`
+  ${a}
+`,i=t.css`
+  font-size: 1rem;
+  line-height: 1rem;
+`,f=l.default(s)`
+  ${i}
+`,p=t.css`
+  font-size: 0.81rem;
+  line-height: 0.81rem;
+`,m=l.default(s)`
+  ${p}
+`;exports.BasicButtonTextStyle=n,exports.Button=f,exports.ButtonLarge=u,exports.ButtonLargeTextStyle=a,exports.ButtonRegularTextStyle=i,exports.ButtonSmall=m,exports.ButtonSmallTextStyle=p,exports.default=()=>o.default.createElement("div",null);

package/cjs/typography/Heading/index.js

@@ -0,0 +1,61 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),i=require("../../shared/media-queries.js");function r(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}var l=r(e),o=r(t);const n=o.default.p`
+  font-family: ${({theme:y})=>y.typography.fontAlternativeFamily};
+  font-weight: ${({theme:y})=>y.typography.fontAlternativeRegularWeight};
+`,h=o.default(n)`
+  font-weight: ${({theme:y})=>y.typography.fontAlternativeBoldWeight};
+`,a=o.default(h)`
+  font-size: 2rem;
+  line-height: 3rem;
+
+  ${i.mq("laptop")} {
+    font-size: 3.75rem;
+    line-height: 4.5rem;
+  }
+`,m=o.default(h)`
+  font-size: 1.81rem;
+  line-height: 2.5rem;
+
+  ${i.mq("laptop")} {
+    font-size: 3rem;
+    line-height: 4rem;
+  }
+`,f=o.default(h)`
+  font-size: 1.63rem;
+  line-height: 2.5rem;
+
+  ${i.mq("laptop")} {
+    font-size: 2.5rem;
+    line-height: 3.5rem;
+  }
+`,p=o.default(n)`
+  font-size: 1.44rem;
+  line-height: 2rem;
+
+  ${i.mq("laptop")} {
+    font-size: 2rem;
+    line-height: 3rem;
+  }
+`,s=o.default(n)`
+  font-size: 1.25rem;
+  line-height: 2rem;
+
+  ${i.mq("laptop")} {
+    font-size: 1.56rem;
+    line-height: 2.5rem;
+  }
+`,g=o.default(n)`
+  font-size: 1.125rem;
+  line-height: 2rem;
+
+  ${i.mq("laptop")} {
+    font-size: 1.25rem;
+  }
+`,u=o.default(n)`
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: ${({theme:y})=>y.typography.fontAlternativeBoldWeight};
+`,d=o.default(n)`
+  font-weight: ${({theme:y})=>y.typography.fontAlternativeBoldWeight};
+  font-size: 1rem;
+  line-height: 1.5rem;
+`;exports.Display1=f,exports.Display2=m,exports.Display3=a,exports.Headline=p,exports.Rubric=d,exports.Subtitle=g,exports.TinyTitle=u,exports.Title=s,exports.default=()=>l.default.createElement("div",null);

package/cjs/utils/utils.js

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=require("styled-components").css`
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  outline: none;
+  padding: 0;
+`;exports.getLuminosity=r=>{let t=0,n=0,s=0;return r.length===4?(t=parseInt("0x"+r[1]+r[1]),n=parseInt("0x"+r[2]+r[2]),s=parseInt("0x"+r[3]+r[3])):r.length===7&&(t=parseInt("0x"+r[1]+r[2]),n=parseInt("0x"+r[3]+r[4]),s=parseInt("0x"+r[5]+r[6])),(Math.max(Number(t/255),Number(n/255),Number(s/255))+Math.min(Number(t/255),Number(n/255),Number(s/255)))/2*100},exports.resetButtonStyle=e;

package/esm/ColorCard.js

@@ -0,0 +1,25 @@
+import e from"react";import o from"styled-components";import{getLuminosity as i}from"./utils/utils.js";import a from"./theme.js";const m=o.ul`
+  padding-left: 2rem;
+`,c=o.li`
+  list-style: none;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
+  border: 1px solid ${a.colors.gray.light2};
+  border-radius: 4px;
+  font-family: 'Ralway', sans-serif;
+  margin-top: 0.75rem;
+`,n=o.span`
+  text-transform: capitalize;
+  padding: 0.5em;
+  display: block;
+  border-bottom: 1px solid ${a.colors.gray.light2};
+`,d=o.li`
+  display: block;
+  background: ${({hex:t})=>t};
+  color: ${({hex:t})=>i(t)<40?"#fff":"#000"};
+  padding: 1em;
+`,p=o.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+`,s=t=>Object.entries(t).map(([r,l])=>typeof l=="string"?e.createElement(d,{hex:l,key:l},r," (",l,")"):e.createElement(e.Fragment,null,e.createElement(n,null,r),e.createElement(m,null,s(l)))),f=({colorName:t,variants:r})=>e.createElement(c,null,e.createElement(n,null,t),e.createElement(p,null,s(r)));export{f as default};

package/esm/ElevationCard.js

@@ -0,0 +1,13 @@
+import o from"react";import i from"styled-components";const n=i.div`
+  font-family: ${({theme:t})=>t.typography.fontAlternativeFamily};
+  font-weight: ${({theme:t})=>t.typography.fontAlternativeRegularWeight};
+  font-size: 1.25rem;
+  box-shadow: ${({elevation:t})=>t};
+  width: 14rem;
+  height: 10rem;
+  margin: 1rem;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,a=({children:t,value:e,as:r="div"})=>o.createElement(n,{as:r,elevation:e},t);export{a as ElevationCard};

package/esm/Interfaces.js

@@ -0,0 +1 @@
+

package/esm/Types.js

@@ -0,0 +1 @@
+

package/esm/components/Accordion/index.js

@@ -0,0 +1,51 @@
+import n,{useState as y}from"react";import r from"styled-components";import{UnmountClosed as g}from"react-collapse";import{mq as f}from"../../shared/media-queries.js";import h from"../../icons/components/ArrowDownIcon.js";const $=r.div`
+  display: flex;
+  flex-direction: column;
+  .ReactCollapse--collapse {
+    transition: height 300ms;
+  }
+`,u=r.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`,w=r.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  cursor: pointer;
+  margin: 0.5rem 0;
+`,b=r.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.75rem;
+  color: ${({theme:e})=>e.colors.text.dark};
+  transition: 200ms ease-in-out;
+  transform: ${({isOpen:e})=>`rotate(${e?"180deg":"0deg"})`};
+`,E=r.li`
+  border-top: ${({theme:e})=>`1px solid ${e.colors.gray.light2}`};
+  padding: ${({isOpen:e})=>e?"0.5rem 0 1rem 0":"0.5rem 0"};
+
+  &:last-child {
+    border-bottom: ${({theme:e})=>`1px solid ${e.colors.gray.light2}`};
+  }
+`,I=r.span`
+  color: ${({theme:e})=>e.colors.text.dark};
+  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
+  font-size: 0.9375rem;
+  font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
+`,k=r.div`
+  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
+  color: ${({theme:e})=>e.colors.text.dark};
+  font-size: 0.9375rem;
+  font-weight: ${({theme:e})=>e.typography.fontBaseRegularWeight};
+  line-height: 1.3;
+  transition: 200ms ease-in-out;
+  ${f("tablet")} {
+    padding: 0;
+  }
+  & > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+`,l=({items:e,...i})=>{const[c,m]=y({}),s=o=>{m(t=>({...t,[o]:!t[o]}))},p=o=>()=>{s(o)},d=o=>t=>{t.key==="Enter"&&s(o)};return n.createElement($,{...i},n.createElement(u,{className:"accordionList"},e.map((o,t)=>{const a=Boolean(c[t]);return n.createElement(E,{key:o.title,isOpen:a,className:"accordionItem"},n.createElement(w,{onClick:p(t),onKeyPress:d(t),className:"accordionItemTitle",role:"button",tabIndex:0,"aria-expanded":a,id:`panel${t}-header`,"aria-controls":`panel${t}-content`},n.createElement(I,{as:"span"},o.title),n.createElement(b,{isOpen:a},n.createElement(h,null))),n.createElement(g,{isOpened:a,key:t},n.createElement(k,{"aria-labelledby":`panel${t}-header`,id:`panel${t}-content`,role:"region",className:"wysiwyg",dangerouslySetInnerHTML:{__html:o.text}})))})))};export{l as Accordion,l as default};

package/esm/components/Badge/index.js

@@ -0,0 +1,35 @@
+import t from"react";import r from"styled-components";import a from"../../theme.js";const i=r.div`
+  border-radius: 0.75rem;
+  background: ${a.colors.secondary.main};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  box-sizing: border-box;
+  cursor: default;
+`,s=r(i)`
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  min-width: 1rem;
+  position: relative;
+`,m=r.div`
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  opacity: 0.1;
+  transform: scale(0.5);
+  background: ${a.colors.text.dark};
+  position: absolute;
+  top: 0;
+  left: 0;
+`,c=r.span`
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  color: white;
+  font-weight: ${({theme:e})=>e.typography.fontAlternativeBoldWeight};
+  font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
+`,h=e=>e>=100?"99+":`${e}`,l=({notificationAmount:e=0,withNumber:o=!0,...n})=>{if((e<=0||!e)&&o)return null;if(!o)return t.createElement(s,{...n},t.createElement(m,{"data-test":"middle-dot"}));const d=h(e);return t.createElement(i,{...n},t.createElement(c,null,d))};export{l as Badge,l as default};

package/esm/components/Button/index.js

@@ -0,0 +1,100 @@
+import n from"react";import e,{css as c}from"styled-components";import u from"../../theme.js";import $ from"../Spinner/index.js";import{BasicButtonTextStyle as g,ButtonRegularTextStyle as a,ButtonLargeTextStyle as b,ButtonSmallTextStyle as f}from"../../typography/ButtonText/index.js";const y=o=>{switch(o){case"smaller":return f;case"small":return a;case"regular":return a;case"large":return b;default:return a}},S=o=>`
+  min-width: 76px;
+  padding: ${o?"7px 10px 5.5px":"10px 10px 8px"};
+`,k=o=>`
+  min-width: 76px;
+  padding: ${o?"8px 10px 6px":"11px 10px 9px"};
+`,m=o=>`
+  min-width: 250px;
+  padding: ${o?"7px 22px 5px":"15px 22px 13px"};
+`,w=o=>`
+  min-width: 250px;
+  padding: ${o?"9px 22px 6px":"21px 22px 19px"};
+`,h=o=>r=>`
+  color: white;
+  border-color: ${o.colors[r].main};
+  background-color: ${o.colors[r].main};
+
+  :hover {
+    border-color: ${o.colors[r].light};
+    background-color: ${o.colors[r].light};
+  }
+
+  :active {
+    border-color: ${o.colors[r].dark};
+    background-color: ${o.colors[r].dark}
+  }
+
+  :focus {
+    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${o.colors[r].dark};
+  }
+`,B=o=>r=>`
+  color: ${o.colors[r].main};
+  border-color: ${o.colors[r].main};
+  background-color: transparent;
+
+  :hover {
+      color: white;
+      border-color: ${o.colors[r].light};
+      background-color: ${o.colors[r].light};
+  }
+
+  :active {
+    color: white;
+    border-color: ${o.colors[r].dark};
+    background-color: ${o.colors[r].dark};
+  }
+
+  :focus {
+    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${o.colors[r].dark};
+  }
+`,C=o=>r=>`
+  color: ${o.colors[r].main};
+  border-color: transparent;
+  background-color: transparent;
+
+  :hover {
+    color: ${o.colors[r].dark};
+  }
+
+  :active {
+    color: ${o.colors[r].light};
+  }
+`,T=o=>`
+  background-color: ${o.colors.gray.light4};
+  border-color: ${o.colors.gray.light4};
+  color: ${o.colors.gray.light1};
+  cursor: not-allowed;
+`,j=o=>`
+  border-color: transparent;
+  background-color: transparent;
+  color: ${o.colors.gray.light1};
+  cursor: not-allowed;
+`,v=e.button`
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  border: 2px solid transparent;
+  border-radius: 3px;
+  width: ${({fullWidth:o})=>o&&"100%"};
+
+  ${g}
+  ${({size:o})=>y(o)}
+  ${({size:o,isLoading:r})=>c`
+    ${o==="smaller"&&S(r)}
+    ${o==="small"&&k(r)}
+    ${o==="regular"&&m(r)}
+    ${o==="large"&&w(r)}
+  `}
+  background-color: transparent;
+  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
+  ${({variant:o,color:r,disabled:l,theme:t})=>c`
+    ${!l&&o==="solid"&&h(t)(r)}
+    ${!l&&o==="outline"&&B(t)(r)}
+    ${!l&&o==="flat"&&C(t)(r)}
+    ${l&&o!=="flat"&&T(t)}
+    ${l&&o==="flat"&&j(t)}
+  `}
+`,R=e($)``,z={smaller:1,small:1,regular:1.5,large:1.75},p=({size:o="small",color:r="primary",variant:l="solid",fullWidth:t=!1,isDisabled:x=!1,isLoading:s=!1,children:d,...i})=>n.createElement(v,{...i,color:r,disabled:x||s,fullWidth:t,theme:u,variant:l,size:o,isLoading:s},s?n.createElement(R,{color:"neutral",size:z[o]}):d);export{p as Button,p as default};

package/esm/components/Card/index.js

@@ -0,0 +1,8 @@
+import e from"react";import t from"styled-components";import a from"../../theme.js";const d=t.div`
+  background: ${a.colors.background.light};
+  ${({boxShadow:r})=>r&&`box-shadow: ${r};`}
+  ${({boxShadow:r})=>!r&&`box-shadow: 0 2px 4px rgba(0, 0, 0, 10%), 0 2px 4px rgba(0, 0, 0, 9%),
+    0 1px 5px rgba(0, 0, 0, 15%);`}
+  border-radius: 0 0 3px 3px;
+  ${({topBorder:r})=>r&&`border-top: 4px solid ${r};`}
+`,o=({...r})=>e.createElement(d,{topBorder:r.topBorder,boxShadow:r.boxShadow},r.children);export{o as Card,o as default};

package/esm/components/CheckBox/index.js

@@ -0,0 +1,56 @@
+import r from"react";import l,{css as t}from"styled-components";import{generateNameHash as p}from"../../shared/helpers.js";import o from"../../theme.js";import g from"../IconButton.js";import m from"../Icons/CheckIcon.js";const x=t`
+  width: 24px;
+  height: 24px;
+
+  svg {
+    width: 15px;
+    height: 15px;
+  }
+`,b=t`
+  width: 32px;
+  height: 32px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`,f={regular:x,large:b},u=t`
+  cursor: default;
+  border: 2px solid ${o.colors.gray.light1};
+`,y=e=>t`
+  svg {
+    fill: #fefefe;
+    opacity: 1;
+  }
+
+  :hover {
+  }
+
+  background: ${o.colors[e].main};
+  border: 2px solid ${o.colors[e].main};
+`,k=t`
+  background: ${o.colors.gray.light1};
+`,$=l.input.attrs({type:"checkbox"})`
+  display: none;
+`,v=l.label`
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  border: 2px solid ${o.colors.gray.light1};
+  border-radius: 3px;
+
+  ${e=>f[e.size]};
+
+  svg {
+    opacity: 0;
+  }
+
+  ${e=>e.isChecked&&y(e.color)};
+  ${e=>e.isDisabled&&u};
+
+  ${e=>e.isChecked&&e.isDisabled&&k};
+`,a=({name:e=p("check-box"),isDisabled:s=!1,size:d="regular",checked:c,color:i="secondary",onClick:n,...h})=>r.createElement(g,{onClick:n,isActive:c,isDisabled:s,color:i},r.createElement($,{...h,"data-validate":"checked",name:e,id:e,disabled:s}),r.createElement(v,{htmlFor:e,size:d,color:i,isChecked:c,isDisabled:s},r.createElement(m,null)));export{a as CheckBox,a as default};

package/esm/components/Chip/index.js

@@ -0,0 +1,23 @@
+import a from"react";import s from"styled-components";import{fadedColor as g}from"../../shared/helpers.js";import t from"../../theme.js";const u=({isDisabled:e,isActive:r,activeColor:o})=>r&&e?g(t.colors[o].main,.5):e?t.colors.gray.light4:r?t.colors[o].main:"transparent",h=({isActive:e,isDisabled:r})=>e||e&&r?t.colors.text.light:r?t.colors.text.disabled:t.colors.text.dark,y=(e="smaller")=>({smaller:"0.8125rem",small:"1rem",regular:"1rem",large:"1.25rem"})[e],x=s.div`
+  font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
+  font-size: ${({size:e})=>y(e)};
+  font-weight: ${({theme:e})=>e.typography.fontAlternativeBoldWeight};
+  line-height: 1.25;
+  letter-spacing: 0.1px;
+  display: inline-block;
+  cursor: ${({isDisabled:e})=>e?"auto":"pointer"};
+  align-items: center;
+  background: ${u};
+  color: ${h};
+  justify-content: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({isActive:e,isDisabled:r})=>!e&&!r?t.colors.background.dark:"transparent"};
+  border-radius: 1.293rem;
+`,k=s.span`
+  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`,i=({activeColor:e="primary",children:r,component:o="div",isActive:c,isDisabled:n,onClick:l,size:m,...d})=>{const p=f=>{!n&&l&&l(f)};return a.createElement(x,{...d,as:o,activeColor:e,isDisabled:n,isActive:c,size:m},a.createElement(k,{onClick:p},r))};export{i as Chip,i as default};

package/esm/components/DayPicker/DayPickerNavBar.js

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

package/esm/components/DayPicker/index.js

@@ -0,0 +1,34 @@
+import t from"react";import c from"react-day-picker";import n from"styled-components";import r from"../../theme.js";import s from"./DayPickerNavBar.js";import{MONTHS as y,WEEKDAYS_LONG as l,WEEKDAYS_SHORT as m,FIRST_DAY_OF_THE_WEEK as d}from"./localeUtils.js";import p from"./style.js";import"../Icons/Arrow.js";import"../../typography/BodyText/index.js";const k=n.div`
+  ${p}
+
+  font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
+  .DayPicker-wrapper {
+    &:focus {
+      outline: none;
+    }
+  }
+  .DayPicker-Weekday {
+    color: ${({theme:e})=>e.colors.gray.light1};
+  }
+  .DayPicker-Day {
+    font-size: 12px;
+    padding: 14px;
+    font-weight: ${({theme:e})=>e.typography.fontAlternativeBoldWeight};
+    color: ${({theme:e})=>e.colors.text.dark};
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 4px ${r.colors.gray.dark3};
+    }
+    &:not(.DayPicker--interactionDisabled):not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside) {
+      &:focus {
+        box-shadow: 0 0 4px ${r.colors.gray.dark3};
+      }
+      &:hover {
+        background-color: rgba(253, 171, 74, 0.25);
+      }
+    }
+    &.DayPicker-Day--disabled {
+      color: ${r.colors.gray.dark3};
+    }
+  }
+`,D={selected:{color:r.colors.text.light,background:r.colors.primary.main,fontWeight:700}},o=({locale:e="sv",...a})=>t.createElement(k,null,t.createElement(c,{...a,locale:e,months:y[e],weekdaysLong:l[e],weekdaysShort:m[e],firstDayOfWeek:d[e],navbarElement:i=>t.createElement(s,{...i,locale:e}),captionElement:t.createElement("div",null),modifiersStyles:D}));export{o as DayPicker,o as default};

package/esm/components/DayPicker/localeUtils.js

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