@kvdbil/components 3.3.3 → 3.3.5-2

package/esm/components/InlineStepper/StepCircle.js

@@ -0,0 +1,85 @@
+import styled from 'styled-components';
+import theme from '../../theme.js';
+import CheckIcon from '../Icons/CheckIcon.js';
+
+const getStatetyles = (backgroundColor) => ({
+  active: {
+    background: theme.colors.primary.main,
+    color: theme.colors.text.light,
+    border: `1px solid ${theme.colors.primary.main}`
+  },
+  completed: {
+    background: theme.colors.success.main,
+    color: theme.colors.text.light,
+    border: `1px solid ${theme.colors.success.main}`
+  },
+  disabled: {
+    background: backgroundColor,
+    color: theme.colors.primary.main,
+    border: `1px solid ${theme.colors.primary.main}`
+  }
+});
+const Circle = styled.div`
+  box-sizing: content-box;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: ${({ state, backgroundColor }) => getStatetyles(backgroundColor)[state].border};
+  justify-content: center;
+  background-color: ${({ state, backgroundColor }) => getStatetyles(backgroundColor)[state].background};
+  color: ${({ state, backgroundColor }) => getStatetyles(backgroundColor)[state].color};
+  &:after {
+    content: '';
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    top: -11px;
+    left: -11px;
+    position: absolute;
+    z-index: 2;
+    border: ${({ backgroundColor }) => `10px solid ${backgroundColor}`};
+  }
+`;
+const CircleText = styled.div`
+  display: flex;
+  font-size: 1.25rem;
+  line-height: 1;
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontAlternativeFamily};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.fontAlternativeBoldWeight};
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+`;
+const IconWrapper = styled.div`
+  width: 14px;
+  height: 14px;
+  display: flex;
+  & svg {
+    fill: ${({ theme: theme2 }) => theme2.colors.text.light};
+    width: 100%;
+  }
+`;
+const StepCircle = ({
+  state,
+  step,
+  backgroundColor = theme.colors.background.light,
+  ...props
+}) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Circle, {
+  className: state,
+  state,
+  ...props,
+  backgroundColor
+}, /* @__PURE__ */ React.createElement(CircleText, {
+  as: "div"
+}, state === "completed" ? /* @__PURE__ */ React.createElement(IconWrapper, null, /* @__PURE__ */ React.createElement(CheckIcon, {
+  className: ""
+})) : /* @__PURE__ */ React.createElement("span", {
+  className: "step-content-text"
+}, step))));
+
+export { StepCircle as default };

package/esm/components/InlineStepper/index.js

@@ -0,0 +1,43 @@
+import { cloneElement } from 'react';
+import styled from 'styled-components';
+import theme from '../../theme.js';
+
+const Wrapper = styled.div`
+  min-height: 4rem;
+  padding: 10px 0;
+  display: ${({ orientation }) => orientation === "horizontal" ? "flex" : "block"};
+  justify-content: space-between;
+  background-color: ${({ backgroundColor }) => backgroundColor};
+`;
+const cloneChild = (child, newProps) => {
+  return cloneElement(child, newProps);
+};
+const InlineStepper = ({
+  children,
+  activeStep = 0,
+  orientation = "horizontal",
+  backgroundColor = theme.colors.background.light,
+  ...props
+}) => {
+  const childrenArray = Array.isArray(children) ? children : [children];
+  const steps = childrenArray.map((child, index) => {
+    var _a;
+    const newProps = {
+      active: index === activeStep,
+      step: index + 1,
+      completed: index < activeStep,
+      disabled: index > activeStep,
+      children: (_a = child == null ? void 0 : child.props) == null ? void 0 : _a.children,
+      orientation,
+      backgroundColor
+    };
+    return cloneChild(child, newProps);
+  });
+  return /* @__PURE__ */ React.createElement(Wrapper, {
+    ...props,
+    orientation,
+    backgroundColor
+  }, steps);
+};
+
+export { InlineStepper };

package/esm/components/ListItem/Bacon.js

@@ -0,0 +1,12 @@
+const Bacon = ({ color = "black" }) => /* @__PURE__ */ React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  x: "0",
+  y: "0",
+  viewBox: "0 0 1000 1000",
+  fill: color
+}, /* @__PURE__ */ React.createElement("title", null, "Bacon"), /* @__PURE__ */ React.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 { Bacon as default };

