@thecb/components 11.2.13 → 11.2.14-beta.1

package/dist/index.esm.js

@@ -44704,42 +44704,29 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
 };
 var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$M, "profile");
 
+// Animate with transforms (x) instead of left/right
 var menuVariants = {
   invisible: {
-    left: "-100vw",
-    right: "100vw",
+    x: "-100vw",
     transition: {
-      right: {
-        ease: "easeOut",
-        duration: 500
-      },
-      left: {
-        ease: "easeOut",
-        duration: 500
-      }
+      ease: "easeOut",
+      duration: 0.5
     }
   },
   visible: {
-    left: "0",
-    right: "0",
+    x: "0",
     transition: {
-      left: {
-        ease: "easeIn",
-        duration: 500
-      },
-      right: {
-        ease: "easeIn",
-        duration: 500
-      }
+      ease: "easeIn",
+      duration: 0.5
     }
   }
 };
 var ImposterMenu = styled(Motion).withConfig({
   displayName: "NavMenuMobile__ImposterMenu",
   componentId: "sc-1pf0qp7-0"
-})(["position:fixed;top:", ";"], function (_ref) {
-  var headerSize = _ref.headerSize;
-  return headerSize;
+})(["position:fixed;top:0;left:0;right:0;bottom:0;background:", ";z-index:9999;"], function (_ref) {
+  var themeValues = _ref.themeValues;
+  return (themeValues === null || themeValues === void 0 ? void 0 : themeValues.overlayColor) || "rgba(0, 0, 0, 0.5)";
 });
 var NavMenuMobile = function NavMenuMobile(_ref2) {
   var id = _ref2.id,
@@ -44748,18 +44735,18 @@ var NavMenuMobile = function NavMenuMobile(_ref2) {
     _ref2$visible = _ref2.visible,
     visible = _ref2$visible === void 0 ? false : _ref2$visible,
     _ref2$headerSize = _ref2.headerSize,
-    headerSize = _ref2$headerSize === void 0 ? "72px" : _ref2$headerSize,
     themeValues = _ref2.themeValues;
   return /*#__PURE__*/React__default.createElement(ImposterMenu, {
     id: id,
     variants: menuVariants,
     initial: "invisible",
     animate: visible ? "visible" : "invisible",
-    headerSize: headerSize
+    themeValues: themeValues
   }, /*#__PURE__*/React__default.createElement(Box, {
-    width: "100vw",
+    width: "100%",
+    maxWidth: "400px",
     padding: "1rem 0.5rem",
-    extraStyles: "position: relative; max-width: 400px; height: calc(100vh - 72px);",
+    extraStyles: "\n          position: relative;\n          height: 100%;\n        ",
     background: themeValues.backgroundColor
   }, menuContent));
 };