@veracity/vui 1.2.2 → 1.3.0-rc.1

package/dist/cjs/theme/components.js

@@ -20,23 +20,24 @@ const theme_14 = __importDefault(require("../input/theme"));
 const theme_15 = __importDefault(require("../link/theme"));
 const theme_16 = __importDefault(require("../list/theme"));
 const theme_17 = __importDefault(require("../menu/theme"));
-const theme_18 = __importDefault(require("../modal/theme"));
-const theme_19 = __importDefault(require("../notification/theme"));
-const theme_20 = __importDefault(require("../p/theme"));
-const theme_21 = __importDefault(require("../pagination/theme"));
-const theme_22 = __importDefault(require("../panel/theme"));
-const theme_23 = __importDefault(require("../popover/theme"));
-const theme_24 = __importDefault(require("../progress/theme"));
-const theme_25 = __importDefault(require("../radio/theme"));
-const theme_26 = __importDefault(require("../select/theme"));
-const theme_27 = __importDefault(require("../skeleton/theme"));
-const theme_28 = __importDefault(require("../spinner/theme"));
-const theme_29 = __importDefault(require("../switch/theme"));
-const theme_30 = __importDefault(require("../t/theme"));
-const theme_31 = __importDefault(require("../table/theme"));
-const theme_32 = __importDefault(require("../tabs/theme"));
-const theme_33 = __importDefault(require("../tag/theme"));
-const theme_34 = __importDefault(require("../textarea/theme"));
+const theme_18 = __importDefault(require("../message/theme"));
+const theme_19 = __importDefault(require("../modal/theme"));
+const theme_20 = __importDefault(require("../notification/theme"));
+const theme_21 = __importDefault(require("../p/theme"));
+const theme_22 = __importDefault(require("../pagination/theme"));
+const theme_23 = __importDefault(require("../panel/theme"));
+const theme_24 = __importDefault(require("../popover/theme"));
+const theme_25 = __importDefault(require("../progress/theme"));
+const theme_26 = __importDefault(require("../radio/theme"));
+const theme_27 = __importDefault(require("../select/theme"));
+const theme_28 = __importDefault(require("../skeleton/theme"));
+const theme_29 = __importDefault(require("../spinner/theme"));
+const theme_30 = __importDefault(require("../switch/theme"));
+const theme_31 = __importDefault(require("../t/theme"));
+const theme_32 = __importDefault(require("../table/theme"));
+const theme_33 = __importDefault(require("../tabs/theme"));
+const theme_34 = __importDefault(require("../tag/theme"));
+const theme_35 = __importDefault(require("../textarea/theme"));
 exports.default = {
     Avatar: theme_1.default,
     Box: theme_2.default,
@@ -55,21 +56,22 @@ exports.default = {
     Link: theme_15.default,
     List: theme_16.default,
     Menu: theme_17.default,
-    Modal: theme_18.default,
-    Notification: theme_19.default,
-    P: theme_20.default,
-    Pagination: theme_21.default,
-    Panel: theme_22.default,
-    Progress: theme_24.default,
-    Popover: theme_23.default,
-    Radio: theme_25.default,
-    Select: theme_26.default,
-    Skeleton: theme_27.default,
-    Spinner: theme_28.default,
-    Switch: theme_29.default,
-    T: theme_30.default,
-    Table: theme_31.default,
-    Tabs: theme_32.default,
-    Tag: theme_33.default,
-    Textarea: theme_34.default
+    Message: theme_18.default,
+    Modal: theme_19.default,
+    Notification: theme_20.default,
+    P: theme_21.default,
+    Pagination: theme_22.default,
+    Panel: theme_23.default,
+    Progress: theme_25.default,
+    Popover: theme_24.default,
+    Radio: theme_26.default,
+    Select: theme_27.default,
+    Skeleton: theme_28.default,
+    Spinner: theme_29.default,
+    Switch: theme_30.default,
+    T: theme_31.default,
+    Table: theme_32.default,
+    Tabs: theme_33.default,
+    Tag: theme_34.default,
+    Textarea: theme_35.default
 };

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

@@ -804,6 +804,40 @@ declare const defaultTheme: {
             };
             variants: {};
         };
