@veracity/vui 0.6.0 → 0.6.2

package/pagination/paginationGoToPage.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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 };
 };
@@ -20,9 +31,11 @@ var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var input_1 = __importDefault(require("../input"));
 var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays a number input, which allows quickly jumping between pages. */
 exports.PaginationGoToPage = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, rest = __rest(props, ["className"]);
     var _a = (0, context_1.usePaginationContext)(), onPageChange = _a.onPageChange, pageCount = _a.pageCount;
     var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
     var onChange = function (e) {
@@ -31,7 +44,7 @@ exports.PaginationGoToPage = (0, core_1.vui)(function (props, ref) {
             onPageChange(Math.floor(value));
         }
     };
-    return (react_1.default.createElement(box_1.default, __assign({ centerV: true, className: "vui-paginationGoToPage", lineHeight: "normal", ref: ref }, styles.goToPage, props),
+    return (react_1.default.createElement(box_1.default, __assign({ centerV: true, className: (0, utils_1.cs)('vui-paginationGoToPage', className), lineHeight: "normal", ref: ref }, styles.goToPage, rest),
         react_1.default.createElement(t_1.default, { size: "sm", weight: "medium" }, "Go to"),
         react_1.default.createElement(input_1.default, { max: pageCount, min: 1, mx: 1, onChange: onChange, size: "sm", type: "number", w: 56 }),
         react_1.default.createElement(t_1.default, { size: "sm", weight: "medium" }, "Page")));

package/pagination/paginationNavigation.js

@@ -55,10 +55,10 @@ var paginationEllipsis_1 = __importDefault(require("./paginationEllipsis"));
 var paginationPrevNext_1 = __importDefault(require("./paginationPrevNext"));
 /** Displays a set of page navigation buttons. */
 exports.PaginationNavigation = (0, core_1.vui)(function (props, ref) {
-    var children = props.children, rest = __rest(props, ["children"]);
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
     var items = (0, context_1.usePaginationContext)().items;
     var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
-    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-paginationNavigation", gap: 1, ref: ref, wrap: true }, styles.navigation, rest), children !== null && children !== void 0 ? children : items.map(function (item) { return (react_1.default.createElement(react_1.Fragment, { key: item },
+    return (react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-paginationNavigation', className), gap: 1, ref: ref, wrap: true }, styles.navigation, rest), children !== null && children !== void 0 ? children : items.map(function (item) { return (react_1.default.createElement(react_1.Fragment, { key: item },
         item === 'previous' && react_1.default.createElement(paginationPrevNext_1.default, { direction: "previous" }),
         (0, utils_1.isNumber)(item) && react_1.default.createElement(paginationButton_1.default, { page: item }),
         (0, utils_1.isString)(item) && item.includes('ellipsis') && react_1.default.createElement(paginationEllipsis_1.default, null),

package/pagination/paginationPrevNext.js

@@ -29,10 +29,11 @@ exports.PaginationPrevNext = void 0;
 var react_1 = __importDefault(require("react"));
 var button_1 = __importDefault(require("../button"));
 var core_1 = require("../core");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays a page navigation button, which navigates forward or backward. */
 exports.PaginationPrevNext = (0, core_1.vui)(function (props, ref) {
-    var direction = props.direction, rest = __rest(props, ["direction"]);
+    var className = props.className, direction = props.direction, rest = __rest(props, ["className", "direction"]);
     var _a = (0, context_1.usePaginationContext)(), onPageChange = _a.onPageChange, page = _a.page, pageCount = _a.pageCount;
     var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
     var isPrev = direction === 'previous';
@@ -42,7 +43,7 @@ exports.PaginationPrevNext = (0, core_1.vui)(function (props, ref) {
         icon: isPrev ? 'falAngleLeft' : 'falAngleRight',
         onClick: function () { return onPageChange(page + pageChange); }
     };
-    return (react_1.default.createElement(button_1.default, __assign({ className: "vui-paginationPrevNext", minW: 0, ref: ref, size: "sm", variant: "text" }, styles.prevNext, directionProps, rest)));
+    return (react_1.default.createElement(button_1.default, __assign({ className: (0, utils_1.cs)('vui-paginationPrevNext', className), minW: 0, ref: ref, size: "sm", variant: "text" }, styles.prevNext, directionProps, rest)));
 });
 exports.PaginationPrevNext.displayName = 'PaginationPrevNext';
 exports.default = exports.PaginationPrevNext;

package/pagination/paginationResults.js

@@ -29,13 +29,14 @@ exports.PaginationResults = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays an action button within the Pagination. */
 exports.PaginationResults = (0, core_1.vui)(function (props, ref) {
-    var children = props.children, rest = __rest(props, ["children"]);
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
     var _a = (0, context_1.usePaginationContext)(), count = _a.count, rangeEnd = _a.rangeEnd, rangeStart = _a.rangeStart;
     var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
-    return (react_1.default.createElement(t_1.default, __assign({ className: "vui-paginationResults", color: "grey.80", ref: ref, size: "sm", weight: "medium" }, styles.results, rest), children !== null && children !== void 0 ? children : "Showing " + rangeStart + " to " + rangeEnd + " of " + count + " results."));
+    return (react_1.default.createElement(t_1.default, __assign({ className: (0, utils_1.cs)('vui-paginationResults', className), color: "grey.80", ref: ref, size: "sm", weight: "medium" }, styles.results, rest), children !== null && children !== void 0 ? children : "Showing " + rangeStart + " to " + rangeEnd + " of " + count + " results."));
 });
 exports.PaginationResults.displayName = 'PaginationResults';
 exports.default = exports.PaginationResults;

package/popover/popoverContent.js

@@ -34,15 +34,15 @@ var context_1 = require("./context");
 /** Displays provided content in an overlaying wrapper. */
 exports.PopoverContent = (0, core_1.vui)(function (props, ref) {
     var _a;
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
     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 (
     // Wrapping div prevents an error thrown when conditionally unmounting this component
     react_1.default.createElement("div", null,
-        react_1.default.createElement(box_1.default, __assign({ bg: "white", borderRadius: "md", boxShadow: "2", className: "vui-popoverContent", overflowY: "auto", ref: (0, utils_1.mergeRefs)(setPopper, ref) }, styles.content, rest), shouldRenderChildren ? children : null)));
+        react_1.default.createElement(box_1.default, __assign({ bg: "white", borderRadius: "md", boxShadow: "2", className: (0, utils_1.cs)('vui-popoverContent', className), overflowY: "auto", ref: (0, utils_1.mergeRefs)(setPopper, ref) }, styles.content, rest), shouldRenderChildren ? children : null)));
 });
 exports.PopoverContent.displayName = 'PopoverContent';
 exports.default = exports.PopoverContent;

package/popover/popoverTrigger.js

@@ -37,17 +37,17 @@ var context_1 = require("./context");
  */
 exports.PopoverTrigger = (0, core_1.vui)(function (props, ref) {
     var _a;
+    // @ts-ignore - TS incorrectly doesn't recognize 'as' prop
+    var As = props.as, className = props.className, onClickProp = props.onClick, rest = __rest(props, ["as", "className", "onClick"]);
     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, onClickProp = props.onClick, rest = __rest(props, ["as", "onClick"]);
     var Element = As || core_1.v.button;
     var onClick = function (e) {
         // Avoids triggering parent's onClick, like when inside a ListItem
         e.stopPropagation();
         onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
     };
-    return (react_1.default.createElement(Element, __assign({ className: "vui-popoverTrigger", onClick: onClick, ref: (0, utils_1.mergeRefs)(setReference, ref) }, styles.trigger, rest)));
+    return (react_1.default.createElement(Element, __assign({ className: (0, utils_1.cs)('vui-popoverTrigger', className), onClick: onClick, ref: (0, utils_1.mergeRefs)(setReference, ref) }, styles.trigger, rest)));
 });
 exports.PopoverTrigger.displayName = 'PopoverTrigger';
 exports.default = exports.PopoverTrigger;

package/radio/context.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { Dict } from '../utils';
-declare const RadioGroupProvider: import("react").Provider<Dict<any>>, useRadioGroup: () => Dict<any>;
-export { RadioGroupProvider, useRadioGroup };
+declare const RadioGroupProvider: import("react").Provider<Dict<any>>, useRadioGroupContext: () => Dict<any>;
+export { RadioGroupProvider, useRadioGroupContext };

package/radio/context.js

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

package/radio/radio.js

@@ -85,7 +85,7 @@ exports.RadioBase = core_1.styled.labelBox(templateObject_3 || (templateObject_3
  */
 exports.Radio = (0, core_1.vui)(function (props, ref) {
     var _a, _b;
-    var _c = (_a = (0, context_1.useRadioGroup)()) !== null && _a !== void 0 ? _a : {}, groupDefaultValue = _c.defaultValue, groupIsChecked = _c.isChecked, groupOnChange = _c.onChange, groupValue = _c.value, radioGroupProps = __rest(_c, ["defaultValue", "isChecked", "onChange", "value"]);
+    var _c = (_a = (0, context_1.useRadioGroupContext)()) !== null && _a !== void 0 ? _a : {}, groupDefaultValue = _c.defaultValue, groupIsChecked = _c.isChecked, groupOnChange = _c.onChange, groupValue = _c.value, radioGroupProps = __rest(_c, ["defaultValue", "isChecked", "onChange", "value"]);
     var defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined;
     var mergedProps = __assign(__assign({}, radioGroupProps), props);
     var _d = (0, core_1.omitThemingProps)(mergedProps), _e = _d.checked, checked = _e === void 0 ? groupValue !== undefined ? props.value === groupValue : undefined : _e, children = _d.children, className = _d.className, _f = _d.defaultChecked, defaultChecked = _f === void 0 ? groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined : _f, disabled = _d.disabled, _g = _d.icon, iconProp = _g === void 0 ? 'cuiRadioUnselected' : _g, _h = _d.iconChecked, iconChecked = _h === void 0 ? 'cuiRadioSelected' : _h, id = _d.id, inputProps = _d.inputProps, inputRef = _d.inputRef, label = _d.label, name = _d.name, onChange = _d.onChange, required = _d.required, value = _d.value, rest = __rest(_d, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "id", "inputProps", "inputRef", "label", "name", "onChange", "required", "value"]);

package/spinner/consts.d.ts

@@ -4,33 +4,21 @@ export declare const spinnerPositionMapping: {
         container: {
             flexDirection: string;
         };
-        circle: {
-            mb: number;
-        };
     };
     left: {
         container: {
             flexDirection: string;
         };
-        circle: {
-            ml: number;
-        };
     };
     right: {
         container: {
             flexDirection: string;
         };
-        circle: {
-            mr: number;
-        };
     };
     top: {
         container: {
             flexDirection: string;
         };
-        circle: {
-            mt: number;
-        };
     };
 };
 export declare const spinnerSpeedMapping: Dict<string>;

package/spinner/consts.js

@@ -3,20 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.spinnerSpeedMapping = exports.spinnerPositionMapping = void 0;
 exports.spinnerPositionMapping = {
     bottom: {
-        container: { flexDirection: 'column' },
-        circle: { mb: 1 }
+        container: { flexDirection: 'column' }
     },
     left: {
-        container: { flexDirection: 'row-reverse' },
-        circle: { ml: 1 }
+        container: { flexDirection: 'row-reverse' }
     },
     right: {
-        container: { flexDirection: 'row' },
-        circle: { mr: 1 }
+        container: { flexDirection: 'row' }
     },
     top: {
-        container: { flexDirection: 'column-reverse' },
-        circle: { mt: 1 }
+        container: { flexDirection: 'column-reverse' }
     }
 };
 exports.spinnerSpeedMapping = {

package/spinner/spinner.js

@@ -59,8 +59,8 @@ exports.Spinner = (0, core_1.vui)(function (props, ref) {
         h: isCustomSize ? size : undefined,
         w: isCustomSize ? size : undefined
     });
-    return (react_1.default.createElement(box_1.default, __assign({ center: true, className: (0, utils_1.cs)('vui-spinner', className), ref: ref, transitionDuration: "fast" }, styles.container, positionProps.container, rest),
-        react_1.default.createElement(exports.SpinnerCircle, __assign({ animation: "vui-spin " + speed + " linear infinite", className: "vui-spinnerCircle" }, styles.circle, positionProps.circle, circleProps)),
+    return (react_1.default.createElement(box_1.default, __assign({ center: true, className: (0, utils_1.cs)('vui-spinner', className), gap: 1, ref: ref, transitionDuration: "fast" }, styles.container, positionProps.container, rest),
+        react_1.default.createElement(exports.SpinnerCircle, __assign({ animation: "vui-spin " + speed + " linear infinite", className: "vui-spinnerCircle" }, styles.circle, circleProps)),
         text && (react_1.default.createElement(t_1.default, __assign({ className: "vui-spinnerText" }, styles.text), text))));
 });
 exports.Spinner.displayName = 'Spinner';

package/switch/context.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SwitchContext } from './switch.types';
-declare const SwitchProvider: import("react").Provider<SwitchContext>, useSwitch: () => SwitchContext;
-export { SwitchProvider, useSwitch };
+declare const SwitchProvider: import("react").Provider<SwitchContext>, useSwitchContext: () => SwitchContext;
+export { SwitchProvider, useSwitchContext };

package/switch/context.js

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

package/switch/switchButton.js

@@ -86,12 +86,12 @@ exports.SwitchButtonBase = core_1.styled.spanBox(templateObject_4 || (templateOb
  * Handles controlled and uncontrolled modes.
  */
 exports.SwitchButton = (0, core_1.vui)(function (props, ref) {
-    var mergedProps = __assign(__assign({}, (0, context_1.useSwitch)()), props);
+    var mergedProps = __assign(__assign({}, (0, context_1.useSwitchContext)()), props);
     var _a = (0, core_1.omitThemingProps)(mergedProps), checked = _a.checked, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, id = _a.id, innerLabelOff = _a.innerLabelOff, innerLabelOn = _a.innerLabelOn, inputProps = _a.inputProps, inputRef = _a.inputRef, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, required = _a.required, value = _a.value, rest = __rest(_a, ["checked", "className", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "required", "value"]);
     var isControlled = (0, react_1.useRef)(checked !== undefined).current;
     var _b = __read((0, react_1.useState)(checked !== null && checked !== void 0 ? checked : defaultChecked), 2), isChecked = _b[0], setIsChecked = _b[1];
     var _c = __read((0, react_1.useState)(false), 2), isFocused = _c[0], setIsFocused = _c[1];
-    var styles = (0, core_1.useStyleConfig)('Switch', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Switch', (0, context_1.useSwitchContext)());
     var _d = styles.button, thumbStyles = _d.thumb, trackStyles = _d.track, buttonStyles = __rest(_d, ["thumb", "track"]);
     (0, react_1.useEffect)(function () {
         isControlled && setIsChecked(checked);

package/switch/switchLabel.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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 };
 };
@@ -18,11 +29,13 @@ exports.SwitchLabel = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays label text within the Switch component. */
 exports.SwitchLabel = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Switch', __assign(__assign({}, (0, context_1.useSwitch)()), props));
-    return react_1.default.createElement(t_1.default, __assign({ className: "vui-switchLabel", display: "flex", ref: ref }, styles.label, props));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Switch', (0, context_1.useSwitchContext)());
+    return react_1.default.createElement(t_1.default, __assign({ className: (0, utils_1.cs)('vui-switchLabel', className), display: "flex", ref: ref }, styles.label, rest));
 });
 exports.SwitchLabel.displayName = 'SwitchLabel';
 exports.default = exports.SwitchLabel;

package/tag/context.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { Dict } from '../utils';
-declare const TagProvider: import("react").Provider<Dict<any>>, useTag: () => Dict<any>;
-export { TagProvider, useTag };
+declare const TagProvider: import("react").Provider<Dict<any>>, useTagContext: () => Dict<any>;
+export { TagProvider, useTagContext };

package/tag/context.js

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

package/tag/tagButton.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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 };
 };
@@ -18,12 +29,14 @@ exports.TagButton = void 0;
 var react_1 = __importDefault(require("react"));
 var button_1 = __importDefault(require("../button"));
 var core_1 = require("../core");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays a button within the Tag. */
 exports.TagButton = (0, core_1.vui)(function (props, ref) {
-    var mergedProps = __assign(__assign({}, (0, context_1.useTag)()), props);
-    var styles = (0, core_1.useStyleConfig)('Tag', mergedProps);
-    return (react_1.default.createElement(button_1.default, __assign({ borderColor: "transparent", className: "vui-tagButton", colorScheme: mergedProps.colorScheme, disabled: mergedProps.disabled, hoverBorderColor: "transparent", icon: "falTimes", mr: -0.5, ref: ref, variant: "text" }, styles.button, props)));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var mergedProps = __assign(__assign({}, (0, context_1.useTagContext)()), props);
+    var styles = (0, core_1.useStyleConfig)('Tag', (0, context_1.useTagContext)());
+    return (react_1.default.createElement(button_1.default, __assign({ borderColor: "transparent", className: (0, utils_1.cs)('vui-tagButton', className), colorScheme: mergedProps.colorScheme, disabled: mergedProps.disabled, hoverBorderColor: "transparent", icon: "falTimes", mr: -0.5, ref: ref, variant: "text" }, styles.button, rest)));
 });
 exports.TagButton.displayName = 'TagButton';
 exports.default = exports.TagButton;

package/tag/tagIcon.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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 };
 };
@@ -18,11 +29,13 @@ exports.TagIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays an icon within the Tag. */
 exports.TagIcon = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Tag', __assign(__assign({}, (0, context_1.useTag)()), props));
-    return react_1.default.createElement(icon_1.default, __assign({ className: "vui-tagIcon", ref: ref }, styles.icon, props));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Tag', (0, context_1.useTagContext)());
+    return react_1.default.createElement(icon_1.default, __assign({ className: (0, utils_1.cs)('vui-tagIcon', className), ref: ref }, styles.icon, rest));
 });
 exports.TagIcon.displayName = 'TagIcon';
 exports.default = exports.TagIcon;

package/tag/tagText.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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 };
 };
@@ -18,11 +29,13 @@ exports.TagText = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays text within the Tag. */
 exports.TagText = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Tag', __assign(__assign({}, (0, context_1.useTag)()), props));
-    return react_1.default.createElement(t_1.default, __assign({ className: "vui-tagText", fontSize: "inherit", ref: ref }, styles.text, props));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Tag', (0, context_1.useTagContext)());
+    return react_1.default.createElement(t_1.default, __assign({ className: (0, utils_1.cs)('vui-tagText', className), fontSize: "inherit", ref: ref }, styles.text, rest));
 });
 exports.TagText.displayName = 'TagText';
 exports.default = exports.TagText;

