@veracity/vui 0.0.12 → 0.0.14

package/alert/alert.d.ts

@@ -1,14 +1,12 @@
 import { AlertProps } from './alert.types';
 import AlertButton from './alertButton';
 import AlertIcon from './alertIcon';
-import AlertMessage from './alertMessage';
 import AlertText from './alertText';
 import AlertTitle from './alertTitle';
 import { VuiComponent } from '../core';
 export declare const Alert: VuiComponent<"div", AlertProps> & {
     Button: typeof AlertButton;
     Icon: typeof AlertIcon;
-    Message: typeof AlertMessage;
     Text: typeof AlertText;
     Title: typeof AlertTitle;
 };

package/alert/alert.js

@@ -48,7 +48,6 @@ exports.Alert = void 0;
 var react_1 = __importStar(require("react"));
 var alertButton_1 = __importDefault(require("./alertButton"));
 var alertIcon_1 = __importDefault(require("./alertIcon"));
-var alertMessage_1 = __importDefault(require("./alertMessage"));
 var alertText_1 = __importDefault(require("./alertText"));
 var alertTitle_1 = __importDefault(require("./alertTitle"));
 var consts_1 = require("./consts");
@@ -58,13 +57,12 @@ var core_1 = require("../core");
 var utils_1 = require("../utils");
 exports.Alert = core_1.vui(function (props, ref) {
     var _a;
-    var action = props.action, children = props.children, className = props.className, _b = props.colorScheme, colorSchemeProp = _b === void 0 ? 'blue' : _b, icon = props.icon, isVertical = props.isVertical, onClose = props.onClose, size = props.size, _c = props.status, status = _c === void 0 ? '' : _c, statusMapping = props.statusMapping, text = props.text, title = props.title, variant = props.variant, rest = __rest(props, ["action", "children", "className", "colorScheme", "icon", "isVertical", "onClose", "size", "status", "statusMapping", "text", "title", "variant"]);
+    var action = props.action, children = props.children, className = props.className, _b = props.colorScheme, colorSchemeProp = _b === void 0 ? 'blue' : _b, icon = props.icon, onClose = props.onClose, size = props.size, _c = props.status, status = _c === void 0 ? '' : _c, statusMapping = props.statusMapping, text = props.text, title = props.title, variant = props.variant, rest = __rest(props, ["action", "children", "className", "colorScheme", "icon", "onClose", "size", "status", "statusMapping", "text", "title", "variant"]);
     var statuses = __assign(__assign({}, consts_1.alertStatusMapping), statusMapping);
     var _d = ((_a = statuses[status]) !== null && _a !== void 0 ? _a : {}).colorScheme, colorScheme = _d === void 0 ? colorSchemeProp : _d;
     var styles = core_1.useStyleConfig('Alert', __assign({ colorScheme: colorScheme }, props));
-    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, isVertical: isVertical, size: size, status: status, variant: variant }); }, [
+    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, size: size, status: status, variant: variant }); }, [
         colorScheme,
-        isVertical,
         size,
         status,
         variant
@@ -72,16 +70,16 @@ exports.Alert = core_1.vui(function (props, ref) {
     return (react_1.default.createElement(context_1.AlertProvider, { value: context },
         react_1.default.createElement(box_1.default, __assign({ borderRadius: "md", className: utils_1.cs('vui-alert', className), px: 1.5, py: 1, ref: ref, w: "fit-content" }, styles.container, rest), children ? (children) : (react_1.default.createElement(react_1.default.Fragment, null,
             status ? react_1.default.createElement(alertIcon_1.default, null) : typeof icon === 'string' ? react_1.default.createElement(alertIcon_1.default, { icon: icon }) : icon,
-            react_1.default.createElement(alertMessage_1.default, null,
-                title && react_1.default.createElement(alertTitle_1.default, null, title),
-                text && react_1.default.createElement(alertText_1.default, null, text)),
+            react_1.default.createElement(alertText_1.default, null,
+                typeof title === 'string' ? react_1.default.createElement(alertTitle_1.default, { text: title }) : title,
+                " ",
+                text),
             action,
             onClose && react_1.default.createElement(alertButton_1.default, { icon: "falTimes", onClick: onClose }))))));
 });
 exports.Alert.displayName = 'Alert';
 exports.Alert.Button = alertButton_1.default;
 exports.Alert.Icon = alertIcon_1.default;
-exports.Alert.Message = alertMessage_1.default;
 exports.Alert.Text = alertText_1.default;
 exports.Alert.Title = alertTitle_1.default;
 exports.default = exports.Alert;

package/alert/alert.types.d.ts

@@ -1,17 +1,17 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import { BoxProps } from '../box';
 import { IconProps } from '../icon';
+import { VuiIcon } from '../icons';
 import { ThemingProps } from '../theme';
 export interface AlertProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingProps<'Alert'> {
-    action?: React.ReactElement;
+    action?: ReactNode;
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
-    icon?: React.ReactElement | string;
-    isVertical?: boolean;
+    icon?: VuiIcon | (ReactNode & {});
     onClose?: () => void;
     status?: AlertStatus;
     statusMapping?: AlertStatusMapping;
-    text?: React.ReactElement | string;
-    title?: string;
+    text?: ReactNode;
+    title?: ReactNode;
 }
 export declare type AlertStatus = 'error' | 'info' | 'loading' | 'success' | 'warning';
 export declare type AlertStatusMapping = Record<string, {

package/alert/alertText.js

@@ -24,7 +24,7 @@ exports.AlertText = core_1.vui(function (props, ref) {
     var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, alertProps), props);
     var styles = core_1.useStyleConfig('Alert', mergedProps);
-    return react_1.default.createElement(p_1.default, __assign({ className: "vui-alertText", ref: ref }, styles.text, props));
+    return react_1.default.createElement(p_1.default, __assign({ className: "vui-alertText", flex: "1", minW: 0, py: 0.5, ref: ref }, styles.text, props));
 });
 exports.AlertText.displayName = 'AlertText';
 exports.default = exports.AlertText;

