ropav 0.2.0 → 0.3.0

package/dist/modal.js

@@ -1,333 +0,0 @@
-import './modal.css';
-import { t as useControllableValue } from "./useControllableValue.js";
-import { t as useStylesApi } from "./styles-api.js";
-import { t as bem } from "./bem.js";
-import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { t as x_default } from "./x.js";
-import { t as scroll_area_default } from "./scroll-area.js";
-import { a as dialog_overlay_default, c as dialog_close_default, i as dialog_portal_default, l as resolveDialogCloseReason, n as dialog_title_default, o as dialog_description_default, r as dialog_root_default, s as dialog_content_default } from "./dialog.js";
-import { t as icon_button_default } from "./icon-button.js";
-import { t as overlay_default } from "./overlay.js";
-import { VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, mergeProps, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
-//#region src/components/modal/useModal.ts
-var DEFAULT_ROLE = "dialog";
-var DEFAULT_SIZE = "md";
-var MODAL_PRESET_SIZES = /* @__PURE__ */ new Set([
-	"sm",
-	"md",
-	"lg",
-	"xl",
-	"full"
-]);
-function isModalPresetSize(size) {
-	return MODAL_PRESET_SIZES.has(size);
-}
-function useModal(props, emit = {}) {
-	const slots = useSlots();
-	const generatedId = useId();
-	const controllableOpen = useControllableValue({
-		modelValue: () => props.open,
-		defaultValue: () => false,
-		onChange: (open) => emit.openChange?.(open)
-	});
-	const modalId = computed(() => props.id ?? `${generatedId}-modal`);
-	const titleId = computed(() => `${modalId.value}-title`);
-	const descriptionId = computed(() => `${modalId.value}-description`);
-	const role = computed(() => props.role ?? DEFAULT_ROLE);
-	const size = computed(() => props.size || DEFAULT_SIZE);
-	const isPresetSize = computed(() => isModalPresetSize(size.value));
-	const isOpen = controllableOpen.value;
-	const shouldRender = computed(() => Boolean(props.keepMounted || isOpen.value));
-	const hasCustomHeader = computed(() => Boolean(slots.header));
-	const hasHeader = computed(() => Boolean(hasCustomHeader.value || props.title || props.description));
-	const hasFooter = computed(() => Boolean(slots.footer));
-	const showCloseButton = computed(() => props.showCloseButton);
-	const headerId = computed(() => hasCustomHeader.value && !props.ariaLabel ? titleId.value : void 0);
-	const ariaLabelledby = computed(() => {
-		if (props.ariaLabel) return void 0;
-		return hasCustomHeader.value || props.title ? titleId.value : void 0;
-	});
-	const ariaDescribedby = computed(() => props.description && !hasCustomHeader.value ? descriptionId.value : void 0);
-	const ariaLabel = computed(() => ariaLabelledby.value ? void 0 : props.ariaLabel || void 0);
-	const rootClass = computed(() => bem("rp-modal", {
-		[`size-${size.value}`]: isPresetSize.value,
-		"size-custom": !isPresetSize.value,
-		open: isOpen.value
-	}));
-	const rootStyle = computed(() => {
-		if (isPresetSize.value) return void 0;
-		return { "--_rp-modal-width": size.value };
-	});
-	const stateClass = computed(() => ({
-		"rp-modal--closable": showCloseButton.value,
-		"rp-modal--headerless": !hasHeader.value
-	}));
-	const slotProps = computed(() => ({
-		isOpen: isOpen.value,
-		open: openModal,
-		close: closeModal,
-		toggle: toggleModal
-	}));
-	function setOpen(nextOpen) {
-		if (nextOpen === isOpen.value) return;
-		controllableOpen.setValue(nextOpen);
-	}
-	function openModal() {
-		setOpen(true);
-	}
-	function closeModal(reason = "programmatic") {
-		if (!isOpen.value) return;
-		setOpen(false);
-		emit.close?.(resolveDialogCloseReason(reason));
-	}
-	function toggleModal() {
-		if (isOpen.value) closeModal("programmatic");
-		else openModal();
-	}
-	return {
-		modalId,
-		titleId,
-		descriptionId,
-		role,
-		isOpen,
-		shouldRender,
-		hasHeader,
-		hasFooter,
-		showCloseButton,
-		headerId,
-		ariaLabelledby,
-		ariaDescribedby,
-		ariaLabel,
-		rootClass,
-		rootStyle,
-		stateClass,
-		slotProps,
-		openModal,
-		closeModal,
-		toggleModal,
-		setOpen
-	};
-}
-//#endregion
-//#region src/components/modal/modal.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template(" ");
-var t1 = template("<div data-v-bb0b8ca8 class=rp-modal__heading>");
-var t2 = template("<div data-v-bb0b8ca8>");
-//#endregion
-//#region src/components/modal/modal.vue
-var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
-	name: "RpModal",
-	inheritAttrs: false,
-	__name: "modal",
-	props: {
-		id: {},
-		open: {
-			type: Boolean,
-			default: void 0
-		},
-		baseZIndex: {},
-		title: { default: "" },
-		description: { default: "" },
-		ariaLabel: { default: "" },
-		closeLabel: { default: "Close modal" },
-		role: { default: "dialog" },
-		size: { default: "md" },
-		initialFocus: { default: null },
-		closeOnOverlayClick: {
-			type: Boolean,
-			default: true
-		},
-		closeOnEscape: {
-			type: Boolean,
-			default: true
-		},
-		showCloseButton: {
-			type: Boolean,
-			default: true
-		},
-		overlayProps: { default: () => ({}) },
-		preventScroll: {
-			type: Boolean,
-			default: true
-		},
-		returnFocus: {
-			type: Boolean,
-			default: true
-		},
-		keepMounted: {
-			type: Boolean,
-			default: false
-		},
-		modal: {
-			type: Boolean,
-			default: true
-		},
-		focusTrapOptions: { default: () => ({}) },
-		teleport: {
-			type: Boolean,
-			default: true
-		},
-		teleportTo: {},
-		classNames: {},
-		styles: {}
-	},
-	emits: ["update:open", "close"],
-	setup(__props, { emit: __emit, slots: $slots }) {
-		const props = __props;
-		const emit = __emit;
-		const { modalId, titleId, descriptionId, role, isOpen, shouldRender, hasHeader, hasFooter, showCloseButton, headerId, ariaLabelledby, ariaDescribedby, ariaLabel, rootClass, rootStyle, stateClass, slotProps, setOpen } = useModal(props, {
-			openChange: (open) => emit("update:open", open),
-			close: (reason) => emit("close", reason)
-		});
-		function onDialogClose(reason) {
-			emit("close", reason);
-		}
-		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
-		const state = computed(() => isOpen.value ? "open" : "closed");
-		const rootAttrs = computed(() => getRootAttrs({
-			class: [rootClass.value, stateClass.value],
-			style: rootStyle.value,
-			"data-state": state.value
-		}));
-		function getLayeredRootAttrs(zIndex) {
-			return mergeProps(rootAttrs.value, { style: { zIndex } });
-		}
-		const overlayClassNames = computed(() => ({ root: ["rp-modal__overlay", props.classNames?.overlay] }));
-		const overlayStyles = computed(() => ({ root: props.styles?.overlay }));
-		const panelAttrs = computed(() => ({
-			...getPartAttrs("panel", { class: "rp-modal__panel" }),
-			"data-state": state.value
-		}));
-		const closeClassNames = computed(() => ({ root: ["rp-modal__close", props.classNames?.close] }));
-		const closeStyles = computed(() => ({ root: props.styles?.close }));
-		return createComponent(unref(dialog_root_default), {
-			open: () => unref(isOpen),
-			"base-z-index": () => __props.baseZIndex,
-			modal: () => __props.modal,
-			"close-on-escape": () => __props.closeOnEscape,
-			"close-on-outside-click": () => __props.closeOnOverlayClick,
-			"prevent-scroll": () => __props.preventScroll,
-			"return-focus": () => __props.returnFocus,
-			"onUpdate:open": () => unref(setOpen),
-			onClose: () => onDialogClose
-		}, (_slotProps0) => {
-			return createComponent(unref(dialog_portal_default), {
-				teleport: () => __props.teleport,
-				"teleport-to": () => __props.teleportTo
-			}, () => {
-				return createComponent(VaporTransition, { name: "rp-modal" }, extend(() => {
-					return createIf(() => unref(shouldRender), () => {
-						const n30 = t2();
-						renderEffect(() => setDynamicProps(n30, [getLayeredRootAttrs(_slotProps0.zIndex)]));
-						setInsertionState(n30, null, 0);
-						createComponent(unref(dialog_overlay_default), {
-							as: () => overlay_default,
-							"force-mount": () => __props.keepMounted,
-							$: [() => __props.overlayProps, {
-								"class-names": () => overlayClassNames.value,
-								styles: () => overlayStyles.value,
-								"z-index": 0,
-								interactive: ""
-							}]
-						});
-						setInsertionState(n30, null, 1);
-						createComponent(unref(dialog_content_default), {
-							id: () => unref(modalId),
-							as: "section",
-							"force-mount": () => __props.keepMounted,
-							$: [() => panelAttrs.value, {
-								role: () => unref(role),
-								"aria-label": () => unref(ariaLabel),
-								"aria-labelledby": () => unref(ariaLabelledby),
-								"aria-describedby": () => unref(ariaDescribedby),
-								"initial-focus": () => __props.initialFocus,
-								"focus-trap-options": () => __props.focusTrapOptions
-							}]
-						}, extend(() => {
-							return [
-								createIf(() => unref(hasHeader), () => {
-									const n16 = t2();
-									renderEffect(() => setDynamicProps(n16, [{ id: unref(headerId) }, unref(getPartAttrs)("header", { class: "rp-modal__header" })]));
-									setInsertionState(n16, null, 0);
-									createSlot("header", { $: [() => unref(slotProps)] }, () => {
-										const n15 = t1();
-										setInsertionState(n15, null, 0);
-										createIf(() => __props.title, () => {
-											return createComponent(unref(dialog_title_default), {
-												id: () => unref(titleId),
-												as: "h2",
-												$: [() => unref(getPartAttrs)("title", { class: "rp-modal__title" })]
-											}, () => {
-												const n9 = t0();
-												renderEffect(() => setText(n9, toDisplayString(__props.title)));
-												return n9;
-											});
-										});
-										setInsertionState(n15, null, 1);
-										createIf(() => __props.description, () => {
-											return createComponent(unref(dialog_description_default), {
-												id: () => unref(descriptionId),
-												as: "p",
-												$: [() => unref(getPartAttrs)("description", { class: "rp-modal__description" })]
-											}, () => {
-												const n13 = t0();
-												renderEffect(() => setText(n13, toDisplayString(__props.description)));
-												return n13;
-											});
-										});
-										return n15;
-									}, 1);
-									return n16;
-								}, null, 129),
-								createIf(() => unref(showCloseButton), () => {
-									return createComponent(unref(dialog_close_default), {
-										as: () => icon_button_default,
-										"class-names": () => closeClassNames.value,
-										styles: () => closeStyles.value,
-										ariaLabel: () => __props.closeLabel,
-										variant: "ghost",
-										size: "sm"
-									}, () => {
-										return createComponent(unref(x_default));
-									});
-								}, null, 129),
-								createIf(() => $slots.default, () => {
-									return createComponent(scroll_area_default, { $: [() => unref(getPartAttrs)("body", { class: "rp-modal__body" }), {
-										embedded: "",
-										scrollbars: "y"
-									}] }, extend(() => {
-										return createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
-									}, { _: 8 }));
-								}, null, 129),
-								createIf(() => unref(hasFooter), () => {
-									const n28 = t2();
-									renderEffect(() => setDynamicProps(n28, [unref(getPartAttrs)("footer", { class: "rp-modal__footer" })]));
-									setInsertionState(n28, null, 0);
-									createSlot("footer", { $: [() => unref(slotProps)] }, null, 1);
-									return n28;
-								}, null, 129)
-							];
-						}, { _: 8 }));
-						applyVShow(n30, () => unref(isOpen));
-						return n30;
-					}, null, 129);
-				}, { _: 8 }));
-			});
-		}, true);
-	}
-}), [["__scopeId", "data-v-bb0b8ca8"]]);
-//#endregion
-//#region src/components/modal/types.ts
-var modalParts = [
-	"root",
-	"overlay",
-	"panel",
-	"header",
-	"title",
-	"description",
-	"body",
-	"footer",
-	"close"
-];
-//#endregion
-export { modal_default as n, modalParts as t };

