@veracity/vui 1.2.2 → 1.3.0-rc.1

package/dist/cjs/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/cjs/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/cjs/button/button.js

@@ -89,8 +89,8 @@ exports.Button = (0, core_1.vui)((props, ref) => {
     var _a, _b, _c, _d;
     const buttonGroupProps = (0, context_1.useButtonGroupContext)();
     const mergedProps = Object.assign(Object.assign({}, buttonGroupProps), props);
-    const { borderWidth: borderWidthProp, children, className, colorScheme: colorSchemeProp, disabled, icon, iconLeft, iconRight, isElevated, isFullWidth, isLoading, // eslint-disable-line
-    isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, variant } = mergedProps, rest = __rest(mergedProps, ["borderWidth", "children", "className", "colorScheme", "disabled", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "isTruncated", "size", "state", "stateMapping", "text", "variant"]);
+    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 } = mergedProps, rest = __rest(mergedProps, ["borderWidth", "children", "className", "colorScheme", "disabled", "icon", "iconLeft", "iconRight", "isActive", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "isTruncated", "size", "state", "stateMapping", "text", "variant"]);
     const hasState = Boolean(state) && state !== 'idle';
     const states = Object.assign(Object.assign({}, consts_1.buttonStateMapping), stateMapping);
     const _e = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, { iconProps: stateIconProps } = _e, stateProps = __rest(_e, ["iconProps"]);
@@ -130,7 +130,7 @@ exports.Button = (0, core_1.vui)((props, ref) => {
         w: isFullWidth ? '100%' : undefined
     });
     return (react_1.default.createElement(context_2.ButtonProvider, { value: context },
-        react_1.default.createElement(exports.ButtonBase, Object.assign({ borderWidth: border, className: (0, utils_1.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_1.default.createElement(exports.ButtonBase, Object.assign({ borderWidth: border, className: (0, utils_1.cs)('vui-button', className, isActive && utils_1.activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: pr, ref: ref, type: "button", variant: variant }, buttonStyles, disabledProps, aliasedProps, rest),
             hasState && (react_1.default.createElement(StateWrapper, Object.assign({ onClick: (e) => e.stopPropagation() }, stateProps),
                 react_1.default.createElement(buttonIcon_1.default, Object.assign({ m: "auto" }, stateIconProps)))),
             react_1.default.createElement(Content, null,

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/buttonGroup/buttonGroup.js

@@ -68,16 +68,26 @@ exports.ButtonGroupBase = core_1.styled.divBox `
     border-left-width: 0px;
     border-top-left-radius: 0;
   }
+
+  // Border color
+  > *,
+  *:hover {
+    border-color: ${p => core_1.th.color(p.innerBorderColor)};
+  }
+
+  //
+  > .${utils_1.activeClassName} {
+    background-color: ${p => core_1.th.color(`${p.colorScheme}.${utils_1.activeItemShade}`)};
+  }
 `;
 /**
  * Organizes layout and display of multiple buttons. Controls border visual around and between the buttons.
  * Exposes some props to the children via context.
  */
 exports.ButtonGroup = (0, core_1.vui)((props, ref) => {
-    const { className, colorScheme, disabled, size, variant } = props, rest = __rest(props, ["className", "colorScheme", "disabled", "size", "variant"]);
-    const innerBorderColor = (0, helpers_1.getInnerBorderColor)(props);
+    const { className, colorScheme, disabled, innerBorderColor, size, variant } = props, rest = __rest(props, ["className", "colorScheme", "disabled", "innerBorderColor", "size", "variant"]);
     const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
     return (react_1.default.createElement(context_1.ButtonGroupProvider, { value: context },
-        react_1.default.createElement(exports.ButtonGroupBase, Object.assign({ className: (0, utils_1.cs)('vui-buttonGroup', className) }, { innerBorderColor, ref }, rest))));
+        react_1.default.createElement(exports.ButtonGroupBase, Object.assign({ className: (0, utils_1.cs)('vui-buttonGroup', className) }, { colorScheme, innerBorderColor: innerBorderColor ? innerBorderColor : (0, helpers_1.getInnerBorderColor)(props), ref }, rest))));
 });
 exports.default = exports.ButtonGroup;

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/buttonToggleGroup/buttonToggleGroup.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonToggleGroup = void 0;
+const react_1 = __importDefault(require("react"));
+const buttonGroup_1 = __importDefault(require("../buttonGroup"));
+const utils_1 = require("../utils");
+/**
+ * Organizes layout and display of multiple buttons. Based on ButtonGroup and should be used to toggle options.
+ */
+const ButtonToggleGroup = (props) => {
+    const { className, isDimmedBorder } = props;
+    return (react_1.default.createElement(buttonGroup_1.default, Object.assign({ className: (0, utils_1.cs)('vui-buttonToggleGroup', className), colorScheme: "blue", innerBorderColor: isDimmedBorder ? utils_1.dimmedBorderColor : '', variant: "outlined" }, props)));
+};
+exports.ButtonToggleGroup = ButtonToggleGroup;
+exports.default = exports.ButtonToggleGroup;

package/dist/cjs/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/cjs/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/cjs/buttonToggleGroup/buttonToggleGroup.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/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/cjs/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/cjs/buttonToggleGroup/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./buttonToggleGroup"), exports);
+var buttonToggleGroup_1 = require("./buttonToggleGroup");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(buttonToggleGroup_1).default; } });
+__exportStar(require("./buttonToggleGroup.types"), exports);

package/dist/cjs/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/cjs/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/cjs/index.js

@@ -18,6 +18,7 @@ __exportStar(require("./avatar"), exports);
 __exportStar(require("./box"), exports);
 __exportStar(require("./button"), exports);
 __exportStar(require("./buttonGroup"), exports);
+__exportStar(require("./buttonToggleGroup"), exports);
 __exportStar(require("./card"), exports);
 __exportStar(require("./checkbox"), exports);
 __exportStar(require("./core"), exports);
@@ -35,6 +36,7 @@ __exportStar(require("./link"), exports);
 __exportStar(require("./list"), exports);
 __exportStar(require("./logo"), exports);
 __exportStar(require("./menu"), exports);
+__exportStar(require("./message"), exports);
 __exportStar(require("./modal"), exports);
 __exportStar(require("./notification"), exports);
 __exportStar(require("./p"), exports);

package/dist/cjs/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/cjs/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/cjs/message/consts.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spacingDictionary = exports.iconDictionary = void 0;
+exports.iconDictionary = {
+    info: 'falInfoCircle',
+    warning: 'falExclamationTriangle',
+    error: 'falExclamationTriangle',
+    success: 'falCheckCircle'
+};
+exports.spacingDictionary = {
+    md: 8,
+    xs: 4,
+    sm: 6,
+    lg: 10
+};

package/dist/cjs/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/cjs/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/cjs/message/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./message"), exports);
+var message_1 = require("./message");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(message_1).default; } });
+__exportStar(require("./message.types"), exports);

package/dist/cjs/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/cjs/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/cjs/message/message.js

@@ -0,0 +1,37 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Message = exports.MessageBase = void 0;
+const react_1 = __importDefault(require("react"));
+const box_1 = require("../box");
+const core_1 = require("../core");
+const icon_1 = require("../icon");
+const t_1 = require("../t");
+const utils_1 = require("../utils");
+const consts_1 = require("./consts");
+exports.MessageBase = core_1.styled.divBox `
+  transition-duration: fast;
+`;
+/** Displays a simple message text. */
+exports.Message = (0, core_1.vui)((props, ref) => {
+    const { children, className, text, size = 'md', variant = 'info' } = props, rest = __rest(props, ["children", "className", "text", "size", "variant"]);
+    const styles = (0, core_1.useStyleConfig)('Message', props);
+    return (react_1.default.createElement(exports.MessageBase, Object.assign({ className: (0, utils_1.cs)('vui-message', className), ref: ref }, styles, rest),
+        react_1.default.createElement(box_1.Box, null,
+            react_1.default.createElement(icon_1.Icon, { mr: `${consts_1.spacingDictionary[size]}px`, name: consts_1.iconDictionary[variant], size: size }),
+            react_1.default.createElement(t_1.T, { size: size }, children !== null && children !== void 0 ? children : text))));
+});
+exports.default = exports.Message;

package/dist/cjs/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/cjs/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/cjs/message/message.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/cjs/message/theme.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const baseStyle = {};
+const defaultProps = {
+    variant: 'info'
+};
+const sizes = {
+    xs: {
+        fontSize: 'xs'
+    },
+    sm: {
+        fontSize: 'sm'
+    },
+    md: {
+        fontSize: 'md'
+    },
+    lg: {
+        fontSize: 'lg'
+    }
+};
+const variants = {
+    info: {
+        color: 'blue.80'
+    },
+    warning: {
+        color: 'yellow.90'
+    },
+    error: {
+        color: 'red.80'
+    },
+    success: {
+        color: 'green.80'
+    }
+};
+exports.default = {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};

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

@@ -608,6 +608,40 @@ declare const _default: {
         };
         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/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,wBAoCC"}