@wwtdev/bsds-components-vue3 2.0.3 → 2.0.5

package/lib/bsds-components.js

@@ -1,4 +1,4 @@
-import { computed as p, ref as k, onMounted as O, onUnmounted as ne, shallowRef as Ne, watch as E, defineAsyncComponent as Oe, openBlock as u, createElementBlock as v, unref as c, createElementVNode as m, renderSlot as I, createBlock as A, resolveDynamicComponent as U, createCommentVNode as $, toDisplayString as T, createVNode as D, normalizeClass as X, useAttrs as N, mergeProps as V, withCtx as C, Fragment as R, renderList as Y, createTextVNode as W, withDirectives as We, Transition as me, vShow as je, inject as te, provide as ae, onDeactivated as Ge, normalizeStyle as Fe, isRef as Ue, nextTick as He, useSlots as Ke } from "vue";
+import { computed as p, ref as k, onMounted as O, onUnmounted as ne, shallowRef as Ne, watch as E, defineAsyncComponent as Oe, openBlock as u, createElementBlock as f, unref as v, createElementVNode as m, renderSlot as I, createBlock as A, resolveDynamicComponent as U, createCommentVNode as $, toDisplayString as T, createVNode as D, normalizeClass as X, useAttrs as N, mergeProps as V, withCtx as C, Fragment as R, renderList as Y, createTextVNode as W, withDirectives as We, Transition as me, vShow as je, inject as te, provide as ae, onDeactivated as Ge, normalizeStyle as Fe, isRef as Ue, nextTick as He, useSlots as Ke } from "vue";
 import { v4 as Ye } from "uuid";
 import { BsIconCaretDown as Xe, BsIconWarning as ve, BsIconClose as oe, BsIconSearch as Ze, BsIconCaretLeftDouble as Je, BsIconCaretLeft as Qe, BsIconCaretRight as _e, BsIconCaretRightDouble as et, BsIconActionEllipsis as tt, BsIconCircleExclamation as at, BsIconThumbsUpStroke as nt } from "@wwtdev/bsds-icons-vue3";
 import { Chart as fe, BarController as lt, BarElement as ot, CategoryScale as it, LinearScale as rt, Legend as st, Tooltip as dt } from "chart.js";
