@sparklingopinions/sparkling-ui 0.5.0 → 0.7.0

package/dist/components/DropdownMenu/DropdownMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,110 +1,90 @@
 import e from "../Button/Button.js";
 import t from "../Icon/Icon.js";
 import n from "../Tooltip/Tooltip.js";
-import { useConfirm as r } from "../../composables/useConfirm.js";
-import { Fragment as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, withCtx as v, withModifiers as y } from "vue";
-import { DropdownMenuContent as b, DropdownMenuItem as x, DropdownMenuPortal as S, DropdownMenuRoot as C, DropdownMenuSeparator as w, DropdownMenuTrigger as T } from "reka-ui";
+import r from "../internal/MenuItemContent.js";
+import { menuConfirmDefaults as i, menuContentClass as a, menuItemClass as o, menuSeparatorClass as s, useMenuSelect as c } from "../internal/menu.js";
+import { Fragment as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createVNode as p, defineComponent as m, mergeDefaults as h, normalizeClass as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, withCtx as C, withModifiers as w } from "vue";
+import { DropdownMenuContent as T, DropdownMenuItem as E, DropdownMenuPortal as D, DropdownMenuRoot as O, DropdownMenuSeparator as k, DropdownMenuTrigger as A } from "reka-ui";
 //#region src/components/DropdownMenu/DropdownMenu.vue?vue&type=script&setup=true&lang.ts