package/alert/alertTitle.js

@@ -24,7 +24,7 @@ exports.AlertTitle = core_1.vui(function (props, ref) {
     var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, alertProps), props);
     var styles = core_1.useStyleConfig('Alert', mergedProps);
-    return react_1.default.createElement(heading_1.H6, __assign({ className: "vui-alertTitle", lineHeight: 1.5, mr: 1, ref: ref }, styles.title, props));
+    return react_1.default.createElement(heading_1.H6, __assign({ className: "vui-alertTitle", display: "inline-block", ref: ref }, styles.title, props));
 });
 exports.AlertTitle.displayName = 'AlertTitle';
 exports.default = exports.AlertTitle;

package/alert/index.d.ts

@@ -2,7 +2,6 @@ export * from './alert';
 export * from './alert.types';
 export * from './alertButton';
 export * from './alertIcon';
-export * from './alertMessage';
 export * from './alertText';
 export * from './alertTitle';
 export * from './context';

package/alert/index.js

@@ -18,7 +18,6 @@ __exportStar(require("./alert"), exports);
 __exportStar(require("./alert.types"), exports);
 __exportStar(require("./alertButton"), exports);
 __exportStar(require("./alertIcon"), exports);
-__exportStar(require("./alertMessage"), exports);
 __exportStar(require("./alertText"), exports);
 __exportStar(require("./alertTitle"), exports);
 __exportStar(require("./context"), exports);

package/box/box.js

@@ -35,7 +35,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.BoxBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\n\t", "\n"])), system_1.system);
+exports.BoxBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tmin-width: 0;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tmin-width: 0;\n\n\t", "\n"])), system_1.system);
 exports.Box = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), align = _a.align, center = _a.center, centerH = _a.centerH, centerV = _a.centerV, className = _a.className, column = _a.column, direction = _a.direction, hoverShadow = _a.hoverShadow, justify = _a.justify, radius = _a.radius, shadow = _a.shadow, wrap = _a.wrap, rest = __rest(_a, ["align", "center", "centerH", "centerV", "className", "column", "direction", "hoverShadow", "justify", "radius", "shadow", "wrap"]);
     var styles = core_1.useStyleConfig('Box', props);

package/button/button.js

@@ -40,7 +40,7 @@ var system_1 = require("../system");
 var utils_1 = require("../utils");
 var ContentWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tvisibility: hidden;\n"], ["\n\tvisibility: hidden;\n"])));
 var StateWrapper = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\n\t", "\n"], ["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\n\t", "\n"])), system_1.system);
