@kvdbil/components 3.3.3 → 3.3.5-2

package/cjs/components/ListItem/index.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var typography_BodyText_index = require('../../typography/BodyText/index.js');
+var typography_Heading_index = require('../../typography/Heading/index.js');
+require('../../shared/media-queries.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const ListItemWrapper = styled__default['default'].li`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+  &:last-child {
+    padding-bottom: 0;
+  }
+`;
+const TitleWrapper = styled__default['default'].div`
+  display: flex;
+  align-items: center;
+  margin: 0;
+`;
+const Title = styled__default['default'](typography_Heading_index.TinyTitle)`
+  margin: 0;
+`;
+const Icon = styled__default['default'].div`
+  display: flex;
+  align-items: center;
+  margin-right: 24px;
+  svg {
+    width: 30px;
+    height: 100%;
+  }
+`;
+const Content = styled__default['default'].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(typography_BodyText_index.BodyText, null, text, children)));
+
+exports['default'] = ListItem;

package/cjs/components/Logo/LogoEn.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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"
+}));
+
+exports['default'] = LogoEn;

package/cjs/components/Logo/LogoSv.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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"
+}));
+
+exports['default'] = LogoSv;

package/cjs/components/Logo/index.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var components_Logo_LogoSv = require('./LogoSv.js');
+var components_Logo_LogoEn = require('./LogoEn.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const getWidth = (locale, width) => {
+  if (width) {
+    return width;
+  }
+  return locale === "en" ? 175 : 132;
+};
+const LogoContainer = styled__default['default'].div`
+  width: ${({ width }) => width}px;
+`;
+const Logo = ({ locale, width }) => {
+  const Logo2 = locale === "en" ? components_Logo_LogoEn['default'] : components_Logo_LogoSv['default'];
+  const containerWidth = getWidth(locale, width);
+  return /* @__PURE__ */ React.createElement(LogoContainer, {
+    width: containerWidth,
+    "data-testid": `logo-${locale}`
+  }, /* @__PURE__ */ React.createElement(Logo2, null));
+};
+
+exports.Logo = Logo;
+exports['default'] = Logo;

package/cjs/components/MenuItem/index.js

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var theme = require('../../theme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const fontSizes = {
+  1: {
+    size: "2rem",
+    lineHeight: "3rem",
+    bottom: "2rem",
+    fontFamily: theme['default'].typography.fontAlternativeFamily
+  },
+  2: {
+    size: "1.5rem",
+    lineHeight: "2.5rem",
+    bottom: "1rem",
+    fontFamily: theme['default'].typography.fontAlternativeFamily
+  },
+  3: {
+    size: "1rem",
+    lineHeight: "1.5rem",
+    bottom: "1rem",
+    fontFamily: theme['default'].typography.fontBaseFamily
+  }
+};
+const Wrapper = styled__default['default'].li`
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  ${({ hasPreamble }) => hasPreamble && "grid-column-end: span 2"};
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+const BaseText = styled__default['default'].span`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontAlternativeFamily};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.fontAlternativeRegularWeight};
+`;
+const TextContainer = styled__default['default'].div`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${({ level }) => fontSizes[level].bottom};
+`;
+const Text = styled__default['default'](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__default['default'](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__default['default'](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)));
+};
+
+exports.MenuItem = MenuItem;
+exports['default'] = MenuItem;