package/dist/multi-select.css

@@ -1,316 +0,0 @@
-@layer ropav.components {
-.rp-multi-select[data-v-b38d027f] {
-    --_rp-multi-select-height: var(--rp-size-control-md);
-    --_rp-multi-select-padding-x: calc(var(--rp-size-control-md) / 3);
-    --_rp-multi-select-font-size: var(--rp-font-size-md);
-    --_rp-multi-select-option-min-height: calc(var(--rp-size-control-md) - var(--rp-spacing-4));
-    --_rp-multi-select-option-padding-y: var(--rp-spacing-1);
-    --_rp-multi-select-radius: var(--rp-radius-sm);
-    --_rp-multi-select-invalid-border: var(--rp-color-red-filled);
-    --_rp-multi-select-invalid-ring: color-mix(
-        in srgb,
-        var(--rp-color-red-filled) 32%,
-        transparent
-    );
-    --_rp-multi-select-option-highlighted-bg: var(--rp-color-default-hover);
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    box-sizing: border-box;
-    min-width: var(--rp-component-menu-min-width);
-    min-height: var(--_rp-multi-select-height);
-    padding: var(--rp-spacing-1) var(--_rp-multi-select-padding-x);
-    gap: var(--rp-spacing-2);
-    font-family: var(--rp-font-family);
-    font-size: var(--_rp-multi-select-font-size);
-    font-weight: var(--rp-font-weight-normal);
-    line-height: 1;
-    background-color: var(--rp-color-control-bg);
-    border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
-    border-radius: var(--_rp-multi-select-radius);
-    cursor: text;
-    transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
-}
-.rp-multi-select[data-v-b38d027f]:hover:not(.rp-multi-select--disabled):not(.rp-multi-select--invalid) {
-    border-color: var(--rp-color-control-border-hover);
-}
-.rp-multi-select[data-v-b38d027f]:focus-within:not(.rp-multi-select--disabled):not(.rp-multi-select--invalid), .rp-multi-select--open[data-v-b38d027f]:not(.rp-multi-select--disabled):not(.rp-multi-select--invalid) {
-    border-color: var(--rp-color-control-border-focus);
-    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
-}
-.rp-multi-select__native[data-v-b38d027f] {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-}
-.rp-multi-select--size-xs[data-v-b38d027f] {
-    --_rp-multi-select-height: var(--rp-size-control-xs);
-    --_rp-multi-select-padding-x: calc(var(--rp-size-control-xs) / 3);
-    --_rp-multi-select-font-size: var(--rp-font-size-xs);
-    --_rp-multi-select-option-min-height: calc(var(--rp-size-control-xs) - var(--rp-spacing-2));
-    --_rp-multi-select-option-padding-y: calc(var(--rp-spacing-1) / 2);
-}
-.rp-multi-select--size-sm[data-v-b38d027f] {
-    --_rp-multi-select-height: var(--rp-size-control-sm);
-    --_rp-multi-select-padding-x: calc(var(--rp-size-control-sm) / 3);
-    --_rp-multi-select-font-size: var(--rp-font-size-sm);
-    --_rp-multi-select-option-min-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-3));
-    --_rp-multi-select-option-padding-y: var(--rp-spacing-1);
-}
-.rp-multi-select--size-md[data-v-b38d027f] {
-    --_rp-multi-select-height: var(--rp-size-control-md);
-    --_rp-multi-select-padding-x: calc(var(--rp-size-control-md) / 3);
-    --_rp-multi-select-font-size: var(--rp-font-size-md);
-    --_rp-multi-select-option-min-height: calc(var(--rp-size-control-md) - var(--rp-spacing-4));
-    --_rp-multi-select-option-padding-y: var(--rp-spacing-1);
-}
-.rp-multi-select--size-lg[data-v-b38d027f] {
-    --_rp-multi-select-height: var(--rp-size-control-lg);
-    --_rp-multi-select-padding-x: calc(var(--rp-size-control-lg) / 3);
-    --_rp-multi-select-font-size: var(--rp-font-size-lg);
-    --_rp-multi-select-option-min-height: calc(var(--rp-size-control-lg) - var(--rp-spacing-5));
-    --_rp-multi-select-option-padding-y: calc(var(--rp-spacing-3) / 2);
-}
-.rp-multi-select--size-xl[data-v-b38d027f] {
-    --_rp-multi-select-height: var(--rp-size-control-xl);
-    --_rp-multi-select-padding-x: calc(var(--rp-size-control-xl) / 3);
-    --_rp-multi-select-font-size: var(--rp-font-size-xl);
-    --_rp-multi-select-option-min-height: calc(var(--rp-size-control-xl) - var(--rp-spacing-6));
-    --_rp-multi-select-option-padding-y: var(--rp-spacing-2);
-}
-.rp-multi-select--radius-xs[data-v-b38d027f] {
-    --_rp-multi-select-radius: var(--rp-radius-xs);
-}
-.rp-multi-select--radius-sm[data-v-b38d027f] {
-    --_rp-multi-select-radius: var(--rp-radius-sm);
-}
-.rp-multi-select--radius-md[data-v-b38d027f] {
-    --_rp-multi-select-radius: var(--rp-radius-md);
-}
-.rp-multi-select--radius-lg[data-v-b38d027f] {
-    --_rp-multi-select-radius: var(--rp-radius-lg);
-}
-.rp-multi-select--radius-xl[data-v-b38d027f] {
-    --_rp-multi-select-radius: var(--rp-radius-xl);
-}
-[data-scheme=dark] .rp-multi-select[data-v-b38d027f] {
-    --_rp-multi-select-invalid-border: var(--rp-color-red-light-color);
-    --_rp-multi-select-invalid-ring: color-mix(
-        in srgb,
-        var(--rp-color-red-light-color) 32%,
-        transparent
-    );
-}
-.rp-multi-select--disabled[data-v-b38d027f] {
-    opacity: var(--rp-opacity-disabled);
-    cursor: not-allowed;
-}
-.rp-multi-select--invalid[data-v-b38d027f] {
-    border-color: var(--_rp-multi-select-invalid-border);
-}
-.rp-multi-select--invalid[data-v-b38d027f]:focus-within, .rp-multi-select--open.rp-multi-select--invalid[data-v-b38d027f] {
-    border-color: var(--_rp-multi-select-invalid-border);
-    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-multi-select-invalid-ring);
-}
-.rp-multi-select__pills[data-v-b38d027f] {
-    display: flex;
-    flex: 1;
-    flex-wrap: wrap;
-    align-items: center;
-    min-width: 0;
-    gap: var(--rp-spacing-1);
-}
-.rp-multi-select__pill[data-v-b38d027f] {
-    display: inline-flex;
-    align-items: center;
-    box-sizing: border-box;
-    max-width: 100%;
-    min-height: calc(var(--_rp-multi-select-height) - var(--rp-spacing-3));
-    padding-inline: var(--rp-spacing-2) var(--rp-spacing-1);
-    gap: var(--rp-spacing-1);
-    color: var(--rp-color-control-fg);
-    background-color: var(--rp-color-default-hover);
-    border-radius: var(--_rp-multi-select-radius);
-}
-.rp-multi-select__pill-label[data-v-b38d027f] {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.rp-multi-select__pill-remove[data-v-b38d027f] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    font: inherit;
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: inherit;
-    opacity: 0.6;
-    flex-shrink: 0;
-    transition: opacity var(--rp-transition-fast);
-}
-.rp-multi-select__pill-remove[data-v-b38d027f]:hover {
-    opacity: 1;
-}
-.rp-multi-select__pill-remove svg[data-v-b38d027f] {
-    width: 100%;
-    height: 100%;
-}
-.rp-multi-select__pill-remove[data-v-b38d027f] {
-    width: 1em;
-    height: 1em;
-}
-.rp-multi-select__pill-remove[data-v-b38d027f]:disabled {
-    cursor: not-allowed;
-}
-.rp-multi-select__input[data-v-b38d027f] {
-    box-sizing: border-box;
-    flex: 1 0 4rem;
-    width: 4rem;
-    min-width: 4rem;
-    min-height: calc(var(--_rp-multi-select-height) - var(--rp-spacing-2));
-    padding: 0;
-    border: none;
-    outline: none;
-    background: transparent;
-    font: inherit;
-    color: var(--rp-color-control-fg);
-    line-height: 1;
-}
-.rp-multi-select__input[data-v-b38d027f]::placeholder {
-    color: var(--rp-color-control-placeholder);
-}
-.rp-multi-select__input[data-v-b38d027f]:disabled {
-    cursor: not-allowed;
-}
-.rp-multi-select__indicator[data-v-b38d027f] {
-    display: inline-flex;
-    align-items: center;
-    width: 1em;
-    height: 1em;
-    flex-shrink: 0;
-}
-.rp-multi-select__indicator svg[data-v-b38d027f] {
-    width: 100%;
-    height: 100%;
-}
-.rp-multi-select__indicator[data-v-b38d027f] {
-    position: relative;
-    flex-shrink: 0;
-    color: var(--rp-color-control-icon);
-    transform: translateX(var(--rp-spacing-1));
-}
-.rp-multi-select__toggle[data-v-b38d027f], .rp-multi-select__clear[data-v-b38d027f] {
-    padding: 0;
-    font: inherit;
-    background: none;
-    border: none;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    width: 1em;
-    height: 1em;
-    flex-shrink: 0;
-}
-.rp-multi-select__toggle svg[data-v-b38d027f], .rp-multi-select__clear svg[data-v-b38d027f] {
-    width: 100%;
-    height: 100%;
-}
-.rp-multi-select__toggle[data-v-b38d027f], .rp-multi-select__clear[data-v-b38d027f] {
-    color: var(--rp-color-control-icon);
-    transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
-}
-.rp-multi-select__toggle[data-v-b38d027f]:hover, .rp-multi-select__clear[data-v-b38d027f]:hover {
-    color: var(--rp-color-control-fg);
-}
-.rp-multi-select__toggle[data-v-b38d027f]:disabled {
-    cursor: not-allowed;
-}
-.rp-multi-select__clear[data-v-b38d027f] {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    background-color: var(--rp-color-control-bg);
-    opacity: 0;
-    pointer-events: none;
-}
-.rp-multi-select:hover .rp-multi-select__clear[data-v-b38d027f] {
-    opacity: 1;
-    pointer-events: auto;
-}
-.rp-multi-select:hover .rp-multi-select__clear + .rp-multi-select__toggle[data-v-b38d027f] {
-    opacity: 0;
-}
-.rp-multi-select__dropdown[data-v-b38d027f] {
-    position: absolute;
-    width: calc(100% + var(--rp-border-width-thin) * 2);
-    z-index: var(--rp-z-index-dropdown);
-    background-color: var(--rp-color-default);
-    border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
-    border-radius: var(--_rp-multi-select-radius);
-    box-shadow: var(--rp-shadow-md);
-    padding: var(--rp-spacing-1) 0;
-    max-height: var(--rp-component-menu-max-height);
-    padding: var(--rp-spacing-1);
-}
-.rp-multi-select__dropdown[data-v-b38d027f] .rp-scroll-area__viewport {
-    scroll-padding-block: var(--rp-spacing-1);
-}
-.rp-multi-select__option[data-v-b38d027f] {
-    display: flex;
-    align-items: center;
-    min-height: var(--_rp-multi-select-option-min-height);
-    padding: var(--_rp-multi-select-option-padding-y) var(--_rp-multi-select-padding-x);
-    gap: var(--rp-spacing-2);
-    border-radius: var(--_rp-multi-select-radius);
-    font-size: var(--_rp-multi-select-font-size);
-    cursor: pointer;
-    color: var(--rp-color-control-fg);
-    transition: color var(--rp-transition-fast);
-}
-.rp-multi-select__option svg[data-v-b38d027f] {
-    width: 1em;
-    height: 1em;
-    margin-inline-start: auto;
-    flex-shrink: 0;
-}
-.rp-multi-select__option--highlighted[data-v-b38d027f] {
-    background-color: var(--_rp-multi-select-option-highlighted-bg);
-}
-.rp-multi-select__option--selected[data-v-b38d027f] {
-    color: var(--rp-color-primary-light-color);
-}
-.rp-multi-select__option--disabled[data-v-b38d027f] {
-    color: var(--rp-color-disabled-color);
-    cursor: not-allowed;
-}
-.rp-multi-select__empty[data-v-b38d027f] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--rp-spacing-4);
-    color: var(--rp-color-dimmed);
-    font-size: var(--_rp-multi-select-font-size);
-}
-.rp-multi-select-dropdown-enter-active[data-v-b38d027f],
-  .rp-multi-select-dropdown-leave-active[data-v-b38d027f] {
-    transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
-}
-.rp-multi-select-dropdown-enter-from[data-v-b38d027f],
-  .rp-multi-select-dropdown-leave-to[data-v-b38d027f] {
-    opacity: 0;
-    transform: translateY(calc(-1 * var(--rp-spacing-1)));
-}
-.rp-multi-select__dropdown[data-side=top].rp-multi-select-dropdown-enter-from[data-v-b38d027f],
-  .rp-multi-select__dropdown[data-side=top].rp-multi-select-dropdown-leave-to[data-v-b38d027f] {
-    transform: translateY(var(--rp-spacing-1));
-}
-}