@veracity/vui 0.0.2 → 0.0.4

package/alert/alert.d.ts

@@ -0,0 +1,15 @@
+import { AlertProps } from './alert.types';
+import AlertButton from './alertButton';
+import AlertIcon from './alertIcon';
+import AlertMessage from './alertMessage';
+import AlertText from './alertText';
+import AlertTitle from './alertTitle';
+import { VuiComponent } from '../core';
+export declare const Alert: VuiComponent<"div", AlertProps> & {
+    Button: typeof AlertButton;
+    Icon: typeof AlertIcon;
+    Message: typeof AlertMessage;
+    Text: typeof AlertText;
+    Title: typeof AlertTitle;
+};
+export default Alert;

package/alert/alert.js

@@ -0,0 +1,87 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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.Alert = void 0;
+var react_1 = __importStar(require("react"));
+var alertButton_1 = __importDefault(require("./alertButton"));
+var alertIcon_1 = __importDefault(require("./alertIcon"));
+var alertMessage_1 = __importDefault(require("./alertMessage"));
+var alertText_1 = __importDefault(require("./alertText"));
+var alertTitle_1 = __importDefault(require("./alertTitle"));
+var consts_1 = require("./consts");
+var context_1 = require("./context");
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+exports.Alert = core_1.forwardRef(function (props, ref) {
+    var _a;
+    var action = props.action, children = props.children, className = props.className, _b = props.colorScheme, colorSchemeProp = _b === void 0 ? 'blue' : _b, iconProp = props.icon, isVertical = props.isVertical, onClose = props.onClose, size = props.size, status = props.status, statusMapping = props.statusMapping, text = props.text, title = props.title, variant = props.variant, rest = __rest(props, ["action", "children", "className", "colorScheme", "icon", "isVertical", "onClose", "size", "status", "statusMapping", "text", "title", "variant"]);
+    var statuses = __assign(__assign({}, consts_1.alertStatusMapping), statusMapping);
+    var _c = (_a = (status && statuses[status])) !== null && _a !== void 0 ? _a : {}, _d = _c.colorScheme, colorScheme = _d === void 0 ? colorSchemeProp : _d, _e = _c.icon, icon = _e === void 0 ? iconProp : _e;
+    var styles = core_1.useStyleConfig('Alert', __assign({ colorScheme: colorScheme }, props));
+    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, isVertical: isVertical, size: size, status: status, variant: variant }); }, [
+        colorScheme,
+        isVertical,
+        size,
+        status,
+        variant
+    ]);
+    return (react_1.default.createElement(context_1.AlertProvider, { value: context },
+        react_1.default.createElement(box_1.default, __assign({ borderRadius: "md", className: utils_1.cs('vui-alert', className), px: 1.5, py: 1, ref: ref, w: "fit-content" }, styles.container, rest), children ? (children) : (react_1.default.createElement(react_1.default.Fragment, null,
+            typeof icon === 'string' ? (react_1.default.createElement(alertIcon_1.default, { animation: status === 'loading' ? 'spin' : undefined, icon: icon })) : (icon),
+            react_1.default.createElement(alertMessage_1.default, null,
+                title && react_1.default.createElement(alertTitle_1.default, null, title),
+                text && react_1.default.createElement(alertText_1.default, null, text)),
+            action,
+            onClose && react_1.default.createElement(alertButton_1.default, { icon: "falTimes", onClick: onClose }))))));
+});
+exports.Alert.displayName = 'Alert';
+exports.Alert.Button = alertButton_1.default;
+exports.Alert.Icon = alertIcon_1.default;
+exports.Alert.Message = alertMessage_1.default;
+exports.Alert.Text = alertText_1.default;
+exports.Alert.Title = alertTitle_1.default;
+exports.default = exports.Alert;

package/alert/alert.types.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BoxProps } from '../box';
+import { ThemingProps } from '../theme';
+export interface AlertProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingProps<'Alert'> {
+    action?: React.ReactElement;
+    colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
+    icon?: React.ReactElement | string;
+    isVertical?: boolean;
+    onClose?: () => void;
+    status?: AlertStatus;
+    statusMapping?: AlertStatusMapping;
+    text?: React.ReactElement | string;
+    title?: string;
+}
+export declare type AlertStatus = 'error' | 'info' | 'loading' | 'success' | 'warning';
+export declare type AlertStatusMapping = Record<string, {
+    colorScheme?: AlertProps['colorScheme'];
+    icon: AlertProps['icon'];
+}>;

package/alert/alert.types.js

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

package/alert/alertButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '../button';
+export declare const AlertButton: import("../core").VuiComponent<"button", ButtonProps>;
+export default AlertButton;

