@strands.gg/accui 2.3.11 → 2.4.0

package/dist/strands-auth-ui.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, provide, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, renderSlot, createBlock, Teleport, createCommentVNode, unref, createElementVNode, toDisplayString, createTextVNode, h, useSlots, Fragment, resolveDynamicComponent, normalizeStyle, createVNode, withCtx, resolveComponent, ref, nextTick, toRefs, watch, renderList, reactive, withModifiers, createStaticVNode, withDirectives, vModelText, Transition, createSlots, vModelSelect, inject, onBeforeUnmount, withKeys, isMemoSame, getCurrentInstance } from "vue";
+import { defineComponent, computed, provide, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, renderSlot, createBlock, Teleport, createCommentVNode, unref, createElementVNode, toDisplayString, createTextVNode, normalizeStyle, h, useSlots, createVNode, Fragment, resolveDynamicComponent, withCtx, resolveComponent, createSlots, ref, nextTick, toRefs, watch, renderList, reactive, withModifiers, createStaticVNode, withDirectives, vModelText, Transition, mergeProps, vModelSelect, inject, onBeforeUnmount, withKeys, isMemoSame, getCurrentInstance } from "vue";
 import { u as useStrandsConfig, p as provideStrandsConfig } from "./useStrandsConfig-C3gBJK6y.es.js";
 import { s } from "./useStrandsConfig-C3gBJK6y.es.js";
 import { u as useStrandsAuth } from "./useStrandsAuth-DoUupKb8.es.js";
@@ -146,7 +146,7 @@ const _hoisted_4$t = {
   "aria-hidden": "true"
 };
 const _hoisted_5$q = ["d"];
-const _hoisted_6$n = { class: "alert-text-container" };
+const _hoisted_6$o = { class: "alert-text-container" };
 const _hoisted_7$m = {
   key: 0,
   class: "alert-dismiss-container"
@@ -202,7 +202,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                 }, null, 8, _hoisted_5$q)
               ]))
             ]),
