@cube-dev/ui-kit 0.185.0 → 0.185.2

package/dist/components/content/Item/Item.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.2 | Cube Dev Team */
 import { getDisabledElementProps, omitActivationEventProps } from "../../../utils/react/disabledProps.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { resolveIcon } from "../../../utils/react/resolveIcon.js";
@@ -278,7 +278,10 @@ const ItemElement = tasty({
 				"auto-hide-actions": 0,
 				"auto-hide-actions & ((@interacted & !inside-wrapper) | (inside-wrapper & actions-shown))": 1
 			},
-			transition: "width $transition ease-out, opacity $transition ease-out, padding $transition ease-out",
+			transition: {
+				"": "width $transition ease-out, opacity $transition ease-out, padding $transition ease-out",
+				"skip-actions-width-transition": "opacity $transition ease-out, padding $transition ease-out"
+			},
 			interpolateSize: "allow-keywords",
 			"$action-size": "min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))",
 			"$side-padding": "(($size - $action-size - 2bw) / 2)"
@@ -288,8 +291,8 @@ const ItemElement = tasty({
 	styleProps: CONTAINER_STYLES
 });
 const Item = (props, ref) => {
-	const $ = c(120);
-	const { children, size: t0, type: t1, theme: t2, mods, icon: iconProp, rightIcon: rightIconProp, prefix, suffix, description, descriptionPlacement, labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip: t3, isDisabled, disabled: nativeDisabledProp, style, loadingSlot: t4, isLoading: t5, actions, autoHideActions: t6, preserveActionsSpace: t7, disableActionsFocus: t8, shape, defaultTooltipPlacement: t9, level: t10, highlight, highlightCaseSensitive: t11, highlightStyles, insideWrapper: t12, showActions: t13, hiddenContent, isDynamicLabel: t14, labelRef: labelRefProp, tokens, ...rest } = props;
+	const $ = c(121);
+	const { children, size: t0, type: t1, theme: t2, mods, icon: iconProp, rightIcon: rightIconProp, prefix, suffix, description, descriptionPlacement, labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip: t3, isDisabled, disabled: nativeDisabledProp, style, loadingSlot: t4, isLoading: t5, actions, autoHideActions: t6, preserveActionsSpace: t7, disableActionsFocus: t8, shape, defaultTooltipPlacement: t9, level: t10, highlight, highlightCaseSensitive: t11, highlightStyles, insideWrapper: t12, showActions: t13, skipActionsWidthTransition: t14, hiddenContent, isDynamicLabel: t15, labelRef: labelRefProp, tokens, ...rest } = props;
 	const size = t0 === void 0 ? "medium" : t0;
 	const type = t1 === void 0 ? "item" : t1;
 	const theme = t2 === void 0 ? "default" : t2;
@@ -304,15 +307,16 @@ const Item = (props, ref) => {
 	const highlightCaseSensitive = t11 === void 0 ? false : t11;
 	const insideWrapper = t12 === void 0 ? false : t12;
 	const showActions = t13 === void 0 ? false : t13;
-	const isDynamicLabel = t14 === void 0 ? false : t14;
+	const skipActionsWidthTransition = t14 === void 0 ? false : t14;
+	const isDynamicLabel = t15 === void 0 ? false : t15;
 	const hasLabel = !!(children || labelProps);
 	const finalDescriptionPlacement = descriptionPlacement ?? ((type === "card" || type === "header") && hasLabel ? "block" : "inline");
 	const finalShape = shape ?? (type === "card" ? "card" : "button");
 	const isDisabledProp = isDisabled ?? (nativeDisabledProp || void 0);
 	const finalIsDisabled = isDisabledProp === true || isLoading && isDisabledProp !== false;
-	let t15;
+	let t16;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = [
+		t16 = [
 			"default",
 			"success",
 			"danger",
@@ -321,12 +325,12 @@ const Item = (props, ref) => {
 			"special",
 			"current"
 		];
-		$[0] = t15;
-	} else t15 = $[0];
-	const STANDARD_THEMES = t15;
-	let t16;
+		$[0] = t16;
+	} else t16 = $[0];
+	const STANDARD_THEMES = t16;
+	let t17;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = [
+		t17 = [
 			"default",
 			"success",
 			"danger",
@@ -334,26 +338,26 @@ const Item = (props, ref) => {
 			"note",
 			"current"
 		];
-		$[1] = t16;
-	} else t16 = $[1];
-	const CARD_THEMES = t16;
-	let t17;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = ["default"];
-		$[2] = t17;
-	} else t17 = $[2];
-	const HEADER_THEMES = t17;
+		$[1] = t17;
+	} else t17 = $[1];
+	const CARD_THEMES = t17;
 	let t18;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = ["default"];
+		$[2] = t18;
+	} else t18 = $[2];
+	const HEADER_THEMES = t18;
+	let t19;
 	if ($[3] !== theme || $[4] !== type) {
-		t18 = type === "header" && !HEADER_THEMES.includes(theme) || type === "card" && !CARD_THEMES.includes(theme) || !["header", "card"].includes(type) && !STANDARD_THEMES.includes(theme);
+		t19 = type === "header" && !HEADER_THEMES.includes(theme) || type === "card" && !CARD_THEMES.includes(theme) || !["header", "card"].includes(type) && !STANDARD_THEMES.includes(theme);
 		$[3] = theme;
 		$[4] = type;
-		$[5] = t18;
-	} else t18 = $[5];
-	const isInvalidCombination = t18;
-	let t19;
+		$[5] = t19;
+	} else t19 = $[5];
+	const isInvalidCombination = t19;
+	let t20;
 	if ($[6] !== theme || $[7] !== type) {
-		t19 = [
+		t20 = [
 			"Item",
 			"invalid-type-theme",
 			type,
@@ -361,26 +365,26 @@ const Item = (props, ref) => {
 		];
 		$[6] = theme;
 		$[7] = type;
-		$[8] = t19;
-	} else t19 = $[8];
-	const t20 = `Item: Invalid type+theme combination. type="${type}" does not support theme="${theme}".` + (type === "header" ? " The \"header\" type only supports theme: default." : type === "card" ? " The \"card\" type only supports themes: default, success, danger, warning, note, current." : " Standard types support themes: default, success, danger, warning, note, special, current.");
-	let t21;
-	if ($[9] !== t20) {
-		t21 = [t20];
-		$[9] = t20;
-		$[10] = t21;
-	} else t21 = $[10];
+		$[8] = t20;
+	} else t20 = $[8];
+	const t21 = `Item: Invalid type+theme combination. type="${type}" does not support theme="${theme}".` + (type === "header" ? " The \"header\" type only supports theme: default." : type === "card" ? " The \"card\" type only supports themes: default, success, danger, warning, note, current." : " Standard types support themes: default, success, danger, warning, note, special, current.");
 	let t22;
-	if ($[11] !== t19 || $[12] !== t21) {
-		t22 = {
-			key: t19,
-			args: t21
+	if ($[9] !== t21) {
+		t22 = [t21];
+		$[9] = t21;
+		$[10] = t22;
+	} else t22 = $[10];
+	let t23;
+	if ($[11] !== t20 || $[12] !== t22) {
+		t23 = {
+			key: t20,
+			args: t22
 		};
-		$[11] = t19;
-		$[12] = t21;
-		$[13] = t22;
-	} else t22 = $[13];
-	useWarn(isInvalidCombination, t22);
+		$[11] = t20;
+		$[12] = t22;
+		$[13] = t23;
+	} else t23 = $[13];
+	useWarn(isInvalidCombination, t23);
 	const hasLinkWithIcons = type === "link" && (iconProp || rightIconProp);
 	const hasLinkWithLoading = type === "link" && isLoading;
 	const hasLinkRestrictions = hasLinkWithIcons || hasLinkWithLoading;
@@ -393,46 +397,46 @@ const Item = (props, ref) => {
 		$[15] = hasLinkWithLoading;
 		$[16] = linkRestrictionMessages;
 	} else linkRestrictionMessages = $[16];
-	let t23;
+	let t24;
 	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t23 = ["Item", "link-restrictions"];
-		$[17] = t23;
-	} else t23 = $[17];
-	const t24 = `Item: The "link" type does not support ${linkRestrictionMessages.join(" or ")}. Remove these props when using type="link".`;
-	let t25;
-	if ($[18] !== t24) {
-		t25 = {
-			key: t23,
-			args: [t24]
+		t24 = ["Item", "link-restrictions"];
+		$[17] = t24;
+	} else t24 = $[17];
+	const t25 = `Item: The "link" type does not support ${linkRestrictionMessages.join(" or ")}. Remove these props when using type="link".`;
+	let t26;
+	if ($[18] !== t25) {
+		t26 = {
+			key: t24,
+			args: [t25]
 		};
-		$[18] = t24;
-		$[19] = t25;
-	} else t25 = $[19];
-	useWarn(hasLinkRestrictions, t25);
+		$[18] = t25;
+		$[19] = t26;
+	} else t26 = $[19];
+	useWarn(hasLinkRestrictions, t26);
 	const hasCheckmark = iconProp === "checkmark";
-	let t26;
+	let t27;
 	if ($[20] !== size) {
-		t26 = typeof size === "number" || !ITEM_SIZE_VALUES.includes(size);
+		t27 = typeof size === "number" || !ITEM_SIZE_VALUES.includes(size);
 		$[20] = size;
-		$[21] = t26;
-	} else t26 = $[21];
-	const isCustomSize = t26;
+		$[21] = t27;
+	} else t27 = $[21];
+	const isCustomSize = t27;
 	const sizeTokenValue = typeof size === "number" ? `${size}px` : isCustomSize ? size : void 0;
