@televet/kibble-ui 1.17.12 → 1.17.13

package/build/index.js

@@ -620,6 +620,40 @@ var NotificationCounter = function (_a) {
     return (React__default["default"].createElement(react.Flex, __assign({}, rest, { alignItems: "center", border: theme.borders['1px'], borderColor: theme.colors.white, borderRadius: theme.radii.full, fontSize: notificationCounterFontSizes[size], fontWeight: theme.fontWeights.semibold, height: notificationCounterSizes[size], justifyContent: "center", width: notificationCounterSizes[size] }, notificationVariantStyles[variant]), _showCount && counterContent));
 };
 
+exports.AlertVariant = void 0;
+(function (AlertVariant) {
+    AlertVariant["Error"] = "error";
+    AlertVariant["Warning"] = "warning";
+    AlertVariant["Success"] = "success";
+    AlertVariant["Info"] = "info";
+})(exports.AlertVariant || (exports.AlertVariant = {}));
+exports.AlertStatusIcon = void 0;
+(function (AlertStatusIcon) {
+    AlertStatusIcon["error"] = "warningSign";
+    AlertStatusIcon["warning"] = "warningSign";
+    AlertStatusIcon["success"] = "checkmark";
+    AlertStatusIcon["info"] = "infoCircleOutlined";
+})(exports.AlertStatusIcon || (exports.AlertStatusIcon = {}));
+
+var LightStatusVariantMap = {
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+};
+var DarkStatusVariantMap = {
+    info: 'infoDark',
+    success: 'successDark',
+    warning: 'warningDark',
+    error: 'errorDark',
+};
+var AlertIconColorMap = {
+    info: 'active',
+    success: 'success',
+    error: 'error',
+    warning: 'warning',
+};
+
 var IconSizeMap$1 = {
     xs: 14,
     sm: 16,
@@ -3447,21 +3481,6 @@ var Logo = function (_a) {
 };
 Logo.displayName = 'Logo';
 
-exports.AlertVariant = void 0;
-(function (AlertVariant) {
-    AlertVariant["Error"] = "error";
-    AlertVariant["Warning"] = "warning";
-    AlertVariant["Success"] = "success";
-    AlertVariant["Info"] = "info";
-})(exports.AlertVariant || (exports.AlertVariant = {}));
-exports.AlertStatusIcon = void 0;
-(function (AlertStatusIcon) {
-    AlertStatusIcon["error"] = "warningSign";
-    AlertStatusIcon["warning"] = "warningSign";
-    AlertStatusIcon["success"] = "checkmark";
-    AlertStatusIcon["info"] = "infoCircleOutlined";
-})(exports.AlertStatusIcon || (exports.AlertStatusIcon = {}));
-
 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;
@@ -3718,6 +3737,121 @@ var ButtonSizeConfig = {
     },
 };
 
