@veracity/vui 2.1.0 → 2.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,eAAO,MAAM,UAAU,gIActB,CAAA;AAED,kEAAkE;AAClE,eAAO,MAAM,MAAM,qDAkDjB,CAAA;AAEF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAY5C,eAAO,MAAM,UAAU,gIAoBtB,CAAA;AAED,kEAAkE;AAClE,eAAO,MAAM,MAAM,qDA8DjB,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/dist/cjs/avatar/avatar.js

@@ -21,6 +21,12 @@ const icon_1 = __importDefault(require("../icon"));
 const image_1 = __importDefault(require("../image"));
 const utils_1 = require("../utils");
 const helpers_1 = require("./helpers");
+function imageExists(image_url) {
+    const http = new XMLHttpRequest();
+    http.open('HEAD', image_url, false);
+    http.send();
+    return http.status !== 404;
+}
 exports.AvatarBase = core_1.styled.spanBox `
   align-items: center;
   display: inline-flex;
@@ -35,23 +41,36 @@ exports.AvatarBase = core_1.styled.spanBox `
   &:focus {
     border-color: transparent;
   }
+
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    user-select: none;
+  }
 `;
 /** Displays user data, such as name initials or profile image. */
 exports.Avatar = (0, core_1.vui)((props, ref) => {
-    const _a = (0, core_1.omitThemingProps)(props), { children, className, getInitials = helpers_1.defaultGetInitials, icon, isInteractive = props.onClick !== undefined, isSquare, name = '', src } = _a, rest = __rest(_a, ["children", "className", "getInitials", "icon", "isInteractive", "isSquare", "name", "src"]);
+    const _a = (0, core_1.omitThemingProps)(props), { children, className, disabled, getInitials = helpers_1.defaultGetInitials, icon, isInteractive = props.onClick !== undefined, isSquare, name = '', src } = _a, rest = __rest(_a, ["children", "className", "disabled", "getInitials", "icon", "isInteractive", "isSquare", "name", "src"]);
     const _b = (0, core_1.useStyleConfig)('Avatar', props), { activeBg, h, hoverBg, iconSize } = _b, styles = __rest(_b, ["activeBg", "h", "hoverBg", "iconSize"]);
-    const borderRadius = isSquare ? 'none' : '50%';
+    const borderRadius = isSquare ? (props.size === 'sm' ? '3px' : '6px') : '50%';
     const initials = getInitials(name);
-    const interactiveProps = isInteractive
+    const internalIcon = src && !imageExists(src) ? 'falUser' : icon;
+    const interactiveProps = !disabled && isInteractive
         ? {
             cursor: 'pointer',
             hoverBg,
+            hoverOpacity: src ? 0.85 : 1,
+            activeOpacity: src ? 0.7 : 1,
             activeBg,
             focusRing: 3,
             tabIndex: 0,
             userSelect: 'none'
         }
         : {};
-    return (react_1.default.createElement(exports.AvatarBase, Object.assign({ borderRadius: borderRadius, className: (0, utils_1.cs)('vui-avatar', className), h: h, ref: ref, w: h }, styles, interactiveProps, rest), children ? (children) : src ? (react_1.default.createElement(image_1.default, Object.assign({}, { borderRadius, src }))) : icon ? (react_1.default.createElement(icon_1.default, { name: icon, size: iconSize })) : initials ? (initials) : null));
+    const aliasedProps = (0, utils_1.filterUndefined)({
+        borderRadius: borderRadius,
+        'aria-disabled': disabled
+    });
+    return (react_1.default.createElement(exports.AvatarBase, Object.assign({ borderRadius: borderRadius, className: (0, utils_1.cs)('vui-avatar', className), h: h, ref: ref, w: h }, styles, interactiveProps, aliasedProps, rest), children ? (children) : src && imageExists(src) ? (react_1.default.createElement(image_1.default, Object.assign({}, { borderRadius, src }))) : internalIcon ? (react_1.default.createElement(icon_1.default, { name: internalIcon, size: iconSize })) : initials ? (initials) : null));
 });
 exports.default = exports.Avatar;

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

@@ -2,8 +2,10 @@ import { IconProp } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export declare type AvatarProps = SystemProps & ThemingProps<'Avatar'> & {
-    /** Available theme colors for this component. @default blue */
+    /** Available theme colors for this component. @deprecated */
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
+    /** Displays avatar in disabled state with appropriate styling. */
+    disabled?: boolean;
     /** Custom function to compute initials based on the provided name. */
     getInitials?: (name: string) => string;
     /** Renders an icon as the only content. */

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.types.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAA;IACvE,sEAAsE;IACtE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,2CAA2C;IAC3C,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}
+{"version":3,"file":"avatar.types.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAA;IACvE,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sEAAsE;IACtE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,2CAA2C;IAC3C,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}

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

@@ -1,29 +1,11 @@
-import { Dict } from '../utils';
-declare function variantSolid(props: Dict): {
-    hoverBg: string;
-    activeBg: string;
-    bg: string;
-    color: string;
-};
-declare function variantSubtle(props: Dict): {
-    hoverBg: string;
-    activeBg: string;
-    bg: string;
-    color: string;
-};
 declare const _default: {
     baseStyle: {};
     defaultProps: {
-        colorScheme: string;
         size: string;
         variant: string;
+        fontWeight: string;
     };
     sizes: {
-        xs: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
-        };
         sm: {
             fontSize: string;
             h: number;
@@ -44,10 +26,126 @@ declare const _default: {
             h: number;
             iconSize: string;
         };
+        xxl: {
+            fontSize: string;
+            h: number;
+            iconSize: string;
+        };
     };
     variants: {
-        solid: typeof variantSolid;
-        subtle: typeof variantSubtle;
+        subtleGrey: {
+            bg: string;
+            hoverBg: string;
+            borderColor: string;
+            color: string;
+            activeBg: string;
+        };
+        subtleBlue: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            borderColor: string;
+            color: string;
+        };
+        subtleRed: {
+            bg: string;
+            borderColor: string;
+            hoverBg: string;
+            activeBg: string;
+            color: string;
+        };
+        subtleYellow: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            borderColor: string;
+            color: string;
+        };
+        subtleGreen: {
+            bg: string;
+            hoverBg: string;
+            borderColor: string;
+            color: string;
+            activeBg: string;
+        };
+        subtleLavender: {
+            bg: string;
+            hoverBg: string;
+            borderColor: string;
+            color: string;
+            activeBg: string;
+        };
+        subtleEucalyptus: {
+            bg: string;
+            hoverBg: string;
+            borderColor: string;
+            color: string;
+            activeBg: string;
+        };
+        subtleTerracotta: {
+            bg: string;
+            hoverBg: string;
+            borderColor: string;
+            color: string;
+            activeBg: string;
+        };
+        /** solids next */
+        solidBlue: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            borderColor: string;
+            color: string;
+        };
+        solidDarkBlue: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            borderColor: string;
+            color: string;
+        };
+        solidRed: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            borderColor: string;
+            color: string;
+        };
+        solidYellow: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            borderColor: string;
+            color: string;
+        };
+        solidGreen: {
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            borderColor: string;
+            color: string;
+        };
+        solidLavender: {
+            bg: string;
+            hoverBg: string;
+            borderColor: string;
+            color: string;
+            activeBg: string;
+        };
+        solidEucalyptus: {
+            bg: string;
+            hoverBg: string;
+            borderColor: string;
+            color: string;
+            activeBg: string;
+        };
+        solidTerracotta: {
+            bg: string;
+            hoverBg: string;
+            borderColor: string;
+            color: string;
+            activeBg: string;
+        };
     };
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/avatar/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,YAAY,CAAC,KAAK,EAAE,IAAI;;;;;EAuBhC;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,IAAI;;;;;EA4BjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CD,wBAKC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/avatar/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA8FE,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DpB,wBAKC"}

package/dist/cjs/avatar/theme.js

@@ -1,84 +1,152 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function variantSolid(props) {
-    const { colorScheme: c } = props;
-    const styles = {
-        hoverBg: `${c}.90`,
-        activeBg: `${c}.100`,
-        bg: `${c}.80`,
-        color: 'white'
-    };
-    // Special cases
-    if (c === 'prussian') {
-        styles.activeBg = 'prussian.50';
-        styles.hoverBg = 'prussian.60';
-    }
-    if (c === 'yellow') {
-        styles.hoverBg = `${c}.80`;
-        styles.activeBg = `${c}.90`;
-        styles.bg = `${c}.70`;
-    }
-    return styles;
-}
-function variantSubtle(props) {
-    const { colorScheme: c } = props;
-    const colors = {
-        hoverBg: `${c}.30`,
-        activeBg: `${c}.40`,
-        bg: `${c}.20`,
-        color: `${c}.80`
-    };
-    // Special cases
-    if (c === 'green') {
-        colors.color = `${c}.90`;
-    }
-    if (c === 'grey') {
-        colors.color = `prussian.80`;
-    }
-    if (c === 'red') {
-        colors.color = `${c}.90`;
-    }
-    if (c === 'yellow') {
-        colors.color = `${c}.100`;
-    }
-    return colors;
-}
 const baseStyle = {};
 const defaultProps = {
-    colorScheme: 'blue',
     size: 'md',
-    variant: 'subtle'
+    variant: 'subtleGrey',
+    fontWeight: 'medium'
 };
 const sizes = {
-    xs: {
+    sm: {
         fontSize: 'xs',
         h: 24,
         iconSize: 'xs'
     },
-    sm: {
+    md: {
         fontSize: 'sm',
         h: 32,
         iconSize: 'sm'
     },
-    md: {
+    lg: {
         fontSize: 'md',
         h: 40,
         iconSize: 'md'
     },
-    lg: {
+    xl: {
         fontSize: 'lg',
         h: 48,
-        iconSize: 'lg'
+        iconSize: 'xl'
     },
-    xl: {
+    xxl: {
         fontSize: 'lg',
-        h: 64,
-        iconSize: 'lg'
+        h: 56,
+        iconSize: 'xxl'
     }
 };
 const variants = {
-    solid: variantSolid,
-    subtle: variantSubtle
+    subtleGrey: {
+        bg: 'sandstone.90',
+        hoverBg: 'sandstone.85',
+        borderColor: 'sandstone.90',
+        color: 'sandstone.20',
+        activeBg: 'sandstone.79'
+    },
+    subtleBlue: {
+        bg: 'skyBlue.95',
+        hoverBg: 'skyBlue.90',
+        activeBg: 'skyBlue.85',
+        borderColor: 'skyBlue.95',
+        color: 'seaBlue.28'
+    },
+    subtleRed: {
+        bg: 'energyRed.95',
+        borderColor: 'energyRed.95',
+        hoverBg: 'energyRed.90',
+        activeBg: 'energyRed.85',
+        color: 'energyRed.45'
+    },
+    subtleYellow: {
+        bg: 'sunflower.85',
+        hoverBg: 'sunflower.70',
+        activeBg: 'sunflower.65',
+        borderColor: 'sunflower.85',
+        color: 'sunflower.20'
+    },
+    subtleGreen: {
+        bg: 'landGreen.95',
+        hoverBg: 'landGreen.90',
+        borderColor: 'landGreen.95',
+        color: 'landGreen.30',
+        activeBg: 'landGreen.85'
+    },
+    subtleLavender: {
+        bg: 'hsl(232, 58%, 90%)',
+        hoverBg: 'hsl(232, 58%, 85%)',
+        borderColor: 'hsl(232, 58%, 90%)',
+        color: 'hsl(232, 58%, 50%)',
+        activeBg: 'hsl(232, 58%, 80%)'
+    },
+    subtleEucalyptus: {
+        bg: 'hsl(178, 80%, 85%)',
+        hoverBg: 'hsl(178, 80%, 80%)',
+        borderColor: 'hsl(178, 80%, 85%)',
+        color: 'hsl(178, 80%, 20%)',
+        activeBg: 'hsl(178, 80%, 75%)'
+    },
+    subtleTerracotta: {
+        bg: 'hsl(34, 100%, 85%)',
+        hoverBg: 'hsl(34, 100%, 80%)',
+        borderColor: 'hsl(34, 100%, 85%)',
+        color: 'hsl(34, 100%, 20%)',
+        activeBg: 'hsl(34, 100%, 75%)'
+    },
+    /** solids next */
+    solidBlue: {
+        bg: 'seaBlue.28',
+        hoverBg: 'seaBlue.35',
+        activeBg: 'seaBlue.40',
+        borderColor: 'seaBlue.28',
+        color: 'white'
+    },
+    solidDarkBlue: {
+        bg: 'darkBlue.18',
+        hoverBg: 'darkBlue.25',
+        activeBg: 'darkBlue.35',
+        borderColor: 'darkBlue.18',
+        color: 'white'
+    },
+    solidRed: {
+        bg: 'energyRed.45',
+        hoverBg: 'energyRed.54',
+        activeBg: 'energyRed.60',
+        borderColor: 'energyRed.45',
+        color: 'white'
+    },
+    solidYellow: {
+        bg: 'sunflower.50',
+        hoverBg: 'sunflower.80',
+        activeBg: 'sunflower.85',
+        borderColor: 'sunflower.50',
+        color: 'sunflower.15'
+    },
+    solidGreen: {
+        bg: 'landGreen.35',
+        hoverBg: 'landGreen.41',
+        activeBg: 'landGreen.45',
+        borderColor: 'landGreen.35',
+        color: 'white'
+    },
+    solidLavender: {
+        bg: 'hsl(232, 58%, 60%)',
+        hoverBg: 'hsl(232, 58%, 65%)',
+        borderColor: 'hsl(232, 58%, 60%)',
+        color: 'white',
+        activeBg: 'hsl(232, 58%, 70%)'
+    },
+    solidEucalyptus: {
+        bg: 'hsl(178, 80%, 25%)',
+        hoverBg: 'hsl(178, 80%, 35%)',
+        borderColor: 'hsl(178, 80%, 25%)',
+        color: 'white',
+        activeBg: 'hsl(178, 80%, 42%)'
+    },
+    solidTerracotta: {
+        bg: 'hsl(34, 100%, 35%)',
+        hoverBg: 'hsl(34, 100%, 40%)',
+        borderColor: 'hsl(34, 100%, 35%)',
+        color: 'white',
+        activeBg: 'hsl(34, 100%, 45%)'
+    }
 };
 exports.default = {
     baseStyle,

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/badge/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkGE,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCpB,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/badge/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAmGE,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCpB,wBAMC"}

package/dist/cjs/badge/theme.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const baseStyle = {};
 const defaultProps = {
     size: 'md',
-    variant: 'subtleSandstone'
+    variant: 'subtleSandstone',
+    fontWeight: 'medium'
 };
 const parts = ['container', 'icon', 'text'];
 const sizes = {

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

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

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

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

package/dist/cjs/button/theme.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const baseStyle = {};
 const defaultProps = {
     size: 'md',
-    variant: 'primaryDark'
+    variant: 'primaryDark',
+    fontWeight: 'medium'
 };
 const parts = ['container', 'icon', 'text'];
 const sizes = {

package/dist/cjs/divider/divider.js

@@ -19,7 +19,7 @@ const react_1 = __importDefault(require("react"));
 const core_1 = require("../core");
 const utils_1 = require("../utils");
 exports.DividerBase = core_1.styled.hrBox `
