@veracity/vui 2.0.6 → 2.2.0

package/dist/cjs/input/consts.js

@@ -1,30 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inputStateMapping = exports.redColor = exports.greyColor = exports.greyLightColor = void 0;
-exports.greyLightColor = 'warmGrey.90';
-exports.greyColor = 'sandstone.60';
-exports.redColor = 'energyRed.45';
+exports.inputStateMapping = exports.stateIcons = exports.inputColors = void 0;
+exports.inputColors = {
+    border: 'sandstone.60',
+    placeholder: 'sandstone.55',
+    inputText: 'sandstone.10',
+    helpText: 'sandstone.30',
+    icons: 'seaBlue.28',
+    disabled: 'sandstone.95',
+    focus: 'seaBlue.28',
+    error: 'energyRed.45',
+    loading: 'seaBlue.70',
+    success: 'landGreen.41'
+};
+exports.stateIcons = {
+    error: 'falExclamationTriangle',
+    loading: 'fadSpinnerThird',
+    success: 'falCheck'
+};
 exports.inputStateMapping = {
     error: {
-        colorScheme: 'red',
+        variant: 'red',
         iconProps: {
-            color: 'energyRed.45',
-            icon: 'falExclamationTriangle'
+            color: exports.inputColors.error,
+            icon: exports.stateIcons.error
         }
     },
     loading: {
-        colorScheme: 'grey',
+        variant: 'grey',
         iconProps: {
             animation: 'vui-spin 0.6s linear infinite',
-            name: 'fadSpinnerThird',
-            pathFill: ['seaBlue.90', 'seaBlue.28']
+            name: exports.stateIcons.loading,
+            pathFill: [exports.inputColors.loading, exports.inputColors.icons]
         }
     },
     success: {
-        colorScheme: 'green',
+        variant: 'green',
         iconProps: {
-            color: 'landGreen.30',
-            icon: 'falCheck'
+            color: exports.inputColors.success,
+            icon: exports.stateIcons.success
         }
     }
 };

package/dist/cjs/input/helpText.js

@@ -28,9 +28,9 @@ exports.HelpText = (0, core_1.vui)((props, ref) => {
     const inputProps = (0, context_1.useInputContext)();
     const mergedProps = Object.assign(Object.assign({}, inputProps), props);
     const styles = (0, core_1.useStyleConfig)('Input', mergedProps);
-    const color = isError ? consts_1.redColor : consts_1.greyColor;
+    const color = isError ? consts_1.inputColors.error : consts_1.inputColors.helpText;
     return (react_1.default.createElement(p_1.default, Object.assign({ className: (0, utils_1.cs)('vui-inputHelpText', className), color: color, display: "flex", py: 1, ref: ref }, styles.helpText, rest),
-        isError && react_1.default.createElement(icon_1.default, { mr: 1, name: "falExclamationTriangle", pathFill: consts_1.redColor, size: "sm" }),
+        isError && react_1.default.createElement(icon_1.default, { mr: 1, name: "falExclamationTriangle", pathFill: consts_1.inputColors.error, size: "sm" }),
         children));
 });
 exports.default = exports.HelpText;

package/dist/cjs/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAgIV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAuHV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}

package/dist/cjs/input/input.js

