@televet/kibble-ui 1.14.2 → 1.14.3-beta.37pzzaj.1

package/build/components/MediaAndIcons/Avatar/avatar.component.d.ts

@@ -1,4 +1,5 @@
 import { AvatarProps as CAvatarProps, Placement } from '@chakra-ui/react';
+import { IconName } from 'components/MediaAndIcons/Icon';
 import React, { CSSProperties } from 'react';
 import { AvatarSize } from './avatar.types';
 export declare enum AvatarVariant {
@@ -8,7 +9,21 @@ export declare enum AvatarVariant {
     Comet = "comet",
     Number = "number",
     Dashed = "dashed",
-    Image = "image"
+    Image = "image",
+    Icon = "icon"
+}
+export declare enum AvatarBadgePosition {
+    TopLeft = "topLeft",
+    TopRight = "topRight",
+    BottomLeft = "bottomLeft",
+    BottomRight = "bottomRight"
+}
+export interface AvatarBadgeProps {
+    badgeIconName?: IconName;
+    badgeBackgroundColor?: string;
+    badgeBorderColor?: string;
+    badgeIconColor?: string;
+    badgePosition?: AvatarBadgePosition;
 }
 export interface AvatarProps extends CAvatarProps {
     name: string;
@@ -21,6 +36,9 @@ export interface AvatarProps extends CAvatarProps {
     showRemoveButton?: boolean;
     handleRemoveButtonClick?: React.MouseEventHandler<HTMLDivElement>;
     variant?: AvatarVariant;
+    iconName?: IconName;
     tooltipText?: string;
+    showBadge?: boolean;
+    badgeProps?: AvatarBadgeProps;
 }
-export declare const Avatar: ({ name, src, isClinic, size, showTooltip, tooltipPlacement, style, handleClick, showRemoveButton, handleRemoveButtonClick, variant, tooltipText, ...rest }: AvatarProps) => JSX.Element;
+export declare const Avatar: ({ name, src, isClinic, size, showTooltip, tooltipPlacement, style, handleClick, showRemoveButton, handleRemoveButtonClick, variant, iconName, tooltipText, showBadge, badgeProps, ...rest }: AvatarProps) => JSX.Element;

package/build/components/Overlay/Modal/index.d.ts

@@ -1,5 +1,5 @@
 export * from './modal.types';
-export * as BetaModal from './modal.component';
+export * from './modal.component';
 export * from './components/ModalHeader/modalHeader.component';
 export * from './components/ModalCloseButton/modalCloseButton.component';
 export * from './components/ModalBody/modalBody.component';

package/build/index.js

@@ -1604,6 +1604,39 @@ var toTitleCase = function (s) {
         .join('');
 };
 
+var getNextIconSize = function (size, larger, count) {
+    if (larger === void 0) { larger = true; }
+    if (count === void 0) { count = 1; }
+    var nextSize;
+    switch (size) {
+        case 'xs':
+            nextSize = larger ? 'sm' : 'xs';
+            break;
+        case 'sm':
+            nextSize = larger ? 'md' : 'xs';
+            break;
+        case 'md':
+            nextSize = larger ? 'lg' : 'sm';
+            break;
+        case 'lg':
+            nextSize = larger ? 'xl' : 'md';
+            break;
+        case 'xl':
+            nextSize = larger ? '2xl' : 'lg';
+            break;
+        case '2xl':
+            nextSize = larger ? '2xl' : 'xl';
+            break;
+        default:
+            nextSize = size;
+            break;
+    }
+    if (count > 1) {
+        nextSize = getNextIconSize(nextSize, larger, count - 1);
+    }
+    return nextSize;
+};
+
 var Button = React.forwardRef(function (props, ref) {
     var _a = useTheme(), components = _a.components, fontWeights = _a.fontWeights, radii = _a.radii;
     var _b = components.Button[props.variant || 'primary'], variant = _b.variant, light = _b.light, dark = _b.dark;
@@ -2063,59 +2096,6 @@ var TooltipConfig = {
     },
 };
 
-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 = __read(React.useState(!!src), 2), isSrcValid = _f[0], setIsSrcValid = _f[1];
-    var _g = __read(React.useState(false), 2), isHoveringAvatar = _g[0], setIsHoveringAvatar = _g[1];
-    var _h = __read(React.useState(false), 2), 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 AvatarGroup = function (_a) {
-    var avatars = _a.avatars, _b = _a.max, max = _b === void 0 ? 3 : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, handleAddButtonClick = _a.handleAddButtonClick, _d = _a.showAddButton, showAddButton = _d === void 0 ? true : _d, addButtonTooltipText = _a.addButtonTooltipText, _e = _a.showRemoveAvatarButton, showRemoveAvatarButton = _e === void 0 ? false : _e, handleRemoveButtonClick = _a.handleRemoveButtonClick;
-    var mergedNames = React.useMemo(function () { return avatars.map(function (avatar) { return avatar.name; }).join(', '); }, [avatars]);
-    var spacing = size === 'lg' || size === 'md' ? -2 : -1;
-    return (React__default["default"].createElement(react.AvatarGroup, { size: size, spacing: spacing },
-        avatars.length > max ? (React__default["default"].createElement(Avatar, { name: "".concat(avatars.length), size: size, variant: exports.AvatarVariant.Number, tooltipText: mergedNames })) : (avatars.map(function (avatar) { return (React__default["default"].createElement(Avatar, __assign({}, avatar, { key: avatar.name, size: size, showRemoveButton: showRemoveAvatarButton, handleRemoveButtonClick: handleRemoveButtonClick }))); })),
-        showAddButton && (React__default["default"].createElement(Avatar, { name: "", variant: exports.AvatarVariant.Dashed, icon: React__default["default"].createElement(Icon, { name: "plus", color: "subtle", size: size }), onClick: handleAddButtonClick, tooltipText: addButtonTooltipText, size: size }))));
-};
-
 var AvatarConfig = {
     baseStyle: {
         container: {
@@ -2267,9 +2247,115 @@ var AvatarConfig = {
                 },
             },
         },
+        icon: {
+            container: {
+                border: 0,
+                color: adaptiveColors.icon.light.default,
+                backgroundColor: coreColors.comet[50],
+                opacity: 1,
+                _hover: {
+                    backgroundColor: coreColors.comet[100],
+                },
+                _active: {
+                    backgroundColor: coreColors.comet[200],
+                },
+            },
+        },
     },
 };
 
+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";
+    AvatarVariant["Icon"] = "icon";
+})(exports.AvatarVariant || (exports.AvatarVariant = {}));
+exports.AvatarBadgePosition = void 0;
+(function (AvatarBadgePosition) {
+    AvatarBadgePosition["TopLeft"] = "topLeft";
+    AvatarBadgePosition["TopRight"] = "topRight";
+    AvatarBadgePosition["BottomLeft"] = "bottomLeft";
+    AvatarBadgePosition["BottomRight"] = "bottomRight";
+})(exports.AvatarBadgePosition || (exports.AvatarBadgePosition = {}));
+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, iconName = _a.iconName, tooltipText = _a.tooltipText, showBadge = _a.showBadge, badgeProps = _a.badgeProps, rest = __rest(_a, ["name", "src", "isClinic", "size", "showTooltip", "tooltipPlacement", "style", "handleClick", "showRemoveButton", "handleRemoveButtonClick", "variant", "iconName", "tooltipText", "showBadge", "badgeProps"]);
+    var theme = useTheme();
+    var _f = __read(React.useState(!!src), 2), isSrcValid = _f[0], setIsSrcValid = _f[1];
+    var _g = __read(React.useState(false), 2), isHoveringAvatar = _g[0], setIsHoveringAvatar = _g[1];
+    var _h = __read(React.useState(false), 2), 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));
+    var useSmallBadge = React.useMemo(function () { return size === 'xs' || !(badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.badgeIconName); }, [badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.badgeIconName, size]);
+    if (isSrcValid) {
+        _variant = exports.AvatarVariant.Image;
+    }
+    if (iconName) {
+        _variant = exports.AvatarVariant.Icon;
+    }
+    var getBadgeTransform = function (position) {
+        var _a, _b, _c;
+        // type is actually SystemStyleInterpolation, which Chakra doesn't export, so use any instead
+        var parentSizeString = (_c = (_b = (_a = AvatarConfig.sizes) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.height;
+        var parentSize = parentSizeString.replace('px', '');
+        var translation = parentSize / 2;
+        switch (position) {
+            case exports.AvatarBadgePosition.TopLeft:
+                return useSmallBadge && size !== 'xs'
+                    ? "translate(".concat(translation * -1.35, "px, ").concat(translation * -1.35, "px)")
+                    : "translate(".concat(translation * -1.2, "px, ").concat(translation * -1.2, "px)");
+            case exports.AvatarBadgePosition.TopRight:
+                return useSmallBadge && size !== 'xs'
+                    ? "translate(".concat(translation / 10, "px, ").concat(translation * -1.35, "px)")
+                    : "translate(".concat(translation / 5, "px, ").concat(translation * -1.2, "px)");
+            case exports.AvatarBadgePosition.BottomLeft:
+                return useSmallBadge && size !== 'xs'
+                    ? "translate(".concat(translation * -1.35, "px, ").concat(translation / 10, "px)")
+                    : "translate(".concat(translation * -1.2, "px, ").concat(translation / 5, "px)");
+            default:
+                return useSmallBadge && size !== 'xs'
+                    ? "translate(".concat(translation / 10, "px, ").concat(translation / 10, "px)")
+                    : "translate(".concat(translation / 3, "px, ").concat(translation / 3, "px)");
+        }
+    };
+    var avatarDynamicStyles = __assign({ cursor: handleClick ? 'pointer' : 'auto' }, style);
+    var avatarMarkup = (React__default["default"].createElement(react.Avatar, __assign({}, rest, { name: iconName ? '' : name, src: src, size: size, style: avatarDynamicStyles, variant: variant || _variant, icon: iconName && React__default["default"].createElement(Icon, { name: iconName, size: getNextIconSize(size, true, size === 'sm' || size === 'xs' ? 2 : 1) }), 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" }))),
+        showBadge && (React__default["default"].createElement(react.AvatarBadge, { color: (badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.badgeIconColor) || adaptiveColors.icon.light.active, borderColor: (badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.badgeBorderColor) || coreColors.white, borderWidth: "1px", bg: (badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.badgeBackgroundColor) || semanticColors.background.info, boxSize: useSmallBadge ? '10px' : '18px', transform: getBadgeTransform((badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.badgePosition) || exports.AvatarBadgePosition.BottomRight) }, !useSmallBadge && (badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.badgeIconName) && React__default["default"].createElement(Icon, { name: badgeProps.badgeIconName, size: 'xs' })))));
+    if (showTooltip) {
+        return (React__default["default"].createElement(Tooltip, { label: tooltipText || name, placement: tooltipPlacement }, avatarMarkup));
+    }
+    return avatarMarkup;
+};
+
+var AvatarGroup = function (_a) {
+    var avatars = _a.avatars, _b = _a.max, max = _b === void 0 ? 3 : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, handleAddButtonClick = _a.handleAddButtonClick, _d = _a.showAddButton, showAddButton = _d === void 0 ? true : _d, addButtonTooltipText = _a.addButtonTooltipText, _e = _a.showRemoveAvatarButton, showRemoveAvatarButton = _e === void 0 ? false : _e, handleRemoveButtonClick = _a.handleRemoveButtonClick;
+    var mergedNames = React.useMemo(function () { return avatars.map(function (avatar) { return avatar.name; }).join(', '); }, [avatars]);
+    var spacing = size === 'lg' || size === 'md' ? -2 : -1;
+    return (React__default["default"].createElement(react.AvatarGroup, { size: size, spacing: spacing },
+        avatars.length > max ? (React__default["default"].createElement(Avatar, { name: "".concat(avatars.length), size: size, variant: exports.AvatarVariant.Number, tooltipText: mergedNames })) : (avatars.map(function (avatar) { return (React__default["default"].createElement(Avatar, __assign({}, avatar, { key: avatar.name, size: size, showRemoveButton: showRemoveAvatarButton, handleRemoveButtonClick: handleRemoveButtonClick }))); })),
+        showAddButton && (React__default["default"].createElement(Avatar, { name: "", variant: exports.AvatarVariant.Dashed, icon: React__default["default"].createElement(Icon, { name: "plus", color: "subtle", size: size }), onClick: handleAddButtonClick, tooltipText: addButtonTooltipText, size: size }))));
+};
+
 var _path$k, _path2$7;
 
 function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
@@ -3787,150 +3873,18 @@ function withFormControl(Component) {
     return WithFormControl;
 }
 
-var Heading = function (_a) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'lg' : _b, color = _a.color, _c = _a.colorToken, colorToken = _c === void 0 ? 'headline' : _c, _d = _a.darkMode, darkMode = _d === void 0 ? false : _d, rest = __rest(_a, ["children", "size", "color", "colorToken", "darkMode"]);
-    var _e = useTheme(), components = _e.components, colors = _e.colors;
-    var adaptiveColor = useAdaptiveColorMap(colors.text, colorToken, darkMode);
-    var variant = react.useBreakpointValue({ base: 'small', md: 'large' }) || 'small';
-    var sizes = components.Heading.variants[variant].sizes;
-    var sizeProps = !sizes ? undefined : sizes[size];
-    return (React__default["default"].createElement(react.Heading, __assign({ variant: variant }, sizeProps, { color: color || adaptiveColor }, rest), children));
-};
-
-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 TruncatedText = function (_a) {
-    var _b = _a.noOfLines, noOfLines = _b === void 0 ? 1 : _b, textContent = _a.textContent, placement = _a.placement, titleCaseTooltipLabel = _a.titleCaseTooltipLabel, rest = __rest(_a, ["noOfLines", "textContent", "placement", "titleCaseTooltipLabel"]);
-    var _c = __read(React.useState(false), 2), isTextOverFlowing = _c[0], setIsTextOverFlowing = _c[1];
-    var containerRef = React.useRef(null);
-    var onCheckTextOverFlowing = React.useCallback(function (containerRefValue) {
-        var _a, _b;
-        if (containerRefValue && containerRefValue.current) {
-            var textScrollHeight = ((_a = containerRefValue.current) === null || _a === void 0 ? void 0 : _a.children[0].scrollHeight) || 0;
-            var containerOffsetHeight = ((_b = containerRefValue.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
-            return textScrollHeight > containerOffsetHeight;
-        }
-        return false;
-    }, []);
-    React.useEffect(function () {
-        var checkValue = onCheckTextOverFlowing(containerRef);
-        setIsTextOverFlowing(checkValue);
-    }, [containerRef, onCheckTextOverFlowing]);
-    return (React__default["default"].createElement(react.Box, { ref: containerRef, className: "TruncatedText__Wrapper" },
-        React__default["default"].createElement(Tooltip, { className: "TruncatedText__Tooltip", label: textContent || '', isDisabled: !isTextOverFlowing, placement: placement, titleCaseLabel: titleCaseTooltipLabel },
-            React__default["default"].createElement(react.Text, __assign({ className: "TruncatedText__TextContent", noOfLines: noOfLines, as: "p" }, rest), textContent))));
-};
-
 var Checkbox = function (_a) {
     var children = _a.children, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.variant, variant = _c === void 0 ? 'square' : _c, _d = _a.m, m = _d === void 0 ? 0 : _d, mb = _a.mb, mt = _a.mt, mr = _a.mr, ml = _a.ml, rest = __rest(_a, ["children", "size", "variant", "m", "mb", "mt", "mr", "ml"]);
-    var Spacing = {
-        sm: 2,
-        md: 2,
-        lg: 3,
-    };
     var margins = { m: m, mb: mb, mt: mt, mr: mr, ml: ml };
-    return (React__default["default"].createElement(react.FormLabel, __assign({ display: "flex", alignItems: "center", cursor: "pointer" }, margins),
-        React__default["default"].createElement(react.Checkbox, __assign({}, rest, { size: size, variant: variant, m: 0 })),
-        typeof children === 'string' && (React__default["default"].createElement(Text, { size: size, ml: Spacing[size], as: "span" }, children)),
-        children && typeof children !== 'string' && React__default["default"].createElement(react.Box, { ml: Spacing[size] }, children)));
+    return (React__default["default"].createElement(react.Box, __assign({}, margins),
+        React__default["default"].createElement(react.Checkbox, __assign({}, rest, { size: size, variant: variant, m: 0, alignItems: "flex-start" }), children)));
 };
 
 var CheckboxGroup = function (_a) {
     var checkboxes = _a.checkboxes, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.direction, direction = _c === void 0 ? 'row' : _c, spacing = _a.spacing, variant = _a.variant, rest = __rest(_a, ["checkboxes", "size", "direction", "spacing", "variant"]);
     rest.isFieldInline; var domProps = __rest(rest, ["isFieldInline"]);
     return (React__default["default"].createElement(react.CheckboxGroup, __assign({}, domProps),
-        React__default["default"].createElement(react.Stack, { direction: direction, spacing: spacing, display: "inline-flex" }, checkboxes.map(function (checkbox, index) { return (React__default["default"].createElement(Checkbox, __assign({ key: index }, checkbox, { size: size, variant: variant || checkbox.variant }))); }))));
+        React__default["default"].createElement(react.Stack, { direction: direction, spacing: spacing, width: "fit-content" }, checkboxes.map(function (checkbox, index) { return (React__default["default"].createElement(Checkbox, __assign({ key: index }, checkbox, { size: size, variant: variant || checkbox.variant }))); }))));
 };
 CheckboxGroup.displayName = 'CheckboxGroup';
 var WrappedCheckboxGroup = withFormControl(CheckboxGroup);
@@ -3974,6 +3928,16 @@ var RoundCheckedStyle = {
     },
 };
 var CheckboxConfig = {
+    baseStyle: {
+        control: {
+            _focus: {
+                boxShadow: 'none',
+            },
+        },
+        label: {
+            marginInlineStart: 0,
+        },
+    },
     sizes: {
         sm: {
             control: {
@@ -3982,6 +3946,8 @@ var CheckboxConfig = {
             },
             label: {
                 fontSize: fontSizes.sm,
+                ml: 2,
+                mt: -1,
             },
         },
         md: {
@@ -3991,6 +3957,8 @@ var CheckboxConfig = {
             },
             label: {
                 fontSize: fontSizes.md,
+                ml: 2,
+                mt: -1,
             },
         },
         lg: {
@@ -4000,6 +3968,8 @@ var CheckboxConfig = {
             },
             label: {
                 fontSize: fontSizes.lg,
+                ml: 3,
+                mt: '-3px',
             },
         },
     },
@@ -4263,6 +4233,131 @@ var RatingDot = function (_a) {
         } }, number))) : (React__default["default"].createElement(react.Flex, { as: "div", bgColor: colors.background.brand, h: "40px", w: "40px", borderRadius: "20px", border: "2px solid ".concat(colors.background.brand), color: colors.text.dark.default, mr: 1, mb: 1, justifyContent: "center", alignItems: "center", fontSize: "lg", cursor: "default" }, number))));
 };
 
