@veracity/vui 0.2.3 → 0.3.0

package/popover/index.js

@@ -0,0 +1,29 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopover = exports.PopoverTrigger = exports.PopoverContent = exports.Popover = exports.default = void 0;
+__exportStar(require("./context"), exports);
+__exportStar(require("./plugins"), exports);
+var popover_1 = require("./popover");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(popover_1).default; } });
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return __importDefault(popover_1).default; } });
+__exportStar(require("./popover.types"), exports);
+var popoverContent_1 = require("./popoverContent");
+Object.defineProperty(exports, "PopoverContent", { enumerable: true, get: function () { return __importDefault(popoverContent_1).default; } });
+var popoverTrigger_1 = require("./popoverTrigger");
+Object.defineProperty(exports, "PopoverTrigger", { enumerable: true, get: function () { return __importDefault(popoverTrigger_1).default; } });
+var usePopover_1 = require("./usePopover");
+Object.defineProperty(exports, "usePopover", { enumerable: true, get: function () { return __importDefault(usePopover_1).default; } });
+__exportStar(require("./usePopover.types"), exports);

package/popover/plugins.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from 'tippy.js';
+/** Closes the popper if 'Escape' is pressed. */
+export declare const closeOnEscPlugin: Plugin;

package/popover/plugins.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.closeOnEscPlugin = void 0;
+/** Closes the popper if 'Escape' is pressed. */
+exports.closeOnEscPlugin = {
+    name: 'closeOnEsc',
+    defaultValue: true,
+    fn: function (_a) {
+        var hide = _a.hide;
+        function onKeyDown(e) {
+            if (e.key === 'Escape') {
+                hide();
+            }
+        }
+        return {
+            onHide: function () {
+                document.removeEventListener('keydown', onKeyDown);
+            },
+            onShow: function () {
+                document.addEventListener('keydown', onKeyDown);
+            }
+        };
+    }
+};

package/popover/popover.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { PopoverProps } from './popover.types';
+import './popover.css';
+declare function Popover({ children, isLazy, ...props }: PopoverProps): JSX.Element;
+declare namespace Popover {
+    var Content: import("..").VuiComponent<"div", import("..").SystemProps>;
+    var Trigger: import("..").VuiComponent<"button", import("..").SystemProps>;
+}
+export default Popover;

package/popover/popover.js

@@ -0,0 +1,32 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var popoverContent_1 = __importDefault(require("./popoverContent"));
+var popoverTrigger_1 = __importDefault(require("./popoverTrigger"));
+var usePopover_1 = __importDefault(require("./usePopover"));
+require("./popover.css");
+function Popover(_a) {
+    var children = _a.children, _b = _a.isLazy, isLazy = _b === void 0 ? true : _b, props = __rest(_a, ["children", "isLazy"]);
+    var popoverProps = (0, usePopover_1.default)(props);
+    var close = popoverProps.close, isOpen = popoverProps.isOpen, open = popoverProps.open;
+    return react_1.default.createElement(context_1.PopoverProvider, { value: popoverProps }, (0, utils_1.runIfFn)(children, { close: close, isOpen: isOpen, open: open }));
+}
+exports.default = Popover;
+Popover.Content = popoverContent_1.default;
+Popover.Trigger = popoverTrigger_1.default;

package/popover/popover.types.d.ts

@@ -0,0 +1,15 @@
+import { SystemProps } from '../system';
+import { RenderProps } from '../utils';
+import { UsePopoverType } from './usePopover';
+import { UsePopoverProps } from './usePopover.types';
+export declare type PopoverContentProps = SystemProps;
+export declare type PopoverProps = UsePopoverProps & {
+    children?: PopoverRenderProps;
+    isLazy?: boolean;
+};
+export declare type PopoverRenderProps = RenderProps<{
+    close: UsePopoverType['close'];
+    isOpen: UsePopoverType['isOpen'];
+    open: UsePopoverType['open'];
+}>;
+export declare type PopoverTriggerProps = SystemProps;

package/popover/popover.types.js

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

package/popover/popoverContent.d.ts

@@ -0,0 +1,2 @@
+export declare const PopoverContent: import("../core").VuiComponent<"div", import("..").SystemProps>;
+export default PopoverContent;

package/popover/popoverContent.js

