@kvdbil/components 3.3.5 → 3.4.0

package/esm/components/InlineStepper/StepCircle.js

@@ -0,0 +1,43 @@
+import r from"react";import i from"styled-components";import t from"../../theme.js";import s from"../Icons/CheckIcon.js";const l=e=>({active:{background:t.colors.primary.main,color:t.colors.text.light,border:`1px solid ${t.colors.primary.main}`},completed:{background:t.colors.success.main,color:t.colors.text.light,border:`1px solid ${t.colors.success.main}`},disabled:{background:e,color:t.colors.primary.main,border:`1px solid ${t.colors.primary.main}`}}),a=i.div`
+  box-sizing: content-box;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: ${({state:e,backgroundColor:o})=>l(o)[e].border};
+  justify-content: center;
+  background-color: ${({state:e,backgroundColor:o})=>l(o)[e].background};
+  color: ${({state:e,backgroundColor:o})=>l(o)[e].color};
+  &:after {
+    content: '';
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    top: -11px;
+    left: -11px;
+    position: absolute;
+    z-index: 2;
+    border: ${({backgroundColor:e})=>`10px solid ${e}`};
+  }
+`,d=i.div`
+  display: flex;
+  font-size: 1.25rem;
+  line-height: 1;
+  font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
+  font-weight: ${({theme:e})=>e.typography.fontAlternativeBoldWeight};
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+`,m=i.div`
+  width: 14px;
+  height: 14px;
+  display: flex;
+  & svg {
+    fill: ${({theme:e})=>e.colors.text.light};
+    width: 100%;
+  }
+`,p=({state:e,step:o,backgroundColor:c=t.colors.background.light,...n})=>r.createElement("div",null,r.createElement(a,{className:e,state:e,...n,backgroundColor:c},r.createElement(d,{as:"div"},e==="completed"?r.createElement(m,null,r.createElement(s,{className:""})):r.createElement("span",{className:"step-content-text"},o))));export{p as default};

package/esm/components/InlineStepper/index.js

@@ -0,0 +1,7 @@
+import m,{cloneElement as i}from"react";import d from"styled-components";import h from"../../theme.js";const u=d.div`
+  min-height: 4rem;
+  padding: 10px 0;
+  display: ${({orientation:e})=>e==="horizontal"?"flex":"block"};
+  justify-content: space-between;
+  background-color: ${({backgroundColor:e})=>e};
+`,y=(e,r)=>i(e,r),f=({children:e,activeStep:r=0,orientation:n="horizontal",backgroundColor:l=h.colors.background.light,...c})=>{const p=(Array.isArray(e)?e:[e]).map((o,t)=>{var s;const a={active:t===r,step:t+1,completed:t<r,disabled:t>r,children:(s=o==null?void 0:o.props)==null?void 0:s.children,orientation:n,backgroundColor:l};return y(o,a)});return m.createElement(u,{...c,orientation:n,backgroundColor:l},p)};export{f as InlineStepper};

package/esm/components/ListItem/Bacon.js

