@veracity/vui 2.13.3 → 2.13.4

package/dist/cjs/header/headerApplicationName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerApplicationName.d.ts","sourceRoot":"","sources":["../../../src/header/headerApplicationName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,uDAAuD;AACvD,eAAO,MAAM,qBAAqB;;;;;;;;EAwChC,CAAA;AAIF,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"headerApplicationName.d.ts","sourceRoot":"","sources":["../../../src/header/headerApplicationName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,uDAAuD;AACvD,eAAO,MAAM,qBAAqB;;;;;;;;EAgChC,CAAA;AAIF,eAAe,qBAAqB,CAAA"}

package/dist/cjs/header/headerApplicationName.js

@@ -31,17 +31,9 @@ exports.HeaderApplicationName = (0, core_1.vui)((props, ref) => {
             mt: 0
         }
         : {
-            fontSize: 16,
-            mt: '112px',
-            position: 'absolute',
-            mx: '-16px',
-            w: '100%',
-            bg: 'skyBlue.97',
-            py: '8px',
-            px: '16px',
-            lineHeight: '24px',
-            borderBottom: '1px solid darkBlue.main',
-            borderTop: '1px solid darkBlue.main'
+            fontSize: 18,
+            maxW: '156px',
+            lineHeight: '21px'
         };
     const linkProps = url ? { as: 'a', href: url, outline: 'none', focusRing: 2 } : {};
     return (react_1.default.createElement(box_1.Box, Object.assign({}, linkProps),

package/dist/cjs/header/headerMobileContent.js

@@ -26,8 +26,8 @@ exports.HeaderMobileContent = (0, core_1.vui)((props, ref) => {
     const { className } = props, rest = __rest(props, ["className"]);
     const { isMobileOpen, mobileContentRef } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
-    const isTablet = (0, core_1.useDown)('lg');
-    return isMobileOpen ? (react_1.default.createElement(box_1.default, Object.assign({ bg: "white", className: (0, utils_1.cs)('vui-headerMobileContent', className), column: true, overflowX: "hidden", overflowY: "auto", position: "absolute", ref: (0, utils_1.mergeRefs)(ref, mobileContentRef), right: 0, shadow: 2, top: "calc(100% + 1px)", w: isTablet ? 280 : 320, zIndex: "100" }, styles.mobileContent, rest))) : null;
+    const islargerThanTablet = (0, core_1.useUp)('lg');
+    return isMobileOpen ? (react_1.default.createElement(box_1.default, Object.assign({ bg: "white", className: (0, utils_1.cs)('vui-headerMobileContent', className), column: true, overflowX: "hidden", overflowY: "auto", position: "absolute", ref: (0, utils_1.mergeRefs)(ref, mobileContentRef), right: islargerThanTablet ? '-40px' : '-16px', shadow: 2, top: "calc(100% + 1px)", w: islargerThanTablet ? 320 : 280, zIndex: "100" }, styles.mobileContent, rest))) : null;
 });
 exports.HeaderMobileContent.displayName = 'HeaderMobileContent';
 exports.default = exports.HeaderMobileContent;

package/dist/cjs/header/headerServices.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerServices.d.ts","sourceRoot":"","sources":["../../../src/header/headerServices.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAoBpD,yDAAyD;AACzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAsCxD;yBAtCe,cAAc;;;AA0C9B,eAAe,cAAc,CAAA"}
+{"version":3,"file":"headerServices.d.ts","sourceRoot":"","sources":["../../../src/header/headerServices.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAoBpD,yDAAyD;AACzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAuCxD;yBAvCe,cAAc;;;AA2C9B,eAAe,cAAc,CAAA"}

package/dist/cjs/header/headerServices.js

@@ -30,15 +30,15 @@ function ListContent({ links = [] }) {
 function HeaderServices(props) {
     const { buttonProps, isApplication = false, links = [], showTopBorder = false } = props, rest = __rest(props, ["buttonProps", "isApplication", "links", "showTopBorder"]);
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).services;
-    const offsetX = isApplication ? 183 : 135;
+    const offsetX = isApplication ? 179 : 135;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "lg" },
-            react_1.default.createElement(menu_1.default, Object.assign({ isLazy: false, offset: [offsetX, 20], placement: "bottom-end", size: "lg" }, rest),
+            react_1.default.createElement(menu_1.default, Object.assign({ isLazy: false, offset: [offsetX, 17], placement: "bottom-end", size: "lg" }, rest),
                 react_1.default.createElement(menu_1.default.Button, Object.assign({ className: "vui-services-trigger", icon: "falTh", size: "lg", title: "My services" }, styles.button, buttonProps)),
-                react_1.default.createElement(menu_1.default.List, Object.assign({ heading: "My Services", maxH: 400, right: 0, w: 320 }, styles.list),
+                react_1.default.createElement(menu_1.default.List, Object.assign({ heading: "My Services", maxH: 295, right: 0, w: 320 }, styles.list),
                     react_1.default.createElement(ListContent, { links: links })))),
         react_1.default.createElement(core_1.RenderOnScreen, { maxWidth: "lg" },
-            react_1.default.createElement(list_1.default, Object.assign({ heading: "My Services" }, styles.list, { borderTop: showTopBorder ? 1 : 0, borderTopColor: "sandstone.main", pt: 1 }),
+            react_1.default.createElement(list_1.default, Object.assign({ heading: "My Services" }, styles.list, { borderTop: showTopBorder ? 1 : 0, borderTopColor: "sandstone.main", maxH: 295, pt: 1 }),
                 react_1.default.createElement(ListContent, { links: links })))));
 }
 exports.HeaderServices = HeaderServices;

package/dist/cjs/header/headerSupport.js

@@ -38,7 +38,7 @@ function HeaderSupport(props) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(menu_1.default, Object.assign({ isLazy: false, offset: [offsetX, 16], placement: "bottom-end", size: "lg" }, rest),
             react_1.default.createElement(menu_1.default.Button, Object.assign({ className: "vui-app-info-trigger", color: styles.button.color, icon: "falQuestionCircle", ml: 1, size: "lg", title: "My services" }, styles.button)),
-            react_1.default.createElement(menu_1.default.List, Object.assign({ maxH: 400, right: 0, w: isTablet ? 280 : 320 }, styles.list),
+            react_1.default.createElement(menu_1.default.List, Object.assign({ maxH: 295, right: 0, w: isTablet ? 280 : 320 }, styles.list),
                 react_1.default.createElement(ListContent, { links: links })))));
 }
 exports.HeaderSupport = HeaderSupport;

package/dist/cjs/header/loggedInHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loggedInHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedInHeader.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAGpE,uHAAuH;AACvH,eAAO,MAAM,cAAc,4DA2JzB,CAAA;AAIF,eAAe,cAAc,CAAA"}
+{"version":3,"file":"loggedInHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedInHeader.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAGpE,uHAAuH;AACvH,eAAO,MAAM,cAAc,4DAoJzB,CAAA;AAIF,eAAe,cAAc,CAAA"}

package/dist/cjs/header/loggedInHeader.js

@@ -33,13 +33,16 @@ exports.LoggedInHeader = (0, core_1.vui)((props, ref) => {
     }
     const userInfo = !(0, utils_1.isJsx)(account) ? (account === null || account === void 0 ? void 0 : account.userInfo) || {} : {};
     const isSmallScreen = (0, core_1.useDown)('md');
+    const isLessThanMD = (0, core_1.useDown)('sm');
     const servicesLinks = (0, utils_1.isJsx)(services) ? [] : (services === null || services === void 0 ? void 0 : services.links) || [];
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
     return (react_1.default.createElement(header_1.default, Object.assign({ className: (0, utils_1.cs)('vui-loggedInHeader', isApplication ? 'vui-loggedInAppHeader' : '', className), mb: isApplication && isSmallScreen ? '41px' : 'inherited', ref: ref }, rest),
         react_1.default.createElement(header_1.default.Content, null,
-            (0, utils_1.isJsx)(logo) ? logo : react_1.default.createElement(header_1.default.Logo, Object.assign({}, logo)),
+            (!isApplication || !isLessThanMD) && react_1.default.createElement(react_1.default.Fragment, null,
+                " ",
+                (0, utils_1.isJsx)(logo) ? logo : react_1.default.createElement(header_1.default.Logo, Object.assign({}, logo))),
             isApplication && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "md" },
+                react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "sm" },
                     react_1.default.createElement(header_1.default.Divider, { mr: 2 })),
                 react_1.default.createElement(header_1.default.ApplicationName, { title: applicationName, url: applicationUrl || '/' }))),
             !isApplication && react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "lg" }, children),
