@veracity/vui 0.5.2 → 0.6.1

package/link/linkText.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.LinkText = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays text of the Link. */
 exports.LinkText = (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(t_1.default, __assign({ className: "vui-linkText", fontSize: "inherit", ref: ref, transitionDuration: "unset" }, styles.text, 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(t_1.default, __assign({ className: (0, utils_1.cs)('vui-linkText', className), fontSize: "inherit", ref: ref, transitionDuration: "unset" }, styles.text, rest)));
 });
 exports.LinkText.displayName = 'LinkText';
 exports.default = exports.LinkText;

package/list/context.d.ts

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

package/list/context.js

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

package/list/listDivider.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.ListDivider = 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");
 /** Displays a divider line within the List. */
 exports.ListDivider = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('List', __assign(__assign({}, (0, context_1.useList)()), props));
-    return react_1.default.createElement(divider_1.default, __assign({ className: "vui-listDivider", my: 1, ref: ref }, styles.divider, props));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('List', (0, context_1.useListContext)());
+    return react_1.default.createElement(divider_1.default, __assign({ className: (0, utils_1.cs)('vui-listDivider', className), my: 1, ref: ref }, styles.divider, rest));
 });
 exports.ListDivider.displayName = 'ListDivider';
 exports.default = exports.ListDivider;

package/list/listHeading.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.ListHeading = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var t_1 = require("../t");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays a heading within the List. */
 exports.ListHeading = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('List', __assign(__assign({}, (0, context_1.useList)()), props));
-    return (react_1.default.createElement(t_1.T, __assign({ className: "vui-listHeading", color: "grey.60", display: "inline-block", px: 2, py: 1, ref: ref, size: "sm", textTransform: "uppercase", weight: "medium" }, styles.heading, props)));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('List', (0, context_1.useListContext)());
+    return (react_1.default.createElement(t_1.T, __assign({ className: (0, utils_1.cs)('vui-listHeading', className), color: "grey.60", display: "inline-block", px: 2, py: 1, ref: ref, size: "sm", textTransform: "uppercase", weight: "medium" }, styles.heading, rest)));
 });
 exports.ListHeading.displayName = 'ListHeading';
 exports.default = exports.ListHeading;

package/list/listIcon.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.ListIcon = 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 on the side of the ListItem. */
 exports.ListIcon = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('List', __assign(__assign({}, (0, context_1.useList)()), props));
-    return react_1.default.createElement(icon_1.default, __assign({ className: "vui-listIcon", ref: ref }, styles.icon, props));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('List', (0, context_1.useListContext)());
+    return react_1.default.createElement(icon_1.default, __assign({ className: (0, utils_1.cs)('vui-listIcon', className), ref: ref }, styles.icon, rest));
 });
 exports.ListIcon.displayName = 'ListIcon';
 exports.default = exports.ListIcon;

package/list/listItem.js

@@ -57,7 +57,7 @@ var context_1 = require("./context");
 var listIcon_1 = __importDefault(require("./listIcon"));
 var listText_1 = __importDefault(require("./listText"));
 /** Used as optional content wrapper when list item should be a link. */
-var ListItemLink = (0, core_1.vui)(function (props, ref) { return (react_1.default.createElement(link_1.default, __assign({ borderRadius: "none", h: "100%", px: 2, ref: ref, variant: "plain", w: "100%" }, props))); });
+var ListItemLink = (0, core_1.vui)(function (props, ref) { return (react_1.default.createElement(link_1.default, __assign({ borderRadius: "none", className: "vui-listItemLink", h: "100%", px: 2, ref: ref, variant: "plain", w: "100%" }, props))); });
 exports.ListItemBase = core_1.styled.liBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\ttransition-duration: fast;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\ttransition-duration: fast;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n"
     /**
      * Displays a list item with text and optional icons. Can be shown as interactive or selected.
@@ -69,9 +69,9 @@ exports.ListItemBase = core_1.styled.liBox(templateObject_1 || (templateObject_1
  * Optionally wraps the content with an <a> element when rendering a link.
  */
 exports.ListItem = (0, core_1.vui)(function (props, ref) {
-    var mergedProps = __assign(__assign({}, (0, context_1.useList)()), props);
+    var mergedProps = __assign(__assign({}, (0, context_1.useListContext)()), props);
     var children = mergedProps.children, center = mergedProps.center, centerH = mergedProps.centerH, _a = mergedProps.centerV, centerV = _a === void 0 ? true : _a, className = mergedProps.className, column = mergedProps.column, disabled = mergedProps.disabled, iconLeft = mergedProps.iconLeft, iconRight = mergedProps.iconRight, isInteractiveProp = mergedProps.isInteractive, isSelected = mergedProps.isSelected, isTruncated = mergedProps.isTruncated, itemLeft = mergedProps.itemLeft, itemRight = mergedProps.itemRight, linkProps = mergedProps.linkProps, onClick = mergedProps.onClick, text = mergedProps.text, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconLeft", "iconRight", "isInteractive", "isSelected", "isTruncated", "itemLeft", "itemRight", "linkProps", "onClick", "text"]);
-    var styles = (0, core_1.useStyleConfig)('List', (0, context_1.useList)());
+    var styles = (0, core_1.useStyleConfig)('List', (0, context_1.useListContext)());
     var _b = styles.item, activeBg = _b.activeBg, hoverBg = _b.hoverBg, selectedBg = _b.selectedBg, itemStyles = __rest(_b, ["activeBg", "hoverBg", "selectedBg"]);
     var isLinkItem = linkProps !== undefined;
     var isInteractive = isInteractiveProp || isLinkItem || onClick !== undefined;

package/list/listText.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.ListText = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays text within the ListItem. */
 exports.ListText = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('List', __assign(__assign({}, (0, context_1.useList)()), props));
-    return react_1.default.createElement(t_1.default, __assign({ className: "vui-listText", fontSize: "inherit", ref: ref }, styles.text, props));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('List', (0, context_1.useListContext)());
+    return react_1.default.createElement(t_1.default, __assign({ className: (0, utils_1.cs)('vui-listText', className), fontSize: "inherit", ref: ref }, styles.text, rest));
 });
 exports.ListText.displayName = 'ListText';
 exports.default = exports.ListText;