-var E = { key: 0 }, D = { class: "flex-1 text-13" }, O = {
-	key: 1,
-	class: "text-11 text-sui-ink-muted"
-}, k = /*@__PURE__*/ u({
+var j = { key: 0 }, M = /*@__PURE__*/ m({
 	__name: "DropdownMenu",
-	props: {
-		id: { default: void 0 },
-		items: { default: () => [] },
-		buttonIcon: { default: "more-vertical" },
-		buttonLabel: { default: void 0 },
-		tooltip: { default: "More actions" },
-		align: { default: "start" },
-		confirmTitle: { default: "Are you sure?" },
-		confirmMessage: { default: "This can't be undone." },
-		confirmLabel: { default: "Confirm" },
-		deleteLabel: { default: "Delete" },
-		cancelLabel: { default: "Cancel" }
-	},
+	props: /*@__PURE__*/ h({
+		items: {},
+		buttonIcon: {},
+		buttonLabel: {},
+		tooltip: {},
+		align: {},
+		id: {},
+		confirmTitle: {},
+		confirmMessage: {},
+		confirmLabel: {},
+		deleteLabel: {},
+		cancelLabel: {}
+	}, {
+		...i,
+		items: () => [],
+		buttonIcon: "more-vertical",
+		buttonLabel: void 0,
+		tooltip: "More actions",
+		align: "start"
+	}),
 	emits: [
 		"click-item",
 		"show",
 		"hide"
 	],
-	setup(u, { emit: k }) {
-		let A = u, j = k, M = p(!1), N = r();
-		async function P(e) {
-			if (e.confirm || e.confirmed) {
-				let t = e.variant === "danger" || e.action === "delete";
-				if (!await N({
-					title: e.confirm?.title ?? A.confirmTitle,
-					message: e.confirm?.message ?? A.confirmMessage,
-					cancelLabel: A.cancelLabel,
-					confirmLabel: e.confirm?.acceptLabel ?? (e.action === "delete" ? A.deleteLabel : A.confirmLabel),
-					confirmVariant: t ? "danger" : "primary"
-				})) return;
-			}
-			j("click-item", {
-				id: A.id,
-				...e
-			});
-		}
+	setup(i, { emit: m }) {
+		let h = i, M = m, N = v(!1), P = c(h, (e) => M("click-item", e));
 		function F(e) {
-			M.value = e, j(e ? "show" : "hide");
+			N.value = e, M(e ? "show" : "hide");
 		}
-		return (r, p) => (f(), s("div", null, [l(_(C), {
+		return (c, m) => (_(), f("div", null, [p(S(O), {
 			modal: !1,
-			open: M.value,
+			open: N.value,
 			"onUpdate:open": F
 		}, {
-			default: v(() => [l(_(T), { "as-child": "" }, {
-				default: v(() => [l(n, {
-					disabled: !u.tooltip || M.value,
-					text: u.tooltip ?? void 0
+			default: C(() => [p(S(A), { "as-child": "" }, {
+				default: C(() => [p(n, {
+					disabled: !i.tooltip || N.value,
+					text: i.tooltip ?? void 0
 				}, {
-					default: v(() => [h(r.$slots, "trigger", { open: M.value }, () => [l(e, {
-						"aria-label": u.buttonLabel ? void 0 : u.tooltip ?? void 0,
-						"icon-only": !u.buttonLabel,
+					default: C(() => [b(c.$slots, "trigger", { open: N.value }, () => [p(e, {
+						"aria-label": i.buttonLabel ? void 0 : i.tooltip ?? void 0,
+						"icon-only": !i.buttonLabel,
 						size: "sm",
 						type: "button",
 						variant: "ghost",
-						onClick: p[0] ||= y(() => {}, ["stop"])
+						onClick: m[0] ||= w(() => {}, ["stop"])
 					}, {
-						default: v(() => [u.buttonLabel ? (f(), s("span", E, g(u.buttonLabel), 1)) : o("", !0), u.buttonIcon ? (f(), a(t, {
+						default: C(() => [i.buttonLabel ? (_(), f("span", j, x(i.buttonLabel), 1)) : d("", !0), i.buttonIcon ? (_(), u(t, {
 							key: 1,
 							color: "ink-subtle",
-							name: u.buttonIcon
-						}, null, 8, ["name"])) : o("", !0)]),
+							name: i.buttonIcon
+						}, null, 8, ["name"])) : d("", !0)]),
 						_: 1
 					}, 8, ["aria-label", "icon-only"])])]),
 					_: 3
 				}, 8, ["disabled", "text"])]),
 				_: 3
-			}), l(_(S), null, {
-				default: v(() => [l(_(b), {
-					align: u.align,
-					class: "z-[1100] min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in",
+			}), p(S(D), null, {
+				default: C(() => [p(S(T), {
+					align: i.align,
+					class: g([S(a), "min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))]"]),
 					side: "bottom"
 				}, {
-					default: v(() => [(f(!0), s(i, null, m(u.items, (e, n) => (f(), s(i, { key: n }, [e.type === "separator" ? (f(), a(_(w), {
+					default: C(() => [(_(!0), f(l, null, y(i.items, (e, t) => (_(), f(l, { key: t }, [e.type === "separator" ? (_(), u(S(k), {
 						key: 0,
-						class: "my-1 border-t border-sui-line-subtle"
-					})) : (f(), a(_(x), {
+						class: g(S(s))
+					}, null, 8, ["class"])) : (_(), u(S(E), {
 						key: 1,
-						class: "relative rounded-lg text-sm text-sui-ink transition-colors duration-150 outline-hidden hover:bg-sui-sunken focus-visible:sui-ring-inset data-highlighted:bg-sui-sunken",
-						onSelect: (t) => P(e)
+						class: g(S(o)),
+						onSelect: (t) => S(P)(e)
 					}, {
-						default: v(() => [c("div", { class: d(["flex cursor-pointer items-center gap-2.5 px-2.5 py-1.5", e.variant === "danger" ? "text-sui-danger" : "text-sui-ink"]) }, [
-							e.icon ? (f(), a(t, {
-								key: 0,
-								class: "h-4 w-4 shrink-0",
-								color: e.variant === "danger" ? "danger" : "ink-muted",
-								name: e.icon
-							}, null, 8, ["color", "name"])) : o("", !0),
-							c("span", D, g(e.label), 1),
-							e.shortcut ? (f(), s("span", O, g(e.shortcut), 1)) : o("", !0)
-						], 2)]),
+						default: C(() => [p(r, { item: e }, null, 8, ["item"])]),
 						_: 2
-					}, 1032, ["onSelect"]))], 64))), 128))]),
+					}, 1032, ["class", "onSelect"]))], 64))), 128))]),
 					_: 1
-				}, 8, ["align"])]),
+				}, 8, ["align", "class"])]),
 				_: 1
 			})]),
 			_: 3
@@ -112,6 +92,6 @@ var E = { key: 0 }, D = { class: "flex-1 text-13" }, O = {
 	}
 });
 //#endregion
-export { k as default };
+export { M as default };
 
 //# sourceMappingURL=DropdownMenu.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/DropdownMenu/DropdownMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","_unref","_withCtx","Tooltip","_renderSlot","Button","_withModifiers","_toDisplayString","_createCommentVNode","_createBlock","Icon","_Fragment","_renderList","_createElementVNode","_normalizeClass","Button_default","Icon_default","Tooltip_default","_hoisted_1","_hoisted_2","_hoisted_3","DropdownMenu_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","open","ref","confirm","useConfirm","select","item","destructive","onOpenChange","value","openBlock","createElementBlock","createVNode","unref","DropdownMenuRoot","withCtx","DropdownMenuTrigger","renderSlot","_ctx","_cache","withModifiers","toDisplayString","createCommentVNode","createBlock","DropdownMenuPortal","DropdownMenuContent","Fragment","renderList","index","DropdownMenuSeparator","DropdownMenuItem","createElementVNode","normalizeClass"],"sources":["../../../src/components/DropdownMenu/DropdownMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from 'reka-ui'\n\nimport { useConfirm } from '../../composables/useConfirm'\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\n\nexport interface DropdownMenuAction {\n  type: 'action'\n  label: string\n  action?: string\n  icon?: string\n  variant?: 'danger'\n  shortcut?: string\n  /** Asks first, with this wording; `confirmed: true` asks with the generic wording. */\n  confirm?: { message: string; title?: string; acceptLabel?: string }\n  confirmed?: boolean\n  [key: string]: unknown\n}\n\nexport type DropdownMenuEntry = DropdownMenuAction | { type: 'separator' }\n\nexport interface DropdownMenuProps {\n  /** Passed back with every clicked item, e.g. the record the menu acts on. */\n  id?: string\n  items?: DropdownMenuEntry[]\n  buttonIcon?: string\n  /** A label beside the icon; without one the button is icon-only, named by the tooltip. */\n  buttonLabel?: string\n  /** The trigger's tooltip and name; null for none. */\n  tooltip?: string | null\n  /** Lines the menu up with the trigger's start or end edge. */\n  align?: 'start' | 'end'\n  confirmTitle?: string\n  confirmMessage?: string\n  confirmLabel?: string\n  deleteLabel?: string\n  cancelLabel?: string\n}\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  id: undefined,\n  items: () => [],\n  buttonIcon: 'more-vertical',\n  buttonLabel: undefined,\n  tooltip: 'More actions',\n  align: 'start',\n  confirmTitle: 'Are you sure?',\n  confirmMessage: \"This can't be undone.\",\n  confirmLabel: 'Confirm',\n  deleteLabel: 'Delete',\n  cancelLabel: 'Cancel'\n})\n\nconst emit = defineEmits<{ 'click-item': [item: DropdownMenuAction & { id?: string }]; show: []; hide: [] }>()\n\nconst open = ref(false)\nconst confirm = useConfirm()\n\nasync function select(item: DropdownMenuAction) {\n  if (item.confirm || item.confirmed) {\n    const destructive = item.variant === 'danger' || item.action === 'delete'\n    const confirmed = await confirm({\n      title: item.confirm?.title ?? props.confirmTitle,\n      message: item.confirm?.message ?? props.confirmMessage,\n      cancelLabel: props.cancelLabel,\n      confirmLabel: item.confirm?.acceptLabel ?? (item.action === 'delete' ? props.deleteLabel : props.confirmLabel),\n      confirmVariant: destructive ? 'danger' : 'primary'\n    })\n    if (!confirmed) return\n  }\n  emit('click-item', { id: props.id, ...item })\n}\n\nfunction onOpenChange(value: boolean) {\n  open.value = value\n  if (value) emit('show')\n  else emit('hide')\n}\n</script>\n\n<template>\n  <div>\n    <!-- Not modal: the page stays live (hover, scroll) while it's open. -->\n    <DropdownMenuRoot :modal=\"false\" :open=\"open\" @update:open=\"onOpenChange\">\n      <!-- The tooltip inside the menu's trigger: Reka's anchors attach to the nearest popper, which must be the menu's. -->\n      <DropdownMenuTrigger as-child>\n        <Tooltip :disabled=\"!tooltip || open\" :text=\"tooltip ?? undefined\">\n          <slot name=\"trigger\" :open=\"open\">\n            <Button\n              :aria-label=\"buttonLabel ? undefined : (tooltip ?? undefined)\"\n              :icon-only=\"!buttonLabel\"\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n              @click.stop\n            >\n              <span v-if=\"buttonLabel\">{{ buttonLabel }}</span>\n              <Icon v-if=\"buttonIcon\" color=\"ink-subtle\" :name=\"buttonIcon\" />\n            </Button>\n          </slot>\n        </Tooltip>\n      </DropdownMenuTrigger>\n      <DropdownMenuPortal>\n        <DropdownMenuContent\n          :align=\"align\"\n          class=\"z-[1100] min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in\"\n          side=\"bottom\"\n        >\n          <template v-for=\"(item, index) in items\" :key=\"index\">\n            <DropdownMenuSeparator v-if=\"item.type === 'separator'\" class=\"my-1 border-t border-sui-line-subtle\" />\n            <DropdownMenuItem\n              v-else\n              class=\"relative rounded-lg text-sm text-sui-ink transition-colors duration-150 outline-hidden hover:bg-sui-sunken focus-visible:sui-ring-inset data-highlighted:bg-sui-sunken\"\n              @select=\"select(item)\"\n            >\n              <div\n                class=\"flex cursor-pointer items-center gap-2.5 px-2.5 py-1.5\"\n                :class=\"item.variant === 'danger' ? 'text-sui-danger' : 'text-sui-ink'\"\n              >\n                <Icon\n                  v-if=\"item.icon\"\n                  class=\"h-4 w-4 shrink-0\"\n                  :color=\"item.variant === 'danger' ? 'danger' : 'ink-muted'\"\n                  :name=\"item.icon\"\n                />\n                <span class=\"flex-1 text-13\">{{ item.label }}</span>\n                <span v-if=\"item.shortcut\" class=\"text-11 text-sui-ink-muted\">{{ item.shortcut }}</span>\n              </div>\n            </DropdownMenuItem>\n          </template>\n        </DropdownMenuContent>\n      </DropdownMenuPortal>\n    </DropdownMenuRoot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDA,IAAMyB,IAAQC,GAcRC,IAAOH,GAEPI,IAAOC,EAAI,EAAK,GAChBC,IAAUC,EAAW;EAE3B,eAAeC,EAAO,GAA0B;GAC9C,IAAIC,EAAK,WAAWA,EAAK,WAAW;IAClC,IAAMC,IAAcD,EAAK,YAAY,YAAYA,EAAK,WAAW;IAQjE,IAAI,CAAC,MAPmBH,EAAQ;KAC9B,OAAOG,EAAK,SAAS,SAASR,EAAM;KACpC,SAASQ,EAAK,SAAS,WAAWR,EAAM;KACxC,aAAaA,EAAM;KACnB,cAAcQ,EAAK,SAAS,gBAAgBA,EAAK,WAAW,WAAWR,EAAM,cAAcA,EAAM;KACjG,gBAAgBS,IAAc,WAAW;IAC3C,CAAC,GACe;GAClB;GACA,EAAK,cAAc;IAAE,IAAIT,EAAM;IAAI,GAAGQ;GAAK,CAAC;EAC9C;EAEA,SAASE,EAAa,GAAgB;GAEpC,AADA,EAAK,QAAQC,GACFT,EAAPS,IAAY,SACN,MAAM;EAClB;E,kBAIEpC,EAAA,GAAAC,EAoDM,OAAA,MAAA,CAlDJC,EAiDmBC,EAAAsC,CAAA,GAAA;GAjDA,OAAO;GAAQ,MAAMb,EAAA;GAAO,iBAAaO;;GAE1D,SAAA/B,QAgBsB,CAhBtBF,EAgBsBC,EAAAwC,CAAA,GAAA,EAhBD,YAAA,GAAQ,GAAA;IAC3B,SAAAvC,QAcU,CAdVF,EAcUG,GAAA;KAdA,UAAQ,CAAGqB,EAAA,WAAWE,EAAA;KAAO,MAAMF,EAAA,WAAW,KAAA;;KACtD,SAAAtB,QAYO,CAZPE,EAYOuC,EAAA,QAAA,WAAA,EAZe,MAAMjB,EAAA,MAAI,SAYzB,CAXL1B,EAUSK,GAAA;MATN,cAAYmB,EAAA,cAAc,KAAA,IAAaA,EAAA,WAAW,KAAA;MAClD,aAAS,CAAGA,EAAA;MACb,MAAK;MACL,MAAK;MACL,SAAQ;MACP,SAAK,AAAAoB,EAAA,OAAAtC,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;MAEX,SAAAJ,QAAiD,CAArCsB,EAAA,eAAZ1B,EAAA,GAAAC,EAAiD,QAAAmB,GAAAX,EAArBiB,EAAA,WAAW,GAAA,CAAA,K,WAC3BA,EAAA,cAAZ1B,EAAA,GAAAW,EAAgEC,GAAA;;OAAxC,OAAM;OAAc,MAAMc,EAAA;;;;;;;G,IAK1DxB,EA6BqBC,EAAAgD,CAAA,GAAA,MAAA;IA5BnB,SAAA/C,QA2BsB,CA3BtBF,EA2BsBC,EAAAiD,CAAA,GAAA;KA1BnB,OAAO1B,EAAA;KACR,OAAM;KACN,MAAK;;KAEK,SAAAtB,QAA8B,EAAxCJ,EAAA,EAAA,GAAAC,EAqBWY,GAAA,MAAAC,EArBuBY,EAAA,QAAhB,GAAM,OAAuB1B,EAAA,GAAAC,EAAAY,GAAA,EAAA,KAAA0C,EAAK,GAAA,CACrBtB,EAAK,SAAI,eAAtCjC,EAAA,GAAAW,EAAuGR,EAAAqD,CAAA,GAAA;;MAA/C,OAAM;K,OAC9DxD,EAAA,GAAAW,EAkBmBR,EAAAsD,CAAA,GAAA;;MAhBjB,OAAM;MACL,WAAM,MAAEzB,EAAOC,CAAI;;MAEpB,SAAA7B,QAYM,CAZNW,EAYM,OAAA,EAXJ,OAAKC,EAAA,CAAC,0DACEiB,EAAK,YAAO,WAAA,oBAAA,cAAA,CAAA,E;OAGZA,EAAK,QADbjC,EAAA,GAAAW,EAKEC,GAAA;;QAHA,OAAM;QACL,OAAOqB,EAAK,YAAO,WAAA,WAAA;QACnB,MAAMA,EAAK;;OAEdlB,EAAoD,QAApDM,GAAoDZ,EAApBwB,EAAK,KAAK,GAAA,CAAA;OAC9BA,EAAK,YAAjBjC,EAAA,GAAAC,EAAwF,QAAxFqB,GAAwFb,EAAvBwB,EAAK,QAAQ,GAAA,CAAA,K"}
+{"version":3,"file":"DropdownMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","_unref","_withCtx","Tooltip","_renderSlot","Button","_withModifiers","_toDisplayString","_createCommentVNode","_createBlock","Icon","_normalizeClass","_Fragment","_renderList","MenuItemContent","Button_default","Icon_default","Tooltip_default","MenuItemContent_default","_hoisted_1","DropdownMenu_vue_vue_type_script_setup_true_lang_default","menuConfirmDefaults","__emit","props","__props","emit","open","ref","select","useMenuSelect","item","onOpenChange","value","openBlock","createElementBlock","createVNode","unref","DropdownMenuRoot","withCtx","DropdownMenuTrigger","renderSlot","_ctx","_cache","withModifiers","toDisplayString","createCommentVNode","createBlock","DropdownMenuPortal","DropdownMenuContent","normalizeClass","menuContentClass","Fragment","renderList","index","DropdownMenuSeparator","menuSeparatorClass","DropdownMenuItem","menuItemClass"],"sources":["../../../src/components/DropdownMenu/DropdownMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport MenuItemContent from '../internal/MenuItemContent.vue'\nimport {\n  type DropdownMenuAction,\n  type DropdownMenuEntry,\n  type MenuConfirmLabels,\n  menuConfirmDefaults,\n  menuContentClass,\n  menuItemClass,\n  menuSeparatorClass,\n  useMenuSelect\n} from '../internal/menu'\n\nexport type { DropdownMenuAction, DropdownMenuEntry }\n\nexport interface DropdownMenuProps extends MenuConfirmLabels {\n  items?: DropdownMenuEntry[]\n  buttonIcon?: string\n  /** A label beside the icon; without one the button is icon-only, named by the tooltip. */\n  buttonLabel?: string\n  /** The trigger's tooltip and name; null for none. */\n  tooltip?: string | null\n  /** Lines the menu up with the trigger's start or end edge. */\n  align?: 'start' | 'end'\n}\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  ...menuConfirmDefaults,\n  items: () => [],\n  buttonIcon: 'more-vertical',\n  buttonLabel: undefined,\n  tooltip: 'More actions',\n  align: 'start'\n})\n\nconst emit = defineEmits<{ 'click-item': [item: DropdownMenuAction & { id?: string }]; show: []; hide: [] }>()\n\nconst open = ref(false)\nconst select = useMenuSelect(props, (item) => emit('click-item', item))\n\nfunction onOpenChange(value: boolean) {\n  open.value = value\n  if (value) emit('show')\n  else emit('hide')\n}\n</script>\n\n<template>\n  <div>\n    <!-- Not modal: the page stays live (hover, scroll) while it's open. -->\n    <DropdownMenuRoot :modal=\"false\" :open=\"open\" @update:open=\"onOpenChange\">\n      <!-- The tooltip inside the menu's trigger: Reka's anchors attach to the nearest popper, which must be the menu's. -->\n      <DropdownMenuTrigger as-child>\n        <Tooltip :disabled=\"!tooltip || open\" :text=\"tooltip ?? undefined\">\n          <slot name=\"trigger\" :open=\"open\">\n            <Button\n              :aria-label=\"buttonLabel ? undefined : (tooltip ?? undefined)\"\n              :icon-only=\"!buttonLabel\"\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n              @click.stop\n            >\n              <span v-if=\"buttonLabel\">{{ buttonLabel }}</span>\n              <Icon v-if=\"buttonIcon\" color=\"ink-subtle\" :name=\"buttonIcon\" />\n            </Button>\n          </slot>\n        </Tooltip>\n      </DropdownMenuTrigger>\n      <DropdownMenuPortal>\n        <DropdownMenuContent\n          :align=\"align\"\n          :class=\"[menuContentClass, 'min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))]']\"\n          side=\"bottom\"\n        >\n          <template v-for=\"(item, index) in items\" :key=\"index\">\n            <DropdownMenuSeparator v-if=\"item.type === 'separator'\" :class=\"menuSeparatorClass\" />\n            <DropdownMenuItem v-else :class=\"menuItemClass\" @select=\"select(item)\">\n              <MenuItemContent :item=\"item\" />\n            </DropdownMenuItem>\n          </template>\n        </DropdownMenuContent>\n      </DropdownMenuPortal>\n    </DropdownMenuRoot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCA,IAAMyB,IAAQC,GASRC,IAAOH,GAEPI,IAAOC,EAAI,EAAK,GAChBC,IAASC,EAAcN,IAAQ,MAASE,EAAK,cAAcK,CAAI,CAAC;EAEtE,SAASC,EAAa,GAAgB;GAEpC,AADA,EAAK,QAAQC,GACFP,EAAPO,IAAY,SACN,MAAM;EAClB;E,kBAIElC,EAAA,GAAAC,EAoCM,OAAA,MAAA,CAlCJC,EAiCmBC,EAAAoC,CAAA,GAAA;GAjCA,OAAO;GAAQ,MAAMX,EAAA;GAAO,iBAAaK;;GAE1D,SAAA7B,QAgBsB,CAhBtBF,EAgBsBC,EAAAsC,CAAA,GAAA,EAhBD,YAAA,GAAQ,GAAA;IAC3B,SAAArC,QAcU,CAdVF,EAcUG,GAAA;KAdA,UAAQ,CAAGqB,EAAA,WAAWE,EAAA;KAAO,MAAMF,EAAA,WAAW,KAAA;;KACtD,SAAAtB,QAYO,CAZPE,EAYOqC,EAAA,QAAA,WAAA,EAZe,MAAMf,EAAA,MAAI,SAYzB,CAXL1B,EAUSK,GAAA;MATN,cAAYmB,EAAA,cAAc,KAAA,IAAaA,EAAA,WAAW,KAAA;MAClD,aAAS,CAAGA,EAAA;MACb,MAAK;MACL,MAAK;MACL,SAAQ;MACP,SAAK,AAAAkB,EAAA,OAAApC,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;MAEX,SAAAJ,QAAiD,CAArCsB,EAAA,eAAZ1B,EAAA,GAAAC,EAAiD,QAAAoB,GAAAZ,EAArBiB,EAAA,WAAW,GAAA,CAAA,K,WAC3BA,EAAA,cAAZ1B,EAAA,GAAAW,EAAgEC,GAAA;;OAAxC,OAAM;OAAc,MAAMc,EAAA;;;;;;;G,IAK1DxB,EAaqBC,EAAA8C,CAAA,GAAA,MAAA;IAZnB,SAAA7C,QAWsB,CAXtBF,EAWsBC,EAAA+C,CAAA,GAAA;KAVnB,OAAOxB,EAAA;KACP,OAAKb,EAAA,CAAGV,EAAAiD,CAAA,GAAgB,4DAAA,CAAA;KACzB,MAAK;;KAEK,SAAAhD,QAA8B,EAAxCJ,EAAA,EAAA,GAAAC,EAKWa,GAAA,MAAAC,EALuBW,EAAA,QAAhB,GAAM,OAAuB1B,EAAA,GAAAC,EAAAa,GAAA,EAAA,KAAAyC,EAAK,GAAA,CACrBvB,EAAK,SAAI,eAAtChC,EAAA,GAAAW,EAAsFR,EAAAqD,CAAA,GAAA;;MAA7B,OAAK3C,EAAEV,EAAAsD,CAAA,CAAkB;K,2BAClFzD,EAAA,GAAAW,EAEmBR,EAAAuD,CAAA,GAAA;;MAFO,OAAK7C,EAAEV,EAAAwD,CAAA,CAAa;MAAG,WAAM,MAAExD,EAAA2B,CAAA,CAAM,CAACE,CAAI;;MAClE,SAAA5B,QAAgC,CAAhCF,EAAgCc,GAAA,EAAR,QAAI,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,C"}

package/dist/components/EmptyState/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","names":["_sfc_main","EmptyState_vue_vue_type_script_setup_true_lang_default","EmptyState_default"],"sources":["../../../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\n\nexport interface EmptyStateProps {\n  title: string\n  /** Plain text; for anything richer, use the `description` slot. */\n  description?: string\n  /** What the list holds, as an icon name (users, inbox, search for no matches), in a tile above the title. Decorative. */\n  icon?: string\n  /** `accent` for a list waiting to be filled; `neutral` for no matches or a filtered view. */\n  tone?: 'accent' | 'neutral'\n  /** Shows a primary button with this label, which emits `action`. Or put your own in the `action` slot. */\n  actionLabel?: string\n  actionIcon?: string\n  /** The title's heading level, to fit the page's outline. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n}\n\nwithDefaults(defineProps<EmptyStateProps>(), {\n  description: undefined,\n  icon: undefined,\n  tone: 'accent',\n  actionLabel: undefined,\n  actionIcon: 'plus',\n  headingLevel: 2\n})\n\ndefineEmits<{ action: [] }>()\n</script>\n\n<template>\n  <div class=\"flex flex-col items-center justify-center px-6 py-16 text-center\">\n    <div\n      v-if=\"icon\"\n      aria-hidden=\"true\"\n      class=\"mb-4 flex size-12 items-center justify-center rounded-xl ring-1 ring-inset\"\n      :class=\"tone === 'accent' ? 'bg-sui-accent-wash ring-sui-accent-line' : 'bg-sui-sunken ring-sui-line-subtle'\"\n    >\n      <Icon class=\"size-6\" :color=\"tone === 'accent' ? 'accent' : 'ink-muted'\" :name=\"icon\" />\n    </div>\n    <component :is=\"`h${headingLevel}`\" class=\"m-0 mb-1.5 text-base font-semibold text-sui-ink\">{{ title }}</component>\n    <div class=\"max-w-xs text-sm leading-relaxed text-sui-ink-muted\">\n      <slot name=\"description\">{{ description }}</slot>\n    </div>\n    <slot name=\"action\">\n      <Button v-if=\"actionLabel\" class=\"mt-4\" variant=\"primary\" @click=\"$emit('action')\">\n        <Icon v-if=\"actionIcon\" :name=\"actionIcon\" />\n        {{ actionLabel }}\n      </Button>\n    </slot>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"EmptyState.js","names":["_sfc_main","EmptyState_vue_vue_type_script_setup_true_lang_default","EmptyState_default"],"sources":["../../../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\n\nexport interface EmptyStateProps {\n  title: string\n  /** Plain text; for anything richer, use the `description` slot. */\n  description?: string\n  /** What the list holds, as an icon name (users, inbox, search for no matches), in a tile above the title. Decorative. */\n  icon?: string\n  /** `accent` for a list waiting to be filled; `neutral` for no matches or a filtered view. */\n  tone?: 'accent' | 'neutral'\n  /** Shows a primary button with this label, which emits `action`. Or put your own in the `action` slot. */\n  actionLabel?: string\n  actionIcon?: string\n  /** The title's heading level, to fit the page's outline. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  /** sm, for an empty card in settings or a tray: an optional 16px icon, the title as one muted line of text (not a\n   *  heading), a small secondary action. No description. */\n  size?: 'md' | 'sm'\n}\n\nwithDefaults(defineProps<EmptyStateProps>(), {\n  description: undefined,\n  icon: undefined,\n  tone: 'accent',\n  actionLabel: undefined,\n  actionIcon: 'plus',\n  headingLevel: 2,\n  size: 'md'\n})\n\ndefineEmits<{ action: [] }>()\n</script>\n\n<template>\n  <div v-if=\"size === 'sm'\" class=\"flex flex-col items-center justify-center gap-2 px-4 py-5 text-center\">\n    <Icon v-if=\"icon\" class=\"size-4\" color=\"ink-muted\" :name=\"icon\" />\n    <p class=\"m-0 max-w-full text-13 leading-5 text-sui-ink-muted\">{{ title }}</p>\n    <slot name=\"action\">\n      <Button v-if=\"actionLabel\" class=\"mt-1\" size=\"sm\" variant=\"secondary\" @click=\"$emit('action')\">\n        <Icon v-if=\"actionIcon\" :name=\"actionIcon\" />\n        {{ actionLabel }}\n      </Button>\n    </slot>\n  </div>\n  <div v-else class=\"flex flex-col items-center justify-center px-6 py-16 text-center\">\n    <div\n      v-if=\"icon\"\n      aria-hidden=\"true\"\n      class=\"mb-4 flex size-12 items-center justify-center rounded-xl ring-1 ring-inset\"\n      :class=\"tone === 'accent' ? 'bg-sui-accent-wash ring-sui-accent-line' : 'bg-sui-sunken ring-sui-line-subtle'\"\n    >\n      <Icon class=\"size-6\" :color=\"tone === 'accent' ? 'accent' : 'ink-muted'\" :name=\"icon\" />\n    </div>\n    <component :is=\"`h${headingLevel}`\" class=\"m-0 mb-1.5 text-base font-semibold text-sui-ink\">{{ title }}</component>\n    <div class=\"max-w-xs text-sm leading-relaxed text-sui-ink-muted\">\n      <slot name=\"description\">{{ description }}</slot>\n    </div>\n    <slot name=\"action\">\n      <Button v-if=\"actionLabel\" class=\"mt-4\" variant=\"primary\" @click=\"$emit('action')\">\n        <Icon v-if=\"actionIcon\" :name=\"actionIcon\" />\n        {{ actionLabel }}\n      </Button>\n    </slot>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/EmptyState/EmptyState.vue.d.ts

@@ -11,18 +11,24 @@ export interface EmptyStateProps {
     actionIcon?: string;
     /** The title's heading level, to fit the page's outline. */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** sm, for an empty card in settings or a tray: an optional 16px icon, the title as one muted line of text (not a
+     *  heading), a small secondary action. No description. */
+    size?: 'md' | 'sm';
 }
-declare var __VLS_12: {}, __VLS_14: {};
+declare var __VLS_6: {}, __VLS_32: {}, __VLS_34: {};
 type __VLS_Slots = {} & {
-    description?: (props: typeof __VLS_12) => any;
+    action?: (props: typeof __VLS_6) => any;
 } & {
-    action?: (props: typeof __VLS_14) => any;
+    description?: (props: typeof __VLS_32) => any;
+} & {
+    action?: (props: typeof __VLS_34) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<EmptyStateProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     action: () => any;
 }, string, import("vue").PublicProps, Readonly<EmptyStateProps> & Readonly<{
     onAction?: (() => any) | undefined;
 }>, {
+    size: "sm" | "md";
     icon: string;
     tone: "accent" | "neutral";
     headingLevel: 1 | 2 | 3 | 4 | 5 | 6;

package/dist/components/EmptyState/EmptyState.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,13 @@ import e from "../Button/Button.js";
 import t from "../Icon/Icon.js";
 import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, withCtx as m } from "vue";
 //#region src/components/EmptyState/EmptyState.vue?vue&type=script&setup=true&lang.ts
-var h = { class: "flex flex-col items-center justify-center px-6 py-16 text-center" }, g = { class: "max-w-xs text-sm leading-relaxed text-sui-ink-muted" }, _ = /*@__PURE__*/ c({
+var h = {
+	key: 0,
+	class: "flex flex-col items-center justify-center gap-2 px-4 py-5 text-center"
+}, g = { class: "m-0 max-w-full text-13 leading-5 text-sui-ink-muted" }, _ = {
+	key: 1,
+	class: "flex flex-col items-center justify-center px-6 py-16 text-center"
+}, v = { class: "max-w-xs text-sm leading-relaxed text-sui-ink-muted" }, y = /*@__PURE__*/ c({
 	__name: "EmptyState",
 	props: {
 		title: {},
@@ -11,11 +17,33 @@ var h = { class: "flex flex-col items-center justify-center px-6 py-16 text-cent
 		tone: { default: "accent" },
 		actionLabel: { default: void 0 },
 		actionIcon: { default: "plus" },
-		headingLevel: { default: 2 }
+		headingLevel: { default: 2 },
+		size: { default: "md" }
 	},
 	emits: ["action"],
 	setup(c) {
-		return (_, v) => (u(), i("div", h, [
+		return (y, b) => c.size === "sm" ? (u(), i("div", h, [
+			c.icon ? (u(), n(t, {
+				key: 0,
+				class: "size-4",
+				color: "ink-muted",
+				name: c.icon
+			}, null, 8, ["name"])) : r("", !0),
+			a("p", g, p(c.title), 1),
+			d(y.$slots, "action", {}, () => [c.actionLabel ? (u(), n(e, {
+				key: 0,
+				class: "mt-1",
+				size: "sm",
+				variant: "secondary",
+				onClick: b[0] ||= (e) => y.$emit("action")
+			}, {
+				default: m(() => [c.actionIcon ? (u(), n(t, {
+					key: 0,
+					name: c.actionIcon
+				}, null, 8, ["name"])) : r("", !0), o(" " + p(c.actionLabel), 1)]),
+				_: 1
+			})) : r("", !0)])
+		])) : (u(), i("div", _, [
 			c.icon ? (u(), i("div", {
 				key: 0,
 				"aria-hidden": "true",
@@ -29,12 +57,12 @@ var h = { class: "flex flex-col items-center justify-center px-6 py-16 text-cent
 				default: m(() => [o(p(c.title), 1)]),
 				_: 1
 			})),
-			a("div", g, [d(_.$slots, "description", {}, () => [o(p(c.description), 1)])]),
-			d(_.$slots, "action", {}, () => [c.actionLabel ? (u(), n(e, {
+			a("div", v, [d(y.$slots, "description", {}, () => [o(p(c.description), 1)])]),
+			d(y.$slots, "action", {}, () => [c.actionLabel ? (u(), n(e, {
 				key: 0,
 				class: "mt-4",
 				variant: "primary",
-				onClick: v[0] ||= (e) => _.$emit("action")
+				onClick: b[1] ||= (e) => y.$emit("action")
 			}, {
 				default: m(() => [c.actionIcon ? (u(), n(t, {
 					key: 0,
@@ -46,6 +74,6 @@ var h = { class: "flex flex-col items-center justify-center px-6 py-16 text-cent
 	}
 });
 //#endregion
-export { _ as default };
+export { y as default };
 
 //# sourceMappingURL=EmptyState.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/EmptyState/EmptyState.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createElementBlock","_normalizeClass","_createVNode","Icon","_createCommentVNode","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_createElementVNode","_renderSlot","Button","Button_default","Icon_default","_hoisted_1","_hoisted_2","EmptyState_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","__props","normalizeClass","createVNode","createCommentVNode","createBlock","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","createElementVNode","renderSlot","_ctx","_cache"],"sources":["../../../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\n\nexport interface EmptyStateProps {\n  title: string\n  /** Plain text; for anything richer, use the `description` slot. */\n  description?: string\n  /** What the list holds, as an icon name (users, inbox, search for no matches), in a tile above the title. Decorative. */\n  icon?: string\n  /** `accent` for a list waiting to be filled; `neutral` for no matches or a filtered view. */\n  tone?: 'accent' | 'neutral'\n  /** Shows a primary button with this label, which emits `action`. Or put your own in the `action` slot. */\n  actionLabel?: string\n  actionIcon?: string\n  /** The title's heading level, to fit the page's outline. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n}\n\nwithDefaults(defineProps<EmptyStateProps>(), {\n  description: undefined,\n  icon: undefined,\n  tone: 'accent',\n  actionLabel: undefined,\n  actionIcon: 'plus',\n  headingLevel: 2\n})\n\ndefineEmits<{ action: [] }>()\n</script>\n\n<template>\n  <div class=\"flex flex-col items-center justify-center px-6 py-16 text-center\">\n    <div\n      v-if=\"icon\"\n      aria-hidden=\"true\"\n      class=\"mb-4 flex size-12 items-center justify-center rounded-xl ring-1 ring-inset\"\n      :class=\"tone === 'accent' ? 'bg-sui-accent-wash ring-sui-accent-line' : 'bg-sui-sunken ring-sui-line-subtle'\"\n    >\n      <Icon class=\"size-6\" :color=\"tone === 'accent' ? 'accent' : 'ink-muted'\" :name=\"icon\" />\n    </div>\n    <component :is=\"`h${headingLevel}`\" class=\"m-0 mb-1.5 text-base font-semibold text-sui-ink\">{{ title }}</component>\n    <div class=\"max-w-xs text-sm leading-relaxed text-sui-ink-muted\">\n      <slot name=\"description\">{{ description }}</slot>\n    </div>\n    <slot name=\"action\">\n      <Button v-if=\"actionLabel\" class=\"mt-4\" variant=\"primary\" @click=\"$emit('action')\">\n        <Icon v-if=\"actionIcon\" :name=\"actionIcon\" />\n        {{ actionLabel }}\n      </Button>\n    </slot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;E,kBAgCEC,EAAA,GAAAC,EAmBM,OAnBNe,GAmBM;GAjBIK,EAAA,QADRrB,EAAA,GAAAC,EAOM,OAAA;;IALJ,eAAY;IACZ,OAAKC,EAAA,CAAC,8EACEmB,EAAA,SAAI,WAAA,4CAAA,oCAAA,CAAA;G,IAEZlB,EAAwFC,GAAA;IAAlF,OAAM;IAAU,OAAOiB,EAAA,SAAI,WAAA,WAAA;IAAyC,MAAMA,EAAA;;IAElFrB,EAAA,GAAAM,EAAmHC,EAAA,IAA/Fc,EAAA,cAAY,GAAA,EAAI,OAAM,kDAAiD,GAAA;IAAC,SAAAb,QAAW,CAARC,EAAAC,EAAAW,EAAA,KAAK,GAAA,CAAA,C;;;GACpGV,EAEM,OAFNM,GAEM,CADJL,EAAiDoB,EAAA,QAAA,eAAA,CAAA,SAAA,CAArBvB,EAAAC,EAAAW,EAAA,WAAW,GAAA,CAAA,C;GAEzCT,EAKOoB,EAAA,QAAA,UAAA,CAAA,SAAA,CAJSX,EAAA,eAAdrB,EAAA,GAAAM,EAGSO,GAAA;;IAHkB,OAAM;IAAO,SAAQ;IAAW,SAAK,AAAAoB,EAAA,QAAA,MAAElC,EAAAA,MAAK,QAAA;;IACrE,SAAAS,QAA6C,CAAjCa,EAAA,cAAZrB,EAAA,GAAAM,EAA6CF,GAAA;;KAApB,MAAMiB,EAAA;I,oCAAcZ,EAAA,MAC7CC,EAAGW,EAAA,WAAW,GAAA,CAAA,C"}
+{"version":3,"file":"EmptyState.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createElementBlock","_createBlock","Icon","_createCommentVNode","_createElementVNode","_toDisplayString","_renderSlot","Button","_withCtx","_createTextVNode","_normalizeClass","_createVNode","_resolveDynamicComponent","Button_default","Icon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EmptyState_vue_vue_type_script_setup_true_lang_default","__props","openBlock","createElementBlock","createBlock","createCommentVNode","createElementVNode","toDisplayString","renderSlot","_ctx","_cache","withCtx","createTextVNode","normalizeClass","createVNode","resolveDynamicComponent"],"sources":["../../../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\n\nexport interface EmptyStateProps {\n  title: string\n  /** Plain text; for anything richer, use the `description` slot. */\n  description?: string\n  /** What the list holds, as an icon name (users, inbox, search for no matches), in a tile above the title. Decorative. */\n  icon?: string\n  /** `accent` for a list waiting to be filled; `neutral` for no matches or a filtered view. */\n  tone?: 'accent' | 'neutral'\n  /** Shows a primary button with this label, which emits `action`. Or put your own in the `action` slot. */\n  actionLabel?: string\n  actionIcon?: string\n  /** The title's heading level, to fit the page's outline. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  /** sm, for an empty card in settings or a tray: an optional 16px icon, the title as one muted line of text (not a\n   *  heading), a small secondary action. No description. */\n  size?: 'md' | 'sm'\n}\n\nwithDefaults(defineProps<EmptyStateProps>(), {\n  description: undefined,\n  icon: undefined,\n  tone: 'accent',\n  actionLabel: undefined,\n  actionIcon: 'plus',\n  headingLevel: 2,\n  size: 'md'\n})\n\ndefineEmits<{ action: [] }>()\n</script>\n\n<template>\n  <div v-if=\"size === 'sm'\" class=\"flex flex-col items-center justify-center gap-2 px-4 py-5 text-center\">\n    <Icon v-if=\"icon\" class=\"size-4\" color=\"ink-muted\" :name=\"icon\" />\n    <p class=\"m-0 max-w-full text-13 leading-5 text-sui-ink-muted\">{{ title }}</p>\n    <slot name=\"action\">\n      <Button v-if=\"actionLabel\" class=\"mt-1\" size=\"sm\" variant=\"secondary\" @click=\"$emit('action')\">\n        <Icon v-if=\"actionIcon\" :name=\"actionIcon\" />\n        {{ actionLabel }}\n      </Button>\n    </slot>\n  </div>\n  <div v-else class=\"flex flex-col items-center justify-center px-6 py-16 text-center\">\n    <div\n      v-if=\"icon\"\n      aria-hidden=\"true\"\n      class=\"mb-4 flex size-12 items-center justify-center rounded-xl ring-1 ring-inset\"\n      :class=\"tone === 'accent' ? 'bg-sui-accent-wash ring-sui-accent-line' : 'bg-sui-sunken ring-sui-line-subtle'\"\n    >\n      <Icon class=\"size-6\" :color=\"tone === 'accent' ? 'accent' : 'ink-muted'\" :name=\"icon\" />\n    </div>\n    <component :is=\"`h${headingLevel}`\" class=\"m-0 mb-1.5 text-base font-semibold text-sui-ink\">{{ title }}</component>\n    <div class=\"max-w-xs text-sm leading-relaxed text-sui-ink-muted\">\n      <slot name=\"description\">{{ description }}</slot>\n    </div>\n    <slot name=\"action\">\n      <Button v-if=\"actionLabel\" class=\"mt-4\" variant=\"primary\" @click=\"$emit('action')\">\n        <Icon v-if=\"actionIcon\" :name=\"actionIcon\" />\n        {{ actionLabel }}\n      </Button>\n    </slot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;E,iBAoCasB,EAAA,SAAI,QAAfrB,EAAA,GAAAC,EASM,OATNe,GASM;GARQK,EAAA,QAAZrB,EAAA,GAAAE,EAAkEC,GAAA;;IAAhD,OAAM;IAAS,OAAM;IAAa,MAAMkB,EAAA;;GAC1DhB,EAA8E,KAA9EY,GAA8EX,EAAZe,EAAA,KAAK,GAAA,CAAA;GACvEd,EAKOsB,EAAA,QAAA,UAAA,CAAA,SAAA,CAJSR,EAAA,eAAdrB,EAAA,GAAAE,EAGSM,GAAA;;IAHkB,OAAM;IAAO,MAAK;IAAK,SAAQ;IAAa,SAAK,AAAAsB,EAAA,QAAA,MAAE/B,EAAAA,MAAK,QAAA;;IACjF,SAAAU,QAA6C,CAAjCY,EAAA,cAAZrB,EAAA,GAAAE,EAA6CC,GAAA;;KAApB,MAAMkB,EAAA;I,oCAAcX,EAAA,MAC7CJ,EAAGe,EAAA,WAAW,GAAA,CAAA,C;;;E,OAIpBrB,EAAA,GAAAC,EAmBM,OAnBNiB,GAmBM;GAjBIG,EAAA,QADRrB,EAAA,GAAAC,EAOM,OAAA;;IALJ,eAAY;IACZ,OAAKU,EAAA,CAAC,8EACEU,EAAA,SAAI,WAAA,4CAAA,oCAAA,CAAA;G,IAEZT,EAAwFT,GAAA;IAAlF,OAAM;IAAU,OAAOkB,EAAA,SAAI,WAAA,WAAA;IAAyC,MAAMA,EAAA;;IAElFrB,EAAA,GAAAE,EAAmHW,EAAA,IAA/FQ,EAAA,cAAY,GAAA,EAAI,OAAM,kDAAiD,GAAA;IAAC,SAAAZ,QAAW,CAARC,EAAAJ,EAAAe,EAAA,KAAK,GAAA,CAAA,C;;;GACpGhB,EAEM,OAFNc,GAEM,CADJZ,EAAiDsB,EAAA,QAAA,eAAA,CAAA,SAAA,CAArBnB,EAAAJ,EAAAe,EAAA,WAAW,GAAA,CAAA,C;GAEzCd,EAKOsB,EAAA,QAAA,UAAA,CAAA,SAAA,CAJSR,EAAA,eAAdrB,EAAA,GAAAE,EAGSM,GAAA;;IAHkB,OAAM;IAAO,SAAQ;IAAW,SAAK,AAAAsB,EAAA,QAAA,MAAE/B,EAAAA,MAAK,QAAA;;IACrE,SAAAU,QAA6C,CAAjCY,EAAA,cAAZrB,EAAA,GAAAE,EAA6CC,GAAA;;KAApB,MAAMkB,EAAA;I,oCAAcX,EAAA,MAC7CJ,EAAGe,EAAA,WAAW,GAAA,CAAA,C"}

package/dist/components/Filters/FilterMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterMenu.js","names":["_sfc_main","FilterMenu_vue_vue_type_script_setup_true_lang_default","FilterMenu_default"],"sources":["../../../src/components/Filters/FilterMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\n\nimport {\n  ListboxContent,\n  ListboxFilter,\n  ListboxGroup,\n  ListboxGroupLabel,\n  ListboxItem,\n  ListboxRoot,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger\n} from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport FilterFrame from './FilterFrame.vue'\nimport FilterGlyph from './FilterGlyph.vue'\nimport type { FilterField } from './types'\n\nexport interface FilterMenuProps {\n  fields: FilterField[]\n  /** Fields already filtering, marked \"In use\"; picking one should open its chip, not add a second. */\n  inUse?: string[]\n  /** chip: the dashed \"+ Filter\" in the view bar. button: the page header's Filters button, tinted while filters are in use. */\n  as?: 'chip' | 'button'\n  /** The footer's status; \"{count} fields\" by default. */\n  status?: string\n  label?: string\n  buttonLabel?: string\n  searchPlaceholder?: string\n  inUseLabel?: string\n  addLabel?: string\n  closeLabel?: string\n  /** `{count}` is the number of fields. */\n  fieldsLabel?: string\n  /** `{query}` is what was typed. */\n  noMatchLabel?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FilterMenuProps>(), {\n  inUse: () => [],\n  as: 'chip',\n  status: undefined,\n  label: 'Filter',\n  buttonLabel: 'Filters',\n  searchPlaceholder: 'Filter by…',\n  inUseLabel: 'In use',\n  addLabel: 'Add',\n  closeLabel: 'Close',\n  fieldsLabel: '{count} fields',\n  noMatchLabel: 'No field matches “{query}”.'\n})\n\nconst emit = defineEmits<{ pick: [name: string] }>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst attrs = useAttrs()\nconst query = ref('')\n// Only the keyboard's highlight gets the focus ring; the pointer's is just a tint.\nconst keyboard = ref(false)\n\nconst groups = computed(() => {\n  const q = query.value.trim().toLowerCase()\n  const shown = props.fields.filter((f) => !q || f.label.toLowerCase().includes(q))\n  return [...new Set(shown.map((f) => f.group ?? ''))].map((name) => ({\n    name,\n    fields: shown.filter((f) => (f.group ?? '') === name)\n  }))\n})\n\nfunction pick(name: unknown) {\n  if (typeof name !== 'string') return\n  open.value = false\n  query.value = ''\n  emit('pick', name)\n}\n\nfunction onOpen(isOpen: boolean) {\n  if (!isOpen) query.value = ''\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) keyboard.value = true\n}\n</script>\n\n<!-- The field list behind \"+ Filter\": search, fields grouped with their type, and which are already filtering. -->\n<template>\n  <PopoverRoot v-model:open=\"open\" @update:open=\"onOpen\">\n    <PopoverTrigger v-if=\"as === 'button'\" as-child>\n      <Button v-bind=\"attrs\" :variant=\"inUse.length ? 'tinted' : 'secondary'\">\n        <svg\n          aria-hidden=\"true\"\n          class=\"size-4 fill-none stroke-current\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"1.5\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path d=\"M2.5 3.5h11l-4.25 5v4l-2.5 1v-5z\" />\n        </svg>\n        {{ buttonLabel }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverTrigger\n      v-else\n      v-bind=\"attrs\"\n      class=\"inline-flex h-7.5 items-center gap-1.5 rounded-lg border border-dashed border-sui-line-strong px-2 text-13 font-medium whitespace-nowrap text-sui-ink-muted outline-hidden transition-[border-color,box-shadow] duration-150 hover:border-sui-ink-muted hover:text-sui-ink-body focus-visible:sui-ring data-[state=open]:border-solid data-[state=open]:border-sui-accent-solid data-[state=open]:text-sui-accent data-[state=open]:shadow-[0_0_0_3px_rgb(var(--sui-focus-ring))]\"\n    >\n      <FilterGlyph name=\"plus\" />\n      {{ label }}\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent\n        align=\"start\"\n        class=\"z-[1100] w-85 max-w-[calc(100vw-2rem)] origin-(--reka-popover-content-transform-origin) rounded-xl border border-sui-line bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-overlay-in\"\n        :side-offset=\"8\"\n        @keydown=\"onKeydown\"\n        @pointermove=\"keyboard = false\"\n      >\n        <ListboxRoot highlight-on-hover @update:model-value=\"pick\">\n          <FilterFrame\n            :close-label=\"closeLabel\"\n            :enter-label=\"addLabel\"\n            :status=\"status ?? fieldsLabel.replace('{count}', String(fields.length))\"\n          >\n            <div class=\"flex h-11 items-center gap-2 border-b border-sui-line-subtle px-3.5 text-sui-ink-muted\">\n              <FilterGlyph class=\"size-4\" name=\"search\" />\n              <ListboxFilter\n                v-model=\"query\"\n                :aria-label=\"searchPlaceholder\"\n                auto-focus\n                class=\"h-full min-w-0 flex-1 border-none bg-transparent p-0 text-sm text-sui-ink shadow-none outline-hidden placeholder:text-sui-ink-faint focus:border-none focus:shadow-none focus:ring-0 focus:outline-hidden\"\n                :placeholder=\"searchPlaceholder\"\n              />\n            </div>\n            <ListboxContent\n              :aria-label=\"searchPlaceholder\"\n              class=\"group/list max-h-64 overflow-auto px-1.5 pt-1 pb-1.5 outline-hidden\"\n              :data-keyboard=\"keyboard || undefined\"\n            >\n              <ListboxGroup v-for=\"group in groups\" :key=\"group.name\">\n                <ListboxGroupLabel\n                  v-if=\"group.name\"\n                  class=\"m-0 px-2 pt-2.5 pb-1 text-11 font-semibold tracking-caps text-sui-ink-muted uppercase\"\n                >\n                  {{ group.name }}\n                </ListboxGroupLabel>\n                <ListboxItem\n                  v-for=\"field in group.fields\"\n                  :key=\"field.name\"\n                  class=\"flex min-h-8 cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1 text-13.5 text-sui-ink outline-hidden select-none data-highlighted:bg-sui-sunken group-data-keyboard/list:data-highlighted:sui-ring-inset\"\n                  :value=\"field.name\"\n                >\n                  <span\n                    class=\"flex size-6 shrink-0 items-center justify-center rounded-md bg-sui-sunken text-sui-ink-body\"\n                  >\n                    <FilterGlyph :name=\"field.type\" />\n                  </span>\n                  <span class=\"min-w-0 flex-1 truncate\">{{ field.label }}</span>\n                  <span\n                    v-if=\"inUse.includes(field.name)\"\n                    class=\"inline-flex items-center gap-1.5 text-xs font-medium text-sui-accent\"\n                  >\n                    <span class=\"size-1.5 rounded-full bg-sui-accent-solid\" />\n                    {{ inUseLabel }}\n                  </span>\n                </ListboxItem>\n              </ListboxGroup>\n              <p v-if=\"!groups.length\" class=\"m-0 px-2 py-3 text-13 text-sui-ink-body\">\n                {{ noMatchLabel.replace('{query}', query) }}\n              </p>\n            </ListboxContent>\n          </FilterFrame>\n        </ListboxRoot>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"FilterMenu.js","names":["_sfc_main","FilterMenu_vue_vue_type_script_setup_true_lang_default","FilterMenu_default"],"sources":["../../../src/components/Filters/FilterMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\n\nimport {\n  ListboxContent,\n  ListboxFilter,\n  ListboxGroup,\n  ListboxGroupLabel,\n  ListboxItem,\n  ListboxRoot,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger\n} from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport FilterFrame from './FilterFrame.vue'\nimport FilterGlyph from './FilterGlyph.vue'\nimport { type FilterTriggerProps, useCustomTrigger } from './trigger'\nimport type { FilterField } from './types'\n\nexport interface FilterMenuProps {\n  fields: FilterField[]\n  /** Fields already filtering, marked \"In use\"; picking one should open its chip, not add a second. */\n  inUse?: string[]\n  /** chip: the dashed \"+ Filter\" in the view bar. button: the page header's Filters button, tinted while filters are in use. */\n  as?: 'chip' | 'button'\n  /** as=\"button\" only: ghost for a page header. Secondary by default, tinted while filters are in use. */\n  variant?: 'secondary' | 'ghost' | 'tinted'\n  /** The footer's status; \"{count} fields\" by default. */\n  status?: string\n  label?: string\n  buttonLabel?: string\n  searchPlaceholder?: string\n  inUseLabel?: string\n  addLabel?: string\n  closeLabel?: string\n  /** `{count}` is the number of fields. */\n  fieldsLabel?: string\n  /** `{query}` is what was typed. */\n  noMatchLabel?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FilterMenuProps>(), {\n  inUse: () => [],\n  as: 'chip',\n  variant: undefined,\n  status: undefined,\n  label: 'Filter',\n  buttonLabel: 'Filters',\n  searchPlaceholder: 'Filter by…',\n  inUseLabel: 'In use',\n  addLabel: 'Add',\n  closeLabel: 'Close',\n  fieldsLabel: '{count} fields',\n  noMatchLabel: 'No field matches “{query}”.'\n})\n\nconst emit = defineEmits<{ pick: [name: string] }>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** Your own opener in place of the chip or button: spread `props` on it. `count` is the filters in use. */\n  trigger?: (props: { open: boolean; toggle: () => void; count: number; props: FilterTriggerProps }) => unknown\n}>()\n\nconst attrs = useAttrs()\nconst custom = useCustomTrigger(open)\nconst query = ref('')\n// Only the keyboard's highlight gets the focus ring; the pointer's is just a tint.\nconst keyboard = ref(false)\n\nconst groups = computed(() => {\n  const q = query.value.trim().toLowerCase()\n  const shown = props.fields.filter((f) => !q || f.label.toLowerCase().includes(q))\n  return [...new Set(shown.map((f) => f.group ?? ''))].map((name) => ({\n    name,\n    fields: shown.filter((f) => (f.group ?? '') === name)\n  }))\n})\n\nfunction pick(name: unknown) {\n  if (typeof name !== 'string') return\n  open.value = false\n  query.value = ''\n  emit('pick', name)\n}\n\nfunction onOpen(isOpen: boolean) {\n  if (!isOpen) query.value = ''\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) keyboard.value = true\n}\n</script>\n\n<!-- The field list behind \"+ Filter\": search, fields grouped with their type, and which are already filtering. -->\n<template>\n  <PopoverRoot v-model:open=\"open\" @update:open=\"onOpen\">\n    <PopoverAnchor v-if=\"$slots.trigger\" as-child>\n      <slot :count=\"inUse.length\" name=\"trigger\" :open=\"open\" :props=\"custom.props.value\" :toggle=\"custom.toggle\" />\n    </PopoverAnchor>\n    <PopoverTrigger v-else-if=\"as === 'button'\" as-child>\n      <Button v-bind=\"attrs\" :variant=\"variant ?? (inUse.length ? 'tinted' : 'secondary')\">\n        <svg\n          aria-hidden=\"true\"\n          class=\"size-4 fill-none stroke-current\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"1.5\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path d=\"M2.5 3.5h11l-4.25 5v4l-2.5 1v-5z\" />\n        </svg>\n        {{ buttonLabel }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverTrigger\n      v-else\n      v-bind=\"attrs\"\n      class=\"inline-flex h-7.5 items-center gap-1.5 rounded-lg border border-dashed border-sui-line-strong px-2 text-13 font-medium whitespace-nowrap text-sui-ink-muted outline-hidden transition-[border-color,box-shadow] duration-150 hover:border-sui-ink-muted hover:text-sui-ink-body focus-visible:sui-ring data-[state=open]:border-solid data-[state=open]:border-sui-accent-solid data-[state=open]:text-sui-accent data-[state=open]:shadow-[0_0_0_3px_rgb(var(--sui-focus-ring))]\"\n    >\n      <FilterGlyph name=\"plus\" />\n      {{ label }}\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent\n        align=\"start\"\n        :aria-label=\"$slots.trigger ? searchPlaceholder : undefined\"\n        class=\"z-[1100] w-85 max-w-[calc(100vw-2rem)] origin-(--reka-popover-content-transform-origin) rounded-xl border border-sui-line bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-overlay-in\"\n        :data-sui-panel=\"custom.panelKey\"\n        :side-offset=\"8\"\n        @close-auto-focus=\"custom.returnFocus\"\n        @interact-outside=\"custom.ignoreTrigger\"\n        @keydown=\"onKeydown\"\n        @pointermove=\"keyboard = false\"\n      >\n        <ListboxRoot highlight-on-hover @update:model-value=\"pick\">\n          <FilterFrame\n            :close-label=\"closeLabel\"\n            :enter-label=\"addLabel\"\n            :status=\"status ?? fieldsLabel.replace('{count}', String(fields.length))\"\n          >\n            <div class=\"flex h-11 items-center gap-2 border-b border-sui-line-subtle px-3.5 text-sui-ink-muted\">\n              <FilterGlyph class=\"size-4\" name=\"search\" />\n              <ListboxFilter\n                v-model=\"query\"\n                :aria-label=\"searchPlaceholder\"\n                auto-focus\n                class=\"h-full min-w-0 flex-1 border-none bg-transparent p-0 text-sm text-sui-ink shadow-none outline-hidden placeholder:text-sui-ink-faint focus:border-none focus:shadow-none focus:ring-0 focus:outline-hidden\"\n                :placeholder=\"searchPlaceholder\"\n              />\n            </div>\n            <ListboxContent\n              :aria-label=\"searchPlaceholder\"\n              class=\"group/list max-h-64 overflow-auto px-1.5 pt-1 pb-1.5 outline-hidden\"\n              :data-keyboard=\"keyboard || undefined\"\n            >\n              <ListboxGroup v-for=\"group in groups\" :key=\"group.name\">\n                <ListboxGroupLabel\n                  v-if=\"group.name\"\n                  class=\"m-0 px-2 pt-2.5 pb-1 text-11 font-semibold tracking-caps text-sui-ink-muted uppercase\"\n                >\n                  {{ group.name }}\n                </ListboxGroupLabel>\n                <ListboxItem\n                  v-for=\"field in group.fields\"\n                  :key=\"field.name\"\n                  class=\"flex min-h-8 cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1 text-13.5 text-sui-ink outline-hidden select-none data-highlighted:bg-sui-sunken group-data-keyboard/list:data-highlighted:sui-ring-inset\"\n                  :value=\"field.name\"\n                >\n                  <span\n                    class=\"flex size-6 shrink-0 items-center justify-center rounded-md bg-sui-sunken text-sui-ink-body\"\n                  >\n                    <FilterGlyph :name=\"field.type\" />\n                  </span>\n                  <span class=\"min-w-0 flex-1 truncate\">{{ field.label }}</span>\n                  <span\n                    v-if=\"inUse.includes(field.name)\"\n                    class=\"inline-flex items-center gap-1.5 text-xs font-medium text-sui-accent\"\n                  >\n                    <span class=\"size-1.5 rounded-full bg-sui-accent-solid\" />\n                    {{ inUseLabel }}\n                  </span>\n                </ListboxItem>\n              </ListboxGroup>\n              <p v-if=\"!groups.length\" class=\"m-0 px-2 py-3 text-13 text-sui-ink-body\">\n                {{ noMatchLabel.replace('{query}', query) }}\n              </p>\n            </ListboxContent>\n          </FilterFrame>\n        </ListboxRoot>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":""}

package/dist/components/Filters/FilterMenu.vue.d.ts

@@ -1,3 +1,4 @@
+import { type FilterTriggerProps } from './trigger';
 import type { FilterField } from './types';
 export interface FilterMenuProps {
     fields: FilterField[];
@@ -5,6 +6,8 @@ export interface FilterMenuProps {
     inUse?: string[];
     /** chip: the dashed "+ Filter" in the view bar. button: the page header's Filters button, tinted while filters are in use. */
     as?: 'chip' | 'button';
+    /** as="button" only: ghost for a page header. Secondary by default, tinted while filters are in use. */
+    variant?: 'secondary' | 'ghost' | 'tinted';
     /** The footer's status; "{count} fields" by default. */
     status?: string;
     label?: string;
@@ -19,17 +22,27 @@ export interface FilterMenuProps {
     noMatchLabel?: string;
 }
 type __VLS_Props = FilterMenuProps;
+type __VLS_Slots = {
+    /** Your own opener in place of the chip or button: spread `props` on it. `count` is the filters in use. */
+    trigger?: (props: {
+        open: boolean;
+        toggle: () => void;
+        count: number;
+        props: FilterTriggerProps;
+    }) => unknown;
+};
 type __VLS_ModelProps = {
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     pick: (name: string) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onPick?: ((name: string) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    variant: "secondary" | "tinted" | "ghost";
     as: "button" | "chip";
     label: string;
     closeLabel: string;
@@ -42,5 +55,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     fieldsLabel: string;
     noMatchLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};