-exports.ButtonBase = styled_components_1.default.button.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toverflow: hidden;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toverflow: hidden;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"])), system_1.system);
+exports.ButtonBase = styled_components_1.default.button.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toverflow: hidden;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toverflow: hidden;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"])), system_1.system);
 exports.Button = core_1.vui(function (props, ref) {
     var _a, _b;
     var buttonGroupProps = context_1.useButtonGroup();
@@ -50,22 +50,22 @@ exports.Button = core_1.vui(function (props, ref) {
     var hasState = Boolean(state);
     var states = __assign(__assign({}, consts_1.buttonStateMapping), stateMapping);
     var _e = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, iconProps = _e.iconProps, stateProps = __rest(_e, ["iconProps"]);
-    var _f = core_1.useStyleConfig('Button', mergedProps), borderWidth = _f.borderWidth, h = _f.h, _g = _f.iconSize, iconSize = _g === void 0 ? 'md' : _g, minW = _f.minW, _h = _f.spaceX, spaceXBase = _h === void 0 ? 0 : _h, styles = __rest(_f, ["borderWidth", "h", "iconSize", "minW", "spaceX"]);
+    var _f = core_1.useStyleConfig('Button', mergedProps), borderWidth = _f.borderWidth, h = _f.h, _g = _f.iconSize, iconSize = _g === void 0 ? 'md' : _g, minW = _f.minW, _h = _f.spaceX, spaceX = _h === void 0 ? 0 : _h, styles = __rest(_f, ["borderWidth", "h", "iconSize", "minW", "spaceX"]);
     var Content = hasState ? ContentWrapper : react_1.default.Fragment;
     var border = (_b = borderWidthProp !== null && borderWidthProp !== void 0 ? borderWidthProp : borderWidth) !== null && _b !== void 0 ? _b : 0;
-    var spaceX = (spaceXBase - border) / 8;
-    var spaceXText = spaceX * 2;
-    var iconRightMl = isSplit ? 'auto' : spaceX;
-    var iconLeft = iconLeftProp && react_1.default.createElement(icon_1.default, { icon: iconLeftProp, mr: spaceX, size: iconSize });
+    var spaceXItem = spaceX - border + 'px';
+    var spaceXText = spaceX * 2 - border + 'px';
+    var iconRightMl = isSplit ? 'auto' : spaceXItem;
+    var iconLeft = iconLeftProp && react_1.default.createElement(icon_1.default, { icon: iconLeftProp, mr: spaceXItem, size: iconSize });
     var iconRight = iconRightProp && react_1.default.createElement(icon_1.default, { icon: iconRightProp, ml: iconRightMl, size: iconSize });
     var itemLeft = itemLeftProp !== null && itemLeftProp !== void 0 ? itemLeftProp : iconLeft;
     var itemRight = itemRightProp !== null && itemRightProp !== void 0 ? itemRightProp : iconRight;
-    var pl = icon || itemLeft ? spaceX : spaceXText;
-    var pr = icon || itemRight ? spaceX : spaceXText;
+    var pl = icon || itemLeft ? spaceXItem : spaceXText;
+    var pr = icon || itemRight ? spaceXItem : spaceXText;
     var minWidth = !icon ? minW : undefined;
     var aliasedProps = utils_1.filterUndefined({
         borderRadius: isRound ? h / 2 : undefined,
-        boxShadow: isElevated ? 2 : undefined,
+        boxShadow: isElevated ? '2' : undefined,
         pointerEvents: hasState ? 'none' : undefined,
         w: isFullWidth ? '100%' : undefined
     });

package/core/types/events.d.ts

@@ -7,6 +7,10 @@ export declare type ChangeEventHandler<T = HTMLInputElement> = React.ChangeEvent
 export declare type FocusEvent<T = HTMLElement> = React.FocusEvent<T>;
 /** Type of blur/focus event handler defaulted to any html element */
 export declare type FocusEventHandler<T = HTMLElement> = React.FocusEventHandler<T>;
+/** Type of keyboard event defaulted to any html element */
+export declare type KeyboardEvent<T = HTMLElement> = React.KeyboardEvent<T>;
+/** Type of keyboard event handler defaulted to any html element */
+export declare type KeyboardEventHandler<T = HTMLElement> = React.KeyboardEventHandler<T>;
 /** Type of mouse event defaulted to any html element */
 export declare type MouseEvent<T = HTMLElement> = React.MouseEvent<T>;
 /** Type of mouse event handler defaulted to any html element */

package/icons/baseIcons/cui/cuiCheckboxIndeterminate.js

@@ -2,7 +2,6 @@
 /* eslint-disable */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    details: [20, 20, [], '', 'M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H17C18.3807 0.5 19.5 1.61929 19.5 3V17C19.5 18.3807 18.3807 19.5 17 19.5H3C1.61929 19.5 0.5 18.3807 0.5 17V3ZM15.75 8.75H4.25C3.83573 8.75 3.5 9.08573 3.5 9.5V10.5C3.5 10.9143 3.83573 11.25 4.25 11.25H15.75C16.1643 11.25 16.5 10.9143 16.5 10.5V9.5C16.5 9.08573 16.1643 8.75 15.75 8.75Z'],
-    name: 'cuiCheckboxIndeterminate',
-    pathProps: { stroke: 'currentColor' }
+    details: [20, 20, [], '', 'M3 0C1.34315 0 0 1.34315 0 3V17C0 18.6569 1.34315 20 3 20H17C18.6569 20 20 18.6569 20 17V3C20 1.34315 18.6569 0 17 0H3ZM4.25 9.17969H15.75C15.8881 9.17969 16 9.29937 16 9.4375V10.5C16 10.6381 15.8881 10.75 15.75 10.75H4.25C4.11188 10.75 4 10.6381 4 10.5V9.4375C4 9.29937 4.11188 9.17969 4.25 9.17969Z'],
+    name: 'cuiCheckboxIndeterminate'
 };

package/icons/baseIcons/cui/cuiCheckboxSelected.js

@@ -2,7 +2,6 @@
 /* eslint-disable */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    details: [20, 20, [], '', 'M17.1595 4.87355L17.1594 4.87351L16.8059 4.51995C16.4642 4.17825 15.9101 4.17825 15.5684 4.51995L7.17153 12.9169L4.43149 10.1768C4.08976 9.8351 3.53577 9.83516 3.19407 10.1768L3.19403 10.1768L2.8405 10.5304C2.49878 10.8721 2.49884 11.4261 2.84047 11.7678L2.8405 11.7678L6.55282 15.4801C6.89454 15.8218 7.44853 15.8218 7.79023 15.4802L7.79027 15.4801L17.1594 6.11096C17.5011 5.76924 17.5011 5.21525 17.1595 4.87355ZM0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H17C18.3807 0.5 19.5 1.61929 19.5 3V17C19.5 18.3807 18.3807 19.5 17 19.5H3C1.61929 19.5 0.5 18.3807 0.5 17V3Z'],
-    name: 'cuiCheckboxSelected',
-    pathProps: { stroke: 'currentColor' }
+    details: [20, 20, [], '', 'M17.8571 0C18.9913 0 19.9197 0.881093 19.9951 1.99614L20 2.14286V17.8571C20 18.9913 19.1189 19.9197 18.0039 19.9951L17.8571 20H2.14286C1.00869 20 0.080337 19.1189 0.00494355 18.0039L0 17.8571V2.14286C0 1.00869 0.881093 0.080337 1.99614 0.00494355L2.14286 0H17.8571ZM15.191 5.43326L7.89451 12.6712L4.81522 9.56705C4.60687 9.35701 4.26768 9.35563 4.05763 9.56402L3.67728 9.94129C3.46723 10.1496 3.46585 10.4888 3.67424 10.6989L7.50808 14.5637C7.71643 14.7738 8.05562 14.7751 8.26567 14.5667L16.3228 6.57424C16.5328 6.36589 16.5342 6.0267 16.3258 5.81665L15.9486 5.43629C15.7402 5.22625 15.401 5.22487 15.191 5.43326Z'],
+    name: 'cuiCheckboxSelected'
 };

package/icons/baseIcons/fal/falBars.js

@@ -0,0 +1,7 @@
+"use strict";
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    details: [448, 512, [], '', 'M442 114H6a6 6 0 0 1-6-6V84a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6zm0 160H6a6 6 0 0 1-6-6v-24a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6zm0 160H6a6 6 0 0 1-6-6v-24a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6z'],
+    name: 'falBars'
+};

package/input/consts.d.ts

@@ -1,10 +1,2 @@
 import { InputStateMapping } from './input.types';
-export declare const inputLengths: {
-    fluid: string;
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-};
 export declare const inputStateMapping: InputStateMapping;

package/input/consts.js

@@ -1,14 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inputStateMapping = exports.inputLengths = void 0;
-exports.inputLengths = {
-    fluid: 'none',
-    xs: 104,
-    sm: 160,
-    md: 240,
-    lg: 320,
-    xl: 480
-};
+exports.inputStateMapping = void 0;
 exports.inputStateMapping = {
     error: {
         colorScheme: 'red',

package/input/input.js

@@ -74,50 +74,52 @@ var icon_1 = __importDefault(require("../icon"));
 var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-exports.InputInput = styled_components_1.default.input.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\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"])), system_1.system);
-exports.InputBase = styled_components_1.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\tposition: relative;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
+exports.InputInput = styled_components_1.default.input.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tmin-width: 0;\n\toutline: none;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tmin-width: 0;\n\toutline: none;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
+exports.InputBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
 exports.Input = core_1.vui(function (props, ref) {
     var _a, _b;
     var _c = __read(react_1.useState(helpers_1.getInitialCount(props)), 2), count = _c[0], setCount = _c[1];
-    var _d = core_1.omitThemingProps(props), autoComplete = _d.autoComplete, autoFocus = _d.autoFocus, className = _d.className, colorSchemeProp = _d.colorScheme, defaultValue = _d.defaultValue, disabled = _d.disabled, iconLeft = _d.iconLeft, iconRight = _d.iconRight, _e = _d.inputProps, inputProps = _e === void 0 ? {} : _e, inputRef = _d.inputRef, isInvalid = _d.isInvalid, itemLeft = _d.itemLeft, itemRight = _d.itemRight, _f = _d.length, length = _f === void 0 ? 'fluid' : _f, maxLength = _d.maxLength, name = _d.name, onBlur = _d.onBlur, onChangeProp = _d.onChange, onFocus = _d.onFocus, placeholder = _d.placeholder, readOnly = _d.readOnly, required = _d.required, showCount = _d.showCount, _g = _d.state, state = _g === void 0 ? '' : _g, stateMapping = _d.stateMapping, _h = _d.type, type = _h === void 0 ? 'text' : _h, value = _d.value, rest = __rest(_d, ["autoComplete", "autoFocus", "className", "colorScheme", "defaultValue", "disabled", "iconLeft", "iconRight", "inputProps", "inputRef", "isInvalid", "itemLeft", "itemRight", "length", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "showCount", "state", "stateMapping", "type", "value"]);
+    var _d = core_1.omitThemingProps(props), autoComplete = _d.autoComplete, autoFocus = _d.autoFocus, className = _d.className, colorSchemeProp = _d.colorScheme, defaultValue = _d.defaultValue, disabled = _d.disabled, iconLeft = _d.iconLeft, iconRight = _d.iconRight, inputProps = _d.inputProps, inputRef = _d.inputRef, isInvalid = _d.isInvalid, itemLeft = _d.itemLeft, itemRight = _d.itemRight, max = _d.max, maxLength = _d.maxLength, min = _d.min, name = _d.name, onBlur = _d.onBlur, onChangeProp = _d.onChange, onFocus = _d.onFocus, pattern = _d.pattern, placeholder = _d.placeholder, readOnly = _d.readOnly, required = _d.required, showCount = _d.showCount, _e = _d.state, state = _e === void 0 ? '' : _e, stateMapping = _d.stateMapping, step = _d.step, _f = _d.type, type = _f === void 0 ? 'text' : _f, value = _d.value, rest = __rest(_d, ["autoComplete", "autoFocus", "className", "colorScheme", "defaultValue", "disabled", "iconLeft", "iconRight", "inputProps", "inputRef", "isInvalid", "itemLeft", "itemRight", "max", "maxLength", "min", "name", "onBlur", "onChange", "onFocus", "pattern", "placeholder", "readOnly", "required", "showCount", "state", "stateMapping", "step", "type", "value"]);
     var states = __assign(__assign({}, consts_1.inputStateMapping), stateMapping);
-    var _j = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, stateColorScheme = _j.colorScheme, stateIconProps = _j.iconProps;
+    var _g = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, stateColorScheme = _g.colorScheme, stateIconProps = _g.iconProps;
     var stateProps = utils_1.filterUndefined({
         colorScheme: (_b = colorSchemeProp !== null && colorSchemeProp !== void 0 ? colorSchemeProp : (isInvalid ? 'red' : undefined)) !== null && _b !== void 0 ? _b : stateColorScheme
     });
-    var _k = core_1.useStyleConfig('Input', __assign(__assign({}, stateProps), props)), fontSize = _k.fontSize, iconSize = _k.iconSize, styles = __rest(_k, ["fontSize", "iconSize"]);
+    var _h = core_1.useStyleConfig('Input', __assign(__assign({}, stateProps), props)), fontSize = _h.fontSize, iconSize = _h.iconSize, styles = __rest(_h, ["fontSize", "iconSize"]);
     function onChange(e) {
         setCount(e.target.value.length);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
     }
     var iconColor = !disabled ? 'blue.80' : 'grey.50';
-    // const iconRight = iconRightProp ?? states[state]?.iconRight
     var aliasedProps = utils_1.filterUndefined({
         bg: readOnly ? 'grey.20' : undefined,
         focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
-        focusWithinRingColor: readOnly ? 'transparent' : undefined,
-        maxW: consts_1.inputLengths[length]
+        focusWithinRingColor: readOnly ? 'transparent' : undefined
     });
-    return (react_1.default.createElement(exports.InputBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-input', disabled && 'disabled', className), px: 1, ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), itemLeft !== null && itemLeft !== void 0 ? itemLeft : (iconLeft && react_1.default.createElement(icon_1.default, { color: iconColor, icon: iconLeft, size: iconSize })),
-        react_1.default.createElement(exports.InputInput, __assign({ className: "vui-inputInput", placeholderColor: "grey.60", ref: inputRef }, {
+    return (react_1.default.createElement(exports.InputBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-input', disabled && 'disabled', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), itemLeft !== null && itemLeft !== void 0 ? itemLeft : (iconLeft && react_1.default.createElement(icon_1.default, { color: iconColor, icon: iconLeft, ml: 1, size: iconSize })),
+        react_1.default.createElement(exports.InputInput, __assign({ borderRadius: "md", className: "vui-inputInput", placeholderColor: "grey.60", px: 1, ref: inputRef }, {
             autoComplete: autoComplete,
             autoFocus: autoFocus,
             defaultValue: defaultValue,
             disabled: disabled,
             fontSize: fontSize,
+            max: max,
             maxLength: maxLength,
+            min: min,
             name: name,
             onBlur: onBlur,
             onChange: onChange,
             onFocus: onFocus,
+            pattern: pattern,
             placeholder: placeholder,
             readOnly: readOnly,
             required: required,
+            step: step,
             type: type,
             value: value
-        }, inputProps)), itemRight !== null && itemRight !== void 0 ? itemRight : (iconRight && react_1.default.createElement(icon_1.default, { color: iconColor, icon: iconRight, size: iconSize })),
-        state && react_1.default.createElement(icon_1.default, __assign({ size: iconSize }, stateIconProps)),
-        showCount && (react_1.default.createElement(t_1.default, { color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 2px)" },
+        }, inputProps)), itemRight !== null && itemRight !== void 0 ? itemRight : (iconRight && react_1.default.createElement(icon_1.default, { color: iconColor, icon: iconRight, mr: 1, size: iconSize })),
+        state && react_1.default.createElement(icon_1.default, __assign({ mr: 1, size: iconSize }, stateIconProps)),
+        showCount && (react_1.default.createElement(t_1.default, { color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
             count,
             " / ",
             maxLength))));

package/input/input.types.d.ts

@@ -1,10 +1,8 @@
 /// <reference types="react" />
-import { inputLengths } from './consts';
 import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../core';
 import { IconProp, IconProps } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export declare type InputLength = keyof typeof inputLengths;
 export interface InputProps extends SystemProps, ThemingProps<'Input'> {
     autoComplete?: string;
     autoFocus?: boolean;
@@ -13,24 +11,27 @@ export interface InputProps extends SystemProps, ThemingProps<'Input'> {
     disabled?: boolean;
     iconLeft?: IconProp;
     iconRight?: IconProp;
-    inputProps?: PropsOf<'input'>;
+    inputProps?: PropsOf<'input', SystemProps>;
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
     isInvalid?: boolean;
     itemLeft?: React.ReactNode;
     itemRight?: React.ReactNode;
-    length?: InputLength;
+    max?: number | string;
     maxLength?: number;
+    min?: number | string;
     name?: string;
     onBlur?: FocusEventHandler;
     onChange?: ChangeEventHandler;
     onFocus?: FocusEventHandler;
+    pattern?: string;
     placeholder?: string;
     readOnly?: boolean;
     required?: boolean;
     showCount?: boolean;
     state?: InputState;
     stateMapping?: InputStateMapping;
-    type?: string;
+    step?: number | string;
+    type?: InputType;
     value?: number | string;
 }
 export declare type InputState = 'default' | 'error' | 'loading' | 'success';
@@ -38,3 +39,4 @@ export declare type InputStateMapping = Record<string, {
     colorScheme?: InputProps['colorScheme'];
     iconProps: IconProps;
 }>;
+export declare type InputType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';

package/label/label.js

@@ -37,7 +37,7 @@ var icon_1 = __importDefault(require("../icon"));
 var system_1 = require("../system");
 var utils_1 = require("../utils");
 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.LabelBase = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\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: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\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, 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", "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"]);
@@ -58,7 +58,7 @@ exports.Label = core_1.vui(function (props, ref) {
         : {};
     var aliasedProps = utils_1.filterUndefined({
         borderRadius: isRound ? h / 2 : undefined,
-        boxShadow: isElevated ? 2 : undefined,
+        boxShadow: isElevated ? '1' : undefined,
         fontWeight: weight,
         textTransform: casing,
         w: isFullWidth ? '100%' : undefined

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Veracity UI components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",

package/switch/switch.types.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
@@ -6,12 +6,12 @@ export interface SwitchProps extends SystemProps, ThemingProps<'Switch'> {
     checked?: boolean;
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
-    innerLabelOff?: React.ReactElement | string;
-    innerLabelOn?: React.ReactElement | string;
+    innerLabelOff?: ReactNode;
+    innerLabelOn?: ReactNode;
     inputProps?: HTMLAttributes<HTMLInputElement>;
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
-    labelLeft?: React.ReactElement | string;
-    labelRight?: React.ReactElement | string;
+    labelLeft?: ReactNode;
+    labelRight?: ReactNode;
     name?: string;
     onBlur?: FocusEventHandler;
     onChange?: ChangeEventHandler;

package/switch/switchButton.types.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
@@ -6,8 +6,8 @@ export interface SwitchButtonProps extends SystemProps, ThemingProps<'Switch'> {
     checked?: boolean;
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
-    innerLabelOff?: React.ReactElement | string;
-    innerLabelOn?: React.ReactElement | string;
+    innerLabelOff?: ReactNode;
+    innerLabelOn?: ReactNode;
     inputProps?: HTMLAttributes<HTMLInputElement>;
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
     name?: string;

package/system/effects.d.ts

@@ -1,7 +1,8 @@
-import { SystemProp, VariantsType } from '@xstyled/system';
+import { SystemProp } from '@xstyled/system';
 import * as CSS from 'csstype';
 import { VuiTheme } from '../theme';
-export declare type ShadowGetter = VariantsType<VuiTheme['shadows']>;
+import { AnyString } from '../utils';
+export declare type ShadowGetter = keyof VuiTheme['shadows'] | AnyString;
 declare type OpacityProp = SystemProp<CSS.Property.Opacity, VuiTheme>;
 export interface OpacityProps {
     opacity?: OpacityProp;

package/textarea/textarea.js

@@ -106,7 +106,7 @@ exports.Textarea = core_1.vui(function (props, ref) {
             resize: resize,
             value: value
         }, styles.textarea, aliasedProps, textareaProps)),
-        showCount && (react_1.default.createElement(t_1.default, { color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 2px)" },
+        showCount && (react_1.default.createElement(t_1.default, { color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
             count,
             " / ",
             maxLength))));

package/theme/components.d.ts

@@ -770,8 +770,8 @@ declare const _default: {
             default: {
                 bg: string;
                 borderRadius: string;
-                shadow: number;
-                hoverShadow: number;
+                shadow: string;
+                hoverShadow: string;
                 p: number;
             };
             outlined: {

package/theme/defaultTheme.d.ts

@@ -134,12 +134,23 @@ declare const defaultTheme: {
         xl: number;
     };
     shadows: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
+        '0': string;
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        t1: string;
+        t2: string;
+        t3: string;
+        t4: string;
+        r1: string;
+        r2: string;
+        r3: string;
+        r4: string;
+        l1: string;
+        l2: string;
+        l3: string;
+        l4: string;
     };
     sizes: {};
     spaces: {};
@@ -921,8 +932,8 @@ declare const defaultTheme: {
                 default: {
                     bg: string;
                     borderRadius: string;
-                    shadow: number;
-                    hoverShadow: number;
+                    shadow: string;
+                    hoverShadow: string;
                     p: number;
                 };
                 outlined: {

package/theme/foundations/index.d.ts

@@ -134,12 +134,23 @@ declare const _default: {
         xl: number;
     };
     shadows: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
+        '0': string;
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        t1: string;
+        t2: string;
+        t3: string;
+        t4: string;
+        r1: string;
+        r2: string;
+        r3: string;
+        r4: string;
+        l1: string;
+        l2: string;
+        l3: string;
+        l4: string;
     };
     sizes: {};
     spaces: {};

package/theme/foundations/shadows.d.ts

@@ -1,9 +1,20 @@
 declare const _default: {
-    0: string;
-    1: string;
-    2: string;
-    3: string;
-    4: string;
-    5: string;
+    '0': string;
+    '1': string;
+    '2': string;
+    '3': string;
+    '4': string;
+    t1: string;
+    t2: string;
+    t3: string;
+    t4: string;
+    r1: string;
+    r2: string;
+    r3: string;
+    r4: string;
+    l1: string;
+    l2: string;
+    l3: string;
+    l4: string;
 };
 export default _default;

package/theme/foundations/shadows.js

@@ -1,11 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var colors_1 = require("./colors");
+var utils_1 = require("../../utils");
+var greyLight = utils_1.hexToRGB(colors_1.grey[80], 0.4);
+var greyDark = utils_1.hexToRGB(colors_1.grey[80], 0.6);
 exports.default = {
-    0: "0px 0px 0px 0px " + colors_1.grey[80],
-    1: "0px 2px 7px -3px " + colors_1.grey[80],
-    2: "0px 6px 23px -8px " + colors_1.grey[80],
-    3: "0px 16px 42px -15px " + colors_1.grey[80],
-    4: "0px 18px 54px -8px " + colors_1.grey[80],
-    5: "0px 28px 77px -5px " + colors_1.grey[80]
+    '0': "0 0 0 0 #fff",
+    '1': "0 2px 5px 0 " + greyLight,
+    '2': "0 4px 12px 0 " + greyLight,
+    '3': "0 7px 20px 0 " + greyDark,
+    '4': "0 12px 30px 0 " + greyDark,
+    t1: "0 -2px 5px 0 " + greyLight,
+    t2: "0 -4px 12px 0 " + greyLight,
+    t3: "0 -7px 20px 0 " + greyDark,
+    t4: "0 -12px 30px 0 " + greyDark,
+    r1: "2px 0 5px 0 " + greyLight,
+    r2: "4px 0 12px 0 " + greyLight,
+    r3: "7px 0 20px 0 " + greyDark,
+    r4: "12px 0 30px 0 " + greyDark,
+    l1: "-2px 0 5px 0 " + greyLight,
+    l2: "-4px 0 12px 0 " + greyLight,
+    l3: "-7px 0 20px 0 " + greyDark,
+    l4: "-12px 0 30px 0 " + greyDark
 };

package/tile/theme.d.ts

@@ -7,8 +7,8 @@ declare const _default: {
         default: {
             bg: string;
             borderRadius: string;
-            shadow: number;
-            hoverShadow: number;
+            shadow: string;
+            hoverShadow: string;
             p: number;
         };
         outlined: {

package/tile/theme.js

@@ -8,8 +8,8 @@ var variants = {
     default: {
         bg: 'white',
         borderRadius: 'md',
-        shadow: 2,
-        hoverShadow: 4,
+        shadow: '1',
+        hoverShadow: '3',
         p: 2
     },
     outlined: {

package/utils/index.d.ts

@@ -1,4 +1,4 @@
-export * from './dom';
 export * from './function';
 export * from './object';
+export * from './styles';
 export * from './types';

package/utils/index.js

@@ -10,7 +10,7 @@ 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);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./dom"), exports);
 __exportStar(require("./function"), exports);
 __exportStar(require("./object"), exports);
+__exportStar(require("./styles"), exports);
 __exportStar(require("./types"), exports);

package/utils/styles.d.ts

@@ -0,0 +1,4 @@
+/** Concatenates individual className arguments and returns a single string. */
+export declare function cs(...classNames: any[]): string;
+/** Converts hex color value to rgb with optional alpha property */
+export declare function hexToRGB(hex: string, alpha?: number): string;

package/utils/styles.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hexToRGB = exports.cs = void 0;
+/** Concatenates individual className arguments and returns a single string. */
+function cs() {
+    var classNames = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classNames[_i] = arguments[_i];
+    }
+    return classNames.filter(Boolean).join(' ');
+}
+exports.cs = cs;
+/** Converts hex color value to rgb with optional alpha property */
+function hexToRGB(hex, alpha) {
+    var hexStr = hex;
+    if (hexStr.charAt(0) === '#') {
+        hexStr = hexStr.slice(1);
+    }
+    if (hexStr.length < 4) {
+        hexStr = hexStr
+            .split('')
+            .map(function (char) { return char + char; })
+            .join('');
+    }
+    var r = parseInt(hexStr.slice(0, 2), 16);
+    var g = parseInt(hexStr.slice(2, 4), 16);
+    var b = parseInt(hexStr.slice(4, 6), 16);
+    if (alpha !== undefined) {
+        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
+    }
+    else {
+        return "rgb(" + r + ", " + g + ", " + b + ")";
+    }
+}
+exports.hexToRGB = hexToRGB;

package/alert/alertMessage.d.ts

@@ -1,3 +0,0 @@
-import { BoxProps } from '../box';
-export declare const AlertMessage: import("../core").VuiComponent<"div", BoxProps>;
-export default AlertMessage;

package/alert/alertMessage.js

@@ -1,31 +0,0 @@
-"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.AlertMessage = void 0;
-var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
-var core_1 = require("../core");
-var box_1 = __importDefault(require("../box"));
-exports.AlertMessage = core_1.vui(function (props, ref) {
-    var _a;
-    var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, alertProps), props);
-    var styles = core_1.useStyleConfig('Alert', mergedProps);
-    var isVertical = mergedProps.isVertical;
-    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-alertMessage", column: isVertical, flex: "1", minW: 0, py: 0.5, ref: ref }, styles.message, props)));
-});
-exports.AlertMessage.displayName = 'AlertMessage';
-exports.default = exports.AlertMessage;

package/icons/baseIcons/cus/cusCheckboxSelected.js

@@ -1,7 +0,0 @@
-"use strict";
-/* eslint-disable */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    details: [32, 33, [], '', 'M27 2.5C28.5878 2.5 29.8875 3.73353 29.9931 5.2946L30 5.5V27.5C30 29.0878 28.7665 30.3875 27.2054 30.4931L27 30.5H5C3.41216 30.5 2.11247 29.2665 2.00692 27.7054L2 27.5V5.5C2 3.91216 3.23353 2.61247 4.7946 2.50692L5 2.5H27ZM23.2674 10.1066L13.0523 20.2397L8.74131 15.8939C8.44963 15.5998 7.97475 15.5979 7.68069 15.8896L7.14819 16.4178C6.85413 16.7095 6.85219 17.1844 7.14394 17.4784L12.5113 22.8892C12.803 23.1833 13.2779 23.1852 13.5719 22.8934L24.8519 11.7039C25.1459 11.4123 25.1479 10.9374 24.8562 10.6433L24.328 10.1108C24.0363 9.81675 23.5614 9.81481 23.2674 10.1066Z'],
-    name: 'cusCheckboxSelected'
-};

package/icons/baseIcons/cus/cusRadio.d.ts

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

package/icons/baseIcons/cus/cusRadio.js

@@ -1,7 +0,0 @@
-"use strict";
-/* eslint-disable */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    details: [32, 32, [], '', ['M16 0.5C7.4375 0.5 0.5 7.4375 0.5 16C0.5 24.5625 7.4375 31.5 16 31.5C24.5625 31.5 31.5 24.5625 31.5 16C31.5 7.4375 24.5625 0.5 16 0.5ZM29.5 16C29.5 23.4188 23.4937 29.5 16 29.5C8.58125 29.5 2.5 23.4937 2.5 16C2.5 8.58125 8.50625 2.5 16 2.5C23.4188 2.5 29.5 8.50625 29.5 16Z', 'M26 16C26 21.5228 21.5228 26 16 26C10.4772 26 6 21.5228 6 16C6 10.4772 10.4772 6 16 6C21.5228 6 26 10.4772 26 16Z']],
-    name: 'cusRadio'
-};

package/icons/baseIcons/cus/cusSquareMinus.d.ts

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

package/icons/baseIcons/cus/cusSquareMinus.js

@@ -1,7 +0,0 @@
-"use strict";
-/* eslint-disable */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    details: [28, 28, [], '', 'M2 0C0.895431 0 0 0.895431 0 2V26C0 27.1046 0.895431 28 2 28H26C27.1046 28 28 27.1046 28 26V2C28 0.895431 27.1046 0 26 0H2ZM5 12.5C4.44772 12.5 4 12.9477 4 13.5V14.5C4 15.0523 4.44772 15.5 5 15.5H23C23.5523 15.5 24 15.0523 24 14.5V13.5C24 12.9477 23.5523 12.5 23 12.5H5Z'],
-    name: 'cusSquareMinus'
-};

package/utils/dom.d.ts

@@ -1,2 +0,0 @@
-/** Concatenates individual className arguments and returns a single string. */
-export declare function cs(...classNames: any[]): string;

package/utils/dom.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cs = void 0;
-/** Concatenates individual className arguments and returns a single string. */
-function cs() {
-    var classNames = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        classNames[_i] = arguments[_i];
-    }
-    return classNames.filter(Boolean).join(' ');
-}
-exports.cs = cs;