@veracity/vui 0.0.7 → 0.0.9

package/icons/baseIcons/fal/falUserTimes.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fal/falUsers.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fal/falUsersClass.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fal/falWater.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fal/falWind.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fal/falWindTurbine.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fal/falWrench.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fas/fasCaretDown.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fas/fasCaretLeft.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fas/fasCaretRight.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fas/fasCaretUp.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fas/fasDiamond.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fas/fasFolder.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fas/fasMapMarkerAlt.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fas/fasMapMarkerExclamation.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fas/fasQuoteLeft.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fas/fasQuoteRight.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fas/fasSolarPanel.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fas/fasSort.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fas/fasStar.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fas/fasWindTurbine.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/types.d.ts

@@ -0,0 +1 @@
+export declare type BaseIcon = 'cuiCheckboxIndeterminate' | 'cuiCheckboxSelected' | 'cuiCheckboxUnselected' | 'cuiRadioSelected' | 'cuiRadioUnselected' | 'culCovid' | 'culDeepSearch' | 'culDotsMenu' | 'culGlobePlus' | 'culListDense' | 'culMapMarkerStar' | 'culPlusThin' | 'culScreenshot' | 'culScreenshotAlt' | 'culShortcut' | 'culTimesThin' | 'culTransformer' | 'culUserTransfer' | 'culVessel' | 'culVesselGroup' | 'cusCheckboxSelected' | 'cusDotFull' | 'cusDotFullAlt' | 'cusDotsMenu' | 'cusRadio' | 'cusSquareMinus' | 'cusTransformer' | 'cusVessel' | 'fabApplePay' | 'fabBluetooth' | 'fabBtc' | 'fabCcAmazonPay' | 'fabCcAmex' | 'fabCcApplePay' | 'fabCcDinersClub' | 'fabCcMastercard' | 'fabCcPaypal' | 'fabCcVisa' | 'fabDhl' | 'fabEbay' | 'fabFacebook' | 'fabFedex' | 'fabFirefox' | 'fabGoogle' | 'fabGoogleDrive' | 'fabLinkedinIn' | 'fabMedium' | 'fabOsi' | 'fabSlack' | 'fabTwitter' | 'fabUps' | 'falAddressBook' | 'falAddressCard' | 'falAnalytics' | 'falAngleDoubleDown' | 'falAngleDoubleLeft' | 'falAngleDoubleRight' | 'falAngleDoubleUp' | 'falAngleDown' | 'falAngleLeft' | 'falAngleRight' | 'falAngleUp' | 'falArrowAltDown' | 'falArrowAltLeft' | 'falArrowAltRight' | 'falArrowAltUp' | 'falArrowCircleDown' | 'falArrowCircleLeft' | 'falArrowCircleRight' | 'falArrowCircleUp' | 'falArrowDown' | 'falArrowFromBottom' | 'falArrowFromLeft' | 'falArrowFromRight' | 'falArrowFromTop' | 'falArrowLeft' | 'falArrowRight' | 'falArrowToBottom' | 'falArrowToLeft' | 'falArrowToRight' | 'falArrowToTop' | 'falArrowUp' | 'falArrows' | 'falAward' | 'falBan' | 'falBell' | 'falBookOpen' | 'falBroadcastTower' | 'falBuilding' | 'falBullseye' | 'falCalendar' | 'falCalendarAlt' | 'falCamera' | 'falCaretDown' | 'falCaretLeft' | 'falCaretRight' | 'falCaretUp' | 'falCauldron' | 'falChartArea' | 'falChartBar' | 'falChartLineDown' | 'falChartLine' | 'falChartNetwork' | 'falChartPie' | 'falChartPieAlt' | 'falChartScatter' | 'falCheckCircle' | 'falCheckSquare' | 'falCheck' | 'falChevronCircleDown' | 'falChevronCircleLeft' | 'falChevronCircleRight' | 'falChevronCircleUp' | 'falChevronDoubleDown' | 'falChevronDoubleLeft' | 'falChevronDoubleRight' | 'falChevronDoubleUp' | 'falChevronDown' | 'falChevronLeft' | 'falChevronRight' | 'falChevronUp' | 'falCircle' | 'falCloudShowersHeavy' | 'falCloudSnow' | 'falCloudSunRain' | 'falCloudSun' | 'falCloudUpload' | 'falCloud' | 'falCode' | 'falCog' | 'falCogs' | 'falComment' | 'falCommentAlt' | 'falCompressAlt' | 'falCopy' | 'falCreditCard' | 'falDatabase' | 'falDotCircle' | 'falDownload' | 'falEdit' | 'falEllipsisH' | 'falEllipsisV' | 'falEnvelope' | 'falExchange' | 'falExclamationCircle' | 'falExclamationTriangle' | 'falExpandAlt' | 'falExternalLink' | 'falEye' | 'falEyeSlash' | 'falFile' | 'falFilePdf' | 'falFileAlt' | 'falFileArchive' | 'falFileAudio' | 'falFileCertificate' | 'falFileChartLine' | 'falFileChartPie' | 'falFileCheck' | 'falFileCode' | 'falFileCsv' | 'falFileEdit' | 'falFileExcel' | 'falFileImage' | 'falFilePlus' | 'falFilePowerpoint' | 'falFileSpreadsheet' | 'falFileVideo' | 'falFileWord' | 'falFilter' | 'falFlag' | 'falFolderOpen' | 'falFolderPlus' | 'falFolder' | 'falFolders' | 'falGlassesAlt' | 'falGlobe' | 'falHome' | 'falHourglass' | 'falImage' | 'falInfoCircle' | 'falKey' | 'falLayerPlus' | 'falLink' | 'falList' | 'falLockAlt' | 'falLongArrowDown' | 'falLongArrowLeft' | 'falLongArrowRight' | 'falLongArrowUp' | 'falMapMarked' | 'falMapMarkedAlt' | 'falMapMarkerAlt' | 'falMapMarkerAltSlash' | 'falMapMarkerCheck' | 'falMapMarkerExclamation' | 'falMapMarker' | 'falMap' | 'falMinus' | 'falPause' | 'falPauseCircle' | 'falPen' | 'falPlay' | 'falPlayCircle' | 'falPlug' | 'falPlusSquare' | 'falPlus' | 'falPlusCircle' | 'falPrint' | 'falPuzzlePiece' | 'falReceipt' | 'falRedo' | 'falSave' | 'falSearchPlus' | 'falSearch' | 'falServer' | 'falShareAll' | 'falShare' | 'falShareAlt' | 'falShieldAlt' | 'falShieldCheck' | 'falShip' | 'falShoppingBasket' | 'falSignInAlt' | 'falSignOut' | 'falSignOutAlt' | 'falSlidersV' | 'falSnowBlowing' | 'falSnowflake' | 'falSolarPanel' | 'falSort' | 'falSpinner' | 'falSquare' | 'falStepForward' | 'falStop' | 'falStopCircle' | 'falStopwatch' | 'falSuitcase' | 'falSun' | 'falSync' | 'falTachometer' | 'falTemperatureHigh' | 'falThLarge' | 'falThList' | 'falTh' | 'falTimesCircle' | 'falTimes' | 'falToggleOff' | 'falToggleOn' | 'falTrashAlt' | 'falUnlockAlt' | 'falUserChart' | 'falUserCircle' | 'falUserCog' | 'falUserEdit' | 'falUserFriends' | 'falUserPlus' | 'falUserShield' | 'falUserTimes' | 'falUser' | 'falUsersClass' | 'falUsers' | 'falWater' | 'falWindTurbine' | 'falWind' | 'falWrench' | 'fasCaretDown' | 'fasCaretLeft' | 'fasCaretRight' | 'fasCaretUp' | 'fasDiamond' | 'fasFolder' | 'fasMapMarkerAlt' | 'fasMapMarkerExclamation' | 'fasQuoteLeft' | 'fasQuoteRight' | 'fasSolarPanel' | 'fasSort' | 'fasStar' | 'fasWindTurbine';