-            createElementVNode("div", _hoisted_6$n, [
+            createElementVNode("div", _hoisted_6$o, [
               _ctx.title ? (openBlock(), createElementBlock("h3", {
                 key: 0,
                 class: normalizeClass(titleClasses.value)
@@ -242,6 +242,111 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 const StrandsUiAlert = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-1beb49ad"]]);
+const logo = '<svg width="302" height="438" viewBox="0 0 302 438" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M71.5001 96C71.5001 96 132 106 137 61.5C142 17 117.5 3.50005 94.5001 1.50003C71.5001 -0.499996 16.0001 8.5 2.00014 72.5C-6.5 130.5 71.5003 227.5 165 218C258.5 208.5 280.758 148.5 283.5 121C286.242 93.5 277.5 61.5 238.5 61.5C153 61.5 150.501 185 170.5 235C190.5 285 199 279 213 314C227.001 349 217.296 411.458 183 427C129.456 450.65 92 426 78.5 407.5C65 389 68.0003 357 94.5001 344.5C121 332 212.41 393.5 301.5 361" stroke="black"/>\n</svg>\n';
+const _hoisted_1$H = {
+  key: 0,
+  class: "loader-icon"
+};
+const _hoisted_2$y = ["width", "height"];
+const _hoisted_3$v = ["d"];
+const _hoisted_4$s = ["stroke-width"];
+const _hoisted_5$p = ["stroke-width"];
+const _hoisted_6$n = ["width", "height"];
+const _hoisted_7$l = {
+  key: 3,
+  class: "loader-text"
+};
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
+  __name: "UiLoader",
+  props: {
+    size: { default: 80 },
+    color: { default: "primary" },
+    variant: { default: "spinner" },
+    text: {},
+    centered: { type: Boolean, default: true },
+    weight: { default: 30 },
+    fullWidth: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const path = logo.replace(/<svg[^>]*>/, "").replace(/<\/svg>/, "").trim();
+    const d = path.match(/d="([^"]*)"/)?.[1] || "";
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["loader-container", [
+          { "loader-centered": _ctx.centered },
+          `loader-color-${_ctx.color}`
+        ]])
+      }, [
+        _ctx.variant === "spinner" ? (openBlock(), createElementBlock("div", _hoisted_1$H, [
+          (openBlock(), createElementBlock("svg", {
+            width: _ctx.size,
+            height: _ctx.size,
+            viewBox: "0 0 500 500"
+          }, [
+            createElementVNode("defs", null, [
+              createElementVNode("path", {
+                id: "logo-path",
+                d: unref(d),
+                transform: "translate(81, 13) scale(1.0)"
+              }, null, 8, _hoisted_3$v)
+            ]),
+            createElementVNode("use", {
+              href: "#logo-path",
+              fill: "none",
+              stroke: "var(--loader-semi-color)",
+              "stroke-width": _ctx.weight,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, null, 8, _hoisted_4$s),
+            createElementVNode("use", {
+              href: "#logo-path",
+              fill: "none",
+              stroke: "var(--loader-solid-color)",
+              "stroke-width": _ctx.weight,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              class: "loader-animated-path"
+            }, null, 8, _hoisted_5$p)
+          ], 8, _hoisted_2$y))
+        ])) : _ctx.variant === "circle" ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "loader-circle",
+          style: normalizeStyle({ width: `${_ctx.size}px`, height: `${_ctx.size}px` })
+        }, [
+          (openBlock(), createElementBlock("svg", {
+            width: _ctx.size,
+            height: _ctx.size,
+            viewBox: "0 0 50 50"
+          }, [..._cache[0] || (_cache[0] = [
+            createElementVNode("circle", {
+              cx: "25",
+              cy: "25",
+              r: "20",
+              fill: "none",
+              stroke: "var(--loader-solid-color)",
+              "stroke-width": "4",
+              "stroke-linecap": "round",
+              class: "loader-circle-path"
+            }, null, -1)
+          ])], 8, _hoisted_6$n))
+        ], 4)) : _ctx.variant === "bar" ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          class: "loader-bar",
+          style: normalizeStyle({
+            width: _ctx.fullWidth ? "100%" : `${_ctx.size * 1.5}px`,
+            height: `${Math.max(_ctx.size * 0.1, 4)}px`
+          })
+        }, [..._cache[1] || (_cache[1] = [
+          createElementVNode("div", { class: "loader-bar-track" }, [
+            createElementVNode("div", { class: "loader-bar-fill" })
+          ], -1)
+        ])], 4)) : createCommentVNode("", true),
+        _ctx.text ? (openBlock(), createElementBlock("p", _hoisted_7$l, toDisplayString(_ctx.text), 1)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const StrandsUiLoader = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-ba3ffb77"]]);
 /**
  * @license lucide-vue-next v0.542.0 - ISC
  *
@@ -329,6 +434,16 @@ const createLucideIcon = (iconName, iconNode) => (props, { slots, attrs }) => h(
   },
   slots
 );
+/**
+ * @license lucide-vue-next v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ArrowRight = createLucideIcon("arrow-right", [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
+]);
 /**
  * @license lucide-vue-next v0.542.0 - ISC
  *
@@ -345,6 +460,31 @@ const Bell = createLucideIcon("bell", [
     }
   ]
 ]);
+/**
+ * @license lucide-vue-next v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const BookOpen = createLucideIcon("book-open", [
+  ["path", { d: "M12 7v14", key: "1akyts" }],
+  [
+    "path",
+    {
+      d: "M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z",
+      key: "ruj8y"
+    }
+  ]
+]);
+/**
+ * @license lucide-vue-next v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Bookmark = createLucideIcon("bookmark", [
+  ["path", { d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z", key: "1fy3hk" }]
+]);
 /**
  * @license lucide-vue-next v0.542.0 - ISC
  *
@@ -389,6 +529,16 @@ const ChevronsUpDown = createLucideIcon("chevrons-up-down", [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ]);
+/**
+ * @license lucide-vue-next v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Contrast = createLucideIcon("contrast", [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 18a6 6 0 0 0 0-12v12z", key: "j4l70d" }]
+]);
 /**
  * @license lucide-vue-next v0.542.0 - ISC
  *
@@ -409,6 +559,17 @@ const DollarSign = createLucideIcon("dollar-sign", [
   ["line", { x1: "12", x2: "12", y1: "2", y2: "22", key: "7eqyqh" }],
   ["path", { d: "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6", key: "1b0p4s" }]
 ]);
+/**
+ * @license lucide-vue-next v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Download = createLucideIcon("download", [
+  ["path", { d: "M12 15V3", key: "m9g1x1" }],
+  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
+  ["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
+]);
 /**
  * @license lucide-vue-next v0.542.0 - ISC
  *
@@ -435,6 +596,22 @@ const Funnel = createLucideIcon("funnel", [
     }
   ]
 ]);
+/**
+ * @license lucide-vue-next v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Github = createLucideIcon("github", [
+  [
+    "path",
+    {
+      d: "M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4",
+      key: "tonef"
+    }
+  ],
+  ["path", { d: "M9 18c-4.51 2-5-2-7-2", key: "9comsn" }]
+]);
 /**
  * @license lucide-vue-next v0.542.0 - ISC
  *
@@ -449,6 +626,21 @@ const GripVertical = createLucideIcon("grip-vertical", [
   ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
   ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
 ]);
+/**
+ * @license lucide-vue-next v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Heart = createLucideIcon("heart", [
+  [
+    "path",
+    {
+      d: "M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5",
+      key: "mvr1a0"
+    }
+  ]
+]);
 /**
  * @license lucide-vue-next v0.542.0 - ISC
  *
@@ -561,6 +753,75 @@ const Search = createLucideIcon("search", [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ]);
+/**
+ * @license lucide-vue-next v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Share = createLucideIcon("share", [
+  ["path", { d: "M12 2v13", key: "1km8f5" }],
+  ["path", { d: "m16 6-4-4-4 4", key: "13yo43" }],
+  ["path", { d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8", key: "1b2hhj" }]
+]);
+/**
+ * @license lucide-vue-next v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Shield = createLucideIcon("shield", [
+  [
+    "path",
+    {
+      d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z",
+      key: "oel41y"
+    }
+  ]
+]);
+/**
+ * @license lucide-vue-next v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Smile = createLucideIcon("smile", [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M8 14s1.5 2 4 2 4-2 4-2", key: "1y1vjs" }],
+  ["line", { x1: "9", x2: "9.01", y1: "9", y2: "9", key: "yxxnd0" }],
+  ["line", { x1: "15", x2: "15.01", y1: "9", y2: "9", key: "1p4y9e" }]
+]);
+/**
+ * @license lucide-vue-next v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const SquarePen = createLucideIcon("square-pen", [
+  ["path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7", key: "1m0v6g" }],
+  [
+    "path",
+    {
+      d: "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z",
+      key: "ohrbg2"
+    }
+  ]
+]);
+/**
+ * @license lucide-vue-next v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Star = createLucideIcon("star", [
+  [
+    "path",
+    {
+      d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z",
+      key: "r04s7s"
+    }
+  ]
+]);
 /**
  * @license lucide-vue-next v0.542.0 - ISC
  *
@@ -613,24 +874,38 @@ const Users = createLucideIcon("users", [
   ["path", { d: "M22 21v-2a4 4 0 0 0-3-3.87", key: "kshegd" }],
   ["circle", { cx: "9", cy: "7", r: "4", key: "nufk8" }]
 ]);
-const _hoisted_1$H = {
+/**
+ * @license lucide-vue-next v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const X = createLucideIcon("x", [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+]);
+const _hoisted_1$G = {
   key: 0,
   class: "button-loading-content"
 };
-const _hoisted_2$y = { key: 0 };
-const _hoisted_3$v = {
-  key: 1,
-  class: "button-content"
-};
-const _hoisted_4$s = {
+const _hoisted_2$x = { key: 0 };
+const _hoisted_3$u = {
   key: 0,
   class: "leading-icon"
 };
-const _hoisted_5$p = {
+const _hoisted_4$r = {
   key: 1,
+  class: "leading-icon"
+};
+const _hoisted_5$o = {
+  key: 2,
   class: "trailing-icon"
 };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _hoisted_6$m = {
+  key: 3,
+  class: "trailing-icon"
+};
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "UiButton.Content",
   props: {
     loading: { type: Boolean, default: false },
@@ -638,78 +913,158 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     icon: { type: Boolean, default: false },
     iconName: {},
     leadingIcon: {},
-    trailingIcon: {}
+    trailingIcon: {},
+    size: {}
   },
   setup(__props) {
     const LucideIcons = {
-      Plus,
-      Trash2,
-      ExternalLink,
+      ArrowRight,
+      Bell,
+      BookOpen,
+      Bookmark,
       Check,
       ChevronRight,
+      ChevronUp,
       ChevronDown,
-      Sun,
-      Moon,
-      Monitor,
+      ChevronsUpDown,
+      Contrast,
+      DollarSign,
+      Download,
+      Edit: SquarePen,
+      ExternalLink,
+      Github,
+      Heart,
       Home: House,
+      Mail,
+      MapPin,
+      Monitor,
+      Moon,
+      Phone,
+      Plus,
+      Search,
+      Share,
+      Shield,
+      Smile,
+      Star,
+      Sun,
+      Trash2,
       User,
-      Bell
+      X
     };
     const slots = useSlots();
+    const hasLeadingIconSlot = computed(() => {
+      return !!slots["leading-icon"];
+    });
+    const hasTrailingIconSlot = computed(() => {
+      return !!slots["trailing-icon"];
+    });
     const props = __props;
     const getLucideIcon = (iconName) => {
-      if (!iconName) return null;
+      if (!iconName || iconName.trim() === "") return null;
       const pascalCase = iconName.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
       const IconComponent2 = LucideIcons[pascalCase];
       return IconComponent2 || null;
     };
-    const LeadingIconComponent = computed(() => props.leadingIcon ? getLucideIcon(props.leadingIcon) : null);
-    const TrailingIconComponent = computed(() => props.trailingIcon ? getLucideIcon(props.trailingIcon) : null);
-    const IconComponent = computed(() => props.iconName ? getLucideIcon(props.iconName) : null);
+    const LeadingIconComponent = computed(() => {
+      if (!props.leadingIcon || props.leadingIcon.trim() === "") {
+        return null;
+      }
+      return getLucideIcon(props.leadingIcon);
+    });
+    const TrailingIconComponent = computed(() => {
+      if (!props.trailingIcon || props.trailingIcon.trim() === "") {
+        return null;
+      }
+      return getLucideIcon(props.trailingIcon);
+    });
+    const IconComponent = computed(() => {
+      return props.iconName && props.iconName.trim() !== "" ? getLucideIcon(props.iconName) : null;
+    });
+    const iconSizeClass = computed(() => {
+      switch (props.size) {
+        case "xs":
+          return "button-icon-xs";
+        case "sm":
+          return "button-icon-sm";
+        case "md":
+          return "button-icon-md";
+        case "lg":
+          return "button-icon-lg";
+        case "xl":
+          return "button-icon-xl";
+        default:
+          return "button-icon-md";
+      }
+    });
+    const loaderSize = computed(() => {
+      switch (props.size) {
+        case "xs":
+          return 16;
+        // 1rem - 1.33x text
+        case "sm":
+          return 18;
+        // 1.125rem - 1.28x text
+        case "md":
+          return 20;
+        // 1.25rem - 1.4x text
+        case "lg":
+          return 24;
+        // 1.5rem - 1.5x text
+        case "xl":
+          return 28;
+        // 1.75rem - 1.55x text
+        default:
+          return 20;
+      }
+    });
+    const sizeClass = computed(() => {
+      return props.size ? `button-content-${props.size}` : "button-content-md";
+    });
     return (_ctx, _cache) => {
-      return _ctx.loading ? (openBlock(), createElementBlock("span", _hoisted_1$H, [
-        _cache[0] || (_cache[0] = createElementVNode("svg", {
-          class: "button-loading-icon",
-          fill: "none",
-          viewBox: "0 0 24 24"
-        }, [
-          createElementVNode("circle", {
-            class: "button-loading-track",
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            "stroke-width": "4"
-          }),
-          createElementVNode("path", {
-            class: "button-loading-spinner",
-            fill: "currentColor",
-            d: "m4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          })
-        ], -1)),
-        !_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_2$y, toDisplayString(_ctx.loadingText || "Loading..."), 1)) : createCommentVNode("", true)
-      ])) : (openBlock(), createElementBlock("span", _hoisted_3$v, [
+      return _ctx.loading ? (openBlock(), createElementBlock("span", _hoisted_1$G, [
+        createVNode(StrandsUiLoader, {
+          variant: "circle",
+          size: loaderSize.value,
+          centered: false,
+          color: "white"
+        }, null, 8, ["size"]),
+        !_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_2$x, toDisplayString(_ctx.loadingText || "Loading..."), 1)) : createCommentVNode("", true)
+      ])) : (openBlock(), createElementBlock("span", {
+        key: 1,
+        class: normalizeClass(["button-content", sizeClass.value])
+      }, [
         _ctx.icon ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          IconComponent.value && !unref(slots)["default"] ? (openBlock(), createBlock(resolveDynamicComponent(IconComponent.value), { key: 0 })) : renderSlot(_ctx.$slots, "default", { key: 1 })
+          IconComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(IconComponent.value), {
+            key: 0,
+            class: normalizeClass(iconSizeClass.value)
+          }, null, 8, ["class"])) : createCommentVNode("", true)
         ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          IconComponent.value || LeadingIconComponent.value || unref(slots)["leading-icon"] ? (openBlock(), createElementBlock("span", _hoisted_4$s, [
-            IconComponent.value && !LeadingIconComponent.value && !unref(slots)["leading-icon"] ? (openBlock(), createBlock(resolveDynamicComponent(IconComponent.value), { key: 0 })) : createCommentVNode("", true),
-            LeadingIconComponent.value && !unref(slots)["leading-icon"] ? (openBlock(), createBlock(resolveDynamicComponent(LeadingIconComponent.value), { key: 1 })) : createCommentVNode("", true),
-            unref(slots)["leading-icon"] ? renderSlot(_ctx.$slots, "leading-icon", { key: 2 }) : createCommentVNode("", true)
+          LeadingIconComponent.value ? (openBlock(), createElementBlock("span", _hoisted_3$u, [
+            (openBlock(), createBlock(resolveDynamicComponent(LeadingIconComponent.value), {
+              class: normalizeClass(iconSizeClass.value)
+            }, null, 8, ["class"]))
+          ])) : createCommentVNode("", true),
+          hasLeadingIconSlot.value ? (openBlock(), createElementBlock("span", _hoisted_4$r, [
+            renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+          ])) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "icon", {}, void 0, true),
+          renderSlot(_ctx.$slots, "default", {}, void 0, true),
+          TrailingIconComponent.value ? (openBlock(), createElementBlock("span", _hoisted_5$o, [
+            (openBlock(), createBlock(resolveDynamicComponent(TrailingIconComponent.value), {
+              class: normalizeClass(iconSizeClass.value)
+            }, null, 8, ["class"]))
           ])) : createCommentVNode("", true),
-          renderSlot(_ctx.$slots, "icon"),
-          renderSlot(_ctx.$slots, "default"),
-          TrailingIconComponent.value || unref(slots)["trailing-icon"] ? (openBlock(), createElementBlock("span", _hoisted_5$p, [
-            TrailingIconComponent.value && !unref(slots)["trailing-icon"] ? (openBlock(), createBlock(resolveDynamicComponent(TrailingIconComponent.value), { key: 0 })) : createCommentVNode("", true),
-            unref(slots)["trailing-icon"] ? renderSlot(_ctx.$slots, "trailing-icon", { key: 1 }) : createCommentVNode("", true)
+          hasTrailingIconSlot.value ? (openBlock(), createElementBlock("span", _hoisted_6$m, [
+            renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ], 64))
-      ]));
+      ], 2));
     };
   }
 });
-const _hoisted_1$G = ["href", "target", "rel"];
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const UiButtonContent = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-474060cc"]]);
+const _hoisted_1$F = ["href", "target", "rel"];
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "UiButton.Anchor",
   props: {
     to: {},
@@ -757,7 +1112,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(_ctx.buttonStyles),
         onClick: handleLinkClick
       }, [
-        createVNode(_sfc_main$M, {
+        createVNode(UiButtonContent, {
           loading: _ctx.loading,
           "loading-text": _ctx.loadingText,
           icon: _ctx.icon,
@@ -779,11 +1134,11 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 8, ["loading", "loading-text", "icon", "icon-name", "leading-icon", "trailing-icon"])
-      ], 14, _hoisted_1$G);
+      ], 14, _hoisted_1$F);
     };
   }
 });
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "UiButton.Nuxt",
   props: {
     to: {},
@@ -817,7 +1172,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
         onClick: handleLinkClick
       }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$M, {
+          createVNode(UiButtonContent, {
             loading: _ctx.loading,
             "loading-text": _ctx.loadingText,
             icon: _ctx.icon,
@@ -845,7 +1200,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "UiButton.Vue",
   props: {
     to: {},
@@ -879,7 +1234,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         onClick: handleLinkClick
       }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$M, {
+          createVNode(UiButtonContent, {
             loading: _ctx.loading,
             "loading-text": _ctx.loadingText,
             icon: _ctx.icon,
@@ -907,8 +1262,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$F = ["type", "disabled"];
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _hoisted_1$E = ["type", "disabled"];
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "UiButton",
   props: {
     variant: { default: "primary" },
@@ -961,9 +1316,10 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         props.fullWidth ? "ui-button-full-width" : "",
         props.icon ? "ui-button-icon" : "",
         props.squircle ? "ui-button-squircle" : ""
-      ].filter(Boolean).join(" ");
+      ].filter(Boolean);
       return classes;
     });
+    const buttonClassString = computed(() => buttonClasses.value.join(" "));
     const buttonStyles = computed(() => {
       return {
         fontWeight: props.fontWeight
@@ -974,33 +1330,43 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         key: 0,
         type: _ctx.type,
         disabled: _ctx.disabled || _ctx.loading,
-        class: normalizeClass(buttonClasses.value),
+        class: normalizeClass(buttonClassString.value),
         style: normalizeStyle(buttonStyles.value),
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
       }, [
-        createVNode(_sfc_main$M, {
+        createVNode(UiButtonContent, {
           loading: _ctx.loading,
           "loading-text": _ctx.loadingText,
           icon: _ctx.icon,
           "icon-name": _ctx.iconName,
           "leading-icon": _ctx.leadingIcon,
-          "trailing-icon": _ctx.trailingIcon
-        }, {
-          "leading-icon": withCtx(() => [
-            renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
-          ]),
+          "trailing-icon": _ctx.trailingIcon,
+          size: _ctx.size
+        }, createSlots({
           icon: withCtx(() => [
             renderSlot(_ctx.$slots, "icon", {}, void 0, true)
           ]),
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "default", {}, void 0, true)
           ]),
-          "trailing-icon": withCtx(() => [
-            renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
-          ]),
-          _: 3
-        }, 8, ["loading", "loading-text", "icon", "icon-name", "leading-icon", "trailing-icon"])
-      ], 14, _hoisted_1$F)) : isNuxtAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$K, {
+          _: 2
+        }, [
+          _ctx.$slots["leading-icon"] ? {
+            name: "leading-icon",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots["trailing-icon"] ? {
+            name: "trailing-icon",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["loading", "loading-text", "icon", "icon-name", "leading-icon", "trailing-icon", "size"])
+      ], 14, _hoisted_1$E)) : isNuxtAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$J, {
         key: 1,
         to: _ctx.to,
         disabled: _ctx.disabled,
@@ -1013,21 +1379,30 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         "button-classes": buttonClasses.value,
         "button-styles": buttonStyles.value,
         onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click", $event))
-      }, {
-        "leading-icon": withCtx(() => [
-          renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
-        ]),
+      }, createSlots({
         icon: withCtx(() => [
           renderSlot(_ctx.$slots, "icon", {}, void 0, true)
         ]),
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
-        "trailing-icon": withCtx(() => [
-          renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
-        ]),
-        _: 3
-      }, 8, ["to", "disabled", "loading", "loading-text", "icon", "icon-name", "leading-icon", "trailing-icon", "button-classes", "button-styles"])) : isVueRouterAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$J, {
+        _: 2
+      }, [
+        _ctx.$slots["leading-icon"] ? {
+          name: "leading-icon",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots["trailing-icon"] ? {
+          name: "trailing-icon",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "icon-name", "leading-icon", "trailing-icon", "button-classes", "button-styles"])) : isVueRouterAvailable.value && _ctx.to ? (openBlock(), createBlock(_sfc_main$I, {
         key: 2,
         to: _ctx.to,
         disabled: _ctx.disabled,
@@ -1040,21 +1415,30 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         "button-classes": buttonClasses.value,
         "button-styles": buttonStyles.value,
         onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("click", $event))
-      }, {
-        "leading-icon": withCtx(() => [
-          renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
-        ]),
+      }, createSlots({
         icon: withCtx(() => [
           renderSlot(_ctx.$slots, "icon", {}, void 0, true)
         ]),
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
-        "trailing-icon": withCtx(() => [
-          renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
-        ]),
-        _: 3
-      }, 8, ["to", "disabled", "loading", "loading-text", "icon", "icon-name", "leading-icon", "trailing-icon", "button-classes", "button-styles"])) : (openBlock(), createBlock(_sfc_main$L, {
+        _: 2
+      }, [
+        _ctx.$slots["leading-icon"] ? {
+          name: "leading-icon",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots["trailing-icon"] ? {
+          name: "trailing-icon",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["to", "disabled", "loading", "loading-text", "icon", "icon-name", "leading-icon", "trailing-icon", "button-classes", "button-styles"])) : (openBlock(), createBlock(_sfc_main$K, {
         key: 3,
         to: _ctx.to,
         href: _ctx.href,
@@ -1069,35 +1453,49 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         "button-classes": buttonClasses.value,
         "button-styles": buttonStyles.value,
         onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("click", $event))
-      }, {
-        "leading-icon": withCtx(() => [
-          renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
-        ]),
+      }, createSlots({
         icon: withCtx(() => [
           renderSlot(_ctx.$slots, "icon", {}, void 0, true)
         ]),
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
-        "trailing-icon": withCtx(() => [
-          renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
-        ]),
-        _: 3
-      }, 8, ["to", "href", "external", "disabled", "loading", "loading-text", "icon", "icon-name", "leading-icon", "trailing-icon", "button-classes", "button-styles"]));
+        _: 2
+      }, [
+        _ctx.$slots["leading-icon"] ? {
+          name: "leading-icon",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "leading-icon", {}, void 0, true)
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots["trailing-icon"] ? {
+          name: "trailing-icon",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["to", "href", "external", "disabled", "loading", "loading-text", "icon", "icon-name", "leading-icon", "trailing-icon", "button-classes", "button-styles"]));
     };
   }
 });
-const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-5fdcd316"]]);
-const _hoisted_1$E = {
+const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-25067b15"]]);
+const CompoundUiButton = StrandsUiButton;
+CompoundUiButton.Content = UiButtonContent;
+CompoundUiButton.Anchor = _sfc_main$K;
+CompoundUiButton.Nuxt = _sfc_main$J;
+CompoundUiButton.Vue = _sfc_main$I;
+const _hoisted_1$D = {
   key: 0,
   class: "ui-card-header"
 };
-const _hoisted_2$x = { class: "ui-card-content" };
-const _hoisted_3$u = {
+const _hoisted_2$w = { class: "ui-card-content" };
+const _hoisted_3$t = {
   key: 1,
   class: "ui-card-footer"
 };
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "UiCard",
   props: {
     variant: { default: "default" },
@@ -1115,30 +1513,30 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           `ui-card-color-${_ctx.color}`
         ]])
       }, [
-        _ctx.$slots["header"] ? (openBlock(), createElementBlock("div", _hoisted_1$E, [
+        _ctx.$slots["header"] ? (openBlock(), createElementBlock("div", _hoisted_1$D, [
           renderSlot(_ctx.$slots, "header", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$x, [
+        createElementVNode("div", _hoisted_2$w, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
-        _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_3$u, [
+        _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_3$t, [
           renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const StrandsUiCard = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-d4383926"]]);
-const _hoisted_1$D = { class: "accui-component-scope" };
-const _hoisted_2$w = { class: "input-container" };
-const _hoisted_3$t = ["for"];
-const _hoisted_4$r = {
+const StrandsUiCard = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-e189c5aa"]]);
+const _hoisted_1$C = { class: "accui-component-scope" };
+const _hoisted_2$v = { class: "input-container" };
+const _hoisted_3$s = ["for"];
+const _hoisted_4$q = {
   key: 0,
   class: "input-required"
 };
-const _hoisted_5$o = { class: "input-wrapper" };
-const _hoisted_6$m = ["id", "type", "value", "placeholder", "disabled", "required", "autocomplete", "name", "inputmode", "maxlength"];
-const _hoisted_7$l = ["aria-label"];
+const _hoisted_5$n = { class: "input-wrapper" };
+const _hoisted_6$l = ["id", "type", "value", "placeholder", "disabled", "required", "autocomplete", "name", "inputmode", "maxlength"];
+const _hoisted_7$k = ["aria-label"];
 const _hoisted_8$k = {
   key: 0,
   class: "input-toggle-icon",
@@ -1165,7 +1563,7 @@ const _hoisted_12$i = {
   key: 2,
   class: "input-help-text"
 };
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "UiInput",
   props: {
     modelValue: {},
@@ -1247,17 +1645,17 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       showPassword.value = !showPassword.value;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$D, [
-        createElementVNode("div", _hoisted_2$w, [
+      return openBlock(), createElementBlock("div", _hoisted_1$C, [
+        createElementVNode("div", _hoisted_2$v, [
           _ctx.label ? (openBlock(), createElementBlock("label", {
             key: 0,
             for: inputId.value,
             class: "input-label"
           }, [
             createTextVNode(toDisplayString(_ctx.label) + " ", 1),
-            _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_4$r, "*")) : createCommentVNode("", true)
-          ], 8, _hoisted_3$t)) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_5$o, [
+            _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_4$q, "*")) : createCommentVNode("", true)
+          ], 8, _hoisted_3$s)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_5$n, [
             createElementVNode("div", {
               class: normalizeClass(["input-field-wrapper", [
                 { "input-error": _ctx.error },
@@ -1287,7 +1685,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
                 onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("blur", $event)),
                 onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("focus", $event)),
                 onKeydown: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("keydown", $event))
-              }, null, 42, _hoisted_6$m),
+              }, null, 42, _hoisted_6$l),
               _ctx.type === "password" ? (openBlock(), createElementBlock("button", {
                 key: 1,
                 type: "button",
@@ -1316,7 +1714,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
                     d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                   }, null, -1)
                 ])]))
-              ], 8, _hoisted_7$l)) : createCommentVNode("", true),
+              ], 8, _hoisted_7$k)) : createCommentVNode("", true),
               FollowingIconComponent.value || _ctx.$slots["following-icon"] ? (openBlock(), createElementBlock("div", {
                 key: 2,
                 class: normalizeClass(["input-following-icon", { "cursor-pointer": _ctx.$attrs["onTrailing-action"] }]),
@@ -1335,10 +1733,10 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-26b9fb0d"]]);
-const _hoisted_1$C = ["disabled", "aria-disabled"];
-const _hoisted_2$v = ["href", "target", "rel", "aria-disabled"];
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-26b9fb0d"]]);
+const _hoisted_1$B = ["disabled", "aria-disabled"];
+const _hoisted_2$u = ["href", "target", "rel", "aria-disabled"];
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "UiLink",
   props: {
     href: {},
@@ -1377,8 +1775,6 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     const getColorValues = () => ({
       primary: getCurrentAccentColor(),
       // configurable strands accent
-      secondary: "#6b7280",
-      // gray-500
       success: "#059669",
       // emerald-600
       warning: "#d97706",
@@ -1430,7 +1826,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
         onClick: handleClick
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 14, _hoisted_1$C)) : (openBlock(), createElementBlock("a", {
+      ], 14, _hoisted_1$B)) : (openBlock(), createElementBlock("a", {
         key: 1,
         class: normalizeClass(["ui-link", [
           `ui-link-${_ctx.variant}`,
@@ -1446,23 +1842,23 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
         onClick: handleClick
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 14, _hoisted_2$v));
+      ], 14, _hoisted_2$u));
     };
   }
 });
-const StrandsUiLink = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-ae8b647b"]]);
-const _hoisted_1$B = { class: "tabs-wrapper" };
-const _hoisted_2$u = {
+const StrandsUiLink = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-3bf99110"]]);
+const _hoisted_1$A = { class: "tabs-wrapper" };
+const _hoisted_2$t = {
   key: 0,
   class: "tabs-before"
 };
-const _hoisted_3$s = ["aria-selected", "id", "onClick"];
-const _hoisted_4$q = {
+const _hoisted_3$r = ["aria-selected", "id", "onClick"];
+const _hoisted_4$p = {
   key: 1,
   class: "tabs-after"
 };
-const _hoisted_5$n = ["aria-labelledby"];
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _hoisted_5$m = ["aria-labelledby"];
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "UiTabs",
   props: {
     modelValue: {},
@@ -1692,6 +2088,68 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
         }, 200);
       });
     };
+    let resizeTimeout = null;
+    const handleResize = () => {
+      const activeIndex = props.tabs.findIndex((tab) => tab.value === props.modelValue);
+      if (activeIndex !== -1 && tabButtons.value && tabButtons.value[activeIndex]) {
+        const wasTransitionsEnabled = enableTransitions.value;
+        enableTransitions.value = false;
+        const newTab = tabButtons.value[activeIndex];
+        const container = newTab.parentElement;
+        if (container) {
+          const newDimensions = calculateUnderlineDimensions(newTab, container);
+          const newTabRect = newTab.getBoundingClientRect();
+          const containerRect = container.getBoundingClientRect();
+          let newTabPos, newTabSize;
+          if (props.orientation === "vertical") {
+            newTabPos = newTabRect.top - containerRect.top;
+            newTabSize = newTabRect.height;
+            underlineStyle.value = {
+              height: `${newDimensions.height}px`,
+              top: `${newDimensions.top}px`,
+              width: `${newDimensions.width}px`,
+              left: `${newDimensions.left}px`,
+              opacity: "1"
+            };
+            backgroundStyle.value = {
+              height: `${newTabSize}px`,
+              top: `${newTabPos}px`,
+              width: `${newTabRect.width}px`,
+              left: "0",
+              opacity: "1"
+            };
+          } else {
+            newTabPos = newTabRect.left - containerRect.left;
+            newTabSize = newTabRect.width;
+            underlineStyle.value = {
+              width: `${newDimensions.width}px`,
+              left: `${newDimensions.left}px`,
+              height: `${newDimensions.height}px`,
+              top: `${newDimensions.top}px`,
+              opacity: "1"
+            };
+            backgroundStyle.value = {
+              width: `${newTabSize}px`,
+              left: `${newTabPos}px`,
+              height: "100%",
+              top: "0",
+              opacity: "1"
+            };
+          }
+        }
+        currentTabIndex = activeIndex;
+        isAnimating = false;
+        setTimeout(() => {
+          enableTransitions.value = wasTransitionsEnabled;
+        }, 10);
+      }
+      if (resizeTimeout) {
+        clearTimeout(resizeTimeout);
+      }
+      resizeTimeout = setTimeout(() => {
+        resizeTimeout = null;
+      }, 50);
+    };
     onMounted(async () => {
       await nextTick();
       const activeIndex = props.tabs.findIndex((tab) => tab.value === props.modelValue);
@@ -1701,6 +2159,14 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           enableTransitions.value = true;
         }, 50);
       }
+      window.addEventListener("resize", handleResize);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", handleResize);
+      if (resizeTimeout) {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = null;
+      }
     });
     const { modelValue } = toRefs(props);
     watch(modelValue, async () => {
@@ -1719,7 +2185,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           { "tabs-container--with-content": hasContentSlot.value }
         ]])
       }, [
-        createElementVNode("div", _hoisted_1$B, [
+        createElementVNode("div", _hoisted_1$A, [
           createElementVNode("div", {
             class: normalizeClass(["tabs-list", [
               `tabs-list--${_ctx.orientation}`,
@@ -1728,7 +2194,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             ]]),
             style: normalizeStyle(_ctx.sticky ? { position: "sticky", [_ctx.sticky.side]: `${_ctx.sticky.offset}px`, zIndex: 10 } : {})
           }, [
-            _ctx.$slots["before"] ? (openBlock(), createElementBlock("div", _hoisted_2$u, [
+            _ctx.$slots["before"] ? (openBlock(), createElementBlock("div", _hoisted_2$t, [
               renderSlot(_ctx.$slots, "before", {}, void 0, true)
             ])) : createCommentVNode("", true),
             createElementVNode("div", {
@@ -1752,141 +2218,36 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                   id: `tab-${tab.value}`,
                   role: "tab",
                   onClick: ($event) => handleTabClick(tab.value, index)
-                }, toDisplayString(tab.label), 11, _hoisted_3$s);
-              }), 128)),
-              createElementVNode("div", {
-                class: normalizeClass(["tab-background", { "no-transition": !enableTransitions.value }]),
-                style: normalizeStyle(backgroundStyle.value)
-              }, null, 6),
-              createElementVNode("div", {
-                class: normalizeClass(["tab-underline", { "no-transition": !enableTransitions.value }]),
-                style: normalizeStyle(underlineStyle.value)
-              }, null, 6)
-            ], 2),
-            _ctx.$slots["after"] ? (openBlock(), createElementBlock("div", _hoisted_4$q, [
-              renderSlot(_ctx.$slots, "after", {}, void 0, true)
-            ])) : createCommentVNode("", true)
-          ], 6)
-        ]),
-        hasContentSlot.value ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: normalizeClass(["tabs-content", `tabs-content--${_ctx.orientation}`]),
-          role: "tabpanel",
-          "aria-labelledby": `tab-${unref(modelValue)}`,
-          id: "tabpanel"
-        }, [
-          renderSlot(_ctx.$slots, "content", { activeTab: activeTab.value }, void 0, true)
-        ], 10, _hoisted_5$n)) : createCommentVNode("", true)
-      ], 2);
-    };
-  }
-});
-const StrandsUiTabs = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-fcde7995"]]);
-const logo = '<svg width="302" height="438" viewBox="0 0 302 438" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M71.5001 96C71.5001 96 132 106 137 61.5C142 17 117.5 3.50005 94.5001 1.50003C71.5001 -0.499996 16.0001 8.5 2.00014 72.5C-6.5 130.5 71.5003 227.5 165 218C258.5 208.5 280.758 148.5 283.5 121C286.242 93.5 277.5 61.5 238.5 61.5C153 61.5 150.501 185 170.5 235C190.5 285 199 279 213 314C227.001 349 217.296 411.458 183 427C129.456 450.65 92 426 78.5 407.5C65 389 68.0003 357 94.5001 344.5C121 332 212.41 393.5 301.5 361" stroke="black"/>\n</svg>\n';
-const _hoisted_1$A = {
-  key: 0,
-  class: "loader-icon"
-};
-const _hoisted_2$t = ["width", "height"];
-const _hoisted_3$r = ["d"];
-const _hoisted_4$p = ["stroke-width"];
-const _hoisted_5$m = ["stroke-width"];
-const _hoisted_6$l = ["width", "height"];
-const _hoisted_7$k = {
-  key: 3,
-  class: "loader-text"
-};
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
-  __name: "UiLoader",
-  props: {
-    size: { default: 80 },
-    color: { default: "primary" },
-    variant: { default: "spinner" },
-    text: {},
-    centered: { type: Boolean, default: true },
-    weight: { default: 30 },
-    fullWidth: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    const path = logo.replace(/<svg[^>]*>/, "").replace(/<\/svg>/, "").trim();
-    const d = path.match(/d="([^"]*)"/)?.[1] || "";
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["loader-container", [
-          { "loader-centered": _ctx.centered },
-          `loader-color-${_ctx.color}`
-        ]])
-      }, [
-        _ctx.variant === "spinner" ? (openBlock(), createElementBlock("div", _hoisted_1$A, [
-          (openBlock(), createElementBlock("svg", {
-            width: _ctx.size,
-            height: _ctx.size,
-            viewBox: "0 0 500 500"
-          }, [
-            createElementVNode("defs", null, [
-              createElementVNode("path", {
-                id: "logo-path",
-                d: unref(d),
-                transform: "translate(81, 13) scale(1.0)"
-              }, null, 8, _hoisted_3$r)
-            ]),
-            createElementVNode("use", {
-              href: "#logo-path",
-              fill: "none",
-              stroke: "var(--loader-semi-color)",
-              "stroke-width": _ctx.weight,
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round"
-            }, null, 8, _hoisted_4$p),
-            createElementVNode("use", {
-              href: "#logo-path",
-              fill: "none",
-              stroke: "var(--loader-solid-color)",
-              "stroke-width": _ctx.weight,
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round",
-              class: "loader-animated-path"
-            }, null, 8, _hoisted_5$m)
-          ], 8, _hoisted_2$t))
-        ])) : _ctx.variant === "circle" ? (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: "loader-circle",
-          style: normalizeStyle({ width: `${_ctx.size}px`, height: `${_ctx.size}px` })
-        }, [
-          (openBlock(), createElementBlock("svg", {
-            width: _ctx.size,
-            height: _ctx.size,
-            viewBox: "0 0 50 50"
-          }, [..._cache[0] || (_cache[0] = [
-            createElementVNode("circle", {
-              cx: "25",
-              cy: "25",
-              r: "20",
-              fill: "none",
-              stroke: "var(--loader-solid-color)",
-              "stroke-width": "4",
-              "stroke-linecap": "round",
-              class: "loader-circle-path"
-            }, null, -1)
-          ])], 8, _hoisted_6$l))
-        ], 4)) : _ctx.variant === "bar" ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          class: "loader-bar",
-          style: normalizeStyle({
-            width: _ctx.fullWidth ? "100%" : `${_ctx.size * 1.5}px`,
-            height: `${Math.max(_ctx.size * 0.1, 4)}px`
-          })
-        }, [..._cache[1] || (_cache[1] = [
-          createElementVNode("div", { class: "loader-bar-track" }, [
-            createElementVNode("div", { class: "loader-bar-fill" })
-          ], -1)
-        ])], 4)) : createCommentVNode("", true),
-        _ctx.text ? (openBlock(), createElementBlock("p", _hoisted_7$k, toDisplayString(_ctx.text), 1)) : createCommentVNode("", true)
+                }, toDisplayString(tab.label), 11, _hoisted_3$r);
+              }), 128)),
+              createElementVNode("div", {
+                class: normalizeClass(["tab-background", { "no-transition": !enableTransitions.value }]),
+                style: normalizeStyle(backgroundStyle.value)
+              }, null, 6),
+              createElementVNode("div", {
+                class: normalizeClass(["tab-underline", { "no-transition": !enableTransitions.value }]),
+                style: normalizeStyle(underlineStyle.value)
+              }, null, 6)
+            ], 2),
+            _ctx.$slots["after"] ? (openBlock(), createElementBlock("div", _hoisted_4$p, [
+              renderSlot(_ctx.$slots, "after", {}, void 0, true)
+            ])) : createCommentVNode("", true)
+          ], 6)
+        ]),
+        hasContentSlot.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["tabs-content", `tabs-content--${_ctx.orientation}`]),
+          role: "tabpanel",
+          "aria-labelledby": `tab-${unref(modelValue)}`,
+          id: "tabpanel"
+        }, [
+          renderSlot(_ctx.$slots, "content", { activeTab: activeTab.value }, void 0, true)
+        ], 10, _hoisted_5$m)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const StrandsUiLoader = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-ba3ffb77"]]);
+const StrandsUiTabs = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-95268d49"]]);
 const _hoisted_1$z = ["aria-pressed", "aria-labelledby"];
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "UiToggle",
@@ -3874,37 +4235,75 @@ const _hoisted_20$9 = {
 };
 const _hoisted_21$8 = ["cx", "fill"];
 const _hoisted_22$8 = { class: "ui-color-picker-inputs" };
-const _hoisted_23$7 = { class: "ui-color-picker-input-group" };
-const _hoisted_24$6 = { class: "ui-color-picker-input-row" };
-const _hoisted_25$6 = { class: "ui-color-picker-input-group" };
-const _hoisted_26$5 = { class: "ui-color-picker-input-group" };
+const _hoisted_23$7 = {
+  key: 0,
+  class: "ui-color-picker-input-row"
+};
+const _hoisted_24$6 = { class: "ui-color-picker-input-group" };
+const _hoisted_25$6 = { class: "ui-color-picker-button-wrapper" };
+const _hoisted_26$5 = {
+  key: 1,
+  class: "ui-color-picker-input-row"
+};
 const _hoisted_27$5 = { class: "ui-color-picker-input-group" };
-const _hoisted_28$5 = {
+const _hoisted_28$5 = { class: "ui-color-picker-input-group" };
+const _hoisted_29$5 = { class: "ui-color-picker-input-group" };
+const _hoisted_30$5 = {
+  key: 0,
+  class: "ui-color-picker-input-group"
+};
+const _hoisted_31$5 = { class: "ui-color-picker-button-wrapper" };
+const _hoisted_32$5 = {
+  key: 2,
+  class: "ui-color-picker-input-row"
+};
+const _hoisted_33$4 = { class: "ui-color-picker-input-group" };
+const _hoisted_34$3 = { class: "ui-color-picker-input-group" };
+const _hoisted_35$3 = { class: "ui-color-picker-input-group" };
+const _hoisted_36$3 = {
+  key: 0,
+  class: "ui-color-picker-input-group"
+};
+const _hoisted_37$2 = { class: "ui-color-picker-button-wrapper" };
+const _hoisted_38$1 = {
+  key: 3,
+  class: "ui-color-picker-input-row"
+};
+const _hoisted_39$1 = { class: "ui-color-picker-input-group" };
+const _hoisted_40$1 = { class: "ui-color-picker-input-group" };
+const _hoisted_41$1 = { class: "ui-color-picker-input-group" };
+const _hoisted_42$1 = {
   key: 0,
   class: "ui-color-picker-input-group"
 };
-const _hoisted_29$5 = { class: "ui-color-picker-swatches" };
-const _hoisted_30$5 = { class: "ui-color-picker-swatch-row ui-color-picker-swatch-row--additional" };
-const _hoisted_31$5 = ["onClick"];
-const _hoisted_32$5 = { class: "ui-color-picker-swatch-row" };
-const _hoisted_33$4 = ["onClick"];
-const _hoisted_34$3 = { class: "ui-color-picker-shades-inner" };
-const _hoisted_35$3 = { class: "ui-color-picker-swatch-row ui-color-picker-swatch-row--shades" };
-const _hoisted_36$3 = ["onClick"];
+const _hoisted_43$1 = { class: "ui-color-picker-button-wrapper" };
+const _hoisted_44$1 = {
+  key: 1,
+  class: "ui-color-picker-swatches"
+};
+const _hoisted_45$1 = { class: "ui-color-picker-swatch-row ui-color-picker-swatch-row--additional" };
+const _hoisted_46$1 = ["onClick"];
+const _hoisted_47$1 = { class: "ui-color-picker-swatch-row" };
+const _hoisted_48$1 = ["onClick"];
+const _hoisted_49$1 = { class: "ui-color-picker-shades-inner" };
+const _hoisted_50$1 = { class: "ui-color-picker-swatch-row ui-color-picker-swatch-row--shades" };
+const _hoisted_51$1 = ["onClick"];
 const GLOBAL_PICKER_WIDTH = 200;
 const GLOBAL_PICKER_HEIGHT = 150;
 const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "UiColorPicker.Picker",
   props: {
+    contrastLabel: {},
     modelValue: {},
     disabled: { type: Boolean },
     showAlpha: { type: Boolean },
+    defaultColorFormat: { default: "hex" },
     swatches: {},
     additionalSwatches: {},
     additionalSwatchesLabel: {},
+    showSwatches: { type: Boolean, default: true },
     compareColor: {},
-    showContrast: { type: Boolean },
-    contrastLabel: {}
+    showContrast: { type: Boolean }
   },
   emits: ["update:modelValue", "change"],
   setup(__props, { emit: __emit }) {
@@ -3926,9 +4325,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     const saturation = ref(1);
     const brightness = ref(1);
     const alpha = ref(1);
-    const hexInput = ref(getCurrentAccentColor());
+    const hexInput = ref(props.modelValue || getCurrentAccentColor());
     const rgbInputs = ref({ r: 234, g: 0, b: 168 });
     const alphaInput = ref(100);
+    const currentColorFormat = ref(props.defaultColorFormat || "hex");
+    const hslInputs = ref({ h: 0, s: 0, l: 0 });
+    const oklchInputs = ref({ l: 0, c: 0, h: 0 });
     const isDraggingArea = ref(false);
     const isDraggingHue = ref(false);
     const isDraggingAlpha = ref(false);
@@ -4209,6 +4611,111 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     const rgbToHex = (r, g, b) => {
       return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
     };
+    const rgbToHsl = (r, g, b) => {
+      r /= 255;
+      g /= 255;
+      b /= 255;
+      const max = Math.max(r, g, b);
+      const min = Math.min(r, g, b);
+      const diff = max - min;
+      const sum = max + min;
+      let h2 = 0;
+      let s2 = 0;
+      let l = sum / 2;
+      if (diff !== 0) {
+        s2 = l > 0.5 ? diff / (2 - sum) : diff / sum;
+        switch (max) {
+          case r:
+            h2 = ((g - b) / diff + (g < b ? 6 : 0)) / 6;
+            break;
+          case g:
+            h2 = ((b - r) / diff + 2) / 6;
+            break;
+          case b:
+            h2 = ((r - g) / diff + 4) / 6;
+            break;
+        }
+      }
+      return {
+        h: Math.round(h2 * 360),
+        s: Math.round(s2 * 100),
+        l: Math.round(l * 100)
+      };
+    };
+    const hslToRgb = (h2, s2, l) => {
+      h2 /= 360;
+      s2 /= 100;
+      l /= 100;
+      const hue2rgb = (p2, q2, t) => {
+        if (t < 0) t += 1;
+        if (t > 1) t -= 1;
+        if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
+        if (t < 1 / 2) return q2;
+        if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+        return p2;
+      };
+      if (s2 === 0) {
+        return { r: Math.round(l * 255), g: Math.round(l * 255), b: Math.round(l * 255) };
+      }
+      const q = l < 0.5 ? l * (1 + s2) : l + s2 - l * s2;
+      const p = 2 * l - q;
+      return {
+        r: Math.round(hue2rgb(p, q, h2 + 1 / 3) * 255),
+        g: Math.round(hue2rgb(p, q, h2) * 255),
+        b: Math.round(hue2rgb(p, q, h2 - 1 / 3) * 255)
+      };
+    };
+    const rgbToOklch = (r, g, b) => {
+      const toLinear = (c) => {
+        c /= 255;
+        return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+      };
+      const rLinear = toLinear(r);
+      const gLinear = toLinear(g);
+      const bLinear = toLinear(b);
+      const l = 0.4122214708 * rLinear + 0.5363325363 * gLinear + 0.0514459929 * bLinear;
+      const m = 0.2119034982 * rLinear + 0.6806995451 * gLinear + 0.1073969566 * bLinear;
+      const s2 = 0.0883024619 * rLinear + 0.2817188376 * gLinear + 0.6299787005 * bLinear;
+      const lCube = Math.sign(l) * Math.pow(Math.abs(l), 1 / 3);
+      const mCube = Math.sign(m) * Math.pow(Math.abs(m), 1 / 3);
+      const sCube = Math.sign(s2) * Math.pow(Math.abs(s2), 1 / 3);
+      const lOk = 0.2104542553 * lCube + 0.793617785 * mCube - 0.0040720468 * sCube;
+      const aOk = 1.9779984951 * lCube - 2.428592205 * mCube + 0.4505937099 * sCube;
+      const bOk = 0.0259040371 * lCube + 0.7827717662 * mCube - 0.808675766 * sCube;
+      const lightness = lOk;
+      const chroma = Math.sqrt(aOk * aOk + bOk * bOk);
+      let hue2 = Math.atan2(bOk, aOk) * 180 / Math.PI;
+      if (hue2 < 0) hue2 += 360;
+      return {
+        l: Math.round(lightness * 100),
+        c: Math.round(chroma * 100),
+        h: Math.round(hue2)
+      };
+    };
+    const oklchToRgb = (l, c, h2) => {
+      l /= 100;
+      c /= 100;
+      h2 = h2 * Math.PI / 180;
+      const aOk = c * Math.cos(h2);
+      const bOk = c * Math.sin(h2);
+      const lCube = l + 0.3963377774 * aOk + 0.2158037573 * bOk;
+      const mCube = l - 0.1055613458 * aOk - 0.0638541728 * bOk;
+      const sCube = l - 0.0894841775 * aOk - 1.291485548 * bOk;
+      const lLinear = lCube * lCube * lCube;
+      const mLinear = mCube * mCube * mCube;
+      const sLinear = sCube * sCube * sCube;
+      const rLinear = 4.0767416621 * lLinear - 3.3077115913 * mLinear + 0.2309699292 * sLinear;
+      const gLinear = -1.2684380046 * lLinear + 2.6097574011 * mLinear - 0.3413193965 * sLinear;
+      const bLinear = -0.0041960863 * lLinear - 0.7034186147 * mLinear + 1.707614701 * sLinear;
+      const fromLinear = (c2) => {
+        return c2 <= 31308e-7 ? c2 * 12.92 : 1.055 * Math.pow(c2, 1 / 2.4) - 0.055;
+      };
+      return {
+        r: Math.max(0, Math.min(255, Math.round(fromLinear(rLinear) * 255))),
+        g: Math.max(0, Math.min(255, Math.round(fromLinear(gLinear) * 255))),
+        b: Math.max(0, Math.min(255, Math.round(fromLinear(bLinear) * 255)))
+      };
+    };
     const normalizeColorString = (colorStr) => {
       if (!colorStr) return colorStr;
       const rgb = hexToRgb(colorStr);
@@ -4251,7 +4758,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     const rgbString = computed(() => `rgb(${currentRgb.value.r}, ${currentRgb.value.g}, ${currentRgb.value.b})`);
     const currentColorString = computed(() => {
       const { r, g, b } = currentRgb.value;
-      return props.showAlpha && alpha.value < 1 ? `rgba(${r}, ${g}, ${b}, ${alpha.value})` : rgbToHex(r, g, b);
+      return props.showAlpha && alpha.value < 0.99 ? `rgba(${r}, ${g}, ${b}, ${alpha.value})` : rgbToHex(r, g, b);
     });
     const updateContrastData = () => {
       if (!props.showContrast || !props.compareColor) {
@@ -5161,6 +5668,34 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         saturation.value = hsv.s;
         brightness.value = hsv.v;
         updateHexInput();
+        updateHslInputs();
+        updateOklchInputs();
+      }
+    };
+    const handleHslInput = () => {
+      const { h: h2, s: s2, l } = hslInputs.value;
+      if (h2 >= 0 && h2 <= 360 && s2 >= 0 && s2 <= 100 && l >= 0 && l <= 100) {
+        const rgb = hslToRgb(h2, s2, l);
+        const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+        hue.value = hsv.h;
+        saturation.value = hsv.s;
+        brightness.value = hsv.v;
+        updateHexInput();
+        updateRgbInputs();
+        updateOklchInputs();
+      }
+    };
+    const handleOklchInput = () => {
+      const { l, c, h: h2 } = oklchInputs.value;
+      if (l >= 0 && l <= 100 && c >= 0 && c <= 100 && h2 >= 0 && h2 <= 360) {
+        const rgb = oklchToRgb(l, c, h2);
+        const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+        hue.value = hsv.h;
+        saturation.value = hsv.s;
+        brightness.value = hsv.v;
+        updateHexInput();
+        updateRgbInputs();
+        updateHslInputs();
       }
     };
     const handleAlphaInput = () => {
@@ -5168,6 +5703,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       alpha.value = value / 100;
       alphaInput.value = value;
     };
+    const cycleColorFormat = () => {
+      const formats = ["hex", "rgb", "hsl", "oklch"];
+      const currentIndex = formats.indexOf(currentColorFormat.value);
+      const nextIndex = (currentIndex + 1) % formats.length;
+      currentColorFormat.value = formats[nextIndex];
+    };
     const updateHexInput = () => {
       const { r, g, b } = currentRgb.value;
       hexInput.value = rgbToHex(r, g, b);
@@ -5176,6 +5717,16 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       const { r, g, b } = currentRgb.value;
       rgbInputs.value = { r, g, b };
     };
+    const updateHslInputs = () => {
+      const { r, g, b } = currentRgb.value;
+      const hsl = rgbToHsl(r, g, b);
+      hslInputs.value = hsl;
+    };
+    const updateOklchInputs = () => {
+      const { r, g, b } = currentRgb.value;
+      const oklch = rgbToOklch(r, g, b);
+      oklchInputs.value = oklch;
+    };
     const setColorFromSwatch = (swatchColor) => {
       if (props.disabled) return;
       const rgb = hexToRgb(swatchColor);
@@ -5193,7 +5744,21 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
     const initializeFromProp = () => {
       if (!props.modelValue) return;
-      const rgb = hexToRgb(props.modelValue);
+      let rgb;
+      if (props.modelValue.startsWith("#")) {
+        rgb = hexToRgb(props.modelValue);
+        hexInput.value = props.modelValue;
+      } else {
+        const rgbMatch = props.modelValue.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
+        if (rgbMatch) {
+          rgb = {
+            r: parseInt(rgbMatch[1]),
+            g: parseInt(rgbMatch[2]),
+            b: parseInt(rgbMatch[3])
+          };
+          hexInput.value = rgbToHex(rgb.r, rgb.g, rgb.b);
+        }
+      }
       if (rgb) {
         const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
         hue.value = hsv.h;
@@ -5206,6 +5771,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     watch([hue, saturation, brightness, alpha], () => {
       updateHexInput();
       updateRgbInputs();
+      updateHslInputs();
+      updateOklchInputs();
       const currentColor = normalizeColorString(currentColorString.value);
       if (currentColor === lastEmittedColor) {
         return;
@@ -5278,8 +5845,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             onMousedown: handleAreaMouseDown,
             onTouchstart: handleAreaMouseDown
           }, [
-            _cache[8] || (_cache[8] = createElementVNode("div", { class: "ui-color-picker-saturation" }, null, -1)),
-            _cache[9] || (_cache[9] = createElementVNode("div", { class: "ui-color-picker-brightness" }, null, -1)),
+            _cache[16] || (_cache[16] = createElementVNode("div", { class: "ui-color-picker-saturation" }, null, -1)),
+            _cache[17] || (_cache[17] = createElementVNode("div", { class: "ui-color-picker-brightness" }, null, -1)),
             debouncedCompareColor.value ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(["ui-color-picker-contrast-overlay", { "contrast-overlay-visible": contrastEnabled.value }])
@@ -5298,7 +5865,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                       height: GLOBAL_PICKER_HEIGHT
                     })
                   ]),
-                  _cache[5] || (_cache[5] = createElementVNode("pattern", {
+                  _cache[13] || (_cache[13] = createElementVNode("pattern", {
                     id: "orangeDotsPattern",
                     x: "0",
                     y: "0",
@@ -5314,7 +5881,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                       opacity: "0.3"
                     })
                   ], -1)),
-                  _cache[6] || (_cache[6] = createElementVNode("pattern", {
+                  _cache[14] || (_cache[14] = createElementVNode("pattern", {
                     id: "redDotsPattern",
                     x: "0",
                     y: "0",
@@ -5400,7 +5967,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 top: `${(1 - brightness.value) * 100}%`,
                 backgroundColor: currentColorString.value
               })
-            }, [..._cache[7] || (_cache[7] = [
+            }, [..._cache[15] || (_cache[15] = [
               createElementVNode("div", { class: "ui-color-picker-cursor-inner" }, null, -1)
             ])], 4)
           ], 36),
@@ -5428,12 +5995,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
               delay: 300
             }, {
               default: withCtx(() => [
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   onClick: toggleContrast,
-                  icon: "",
-                  squircle: "",
+                  icon: true,
+                  squircle: true,
                   size: "xs",
-                  variant: contrastEnabled.value ? "primary" : "secondary",
+                  variant: contrastEnabled.value ? "primary" : "ghost",
                   "icon-name": "contrast"
                 }, null, 8, ["variant"])
               ]),
@@ -5446,7 +6013,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         }, [
           contrastData.value ? (openBlock(), createElementBlock("div", _hoisted_11$f, [
             createElementVNode("div", _hoisted_12$f, [
-              _cache[10] || (_cache[10] = createElementVNode("h4", { class: "ui-color-picker-contrast-title" }, "Contrast Check", -1)),
+              _cache[18] || (_cache[18] = createElementVNode("h4", { class: "ui-color-picker-contrast-title" }, "Contrast Check", -1)),
               createElementVNode("div", _hoisted_13$f, [
                 createElementVNode("div", _hoisted_14$f, [
                   createElementVNode("div", {
@@ -5467,7 +6034,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                   "ui-color-picker-contrast-level--fail": contrastData.value.normalText === "FAIL"
                 }])
               }, [
-                _cache[11] || (_cache[11] = createElementVNode("div", { class: "ui-color-picker-contrast-level-indicator" }, [
+                _cache[19] || (_cache[19] = createElementVNode("div", { class: "ui-color-picker-contrast-level-indicator" }, [
                   createElementVNode("div", { class: "ui-color-picker-contrast-level-line ui-color-picker-contrast-level-line--solid" }),
                   createElementVNode("span", { class: "ui-color-picker-contrast-level-label" }, "Normal Text")
                 ], -1)),
@@ -5479,7 +6046,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                   "ui-color-picker-contrast-level--fail": contrastData.value.largeText === "FAIL"
                 }])
               }, [
-                _cache[12] || (_cache[12] = createElementVNode("div", { class: "ui-color-picker-contrast-level-indicator" }, [
+                _cache[20] || (_cache[20] = createElementVNode("div", { class: "ui-color-picker-contrast-level-indicator" }, [
                   createElementVNode("div", { class: "ui-color-picker-contrast-level-line ui-color-picker-contrast-level-line--dashed" }),
                   createElementVNode("span", { class: "ui-color-picker-contrast-level-label" }, "Large Text")
                 ], -1)),
@@ -5488,7 +6055,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             ]),
             createElementVNode("div", _hoisted_19$a, [
               (openBlock(), createElementBlock("svg", _hoisted_20$9, [
-                _cache[13] || (_cache[13] = createStaticVNode('<defs data-v-e9e45931><linearGradient id="contrastGradientDefault" x1="0%" y1="0%" x2="100%" y2="0%" data-v-e9e45931><stop offset="0%" stop-color="#ef4444" data-v-e9e45931></stop><stop offset="21.4%" stop-color="#ef4444" data-v-e9e45931></stop><stop offset="21.4%" stop-color="#f59e0b" data-v-e9e45931></stop><stop offset="64.3%" stop-color="#f59e0b" data-v-e9e45931></stop><stop offset="64.3%" stop-color="#22c55e" data-v-e9e45931></stop><stop offset="100%" stop-color="#22c55e" data-v-e9e45931></stop></linearGradient></defs><rect x="0" y="15" width="280" height="10" fill="url(#contrastGradientDefault)" rx="5" data-v-e9e45931></rect><line x1="60" y1="10" x2="60" y2="30" stroke="#666" stroke-width="1" opacity="0.5" data-v-e9e45931></line><line x1="180" y1="10" x2="180" y2="30" stroke="#666" stroke-width="1" opacity="0.5" data-v-e9e45931></line>', 4)),
+                _cache[21] || (_cache[21] = createStaticVNode('<defs data-v-3634b582><linearGradient id="contrastGradientDefault" x1="0%" y1="0%" x2="100%" y2="0%" data-v-3634b582><stop offset="0%" stop-color="#ef4444" data-v-3634b582></stop><stop offset="21.4%" stop-color="#ef4444" data-v-3634b582></stop><stop offset="21.4%" stop-color="#f59e0b" data-v-3634b582></stop><stop offset="64.3%" stop-color="#f59e0b" data-v-3634b582></stop><stop offset="64.3%" stop-color="#22c55e" data-v-3634b582></stop><stop offset="100%" stop-color="#22c55e" data-v-3634b582></stop></linearGradient></defs><rect x="0" y="15" width="280" height="10" fill="url(#contrastGradientDefault)" rx="5" data-v-3634b582></rect><line x1="60" y1="10" x2="60" y2="30" stroke="#666" stroke-width="1" opacity="0.5" data-v-3634b582></line><line x1="180" y1="10" x2="180" y2="30" stroke="#666" stroke-width="1" opacity="0.5" data-v-3634b582></line>', 4)),
                 createElementVNode("circle", {
                   cx: Math.min(270, Math.max(10, Math.min(contrastData.value.ratio, 14) / 14 * 260 + 10)),
                   cy: "20",
@@ -5498,7 +6065,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                   "stroke-width": "2"
                 }, null, 8, _hoisted_21$8)
               ])),
-              _cache[14] || (_cache[14] = createStaticVNode('<div class="ui-color-picker-contrast-labels" data-v-e9e45931><span class="ui-color-picker-contrast-label" data-v-e9e45931>1:1</span><span class="ui-color-picker-contrast-label" style="left:60px;" data-v-e9e45931>3:1</span><span class="ui-color-picker-contrast-label" style="left:180px;" data-v-e9e45931>4.5:1</span><span class="ui-color-picker-contrast-label" style="right:0;" data-v-e9e45931>14:1+</span></div>', 1))
+              _cache[22] || (_cache[22] = createStaticVNode('<div class="ui-color-picker-contrast-labels" data-v-3634b582><span class="ui-color-picker-contrast-label" data-v-3634b582>1:1</span><span class="ui-color-picker-contrast-label" style="left:60px;" data-v-3634b582>3:1</span><span class="ui-color-picker-contrast-label" style="left:180px;" data-v-3634b582>4.5:1</span><span class="ui-color-picker-contrast-label" style="right:0;" data-v-3634b582>14:1+</span></div>', 1))
             ])
           ])) : createCommentVNode("", true)
         ], 2),
@@ -5510,7 +6077,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           onMousedown: handleAlphaMouseDown,
           onTouchstart: handleAlphaMouseDown
         }, [
-          _cache[15] || (_cache[15] = createElementVNode("div", { class: "ui-color-picker-alpha-bg" }, null, -1)),
+          _cache[23] || (_cache[23] = createElementVNode("div", { class: "ui-color-picker-alpha-bg" }, null, -1)),
           createElementVNode("div", {
             class: "ui-color-picker-alpha-gradient",
             style: normalizeStyle({
@@ -5523,22 +6090,35 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           }, null, 4)
         ], 544)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_22$8, [
-          createElementVNode("div", _hoisted_23$7, [
-            _cache[16] || (_cache[16] = createElementVNode("label", { class: "ui-color-picker-label" }, "Hex", -1)),
-            withDirectives(createElementVNode("input", {
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => hexInput.value = $event),
-              onInput: handleHexInput,
-              onBlur: validateHexInput,
-              class: "ui-color-picker-input",
-              type: "text",
-              maxlength: "7"
-            }, null, 544), [
-              [vModelText, hexInput.value]
-            ])
-          ]),
-          createElementVNode("div", _hoisted_24$6, [
+          currentColorFormat.value === "hex" ? (openBlock(), createElementBlock("div", _hoisted_23$7, [
+            createElementVNode("div", _hoisted_24$6, [
+              _cache[24] || (_cache[24] = createElementVNode("label", { class: "ui-color-picker-label" }, "Hex", -1)),
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => hexInput.value = $event),
+                onInput: handleHexInput,
+                onBlur: validateHexInput,
+                class: "ui-color-picker-input",
+                type: "text",
+                maxlength: "7",
+                placeholder: "#000000"
+              }, null, 544), [
+                [vModelText, hexInput.value]
+              ])
+            ]),
             createElementVNode("div", _hoisted_25$6, [
-              _cache[17] || (_cache[17] = createElementVNode("label", { class: "ui-color-picker-label" }, "R", -1)),
+              createVNode(unref(CompoundUiButton), {
+                color: "secondary",
+                size: "xs",
+                icon: "",
+                squircle: "",
+                "icon-name": "chevrons-up-down",
+                onClick: cycleColorFormat,
+                "aria-label": "Switch color format"
+              })
+            ])
+          ])) : currentColorFormat.value === "rgb" ? (openBlock(), createElementBlock("div", _hoisted_26$5, [
+            createElementVNode("div", _hoisted_27$5, [
+              _cache[25] || (_cache[25] = createElementVNode("label", { class: "ui-color-picker-label" }, "R", -1)),
               withDirectives(createElementVNode("input", {
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => rgbInputs.value.r = $event),
                 onInput: handleRgbInput,
@@ -5555,8 +6135,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 ]
               ])
             ]),
-            createElementVNode("div", _hoisted_26$5, [
-              _cache[18] || (_cache[18] = createElementVNode("label", { class: "ui-color-picker-label" }, "G", -1)),
+            createElementVNode("div", _hoisted_28$5, [
+              _cache[26] || (_cache[26] = createElementVNode("label", { class: "ui-color-picker-label" }, "G", -1)),
               withDirectives(createElementVNode("input", {
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => rgbInputs.value.g = $event),
                 onInput: handleRgbInput,
@@ -5573,8 +6153,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 ]
               ])
             ]),
-            createElementVNode("div", _hoisted_27$5, [
-              _cache[19] || (_cache[19] = createElementVNode("label", { class: "ui-color-picker-label" }, "B", -1)),
+            createElementVNode("div", _hoisted_29$5, [
+              _cache[27] || (_cache[27] = createElementVNode("label", { class: "ui-color-picker-label" }, "B", -1)),
               withDirectives(createElementVNode("input", {
                 "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => rgbInputs.value.b = $event),
                 onInput: handleRgbInput,
@@ -5591,8 +6171,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 ]
               ])
             ]),
-            props.showAlpha ? (openBlock(), createElementBlock("div", _hoisted_28$5, [
-              _cache[20] || (_cache[20] = createElementVNode("label", { class: "ui-color-picker-label" }, "A", -1)),
+            props.showAlpha ? (openBlock(), createElementBlock("div", _hoisted_30$5, [
+              _cache[28] || (_cache[28] = createElementVNode("label", { class: "ui-color-picker-label" }, "A", -1)),
               withDirectives(createElementVNode("input", {
                 "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => alphaInput.value = $event),
                 onInput: handleAlphaInput,
@@ -5608,10 +6188,189 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                   { number: true }
                 ]
               ])
-            ])) : createCommentVNode("", true)
-          ])
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_31$5, [
+              createVNode(unref(CompoundUiButton), {
+                color: "secondary",
+                size: "xs",
+                icon: "",
+                squircle: "",
+                "icon-name": "chevrons-up-down",
+                onClick: cycleColorFormat,
+                "aria-label": "Switch color format"
+              })
+            ])
+          ])) : currentColorFormat.value === "hsl" ? (openBlock(), createElementBlock("div", _hoisted_32$5, [
+            createElementVNode("div", _hoisted_33$4, [
+              _cache[29] || (_cache[29] = createElementVNode("label", { class: "ui-color-picker-label" }, "H", -1)),
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => hslInputs.value.h = $event),
+                onInput: handleHslInput,
+                class: "ui-color-picker-input",
+                type: "number",
+                min: "0",
+                max: "360"
+              }, null, 544), [
+                [
+                  vModelText,
+                  hslInputs.value.h,
+                  void 0,
+                  { number: true }
+                ]
+              ])
+            ]),
+            createElementVNode("div", _hoisted_34$3, [
+              _cache[30] || (_cache[30] = createElementVNode("label", { class: "ui-color-picker-label" }, "S", -1)),
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => hslInputs.value.s = $event),
+                onInput: handleHslInput,
+                class: "ui-color-picker-input",
+                type: "number",
+                min: "0",
+                max: "100"
+              }, null, 544), [
+                [
+                  vModelText,
+                  hslInputs.value.s,
+                  void 0,
+                  { number: true }
+                ]
+              ])
+            ]),
+            createElementVNode("div", _hoisted_35$3, [
+              _cache[31] || (_cache[31] = createElementVNode("label", { class: "ui-color-picker-label" }, "L", -1)),
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => hslInputs.value.l = $event),
+                onInput: handleHslInput,
+                class: "ui-color-picker-input",
+                type: "number",
+                min: "0",
+                max: "100"
+              }, null, 544), [
+                [
+                  vModelText,
+                  hslInputs.value.l,
+                  void 0,
+                  { number: true }
+                ]
+              ])
+            ]),
+            props.showAlpha ? (openBlock(), createElementBlock("div", _hoisted_36$3, [
+              _cache[32] || (_cache[32] = createElementVNode("label", { class: "ui-color-picker-label" }, "A", -1)),
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => alphaInput.value = $event),
+                onInput: handleAlphaInput,
+                class: "ui-color-picker-input",
+                type: "number",
+                min: "0",
+                max: "100"
+              }, null, 544), [
+                [
+                  vModelText,
+                  alphaInput.value,
+                  void 0,
+                  { number: true }
+                ]
+              ])
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_37$2, [
+              createVNode(unref(CompoundUiButton), {
+                color: "secondary",
+                size: "xs",
+                icon: "",
+                squircle: "",
+                "icon-name": "chevrons-up-down",
+                onClick: cycleColorFormat,
+                "aria-label": "Switch color format"
+              })
+            ])
+          ])) : currentColorFormat.value === "oklch" ? (openBlock(), createElementBlock("div", _hoisted_38$1, [
+            createElementVNode("div", _hoisted_39$1, [
+              _cache[33] || (_cache[33] = createElementVNode("label", { class: "ui-color-picker-label" }, "L", -1)),
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => oklchInputs.value.l = $event),
+                onInput: handleOklchInput,
+                class: "ui-color-picker-input",
+                type: "number",
+                min: "0",
+                max: "100"
+              }, null, 544), [
+                [
+                  vModelText,
+                  oklchInputs.value.l,
+                  void 0,
+                  { number: true }
+                ]
+              ])
+            ]),
+            createElementVNode("div", _hoisted_40$1, [
+              _cache[34] || (_cache[34] = createElementVNode("label", { class: "ui-color-picker-label" }, "C", -1)),
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => oklchInputs.value.c = $event),
+                onInput: handleOklchInput,
+                class: "ui-color-picker-input",
+                type: "number",
+                min: "0",
+                max: "100"
+              }, null, 544), [
+                [
+                  vModelText,
+                  oklchInputs.value.c,
+                  void 0,
+                  { number: true }
+                ]
+              ])
+            ]),
+            createElementVNode("div", _hoisted_41$1, [
+              _cache[35] || (_cache[35] = createElementVNode("label", { class: "ui-color-picker-label" }, "H", -1)),
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => oklchInputs.value.h = $event),
+                onInput: handleOklchInput,
+                class: "ui-color-picker-input",
+                type: "number",
+                min: "0",
+                max: "360"
+              }, null, 544), [
+                [
+                  vModelText,
+                  oklchInputs.value.h,
+                  void 0,
+                  { number: true }
+                ]
+              ])
+            ]),
+            props.showAlpha ? (openBlock(), createElementBlock("div", _hoisted_42$1, [
+              _cache[36] || (_cache[36] = createElementVNode("label", { class: "ui-color-picker-label" }, "A", -1)),
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => alphaInput.value = $event),
+                onInput: handleAlphaInput,
+                class: "ui-color-picker-input",
+                type: "number",
+                min: "0",
+                max: "100"
+              }, null, 544), [
+                [
+                  vModelText,
+                  alphaInput.value,
+                  void 0,
+                  { number: true }
+                ]
+              ])
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_43$1, [
+              createVNode(unref(CompoundUiButton), {
+                color: "secondary",
+                size: "xs",
+                icon: "",
+                squircle: "",
+                "icon-name": "chevrons-up-down",
+                onClick: cycleColorFormat,
+                "aria-label": "Switch color format"
+              })
+            ])
+          ])) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_29$5, [
+        props.showSwatches ? (openBlock(), createElementBlock("div", _hoisted_44$1, [
           additionalSwatches.value.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             createVNode(unref(UiDivider), {
               text: _ctx.additionalSwatchesLabel || "Custom Colors",
@@ -5619,7 +6378,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
               color: "#d1d5db",
               margin: 12
             }, null, 8, ["text"]),
-            createElementVNode("div", _hoisted_30$5, [
+            createElementVNode("div", _hoisted_45$1, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(additionalSwatches.value, (swatch) => {
                 return openBlock(), createBlock(unref(UiTooltip), {
                   key: swatch,
@@ -5632,7 +6391,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                       class: normalizeClass(["ui-color-picker-swatch", { "ui-color-picker-swatch--active": isSwatchActive(swatch) }]),
                       style: normalizeStyle(getSwatchStyle(swatch)),
                       onClick: ($event) => setColorFromSwatch(swatch)
-                    }, null, 14, _hoisted_31$5)
+                    }, null, 14, _hoisted_46$1)
                   ]),
                   _: 2
                 }, 1032, ["content"]);
@@ -5643,7 +6402,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             color: "#d1d5db",
             margin: 8
           }),
-          createElementVNode("div", _hoisted_32$5, [
+          createElementVNode("div", _hoisted_47$1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(mainSwatches.value, (swatch) => {
               return openBlock(), createBlock(unref(UiTooltip), {
                 key: swatch,
@@ -5656,7 +6415,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                     class: normalizeClass(["ui-color-picker-swatch", { "ui-color-picker-swatch--active": isSwatchActive(swatch) }]),
                     style: normalizeStyle(getSwatchStyle(swatch)),
                     onClick: ($event) => setColorFromSwatch(swatch)
-                  }, null, 14, _hoisted_33$4)
+                  }, null, 14, _hoisted_48$1)
                 ]),
                 _: 2
               }, 1032, ["content"]);
@@ -5665,14 +6424,14 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass(["ui-color-picker-shades-container", { "ui-color-picker-shades-container--expanded": shouldShowShades.value }])
           }, [
-            createElementVNode("div", _hoisted_34$3, [
+            createElementVNode("div", _hoisted_49$1, [
               createVNode(unref(UiDivider), {
                 text: `${selectedSwatchLabel.value} Shades`,
                 "text-position": "left",
                 color: "#d1d5db",
                 margin: 8
               }, null, 8, ["text"]),
-              createElementVNode("div", _hoisted_35$3, [
+              createElementVNode("div", _hoisted_50$1, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(shadeSwatches.value, (shade) => {
                   return openBlock(), createBlock(unref(UiTooltip), {
                     key: shade,
@@ -5685,7 +6444,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                         class: normalizeClass(["ui-color-picker-swatch ui-color-picker-swatch--shade", { "ui-color-picker-swatch--active": isSwatchActive(shade) }]),
                         style: normalizeStyle(getSwatchStyle(shade)),
                         onClick: ($event) => setColorFromSwatch(shade)
-                      }, null, 14, _hoisted_36$3)
+                      }, null, 14, _hoisted_51$1)
                     ]),
                     _: 2
                   }, 1032, ["content"]);
@@ -5693,12 +6452,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
               ])
             ])
           ], 2)
-        ])
+        ])) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const UiColorPickerPicker = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-e9e45931"]]);
+const UiColorPickerPicker = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-3634b582"]]);
 const _hoisted_1$u = { class: "ui-color-picker-button-container" };
 const _hoisted_2$o = { class: "ui-color-picker-button-preview" };
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
@@ -5707,9 +6466,13 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     modelValue: {},
     disabled: { type: Boolean, default: false },
     showAlpha: { type: Boolean, default: false },
-    showContrast: { type: Boolean, default: false },
+    defaultColorFormat: { default: "hex" },
+    swatches: {},
+    additionalSwatches: {},
+    additionalSwatchesLabel: {},
+    showSwatches: { type: Boolean, default: true },
     compareColor: {},
-    swatches: { default: () => [] }
+    showContrast: { type: Boolean, default: false }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -5747,11 +6510,13 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const updatePopoverPosition = () => {
       if (!buttonRef.value?.$el || !popoverRef.value) return;
       const button = buttonRef.value.$el;
+      const popover = popoverRef.value;
       const buttonRect = button.getBoundingClientRect();
       const viewportWidth = window.innerWidth;
       const viewportHeight = window.innerHeight;
-      const popoverWidth = 312;
-      const popoverHeight = 450;
+      const popoverRect = popover.getBoundingClientRect();
+      const popoverWidth = popoverRect.width || 312;
+      const popoverHeight = popoverRect.height || 450;
       let top = buttonRect.bottom + 8;
       let left = buttonRect.left;
       if (left + popoverWidth > viewportWidth - 16) {
@@ -5824,7 +6589,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           ref_key: "buttonRef",
           ref: buttonRef,
           disabled: props.disabled,
-          variant: "secondary",
+          color: "secondary",
           "trailing-icon": "chevron-down",
           onClick: togglePopover
         }, {
@@ -5849,25 +6614,19 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             class: "ui-color-picker-popover",
             style: normalizeStyle(popoverStyle.value)
           }, [
-            createVNode(UiColorPickerPicker, {
+            createVNode(UiColorPickerPicker, mergeProps({
               modelValue: internalValue.value,
-              "onUpdate:modelValue": [
-                _cache[0] || (_cache[0] = ($event) => internalValue.value = $event),
-                _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", $event))
-              ],
-              "show-alpha": props.showAlpha,
-              "show-contrast": props.showContrast,
-              "compare-color": props.compareColor,
-              disabled: props.disabled,
-              swatches: props.swatches
-            }, null, 8, ["modelValue", "show-alpha", "show-contrast", "compare-color", "disabled", "swatches"])
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => internalValue.value = $event)
+            }, props, {
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", $event))
+            }), null, 16, ["modelValue"])
           ], 4)) : createCommentVNode("", true)
         ]))
       ]);
     };
   }
 });
-const UiColorPickerButton = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-805ac404"]]);
+const UiColorPickerButton = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-5d8fef82"]]);
 const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "UiColorPicker",
   props: {
@@ -5877,7 +6636,12 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     swatches: {},
     variant: { default: "default" },
     compareColor: {},
-    showContrast: { type: Boolean, default: false }
+    showContrast: { type: Boolean, default: false },
+    defaultColorFormat: { default: "hex" },
+    additionalSwatches: {},
+    additionalSwatchesLabel: {},
+    showSwatches: { type: Boolean, default: true },
+    contrastLabel: {}
   },
   emits: ["update:modelValue", "change"],
   setup(__props, { emit: __emit }) {
@@ -5905,25 +6669,15 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return props.variant === "button" ? (openBlock(), createBlock(UiColorPickerButton, {
+      return props.variant === "button" ? (openBlock(), createBlock(UiColorPickerButton, mergeProps({
         key: 0,
         modelValue: internalValue.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => internalValue.value = $event),
-        disabled: props.disabled,
-        "show-alpha": props.showAlpha,
-        "show-contrast": props.showContrast,
-        "compare-color": props.compareColor,
-        swatches: props.swatches
-      }, null, 8, ["modelValue", "disabled", "show-alpha", "show-contrast", "compare-color", "swatches"])) : (openBlock(), createBlock(UiColorPickerPicker, {
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => internalValue.value = $event)
+      }, props), null, 16, ["modelValue"])) : (openBlock(), createBlock(UiColorPickerPicker, mergeProps({
         key: 1,
         modelValue: internalValue.value,
-        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => internalValue.value = $event),
-        disabled: props.disabled,
-        "show-alpha": props.showAlpha,
-        "show-contrast": props.showContrast,
-        "compare-color": props.compareColor,
-        swatches: props.swatches
-      }, null, 8, ["modelValue", "disabled", "show-alpha", "show-contrast", "compare-color", "swatches"]));
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => internalValue.value = $event)
+      }, props), null, 16, ["modelValue"]));
     };
   }
 });
@@ -7024,19 +7778,19 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_2$l, [
           _ctx.variant === "button" ? (openBlock(), createBlock(StrandsUiButton, {
             key: 0,
-            icon: "",
-            squircle: "",
-            iconName: currentIcon.value,
+            icon: true,
+            squircle: true,
+            "icon-name": currentIcon.value,
             variant: "ghost",
             size: _ctx.size,
             disabled: isDisabled.value,
             onClick: _cache[0] || (_cache[0] = ($event) => isDisabled.value ? null : toggleTheme),
             title: isDisabled.value ? "Theme is locked by app settings" : `Switch to ${nextThemeLabel.value.toLowerCase()} theme`,
             class: normalizeClass(["ui-theme-toggle-button", { "ui-theme-toggle--disabled": isDisabled.value }])
-          }, null, 8, ["iconName", "size", "disabled", "title", "class"])) : _ctx.variant === "dropdown" ? (openBlock(), createElementBlock("div", _hoisted_3$k, [
+          }, null, 8, ["icon-name", "size", "disabled", "title", "class"])) : _ctx.variant === "dropdown" ? (openBlock(), createElementBlock("div", _hoisted_3$k, [
             createVNode(StrandsUiButton, {
-              squircle: "",
-              iconName: currentIcon.value,
+              squircle: true,
+              "leading-icon": currentIcon.value,
               "trailing-icon": showDropdown.value ? "chevron-up" : "chevron-down",
               variant: "ghost",
               size: _ctx.size,
@@ -7049,7 +7803,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                 createTextVNode(toDisplayString(unref(themeLabel)) + toDisplayString(isDisabled.value ? " (Locked)" : ""), 1)
               ]),
               _: 1
-            }, 8, ["iconName", "trailing-icon", "size", "disabled", "class", "title"]),
+            }, 8, ["leading-icon", "trailing-icon", "size", "disabled", "class", "title"]),
             showDropdown.value ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: "ui-theme-toggle-menu",
@@ -7079,8 +7833,9 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
               return openBlock(), createBlock(StrandsUiButton, {
                 key: option.value,
                 variant: unref(currentTheme2) === option.value ? "primary" : "ghost",
-                icon: "",
-                squircle: "",
+                icon: true,
+                squircle: true,
+                "icon-name": option.icon,
                 size: _ctx.size,
                 class: normalizeClass([
                   "ui-theme-toggle-segment",
@@ -7090,12 +7845,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                 "aria-label": `${option.label} theme`,
                 onClick: ($event) => unref(setTheme)(option.value),
                 title: `Switch to ${option.label.toLowerCase()} theme`
-              }, {
-                default: withCtx(() => [
-                  (openBlock(), createBlock(resolveDynamicComponent(getIconComponent(option.icon))))
-                ]),
-                _: 2
-              }, 1032, ["variant", "size", "class", "aria-pressed", "aria-label", "onClick", "title"]);
+              }, null, 8, ["variant", "icon-name", "size", "class", "aria-pressed", "aria-label", "onClick", "title"]);
             }), 128))
           ])) : createCommentVNode("", true)
         ])
@@ -7103,7 +7853,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiThemeToggle = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-b67c31fe"]]);
+const UiThemeToggle = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-8758f364"]]);
 const slotHasContent = (slotName, slots) => {
   const slot = slots[slotName];
   if (!slot) return false;
@@ -7824,7 +8574,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           ])]),
           footer: withCtx(() => [
             createElementVNode("div", _hoisted_36$2, [
-              createVNode(unref(StrandsUiButton), {
+              createVNode(unref(CompoundUiButton), {
                 variant: "secondary",
                 onClick: closeModal,
                 disabled: loading2.value
@@ -7834,7 +8584,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 ])]),
                 _: 1
               }, 8, ["disabled"]),
-              selectedMethod.value && selectedMethod.value.device_type !== "hardware" && selectedMethod.value.device_type !== "passkey" && (selectedMethod.value.device_type !== "email" || emailCodeSent.value) || (selectedMethod.value?.device_type === "hardware" || selectedMethod.value?.device_type === "passkey") && showBackupCodeInput.value ? (openBlock(), createBlock(unref(StrandsUiButton), {
+              selectedMethod.value && selectedMethod.value.device_type !== "hardware" && selectedMethod.value.device_type !== "passkey" && (selectedMethod.value.device_type !== "email" || emailCodeSent.value) || (selectedMethod.value?.device_type === "hardware" || selectedMethod.value?.device_type === "passkey") && showBackupCodeInput.value ? (openBlock(), createBlock(unref(CompoundUiButton), {
                 key: 0,
                 variant: "primary",
                 onClick: _cache[5] || (_cache[5] = ($event) => showBackupCodeInput.value ? verifyBackupCode() : verify()),
@@ -7894,7 +8644,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 ])) : createCommentVNode("", true),
                 selectedMethod.value?.device_type === "email" && !emailCodeSent.value ? (openBlock(), createElementBlock("div", _hoisted_17$a, [
                   _cache[10] || (_cache[10] = createElementVNode("p", { class: "mfa-email-request-text" }, "Click below to receive your verification code", -1)),
-                  createVNode(unref(StrandsUiButton), {
+                  createVNode(unref(CompoundUiButton), {
                     variant: "primary",
                     onClick: sendEmailCode,
                     disabled: loading2.value,
@@ -7921,7 +8671,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                       ])
                     ])
                   ]),
-                  createVNode(unref(StrandsUiButton), {
+                  createVNode(unref(CompoundUiButton), {
                     variant: "primary",
                     onClick: authenticateHardwareKey,
                     disabled: loading2.value,
@@ -7933,7 +8683,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                     _: 1
                   }, 8, ["disabled", "loading"]),
                   createElementVNode("div", _hoisted_25$4, [
-                    createVNode(unref(StrandsUiButton), {
+                    createVNode(unref(CompoundUiButton), {
                       variant: "ghost",
                       size: "sm",
                       onClick: _cache[0] || (_cache[0] = ($event) => showBackupCodeInput.value = !showBackupCodeInput.value),
@@ -8034,7 +8784,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                     createElementVNode("span", _hoisted_31$4, '"' + toDisplayString(selectedMethod.value.device_name) + '"', 1)
                   ])) : createCommentVNode("", true),
                   selectedMethod.value.device_type === "email" ? (openBlock(), createElementBlock("div", _hoisted_32$4, [
-                    createVNode(unref(StrandsUiButton), {
+                    createVNode(unref(CompoundUiButton), {
                       variant: "ghost",
                       size: "sm",
                       onClick: sendEmailCode,
@@ -8048,7 +8798,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                     }, 8, ["disabled"])
                   ])) : createCommentVNode("", true),
                   createElementVNode("div", _hoisted_33$3, [
-                    createVNode(unref(StrandsUiButton), {
+                    createVNode(unref(CompoundUiButton), {
                       variant: "ghost",
                       size: "sm",
                       onClick: _cache[3] || (_cache[3] = ($event) => showBackupCodeInput.value = !showBackupCodeInput.value),
@@ -8743,7 +9493,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   !isPasswordReset.value && displayProviders.value?.length ? (openBlock(), createElementBlock("div", _hoisted_9$c, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(displayProviders.value, (provider) => {
-                      return openBlock(), createBlock(unref(StrandsUiButton), {
+                      return openBlock(), createBlock(unref(CompoundUiButton), {
                         key: provider.id,
                         variant: "outline",
                         "full-width": "",
@@ -8864,7 +9614,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ]),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   type: "submit",
                   variant: "primary",
                   "full-width": "",
@@ -9159,7 +9909,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(enabledProviders), (provider, __, ___, _cached) => {
                   const _memo = [provider.id, provider.name, provider.displayName, unref(oauthLoading)];
                   if (_cached && _cached.key === provider.id && isMemoSame(_cached, _memo)) return _cached;
-                  const _item = (openBlock(), createBlock(unref(StrandsUiButton), {
+                  const _item = (openBlock(), createBlock(unref(CompoundUiButton), {
                     key: provider.id,
                     variant: "outline",
                     "full-width": "",
@@ -9247,7 +9997,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                     ])
                   ])
                 ]),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   type: "submit",
                   variant: "primary",
                   "full-width": "",
@@ -9507,7 +10257,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   createElementVNode("strong", null, toDisplayString(successEmail.value), 1)
                 ])) : createCommentVNode("", true),
                 _cache[5] || (_cache[5] = createElementVNode("p", { class: "signup-success-instructions" }, " Click the link in your email to complete your account setup. The link will expire in 24 hours. ", -1)),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "outline",
                   "full-width": "",
                   onClick: resetToForm,
@@ -9536,7 +10286,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               ], -1)),
               unref(enabledProviders)?.length ? (openBlock(), createElementBlock("div", _hoisted_13$a, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(enabledProviders), (provider) => {
-                  return openBlock(), createBlock(unref(StrandsUiButton), {
+                  return openBlock(), createBlock(unref(CompoundUiButton), {
                     key: provider.id,
                     variant: "outline",
                     "full-width": "",
@@ -9614,7 +10364,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                     ])
                   ])
                 ]),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   type: "submit",
                   variant: "primary",
                   "full-width": "",
@@ -9856,7 +10606,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 _cache[8] || (_cache[8] = createElementVNode("h1", { class: "complete-signup-success-title" }, "Welcome to Strands!", -1)),
                 _cache[9] || (_cache[9] = createElementVNode("p", { class: "complete-signup-success-message" }, " Your account has been created successfully. ", -1)),
                 _cache[10] || (_cache[10] = createElementVNode("p", { class: "complete-signup-success-instructions" }, " You are now signed in and can access your dashboard. ", -1)),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "primary",
                   "full-width": "",
                   onClick: redirectToReferrer
@@ -9879,7 +10629,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 _cache[13] || (_cache[13] = createElementVNode("h1", { class: "complete-signup-error-title" }, "Invalid Link", -1)),
                 _cache[14] || (_cache[14] = createElementVNode("p", { class: "complete-signup-error-message" }, " This registration link is invalid or has expired. ", -1)),
                 _cache[15] || (_cache[15] = createElementVNode("p", { class: "complete-signup-error-instructions" }, " Please request a new magic link to complete your registration. ", -1)),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "primary",
                   "full-width": "",
                   onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("request-new-link"))
@@ -9950,7 +10700,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   }, null, 8, ["modelValue", "error"]),
                   _cache[19] || (_cache[19] = createElementVNode("div", { class: "complete-signup-password-hint" }, " Password must be at least 8 characters long ", -1))
                 ]),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   type: "submit",
                   variant: "primary",
                   "full-width": "",
@@ -10004,7 +10754,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 _cache[25] || (_cache[25] = createElementVNode("h1", { class: "complete-signup-warning-title" }, "Missing Token", -1)),
                 _cache[26] || (_cache[26] = createElementVNode("p", { class: "complete-signup-warning-message" }, " No registration token was provided. ", -1)),
                 _cache[27] || (_cache[27] = createElementVNode("p", { class: "complete-signup-warning-instructions" }, " This page requires a valid registration token from the magic link in your email. ", -1)),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "primary",
                   "full-width": "",
                   onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("start-registration"))
@@ -10182,7 +10932,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 disabled: unref(loading2)
               }, null, 8, ["modelValue", "error", "disabled"]),
               createElementVNode("div", _hoisted_3$c, [
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "secondary",
                   onClick: closeModal,
                   disabled: unref(loading2)
@@ -10192,7 +10942,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   ])]),
                   _: 1
                 }, 8, ["disabled"]),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "primary",
                   onClick: startSetup,
                   disabled: !deviceName.value.trim() || unref(loading2),
@@ -10247,7 +10997,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 ], -1)
               ])])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_12$8, [
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "secondary",
                   onClick: _cache[1] || (_cache[1] = ($event) => step.value = 1),
                   disabled: unref(loading2)
@@ -10257,7 +11007,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   ])]),
                   _: 1
                 }, 8, ["disabled"]),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "primary",
                   onClick: _cache[2] || (_cache[2] = ($event) => step.value = 3),
                   disabled: unref(loading2)
@@ -10285,7 +11035,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 onInput: onVerificationCodeInput
               }, null, 8, ["modelValue", "error", "disabled"]),
               createElementVNode("div", _hoisted_14$8, [
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "secondary",
                   onClick: _cache[4] || (_cache[4] = ($event) => step.value = 2),
                   disabled: unref(loading2)
@@ -10295,7 +11045,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   ])]),
                   _: 1
                 }, 8, ["disabled"]),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "primary",
                   onClick: verifySetup,
                   disabled: verificationCode.value.length !== 6 || unref(loading2),
@@ -10357,7 +11107,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   ])
                 ]),
                 createElementVNode("div", _hoisted_19$4, [
-                  createVNode(unref(StrandsUiButton), {
+                  createVNode(unref(CompoundUiButton), {
                     variant: "secondary",
                     size: "sm",
                     onClick: copyBackupCodes
@@ -10370,7 +11120,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 ])
               ]),
               createElementVNode("div", _hoisted_20$4, [
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "primary",
                   onClick: finish
                 }, {
@@ -10555,7 +11305,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 _: 1
               }),
               createElementVNode("div", _hoisted_3$b, [
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "secondary",
                   onClick: closeModal,
                   disabled: unref(loading2)
@@ -10565,7 +11315,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                   ])]),
                   _: 1
                 }, 8, ["disabled"]),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "primary",
                   onClick: startSetup,
                   disabled: !deviceName.value.trim() || unref(loading2),
@@ -10613,7 +11363,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 onInput: onVerificationCodeInput
               }, null, 8, ["modelValue", "error", "disabled"]),
               createElementVNode("div", _hoisted_5$9, [
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "secondary",
                   size: "sm",
                   onClick: resendCode,
@@ -10626,7 +11376,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 }, 8, ["disabled"])
               ]),
               createElementVNode("div", _hoisted_6$8, [
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "secondary",
                   onClick: _cache[2] || (_cache[2] = ($event) => step.value = 1),
                   disabled: unref(loading2)
@@ -10636,7 +11386,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                   ])]),
                   _: 1
                 }, 8, ["disabled"]),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "primary",
                   onClick: verifySetup,
                   disabled: verificationCode.value.length !== 6 || unref(loading2),
@@ -10689,7 +11439,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 ])
               ], -1)),
               createElementVNode("div", _hoisted_8$8, [
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "primary",
                   onClick: finish
                 }, {
@@ -11015,7 +11765,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 disabled: loading2.value
               }, null, 8, ["modelValue", "error", "disabled"]),
               createElementVNode("div", _hoisted_3$a, [
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "secondary",
                   onClick: closeModal,
                   disabled: loading2.value
@@ -11025,7 +11775,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   ])]),
                   _: 1
                 }, 8, ["disabled"]),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "primary",
                   onClick: startSetup,
                   disabled: !deviceName.value.trim() || loading2.value,
@@ -11094,7 +11844,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 ])
               ]),
               createElementVNode("div", _hoisted_8$7, [
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "secondary",
                   onClick: _cache[1] || (_cache[1] = ($event) => step.value = 1),
                   disabled: loading2.value
@@ -11104,7 +11854,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   ])]),
                   _: 1
                 }, 8, ["disabled"]),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "primary",
                   onClick: handleRegisterHardwareKey,
                   disabled: loading2.value,
@@ -11200,7 +11950,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   ])
                 ]),
                 createElementVNode("div", _hoisted_17$5, [
-                  createVNode(unref(StrandsUiButton), {
+                  createVNode(unref(CompoundUiButton), {
                     variant: "secondary",
                     size: "sm",
                     onClick: copyBackupCodes
@@ -11213,7 +11963,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 ])
               ]),
               createElementVNode("div", _hoisted_18$4, [
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "primary",
                   onClick: finish
                 }, {
@@ -11245,7 +11995,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 createElementVNode("p", _hoisted_21$3, toDisplayString(errorMessage.value), 1)
               ]),
               createElementVNode("div", _hoisted_22$3, [
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "secondary",
                   onClick: _cache[2] || (_cache[2] = ($event) => step.value = 1)
                 }, {
@@ -11254,7 +12004,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   ])]),
                   _: 1
                 }),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "primary",
                   onClick: closeModal
                 }, {
@@ -11449,7 +12199,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   ])
                 ]),
                 createElementVNode("div", _hoisted_11$6, [
-                  createVNode(unref(StrandsUiButton), {
+                  createVNode(unref(CompoundUiButton), {
                     variant: "secondary",
                     size: "sm",
                     onClick: copyBackupCodes
@@ -11459,7 +12209,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     ])]),
                     _: 1
                   }),
-                  createVNode(unref(StrandsUiButton), {
+                  createVNode(unref(CompoundUiButton), {
                     variant: "secondary",
                     size: "sm",
                     onClick: downloadBackupCodes
@@ -11473,7 +12223,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               ])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_12$6, [
                 createElementVNode("div", _hoisted_13$6, [
-                  createVNode(unref(StrandsUiButton), {
+                  createVNode(unref(CompoundUiButton), {
                     variant: "secondary",
                     onClick: regenerateCodes,
                     disabled: unref(loading2),
@@ -11484,7 +12234,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     ])]),
                     _: 1
                   }, 8, ["disabled", "loading"]),
-                  createVNode(unref(StrandsUiButton), {
+                  createVNode(unref(CompoundUiButton), {
                     variant: "primary",
                     onClick: closeModal
                   }, {
@@ -11512,7 +12262,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     _cache[11] || (_cache[11] = createElementVNode("p", { class: "backup-codes-regenerate-title" }, "Regenerate Backup Codes?", -1)),
                     _cache[12] || (_cache[12] = createElementVNode("p", { class: "backup-codes-regenerate-description" }, " This will invalidate all current backup codes. Make sure to save the new ones. ", -1)),
                     createElementVNode("div", _hoisted_16$5, [
-                      createVNode(unref(StrandsUiButton), {
+                      createVNode(unref(CompoundUiButton), {
                         variant: "primary",
                         size: "sm",
                         onClick: confirmRegenerate,
@@ -11524,7 +12274,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         ])]),
                         _: 1
                       }, 8, ["disabled", "loading"]),
-                      createVNode(unref(StrandsUiButton), {
+                      createVNode(unref(CompoundUiButton), {
                         variant: "secondary",
                         size: "sm",
                         onClick: _cache[0] || (_cache[0] = ($event) => showRegenerateWarning.value = false)
@@ -11594,7 +12344,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             createElementVNode("p", _hoisted_3$8, toDisplayString(_ctx.message), 1),
             createElementVNode("div", _hoisted_4$8, [
-              createVNode(unref(StrandsUiButton), {
+              createVNode(unref(CompoundUiButton), {
                 variant: "secondary",
                 onClick: handleCancel,
                 disabled: loading2.value
@@ -11604,7 +12354,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }, 8, ["disabled"]),
-              createVNode(unref(StrandsUiButton), {
+              createVNode(unref(CompoundUiButton), {
                 variant: _ctx.variant,
                 onClick: handleConfirm,
                 disabled: loading2.value,
@@ -11751,7 +12501,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         ]);
       }
     };
-    const Shield = {
+    const Shield2 = {
       props: ["size"],
       render() {
         return h("svg", { width: this.size, height: this.size, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, [
@@ -11886,7 +12636,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                     ]),
                     createElementVNode("div", _hoisted_7$5, [
                       unref(mfaEnabled2) ? (openBlock(), createElementBlock("span", _hoisted_8$5, [
-                        createVNode(Shield, {
+                        createVNode(Shield2, {
                           size: 12,
                           class: "mfa-badge-icon"
                         }),
@@ -11916,7 +12666,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                                 createElementVNode("p", { class: "mfa-device-option-description" }, "Use apps like Google Authenticator, or Authy")
                               ], -1))
                             ]),
-                            createVNode(unref(StrandsUiButton), {
+                            createVNode(unref(CompoundUiButton), {
                               variant: "outline",
                               size: "sm",
                               onClick: _cache[0] || (_cache[0] = ($event) => showTotpSetupModal.value = true)
@@ -11937,7 +12687,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                                 createElementVNode("p", { class: "mfa-device-option-description" }, "Receive verification codes via email")
                               ], -1))
                             ]),
-                            createVNode(unref(StrandsUiButton), {
+                            createVNode(unref(CompoundUiButton), {
                               variant: "outline",
                               size: "sm",
                               onClick: _cache[1] || (_cache[1] = ($event) => showEmailMfaSetupModal.value = true)
@@ -11958,7 +12708,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                                 createElementVNode("p", { class: "mfa-device-option-description" }, "Use a physical security key (YubiKey, etc.)")
                               ], -1))
                             ]),
-                            createVNode(unref(StrandsUiButton), {
+                            createVNode(unref(CompoundUiButton), {
                               variant: "outline",
                               size: "sm",
                               onClick: _cache[2] || (_cache[2] = ($event) => showHardwareKeySetupModal.value = true)
@@ -11979,7 +12729,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                                 createElementVNode("p", { class: "mfa-device-option-description" }, "Use biometric authentication or device PIN")
                               ], -1))
                             ]),
-                            createVNode(unref(StrandsUiButton), {
+                            createVNode(unref(CompoundUiButton), {
                               variant: "outline",
                               size: "sm",
                               onClick: _cache[3] || (_cache[3] = ($event) => showPasskeySetupModal.value = true)
@@ -11995,11 +12745,11 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                     ])) : currentTab?.value === "manage" ? (openBlock(), createElementBlock("div", _hoisted_24$2, [
                       unref(activeMfaDevices).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_25$2, [
                         createElementVNode("div", _hoisted_26$2, [
-                          createVNode(Shield, { size: 48 })
+                          createVNode(Shield2, { size: 48 })
                         ]),
                         _cache[24] || (_cache[24] = createElementVNode("h3", { class: "mfa-empty-title" }, "No MFA Devices", -1)),
                         _cache[25] || (_cache[25] = createElementVNode("p", { class: "mfa-empty-description" }, "You haven't set up any multi-factor authentication devices yet.", -1)),
-                        createVNode(unref(StrandsUiButton), {
+                        createVNode(unref(CompoundUiButton), {
                           onClick: _cache[4] || (_cache[4] = ($event) => activeTab.value = "add"),
                           variant: "primary"
                         }, {
@@ -12037,7 +12787,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                                 ])
                               ]),
                               createElementVNode("div", _hoisted_33$2, [
-                                device.device_type === "email" && !device.verified ? (openBlock(), createBlock(unref(StrandsUiButton), {
+                                device.device_type === "email" && !device.verified ? (openBlock(), createBlock(unref(CompoundUiButton), {
                                   key: 0,
                                   variant: "outline",
                                   size: "xs",
@@ -12057,7 +12807,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                                   onConfirm: ($event) => handleRemoveDevice(device)
                                 }, {
                                   trigger: withCtx(() => [
-                                    createVNode(unref(StrandsUiButton), {
+                                    createVNode(unref(CompoundUiButton), {
                                       variant: "ghost",
                                       size: "xs",
                                       disabled: disablingDevice[device.id]
@@ -12083,7 +12833,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                             device.backup_codes && device.backup_codes.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_37$1, [
                               createVNode(StrandsBackupCodesModal, { device }, {
                                 trigger: withCtx(() => [
-                                  createVNode(unref(StrandsUiButton), {
+                                  createVNode(unref(CompoundUiButton), {
                                     variant: "outline",
                                     size: "xs"
                                   }, {
@@ -12685,7 +13435,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                         ])
                       ]),
                       !session.is_current ? (openBlock(), createElementBlock("div", _hoisted_18$2, [
-                        createVNode(unref(StrandsUiButton), {
+                        createVNode(unref(CompoundUiButton), {
                           variant: "outline",
                           size: "xs",
                           onClick: ($event) => revokeSession(session.id),
@@ -12728,7 +13478,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 }), 128))
               ]),
               sessions.value.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_32$1, [
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   variant: "outline",
                   onClick: handleRevokeAllOther,
                   disabled: revokingAll.value
@@ -13602,7 +14352,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                             _cache[15] || (_cache[15] = createElementVNode("h4", { class: "profile-setting-title" }, "Email Address", -1)),
                             createElementVNode("p", _hoisted_15$2, toDisplayString(currentUser.value?.email), 1)
                           ]),
-                          createVNode(unref(StrandsUiButton), {
+                          createVNode(unref(CompoundUiButton), {
                             variant: "secondary",
                             size: "sm",
                             onClick: _cache[2] || (_cache[2] = ($event) => showEmailChange.value = !showEmailChange.value)
@@ -13632,7 +14382,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                                 autocomplete: "current-password",
                                 error: emailChangeForm.errors.password
                               }, null, 8, ["modelValue", "error"]),
-                              createVNode(unref(StrandsUiButton), {
+                              createVNode(unref(CompoundUiButton), {
                                 variant: "primary",
                                 size: "sm",
                                 onClick: handleEmailChange,
@@ -13654,7 +14404,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                             _cache[16] || (_cache[16] = createElementVNode("h4", { class: "profile-field-title" }, "Username", -1)),
                             createElementVNode("p", _hoisted_19, toDisplayString(currentUser.value?.username || "No username set"), 1)
                           ]),
-                          createVNode(unref(StrandsUiButton), {
+                          createVNode(unref(CompoundUiButton), {
                             variant: "secondary",
                             size: "sm",
                             disabled: !usernameChangeData.canChange || usernameChangeLoading.value,
@@ -13681,7 +14431,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                                 key: 0,
                                 class: normalizeClass(["profile-availability-message", usernameAvailability.available ? "success" : "error"])
                               }, toDisplayString(usernameAvailability.message), 3)) : createCommentVNode("", true),
-                              createVNode(unref(StrandsUiButton), {
+                              createVNode(unref(CompoundUiButton), {
                                 variant: "primary",
                                 size: "sm",
                                 onClick: handleUsernameChange,
@@ -13706,7 +14456,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                             _cache[18] || (_cache[18] = createElementVNode("h4", { class: "profile-field-title" }, "Password", -1)),
                             createElementVNode("p", _hoisted_24, "Last updated " + toDisplayString(passwordLastUpdated.value), 1)
                           ]),
-                          createVNode(unref(StrandsUiButton), {
+                          createVNode(unref(CompoundUiButton), {
                             variant: "secondary",
                             size: "sm",
                             onClick: _cache[6] || (_cache[6] = ($event) => showPasswordChange.value = !showPasswordChange.value)
@@ -13741,7 +14491,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                                 placeholder: "Confirm new password",
                                 autocomplete: "new-password"
                               }, null, 8, ["modelValue"]),
-                              createVNode(unref(StrandsUiButton), {
+                              createVNode(unref(CompoundUiButton), {
                                 variant: "primary",
                                 size: "sm",
                                 onClick: handlePasswordChange,
@@ -13780,7 +14530,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                               }), 128))
                             ])) : createCommentVNode("", true)
                           ]),
-                          createVNode(unref(StrandsUiButton), {
+                          createVNode(unref(CompoundUiButton), {
                             variant: "secondary",
                             size: "sm",
                             class: "profile-toggle-container",
@@ -13802,7 +14552,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                             ])
                           ]),
                           createElementVNode("div", _hoisted_36, [
-                            createVNode(unref(StrandsUiButton), {
+                            createVNode(unref(CompoundUiButton), {
                               variant: "secondary",
                               size: "sm",
                               disabled: loadingSessions.value,
@@ -13819,7 +14569,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                     ])
                   ]),
                   hasChanges.value ? (openBlock(), createElementBlock("div", _hoisted_37, [
-                    createVNode(unref(StrandsUiButton), {
+                    createVNode(unref(CompoundUiButton), {
                       type: "submit",
                       variant: "primary",
                       disabled: loading2.value,
@@ -13830,7 +14580,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                       ]),
                       _: 1
                     }, 8, ["disabled", "loading"]),
-                    createVNode(unref(StrandsUiButton), {
+                    createVNode(unref(CompoundUiButton), {
                       variant: "secondary",
                       onClick: handleCancel,
                       disabled: loading2.value
@@ -13883,7 +14633,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 }, {
                   default: withCtx(() => [
                     createElementVNode("div", _hoisted_46, [
-                      createVNode(unref(StrandsUiButton), {
+                      createVNode(unref(CompoundUiButton), {
                         color: "danger",
                         onClick: handleSignOut,
                         disabled: signingOut.value,
@@ -13896,7 +14646,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                       }, 8, ["disabled"]),
                       createVNode(StrandsSettingsModal, { onSettingsUpdated: handleSettingsUpdated }, {
                         trigger: withCtx(() => [
-                          createVNode(unref(StrandsUiButton), {
+                          createVNode(unref(CompoundUiButton), {
                             variant: "secondary",
                             class: "profile-sign-out-button"
                           }, {
@@ -14063,7 +14813,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                   disabled: loading2.value || isSubmitted.value,
                   error: error.value ? "Email address not found" : void 0
                 }, null, 8, ["modelValue", "disabled", "error"]),
-                createVNode(unref(StrandsUiButton), {
+                createVNode(unref(CompoundUiButton), {
                   type: "submit",
                   variant: "primary",
                   "full-width": "",
@@ -14501,7 +15251,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           invert: !!props.user
         }, {
           default: withCtx(() => [
-            createVNode(unref(StrandsUiButton), {
+            createVNode(unref(CompoundUiButton), {
               color: "secondary",
               active: showDropdown.value,
               onClick: toggleDropdown,
@@ -14664,7 +15414,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             }, 8, ["modelValue"])
           ]),
           fallback: withCtx(() => [
-            createVNode(unref(StrandsUiButton), {
+            createVNode(unref(CompoundUiButton), {
               onClick: openSignIn,
               "aria-label": "Sign in"
             }, {
@@ -14842,7 +15592,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const getNavItemComponent = () => {
       const actualType = getActualType();
       if (actualType === "button" && props.type === "button") {
-        return StrandsUiButton;
+        return CompoundUiButton;
       } else if (props.to) {
         return "router-link";
       } else {
@@ -15137,7 +15887,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]);
       }
     };
-    const Shield = {
+    const Shield2 = {
       props: {
         size: {
           type: [String, Number],
@@ -15250,7 +16000,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           footer: withCtx(() => [
             createElementVNode("div", _hoisted_18, [
-              createVNode(unref(StrandsUiButton), {
+              createVNode(unref(CompoundUiButton), {
                 variant: "secondary",
                 onClick: closeModal,
                 disabled: unref(loading2)
@@ -15271,7 +16021,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 unref(mfaEnabled2) || unref(activeMfaDevices).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_7, [
                   createElementVNode("div", _hoisted_8, [
                     createElementVNode("div", _hoisted_9, [
-                      createVNode(Shield, {
+                      createVNode(Shield2, {
                         size: 20,
                         class: "mfa-setup-shield-icon"
                       })
@@ -15300,7 +16050,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           createElementVNode("h4", { class: "mfa-setup-method-title" }, "Authenticator App"),
                           createElementVNode("p", { class: "mfa-setup-method-description" }, "Use Google Authenticator, Authy, or any TOTP-compatible app to generate secure codes")
                         ], -1)),
-                        createVNode(unref(StrandsUiButton), {
+                        createVNode(unref(CompoundUiButton), {
                           variant: "primary",
                           size: "md",
                           onClick: withModifiers(startTotpSetup, ["stop"]),
@@ -15329,7 +16079,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           createElementVNode("h4", { class: "mfa-setup-method-title" }, "Email Verification"),
                           createElementVNode("p", { class: "mfa-setup-method-description" }, "Receive verification codes directly in your email inbox for easy access")
                         ], -1)),
-                        createVNode(unref(StrandsUiButton), {
+                        createVNode(unref(CompoundUiButton), {
                           variant: "primary",
                           size: "md",
                           onClick: withModifiers(startEmailMfaSetup, ["stop"]),
@@ -15351,7 +16101,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       _cache[13] || (_cache[13] = createElementVNode("h3", { class: "mfa-setup-manage-title" }, "Manage Existing Methods", -1)),
                       createElementVNode("p", _hoisted_17, toDisplayString(unref(activeMfaDevices).length) + " device(s) currently active", 1)
                     ]),
-                    createVNode(unref(StrandsUiButton), {
+                    createVNode(unref(CompoundUiButton), {
                       variant: "secondary",
                       size: "md",
                       onClick: openMfaModal,
@@ -15647,7 +16397,7 @@ export {
   StrandsUiAlert,
   UiApp as StrandsUiApp,
   _sfc_main$B as StrandsUiAvatarEditor,
-  StrandsUiButton,
+  CompoundUiButton as StrandsUiButton,
   StrandsUiCard,
   _sfc_main$w as StrandsUiColorPicker,
   UiDivider as StrandsUiDivider,
@@ -15669,7 +16419,7 @@ export {
   UiApp,
   _sfc_main$B as UiAvatarEditor,
   _sfc_main$B as UiAvatarEditorSimple,
-  StrandsUiButton as UiButton,
+  CompoundUiButton as UiButton,
   StrandsUiCard as UiCard,
   _sfc_main$w as UiColorPicker,
   UiDivider,