@@ -64,7 +67,7 @@ exports.LoggedInHeader = (0, core_1.vui)((props, ref) => {
                                         return (react_1.default.createElement(list_1.default.Item, Object.assign({ iconLeft: icon, key: index, linkProps: { href: url } }, rest)));
                                     })))),
                                 !showServices && servicesLinks && (react_1.default.createElement(box_1.default, { column: true, w: 1 },
-                                    react_1.default.createElement(list_1.default, Object.assign({ heading: "My Services", maxH: 400, right: 0, w: 320 }, styles.services.list, { borderTop: 1, borderTopColor: "sandstone.main", pt: 1 }), servicesLinks === null || servicesLinks === void 0 ? void 0 : servicesLinks.map((_a, index) => {
+                                    react_1.default.createElement(list_1.default, Object.assign({ heading: "My Services", maxH: 295, right: 0, w: 320 }, styles.services.list, { borderTop: 1, borderTopColor: "sandstone.main", pt: 1 }), servicesLinks === null || servicesLinks === void 0 ? void 0 : servicesLinks.map((_a, index) => {
                                         var { url } = _a, rest = __rest(_a, ["url"]);
                                         return (react_1.default.createElement(list_1.default.Item, Object.assign({ key: index, linkProps: { href: url } }, rest)));
                                     })))))))),

