@veracity/vui 0.0.8 → 0.0.10

package/icons/baseIcons/types.d.ts

@@ -1 +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';
+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' | 'falSignIn' | '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/input/input.d.ts

@@ -1,7 +1,6 @@
-import { InputInputStyleProps, InputProps, InputStyleProps } from './input.types';
-export declare const InputInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputInputStyleProps & {
-    color?: any;
-}, never>;
-export declare const InputBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, InputStyleProps, never>;
+import { InputInputStyleProps, InputProps } from './input.types';
+import { SystemProps } from '../system';
+export declare const InputInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputInputStyleProps, never>;
+export declare const InputBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Input: import("../core").VuiComponent<"div", InputProps>;
 export default Input;

package/input/input.js

@@ -36,10 +36,10 @@ var styled_components_2 = __importDefault(require("styled-components"));
 var consts_1 = require("./consts");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var system_1 = require("../system");
 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.InputBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(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"])), system_1.system);
 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"]);

package/input/input.types.d.ts

@@ -2,14 +2,14 @@
 import { inputLengths } from './consts';
 import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { IconProp } from '../icon';
-import { BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FontSizeProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { ColorProps, FontSizeProps, SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface InputInputProps extends InputInputStyleProps {
 }
 export interface InputInputStyleProps extends ColorProps, FontSizeProps {
 }
 export declare type InputLength = keyof typeof inputLengths;
-export interface InputProps extends InputStyleProps, ThemingProps<'Input'> {
+export interface InputProps extends SystemProps, ThemingProps<'Input'> {
     autoComplete?: string;
     autoFocus?: boolean;
     colorScheme?: 'green' | 'grey' | 'red';
@@ -38,5 +38,3 @@ export declare type InputStateMapping = Record<string, {
     colorScheme?: InputProps['colorScheme'];
     iconRight: InputProps['iconRight'];
 }>;
-export interface InputStyleProps extends BackgroundColorProps, BordersProps, EffectsProps, SizingProps, SpaceProps, TransitionsProps {
-}

package/label/label.d.ts

@@ -1,6 +1,5 @@
-import { LabelProps, LabelStyleProps } from './label.types';
-export declare const LabelBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, LabelStyleProps & {
-    color?: any;
-}, never>;
+import { LabelProps } from './label.types';
+import { SystemProps } from '../system';
+export declare const LabelBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Label: import("../core").VuiComponent<"span", LabelProps>;
 export default Label;

package/label/label.js

@@ -30,16 +30,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = exports.LabelBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
 var system_1 = require("../system");
 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);
+var Text = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.isTruncated);
+exports.LabelBase = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(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"])), system_1.system);
 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"]);

package/label/label.types.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { IconProp } from '../icon';
-import { BackgroundColorProps, BordersProps, EffectsProps, InteractivityProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface LabelProps extends LabelStyleProps, ThemingProps<'Label'> {
+export interface LabelProps extends SystemProps, ThemingProps<'Label'> {
     casing?: TypographyProps['textTransform'];
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
     icon?: IconProp;
@@ -16,8 +16,6 @@ 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.d.ts

@@ -1,6 +1,5 @@
-import { LinkProps, LinkStyleProps } from './link.types';
-export declare const LinkBase: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, LinkStyleProps & {
-    color?: any;
-}, never>;
+import { LinkProps } from './link.types';
+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 default Link;

package/link/link.js

@@ -30,16 +30,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = exports.LinkBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 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.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), className = _a.className, decoration = _a.decoration, _b = _a.hoverDecoration, hoverDecoration = _b === void 0 ? 'underline' : _b, isExternal = _a.isExternal, weight = _a.weight, rest = __rest(_a, ["className", "decoration", "hoverDecoration", "isExternal", "weight"]);
+    var _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 +46,7 @@ exports.Link = core_1.vui(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

@@ -1,11 +1,10 @@
-import { BordersProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface LinkProps extends LinkStyleProps, ThemingProps<'Link'> {
+export interface LinkProps extends SystemProps, ThemingProps<'Link'> {
     colorScheme?: 'blue' | 'prussian';
     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,12 @@
-import { ListProps, ListStyleProps } from './list.types';
+import { ListProps } 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>;
+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;
 };

package/list/list.js

@@ -49,18 +49,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = exports.ListBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importStar(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+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");
-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.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, isInteractive = props.isInteractive, size = props.size, subheader = props.subheader, variant = props.variant, rest = __rest(props, ["children", "className", "colorScheme", "isInteractive", "size", "subheader", "variant"]);
+    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 +70,11 @@ exports.List = core_1.vui(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,8 @@
-import { BordersProps, FlexboxesProps, LayoutProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface ListProps extends ListStyleProps, ThemingProps<'List'> {
+export interface ListProps extends SystemProps, ThemingProps<'List'> {
     colorScheme?: 'blue' | 'grey';
     disabled?: boolean;
+    heading?: string;
     isInteractive?: boolean;
-    subheader?: string;
-}
-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/listItem.d.ts

@@ -1,4 +1,5 @@
-import { ListItemProps, ListItemStyleProps } from './listItem.types';
-export declare const ListItemBase: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, ListItemStyleProps, never>;
+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

@@ -30,19 +30,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItem = exports.ListItemBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+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");
-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.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, 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 +65,7 @@ exports.ListItem = core_1.vui(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

@@ -1,7 +1,7 @@
 import { IconProp } from '../icon';
-import { BackgroundColorProps, FlexboxesProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface ListItemProps extends ListItemStyleProps, ThemingProps<'List'> {
+export interface ListItemProps extends SystemProps, ThemingProps<'List'> {
     center?: boolean;
     centerH?: boolean;
     centerV?: boolean;
@@ -12,6 +12,5 @@ export interface ListItemProps extends ListItemStyleProps, ThemingProps<'List'>
     iconRight?: IconProp;
     isInteractive?: boolean;
     isSelected?: boolean;
-}
-export interface ListItemStyleProps extends BackgroundColorProps, FlexboxesProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
+    text?: number | string;
 }

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.d.ts

@@ -1,6 +1,5 @@
-import { PProps, PStyleProps } from './p.types';
-export declare const PBase: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, PStyleProps & {
-    color?: any;
-}, never>;
+import { PProps } from './p.types';
+import { SystemProps } from '../system';
+export declare const PBase: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const P: import("../core").VuiComponent<"p", PProps>;
 export default P;

package/p/p.js

@@ -30,16 +30,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.P = exports.PBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 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.PBase = styled_components_1.default.p.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
 exports.P = core_1.vui(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"]);
+    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 +45,7 @@ exports.P = core_1.vui(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

@@ -1,10 +1,9 @@
-import { IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface PProps extends PStyleProps, ThemingProps<'P'> {
+export interface PProps extends SystemProps, 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.8",
+  "version": "0.0.10",
   "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"
   }
 }

package/radio/radio.d.ts

@@ -1,6 +1,7 @@
-import { RadioControlStyleProps, RadioProps, RadioStyleProps } from './radio.types';
+import { RadioProps, RadioStyleProps } from './radio.types';
+import { SystemProps } from '../system';
 export declare const RadioInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
 export declare const RadioBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, RadioStyleProps, never>;
-export declare const RadioControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, RadioControlStyleProps, never>;
+export declare const RadioControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Radio: import("../core").VuiComponent<"span", RadioProps>;
 export default Radio;

package/radio/radio.js

@@ -30,19 +30,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = exports.RadioControl = exports.RadioBase = exports.RadioInput = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-var radioGenerator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.color, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
-var controlGenerator = styled_components_1.compose(styled_components_1.borders, styled_components_1.backgroundColor, styled_components_1.color, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
-exports.RadioInput = styled_components_2.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"], ["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"])));
-exports.RadioBase = styled_components_2.default.label.withConfig(core_1.forwardPropConfig(radioGenerator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), function (p) { return core_1.th('colors', p.controlHoverColor)(p); }, radioGenerator);
-exports.RadioControl = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(controlGenerator))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"])), controlGenerator);
+exports.RadioInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"], ["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"])));
+exports.RadioBase = styled_components_1.default.label.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), function (p) { return core_1.th.color(p.controlHoverColor)(p); }, system_1.system);
+exports.RadioControl = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"])), system_1.system);
 exports.Radio = core_1.vui(function (props, ref) {
     var _a;
     var _b = (_a = context_1.useRadioGroup()) !== null && _a !== void 0 ? _a : {}, groupOnChange = _b.onChange, groupValue = _b.value, radioGroupProps = __rest(_b, ["onChange", "value"]);

package/radio/radio.types.d.ts

@@ -1,9 +1,9 @@
 import { HTMLAttributes } from 'react';
 import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { IconProp } from '../icon';
-import { BackgroundColorProps, BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface RadioProps extends RadioStyleProps, ThemingProps<'Radio'> {
+export interface RadioProps extends SystemProps, ThemingProps<'Radio'> {
     checked?: boolean;
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
@@ -19,8 +19,6 @@ export interface RadioProps extends RadioStyleProps, ThemingProps<'Radio'> {
     required?: boolean;
     value?: number | string;
 }
-export interface RadioControlStyleProps extends BackgroundColorProps, BordersProps, SizingProps, SpaceProps, TransitionsProps {
-}
-export interface RadioStyleProps extends BackgroundColorProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps {
-    controlHoverColor?: string;
+export interface RadioStyleProps extends SystemProps {
+    controlHoverColor: string;
 }

package/radio/radioGroup.d.ts

@@ -1,4 +1,5 @@
-import { RadioGroupProps, RadioGroupStyleProps } from './radioGroup.types';
-export declare const RadioGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, RadioGroupStyleProps, never>;
+import { RadioGroupProps } from './radioGroup.types';
+import { SystemProps } from '../system';
+export declare const RadioGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const RadioGroup: import("../core").VuiComponent<"div", RadioGroupProps>;
 export default RadioGroup;

package/radio/radioGroup.js

@@ -65,14 +65,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroup = exports.RadioGroupBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importStar(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
+var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space);
-exports.RadioGroupBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"])), generator);
+exports.RadioGroupBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"])), system_1.system);
 exports.RadioGroup = core_1.vui(function (props, ref) {
     var className = props.className, colorScheme = props.colorScheme, _a = props.defaultValue, defaultValue = _a === void 0 ? '' : _a, disabled = props.disabled, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, row = props.row, size = props.size, valueProp = props.value, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "defaultValue", "disabled", "name", "onBlur", "onChange", "onFocus", "row", "size", "value", "variant"]);
     var isControlled = react_1.useRef(valueProp !== undefined).current;

package/radio/radioGroup.types.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEventHandler, FocusEventHandler } from '../core';
-import { FlexboxesProps, SizingProps, SpaceProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface RadioGroupProps extends RadioGroupStyleProps, ThemingProps<'Radio'> {
+export interface RadioGroupProps extends SystemProps, ThemingProps<'Radio'> {
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
     name?: string;
@@ -11,5 +11,3 @@ export interface RadioGroupProps extends RadioGroupStyleProps, ThemingProps<'Rad
     row?: boolean;
     value?: number | string;
 }
-export interface RadioGroupStyleProps extends FlexboxesProps, SizingProps, SpaceProps {
-}