@veracity/vui 1.1.0 → 1.1.2

package/dist/esm/theme/defaultTheme.d.ts

@@ -898,6 +898,51 @@ declare const defaultTheme: {
                 };
             };
         };
+        Progress: {
+            baseStyle: {};
+            defaultProps: {
+                size: string;
+            };
+            sizes: {
+                sm: {
+                    container: {
+                        minH: string;
+                    };
+                    percentage: {
+                        fontSize: string;
+                        top: string;
+                    };
+                };
+                md: {
+                    container: {
+                        minH: string;
+                    };
+                    percentage: {
+                        fontSize: string;
+                        top: string;
+                    };
+                };
+                lg: {
+                    container: {
+                        minH: string;
+                    };
+                    percentage: {
+                        fontSize: string;
+                        top: string;
+                    };
+                };
+                xl: {
+                    container: {
+                        minH: string;
+                    };
+                    percentage: {
+                        fontSize: string;
+                        top: string;
+                    };
+                };
+            };
+            variants: {};
+        };
         Popover: {
             baseStyle: {};
             defaultProps: {};
@@ -1205,6 +1250,18 @@ declare const defaultTheme: {
                 striped: {};
             };
         };
+        Tabs: {
+            baseStyle: {};
+            defaultProps: {};
+            parts: string[];
+            sizes: {
+                sm: {};
+                md: {};
+                lg: {};
+                xl: {};
+            };
+            variants: {};
+        };
         Tag: {
             baseStyle: {};
             defaultProps: {

package/dist/esm/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C;;;;;KAKK;AACL,eAAO,MAAM,OAAO,UAAW,YAAY,gBAkC1C,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C;;;;;KAKK;AACL,eAAO,MAAM,OAAO,UAAW,YAAY,gBAmC1C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/esm/tooltip/tooltip.js

@@ -9,11 +9,11 @@ import { animation, color, pointerPlacement, pointerSize } from './tooltip.setup
  *
  * */
 export const Tooltip = (props) => {
-    const { children, text = 'demo', placement = 'top', isAnimated = false } = props;
+    const { children, maxWidth = '400px', text = 'demo', placement = 'top', isAnimated = false } = props;
     return (React.createElement(Popover, { placement: placement, trigger: "mouseenter" },
         React.createElement(Popover.Trigger, { as: Box, display: "inline-block" },
             React.createElement(Box, { display: "inline-block" }, children)),
-        React.createElement(Popover.Content, { animation: isAnimated ? animation[placement] : undefined, bg: color, color: "white", m: 1, p: 1, pl: 2, pr: 2 },
+        React.createElement(Popover.Content, { animation: isAnimated ? animation[placement] : undefined, bg: color, color: "white", m: 1, maxW: maxWidth, p: 1, pl: 2, pr: 2 },
             !isAnimated && (React.createElement(Box, { bg: color, bottom: pointerPlacement[placement].bottom, h: `${pointerSize}px`, left: pointerPlacement[placement].left, position: "absolute", right: pointerPlacement[placement].right, top: pointerPlacement[placement].top, transform: `translate(${pointerPlacement[placement].translate}) rotate(45deg)`, w: `${pointerSize}px` })),
             text)));
 };

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

@@ -6,6 +6,8 @@ export declare type TooltipProps = {
     placement?: 'top' | 'left' | 'bottom' | 'right';
     /** Displays the tooltip with animation, without the arrow pointer. */
     isAnimated?: boolean;
+    /** Sets maximum width to the tooltip body. */
+    maxWidth?: string;
     children?: ReactNode;
 };
 //# sourceMappingURL=tooltip.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.types.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,oBAAY,YAAY,GAAG;IACzB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC/C,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA"}
+{"version":3,"file":"tooltip.types.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,oBAAY,YAAY,GAAG;IACzB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC/C,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@veracity/vui",
-  "version": "1.1.0",
-  "description": "Veracity UI React components library based on Styled Components and @xstyled",
+  "version": "1.1.2",
+  "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",
   "sideEffects": false,
@@ -11,7 +11,9 @@
     "Veracity",
     "UI",
     "React",
-    "Components"
+    "Components",
+    "VUI",
+    "ui.veracity.com"
   ],
   "repository": {
     "type": "git",
@@ -24,12 +26,11 @@
     "@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"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   }
-}
+}

package/src/core/vuiProvider/vuiProvider.tsx

@@ -1,6 +1,7 @@
 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 GlobalStyle from './globalStyle'
@@ -24,12 +25,13 @@ const VuiProvider: FC<VuiProviderProps> = ({
 }) => {
   return (
     <ThemeProvider theme={theme}>
-      {resetCSS && <ResetCSS />}
-      <GlobalStyle globalStyle={globalStyle} />
-
-      <PopoverStyle />
-
-      {children}
+      <>
+        {resetCSS && <ResetCSS />}
+        <GlobalStyle globalStyle={globalStyle} />
+        <ModalStyle />
+        <PopoverStyle />
+        {children}
+      </>
     </ThemeProvider>
   )
 }

package/src/icons/baseIcons/fal/falFileSignature.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 32, [], '', ['M31.1111 9.4375L29.7778 8.125C28.6111 6.97656 26.8333 6.97656 25.6667 8.125L16.8333 16.7656C15.1667 18.4062 14.2222 20.7031 14.2222 23C14 23 13.7778 22.8906 13.6667 22.6719C13 21.3594 11.1111 21.0312 10 21.9062L9.22222 19.6094C9.05556 19.0625 8.55556 18.7344 8 18.7344C7.38889 18.7344 6.88889 19.0625 6.72222 19.6094L5.72222 22.6172C5.61111 22.8359 5.38889 23 5.11111 23H4.44444C3.94444 23 3.55556 23.4375 3.55556 23.875C3.55556 24.3672 3.94444 24.75 4.44444 24.75H5.11111C6.16667 24.75 7.05556 24.1484 7.38889 23.1641L8 21.4141L8.88889 24.1484C9.16667 24.9141 10.2222 24.9688 10.5556 24.3125L11 23.4375C11.2222 23 11.8333 23 12.1111 23.4922C12.5 24.2578 13.2778 24.75 14.2222 24.75H16C19.6667 24.75 22.2222 22.2344 22.3333 22.1797L31.1111 13.4844C31.6667 12.9375 32 12.2266 32 11.4609C32 10.6953 31.6667 9.98438 31.1111 9.4375ZM21.0556 20.9219C19.7222 22.2891 17.8889 23 16 23C16 21.1406 16.7222 19.3359 18.0556 18.0234L24.7222 11.4609L27.6667 14.3594L21.0556 20.9219ZM29.8889 12.2266L28.7222 13.375L25.7778 10.4766L26.9444 9.32812C27.3889 8.94531 28.0556 8.94531 28.5 9.32812L29.8889 10.6953C30.2778 11.1328 30.2778 11.7891 29.8889 12.2266ZM20.2222 26.5C19.8333 26.5 19.5 26.7188 19.3889 27.1016C19.1111 27.7578 18.5 28.25 17.6667 28.25H3.44444C2.5 28.25 1.72222 27.4844 1.72222 26.5V5.5C1.72222 4.57031 2.5 3.75 3.44444 3.75H10.5556V9.875C10.5556 11.3516 11.7222 12.5 13.2222 12.5H16.7778C17.2778 12.5 17.6667 12.1172 17.6667 11.6797V11.625C17.6667 11.1328 17.2778 10.75 16.8333 10.75H13.2778C12.7778 10.75 12.3889 10.3672 12.3889 9.875V3.91406C12.6111 3.96875 12.8333 4.07812 13.0556 4.29688L18.0556 9.21875C18.3889 9.54688 18.9444 9.54688 19.2778 9.21875C19.6111 8.83594 19.6111 8.34375 19.2778 7.96094L14.2778 3.03906C13.6111 2.38281 12.7222 2 11.7778 2H3.5C1.55556 2 0 3.58594 0 5.5V26.5C0 28.4688 1.55556 30 3.5 30H17.6667C19.2778 30 20.6111 29.0156 21.0556 27.6484C21.2222 27.1016 20.7778 26.5 20.2222 26.5Z']],
+	name: 'falFileSignature'
+} as IconDefinition

