@shtabapp/ui-kit 1.85.0 → 1.85.1

package/dist/components/SNotification/SNotification.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,271 @@
+const require_SAvatar_types = require("../SAvatar/SAvatar.types.cjs");
+const require_SAvatar = require("../SAvatar/SAvatar.vue.cjs");
+const require_SButton_types = require("../SButton/SButton.types.cjs");
+const require_SButton = require("../SButton/SButton.vue.cjs");
+const require_SNotification_types = require("./SNotification.types.cjs");
+const require_resolveNotificationIcon = require("./resolveNotificationIcon.cjs");
+let vue = require("vue");
+let _shtabapp_ui_kit_primitives = require("@shtabapp/ui-kit-primitives");
+//#region src/components/SNotification/SNotification.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role"];
+var _hoisted_2 = { class: "s-ui-notification__body" };
+var _hoisted_3 = {
+	key: 0,
+	class: "s-ui-notification__leftside"
+};
+var _hoisted_4 = {
+	key: 0,
+	class: "s-ui-notification__icon"
+};
+var _hoisted_5 = { class: "s-ui-notification__content" };
+var _hoisted_6 = { class: "s-ui-notification__title-row" };
+var _hoisted_7 = {
+	key: 0,
+	class: "s-ui-notification__description-block"
+};
+var _hoisted_8 = {
+	key: 0,
+	class: "s-ui-notification__description s-ui-typography-label-12-medium"
+};
+var _hoisted_9 = {
+	key: 1,
+	class: "s-ui-notification__actions-stack"
+};
+var _hoisted_10 = {
+	key: 1,
+	class: "s-ui-notification__actions-row"
+};
+var SNotification_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SNotification",
+	props: {
+		type: { default: () => require_SNotification_types.ENotificationType.INFO_ACCENT },
+		layout: { default: () => require_SNotification_types.ENotificationLayout.HORIZONTAL },
+		leftside: { default: () => require_SNotification_types.ENotificationLeftside.ICON },
+		surface: { default: () => require_SNotification_types.ENotificationSurface.BANNER },
+		title: {},
+		description: {},
+		linkText: {},
+		linkIconRight: {},
+		primaryButtonText: {},
+		secondaryButtonText: {},
+		showPrimaryButton: {
+			type: Boolean,
+			default: false
+		},
+		prominentPrimaryButton: {
+			type: Boolean,
+			default: false
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		closeAriaLabel: { default: "" },
+		icon: {},
+		avatar: {},
+		width: {},
+		maxWidth: {},
+		truncateTitle: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"close",
+		"linkClick",
+		"primaryAction",
+		"secondaryAction"
+	],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const slots = (0, vue.useSlots)();
+		const notificationClasses = (0, vue.computed)(() => [
+			`s-ui-notification--type-${__props.type}`,
+			`s-ui-notification--layout-${__props.layout}`,
+			`s-ui-notification--surface-${__props.surface}`,
+			{ "s-ui-notification--single-line": isSingleLine.value }
+		]);
+		const notificationStyles = (0, vue.computed)(() => {
+			const styles = {};
+			if (__props.width) styles.width = typeof __props.width === "number" ? `${__props.width}px` : __props.width;
+			if (__props.maxWidth) styles.maxWidth = typeof __props.maxWidth === "number" ? `${__props.maxWidth}px` : __props.maxWidth;
+			return styles;
+		});
+		const notificationRole = (0, vue.computed)(() => {
+			if (__props.type === require_SNotification_types.ENotificationType.DANGER) return "alert";
+			return "status";
+		});
+		const resolvedIcon = (0, vue.computed)(() => require_resolveNotificationIcon.resolveNotificationIcon(__props.type, __props.icon));
+		const isBillingType = (0, vue.computed)(() => __props.type === require_SNotification_types.ENotificationType.BILLING);
+		const shouldShowLeftside = (0, vue.computed)(() => {
+			if (__props.leftside === require_SNotification_types.ENotificationLeftside.AVATAR && __props.avatar) return true;
+			if (__props.leftside === require_SNotification_types.ENotificationLeftside.ICON) return true;
+			return false;
+		});
+		const hasDescriptionBlock = (0, vue.computed)(() => {
+			return Boolean(__props.description || __props.linkText || slots.description);
+		});
+		const isSingleLine = (0, vue.computed)(() => {
+			return __props.layout === require_SNotification_types.ENotificationLayout.HORIZONTAL && !hasDescriptionBlock.value;
+		});
+		const hasVerticalActions = (0, vue.computed)(() => {
+			return __props.showPrimaryButton && (__props.primaryButtonText || __props.secondaryButtonText);
+		});
+		const hasHorizontalActions = (0, vue.computed)(() => {
+			return __props.showPrimaryButton && (__props.primaryButtonText || __props.secondaryButtonText) || __props.closable;
+		});
+		const primaryButtonAppearance = (0, vue.computed)(() => {
+			if (__props.type === require_SNotification_types.ENotificationType.BILLING || __props.prominentPrimaryButton) return require_SButton_types.EButtonAppearance.MAJOR;
+			return require_SButton_types.EButtonAppearance.OUTLINED;
+		});
+		const primaryButtonVariant = (0, vue.computed)(() => {
+			if (__props.type === require_SNotification_types.ENotificationType.BILLING) return require_SButton_types.EButtonVariant.BILLING;
+			return require_SButton_types.EButtonVariant.MAIN;
+		});
+		const handleClose = () => {
+			emit("close");
+		};
+		const handleLinkClick = () => {
+			emit("linkClick");
+		};
+		const handlePrimaryAction = () => {
+			emit("primaryAction");
+		};
+		const handleSecondaryAction = () => {
+			emit("secondaryAction");
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: (0, vue.normalizeClass)(["s-ui-notification", notificationClasses.value]),
+				style: (0, vue.normalizeStyle)(notificationStyles.value),
+				role: notificationRole.value
+			}, [(0, vue.createElementVNode)("div", _hoisted_2, [
+				shouldShowLeftside.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3, [__props.leftside === (0, vue.unref)(require_SNotification_types.ENotificationLeftside).ICON ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4, [(0, vue.createVNode)((0, vue.unref)(_shtabapp_ui_kit_primitives.SIcon), {
+					name: resolvedIcon.value,
+					size: 16,
+					billing: isBillingType.value
+				}, null, 8, ["name", "billing"])])) : __props.leftside === (0, vue.unref)(require_SNotification_types.ENotificationLeftside).AVATAR && __props.avatar ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SAvatar.default), {
+					key: 1,
+					name: __props.avatar.name,
+					src: __props.avatar.src,
+					badge: __props.avatar.badge,
+					size: (0, vue.unref)(require_SAvatar_types.ESAvatarSize).SIZE_20,
+					showName: false
+				}, null, 8, [
+					"name",
+					"src",
+					"badge",
+					"size"
+				])) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true),
+				(0, vue.createElementVNode)("div", _hoisted_5, [
+					(0, vue.createElementVNode)("div", _hoisted_6, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(["s-ui-notification__title s-ui-typography-label-14-medium", { "s-ui-notification__title--truncated": __props.truncateTitle }]) }, [(0, vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.title), 1)])], 2), __props.layout === (0, vue.unref)(require_SNotification_types.ENotificationLayout).VERTICAL && __props.closable ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SButton.default), {
+						key: 0,
+						class: "s-ui-notification__close",
+						appearance: (0, vue.unref)(require_SButton_types.EButtonAppearance).BARE,
+						variant: (0, vue.unref)(require_SButton_types.EButtonVariant).NEUTRAL,
+						size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+						"aria-label": __props.closeAriaLabel,
+						icon: "closeMini",
+						onClick: handleClose
+					}, null, 8, [
+						"appearance",
+						"variant",
+						"size",
+						"aria-label"
+					])) : (0, vue.createCommentVNode)("", true)]),
+					hasDescriptionBlock.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_7, [__props.description || (0, vue.unref)(slots).description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_8, [(0, vue.renderSlot)(_ctx.$slots, "description", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.description), 1)])])) : (0, vue.createCommentVNode)("", true), __props.linkText ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SButton.default), {
+						key: 1,
+						class: "s-ui-notification__link",
+						appearance: (0, vue.unref)(require_SButton_types.EButtonAppearance).BARE,
+						variant: (0, vue.unref)(require_SButton_types.EButtonVariant).MAIN,
+						size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+						iconRight: __props.linkIconRight,
+						onClick: handleLinkClick
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.linkText), 1)]),
+						_: 1
+					}, 8, [
+						"appearance",
+						"variant",
+						"size",
+						"iconRight"
+					])) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true),
+					__props.layout === (0, vue.unref)(require_SNotification_types.ENotificationLayout).VERTICAL && hasVerticalActions.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_9, [__props.showPrimaryButton && __props.primaryButtonText ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SButton.default), {
+						key: 0,
+						appearance: primaryButtonAppearance.value,
+						variant: primaryButtonVariant.value,
+						size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+						onClick: handlePrimaryAction
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.primaryButtonText), 1)]),
+						_: 1
+					}, 8, [
+						"appearance",
+						"variant",
+						"size"
+					])) : (0, vue.createCommentVNode)("", true), __props.showPrimaryButton && __props.secondaryButtonText ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SButton.default), {
+						key: 1,
+						appearance: (0, vue.unref)(require_SButton_types.EButtonAppearance).BARE,
+						variant: (0, vue.unref)(require_SButton_types.EButtonVariant).NEUTRAL,
+						size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+						onClick: handleSecondaryAction
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.secondaryButtonText), 1)]),
+						_: 1
+					}, 8, [
+						"appearance",
+						"variant",
+						"size"
+					])) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true)
+				]),
+				__props.layout === (0, vue.unref)(require_SNotification_types.ENotificationLayout).HORIZONTAL && hasHorizontalActions.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_10, [
+					__props.showPrimaryButton && __props.primaryButtonText ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SButton.default), {
+						key: 0,
+						appearance: primaryButtonAppearance.value,
+						variant: primaryButtonVariant.value,
+						size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+						onClick: handlePrimaryAction
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.primaryButtonText), 1)]),
+						_: 1
+					}, 8, [
+						"appearance",
+						"variant",
+						"size"
+					])) : (0, vue.createCommentVNode)("", true),
+					__props.showPrimaryButton && __props.secondaryButtonText ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SButton.default), {
+						key: 1,
+						appearance: (0, vue.unref)(require_SButton_types.EButtonAppearance).OUTLINED,
+						variant: (0, vue.unref)(require_SButton_types.EButtonVariant).MAIN,
+						size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+						onClick: handleSecondaryAction
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.secondaryButtonText), 1)]),
+						_: 1
+					}, 8, [
+						"appearance",
+						"variant",
+						"size"
+					])) : (0, vue.createCommentVNode)("", true),
+					__props.layout === (0, vue.unref)(require_SNotification_types.ENotificationLayout).HORIZONTAL && __props.closable ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SButton.default), {
+						key: 2,
+						class: "s-ui-notification__close",
+						appearance: (0, vue.unref)(require_SButton_types.EButtonAppearance).BARE,
+						variant: (0, vue.unref)(require_SButton_types.EButtonVariant).NEUTRAL,
+						size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+						"aria-label": __props.closeAriaLabel,
+						icon: "closeMini",
+						onClick: handleClose
+					}, null, 8, [
+						"appearance",
+						"variant",
+						"size",
+						"aria-label"
+					])) : (0, vue.createCommentVNode)("", true)
+				])) : (0, vue.createCommentVNode)("", true)
+			])], 14, _hoisted_1);
+		};
+	}
+});
+//#endregion
+exports.default = SNotification_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SNotification/SNotification.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,271 @@
+import { ESAvatarSize } from "../SAvatar/SAvatar.types.js";
+import SAvatar_default from "../SAvatar/SAvatar.vue.js";
+import { EButtonAppearance, EButtonSize, EButtonVariant } from "../SButton/SButton.types.js";
+import SButton_default from "../SButton/SButton.vue.js";
+import { ENotificationLayout, ENotificationLeftside, ENotificationSurface, ENotificationType } from "./SNotification.types.js";
+import { resolveNotificationIcon } from "./resolveNotificationIcon.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
+import { SIcon } from "@shtabapp/ui-kit-primitives";
+//#region src/components/SNotification/SNotification.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role"];
+var _hoisted_2 = { class: "s-ui-notification__body" };
+var _hoisted_3 = {
+	key: 0,
+	class: "s-ui-notification__leftside"
+};
+var _hoisted_4 = {
+	key: 0,
+	class: "s-ui-notification__icon"
+};
+var _hoisted_5 = { class: "s-ui-notification__content" };
+var _hoisted_6 = { class: "s-ui-notification__title-row" };
+var _hoisted_7 = {
+	key: 0,
+	class: "s-ui-notification__description-block"
+};
+var _hoisted_8 = {
+	key: 0,
+	class: "s-ui-notification__description s-ui-typography-label-12-medium"
+};
+var _hoisted_9 = {
+	key: 1,
+	class: "s-ui-notification__actions-stack"
+};
+var _hoisted_10 = {
+	key: 1,
+	class: "s-ui-notification__actions-row"
+};
+var SNotification_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SNotification",
+	props: {
+		type: { default: () => ENotificationType.INFO_ACCENT },
+		layout: { default: () => ENotificationLayout.HORIZONTAL },
+		leftside: { default: () => ENotificationLeftside.ICON },
+		surface: { default: () => ENotificationSurface.BANNER },
+		title: {},
+		description: {},
+		linkText: {},
+		linkIconRight: {},
+		primaryButtonText: {},
+		secondaryButtonText: {},
+		showPrimaryButton: {
+			type: Boolean,
+			default: false
+		},
+		prominentPrimaryButton: {
+			type: Boolean,
+			default: false
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		closeAriaLabel: { default: "" },
+		icon: {},
+		avatar: {},
+		width: {},
+		maxWidth: {},
+		truncateTitle: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"close",
+		"linkClick",
+		"primaryAction",
+		"secondaryAction"
+	],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const slots = useSlots();
+		const notificationClasses = computed(() => [
+			`s-ui-notification--type-${__props.type}`,
+			`s-ui-notification--layout-${__props.layout}`,
+			`s-ui-notification--surface-${__props.surface}`,
+			{ "s-ui-notification--single-line": isSingleLine.value }
+		]);
+		const notificationStyles = computed(() => {
+			const styles = {};
+			if (__props.width) styles.width = typeof __props.width === "number" ? `${__props.width}px` : __props.width;
+			if (__props.maxWidth) styles.maxWidth = typeof __props.maxWidth === "number" ? `${__props.maxWidth}px` : __props.maxWidth;
+			return styles;
+		});
+		const notificationRole = computed(() => {
+			if (__props.type === ENotificationType.DANGER) return "alert";
+			return "status";
+		});
+		const resolvedIcon = computed(() => resolveNotificationIcon(__props.type, __props.icon));
+		const isBillingType = computed(() => __props.type === ENotificationType.BILLING);
+		const shouldShowLeftside = computed(() => {
+			if (__props.leftside === ENotificationLeftside.AVATAR && __props.avatar) return true;
+			if (__props.leftside === ENotificationLeftside.ICON) return true;
+			return false;
+		});
+		const hasDescriptionBlock = computed(() => {
+			return Boolean(__props.description || __props.linkText || slots.description);
+		});
+		const isSingleLine = computed(() => {
+			return __props.layout === ENotificationLayout.HORIZONTAL && !hasDescriptionBlock.value;
+		});
+		const hasVerticalActions = computed(() => {
+			return __props.showPrimaryButton && (__props.primaryButtonText || __props.secondaryButtonText);
+		});
+		const hasHorizontalActions = computed(() => {
+			return __props.showPrimaryButton && (__props.primaryButtonText || __props.secondaryButtonText) || __props.closable;
+		});
+		const primaryButtonAppearance = computed(() => {
+			if (__props.type === ENotificationType.BILLING || __props.prominentPrimaryButton) return EButtonAppearance.MAJOR;
+			return EButtonAppearance.OUTLINED;
+		});
+		const primaryButtonVariant = computed(() => {
+			if (__props.type === ENotificationType.BILLING) return EButtonVariant.BILLING;
+			return EButtonVariant.MAIN;
+		});
+		const handleClose = () => {
+			emit("close");
+		};
+		const handleLinkClick = () => {
+			emit("linkClick");
+		};
+		const handlePrimaryAction = () => {
+			emit("primaryAction");
+		};
+		const handleSecondaryAction = () => {
+			emit("secondaryAction");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["s-ui-notification", notificationClasses.value]),
+				style: normalizeStyle(notificationStyles.value),
+				role: notificationRole.value
+			}, [createElementVNode("div", _hoisted_2, [
+				shouldShowLeftside.value ? (openBlock(), createElementBlock("div", _hoisted_3, [__props.leftside === unref(ENotificationLeftside).ICON ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(unref(SIcon), {
+					name: resolvedIcon.value,
+					size: 16,
+					billing: isBillingType.value
+				}, null, 8, ["name", "billing"])])) : __props.leftside === unref(ENotificationLeftside).AVATAR && __props.avatar ? (openBlock(), createBlock(unref(SAvatar_default), {
+					key: 1,
+					name: __props.avatar.name,
+					src: __props.avatar.src,
+					badge: __props.avatar.badge,
+					size: unref(ESAvatarSize).SIZE_20,
+					showName: false
+				}, null, 8, [
+					"name",
+					"src",
+					"badge",
+					"size"
+				])) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_5, [
+					createElementVNode("div", _hoisted_6, [createElementVNode("span", { class: normalizeClass(["s-ui-notification__title s-ui-typography-label-14-medium", { "s-ui-notification__title--truncated": __props.truncateTitle }]) }, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2), __props.layout === unref(ENotificationLayout).VERTICAL && __props.closable ? (openBlock(), createBlock(unref(SButton_default), {
+						key: 0,
+						class: "s-ui-notification__close",
+						appearance: unref(EButtonAppearance).BARE,
+						variant: unref(EButtonVariant).NEUTRAL,
+						size: unref(EButtonSize).SMALL,
+						"aria-label": __props.closeAriaLabel,
+						icon: "closeMini",
+						onClick: handleClose
+					}, null, 8, [
+						"appearance",
+						"variant",
+						"size",
+						"aria-label"
+					])) : createCommentVNode("", true)]),
+					hasDescriptionBlock.value ? (openBlock(), createElementBlock("div", _hoisted_7, [__props.description || unref(slots).description ? (openBlock(), createElementBlock("span", _hoisted_8, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("", true), __props.linkText ? (openBlock(), createBlock(unref(SButton_default), {
+						key: 1,
+						class: "s-ui-notification__link",
+						appearance: unref(EButtonAppearance).BARE,
+						variant: unref(EButtonVariant).MAIN,
+						size: unref(EButtonSize).SMALL,
+						iconRight: __props.linkIconRight,
+						onClick: handleLinkClick
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.linkText), 1)]),
+						_: 1
+					}, 8, [
+						"appearance",
+						"variant",
+						"size",
+						"iconRight"
+					])) : createCommentVNode("", true)])) : createCommentVNode("", true),
+					__props.layout === unref(ENotificationLayout).VERTICAL && hasVerticalActions.value ? (openBlock(), createElementBlock("div", _hoisted_9, [__props.showPrimaryButton && __props.primaryButtonText ? (openBlock(), createBlock(unref(SButton_default), {
+						key: 0,
+						appearance: primaryButtonAppearance.value,
+						variant: primaryButtonVariant.value,
+						size: unref(EButtonSize).SMALL,
+						onClick: handlePrimaryAction
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.primaryButtonText), 1)]),
+						_: 1
+					}, 8, [
+						"appearance",
+						"variant",
+						"size"
+					])) : createCommentVNode("", true), __props.showPrimaryButton && __props.secondaryButtonText ? (openBlock(), createBlock(unref(SButton_default), {
+						key: 1,
+						appearance: unref(EButtonAppearance).BARE,
+						variant: unref(EButtonVariant).NEUTRAL,
+						size: unref(EButtonSize).SMALL,
+						onClick: handleSecondaryAction
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.secondaryButtonText), 1)]),
+						_: 1
+					}, 8, [
+						"appearance",
+						"variant",
+						"size"
+					])) : createCommentVNode("", true)])) : createCommentVNode("", true)
+				]),
+				__props.layout === unref(ENotificationLayout).HORIZONTAL && hasHorizontalActions.value ? (openBlock(), createElementBlock("div", _hoisted_10, [
+					__props.showPrimaryButton && __props.primaryButtonText ? (openBlock(), createBlock(unref(SButton_default), {
+						key: 0,
+						appearance: primaryButtonAppearance.value,
+						variant: primaryButtonVariant.value,
+						size: unref(EButtonSize).SMALL,
+						onClick: handlePrimaryAction
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.primaryButtonText), 1)]),
+						_: 1
+					}, 8, [
+						"appearance",
+						"variant",
+						"size"
+					])) : createCommentVNode("", true),
+					__props.showPrimaryButton && __props.secondaryButtonText ? (openBlock(), createBlock(unref(SButton_default), {
+						key: 1,
+						appearance: unref(EButtonAppearance).OUTLINED,
+						variant: unref(EButtonVariant).MAIN,
+						size: unref(EButtonSize).SMALL,
+						onClick: handleSecondaryAction
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.secondaryButtonText), 1)]),
+						_: 1
+					}, 8, [
+						"appearance",
+						"variant",
+						"size"
+					])) : createCommentVNode("", true),
+					__props.layout === unref(ENotificationLayout).HORIZONTAL && __props.closable ? (openBlock(), createBlock(unref(SButton_default), {
+						key: 2,
+						class: "s-ui-notification__close",
+						appearance: unref(EButtonAppearance).BARE,
+						variant: unref(EButtonVariant).NEUTRAL,
+						size: unref(EButtonSize).SMALL,
+						"aria-label": __props.closeAriaLabel,
+						icon: "closeMini",
+						onClick: handleClose
+					}, null, 8, [
+						"appearance",
+						"variant",
+						"size",
+						"aria-label"
+					])) : createCommentVNode("", true)
+				])) : createCommentVNode("", true)
+			])], 14, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { SNotification_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SNotification/resolveNotificationIcon.cjs

@@ -0,0 +1,17 @@
+const require_SNotification_types = require("./SNotification.types.cjs");
+let _shtabapp_ui_kit_primitives = require("@shtabapp/ui-kit-primitives");
+//#region src/components/SNotification/resolveNotificationIcon.ts
+var notificationIconMap = {
+	[require_SNotification_types.ENotificationType.INFO_ACCENT]: _shtabapp_ui_kit_primitives.ESIconName.infoCircle,
+	[require_SNotification_types.ENotificationType.INFO_NORMAL]: _shtabapp_ui_kit_primitives.ESIconName.infoCircle,
+	[require_SNotification_types.ENotificationType.SUCCESS]: _shtabapp_ui_kit_primitives.ESIconName.checkCircle,
+	[require_SNotification_types.ENotificationType.WARNING]: _shtabapp_ui_kit_primitives.ESIconName.alertCircle,
+	[require_SNotification_types.ENotificationType.DANGER]: _shtabapp_ui_kit_primitives.ESIconName.dangerCircleFill,
+	[require_SNotification_types.ENotificationType.BILLING]: _shtabapp_ui_kit_primitives.ESIconName.infoCircle
+};
+var resolveNotificationIcon = (type, iconOverride) => {
+	if (iconOverride) return iconOverride;
+	return notificationIconMap[type];
+};
+//#endregion
+exports.resolveNotificationIcon = resolveNotificationIcon;

package/dist/components/SNotification/resolveNotificationIcon.js

@@ -0,0 +1,17 @@
+import { ENotificationType } from "./SNotification.types.js";
+import { ESIconName } from "@shtabapp/ui-kit-primitives";
+//#region src/components/SNotification/resolveNotificationIcon.ts
+var notificationIconMap = {
+	[ENotificationType.INFO_ACCENT]: ESIconName.infoCircle,
+	[ENotificationType.INFO_NORMAL]: ESIconName.infoCircle,
+	[ENotificationType.SUCCESS]: ESIconName.checkCircle,
+	[ENotificationType.WARNING]: ESIconName.alertCircle,
+	[ENotificationType.DANGER]: ESIconName.dangerCircleFill,
+	[ENotificationType.BILLING]: ESIconName.infoCircle
+};
+var resolveNotificationIcon = (type, iconOverride) => {
+	if (iconOverride) return iconOverride;
+	return notificationIconMap[type];
+};
+//#endregion
+export { resolveNotificationIcon };

package/dist/components/SOverflowGroup/SOverflowGroup.vue.cjs

@@ -0,0 +1,4 @@
+//#region src/components/SOverflowGroup/SOverflowGroup.vue
+var SOverflowGroup_default = require("./SOverflowGroup.vue_vue_type_script_setup_true_lang.cjs").default;
+//#endregion
+exports.default = SOverflowGroup_default;

package/dist/components/SOverflowGroup/SOverflowGroup.vue.js

@@ -0,0 +1,5 @@
+import SOverflowGroup_vue_vue_type_script_setup_true_lang_default from "./SOverflowGroup.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/SOverflowGroup/SOverflowGroup.vue
+var SOverflowGroup_default = SOverflowGroup_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SOverflowGroup_default as default };