@@ -0,0 +1,43 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoverContent = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+exports.PopoverContent = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var popoverProps = (_a = (0, context_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {};
+    var isLazy = popoverProps.isLazy, isOpen = popoverProps.isOpen, setPopper = popoverProps.setPopper;
+    var children = props.children, rest = __rest(props, ["children"]);
+    var styles = (0, core_1.useStyleConfig)('Popover', __assign(__assign({}, popoverProps), props));
+    var shouldRenderChildren = isLazy ? isOpen : true;
+    return (react_1.default.createElement(core_1.v.div, __assign({ bg: "white", borderRadius: "md", boxShadow: "2", className: "vui-popoverContent", ref: (0, utils_1.mergeRefs)(setPopper, ref) }, styles.content, rest), shouldRenderChildren ? children : null));
+});
+exports.PopoverContent.displayName = 'PopoverContent';
+exports.default = exports.PopoverContent;

package/popover/popoverTrigger.d.ts

@@ -0,0 +1,2 @@
+export declare const PopoverTrigger: import("../core").VuiComponent<"button", import("..").SystemProps>;
+export default PopoverTrigger;

package/popover/popoverTrigger.js

@@ -0,0 +1,44 @@
+"use strict";
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoverTrigger = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+exports.PopoverTrigger = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var _b = (_a = (0, context_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {}, setReference = _b.setReference, popoverProps = __rest(_b, ["setReference"]);
+    var styles = (0, core_1.useStyleConfig)('Popover', __assign(__assign({}, popoverProps), props));
+    // @ts-ignore - TS incorrectly doesn't recognize 'as' prop
+    var As = props.as, rest = __rest(props, ["as"]);
+    var Element = As || core_1.v.button;
+    return react_1.default.createElement(Element, __assign({ className: "vui-popoverTrigger", ref: (0, utils_1.mergeRefs)(setReference, ref) }, styles.trigger, rest));
+});
+exports.PopoverTrigger.displayName = 'PopoverTrigger';
+exports.default = exports.PopoverTrigger;

package/popover/theme.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {};
+};
+export default _default;

package/popover/theme.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var defaultProps = {};
+var parts = ['content', 'trigger'];
+var sizes = {};
+var variants = {};
+exports.default = {
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

package/popover/usePopover.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Instance, Props as TippyProps } from 'tippy.js';
+import { UsePopoverProps } from './usePopover.types';
+export default function usePopover(props?: UsePopoverProps): {
+    close: () => void | undefined;
+    instance: Instance<TippyProps> | null;
+    isOpen: boolean;
+    open: () => void | undefined;
+    popper: HTMLElement | null;
+    reference: HTMLElement | null;
+    setPopper: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
+    setReference: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
+};
+export declare type UsePopoverType = ReturnType<typeof usePopover>;

package/popover/usePopover.js