package/menu/menuButton.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 };
 };
@@ -19,11 +30,13 @@ var react_1 = __importDefault(require("react"));
 var button_1 = require("../button");
 var core_1 = require("../core");
 var popover_1 = require("../popover");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays PopoverTrigger as a button. */
 exports.MenuButton = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, (0, context_1.useMenuContext)()), props));
-    return react_1.default.createElement(popover_1.PopoverTrigger, __assign({ as: button_1.TextButton, className: "vui-menuButton", ref: ref }, styles.button, props));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Menu', (0, context_1.useMenuContext)());
+    return (react_1.default.createElement(popover_1.PopoverTrigger, __assign({ as: button_1.TextButton, className: (0, utils_1.cs)('vui-menuButton', className), ref: ref }, styles.button, rest)));
 });
 exports.MenuButton.displayName = 'MenuButton';
 exports.default = exports.MenuButton;

package/menu/menuItem.js

@@ -35,7 +35,7 @@ var context_1 = require("./context");
 /** Displays a list item and by default closes the menu on click. */
 exports.MenuItem = (0, core_1.vui)(function (props, ref) {
     var _a, _b;
-    var onClickProp = props.onClick, rest = __rest(props, ["onClick"]);
+    var className = props.className, onClickProp = props.onClick, rest = __rest(props, ["className", "onClick"]);
     var instance = ((_a = (0, popover_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {}).instance;
     var _c = (_b = (0, context_1.useMenuContext)()) !== null && _b !== void 0 ? _b : {}, closeOnSelect = _c.closeOnSelect, menuProps = __rest(_c, ["closeOnSelect"]);
     var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, menuProps), props));
@@ -43,7 +43,7 @@ exports.MenuItem = (0, core_1.vui)(function (props, ref) {
         onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
         closeOnSelect && (instance === null || instance === void 0 ? void 0 : instance.hide());
     });
-    return react_1.default.createElement(list_1.ListItem, __assign({ className: "vui-menuItem", isInteractive: true, onClick: onClick, ref: ref }, styles.item, rest));
+    return (react_1.default.createElement(list_1.ListItem, __assign({ className: (0, utils_1.cs)('vui-menuItem', className), isInteractive: true, onClick: onClick, ref: ref }, styles.item, rest)));
 });
 exports.MenuItem.displayName = 'MenuItem';
 exports.default = exports.MenuItem;

package/menu/menuList.js

@@ -30,13 +30,14 @@ var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var list_1 = __importDefault(require("../list"));
 var popover_1 = require("../popover");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays a list of menu items in a popover content element. */
 exports.MenuList = (0, core_1.vui)(function (props, ref) {
-    var contentProps = props.contentProps, contentRef = props.contentRef, rest = __rest(props, ["contentProps", "contentRef"]);
-    var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, (0, context_1.useMenuContext)()), props));
+    var className = props.className, contentProps = props.contentProps, contentRef = props.contentRef, rest = __rest(props, ["className", "contentProps", "contentRef"]);
+    var styles = (0, core_1.useStyleConfig)('Menu', (0, context_1.useMenuContext)());
     return (react_1.default.createElement(popover_1.PopoverContent, __assign({ ref: contentRef }, contentProps),
-        react_1.default.createElement(list_1.default, __assign({ className: "vui-menuList", py: 1, ref: ref, w: "100%" }, styles.list, rest))));
+        react_1.default.createElement(list_1.default, __assign({ className: (0, utils_1.cs)('vui-menuList', className), py: 1, ref: ref, w: "100%" }, styles.list, rest))));
 });
 exports.MenuList.displayName = 'MenuList';
 exports.MenuList.Divider = list_1.default.Divider;