package/dist/components/SOverflowGroup/SOverflowGroup.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,46 @@
+const require_useOverflowGroup = require("../../composables/useOverflowGroup.cjs");
+const require_collectSlotVnodes = require("../../utils/vnodes/collectSlotVnodes.cjs");
+const require_renderVnodeList = require("../../utils/vnodes/renderVnodeList.cjs");
+let vue = require("vue");
+//#region src/components/SOverflowGroup/SOverflowGroup.vue?vue&type=script&setup=true&lang.ts
+var SOverflowGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SOverflowGroup",
+	props: {
+		clusterClass: {},
+		mapVnode: { type: Function },
+		maxVisible: {}
+	},
+	setup(__props) {
+		const slots = (0, vue.useSlots)();
+		const { visibleItems, hiddenCount, hasOverflow, overflowLabel } = require_useOverflowGroup.useOverflowGroup({
+			items: (0, vue.computed)(() => {
+				if (!slots.default) return [];
+				return require_collectSlotVnodes.collectSlotVnodes(slots.default());
+			}),
+			maxVisible: () => __props.maxVisible
+		});
+		const SOverflowGroupVnodeList = (0, vue.defineComponent)({
+			name: "SOverflowGroupVnodeList",
+			setup() {
+				return () => {
+					return require_renderVnodeList.renderVnodeList(visibleItems.value, (vnode, context) => {
+						if (!__props.mapVnode) return vnode;
+						return __props.mapVnode(vnode, context);
+					}, {
+						hiddenCount: hiddenCount.value,
+						overflowLabel: overflowLabel.value
+					});
+				};
+			}
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", null, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(__props.clusterClass) }, [(0, vue.createVNode)((0, vue.unref)(SOverflowGroupVnodeList))], 2), (0, vue.unref)(hasOverflow) ? (0, vue.renderSlot)(_ctx.$slots, "overflow", {
+				key: 0,
+				hiddenCount: (0, vue.unref)(hiddenCount),
+				overflowLabel: (0, vue.unref)(overflowLabel)
+			}) : (0, vue.createCommentVNode)("", true)]);
+		};
+	}
+});
+//#endregion
+exports.default = SOverflowGroup_vue_vue_type_script_setup_true_lang_default;