@@ -0,0 +1,114 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var tippy_js_1 = __importDefault(require("tippy.js"));
+var react_1 = require("react");
+var utils_1 = require("../utils");
+var plugins_1 = require("./plugins");
+function usePopover(props) {
+    if (props === void 0) { props = {}; }
+    var _a = props.closeOnBlur, closeOnBlur = _a === void 0 ? true : _a, _b = props.closeOnEsc, closeOnEsc = _b === void 0 ? true : _b, _c = props.defaultIsOpen, defaultIsOpen = _c === void 0 ? false : _c, 
+    // disablePortal,
+    isOpenProp = props.isOpen, 
+    // matchWidth,
+    offset = props.offset, onClose = props.onClose, onOpen = props.onOpen, options = props.options, _d = props.placement, placement = _d === void 0 ? 'bottom-start' : _d, plugins = props.plugins, _e = props.trigger, trigger = _e === void 0 ? 'click' : _e;
+    var _f = __read((0, react_1.useState)(isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : defaultIsOpen), 2), isOpen = _f[0], setIsOpen = _f[1];
+    var _g = __read((0, react_1.useState)(null), 2), instance = _g[0], setInstance = _g[1];
+    var _h = __read((0, react_1.useState)(null), 2), reference = _h[0], setReference = _h[1];
+    var _j = __read((0, react_1.useState)(null), 2), popper = _j[0], setPopper = _j[1];
+    var close = (0, react_1.useCallback)(function () { return instance === null || instance === void 0 ? void 0 : instance.hide(); }, [instance]);
+    var onCloseRef = (0, utils_1.useFnRef)(onClose);
+    var onOpenRef = (0, utils_1.useFnRef)(onOpen);
+    var open = (0, react_1.useCallback)(function () { return instance === null || instance === void 0 ? void 0 : instance.show(); }, [instance]);
+    var isControlled = isOpenProp !== undefined;
+    var tippyOptions = (0, react_1.useMemo)(function () {
+        var _a = options !== null && options !== void 0 ? options : {}, onHidden = _a.onHidden, onHide = _a.onHide, onShow = _a.onShow, _b = _a.plugins, optionsPlugins = _b === void 0 ? [] : _b, otherOptions = __rest(_a, ["onHidden", "onHide", "onShow", "plugins"]);
+        var mergedPlugins = optionsPlugins.concat(plugins !== null && plugins !== void 0 ? plugins : []);
+        if (!isControlled && closeOnEsc)
+            mergedPlugins.push(plugins_1.closeOnEscPlugin);
+        return __assign({ arrow: false, duration: [200, 150], hideOnClick: !isControlled ? closeOnBlur : false, interactive: true, offset: offset, onHidden: function (instance) {
+                setIsOpen(false);
+                onHidden === null || onHidden === void 0 ? void 0 : onHidden(instance);
+            }, onHide: function (instance) {
+                var _a;
+                (_a = onCloseRef.current) === null || _a === void 0 ? void 0 : _a.call(onCloseRef, instance);
+                onHide === null || onHide === void 0 ? void 0 : onHide(instance);
+            }, onShow: function (instance) {
+                var _a;
+                setIsOpen(true);
+                (_a = onOpenRef.current) === null || _a === void 0 ? void 0 : _a.call(onOpenRef, instance);
+                onShow === null || onShow === void 0 ? void 0 : onShow(instance);
+            }, placement: placement, plugins: mergedPlugins, showOnCreate: defaultIsOpen, trigger: !isControlled ? trigger : 'manual' }, otherOptions);
+    }, [closeOnBlur, closeOnEsc, placement, trigger]);
+    // Create a new Tippy instance
+    (0, react_1.useEffect)(function () {
+        if (popper !== null && reference !== null) {
+            // Destroy old instance to ensure new options work
+            instance === null || instance === void 0 ? void 0 : instance.destroy();
+            var newInstance = (0, tippy_js_1.default)(reference, __assign(__assign({}, tippyOptions), { content: popper }));
+            setInstance(newInstance);
+        }
+    }, [popper, tippyOptions, trigger]);
+    // Handle showing/hiding popup in controlled mode
+    (0, react_1.useEffect)(function () {
+        if (isControlled) {
+            if (isOpenProp) {
+                instance === null || instance === void 0 ? void 0 : instance.show();
+            }
+            else {
+                instance === null || instance === void 0 ? void 0 : instance.hide();
+            }
+        }
+    }, [isOpenProp]);
+    return {
+        close: close,
+        instance: instance,
+        isOpen: isOpen,
+        open: open,
+        popper: popper,
+        reference: reference,
+        setPopper: setPopper,
+        setReference: setReference
+    };
+}
+exports.default = usePopover;

package/popover/usePopover.types.d.ts

@@ -0,0 +1,16 @@
+import { Instance, Placement, Props } from 'tippy.js';
+import { AnyString } from '../utils';
+export declare type PopoverTrigger = 'click' | 'focus' | 'focusin' | 'manual' | 'mouseenter';
+export declare type UsePopoverProps = {
+    closeOnBlur?: boolean;
+    closeOnEsc?: boolean;
+    defaultIsOpen?: boolean;
+    isOpen?: boolean;
+    offset?: Props['offset'];
+    onClose?: (instance: Instance<Props>) => void;
+    onOpen?: (instance: Instance<Props>) => void;
+    options?: Partial<Props>;
+    placement?: Placement;
+    plugins?: Props['plugins'];
+    trigger?: PopoverTrigger | AnyString;
+};

package/popover/usePopover.types.js

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

package/radio/context.js

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

package/switch/context.js

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

package/system/flexboxGrids.d.ts

@@ -0,0 +1,13 @@
+import { SystemProp } from '@xstyled/system';
+import { VuiTheme } from '../theme';
+declare type RowProp = SystemProp<boolean, VuiTheme>;
+export interface RowProps {
+    row?: RowProp;
+}
+declare type ColProp = SystemProp<true | 'auto' | string | number, VuiTheme>;
+export interface ColProps {
+    col?: ColProp;
+}
+export interface FlexboxGridsProps extends RowProps, ColProps {
+}
+export {};

