@veracity/vui 0.0.1 → 0.0.2

package/label/theme.js

@@ -1,5 +1,21 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+function variantOutlined(props) {
+    var c = props.colorScheme;
+    var styles = __assign({ borderColor: c + ".80", borderWidth: 1 }, variantText(props));
+    return styles;
+}
 function variantSolid(props) {
     var c = props.colorScheme;
     var colors = {
@@ -38,6 +54,21 @@ function variantSubtle(props) {
     }
     return colors;
 }
+function variantText(props) {
+    var c = props.colorScheme;
+    var styles = {
+        hoverBg: c + ".20",
+        activeBg: c + ".30",
+        bg: 'transparent',
+        color: c + ".80"
+    };
+    // Special cases
+    if (c === 'prussian') {
+        styles.activeBg = 'blue.30';
+        styles.hoverBg = 'blue.20';
+    }
+    return styles;
+}
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
@@ -64,8 +95,10 @@ var sizes = {
     }
 };
 var variants = {
+    outlined: variantOutlined,
     solid: variantSolid,
-    subtle: variantSubtle
+    subtle: variantSubtle,
+    text: variantText
 };
 exports.default = {
     defaultProps: defaultProps,

package/link/link.js

@@ -39,7 +39,7 @@ var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.borders, system_1.isTruncated, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 exports.BaseLink = styled_components_2.default.a.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: pointer;\n\toutline: none;\n\ttext-decoration: none;\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"], ["\n\tcursor: pointer;\n\toutline: none;\n\ttext-decoration: none;\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"])), generator);
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"])), generator);
 exports.Link = core_1.forwardRef(function (props, ref) {
     var _a = core_1.omitThemingProps(props), className = _a.className, decoration = _a.decoration, _b = _a.hoverDecoration, hoverDecoration = _b === void 0 ? 'underline' : _b, isExternal = _a.isExternal, weight = _a.weight, rest = __rest(_a, ["className", "decoration", "hoverDecoration", "isExternal", "weight"]);
     var styles = core_1.useStyleConfig('Link', props);

package/list/list.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)
@@ -31,20 +50,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = exports.BaseList = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var styled_components_2 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
+var listItem_1 = __importDefault(require("./listItem"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.sizing, styled_components_1.space);
+var generator = styled_components_1.compose(styled_components_1.sizing, styled_components_1.space, styled_components_1.typography);
 exports.BaseList = styled_components_2.default.ul.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tposition: relative;\n\n\t", "\n"], ["\n\tposition: relative;\n\n\t", "\n"])), generator);
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
 exports.List = core_1.forwardRef(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
+    var children = props.children, className = props.className, colorScheme = props.colorScheme, isInteractive = props.isInteractive, size = props.size, subheader = props.subheader, variant = props.variant, rest = __rest(props, ["children", "className", "colorScheme", "isInteractive", "size", "subheader", "variant"]);
     var styles = core_1.useStyleConfig('List', props);
-    return (react_1.default.createElement(context_1.ListProvider, { value: styles },
-        react_1.default.createElement(exports.BaseList, __assign({ className: utils_1.cs('vui-list', className), ref: ref }, styles.list, rest))));
+    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, isInteractive: isInteractive, size: size, styles: styles, variant: variant }); }, [
+        colorScheme,
+        isInteractive,
+        size,
+        variant
+    ]);
+    var listStyleType = props.as === 'ol' ? 'decimal' : 'disc';
+    return (react_1.default.createElement(context_1.ListProvider, { value: context },
+        react_1.default.createElement(exports.BaseList, __assign({ className: utils_1.cs('vui-list', className), listStyleType: listStyleType, ref: ref }, styles.list, rest),
+            subheader && (react_1.default.createElement(listItem_1.default, { className: "vui-listSubheader", color: "grey.80", fontSize: "sm", fontWeight: "medium" }, subheader)),
+            children)));
 });
 exports.List.displayName = 'List';
 exports.default = exports.List;

package/list/list.types.d.ts

@@ -1,7 +1,10 @@
 import { HTMLAttributes } from 'react';
