@veracity/vui 0.7.0-beta.1 → 0.7.0-beta.2

package/dist/cjs/tag/context.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTag = exports.TagProvider = void 0;
+exports.useTagContext = exports.TagProvider = void 0;
 const utils_1 = require("../utils");
-const [TagProvider, useTag] = (0, utils_1.createContext)({ isOptional: true });
+const [TagProvider, useTagContext] = (0, utils_1.createContext)({ isOptional: true });
 exports.TagProvider = TagProvider;
-exports.useTag = useTag;
+exports.useTagContext = useTagContext;

package/dist/cjs/tag/tagButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tagButton.d.ts","sourceRoot":"","sources":["../../../src/tag/tagButton.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAI/C,wCAAwC;AACxC,eAAO,MAAM,SAAS,uDAmBpB,CAAA;AAIF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"tagButton.d.ts","sourceRoot":"","sources":["../../../src/tag/tagButton.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAK/C,wCAAwC;AACxC,eAAO,MAAM,SAAS,uDAoBpB,CAAA;AAIF,eAAe,SAAS,CAAA"}

package/dist/cjs/tag/tagButton.js

@@ -1,4 +1,15 @@
 "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 };
 };
@@ -7,12 +18,14 @@ exports.TagButton = void 0;
 const react_1 = __importDefault(require("react"));
 const button_1 = __importDefault(require("../button"));
 const core_1 = require("../core");
