@veracity/vui 0.2.1 → 0.2.2

package/core/types/index.js

@@ -12,6 +12,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./component"), exports);
 __exportStar(require("./context"), exports);
-__exportStar(require("./events"), exports);
-__exportStar(require("./styled"), exports);
 __exportStar(require("./themeGet"), exports);

package/core/utils.d.ts

@@ -1,9 +1,9 @@
 import { StyleGenerator } from '@xstyled/styled-components';
 import React from 'react';
 import { StyledProps } from 'styled-components';
-import { CreateContextOptions, CreateContextReturn, PropsOf, ThemeGet, VuiComponent, VuiComponentConfig } from './types';
+import { CreateContextOptions, CreateContextReturn, ThemeGet, VuiComponent, VuiComponentConfig } from './types';
 import { Screen, ThemingProps, VuiTheme, VuiThemeExtensions } from '../theme';
-import { AnyNumber, AnyString, Dict } from '../utils';
+import { AnyNumber, AnyString, Dict, PropsOf } from '../utils';
 /** Generic function to create new Context and context access hook. */
 export declare function createContext<ContextType>(options?: CreateContextOptions): CreateContextReturn<ContextType>;
 /** Merges provided theme extensions and overrides with default VUI theme */

package/core/utils.js

@@ -157,22 +157,23 @@ function useStyleConfig(component, props) {
     var _a;
     if (props === void 0) { props = {}; }
     var theme = useTheme();
-    var _b = (_a = theme === null || theme === void 0 ? void 0 : theme.components[component]) !== null && _a !== void 0 ? _a : {}, defaultProps = _b.defaultProps, _c = _b.parts, parts = _c === void 0 ? [] : _c, sizes = _b.sizes, variants = _b.variants;
+    var _b = (_a = theme === null || theme === void 0 ? void 0 : theme.components[component]) !== null && _a !== void 0 ? _a : {}, baseStyle = _b.baseStyle, defaultProps = _b.defaultProps, _c = _b.parts, parts = _c === void 0 ? [] : _c, sizes = _b.sizes, variants = _b.variants;
     var mergedProps = __assign(__assign({}, defaultProps), props);
     var colorScheme = mergedProps.colorScheme, size = mergedProps.size, variant = mergedProps.variant;
     return (0, react_1.useMemo)(function () {
-        var _a, _b;
-        var sizeStyles = (_a = (0, utils_1.runIfFn)(sizes === null || sizes === void 0 ? void 0 : sizes[size], mergedProps)) !== null && _a !== void 0 ? _a : {};
-        var variantStyles = (_b = (0, utils_1.runIfFn)(variants === null || variants === void 0 ? void 0 : variants[variant], mergedProps)) !== null && _b !== void 0 ? _b : {};
+        var _a, _b, _c;
+        var baseStyles = (_a = (0, utils_1.runIfFn)(baseStyle, mergedProps)) !== null && _a !== void 0 ? _a : {};
+        var sizeStyles = (_b = (0, utils_1.runIfFn)(sizes === null || sizes === void 0 ? void 0 : sizes[size], mergedProps)) !== null && _b !== void 0 ? _b : {};
+        var variantStyles = (_c = (0, utils_1.runIfFn)(variants === null || variants === void 0 ? void 0 : variants[variant], mergedProps)) !== null && _c !== void 0 ? _c : {};
         var styles = {};
         if (parts.length > 0) {
             parts.forEach(function (part) {
-                var _a, _b;
-                styles[part] = (0, utils_1.merge)((_a = sizeStyles[part]) !== null && _a !== void 0 ? _a : {}, (_b = variantStyles[part]) !== null && _b !== void 0 ? _b : {});
+                var _a, _b, _c;
+                styles[part] = (0, utils_1.merge)((_a = baseStyles[part]) !== null && _a !== void 0 ? _a : {}, (_b = sizeStyles[part]) !== null && _b !== void 0 ? _b : {}, (_c = variantStyles[part]) !== null && _c !== void 0 ? _c : {});
             });
         }
         else {
-            styles = (0, utils_1.merge)(sizeStyles, variantStyles);
+            styles = (0, utils_1.merge)(baseStyles, sizeStyles, variantStyles);
         }
         return styles;
     }, [colorScheme, size, variant]);

package/icon/icon.types.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { PropsOf } from '../core';
 import { VuiIcon } from '../icons';
 import Svg, { SvgProps } from '../svg';
 import { ThemingProps } from '../theme';
-import { AnyString } from '../utils';
+import { AnyString, PropsOf } from '../utils';
 export interface GetIconDetailsResult {
     customIcon?: {
         d: string[];

package/icons/types.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BaseIcon } from './baseIcons/types';
-import { PropsOf } from '../core';
 import Svg from '../svg';
+import { PropsOf } from '../utils';
 export interface IconDefinition {
     details: IconDetails;
     name: string;

package/input/input.types.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../core';
 import { IconProp, IconProps } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-import { AnyElement } from '../utils';
+import { AnyElement, ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils';
 export interface InputInputProps extends PropsOf<'input', SystemProps> {
 }
 export interface InputProps extends SystemProps, ThemingProps<'Input'> {

package/link/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Dict } from '../utils';
+declare const LinkProvider: import("react").Provider<Dict<any>>, useLink: () => Dict<any>;
+export { LinkProvider, useLink };

package/link/context.js

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

package/link/index.d.ts

@@ -1,3 +1,5 @@
 export * from './link';
 export * from './link.types';
+export * from './linkIcon';
+export * from './linkText';
 export { default } from './link';

package/link/index.js

@@ -16,5 +16,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./link"), exports);
 __exportStar(require("./link.types"), exports);
+__exportStar(require("./linkIcon"), exports);
+__exportStar(require("./linkText"), exports);
 var link_1 = require("./link");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(link_1).default; } });

package/link/link.d.ts

@@ -1,5 +1,11 @@
 import { LinkProps } from './link.types';
+import LinkIcon from './linkIcon';
+import LinkText from './linkText';
+import { VuiComponent } from '../core';
 import { SystemProps } from '../system';
 export declare const LinkBase: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, SystemProps, never>;
-export declare const Link: import("../core").VuiComponent<"a", LinkProps>;
+export declare const Link: VuiComponent<"a", LinkProps> & {
+    Icon: typeof LinkIcon;
+    Text: typeof LinkText;
+};
 export default Link;

package/link/link.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)
@@ -30,15 +49,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = exports.LinkBase = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var context_1 = require("./context");
+var linkIcon_1 = __importDefault(require("./linkIcon"));
+var linkText_1 = __importDefault(require("./linkText"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
 exports.LinkBase = styled_components_1.default.a.withConfig((0, 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 = (0, core_1.vui)(function (props, ref) {
-    var _a = (0, 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 children = props.children, className = props.className, colorScheme = props.colorScheme, decoration = props.decoration, disabled = props.disabled, _a = props.hoverDecoration, hoverDecoration = _a === void 0 ? 'underline' : _a, iconLeft = props.iconLeft, iconRight = props.iconRight, isExternal = props.isExternal, isUnderlined = props.isUnderlined, size = props.size, text = props.text, variant = props.variant, weight = props.weight, rest = __rest(props, ["children", "className", "colorScheme", "decoration", "disabled", "hoverDecoration", "iconLeft", "iconRight", "isExternal", "isUnderlined", "size", "text", "variant", "weight"]);
     var styles = (0, core_1.useStyleConfig)('Link', props);
+    var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, disabled: disabled, size: size, variant: variant }); }, [colorScheme, disabled, size, variant]);
     var aliasedProps = (0, utils_1.filterUndefined)({
         fontWeight: weight,
         hoverTextDecoration: hoverDecoration,
@@ -46,8 +69,13 @@ exports.Link = (0, core_1.vui)(function (props, ref) {
         target: isExternal ? '_blank' : undefined,
         textDecoration: decoration !== null && decoration !== void 0 ? decoration : (isUnderlined ? 'underline' : undefined)
     });
-    return (react_1.default.createElement(exports.LinkBase, __assign({ borderRadius: "sm", className: (0, utils_1.cs)('vui-link', className), focusRing: 2, ref: ref, transitionDuration: "instant" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
+    return (react_1.default.createElement(context_1.LinkProvider, { value: context },
+        react_1.default.createElement(exports.LinkBase, __assign({ borderRadius: "sm", className: (0, utils_1.cs)('vui-link', className), focusRing: 2, ref: ref, transitionDuration: "instant" }, styles.container, aliasedProps, rest),
+            (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(linkIcon_1.default, { mr: 1, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : ((0, utils_1.isReactText)(text) ? react_1.default.createElement(linkText_1.default, { text: text }) : text),
+            (0, utils_1.isString)(iconRight) ? react_1.default.createElement(linkIcon_1.default, { ml: 1, name: iconRight }) : iconRight)));
 });
 exports.Link.displayName = 'Link';
+exports.Link.Icon = linkIcon_1.default;
+exports.Link.Text = linkText_1.default;
 exports.default = exports.Link;
 var templateObject_1;

package/link/link.types.d.ts

@@ -1,9 +1,14 @@
+import { IconProp } from '../icon';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
+import { AnyElement } from '../utils';
 export interface LinkProps extends SystemProps, ThemingProps<'Link'> {
     colorScheme?: 'blue' | 'white';
     decoration?: TypographyProps['textDecoration'];
+    disabled?: boolean;
     hoverDecoration?: TypographyProps['textDecoration'];
+    iconLeft?: IconProp | AnyElement;
+    iconRight?: IconProp | AnyElement;
     isExternal?: boolean;
     isUnderlined?: boolean;
     text?: number | string;

package/link/linkIcon.d.ts

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

package/link/linkIcon.js

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

package/link/linkText.d.ts

@@ -0,0 +1,3 @@
+import { TProps } from '../t';
+export declare const LinkText: import("../core").VuiComponent<"span", TProps>;
+export default LinkText;

package/link/linkText.js

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

package/link/theme.d.ts

@@ -1,11 +1,15 @@
 import { Dict } from '../utils';
 declare function variantDefault(props: Dict): {
-    color: string;
-    hoverColor: string;
+    container: {
+        color: string;
+        hoverColor: string;
+    };
 };
 declare function variantLight(props: Dict): {
-    color: string;
-    hoverColor: string;
+    container: {
+        color: string;
+        hoverColor: string;
+    };
 };
 declare const _default: {
     defaultProps: {
@@ -13,18 +17,31 @@ declare const _default: {
         size: string;
         variant: string;
     };
+    parts: string[];
     sizes: {
-        xs: {
-            fontSize: string;
-        };
         sm: {
-            fontSize: string;
+            container: {
+                fontSize: string;
+            };
+            icon: {
+                size: string;
+            };
         };
         md: {
-            fontSize: string;
+            container: {
+                fontSize: string;
+            };
+            icon: {
+                size: string;
+            };
         };
         lg: {
-            fontSize: string;
+            container: {
+                fontSize: string;
+            };
+            icon: {
+                size: string;
+            };
         };
     };
     variants: {

package/link/theme.js

@@ -2,41 +2,54 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 function variantDefault(props) {
     var c = props.colorScheme;
-    var styles = {
+    var container = {
         color: c + ".80",
         hoverColor: c + ".60"
     };
     if (c === 'white') {
-        styles.color = 'white';
-        styles.hoverColor = 'white';
+        container.color = 'white';
+        container.hoverColor = 'white';
     }
-    return styles;
+    return { container: container };
 }
 function variantLight(props) {
     var c = props.colorScheme;
-    var styles = {
+    var container = {
         color: c + ".60",
         hoverColor: c + ".40"
     };
-    return styles;
+    return { container: container };
 }
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
     variant: 'default'
 };
+var parts = ['container', 'icon', 'text'];
 var sizes = {
-    xs: {
-        fontSize: 'xs'
-    },
     sm: {
-        fontSize: 'sm'
+        container: {
+            fontSize: 'sm'
+        },
+        icon: {
+            size: 'xs'
+        }
     },
     md: {
-        fontSize: 'md'
+        container: {
+            fontSize: 'md'
+        },
+        icon: {
+            size: 'xs'
+        }
     },
     lg: {
-        fontSize: 'lg'
+        container: {
+            fontSize: 'lg'
+        },
+        icon: {
+            size: 'sm'
+        }
     }
 };
 var variants = {
@@ -45,6 +58,7 @@ var variants = {
 };
 exports.default = {
     defaultProps: defaultProps,
+    parts: parts,
     sizes: sizes,
     variants: variants
 };

package/list/index.d.ts

@@ -1,6 +1,7 @@
 export * from './context';
 export * from './list';
 export * from './list.types';
+export * from './listDivider';
 export * from './listHeading';
 export * from './listIcon';
 export * from './listItem';

package/list/index.js

@@ -17,6 +17,7 @@ exports.default = void 0;
 __exportStar(require("./context"), exports);
 __exportStar(require("./list"), exports);
 __exportStar(require("./list.types"), exports);
+__exportStar(require("./listDivider"), exports);
 __exportStar(require("./listHeading"), exports);
 __exportStar(require("./listIcon"), exports);
 __exportStar(require("./listItem"), exports);

package/list/list.d.ts

@@ -1,4 +1,5 @@
 import { ListProps } from './list.types';
+import ListDivider from './listDivider';
 import ListHeading from './listHeading';
 import ListIcon from './listIcon';
 import ListItem from './listItem';
@@ -7,6 +8,7 @@ import { VuiComponent } from '../core';
 import { SystemProps } from '../system';
 export declare const ListBase: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const List: VuiComponent<"ul", ListProps> & {
+    Divider: typeof ListDivider;
     Heading: typeof ListHeading;
     Icon: typeof ListIcon;
     Item: typeof ListItem;

package/list/list.js

@@ -52,6 +52,7 @@ exports.List = exports.ListBase = void 0;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
+var listDivider_1 = __importDefault(require("./listDivider"));
 var listHeading_1 = __importDefault(require("./listHeading"));
 var listIcon_1 = __importDefault(require("./listIcon"));
 var listItem_1 = __importDefault(require("./listItem"));
@@ -63,13 +64,14 @@ exports.ListBase = styled_components_1.default.ul.withConfig((0, core_1.forwardP
 exports.List = (0, core_1.vui)(function (props, ref) {
     var children = props.children, className = props.className, colorScheme = props.colorScheme, heading = props.heading, isInteractive = props.isInteractive, size = props.size, variant = props.variant, rest = __rest(props, ["children", "className", "colorScheme", "heading", "isInteractive", "size", "variant"]);
     var styles = (0, core_1.useStyleConfig)('List', props);
-    var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, isInteractive: isInteractive, size: size, styles: styles, variant: variant }); }, [colorScheme, isInteractive, size, variant]);
+    var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, isInteractive: isInteractive, size: size, variant: variant }); }, [colorScheme, isInteractive, size, variant]);
     return (react_1.default.createElement(context_1.ListProvider, { value: context },
         react_1.default.createElement(exports.ListBase, __assign({ className: (0, utils_1.cs)('vui-list', className), ref: ref }, styles.container, rest),
             (0, utils_1.isReactText)(heading) ? react_1.default.createElement(listHeading_1.default, { text: heading }) : heading,
             children)));
 });
 exports.List.displayName = 'List';
+exports.List.Divider = listDivider_1.default;
 exports.List.Heading = listHeading_1.default;
 exports.List.Icon = listIcon_1.default;
 exports.List.Item = listItem_1.default;

package/list/listDivider.d.ts

@@ -0,0 +1,3 @@
+import { DividerProps } from '../divider';
+export declare const ListDivider: import("../core").VuiComponent<"hr", DividerProps>;
+export default ListDivider;

package/list/listDivider.js

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

package/list/listHeading.js

@@ -24,7 +24,7 @@ exports.ListHeading = (0, core_1.vui)(function (props, ref) {
     var listProps = (_a = (0, context_1.useList)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, listProps), props);
     var styles = (0, core_1.useStyleConfig)('List', mergedProps);
-    return (react_1.default.createElement(t_1.T, __assign({ className: "vui-listHeading", color: "grey.80", display: "inline-block", fontSize: "sm", px: 1, py: 0.5, ref: ref, textTransform: "uppercase", weight: "medium" }, styles.heading, props)));
+    return (react_1.default.createElement(t_1.T, __assign({ className: "vui-listHeading", display: "inline-block", p: 1, ref: ref, weight: "demi" }, styles.heading, props)));
 });
 exports.ListHeading.displayName = 'ListHeading';
 exports.default = exports.ListHeading;

package/list/theme.d.ts

@@ -1,10 +1,6 @@
 import { Dict } from '../utils';
 declare function variantDefault(props: Dict): {
-    container: {};
-    heading: {};
-    icon: {};
     item: Dict<any>;
-    text: {};
 };
 declare const _default: {
     defaultProps: {
@@ -15,8 +11,6 @@ declare const _default: {
     parts: string[];
     sizes: {
         sm: {
-            container: {};
-            heading: {};
             icon: {
                 size: string;
             };
@@ -24,11 +18,8 @@ declare const _default: {
                 fontSize: string;
                 h: number;
             };
-            text: {};
         };
         md: {
-            container: {};
-            heading: {};
             icon: {
                 size: string;
             };
@@ -36,11 +27,8 @@ declare const _default: {
                 fontSize: string;
                 h: number;
             };
-            text: {};
         };
         lg: {
-            container: {};
-            heading: {};
             item: {
                 fontSize: string;
                 h: number;
@@ -48,11 +36,8 @@ declare const _default: {
             icon: {
                 size: string;
             };
-            text: {};
         };
         xl: {
-            container: {};
-            heading: {};
             item: {
                 fontSize: string;
                 h: number;
@@ -60,7 +45,6 @@ declare const _default: {
             icon: {
                 scale: number;
             };
-            text: {};
         };
     };
     variants: {