@sentecacommerce-theme/lib 0.12.65 → 0.13.5-alpha.5

package/dist/esm/cms/ssr/prefetchInjectedContent.js

@@ -1,21 +1,60 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import regeneratorRuntime from "regenerator-runtime";
 import { ContentInjectionsGetAllValid } from '@sentecacommerce/sdk';
 import { cmsQueriesEnum } from '../api/queries/keys';
-export function prefetchInjectedContent(_x) {
-  return _prefetchInjectedContent.apply(this, arguments);
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _asyncToGenerator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+export function prefetchInjectedContent(queryCache) {
+    return _prefetchInjectedContent.apply(this, arguments);
 }
-
 function _prefetchInjectedContent() {
-  _prefetchInjectedContent = _asyncToGenerator(function* (queryCache) {
-    var data = yield ContentInjectionsGetAllValid();
-    queryCache.setQueryData(cmsQueriesEnum.useInjectedContentQueryKey, data, {
-      staleTime: 30000,
-      retry: false,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false
-    });
-  });
-  return _prefetchInjectedContent.apply(this, arguments);
+    _prefetchInjectedContent = _asyncToGenerator(regeneratorRuntime.mark(function _callee(queryCache) {
+        var data;
+        return regeneratorRuntime.wrap(function _callee$(_ctx) {
+            while(1)switch(_ctx.prev = _ctx.next){
+                case 0:
+                    _ctx.next = 2;
+                    return ContentInjectionsGetAllValid();
+                case 2:
+                    data = _ctx.sent;
+                    queryCache.setQueryData(cmsQueriesEnum.useInjectedContentQueryKey, data, {
+                        staleTime: 30000,
+                        retry: false,
+                        refetchOnMount: false,
+                        refetchOnReconnect: false,
+                        refetchOnWindowFocus: false
+                    });
+                case 4:
+                case "end":
+                    return _ctx.stop();
+            }
+        }, _callee);
+    }));
+    return _prefetchInjectedContent.apply(this, arguments);
 }
-//# sourceMappingURL=prefetchInjectedContent.js.map

package/dist/esm/cms/utils/getCMSContentListFilter.js

@@ -1,9 +1,8 @@
-export var getCMSContentListFilter = (type, tags) => {
-  var tagsFilter = tags == null ? void 0 : tags.reduce((filter, tag, index) => {
-    if (!index && !type) return filter + ("tags;in;\"" + tag + "\"");
-    return filter + ("&tags;in;\"" + tag + "\"");
-  }, '');
-  var typeFilter = type ? "type;in;\"" + type + "\"" : '';
-  return "" + typeFilter + (tagsFilter || '');
+export var getCMSContentListFilter = function(type, tags) {
+    var tagsFilter = tags === null || tags === void 0 ? void 0 : tags.reduce(function(filter, tag, index) {
+        if (!index && !type) return filter + "tags;in;\"".concat(tag, "\"");
+        return filter + "&tags;in;\"".concat(tag, "\"");
+    }, '');
+    var typeFilter = type ? "type;in;\"".concat(type, "\"") : '';
+    return "".concat(typeFilter).concat(tagsFilter || '');
 };
-//# sourceMappingURL=getCMSContentListFilter.js.map

package/dist/esm/cms/utils/getFirstNodeByComponentName.js

@@ -1,27 +1,55 @@
 function searchTree(node, componentName) {
-  var _node$component, _node$component2;
-
-  var currentName = (node == null ? void 0 : node.type) === 'template' ? node == null ? void 0 : (_node$component = node.component) == null ? void 0 : _node$component.componentName : node == null ? void 0 : (_node$component2 = node.component) == null ? void 0 : _node$component2.name;
-
-  if (currentName === componentName) {
-    return node;
-  }
-
-  if (node != null && node.children) {
-    for (var childNode of node == null ? void 0 : node.children) {
-      var result = searchTree(childNode, componentName);
-      if (result) return result;
+    var ref, ref1;
+    var currentName = (node === null || node === void 0 ? void 0 : node.type) === 'template' ? (ref = node === null || node === void 0 ? void 0 : node.component) === null || ref === void 0 ? void 0 : ref.componentName : (ref1 = node === null || node === void 0 ? void 0 : node.component) === null || ref1 === void 0 ? void 0 : ref1.name;
+    if (currentName === componentName) {
+        return node;
+    }
+    if (node === null || node === void 0 ? void 0 : node.children) {
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            for(var _iterator = (node === null || node === void 0 ? void 0 : node.children)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                var childNode = _step.value;
+                var result = searchTree(childNode, componentName);
+                if (result) return result;
+            }
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
     }
-  }
 }
-
-export var getTheFirstNodeByComponentName = (nodes, componentName) => {
-  for (var node of nodes) {
-    var result = searchTree(node, componentName);
-
-    if (result) {
-      return result;
+export var getTheFirstNodeByComponentName = function(nodes, componentName) {
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = nodes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var node = _step.value;
+            var result = searchTree(node, componentName);
+            if (result) {
+                return result;
+            }
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
     }
-  }
 };
-//# sourceMappingURL=getFirstNodeByComponentName.js.map

package/dist/esm/cms/utils/index.js

@@ -1,3 +1,2 @@
 export * from './getFirstNodeByComponentName';
 export * from './getCMSContentListFilter';
-//# sourceMappingURL=index.js.map

package/dist/esm/components/AnalyticsScripts/index.js

@@ -3,75 +3,99 @@ import { useRouter } from 'next/router';
 import { getPageView } from '../../analytics/pageView';
 import Head from 'next/head';
 import { useConfigState } from '../../hooks/useConfig';
-var isProduction = process.env.NODE_ENV === 'production';
-export function AnalyticsScripts() {
-  var _config$google, _config$google2, _config$google2$reMar, _config$google3, _config$google3$reMar;
-
-  var timeout = useRef(null);
-  var router = useRouter();
-  var config = useConfigState();
-  var [scripts, setScripts] = useState(null);
-  var hasGoogleId = Boolean((_config$google = config.google) == null ? void 0 : _config$google.id);
-  var hasGoogleReMarketing = Boolean(((_config$google2 = config.google) == null ? void 0 : (_config$google2$reMar = _config$google2.reMarketing) == null ? void 0 : _config$google2$reMar.id) && ((_config$google3 = config.google) == null ? void 0 : (_config$google3$reMar = _config$google3.reMarketing) == null ? void 0 : _config$google3$reMar.label));
-
-  var initAnalytics = () => {
-    var _config$google4, _config$google5, _config$google6, _config$google6$reMar, _config$facebook, _config$facebook2;
-
-    return setScripts({
-      gtag: hasGoogleId ? /*#__PURE__*/React.createElement("script", {
-        async: true,
-        src: "https://www.googletagmanager.com/gtag/js?id=" + ((_config$google4 = config.google) == null ? void 0 : _config$google4.id)
-      }) : null,
-      gtm: hasGoogleId ? /*#__PURE__*/React.createElement("script", {
-        dangerouslySetInnerHTML: {
-          __html: "\n      window.dataLayer = window.dataLayer || [];\n      function gtag(){dataLayer.push(arguments);}\n      gtag('js', new Date());\n      gtag('config', '" + ((_config$google5 = config.google) == null ? void 0 : _config$google5.id) + "', {\n        page_path: window.location.pathname,\n      });\n      " + (hasGoogleReMarketing ? "gtag('config', " + ((_config$google6 = config.google) == null ? void 0 : (_config$google6$reMar = _config$google6.reMarketing) == null ? void 0 : _config$google6$reMar.id) + ")" : '') + "\n  "
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterableToArrayLimit(arr, i) {
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _e = undefined;
+    try {
+        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
         }
-      }) : null,
-      pixel: (_config$facebook = config.facebook) != null && _config$facebook.pixelId ? /*#__PURE__*/React.createElement("script", {
-        dangerouslySetInnerHTML: {
-          __html: "\n  \n      !function(f,b,e,v,n,t,s)\n  \n      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  \n      n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  \n      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  \n      n.queue=[];t=b.createElement(e);t.async=!0;\n  \n      t.src=v;s=b.getElementsByTagName(e)[0];\n  \n      s.parentNode.insertBefore(t,s)}(window,document,'script',\n  \n      'https://connect.facebook.net/en_US/fbevents.js');\n      fbq('init', '" + ((_config$facebook2 = config.facebook) == null ? void 0 : _config$facebook2.pixelId) + "');\n      fbq('track', 'PageView');\n      window.fbq = fbq;\n  "
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
         }
-      }) : ''
-    });
-  };
-
-  var initAnalyticsOnEvent = () => {
-    if (document) {
-      clearTimeout(timeout.current);
-      initAnalytics();
-      document.removeEventListener('scroll', initAnalyticsOnEvent);
-      document.removeEventListener('mousemove', initAnalyticsOnEvent);
-      document.removeEventListener('touchstart', initAnalyticsOnEvent);
     }
-  };
-
-  useEffect(() => {
-    if (!isProduction) return;
-
-    if (document) {
-      timeout.current = setTimeout(initAnalytics, 3500);
-      document.addEventListener('scroll', initAnalyticsOnEvent);
-      document.addEventListener('mousemove', initAnalyticsOnEvent);
-      document.addEventListener('touchstart', initAnalyticsOnEvent);
-    }
-  }, [process.browser]);
-  var pageView = getPageView(config);
-  useEffect(() => {
-    if (!isProduction) return;
-
-    var handleRouteChange = url => {
-      if ('browser' in process) {
-        setTimeout(() => {
-          pageView(url, document.title);
-        }, 500);
-      }
+    return _arr;
+}
+function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
+var isProduction = process.env.NODE_ENV === 'production';
+export function AnalyticsScripts() {
+    var ref11, ref1, ref2, ref3, ref4;
+    var timeout = useRef(null);
+    var router = useRouter();
+    var config = useConfigState();
+    var ref5 = _slicedToArray(useState(null), 2), scripts = ref5[0], setScripts = ref5[1];
+    var hasGoogleId = Boolean((ref11 = config.google) === null || ref11 === void 0 ? void 0 : ref11.id);
+    var hasGoogleReMarketing = Boolean(((ref1 = config.google) === null || ref1 === void 0 ? void 0 : (ref2 = ref1.reMarketing) === null || ref2 === void 0 ? void 0 : ref2.id) && ((ref3 = config.google) === null || ref3 === void 0 ? void 0 : (ref4 = ref3.reMarketing) === null || ref4 === void 0 ? void 0 : ref4.label));
+    var initAnalytics = function() {
+        var ref, ref6, ref7, ref8, ref9, ref10;
+        return setScripts({
+            gtag: hasGoogleId ? /*#__PURE__*/ React.createElement("script", {
+                async: true,
+                src: "https://www.googletagmanager.com/gtag/js?id=".concat((ref = config.google) === null || ref === void 0 ? void 0 : ref.id)
+            }) : null,
+            gtm: hasGoogleId ? /*#__PURE__*/ React.createElement("script", {
+                dangerouslySetInnerHTML: {
+                    __html: "\n      window.dataLayer = window.dataLayer || [];\n      function gtag(){dataLayer.push(arguments);}\n      gtag('js', new Date());\n      gtag('config', '".concat((ref6 = config.google) === null || ref6 === void 0 ? void 0 : ref6.id, "', {\n        page_path: window.location.pathname,\n      });\n      ").concat(hasGoogleReMarketing ? "gtag('config', ".concat((ref7 = config.google) === null || ref7 === void 0 ? void 0 : (ref8 = ref7.reMarketing) === null || ref8 === void 0 ? void 0 : ref8.id, ")") : '', "\n  ")
+                }
+            }) : null,
+            pixel: ((ref9 = config.facebook) === null || ref9 === void 0 ? void 0 : ref9.pixelId) ? /*#__PURE__*/ React.createElement("script", {
+                dangerouslySetInnerHTML: {
+                    __html: "\n  \n      !function(f,b,e,v,n,t,s)\n  \n      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  \n      n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  \n      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  \n      n.queue=[];t=b.createElement(e);t.async=!0;\n  \n      t.src=v;s=b.getElementsByTagName(e)[0];\n  \n      s.parentNode.insertBefore(t,s)}(window,document,'script',\n  \n      'https://connect.facebook.net/en_US/fbevents.js');\n      fbq('init', '".concat((ref10 = config.facebook) === null || ref10 === void 0 ? void 0 : ref10.pixelId, "');\n      fbq('track', 'PageView');\n      window.fbq = fbq;\n  ")
+                }
+            }) : ''
+        });
     };
-
-    router.events.on('routeChangeComplete', handleRouteChange);
-    return () => {
-      router.events.off('routeChangeComplete', handleRouteChange);
+    var initAnalyticsOnEvent = function() {
+        if (document) {
+            clearTimeout(timeout.current);
+            initAnalytics();
+            document.removeEventListener('scroll', initAnalyticsOnEvent);
+            document.removeEventListener('mousemove', initAnalyticsOnEvent);
+            document.removeEventListener('touchstart', initAnalyticsOnEvent);
+        }
     };
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, scripts && /*#__PURE__*/React.createElement(Head, null, scripts.gtag, scripts.gtm, scripts.pixel));
+    useEffect(function() {
+        if (!isProduction) return;
+        if (document) {
+            timeout.current = setTimeout(initAnalytics, 3500);
+            document.addEventListener('scroll', initAnalyticsOnEvent);
+            document.addEventListener('mousemove', initAnalyticsOnEvent);
+            document.addEventListener('touchstart', initAnalyticsOnEvent);
+        }
+    }, [
+        process.browser
+    ]);
+    var pageView = getPageView(config);
+    useEffect(function() {
+        if (!isProduction) return;
+        var handleRouteChange = function(url) {
+            if ('browser' in process) {
+                setTimeout(function() {
+                    pageView(url, document.title);
+                }, 500);
+            }
+        };
+        router.events.on('routeChangeComplete', handleRouteChange);
+        return function() {
+            router.events.off('routeChangeComplete', handleRouteChange);
+        };
+    }, []);
+    return(/*#__PURE__*/ React.createElement(React.Fragment, null, scripts && /*#__PURE__*/ React.createElement(Head, null, scripts.gtag, scripts.gtm, scripts.pixel)));
 }
-//# sourceMappingURL=index.js.map

package/dist/esm/components/ClickOutside/hasParent.js

@@ -1,5 +1,4 @@
 import { isInDom } from './isInDom';
 export function hasParent(element, root) {
-  return (root == null ? void 0 : root.contains(element)) && isInDom(element);
+    return (root === null || root === void 0 ? void 0 : root.contains(element)) && isInDom(element);
 }
-//# sourceMappingURL=hasParent.js.map

package/dist/esm/components/ClickOutside/index.js

@@ -1,36 +1,28 @@
 import React, { useRef, useEffect } from 'react';
 import { hasParent } from './hasParent';
-export var ClickOutside = (_ref) => {
-  var {
-    active = true,
-    onClick,
-    children
-  } = _ref;
-  var innerRef = useRef();
-
-  var handleClick = event => {
-    if (!hasParent(event.target, innerRef == null ? void 0 : innerRef.current)) {
-      if (typeof onClick === 'function') {
-        onClick(event);
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (active) {
-      document.addEventListener('mousedown', handleClick);
-      document.addEventListener('touchstart', handleClick);
-    }
-
-    return () => {
-      if (active) {
-        document.removeEventListener('mousedown', handleClick);
-        document.removeEventListener('touchstart', handleClick);
-      }
+export var ClickOutside = function(param) {
+    var _active = param.active, active = _active === void 0 ? true : _active, onClick = param.onClick, children = param.children;
+    var innerRef = useRef();
+    var handleClick = function(event) {
+        if (!hasParent(event.target, innerRef === null || innerRef === void 0 ? void 0 : innerRef.current)) {
+            if (typeof onClick === 'function') {
+                onClick(event);
+            }
+        }
     };
-  });
-  return /*#__PURE__*/React.cloneElement(children, {
-    ref: innerRef
-  });
+    useEffect(function() {
+        if (active) {
+            document.addEventListener('mousedown', handleClick);
+            document.addEventListener('touchstart', handleClick);
+        }
+        return function() {
+            if (active) {
+                document.removeEventListener('mousedown', handleClick);
+                document.removeEventListener('touchstart', handleClick);
+            }
+        };
+    });
+    return React.cloneElement(children, {
+        ref: innerRef
+    });
 };
-//# sourceMappingURL=index.js.map

package/dist/esm/components/ClickOutside/isInDom.js

@@ -1,4 +1,3 @@
 export function isInDom(obj) {
-  return Boolean(obj.closest('body'));
+    return Boolean(obj.closest('body'));
 }
-//# sourceMappingURL=isInDom.js.map

package/dist/esm/components/Drawer/index.js

@@ -1,55 +1,166 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { OverflowHidden } from '../OverflowHidden';
-export var Drawer = (_ref) => {
-  var {
-    children,
-    duration = 500,
-    direction = DrawerDirectionsEnum.Right,
-    animationEasing = 'ease-out',
-    containerWidth = 320,
-    open,
-    handleClose,
-    backdropColor = '#000',
-    backdropOpacity = 0.6
-  } = _ref;
-  var containerWidhtInRem = containerWidth / 10;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, open && /*#__PURE__*/React.createElement(OverflowHidden, null), open && /*#__PURE__*/React.createElement(Backdrop, {
-    duration: duration,
-    open: open,
-    backdropColor: backdropColor,
-    backdropOpacity: backdropOpacity,
-    onClick: handleClose
-  }), /*#__PURE__*/React.createElement(DrawerStyledComponent, {
-    open: open,
-    duration: duration,
-    direction: direction,
-    containerWidth: containerWidhtInRem,
-    animationEasing: animationEasing,
-    handleClose: handleClose
-  }, children));
+function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _taggedTemplateLiteral([
+        "\n  right: 0;\n  transform: translateX(100%);\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _taggedTemplateLiteral([
+        "\n  left: 0;\n  transform: translateX(-100%);\n"
+    ]);
+    _templateObject1 = function _templateObject1() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _taggedTemplateLiteral([
+        "\n  left: 0;\n  transform: translateY(-100%);\n"
+    ]);
+    _templateObject2 = function _templateObject2() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _taggedTemplateLiteral([
+        "\n  left: 0;\n  transform: translateY(100%);\n"
+    ]);
+    _templateObject3 = function _templateObject3() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _taggedTemplateLiteral([
+        "\n        ",
+        "\n     };\n    "
+    ]);
+    _templateObject4 = function _templateObject4() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _taggedTemplateLiteral([
+        "\n    width: ",
+        "rem;\n    transition: ",
+        "ms;\n    transform ",
+        "ms ",
+        ";\n  "
+    ]);
+    _templateObject5 = function _templateObject5() {
+        return data;
+    };
+    return data;
+}
+function _templateObject6() {
+    var data = _taggedTemplateLiteral([
+        "\n      pointer-events: all;\n      transform: translateZ(0);\n      opacity: 1;\n      transition: ",
+        ",\n        transform ",
+        "ms ",
+        ";\n    "
+    ]);
+    _templateObject6 = function _templateObject6() {
+        return data;
+    };
+    return data;
+}
+function _templateObject7() {
+    var data = _taggedTemplateLiteral([
+        "\n  ",
+        ";\n\n  ",
+        "\n\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  opacity: 0;\n\n  ",
+        ";\n"
+    ]);
+    _templateObject7 = function _templateObject7() {
+        return data;
+    };
+    return data;
+}
+function _templateObject8() {
+    var data = _taggedTemplateLiteral([
+        "\n  width: 100%;\n  height: 100vh;\n  position: fixed;\n  left: 0;\n  top: 0;\n  background-color:",
+        ";\n  animation: ",
+        "ms;\n  opacity: ",
+        ";\n  "
+    ]);
+    _templateObject8 = function _templateObject8() {
+        return data;
+    };
+    return data;
+}
+function _templateObject9() {
+    var data = _taggedTemplateLiteral([
+        "\n",
+        ";\n  "
+    ]);
+    _templateObject9 = function _templateObject9() {
+        return data;
+    };
+    return data;
+}
+export var Drawer = function(param) {
+    var children = param.children, _duration = param.duration, duration = _duration === void 0 ? 500 : _duration, _direction = param.direction, direction = _direction === void 0 ? DrawerDirectionsEnum1.Right : _direction, _animationEasing = param.animationEasing, animationEasing = _animationEasing === void 0 ? 'ease-out' : _animationEasing, _containerWidth = param.containerWidth, containerWidth = _containerWidth === void 0 ? 320 : _containerWidth, open = param.open, handleClose = param.handleClose, _backdropColor = param.backdropColor, backdropColor = _backdropColor === void 0 ? '#000' : _backdropColor, _backdropOpacity = param.backdropOpacity, backdropOpacity = _backdropOpacity === void 0 ? 0.6 : _backdropOpacity;
+    var containerWidhtInRem = containerWidth / 10;
+    return(/*#__PURE__*/ React.createElement(React.Fragment, null, open && /*#__PURE__*/ React.createElement(OverflowHidden, null), open && /*#__PURE__*/ React.createElement(Backdrop, {
+        duration: duration,
+        open: open,
+        backdropColor: backdropColor,
+        backdropOpacity: backdropOpacity,
+        onClick: handleClose
+    }), /*#__PURE__*/ React.createElement(DrawerStyledComponent, {
+        open: open,
+        duration: duration,
+        direction: direction,
+        containerWidth: containerWidhtInRem,
+        animationEasing: animationEasing,
+        handleClose: handleClose
+    }, children)));
 };
-export var DrawerDirectionsEnum;
-
-(function (DrawerDirectionsEnum) {
-  DrawerDirectionsEnum["Top"] = "top";
-  DrawerDirectionsEnum["Bottom"] = "bottom";
-  DrawerDirectionsEnum["Left"] = "left";
-  DrawerDirectionsEnum["Right"] = "right";
-})(DrawerDirectionsEnum || (DrawerDirectionsEnum = {}));
-
-var drawerRight = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  right: 0;\n  transform: translateX(100%);\n"])));
-var drawerLeft = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  left: 0;\n  transform: translateX(-100%);\n"])));
-var drawerTop = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  left: 0;\n  transform: translateY(-100%);\n"])));
-var drawerBottom = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  left: 0;\n  transform: translateY(100%);\n"])));
-var DrawerStyledComponent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", "\n\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  opacity: 0;\n\n  ", ";\n"])), props => css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        ", "\n     };\n    "])), () => {
-  var animation = drawerRight;
-  if (props.direction === 'left') animation = drawerLeft;else if (props.direction === 'right') animation = drawerRight;else if (props.direction === 'top') animation = drawerTop;else if (props.direction === 'bottom') animation = drawerBottom;
-  return animation;
-}), props => css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    width: ", "rem;\n    transition: ", "ms;\n    transform ", "ms ", ";\n  "])), props.containerWidth, props.duration, props.duration, props.animationEasing), props => props.open && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      pointer-events: all;\n      transform: translateZ(0);\n      opacity: 1;\n      transition: ", ",\n        transform ", "ms ", ";\n    "])), props.duration, props.duration, props.animationEasing));
-var Backdrop = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n", ";\n  "])), props => props.open && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100vh;\n  position: fixed;\n  left: 0;\n  top: 0;\n  background-color:", ";\n  animation: ", "ms;\n  opacity: ", ";\n  "])), props.backdropColor, props.duration, props.backdropOpacity));
-//# sourceMappingURL=index.js.map
+var DrawerDirectionsEnum1;
+export { DrawerDirectionsEnum1 as DrawerDirectionsEnum,  };
+(function(DrawerDirectionsEnum) {
+    DrawerDirectionsEnum["Top"] = 'top';
+    DrawerDirectionsEnum["Bottom"] = 'bottom';
+    DrawerDirectionsEnum["Left"] = 'left';
+    DrawerDirectionsEnum["Right"] = 'right';
+})(DrawerDirectionsEnum1 || (DrawerDirectionsEnum1 = {
+}));
+var drawerRight = css(_templateObject());
+var drawerLeft = css(_templateObject1());
+var drawerTop = css(_templateObject2());
+var drawerBottom = css(_templateObject3());
+var DrawerStyledComponent = styled.div(_templateObject7(), function(props) {
+    return css(_templateObject4(), function() {
+        var animation = drawerRight;
+        if (props.direction === 'left') animation = drawerLeft;
+        else if (props.direction === 'right') animation = drawerRight;
+        else if (props.direction === 'top') animation = drawerTop;
+        else if (props.direction === 'bottom') animation = drawerBottom;
+        return animation;
+    });
+}, function(props) {
+    return css(_templateObject5(), props.containerWidth, props.duration, props.duration, props.animationEasing);
+}, function(props) {
+    return props.open && css(_templateObject6(), props.duration, props.duration, props.animationEasing);
+});
+var Backdrop = styled.div(_templateObject9(), function(props) {
+    return props.open && css(_templateObject8(), props.backdropColor, props.duration, props.backdropOpacity);
+});