@veracity/vui 2.7.0 → 2.8.0-rc.1

package/dist/cjs/tree/treeItem.js

@@ -41,34 +41,31 @@ exports.TreeItem = exports.TreeItemBase = void 0;
 const react_1 = __importStar(require("react"));
 const box_1 = require("../box");
 const core_1 = require("../core");
+const list_1 = require("../list");
 const utils_1 = require("../utils");
 const context_1 = require("./context");
 const treeIcon_1 = __importDefault(require("./treeIcon"));
 const treeText_1 = __importDefault(require("./treeText"));
-exports.TreeItemBase = core_1.styled.divBox `
+/*@formatter:off*/
+exports.TreeItemBase = core_1.styled.liBox `
   display: flex;
   flex-direction: column;
-  line-height: normal;
-  outline: none;
-  align-content: flex-start;
-  align-items: flex-start;
-  overflow: visible;
-  height: auto;
-
-  & [aria-disabled='true'] {
-    cursor: not-allowed;
-    user-select: none;
-  }
+  transition-duration: fast;
+  width: 100%;
 `;
+/*@formatter:on*/
 /**
  * Displays a tree item with text and optional icons. Can be shown as selected.
  */
 exports.TreeItem = (0, core_1.vui)((props, ref) => {
+    var _a, _b, _c, _d;
     const mergedProps = Object.assign(Object.assign({}, (0, context_1.useTreeContext)()), props);
-    const { activeItemId, activeItemIndex, children, center, centerH, centerV = true, className, iconCollapse = 'falMinus', isCollapsed, disabled, iconExpand = 'falPlus', id, items, isActive, isTruncated, key, onClickTreeItem, onToggle, text } = mergedProps, rest = __rest(mergedProps, ["activeItemId", "activeItemIndex", "children", "center", "centerH", "centerV", "className", "iconCollapse", "isCollapsed", "disabled", "iconExpand", "id", "items", "isActive", "isTruncated", "key", "onClickTreeItem", "onToggle", "text"]);
+    const { activeItemId, activeItemIndex, children, center, centerH, centerV = true, className, iconCollapse = 'falMinus', isCollapsed, disabled, iconExpand = 'falPlus', id, items, isActive, isFirstLevel, isTruncated, key, onClickTreeItem, onToggle, propagatedPL, plUnit = 26, text } = mergedProps, rest = __rest(mergedProps, ["activeItemId", "activeItemIndex", "children", "center", "centerH", "centerV", "className", "iconCollapse", "isCollapsed", "disabled", "iconExpand", "id", "items", "isActive", "isFirstLevel", "isTruncated", "key", "onClickTreeItem", "onToggle", "propagatedPL", "plUnit", "text"]);
     const styles = (0, core_1.useStyleConfig)('Tree', (0, context_1.useTreeContext)());
-    const _a = styles.item, { activeBg, h, hoverBg, p, px, py, selectedBg } = _a, itemStyles = __rest(_a, ["activeBg", "h", "hoverBg", "p", "px", "py", "selectedBg"]);
+    const _e = styles.item, { activeBg, bg, color, h, hoverBg, hoverColor, p, px, py, selectedBg } = _e, itemStyles = __rest(_e, ["activeBg", "bg", "color", "h", "hoverBg", "hoverColor", "p", "px", "py", "selectedBg"]);
     const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
+    const innerBoxPl = propagatedPL || 0;
+    const innerListPl = innerBoxPl + (plUnit || 0);
     (0, react_1.useEffect)(() => {
         setIsCollapsedInternal(!!isCollapsed);
     }, [isCollapsed]);
@@ -85,46 +82,70 @@ exports.TreeItem = (0, core_1.vui)((props, ref) => {
         // Avoids triggering parent's onClick
         e.stopPropagation();
     };
-    const interactiveProps = !disabled
-        ? {
-            cursor: 'pointer',
-            focusVisibleRing: 2,
-            hoverBg: 'transparent',
-            activeBg: 'transparent',
-            userSelect: 'none'
-        }
-        : {};
     const hoverTreeItem = (e, type) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         const target = e.target;
+        let parentDiv = undefined;
         if (target.classList.contains('vui-treeItem-permanent')) {
-            target.style.backgroundColor = type === 'over' ? '#e2f1ff' : 'transparent';
-            e.stopPropagation();
+            parentDiv = target;
+        }
+        else {
+            const parentLi = target.closest('.vui-treeItem');
+            parentDiv = parentLi === null || parentLi === void 0 ? void 0 : parentLi.getElementsByClassName('vui-treeItem-permanent')[0];
+        }
+        const isDivActive = parentDiv.classList.contains('vui-treeItem-active') ? true : false;
+        // translate the list-item style over to the div
+        if (parentDiv.classList.contains('vui-treeItem-permanent')) {
+            // is it a fist level item?
+            if (parentDiv.classList.contains('vui-treeItem-firstLevel')) {
+                if (type === 'over') {
+                    parentDiv.style.backgroundColor = (0, utils_1.vuiColorToRGBA)(((_a = styles === null || styles === void 0 ? void 0 : styles.firstLevelItem) === null || _a === void 0 ? void 0 : _a.hoverBg) || 'transparent');
+                }
+                if (type === 'out') {
+                    parentDiv.style.backgroundColor = isDivActive
+                        ? (0, utils_1.vuiColorToRGBA)(((_b = styles === null || styles === void 0 ? void 0 : styles.firstLevelItem) === null || _b === void 0 ? void 0 : _b.activeBg) || 'transparent')
+                        : (0, utils_1.vuiColorToRGBA)(((_c = styles === null || styles === void 0 ? void 0 : styles.firstLevelItem) === null || _c === void 0 ? void 0 : _c.bg) || 'transparent');
+                }
+            }
+            else {
+                // it is NOT first level
+                if (type === 'over') {
+                    parentDiv.style.backgroundColor = (0, utils_1.vuiColorToRGBA)(((_d = styles === null || styles === void 0 ? void 0 : styles.item) === null || _d === void 0 ? void 0 : _d.hoverBg) || 'transparent');
+                }
+                if (type === 'out') {
+                    parentDiv.style.backgroundColor = isDivActive
+                        ? (0, utils_1.vuiColorToRGBA)(((_e = styles === null || styles === void 0 ? void 0 : styles.item) === null || _e === void 0 ? void 0 : _e.activeBg) || 'transparent')
+                        : (0, utils_1.vuiColorToRGBA)(((_f = styles === null || styles === void 0 ? void 0 : styles.item) === null || _f === void 0 ? void 0 : _f.bg) || 'transparent');
+                }
+            }
         }
         else {
             e.preventDefault();
-            const permanent = (_a = target
-                .closest('.vui-treeItem')) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('vui-treeItem-permanent')[0];
-            const collapsible = (_b = target
-                .closest('.vui-treeItem')) === null || _b === void 0 ? void 0 : _b.getElementsByClassName('vui-treeItem-collapsible')[0];
-            const active = (_c = target.closest('.vui-treeItem')) === null || _c === void 0 ? void 0 : _c.getElementsByClassName('vui-treeItem-active')[0];
-            permanent ? (permanent.style.backgroundColor = type === 'over' ? '#e2f1ff' : 'transparent') : null;
-            collapsible ? (collapsible.style.backgroundColor = 'transparent') : null;
-            active ? (active.style.backgroundColor = 'hsl(139, 100%, 90%)') : null;
         }
+        e.stopPropagation();
     };
     const isCollapsable = ((0, utils_1.isArray)(children) && children.length > 0) || ((0, utils_1.isArray)(items) && items.length > 0);
     const isActiveInternal = (!activeItemIndex && isActive) || activeItemIndex === id;
-    return (react_1.default.createElement(exports.TreeItemBase, Object.assign({ alignItems: "start", className: (0, utils_1.cs)('vui-treeItem', className), h: collapsedInternal ? h : isCollapsable ? 'auto' : h, id: id, m: 0, onClick: !disabled ? (e) => toggle(e) : undefined, onMouseOut: !disabled ? (e) => hoverTreeItem(e, 'out') : undefined, onMouseOver: !disabled ? (e) => hoverTreeItem(e, 'over') : undefined, p: 0, ref: ref, w: 1 }, itemStyles, interactiveProps, rest, { hoverBg: "transparent" }),
-        react_1.default.createElement(box_1.Box, { flexDirection: "column", hoverBg: "transparent", m: 0, pl: 2, pr: 0, py: py, w: 1 },
-            react_1.default.createElement(box_1.Box, { alignItems: "center", bg: isActiveInternal ? 'hsl(139, 100%, 90%)' : 'transparent', className: isActiveInternal ? 'vui-treeItem-active' : 'vui-treeItem-permanent', flexDirection: "row", hoverBg: "transparent", m: 0, p: 0, w: 1 },
-                items && (items === null || items === void 0 ? void 0 : items.length) > 0 && (react_1.default.createElement(react_1.default.Fragment, null, collapsedInternal ? react_1.default.createElement(treeIcon_1.default, { mr: 1, name: iconExpand }) : react_1.default.createElement(treeIcon_1.default, { mr: 1, name: iconCollapse }))),
-                (items === null || items === void 0 ? void 0 : items.length) === 0 && react_1.default.createElement(treeIcon_1.default, { mr: 1, name: "cusDotFullAlt" }),
-                (0, utils_1.isReactText)(text) ? react_1.default.createElement(treeText_1.default, Object.assign({}, { isTruncated, text })) : text),
-            isCollapsable && !collapsedInternal && (react_1.default.createElement(box_1.Box, { className: "vui-treeItem-collapsible", flexDirection: "column", hoverBg: "transparent", m: 0, p: 0, w: 1 }, children !== null && children !== void 0 ? children : ((0, utils_1.isArray)(items)
+    let textMl = items && (items === null || items === void 0 ? void 0 : items.length) > 0 ? 0 : 1.5;
+    if (!isCollapsable) {
+        textMl += 3.8;
+    }
+    // hoverBg cannot be styled directly from theme, it has to be JS manipulated because of event propagation
+    return (react_1.default.createElement(exports.TreeItemBase, Object.assign({ className: (0, utils_1.cs)('vui-treeItem', isFirstLevel ? 'vui-treeItem-firstLevel' : '', className), color: isFirstLevel ? (_a = styles === null || styles === void 0 ? void 0 : styles.firstLevelItem) === null || _a === void 0 ? void 0 : _a.color : color, h: collapsedInternal ? h : isCollapsable ? 'auto' : h, id: id.toString(), m: 0, onClick: !disabled ? (e) => toggle(e) : undefined, onMouseOut: !disabled ? (e) => hoverTreeItem(e, 'out') : undefined, onMouseOver: !disabled ? (e) => hoverTreeItem(e, 'over') : undefined, p: 0, propagatedPL: propagatedPL, ref: ref, w: 1 }, itemStyles, { bg: isFirstLevel
+            ? isActiveInternal
+                ? (_b = styles === null || styles === void 0 ? void 0 : styles.firstLevelItem) === null || _b === void 0 ? void 0 : _b.activeBg
+                : (_c = styles === null || styles === void 0 ? void 0 : styles.firstLevelItem) === null || _c === void 0 ? void 0 : _c.bg
+            : isActiveInternal
+                ? (_d = styles === null || styles === void 0 ? void 0 : styles.item) === null || _d === void 0 ? void 0 : _d.activeBg
+                : bg, hoverBg: undefined }, rest),
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(box_1.Box, { centerV: true, className: (0, utils_1.cs)('vui-treeItem-permanent', isActiveInternal ? 'vui-treeItem-active' : '', isFirstLevel ? 'vui-treeItem-firstLevel' : ''), fontWeight: isActiveInternal ? '600' : '500', pl: `${innerBoxPl}px` },
+                items && (items === null || items === void 0 ? void 0 : items.length) > 0 && (react_1.default.createElement(react_1.default.Fragment, null, collapsedInternal ? react_1.default.createElement(treeIcon_1.default, { mx: 1.5, name: iconExpand }) : react_1.default.createElement(treeIcon_1.default, { mx: 1.5, name: iconCollapse }))),
+                (0, utils_1.isReactText)(text) ? react_1.default.createElement(treeText_1.default, Object.assign({ ml: textMl }, { isTruncated, text })) : text),
+            isCollapsable && !collapsedInternal && (react_1.default.createElement(list_1.List, { w: 1 }, children !== null && children !== void 0 ? children : ((0, utils_1.isArray)(items)
                 ? items.map((_a, index) => {
-                    var { key } = _a, props = __rest(_a, ["key"]);
-                    return (react_1.default.createElement(exports.TreeItem, Object.assign({ activeItemIndex: activeItemIndex, iconCollapse: iconCollapse, iconExpand: iconExpand, key: key !== null && key !== void 0 ? key : index, onClickTreeItem: onClickTreeItem }, props)));
+                    var { key, propagatedPL } = _a, props = __rest(_a, ["key", "propagatedPL"]);
+                    return (react_1.default.createElement(exports.TreeItem, Object.assign({ activeItemIndex: activeItemIndex, iconCollapse: iconCollapse, iconExpand: iconExpand, key: key !== null && key !== void 0 ? key : index, onClickTreeItem: onClickTreeItem, propagatedPL: innerListPl }, props)));
                 })
                 : items))))));
 });

package/dist/cjs/tutorial/tutorialCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAG3F,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,iBAAiB,eAqHnB"}
+{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAG3F,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,iBAAiB,eAuHnB"}

package/dist/cjs/tutorial/tutorialCard.js

@@ -60,7 +60,8 @@ function TutorialCard({ actionLabel = 'Action', className, title, readMoreLink,
                 showSkipButton && !isFinalStep && (react_1.default.createElement(index_1.Button, { mr: 2, onClick: onDismiss, variant: "primaryLight" }, "Skip")),
                 isFinalStep && (react_1.default.createElement(index_1.Button, { mr: 2, onClick: onFinish, variant: "primaryLight" }, "Finish")),
                 !!onAction && (react_1.default.createElement(index_1.Button, { mr: 6, onClick: onAction, variant: "primaryLight" },
-                    actionLabel,
-                    onAction)))))));
+                    react_1.default.createElement(react_1.default.Fragment, null,
+                        actionLabel,
+                        onAction))))))));
 }
 exports.TutorialCard = TutorialCard;

package/dist/cjs/utils/styles.d.ts

@@ -7,10 +7,9 @@ export declare function parseHSL(color: string): {
     s: number;
     l: number;
 };
-/** Builds RGBA string. */
-export declare const buildRGBA: (r: number, g: number, b: number, alpha?: number) => string;
 /** Converts hex color value to rgb with optional alpha property. */
 export declare function hexToRGBA(hex: string, alpha?: number): string;
+export declare function vuiColorToRGBA(color: string, alpha?: number): string;
 /** Converts hsl color value to rgb with optional alpha property. */
 export declare function HSLToRGBA(h: number, s: number, l: number, alpha?: number): string;
 /** Styling to add ellipsis for long texts. */

package/dist/cjs/utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAElC,+EAA+E;AAC/E,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,EAAE,UAEtC;AAED,6BAA6B;AAC7B,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM;;;;EAIrC;AAED,0BAA0B;AAC1B,eAAO,MAAM,SAAS,MAAO,MAAM,KAAK,MAAM,KAAK,MAAM,UAAU,MAAM,WACW,CAAA;AAEpF,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAgBpD;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UA0CxE;AAED,8CAA8C;AAC9C,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAIlC,+EAA+E;AAC/E,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,EAAE,UAEtC;AAED,6BAA6B;AAC7B,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM;;;;EAIrC;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAgBpD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAS3D;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UA0CxE;AAED,8CAA8C;AAC9C,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAA"}

package/dist/cjs/utils/styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ellipsisOverflow = exports.HSLToRGBA = exports.hexToRGBA = exports.buildRGBA = exports.parseHSL = exports.cs = void 0;
+exports.ellipsisOverflow = exports.HSLToRGBA = exports.vuiColorToRGBA = exports.hexToRGBA = exports.parseHSL = exports.cs = void 0;
+const theme_1 = require("../theme");
 /** Concatenates individual className arguments and returns a single string. */
 function cs(...classNames) {
     return classNames.filter(Boolean).join(' ');
@@ -14,9 +15,6 @@ function parseHSL(color) {
     return { h: Number(res === null || res === void 0 ? void 0 : res[0]) || 0, s: Number(res === null || res === void 0 ? void 0 : res[1]) || 0, l: Number(res === null || res === void 0 ? void 0 : res[2]) || 0 };
 }
 exports.parseHSL = parseHSL;
-/** Builds RGBA string. */
-const buildRGBA = (r, g, b, alpha) => alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
-exports.buildRGBA = buildRGBA;
 /** Converts hex color value to rgb with optional alpha property. */
 function hexToRGBA(hex, alpha) {
     let hexStr = hex;
@@ -30,9 +28,19 @@ function hexToRGBA(hex, alpha) {
     const r = parseInt(hexStr.slice(0, 2), 16);
     const g = parseInt(hexStr.slice(2, 4), 16);
     const b = parseInt(hexStr.slice(4, 6), 16);
-    return (0, exports.buildRGBA)(r, g, b, alpha);
+    return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
 }
 exports.hexToRGBA = hexToRGBA;
+function vuiColorToRGBA(color, alpha) {
+    if (!color.includes('.'))
+        return 'transparent';
+    const [colorName, shade] = color.split('.');
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const x = parseHSL(theme_1.colors[colorName][shade]);
+    return HSLToRGBA(x.h, x.s, x.l, alpha || shade === 'main' ? 1 : parseInt(shade));
+}
+exports.vuiColorToRGBA = vuiColorToRGBA;
 /** Converts hsl color value to rgb with optional alpha property. */
 function HSLToRGBA(h, s, l, alpha) {
     s /= 100;
@@ -72,7 +80,7 @@ function HSLToRGBA(h, s, l, alpha) {
     r = Math.round((r + m) * 255);
     g = Math.round((g + m) * 255);
     b = Math.round((b + m) * 255);
-    return (0, exports.buildRGBA)(r, g, b, alpha);
+    return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
 }
 exports.HSLToRGBA = HSLToRGBA;
 /** Styling to add ellipsis for long texts. */

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAI/C,eAAO,MAAM,eAAe,+HAI3B,CAAA;AAED,8KAA8K;AAC9K,eAAO,MAAM,WAAW;UAmBhB,sBAAsB;CAC7B,CAAA;AAID,eAAe,WAAW,CAAA"}
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAI/C,eAAO,MAAM,eAAe,+HAQ3B,CAAA;AAED,8KAA8K;AAC9K,eAAO,MAAM,WAAW;UA0BhB,sBAAsB;CAC7B,CAAA;AAID,eAAe,WAAW,CAAA"}

package/dist/esm/breadcrumbs/breadcrumbs.js

@@ -8,16 +8,20 @@ export const BreadcrumbsBase = styled.divBox `
   display: flex;
   min-width: 0;
   transition-duration: normal;