@@ -137,12 +137,12 @@ const se = (e) => {
   },
   emits: ["toggled"],
   setup(e, { emit: a }) {
-    const t = e, l = a, n = k(null), o = k(!1), { icon: s } = le(t, "icon"), [i] = H(), d = p(() => i.value + "-content"), r = p(() => i.value + "-title"), f = p(() => t.openItemId && t.openItemId === i.value || t.openItem === !0), b = p(() => t.controlled ? f.value : o.value);
+    const t = e, l = a, n = k(null), o = k(!1), { icon: s } = le(t, "icon"), [i] = H(), d = p(() => i.value + "-content"), r = p(() => i.value + "-title"), c = p(() => t.openItemId && t.openItemId === i.value || t.openItem === !0), b = p(() => t.controlled ? c.value : o.value);
     function g() {
       l("toggled", i.value), t.controlled || (o.value = !o.value);
     }
-    return (y, L) => (u(), v("div", {
-      id: c(i),
+    return (y, L) => (u(), f("div", {
+      id: v(i),
       ref_key: "containerRef",
       ref: n,
       class: "bs-accordion",
@@ -159,9 +159,9 @@ const se = (e) => {
           type: "button",
           onClick: g
         }, [
-          e.icon || y.$slots.icon ? (u(), v("span", bt, [
+          e.icon || y.$slots.icon ? (u(), f("span", bt, [
             I(y.$slots, "icon", {}, () => [
-              e.icon ? (u(), A(U(c(s) ? c(s) : "span"), { key: 0 })) : $("", !0)
+              e.icon ? (u(), A(U(v(s) ? v(s) : "span"), { key: 0 })) : $("", !0)
             ])
           ])) : $("", !0),
           m("span", {
@@ -169,7 +169,7 @@ const se = (e) => {
             "aria-level": e.headingLevel,
             role: "heading"
           }, T(e.headerText), 9, mt),
-          D(c(Xe), {
+          D(v(Xe), {
             size: "md",
             "data-position": "end"
           })
@@ -240,7 +240,7 @@ const se = (e) => {
       const i = a.count !== 1 ? "s" : "";
       return `${o}, ${s}${a.label}${i}`;
     });
-    return (o, s) => (u(), v("span", {
+    return (o, s) => (u(), f("span", {
       ref_key: "hostRef",
       ref: t,
       class: X({ "bs-badge": e.dot || l.value }),
@@ -266,10 +266,10 @@ const se = (e) => {
     function n() {
       l.value = !0, t("dismiss");
     }
-    return (o, s) => l.value ? $("", !0) : (u(), v("div", $t, [
+    return (o, s) => l.value ? $("", !0) : (u(), f("div", $t, [
       m("div", St, [
         m("div", wt, [
-          D(c(ve), { size: "lg" })
+          D(v(ve), { size: "lg" })
         ]),
         m("p", null, [
           I(o.$slots, "default")
@@ -279,7 +279,7 @@ const se = (e) => {
           title: "Close Banner",
           onClick: n
         }, [
-          D(c(oe))
+          D(v(oe))
         ])
       ])
     ]));
@@ -297,7 +297,7 @@ const se = (e) => {
   },
   setup(e) {
     const a = e, t = N(), { rootTag: l, attrsToBind: n } = he(a, t), { onLinkClick: o } = ie(a);
-    return (s, i) => (u(), A(U(c(l)), V({
+    return (s, i) => (u(), A(U(v(l)), V({
       class: "bs-button",
       "data-component": "bs-button",
       "data-ghost": e.ghostBtn,
@@ -305,7 +305,7 @@ const se = (e) => {
       "data-text": e.textBtn,
       "data-variant": e.variant,
       href: e.href
-    }, c(n), { onClick: c(o) }), {
+    }, v(n), { onClick: v(o) }), {
       default: C(() => [
         I(s.$slots, "default")
       ]),
@@ -331,7 +331,7 @@ const se = (e) => {
   setup(e) {
     return (a, t) => {
       var l;
-      return u(), v("div", It, [
+      return u(), f("div", It, [
         m("table", { summary: e.tableTitle }, [
           m("thead", null, [
             m("tr", null, [
@@ -341,18 +341,18 @@ const se = (e) => {
             ]),
             m("tr", null, [
               Ct,
-              (u(!0), v(R, null, Y(e.dataIdxLabels, (n) => (u(), v("th", {
+              (u(!0), f(R, null, Y(e.dataIdxLabels, (n) => (u(), f("th", {
                 key: n,
                 scope: "col"
               }, T(n), 1))), 128))
             ])
           ]),
           m("tbody", null, [
-            (u(!0), v(R, null, Y(e.data, (n) => (u(), v("tr", {
+            (u(!0), f(R, null, Y(e.data, (n) => (u(), f("tr", {
               key: n.label
             }, [
               m("th", At, T(n.label), 1),
-              (u(!0), v(R, null, Y(n.data, (o, s) => (u(), v("td", {
+              (u(!0), f(R, null, Y(n.data, (o, s) => (u(), f("td", {
                 key: `${o}${s}`
               }, T(o), 1))), 128))
             ]))), 128))
@@ -477,12 +477,12 @@ const Et = {
     const a = e, t = k(null), l = k(null);
     let n;
     const o = p(() => {
-      const f = {
+      const c = {
         datasets: s.value,
         labels: a.dataIdxLabels,
         type: "bar",
         tooltips: a.showTooltips
-      }, b = Dt(f);
+      }, b = Dt(c);
       return b.plugins = [Pt(l.value)], b.options.scales = {
         x: {
           grid: {
@@ -505,18 +505,18 @@ const Et = {
           }
         }
       }, b;
-    }), s = p(() => a.data.map((f, b) => ({
-      ...f,
+    }), s = p(() => a.data.map((c, b) => ({
+      ...c,
       backgroundColor: Vt(b),
       categoryPercentage: a.data.length > 1 ? 0.5 : 0.33
-    }))), i = p(() => a.chartTitle || `${a.yLabel} / ${a.xLabel}`), d = $e(function(f, b) {
-      !n || f === b || (n.options = o.value.options, n.update());
+    }))), i = p(() => a.chartTitle || `${a.yLabel} / ${a.xLabel}`), d = $e(function(c, b) {
+      !n || c === b || (n.options = o.value.options, n.update());
     }, 100), r = $e(function() {
       n && (n.data = o.value.data, n.update());
     }, 100);
     return O(() => {
       fe.register(lt, ot, it, rt, st, dt), fe.defaults.font.family = "'Roobert', sans-serif", n = new fe(t.value, o.value);
-    }), E(() => a.showLegend, d), E(() => a.showTooltips, d), E(() => a.showXGrid, d), E(() => a.showYGrid, d), E(() => a.stacked, d), E(() => a.xLabel, d), E(() => a.yLabel, d), E(() => a.data, r), E(() => a.dataIdxLabels, r), (f, b) => (u(), v("div", Et, [
+    }), E(() => a.showLegend, d), E(() => a.showTooltips, d), E(() => a.showXGrid, d), E(() => a.showYGrid, d), E(() => a.stacked, d), E(() => a.xLabel, d), E(() => a.yLabel, d), E(() => a.data, r), E(() => a.dataIdxLabels, r), (c, b) => (u(), f("div", Et, [
       m("figure", null, [
         m("div", null, [
           m("canvas", {
@@ -544,7 +544,34 @@ const Et = {
       ])
     ]));
   }
-}, Mt = ["data-size"], Rt = ["checked", "disabled", "id", "required", "data-error"], En = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+}, Mt = ["data-disabled", "for"], Rt = /* @__PURE__ */ m("span", {
+  "data-required": "true",
+  "aria-hidden": "true"
+}, " *", -1), Nt = /* @__PURE__ */ m("span", { class: "visually-hidden" }, "required", -1), _ = {
+  __name: "BsLabel",
+  props: {
+    disabled: { type: Boolean, default: !1 },
+    for: { type: String, required: !0 },
+    hide: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (a, t) => (u(), f("label", {
+      class: X(["bs-label", e.hide ? "visually-hidden" : ""]),
+      "data-component": "bs-label",
+      "data-disabled": e.disabled,
+      for: e.for
+    }, [
+      m("span", null, [
+        I(a.$slots, "default")
+      ]),
+      e.required ? (u(), f(R, { key: 0 }, [
+        Rt,
+        Nt
+      ], 64)) : $("", !0)
+    ], 10, Mt));
+  }
+}, Ot = ["data-size"], Wt = ["checked", "disabled", "id", "required", "data-error"], En = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
   __name: "BsCheckbox",
   props: {
     /** Sets the label. */
@@ -600,14 +627,14 @@ const Et = {
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
     const t = e, l = N(), [n] = H(), { toChild: o, toRoot: s } = Z(t, l), i = k(null), d = p(() => t.inputId || n.value), r = p(() => t.checked || t.modelValue);
-    function f() {
+    function c() {
       i.value && (i.value.indeterminate = t.checkedPartially && !r.value);
     }
-    return E(r, f), E(() => t.checkedPartially, f), (b, g) => (u(), v("div", V({
+    return E(r, c), E(() => t.checkedPartially, c), (b, g) => (u(), f("div", V({
       class: "bs-boolean",
       "data-component": "bs-checkbox",
       "data-size": e.size
-    }, c(s)), [
+    }, v(s)), [
       m("input", V({
         ref_key: "inputEl",
         ref: i,
@@ -618,8 +645,8 @@ const Et = {
         type: "checkbox",
         "data-error": e.error,
         onChange: g[0] || (g[0] = (y) => b.$emit("update:modelValue", y.target.checked))
-      }, c(o)), null, 16, Rt),
-      e.label || b.$slots.label ? (u(), A(c(_), {
+      }, v(o)), null, 16, Wt),
+      e.label || b.$slots.label ? (u(), A(_, {
         key: 0,
         for: d.value,
         disabled: e.disabled,
@@ -632,9 +659,9 @@ const Et = {
         ]),
         _: 3
       }, 8, ["for", "disabled", "required"])) : $("", !0)
-    ], 16, Mt));
+    ], 16, Ot));
   }
-}), Nt = { key: 0 }, Ot = { class: "bs-circle-button-icon" }, Wt = { key: 1 }, qn = {
+}), jt = { key: 0 }, Gt = { class: "bs-circle-button-icon" }, Ft = { key: 1 }, qn = {
   __name: "BsCircleButton",
   props: {
     disabled: {
@@ -680,8 +707,8 @@ const Et = {
     const a = e, t = N(), { rootTag: l, attrsToBind: n } = he(a, t), { icon: o } = le(a, "icon"), { onLinkClick: s } = ie(a), i = p(() => a.textBtn ? {} : a.href ? { title: a.label } : { "aria-label": a.label }), d = p(() => {
       if (a.hoverEffect)
         return a.iconPosition;
-    }), r = p(() => a.textBtn && a.iconPosition !== "left"), f = p(() => a.textBtn && a.iconPosition === "left");
-    return (b, g) => (u(), A(U(c(l)), V({
+    }), r = p(() => a.textBtn && a.iconPosition !== "left"), c = p(() => a.textBtn && a.iconPosition === "left");
+    return (b, g) => (u(), A(U(v(l)), V({
       class: "bs-circle-button",
       "data-disabled": e.disabled,
       "data-direction": d.value,
@@ -689,15 +716,15 @@ const Et = {
       "data-size": e.size,
       "data-text": e.textBtn,
       href: e.href
-    }, { ...c(n), ...i.value }, { onClick: c(s) }), {
+    }, { ...v(n), ...i.value }, { onClick: v(s) }), {
       default: C(() => [
-        r.value ? (u(), v("span", Nt, T(e.label), 1)) : $("", !0),
-        m("span", Ot, [
+        r.value ? (u(), f("span", jt, T(e.label), 1)) : $("", !0),
+        m("span", Gt, [
           I(b.$slots, "icon", {}, () => [
-            (u(), A(U(c(o)), { size: e.size }, null, 8, ["size"]))
+            (u(), A(U(v(o)), { size: e.size }, null, 8, ["size"]))
           ])
         ]),
-        f.value ? (u(), v("span", Wt, T(e.label), 1)) : $("", !0)
+        c.value ? (u(), f("span", Ft, T(e.label), 1)) : $("", !0)
       ]),
       _: 3
     }, 16, ["data-disabled", "data-direction", "data-ghost", "data-size", "data-text", "href", "onClick"]));
@@ -747,16 +774,16 @@ const Et = {
   setup(e, { emit: a }) {
     const t = e, l = a, n = [];
     function o(d, r) {
-      const { duration: f, enterClass: b, enterAttribute: g } = t;
+      const { duration: c, enterClass: b, enterAttribute: g } = t;
       n.push(setTimeout(() => {
         b && d.classList.add(b), g && d.setAttribute(g, ""), n.push(setTimeout(() => {
           r();
-        }, f)), l("enter", d);
+        }, c)), l("enter", d);
       }));
     }
     function s(d, r) {
       const {
-        duration: f,
+        duration: c,
         enterClass: b,
         enterAttribute: g,
         leaveClass: y,
@@ -764,11 +791,11 @@ const Et = {
       } = t;
       d.classList.remove(b), d.removeAttribute(g), y && d.classList.add(y), L && d.setAttribute(L, ""), n.push(setTimeout(() => {
         r();
-      }, f)), l("leave", d);
+      }, c)), l("leave", d);
     }
     function i(d) {
-      const { leaveClass: r, leaveAttribute: f } = t;
-      d.classList.remove(r), d.removeAttribute(f), l("after-leave", d);
+      const { leaveClass: r, leaveAttribute: c } = t;
+      d.classList.remove(r), d.removeAttribute(c), l("after-leave", d);
     }
     return ne(() => {
       n.forEach((d) => {
@@ -777,14 +804,14 @@ const Et = {
     }), (d, r) => e.preloaded ? We((u(), A(me, {
       key: 0,
       css: !1,
-      onBeforeEnter: r[0] || (r[0] = (f) => l("before-enter", f)),
+      onBeforeEnter: r[0] || (r[0] = (c) => l("before-enter", c)),
       onEnter: o,
-      onAfterEnter: r[1] || (r[1] = (f) => l("after-enter", f)),
-      onEnterCancelled: r[2] || (r[2] = (f) => l("enter-cancelled", f)),
-      onBeforeLeave: r[3] || (r[3] = (f) => l("before-leave", f)),
+      onAfterEnter: r[1] || (r[1] = (c) => l("after-enter", c)),
+      onEnterCancelled: r[2] || (r[2] = (c) => l("enter-cancelled", c)),
+      onBeforeLeave: r[3] || (r[3] = (c) => l("before-leave", c)),
       onLeave: s,
       onAfterLeave: i,
-      onLeaveCancelled: r[4] || (r[4] = (f) => l("leave-cancelled", f))
+      onLeaveCancelled: r[4] || (r[4] = (c) => l("leave-cancelled", c))
     }, {
       default: C(() => [
         I(d.$slots, "default")
@@ -795,14 +822,14 @@ const Et = {
     ]) : (u(), A(me, {
       key: 1,
       css: !1,
-      onBeforeEnter: r[5] || (r[5] = (f) => l("before-enter", f)),
+      onBeforeEnter: r[5] || (r[5] = (c) => l("before-enter", c)),
       onEnter: o,
-      onAfterEnter: r[6] || (r[6] = (f) => l("after-enter", f)),
-      onEnterCancelled: r[7] || (r[7] = (f) => l("enter-cancelled", f)),
-      onBeforeLeave: r[8] || (r[8] = (f) => l("before-leave", f)),
+      onAfterEnter: r[6] || (r[6] = (c) => l("after-enter", c)),
+      onEnterCancelled: r[7] || (r[7] = (c) => l("enter-cancelled", c)),
+      onBeforeLeave: r[8] || (r[8] = (c) => l("before-leave", c)),
       onLeave: s,
       onAfterLeave: i,
-      onLeaveCancelled: r[9] || (r[9] = (f) => l("leave-cancelled", f))
+      onLeaveCancelled: r[9] || (r[9] = (c) => l("leave-cancelled", c))
     }, {
       default: C(() => [
         e.shown ? I(d.$slots, "default", { key: 0 }) : $("", !0)
@@ -810,7 +837,7 @@ const Et = {
       _: 3
     }));
   }
-}, jt = ["data-width"], Gt = { key: 0 }, Ft = { key: 0 }, Se = {
+}, Ut = ["data-width"], Ht = { key: 0 }, Kt = { key: 0 }, Se = {
   __name: "BsDropdownInternal",
   props: {
     shown: {
@@ -897,20 +924,20 @@ const Et = {
     function r() {
       o = !0, l("after-enter");
     }
-    function f() {
+    function c() {
       o = !1, l("after-leave");
     }
     function b() {
       return t.width === "toggle" ? void 0 : t.width;
     }
-    return (g, y) => (u(), A(c(de), {
+    return (g, y) => (u(), A(v(de), {
       shown: e.shown,
       preloaded: e.preloaded,
       duration: 75,
       "enter-attribute": "data-shown",
       onAfterEnter: y[1] || (y[1] = (L) => r()),
       onEnter: y[2] || (y[2] = (L) => d()),
-      onAfterLeave: y[3] || (y[3] = (L) => f())
+      onAfterLeave: y[3] || (y[3] = (L) => c())
     }, {
       default: C(() => [
         m("div", V({
@@ -919,29 +946,29 @@ const Et = {
           class: "bs-dropdown",
           "data-width": b()
         }, g.$attrs), [
-          e.helperText ? (u(), v("header", Gt, [
+          e.helperText ? (u(), f("header", Ht, [
             m("div", null, [
               m("h3", null, T(e.helperText), 1),
-              e.helperDescription ? (u(), v("p", Ft, T(e.helperDescription), 1)) : $("", !0)
+              e.helperDescription ? (u(), f("p", Kt, T(e.helperDescription), 1)) : $("", !0)
             ]),
             m("button", {
               type: "button",
               title: "close",
               onClick: y[0] || (y[0] = () => l("close"))
             }, [
-              D(c(oe))
+              D(v(oe))
             ])
           ])) : $("", !0),
           I(g.$slots, "default")
-        ], 16, jt)
+        ], 16, Ut)
       ]),
       _: 3
     }, 8, ["shown", "preloaded"]));
   }
-}, Ut = {
+}, Yt = {
   key: 0,
   class: "bs-dropdown-backdrop"
-}, Ht = {
+}, Xt = {
   __name: "BsDropdown",
   props: {
     shown: {
@@ -1022,11 +1049,11 @@ const Et = {
   ],
   setup(e, { emit: a }) {
     const t = e, l = a, n = k(null), { transition: o } = se(t), s = p(() => t.toggleId ? t.toggleId : t.anchorId), i = p(() => t.top ? "top" : t.center ? "center" : t.right ? "right" : t.position);
-    return (d, r) => (u(), v(R, null, [
-      c(o) ? (u(), v("div", Ut)) : $("", !0),
-      e.containerId ? (u(), A(c(Se), V({
+    return (d, r) => (u(), f(R, null, [
+      v(o) ? (u(), f("div", Yt)) : $("", !0),
+      e.containerId ? (u(), A(v(Se), V({
         key: 1,
-        shown: c(o),
+        shown: v(o),
         preloaded: e.preloaded,
         "anchor-id": s.value,
         "container-id": e.containerId,
@@ -1035,23 +1062,23 @@ const Et = {
         position: i.value,
         width: e.width
       }, d.$attrs, {
-        onClose: r[0] || (r[0] = (f) => l("close")),
-        onAfterEnter: r[1] || (r[1] = (f) => l("after-enter")),
-        onEnter: r[2] || (r[2] = (f) => l("enter")),
-        onAfterLeave: r[3] || (r[3] = (f) => l("after-leave"))
+        onClose: r[0] || (r[0] = (c) => l("close")),
+        onAfterEnter: r[1] || (r[1] = (c) => l("after-enter")),
+        onEnter: r[2] || (r[2] = (c) => l("enter")),
+        onAfterLeave: r[3] || (r[3] = (c) => l("after-leave"))
       }), {
         default: C(() => [
           I(d.$slots, "default")
         ]),
         _: 3
-      }, 16, ["shown", "preloaded", "anchor-id", "container-id", "helper-description", "helper-text", "position", "width"])) : (u(), v("div", {
+      }, 16, ["shown", "preloaded", "anchor-id", "container-id", "helper-description", "helper-text", "position", "width"])) : (u(), f("div", {
         key: 2,
         ref_key: "containerRef",
         ref: n,
         style: { position: "relative" }
       }, [
-        D(c(Se), V({
-          shown: c(o),
+        D(v(Se), V({
+          shown: v(o),
           preloaded: e.preloaded,
           "anchor-id": s.value,
           "container-ref": n.value,
@@ -1060,10 +1087,10 @@ const Et = {
           position: i.value,
           width: e.width
         }, d.$attrs, {
-          onClose: r[4] || (r[4] = (f) => l("close")),
-          onAfterEnter: r[5] || (r[5] = (f) => l("after-enter")),
-          onEnter: r[6] || (r[6] = (f) => l("enter")),
-          onAfterLeave: r[7] || (r[7] = (f) => l("after-leave"))
+          onClose: r[4] || (r[4] = (c) => l("close")),
+          onAfterEnter: r[5] || (r[5] = (c) => l("after-enter")),
+          onEnter: r[6] || (r[6] = (c) => l("enter")),
+          onAfterLeave: r[7] || (r[7] = (c) => l("after-leave"))
         }), {
           default: C(() => [
             I(d.$slots, "default")
@@ -1073,7 +1100,7 @@ const Et = {
       ], 512))
     ], 64));
   }
-}, Kt = ["data-value", "data-variant", "id"], Yt = {
+}, Zt = ["data-value", "data-variant", "id"], Jt = {
   __name: "BsDropdownOption",
   props: {
     value: {
@@ -1095,7 +1122,7 @@ const Et = {
       var i;
       n(o.value, a.value), (i = t.value.querySelector("a")) == null || i.click();
     }
-    return (i, d) => (u(), v("li", {
+    return (i, d) => (u(), f("li", {
       "data-component": "bs-dropdown-option",
       "data-value": a.value,
       ref_key: "optionRef",
@@ -1107,9 +1134,9 @@ const Et = {
       onClick: s
     }, [
       I(i.$slots, "default")
-    ], 8, Kt));
+    ], 8, Zt));
   }
-}, Xt = ["aria-activedescendant", "aria-label", "id"], Zt = {
+}, Qt = ["aria-activedescendant", "aria-label", "id"], _t = {
   __name: "BsDropdownOptionList",
   props: {
     optionsId: {
@@ -1162,10 +1189,10 @@ const Et = {
     }), E(() => t.shown, () => {
       g();
     });
-    const f = p(() => t.visible || t.shown), b = p(() => t.modelValue || t.selectedValue);
+    const c = p(() => t.visible || t.shown), b = p(() => t.modelValue || t.selectedValue);
     function g() {
       var w, S, q, j, ee;
-      f.value ? (d = r().findIndex(
+      c.value ? (d = r().findIndex(
         (J) => J.getAttribute("data-value") === String(b.value)
       ), d > -1 && ((w = r()[d]) == null || w.setAttribute("data-selected", ""), (S = r()[d]) == null || S.setAttribute("aria-selected", "true"), i = d, t.focusDelay > 0 ? setTimeout(() => {
         var J;
@@ -1184,7 +1211,7 @@ const Et = {
       i > -1 && ((w = r()[i]) == null || w.blur());
     }
     function L(w) {
-      if (f.value)
+      if (c.value)
         switch (w.key) {
           case "ArrowDown":
             M("down"), w.preventDefault();
@@ -1224,7 +1251,7 @@ const Et = {
     function P(w, S) {
       o.value = w, y(), l("optselected", S), l("update:modelValue", S), l("close");
     }
-    return (w, S) => (u(), v("ul", {
+    return (w, S) => (u(), f("ul", {
       ref_key: "optionsRef",
       ref: n,
       "aria-activedescendant": o.value || void 0,
@@ -1234,9 +1261,9 @@ const Et = {
       role: "listbox"
     }, [
       I(w.$slots, "default")
-    ], 8, Xt));
+    ], 8, Qt));
   }
-}, Jt = {
+}, ea = {
   __name: "BsDropdownWithOptions",
   props: {
     // OPTION LIST PROPS
@@ -1346,7 +1373,7 @@ const Et = {
     function s() {
       l.value && (l.value = !1, t("close"));
     }
-    return (i, d) => (u(), A(c(Ht), {
+    return (i, d) => (u(), A(v(Xt), {
       shown: e.shown,
       preloaded: e.preloaded,
       "anchor-id": e.anchorId,
@@ -1368,7 +1395,7 @@ const Et = {
       onAfterLeave: d[1] || (d[1] = (r) => t("after-leave"))
     }, {
       default: C(() => [
-        D(c(Zt), {
+        D(v(_t), {
           label: e.label,
           "model-value": e.modelValue,
           "options-id": e.optionsId,
@@ -1386,10 +1413,10 @@ const Et = {
       _: 3
     }, 8, ["shown", "preloaded", "anchor-id", "center", "container-id", "enter-controlled", "enter-trigger", "helper-description", "helper-text", "leave-trigger", "position", "right", "toggle-id", "top", "width"]));
   }
-}, Qt = {
+}, ta = {
   class: "bs-field-details",
   "data-component": "bs-field-details"
-}, _t = ["id", "data-error"], ea = ["data-error"], pe = {
+}, aa = ["id", "data-error"], na = ["data-error"], pe = {
   __name: "BsFieldDetails",
   props: {
     /** The number of characters that have been entered by the user.  */
@@ -1410,22 +1437,22 @@ const Et = {
   },
   setup(e) {
     const a = e, t = p(() => a.error && a.errorMsg || a.hint);
-    return (l, n) => (u(), v("div", Qt, [
-      t.value ? (u(), v("span", {
+    return (l, n) => (u(), f("div", ta, [
+      t.value ? (u(), f("span", {
         key: 0,
         id: e.hintId,
         class: "bs-hint",
         "data-error": e.error
-      }, T(t.value), 9, _t)) : $("", !0),
-      e.charMax ? (u(), v("span", {
+      }, T(t.value), 9, aa)) : $("", !0),
+      e.charMax ? (u(), f("span", {
         key: 1,
         "aria-description": "character count over character limit for the preceding text field",
         class: "bs-character-count",
         "data-error": a.charCount > a.charMax
-      }, T(a.charCount || "0") + " / " + T(a.charMax), 9, ea)) : $("", !0)
+      }, T(a.charCount || "0") + " / " + T(a.charMax), 9, na)) : $("", !0)
     ]));
   }
-}, ta = ["view-box"], aa = ["id"], na = ["offset", "stop-color"], zn = {
+}, la = ["view-box"], oa = ["id"], ia = ["offset", "stop-color"], zn = {
   __name: "BsIconGradientWrapper",
   setup(e) {
     const a = k(null), t = k(null), l = [
@@ -1435,39 +1462,39 @@ const Et = {
     ], [n] = H();
     return O(() => {
       t.value = a.value.querySelector("svg").getAttribute("viewBox") || "0 0 0 0";
-    }), (o, s) => (u(), v(R, null, [
+    }), (o, s) => (u(), f(R, null, [
       m("span", {
         ref_key: "svgWrapperRef",
         ref: a,
         class: "bs-icon-gradient-wrapper",
-        style: Fe(`fill: url(#${c(n)});`)
+        style: Fe(`fill: url(#${v(n)});`)
       }, [
         I(o.$slots, "default")
       ], 4),
-      (u(), v("svg", {
+      (u(), f("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         "view-box": t.value,
         width: "0",
         height: "0"
       }, [
         m("linearGradient", {
-          id: c(n),
+          id: v(n),
           x1: "0",
           y1: "0",
           x2: "100%",
           y2: "100%",
           "gradient-units": "userSpaceOnUse"
         }, [
-          (u(), v(R, null, Y(l, (i) => m("stop", {
+          (u(), f(R, null, Y(l, (i) => m("stop", {
             key: i.offset,
             offset: i.offset,
             "stop-color": i.color
-          }, null, 8, na)), 64))
-        ], 8, aa)
-      ], 8, ta))
+          }, null, 8, ia)), 64))
+        ], 8, oa)
+      ], 8, la))
     ], 64));
   }
-}, la = ["data-error", "id", "value"], we = {
+}, ra = ["data-error", "id", "value"], we = {
   __name: "BsInput",
   props: {
     error: {
@@ -1487,15 +1514,16 @@ const Et = {
       const d = n.type === "number" ? parseInt(i.target.value) : i.target.value;
       l("update:modelValue", d);
     }
-    return (i, d) => (u(), v("input", V({
+    return (i, d) => (u(), f("input", V({
+      class: "bs-input",
       "data-component": "bs-input",
       "data-error": e.error,
       id: i.$attrs.id || e.inputId,
       value: e.value || e.modelValue,
       onInput: s
-    }, o.value), null, 16, la));
+    }, o.value), null, 16, ra));
   }
-}, oa = ["data-disabled", "data-error", "data-variant", "data-multifocus"], ia = {
+}, sa = ["data-disabled", "data-error", "data-variant", "data-multifocus"], da = {
   __name: "BsInputAddon",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -1504,7 +1532,7 @@ const Et = {
     variant: { type: String, validator: (e) => e === "inner-bordered" }
   },
   setup(e) {
-    return (a, t) => (u(), v("div", {
+    return (a, t) => (u(), f("div", {
       class: "bs-input-addon",
       "data-component": "bs-input-addon",
       "data-disabled": e.disabled,
@@ -1513,7 +1541,7 @@ const Et = {
       "data-multifocus": e.multifocus
     }, [
       I(a.$slots, "default")
-    ], 8, oa));
+    ], 8, sa));
   }
 }, Mn = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
   __name: "BsInputField",
@@ -1566,11 +1594,11 @@ const Et = {
       var b, g;
       return ((g = (b = t.hints) == null ? void 0 : b.join) == null ? void 0 : g.call(b, `
 `)) || t.hints;
-    }), r = p(() => t.error && t.errorMsg || t.hint || d.value || void 0), f = p(() => t.inputId || n.value);
-    return (b, g) => (u(), v("div", V({ "data-component": "bs-input-field" }, c(i)), [
-      e.label || b.$slots.label ? (u(), A(c(_), {
+    }), r = p(() => t.error && t.errorMsg || t.hint || d.value || void 0), c = p(() => t.inputId || n.value);
+    return (b, g) => (u(), f("div", V({ "data-component": "bs-input-field" }, v(i)), [
+      e.label || b.$slots.label ? (u(), A(_, {
         key: 0,
-        for: f.value,
+        for: c.value,
         disabled: e.disabled,
         required: e.required
       }, {
@@ -1581,23 +1609,23 @@ const Et = {
         ]),
         _: 3
       }, 8, ["for", "disabled", "required"])) : $("", !0),
-      D(c(we), V({
+      D(we, V({
         disabled: e.disabled,
         error: e.error,
-        "hint-id": c(o),
-        id: f.value,
+        "hint-id": v(o),
+        id: c.value,
         placeholder: e.placeholder,
         required: e.required,
         type: e.type,
         value: e.value || e.modelValue,
         "onUpdate:modelValue": g[0] || (g[0] = (y) => b.$emit("update:modelValue", y))
-      }, c(s)), null, 16, ["disabled", "error", "hint-id", "id", "placeholder", "required", "type", "value"]),
+      }, v(s)), null, 16, ["disabled", "error", "hint-id", "id", "placeholder", "required", "type", "value"]),
       r.value ? (u(), A(pe, {
         key: 1,
         error: e.error,
         "error-msg": e.errorMsg,
         hint: e.hint || d.value,
-        "hint-id": c(o)
+        "hint-id": v(o)
       }, null, 8, ["error", "error-msg", "hint", "hint-id"])) : $("", !0)
     ], 16));
   }
@@ -1635,61 +1663,34 @@ const Et = {
   emits: ["clear", "update:modelValue"],
   setup(e, { emit: a }) {
     const t = e, l = N(), { toChild: n, toRoot: o } = Z(t, l);
-    return (s, i) => (u(), A(c(ia), V({
+    return (s, i) => (u(), A(da, V({
       class: "bs-input-search",
       "data-component": "bs-input-search",
       disabled: e.disabled
-    }, c(o)), {
+    }, v(o)), {
       default: C(() => [
-        D(c(Ze)),
-        D(c(we), V({
+        D(v(Ze)),
+        D(we, V({
           "data-autowidth": "",
           disabled: e.disabled,
           "input-id": e.inputId,
           placeholder: e.placeholder,
           value: e.value || e.modelValue,
           "onUpdate:modelValue": i[0] || (i[0] = (d) => s.$emit("update:modelValue", d))
-        }, c(n)), null, 16, ["disabled", "input-id", "placeholder", "value"]),
-        e.disabled || e.hideClear ? $("", !0) : (u(), v("button", {
+        }, v(n)), null, 16, ["disabled", "input-id", "placeholder", "value"]),
+        e.disabled || e.hideClear ? $("", !0) : (u(), f("button", {
           key: 0,
           title: "Clear",
           type: "button",
           onClick: i[1] || (i[1] = (d) => s.$emit("clear"))
         }, [
-          D(c(oe), { size: "sm" })
+          D(v(oe), { size: "sm" })
         ]))
       ]),
       _: 1
     }, 16, ["disabled"]));
   }
-}), ra = ["data-disabled", "for"], sa = /* @__PURE__ */ m("span", {
-  "data-required": "true",
-  "aria-hidden": "true"
-}, " *", -1), da = /* @__PURE__ */ m("span", { class: "visually-hidden" }, "required", -1), _ = {
-  __name: "BsLabel",
-  props: {
-    disabled: { type: Boolean, default: !1 },
-    for: { type: String, required: !0 },
-    hide: { type: Boolean, default: !1 },
-    required: { type: Boolean, default: !1 }
-  },
-  setup(e) {
-    return (a, t) => (u(), v("label", {
-      class: X(["bs-label", e.hide ? "visually-hidden" : ""]),
-      "data-component": "bs-label",
-      "data-disabled": e.disabled,
-      for: e.for
-    }, [
-      m("span", null, [
-        I(a.$slots, "default")
-      ]),
-      e.required ? (u(), v(R, { key: 0 }, [
-        sa,
-        da
-      ], 64)) : $("", !0)
-    ], 10, ra));
-  }
-}, ua = ["data-size", "data-variant"], ca = /* @__PURE__ */ m("span", null, null, -1), fa = /* @__PURE__ */ m("span", null, null, -1), va = /* @__PURE__ */ m("span", null, null, -1), ha = /* @__PURE__ */ m("span", null, null, -1), pa = /* @__PURE__ */ m("span", { class: "visually-hidden" }, "Loading", -1), ga = [
+}), ua = ["data-size", "data-variant"], ca = /* @__PURE__ */ m("span", null, null, -1), fa = /* @__PURE__ */ m("span", null, null, -1), va = /* @__PURE__ */ m("span", null, null, -1), ha = /* @__PURE__ */ m("span", null, null, -1), pa = /* @__PURE__ */ m("span", { class: "visually-hidden" }, "Loading", -1), ga = [
   ca,
   fa,
   va,
@@ -1709,7 +1710,7 @@ const Et = {
     }
   },
   setup(e) {
-    return (a, t) => (u(), v("span", {
+    return (a, t) => (u(), f("span", {
       class: "bs-loader",
       "data-size": e.size,
       "data-variant": e.variant,
@@ -1746,8 +1747,8 @@ const Et = {
   emits: ["after-enter", "after-leave"],
   setup(e, { emit: a }) {
     const t = e, l = a, { transition: n } = se(t);
-    return (o, s) => (u(), A(c(de), {
-      shown: c(n),
+    return (o, s) => (u(), A(v(de), {
+      shown: v(n),
       preloaded: e.preloaded,
       duration: 75,
       "enter-attribute": "data-shown",
@@ -1812,16 +1813,16 @@ const Et = {
     let o = !1;
     return re(["Escape"], () => {
       o && l("close", t.modalId);
-    }), (s, i) => (u(), v(R, null, [
+    }), (s, i) => (u(), f(R, null, [
       D(ma, {
-        shown: c(n),
+        shown: v(n),
         preloaded: e.preloaded,
         "enter-controlled": e.enterControlled,
         "enter-trigger": e.enterTrigger,
         "leave-trigger": e.leaveTrigger
       }, null, 8, ["shown", "preloaded", "enter-controlled", "enter-trigger", "leave-trigger"]),
       D(de, {
-        shown: c(n),
+        shown: v(n),
         preloaded: e.preloaded,
         duration: 75,
         "enter-attribute": "data-shown",
@@ -1836,14 +1837,14 @@ const Et = {
             role: e.alert ? "alertdialog" : "dialog",
             "aria-modal": "true"
           }, [
-            e.closeButton ? (u(), v("div", Ba, [
+            e.closeButton ? (u(), f("div", Ba, [
               m("button", {
                 type: "button",
                 title: "Close Modal",
                 "aria-label": "Close Modal",
                 onClick: i[0] || (i[0] = (d) => l("close", e.modalId))
               }, [
-                D(c(oe), { class: "close-button" })
+                D(v(oe), { class: "close-button" })
               ])
             ])) : $("", !0),
             I(s.$slots, "default")
@@ -1972,7 +1973,7 @@ const Et = {
     function r() {
       n.value = Math.max(n.value - 1, 1);
     }
-    function f() {
+    function c() {
       n.value = Math.min(
         n.value + 1,
         s.value
@@ -1994,13 +1995,13 @@ const Et = {
       const P = (n.value - 1) * t.itemsPerGroup + 1, w = Math.min(P - 1 + t.itemsPerGroup, t.itemsCount);
       return `${t.centerLabel ?? "Results"} ${P} - ${w} of ${t.itemsCount}`;
     }), M = p(() => t.resultsIncrements.split(",").map((P) => parseInt(P)));
-    return (P, w) => (u(), v("div", {
+    return (P, w) => (u(), f("div", {
       class: "bs-pagination",
       "data-variant": i.value,
       "data-fixed": t.fixed
     }, [
-      e.variant === "base" || e.variant === "group" ? (u(), v("div", Sa, [
-        e.showFirstLastButtons ? (u(), v("button", {
+      e.variant === "base" || e.variant === "group" ? (u(), f("div", Sa, [
+        e.showFirstLastButtons ? (u(), f("button", {
           key: 0,
           type: "button",
           class: X(e.firstPageText ? "bs-pagination-word-caret" : void 0),
@@ -2008,8 +2009,8 @@ const Et = {
           disabled: n.value === 1,
           onClick: d
         }, [
-          D(c(Je)),
-          e.firstPageText ? (u(), v("span", ka, T(e.firstPageText), 1)) : $("", !0)
+          D(v(Je)),
+          e.firstPageText ? (u(), f("span", ka, T(e.firstPageText), 1)) : $("", !0)
         ], 10, wa)) : $("", !0),
         m("button", {
           type: "button",
@@ -2018,12 +2019,12 @@ const Et = {
           disabled: n.value === 1,
           onClick: r
         }, [
-          D(c(Qe)),
-          e.prevPageText ? (u(), v("span", Ta, T(e.prevPageText), 1)) : $("", !0)
+          D(v(Qe)),
+          e.prevPageText ? (u(), f("span", Ta, T(e.prevPageText), 1)) : $("", !0)
         ], 10, Ia)
       ])) : $("", !0),
-      e.variant === "base" && e.centerDisplay === "numbers" ? (u(), v("div", xa, [
-        (u(!0), v(R, null, Y(g.value, (S) => (u(), v("button", {
+      e.variant === "base" && e.centerDisplay === "numbers" ? (u(), f("div", xa, [
+        (u(!0), f(R, null, Y(g.value, (S) => (u(), f("button", {
           key: `page-${S}-button`,
           type: "button",
           title: `Page ${S}`,
@@ -2031,12 +2032,12 @@ const Et = {
           onClick: (q) => n.value = S
         }, T(S), 9, Ca))), 128))
       ])) : $("", !0),
-      t.variant === "base" && t.centerDisplay === "text" ? (u(), v("span", Aa, T(y.value), 1)) : $("", !0),
-      t.variant === "group" ? (u(), v("span", La, T(L.value), 1)) : $("", !0),
-      t.variant === "results" ? (u(), v(R, { key: 4 }, [
+      t.variant === "base" && t.centerDisplay === "text" ? (u(), f("span", Aa, T(y.value), 1)) : $("", !0),
+      t.variant === "group" ? (u(), f("span", La, T(L.value), 1)) : $("", !0),
+      t.variant === "results" ? (u(), f(R, { key: 4 }, [
         Pa,
         m("div", Da, [
-          (u(!0), v(R, null, Y(M.value, (S) => (u(), v("button", {
+          (u(!0), f(R, null, Y(M.value, (S) => (u(), f("button", {
             type: "button",
             key: `results-${S}`,
             "data-selected": S === n.value,
@@ -2045,18 +2046,18 @@ const Et = {
           }, T(S), 9, Va))), 128))
         ])
       ], 64)) : $("", !0),
-      e.variant === "base" || e.variant === "group" ? (u(), v("div", Ea, [
+      e.variant === "base" || e.variant === "group" ? (u(), f("div", Ea, [
         m("button", {
           type: "button",
           class: X(e.nextPageText ? "bs-pagination-word-caret" : void 0),
           title: e.nextPageText,
           disabled: n.value === s.value,
-          onClick: f
+          onClick: c
         }, [
-          e.nextPageText ? (u(), v("span", za, T(e.nextPageText), 1)) : $("", !0),
-          D(c(_e))
+          e.nextPageText ? (u(), f("span", za, T(e.nextPageText), 1)) : $("", !0),
+          D(v(_e))
         ], 10, qa),
-        e.showFirstLastButtons ? (u(), v("button", {
+        e.showFirstLastButtons ? (u(), f("button", {
           key: 0,
           type: "button",
           class: X(e.lastPageText ? "bs-pagination-word-caret" : void 0),
@@ -2064,8 +2065,8 @@ const Et = {
           disabled: n.value === s.value,
           onClick: b
         }, [
-          e.lastPageText ? (u(), v("span", Ra, T(e.lastPageText), 1)) : $("", !0),
-          D(c(et))
+          e.lastPageText ? (u(), f("span", Ra, T(e.lastPageText), 1)) : $("", !0),
+          D(v(et))
         ], 10, Ma)) : $("", !0)
       ])) : $("", !0)
     ], 8, $a));
@@ -2092,7 +2093,7 @@ const Et = {
   },
   setup(e) {
     const a = e, { onLinkClick: t } = ie(a), l = N(), { rootTag: n, attrsToBind: o } = he(a, l, "span");
-    return (s, i) => (u(), A(U(c(n)), V({
+    return (s, i) => (u(), A(U(v(n)), V({
       class: "bs-pill",
       "data-active": e.active,
       "data-component": "bs-pill",
@@ -2100,7 +2101,7 @@ const Et = {
       "data-variant": e.variant || void 0,
       disabled: e.disabled,
       href: e.href
-    }, c(o), { onClick: c(t) }), {
+    }, v(o), { onClick: v(t) }), {
       default: C(() => [
         m("span", { "data-truncate": e.truncate }, [
           I(s.$slots, "default")
@@ -2109,71 +2110,6 @@ const Et = {
       _: 3
     }, 16, ["data-active", "data-status", "data-variant", "disabled", "href", "onClick"]));
   }
-}, Gn = {
-  __name: "BsProfile",
-  props: {
-    layout: {
-      type: String,
-      default: "vertical",
-      validator: (e) => ["horizontal", "vertical"].includes(e)
-    },
-    href: String,
-    imageSrc: String,
-    imageSize: {
-      type: String,
-      default: "lg",
-      validator: (e) => ["sm", "md", "lg"].includes(e)
-    },
-    initials: String,
-    profileName: String,
-    company: String,
-    jobTitle: String,
-    email: String,
-    action: String,
-    actionIcon: String,
-    miscMeta: String,
-    miscMetaIcon: String,
-    router: Object
-  },
-  emits: ["action-toggled"],
-  setup(e, { emit: a }) {
-    const t = e, l = a, { onLinkClick: n } = ie(t), o = p(() => t.href ? "a" : "div");
-    return (s, i) => (u(), A(U(o.value), {
-      class: "bs-profile",
-      href: e.href,
-      "data-layout": e.layout,
-      onClick: c(n)
-    }, {
-      default: C(() => [
-        D(c(Xa), {
-          src: e.imageSrc,
-          size: e.imageSize,
-          initials: e.initials,
-          "profile-name": e.profileName
-        }, null, 8, ["src", "size", "initials", "profile-name"]),
-        D(c(Ha), {
-          "profile-name": e.profileName,
-          company: e.company,
-          "job-title": e.jobTitle,
-          email: e.email,
-          action: e.action,
-          "action-icon": e.actionIcon,
-          "misc-meta": e.miscMeta,
-          "misc-meta-icon": e.miscMetaIcon,
-          onActionToggled: i[0] || (i[0] = (d) => l("action-toggled"))
-        }, {
-          action: C(() => [
-            I(s.$slots, "action")
-          ]),
-          misc: C(() => [
-            I(s.$slots, "misc")
-          ]),
-          _: 3
-        }, 8, ["profile-name", "company", "job-title", "email", "action", "action-icon", "misc-meta", "misc-meta-icon"])
-      ]),
-      _: 3
-    }, 8, ["href", "data-layout", "onClick"]));
-  }
 }, Oa = { class: "bs-profile-details" }, Wa = {
   class: "bs-profile-name",
   "data-size": "sm",
@@ -2205,14 +2141,14 @@ const Et = {
     function s(i) {
       i.target.tagName === "BUTTON" && (i.preventDefault(), i.stopImmediatePropagation(), l("action-toggled"));
     }
-    return (i, d) => (u(), v("div", Oa, [
-      e.action || i.$slots.action ? (u(), v("button", {
+    return (i, d) => (u(), f("div", Oa, [
+      e.action || i.$slots.action ? (u(), f("button", {
         key: 0,
         "data-icon": "true",
         onClick: s
       }, [
         I(i.$slots, "action", {}, () => [
-          e.actionIcon ? (u(), A(U(c(n) ? c(n) : "span"), {
+          e.actionIcon ? (u(), A(U(v(n) ? v(n) : "span"), {
             key: 0,
             class: "bs-icon"
           })) : $("", !0),
@@ -2220,12 +2156,12 @@ const Et = {
         ])
       ])) : $("", !0),
       m("span", Wa, T(e.profileName), 1),
-      e.company ? (u(), v("span", ja, T(e.company), 1)) : $("", !0),
-      e.jobTitle ? (u(), v("span", Ga, T(e.jobTitle), 1)) : $("", !0),
-      e.email ? (u(), v("span", Fa, T(e.email), 1)) : $("", !0),
-      e.miscMeta || i.$slots.misc ? (u(), v("span", Ua, [
+      e.company ? (u(), f("span", ja, T(e.company), 1)) : $("", !0),
+      e.jobTitle ? (u(), f("span", Ga, T(e.jobTitle), 1)) : $("", !0),
+      e.email ? (u(), f("span", Fa, T(e.email), 1)) : $("", !0),
+      e.miscMeta || i.$slots.misc ? (u(), f("span", Ua, [
         I(i.$slots, "misc", {}, () => [
-          e.miscMetaIcon ? (u(), A(U(c(o) ? c(o) : "span"), {
+          e.miscMetaIcon ? (u(), A(U(v(o) ? v(o) : "span"), {
             key: 0,
             class: "bs-icon"
           })) : $("", !0),
@@ -2250,13 +2186,13 @@ const Et = {
   },
   setup(e) {
     const a = e, t = k(!1), l = k(!!a.src);
-    return O(() => t.value = !0), (n, o) => (u(), v("div", {
+    return O(() => t.value = !0), (n, o) => (u(), f("div", {
       class: "bs-profile-img",
       "data-img-size": e.size,
       "data-initials": e.initials,
       "data-no-img": !l.value
     }, [
-      l.value && t.value ? (u(), v("img", {
+      l.value && t.value ? (u(), f("img", {
         key: 0,
         src: e.src,
         alt: e.profileName,
@@ -2264,6 +2200,71 @@ const Et = {
       }, null, 40, Ya)) : $("", !0)
     ], 8, Ka));
   }
+}, Gn = {
+  __name: "BsProfile",
+  props: {
+    layout: {
+      type: String,
+      default: "vertical",
+      validator: (e) => ["horizontal", "vertical"].includes(e)
+    },
+    href: String,
+    imageSrc: String,
+    imageSize: {
+      type: String,
+      default: "lg",
+      validator: (e) => ["sm", "md", "lg"].includes(e)
+    },
+    initials: String,
+    profileName: String,
+    company: String,
+    jobTitle: String,
+    email: String,
+    action: String,
+    actionIcon: String,
+    miscMeta: String,
+    miscMetaIcon: String,
+    router: Object
+  },
+  emits: ["action-toggled"],
+  setup(e, { emit: a }) {
+    const t = e, l = a, { onLinkClick: n } = ie(t), o = p(() => t.href ? "a" : "div");
+    return (s, i) => (u(), A(U(o.value), {
+      class: "bs-profile",
+      href: e.href,
+      "data-layout": e.layout,
+      onClick: v(n)
+    }, {
+      default: C(() => [
+        D(Xa, {
+          src: e.imageSrc,
+          size: e.imageSize,
+          initials: e.initials,
+          "profile-name": e.profileName
+        }, null, 8, ["src", "size", "initials", "profile-name"]),
+        D(Ha, {
+          "profile-name": e.profileName,
+          company: e.company,
+          "job-title": e.jobTitle,
+          email: e.email,
+          action: e.action,
+          "action-icon": e.actionIcon,
+          "misc-meta": e.miscMeta,
+          "misc-meta-icon": e.miscMetaIcon,
+          onActionToggled: i[0] || (i[0] = (d) => l("action-toggled"))
+        }, {
+          action: C(() => [
+            I(s.$slots, "action")
+          ]),
+          misc: C(() => [
+            I(s.$slots, "misc")
+          ]),
+          _: 3
+        }, 8, ["profile-name", "company", "job-title", "email", "action", "action-icon", "misc-meta", "misc-meta-icon"])
+      ]),
+      _: 3
+    }, 8, ["href", "data-layout", "onClick"]));
+  }
 }, Za = ["data-size"], Ja = ["checked", "disabled", "id", "required", "value", "data-error"], Fn = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
   __name: "BsRadio",
   props: {
@@ -2309,11 +2310,11 @@ const Et = {
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
     const t = e, l = N(), [n] = H(), { toChild: o, toRoot: s } = Z(t, l), i = p(() => t.inputId || n.value), d = p(() => t.checked || t.modelValue && t.modelValue === t.value);
-    return (r, f) => (u(), v("div", V({
+    return (r, c) => (u(), f("div", V({
       class: "bs-boolean",
       "data-component": "bs-radio",
       "data-size": e.size
-    }, c(s)), [
+    }, v(s)), [
       m("input", V({
         checked: d.value,
         disabled: e.disabled,
@@ -2322,10 +2323,10 @@ const Et = {
         type: "radio",
         value: e.value,
         "data-error": e.error
-      }, c(o), {
-        onChange: f[0] || (f[0] = (b) => r.$emit("update:modelValue", b.target.value))
+      }, v(o), {
+        onChange: c[0] || (c[0] = (b) => r.$emit("update:modelValue", b.target.value))
       }), null, 16, Ja),
-      e.label || r.$slots.label ? (u(), A(c(_), {
+      e.label || r.$slots.label ? (u(), A(_, {
         key: 0,
         for: i.value,
         disabled: e.disabled,
@@ -2354,7 +2355,7 @@ const Et = {
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
     const t = e, l = p(() => ({ [t.error ? "aria-errormessage" : "aria-describedby"]: t.hintId }));
-    return (n, o) => (u(), v("select", V({
+    return (n, o) => (u(), f("select", V({
       id: n.$attrs.id || e.inputId,
       class: "bs-select",
       "data-component": "bs-select",
@@ -2412,9 +2413,9 @@ const Et = {
       var b, g;
       return ((g = (b = a.hints) == null ? void 0 : b.join) == null ? void 0 : g.call(b, `
 `)) || a.hints;
-    }), d = p(() => a.error && a.errorMsg || a.hint || i.value || void 0), r = p(() => a.inputId || l.value), f = p(() => a.value || a.modelValue);
-    return (b, g) => (u(), v("div", V({ "data-component": "bs-select-field" }, c(s)), [
-      e.label || b.$slots.label ? (u(), A(c(_), {
+    }), d = p(() => a.error && a.errorMsg || a.hint || i.value || void 0), r = p(() => a.inputId || l.value), c = p(() => a.value || a.modelValue);
+    return (b, g) => (u(), f("div", V({ "data-component": "bs-select-field" }, v(s)), [
+      e.label || b.$slots.label ? (u(), A(_, {
         key: 0,
         for: r.value,
         disabled: e.disabled,
@@ -2427,25 +2428,25 @@ const Et = {
         ]),
         _: 3
       }, 8, ["for", "disabled", "required"])) : $("", !0),
-      D(c(_a), V({
+      D(_a, V({
         disabled: e.disabled,
         error: e.error,
-        "hint-id": c(n),
+        "hint-id": v(n),
         "input-id": r.value,
         required: e.required,
-        value: f.value,
+        value: c.value,
         "onUpdate:modelValue": g[0] || (g[0] = (y) => b.$emit("update:modelValue", y))
-      }, c(o)), {
+      }, v(o)), {
         default: C(() => [
           m("option", {
-            selected: !f.value,
+            selected: !c.value,
             value: "",
-            disabled: !!f.value
+            disabled: !!c.value
           }, T(e.placeholder), 9, en),
-          (u(!0), v(R, null, Y(e.data, (y) => (u(), v("option", {
+          (u(!0), f(R, null, Y(e.data, (y) => (u(), f("option", {
             key: y.value,
             disabled: y.disabled,
-            selected: f.value === y.value,
+            selected: c.value === y.value,
             value: y.value
           }, T(y.label), 9, tn))), 128))
         ]),
@@ -2457,7 +2458,7 @@ const Et = {
         error: e.error,
         "error-msg": e.errorMsg,
         hint: e.hint || i.value,
-        "hint-id": c(n)
+        "hint-id": v(n)
       }, null, 8, ["data-disabled", "error", "error-msg", "hint", "hint-id"])) : $("", !0)
     ], 16));
   }
@@ -2508,19 +2509,19 @@ const Et = {
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
     const t = e, l = a, n = N(), [o] = H(), { toChild: s, toRoot: i } = Z(t, n), d = p(() => t.inputId || o.value), r = p(() => t.checked || t.modelValue);
-    return (f, b) => (u(), v("div", V({
+    return (c, b) => (u(), f("div", V({
       class: "bs-boolean",
       "data-component": "bs-switch",
       "data-size": e.size
-    }, c(i)), [
-      e.label || f.$slots.label ? (u(), A(c(_), {
+    }, v(i)), [
+      e.label || c.$slots.label ? (u(), A(_, {
         key: 0,
         for: d.value,
         disabled: e.disabled,
         hide: e.hideLabel
       }, {
         default: C(() => [
-          I(f.$slots, "label", {}, () => [
+          I(c.$slots, "label", {}, () => [
             W(T(e.label), 1)
           ])
         ]),
@@ -2537,7 +2538,7 @@ const Et = {
           disabled: e.disabled,
           id: d.value,
           type: "checkbox"
-        }, c(s), {
+        }, v(s), {
           onChange: b[0] || (b[0] = (g) => l("update:modelValue", g.target.checked))
         }), null, 16, ln),
         m("span", {
@@ -2575,7 +2576,7 @@ const Et = {
         n.value.dispatchEvent(r);
       }
     }
-    return (r, f) => (u(), v("div", {
+    return (r, c) => (u(), f("div", {
       "aria-controls": s.value,
       "aria-selected": o.value ? "true" : "false",
       "data-hidden": e.hidden || void 0,
@@ -2601,10 +2602,10 @@ const Et = {
   },
   emits: ["tabChange", "update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, l = a, n = k(!1), o = k(!1), s = k([]), i = k(!1), d = k(!1), r = k(), f = k([]), b = k(!1), g = k([]), y = k(), L = k(), M = k(), [P, w] = H(2), S = p(() => t.activeTabId ? g.value.findIndex((h) => h.id === t.activeTabId) : 0), q = p(() => s.value.some((h) => h.id === t.activeTabId)), j = p(() => `${w.value}-options`), ee = p(() => `${w.value}-toggle`), J = p(() => {
+    const t = e, l = a, n = k(!1), o = k(!1), s = k([]), i = k(!1), d = k(!1), r = k(), c = k([]), b = k(!1), g = k([]), y = k(), L = k(), M = k(), [P, w] = H(2), S = p(() => t.activeTabId ? g.value.findIndex((h) => h.id === t.activeTabId) : 0), q = p(() => s.value.some((h) => h.id === t.activeTabId)), j = p(() => `${w.value}-options`), ee = p(() => `${w.value}-toggle`), J = p(() => {
       var h;
       return q.value ? (h = g.value[S.value]) == null ? void 0 : h.textContent : "More";
-    }), ke = p(() => q.value ? f.value[S.value] - f.value[S.value - 1] + cn : un), Q = p(() => {
+    }), ke = p(() => q.value ? c.value[S.value] - c.value[S.value - 1] + cn : un), Q = p(() => {
       var B, x;
       let h = [];
       if (typeof window > "u")
@@ -2625,7 +2626,7 @@ const Et = {
             B.dataset.hidden = "true", G.push(B);
             continue;
           }
-          if (x = F < g.value.length - 1 ? M.value - ke.value : M.value, f.value[F] > x) {
+          if (x = F < g.value.length - 1 ? M.value - ke.value : M.value, c.value[F] > x) {
             B.dataset.hidden = "true", G.push(B), h = !0, z = !0;
             continue;
           }
@@ -2642,7 +2643,7 @@ const Et = {
     function Ie(h) {
       var z, G, K;
       const B = (K = (G = (z = g.value[h]) == null ? void 0 : z.getBoundingClientRect) == null ? void 0 : G.call(z)) == null ? void 0 : K.width;
-      return B || (h === 0 ? f.value[0] : f.value[h] - f.value[h - 1]) || 0;
+      return B || (h === 0 ? c.value[0] : c.value[h] - c.value[h - 1]) || 0;
     }
     function Te() {
       var h;
@@ -2709,7 +2710,7 @@ const Et = {
     function Re() {
       let h;
       g.value.forEach((B, x) => {
-        h = B.getBoundingClientRect().width + fn, f.value.push(x ? h + f.value[x - 1] : h);
+        h = B.getBoundingClientRect().width + fn, c.value.push(x ? h + c.value[x - 1] : h);
       });
     }
     return E(() => t.activeTabId, Te), O(() => {
@@ -2719,10 +2720,10 @@ const Et = {
       } catch (B) {
         console.log("tab error", B);
       }
-    }), ne(qe), (h, B) => (u(), v("div", {
+    }), ne(qe), (h, B) => (u(), f("div", {
       class: "bs-tab-list",
       "data-component": "bs-tab-list",
-      id: h.$attrs.id || c(P),
+      id: h.$attrs.id || v(P),
       ref_key: "hostEl",
       ref: r,
       role: "tablist",
@@ -2733,7 +2734,7 @@ const Et = {
     }, [
       I(h.$slots, "default"),
       m("button", {
-        "aria-controls": c(w),
+        "aria-controls": v(w),
         "aria-expanded": i.value,
         class: "bs-tab-list-toggle",
         "data-active": q.value || void 0,
@@ -2743,15 +2744,15 @@ const Et = {
         ref: y,
         onClick: Ce
       }, [
-        D(c(tt), { size: "sm" }),
+        D(v(tt), { size: "sm" }),
         W(" " + T(J.value), 1)
       ], 8, dn),
-      D(c(Jt), {
+      D(ea, {
         "anchor-id": ee.value,
-        "container-id": h.$attrs.id || c(P),
+        "container-id": h.$attrs.id || v(P),
         "helper-description": e.helperDescription || void 0,
         "helper-text": e.helperText,
-        id: c(w),
+        id: v(w),
         "options-id": j.value,
         position: "right",
         preloaded: "",
@@ -2761,7 +2762,7 @@ const Et = {
         "onUpdate:modelValue": Ae
       }, {
         default: C(() => [
-          (u(!0), v(R, null, Y(s.value, (x) => (u(), A(c(Yt), {
+          (u(!0), f(R, null, Y(s.value, (x) => (u(), A(Jt, {
             key: x.id,
             value: x.id,
             "options-id": j.value
@@ -2790,7 +2791,7 @@ const Et = {
   },
   setup(e) {
     const a = e, t = N(), l = p(() => a.activeTabId && a.activeTabId === a.tabId), n = p(() => t.id || `${a.tabId}-panel`);
-    return (o, s) => (u(), v("section", {
+    return (o, s) => (u(), f("section", {
       "aria-labelledby": e.tabId,
       "data-active": l.value,
       "data-component": "bs-tab-panel",
@@ -2816,7 +2817,8 @@ const Et = {
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
     const t = e, l = p(() => ({ [t.error ? "aria-errormessage" : "aria-describedby"]: t.hintId }));
-    return (n, o) => (u(), v("textarea", V({
+    return (n, o) => (u(), f("textarea", V({
+      class: "bs-textarea",
       "data-component": "bs-textarea",
       "data-error": e.error,
       id: n.$attrs.id || e.inputId,
@@ -2881,9 +2883,9 @@ const Et = {
       var g, y;
       return ((y = (g = t.hints) == null ? void 0 : g.join) == null ? void 0 : y.call(g, `
 `)) || t.hints;
-    }), f = p(() => t.error && t.errorMsg || t.hint || r.value || void 0), b = p(() => t.inputId || n.value);
-    return (g, y) => (u(), v("div", V({ "data-component": "bs-textarea-field" }, c(i)), [
-      e.label || g.$slots.label ? (u(), A(c(_), {
+    }), c = p(() => t.error && t.errorMsg || t.hint || r.value || void 0), b = p(() => t.inputId || n.value);
+    return (g, y) => (u(), f("div", V({ "data-component": "bs-textarea-field" }, v(i)), [
+      e.label || g.$slots.label ? (u(), A(_, {
         key: 0,
         for: b.value,
         disabled: e.disabled,
@@ -2896,18 +2898,18 @@ const Et = {
         ]),
         _: 3
       }, 8, ["for", "disabled", "required"])) : $("", !0),
-      D(c(pn), V({
+      D(pn, V({
         disabled: e.disabled,
         error: e.error,
-        "hint-id": c(o),
+        "hint-id": v(o),
         id: b.value,
         placeholder: e.placeholder,
         required: e.required,
         rows: e.rows,
         value: e.value || e.modelValue,
         "onUpdate:modelValue": y[0] || (y[0] = (L) => g.$emit("update:modelValue", L))
-      }, c(s)), null, 16, ["disabled", "error", "hint-id", "id", "placeholder", "required", "rows", "value"]),
-      f.value || e.charMax ? (u(), A(pe, {
+      }, v(s)), null, 16, ["disabled", "error", "hint-id", "id", "placeholder", "required", "rows", "value"]),
+      c.value || e.charMax ? (u(), A(pe, {
         key: 1,
         "char-count": d.value,
         "char-max": e.charMax,
@@ -2915,7 +2917,7 @@ const Et = {
         error: e.error,
         "error-msg": e.errorMsg,
         hint: e.hint || r.value,
-        "hint-id": c(o)
+        "hint-id": v(o)
       }, null, 8, ["char-count", "char-max", "data-disabled", "error", "error-msg", "hint", "hint-id"])) : $("", !0)
     ], 16));
   }
@@ -2977,19 +2979,19 @@ const Et = {
         i();
       }, t.duration)), l("after-enter");
     }
-    return (r, f) => (u(), A(c(de), {
-      shown: c(n),
+    return (r, c) => (u(), A(v(de), {
+      shown: v(n),
       preloaded: e.preloaded,
       duration: 200,
       "enter-attribute": "data-shown",
       onAfterEnter: d,
-      onAfterLeave: f[0] || (f[0] = (b) => l("after-leave"))
+      onAfterLeave: c[0] || (c[0] = (b) => l("after-leave"))
     }, {
       default: C(() => [
         m("div", {
           class: "bs-toast",
           "data-variant": e.variant,
-          "data-stacked": c(s) || void 0,
+          "data-stacked": v(s) || void 0,
           "aria-role": "alert"
         }, [
           I(r.$slots, "default")
@@ -3008,7 +3010,7 @@ const Et = {
       ((n = l.default) == null ? void 0 : n.call(l).length) > 2 && (a.value = !0);
     });
     const t = te("handleDismiss");
-    return (l, n) => (u(), v("div", {
+    return (l, n) => (u(), f("div", {
       class: "bs-toast-actions",
       "data-stacked": a.value || void 0
     }, [
@@ -3016,7 +3018,7 @@ const Et = {
         D(kt, {
           size: "sm",
           "text-btn": "",
-          onClick: c(t)
+          onClick: v(t)
         }, {
           default: C(() => [
             W(" Dismiss ")
@@ -3033,7 +3035,7 @@ const Et = {
   return t;
 }, yn = {}, Bn = { class: "bs-toast-body" };
 function $n(e, a) {
-  return u(), v("div", Bn, [
+  return u(), f("div", Bn, [
     I(e.$slots, "default")
   ]);
 }
@@ -3052,9 +3054,9 @@ const _n = /* @__PURE__ */ mn(yn, [["render", $n]]), Sn = ["data-variant"], el =
           return at;
       }
     });
-    return (l, n) => (u(), v("div", {
+    return (l, n) => (u(), f("div", {
       class: "bs-toast-header",
-      "data-variant": c(a)
+      "data-variant": v(a)
     }, [
       (u(), A(U(t.value), { class: "bs-toast-header-icon" })),
       m("h5", null, [
@@ -3065,7 +3067,7 @@ const _n = /* @__PURE__ */ mn(yn, [["render", $n]]), Sn = ["data-variant"], el =
 }, wn = { class: "bs-toaster" }, tl = {
   __name: "BsToaster",
   setup(e) {
-    return ae("stacked", !0), (a, t) => (u(), v("div", wn, [
+    return ae("stacked", !0), (a, t) => (u(), f("div", wn, [
       I(a.$slots, "default")
     ]));
   }
@@ -3109,7 +3111,7 @@ const _n = /* @__PURE__ */ mn(yn, [["render", $n]]), Sn = ["data-variant"], el =
     function s() {
       t.value = !1, l.value = !1;
     }
-    return (i, d) => (u(), v("div", {
+    return (i, d) => (u(), f("div", {
       class: "bs-tooltip",
       "data-position": e.position || void 0,
       "data-component": "bs-tooltip",
@@ -3119,7 +3121,7 @@ const _n = /* @__PURE__ */ mn(yn, [["render", $n]]), Sn = ["data-variant"], el =
       onFocusout: s
     }, [
       I(i.$slots, "default"),
-      e.content ? (u(), v("div", {
+      e.content ? (u(), f("div", {
         key: 0,
         class: X(n.value),
         id: e.tooltipId,
@@ -3136,14 +3138,14 @@ export {
   Vn as BsChartBar,
   En as BsCheckbox,
   qn as BsCircleButton,
-  Ht as BsDropdown,
-  Yt as BsDropdownOption,
-  Zt as BsDropdownOptionList,
-  Jt as BsDropdownWithOptions,
+  Xt as BsDropdown,
+  Jt as BsDropdownOption,
+  _t as BsDropdownOptionList,
+  ea as BsDropdownWithOptions,
   pe as BsFieldDetails,
   zn as BsIconGradientWrapper,
   we as BsInput,
-  ia as BsInputAddon,
+  da as BsInputAddon,
   Mn as BsInputField,
   Rn as BsInputSearch,
   _ as BsLabel,