@veracity/vui 1.1.1 → 1.1.3

package/dist/cjs/core/index.d.ts

@@ -3,6 +3,7 @@ export * from './links';
 export * from './media';
 export * from './styled';
 export * from './theme';
+export * from './types';
 export * from './vui';
 export * from './vuiProvider';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA"}

package/dist/cjs/core/index.js

@@ -19,5 +19,6 @@ __exportStar(require("./links"), exports);
 __exportStar(require("./media"), exports);
 __exportStar(require("./styled"), exports);
 __exportStar(require("./theme"), exports);
+__exportStar(require("./types"), exports);
 __exportStar(require("./vui"), exports);
 __exportStar(require("./vuiProvider"), exports);

package/dist/cjs/core/media.d.ts

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { StyledProps } from 'styled-components';
 import { Screen } from '../theme';
 import { AnyNumber, AnyString } from '../utils';
+import { ChildrenProp } from './types';
 declare type ScreenWidth = Screen | AnyNumber | AnyString;
 export declare type RenderOnScreenProps = {
     /** Changes direction to below the breakpoint. */
@@ -16,14 +17,14 @@ export declare const mediaDown: (width: ScreenWidth) => (props: StyledProps<unkn
 /** Returns CSS media string with appropriate min-width value. */
 export declare const mediaUp: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
 /** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
-export declare const RenderOnDesktop: FC<RenderOnScreenProps>;
+export declare const RenderOnDesktop: FC<RenderOnScreenProps & ChildrenProp>;
 /** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
-export declare const RenderOnMobile: FC<RenderOnScreenProps>;
+export declare const RenderOnMobile: FC<RenderOnScreenProps & ChildrenProp>;
 /**
  * Renders its content when viewport width is at or above a provided breakpoint.
  * Optionally, direction can be set to down, or below, the breakpoint.
  */
-export declare const RenderOnScreen: FC<RenderOnScreenProps>;
+export declare const RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp>;
 /** Returns true if current viewport width is between provided min and max widths. */
 export declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
 /** Returns true if current viewport width is smaller than provided width. */

package/dist/cjs/core/media.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../src/core/media.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAG/C,aAAK,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAEjD,oBAAY,mBAAmB,GAAG;IAChC,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,YAAY,aAAc,WAAW,YAAY,WAAW,aAAa,YAAY,OAAO,CAAC,WACN,CAAA;AAEpG,gEAAgE;AAChE,eAAO,MAAM,SAAS,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WAE5E,CAAA;AAED,iEAAiE;AACjE,eAAO,MAAM,OAAO,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WACzB,CAAA;AAElD,wGAAwG;AACxG,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,mBAAmB,CAA0C,CAAA;AAE9F,+FAA+F;AAC/F,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAAiD,CAAA;AAEpG;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAGlD,CAAA;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,WAKtE;AAED,6EAA6E;AAC7E,wBAAgB,OAAO,CAAC,KAAK,EAAE,WAAW,WAIzC;AAED,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,WAAW;;;EAO1C;AAED,wFAAwF;AACxF,wBAAgB,KAAK,CAAC,KAAK,EAAE,WAAW,WAIvC"}
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../src/core/media.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,aAAK,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAEjD,oBAAY,mBAAmB,GAAG;IAChC,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,YAAY,aAAc,WAAW,YAAY,WAAW,aAAa,YAAY,OAAO,CAAC,WACN,CAAA;AAEpG,gEAAgE;AAChE,eAAO,MAAM,SAAS,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WAE5E,CAAA;AAED,iEAAiE;AACjE,eAAO,MAAM,OAAO,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WACzB,CAAA;AAElD,wGAAwG;AACxG,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAA0C,CAAA;AAE7G,+FAA+F;AAC/F,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAAiD,CAAA;AAEnH;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAGjE,CAAA;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,WAKtE;AAED,6EAA6E;AAC7E,wBAAgB,OAAO,CAAC,KAAK,EAAE,WAAW,WAIzC;AAED,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,WAAW;;;EAO1C;AAED,wFAAwF;AACxF,wBAAgB,KAAK,CAAC,KAAK,EAAE,WAAW,WAIvC"}

package/dist/cjs/core/types.d.ts

@@ -0,0 +1,5 @@
+import { ReactChild, ReactChildren, ReactFragment, ReactNode } from 'react';
+export interface ChildrenProp {
+    children?: JSX.Element[] | JSX.Element | ReactChildren | ReactChild | ReactFragment | ReactNode | null;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/cjs/core/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3E,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,OAAO,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,IAAI,CAAA;CACvG"}

package/dist/cjs/core/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/core/vuiProvider/vuiProvider.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { VuiTheme } from '../../theme';
+import { ChildrenProp } from '../types';
 declare type VuiProviderProps = {
     /** Adds basic styles to body @default true */
     globalStyle?: boolean;
@@ -9,6 +10,6 @@ declare type VuiProviderProps = {
     theme?: VuiTheme;
 };
 /** Provides theme to all wrapped components and by default includes CSS reset and global styles. */
-declare const VuiProvider: FC<VuiProviderProps>;
+declare const VuiProvider: FC<VuiProviderProps & ChildrenProp>;
 export default VuiProvider;
 //# sourceMappingURL=vuiProvider.d.ts.map

package/dist/cjs/core/vuiProvider/vuiProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vuiProvider.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/vuiProvider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAqB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAIpD,aAAK,gBAAgB,GAAG;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,KAAK,CAAC,EAAE,QAAQ,CAAA;CACjB,CAAA;AAED,oGAAoG;AACpG,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAgBrC,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"vuiProvider.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/vuiProvider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAKjC,OAAqB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAIvC,aAAK,gBAAgB,GAAG;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,KAAK,CAAC,EAAE,QAAQ,CAAA;CACjB,CAAA;AAED,oGAAoG;AACpG,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAepD,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/cjs/core/vuiProvider/vuiProvider.js

@@ -5,17 +5,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = require("styled-components");
+const modalStyle_1 = __importDefault(require("../../modal/modalStyle"));
 const popoverStyle_1 = __importDefault(require("../../popover/popoverStyle"));
 const theme_1 = __importDefault(require("../../theme"));
 const globalStyle_1 = __importDefault(require("./globalStyle"));
 const resetCSS_1 = __importDefault(require("./resetCSS"));
 /** Provides theme to all wrapped components and by default includes CSS reset and global styles. */
-const VuiProvider = ({ children, globalStyle = true, resetCSS = true, theme = theme_1.default }) => {
-    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        react_1.default.createElement(react_1.default.Fragment, null,
-            resetCSS && react_1.default.createElement(resetCSS_1.default, null),
-            react_1.default.createElement(globalStyle_1.default, { globalStyle: globalStyle }),
-            react_1.default.createElement(popoverStyle_1.default, null),
-            children)));
-};
+const VuiProvider = ({ children, globalStyle = true, resetCSS = true, theme = theme_1.default }) => (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+    react_1.default.createElement(react_1.default.Fragment, null,
+        resetCSS && react_1.default.createElement(resetCSS_1.default, null),
+        react_1.default.createElement(globalStyle_1.default, { globalStyle: globalStyle }),
+        react_1.default.createElement(modalStyle_1.default, null),
+        react_1.default.createElement(popoverStyle_1.default, null),
+        children)));
 exports.default = VuiProvider;

package/dist/cjs/modal/focusLock.d.ts

@@ -1,10 +1,11 @@
 import { FC } from 'react';
+import { ChildrenProp } from '../core/types';
 import { FocusLockProps } from './focusLock.types';
 /**
  * Traps the focus within the provided content. That is, tabbing with keyboard will
  * only cycle through the children and won't leave the boundary of the FocusLock.
  * This behavior enhances accessibility of the Modal component.
  */
-export declare const FocusLock: FC<FocusLockProps>;
+export declare const FocusLock: FC<FocusLockProps & ChildrenProp>;
 export default FocusLock;
 //# sourceMappingURL=focusLock.d.ts.map

package/dist/cjs/modal/focusLock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusLock.d.ts","sourceRoot":"","sources":["../../../src/modal/focusLock.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAe,MAAM,OAAO,CAAA;AAG9C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAmCxC,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"focusLock.d.ts","sourceRoot":"","sources":["../../../src/modal/focusLock.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAe,MAAM,OAAO,CAAA;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CAmCvD,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/cjs/modal/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/modal/modal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,YAAY,EAAE,MAAM,SAAS,CAAA;AAK3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAGzC;;;;;GAKG;AACH,eAAO,MAAM,KAAK;cAsGN,oBAAoB;aACrB,mBAAmB;CAC7B,CAAA;AAKD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/modal/modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,YAAY,EAAE,MAAM,SAAS,CAAA;AAK3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAGzC;;;;;GAKG;AACH,eAAO,MAAM,KAAK;cA6FN,oBAAoB;aACrB,mBAAmB;CAC7B,CAAA;AAKD,eAAe,KAAK,CAAA"}

package/dist/cjs/modal/modal.js

@@ -39,7 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 const react_1 = __importStar(require("react"));
-const react_remove_scroll_1 = require("react-remove-scroll");
 const box_1 = __importDefault(require("../box"));
 const core_1 = require("../core");
 const portal_1 = __importDefault(require("../portal"));
@@ -60,7 +59,7 @@ exports.Modal = (0, core_1.vui)((props, ref) => {
     const { allowPinchZoom, children, className, contentProps, disableAutoFocus, disableBackdropClose, disableEscClose, disablePortal, disableReturnFocus, disableScrollLock, disableTrapFocus, finalFocusRef, hideBackdrop, initialFocusRef, isOpen, onBackdropClick: onBackdropClickProp, onClose, onEsc, preserveScrollBar, size, variant } = props, rest = __rest(props, ["allowPinchZoom", "children", "className", "contentProps", "disableAutoFocus", "disableBackdropClose", "disableEscClose", "disablePortal", "disableReturnFocus", "disableScrollLock", "disableTrapFocus", "finalFocusRef", "hideBackdrop", "initialFocusRef", "isOpen", "onBackdropClick", "onClose", "onEsc", "preserveScrollBar", "size", "variant"]);
     const modalRef = (0, react_1.useRef)(null);
     const mouseDownTarget = (0, react_1.useRef)(null);
-    (0, modalManager_1.useModalManager)(modalRef, isOpen);
+    (0, modalManager_1.useModalManager)(modalRef, isOpen, disableScrollLock);
     if (!isOpen)
         return null;
     const onBackdropClick = (e) => {
@@ -80,9 +79,7 @@ exports.Modal = (0, core_1.vui)((props, ref) => {
             onEsc === null || onEsc === void 0 ? void 0 : onEsc();
         }
     };
-    const onMouseDown = (e) => {
-        mouseDownTarget.current = e.target;
-    };
+    const onMouseDown = (e) => (mouseDownTarget.current = e.target);
     const childProps = {
         onClick: (e) => {
             var _a, _b;
@@ -97,8 +94,7 @@ exports.Modal = (0, core_1.vui)((props, ref) => {
             react_1.default.createElement(box_1.default, Object.assign({ className: (0, utils_1.cs)('vui-modal', className), ref: (0, utils_1.mergeRefs)(ref, modalRef) }, rest, { onKeyDown: (0, utils_1.callAll)(props.onKeyDown, onKeyDown), onMouseDown: (0, utils_1.callAll)(props.onMouseDown, onMouseDown) }),
                 !hideBackdrop && react_1.default.createElement(modalBackdrop_1.default, null),
                 react_1.default.createElement(focusLock_1.default, { autoFocus: !disableAutoFocus, finalFocusRef: finalFocusRef, initialFocusRef: initialFocusRef, isDisabled: disableTrapFocus, returnFocus: !disableReturnFocus },
-                    react_1.default.createElement(react_remove_scroll_1.RemoveScroll, { allowPinchZoom: allowPinchZoom, enabled: !disableScrollLock, forwardProps: true, removeScrollBar: !preserveScrollBar },
-                        react_1.default.createElement(modalContent_1.default, Object.assign({}, contentProps), (0, react_1.cloneElement)(children, childProps))))))));
+                    react_1.default.createElement(modalContent_1.default, Object.assign({}, contentProps), (0, react_1.cloneElement)(children, childProps)))))));
 });
 exports.Modal.Backdrop = modalBackdrop_1.default;
 exports.Modal.Content = modalContent_1.default;

