@shtabapp/ui-kit 1.84.0 → 1.85.1

package/dist/components/STag/utils/resolveTagColor.js

@@ -0,0 +1,17 @@
+import { getContrastingSurfaceTextColor, isHexColor } from "../../../utils/color/contrastSurfaceTextColor.js";
+import { isCssVariableColor } from "../../../utils/color/colorValue.js";
+//#region src/components/STag/utils/resolveTagColor.ts
+var isTagCustomColor = (color) => {
+	return isHexColor(color) || isCssVariableColor(color);
+};
+var getTagColorClass = (color) => {
+	if (isTagCustomColor(color)) return "s-ui-tag--color-custom";
+	return `s-ui-tag--color-${color}`;
+};
+var getTagColorStyle = (color) => {
+	const style = { "--s-ui-tag-bg": color };
+	if (isHexColor(color)) style["--s-ui-tag-text"] = getContrastingSurfaceTextColor(color);
+	return style;
+};
+//#endregion
+export { getTagColorClass, getTagColorStyle, isTagCustomColor };

package/dist/components/STagGroup/STagGroup.vue.cjs

@@ -0,0 +1,6 @@
+const require_STagGroup_vue_vue_type_script_setup_true_lang = require("./STagGroup.vue_vue_type_script_setup_true_lang.cjs");
+;/* empty css                                                               */
+//#region src/components/STagGroup/STagGroup.vue
+var STagGroup_default = require_STagGroup_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = STagGroup_default;

package/dist/components/STagGroup/STagGroup.vue.js

@@ -0,0 +1,6 @@
+import STagGroup_vue_vue_type_script_setup_true_lang_default from "./STagGroup.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                             */
+//#region src/components/STagGroup/STagGroup.vue
+var STagGroup_default = STagGroup_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { STagGroup_default as default };

package/dist/components/STagGroup/STagGroup.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,49 @@
+const require_SOverflowGroup = require("../SOverflowGroup/SOverflowGroup.vue.cjs");
+const require_STag_types = require("../STag/STag.types.cjs");
+const require_STag = require("../STag/STag.vue.cjs");
+const require_applyTagGroupItemProps = require("./utils/applyTagGroupItemProps.cjs");
+let vue = require("vue");
+//#region src/components/STagGroup/STagGroup.vue?vue&type=script&setup=true&lang.ts
+var STagGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "STagGroup",
+	props: {
+		maxVisible: {},
+		size: { default: () => require_STag_types.ESTagSize.SMALL },
+		short: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		const mapTagGroupVnode = (vnode) => {
+			return require_applyTagGroupItemProps.applyTagGroupItemProps(vnode, {
+				size: __props.size,
+				short: __props.short
+			});
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(require_SOverflowGroup.default, {
+				class: "s-ui-tag-group",
+				role: "group",
+				"cluster-class": "s-ui-tag-group__cluster",
+				"max-visible": __props.maxVisible,
+				"map-vnode": mapTagGroupVnode
+			}, {
+				overflow: (0, vue.withCtx)(({ overflowLabel }) => [(0, vue.createVNode)((0, vue.unref)(require_STag.default), {
+					color: (0, vue.unref)(require_STag_types.ESTagColor).WHITE_BORDER,
+					size: __props.size,
+					short: false,
+					"model-value": overflowLabel
+				}, null, 8, [
+					"color",
+					"size",
+					"model-value"
+				])]),
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["max-visible"]);
+		};
+	}
+});
+//#endregion
+exports.default = STagGroup_vue_vue_type_script_setup_true_lang_default;