@@ -0,0 +1 @@
+import t from"react";const e=({color:c="black"})=>t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 1000 1000",fill:c},t.createElement("title",null,"Bacon"),t.createElement("path",{d:"M7204.2 5021.9c-224.4-46.1-422.8-204.4-537-430.8-32.1-66.1-98.2-226.4-144.3-358.7-128.3-368.7-210.4-521-362.7-677.3-210.4-214.4-458.9-312.6-903.8-354.7-364.7-36.1-527-90.2-659.3-222.4-104.2-104.2-150.3-246.5-188.4-585.1-16-162.3-44.1-332.6-62.1-378.7-100.2-284.5-320.6-410.8-799.5-456.9-342.7-32.1-515-98.2-637.2-242.5-100.2-116.2-132.3-224.4-164.3-569.1-38.1-424.8-88.2-545.1-268.5-667.3C2354.8-3.8 2220.6-39.9 1899.9-76c-148.3-18-328.6-50.1-402.8-72.1C1040.3-288.4 647.5-633 401-1108c-158.3-306.6-252.5-605.2-292.6-921.8-24-196.4 4-396.8 72.1-511 26-44.1 529-559.1 1116.2-1144.2 1004-1001.9 1074.1-1068 1176.3-1100.1 232.5-76.1 537 0 719.4 176.3 138.3 134.3 214.4 282.6 342.7 663.3 64.1 194.4 148.3 404.8 186.4 466.9 166.3 278.5 484.9 438.8 967.9 486.9 474.9 48.1 629.2 96.2 773.5 240.5 122.2 122.2 152.3 218.4 188.3 617.2 22.1 246.5 38.1 328.6 78.2 410.8 120.2 248.5 274.5 328.7 753.4 384.7 290.6 34.1 454.9 82.2 561.1 166.3 158.3 130.3 208.4 264.5 238.5 655.3 12 144.3 34.1 306.6 50.1 360.7 78.1 256.5 276.5 386.8 657.3 430.9 312.6 36.1 515 78.1 675.3 140.3 450.9 174.3 843.6 593.1 1066 1132.2 132.3 320.6 168.3 486.9 168.3 781.5-2 436.8 82.1 322.6-1140.2 1549-821.6 823.6-1066 1058.1-1144.2 1096.1-116.3 56.1-282.6 76.2-410.8 48.1zm356.7-527l130.3-126.3-70.1-118.2c-40.1-64.1-132.2-250.5-204.4-412.8-220.4-495-340.7-685.3-567.1-897.7-248.5-236.4-551.1-358.7-997.9-400.8-400.8-38.1-585.1-130.3-691.3-346.7-50.1-104.2-66.1-172.3-90.2-404.8-56.1-497-130.2-651.3-376.7-769.5-122.2-60.1-186.4-74.2-611.2-130.3-362.7-48.1-563.1-188.4-633.2-438.8-16-58.1-40.1-222.4-52.1-368.7-34.1-426.8-100.2-569.1-314.6-681.3-144.3-74.1-236.5-98.2-511-126.2-513-52.1-843.6-204.4-1160.2-535-172.3-180.4-288.6-348.7-400.8-583.1-90.2-188.4-188.4-472.9-208.4-611.2-8-52.1-22-98.2-30.1-104.2-8-4-72.1 50.1-140.3 122.3l-126.2 130.2 12 174.3c20 326.7 154.3 721.4 340.7 999.9 266.5 400.8 643.2 617.2 1142.2 655.3 615.2 48.1 983.9 316.6 1106.1 803.6 16 66.1 38.1 234.5 50.1 372.7 10 140.3 28.1 276.5 38.1 304.6 28.1 74.2 118.2 114.2 318.6 138.3 478.9 56.1 633.2 100.2 841.6 236.5 204.4 132.3 352.7 354.7 414.8 629.2 14 66.1 38.1 222.4 50.1 346.7 28.1 288.6 46.1 342.7 134.3 380.7 40.1 16 194.4 42.1 346.7 58.1 887.7 92.2 1300.5 422.8 1599.1 1270.4 108.2 308.6 134.3 364.7 198.4 440.9 66.1 78.1 150.3 118.2 254.5 120.2 67.9-.1 91.9-14.1 208.2-128.3zm1466.8-1563c-22-34.1-64.1-162.3-98.2-284.6-82.1-304.6-132.2-428.8-224.4-567.1-248.5-372.7-697.4-597.2-1498.9-753.5-288.5-56.1-382.7-94.2-480.9-192.4-128.3-126.2-182.4-290.5-232.5-703.3-70.1-577.1-188.4-721.4-611.2-747.5-623.2-40.1-923.8-214.4-1090.1-633.2-28.1-70.1-84.2-254.5-122.2-408.8-82.2-332.6-160.3-503-274.5-599.1-106.2-92.2-218.4-128.3-472.9-152.3-226.4-22-452.9-88.2-625.2-184.4-398.8-222.4-791.5-685.3-1076.1-1268.5-68.1-142.3-126.2-272.5-126.2-284.6 0-46.1-30.1-28-146.3 90.2L1831.9-3639l64.1 98.2c36.1 52.1 136.3 258.5 222.4 456.9 246.5 567.1 380.7 779.5 601.2 949.8 248.5 190.4 503 274.5 977.9 324.6 328.6 32.1 466.9 82.2 607.2 216.4 110.2 106.2 152.3 240.5 184.4 593.2 38.1 400.8 64.1 484.9 194.4 605.2 134.3 128.2 264.5 172.3 637.2 216.4 306.6 36.1 432.9 74.2 545.1 158.3 174.3 132.3 224.4 264.5 256.5 665.3 26 344.7 62.1 452.9 190.4 583.1 130.3 132.3 256.5 180.3 589.2 218.4 140.3 16 308.6 44.1 374.7 60.1 621.2 162.3 1120.2 755.5 1370.7 1633.2 24.1 82.2 48.1 162.3 52.1 178.3 6 20 68.1-28.1 186.4-146.3l178.3-176.3-36.4-63.9zm404.8-314.6c22-28.1 48.1-110.2 60.1-182.4 58.1-336.6-176.3-951.8-489-1288.5-242.5-260.5-505-392.8-853.6-432.8-460.9-52.1-639.2-104.2-845.6-242.5-68.1-44.1-158.3-128.2-200.4-184.4C6961.7 98.3 6913.6-58 6875.6-468.8c-16-162.3-38.1-314.6-52.1-338.7-36.1-68.1-134.3-96.2-430.8-130.3-539-60.1-835.6-218.4-1005.9-543-84.2-156.3-122.2-322.6-146.3-637.2-34.1-420.8 0-394.8-671.3-472.9-565.1-66.1-979.9-302.6-1208.3-691.3-48.1-82.1-132.3-288.6-202.4-499-68.1-196.4-138.3-384.7-160.3-420.8-88.2-142.3-244.5-230.4-358.7-202.4-54.1 14-144.3 84.2-144.3 114.2 0 8 28.1 62.1 64.1 118.2 34.1 58.1 138.3 274.5 228.4 484.9 218.4 497 318.6 663.3 529 875.7 296.6 298.6 631.2 432.8 1172.3 472.9 226.4 16 290.6 40.1 346.7 132.2 56.1 90.2 78.2 186.4 126.3 527 22 162.3 62.1 364.7 88.2 448.9C5192.3-779.3 5488.9-607 6116.1-607c228.4 0 268.5 6 346.7 46.1 96.2 48.1 168.3 138.3 200.4 252.5 12 40.1 38.1 194.4 60.1 342.7 22 148.3 58.1 330.7 82.1 402.8 82.2 264.5 270.5 428.8 557.1 488.9 561.1 116.2 761.5 184.4 1028 342.7 302.6 182.4 609.2 517 775.5 845.6 72.1 144.3 182.3 460.9 182.3 525 0 54.1 34.1 44.1 84.2-22z",transform:"matrix(.1 0 0 -.1 0 511)"}));export{e as default};