package/dist/cjs/modal/modalManager.d.ts

@@ -8,6 +8,6 @@ declare class ModalManager {
 }
 export declare const manager: ModalManager;
 /** Refs of new modals will be automatically added/removed from the state when rendering. */
-export declare function useModalManager(ref: Ref<any>, isOpen?: boolean): void;
+export declare function useModalManager(ref: Ref<any>, isOpen?: boolean, disableScrollLock?: boolean): void;
 export {};
 //# sourceMappingURL=modalManager.d.ts.map

package/dist/cjs/modal/modalManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modalManager.d.ts","sourceRoot":"","sources":["../../../src/modal/modalManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAa,MAAM,OAAO,CAAA;AAEtC,0CAA0C;AAC1C,cAAM,YAAY;IAChB,MAAM,EAAE,GAAG,EAAE,CAAK;IAElB,GAAG,UAAW,GAAG,UAEhB;IAED,MAAM,UAAW,GAAG,UAEnB;IAED,UAAU,UAAW,GAAG,aAGvB;CACF;AAED,eAAO,MAAM,OAAO,cAAqB,CAAA;AAEzC,4FAA4F;AAC5F,wBAAgB,eAAe,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,EAAE,OAAO,QAQ9D"}
+{"version":3,"file":"modalManager.d.ts","sourceRoot":"","sources":["../../../src/modal/modalManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAa,MAAM,OAAO,CAAA;AAEtC,0CAA0C;AAC1C,cAAM,YAAY;IAChB,MAAM,EAAE,GAAG,EAAE,CAAK;IAElB,GAAG,UAAW,GAAG,UAEhB;IAED,MAAM,UAAW,GAAG,UAEnB;IAED,UAAU,UAAW,GAAG,aAGvB;CACF;AAED,eAAO,MAAM,OAAO,cAAqB,CAAA;AAEzC,4FAA4F;AAC5F,wBAAgB,eAAe,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,iBAAiB,CAAC,EAAE,OAAO,QAY3F"}

package/dist/cjs/modal/modalManager.js

@@ -20,11 +20,17 @@ class ModalManager {
 }
 exports.manager = new ModalManager();
 /** Refs of new modals will be automatically added/removed from the state when rendering. */
-function useModalManager(ref, isOpen) {
+function useModalManager(ref, isOpen, disableScrollLock) {
     (0, react_1.useEffect)(() => {
-        isOpen && exports.manager.add(ref);
+        if (isOpen) {
+            exports.manager.add(ref);
+            if (!disableScrollLock)
+                document.body.classList.add('no-scroll');
+        }
         return () => {
             exports.manager.remove(ref);
+            if (!disableScrollLock)
+                document.body.classList.remove('no-scroll');
         };
     }, [isOpen, ref]);
 }

package/dist/cjs/modal/modalStyle.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export default _default;
+//# sourceMappingURL=modalStyle.d.ts.map

package/dist/cjs/modal/modalStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalStyle.d.ts","sourceRoot":"","sources":["../../../src/modal/modalStyle.ts"],"names":[],"mappings":";AAEA,wBAMC"}

package/dist/cjs/modal/modalStyle.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("../core");
+exports.default = (0, core_1.createGlobalStyle) `
+
+body.no-scroll {
+	overflow: hidden !important;
+	overscroll-behavior: contain;
+}
+`;

package/dist/cjs/portal/portal.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
+import { ChildrenProp } from '../core/types';
 import { PortalProps } from './portal.types';
 /** Provided children are portaled to document.body or custom container. */
-export declare const Portal: FC<PortalProps>;
+export declare const Portal: FC<PortalProps & ChildrenProp>;
 export default Portal;
 //# sourceMappingURL=portal.d.ts.map

package/dist/cjs/portal/portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../src/portal/portal.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAA;AAGtD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,2EAA2E;AAC3E,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAalC,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../src/portal/portal.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAA;AAGtD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,2EAA2E;AAC3E,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CAajD,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/cjs/tabs/tabs.d.ts

@@ -3,7 +3,6 @@ import { TabsProps } from './tabs.types';
 export declare const TabsBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & import("..").ThemingProps<"Tabs"> & {
     activeTabId?: number | undefined;
     children?: React.ReactNode | React.ReactNode[];
-    withPanel?: boolean | undefined;
     onTabClick?: ((id: number) => void) | undefined;
 }, never>;
 /**

package/dist/cjs/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAOtD,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDAmEf,CAAA;AAEF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAMtD,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDA0Df,CAAA;AAEF,eAAe,IAAI,CAAA"}

package/dist/cjs/tabs/tabs.js

@@ -41,7 +41,6 @@ exports.Tabs = exports.TabsBase = void 0;
 const react_1 = __importStar(require("react"));
 const core_1 = require("../core");
 const p_1 = require("../p");
-const panel_1 = require("../panel");
 const utils_1 = require("../utils");
 const tab_1 = __importDefault(require("./tab"));
 const tabsNavBar_1 = __importDefault(require("./tabsNavBar"));
@@ -53,7 +52,7 @@ exports.TabsBase = core_1.styled.divBox `
  * Implements Tabs navigation to switch between views.
  */
 exports.Tabs = (0, core_1.vui)((props, ref) => {
-    const { activeTabId, children, className, size, withPanel, onTabClick } = props, rest = __rest(props, ["activeTabId", "children", "className", "size", "withPanel", "onTabClick"]);
+    const { activeTabId, children, className, size, onTabClick } = props, rest = __rest(props, ["activeTabId", "children", "className", "size", "onTabClick"]);
     const styles = (0, core_1.useStyleConfig)('Tabs', props);
     const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = (0, useTabsState_1.useTabsState)('fadeIn', activeTabId);
     (0, react_1.useEffect)(() => {
@@ -87,8 +86,7 @@ exports.Tabs = (0, core_1.vui)((props, ref) => {
     };
     const activeTab = tabs === null || tabs === void 0 ? void 0 : tabs[activeTabIndex];
     return (react_1.default.createElement(exports.TabsBase, Object.assign({ className: (0, utils_1.cs)('vui-tabs', className), ref: ref }, styles.container, rest),
-        !!(tabs === null || tabs === void 0 ? void 0 : tabs.length) && (react_1.default.createElement(tabsNavBar_1.default, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: onNavItemClick, size: size, tabs: tabs, withPanel: withPanel })),
-        (tabs === null || tabs === void 0 ? void 0 : tabs.length) ? (withPanel ? (react_1.default.createElement(panel_1.Panel, { display: "block", variant: "outlined", w: "100%" },
-            react_1.default.createElement(tab_1.default, { onClick: activeTab === null || activeTab === void 0 ? void 0 : activeTab.onClick, title: activeTab === null || activeTab === void 0 ? void 0 : activeTab.title }, !(activeTab === null || activeTab === void 0 ? void 0 : activeTab.disabled) && (activeTab === null || activeTab === void 0 ? void 0 : activeTab.children)))) : (react_1.default.createElement(tab_1.default, { onClick: activeTab === null || activeTab === void 0 ? void 0 : activeTab.onClick, title: activeTab === null || activeTab === void 0 ? void 0 : activeTab.title }, !(activeTab === null || activeTab === void 0 ? void 0 : activeTab.disabled) && (activeTab === null || activeTab === void 0 ? void 0 : activeTab.children)))) : (react_1.default.createElement(p_1.P, { p: 2 }, "Please specify Tabs."))));
+        !!(tabs === null || tabs === void 0 ? void 0 : tabs.length) && (react_1.default.createElement(tabsNavBar_1.default, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: onNavItemClick, size: size, tabs: tabs })),
+        (tabs === null || tabs === void 0 ? void 0 : tabs.length) ? (react_1.default.createElement(tab_1.default, { onClick: activeTab === null || activeTab === void 0 ? void 0 : activeTab.onClick, title: activeTab === null || activeTab === void 0 ? void 0 : activeTab.title }, !(activeTab === null || activeTab === void 0 ? void 0 : activeTab.disabled) && (activeTab === null || activeTab === void 0 ? void 0 : activeTab.children))) : (react_1.default.createElement(p_1.P, { p: 2 }, "Please specify Tabs."))));
 });
 exports.default = exports.Tabs;

package/dist/cjs/tabs/tabs.types.d.ts

@@ -6,8 +6,6 @@ export declare type TabsSize = 'md' | 'sm' | 'lg' | 'xl';
 export declare type TabsProps = SystemProps & ThemingProps<'Tabs'> & {
     activeTabId?: number;
     children?: ReactNode | ReactNode[];
-    /** Wraps up the tab content with an outlined panel. */
-    withPanel?: boolean;
     onTabClick?: (id: number) => void;
 };
 export declare type TabProps = SystemProps & {
@@ -23,6 +21,5 @@ export declare type TabNavBarProps = {
     activeNavItem?: number;
     animationDirection?: AnimationDirection;
     size?: TabsSize;
-    withPanel?: boolean;
 };
 //# sourceMappingURL=tabs.types.d.ts.map

package/dist/cjs/tabs/tabs.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,oBAAY,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAClC,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,oBAAY,QAAQ,GAAG,WAAW,GAAG;IACnC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,oBAAY,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA"}
+{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,oBAAY,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAClC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,oBAAY,QAAQ,GAAG,WAAW,GAAG;IACnC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,oBAAY,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}

package/dist/cjs/tabs/tabsNavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,eAAO,MAAM,UAAU,uDA0CrB,CAAA;AAEF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,eAAO,MAAM,UAAU,uDAwCrB,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/cjs/tabs/tabsNavBar.js

@@ -11,9 +11,9 @@ const list_1 = require("../list");
 const utils_1 = require("../utils");
 exports.TabsNavBar = (0, core_1.vui)((props, ref) => {
     var _a;
-    const { tabs, onNavItemClick, activeNavItem, animationDirection, size, withPanel } = props;
-    return (react_1.default.createElement(list_1.List, { borderBottom: withPanel ? 'none' : '1px solid grey.40', className: (0, utils_1.cs)('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: withPanel ? 0 : 2, ml: withPanel ? 1 : 0, ref: ref, size: size, w: 1 }, (_a = tabs === null || tabs === void 0 ? void 0 : tabs.map) === null || _a === void 0 ? void 0 : _a.call(tabs, tab => (react_1.default.createElement(list_1.ListItem, { className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab === null || tab === void 0 ? void 0 : tab.id}`, disabled: tab.disabled, display: "inline-flex", key: tab.id, onClick: () => (tab === null || tab === void 0 ? void 0 : tab.id) !== undefined && onNavItemClick(tab.id), position: "relative" },
+    const { tabs, onNavItemClick, activeNavItem, animationDirection, size } = props;
+    return (react_1.default.createElement(list_1.List, { borderBottom: "1px solid grey.40", className: (0, utils_1.cs)('vui-tabsNavBar'), display: "flex", isInteractive: true, ref: ref, size: size, w: 1 }, (_a = tabs === null || tabs === void 0 ? void 0 : tabs.map) === null || _a === void 0 ? void 0 : _a.call(tabs, tab => (react_1.default.createElement(list_1.ListItem, { className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab === null || tab === void 0 ? void 0 : tab.id}`, disabled: tab.disabled, display: "inline-flex", key: tab.id, onClick: () => (tab === null || tab === void 0 ? void 0 : tab.id) !== undefined && onNavItemClick(tab.id), position: "relative" },
         tab.title,
-        !tab.disabled && tab.id === activeNavItem && (react_1.default.createElement(box_1.default, { animation: animationDirection, bg: "prussian.80", bottom: withPanel ? 0 : '-1px', h: `${size === 'sm' ? 2 : 4}px`, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
+        !tab.disabled && tab.id === activeNavItem && (react_1.default.createElement(box_1.default, { animation: animationDirection, bg: "prussian.80", bottom: "-1px", h: `${size === 'sm' ? 2 : 4}px`, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
 });
 exports.default = exports.TabsNavBar;

package/dist/esm/core/index.d.ts

@@ -3,6 +3,7 @@ export * from './links';
 export * from './media';
 export * from './styled';
 export * from './theme';
+export * from './types';
 export * from './vui';
 export * from './vuiProvider';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA"}

package/dist/esm/core/index.js

@@ -3,5 +3,6 @@ export * from './links';
 export * from './media';
 export * from './styled';
 export * from './theme';
+export * from './types';
 export * from './vui';
 export * from './vuiProvider';

package/dist/esm/core/media.d.ts

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { StyledProps } from 'styled-components';
 import { Screen } from '../theme';
 import { AnyNumber, AnyString } from '../utils';
+import { ChildrenProp } from './types';
 declare type ScreenWidth = Screen | AnyNumber | AnyString;
 export declare type RenderOnScreenProps = {
     /** Changes direction to below the breakpoint. */
@@ -16,14 +17,14 @@ export declare const mediaDown: (width: ScreenWidth) => (props: StyledProps<unkn
 /** Returns CSS media string with appropriate min-width value. */
 export declare const mediaUp: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
 /** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
-export declare const RenderOnDesktop: FC<RenderOnScreenProps>;
+export declare const RenderOnDesktop: FC<RenderOnScreenProps & ChildrenProp>;
 /** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
-export declare const RenderOnMobile: FC<RenderOnScreenProps>;
+export declare const RenderOnMobile: FC<RenderOnScreenProps & ChildrenProp>;
 /**
  * Renders its content when viewport width is at or above a provided breakpoint.
  * Optionally, direction can be set to down, or below, the breakpoint.
  */
-export declare const RenderOnScreen: FC<RenderOnScreenProps>;
+export declare const RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp>;
 /** Returns true if current viewport width is between provided min and max widths. */
 export declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
 /** Returns true if current viewport width is smaller than provided width. */

package/dist/esm/core/media.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../src/core/media.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAG/C,aAAK,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAEjD,oBAAY,mBAAmB,GAAG;IAChC,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,YAAY,aAAc,WAAW,YAAY,WAAW,aAAa,YAAY,OAAO,CAAC,WACN,CAAA;AAEpG,gEAAgE;AAChE,eAAO,MAAM,SAAS,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WAE5E,CAAA;AAED,iEAAiE;AACjE,eAAO,MAAM,OAAO,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WACzB,CAAA;AAElD,wGAAwG;AACxG,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,mBAAmB,CAA0C,CAAA;AAE9F,+FAA+F;AAC/F,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAAiD,CAAA;AAEpG;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAGlD,CAAA;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,WAKtE;AAED,6EAA6E;AAC7E,wBAAgB,OAAO,CAAC,KAAK,EAAE,WAAW,WAIzC;AAED,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,WAAW;;;EAO1C;AAED,wFAAwF;AACxF,wBAAgB,KAAK,CAAC,KAAK,EAAE,WAAW,WAIvC"}
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../src/core/media.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,aAAK,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAEjD,oBAAY,mBAAmB,GAAG;IAChC,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,YAAY,aAAc,WAAW,YAAY,WAAW,aAAa,YAAY,OAAO,CAAC,WACN,CAAA;AAEpG,gEAAgE;AAChE,eAAO,MAAM,SAAS,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WAE5E,CAAA;AAED,iEAAiE;AACjE,eAAO,MAAM,OAAO,UAAW,WAAW,aAAa,YAAY,OAAO,CAAC,WACzB,CAAA;AAElD,wGAAwG;AACxG,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAA0C,CAAA;AAE7G,+FAA+F;AAC/F,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAAiD,CAAA;AAEnH;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAGjE,CAAA;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,WAKtE;AAED,6EAA6E;AAC7E,wBAAgB,OAAO,CAAC,KAAK,EAAE,WAAW,WAIzC;AAED,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,WAAW;;;EAO1C;AAED,wFAAwF;AACxF,wBAAgB,KAAK,CAAC,KAAK,EAAE,WAAW,WAIvC"}

package/dist/esm/core/types.d.ts

@@ -0,0 +1,5 @@
+import { ReactChild, ReactChildren, ReactFragment, ReactNode } from 'react';
+export interface ChildrenProp {
+    children?: JSX.Element[] | JSX.Element | ReactChildren | ReactChild | ReactFragment | ReactNode | null;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/core/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3E,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,OAAO,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,IAAI,CAAA;CACvG"}

package/dist/esm/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/core/vuiProvider/vuiProvider.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { VuiTheme } from '../../theme';
+import { ChildrenProp } from '../types';
 declare type VuiProviderProps = {
     /** Adds basic styles to body @default true */
     globalStyle?: boolean;
@@ -9,6 +10,6 @@ declare type VuiProviderProps = {
     theme?: VuiTheme;
 };
 /** Provides theme to all wrapped components and by default includes CSS reset and global styles. */
-declare const VuiProvider: FC<VuiProviderProps>;
+declare const VuiProvider: FC<VuiProviderProps & ChildrenProp>;
 export default VuiProvider;
 //# sourceMappingURL=vuiProvider.d.ts.map

package/dist/esm/core/vuiProvider/vuiProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vuiProvider.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/vuiProvider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAqB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAIpD,aAAK,gBAAgB,GAAG;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,KAAK,CAAC,EAAE,QAAQ,CAAA;CACjB,CAAA;AAED,oGAAoG;AACpG,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAgBrC,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"vuiProvider.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/vuiProvider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAKjC,OAAqB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAIvC,aAAK,gBAAgB,GAAG;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,KAAK,CAAC,EAAE,QAAQ,CAAA;CACjB,CAAA;AAED,oGAAoG;AACpG,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAepD,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/esm/core/vuiProvider/vuiProvider.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
+import ModalStyle from '../../modal/modalStyle';
 import PopoverStyle from '../../popover/popoverStyle';
 import defaultTheme from '../../theme';
 import GlobalStyle from './globalStyle';
 import ResetCSS from './resetCSS';
 /** Provides theme to all wrapped components and by default includes CSS reset and global styles. */
-const VuiProvider = ({ children, globalStyle = true, resetCSS = true, theme = defaultTheme }) => {
-    return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(React.Fragment, null,
-            resetCSS && React.createElement(ResetCSS, null),
-            React.createElement(GlobalStyle, { globalStyle: globalStyle }),
-            React.createElement(PopoverStyle, null),
-            children)));
-};
+const VuiProvider = ({ children, globalStyle = true, resetCSS = true, theme = defaultTheme }) => (React.createElement(ThemeProvider, { theme: theme },
+    React.createElement(React.Fragment, null,
+        resetCSS && React.createElement(ResetCSS, null),
+        React.createElement(GlobalStyle, { globalStyle: globalStyle }),
+        React.createElement(ModalStyle, null),
+        React.createElement(PopoverStyle, null),
+        children)));
 export default VuiProvider;

package/dist/esm/modal/focusLock.d.ts

@@ -1,10 +1,11 @@
 import { FC } from 'react';
+import { ChildrenProp } from '../core/types';
 import { FocusLockProps } from './focusLock.types';
 /**
  * Traps the focus within the provided content. That is, tabbing with keyboard will
  * only cycle through the children and won't leave the boundary of the FocusLock.
  * This behavior enhances accessibility of the Modal component.
  */
-export declare const FocusLock: FC<FocusLockProps>;
+export declare const FocusLock: FC<FocusLockProps & ChildrenProp>;
 export default FocusLock;
 //# sourceMappingURL=focusLock.d.ts.map

package/dist/esm/modal/focusLock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusLock.d.ts","sourceRoot":"","sources":["../../../src/modal/focusLock.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAe,MAAM,OAAO,CAAA;AAG9C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAmCxC,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"focusLock.d.ts","sourceRoot":"","sources":["../../../src/modal/focusLock.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAe,MAAM,OAAO,CAAA;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CAmCvD,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/esm/modal/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/modal/modal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,YAAY,EAAE,MAAM,SAAS,CAAA;AAK3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAGzC;;;;;GAKG;AACH,eAAO,MAAM,KAAK;cAsGN,oBAAoB;aACrB,mBAAmB;CAC7B,CAAA;AAKD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/modal/modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,YAAY,EAAE,MAAM,SAAS,CAAA;AAK3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAGzC;;;;;GAKG;AACH,eAAO,MAAM,KAAK;cA6FN,oBAAoB;aACrB,mBAAmB;CAC7B,CAAA;AAKD,eAAe,KAAK,CAAA"}

package/dist/esm/modal/modal.js

@@ -1,5 +1,4 @@
 import React, { cloneElement, useRef } from 'react';
-import { RemoveScroll } from 'react-remove-scroll';
 import Box from '../box';
 import { vui } from '../core';
 import Portal from '../portal';
@@ -19,7 +18,7 @@ export const Modal = vui((props, ref) => {
     const { allowPinchZoom, children, className, contentProps, disableAutoFocus, disableBackdropClose, disableEscClose, disablePortal, disableReturnFocus, disableScrollLock, disableTrapFocus, finalFocusRef, hideBackdrop, initialFocusRef, isOpen, onBackdropClick: onBackdropClickProp, onClose, onEsc, preserveScrollBar, size, variant, ...rest } = props;
     const modalRef = useRef(null);
     const mouseDownTarget = useRef(null);
-    useModalManager(modalRef, isOpen);
+    useModalManager(modalRef, isOpen, disableScrollLock);
     if (!isOpen)
         return null;
     const onBackdropClick = (e) => {
@@ -39,9 +38,7 @@ export const Modal = vui((props, ref) => {
             onEsc?.();
         }
     };
-    const onMouseDown = (e) => {
-        mouseDownTarget.current = e.target;
-    };
+    const onMouseDown = (e) => (mouseDownTarget.current = e.target);
     const childProps = {
         onClick: (e) => {
             e.stopPropagation();
@@ -55,8 +52,7 @@ export const Modal = vui((props, ref) => {
             React.createElement(Box, { className: cs('vui-modal', className), ref: mergeRefs(ref, modalRef), ...rest, onKeyDown: callAll(props.onKeyDown, onKeyDown), onMouseDown: callAll(props.onMouseDown, onMouseDown) },
                 !hideBackdrop && React.createElement(ModalBackdrop, null),
                 React.createElement(FocusLock, { autoFocus: !disableAutoFocus, finalFocusRef: finalFocusRef, initialFocusRef: initialFocusRef, isDisabled: disableTrapFocus, returnFocus: !disableReturnFocus },
-                    React.createElement(RemoveScroll, { allowPinchZoom: allowPinchZoom, enabled: !disableScrollLock, forwardProps: true, removeScrollBar: !preserveScrollBar },
-                        React.createElement(ModalContent, { ...contentProps }, cloneElement(children, childProps))))))));
+                    React.createElement(ModalContent, { ...contentProps }, cloneElement(children, childProps)))))));
 });
 Modal.Backdrop = ModalBackdrop;
 Modal.Content = ModalContent;

package/dist/esm/modal/modalManager.d.ts

@@ -8,6 +8,6 @@ declare class ModalManager {
 }
 export declare const manager: ModalManager;
 /** Refs of new modals will be automatically added/removed from the state when rendering. */
-export declare function useModalManager(ref: Ref<any>, isOpen?: boolean): void;
+export declare function useModalManager(ref: Ref<any>, isOpen?: boolean, disableScrollLock?: boolean): void;
 export {};
 //# sourceMappingURL=modalManager.d.ts.map

package/dist/esm/modal/modalManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modalManager.d.ts","sourceRoot":"","sources":["../../../src/modal/modalManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAa,MAAM,OAAO,CAAA;AAEtC,0CAA0C;AAC1C,cAAM,YAAY;IAChB,MAAM,EAAE,GAAG,EAAE,CAAK;IAElB,GAAG,UAAW,GAAG,UAEhB;IAED,MAAM,UAAW,GAAG,UAEnB;IAED,UAAU,UAAW,GAAG,aAGvB;CACF;AAED,eAAO,MAAM,OAAO,cAAqB,CAAA;AAEzC,4FAA4F;AAC5F,wBAAgB,eAAe,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,EAAE,OAAO,QAQ9D"}
+{"version":3,"file":"modalManager.d.ts","sourceRoot":"","sources":["../../../src/modal/modalManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAa,MAAM,OAAO,CAAA;AAEtC,0CAA0C;AAC1C,cAAM,YAAY;IAChB,MAAM,EAAE,GAAG,EAAE,CAAK;IAElB,GAAG,UAAW,GAAG,UAEhB;IAED,MAAM,UAAW,GAAG,UAEnB;IAED,UAAU,UAAW,GAAG,aAGvB;CACF;AAED,eAAO,MAAM,OAAO,cAAqB,CAAA;AAEzC,4FAA4F;AAC5F,wBAAgB,eAAe,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,iBAAiB,CAAC,EAAE,OAAO,QAY3F"}

package/dist/esm/modal/modalManager.js

@@ -17,11 +17,17 @@ class ModalManager {
 }
 export const manager = new ModalManager();
 /** Refs of new modals will be automatically added/removed from the state when rendering. */
-export function useModalManager(ref, isOpen) {
+export function useModalManager(ref, isOpen, disableScrollLock) {
     useEffect(() => {
-        isOpen && manager.add(ref);
+        if (isOpen) {
+            manager.add(ref);
+            if (!disableScrollLock)
+                document.body.classList.add('no-scroll');
+        }
         return () => {
             manager.remove(ref);
+            if (!disableScrollLock)
+                document.body.classList.remove('no-scroll');
         };
     }, [isOpen, ref]);
 }

package/dist/esm/modal/modalStyle.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export default _default;
+//# sourceMappingURL=modalStyle.d.ts.map

package/dist/esm/modal/modalStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalStyle.d.ts","sourceRoot":"","sources":["../../../src/modal/modalStyle.ts"],"names":[],"mappings":";AAEA,wBAMC"}

package/dist/esm/modal/modalStyle.js

@@ -0,0 +1,8 @@
+import { createGlobalStyle } from '../core';
+export default createGlobalStyle `
+
+body.no-scroll {
+	overflow: hidden !important;
+	overscroll-behavior: contain;
+}
+`;

package/dist/esm/portal/portal.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
+import { ChildrenProp } from '../core/types';
 import { PortalProps } from './portal.types';
 /** Provided children are portaled to document.body or custom container. */
-export declare const Portal: FC<PortalProps>;
+export declare const Portal: FC<PortalProps & ChildrenProp>;
 export default Portal;
 //# sourceMappingURL=portal.d.ts.map

package/dist/esm/portal/portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../src/portal/portal.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAA;AAGtD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,2EAA2E;AAC3E,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAalC,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../src/portal/portal.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAA;AAGtD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,2EAA2E;AAC3E,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CAajD,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/esm/tabs/tabs.d.ts

@@ -3,7 +3,6 @@ import { TabsProps } from './tabs.types';
 export declare const TabsBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & import("..").ThemingProps<"Tabs"> & {
     activeTabId?: number | undefined;
     children?: React.ReactNode | React.ReactNode[];
-    withPanel?: boolean | undefined;
     onTabClick?: ((id: number) => void) | undefined;
 }, never>;
 /**

package/dist/esm/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAOtD,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDAmEf,CAAA;AAEF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAMtD,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDA0Df,CAAA;AAEF,eAAe,IAAI,CAAA"}

package/dist/esm/tabs/tabs.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { styled, useStyleConfig, vui } from '../core';
 import { P } from '../p';
-import { Panel } from '../panel';
 import { cs } from '../utils';
 import Tab from './tab';
 import TabsNavBar from './tabsNavBar';
@@ -13,7 +12,7 @@ export const TabsBase = styled.divBox `
  * Implements Tabs navigation to switch between views.
  */
 export const Tabs = vui((props, ref) => {
-    const { activeTabId, children, className, size, withPanel, onTabClick, ...rest } = props;
+    const { activeTabId, children, className, size, onTabClick, ...rest } = props;
     const styles = useStyleConfig('Tabs', props);
     const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState('fadeIn', activeTabId);
     useEffect(() => {
@@ -45,8 +44,7 @@ export const Tabs = vui((props, ref) => {
     };
     const activeTab = tabs?.[activeTabIndex];
     return (React.createElement(TabsBase, { className: cs('vui-tabs', className), ref: ref, ...styles.container, ...rest },
-        !!tabs?.length && (React.createElement(TabsNavBar, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: onNavItemClick, size: size, tabs: tabs, withPanel: withPanel })),
-        tabs?.length ? (withPanel ? (React.createElement(Panel, { display: "block", variant: "outlined", w: "100%" },
-            React.createElement(Tab, { onClick: activeTab?.onClick, title: activeTab?.title }, !activeTab?.disabled && activeTab?.children))) : (React.createElement(Tab, { onClick: activeTab?.onClick, title: activeTab?.title }, !activeTab?.disabled && activeTab?.children))) : (React.createElement(P, { p: 2 }, "Please specify Tabs."))));
+        !!tabs?.length && (React.createElement(TabsNavBar, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: onNavItemClick, size: size, tabs: tabs })),
+        tabs?.length ? (React.createElement(Tab, { onClick: activeTab?.onClick, title: activeTab?.title }, !activeTab?.disabled && activeTab?.children)) : (React.createElement(P, { p: 2 }, "Please specify Tabs."))));
 });
 export default Tabs;

package/dist/esm/tabs/tabs.types.d.ts

@@ -6,8 +6,6 @@ export declare type TabsSize = 'md' | 'sm' | 'lg' | 'xl';
 export declare type TabsProps = SystemProps & ThemingProps<'Tabs'> & {
     activeTabId?: number;
     children?: ReactNode | ReactNode[];
-    /** Wraps up the tab content with an outlined panel. */
-    withPanel?: boolean;
     onTabClick?: (id: number) => void;
 };
 export declare type TabProps = SystemProps & {
@@ -23,6 +21,5 @@ export declare type TabNavBarProps = {
     activeNavItem?: number;
     animationDirection?: AnimationDirection;
     size?: TabsSize;
-    withPanel?: boolean;
 };
 //# sourceMappingURL=tabs.types.d.ts.map

package/dist/esm/tabs/tabs.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,oBAAY,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAClC,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,oBAAY,QAAQ,GAAG,WAAW,GAAG;IACnC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,oBAAY,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA"}
+{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,oBAAY,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAClC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,oBAAY,QAAQ,GAAG,WAAW,GAAG;IACnC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,oBAAY,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}

package/dist/esm/tabs/tabsNavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,eAAO,MAAM,UAAU,uDA0CrB,CAAA;AAEF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,eAAO,MAAM,UAAU,uDAwCrB,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/esm/tabs/tabsNavBar.js

@@ -4,9 +4,9 @@ import { vui } from '../core';
 import { List, ListItem } from '../list';
 import { cs } from '../utils';
 export const TabsNavBar = vui((props, ref) => {
-    const { tabs, onNavItemClick, activeNavItem, animationDirection, size, withPanel } = props;
-    return (React.createElement(List, { borderBottom: withPanel ? 'none' : '1px solid grey.40', className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: withPanel ? 0 : 2, ml: withPanel ? 1 : 0, ref: ref, size: size, w: 1 }, tabs?.map?.(tab => (React.createElement(ListItem, { className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, disabled: tab.disabled, display: "inline-flex", key: tab.id, onClick: () => tab?.id !== undefined && onNavItemClick(tab.id), position: "relative" },
+    const { tabs, onNavItemClick, activeNavItem, animationDirection, size } = props;
+    return (React.createElement(List, { borderBottom: "1px solid grey.40", className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, ref: ref, size: size, w: 1 }, tabs?.map?.(tab => (React.createElement(ListItem, { className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, disabled: tab.disabled, display: "inline-flex", key: tab.id, onClick: () => tab?.id !== undefined && onNavItemClick(tab.id), position: "relative" },
         tab.title,
-        !tab.disabled && tab.id === activeNavItem && (React.createElement(Box, { animation: animationDirection, bg: "prussian.80", bottom: withPanel ? 0 : '-1px', h: `${size === 'sm' ? 2 : 4}px`, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
+        !tab.disabled && tab.id === activeNavItem && (React.createElement(Box, { animation: animationDirection, bg: "prussian.80", bottom: "-1px", h: `${size === 'sm' ? 2 : 4}px`, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
 });
 export default TabsNavBar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",
@@ -26,7 +26,6 @@
     "@xstyled/system": "2.5.0",
     "@xstyled/util": "2.2.3",
     "react-focus-lock": "2.8.1",
-    "react-remove-scroll": "2.4.3",
     "styled-components": "5.3.3",
     "tippy.js": "6.3.7"
   },

package/src/core/index.ts

@@ -3,5 +3,6 @@ export * from './links'
 export * from './media'
 export * from './styled'
 export * from './theme'
+export * from './types'
 export * from './vui'
 export * from './vuiProvider'

package/src/core/media.tsx

@@ -5,6 +5,7 @@ import { StyledProps } from 'styled-components'
 import { Screen } from '../theme'
 import { AnyNumber, AnyString } from '../utils'
 import { th, useTheme } from './theme'
+import { ChildrenProp } from './types'
 
 type ScreenWidth = Screen | AnyNumber | AnyString
 
@@ -29,16 +30,16 @@ export const mediaUp = (width: ScreenWidth) => (props: StyledProps<unknown>) =>
   `@media (min-width: ${th.screen(width)(props)})`
 
 /** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
-export const RenderOnDesktop: FC<RenderOnScreenProps> = props => <RenderOnScreen {...props} />
+export const RenderOnDesktop: FC<RenderOnScreenProps & ChildrenProp> = props => <RenderOnScreen {...props} />
 
 /** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
-export const RenderOnMobile: FC<RenderOnScreenProps> = props => <RenderOnScreen isDown {...props} />
+export const RenderOnMobile: FC<RenderOnScreenProps & ChildrenProp> = props => <RenderOnScreen isDown {...props} />
 
 /**
  * Renders its content when viewport width is at or above a provided breakpoint.
  * Optionally, direction can be set to down, or below, the breakpoint.
  */
-export const RenderOnScreen: FC<RenderOnScreenProps> = ({ children, isDown, screen = 'md' }) => {
+export const RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp> = ({ children, isDown, screen = 'md' }) => {
   const mediaFn = isDown ? useDown : useUp
   return mediaFn(screen) ? <>{children}</> : null
 }

package/src/core/types.ts

@@ -0,0 +1,5 @@
+import { ReactChild, ReactChildren, ReactFragment, ReactNode } from 'react'
+
+export interface ChildrenProp {
+  children?: JSX.Element[] | JSX.Element | ReactChildren | ReactChild | ReactFragment | ReactNode | null
+}

package/src/core/vuiProvider/vuiProvider.tsx

@@ -1,8 +1,10 @@
 import React, { FC } from 'react'
 import { ThemeProvider } from 'styled-components'
 
+import ModalStyle from '../../modal/modalStyle'
 import PopoverStyle from '../../popover/popoverStyle'
 import defaultTheme, { VuiTheme } from '../../theme'
+import { ChildrenProp } from '../types'
 import GlobalStyle from './globalStyle'
 import ResetCSS from './resetCSS'
 
@@ -16,22 +18,21 @@ type VuiProviderProps = {
 }
 
 /** Provides theme to all wrapped components and by default includes CSS reset and global styles. */
-const VuiProvider: FC<VuiProviderProps> = ({
+const VuiProvider: FC<VuiProviderProps & ChildrenProp> = ({
   children,
   globalStyle = true,
   resetCSS = true,
   theme = defaultTheme as VuiTheme
-}) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <>
-        {resetCSS && <ResetCSS />}
-        <GlobalStyle globalStyle={globalStyle} />
-        <PopoverStyle />
-        {children}
-      </>
-    </ThemeProvider>
-  )
-}
+}) => (
+  <ThemeProvider theme={theme}>
+    <>
+      {resetCSS && <ResetCSS />}
+      <GlobalStyle globalStyle={globalStyle} />
+      <ModalStyle />
+      <PopoverStyle />
+      {children}
+    </>
+  </ThemeProvider>
+)
 
 export default VuiProvider

package/src/modal/focusLock.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useCallback } from 'react'
 import ReactFocusLock from 'react-focus-lock'
 
+import { ChildrenProp } from '../core/types'
 import { FocusLockProps } from './focusLock.types'
 
 /**
@@ -8,7 +9,7 @@ import { FocusLockProps } from './focusLock.types'
  * only cycle through the children and won't leave the boundary of the FocusLock.
  * This behavior enhances accessibility of the Modal component.
  */
-export const FocusLock: FC<FocusLockProps> = props => {
+export const FocusLock: FC<FocusLockProps & ChildrenProp> = props => {
   const {
     autoFocus,
     children,

package/src/modal/modal.tsx

@@ -1,5 +1,4 @@
 import React, { cloneElement, useRef } from 'react'
-import { RemoveScroll } from 'react-remove-scroll'
 
 import Box from '../box'
 import { vui, VuiComponent } from '../core'
@@ -46,7 +45,7 @@ export const Modal = vui<'div', ModalProps>((props, ref) => {
   const modalRef = useRef<HTMLElement>(null)
   const mouseDownTarget = useRef<EventTarget | null>(null)
 
-  useModalManager(modalRef, isOpen)
+  useModalManager(modalRef, isOpen, disableScrollLock)
 
   if (!isOpen) return null
 
@@ -73,9 +72,7 @@ export const Modal = vui<'div', ModalProps>((props, ref) => {
     }
   }
 
-  const onMouseDown = (e: MouseEvent) => {
-    mouseDownTarget.current = e.target
-  }
+  const onMouseDown = (e: MouseEvent) => (mouseDownTarget.current = e.target)
 
   const childProps = {
     onClick: (e: any) => {
@@ -106,14 +103,7 @@ export const Modal = vui<'div', ModalProps>((props, ref) => {
             isDisabled={disableTrapFocus}
             returnFocus={!disableReturnFocus}
           >
-            <RemoveScroll
-              allowPinchZoom={allowPinchZoom}
-              enabled={!disableScrollLock}
-              forwardProps
-              removeScrollBar={!preserveScrollBar}
-            >
-              <ModalContent {...contentProps}>{cloneElement(children, childProps)}</ModalContent>
-            </RemoveScroll>
+            <ModalContent {...contentProps}>{cloneElement(children, childProps)}</ModalContent>
           </FocusLock>
         </Box>
       </Portal>

package/src/modal/modalManager.ts

@@ -21,12 +21,16 @@ class ModalManager {
 export const manager = new ModalManager()
 
 /** Refs of new modals will be automatically added/removed from the state when rendering. */
-export function useModalManager(ref: Ref<any>, isOpen?: boolean) {
+export function useModalManager(ref: Ref<any>, isOpen?: boolean, disableScrollLock?: boolean) {
   useEffect(() => {
-    isOpen && manager.add(ref)
+    if (isOpen) {
+      manager.add(ref)
+      if (!disableScrollLock) document.body.classList.add('no-scroll')
+    }
 
     return () => {
       manager.remove(ref)
+      if (!disableScrollLock) document.body.classList.remove('no-scroll')
     }
   }, [isOpen, ref])
 }

package/src/modal/modalStyle.ts

@@ -0,0 +1,9 @@
+import { createGlobalStyle } from '../core'
+
+export default createGlobalStyle`
+
+body.no-scroll {
+	overflow: hidden !important;
+	overscroll-behavior: contain;
+}
+`

package/src/portal/portal.tsx

@@ -1,10 +1,11 @@
 import React, { FC, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 
+import { ChildrenProp } from '../core/types'
 import { PortalProps } from './portal.types'
 
 /** Provided children are portaled to document.body or custom container. */
-export const Portal: FC<PortalProps> = props => {
+export const Portal: FC<PortalProps & ChildrenProp> = props => {
   const { children, containerRef, disablePortal } = props
   const [mountNode, setMountNode] = useState<HTMLElement>()
 

package/src/tabs/tabs.tsx

@@ -2,7 +2,6 @@ import React, { ReactElement, useEffect } from 'react'
 
 import { styled, useStyleConfig, vui } from '../core'
 import { P } from '../p'
-import { Panel } from '../panel'
 import { cs } from '../utils'
 import Tab from './tab'
 import { TabProps, TabsProps } from './tabs.types'
@@ -17,7 +16,7 @@ export const TabsBase = styled.divBox<TabsProps>`
  * Implements Tabs navigation to switch between views.
  */
 export const Tabs = vui<'div', TabsProps>((props, ref) => {
-  const { activeTabId, children, className, size, withPanel, onTabClick, ...rest } = props
+  const { activeTabId, children, className, size, onTabClick, ...rest } = props
   const styles = useStyleConfig('Tabs', props)
   const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState(
     'fadeIn',
@@ -63,21 +62,12 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
           onNavItemClick={onNavItemClick}
           size={size}
           tabs={tabs}
-          withPanel={withPanel}
         />
       )}
       {tabs?.length ? (
-        withPanel ? (
-          <Panel display="block" variant="outlined" w="100%">
-            <Tab onClick={activeTab?.onClick} title={activeTab?.title}>
-              {!activeTab?.disabled && activeTab?.children}
-            </Tab>
-          </Panel>
-        ) : (
-          <Tab onClick={activeTab?.onClick} title={activeTab?.title}>
-            {!activeTab?.disabled && activeTab?.children}
-          </Tab>
-        )
+        <Tab onClick={activeTab?.onClick} title={activeTab?.title}>
+          {!activeTab?.disabled && activeTab?.children}
+        </Tab>
       ) : (
         <P p={2}>Please specify Tabs.</P>
       )}

package/src/tabs/tabs.types.ts

@@ -11,8 +11,6 @@ export type TabsProps = SystemProps &
   ThemingProps<'Tabs'> & {
     activeTabId?: number
     children?: ReactNode | ReactNode[]
-    /** Wraps up the tab content with an outlined panel. */
-    withPanel?: boolean
     onTabClick?: (id: number) => void
   }
 
@@ -30,5 +28,4 @@ export type TabNavBarProps = {
   activeNavItem?: number
   animationDirection?: AnimationDirection
   size?: TabsSize
-  withPanel?: boolean
 }

package/src/tabs/tabsNavBar.tsx

@@ -7,16 +7,14 @@ import { cs } from '../utils'
 import { TabNavBarProps } from './tabs.types'
 
 export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
-  const { tabs, onNavItemClick, activeNavItem, animationDirection, size, withPanel } = props
+  const { tabs, onNavItemClick, activeNavItem, animationDirection, size } = props
 
   return (
     <List
-      borderBottom={withPanel ? 'none' : '1px solid grey.40'}
+      borderBottom="1px solid grey.40"
       className={cs('vui-tabsNavBar')}
       display="flex"
       isInteractive
-      mb={withPanel ? 0 : 2}
-      ml={withPanel ? 1 : 0}
       ref={ref}
       size={size}
       w={1}
@@ -35,7 +33,7 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
             <Box
               animation={animationDirection}
               bg="prussian.80"
-              bottom={withPanel ? 0 : '-1px'}
+              bottom="-1px"
               h={`${size === 'sm' ? 2 : 4}px`}
               left={0}
               position="absolute"