@veracity/vui 1.1.2 → 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;AAKjC,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,CAiBrC,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

@@ -11,13 +11,11 @@ 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(modalStyle_1.default, null),
-            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/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/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;AAKjC,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,CAiBrC,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

@@ -6,13 +6,11 @@ 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(ModalStyle, null),
-            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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.1.2",
+  "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",

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

@@ -4,6 +4,7 @@ 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'
 
@@ -17,23 +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} />
-        <ModalStyle />
-        <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/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>()