package/esm/components/ListItem/index.js

@@ -0,0 +1,24 @@
+import e from"react";import t from"styled-components";import{BodyText as m}from"../../typography/BodyText/index.js";import{TinyTitle as d}from"../../typography/Heading/index.js";import"../../shared/media-queries.js";const p=t.li`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+  &:last-child {
+    padding-bottom: 0;
+  }
+`,s=t.div`
+  display: flex;
+  align-items: center;
+  margin: 0;
+`,c=t(d)`
+  margin: 0;
+`,g=t.div`
+  display: flex;
+  align-items: center;
+  margin-right: 24px;
+  svg {
+    width: 30px;
+    height: 100%;
+  }
+`,x=t.div`
+  padding-left: ${({hasIcon:n})=>n?"54px":0};
+`,y=({title:n,text:l,icon:i,component:a="li",children:o,...r})=>e.createElement(p,{as:a,...r},e.createElement(s,null,i&&e.createElement(g,null,i),e.createElement(c,null,n)),e.createElement(x,{hasIcon:Boolean(i)},e.createElement(m,null,l,o)));export{y as default};

package/esm/components/Logo/LogoEn.js

@@ -0,0 +1 @@
+import C from"react";const e=()=>C.createElement("svg",{viewBox:"0 0 622 223",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"kvdlogo-en"},C.createElement("title",{id:"kvdlogo-en"},"kvdcars.com"),C.createElement("path",{d:"M563.63 130.23C561.82 127.17 559.53 124.57 556.81 122.52C554.18 120.54 551.29 118.87 548.23 117.57C545.36 116.35 542.64 115.15 540.14 113.99C537.8 112.9 535.83 111.71 534.29 110.44C533.08 109.44 532.52 108.24 532.52 106.67C532.52 105.1 533 103.96 534.02 103.11C535.07 102.24 536.56 101.77 538.46 101.73L561.94 109.52V87.83L560.57 87.35C556.81 86.02 553.15 84.93 549.69 84.12C546.16 83.29 542.26 82.86 538.12 82.86C533.98 82.86 530.19 83.43 526.85 84.55C523.47 85.69 520.55 87.34 518.16 89.44C515.76 91.56 513.88 94.13 512.56 97.09C511.24 100.04 510.58 103.34 510.58 106.9C510.58 111.77 511.52 115.84 513.38 118.99C515.2 122.07 517.48 124.61 520.18 126.56C522.79 128.44 525.66 130 528.73 131.18C531.61 132.3 534.3 133.42 536.71 134.52C539.01 135.57 540.96 136.75 542.49 138.01C543.7 139.01 544.26 140.31 544.26 142.11C544.26 144.1 543.67 145.47 542.4 146.43C541.05 147.45 539.09 147.99 536.59 148.04L511.34 139.22V161.63L512.59 162.16C515.97 163.59 519.84 164.8 524.09 165.77C528.38 166.75 532.95 167.24 537.67 167.24C541.8 167.24 545.64 166.67 549.08 165.55C552.56 164.42 555.62 162.77 558.18 160.64C560.78 158.48 562.82 155.81 564.26 152.7C565.69 149.6 566.42 146.03 566.42 142.1C566.44 137.37 565.49 133.38 563.63 130.23Z",fill:"#1A2030"}),C.createElement("path",{d:"M124.01 84.33H99.02L77.58 114.92V56.04H55.16V166.56H77.58V132.24L101.06 166.56H127.94L96.57 123.5L124.01 84.33Z",fill:"#1A2030"}),C.createElement("path",{d:"M235.3 144.12C224.78 144.12 216.25 135.59 216.25 125.07C216.25 114.55 224.78 106.02 235.3 106.02C245.83 106.02 254.35 114.55 254.35 125.07C254.35 135.59 245.82 144.12 235.3 144.12ZM255.53 88.9C249.48 85.46 242.49 83.5 235.04 83.5C212.11 83.5 193.52 102.09 193.52 125.02C193.52 147.95 212.11 166.54 235.04 166.54C242.49 166.54 249.49 164.58 255.53 161.14V166.56H277.95V56.04H255.53V88.9Z",fill:"#1A2030"}),C.createElement("path",{d:"M175.62 84.33L161.08 131.23L146.54 84.33H124.32L149.81 166.56H150.13H172.04H172.35L197.84 84.33H175.62Z",fill:"#1A2030"}),C.createElement("path",{d:"M411.58 144.12C401.06 144.12 392.53 135.59 392.53 125.07C392.53 114.55 401.06 106.02 411.58 106.02C422.1 106.02 430.63 114.55 430.63 125.07C430.63 135.59 422.11 144.12 411.58 144.12ZM411.31 83.5C388.38 83.5 369.79 102.08 369.79 125.01C369.79 147.94 388.38 166.53 411.31 166.53C418.86 166.53 425.94 164.52 432.04 161V166.55H454.46V84.33H432.04V89.03C425.94 85.52 418.86 83.5 411.31 83.5Z",fill:"#1A2030"}),C.createElement("path",{d:"M342.97 130.89C340.51 138.56 333.32 144.12 324.83 144.12C314.3 144.12 305.78 135.59 305.78 125.07C305.78 114.55 314.31 106.02 324.83 106.02C333.59 106.02 340.95 111.94 343.18 120H366.04C363.56 99.44 346.06 83.5 324.84 83.5C301.91 83.5 283.33 102.09 283.33 125.01C283.33 147.94 301.9 166.52 324.84 166.52C345.77 166.52 363.08 151.02 365.93 130.88H342.97V130.89Z",fill:"#1A2030"}),C.createElement("path",{d:"M505.29 83.5C498.52 83.5 492.15 85.14 486.5 88.01V84.33H464.08V166.55H486.5V161.92V125.07H486.51C486.51 114.55 495.04 106.02 505.56 106.02C505.95 106.02 506.34 106.06 506.72 106.08V83.55C506.25 83.53 505.77 83.5 505.29 83.5Z",fill:"#1A2030"}));export{e as default};

