@veracity/vui 1.9.1 → 2.0.0

package/dist/esm/notification/notificationButton.js

@@ -2,12 +2,15 @@ import React from 'react';
 import Button from '../button';
 import { useStyleConfig, vui } from '../core';
 import { cs } from '../utils';
+import { notificationStatusMapping } from './consts';
 import { useNotificationContext } from './context';
 /** Displays an action button within the Notification. */
 export const NotificationButton = vui((props, ref) => {
     const { className, ...rest } = props;
     const mergedProps = { ...useNotificationContext(), ...props };
     const styles = useStyleConfig('Notification', useNotificationContext());
-    return (React.createElement(Button, { className: cs('vui-notificationButton', className), colorScheme: mergedProps.colorScheme, ml: 1, mr: -0.5, ref: ref, size: "sm", variant: "text", ...styles.button, ...rest }));
+    const { status = '' } = mergedProps;
+    const { variant } = notificationStatusMapping[status] ?? {};
+    return (React.createElement(Button, { className: cs('vui-notificationButton', className), ml: "0px", mr: "16px", my: "16px", px: "12px", py: "6px", ref: ref, ...styles.button, variant: variant, ...rest }));
 });
 export default NotificationButton;

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

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

package/dist/esm/notification/notificationIcon.js

@@ -6,11 +6,12 @@ import { notificationStatusMapping } from './consts';
 import { useNotificationContext } from './context';
 /** Displays an icon based on the status within the Notification. */
 export const NotificationIcon = vui((props, ref) => {
-    const { className, ...rest } = props;
+    const { className, alignSelf, ...rest } = props;
     const mergedProps = { ...useNotificationContext(), ...props };
     const styles = useStyleConfig('Notification', useNotificationContext());
     const { status = '' } = mergedProps;
     const { iconProps } = notificationStatusMapping[status] ?? {};
-    return (React.createElement(Icon, { className: cs('vui-notificationIcon', className), mr: 1, my: 0.5, ref: ref, size: "md", ...styles.icon, ...iconProps, ...rest }));
+    const marginTop = alignSelf === 'center' ? '0' : '16px';
+    return (React.createElement(Icon, { alignSelf: alignSelf, className: cs('vui-notificationIcon', className), ml: "16px", mt: marginTop, ref: ref, size: "md", ...styles.icon, ...iconProps, ...rest }));
 });
 export default NotificationIcon;

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

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

package/dist/esm/notification/notificationText.js

@@ -7,6 +7,6 @@ import { useNotificationContext } from './context';
 export const NotificationText = vui((props, ref) => {
     const { className, ...rest } = props;
     const styles = useStyleConfig('Notification', useNotificationContext());
-    return (React.createElement(T, { className: cs('vui-notificationText', className), flex: "1", lineHeight: "24px", minW: 0, py: 0.5, ref: ref, ...styles.text, ...rest }));
+    return (React.createElement(T, { className: cs('vui-notificationText', className), flex: "1", lineHeight: "24px", minW: 0, mx: "16px", my: "16px", ref: ref, ...styles.text, ...rest }));
 });
 export default NotificationText;

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

@@ -1,5 +1,5 @@
-import { HeadingProps } from '../heading';
+import { TProps } from '../t';
 /** Displays a title within the Notification. */
-export declare const NotificationTitle: import("../core").VuiComponent<"h6", HeadingProps>;
+export declare const NotificationTitle: import("../core").VuiComponent<"span", TProps>;
 export default NotificationTitle;
 //# sourceMappingURL=notificationTitle.d.ts.map

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

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

package/dist/esm/notification/notificationTitle.js

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

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

@@ -1,27 +1,42 @@
-import { Dict } from '../utils';
-declare function variantSubtle(props: Dict): {
-    container: {
-        bg: string;
-        borderColor: string;
-        borderWidth: number;
-        color: string;
-    };
-    button: {
-        color: string;
-        hoverBg: string;
-        activeBg: string;
-    };
-};
 declare const _default: {
     baseStyle: {};
     defaultProps: {
-        colorScheme: string;
         variant: string;
     };
     parts: string[];
     sizes: {};
     variants: {
-        subtle: typeof variantSubtle;
+        subtleBlue: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+            };
+            button: {
+                borderColor: string;
+            };
+        };
+        subtleRed: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+            };
+        };
+        subtleYellow: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+            };
+        };
+        subtleGreen: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+            };
+        };
     };
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/notification/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,aAAa,CAAC,KAAK,EAAE,IAAI;;;;;;;;;;;;EA2BjC;;;;;;;;;;;;;AAiBD,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/notification/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,wBAMC"}

package/dist/esm/notification/theme.js