-  border-color: grey.30;
+  border-color: sandstone.90;
 `;
 /** Visually separates content with a horizontal or vertical line. */
 exports.Divider = (0, core_1.vui)((props, ref) => {

package/dist/cjs/dragAndDrop/dragAndDrop.d.ts

@@ -1,5 +1,5 @@
 import { DragAndDropProps } from './dragAndDrop.types';
-/** [Beta] Prepares uploading files by selecting or dragging. */
+/** Prepares uploading files by selecting or dragging. */
 export declare const DragAndDrop: import("../core").VuiComponent<"label", DragAndDropProps>;
 export default DragAndDrop;
 //# sourceMappingURL=dragAndDrop.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dragAndDrop.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAatD,gEAAgE;AAChE,eAAO,MAAM,WAAW,2DA8DtB,CAAA;AAEF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"dragAndDrop.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAatD,yDAAyD;AACzD,eAAO,MAAM,WAAW,2DA8DtB,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/dist/cjs/dragAndDrop/dragAndDrop.js

@@ -51,7 +51,7 @@ const DragAndDropBase = core_1.styled.labelBox `
   transition-duration: normal;
   justify-content: center;
 `;
-/** [Beta] Prepares uploading files by selecting or dragging. */
+/** Prepares uploading files by selecting or dragging. */
 exports.DragAndDrop = (0, core_1.vui)((props, ref) => {
     const _a = (0, core_1.omitThemingProps)(props), { accept, icon = defaultIcon, className, onFilesAdded, multiple = true, text = defaultText, children, disabled } = _a, rest = __rest(_a, ["accept", "icon", "className", "onFilesAdded", "multiple", "text", "children", "disabled"]);
     const fileInput = (0, react_1.useRef)(null);
@@ -75,8 +75,8 @@ exports.DragAndDrop = (0, core_1.vui)((props, ref) => {
         if (files === null || files === void 0 ? void 0 : files.length)
             onFilesAdded === null || onFilesAdded === void 0 ? void 0 : onFilesAdded(files);
     };
-    return (react_1.default.createElement(DragAndDropBase, Object.assign({ bg: disabled ? 'grey.20' : 'blue.20', className: (0, utils_1.cs)('vui-drag-and-drop', className), cursor: disabled ? 'not-allowed' : 'pointer', onDragEnter: e => e.preventDefault(), onDragOver: e => e.preventDefault(), onDrop: e => handleDrop(e), p: 5, pointerEvents: disabled ? 'none' : 'auto', ref: ref }, styles, rest),
-        children || (react_1.default.createElement(t_1.default, { color: disabled ? 'grey.50' : 'auto', display: "flex" },
+    return (react_1.default.createElement(DragAndDropBase, Object.assign({ className: (0, utils_1.cs)('vui-drag-and-drop', className), cursor: disabled ? 'not-allowed' : 'pointer', onDragEnter: e => e.preventDefault(), onDragOver: e => e.preventDefault(), onDrop: e => handleDrop(e), opacity: disabled ? 0.5 : 1, p: 5, pointerEvents: disabled ? 'none' : 'auto', ref: ref }, styles, rest),
+        children || (react_1.default.createElement(t_1.default, { display: "flex" },
             react_1.default.createElement(icon_1.default, { mr: 1, name: icon }),
             text)),
         react_1.default.createElement(core_1.v.input, { accept: accept, className: "vui-drag-and-drop-hidden-input", display: "none", multiple: multiple, onChange: handleFileInput, ref: fileInput, type: "file" })));

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

@@ -1,7 +1,7 @@
 import { BoxProps } from '../box';
 import { IconProp } from '../icon';
 import { ThemingProps } from '../theme';
-export declare type DragAndDropProps = BoxProps & ThemingProps<'DragAndDrop'> & {
+export declare type DragAndDropProps = Omit<BoxProps, 'variant'> & ThemingProps<'DragAndDrop'> & {
     /** A string that defines the file types the file input should accept. This string is a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
     accept?: string;
     /** Disabled. @default `false` */

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

@@ -1 +1 @@
-{"version":3,"file":"dragAndDrop.types.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,QAAQ,GACrC,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,mPAAmP;IACnP,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mCAAmC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;CACvC,CAAA"}
+{"version":3,"file":"dragAndDrop.types.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GACtD,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,mPAAmP;IACnP,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mCAAmC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;CACvC,CAAA"}

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

@@ -1,8 +1,23 @@
 declare const _default: {
-    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;
+        };
+    };
 };
 export default _default;
 //# sourceMappingURL=theme.d.ts.map

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

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

package/dist/cjs/dragAndDrop/theme.js

@@ -1,9 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const baseStyle = {};
-const defaultProps = {};
+const colors = {
+    bg: 'skyBlue.95',
+    main: 'seaBlue.28',
+    hover: 'skyBlue.90'
+};
+const baseStyle = {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: 'transparent',
+    bg: colors.bg,
+    color: colors.main,
+    hoverBg: colors.hover
+};
+const defaultProps = {
+    variant: 'default'
+};
 const sizes = {};
-const variants = {};
+const variants = {
+    default: {},
+    outlined: {
+        borderColor: colors.main,
+        borderStyle: 'dashed'
+    }
+};
 exports.default = {
     baseStyle,
     defaultProps,

package/dist/cjs/header/headerAccountUserInfo.js

@@ -27,7 +27,9 @@ exports.HeaderAccountUserInfo = (0, core_1.vui)((props, ref) => {
     const { children, className, companyName, displayName } = props, rest = __rest(props, ["children", "className", "companyName", "displayName"]);
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
     return (react_1.default.createElement(box_1.default, Object.assign({ className: (0, utils_1.cs)('vui-headerAccountUserInfo', className), p: 2, pb: 1, ref: ref, spaceX: 2 }, styles.accountUserInfo, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(avatar_1.default, { className: "vui-headerAccountUserInfoAvatar", colorScheme: "prussian", name: displayName, size: "lg", variant: "solid" }),
+        react_1.default.createElement(avatar_1.default, { className: "vui-headerAccountUserInfoAvatar", 
+            // colorScheme="prussian"
+            name: displayName, size: "lg" }),
         react_1.default.createElement(box_1.default, { column: true },
             displayName && (react_1.default.createElement(t_1.default, { mb: 0.5, weight: "demi" }, displayName)),
             companyName && react_1.default.createElement(t_1.default, null, companyName))))));

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

@@ -20,11 +20,16 @@ declare const _default: {
             height: number;
             width: number;
         };
-        /** the xl size is introduced for the xxl tabs; should not be listed. */
+        /** the xl size is introduced for the xxl-tabs and xl-avatars; should not be listed. */
         xl: {
             height: number;
             width: number;
         };
+        /** the xxl size is introduced for the xxl-avatars; should not be listed. */
+        xxl: {
+            height: number;
+            width: number;
+        };
     };
     variants: {};
 };