package/esm/components/Logo/LogoSv.js

@@ -0,0 +1 @@
+import e from"react";const t=()=>e.createElement("svg",{viewBox:"0 0 492 223",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"kvdlogo-sv"},e.createElement("title",{id:"kvdlogo-sv"},"kvd.se"),e.createElement("path",{d:"M124.94 84.11H99.78L78.2 114.91V55.63H55.63V166.89H78.2V132.34L101.83 166.89H128.89L97.32 123.54L124.94 84.11Z",fill:"#1A2030"}),e.createElement("path",{d:"M393.79 87.26C389.7 87.26 385.88 86.1 382.64 84.1H382.51V166.88H405.08V84.1H404.95C401.69 86.1 397.87 87.26 393.79 87.26Z",fill:"#1A2030"}),e.createElement("path",{d:"M436.21 55.59H413.64V166.89H436.21V55.59Z",fill:"#1A2030"}),e.createElement("path",{d:"M393.79 49.9C384.96 49.9 377.77 57.09 377.77 65.92C377.77 74.75 384.95 81.94 393.79 81.94C402.63 81.94 409.81 74.76 409.81 65.92C409.8 57.09 402.62 49.9 393.79 49.9ZM393.79 72.85C389.97 72.85 386.86 69.74 386.86 65.92C386.86 62.1 389.97 58.99 393.79 58.99C397.61 58.99 400.72 62.1 400.72 65.92C400.72 69.74 397.61 72.85 393.79 72.85Z",fill:"#1A2030"}),e.createElement("path",{d:"M336.08 83.27C328.48 83.27 321.36 85.3 315.22 88.84V55.63H292.65V166.89H315.22V161.3C321.36 164.84 328.49 166.87 336.08 166.87C359.16 166.87 377.88 148.16 377.88 125.07C377.87 101.98 359.16 83.27 336.08 83.27ZM335.81 144.3C325.22 144.3 316.63 135.71 316.63 125.12C316.63 114.53 325.22 105.94 335.81 105.94C346.4 105.94 354.99 114.53 354.99 125.12C354.99 135.71 346.4 144.3 335.81 144.3Z",fill:"#1A2030"}),e.createElement("path",{d:"M257.34 88.71C251.25 85.25 244.21 83.27 236.71 83.27C213.62 83.27 194.91 101.98 194.91 125.07C194.91 148.15 213.62 166.87 236.71 166.87C244.21 166.87 251.25 164.89 257.34 161.43V166.89H279.91V55.63H257.34V88.71ZM236.98 144.3C226.39 144.3 217.8 135.71 217.8 125.12C217.8 114.53 226.39 105.94 236.98 105.94C247.57 105.94 256.16 114.53 256.16 125.12C256.16 135.71 247.57 144.3 236.98 144.3Z",fill:"#1A2030"}),e.createElement("path",{d:"M176.9 84.11L162.26 131.32L147.62 84.11H125.25L150.92 166.89H151.23H173.29H173.6L199.27 84.11H176.9Z",fill:"#1A2030"}));export{t as default};

