@televet/kibble-ui 1.2.3-beta.2p81ym7.3 → 1.3.0

package/build/index.js

@@ -2262,22 +2262,94 @@ function __rest(s, e) {
     return t;
 }
 
-var withDarkMode = function (children, darkMode) {
-    return darkMode ? React__default["default"].createElement(react.DarkMode, null, children) : React__default["default"].createElement(React__default["default"].Fragment, null, children);
+var Heading = function (_a) {
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'lg' : _b, _c = _a.variant, variant = _c === void 0 ? 'large' : _c, rest = __rest(_a, ["children", "size", "variant"]);
+    var components = useTheme().components;
+    var sizes = components.Heading.variants[variant].sizes;
+    var sizeProps = !sizes ? undefined : sizes[size];
+    return (React__default["default"].createElement(react.Heading, __assign({ variant: variant }, sizeProps, rest), children));
 };
 
-var withTheme = function (children, theme) {
-    return theme ? React__default["default"].createElement(react.ChakraProvider, { theme: theme }, children) : React__default["default"].createElement(React__default["default"].Fragment, null, children);
+var HeadingConfig = {
+    variants: {
+        large: {
+            sizes: {
+                xs: {
+                    fontSize: '14px',
+                    lineHeight: '120%',
+                },
+                sm: {
+                    fontSize: '16px',
+                    lineHeight: '120%',
+                },
+                md: {
+                    fontSize: '20px',
+                    lineHeight: '120%',
+                },
+                lg: {
+                    fontSize: '30px',
+                    lineHeight: '133%',
+                },
+                xl: {
+                    fontSize: '36px',
+                    lineHeight: '133%',
+                },
+                '2xl': {
+                    fontSize: '48px',
+                    lineHeight: '120%',
+                },
+                '3xl': {
+                    fontSize: '60px',
+                    lineHeight: '100%',
+                },
+                '4xl': {
+                    fontSize: '72px',
+                    lineHeight: '100%',
+                },
+            },
+        },
+        small: {
+            sizes: {
+                xs: {
+                    fontSize: '14px',
+                    lineHeight: '120%',
+                },
+                sm: {
+                    fontSize: '16px',
+                    lineHeight: '120%',
+                },
+                md: {
+                    fontSize: '20px',
+                    lineHeight: '120%',
+                },
+                lg: {
+                    fontSize: '24px',
+                    lineHeight: '133%',
+                },
+                xl: {
+                    fontSize: '30px',
+                    lineHeight: '133%',
+                },
+                '2xl': {
+                    fontSize: '36px',
+                    lineHeight: '120%',
+                },
+                '3xl': {
+                    fontSize: '48px',
+                    lineHeight: '100%',
+                },
+                '4xl': {
+                    fontSize: '60px',
+                    lineHeight: '100%',
+                },
+            },
+        },
+    },
 };
 
-var Heading = function (_a) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'lg' : _b, _c = _a.color, color = _c === void 0 ? 'headline' : _c, darkMode = _a.darkMode, rest = __rest(_a, ["children", "size", "color", "darkMode"]);
-    var _d = useTheme(), components = _d.components, colors = _d.colors;
-    var adaptiveColor = useAdaptiveColorMap(colors.text, color);
-    var variant = react.useBreakpointValue({ base: 'small', md: 'large' }) || 'small';
-    var sizes = components.Heading.variants[variant].sizes;
-    var sizeProps = !sizes ? undefined : sizes[size];
-    return withDarkMode(React__default["default"].createElement(react.Heading, __assign({ variant: variant }, sizeProps, { color: adaptiveColor }, rest), children), !!darkMode);
+var Text = function (_a) {
+    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'regular' : _b, rest = __rest(_a, ["children", "variant"]);
+    return (React__default["default"].createElement(react.Text, __assign({ variant: variant }, rest), children));
 };
 
 var blur = {
@@ -2438,6 +2510,28 @@ var coreColors = {
     },
 };
 var semanticColors = {
+    text: {
+        light: {
+            default: coreColors.comet[700],
+            headline: coreColors.blue[800],
+            subtle: coreColors.gray[800],
+            link: coreColors.teal[600],
+            placeholder: coreColors.blackAlpha[500],
+            success: coreColors.green[600],
+            warning: coreColors.yellow[600],
+            error: coreColors.red[500],
+        },
+        dark: {
+            default: coreColors.white,
+            headline: coreColors.white,
+            subtle: coreColors.comet[300],
+            link: coreColors.teal[400],
+            success: coreColors.green[400],
+            warning: coreColors.yellow[300],
+            error: coreColors.red[300],
+            placeholder: coreColors.whiteAlpha[600],
+        },
+    },
     background: {
         light: coreColors.white,
         grayLight: coreColors.gray[50],
@@ -2515,28 +2609,6 @@ var adaptiveColors = {
             error: coreColors.red[300],
         },
     },
-    text: {
-        light: {
-            default: coreColors.comet[700],
-            headline: coreColors.blue[800],
-            subtle: coreColors.gray[800],
-            link: coreColors.teal[600],
-            success: coreColors.green[600],
-            warning: coreColors.yellow[600],
-            error: coreColors.red[500],
-            placeholder: coreColors.blackAlpha[500],
-        },
-        dark: {
-            default: coreColors.white,
-            headline: coreColors.white,
-            subtle: coreColors.comet[300],
-            link: coreColors.teal[400],
-            success: coreColors.green[400],
-            warning: coreColors.yellow[300],
-            error: coreColors.red[300],
-            placeholder: coreColors.whiteAlpha[600],
-        },
-    },
 };
 var colors = __assign(__assign(__assign({}, coreColors), semanticColors), adaptiveColors);
 
@@ -2660,106 +2732,6 @@ var zIndices = {
     tooltip: 1800,
 };
 
-var HeadingConfig = {
-    variants: {
-        large: {
-            sizes: {
-                xs: {
-                    fontSize: '14px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                sm: {
-                    fontSize: '16px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                md: {
-                    fontSize: '20px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                lg: {
-                    fontSize: '30px',
-                    lineHeight: '133%',
-                    fontWeight: fontWeights.semibold,
-                },
-                xl: {
-                    fontSize: '36px',
-                    lineHeight: '133%',
-                    fontWeight: fontWeights.semibold,
-                },
-                '2xl': {
-                    fontSize: '48px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                '3xl': {
-                    fontSize: '60px',
-                    lineHeight: '100%',
-                    fontWeight: fontWeights.semibold,
-                },
-                '4xl': {
-                    fontSize: '72px',
-                    lineHeight: '100%',
-                    fontWeight: fontWeights.semibold,
-                },
-            },
-        },
-        small: {
-            sizes: {
-                xs: {
-                    fontSize: '14px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                sm: {
-                    fontSize: '16px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                md: {
-                    fontSize: '20px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                lg: {
-                    fontSize: '24px',
-                    lineHeight: '133%',
-                    fontWeight: fontWeights.semibold,
-                },
-                xl: {
-                    fontSize: '30px',
-                    lineHeight: '133%',
-                    fontWeight: fontWeights.semibold,
-                },
-                '2xl': {
-                    fontSize: '36px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                '3xl': {
-                    fontSize: '48px',
-                    lineHeight: '100%',
-                    fontWeight: fontWeights.semibold,
-                },
-                '4xl': {
-                    fontSize: '60px',
-                    lineHeight: '100%',
-                    fontWeight: fontWeights.semibold,
-                },
-            },
-        },
-    },
-};
-
-var Text = function (_a) {
-    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'regular' : _b, _c = _a.as, as = _c === void 0 ? 'span' : _c, _d = _a.color, color = _d === void 0 ? 'default' : _d, darkMode = _a.darkMode, rest = __rest(_a, ["children", "variant", "as", "color", "darkMode"]);
-    var colors = useTheme().colors;
-    var adaptiveColor = useAdaptiveColorMap(colors.text, color);
-    return withDarkMode(React__default["default"].createElement(react.Text, __assign({ variant: variant, as: as, color: adaptiveColor }, rest), children), !!darkMode);
-};
-
 var TextConfig = {
     variants: {
         regular: {
@@ -2821,7 +2793,7 @@ var Textarea = function (props) {
 var TextareaConfig = {
     baseStyle: {
         borderRadius: borders['4px'],
-        color: adaptiveColors.text.light.default,
+        color: semanticColors.text.light.default,
     },
     variants: {
         outline: {
@@ -2859,6 +2831,8 @@ var TextareaConfig = {
     },
 };
 
+var useAdaptiveColor = function (color) { return react.useColorModeValue(color.light, color.dark); };
+
 var camelCaseToLabel = function (s) {
     return s.replace(/([A-Z])/g, ' $1').replace(/^\w/, function (c) { return c.toUpperCase(); });
 };
@@ -2896,9 +2870,225 @@ var toTitleCase = function (s) {
         .join('');
 };
 
+var Tooltip = function (_a) {
+    var children = _a.children, label = _a.label, _b = _a.openDelay, openDelay = _b === void 0 ? 350 : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.titleCaseLabel, titleCaseLabel = _d === void 0 ? true : _d, rest = __rest(_a, ["children", "label", "openDelay", "placement", "titleCaseLabel"]);
+    var components = useTheme().components;
+    var bg = useAdaptiveColor(components.Tooltip.color);
+    var l = titleCaseLabel ? toTitleCase(label.toLowerCase()) : label;
+    return (React__default["default"].createElement(react.Tooltip, __assign({ hasArrow: true, arrowSize: 10, label: l, bg: bg, openDelay: openDelay, placement: placement }, rest), children));
+};
+
+var TooltipGlobalStyle = {
+    '[id^=tooltip]': {
+        padding: '4px 8px 4px 8px !important',
+        borderRadius: '4px !important',
+    },
+};
+var TooltipConfig = {
+    color: { light: semanticColors.background.dark, dark: semanticColors.background.light },
+};
+
+exports.AvatarVariant = void 0;
+(function (AvatarVariant) {
+    AvatarVariant["Green"] = "green";
+    AvatarVariant["Red"] = "red";
+    AvatarVariant["Blue"] = "blue";
+    AvatarVariant["Comet"] = "comet";
+    AvatarVariant["Number"] = "number";
+    AvatarVariant["Dashed"] = "dashed";
+    AvatarVariant["Image"] = "image";
+})(exports.AvatarVariant || (exports.AvatarVariant = {}));
+var getAvatarVariant = function (charCode) {
+    if (charCode >= 65 && charCode <= 71) {
+        return exports.AvatarVariant.Blue;
+    }
+    else if (charCode >= 72 && charCode <= 77) {
+        return exports.AvatarVariant.Red;
+    }
+    else if (charCode >= 78 && charCode <= 84) {
+        return exports.AvatarVariant.Green;
+    }
+    else {
+        return exports.AvatarVariant.Comet;
+    }
+};
+var Avatar = function (_a) {
+    var name = _a.name, src = _a.src, _b = _a.isClinic, isClinic = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.showTooltip, showTooltip = _d === void 0 ? true : _d, _e = _a.tooltipPlacement, tooltipPlacement = _e === void 0 ? 'bottom' : _e, style = _a.style, handleClick = _a.handleClick, showRemoveButton = _a.showRemoveButton, handleRemoveButtonClick = _a.handleRemoveButtonClick, variant = _a.variant, tooltipText = _a.tooltipText, rest = __rest(_a, ["name", "src", "isClinic", "size", "showTooltip", "tooltipPlacement", "style", "handleClick", "showRemoveButton", "handleRemoveButtonClick", "variant", "tooltipText"]);
+    var theme = useTheme();
+    var _f = React.useState(!!src), isSrcValid = _f[0], setIsSrcValid = _f[1];
+    var _g = React.useState(false), isHoveringAvatar = _g[0], setIsHoveringAvatar = _g[1];
+    var _h = React.useState(false), isHoveringRemoveButton = _h[0], setIsHoveringRemoveButton = _h[1];
+    var shouldHideRemoveButton = size === 'xs' || variant === exports.AvatarVariant.Dashed || variant === exports.AvatarVariant.Number;
+    var _variant = isClinic ? 'comet' : getAvatarVariant(name.charCodeAt(0));
+    if (isSrcValid) {
+        _variant = 'image';
+    }
+    var avatarDynamicStyles = __assign({ cursor: handleClick ? 'pointer' : 'auto' }, style);
+    var avatarMarkup = (React__default["default"].createElement(react.Avatar, __assign({}, rest, { name: name, src: src, size: size, style: avatarDynamicStyles, variant: variant || _variant, onClick: handleClick, onError: function () { return setIsSrcValid(false); }, onMouseEnter: function () { return setIsHoveringAvatar(true); }, onMouseLeave: function () { return setIsHoveringAvatar(false); } }), showRemoveButton && isHoveringAvatar && !shouldHideRemoveButton && (React__default["default"].createElement(react.Box, { backgroundColor: theme.colors.white, borderRadius: "9999px", cursor: "pointer", position: "absolute", top: "-4px", right: "-4px", onClick: handleRemoveButtonClick, onMouseEnter: function () { return setIsHoveringRemoveButton(true); }, onMouseLeave: function () { return setIsHoveringRemoveButton(false); } },
+        React__default["default"].createElement(Icon, { name: "closeCircle", size: isHoveringRemoveButton ? 'sm' : 'xs', color: "default" })))));
+    if (showTooltip) {
+        return (React__default["default"].createElement(Tooltip, { label: tooltipText || name, placement: tooltipPlacement }, avatarMarkup));
+    }
+    return avatarMarkup;
+};
+
+var AvatarConfig = {
+    baseStyle: {
+        container: {
+            backgroundColor: coreColors.white,
+            borderWidth: '2px',
+            boxShadow: "0 0 0 1px ".concat(coreColors.white),
+            _hover: {
+                backgroundColor: coreColors.gray[50],
+                zIndex: 2,
+            },
+            _active: {
+                backgroundColor: coreColors.gray[100],
+            },
+        },
+        label: {
+            paddingTop: '1px',
+        },
+    },
+    sizes: {
+        xs: {
+            container: {
+                height: '24px',
+                width: '24px',
+            },
+            label: {
+                fontSize: '12px',
+                fontWeight: '600',
+                lineHeight: '18px',
+            },
+        },
+        sm: {
+            container: {
+                height: '32px',
+                width: '32px',
+            },
+            label: {
+                fontSize: '14px',
+                fontWeight: '400',
+                lineHeight: '24px',
+                paddingTop: 0,
+            },
+        },
+        md: {
+            container: {
+                height: '36px',
+                width: '36px',
+            },
+            label: {
+                fontSize: '16px',
+                fontWeight: '400',
+                lineHeight: '24px',
+            },
+        },
+        lg: {
+            container: {
+                height: '40px',
+                width: '40px',
+            },
+            label: {
+                fontSize: '16px',
+                fontWeight: '400',
+                lineHeight: '24px',
+            },
+        },
+    },
+    variants: {
+        red: {
+            container: {
+                borderColor: coreColors.red[300],
+            },
+            label: {
+                color: coreColors.red[300],
+            },
+        },
+        green: {
+            container: {
+                borderColor: coreColors.green[400],
+            },
+            label: {
+                color: coreColors.green[400],
+            },
+        },
+        blue: {
+            container: {
+                borderColor: coreColors.blue[300],
+            },
+            label: {
+                color: coreColors.blue[300],
+            },
+        },
+        comet: {
+            container: {
+                backgroundColor: coreColors.comet[50],
+                borderColor: coreColors.comet[400],
+                _hover: {
+                    backgroundColor: coreColors.comet[100],
+                },
+                _active: {
+                    backgroundColor: coreColors.comet[200],
+                },
+            },
+            label: {
+                color: coreColors.comet[800],
+            },
+        },
+        number: {
+            container: {
+                backgroundColor: coreColors.blue[800],
+                border: 0,
+                _hover: {
+                    backgroundColor: coreColors.blue[800], // 700
+                },
+                _active: {
+                    backgroundColor: coreColors.blue[800], // 600
+                },
+            },
+            label: {
+                color: coreColors.white,
+            },
+        },
+        dashed: {
+            container: {
+                backgroundColor: coreColors.transparent,
+                border: '1px dashed',
+                borderColor: semanticColors.border.dark,
+                boxShadow: 0,
+                _hover: {
+                    backgroundColor: coreColors.blackAlpha[100],
+                    zIndex: 0,
+                },
+                _active: {
+                    backgroundColor: coreColors.blackAlpha[200],
+                },
+            },
+            label: {
+                color: adaptiveColors.icon.light.subtle,
+            },
+        },
+        image: {
+            container: {
+                border: 0,
+                _hover: {
+                    backgroundColor: coreColors.black,
+                    img: { opacity: 0.94 },
+                },
+                _active: {
+                    backgroundColor: coreColors.black,
+                    img: { opacity: 0.92 },
+                },
+            },
+        },
+    },
+};
+
 var Button = React.forwardRef(function (props, ref) {
-    var _a = useTheme(), components = _a.components, fontWeights = _a.fontWeights;
-    var _b = components.Button[props.variant || 'primary'], variant = _b.variant, light = _b.light, dark = _b.dark;
+    var components = useTheme().components;
+    var _a = components.Button[props.variant || 'primary'], variant = _a.variant, light = _a.light, dark = _a.dark;
     var modeColor = props.darkMode ? dark : light;
     var bg = react.useColorModeValue(modeColor.default, dark.default);
     var color = react.useColorModeValue(modeColor.content, dark.content);
@@ -2922,7 +3112,7 @@ var Button = React.forwardRef(function (props, ref) {
             p[position] = ButtonIcon;
         }
     }
-    return (React__default["default"].createElement(react.Button, __assign({ fontWeight: fontWeights.semibold, ref: ref, _hover: hoverClass, _active: activeClass, whiteSpace: "normal", wordWrap: "break-word", iconSpacing: p.size === 'sm' || p.size === 'xs' ? '4px' : '8px' }, p), props.children));
+    return (React__default["default"].createElement(react.Button, __assign({ ref: ref, _hover: hoverClass, _active: activeClass, whiteSpace: "normal", wordWrap: "break-word", iconSpacing: p.size === 'sm' || p.size === 'xs' ? '4px' : '8px' }, p), props.children));
 });
 Button.displayName = 'Button';
 
@@ -2930,188 +3120,188 @@ var ButtonVariantConfig = {
     primary: {
         variant: 'solid',
         light: {
-            content: colors.text.dark.headline,
-            default: colors.teal['600'],
-            hover: colors.teal['700'],
-            active: colors.teal['800'],
-            border: colors.transparent,
+            content: semanticColors.text.dark.headline,
+            default: coreColors.teal['600'],
+            hover: coreColors.teal['700'],
+            active: coreColors.teal['800'],
+            border: coreColors.transparent,
         },
         dark: {
-            content: colors.text.light.headline,
-            default: colors.teal['400'],
-            hover: colors.teal['300'],
-            active: colors.teal['100'],
-            border: colors.transparent,
+            content: semanticColors.text.light.headline,
+            default: coreColors.teal['400'],
+            hover: coreColors.teal['300'],
+            active: coreColors.teal['100'],
+            border: coreColors.transparent,
         },
     },
     primaryDestructive: {
         variant: 'solid',
         light: {
-            content: colors.text.dark.headline,
-            default: colors.red['500'],
-            hover: colors.red['600'],
-            active: colors.red['700'],
-            border: colors.transparent,
+            content: semanticColors.text.dark.headline,
+            default: coreColors.red['500'],
+            hover: coreColors.red['600'],
+            active: coreColors.red['700'],
+            border: coreColors.transparent,
         },
         dark: {
-            content: colors.text.light.headline,
-            default: colors.red['200'],
-            hover: colors.red['100'],
-            active: colors.red['50'],
-            border: colors.transparent,
+            content: semanticColors.text.light.headline,
+            default: coreColors.red['200'],
+            hover: coreColors.red['100'],
+            active: coreColors.red['50'],
+            border: coreColors.transparent,
         },
     },
     secondary: {
         variant: 'outline',
         light: {
-            content: colors.text.light.default,
-            default: colors.transparent,
-            hover: colors.teal['100'],
-            active: colors.teal['200'],
-            border: colors.border.light.heavy,
+            content: semanticColors.text.light.default,
+            default: coreColors.transparent,
+            hover: coreColors.teal['100'],
+            active: coreColors.teal['200'],
+            border: semanticColors.border.light.heavy,
         },
         dark: {
-            content: colors.white,
-            default: colors.transparent,
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.white,
+            content: coreColors.white,
+            default: coreColors.transparent,
+            hover: coreColors.whiteAlpha['300'],
+            active: coreColors.whiteAlpha['400'],
+            border: coreColors.white,
         },
     },
     secondaryDestructive: {
         variant: 'outline',
         light: {
-            content: colors.text.light.error,
-            default: colors.transparent,
-            hover: colors.red['50'],
-            active: colors.red['100'],
-            border: colors.border.light.error,
+            content: semanticColors.text.light.error,
+            default: coreColors.transparent,
+            hover: coreColors.red['50'],
+            active: coreColors.red['100'],
+            border: semanticColors.border.light.error,
         },
         dark: {
-            content: colors.red['300'],
-            default: colors.transparent,
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.red['300'],
+            content: coreColors.red['300'],
+            default: coreColors.transparent,
+            hover: coreColors.whiteAlpha['300'],
+            active: coreColors.whiteAlpha['400'],
+            border: coreColors.red['300'],
         },
     },
     secondarySubtle: {
         variant: 'outline',
         light: {
-            content: colors.text.light.default,
-            default: colors.white,
-            hover: colors.gray['50'],
-            active: colors.gray['100'],
-            border: colors.border.light.default,
+            content: semanticColors.text.light.default,
+            default: coreColors.white,
+            hover: coreColors.gray['50'],
+            active: coreColors.gray['100'],
+            border: semanticColors.border.light.default,
         },
         dark: {
-            content: colors.text.dark.default,
-            default: colors.transparent,
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.text.dark.default,
+            content: semanticColors.text.dark.default,
+            default: coreColors.transparent,
+            hover: coreColors.whiteAlpha['300'],
+            active: coreColors.whiteAlpha['400'],
+            border: semanticColors.text.dark.default,
         },
     },
     secondarySubtleDestructive: {
         variant: 'outline',
         light: {
-            content: colors.text.light.error,
-            default: colors.white,
-            hover: colors.red['50'],
-            active: colors.red['100'],
-            border: colors.border.light.default,
+            content: semanticColors.text.light.error,
+            default: coreColors.white,
+            hover: coreColors.red['50'],
+            active: coreColors.red['100'],
+            border: semanticColors.border.light.default,
         },
         dark: {
-            content: colors.red['300'],
-            default: colors.transparent,
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.whiteAlpha['500'],
+            content: coreColors.red['300'],
+            default: coreColors.transparent,
+            hover: coreColors.whiteAlpha['300'],
+            active: coreColors.whiteAlpha['400'],
+            border: coreColors.whiteAlpha['500'],
         },
     },
     tertiary: {
         variant: 'solid',
         light: {
-            content: colors.text.light.default,
-            default: colors.gray['100'],
-            hover: colors.gray['200'],
-            active: colors.gray['300'],
-            border: colors.transparent,
+            content: semanticColors.text.light.default,
+            default: coreColors.gray['100'],
+            hover: coreColors.gray['200'],
+            active: coreColors.gray['300'],
+            border: coreColors.transparent,
         },
         dark: {
-            content: colors.text.dark.headline,
-            default: colors.whiteAlpha[200],
-            hover: colors.whiteAlpha[300],
-            active: colors.whiteAlpha[400],
-            border: colors.transparent,
+            content: semanticColors.text.dark.headline,
+            default: coreColors.whiteAlpha[200],
+            hover: coreColors.whiteAlpha[300],
+            active: coreColors.whiteAlpha[400],
+            border: coreColors.transparent,
         },
     },
     tertiaryDestructive: {
         variant: 'solid',
         light: {
-            content: colors.text.light.error,
-            default: colors.red['100'],
-            hover: colors.red['200'],
-            active: colors.red['300'],
-            border: colors.transparent,
+            content: semanticColors.text.light.error,
+            default: coreColors.red['100'],
+            hover: coreColors.red['200'],
+            active: coreColors.red['300'],
+            border: coreColors.transparent,
         },
         dark: {
-            content: colors.red['300'],
-            default: colors.whiteAlpha['200'],
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.transparent,
+            content: coreColors.red['300'],
+            default: coreColors.whiteAlpha['200'],
+            hover: coreColors.whiteAlpha['300'],
+            active: coreColors.whiteAlpha['400'],
+            border: coreColors.transparent,
         },
     },
     ghost: {
         variant: 'ghost',
         light: {
-            content: colors.text.light.link,
-            default: colors.transparent,
-            hover: colors.teal['100'],
-            active: colors.teal['200'],
-            border: colors.transparent,
+            content: semanticColors.text.light.link,
+            default: coreColors.transparent,
+            hover: coreColors.teal['100'],
+            active: coreColors.teal['200'],
+            border: coreColors.transparent,
         },
         dark: {
-            content: colors.teal['400'],
-            default: colors.transparent,
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.transparent,
+            content: coreColors.teal['400'],
+            default: coreColors.transparent,
+            hover: coreColors.whiteAlpha['300'],
+            active: coreColors.whiteAlpha['400'],
+            border: coreColors.transparent,
         },
     },
     ghostNeutral: {
         variant: 'ghost',
         light: {
-            content: colors.text.light.default,
-            default: colors.transparent,
-            hover: colors.blackAlpha['100'],
-            active: colors.blackAlpha['200'],
-            border: colors.transparent,
+            content: semanticColors.text.light.default,
+            default: coreColors.transparent,
+            hover: coreColors.blackAlpha['100'],
+            active: coreColors.blackAlpha['200'],
+            border: coreColors.transparent,
         },
         dark: {
-            content: colors.text.dark.headline,
-            default: colors.transparent,
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.transparent,
+            content: semanticColors.text.dark.headline,
+            default: coreColors.transparent,
+            hover: coreColors.whiteAlpha['300'],
+            active: coreColors.whiteAlpha['400'],
+            border: coreColors.transparent,
         },
     },
     ghostDestructive: {
         variant: 'ghost',
         light: {
-            content: colors.text.light.error,
-            default: colors.transparent,
-            hover: colors.red['100'],
-            active: colors.red['200'],
-            border: colors.transparent,
+            content: semanticColors.text.light.error,
+            default: coreColors.transparent,
+            hover: coreColors.red['100'],
+            active: coreColors.red['200'],
+            border: coreColors.transparent,
         },
         dark: {
-            content: colors.red['300'],
-            default: colors.transparent,
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.transparent,
+            content: coreColors.red['300'],
+            default: coreColors.transparent,
+            hover: coreColors.whiteAlpha['300'],
+            active: coreColors.whiteAlpha['400'],
+            border: coreColors.transparent,
         },
     },
 };
@@ -3130,26 +3320,6 @@ var ButtonSizeConfig = {
     },
 };
 
-var useAdaptiveColor = function (color) { return react.useColorModeValue(color.light, color.dark); };
-
-var Tooltip = function (_a) {
-    var children = _a.children, label = _a.label, _b = _a.openDelay, openDelay = _b === void 0 ? 350 : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.titleCaseLabel, titleCaseLabel = _d === void 0 ? true : _d, rest = __rest(_a, ["children", "label", "openDelay", "placement", "titleCaseLabel"]);
-    var components = useTheme().components;
-    var bg = useAdaptiveColor(components.Tooltip.color);
-    var l = titleCaseLabel ? toTitleCase(label.toLowerCase()) : label;
-    return (React__default["default"].createElement(react.Tooltip, __assign({ hasArrow: true, arrowSize: 10, label: l, bg: bg, openDelay: openDelay, placement: placement }, rest), children));
-};
-
-var TooltipGlobalStyle = {
-    '[id^=tooltip]': {
-        padding: '4px 8px 4px 8px !important',
-        borderRadius: '4px !important',
-    },
-};
-var TooltipConfig = {
-    color: { light: semanticColors.background.dark, dark: semanticColors.background.light },
-};
-
 // @ts-ignore
 var theme = react.extendTheme({
     styles: {
@@ -3182,6 +3352,7 @@ var theme = react.extendTheme({
         Drawer: DrawerConfig,
         Button: __assign(__assign({}, ButtonVariantConfig), { sizes: ButtonSizeConfig }),
         Tooltip: TooltipConfig,
+        Avatar: AvatarConfig,
     },
 });
 
@@ -3239,6 +3410,8 @@ Object.defineProperty(exports, 'VStack', {
   enumerable: true,
   get: function () { return react.VStack; }
 });
+exports.Avatar = Avatar;
+exports.AvatarConfig = AvatarConfig;
 exports.Button = Button;
 exports.ButtonSizeConfig = ButtonSizeConfig;
 exports.ButtonVariantConfig = ButtonVariantConfig;
@@ -3257,6 +3430,4 @@ exports.TooltipConfig = TooltipConfig;
 exports.TooltipGlobalStyle = TooltipGlobalStyle;
 exports.theme = theme;
 exports.useTheme = useTheme;
-exports.withDarkMode = withDarkMode;
-exports.withTheme = withTheme;
 //# sourceMappingURL=index.js.map