@veracity/vui 0.0.14 → 0.0.15

package/list/index.js

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

package/list/list.d.ts

@@ -1,13 +1,13 @@
-import { ListProps } from './list.types';
-import ListHeading from './listHeading';
-import ListIcon from './listIcon';
-import ListItem from './listItem';
-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> & {
-    Heading: typeof ListHeading;
-    Icon: typeof ListIcon;
-    Item: typeof ListItem;
-};
-export default List;
+import { ListProps } from './list.types';
+import ListHeading from './listHeading';
+import ListIcon from './listIcon';
+import ListItem from './listItem';
+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> & {
+    Heading: typeof ListHeading;
+    Icon: typeof ListIcon;
+    Item: typeof ListItem;
+};
+export default List;

package/list/list.js

@@ -1,81 +1,81 @@
-"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.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 listHeading_1 = __importDefault(require("./listHeading"));
-var listIcon_1 = __importDefault(require("./listIcon"));
-var listItem_1 = __importDefault(require("./listItem"));
-var core_1 = require("../core");
-var system_1 = require("../system");
-var utils_1 = require("../utils");
-exports.ListBase = styled_components_1.default.ul.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
-exports.List = 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 = core_1.useStyleConfig('List', props);
-    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, isInteractive: isInteractive, size: size, styles: styles, variant: variant }); }, [
-        colorScheme,
-        isInteractive,
-        size,
-        variant
-    ]);
-    return (react_1.default.createElement(context_1.ListProvider, { value: context },
-        react_1.default.createElement(exports.ListBase, __assign({ className: utils_1.cs('vui-list', className), ref: ref }, styles.container, rest),
-            heading && react_1.default.createElement(listHeading_1.default, null, heading),
-            children)));
-});
-exports.List.displayName = 'List';
-exports.List.Heading = listHeading_1.default;
-exports.List.Icon = listIcon_1.default;
-exports.List.Item = listItem_1.default;
-exports.default = exports.List;
-var templateObject_1;
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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 listHeading_1 = __importDefault(require("./listHeading"));
+var listIcon_1 = __importDefault(require("./listIcon"));
+var listItem_1 = __importDefault(require("./listItem"));
+var core_1 = require("../core");
+var system_1 = require("../system");
+var utils_1 = require("../utils");
+exports.ListBase = styled_components_1.default.ul.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.List = 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 = core_1.useStyleConfig('List', props);
+    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, isInteractive: isInteractive, size: size, styles: styles, variant: variant }); }, [
+        colorScheme,
+        isInteractive,
+        size,
+        variant
+    ]);
+    return (react_1.default.createElement(context_1.ListProvider, { value: context },
+        react_1.default.createElement(exports.ListBase, __assign({ className: utils_1.cs('vui-list', className), ref: ref }, styles.container, rest),
+            heading && react_1.default.createElement(listHeading_1.default, null, heading),
+            children)));
+});
+exports.List.displayName = 'List';
+exports.List.Heading = listHeading_1.default;
+exports.List.Icon = listIcon_1.default;
+exports.List.Item = listItem_1.default;
+exports.default = exports.List;
+var templateObject_1;

package/list/list.types.d.ts

@@ -1,8 +1,8 @@
-import { SystemProps } from '../system';
-import { ThemingProps } from '../theme';
-export interface ListProps extends SystemProps, ThemingProps<'List'> {
-    colorScheme?: 'blue' | 'grey';
-    disabled?: boolean;
-    heading?: string;
-    isInteractive?: boolean;
-}
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface ListProps extends SystemProps, ThemingProps<'List'> {
+    colorScheme?: 'blue' | 'grey';
+    disabled?: boolean;
+    heading?: string;
+    isInteractive?: boolean;
+}

package/list/list.types.js

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

package/list/listHeading.d.ts

@@ -1,3 +1,3 @@
-import { ListItemProps } from './listItem.types';
-export declare const ListHeading: import("../core").VuiComponent<"li", ListItemProps>;
-export default ListHeading;
+import { ListItemProps } from './listItem.types';
+export declare const ListHeading: import("../core").VuiComponent<"li", ListItemProps>;
+export default ListHeading;

package/list/listHeading.js

