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

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

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

package/dist/esm/link/context.js

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

package/dist/esm/link/linkIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"linkIcon.d.ts","sourceRoot":"","sources":["../../../src/link/linkIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGzC,wCAAwC;AACxC,eAAO,MAAM,QAAQ,kDAInB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"linkIcon.d.ts","sourceRoot":"","sources":["../../../src/link/linkIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIzC,wCAAwC;AACxC,eAAO,MAAM,QAAQ,kDAKnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}

package/dist/esm/link/linkIcon.js

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

package/dist/esm/link/linkText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"linkText.d.ts","sourceRoot":"","sources":["../../../src/link/linkText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAGhC,iCAAiC;AACjC,eAAO,MAAM,QAAQ,gDAMnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"linkText.d.ts","sourceRoot":"","sources":["../../../src/link/linkText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,iCAAiC;AACjC,eAAO,MAAM,QAAQ,gDAcnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}

package/dist/esm/link/linkText.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import T from '../t';
-import { useLink } from './context';
+import { cs } from '../utils';
+import { useLinkContext } from './context';
 /** Displays text of the Link. */
 export const LinkText = vui((props, ref) => {
-    const styles = useStyleConfig('Link', { ...useLink(), ...props });
-    return (React.createElement(T, { className: "vui-linkText", fontSize: "inherit", ref: ref, transitionDuration: "unset", ...styles.text, ...props }));
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('Link', useLinkContext());
+    return (React.createElement(T, { className: cs('vui-linkText', className), fontSize: "inherit", ref: ref, transitionDuration: "unset", ...styles.text, ...rest }));
 });
 LinkText.displayName = 'LinkText';
 export default LinkText;

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

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

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

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

package/dist/esm/list/context.js

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

package/dist/esm/list/listDivider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listDivider.d.ts","sourceRoot":"","sources":["../../../src/list/listDivider.tsx"],"names":[],"mappings":"AAGA,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAGlD,+CAA+C;AAC/C,eAAO,MAAM,WAAW,oDAItB,CAAA;AAIF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"listDivider.d.ts","sourceRoot":"","sources":["../../../src/list/listDivider.tsx"],"names":[],"mappings":"AAGA,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAIlD,+CAA+C;AAC/C,eAAO,MAAM,WAAW,oDAKtB,CAAA;AAIF,eAAe,WAAW,CAAA"}

package/dist/esm/list/listDivider.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import Divider from '../divider';
-import { useList } from './context';
+import { cs } from '../utils';
+import { useListContext } from './context';
 /** Displays a divider line within the List. */
 export const ListDivider = vui((props, ref) => {
-    const styles = useStyleConfig('List', { ...useList(), ...props });
-    return React.createElement(Divider, { className: "vui-listDivider", my: 1, ref: ref, ...styles.divider, ...props });
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('List', useListContext());
+    return React.createElement(Divider, { className: cs('vui-listDivider', className), my: 1, ref: ref, ...styles.divider, ...rest });
 });
 ListDivider.displayName = 'ListDivider';
 export default ListDivider;

package/dist/esm/list/listHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listHeading.d.ts","sourceRoot":"","sources":["../../../src/list/listHeading.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAK,MAAM,EAAE,MAAM,MAAM,CAAA;AAGhC,0CAA0C;AAC1C,eAAO,MAAM,WAAW,gDAkBtB,CAAA;AAIF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"listHeading.d.ts","sourceRoot":"","sources":["../../../src/list/listHeading.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAK,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,0CAA0C;AAC1C,eAAO,MAAM,WAAW,gDAmBtB,CAAA;AAIF,eAAe,WAAW,CAAA"}

package/dist/esm/list/listHeading.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import { T } from '../t';
-import { useList } from './context';
+import { cs } from '../utils';
+import { useListContext } from './context';
 /** Displays a heading within the List. */
 export const ListHeading = vui((props, ref) => {
-    const styles = useStyleConfig('List', { ...useList(), ...props });
-    return (React.createElement(T, { className: "vui-listHeading", color: "grey.60", display: "inline-block", px: 2, py: 1, ref: ref, size: "sm", textTransform: "uppercase", weight: "medium", ...styles.heading, ...props }));
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('List', useListContext());
+    return (React.createElement(T, { className: 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 }));
 });
 ListHeading.displayName = 'ListHeading';
 export default ListHeading;

