@veracity/vui 0.0.1 → 0.0.2

package/checkbox/index.js

@@ -0,0 +1,20 @@
+"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("./checkbox"), exports);
+__exportStar(require("./checkbox.types"), exports);
+var checkbox_1 = require("./checkbox");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(checkbox_1).default; } });

package/checkbox/theme.d.ts

@@ -0,0 +1,24 @@
+import { Dict } from '../utils';
+declare function variantDefault(props: Dict): {
+    color: string;
+    hoverColor: string;
+};
+declare const _default: {
+    defaultProps: {
+        colorScheme: string;
+        size: string;
+        variant: string;
+    };
+    sizes: {
+        sm: {
+            h: number;
+        };
+        md: {
+            h: number;
+        };
+    };
+    variants: {
+        default: typeof variantDefault;
+    };
+};
+export default _default;

package/checkbox/theme.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantDefault(props) {
+    var c = props.colorScheme;
+    var colors = {
+        color: c + ".80",
+        hoverColor: c + ".90"
+    };
+    return colors;
+}
+var defaultProps = {
+    colorScheme: 'blue',
+    size: 'md',
+    variant: 'default'
+};
+var sizes = {
+    sm: {
+        h: 24
+    },
+    md: {
+        h: 30
+    }
+};
+var variants = {
+    default: variantDefault
+};
+exports.default = {
+    defaultProps: defaultProps,
+    sizes: sizes,
+    variants: variants
+};

package/controlLabel/controlLabel.d.ts

@@ -0,0 +1,6 @@
+import { ControlLabelProps, ControlLabelStyleProps } from './controlLabel.types';
+export declare const BaseControlLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & ControlLabelStyleProps, never>;
+export declare const ControlLabel: import("styled-components").StyledComponent<"label", never, ControlLabelProps, never>;
+export default ControlLabel;

package/controlLabel/controlLabel.js

@@ -0,0 +1,55 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __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.ControlLabel = exports.BaseControlLabel = 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 core_1 = require("../core");
+var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
+var generator = styled_components_1.compose(styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
+exports.BaseControlLabel = styled_components_2.default.label.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t&.disabled {\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t&.disabled {\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), generator);
+exports.ControlLabel = core_1.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, control = props.control, disabled = props.disabled, label = props.label, _a = props.size, size = _a === void 0 ? 'md' : _a, rest = __rest(props, ["children", "className", "control", "disabled", "label", "size"]);
+    var styles = core_1.useStyleConfig('ControlLabel', props);
+    var color = disabled ? 'grey.50' : '';
+    var controlProps = { disabled: disabled, size: size };
+    var aliasedProps = utils_1.filterUndefined({});
+    return (react_1.default.createElement(exports.BaseControlLabel, __assign({ className: utils_1.cs('vui-controlLabel', className, disabled && 'disabled'), color: color, ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children ? (children) : (react_1.default.createElement(react_1.default.Fragment, null,
+        control && react_1.default.cloneElement(control, controlProps),
+        react_1.default.createElement(t_1.default, { ml: 1, size: size }, label)))));
+});
+exports.ControlLabel.displayName = 'ControlLabel';
+exports.default = exports.ControlLabel;
+var templateObject_1;

package/controlLabel/controlLabel.types.d.ts

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from 'react';
+import { SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface ControlLabelProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'color'>, ControlLabelStyleProps, ThemingProps<'ControlLabel'> {
+    control?: React.ReactElement;
+    disabled?: boolean;
+    label?: string;
+}
+export interface ControlLabelStyleProps extends SizingProps, SpaceProps, TransitionsProps, TypographyProps {
+}

package/controlLabel/controlLabel.types.js

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

package/controlLabel/index.d.ts

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

package/controlLabel/index.js

@@ -0,0 +1,20 @@
+"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("./controlLabel"), exports);
+__exportStar(require("./controlLabel.types"), exports);
+var controlLabel_1 = require("./controlLabel");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(controlLabel_1).default; } });

package/controlLabel/theme.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    defaultProps: {
+        size: string;
+    };
+    sizes: {
+        sm: {};
+        md: {};
+    };
+    variants: {};
+};
+export default _default;

package/controlLabel/theme.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var defaultProps = {
+    size: 'md'
+};
+var sizes = {
+    sm: {},
+    md: {}
+};
+var variants = {};
+exports.default = {
+    defaultProps: defaultProps,
+    sizes: sizes,
+    variants: variants
+};

package/core/types.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
 export declare type As = React.ElementType;
 export interface CreateContextOptions {
+    /** Message displayed when context is used outside of the provider */
     errorMessage?: string;
+    /** Accessing context outside of provider won't throw error */
+    isOptional?: boolean;
+    /** Name of the context */
     name?: string;
 }
 export declare type CreateContextReturn<T> = [React.Provider<T>, () => T];