@@ -1,30 +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.ListHeading = void 0;
-var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
-var listItem_1 = __importDefault(require("./listItem"));
-var core_1 = require("../core");
-exports.ListHeading = core_1.vui(function (props, ref) {
-    var _a;
-    var listProps = (_a = context_1.useList()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, listProps), props);
-    var styles = core_1.useStyleConfig('List', mergedProps);
-    return (react_1.default.createElement(listItem_1.default, __assign({ className: "vui-listHeading", color: "grey.80", fontSize: "sm", fontWeight: "medium", ref: ref, textTransform: "uppercase" }, styles.heading, props)));
-});
-exports.ListHeading.displayName = 'ListHeading';
-exports.default = exports.ListHeading;
+"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.ListHeading = void 0;
+var react_1 = __importDefault(require("react"));
+var context_1 = require("./context");
+var listItem_1 = __importDefault(require("./listItem"));
+var core_1 = require("../core");
+exports.ListHeading = core_1.vui(function (props, ref) {
+    var _a;
+    var listProps = (_a = context_1.useList()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, listProps), props);
+    var styles = core_1.useStyleConfig('List', mergedProps);
+    return (react_1.default.createElement(listItem_1.default, __assign({ className: "vui-listHeading", color: "grey.80", fontSize: "sm", fontWeight: "medium", ref: ref, textTransform: "uppercase" }, styles.heading, props)));
+});
+exports.ListHeading.displayName = 'ListHeading';
+exports.default = exports.ListHeading;

package/list/listIcon.d.ts

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

package/list/listIcon.js

@@ -1,30 +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.ListIcon = 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.ListIcon = core_1.vui(function (props, ref) {
-    var _a;
-    var listProps = (_a = context_1.useList()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, listProps), props);
-    var styles = core_1.useStyleConfig('List', mergedProps);
-    return react_1.default.createElement(icon_1.default, __assign({ ref: ref }, styles.icon, props));
-});
-exports.ListIcon.displayName = 'ListIcon';
-exports.default = exports.ListIcon;
+"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.ListIcon = 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.ListIcon = core_1.vui(function (props, ref) {
+    var _a;
+    var listProps = (_a = context_1.useList()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, listProps), props);
+    var styles = core_1.useStyleConfig('List', mergedProps);
+    return react_1.default.createElement(icon_1.default, __assign({ ref: ref }, styles.icon, props));
+});
+exports.ListIcon.displayName = 'ListIcon';
+exports.default = exports.ListIcon;

package/list/listItem.d.ts

@@ -1,5 +1,5 @@
-import { ListItemProps } from './listItem.types';
-import { SystemProps } from '../system';
-export declare const ListItemBase: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, SystemProps, never>;
-export declare const ListItem: import("../core").VuiComponent<"li", ListItemProps>;
-export default ListItem;
+import { ListItemProps } from './listItem.types';
+import { SystemProps } from '../system';
+export declare const ListItemBase: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const ListItem: import("../core").VuiComponent<"li", ListItemProps>;
+export default ListItem;

package/list/listItem.js