package/dist/esm/list/listIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listIcon.d.ts","sourceRoot":"","sources":["../../../src/list/listIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGzC,oDAAoD;AACpD,eAAO,MAAM,QAAQ,kDAInB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"listIcon.d.ts","sourceRoot":"","sources":["../../../src/list/listIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIzC,oDAAoD;AACpD,eAAO,MAAM,QAAQ,kDAKnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}

package/dist/esm/list/listIcon.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import Icon from '../icon';
-import { useList } from './context';
+import { cs } from '../utils';
+import { useListContext } from './context';
 /** Displays an icon on the side of the ListItem. */
 export const ListIcon = vui((props, ref) => {
-    const styles = useStyleConfig('List', { ...useList(), ...props });
-    return React.createElement(Icon, { className: "vui-listIcon", ref: ref, ...styles.icon, ...props });
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('List', useListContext());
+    return React.createElement(Icon, { className: cs('vui-listIcon', className), ref: ref, ...styles.icon, ...rest });
 });
 ListIcon.displayName = 'ListIcon';
 export default ListIcon;

package/dist/esm/list/listItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listItem.d.ts","sourceRoot":"","sources":["../../../src/list/listItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAS5C,eAAO,MAAM,YAAY,8HAYxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,qDA6EnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"listItem.d.ts","sourceRoot":"","sources":["../../../src/list/listItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAkB5C,eAAO,MAAM,YAAY,8HAYxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,qDA6EnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}

package/dist/esm/list/listItem.js

@@ -2,11 +2,11 @@ import React, { Fragment } from 'react';
 import { styled, useStyleConfig, vui } from '../core';
 import Link from '../link';
 import { cs, filterUndefined, isReactText, isString } from '../utils';
-import { useList } from './context';
+import { useListContext } from './context';
 import ListIcon from './listIcon';
 import ListText from './listText';
 /** Used as optional content wrapper when list item should be a link. */
-const ListItemLink = vui((props, ref) => (React.createElement(Link, { borderRadius: "none", h: "100%", px: 2, ref: ref, variant: "plain", w: "100%", ...props })));
+const ListItemLink = vui((props, ref) => (React.createElement(Link, { borderRadius: "none", className: "vui-listItemLink", h: "100%", px: 2, ref: ref, variant: "plain", w: "100%", ...props })));
 export const ListItemBase = styled.liBox `
 	display: flex;
 	line-height: normal;
@@ -25,9 +25,9 @@ export const ListItemBase = styled.liBox `
  * Optionally wraps the content with an <a> element when rendering a link.
  */
 export const ListItem = vui((props, ref) => {
-    const mergedProps = { ...useList(), ...props };
+    const mergedProps = { ...useListContext(), ...props };
     const { children, center, centerH, centerV = true, className, column, disabled, iconLeft, iconRight, isInteractive: isInteractiveProp, isSelected, isTruncated, itemLeft, itemRight, linkProps, onClick, text, ...rest } = mergedProps;
-    const styles = useStyleConfig('List', useList());
+    const styles = useStyleConfig('List', useListContext());
     const { activeBg, hoverBg, selectedBg, ...itemStyles } = styles.item;
     const isLinkItem = linkProps !== undefined;
     const isInteractive = isInteractiveProp || isLinkItem || onClick !== undefined;

package/dist/esm/list/listText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listText.d.ts","sourceRoot":"","sources":["../../../src/list/listText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAGhC,yCAAyC;AACzC,eAAO,MAAM,QAAQ,gDAInB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"listText.d.ts","sourceRoot":"","sources":["../../../src/list/listText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,yCAAyC;AACzC,eAAO,MAAM,QAAQ,gDAKnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}

package/dist/esm/list/listText.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import T from '../t';
-import { useList } from './context';
+import { cs } from '../utils';
+import { useListContext } from './context';
 /** Displays text within the ListItem. */
 export const ListText = vui((props, ref) => {
-    const styles = useStyleConfig('List', { ...useList(), ...props });
-    return React.createElement(T, { className: "vui-listText", fontSize: "inherit", ref: ref, ...styles.text, ...props });
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('List', useListContext());
+    return React.createElement(T, { className: cs('vui-listText', className), fontSize: "inherit", ref: ref, ...styles.text, ...rest });
 });
 ListText.displayName = 'ListText';
 export default ListText;

package/dist/esm/menu/menuButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuButton.d.ts","sourceRoot":"","sources":["../../../src/menu/menuButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,WAAW,CAAA;AAKnD,2CAA2C;AAC3C,eAAO,MAAM,UAAU,uDAIrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"menuButton.d.ts","sourceRoot":"","sources":["../../../src/menu/menuButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,WAAW,CAAA;AAMnD,2CAA2C;AAC3C,eAAO,MAAM,UAAU,uDAarB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/esm/menu/menuButton.js

@@ -2,11 +2,13 @@ import React from 'react';
 import { TextButton } from '../button';
 import { useStyleConfig, vui } from '../core';
 import { PopoverTrigger } from '../popover';
+import { cs } from '../utils';
 import { useMenuContext } from './context';
 /** Displays PopoverTrigger as a button. */
 export const MenuButton = vui((props, ref) => {
-    const styles = useStyleConfig('Menu', { ...useMenuContext(), ...props });
-    return React.createElement(PopoverTrigger, { as: TextButton, className: "vui-menuButton", ref: ref, ...styles.button, ...props });
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('Menu', useMenuContext());
+    return (React.createElement(PopoverTrigger, { as: TextButton, className: cs('vui-menuButton', className), ref: ref, ...styles.button, ...rest }));
 });
 MenuButton.displayName = 'MenuButton';
 export default MenuButton;

package/dist/esm/menu/menuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuItem.d.ts","sourceRoot":"","sources":["../../../src/menu/menuItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,aAAa,EAAE,MAAM,SAAS,CAAA;AAKjD,oEAAoE;AACpE,eAAO,MAAM,QAAQ,qDAYnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"menuItem.d.ts","sourceRoot":"","sources":["../../../src/menu/menuItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,aAAa,EAAE,MAAM,SAAS,CAAA;AAKjD,oEAAoE;AACpE,eAAO,MAAM,QAAQ,qDAqBnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}

package/dist/esm/menu/menuItem.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import { ListItem } from '../list';
 import { usePopoverContext } from '../popover';
-import { useCallbackRef } from '../utils';
+import { cs, useCallbackRef } from '../utils';
 import { useMenuContext } from './context';
 /** Displays a list item and by default closes the menu on click. */
 export const MenuItem = vui((props, ref) => {
-    const { onClick: onClickProp, ...rest } = props;
+    const { className, onClick: onClickProp, ...rest } = props;
     const { instance } = usePopoverContext() ?? {};
     const { closeOnSelect, ...menuProps } = useMenuContext() ?? {};
     const styles = useStyleConfig('Menu', { ...menuProps, ...props });
@@ -14,7 +14,7 @@ export const MenuItem = vui((props, ref) => {
         onClickProp?.(e);
         closeOnSelect && instance?.hide();
     });
-    return React.createElement(ListItem, { className: "vui-menuItem", isInteractive: true, onClick: onClick, ref: ref, ...styles.item, ...rest });
+    return (React.createElement(ListItem, { className: cs('vui-menuItem', className), isInteractive: true, onClick: onClick, ref: ref, ...styles.item, ...rest }));
 });
 MenuItem.displayName = 'MenuItem';
 export default MenuItem;

package/dist/esm/menu/menuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuList.d.ts","sourceRoot":"","sources":["../../../src/menu/menuList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAC3D,OAAO,IAAI,MAAM,SAAS,CAAA;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAE5C,kEAAkE;AAClE,eAAO,MAAM,QAAQ;aAUX,OAAO,KAAK,OAAO;aACnB,OAAO,KAAK,OAAO;UACtB,OAAO,KAAK,IAAI;UAChB,OAAO,KAAK,IAAI;UAChB,OAAO,SAAS;CACtB,CAAA;AAUD,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"menuList.d.ts","sourceRoot":"","sources":["../../../src/menu/menuList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAC3D,OAAO,IAAI,MAAM,SAAS,CAAA;AAI1B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAE5C,kEAAkE;AAClE,eAAO,MAAM,QAAQ;aAUX,OAAO,KAAK,OAAO;aACnB,OAAO,KAAK,OAAO;UACtB,OAAO,KAAK,IAAI;UAChB,OAAO,KAAK,IAAI;UAChB,OAAO,SAAS;CACtB,CAAA;AAUD,eAAe,QAAQ,CAAA"}

package/dist/esm/menu/menuList.js

@@ -2,13 +2,14 @@ import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import List from '../list';
 import { PopoverContent } from '../popover';
+import { cs } from '../utils';
 import { useMenuContext } from './context';
 /** Displays a list of menu items in a popover content element. */
 export const MenuList = vui((props, ref) => {
-    const { contentProps, contentRef, ...rest } = props;
-    const styles = useStyleConfig('Menu', { ...useMenuContext(), ...props });
+    const { className, contentProps, contentRef, ...rest } = props;
+    const styles = useStyleConfig('Menu', useMenuContext());
     return (React.createElement(PopoverContent, { ref: contentRef, ...contentProps },
-        React.createElement(List, { className: "vui-menuList", py: 1, ref: ref, w: "100%", ...styles.list, ...rest })));
+        React.createElement(List, { className: cs('vui-menuList', className), py: 1, ref: ref, w: "100%", ...styles.list, ...rest })));
 });
 MenuList.displayName = 'MenuList';
 MenuList.Divider = List.Divider;

package/dist/esm/modal/modalBackdrop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modalBackdrop.d.ts","sourceRoot":"","sources":["../../../src/modal/modalBackdrop.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,iBAAiB,+HAM7B,CAAA;AAED,oFAAoF;AACpF,eAAO,MAAM,aAAa,iEAIxB,CAAA;AAIF,eAAe,aAAa,CAAA"}
+{"version":3,"file":"modalBackdrop.d.ts","sourceRoot":"","sources":["../../../src/modal/modalBackdrop.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,iBAAiB,+HAM7B,CAAA;AAED,oFAAoF;AACpF,eAAO,MAAM,aAAa,iEAKxB,CAAA;AAIF,eAAe,aAAa,CAAA"}

package/dist/esm/modal/modalBackdrop.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { styled, useStyleConfig, vui } from '../core';
 import { colors } from '../theme';
-import { hexToRGBA } from '../utils';
+import { cs, hexToRGBA } from '../utils';
 import { useModalContext } from './context';
 export const ModalBackdropBase = styled.divBox `
 	animation: vui-fadeIn 0.3s ease;
@@ -12,8 +12,9 @@ export const ModalBackdropBase = styled.divBox `
 `;
 /** Displays a dark overlay underneath modal content, but on top of page content. */
 export const ModalBackdrop = vui((props, ref) => {
+    const { className, ...rest } = props;
     const styles = useStyleConfig('Modal', useModalContext());
-    return React.createElement(ModalBackdropBase, { className: "vui-modalBackdrop", ref: ref, ...styles.backdrop, ...props });
+    return React.createElement(ModalBackdropBase, { className: cs('vui-modalBackdrop', className), ref: ref, ...styles.backdrop, ...rest });
 });
 ModalBackdrop.displayName = 'ModalBackdrop';
 export default ModalBackdrop;

package/dist/esm/modal/modalContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modalContent.d.ts","sourceRoot":"","sources":["../../../src/modal/modalContent.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB,+HAK5B,CAAA;AAED,yDAAyD;AACzD,eAAO,MAAM,YAAY,iEAcvB,CAAA;AAIF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"modalContent.d.ts","sourceRoot":"","sources":["../../../src/modal/modalContent.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB,+HAK5B,CAAA;AAED,yDAAyD;AACzD,eAAO,MAAM,YAAY,iEAevB,CAAA;AAIF,eAAe,YAAY,CAAA"}

package/dist/esm/modal/modalContent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { styled, useStyleConfig, vui } from '../core';
-import { callAll } from '../utils';
+import { callAll, cs } from '../utils';
 import { useModalContext } from './context';
 export const ModalContentBase = styled.divBox `
 	display: flex;
@@ -10,9 +10,10 @@ export const ModalContentBase = styled.divBox `
 `;
 /** Wraps the content provided to the Modal component. */
 export const ModalContent = vui((props, ref) => {
+    const { className, ...rest } = props;
     const { onBackdropClick } = useModalContext() ?? {};
     const styles = useStyleConfig('Modal', useModalContext());
-    return (React.createElement(ModalContentBase, { className: "vui-modalContent", ref: ref, tabIndex: -1, ...styles.content, ...props, onClick: callAll(props.onClick, onBackdropClick) }));
+    return (React.createElement(ModalContentBase, { className: cs('vui-modalContent', className), ref: ref, tabIndex: -1, ...styles.content, ...rest, onClick: callAll(props.onClick, onBackdropClick) }));
 });
 ModalContent.displayName = 'ModalContent';
 export default ModalContent;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/notification/context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAExD,QAAA,MAAO,oBAAoB,wDAAE,eAAe,kCAAmE,CAAA;AAE/G,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/notification/context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAExD,QAAA,MAAO,oBAAoB,wDAAE,sBAAsB,kCAAmE,CAAA;AAEtH,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,CAAA"}

package/dist/esm/notification/context.js

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

package/dist/esm/notification/notificationButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notificationButton.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationButton.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAI/C,yDAAyD;AACzD,eAAO,MAAM,kBAAkB,uDAiB7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"notificationButton.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationButton.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAK/C,yDAAyD;AACzD,eAAO,MAAM,kBAAkB,uDAkB7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}

package/dist/esm/notification/notificationButton.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import Button from '../button';
 import { useStyleConfig, vui } from '../core';
-import { useNotification } from './context';
+import { cs } from '../utils';
+import { useNotificationContext } from './context';
 /** Displays an action button within the Notification. */
 export const NotificationButton = vui((props, ref) => {
-    const mergedProps = { ...useNotification(), ...props };
-    const styles = useStyleConfig('Notification', mergedProps);
-    return (React.createElement(Button, { className: "vui-notificationButton", colorScheme: mergedProps.colorScheme, ml: 1, mr: -0.5, ref: ref, size: "sm", variant: "text", ...styles.button, ...props }));
+    const { className, ...rest } = props;
+    const mergedProps = { ...useNotificationContext(), ...props };
+    const styles = useStyleConfig('Notification', useNotificationContext());
+    return (React.createElement(Button, { className: cs('vui-notificationButton', className), colorScheme: mergedProps.colorScheme, ml: 1, mr: -0.5, ref: ref, size: "sm", variant: "text", ...styles.button, ...rest }));
 });
 NotificationButton.displayName = 'NotificationButton';
 export default NotificationButton;

package/dist/esm/notification/notificationIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notificationIcon.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIzC,oEAAoE;AACpE,eAAO,MAAM,gBAAgB,kDAmB3B,CAAA;AAIF,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"notificationIcon.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAKzC,oEAAoE;AACpE,eAAO,MAAM,gBAAgB,kDAoB3B,CAAA;AAIF,eAAe,gBAAgB,CAAA"}

package/dist/esm/notification/notificationIcon.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import Icon from '../icon';
+import { cs } from '../utils';
 import { notificationStatusMapping } from './consts';
-import { useNotification } from './context';
+import { useNotificationContext } from './context';
 /** Displays an icon based on the status within the Notification. */
 export const NotificationIcon = vui((props, ref) => {
-    const mergedProps = { ...useNotification(), ...props };
-    const styles = useStyleConfig('Notification', mergedProps);
+    const { className, ...rest } = props;
+    const mergedProps = { ...useNotificationContext(), ...props };
+    const styles = useStyleConfig('Notification', useNotificationContext());
     const { status = '' } = mergedProps;
     const { iconProps } = notificationStatusMapping[status] ?? {};
-    return (React.createElement(Icon, { className: "vui-notificationIcon", mr: 1, my: 0.5, ref: ref, size: "md", ...styles.icon, ...iconProps, ...props }));
+    return (React.createElement(Icon, { className: cs('vui-notificationIcon', className), mr: 1, my: 0.5, ref: ref, size: "md", ...styles.icon, ...iconProps, ...rest }));
 });
 NotificationIcon.displayName = 'NotificationIcon';
 export default NotificationIcon;

package/dist/esm/notification/notificationText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notificationText.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAGhC,6CAA6C;AAC7C,eAAO,MAAM,gBAAgB,6CAe3B,CAAA;AAIF,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"notificationText.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,6CAA6C;AAC7C,eAAO,MAAM,gBAAgB,6CAgB3B,CAAA;AAIF,eAAe,gBAAgB,CAAA"}

package/dist/esm/notification/notificationText.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import T from '../t';
-import { useNotification } from './context';
+import { cs } from '../utils';
+import { useNotificationContext } from './context';
 /** Displays text within the Notification. */
 export const NotificationText = vui((props, ref) => {
-    const styles = useStyleConfig('Notification', { ...useNotification(), ...props });
-    return (React.createElement(T, { className: "vui-notificationText", flex: "1", lineHeight: "24px", minW: 0, py: 0.5, ref: ref, ...styles.text, ...props }));
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('Notification', useNotificationContext());
+    return (React.createElement(T, { className: cs('vui-notificationText', className), flex: "1", lineHeight: "24px", minW: 0, py: 0.5, ref: ref, ...styles.text, ...rest }));
 });
 NotificationText.displayName = 'NotificationText';
 export default NotificationText;

package/dist/esm/notification/notificationTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notificationTitle.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationTitle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,YAAY,EAAE,MAAM,YAAY,CAAA;AAG7C,gDAAgD;AAChD,eAAO,MAAM,iBAAiB,oDAI5B,CAAA;AAIF,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"notificationTitle.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationTitle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,YAAY,EAAE,MAAM,YAAY,CAAA;AAI7C,gDAAgD;AAChD,eAAO,MAAM,iBAAiB,oDAa5B,CAAA;AAIF,eAAe,iBAAiB,CAAA"}

package/dist/esm/notification/notificationTitle.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import { H6 } from '../heading';
-import { useNotification } from './context';
+import { cs } from '../utils';
+import { useNotificationContext } from './context';
 /** Displays a title within the Notification. */
 export const NotificationTitle = vui((props, ref) => {
-    const styles = useStyleConfig('Notification', { ...useNotification(), ...props });
-    return React.createElement(H6, { className: "vui-notificationTitle", display: "inline-flex", ref: ref, ...styles.title, ...props });
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('Notification', useNotificationContext());
+    return (React.createElement(H6, { className: cs('vui-notificationTitle', className), display: "inline-flex", ref: ref, ...styles.title, ...rest }));
 });
 NotificationTitle.displayName = 'NotificationTitle';
 export default NotificationTitle;

package/dist/esm/pagination/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/pagination/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAEnD,qGAAqG;AACrG,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,oBAgBjE"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/pagination/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAOnD,qGAAqG;AACrG,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,oBA2CjE"}

package/dist/esm/pagination/helpers.js

@@ -1,16 +1,34 @@
+const range = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({ length }, (_, i) => start + i);
+};
 /** Returns an array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
 export function getPaginationItems(page, pageCount) {
-    const items = ['previous', 1];
-    if (page - 2 > 1)
-        items.push('ellipsisStart');
-    for (let i = page - 1; i <= page + 1; i++) {
-        if (i > 1 && i < pageCount)
-            items.push(i);
-    }
-    if (page + 2 < pageCount)
-        items.push('ellipsisEnd');
-    if (pageCount > 1)
-        items.push(pageCount);
-    items.push('next');
+    const boundaryCount = 1;
+    const siblingCount = 1;
+    const startPages = range(1, Math.min(boundaryCount, pageCount));
+    const endPages = range(Math.max(pageCount - boundaryCount + 1, boundaryCount + 1), pageCount);
+    const siblingsStart = Math.max(Math.min(page - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+    const siblingsEnd = Math.min(Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : pageCount - 1);
+    const items = [
+        'previous',
+        ...startPages,
+        // Start ellipsis
+        ...(siblingsStart > boundaryCount + 2
+            ? ['ellipsisStart']
+            : boundaryCount + 1 < pageCount - boundaryCount
+                ? [boundaryCount + 1]
+                : []),
+        // Sibling pages
+        ...range(siblingsStart, siblingsEnd),
+        // End ellipsis
+        ...(siblingsEnd < pageCount - boundaryCount - 1
+            ? ['ellipsisEnd']
+            : pageCount - boundaryCount > boundaryCount
+                ? [pageCount - boundaryCount]
+                : []),
+        ...endPages,
+        'next'
+    ];
     return items;
 }

package/dist/esm/pagination/paginationButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginationButton.d.ts","sourceRoot":"","sources":["../../../src/pagination/paginationButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,iEA6B3B,CAAA;AAIF,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"paginationButton.d.ts","sourceRoot":"","sources":["../../../src/pagination/paginationButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,iEA6B3B,CAAA;AAIF,eAAe,gBAAgB,CAAA"}

package/dist/esm/pagination/paginationButton.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import Button from '../button';
 import { useStyleConfig, vui } from '../core';
+import { cs } from '../utils';
 import { usePaginationContext } from './context';
 /** Displays a page navigation button within the Pagination. */
 export const PaginationButton = vui((props, ref) => {
-    const { isActive: isActiveProp, page: pageProp, ...rest } = props;
+    const { className, isActive: isActiveProp, page: pageProp, ...rest } = props;
     const { onPageChange, page } = usePaginationContext();
     const styles = useStyleConfig('Pagination', usePaginationContext());
     const isActive = isActiveProp ?? pageProp === page;
@@ -16,7 +17,7 @@ export const PaginationButton = vui((props, ref) => {
             activeBg: 'blue.40'
         }
         : {};
-    return (React.createElement(Button, { className: "vui-paginationButton", minW: 0, onClick: () => onPageChange(pageProp), ref: ref, size: "sm", text: pageProp, variant: "text", ...styles.button, ...activeProps, ...rest }));
+    return (React.createElement(Button, { className: cs('vui-paginationButton', className), minW: 0, onClick: () => onPageChange(pageProp), ref: ref, size: "sm", text: pageProp, variant: "text", ...styles.button, ...activeProps, ...rest }));
 });
 PaginationButton.displayName = 'PaginationButton';
 export default PaginationButton;

package/dist/esm/pagination/paginationEllipsis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginationEllipsis.d.ts","sourceRoot":"","sources":["../../../src/pagination/paginationEllipsis.tsx"],"names":[],"mappings":"AAEA,OAAY,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAItC,gDAAgD;AAChD,eAAO,MAAM,kBAAkB,kDAS7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"paginationEllipsis.d.ts","sourceRoot":"","sources":["../../../src/pagination/paginationEllipsis.tsx"],"names":[],"mappings":"AAEA,OAAY,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAKtC,gDAAgD;AAChD,eAAO,MAAM,kBAAkB,kDAgB7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}

package/dist/esm/pagination/paginationEllipsis.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import Box from '../box';
 import { useStyleConfig, vui } from '../core';
+import { cs } from '../utils';
 import { usePaginationContext } from './context';
 /** Displays '...' ellipsis for hidden pages. */
 export const PaginationEllipsis = vui((props, ref) => {
-    const { children, ...rest } = props;
+    const { children, className, ...rest } = props;
     const styles = useStyleConfig('Pagination', usePaginationContext());
-    return (React.createElement(Box, { alignItems: "center", className: "vui-paginationEllipsis", ref: ref, ...styles.ellipsis, ...rest }, children ?? '...'));
+    return (React.createElement(Box, { alignItems: "center", className: cs('vui-paginationEllipsis', className), px: "10px", ref: ref, ...styles.ellipsis, ...rest }, children ?? '...'));
 });
 PaginationEllipsis.displayName = 'PaginationEllipsis';
 export default PaginationEllipsis;

package/dist/esm/pagination/paginationGoToPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginationGoToPage.d.ts","sourceRoot":"","sources":["../../../src/pagination/paginationGoToPage.tsx"],"names":[],"mappings":"AAEA,OAAY,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAOtC,2EAA2E;AAC3E,eAAO,MAAM,kBAAkB,iDAsB7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"paginationGoToPage.d.ts","sourceRoot":"","sources":["../../../src/pagination/paginationGoToPage.tsx"],"names":[],"mappings":"AAEA,OAAY,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAOtC,2EAA2E;AAC3E,eAAO,MAAM,kBAAkB,iDA8B7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}

package/dist/esm/pagination/paginationGoToPage.js

@@ -3,9 +3,11 @@ import Box from '../box';
 import { useStyleConfig, vui } from '../core';
 import Input from '../input';
 import T from '../t';
+import { cs } from '../utils';
 import { usePaginationContext } from './context';
 /** Displays a number input, which allows quickly jumping between pages. */
 export const PaginationGoToPage = vui((props, ref) => {
+    const { className, ...rest } = props;
     const { onPageChange, pageCount } = usePaginationContext();
     const styles = useStyleConfig('Pagination', usePaginationContext());
     const onChange = (e) => {
@@ -14,7 +16,7 @@ export const PaginationGoToPage = vui((props, ref) => {
             onPageChange(Math.floor(value));
         }
     };
-    return (React.createElement(Box, { centerV: true, className: "vui-paginationGoToPage", lineHeight: "normal", ref: ref, ...styles.goToPage, ...props },
+    return (React.createElement(Box, { centerV: true, className: cs('vui-paginationGoToPage', className), lineHeight: "normal", ref: ref, ...styles.goToPage, ...rest },
         React.createElement(T, { size: "sm", weight: "medium" }, "Go to"),
         React.createElement(Input, { max: pageCount, min: 1, mx: 1, onChange: onChange, size: "sm", type: "number", w: 56 }),
         React.createElement(T, { size: "sm", weight: "medium" }, "Page")));