package/alert/alertButton.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertButton = void 0;
+var react_1 = __importDefault(require("react"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var button_1 = __importDefault(require("../button"));
+exports.AlertButton = core_1.forwardRef(function (props, ref) {
+    var _a;
+    var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, alertProps), props);
+    var styles = core_1.useStyleConfig('Alert', mergedProps);
+    return (react_1.default.createElement(button_1.default, __assign({ className: "vui-alertButton", colorScheme: mergedProps.colorScheme, ml: 0.5, mr: -0.5, ref: ref, size: "sm" }, styles.button, props)));
+});
+exports.AlertButton.displayName = 'AlertButton';
+exports.default = exports.AlertButton;

package/alert/alertIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from '../icon';
+export declare const AlertIcon: import("../core").VuiComponent<"svg", IconProps>;
+export default AlertIcon;

package/alert/alertIcon.js

@@ -0,0 +1,33 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var consts_1 = require("./consts");
+var context_1 = require("./context");
+var core_1 = require("../core");
+var icon_1 = __importDefault(require("../icon"));
+exports.AlertIcon = core_1.forwardRef(function (props, ref) {
+    var _a, _b;
+    var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, alertProps), props);
+    var styles = core_1.useStyleConfig('Alert', mergedProps);
+    var status = mergedProps.status;
+    var icon = ((_b = (status && consts_1.alertStatusMapping[status])) !== null && _b !== void 0 ? _b : {}).icon;
+    return (react_1.default.createElement(icon_1.default, __assign({ animation: status === 'loading' ? 'spin' : undefined, className: "vui-alertIcon", icon: icon, mr: 1, my: 0.5, ref: ref, size: "md" }, styles.icon, props)));
+});
+exports.AlertIcon.displayName = 'AlertIcon';
+exports.default = exports.AlertIcon;

package/alert/alertMessage.d.ts

@@ -0,0 +1,3 @@
+import { BoxProps } from '../box';
+export declare const AlertMessage: import("../core").VuiComponent<"div", BoxProps>;
+export default AlertMessage;

package/alert/alertMessage.js

@@ -0,0 +1,31 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertMessage = void 0;
+var react_1 = __importDefault(require("react"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var box_1 = __importDefault(require("../box"));
+exports.AlertMessage = core_1.forwardRef(function (props, ref) {
+    var _a;
+    var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, alertProps), props);
+    var styles = core_1.useStyleConfig('Alert', mergedProps);
+    var isVertical = mergedProps.isVertical;
+    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-alertMessage", column: isVertical, flex: "1", minW: 0, py: 0.5, ref: ref }, styles.message, props)));
+});
+exports.AlertMessage.displayName = 'AlertMessage';
+exports.default = exports.AlertMessage;

package/alert/alertText.d.ts

@@ -0,0 +1,3 @@
+import { PProps } from '../p';
+export declare const AlertText: import("../core").VuiComponent<"p", PProps>;
+export default AlertText;

package/alert/alertText.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertText = void 0;
+var react_1 = __importDefault(require("react"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var p_1 = __importDefault(require("../p"));
+exports.AlertText = core_1.forwardRef(function (props, ref) {
+    var _a;
+    var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, alertProps), props);
+    var styles = core_1.useStyleConfig('Alert', mergedProps);
+    return react_1.default.createElement(p_1.default, __assign({ className: "vui-alertText", ref: ref }, styles.text, props));
+});
+exports.AlertText.displayName = 'AlertText';
+exports.default = exports.AlertText;

package/alert/alertTitle.d.ts

@@ -0,0 +1,3 @@
+import { HeadingProps } from '../heading';
+export declare const AlertTitle: import("../core").VuiComponent<"h2", HeadingProps>;
+export default AlertTitle;

package/alert/alertTitle.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertTitle = void 0;
+var react_1 = __importDefault(require("react"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var heading_1 = __importDefault(require("../heading"));
+exports.AlertTitle = core_1.forwardRef(function (props, ref) {
+    var _a;
+    var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, alertProps), props);
+    var styles = core_1.useStyleConfig('Alert', mergedProps);
+    return react_1.default.createElement(heading_1.default, __assign({ className: "vui-alertTitle", lineHeight: 1.5, mr: 1, ref: ref, size: "h6" }, styles.title, props));
+});
+exports.AlertTitle.displayName = 'AlertTitle';
+exports.default = exports.AlertTitle;

package/alert/consts.d.ts

@@ -0,0 +1,2 @@
+import { AlertStatusMapping } from './alert.types';
+export declare const alertStatusMapping: AlertStatusMapping;