package/dist/components/STagGroup/STagGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import SOverflowGroup_default from "../SOverflowGroup/SOverflowGroup.vue.js";
+import { ESTagColor, ESTagSize } from "../STag/STag.types.js";
+import STag_default from "../STag/STag.vue.js";
+import { applyTagGroupItemProps } from "./utils/applyTagGroupItemProps.js";
+import { createBlock, createVNode, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/STagGroup/STagGroup.vue?vue&type=script&setup=true&lang.ts
+var STagGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "STagGroup",
+	props: {
+		maxVisible: {},
+		size: { default: () => ESTagSize.SMALL },
+		short: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		const mapTagGroupVnode = (vnode) => {
+			return applyTagGroupItemProps(vnode, {
+				size: __props.size,
+				short: __props.short
+			});
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(SOverflowGroup_default, {
+				class: "s-ui-tag-group",
+				role: "group",
+				"cluster-class": "s-ui-tag-group__cluster",
+				"max-visible": __props.maxVisible,
+				"map-vnode": mapTagGroupVnode
+			}, {
+				overflow: withCtx(({ overflowLabel }) => [createVNode(unref(STag_default), {
+					color: unref(ESTagColor).WHITE_BORDER,
+					size: __props.size,
+					short: false,
+					"model-value": overflowLabel
+				}, null, 8, [
+					"color",
+					"size",
+					"model-value"
+				])]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["max-visible"]);
+		};
+	}
+});
+//#endregion
+export { STagGroup_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/STagGroup/utils/applyTagGroupItemProps.cjs

@@ -0,0 +1,13 @@
+const require_STag = require("../../STag/STag.vue.cjs");
+let vue = require("vue");
+//#region src/components/STagGroup/utils/applyTagGroupItemProps.ts
+var applyTagGroupItemProps = (vnode, { size, short }) => {
+	if (vnode.type !== require_STag.default) return vnode;
+	return (0, vue.cloneVNode)(vnode, {
+		size,
+		short,
+		...short ? { closable: false } : {}
+	});
+};
+//#endregion
+exports.applyTagGroupItemProps = applyTagGroupItemProps;

package/dist/components/STagGroup/utils/applyTagGroupItemProps.js

@@ -0,0 +1,13 @@
+import STag_default from "../../STag/STag.vue.js";
+import { cloneVNode } from "vue";
+//#region src/components/STagGroup/utils/applyTagGroupItemProps.ts
+var applyTagGroupItemProps = (vnode, { size, short }) => {
+	if (vnode.type !== STag_default) return vnode;
+	return cloneVNode(vnode, {
+		size,
+		short,
+		...short ? { closable: false } : {}
+	});
+};
+//#endregion
+export { applyTagGroupItemProps };

package/dist/components/STextarea/STextarea.vue.cjs

@@ -0,0 +1,6 @@
+const require_STextarea_vue_vue_type_script_setup_true_lang = require("./STextarea.vue_vue_type_script_setup_true_lang.cjs");
+;/* empty css                                                               */
+//#region src/components/STextarea/STextarea.vue
+var STextarea_default = require_STextarea_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = STextarea_default;

package/dist/components/STextarea/STextarea.vue.js

@@ -0,0 +1,6 @@
+import STextarea_vue_vue_type_script_setup_true_lang_default from "./STextarea.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                             */
+//#region src/components/STextarea/STextarea.vue
+var STextarea_default = STextarea_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { STextarea_default as default };

package/dist/components/STextarea/STextarea.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,237 @@
+const require_SInlineMessage_types = require("../SInlineMessage/SInlineMessage.types.cjs");
+const require_SInlineMessage = require("../SInlineMessage/SInlineMessage.vue.cjs");
+const require_SLabel = require("../SLabel/SLabel.vue.cjs");
+const require_useFieldAttrs = require("../../composables/useFieldAttrs.cjs");
+const require_useFieldFocus = require("../../composables/useFieldFocus.cjs");
+const require_useFieldMessages = require("../../composables/useFieldMessages.cjs");
+const require_useResizeAutoScroll = require("../../composables/useResizeAutoScroll.cjs");
+let vue = require("vue");
+//#region src/components/STextarea/STextarea.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["inert", "aria-disabled"];
+var _hoisted_2 = [
+	"id",
+	"name",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"rows",
+	"maxlength",
+	"autocomplete"
+];
+var _hoisted_3 = {
+	key: 1,
+	class: "s-ui-textarea__footer"
+};
+var _hoisted_4 = {
+	key: 0,
+	class: "s-ui-textarea__messages"
+};
+var _hoisted_5 = {
+	key: 1,
+	class: "s-ui-textarea__counter s-ui-typography-label-12-medium"
+};
+var STextarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "STextarea",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		label: {},
+		labelProps: {},
+		placeholder: {},
+		helpMessages: {},
+		errorMessages: {},
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		maxlength: {},
+		counter: { type: Boolean },
+		resizable: {
+			type: Boolean,
+			default: true
+		},
+		rows: {},
+		autoGrow: {
+			type: Boolean,
+			default: false
+		},
+		resizeAutoScroll: {
+			type: Boolean,
+			default: false
+		},
+		minRows: { default: 1 },
+		maxRows: { default: 7 },
+		name: {},
+		id: {},
+		autocomplete: {}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ (0, vue.mergeModels)(["focus", "blur"], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const modelValue = (0, vue.useModel)(__props, "modelValue");
+		const emit = __emit;
+		const { rootAttrs, controlAttrs, errorQa } = require_useFieldAttrs.useFieldAttrs();
+		const generatedTextareaId = (0, vue.useId)();
+		const textareaElementRef = (0, vue.useTemplateRef)("textareaElementRef");
+		const { isFocused, handleFocus: handleTextareaFocus, handleFocusOut: handleFieldFocusOut } = require_useFieldFocus.useFieldFocus({
+			isDisabled: () => __props.disabled,
+			blurField: () => textareaElementRef.value?.blur(),
+			emitFocus: (event) => emit("focus", event),
+			emitBlur: (event) => emit("blur", event)
+		});
+		require_useResizeAutoScroll.useResizeAutoScroll({
+			elementRef: textareaElementRef,
+			isEnabled: () => __props.resizeAutoScroll && __props.resizable && !__props.autoGrow && !__props.disabled && !__props.readonly
+		});
+		const resolveAutoGrowHeight = (element) => {
+			const elementStyles = getComputedStyle(element);
+			const lineHeight = Number.parseFloat(elementStyles.lineHeight) || 0;
+			const verticalPadding = Number.parseFloat(elementStyles.paddingTop) + Number.parseFloat(elementStyles.paddingBottom);
+			const verticalBorders = Number.parseFloat(elementStyles.borderTopWidth) + Number.parseFloat(elementStyles.borderBottomWidth);
+			const contentHeight = element.scrollHeight + verticalBorders;
+			const minHeight = lineHeight * __props.minRows + verticalPadding + verticalBorders;
+			const maxHeight = lineHeight * __props.maxRows + verticalPadding + verticalBorders;
+			return {
+				height: Math.min(Math.max(contentHeight, minHeight), maxHeight),
+				isOverflowing: contentHeight > maxHeight
+			};
+		};
+		const applyAutoGrow = () => {
+			const element = textareaElementRef.value;
+			if (!element) return;
+			if (!__props.autoGrow) {
+				element.style.height = "";
+				element.style.overflowY = "";
+				return;
+			}
+			element.style.height = "auto";
+			const { height, isOverflowing } = resolveAutoGrowHeight(element);
+			element.style.height = `${height}px`;
+			element.style.overflowY = isOverflowing ? "auto" : "hidden";
+		};
+		(0, vue.watch)([
+			textareaElementRef,
+			modelValue,
+			() => __props.autoGrow,
+			() => __props.minRows,
+			() => __props.maxRows
+		], () => (0, vue.nextTick)(applyAutoGrow), { immediate: true });
+		const { normalizedHelpMessages, normalizedErrorMessages, hasErrorMessages, hasHelpMessages } = require_useFieldMessages.useFieldMessages(() => __props.helpMessages, () => __props.errorMessages);
+		const textareaElementId = (0, vue.computed)(() => {
+			if (__props.id) return __props.id;
+			return generatedTextareaId;
+		});
+		const showLabel = (0, vue.computed)(() => {
+			return Boolean(__props.label);
+		});
+		const showMessages = (0, vue.computed)(() => {
+			return hasHelpMessages.value || hasErrorMessages.value;
+		});
+		const showCounter = (0, vue.computed)(() => {
+			if (!__props.maxlength) return false;
+			if (__props.counter === false) return false;
+			return true;
+		});
+		const showFooter = (0, vue.computed)(() => {
+			return showMessages.value || showCounter.value;
+		});
+		const counterLabel = (0, vue.computed)(() => {
+			if (!__props.maxlength) return "";
+			return `${modelValue.value.length}/${__props.maxlength}`;
+		});
+		const isFieldFilled = (0, vue.computed)(() => {
+			return modelValue.value.length > 0;
+		});
+		const rootClasses = (0, vue.computed)(() => {
+			return {
+				"s-ui-textarea--disabled": __props.disabled,
+				"s-ui-textarea--readonly": __props.readonly
+			};
+		});
+		const fieldClasses = (0, vue.computed)(() => {
+			return {
+				"s-ui-textarea__field--bordered": __props.bordered,
+				"s-ui-textarea__field--borderless": !__props.bordered,
+				"s-ui-textarea__field--disabled": __props.disabled,
+				"s-ui-textarea__field--readonly": __props.readonly,
+				"s-ui-textarea__field--error": hasErrorMessages.value,
+				"s-ui-textarea__field--filled": isFieldFilled.value,
+				"s-ui-textarea__field--focused": isFocused.value,
+				"s-ui-textarea__field--resizable": __props.resizable && !__props.autoGrow && !__props.disabled && !__props.readonly
+			};
+		});
+		const focus = () => {
+			textareaElementRef.value?.focus();
+		};
+		const blur = () => {
+			textareaElementRef.value?.blur();
+		};
+		const handleFieldClick = (event) => {
+			if (__props.disabled || __props.readonly) return;
+			if (!(event.target instanceof HTMLElement)) return;
+			if (event.target === textareaElementRef.value) return;
+			focus();
+		};
+		__expose({
+			blur,
+			focus,
+			textareaElementRef
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ class: ["s-ui-textarea", rootClasses.value] }, (0, vue.unref)(rootAttrs)), [
+				showLabel.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SLabel.default), (0, vue.mergeProps)({ key: 0 }, __props.labelProps, { "html-for": textareaElementId.value }), {
+					default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1)]),
+					_: 1
+				}, 16, ["html-for"])) : (0, vue.createCommentVNode)("", true),
+				(0, vue.createElementVNode)("div", {
+					class: (0, vue.normalizeClass)(["s-ui-textarea__field", fieldClasses.value]),
+					inert: __props.disabled ? true : void 0,
+					"aria-disabled": __props.disabled ? true : void 0,
+					onClick: _cache[2] || (_cache[2] = ($event) => handleFieldClick($event)),
+					onFocusout: _cache[3] || (_cache[3] = (...args) => (0, vue.unref)(handleFieldFocusOut) && (0, vue.unref)(handleFieldFocusOut)(...args))
+				}, [(0, vue.withDirectives)((0, vue.createElementVNode)("textarea", (0, vue.mergeProps)({
+					id: textareaElementId.value,
+					ref_key: "textareaElementRef",
+					ref: textareaElementRef,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+					class: "s-ui-textarea__control s-ui-typography-body-14-regular",
+					name: __props.name,
+					placeholder: __props.placeholder,
+					disabled: __props.disabled,
+					readonly: __props.readonly,
+					rows: __props.rows,
+					maxlength: __props.maxlength,
+					autocomplete: __props.autocomplete
+				}, (0, vue.unref)(controlAttrs), { onFocus: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(handleTextareaFocus) && (0, vue.unref)(handleTextareaFocus)(...args)) }), null, 16, _hoisted_2), [[vue.vModelText, modelValue.value]])], 42, _hoisted_1),
+				showFooter.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3, [showMessages.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(normalizedHelpMessages), (helpMessageItem, helpMessageIndex) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SInlineMessage.default), {
+						key: `help-${helpMessageIndex}`,
+						message: helpMessageItem
+					}, null, 8, ["message"]);
+				}), 128)), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(normalizedErrorMessages), (errorMessageItem, errorMessageIndex) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SInlineMessage.default), {
+						key: `error-${errorMessageIndex}`,
+						message: errorMessageItem,
+						"data-qa": (0, vue.unref)(errorQa),
+						"validation-status": (0, vue.unref)(require_SInlineMessage_types.ESInlineMessageValidationStatus).ERROR
+					}, null, 8, [
+						"message",
+						"data-qa",
+						"validation-status"
+					]);
+				}), 128))])) : (0, vue.createCommentVNode)("", true), showCounter.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_5, (0, vue.toDisplayString)(counterLabel.value), 1)) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true)
+			], 16);
+		};
+	}
+});
+//#endregion
+exports.default = STextarea_vue_vue_type_script_setup_true_lang_default;