+var AlertButton = function (buttonProps) {
+    buttonProps.buttonText; var buttonPosition = buttonProps.buttonPosition, hasDescription = buttonProps.hasDescription, rest = __rest(buttonProps, ["buttonText", "buttonPosition", "hasDescription"]);
+    return (React__default["default"].createElement(react.Box, { className: "Alert__Button", pt: buttonPosition === 'bottomLeft' && !hasDescription ? 1 : 0, pb: buttonPosition === 'bottomLeft' ? 0.5 : 0 },
+        React__default["default"].createElement(Button, __assign({ size: "xs", variant: "secondary" }, rest), buttonProps.buttonText)));
+};
+
+var AlertCloseButton = function (props) {
+    var onClose = props.onClose;
+    return (React__default["default"].createElement(react.Box, { className: "Alert__CloseButton" },
+        React__default["default"].createElement(Button, { variant: "ghostNeutral", iconName: "close", size: "xs", onClick: onClose })));
+};
+
+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 DrawerConfig = {
     variants: {
         alwaysOpen: {
@@ -4197,109 +4331,6 @@ 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 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];
@@ -15270,43 +15301,64 @@ var TextConfig = {
     },
 };
 
-var LightStatusVariantMap = {
-    info: 'info',
-    success: 'success',
-    warning: 'warning',
-    error: 'error',
-};
-var DarkStatusVariantMap = {
-    info: 'infoDark',
-    success: 'successDark',
-    warning: 'warningDark',
-    error: 'errorDark',
-};
-var AlertIconColorMap = {
-    info: 'active',
-    success: 'success',
-    error: 'error',
-    warning: 'warning',
+var AlertTitle = function (props) {
+    var title = props.title, titleProps = props.titleProps;
+    return (React__default["default"].createElement(Heading, __assign({ className: "Alert__Title", flexGrow: 1, lineHeight: 6, size: "sm" }, titleProps), title));
+};
+
+var AlertIcon = function (props) {
+    var iconProps = props.iconProps, status = props.status;
+    var iconColor = react.useColorModeValue(AlertIconColorMap[status], 'currentColor');
+    return (React__default["default"].createElement(react.Box, { className: "Alert__Icon", maxH: "24px" },
+        React__default["default"].createElement(Icon, __assign({ color: iconColor, size: "lg" }, iconProps, { name: (iconProps === null || iconProps === void 0 ? void 0 : iconProps.name) || exports.AlertStatusIcon[status] }))));
+};
+
+var AlertDescription = function (props) {
+    var description = props.description, descriptionProps = props.descriptionProps;
+    return (React__default["default"].createElement(Text, __assign({ className: "Alert__Description", as: "p", size: "md" }, descriptionProps), description));
+};
+
+var AlertBody = function (props) {
+    var children = props.children, hideIcon = props.hideIcon, hideCloseButton = props.hideCloseButton;
+    return (React__default["default"].createElement(react.VStack, { className: "Alert__Body", justify: "flex-start", align: "flex-start", w: "100%", pl: !hideIcon ? '34px' : '', pr: !hideCloseButton ? '34px' : '' }, children));
+};
+
+var AlertHeader = function (props) {
+    var children = props.children;
+    return (React__default["default"].createElement(react.HStack, { className: "Alert__Header", w: "100%", align: "flex-start", justify: "flex-start" }, children));
 };
 
 var Alert = function (_a) {
-    var children = _a.children, _b = _a.status, status = _b === void 0 ? exports.AlertVariant.Success : _b, _c = _a.showIcon, showIcon = _c === void 0 ? true : _c, iconProps = _a.iconProps, _d = _a.showButton, showButton = _d === void 0 ? false : _d, buttonProps = _a.buttonProps, buttonTitle = _a.buttonTitle, alertTitle = _a.alertTitle, titleProps = _a.titleProps, description = _a.description, descriptionProps = _a.descriptionProps, _e = _a.showCloseButton, showCloseButton = _e === void 0 ? true : _e, onClose = _a.onClose, rest = __rest(_a, ["children", "status", "showIcon", "iconProps", "showButton", "buttonProps", "buttonTitle", "alertTitle", "titleProps", "description", "descriptionProps", "showCloseButton", "onClose"]);
+    var buttonProps = _a.buttonProps, children = _a.children, description = _a.description, descriptionProps = _a.descriptionProps, iconProps = _a.iconProps, onClose = _a.onClose, _b = _a.hideCloseButton, hideCloseButton = _b === void 0 ? false : _b, _c = _a.hideIcon, hideIcon = _c === void 0 ? false : _c, _d = _a.status, status = _d === void 0 ? exports.AlertVariant.Success : _d, title = _a.title, titleProps = _a.titleProps, rest = __rest(_a, ["buttonProps", "children", "description", "descriptionProps", "iconProps", "onClose", "hideCloseButton", "hideIcon", "status", "title", "titleProps"]);
     var alertVariant = react.useColorModeValue(LightStatusVariantMap[status], DarkStatusVariantMap[status]);
-    var iconColor = react.useColorModeValue(AlertIconColorMap[status], 'currentColor');
-    return (React__default["default"].createElement(react.Alert, __assign({ justifyContent: "space-between", overflow: "visible", variant: alertVariant, pl: 3, pr: showCloseButton ? 2 : 3, pb: description || children ? 3 : 2 }, rest),
-        React__default["default"].createElement(react.Flex, { w: "100%" },
-            showIcon && (React__default["default"].createElement(react.Box, { mr: 2 },
-                React__default["default"].createElement(Icon, __assign({ color: iconColor, size: "lg", name: (iconProps === null || iconProps === void 0 ? void 0 : iconProps.name) || exports.AlertStatusIcon[status] }, iconProps)))),
-            React__default["default"].createElement(react.Flex, { flexGrow: 1 },
-                React__default["default"].createElement(react.Flex, { alignItems: "flex-start", flexDirection: description ? 'column' : 'row', flexWrap: "wrap", w: "100%", justify: "space-between", align: "center" },
-                    alertTitle && (React__default["default"].createElement(react.Box, { pt: 0.5, pr: 1, flexGrow: 1 },
-                        React__default["default"].createElement(Heading, __assign({ size: "sm", colorToken: "default" }, titleProps), alertTitle))),
-                    description && (React__default["default"].createElement(react.Box, { flexGrow: 1, pb: 2 },
-                        React__default["default"].createElement(Text, __assign({ as: "p", size: "md" }, descriptionProps), description))),
-                    children,
-                    showButton && (React__default["default"].createElement(Button, __assign({ size: "xs", variant: "secondary" }, buttonProps), buttonTitle)))),
-            showCloseButton && (React__default["default"].createElement(react.Box, { ml: 2 },
-                React__default["default"].createElement(Button, { variant: "ghostNeutral", iconName: "close", size: "xs", onClick: onClose }))))));
+    if (buttonProps && !buttonProps.buttonPosition) {
+        buttonProps.buttonPosition = 'topRight';
+    }
+    var AlertWithTitle = function () {
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(AlertHeader, null,
+                !hideIcon && React__default["default"].createElement(AlertIcon, { status: status, iconProps: iconProps }),
+                React__default["default"].createElement(AlertTitle, { title: title, titleProps: titleProps }),
+                (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.buttonPosition) === 'topRight' && (React__default["default"].createElement(AlertButton, __assign({}, buttonProps, { hasDescription: Boolean(description) }))),
+                !hideCloseButton && React__default["default"].createElement(AlertCloseButton, { onClose: onClose })),
+            React__default["default"].createElement(AlertBody, { hideIcon: hideIcon, hideCloseButton: hideCloseButton },
+                description && React__default["default"].createElement(AlertDescription, { description: description, descriptionProps: descriptionProps }),
+                children,
+                (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.buttonPosition) === 'bottomLeft' && (React__default["default"].createElement(AlertButton, __assign({}, buttonProps, { hasDescription: Boolean(description) }))))));
+    };
+    var AlertWithoutTitle = function () {
+        return (React__default["default"].createElement(react.VStack, { w: "100%", align: "flex-start", justify: "flex-start" },
+            React__default["default"].createElement(AlertHeader, null,
+                !hideIcon && React__default["default"].createElement(AlertIcon, { status: status, iconProps: iconProps }),
+                React__default["default"].createElement(react.Box, { flexGrow: 1 },
+                    description && React__default["default"].createElement(AlertDescription, { description: description, descriptionProps: descriptionProps }),
+                    children),
+                (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.buttonPosition) === 'topRight' && (React__default["default"].createElement(AlertButton, __assign({}, buttonProps, { hasDescription: Boolean(description) }))),
+                !hideCloseButton && React__default["default"].createElement(AlertCloseButton, { onClose: onClose })),
+            (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.buttonPosition) === 'bottomLeft' && (React__default["default"].createElement(AlertBody, { hideIcon: hideIcon, hideCloseButton: hideCloseButton },
+                React__default["default"].createElement(AlertButton, __assign({}, buttonProps, { hasDescription: Boolean(description) }))))));
+    };
+    return (React__default["default"].createElement(react.Alert, __assign({ flexDirection: "column", align: "flex-start", justify: "flex-start", variant: alertVariant, px: 3, py: 2 }, rest), title ? React__default["default"].createElement(AlertWithTitle, null) : React__default["default"].createElement(AlertWithoutTitle, null)));
 };
 
 var AlertConfig = {
@@ -21737,16 +21789,14 @@ function getToastPlacement(position, dir) {
 }
 
 var Toast = function (props) {
-    var _a = props.status, status = _a === void 0 ? 'info' : _a, id = props.id, title = props.title, isClosable = props.isClosable, onClose = props.onClose, description = props.description, buttonTitle = props.buttonTitle, onButtonClick = props.onButtonClick, _b = props.hideIcon, hideIcon = _b === void 0 ? false : _b;
-    var buttonProps = { onClick: onButtonClick };
+    props.position; props.duration; var id = props.id; props.onCloseComplete; props.containerStyle; var rest = __rest(props, ["position", "duration", "id", "onCloseComplete", "containerStyle"]);
     return (React__namespace.createElement(react.DarkMode, null,
-        React__namespace.createElement(Alert, { id: id, alertTitle: title, buttonTitle: buttonTitle, description: description, showIcon: !hideIcon, status: status, showCloseButton: isClosable, onClose: onClose, variant: DarkStatusVariantMap[status], showButton: !!onButtonClick && !!buttonTitle, buttonProps: buttonProps })));
+        React__namespace.createElement(Alert, __assign({ id: id }, rest))));
 };
 var defaults = {
     title: '',
     duration: 5000,
     position: 'top',
-    isClosable: true,
 };
 var defaultStandaloneParam = {
     theme: theme$1,