moduix 0.11.0 → 0.11.1

package/dist/components/ContextMenu/ContextMenu.cjs

@@ -0,0 +1,241 @@
+const require_Icons = require("../../icons/ui/Icons.cjs");
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_ContextMenu_module = require("./ContextMenu.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+let _base_ui_react_context_menu = require("@base-ui/react/context-menu");
+//#region src/components/ContextMenu/ContextMenu.tsx
+const CONTEXT_MENU_CONTENT_SIDE_OFFSET = 8;
+const ContextMenu = _base_ui_react_context_menu.ContextMenu.Root;
+const ContextMenuSubmenu = _base_ui_react_context_menu.ContextMenu.SubmenuRoot;
+function ContextMenuTrigger({ className, render, ...props }) {
+	const triggerClassName = render ? className : require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.trigger);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.Trigger, {
+		"data-slot": "context-menu-trigger",
+		render,
+		className: triggerClassName,
+		...props
+	});
+}
+function ContextMenuPortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.Portal, {
+		"data-slot": "context-menu-portal",
+		...props
+	});
+}
+function ContextMenuBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.Backdrop, {
+		"data-slot": "context-menu-backdrop",
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.backdrop),
+		...props
+	});
+}
+function ContextMenuPositioner({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.Positioner, {
+		"data-slot": "context-menu-positioner",
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.positioner),
+		...props
+	});
+}
+function ContextMenuPopup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.Popup, {
+		"data-slot": "context-menu-popup",
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.popup),
+		...props
+	});
+}
+function ContextMenuArrow({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.Arrow, {
+		"data-slot": "context-menu-arrow",
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.arrow),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrowSvg, {})
+	});
+}
+function ContextMenuContent({ className, showArrow = false, children, sideOffset = CONTEXT_MENU_CONTENT_SIDE_OFFSET, side, align, alignOffset, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuPositioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		arrowPadding,
+		collisionAvoidance,
+		collisionBoundary,
+		collisionPadding,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContextMenuPopup, {
+			className,
+			...props,
+			children: [showArrow ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuArrow, {}) : null, children]
+		})
+	}) });
+}
+function ContextMenuSubmenuContent({ sideOffset = getSubmenuOffset, alignOffset = getSubmenuOffset, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuContent, {
+		sideOffset,
+		alignOffset,
+		...props
+	});
+}
+function ContextMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.Item, {
+		"data-slot": "context-menu-item",
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.item),
+		...props
+	});
+}
+function ContextMenuLinkItem({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.LinkItem, {
+		"data-slot": "context-menu-link-item",
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.linkItem),
+		...props
+	});
+}
+function ContextMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.Separator, {
+		"data-slot": "context-menu-separator",
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.separator),
+		...props
+	});
+}
+function ContextMenuGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.Group, {
+		"data-slot": "context-menu-group",
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.group),
+		...props
+	});
+}
+function ContextMenuGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.GroupLabel, {
+		"data-slot": "context-menu-group-label",
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.groupLabel),
+		...props
+	});
+}
+function ContextMenuSubmenuTrigger({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.SubmenuTrigger, {
+		"data-slot": "context-menu-submenu-trigger",
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.submenuTrigger),
+		...props
+	});
+}
+function ContextMenuSubmenuTriggerIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "context-menu-submenu-trigger-icon",
+		className: (0, clsx.clsx)(require_ContextMenu_module.default.submenuTriggerIcon, className),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.ChevronRightIcon, { className: require_ContextMenu_module.default.iconSvg })
+	});
+}
+function ContextMenuRadioGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.radioGroup),
+		...props
+	});
+}
+function ContextMenuRadioItem({ className, indicator, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.RadioItem, {
+		"data-slot": "context-menu-radio-item",
+		"data-indicator-position": indicator,
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.radioItem),
+		...props
+	});
+}
+function ContextMenuRadioItemIndicator({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.RadioItemIndicator, {
+		"data-slot": "context-menu-radio-item-indicator",
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.radioItemIndicator),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.CheckIcon, { className: require_ContextMenu_module.default.itemIndicatorIcon })
+	});
+}
+function ContextMenuCheckboxItem({ className, indicator, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.CheckboxItem, {
+		"data-slot": "context-menu-checkbox-item",
+		"data-indicator-position": indicator,
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.checkboxItem),
+		...props
+	});
+}
+function ContextMenuCheckboxItemIndicator({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_context_menu.ContextMenu.CheckboxItemIndicator, {
+		"data-slot": "context-menu-checkbox-item-indicator",
+		className: require_mergeClassName.mergeClassName(className, require_ContextMenu_module.default.checkboxItemIndicator),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.CheckIcon, { className: require_ContextMenu_module.default.itemIndicatorIcon })
+	});
+}
+function ContextMenuItemText({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "context-menu-item-text",
+		className: (0, clsx.clsx)(require_ContextMenu_module.default.itemText, className),
+		...props
+	});
+}
+function ContextMenuItemTextContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "context-menu-item-text-content",
+		className: (0, clsx.clsx)(require_ContextMenu_module.default.itemTextContent, className),
+		...props
+	});
+}
+function ContextMenuItemTextIcon({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "context-menu-item-text-icon",
+		className: (0, clsx.clsx)(require_ContextMenu_module.default.itemTextIcon, className),
+		...props
+	});
+}
+function ContextMenuItemTextLabel({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "context-menu-item-text-label",
+		className: (0, clsx.clsx)(require_ContextMenu_module.default.itemTextLabel, className),
+		...props
+	});
+}
+function ContextMenuItemShortcut({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "context-menu-item-shortcut",
+		className: (0, clsx.clsx)(require_ContextMenu_module.default.itemShortcut, className),
+		...props
+	});
+}
+function getSubmenuOffset({ side }) {
+	return side === "top" || side === "bottom" ? 4 : -4;
+}
+function ArrowSvg(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.PopupArrowIcon, {
+		fillClassName: require_ContextMenu_module.default.arrowFill,
+		outerStrokeClassName: require_ContextMenu_module.default.arrowOuterStroke,
+		innerStrokeClassName: require_ContextMenu_module.default.arrowInnerStroke,
+		...props
+	});
+}
+//#endregion
+exports.ContextMenu = ContextMenu;
+exports.ContextMenuArrow = ContextMenuArrow;
+exports.ContextMenuBackdrop = ContextMenuBackdrop;
+exports.ContextMenuCheckboxItem = ContextMenuCheckboxItem;
+exports.ContextMenuCheckboxItemIndicator = ContextMenuCheckboxItemIndicator;
+exports.ContextMenuContent = ContextMenuContent;
+exports.ContextMenuGroup = ContextMenuGroup;
+exports.ContextMenuGroupLabel = ContextMenuGroupLabel;
+exports.ContextMenuItem = ContextMenuItem;
+exports.ContextMenuItemShortcut = ContextMenuItemShortcut;
+exports.ContextMenuItemText = ContextMenuItemText;
+exports.ContextMenuItemTextContent = ContextMenuItemTextContent;
+exports.ContextMenuItemTextIcon = ContextMenuItemTextIcon;
+exports.ContextMenuItemTextLabel = ContextMenuItemTextLabel;
+exports.ContextMenuLinkItem = ContextMenuLinkItem;
+exports.ContextMenuPopup = ContextMenuPopup;
+exports.ContextMenuPortal = ContextMenuPortal;
+exports.ContextMenuPositioner = ContextMenuPositioner;
+exports.ContextMenuRadioGroup = ContextMenuRadioGroup;
+exports.ContextMenuRadioItem = ContextMenuRadioItem;
+exports.ContextMenuRadioItemIndicator = ContextMenuRadioItemIndicator;
+exports.ContextMenuSeparator = ContextMenuSeparator;
+exports.ContextMenuSubmenu = ContextMenuSubmenu;
+exports.ContextMenuSubmenuContent = ContextMenuSubmenuContent;
+exports.ContextMenuSubmenuTrigger = ContextMenuSubmenuTrigger;
+exports.ContextMenuSubmenuTriggerIcon = ContextMenuSubmenuTriggerIcon;
+exports.ContextMenuTrigger = ContextMenuTrigger;