package/esm/components/ListItem/index.js

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+import { BodyText } from '../../typography/BodyText/index.js';
+import { TinyTitle } from '../../typography/Heading/index.js';
+import '../../shared/media-queries.js';
+
+const ListItemWrapper = styled.li`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+  &:last-child {
+    padding-bottom: 0;
+  }
+`;
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 0;
+`;
+const Title = styled(TinyTitle)`
+  margin: 0;
+`;
+const Icon = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: 24px;
+  svg {
+    width: 30px;
+    height: 100%;
+  }
+`;
+const Content = styled.div`
+  padding-left: ${({ hasIcon }) => hasIcon ? "54px" : 0};
+`;
+const ListItem = ({
+  title,
+  text,
+  icon,
+  component: Component = "li",
+  children,
+  ...props
+}) => /* @__PURE__ */ React.createElement(ListItemWrapper, {
+  as: Component,
+  ...props
+}, /* @__PURE__ */ React.createElement(TitleWrapper, null, icon && /* @__PURE__ */ React.createElement(Icon, null, icon), /* @__PURE__ */ React.createElement(Title, null, title)), /* @__PURE__ */ React.createElement(Content, {
+  hasIcon: Boolean(icon)
+}, /* @__PURE__ */ React.createElement(BodyText, null, text, children)));
+
+export { ListItem as default };

package/esm/components/Logo/LogoEn.js

@@ -0,0 +1,31 @@
+const LogoEn = () => /* @__PURE__ */ React.createElement("svg", {
+  viewBox: "0 0 622 223",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": "kvdlogo-en"
+}, /* @__PURE__ */ React.createElement("title", {
+  id: "kvdlogo-en"
+}, "kvdcars.com"), /* @__PURE__ */ React.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"
+}), /* @__PURE__ */ React.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"
+}), /* @__PURE__ */ React.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"
+}), /* @__PURE__ */ React.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"
+}), /* @__PURE__ */ React.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"
+}), /* @__PURE__ */ React.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"
+}), /* @__PURE__ */ React.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 { LogoEn as default };

package/esm/components/Logo/LogoSv.js

@@ -0,0 +1,31 @@
+const LogoSv = () => /* @__PURE__ */ React.createElement("svg", {
+  viewBox: "0 0 492 223",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": "kvdlogo-sv"
+}, /* @__PURE__ */ React.createElement("title", {
+  id: "kvdlogo-sv"
+}, "kvd.se"), /* @__PURE__ */ React.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"
+}), /* @__PURE__ */ React.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"
+}), /* @__PURE__ */ React.createElement("path", {
+  d: "M436.21 55.59H413.64V166.89H436.21V55.59Z",
+  fill: "#1A2030"
+}), /* @__PURE__ */ React.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"
+}), /* @__PURE__ */ React.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"
+}), /* @__PURE__ */ React.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"
+}), /* @__PURE__ */ React.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 { LogoSv as default };

package/esm/components/Logo/index.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import LogoSv from './LogoSv.js';
+import LogoEn from './LogoEn.js';
+
+const getWidth = (locale, width) => {
+  if (width) {
+    return width;
+  }
+  return locale === "en" ? 175 : 132;
+};
+const LogoContainer = styled.div`
+  width: ${({ width }) => width}px;
+`;
+const Logo = ({ locale, width }) => {
+  const Logo2 = locale === "en" ? LogoEn : LogoSv;
+  const containerWidth = getWidth(locale, width);
+  return /* @__PURE__ */ React.createElement(LogoContainer, {
+    width: containerWidth,
+    "data-testid": `logo-${locale}`
+  }, /* @__PURE__ */ React.createElement(Logo2, null));
+};
+
+export { Logo, Logo as default };

package/esm/components/MenuItem/index.js

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+import theme from '../../theme.js';
+
+const fontSizes = {
+  1: {
+    size: "2rem",
+    lineHeight: "3rem",
+    bottom: "2rem",
+    fontFamily: theme.typography.fontAlternativeFamily
+  },
+  2: {
+    size: "1.5rem",
+    lineHeight: "2.5rem",
+    bottom: "1rem",
+    fontFamily: theme.typography.fontAlternativeFamily
+  },
+  3: {
+    size: "1rem",
+    lineHeight: "1.5rem",
+    bottom: "1rem",
+    fontFamily: theme.typography.fontBaseFamily
+  }
+};
+const Wrapper = styled.li`
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  ${({ hasPreamble }) => hasPreamble && "grid-column-end: span 2"};
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+const BaseText = styled.span`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontAlternativeFamily};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.fontAlternativeRegularWeight};
+`;
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${({ level }) => fontSizes[level].bottom};
+`;
+const Text = styled(BaseText)`
+  color: ${({ theme: theme2 }) => theme2.colors.text.dark};
+  font-size: ${({ level }) => fontSizes[level].size};
+  line-height: ${({ level }) => fontSizes[level].lineHeight};
+  font-family: ${({ level }) => fontSizes[level].fontFamily};
+
+  ${({ level, theme: theme2 }) => level === 3 && `font-weight: ${theme2.typography.fontAlternativeRegularWeight}`};
+`;
+const Title = styled(BaseText)`
+  font-size: 0.75rem;
+  font-weight: ${({ theme: theme2 }) => theme2.typography.fontAlternativeBoldWeight};
+  line-height: 1.25rem;
+  color: ${({ theme: theme2 }) => theme2.colors.text.dark};
+  text-transform: uppercase;
+  margin-bottom: 1.5rem;
+`;
+const Preamble = styled(BaseText)`
+  font-size: 0.8125rem;
+  font-weight: ${({ theme: theme2 }) => theme2.typography.fontBaseRegularWeight};
+  line-height: 1.5rem;
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
+  color: ${({ theme: theme2 }) => theme2.colors.text.dark};
+  margin-top: ${({ level }) => level === 3 ? "0.25rem" : 0};
+`;
+const MenuItem = ({
+  preamble,
+  title,
+  level,
+  component: Component = "li",
+  children,
+  ...props
+}) => {
+  const hasPreamble = Boolean(preamble);
+  return /* @__PURE__ */ React.createElement(Wrapper, {
+    as: Component,
+    ...props,
+    hasPreamble
+  }, title && /* @__PURE__ */ React.createElement(Title, null, title), /* @__PURE__ */ React.createElement(TextContainer, {
+    level
+  }, /* @__PURE__ */ React.createElement(Text, {
+    level,
+    hasPreamble
+  }, children), preamble && /* @__PURE__ */ React.createElement(Preamble, {
+    level
+  }, preamble)));
+};
+
+export { MenuItem, MenuItem as default };