package/dist/cjs/menu/menuList.js

@@ -26,7 +26,7 @@ exports.MenuList = (0, core_1.vui)((props, ref) => {
     const { className, contentProps, contentRef } = props, rest = __rest(props, ["className", "contentProps", "contentRef"]);
     const styles = (0, core_1.useStyleConfig)('Menu', (0, context_1.useMenuContext)());
     return (react_1.default.createElement(popover_1.PopoverContent, Object.assign({ borderRadius: 0, ref: contentRef }, contentProps),
-        react_1.default.createElement(list_1.default, Object.assign({ className: (0, utils_1.cs)('vui-menuList', className), py: 1, ref: ref, w: "100%" }, styles.list, rest))));
+        react_1.default.createElement(list_1.default, Object.assign({ className: (0, utils_1.cs)('vui-menuList', className), py: 1, ref: ref, w: "100%" }, styles.list, rest, { maxH: 295 }))));
 });
 exports.MenuList.Divider = list_1.default.Divider;
 exports.MenuList.Heading = list_1.default.Heading;

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,OAAO,MAAM,WAAW,CAAA;AAE/B,eAAO,MAAM,OAAO,gIAsBnB,CAAA;AACD;;;GAGG;AACH,eAAO,MAAM,GAAG;YA2FN,gBAAgB;UAClB,cAAc;UACd,cAAc;CACrB,CAAA;AAQD,eAAe,GAAG,CAAA"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,OAAO,MAAM,WAAW,CAAA;AAE/B,eAAO,MAAM,OAAO,gIAsBnB,CAAA;AACD;;;GAGG;AACH,eAAO,MAAM,GAAG;YA+FN,gBAAgB;UAClB,cAAc;UACd,cAAc;CACrB,CAAA;AAQD,eAAe,GAAG,CAAA"}

package/dist/cjs/tag/tag.js

@@ -107,7 +107,7 @@ exports.Tag = (0, core_1.vui)((props, ref) => {
                 itemLeft,
                 (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(tagIcon_1.default, { mr: spaceX, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : ((0, utils_1.isReactText)(text) ? react_1.default.createElement(tagText_1.default, Object.assign({}, { isTruncated, text })) : text),
                 (0, utils_1.isString)(iconRight) ? react_1.default.createElement(tagIcon_1.default, { ml: spaceX, name: iconRight }) : iconRight,
-                onDelete ? react_1.default.createElement(tagButton_1.default, { disabled: disabled, isRound: isRound, ml: spaceX, onClick: onDelete }) : itemRight)))));
+                onDelete ? (react_1.default.createElement(tagButton_1.default, { disabled: disabled, isRound: isRound, ml: spaceX, onClick: e => onDelete === null || onDelete === void 0 ? void 0 : onDelete(e) })) : (itemRight))))));
 });
 exports.Tag.Button = tagButton_1.default;
 exports.Tag.Icon = tagIcon_1.default;