package/icons/consts.d.ts

@@ -0,0 +1,6 @@
+import { IconDefinition } from './types';
+/**
+ * Default icons are fundamental to functioning of certain components.
+ * They are added to the icon library in order to avoid loading them from CDN.
+ */
+export declare const defaultIcons: Record<string, IconDefinition>;

package/icons/consts.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultIcons = void 0;
+var cuiCheckboxIndeterminate_1 = __importDefault(require("./baseIcons/cui/cuiCheckboxIndeterminate"));
+var cuiCheckboxSelected_1 = __importDefault(require("./baseIcons/cui/cuiCheckboxSelected"));
+var cuiCheckboxUnselected_1 = __importDefault(require("./baseIcons/cui/cuiCheckboxUnselected"));
+var cuiRadioSelected_1 = __importDefault(require("./baseIcons/cui/cuiRadioSelected"));
+var cuiRadioUnselected_1 = __importDefault(require("./baseIcons/cui/cuiRadioUnselected"));
+var falCheck_1 = __importDefault(require("./baseIcons/fal/falCheck"));
+var falCheckCircle_1 = __importDefault(require("./baseIcons/fal/falCheckCircle"));
+var falEllipsisH_1 = __importDefault(require("./baseIcons/fal/falEllipsisH"));
+var falEllipsisV_1 = __importDefault(require("./baseIcons/fal/falEllipsisV"));
+var falExclamationCircle_1 = __importDefault(require("./baseIcons/fal/falExclamationCircle"));
+var falExclamationTriangle_1 = __importDefault(require("./baseIcons/fal/falExclamationTriangle"));
+var falInfoCircle_1 = __importDefault(require("./baseIcons/fal/falInfoCircle"));
+var falPlus_1 = __importDefault(require("./baseIcons/fal/falPlus"));
+var falSpinner_1 = __importDefault(require("./baseIcons/fal/falSpinner"));
+var falTimes_1 = __importDefault(require("./baseIcons/fal/falTimes"));
+var falTimesCircle_1 = __importDefault(require("./baseIcons/fal/falTimesCircle"));
+/**
+ * Default icons are fundamental to functioning of certain components.
+ * They are added to the icon library in order to avoid loading them from CDN.
+ */
+exports.defaultIcons = {
+    cuiCheckboxIndeterminate: cuiCheckboxIndeterminate_1.default,
+    cuiCheckboxSelected: cuiCheckboxSelected_1.default,
+    cuiCheckboxUnselected: cuiCheckboxUnselected_1.default,
+    cuiRadioSelected: cuiRadioSelected_1.default,
+    cuiRadioUnselected: cuiRadioUnselected_1.default,
+    falCheck: falCheck_1.default,
+    falCheckCircle: falCheckCircle_1.default,
+    falEllipsisH: falEllipsisH_1.default,
+    falEllipsisV: falEllipsisV_1.default,
+    falExclamationCircle: falExclamationCircle_1.default,
+    falExclamationTriangle: falExclamationTriangle_1.default,
+    falInfoCircle: falInfoCircle_1.default,
+    falPlus: falPlus_1.default,
+    falSpinner: falSpinner_1.default,
+    falTimes: falTimes_1.default,
+    falTimesCircle: falTimesCircle_1.default
+};

