@thecb/components 11.2.14-beta.1 → 11.2.14-beta.3

package/dist/index.esm.js

@@ -44704,7 +44704,6 @@ 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: {
     x: "-100vw",
@@ -44724,29 +44723,34 @@ var menuVariants = {
 var ImposterMenu = styled(Motion).withConfig({
   displayName: "NavMenuMobile__ImposterMenu",
   componentId: "sc-1pf0qp7-0"
-})(["position:fixed;top:0;left:0;right:0;bottom:0;background:", ";z-index:9999;"], function (_ref) {
-  var themeValues = _ref.themeValues;
+})(["position:fixed;top:", ";left:0;right:0;bottom:0;background:", ";"], function (_ref) {
+  var headerSize = _ref.headerSize;
+  return headerSize;
+}, function (_ref2) {
+  var themeValues = _ref2.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,
-    _ref2$menuContent = _ref2.menuContent,
-    menuContent = _ref2$menuContent === void 0 ? [] : _ref2$menuContent,
-    _ref2$visible = _ref2.visible,
-    visible = _ref2$visible === void 0 ? false : _ref2$visible,
-    _ref2$headerSize = _ref2.headerSize,
-    themeValues = _ref2.themeValues;
+var NavMenuMobile = function NavMenuMobile(_ref3) {
+  var id = _ref3.id,
+    _ref3$menuContent = _ref3.menuContent,
+    menuContent = _ref3$menuContent === void 0 ? [] : _ref3$menuContent,
+    _ref3$visible = _ref3.visible,
+    visible = _ref3$visible === void 0 ? false : _ref3$visible,
+    _ref3$headerSize = _ref3.headerSize,
+    headerSize = _ref3$headerSize === void 0 ? "74px" : _ref3$headerSize,
+    themeValues = _ref3.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: "100%",
     maxWidth: "400px",
     padding: "1rem 0.5rem",
-    extraStyles: "\n          position: relative;\n          height: 100%;\n        ",
+    extraStyles: "position: relative; max-width: 400px; height: calc(100vh - 72px);",
     background: themeValues.backgroundColor
   }, menuContent));
 };