package/esm/components/Logo/index.js

@@ -0,0 +1,3 @@
+import e from"react";import s from"styled-components";import m from"./LogoSv.js";import d from"./LogoEn.js";const a=(t,o)=>o||(t==="en"?175:132),c=s.div`
+  width: ${({width:t})=>t}px;
+`,n=({locale:t,width:o})=>{const r=t==="en"?d:m,i=a(t,o);return e.createElement(c,{width:i,"data-testid":`logo-${t}`},e.createElement(r,null))};export{n as Logo,n as default};

package/esm/components/MenuItem/index.js

@@ -0,0 +1,38 @@
+import o from"react";import t from"styled-components";import m from"../../theme.js";const r={1:{size:"2rem",lineHeight:"3rem",bottom:"2rem",fontFamily:m.typography.fontAlternativeFamily},2:{size:"1.5rem",lineHeight:"2.5rem",bottom:"1rem",fontFamily:m.typography.fontAlternativeFamily},3:{size:"1rem",lineHeight:"1.5rem",bottom:"1rem",fontFamily:m.typography.fontBaseFamily}},p=t.li`
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  ${({hasPreamble:e})=>e&&"grid-column-end: span 2"};
+
+  :hover {
+    cursor: pointer;
+  }
+`,a=t.span`
+  font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
+  font-weight: ${({theme:e})=>e.typography.fontAlternativeRegularWeight};
+`,c=t.div`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${({level:e})=>r[e].bottom};
+`,g=t(a)`
+  color: ${({theme:e})=>e.colors.text.dark};
+  font-size: ${({level:e})=>r[e].size};
+  line-height: ${({level:e})=>r[e].lineHeight};
+  font-family: ${({level:e})=>r[e].fontFamily};
+
+  ${({level:e,theme:n})=>e===3&&`font-weight: ${n.typography.fontAlternativeRegularWeight}`};
+`,d=t(a)`
+  font-size: 0.75rem;
+  font-weight: ${({theme:e})=>e.typography.fontAlternativeBoldWeight};
+  line-height: 1.25rem;
+  color: ${({theme:e})=>e.colors.text.dark};
+  text-transform: uppercase;
+  margin-bottom: 1.5rem;
+`,$=t(a)`
+  font-size: 0.8125rem;
+  font-weight: ${({theme:e})=>e.typography.fontBaseRegularWeight};
+  line-height: 1.5rem;
+  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
+  color: ${({theme:e})=>e.colors.text.dark};
+  margin-top: ${({level:e})=>e===3?"0.25rem":0};
+`,h=({preamble:e,title:n,level:i,component:s="li",children:f,...y})=>{const l=Boolean(e);return o.createElement(p,{as:s,...y,hasPreamble:l},n&&o.createElement(d,null,n),o.createElement(c,{level:i},o.createElement(g,{level:i,hasPreamble:l},f),e&&o.createElement($,{level:i},e)))};export{h as MenuItem,h as default};