package/icons/index.d.ts

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

package/icons/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.library = void 0;
+__exportStar(require("./consts"), exports);
+__exportStar(require("./types"), exports);
+var library_1 = require("./library");
+Object.defineProperty(exports, "library", { enumerable: true, get: function () { return __importDefault(library_1).default; } });

package/icons/library.d.ts

@@ -0,0 +1,11 @@
+import { IconDefinition } from './types';
+declare class Library {
+    cache: Map<string, IconDefinition>;
+    add: (...icons: IconDefinition[]) => void;
+    get: (name: string) => IconDefinition | undefined;
+    has: (name: string) => boolean;
+    init: () => void;
+    reset: () => void;
+}
+declare const library: Library;
+export default library;

package/icons/library.js

@@ -0,0 +1,60 @@
+"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;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var consts_1 = require("./consts");
+var Library = /** @class */ (function () {
+    function Library() {
+        var _this = this;
+        this.cache = new Map();
+        this.add = function () {
+            var icons = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                icons[_i] = arguments[_i];
+            }
+            icons.forEach(function (icon) {
+                icon.name && _this.cache.set(icon.name, icon);
+            });
+        };
+        this.get = function (name) {
+            var icon = _this.cache.get(name);
+            if (!icon) {
+                /* eslint-disable-next-line no-console */
+                console.error("Icon " + name + " does not exist in the library.");
+            }
+            return icon;
+        };
+        this.has = function (name) {
+            return _this.cache.has(name);
+        };
+        this.init = function () {
+            _this.add.apply(_this, __spreadArray([], __read(Object.values(consts_1.defaultIcons))));
+        };
+        this.reset = function () {
+            _this.cache.clear();
+        };
+    }
+    return Library;
+}());
+var library = new Library();
+library.init();
+exports.default = library;

