@veracity/vui 1.1.2 → 1.2.0-beta.0

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 import { MouseEvent } from '../utils';
@@ -10,7 +10,7 @@ export declare type ModalProps = SystemProps & ThemingProps<'Modal'> & {
     /** Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. */
     allowPinchZoom?: boolean;
     /** A single child content element. */
-    children: React.ReactElement;
+    children: ReactElement;
     /** Props passed to internal ModalContent component. */
     contentProps?: ModalContentProps;
     /** It won't auto-focus the first focuable element within the 'children' once FocusLock mounts. */

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

@@ -1 +1 @@
-{"version":3,"file":"modal.types.d.ts","sourceRoot":"","sources":["../../../src/modal/modal.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEpD,oBAAY,kBAAkB,GAAG,WAAW,CAAA;AAE5C,oBAAY,iBAAiB,GAAG,WAAW,CAAA;AAE3C,oBAAY,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAA;AAE1G,oBAAY,UAAU,GAAG,WAAW,GAClC,YAAY,CAAC,OAAO,CAAC,GAAG;IACtB,gFAAgF;IAChF,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;IAC5B,uDAAuD;IACvD,YAAY,CAAC,EAAE,iBAAiB,CAAA;IAChC,kGAAkG;IAClG,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,4DAA4D;IAC5D,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,oDAAoD;IACpD,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,4EAA4E;IAC5E,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,4FAA4F;IAC5F,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,uEAAuE;IACvE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACjD,wFAAwF;IACxF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACnD,gEAAgE;IAChE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oFAAoF;IACpF,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IACzC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;IAClB,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA"}
+{"version":3,"file":"modal.types.d.ts","sourceRoot":"","sources":["../../../src/modal/modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEpD,oBAAY,kBAAkB,GAAG,WAAW,CAAA;AAE5C,oBAAY,iBAAiB,GAAG,WAAW,CAAA;AAE3C,oBAAY,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAA;AAE1G,oBAAY,UAAU,GAAG,WAAW,GAClC,YAAY,CAAC,OAAO,CAAC,GAAG;IACtB,gFAAgF;IAChF,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,sCAAsC;IACtC,QAAQ,EAAE,YAAY,CAAA;IACtB,uDAAuD;IACvD,YAAY,CAAC,EAAE,iBAAiB,CAAA;IAChC,kGAAkG;IAClG,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,4DAA4D;IAC5D,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,oDAAoD;IACpD,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,4EAA4E;IAC5E,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,4FAA4F;IAC5F,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,uEAAuE;IACvE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACjD,wFAAwF;IACxF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACnD,gEAAgE;IAChE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oFAAoF;IACpF,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IACzC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;IAClB,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA"}

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,EAAE,iBAAiB,CAAC,EAAE,OAAO,QAY3F"}
+{"version":3,"file":"modalManager.d.ts","sourceRoot":"","sources":["../../../src/modal/modalManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAa,MAAM,OAAO,CAAA;AAItC,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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useModalManager = exports.manager = void 0;
 const react_1 = require("react");
+const dom_1 = require("../utils/dom");
 /** State management for nested modals. */
 class ModalManager {
     constructor() {
@@ -25,12 +26,12 @@ function useModalManager(ref, isOpen, disableScrollLock) {
         if (isOpen) {
             exports.manager.add(ref);
             if (!disableScrollLock)
-                document.body.classList.add('no-scroll');
+                (0, dom_1.addBodyClass)('vui-no-scroll');
         }
         return () => {
             exports.manager.remove(ref);
             if (!disableScrollLock)
-                document.body.classList.remove('no-scroll');
+                (0, dom_1.removeBodyClass)('vui-no-scroll');
         };
     }, [isOpen, ref]);
 }

package/dist/cjs/modal/modalStyle.js

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

package/dist/cjs/popover/popoverContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popoverContent.d.ts","sourceRoot":"","sources":["../../../src/popover/popoverContent.tsx"],"names":[],"mappings":"AAQA,0DAA0D;AAC1D,eAAO,MAAM,cAAc,kEAyBzB,CAAA;AAEF,eAAe,cAAc,CAAA"}
+{"version":3,"file":"popoverContent.d.ts","sourceRoot":"","sources":["../../../src/popover/popoverContent.tsx"],"names":[],"mappings":"AAQA,0DAA0D;AAC1D,eAAO,MAAM,cAAc,kEA0BzB,CAAA;AAEF,eAAe,cAAc,CAAA"}

package/dist/cjs/popover/popoverContent.js

@@ -30,7 +30,7 @@ exports.PopoverContent = (0, core_1.vui)((props, ref) => {
     const shouldRenderChildren = isLazy ? isOpen : true;
     return (
     // Wrapping div prevents an error thrown when conditionally unmounting this component
-    react_1.default.createElement("div", { "data-popover-workaround": true },
-        react_1.default.createElement(box_1.default, Object.assign({ bg: "white", borderRadius: "md", boxShadow: "2", className: (0, utils_1.cs)('vui-popoverContent', className), overflowY: "auto", ref: (0, utils_1.mergeRefs)(setPopper, ref) }, styles.content, rest), shouldRenderChildren ? children : null)));
+    react_1.default.createElement(core_1.v.div, { ring: 0 },
+        react_1.default.createElement(box_1.default, Object.assign({ bg: "white", borderRadius: "md", boxShadow: "2", className: (0, utils_1.cs)('vui-popoverContent', className), overflowY: "auto", ref: (0, utils_1.mergeRefs)(setPopper, ref), ring: 0 }, styles.content, rest), shouldRenderChildren ? children : null)));
 });
 exports.default = exports.PopoverContent;

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

@@ -1,6 +1,7 @@
 import { FC } from 'react';
+import { ChildrenProp } from '../core';
 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,SAAS,CAAA;AACtC,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/table/tbody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tbody.d.ts","sourceRoot":"","sources":["../../../src/table/tbody.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS,iIAcrB,CAAA;AAED,0DAA0D;AAC1D,eAAO,MAAM,KAAK,mEAmBhB,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"tbody.d.ts","sourceRoot":"","sources":["../../../src/table/tbody.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS,iIAcrB,CAAA;AAED,0DAA0D;AAC1D,eAAO,MAAM,KAAK,mEAiBhB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/cjs/table/tbody.js

@@ -42,6 +42,6 @@ exports.Tbody = (0, core_1.vui)((props, ref) => {
     const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const { columns, rows } = (_a = (0, context_1.useTableContext)()) !== null && _a !== void 0 ? _a : {};
     const styles = (0, core_1.useStyleConfig)('Table', (0, context_1.useTableContext)());
-    return (react_1.default.createElement(exports.TbodyBase, Object.assign({ className: (0, utils_1.cs)('vui-tbody', className), ref: ref }, styles.tbody, rest), children !== null && children !== void 0 ? children : rows === null || rows === void 0 ? void 0 : rows.map((row, index) => (react_1.default.createElement(tr_1.default, { key: index }, columns === null || columns === void 0 ? void 0 : columns.map(column => (react_1.default.createElement(td_1.default, Object.assign({ key: column.field }, column), row[column.field]))))))));
+    return (react_1.default.createElement(exports.TbodyBase, Object.assign({ className: (0, utils_1.cs)('vui-tbody', className), ref: ref }, styles.tbody, rest), children !== null && children !== void 0 ? children : rows === null || rows === void 0 ? void 0 : rows.map((row, index) => (react_1.default.createElement(tr_1.default, { key: index }, columns === null || columns === void 0 ? void 0 : columns.map(column => (react_1.default.createElement(td_1.default, { key: column.field }, row[column.field]))))))));
 });
 exports.default = exports.Tbody;

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

@@ -1,8 +1,7 @@
-import React from 'react';
 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"> & {
+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"> & import("../core").ChildrenProp & {
     activeTabId?: number | undefined;
-    children?: React.ReactNode | React.ReactNode[];
+    showBorder?: 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;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"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDA2Df,CAAA;AAEF,eAAe,IAAI,CAAA"}

package/dist/cjs/tabs/tabs.js

@@ -52,24 +52,24 @@ 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, onTabClick } = props, rest = __rest(props, ["activeTabId", "children", "className", "size", "onTabClick"]);
+    const { activeTabId, showBorder = true, children, className, size, onTabClick } = props, rest = __rest(props, ["activeTabId", "showBorder", "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)(() => {
         const t = [];
         if (children) {
             ;
-            children.forEach((child, index) => {
+            react_1.Children.toArray(children).forEach((child, index) => {
                 var _a;
-                if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.title) {
+                if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.title)
                     t.push({
                         id: index,
                         title: child.props.title,
+                        icon: child.props.icon,
                         children: child.props.children,
                         disabled: child.props.disabled,
                         onClick: child.props.onClick
                     });
-                }
             });
         }
         setTabs(t);
@@ -86,7 +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 })),
+        !!(tabs === null || tabs === void 0 ? void 0 : tabs.length) && (react_1.default.createElement(tabsNavBar_1.default, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: onNavItemClick, showBorder: showBorder, 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

@@ -1,17 +1,20 @@
 import { ReactNode } from 'react';
+import { ChildrenProp } from '../core';
+import { IconProp } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export declare type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn';
 export declare type TabsSize = 'md' | 'sm' | 'lg' | 'xl';
-export declare type TabsProps = SystemProps & ThemingProps<'Tabs'> & {
+export declare type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | undefined;
+export declare type TabsProps = SystemProps & ThemingProps<'Tabs'> & ChildrenProp & {
     activeTabId?: number;
-    children?: ReactNode | ReactNode[];
+    showBorder?: boolean;
     onTabClick?: (id: number) => void;
 };
-export declare type TabProps = SystemProps & {
+export declare type TabProps = SystemProps & ChildrenProp & {
+    icon?: IconProp;
     id?: number;
     title: ReactNode;
-    children?: ReactNode;
     disabled?: boolean;
     onClick?: () => void;
 };
@@ -20,6 +23,7 @@ export declare type TabNavBarProps = {
     onNavItemClick: (id: number) => void;
     activeNavItem?: number;
     animationDirection?: AnimationDirection;
+    showBorder?: boolean;
     size?: TabsSize;
 };
 //# 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,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"}
+{"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,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,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;AAChD,oBAAY,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAElE,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,oBAAY,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAEH,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,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,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,uDAwCrB,CAAA;AAEF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAkB,cAAc,EAAE,MAAM,cAAc,CAAA;AAS7D,eAAO,MAAM,UAAU,uDA4CrB,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/cjs/tabs/tabsNavBar.js

@@ -7,13 +7,23 @@ exports.TabsNavBar = void 0;
 const react_1 = __importDefault(require("react"));
 const box_1 = __importDefault(require("../box"));
 const core_1 = require("../core");
+const icon_1 = require("../icon");
 const list_1 = require("../list");
 const utils_1 = require("../utils");
+const iconSizeMapper = {
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md',
+    xl: 'lg'
+};
 exports.TabsNavBar = (0, core_1.vui)((props, ref) => {
     var _a;
-    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,
+    const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props;
+    const iconSize = (iconSizeMapper === null || iconSizeMapper === void 0 ? void 0 : iconSizeMapper[size]) || 'md';
+    return (react_1.default.createElement(list_1.List, { borderBottom: showBorder ? '1px solid grey.40' : 'none', 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: () => onNavItemClick === null || onNavItemClick === void 0 ? void 0 : onNavItemClick(tab.id || 0), position: "relative" },
+        react_1.default.createElement(box_1.default, { alignItems: "center" },
+            !!tab.icon && react_1.default.createElement(icon_1.Icon, { mr: 1, name: tab.icon, size: iconSize }),
+            tab.title),
         !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/cjs/theme/components.d.ts

@@ -136,17 +136,6 @@ declare const _default: {
                     color: string;
                 };
             };
-            subtle: (props: import("..").Dict<any>) => {
-                container: {
-                    hoverBg: string;
-                    hoverBorderColor: string;
-                    activeBg: string;
-                    bg: string;
-                    borderColor: string;
-                    borderWidth: number;
-                    color: string;
-                };
-            };
             text: (props: import("..").Dict<any>) => {
                 container: {
                     hoverBg: string;

package/dist/cjs/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,wBAmCC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,wBAmCC"}

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

@@ -332,17 +332,6 @@ declare const defaultTheme: {
                         color: string;
                     };
                 };
-                subtle: (props: import("..").Dict<any>) => {
-                    container: {
-                        hoverBg: string;
-                        hoverBorderColor: string;
-                        activeBg: string;
-                        bg: string;
-                        borderColor: string;
-                        borderWidth: number;
-                        color: string;
-                    };
-                };
                 text: (props: import("..").Dict<any>) => {
                     container: {
                         hoverBg: string;

package/dist/cjs/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/cjs/toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQxC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAkCxD,QAAA,MAAM,IAAI,OAAQ,MAAM,KAAG,IAG1B,CAAA;AAED,QAAA,MAAM,IAAI,0CAA6B,IAqCtC,CAAA;AAED,QAAA,MAAM,QAAQ,SAAU,SAAS,SAAmC,CAAA;AACpE,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAC1E,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAC1E,QAAA,MAAM,SAAS,SAAU,SAAS,SAAoC,CAAA;AACtE,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAE1E,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,IAAI,IAAI,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOxC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAoCxD,QAAA,MAAM,IAAI,OAAQ,MAAM,KAAG,IAG1B,CAAA;AAED,QAAA,MAAM,IAAI,0CAA6B,IAqCtC,CAAA;AAED,QAAA,MAAM,QAAQ,SAAU,SAAS,SAAmC,CAAA;AACpE,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAC1E,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAC1E,QAAA,MAAM,SAAS,SAAU,SAAS,SAAoC,CAAA;AACtE,QAAA,MAAM,WAAW,SAAU,SAAS,SAAsC,CAAA;AAE1E,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,IAAI,IAAI,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,CAAA"}

package/dist/cjs/toast/Toast.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.showLoading = exports.showError = exports.showWarning = exports.showSuccess = exports.showInfo = exports.hideToast = exports.showToast = void 0;
 const react_1 = __importDefault(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
 const box_1 = require("../box");
 const core_1 = require("../core");
 const notification_1 = require("../notification");
@@ -19,10 +18,12 @@ const setup = {
     },
     componentList: []
 };
-const render = () => 
-// eslint-disable-next-line react/no-render-return-value
-react_dom_1.default.render(react_1.default.createElement(core_1.VuiProvider, null,
-    react_1.default.createElement(box_1.Box, { bottom: "1rem", display: "block", maxW: "100%", minW: { md: 600, sm: 600, xs: '100%' }, p: { md: '16px', sm: '4px', xs: '2px' }, position: "fixed", right: { md: '1rem', sm: 0, xs: 0 }, zIndex: theme_1.zIndices.toast }, setup.componentList.map(item => (react_1.default.createElement("div", { key: item.id }, item.component))))), document.getElementById(wrapperId));
+const render = () => {
+    const wrapper = document.getElementById(wrapperId);
+    const content = (react_1.default.createElement(core_1.VuiProvider, null,
+        react_1.default.createElement(box_1.Box, { bottom: "1rem", display: "block", maxW: "100%", minW: { md: 600, sm: 600, xs: '100%' }, p: { md: '16px', sm: '4px', xs: '2px' }, position: "fixed", right: { md: '1rem', sm: 0, xs: 0 }, zIndex: theme_1.zIndices.toast }, setup.componentList.map(item => (react_1.default.createElement("div", { key: item.id }, item.component))))));
+    (0, utils_1.reactDomRender)(wrapper, content);
+};
 const hide = (id) => {
     setup.componentList = setup.componentList.filter(i => i.id !== id);
     render();

package/dist/cjs/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,gBAmC1C,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C;;;;;KAKK;AACL,eAAO,MAAM,OAAO,UAAW,YAAY,gBA0C1C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/cjs/tooltip/tooltip.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 const react_1 = __importDefault(require("react"));
 const box_1 = __importDefault(require("../box"));
+const core_1 = require("../core");
+const link_1 = require("../link");
 const popover_1 = __importDefault(require("../popover"));
 const tooltip_setup_1 = require("./tooltip.setup");
 /**
@@ -15,13 +17,17 @@ const tooltip_setup_1 = require("./tooltip.setup");
  *
  * */
 const Tooltip = (props) => {
-    const { children, maxWidth = '400px', text = 'demo', placement = 'top', isAnimated = false } = props;
+    const { children, fontSize = '16px', linkText, linkProps, maxWidth = '400px', text = 'demo', placement = 'top' } = props;
+    const isDesktop = (0, core_1.useUp)('md');
     return (react_1.default.createElement(popover_1.default, { placement: placement, trigger: "mouseenter" },
         react_1.default.createElement(popover_1.default.Trigger, { as: box_1.default, display: "inline-block" },
             react_1.default.createElement(box_1.default, { display: "inline-block" }, children)),
-        react_1.default.createElement(popover_1.default.Content, { animation: isAnimated ? tooltip_setup_1.animation[placement] : undefined, bg: tooltip_setup_1.color, color: "white", m: 1, maxW: maxWidth, p: 1, pl: 2, pr: 2 },
-            !isAnimated && (react_1.default.createElement(box_1.default, { bg: tooltip_setup_1.color, bottom: tooltip_setup_1.pointerPlacement[placement].bottom, h: `${tooltip_setup_1.pointerSize}px`, left: tooltip_setup_1.pointerPlacement[placement].left, position: "absolute", right: tooltip_setup_1.pointerPlacement[placement].right, top: tooltip_setup_1.pointerPlacement[placement].top, transform: `translate(${tooltip_setup_1.pointerPlacement[placement].translate}) rotate(45deg)`, w: `${tooltip_setup_1.pointerSize}px` })),
-            text)));
+        react_1.default.createElement(popover_1.default.Content, { bg: tooltip_setup_1.color, color: "white", fontSize: fontSize, m: 1, maxW: maxWidth, p: 1, pl: 2, pr: 2 },
+            isDesktop && (react_1.default.createElement(box_1.default, { bg: tooltip_setup_1.color, bottom: tooltip_setup_1.pointerPlacement[placement].bottom, h: `${tooltip_setup_1.pointerSize}px`, left: tooltip_setup_1.pointerPlacement[placement].left, position: "absolute", right: tooltip_setup_1.pointerPlacement[placement].right, top: tooltip_setup_1.pointerPlacement[placement].top, transform: `translate(${tooltip_setup_1.pointerPlacement[placement].translate}) rotate(45deg)`, w: `${tooltip_setup_1.pointerSize}px` })),
+            text,
+            !!linkText && (react_1.default.createElement(react_1.default.Fragment, null,
+                "\u00A0",
+                react_1.default.createElement(link_1.Link, Object.assign({ variant: "light" }, linkProps), linkText))))));
 };
 exports.Tooltip = Tooltip;
 exports.default = exports.Tooltip;

package/dist/cjs/tooltip/tooltip.setup.d.ts

@@ -1,10 +1,4 @@
-export declare const animation: {
-    top: string;
-    right: string;
-    bottom: string;
-    left: string;
-};
-export declare const pointerSize = 8;
+export declare const pointerSize = 12;
 export declare const color = "prussian.80";
 export declare const pointerPlacement: {
     top: {

package/dist/cjs/tooltip/tooltip.setup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.setup.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.setup.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;CAKrB,CAAA;AAED,eAAO,MAAM,WAAW,IAAI,CAAA;AAE5B,eAAO,MAAM,KAAK,gBAAgB,CAAA;AAElC,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B5B,CAAA"}
+{"version":3,"file":"tooltip.setup.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.setup.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,KAAK,CAAA;AAE7B,eAAO,MAAM,KAAK,gBAAgB,CAAA;AAElC,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B5B,CAAA"}

package/dist/cjs/tooltip/tooltip.setup.js

@@ -1,13 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pointerPlacement = exports.color = exports.pointerSize = exports.animation = void 0;
-exports.animation = {
-    top: 'fadeDown',
-    right: 'fadeLeft',
-    bottom: 'fadeUp',
-    left: 'fadeRight'
-};
-exports.pointerSize = 8;
+exports.pointerPlacement = exports.color = exports.pointerSize = void 0;
+exports.pointerSize = 12;
 exports.color = 'prussian.80';
 exports.pointerPlacement = {
     top: {
@@ -28,13 +22,13 @@ exports.pointerPlacement = {
         top: `50%`,
         bottom: 'auto',
         left: 'auto',
-        right: '0',
+        right: '-4px',
         translate: '-50%, -50%'
     },
     right: {
         top: `50%`,
         bottom: 'auto',
-        left: `${exports.pointerSize / 2}px`,
+        left: '2px',
         right: 'auto',
         translate: '0, -50%'
     }

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

@@ -1,13 +1,17 @@
-import { ReactNode } from 'react';
-export declare type TooltipProps = {
+import { ChildrenProp } from '../core';
+import { LinkProps } from '../link';
+export interface TooltipProps extends ChildrenProp {
+    /** Font size. */
+    fontSize?: '16px' | '14px';
     /** Displays given text at the tooltip. */
     text?: string;
     /** Tooltip position. */
     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;
-};
+    /** Link text that will be concatenated to the end of the tooltip text. */
+    linkText?: string;
+    /** The <Link /> props.  */
+    linkProps?: LinkProps;
+}
 //# sourceMappingURL=tooltip.types.d.ts.map

package/dist/cjs/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,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,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,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC,MAAM,WAAW,YAAa,SAAQ,YAAY;IAChD,iBAAiB;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC/C,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB"}

package/dist/cjs/utils/dom.d.ts

@@ -1,7 +1,10 @@
 export declare const addElement: (id: string) => HTMLElement;
 export declare const removeElement: (id: string) => void;
+export declare const addBodyClass: (className: string) => void;
+export declare const removeBodyClass: (className: string) => void;
+export declare const removeElements: (className: string) => void;
 export declare const addElementClass: (id: string, className: string) => void;
 export declare const removeElementClass: (id: string, className: string) => void;
-export declare const appendToBody: (rootElem: HTMLElement) => void;
+export declare const appendToBody: (rootElem: HTMLElement) => HTMLElement;
 export declare const addContainer: (id: string) => void;
 //# sourceMappingURL=dom.d.ts.map

package/dist/cjs/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,OAAQ,MAAM,KAAG,WAIvC,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,MAAM,KAAG,IAG1C,CAAA;AAED,eAAO,MAAM,eAAe,OAAQ,MAAM,aAAa,MAAM,KAAG,IAG/D,CAAA;AAED,eAAO,MAAM,kBAAkB,OAAQ,MAAM,aAAa,MAAM,KAAG,IAGlE,CAAA;AAED,eAAO,MAAM,YAAY,aAAc,WAAW,SAEjD,CAAA;AAED,eAAO,MAAM,YAAY,OAAQ,MAAM,KAAG,IAGzC,CAAA"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,OAAQ,MAAM,KAAG,WAIvC,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,MAAM,KAAG,IAG1C,CAAA;AAED,eAAO,MAAM,YAAY,cAAe,MAAM,KAAG,IAA8C,CAAA;AAE/F,eAAO,MAAM,eAAe,cAAe,MAAM,KAAG,IAAiD,CAAA;AAErG,eAAO,MAAM,cAAc,cAAe,MAAM,KAAG,IAGlD,CAAA;AAED,eAAO,MAAM,eAAe,OAAQ,MAAM,aAAa,MAAM,KAAG,IAG/D,CAAA;AAED,eAAO,MAAM,kBAAkB,OAAQ,MAAM,aAAa,MAAM,KAAG,IAGlE,CAAA;AAED,eAAO,MAAM,YAAY,aAAc,WAAW,gBAAwC,CAAA;AAE1F,eAAO,MAAM,YAAY,OAAQ,MAAM,KAAG,IAGzC,CAAA"}

package/dist/cjs/utils/dom.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addContainer = exports.appendToBody = exports.removeElementClass = exports.addElementClass = exports.removeElement = exports.addElement = void 0;
+exports.addContainer = exports.appendToBody = exports.removeElementClass = exports.addElementClass = exports.removeElements = exports.removeBodyClass = exports.addBodyClass = exports.removeElement = exports.addElement = void 0;
 const addElement = (id) => {
     const element = document.createElement('div');
     element.setAttribute('id', id);
@@ -8,26 +8,35 @@ const addElement = (id) => {
 };
 exports.addElement = addElement;
 const removeElement = (id) => {
+    var _a;
     const element = document.getElementById(id);
-    if (element)
-        element.remove();
+    (_a = element === null || element === void 0 ? void 0 : element.remove) === null || _a === void 0 ? void 0 : _a.call(element);
 };
 exports.removeElement = removeElement;
+const addBodyClass = (className) => document.body.classList.add(className);
+exports.addBodyClass = addBodyClass;
+const removeBodyClass = (className) => document.body.classList.remove(className);
+exports.removeBodyClass = removeBodyClass;
+const removeElements = (className) => {
+    var _a, _b;
+    const elements = document.getElementsByClassName(className);
+    for (let i = 0, len = elements.length; i < len; i++)
+        (_b = (_a = elements[i]) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a);
+};
+exports.removeElements = removeElements;
 const addElementClass = (id, className) => {
+    var _a, _b;
     const element = document.getElementById(id);
-    if (element)
-        element.classList.add(className);
+    (_b = (_a = element === null || element === void 0 ? void 0 : element.classList) === null || _a === void 0 ? void 0 : _a.add) === null || _b === void 0 ? void 0 : _b.call(_a, className);
 };
 exports.addElementClass = addElementClass;
 const removeElementClass = (id, className) => {
+    var _a, _b;
     const element = document.getElementById(id);
-    if (element)
-        element.classList.remove(className);
+    (_b = (_a = element === null || element === void 0 ? void 0 : element.classList) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a, className);
 };
 exports.removeElementClass = removeElementClass;
-const appendToBody = (rootElem) => {
-    document.body.appendChild(rootElem);
-};
+const appendToBody = (rootElem) => document.body.appendChild(rootElem);
 exports.appendToBody = appendToBody;
 const addContainer = (id) => {
     const toastContainer = document.getElementById(id);

package/dist/cjs/utils/react.d.ts

@@ -1,4 +1,4 @@
-import React, { DependencyList, RefObject } from 'react';
+import React, { DependencyList, ReactNode, RefObject } from 'react';
 import { AnyFunction, CreateContextOptions, CreateContextReturn } from './types';
 declare type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>;
 /**
@@ -36,5 +36,7 @@ export declare function useIds(id: string, prefixes: string[]): string[];
  * Provides a function, which can be called to check if component using the hook is mounted or unmounted.
  */
 export declare function useIsMounted(): () => boolean;
+/** A resolver to render a DOM node depending on React major version. */
+export declare function reactDomRender(wrapper: HTMLElement | null, content: ReactNode): void;
 export {};
 //# sourceMappingURL=react.d.ts.map

package/dist/cjs/utils/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/utils/react.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,cAAc,EAEd,SAAS,EAMV,MAAM,OAAO,CAAA;AAId,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAEhF,aAAK,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;AAEhF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,QAcxE;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,WAAW,EAAE,OAAO,GAAE,oBAAyB,oCAoB5E;AAED,2CAA2C;AAC3C,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,UACjD,CAAC,GAAG,IAAI,UAGvB;AAGD,uFAAuF;AACvF,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,GAAE,cAAmB,KAM5F;AAKD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,EACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EACjC,MAAM,GAAE,MAAM,EAAkB,QAoBjC;AAED,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IAClC,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,CAAC,CAAA;CACV,CAAA;AAGD,sFAAsF;AACtF,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC;kBAwBzC,OAAO;WAAS,MAAM,IAAI;GAE7C;AAED,4GAA4G;AAC5G,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAEpD;AAGD;;GAEG;AACH,wBAAgB,YAAY,kBAY3B"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/utils/react.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,cAAc,EAEd,SAAS,EACT,SAAS,EAMV,MAAM,OAAO,CAAA;AAKd,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAEhF,aAAK,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;AAEhF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,QAcxE;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,WAAW,EAAE,OAAO,GAAE,oBAAyB,oCAoB5E;AAED,2CAA2C;AAC3C,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,UACjD,CAAC,GAAG,IAAI,UAGvB;AAGD,uFAAuF;AACvF,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,GAAE,cAAmB,KAM5F;AAKD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,EACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EACjC,MAAM,GAAE,MAAM,EAAkB,QAoBjC;AAED,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IAClC,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,CAAC,CAAA;CACV,CAAA;AAGD,sFAAsF;AACtF,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC;kBAwBzC,OAAO;WAAS,MAAM,IAAI;GAE7C;AAED,4GAA4G;AAC5G,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAEpD;AAGD;;GAEG;AACH,wBAAgB,YAAY,kBAY3B;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,EAAE,OAAO,EAAE,SAAS,QAU7E"}