@feugene/granularity 0.13.0 → 0.16.0

package/dist/components/GrKbd/chunks/GrKbd-DRFPvW3G.js

@@ -0,0 +1,192 @@
+import { o as useGrComponentSize } from "../../../chunks/context-BSYR7RZs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { i as shiftSatisfied, n as isComposingEvent, t as eventMatchesKey } from "../../../chunks/keyboard-zYvvyHd4.js";
+import { i as grKbdKeyClass, r as grKbdComboClass, s as separatorClass } from "../../../chunks/grKbdStyles-DAoxiytu.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref } from "vue";
+//#region src/components/shared/hotkey.ts
+/**
+* Разбор, матчинг и человекочитаемое представление сочетаний клавиш.
+*
+* Общий модуль, а не часть `GrCommandPalette`: то же нужно `GrKbd`, а импорт из
+* чужой компонентной директории на сборке дал бы ребро `GrKbd →
+* GrCommandPalette` (хелпер уехал бы в чанк палитры) — `granular doctor` считает
+* такое незадекларированной зависимостью.
+*
+* Директива `v-hotkey` для палитры не годится: ей нужен смонтированный элемент,
+* а палитра в закрытом состоянии не рендерит ничего. Поэтому здесь — свой
+* матчер на `window`, с тем же синтаксисом комбинаций плюс токен `mod`.
+*/
+function parseCommandHotkey(combo) {
+	const parts = combo.split("+").map((p) => p.trim()).filter(Boolean);
+	const keyToken = parts.at(-1);
+	if (!keyToken) return null;
+	const parsed = {
+		key: keyToken.length === 1 ? keyToken.toLowerCase() : keyToken,
+		ctrl: false,
+		meta: false,
+		alt: false,
+		shift: false,
+		mod: false
+	};
+	for (const part of parts.slice(0, -1)) {
+		const token = part.toLowerCase();
+		if (token === "mod") parsed.mod = true;
+		else if (token === "ctrl" || token === "control") parsed.ctrl = true;
+		else if (token === "meta" || token === "cmd" || token === "command" || token === "⌘") parsed.meta = true;
+		else if (token === "alt" || token === "option") parsed.alt = true;
+		else if (token === "shift") parsed.shift = true;
+	}
+	return parsed;
+}
+/** macOS определяем по платформе — от неё зависит, чем является `mod`. */
+function isAppleDevice() {
+	if (typeof navigator === "undefined") return false;
+	return /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
+}
+function matchesCommandHotkey(event, hotkey, apple = isAppleDevice()) {
+	if (isComposingEvent(event)) return false;
+	const expectMeta = hotkey.meta || hotkey.mod && apple;
+	const expectCtrl = hotkey.ctrl || hotkey.mod && !apple;
+	if (event.metaKey !== expectMeta) return false;
+	if (event.ctrlKey !== expectCtrl) return false;
+	if (event.altKey !== hotkey.alt) return false;
+	if (!shiftSatisfied(event, hotkey.key, hotkey.shift)) return false;
+	return eventMatchesKey(event, hotkey.key, { codeFallback: expectMeta || expectCtrl || hotkey.alt });
+}
+/** Человекочитаемые клавиши для подсказки в поле ввода (`⌘` / `Ctrl`). */
+function formatCommandHotkey(hotkey, apple = isAppleDevice()) {
+	const keys = [];
+	if (hotkey.meta || hotkey.mod && apple) keys.push("⌘");
+	if (hotkey.ctrl || hotkey.mod && !apple) keys.push("Ctrl");
+	if (hotkey.alt) keys.push(apple ? "⌥" : "Alt");
+	if (hotkey.shift) keys.push(apple ? "⇧" : "Shift");
+	keys.push(hotkey.key.length === 1 ? hotkey.key.toUpperCase() : hotkey.key);
+	return keys;
+}
+/**
+* Токен → то, что видит пользователь. `mod` зависит от платформы: на macOS это
+* Cmd, на остальных — Ctrl. Символы отдаются вместе с ключом читаемого имени:
+* `⌘` без имени диктор произносит как «знак места интереса».
+*/
+function formatHotkeyToken(token, apple) {
+	const t = token.trim();
+	const lower = t.toLowerCase();
+	if (lower === "mod") return apple ? {
+		label: "⌘",
+		name: "command"
+	} : { label: "Ctrl" };
+	if (lower === "meta" || lower === "cmd" || lower === "command" || t === "⌘") return apple ? {
+		label: "⌘",
+		name: "command"
+	} : { label: "Meta" };
+	if (lower === "ctrl" || lower === "control" || t === "⌃") return apple ? {
+		label: "⌃",
+		name: "control"
+	} : { label: "Ctrl" };
+	if (lower === "alt" || lower === "option" || t === "⌥") return apple ? {
+		label: "⌥",
+		name: "option"
+	} : { label: "Alt" };
+	if (lower === "shift" || t === "⇧") return apple ? {
+		label: "⇧",
+		name: "shift"
+	} : { label: "Shift" };
+	if (lower === "enter" || lower === "return" || t === "↵" || t === "↩") return apple ? {
+		label: "↩",
+		name: "enter"
+	} : { label: "Enter" };
+	if (lower === "esc" || lower === "escape") return {
+		label: "Esc",
+		name: "escape"
+	};
+	if (lower === "space") return { label: "Space" };
+	return { label: t.length === 1 ? t.toUpperCase() : t };
+}
+function formatHotkeyTokens(tokens, apple) {
+	return tokens.map((token) => formatHotkeyToken(token, apple));
+}
+/** Комбинация строкой (`mod+shift+K`) — в набор токенов в порядке показа. */
+function splitHotkeyCombo(combo) {
+	return combo.split("+").map((part) => part.trim()).filter(Boolean);
+}
+//#endregion
+//#region src/components/GrKbd/GrKbd.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-hidden"];
+var _hoisted_2 = {
+	key: 0,
+	class: "sr-only"
+};
+//#endregion
+//#region src/components/GrKbd/GrKbd.vue
+var GrKbd_default = /* @__PURE__ */ defineComponent({
+	__name: "GrKbd",
+	props: {
+		size: { default: void 0 },
+		keys: { default: void 0 },
+		separator: { default: "+" },
+		platform: { default: "auto" }
+	},
+	setup(__props) {
+		const props = __props;
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrKbd" });
+		const { t } = useGranularityTranslations();
+		/**
+		* Платформа уточняется только после монтирования: `navigator` в теле `setup`
+		* либо роняет серверный рендер, либо расходится с ним и ломает гидрацию.
+		* До этого момента показываем не-Apple вариант — он же приходит с сервера.
+		*/
+		const detectedApple = ref(false);
+		onMounted(() => {
+			detectedApple.value = isAppleDevice();
+		});
+		const isApple = computed(() => {
+			if (props.platform === "apple") return true;
+			if (props.platform === "other") return false;
+			return detectedApple.value;
+		});
+		const tokens = computed(() => {
+			if (props.keys === void 0) return [];
+			return Array.isArray(props.keys) ? props.keys : splitHotkeyCombo(props.keys);
+		});
+		const keyViews = computed(() => formatHotkeyTokens(tokens.value, isApple.value));
+		const hasCombo = computed(() => keyViews.value.length > 0);
+		const keyClass = computed(() => grKbdKeyClass(resolvedSize.value));
+		const comboClass = computed(() => grKbdComboClass(resolvedSize.value));
+		const NAME_FALLBACKS = {
+			command: "Command",
+			option: "Option",
+			shift: "Shift",
+			control: "Control",
+			enter: "Enter",
+			escape: "Escape"
+		};
+		/** Читаемое имя символьной клавиши: `⌘` без него диктор произносит как знак. */
+		function readableName(name) {
+			return t(`gr.kbd.${name}`, NAME_FALLBACKS[name] ?? name);
+		}
+		return (_ctx, _cache) => {
+			return hasCombo.value ? (openBlock(), createElementBlock("kbd", {
+				key: 0,
+				"data-gr-kbd": "",
+				"data-gr-kbd-combo": "",
+				class: normalizeClass(comboClass.value)
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(keyViews.value, (key, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: `${key.label}-${index}` }, [index > 0 && __props.separator ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(unref(separatorClass)),
+					"aria-hidden": "true"
+				}, toDisplayString(__props.separator), 3)) : createCommentVNode("", true), createElementVNode("kbd", {
+					"data-gr-kbd-key": "",
+					class: normalizeClass(keyClass.value)
+				}, [createElementVNode("span", { "aria-hidden": key.name ? "true" : void 0 }, toDisplayString(key.label), 9, _hoisted_1), key.name ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(readableName(key.name)), 1)) : createCommentVNode("", true)], 2)], 64);
+			}), 128))], 2)) : (openBlock(), createElementBlock("kbd", {
+				key: 1,
+				"data-gr-kbd": "",
+				"data-gr-kbd-key": "",
+				class: normalizeClass(keyClass.value)
+			}, [renderSlot(_ctx.$slots, "default")], 2));
+		};
+	}
+});
+//#endregion
+export { parseCommandHotkey as a, matchesCommandHotkey as i, formatCommandHotkey as n, isAppleDevice as r, GrKbd_default as t };