@@ -1,35 +1,41 @@
-function variantSubtle(props) {
-    const { colorScheme: c } = props;
-    const container = {
-        bg: `${c}.20`,
-        borderColor: `${c}.80`,
-        borderWidth: 1,
-        color: `${c}.90`
-    };
-    const button = {
-        color: `${c}.90`,
-        hoverBg: `${c}.30`,
-        activeBg: `${c}.40`
-    };
-    if (c === 'blue') {
-        container.color = 'blue.80';
-        button.color = 'blue.80';
-    }
-    if (c === 'yellow') {
-        container.color = 'yellow.100';
-        button.color = 'yellow.100';
-    }
-    return { container, button };
-}
 const baseStyle = {};
 const defaultProps = {
-    colorScheme: 'blue',
-    variant: 'subtle'
+    variant: 'subtleBlue'
 };
 const parts = ['container', 'button', 'icon', 'text', 'title'];
 const sizes = {};
 const variants = {
-    subtle: variantSubtle
+    subtleBlue: {
+        container: {
+            bg: 'skyBlue.95',
+            borderColor: 'seaBlue.28',
+            color: 'seaBlue.28'
+        },
+        button: {
+            borderColor: 'transparent'
+        }
+    },
+    subtleRed: {
+        container: {
+            bg: 'energyRed.95',
+            borderColor: 'energyRed.45',
+            color: 'energyRed.45'
+        }
+    },
+    subtleYellow: {
+        container: {
+            bg: 'sunflower.85',
+            borderColor: 'sunflower.15',
+            color: 'sunflower.15'
+        }
+    },
+    subtleGreen: {
+        container: {
+            bg: 'landGreen.95',
+            borderColor: 'landGreen.30',
+            color: 'landGreen.30'
+        }
+    }
 };
 export default {
     baseStyle,

package/dist/esm/onedesign-tokens/dist/js/es6/rem/button.d.ts

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

package/dist/esm/onedesign-tokens/dist/js/es6/rem/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../../../src/onedesign-tokens/dist/js/es6/rem/button.js"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,iDAAkD;AAClD,kDAAmD;AACnD,mDAAoD;AACpD,8CAA+C;AAC/C,kDAAmD;AACnD,kEAAmE;AACnE,iDAAkD;AAClD,kDAAmD;AACnD,gEAAiE;AACjE,+CAAgD;AAChD,mDAAoD;AACpD,mEAAoE;AACpE,2EAA4E;AAC5E,4EAA6E;AAC7E,oFAAqF;AACrF,qFAAsF;AACtF,4EAA6E;AAC7E,8EAA+E;AAC/E,yEAA0E;AAC1E,0EAA2E;AAC3E,kFAAmF;AACnF,mFAAoF;AACpF,0EAA2E;AAC3E,4EAA6E;AAC7E,0EAA2E;AAC3E,2EAA4E;AAC5E,mFAAoF;AACpF,oFAAqF;AACrF,2EAA4E;AAC5E,6EAA8E;AAC9E,oFAAqF;AACrF,kFAAmF;AACnF,mFAAoF;AACpF,iFAAkF;AAClF,kFAAmF;AACnF,gFAAiF;AACjF,iFAAkF;AAClF,gFAAiF;AACjF,iFAAkF;AAClF,mFAAoF;AACpF,qFAAsF;AACtF,8EAA+E;AAC/E,+EAAgF;AAChF,iFAAkF;AAClF,kFAAmF;AACnF,oFAAqF;AACrF,sFAAuF;AACvF,+EAAgF;AAChF,gFAAiF;AACjF,sFAAuF;AACvF,4EAA6E;AAC7E,6EAA8E;AAC9E,gFAAiF;AACjF,iFAAkF;AAClF,+EAAgF;AAChF,gFAAiF;AACjF,0EAA2E;AAC3E,2EAA4E;AAC5E,kFAAmF;AACnF,oFAAqF;AACrF,6EAA8E;AAC9E,8EAA+E;AAC/E,2EAA4E;AAC5E,4EAA6E;AAC7E,mFAAoF;AACpF,qFAAsF;AACtF,8EAA+E;AAC/E,+EAAgF;AAChF,qFAAsF;AACtF,6CAA8C;AAC9C,0CAA2C;AAC3C,wCAAyC;AACzC,qDAAsD;AACtD,kEAAmE;AACnE,oCAAqC;AACrC,wCAAyC;AACzC,qCAAsC;AACtC,oEAAqE;AACrE,uDAAwD;AACxD,qCAAsC"}

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

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

package/dist/esm/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/esm/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/esm/p/theme.js

@@ -5,23 +5,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/esm/progress/progress.js

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

package/dist/esm/select/selectButton.js

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

package/dist/esm/sidemenu/sidemenu.js

@@ -37,7 +37,7 @@ export const Sidemenu = vui((props, ref) => {
                 ? items?.map?.((item, key) => React.createElement(SidemenuItem, { key: key, ...item }))
                 : children),
             React.createElement(Box, { borderTop: border, className: "vui-sidemenu-bottom", w: "100%" },
-                React.createElement(Button, { borderRadius: 0, onClick: toggle, variant: "text", w: "100%" },
+                React.createElement(Button, { borderRadius: 0, onClick: toggle, variant: "tertiaryDark", w: "100%" },
                     React.createElement(Icon, { name: icon, position: "absolute", right: iconRight }))))));
 });
 Sidemenu.Top = SidemenuTop;

package/dist/esm/sidemenu/sidemenuItem.js

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

package/dist/esm/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/esm/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/esm/t/theme.js

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

package/dist/esm/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/esm/table/tbody.js

@@ -17,6 +17,10 @@ export const TbodyBase = 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/esm/table/theme.d.ts

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

package/dist/esm/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/esm/table/theme.js

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

package/dist/esm/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/esm/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/esm/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"}