package/src/icons/baseIcons/fal/falPaperclip.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 32, [], '', ['M9.31914 32C7.25189 32 5.18458 31.2131 3.61083 29.6393C0.463078 26.4918 0.463078 21.3703 3.6107 18.2228L19.9901 1.84364C22.4483 -0.614547 26.4481 -0.614547 28.9064 1.84364C31.3646 4.30189 31.3646 8.30158 28.9064 10.7597L14.992 24.6738C13.2235 26.4426 10.3453 26.4428 8.57639 24.6738C6.80764 22.905 6.80764 20.027 8.57639 18.2583L19.2202 7.61464C19.5131 7.32177 19.988 7.32177 20.2808 7.61464L20.6346 7.96845C20.9275 8.26133 20.9275 8.7362 20.6346 9.02914L9.99089 19.6727C9.00208 20.6615 9.00208 22.2704 9.99095 23.2593C10.9798 24.248 12.5887 24.248 13.5775 23.2593L27.4919 9.34514C29.1701 7.66695 29.1701 4.93633 27.4919 3.25802C25.8135 1.57983 23.0829 1.57995 21.4047 3.25802L5.02527 19.6373C2.65764 22.0049 2.65764 25.8572 5.02527 28.2248C7.39302 30.5924 11.2455 30.5925 13.613 28.2249L27.222 14.6162C27.5148 14.3233 27.9897 14.3233 28.2826 14.6162L28.6364 14.97C28.9293 15.2629 28.9293 15.7378 28.6364 16.0307L15.0275 29.6393C13.4538 31.2131 11.3865 32 9.31914 32Z']],
+	name: 'falPaperclip'
+} as IconDefinition