package/modal/modalBackdrop.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 };
 };
@@ -29,8 +40,9 @@ exports.ModalBackdropBase = core_1.styled.divBox(templateObject_1 || (templateOb
 ])), (0, utils_1.hexToRGBA)(theme_1.colors.prussian[80], 0.6));
 /** Displays a dark overlay underneath modal content, but on top of page content. */
 exports.ModalBackdrop = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, rest = __rest(props, ["className"]);
     var styles = (0, core_1.useStyleConfig)('Modal', (0, context_1.useModalContext)());
-    return react_1.default.createElement(exports.ModalBackdropBase, __assign({ className: "vui-modalBackdrop", ref: ref }, styles.backdrop, props));
+    return react_1.default.createElement(exports.ModalBackdropBase, __assign({ className: (0, utils_1.cs)('vui-modalBackdrop', className), ref: ref }, styles.backdrop, rest));
 });
 exports.ModalBackdrop.displayName = 'ModalBackdrop';
 exports.default = exports.ModalBackdrop;

package/modal/modalContent.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 };
 };
@@ -29,9 +40,10 @@ exports.ModalContentBase = core_1.styled.divBox(templateObject_1 || (templateObj
 /** Wraps the content provided to the Modal component. */
 exports.ModalContent = (0, core_1.vui)(function (props, ref) {
     var _a;
+    var className = props.className, rest = __rest(props, ["className"]);
     var onBackdropClick = ((_a = (0, context_1.useModalContext)()) !== null && _a !== void 0 ? _a : {}).onBackdropClick;
     var styles = (0, core_1.useStyleConfig)('Modal', (0, context_1.useModalContext)());
-    return (react_1.default.createElement(exports.ModalContentBase, __assign({ className: "vui-modalContent", ref: ref, tabIndex: -1 }, styles.content, props, { onClick: (0, utils_1.callAll)(props.onClick, onBackdropClick) })));
+    return (react_1.default.createElement(exports.ModalContentBase, __assign({ className: (0, utils_1.cs)('vui-modalContent', className), ref: ref, tabIndex: -1 }, styles.content, rest, { onClick: (0, utils_1.callAll)(props.onClick, onBackdropClick) })));
 });
 exports.ModalContent.displayName = 'ModalContent';
 exports.default = exports.ModalContent;

package/notification/context.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { NotificationProps } from './notification.types';
-declare const NotificationProvider: import("react").Provider<Partial<NotificationProps>>, useNotification: () => Partial<NotificationProps>;
-export { NotificationProvider, useNotification };
+declare const NotificationProvider: import("react").Provider<Partial<NotificationProps>>, useNotificationContext: () => Partial<NotificationProps>;
+export { NotificationProvider, useNotificationContext };

package/notification/context.js

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

package/notification/notificationButton.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -18,12 +29,14 @@ exports.NotificationButton = void 0;
 var react_1 = __importDefault(require("react"));
 var button_1 = __importDefault(require("../button"));
 var core_1 = require("../core");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays an action button within the Notification. */
 exports.NotificationButton = (0, core_1.vui)(function (props, ref) {
-    var mergedProps = __assign(__assign({}, (0, context_1.useNotification)()), props);
-    var styles = (0, core_1.useStyleConfig)('Notification', mergedProps);
-    return (react_1.default.createElement(button_1.default, __assign({ className: "vui-notificationButton", colorScheme: mergedProps.colorScheme, ml: 1, mr: -0.5, ref: ref, size: "sm", variant: "text" }, styles.button, props)));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var mergedProps = __assign(__assign({}, (0, context_1.useNotificationContext)()), props);
+    var styles = (0, core_1.useStyleConfig)('Notification', (0, context_1.useNotificationContext)());
+    return (react_1.default.createElement(button_1.default, __assign({ className: (0, utils_1.cs)('vui-notificationButton', className), colorScheme: mergedProps.colorScheme, ml: 1, mr: -0.5, ref: ref, size: "sm", variant: "text" }, styles.button, rest)));
 });
 exports.NotificationButton.displayName = 'NotificationButton';
 exports.default = exports.NotificationButton;

package/notification/notificationIcon.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,16 +29,18 @@ exports.NotificationIcon = 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 consts_1 = require("./consts");
 var context_1 = require("./context");
 /** Displays an icon based on the status within the Notification. */
 exports.NotificationIcon = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var mergedProps = __assign(__assign({}, (0, context_1.useNotification)()), props);
-    var styles = (0, core_1.useStyleConfig)('Notification', mergedProps);
+    var className = props.className, rest = __rest(props, ["className"]);
+    var mergedProps = __assign(__assign({}, (0, context_1.useNotificationContext)()), props);
+    var styles = (0, core_1.useStyleConfig)('Notification', (0, context_1.useNotificationContext)());
     var _b = mergedProps.status, status = _b === void 0 ? '' : _b;
     var iconProps = ((_a = consts_1.notificationStatusMapping[status]) !== null && _a !== void 0 ? _a : {}).iconProps;
-    return (react_1.default.createElement(icon_1.default, __assign({ className: "vui-notificationIcon", mr: 1, my: 0.5, ref: ref, size: "md" }, styles.icon, iconProps, props)));
+    return (react_1.default.createElement(icon_1.default, __assign({ className: (0, utils_1.cs)('vui-notificationIcon', className), mr: 1, my: 0.5, ref: ref, size: "md" }, styles.icon, iconProps, rest)));
 });
 exports.NotificationIcon.displayName = 'NotificationIcon';
 exports.default = exports.NotificationIcon;

