@veracity/vui 1.9.1 → 2.0.0

package/dist/cjs/onedesign-tokens/dist/js/es6/rem/button.js

@@ -0,0 +1,88 @@
+"use strict";
+/**
+ * Do not edit directly
+ * Generated on Thu, 17 Feb 2022 11:35:15 GMT
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonTypeSecondaryFocusOutline = exports.buttonTypeSecondaryActiveTextColorLight = exports.buttonTypeSecondaryActiveTextColorDark = exports.buttonTypeSecondaryActiveBackgroundColorLight = exports.buttonTypeSecondaryActiveBackgroundColorDark = exports.buttonTypeSecondaryActiveBorderColorLight = exports.buttonTypeSecondaryActiveBorderColorDark = exports.buttonTypeSecondaryHoverTextColorLight = exports.buttonTypeSecondaryHoverTextColorDark = exports.buttonTypeSecondaryHoverBackgroundColorLight = exports.buttonTypeSecondaryHoverBackgroundColorDark = exports.buttonTypeSecondaryHoverBorderColorLight = exports.buttonTypeSecondaryHoverBorderColorDark = exports.buttonTypeSecondaryDefaultTextColorLight = exports.buttonTypeSecondaryDefaultTextColorDark = exports.buttonTypeSecondaryDefaultBackgroundColorLight = exports.buttonTypeSecondaryDefaultBackgroundColorDark = exports.buttonTypeSecondaryDefaultBorderColorLight = exports.buttonTypeSecondaryDefaultBorderColorDark = exports.buttonTypePrimaryFocusOutline = exports.buttonTypePrimaryActiveTextColorLight = exports.buttonTypePrimaryActiveTextColorDark = exports.buttonTypePrimaryActiveBackgroundColorLight = exports.buttonTypePrimaryActiveBackgroundColorDark = exports.buttonTypePrimaryActiveBorderColorLight = exports.buttonTypePrimaryActiveBorderColorDark = exports.buttonTypePrimaryHoverTextColorLight = exports.buttonTypePrimaryHoverTextColorDark = exports.buttonTypePrimaryHoverBackgroundColorLight = exports.buttonTypePrimaryHoverBackgroundColorDark = exports.buttonTypePrimaryHoverBorderColorLight = exports.buttonTypePrimaryHoverBorderColorDark = exports.buttonTypePrimaryDefaultTextColorLight = exports.buttonTypePrimaryDefaultTextColorDark = exports.buttonTypePrimaryDefaultBackgroundColorLight = exports.buttonTypePrimaryDefaultBackgroundColorDark = exports.buttonTypePrimaryDefaultBorderColorLight = exports.buttonTypePrimaryDefaultBorderColorDark = exports.buttonSizeDefaultPadding = exports.buttonSizeDefaultLineHeight = exports.buttonSizeDefaultFontSize = exports.buttonSizeSmallPadding = exports.buttonSizeSmallLineHeight = exports.buttonSizeSmallFontSize = exports.buttonSizeMediumPadding = exports.buttonSizeMediumLineHeight = exports.buttonSizeMediumFontSize = exports.buttonSizeLargePadding = exports.buttonSizeLargeLineHeight = exports.buttonSizeLargeFontSize = void 0;
+exports.buttonCursor = exports.buttonTransition = exports.buttonPadding = exports.buttonFontWeight = exports.buttonLineHeight = exports.buttonFontSize = exports.buttonFontFamily = exports.buttonBorderWidth = exports.buttonBorderStyle = exports.buttonDisabledOpacity = exports.buttonDisabledCursor = exports.buttonTypeTertiaryFocusOutline = exports.buttonTypeTertiaryActiveTextColorLight = exports.buttonTypeTertiaryActiveTextColorDark = exports.buttonTypeTertiaryActiveBackgroundColorLight = exports.buttonTypeTertiaryActiveBackgroundColorDark = exports.buttonTypeTertiaryActiveBorderColorLight = exports.buttonTypeTertiaryActiveBorderColorDark = exports.buttonTypeTertiaryHoverTextColorLight = exports.buttonTypeTertiaryHoverTextColorDark = exports.buttonTypeTertiaryHoverBackgroundColorLight = exports.buttonTypeTertiaryHoverBackgroundColorDark = exports.buttonTypeTertiaryHoverBorderColorLight = exports.buttonTypeTertiaryHoverBorderColorDark = exports.buttonTypeTertiaryDefaultTextColorLight = exports.buttonTypeTertiaryDefaultTextColorDark = exports.buttonTypeTertiaryDefaultBackgroundColorLight = exports.buttonTypeTertiaryDefaultBackgroundColorDark = exports.buttonTypeTertiaryDefaultBorderColorLight = exports.buttonTypeTertiaryDefaultBorderColorDark = void 0;
+exports.buttonSizeLargeFontSize = "1.125rem";
+exports.buttonSizeLargeLineHeight = "1.75rem";
+exports.buttonSizeLargePadding = "0.5rem 1rem";
+exports.buttonSizeMediumFontSize = "1rem";
+exports.buttonSizeMediumLineHeight = "1.5rem";
+exports.buttonSizeMediumPadding = "0.25rem calc(0.25rem * 3)";
+exports.buttonSizeSmallFontSize = "0.875rem";
+exports.buttonSizeSmallLineHeight = "1.25rem";
+exports.buttonSizeSmallPadding = "calc(0.25rem / 2) 0.5rem";
+exports.buttonSizeDefaultFontSize = "1rem";
+exports.buttonSizeDefaultLineHeight = "1.5rem";
+exports.buttonSizeDefaultPadding = "0.25rem calc(0.25rem * 3)";
+exports.buttonTypePrimaryDefaultBorderColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypePrimaryDefaultBorderColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypePrimaryDefaultBackgroundColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypePrimaryDefaultBackgroundColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypePrimaryDefaultTextColorDark = "hsla(40, 3%, 100%, 1)";
+exports.buttonTypePrimaryDefaultTextColorLight = "hsla(223, 67%, 18%, 1)";
+exports.buttonTypePrimaryHoverBorderColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypePrimaryHoverBorderColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypePrimaryHoverBackgroundColorDark = "hsla(218, 100%, 20%, 1)";
+exports.buttonTypePrimaryHoverBackgroundColorLight = "hsla(139, 100%, 70%, 1)";
+exports.buttonTypePrimaryHoverTextColorDark = "hsla(40, 3%, 100%, 1)";
+exports.buttonTypePrimaryHoverTextColorLight = "hsla(223, 67%, 18%, 1)";
+exports.buttonTypePrimaryActiveBorderColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypePrimaryActiveBorderColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypePrimaryActiveBackgroundColorDark = "hsla(218, 100%, 35%, 1)";
+exports.buttonTypePrimaryActiveBackgroundColorLight = "hsla(139, 100%, 85%, 1)";
+exports.buttonTypePrimaryActiveTextColorDark = "hsla(40, 3%, 100%, 1)";
+exports.buttonTypePrimaryActiveTextColorLight = "hsla(223, 67%, 18%, 1)";
+exports.buttonTypePrimaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+exports.buttonTypeSecondaryDefaultBorderColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeSecondaryDefaultBorderColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeSecondaryDefaultBackgroundColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeSecondaryDefaultBackgroundColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeSecondaryDefaultTextColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeSecondaryDefaultTextColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeSecondaryHoverBorderColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeSecondaryHoverBorderColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeSecondaryHoverBackgroundColorDark = "hsla(196, 74%, 90%, 1)";
+exports.buttonTypeSecondaryHoverBackgroundColorLight = "hsla(218, 100%, 25%, 1)";
+exports.buttonTypeSecondaryHoverTextColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeSecondaryHoverTextColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeSecondaryActiveBorderColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeSecondaryActiveBorderColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeSecondaryActiveBackgroundColorDark = "hsla(196, 74%, 95%, 1)";
+exports.buttonTypeSecondaryActiveBackgroundColorLight = "hsla(218, 100%, 35%, 1)";
+exports.buttonTypeSecondaryActiveTextColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeSecondaryActiveTextColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeSecondaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+exports.buttonTypeTertiaryDefaultBorderColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryDefaultBorderColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryDefaultBackgroundColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryDefaultBackgroundColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryDefaultTextColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeTertiaryDefaultTextColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeTertiaryHoverBorderColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryHoverBorderColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryHoverBackgroundColorDark = "hsla(196, 74%, 90%, 1)";
+exports.buttonTypeTertiaryHoverBackgroundColorLight = "hsla(218, 100%, 25%, 1)";
+exports.buttonTypeTertiaryHoverTextColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeTertiaryHoverTextColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeTertiaryActiveBorderColorDark = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryActiveBorderColorLight = "hsla(0, 0%, 0%, 0)";
+exports.buttonTypeTertiaryActiveBackgroundColorDark = "hsla(196, 74%, 95%, 1)";
+exports.buttonTypeTertiaryActiveBackgroundColorLight = "hsla(218, 100%, 35%, 1)";
+exports.buttonTypeTertiaryActiveTextColorDark = "hsla(218, 100%, 28%, 1)";
+exports.buttonTypeTertiaryActiveTextColorLight = "hsla(139, 100%, 78%, 1)";
+exports.buttonTypeTertiaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+exports.buttonDisabledCursor = "default";
+exports.buttonDisabledOpacity = "50%";
+exports.buttonBorderStyle = "solid";
+exports.buttonBorderWidth = "calc(0.125rem / 2)";
+exports.buttonFontFamily = "'Avenir Next', Arial, sans-serif";
+exports.buttonFontSize = "1rem";
+exports.buttonLineHeight = "1.5rem";
+exports.buttonFontWeight = "500";
+exports.buttonPadding = "calc(0.25rem * 1.5) calc(0.25rem * 3)";
+exports.buttonTransition = "all 0.15s ease-in-out";
+exports.buttonCursor = "pointer";

package/dist/cjs/p/theme.d.ts

@@ -16,14 +16,6 @@ declare const _default: {
             fontSize: string;
             lineHeight: string;
         };
-        xl: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        xxl: {
-            fontSize: string;
-            lineHeight: string;
-        };
     };
     variants: {};
 };

package/dist/cjs/p/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/p/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,wBAKC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/p/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBA,wBAKC"}

package/dist/cjs/p/theme.js

@@ -7,23 +7,15 @@ const defaultProps = {
 const sizes = {
     sm: {
         fontSize: 'sm',
-        lineHeight: '18px'
+        lineHeight: '22px'
     },
     md: {
         fontSize: 'md',
-        lineHeight: '24px'
+        lineHeight: '26px'
     },
     lg: {
         fontSize: 'lg',
-        lineHeight: '28px'
-    },
-    xl: {
-        fontSize: '20px',
-        lineHeight: '30px'
-    },
-    xxl: {
-        fontSize: '24px',
-        lineHeight: '36px'
+        lineHeight: '32px'
     }
 };
 const variants = {};

package/dist/cjs/progress/progress.js

@@ -54,6 +54,6 @@ exports.Progress = (0, core_1.vui)((props, ref) => {
         setWidth(w > 100 ? 100 : w);
     }, [value, max]);
     return (react_1.default.createElement(exports.ProgressBase, Object.assign({ className: (0, utils_1.cs)('vui-progress', className), ref: ref }, styles.container, rest, { bg: "grey.10", borderRadius: "sm", h: 1 }),
-        react_1.default.createElement(box_1.Box, { bg: "prussian.80", borderRadius: "sm", position: "relative", textAlign: "right", transition: "width 0.4s ease-in-out;", w: `${width}%` }, showPercentage && value >= minPercentageDisplay && (react_1.default.createElement(box_1.Box, Object.assign({}, styles.percentage, { position: "absolute", right: "0" }), `${width}%`)))));
+        react_1.default.createElement(box_1.Box, { bg: "seaBlue.28", borderRadius: "sm", position: "relative", textAlign: "right", transition: "width 0.4s ease-in-out;", w: `${width}%` }, showPercentage && value >= minPercentageDisplay && (react_1.default.createElement(box_1.Box, Object.assign({}, styles.percentage, { position: "absolute", right: "0" }), `${width}%`)))));
 });
 exports.default = exports.Progress;

package/dist/cjs/select/selectButton.js

@@ -61,7 +61,7 @@ exports.SelectButton = (0, core_1.vui)((props, ref) => {
         ? {
             activeBg: 'disabled.bg',
             bg: 'disabled.bg',
-            color: 'prussian.80',
+            color: 'darkBlue.18',
             cursor: 'auto',
             disabled: true,
             hoverBg: 'disabled.bg'

package/dist/cjs/sidemenu/sidemenu.js

@@ -78,7 +78,7 @@ exports.Sidemenu = (0, core_1.vui)((props, ref) => {
                 ? (_a = items === null || items === void 0 ? void 0 : items.map) === null || _a === void 0 ? void 0 : _a.call(items, (item, key) => react_1.default.createElement(sidemenuItem_1.default, Object.assign({ key: key }, item)))
                 : children),
             react_1.default.createElement(box_1.default, { borderTop: consts_1.border, className: "vui-sidemenu-bottom", w: "100%" },
-                react_1.default.createElement(button_1.default, { borderRadius: 0, onClick: toggle, variant: "text", w: "100%" },
+                react_1.default.createElement(button_1.default, { borderRadius: 0, onClick: toggle, variant: "tertiaryDark", w: "100%" },
                     react_1.default.createElement(icon_1.default, { name: icon, position: "absolute", right: iconRight }))))));
 });
 exports.Sidemenu.Top = sidemenuTop_1.default;

package/dist/cjs/sidemenu/sidemenuItem.js

@@ -61,9 +61,9 @@ exports.SidemenuItem = (0, core_1.vui)((props, ref) => {
         setDisplayChildren(!displayChildren);
     };
     return (react_1.default.createElement(box_1.default, { flexDirection: "column", ref: ref, w: "100%" },
-        react_1.default.createElement(button_1.default, Object.assign({ alignItems: "center", border: "none", borderLeft: "3px solid black", borderLeftColor: isActive ? 'blue.80' : 'transparent', borderRadius: 0, className: (0, utils_1.cs)('vui-sidemenu-item', className), h: "auto", justifyContent: "space-between", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(), p: 0, variant: "text", w: "100%" }, rest),
+        react_1.default.createElement(button_1.default, Object.assign({ alignItems: "center", border: "none", borderLeft: "3px solid black", borderLeftColor: isActive ? 'blue.80' : 'transparent', borderRadius: 0, className: (0, utils_1.cs)('vui-sidemenu-item', className), h: "auto", justifyContent: "space-between", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(), p: 0, variant: "tertiaryDark", w: "100%" }, rest),
             innerContent,
-            !!children && isExpandedInternal && (react_1.default.createElement(button_1.default, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "xs", variant: "text" }))),
+            !!children && isExpandedInternal && (react_1.default.createElement(button_1.default, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "sm", variant: "tertiaryDark" }))),
         !!children && displayChildren && (react_1.default.createElement(box_1.default, { flexDirection: "column", justifyContent: "start", w: "100%" }, children))));
 });
 exports.default = exports.SidemenuItem;

package/dist/cjs/t/theme.d.ts

@@ -17,7 +17,16 @@ declare const _default: {
             fontSize: string;
         };
     };
-    variants: {};
+    variants: {
+        label: {
+            fontSize: string;
+            fontWeight: string;
+        };
+        caption: {
+            fontSize: string;
+            fontWeight: string;
+        };
+    };
 };
 export default _default;
 //# sourceMappingURL=theme.d.ts.map

package/dist/cjs/t/theme.d.ts.map

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

package/dist/cjs/t/theme.js

@@ -18,7 +18,16 @@ const sizes = {
         fontSize: 'lg'
     }
 };
-const variants = {};
+const variants = {
+    label: {
+        fontSize: 'md',
+        fontWeight: 'demi'
+    },
+    caption: {
+        fontSize: 'sm',
+        fontWeight: 'medium'
+    }
+};
 exports.default = {
     baseStyle,
     defaultProps,

package/dist/cjs/table/tbody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tbody.d.ts","sourceRoot":"","sources":["../../../src/table/tbody.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS,iIAcrB,CAAA;AAED,0DAA0D;AAC1D,eAAO,MAAM,KAAK,mEAiBhB,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"tbody.d.ts","sourceRoot":"","sources":["../../../src/table/tbody.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS,iIAkBrB,CAAA;AAED,0DAA0D;AAC1D,eAAO,MAAM,KAAK,mEAiBhB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/cjs/table/tbody.js

@@ -34,6 +34,10 @@ exports.TbodyBase = core_1.styled.tbodyBox `
     &[data-variant='striped'][data-selected='false']:nth-of-type(odd):not(:hover) td {
       background-color: grey.10;
     }
+
+    &[data-variant='basic']:hover td {
+      background-color: transparent;
+    }
   }
 `;
 /** Displays Table body with built-in support for rows. */