package/src/icons/baseIcons/icons.ts

@@ -83,12 +83,12 @@ export { default as falArrowFromRight } from './fal/falArrowFromRight'
 export { default as falArrowFromTop } from './fal/falArrowFromTop'
 export { default as falArrowLeft } from './fal/falArrowLeft'
 export { default as falArrowRight } from './fal/falArrowRight'
+export { default as falArrows } from './fal/falArrows'
 export { default as falArrowToBottom } from './fal/falArrowToBottom'
 export { default as falArrowToLeft } from './fal/falArrowToLeft'
 export { default as falArrowToRight } from './fal/falArrowToRight'
 export { default as falArrowToTop } from './fal/falArrowToTop'
 export { default as falArrowUp } from './fal/falArrowUp'
-export { default as falArrows } from './fal/falArrows'
 export { default as falAward } from './fal/falAward'
 export { default as falBan } from './fal/falBan'
 export { default as falBars } from './fal/falBars'
@@ -175,6 +175,7 @@ export { default as falFileInvoiceDollar } from './fal/falFileInvoiceDollar'
 export { default as falFilePdf } from './fal/falFilePdf'
 export { default as falFilePlus } from './fal/falFilePlus'
 export { default as falFilePowerpoint } from './fal/falFilePowerpoint'
+export { default as falFileSignature } from './fal/falFileSignature'
 export { default as falFileSpreadsheet } from './fal/falFileSpreadsheet'
 export { default as falFileVideo } from './fal/falFileVideo'
 export { default as falFileWord } from './fal/falFileWord'
@@ -209,6 +210,7 @@ export { default as falMapMarkerAltSlash } from './fal/falMapMarkerAltSlash'
 export { default as falMapMarkerCheck } from './fal/falMapMarkerCheck'
 export { default as falMapMarkerExclamation } from './fal/falMapMarkerExclamation'
 export { default as falMinus } from './fal/falMinus'
+export { default as falPaperclip } from './fal/falPaperclip'
 export { default as falPause } from './fal/falPause'
 export { default as falPauseCircle } from './fal/falPauseCircle'
 export { default as falPen } from './fal/falPen'
@@ -271,10 +273,10 @@ export { default as falUserCog } from './fal/falUserCog'
 export { default as falUserEdit } from './fal/falUserEdit'
 export { default as falUserFriends } from './fal/falUserFriends'
 export { default as falUserPlus } from './fal/falUserPlus'
-export { default as falUserShield } from './fal/falUserShield'
-export { default as falUserTimes } from './fal/falUserTimes'
 export { default as falUsers } from './fal/falUsers'
 export { default as falUsersClass } from './fal/falUsersClass'
+export { default as falUserShield } from './fal/falUserShield'
+export { default as falUserTimes } from './fal/falUserTimes'
 export { default as falWater } from './fal/falWater'
 export { default as falWind } from './fal/falWind'
 export { default as falWindTurbine } from './fal/falWindTurbine'

package/src/icons/baseIcons/types.ts

