@veracity/vui 0.6.0 → 0.6.1

package/button/button.js

@@ -73,7 +73,7 @@ exports.ButtonBase = core_1.styled.buttonBox(templateObject_3 || (templateObject
  */
 exports.Button = (0, core_1.vui)(function (props, ref) {
     var _a, _b, _c, _d;
-    var buttonGroupProps = (0, context_1.useButtonGroup)();
+    var buttonGroupProps = (0, context_1.useButtonGroupContext)();
     var mergedProps = __assign(__assign({}, buttonGroupProps), props);
     var borderWidthProp = mergedProps.borderWidth, children = mergedProps.children, className = mergedProps.className, colorSchemeProp = mergedProps.colorScheme, disabled = mergedProps.disabled, icon = mergedProps.icon, iconLeft = mergedProps.iconLeft, iconRight = mergedProps.iconRight, isElevated = mergedProps.isElevated, isFullWidth = mergedProps.isFullWidth, isLoading = mergedProps.isLoading, // eslint-disable-line
     isRound = mergedProps.isRound, isSplit = mergedProps.isSplit, isTruncated = mergedProps.isTruncated, size = mergedProps.size, _e = mergedProps.state, state = _e === void 0 ? props.isLoading ? 'loading' : '' : _e, stateMapping = mergedProps.stateMapping, text = mergedProps.text, variant = mergedProps.variant, rest = __rest(mergedProps, ["borderWidth", "children", "className", "colorScheme", "disabled", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "isTruncated", "size", "state", "stateMapping", "text", "variant"]);

package/button/buttonIcon.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.ButtonIcon = 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 Button. */
 exports.ButtonIcon = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Button', __assign(__assign({}, (0, context_1.useButton)()), props));
-    return react_1.default.createElement(icon_1.default, __assign({ className: "vui-buttonIcon", ref: ref }, styles.icon, props));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Button', (0, context_1.useButtonContext)());
+    return react_1.default.createElement(icon_1.default, __assign({ className: (0, utils_1.cs)('vui-buttonIcon', className), ref: ref }, styles.icon, rest));
 });
 exports.ButtonIcon.displayName = 'ButtonIcon';
 exports.default = exports.ButtonIcon;

package/button/buttonText.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.ButtonText = 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 the text label of the button. */
 exports.ButtonText = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Button', __assign(__assign({}, (0, context_1.useButton)()), props));
-    return react_1.default.createElement(t_1.default, __assign({ className: "vui-buttonText", fontSize: "inherit", ref: ref }, styles.text, props));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Button', (0, context_1.useButtonContext)());
+    return react_1.default.createElement(t_1.default, __assign({ className: (0, utils_1.cs)('vui-buttonText', className), fontSize: "inherit", ref: ref }, styles.text, rest));
 });
 exports.ButtonText.displayName = 'ButtonText';
 exports.default = exports.ButtonText;

package/button/context.d.ts

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

package/button/context.js

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

package/buttonGroup/context.d.ts

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

package/buttonGroup/context.js

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

package/checkbox/checkbox.js

