ropav 0.0.3 → 0.0.5

package/dist/components/field/field.d.ts

@@ -0,0 +1,35 @@
+import { FieldControlProps, FieldProps } from './types';
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<FieldProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        label?: (props: {}) => any;
+    } & {
+        default?: (props: {
+            id: string;
+            disabled: true | undefined;
+            required: true | undefined;
+            invalid: true | undefined;
+            labelledby: string | undefined;
+            describedby: string | undefined;
+            controlProps: FieldControlProps;
+        }) => any;
+    } & {
+        description?: (props: {}) => any;
+    } & {
+        message?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/field/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Field } from './field';
+export type { FieldControlProps, FieldProps, FieldSlotProps } from './types';

package/dist/components/field/index.js

@@ -0,0 +1,2 @@
+import { t as field_default } from "../../field.js";
+export { field_default as Field };

package/dist/components/field/types.d.ts

@@ -0,0 +1,21 @@
+export interface FieldControlProps {
+    id: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    labelledby?: string;
+    describedby?: string;
+}
+export interface FieldSlotProps extends FieldControlProps {
+    controlProps: FieldControlProps;
+}
+export interface FieldProps {
+    id?: string;
+    label?: string;
+    description?: string;
+    message?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+}

package/dist/components/icon-button/icon-button.d.ts

@@ -0,0 +1,21 @@
+import { IconButtonProps } from './types';
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<IconButtonProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as IconButton } from './icon-button';
+export type { IconButtonColor, IconButtonProps, IconButtonRadius, IconButtonSize, IconButtonVariant, } from './types';

package/dist/components/icon-button/index.js

@@ -0,0 +1,2 @@
+import { t as icon_button_default } from "../../icon-button.js";
+export { icon_button_default as IconButton };

package/dist/components/icon-button/types.d.ts

@@ -0,0 +1,15 @@
+import { ButtonColor, ButtonRadius, ButtonSize, ButtonVariant } from '../button/types';
+export type IconButtonColor = ButtonColor;
+export type IconButtonSize = ButtonSize;
+export type IconButtonRadius = ButtonRadius;
+export type IconButtonVariant = ButtonVariant;
+export interface IconButtonProps {
+    ariaLabel: string;
+    variant?: IconButtonVariant;
+    color?: IconButtonColor;
+    size?: IconButtonSize;
+    radius?: IconButtonRadius;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    loading?: boolean;
+}

package/dist/components/radio/types.d.ts

@@ -1,5 +1,5 @@
 import { InjectionKey } from 'vue';