package/icons/types.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BaseIcon } from './baseIcons/types';
+import { PropsOf } from '../core';
+import Svg from '../svg';
+export interface IconDefinition {
+    details: IconDetails;
+    name?: string;
+    pathProps?: React.SVGProps<SVGPathElement> | React.SVGProps<SVGPathElement>[];
+    svgProps?: PropsOf<typeof Svg>;
+}
+export declare type IconDetails = [
+    number,
+    number,
+    string[],
+    string,
+    // unicode
+    string | string[]
+];
+export declare type VuiIcon = keyof VuiIcons;
+export interface VuiIcons extends Record<BaseIcon, IconDefinition> {
+}

package/icons/types.js

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

package/index.d.ts

@@ -7,6 +7,7 @@ export * from './core';
 export * from './divider';
 export * from './heading';
 export * from './icon';
+export * from './icons';
 export * from './input';
 export * from './label';
 export * from './link';

package/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./core"), exports);
 __exportStar(require("./divider"), exports);
 __exportStar(require("./heading"), exports);
 __exportStar(require("./icon"), exports);
+__exportStar(require("./icons"), exports);
 __exportStar(require("./input"), exports);
 __exportStar(require("./label"), exports);
 __exportStar(require("./link"), exports);

package/input/input.js

@@ -40,7 +40,7 @@ var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
 exports.InputInput = styled_components_2.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tmargin: 0 8px;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0;\n\n\t:disabled,\n\t: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\tmargin: 0 8px;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0;\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"])), styled_components_1.compose(styled_components_1.color, styled_components_1.fontSize));
 exports.InputBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(generator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\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\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\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"])), generator);
-exports.Input = core_1.forwardRef(function (props, ref) {
+exports.Input = core_1.vui(function (props, ref) {
     var _a;
     var _b = core_1.omitThemingProps(props), autoComplete = _b.autoComplete, autoFocus = _b.autoFocus, className = _b.className, colorSchemeProp = _b.colorScheme, defaultValue = _b.defaultValue, disabled = _b.disabled, iconLeft = _b.iconLeft, iconRightProp = _b.iconRight, _c = _b.inputProps, inputProps = _c === void 0 ? {} : _c, inputRef = _b.inputRef, itemLeft = _b.itemLeft, itemRight = _b.itemRight, _d = _b.length, length = _d === void 0 ? 'fluid' : _d, name = _b.name, onBlur = _b.onBlur, onChange = _b.onChange, onFocus = _b.onFocus, placeholder = _b.placeholder, readOnly = _b.readOnly, required = _b.required, _e = _b.state, state = _e === void 0 ? 'default' : _e, stateMapping = _b.stateMapping, _f = _b.type, type = _f === void 0 ? 'text' : _f, value = _b.value, rest = __rest(_b, ["autoComplete", "autoFocus", "className", "colorScheme", "defaultValue", "disabled", "iconLeft", "iconRight", "inputProps", "inputRef", "itemLeft", "itemRight", "length", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "state", "stateMapping", "type", "value"]);
     var states = __assign(__assign({}, consts_1.inputStateMapping), stateMapping);

package/label/label.js

@@ -40,7 +40,7 @@ var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.interactivity, system_1.isTruncated, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 var Text = styled_components_2.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.isTruncated);
 exports.LabelBase = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(generator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tmin-width: 0px;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tmin-width: 0px;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"])), generator);
-exports.Label = core_1.forwardRef(function (props, ref) {
+exports.Label = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), casing = _a.casing, children = _a.children, className = _a.className, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, isElevated = _a.isElevated, isFullWidth = _a.isFullWidth, _b = _a.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isLoading = _a.isLoading, isRound = _a.isRound, isSplit = _a.isSplit, _c = _a.isTruncated, isTruncated = _c === void 0 ? true : _c, itemLeft = _a.itemLeft, itemRight = _a.itemRight, text = _a.text, weight = _a.weight, rest = __rest(_a, ["casing", "children", "className", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isInteractive", "isLoading", "isRound", "isSplit", "isTruncated", "itemLeft", "itemRight", "text", "weight"]);
     var _d = core_1.useStyleConfig('Label', props), activeBg = _d.activeBg, h = _d.h, hoverBg = _d.hoverBg, _e = _d.iconSize, iconSize = _e === void 0 ? 'md' : _e, _f = _d.spaceX, spaceXBase = _f === void 0 ? 0 : _f, styles = __rest(_d, ["activeBg", "h", "hoverBg", "iconSize", "spaceX"]);
     var spaceX = spaceXBase / 8;

package/label/label.types.d.ts

@@ -16,7 +16,7 @@ export interface LabelProps extends LabelStyleProps, ThemingProps<'Label'> {
     isSplit?: boolean;
     itemLeft?: React.ReactNode;
     itemRight?: React.ReactNode;
-    text?: string;
+    text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
 export interface LabelStyleProps extends BackgroundColorProps, BordersProps, EffectsProps, InteractivityProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {

package/link/link.js

@@ -38,8 +38,8 @@ var system_1 = require("../system");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.borders, system_1.isTruncated, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 exports.LinkBase = styled_components_2.default.a.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\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"])), generator);
-exports.Link = core_1.forwardRef(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), className = _a.className, decoration = _a.decoration, _b = _a.hoverDecoration, hoverDecoration = _b === void 0 ? 'underline' : _b, isExternal = _a.isExternal, weight = _a.weight, rest = __rest(_a, ["className", "decoration", "hoverDecoration", "isExternal", "weight"]);
+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, text = _a.text, weight = _a.weight, rest = __rest(_a, ["children", "className", "decoration", "hoverDecoration", "isExternal", "text", "weight"]);
     var styles = core_1.useStyleConfig('Link', props);
     var aliasedProps = utils_1.filterUndefined({
         fontWeight: weight,
@@ -48,7 +48,7 @@ exports.Link = core_1.forwardRef(function (props, ref) {
         target: isExternal ? '_blank' : undefined,
         textDecoration: decoration
     });
-    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)));
+    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));
 });
 exports.Link.displayName = 'Link';
 exports.default = exports.Link;

package/link/link.types.d.ts

@@ -5,6 +5,7 @@ export interface LinkProps extends LinkStyleProps, ThemingProps<'Link'> {
     decoration?: TypographyProps['textDecoration'];
     hoverDecoration?: TypographyProps['textDecoration'];
     isExternal?: boolean;
+    text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
 export interface LinkStyleProps extends BordersProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {

package/list/list.d.ts

@@ -1,9 +1,11 @@
 import { ListProps, ListStyleProps } from './list.types';
+import ListHeading from './listHeading';
 import ListIcon from './listIcon';
 import ListItem from './listItem';
 import { VuiComponent } from '../core';
 export declare const ListBase: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, ListStyleProps, never>;
-export declare const List: VuiComponent<"div", ListProps> & {
+export declare const List: VuiComponent<"ul", ListProps> & {
+    Heading: typeof ListHeading;
     Icon: typeof ListIcon;
     Item: typeof ListItem;
 };

package/list/list.js

@@ -53,14 +53,15 @@ var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importStar(require("react"));
 var styled_components_2 = __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 utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.borders, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.typography);
+var generator = styled_components_1.compose(styled_components_1.borders, styled_components_1.flexboxes, styled_components_1.layout, styled_components_1.sizing, styled_components_1.space, styled_components_1.typography);
 exports.ListBase = styled_components_2.default.ul.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
-exports.List = core_1.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, colorScheme = props.colorScheme, isInteractive = props.isInteractive, size = props.size, subheader = props.subheader, variant = props.variant, rest = __rest(props, ["children", "className", "colorScheme", "isInteractive", "size", "subheader", "variant"]);
+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,
@@ -70,10 +71,11 @@ exports.List = core_1.forwardRef(function (props, ref) {
     ]);
     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),
-            subheader && (react_1.default.createElement(listItem_1.default, { className: "vui-listSubheader", color: "grey.80", fontSize: "sm", fontWeight: "medium" }, subheader)),
+            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;

package/list/list.types.d.ts

@@ -1,10 +1,10 @@
-import { BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { BordersProps, FlexboxesProps, LayoutProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface ListProps extends ListStyleProps, ThemingProps<'List'> {
     colorScheme?: 'blue' | 'grey';
     disabled?: boolean;
+    heading?: string;
     isInteractive?: boolean;
-    subheader?: string;
 }
-export interface ListStyleProps extends BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
+export interface ListStyleProps extends BordersProps, FlexboxesProps, LayoutProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/list/listHeading.d.ts

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

package/list/listHeading.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.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.js

@@ -19,7 +19,7 @@ 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.forwardRef(function (props, ref) {
+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);

package/list/listItem.js

@@ -39,10 +39,10 @@ var core_1 = require("../core");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.flexboxes, styled_components_1.interactivity, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 exports.ListItemBase = styled_components_2.default.li.withConfig(core_1.forwardPropConfig(generator))(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"])), generator);
-exports.ListItem = core_1.forwardRef(function (props, ref) {
+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, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconRight", "iconLeft", "isInteractive", "isSelected", "onClick"]);
+    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';
@@ -66,8 +66,7 @@ exports.ListItem = core_1.forwardRef(function (props, ref) {
         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,
+        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';

package/list/listItem.types.d.ts

@@ -12,6 +12,7 @@ export interface ListItemProps extends ListItemStyleProps, ThemingProps<'List'>
     iconRight?: IconProp;
     isInteractive?: boolean;
     isSelected?: boolean;
+    text?: number | string;
 }
 export interface ListItemStyleProps extends BackgroundColorProps, FlexboxesProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/list/theme.js

@@ -16,7 +16,7 @@ var defaultProps = {
     size: 'md',
     variant: 'default'
 };
-var parts = ['container', 'icon', 'item'];
+var parts = ['container', 'heading', 'icon', 'item'];
 var sizes = {
     sm: {
         icon: {

package/p/p.js

@@ -38,8 +38,8 @@ var system_1 = require("../system");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(system_1.isTruncated, system_1.maxLines, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 exports.PBase = styled_components_2.default.p.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
-exports.P = core_1.forwardRef(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, className = _a.className, decoration = _a.decoration, weight = _a.weight, rest = __rest(_a, ["align", "casing", "className", "decoration", "weight"]);
+exports.P = 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('P', props);
     var aliasedProps = utils_1.filterUndefined({
         fontWeight: weight,
@@ -47,7 +47,7 @@ exports.P = core_1.forwardRef(function (props, ref) {
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.PBase, __assign({ className: utils_1.cs('vui-p', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.PBase, __assign({ className: utils_1.cs('vui-p', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.P.displayName = 'P';
 exports.default = exports.P;

package/p/p.types.d.ts

@@ -4,6 +4,7 @@ export interface PProps extends PStyleProps, ThemingProps<'P'> {
     align?: TypographyProps['textAlign'];
     casing?: TypographyProps['textTransform'];
     decoration?: TypographyProps['textDecoration'];
+    text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
 export interface PStyleProps extends IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Veracity UI components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",
@@ -23,5 +23,8 @@
   "peerDependencies": {
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.8"
   }
 }