+        Message: {
+            baseStyle: {};
+            defaultProps: {
+                variant: string;
+            };
+            sizes: {
+                xs: {
+                    fontSize: string;
+                };
+                sm: {
+                    fontSize: string;
+                };
+                md: {
+                    fontSize: string;
+                };
+                lg: {
+                    fontSize: string;
+                };
+            };
+            variants: {
+                info: {
+                    color: string;
+                };
+                warning: {
+                    color: string;
+                };
+                error: {
+                    color: string;
+                };
+                success: {
+                    color: string;
+                };
+            };
+        };
         Modal: {
             baseStyle: {};
             defaultProps: {};

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

@@ -18,7 +18,7 @@ const tooltipContent_1 = require("./tooltipContent");
  *
  * */
 const Tooltip = (props) => {
-    const { children, fontSize = '16px', linkText, linkProps, maxWidth = '400px', text = 'demo', placement = 'top' } = props;
+    const { children, fontSize = '16px', linkText, linkProps, maxWidth = '400px', text = 'Tooltip', placement = 'top' } = props;
     const isDesktop = (0, core_1.useUp)('md');
     return (react_2.default.createElement(react_1.default, { content: react_2.default.createElement(tooltipContent_1.TooltipContent, { fontSize: fontSize, maxWidth: maxWidth },
             isDesktop && (react_2.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` })),

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

@@ -1,2 +1,5 @@
 export declare const __DEV__: boolean;
+export declare const activeClassName = "vui-active";
+export declare const activeItemShade = 30;
+export declare const dimmedBorderColor = "grey.40";
 //# sourceMappingURL=consts.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/utils/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,SAAwC,CAAA"}
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/utils/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,SAAwC,CAAA;AAE5D,eAAO,MAAM,eAAe,eAAe,CAAA;AAE3C,eAAO,MAAM,eAAe,KAAK,CAAA;AAEjC,eAAO,MAAM,iBAAiB,YAAY,CAAA"}

package/dist/cjs/utils/consts.js

@@ -1,4 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.__DEV__ = void 0;
+exports.dimmedBorderColor = exports.activeItemShade = exports.activeClassName = exports.__DEV__ = void 0;
 exports.__DEV__ = process.env.NODE_ENV !== 'production';
+exports.activeClassName = 'vui-active';
+exports.activeItemShade = 30;
+exports.dimmedBorderColor = 'grey.40';

package/dist/esm/button/button.d.ts

@@ -4,10 +4,11 @@ import { ButtonProps } from './button.types';
 import ButtonIcon from './buttonIcon';
 import ButtonText from './buttonText';
 export declare const ButtonBase: import("styled-components").StyledComponent<"button", 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<"Button"> & {
-    colorScheme?: "prussian" | "green" | "red" | "blue" | "pink" | undefined;
+    colorScheme?: import("./button.types").ButtonColorScheme | undefined;
     icon?: JSX.Element | import("..").IconProp | undefined;
     iconLeft?: JSX.Element | import("..").IconProp | undefined;
     iconRight?: JSX.Element | import("..").IconProp | undefined;
+    isActive?: boolean | undefined;
     isElevated?: boolean | undefined;
     isFullWidth?: boolean | undefined;
     isLoading?: boolean | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;SAoBtB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAmHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;SAoBtB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAoHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}

package/dist/esm/button/button.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { useButtonGroupContext } from '../buttonGroup/context';
 import { styled, useStyleConfig, vui } from '../core';
-import { cs, filterUndefined, isReactText, isString } from '../utils';
+import { activeClassName, cs, filterUndefined, isReactText, isString } from '../utils';
 import ButtonIcon from './buttonIcon';
 import ButtonText from './buttonText';
 import { buttonStateMapping } from './consts';
@@ -48,7 +48,7 @@ export const ButtonBase = styled.buttonBox `
 export const Button = vui((props, ref) => {
     const buttonGroupProps = useButtonGroupContext();
     const mergedProps = { ...buttonGroupProps, ...props };
-    const { borderWidth: borderWidthProp, children, className, colorScheme: colorSchemeProp, disabled, icon, iconLeft, iconRight, isElevated, isFullWidth, isLoading, // eslint-disable-line
+    const { borderWidth: borderWidthProp, children, className, colorScheme: colorSchemeProp, disabled, icon, iconLeft, iconRight, isActive, isElevated, isFullWidth, isLoading, // eslint-disable-line
     isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, variant, ...rest } = mergedProps;
     const hasState = Boolean(state) && state !== 'idle';
     const states = { ...buttonStateMapping, ...stateMapping };
@@ -89,7 +89,7 @@ export const Button = vui((props, ref) => {
         w: isFullWidth ? '100%' : undefined
     });
     return (React.createElement(ButtonProvider, { value: context },
-        React.createElement(ButtonBase, { borderWidth: border, className: cs('vui-button', className), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: pr, ref: ref, type: "button", variant: variant, ...buttonStyles, ...disabledProps, ...aliasedProps, ...rest },
+        React.createElement(ButtonBase, { borderWidth: border, className: cs('vui-button', className, isActive && activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: pr, ref: ref, type: "button", variant: variant, ...buttonStyles, ...disabledProps, ...aliasedProps, ...rest },
             hasState && (React.createElement(StateWrapper, { onClick: (e) => e.stopPropagation(), ...stateProps },
                 React.createElement(ButtonIcon, { m: "auto", ...stateIconProps }))),
             React.createElement(Content, null,

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

@@ -3,15 +3,18 @@ import { IconProp, IconProps } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 import { AnyString } from '../utils';
+export declare type ButtonColorScheme = 'blue' | 'green' | 'pink' | 'prussian' | 'red';
 export declare type ButtonProps = SystemProps & ThemingProps<'Button'> & {
     /** Available theme colors for this component. @default prussian */
-    colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red';
+    colorScheme?: ButtonColorScheme;
     /** Icon that replaces any other content. */
     icon?: IconProp | JSX.Element;
     /** Socket displaying icon on the left side. */
     iconLeft?: IconProp | JSX.Element;
     /** Socket displaying icon on the right side. */
     iconRight?: IconProp | JSX.Element;
+    /** Adds an active class name for further handling. */
+    isActive?: boolean;
     /** Adds box shadow style. @default false */
     isElevated?: boolean;
     /** Makes the button take full width of the container. @deprecated */

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

@@ -1 +1 @@
-{"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../src/button/button.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,oBAAY,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAA;IAC5D,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kEAAkE;IAClE,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AACH,oBAAY,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE9E,oBAAY,kBAAkB,GAAG,MAAM,CACrC,MAAM,EACN,WAAW,GAAG;IAAE,WAAW,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAE,CAChF,CAAA;AAED,wDAAwD;AACxD,oBAAY,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC,CAAA"}
+{"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../src/button/button.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,oBAAY,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAA;AAE9E,oBAAY,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,mEAAmE;IACnE,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kEAAkE;IAClE,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AACH,oBAAY,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE9E,oBAAY,kBAAkB,GAAG,MAAM,CACrC,MAAM,EACN,WAAW,GAAG;IAAE,WAAW,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAE,CAChF,CAAA;AAED,wDAAwD;AACxD,oBAAY,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC,CAAA"}

package/dist/esm/buttonGroup/buttonGroup.d.ts

@@ -1,5 +1,6 @@
 import { ButtonGroupProps } from './buttonGroup.types';
 export declare const ButtonGroupBase: 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 & {
+    colorScheme?: string | undefined;
     innerBorderColor: string;
 }, never>;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAItD,eAAO,MAAM,eAAe;sBAAqC,MAAM;SA4BtE,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,yDAetB,CAAA;AAEF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"buttonGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAItD,eAAO,MAAM,eAAe;;sBAA2D,MAAM;SAuC5F,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,yDAiBtB,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/dist/esm/buttonGroup/buttonGroup.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { styled, th, vui } from '../core';
-import { cs, filterUndefined } from '../utils';
+import { activeClassName, activeItemShade, cs, filterUndefined } from '../utils';
 import { ButtonGroupProvider } from './context';
 import { getInnerBorderColor } from './helpers';
 export const ButtonGroupBase = styled.divBox `
@@ -31,16 +31,26 @@ export const ButtonGroupBase = styled.divBox `
     border-left-width: 0px;
     border-top-left-radius: 0;
   }
+
+  // Border color
+  > *,
+  *:hover {
+    border-color: ${p => th.color(p.innerBorderColor)};
+  }
+
+  //
+  > .${activeClassName} {
+    background-color: ${p => th.color(`${p.colorScheme}.${activeItemShade}`)};
+  }
 `;
 /**
  * Organizes layout and display of multiple buttons. Controls border visual around and between the buttons.
  * Exposes some props to the children via context.
  */
 export const ButtonGroup = vui((props, ref) => {
-    const { className, colorScheme, disabled, size, variant, ...rest } = props;
-    const innerBorderColor = getInnerBorderColor(props);
+    const { className, colorScheme, disabled, innerBorderColor, size, variant, ...rest } = props;
     const context = useMemo(() => filterUndefined({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
     return (React.createElement(ButtonGroupProvider, { value: context },
-        React.createElement(ButtonGroupBase, { className: cs('vui-buttonGroup', className), ...{ innerBorderColor, ref }, ...rest })));
+        React.createElement(ButtonGroupBase, { className: cs('vui-buttonGroup', className), ...{ colorScheme, innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }, ...rest })));
 });
 export default ButtonGroup;

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

@@ -1,9 +1,12 @@
+import { ButtonColorScheme } from '../button/button.types';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export declare type ButtonGroupProps = SystemProps & ThemingProps<'ButtonGroup'> & {
     /** Available theme colors for this component. */
-    colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red';
+    colorScheme?: ButtonColorScheme;
     /** Makes all wrapped buttons disabled. */
     disabled?: boolean;
+    /** Border color between the buttons. */
+    innerBorderColor?: string;
 };
 //# sourceMappingURL=buttonGroup.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.types.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,WAAW,GACxC,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAA;IAC5D,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA"}
+{"version":3,"file":"buttonGroup.types.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,WAAW,GACxC,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,iDAAiD;IACjD,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA"}

package/dist/esm/buttonGroup/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtD,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,UAQ1D"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtD,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAQnE"}

package/dist/esm/buttonToggleGroup/buttonToggleGroup.d.ts

@@ -0,0 +1,7 @@
+import { ButtonToggleGroupProps } from './buttonToggleGroup.types';
+/**
+ * Organizes layout and display of multiple buttons. Based on ButtonGroup and should be used to toggle options.
+ */
+export declare const ButtonToggleGroup: (props: ButtonToggleGroupProps) => JSX.Element;
+export default ButtonToggleGroup;
+//# sourceMappingURL=buttonToggleGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"buttonToggleGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAA;AAElE;;GAEG;AACH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,gBAY9D,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/esm/buttonToggleGroup/buttonToggleGroup.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ButtonGroup from '../buttonGroup';
+import { cs, dimmedBorderColor } from '../utils';
+/**
+ * Organizes layout and display of multiple buttons. Based on ButtonGroup and should be used to toggle options.
+ */
+export const ButtonToggleGroup = (props) => {
+    const { className, isDimmedBorder } = props;
+    return (React.createElement(ButtonGroup, { className: cs('vui-buttonToggleGroup', className), colorScheme: "blue", innerBorderColor: isDimmedBorder ? dimmedBorderColor : '', variant: "outlined", ...props }));
+};
+export default ButtonToggleGroup;

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ButtonGroupProps } from '../buttonGroup';
+import { ThemingProps } from '../theme';
+export declare type ButtonToggleGroupProps = ButtonGroupProps & ThemingProps<'ButtonToggleGroup'> & {
+    className?: string;
+    /** Sets dimmed borders to the buttons. */
+    isDimmedBorder?: boolean;
+    children: ReactNode;
+};
+//# sourceMappingURL=buttonToggleGroup.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"buttonToggleGroup.types.d.ts","sourceRoot":"","sources":["../../../src/buttonToggleGroup/buttonToggleGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,sBAAsB,GAAG,gBAAgB,GACnD,YAAY,CAAC,mBAAmB,CAAC,GAAG;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA"}

package/dist/esm/buttonToggleGroup/buttonToggleGroup.types.js

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

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

@@ -0,0 +1,4 @@
+export * from './buttonToggleGroup';
+export { default } from './buttonToggleGroup';
+export * from './buttonToggleGroup.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/buttonToggleGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC7C,cAAc,2BAA2B,CAAA"}

package/dist/esm/buttonToggleGroup/index.js

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

package/dist/esm/index.d.ts

@@ -2,6 +2,7 @@ export * from './avatar';
 export * from './box';
 export * from './button';
 export * from './buttonGroup';
+export * from './buttonToggleGroup';
 export * from './card';
 export * from './checkbox';
 export * from './core';
@@ -19,6 +20,7 @@ export * from './link';
 export * from './list';
 export * from './logo';
 export * from './menu';
+export * from './message';
 export * from './modal';
 export * from './notification';
 export * from './p';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}

package/dist/esm/index.js

@@ -2,6 +2,7 @@ export * from './avatar';
 export * from './box';
 export * from './button';
 export * from './buttonGroup';
+export * from './buttonToggleGroup';
 export * from './card';
 export * from './checkbox';
 export * from './core';
@@ -19,6 +20,7 @@ export * from './link';
 export * from './list';
 export * from './logo';
 export * from './menu';
+export * from './message';
 export * from './modal';
 export * from './notification';
 export * from './p';

package/dist/esm/message/consts.d.ts

@@ -0,0 +1,13 @@
+export declare const iconDictionary: {
+    info: string;
+    warning: string;
+    error: string;
+    success: string;
+};
+export declare const spacingDictionary: {
+    md: number;
+    xs: number;
+    sm: number;
+    lg: number;
+};
+//# sourceMappingURL=consts.d.ts.map

package/dist/esm/message/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/message/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;;;CAK1B,CAAA;AAED,eAAO,MAAM,iBAAiB;;;;;CAK7B,CAAA"}

package/dist/esm/message/consts.js

@@ -0,0 +1,12 @@
+export const iconDictionary = {
+    info: 'falInfoCircle',
+    warning: 'falExclamationTriangle',
+    error: 'falExclamationTriangle',
+    success: 'falCheckCircle'
+};
+export const spacingDictionary = {
+    md: 8,
+    xs: 4,
+    sm: 6,
+    lg: 10
+};

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

@@ -0,0 +1,4 @@
+export * from './message';
+export { default } from './message';
+export * from './message.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/message/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,cAAc,iBAAiB,CAAA"}

package/dist/esm/message/index.js

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

package/dist/esm/message/message.d.ts

@@ -0,0 +1,6 @@
+import { MessageProps } from './message.types';
+export declare const MessageBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Displays a simple message text. */
+export declare const Message: import("../core").VuiComponent<"span", MessageProps>;
+export default Message;
+//# sourceMappingURL=message.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/message/message.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,WAAW,+HAEvB,CAAA;AAED,sCAAsC;AACtC,eAAO,MAAM,OAAO,sDAYlB,CAAA;AAEF,eAAe,OAAO,CAAA"}

package/dist/esm/message/message.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Box } from '../box';
+import { styled, useStyleConfig, vui } from '../core';
+import { Icon } from '../icon';
+import { T } from '../t';
+import { cs } from '../utils';
+import { iconDictionary, spacingDictionary } from './consts';
+export const MessageBase = styled.divBox `
+  transition-duration: fast;
+`;
+/** Displays a simple message text. */
+export const Message = vui((props, ref) => {
+    const { children, className, text, size = 'md', variant = 'info', ...rest } = props;
+    const styles = useStyleConfig('Message', props);
+    return (React.createElement(MessageBase, { className: cs('vui-message', className), ref: ref, ...styles, ...rest },
+        React.createElement(Box, null,
+            React.createElement(Icon, { mr: `${spacingDictionary[size]}px`, name: iconDictionary[variant], size: size }),
+            React.createElement(T, { size: size }, children ?? text))));
+});
+export default Message;

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

@@ -0,0 +1,8 @@
+import { ReactText } from 'react';
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export declare type MessageProps = SystemProps & ThemingProps<'Message'> & {
+    /** Displays given text if no children are provided. */
+    text?: ReactText;
+};
+//# sourceMappingURL=message.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"message.types.d.ts","sourceRoot":"","sources":["../../../src/message/message.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,YAAY,GAAG,WAAW,GACpC,YAAY,CAAC,SAAS,CAAC,GAAG;IACxB,uDAAuD;IACvD,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA"}

package/dist/esm/message/message.types.js

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

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

@@ -0,0 +1,36 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {
+        variant: string;
+    };
+    sizes: {
+        xs: {
+            fontSize: string;
+        };
+        sm: {
+            fontSize: string;
+        };
+        md: {
+            fontSize: string;
+        };
+        lg: {
+            fontSize: string;
+        };
+    };
+    variants: {
+        info: {
+            color: string;
+        };
+        warning: {
+            color: string;
+        };
+        error: {
+            color: string;
+        };
+        success: {
+            color: string;
+        };
+    };
+};
+export default _default;
+//# sourceMappingURL=theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/message/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,wBAKC"}