+const utils_1 = require("../utils");
 const context_1 = require("./context");
 /** Displays a button within the Tag. */
 exports.TagButton = (0, core_1.vui)((props, ref) => {
-    const mergedProps = Object.assign(Object.assign({}, (0, context_1.useTag)()), props);
-    const styles = (0, core_1.useStyleConfig)('Tag', mergedProps);
-    return (react_1.default.createElement(button_1.default, Object.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)));
+    const { className } = props, rest = __rest(props, ["className"]);
+    const mergedProps = Object.assign(Object.assign({}, (0, context_1.useTagContext)()), props);
+    const styles = (0, core_1.useStyleConfig)('Tag', (0, context_1.useTagContext)());
+    return (react_1.default.createElement(button_1.default, Object.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/dist/cjs/tag/tagIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tagIcon.d.ts","sourceRoot":"","sources":["../../../src/tag/tagIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGzC,uCAAuC;AACvC,eAAO,MAAM,OAAO,kDAIlB,CAAA;AAIF,eAAe,OAAO,CAAA"}
+{"version":3,"file":"tagIcon.d.ts","sourceRoot":"","sources":["../../../src/tag/tagIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIzC,uCAAuC;AACvC,eAAO,MAAM,OAAO,kDAKlB,CAAA;AAIF,eAAe,OAAO,CAAA"}

package/dist/cjs/tag/tagIcon.js

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

package/dist/cjs/tag/tagText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tagText.d.ts","sourceRoot":"","sources":["../../../src/tag/tagText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAGhC,oCAAoC;AACpC,eAAO,MAAM,OAAO,gDAIlB,CAAA;AAIF,eAAe,OAAO,CAAA"}
+{"version":3,"file":"tagText.d.ts","sourceRoot":"","sources":["../../../src/tag/tagText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,oCAAoC;AACpC,eAAO,MAAM,OAAO,gDAKlB,CAAA;AAIF,eAAe,OAAO,CAAA"}

package/dist/cjs/tag/tagText.js

@@ -1,4 +1,15 @@
 "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 };
 };
@@ -7,11 +18,13 @@ exports.TagText = void 0;
 const react_1 = __importDefault(require("react"));
 const core_1 = require("../core");
 const t_1 = __importDefault(require("../t"));
+const utils_1 = require("../utils");
 const context_1 = require("./context");
 /** Displays text within the Tag. */
 exports.TagText = (0, core_1.vui)((props, ref) => {
-    const styles = (0, core_1.useStyleConfig)('Tag', Object.assign(Object.assign({}, (0, context_1.useTag)()), props));
-    return react_1.default.createElement(t_1.default, Object.assign({ className: "vui-tagText", fontSize: "inherit", ref: ref }, styles.text, props));
+    const { className } = props, rest = __rest(props, ["className"]);
+    const styles = (0, core_1.useStyleConfig)('Tag', (0, context_1.useTagContext)());
+    return react_1.default.createElement(t_1.default, Object.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/dist/cjs/textarea/textarea.js

@@ -113,7 +113,7 @@ exports.Textarea = (0, core_1.vui)((props, ref) => {
             rows,
             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/dist/cjs/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/dist/cjs/utils/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/utils/react.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,SAAS,EAA4D,MAAM,OAAO,CAAA;AAI5G,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAEhF,aAAK,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;AAEhF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,QAcxE;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,WAAW,EAAE,OAAO,GAAE,oBAAyB,oCAoB5E;AAED,2CAA2C;AAC3C,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,UAClD,CAAC,GAAG,IAAI,UAGtB;AAGD,uFAAuF;AACvF,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,KAMjE;AAKD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC9B,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,EACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EACjC,MAAM,GAAE,MAAM,EAAkB,QAoBhC;AAED,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IACnC,KAAK,CAAC,EAAE,CAAC,CAAA;IACT,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;CAC7B,CAAA;AAGD,sFAAsF;AACtF,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC;kBAwB3C,OAAO;WAAS,MAAM,IAAI;GAE3C;AAED,4GAA4G;AAC5G,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAEpD;AAGD;;GAEG;AACH,wBAAgB,YAAY,kBAY3B"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/utils/react.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACb,cAAc,EAEd,SAAS,EAMT,MAAM,OAAO,CAAA;AAId,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAEhF,aAAK,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;AAEhF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,QAcxE;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,WAAW,EAAE,OAAO,GAAE,oBAAyB,oCAoB5E;AAED,2CAA2C;AAC3C,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,UAClD,CAAC,GAAG,IAAI,UAGtB;AAGD,uFAAuF;AACvF,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,GAAE,cAAmB,KAM5F;AAKD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC9B,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,EACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EACjC,MAAM,GAAE,MAAM,EAAkB,QAoBhC;AAED,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IACnC,KAAK,CAAC,EAAE,CAAC,CAAA;IACT,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;CAC7B,CAAA;AAGD,sFAAsF;AACtF,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC;kBAwB3C,OAAO;WAAS,MAAM,IAAI;GAE3C;AAED,4GAA4G;AAC5G,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAEpD;AAGD;;GAEG;AACH,wBAAgB,YAAY,kBAY3B"}

package/dist/cjs/utils/react.js

@@ -71,10 +71,10 @@ function mergeRefs(...refs) {
 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 = []) {
     const ref = (0, react_1.useRef)(callback);
     ref.current = callback;
-    return (0, react_1.useCallback)(((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...args); }), []);
+    return (0, react_1.useCallback)(((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...args); }), deps);
 }
 exports.useCallbackRef = useCallbackRef;
 const defaultEvents = ['mousedown', 'touchstart'];

package/dist/esm/button/button.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useButtonGroup } from '../buttonGroup/context';
+import { useButtonGroupContext } from '../buttonGroup/context';
 import { styled, th, useStyleConfig, vui } from '../core';
 import { cs, filterUndefined, isReactText, isString } from '../utils';
 import ButtonIcon from './buttonIcon';
@@ -52,7 +52,7 @@ export const ButtonBase = styled.buttonBox `
  * Exposes some props to the children via context.
  */
 export const Button = vui((props, ref) => {
-    const buttonGroupProps = useButtonGroup();
+    const buttonGroupProps = useButtonGroupContext();
     const mergedProps = { ...buttonGroupProps, ...props };
     const { borderWidth: borderWidthProp, children, className, colorScheme: colorSchemeProp, disabled, icon, iconLeft, iconRight, isElevated, isFullWidth, isLoading, // eslint-disable-line
     isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, variant, ...rest } = mergedProps;

package/dist/esm/button/buttonIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonIcon.d.ts","sourceRoot":"","sources":["../../../src/button/buttonIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGzC,0CAA0C;AAC1C,eAAO,MAAM,UAAU,kDAIrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"buttonIcon.d.ts","sourceRoot":"","sources":["../../../src/button/buttonIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIzC,0CAA0C;AAC1C,eAAO,MAAM,UAAU,kDAKrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/esm/button/buttonIcon.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import Icon from '../icon';
-import { useButton } from './context';
+import { cs } from '../utils';
+import { useButtonContext } from './context';
 /** Displays an icon within the Button. */
 export const ButtonIcon = vui((props, ref) => {
-    const styles = useStyleConfig('Button', { ...useButton(), ...props });
-    return React.createElement(Icon, { className: "vui-buttonIcon", ref: ref, ...styles.icon, ...props });
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('Button', useButtonContext());
+    return React.createElement(Icon, { className: cs('vui-buttonIcon', className), ref: ref, ...styles.icon, ...rest });
 });
 ButtonIcon.displayName = 'ButtonIcon';
 export default ButtonIcon;

package/dist/esm/button/buttonText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonText.d.ts","sourceRoot":"","sources":["../../../src/button/buttonText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAGhC,6CAA6C;AAC7C,eAAO,MAAM,UAAU,gDAIrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"buttonText.d.ts","sourceRoot":"","sources":["../../../src/button/buttonText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,6CAA6C;AAC7C,eAAO,MAAM,UAAU,gDAKrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/esm/button/buttonText.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import T from '../t';
-import { useButton } from './context';
+import { cs } from '../utils';
+import { useButtonContext } from './context';
 /** Displays the text label of the button. */
 export const ButtonText = vui((props, ref) => {
-    const styles = useStyleConfig('Button', { ...useButton(), ...props });
-    return React.createElement(T, { className: "vui-buttonText", fontSize: "inherit", ref: ref, ...styles.text, ...props });
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('Button', useButtonContext());
+    return React.createElement(T, { className: cs('vui-buttonText', className), fontSize: "inherit", ref: ref, ...styles.text, ...rest });
 });
 ButtonText.displayName = 'ButtonText';
 export default ButtonText;

package/dist/esm/button/context.d.ts

@@ -1,5 +1,5 @@
 /// <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 };
 //# sourceMappingURL=context.d.ts.map

package/dist/esm/button/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/button/context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,IAAI,EAAE,MAAM,UAAU,CAAA;AAE9C,QAAA,MAAO,cAAc,uCAAE,SAAS,iBAA6C,CAAA;AAE7E,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/button/context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,IAAI,EAAE,MAAM,UAAU,CAAA;AAE9C,QAAA,MAAO,cAAc,uCAAE,gBAAgB,iBAA6C,CAAA;AAEpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/esm/button/context.js

@@ -1,3 +1,3 @@
 import { createContext } from '../utils';
-const [ButtonProvider, useButton] = createContext({ isOptional: true });
-export { ButtonProvider, useButton };
+const [ButtonProvider, useButtonContext] = createContext({ isOptional: true });
+export { ButtonProvider, useButtonContext };

package/dist/esm/buttonGroup/context.d.ts

@@ -1,5 +1,5 @@
 /// <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 };
 //# sourceMappingURL=context.d.ts.map

package/dist/esm/buttonGroup/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,IAAI,EAAE,MAAM,UAAU,CAAA;AAE9C,QAAA,MAAO,mBAAmB,uCAAE,cAAc,iBAA6C,CAAA;AAEvF,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,IAAI,EAAE,MAAM,UAAU,CAAA;AAE9C,QAAA,MAAO,mBAAmB,uCAAE,qBAAqB,iBAA6C,CAAA;AAE9F,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,CAAA"}

package/dist/esm/buttonGroup/context.js

@@ -1,3 +1,3 @@
 import { createContext } from '../utils';
-const [ButtonGroupProvider, useButtonGroup] = createContext({ isOptional: true });
-export { ButtonGroupProvider, useButtonGroup };
+const [ButtonGroupProvider, useButtonGroupContext] = createContext({ isOptional: true });
+export { ButtonGroupProvider, useButtonGroupContext };

package/dist/esm/checkbox/checkbox.js

@@ -3,7 +3,7 @@ import { omitThemingProps, styled, th, useStyleConfig, vui } from '../core';
 import Icon from '../icon';
 import T from '../t';
 import { cs, filterUndefined } from '../utils';
-import { useCheckboxGroup } from './context';
+import { useCheckboxGroupContext } from './context';
 const CheckboxControl = styled.spanBox `
 	border-radius: sm;
 	display: inline-flex;
@@ -47,7 +47,7 @@ export const CheckboxBase = styled.labelBox `
  * Uses icons to display itself in different states. Can be indeterminate when selecting some nested items.
  */
 export const Checkbox = vui((props, ref) => {
-    const { defaultValue: groupDefaultValue, ...checkboxGroupProps } = useCheckboxGroup() ?? {};
+    const { defaultValue: groupDefaultValue, ...checkboxGroupProps } = useCheckboxGroupContext() ?? {};
     const mergedProps = { ...checkboxGroupProps, ...props };
     const { checked, children, className, defaultChecked = groupDefaultValue !== undefined ? groupDefaultValue.includes(props.value) : undefined, disabled, icon: iconProp = 'cuiCheckboxUnselected', iconChecked = 'cuiCheckboxSelected', iconIndeterminate = 'cuiCheckboxIndeterminate', id, inputProps, inputRef, isIndeterminate, label, name, onChange, required, value, ...rest } = omitThemingProps(mergedProps);
     const [isChecked, setIsChecked] = useState(defaultChecked);

package/dist/esm/checkbox/context.d.ts

@@ -1,5 +1,5 @@
 /// <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 };
 //# sourceMappingURL=context.d.ts.map

package/dist/esm/checkbox/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/checkbox/context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,IAAI,EAAE,MAAM,UAAU,CAAA;AAE9C,QAAA,MAAO,qBAAqB,uCAAE,gBAAgB,iBAA6C,CAAA;AAE3F,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/checkbox/context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,IAAI,EAAE,MAAM,UAAU,CAAA;AAE9C,QAAA,MAAO,qBAAqB,uCAAE,uBAAuB,iBAA6C,CAAA;AAElG,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/esm/checkbox/context.js

@@ -1,3 +1,3 @@
 import { createContext } from '../utils';
-const [CheckboxGroupProvider, useCheckboxGroup] = createContext({ isOptional: true });
-export { CheckboxGroupProvider, useCheckboxGroup };
+const [CheckboxGroupProvider, useCheckboxGroupContext] = createContext({ isOptional: true });
+export { CheckboxGroupProvider, useCheckboxGroupContext };

package/dist/esm/core/links.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"links.d.ts","sourceRoot":"","sources":["../../../src/core/links.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,QAAQ,EAAE,cAAc,EAAmC,MAAM,OAAO,CAAA;AAEvG,OAAO,EAAE,IAAI,EAAE,WAAW,EAAkB,MAAM,UAAU,CAAA;AAG5D,oBAAY,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,CAAA;AAEpC,aAAK,gBAAgB,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;AAIxE;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,UAcjE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,eAIjE;AAED,oDAAoD;AACpD,wBAAgB,QAAQ,qBASvB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,CAAC,EAAE,WAAW,EAAE,UAAU,CAAC,EAAE,OAAO,QAoCnE"}
+{"version":3,"file":"links.d.ts","sourceRoot":"","sources":["../../../src/core/links.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,QAAQ,EAAE,cAAc,EAAmC,MAAM,OAAO,CAAA;AAEvG,OAAO,EAAE,IAAI,EAAE,WAAW,EAAkC,MAAM,UAAU,CAAA;AAG5E,oBAAY,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,CAAA;AAEpC,aAAK,gBAAgB,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;AAIxE;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,UAcjE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,eAIjE;AAED,oDAAoD;AACpD,wBAAgB,QAAQ,qBASvB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,CAAC,EAAE,WAAW,EAAE,UAAU,CAAC,EAAE,OAAO,QAuCnE"}

package/dist/esm/core/links.js

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
-import { isObject, noop } from '../utils';
+import { isObject, noop, useCallbackRef } from '../utils';
 import { cdnUrls } from './consts';
 const LinksContext = createContext(undefined);
 /**
@@ -41,34 +41,37 @@ export function useLinks() {
  */
 export function useLoadLinks(env, isLoggedIn) {
     const [, setLinks] = useLinks();
-    useEffect(() => {
-        if (!env)
-            return;
-        loadLinks(env);
-    }, [env]);
-    useEffect(() => {
-        setLinks(links => updateLoggedInParam(links, isLoggedIn));
-    }, [isLoggedIn]);
     // Load links from the CDN for the given environment.
-    async function loadLinks(env) {
+    const loadLinks = async (env) => {
         try {
             const response = await fetch(`${cdnUrls[env]}/common/data/links/base.json`);
             if (!response.ok)
                 return;
             const data = await response.json();
             if (isObject(data)) {
-                setLinks(updateLoggedInParam(data, isLoggedIn));
+                setLinks(updateLoggedInParam(data));
             }
         }
         catch {
             console.error('Failed to retrieve links');
         }
-    }
-    // Adds/removes loggedin=1 URL param for each link based on isLoggedIn arg.
-    function updateLoggedInParam(links, isLoggedIn) {
+    };
+    /**
+     * 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.
+     */
+    const updateLoggedInParam = useCallbackRef((links) => {
         return Object.keys(links).reduce((loggedInLinks, key) => {
             loggedInLinks[key] = getLoggedInLink(links[key], isLoggedIn);
             return loggedInLinks;
         }, {});
-    }
+    });
+    useEffect(() => {
+        if (!env)
+            return;
+        loadLinks(env);
+    }, [env]);
+    useEffect(() => {
+        setLinks(updateLoggedInParam);
+    }, [isLoggedIn]);
 }

package/dist/esm/dialog/dialogBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogBody.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialogBody.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEhD;;;;;GAKG;AACH,eAAO,MAAM,UAAU,wDA4CrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"dialogBody.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialogBody.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEhD;;;;;GAKG;AACH,eAAO,MAAM,UAAU,wDA6CrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/esm/dialog/dialogBody.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Box } from '../box';
 import { useStyleConfig, vui } from '../core';
-import { mergeRefs } from '../utils';
+import { cs, mergeRefs } from '../utils';
 import { useDialogContext } from './context';
 /**
  * Shows the main content between the Dialog Header and Footer.
@@ -10,6 +10,7 @@ import { useDialogContext } from './context';
  * Receives id linked to aria-describedby on the Dialog for accessibility.
  */
 export const DialogBody = vui((props, ref) => {
+    const { className, ...rest } = props;
     const { bodyId, icon, status } = useDialogContext() ?? {};
     const styles = useStyleConfig('Dialog', useDialogContext());
     const [isScrolled, setIsScrolled] = useState(false);
@@ -28,7 +29,7 @@ export const DialogBody = vui((props, ref) => {
     const borderProps = isScrolled ? { borderColor: 'grey.30' } : {};
     // Add more body padding when custom or status icon is displayed
     const paddingProps = (icon ?? status) !== undefined ? { px: 8 } : { px: 3 };
-    return (React.createElement(Box, { borderBottom: "1px solid transparent", borderTop: "1px solid transparent", className: "vui-dialogBody", column: true, id: bodyId, overflowY: "auto", pb: 2, pt: 1.5, ref: mergeRefs(ref, bodyRef), ...borderProps, ...paddingProps, ...styles.body, ...props }));
+    return (React.createElement(Box, { borderBottom: "1px solid transparent", borderTop: "1px solid transparent", className: cs('vui-dialogBody', className), column: true, id: bodyId, overflowY: "auto", pb: 2, pt: 1.5, ref: mergeRefs(ref, bodyRef), ...borderProps, ...paddingProps, ...styles.body, ...rest }));
 });
 DialogBody.displayName = 'DialogBody';
 export default DialogBody;

package/dist/esm/dialog/dialogCancelButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogCancelButton.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialogCancelButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAA;AAExD,yFAAyF;AACzF,eAAO,MAAM,kBAAkB,mEAO7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"dialogCancelButton.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialogCancelButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAA;AAExD,yFAAyF;AACzF,eAAO,MAAM,kBAAkB,mEAc7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}

package/dist/esm/dialog/dialogCancelButton.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { LineButton } from '../button';
 import { useStyleConfig, vui } from '../core';
+import { cs } from '../utils';
 import { useDialogContext } from './context';
 /** Shows an outlined Button in the Dialog Footer, which by default closes the Dialog. */
 export const DialogCancelButton = vui((props, ref) => {
+    const { className, ...rest } = props;
     const { onClose } = useDialogContext() ?? {};
     const styles = useStyleConfig('Dialog', useDialogContext());
-    return (React.createElement(LineButton, { className: "vui-dialogCancelButton", onClick: onClose, ref: ref, ...styles.cancelButton, ...props }));
+    return (React.createElement(LineButton, { className: cs('vui-dialogCancelButton', className), onClick: onClose, ref: ref, ...styles.cancelButton, ...rest }));
 });
 DialogCancelButton.displayName = 'DialogCancelButton';
 export default DialogCancelButton;

package/dist/esm/dialog/dialogCloseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogCloseButton.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialogCloseButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAEvD,oFAAoF;AACpF,eAAO,MAAM,iBAAiB,kEAoB5B,CAAA;AAIF,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"dialogCloseButton.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialogCloseButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAEvD,oFAAoF;AACpF,eAAO,MAAM,iBAAiB,kEAqB5B,CAAA;AAIF,eAAe,iBAAiB,CAAA"}

package/dist/esm/dialog/dialogCloseButton.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { CloseButton } from '../button';
 import { useStyleConfig, vui } from '../core';
+import { cs } from '../utils';
 import { useDialogContext } from './context';
 /** Shows a CloseButton in the Dialog Header, which by default closes the Dialog. */
 export const DialogCloseButton = vui((props, ref) => {
+    const { className, ...rest } = props;
     const { onClose } = useDialogContext() ?? {};
     const styles = useStyleConfig('Dialog', useDialogContext());
-    return (React.createElement(CloseButton, { 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.createElement(CloseButton, { activeBg: "grey.30", className: 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 }));
 });
 DialogCloseButton.displayName = 'DialogCloseButton';
 export default DialogCloseButton;

package/dist/esm/dialog/dialogFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogFooter.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialogFooter.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAIlD,kGAAkG;AAClG,eAAO,MAAM,YAAY,0DAevB,CAAA;AAIF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"dialogFooter.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialogFooter.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAIlD,kGAAkG;AAClG,eAAO,MAAM,YAAY,0DAuBvB,CAAA;AAIF,eAAe,YAAY,CAAA"}

package/dist/esm/dialog/dialogFooter.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Box } from '../box';
 import { useStyleConfig, vui } from '../core';
-import { isJsx } from '../utils';
+import { cs, isJsx } from '../utils';
 import { useDialogContext } from './context';
 import DialogCancelButton from './dialogCancelButton';
 import DialogSubmitButton from './dialogSubmitButton';
 /** Shows control buttons below the Dialog Body. By default includes cancel and submit buttons. */
 export const DialogFooter = vui((props, ref) => {
-    const { cancelButton, children, submitButton, ...rest } = props;
+    const { cancelButton, children, className, submitButton, ...rest } = props;
     const styles = useStyleConfig('Dialog', useDialogContext());
-    return (React.createElement(Box, { className: "vui-dialogFooter", justifyContent: "flex-end", p: 3, pt: 2, ref: ref, ...styles.footer, ...rest }, children ?? (React.createElement(React.Fragment, null,
+    return (React.createElement(Box, { className: cs('vui-dialogFooter', className), justifyContent: "flex-end", p: 3, pt: 2, ref: ref, ...styles.footer, ...rest }, children ?? (React.createElement(React.Fragment, null,
         isJsx(cancelButton) ? cancelButton : cancelButton && React.createElement(DialogCancelButton, { ...cancelButton }),
         isJsx(submitButton) ? submitButton : submitButton && React.createElement(DialogSubmitButton, { ...submitButton })))));
 });

package/dist/esm/dialog/dialogHeader.js

@@ -1,21 +1,21 @@
 import React from 'react';
 import { Box } from '../box';
 import { useStyleConfig, vui } from '../core';
-import { isJsx, isReactText, isString } from '../utils';
+import { cs, isJsx, isReactText, isString } from '../utils';
 import { useDialogContext } from './context';
 import DialogCloseButton from './dialogCloseButton';
 import DialogIcon from './dialogIcon';
 import DialogTitle from './dialogTitle';
 /** Shows title, status icon and close button above the Dialog Body. */
 export const DialogHeader = vui((props, ref) => {
-    const { children, closeButton, icon: iconProp, title: titleProp, ...rest } = props;
+    const { children, className, closeButton, icon: iconProp, title: titleProp, ...rest } = props;
     const { onClose, status } = useDialogContext() ?? {};
     const styles = useStyleConfig('Dialog', useDialogContext());
     const icon = isString(iconProp) ? { name: iconProp } : iconProp;
     const showCloseButton = Boolean(closeButton !== undefined ? closeButton : onClose);
     const showIcon = Boolean(icon || status);
     const title = isReactText(titleProp) ? { text: titleProp } : titleProp;
-    return (React.createElement(Box, { className: "vui-dialogHeader", icon: icon, pb: 1.5, pl: 3, position: "relative", pr: 8, pt: 3, ref: ref, ...styles.header, ...rest }, children ?? (React.createElement(React.Fragment, null,
+    return (React.createElement(Box, { className: cs('vui-dialogHeader', className), icon: icon, pb: 1.5, pl: 3, position: "relative", pr: 8, pt: 3, ref: ref, ...styles.header, ...rest }, children ?? (React.createElement(React.Fragment, null,
         isJsx(icon) ? icon : showIcon && React.createElement(DialogIcon, { ...icon }),
         isJsx(title) ? title : title && React.createElement(DialogTitle, { ...title }),
         isJsx(closeButton) ? closeButton : showCloseButton && React.createElement(DialogCloseButton, null)))));

package/dist/esm/dialog/dialogIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogIcon.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialogIcon.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEhD,+EAA+E;AAC/E,eAAO,MAAM,UAAU,wDAMrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"dialogIcon.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialogIcon.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEhD,+EAA+E;AAC/E,eAAO,MAAM,UAAU,wDAOrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/esm/dialog/dialogIcon.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import { Icon } from '../icon';
+import { cs } from '../utils';
 import { dialogStatusMapping } from './consts';
 import { useDialogContext } from './context';
 /** Shows an icon based on a given status. Optionally, can be a custom icon. */
 export const DialogIcon = vui((props, ref) => {
+    const { className, ...rest } = props;
     const { status = '' } = useDialogContext() ?? {};
     const styles = useStyleConfig('Dialog', useDialogContext());
     const { iconProps } = dialogStatusMapping[status] ?? {};
-    return React.createElement(Icon, { className: "vui-dialogIcon", mr: 2, ref: ref, ...styles.icon, ...iconProps, ...props });
+    return React.createElement(Icon, { className: cs('vui-dialogIcon', className), mr: 2, ref: ref, ...styles.icon, ...iconProps, ...rest });
 });
 DialogIcon.displayName = 'DialogIcon';
 export default DialogIcon;

package/dist/esm/dialog/dialogSubmitButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogSubmitButton.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialogSubmitButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAA;AAExD,yFAAyF;AACzF,eAAO,MAAM,kBAAkB,mEAM7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"dialogSubmitButton.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialogSubmitButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAA;AAExD,yFAAyF;AACzF,eAAO,MAAM,kBAAkB,mEAc7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}

package/dist/esm/dialog/dialogSubmitButton.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Button } from '../button';
 import { useStyleConfig, vui } from '../core';
+import { cs } from '../utils';
 import { useDialogContext } from './context';
 /** Shows a button in the Dialog Footer, which triggers the main action of the Dialog. */
 export const DialogSubmitButton = vui((props, ref) => {
+    const { className, ...rest } = props;
     const styles = useStyleConfig('Dialog', useDialogContext());
-    return (React.createElement(Button, { className: "vui-dialogSubmitButton", ml: 2, ref: ref, text: "Submit", ...styles.submitButton, ...props }));
+    return (React.createElement(Button, { className: cs('vui-dialogSubmitButton', className), ml: 2, ref: ref, text: "Submit", ...styles.submitButton, ...rest }));
 });
 DialogSubmitButton.displayName = 'DialogSubmitButton';
 export default DialogSubmitButton;

package/dist/esm/dialog/dialogTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogTitle.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialogTitle.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEjD,iHAAiH;AACjH,eAAO,MAAM,WAAW,wDAKtB,CAAA;AAIF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"dialogTitle.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialogTitle.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEjD,iHAAiH;AACjH,eAAO,MAAM,WAAW,wDAMtB,CAAA;AAIF,eAAe,WAAW,CAAA"}

package/dist/esm/dialog/dialogTitle.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import { H4 } from '../heading';
+import { cs } from '../utils';
 import { useDialogContext } from './context';
 /** Shows a title in the Dialog Header. Receives id linked to aria-labelledby on the Dialog for accessibility. */
 export const DialogTitle = vui((props, ref) => {
+    const { className, ...rest } = props;
     const { titleId } = useDialogContext() ?? {};
     const styles = useStyleConfig('Dialog', useDialogContext());
-    return React.createElement(H4, { className: "vui-dialogTitle", id: titleId, ref: ref, ...styles.title, ...props });
+    return React.createElement(H4, { className: cs('vui-dialogTitle', className), id: titleId, ref: ref, ...styles.title, ...rest });
 });
 DialogTitle.displayName = 'DialogTitle';
 export default DialogTitle;

package/dist/esm/footer/footerColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footerColumn.d.ts","sourceRoot":"","sources":["../../../src/footer/footerColumn.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAGlD,0FAA0F;AAC1F,QAAA,MAAM,YAAY,0DAkBhB,CAAA;AAEF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"footerColumn.d.ts","sourceRoot":"","sources":["../../../src/footer/footerColumn.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAGlD,0FAA0F;AAC1F,QAAA,MAAM,YAAY,0DAkBhB,CAAA;AAEF,eAAe,YAAY,CAAA"}