@veracity/vui 2.2.0 → 2.4.0

package/dist/esm/message/consts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/message/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;;;CAK1B,CAAA;AAED,eAAO,MAAM,iBAAiB;;;;;CAK7B,CAAA"}
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/message/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;;;CAK1B,CAAA;AAED,eAAO,MAAM,iBAAiB;;;;;CAK7B,CAAA;AAED,eAAO,MAAM,aAAa;;;;;CAKzB,CAAA"}

package/dist/esm/message/consts.js

@@ -5,8 +5,14 @@ export const iconDictionary = {
     success: 'falCheckCircle'
 };
 export const spacingDictionary = {
-    md: 8,
-    xs: 4,
-    sm: 6,
-    lg: 10
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 10
+};
+export const messageColors = {
+    info: 'seaBlue.main',
+    warning: 'terracotta.30',
+    error: 'energyRed.45',
+    success: 'landGreen.35'
 };

package/dist/esm/message/message.js

@@ -10,11 +10,11 @@ export const MessageBase = styled.divBox `
 `;
 /** Displays a simple message text. */
 export const Message = vui((props, ref) => {
-    const { children, className, text, size = 'md', variant = 'info', ...rest } = props;
+    const { children, className, text, size = 'lg', variant = 'info', ...rest } = props;
     const styles = useStyleConfig('Message', props);
     return (React.createElement(MessageBase, { className: cs('vui-message', className), ref: ref, ...styles, ...rest },
         React.createElement(Box, null,
-            React.createElement(Icon, { mr: `${spacingDictionary[size]}px`, name: iconDictionary[variant], size: size }),
-            React.createElement(T, { size: size }, children ?? text))));
+            React.createElement(Icon, { mr: `${spacingDictionary[size]}px`, name: iconDictionary[variant], size: styles.fontSize }),
+            React.createElement(T, { size: styles.fontSize }, children ?? text))));
 });
 export default Message;

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

