@veracity/vui 2.2.0 → 2.4.0

package/dist/cjs/notification/theme.js

@@ -10,8 +10,8 @@ const variants = {
     subtleBlue: {
         container: {
             bg: 'skyBlue.95',
-            borderColor: 'seaBlue.28',
-            color: 'seaBlue.28'
+            borderColor: 'seaBlue.main',
+            color: 'seaBlue.main'
         },
         button: {
             borderColor: 'transparent'

package/dist/cjs/pagination/theme.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const base = {
     bg: 'transparent',
     border: 'none',
-    color: 'darkBlue.18'
+    color: 'darkBlue.main'
 };
 const baseStyle = {
-    button: Object.assign(Object.assign({}, base), { color: 'seaBlue.28', hoverBg: 'skyBlue.80', minW: 24 }),
+    button: Object.assign(Object.assign({}, base), { color: 'seaBlue.main', hoverBg: 'skyBlue.main', minW: 24 }),
     ellipsis: Object.assign({}, base),
     goToPage: Object.assign({}, base),
     prevNext: Object.assign({}, base),

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: "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}%`)))));
+        react_1.default.createElement(box_1.Box, { bg: "seaBlue.main", 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/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAqDxC;yBArDe,MAAM;;;;;;;;;AA4DtB,eAAe,MAAM,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAsDxC;yBAtDe,MAAM;;;;;;;;;AA6DtB,eAAe,MAAM,CAAA"}

package/dist/cjs/select/select.js

@@ -31,7 +31,7 @@ const useSelect_1 = __importDefault(require("./useSelect"));
  */
 function Select(props) {
     var _a;
-    const { children, defaultValue, disabled, isInvalid, isMultiple, name, onChange, options, placeholder = 'Please select', readOnly, selectButton, size, value, variant } = props, rest = __rest(props, ["children", "defaultValue", "disabled", "isInvalid", "isMultiple", "name", "onChange", "options", "placeholder", "readOnly", "selectButton", "size", "value", "variant"]);
+    const { children, defaultValue, disabled, isInvalid, isMultiple, maxHeight, name, onChange, options, placeholder = 'Please select', readOnly, selectButton, size, value, variant } = props, rest = __rest(props, ["children", "defaultValue", "disabled", "isInvalid", "isMultiple", "maxHeight", "name", "onChange", "options", "placeholder", "readOnly", "selectButton", "size", "value", "variant"]);
     const selectProps = (0, useSelect_1.default)({ defaultValue, isMultiple, onChange, value, options, children });
     if (utils_1.__DEV__ && isMultiple && !Array.isArray(selectProps.value)) {
         console.error('<Select /> is used with isMultiple but its value is not an array: ', value);
@@ -49,7 +49,7 @@ function Select(props) {
         react_1.default.createElement(popover_1.Popover, Object.assign({ matchWidth: true }, rest),
             react_1.default.createElement(react_1.default.Fragment, null, selectButton !== null && selectButton !== void 0 ? selectButton : react_1.default.createElement(selectButton_1.default, null),
                 react_1.default.createElement(selectContent_1.default, null,
-                    react_1.default.createElement(selectGroup_1.default, { tabIndex: 1000 }, children !== null && children !== void 0 ? children : (_a = options === null || options === void 0 ? void 0 : options.map) === null || _a === void 0 ? void 0 : _a.call(options, option => react_1.default.createElement(selectOption_1.default, Object.assign({ key: option.value, title: option.text }, option)))))))));
+                    react_1.default.createElement(selectGroup_1.default, { maxH: maxHeight, tabIndex: 1000 }, children !== null && children !== void 0 ? children : (_a = options === null || options === void 0 ? void 0 : options.map) === null || _a === void 0 ? void 0 : _a.call(options, option => react_1.default.createElement(selectOption_1.default, Object.assign({ key: option.value, title: option.text }, option)))))))));
 }
 exports.Select = Select;
 Select.Button = selectButton_1.default;

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

@@ -14,6 +14,8 @@ export declare type SelectProps = ThemingProps<'Select'> & PopoverProps & UseSel
     disabled?: boolean;
     /** Represents invalid form input and is styled accordingly. */
     isInvalid?: boolean;
+    /** Maximum container height in px. */
+    maxHeight?: number;
     /** Name of the input. Used in custom change event to support form library integration. */
     name?: string;
     /** Data prop to display an array of options in the popover. */

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

@@ -1 +1 @@
-{"version":3,"file":"select.types.d.ts","sourceRoot":"","sources":["../../../src/select/select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,oBAAY,iBAAiB,GAAG,WAAW,CAAA;AAE3C,oBAAY,kBAAkB,GAAG,mBAAmB,CAAA;AAEpD,oBAAY,aAAa,GAAG,IAAI,CAC9B,WAAW,EACX,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAC/G,GACC,mBAAmB,CAAA;AAErB,oBAAY,gBAAgB,GAAG,SAAS,CAAA;AAExC,oBAAY,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,GAC9C,YAAY,GACZ,cAAc,GAAG;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB,CAAA;AAEH,oBAAY,gBAAgB,GAAG;IAC7B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,oBAAY,iBAAiB,GAAG,aAAa,GAAG;IAC9C,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,oBAAY,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA"}
+{"version":3,"file":"select.types.d.ts","sourceRoot":"","sources":["../../../src/select/select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,oBAAY,iBAAiB,GAAG,WAAW,CAAA;AAE3C,oBAAY,kBAAkB,GAAG,mBAAmB,CAAA;AAEpD,oBAAY,aAAa,GAAG,IAAI,CAC9B,WAAW,EACX,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAC/G,GACC,mBAAmB,CAAA;AAErB,oBAAY,gBAAgB,GAAG,SAAS,CAAA;AAExC,oBAAY,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,GAC9C,YAAY,GACZ,cAAc,GAAG;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB,CAAA;AAEH,oBAAY,gBAAgB,GAAG;IAC7B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,oBAAY,iBAAiB,GAAG,aAAa,GAAG;IAC9C,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,oBAAY,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA"}

package/dist/cjs/select/selectButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectButton.d.ts","sourceRoot":"","sources":["../../../src/select/selectButton.tsx"],"names":[],"mappings":"AASA;;;;GAIG;AACH,eAAO,MAAM,YAAY,2EAoDvB,CAAA;AAEF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"selectButton.d.ts","sourceRoot":"","sources":["../../../src/select/selectButton.tsx"],"names":[],"mappings":"AASA;;;;GAIG;AACH,eAAO,MAAM,YAAY,2EAqDvB,CAAA;AAEF,eAAe,YAAY,CAAA"}

package/dist/cjs/select/selectButton.js

@@ -55,22 +55,23 @@ exports.SelectButton = (0, core_1.vui)((props, ref) => {
     const { disabled, isInvalid, placeholder, readOnly, valueText } = (_a = (0, context_1.useSelectContext)()) !== null && _a !== void 0 ? _a : {};
     const styles = (0, core_1.useStyleConfig)('Select', (0, context_1.useSelectContext)());
     const text = valueText || placeholder;
-    const textColor = disabled ? 'disabled.text' : !valueText ? 'grey.60' : undefined;
-    const iconColor = disabled ? 'disabled.text' : 'blue.80';
+    const textColor = disabled ? 'sandstone.10' : !valueText ? 'sandstone.10' : undefined;
+    const iconColor = disabled ? 'sandstone.10' : 'seaBlue.main';
     const readOnlyProps = readOnly
         ? {
-            activeBg: 'disabled.bg',
-            bg: 'disabled.bg',
-            color: 'darkBlue.18',
+            activeBg: 'sandstone.95',
+            bg: 'sandstone.95',
+            color: 'seaBlue.main',
             cursor: 'auto',
             disabled: true,
-            hoverBg: 'disabled.bg'
+            hoverBg: 'sandstone.95',
+            opacity: 1
         }
         : {};
     const isInvalidProps = isInvalid
         ? {
-            borderColor: 'red.80',
-            hoverBorderColor: 'red.80'
+            borderColor: 'energyRed.45',
+            hoverBorderColor: 'energyRed.45'
         }
         : {};
     return (react_1.default.createElement(popover_1.PopoverTrigger, Object.assign({ as: button_1.LineButton, bg: "white", className: (0, utils_1.cs)('vui-selectButton', className), colorScheme: "prussian", disabled: disabled, focusRing: 2, fontWeight: "regular", iconRight: react_1.default.createElement(button_1.default.Icon, { color: iconColor, ml: "auto", name: "falAngleDown" }), isFullWidth: true, px: 1, ref: ref, text: react_1.default.createElement(button_1.default.Text, Object.assign({ color: textColor }, utils_1.ellipsisOverflow), text), userSelect: "text" }, styles.button, readOnlyProps, isInvalidProps, rest)));

package/dist/cjs/select/selectOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectOption.d.ts","sourceRoot":"","sources":["../../../src/select/selectOption.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD;;;;GAIG;AACH,eAAO,MAAM,YAAY,yDA+CvB,CAAA;AAEF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"selectOption.d.ts","sourceRoot":"","sources":["../../../src/select/selectOption.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD;;;;GAIG;AACH,eAAO,MAAM,YAAY,yDAkDvB,CAAA;AAEF,eAAe,YAAY,CAAA"}

package/dist/cjs/select/selectOption.js

@@ -47,7 +47,7 @@ exports.SelectOption = (0, core_1.vui)((props, ref) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(clonedEvent);
         !isMultiple && (instance === null || instance === void 0 ? void 0 : instance.hide());
     });
-    return (react_1.default.createElement(list_1.ListItem, Object.assign({ className: (0, utils_1.cs)('vui-selectOption', className), disabled: disabled, isInteractive: true, isSelected: isSelected, onClick: onClick, ref: ref, title: title, value: valueProp }, styles.item, rest, utils_1.ellipsisOverflow), children !== null && children !== void 0 ? children : (isMultiple && (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(list_1.ListItem, Object.assign({ activeBg: "skyBlue.active", className: (0, utils_1.cs)('vui-selectOption', className), disabled: disabled, hoverBg: "skyBlue.hover", isInteractive: true, isSelected: isSelected, onClick: onClick, ref: ref, selectedBg: "skyBlue.selected", title: title, value: valueProp }, styles.item, rest, utils_1.ellipsisOverflow), children !== null && children !== void 0 ? children : (isMultiple && (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(checkbox_1.Checkbox, { checked: isSelected, disabled: disabled, mr: 1 }),
         react_1.default.createElement(list_1.List.Text, null, props.text))))));
 });

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

@@ -3,7 +3,7 @@ import { ThemingProps } from '../theme';
 export declare type SpinnerProps = Omit<BoxProps, 'size' | 'variant'> & Omit<ThemingProps<'Spinner'>, 'size'> & {
     /** Children are disabled for this component. */
     children?: never;
-    /** Available theme colors for this component. @default blue */
+    /** @deprecated use 'variant' instead */
     colorScheme?: 'blue' | 'grey' | 'prussian';
     /** Color of the 'empty' part of the circle. */
     emptyColor?: string | 'transparent';

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.types.d.ts","sourceRoot":"","sources":["../../../src/spinner/spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,GAC3D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,GAAG;IACtC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAA;IAC1C,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;IACnC,qDAAqD;IACrD,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;IAClC,wDAAwD;IACxD,IAAI,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;IAC/C,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;IAClD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA"}
+{"version":3,"file":"spinner.types.d.ts","sourceRoot":"","sources":["../../../src/spinner/spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,GAC3D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,GAAG;IACtC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAA;IAC1C,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;IACnC,qDAAqD;IACrD,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;IAClC,wDAAwD;IACxD,IAAI,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;IAC/C,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;IAClD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA"}

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

@@ -1,18 +1,6 @@
-import { Dict } from '../utils';
-declare function variantDefault(props: Dict): {
-    container: {
-        color: string;
-    };
-    circle: {
-        borderColor: string;
-        borderTopColor: string;
-    };
-    text: {};
-};
 declare const _default: {
     baseStyle: {};
     defaultProps: {
-        colorScheme: string;
         size: string;
         variant: string;
     };
@@ -62,7 +50,24 @@ declare const _default: {
         };
     };
     variants: {
-        default: typeof variantDefault;
+        lightBackground: {
+            circle: {
+                borderColor: string;
+                borderTopColor: string;
+            };
+            text: {
+                color: string;
+            };
+        };
+        darkBackground: {
+            circle: {
+                borderColor: string;
+                borderTopColor: string;
+            };
+            text: {
+                color: string;
+            };
+        };
     };
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/spinner/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,cAAc,CAAC,KAAK,EAAE,IAAI;;;;;;;;;EAelC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DD,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/spinner/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,wBAMC"}

package/dist/cjs/spinner/theme.js

@@ -1,22 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function variantDefault(props) {
-    const { colorScheme: c } = props;
-    const container = {
-        color: `${c}.50`
-    };
-    const circle = {
-        borderColor: `${c}.20`,
-        borderTopColor: `${c}.50`
-    };
-    const text = {};
-    return { container, circle, text };
-}
 const baseStyle = {};
 const defaultProps = {
-    colorScheme: 'blue',
     size: 'page',
-    variant: 'default'
+    variant: 'lightBackground'
 };
 const parts = ['container', 'circle', 'text'];
 const sizes = {
@@ -64,7 +51,24 @@ const sizes = {
     }
 };
 const variants = {
-    default: variantDefault
+    lightBackground: {
+        circle: {
+            borderColor: 'seaBlue.80',
+            borderTopColor: 'seaBlue.main'
+        },
+        text: {
+            color: 'seaBlue.main'
+        }
+    },
+    darkBackground: {
+        circle: {
+            borderColor: 'digiGreen.30',
+            borderTopColor: 'digiGreen.78'
+        },
+        text: {
+            color: 'digiGreen.78'
+        }
+    }
 };
 exports.default = {
     baseStyle,

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

@@ -1 +1 @@
-{"version":3,"file":"tableSortIcon.d.ts","sourceRoot":"","sources":["../../../src/table/tableSortIcon.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,qEAAqE;AACrE,eAAO,MAAM,aAAa,2DAoBxB,CAAA;AAEF,eAAe,aAAa,CAAA"}
+{"version":3,"file":"tableSortIcon.d.ts","sourceRoot":"","sources":["../../../src/table/tableSortIcon.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,qEAAqE;AACrE,eAAO,MAAM,aAAa,2DAkBxB,CAAA;AAEF,eAAe,aAAa,CAAA"}

package/dist/cjs/table/tableSortIcon.js

@@ -24,9 +24,8 @@ const context_1 = require("./context");
 exports.TableSortIcon = (0, core_1.vui)((props, ref) => {
     const { className, order } = props, rest = __rest(props, ["className", "order"]);
     const styles = (0, core_1.useStyleConfig)('Table', (0, context_1.useTableContext)());
-    // Rotating 1 icon is works better than switching multiple
     const rotate = order === 'asc' ? 180 : 0;
-    const pathFill = order !== undefined ? ['blue.80', 'grey.40'] : 'grey.40';
+    const pathFill = order !== undefined ? ['seaBlue.main', 'sandstone.main'] : 'sandstone.main';
     return (react_1.default.createElement(icon_1.Icon, Object.assign({ className: (0, utils_1.cs)('vui-tableSortIcon', className), name: "fadSortUp", pathFill: pathFill, ref: ref, rotate: rotate, size: "xs" }, styles.tableSortIcon, rest)));
 });
 exports.default = exports.TableSortIcon;

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,iIAkBrB,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,iIAsBrB,CAAA;AAED,0DAA0D;AAC1D,eAAO,MAAM,KAAK,mEAiBhB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/cjs/table/tbody.js

@@ -24,15 +24,19 @@ const tr_1 = __importDefault(require("./tr"));
 exports.TbodyBase = core_1.styled.tbodyBox `
   tr {
     :hover td {
-      background-color: grey.20;
+      background-color: skyBlue.hover;
     }
 
     &[data-selected='true']:hover td {
-      background-color: blue.20;
+      background-color: skyBlue.hover;
+    }
+
+    &[data-selected='true'] td {
+      border-bottom-color: sandstone.main;
     }
 
     &[data-variant='striped'][data-selected='false']:nth-of-type(odd):not(:hover) td {
-      background-color: grey.10;
+      background-color: sandstone.95;
     }
 
     &[data-variant='basic']:hover td {

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

@@ -1 +1 @@
-{"version":3,"file":"th.d.ts","sourceRoot":"","sources":["../../../src/table/th.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,eAAO,MAAM,MAAM,8HAIlB,CAAA;AAED,oDAAoD;AACpD,eAAO,MAAM,EAAE,+CA6Db,CAAA;AAEF,eAAe,EAAE,CAAA"}
+{"version":3,"file":"th.d.ts","sourceRoot":"","sources":["../../../src/table/th.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,eAAO,MAAM,MAAM,8HAIlB,CAAA;AAED,oDAAoD;AACpD,eAAO,MAAM,EAAE,+CA8Db,CAAA;AAEF,eAAe,EAAE,CAAA"}

package/dist/cjs/table/th.js

@@ -41,8 +41,9 @@ exports.Th = (0, core_1.vui)((props, ref) => {
     const isActive = !disabled && (sort === null || sort === void 0 ? void 0 : sort.key) === field;
     const sortOrder = isActive ? sort.order : undefined;
     const isInteractive = isInteractiveProp !== null && isInteractiveProp !== void 0 ? isInteractiveProp : onClick !== undefined;
-    const activeProps = isActive ? { bg: 'blue.10' } : {};
+    const activeProps = isActive ? { bg: 'skyBlue.active' } : {};
     const disabledProps = disabled ? { bg: 'disabled.bg', color: 'disabled.color', cursor: 'not-allowed' } : {};
+    const hoverBg = isSortable ? 'skyBlue.hover' : undefined;
     const interactiveProps = !disabled && isInteractive
         ? {
             cursor: 'pointer',
@@ -51,7 +52,7 @@ exports.Th = (0, core_1.vui)((props, ref) => {
             userSelect: 'none'
         }
         : {};
-    return (react_1.default.createElement(exports.ThBase, Object.assign({ className: (0, utils_1.cs)('vui-th', className), "data-active": isActive, "data-disabled": disabled, px: 2, ref: ref }, styles.th, activeProps, disabledProps, interactiveProps, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(box_1.default, { centerV: true, display: "inline-flex" },
+    return (react_1.default.createElement(exports.ThBase, Object.assign({ className: (0, utils_1.cs)('vui-th', className), "data-active": isActive, "data-disabled": disabled, hoverBg: hoverBg, px: 2, ref: ref }, styles.th, activeProps, disabledProps, interactiveProps, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(box_1.default, { centerV: true, display: "inline-flex" },
         title,
         isSortable && react_1.default.createElement(tableSortIcon_1.default, { ml: 1, my: 0.5, order: sortOrder })))));
 });

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

@@ -1,5 +1,4 @@
 import { TheadProps } from './table.types';
-export declare const TheadBase: import("styled-components").StyledComponent<"thead", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
 /** Displays Table head with support for columns and sticky. */
 export declare const Thead: import("../core").VuiComponent<"thead", TheadProps>;
 export default Thead;

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

@@ -1 +1 @@
-{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAI1C,eAAO,MAAM,SAAS,iIAQrB,CAAA;AAED,+DAA+D;AAC/D,eAAO,MAAM,KAAK,qDAyBhB,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAI1C,+DAA+D;AAC/D,eAAO,MAAM,KAAK,qDA+BhB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/cjs/table/thead.js

@@ -14,22 +14,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Thead = exports.TheadBase = void 0;
+exports.Thead = void 0;
 const react_1 = __importDefault(require("react"));
 const core_1 = require("../core");
 const utils_1 = require("../utils");
 const context_1 = require("./context");
 const th_1 = __importDefault(require("./th"));
 const tr_1 = __importDefault(require("./tr"));
-exports.TheadBase = core_1.styled.theadBox `
-  tr:not(:last-of-type) th {
-    border-bottom: 1px solid grey.20;
-  }
-
-  tr:last-of-type th {
-    border-bottom: 1px solid grey.40;
-  }
-`;
 /** Displays Table head with support for columns and sticky. */
 exports.Thead = (0, core_1.vui)((props, ref) => {
     var _a;
@@ -44,6 +35,11 @@ exports.Thead = (0, core_1.vui)((props, ref) => {
             zIndex: 3
         }
         : {};
-    return (react_1.default.createElement(exports.TheadBase, Object.assign({ className: (0, utils_1.cs)('vui-thead', className), ref: ref }, stickyProps, styles.thead, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(tr_1.default, null, columns === null || columns === void 0 ? void 0 : columns.map(column => (react_1.default.createElement(th_1.default, Object.assign({ key: column.field }, column))))))));
+    const TheadBase = core_1.styled.theadBox `
+    tr th {
+      border-bottom: ${rest.borderBottom || '1px solid sandstone.main'};
+    }
+  `;
+    return (react_1.default.createElement(TheadBase, Object.assign({ className: (0, utils_1.cs)('vui-thead', className), ref: ref }, stickyProps, styles.thead, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(tr_1.default, null, columns === null || columns === void 0 ? void 0 : columns.map(column => (react_1.default.createElement(th_1.default, Object.assign({ key: column.field }, column))))))));
 });
 exports.default = exports.Thead;

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

@@ -1,5 +1,11 @@
 declare const _default: {
-    baseStyle: {};
+    baseStyle: {
+        th: {
+            fontSize: number;
+            fontWeight: number;
+            color: string;
+        };
+    };
     defaultProps: {
         size: string;
         variant: string;

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

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

package/dist/cjs/table/theme.js

@@ -1,6 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const baseStyle = {};
+const baseStyle = {
+    th: {
+        fontSize: 14,
+        fontWeight: 500,
+        color: 'darkBlue.main'
+    }
+};
 const defaultProps = {
     size: 'lg',
     variant: 'bordered'
@@ -26,13 +32,13 @@ const sizes = {
 const variants = {
     bordered: {
         td: {
-            borderBottom: '1px solid grey.20'
+            borderBottom: '1px solid sandstone.90'
         }
     },
     striped: {},
     basic: {
         td: {
-            borderBottom: '1px solid grey.20'
+            borderBottom: '1px solid sandstone.90'
         }
     }
 };

package/dist/cjs/table/tr.js

@@ -28,7 +28,7 @@ exports.Tr = (0, core_1.vui)((props, ref) => {
     const { className, isSelected } = props, rest = __rest(props, ["className", "isSelected"]);
     const { variant } = (_a = (0, context_1.useTableContext)()) !== null && _a !== void 0 ? _a : {};
     const styles = (0, core_1.useStyleConfig)('Table', (0, context_1.useTableContext)());
-    const selectedProps = isSelected ? { bg: 'blue.10' } : {};
+    const selectedProps = isSelected ? { bg: 'skyBlue.selected' } : {};
     return (react_1.default.createElement(exports.TrBase, Object.assign({ className: (0, utils_1.cs)('vui-tr', className), "data-selected": Boolean(isSelected), "data-variant": variant, ref: ref }, styles.tr, selectedProps, rest)));
 });
 exports.default = exports.Tr;

package/dist/cjs/tabs/tabsNavBar.js

@@ -28,10 +28,10 @@ exports.TabsNavBar = (0, core_1.vui)((props, ref) => {
     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 },
+    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.main", 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: iconMarginRight, name: tab.icon, size: iconSize }),
             tab.title),
-        !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")))))));
+        !tab.disabled && tab.id === activeNavItem && (react_1.default.createElement(box_1.default, { animation: animationDirection, bg: "seaBlue.main", bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
 });
 exports.default = exports.TabsNavBar;

package/dist/cjs/tag/theme.js

@@ -85,14 +85,14 @@ const variants = {
             hoverBg: 'skyBlue.90',
             activeBg: 'skyBlue.85',
             borderColor: 'skyBlue.95',
-            color: 'seaBlue.28'
+            color: 'seaBlue.main'
         },
         button: {
             bg: 'transparent',
             hoverBg: 'skyBlue.90',
             activeBg: 'skyBlue.85',
             hoverBorderColor: 'transparent',
-            color: 'seaBlue.28'
+            color: 'seaBlue.main'
         }
     },
     subtleRed: {
@@ -146,10 +146,10 @@ const variants = {
     /** solids next */
     solidBlue: {
         container: {
-            bg: 'seaBlue.28',
+            bg: 'seaBlue.main',
             hoverBg: 'seaBlue.35',
             activeBg: 'seaBlue.40',
-            borderColor: 'seaBlue.28',
+            borderColor: 'seaBlue.main',
             color: 'white'
         },
         button: {