@veracity/vui 0.5.2 → 0.6.1

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;

package/footer/footerRow.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 };
 };
@@ -17,10 +28,12 @@ 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");
 /** Organizes Footer content into a row of multuple columns. */
 var FooterRow = (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-footerRow", m: -1.5, ref: ref, wrap: true }, styles.row, props));
+    return react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-footerRow', className), m: -1.5, ref: ref, wrap: true }, styles.row, rest));
 });
 exports.default = FooterRow;

package/footer/footerSection.js

@@ -35,9 +35,9 @@ var footerHeading_1 = __importDefault(require("./footerHeading"));
 var footerLink_1 = __importDefault(require("./footerLink"));
 /** Section includes a heading and a set of links. */
 exports.FooterSection = (0, core_1.vui)(function (props, ref) {
-    var children = props.children, heading = props.heading, links = props.links, rest = __rest(props, ["children", "heading", "links"]);
+    var children = props.children, className = props.className, heading = props.heading, links = props.links, rest = __rest(props, ["children", "className", "heading", "links"]);
     var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
-    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-footerSection", column: true, ref: ref }, styles.section, rest),
+    return (react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-footerSection', className), column: true, ref: ref }, styles.section, rest),
         (0, utils_1.isJsx)(heading) ? heading : react_1.default.createElement(footerHeading_1.default, { text: heading }), children !== null && children !== void 0 ? children : ((0, utils_1.isJsx)(links) ? (links) : (react_1.default.createElement(core_1.v.ul, null, links === null || links === void 0 ? void 0 : links.map(function (_a, index) {
         var text = _a.text, url = _a.url;
         return (react_1.default.createElement(core_1.v.li, { key: index },

package/footer/footerTrademark.js

@@ -31,14 +31,15 @@ var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var link_1 = __importDefault(require("../link"));
 var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 var footerColumn_1 = __importDefault(require("./footerColumn"));
 var defaultLinkedInUrl = 'https://www.linkedin.com/showcase/veracity-data-platform';
 /** Section includes a heading and a set of links. */
 exports.FooterTrademark = (0, core_1.vui)(function (props, ref) {
-    var linkedIn = props.linkedIn, rest = __rest(props, ["linkedIn"]);
+    var className = props.className, linkedIn = props.linkedIn, rest = __rest(props, ["className", "linkedIn"]);
     var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
-    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-footerTrademark", ref: ref, w: "100%", wrap: true }, styles.trademark, rest),
+    return (react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-footerTrademark', className), ref: ref, w: "100%", wrap: true }, styles.trademark, rest),
         react_1.default.createElement(footerColumn_1.default, { centerV: true, flex: { xs: '0 0 100%', md: '0 0 25%' } },
             react_1.default.createElement(link_1.default, { colorScheme: "white", fontWeight: "demi", href: linkedIn !== null && linkedIn !== void 0 ? linkedIn : defaultLinkedInUrl, iconLeft: react_1.default.createElement(link_1.default.Icon, { mr: 1, name: "fabLinkedin", size: "sm" }), isExternal: true }, "Follow us")),
         react_1.default.createElement(footerColumn_1.default, { centerV: true, flex: { xs: '0 0 100%', md: '0 0 75%' } },

package/header/headerAccount.js

@@ -67,12 +67,12 @@ function HeaderAccount(props) {
         : { maxH: 360, py: 1, w: 320 };
     var name = (0, utils_1.isObject)(userInfo) ? userInfo.userName : '';
     return (react_1.default.createElement(popover_1.default, __assign({ offset: [0, 8], options: popoverOptions, placement: "bottom-end" }, rest),
-        react_1.default.createElement(popover_1.default.Trigger, __assign({ as: avatar_1.default, colorScheme: "prussian", isInteractive: true, ml: 2, name: name, title: "Account", variant: "solid" }, styles.trigger, triggerProps)),
-        react_1.default.createElement(popover_1.default.Content, __assign({ column: true }, styles.content, contentScreenProps, contentProps),
+        react_1.default.createElement(popover_1.default.Trigger, __assign({ as: avatar_1.default, className: "vui-headerAccountTrigger", colorScheme: "prussian", isInteractive: true, ml: 2, name: name, title: "Account", variant: "solid" }, styles.trigger, triggerProps)),
+        react_1.default.createElement(popover_1.default.Content, __assign({ className: "vui-headerAccountContent", column: true }, styles.content, contentScreenProps, contentProps),
             (0, utils_1.isJsx)(userInfo) ? userInfo : userInfo && react_1.default.createElement(headerAccountUserInfo_1.default, __assign({}, userInfo)),
             (0, utils_1.isJsx)(sections)
                 ? sections
-                : sections && (react_1.default.createElement(list_1.default, null, sections.map(function (_a, index) {
+                : sections && (react_1.default.createElement(list_1.default, { className: "vui-headerAccountList" }, sections.map(function (_a, index) {
                     var heading = _a.heading, links = _a.links;
                     return (react_1.default.createElement(react_1.Fragment, { key: index },
                         react_1.default.createElement(list_1.default.Divider, null),

package/header/headerAccountUserInfo.js

@@ -31,13 +31,14 @@ var avatar_1 = __importDefault(require("../avatar"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays user information, like username and company name, within HeaderAccount part. */
 exports.HeaderAccountUserInfo = (0, core_1.vui)(function (props, ref) {
-    var children = props.children, companyName = props.companyName, userName = props.userName, rest = __rest(props, ["children", "companyName", "userName"]);
+    var children = props.children, className = props.className, companyName = props.companyName, userName = props.userName, rest = __rest(props, ["children", "className", "companyName", "userName"]);
     var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
-    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-headerAccountUserInfo", p: 2, pb: 1, ref: ref, spaceX: 2 }, styles.accountUserInfo, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(avatar_1.default, { colorScheme: "prussian", name: userName, size: "lg", variant: "solid" }),
+    return (react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-headerAccountUserInfo', className), p: 2, pb: 1, ref: ref, spaceX: 2 }, styles.accountUserInfo, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(avatar_1.default, { className: "vui-headerAccountUserInfoAvatar", colorScheme: "prussian", name: userName, size: "lg", variant: "solid" }),
         react_1.default.createElement(box_1.default, { column: true },
             userName && (react_1.default.createElement(t_1.default, { mb: 0.5, weight: "demi" }, userName)),
             companyName && react_1.default.createElement(t_1.default, null, companyName))))));

package/header/headerContent.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.HeaderContent = 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.HeaderContent = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, rest = __rest(props, ["className"]);
     var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
-    return react_1.default.createElement(box_1.default, __assign({ centerV: true, className: "vui-headerContent", h: 1, mx: "auto", ref: ref, w: 1 }, styles.content, props));
+    return (react_1.default.createElement(box_1.default, __assign({ centerV: true, className: (0, utils_1.cs)('vui-headerContent', className), h: 1, mx: "auto", ref: ref, w: 1 }, styles.content, rest)));
 });
 exports.HeaderContent.displayName = 'HeaderContent';
 exports.default = exports.HeaderContent;

package/header/headerCreateAccount.js

@@ -31,15 +31,16 @@ var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var link_1 = __importDefault(require("../link"));
 var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Text inviting to create an account when logged out. */
 exports.HeaderCreateAccount = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var children = props.children, url = props.url, rest = __rest(props, ["children", "url"]);
+    var children = props.children, className = props.className, url = props.url, rest = __rest(props, ["children", "className", "url"]);
     var _b = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}, isMobile = _b.isMobile, links = _b.links;
     var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).createAccount;
     var screenProps = isMobile ? { borderBottom: '1px solid grey.40', p: 2 } : { ml: 3 };
-    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-headerCreateAccount", column: true, flexShrink: 0, ref: ref }, styles.container, screenProps, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-headerCreateAccount', className), column: true, flexShrink: 0, ref: ref }, styles.container, screenProps, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(t_1.default, __assign({ size: "sm" }, styles.text), "New to Veracity?"),
         react_1.default.createElement(link_1.default, __assign({ fontWeight: "medium", href: url !== null && url !== void 0 ? url : links.signUp, isUnderlined: true, size: "sm" }, styles.link), "Create account")))));
 });

package/header/headerDivider.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.HeaderDivider = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var divider_1 = __importDefault(require("../divider"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Vertical line dividing some of the Header content. */
 exports.HeaderDivider = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, rest = __rest(props, ["className"]);
     var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
-    return (react_1.default.createElement(divider_1.default, __assign({ borderColor: "prussian.80", className: "vui-headerDivider", h: 40, isVertical: true, ref: ref }, styles.divider, props)));
+    return (react_1.default.createElement(divider_1.default, __assign({ borderColor: "prussian.80", className: (0, utils_1.cs)('vui-headerDivider', className), h: 40, isVertical: true, ref: ref }, styles.divider, rest)));
 });
 exports.HeaderDivider.displayName = 'HeaderDivider';
 exports.default = exports.HeaderDivider;

package/header/headerLogo.js

@@ -30,17 +30,18 @@ var react_1 = __importDefault(require("react"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var svg_1 = __importDefault(require("../svg"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 var defaultLogo = core_1.cdnUrl + "/common/icons/logos/veracity-logo.svg";
 /** Logo displayed in the left corner of the Header. By default Veracity logo is used. */
 exports.HeaderLogo = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var children = props.children, _b = props.src, src = _b === void 0 ? defaultLogo : _b, url = props.url, rest = __rest(props, ["children", "src", "url"]);
+    var children = props.children, className = props.className, _b = props.src, src = _b === void 0 ? defaultLogo : _b, url = props.url, rest = __rest(props, ["children", "className", "src", "url"]);
     var links = ((_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}).links;
     var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).logo;
     var logoUrl = url !== null && url !== void 0 ? url : links.home;
     var linkProps = logoUrl ? { as: 'a', href: logoUrl, outline: 'none', focusRing: 2 } : {};
-    return (react_1.default.createElement(box_1.default, __assign({ centerV: true, className: "vui-headerLogo", flexShrink: 0, h: 40, mr: 2, ref: ref }, styles.container, linkProps, rest), children !== null && children !== void 0 ? children : react_1.default.createElement(svg_1.default, __assign({ "aria-label": "logo", h: "100%", src: src }, styles.svg))));
+    return (react_1.default.createElement(box_1.default, __assign({ centerV: true, className: (0, utils_1.cs)('vui-headerLogo', className), flexShrink: 0, h: 40, mr: 2, ref: ref }, styles.container, linkProps, rest), children !== null && children !== void 0 ? children : react_1.default.createElement(svg_1.default, __assign({ "aria-label": "logo", h: "100%", src: src }, styles.svg))));
 });
 exports.HeaderLogo.displayName = 'HeaderLogo';
 exports.default = exports.HeaderLogo;

package/header/headerMainLinks.js

@@ -29,16 +29,17 @@ exports.HeaderMainLinks = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var list_1 = __importDefault(require("../list"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 var headerLinkItem_1 = __importDefault(require("./headerLinkItem"));
 /** List of Header Links. */
 exports.HeaderMainLinks = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var children = props.children, links = props.links, rest = __rest(props, ["children", "links"]);
+    var children = props.children, className = props.className, links = props.links, rest = __rest(props, ["children", "className", "links"]);
     var isMobile = ((_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}).isMobile;
     var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
     var screenStyles = isMobile ? { borderBottom: '1px solid grey.40', flexDirection: 'column', mb: 1 } : { h: '100%' };
-    return (react_1.default.createElement(list_1.default, __assign({ className: "vui-headerMainLinks", display: "flex", ref: ref }, styles.mainLinks, screenStyles, rest), children !== null && children !== void 0 ? children : links === null || links === void 0 ? void 0 : links.map(function (link, index) { return react_1.default.createElement(headerLinkItem_1.default, __assign({ key: index }, link)); })));
+    return (react_1.default.createElement(list_1.default, __assign({ className: (0, utils_1.cs)('vui-headerMainLinks', className), display: "flex", ref: ref }, styles.mainLinks, screenStyles, rest), children !== null && children !== void 0 ? children : links === null || links === void 0 ? void 0 : links.map(function (link, index) { return react_1.default.createElement(headerLinkItem_1.default, __assign({ key: index }, link)); })));
 });
 exports.HeaderMainLinks.displayName = 'HeaderMainLinks';
 exports.default = exports.HeaderMainLinks;

package/header/headerMobileContent.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 };
 };
@@ -23,9 +34,10 @@ var context_1 = require("./context");
 /** Displays some of the Header content when on a mobile screen. */
 exports.HeaderMobileContent = (0, core_1.vui)(function (props, ref) {
     var _a;
+    var className = props.className, rest = __rest(props, ["className"]);
     var _b = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}, isMobileOpen = _b.isMobileOpen, mobileContentRef = _b.mobileContentRef;
     var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
-    return isMobileOpen ? (react_1.default.createElement(box_1.default, __assign({ bg: "white", className: "vui-headerMobileContent", column: true, h: "calc(100vh - 100% - 1px)", left: 0, overflowX: "hidden", overflowY: "auto", position: "absolute", ref: (0, utils_1.mergeRefs)(ref, mobileContentRef), right: 0, top: "calc(100% + 1px)", zIndex: "100" }, styles.mobileContent, props))) : null;
+    return isMobileOpen ? (react_1.default.createElement(box_1.default, __assign({ bg: "white", className: (0, utils_1.cs)('vui-headerMobileContent', className), column: true, h: "calc(100vh - 100% - 1px)", left: 0, overflowX: "hidden", overflowY: "auto", position: "absolute", ref: (0, utils_1.mergeRefs)(ref, mobileContentRef), right: 0, top: "calc(100% + 1px)", zIndex: "100" }, styles.mobileContent, rest))) : null;
 });
 exports.HeaderMobileContent.displayName = 'HeaderMobileContent';
 exports.default = exports.HeaderMobileContent;

package/header/headerMobileToggle.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 };
 };
@@ -24,10 +35,11 @@ var context_1 = require("./context");
 /** Button that toggles display of the mobile content. */
 exports.HeaderMobileToggle = (0, core_1.vui)(function (props, ref) {
     var _a;
+    var className = props.className, rest = __rest(props, ["className"]);
     var _b = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}, isMobileOpen = _b.isMobileOpen, mobileToggleRef = _b.mobileToggleRef, setIsMobileOpen = _b.setIsMobileOpen;
     var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
     var iconName = isMobileOpen ? 'falTimes' : 'falBars';
-    return (react_1.default.createElement(button_1.IconButton, __assign({ className: "vui-headerMobileToggle", colorScheme: "prussian", icon: react_1.default.createElement(icon_1.default, { name: iconName, scale: 2 }), ml: 2, onClick: function () { return setIsMobileOpen(function (s) { return !s; }); }, p: "3px", ref: (0, utils_1.mergeRefs)(ref, mobileToggleRef) }, styles.mobileToggle, props)));
+    return (react_1.default.createElement(button_1.IconButton, __assign({ className: (0, utils_1.cs)('vui-headerMobileToggle', className), colorScheme: "prussian", icon: react_1.default.createElement(icon_1.default, { name: iconName, scale: 2 }), ml: 2, onClick: function () { return setIsMobileOpen(function (s) { return !s; }); }, p: "3px", ref: (0, utils_1.mergeRefs)(ref, mobileToggleRef) }, styles.mobileToggle, rest)));
 });
 exports.HeaderMobileToggle.displayName = 'HeaderMobileToggle';
 exports.default = exports.HeaderMobileToggle;

package/header/headerNotifications.js

@@ -33,6 +33,7 @@ exports.HeaderNotifications = 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");
 var Badge = core_1.styled.spanBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: red.70;\n\tborder-radius: round;\n\tcolor: white;\n\tdisplay: flex;\n\tfont-size: 8px;\n\tfont-weight: medium;\n\theight: 16px;\n\tjustify-content: center;\n\tposition: absolute;\n\tright: 1px;\n\ttop: 1px;\n\twidth: 16px;\n"], ["\n\talign-items: center;\n\tbackground-color: red.70;\n\tborder-radius: round;\n\tcolor: white;\n\tdisplay: flex;\n\tfont-size: 8px;\n\tfont-weight: medium;\n\theight: 16px;\n\tjustify-content: center;\n\tposition: absolute;\n\tright: 1px;\n\ttop: 1px;\n\twidth: 16px;\n"
     /** Icon link to Veracity notifications engine with an optional number of new notifications. */
@@ -40,10 +41,10 @@ var Badge = core_1.styled.spanBox(templateObject_1 || (templateObject_1 = __make
 /** Icon link to Veracity notifications engine with an optional number of new notifications. */
 exports.HeaderNotifications = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var children = props.children, _b = props.count, count = _b === void 0 ? 0 : _b, url = props.url, rest = __rest(props, ["children", "count", "url"]);
+    var children = props.children, className = props.className, _b = props.count, count = _b === void 0 ? 0 : _b, url = props.url, rest = __rest(props, ["children", "className", "count", "url"]);
     var links = ((_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}).links;
     var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).notifications;
-    return (react_1.default.createElement(button_1.default, __assign({ as: "a", href: url !== null && url !== void 0 ? url : links.notifications, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, title: "Notifications", variant: "text" }, styles.container, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(button_1.default, __assign({ as: "a", className: (0, utils_1.cs)('vui-headerNotifications', className), href: url !== null && url !== void 0 ? url : links.notifications, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, title: "Notifications", variant: "text" }, styles.container, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(button_1.default.Icon, { name: "falBell" }),
         count > 0 && react_1.default.createElement(Badge, null, count < 100 ? count : '99+')))));
 });

package/header/headerServices.js

@@ -38,7 +38,7 @@ function ListContent(_a) {
     var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).services;
     return (react_1.default.createElement(react_1.default.Fragment, null, links.length > 0 ? (links.map(function (_a, index) {
         var text = _a.text, url = _a.url;
-        return (react_1.default.createElement(menu_1.default.Item, __assign({ isTruncated: true, key: index, linkProps: { href: url }, text: text }, styles.item)));
+        return (react_1.default.createElement(menu_1.default.Item, __assign({ isTruncated: true, key: index, linkProps: { href: url }, text: text, title: text }, styles.item)));
     })) : (react_1.default.createElement(headerServicesMessage_1.default, null))));
 }
 /** Displays a list of services available to the user. */

package/header/headerServicesMessage.js

@@ -30,14 +30,15 @@ var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var link_1 = __importDefault(require("../link"));
 var p_1 = __importDefault(require("../p"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays a message with link to Marketplace if user has no services available. */
 exports.HeaderServicesMessage = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var children = props.children, rest = __rest(props, ["children"]);
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
     var links = ((_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}).links;
     var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
-    return (react_1.default.createElement(p_1.default, __assign({ mb: 2, ml: 2, ref: ref }, styles.servicesMessage, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(p_1.default, __assign({ className: (0, utils_1.cs)('vui-headerServicesMessage', className), mb: 2, ml: 2, ref: ref }, styles.servicesMessage, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
         "No services available. ",
         react_1.default.createElement("br", null),
         "Explore more on the",

package/header/headerSignIn.js

@@ -29,14 +29,15 @@ exports.HeaderSignIn = 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");
 /** Sign in button leading to Veracity login page. */
 exports.HeaderSignIn = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var children = props.children, url = props.url, rest = __rest(props, ["children", "url"]);
+    var children = props.children, className = props.className, url = props.url, rest = __rest(props, ["children", "className", "url"]);
     var links = ((_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}).links;
     var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
-    return (react_1.default.createElement(button_1.default, __assign({ as: "a", className: "vui-headerSignIn", href: url !== null && url !== void 0 ? url : links.signIn, ref: ref }, styles.signIn, rest), children !== null && children !== void 0 ? children : 'Sign in'));
+    return (react_1.default.createElement(button_1.default, __assign({ as: "a", className: (0, utils_1.cs)('vui-headerSignIn', className), href: url !== null && url !== void 0 ? url : links.signIn, ref: ref }, styles.signIn, rest), children !== null && children !== void 0 ? children : 'Sign in'));
 });
 exports.HeaderSignIn.displayName = 'HeaderSignIn';
 exports.default = exports.HeaderSignIn;

package/index.d.ts

@@ -21,6 +21,7 @@ export * from './menu';
 export * from './modal';
 export * from './notification';
 export * from './p';
+export * from './pagination';
 export * from './panel';
 export * from './popover';
 export * from './portal';

package/index.js

@@ -33,6 +33,7 @@ __exportStar(require("./menu"), exports);
 __exportStar(require("./modal"), exports);
 __exportStar(require("./notification"), exports);
 __exportStar(require("./p"), exports);
+__exportStar(require("./pagination"), exports);
 __exportStar(require("./panel"), exports);
 __exportStar(require("./popover"), exports);
 __exportStar(require("./portal"), exports);

package/input/context.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { InputProps } from './input.types';
-declare const InputProvider: import("react").Provider<Partial<InputProps>>, useInput: () => Partial<InputProps>;
-export { InputProvider, useInput };
+declare const InputProvider: import("react").Provider<Partial<InputProps>>, useInputContext: () => Partial<InputProps>;
+export { InputProvider, useInputContext };

package/input/context.js

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

package/input/input.js

@@ -133,7 +133,7 @@ exports.Input = (0, core_1.vui)(function (props, ref) {
             (0, utils_1.isString)(iconRight) ? react_1.default.createElement(inputIcon_1.default, { mr: 1, name: iconRight }) : iconRight,
             itemRight,
             state && react_1.default.createElement(inputIcon_1.default, __assign({ mr: 1 }, (_d = states[state]) === null || _d === void 0 ? void 0 : _d.iconProps)),
-            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-inputCount", color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
                 count,
                 " / ",
                 maxLength)))));

package/input/inputIcon.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,14 +29,16 @@ exports.InputIcon = 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 Input. */
 exports.InputIcon = (0, core_1.vui)(function (props, ref) {
-    var inputProps = (0, context_1.useInput)();
+    var className = props.className, rest = __rest(props, ["className"]);
+    var inputProps = (0, context_1.useInputContext)();
     var mergedProps = __assign(__assign({}, inputProps), props);
     var styles = (0, core_1.useStyleConfig)('Input', mergedProps);
     var color = !mergedProps.disabled ? 'blue.80' : 'grey.50';
-    return react_1.default.createElement(icon_1.default, __assign({ className: "vui-inputIcon", color: color, ref: ref }, styles.icon, props));
+    return react_1.default.createElement(icon_1.default, __assign({ className: (0, utils_1.cs)('vui-inputIcon', className), color: color, ref: ref }, styles.icon, rest));
 });
 exports.InputIcon.displayName = 'InputIcon';
 exports.default = exports.InputIcon;

package/input/inputInput.js

@@ -14,6 +14,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 };
 };
@@ -28,13 +39,14 @@ exports.InputInputBase = core_1.styled.input(templateObject_1 || (templateObject
 ])));
 /** Displays an input element within the Input component. */
 exports.InputInput = (0, core_1.vui)(function (props, ref) {
-    var inputProps = (0, context_1.useInput)();
+    var className = props.className, rest = __rest(props, ["className"]);
+    var inputProps = (0, context_1.useInputContext)();
     var mergedProps = __assign(__assign({}, inputProps), props);
     var styles = (0, core_1.useStyleConfig)('Input', mergedProps);
     var aliasedProps = (0, utils_1.filterUndefined)({
         'aria-disabled': mergedProps.disabled
     });
-    return react_1.default.createElement(exports.InputInputBase, __assign({ className: "vui-inputInput", ref: ref }, styles.input, aliasedProps, props));
+    return (react_1.default.createElement(exports.InputInputBase, __assign({ className: (0, utils_1.cs)('vui-inputInput', className), ref: ref }, styles.input, aliasedProps, rest)));
 });
 exports.InputInput.displayName = 'InputInput';
 exports.default = exports.InputInput;

package/link/context.d.ts

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

package/link/context.js

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

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