@@ -2,11 +2,9 @@ declare const _default: {
     baseStyle: {};
     defaultProps: {
         variant: string;
+        size: string;
     };
     sizes: {
-        xs: {
-            fontSize: string;
-        };
         sm: {
             fontSize: string;
         };
@@ -16,6 +14,9 @@ declare const _default: {
         lg: {
             fontSize: string;
         };
+        xl: {
+            fontSize: string;
+        };
     };
     variants: {
         info: {

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

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

package/dist/esm/message/theme.js

@@ -1,33 +1,35 @@
+import { messageColors } from './consts';
 const baseStyle = {};
 const defaultProps = {
-    variant: 'info'
+    variant: 'info',
+    size: 'lg'
 };
 const sizes = {
-    xs: {
+    sm: {
         fontSize: 'xs'
     },
-    sm: {
+    md: {
         fontSize: 'sm'
     },
-    md: {
+    lg: {
         fontSize: 'md'
     },
-    lg: {
+    xl: {
         fontSize: 'lg'
     }
 };
 const variants = {
     info: {
-        color: 'blue.80'
+        color: messageColors.info
     },
     warning: {
-        color: 'yellow.90'
+        color: messageColors.warning
     },
     error: {
-        color: 'red.80'
+        color: messageColors.error
     },
     success: {
-        color: 'green.80'
+        color: messageColors.success
     }
 };
 export default {

package/dist/esm/notification/theme.js

@@ -8,8 +8,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/esm/pagination/theme.js

@@ -1,13 +1,13 @@
 const base = {
     bg: 'transparent',
     border: 'none',
-    color: 'darkBlue.18'
+    color: 'darkBlue.main'
 };
 const baseStyle = {
     button: {
         ...base,
-        color: 'seaBlue.28',
-        hoverBg: 'skyBlue.80',
+        color: 'seaBlue.main',
+        hoverBg: 'skyBlue.main',
         minW: 24
     },
     ellipsis: { ...base },

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: "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}%`)))));
+        React.createElement(Box, { bg: "seaBlue.main", 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/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/esm/select/select.js

@@ -13,7 +13,7 @@ import useSelect from './useSelect';
  * Supports single select and multi select, as well as controlled and uncontrolled modes.
  */
 export function Select(props) {
-    const { children, defaultValue, disabled, isInvalid, isMultiple, name, onChange, options, placeholder = 'Please select', readOnly, selectButton, size, value, variant, ...rest } = props;
+    const { children, defaultValue, disabled, isInvalid, isMultiple, maxHeight, name, onChange, options, placeholder = 'Please select', readOnly, selectButton, size, value, variant, ...rest } = props;
     const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options, children });
     if (__DEV__ && isMultiple && !Array.isArray(selectProps.value)) {
         console.error('<Select /> is used with isMultiple but its value is not an array: ', value);
@@ -35,7 +35,7 @@ export function Select(props) {
             React.createElement(React.Fragment, null,
                 selectButton ?? React.createElement(SelectButton, null),
                 React.createElement(SelectContent, null,
-                    React.createElement(SelectGroup, { tabIndex: 1000 }, children ??
+                    React.createElement(SelectGroup, { maxH: maxHeight, tabIndex: 1000 }, children ??
                         options?.map?.(option => React.createElement(SelectOption, { key: option.value, title: option.text, ...option }))))))));
 }
 Select.Button = SelectButton;

package/dist/esm/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/esm/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/esm/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/esm/select/selectButton.js

@@ -14,22 +14,23 @@ export const SelectButton = vui((props, ref) => {
     const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {};
     const styles = useStyleConfig('Select', 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.createElement(PopoverTrigger, { as: LineButton, bg: "white", className: cs('vui-selectButton', className), colorScheme: "prussian", disabled: disabled, focusRing: 2, fontWeight: "regular", iconRight: React.createElement(Button.Icon, { color: iconColor, ml: "auto", name: "falAngleDown" }), isFullWidth: true, px: 1, ref: ref, text: React.createElement(Button.Text, { color: textColor, ...ellipsisOverflow }, text), userSelect: "text", ...styles.button, ...readOnlyProps, ...isInvalidProps, ...rest }));

package/dist/esm/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/esm/select/selectOption.js

@@ -29,7 +29,7 @@ export const SelectOption = vui((props, ref) => {
         onChange?.(clonedEvent);
         !isMultiple && instance?.hide();
     });
-    return (React.createElement(ListItem, { className: cs('vui-selectOption', className), disabled: disabled, isInteractive: true, isSelected: isSelected, onClick: onClick, ref: ref, title: title, value: valueProp, ...styles.item, ...rest, ...ellipsisOverflow }, children ??
+    return (React.createElement(ListItem, { activeBg: "skyBlue.active", className: 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, ...ellipsisOverflow }, children ??
         (isMultiple && (React.createElement(React.Fragment, null,
             React.createElement(Checkbox, { checked: isSelected, disabled: disabled, mr: 1 }),
             React.createElement(List.Text, null, props.text))))));

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

@@ -1,20 +1,7 @@
-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 = {
@@ -62,7 +49,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'
+        }
+    }
 };
 export default {
     baseStyle,

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

@@ -7,9 +7,8 @@ import { useTableContext } from './context';
 export const TableSortIcon = vui((props, ref) => {
     const { className, order, ...rest } = props;
     const styles = useStyleConfig('Table', 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.createElement(Icon, { className: cs('vui-tableSortIcon', className), name: "fadSortUp", pathFill: pathFill, ref: ref, rotate: rotate, size: "xs", ...styles.tableSortIcon, ...rest }));
 });
 export default TableSortIcon;

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

@@ -7,15 +7,19 @@ import Tr from './tr';
 export const TbodyBase = 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/esm/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/esm/table/th.js

@@ -23,8 +23,9 @@ export const Th = vui((props, ref) => {
     const isActive = !disabled && sort?.key === field;
     const sortOrder = isActive ? sort.order : undefined;
     const isInteractive = 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',
@@ -33,7 +34,7 @@ export const Th = vui((props, ref) => {
             userSelect: 'none'
         }
         : {};
-    return (React.createElement(ThBase, { className: cs('vui-th', className), "data-active": isActive, "data-disabled": disabled, px: 2, ref: ref, ...styles.th, ...activeProps, ...disabledProps, ...interactiveProps, ...rest }, children ?? (React.createElement(Box, { centerV: true, display: "inline-flex" },
+    return (React.createElement(ThBase, { className: cs('vui-th', className), "data-active": isActive, "data-disabled": disabled, hoverBg: hoverBg, px: 2, ref: ref, ...styles.th, ...activeProps, ...disabledProps, ...interactiveProps, ...rest }, children ?? (React.createElement(Box, { centerV: true, display: "inline-flex" },
         title,
         isSortable && React.createElement(TableSortIcon, { ml: 1, my: 0.5, order: sortOrder })))));
 });

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

@@ -4,15 +4,6 @@ import { cs } from '../utils';
 import { useTableContext } from './context';
 import Th from './th';
 import Tr from './tr';
-export const TheadBase = 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. */
 export const Thead = vui((props, ref) => {
     const { children, className, ...rest } = props;
@@ -26,6 +17,11 @@ export const Thead = vui((props, ref) => {
             zIndex: 3
         }
         : {};
+    const TheadBase = styled.theadBox `
+    tr th {
+      border-bottom: ${rest.borderBottom || '1px solid sandstone.main'};
+    }
+  `;
     return (React.createElement(TheadBase, { className: cs('vui-thead', className), ref: ref, ...stickyProps, ...styles.thead, ...rest }, children ?? (React.createElement(Tr, null, columns?.map(column => (React.createElement(Th, { key: column.field, ...column })))))));
 });
 export default Thead;

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

@@ -1,4 +1,10 @@
-const baseStyle = {};
+const baseStyle = {
+    th: {
+        fontSize: 14,
+        fontWeight: 500,
+        color: 'darkBlue.main'
+    }
+};
 const defaultProps = {
     size: 'lg',
     variant: 'bordered'
@@ -24,13 +30,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/esm/table/tr.js

@@ -10,7 +10,7 @@ export const Tr = vui((props, ref) => {
     const { className, isSelected, ...rest } = props;
     const { variant } = useTableContext() ?? {};
     const styles = useStyleConfig('Table', useTableContext());
-    const selectedProps = isSelected ? { bg: 'blue.10' } : {};
+    const selectedProps = isSelected ? { bg: 'skyBlue.selected' } : {};
     return (React.createElement(TrBase, { className: cs('vui-tr', className), "data-selected": Boolean(isSelected), "data-variant": variant, ref: ref, ...styles.tr, ...selectedProps, ...rest }));
 });
 export default Tr;

package/dist/esm/tabs/tabsNavBar.js

@@ -21,10 +21,10 @@ export const TabsNavBar = vui((props, ref) => {
     const borderWidth = sizes[size ?? 'md'].tabsNavBar.borderWidth;
     const py = sizes[size ?? 'md'].tabsNavBar.py;
     const iconMarginRight = size === 'xxl' ? '16px' : '8px';
-    return (React.createElement(List, { borderBottom: showBorder ? '1px solid sandstone.79' : 'none', className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1 }, tabs?.map?.(tab => (React.createElement(ListItem, { activeBg: "skyBlue.90", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, color: "seaBlue.28", disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, h: h, hoverBg: "skyBlue.85", key: tab.id, onClick: () => onNavItemClick?.(tab.id || 0), position: "relative", px: "16px", py: py },
+    return (React.createElement(List, { borderBottom: showBorder ? '1px solid sandstone.79' : 'none', className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1 }, tabs?.map?.(tab => (React.createElement(ListItem, { activeBg: "skyBlue.90", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, color: "seaBlue.main", disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, h: h, hoverBg: "skyBlue.85", key: tab.id, onClick: () => onNavItemClick?.(tab.id || 0), position: "relative", px: "16px", py: py },
         React.createElement(Box, { alignItems: "center" },
             !!tab.icon && React.createElement(Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }),
             tab.title),
-        !tab.disabled && tab.id === activeNavItem && (React.createElement(Box, { animation: animationDirection, bg: "seaBlue.28", bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
+        !tab.disabled && tab.id === activeNavItem && (React.createElement(Box, { animation: animationDirection, bg: "seaBlue.main", bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
 });
 export default TabsNavBar;

package/dist/esm/tag/theme.js

@@ -83,14 +83,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: {
@@ -144,10 +144,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: {