package/dist/cjs/table/theme.d.ts

@@ -29,6 +29,11 @@ declare const _default: {
             };
         };
         striped: {};
+        basic: {
+            td: {
+                borderBottom: string;
+            };
+        };
     };
 };
 export default _default;

package/dist/cjs/table/theme.d.ts.map

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

package/dist/cjs/table/theme.js

@@ -29,7 +29,12 @@ const variants = {
             borderBottom: '1px solid grey.20'
         }
     },
-    striped: {}
+    striped: {},
+    basic: {
+        td: {
+            borderBottom: '1px solid grey.20'
+        }
+    }
 };
 exports.default = {
     baseStyle,

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

@@ -4,8 +4,8 @@ import { IconProp } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export declare type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn';
-export declare type TabsSize = 'md' | 'sm' | 'lg' | 'xl';
-export declare type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | undefined;
+export declare type TabsSize = 'md' | 'sm' | 'lg' | 'xl' | 'xxl';
+export declare type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | 'xl' | undefined;
 export declare type TabsProps = SystemProps & ThemingProps<'Tabs'> & ChildrenProp & {
     activeTabId?: number;
     showBorder?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,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,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,oBAAY,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAChD,oBAAY,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAElE,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,oBAAY,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAEH,oBAAY,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}
+{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,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,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,oBAAY,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,oBAAY,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,oBAAY,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAEH,oBAAY,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}

package/dist/cjs/tabs/tabsNavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAkB,cAAc,EAAE,MAAM,cAAc,CAAA;AAS7D,eAAO,MAAM,UAAU,uDA4CrB,CAAA;AAEF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAkB,cAAc,EAAE,MAAM,cAAc,CAAA;AAW7D,eAAO,MAAM,UAAU,uDA2DrB,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/cjs/tabs/tabsNavBar.js

@@ -10,20 +10,28 @@ const core_1 = require("../core");
 const icon_1 = require("../icon");
 const list_1 = require("../list");
 const utils_1 = require("../utils");
+const theme_1 = __importDefault(require("./theme"));
 const iconSizeMapper = {
     sm: 'xs',
     md: 'sm',
     lg: 'md',
-    xl: 'lg'
+    xl: 'lg',
+    xxl: 'xl'
 };
 exports.TabsNavBar = (0, core_1.vui)((props, ref) => {
-    var _a;
+    var _a, _b;
     const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props;
     const iconSize = (iconSizeMapper === null || iconSizeMapper === void 0 ? void 0 : iconSizeMapper[size]) || 'md';
-    return (react_1.default.createElement(list_1.List, { borderBottom: showBorder ? '1px solid grey.40' : 'none', className: (0, utils_1.cs)('vui-tabsNavBar'), display: "flex", isInteractive: true, ref: ref, size: size, w: 1 }, (_a = tabs === null || tabs === void 0 ? void 0 : tabs.map) === null || _a === void 0 ? void 0 : _a.call(tabs, tab => (react_1.default.createElement(list_1.ListItem, { className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab === null || tab === void 0 ? void 0 : tab.id}`, disabled: tab.disabled, display: "inline-flex", key: tab.id, onClick: () => onNavItemClick === null || onNavItemClick === void 0 ? void 0 : onNavItemClick(tab.id || 0), position: "relative" },
+    const { sizes } = (_a = theme_1.default) !== null && _a !== void 0 ? _a : {};
+    const fontSize = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.fontSize;
+    const h = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.h;
+    const borderWidth = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.borderWidth;
+    const py = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.py;
+    const iconMarginRight = size === 'xxl' ? '16px' : '8px';
+    return (react_1.default.createElement(list_1.List, { borderBottom: showBorder ? '1px solid sandstone.79' : 'none', className: (0, utils_1.cs)('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1 }, (_b = tabs === null || tabs === void 0 ? void 0 : tabs.map) === null || _b === void 0 ? void 0 : _b.call(tabs, tab => (react_1.default.createElement(list_1.ListItem, { activeBg: "skyBlue.90", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab === null || tab === void 0 ? void 0 : tab.id}`, color: "seaBlue.28", disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, h: h, hoverBg: "skyBlue.85", key: tab.id, onClick: () => onNavItemClick === null || onNavItemClick === void 0 ? void 0 : onNavItemClick(tab.id || 0), position: "relative", px: "16px", py: py },
         react_1.default.createElement(box_1.default, { alignItems: "center" },
-            !!tab.icon && react_1.default.createElement(icon_1.Icon, { mr: 1, name: tab.icon, size: iconSize }),
+            !!tab.icon && react_1.default.createElement(icon_1.Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }),
             tab.title),
-        !tab.disabled && tab.id === activeNavItem && (react_1.default.createElement(box_1.default, { animation: animationDirection, bg: "prussian.80", bottom: "-1px", h: `${size === 'sm' ? 2 : 4}px`, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
+        !tab.disabled && tab.id === activeNavItem && (react_1.default.createElement(box_1.default, { animation: animationDirection, bg: "seaBlue.28", bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
 });
 exports.default = exports.TabsNavBar;

package/dist/cjs/tabs/theme.d.ts

@@ -3,10 +3,46 @@ declare const _default: {
     defaultProps: {};
     parts: string[];
     sizes: {
-        sm: {};
-        md: {};
-        lg: {};
-        xl: {};
+        sm: {
+            tabsNavBar: {
+                borderWidth: string;
+                fontSize: string;
+                h: string;
+                py: string;
+            };
+        };
+        md: {
+            tabsNavBar: {
+                borderWidth: string;
+                fontSize: string;
+                h: string;
+                py: string;
+            };
+        };
+        lg: {
+            tabsNavBar: {
+                borderWidth: string;
+                fontSize: string;
+                h: number;
+                py: string;
+            };
+        };
+        xl: {
+            tabsNavBar: {
+                borderWidth: string;
+                fontSize: string;
+                h: number;
+                py: string;
+            };
+        };
+        xxl: {
+            tabsNavBar: {
+                borderWidth: string;
+                fontSize: string;
+                h: number;
+                py: string;
+            };
+        };
     };
     variants: {};
 };

package/dist/cjs/tabs/theme.d.ts.map

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

package/dist/cjs/tabs/theme.js

@@ -4,10 +4,47 @@ const baseStyle = {};
 const defaultProps = {};
 const parts = ['container', 'tabsNavBar', 'tab'];
 const sizes = {
-    sm: {},
-    md: {},
-    lg: {},
-    xl: {}
+    sm: {
+        tabsNavBar: {
+            borderWidth: '2px',
+            fontSize: 'xs',
+            h: '20px',
+            py: '4px'
+        }
+    },
+    md: {
+        tabsNavBar: {
+            borderWidth: '2px',
+            fontSize: 'sm',
+            // lineHeight: '20px',
+            h: '32px',
+            py: '6px'
+        }
+    },
+    lg: {
+        tabsNavBar: {
+            borderWidth: '3px',
+            fontSize: 'md',
+            h: 40,
+            py: '8px'
+        }
+    },
+    xl: {
+        tabsNavBar: {
+            borderWidth: '4px',
+            fontSize: 'lg',
+            h: 48,
+            py: '10px'
+        }
+    },
+    xxl: {
+        tabsNavBar: {
+            borderWidth: '4px',
+            fontSize: 'lg',
+            h: 56,
+            py: '12px'
+        }
+    }
 };
 const variants = {};
 exports.default = {

package/dist/cjs/tag/tag.js

@@ -47,7 +47,7 @@ const tagIcon_1 = __importDefault(require("./tagIcon"));
 const tagText_1 = __importDefault(require("./tagText"));
 exports.TagBase = core_1.styled.spanBox `
   align-items: center;
-  border-radius: md;
+  border-radius: xl;
   display: inline-flex;
   font-weight: medium;
   justify-content: center;
@@ -63,8 +63,8 @@ exports.TagBase = core_1.styled.spanBox `
   }
 
   &[aria-disabled='true'] {
-    background-color: disabled.bg;
-    color: disabled.color;
+    background-color: disabled .bg;
+    color: disabled .color;
     cursor: not-allowed;
     user-select: none;
   }
@@ -74,12 +74,15 @@ exports.TagBase = core_1.styled.spanBox `
  * Exposes some props to the children via context.
  */
 exports.Tag = (0, core_1.vui)((props, ref) => {
-    const { casing, children, className, colorScheme = 'blue', disabled, icon, iconLeft, iconRight, isFullWidth, isInteractive = props.onClick !== undefined, isRound, isTruncated = true, itemLeft, itemRight, onClick, onDelete, size = 'md', text, variant = 'subtle', weight } = props, rest = __rest(props, ["casing", "children", "className", "colorScheme", "disabled", "icon", "iconLeft", "iconRight", "isFullWidth", "isInteractive", "isRound", "isTruncated", "itemLeft", "itemRight", "onClick", "onDelete", "size", "text", "variant", "weight"]);
+    const { casing, children, className, disabled, icon, iconLeft, iconRight, isFullWidth, isInteractive = props.onClick !== undefined && props.onDelete === undefined, isRound, isTruncated = true, itemLeft, itemRight, onClick, onDelete, size = 'md', text, variant = 'subtleBlue', weight } = props, rest = __rest(props, ["casing", "children", "className", "disabled", "icon", "iconLeft", "iconRight", "isFullWidth", "isInteractive", "isRound", "isTruncated", "itemLeft", "itemRight", "onClick", "onDelete", "size", "text", "variant", "weight"]);
     const styles = (0, core_1.useStyleConfig)('Tag', props);
     const _a = styles.container, { activeBg, h, hoverBg, spaceX: spaceXBase = 0 } = _a, tagStyles = __rest(_a, ["activeBg", "h", "hoverBg", "spaceX"]);
-    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
+    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ disabled, size, variant }), [disabled, size, variant]);
     const spaceX = spaceXBase / 8;
-    const spaceXText = (spaceXBase + 4) / 8;
+    let spaceXText = (spaceXBase + 4) / 8;
+    if (size === 'xs') {
+        spaceXText = spaceXBase / 8;
+    }
     const pl = icon || itemLeft || iconLeft ? spaceX : spaceXText;
     const pr = icon || itemRight || iconRight ? spaceX : spaceXText;
     const interactiveProps = !disabled && isInteractive

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

@@ -2,10 +2,10 @@
 import { IconProp } from '../icon';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export declare type TagProps = SystemProps & ThemingProps<'Tag'> & {
+export declare type TagInnerProps = {
     /** Alias for textTransform prop. @deprecated */
     casing?: TypographyProps['textTransform'];
-    /** Available theme colors for this component. @default blue */
+    /** Available theme colors for this component. @deprecated */
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
     /** Displays tag and its content in disabled state with appropriate styling. */
     disabled?: boolean;
@@ -17,7 +17,7 @@ export declare type TagProps = SystemProps & ThemingProps<'Tag'> & {
     iconRight?: IconProp | JSX.Element;
     /** Makes the button take full width of the container. @deprecated */
     isFullWidth?: boolean;
-    /** Makes item clickable and focusable with appropriate styling. */
+    /** Makes item clickable and focusable with appropriate styling. The tag will be automatically interactive if the onClick is defined and onDelete is undefined */
     isInteractive?: boolean;
     /** Rounds the borders. @default false */
     isRound?: boolean;
@@ -32,4 +32,5 @@ export declare type TagProps = SystemProps & ThemingProps<'Tag'> & {
     /** Alias for fontWeight prop. @deprecated */
     weight?: TypographyProps['fontWeight'];
 };
+export declare type TagProps = SystemProps & ThemingProps<'Tag'> & TagInnerProps;
 //# sourceMappingURL=tag.types.d.ts.map

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,oBAAY,QAAQ,GAAG,WAAW,GAChC,YAAY,CAAC,KAAK,CAAC,GAAG;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAA;IACzC,+DAA+D;IAC/D,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,mEAAmE;IACnE,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"}
+{"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,oBAAY,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,oBAAY,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"tagButton.d.ts","sourceRoot":"","sources":["../../../src/tag/tagButton.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAK/C,wCAAwC;AACxC,eAAO,MAAM,SAAS,uDAoBpB,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"tagButton.d.ts","sourceRoot":"","sources":["../../../src/tag/tagButton.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAK/C,wCAAwC;AACxC,eAAO,MAAM,SAAS,uDAmBpB,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/cjs/tag/tagButton.js

@@ -25,6 +25,6 @@ exports.TagButton = (0, core_1.vui)((props, ref) => {
     const { className } = props, rest = __rest(props, ["className"]);
     const mergedProps = Object.assign(Object.assign({}, (0, context_1.useTagContext)()), props);
     const styles = (0, core_1.useStyleConfig)('Tag', (0, context_1.useTagContext)());
-    return (react_1.default.createElement(button_1.default, Object.assign({ borderColor: "transparent", className: (0, utils_1.cs)('vui-tagButton', className), colorScheme: mergedProps.colorScheme, disabled: mergedProps.disabled, hoverBorderColor: "transparent", icon: "falTimes", mr: -0.5, ref: ref, variant: "text" }, styles.button, rest)));
+    return (react_1.default.createElement(button_1.default, Object.assign({ borderColor: "transparent", className: (0, utils_1.cs)('vui-tagButton', className), disabled: mergedProps.disabled, hoverBorderColor: "transparent", icon: "falTimes", mr: -0.5, ref: ref, variant: mergedProps.variant }, styles.button, rest)));
 });
 exports.default = exports.TagButton;