@veracity/vui 2.1.0 → 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":"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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/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/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/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 = {

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

@@ -32,6 +32,7 @@ declare const _default: {
             colorScheme: string;
             size: string;
             variant: string;
+            fontWeight: string;
         };
         sizes: {
             xs: {
@@ -80,6 +81,7 @@ declare const _default: {
         defaultProps: {
             size: string;
             variant: string;
+            fontWeight: string;
         };
         parts: string[];
         sizes: {
@@ -231,6 +233,7 @@ declare const _default: {
         defaultProps: {
             size: string;
             variant: string;
+            fontWeight: string;
         };
         parts: string[];
         sizes: {
@@ -566,10 +569,25 @@ declare const _default: {
         variants: {};
     };
     DragAndDrop: {
-        baseStyle: {};
-        defaultProps: {};
+        baseStyle: {
+            borderWidth: number;
+            borderStyle: string;
+            borderColor: string;
+            bg: string;
+            color: string;
+            hoverBg: string;
+        };
+        defaultProps: {
+            variant: string;
+        };
         sizes: {};
-        variants: {};
+        variants: {
+            default: {};
+            outlined: {
+                borderColor: string;
+                borderStyle: string;
+            };
+        };
     };
     Footer: {
         baseStyle: {};
@@ -803,15 +821,24 @@ declare const _default: {
         variants: {};
     };
     Input: {
-        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;
@@ -821,7 +848,7 @@ declare const _default: {
                 };
                 input: {};
             };
-            sm: {
+            md: {
                 container: {
                     fontSize: string;
                     h: number;
@@ -831,7 +858,7 @@ declare const _default: {
                 };
                 input: {};
             };
-            md: {
+            lg: {
                 container: {
                     fontSize: string;
                     h: number;
@@ -841,7 +868,7 @@ declare const _default: {
                 };
                 input: {};
             };
-            lg: {
+            xl: {
                 container: {
                     fontSize: string;
                     h: number;
@@ -853,14 +880,23 @@ declare const _default: {
             };
         };
         variants: {
-            default: (props: import("..").Dict<any>) => {
+            grey: {
+                container: {
+                    borderColor: string;
+                    focusWithinRingColor: string;
+                };
+            };
+            green: {
+                container: {
+                    borderColor: string;
+                    focusWithinRingColor: string;
+                };
+            };
+            red: {
                 container: {
                     borderColor: string;
-                    focusWithinRing: number;
                     focusWithinRingColor: string;
                 };
-                icon: {};
-                input: {};
             };
         };
     };
@@ -1324,9 +1360,10 @@ declare const _default: {
         variants: {};
     };
     Skeleton: {
-        baseStyle: {};
+        baseStyle: {
+            bg: string;
+        };
         defaultProps: {
-            colorScheme: string;
             size: string;
             variant: string;
         };
@@ -1345,13 +1382,11 @@ declare const _default: {
             };
         };
         variants: {
-            circle: (props: import("..").Dict<any>) => {
+            circle: {
                 borderRadius: string;
-                bg: string;
             };
-            rect: (props: import("..").Dict<any>) => {
+            rect: {
                 borderRadius: string;
-                bg: string;
                 w: string;
             };
         };
@@ -1614,6 +1649,7 @@ declare const _default: {
         defaultProps: {
             size: string;
             variant: string;
+            fontWeight: string;
         };
         parts: string[];
         sizes: {
@@ -1856,6 +1892,61 @@ declare const _default: {
             };
         };
     };
+    Tree: {
+        baseStyle: {};
+        defaultProps: {
+            size: string;
+            variant: string;
+        };
+        parts: string[];
+        sizes: {
+            sm: {
+                icon: {
+                    size: string;
+                };
+                item: {
+                    fontSize: string;
+                    h: number;
+                    py: string;
+                };
+            };
+            md: {
+                icon: {
+                    size: string;
+                };
+                item: {
+                    fontSize: string;
+                    h: number;
+                    py: string;
+                };
+            };
+            lg: {
+                item: {
+                    fontSize: string;
+                    h: number;
+                    py: string;
+                };
+                icon: {
+                    size: string;
+                };
+            };
+            xl: {
+                item: {
+                    fontSize: string;
+                    h: number;
+                    py: string;
+                };
+                icon: {
+                    scale: number;
+                };
+            };
+        };
+        variants: {
+            default: (props: import("..").Dict<any>) => {
+                item: import("..").Dict<any>;
+            };
+        };
+    };
 };
 export default _default;
 //# sourceMappingURL=components.d.ts.map