-	const t27 = isSelected === true;
-	let t28;
+	const t28 = isSelected === true;
+	let t29;
 	if ($[22] !== isCustomSize || $[23] !== size) {
-		t28 = !isCustomSize && { size };
+		t29 = !isCustomSize && { size };
 		$[22] = isCustomSize;
 		$[23] = size;
-		$[24] = t28;
-	} else t28 = $[24];
-	let t29;
-	if ($[25] !== finalIsDisabled || $[26] !== finalShape || $[27] !== isLoading || $[28] !== mods || $[29] !== t27 || $[30] !== t28 || $[31] !== theme || $[32] !== type) {
-		t29 = {
+		$[24] = t29;
+	} else t29 = $[24];
+	let t30;
+	if ($[25] !== finalIsDisabled || $[26] !== finalShape || $[27] !== isLoading || $[28] !== mods || $[29] !== t28 || $[30] !== t29 || $[31] !== theme || $[32] !== type) {
+		t30 = {
 			disabled: finalIsDisabled,
-			selected: t27,
+			selected: t28,
 			loading: isLoading,
-			...t28,
+			...t29,
 			type,
 			theme,
 			shape: finalShape,
@@ -442,59 +446,59 @@ const Item = (props, ref) => {
 		$[26] = finalShape;
 		$[27] = isLoading;
 		$[28] = mods;
-		$[29] = t27;
-		$[30] = t28;
+		$[29] = t28;
+		$[30] = t29;
 		$[31] = theme;
 		$[32] = type;
-		$[33] = t29;
-	} else t29 = $[33];
-	const baseMods = t29;
-	let t30;
+		$[33] = t30;
+	} else t30 = $[33];
+	const baseMods = t30;
+	let t31;
 	bb0: {
 		if (hasCheckmark) {
-			let t31;
+			let t32;
 			if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-				t31 = {
+				t32 = {
 					content: null,
 					hasSlot: true
 				};
-				$[34] = t31;
-			} else t31 = $[34];
-			t30 = t31;
+				$[34] = t32;
+			} else t32 = $[34];
+			t31 = t32;
 			break bb0;
 		}
-		const t31 = iconProp;
-		let t32;
-		if ($[35] !== baseMods || $[36] !== t31) {
-			t32 = resolveIcon(t31, baseMods);
+		const t32 = iconProp;
+		let t33;
+		if ($[35] !== baseMods || $[36] !== t32) {
+			t33 = resolveIcon(t32, baseMods);
 			$[35] = baseMods;
-			$[36] = t31;
-			$[37] = t32;
-		} else t32 = $[37];
-		t30 = t32;
+			$[36] = t32;
+			$[37] = t33;
+		} else t33 = $[37];
+		t31 = t33;
 	}
-	const resolvedIcon = t30;
-	let t31;
+	const resolvedIcon = t31;
+	let t32;
 	if ($[38] !== baseMods || $[39] !== rightIconProp) {
-		t31 = resolveIcon(rightIconProp, baseMods);
+		t32 = resolveIcon(rightIconProp, baseMods);
 		$[38] = baseMods;
 		$[39] = rightIconProp;
-		$[40] = t31;
-	} else t31 = $[40];
-	const resolvedRightIcon = t31;
-	let t32;
+		$[40] = t32;
+	} else t32 = $[40];
+	const resolvedRightIcon = t32;
+	let t33;
 	bb1: {
 		if (loadingSlot !== "auto") {
-			t32 = loadingSlot;
+			t33 = loadingSlot;
 			break bb1;
 		}
 		if (resolvedRightIcon.hasSlot && !resolvedIcon.hasSlot) {
-			t32 = "rightIcon";
+			t33 = "rightIcon";
 			break bb1;
 		}
-		t32 = "icon";
+		t33 = "icon";
 	}
