@veracity/vui 1.1.2 → 1.2.0-beta.0

package/dist/esm/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/esm/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;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/esm/tabs/tabs.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { Children, useEffect } from 'react';
 import { styled, useStyleConfig, vui } from '../core';
 import { P } from '../p';
 import { cs } from '../utils';
@@ -12,23 +12,23 @@ export const TabsBase = styled.divBox `
  * Implements Tabs navigation to switch between views.
  */
 export const Tabs = vui((props, ref) => {
-    const { activeTabId, children, className, size, onTabClick, ...rest } = props;
+    const { activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props;
     const styles = useStyleConfig('Tabs', props);
     const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState('fadeIn', activeTabId);
     useEffect(() => {
         const t = [];
         if (children) {
             ;
-            children.forEach((child, index) => {
-                if (child?.props?.title) {
+            Children.toArray(children).forEach((child, index) => {
+                if (child?.props?.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);
@@ -44,7 +44,7 @@ export const Tabs = vui((props, ref) => {
     };
     const activeTab = tabs?.[activeTabIndex];
     return (React.createElement(TabsBase, { className: cs('vui-tabs', className), ref: ref, ...styles.container, ...rest },
-        !!tabs?.length && (React.createElement(TabsNavBar, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: onNavItemClick, size: size, tabs: tabs })),
+        !!tabs?.length && (React.createElement(TabsNavBar, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: onNavItemClick, showBorder: showBorder, size: size, tabs: tabs })),
         tabs?.length ? (React.createElement(Tab, { onClick: activeTab?.onClick, title: activeTab?.title }, !activeTab?.disabled && activeTab?.children)) : (React.createElement(P, { p: 2 }, "Please specify Tabs."))));
 });
 export default Tabs;

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

@@ -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/esm/tabs/tabs.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,oBAAY,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAClC,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/esm/tabs/tabsNavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,eAAO,MAAM,UAAU,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/esm/tabs/tabsNavBar.js

@@ -1,12 +1,22 @@
 import React from 'react';
 import Box from '../box';
 import { vui } from '../core';
+import { Icon } from '../icon';
 import { List, ListItem } from '../list';
 import { cs } from '../utils';
+const iconSizeMapper = {
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md',
+    xl: 'lg'
+};
 export const TabsNavBar = vui((props, ref) => {
-    const { tabs, onNavItemClick, activeNavItem, animationDirection, size } = props;
-    return (React.createElement(List, { borderBottom: "1px solid grey.40", className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, ref: ref, size: size, w: 1 }, tabs?.map?.(tab => (React.createElement(ListItem, { className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, disabled: tab.disabled, display: "inline-flex", key: tab.id, onClick: () => tab?.id !== undefined && onNavItemClick(tab.id), position: "relative" },
-        tab.title,
+    const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props;
+    const iconSize = iconSizeMapper?.[size] || 'md';
+    return (React.createElement(List, { borderBottom: showBorder ? '1px solid grey.40' : 'none', className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, ref: ref, size: size, w: 1 }, tabs?.map?.(tab => (React.createElement(ListItem, { className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, disabled: tab.disabled, display: "inline-flex", key: tab.id, onClick: () => onNavItemClick?.(tab.id || 0), position: "relative" },
+        React.createElement(Box, { alignItems: "center" },
+            !!tab.icon && React.createElement(Icon, { mr: 1, name: tab.icon, size: iconSize }),
+            tab.title),
         !tab.disabled && tab.id === activeNavItem && (React.createElement(Box, { animation: animationDirection, bg: "prussian.80", bottom: "-1px", h: `${size === 'sm' ? 2 : 4}px`, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
 });
 export default TabsNavBar;

package/dist/esm/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/esm/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/esm/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/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/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/esm/toast/Toast.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Box } from '../box';
 import { VuiProvider } from '../core';
 import { Notification } from '../notification';
 import { zIndices } from '../theme';
-import { addContainer, uid } from '../utils';
+import { addContainer, reactDomRender, uid } from '../utils';
 const wrapperId = 'toastsWrapper';
 const setup = {
     options: {
@@ -13,10 +12,12 @@ const setup = {
     },
     componentList: []
 };
-const render = () => 
-// eslint-disable-next-line react/no-render-return-value
-ReactDOM.render(React.createElement(VuiProvider, null,
-    React.createElement(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: zIndices.toast }, setup.componentList.map(item => (React.createElement("div", { key: item.id }, item.component))))), document.getElementById(wrapperId));
+const render = () => {
+    const wrapper = document.getElementById(wrapperId);
+    const content = (React.createElement(VuiProvider, null,
+        React.createElement(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: zIndices.toast }, setup.componentList.map(item => (React.createElement("div", { key: item.id }, item.component))))));
+    reactDomRender(wrapper, content);
+};
 const hide = (id) => {
     setup.componentList = setup.componentList.filter(i => i.id !== id);
     render();

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,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/esm/tooltip/tooltip.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import Box from '../box';
+import { useUp } from '../core';
+import { Link } from '../link';
 import Popover from '../popover';
-import { animation, color, pointerPlacement, pointerSize } from './tooltip.setup';
+import { color, pointerPlacement, pointerSize } from './tooltip.setup';
 /**
  * A simple text popup hint.
  *
@@ -9,12 +11,16 @@ import { animation, color, pointerPlacement, pointerSize } from './tooltip.setup
  *
  * */
 export 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 = useUp('md');
     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, 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)));
+        React.createElement(Popover.Content, { bg: color, color: "white", fontSize: fontSize, m: 1, maxW: maxWidth, p: 1, pl: 2, pr: 2 },
+            isDesktop && (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,
+            !!linkText && (React.createElement(React.Fragment, null,
+                "\u00A0",
+                React.createElement(Link, { variant: "light", ...linkProps }, linkText))))));
 };
 export default Tooltip;

package/dist/esm/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/esm/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/esm/tooltip/tooltip.setup.js

@@ -1,10 +1,4 @@
-export const animation = {
-    top: 'fadeDown',
-    right: 'fadeLeft',
-    bottom: 'fadeUp',
-    left: 'fadeRight'
-};
-export const pointerSize = 8;
+export const pointerSize = 12;
 export const color = 'prussian.80';
 export const pointerPlacement = {
     top: {
@@ -25,13 +19,13 @@ export const pointerPlacement = {
         top: `50%`,
         bottom: 'auto',
         left: 'auto',
-        right: '0',
+        right: '-4px',
         translate: '-50%, -50%'
     },
     right: {
         top: `50%`,
         bottom: 'auto',
-        left: `${pointerSize / 2}px`,
+        left: '2px',
         right: 'auto',
         translate: '0, -50%'
     }

package/dist/esm/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/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,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/esm/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/esm/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/esm/utils/dom.js

@@ -5,22 +5,24 @@ export const addElement = (id) => {
 };
 export const removeElement = (id) => {
     const element = document.getElementById(id);
-    if (element)
-        element.remove();
+    element?.remove?.();
+};
+export const addBodyClass = (className) => document.body.classList.add(className);
+export const removeBodyClass = (className) => document.body.classList.remove(className);
+export const removeElements = (className) => {
+    const elements = document.getElementsByClassName(className);
+    for (let i = 0, len = elements.length; i < len; i++)
+        elements[i]?.remove?.();
 };
 export const addElementClass = (id, className) => {
     const element = document.getElementById(id);
-    if (element)
-        element.classList.add(className);
+    element?.classList?.add?.(className);
 };
 export const removeElementClass = (id, className) => {
     const element = document.getElementById(id);
-    if (element)
-        element.classList.remove(className);
-};
-export const appendToBody = (rootElem) => {
-    document.body.appendChild(rootElem);
+    element?.classList?.remove?.(className);
 };
+export const appendToBody = (rootElem) => document.body.appendChild(rootElem);
 export const addContainer = (id) => {
     const toastContainer = document.getElementById(id);
     if (!toastContainer)

package/dist/esm/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/esm/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"}

package/dist/esm/utils/react.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 import { isArray, isFunction } from './assertion';
 import { runIfFn } from './function';
 /**
@@ -110,3 +111,18 @@ export function useIsMounted() {
     }, []);
     return useCallback(() => isMounted.current, []);
 }
+/** A resolver to render a DOM node depending on React major version. */
+export function reactDomRender(wrapper, content) {
+    if (!wrapper)
+        return;
+    if (ReactDOM?.createRoot) {
+        // Rendering for React 18
+        const root = ReactDOM?.createRoot?.(wrapper);
+        root?.render?.(content);
+    }
+    else {
+        // Rendering for legacy React 17
+        ;
+        ReactDOM?.render?.(content, wrapper);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.1.2",
+  "version": "1.2.0-beta.0",
   "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/button/button.tsx

@@ -143,7 +143,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
         {...rest}
       >
         {hasState && (
-          <StateWrapper onClick={e => e.stopPropagation()} {...stateProps}>
+          <StateWrapper onClick={(e: { stopPropagation: () => void }) => e.stopPropagation()} {...stateProps}>
             <ButtonIcon m="auto" {...stateIconProps} />
           </StateWrapper>
         )}

package/src/button/theme.ts

@@ -36,31 +36,6 @@ function variantSolid(props: Dict) {
   return { container }
 }
 
-function variantSubtle(props: Dict) {
-  const { colorScheme: c } = props
-
-  const container = {
-    hoverBg: `${c}.30`,
-    hoverBorderColor: `${c}.30`,
-    activeBg: `${c}.40`,
-    bg: `${c}.20`,
-    borderColor: `${c}.20`,
-    borderWidth: 1,
-    color: `${c}.90`
-  }
-
-  // Special cases
-  if (c === 'prussian') {
-    container.activeBg = 'blue.40'
-    container.hoverBg = 'blue.30'
-    container.hoverBorderColor = 'blue.30'
-    container.bg = 'blue.20'
-    container.borderColor = 'blue.20'
-  }
-
-  return { container }
-}
-
 function variantText(props: Dict) {
   const { colorScheme: c } = props
 
@@ -149,7 +124,6 @@ const sizes = {
 const variants = {
   outlined: variantOutlined,
   solid: variantSolid,
-  subtle: variantSubtle,
   text: variantText
 }
 

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 { ReactNode } from 'react'
+
+export interface ChildrenProp {
+  children?: ReactNode
+}