+
+  .vui-breadcrumbs-item:last-of-type {
+    font-weight: 600;
+  }
 `;
 /** Breadcrumbs consist of a list of items that help a user visualize a page's location within the hierarchical structure of a website, and allow correspondent navigation. */
 export const Breadcrumbs = vui((props, ref) => {
-    const { children, className, size, ...rest } = props;
+    const { children, className, size, variant, ...rest } = props;
     const styles = useStyleConfig('Breadcrumbs', props);
-    const context = useMemo(() => filterUndefined({ size }), [size]);
+    const context = useMemo(() => filterUndefined({ size, variant }), [size, variant]);
     const aliasedProps = filterUndefined({});
     const arrayChildren = Children.toArray(children);
     return (React.createElement(BreadcrumbsProvider, { value: context },
-        React.createElement(BreadcrumbsBase, { className: cs('vui-breadcrumbs', className), ref: ref, ...styles, ...aliasedProps, ...rest }, Children.map(arrayChildren, (child, key) => (React.createElement(Fragment, { key: key },
+        React.createElement(BreadcrumbsBase, { className: cs('vui-breadcrumbs', className), ref: ref, ...styles.main, ...aliasedProps, ...rest }, Children.map(arrayChildren, (child, key) => (React.createElement(Fragment, { key: key },
             child,
             key !== arrayChildren.length - 1 && React.createElement(BreadcrumbsSeparator, null)))))));
 });

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

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { BoxProps } from '../box';
-import { IconProp } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export declare type BreadcrumbsProps = SystemProps & ThemingProps<'Breadcrumbs'>;
@@ -9,8 +8,6 @@ export declare type BreadcrumbsItemProps = BoxProps & {
     className?: string;
     /** Content */
     children?: ReactNode;
-    /** Icon */
-    icon?: IconProp;
 };
 export declare type BreadcrumbsSeparatorProps = BoxProps & {
     /** Custom class name */

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.types.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,WAAW,GAAG,YAAY,CAAC,aAAa,CAAC,CAAA;AAExE,oBAAY,oBAAoB,GAAG,QAAQ,GAAG;IAC5C,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,WAAW;IACX,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAED,oBAAY,yBAAyB,GAAG,QAAQ,GAAG;IACjD,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA"}
+{"version":3,"file":"breadcrumbs.types.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,WAAW,GAAG,YAAY,CAAC,aAAa,CAAC,CAAA;AAExE,oBAAY,oBAAoB,GAAG,QAAQ,GAAG;IAC5C,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,oBAAY,yBAAyB,GAAG,QAAQ,GAAG;IACjD,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA"}

package/dist/esm/breadcrumbs/breadcrumbsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAG7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAG1D,yBAAyB;AACzB,eAAO,MAAM,eAAe,2CAmBmB,CAAA;AAE/C,eAAe,eAAe,CAAA"}
+{"version":3,"file":"breadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAE7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAG1D,yBAAyB;AACzB,eAAO,MAAM,eAAe,2CAemB,CAAA;AAE/C,eAAe,eAAe,CAAA"}

package/dist/esm/breadcrumbs/breadcrumbsItem.js

@@ -1,16 +1,12 @@
 import React from 'react';
 import { Box } from '../box';
 import { omitThemingProps, useStyleConfig, vui } from '../core';
-import { Icon } from '../icon';
 import { cs } from '../utils';
 import { useBreadcrumbsContext } from './context';
 /** A Breadcrumb item. */
 export const BreadcrumbsItem = vui((props, ref) => {
-    const { className, children, icon, ...rest } = omitThemingProps(props);
+    const { className, children, ...rest } = omitThemingProps(props);
     const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext());
-    const color = rest.color || 'darkBlue.main';
-    return (React.createElement(Box, { alignItems: "center", className: cs('vui-breadcrumbs-item', className), color: color, p: 0, ref: ref, ...rest, ...styles.item },
-        !!icon && React.createElement(Icon, { name: icon, pathFill: color, size: "sm" }),
-        children));
+    return (React.createElement(Box, { alignItems: "center", className: cs('vui-breadcrumbs-item', className), p: 0, ref: ref, ...styles.item, ...rest }, children));
 });
 export default BreadcrumbsItem;

package/dist/esm/breadcrumbs/breadcrumbsSeparator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbsSeparator.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsSeparator.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAA;AAE/D,6BAA6B;AAC7B,eAAO,MAAM,oBAAoB,8CAA+C,yBAAyB,gBAIxG,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"breadcrumbsSeparator.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsSeparator.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAA;AAG/D,6BAA6B;AAC7B,eAAO,MAAM,oBAAoB,8CAA+C,yBAAyB,gBAQxG,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/dist/esm/breadcrumbs/breadcrumbsSeparator.js

@@ -1,7 +1,12 @@
 import React from 'react';
 import { Box } from '../box';
+import { useStyleConfig } from '../core';
 import { Icon } from '../icon';
 import { cs } from '../utils';
+import { useBreadcrumbsContext } from './context';
 /** Breadcrumbs separator. */
-export const BreadcrumbsSeparator = ({ className, children, content, ...rest }) => (React.createElement(Box, { alignItems: "center", className: cs('vui-breadcrumbs-separator', className), p: 0, ...rest }, content || children || React.createElement(Icon, { name: "falAngleRight", pathFill: "darkBlue.main" })));
+export const BreadcrumbsSeparator = ({ className, children, content, ...rest }) => {
+    const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext());
+    return (React.createElement(Box, { alignItems: "center", className: cs('vui-breadcrumbs-separator', className), p: 0, ...rest }, content || children || React.createElement(Icon, { name: "falAngleRight", ...styles.separator })));
+};
 export default BreadcrumbsSeparator;

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

@@ -2,19 +2,81 @@ declare const _default: {
     baseStyle: {};
     defaultProps: {
         size: string;
+        variant: string;
     };
     sizes: {
+        xs: {
+            item: {
+                fontSize: number;
+                lineHeight: string;
+            };
+            separator: {
+                size: string;
+            };
+        };
         sm: {
-            item: {};
+            item: {
+                fontSize: number;
+                lineHeight: string;
+            };
+            separator: {
+                size: string;
+            };
         };
         md: {
-            item: {};
+            item: {
+                fontSize: number;
+                lineHeight: string;
+            };
+            separator: {
+                size: string;
+            };
         };
         lg: {
-            item: {};
+            item: {
+                fontSize: number;
+                lineHeight: string;
+            };
+            separator: {
+                size: string;
+            };
+        };
+    };
+    variants: {
+        dark: {
+            item: {
+                color: string;
+            };
+            main: {
+                bg: string;
+            };
+            separator: {
+                pathFill: string;
+            };
+        };
+        white: {
+            item: {
+                color: string;
+            };
+            main: {
+                bg: string;
+            };
+            separator: {
+                pathFill: string;
+            };
+        };
+        light: {
+            item: {
+                color: string;
+            };
+            main: {
+                bg: string;
+            };
+            separator: {
+                pathFill: string;
+            };
         };
     };
-    variants: {};
 };
 export default _default;
 //# sourceMappingURL=theme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAoBA,wBAKC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA,wBAKC"}

package/dist/esm/breadcrumbs/theme.js

@@ -1,19 +1,75 @@
 const baseStyle = {};
 const defaultProps = {
-    size: 'md'
+    size: 'md',
+    variant: 'dark'
 };
 const sizes = {
+    xs: {
+        item: {
+            fontSize: 12,
+            lineHeight: '18px'
+        },
+        separator: {
+            size: 'xs'
+        }
+    },
     sm: {
-        item: {}
+        item: {
+            fontSize: 14,
+            lineHeight: '22px'
+        },
+        separator: {
+            size: 'sm'
+        }
     },
     md: {
-        item: {}
+        item: { fontSize: 16, lineHeight: '26px' },
+        separator: {
+            size: 'md'
+        }
     },
     lg: {
-        item: {}
+        item: { fontSize: 18, lineHeight: '32px' },
+        separator: {
+            size: 'lg'
+        }
+    }
+};
+const variants = {
+    dark: {
+        item: {
+            color: 'seaBlue.main'
+        },
+        main: {
+            bg: 'transparent'
+        },
+        separator: {
+            pathFill: 'sandstone.10'
+        }
+    },
+    white: {
+        item: {
+            color: 'white'
+        },
+        main: {
+            bg: 'darkBlue.main'
+        },
+        separator: {
+            pathFill: 'white'
+        }
+    },
+    light: {
+        item: {
+            color: 'digiGreen.main'
+        },
+        main: {
+            bg: 'darkBlue.main'
+        },
+        separator: {
+            pathFill: 'white'
+        }
     }
 };
-const variants = {};
 export default {
     baseStyle,
     defaultProps,

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

@@ -1 +1 @@
-{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/footer/footer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwC,YAAY,EAAE,MAAM,SAAS,CAAA;AAM5E,OAAO,EAAkB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAK3C,eAAO,MAAM,UAAU,+HAItB,CAAA;AAGD,oGAAoG;AACpG,eAAO,MAAM,MAAM;YAqGT,mBAAmB;aAClB,oBAAoB;aACpB,oBAAoB;UACvB,iBAAiB;SAClB,gBAAgB;aACZ,oBAAoB;CAC9B,CAAA;AASD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/footer/footer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwC,YAAY,EAAE,MAAM,SAAS,CAAA;AAM5E,OAAO,EAAkB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAK3C,eAAO,MAAM,UAAU,+HAItB,CAAA;AAGD,oGAAoG;AACpG,eAAO,MAAM,MAAM;YAuKT,mBAAmB;aAClB,oBAAoB;aACpB,oBAAoB;UACvB,iBAAiB;SAClB,gBAAgB;aACZ,oBAAoB;CAC9B,CAAA;AASD,eAAe,MAAM,CAAA"}

package/dist/esm/footer/footer.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Box } from '../box';
 import { styled, useDown, useStyleConfig, vui } from '../core';
 import { Divider } from '../divider';
 import { Link } from '../link';
@@ -22,9 +23,14 @@ export const FooterBase = styled.divBox `
 /*@formatter:on*/
 /** Branded Veracity Footer with trademark and links sections. Controls max-width of the content. */
 export const Footer = vui((props, ref) => {
-    const { children, className, columns, linkedIn, size, variant, isSlim, ...rest } = props;
+    const { applicationLinks, applicationStaticItems = [], children, className, columns, isApplication = false, linkedIn, size, variant, isSlim, ...rest } = props;
     const context = { size, variant };
     const styles = useStyleConfig('Footer', props);
+    if (isApplication) {
+        if (!applicationLinks) {
+            console.error('Footer: isApplication is true but applicationLinks is not set.');
+        }
+    }
     const slimLinks = [
         {
             id: 'home',
@@ -46,8 +52,19 @@ export const Footer = vui((props, ref) => {
     const downMd = useDown('md');
     const downLg = useDown('lg');
     return (React.createElement(FooterProvider, { value: context },
-        React.createElement(FooterBase, { className: cs('vui-footer', className), py: isSlim ? (downMd ? '16px' : '9px') : 5, ...styles.container, ref: ref, ...rest },
-            isSlim && (React.createElement(FooterContent, { alignContent: "center", alignItems: "center", maxW: { xs: 343, sm: 305, md: 720, lg: 975 } },
+        React.createElement(FooterBase, { className: cs('vui-footer', isApplication ? 'vui-footer-app' : '', className), px: isApplication ? '40px' : 3, py: isSlim ? (downMd ? '16px' : '9px') : 5, ...styles.container, ref: ref, ...rest },
+            isApplication && (React.createElement(FooterContent, { alignContent: "center", alignItems: "center", maxW: "100%" },
+                React.createElement(FooterRow, { alignContent: "space-between", w: 1 },
+                    React.createElement(Box, { alignItems: "self-start", columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true }, applicationLinks?.map((link, index) => (React.createElement(Box, { flex: { xs: '0 0 50%', sm: '0 0 auto' }, key: index, minW: 70 },
+                        React.createElement(FooterLink, { ...link }))))),
+                    downLg && React.createElement(Divider, { borderColor: "sandstone.main", mb: 0.5, mt: 1, w: 1 }),
+                    React.createElement(Box, { centerV: true, columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, justifyContent: { sm: 'center', lg: 'flex-end' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true },
+                        applicationStaticItems?.map((text, index) => (React.createElement(Box, { key: index },
+                            React.createElement(T, { size: "sm" }, text)))),
+                        React.createElement(Box, null,
+                            React.createElement(Link, { fontWeight: "demi", href: linkedIn ?? defaultLinkedInUrl, iconLeft: React.createElement(Link.Icon, { mr: 1, name: "cubCircleLinkedIn", radius: "50%", size: "xs" }), isExternal: true, size: { _: 'sm', md: 'md' }, ...styles.link },
+                                React.createElement(FooterHeading, { fontSize: "16px", mb: 0, text: "Follow us" }))))))),
+            !isApplication && isSlim && (React.createElement(FooterContent, { alignContent: "center", alignItems: "center", maxW: { xs: 343, sm: 305, md: 720, lg: 975 } },
                 React.createElement(FooterRow, null,
                     slimLinks.map((link, index) => {
                         /** if the screen is small drop one specific link */
@@ -64,7 +81,7 @@ export const Footer = vui((props, ref) => {
                     React.createElement(FooterSlimColumn, null,
                         React.createElement(Link, { fontWeight: "demi", href: linkedIn ?? defaultLinkedInUrl, iconLeft: React.createElement(Link.Icon, { mr: 1, name: "cubCircleLinkedIn", radius: "50%", size: "xs" }), isExternal: true, size: { _: 'sm', md: 'md' }, ...styles.link },
                             React.createElement(FooterHeading, { fontSize: "16px", mb: 0, text: "Follow us" })))))),
-            !isSlim && (React.createElement(FooterContent, null,
+            !isApplication && !isSlim && (React.createElement(FooterContent, null,
                 children ??
                     (columns && (React.createElement(FooterRow, null, columns.map((sections, index) => (React.createElement(FooterColumn, { key: index, sections: sections })))))),
                 children || columns ? React.createElement(Divider, { borderColor: "sandstone.main", my: 4 }) : null,

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

@@ -16,8 +16,11 @@ export declare type FooterLinkData = {
     url: string;
 };
 export declare type FooterProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Footer'> & Pick<FooterTrademarkProps, 'linkedIn'> & {
+    applicationLinks?: FooterLinkData[];
+    applicationStaticItems?: string[];
     /** Data defining content of multiple columns. */
     columns?: FooterColumnData[];
+    isApplication?: boolean;
     isSlim?: boolean;
 };
 /** Section consists of multiple links with text (label) and url */

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

@@ -1 +1 @@
-{"version":3,"file":"footer.types.d.ts","sourceRoot":"","sources":["../../../src/footer/footer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,yEAAyE;AACzE,oBAAY,gBAAgB,GAAG,iBAAiB,EAAE,CAAA;AAElD,oBAAY,iBAAiB,GAAG,QAAQ,GAAG;IACzC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,iBAAiB,EAAE,CAAA;CAC/B,CAAA;AAED,oBAAY,kBAAkB,GAAG,QAAQ,CAAA;AAEzC,oBAAY,aAAa,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;AAEjE,oDAAoD;AACpD,oBAAY,cAAc,GAAG;IAC3B,kEAAkE;IAClE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,oBAAY,WAAW,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,GAC1D,YAAY,CAAC,QAAQ,CAAC,GACtB,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,GAAG;IACvC,iDAAiD;IACjD,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAEH,mEAAmE;AACnE,oBAAY,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,cAAc,EAAE,CAAA;CACzB,CAAA;AAED,oBAAY,kBAAkB,GAAG,QAAQ,GAAG;IAC1C,kDAAkD;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,GAAG,GAAG,CAAC,OAAO,CAAA;IACpD,oDAAoD;IACpD,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,OAAO,CAAA;CACjD,CAAA;AAED,oBAAY,oBAAoB,GAAG,QAAQ,GAAG;IAC5C,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA"}
+{"version":3,"file":"footer.types.d.ts","sourceRoot":"","sources":["../../../src/footer/footer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,yEAAyE;AACzE,oBAAY,gBAAgB,GAAG,iBAAiB,EAAE,CAAA;AAElD,oBAAY,iBAAiB,GAAG,QAAQ,GAAG;IACzC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,iBAAiB,EAAE,CAAA;CAC/B,CAAA;AAED,oBAAY,kBAAkB,GAAG,QAAQ,CAAA;AAEzC,oBAAY,aAAa,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;AAEjE,oDAAoD;AACpD,oBAAY,cAAc,GAAG;IAC3B,kEAAkE;IAClE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,oBAAY,WAAW,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,GAC1D,YAAY,CAAC,QAAQ,CAAC,GACtB,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,GAAG;IACvC,gBAAgB,CAAC,EAAE,cAAc,EAAE,CAAA;IACnC,sBAAsB,CAAC,EAAE,MAAM,EAAE,CAAA;IACjC,iDAAiD;IACjD,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAEH,mEAAmE;AACnE,oBAAY,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,cAAc,EAAE,CAAA;CACzB,CAAA;AAED,oBAAY,kBAAkB,GAAG,QAAQ,GAAG;IAC1C,kDAAkD;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,GAAG,GAAG,CAAC,OAAO,CAAA;IACpD,oDAAoD;IACpD,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,OAAO,CAAA;CACjD,CAAA;AAED,oBAAY,oBAAoB,GAAG,QAAQ,GAAG;IAC5C,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA"}

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

@@ -15,11 +15,13 @@ import HeaderNotifications from './headerNotifications';
 import HeaderServices from './headerServices';
 import HeaderServicesMessage from './headerServicesMessage';
 import HeaderSignIn from './headerSignIn';
+import HeaderSupport from './headerSupport';
 export declare const HeaderBase: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
 /** Branded Veracity Header with logo, links, services, account and other data. Controls max-width of the content. */
 export declare const Header: VuiComponent<"header", HeaderProps> & {
     Account: typeof HeaderAccount;
     AccountUserInfo: typeof HeaderAccountUserInfo;
+    Support: typeof HeaderSupport;
     ApplicationName: typeof HeaderApplicationName;
     Content: typeof HeaderContent;
     CreateAccount: typeof HeaderCreateAccount;

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

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/header/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,YAAY,EAAE,MAAM,SAAS,CAAA;AAGpF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAGzC,eAAO,MAAM,UAAU,kIAMtB,CAAA;AAGD,qHAAqH;AACrH,eAAO,MAAM,MAAM;aA4CR,oBAAoB;qBACZ,4BAA4B;qBAC5B,4BAA4B;aACpC,oBAAoB;mBACd,0BAA0B;aAChC,oBAAoB;cACnB,qBAAqB;UACzB,iBAAiB;eACZ,sBAAsB;mBAClB,0BAA0B;kBAC3B,yBAAyB;mBACxB,0BAA0B;cAC/B,qBAAqB;qBACd,4BAA4B;YACrC,mBAAmB;CAC5B,CAAA;AAkBD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/header/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,YAAY,EAAE,MAAM,SAAS,CAAA;AAGpF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAG3C,eAAO,MAAM,UAAU,kIAMtB,CAAA;AAGD,qHAAqH;AACrH,eAAO,MAAM,MAAM;aA4CR,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;mBACd,0BAA0B;aAChC,oBAAoB;cACnB,qBAAqB;UACzB,iBAAiB;eACZ,sBAAsB;mBAClB,0BAA0B;kBAC3B,yBAAyB;mBACxB,0BAA0B;cAC/B,qBAAqB;qBACd,4BAA4B;YACrC,mBAAmB;CAC5B,CAAA;AAmBD,eAAe,MAAM,CAAA"}