@veracity/vui 0.0.10 → 0.0.12

package/alert/alert.js

@@ -58,9 +58,9 @@ var core_1 = require("../core");
 var utils_1 = require("../utils");
 exports.Alert = core_1.vui(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 action = props.action, children = props.children, className = props.className, _b = props.colorScheme, colorSchemeProp = _b === void 0 ? 'blue' : _b, icon = props.icon, isVertical = props.isVertical, onClose = props.onClose, size = props.size, _c = props.status, status = _c === void 0 ? '' : _c, 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 _d = ((_a = statuses[status]) !== null && _a !== void 0 ? _a : {}).colorScheme, colorScheme = _d === void 0 ? colorSchemeProp : _d;
     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,
@@ -71,7 +71,7 @@ exports.Alert = core_1.vui(function (props, ref) {
     ]);
     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),
+            status ? react_1.default.createElement(alertIcon_1.default, null) : typeof icon === 'string' ? react_1.default.createElement(alertIcon_1.default, { 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)),

package/alert/alert.types.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BoxProps } from '../box';
+import { IconProps } from '../icon';
 import { ThemingProps } from '../theme';
 export interface AlertProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingProps<'Alert'> {
     action?: React.ReactElement;
@@ -15,5 +16,5 @@ export interface AlertProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingP
 export declare type AlertStatus = 'error' | 'info' | 'loading' | 'success' | 'warning';
 export declare type AlertStatusMapping = Record<string, {
     colorScheme?: AlertProps['colorScheme'];
-    icon: AlertProps['icon'];
+    iconProps: IconProps;
 }>;

package/alert/alertIcon.js

@@ -25,9 +25,9 @@ exports.AlertIcon = core_1.vui(function (props, ref) {
     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)));
+    var _c = mergedProps.status, status = _c === void 0 ? '' : _c;
+    var iconProps = ((_b = consts_1.alertStatusMapping[status]) !== null && _b !== void 0 ? _b : {}).iconProps;
+    return (react_1.default.createElement(icon_1.default, __assign({ className: "vui-alertIcon", mr: 1, my: 0.5, ref: ref, size: "md" }, styles.icon, iconProps, props)));
 });
 exports.AlertIcon.displayName = 'AlertIcon';
 exports.default = exports.AlertIcon;

package/alert/alertTitle.d.ts

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

package/alert/alertTitle.js

@@ -24,7 +24,7 @@ exports.AlertTitle = core_1.vui(function (props, ref) {
     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.H2, __assign({ className: "vui-alertTitle", lineHeight: 1.5, mr: 1, ref: ref }, styles.title, props));
+    return react_1.default.createElement(heading_1.H6, __assign({ className: "vui-alertTitle", lineHeight: 1.5, mr: 1, ref: ref }, styles.title, props));
 });
 exports.AlertTitle.displayName = 'AlertTitle';
 exports.default = exports.AlertTitle;

package/alert/consts.js

@@ -4,22 +4,34 @@ exports.alertStatusMapping = void 0;
 exports.alertStatusMapping = {
     error: {
         colorScheme: 'red',
-        icon: 'falTimesCircle'
+        iconProps: {
+            icon: 'falTimesCircle'
+        }
     },
     info: {
         colorScheme: 'blue',
-        icon: 'falInfoCircle'
+        iconProps: {
+            icon: 'falInfoCircle'
+        }
     },
     loading: {
         colorScheme: 'blue',
-        icon: 'falSpinner'
+        iconProps: {
+            animation: 'vui-spin 0.6s linear infinite',
+            fill: ['blue.40', 'blue.60'],
+            icon: 'fadSpinnerThird'
+        }
     },
     success: {
         colorScheme: 'green',
-        icon: 'falCheckCircle'
+        iconProps: {
+            icon: 'falCheckCircle'
+        }
     },
     warning: {
         colorScheme: 'yellow',
-        icon: 'falExclamationCircle'
+        iconProps: {
+            icon: 'falExclamationCircle'
+        }
     }
 };

package/button/button.js

@@ -32,22 +32,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = exports.ButtonBase = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var consts_1 = require("./consts");
 var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
 var system_1 = require("../system");
 var utils_1 = require("../utils");
 var ContentWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tvisibility: hidden;\n"], ["\n\tvisibility: hidden;\n"])));