package/dist/cjs/tag/tag.types.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { IconProp } from '../icon';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
@@ -26,7 +26,7 @@ export type TagInnerProps = {
     /** Socket displaying a custom item on right left. */
     itemRight?: React.ReactNode;
     /** If provided, displays a remove button with this function as onClick. */
-    onDelete?: () => void;
+    onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /** Socket displaying text as alternative to children. */
     text?: React.ReactNode;
     /** Alias for fontWeight prop. @deprecated */

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

@@ -1 +1 @@
-{"version":3,"file":"tag.types.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,gDAAgD;IAChD,MAAM,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAA;IACzC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAA;IACvE,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iKAAiK;IACjK,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA"}
+{"version":3,"file":"tag.types.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,gDAAgD;IAChD,MAAM,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAA;IACzC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAA;IACvE,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iKAAiK;IACjK,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAClF,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA"}

package/dist/esm/header/headerApplicationName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerApplicationName.d.ts","sourceRoot":"","sources":["../../../src/header/headerApplicationName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,uDAAuD;AACvD,eAAO,MAAM,qBAAqB;;;;;;;;EAwChC,CAAA;AAIF,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"headerApplicationName.d.ts","sourceRoot":"","sources":["../../../src/header/headerApplicationName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,uDAAuD;AACvD,eAAO,MAAM,qBAAqB;;;;;;;;EAgChC,CAAA;AAIF,eAAe,qBAAqB,CAAA"}

package/dist/esm/header/headerApplicationName.js

@@ -14,17 +14,9 @@ export const HeaderApplicationName = vui((props, ref) => {
             mt: 0
         }
         : {
-            fontSize: 16,
-            mt: '112px',
-            position: 'absolute',
-            mx: '-16px',
-            w: '100%',
-            bg: 'skyBlue.97',
-            py: '8px',
-            px: '16px',
-            lineHeight: '24px',
-            borderBottom: '1px solid darkBlue.main',
-            borderTop: '1px solid darkBlue.main'
+            fontSize: 18,
+            maxW: '156px',
+            lineHeight: '21px'
         };
     const linkProps = url ? { as: 'a', href: url, outline: 'none', focusRing: 2 } : {};
     return (React.createElement(Box, { ...linkProps },

package/dist/esm/header/headerMobileContent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Box from '../box';
-import { useDown, useStyleConfig, vui } from '../core';
+import { useStyleConfig, useUp, vui } from '../core';
 import { cs, mergeRefs } from '../utils';
 import { useHeaderContext } from './context';
 /** Displays part of the Header content when on a mobile screen. */
@@ -8,8 +8,8 @@ export const HeaderMobileContent = vui((props, ref) => {
     const { className, ...rest } = props;
     const { isMobileOpen, mobileContentRef } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext());
-    const isTablet = useDown('lg');
-    return isMobileOpen ? (React.createElement(Box, { bg: "white", className: cs('vui-headerMobileContent', className), column: true, overflowX: "hidden", overflowY: "auto", position: "absolute", ref: mergeRefs(ref, mobileContentRef), right: 0, shadow: 2, top: "calc(100% + 1px)", w: isTablet ? 280 : 320, zIndex: "100", ...styles.mobileContent, ...rest })) : null;
+    const islargerThanTablet = useUp('lg');
+    return isMobileOpen ? (React.createElement(Box, { bg: "white", className: cs('vui-headerMobileContent', className), column: true, overflowX: "hidden", overflowY: "auto", position: "absolute", ref: mergeRefs(ref, mobileContentRef), right: islargerThanTablet ? '-40px' : '-16px', shadow: 2, top: "calc(100% + 1px)", w: islargerThanTablet ? 320 : 280, zIndex: "100", ...styles.mobileContent, ...rest })) : null;
 });
 HeaderMobileContent.displayName = 'HeaderMobileContent';
 export default HeaderMobileContent;

package/dist/esm/header/headerServices.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerServices.d.ts","sourceRoot":"","sources":["../../../src/header/headerServices.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAoBpD,yDAAyD;AACzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAsCxD;yBAtCe,cAAc;;;AA0C9B,eAAe,cAAc,CAAA"}
+{"version":3,"file":"headerServices.d.ts","sourceRoot":"","sources":["../../../src/header/headerServices.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAoBpD,yDAAyD;AACzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAuCxD;yBAvCe,cAAc;;;AA2C9B,eAAe,cAAc,CAAA"}

package/dist/esm/header/headerServices.js

@@ -13,15 +13,15 @@ function ListContent({ links = [] }) {
 export function HeaderServices(props) {
     const { buttonProps, isApplication = false, links = [], showTopBorder = false, ...rest } = props;
     const styles = useStyleConfig('Header', useHeaderContext()).services;
-    const offsetX = isApplication ? 183 : 135;
+    const offsetX = isApplication ? 179 : 135;
     return (React.createElement(React.Fragment, null,
         React.createElement(RenderOnScreen, { minWidth: "lg" },
-            React.createElement(Menu, { isLazy: false, offset: [offsetX, 20], placement: "bottom-end", size: "lg", ...rest },
+            React.createElement(Menu, { isLazy: false, offset: [offsetX, 17], placement: "bottom-end", size: "lg", ...rest },
                 React.createElement(Menu.Button, { className: "vui-services-trigger", icon: "falTh", size: "lg", title: "My services", ...styles.button, ...buttonProps }),
-                React.createElement(Menu.List, { heading: "My Services", maxH: 400, right: 0, w: 320, ...styles.list },
+                React.createElement(Menu.List, { heading: "My Services", maxH: 295, right: 0, w: 320, ...styles.list },
                     React.createElement(ListContent, { links: links })))),
         React.createElement(RenderOnScreen, { maxWidth: "lg" },
-            React.createElement(List, { heading: "My Services", ...styles.list, borderTop: showTopBorder ? 1 : 0, borderTopColor: "sandstone.main", pt: 1 },
+            React.createElement(List, { heading: "My Services", ...styles.list, borderTop: showTopBorder ? 1 : 0, borderTopColor: "sandstone.main", maxH: 295, pt: 1 },
                 React.createElement(ListContent, { links: links })))));
 }
 HeaderServices.displayName = 'HeaderServices';

package/dist/esm/header/headerSupport.js

@@ -21,7 +21,7 @@ export function HeaderSupport(props) {
     return (React.createElement(React.Fragment, null,
         React.createElement(Menu, { isLazy: false, offset: [offsetX, 16], placement: "bottom-end", size: "lg", ...rest },
             React.createElement(Menu.Button, { className: "vui-app-info-trigger", color: styles.button.color, icon: "falQuestionCircle", ml: 1, size: "lg", title: "My services", ...styles.button }),
-            React.createElement(Menu.List, { maxH: 400, right: 0, w: isTablet ? 280 : 320, ...styles.list },
+            React.createElement(Menu.List, { maxH: 295, right: 0, w: isTablet ? 280 : 320, ...styles.list },
                 React.createElement(ListContent, { links: links })))));
 }
 HeaderSupport.displayName = 'HeaderSupport';

package/dist/esm/header/loggedInHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loggedInHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedInHeader.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAGpE,uHAAuH;AACvH,eAAO,MAAM,cAAc,4DA2JzB,CAAA;AAIF,eAAe,cAAc,CAAA"}
+{"version":3,"file":"loggedInHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedInHeader.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAGpE,uHAAuH;AACvH,eAAO,MAAM,cAAc,4DAoJzB,CAAA;AAIF,eAAe,cAAc,CAAA"}

package/dist/esm/header/loggedInHeader.js

@@ -16,13 +16,16 @@ export const LoggedInHeader = vui((props, ref) => {
     }
     const userInfo = !isJsx(account) ? account?.userInfo || {} : {};
     const isSmallScreen = useDown('md');
+    const isLessThanMD = useDown('sm');
     const servicesLinks = isJsx(services) ? [] : services?.links || [];
     const styles = useStyleConfig('Header', useHeaderContext());
     return (React.createElement(Header, { className: cs('vui-loggedInHeader', isApplication ? 'vui-loggedInAppHeader' : '', className), mb: isApplication && isSmallScreen ? '41px' : 'inherited', ref: ref, ...rest },
         React.createElement(Header.Content, null,
-            isJsx(logo) ? logo : React.createElement(Header.Logo, { ...logo }),
+            (!isApplication || !isLessThanMD) && React.createElement(React.Fragment, null,
+                " ",
+                isJsx(logo) ? logo : React.createElement(Header.Logo, { ...logo })),
             isApplication && (React.createElement(React.Fragment, null,
-                React.createElement(RenderOnScreen, { minWidth: "md" },
+                React.createElement(RenderOnScreen, { minWidth: "sm" },
                     React.createElement(Header.Divider, { mr: 2 })),
                 React.createElement(Header.ApplicationName, { title: applicationName, url: applicationUrl || '/' }))),
             !isApplication && React.createElement(RenderOnScreen, { minWidth: "lg" }, children),
@@ -44,7 +47,7 @@ export const LoggedInHeader = vui((props, ref) => {
                                 isJsx(mainLinks) ? (mainLinks) : (React.createElement(Box, { column: true, w: 1 },
                                     React.createElement(List, { py: 1 }, mainLinks?.map(({ icon, url, ...rest }, index) => (React.createElement(List.Item, { iconLeft: icon, key: index, linkProps: { href: url }, ...rest })))))),
                                 !showServices && servicesLinks && (React.createElement(Box, { column: true, w: 1 },
-                                    React.createElement(List, { heading: "My Services", maxH: 400, right: 0, w: 320, ...styles.services.list, borderTop: 1, borderTopColor: "sandstone.main", pt: 1 }, servicesLinks?.map(({ url, ...rest }, index) => (React.createElement(List.Item, { key: index, linkProps: { href: url }, ...rest })))))))))),
+                                    React.createElement(List, { heading: "My Services", maxH: 295, right: 0, w: 320, ...styles.services.list, borderTop: 1, borderTopColor: "sandstone.main", pt: 1 }, servicesLinks?.map(({ url, ...rest }, index) => (React.createElement(List.Item, { key: index, linkProps: { href: url }, ...rest })))))))))),
                     showServices && services && (React.createElement(React.Fragment, null, isJsx(services) ? services : React.createElement(Header.Services, { isApplication: isApplication, ...services })))),
                 React.createElement(Header.Support, { ...supportLinks }))),
             !isApplication && (React.createElement(RenderOnScreen, { minWidth: "lg" },

package/dist/esm/menu/menuList.js

@@ -9,7 +9,7 @@ export const MenuList = vui((props, ref) => {
     const { className, contentProps, contentRef, ...rest } = props;
     const styles = useStyleConfig('Menu', useMenuContext());
     return (React.createElement(PopoverContent, { borderRadius: 0, ref: contentRef, ...contentProps },
-        React.createElement(List, { className: cs('vui-menuList', className), 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, maxH: 295 })));
 });
 MenuList.Divider = List.Divider;
 MenuList.Heading = List.Heading;

package/dist/esm/tag/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,OAAO,MAAM,WAAW,CAAA;AAE/B,eAAO,MAAM,OAAO,gIAsBnB,CAAA;AACD;;;GAGG;AACH,eAAO,MAAM,GAAG;YA2FN,gBAAgB;UAClB,cAAc;UACd,cAAc;CACrB,CAAA;AAQD,eAAe,GAAG,CAAA"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,OAAO,MAAM,WAAW,CAAA;AAE/B,eAAO,MAAM,OAAO,gIAsBnB,CAAA;AACD;;;GAGG;AACH,eAAO,MAAM,GAAG;YA+FN,gBAAgB;UAClB,cAAc;UACd,cAAc;CACrB,CAAA;AAQD,eAAe,GAAG,CAAA"}

package/dist/esm/tag/tag.js

@@ -68,7 +68,7 @@ export const Tag = vui((props, ref) => {
                 isString(iconLeft) ? React.createElement(TagIcon, { mr: spaceX, name: iconLeft }) : iconLeft,
                 children ?? (isReactText(text) ? React.createElement(TagText, { ...{ isTruncated, text } }) : text),
                 isString(iconRight) ? React.createElement(TagIcon, { ml: spaceX, name: iconRight }) : iconRight,
-                onDelete ? React.createElement(TagButton, { disabled: disabled, isRound: isRound, ml: spaceX, onClick: onDelete }) : itemRight)))));
+                onDelete ? (React.createElement(TagButton, { disabled: disabled, isRound: isRound, ml: spaceX, onClick: e => onDelete?.(e) })) : (itemRight))))));
 });
 Tag.Button = TagButton;
 Tag.Icon = TagIcon;