package/alert/consts.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.alertStatusMapping = void 0;
+exports.alertStatusMapping = {
+    error: {
+        colorScheme: 'red',
+        icon: 'falTimesCircle'
+    },
+    info: {
+        colorScheme: 'blue',
+        icon: 'falInfoCircle'
+    },
+    loading: {
+        colorScheme: 'blue',
+        icon: 'falSpinner'
+    },
+    success: {
+        colorScheme: 'green',
+        icon: 'falCheckCircle'
+    },
+    warning: {
+        colorScheme: 'yellow',
+        icon: 'falExclamationCircle'
+    }
+};

package/alert/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { AlertProps } from './alert.types';
+declare const AlertProvider: import("react").Provider<Partial<AlertProps>>, useAlert: () => Partial<AlertProps>;
+export { AlertProvider, useAlert };

package/alert/context.js

@@ -0,0 +1,23 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAlert = exports.AlertProvider = void 0;
+var core_1 = require("../core");
+var _a = __read(core_1.createContext({ isOptional: true }), 2), AlertProvider = _a[0], useAlert = _a[1];
+exports.AlertProvider = AlertProvider;
+exports.useAlert = useAlert;

package/alert/index.d.ts

@@ -0,0 +1,9 @@
+export * from './alert';
+export * from './alert.types';
+export * from './alertButton';
+export * from './alertIcon';
+export * from './alertMessage';
+export * from './alertText';
+export * from './alertTitle';
+export * from './context';
+export { default } from './alert';

package/alert/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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("./alert"), exports);
+__exportStar(require("./alert.types"), exports);
+__exportStar(require("./alertButton"), exports);
+__exportStar(require("./alertIcon"), exports);
+__exportStar(require("./alertMessage"), exports);
+__exportStar(require("./alertText"), exports);
+__exportStar(require("./alertTitle"), exports);
+__exportStar(require("./context"), exports);
+var alert_1 = require("./alert");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(alert_1).default; } });

package/alert/theme.d.ts

@@ -0,0 +1,46 @@
+import { Dict } from '../utils';
+declare function variantSolid(props: Dict): {
+    container: {
+        bg: string;
+        color: string;
+    };
+    button: {
+        bg: string;
+        hoverBg: string;
+    };
+    icon: {};
+    message: {};
+    text: {};
+    title: {};
+};
+declare function variantSubtle(props: Dict): {
+    container: {
+        bg: string;
+        borderColor: string;
+        borderWidth: number;
+        color: string;
+    };
+    button: {
+        color: string;
+        hoverBg: string;
+        activeBg: string;
+        variant: string;
+    };
+    icon: {};
+    message: {};
+    text: {};
+    title: {};
+};
+declare const _default: {
+    defaultProps: {
+        colorScheme: string;
+        variant: string;
+    };
+    parts: string[];
+    sizes: {};
+    variants: {
+        solid: typeof variantSolid;
+        subtle: typeof variantSubtle;
+    };
+};
+export default _default;

