@veracity/vui 2.6.2 → 2.7.0

package/dist/esm/header/headerApplicationName.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useUp, vui } from '../core';
+import { Heading } from '../heading';
+import { cs } from '../utils';
+/** Logo displayed in the left corner of the Header. */
+export const HeaderApplicationName = vui((props, ref) => {
+    const { title, ...rest } = props;
+    const isTablet = useUp('md');
+    const additionalClassName = isTablet ? 'vui-headerApplicationNameTablet' : 'vui-headerApplicationNameMobile';
+    const mobileProps = isTablet
+        ? {
+            fontSize: 18,
+            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'
+        };
+    return (React.createElement(Heading, { className: cs('vui-headerApplicationName', additionalClassName), size: "title", ...rest, ...mobileProps }, title));
+});
+export default HeaderApplicationName;

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

@@ -1 +1 @@
-{"version":3,"file":"headerCreateAccount.d.ts","sourceRoot":"","sources":["../../../src/header/headerCreateAccount.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,0DAA0D;AAC1D,eAAO,MAAM,mBAAmB,iEA8B9B,CAAA;AAEF,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"headerCreateAccount.d.ts","sourceRoot":"","sources":["../../../src/header/headerCreateAccount.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,0DAA0D;AAC1D,eAAO,MAAM,mBAAmB,iEAgC9B,CAAA;AAEF,eAAe,mBAAmB,CAAA"}

package/dist/esm/header/headerCreateAccount.js

@@ -10,9 +10,10 @@ export const HeaderCreateAccount = vui((props, ref) => {
     const { children, className, url, ...rest } = props;
     const { isMobile, links } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext()).createAccount;
-    const screenProps = isMobile ? { borderBottom: '1px solid grey.40', p: 2 } : { ml: 3 };
+    const screenProps = isMobile ? { borderBottom: '1px solid sandstone.main', p: 2 } : { ml: 3 };
+    const linkVariant = isMobile ? 'dark' : styles?.link?.variant ?? 'dark';
     return (React.createElement(Box, { className: cs('vui-headerCreateAccount', className), column: true, flexShrink: 0, ref: ref, ...styles.container, ...screenProps, ...rest }, children ?? (React.createElement(React.Fragment, null,
-        React.createElement(T, { size: "sm", ...styles.text }, "New to Veracity?"),
-        React.createElement(Link, { fontWeight: "medium", href: url ?? links.signUp, isUnderlined: true, size: "sm", ...styles.link }, "Create account")))));
+        React.createElement(T, { size: "sm", ...styles.text, color: isMobile ? 'darkBlue.main' : styles?.text?.color ?? 'darkBlue.main' }, "New to Veracity?"),
+        React.createElement(Link, { fontWeight: "medium", href: url ?? links.signUp, isUnderlined: true, size: "sm", variant: linkVariant }, "Create account")))));
 });
 export default HeaderCreateAccount;

package/dist/esm/header/headerDivider.d.ts

@@ -1,5 +1,5 @@
 import { DividerProps } from '../divider';
-/** Vertical line dividing some of the Header content. */
+/** Vertical line dividing part of the Header content. */
 export declare const HeaderDivider: import("../core").VuiComponent<"hr", DividerProps>;
 export default HeaderDivider;
 //# sourceMappingURL=headerDivider.d.ts.map

package/dist/esm/header/headerDivider.js

@@ -3,7 +3,7 @@ import { useStyleConfig, vui } from '../core';
 import Divider from '../divider';
 import { cs } from '../utils';
 import { useHeaderContext } from './context';