package/system/flexboxGrids.js

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

package/system/grids.d.ts

@@ -0,0 +1,55 @@
+import { SystemProp } from '@xstyled/system';
+import * as CSS from 'csstype';
+import { VuiTheme } from '../theme';
+import { SpaceGetter } from './space';
+declare type GapProp = SystemProp<SpaceGetter | CSS.Property.Gap, VuiTheme>;
+export interface GapProps {
+    gap?: GapProp;
+}
+declare type ColumnGapProp = SystemProp<SpaceGetter | CSS.Property.ColumnGap, VuiTheme>;
+export interface ColumnGapProps {
+    columnGap?: ColumnGapProp;
+}
+declare type RowGapProp = SystemProp<SpaceGetter | CSS.Property.RowGap, VuiTheme>;
+export interface RowGapProps {
+    rowGap?: RowGapProp;
+}
+declare type GridColumnProp = SystemProp<CSS.Property.GridColumn, VuiTheme>;
+export interface GridColumnProps {
+    gridColumn?: GridColumnProp;
+}
+declare type GridRowProp = SystemProp<CSS.Property.GridRow, VuiTheme>;
+export interface GridRowProps {
+    gridRow?: GridRowProp;
+}
+declare type GridAutoFlowProp = SystemProp<CSS.Property.GridAutoFlow, VuiTheme>;
+export interface GridAutoFlowProps {
+    gridAutoFlow?: GridAutoFlowProp;
+}
+declare type GridAutoColumnsProp = SystemProp<CSS.Property.GridAutoColumns, VuiTheme>;
+export interface GridAutoColumnsProps {
+    gridAutoColumns?: GridAutoColumnsProp;
+}
+declare type GridAutoRowsProp = SystemProp<CSS.Property.GridAutoRows, VuiTheme>;
+export interface GridAutoRowsProps {
+    gridAutoRows?: GridAutoRowsProp;
+}
+declare type GridTemplateColumnsProp = SystemProp<CSS.Property.GridTemplateColumns, VuiTheme>;
+export interface GridTemplateColumnsProps {
+    gridTemplateColumns?: GridTemplateColumnsProp;
+}
+declare type GridTemplateRowsProp = SystemProp<CSS.Property.GridTemplateRows, VuiTheme>;
+export interface GridTemplateRowsProps {
+    gridTemplateRows?: GridTemplateRowsProp;
+}
+declare type GridTemplateAreasProp = SystemProp<CSS.Property.GridTemplateAreas, VuiTheme>;
+export interface GridTemplateAreasProps {
+    gridTemplateAreas?: GridTemplateAreasProp;
+}
+declare type GridAreaProp = SystemProp<CSS.Property.GridArea, VuiTheme>;
+export interface GridAreaProps {
+    gridArea?: GridAreaProp;
+}
+export interface GridsProps extends GapProps, ColumnGapProps, RowGapProps, GridColumnProps, GridRowProps, GridAutoFlowProps, GridAutoColumnsProps, GridAutoRowsProps, GridTemplateColumnsProps, GridTemplateRowsProps, GridTemplateAreasProps, GridAreaProps {
+}
+export {};

package/system/grids.js

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

package/system/system.d.ts

@@ -3,6 +3,8 @@ import { BackgroundColorProps } from './backgrounds';
 import { BordersProps } from './borders';
 import { EffectsProps } from './effects';
 import { FlexboxesProps } from './flexboxes';
+import { FlexboxGridsProps } from './flexboxGrids';
+import { GridsProps } from './grids';
 import { InteractivityProps } from './interactivity';
 import { IsTruncatedProps, MaxLinesProps, SpaceAroundProps, WordBreakProps } from './custom';
 import { LayoutProps } from './layout';
@@ -12,7 +14,7 @@ import { TablesProps } from './tables';
 import { TransformsProps } from './transforms';
 import { TransitionsProps } from './transitions';
 import { TypographyProps } from './typography';
