@cube-dev/ui-kit 0.190.1 → 0.190.3

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.3 | 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";
@@ -291,8 +291,215 @@ const ItemElement = tasty({
 	variants: ITEM_VARIANTS,
 	styleProps: CONTAINER_STYLES
 });
+const STANDARD_THEMES = [
+	"default",
+	"success",
+	"danger",
+	"warning",
+	"note",
+	"special",
+	"current"
+];
+const CARD_THEMES = [
+	"default",
+	"success",
+	"danger",
+	"warning",
+	"note",
+	"current"
+];
+const HEADER_THEMES = ["default"];
+/**
+* Warns about prop combinations the item does not support: a theme its type
+* has no flavour for, and the icons or loading state the "link" type cannot
+* show.
+*/
+function useItemPropWarnings(t0) {
+	const $ = c(17);
+	const { type, theme, icon, rightIcon, isLoading } = t0;
+	let t1;
+	if ($[0] !== theme || $[1] !== type) {
+		t1 = type === "header" && !HEADER_THEMES.includes(theme) || type === "card" && !CARD_THEMES.includes(theme) || !["header", "card"].includes(type) && !STANDARD_THEMES.includes(theme);
+		$[0] = theme;
+		$[1] = type;
+		$[2] = t1;
+	} else t1 = $[2];
+	const isInvalidCombination = t1;
+	let t2;
+	if ($[3] !== theme || $[4] !== type) {
+		t2 = [
+			"Item",
+			"invalid-type-theme",
+			type,
+			theme
+		];
+		$[3] = theme;
+		$[4] = type;
+		$[5] = t2;
+	} else t2 = $[5];
+	const t3 = `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 t4;
+	if ($[6] !== t3) {
+		t4 = [t3];
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t2 || $[9] !== t4) {
+		t5 = {
+			key: t2,
+			args: t4
+		};
+		$[8] = t2;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	useWarn(isInvalidCombination, t5);
+	const hasLinkWithIcons = type === "link" && (icon || rightIcon);
+	const hasLinkWithLoading = type === "link" && isLoading;
+	const hasLinkRestrictions = hasLinkWithIcons || hasLinkWithLoading;
+	let linkRestrictionMessages;
+	if ($[11] !== hasLinkWithIcons || $[12] !== hasLinkWithLoading) {
+		linkRestrictionMessages = [];
+		if (hasLinkWithIcons) linkRestrictionMessages.push("icons (`icon` or `rightIcon` props)");
+		if (hasLinkWithLoading) linkRestrictionMessages.push("loading state (`isLoading` prop)");
+		$[11] = hasLinkWithIcons;
+		$[12] = hasLinkWithLoading;
+		$[13] = linkRestrictionMessages;
+	} else linkRestrictionMessages = $[13];
+	let t6;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = ["Item", "link-restrictions"];
+		$[14] = t6;
+	} else t6 = $[14];
+	const t7 = `Item: The "link" type does not support ${linkRestrictionMessages.join(" or ")}. Remove these props when using type="link".`;
+	let t8;
+	if ($[15] !== t7) {
+		t8 = {
+			key: t6,
+			args: [t7]
+		};
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	useWarn(hasLinkRestrictions, t8);
+}
+/**
+* Splits `size` between the two ways the element takes it. A named size sets
+* the `size` mod, which picks the matching `$size` in the styles; any other
+* value (a number of pixels or a custom length) sets the `$size` token itself.
+*/
+function resolveItemSize(size) {
+	if (typeof size === "number") return { sizeToken: `${size}px` };
+	if (ITEM_SIZE_VALUES.includes(size)) return { sizeMod: size };
+	return { sizeToken: size };
+}
+/**
+* The slot the loading icon replaces, or `undefined` when the item is not
+* loading. Auto logic: prefer icon if present, then rightIcon, fallback to
+* icon.
+*/
+function resolveLoadingSlot(loadingSlot, isLoading, icon, rightIcon) {
+	if (!isLoading) return void 0;
+	if (loadingSlot !== "auto") return loadingSlot;
+	return rightIcon.hasSlot && !icon.hasSlot ? "rightIcon" : "icon";
+}
+/** A stable key for icon transitions, based on the icon type. */
+function getIconKey(icon) {
+	if (isValidElement(icon)) return icon.type?.displayName || icon.type?.name || "icon";
+	return icon ? "icon" : "empty";
+}
+/**
+* Applies the loading state to an icon slot. The slot renders when it has an
+* icon or an empty slot was asked for, or when the loading state targets it:
+* the loading icon then replaces the icon.
+*/
+function resolveIconSlot(icon, isLoadingSlot) {
+	if (isLoadingSlot) return {
+		hasSlot: true,
+		content: /* @__PURE__ */ jsx(LoadingIcon, {}),
+		key: "loading"
+	};
+	return {
+		hasSlot: icon.hasSlot,
+		content: icon.content,
+		key: getIconKey(icon.content)
+	};
+}
+/**
+* Which HotKeys flavour the shortcut hint wears. `inherit` paints the hint's
+* glyphs and rim from `currentcolor`, so it tracks whatever the row labels
+* itself with; `primary` pins the hint to `#white`; `default` is a neutral
+* `#dark.65` chip built for a page-colored row.
+*
+* The whole `current` theme wants `inherit`: every flavour there derives its
+* label from the inherited color, and a fixed hint cannot follow that. The
+* neutral `#dark.65`-on-`#dark.04` chip all but vanishes on a dark overlay,
+* which is exactly where this theme is meant to be used.
+*
+* `current.primary` is included despite painting its label with
+* `-webkit-text-fill-color` rather than `color`. The hint renders inside the
+* `Suffix` slot, and `CURRENT_PRIMARY_STYLES` recolors that slot to the label
+* color — so `currentcolor` there is the LABEL, not the fill. An earlier
+* version of this comment claimed the opposite and sent it to `primary`, which
+* put a `#white` hint on a light fill (measured cr 2.17 on a `#note` container
+* in dark mode).
+*/
+function getHotkeysType(theme, type) {
+	if (theme === "current") return "inherit";
+	return type === "primary" ? "primary" : "default";
+}
+/** Registers `hotkeys` as a global shortcut that clicks the item. */
+function useHotkeyClick(hotkeys, isDisabled, ref) {
+	const $ = c(11);
+	let t0;
+	if ($[0] !== hotkeys) {
+		t0 = typeof hotkeys === "string" ? hotkeys.toLowerCase() : "";
+		$[0] = hotkeys;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== hotkeys || $[3] !== isDisabled || $[4] !== ref) {
+		t1 = () => {
+			if (!hotkeys) return;
+			if (isDisabled) return;
+			if (ref && typeof ref === "object" && ref.current) ref.current.click();
+		};
+		$[2] = hotkeys;
+		$[3] = isDisabled;
+		$[4] = ref;
+		$[5] = t1;
+	} else t1 = $[5];
+	const t2 = !!hotkeys;
+	let t3;
+	if ($[6] !== t2) {
+		t3 = {
+			enableOnContentEditable: true,
+			enabled: t2,
+			preventDefault: true,
+			enableOnFormTags: true
+		};
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== hotkeys || $[9] !== isDisabled) {
+		t4 = [hotkeys, isDisabled];
+		$[8] = hotkeys;
+		$[9] = isDisabled;
+		$[10] = t4;
+	} else t4 = $[10];
+	useHotkeys(t0, t1, t3, t4);
+}
+/**
+* Highlights matches of `highlight` in a plain-string label or description.
+* Any other content is returned as is.
+*/
+function highlightContent(content, highlight, caseSensitive, highlightStyles) {
+	return typeof content === "string" && highlight ? highlightText(content, highlight, caseSensitive, highlightStyles) : content;
+}
 const Item = (props, ref) => {
-	const $ = c(115);
+	const $ = c(75);
 	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;
@@ -316,368 +523,222 @@ const Item = (props, ref) => {
 	const isDisabledProp = isDisabled ?? (nativeDisabledProp || void 0);
 	const finalIsDisabled = isDisabledProp === true || isLoading && isDisabledProp !== false;
 	let t16;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = [
-			"default",
-			"success",
-			"danger",
-			"warning",
-			"note",
-			"special",
-			"current"
-		];
-		$[0] = t16;
-	} else t16 = $[0];
-	const STANDARD_THEMES = t16;
-	let t17;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = [
-			"default",
-			"success",
-			"danger",
-			"warning",
-			"note",
-			"current"
-		];
-		$[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) {
-		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] = t19;
-	} else t19 = $[5];
-	const isInvalidCombination = t19;
-	let t20;
-	if ($[6] !== theme || $[7] !== type) {
-		t20 = [
-			"Item",
-			"invalid-type-theme",
+	if ($[0] !== iconProp || $[1] !== isLoading || $[2] !== rightIconProp || $[3] !== theme || $[4] !== type) {
+		t16 = {
 			type,
-			theme
-		];
-		$[6] = theme;
-		$[7] = type;
-		$[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 ($[9] !== t21) {
-		t22 = [t21];
-		$[9] = t21;
-		$[10] = t22;
-	} else t22 = $[10];
-	let t23;
-	if ($[11] !== t20 || $[12] !== t22) {
-		t23 = {
-			key: t20,
-			args: 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;
-	let linkRestrictionMessages;
-	if ($[14] !== hasLinkWithIcons || $[15] !== hasLinkWithLoading) {
-		linkRestrictionMessages = [];
-		if (hasLinkWithIcons) linkRestrictionMessages.push("icons (`icon` or `rightIcon` props)");
-		if (hasLinkWithLoading) linkRestrictionMessages.push("loading state (`isLoading` prop)");
-		$[14] = hasLinkWithIcons;
-		$[15] = hasLinkWithLoading;
-		$[16] = linkRestrictionMessages;
-	} else linkRestrictionMessages = $[16];
-	let t24;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		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]
+			theme,
+			icon: iconProp,
+			rightIcon: rightIconProp,
+			isLoading
 		};
-		$[18] = t25;
-		$[19] = t26;
-	} else t26 = $[19];
-	useWarn(hasLinkRestrictions, t26);
+		$[0] = iconProp;
+		$[1] = isLoading;
+		$[2] = rightIconProp;
+		$[3] = theme;
+		$[4] = type;
+		$[5] = t16;
+	} else t16 = $[5];
+	useItemPropWarnings(t16);
 	const hasCheckmark = iconProp === "checkmark";
-	let t27;
-	if ($[20] !== size) {
-		t27 = typeof size === "number" || !ITEM_SIZE_VALUES.includes(size);
-		$[20] = size;
-		$[21] = t27;
-	} else t27 = $[21];
-	const isCustomSize = t27;
-	const sizeTokenValue = typeof size === "number" ? `${size}px` : isCustomSize ? size : void 0;
-	const t28 = isSelected === true;
 	let baseMods;
-	let resolvedIcon;
-	let t29;
-	if ($[22] !== finalIsDisabled || $[23] !== finalShape || $[24] !== hasCheckmark || $[25] !== iconProp || $[26] !== isCustomSize || $[27] !== isLoading || $[28] !== mods || $[29] !== rightIconProp || $[30] !== size || $[31] !== t28 || $[32] !== theme || $[33] !== type) {
+	let finalTokens;
+	let iconSlot;
+	let loadingTarget;
+	let t17;
+	if ($[6] !== finalIsDisabled || $[7] !== finalShape || $[8] !== hasCheckmark || $[9] !== iconProp || $[10] !== isLoading || $[11] !== isSelected || $[12] !== loadingSlot || $[13] !== mods || $[14] !== rightIconProp || $[15] !== size || $[16] !== theme || $[17] !== tokens || $[18] !== type) {
+		const { sizeMod, sizeToken } = resolveItemSize(size);
+		finalTokens = {
+			...tokens,
+			...sizeToken ? { $size: sizeToken } : {}
+		};
 		baseMods = {
 			disabled: finalIsDisabled,
-			selected: t28,
+			selected: isSelected === true,
 			loading: isLoading,
-			...!isCustomSize && { size },
+			...sizeMod !== void 0 && { size: sizeMod },
 			type,
 			theme,
 			shape: finalShape,
 			...mods
 		};
-		resolvedIcon = hasCheckmark ? {
+		const resolvedIcon = hasCheckmark ? {
 			content: null,
 			hasSlot: true
 		} : resolveIcon(iconProp, baseMods);
-		t29 = resolveIcon(rightIconProp, baseMods);
-		$[22] = finalIsDisabled;
-		$[23] = finalShape;
-		$[24] = hasCheckmark;
-		$[25] = iconProp;
-		$[26] = isCustomSize;
-		$[27] = isLoading;
-		$[28] = mods;
-		$[29] = rightIconProp;
-		$[30] = size;
-		$[31] = t28;
-		$[32] = theme;
-		$[33] = type;
-		$[34] = baseMods;
-		$[35] = resolvedIcon;
-		$[36] = t29;
+		const resolvedRightIcon = resolveIcon(rightIconProp, baseMods);
+		loadingTarget = resolveLoadingSlot(loadingSlot, isLoading, resolvedIcon, resolvedRightIcon);
+		iconSlot = hasCheckmark ? {
+			hasSlot: true,
+			content: /* @__PURE__ */ jsx(CheckIcon, {}),
+			key: "checkmark"
+		} : resolveIconSlot(resolvedIcon, loadingTarget === "icon");
+		t17 = resolveIconSlot(resolvedRightIcon, loadingTarget === "rightIcon");
+		$[6] = finalIsDisabled;
+		$[7] = finalShape;
+		$[8] = hasCheckmark;
+		$[9] = iconProp;
+		$[10] = isLoading;
+		$[11] = isSelected;
+		$[12] = loadingSlot;
+		$[13] = mods;
+		$[14] = rightIconProp;
+		$[15] = size;
+		$[16] = theme;
+		$[17] = tokens;
+		$[18] = type;
+		$[19] = baseMods;
+		$[20] = finalTokens;
+		$[21] = iconSlot;
+		$[22] = loadingTarget;
+		$[23] = t17;
 	} else {
-		baseMods = $[34];
-		resolvedIcon = $[35];
-		t29 = $[36];
+		baseMods = $[19];
+		finalTokens = $[20];
+		iconSlot = $[21];
+		loadingTarget = $[22];
+		t17 = $[23];
 	}
-	const resolvedRightIcon = t29;
-	const resolvedLoadingSlot = loadingSlot !== "auto" ? loadingSlot : resolvedRightIcon.hasSlot && !resolvedIcon.hasSlot ? "rightIcon" : "icon";
-	const hasIconSlot = resolvedIcon.hasSlot || isLoading && resolvedLoadingSlot === "icon";
-	const hasRightIconSlot = resolvedRightIcon.hasSlot || isLoading && resolvedLoadingSlot === "rightIcon";
-	let t30;
-	if ($[37] !== description || $[38] !== descriptionProps) {
-		t30 = !!description || Object.keys(descriptionProps ?? {}).some(_temp);
-		$[37] = description;
-		$[38] = descriptionProps;
-		$[39] = t30;
-	} else t30 = $[39];
-	const showDescription = t30;
-	let t31;
-	if ($[40] !== isLoading || $[41] !== resolvedIcon.content || $[42] !== resolvedLoadingSlot) {
-		t31 = isLoading && resolvedLoadingSlot === "icon" ? /* @__PURE__ */ jsx(LoadingIcon, {}) : resolvedIcon.content;
-		$[40] = isLoading;
-		$[41] = resolvedIcon.content;
-		$[42] = resolvedLoadingSlot;
-		$[43] = t31;
-	} else t31 = $[43];
-	const finalIcon = t31;
-	let t32;
-	if ($[44] !== isLoading || $[45] !== resolvedLoadingSlot || $[46] !== resolvedRightIcon.content) {
-		t32 = isLoading && resolvedLoadingSlot === "rightIcon" ? /* @__PURE__ */ jsx(LoadingIcon, {}) : resolvedRightIcon.content;
-		$[44] = isLoading;
-		$[45] = resolvedLoadingSlot;
-		$[46] = resolvedRightIcon.content;
-		$[47] = t32;
-	} else t32 = $[47];
-	const finalRightIcon = t32;
-	let t33;
-	if ($[48] !== finalIcon || $[49] !== hasCheckmark || $[50] !== isLoading || $[51] !== resolvedLoadingSlot) {
-		t33 = hasCheckmark ? "checkmark" : isLoading && resolvedLoadingSlot === "icon" ? "loading" : isValidElement(finalIcon) ? finalIcon.type?.displayName || finalIcon.type?.name || "icon" : finalIcon ? "icon" : "empty";
-		$[48] = finalIcon;
-		$[49] = hasCheckmark;
-		$[50] = isLoading;
-		$[51] = resolvedLoadingSlot;
-		$[52] = t33;
-	} else t33 = $[52];
-	const iconKey = t33;
-	let t34;
-	if ($[53] !== finalRightIcon || $[54] !== isLoading || $[55] !== resolvedLoadingSlot) {
-		t34 = isLoading && resolvedLoadingSlot === "rightIcon" ? "loading" : isValidElement(finalRightIcon) ? finalRightIcon.type?.displayName || finalRightIcon.type?.name || "icon" : finalRightIcon ? "icon" : "empty";
-		$[53] = finalRightIcon;
-		$[54] = isLoading;
-		$[55] = resolvedLoadingSlot;
-		$[56] = t34;
-	} else t34 = $[56];
-	const rightIconKey = t34;
-	let t35;
-	if ($[57] !== isLoading || $[58] !== prefix || $[59] !== resolvedLoadingSlot) {
-		t35 = isLoading && resolvedLoadingSlot === "prefix" ? /* @__PURE__ */ jsx(LoadingIcon, {}) : prefix;
-		$[57] = isLoading;
-		$[58] = prefix;
-		$[59] = resolvedLoadingSlot;
-		$[60] = t35;
-	} else t35 = $[60];
-	const finalPrefix = t35;
-	const hotkeysType = theme === "current" ? "inherit" : type === "primary" ? "primary" : "default";
-	let t36;
-	if ($[61] !== finalIsDisabled || $[62] !== hotkeys || $[63] !== hotkeysType || $[64] !== isLoading || $[65] !== keyboardShortcutProps || $[66] !== resolvedLoadingSlot || $[67] !== suffix) {
-		t36 = isLoading && resolvedLoadingSlot === "suffix" ? /* @__PURE__ */ jsx(LoadingIcon, {}) : suffix ?? (hotkeys ? /* @__PURE__ */ jsx(_HotKeys, {
+	const rightIconSlot = t17;
+	let t18;
+	if ($[24] !== description || $[25] !== descriptionProps) {
+		t18 = !!description || Object.keys(descriptionProps ?? {}).some(_temp);
+		$[24] = description;
+		$[25] = descriptionProps;
+		$[26] = t18;
+	} else t18 = $[26];
+	const showDescription = t18;
+	let t19;
+	if ($[27] !== loadingTarget || $[28] !== prefix) {
+		t19 = loadingTarget === "prefix" ? /* @__PURE__ */ jsx(LoadingIcon, {}) : prefix;
+		$[27] = loadingTarget;
+		$[28] = prefix;
+		$[29] = t19;
+	} else t19 = $[29];
+	const finalPrefix = t19;
+	let t20;
+	if ($[30] !== finalIsDisabled || $[31] !== hotkeys || $[32] !== keyboardShortcutProps || $[33] !== loadingTarget || $[34] !== suffix || $[35] !== theme || $[36] !== type) {
+		t20 = loadingTarget === "suffix" ? /* @__PURE__ */ jsx(LoadingIcon, {}) : suffix ?? (hotkeys ? /* @__PURE__ */ jsx(_HotKeys, {
 			...keyboardShortcutProps,
-			type: hotkeysType,
+			type: getHotkeysType(theme, type),
 			styles: {
 				padding: "1x left",
 				opacity: finalIsDisabled ? .5 : 1
 			},
 			children: hotkeys
 		}) : void 0);
-		$[61] = finalIsDisabled;
-		$[62] = hotkeys;
-		$[63] = hotkeysType;
-		$[64] = isLoading;
-		$[65] = keyboardShortcutProps;
-		$[66] = resolvedLoadingSlot;
-		$[67] = suffix;
-		$[68] = t36;
-	} else t36 = $[68];
-	const finalSuffix = t36;
-	let t37;
-	if ($[69] !== hotkeys) {
-		t37 = typeof hotkeys === "string" ? hotkeys.toLowerCase() : "";
-		$[69] = hotkeys;
-		$[70] = t37;
-	} else t37 = $[70];
-	let t38;
-	if ($[71] !== finalIsDisabled || $[72] !== hotkeys || $[73] !== ref) {
-		t38 = () => {
-			if (!hotkeys) return;
-			if (finalIsDisabled) return;
-			if (ref && typeof ref === "object" && ref.current) ref.current.click();
-		};
-		$[71] = finalIsDisabled;
-		$[72] = hotkeys;
-		$[73] = ref;
-		$[74] = t38;
-	} else t38 = $[74];
-	const t39 = !!hotkeys;
-	let t40;
-	if ($[75] !== t39) {
-		t40 = {
-			enableOnContentEditable: true,
-			enabled: t39,
-			preventDefault: true,
-			enableOnFormTags: true
-		};
-		$[75] = t39;
-		$[76] = t40;
-	} else t40 = $[76];
-	let t41;
-	if ($[77] !== finalIsDisabled || $[78] !== hotkeys) {
-		t41 = [hotkeys, finalIsDisabled];
-		$[77] = finalIsDisabled;
-		$[78] = hotkeys;
-		$[79] = t41;
-	} else t41 = $[79];
-	useHotkeys(t37, t38, t40, t41);
-	const t42 = !!(hasIconSlot || finalPrefix);
-	const t43 = !!(hasRightIconSlot || finalSuffix || actions);
-	const t44 = !!finalPrefix;
-	const t45 = !!finalSuffix;
-	const t46 = !!actions;
-	const t47 = !!(actions && actions !== true);
-	const t48 = autoHideActions === true;
-	const t49 = preserveActionsSpace === true;
-	const t50 = showActions && insideWrapper;
-	const t51 = skipActionsWidthTransition && insideWrapper;
-	const t52 = showDescription ? finalDescriptionPlacement : "none";
-	let t53;
-	if ($[80] !== baseMods || $[81] !== hasCheckmark || $[82] !== hasIconSlot || $[83] !== hasLabel || $[84] !== hasRightIconSlot || $[85] !== insideWrapper || $[86] !== showDescription || $[87] !== t42 || $[88] !== t43 || $[89] !== t44 || $[90] !== t45 || $[91] !== t46 || $[92] !== t47 || $[93] !== t48 || $[94] !== t49 || $[95] !== t50 || $[96] !== t51 || $[97] !== t52) {
-		t53 = {
+		$[30] = finalIsDisabled;
+		$[31] = hotkeys;
+		$[32] = keyboardShortcutProps;
+		$[33] = loadingTarget;
+		$[34] = suffix;
+		$[35] = theme;
+		$[36] = type;
+		$[37] = t20;
+	} else t20 = $[37];
+	const finalSuffix = t20;
+	useHotkeyClick(hotkeys, finalIsDisabled, ref);
+	const t21 = !!(iconSlot.hasSlot || finalPrefix);
+	const t22 = !!(rightIconSlot.hasSlot || finalSuffix || actions);
+	const t23 = !!finalPrefix;
+	const t24 = !!finalSuffix;
+	const t25 = !!actions;
+	const t26 = !!(actions && actions !== true);
+	const t27 = autoHideActions === true;
+	const t28 = preserveActionsSpace === true;
+	const t29 = showActions && insideWrapper;
+	const t30 = skipActionsWidthTransition && insideWrapper;
+	const t31 = showDescription ? finalDescriptionPlacement : "none";
+	let t32;
+	if ($[38] !== baseMods || $[39] !== hasCheckmark || $[40] !== hasLabel || $[41] !== iconSlot.hasSlot || $[42] !== insideWrapper || $[43] !== rightIconSlot.hasSlot || $[44] !== showDescription || $[45] !== t21 || $[46] !== t22 || $[47] !== t23 || $[48] !== t24 || $[49] !== t25 || $[50] !== t26 || $[51] !== t27 || $[52] !== t28 || $[53] !== t29 || $[54] !== t30 || $[55] !== t31) {
+		t32 = {
 			...baseMods,
-			"has-icon": hasIconSlot,
-			"has-start-content": t42,
-			"has-end-content": t43,
-			"has-right-icon": hasRightIconSlot,
+			"has-icon": iconSlot.hasSlot,
+			"has-start-content": t21,
+			"has-end-content": t22,
+			"has-right-icon": rightIconSlot.hasSlot,
 			"has-label": hasLabel,
-			"has-prefix": t44,
-			"has-suffix": t45,
+			"has-prefix": t23,
+			"has-suffix": t24,
 			"has-description": showDescription,
-			"has-actions": t46,
-			"has-actions-content": t47,
-			"auto-hide-actions": t48,
-			"preserve-actions-space": t49,
+			"has-actions": t25,
+			"has-actions-content": t26,
+			"auto-hide-actions": t27,
+			"preserve-actions-space": t28,
 			"inside-wrapper": insideWrapper,
-			"actions-shown": t50,
-			"skip-actions-width-transition": t51,
+			"actions-shown": t29,
+			"skip-actions-width-transition": t30,
 			checkmark: hasCheckmark,
-			description: t52
+			description: t31
 		};
-		$[80] = baseMods;
-		$[81] = hasCheckmark;
-		$[82] = hasIconSlot;
-		$[83] = hasLabel;
-		$[84] = hasRightIconSlot;
-		$[85] = insideWrapper;
-		$[86] = showDescription;
-		$[87] = t42;
-		$[88] = t43;
-		$[89] = t44;
-		$[90] = t45;
-		$[91] = t46;
-		$[92] = t47;
-		$[93] = t48;
-		$[94] = t49;
-		$[95] = t50;
-		$[96] = t51;
-		$[97] = t52;
-		$[98] = t53;
-	} else t53 = $[98];
-	const finalMods = t53;
-	const t54 = isDynamicLabel || !!actions || insideWrapper;
-	let t55;
-	if ($[99] !== children || $[100] !== labelProps || $[101] !== labelRefProp || $[102] !== t54 || $[103] !== tooltip) {
-		t55 = {
+		$[38] = baseMods;
+		$[39] = hasCheckmark;
+		$[40] = hasLabel;
+		$[41] = iconSlot.hasSlot;
+		$[42] = insideWrapper;
+		$[43] = rightIconSlot.hasSlot;
+		$[44] = showDescription;
+		$[45] = t21;
+		$[46] = t22;
+		$[47] = t23;
+		$[48] = t24;
+		$[49] = t25;
+		$[50] = t26;
+		$[51] = t27;
+		$[52] = t28;
+		$[53] = t29;
+		$[54] = t30;
+		$[55] = t31;
+		$[56] = t32;
+	} else t32 = $[56];
+	const finalMods = t32;
+	const t33 = descriptionProps?.ref;
+	const t34 = isDynamicLabel || !!actions || insideWrapper;
+	let t35;
+	if ($[57] !== children || $[58] !== description || $[59] !== labelProps || $[60] !== labelRefProp || $[61] !== t33 || $[62] !== t34 || $[63] !== tooltip) {
+		t35 = {
 			tooltip,
 			children,
+			description,
 			labelProps,
 			labelRef: labelRefProp,
-			isDynamicLabel: t54
+			descriptionRef: t33,
+			isDynamicLabel: t34
 		};
-		$[99] = children;
-		$[100] = labelProps;
-		$[101] = labelRefProp;
-		$[102] = t54;
-		$[103] = tooltip;
-		$[104] = t55;
-	} else t55 = $[104];
-	const { labelProps: finalLabelProps, labelRef, renderWithTooltip, isTooltipActive } = useAutoTooltip(t55);
+		$[57] = children;
+		$[58] = description;
+		$[59] = labelProps;
+		$[60] = labelRefProp;
+		$[61] = t33;
+		$[62] = t34;
+		$[63] = tooltip;
+		$[64] = t35;
+	} else t35 = $[64];
+	const { labelProps: finalLabelProps, labelRef, descriptionRef, renderWithTooltip, isTooltipActive } = useAutoTooltip(t35);
 	const { isNativelyDisabled, isInert, inertProps } = getDisabledElementProps({
 		isDisabled: finalIsDisabled,
 		keepEvents: isTooltipActive,
 		as: rest.as
 	});
-	let t56;
-	if ($[105] !== children || $[106] !== highlight || $[107] !== highlightCaseSensitive || $[108] !== highlightStyles) {
-		t56 = typeof children === "string" && highlight ? highlightText(children, highlight, highlightCaseSensitive, highlightStyles) : children;
-		$[105] = children;
-		$[106] = highlight;
-		$[107] = highlightCaseSensitive;
-		$[108] = highlightStyles;
-		$[109] = t56;
-	} else t56 = $[109];
-	const processedChildren = t56;
-	let t57;
-	if ($[110] !== description || $[111] !== highlight || $[112] !== highlightCaseSensitive || $[113] !== highlightStyles) {
-		t57 = typeof description === "string" && highlight ? highlightText(description, highlight, highlightCaseSensitive, highlightStyles) : description;
-		$[110] = description;
-		$[111] = highlight;
-		$[112] = highlightCaseSensitive;
-		$[113] = highlightStyles;
-		$[114] = t57;
-	} else t57 = $[114];
-	const processedDescription = t57;
+	let t36;
+	if ($[65] !== children || $[66] !== highlight || $[67] !== highlightCaseSensitive || $[68] !== highlightStyles) {
+		t36 = highlightContent(children, highlight, highlightCaseSensitive, highlightStyles);
+		$[65] = children;
+		$[66] = highlight;
+		$[67] = highlightCaseSensitive;
+		$[68] = highlightStyles;
+		$[69] = t36;
+	} else t36 = $[69];
+	const processedChildren = t36;
+	let t37;
+	if ($[70] !== description || $[71] !== highlight || $[72] !== highlightCaseSensitive || $[73] !== highlightStyles) {
+		t37 = highlightContent(description, highlight, highlightCaseSensitive, highlightStyles);
+		$[70] = description;
+		$[71] = highlight;
+		$[72] = highlightCaseSensitive;
+		$[73] = highlightStyles;
+		$[74] = t37;
+	} else t37 = $[74];
+	const processedDescription = t37;
 	const renderItemElement = (tooltipTriggerProps, tooltipRef) => {
 		const { pointerProps: elementTooltipProps, focusProps: tooltipFocusProps } = typeof hiddenContent === "function" ? splitTooltipTriggerProps(tooltipTriggerProps) : {
 			pointerProps: tooltipTriggerProps,
@@ -696,21 +757,18 @@ const Item = (props, ref) => {
 			"aria-selected": rest["aria-pressed"] != null ? void 0 : isSelected,
 			mods: finalMods,
 			styles,
-			tokens: {
-				...tokens,
-				...sizeTokenValue ? { $size: sizeTokenValue } : {}
-			},
+			tokens: finalTokens,
 			type: htmlType,
 			...mergeProps(isInert ? omitActivationEventProps(rest) : rest, elementTooltipProps || {}, inertProps),
 			style,
 			children: [
 				typeof hiddenContent === "function" ? hiddenContent(tooltipFocusProps ?? {}) : hiddenContent,
-				hasIconSlot && /* @__PURE__ */ jsx("div", {
+				iconSlot.hasSlot && /* @__PURE__ */ jsx("div", {
 					"data-element": "Icon",
 					children: /* @__PURE__ */ jsx(IconSwitch, {
 						noWrapper: true,
-						contentKey: iconKey,
-						children: hasCheckmark ? /* @__PURE__ */ jsx(CheckIcon, {}) : finalIcon
+						contentKey: iconSlot.key,
+						children: iconSlot.content
 					})
 				}),
 				finalPrefix && /* @__PURE__ */ jsx("div", {
@@ -726,18 +784,19 @@ const Item = (props, ref) => {
 				showDescription ? /* @__PURE__ */ jsx("div", {
 					"data-element": "Description",
 					...descriptionProps,
+					ref: descriptionRef,
 					children: processedDescription
 				}) : null,
 				finalSuffix && /* @__PURE__ */ jsx("div", {
 					"data-element": "Suffix",
 					children: finalSuffix
 				}),
-				hasRightIconSlot && /* @__PURE__ */ jsx("div", {
+				rightIconSlot.hasSlot && /* @__PURE__ */ jsx("div", {
 					"data-element": "RightIcon",
 					children: /* @__PURE__ */ jsx(IconSwitch, {
 						noWrapper: true,
-						contentKey: rightIconKey,
-						children: finalRightIcon
+						contentKey: rightIconSlot.key,
+						children: rightIconSlot.content
 					})
 				}),
 				actions && /* @__PURE__ */ jsx("div", {