+var Heading = function (_a) {
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'lg' : _b, color = _a.color, _c = _a.colorToken, colorToken = _c === void 0 ? 'headline' : _c, _d = _a.darkMode, darkMode = _d === void 0 ? false : _d, rest = __rest(_a, ["children", "size", "color", "colorToken", "darkMode"]);
+    var _e = useTheme(), components = _e.components, colors = _e.colors;
+    var adaptiveColor = useAdaptiveColorMap(colors.text, colorToken, darkMode);
+    var variant = react.useBreakpointValue({ base: 'small', md: 'large' }) || 'small';
+    var sizes = components.Heading.variants[variant].sizes;
+    var sizeProps = !sizes ? undefined : sizes[size];
+    return (React__default["default"].createElement(react.Heading, __assign({ variant: variant }, sizeProps, { color: color || adaptiveColor }, rest), children));
+};
+
+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 TruncatedText = function (_a) {
+    var _b = _a.noOfLines, noOfLines = _b === void 0 ? 1 : _b, textContent = _a.textContent, placement = _a.placement, titleCaseTooltipLabel = _a.titleCaseTooltipLabel, rest = __rest(_a, ["noOfLines", "textContent", "placement", "titleCaseTooltipLabel"]);
+    var _c = __read(React.useState(false), 2), isTextOverFlowing = _c[0], setIsTextOverFlowing = _c[1];
+    var containerRef = React.useRef(null);
+    var onCheckTextOverFlowing = React.useCallback(function (containerRefValue) {
+        var _a, _b;
+        if (containerRefValue && containerRefValue.current) {
+            var textScrollHeight = ((_a = containerRefValue.current) === null || _a === void 0 ? void 0 : _a.children[0].scrollHeight) || 0;
+            var containerOffsetHeight = ((_b = containerRefValue.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
+            return textScrollHeight > containerOffsetHeight;
+        }
+        return false;
+    }, []);
+    React.useEffect(function () {
+        var checkValue = onCheckTextOverFlowing(containerRef);
+        setIsTextOverFlowing(checkValue);
+    }, [containerRef, onCheckTextOverFlowing]);
+    return (React__default["default"].createElement(react.Box, { ref: containerRef, className: "TruncatedText__Wrapper" },
+        React__default["default"].createElement(Tooltip, { className: "TruncatedText__Tooltip", label: textContent || '', isDisabled: !isTextOverFlowing, placement: placement, titleCaseLabel: titleCaseTooltipLabel },
+            React__default["default"].createElement(react.Text, __assign({ className: "TruncatedText__TextContent", noOfLines: noOfLines, as: "p" }, rest), textContent))));
+};
+
 var RatingDots = function (_a) {
     var minValue = _a.minValue, maxValue = _a.maxValue, minLabel = _a.minLabel, maxLabel = _a.maxLabel, centeredLabel = _a.centeredLabel, isDisabled = _a.isDisabled, isInteractive = _a.isInteractive, onClick = _a.onClick, selected = _a.selected;
     var _b = __read(React.useState(), 2), selectedValue = _b[0], setSelectedValue = _b[1];
@@ -6994,11 +7089,6 @@ var Modal = function (_a) {
     return withDarkMode$1(Modal, !!darkMode);
 };
 
-var modal_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Modal: Modal
-});
-
 var ModalHeader = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 'md' : _b, children = _a.children, rest = __rest(_a, ["size", "children"]);
     return (React__default["default"].createElement(react.ModalHeader, __assign({ px: 6, pt: 6, pb: 2 }, rest),
@@ -9894,7 +9984,6 @@ exports.Avatar = Avatar;
 exports.AvatarConfig = AvatarConfig;
 exports.AvatarGroup = AvatarGroup;
 exports.BetaMenu = BetaMenu;
-exports.BetaModal = modal_component;
 exports.Button = Button;
 exports.ButtonSizeConfig = ButtonSizeConfig;
 exports.ButtonVariantConfig = ButtonVariantConfig;
@@ -9910,6 +9999,7 @@ exports.Logo = Logo;
 exports.MenuConfig = MenuConfig;
 exports.MenuContext = MenuContext;
 exports.MenuItemConfig = MenuItemConfig;
+exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalCloseButton = ModalCloseButton;
 exports.ModalFooter = ModalFooter;