@@ -84,12 +84,12 @@ export type BaseIcon =
   | 'falArrowFromTop'
   | 'falArrowLeft'
   | 'falArrowRight'
+  | 'falArrows'
   | 'falArrowToBottom'
   | 'falArrowToLeft'
   | 'falArrowToRight'
   | 'falArrowToTop'
   | 'falArrowUp'
-  | 'falArrows'
   | 'falAward'
   | 'falBan'
   | 'falBars'
@@ -176,6 +176,7 @@ export type BaseIcon =
   | 'falFilePdf'
   | 'falFilePlus'
   | 'falFilePowerpoint'
+  | 'falFileSignature'
   | 'falFileSpreadsheet'
   | 'falFileVideo'
   | 'falFileWord'
@@ -210,6 +211,7 @@ export type BaseIcon =
   | 'falMapMarkerCheck'
   | 'falMapMarkerExclamation'
   | 'falMinus'
+  | 'falPaperclip'
   | 'falPause'
   | 'falPauseCircle'
   | 'falPen'
@@ -272,10 +274,10 @@ export type BaseIcon =
   | 'falUserEdit'
   | 'falUserFriends'
   | 'falUserPlus'
-  | 'falUserShield'
-  | 'falUserTimes'
   | 'falUsers'
   | 'falUsersClass'
+  | 'falUserShield'
+  | 'falUserTimes'
   | 'falWater'
   | 'falWind'
   | 'falWindTurbine'

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './pagination'
 export * from './panel'
 export * from './popover'
 export * from './portal'
+export * from './progress'
 export * from './radio'
 export * from './select'
 export * from './skeleton'
@@ -36,6 +37,7 @@ export * from './t'
 export * from './toast'
 export * from './tooltip'
 export * from './table'
+export * from './tabs'
 export * from './tag'
 export * from './textarea'
 export * from './theme'

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/progress/index.ts

@@ -0,0 +1,3 @@
+export * from './progress'
+export { default } from './progress'
+export * from './progress.types'

package/src/progress/progress.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react'
+
+import { Box } from '../box'
+import { styled, useStyleConfig, vui } from '../core'
+import { cs } from '../utils'
+import { ProgressProps } from './progress.types'
+
+export const ProgressBase = styled.divBox`
+  display: flex;
+  width: 100%;
+`
+
+const minPercentageDisplay = 3
+
+/** Indicates a process progress. */
+export const Progress = vui<'div', ProgressProps>((props, ref) => {
+  const { className, size = 'md', value = 0, max = 100, showPercentage, ...rest } = props
+
+  const [width, setWidth] = useState(0)
+
+  const styles = useStyleConfig('Progress', props)
+
+  useEffect(() => {
+    const w = !value ? 0 : Math.ceil((value / max) * 100)
+    setWidth(w > 100 ? 100 : w)
+  }, [value, max])
+
+  return (
+    <ProgressBase
+      className={cs('vui-progress', className)}
+      ref={ref}
+      {...styles.container}
+      {...rest}
+      bg="grey.10"
+      borderRadius="sm"
+      h={1}
+    >
+      <Box
+        bg="prussian.80"
+        borderRadius="sm"
+        position="relative"
+        textAlign="right"
+        transition="width 0.4s ease-in-out;"
+        w={`${width}%`}
+      >
+        {showPercentage && value >= minPercentageDisplay && (
+          <Box {...styles.percentage} position="absolute" right="0">{`${width}%`}</Box>
+        )}
+      </Box>
+    </ProgressBase>
+  )
+})
+
+export default Progress

package/src/progress/progress.types.ts

@@ -0,0 +1,9 @@
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type ProgressProps = SystemProps &
+  ThemingProps<'Progress'> & {
+    value?: number
+    max?: number
+    showPercentage?: boolean
+  }

package/src/progress/theme.ts

@@ -0,0 +1,53 @@
+const baseStyle = {}
+
+const defaultProps = {
+  size: 'md'
+}
+
+const sizes = {
+  sm: {
+    container: {
+      minH: '4px'
+    },
+    percentage: {
+      fontSize: '80%',
+      top: '-16px'
+    }
+  },
+  md: {
+    container: {
+      minH: '8px'
+    },
+    percentage: {
+      fontSize: '100%',
+      top: '-20px'
+    }
+  },
+  lg: {
+    container: {
+      minH: '12px'
+    },
+    percentage: {
+      fontSize: '110%',
+      top: '-22px'
+    }
+  },
+  xl: {
+    container: {
+      minH: '16px'
+    },
+    percentage: {
+      fontSize: '120%',
+      top: '-24px'
+    }
+  }
+}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
+}