-	const resolvedLoadingSlot = t32;
+	const resolvedLoadingSlot = t33;
 	const hasIconSlot = resolvedIcon.hasSlot || isLoading && resolvedLoadingSlot === "icon";
 	const hasRightIconSlot = resolvedRightIcon.hasSlot || isLoading && resolvedLoadingSlot === "rightIcon";
 	let copyProps;
@@ -504,64 +508,64 @@ const Item = (props, ref) => {
 		$[41] = descriptionProps;
 		$[42] = copyProps;
 	} else copyProps = $[42];
-	let t33;
+	let t34;
 	if ($[43] !== copyProps || $[44] !== description) {
-		t33 = description || Object.keys(copyProps).length > 0;
+		t34 = description || Object.keys(copyProps).length > 0;
 		$[43] = copyProps;
 		$[44] = description;
-		$[45] = t33;
-	} else t33 = $[45];
-	const showDescription = !!t33;
-	let t34;
+		$[45] = t34;
+	} else t34 = $[45];
+	const showDescription = !!t34;
+	let t35;
 	if ($[46] !== isLoading || $[47] !== resolvedIcon.content || $[48] !== resolvedLoadingSlot) {
-		t34 = isLoading && resolvedLoadingSlot === "icon" ? /* @__PURE__ */ jsx(LoadingIcon, {}) : resolvedIcon.content;
+		t35 = isLoading && resolvedLoadingSlot === "icon" ? /* @__PURE__ */ jsx(LoadingIcon, {}) : resolvedIcon.content;
 		$[46] = isLoading;
 		$[47] = resolvedIcon.content;
 		$[48] = resolvedLoadingSlot;
-		$[49] = t34;
-	} else t34 = $[49];
-	const finalIcon = t34;
-	let t35;
+		$[49] = t35;
+	} else t35 = $[49];
+	const finalIcon = t35;
+	let t36;
 	if ($[50] !== isLoading || $[51] !== resolvedLoadingSlot || $[52] !== resolvedRightIcon.content) {
-		t35 = isLoading && resolvedLoadingSlot === "rightIcon" ? /* @__PURE__ */ jsx(LoadingIcon, {}) : resolvedRightIcon.content;
+		t36 = isLoading && resolvedLoadingSlot === "rightIcon" ? /* @__PURE__ */ jsx(LoadingIcon, {}) : resolvedRightIcon.content;
 		$[50] = isLoading;
 		$[51] = resolvedLoadingSlot;
 		$[52] = resolvedRightIcon.content;
-		$[53] = t35;
-	} else t35 = $[53];
-	const finalRightIcon = t35;
-	let t36;
+		$[53] = t36;
+	} else t36 = $[53];
+	const finalRightIcon = t36;
+	let t37;
 	if ($[54] !== finalIcon || $[55] !== hasCheckmark || $[56] !== isLoading || $[57] !== resolvedLoadingSlot) {
-		t36 = hasCheckmark ? "checkmark" : isLoading && resolvedLoadingSlot === "icon" ? "loading" : isValidElement(finalIcon) ? finalIcon.type?.displayName || finalIcon.type?.name || "icon" : finalIcon ? "icon" : "empty";
+		t37 = hasCheckmark ? "checkmark" : isLoading && resolvedLoadingSlot === "icon" ? "loading" : isValidElement(finalIcon) ? finalIcon.type?.displayName || finalIcon.type?.name || "icon" : finalIcon ? "icon" : "empty";
 		$[54] = finalIcon;
 		$[55] = hasCheckmark;
 		$[56] = isLoading;
 		$[57] = resolvedLoadingSlot;
-		$[58] = t36;
-	} else t36 = $[58];
-	const iconKey = t36;
-	let t37;
+		$[58] = t37;
+	} else t37 = $[58];
+	const iconKey = t37;
+	let t38;
 	if ($[59] !== finalRightIcon || $[60] !== isLoading || $[61] !== resolvedLoadingSlot) {
-		t37 = isLoading && resolvedLoadingSlot === "rightIcon" ? "loading" : isValidElement(finalRightIcon) ? finalRightIcon.type?.displayName || finalRightIcon.type?.name || "icon" : finalRightIcon ? "icon" : "empty";
+		t38 = isLoading && resolvedLoadingSlot === "rightIcon" ? "loading" : isValidElement(finalRightIcon) ? finalRightIcon.type?.displayName || finalRightIcon.type?.name || "icon" : finalRightIcon ? "icon" : "empty";
 		$[59] = finalRightIcon;
 		$[60] = isLoading;
 		$[61] = resolvedLoadingSlot;
-		$[62] = t37;
-	} else t37 = $[62];
-	const rightIconKey = t37;
-	let t38;
+		$[62] = t38;
+	} else t38 = $[62];
+	const rightIconKey = t38;
+	let t39;
 	if ($[63] !== isLoading || $[64] !== prefix || $[65] !== resolvedLoadingSlot) {
-		t38 = isLoading && resolvedLoadingSlot === "prefix" ? /* @__PURE__ */ jsx(LoadingIcon, {}) : prefix;
+		t39 = isLoading && resolvedLoadingSlot === "prefix" ? /* @__PURE__ */ jsx(LoadingIcon, {}) : prefix;
 		$[63] = isLoading;
 		$[64] = prefix;
 		$[65] = resolvedLoadingSlot;
-		$[66] = t38;
-	} else t38 = $[66];
-	const finalPrefix = t38;
+		$[66] = t39;
+	} else t39 = $[66];
+	const finalPrefix = t39;
 	const hotkeysType = theme === "current" ? "inherit" : type === "primary" ? "primary" : "default";