@@ -1,73 +1,73 @@
-"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.ListItem = exports.ListItemBase = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var context_1 = require("./context");
-var listIcon_1 = __importDefault(require("./listIcon"));
-var core_1 = require("../core");
-var system_1 = require("../system");
-var utils_1 = require("../utils");
-exports.ListItemBase = styled_components_1.default.li.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), system_1.system);
-exports.ListItem = core_1.vui(function (props, ref) {
-    var listProps = context_1.useList();
-    var mergedProps = __assign(__assign({}, listProps), props);
-    var children = mergedProps.children, center = mergedProps.center, centerH = mergedProps.centerH, _a = mergedProps.centerV, centerV = _a === void 0 ? true : _a, className = mergedProps.className, column = mergedProps.column, disabled = mergedProps.disabled, iconRight = mergedProps.iconRight, iconLeft = mergedProps.iconLeft, _b = mergedProps.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isSelected = mergedProps.isSelected, onClick = mergedProps.onClick, text = mergedProps.text, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconRight", "iconLeft", "isInteractive", "isSelected", "onClick", "text"]);
-    var styles = core_1.useStyleConfig('List', mergedProps);
-    var _c = styles.item, activeBg = _c.activeBg, hoverBg = _c.hoverBg, itemStyles = __rest(_c, ["activeBg", "hoverBg"]);
-    var alignItems = (center || (column ? centerH : centerV)) && 'center';
-    var flexDirection = column && 'column';
-    var justifyContent = (center || (column ? centerV : centerH)) && 'center';
-    var interactiveProps = !disabled && isInteractive
-        ? {
-            cursor: 'pointer',
-            focusVisibleRing: 2,
-            hoverBg: hoverBg,
-            activeBg: activeBg,
-            tabIndex: 0,
-            userSelect: 'none'
-        }
-        : {};
-    var aliasedProps = utils_1.filterUndefined({
-        alignItems: alignItems,
-        bg: isSelected ? hoverBg : undefined,
-        'data-disabled': disabled,
-        flexDirection: flexDirection,
-        justifyContent: justifyContent
-    });
-    return (react_1.default.createElement(exports.ListItemBase, __assign({ className: utils_1.cs('vui-listItem', className), onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest),
-        iconLeft && react_1.default.createElement(listIcon_1.default, { icon: iconLeft, mr: 1 }), children !== null && children !== void 0 ? children : text,
-        iconRight && react_1.default.createElement(listIcon_1.default, { icon: iconRight, ml: "auto" })));
-});
-exports.ListItem.displayName = 'ListItem';
-exports.default = exports.ListItem;
-var templateObject_1;
+"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.ListItem = exports.ListItemBase = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var context_1 = require("./context");
+var listIcon_1 = __importDefault(require("./listIcon"));
+var core_1 = require("../core");
+var system_1 = require("../system");
+var utils_1 = require("../utils");
+exports.ListItemBase = styled_components_1.default.li.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), system_1.system);
+exports.ListItem = core_1.vui(function (props, ref) {
+    var listProps = context_1.useList();
+    var mergedProps = __assign(__assign({}, listProps), props);
+    var children = mergedProps.children, center = mergedProps.center, centerH = mergedProps.centerH, _a = mergedProps.centerV, centerV = _a === void 0 ? true : _a, className = mergedProps.className, column = mergedProps.column, disabled = mergedProps.disabled, iconRight = mergedProps.iconRight, iconLeft = mergedProps.iconLeft, _b = mergedProps.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isSelected = mergedProps.isSelected, onClick = mergedProps.onClick, text = mergedProps.text, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconRight", "iconLeft", "isInteractive", "isSelected", "onClick", "text"]);
+    var styles = core_1.useStyleConfig('List', mergedProps);
+    var _c = styles.item, activeBg = _c.activeBg, hoverBg = _c.hoverBg, itemStyles = __rest(_c, ["activeBg", "hoverBg"]);
+    var alignItems = (center || (column ? centerH : centerV)) && 'center';
+    var flexDirection = column && 'column';
+    var justifyContent = (center || (column ? centerV : centerH)) && 'center';
+    var interactiveProps = !disabled && isInteractive
+        ? {
+            cursor: 'pointer',
+            focusVisibleRing: 2,
+            hoverBg: hoverBg,
+            activeBg: activeBg,
+            tabIndex: 0,
+            userSelect: 'none'
+        }
+        : {};
+    var aliasedProps = utils_1.filterUndefined({
+        alignItems: alignItems,
+        bg: isSelected ? hoverBg : undefined,
+        'data-disabled': disabled,
+        flexDirection: flexDirection,
+        justifyContent: justifyContent
+    });
+    return (react_1.default.createElement(exports.ListItemBase, __assign({ className: utils_1.cs('vui-listItem', className), mb: "1px", onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest),
+        iconLeft && react_1.default.createElement(listIcon_1.default, { icon: iconLeft, mr: 1 }), children !== null && children !== void 0 ? children : text,
+        iconRight && react_1.default.createElement(listIcon_1.default, { icon: iconRight, ml: "auto" })));
+});
+exports.ListItem.displayName = 'ListItem';
+exports.default = exports.ListItem;
+var templateObject_1;

package/list/listItem.types.d.ts

@@ -1,16 +1,16 @@
-import { IconProp } from '../icon';
-import { SystemProps } from '../system';
-import { ThemingProps } from '../theme';
-export interface ListItemProps extends SystemProps, ThemingProps<'List'> {
-    center?: boolean;
-    centerH?: boolean;
-    centerV?: boolean;
-    colorScheme?: 'blue' | 'grey';
-    column?: boolean;
-    disabled?: boolean;
-    iconLeft?: IconProp;
-    iconRight?: IconProp;
-    isInteractive?: boolean;
-    isSelected?: boolean;
-    text?: number | string;
-}
+import { IconProp } from '../icon';
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface ListItemProps extends SystemProps, ThemingProps<'List'> {
+    center?: boolean;
+    centerH?: boolean;
+    centerV?: boolean;
+    colorScheme?: 'blue' | 'grey';
+    column?: boolean;
+    disabled?: boolean;
+    iconLeft?: IconProp;
+    iconRight?: IconProp;
+    isInteractive?: boolean;
+    isSelected?: boolean;
+    text?: number | string;
+}

package/list/listItem.types.js

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