package/esm/components/Modal/index.js

@@ -0,0 +1,77 @@
+import t,{useEffect as u}from"react";import{createPortal as g}from"react-dom";import{CSSTransition as x}from"react-transition-group";import n,{css as h,createGlobalStyle as a}from"styled-components";import b from"../Icons/Close.js";const d=h`
+  .backgroundTransition-enter {
+    opacity: 0;
+  }
+
+  .backgroundTransition-enter.backgroundTransition-enter-active {
+    opacity: 1;
+    transition: opacity 0.25s ease-in-out;
+  }
+
+  .backgroundTransition-exit {
+    opacity: 1;
+  }
+
+  .backgroundTransition-exit.backgroundTransition-exit-active {
+    opacity: 0;
+    transition: opacity 0.25s ease-in-out;
+  }
+`,f=n.div`
+  ${d}
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 200;
+`,w=n.div`
+  z-index: -1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(34, 34, 34, 0.3);
+`,y=n.div`
+  position: relative;
+  max-width: 512px;
+  padding: 24px 32px 24px 32px;
+  background-color: white;
+  border-radius: 3px;
+  box-shadow: 0px 24px 38px rgba(0, 0, 0, 0.1), 0px 9px 46px rgba(0, 0, 0, 0.09),
+    0px 11px 15px rgba(0, 0, 0, 0.15);
+
+  overflow-y: hidden;
+  margin: 1rem;
+  margin-top: 50vh;
+  transform: translate(0, -50%);
+  margin-left: 1rem;
+  margin-right: 1rem;
+
+  @media (min-width: 500px) {
+    margin-left: auto;
+    margin-right: auto;
+    min-width: 355px;
+  }
+`,k=n.div`
+  position: absolute;
+  top: 24px;
+  right: 32px;
+
+  :hover {
+    cursor: pointer;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`,v=a`
+  body {
+    overflow: hidden;
+
+    ${typeof window!="undefined"&&window.innerWidth>1024&&`
+        padding-right: 15px !important;
+    `}
+  }
+`,E=a`
+  ${d}
+`,s=({children:c,isOpen:o,contentStyles:l,withPortal:m=!1,onClose:e})=>{u(()=>{const r=p=>{p.key==="Escape"&&o&&e()};return window.addEventListener("keydown",r),()=>{window.removeEventListener("keydown",r)}},[e,o]);const i=t.createElement(x,{in:o,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},t.createElement(t.Fragment,null,t.createElement(E,null),t.createElement(f,null,t.createElement(w,{"data-testid":"background",onClick:e}),t.createElement(y,{style:l},t.createElement(k,{onClick:e,"data-testid":"close"},t.createElement(b,null)),c),t.createElement(v,null))));return m?g(i,document.body):i};export{s as Modal,s as default};

package/esm/components/NotificationButton/index.js