package/alert/theme.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantSolid(props) {
+    var c = props.colorScheme;
+    var container = {
+        bg: c + ".70",
+        color: 'white'
+    };
+    var button = {
+        bg: c + ".70",
+        hoverBg: c + ".80"
+    };
+    var icon = {};
+    var message = {};
+    var text = {};
+    var title = {};
+    return { container: container, button: button, icon: icon, message: message, text: text, title: title };
+}
+function variantSubtle(props) {
+    var c = props.colorScheme;
+    var container = {
+        bg: c + ".20",
+        borderColor: c + ".80",
+        borderWidth: 1,
+        color: c + ".90"
+    };
+    var button = {
+        color: c + ".90",
+        hoverBg: c + ".30",
+        activeBg: c + ".40",
+        variant: 'text'
+    };
+    var icon = {};
+    var message = {};
+    var text = {};
+    var title = {};
+    if (c === 'grey') {
+        button.color = 'prussian.80';
+        container.color = 'prussian.80';
+    }
+    if (c === 'yellow') {
+        button.color = 'yellow.100';
+        container.color = 'yellow.100';
+    }
+    return { container: container, button: button, icon: icon, message: message, text: text, title: title };
+}
+var defaultProps = {
+    colorScheme: 'blue',
+    variant: 'subtle'
+};
+var parts = ['container', 'button', 'icon', 'message', 'text', 'title'];
+var sizes = {};
+var variants = {
+    solid: variantSolid,
+    subtle: variantSubtle
+};
+exports.default = {
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

package/avatar/avatar.d.ts

@@ -1,6 +1,6 @@
 import { AvatarProps, AvatarStyleProps } from './avatar.types';
-export declare const BaseAvatar: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & AvatarStyleProps, never>;
-export declare const Avatar: import("styled-components").StyledComponent<"span", never, AvatarProps, never>;
+export declare const AvatarBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, AvatarStyleProps & {
+    color?: any;
+}, never>;
+export declare const Avatar: import("../core").VuiComponent<"span", AvatarProps>;
 export default Avatar;

package/avatar/avatar.js

@@ -45,7 +45,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = exports.BaseAvatar = void 0;
+exports.Avatar = exports.AvatarBase = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
 var styled_components_2 = __importDefault(require("styled-components"));
@@ -54,9 +54,7 @@ var icon_1 = __importDefault(require("../icon"));
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.interactivity, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 var AvatarImage = styled_components_2.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\theight: 100%;\n\twidth: 100%;\n\n\t", "\n"], ["\n\theight: 100%;\n\twidth: 100%;\n\n\t", "\n"])), styled_components_1.borders);
-exports.BaseAvatar = styled_components_2.default.span.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: 1.333;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: 1.333;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), generator);
+exports.AvatarBase = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(generator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), generator);
 function defaultGetInitials(name) {
     if (name === void 0) { name = ''; }
     var _a = __read(name.split(' '), 2), _b = _a[0], first = _b === void 0 ? '' : _b, _c = _a[1], last = _c === void 0 ? '' : _c;
@@ -73,13 +71,11 @@ exports.Avatar = core_1.forwardRef(function (props, ref) {
             hoverBg: hoverBg,
             activeBg: activeBg,
             focusRing: 3,
-            focusRingColor: 'blue.50',
             tabIndex: 0,
             userSelect: 'none'
         }
         : {};
-    var aliasedProps = utils_1.filterUndefined({});
-    return (react_1.default.createElement(exports.BaseAvatar, __assign({ borderRadius: borderRadius, className: utils_1.cs('vui-avatar', className), fontWeight: "medium", h: h, ref: ref, transitionDuration: "fast", w: h }, styles, interactiveProps, aliasedProps, rest), children ? (children) : src ? (react_1.default.createElement(AvatarImage, { borderRadius: borderRadius, src: src })) : icon ? (react_1.default.createElement(icon_1.default, { icon: icon, size: iconSize })) : initials ? (initials) : null));
+    return (react_1.default.createElement(exports.AvatarBase, __assign({ borderRadius: borderRadius, className: utils_1.cs('vui-avatar', className), fontWeight: "medium", h: h, ref: ref, transitionDuration: "fast", w: h }, styles, interactiveProps, rest), children ? (children) : src ? (react_1.default.createElement(AvatarImage, { borderRadius: borderRadius, src: src })) : icon ? (react_1.default.createElement(icon_1.default, { icon: icon, size: iconSize })) : initials ? (initials) : null));
 });
 exports.Avatar.displayName = 'Avatar';
 exports.default = exports.Avatar;

package/avatar/avatar.types.d.ts

@@ -1,10 +1,9 @@
-import { HTMLAttributes } from 'react';
 import { IconProp } from '../icon';
 import { BackgroundColorProps, BordersProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface AvatarImageStyleProps extends BordersProps {
 }
-export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>, AvatarStyleProps, ThemingProps<'Avatar'> {
+export interface AvatarProps extends AvatarStyleProps, ThemingProps<'Avatar'> {
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
     getInitials?: (name: string) => string;
     icon?: IconProp;

package/avatar/theme.js

@@ -19,18 +19,18 @@ function variantOutlined(props) {
 }
 function variantSolid(props) {
     var c = props.colorScheme;
-    var colors = {
+    var styles = {
         hoverBg: c + ".90",
         activeBg: c + ".100",
         bg: c + ".80",
         color: 'white'
     };
     if (c === 'yellow') {
-        colors.hoverBg = c + ".80";
-        colors.activeBg = c + ".90";
-        colors.bg = c + ".70";
+        styles.hoverBg = c + ".80";
+        styles.activeBg = c + ".90";
+        styles.bg = c + ".70";
     }
-    return colors;
+    return styles;
 }
 function variantSubtle(props) {
     var c = props.colorScheme;

package/box/box.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps, BoxStyleProps } from './box.types';
-export declare const BaseBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & BoxStyleProps, never>;
-export declare const Box: import("styled-components").StyledComponent<"div", never, BoxProps, never>;
+export declare const BoxBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, BoxStyleProps & {
+    color?: any;
+}, never>;
+export declare const Box: import("../core").VuiComponent<"div", BoxProps>;
 export default Box;