@@ -85,7 +85,7 @@ exports.CheckboxBase = core_1.styled.labelBox(templateObject_3 || (templateObjec
  */
 exports.Checkbox = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var _b = (_a = (0, context_1.useCheckboxGroup)()) !== null && _a !== void 0 ? _a : {}, groupDefaultValue = _b.defaultValue, checkboxGroupProps = __rest(_b, ["defaultValue"]);
+    var _b = (_a = (0, context_1.useCheckboxGroupContext)()) !== null && _a !== void 0 ? _a : {}, groupDefaultValue = _b.defaultValue, checkboxGroupProps = __rest(_b, ["defaultValue"]);
     var mergedProps = __assign(__assign({}, checkboxGroupProps), props);
     var _c = (0, core_1.omitThemingProps)(mergedProps), checked = _c.checked, children = _c.children, className = _c.className, _d = _c.defaultChecked, defaultChecked = _d === void 0 ? groupDefaultValue !== undefined ? groupDefaultValue.includes(props.value) : undefined : _d, disabled = _c.disabled, _e = _c.icon, iconProp = _e === void 0 ? 'cuiCheckboxUnselected' : _e, _f = _c.iconChecked, iconChecked = _f === void 0 ? 'cuiCheckboxSelected' : _f, _g = _c.iconIndeterminate, iconIndeterminate = _g === void 0 ? 'cuiCheckboxIndeterminate' : _g, id = _c.id, inputProps = _c.inputProps, inputRef = _c.inputRef, isIndeterminate = _c.isIndeterminate, label = _c.label, name = _c.name, onChange = _c.onChange, required = _c.required, value = _c.value, rest = __rest(_c, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "iconIndeterminate", "id", "inputProps", "inputRef", "isIndeterminate", "label", "name", "onChange", "required", "value"]);
     var _h = __read((0, react_1.useState)(defaultChecked), 2), isChecked = _h[0], setIsChecked = _h[1];

package/checkbox/context.d.ts

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

package/checkbox/context.js

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

package/core/links.js

@@ -128,50 +128,52 @@ exports.useLinks = useLinks;
  * if user is logged in. Links will be reloaded when 'env' changes or updated when 'isLoggedIn' changes.
  */
 function useLoadLinks(env, isLoggedIn) {
+    var _this = this;
     var _a = __read(useLinks(), 2), setLinks = _a[1];
+    // Load links from the CDN for the given environment.
+    var loadLinks = function (env) { return __awaiter(_this, void 0, void 0, function () {
+        var response, data, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _b.trys.push([0, 3, , 4]);
+                    return [4 /*yield*/, fetch(consts_1.cdnUrls[env] + "/common/data/links/base.json")];
+                case 1:
+                    response = _b.sent();
+                    if (!response.ok)
+                        return [2 /*return*/];
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    data = _b.sent();
+                    if ((0, utils_1.isObject)(data)) {
+                        setLinks(updateLoggedInParam(data));
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    _a = _b.sent();
+                    console.error('Failed to retrieve links');
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    /**
+     * Adds/removes loggedin=1 URL param for each link based on isLoggedIn arg.
+     * useCallbackRef is used here to prevent a stale closure in async loadLinks.
+     */
+    var updateLoggedInParam = (0, utils_1.useCallbackRef)(function (links) {
+        return Object.keys(links).reduce(function (loggedInLinks, key) {
+            loggedInLinks[key] = getLoggedInLink(links[key], isLoggedIn);
+            return loggedInLinks;
+        }, {});
+    });
     (0, react_1.useEffect)(function () {
         if (!env)
             return;
         loadLinks(env);
     }, [env]);
     (0, react_1.useEffect)(function () {
-        setLinks(function (links) { return updateLoggedInParam(links, isLoggedIn); });
+        setLinks(updateLoggedInParam);
     }, [isLoggedIn]);
-    // Load links from the CDN for the given environment.
-    function loadLinks(env) {
-        return __awaiter(this, void 0, void 0, function () {
-            var response, data, _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        _b.trys.push([0, 3, , 4]);
-                        return [4 /*yield*/, fetch(consts_1.cdnUrls[env] + "/common/data/links/base.json")];
-                    case 1:
-                        response = _b.sent();
-                        if (!response.ok)
-                            return [2 /*return*/];
-                        return [4 /*yield*/, response.json()];
-                    case 2:
-                        data = _b.sent();
-                        if ((0, utils_1.isObject)(data)) {
-                            setLinks(updateLoggedInParam(data, isLoggedIn));
-                        }
-                        return [3 /*break*/, 4];
-                    case 3:
-                        _a = _b.sent();
-                        console.error('Failed to retrieve links');
-                        return [3 /*break*/, 4];
-                    case 4: return [2 /*return*/];
-                }
-            });
-        });
-    }
-    // Adds/removes loggedin=1 URL param for each link based on isLoggedIn arg.
-    function updateLoggedInParam(links, isLoggedIn) {
-        return Object.keys(links).reduce(function (loggedInLinks, key) {
-            loggedInLinks[key] = getLoggedInLink(links[key], isLoggedIn);
-            return loggedInLinks;
-        }, {});
-    }
 }
 exports.useLoadLinks = useLoadLinks;

package/dialog/dialogBody.js

@@ -29,6 +29,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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;
@@ -60,6 +71,7 @@ var context_1 = require("./context");
  */
 exports.DialogBody = (0, core_1.vui)(function (props, ref) {
     var _a;
+    var className = props.className, rest = __rest(props, ["className"]);
     var _b = (_a = (0, context_1.useDialogContext)()) !== null && _a !== void 0 ? _a : {}, bodyId = _b.bodyId, icon = _b.icon, status = _b.status;
     var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
     var _c = __read((0, react_1.useState)(false), 2), isScrolled = _c[0], setIsScrolled = _c[1];
@@ -79,7 +91,7 @@ exports.DialogBody = (0, core_1.vui)(function (props, ref) {
     var borderProps = isScrolled ? { borderColor: 'grey.30' } : {};
     // Add more body padding when custom or status icon is displayed
     var paddingProps = (icon !== null && icon !== void 0 ? icon : status) !== undefined ? { px: 8 } : { px: 3 };
-    return (react_1.default.createElement(box_1.Box, __assign({ borderBottom: "1px solid transparent", borderTop: "1px solid transparent", className: "vui-dialogBody", column: true, id: bodyId, overflowY: "auto", pb: 2, pt: 1.5, ref: (0, utils_1.mergeRefs)(ref, bodyRef) }, borderProps, paddingProps, styles.body, props)));
+    return (react_1.default.createElement(box_1.Box, __assign({ borderBottom: "1px solid transparent", borderTop: "1px solid transparent", className: (0, utils_1.cs)('vui-dialogBody', className), column: true, id: bodyId, overflowY: "auto", pb: 2, pt: 1.5, ref: (0, utils_1.mergeRefs)(ref, bodyRef) }, borderProps, paddingProps, styles.body, rest)));
 });
 exports.DialogBody.displayName = 'DialogBody';
 exports.default = exports.DialogBody;

package/dialog/dialogCancelButton.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,13 +29,15 @@ exports.DialogCancelButton = void 0;
 var react_1 = __importDefault(require("react"));
 var button_1 = require("../button");
 var core_1 = require("../core");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Shows an outlined Button in the Dialog Footer, which by default closes the Dialog. */
 exports.DialogCancelButton = (0, core_1.vui)(function (props, ref) {
     var _a;
+    var className = props.className, rest = __rest(props, ["className"]);
     var onClose = ((_a = (0, context_1.useDialogContext)()) !== null && _a !== void 0 ? _a : {}).onClose;
     var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
-    return (react_1.default.createElement(button_1.LineButton, __assign({ className: "vui-dialogCancelButton", onClick: onClose, ref: ref }, styles.cancelButton, props)));
+    return (react_1.default.createElement(button_1.LineButton, __assign({ className: (0, utils_1.cs)('vui-dialogCancelButton', className), onClick: onClose, ref: ref }, styles.cancelButton, rest)));
 });
 exports.DialogCancelButton.displayName = 'DialogCancelButton';
 exports.default = exports.DialogCancelButton;

package/dialog/dialogCloseButton.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,13 +29,15 @@ exports.DialogCloseButton = void 0;
 var react_1 = __importDefault(require("react"));
 var button_1 = require("../button");
 var core_1 = require("../core");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Shows a CloseButton in the Dialog Header, which by default closes the Dialog. */
 exports.DialogCloseButton = (0, core_1.vui)(function (props, ref) {
     var _a;
+    var className = props.className, rest = __rest(props, ["className"]);
     var onClose = ((_a = (0, context_1.useDialogContext)()) !== null && _a !== void 0 ? _a : {}).onClose;
     var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
-    return (react_1.default.createElement(button_1.CloseButton, __assign({ activeBg: "grey.30", className: "vui-dialogCloseButton", color: "grey.80", hoverBg: "grey.20", onClick: onClose, position: "absolute", ref: ref, right: 16, size: "sm", top: 16 }, styles.closeButton, props)));
+    return (react_1.default.createElement(button_1.CloseButton, __assign({ activeBg: "grey.30", className: (0, utils_1.cs)('vui-dialogCloseButton', className), color: "grey.80", hoverBg: "grey.20", onClick: onClose, position: "absolute", ref: ref, right: 16, size: "sm", top: 16 }, styles.closeButton, rest)));
 });
 exports.DialogCloseButton.displayName = 'DialogCloseButton';
 exports.default = exports.DialogCloseButton;

package/dialog/dialogFooter.js

@@ -35,9 +35,9 @@ var dialogCancelButton_1 = __importDefault(require("./dialogCancelButton"));
 var dialogSubmitButton_1 = __importDefault(require("./dialogSubmitButton"));
 /** Shows control buttons below the Dialog Body. By default includes cancel and submit buttons. */
 exports.DialogFooter = (0, core_1.vui)(function (props, ref) {
-    var cancelButton = props.cancelButton, children = props.children, submitButton = props.submitButton, rest = __rest(props, ["cancelButton", "children", "submitButton"]);
+    var cancelButton = props.cancelButton, children = props.children, className = props.className, submitButton = props.submitButton, rest = __rest(props, ["cancelButton", "children", "className", "submitButton"]);
     var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
-    return (react_1.default.createElement(box_1.Box, __assign({ className: "vui-dialogFooter", justifyContent: "flex-end", p: 3, pt: 2, ref: ref }, styles.footer, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(box_1.Box, __assign({ className: (0, utils_1.cs)('vui-dialogFooter', className), justifyContent: "flex-end", p: 3, pt: 2, ref: ref }, styles.footer, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
         (0, utils_1.isJsx)(cancelButton) ? cancelButton : cancelButton && react_1.default.createElement(dialogCancelButton_1.default, __assign({}, cancelButton)),
         (0, utils_1.isJsx)(submitButton) ? submitButton : submitButton && react_1.default.createElement(dialogSubmitButton_1.default, __assign({}, submitButton))))));
 });

package/dialog/dialogHeader.js

@@ -37,14 +37,14 @@ var dialogTitle_1 = __importDefault(require("./dialogTitle"));
 /** Shows title, status icon and close button above the Dialog Body. */
 exports.DialogHeader = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var children = props.children, closeButton = props.closeButton, iconProp = props.icon, titleProp = props.title, rest = __rest(props, ["children", "closeButton", "icon", "title"]);
+    var children = props.children, className = props.className, closeButton = props.closeButton, iconProp = props.icon, titleProp = props.title, rest = __rest(props, ["children", "className", "closeButton", "icon", "title"]);
     var _b = (_a = (0, context_1.useDialogContext)()) !== null && _a !== void 0 ? _a : {}, onClose = _b.onClose, status = _b.status;
     var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
     var icon = (0, utils_1.isString)(iconProp) ? { name: iconProp } : iconProp;
     var showCloseButton = Boolean(closeButton !== undefined ? closeButton : onClose);
     var showIcon = Boolean(icon || status);
     var title = (0, utils_1.isReactText)(titleProp) ? { text: titleProp } : titleProp;
-    return (react_1.default.createElement(box_1.Box, __assign({ className: "vui-dialogHeader", icon: icon, pb: 1.5, pl: 3, position: "relative", pr: 8, pt: 3, ref: ref }, styles.header, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(box_1.Box, __assign({ className: (0, utils_1.cs)('vui-dialogHeader', className), icon: icon, pb: 1.5, pl: 3, position: "relative", pr: 8, pt: 3, ref: ref }, styles.header, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
         (0, utils_1.isJsx)(icon) ? icon : showIcon && react_1.default.createElement(dialogIcon_1.default, __assign({}, icon)),
         (0, utils_1.isJsx)(title) ? title : title && react_1.default.createElement(dialogTitle_1.default, __assign({}, title)),
         (0, utils_1.isJsx)(closeButton) ? closeButton : showCloseButton && react_1.default.createElement(dialogCloseButton_1.default, null)))));

package/dialog/dialogIcon.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,15 +29,17 @@ exports.DialogIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var icon_1 = require("../icon");
+var utils_1 = require("../utils");
 var consts_1 = require("./consts");
 var context_1 = require("./context");
 /** Shows an icon based on a given status. Optionally, can be a custom icon. */
 exports.DialogIcon = (0, core_1.vui)(function (props, ref) {
     var _a, _b;
+    var className = props.className, rest = __rest(props, ["className"]);
     var _c = ((_a = (0, context_1.useDialogContext)()) !== null && _a !== void 0 ? _a : {}).status, status = _c === void 0 ? '' : _c;
     var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
     var iconProps = ((_b = consts_1.dialogStatusMapping[status]) !== null && _b !== void 0 ? _b : {}).iconProps;
-    return react_1.default.createElement(icon_1.Icon, __assign({ className: "vui-dialogIcon", mr: 2, ref: ref }, styles.icon, iconProps, props));
+    return react_1.default.createElement(icon_1.Icon, __assign({ className: (0, utils_1.cs)('vui-dialogIcon', className), mr: 2, ref: ref }, styles.icon, iconProps, rest));
 });
 exports.DialogIcon.displayName = 'DialogIcon';
 exports.default = exports.DialogIcon;

package/dialog/dialogSubmitButton.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.DialogSubmitButton = void 0;
 var react_1 = __importDefault(require("react"));
 var button_1 = require("../button");
 var core_1 = require("../core");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Shows a button in the Dialog Footer, which triggers the main action of the Dialog. */
 exports.DialogSubmitButton = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, rest = __rest(props, ["className"]);
     var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
-    return (react_1.default.createElement(button_1.Button, __assign({ className: "vui-dialogSubmitButton", ml: 2, ref: ref, text: "Submit" }, styles.submitButton, props)));
+    return (react_1.default.createElement(button_1.Button, __assign({ className: (0, utils_1.cs)('vui-dialogSubmitButton', className), ml: 2, ref: ref, text: "Submit" }, styles.submitButton, rest)));
 });
 exports.DialogSubmitButton.displayName = 'DialogSubmitButton';
 exports.default = exports.DialogSubmitButton;

package/dialog/dialogTitle.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,13 +29,15 @@ exports.DialogTitle = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var heading_1 = require("../heading");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Shows a title in the Dialog Header. Receives id linked to aria-labelledby on the Dialog for accessibility. */
 exports.DialogTitle = (0, core_1.vui)(function (props, ref) {
     var _a;
+    var className = props.className, rest = __rest(props, ["className"]);
     var titleId = ((_a = (0, context_1.useDialogContext)()) !== null && _a !== void 0 ? _a : {}).titleId;
     var styles = (0, core_1.useStyleConfig)('Dialog', (0, context_1.useDialogContext)());
-    return react_1.default.createElement(heading_1.H4, __assign({ className: "vui-dialogTitle", id: titleId, ref: ref }, styles.title, props));
+    return react_1.default.createElement(heading_1.H4, __assign({ className: (0, utils_1.cs)('vui-dialogTitle', className), id: titleId, ref: ref }, styles.title, rest));
 });
 exports.DialogTitle.displayName = 'DialogTitle';
 exports.default = exports.DialogTitle;

package/footer/footerColumn.js

@@ -28,12 +28,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 var footerSection_1 = __importDefault(require("./footerSection"));
 /** Organizes sections with links into a single column. Different width per breakpoint. */
 var FooterColumn = (0, core_1.vui)(function (props, ref) {
-    var children = props.children, sections = props.sections, rest = __rest(props, ["children", "sections"]);
+    var children = props.children, className = props.className, sections = props.sections, rest = __rest(props, ["children", "className", "sections"]);
     var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
-    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-footerColumn", column: true, flex: { xs: '0 0 100%', sm: '0 0 50%', md: '0 0 25%' }, p: 1.5, ref: ref, spaceY: 4 }, styles.column, rest), children !== null && children !== void 0 ? children : sections === null || sections === void 0 ? void 0 : sections.map(function (section, index) { return react_1.default.createElement(footerSection_1.default, __assign({ key: index }, section)); })));
+    return (react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-footerColumn', className), column: true, flex: { xs: '0 0 100%', sm: '0 0 50%', md: '0 0 25%' }, p: 1.5, ref: ref, spaceY: 4 }, styles.column, rest), children !== null && children !== void 0 ? children : sections === null || sections === void 0 ? void 0 : sections.map(function (section, index) { return react_1.default.createElement(footerSection_1.default, __assign({ key: index }, section)); })));
 });
 exports.default = FooterColumn;

package/footer/footerContent.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.FooterContent = void 0;
 var react_1 = __importDefault(require("react"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Controls max-width of the content and centers itself horizontally. */
 exports.FooterContent = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, rest = __rest(props, ["className"]);
     var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
-    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-footerContent", column: true, maxW: 1200, mx: "auto", ref: ref, w: "100%" }, styles.content, props)));
+    return (react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-footerContent', className), column: true, maxW: 1200, mx: "auto", ref: ref, w: "100%" }, styles.content, rest)));
 });
 exports.FooterContent.displayName = 'FooterContent';
 exports.default = exports.FooterContent;

package/footer/footerHeading.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.FooterHeading = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var heading_1 = __importDefault(require("../heading"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Heading of a links section. */
 exports.FooterHeading = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, rest = __rest(props, ["className"]);
     var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
-    return react_1.default.createElement(heading_1.default, __assign({ className: "vui-footerHeading", mb: 1, ref: ref, size: "h5" }, styles.heading, props));
+    return (react_1.default.createElement(heading_1.default, __assign({ className: (0, utils_1.cs)('vui-footerHeading', className), mb: 1, ref: ref, size: "h5" }, styles.heading, rest)));
 });
 exports.FooterHeading.displayName = 'FooterHeading';
 exports.default = exports.FooterHeading;

package/footer/footerLink.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.FooterLink = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var link_1 = __importDefault(require("../link"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Individual link item of the Footer. */
 exports.FooterLink = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, rest = __rest(props, ["className"]);
     var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
-    return (react_1.default.createElement(link_1.default, __assign({ className: "vui-footerLink", colorScheme: "white", py: 0.5, ref: ref, size: "sm" }, styles.link, props)));
+    return (react_1.default.createElement(link_1.default, __assign({ className: (0, utils_1.cs)('vui-footerLink', className), colorScheme: "white", py: 0.5, ref: ref, size: "sm" }, styles.link, rest)));
 });
 exports.FooterLink.displayName = 'FooterLink';
 exports.default = exports.FooterLink;