-var LoadingWrapper = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n"], ["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n"])));
-exports.ButtonBase = styled_components_1.default.button.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"])), system_1.system);
+var StateWrapper = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\n\t", "\n"], ["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\n\t", "\n"])), system_1.system);
+exports.ButtonBase = styled_components_1.default.button.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toverflow: hidden;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toverflow: hidden;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"])), system_1.system);
 exports.Button = core_1.vui(function (props, ref) {
-    var _a;
+    var _a, _b;
     var buttonGroupProps = context_1.useButtonGroup();
     var mergedProps = __assign(__assign({}, buttonGroupProps), props);
-    var _b = core_1.omitThemingProps(mergedProps), borderWidthProp = _b.borderWidth, children = _b.children, className = _b.className, disabled = _b.disabled, icon = _b.icon, iconLeftProp = _b.iconLeft, iconRightProp = _b.iconRight, isElevated = _b.isElevated, isFullWidth = _b.isFullWidth, isLoading = _b.isLoading, isRound = _b.isRound, isSplit = _b.isSplit, itemLeftProp = _b.itemLeft, itemRightProp = _b.itemRight, text = _b.text, rest = __rest(_b, ["borderWidth", "children", "className", "disabled", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "itemLeft", "itemRight", "text"]);
-    var _c = core_1.useStyleConfig('Button', mergedProps), borderWidth = _c.borderWidth, h = _c.h, _d = _c.iconSize, iconSize = _d === void 0 ? 'md' : _d, minW = _c.minW, _e = _c.spaceX, spaceXBase = _e === void 0 ? 0 : _e, styles = __rest(_c, ["borderWidth", "h", "iconSize", "minW", "spaceX"]);
-    var Content = isLoading ? ContentWrapper : react_1.default.Fragment;
-    var border = (_a = borderWidthProp !== null && borderWidthProp !== void 0 ? borderWidthProp : borderWidth) !== null && _a !== void 0 ? _a : 0;
+    var _c = core_1.omitThemingProps(mergedProps), borderWidthProp = _c.borderWidth, children = _c.children, className = _c.className, disabled = _c.disabled, icon = _c.icon, iconLeftProp = _c.iconLeft, iconRightProp = _c.iconRight, isElevated = _c.isElevated, isFullWidth = _c.isFullWidth, isLoading = _c.isLoading, // eslint-disable-line
+    isRound = _c.isRound, isSplit = _c.isSplit, itemLeftProp = _c.itemLeft, itemRightProp = _c.itemRight, _d = _c.state, state = _d === void 0 ? props.isLoading ? 'loading' : '' : _d, stateMapping = _c.stateMapping, text = _c.text, rest = __rest(_c, ["borderWidth", "children", "className", "disabled", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "itemLeft", "itemRight", "state", "stateMapping", "text"]);
+    var hasState = Boolean(state);
+    var states = __assign(__assign({}, consts_1.buttonStateMapping), stateMapping);
+    var _e = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, iconProps = _e.iconProps, stateProps = __rest(_e, ["iconProps"]);
+    var _f = core_1.useStyleConfig('Button', mergedProps), borderWidth = _f.borderWidth, h = _f.h, _g = _f.iconSize, iconSize = _g === void 0 ? 'md' : _g, minW = _f.minW, _h = _f.spaceX, spaceXBase = _h === void 0 ? 0 : _h, styles = __rest(_f, ["borderWidth", "h", "iconSize", "minW", "spaceX"]);
+    var Content = hasState ? ContentWrapper : react_1.default.Fragment;
+    var border = (_b = borderWidthProp !== null && borderWidthProp !== void 0 ? borderWidthProp : borderWidth) !== null && _b !== void 0 ? _b : 0;
     var spaceX = (spaceXBase - border) / 8;
     var spaceXText = spaceX * 2;
     var iconRightMl = isSplit ? 'auto' : spaceX;
@@ -61,12 +66,12 @@ exports.Button = core_1.vui(function (props, ref) {
     var aliasedProps = utils_1.filterUndefined({
         borderRadius: isRound ? h / 2 : undefined,
         boxShadow: isElevated ? 2 : undefined,
-        pointerEvents: isLoading ? 'none' : undefined,
+        pointerEvents: hasState ? 'none' : undefined,
         w: isFullWidth ? '100%' : undefined
     });
     return (react_1.default.createElement(exports.ButtonBase, __assign({ borderRadius: "md", borderWidth: border, className: utils_1.cs('vui-button', className), disabled: disabled, focusRing: 3, fontWeight: "medium", h: h, minW: minWidth, pl: pl, pr: pr, ref: ref, transitionDuration: "fast", type: "button" }, styles, aliasedProps, rest),
-        isLoading && (react_1.default.createElement(LoadingWrapper, { onClick: function (e) { return e.stopPropagation(); } },
-            react_1.default.createElement(icon_1.default, { animation: "spin", icon: "falSpinner", m: "auto", size: iconSize }))),
+        hasState && (react_1.default.createElement(StateWrapper, __assign({ onClick: function (e) { return e.stopPropagation(); } }, stateProps),
+            react_1.default.createElement(icon_1.default, __assign({ m: "auto", size: iconSize }, iconProps)))),
         react_1.default.createElement(Content, null, icon ? (react_1.default.createElement(icon_1.default, { icon: icon, size: iconSize })) : (react_1.default.createElement(react_1.default.Fragment, null,
             itemLeft, children !== null && children !== void 0 ? children : text,
             itemRight)))));

package/button/button.types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IconProp } from '../icon';
+import { IconProp, IconProps } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface ButtonProps extends SystemProps, ThemingProps<'Button'> {
@@ -14,5 +14,11 @@ export interface ButtonProps extends SystemProps, ThemingProps<'Button'> {
     isSplit?: boolean;
     itemLeft?: React.ReactNode;
     itemRight?: React.ReactNode;
+    state?: ButtonState;
+    stateMapping?: ButtonStateMapping;
     text?: number | string;
 }
+export declare type ButtonState = 'error' | 'loading' | 'success';
+export declare type ButtonStateMapping = Record<string, SystemProps & {
+    iconProps: IconProps;
+}>;

package/button/consts.d.ts

@@ -0,0 +1,2 @@
+import { ButtonStateMapping } from './button.types';
+export declare const buttonStateMapping: ButtonStateMapping;

package/button/consts.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonStateMapping = void 0;
+exports.buttonStateMapping = {
+    error: {
+        bg: 'red.80',
+        iconProps: {
+            animation: 'fadeDown',
+            icon: 'falTimesCircle'
+        }
+    },
+    loading: {
+        iconProps: {
+            animation: 'vui-spin 0.6s linear infinite',
+            fill: ['', 'transparent'],
+            icon: 'fadSpinnerThird'
+        }
+    },
+    success: {
+        bg: 'green.80',
+        iconProps: {
+            animation: 'fadeDown',
+            icon: 'falCheckCircle'
+        }
+    }
+};

package/icons/baseIcons/fad/fadSpinnerThird.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fad/fadSpinnerThird.js

@@ -0,0 +1,7 @@
+"use strict";
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    details: [512, 512, [], '', ['M478.71 364.58zm-22 6.11l-27.83-15.9a15.92 15.92 0 0 1-6.94-19.2A184 184 0 1 1 256 72c5.89 0 11.71.29 17.46.83-.74-.07-1.48-.15-2.23-.21-8.49-.69-15.23-7.31-15.23-15.83v-32a16 16 0 0 1 15.34-16C266.24 8.46 261.18 8 256 8 119 8 8 119 8 256s111 248 248 248c98 0 182.42-56.95 222.71-139.42-4.13 7.86-14.23 10.55-22 6.11z', 'M271.23 72.62c-8.49-.69-15.23-7.31-15.23-15.83V24.73c0-9.11 7.67-16.78 16.77-16.17C401.92 17.18 504 124.67 504 256a246 246 0 0 1-25 108.24c-4 8.17-14.37 11-22.26 6.45l-27.84-15.9c-7.41-4.23-9.83-13.35-6.2-21.07A182.53 182.53 0 0 0 440 256c0-96.49-74.27-175.63-168.77-183.38z']],
+    name: 'fadSpinnerThird'
+};

package/icons/baseIcons/types.d.ts

@@ -1 +1 @@
-export declare type BaseIcon = 'cuiCheckboxIndeterminate' | 'cuiCheckboxSelected' | 'cuiCheckboxUnselected' | 'cuiRadioSelected' | 'cuiRadioUnselected' | 'culCovid' | 'culDeepSearch' | 'culDotsMenu' | 'culGlobePlus' | 'culListDense' | 'culMapMarkerStar' | 'culPlusThin' | 'culScreenshot' | 'culScreenshotAlt' | 'culShortcut' | 'culTimesThin' | 'culTransformer' | 'culUserTransfer' | 'culVessel' | 'culVesselGroup' | 'cusCheckboxSelected' | 'cusDotFull' | 'cusDotFullAlt' | 'cusDotsMenu' | 'cusRadio' | 'cusSquareMinus' | 'cusTransformer' | 'cusVessel' | 'fabApplePay' | 'fabBluetooth' | 'fabBtc' | 'fabCcAmazonPay' | 'fabCcAmex' | 'fabCcApplePay' | 'fabCcDinersClub' | 'fabCcMastercard' | 'fabCcPaypal' | 'fabCcVisa' | 'fabDhl' | 'fabEbay' | 'fabFacebook' | 'fabFedex' | 'fabFirefox' | 'fabGoogle' | 'fabGoogleDrive' | 'fabLinkedinIn' | 'fabMedium' | 'fabOsi' | 'fabSlack' | 'fabTwitter' | 'fabUps' | 'falAddressBook' | 'falAddressCard' | 'falAnalytics' | 'falAngleDoubleDown' | 'falAngleDoubleLeft' | 'falAngleDoubleRight' | 'falAngleDoubleUp' | 'falAngleDown' | 'falAngleLeft' | 'falAngleRight' | 'falAngleUp' | 'falArrowAltDown' | 'falArrowAltLeft' | 'falArrowAltRight' | 'falArrowAltUp' | 'falArrowCircleDown' | 'falArrowCircleLeft' | 'falArrowCircleRight' | 'falArrowCircleUp' | 'falArrowDown' | 'falArrowFromBottom' | 'falArrowFromLeft' | 'falArrowFromRight' | 'falArrowFromTop' | 'falArrowLeft' | 'falArrowRight' | 'falArrowToBottom' | 'falArrowToLeft' | 'falArrowToRight' | 'falArrowToTop' | 'falArrowUp' | 'falArrows' | 'falAward' | 'falBan' | 'falBell' | 'falBookOpen' | 'falBroadcastTower' | 'falBuilding' | 'falBullseye' | 'falCalendar' | 'falCalendarAlt' | 'falCamera' | 'falCaretDown' | 'falCaretLeft' | 'falCaretRight' | 'falCaretUp' | 'falCauldron' | 'falChartArea' | 'falChartBar' | 'falChartLineDown' | 'falChartLine' | 'falChartNetwork' | 'falChartPie' | 'falChartPieAlt' | 'falChartScatter' | 'falCheckCircle' | 'falCheckSquare' | 'falCheck' | 'falChevronCircleDown' | 'falChevronCircleLeft' | 'falChevronCircleRight' | 'falChevronCircleUp' | 'falChevronDoubleDown' | 'falChevronDoubleLeft' | 'falChevronDoubleRight' | 'falChevronDoubleUp' | 'falChevronDown' | 'falChevronLeft' | 'falChevronRight' | 'falChevronUp' | 'falCircle' | 'falCloudShowersHeavy' | 'falCloudSnow' | 'falCloudSunRain' | 'falCloudSun' | 'falCloudUpload' | 'falCloud' | 'falCode' | 'falCog' | 'falCogs' | 'falComment' | 'falCommentAlt' | 'falCompressAlt' | 'falCopy' | 'falCreditCard' | 'falDatabase' | 'falDotCircle' | 'falDownload' | 'falEdit' | 'falEllipsisH' | 'falEllipsisV' | 'falEnvelope' | 'falExchange' | 'falExclamationCircle' | 'falExclamationTriangle' | 'falExpandAlt' | 'falExternalLink' | 'falEye' | 'falEyeSlash' | 'falFile' | 'falFilePdf' | 'falFileAlt' | 'falFileArchive' | 'falFileAudio' | 'falFileCertificate' | 'falFileChartLine' | 'falFileChartPie' | 'falFileCheck' | 'falFileCode' | 'falFileCsv' | 'falFileEdit' | 'falFileExcel' | 'falFileImage' | 'falFilePlus' | 'falFilePowerpoint' | 'falFileSpreadsheet' | 'falFileVideo' | 'falFileWord' | 'falFilter' | 'falFlag' | 'falFolderOpen' | 'falFolderPlus' | 'falFolder' | 'falFolders' | 'falGlassesAlt' | 'falGlobe' | 'falHome' | 'falHourglass' | 'falImage' | 'falInfoCircle' | 'falKey' | 'falLayerPlus' | 'falLink' | 'falList' | 'falLockAlt' | 'falLongArrowDown' | 'falLongArrowLeft' | 'falLongArrowRight' | 'falLongArrowUp' | 'falMapMarked' | 'falMapMarkedAlt' | 'falMapMarkerAlt' | 'falMapMarkerAltSlash' | 'falMapMarkerCheck' | 'falMapMarkerExclamation' | 'falMapMarker' | 'falMap' | 'falMinus' | 'falPause' | 'falPauseCircle' | 'falPen' | 'falPlay' | 'falPlayCircle' | 'falPlug' | 'falPlusSquare' | 'falPlus' | 'falPlusCircle' | 'falPrint' | 'falPuzzlePiece' | 'falReceipt' | 'falRedo' | 'falSave' | 'falSearchPlus' | 'falSearch' | 'falServer' | 'falShareAll' | 'falShare' | 'falShareAlt' | 'falShieldAlt' | 'falShieldCheck' | 'falShip' | 'falShoppingBasket' | 'falSignIn' | 'falSignInAlt' | 'falSignOut' | 'falSignOutAlt' | 'falSlidersV' | 'falSnowBlowing' | 'falSnowflake' | 'falSolarPanel' | 'falSort' | 'falSpinner' | 'falSquare' | 'falStepForward' | 'falStop' | 'falStopCircle' | 'falStopwatch' | 'falSuitcase' | 'falSun' | 'falSync' | 'falTachometer' | 'falTemperatureHigh' | 'falThLarge' | 'falThList' | 'falTh' | 'falTimesCircle' | 'falTimes' | 'falToggleOff' | 'falToggleOn' | 'falTrashAlt' | 'falUnlockAlt' | 'falUserChart' | 'falUserCircle' | 'falUserCog' | 'falUserEdit' | 'falUserFriends' | 'falUserPlus' | 'falUserShield' | 'falUserTimes' | 'falUser' | 'falUsersClass' | 'falUsers' | 'falWater' | 'falWindTurbine' | 'falWind' | 'falWrench' | 'fasCaretDown' | 'fasCaretLeft' | 'fasCaretRight' | 'fasCaretUp' | 'fasDiamond' | 'fasFolder' | 'fasMapMarkerAlt' | 'fasMapMarkerExclamation' | 'fasQuoteLeft' | 'fasQuoteRight' | 'fasSolarPanel' | 'fasSort' | 'fasStar' | 'fasWindTurbine';
+export declare type BaseIcon = 'cuiCheckboxIndeterminate' | 'cuiCheckboxSelected' | 'cuiCheckboxUnselected' | 'cuiRadioSelected' | 'cuiRadioUnselected' | 'culCovid' | 'culDeepSearch' | 'culDotsMenu' | 'culGlobePlus' | 'culListDense' | 'culMapMarkerStar' | 'culPlusThin' | 'culScreenshot' | 'culScreenshotAlt' | 'culShortcut' | 'culTimesThin' | 'culTransformer' | 'culUserTransfer' | 'culVessel' | 'culVesselGroup' | 'cusCheckboxSelected' | 'cusDotFull' | 'cusDotFullAlt' | 'cusDotsMenu' | 'cusRadio' | 'cusSquareMinus' | 'cusTransformer' | 'cusVessel' | 'fabApplePay' | 'fabBluetooth' | 'fabBtc' | 'fabCcAmazonPay' | 'fabCcAmex' | 'fabCcApplePay' | 'fabCcDinersClub' | 'fabCcMastercard' | 'fabCcPaypal' | 'fabCcVisa' | 'fabDhl' | 'fabEbay' | 'fabFacebook' | 'fabFedex' | 'fabFirefox' | 'fabGoogle' | 'fabGoogleDrive' | 'fabLinkedinIn' | 'fabMedium' | 'fabOsi' | 'fabSlack' | 'fabTwitter' | 'fabUps' | 'fadSpinnerThird' | 'falAddressBook' | 'falAddressCard' | 'falAnalytics' | 'falAngleDoubleDown' | 'falAngleDoubleLeft' | 'falAngleDoubleRight' | 'falAngleDoubleUp' | 'falAngleDown' | 'falAngleLeft' | 'falAngleRight' | 'falAngleUp' | 'falArrowAltDown' | 'falArrowAltLeft' | 'falArrowAltRight' | 'falArrowAltUp' | 'falArrowCircleDown' | 'falArrowCircleLeft' | 'falArrowCircleRight' | 'falArrowCircleUp' | 'falArrowDown' | 'falArrowFromBottom' | 'falArrowFromLeft' | 'falArrowFromRight' | 'falArrowFromTop' | 'falArrowLeft' | 'falArrowRight' | 'falArrowToBottom' | 'falArrowToLeft' | 'falArrowToRight' | 'falArrowToTop' | 'falArrowUp' | 'falArrows' | 'falAward' | 'falBan' | 'falBell' | 'falBookOpen' | 'falBroadcastTower' | 'falBuilding' | 'falBullseye' | 'falCalendar' | 'falCalendarAlt' | 'falCamera' | 'falCaretDown' | 'falCaretLeft' | 'falCaretRight' | 'falCaretUp' | 'falCauldron' | 'falChartArea' | 'falChartBar' | 'falChartLineDown' | 'falChartLine' | 'falChartNetwork' | 'falChartPie' | 'falChartPieAlt' | 'falChartScatter' | 'falCheckCircle' | 'falCheckSquare' | 'falCheck' | 'falChevronCircleDown' | 'falChevronCircleLeft' | 'falChevronCircleRight' | 'falChevronCircleUp' | 'falChevronDoubleDown' | 'falChevronDoubleLeft' | 'falChevronDoubleRight' | 'falChevronDoubleUp' | 'falChevronDown' | 'falChevronLeft' | 'falChevronRight' | 'falChevronUp' | 'falCircle' | 'falCloudShowersHeavy' | 'falCloudSnow' | 'falCloudSunRain' | 'falCloudSun' | 'falCloudUpload' | 'falCloud' | 'falCode' | 'falCog' | 'falCogs' | 'falComment' | 'falCommentAlt' | 'falCompressAlt' | 'falCopy' | 'falCreditCard' | 'falDatabase' | 'falDotCircle' | 'falDownload' | 'falEdit' | 'falEllipsisH' | 'falEllipsisV' | 'falEnvelope' | 'falExchange' | 'falExclamationCircle' | 'falExclamationTriangle' | 'falExpandAlt' | 'falExternalLink' | 'falEye' | 'falEyeSlash' | 'falFile' | 'falFilePdf' | 'falFileAlt' | 'falFileArchive' | 'falFileAudio' | 'falFileCertificate' | 'falFileChartLine' | 'falFileChartPie' | 'falFileCheck' | 'falFileCode' | 'falFileCsv' | 'falFileEdit' | 'falFileExcel' | 'falFileImage' | 'falFilePlus' | 'falFilePowerpoint' | 'falFileSpreadsheet' | 'falFileVideo' | 'falFileWord' | 'falFilter' | 'falFlag' | 'falFolderOpen' | 'falFolderPlus' | 'falFolder' | 'falFolders' | 'falGlassesAlt' | 'falGlobe' | 'falHome' | 'falHourglass' | 'falImage' | 'falInfoCircle' | 'falKey' | 'falLayerPlus' | 'falLink' | 'falList' | 'falLockAlt' | 'falLongArrowDown' | 'falLongArrowLeft' | 'falLongArrowRight' | 'falLongArrowUp' | 'falMapMarked' | 'falMapMarkedAlt' | 'falMapMarkerAlt' | 'falMapMarkerAltSlash' | 'falMapMarkerCheck' | 'falMapMarkerExclamation' | 'falMapMarker' | 'falMap' | 'falMinus' | 'falPause' | 'falPauseCircle' | 'falPen' | 'falPlay' | 'falPlayCircle' | 'falPlug' | 'falPlusSquare' | 'falPlus' | 'falPlusCircle' | 'falPrint' | 'falPuzzlePiece' | 'falReceipt' | 'falRedo' | 'falSave' | 'falSearchPlus' | 'falSearch' | 'falServer' | 'falShareAll' | 'falShare' | 'falShareAlt' | 'falShieldAlt' | 'falShieldCheck' | 'falShip' | 'falShoppingBasket' | 'falSignIn' | 'falSignInAlt' | 'falSignOut' | 'falSignOutAlt' | 'falSlidersV' | 'falSnowBlowing' | 'falSnowflake' | 'falSolarPanel' | 'falSort' | 'falSpinner' | 'falSquare' | 'falStepForward' | 'falStop' | 'falStopCircle' | 'falStopwatch' | 'falSuitcase' | 'falSun' | 'falSync' | 'falTachometer' | 'falTemperatureHigh' | 'falThLarge' | 'falThList' | 'falTh' | 'falTimesCircle' | 'falTimes' | 'falToggleOff' | 'falToggleOn' | 'falTrashAlt' | 'falUnlockAlt' | 'falUserChart' | 'falUserCircle' | 'falUserCog' | 'falUserEdit' | 'falUserFriends' | 'falUserPlus' | 'falUserShield' | 'falUserTimes' | 'falUser' | 'falUsersClass' | 'falUsers' | 'falWater' | 'falWindTurbine' | 'falWind' | 'falWrench' | 'fasCaretDown' | 'fasCaretLeft' | 'fasCaretRight' | 'fasCaretUp' | 'fasDiamond' | 'fasFolder' | 'fasMapMarkerAlt' | 'fasMapMarkerExclamation' | 'fasQuoteLeft' | 'fasQuoteRight' | 'fasSolarPanel' | 'fasSort' | 'fasStar' | 'fasWindTurbine';

package/icons/consts.js

@@ -9,6 +9,7 @@ var cuiCheckboxSelected_1 = __importDefault(require("./baseIcons/cui/cuiCheckbox
 var cuiCheckboxUnselected_1 = __importDefault(require("./baseIcons/cui/cuiCheckboxUnselected"));
 var cuiRadioSelected_1 = __importDefault(require("./baseIcons/cui/cuiRadioSelected"));
 var cuiRadioUnselected_1 = __importDefault(require("./baseIcons/cui/cuiRadioUnselected"));
+var fadSpinnerThird_1 = __importDefault(require("./baseIcons/fad/fadSpinnerThird"));
 var falCheck_1 = __importDefault(require("./baseIcons/fal/falCheck"));
 var falCheckCircle_1 = __importDefault(require("./baseIcons/fal/falCheckCircle"));
 var falEllipsisH_1 = __importDefault(require("./baseIcons/fal/falEllipsisH"));
@@ -30,6 +31,7 @@ exports.defaultIcons = {
     cuiCheckboxUnselected: cuiCheckboxUnselected_1.default,
     cuiRadioSelected: cuiRadioSelected_1.default,
     cuiRadioUnselected: cuiRadioUnselected_1.default,
+    fadSpinnerThird: fadSpinnerThird_1.default,
     falCheck: falCheck_1.default,
     falCheckCircle: falCheckCircle_1.default,
     falEllipsisH: falEllipsisH_1.default,

package/input/consts.js

@@ -10,20 +10,26 @@ exports.inputLengths = {
     xl: 480
 };
 exports.inputStateMapping = {
-    default: {
-        colorScheme: 'grey',
-        iconRight: ''
-    },
     error: {
         colorScheme: 'red',
-        iconRight: 'falExclamationTriangle'
+        iconProps: {
+            color: 'red.80',
+            icon: 'falExclamationTriangle'
+        }
     },
     loading: {
         colorScheme: 'grey',
-        iconRight: 'falSpinner'
+        iconProps: {
+            animation: 'vui-spin 0.6s linear infinite',
+            fill: ['blue.20', 'blue.50'],
+            icon: 'fadSpinnerThird'
+        }
     },
     success: {
         colorScheme: 'green',
-        iconRight: 'falCheck'
+        iconProps: {
+            color: 'green.80',
+            icon: 'falCheck'
+        }
     }
 };

package/input/helpers.d.ts

@@ -0,0 +1,2 @@
+import { InputProps } from './input.types';
+export declare function getInitialCount(props: InputProps): number;

package/input/helpers.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInitialCount = void 0;
+function getInitialCount(props) {
+    var _a, _b;
+    var defaultValue = props.defaultValue, value = props.value;
+    return (_b = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString().length) !== null && _a !== void 0 ? _a : value === null || value === void 0 ? void 0 : value.toString().length) !== null && _b !== void 0 ? _b : 0;
+}
+exports.getInitialCount = getInitialCount;

package/input/input.d.ts

@@ -1,6 +1,6 @@
-import { InputInputStyleProps, InputProps } from './input.types';
+import { InputProps } from './input.types';
 import { SystemProps } from '../system';
-export declare const InputInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputInputStyleProps, never>;
+export declare const InputInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const InputBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Input: import("../core").VuiComponent<"div", InputProps>;
 export default Input;

package/input/input.js

@@ -14,6 +14,25 @@ var __assign = (this && this.__assign) || function () {
     };
     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)
@@ -25,39 +44,68 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = exports.InputBase = exports.InputInput = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
-var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var consts_1 = require("./consts");
+var helpers_1 = require("./helpers");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
 var system_1 = require("../system");
+var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-exports.InputInput = styled_components_2.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tmargin: 0 8px;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tmargin: 0 8px;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), styled_components_1.compose(styled_components_1.color, styled_components_1.fontSize));
-exports.InputBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
+exports.InputInput = styled_components_1.default.input.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tmargin: 0 8px;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tmargin: 0 8px;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
+exports.InputBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
 exports.Input = core_1.vui(function (props, ref) {
-    var _a;
-    var _b = core_1.omitThemingProps(props), autoComplete = _b.autoComplete, autoFocus = _b.autoFocus, className = _b.className, colorSchemeProp = _b.colorScheme, defaultValue = _b.defaultValue, disabled = _b.disabled, iconLeft = _b.iconLeft, iconRightProp = _b.iconRight, _c = _b.inputProps, inputProps = _c === void 0 ? {} : _c, inputRef = _b.inputRef, itemLeft = _b.itemLeft, itemRight = _b.itemRight, _d = _b.length, length = _d === void 0 ? 'fluid' : _d, name = _b.name, onBlur = _b.onBlur, onChange = _b.onChange, onFocus = _b.onFocus, placeholder = _b.placeholder, readOnly = _b.readOnly, required = _b.required, _e = _b.state, state = _e === void 0 ? 'default' : _e, stateMapping = _b.stateMapping, _f = _b.type, type = _f === void 0 ? 'text' : _f, value = _b.value, rest = __rest(_b, ["autoComplete", "autoFocus", "className", "colorScheme", "defaultValue", "disabled", "iconLeft", "iconRight", "inputProps", "inputRef", "itemLeft", "itemRight", "length", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "state", "stateMapping", "type", "value"]);
+    var _a, _b;
+    var _c = __read(react_1.useState(helpers_1.getInitialCount(props)), 2), count = _c[0], setCount = _c[1];
+    var _d = core_1.omitThemingProps(props), autoComplete = _d.autoComplete, autoFocus = _d.autoFocus, className = _d.className, colorSchemeProp = _d.colorScheme, defaultValue = _d.defaultValue, disabled = _d.disabled, iconLeft = _d.iconLeft, iconRight = _d.iconRight, _e = _d.inputProps, inputProps = _e === void 0 ? {} : _e, inputRef = _d.inputRef, isInvalid = _d.isInvalid, itemLeft = _d.itemLeft, itemRight = _d.itemRight, _f = _d.length, length = _f === void 0 ? 'fluid' : _f, maxLength = _d.maxLength, name = _d.name, onBlur = _d.onBlur, onChangeProp = _d.onChange, onFocus = _d.onFocus, placeholder = _d.placeholder, readOnly = _d.readOnly, required = _d.required, showCount = _d.showCount, _g = _d.state, state = _g === void 0 ? '' : _g, stateMapping = _d.stateMapping, _h = _d.type, type = _h === void 0 ? 'text' : _h, value = _d.value, rest = __rest(_d, ["autoComplete", "autoFocus", "className", "colorScheme", "defaultValue", "disabled", "iconLeft", "iconRight", "inputProps", "inputRef", "isInvalid", "itemLeft", "itemRight", "length", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "showCount", "state", "stateMapping", "type", "value"]);
     var states = __assign(__assign({}, consts_1.inputStateMapping), stateMapping);
-    var _g = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, _h = _g.colorScheme, colorScheme = _h === void 0 ? colorSchemeProp : _h, _j = _g.iconRight, iconRight = _j === void 0 ? iconRightProp : _j;
-    var _k = core_1.useStyleConfig('Input', __assign({ colorScheme: colorScheme }, props)), borderColor = _k.borderColor, focusWithinRingColor = _k.focusWithinRingColor, fontSize = _k.fontSize, iconColorProp = _k.iconColor, iconSize = _k.iconSize, styles = __rest(_k, ["borderColor", "focusWithinRingColor", "fontSize", "iconColor", "iconSize"]);
-    var iconColor = !disabled ? iconColorProp : 'grey.50';
+    var _j = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, stateColorScheme = _j.colorScheme, stateIconProps = _j.iconProps;
+    var stateProps = utils_1.filterUndefined({
+        colorScheme: (_b = colorSchemeProp !== null && colorSchemeProp !== void 0 ? colorSchemeProp : (isInvalid ? 'red' : undefined)) !== null && _b !== void 0 ? _b : stateColorScheme
+    });
+    var _k = core_1.useStyleConfig('Input', __assign(__assign({}, stateProps), props)), fontSize = _k.fontSize, iconSize = _k.iconSize, styles = __rest(_k, ["fontSize", "iconSize"]);
+    function onChange(e) {
+        setCount(e.target.value.length);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
+    }
+    var iconColor = !disabled ? 'blue.80' : 'grey.50';
+    // const iconRight = iconRightProp ?? states[state]?.iconRight
     var aliasedProps = utils_1.filterUndefined({
         bg: readOnly ? 'grey.20' : undefined,
+        focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
+        focusWithinRingColor: readOnly ? 'transparent' : undefined,
         maxW: consts_1.inputLengths[length]
     });
-    return (react_1.default.createElement(exports.InputBase, __assign({ borderColor: !disabled ? borderColor : 'transparent', borderRadius: "md", className: utils_1.cs('vui-input', disabled && 'disabled', className), focusWithinBorderColor: readOnly ? borderColor : 'transparent', focusWithinRingColor: !readOnly ? focusWithinRingColor : 'transparent', px: 1, ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), itemLeft !== null && itemLeft !== void 0 ? itemLeft : (iconLeft && react_1.default.createElement(icon_1.default, { color: iconColor, icon: iconLeft, size: iconSize })),
+    return (react_1.default.createElement(exports.InputBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-input', disabled && 'disabled', className), px: 1, ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), itemLeft !== null && itemLeft !== void 0 ? itemLeft : (iconLeft && react_1.default.createElement(icon_1.default, { color: iconColor, icon: iconLeft, size: iconSize })),
         react_1.default.createElement(exports.InputInput, __assign({ className: "vui-inputInput", placeholderColor: "grey.60", ref: inputRef }, {
             autoComplete: autoComplete,
             autoFocus: autoFocus,
             defaultValue: defaultValue,
             disabled: disabled,
             fontSize: fontSize,
+            maxLength: maxLength,
             name: name,
             onBlur: onBlur,
             onChange: onChange,
@@ -67,7 +115,12 @@ exports.Input = core_1.vui(function (props, ref) {
             required: required,
             type: type,
             value: value
-        }, inputProps)), itemRight !== null && itemRight !== void 0 ? itemRight : (iconRight && (react_1.default.createElement(icon_1.default, { animation: state === 'loading' ? 'spin' : undefined, color: iconColor, icon: iconRight, size: iconSize })))));
+        }, inputProps)), itemRight !== null && itemRight !== void 0 ? itemRight : (iconRight && react_1.default.createElement(icon_1.default, { color: iconColor, icon: iconRight, size: iconSize })),
+        state && react_1.default.createElement(icon_1.default, __assign({ size: iconSize }, stateIconProps)),
+        showCount && (react_1.default.createElement(t_1.default, { color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 2px)" },
+            count,
+            " / ",
+            maxLength))));
 });
 exports.Input.displayName = 'Input';
 exports.default = exports.Input;

package/input/input.types.d.ts

@@ -1,26 +1,25 @@
 /// <reference types="react" />
 import { inputLengths } from './consts';
-import { ChangeEventHandler, FocusEventHandler } from '../core';
-import { IconProp } from '../icon';
-import { ColorProps, FontSizeProps, SystemProps } from '../system';
+import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../core';
+import { IconProp, IconProps } from '../icon';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface InputInputProps extends InputInputStyleProps {
-}
-export interface InputInputStyleProps extends ColorProps, FontSizeProps {
-}
 export declare type InputLength = keyof typeof inputLengths;
 export interface InputProps extends SystemProps, ThemingProps<'Input'> {
     autoComplete?: string;
     autoFocus?: boolean;
     colorScheme?: 'green' | 'grey' | 'red';
+    defaultValue?: number | string;
     disabled?: boolean;
     iconLeft?: IconProp;
     iconRight?: IconProp;
-    inputProps?: InputInputProps;
+    inputProps?: PropsOf<'input'>;
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
+    isInvalid?: boolean;
     itemLeft?: React.ReactNode;
     itemRight?: React.ReactNode;
     length?: InputLength;
+    maxLength?: number;
     name?: string;
     onBlur?: FocusEventHandler;
     onChange?: ChangeEventHandler;
@@ -28,6 +27,7 @@ export interface InputProps extends SystemProps, ThemingProps<'Input'> {
     placeholder?: string;
     readOnly?: boolean;
     required?: boolean;
+    showCount?: boolean;
     state?: InputState;
     stateMapping?: InputStateMapping;
     type?: string;
@@ -36,5 +36,5 @@ export interface InputProps extends SystemProps, ThemingProps<'Input'> {
 export declare type InputState = 'default' | 'error' | 'loading' | 'success';
 export declare type InputStateMapping = Record<string, {
     colorScheme?: InputProps['colorScheme'];
-    iconRight: InputProps['iconRight'];
+    iconProps: IconProps;
 }>;

package/input/theme.d.ts

@@ -3,7 +3,6 @@ declare function variantDefault(props: Dict): {
     borderColor: string;
     focusWithinRing: number;
     focusWithinRingColor: string;
-    iconColor: string;
 };
 declare const _default: {
     defaultProps: {

package/input/theme.js

@@ -5,13 +5,11 @@ function variantDefault(props) {
     var styles = {
         borderColor: c + ".80",
         focusWithinRing: 2,
-        focusWithinRingColor: c + ".80",
-        iconColor: c + ".80"
+        focusWithinRingColor: c + ".80"
     };
     if (c === 'grey') {
         styles.borderColor = c + ".60";
         styles.focusWithinRingColor = 'blue.50';
-        styles.iconColor = 'blue.80';
     }
     return styles;
 }
@@ -22,7 +20,7 @@ var defaultProps = {
 };
 var sizes = {
     xs: {
-        fontSize: 'xs',
+        fontSize: 'sm',
         h: 24,
         iconSize: 'xs'
     },

package/label/label.js

@@ -39,7 +39,7 @@ var utils_1 = require("../utils");
 var Text = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.isTruncated);
 exports.LabelBase = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tmin-width: 0px;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tmin-width: 0px;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"])), system_1.system);
 exports.Label = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), casing = _a.casing, children = _a.children, className = _a.className, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, isElevated = _a.isElevated, isFullWidth = _a.isFullWidth, _b = _a.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isLoading = _a.isLoading, isRound = _a.isRound, isSplit = _a.isSplit, _c = _a.isTruncated, isTruncated = _c === void 0 ? true : _c, itemLeft = _a.itemLeft, itemRight = _a.itemRight, text = _a.text, weight = _a.weight, rest = __rest(_a, ["casing", "children", "className", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isInteractive", "isLoading", "isRound", "isSplit", "isTruncated", "itemLeft", "itemRight", "text", "weight"]);
+    var _a = core_1.omitThemingProps(props), casing = _a.casing, children = _a.children, className = _a.className, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, isElevated = _a.isElevated, isFullWidth = _a.isFullWidth, _b = _a.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isRound = _a.isRound, isSplit = _a.isSplit, _c = _a.isTruncated, isTruncated = _c === void 0 ? true : _c, itemLeft = _a.itemLeft, itemRight = _a.itemRight, text = _a.text, weight = _a.weight, rest = __rest(_a, ["casing", "children", "className", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isInteractive", "isRound", "isSplit", "isTruncated", "itemLeft", "itemRight", "text", "weight"]);
     var _d = core_1.useStyleConfig('Label', props), activeBg = _d.activeBg, h = _d.h, hoverBg = _d.hoverBg, _e = _d.iconSize, iconSize = _e === void 0 ? 'md' : _e, _f = _d.spaceX, spaceXBase = _f === void 0 ? 0 : _f, styles = __rest(_d, ["activeBg", "h", "hoverBg", "iconSize", "spaceX"]);
     var spaceX = spaceXBase / 8;
     var spaceXText = (spaceXBase + 4) / 8;
@@ -60,13 +60,11 @@ exports.Label = core_1.vui(function (props, ref) {
         borderRadius: isRound ? h / 2 : undefined,
         boxShadow: isElevated ? 2 : undefined,
         fontWeight: weight,
-        pointerEvents: isLoading ? 'none' : undefined,
         textTransform: casing,
         w: isFullWidth ? '100%' : undefined
     });
     return (react_1.default.createElement(exports.LabelBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-label', className), fontWeight: "medium", h: h, pl: pl, pr: pr, ref: ref, transitionDuration: "fast" }, styles, interactiveProps, aliasedProps, rest), icon ? (react_1.default.createElement(icon_1.default, { icon: icon, size: iconSize })) : (react_1.default.createElement(react_1.default.Fragment, null, itemLeft !== null && itemLeft !== void 0 ? itemLeft : (iconLeft && react_1.default.createElement(icon_1.default, { icon: iconLeft, mr: spaceX, size: iconSize })),
-        react_1.default.createElement(Text, { isTruncated: isTruncated }, children !== null && children !== void 0 ? children : text), itemRight !== null && itemRight !== void 0 ? itemRight : (iconRight && react_1.default.createElement(icon_1.default, { icon: iconRight, ml: iconRightMl, size: iconSize })),
-        isLoading && react_1.default.createElement(icon_1.default, { animation: "spin", icon: "falSpinner", ml: iconRightMl, size: iconSize })))));
+        react_1.default.createElement(Text, { isTruncated: isTruncated }, children !== null && children !== void 0 ? children : text), itemRight !== null && itemRight !== void 0 ? itemRight : (iconRight && react_1.default.createElement(icon_1.default, { icon: iconRight, ml: iconRightMl, size: iconSize }))))));
 });
 exports.Label.displayName = 'Label';
 exports.default = exports.Label;

package/label/label.types.d.ts

@@ -11,7 +11,6 @@ export interface LabelProps extends SystemProps, ThemingProps<'Label'> {
     isElevated?: boolean;
     isFullWidth?: boolean;
     isInteractive?: boolean;
-    isLoading?: boolean;
     isRound?: boolean;
     isSplit?: boolean;
     itemLeft?: React.ReactNode;

package/link/link.js

@@ -37,14 +37,14 @@ var system_1 = require("../system");
 var utils_1 = require("../utils");
 exports.LinkBase = styled_components_1.default.a.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"])), system_1.system);
 exports.Link = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), children = _a.children, className = _a.className, decoration = _a.decoration, _b = _a.hoverDecoration, hoverDecoration = _b === void 0 ? 'underline' : _b, isExternal = _a.isExternal, text = _a.text, weight = _a.weight, rest = __rest(_a, ["children", "className", "decoration", "hoverDecoration", "isExternal", "text", "weight"]);
+    var _a = core_1.omitThemingProps(props), children = _a.children, className = _a.className, decoration = _a.decoration, _b = _a.hoverDecoration, hoverDecoration = _b === void 0 ? 'underline' : _b, isExternal = _a.isExternal, isUnderlined = _a.isUnderlined, text = _a.text, weight = _a.weight, rest = __rest(_a, ["children", "className", "decoration", "hoverDecoration", "isExternal", "isUnderlined", "text", "weight"]);
     var styles = core_1.useStyleConfig('Link', props);
     var aliasedProps = utils_1.filterUndefined({
         fontWeight: weight,
         hoverTextDecoration: hoverDecoration,
         rel: isExternal ? 'noopener' : undefined,
         target: isExternal ? '_blank' : undefined,
-        textDecoration: decoration
+        textDecoration: decoration !== null && decoration !== void 0 ? decoration : (isUnderlined ? 'underline' : undefined)
     });
     return (react_1.default.createElement(exports.LinkBase, __assign({ borderRadius: "sm", className: utils_1.cs('vui-link', className), focusRing: 2, ref: ref, transitionDuration: "instant" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });

package/link/link.types.d.ts

@@ -1,10 +1,11 @@
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface LinkProps extends SystemProps, ThemingProps<'Link'> {
-    colorScheme?: 'blue' | 'prussian';
+    colorScheme?: 'blue' | 'white';
     decoration?: TypographyProps['textDecoration'];
     hoverDecoration?: TypographyProps['textDecoration'];
     isExternal?: boolean;
+    isUnderlined?: boolean;
     text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }

package/link/theme.d.ts

@@ -3,6 +3,10 @@ declare function variantDefault(props: Dict): {
     color: string;
     hoverColor: string;
 };
+declare function variantLight(props: Dict): {
+    color: string;
+    hoverColor: string;
+};
 declare const _default: {
     defaultProps: {
         colorScheme: string;
@@ -25,6 +29,7 @@ declare const _default: {
     };
     variants: {
         default: typeof variantDefault;
+        light: typeof variantLight;
     };
 };
 export default _default;

package/link/theme.js

@@ -6,6 +6,18 @@ function variantDefault(props) {
         color: c + ".80",
         hoverColor: c + ".60"
     };
+    if (c === 'white') {
+        styles.color = 'white';
+        styles.hoverColor = 'white';
+    }
+    return styles;
+}
+function variantLight(props) {
+    var c = props.colorScheme;
+    var styles = {
+        color: c + ".60",
+        hoverColor: c + ".40"
+    };
     return styles;
 }
 var defaultProps = {
@@ -28,7 +40,8 @@ var sizes = {
     }
 };
 var variants = {
-    default: variantDefault
+    default: variantDefault,
+    light: variantLight
 };
 exports.default = {
     defaultProps: defaultProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Veracity UI components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",

package/svg/svg.js

@@ -108,11 +108,10 @@ var helpers_1 = require("./helpers");
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.SvgBase = styled_components_1.default.svg.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
-exports.Svg = core_1.vui(function (_a, ref) {
-    var children = _a.children, className = _a.className, src = _a.src, rest = __rest(_a, ["children", "className", "src"]);
-    var _b = __read(react_1.useState(helpers_1.initState()), 2), state = _b[0], setState = _b[1];
-    var _c = state.content, content = _c === void 0 ? '' : _c, _d = state.svgAttributes, svgAttributes = _d === void 0 ? {} : _d;
+exports.SvgBase = styled_components_1.default.svg.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t& > path:nth-child(1) {\n\t\tfill: ", ";\n\t}\n\n\t& > path:nth-child(2) {\n\t\tfill: ", ";\n\t}\n\n\t", "\n"], ["\n\t& > path:nth-child(1) {\n\t\tfill: ", ";\n\t}\n\n\t& > path:nth-child(2) {\n\t\tfill: ", ";\n\t}\n\n\t", "\n"])), function (p) { var _a, _b, _c; return core_1.th.color((_c = (_b = (_a = p.fill) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : p.fill) !== null && _c !== void 0 ? _c : '')(p); }, function (p) { var _a, _b, _c; return core_1.th.color((_c = (_b = (_a = p.fill) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : p.fill) !== null && _c !== void 0 ? _c : '')(p); }, system_1.system);
+exports.Svg = core_1.vui(function (props, ref) {
+    var children = props.children, className = props.className, src = props.src, rest = __rest(props, ["children", "className", "src"]);
+    var _a = __read(react_1.useState(helpers_1.initState()), 2), state = _a[0], setState = _a[1];
     var isMountedRef = react_1.useRef(false);
     var srcRef = react_1.useRef(src);
     react_1.useEffect(function () {
@@ -156,7 +155,9 @@ exports.Svg = core_1.vui(function (_a, ref) {
         }
         src && loadSvg(src);
     }, [src]);
+    var _b = state.content, content = _b === void 0 ? '' : _b, _c = state.svgAttributes, svgAttributes = _c === void 0 ? {} : _c;
     var innerHTML = !children ? { __html: content } : undefined;
+    // const pathFill = Array.isArray(fill) ? fill : [fill]
     return (react_1.default.createElement(exports.SvgBase, __assign({ className: utils_1.cs('vui-svg', className), dangerouslySetInnerHTML: innerHTML, ref: ref, xmlns: "http://www.w3.org/2000/svg" }, svgAttributes, rest), children));
 });
 exports.Svg.displayName = 'Svg';

package/svg/svg.types.d.ts

@@ -1,6 +1,7 @@
-import { SystemProps } from '../system';
+import { ColorGetter, SystemProps } from '../system';
 import { Dict } from '../utils';
 export interface SvgProps extends SystemProps {
+    fill?: ColorGetter | ColorGetter[];
     src?: string;
 }
 export interface SvgState {

package/textarea/helpers.d.ts

@@ -0,0 +1,2 @@
+import { TextareaProps } from './textarea.types';
+export declare function getInitialCount(props: TextareaProps): number;

package/textarea/helpers.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInitialCount = void 0;
+function getInitialCount(props) {
+    var _a, _b;
+    var defaultValue = props.defaultValue, value = props.value;
+    return (_b = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString().length) !== null && _a !== void 0 ? _a : value === null || value === void 0 ? void 0 : value.toString().length) !== null && _b !== void 0 ? _b : 0;
+}
+exports.getInitialCount = getInitialCount;

package/textarea/textarea.d.ts

@@ -1,5 +1,6 @@
 import { TextareaProps } from './textarea.types';
 import { SystemProps } from '../system';
-export declare const TextareaBase: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, SystemProps, never>;
-export declare const Textarea: import("../core").VuiComponent<"textarea", TextareaProps>;
+export declare const TextareaTextarea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const TextareaBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const Textarea: import("../core").VuiComponent<"div", TextareaProps>;
 export default Textarea;

package/textarea/textarea.js

@@ -14,6 +14,25 @@ var __assign = (this && this.__assign) || function () {
     };
     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)
@@ -25,22 +44,73 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Textarea = exports.TextareaBase = void 0;
-var react_1 = __importDefault(require("react"));
+exports.Textarea = exports.TextareaBase = exports.TextareaTextarea = void 0;
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var helpers_1 = require("./helpers");
 var core_1 = require("../core");
 var system_1 = require("../system");
+var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-exports.TextareaBase = styled_components_1.default.textarea.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-width: 1px;\n\tmin-height: 80px;\n\toutline: none;\n\tresize: none;\n\twidth: 100%;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"], ["\n\tborder-width: 1px;\n\tmin-height: 80px;\n\toutline: none;\n\tresize: none;\n\twidth: 100%;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), system_1.system);
+exports.TextareaTextarea = styled_components_1.default.textarea.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-width: 1px;\n\theight: 100%;\n\toutline: none;\n\tresize: none;\n\twidth: 100%;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\tborder-width: 1px;\n\theight: 100%;\n\toutline: none;\n\tresize: none;\n\twidth: 100%;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
+exports.TextareaBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n\n\t", "\n"])), system_1.system);
 exports.Textarea = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
-    var styles = core_1.useStyleConfig('Textarea', props);
-    return (react_1.default.createElement(exports.TextareaBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-textarea', className), p: 1, placeholderColor: "grey.60", ref: ref, transitionDuration: "fast" }, styles, rest)));
+    var _a = __read(react_1.useState(helpers_1.getInitialCount(props)), 2), count = _a[0], setCount = _a[1];
+    var _b = core_1.omitThemingProps(props), autoFocus = _b.autoFocus, className = _b.className, colorSchemeProp = _b.colorScheme, defaultValue = _b.defaultValue, disabled = _b.disabled, isInvalid = _b.isInvalid, maxLength = _b.maxLength, name = _b.name, onBlur = _b.onBlur, onChangeProp = _b.onChange, onFocus = _b.onFocus, placeholder = _b.placeholder, readOnly = _b.readOnly, required = _b.required, resize = _b.resize, showCount = _b.showCount, _c = _b.textareaProps, textareaProps = _c === void 0 ? {} : _c, textareaRef = _b.textareaRef, value = _b.value, rest = __rest(_b, ["autoFocus", "className", "colorScheme", "defaultValue", "disabled", "isInvalid", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "resize", "showCount", "textareaProps", "textareaRef", "value"]);
+    var colorProps = utils_1.filterUndefined({
+        colorScheme: colorSchemeProp !== null && colorSchemeProp !== void 0 ? colorSchemeProp : (isInvalid ? 'red' : undefined)
+    });
+    var styles = core_1.useStyleConfig('Textarea', __assign(__assign({}, colorProps), props));
+    function onChange(e) {
+        setCount(e.target.value.length);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
+    }
+    var aliasedProps = utils_1.filterUndefined({
+        bg: readOnly ? 'grey.20' : undefined,
+        focusBorderColor: !readOnly ? 'transparent' : undefined,
+        focusRing: readOnly ? 0 : undefined
+    });
+    return (react_1.default.createElement(exports.TextareaBase, __assign({ className: utils_1.cs('vui-textarea', className), ref: ref }, styles.container, rest),
+        react_1.default.createElement(exports.TextareaTextarea, __assign({ borderRadius: "md", className: "vui-textareaTextarea", p: 1, placeholderColor: "grey.60", ref: textareaRef, transitionDuration: "fast" }, {
+            autoFocus: autoFocus,
+            defaultValue: defaultValue,
+            disabled: disabled,
+            maxLength: maxLength,
+            name: name,
+            onBlur: onBlur,
+            onChange: onChange,
+            onFocus: onFocus,
+            placeholder: placeholder,
+            readOnly: readOnly,
+            required: required,
+            resize: resize,
+            value: value
+        }, styles.textarea, aliasedProps, textareaProps)),
+        showCount && (react_1.default.createElement(t_1.default, { color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 2px)" },
+            count,
+            " / ",
+            maxLength))));
 });
 exports.Textarea.displayName = 'Textarea';
 exports.default = exports.Textarea;
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/textarea/textarea.types.d.ts

@@ -1,5 +1,25 @@
+/// <reference types="react" />
+import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../core';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface TextareaProps extends SystemProps, ThemingProps<'Textarea'> {
+    autoFocus?: boolean;
     colorScheme?: 'green' | 'grey' | 'red';
+    cols?: number;
+    defaultValue?: number | string;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    maxLength?: number;
+    name?: string;
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    rows?: number;
+    showCount?: boolean;
+    textareaProps?: PropsOf<'textarea', SystemProps>;
+    textareaRef?: React.MutableRefObject<HTMLTextAreaElement | null> | null;
+    value?: number | string;
 }

package/textarea/theme.d.ts

@@ -1,14 +1,18 @@
 import { Dict } from '../utils';
 declare function variantDefault(props: Dict): {
-    borderColor: string;
-    focusRing: number;
-    focusRingColor: string;
+    container: {};
+    textarea: {
+        borderColor: string;
+        focusRing: number;
+        focusRingColor: string;
+    };
 };
 declare const _default: {
     defaultProps: {
         colorScheme: string;
         variant: string;
     };
+    parts: string[];
     sizes: {};
     variants: {
         default: typeof variantDefault;

package/textarea/theme.js

@@ -2,27 +2,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 function variantDefault(props) {
     var c = props.colorScheme;
-    var styles = {
+    var container = {};
+    var textarea = {
         borderColor: c + ".80",
         focusRing: 2,
         focusRingColor: c + ".80"
     };
     if (c === 'grey') {
-        styles.borderColor = c + ".60";
-        styles.focusRingColor = 'blue.50';
+        textarea.borderColor = c + ".60";
+        textarea.focusRingColor = 'blue.50';
     }
-    return styles;
+    return { container: container, textarea: textarea };
 }
 var defaultProps = {
     colorScheme: 'grey',
     variant: 'default'
 };
+var parts = ['container', 'textarea'];
 var sizes = {};
 var variants = {
     default: variantDefault
 };
 exports.default = {
     defaultProps: defaultProps,
+    parts: parts,
     sizes: sizes,
     variants: variants
 };

package/theme/components.d.ts

@@ -308,7 +308,6 @@ declare const _default: {
                 borderColor: string;
                 focusWithinRing: number;
                 focusWithinRingColor: string;
-                iconColor: string;
             };
         };
     };
@@ -392,6 +391,10 @@ declare const _default: {
                 color: string;
                 hoverColor: string;
             };
+            light: (props: import("..").Dict<any>) => {
+                color: string;
+                hoverColor: string;
+            };
         };
     };
     List: {
@@ -745,12 +748,16 @@ declare const _default: {
             colorScheme: string;
             variant: string;
         };
+        parts: string[];
         sizes: {};
         variants: {
             default: (props: import("..").Dict<any>) => {
-                borderColor: string;
-                focusRing: number;
-                focusRingColor: string;
+                container: {};
+                textarea: {
+                    borderColor: string;
+                    focusRing: number;
+                    focusRingColor: string;
+                };
             };
         };
     };

package/theme/defaultTheme.d.ts

@@ -459,7 +459,6 @@ declare const defaultTheme: {
                     borderColor: string;
                     focusWithinRing: number;
                     focusWithinRingColor: string;
-                    iconColor: string;
                 };
             };
         };
@@ -543,6 +542,10 @@ declare const defaultTheme: {
                     color: string;
                     hoverColor: string;
                 };
+                light: (props: import("..").Dict<any>) => {
+                    color: string;
+                    hoverColor: string;
+                };
             };
         };
         List: {
@@ -896,12 +899,16 @@ declare const defaultTheme: {
                 colorScheme: string;
                 variant: string;
             };
+            parts: string[];
             sizes: {};
             variants: {
                 default: (props: import("..").Dict<any>) => {
-                    borderColor: string;
-                    focusRing: number;
-                    focusRingColor: string;
+                    container: {};
+                    textarea: {
+                        borderColor: string;
+                        focusRing: number;
+                        focusRingColor: string;
+                    };
                 };
             };
         };

package/theme/foundations/animations.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     bounce: 'vui-bounce 1s infinite',
-    fadeDown: 'vui-fadeDown 0.3s ease-in-out',
-    fadeIn: 'vui-fadeIn 0.3s ease-in-out',
-    fadeLeft: 'vui-fadeLeft 0.3s ease-in-out',
-    fadeOut: 'vui-fadeOut 0.3s ease-in-out',
-    fadeRight: 'vui-fadeRight 0.3s ease-in-out',
-    fadeUp: 'vui-fadeUp 0.3s ease-in-out',
+    fadeDown: 'vui-fadeDown 0.2s ease-in-out',
+    fadeIn: 'vui-fadeIn 0.2s ease-in-out',
+    fadeLeft: 'vui-fadeLeft 0.2s ease-in-out',
+    fadeOut: 'vui-fadeOut 0.2s ease-in-out',
+    fadeRight: 'vui-fadeRight 0.2s ease-in-out',
+    fadeUp: 'vui-fadeUp 0.2s ease-in-out',
     pulse: 'vui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
     spin: 'vui-spin 1s linear infinite'
 };