-import { SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface ListProps extends HTMLAttributes<HTMLUListElement>, ListStyleProps, ThemingProps<'List'> {
+export interface ListProps extends Omit<HTMLAttributes<HTMLUListElement>, 'color'>, ListStyleProps, ThemingProps<'List'> {
+    colorScheme?: 'blue' | 'grey';
+    isInteractive?: boolean;
+    subheader?: string;
 }
-export interface ListStyleProps extends SizingProps, SpaceProps, TransitionsProps {
+export interface ListStyleProps extends SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/list/listItem.js

@@ -36,15 +36,16 @@ var styled_components_2 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.flexboxes, styled_components_1.fontSize, styled_components_1.interactivity, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
+var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.flexboxes, styled_components_1.interactivity, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 exports.BaseListItem = styled_components_2.default.li.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tline-height: 1.1;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tline-height: 1.1;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"])), generator);
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tline-height: 1.1;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\n\t&.disabled {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tline-height: 1.1;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\n\t&.disabled {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), core_1.th('colors.grey.20'), core_1.th('colors.grey.50'), generator);
 exports.ListItem = core_1.forwardRef(function (props, ref) {
-    var className = props.className, _a = props.isInteractive, isInteractive = _a === void 0 ? props.onClick !== undefined : _a, isSelected = props.isSelected, rest = __rest(props, ["className", "isInteractive", "isSelected"]);
-    var styles = context_1.useList();
-    var _b = styles.item, activeBg = _b.activeBg, hoverBg = _b.hoverBg, hoverColor = _b.hoverColor, itemStyles = __rest(_b, ["activeBg", "hoverBg", "hoverColor"]);
-    var interactiveProps = isInteractive
+    var _a;
+    var listContext = context_1.useList();
+    var className = props.className, disabled = props.disabled, _b = props.isInteractive, isInteractive = _b === void 0 ? (_a = listContext.isInteractive) !== null && _a !== void 0 ? _a : props.onClick !== undefined : _b, isSelected = props.isSelected, onClick = props.onClick, rest = __rest(props, ["className", "disabled", "isInteractive", "isSelected", "onClick"]);
+    var _c = listContext.styles.item, activeBg = _c.activeBg, hoverBg = _c.hoverBg, hoverColor = _c.hoverColor, itemStyles = __rest(_c, ["activeBg", "hoverBg", "hoverColor"]);
+    var interactiveProps = !disabled && isInteractive
         ? {
             cursor: 'pointer',
             focusVisibleRing: 3,
@@ -60,7 +61,7 @@ exports.ListItem = core_1.forwardRef(function (props, ref) {
         bg: isSelected ? hoverBg : undefined,
         color: isSelected ? hoverColor : undefined
     });
-    return (react_1.default.createElement(exports.BaseListItem, __assign({ className: utils_1.cs('vui-listItem', className), px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.BaseListItem, __assign({ className: utils_1.cs('vui-listItem', className, disabled && 'disabled'), onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest)));
 });
 exports.ListItem.displayName = 'ListItem';
 exports.default = exports.ListItem;

package/list/listItem.types.d.ts

@@ -1,8 +1,9 @@
 import { HTMLAttributes } from 'react';
-import { BackgroundColorProps, ColorProps, FlexboxesProps, FontSizeProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { BackgroundColorProps, FlexboxesProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
 export interface ListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'color'>, ListItemStyleProps {
+    disabled?: boolean;
     isInteractive?: boolean;
     isSelected?: boolean;
 }
-export interface ListItemStyleProps extends BackgroundColorProps, ColorProps, FlexboxesProps, FontSizeProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps {
+export interface ListItemStyleProps extends BackgroundColorProps, FlexboxesProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/list/theme.d.ts

@@ -1,5 +1,11 @@
+import { Dict } from '../utils';
+declare function variantDefault(props: Dict): {
+    item: Dict<any>;
+    list: Dict<any>;
+};
 declare const _default: {
     defaultProps: {
+        colorScheme: string;
         size: string;
         variant: string;
     };
@@ -25,12 +31,14 @@ declare const _default: {
         };
     };
     variants: {
-        default: {
+        default: typeof variantDefault;
+        unstyled: {
             item: {
-                activeBg: string;
-                borderRadius: string;
-                hoverBg: string;
-                hoverColor: string;
+                display: string;
+                h: undefined;
+            };
+            list: {
+                pl: number;
             };
         };
     };

package/list/theme.js

@@ -1,6 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+function variantDefault(props) {
+    var c = props.colorScheme;
+    var itemStyles = {
+        activeBg: c + ".30",
+        borderRadius: 'md',
+        hoverBg: c + ".20"
+    };
+    var listStyles = {
+        px: 1
+    };
+    // Special cases
+    if (c === 'blue') {
+        itemStyles.hoverColor = 'blue.80';
+    }
+    return {
+        item: itemStyles,
+        list: listStyles
+    };
+}
 var defaultProps = {
+    colorScheme: 'blue',
     size: 'md',
     variant: 'default'
 };
@@ -26,12 +46,14 @@ var sizes = {
     }
 };
 var variants = {
-    default: {
+    default: variantDefault,
+    unstyled: {
         item: {
-            activeBg: 'blue.30',
-            borderRadius: 'md',
-            hoverBg: 'blue.20',
-            hoverColor: 'blue.80'
+            display: 'list-item',
+            h: undefined
+        },
+        list: {
+            pl: 3
         }
     }
 };

package/package.json

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

package/system/typography.d.ts

@@ -1,5 +1,5 @@
 import { ITheme, SystemProp, VariantsType } from '@xstyled/system';
-import * as CSS from 'csstype';
+import { Globals, Property } from 'csstype';
 import { ColorGetter } from './colors';
 import { VuiTheme } from '../theme';
 export declare type FontGetter<T extends ITheme = VuiTheme> = VariantsType<T['fonts']>;
@@ -26,7 +26,7 @@ export interface FontWeightProps<T extends ITheme = VuiTheme> {
     fontWeight?: FontWeightProp<T>;
     hoverFontWeight?: FontWeightProp<T>;
 }
-declare type FontStyleProp<T extends ITheme> = SystemProp<CSS.Property.FontStyle, T>;
+declare type FontStyleProp<T extends ITheme> = SystemProp<Property.FontStyle, T>;
 export interface FontStyleProps<T extends ITheme = VuiTheme> {
     fontStyle?: FontStyleProp<T>;
     hoverFontStyle?: FontStyleProp<T>;
@@ -38,22 +38,26 @@ export interface ColorProps<T extends ITheme = VuiTheme> {
     hoverColor?: ColorProp<T>;
     placeholderColor?: ColorProp<T>;
 }
-declare type TextTransformProp<T extends ITheme> = SystemProp<CSS.Property.TextTransform, T>;
+declare type TextTransformProp<T extends ITheme> = SystemProp<Property.TextTransform, T>;
 export interface TextTransformProps<T extends ITheme = VuiTheme> {
     textTransform?: TextTransformProp<T>;
     hoverTextTransform?: TextTransformProp<T>;
 }
-declare type TextDecoration = CSS.Globals | 'overline' | 'underline' | 'line-through';
+declare type TextDecoration = Globals | 'overline' | 'underline' | 'line-through';
 declare type TextDecorationProp<T extends ITheme> = SystemProp<TextDecoration, T>;
 export interface TextDecorationProps<T extends ITheme = VuiTheme> {
     textDecoration?: TextDecorationProp<T>;
     hoverTextDecoration?: TextDecorationProp<T>;
 }
-declare type TextAlignProp<T extends ITheme> = SystemProp<CSS.Property.TextAlign, T>;
+declare type TextAlignProp<T extends ITheme> = SystemProp<Property.TextAlign, T>;
 export interface TextAlignProps<T extends ITheme = VuiTheme> {
     textAlign?: TextAlignProp<T>;
     hoverTextAlign?: TextAlignProp<T>;
 }
+declare type ListStyleTypeProp<T extends ITheme> = SystemProp<Property.ListStyleType, T>;
+export interface ListStyleTypeProps<T extends ITheme = VuiTheme> {
+    listStyleType?: ListStyleTypeProp<T>;
+}
 export interface TypographyProps<T extends ITheme = VuiTheme> extends FontFamilyProps<T>, FontSizeProps<T>, FontStyleProps<T>, LineHeightProps<T>, FontWeightProps<T>, TextAlignProps<T>, ColorProps<T>, TextTransformProps<T>, TextDecorationProps<T> {
 }
 export {};

package/t/t.types.d.ts

@@ -1,12 +1,12 @@
 import { HTMLAttributes } from 'react';
 import { IsTruncatedProps, SizingProps, SpaceProps, TextAlignProps, TextDecorationProps, TextTransformProps, TransitionsProps, TypographyProps } from '../system';
-import { FontWeight, ThemingProps, VuiTheme } from '../theme';
+import { FontWeight, ThemingProps } from '../theme';
 import { AnyString } from '../utils';
 export interface TProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>, TStyleProps, ThemingProps<'T'> {
     align?: TextAlignProps['textAlign'];
-    casing?: TextTransformProps<VuiTheme>['textTransform'];
-    decoration?: TextDecorationProps<VuiTheme>['textDecoration'];
+    casing?: TextTransformProps['textTransform'];
+    decoration?: TextDecorationProps['textDecoration'];
     weight?: FontWeight | AnyString | number;
 }
-export interface TStyleProps extends IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps<VuiTheme> {
+export interface TStyleProps extends IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/textarea/textarea.js

@@ -38,11 +38,13 @@ var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.fontSize, styled_components_1.resize, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
 exports.BaseTextarea = styled_components_2.default.textarea.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(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&: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&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), generator);
+})(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\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\tcursor: not-allowed;\n\t}\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), generator);
 exports.Textarea = core_1.forwardRef(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
+    var _a = core_1.omitThemingProps(props), className = _a.className, disabled = _a.disabled, rest = __rest(_a, ["className", "disabled"]);
     var styles = core_1.useStyleConfig('Textarea', props);
-    return (react_1.default.createElement(exports.BaseTextarea, __assign({ borderRadius: "md", className: utils_1.cs('vui-textarea', className), p: 1, ref: ref, transitionDuration: "fast" }, styles, rest)));
+    var disabledTextColor = 'grey.50';
+    var placeholderColor = disabled ? disabledTextColor : 'grey.60';
+    return (react_1.default.createElement(exports.BaseTextarea, __assign({ borderRadius: "md", className: utils_1.cs('vui-textarea', className), disabled: disabled, disabledBg: "grey.20", disabledBorderColor: "transparent", disabledColor: disabledTextColor, p: 1, placeholderColor: placeholderColor, ref: ref, transitionDuration: "fast" }, styles, rest)));
 });
 exports.Textarea.displayName = 'Textarea';
 exports.default = exports.Textarea;

package/textarea/textarea.types.d.ts

@@ -1,8 +1,8 @@
 import { HTMLAttributes } from 'react';
-import { BackgroundColorProps, BorderProps, ColorProps, FontSizeProps, ResizeProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { BackgroundColorProps, BordersProps, ColorProps, FontSizeProps, ResizeProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface TextareaProps extends Omit<HTMLAttributes<HTMLTextAreaElement>, 'color'>, TextareaStyleProps, ThemingProps<'Textarea'> {
     colorScheme?: 'green' | 'grey' | 'red';
 }
-export interface TextareaStyleProps extends BackgroundColorProps, BorderProps, ColorProps, FontSizeProps, ResizeProps, SizingProps, SpaceProps, TransitionsProps {
+export interface TextareaStyleProps extends BackgroundColorProps, BordersProps, ColorProps, FontSizeProps, ResizeProps, SizingProps, SpaceProps, TransitionsProps {
 }

package/theme/components.d.ts

@@ -1,4 +1,55 @@
 declare const _default: {
+    Avatar: {
+        defaultProps: {
+            colorScheme: string;
+            size: string;
+            variant: string;
+        };
+        sizes: {
+            xs: {
+                fontSize: string;
+                h: number;
+                iconSize: string;
+            };
+            sm: {
+                fontSize: string;
+                h: number;
+                iconSize: string;
+            };
+            md: {
+                fontSize: string;
+                h: number;
+                iconSize: string;
+            };
+            lg: {
+                fontSize: string;
+                h: number;
+                iconSize: string;
+            };
+        };
+        variants: {
+            outlined: (props: import("..").Dict<any>) => {
+                borderColor: string;
+                borderWidth: number;
+                hoverBg: string;
+                activeBg: string;
+                bg: string;
+                color: string;
+            };
+            solid: (props: import("..").Dict<any>) => {
+                hoverBg: string;
+                activeBg: string;
+                bg: string;
+                color: string;
+            };
+            subtle: (props: import("..").Dict<any>) => {
+                hoverBg: string;
+                activeBg: string;
+                bg: string;
+                color: string;
+            };
+        };
+    };
     Box: {
         defaultProps: {};
         sizes: {};
@@ -50,6 +101,7 @@ declare const _default: {
                 borderWidth: number;
             };
             solid: (props: import("..").Dict<any>) => {
+                borderColor: string;
                 hoverBg: string;
                 activeBg: string;
                 bg: string;
@@ -63,6 +115,42 @@ declare const _default: {
             };
         };
     };
+    Checkbox: {
+        defaultProps: {
+            colorScheme: string;
+            size: string;
+            variant: string;
+        };
+        sizes: {
+            sm: {
+                h: number;
+            };
+            md: {
+                h: number;
+            };
+        };
+        variants: {
+            default: (props: import("..").Dict<any>) => {
+                color: string;
+                hoverColor: string;
+            };
+        };
+    };
+    ControlLabel: {
+        defaultProps: {
+            size: string;
+        };
+        sizes: {
+            sm: {};
+            md: {};
+        };
+        variants: {};
+    };
+    Divider: {
+        defaultProps: {};
+        sizes: {};
+        variants: {};
+    };
     Heading: {
         defaultProps: {
             size: string;
@@ -132,13 +220,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: {
@@ -177,6 +272,14 @@ declare const _default: {
             };
         };
         variants: {
+            outlined: (props: import("..").Dict<any>) => {
+                hoverBg: string;
+                activeBg: string;
+                bg: string;
+                color: string;
+                borderColor: string;
+                borderWidth: number;
+            };
             solid: (props: import("..").Dict<any>) => {
                 hoverBg: string;
                 activeBg: string;
@@ -189,6 +292,12 @@ declare const _default: {
                 bg: string;
                 color: string;
             };
+            text: (props: import("..").Dict<any>) => {
+                hoverBg: string;
+                activeBg: string;
+                bg: string;
+                color: string;
+            };
         };
     };
     Link: {
@@ -198,6 +307,7 @@ declare const _default: {
     };
     List: {
         defaultProps: {
+            colorScheme: string;
             size: string;
             variant: string;
         };
@@ -223,12 +333,17 @@ declare const _default: {
             };
         };
         variants: {
-            default: {
+            default: (props: import("..").Dict<any>) => {
+                item: import("..").Dict<any>;
+                list: import("..").Dict<any>;
+            };
+            unstyled: {
                 item: {
-                    activeBg: string;
-                    borderRadius: string;
-                    hoverBg: string;
-                    hoverColor: string;
+                    display: string;
+                    h: undefined;
+                };
+                list: {
+                    pl: number;
                 };
             };
         };

package/theme/components.js

@@ -3,31 +3,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var theme_1 = __importDefault(require("../box/theme"));
-var theme_2 = __importDefault(require("../button/theme"));
-var theme_3 = __importDefault(require("../heading/theme"));
-var theme_4 = __importDefault(require("../icon/theme"));
-var theme_5 = __importDefault(require("../input/theme"));
-var theme_6 = __importDefault(require("../label/theme"));
-var theme_7 = __importDefault(require("../link/theme"));
-var theme_8 = __importDefault(require("../list/theme"));
-var theme_9 = __importDefault(require("../p/theme"));
-var theme_10 = __importDefault(require("../skeleton/theme"));
-var theme_11 = __importDefault(require("../t/theme"));
-var theme_12 = __importDefault(require("../textarea/theme"));
-var theme_13 = __importDefault(require("../tile/theme"));
+var theme_1 = __importDefault(require("../avatar/theme"));
+var theme_2 = __importDefault(require("../box/theme"));
+var theme_3 = __importDefault(require("../button/theme"));
+var theme_4 = __importDefault(require("../checkbox/theme"));
+var theme_5 = __importDefault(require("../controlLabel/theme"));
+var theme_6 = __importDefault(require("../divider/theme"));
+var theme_7 = __importDefault(require("../heading/theme"));
+var theme_8 = __importDefault(require("../icon/theme"));
+var theme_9 = __importDefault(require("../input/theme"));
+var theme_10 = __importDefault(require("../label/theme"));
+var theme_11 = __importDefault(require("../link/theme"));
+var theme_12 = __importDefault(require("../list/theme"));
+var theme_13 = __importDefault(require("../p/theme"));
+var theme_14 = __importDefault(require("../skeleton/theme"));
+var theme_15 = __importDefault(require("../t/theme"));
+var theme_16 = __importDefault(require("../textarea/theme"));
+var theme_17 = __importDefault(require("../tile/theme"));
 exports.default = {
-    Box: theme_1.default,
-    Button: theme_2.default,
-    Heading: theme_3.default,
-    Icon: theme_4.default,
-    Input: theme_5.default,
-    Label: theme_6.default,
-    Link: theme_7.default,
-    List: theme_8.default,
-    P: theme_9.default,
-    Skeleton: theme_10.default,
-    T: theme_11.default,
-    Textarea: theme_12.default,
-    Tile: theme_13.default
+    Avatar: theme_1.default,
+    Box: theme_2.default,
+    Button: theme_3.default,
+    Checkbox: theme_4.default,
+    ControlLabel: theme_5.default,
+    Divider: theme_6.default,
+    Heading: theme_7.default,
+    Icon: theme_8.default,
+    Input: theme_9.default,
+    Label: theme_10.default,
+    Link: theme_11.default,
+    List: theme_12.default,
+    P: theme_13.default,
+    Skeleton: theme_14.default,
+    T: theme_15.default,
+    Textarea: theme_16.default,
+    Tile: theme_17.default
 };