package/notification/notificationText.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.NotificationText = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays text within the Notification. */
 exports.NotificationText = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Notification', __assign(__assign({}, (0, context_1.useNotification)()), props));
-    return (react_1.default.createElement(t_1.default, __assign({ className: "vui-notificationText", flex: "1", lineHeight: "24px", minW: 0, py: 0.5, ref: ref }, styles.text, props)));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Notification', (0, context_1.useNotificationContext)());
+    return (react_1.default.createElement(t_1.default, __assign({ className: (0, utils_1.cs)('vui-notificationText', className), flex: "1", lineHeight: "24px", minW: 0, py: 0.5, ref: ref }, styles.text, rest)));
 });
 exports.NotificationText.displayName = 'NotificationText';
 exports.default = exports.NotificationText;

package/notification/notificationTitle.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.NotificationTitle = 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");
 /** Displays a title within the Notification. */
 exports.NotificationTitle = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Notification', __assign(__assign({}, (0, context_1.useNotification)()), props));
-    return react_1.default.createElement(heading_1.H6, __assign({ className: "vui-notificationTitle", display: "inline-flex", ref: ref }, styles.title, props));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Notification', (0, context_1.useNotificationContext)());
+    return (react_1.default.createElement(heading_1.H6, __assign({ className: (0, utils_1.cs)('vui-notificationTitle', className), display: "inline-flex", ref: ref }, styles.title, rest)));
 });
 exports.NotificationTitle.displayName = 'NotificationTitle';
 exports.default = exports.NotificationTitle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.5.2",
+  "version": "0.6.1",
   "description": "Veracity UI React components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",

package/pagination/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PaginationContext } from './pagination.types';
+declare const PaginationProvider: import("react").Provider<PaginationContext>, usePaginationContext: () => PaginationContext;
+export { PaginationProvider, usePaginationContext };

package/pagination/context.js

@@ -0,0 +1,23 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePaginationContext = exports.PaginationProvider = void 0;
+var utils_1 = require("../utils");
+var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), PaginationProvider = _a[0], usePaginationContext = _a[1];
+exports.PaginationProvider = PaginationProvider;
+exports.usePaginationContext = usePaginationContext;

package/pagination/helpers.d.ts

@@ -0,0 +1,3 @@
+import { PaginationItem } from './pagination.types';
+/** Returns an array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
+export declare function getPaginationItems(page: number, pageCount: number): PaginationItem[];

package/pagination/helpers.js

@@ -0,0 +1,56 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPaginationItems = void 0;
+var range = function (start, end) {
+    var length = end - start + 1;
+    return Array.from({ length: length }, function (_, i) { return start + i; });
+};
+/** Returns an array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
+function getPaginationItems(page, pageCount) {
+    var boundaryCount = 1;
+    var siblingCount = 1;
+    var startPages = range(1, Math.min(boundaryCount, pageCount));
+    var endPages = range(Math.max(pageCount - boundaryCount + 1, boundaryCount + 1), pageCount);
+    var siblingsStart = Math.max(Math.min(page - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+    var siblingsEnd = Math.min(Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : pageCount - 1);
+    var items = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([
+        'previous'
+    ], __read(startPages), false), __read((siblingsStart > boundaryCount + 2
+        ? ['ellipsisStart']
+        : boundaryCount + 1 < pageCount - boundaryCount
+            ? [boundaryCount + 1]
+            : [])), false), __read(range(siblingsStart, siblingsEnd)), false), __read((siblingsEnd < pageCount - boundaryCount - 1
+        ? ['ellipsisEnd']
+        : pageCount - boundaryCount > boundaryCount
+            ? [pageCount - boundaryCount]
+            : [])), false), __read(endPages), false), [
+        'next'
+    ], false);
+    return items;
+}
+exports.getPaginationItems = getPaginationItems;