package/dist/components/GrKbd/chunks/GrKbd-DRFPvW3G.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrKbd-DRFPvW3G.js","names":[],"sources":["../../../../src/components/shared/hotkey.ts","../../../../src/components/GrKbd/GrKbd.vue","../../../../src/components/GrKbd/GrKbd.vue"],"sourcesContent":["/**\n * Разбор, матчинг и человекочитаемое представление сочетаний клавиш.\n *\n * Общий модуль, а не часть `GrCommandPalette`: то же нужно `GrKbd`, а импорт из\n * чужой компонентной директории на сборке дал бы ребро `GrKbd →\n * GrCommandPalette` (хелпер уехал бы в чанк палитры) — `granular doctor` считает\n * такое незадекларированной зависимостью.\n *\n * Директива `v-hotkey` для палитры не годится: ей нужен смонтированный элемент,\n * а палитра в закрытом состоянии не рендерит ничего. Поэтому здесь — свой\n * матчер на `window`, с тем же синтаксисом комбинаций плюс токен `mod`.\n */\n\nimport { eventMatchesKey, isComposingEvent, shiftSatisfied } from '../../internal/keyboard'\n\nexport type ParsedCommandHotkey = {\n  key: string\n  ctrl: boolean\n  meta: boolean\n  alt: boolean\n  shift: boolean\n  /** `mod` — Cmd на macOS, Ctrl на остальных платформах. */\n  mod: boolean\n}\n\nexport function parseCommandHotkey(combo: string): ParsedCommandHotkey | null {\n  const parts = combo.split('+').map(p => p.trim()).filter(Boolean)\n  const keyToken = parts.at(-1)\n  if (!keyToken) return null\n\n  const parsed: ParsedCommandHotkey = {\n    key: keyToken.length === 1 ? keyToken.toLowerCase() : keyToken,\n    ctrl: false,\n    meta: false,\n    alt: false,\n    shift: false,\n    mod: false,\n  }\n\n  for (const part of parts.slice(0, -1)) {\n    const token = part.toLowerCase()\n    if (token === 'mod') parsed.mod = true\n    else if (token === 'ctrl' || token === 'control') parsed.ctrl = true\n    else if (token === 'meta' || token === 'cmd' || token === 'command' || token === '⌘') parsed.meta = true\n    else if (token === 'alt' || token === 'option') parsed.alt = true\n    else if (token === 'shift') parsed.shift = true\n  }\n\n  return parsed\n}\n\n/** macOS определяем по платформе — от неё зависит, чем является `mod`. */\nexport function isAppleDevice(): boolean {\n  if (typeof navigator === 'undefined') return false\n  return /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent)\n}\n\nexport function matchesCommandHotkey(\n  event: KeyboardEvent,\n  hotkey: ParsedCommandHotkey,\n  apple = isAppleDevice(),\n): boolean {\n  // Клавиша во время IME-композиции принадлежит композиции, а не сочетанию.\n  if (isComposingEvent(event)) return false\n\n  const expectMeta = hotkey.meta || (hotkey.mod && apple)\n  const expectCtrl = hotkey.ctrl || (hotkey.mod && !apple)\n\n  if (event.metaKey !== expectMeta) return false\n  if (event.ctrlKey !== expectCtrl) return false\n  if (event.altKey !== hotkey.alt) return false\n  if (!shiftSatisfied(event, hotkey.key, hotkey.shift)) return false\n\n  // Комбинация с модификаторами матчится и по физическому коду: на нелатинской\n  // раскладке `mod+K` приходит как `key: 'л'`, и без кода сочетание мертво.\n  return eventMatchesKey(event, hotkey.key, {\n    codeFallback: expectMeta || expectCtrl || hotkey.alt,\n  })\n}\n\n/** Человекочитаемые клавиши для подсказки в поле ввода (`⌘` / `Ctrl`). */\nexport function formatCommandHotkey(hotkey: ParsedCommandHotkey, apple = isAppleDevice()): string[] {\n  const keys: string[] = []\n  if (hotkey.meta || (hotkey.mod && apple)) keys.push('⌘')\n  if (hotkey.ctrl || (hotkey.mod && !apple)) keys.push('Ctrl')\n  if (hotkey.alt) keys.push(apple ? '⌥' : 'Alt')\n  if (hotkey.shift) keys.push(apple ? '⇧' : 'Shift')\n  keys.push(hotkey.key.length === 1 ? hotkey.key.toUpperCase() : hotkey.key)\n  return keys\n}\n\n/** Одна клавиша в человекочитаемом виде. */\nexport interface HotkeyKeyView {\n  /** Что видно на экране: символ (`⌘`) или слово (`Ctrl`). */\n  label: string\n  /**\n   * Ключ читаемого имени (`gr.kbd.<name>`) для символьных клавиш. У `K` или\n   * `Ctrl` его нет — они и так читаются вслух.\n   */\n  name?: 'command' | 'option' | 'shift' | 'control' | 'enter' | 'escape'\n}\n\n/**\n * Токен → то, что видит пользователь. `mod` зависит от платформы: на macOS это\n * Cmd, на остальных — Ctrl. Символы отдаются вместе с ключом читаемого имени:\n * `⌘` без имени диктор произносит как «знак места интереса».\n */\nexport function formatHotkeyToken(token: string, apple: boolean): HotkeyKeyView {\n  const t = token.trim()\n  const lower = t.toLowerCase()\n\n  // Читаемое имя добавляется только к символу: у слова `Ctrl` оно дало бы\n  // диктору «Ctrl Control».\n  if (lower === 'mod')\n    return apple ? { label: '⌘', name: 'command' } : { label: 'Ctrl' }\n\n  if (lower === 'meta' || lower === 'cmd' || lower === 'command' || t === '⌘')\n    return apple ? { label: '⌘', name: 'command' } : { label: 'Meta' }\n\n  if (lower === 'ctrl' || lower === 'control' || t === '⌃')\n    return apple ? { label: '⌃', name: 'control' } : { label: 'Ctrl' }\n\n  if (lower === 'alt' || lower === 'option' || t === '⌥')\n    return apple ? { label: '⌥', name: 'option' } : { label: 'Alt' }\n\n  if (lower === 'shift' || t === '⇧')\n    return apple ? { label: '⇧', name: 'shift' } : { label: 'Shift' }\n\n  if (lower === 'enter' || lower === 'return' || t === '↵' || t === '↩')\n    return apple ? { label: '↩', name: 'enter' } : { label: 'Enter' }\n\n  if (lower === 'esc' || lower === 'escape')\n    return { label: 'Esc', name: 'escape' }\n\n  if (lower === 'space')\n    return { label: 'Space' }\n\n  // Одиночный символ — заглавным: `k` и `K` на клавише выглядят одинаково.\n  return { label: t.length === 1 ? t.toUpperCase() : t }\n}\n\nexport function formatHotkeyTokens(tokens: readonly string[], apple: boolean): HotkeyKeyView[] {\n  return tokens.map(token => formatHotkeyToken(token, apple))\n}\n\n/** Комбинация строкой (`mod+shift+K`) — в набор токенов в порядке показа. */\nexport function splitHotkeyCombo(combo: string): string[] {\n  return combo.split('+').map(part => part.trim()).filter(Boolean)\n}\n","<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport type { GrComponentSize } from '../shared/sizes'\nimport { formatHotkeyTokens, isAppleDevice, splitHotkeyCombo } from '../shared/hotkey'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport { grKbdComboClass, grKbdKeyClass, separatorClass } from './grKbdStyles'\n\nexport interface GrKbdProps {\n  size?: GrKbdSize\n  /**\n   * Сочетание: строкой (`\"mod+shift+K\"`) или набором токенов\n   * (`['mod', 'K']`). Токен `mod` — Cmd на macOS, Ctrl на остальных.\n   */\n  keys?: string | string[]\n  /** Разделитель между клавишами сочетания. Пустая строка — только зазор. */\n  separator?: string\n  platform?: GrKbdPlatform\n}\n\n/**\n * GrKbd — GR-примитив для отображения клавиш и сочетаний (`<kbd>`).\n *\n * Одна клавиша — слотом: `<GrKbd>Esc</GrKbd>`.\n * Сочетание — пропом: `<GrKbd keys=\"mod+K\" />` (на macOS `⌘ K`, иначе `Ctrl K`).\n */\nexport type GrKbdSize = GrComponentSize\n\n/** Откуда брать платформу для токена `mod`. */\nexport type GrKbdPlatform = 'auto' | 'apple' | 'other'\n\nconst props = withDefaults(\n  defineProps<GrKbdProps>(),\n  {\n    size: undefined,\n    keys: undefined,\n    separator: '+',\n    platform: 'auto',\n  },\n)\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrKbd' })\nconst { t } = useGranularityTranslations()\n\n/**\n * Платформа уточняется только после монтирования: `navigator` в теле `setup`\n * либо роняет серверный рендер, либо расходится с ним и ломает гидрацию.\n * До этого момента показываем не-Apple вариант — он же приходит с сервера.\n */\nconst detectedApple = ref(false)\n\nonMounted(() => {\n  detectedApple.value = isAppleDevice()\n})\n\nconst isApple = computed(() => {\n  if (props.platform === 'apple') return true\n  if (props.platform === 'other') return false\n  return detectedApple.value\n})\n\nconst tokens = computed(() => {\n  if (props.keys === undefined) return []\n  return Array.isArray(props.keys) ? props.keys : splitHotkeyCombo(props.keys)\n})\n\n// Сочетание рисуется вложенными `<kbd>` — приём из спецификации HTML, а не\n// обёртка-div: сочетание остаётся клавиатурным вводом целиком.\nconst keyViews = computed(() => formatHotkeyTokens(tokens.value, isApple.value))\nconst hasCombo = computed(() => keyViews.value.length > 0)\n\nconst keyClass = computed(() => grKbdKeyClass(resolvedSize.value))\nconst comboClass = computed(() => grKbdComboClass(resolvedSize.value))\n\nconst NAME_FALLBACKS: Record<string, string> = {\n  command: 'Command',\n  option: 'Option',\n  shift: 'Shift',\n  control: 'Control',\n  enter: 'Enter',\n  escape: 'Escape',\n}\n\n/** Читаемое имя символьной клавиши: `⌘` без него диктор произносит как знак. */\nfunction readableName(name: string): string {\n  return t(`gr.kbd.${name}`, NAME_FALLBACKS[name] ?? name)\n}\n</script>\n\n<template>\n  <kbd\n    v-if=\"hasCombo\"\n    data-gr-kbd\n    data-gr-kbd-combo\n    :class=\"comboClass\"\n  ><template\n    v-for=\"(key, index) in keyViews\"\n    :key=\"`${key.label}-${index}`\"\n  ><span\n    v-if=\"index > 0 && separator\"\n    :class=\"separatorClass\"\n    aria-hidden=\"true\"\n  >{{ separator }}</span><kbd\n    data-gr-kbd-key\n    :class=\"keyClass\"\n  ><span :aria-hidden=\"key.name ? 'true' : undefined\">{{ key.label }}</span><span\n    v-if=\"key.name\"\n    class=\"sr-only\"\n  >{{ readableName(key.name) }}</span></kbd></template></kbd>\n\n  <kbd\n    v-else\n    data-gr-kbd\n    data-gr-kbd-key\n    :class=\"keyClass\"\n  ><slot /></kbd>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport type { GrComponentSize } from '../shared/sizes'\nimport { formatHotkeyTokens, isAppleDevice, splitHotkeyCombo } from '../shared/hotkey'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport { grKbdComboClass, grKbdKeyClass, separatorClass } from './grKbdStyles'\n\nexport interface GrKbdProps {\n  size?: GrKbdSize\n  /**\n   * Сочетание: строкой (`\"mod+shift+K\"`) или набором токенов\n   * (`['mod', 'K']`). Токен `mod` — Cmd на macOS, Ctrl на остальных.\n   */\n  keys?: string | string[]\n  /** Разделитель между клавишами сочетания. Пустая строка — только зазор. */\n  separator?: string\n  platform?: GrKbdPlatform\n}\n\n/**\n * GrKbd — GR-примитив для отображения клавиш и сочетаний (`<kbd>`).\n *\n * Одна клавиша — слотом: `<GrKbd>Esc</GrKbd>`.\n * Сочетание — пропом: `<GrKbd keys=\"mod+K\" />` (на macOS `⌘ K`, иначе `Ctrl K`).\n */\nexport type GrKbdSize = GrComponentSize\n\n/** Откуда брать платформу для токена `mod`. */\nexport type GrKbdPlatform = 'auto' | 'apple' | 'other'\n\nconst props = withDefaults(\n  defineProps<GrKbdProps>(),\n  {\n    size: undefined,\n    keys: undefined,\n    separator: '+',\n    platform: 'auto',\n  },\n)\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrKbd' })\nconst { t } = useGranularityTranslations()\n\n/**\n * Платформа уточняется только после монтирования: `navigator` в теле `setup`\n * либо роняет серверный рендер, либо расходится с ним и ломает гидрацию.\n * До этого момента показываем не-Apple вариант — он же приходит с сервера.\n */\nconst detectedApple = ref(false)\n\nonMounted(() => {\n  detectedApple.value = isAppleDevice()\n})\n\nconst isApple = computed(() => {\n  if (props.platform === 'apple') return true\n  if (props.platform === 'other') return false\n  return detectedApple.value\n})\n\nconst tokens = computed(() => {\n  if (props.keys === undefined) return []\n  return Array.isArray(props.keys) ? props.keys : splitHotkeyCombo(props.keys)\n})\n\n// Сочетание рисуется вложенными `<kbd>` — приём из спецификации HTML, а не\n// обёртка-div: сочетание остаётся клавиатурным вводом целиком.\nconst keyViews = computed(() => formatHotkeyTokens(tokens.value, isApple.value))\nconst hasCombo = computed(() => keyViews.value.length > 0)\n\nconst keyClass = computed(() => grKbdKeyClass(resolvedSize.value))\nconst comboClass = computed(() => grKbdComboClass(resolvedSize.value))\n\nconst NAME_FALLBACKS: Record<string, string> = {\n  command: 'Command',\n  option: 'Option',\n  shift: 'Shift',\n  control: 'Control',\n  enter: 'Enter',\n  escape: 'Escape',\n}\n\n/** Читаемое имя символьной клавиши: `⌘` без него диктор произносит как знак. */\nfunction readableName(name: string): string {\n  return t(`gr.kbd.${name}`, NAME_FALLBACKS[name] ?? name)\n}\n</script>\n\n<template>\n  <kbd\n    v-if=\"hasCombo\"\n    data-gr-kbd\n    data-gr-kbd-combo\n    :class=\"comboClass\"\n  ><template\n    v-for=\"(key, index) in keyViews\"\n    :key=\"`${key.label}-${index}`\"\n  ><span\n    v-if=\"index > 0 && separator\"\n    :class=\"separatorClass\"\n    aria-hidden=\"true\"\n  >{{ separator }}</span><kbd\n    data-gr-kbd-key\n    :class=\"keyClass\"\n  ><span :aria-hidden=\"key.name ? 'true' : undefined\">{{ key.label }}</span><span\n    v-if=\"key.name\"\n    class=\"sr-only\"\n  >{{ readableName(key.name) }}</span></kbd></template></kbd>\n\n  <kbd\n    v-else\n    data-gr-kbd\n    data-gr-kbd-key\n    :class=\"keyClass\"\n  ><slot /></kbd>\n</template>\n"],"mappings":"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"}

package/dist/components/GrKbd/index.js

@@ -1,3 +1,3 @@
-import { t as GrKbd_default } from "./chunks/GrKbd-DTspwtoN.js";
-import { t as grKbdConfig } from "../../chunks/config-Dlm49Jp5.js";
-export { GrKbd_default as GrKbd, GrKbd_default as default, grKbdConfig };
+import { t as GrKbd_default } from "./chunks/GrKbd-DRFPvW3G.js";
+import { n as grKbdSafelist, t as grKbdConfig } from "../../chunks/config-B-g6lT19.js";
+export { GrKbd_default as GrKbd, GrKbd_default as default, grKbdConfig, grKbdSafelist };

package/dist/components/GrLink/chunks/GrLink-D-cgUMXW.js

@@ -0,0 +1,163 @@
+import { o as useGrComponentSize } from "../../../chunks/context-BSYR7RZs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-BvA2ZGXP.js";
+import { a as grLinkClass, i as focusRingClass, o as grLinkColorStyle, t as baseRootClass } from "../../../chunks/grLinkStyles-BoL8QYcV.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, mergeProps, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, withCtx } from "vue";
+//#region ~icons/lucide/external-link
+var _hoisted_1$1 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+	}, null, -1)])]);
+}
+var external_link_default = markRaw({
+	name: "lucide-external-link",
+	render: render$1
+});
+//#endregion
+//#region src/components/GrLink/GrLink.vue?vue&type=script&setup=true&lang.ts
+/**
+* GrLink — GR-примитив ссылки.
+*
+* Корневой тег зависит от пропов:
+* - кастомный компонент/тег из пропа `as` — когда `as` передан и не `disabled`
+*   (например, `Link` от `@inertiajs/vue3` или `RouterLink` от Vue Router);
+* - `<a>` — когда задан `href` и не `disabled`;
+* - `<span>` — во всех остальных случаях (включая `disabled`, даже если задан
+*   `href`/`as`).
+*
+* Это осознанное решение, чтобы отключённая ссылка не была кликабельной и
+* не участвовала в порядке табуляции. Учтите это в внешних CSS-селекторах.
+*
+* Проп `as` нужен для интеграции с роутерами (Inertia, Vue Router и пр.):
+* стили/поведение GR остаются едиными, а тег корня подменяется. Все
+* специфичные для роутера атрибуты (`method`, `replace`, `preserve-scroll` и т.п.)
+* проходят через fallthrough-attrs.
+*/
+var _hoisted_1 = {
+	key: 1,
+	class: "sr-only"
+};
+//#endregion
+//#region src/components/GrLink/GrLink.vue
+var GrLink_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "GrLink",
+	props: {
+		as: { default: void 0 },
+		href: { default: void 0 },
+		external: {
+			type: Boolean,
+			default: false
+		},
+		target: { default: void 0 },
+		rel: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 },
+		tone: { default: "primary" },
+		variant: { default: "default" },
+		underline: { default: "auto" },
+		size: { default: void 0 },
+		externalIcon: {
+			type: Boolean,
+			default: void 0
+		},
+		newTabLabel: { default: void 0 }
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const isInteractive = computed(() => !props.disabled && (!!props.as || !!props.href));
+		const renderAs = computed(() => {
+			if (!isInteractive.value) return "span";
+			if (props.as) return typeof props.as === "string" ? props.as : markRaw(props.as);
+			return "a";
+		});
+		const resolvedTarget = computed(() => {
+			if (props.target) return props.target;
+			if (props.external) return "_blank";
+		});
+		const resolvedRel = computed(() => {
+			if (props.rel) return props.rel;
+			if (resolvedTarget.value === "_blank") return "noopener noreferrer";
+		});
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrLink" });
+		const { t } = useGranularityTranslations();
+		/**
+		* Смена контекста должна быть объявлена (WCAG 3.2.5). Условие — ссылка реально
+		* открывается в новой вкладке, а не наличие пропа `external`: `target="_blank"`
+		* снаружи даёт ровно тот же сюрприз (та же генерализация, что у `rel`).
+		*/
+		const opensInNewTab = computed(() => isInteractive.value && resolvedTarget.value === "_blank");
+		const newTabHint = computed(() => props.newTabLabel ?? t("gr.link.opensInNewTab", "opens in a new tab"));
+		const showExternalIcon = computed(() => props.externalIcon ?? opensInNewTab.value);
+		/**
+		* `aria-label` перекрывает содержимое целиком — вместе со скрытой подсказкой.
+		* Поэтому, если имя задано руками, подсказка дописывается к нему.
+		*/
+		const resolvedAriaLabel = computed(() => {
+			if (!props.ariaLabel) return void 0;
+			return opensInNewTab.value ? `${props.ariaLabel}, ${newTabHint.value}` : props.ariaLabel;
+		});
+		const iconSize = computed(() => resolvedSize.value === "lg" ? "sm" : "xs");
+		const rootClass = computed(() => {
+			const variantClass = grLinkClass({
+				size: resolvedSize.value,
+				underline: props.underline,
+				disabled: props.disabled
+			});
+			return props.disabled ? `${baseRootClass} ${variantClass}` : `${baseRootClass} ${focusRingClass} ${variantClass}`;
+		});
+		const colorStyle = computed(() => grLinkColorStyle({
+			tone: props.tone,
+			variant: props.variant,
+			disabled: props.disabled
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(renderAs.value), mergeProps(unref(attrs), {
+				href: isInteractive.value ? __props.href : void 0,
+				target: isInteractive.value ? resolvedTarget.value : void 0,
+				rel: isInteractive.value ? resolvedRel.value : void 0,
+				"aria-label": resolvedAriaLabel.value,
+				"aria-disabled": __props.disabled ? "true" : void 0,
+				class: rootClass.value,
+				style: colorStyle.value
+			}), {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "default"),
+					showExternalIcon.value ? (openBlock(), createBlock(GrIcon_default, {
+						key: 0,
+						size: iconSize.value
+					}, {
+						default: withCtx(() => [createVNode(unref(external_link_default))]),
+						_: 1
+					}, 8, ["size"])) : createCommentVNode("", true),
+					opensInNewTab.value && !__props.ariaLabel ? (openBlock(), createElementBlock("span", _hoisted_1, "(" + toDisplayString(newTabHint.value) + ")", 1)) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 16, [
+				"href",
+				"target",
+				"rel",
+				"aria-label",
+				"aria-disabled",
+				"class",
+				"style"
+			]);
+		};
+	}
+});
+//#endregion
+export { GrLink_default as t };