package/dist/esm/tag/tag.types.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { IconProp } from '../icon';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
@@ -26,7 +26,7 @@ export type TagInnerProps = {
     /** Socket displaying a custom item on right left. */
     itemRight?: React.ReactNode;
     /** If provided, displays a remove button with this function as onClick. */
-    onDelete?: () => void;
+    onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /** Socket displaying text as alternative to children. */
     text?: React.ReactNode;
     /** Alias for fontWeight prop. @deprecated */

package/dist/esm/tag/tag.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.types.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,gDAAgD;IAChD,MAAM,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAA;IACzC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAA;IACvE,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iKAAiK;IACjK,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA"}
+{"version":3,"file":"tag.types.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,gDAAgD;IAChD,MAAM,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAA;IACzC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAA;IACvE,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iKAAiK;IACjK,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAClF,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.13.3",
+  "version": "2.13.4",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/header/headerApplicationName.tsx

@@ -20,17 +20,9 @@ export const HeaderApplicationName = vui<'div', HeadingProps & { url?: string }>
         mt: 0
       }
     : {
-        fontSize: 16,
-        mt: '112px',
-        position: 'absolute',
-        mx: '-16px',
-        w: '100%',
-        bg: 'skyBlue.97',
-        py: '8px',
-        px: '16px',
-        lineHeight: '24px',
-        borderBottom: '1px solid darkBlue.main',
-        borderTop: '1px solid darkBlue.main'
+        fontSize: 18,
+        maxW: '156px',
+        lineHeight: '21px'
       }
 
   const linkProps = url ? { as: 'a', href: url, outline: 'none', focusRing: 2 } : {}

package/src/header/headerMobileContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Box, { BoxProps } from '../box'
-import { useDown, useStyleConfig, vui } from '../core'
+import { useStyleConfig, useUp, vui } from '../core'
 import { cs, mergeRefs } from '../utils'
 import { useHeaderContext } from './context'
 
@@ -10,7 +10,7 @@ export const HeaderMobileContent = vui<'div', BoxProps>((props, ref) => {
   const { className, ...rest } = props
   const { isMobileOpen, mobileContentRef } = useHeaderContext() ?? {}
   const styles = useStyleConfig('Header', useHeaderContext())
-  const isTablet = useDown('lg')
+  const islargerThanTablet = useUp('lg')
 
   return isMobileOpen ? (
     <Box
@@ -21,10 +21,10 @@ export const HeaderMobileContent = vui<'div', BoxProps>((props, ref) => {
       overflowY="auto"
       position="absolute"
       ref={mergeRefs(ref, mobileContentRef)}
-      right={0}
+      right={islargerThanTablet ? '-40px' : '-16px'}
       shadow={2}
       top="calc(100% + 1px)"
-      w={isTablet ? 280 : 320}
+      w={islargerThanTablet ? 320 : 280}
       zIndex="100"
       {...styles.mobileContent}
       {...rest}

package/src/header/headerServices.tsx

@@ -29,12 +29,12 @@ export function HeaderServices(props: HeaderServicesProps) {
   const { buttonProps, isApplication = false, links = [], showTopBorder = false, ...rest } = props
   const styles = useStyleConfig('Header', useHeaderContext()).services
 
-  const offsetX = isApplication ? 183 : 135
+  const offsetX = isApplication ? 179 : 135
 
   return (
     <>
       <RenderOnScreen minWidth="lg">
-        <Menu isLazy={false} offset={[offsetX, 20]} placement="bottom-end" size="lg" {...rest}>
+        <Menu isLazy={false} offset={[offsetX, 17]} placement="bottom-end" size="lg" {...rest}>
           <Menu.Button
             className="vui-services-trigger"
             icon="falTh"
@@ -44,7 +44,7 @@ export function HeaderServices(props: HeaderServicesProps) {
             {...buttonProps}
           />
 
-          <Menu.List heading="My Services" maxH={400} right={0} w={320} {...styles.list}>
+          <Menu.List heading="My Services" maxH={295} right={0} w={320} {...styles.list}>
             <ListContent links={links} />
           </Menu.List>
         </Menu>
@@ -56,6 +56,7 @@ export function HeaderServices(props: HeaderServicesProps) {
           {...styles.list}
           borderTop={showTopBorder ? 1 : 0}
           borderTopColor="sandstone.main"
+          maxH={295}
           pt={1}
         >
           <ListContent links={links} />

package/src/header/headerSupport.tsx

@@ -65,7 +65,7 @@ export function HeaderSupport(props: HeaderSupportProps) {
           {...styles.button}
         />
 
-        <Menu.List maxH={400} right={0} w={isTablet ? 280 : 320} {...styles.list}>
+        <Menu.List maxH={295} right={0} w={isTablet ? 280 : 320} {...styles.list}>
           <ListContent links={links} />
         </Menu.List>
       </Menu>

package/src/header/loggedInHeader.tsx

@@ -37,6 +37,7 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
 
   const userInfo = !isJsx(account) ? account?.userInfo || {} : {}
   const isSmallScreen = useDown('md')
+  const isLessThanMD = useDown('sm')
 
   const servicesLinks: HeaderLinkData[] = isJsx(services) ? [] : services?.links || []
   const styles = useStyleConfig('Header', useHeaderContext())
@@ -49,22 +50,18 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
       {...rest}
     >
       <Header.Content>
-        {isJsx(logo) ? logo : <Header.Logo {...logo} />}
-
+        {(!isApplication || !isLessThanMD) && <> {isJsx(logo) ? logo : <Header.Logo {...logo} />}</>}
         {isApplication && (
           <>
-            <RenderOnScreen minWidth="md">
+            <RenderOnScreen minWidth="sm">
               <Header.Divider mr={2} />
             </RenderOnScreen>
 
             <Header.ApplicationName title={applicationName} url={applicationUrl || '/'} />
           </>
         )}
-
         {!isApplication && <RenderOnScreen minWidth="lg">{children}</RenderOnScreen>}
-
         <Box ml="auto" />
-
         {isApplication && (
           <>
             <RenderOnScreen minWidth="lg">
@@ -107,7 +104,7 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
                         <Box column w={1}>
                           <List
                             heading="My Services"
-                            maxH={400}
+                            maxH={295}
                             right={0}
                             w={320}
                             {...styles.services.list}
@@ -133,7 +130,6 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
             <Header.Support {...supportLinks} />
           </>
         )}
-
         {!isApplication && (
           <RenderOnScreen minWidth="lg">
             {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
@@ -143,11 +139,8 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
             {isJsx(services) ? services : <Header.Services {...services} />}
           </RenderOnScreen>
         )}
-
         {isJsx(notifications) ? notifications : <Header.Notifications {...notifications} />}
-
         {isJsx(account) ? account : <Header.Account {...account} />}
-
         <RenderOnScreen maxWidth="lg">
           {isApplication && <Header.Divider ml={1} />}
           {!isApplication && (account !== undefined || notifications !== undefined) && <Header.Divider ml={1} />}

package/src/menu/menuList.tsx

@@ -14,7 +14,7 @@ export const MenuList = vui<'ul', MenuListProps>((props, ref) => {
 
   return (
     <PopoverContent borderRadius={0} ref={contentRef} {...contentProps}>
-      <List className={cs('vui-menuList', className)} py={1} ref={ref} w="100%" {...styles.list} {...rest} />
+      <List className={cs('vui-menuList', className)} py={1} ref={ref} w="100%" {...styles.list} {...rest} maxH={295} />
     </PopoverContent>
   )
 }) as VuiComponent<'ul', MenuListProps> & {

package/src/tag/tag.tsx

@@ -119,7 +119,11 @@ export const Tag = vui<'span', TagProps>((props, ref) => {
 
             {isString(iconRight) ? <TagIcon ml={spaceX} name={iconRight} /> : iconRight}
 
-            {onDelete ? <TagButton disabled={disabled} isRound={isRound} ml={spaceX} onClick={onDelete} /> : itemRight}
+            {onDelete ? (
+              <TagButton disabled={disabled} isRound={isRound} ml={spaceX} onClick={e => onDelete?.(e)} />
+            ) : (
+              itemRight
+            )}
           </>
         )}
       </TagBase>

package/src/tag/tag.types.ts

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import { IconProp } from '../icon'
 import { SystemProps, TypographyProps } from '../system'
 import { ThemingProps } from '../theme'
@@ -26,7 +28,7 @@ export type TagInnerProps = {
   /** Socket displaying a custom item on right left. */
   itemRight?: React.ReactNode
   /** If provided, displays a remove button with this function as onClick. */
-  onDelete?: () => void
+  onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
   /** Socket displaying text as alternative to children. */
   text?: React.ReactNode
   /** Alias for fontWeight prop. @deprecated */