package/textarea/textarea.js

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

package/utils/react.d.ts

@@ -1,4 +1,4 @@
-import React, { RefObject } from 'react';
+import React, { DependencyList, RefObject } from 'react';
 import { AnyFunction, CreateContextOptions, CreateContextReturn } from './types';
 declare type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>;
 /**
@@ -11,7 +11,7 @@ export declare function createContext<ContextType>(options?: CreateContextOption
 /** Assigns a node to all provided refs. */
 export declare function mergeRefs<T>(...refs: (ReactRef<T> | undefined)[]): (node: T | null) => void;
 /** Returns given callback with a stable reference, but keeps it updated internally. */
-export declare function useCallbackRef<T extends AnyFunction>(callback?: T): T;
+export declare function useCallbackRef<T extends AnyFunction>(callback?: T, deps?: DependencyList): T;
 /**
  * Triggers given callback when an event happens outside of a given element.
  * Event listeners are attached to the window object.

package/utils/react.js

@@ -97,7 +97,8 @@ function mergeRefs() {
 exports.mergeRefs = mergeRefs;
 // TODO: Bring it from UI-Utils
 /** Returns given callback with a stable reference, but keeps it updated internally. */
-function useCallbackRef(callback) {
+function useCallbackRef(callback, deps) {
+    if (deps === void 0) { deps = []; }
     var ref = (0, react_1.useRef)(callback);
     ref.current = callback;
     return (0, react_1.useCallback)((function () {
@@ -107,7 +108,7 @@ function useCallbackRef(callback) {
             args[_i] = arguments[_i];
         }
         return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call.apply(_a, __spreadArray([ref], __read(args), false));
-    }), []);
+    }), deps);
 }
 exports.useCallbackRef = useCallbackRef;
 var defaultEvents = ['mousedown', 'touchstart'];