package/dist/components/STextarea/STextarea.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,237 @@
+import { ESInlineMessageValidationStatus } from "../SInlineMessage/SInlineMessage.types.js";
+import SInlineMessage_default from "../SInlineMessage/SInlineMessage.vue.js";
+import SLabel_default from "../SLabel/SLabel.vue.js";
+import { useFieldAttrs } from "../../composables/useFieldAttrs.js";
+import { useFieldFocus } from "../../composables/useFieldFocus.js";
+import { useFieldMessages } from "../../composables/useFieldMessages.js";
+import { useResizeAutoScroll } from "../../composables/useResizeAutoScroll.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, renderList, toDisplayString, unref, useId, useModel, useTemplateRef, vModelText, watch, withCtx, withDirectives } from "vue";
+//#region src/components/STextarea/STextarea.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["inert", "aria-disabled"];
+var _hoisted_2 = [
+	"id",
+	"name",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"rows",
+	"maxlength",
+	"autocomplete"
+];
+var _hoisted_3 = {
+	key: 1,
+	class: "s-ui-textarea__footer"
+};
+var _hoisted_4 = {
+	key: 0,
+	class: "s-ui-textarea__messages"
+};
+var _hoisted_5 = {
+	key: 1,
+	class: "s-ui-textarea__counter s-ui-typography-label-12-medium"
+};
+var STextarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "STextarea",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		labelProps: {},
+		placeholder: {},
+		helpMessages: {},
+		errorMessages: {},
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		maxlength: {},
+		counter: { type: Boolean },
+		resizable: {
+			type: Boolean,
+			default: true
+		},
+		rows: {},
+		autoGrow: {
+			type: Boolean,
+			default: false
+		},
+		resizeAutoScroll: {
+			type: Boolean,
+			default: false
+		},
+		minRows: { default: 1 },
+		maxRows: { default: 7 },
+		name: {},
+		id: {},
+		autocomplete: {}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["focus", "blur"], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const modelValue = useModel(__props, "modelValue");
+		const emit = __emit;
+		const { rootAttrs, controlAttrs, errorQa } = useFieldAttrs();
+		const generatedTextareaId = useId();
+		const textareaElementRef = useTemplateRef("textareaElementRef");
+		const { isFocused, handleFocus: handleTextareaFocus, handleFocusOut: handleFieldFocusOut } = useFieldFocus({
+			isDisabled: () => __props.disabled,
+			blurField: () => textareaElementRef.value?.blur(),
+			emitFocus: (event) => emit("focus", event),
+			emitBlur: (event) => emit("blur", event)
+		});
+		useResizeAutoScroll({
+			elementRef: textareaElementRef,
+			isEnabled: () => __props.resizeAutoScroll && __props.resizable && !__props.autoGrow && !__props.disabled && !__props.readonly
+		});
+		const resolveAutoGrowHeight = (element) => {
+			const elementStyles = getComputedStyle(element);
+			const lineHeight = Number.parseFloat(elementStyles.lineHeight) || 0;
+			const verticalPadding = Number.parseFloat(elementStyles.paddingTop) + Number.parseFloat(elementStyles.paddingBottom);
+			const verticalBorders = Number.parseFloat(elementStyles.borderTopWidth) + Number.parseFloat(elementStyles.borderBottomWidth);
+			const contentHeight = element.scrollHeight + verticalBorders;
+			const minHeight = lineHeight * __props.minRows + verticalPadding + verticalBorders;
+			const maxHeight = lineHeight * __props.maxRows + verticalPadding + verticalBorders;
+			return {
+				height: Math.min(Math.max(contentHeight, minHeight), maxHeight),
+				isOverflowing: contentHeight > maxHeight
+			};
+		};
+		const applyAutoGrow = () => {
+			const element = textareaElementRef.value;
+			if (!element) return;
+			if (!__props.autoGrow) {
+				element.style.height = "";
+				element.style.overflowY = "";
+				return;
+			}
+			element.style.height = "auto";
+			const { height, isOverflowing } = resolveAutoGrowHeight(element);
+			element.style.height = `${height}px`;
+			element.style.overflowY = isOverflowing ? "auto" : "hidden";
+		};
+		watch([
+			textareaElementRef,
+			modelValue,
+			() => __props.autoGrow,
+			() => __props.minRows,
+			() => __props.maxRows
+		], () => nextTick(applyAutoGrow), { immediate: true });
+		const { normalizedHelpMessages, normalizedErrorMessages, hasErrorMessages, hasHelpMessages } = useFieldMessages(() => __props.helpMessages, () => __props.errorMessages);
+		const textareaElementId = computed(() => {
+			if (__props.id) return __props.id;
+			return generatedTextareaId;
+		});
+		const showLabel = computed(() => {
+			return Boolean(__props.label);
+		});
+		const showMessages = computed(() => {
+			return hasHelpMessages.value || hasErrorMessages.value;
+		});
+		const showCounter = computed(() => {
+			if (!__props.maxlength) return false;
+			if (__props.counter === false) return false;
+			return true;
+		});
+		const showFooter = computed(() => {
+			return showMessages.value || showCounter.value;
+		});
+		const counterLabel = computed(() => {
+			if (!__props.maxlength) return "";
+			return `${modelValue.value.length}/${__props.maxlength}`;
+		});
+		const isFieldFilled = computed(() => {
+			return modelValue.value.length > 0;
+		});
+		const rootClasses = computed(() => {
+			return {
+				"s-ui-textarea--disabled": __props.disabled,
+				"s-ui-textarea--readonly": __props.readonly
+			};
+		});
+		const fieldClasses = computed(() => {
+			return {
+				"s-ui-textarea__field--bordered": __props.bordered,
+				"s-ui-textarea__field--borderless": !__props.bordered,
+				"s-ui-textarea__field--disabled": __props.disabled,
+				"s-ui-textarea__field--readonly": __props.readonly,
+				"s-ui-textarea__field--error": hasErrorMessages.value,
+				"s-ui-textarea__field--filled": isFieldFilled.value,
+				"s-ui-textarea__field--focused": isFocused.value,
+				"s-ui-textarea__field--resizable": __props.resizable && !__props.autoGrow && !__props.disabled && !__props.readonly
+			};
+		});
+		const focus = () => {
+			textareaElementRef.value?.focus();
+		};
+		const blur = () => {
+			textareaElementRef.value?.blur();
+		};
+		const handleFieldClick = (event) => {
+			if (__props.disabled || __props.readonly) return;
+			if (!(event.target instanceof HTMLElement)) return;
+			if (event.target === textareaElementRef.value) return;
+			focus();
+		};
+		__expose({
+			blur,
+			focus,
+			textareaElementRef
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ class: ["s-ui-textarea", rootClasses.value] }, unref(rootAttrs)), [
+				showLabel.value ? (openBlock(), createBlock(unref(SLabel_default), mergeProps({ key: 0 }, __props.labelProps, { "html-for": textareaElementId.value }), {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.label), 1)]),
+					_: 1
+				}, 16, ["html-for"])) : createCommentVNode("", true),
+				createElementVNode("div", {
+					class: normalizeClass(["s-ui-textarea__field", fieldClasses.value]),
+					inert: __props.disabled ? true : void 0,
+					"aria-disabled": __props.disabled ? true : void 0,
+					onClick: _cache[2] || (_cache[2] = ($event) => handleFieldClick($event)),
+					onFocusout: _cache[3] || (_cache[3] = (...args) => unref(handleFieldFocusOut) && unref(handleFieldFocusOut)(...args))
+				}, [withDirectives(createElementVNode("textarea", mergeProps({
+					id: textareaElementId.value,
+					ref_key: "textareaElementRef",
+					ref: textareaElementRef,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+					class: "s-ui-textarea__control s-ui-typography-body-14-regular",
+					name: __props.name,
+					placeholder: __props.placeholder,
+					disabled: __props.disabled,
+					readonly: __props.readonly,
+					rows: __props.rows,
+					maxlength: __props.maxlength,
+					autocomplete: __props.autocomplete
+				}, unref(controlAttrs), { onFocus: _cache[1] || (_cache[1] = (...args) => unref(handleTextareaFocus) && unref(handleTextareaFocus)(...args)) }), null, 16, _hoisted_2), [[vModelText, modelValue.value]])], 42, _hoisted_1),
+				showFooter.value ? (openBlock(), createElementBlock("div", _hoisted_3, [showMessages.value ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(normalizedHelpMessages), (helpMessageItem, helpMessageIndex) => {
+					return openBlock(), createBlock(unref(SInlineMessage_default), {
+						key: `help-${helpMessageIndex}`,
+						message: helpMessageItem
+					}, null, 8, ["message"]);
+				}), 128)), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(normalizedErrorMessages), (errorMessageItem, errorMessageIndex) => {
+					return openBlock(), createBlock(unref(SInlineMessage_default), {
+						key: `error-${errorMessageIndex}`,
+						message: errorMessageItem,
+						"data-qa": unref(errorQa),
+						"validation-status": unref(ESInlineMessageValidationStatus).ERROR
+					}, null, 8, [
+						"message",
+						"data-qa",
+						"validation-status"
+					]);
+				}), 128))])) : createCommentVNode("", true), showCounter.value ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(counterLabel.value), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true)
+			], 16);
+		};
+	}
+});
+//#endregion
+export { STextarea_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SToast/SToast.vue.cjs

@@ -0,0 +1,6 @@
+const require_SToast_vue_vue_type_script_setup_true_lang = require("./SToast.vue_vue_type_script_setup_true_lang.cjs");
+;/* empty css                                                            */
+//#region src/components/SToast/SToast.vue
+var SToast_default = require_SToast_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = SToast_default;

package/dist/components/SToast/SToast.vue.js

@@ -0,0 +1,6 @@
+import SToast_vue_vue_type_script_setup_true_lang_default from "./SToast.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                          */
+//#region src/components/SToast/SToast.vue
+var SToast_default = SToast_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SToast_default as default };