-/** Vertical line dividing some of the Header content. */
+/** Vertical line dividing part of the Header content. */
 export const HeaderDivider = vui((props, ref) => {
     const { className, ...rest } = props;
     const styles = useStyleConfig('Header', useHeaderContext());

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

@@ -1 +1 @@
-{"version":3,"file":"headerLinkItem.d.ts","sourceRoot":"","sources":["../../../src/header/headerLinkItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,0CAA0C;AAC1C,eAAO,MAAM,cAAc,2DAuCzB,CAAA;AAEF,eAAe,cAAc,CAAA"}
+{"version":3,"file":"headerLinkItem.d.ts","sourceRoot":"","sources":["../../../src/header/headerLinkItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,0CAA0C;AAC1C,eAAO,MAAM,cAAc,2DAyDzB,CAAA;AAEF,eAAe,cAAc,CAAA"}

package/dist/esm/header/headerLinkItem.js

@@ -14,19 +14,36 @@ export const HeaderLinkItem = vui((props, ref) => {
     });
     const linkActiveProps = isActive
         ? isMobile
-            ? { bg: 'blue.10', borderLeftWidth: 6, hoverBg: 'blue.20', pl: '10px' }
+            ? {
+                bg: 'skyBlue.95',
+                borderColor: 'seaBlue.main',
+                borderLeftWidth: 6,
+                hoverBg: 'skyBlue.90',
+                pl: '10px',
+                activeBorderBottomWidth: 0,
+                pt: '0px'
+            }
             : { borderBottomWidth: 4, pt: '4px' }
         : {};
+    const linkMobileProps = isMobile
+        ? {
+            color: 'darkBlue.main',
+            hoverBg: 'skyBlue.90',
+            activeBorderColor: 'seaBlue.main',
+            activeBorderLeftWidth: 6,
+            pt: '0'
+        }
+        : { activeBorderBottomWidth: 4, pt: '0px', activePt: '4px' };
     const itemScreenProps = isMobile ? {} : { display: 'inline-flex', fontWeight: 'medium', h: '100%' };
     return (React.createElement(List.Item, { className: cs('vui-headerLinkItem', className), iconLeft: icon, linkProps: {
-            ...linkActiveProps,
-            borderColor: 'prussian.80',
             href: url,
             ringInset: true,
             transition: 'all 0.1s, border-width 0s, padding 0s',
-            w: { xs: '100%', md: 'max-content' },
+            w: { xs: '100%', lg: 'max-content' },
             ...styles.link,
-            ...linkProps
+            ...linkProps,
+            ...linkMobileProps,
+            ...linkActiveProps
         }, onClick: onClick, ref: ref, ...itemScreenProps, ...styles.container, ...rest }));
 });
 export default HeaderLinkItem;

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

@@ -1 +1 @@
-{"version":3,"file":"headerLogo.d.ts","sourceRoot":"","sources":["../../../src/header/headerLogo.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG9C,uDAAuD;AACvD,eAAO,MAAM,UAAU,kDAWrB,CAAA;AAEF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"headerLogo.d.ts","sourceRoot":"","sources":["../../../src/header/headerLogo.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG9C,uDAAuD;AACvD,eAAO,MAAM,UAAU,kDAarB,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/esm/header/headerLogo.js

@@ -1,12 +1,13 @@
 import React from 'react';
-import { vui } from '../core';
+import { useStyleConfig, vui } from '../core';
 import { Logo } from '../logo';
 import { useHeaderContext } from './context';
 /** Logo displayed in the left corner of the Header. */
 export const HeaderLogo = vui((props, ref) => {
     const { brand, children, className, src, url, ...rest } = props;
     const { links } = useHeaderContext() ?? {};
+    const styles = useStyleConfig('Header', useHeaderContext()).logo;
     const logoUrl = url ?? links.home;
-    return (React.createElement(Logo, { brand: brand, className: className, ref: ref, src: src, url: logoUrl, ...rest }, children));
+    return (React.createElement(Logo, { brand: brand, className: className, ref: ref, src: src, styles: styles, url: logoUrl, ...rest }, children));
 });
 export default HeaderLogo;

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

@@ -1 +1 @@
-{"version":3,"file":"headerMainLinks.d.ts","sourceRoot":"","sources":["../../../src/header/headerMainLinks.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAGrD,4BAA4B;AAC5B,eAAO,MAAM,eAAe,4DAmB1B,CAAA;AAEF,eAAe,eAAe,CAAA"}
+{"version":3,"file":"headerMainLinks.d.ts","sourceRoot":"","sources":["../../../src/header/headerMainLinks.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAGrD,4BAA4B;AAC5B,eAAO,MAAM,eAAe,4DAyB1B,CAAA;AAEF,eAAe,eAAe,CAAA"}

package/dist/esm/header/headerMainLinks.js

@@ -9,7 +9,13 @@ export const HeaderMainLinks = vui((props, ref) => {
     const { children, className, links, ...rest } = props;
     const { isMobile } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext());
-    const screenStyles = isMobile ? { borderBottom: '1px solid grey.40', flexDirection: 'column', mb: 1 } : { h: '100%' };
+    const screenStyles = isMobile
+        ? {
+            borderBottom: '1px solid sandstone.main',
+            flexDirection: 'column',
+            mb: 1
+        }
+        : { h: '100%' };
     return (React.createElement(List, { className: cs('vui-headerMainLinks', className), display: "flex", ref: ref, ...styles.mainLinks, ...screenStyles, ...rest }, children ?? links?.map((link, index) => React.createElement(HeaderLinkItem, { key: index, ...link }))));
 });
 export default HeaderMainLinks;

package/dist/esm/header/headerMobileContent.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps } from '../box';
-/** Displays some of the Header content when on a mobile screen. */
+/** Displays part of the Header content when on a mobile screen. */
 export declare const HeaderMobileContent: import("../core").VuiComponent<"div", BoxProps>;
 export default HeaderMobileContent;
 //# sourceMappingURL=headerMobileContent.d.ts.map

package/dist/esm/header/headerMobileContent.js

@@ -3,7 +3,7 @@ import Box from '../box';
 import { useStyleConfig, vui } from '../core';
 import { cs, mergeRefs } from '../utils';
 import { useHeaderContext } from './context';
-/** Displays some of the Header content when on a mobile screen. */
+/** Displays part of the Header content when on a mobile screen. */
 export const HeaderMobileContent = vui((props, ref) => {
     const { className, ...rest } = props;
     const { isMobileOpen, mobileContentRef } = useHeaderContext() ?? {};

package/dist/esm/header/headerMobileToggle.js

@@ -10,6 +10,6 @@ export const HeaderMobileToggle = vui((props, ref) => {
     const { isMobileOpen, mobileToggleRef, setIsMobileOpen } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext());
     const iconName = isMobileOpen ? 'falTimes' : 'falBars';
-    return (React.createElement(IconButton, { className: cs('vui-headerMobileToggle', className), icon: React.createElement(Icon, { name: iconName, scale: 2 }), ml: 2, onClick: () => setIsMobileOpen(s => !s), p: "3px", ref: mergeRefs(ref, mobileToggleRef), ...styles.mobileToggle, ...rest }));
+    return (React.createElement(IconButton, { className: cs('vui-headerMobileToggle', className), icon: React.createElement(Icon, { name: iconName }), ml: 1, onClick: () => setIsMobileOpen(s => !s), p: "3px", ref: mergeRefs(ref, mobileToggleRef), ...styles.mobileToggle, ...rest }));
 });
 export default HeaderMobileToggle;

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

@@ -1 +1 @@
-{"version":3,"file":"headerNotifications.d.ts","sourceRoot":"","sources":["../../../src/header/headerNotifications.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAkBzD,+FAA+F;AAC/F,eAAO,MAAM,mBAAmB,+DA6B9B,CAAA;AAEF,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"headerNotifications.d.ts","sourceRoot":"","sources":["../../../src/header/headerNotifications.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAoBzD,+FAA+F;AAC/F,eAAO,MAAM,mBAAmB,+DA8B9B,CAAA;AAEF,eAAe,mBAAmB,CAAA"}

package/dist/esm/header/headerNotifications.js

@@ -3,27 +3,29 @@ import Button from '../button';
 import { styled, useStyleConfig, vui } from '../core';
 import { cs } from '../utils';
 import { useHeaderContext } from './context';
+/*@formatter:off*/
 const Badge = styled.spanBox `
   align-items: center;
-  background-color: hsl(357, 83%, 60%);
+  background-color: energyRed.main;
   border-radius: round;
   color: white;
   display: flex;
-  font-size: 8px;
+  font-size: 12px;
   font-weight: medium;
-  height: 16px;
+  height: 20px;
   justify-content: center;
   position: absolute;
   right: 1px;
   top: 1px;
-  width: 16px;
+  width: 20px;
 `;
+/*@formatter:on*/
 /** Icon link to Veracity notifications engine with an optional number of new notifications. */
 export const HeaderNotifications = vui((props, ref) => {
     const { children, className, count = 0, url, ...rest } = props;
     const { links } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext()).notifications;
-    return (React.createElement(Button, { as: "a", className: cs('vui-headerNotifications', className), href: url ?? links.notifications, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, title: "Notifications", variant: "tertiaryDark", ...styles.container, ...rest }, children ?? (React.createElement(React.Fragment, null,
+    return (React.createElement(Button, { as: "a", className: cs('vui-headerNotifications', className), href: url ?? links.notifications, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, size: "lg", title: "Notifications", variant: "tertiaryDark", ...styles.container, ...rest }, children ?? (React.createElement(React.Fragment, null,
         React.createElement(Button.Icon, { name: "falBell" }),
         count > 0 && React.createElement(Badge, null, count < 100 ? count : '99+')))));
 });

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,eAuBxD;AAED,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,eA6BxD;AAED,eAAe,cAAc,CAAA"}

package/dist/esm/header/headerServices.js

@@ -16,11 +16,11 @@ export function HeaderServices(props) {
     return (React.createElement(React.Fragment, null,
         React.createElement(RenderOnScreen, { minWidth: "lg" },
             React.createElement(Menu, { isLazy: false, offset: [0, 8], placement: "bottom-end", size: "lg", ...rest },
-                React.createElement(Menu.Button, { icon: "falTh", ml: 1, title: "My services", ...styles.button, ...buttonProps }),
+                React.createElement(Menu.Button, { className: "vui-services-trigger", icon: "falTh", title: "My services", ...styles.button, ...buttonProps }),
                 React.createElement(Menu.List, { heading: "My Services", maxH: 400, w: 320, ...styles.list },
                     React.createElement(ListContent, { links: links })))),
         React.createElement(RenderOnScreen, { maxWidth: "lg" },
-            React.createElement(List, { borderBottom: "1px solid grey.40", heading: "My Services", ...styles.list },
+            React.createElement(List, { borderBottom: "1px solid sandstone.main", heading: "My Services", ...styles.list },
                 React.createElement(ListContent, { links: links })))));
 }
 export default HeaderServices;

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

@@ -1 +1 @@
-{"version":3,"file":"headerSignIn.d.ts","sourceRoot":"","sources":["../../../src/header/headerSignIn.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD,qDAAqD;AACrD,eAAO,MAAM,YAAY,6DAiBvB,CAAA;AAEF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"headerSignIn.d.ts","sourceRoot":"","sources":["../../../src/header/headerSignIn.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD,qDAAqD;AACrD,eAAO,MAAM,YAAY,6DAoBvB,CAAA;AAEF,eAAe,YAAY,CAAA"}

package/dist/esm/header/headerSignIn.js

@@ -8,6 +8,7 @@ export const HeaderSignIn = vui((props, ref) => {
     const { children, className, url, ...rest } = props;
     const { links } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext());
-    return (React.createElement(Button, { as: "a", className: cs('vui-headerSignIn', className), href: url ?? links.signIn, ref: ref, ...styles.signIn, ...rest }, children ?? 'Sign in'));
+    const buttonVariant = styles?.signIn?.button?.variant ?? 'primaryDark';
+    return (React.createElement(Button, { as: "a", className: cs('vui-headerSignIn', className), href: url ?? links.signIn, ref: ref, variant: buttonVariant, ...styles.signIn, ...rest }, children ?? 'Sign in'));
 });
 export default HeaderSignIn;

package/dist/esm/header/index.d.ts

@@ -5,6 +5,7 @@ export * from './header.types';
 export * from './headerAccount';
 export * from './headerAccount.types';
 export * from './headerAccountUserInfo';
+export * from './headerApplicationName';
 export * from './headerContent';
 export * from './headerCreateAccount';
 export * from './headerDivider';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/header/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/header/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA"}

package/dist/esm/header/index.js

@@ -5,6 +5,7 @@ export * from './header.types';
 export * from './headerAccount';
 export * from './headerAccount.types';
 export * from './headerAccountUserInfo';
+export * from './headerApplicationName';
 export * from './headerContent';
 export * from './headerCreateAccount';
 export * from './headerDivider';

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

@@ -1,5 +1,5 @@
 import { LoggedInHeaderProps } from './header.types';
-/** Displays Header content appropriate for logged in users, such as services, notifications or account information. */
+/** Displays Header content appropriate for logged-in users, such as services, notifications or account information. */
 export declare const LoggedInHeader: import("../core").VuiComponent<"div", LoggedInHeaderProps>;
 export default LoggedInHeader;
 //# sourceMappingURL=loggedInHeader.d.ts.map

package/dist/esm/header/loggedInHeader.js

@@ -3,7 +3,7 @@ import Box from '../box';
 import { RenderOnScreen, vui } from '../core';
 import { cs, isJsx } from '../utils';
 import Header from './header';
-/** Displays Header content appropriate for logged in users, such as services, notifications or account information. */
+/** Displays Header content appropriate for logged-in users, such as services, notifications or account information. */
 export const LoggedInHeader = vui((props, ref) => {
     const { account, children, className, logo, mainLinks, services, notifications, ...rest } = props;
     return (React.createElement(Header, { className: cs('vui-loggedInHeader', className), ref: ref, ...rest },

package/dist/esm/header/theme.d.ts

@@ -1,37 +1,75 @@
 declare const _default: {
     baseStyle: {};
-    defaultProps: {};
+    defaultProps: {
+        variant: string;
+    };
     parts: string[];
     sizes: {};
     variants: {
-        dark: {
+        default: {
             container: {
-                bg: string;
-                borderBottom: number;
+                borderColor: string;
             };
-            account: {
-                trigger: {
-                    bg: string;
-                    color: string;
+            createAccount: {
+                link: {
+                    variant: string;
+                };
+            };
+            linkItem: {
+                container: {
                     hoverBg: string;
                     activeBg: string;
+                    activeBorderColor: string;
+                };
+                link: {
+                    color: string;
+                    borderColor: string;
                 };
             };
+            logo: {
+                svg: {
+                    pathFill: string;
+                };
+            };
+            divider: {
+                color: string;
+            };
+            mobileToggle: {
+                color: string;
+            };
+            notifications: {
+                container: {
+                    color: string;
+                };
+            };
+            services: {
+                button: {
+                    color: string;
+                };
+                list: {
+                    variant: string;
+                };
+            };
+            signIn: {
+                background: string;
+            };
+        };
+        dark: {
+            container: {
+                bg: string;
+                borderBottom: number;
+            };
             createAccount: {
                 link: {
-                    color: {
-                        xs: string;
-                        md: string;
-                    };
-                    hoverColor: {
-                        xs: string;
-                        md: string;
-                    };
+                    variant: string;
                 };
                 text: {
-                    color: {
-                        md: string;
-                    };
+                    color: string;
+                };
+            };
+            account: {
+                trigger: {
+                    variant: string;
                 };
             };
             divider: {
@@ -39,16 +77,12 @@ declare const _default: {
             };
             linkItem: {
                 container: {
-                    hoverBg: {
-                        xs: string;
-                        md: string;
-                    };
-                    activeBg: {
-                        xs: string;
-                        md: string;
-                    };
+                    hoverBg: string;
+                    activeBg: string;
+                    activeBorderColor: string;
                 };
                 link: {
+                    color: string;
                     borderColor: string;
                 };
             };
@@ -66,19 +100,30 @@ declare const _default: {
                 top: string;
             };
             mobileToggle: {
-                variant: string;
+                color: string;
             };
             notifications: {
                 container: {
                     variant: string;
+                    color: string;
+                    borderColor: string;
+                };
+                icon: {
+                    color: string;
                 };
             };
             services: {
                 button: {
+                    color: string;
+                };
+                list: {
                     variant: string;
                 };
             };
             signIn: {
+                button: {
+                    variant: string;
+                };
                 colorScheme: string;
             };
         };

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/header/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/header/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoJA,wBAMC"}

package/dist/esm/header/theme.js

@@ -1,5 +1,7 @@
 const baseStyle = {};
-const defaultProps = {};
+const defaultProps = {
+    variant: 'default'
+};
 const parts = [
     'container',
     'account',
@@ -19,26 +21,70 @@ const parts = [
 ];
 const sizes = {};
 const variants = {
-    dark: {
+    default: {
         container: {
-            bg: 'prussian.80',
-            borderBottom: 0
+            borderColor: 'darkBlue.main'
         },
-        account: {
-            trigger: {
-                bg: 'white',
-                color: 'prussian.80',
-                hoverBg: 'blue.20',
-                activeBg: 'blue.30'
+        createAccount: {
+            link: {
+                variant: 'dark'
+            }
+        },
+        linkItem: {
+            container: {
+                hoverBg: 'skyBlue.90',
+                activeBg: 'transparent',
+                activeBorderColor: 'darkBlue.main'
+            },
+            link: {
+                color: 'darkBlue.main',
+                borderColor: 'darkBlue.main'
+            }
+        },
+        logo: {
+            svg: {
+                pathFill: '#0F204B' // darkBlue.main
+            }
+        },
+        divider: {
+            color: 'darkBlue.main'
+        },
+        mobileToggle: {
+            color: 'darkBlue.main'
+        },
+        notifications: {
+            container: {
+                color: 'darkBlue.main'
             }
         },
+        services: {
+            button: {
+                color: 'darkBlue.main'
+            },
+            list: {
+                variant: 'blue'
+            }
+        },
+        signIn: {
+            background: 'darkBlue.main'
+        }
+    },
+    dark: {
+        container: {
+            bg: 'darkBlue.main',
+            borderBottom: 0
+        },
         createAccount: {
             link: {
-                color: { xs: 'blue.80', md: 'blue.60' },
-                hoverColor: { xs: 'blue.60', md: 'blue.40' }
+                variant: 'light'
             },
             text: {
-                color: { md: 'white' }
+                color: 'white'
+            }
+        },
+        account: {
+            trigger: {
+                variant: 'primaryLight'
             }
         },
         divider: {
@@ -46,16 +92,18 @@ const variants = {
         },
         linkItem: {
             container: {
-                hoverBg: { xs: 'blue.20', md: 'prussian.60' },
-                activeBg: { xs: 'blue.30', md: 'prussian.50' }
+                hoverBg: 'seaBlue.25',
+                activeBg: 'transparent',
+                activeBorderColor: 'digiGreen.main'
             },
             link: {
-                borderColor: 'pink.80'
+                color: 'white',
+                borderColor: 'digiGreen.main'
             }
         },
         logo: {
             svg: {
-                pathFill: 'white'
+                pathFill: '#FFFFFF'
             }
         },
         mainLinks: {
@@ -65,19 +113,30 @@ const variants = {
             top: '100%'
         },
         mobileToggle: {
-            variant: 'solid'
+            color: 'white'
         },
         notifications: {
             container: {
-                variant: 'solid'
+                variant: 'solid',
+                color: 'white',
+                borderColor: 'transparent'
+            },
+            icon: {
+                color: 'white'
             }
         },
         services: {
             button: {
-                variant: 'solid'
+                color: 'white'
+            },
+            list: {
+                variant: 'blue'
             }
         },
         signIn: {
+            button: {
+                variant: 'primaryLight'
+            },
             colorScheme: 'pink'
         }
     }

package/dist/esm/icons/baseIcons/conc/conAPI.d.ts

@@ -0,0 +1,4 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;
+//# sourceMappingURL=conAPI.d.ts.map

package/dist/esm/icons/baseIcons/conc/conAPI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conAPI.d.ts","sourceRoot":"","sources":["../../../../../src/icons/baseIcons/conc/conAPI.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;;AAE5C,wBAGmB"}

package/dist/esm/icons/baseIcons/conc/conAPI.js

@@ -0,0 +1,5 @@
+/* eslint-disable */
+export default {
+    details: [64, 64, [], '', 'M57.383 26.6631L61.433 28.1531L61.443 28.1431C61.983 28.3431 62.343 28.9331 62.303 29.5731L61.883 37.1631C61.853 37.8031 61.443 38.3531 60.893 38.4931L56.903 39.5331C56.723 40.1231 56.533 40.6931 56.323 41.2531C55.683 42.9331 54.863 44.5631 53.873 46.1031L55.683 50.0231C55.933 50.5531 55.763 51.2131 55.283 51.6431L49.623 56.7131C49.153 57.1331 48.473 57.2331 47.983 56.9431L44.423 54.8631C42.293 56.0131 40.013 56.8531 37.633 57.3731L36.143 61.4231C35.953 61.9431 35.413 62.2831 34.803 62.2831H34.713L27.123 61.8731C26.483 61.8431 25.933 61.4331 25.793 60.8831L24.753 56.8931C24.163 56.7131 23.593 56.5231 23.033 56.3131C21.353 55.6831 19.723 54.8631 18.183 53.8731L14.263 55.6831C13.733 55.9231 13.073 55.7631 12.643 55.2831L7.57303 49.6231C7.14303 49.1431 7.05303 48.4631 7.34303 47.9731L9.42303 44.4231C8.27303 42.2831 7.43303 40.0031 6.91303 37.6331L2.86303 36.1431C2.32303 35.9431 1.96303 35.3531 2.00303 34.7131L2.43303 27.1231C2.46303 26.4831 2.87303 25.9331 3.42303 25.7931L7.41303 24.7531C7.59303 24.1531 7.78303 23.5931 7.99303 23.0331C8.62303 21.3531 9.44303 19.7231 10.433 18.1831L8.62303 14.2631C8.38303 13.7431 8.54303 13.0831 9.02303 12.6531L14.683 7.5731C15.153 7.1431 15.833 7.0531 16.323 7.3431L19.873 9.4231C22.013 8.2731 24.283 7.4331 26.663 6.9131L28.153 2.8631C28.353 2.3131 28.923 1.9631 29.583 2.0031L37.183 2.4131C37.823 2.4531 38.373 2.8631 38.513 3.4131L39.553 7.4031C40.153 7.5831 40.723 7.7731 41.273 7.9831C42.953 8.6131 44.583 9.4331 46.123 10.4231L50.043 8.6131C50.553 8.3731 51.223 8.5331 51.653 9.0131L56.723 14.6731C57.143 15.1431 57.243 15.8231 56.953 16.3131L54.873 19.8731C56.023 22.0131 56.863 24.2931 57.383 26.6631ZM55.283 37.8931L59.903 36.6831L59.893 36.6731L60.263 29.8431L55.633 28.1431L55.523 27.5931C55.023 25.0431 54.113 22.6031 52.833 20.3431L52.543 19.8431L54.963 15.7231L50.403 10.6331L45.923 12.7031L45.453 12.3931C43.903 11.3531 42.253 10.5031 40.533 9.8531C39.863 9.6031 39.173 9.3831 38.423 9.1731L37.863 9.0231L36.653 4.4031L29.823 4.0331L28.123 8.6631L27.573 8.7731C25.023 9.2731 22.583 10.1831 20.323 11.4631L19.823 11.7531L15.703 9.3331L10.613 13.9031L12.683 18.3831L12.363 18.8531C11.323 20.4031 10.473 22.0531 9.82303 23.7731C9.57303 24.4431 9.35303 25.1331 9.14303 25.8831L8.99303 26.4431L4.37303 27.6531L4.00303 34.4831L8.63303 36.1831L8.74303 36.7331C9.24303 39.2831 10.153 41.7231 11.433 43.9831L11.723 44.4831L9.30303 48.6031L13.873 53.6931L18.353 51.6231L18.823 51.9331C20.373 52.9731 22.023 53.8231 23.743 54.4731C24.413 54.7231 25.103 54.9431 25.853 55.1531L26.413 55.3031L27.623 59.9231L34.453 60.2931L36.153 55.6631L36.703 55.5531C39.253 55.0531 41.693 54.1431 43.953 52.8631L44.453 52.5731L48.573 54.9931L53.663 50.4331L51.593 45.9531L51.913 45.4831C52.953 43.9331 53.803 42.2831 54.453 40.5631C54.703 39.8931 54.923 39.2031 55.133 38.4531L55.283 37.8931ZM11.9229 25.4031C15.6429 14.2431 27.7429 8.1931 38.9029 11.9131V11.9231C44.3029 13.7231 48.6929 17.5331 51.2329 22.6231C53.7729 27.7131 54.1829 33.5031 52.3829 38.9031C50.5829 44.3031 46.7829 48.6831 41.6829 51.2331C38.6829 52.7331 35.4329 53.4931 32.1729 53.4931C29.9029 53.4931 27.6229 53.1231 25.4029 52.3831C20.0029 50.5831 15.6229 46.7831 13.0729 41.6831C10.5329 36.5931 10.1229 30.8031 11.9229 25.4031ZM40.7929 49.4431C45.4129 47.1331 48.8629 43.1631 50.4929 38.2631H50.4429C52.0729 33.3631 51.7029 28.1231 49.3929 23.5031C47.3429 19.4031 43.9829 16.2331 39.8229 14.4331C40.4529 16.0331 40.6829 18.2931 39.2729 21.1031C40.6029 22.0831 41.5829 23.4531 42.0829 25.0731C42.6929 27.0631 42.4929 29.1631 41.5229 30.9931L40.3229 33.2631L37.5929 31.8131C37.5829 31.8431 37.5629 31.9131 37.5629 31.9131L36.4629 33.9731C36.2829 34.3131 35.9429 34.5031 35.5829 34.5031C35.4229 34.5031 35.2629 34.4631 35.1129 34.3831C34.6329 34.1231 34.4429 33.5231 34.7029 33.0331L35.8029 30.9731C35.8229 30.9431 35.8729 30.8931 35.8729 30.8931L31.0629 28.3331C31.0529 28.3631 31.0329 28.4331 31.0329 28.4331L29.9329 30.4931C29.7529 30.8331 29.4129 31.0231 29.0529 31.0231C28.8929 31.0231 28.7329 30.9831 28.5829 30.9031C28.1029 30.6431 27.9129 30.0431 28.1729 29.5531L29.2729 27.4931C29.2929 27.4631 29.3429 27.4131 29.3429 27.4131L26.6129 25.9631L27.8229 23.6931C29.6929 20.1531 33.9329 18.6631 37.5629 20.1131C39.3929 16.3631 37.5429 14.0531 36.8929 13.4031C35.3229 13.0031 33.7329 12.8031 32.1629 12.8031C24.0729 12.8031 16.5129 17.9331 13.8129 26.0231C12.1829 30.9231 12.5529 36.1631 14.8629 40.7831C16.8629 44.7831 20.1129 47.9031 24.1329 49.7231C23.1529 46.7231 24.0329 44.4731 24.9229 43.1431C23.6229 42.1631 22.6629 40.8031 22.1729 39.2131C21.5629 37.2231 21.7629 35.1231 22.7329 33.2931L23.9329 31.0231L37.6729 38.3231L36.4629 40.5931C35.0729 43.2231 32.3729 44.7231 29.5829 44.7231C28.5929 44.7231 27.6029 44.5231 26.6429 44.1331C25.8629 45.2431 24.9629 47.4631 26.7129 50.6831C31.4129 52.0631 36.3829 51.6431 40.7929 49.4431ZM24.0829 38.6331C24.5429 40.1131 25.5329 41.3231 26.8929 42.0431C29.7129 43.5431 33.2129 42.4631 34.7129 39.6531L34.9829 39.1531L24.7729 33.7331L24.5029 34.2331C23.7729 35.5931 23.6329 37.1531 24.0829 38.6331ZM29.6029 24.6431L29.3329 25.1431H29.3229L39.5329 30.5631L39.8029 30.0631C40.5329 28.7031 40.6729 27.1431 40.2229 25.6631C39.7629 24.1831 38.7729 22.9731 37.4129 22.2531C34.6029 20.7531 31.0929 21.8331 29.6029 24.6431Z'],
+    name: 'conAPI'
+};