package/dist/components/ContextMenu/ContextMenu.css

@@ -0,0 +1,308 @@
+@layer ui.components {
+  ._di0eq_trigger {
+    box-sizing: border-box;
+    outline: 0;
+    margin: 0;
+
+    &:focus-visible {
+      outline: var(--border-width-sm) solid var(--context-menu-focus-ring-color, var(--color-ring));
+      outline-offset: 0;
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--context-menu-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  ._di0eq_iconSvg {
+    width: 100%;
+    height: 100%;
+  }
+
+  ._di0eq_backdrop {
+    z-index: var(--z-backdrop);
+    background-color: var(--context-menu-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    min-height: 100dvh;
+    backdrop-filter: var(--backdrop-filter, blur(var(--context-menu-backdrop-blur, 4px)));
+    transition: opacity
+        var(--context-menu-backdrop-transition, var(--context-menu-transition, var(--transition-default))),
+      backdrop-filter
+        var(--context-menu-backdrop-transition, var(--context-menu-transition, var(--transition-default)));
+    position: fixed;
+    inset: 0;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      backdrop-filter: none;
+    }
+  }
+
+  ._di0eq_positioner {
+    z-index: var(--z-popup);
+    outline: 0;
+  }
+
+  ._di0eq_popup {
+    box-sizing: border-box;
+    min-width: min(var(--context-menu-popup-min-width, 12rem), var(--available-width, 100vw));
+    max-width: min(var(--context-menu-popup-max-width, 20rem), var(--available-width, 100vw));
+    max-height: min(var(--context-menu-popup-max-height, 24rem), var(--available-height, 100dvh));
+    overscroll-behavior: contain;
+    padding-block: var(--context-menu-popup-padding-y, .25rem);
+    border: var(--border-width-sm) solid var(--context-menu-popup-border-color, var(--color-border));
+    border-radius: var(--context-menu-popup-radius, var(--radius-md));
+    background-color: var(--context-menu-popup-bg, var(--color-popover));
+    color: var(--context-menu-popup-color, var(--color-popover-foreground));
+    box-shadow: var(--context-menu-popup-shadow, var(--shadow-lg));
+    transform-origin: var(--transform-origin);
+    transition: transform var(--context-menu-transition, var(--transition-default)),
+      opacity var(--context-menu-transition, var(--transition-default));
+    outline: 0;
+    overflow-y: auto;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      transform: scale(var(--context-menu-popup-scale, var(--scale-popup)));
+    }
+  }
+
+  ._di0eq_arrow {
+    color: var(--context-menu-popup-bg, var(--color-popover));
+    display: flex;
+
+    &[data-side="top"] {
+      bottom: calc(var(--context-menu-arrow-size, .5rem) * -1);
+      rotate: 180deg;
+    }
+
+    &[data-side="bottom"] {
+      top: calc(var(--context-menu-arrow-size, .5rem) * -1);
+      rotate: 0deg;
+    }
+
+    &[data-side="left"] {
+      right: calc(var(--context-menu-arrow-inline-offset, .8125rem) * -1);
+      rotate: 90deg;
+    }
+
+    &[data-side="right"] {
+      left: calc(var(--context-menu-arrow-inline-offset, .8125rem) * -1);
+      rotate: -90deg;
+    }
+  }
+
+  ._di0eq_arrowFill {
+    fill: currentColor;
+  }
+
+  ._di0eq_arrowOuterStroke {
+    fill: var(--context-menu-arrow-stroke-color, var(--context-menu-popup-border-color, var(--color-border)));
+  }
+
+  ._di0eq_arrowInnerStroke {
+    fill: var(--context-menu-popup-bg, var(--color-popover));
+  }
+
+  ._di0eq_item, ._di0eq_linkItem, ._di0eq_submenuTrigger, ._di0eq_radioItem, ._di0eq_checkboxItem {
+    box-sizing: border-box;
+    min-height: var(--context-menu-item-height, var(--popup-item-min-height, 2rem));
+    background: var(--context-menu-item-bg, transparent);
+    color: inherit;
+    font: inherit;
+    font-size: var(--context-menu-item-font-size, var(--popup-item-font-size, var(--text-sm)));
+    line-height: var(--context-menu-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
+    user-select: none;
+    cursor: default;
+    border: 0;
+    outline: 0;
+    margin: 0;
+    text-decoration: none;
+    position: relative;
+
+    &[data-highlighted] {
+      z-index: 0;
+      color: var(--context-menu-highlight-color, var(--color-background));
+    }
+
+    &[data-popup-open] {
+      z-index: 0;
+    }
+
+    &[data-highlighted]:before, &[data-popup-open]:before {
+      content: "";
+      z-index: -1;
+      inset-block: 0;
+      inset-inline: var(--context-menu-highlight-inset-x, var(--popup-highlight-inset-x, var(--spacing-1)));
+      border-radius: var(--context-menu-highlight-radius, var(--popup-highlight-radius, var(--radius-sm)));
+      position: absolute;
+    }
+
+    &[data-highlighted]:before {
+      background-color: var(--context-menu-highlight-bg, var(--color-foreground));
+    }
+
+    &[data-popup-open]:before {
+      background-color: var(--context-menu-submenu-open-bg, var(--color-accent));
+    }
+
+    &[data-highlighted][data-popup-open]:before {
+      background-color: var(--context-menu-highlight-bg, var(--color-foreground));
+    }
+
+    &[data-disabled] {
+      color: var(--context-menu-item-disabled-color, var(--color-muted-foreground));
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      cursor: default;
+    }
+  }
+
+  ._di0eq_item, ._di0eq_linkItem {
+    align-items: center;
+    gap: var(--context-menu-item-gap, var(--spacing-2));
+    padding-block: var(--context-menu-item-padding-y, var(--popup-item-padding-y, .5rem));
+    padding-inline: var(--context-menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem))
+      var(--context-menu-item-padding-x-end, var(--popup-item-padding-x-end, 1rem));
+    display: flex;
+  }
+
+  ._di0eq_submenuTrigger {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--context-menu-submenu-trigger-gap, var(--spacing-3));
+    padding-block: var(--context-menu-item-padding-y, var(--popup-item-padding-y, .5rem));
+    padding-inline: var(--context-menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem))
+      var(--context-menu-submenu-trigger-padding-x-end, 1rem);
+    display: flex;
+  }
+
+  ._di0eq_submenuTriggerIcon {
+    box-sizing: border-box;
+    width: var(--context-menu-submenu-icon-size, .875rem);
+    height: var(--context-menu-submenu-icon-size, .875rem);
+    color: currentColor;
+    flex-shrink: 0;
+    display: inline-flex;
+  }
+
+  ._di0eq_group {
+    padding-block: var(--context-menu-group-padding-y, 0);
+    display: grid;
+  }
+
+  ._di0eq_groupLabel {
+    padding-block: var(--context-menu-group-label-padding-y, var(--popup-group-label-padding-y, .35rem));
+    padding-inline: var(--context-menu-group-label-padding-x-start, var(--popup-group-label-padding-x-start, .625rem))
+      var(--context-menu-group-label-padding-x-end, var(--popup-group-label-padding-x-end, .75rem));
+    color: var(--context-menu-group-label-color, var(--color-muted-foreground));
+    font-size: var(--context-menu-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    line-height: var(--context-menu-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
+    user-select: none;
+    cursor: default;
+    margin: 0;
+  }
+
+  ._di0eq_radioGroup {
+    display: grid;
+  }
+
+  ._di0eq_radioItem, ._di0eq_checkboxItem {
+    align-items: center;
+    gap: var(--context-menu-check-gap, var(--popup-check-gap, .5rem));
+    grid-template-columns: var(--context-menu-check-indicator-size, var(--popup-check-indicator-size, .75rem))
+      minmax(0, 1fr);
+    padding-block: var(--context-menu-item-padding-y, var(--popup-item-padding-y, .5rem));
+    padding-inline: var(--context-menu-check-padding-x-start, var(--popup-check-padding-x-start, .625rem))
+      var(--context-menu-item-padding-x-end, var(--popup-item-padding-x-end, 1rem));
+    display: grid;
+
+    &[data-indicator-position="end"] {
+      grid-template-columns: minmax(0, 1fr)
+        var(--context-menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+
+      & > ._di0eq_radioItemIndicator, & > ._di0eq_checkboxItemIndicator {
+        grid-column-start: 2;
+        justify-self: end;
+      }
+
+      & > ._di0eq_itemText {
+        grid-column-start: 1;
+      }
+    }
+  }
+
+  ._di0eq_radioItemIndicator, ._di0eq_checkboxItemIndicator {
+    box-sizing: border-box;
+    width: var(--context-menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+    height: var(--context-menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+    padding: var(--context-menu-check-indicator-padding, 0);
+    border: var(--context-menu-check-indicator-border-width, var(--border-width-sm)) solid
+      var(--context-menu-check-indicator-border-color, transparent);
+    border-radius: var(--context-menu-check-indicator-radius, var(--radius-xs));
+    background-color: var(--context-menu-check-indicator-bg, transparent);
+    color: var(--context-menu-check-indicator-color, currentColor);
+    flex-shrink: 0;
+    grid-column: 1;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  ._di0eq_itemIndicatorIcon {
+    width: var(--context-menu-check-icon-size, 100%);
+    height: var(--context-menu-check-icon-size, 100%);
+  }
+
+  ._di0eq_itemText {
+    grid-column: 2;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  ._di0eq_itemTextContent {
+    align-items: center;
+    gap: var(--context-menu-item-text-content-gap, var(--spacing-2));
+    vertical-align: top;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  ._di0eq_itemTextIcon {
+    width: var(--context-menu-item-text-icon-size, 1rem);
+    height: var(--context-menu-item-text-icon-size, 1rem);
+    color: var(--context-menu-item-text-icon-color, currentColor);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  ._di0eq_itemTextLabel {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  ._di0eq_itemShortcut {
+    color: var(--context-menu-item-shortcut-color, var(--color-muted-foreground));
+    font-size: var(--context-menu-item-shortcut-font-size, var(--text-xs));
+    line-height: var(--context-menu-item-shortcut-line-height, var(--line-height-text-xs));
+    white-space: nowrap;
+    margin-inline-start: auto;
+    padding-inline-start: var(--context-menu-item-shortcut-padding-x-start, var(--spacing-4));
+  }
+
+  ._di0eq_separator {
+    box-sizing: border-box;
+    height: var(--border-width-sm);
+    margin-block: var(--context-menu-separator-margin-y, var(--popup-separator-margin-y, .375rem));
+    margin-inline: var(--context-menu-separator-margin-x-start, var(--popup-separator-margin-x-start, 1rem))
+      var(--context-menu-separator-margin-x-end, var(--popup-separator-margin-x-end, 1rem));
+    background-color: var(--context-menu-separator-color, var(--color-border));
+  }
+}