-export type RadioColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type RadioColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 export type RadioSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type RadioVariant = 'solid' | 'outline';
 export interface RadioProps {

package/dist/components/switch/types.d.ts

@@ -1,4 +1,4 @@
-export type SwitchColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type SwitchColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 export type SwitchSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface SwitchProps {
     id?: string;

package/dist/field.css

@@ -0,0 +1,40 @@
+.rp-field[data-v-b8c3dcbe] {
+  --_rp-field-danger: var(--rp-color-danger);
+  display: grid;
+  gap: var(--rp-spacing-1);
+  min-width: 0;
+  font-family: var(--rp-font-family);
+  color: var(--rp-color-text);
+}
+html.dark .rp-field[data-v-b8c3dcbe] {
+  --_rp-field-danger: var(--rp-color-danger-fg);
+}
+.rp-field__label[data-v-b8c3dcbe] {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: var(--rp-spacing-1);
+  color: var(--rp-color-text);
+  font-size: var(--rp-font-size-sm);
+  font-weight: var(--rp-font-weight-medium);
+  line-height: var(--rp-line-height-normal);
+}
+.rp-field__required[data-v-b8c3dcbe] {
+  color: var(--_rp-field-danger);
+  line-height: var(--rp-line-height-none);
+}
+.rp-field__control[data-v-b8c3dcbe] {
+  min-width: 0;
+}
+.rp-field__description[data-v-b8c3dcbe], .rp-field__message[data-v-b8c3dcbe] {
+  margin: 0;
+  color: var(--rp-color-text-secondary);
+  font-size: var(--rp-font-size-sm);
+  line-height: var(--rp-line-height-normal);
+}
+.rp-field--invalid .rp-field__message[data-v-b8c3dcbe] {
+  color: var(--_rp-field-danger);
+}
+.rp-field--disabled .rp-field__label[data-v-b8c3dcbe], .rp-field--disabled .rp-field__description[data-v-b8c3dcbe], .rp-field--disabled .rp-field__message[data-v-b8c3dcbe] {
+  color: var(--rp-color-text-disabled);
+}

package/dist/field.js

@@ -0,0 +1,128 @@
+import './field.css';
+import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { child, computed, createIf, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, setProp, setText, template, toDisplayString, useId, useSlots } from "vue";
+//#region src/components/field/field.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var t1 = template("<span data-v-b8c3dcbe class=rp-field__required aria-hidden=true>*", 2);
+var t2 = template("<label data-v-b8c3dcbe class=rp-field__label>");
+var t3 = template("<p data-v-b8c3dcbe class=rp-field__description>");
+var t4 = template("<p data-v-b8c3dcbe class=rp-field__message>");
+var t5 = template("<div data-v-b8c3dcbe><div data-v-b8c3dcbe class=rp-field__control></div>", 1);
+//#endregion
+//#region src/components/field/field.vue
+var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpField",
+	__name: "field",
+	props: {
+		id: {},
+		label: { default: "" },
+		description: { default: "" },
+		message: { default: "" },
+		error: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const generatedId = useId();
+		const controlId = computed(() => props.id ?? `${generatedId}-control`);
+		const labelId = computed(() => `${controlId.value}-label`);
+		const descriptionId = computed(() => `${controlId.value}-description`);
+		const messageId = computed(() => `${controlId.value}-message`);
+		const isInvalid = computed(() => Boolean(props.invalid || props.error));
+		const messageText = computed(() => props.error || props.message);
+		const hasLabel = computed(() => Boolean(props.label || slots.label));
+		const hasDescription = computed(() => Boolean(props.description || slots.description));
+		const hasMessage = computed(() => Boolean(messageText.value || slots.message));
+		const controlLabelledby = computed(() => hasLabel.value ? labelId.value : void 0);
+		const controlDescribedby = computed(() => [hasDescription.value ? descriptionId.value : void 0, hasMessage.value ? messageId.value : void 0].filter(Boolean).join(" ") || void 0);
+		const rootClass = computed(() => bem("rp-field", {
+			disabled: props.disabled,
+			required: props.required,
+			invalid: isInvalid.value
+		}));
+		const controlProps = computed(() => ({
+			id: controlId.value,
+			disabled: props.disabled || void 0,
+			required: props.required || void 0,
+			invalid: isInvalid.value || void 0,
+			labelledby: controlLabelledby.value,
+			describedby: controlDescribedby.value
+		}));
+		const n23 = t5();
+		const n10 = child(n23, 1);
+		renderEffect(() => setClass(n23, rootClass.value));
+		setInsertionState(n23, 0, 0);
+		createIf(() => hasLabel.value, () => {
+			const n8 = t2();
+			renderEffect(() => {
+				setProp(n8, "id", labelId.value);
+				setProp(n8, "for", controlId.value);
+			});
+			setInsertionState(n8, null, 0);
+			createSlot("label", null, () => {
+				const n4 = t0();
+				renderEffect(() => setText(n4, toDisplayString(__props.label)));
+				return n4;
+			}, 1);
+			setInsertionState(n8, null, 1);
+			createIf(() => __props.required, () => {
+				return t1();
+			});
+			return n8;
+		});
+		setInsertionState(n10, null, 0);
+		createSlot("default", {
+			id: () => controlId.value,
+			disabled: () => __props.disabled || void 0,
+			required: () => __props.required || void 0,
+			invalid: () => isInvalid.value || void 0,
+			labelledby: () => controlLabelledby.value,
+			describedby: () => controlDescribedby.value,
+			controlProps: () => controlProps.value
+		}, null, 1);
+		setInsertionState(n23, null, 2);
+		createIf(() => hasDescription.value, () => {
+			const n16 = t3();
+			renderEffect(() => setProp(n16, "id", descriptionId.value));
+			setInsertionState(n16, null, 0);
+			createSlot("description", null, () => {
+				const n15 = t0();
+				renderEffect(() => setText(n15, toDisplayString(__props.description)));
+				return n15;
+			}, 1);
+			return n16;
+		});
+		setInsertionState(n23, null, 3);
+		createIf(() => hasMessage.value, () => {
+			const n22 = t4();
+			renderEffect(() => {
+				setProp(n22, "id", messageId.value);
+				setProp(n22, "role", isInvalid.value ? "alert" : void 0);
+			});
+			setInsertionState(n22, null, 0);
+			createSlot("message", null, () => {
+				const n21 = t0();
+				renderEffect(() => setText(n21, toDisplayString(messageText.value)));
+				return n21;
+			}, 1);
+			return n22;
+		});
+		return n23;
+	}
+}), [["__scopeId", "data-v-b8c3dcbe"]]);
+//#endregion
+export { field_default as t };
+
+//# sourceMappingURL=field.js.map

