@veracity/vui 2.0.6 → 2.2.0

package/dist/esm/input/input.js

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { styled, useStyleConfig, vui } from '../core';
 import { T } from '../t';
 import { cs, filterUndefined, isString } from '../utils';
-import { greyColor, greyLightColor, inputStateMapping, redColor } from './consts';
+import { inputColors, inputStateMapping } from './consts';
 import { InputProvider } from './context';
 import { getInitialCount } from './helpers';
 import HelpText from './helpText';
@@ -31,15 +31,12 @@ export const InputBase = styled.divBox `
  * Exposes some props to the children via context.
  */
 export const Input = vui((props, ref) => {
-    const { autoComplete, autoFocus, children, className, colorScheme, defaultValue, disabled, errorText, iconLeft, iconRight, id, input, inputProps, inputRef, isInvalid, itemLeft, itemRight, helpText, max, maxLength, min, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size, state = '', stateMapping, step, type = 'text', value, variant, ...rest } = props;
+    const { autoComplete, autoFocus, children, className, defaultValue, disabled, errorText, iconLeft, iconRight, id, input, inputProps, inputRef, itemLeft, itemRight, helpText, max, maxLength, min, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size, state = '', stateMapping, step, type = 'text', value, variant, ...rest } = props;
     const [count, setCount] = useState(getInitialCount(props));
     const [valueInternal, setValueInternal] = useState(defaultValue || '');
     const states = { ...inputStateMapping, ...stateMapping };
-    const computedColorScheme = filterUndefined({
-        colorScheme: colorScheme ?? (isInvalid ? 'red' : undefined) ?? states[state]?.colorScheme
-    });
-    const styles = useStyleConfig('Input', { ...computedColorScheme, ...props });
-    const context = useMemo(() => filterUndefined({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
+    const styles = useStyleConfig('Input', props);
+    const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant]);
     function onChange(e) {
         setValueInternal(e.target.value);
         setCount(e.target.value.length);
@@ -47,7 +44,7 @@ export const Input = vui((props, ref) => {
     }
     const aliasedProps = filterUndefined({
         'aria-disabled': disabled,
-        bg: readOnly ? greyLightColor : undefined,
+        bg: readOnly ? inputColors.disabled : undefined,
         focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
         focusWithinRingColor: readOnly ? 'transparent' : undefined
     });
@@ -82,7 +79,7 @@ export const Input = vui((props, ref) => {
             isString(iconRight) ? React.createElement(InputIcon, { mr: 1, name: iconRight }) : iconRight,
             itemRight,
             state && React.createElement(InputIcon, { mr: 1, ...states[state]?.iconProps }),
-            showCount && (React.createElement(T, { className: "vui-inputCount", color: maxLength && count > maxLength ? redColor : greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+            showCount && (React.createElement(T, { className: "vui-inputCount", color: maxLength && count > maxLength ? inputColors.error : inputColors.helpText, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
                 count,
                 " ",
                 maxLength ? `/ ${maxLength}` : null))),

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

@@ -10,7 +10,7 @@ export declare type InputProps = SystemProps & ThemingProps<'Input'> & {
     autoComplete?: string;
     /** Passed to the inner input. */
     autoFocus?: boolean;
-    /** Available theme colors for this component. @default grey */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'green' | 'grey' | 'red';
     /** Passed to the inner input. */
     defaultValue?: number | string;
@@ -28,7 +28,7 @@ export declare type InputProps = SystemProps & ThemingProps<'Input'> & {
     inputProps?: InputInputProps;
     /** Ref passed to the inner input. */
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
-    /** Styles the input in invalid state. */
+    /** Deprecated. Please use variant="red" and/or state="error" instead. @deprecated*/
     isInvalid?: boolean;
     /** Socket displaying a custom element on the left. */
     itemLeft?: React.ReactNode;
@@ -37,11 +37,11 @@ export declare type InputProps = SystemProps & ThemingProps<'Input'> & {
     /** Socket displaying help text bellow an input. */
     helpText?: React.ReactNode | string;
     /** Passed to the inner input. */
-    max?: number | string;
+    max?: number;
     /** Passed to the inner input. */
     maxLength?: number;
     /** Passed to the inner input. */
-    min?: number | string;
+    min?: number;
     /** Passed to the inner input. */
     name?: string;
     /** Passed to the inner input. */
@@ -65,7 +65,7 @@ export declare type InputProps = SystemProps & ThemingProps<'Input'> & {
     /** Object definition of styles and content for each state. */
     stateMapping?: InputStateMapping;
     /** Passed to the inner input. */
-    step?: number | string;
+    step?: number;
     /** Passed to the inner input. */
     type?: InputType;
     /** Passed to the inner input. */
@@ -76,7 +76,7 @@ export declare type HelpTextProps = PProps & {
 };
 export declare type InputState = 'default' | 'error' | 'loading' | 'success';
 export declare type InputStateMapping = Record<string, {
-    colorScheme?: InputProps['colorScheme'];
+    variant?: InputProps['variant'];
     iconProps: IconProps;
 }>;
 export declare type InputType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';

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

@@ -1 +1 @@
-{"version":3,"file":"input.types.d.ts","sourceRoot":"","sources":["../../../src/input/input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAEzE,oBAAY,eAAe,GAAG,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,CAAA;AAE3D,oBAAY,UAAU,GAAG,WAAW,GAClC,YAAY,CAAC,OAAO,CAAC,GAAG;IACtB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAA;IACtC,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IACpC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,+CAA+C;IAC/C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;IACjE,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,uDAAuD;IACvD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;IACnC,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,iBAAiB,CAAA;IAChC,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,iCAAiC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAEH,oBAAY,aAAa,GAAG,MAAM,GAAG;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,oBAAY,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAEpE,oBAAY,iBAAiB,GAAG,MAAM,CACpC,MAAM,EACN;IACE,WAAW,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAA;IACvC,SAAS,EAAE,SAAS,CAAA;CACrB,CACF,CAAA;AAED,oBAAY,SAAS,GACjB,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,CAAA"}
+{"version":3,"file":"input.types.d.ts","sourceRoot":"","sources":["../../../src/input/input.types.ts"],"names":[],"mappings":"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"}

package/dist/esm/input/inputIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputIcon.d.ts","sourceRoot":"","sources":["../../../src/input/inputIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIzC,yCAAyC;AACzC,eAAO,MAAM,SAAS,kDASpB,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"inputIcon.d.ts","sourceRoot":"","sources":["../../../src/input/inputIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAKzC,yCAAyC;AACzC,eAAO,MAAM,SAAS,kDASpB,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/esm/input/inputIcon.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import Icon from '../icon';
 import { cs } from '../utils';
+import { inputColors } from './consts';
 import { useInputContext } from './context';
 /** Displays an icon within the Input. */
 export const InputIcon = vui((props, ref) => {
@@ -9,7 +10,7 @@ export const InputIcon = vui((props, ref) => {
     const inputProps = useInputContext();
     const mergedProps = { ...inputProps, ...props };
     const styles = useStyleConfig('Input', mergedProps);
-    const color = !mergedProps.disabled ? 'blue.80' : 'grey.50';
+    const color = !mergedProps.disabled ? inputColors.icons : inputColors.placeholder;
     return React.createElement(Icon, { className: cs('vui-inputIcon', className), color: color, ref: ref, ...styles.icon, ...rest });
 });
 export default InputIcon;

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

@@ -1,23 +1,22 @@
-import { Dict } from '../utils';
-declare function variantDefault(props: Dict): {
-    container: {
-        borderColor: string;
-        focusWithinRing: number;
-        focusWithinRingColor: string;
-    };
-    icon: {};
-    input: {};
-};
 declare const _default: {
-    baseStyle: {};
+    baseStyle: {
+        container: {
+            focusWithinRing: number;
+            color: string;
+        };
+        input: {
+            color: {
+                placeholder: string;
+            };
+        };
+    };
     defaultProps: {
-        colorScheme: string;
         size: string;
         variant: string;
     };
     parts: string[];
     sizes: {
-        xs: {
+        sm: {
             container: {
                 fontSize: string;
                 h: number;
@@ -27,7 +26,7 @@ declare const _default: {
             };
             input: {};
         };
-        sm: {
+        md: {
             container: {
                 fontSize: string;
                 h: number;
@@ -37,7 +36,7 @@ declare const _default: {
             };
             input: {};
         };
-        md: {
+        lg: {
             container: {
                 fontSize: string;
                 h: number;
@@ -47,7 +46,7 @@ declare const _default: {
             };
             input: {};
         };
-        lg: {
+        xl: {
             container: {
                 fontSize: string;
                 h: number;
@@ -59,7 +58,24 @@ declare const _default: {
         };
     };
     variants: {
-        default: typeof variantDefault;
+        grey: {
+            container: {
+                borderColor: string;
+                focusWithinRingColor: string;
+            };
+        };
+        green: {
+            container: {
+                borderColor: string;
+                focusWithinRingColor: string;
+            };
+        };
+        red: {
+            container: {
+                borderColor: string;
+                focusWithinRingColor: string;
+            };
+        };
     };
 };
 export default _default;

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

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

package/dist/esm/input/theme.js

@@ -1,27 +1,20 @@
-function variantDefault(props) {
-    const { colorScheme: c } = props;
-    const container = {
-        borderColor: `${c}.80`,
+import { inputColors } from './consts';
+const baseStyle = {
+    container: {
         focusWithinRing: 2,
-        focusWithinRingColor: `${c}.80`
-    };
-    if (c === 'grey') {
-        container.borderColor = `${c}.60`;
-        container.focusWithinRingColor = 'blue.50';
+        color: inputColors.inputText
+    },
+    input: {
+        color: { placeholder: inputColors.placeholder }
     }
-    const icon = {};
-    const input = {};
-    return { container, icon, input };
-}
-const baseStyle = {};
+};
 const defaultProps = {
-    colorScheme: 'grey',
-    size: 'md',
-    variant: 'default'
+    size: 'lg',
+    variant: 'grey'
 };
 const parts = ['container', 'icon', 'input'];
 const sizes = {
-    xs: {
+    sm: {
         container: {
             fontSize: 'sm',
             h: 24
@@ -31,7 +24,7 @@ const sizes = {
         },
         input: {}
     },
-    sm: {
+    md: {
         container: {
             fontSize: 'sm',
             h: 32
@@ -41,7 +34,7 @@ const sizes = {
         },
         input: {}
     },
-    md: {
+    lg: {
         container: {
             fontSize: 'md',
             h: 40
@@ -51,7 +44,7 @@ const sizes = {
         },
         input: {}
     },
-    lg: {
+    xl: {
         container: {
             fontSize: 'lg',
             h: 48
@@ -63,7 +56,24 @@ const sizes = {
     }
 };
 const variants = {
-    default: variantDefault
+    grey: {
+        container: {
+            borderColor: inputColors.border,
+            focusWithinRingColor: inputColors.focus
+        }
+    },
+    green: {
+        container: {
+            borderColor: inputColors.success,
+            focusWithinRingColor: inputColors.success
+        }
+    },
+    red: {
+        container: {
+            borderColor: inputColors.error,
+            focusWithinRingColor: inputColors.error
+        }
+    }
 };
 export default {
     baseStyle,

package/dist/esm/pagination/paginationButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginationButton.d.ts","sourceRoot":"","sources":["../../../src/pagination/paginationButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,iEA6B3B,CAAA;AAEF,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"paginationButton.d.ts","sourceRoot":"","sources":["../../../src/pagination/paginationButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,iEAyB3B,CAAA;AAEF,eAAe,gBAAgB,CAAA"}

package/dist/esm/pagination/paginationButton.js

@@ -11,12 +11,9 @@ export const PaginationButton = vui((props, ref) => {
     const isActive = isActiveProp ?? pageProp === page;
     const activeProps = isActive
         ? {
-            bg: 'blue.20',
-            color: 'blue.80',
-            hoverBg: 'blue.30',
-            activeBg: 'blue.40'
+            bg: 'skyBlue.85'
         }
         : {};
-    return (React.createElement(Button, { className: cs('vui-paginationButton', className), minW: 0, onClick: () => onPageChange(pageProp), ref: ref, size: "sm", text: pageProp, variant: "text", ...styles.button, ...activeProps, ...rest }));
+    return (React.createElement(Button, { className: cs('vui-paginationButton', className), onClick: () => onPageChange(pageProp), ref: ref, size: "sm", text: pageProp, variant: "text", ...styles.button, ...activeProps, ...rest }));
 });
 export default PaginationButton;

package/dist/esm/pagination/paginationEllipsis.js

@@ -7,6 +7,6 @@ import { usePaginationContext } from './context';
 export const PaginationEllipsis = vui((props, ref) => {
     const { children, className, ...rest } = props;
     const styles = useStyleConfig('Pagination', usePaginationContext());
-    return (React.createElement(Box, { alignItems: "center", className: cs('vui-paginationEllipsis', className), px: "10px", ref: ref, ...styles.ellipsis, ...rest }, children ?? '...'));
+    return (React.createElement(Box, { alignItems: "center", className: cs('vui-paginationEllipsis', className), px: "10px", ref: ref, ...styles.ellipsis, ...rest }, children ?? '…'));
 });
 export default PaginationEllipsis;

package/dist/esm/pagination/paginationGoToPage.js

@@ -17,7 +17,7 @@ export const PaginationGoToPage = vui((props, ref) => {
         }
     };
     return (React.createElement(Box, { centerV: true, className: cs('vui-paginationGoToPage', className), lineHeight: "normal", ref: ref, ...styles.goToPage, ...rest },
-        React.createElement(T, { size: "sm", weight: "medium" }, "Go to"),
+        React.createElement(T, { size: "sm", weight: "medium" }, "Go\u00A0to"),
         React.createElement(Input, { max: pageCount, min: 1, mx: 1, onChange: onChange, size: "sm", type: "number", w: 56 }),
         React.createElement(T, { size: "sm", weight: "medium" }, "Page")));
 });

package/dist/esm/pagination/paginationPrevNext.js

@@ -12,7 +12,7 @@ export const PaginationPrevNext = vui((props, ref) => {
     const pageChange = isPrev ? -1 : 1;
     const directionProps = {
         disabled: isPrev ? page === 1 : page === pageCount,
-        icon: isPrev ? 'falAngleLeft' : 'falAngleRight',
+        icon: `falAngle${isPrev ? 'Left' : 'Right'}`,
         onClick: () => onPageChange(page + pageChange)
     };
     return (React.createElement(Button, { className: cs('vui-paginationPrevNext', className), minW: 0, ref: ref, size: "sm", variant: "text", ...styles.prevNext, ...directionProps, ...rest }));

package/dist/esm/pagination/paginationResults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginationResults.d.ts","sourceRoot":"","sources":["../../../src/pagination/paginationResults.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,uDAAuD;AACvD,eAAO,MAAM,iBAAiB,gDAkB5B,CAAA;AAEF,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"paginationResults.d.ts","sourceRoot":"","sources":["../../../src/pagination/paginationResults.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,uDAAuD;AACvD,eAAO,MAAM,iBAAiB,gDAU5B,CAAA;AAEF,eAAe,iBAAiB,CAAA"}

package/dist/esm/pagination/paginationResults.js

@@ -8,6 +8,6 @@ export const PaginationResults = vui((props, ref) => {
     const { children, className, ...rest } = props;
     const { count, rangeEnd, rangeStart } = usePaginationContext();
     const styles = useStyleConfig('Pagination', usePaginationContext());
-    return (React.createElement(T, { className: cs('vui-paginationResults', className), color: "grey.80", ref: ref, size: "sm", weight: "medium", ...styles.results, ...rest }, children ?? `Showing ${rangeStart} to ${rangeEnd} of ${count} results.`));
+    return (React.createElement(T, { className: cs('vui-paginationResults', className), ref: ref, size: "sm", ...styles.results, ...rest }, children ?? `Showing ${rangeStart} to ${rangeEnd} of ${count} results.`));
 });
 export default PaginationResults;

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

@@ -1,5 +1,31 @@
 declare const _default: {
-    baseStyle: {};
+    baseStyle: {
+        button: {
+            color: string;
+            hoverBg: string;
+            minW: number;
+            bg: string;
+            border: string;
+        };
+        ellipsis: {
+            bg: string;
+            border: string;
+            color: string;
+        };
+        goToPage: {
+            bg: string;
+            border: string;
+            color: string;
+        };
+        prevNext: {
+            bg: string;
+            border: string;
+            color: string;
+        };
+        results: {
+            color: string;
+        };
+    };
     defaultProps: {};
     parts: string[];
     sizes: {};

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

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

package/dist/esm/pagination/theme.js

@@ -1,4 +1,24 @@
-const baseStyle = {};
+const base = {
+    bg: 'transparent',
+    border: 'none',
+    color: 'darkBlue.18'
+};
+const baseStyle = {
+    button: {
+        ...base,
+        color: 'seaBlue.28',
+        hoverBg: 'skyBlue.80',
+        minW: 24
+    },
+    ellipsis: { ...base },
+    goToPage: { ...base },
+    prevNext: {
+        ...base
+    },
+    results: {
+        color: 'sandstone.30'
+    }
+};
 const defaultProps = {};
 const parts = ['container', 'button', 'ellipsis', 'goToPage', 'navigation', 'prevNext', 'results'];
 const sizes = {};

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

@@ -3,7 +3,7 @@ import { ThemingProps } from '../theme';
 export declare type SkeletonProps = SystemProps & ThemingProps<'Skeleton'> & {
     /** Children are disabled for this component. */
     children?: never;
-    /** Available theme colors for this component. @default blue */
+    /** Available theme colors for this component. @deprecated */
     colorScheme?: 'blue' | 'grey';
     /** Displays given amount of skeleton elements. */
     repeat?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.types.d.ts","sourceRoot":"","sources":["../../../src/skeleton/skeleton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA"}
+{"version":3,"file":"skeleton.types.d.ts","sourceRoot":"","sources":["../../../src/skeleton/skeleton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA"}

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

@@ -1,17 +1,8 @@
-import { Dict } from '../utils';
-declare function variantCircle(props: Dict): {
-    borderRadius: string;
-    bg: string;
-};
-declare function variantRectangle(props: Dict): {
-    borderRadius: string;
-    bg: string;
-    w: string;
-};
 declare const _default: {
-    baseStyle: {};
+    baseStyle: {
+        bg: string;
+    };
     defaultProps: {
-        colorScheme: string;
         size: string;
         variant: string;
     };
@@ -30,8 +21,13 @@ declare const _default: {
         };
     };
     variants: {
-        circle: typeof variantCircle;
-        rect: typeof variantRectangle;
+        circle: {
+            borderRadius: string;
+        };
+        rect: {
+            borderRadius: string;
+            w: string;
+        };
     };
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/skeleton/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,aAAa,CAAC,KAAK,EAAE,IAAI;;;EASjC;AAED,iBAAS,gBAAgB,CAAC,KAAK,EAAE,IAAI;;;;EAUpC;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BD,wBAKC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/skeleton/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,wBAKC"}

package/dist/esm/skeleton/theme.js

@@ -1,23 +1,7 @@
-function variantCircle(props) {
-    const { colorScheme: c } = props;
-    const styles = {
-        borderRadius: '50%',
-        bg: `${c}.20`
-    };
-    return styles;
-}
-function variantRectangle(props) {
-    const { colorScheme: c } = props;
-    const styles = {
-        borderRadius: 'md',
-        bg: `${c}.20`,
-        w: '100%'
-    };
-    return styles;
-}
-const baseStyle = {};
+const baseStyle = {
+    bg: 'skyBlue.95'
+};
 const defaultProps = {
-    colorScheme: 'blue',
     size: 'md',
     variant: 'rect'
 };
@@ -36,8 +20,13 @@ const sizes = {
     }
 };
 const variants = {
-    circle: variantCircle,
-    rect: variantRectangle
+    circle: {
+        borderRadius: '50%'
+    },
+    rect: {
+        borderRadius: 'md',
+        w: '100%'
+    }
 };
 export default {
     baseStyle,

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,OAAO,MAAM,WAAW,CAAA;AAE/B,eAAO,MAAM,OAAO,gIAuBnB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,GAAG;YA2FN,gBAAgB;UAClB,cAAc;UACd,cAAc;CACrB,CAAA;AAMD,eAAe,GAAG,CAAA"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,OAAO,MAAM,WAAW,CAAA;AAE/B,eAAO,MAAM,OAAO,gIAsBnB,CAAA;AACD;;;GAGG;AACH,eAAO,MAAM,GAAG;YA2FN,gBAAgB;UAClB,cAAc;UACd,cAAc;CACrB,CAAA;AAMD,eAAe,GAAG,CAAA"}

package/dist/esm/tag/tag.js

@@ -23,8 +23,7 @@ export const TagBase = styled.spanBox `
   }
 
   &[aria-disabled='true'] {
-    background-color: disabled .bg;
-    color: disabled .color;
+    opacity: 0.5;
     cursor: not-allowed;
     user-select: none;
   }
