@kvdbil/components 3.3.5 → 3.4.0

package/cjs/components/OffCanvas/Overlay.js

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("react-transition-group"),n=require("styled-components");function i(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var a=i(t);const o={classNames:"backgroundTransition",timeout:{enter:400,exit:400},mountOnEnter:!0,unmountOnExit:!0},r=i(n).default.div`
+  position: fixed;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+
+  &.backgroundTransition-enter {
+    opacity: 0;
+  }
+
+  &.backgroundTransition-enter.backgroundTransition-enter-active {
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  &.backgroundTransition-exit {
+    opacity: 1;
+  }
+
+  &.backgroundTransition-exit.backgroundTransition-exit-active {
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+`;exports.default=({className:s,isOpen:u,onClick:c,transitionProps:d=o})=>a.default.createElement(e.CSSTransition,{in:u,...d,className:s},a.default.createElement(r,{onClick:()=>{c&&c()}}));

package/cjs/components/OffCanvas/index.js

@@ -0,0 +1,57 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("react-dom"),n=require("styled-components"),r=require("react-transition-group"),a=require("./Overlay.js"),i=require("./useClickOutside.js");function o(m){return m&&typeof m=="object"&&"default"in m?m:{default:m}}var s=o(t),l=o(n);const u={timeout:{enter:300,exit:300},mountOnEnter:!0,unmountOnExit:!0},d=l.default.div`
+  ${({animationName:m,animationDuration:v,width:h,from:$,backgroundColor:p,theme:g})=>`
+    position: fixed;
+    z-index: 1001;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    ${$==="left"?"left: 0;":"right: 0;"}
+    background-color: ${p||g.colors.background.light};
+    width: ${h};
+    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
+
+    
+    &.${m}--right-enter {
+      transform: translate3d(${h}, 0, 0);
+    }
+    
+    &.${m}--right-enter.${m}--right-enter-active {
+      transform: translate3d(0, 0, 0);
+      transition: transform 0.2s ease-in-out;
+    }
+    
+    &.${m}--right-exit {
+      transform: translate3d(0, 0, 0);
+    }
+    
+    &.${m}--right-exit.${m}--right-exit-active {
+      transform: translate3d(${h}, 0, 0);
+      transition: transform 0.2s ease-in-out;
+    }
+    
+    &.${m}--left-enter {
+      transform: translate3d(-${h}, 0, 0);
+    }
+    
+    &.${m}--left-enter.${m}--left-enter-active {
+      transform: translate3d(0, 0, 0);
+      transition: transform 0.2s ease-in-out;
+    }
+    
+    &.${m}--left-exit {
+      transform: translate3d(0, 0, 0);
+    }
+    
+    &.${m}--left-exit.${m}--left-exit-active {
+      transform: translate3d(-${h}, 0, 0);
+      transition: transform ${v}ms ease-in-out;
+    }
+  `}
+`,f=l.default.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+`,c=({animationName:m="offCanvasAnimation",animationDuration:v=300,backgroundColor:h,backgroundOverlay:$,children:p,from:g="right",isOpen:O,onClickOutside:x,width:C="375px",withPortal:y,transitionProps:E})=>{const b=t.useRef(null);i.useOutsideClick(b,()=>x==null?void 0:x()),$&&!x&&console.error("Please provide a clickOutside handler when using backgroundOverlay option in OffCanvas component");const w=`${m}--${g}`,k=s.default.createElement(s.default.Fragment,null,$&&s.default.createElement(a.default,{isOpen:O}),s.default.createElement(s.default.Fragment,null,s.default.createElement(r.CSSTransition,{in:O,className:`${m} ${w}`,classNames:w,...u,...E},s.default.createElement(d,{ref:b,animationName:m,animationDuration:v,backgroundColor:h,from:g,width:C},s.default.createElement(f,{className:`${m}-content`},p)))));return y?e.createPortal(k,document.body):k};exports.OffCanvas=c,exports.default=c;

package/cjs/components/OffCanvas/useClickOutside.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.useOutsideClick=(t,s)=>{const r=e.useCallback(n=>{t.current&&!t.current.contains(n.target)&&s()},[s,t]);e.useEffect(()=>(document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}),[r])};

package/cjs/components/RadioButton/index.js

@@ -0,0 +1,88 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/helpers.js"),o=require("../../theme.js"),a=require("../IconButton.js");function i(b){return b&&typeof b=="object"&&"default"in b?b:{default:b}}var l=i(e),s=i(r);const c={regular:r.css`
+  .circle {
+    &--outer {
+      height: 24px;
+      width: 24px;
+    }
+
+    &--inner {
+      height: 100%;
+      width: 100%;
+      transform: scale(0.6);
+    }
+  }
+`,large:r.css`
+  .circle {
+    &--outer {
+      height: 32px;
+      width: 32px;
+    }
+
+    &--inner {
+      height: 100%;
+      width: 100%;
+      transform: scale(0.6);
+    }
+  }
+`},d=r.css`
+  cursor: default;
+
+  .circle {
+    &--inner {
+      background-color: ${o.default.colors.gray.light1};
+    }
+
+    &--outer {
+      border: 2px solid ${o.default.colors.gray.light1};
+    }
+  }
+`,n=r.css`
+  .circle {
+    &--inner {
+      opacity: 1;
+      background-color: ${o.default.colors.gray.light1};
+    }
+  }
+`,u=s.default.label`
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  ${b=>c[b.size]};
+
+  ${b=>{return!b.isDisabled&&b.isChecked&&(m=b.color,r.css`
+  .circle {
+    &--inner {
+      opacity: 1;
+      background-color: ${o.default.colors[m].main};
+    }
+
+    &--outer {
+      border: 2px solid ${o.default.colors[m].main};
+    }
+  }
+`);var m}};
+  ${b=>b.isDisabled&&d};
+
+  ${b=>b.isChecked&&b.isDisabled&&n};
+`,f=s.default.input`
+  display: none;
+`,h=s.default.span`
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 50%;
+
+  border: 2px solid ${o.default.colors.gray.light1};
+`,g=s.default.span`
+  box-sizing: border-box;
+  opacity: 0;
+  margin: auto;
+  border-radius: 50%;
+  background-color: ${o.default.colors.gray.light1};
+
+  position: absolute;
+  top: 0;
+  left: 0;
+`,p=({name:b=t.generateNameHash("radio-button"),size:m="regular",checked:x=!1,isDisabled:y=!1,color:$="secondary",onChange:k,...v})=>l.default.createElement(a.default,{onClick:k,isActive:x,isDisabled:y,color:$},l.default.createElement(f,{"data-validate":"checked",type:"radio",name:b,id:b,onChange:k,disabled:y,...v}),l.default.createElement(u,{htmlFor:b,size:m,color:$,isChecked:x,isDisabled:y},l.default.createElement(h,{className:"circle circle--outer"},l.default.createElement(g,{className:"circle circle--inner"}))));exports.RadioButton=p,exports.default=p;

package/cjs/components/Range/index.js

@@ -0,0 +1,44 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),a=require("../../theme.js"),l=require("../../typography/BodyText/index.js"),o=require("../../typography/Heading/index.js");function r(m){return m&&typeof m=="object"&&"default"in m?m:{default:m}}require("../../shared/media-queries.js");var i=r(e),n=r(t);const s=n.default.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+`,u=n.default.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+`,d=n.default(o.Display1)`
+  color: ${({color:m})=>a.default.colors[m].main};
+  line-height: 1;
+  margin-top: 0;
+  margin-bottom: 0;
+`,c=n.default(l.CaptionLink)`
+  flex: 1;
+  color: ${a.default.colors.gray.light1};
+  line-height: 1.2;
+  position: relative;
+  text-align: center;
+  &:before {
+    content: '';
+    background: ${({color:m})=>a.default.colors[m].main};
+    margin: 0 auto 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 12px;
+    top: 34px;
+    position: relative;
+    width: 2px;
+  }
+`,p=n.default(c)`
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: ${({color:m})=>a.default.colors[m].main};
+    top: 40px;
+    left: 50%;
+    transform: translate(0, -50%);
+  }
+`,f=({displayValue:m,maxValue:g,minValue:h,color:x="primary"})=>i.default.createElement(s,null,m&&i.default.createElement(d,{as:"span",color:x},m),i.default.createElement(u,null,i.default.createElement(p,{as:"span",color:x},h),i.default.createElement(c,{as:"span",color:x},g)));exports.Range=f,exports.default=f;

package/cjs/components/Select/components/test-icon.js

@@ -0,0 +1 @@
+"use strict";function e(r){return r&&typeof r=="object"&&"default"in r?r:{default:r}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react"));exports.TestIcon=()=>t.default.createElement("svg",{viewBox:"0 0 896.003 896.004",height:"18px",width:"18px",y:"0px",x:"0px",xmlns:"http://www.w3.org/2000/svg"},t.default.createElement("path",{d:"M850.321,663.513C774.05,802.057,626.63,896.004,457.168,896.004c-247.688,0-448.478-200.578-448.478-448.002 S209.479,0,457.168,0c203.805,0,375.577,135.92,430.145,321.882L428.365,478.82L850.321,663.513z M614.342,318.945 c43.631,0,78.998-35.7,78.998-79.736c0-44.039-35.367-79.735-78.998-79.735c-43.63,0-78.999,35.696-78.999,79.735 C535.343,283.245,570.712,318.945,614.342,318.945"}));

package/cjs/components/Select/index.js

@@ -0,0 +1,44 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("react-select"),o=require("styled-components"),t=require("../../shared/constants.js"),a=require("../../theme.js"),l=require("../FieldLabel.js");function i(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}var s=i(e),d=i(r),n=i(o);const u=n.default.div`
+  font-family: ${({theme:y})=>y.typography.fontBaseFamily};
+  position: relative;
+`,c=y=>y&&{paddingLeft:"2.5rem"},f=y=>y&&{border:`1px solid ${a.default.colors.gray.light1}`,color:a.default.colors.gray.dark1,fill:a.default.colors.gray.light1},m=n.default.div`
+  position: absolute;
+  z-index: 1;
+  top: 0.5rem;
+  margin: 0.35rem 0.75rem;
+
+  fill: ${a.default.colors.gray.dark5};
+  transition: ${t.DEFAULT_TRANSITION_MS};
+
+  ${y=>y.isDisabled&&`
+    fill: ${a.default.colors.gray.light1};
+`}
+
+  ${y=>y.isFocused&&`
+    fill: ${y.theme.colors.text.dark};
+`}
+`,p=n.default.span`
+  display: block;
+  font-family: ${({theme:y})=>y.typography.fontBaseFamily};
+  font-size: 0.81rem;
+  margin-top: 0.25rem;
+  margin-left: 0.85rem;
+  color: ${({hasError:y})=>y?a.default.colors.error.main:a.default.colors.text.disabled};
+`,h=n.default(y=>s.default.createElement("svg",{...y},s.default.createElement("symbol",{id:"icon-arrow",viewBox:"0 0 19 19"},s.default.createElement("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})),s.default.createElement("use",{xlinkHref:"#icon-arrow"})))`
+  width: 0.8rem;
+  height: 0.8rem;
+  margin: 0 0.5rem;
+  ${y=>y.$isFocused&&`color: ${y.$theme.colors.text.dark}`}
+  ${y=>y.$isDisabled&&`color: ${y.$theme.colors.gray.dark1}`}
+
+
+  path {
+    fill: currentColor;
+    stroke: currentColor;
+  }
+
+  transition: transform ${t.DEFAULT_TRANSITION_MS};
+
+  transform: ${y=>y.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
+  transform-origin: 50% 60%;
+`,g=({selectProps:{menuIsOpen:y=!1},isFocused:D=!1,isDisabled:L})=>s.default.createElement(h,{$isDisabled:L,$isFocused:D,$isMenuOpen:y,$theme:a.default}),b=({className:y,color:D="primary",forwardRef:L,hasError:I=!1,height:S,helperText:B,isDisabled:k=!1,onBlur:M=()=>null,onFocus:N=()=>null,onInputChange:O=()=>null,placeholder:_="",name:w,...x})=>{const[v,E]=e.useState(!1),[j,R]=e.useState(""),T=({isSelected:$,isFocused:F,isDisabled:C})=>$?a.default.colors[D].main:C?a.default.colors.background.light:F?a.default.colors.background.gray:a.default.colors.background.light,z=(($,F)=>F?a.default.colors.error.main:$?a.default.colors.text.dark:a.default.colors.gray.light1)(v,I);return s.default.createElement(u,{className:y},x.label&&s.default.createElement(l.Label,{htmlFor:w,height:S,isFocused:v,hasValue:Boolean(x.value||j),disabled:k,theme:a.default,hasError:I},x.label),x.prefix&&s.default.createElement(m,{isDisabled:k,isFocused:v},x.prefix),s.default.createElement(d.default,{...x,inputId:w,name:w,ref:L,isDisabled:k,onInputChange:($,F)=>{O($,F),R($)},placeholder:_,onFocus:$=>{E(!0),N($)},onBlur:$=>{E(!1),M($)},styles:{control:$=>({...$,borderRadius:0,color:a.default.colors.text.dark,fontFamily:a.default.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:a.default.colors.background.light,borderColor:z,boxShadow:"none","&:hover":{borderColor:"none"},...f(k),...c(Boolean(x.prefix))}),placeholder:$=>({...$,display:v?"static":"none"}),singleValue:$=>({...$,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:$=>({...$,padding:"8px 0"}),menu:$=>({...$,borderRadius:0,boxShadow:a.default.elevations.elevation2,zIndex:2,padding:"0"}),option:($,{isSelected:F,isFocused:C,isDisabled:q})=>({...$,padding:"1rem",cursor:q?"not-allowed":"pointer","&:hover":{background:T({isSelected:F,isFocused:!0,isDisabled:q})},background:T({isSelected:F,isFocused:C}),...c(Boolean(x.prefix))}),valueContainer:$=>({...$,position:"static",padding:S?S-1+"rem 0 ":0,height:S?"auto":"21px"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:g}}),B&&s.default.createElement(p,{hasError:I},B))};exports.Select=b,exports.default=b;

package/cjs/components/Snackbar/index.js

@@ -0,0 +1,78 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../theme.js"),o=require("../Icons/CheckCircle.js"),n=require("../Icons/Close.js"),i=require("../Icons/ErrorCircle.js"),a=require("../Icons/InfoCircle.js"),l=require("react-transition-group");function c(E){return E&&typeof E=="object"&&"default"in E?E:{default:E}}var s=c(e),u=c(t);const d={top:t.css`
+    top: 0;
+  `,bottom:t.css`
+    bottom: 0;
+  `},m={right:t.css`
+    right: 0;
+  `,center:t.css`
+    left: 50%;
+    transform: translate(-50%, 0);
+  `,left:t.css`
+    left: 0;
+  `},f=u.default.div`
+  font-family: ${({theme:E})=>E.typography.fontBaseFamily};
+  position: fixed;
+  display: flex;
+  align-items: center;
+
+  line-height: 1rem;
+  margin: 1rem;
+
+  max-width: 630px;
+
+  border-radius: 0.4rem;
+  padding: 1.15rem 1.25rem;
+
+  font-weight: ${({theme:E})=>E.typography.fontBaseBoldWeight};
+  font-size: 0.875rem;
+
+  box-shadow: ${r.default.elevations.elevation8};
+  background-color: ${E=>E.color!=="none"?r.default.colors[E.color].main:r.default.colors.background.light};
+  color: ${E=>E.color!=="none"?r.default.colors.text.light:r.default.colors.text.dark};
+
+  ${E=>d[E.origin.vertical||"bottom"]}
+  ${E=>m[E.origin.horizontal||"left"]}
+
+  transition: opacity ${200}ms ease-in;
+
+  &.${"anim"}-enter {
+    opacity: 0;
+  }
+  &.${"anim"}-enter-active {
+    opacity: 1;
+  }
+  &.${"anim"}-exit {
+    opacity: 1;
+  }
+  &.${"anim"}-exit-active {
+    opacity: 0;
+  }
+`,g=u.default.div`
+  display: inline-flex;
+  margin: -0.25rem 0;
+  margin-right: 0.75rem;
+
+  ${E=>E.type==="text"&&"margin-right: 0;"}
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: ${E=>E.color!=="none"?r.default.colors.background.light:r.default.colors.background.dark};
+  }
+`,p=u.default(g)`
+  cursor: pointer;
+
+  /* Bigger click area */
+  padding: 0.25rem;
+
+  /* Negate padding */
+  margin: -0.25rem;
+  margin-left: 0.5rem;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`,h=u.default.span`
+  flex: 1;
+`,x={error:s.default.createElement(i.default,null),success:s.default.createElement(o.default,null),info:s.default.createElement(a.default,null),text:""},y=({message:E,color:$="none",type:v="info",action:k,isOpen:C,origin:j={},onClose:b=()=>{},onExited:w=()=>{},autoHideDuration:q=4e3,...I})=>(e.useEffect(()=>{const B=setTimeout(b,q);return()=>clearTimeout(B)},[q,b]),s.default.createElement(l.CSSTransition,{in:C,timeout:200,mountOnEnter:!0,unmountOnExit:!0,onExited:w,classNames:"anim"},s.default.createElement(f,{...I,color:$,origin:j},s.default.createElement(g,{color:$,type:v},x[v]),s.default.createElement(h,null,E),k&&k,s.default.createElement(p,{color:$!=null?$:"none",onClick:b},s.default.createElement(n.default,null)))));exports.Snackbar=y,exports.default=y;

package/cjs/components/Spinner/index.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../theme.js");function a(u){return u&&typeof u=="object"&&"default"in u?u:{default:u}}var o=a(e),s=a(r);const i=u=>{const n={smaller:1,small:2,regular:3,large:4};return typeof u=="number"?u:n[u]||n.regular},l=r.keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`,d=s.default.div`
+  display: inline-block;
+  border-radius: 50%;
+  border-top: ${({theme:u,color:n,size:m})=>`${i(m)/10}em solid ${u.colors[n].main}`};
+  border-bottom: ${({size:u})=>i(u)/10+"em solid rgba(0, 0, 0, 0.1);"};
+  border-right: ${({size:u})=>i(u)/10+"em solid rgba(0, 0, 0, 0.1);"};
+  border-left: ${({size:u})=>i(u)/10+"em solid rgba(0, 0, 0, 0.1);"};
+  width: ${({size:u})=>i(u)}em;
+  height: ${({size:u})=>i(u)}em;
+  animation: ${l} ${({speed:u})=>(n=>{const m={slow:"2s",default:"1s",fast:"0.5s"};return m[n]||m.default})(u)} infinite linear;
+  will-change: transform;
+`;exports.default=({size:u="regular",color:n="primary",speed:m="default",...f})=>o.default.createElement(d,{...f,role:"status","aria-live":"polite","aria-busy":"true",size:u,speed:m,color:n,theme:t.default});