-export interface SystemProps extends AnimationsProps, BackgroundColorProps, BordersProps, EffectsProps, FlexboxesProps, InteractivityProps, IsTruncatedProps, LayoutProps, MaxLinesProps, SizingProps, SpaceProps, SpaceAroundProps, TablesProps, TransformsProps, TransitionsProps, TypographyProps, WordBreakProps {
+export interface SystemProps extends AnimationsProps, BackgroundColorProps, BordersProps, EffectsProps, FlexboxesProps, FlexboxGridsProps, GridsProps, InteractivityProps, IsTruncatedProps, LayoutProps, MaxLinesProps, SizingProps, SpaceProps, SpaceAroundProps, TablesProps, TransformsProps, TransitionsProps, TypographyProps, WordBreakProps {
 }
 declare const _default: import("@xstyled/styled-components").StyleGenerator;
 export default _default;

package/system/system.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var styled_components_1 = require("@xstyled/styled-components");
 var custom_1 = require("./custom");
-exports.default = (0, styled_components_1.compose)(styled_components_1.animation, styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.interactivity, custom_1.isTruncated, styled_components_1.layout, custom_1.maxLines, styled_components_1.sizing, styled_components_1.space, custom_1.spaceAround, styled_components_1.tables, styled_components_1.transforms, styled_components_1.transitions, styled_components_1.typography, custom_1.wordBreak);
+exports.default = (0, styled_components_1.compose)(styled_components_1.animation, styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.flexboxGrids, styled_components_1.grids, styled_components_1.interactivity, custom_1.isTruncated, styled_components_1.layout, custom_1.maxLines, styled_components_1.sizing, styled_components_1.space, custom_1.spaceAround, styled_components_1.tables, styled_components_1.transforms, styled_components_1.transitions, styled_components_1.typography, custom_1.wordBreak);

package/system/typography.d.ts

@@ -40,6 +40,7 @@ export interface TextTransformProps {
 declare type TextDecoration = Globals | 'overline' | 'underline' | 'line-through';
 declare type TextDecorationProp = SystemProp<TextDecoration, VuiTheme>;
 export interface TextDecorationProps {
+    hoverTextDecoration?: TextDecorationProp;
     textDecoration?: TextDecorationProp;
 }
 declare type TextAlignProp = SystemProp<Property.TextAlign, VuiTheme>;

package/tag/context.js

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

package/tag/tagButton.js

@@ -35,7 +35,7 @@ exports.TagButton = (0, core_1.vui)(function (props, ref) {
     var _b = (_a = (0, context_1.useTag)()) !== null && _a !== void 0 ? _a : {}, disabled = _b.disabled, tagProps = __rest(_b, ["disabled"]);
     var mergedProps = __assign(__assign({}, tagProps), props);
     var styles = (0, core_1.useStyleConfig)('Tag', mergedProps);
-    return (react_1.default.createElement(button_1.default, __assign({ className: "vui-tagButton", colorScheme: mergedProps.colorScheme, disabled: disabled, icon: "falTimes", isRound: true, mr: -0.5, ref: ref }, styles.button, props)));
+    return (react_1.default.createElement(button_1.default, __assign({ borderColor: "transparent", className: "vui-tagButton", colorScheme: mergedProps.colorScheme, disabled: disabled, hoverBorderColor: "transparent", icon: "falTimes", mr: -0.5, ref: ref, variant: "text" }, styles.button, props)));
 });
 exports.TagButton.displayName = 'TagButton';
 exports.default = exports.TagButton;

package/tag/theme.d.ts

@@ -7,13 +7,10 @@ declare function variantSolid(props: Dict): {
         color: string;
     };
     button: {
-        hoverBorderColor: string;
-        borderColor: string;
-        color: string;
         hoverBg: string;
         activeBg: string;
         bg: string;
-        variant: string;
+        color: string;
     };
 };
 declare function variantSubtle(props: Dict): {
@@ -24,12 +21,9 @@ declare function variantSubtle(props: Dict): {
         color: string;
     };
     button: {
-        hoverBorderColor: string;
-        borderColor: string;
-        color: string;
         hoverBg: string;
         activeBg: string;
-        variant: string;
+        color: string;
     };
 };
 declare const _default: {
@@ -52,7 +46,6 @@ declare const _default: {
             icon: {
                 size: string;
             };
-            text: {};
         };
         md: {
             container: {
@@ -66,7 +59,6 @@ declare const _default: {
             icon: {
                 size: string;
             };
-            text: {};
         };
         lg: {
             container: {
@@ -80,7 +72,6 @@ declare const _default: {
             icon: {
                 size: string;
             };
-            text: {};
         };
     };
     variants: {