package/esm/components/Modal/index.js

@@ -0,0 +1,128 @@
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { CSSTransition } from 'react-transition-group';
+import styled, { css, createGlobalStyle } from 'styled-components';
+import Close from '../Icons/Close.js';
+
+const transitions = css`
+  .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;
+  }
+`;
+const Container = styled.div`
+  ${transitions}
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 200;
+`;
+const Background = styled.div`
+  z-index: -1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(34, 34, 34, 0.3);
+`;
+const Content = styled.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;
+  }
+`;
+const CloseContainer = styled.div`
+  position: absolute;
+  top: 24px;
+  right: 32px;
+
+  :hover {
+    cursor: pointer;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`;
+const BodyStyleInjector = createGlobalStyle`
+  body {
+    overflow: hidden;
+
+    ${typeof window !== "undefined" && window.innerWidth > 1024 && `
+        padding-right: 15px !important;
+    `}
+  }
+`;
+const Transitions = createGlobalStyle`
+  ${transitions}
+`;
+const Modal = ({
+  children,
+  isOpen,
+  contentStyles,
+  withPortal = false,
+  onClose
+}) => {
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        if (isOpen) {
+          onClose();
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose, isOpen]);
+  const Component = /* @__PURE__ */ React.createElement(CSSTransition, {
+    in: isOpen,
+    mountOnEnter: true,
+    unmountOnExit: true,
+    timeout: 400,
+    classNames: "backgroundTransition"
+  }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Transitions, null), /* @__PURE__ */ React.createElement(Container, null, /* @__PURE__ */ React.createElement(Background, {
+    "data-testid": "background",
+    onClick: onClose
+  }), /* @__PURE__ */ React.createElement(Content, {
+    style: contentStyles
+  }, /* @__PURE__ */ React.createElement(CloseContainer, {
+    onClick: onClose,
+    "data-testid": "close"
+  }, /* @__PURE__ */ React.createElement(Close, null)), children), /* @__PURE__ */ React.createElement(BodyStyleInjector, null))));
+  return withPortal ? createPortal(Component, document.body) : Component;
+};
+
+export { Modal, Modal as default };

package/esm/components/NotificationButton/index.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import { Badge } from '../Badge/index.js';
+import { Button } from '../Button/index.js';
+import '../../theme.js';
+import '../Spinner/index.js';
+import '../../typography/ButtonText/index.js';
+
+const Container = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+const StyledBadge = styled(Badge)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: -10px;
+  border: 2px solid white;
+  ${(props) => props.noPadding && `padding: 0;`}
+`;
+const NotificationButton = (props) => {
+  const count = props.badgeProps.notificationAmount || 0;
+  const noPadding = count < 10;
+  return /* @__PURE__ */ React.createElement(Container, null, /* @__PURE__ */ React.createElement(Button, {
+    ...props.buttonProps
+  }, props.children), /* @__PURE__ */ React.createElement(StyledBadge, {
+    ...props.badgeProps,
+    noPadding
+  }));
+};
+
+export { NotificationButton };

package/esm/components/OffCanvas/Overlay.js

@@ -0,0 +1,61 @@
+import React__default from 'react';
+import { CSSTransition } from 'react-transition-group';
+import styled from 'styled-components';
+
+const defaultTransitionProps = {
+  classNames: "backgroundTransition",
+  timeout: {
+    enter: 400,
+    exit: 400
+  },
+  mountOnEnter: true,
+  unmountOnExit: true
+};
+const Background = styled.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;
+  }
+`;
+const Overlay = ({
+  className,
+  isOpen,
+  onClick,
+  transitionProps = defaultTransitionProps
+}) => {
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(CSSTransition, {
+    in: isOpen,
+    ...transitionProps,
+    className
+  }, /* @__PURE__ */ React__default.createElement(Background, {
+    onClick: handleClick
+  }));
+};
+
+export { Overlay as default };