package/core/utils.js

@@ -52,12 +52,12 @@ var utils_1 = require("../utils");
 /** Generic function to create new Context and context access hook. */
 function createContext(options) {
     if (options === void 0) { options = {}; }
-    var _a = options.errorMessage, errorMessage = _a === void 0 ? 'Context can only be accessed by components wrapped with the Provider.' : _a, name = options.name;
+    var _a = options.errorMessage, errorMessage = _a === void 0 ? 'Context can only be accessed by components wrapped with the Provider.' : _a, isOptional = options.isOptional, name = options.name;
     var Context = react_1.default.createContext(undefined);
     Context.displayName = name;
     function useContext() {
         var context = react_1.default.useContext(Context);
-        if (context === undefined)
+        if (!isOptional && context === undefined)
             throw new Error(errorMessage);
         return context;
     }

package/divider/divider.d.ts

@@ -0,0 +1,6 @@
+import { DividerProps, DividerStyleProps } from './divider.types';
+export declare const BaseDivider: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & DividerStyleProps, never>;
+export declare const Divider: import("styled-components").StyledComponent<"hr", never, DividerProps, never>;
+export default Divider;

package/divider/divider.js

@@ -0,0 +1,57 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __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.Divider = exports.BaseDivider = 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 core_1 = require("../core");
+var utils_1 = require("../utils");
+var generator = styled_components_1.compose(styled_components_1.borders, styled_components_1.sizing, styled_components_1.space);
+exports.BaseDivider = styled_components_2.default.hr.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
+exports.Divider = core_1.forwardRef(function (props, ref) {
+    var _a, _b;
+    var _c = core_1.omitThemingProps(props), className = _c.className, isVertical = _c.isVertical, width = _c.width, rest = __rest(_c, ["className", "isVertical", "width"]);
+    var styles = core_1.useStyleConfig('Divider', props);
+    var borderSide = isVertical ? 'Right' : 'Bottom';
+    var borderWidth = "border" + borderSide + "Width";
+    var defaultStyle = (_a = {}, _a[borderWidth] = 1, _a);
+    var height = isVertical ? '100%' : '';
+    var aliasedProps = utils_1.filterUndefined((_b = {},
+        _b[borderWidth] = width,
+        _b));
+    return (react_1.default.createElement(exports.BaseDivider, __assign({ borderColor: "grey.30", className: utils_1.cs('vui-divider', className), h: height, ref: ref }, defaultStyle, styles, aliasedProps, rest)));
+});
+exports.Divider.displayName = 'Divider';
+exports.default = exports.Divider;
+var templateObject_1;

package/divider/divider.types.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+import { BordersProps, SizingProps, SpaceProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface DividerProps extends HTMLAttributes<HTMLHRElement>, DividerStyleProps, ThemingProps<'Divider'> {
+    className?: string;
+    isVertical?: boolean;
+    width?: BordersProps['borderWidth'];
+}
+export interface DividerStyleProps extends BordersProps, SizingProps, SpaceProps {
+}

package/divider/divider.types.js

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

package/divider/index.d.ts

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

package/divider/index.js

@@ -0,0 +1,20 @@
+"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("./divider"), exports);
+__exportStar(require("./divider.types"), exports);
+var divider_1 = require("./divider");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(divider_1).default; } });

package/divider/theme.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+};
+export default _default;

package/divider/theme.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var defaultProps = {};
+var sizes = {};
+var variants = {};
+exports.default = {
+    defaultProps: defaultProps,
+    sizes: sizes,
+    variants: variants
+};

package/heading/heading.js