package/dist/components/GrLink/chunks/GrLink-D-cgUMXW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrLink-D-cgUMXW.js","names":[],"sources":["../../../../src/components/GrLink/GrLink.vue","../../../../src/components/GrLink/GrLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useGrComponentSize } from '../GrConfigProvider/context'\n/**\n * GrLink — GR-примитив ссылки.\n *\n * Корневой тег зависит от пропов:\n * - кастомный компонент/тег из пропа `as` — когда `as` передан и не `disabled`\n *   (например, `Link` от `@inertiajs/vue3` или `RouterLink` от Vue Router);\n * - `<a>` — когда задан `href` и не `disabled`;\n * - `<span>` — во всех остальных случаях (включая `disabled`, даже если задан\n *   `href`/`as`).\n *\n * Это осознанное решение, чтобы отключённая ссылка не была кликабельной и\n * не участвовала в порядке табуляции. Учтите это в внешних CSS-селекторах.\n *\n * Проп `as` нужен для интеграции с роутерами (Inertia, Vue Router и пр.):\n * стили/поведение GR остаются едиными, а тег корня подменяется. Все\n * специфичные для роутера атрибуты (`method`, `replace`, `preserve-scroll` и т.п.)\n * проходят через fallthrough-attrs.\n */\nimport { computed, markRaw, useAttrs, type Component } from 'vue'\n\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport IconExternal from '~icons/lucide/external-link'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  baseRootClass,\n  focusRingClass,\n  type GrLinkSize,\n  type GrLinkTone,\n  type GrLinkUnderline,\n  type GrLinkVariant,\n  grLinkClass,\n  grLinkColorStyle,\n} from './grLinkStyles'\n\nexport interface GrLinkProps {\n  /**\n  * Кастомный корневой тег/компонент. Если передан и компонент не `disabled` —\n  * рендерится через `<component :is=\"as\">`. Игнорируется при `disabled`.\n  */\n  as?: string | Component\n  href?: string\n  external?: boolean\n  target?: string\n  rel?: string\n  disabled?: boolean\n  ariaLabel?: string\n  /** Семантический цвет ссылки из палитры `GrTone`. */\n  tone?: GrLinkTone\n  /** Уровень акцента: `default` (окрашен) или `muted` (приглушён, акцент на hover). */\n  variant?: GrLinkVariant\n  underline?: GrLinkUnderline\n  size?: GrLinkSize\n  /**\n  * Иконка внешней ссылки. По умолчанию показывается у любой ссылки, которая\n  * открывается в новой вкладке, — не только при `external`.\n  */\n  externalIcon?: boolean\n  /** i18n: скрытая подсказка «откроется в новой вкладке». */\n  newTabLabel?: string\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<GrLinkProps>(), {\n  as: undefined,\n  href: undefined,\n  external: false,\n  target: undefined,\n  rel: undefined,\n  disabled: false,\n  ariaLabel: undefined,\n  tone: 'primary',\n  variant: 'default',\n  underline: 'auto',\n  size: undefined,\n  externalIcon: undefined,\n  newTabLabel: undefined,\n})\n\nconst attrs = useAttrs()\n\n// Кастомный корень имеет приоритет над `<a>` — GR не пытается угадывать\n// «правильный» тег за пользователя, если он явно его указал.\nconst isInteractive = computed(() => !props.disabled && (!!props.as || !!props.href))\n\nconst renderAs = computed<string | Component>(() => {\n  if (!isInteractive.value) return 'span'\n  if (props.as) {\n    // Если `as` — объект-компонент, помечаем его как нереактивный, чтобы избежать\n    // оверхеда от Vue-прокси и предупреждений в консоли. Строки (нативные теги)\n    // оставляем как есть.\n    return typeof props.as === 'string' ? props.as : markRaw(props.as)\n  }\n  return 'a'\n})\n\nconst resolvedTarget = computed(() => {\n  if (props.target)\n    return props.target\n\n  if (props.external)\n    return '_blank'\n\n  return undefined\n})\n\nconst resolvedRel = computed(() => {\n  if (props.rel)\n    return props.rel\n\n  // Авто-защита для любых ссылок, открывающихся в новой вкладке,\n  // а не только когда выставлен `external`.\n  if (resolvedTarget.value === '_blank')\n    return 'noopener noreferrer'\n\n  return undefined\n})\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrLink' })\n\nconst { t } = useGranularityTranslations()\n\n/**\n * Смена контекста должна быть объявлена (WCAG 3.2.5). Условие — ссылка реально\n * открывается в новой вкладке, а не наличие пропа `external`: `target=\"_blank\"`\n * снаружи даёт ровно тот же сюрприз (та же генерализация, что у `rel`).\n */\nconst opensInNewTab = computed(() => isInteractive.value && resolvedTarget.value === '_blank')\nconst newTabHint = computed(() => props.newTabLabel ?? t('gr.link.opensInNewTab', 'opens in a new tab'))\n\nconst showExternalIcon = computed(() => props.externalIcon ?? opensInNewTab.value)\n\n/**\n * `aria-label` перекрывает содержимое целиком — вместе со скрытой подсказкой.\n * Поэтому, если имя задано руками, подсказка дописывается к нему.\n */\nconst resolvedAriaLabel = computed(() => {\n  if (!props.ariaLabel)\n    return undefined\n\n  return opensInNewTab.value ? `${props.ariaLabel}, ${newTabHint.value}` : props.ariaLabel\n})\n\nconst iconSize = computed(() => (resolvedSize.value === 'lg' ? 'sm' : 'xs'))\n\nconst rootClass = computed(() => {\n  const variantClass = grLinkClass({\n    size: resolvedSize.value,\n    underline: props.underline,\n    disabled: props.disabled,\n  })\n\n  // На disabled-ветке (`<span>`) focus-ring не нужен: элемент не фокусируется,\n  // а если снаружи ему навесят `tabindex`, фокус-рамка на «отключённой» ссылке смотрелась бы странно.\n  return props.disabled\n    ? `${baseRootClass} ${variantClass}`\n    : `${baseRootClass} ${focusRingClass} ${variantClass}`\n})\n\n// Цвет (tone × variant) прокидываем через CSS-переменные, чтобы не плодить классы.\nconst colorStyle = computed(() => grLinkColorStyle({\n  tone: props.tone,\n  variant: props.variant,\n  disabled: props.disabled,\n}))\n</script>\n\n<template>\n  <component\n    :is=\"renderAs\"\n    v-bind=\"attrs\"\n    :href=\"isInteractive ? href : undefined\"\n    :target=\"isInteractive ? resolvedTarget : undefined\"\n    :rel=\"isInteractive ? resolvedRel : undefined\"\n    :aria-label=\"resolvedAriaLabel\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :class=\"rootClass\"\n    :style=\"colorStyle\"\n  >\n    <slot />\n\n    <GrIcon v-if=\"showExternalIcon\" :size=\"iconSize\">\n      <IconExternal />\n    </GrIcon>\n\n    <!-- Подсказка не дублируется, когда её уже вобрал `aria-label`. -->\n    <span v-if=\"opensInNewTab && !ariaLabel\" class=\"sr-only\">({{ newTabHint }})</span>\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { useGrComponentSize } from '../GrConfigProvider/context'\n/**\n * GrLink — GR-примитив ссылки.\n *\n * Корневой тег зависит от пропов:\n * - кастомный компонент/тег из пропа `as` — когда `as` передан и не `disabled`\n *   (например, `Link` от `@inertiajs/vue3` или `RouterLink` от Vue Router);\n * - `<a>` — когда задан `href` и не `disabled`;\n * - `<span>` — во всех остальных случаях (включая `disabled`, даже если задан\n *   `href`/`as`).\n *\n * Это осознанное решение, чтобы отключённая ссылка не была кликабельной и\n * не участвовала в порядке табуляции. Учтите это в внешних CSS-селекторах.\n *\n * Проп `as` нужен для интеграции с роутерами (Inertia, Vue Router и пр.):\n * стили/поведение GR остаются едиными, а тег корня подменяется. Все\n * специфичные для роутера атрибуты (`method`, `replace`, `preserve-scroll` и т.п.)\n * проходят через fallthrough-attrs.\n */\nimport { computed, markRaw, useAttrs, type Component } from 'vue'\n\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport IconExternal from '~icons/lucide/external-link'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  baseRootClass,\n  focusRingClass,\n  type GrLinkSize,\n  type GrLinkTone,\n  type GrLinkUnderline,\n  type GrLinkVariant,\n  grLinkClass,\n  grLinkColorStyle,\n} from './grLinkStyles'\n\nexport interface GrLinkProps {\n  /**\n  * Кастомный корневой тег/компонент. Если передан и компонент не `disabled` —\n  * рендерится через `<component :is=\"as\">`. Игнорируется при `disabled`.\n  */\n  as?: string | Component\n  href?: string\n  external?: boolean\n  target?: string\n  rel?: string\n  disabled?: boolean\n  ariaLabel?: string\n  /** Семантический цвет ссылки из палитры `GrTone`. */\n  tone?: GrLinkTone\n  /** Уровень акцента: `default` (окрашен) или `muted` (приглушён, акцент на hover). */\n  variant?: GrLinkVariant\n  underline?: GrLinkUnderline\n  size?: GrLinkSize\n  /**\n  * Иконка внешней ссылки. По умолчанию показывается у любой ссылки, которая\n  * открывается в новой вкладке, — не только при `external`.\n  */\n  externalIcon?: boolean\n  /** i18n: скрытая подсказка «откроется в новой вкладке». */\n  newTabLabel?: string\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<GrLinkProps>(), {\n  as: undefined,\n  href: undefined,\n  external: false,\n  target: undefined,\n  rel: undefined,\n  disabled: false,\n  ariaLabel: undefined,\n  tone: 'primary',\n  variant: 'default',\n  underline: 'auto',\n  size: undefined,\n  externalIcon: undefined,\n  newTabLabel: undefined,\n})\n\nconst attrs = useAttrs()\n\n// Кастомный корень имеет приоритет над `<a>` — GR не пытается угадывать\n// «правильный» тег за пользователя, если он явно его указал.\nconst isInteractive = computed(() => !props.disabled && (!!props.as || !!props.href))\n\nconst renderAs = computed<string | Component>(() => {\n  if (!isInteractive.value) return 'span'\n  if (props.as) {\n    // Если `as` — объект-компонент, помечаем его как нереактивный, чтобы избежать\n    // оверхеда от Vue-прокси и предупреждений в консоли. Строки (нативные теги)\n    // оставляем как есть.\n    return typeof props.as === 'string' ? props.as : markRaw(props.as)\n  }\n  return 'a'\n})\n\nconst resolvedTarget = computed(() => {\n  if (props.target)\n    return props.target\n\n  if (props.external)\n    return '_blank'\n\n  return undefined\n})\n\nconst resolvedRel = computed(() => {\n  if (props.rel)\n    return props.rel\n\n  // Авто-защита для любых ссылок, открывающихся в новой вкладке,\n  // а не только когда выставлен `external`.\n  if (resolvedTarget.value === '_blank')\n    return 'noopener noreferrer'\n\n  return undefined\n})\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrLink' })\n\nconst { t } = useGranularityTranslations()\n\n/**\n * Смена контекста должна быть объявлена (WCAG 3.2.5). Условие — ссылка реально\n * открывается в новой вкладке, а не наличие пропа `external`: `target=\"_blank\"`\n * снаружи даёт ровно тот же сюрприз (та же генерализация, что у `rel`).\n */\nconst opensInNewTab = computed(() => isInteractive.value && resolvedTarget.value === '_blank')\nconst newTabHint = computed(() => props.newTabLabel ?? t('gr.link.opensInNewTab', 'opens in a new tab'))\n\nconst showExternalIcon = computed(() => props.externalIcon ?? opensInNewTab.value)\n\n/**\n * `aria-label` перекрывает содержимое целиком — вместе со скрытой подсказкой.\n * Поэтому, если имя задано руками, подсказка дописывается к нему.\n */\nconst resolvedAriaLabel = computed(() => {\n  if (!props.ariaLabel)\n    return undefined\n\n  return opensInNewTab.value ? `${props.ariaLabel}, ${newTabHint.value}` : props.ariaLabel\n})\n\nconst iconSize = computed(() => (resolvedSize.value === 'lg' ? 'sm' : 'xs'))\n\nconst rootClass = computed(() => {\n  const variantClass = grLinkClass({\n    size: resolvedSize.value,\n    underline: props.underline,\n    disabled: props.disabled,\n  })\n\n  // На disabled-ветке (`<span>`) focus-ring не нужен: элемент не фокусируется,\n  // а если снаружи ему навесят `tabindex`, фокус-рамка на «отключённой» ссылке смотрелась бы странно.\n  return props.disabled\n    ? `${baseRootClass} ${variantClass}`\n    : `${baseRootClass} ${focusRingClass} ${variantClass}`\n})\n\n// Цвет (tone × variant) прокидываем через CSS-переменные, чтобы не плодить классы.\nconst colorStyle = computed(() => grLinkColorStyle({\n  tone: props.tone,\n  variant: props.variant,\n  disabled: props.disabled,\n}))\n</script>\n\n<template>\n  <component\n    :is=\"renderAs\"\n    v-bind=\"attrs\"\n    :href=\"isInteractive ? href : undefined\"\n    :target=\"isInteractive ? resolvedTarget : undefined\"\n    :rel=\"isInteractive ? resolvedRel : undefined\"\n    :aria-label=\"resolvedAriaLabel\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :class=\"rootClass\"\n    :style=\"colorStyle\"\n  >\n    <slot />\n\n    <GrIcon v-if=\"showExternalIcon\" :size=\"iconSize\">\n      <IconExternal />\n    </GrIcon>\n\n    <!-- Подсказка не дублируется, когда её уже вобрал `aria-label`. -->\n    <span v-if=\"opensInNewTab && !ariaLabel\" class=\"sr-only\">({{ newTabHint }})</span>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEA,MAAM,QAAQ;EAgBd,MAAM,QAAQ,SAAS;EAIvB,MAAM,gBAAgB,eAAe,CAAC,MAAM,aAAa,CAAC,CAAC,MAAM,MAAM,CAAC,CAAC,MAAM,KAAK;EAEpF,MAAM,WAAW,eAAmC;GAClD,IAAI,CAAC,cAAc,OAAO,OAAO;GACjC,IAAI,MAAM,IAIR,OAAO,OAAO,MAAM,OAAO,WAAW,MAAM,KAAK,QAAQ,MAAM,EAAE;GAEnE,OAAO;EACT,CAAC;EAED,MAAM,iBAAiB,eAAe;GACpC,IAAI,MAAM,QACR,OAAO,MAAM;GAEf,IAAI,MAAM,UACR,OAAO;EAGX,CAAC;EAED,MAAM,cAAc,eAAe;GACjC,IAAI,MAAM,KACR,OAAO,MAAM;GAIf,IAAI,eAAe,UAAU,UAC3B,OAAO;EAGX,CAAC;EAED,MAAM,eAAe,yBAAyB,MAAM,MAAM,EAAE,WAAW,SAAS,CAAC;EAEjF,MAAM,EAAE,MAAM,2BAA2B;;;;;;EAOzC,MAAM,gBAAgB,eAAe,cAAc,SAAS,eAAe,UAAU,QAAQ;EAC7F,MAAM,aAAa,eAAe,MAAM,eAAe,EAAE,yBAAyB,oBAAoB,CAAC;EAEvG,MAAM,mBAAmB,eAAe,MAAM,gBAAgB,cAAc,KAAK;;;;;EAMjF,MAAM,oBAAoB,eAAe;GACvC,IAAI,CAAC,MAAM,WACT,OAAO,KAAA;GAET,OAAO,cAAc,QAAQ,GAAG,MAAM,UAAU,IAAI,WAAW,UAAU,MAAM;EACjF,CAAC;EAED,MAAM,WAAW,eAAgB,aAAa,UAAU,OAAO,OAAO,IAAK;EAE3E,MAAM,YAAY,eAAe;GAC/B,MAAM,eAAe,YAAY;IAC/B,MAAM,aAAa;IACnB,WAAW,MAAM;IACjB,UAAU,MAAM;GAClB,CAAC;GAID,OAAO,MAAM,WACT,GAAG,cAAc,GAAG,iBACpB,GAAG,cAAc,GAAG,eAAe,GAAG;EAC5C,CAAC;EAGD,MAAM,aAAa,eAAe,iBAAiB;GACjD,MAAM,MAAM;GACZ,SAAS,MAAM;GACf,UAAU,MAAM;EAClB,CAAC,CAAC;;uBAIA,YAmBY,wBAlBL,SAAA,KAAQ,GADf,WAEU,MAiBE,KAAA,GAjBG;IACZ,MAAM,cAAA,QAAgB,QAAA,OAAO,KAAA;IAC7B,QAAQ,cAAA,QAAgB,eAAA,QAAiB,KAAA;IACzC,KAAK,cAAA,QAAgB,YAAA,QAAc,KAAA;IACnC,cAAY,kBAAA;IACZ,iBAAe,QAAA,WAAQ,SAAY,KAAA;IACnC,OAAO,UAAA;IACP,OAAO,WAAA;;2BAEA;KAAR,WAAQ,KAAA,QAAA,SAAA;KAEM,iBAAA,SAAA,UAAA,GAAd,YAES,gBAAA;;MAFwB,MAAM,SAAA;;6BACrB,CAAhB,YAAgB,MAAA,qBAAA,CAAA,CAAA,CAAA;;;KAIN,cAAA,SAAa,CAAK,QAAA,aAAA,UAAA,GAA9B,mBAAkF,QAAlF,YAAyD,MAAC,gBAAG,WAAA,KAAU,IAAG,KAAC,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/components/GrLink/index.js

@@ -1,3 +1,3 @@
-import { n as grLinkSafelist, t as grLinkConfig } from "../../chunks/config-B5Rknzkd.js";
-import { t as GrLink_default } from "./chunks/GrLink-BP0YrnL9.js";
+import { t as GrLink_default } from "./chunks/GrLink-D-cgUMXW.js";
+import { n as grLinkSafelist, t as grLinkConfig } from "../../chunks/config-Cl4ST6Qd.js";
 export { GrLink_default as GrLink, GrLink_default as default, grLinkConfig, grLinkSafelist };