@veracity/vui 0.2.0 → 0.2.2

package/heading/heading.js

@@ -35,18 +35,18 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.HeadingBase = styled_components_1.default.h2.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
-exports.Heading = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "children", "className", "decoration", "text", "weight"]);
-    var styles = core_1.useStyleConfig('Heading', props);
+exports.HeadingBase = styled_components_1.default.h2.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.Heading = (0, core_1.vui)(function (props, ref) {
+    var _a = (0, core_1.omitThemingProps)(props), align = _a.align, casing = _a.casing, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "children", "className", "decoration", "text", "weight"]);
+    var styles = (0, core_1.useStyleConfig)('Heading', props);
     var hClassName = props.size ? "vui-" + props.size : '';
-    var aliasedProps = utils_1.filterUndefined({
+    var aliasedProps = (0, utils_1.filterUndefined)({
         fontWeight: weight,
         textAlign: align,
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.HeadingBase, __assign({ className: utils_1.cs('vui-heading', hClassName, className), fontWeight: "demi", ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
+    return (react_1.default.createElement(exports.HeadingBase, __assign({ className: (0, utils_1.cs)('vui-heading', hClassName, className), fontWeight: "demi", ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.Heading.displayName = 'Heading';
 exports.default = exports.Heading;

package/heading/headings.js

@@ -18,9 +18,9 @@ exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = vo
 var react_1 = __importDefault(require("react"));
 var heading_1 = __importDefault(require("./heading"));
 var core_1 = require("../core");
-exports.H1 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h1" }, props)); });
-exports.H2 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h2" }, props)); });
-exports.H3 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h3" }, props)); });
-exports.H4 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h4" }, props)); });
-exports.H5 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h5" }, props)); });
-exports.H6 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h6" }, props)); });
+exports.H1 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h1" }, props)); });
+exports.H2 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h2" }, props)); });
+exports.H3 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h3" }, props)); });
+exports.H4 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h4" }, props)); });
+exports.H5 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h5" }, props)); });
+exports.H6 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h6" }, props)); });

package/icon/icon.js

@@ -31,18 +31,18 @@ var helpers_1 = require("./helpers");
 var core_1 = require("../core");
 var svg_1 = require("../svg");
 var utils_1 = require("../utils");
-exports.Icon = core_1.vui(function (props, ref) {
+exports.Icon = (0, core_1.vui)(function (props, ref) {
     /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-    var _a = core_1.omitThemingProps(props), className = _a.className, icon = _a.icon, _b = _a.name, name = _b === void 0 ? props.icon : _b, rotate = _a.rotate, scale = _a.scale, rest = __rest(_a, ["className", "icon", "name", "rotate", "scale"]);
-    var styles = core_1.useStyleConfig('Icon', props);
-    var _c = helpers_1.getIconDetails(name), customIcon = _c.customIcon, src = _c.src;
+    var _a = (0, core_1.omitThemingProps)(props), className = _a.className, icon = _a.icon, _b = _a.name, name = _b === void 0 ? props.icon : _b, rotate = _a.rotate, scale = _a.scale, rest = __rest(_a, ["className", "icon", "name", "rotate", "scale"]);
+    var styles = (0, core_1.useStyleConfig)('Icon', props);
+    var _c = (0, helpers_1.getIconDetails)(name), customIcon = _c.customIcon, src = _c.src;
     var scaledSize = scale ? 16 * scale : undefined;
-    var aliasedProps = utils_1.filterUndefined({
+    var aliasedProps = (0, utils_1.filterUndefined)({
         h: scaledSize,
         transform: rotate !== undefined ? "rotate(" + rotate + "deg)" : undefined,
         w: scaledSize
     });
-    return (react_1.default.createElement(svg_1.Svg, __assign({ className: utils_1.cs('vui-icon', className), display: "inline-flex", flexShrink: 0, ref: ref, src: src }, styles, customIcon === null || customIcon === void 0 ? void 0 : customIcon.svgProps, aliasedProps, rest), customIcon === null || customIcon === void 0 ? void 0 : customIcon.d.map(function (d, i) { return (react_1.default.createElement("path", __assign({ d: d, fill: "currentColor", key: i }, customIcon.pathProps[i]))); })));
+    return (react_1.default.createElement(svg_1.Svg, __assign({ className: (0, utils_1.cs)('vui-icon', className), display: "inline-flex", flexShrink: 0, ref: ref, src: src }, styles, customIcon === null || customIcon === void 0 ? void 0 : customIcon.svgProps, aliasedProps, rest), customIcon === null || customIcon === void 0 ? void 0 : customIcon.d.map(function (d, i) { return (react_1.default.createElement("path", __assign({ d: d, fill: "currentColor", key: i }, customIcon.pathProps[i]))); })));
 });
 exports.Icon.displayName = 'Icon';
 exports.default = exports.Icon;

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/library.js

@@ -15,10 +15,14 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var consts_1 = require("./consts");
@@ -47,7 +51,7 @@ var Library = /** @class */ (function () {
             return _this.cache.has(name);
         };
         this.init = function () {
-            _this.add.apply(_this, __spreadArray([], __read(Object.values(consts_1.defaultIcons))));
+            _this.add.apply(_this, __spreadArray([], __read(Object.values(consts_1.defaultIcons)), false));
         };
         this.reset = function () {
             _this.cache.clear();

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/image/image.js

@@ -29,10 +29,10 @@ exports.Image = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-exports.Image = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
-    var styles = core_1.useStyleConfig('Image', props);
-    return react_1.default.createElement(core_1.v.img, __assign({ className: utils_1.cs('vui-image', className), ref: ref }, styles, rest));
+exports.Image = (0, core_1.vui)(function (props, ref) {
+    var _a = (0, core_1.omitThemingProps)(props), className = _a.className, rest = __rest(_a, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Image', props);
+    return react_1.default.createElement(core_1.v.img, __assign({ className: (0, utils_1.cs)('vui-image', className), ref: ref }, styles, rest));
 });
 exports.Image.displayName = 'Image';
 exports.default = exports.Image;

package/input/context.js

@@ -18,6 +18,6 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInput = exports.InputProvider = void 0;
 var core_1 = require("../core");
-var _a = __read(core_1.createContext({ isOptional: true }), 2), InputProvider = _a[0], useInput = _a[1];
+var _a = __read((0, core_1.createContext)({ isOptional: true }), 2), InputProvider = _a[0], useInput = _a[1];
 exports.InputProvider = InputProvider;
 exports.useInput = useInput;

package/input/input.js

@@ -76,35 +76,30 @@ var core_1 = require("../core");
 var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-exports.InputBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
-exports.Input = core_1.vui(function (props, ref) {
+exports.InputBase = styled_components_1.default.div.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
+exports.Input = (0, core_1.vui)(function (props, ref) {
     var _a, _b, _c, _d;
-    var _e = __read(react_1.useState(helpers_1.getInitialCount(props)), 2), count = _e[0], setCount = _e[1];
+    var _e = __read((0, react_1.useState)((0, helpers_1.getInitialCount)(props)), 2), count = _e[0], setCount = _e[1];
     var autoComplete = props.autoComplete, autoFocus = props.autoFocus, children = props.children, className = props.className, colorScheme = props.colorScheme, defaultValue = props.defaultValue, disabled = props.disabled, iconLeft = props.iconLeft, iconRight = props.iconRight, id = props.id, input = props.input, inputProps = props.inputProps, inputRef = props.inputRef, isInvalid = props.isInvalid, itemLeft = props.itemLeft, itemRight = props.itemRight, max = props.max, maxLength = props.maxLength, min = props.min, name = props.name, onBlur = props.onBlur, onChangeProp = props.onChange, onFocus = props.onFocus, pattern = props.pattern, placeholder = props.placeholder, readOnly = props.readOnly, required = props.required, showCount = props.showCount, size = props.size, _f = props.state, state = _f === void 0 ? '' : _f, stateMapping = props.stateMapping, step = props.step, _g = props.type, type = _g === void 0 ? 'text' : _g, value = props.value, variant = props.variant, rest = __rest(props, ["autoComplete", "autoFocus", "children", "className", "colorScheme", "defaultValue", "disabled", "iconLeft", "iconRight", "id", "input", "inputProps", "inputRef", "isInvalid", "itemLeft", "itemRight", "max", "maxLength", "min", "name", "onBlur", "onChange", "onFocus", "pattern", "placeholder", "readOnly", "required", "showCount", "size", "state", "stateMapping", "step", "type", "value", "variant"]);
     var states = __assign(__assign({}, consts_1.inputStateMapping), stateMapping);
-    var computedColorScheme = utils_1.filterUndefined({
+    var computedColorScheme = (0, utils_1.filterUndefined)({
         colorScheme: (_a = colorScheme !== null && colorScheme !== void 0 ? colorScheme : (isInvalid ? 'red' : undefined)) !== null && _a !== void 0 ? _a : (_b = states[state]) === null || _b === void 0 ? void 0 : _b.colorScheme
     });
-    var styles = core_1.useStyleConfig('Input', __assign(__assign({}, computedColorScheme), props));
-    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, size: size, variant: variant }); }, [
-        colorScheme,
-        disabled,
-        size,
-        variant
-    ]);
+    var styles = (0, core_1.useStyleConfig)('Input', __assign(__assign({}, computedColorScheme), 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]);
     function onChange(e) {
         setCount(e.target.value.length);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
     }
-    var aliasedProps = utils_1.filterUndefined({
-        bg: readOnly ? 'grey.20' : undefined,
+    var aliasedProps = (0, utils_1.filterUndefined)({
+        bg: readOnly ? 'grey.10' : undefined,
         focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
         focusWithinRingColor: readOnly ? 'transparent' : undefined
     });
     return (react_1.default.createElement(context_1.InputProvider, { value: context },
-        react_1.default.createElement(exports.InputBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-input', disabled && 'disabled', className), ref: ref, transitionDuration: "fast" }, styles.container, aliasedProps, rest),
+        react_1.default.createElement(exports.InputBase, __assign({ borderRadius: "md", className: (0, utils_1.cs)('vui-input', disabled && 'disabled', className), ref: ref, transitionDuration: "fast" }, styles.container, aliasedProps, rest),
             itemLeft,
-            utils_1.isString(iconLeft) ? react_1.default.createElement(inputIcon_1.default, { ml: 1, name: iconLeft }) : iconLeft, (_c = children !== null && children !== void 0 ? children : input) !== null && _c !== void 0 ? _c : (react_1.default.createElement(inputInput_1.default, __assign({ ref: inputRef }, {
+            (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(inputIcon_1.default, { ml: 1, name: iconLeft }) : iconLeft, (_c = children !== null && children !== void 0 ? children : input) !== null && _c !== void 0 ? _c : (react_1.default.createElement(inputInput_1.default, __assign({ ref: inputRef }, {
             autoComplete: autoComplete,
             autoFocus: autoFocus,
             defaultValue: defaultValue,
@@ -125,7 +120,7 @@ exports.Input = core_1.vui(function (props, ref) {
             type: type,
             value: value
         }, inputProps))),
-            utils_1.isString(iconRight) ? react_1.default.createElement(inputIcon_1.default, { mr: 1, name: iconRight }) : iconRight,
+            (0, utils_1.isString)(iconRight) ? react_1.default.createElement(inputIcon_1.default, { mr: 1, name: iconRight }) : iconRight,
             itemRight,
             state && react_1.default.createElement(inputIcon_1.default, __assign({ mr: 1 }, (_d = states[state]) === null || _d === void 0 ? void 0 : _d.iconProps)),
             showCount && (react_1.default.createElement(t_1.default, { color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },

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/input/inputIcon.js

@@ -19,10 +19,10 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
-exports.InputIcon = core_1.vui(function (props, ref) {
-    var inputProps = context_1.useInput();
+exports.InputIcon = (0, core_1.vui)(function (props, ref) {
+    var inputProps = (0, context_1.useInput)();
     var mergedProps = __assign(__assign({}, inputProps), props);
-    var styles = core_1.useStyleConfig('Input', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Input', mergedProps);
     var color = !mergedProps.disabled ? 'blue.80' : 'grey.50';
     return react_1.default.createElement(icon_1.default, __assign({ className: "vui-inputIcon", color: color, ref: ref }, styles.icon, props));
 });

package/input/inputInput.js

@@ -24,11 +24,11 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var system_1 = require("../system");
-exports.InputInputBase = styled_components_1.default.input.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tfont-size: inherit;\n\tmin-width: 0;\n\toutline: none;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tfont-size: inherit;\n\tmin-width: 0;\n\toutline: none;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
-exports.InputInput = core_1.vui(function (props, ref) {
-    var inputProps = context_1.useInput();
+exports.InputInputBase = styled_components_1.default.input.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tfont-size: inherit;\n\tmin-width: 0;\n\toutline: none;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tfont-size: inherit;\n\tmin-width: 0;\n\toutline: none;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
+exports.InputInput = (0, core_1.vui)(function (props, ref) {
+    var inputProps = (0, context_1.useInput)();
     var mergedProps = __assign(__assign({}, inputProps), props);
-    var styles = core_1.useStyleConfig('Input', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Input', mergedProps);
     return (react_1.default.createElement(exports.InputInputBase, __assign({ borderRadius: "md", className: "vui-inputInput", placeholderColor: "grey.60", px: 1, ref: ref }, styles.input, props)));
 });
 exports.InputInput.displayName = 'InputInput';

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,24 +49,33 @@ 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(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"])), system_1.system);
-exports.Link = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), children = _a.children, className = _a.className, decoration = _a.decoration, _b = _a.hoverDecoration, hoverDecoration = _b === void 0 ? 'underline' : _b, isExternal = _a.isExternal, isUnderlined = _a.isUnderlined, text = _a.text, weight = _a.weight, rest = __rest(_a, ["children", "className", "decoration", "hoverDecoration", "isExternal", "isUnderlined", "text", "weight"]);
-    var styles = core_1.useStyleConfig('Link', props);
-    var aliasedProps = utils_1.filterUndefined({
+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 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,
         rel: isExternal ? 'noopener' : undefined,
         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: 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/context.js

@@ -18,6 +18,6 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useList = exports.ListProvider = void 0;
 var core_1 = require("../core");
-var _a = __read(core_1.createContext({ isOptional: true }), 2), ListProvider = _a[0], useList = _a[1];
+var _a = __read((0, core_1.createContext)({ isOptional: true }), 2), ListProvider = _a[0], useList = _a[1];
 exports.ListProvider = ListProvider;
 exports.useList = useList;

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';