ropav 0.0.8 → 0.0.9

package/dist/button-link.css

@@ -0,0 +1,161 @@
+.rp-button[data-v-5511459a] {
+  --_rp-button-bg: var(--rp-color-default);
+  --_rp-button-bg-hover: var(--rp-color-default-hover);
+  --_rp-button-bg-active: var(--rp-color-disabled);
+  --_rp-button-border: var(--rp-color-default-border);
+  --_rp-button-border-hover: var(--_rp-button-border);
+  --_rp-button-border-active: var(--_rp-button-border-hover);
+  --_rp-button-fg: var(--rp-color-default-color);
+  --_rp-button-height: var(--rp-size-control-md);
+  --_rp-button-padding-x: 22px;
+  --_rp-button-font-size: var(--rp-font-size-md);
+  --_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;
+  position: relative;
+  box-sizing: border-box;
+  font-family: var(--rp-font-family);
+  font-weight: var(--rp-font-weight-medium);
+  line-height: 1;
+  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;
+  text-decoration: none;
+  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-5511459a]:hover:not(:disabled):not(.rp-button--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-5511459a]:active:not(:disabled):not(.rp-button--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--size-xs[data-v-5511459a] {
+  --_rp-button-height: var(--rp-size-control-xs);
+  --_rp-button-padding-x: 14px;
+  --_rp-button-font-size: var(--rp-font-size-xs);
+}
+.rp-button--size-sm[data-v-5511459a] {
+  --_rp-button-height: var(--rp-size-control-sm);
+  --_rp-button-padding-x: 18px;
+  --_rp-button-font-size: var(--rp-font-size-sm);
+}
+.rp-button--size-md[data-v-5511459a] {
+  --_rp-button-height: var(--rp-size-control-md);
+  --_rp-button-padding-x: 22px;
+  --_rp-button-font-size: var(--rp-font-size-md);
+}
+.rp-button--size-lg[data-v-5511459a] {
+  --_rp-button-height: var(--rp-size-control-lg);
+  --_rp-button-padding-x: 26px;
+  --_rp-button-font-size: var(--rp-font-size-lg);
+}
+.rp-button--size-xl[data-v-5511459a] {
+  --_rp-button-height: var(--rp-size-control-xl);
+  --_rp-button-padding-x: 32px;
+  --_rp-button-font-size: var(--rp-font-size-xl);
+}
+.rp-button--radius-xs[data-v-5511459a] {
+  --_rp-button-radius: var(--rp-radius-xs);
+}
+.rp-button--radius-sm[data-v-5511459a] {
+  --_rp-button-radius: var(--rp-radius-sm);
+}
+.rp-button--radius-md[data-v-5511459a] {
+  --_rp-button-radius: var(--rp-radius-md);
+}
+.rp-button--radius-lg[data-v-5511459a] {
+  --_rp-button-radius: var(--rp-radius-lg);
+}
+.rp-button--radius-xl[data-v-5511459a] {
+  --_rp-button-radius: var(--rp-radius-xl);
+}
+.rp-button--subtle[data-v-5511459a] {
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--surface[data-v-5511459a] {
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--outline[data-v-5511459a] {
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--ghost[data-v-5511459a] {
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--plain[data-v-5511459a] {
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button[data-v-5511459a]:disabled, .rp-button--disabled[data-v-5511459a] {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+  box-shadow: none;
+  transform: none;
+}
+.rp-button[data-v-5511459a]:focus-visible {
+  outline: none;
+  border-color: var(--rp-color-control-border-focus);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-button--loading .rp-button__content[data-v-5511459a] {
+  opacity: 0;
+}
+.rp-button__content[data-v-5511459a] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rp-spacing-2);
+}
+.rp-button__left[data-v-5511459a], .rp-button__right[data-v-5511459a] {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.rp-button__loading[data-v-5511459a] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+.rp-button__spinner[data-v-5511459a] {
+  display: block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  transform-origin: center;
+  animation: rp-spinner-spin-5511459a 700ms linear infinite;
+}
+@keyframes rp-spinner-spin-5511459a {
+to {
+    transform: rotate(360deg);
+}
+}

package/dist/button-link.js

@@ -0,0 +1,108 @@
+import './button-link.css';
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { n as loader_circle_default, t as getButtonColorStyle } from "./useButtonColor.js";
+import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
+//#region src/components/button-link/button-link.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span data-v-5511459a class=rp-button__loading aria-hidden=true>");
+var t1 = template("<span data-v-5511459a class=rp-button__left>");
+var t2 = template("<span data-v-5511459a class=rp-button__right>");
+var t3 = template("<a data-v-5511459a><span data-v-5511459a class=rp-button__content><span data-v-5511459a class=rp-button__label></span>", 1);
+//#endregion
+//#region src/components/button-link/button-link.vue
+var button_link_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpButtonLink",
+	__name: "button-link",
+	props: {
+		href: {},
+		target: {},
+		rel: {},
+		download: { type: [String, Boolean] },
+		hreflang: {},
+		variant: {},
+		color: {},
+		autoContrast: { type: Boolean },
+		size: {},
+		radius: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props, { slots: $slots }) {
+		const props = __props;
+		const isUnavailable = computed(() => props.disabled || props.loading);
+		const rootClass = computed(() => bem("rp-button", {
+			[props.variant ?? ""]: Boolean(props.variant),
+			[`size-${props.size}`]: Boolean(props.size),
+			[`radius-${props.radius}`]: Boolean(props.radius),
+			disabled: isUnavailable.value,
+			loading: props.loading
+		}));
+		const rootStyle = computed(() => getButtonColorStyle(props.color, props.variant, props.autoContrast));
+		const resolvedHref = computed(() => isUnavailable.value ? void 0 : props.href);
+		const resolvedTarget = computed(() => isUnavailable.value ? void 0 : props.target);
+		const resolvedRel = computed(() => {
+			if (isUnavailable.value) return void 0;
+			return props.rel ?? (props.target === "_blank" ? "noopener noreferrer" : void 0);
+		});
+		const resolvedDownload = computed(() => {
+			if (isUnavailable.value || props.download === false) return void 0;
+			return props.download === true ? "" : props.download;
+		});
+		const resolvedHrefLang = computed(() => isUnavailable.value ? void 0 : props.hreflang);
+		function onDisabledClick(event) {
+			if (!isUnavailable.value) return;
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		}
+		const n17 = t3();
+		const n16 = child(n17, 1);
+		const n11 = child(n16, 1);
+		renderEffect(() => {
+			setClass(n17, rootClass.value);
+			setStyle(n17, rootStyle.value);
+			setProp(n17, "href", resolvedHref.value);
+			setProp(n17, "target", resolvedTarget.value);
+			setProp(n17, "rel", resolvedRel.value);
+			setProp(n17, "download", resolvedDownload.value);
+			setProp(n17, "hreflang", resolvedHrefLang.value);
+			setAttr(n17, "aria-disabled", isUnavailable.value || void 0);
+			setAttr(n17, "aria-busy", __props.loading || void 0);
+			setProp(n17, "tabindex", isUnavailable.value ? -1 : void 0);
+		});
+		setInsertionState(n17, 0, 0);
+		createIf(() => __props.loading, () => {
+			const n5 = t0();
+			setInsertionState(n5, null, 0);
+			createSlot("loading", null, () => {
+				return createComponent(unref(loader_circle_default), { class: "rp-button__spinner" });
+			}, 1);
+			return n5;
+		});
+		setInsertionState(n16, 0, 0);
+		createIf(() => $slots.left, () => {
+			const n9 = t1();
+			setInsertionState(n9, null, 0);
+			createSlot("left", null, null, 1);
+			return n9;
+		});
+		setInsertionState(n11, null, 0);
+		createSlot("default", null, null, 1);
+		setInsertionState(n16, null, 2);
+		createIf(() => $slots.right, () => {
+			const n15 = t2();
+			setInsertionState(n15, null, 0);
+			createSlot("right", null, null, 1);
+			return n15;
+		});
+		on(n17, "click", onDisabledClick, { capture: true });
+		return n17;
+	}
+}), [["__scopeId", "data-v-5511459a"]]);
+//#endregion
+export { button_link_default as t };

package/dist/button.css

@@ -1,36 +1,14 @@
-.rp-button[data-v-4a751fe6] {
-  --_rp-button-accent: var(--_rp-button-custom-color, var(--rp-color-primary));
-  --_rp-button-accent-hover: var(--_rp-button-custom-hover, var(--rp-color-primary-hover));
-  --_rp-button-accent-active: var(--_rp-button-custom-active, var(--rp-color-primary-active));
-  --_rp-button-accent-on: var(--_rp-button-custom-on, var(--rp-color-on-primary));
-  --_rp-button-accent-subtle-bg: var(
-      --_rp-button-custom-subtle-bg,
-      var(--rp-color-primary-subtle-bg)
-  );
-  --_rp-button-accent-subtle-bg-hover: var(
-      --_rp-button-custom-subtle-bg-hover,
-      var(--rp-color-primary-subtle-bg-hover)
-  );
-  --_rp-button-accent-subtle-bg-active: var(
-      --_rp-button-custom-subtle-bg-active,
-      var(--rp-color-primary-subtle-bg-active)
-  );
-  --_rp-button-accent-border: var(--_rp-button-custom-border, var(--rp-color-primary-border));
-  --_rp-button-accent-border-hover: var(
-      --_rp-button-custom-border-hover,
-      var(--rp-color-primary-border-hover)
-  );
-  --_rp-button-accent-fg: var(--_rp-button-custom-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[data-v-3d7e4305] {
+  --_rp-button-bg: var(--rp-color-default);
+  --_rp-button-bg-hover: var(--rp-color-default-hover);
+  --_rp-button-bg-active: var(--rp-color-disabled);
+  --_rp-button-border: var(--rp-color-default-border);
+  --_rp-button-border-hover: var(--_rp-button-border);
   --_rp-button-border-active: var(--_rp-button-border-hover);
-  --_rp-button-fg: var(--rp-color-text);
+  --_rp-button-fg: var(--rp-color-default-color);
   --_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-padding-x: 22px;
+  --_rp-button-font-size: var(--rp-font-size-md);
   --_rp-button-radius: var(--rp-radius-sm);
   --_rp-button-shadow: var(--rp-shadow-sm);
   --_rp-button-shadow-hover: var(--rp-shadow-base);
@@ -42,13 +20,14 @@
   box-sizing: border-box;
   font-family: var(--rp-font-family);
   font-weight: var(--rp-font-weight-medium);
-  line-height: var(--rp-line-height-none);
+  line-height: 1;
   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;
+  text-decoration: none;
   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;
@@ -57,266 +36,108 @@
   font-size: var(--_rp-button-font-size);
   border-radius: var(--_rp-button-radius);
 }
-.rp-button[data-v-4a751fe6]:hover:not(:disabled) {
+.rp-button[data-v-3d7e4305]:hover:not(:disabled):not(.rp-button--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-4a751fe6]:active:not(:disabled) {
+.rp-button[data-v-3d7e4305]:active:not(:disabled):not(.rp-button--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-4a751fe6] {
-  --_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-4a751fe6] {
-  --_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-4a751fe6] {
-  --_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-4a751fe6] {
-  --_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-4a751fe6] {
-  --_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-4a751fe6] {
-  --_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-4a751fe6] {
-  --_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-4a751fe6] {
-  --_rp-button-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-1));
-  --_rp-button-padding-x: var(--rp-spacing-2);
+.rp-button--size-xs[data-v-3d7e4305] {
+  --_rp-button-height: var(--rp-size-control-xs);
+  --_rp-button-padding-x: 14px;
   --_rp-button-font-size: var(--rp-font-size-xs);
 }
-.rp-button--size-sm[data-v-4a751fe6] {
+.rp-button--size-sm[data-v-3d7e4305] {
   --_rp-button-height: var(--rp-size-control-sm);
-  --_rp-button-padding-x: var(--rp-spacing-3);
+  --_rp-button-padding-x: 18px;
   --_rp-button-font-size: var(--rp-font-size-sm);
 }
-.rp-button--size-lg[data-v-4a751fe6] {
+.rp-button--size-md[data-v-3d7e4305] {
+  --_rp-button-height: var(--rp-size-control-md);
+  --_rp-button-padding-x: 22px;
+  --_rp-button-font-size: var(--rp-font-size-md);
+}
+.rp-button--size-lg[data-v-3d7e4305] {
   --_rp-button-height: var(--rp-size-control-lg);
-  --_rp-button-padding-x: var(--rp-spacing-5);
+  --_rp-button-padding-x: 26px;
   --_rp-button-font-size: var(--rp-font-size-lg);
 }
-.rp-button--size-xl[data-v-4a751fe6] {
-  --_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--size-xl[data-v-3d7e4305] {
+  --_rp-button-height: var(--rp-size-control-xl);
+  --_rp-button-padding-x: 32px;
+  --_rp-button-font-size: var(--rp-font-size-xl);
 }
-.rp-button--radius-xs[data-v-4a751fe6] {
+.rp-button--radius-xs[data-v-3d7e4305] {
   --_rp-button-radius: var(--rp-radius-xs);
 }
-.rp-button--radius-sm[data-v-4a751fe6] {
+.rp-button--radius-sm[data-v-3d7e4305] {
   --_rp-button-radius: var(--rp-radius-sm);
 }
-.rp-button--radius-md[data-v-4a751fe6] {
+.rp-button--radius-md[data-v-3d7e4305] {
   --_rp-button-radius: var(--rp-radius-md);
 }
-.rp-button--radius-lg[data-v-4a751fe6] {
+.rp-button--radius-lg[data-v-3d7e4305] {
   --_rp-button-radius: var(--rp-radius-lg);
 }
-.rp-button--radius-xl[data-v-4a751fe6] {
+.rp-button--radius-xl[data-v-3d7e4305] {
   --_rp-button-radius: var(--rp-radius-xl);
 }
-.rp-button--solid[data-v-4a751fe6] {
-  --_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-4a751fe6] {
-  --_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--subtle[data-v-3d7e4305] {
   --_rp-button-shadow: none;
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--surface[data-v-4a751fe6] {
-  --_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--surface[data-v-3d7e4305] {
   --_rp-button-shadow: none;
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--outline[data-v-4a751fe6] {
-  --_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--outline[data-v-3d7e4305] {
   --_rp-button-shadow: none;
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--ghost[data-v-4a751fe6] {
-  --_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--ghost[data-v-3d7e4305] {
   --_rp-button-shadow: none;
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--plain[data-v-4a751fe6] {
-  --_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--plain[data-v-3d7e4305] {
   --_rp-button-shadow: none;
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button[data-v-4a751fe6]:disabled {
+.rp-button[data-v-3d7e4305]:disabled, .rp-button--disabled[data-v-3d7e4305] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
   box-shadow: none;
   transform: none;
 }
-.rp-button[data-v-4a751fe6]:focus-visible {
+.rp-button[data-v-3d7e4305]:focus-visible {
   outline: none;
-  border-color: var(--rp-color-primary);
+  border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-button--loading .rp-button__content[data-v-4a751fe6] {
-  visibility: hidden;
+.rp-button--loading .rp-button__content[data-v-3d7e4305] {
+  opacity: 0;
 }
-.rp-button__content[data-v-4a751fe6] {
+.rp-button__content[data-v-3d7e4305] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--rp-spacing-2);
 }
-.rp-button__left[data-v-4a751fe6], .rp-button__right[data-v-4a751fe6] {
+.rp-button__left[data-v-3d7e4305], .rp-button__right[data-v-3d7e4305] {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
 }
-.rp-button__loading[data-v-4a751fe6] {
+.rp-button__loading[data-v-3d7e4305] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -325,15 +146,15 @@
   left: 50%;
   translate: -50% -50%;
 }
-.rp-button__spinner[data-v-4a751fe6] {
+.rp-button__spinner[data-v-3d7e4305] {
   display: block;
   width: 1em;
   height: 1em;
   flex-shrink: 0;
   transform-origin: center;
-  animation: rp-spinner-spin-4a751fe6 700ms linear infinite;
+  animation: rp-spinner-spin-3d7e4305 700ms linear infinite;
 }
-@keyframes rp-spinner-spin-4a751fe6 {
+@keyframes rp-spinner-spin-3d7e4305 {
 to {
     transform: rotate(360deg);
 }