-	let t39;
+	let t40;
 	if ($[67] !== finalIsDisabled || $[68] !== hotkeys || $[69] !== hotkeysType || $[70] !== isLoading || $[71] !== keyboardShortcutProps || $[72] !== resolvedLoadingSlot || $[73] !== suffix) {
-		t39 = isLoading && resolvedLoadingSlot === "suffix" ? /* @__PURE__ */ jsx(LoadingIcon, {}) : suffix ?? (hotkeys ? /* @__PURE__ */ jsx(_HotKeys, {
+		t40 = isLoading && resolvedLoadingSlot === "suffix" ? /* @__PURE__ */ jsx(LoadingIcon, {}) : suffix ?? (hotkeys ? /* @__PURE__ */ jsx(_HotKeys, {
 			...keyboardShortcutProps,
 			type: hotkeysType,
 			styles: {
@@ -577,18 +581,18 @@ const Item = (props, ref) => {
 		$[71] = keyboardShortcutProps;
 		$[72] = resolvedLoadingSlot;
 		$[73] = suffix;
-		$[74] = t39;
-	} else t39 = $[74];
-	const finalSuffix = t39;
-	let t40;
+		$[74] = t40;
+	} else t40 = $[74];
+	const finalSuffix = t40;
+	let t41;
 	if ($[75] !== hotkeys) {
-		t40 = typeof hotkeys === "string" ? hotkeys.toLowerCase() : "";
+		t41 = typeof hotkeys === "string" ? hotkeys.toLowerCase() : "";
 		$[75] = hotkeys;
-		$[76] = t40;
-	} else t40 = $[76];
-	let t41;
+		$[76] = t41;
+	} else t41 = $[76];
+	let t42;
 	if ($[77] !== finalIsDisabled || $[78] !== hotkeys || $[79] !== ref) {
-		t41 = () => {
+		t42 = () => {
 			if (!hotkeys) return;
 			if (finalIsDisabled) return;
 			if (ref && typeof ref === "object" && ref.current) ref.current.click();
@@ -596,58 +600,60 @@ const Item = (props, ref) => {
 		$[77] = finalIsDisabled;
 		$[78] = hotkeys;
 		$[79] = ref;
-		$[80] = t41;
-	} else t41 = $[80];
-	const t42 = !!hotkeys;
-	let t43;
-	if ($[81] !== t42) {
-		t43 = {
+		$[80] = t42;
+	} else t42 = $[80];
+	const t43 = !!hotkeys;
+	let t44;
+	if ($[81] !== t43) {
+		t44 = {
 			enableOnContentEditable: true,
-			enabled: t42,
+			enabled: t43,
 			preventDefault: true,
 			enableOnFormTags: true
 		};
-		$[81] = t42;
-		$[82] = t43;
-	} else t43 = $[82];
-	let t44;
+		$[81] = t43;
+		$[82] = t44;
+	} else t44 = $[82];
+	let t45;
 	if ($[83] !== finalIsDisabled || $[84] !== hotkeys) {
-		t44 = [hotkeys, finalIsDisabled];
+		t45 = [hotkeys, finalIsDisabled];
 		$[83] = finalIsDisabled;
 		$[84] = hotkeys;
-		$[85] = t44;
-	} else t44 = $[85];
-	useHotkeys(t40, t41, t43, t44);
-	const t45 = !!(hasIconSlot || finalPrefix);
-	const t46 = !!(hasRightIconSlot || finalSuffix || actions);
-	const t47 = !!finalPrefix;
-	const t48 = !!finalSuffix;
-	const t49 = !!actions;
-	const t50 = !!(actions && actions !== true);
-	const t51 = autoHideActions === true;
-	const t52 = preserveActionsSpace === true;
-	const t53 = showActions && insideWrapper;
-	const t54 = showDescription ? finalDescriptionPlacement : "none";
-	let t55;
-	if ($[86] !== baseMods || $[87] !== hasCheckmark || $[88] !== hasIconSlot || $[89] !== hasLabel || $[90] !== hasRightIconSlot || $[91] !== insideWrapper || $[92] !== showDescription || $[93] !== t45 || $[94] !== t46 || $[95] !== t47 || $[96] !== t48 || $[97] !== t49 || $[98] !== t50 || $[99] !== t51 || $[100] !== t52 || $[101] !== t53 || $[102] !== t54) {
-		t55 = {
+		$[85] = t45;
+	} else t45 = $[85];
+	useHotkeys(t41, t42, t44, t45);
+	const t46 = !!(hasIconSlot || finalPrefix);
+	const t47 = !!(hasRightIconSlot || finalSuffix || actions);
+	const t48 = !!finalPrefix;
+	const t49 = !!finalSuffix;
+	const t50 = !!actions;
+	const t51 = !!(actions && actions !== true);
+	const t52 = autoHideActions === true;
+	const t53 = preserveActionsSpace === true;
+	const t54 = showActions && insideWrapper;
+	const t55 = skipActionsWidthTransition && insideWrapper;
+	const t56 = showDescription ? finalDescriptionPlacement : "none";
+	let t57;
+	if ($[86] !== baseMods || $[87] !== hasCheckmark || $[88] !== hasIconSlot || $[89] !== hasLabel || $[90] !== hasRightIconSlot || $[91] !== insideWrapper || $[92] !== showDescription || $[93] !== t46 || $[94] !== t47 || $[95] !== t48 || $[96] !== t49 || $[97] !== t50 || $[98] !== t51 || $[99] !== t52 || $[100] !== t53 || $[101] !== t54 || $[102] !== t55 || $[103] !== t56) {
+		t57 = {
 			...baseMods,
 			"has-icon": hasIconSlot,
-			"has-start-content": t45,
-			"has-end-content": t46,
+			"has-start-content": t46,
+			"has-end-content": t47,
 			"has-right-icon": hasRightIconSlot,
 			"has-label": hasLabel,
-			"has-prefix": t47,
-			"has-suffix": t48,
+			"has-prefix": t48,
+			"has-suffix": t49,
 			"has-description": showDescription,
-			"has-actions": t49,
-			"has-actions-content": t50,
-			"auto-hide-actions": t51,
-			"preserve-actions-space": t52,
+			"has-actions": t50,
+			"has-actions-content": t51,
+			"auto-hide-actions": t52,
+			"preserve-actions-space": t53,
 			"inside-wrapper": insideWrapper,
-			"actions-shown": t53,
+			"actions-shown": t54,
+			"skip-actions-width-transition": t55,
 			checkmark: hasCheckmark,
-			description: t54
+			description: t56
 		};
 		$[86] = baseMods;
 		$[87] = hasCheckmark;
@@ -656,78 +662,79 @@ const Item = (props, ref) => {
 		$[90] = hasRightIconSlot;
 		$[91] = insideWrapper;
 		$[92] = showDescription;
-		$[93] = t45;
-		$[94] = t46;
-		$[95] = t47;
-		$[96] = t48;
-		$[97] = t49;
-		$[98] = t50;
-		$[99] = t51;
-		$[100] = t52;
-		$[101] = t53;
-		$[102] = t54;
-		$[103] = t55;
-	} else t55 = $[103];
-	const finalMods = t55;
-	const t56 = isDynamicLabel || !!actions || insideWrapper;
-	let t57;
-	if ($[104] !== children || $[105] !== labelProps || $[106] !== labelRefProp || $[107] !== t56 || $[108] !== tooltip) {
-		t57 = {
+		$[93] = t46;
+		$[94] = t47;
+		$[95] = t48;
+		$[96] = t49;
+		$[97] = t50;
+		$[98] = t51;
+		$[99] = t52;
+		$[100] = t53;
+		$[101] = t54;
+		$[102] = t55;
+		$[103] = t56;
+		$[104] = t57;
+	} else t57 = $[104];
+	const finalMods = t57;
+	const t58 = isDynamicLabel || !!actions || insideWrapper;
+	let t59;
+	if ($[105] !== children || $[106] !== labelProps || $[107] !== labelRefProp || $[108] !== t58 || $[109] !== tooltip) {
+		t59 = {
 			tooltip,
 			children,
 			labelProps,
 			labelRef: labelRefProp,
-			isDynamicLabel: t56
+			isDynamicLabel: t58
 		};
-		$[104] = children;
-		$[105] = labelProps;
-		$[106] = labelRefProp;
-		$[107] = t56;
-		$[108] = tooltip;
-		$[109] = t57;
-	} else t57 = $[109];
-	const { labelProps: finalLabelProps, labelRef, renderWithTooltip, isTooltipActive } = useAutoTooltip(t57);
+		$[105] = children;
+		$[106] = labelProps;
+		$[107] = labelRefProp;
+		$[108] = t58;
+		$[109] = tooltip;
+		$[110] = t59;
+	} else t59 = $[110];
+	const { labelProps: finalLabelProps, labelRef, renderWithTooltip, isTooltipActive } = useAutoTooltip(t59);
 	const { isNativelyDisabled, isInert, inertProps } = getDisabledElementProps({
 		isDisabled: finalIsDisabled,
 		keepEvents: isTooltipActive,
 		as: rest.as
 	});
-	let t58;
+	let t60;
 	bb2: {
 		if (typeof children === "string" && highlight) {
-			let t59;
-			if ($[110] !== children || $[111] !== highlight || $[112] !== highlightCaseSensitive || $[113] !== highlightStyles) {
-				t59 = highlightText(children, highlight, highlightCaseSensitive, highlightStyles);
-				$[110] = children;
-				$[111] = highlight;
-				$[112] = highlightCaseSensitive;
-				$[113] = highlightStyles;
-				$[114] = t59;
-			} else t59 = $[114];
-			t58 = t59;
+			let t61;
+			if ($[111] !== children || $[112] !== highlight || $[113] !== highlightCaseSensitive || $[114] !== highlightStyles) {
+				t61 = highlightText(children, highlight, highlightCaseSensitive, highlightStyles);
+				$[111] = children;
+				$[112] = highlight;
+				$[113] = highlightCaseSensitive;
+				$[114] = highlightStyles;
+				$[115] = t61;
+			} else t61 = $[115];
+			t60 = t61;
 			break bb2;
 		}
-		t58 = children;
+		t60 = children;
 	}
-	const processedChildren = t58;
-	let t59;
+	const processedChildren = t60;
+	let t61;
 	bb3: {
 		if (typeof description === "string" && highlight) {
-			let t60;
-			if ($[115] !== description || $[116] !== highlight || $[117] !== highlightCaseSensitive || $[118] !== highlightStyles) {
-				t60 = highlightText(description, highlight, highlightCaseSensitive, highlightStyles);
-				$[115] = description;
-				$[116] = highlight;
-				$[117] = highlightCaseSensitive;
-				$[118] = highlightStyles;
-				$[119] = t60;
-			} else t60 = $[119];
-			t59 = t60;
+			let t62;
+			if ($[116] !== description || $[117] !== highlight || $[118] !== highlightCaseSensitive || $[119] !== highlightStyles) {
+				t62 = highlightText(description, highlight, highlightCaseSensitive, highlightStyles);
+				$[116] = description;
+				$[117] = highlight;
+				$[118] = highlightCaseSensitive;
+				$[119] = highlightStyles;
+				$[120] = t62;
+			} else t62 = $[120];
+			t61 = t62;
 			break bb3;
 		}
-		t59 = description;
+		t61 = description;
 	}
-	const processedDescription = t59;
+	const processedDescription = t61;
 	const renderItemElement = (tooltipTriggerProps, tooltipRef) => {
 		const { pointerProps: elementTooltipProps, focusProps: tooltipFocusProps } = typeof hiddenContent === "function" ? splitTooltipTriggerProps(tooltipTriggerProps) : {
 			pointerProps: tooltipTriggerProps,