package/cjs/components/Modal/index.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React$1 = require('react');
+var reactDom = require('react-dom');
+var reactTransitionGroup = require('react-transition-group');
+var styled = require('styled-components');
+var components_Icons_Close = require('../Icons/Close.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const transitions = styled.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__default['default'].div`
+  ${transitions}
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 200;
+`;
+const Background = styled__default['default'].div`
+  z-index: -1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(34, 34, 34, 0.3);
+`;
+const Content = styled__default['default'].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__default['default'].div`
+  position: absolute;
+  top: 24px;
+  right: 32px;
+
+  :hover {
+    cursor: pointer;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`;
+const BodyStyleInjector = styled.createGlobalStyle`
+  body {
+    overflow: hidden;
+
+    ${typeof window !== "undefined" && window.innerWidth > 1024 && `
+        padding-right: 15px !important;
+    `}
+  }
+`;
+const Transitions = styled.createGlobalStyle`
+  ${transitions}
+`;
+const Modal = ({
+  children,
+  isOpen,
+  contentStyles,
+  withPortal = false,
+  onClose
+}) => {
+  React$1.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(reactTransitionGroup.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(components_Icons_Close['default'], null)), children), /* @__PURE__ */ React.createElement(BodyStyleInjector, null))));
+  return withPortal ? reactDom.createPortal(Component, document.body) : Component;
+};
+
+exports.Modal = Modal;
+exports['default'] = Modal;

package/cjs/components/NotificationButton/index.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var components_Badge_index = require('../Badge/index.js');
+var components_Button_index = require('../Button/index.js');
+require('../../theme.js');
+require('../Spinner/index.js');
+require('../../typography/ButtonText/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Container = styled__default['default'].div`
+  position: relative;
+  display: inline-block;
+`;
+const StyledBadge = styled__default['default'](components_Badge_index.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(components_Button_index.Button, {
+    ...props.buttonProps
+  }, props.children), /* @__PURE__ */ React.createElement(StyledBadge, {
+    ...props.badgeProps,
+    noPadding
+  }));
+};
+
+exports.NotificationButton = NotificationButton;

package/cjs/components/OffCanvas/Overlay.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactTransitionGroup = require('react-transition-group');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const defaultTransitionProps = {
+  classNames: "backgroundTransition",
+  timeout: {
+    enter: 400,
+    exit: 400
+  },
+  mountOnEnter: true,
+  unmountOnExit: true
+};
+const Background = styled__default['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;
+  }
+`;
+const Overlay = ({
+  className,
+  isOpen,
+  onClick,
+  transitionProps = defaultTransitionProps
+}) => {
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ React__default['default'].createElement(reactTransitionGroup.CSSTransition, {
+    in: isOpen,
+    ...transitionProps,
+    className
+  }, /* @__PURE__ */ React__default['default'].createElement(Background, {
+    onClick: handleClick
+  }));
+};
+
+exports['default'] = Overlay;

package/cjs/components/OffCanvas/index.js

@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React$1 = require('react');
+var reactDom = require('react-dom');
+var styled = require('styled-components');
+var reactTransitionGroup = require('react-transition-group');
+var components_OffCanvas_Overlay = require('./Overlay.js');
+var components_OffCanvas_useClickOutside = require('./useClickOutside.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const defaultAnimationName = "offCanvasAnimation";
+const defaultTransitionProps = {
+  timeout: {
+    enter: 300,
+    exit: 300
+  },
+  mountOnEnter: true,
+  unmountOnExit: true
+};
+const Container = styled__default['default'].div`
+  ${({
+  animationName,
+  animationDuration,
+  width,
+  from,
+  backgroundColor,
+  theme
+}) => {
+  return `
+    position: fixed;
+    z-index: 1001;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    ${from === "left" ? "left: 0;" : "right: 0;"}
+    background-color: ${backgroundColor || theme.colors.background.light};
+    width: ${width};
+    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
+
+    
+    &.${animationName}--right-enter {
+      transform: translate3d(${width}, 0, 0);
+    }
+    
+    &.${animationName}--right-enter.${animationName}--right-enter-active {
+      transform: translate3d(0, 0, 0);
+      transition: transform 0.2s ease-in-out;
+    }
+    
+    &.${animationName}--right-exit {
+      transform: translate3d(0, 0, 0);
+    }
+    
+    &.${animationName}--right-exit.${animationName}--right-exit-active {
+      transform: translate3d(${width}, 0, 0);
+      transition: transform 0.2s ease-in-out;
+    }
+    
+    &.${animationName}--left-enter {
+      transform: translate3d(-${width}, 0, 0);
+    }
+    
+    &.${animationName}--left-enter.${animationName}--left-enter-active {
+      transform: translate3d(0, 0, 0);
+      transition: transform 0.2s ease-in-out;
+    }
+    
+    &.${animationName}--left-exit {
+      transform: translate3d(0, 0, 0);
+    }
+    
+    &.${animationName}--left-exit.${animationName}--left-exit-active {
+      transform: translate3d(-${width}, 0, 0);
+      transition: transform ${animationDuration}ms ease-in-out;
+    }
+  `;
+}}
+`;
+const Contents = styled__default['default'].div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+`;
+const OffCanvas = ({
+  animationName = defaultAnimationName,
+  animationDuration = 300,
+  backgroundColor,
+  backgroundOverlay,
+  children,
+  from = "right",
+  isOpen,
+  onClickOutside,
+  width = "375px",
+  withPortal,
+  transitionProps
+}) => {
+  const contentRef = React$1.useRef(null);
+  components_OffCanvas_useClickOutside.useOutsideClick(contentRef, () => onClickOutside == null ? void 0 : onClickOutside());
+  if (backgroundOverlay && !onClickOutside) {
+    console.error("Please provide a clickOutside handler when using backgroundOverlay option in OffCanvas component");
+  }
+  const className = `${animationName}--${from}`;
+  const component = /* @__PURE__ */ React.createElement(React.Fragment, null, backgroundOverlay && /* @__PURE__ */ React.createElement(components_OffCanvas_Overlay['default'], {
+    isOpen
+  }), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(reactTransitionGroup.CSSTransition, {
+    in: isOpen,
+    className: `${animationName} ${className}`,
+    classNames: className,
+    ...defaultTransitionProps,
+    ...transitionProps
+  }, /* @__PURE__ */ React.createElement(Container, {
+    ref: contentRef,
+    animationName,
+    animationDuration,
+    backgroundColor,
+    from,
+    width
+  }, /* @__PURE__ */ React.createElement(Contents, {
+    className: `${animationName}-content`
+  }, children)))));
+  return withPortal ? reactDom.createPortal(component, document.body) : component;
+};
+
+exports.OffCanvas = OffCanvas;
+exports['default'] = OffCanvas;

package/cjs/components/OffCanvas/useClickOutside.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useOutsideClick = (ref, callback) => {
+  const handleClick = React.useCallback((event) => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      callback();
+    }
+  }, [callback, ref]);
+  React.useEffect(() => {
+    document.addEventListener("mousedown", handleClick);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [handleClick]);
+};
+
+exports.useOutsideClick = useOutsideClick;