@@ -43,13 +43,13 @@ exports.BaseHeading = styled_components_2.default.h2.withConfig({
 exports.Heading = core_1.forwardRef(function (props, ref) {
     var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, className = _a.className, decoration = _a.decoration, weight = _a.weight, rest = __rest(_a, ["align", "casing", "className", "decoration", "weight"]);
     var styles = core_1.useStyleConfig('Heading', props);
+    var hClassName = props.size ? "vui-" + props.size : '';
     var aliasedProps = utils_1.filterUndefined({
         fontWeight: weight,
         textAlign: align,
         textDecoration: decoration,
         textTransform: casing
     });
-    var hClassName = props.size ? "vui-" + props.size : '';
     return (react_1.default.createElement(exports.BaseHeading, __assign({ className: utils_1.cs('vui-heading', hClassName, className), fontWeight: "demi", ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest)));
 });
 exports.Heading.displayName = 'Heading';

package/index.d.ts

@@ -1,6 +1,10 @@
+export * from './avatar';
 export * from './box';
 export * from './button';
+export * from './checkbox';
+export * from './controlLabel';
 export * from './core';
+export * from './divider';
 export * from './heading';
 export * from './icon';
 export * from './input';

package/index.js

@@ -10,9 +10,13 @@ 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);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./avatar"), exports);
 __exportStar(require("./box"), exports);
 __exportStar(require("./button"), exports);
+__exportStar(require("./checkbox"), exports);
+__exportStar(require("./controlLabel"), exports);
 __exportStar(require("./core"), exports);
+__exportStar(require("./divider"), exports);
 __exportStar(require("./heading"), exports);
 __exportStar(require("./icon"), exports);
 __exportStar(require("./input"), exports);

package/input/consts.d.ts

@@ -15,6 +15,10 @@ export declare const inputStates: {
         colorScheme: string;
         iconRight: string;
     };
+    loading: {
+        colorScheme: string;
+        iconRight: string;
+    };
     success: {
         colorScheme: string;
         iconRight: string;

package/input/consts.js

@@ -18,6 +18,10 @@ exports.inputStates = {
         colorScheme: 'red',
         iconRight: 'falExclamationTriangle'
     },
+    loading: {
+        colorScheme: 'grey',
+        iconRight: 'falSpinner'
+    },
     success: {
         colorScheme: 'green',
         iconRight: 'falCheck'

package/input/input.js

@@ -38,21 +38,23 @@ var core_1 = require("../core");
 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.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
-var Input = styled_components_2.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tcolor: prussian.80;\n\tflex: 1;\n\tmargin: 0 8px;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0;\n\n\t", "\n"], ["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tcolor: prussian.80;\n\tflex: 1;\n\tmargin: 0 8px;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0;\n\n\t", "\n"])), styled_components_1.compose(styled_components_1.color, styled_components_1.fontSize));
+var Input = 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\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\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), styled_components_1.compose(styled_components_1.color, styled_components_1.fontSize));
 exports.BaseInputField = styled_components_2.default.div.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\twidth: 100%;\n\n\t", "\n"], ["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\twidth: 100%;\n\n\t", "\n"])), generator);
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\twidth: 100%;\n\n\t&.disabled {\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\ttransition: all 0s ease-in-out;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), generator);
 exports.InputField = core_1.forwardRef(function (props, ref) {
     var _a = core_1.omitThemingProps(props), autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, className = _a.className, defaultValue = _a.defaultValue, disabled = _a.disabled, iconLeft = _a.iconLeft, iconRightProp = _a.iconRight, _b = _a.inputProps, inputProps = _b === void 0 ? {} : _b, inputRef = _a.inputRef, itemLeft = _a.itemLeft, itemRight = _a.itemRight, _c = _a.length, length = _c === void 0 ? 'fluid' : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, placeholder = _a.placeholder, readOnly = _a.readOnly, required = _a.required, _d = _a.state, state = _d === void 0 ? 'default' : _d, _e = _a.type, type = _e === void 0 ? 'text' : _e, value = _a.value, rest = __rest(_a, ["autoComplete", "autoFocus", "className", "defaultValue", "disabled", "iconLeft", "iconRight", "inputProps", "inputRef", "itemLeft", "itemRight", "length", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "state", "type", "value"]);
-    var _f = core_1.useStyleConfig('Input', __assign({ colorScheme: consts_1.inputStates[state].colorScheme }, props)), borderColor = _f.borderColor, focusWithinRingColor = _f.focusWithinRingColor, fontSize = _f.fontSize, iconColor = _f.iconColor, styles = __rest(_f, ["borderColor", "focusWithinRingColor", "fontSize", "iconColor"]);
+    var _f = core_1.useStyleConfig('Input', __assign({ colorScheme: consts_1.inputStates[state].colorScheme }, props)), borderColor = _f.borderColor, focusWithinRingColor = _f.focusWithinRingColor, fontSize = _f.fontSize, iconColorProp = _f.iconColor, iconSize = _f.iconSize, styles = __rest(_f, ["borderColor", "focusWithinRingColor", "fontSize", "iconColor", "iconSize"]);
+    var disabledTextColor = 'grey.50';
+    var bg = disabled || readOnly ? 'grey.20' : undefined;
+    var iconColor = disabled ? disabledTextColor : iconColorProp;
     var iconRight = iconRightProp !== null && iconRightProp !== void 0 ? iconRightProp : consts_1.inputStates[state].iconRight;
-    var placeholderColor = disabled ? 'prussian.80' : 'grey.70';
+    var placeholderColor = disabled ? disabledTextColor : 'grey.60';
     var aliasedProps = utils_1.filterUndefined({
-        bg: disabled || readOnly ? 'grey.20' : undefined,
         maxW: consts_1.inputLengths[length]
     });
-    return (react_1.default.createElement(exports.BaseInputField, __assign({ borderColor: !disabled ? borderColor : 'transparent', borderRadius: "md", className: utils_1.cs('vui-inputField', 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 })),
-        react_1.default.createElement(Input, __assign({ className: "vui-input", ref: inputRef }, {
+    return (react_1.default.createElement(exports.BaseInputField, __assign({ bg: bg, borderColor: !disabled ? borderColor : 'transparent', borderRadius: "md", className: utils_1.cs('vui-inputField', className, disabled && 'disabled'), 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 })),
+        react_1.default.createElement(Input, __assign({ className: "vui-input", disabledColor: disabledTextColor, placeholderColor: placeholderColor, ref: inputRef }, {
             autoComplete: autoComplete,
             autoFocus: autoFocus,
             defaultValue: defaultValue,
@@ -63,12 +65,11 @@ exports.InputField = core_1.forwardRef(function (props, ref) {
             onChange: onChange,
             onFocus: onFocus,
             placeholder: placeholder,
-            placeholderColor: placeholderColor,
             readOnly: readOnly,
             required: required,
             type: type,
             value: value
-        }, inputProps)), itemRight !== null && itemRight !== void 0 ? itemRight : (iconRight && react_1.default.createElement(icon_1.default, { color: iconColor, icon: iconRight }))));
+        }, 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 })))));
 });
 exports.InputField.displayName = 'InputField';
 exports.default = exports.InputField;