@@ -71,16 +71,13 @@ exports.InputBase = core_1.styled.divBox `
  * Exposes some props to the children via context.
  */
 exports.Input = (0, core_1.vui)((props, ref) => {
-    var _a, _b, _c, _d;
-    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 } = props, rest = __rest(props, ["autoComplete", "autoFocus", "children", "className", "colorScheme", "defaultValue", "disabled", "errorText", "iconLeft", "iconRight", "id", "input", "inputProps", "inputRef", "isInvalid", "itemLeft", "itemRight", "helpText", "max", "maxLength", "min", "name", "onBlur", "onChange", "onFocus", "pattern", "placeholder", "readOnly", "required", "showCount", "size", "state", "stateMapping", "step", "type", "value", "variant"]);
+    var _a, _b;
+    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 } = props, rest = __rest(props, ["autoComplete", "autoFocus", "children", "className", "defaultValue", "disabled", "errorText", "iconLeft", "iconRight", "id", "input", "inputProps", "inputRef", "itemLeft", "itemRight", "helpText", "max", "maxLength", "min", "name", "onBlur", "onChange", "onFocus", "pattern", "placeholder", "readOnly", "required", "showCount", "size", "state", "stateMapping", "step", "type", "value", "variant"]);
     const [count, setCount] = (0, react_1.useState)((0, helpers_1.getInitialCount)(props));
     const [valueInternal, setValueInternal] = (0, react_1.useState)(defaultValue || '');
     const states = Object.assign(Object.assign({}, consts_1.inputStateMapping), stateMapping);
-    const computedColorScheme = (0, utils_1.filterUndefined)({
-        colorScheme: (_a = colorScheme !== null && colorScheme !== void 0 ? colorScheme : (isInvalid ? 'red' : undefined)) !== null && _a !== void 0 ? _a : (_b = states[state]) === null || _b === void 0 ? void 0 : _b.colorScheme
-    });
-    const styles = (0, core_1.useStyleConfig)('Input', Object.assign(Object.assign({}, computedColorScheme), props));
-    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
+    const styles = (0, core_1.useStyleConfig)('Input', props);
+    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ disabled, size, variant }), [disabled, size, variant]);
     function onChange(e) {
         setValueInternal(e.target.value);
         setCount(e.target.value.length);
@@ -88,7 +85,7 @@ exports.Input = (0, core_1.vui)((props, ref) => {
     }
     const aliasedProps = (0, utils_1.filterUndefined)({
         'aria-disabled': disabled,
-        bg: readOnly ? consts_1.greyLightColor : undefined,
+        bg: readOnly ? consts_1.inputColors.disabled : undefined,
         focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
         focusWithinRingColor: readOnly ? 'transparent' : undefined
     });
@@ -100,7 +97,7 @@ exports.Input = (0, core_1.vui)((props, ref) => {
     return (react_1.default.createElement(context_1.InputProvider, { value: context },
         react_1.default.createElement(exports.InputBase, Object.assign({ className: (0, utils_1.cs)('vui-input', className), ref: ref }, styles.container, aliasedProps, rest),
             itemLeft,
-            (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(inputIcon_1.default, { ml: 1, name: iconLeft }) : iconLeft, (_c = children !== null && children !== void 0 ? children : input) !== null && _c !== void 0 ? _c : (react_1.default.createElement(inputInput_1.default, Object.assign({ ref: inputRef }, {
+            (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(inputIcon_1.default, { ml: 1, name: iconLeft }) : iconLeft, (_a = children !== null && children !== void 0 ? children : input) !== null && _a !== void 0 ? _a : (react_1.default.createElement(inputInput_1.default, Object.assign({ ref: inputRef }, {
             autoComplete,
             autoFocus,
             defaultValue,
@@ -122,8 +119,8 @@ exports.Input = (0, core_1.vui)((props, ref) => {
         }, { value: valueInternal }, inputProps))),
             (0, utils_1.isString)(iconRight) ? react_1.default.createElement(inputIcon_1.default, { mr: 1, name: iconRight }) : iconRight,
             itemRight,
-            state && react_1.default.createElement(inputIcon_1.default, Object.assign({ mr: 1 }, (_d = states[state]) === null || _d === void 0 ? void 0 : _d.iconProps)),
-            showCount && (react_1.default.createElement(t_1.T, { className: "vui-inputCount", color: maxLength && count > maxLength ? consts_1.redColor : consts_1.greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+            state && react_1.default.createElement(inputIcon_1.default, Object.assign({ mr: 1 }, (_b = states[state]) === null || _b === void 0 ? void 0 : _b.iconProps)),
+            showCount && (react_1.default.createElement(t_1.T, { className: "vui-inputCount", color: maxLength && count > maxLength ? consts_1.inputColors.error : consts_1.inputColors.helpText, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
                 count,
                 " ",
                 maxLength ? `/ ${maxLength}` : null))),

package/dist/cjs/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/cjs/input/input.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.types.d.ts","sourceRoot":"","sources":["../../../src/input/input.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"input.types.d.ts","sourceRoot":"","sources":["../../../src/input/input.types.ts"],"names":[],"mappings":"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"}

package/dist/cjs/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/cjs/input/inputIcon.js

@@ -19,6 +19,7 @@ const react_1 = __importDefault(require("react"));
 const core_1 = require("../core");
 const icon_1 = __importDefault(require("../icon"));
 const utils_1 = require("../utils");
+const consts_1 = require("./consts");
 const context_1 = require("./context");
 /** Displays an icon within the Input. */
 exports.InputIcon = (0, core_1.vui)((props, ref) => {
@@ -26,7 +27,7 @@ exports.InputIcon = (0, core_1.vui)((props, ref) => {
     const inputProps = (0, context_1.useInputContext)();
     const mergedProps = Object.assign(Object.assign({}, inputProps), props);
     const styles = (0, core_1.useStyleConfig)('Input', mergedProps);
-    const color = !mergedProps.disabled ? 'blue.80' : 'grey.50';
+    const color = !mergedProps.disabled ? consts_1.inputColors.icons : consts_1.inputColors.placeholder;
     return react_1.default.createElement(icon_1.default, Object.assign({ className: (0, utils_1.cs)('vui-inputIcon', className), color: color, ref: ref }, styles.icon, rest));
 });
 exports.default = exports.InputIcon;

package/dist/cjs/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/cjs/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/cjs/input/theme.js

@@ -1,29 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function variantDefault(props) {
-    const { colorScheme: c } = props;
-    const container = {
-        borderColor: `${c}.80`,
+const consts_1 = require("./consts");
+const baseStyle = {
+    container: {
         focusWithinRing: 2,
-        focusWithinRingColor: `${c}.80`
-    };
-    if (c === 'grey') {
-        container.borderColor = `${c}.60`;
-        container.focusWithinRingColor = 'blue.50';
+        color: consts_1.inputColors.inputText
+    },
+    input: {
+        color: { placeholder: consts_1.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
@@ -33,7 +26,7 @@ const sizes = {
         },
         input: {}
     },
-    sm: {
+    md: {
         container: {
             fontSize: 'sm',
             h: 32
@@ -43,7 +36,7 @@ const sizes = {
         },
         input: {}
     },
-    md: {
+    lg: {
         container: {
             fontSize: 'md',
             h: 40
@@ -53,7 +46,7 @@ const sizes = {
         },
         input: {}
     },
-    lg: {
+    xl: {
         container: {
             fontSize: 'lg',
             h: 48
@@ -65,7 +58,24 @@ const sizes = {
     }
 };
 const variants = {
-    default: variantDefault
+    grey: {
+        container: {
+            borderColor: consts_1.inputColors.border,
+            focusWithinRingColor: consts_1.inputColors.focus
+        }
+    },
+    green: {
+        container: {
+            borderColor: consts_1.inputColors.success,
+            focusWithinRingColor: consts_1.inputColors.success
+        }
+    },
+    red: {
+        container: {
+            borderColor: consts_1.inputColors.error,
+            focusWithinRingColor: consts_1.inputColors.error
+        }
+    }
 };
 exports.default = {
     baseStyle,

package/dist/cjs/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/cjs/pagination/paginationButton.js

@@ -28,12 +28,9 @@ exports.PaginationButton = (0, core_1.vui)((props, ref) => {
     const isActive = isActiveProp !== null && isActiveProp !== void 0 ? isActiveProp : pageProp === page;
     const activeProps = isActive
         ? {
-            bg: 'blue.20',
-            color: 'blue.80',
-            hoverBg: 'blue.30',
-            activeBg: 'blue.40'
+            bg: 'skyBlue.85'
         }
         : {};
-    return (react_1.default.createElement(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-paginationButton', className), minW: 0, onClick: () => onPageChange(pageProp), ref: ref, size: "sm", text: pageProp, variant: "text" }, styles.button, activeProps, rest)));
+    return (react_1.default.createElement(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-paginationButton', className), onClick: () => onPageChange(pageProp), ref: ref, size: "sm", text: pageProp, variant: "text" }, styles.button, activeProps, rest)));
 });
 exports.default = exports.PaginationButton;

package/dist/cjs/pagination/paginationEllipsis.js

@@ -24,6 +24,6 @@ const context_1 = require("./context");
 exports.PaginationEllipsis = (0, core_1.vui)((props, ref) => {
     const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
-    return (react_1.default.createElement(box_1.default, Object.assign({ alignItems: "center", className: (0, utils_1.cs)('vui-paginationEllipsis', className), px: "10px", ref: ref }, styles.ellipsis, rest), children !== null && children !== void 0 ? children : '...'));
+    return (react_1.default.createElement(box_1.default, Object.assign({ alignItems: "center", className: (0, utils_1.cs)('vui-paginationEllipsis', className), px: "10px", ref: ref }, styles.ellipsis, rest), children !== null && children !== void 0 ? children : '…'));
 });
 exports.default = exports.PaginationEllipsis;

package/dist/cjs/pagination/paginationGoToPage.js

@@ -34,7 +34,7 @@ exports.PaginationGoToPage = (0, core_1.vui)((props, ref) => {
         }
     };
     return (react_1.default.createElement(box_1.default, Object.assign({ centerV: true, className: (0, utils_1.cs)('vui-paginationGoToPage', className), lineHeight: "normal", ref: ref }, styles.goToPage, rest),
-        react_1.default.createElement(t_1.default, { size: "sm", weight: "medium" }, "Go to"),
+        react_1.default.createElement(t_1.default, { size: "sm", weight: "medium" }, "Go\u00A0to"),
         react_1.default.createElement(input_1.default, { max: pageCount, min: 1, mx: 1, onChange: onChange, size: "sm", type: "number", w: 56 }),
         react_1.default.createElement(t_1.default, { size: "sm", weight: "medium" }, "Page")));
 });

package/dist/cjs/pagination/paginationPrevNext.js

@@ -29,7 +29,7 @@ exports.PaginationPrevNext = (0, core_1.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_1.default.createElement(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-paginationPrevNext', className), minW: 0, ref: ref, size: "sm", variant: "text" }, styles.prevNext, directionProps, rest)));

package/dist/cjs/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/cjs/pagination/paginationResults.js

@@ -25,6 +25,6 @@ exports.PaginationResults = (0, core_1.vui)((props, ref) => {
     const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const { count, rangeEnd, rangeStart } = (0, context_1.usePaginationContext)();
     const styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
-    return (react_1.default.createElement(t_1.default, Object.assign({ className: (0, utils_1.cs)('vui-paginationResults', className), color: "grey.80", ref: ref, size: "sm", weight: "medium" }, styles.results, rest), children !== null && children !== void 0 ? children : `Showing ${rangeStart} to ${rangeEnd} of ${count} results.`));
+    return (react_1.default.createElement(t_1.default, Object.assign({ className: (0, utils_1.cs)('vui-paginationResults', className), ref: ref, size: "sm" }, styles.results, rest), children !== null && children !== void 0 ? children : `Showing ${rangeStart} to ${rangeEnd} of ${count} results.`));
 });
 exports.default = exports.PaginationResults;

package/dist/cjs/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/cjs/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/cjs/pagination/theme.js

@@ -1,6 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const baseStyle = {};
+const base = {
+    bg: 'transparent',
+    border: 'none',
+    color: 'darkBlue.18'
+};
+const baseStyle = {
+    button: Object.assign(Object.assign({}, base), { color: 'seaBlue.28', hoverBg: 'skyBlue.80', minW: 24 }),
+    ellipsis: Object.assign({}, base),
+    goToPage: Object.assign({}, base),
+    prevNext: Object.assign({}, base),
+    results: {
+        color: 'sandstone.30'
+    }
+};
 const defaultProps = {};
 const parts = ['container', 'button', 'ellipsis', 'goToPage', 'navigation', 'prevNext', 'results'];
 const sizes = {};

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/skeleton/theme.js

@@ -1,25 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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'
 };
@@ -38,8 +22,13 @@ const sizes = {
     }
 };
 const variants = {
-    circle: variantCircle,
-    rect: variantRectangle
+    circle: {
+        borderRadius: '50%'
+    },
+    rect: {
+        borderRadius: 'md',
+        w: '100%'
+    }
 };
 exports.default = {
     baseStyle,

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