package/dist/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":[],"sources":["../src/components/field/field.vue","../src/components/field/field.vue"],"sourcesContent":["<template>\n    <div :class=\"rootClass\">\n        <label v-if=\"hasLabel\" :id=\"labelId\" class=\"rp-field__label\" :for=\"controlId\">\n            <slot name=\"label\">{{ label }}</slot>\n            <span v-if=\"required\" class=\"rp-field__required\" aria-hidden=\"true\">*</span>\n        </label>\n\n        <div class=\"rp-field__control\">\n            <slot\n                :id=\"controlId\"\n                :disabled=\"disabled || undefined\"\n                :required=\"required || undefined\"\n                :invalid=\"isInvalid || undefined\"\n                :labelledby=\"controlLabelledby\"\n                :describedby=\"controlDescribedby\"\n                :control-props=\"controlProps\"\n            />\n        </div>\n\n        <p v-if=\"hasDescription\" :id=\"descriptionId\" class=\"rp-field__description\">\n            <slot name=\"description\">{{ description }}</slot>\n        </p>\n\n        <p\n            v-if=\"hasMessage\"\n            :id=\"messageId\"\n            class=\"rp-field__message\"\n            :role=\"isInvalid ? 'alert' : undefined\"\n        >\n            <slot name=\"message\">{{ messageText }}</slot>\n        </p>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed, useId, useSlots } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { FieldControlProps, FieldProps } from './types';\n\ndefineOptions({ name: 'RpField' });\n\nconst props = withDefaults(defineProps<FieldProps>(), {\n    label: '',\n    description: '',\n    message: '',\n    error: '',\n    disabled: undefined,\n    required: false,\n    invalid: undefined,\n});\n\nconst slots = useSlots();\nconst generatedId = useId();\n\nconst controlId = computed(() => props.id ?? `${generatedId}-control`);\nconst labelId = computed(() => `${controlId.value}-label`);\nconst descriptionId = computed(() => `${controlId.value}-description`);\nconst messageId = computed(() => `${controlId.value}-message`);\n\nconst isInvalid = computed(() => Boolean(props.invalid || props.error));\nconst messageText = computed(() => props.error || props.message);\n\nconst hasLabel = computed(() => Boolean(props.label || slots.label));\nconst hasDescription = computed(() => Boolean(props.description || slots.description));\nconst hasMessage = computed(() => Boolean(messageText.value || slots.message));\n\nconst controlLabelledby = computed(() => (hasLabel.value ? labelId.value : undefined));\nconst controlDescribedby = computed(\n    () =>\n        [\n            hasDescription.value ? descriptionId.value : undefined,\n            hasMessage.value ? messageId.value : undefined,\n        ]\n            .filter(Boolean)\n            .join(' ') || undefined,\n);\n\nconst rootClass = computed(() =>\n    bem('rp-field', {\n        disabled: props.disabled,\n        required: props.required,\n        invalid: isInvalid.value,\n    }),\n);\n\nconst controlProps = computed<FieldControlProps>(() => ({\n    id: controlId.value,\n    disabled: props.disabled || undefined,\n    required: props.required || undefined,\n    invalid: isInvalid.value || undefined,\n    labelledby: controlLabelledby.value,\n    describedby: controlDescribedby.value,\n}));\n</script>\n\n<style src=\"./field.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\">\n        <label v-if=\"hasLabel\" :id=\"labelId\" class=\"rp-field__label\" :for=\"controlId\">\n            <slot name=\"label\">{{ label }}</slot>\n            <span v-if=\"required\" class=\"rp-field__required\" aria-hidden=\"true\">*</span>\n        </label>\n\n        <div class=\"rp-field__control\">\n            <slot\n                :id=\"controlId\"\n                :disabled=\"disabled || undefined\"\n                :required=\"required || undefined\"\n                :invalid=\"isInvalid || undefined\"\n                :labelledby=\"controlLabelledby\"\n                :describedby=\"controlDescribedby\"\n                :control-props=\"controlProps\"\n            />\n        </div>\n\n        <p v-if=\"hasDescription\" :id=\"descriptionId\" class=\"rp-field__description\">\n            <slot name=\"description\">{{ description }}</slot>\n        </p>\n\n        <p\n            v-if=\"hasMessage\"\n            :id=\"messageId\"\n            class=\"rp-field__message\"\n            :role=\"isInvalid ? 'alert' : undefined\"\n        >\n            <slot name=\"message\">{{ messageText }}</slot>\n        </p>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed, useId, useSlots } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { FieldControlProps, FieldProps } from './types';\n\ndefineOptions({ name: 'RpField' });\n\nconst props = withDefaults(defineProps<FieldProps>(), {\n    label: '',\n    description: '',\n    message: '',\n    error: '',\n    disabled: undefined,\n    required: false,\n    invalid: undefined,\n});\n\nconst slots = useSlots();\nconst generatedId = useId();\n\nconst controlId = computed(() => props.id ?? `${generatedId}-control`);\nconst labelId = computed(() => `${controlId.value}-label`);\nconst descriptionId = computed(() => `${controlId.value}-description`);\nconst messageId = computed(() => `${controlId.value}-message`);\n\nconst isInvalid = computed(() => Boolean(props.invalid || props.error));\nconst messageText = computed(() => props.error || props.message);\n\nconst hasLabel = computed(() => Boolean(props.label || slots.label));\nconst hasDescription = computed(() => Boolean(props.description || slots.description));\nconst hasMessage = computed(() => Boolean(messageText.value || slots.message));\n\nconst controlLabelledby = computed(() => (hasLabel.value ? labelId.value : undefined));\nconst controlDescribedby = computed(\n    () =>\n        [\n            hasDescription.value ? descriptionId.value : undefined,\n            hasMessage.value ? messageId.value : undefined,\n        ]\n            .filter(Boolean)\n            .join(' ') || undefined,\n);\n\nconst rootClass = computed(() =>\n    bem('rp-field', {\n        disabled: props.disabled,\n        required: props.required,\n        invalid: isInvalid.value,\n    }),\n);\n\nconst controlProps = computed<FieldControlProps>(() => ({\n    id: controlId.value,\n    disabled: props.disabled || undefined,\n    required: props.required || undefined,\n    invalid: isInvalid.value || undefined,\n    labelledby: controlLabelledby.value,\n    describedby: controlDescribedby.value,\n}));\n</script>\n\n<style src=\"./field.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,QAAQ;EAUd,MAAM,QAAQ,SAAS;EACvB,MAAM,cAAc,MAAM;EAE1B,MAAM,YAAY,eAAe,MAAM,MAAM,GAAG,YAAY,SAAS;EACrE,MAAM,UAAU,eAAe,GAAG,UAAU,MAAM,OAAO;EACzD,MAAM,gBAAgB,eAAe,GAAG,UAAU,MAAM,aAAa;EACrE,MAAM,YAAY,eAAe,GAAG,UAAU,MAAM,SAAS;EAE7D,MAAM,YAAY,eAAe,QAAQ,MAAM,WAAW,MAAM,KAAK,CAAC;EACtE,MAAM,cAAc,eAAe,MAAM,SAAS,MAAM,OAAO;EAE/D,MAAM,WAAW,eAAe,QAAQ,MAAM,SAAS,MAAM,KAAK,CAAC;EACnE,MAAM,iBAAiB,eAAe,QAAQ,MAAM,eAAe,MAAM,WAAW,CAAC;EACrF,MAAM,aAAa,eAAe,QAAQ,YAAY,SAAS,MAAM,OAAO,CAAC;EAE7E,MAAM,oBAAoB,eAAgB,SAAS,QAAQ,QAAQ,QAAQ,KAAA,CAAU;EACrF,MAAM,qBAAqB,eAEnB,CACI,eAAe,QAAQ,cAAc,QAAQ,KAAA,GAC7C,WAAW,QAAQ,UAAU,QAAQ,KAAA,CACzC,CAAA,CACK,OAAO,OAAO,CAAA,CACd,KAAK,GAAG,KAAK,KAAA,CAC1B;EAEA,MAAM,YAAY,eACd,IAAI,YAAY;GACZ,UAAU,MAAM;GAChB,UAAU,MAAM;GAChB,SAAS,UAAU;EACvB,CAAC,CACL;EAEA,MAAM,eAAe,gBAAmC;GACpD,IAAI,UAAU;GACd,UAAU,MAAM,YAAY,KAAA;GAC5B,UAAU,MAAM,YAAY,KAAA;GAC5B,SAAS,UAAU,SAAS,KAAA;GAC5B,YAAY,kBAAkB;GAC9B,aAAa,mBAAmB;EACpC,EAAE;;;mCA3Fe,UAAA,KAAS,CAAA;;iBACL,SAAA,aAAQ;;;gBAAG,MAAI,QAAA,KAAO;gBAA2B,OAAK,UAAA,KAAS;;;cAClE,SAAY,YAAA;;mDAAI,QAAA,KAAK,CAAA,CAAA;;;;kBACf,QAAA,gBAAQ;;;;;;;GAKf,UAAI,UAAA;GACJ,gBAAU,QAAA,YAAY,KAAA;GACtB,gBAAU,QAAA,YAAY,KAAA;GACtB,eAAS,UAAA,SAAa,KAAA;GACtB,kBAAY,kBAAA;GACZ,mBAAa,mBAAA;GACb,oBAAe,aAAA;;;iBAIf,eAAA,aAAc;;mCAAG,MAAI,cAAA,KAAa,CAAA;;cACjC,eAAkB,YAAA;;oDAAI,QAAA,WAAW,CAAA,CAAA;;;;;;iBAIjC,WAAA,aAAU;;;iBACf,MAAI,UAAA,KAAS;iBAEb,QAAM,UAAA,QAAS,UAAa,KAAA,CAAS;;;cAEhC,WAAc,YAAA;;oDAAI,YAAA,KAAW,CAAA,CAAA"}