package/src/tabs/index.ts

@@ -0,0 +1,4 @@
+export * from './tabs'
+export * from './tab'
+export { default } from './tabs'
+export * from './tabs.types'

package/src/tabs/tab.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { styled, vui } from '../core'
+import { cs } from '../utils'
+import { TabProps } from './tabs.types'
+
+export const TabBase = styled.divBox`
+  width: 100%;
+`
+
+/**
+ * Implements a Tab component
+ */
+export const Tab = vui<'div', TabProps>((props, ref) => {
+  const { children, className } = props
+  return (
+    <TabBase className={cs('vui-tab', className)} ref={ref}>
+      {children}
+    </TabBase>
+  )
+})
+
+export default Tab

package/src/tabs/tabs.tsx

@@ -0,0 +1,78 @@
+import React, { ReactElement, useEffect } from 'react'
+
+import { styled, useStyleConfig, vui } from '../core'
+import { P } from '../p'
+import { cs } from '../utils'
+import Tab from './tab'
+import { TabProps, TabsProps } from './tabs.types'
+import TabsNavBar from './tabsNavBar'
+import { useTabsState } from './useTabsState'
+
+export const TabsBase = styled.divBox<TabsProps>`
+  width: 100%;
+`
+
+/**
+ * Implements Tabs navigation to switch between views.
+ */
+export const Tabs = vui<'div', TabsProps>((props, ref) => {
+  const { activeTabId, children, className, size, onTabClick, ...rest } = props
+  const styles = useStyleConfig('Tabs', props)
+  const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState(
+    'fadeIn',
+    activeTabId
+  )
+
+  useEffect(() => {
+    const t: TabProps[] = []
+    if (children) {
+      ;(children as ReactElement[]).forEach((child: ReactElement<TabProps>, index: number) => {
+        if (child?.props?.title) {
+          t.push({
+            id: index,
+            title: child.props.title,
+            children: child.props.children,
+            disabled: child.props.disabled,
+            onClick: child.props.onClick
+          })
+        }
+      })
+    }
+    setTabs(t)
+    if (activeTabId !== undefined && tabs?.[activeTabId]) {
+      setActiveTabIndex(activeTabId)
+    }
+  }, [children, activeTabId])
+
+  const onNavItemClick = (id: number) => {
+    setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight')
+    setActiveTabIndex(id)
+    onTabClick?.(id)
+    tabs.find(t => t.id === id)?.onClick?.()
+  }
+
+  const activeTab = tabs?.[activeTabIndex]
+
+  return (
+    <TabsBase className={cs('vui-tabs', className)} ref={ref} {...styles.container} {...rest}>
+      {!!tabs?.length && (
+        <TabsNavBar
+          activeNavItem={activeTabIndex}
+          animationDirection={animationDirection}
+          onNavItemClick={onNavItemClick}
+          size={size}
+          tabs={tabs}
+        />
+      )}
+      {tabs?.length ? (
+        <Tab onClick={activeTab?.onClick} title={activeTab?.title}>
+          {!activeTab?.disabled && activeTab?.children}
+        </Tab>
+      ) : (
+        <P p={2}>Please specify Tabs.</P>
+      )}
+    </TabsBase>
+  )
+})
+
+export default Tabs

package/src/tabs/tabs.types.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react'
+
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn'
+
+export type TabsSize = 'md' | 'sm' | 'lg' | 'xl'
+
+export type TabsProps = SystemProps &
+  ThemingProps<'Tabs'> & {
+    activeTabId?: number
+    children?: ReactNode | ReactNode[]
+    onTabClick?: (id: number) => void
+  }
+
+export type TabProps = SystemProps & {
+  id?: number
+  title: ReactNode
+  children?: ReactNode
+  disabled?: boolean
+  onClick?: () => void
+}
+
+export type TabNavBarProps = {
+  tabs: TabProps[]
+  onNavItemClick: (id: number) => void
+  activeNavItem?: number
+  animationDirection?: AnimationDirection
+  size?: TabsSize
+}