@@ -0,0 +1,11 @@
+import o from"react";import e from"styled-components";import{Badge as i}from"../Badge/index.js";import{Button as r}from"../Button/index.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";const d=e.div`
+  position: relative;
+  display: inline-block;
+`,a=e(i)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: -10px;
+  border: 2px solid white;
+  ${t=>t.noPadding&&"padding: 0;"}
+`,m=t=>{const n=(t.badgeProps.notificationAmount||0)<10;return o.createElement(d,null,o.createElement(r,{...t.buttonProps},t.children),o.createElement(a,{...t.badgeProps,noPadding:n}))};export{m as NotificationButton};

package/esm/components/OffCanvas/Overlay.js

@@ -0,0 +1,27 @@
+import n from"react";import{CSSTransition as a}from"react-transition-group";import c from"styled-components";const s={classNames:"backgroundTransition",timeout:{enter:400,exit:400},mountOnEnter:!0,unmountOnExit:!0},u=c.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;
+  }
+`,d=({className:i,isOpen:o,onClick:t,transitionProps:e=s})=>{const r=()=>{t&&t()};return n.createElement(a,{in:o,...e,className:i},n.createElement(u,{onClick:r}))};export{d as default};

package/esm/components/OffCanvas/index.js

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

package/esm/components/OffCanvas/useClickOutside.js

@@ -0,0 +1 @@
+import{useCallback as r,useEffect as s}from"react";const u=(e,n)=>{const t=r(o=>{e.current&&!e.current.contains(o.target)&&n()},[n,e]);s(()=>(document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}),[t])};export{u as useOutsideClick};

package/esm/components/RadioButton/index.js

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

package/esm/components/Range/index.js

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

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

@@ -0,0 +1 @@
+import t from"react";const e=()=>t.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.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"}));export{e as TestIcon};

package/esm/components/Select/index.js

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

package/esm/components/Snackbar/index.js

@@ -0,0 +1,78 @@
+import t,{useEffect as E}from"react";import a,{css as o}from"styled-components";import r from"../../theme.js";import $ from"../Icons/CheckCircle.js";import C from"../Icons/Close.js";import k from"../Icons/ErrorCircle.js";import b from"../Icons/InfoCircle.js";import{CSSTransition as v}from"react-transition-group";const I={top:o`
+    top: 0;
+  `,bottom:o`
+    bottom: 0;
+  `},j={right:o`
+    right: 0;
+  `,center:o`
+    left: 50%;
+    transform: translate(-50%, 0);
+  `,left:o`
+    left: 0;
+  `},g=200,n="anim",w=a.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.elevations.elevation8};
+  background-color: ${e=>e.color!=="none"?r.colors[e.color].main:r.colors.background.light};
+  color: ${e=>e.color!=="none"?r.colors.text.light:r.colors.text.dark};
+
+  ${e=>I[e.origin.vertical||"bottom"]}
+  ${e=>j[e.origin.horizontal||"left"]}
+
+  transition: opacity ${g}ms ease-in;
+
+  &.${n}-enter {
+    opacity: 0;
+  }
+  &.${n}-enter-active {
+    opacity: 1;
+  }
+  &.${n}-exit {
+    opacity: 1;
+  }
+  &.${n}-exit-active {
+    opacity: 0;
+  }
+`,f=a.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.colors.background.light:r.colors.background.dark};
+  }
+`,S=a(f)`
+  cursor: pointer;
+
+  /* Bigger click area */
+  padding: 0.25rem;
+
+  /* Negate padding */
+  margin: -0.25rem;
+  margin-left: 0.5rem;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`,B=a.span`
+  flex: 1;
+`,z={error:t.createElement(k,null),success:t.createElement($,null),info:t.createElement(b,null),text:""},h=({message:e,color:i="none",type:c="info",action:m,isOpen:p,origin:d={},onClose:l=()=>{},onExited:u=()=>{},autoHideDuration:s=4e3,...y})=>(E(()=>{const x=setTimeout(l,s);return()=>clearTimeout(x)},[s,l]),t.createElement(v,{in:p,timeout:g,mountOnEnter:!0,unmountOnExit:!0,onExited:u,classNames:n},t.createElement(w,{...y,color:i,origin:d},t.createElement(f,{color:i,type:c},z[c]),t.createElement(B,null,e),m&&m,t.createElement(S,{color:i!=null?i:"none",onClick:l},t.createElement(C,null)))));export{h as Snackbar,h as default};

package/esm/components/Spinner/index.js

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

package/esm/components/Stepper/index.js

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