package/dist/icon-button.css

@@ -0,0 +1,339 @@
+.rp-button[data-v-4a239144] {
+  --_rp-button-accent: var(--rp-color-primary);
+  --_rp-button-accent-hover: var(--rp-color-primary-hover);
+  --_rp-button-accent-active: var(--rp-color-primary-active);
+  --_rp-button-accent-on: var(--rp-color-on-primary);
+  --_rp-button-accent-subtle-bg: var(--rp-color-primary-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-primary-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-primary-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-primary-border);
+  --_rp-button-accent-border-hover: var(--rp-color-primary-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-primary-fg);
+  --_rp-button-bg: var(--rp-color-button-default-bg);
+  --_rp-button-bg-hover: var(--rp-color-button-default-bg-hover);
+  --_rp-button-bg-active: var(--rp-color-button-default-bg-active);
+  --_rp-button-border: var(--rp-color-border);
+  --_rp-button-border-hover: var(--rp-color-border-hover);
+  --_rp-button-border-active: var(--_rp-button-border-hover);
+  --_rp-button-fg: var(--rp-color-text);
+  --_rp-button-height: var(--rp-size-control-md);
+  --_rp-button-padding-x: var(--rp-spacing-4);
+  --_rp-button-font-size: var(--rp-font-size-base);
+  --_rp-button-radius: var(--rp-radius-sm);
+  --_rp-button-shadow: var(--rp-shadow-sm);
+  --_rp-button-shadow-hover: var(--rp-shadow-base);
+  --_rp-button-shadow-active: var(--rp-shadow-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  gap: var(--rp-spacing-2);
+  font-family: var(--rp-font-family);
+  font-weight: var(--rp-font-weight-medium);
+  line-height: var(--rp-line-height-none);
+  appearance: none;
+  background-color: var(--_rp-button-bg);
+  border: var(--rp-border-width-thin) solid var(--_rp-button-border);
+  box-shadow: var(--_rp-button-shadow);
+  color: var(--_rp-button-fg);
+  cursor: pointer;
+  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast), transform var(--rp-transition-fast);
+  white-space: nowrap;
+  user-select: none;
+  height: var(--_rp-button-height);
+  padding: 0 var(--_rp-button-padding-x);
+  font-size: var(--_rp-button-font-size);
+  border-radius: var(--_rp-button-radius);
+}
+.rp-button[data-v-4a239144]:hover:not(:disabled) {
+  background-color: var(--_rp-button-bg-hover);
+  border-color: var(--_rp-button-border-hover);
+  box-shadow: var(--_rp-button-shadow-hover);
+}
+.rp-button[data-v-4a239144]:active:not(:disabled) {
+  background-color: var(--_rp-button-bg-active);
+  border-color: var(--_rp-button-border-active);
+  box-shadow: var(--_rp-button-shadow-active);
+  transform: translateY(1px);
+}
+.rp-button--color-primary[data-v-4a239144] {
+  --_rp-button-accent: var(--rp-color-primary);
+  --_rp-button-accent-hover: var(--rp-color-primary-hover);
+  --_rp-button-accent-active: var(--rp-color-primary-active);
+  --_rp-button-accent-on: var(--rp-color-on-primary);
+  --_rp-button-accent-subtle-bg: var(--rp-color-primary-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-primary-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-primary-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-primary-border);
+  --_rp-button-accent-border-hover: var(--rp-color-primary-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-primary-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+}
+.rp-button--color-secondary[data-v-4a239144] {
+  --_rp-button-accent: var(--rp-color-secondary);
+  --_rp-button-accent-hover: var(--rp-color-secondary-hover);
+  --_rp-button-accent-active: var(--rp-color-secondary-active);
+  --_rp-button-accent-on: var(--rp-color-on-secondary);
+  --_rp-button-accent-subtle-bg: var(--rp-color-secondary-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-secondary-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-secondary-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-secondary-border);
+  --_rp-button-accent-border-hover: var(--rp-color-secondary-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-secondary-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+}
+.rp-button--color-success[data-v-4a239144] {
+  --_rp-button-accent: var(--rp-color-success);
+  --_rp-button-accent-hover: var(--rp-color-success-hover);
+  --_rp-button-accent-active: var(--rp-color-success-active);
+  --_rp-button-accent-on: var(--rp-color-on-success);
+  --_rp-button-accent-subtle-bg: var(--rp-color-success-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-success-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-success-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-success-border);
+  --_rp-button-accent-border-hover: var(--rp-color-success-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-success-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+}
+.rp-button--color-warning[data-v-4a239144] {
+  --_rp-button-accent: var(--rp-color-warning);
+  --_rp-button-accent-hover: var(--rp-color-warning-hover);
+  --_rp-button-accent-active: var(--rp-color-warning-active);
+  --_rp-button-accent-on: var(--rp-color-on-warning);
+  --_rp-button-accent-subtle-bg: var(--rp-color-warning-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-warning-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-warning-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-warning-border);
+  --_rp-button-accent-border-hover: var(--rp-color-warning-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-warning-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+}
+.rp-button--color-danger[data-v-4a239144] {
+  --_rp-button-accent: var(--rp-color-danger);
+  --_rp-button-accent-hover: var(--rp-color-danger-hover);
+  --_rp-button-accent-active: var(--rp-color-danger-active);
+  --_rp-button-accent-on: var(--rp-color-on-danger);
+  --_rp-button-accent-subtle-bg: var(--rp-color-danger-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-danger-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-danger-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-danger-border);
+  --_rp-button-accent-border-hover: var(--rp-color-danger-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-danger-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+}
+.rp-button--color-info[data-v-4a239144] {
+  --_rp-button-accent: var(--rp-color-info);
+  --_rp-button-accent-hover: var(--rp-color-info-hover);
+  --_rp-button-accent-active: var(--rp-color-info-active);
+  --_rp-button-accent-on: var(--rp-color-on-info);
+  --_rp-button-accent-subtle-bg: var(--rp-color-info-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-info-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-info-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-info-border);
+  --_rp-button-accent-border-hover: var(--rp-color-info-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-info-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+}
+.rp-button--color-neutral[data-v-4a239144] {
+  --_rp-button-accent: var(--rp-color-neutral);
+  --_rp-button-accent-hover: var(--rp-color-neutral-hover);
+  --_rp-button-accent-active: var(--rp-color-neutral-active);
+  --_rp-button-accent-on: var(--rp-color-on-neutral);
+  --_rp-button-accent-subtle-bg: var(--rp-color-neutral-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-neutral-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-neutral-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-neutral-border);
+  --_rp-button-accent-border-hover: var(--rp-color-neutral-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-neutral-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+}
+.rp-button--size-xs[data-v-4a239144] {
+  --_rp-button-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-1));
+  --_rp-button-padding-x: var(--rp-spacing-2);
+  --_rp-button-font-size: var(--rp-font-size-xs);
+}
+.rp-button--size-sm[data-v-4a239144] {
+  --_rp-button-height: var(--rp-size-control-sm);
+  --_rp-button-padding-x: var(--rp-spacing-3);
+  --_rp-button-font-size: var(--rp-font-size-sm);
+}
+.rp-button--size-lg[data-v-4a239144] {
+  --_rp-button-height: var(--rp-size-control-lg);
+  --_rp-button-padding-x: var(--rp-spacing-5);
+  --_rp-button-font-size: var(--rp-font-size-lg);
+}
+.rp-button--size-xl[data-v-4a239144] {
+  --_rp-button-height: calc(var(--rp-size-control-lg) + var(--rp-spacing-2));
+  --_rp-button-padding-x: var(--rp-spacing-6);
+  --_rp-button-font-size: var(--rp-font-size-lg);
+}
+.rp-button--radius-xs[data-v-4a239144] {
+  --_rp-button-radius: var(--rp-radius-xs);
+}
+.rp-button--radius-sm[data-v-4a239144] {
+  --_rp-button-radius: var(--rp-radius-sm);
+}
+.rp-button--radius-md[data-v-4a239144] {
+  --_rp-button-radius: var(--rp-radius-md);
+}
+.rp-button--radius-lg[data-v-4a239144] {
+  --_rp-button-radius: var(--rp-radius-lg);
+}
+.rp-button--radius-xl[data-v-4a239144] {
+  --_rp-button-radius: var(--rp-radius-xl);
+}
+.rp-button--solid[data-v-4a239144] {
+  --_rp-button-bg: var(--_rp-button-accent);
+  --_rp-button-bg-hover: var(--_rp-button-accent-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-active);
+  --_rp-button-border: var(--_rp-button-accent);
+  --_rp-button-border-hover: var(--_rp-button-accent-hover);
+  --_rp-button-border-active: var(--_rp-button-accent-active);
+  --_rp-button-fg: var(--_rp-button-accent-on);
+}
+.rp-button--subtle[data-v-4a239144] {
+  --_rp-button-bg: var(--_rp-button-accent-subtle-bg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: transparent;
+  --_rp-button-border-hover: transparent;
+  --_rp-button-border-active: transparent;
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--surface[data-v-4a239144] {
+  --_rp-button-bg: var(--_rp-button-accent-subtle-bg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-border-active: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--outline[data-v-4a239144] {
+  --_rp-button-bg: transparent;
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-border-active: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--ghost[data-v-4a239144] {
+  --_rp-button-bg: transparent;
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: transparent;
+  --_rp-button-border-hover: transparent;
+  --_rp-button-border-active: transparent;
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--plain[data-v-4a239144] {
+  --_rp-button-bg: transparent;
+  --_rp-button-bg-hover: transparent;
+  --_rp-button-bg-active: transparent;
+  --_rp-button-border: transparent;
+  --_rp-button-border-hover: transparent;
+  --_rp-button-border-active: transparent;
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button[data-v-4a239144]:disabled {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+  box-shadow: none;
+  transform: none;
+}
+.rp-button[data-v-4a239144]:focus-visible {
+  outline: none;
+  border-color: var(--rp-color-primary);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-button__left[data-v-4a239144], .rp-button__right[data-v-4a239144] {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.rp-button__spinner[data-v-4a239144] {
+  display: block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  transform-origin: center;
+  animation: rp-button-spin-4a239144 700ms linear infinite;
+}
+@keyframes rp-button-spin-4a239144 {
+to {
+    transform: rotate(360deg);
+}
+}.rp-icon-button[data-v-4a239144] {
+  width: var(--_rp-button-height);
+  padding: 0;
+}
+.rp-icon-button__icon[data-v-4a239144], .rp-icon-button__spinner[data-v-4a239144] {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+.rp-icon-button__icon[data-v-4a239144] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.rp-icon-button__icon svg[data-v-4a239144-s] {
+  display: block;
+  width: 1em;
+  height: 1em;
+}
+.rp-icon-button__spinner[data-v-4a239144] {
+  display: block;
+  transform-origin: center;
+  animation: rp-icon-button-spin-4a239144 700ms linear infinite;
+}
+@keyframes rp-icon-button-spin-4a239144 {
+to {
+    transform: rotate(360deg);
+}
+}