ropav 0.1.6 → 0.1.8

package/dist/input.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-input[data-v-51eae1ef] {
+.rp-input[data-v-803913b6] {
     --_rp-input-height: var(--rp-size-control-md);
     --_rp-input-padding-x: calc(var(--rp-size-control-md) / 3);
     --_rp-input-font-size: var(--rp-font-size-md);
@@ -20,81 +20,81 @@
     cursor: text;
     transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
-.rp-input[data-v-51eae1ef]:hover:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
+.rp-input[data-v-803913b6]:hover:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
     border-color: var(--rp-color-control-border-hover);
 }
-.rp-input[data-v-51eae1ef]:focus-within:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
+.rp-input[data-v-803913b6]:focus-within:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-input[data-v-51eae1ef] {
+.rp-input[data-v-803913b6] {
     height: var(--_rp-input-height);
     padding: 0 var(--_rp-input-padding-x);
     font-size: var(--_rp-input-font-size);
     border-radius: var(--_rp-input-radius);
 }
-.rp-input--size-xs[data-v-51eae1ef] {
+.rp-input--size-xs[data-v-803913b6] {
     --_rp-input-height: var(--rp-size-control-xs);
     --_rp-input-padding-x: calc(var(--rp-size-control-xs) / 3);
     --_rp-input-font-size: var(--rp-font-size-xs);
 }
-.rp-input--size-sm[data-v-51eae1ef] {
+.rp-input--size-sm[data-v-803913b6] {
     --_rp-input-height: var(--rp-size-control-sm);
     --_rp-input-padding-x: calc(var(--rp-size-control-sm) / 3);
     --_rp-input-font-size: var(--rp-font-size-sm);
 }
-.rp-input--size-md[data-v-51eae1ef] {
+.rp-input--size-md[data-v-803913b6] {
     --_rp-input-height: var(--rp-size-control-md);
     --_rp-input-padding-x: calc(var(--rp-size-control-md) / 3);
     --_rp-input-font-size: var(--rp-font-size-md);
 }
-.rp-input--size-lg[data-v-51eae1ef] {
+.rp-input--size-lg[data-v-803913b6] {
     --_rp-input-height: var(--rp-size-control-lg);
     --_rp-input-padding-x: calc(var(--rp-size-control-lg) / 3);
     --_rp-input-font-size: var(--rp-font-size-lg);
 }
-.rp-input--size-xl[data-v-51eae1ef] {
+.rp-input--size-xl[data-v-803913b6] {
     --_rp-input-height: var(--rp-size-control-xl);
     --_rp-input-padding-x: calc(var(--rp-size-control-xl) / 3);
     --_rp-input-font-size: var(--rp-font-size-xl);
 }
-.rp-input--radius-xs[data-v-51eae1ef] {
+.rp-input--radius-xs[data-v-803913b6] {
     --_rp-input-radius: var(--rp-radius-xs);
 }
-.rp-input--radius-sm[data-v-51eae1ef] {
+.rp-input--radius-sm[data-v-803913b6] {
     --_rp-input-radius: var(--rp-radius-sm);
 }
-.rp-input--radius-md[data-v-51eae1ef] {
+.rp-input--radius-md[data-v-803913b6] {
     --_rp-input-radius: var(--rp-radius-md);
 }
-.rp-input--radius-lg[data-v-51eae1ef] {
+.rp-input--radius-lg[data-v-803913b6] {
     --_rp-input-radius: var(--rp-radius-lg);
 }
-.rp-input--radius-xl[data-v-51eae1ef] {
+.rp-input--radius-xl[data-v-803913b6] {
     --_rp-input-radius: var(--rp-radius-xl);
 }
-.rp-input--disabled[data-v-51eae1ef] {
+.rp-input--disabled[data-v-803913b6] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-input--valid[data-v-51eae1ef] {
+.rp-input--valid[data-v-803913b6] {
     border-color: var(--_rp-input-valid-border);
 }
-.rp-input--valid[data-v-51eae1ef]:focus-within:not(.rp-input--disabled) {
+.rp-input--valid[data-v-803913b6]:focus-within:not(.rp-input--disabled) {
     border-color: var(--_rp-input-valid-border);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-input-valid-ring);
 }
-.rp-input--invalid[data-v-51eae1ef] {
+.rp-input--invalid[data-v-803913b6] {
     border-color: var(--_rp-input-invalid-border);
 }
-.rp-input--invalid[data-v-51eae1ef]:focus-within:not(.rp-input--disabled) {
+.rp-input--invalid[data-v-803913b6]:focus-within:not(.rp-input--disabled) {
     border-color: var(--_rp-input-invalid-border);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-input-invalid-ring);
 }
-.rp-input--readonly[data-v-51eae1ef] {
+.rp-input--readonly[data-v-803913b6] {
     background-color: var(--rp-color-control-readonly-bg);
 }
-.rp-input__native[data-v-51eae1ef] {
+.rp-input__native[data-v-803913b6] {
     box-sizing: border-box;
     flex: 1;
     width: 100%;
@@ -108,13 +108,13 @@
     color: var(--rp-color-control-fg);
     line-height: 1;
 }
-.rp-input__native[data-v-51eae1ef]::placeholder {
+.rp-input__native[data-v-803913b6]::placeholder {
     color: var(--rp-color-control-placeholder);
 }
-.rp-input__native[data-v-51eae1ef]:disabled {
+.rp-input__native[data-v-803913b6]:disabled {
     cursor: not-allowed;
 }
-.rp-input__left[data-v-51eae1ef], .rp-input__right[data-v-51eae1ef] {
+.rp-input__left[data-v-803913b6], .rp-input__right[data-v-803913b6] {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;

package/dist/input.js

@@ -1,24 +1,16 @@
 import './input.css';
 import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { a as useTextFormControl, t as claimNestedFormControlOwner } from "./useFormControl.js";
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
 import { t as useControlState } from "./useControlState.js";
+import { t as isInteractiveElement } from "./interactive.js";
 import { child, computed, createIf, createSlot, defineVaporComponent, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
 //#region src/components/input/useInput.ts
-var INTERACTIVE_SELECTOR = [
-	"button",
-	"a[href]",
-	`input:not(.rp-input__native)`,
-	"select",
-	"textarea",
-	"[contenteditable=\"true\"]",
-	"[tabindex]:not([tabindex=\"-1\"])"
-].join(",");
-function isInteractiveElement(target) {
-	return Boolean(target.closest(INTERACTIVE_SELECTOR));
-}
+var NATIVE_INPUT_SELECTOR = ".rp-input__native";
 function useInput(props, emitUpdate) {
 	const inputRef = ref(null);
 	const control = useControlState(props);
@@ -35,8 +27,7 @@ function useInput(props, emitUpdate) {
 	}
 	function focusInput(e) {
 		if (control.disabled) return;
-		const target = e.target;
-		if (target instanceof Element && isInteractiveElement(target)) return;
+		if (isInteractiveElement(e.target, NATIVE_INPUT_SELECTOR)) return;
 		inputRef.value?.focus();
 	}
 	return {
@@ -49,8 +40,8 @@ function useInput(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/input/input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-51eae1ef>");
-var t1 = template("<div data-v-51eae1ef><input data-v-51eae1ef>", 1);
+var t0 = template("<span data-v-803913b6>");
+var t1 = template("<div data-v-803913b6><input data-v-803913b6>", 1);
 //#endregion
 //#region src/components/input/input.vue
 var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -112,15 +103,15 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
 			onMousedown: focusInput,
-			"data-disabled": presence(control.disabled),
-			"data-readonly": presence(props.readonly),
-			"data-invalid": presence(control.invalid)
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-readonly": toPresenceAttribute(props.readonly),
+			"data-invalid": toPresenceAttribute(control.invalid)
 		}));
 		const nativeInputAttrs = computed(() => {
 			const attrs = props.inputAttrs ?? {};
-			const { class: compatibilityClass, style: compatibilityStyle, ...forwardedAttrs } = attrs;
+			const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(attrs);
 			return {
-				...forwardedAttrs,
+				...forwardedAttributes,
 				...getPartAttrs("input", {
 					class: "rp-input__native",
 					compatibilityClass,
@@ -128,7 +119,7 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				}),
 				id: control.id,
 				name: props.name,
-				form: control.form ?? forwardedAttrs.form,
+				form: control.form ?? forwardedAttributes.form,
 				type: props.type,
 				value: controllable.value.value,
 				placeholder: props.placeholder,
@@ -140,13 +131,10 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				"aria-describedby": control.ariaDescribedby,
 				"aria-invalid": control.invalid || void 0,
 				"aria-required": control.required || void 0,
-				"data-disabled": presence(control.disabled),
-				"data-readonly": presence(props.readonly),
-				"data-invalid": presence(control.invalid),
-				onInput(event) {
-					onInput(event);
-					attrs.onInput?.(event);
-				}
+				"data-disabled": toPresenceAttribute(control.disabled),
+				"data-readonly": toPresenceAttribute(props.readonly),
+				"data-invalid": toPresenceAttribute(control.invalid),
+				onInput: composeEventHandlers(onInput, attrs.onInput)
 			};
 		});
 		__expose({
@@ -176,6 +164,6 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n9;
 	}
-}), [["__scopeId", "data-v-51eae1ef"]]);
+}), [["__scopeId", "data-v-803913b6"]]);
 //#endregion
 export { input_default as t };

package/dist/interactive.js

@@ -0,0 +1,18 @@
+import { t as isElement } from "./query.js";
+//#region src/utils/dom/interactive.ts
+var INTERACTIVE_ELEMENT_SELECTOR = [
+	"button",
+	"a[href]",
+	"input",
+	"select",
+	"textarea",
+	"[contenteditable=\"true\"]",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+function isInteractiveElement(target, ignoredSelector) {
+	if (!isElement(target)) return false;
+	const interactiveElement = target.closest(INTERACTIVE_ELEMENT_SELECTOR);
+	return Boolean(interactiveElement && (!ignoredSelector || !interactiveElement.matches(ignoredSelector)));
+}
+//#endregion
+export { isInteractiveElement as t };

package/dist/internal/composables/useOverlayLayer.d.ts

@@ -1,4 +1,15 @@
 import { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
+export interface OverlayLayerInteraction {
+    inside?: MaybeRefOrGetter<readonly (Element | null | undefined)[]>;
+    escapeKeyDown?: (event: KeyboardEvent) => void;
+    pointerDownOutside?: (event: PointerEvent) => void;
+    focusOutside?: (event: FocusEvent) => void;
+    clickOutside?: (event: MouseEvent) => void;
+}
+export interface OverlayLayerInteractionConnection {
+    (): void;
+    refresh: () => void;
+}
 export interface OverlayLayerContext {
     id: symbol;
     element: Ref<HTMLElement | null>;
@@ -15,6 +26,7 @@ export interface OverlayLayerContext {
         focus?: boolean;
         inside?: boolean;
     }) => () => void;
+    connectInteraction: (interaction: OverlayLayerInteraction) => OverlayLayerInteractionConnection;
 }
 export interface UseOverlayLayerOptions {
     active: MaybeRefOrGetter<boolean>;

package/dist/modal.js

@@ -1,13 +1,13 @@
 import './modal.css';
 import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi } from "./styles-api.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 { t as scroll_area_default } from "./scroll-area.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";

package/dist/multi-select.css

@@ -0,0 +1,316 @@
+@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: 180px;
+    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);
+}
+html.dark .rp-multi-select[data-v-b38d027f], [data-rp-color-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: 100;
+    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: 240px;
+    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-primary-color-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));
+}
+}