package/input/input.types.d.ts

@@ -28,8 +28,9 @@ export interface InputFieldProps extends HTMLAttributes<HTMLDivElement>, InputFi
 export declare type InputFieldState = keyof typeof inputStates;
 export interface InputFieldStyleProps extends BackgroundColorProps, BordersProps, EffectsProps, SizingProps, SpaceProps, TransitionsProps {
 }
-export interface InputProps extends Omit<HTMLAttributes<HTMLInputElement>, 'color'>, InputStyleProps {
+interface InputProps extends Omit<HTMLAttributes<HTMLInputElement>, 'color'>, InputStyleProps {
     color?: string;
 }
 export interface InputStyleProps extends ColorProps, FontSizeProps {
 }
+export {};

package/input/theme.d.ts

@@ -12,13 +12,20 @@ declare const _default: {
         variant: string;
     };
     sizes: {
+        sm: {
+            fontSize: string;
+            h: number;
+            iconSize: string;
+        };
         md: {
             fontSize: string;
             h: number;
+            iconSize: string;
         };
         lg: {
             fontSize: string;
             h: number;
+            iconSize: string;
         };
     };
     variants: {

package/input/theme.js

@@ -21,13 +21,20 @@ var defaultProps = {
     variant: 'default'
 };
 var sizes = {
+    sm: {
+        fontSize: 'sm',
+        h: 32,
+        iconSize: 'sm'
+    },
     md: {
         fontSize: 'md',
-        h: 40
+        h: 40,
+        iconSize: 'md'
     },
     lg: {
         fontSize: 'lg',
-        h: 48
+        h: 48,
+        iconSize: 'md'
     }
 };
 var variants = {

package/label/label.js

@@ -41,7 +41,7 @@ var generator = styled_components_1.compose(styled_components_1.backgroundColor,
 var Text = styled_components_2.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.isTruncated);
 exports.BaseLabel = styled_components_2.default.span.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: 1.1;\n\tmin-width: 0px;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t&:focus {\n\t\toutline: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: 1.1;\n\tmin-width: 0px;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t&:focus {\n\t\toutline: none;\n\t}\n\n\t", "\n"])), generator);
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: 1.1;\n\tmin-width: 0px;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\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: 1.1;\n\tmin-width: 0px;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"])), generator);
 exports.Label = core_1.forwardRef(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 _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"]);

package/label/theme.d.ts

@@ -1,4 +1,12 @@
 import { Dict } from '../utils';
+declare function variantOutlined(props: Dict): {
+    hoverBg: string;
+    activeBg: string;
+    bg: string;
+    color: string;
+    borderColor: string;
+    borderWidth: number;
+};
 declare function variantSolid(props: Dict): {
     hoverBg: string;
     activeBg: string;
@@ -11,6 +19,12 @@ declare function variantSubtle(props: Dict): {
     bg: string;
     color: string;
 };
+declare function variantText(props: Dict): {
+    hoverBg: string;
+    activeBg: string;
+    bg: string;
+    color: string;
+};
 declare const _default: {
     defaultProps: {
         colorScheme: string;
@@ -38,8 +52,10 @@ declare const _default: {
         };
     };
     variants: {
+        outlined: typeof variantOutlined;
         solid: typeof variantSolid;
         subtle: typeof variantSubtle;
+        text: typeof variantText;
     };
 };
 export default _default;