@@ -69,7 +68,7 @@ export const Tag = vui((props, ref) => {
                 isString(iconLeft) ? React.createElement(TagIcon, { mr: spaceX, name: iconLeft }) : iconLeft,
                 children ?? (isReactText(text) ? React.createElement(TagText, { ...{ isTruncated, text } }) : text),
                 isString(iconRight) ? React.createElement(TagIcon, { ml: spaceX, name: iconRight }) : iconRight,
-                onDelete ? React.createElement(TagButton, { isRound: isRound, ml: spaceX, onClick: onDelete }) : itemRight)))));
+                onDelete ? React.createElement(TagButton, { disabled: disabled, isRound: isRound, ml: spaceX, onClick: onDelete }) : itemRight)))));
 });
 Tag.Button = TagButton;
 Tag.Icon = TagIcon;

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

@@ -3,6 +3,7 @@ declare const _default: {
     defaultProps: {
         size: string;
         variant: string;
+        fontWeight: string;
     };
     parts: string[];
     sizes: {

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tag/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAmJE,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFpB,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tag/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAoJE,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFpB,wBAMC"}

package/dist/esm/tag/theme.js

@@ -1,7 +1,8 @@
 const baseStyle = {};
 const defaultProps = {
     size: 'md',
-    variant: 'subtleBlue'
+    variant: 'subtleBlue',
+    fontWeight: 'medium'
 };
 const parts = ['container', 'button', 'icon', 'text'];
 const sizes = {
@@ -62,18 +63,18 @@ const sizes = {
 const variants = {
     subtleGrey: {
         container: {
-            bg: 'sandstone.95',
-            hoverBg: 'sandstone.90',
-            borderColor: 'sandstone.90',
+            bg: 'sandstone.90',
+            hoverBg: 'sandstone.85',
+            borderColor: 'sandstone.85',
             color: 'sandstone.20',
-            activeBg: 'sandstone.85'
+            activeBg: 'sandstone.79'
         },
         button: {
             bg: 'transparent',
-            hoverBg: 'sandstone.90',
+            hoverBg: 'sandstone.85',
             hoverBorderColor: 'transparent',
             color: 'sandstone.20',
-            activeBg: 'sandstone.85'
+            activeBg: 'sandstone.79'
         }
     },
     subtleBlue: {
@@ -193,10 +194,10 @@ const variants = {
     },
     solidYellow: {
         container: {
-            bg: 'sunflower.65',
+            bg: 'sunflower.50',
             hoverBg: 'sunflower.80',
             activeBg: 'sunflower.85',
-            borderColor: 'sunflower.65',
+            borderColor: 'sunflower.50',
             color: 'sunflower.15'
         },
         button: {