package/cjs/components/Stepper/index.js

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../theme.js"),a=require("../../typography/Heading/index.js");function l(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}require("../../shared/media-queries.js");var i=l(e),n=l(t);const d=n.default.div`
+  min-height: 4rem;
+`,u=n.default.div`
+  margin: auto;
+  width: 2px;
+  height: 100%;
+  background-color: ${r.default.colors.primary.main};
+`,o=n.default.div`
+  margin-right: 0.75rem;
+`,m=n.default.div`
+  font-family: ${({theme:s})=>s.typography.fontBaseFamily};
+  display: flex;
+  padding-bottom: 1rem;
+
+  &:last-child {
+    ${u} {
+      display: none;
+    }
+  }
+`,f=n.default.div`
+  width: 3rem;
+  height: 3rem;
+  border-radius: 3rem;
+
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${r.default.colors.primary.main};
+`,c=n.default(a.Title)`
+  font-size: 1.5rem;
+  font-variant: lining-nums;
+`;exports.Stepper=({children:s,...h})=>i.default.createElement(d,{...h},s.map((y,p)=>i.default.createElement(m,{key:p},i.default.createElement(o,null,i.default.createElement(f,null,i.default.createElement(c,null,p+1)),i.default.createElement(u,null)),y)));

package/cjs/components/StepperAccordion/index.js

@@ -0,0 +1,72 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../theme.js"),l=require("../../typography/Heading/index.js"),i=require("../Icons/CheckIcon.js"),a=require("../Icons/Arrow.js"),o=require("../../shared/helpers.js"),s=require("react-collapse");function n(C){return C&&typeof C=="object"&&"default"in C?C:{default:C}}require("../../shared/media-queries.js");var d=n(e),c=n(r);const u=c.default.div`
+  .ReactCollapse--collapse {
+    transition: height ${"200ms"} ease-in-out;
+  }
+`,m=r.css`
+  margin-top: 0.25rem;
+  transform: rotate(-180deg);
+`,f=c.default.div`
+  display: flex;
+  align-items: center;
+  height: 4rem;
+
+  color: ${C=>C.isDisabled?t.default.colors.text.disabled:t.default.colors.text.dark};
+`,p=c.default(l.Title)`
+  margin: 0;
+`,h=c.default(a.default)`
+  margin-left: auto;
+  height: 1.25rem;
+  width: 1.25rem;
+  margin-top: -0.75rem;
+
+  fill: currentColor;
+
+  transition: ${"200ms"};
+  transform: rotate(0deg);
+  transform-origin: center;
+  ${C=>C.isExpanded&&m};
+`,g=c.default.div`
+  font-family: ${({theme:C})=>C.typography.fontBaseFamily};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 1.25rem;
+  margin-right: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 2rem;
+  border: 2px solid ${C=>t.default.colors[C.color].main};
+
+  svg {
+    fill: currentColor;
+    height: 1rem;
+    width: 1rem;
+
+    /* Kvd.se compatible stuff */
+    margin: 0;
+    top: inherit;
+    left: inherit;
+    font-size: inherit;
+  }
+
+  span {
+    font-variant: lining-nums;
+    margin-top: 0.1rem;
+  }
+
+  transition: background-color ${"200ms"};
+  ${C=>{return C.isComplete&&(x=C.color,r.css`
+  color: white;
+  background-color: ${t.default.colors[x].main};
+`);var x}};
+  ${C=>{return C.isDisabled&&(x=C.isComplete,E=C.color,r.css`
+  fill: white;
+  border: 2px solid ${o.fadedColor(t.default.colors[E].main,.2)};
+
+  ${x&&`
+      border: 2px solid ${o.fadedColor(t.default.colors[E].main,0)};
+      background-color: ${o.fadedColor(t.default.colors[E].main,.5)};
+    `}
+`);var x,E}};
+`,b=C=>{const[x,E]=e.useState(C.isExpanded||!1),y=e.useCallback(()=>{C.isDisabled||E($=>!$)},[C.isDisabled]);e.useEffect(()=>{E(C.isExpanded||!1)},[C.isDisabled,C.isExpanded]);const v=C.step||C.step===0;return d.default.createElement(u,null,d.default.createElement(f,{...C,onClick:$=>{const q=C.onClick||y;C.isDisabled||q($)},isExpanded:x,isDisabled:C.isDisabled||!1},v&&d.default.createElement(g,{isComplete:C.isComplete||!1,isDisabled:C.isDisabled||!1,color:C.color||"primary"},C.isComplete?d.default.createElement(i.default,null):d.default.createElement("span",null,C.step)),d.default.createElement(p,null,C.title),d.default.createElement(h,{isExpanded:x})),d.default.createElement(s.Collapse,{isOpened:x},C.children),C.closedChildren&&C.closedChildren)};exports.StepperAccordion=b,exports.default=b;

package/cjs/components/Tabs/index.js

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components");function o(c){return c&&typeof c=="object"&&"default"in c?c:{default:c}}var r=o(e),i=o(t);const l=i.default.div`
+  display: inline-flex;
+  border-bottom: 1px solid ${({theme:c})=>c.colors.gray.light4};
+`,a=i.default.div`
+  font-family: ${({theme:c})=>c.typography.fontAlternativeFamily};
+  font-weight: ${({theme:c})=>c.typography.fontAlternativeRegularWeight};
+  padding: 1em;
+  border-bottom: ${({theme:c,isActive:d,activeColor:s})=>d?`3px solid ${c.colors[s].main}`:"3px solid transparent"};
+  transition: color 0.3s ease, border 0.3s ease;
+  cursor: pointer;
+`,n=({activeIndex:c,activeColor:d="primary",children:s,onTabClick:u,className:v})=>e.Children.count(s)<=1?(console.error("<Tabs /> component has too few children!"),null):r.default.createElement(l,{className:v},e.Children.map(s,(p,f)=>{if(!p)return null;const m=p.props.onClick;return r.default.createElement(a,{...p.props,isActive:c===f,activeColor:d,onClick:h=>{u(f),typeof m=="function"&&m(h)},as:p.type||"div"},p.props.children)}));exports.Tab=({children:c,isActive:d=!1,onClick:s,activeColor:u="primary"})=>r.default.createElement(a,{isActive:d,onClick:s,activeColor:u},c),exports.Tabs=n,exports.default=n;

package/cjs/components/TextArea/index.js

@@ -0,0 +1,55 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),l=require("../../theme.js"),t=require("../FieldLabel.js"),a=require("../../typography/BodyText/index.js");function o(b){return b&&typeof b=="object"&&"default"in b?b:{default:b}}var d=o(e),s=o(r);const i=r.css`
+  border: 1px solid ${l.default.colors.gray.light1};
+  color: ${l.default.colors.gray.dark1};
+  fill: ${l.default.colors.gray.light1};
+`,n=r.css`
+  border: 1px solid ${l.default.colors.error.main};
+`,c=r.css`
+  color: ${l.default.colors.text.dark};
+  border: 1px solid ${l.default.colors.text.dark};
+  fill: ${l.default.colors.text.dark};
+`,u=s.default.div`
+  position: relative;
+  padding: 0;
+  display: inline-block;
+`,f=s.default.div`
+  display: inline-black;
+
+  color: ${l.default.colors.gray.light1};
+  fill: ${l.default.colors.gray.light1};
+  background-color: ${l.default.colors.background.light};
+
+  border: 1px solid ${l.default.colors.gray.light1};
+  border-radius: 0.25em;
+  transition: all 150ms;
+
+  padding: 0.7rem 0.75rem;
+
+  ${({hasError:b,isFocused:x})=>!b&&x&&c}
+  ${({disabled:b})=>b&&i}
+  ${({hasError:b})=>b&&n}
+  ${({centered:b})=>b&&"text-align: center;"}
+`,h=s.default.textarea`
+  ${a.BodyTextStyle}
+
+  width: 100%;
+  cursor: text;
+  outline: none;
+  border: none;
+  background-color: transparent;
+
+  ${({resize:b})=>!b&&"resize: none;"}
+`,m=s.default.div`
+  font-family: ${({theme:b})=>b.typography.fontBaseFamily};
+`,p=s.default.span`
+  display: block;
+  font-family: ${({theme:b})=>b.typography.fontBaseFamily};
+  font-size: 0.81rem;
+
+  margin-top: 0.25rem;
+  margin-left: 0.85rem;
+
+  color: ${({hasError:b})=>b?l.default.colors.error.main:l.default.colors.text.dark};
+
+  ${({centered:b})=>b&&"width: 100%; text-align: center; display: block;"}
+`,y=({placeholder:b="",isDisabled:x=!1,centered:g=!1,hasError:E=!1,className:j,helperText:F,label:k="",resize:q=!0,...$})=>{const[v,B]=e.useState(!1),z=Boolean($.value);return d.default.createElement(u,{className:j},d.default.createElement(f,{isFocused:v,disabled:x,centered:g,hasError:E,hasPlaceholder:!!b},d.default.createElement(h,{...$,resize:q,onFocus:()=>B(!0),onBlur:()=>B(!1),disabled:x,theme:l.default,placeholder:k&&!v?"":b}),$.suffix&&d.default.createElement(m,null,$.suffix)),k&&d.default.createElement(t.Label,{isFocused:v,centered:g,hasError:E,hasValue:z,disabled:x,theme:l.default},k),F&&d.default.createElement(p,{centered:g,hasError:E},F))};exports.TextArea=y,exports.default=y;

package/cjs/components/Textfield/index.js

@@ -0,0 +1,55 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),l=require("../../theme.js"),t=require("../FieldLabel.js"),a=require("../../typography/BodyText/index.js");function o(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}var d=o(e),s=o(r);const i=r.css`
+  border: 1px solid ${l.default.colors.gray.light1};
+  color: ${l.default.colors.gray.dark1};
+  fill: ${l.default.colors.gray.light1};
+`,n=r.css`
+  border: 1px solid ${l.default.colors.error.main};
+`,c=r.css`
+  color: ${l.default.colors.text.dark};
+  border: 1px solid ${l.default.colors.text.dark};
+  fill: ${l.default.colors.text.dark};
+`,u=s.default.div`
+  position: relative;
+  padding: 0;
+  display: block;
+`,f=s.default.div`
+  display: flex;
+  text-align: center;
+  align-items: center;
+
+  color: ${l.default.colors.gray.light1};
+  fill: ${l.default.colors.gray.light1};
+  background-color: ${l.default.colors.background.light};
+
+  border: 1px solid ${l.default.colors.gray.light1};
+  border-radius: 0.25em;
+  transition: all 150ms;
+
+  padding: 0.7rem 0.75rem 0.6rem;
+
+  ${({hasError:x,isFocused:y})=>!x&&y&&c}
+  ${({disabled:x})=>x&&i}
+  ${({hasError:x})=>x&&n}
+  ${({centered:x})=>x&&"text-align: center;"}
+`,p=s.default.input`
+  ${a.BodyTextStyle}
+  width: 100%;
+  cursor: text;
+  outline: none;
+  border: none;
+  background-color: transparent;
+`,h=s.default.div`
+  font-family: ${({theme:x})=>x.typography.fontBaseFamily};
+  line-height: 0px;
+  margin-top: 2px;
+`,m=s.default.span`
+  ${a.CaptionStyle}
+  line-height: normal;
+  display: block;
+  margin-top: 0.25rem;
+  margin-left: 0.85rem;
+
+  color: ${({hasError:x})=>x?l.default.colors.error.main:l.default.colors.text.dark};
+
+  ${({centered:x})=>x&&"width: 100%; text-align: center; display: block;"}
+`,g=({placeholder:x="",isDisabled:y=!1,centered:b=!1,hasError:E=!1,className:q,helperText:B,label:k="",onBlur:T=()=>null,onFocus:w=()=>null,forwardRef:S,...$})=>{const[v,j]=e.useState(!1),L=Boolean($.value);return d.default.createElement(u,{className:q},d.default.createElement(f,{isFocused:v,disabled:y,centered:b,hasError:E,hasPlaceholder:!!x},d.default.createElement(p,{...$,ref:S,onFocus:F=>{j(!0),w(F)},onBlur:F=>{j(!1),T(F)},disabled:y,theme:l.default,placeholder:k&&!v?"":x}),$.suffix&&d.default.createElement(h,null,$.suffix)),k&&d.default.createElement(t.Label,{isFocused:v,centered:b,hasError:E,hasValue:L,disabled:y,theme:l.default},k),B&&d.default.createElement(m,{centered:b,hasError:E},B))};exports.TextField=g,exports.default=g;

package/cjs/components/TimePicker/index.js

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../Chip/index.js");function i(m){return m&&typeof m=="object"&&"default"in m?m:{default:m}}require("../../shared/helpers.js"),require("../../theme.js");var a=i(e);const l=i(t).default.ul`
+  max-width: 20rem;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.625rem 0.75rem;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+`,d=(m,n)=>Array.isArray(n)?Boolean(n.find(u=>u.getTime()===m.getTime())):(n==null?void 0:n.getTime())===m.getTime(),s=({timeSlots:m,onTimeSlotClick:n,selectedTimes:u,disabledTimes:f,...g})=>a.default.createElement(l,{...g},m.map(({text:T,date:o})=>{const c=d(o,u),p=d(o,f);return a.default.createElement(r.Chip,{component:"li","data-selected":c,"data-disabled":p,isDisabled:p,isActive:c,key:o.getTime(),onClick:()=>!c&&!p&&n(o)},T)}));exports.TimePicker=s,exports.default=s;

package/cjs/components/TimePicker/testHelper.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.generateTimeSlots=r=>{const a=new Date("2020/02/02"),t=new Date(a);return Array.from({length:r},(n,e)=>({date:new Date(t.setTime(t.getDate()+60*e*60*1e3)),text:e<10?`0${e+1}:00`:`${e+1}:00`}))};

package/cjs/components/Toggle/index.js

@@ -0,0 +1,39 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),o=require("../../theme.js");function i(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var l=i(e),r=i(t);const a=r.default.div`
+  display: flex;
+  position: relative;
+  border-top: ${({theme:s})=>`1px solid ${s.colors.gray.light6}`};
+  border-bottom: ${({theme:s})=>`1px solid ${s.colors.gray.light6}`};
+  padding: 4px;
+`,c=r.default.div`
+  font-family: ${({theme:s})=>s.typography.fontBaseFamily};
+  font-weight: ${({theme:s})=>s.typography.fontBaseRegularWeight};
+  display: flex;
+  min-height: 4rem;
+  align-items: center;
+  transition: 150ms 50ms;
+  flex: 1;
+  z-index: 2;
+  position: relative;
+  cursor: pointer;
+
+  color: ${s=>s.isActive?o.default.colors.text.light:o.default.colors.text.dark};
+`,n=r.default.div`
+  z-index: 0;
+  background-color: ${s=>o.default.colors[s.color].main};
+  position: absolute;
+
+  border-radius: 0.25rem;
+
+  top: 4px;
+  left: 4px;
+  width: calc(50% - 4px);
+  height: calc(100% - 8px);
+
+  transition: left 250ms ease-in-out;
+
+  ${s=>s.active==="RIGHT"&&`
+    left: calc(50%);
+  `}
+
+  ${s=>!s.active&&"display: none;"}
+`;exports.Toggle=({onChange:s,...d})=>{const[f,u]=e.useState(d.active);return e.useEffect(()=>{u(d.active)},[d.active]),l.default.createElement(a,{...d},l.default.createElement(n,{color:d.color,active:f}),l.default.createElement(c,{onClick:()=>{u("LEFT"),s("LEFT")},isActive:f==="LEFT",color:d.color},d.left),l.default.createElement(c,{onClick:()=>{u("RIGHT"),s("RIGHT")},isActive:f==="RIGHT",color:d.color},d.right))};