@kiva/kv-components 8.29.1 → 9.0.0

package/dist/vue/KvCardFrame2.js

@@ -1,9 +1,9 @@
 import { computed as r } from "vue";
-import { defaultTheme as t, stoneDarkTheme as a, stoneLightTheme as n, marigoldLightTheme as o, greenLightTheme as s, greenDarkTheme as l } from "@kiva/kv-tokens";
-import i from "./KvThemeProvider.js";
-const h = {
+import { defaultTheme as t, stoneLightTheme as a, marigoldLightTheme as o, greenLightTheme as n, greenDarkTheme as l } from "@kiva/kv-tokens";
+import s from "./KvThemeProvider.js";
+const m = {
   components: {
-    KvThemeProvider: i
+    KvThemeProvider: s
   },
   props: {
     allowOverflow: {
@@ -35,8 +35,7 @@ const h = {
           "greenLight",
           "greenDark",
           "marigoldLight",
-          "stoneLight",
-          "stoneDark"
+          "stoneLight"
         ].includes(e);
       }
     }
@@ -49,12 +48,10 @@ const h = {
         case "greenDark":
           return l;
         case "greenLight":
-          return s;
+          return n;
         case "marigoldLight":
           return o;
         case "stoneLight":
-          return n;
-        case "stoneDark":
           return a;
         default:
           return t;
@@ -63,5 +60,5 @@ const h = {
   }
 };
 export {
-  h as default
+  m as default
 };

package/dist/vue/KvCheckoutReceipt.css

@@ -1 +1 @@
-.section[data-v-63dc5a55]{border-bottom-width:.0625rem;border-top-width:0px;--tw-border-opacity: 1;border-color:rgba(var(--border-tertiary),var(--tw-border-opacity, 1));padding:.5rem;display:block;overflow:hidden}@media print{.section[data-v-63dc5a55]{page-break-inside:avoid}}.section--lender-info[data-v-63dc5a55]{padding-top:0}.section--print[data-v-63dc5a55]{border-bottom:0}.checkout-receipt__headline[data-v-63dc5a55]{text-align:center;margin-bottom:1.5rem}.checkout-receipt__item-list[data-v-63dc5a55]{list-style:none;margin:0;width:100%}.loan__name[data-v-63dc5a55]{margin-bottom:.5rem}.loan__name--inline[data-v-63dc5a55]{display:inline-block}.loan__amount[data-v-63dc5a55]{text-align:right}.total[data-v-63dc5a55]{display:flex;align-items:baseline}.total__header[data-v-63dc5a55],.total__amount[data-v-63dc5a55]{text-align:right;flex:1}.total__amount[data-v-63dc5a55]{flex-grow:.33}.payments[data-v-63dc5a55]{border-bottom:none}.payments__type[data-v-63dc5a55]{display:flex;text-align:right}.payments__type-title[data-v-63dc5a55],.payments__type-amount[data-v-63dc5a55]{flex:1}.print[data-v-63dc5a55]{margin:0 auto}
+.section[data-v-1d721061]{border-bottom-width:.0625rem;border-top-width:0px;--tw-border-opacity: 1;border-color:rgba(var(--border-tertiary),var(--tw-border-opacity, 1));padding:.5rem;display:block;overflow:hidden}@media print{.section[data-v-1d721061]{page-break-inside:avoid}}.section--lender-info[data-v-1d721061]{padding-top:0}.section--print[data-v-1d721061]{border-bottom:0}.checkout-receipt__headline[data-v-1d721061]{text-align:center;margin-bottom:1.5rem}.checkout-receipt__item-list[data-v-1d721061]{list-style:none;margin:0;width:100%}.loan__name[data-v-1d721061]{margin-bottom:.5rem}.loan__name--inline[data-v-1d721061]{display:inline-block}.loan__amount[data-v-1d721061]{text-align:right}.total[data-v-1d721061]{display:flex;align-items:baseline}.total__header[data-v-1d721061],.total__amount[data-v-1d721061]{text-align:right;flex:1}.total__amount[data-v-1d721061]{flex-grow:.33}.payments[data-v-1d721061]{border-bottom:none}.payments__type[data-v-1d721061]{display:flex;text-align:right}.payments__type-title[data-v-1d721061],.payments__type-amount[data-v-1d721061]{flex:1}.print[data-v-1d721061]{margin:0 auto}

package/dist/vue/KvCheckoutReceipt.js

@@ -1,5 +1,5 @@
 import C from "./KvCheckoutReceipt2.js";
-import { resolveComponent as m, resolveDirective as f, openBlock as s, createElementBlock as o, createElementVNode as e, toDisplayString as i, createCommentVNode as d, Fragment as c, renderList as k, createTextVNode as l, createVNode as p, withCtx as v, withDirectives as b } from "vue";
+import { resolveComponent as _, resolveDirective as f, openBlock as s, createElementBlock as o, createElementVNode as e, toDisplayString as i, createCommentVNode as d, Fragment as c, renderList as k, createTextVNode as l, createVNode as p, withCtx as v, withDirectives as b } from "vue";
 import "./KvCheckoutReceipt.css";
 import x from "../_virtual/_plugin-vue_export-helper.js";
 const g = { class: "checkout-receipt" }, T = { class: "checkout-receipt__wrapper tw-bg-primary tw-p-4 tw-rounded-xs tw-border tw-border-tertiary" }, j = {
@@ -33,24 +33,24 @@ const g = { class: "checkout-receipt" }, T = { class: "checkout-receipt__wrapper
 }, B = {
   "data-testid": "kcard",
   class: "loan kcard"
-}, U = {
+}, L = {
   class: "loan__details data-hj-suppress",
   "data-testid": "kcard-details"
-}, q = {
+}, U = {
   key: 0,
   "data-testid": "kcard-details",
   class: "loan__details data-hj-suppress"
-}, z = {
+}, q = {
   class: "loan__details data-hj-suppress",
   "data-testid": "kcard-details"
-}, L = {
+}, z = {
   class: "loan__amount tw-text-title",
   "data-testid": "kcard-amount"
-}, S = {
+}, G = {
   key: 0,
   "data-testid": "kcard-portfolio",
   class: "section tw-text-center print:!tw-hidden"
-}, W = { href: "/portfolio/kiva-cards" }, Y = { class: "checkout-receipt__item-list" }, G = { class: "section" }, H = {
+}, S = { href: "/portfolio/kiva-cards" }, W = { class: "checkout-receipt__item-list" }, Y = { class: "section" }, H = {
   class: "loan",
   "data-testid": "donation"
 }, J = {
@@ -102,8 +102,8 @@ const g = { class: "checkout-receipt" }, T = { class: "checkout-receipt__wrapper
   class: "total__amount tw-text-title",
   "data-testid": "amount-charged-payment-amount"
 }, ct = { class: "section section--print print:!tw-hidden" };
-function pt(mt, t, n, _, _t, r) {
-  const u = m("kv-material-icon"), y = m("kv-tooltip"), w = m("kv-button"), h = f("kv-track-event");
+function pt(_t, t, n, m, mt, r) {
+  const u = _("kv-material-icon"), y = _("kv-tooltip"), w = _("kv-button"), h = f("kv-track-event");
   return s(), o("div", g, [
     t[25] || (t[25] = e("h2", { class: "checkout-receipt__headline" }, " Order Confirmation ", -1)),
     e("div", T, [
@@ -160,7 +160,7 @@ function pt(mt, t, n, _, _t, r) {
                   }, " Print-it-yourself Kiva Card ", -1)),
                   p(u, {
                     id: `print-card-${a.id}`,
-                    icon: _.infoIcon,
+                    icon: m.infoIcon,
                     "data-testid": "kcard-tool-tip-control",
                     name: "question",
                     class: "tw-fill-current tw-text-tertiary tw-h-2.5 tw-w-2.5 tw-ml-0.5"
@@ -168,7 +168,7 @@ function pt(mt, t, n, _, _t, r) {
                   p(y, {
                     "data-testid": "kcard-tool-tip-text",
                     controller: `print-card-${a.id}`,
-                    theme: "mint"
+                    theme: "ecoGreenLight"
                   }, {
                     default: v(() => t[2] || (t[2] = [
                       l(" You can print this card now. We'll also send it to you in an email so you can print it later. ")
@@ -193,7 +193,7 @@ function pt(mt, t, n, _, _t, r) {
                   class: "loan__name tw-text-title",
                   "data-testid": "kcard-type-postal"
                 }, " Postal delivery Kiva Card ", -1)),
-                e("div", U, [
+                e("div", L, [
                   l(" For: " + i(a.kivaCardObject.mailingInfo.firstName) + " " + i(a.kivaCardObject.mailingInfo.lastName), 1),
                   t[6] || (t[6] = e("br", null, null, -1)),
                   l(" " + i(a.kivaCardObject.mailingInfo.address), 1),
@@ -209,13 +209,13 @@ function pt(mt, t, n, _, _t, r) {
                   class: "loan__name tw-text-title",
                   "data-testid": "kcard-type-lender"
                 }, " Kiva Card ", -1)),
-                a.kivaCardObject.recipient.name ? (s(), o("div", q, " For: " + i(a.kivaCardObject.recipient.name), 1)) : d("", !0)
+                a.kivaCardObject.recipient.name ? (s(), o("div", U, " For: " + i(a.kivaCardObject.recipient.name), 1)) : d("", !0)
               ], 64)) : a.kivaCardObject.deliveryType === "email" ? (s(), o(c, { key: 3 }, [
                 t[11] || (t[11] = e("h3", {
                   class: "loan__name tw-text-title",
                   "data-testid": "kcard-type-email"
                 }, " Email delivery Kiva Card ", -1)),
-                e("div", z, [
+                e("div", q, [
                   t[10] || (t[10] = l(" For: ")),
                   a.kivaCardObject.recipient.name ? (s(), o(c, { key: 0 }, [
                     l(i(a.kivaCardObject.recipient.name) + " – ", 1)
@@ -223,12 +223,12 @@ function pt(mt, t, n, _, _t, r) {
                   l(" " + i(a.kivaCardObject.recipient.email), 1)
                 ])
               ], 64)) : d("", !0),
-              e("div", L, " $" + i(a.price), 1)
+              e("div", z, " $" + i(a.price), 1)
             ])
           ]))), 128)),
-          r.kivaCards.length > 0 ? (s(), o("li", S, [
+          r.kivaCards.length > 0 ? (s(), o("li", G, [
             t[13] || (t[13] = l(" For more details about all your Kiva Card purchases, please visit your ")),
-            b((s(), o("a", W, t[12] || (t[12] = [
+            b((s(), o("a", S, t[12] || (t[12] = [
               l(" Kiva portfolio ")
             ]))), [
               [h, ["Thanks", "click", "kiva-card-portfolio"]]
@@ -238,8 +238,8 @@ function pt(mt, t, n, _, _t, r) {
         ])
       ]),
       e("section", null, [
-        e("ul", Y, [
-          e("li", G, [
+        e("ul", W, [
+          e("li", Y, [
             e("div", H, [
               t[15] || (t[15] = e("h3", { class: "loan__name tw-text-title" }, " Donation to Kiva ", -1)),
               n.receipt.totals.donationTotal > 0 ? (s(), o("a", {
@@ -297,7 +297,7 @@ function pt(mt, t, n, _, _t, r) {
           onClick: t[1] || (t[1] = (...a) => r.printReceipt && r.printReceipt(...a))
         }, [
           p(u, {
-            icon: _.printIcon,
+            icon: m.printIcon,
             name: "print",
             class: "tw-h-2.5 tw-w-2.5 tw-ml-0.5"
           }, null, 8, ["icon"]),
@@ -307,7 +307,7 @@ function pt(mt, t, n, _, _t, r) {
     ])
   ]);
 }
-const wt = /* @__PURE__ */ x(C, [["render", pt], ["__scopeId", "data-v-63dc5a55"]]);
+const wt = /* @__PURE__ */ x(C, [["render", pt], ["__scopeId", "data-v-1d721061"]]);
 export {
   wt as default
 };

package/dist/vue/KvDatePicker2.js

@@ -1,12 +1,12 @@
 import { computed as r } from "vue";
 import a from "@vuepic/vue-datepicker";
 import "@vuepic/vue-datepicker/dist/main.css";
-import { defaultTheme as t, stoneDarkTheme as n, stoneLightTheme as m, marigoldLightTheme as i, greenLightTheme as h, greenDarkTheme as o } from "@kiva/kv-tokens";
-import s from "./KvThemeProvider.js";
-const f = {
+import { defaultTheme as t, stoneLightTheme as i, marigoldLightTheme as m, greenLightTheme as n, greenDarkTheme as h } from "@kiva/kv-tokens";
+import l from "./KvThemeProvider.js";
+const p = {
   name: "KvDatePicker",
   components: {
-    KvThemeProvider: s,
+    KvThemeProvider: l,
     VueDatePicker: a
   },
   inheritAttrs: !1,
@@ -24,8 +24,7 @@ const f = {
           "greenLight",
           "greenDark",
           "marigoldLight",
-          "stoneLight",
-          "stoneDark"
+          "stoneLight"
         ].includes(e);
       }
     }
@@ -40,15 +39,13 @@ const f = {
         case "default":
           return t;
         case "greenDark":
-          return o;
-        case "greenLight":
           return h;
+        case "greenLight":
+          return n;
         case "marigoldLight":
-          return i;
-        case "stoneLight":
           return m;
-        case "stoneDark":
-          return n;
+        case "stoneLight":
+          return i;
         default:
           return t;
       }
@@ -74,5 +71,5 @@ const f = {
   }
 };
 export {
-  f as default
+  p as default
 };

package/dist/vue/KvSecondaryNav.css

@@ -1 +1 @@
-.kv-secondary-nav-holder[data-v-4543890b]{height:62px}.kv-secondary-nav[data-v-4543890b]{min-height:62px}
+.kv-secondary-nav-holder[data-v-dcf22089]{height:62px}.kv-secondary-nav[data-v-dcf22089]{min-height:62px}

package/dist/vue/KvSecondaryNav.js

@@ -83,7 +83,7 @@ function N(p, w, t, e, E, A) {
     _: 1
   }, 8, ["theme"]);
 }
-const z = /* @__PURE__ */ C(x, [["render", N], ["__scopeId", "data-v-4543890b"]]);
+const z = /* @__PURE__ */ C(x, [["render", N], ["__scopeId", "data-v-dcf22089"]]);
 export {
   z as default
 };

package/dist/vue/KvSecondaryNav2.js

@@ -1,13 +1,13 @@
 import { toRefs as c, ref as g, computed as n } from "vue";
-import { stoneLightTheme as p, marigoldLightTheme as b, greenDarkTheme as u, greenLightTheme as v, defaultTheme as w } from "@kiva/kv-tokens";
-import { mdiChevronDown as k, mdiChevronUp as C } from "@mdi/js";
-import L from "./KvThemeProvider.js";
+import { stoneLightTheme as y, marigoldLightTheme as p, greenDarkTheme as b, greenLightTheme as v, defaultTheme as w } from "@kiva/kv-tokens";
+import { mdiChevronDown as k, mdiChevronUp as L } from "@mdi/js";
+import C from "./KvThemeProvider.js";
 import j from "./KvMaterialIcon.js";
 import O from "./KvPageContainer.js";
 const _ = {
   name: "KvSecondaryNav",
   components: {
-    KvThemeProvider: L,
+    KvThemeProvider: C,
     KvMaterialIcon: j,
     KvPageContainer: O
   },
@@ -46,7 +46,6 @@ const _ = {
       validator(e) {
         return [
           "default",
-          "dark",
           "greenLight",
           "greenDark",
           "marigoldLight",
@@ -63,14 +62,13 @@ const _ = {
       heading: l,
       linkAlignment: a,
       theme: s
-    } = c(e), d = g(null), i = g(!1), m = n(() => e.headingLink && e.headingLink.href), h = n(() => a.value === "right" ? l.value && l.value.length > 0 ? "tw-justify-between" : "tw-justify-between md:tw-justify-end" : a.value === "left" ? "tw-justify-between md:tw-justify-start" : a.value === "center" ? "tw-justify-between md:tw-justify-center" : ""), o = {
+    } = c(e), u = g(null), i = g(!1), m = n(() => e.headingLink && e.headingLink.href), d = n(() => a.value === "right" ? l.value && l.value.length > 0 ? "tw-justify-between" : "tw-justify-between md:tw-justify-end" : a.value === "left" ? "tw-justify-between md:tw-justify-start" : a.value === "center" ? "tw-justify-between md:tw-justify-center" : ""), o = {
       default: { style: w, bgClass: "tw-bg-secondary" },
-      dark: { style: u, bgClass: "tw-bg-primary" },
       greenLight: { style: v, bgClass: "tw-bg-secondary" },
-      greenDark: { style: u, bgClass: "tw-bg-primary" },
-      marigoldLight: { style: b, bgClass: "tw-bg-primary" },
-      stoneLight: { style: p, bgClass: "tw-bg-primary" }
-    }, y = n(() => {
+      greenDark: { style: b, bgClass: "tw-bg-primary" },
+      marigoldLight: { style: p, bgClass: "tw-bg-primary" },
+      stoneLight: { style: y, bgClass: "tw-bg-primary" }
+    }, h = n(() => {
       var t;
       return (t = o[s.value]) == null ? void 0 : t.style;
     }), f = n(() => {
@@ -79,15 +77,15 @@ const _ = {
     });
     return {
       hasHeadingLink: m,
-      navAlignmentClass: h,
+      navAlignmentClass: d,
       toggleSubNavigation: () => {
         i.value = !i.value;
       },
       subNavigationOpen: i,
-      mdiChevronUp: C,
+      mdiChevronUp: L,
       mdiChevronDown: k,
-      subNavigation: d,
-      themeStyle: y,
+      subNavigation: u,
+      themeStyle: h,
       bgClass: f,
       handleLinkClick: (t) => {
         r("subnavLinkClicked", t);

package/dist/vue/KvTooltip.css

@@ -1 +1 @@
-.tooltip-pane[data-v-5fd76cc8],.tooltip-arrow[data-v-5fd76cc8]{box-shadow:0 4px 12px #00000014}.tooltip-arrow[data-v-5fd76cc8]{margin:.5rem;border-color:rgba(var(--bg-primary),var(--tw-bg-opacity, 1))}.tooltip-pane[x-placement^=top][data-v-5fd76cc8]{margin-bottom:.5rem}.tooltip-pane[x-placement^=top] .tooltip-arrow[data-v-5fd76cc8]{border-width:8px 8px 0 8px;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;left:calc(50% - 8px);bottom:-.5rem;margin-top:0;margin-bottom:0}.tooltip-pane[x-placement^=bottom][data-v-5fd76cc8]{margin-top:.5rem}.tooltip-pane[x-placement^=bottom] .tooltip-arrow[data-v-5fd76cc8]{border-width:0 8px 8px 8px;border-left-color:transparent;border-right-color:transparent;border-top-color:transparent;left:calc(50% - 8px);top:-.5rem;margin-bottom:0;margin-top:0}.tooltip-pane[x-placement^=right][data-v-5fd76cc8]{margin-left:.5rem}.tooltip-pane[x-placement^=right] .tooltip-arrow[data-v-5fd76cc8]{border-width:8px 8px 8px 0;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);left:-.5rem;margin-left:0;margin-right:0}.tooltip-pane[x-placement^=left][data-v-5fd76cc8]{margin-right:.5rem}.tooltip-pane[x-placement^=left] .tooltip-arrow[data-v-5fd76cc8]{border-width:8px 0 8px 8px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);right:-.5rem;margin-left:0;margin-right:0}
+.tooltip-pane[data-v-d5f691f8],.tooltip-arrow[data-v-d5f691f8]{box-shadow:0 4px 12px #00000014}.tooltip-arrow[data-v-d5f691f8]{margin:.5rem;border-color:rgba(var(--bg-primary),var(--tw-bg-opacity, 1))}.tooltip-pane[x-placement^=top][data-v-d5f691f8]{margin-bottom:.5rem}.tooltip-pane[x-placement^=top] .tooltip-arrow[data-v-d5f691f8]{border-width:8px 8px 0 8px;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;left:calc(50% - 8px);bottom:-.5rem;margin-top:0;margin-bottom:0}.tooltip-pane[x-placement^=bottom][data-v-d5f691f8]{margin-top:.5rem}.tooltip-pane[x-placement^=bottom] .tooltip-arrow[data-v-d5f691f8]{border-width:0 8px 8px 8px;border-left-color:transparent;border-right-color:transparent;border-top-color:transparent;left:calc(50% - 8px);top:-.5rem;margin-bottom:0;margin-top:0}.tooltip-pane[x-placement^=right][data-v-d5f691f8]{margin-left:.5rem}.tooltip-pane[x-placement^=right] .tooltip-arrow[data-v-d5f691f8]{border-width:8px 8px 8px 0;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);left:-.5rem;margin-left:0;margin-right:0}.tooltip-pane[x-placement^=left][data-v-d5f691f8]{margin-right:.5rem}.tooltip-pane[x-placement^=left] .tooltip-arrow[data-v-d5f691f8]{border-width:8px 0 8px 8px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);right:-.5rem;margin-left:0;margin-right:0}

package/dist/vue/KvTooltip.js

@@ -1,5 +1,5 @@
-import c from "./KvTooltip2.js";
-import { resolveComponent as l, openBlock as p, createBlock as v, withCtx as n, createVNode as f, createElementVNode as i, normalizeStyle as w, createElementBlock as _, renderSlot as d, createCommentVNode as u } from "vue";
+import f from "./KvTooltip2.js";
+import { resolveComponent as l, openBlock as p, createBlock as v, withCtx as n, createVNode as c, createElementVNode as i, normalizeStyle as w, createElementBlock as _, renderSlot as d, createCommentVNode as u } from "vue";
 import "./KvTooltip.css";
 import k from "../_virtual/_plugin-vue_export-helper.js";
 const y = {
@@ -13,7 +13,7 @@ function b(o, e, r, t, x, V) {
     class: "kv-tailwind"
   }, {
     default: n(() => [
-      f(s, {
+      c(s, {
         ref: "popperRef",
         controller: r.controller,
         "popper-modifiers": t.popperModifiers,
@@ -46,7 +46,7 @@ function b(o, e, r, t, x, V) {
     _: 3
   }, 8, ["theme"]);
 }
-const N = /* @__PURE__ */ k(c, [["render", b], ["__scopeId", "data-v-5fd76cc8"]]);
+const N = /* @__PURE__ */ k(f, [["render", b], ["__scopeId", "data-v-d5f691f8"]]);
 export {
   N as default
 };

package/dist/vue/KvTooltip2.js

@@ -1,12 +1,12 @@
-import { toRefs as S, computed as i, ref as b, watch as M } from "vue";
-import { darkTheme as l, mintTheme as a, stoneDarkTheme as m, stoneLightTheme as p, marigoldLightTheme as f, greenDarkTheme as s, greenLightTheme as u, defaultTheme as d } from "@kiva/kv-tokens";
-import D from "./KvPopper.js";
-import E from "./KvThemeProvider.js";
-const H = {
+import { toRefs as L, computed as i, ref as w, watch as b } from "vue";
+import { stoneLightTheme as l, marigoldLightTheme as p, greenDarkTheme as a, greenLightTheme as f, defaultTheme as m } from "@kiva/kv-tokens";
+import M from "./KvPopper.js";
+import S from "./KvThemeProvider.js";
+const K = {
   name: "KvTooltip",
   components: {
-    KvPopper: D,
-    KvThemeProvider: E
+    KvPopper: M,
+    KvThemeProvider: S
   },
   props: {
     controller: {
@@ -41,63 +41,54 @@ const H = {
           "ecoGreenLight",
           "ecoGreenDark",
           "ecoLightMarigold",
-          "ecoStoneLight",
-          "ecoStoneDark",
-          "mint",
-          "dark"
+          "ecoStoneLight"
         ].indexOf(e) !== -1;
       }
     }
   },
   emits: ["tool-tip-visible"],
-  setup(e, { emit: c }) {
+  setup(e, { emit: u }) {
     const {
       modifiers: r,
-      showTooltip: h,
-      theme: g
-    } = S(e), v = i(() => ({
+      showTooltip: s,
+      theme: c
+    } = L(e), d = i(() => ({
       ...r.value,
       preventOverflow: {
         ...r.value.preventOverflow,
         padding: 10
       }
-    })), T = b(null), y = () => typeof e.controller == "string" ? document.getElementById(e.controller) : e.controller, L = (t) => {
-      c("tool-tip-visible", t);
+    })), h = w(null), g = () => typeof e.controller == "string" ? document.getElementById(e.controller) : e.controller, v = (t) => {
+      u("tool-tip-visible", t);
     }, o = (t = !0) => {
-      const n = y();
+      const n = g();
       if (n) {
-        const k = t ? "mouseover" : "mouseout";
-        n.dispatchEvent(new MouseEvent(k, { bubbles: !0 }));
+        const T = t ? "mouseover" : "mouseout";
+        n.dispatchEvent(new MouseEvent(T, { bubbles: !0 }));
       }
-    }, w = i(() => ({
-      default: d,
-      ecoGreenLight: u,
-      ecoGreenDark: s,
-      ecoLightMarigold: f,
-      ecoStoneLight: p,
-      ecoStoneDark: m,
-      mint: a,
-      dark: l
-    })[g.value]);
-    return M(h, (t) => {
+    }, y = i(() => ({
+      default: m,
+      ecoGreenLight: f,
+      ecoGreenDark: a,
+      ecoLightMarigold: p,
+      ecoStoneLight: l
+    })[c.value]);
+    return b(s, (t) => {
       o(!!t);
     }), {
-      defaultTheme: d,
-      greenLightTheme: u,
-      greenDarkTheme: s,
-      marigoldLightTheme: f,
-      stoneLightTheme: p,
-      stoneDarkTheme: m,
-      mintTheme: a,
-      darkTheme: l,
-      handleKvPopperVisibility: L,
-      popperModifiers: v,
-      popperRef: T,
-      themeStyle: w,
+      defaultTheme: m,
+      greenLightTheme: f,
+      greenDarkTheme: a,
+      marigoldLightTheme: p,
+      stoneLightTheme: l,
+      handleKvPopperVisibility: v,
+      popperModifiers: d,
+      popperRef: h,
+      themeStyle: y,
       triggerHover: o
     };
   }
 };
 export {
-  H as default
+  K as default
 };

package/dist/vue/KvWwwHeaderBasic/LinkBar.css

@@ -1 +1 @@
-.link-bar[data-v-9ca80a31]{display:flex;align-items:center;gap:.5rem}.link-bar__logo[data-v-9ca80a31]{position:absolute;top:50%;left:50%;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}@media(min-width:45.875rem){.link-bar[data-v-9ca80a31]{display:grid;-moz-column-gap:1rem;column-gap:1rem;grid-template-areas:"logo lend right" "search search search";grid-template-columns:1fr auto auto;grid-template-rows:4rem auto;row-gap:.5rem}.link-bar__logo[data-v-9ca80a31]{position:static;--tw-translate-x: 0;--tw-translate-y: 0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));grid-area:logo;justify-self:start}.link-bar__lend[data-v-9ca80a31]{grid-area:lend}.link-bar__search[data-v-9ca80a31]{grid-area:search;margin-bottom:.5rem}.link-bar__right[data-v-9ca80a31]{grid-area:right}}@media(min-width:64rem){.link-bar[data-v-9ca80a31]{-moz-column-gap:1.25rem;column-gap:1.25rem;grid-template-areas:"logo lend search right";grid-template-columns:auto auto 1fr auto;grid-template-rows:4rem}.link-bar__search[data-v-9ca80a31]{margin-bottom:0}}.header-link[data-v-9ca80a31]{cursor:pointer;padding-top:1rem;padding-bottom:1rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-9ca80a31]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}
+.link-bar[data-v-2e7def04]{display:flex;align-items:center;gap:.5rem}.link-bar__logo[data-v-2e7def04]{position:absolute;top:50%;left:50%;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}@media(min-width:45.875rem){.link-bar[data-v-2e7def04]{display:grid;-moz-column-gap:1rem;column-gap:1rem;grid-template-areas:"logo lend right" "search search search";grid-template-columns:1fr auto auto;grid-template-rows:4rem auto;row-gap:.5rem}.link-bar__logo[data-v-2e7def04]{position:static;--tw-translate-x: 0;--tw-translate-y: 0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));grid-area:logo;justify-self:start}.link-bar__lend[data-v-2e7def04]{grid-area:lend}.link-bar__search[data-v-2e7def04]{grid-area:search;margin-bottom:.5rem}.link-bar__right[data-v-2e7def04]{grid-area:right}}@media(min-width:64rem){.link-bar[data-v-2e7def04]{-moz-column-gap:1.25rem;column-gap:1.25rem;grid-template-areas:"logo lend search right";grid-template-columns:auto auto 1fr auto;grid-template-rows:4rem}.link-bar__search[data-v-2e7def04]{margin-bottom:0}}.header-link[data-v-2e7def04]{cursor:pointer;padding-top:1rem;padding-bottom:1rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-2e7def04]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}.link-bar__basket-count-loader[data-v-2e7def04]{width:1.5ch;height:1.375em;height:1lh}

package/dist/vue/KvWwwHeaderBasic/LinkBar.js

@@ -1,45 +1,49 @@
-import p from "./LinkBar2.js";
-import { resolveComponent as d, openBlock as o, createElementBlock as i, createElementVNode as r, withModifiers as b, createVNode as l, withCtx as c, createTextVNode as w, Fragment as x, renderList as L, toDisplayString as m, createCommentVNode as s, withDirectives as B, normalizeStyle as k, vShow as O, createBlock as f } from "vue";
+import x from "./LinkBar2.js";
+import { resolveComponent as d, openBlock as o, createElementBlock as i, createElementVNode as l, withModifiers as b, createVNode as r, withCtx as k, createTextVNode as w, Fragment as f, renderList as L, toDisplayString as m, createCommentVNode as s, withDirectives as B, normalizeStyle as h, vShow as O, createBlock as y } from "vue";
 import "./LinkBar.css";
 import S from "../../_virtual/_plugin-vue_export-helper.js";
-const T = { class: "link-bar__right tw-flex tw-items-center tw-justify-end tw-ml-auto md:tw-ml-0 tw-gap-1 md:tw-gap-2 lg:tw-gap-2.5" }, D = ["href", "data-testid", "onClick"], U = ["href"], H = { class: "tw-hidden md:tw-flex tw-items-center" }, A = { class: "tw-bg-secondary tw-rounded-xs tw-py-0.5 tw-px-1 tw-mr-1 tw-leading-none" }, I = { class: "tw-relative tw-flex md:tw-hidden tw-items-center tw-text-eco-green-4" }, K = {
+const T = { class: "link-bar__right tw-flex tw-items-center tw-justify-end tw-ml-auto md:tw-ml-0 tw-gap-1 md:tw-gap-2 lg:tw-gap-2.5" }, D = ["href", "data-testid", "onClick"], U = ["href"], H = { class: "tw-hidden md:tw-flex tw-items-center" }, A = { class: "tw-bg-secondary tw-rounded-xs tw-py-0.5 tw-px-1 tw-mr-1 tw-leading-none tw-flex tw-items-center tw-justify-center" }, I = {
+  key: 0,
+  class: "link-bar__basket-count-loader",
+  "data-testid": "header-basket-skeleton"
+}, K = { class: "tw-relative tw-flex md:tw-hidden tw-items-center tw-text-eco-green-4" }, N = {
   key: 0,
   class: "tw-absolute tw-w-4 tw-h-4 tw-pt-0.5 tw-flex tw-items-center tw-justify-center tw-text-white tw-text-small tw-font-medium tw-pointer-events-none"
-}, N = { class: "tw-hidden md:tw-block" }, E = {
+}, E = { class: "tw-hidden md:tw-block" }, P = {
   key: 0,
   class: "tw-w-4 tw-h-3"
-}, P = {
+}, V = {
   key: 1,
   class: "tw-text-eco-green-4"
-}, V = {
+}, j = {
   key: 3,
   class: "tw-w-3 tw-h-3 tw-rounded-full tw-overflow-hidden",
   "data-testid": "header-avatar-skeleton"
 };
-function j(h, t, a, e, X, z) {
-  const v = d("kv-material-icon"), y = d("kv-header-logo"), u = d("kv-header-dropdown-link"), _ = d("search-bar"), M = d("kv-button"), g = d("kv-loading-placeholder"), C = d("kv-user-avatar");
+function X(u, t, a, e, z, F) {
+  const v = d("kv-material-icon"), _ = d("kv-header-logo"), g = d("kv-header-dropdown-link"), M = d("search-bar"), c = d("kv-loading-placeholder"), C = d("kv-button"), p = d("kv-user-avatar");
   return o(), i("div", {
     class: "link-bar tw-min-h-[4rem] tw-font-medium tw-relative",
     onTouchstart: t[12] || (t[12] = (...n) => e.handleEmptySpaceClick && e.handleEmptySpaceClick(...n))
   }, [
-    r("button", {
+    l("button", {
       type: "button",
       "aria-label": "Open menu",
       class: "header-link link-bar__hamburger tw-inline-flex md:tw-hidden",
       onMouseover: t[0] || (t[0] = (n) => e.handleOnHover("menuButton", e.MobileMenu)),
       onTouchstart: t[1] || (t[1] = b((n) => e.handleTouchStart("menuButton", e.MobileMenu), ["stop", "prevent"]))
     }, [
-      l(v, { icon: e.mdiMenu }, null, 8, ["icon"])
+      r(v, { icon: e.mdiMenu }, null, 8, ["icon"])
     ], 32),
-    r("a", {
+    l("a", {
       href: "/",
       "aria-label": "Kiva home",
       class: "link-bar__logo tw-px-1 tw-py-2 tw-cursor-pointer",
       onClick: t[2] || (t[2] = (...n) => e.onLogoClick && e.onLogoClick(...n))
     }, [
-      l(y)
+      r(_)
     ]),
-    l(u, {
+    r(g, {
       class: "link-bar__lend",
       "ref-name": "lendButton",
       href: e.lendUrl,
@@ -51,28 +55,28 @@ function j(h, t, a, e, X, z) {
       onMouseleave: t[3] || (t[3] = (n) => e.handleMouseOut("lendButton")),
       onUserTap: e.handleTouchStart
     }, {
-      default: c(() => t[13] || (t[13] = [
+      default: k(() => t[13] || (t[13] = [
         w(" Lend ")
       ])),
       _: 1
     }, 8, ["href", "menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"]),
-    l(_, {
+    r(M, {
       class: "link-bar__search tw-min-w-0 tw-hidden md:tw-block",
       "search-suggestions": a.searchSuggestions,
       "app-origin": a.appOrigin,
       "is-mobile": a.isMobile,
-      onLoadSearchData: t[4] || (t[4] = (n) => h.$emit("load-search-data")),
-      onSearchSubmit: t[5] || (t[5] = (n) => h.$emit("search-submit", n))
+      onLoadSearchData: t[4] || (t[4] = (n) => u.$emit("load-search-data")),
+      onSearchSubmit: t[5] || (t[5] = (n) => u.$emit("search-submit", n))
     }, null, 8, ["search-suggestions", "app-origin", "is-mobile"]),
-    r("div", T, [
-      (o(!0), i(x, null, L(e.visiblePrimaryLinks, (n) => (o(), i("a", {
+    l("div", T, [
+      (o(!0), i(f, null, L(e.visiblePrimaryLinks, (n) => (o(), i("a", {
         key: n.id,
         href: n.href,
         class: "header-link tw-hidden md:tw-block",
         "data-testid": `header-link-${n.id}`,
-        onClick: (F) => e.onPrimaryClick(n)
+        onClick: (q) => e.onPrimaryClick(n)
       }, m(n.label), 9, D))), 128)),
-      l(u, {
+      r(g, {
         "ref-name": "aboutLink",
         class: "tw-hidden md:tw-block",
         "menu-component": e.AboutMenu,
@@ -84,7 +88,7 @@ function j(h, t, a, e, X, z) {
         onMouseleave: t[6] || (t[6] = (n) => e.handleMouseOut("aboutLink")),
         onUserTap: e.handleTouchStart
       }, {
-        default: c(() => t[14] || (t[14] = [
+        default: k(() => t[14] || (t[14] = [
           w(" About ")
         ])),
         _: 1
@@ -96,37 +100,43 @@ function j(h, t, a, e, X, z) {
         "data-testid": "header-login",
         onClick: t[7] || (t[7] = (...n) => e.onLoginClick && e.onLoginClick(...n))
       }, "Log in", 8, U)),
-      B(r("a", {
-        style: k(a.isBasketDataLoading ? { display: "var(--basket-display, flex)" } : void 0),
+      B(l("a", {
+        style: h(a.isBasketDataLoading ? { display: "var(--basket-display, flex)" } : void 0),
         href: "/basket",
         class: "header-link tw-flex tw-items-center",
         "data-testid": "header-basket",
         onClick: t[8] || (t[8] = (...n) => e.onBasketClick && e.onBasketClick(...n))
       }, [
-        r("span", H, [
-          r("span", A, m(a.basketCount), 1),
+        l("span", H, [
+          l("span", A, [
+            a.isBasketDataLoading ? (o(), i("span", I, [
+              r(c)
+            ])) : (o(), i(f, { key: 1 }, [
+              w(m(a.basketCount), 1)
+            ], 64))
+          ]),
           t[15] || (t[15] = w(" Basket "))
         ]),
-        r("span", I, [
-          a.isBasketDataLoading ? s("", !0) : (o(), i("span", K, m(a.basketCount), 1)),
-          l(v, {
+        l("span", K, [
+          a.isBasketDataLoading ? s("", !0) : (o(), i("span", N, m(a.basketCount), 1)),
+          r(v, {
             icon: e.mdiBriefcase,
             class: "tw-w-4 tw-h-4 tw-pointer-events-none"
           }, null, 8, ["icon"]),
-          t[16] || (t[16] = r("span", { class: "tw-sr-only" }, "Basket", -1))
+          t[16] || (t[16] = l("span", { class: "tw-sr-only" }, "Basket", -1))
         ])
       ], 4), [
         [O, a.basketCount > 0 || a.isBasketDataLoading]
       ]),
-      r("div", N, [
-        l(M, {
+      l("div", E, [
+        r(C, {
           variant: "secondary",
           href: "/donate/supportus",
           class: "tw-whitespace-nowrap",
           "data-testid": "header-support-kiva",
           onClick: e.onSupportKivaClick
         }, {
-          default: c(() => t[17] || (t[17] = [
+          default: k(() => t[17] || (t[17] = [
             w(" Support Kiva ")
           ])),
           _: 1
@@ -137,29 +147,29 @@ function j(h, t, a, e, X, z) {
         ref: "avatarMenu",
         "data-testid": "header-avatar-menu",
         class: "tw-flex tw-items-center tw-gap-1 tw-cursor-pointer tw-py-1",
-        style: k(a.isUserDataLoading ? { display: "var(--user-loading-display, flex)" } : void 0),
+        style: h(a.isUserDataLoading ? { display: "var(--user-loading-display, flex)" } : void 0),
         onMouseenter: t[9] || (t[9] = (n) => e.handleOnHover("avatarMenu", e.MyKivaMenu, e.getAvatarMenuPosition(), e.getAvatarTriggerCenterX())),
         onMouseleave: t[10] || (t[10] = (n) => e.handleMouseOut("avatarMenu")),
         onTouchstart: t[11] || (t[11] = b((n) => e.handleTouchStart("avatarMenu", e.MyKivaMenu, e.getAvatarMenuPosition(), e.getAvatarTriggerCenterX()), ["stop"]))
       }, [
-        a.isUserDataLoading ? (o(), i("div", E, [
-          l(g)
-        ])) : (o(), i("span", P, m(e.formattedBalance), 1)),
-        e.avatarMode === "esi" ? (o(), f(v, {
+        a.isUserDataLoading ? (o(), i("div", P, [
+          r(c)
+        ])) : (o(), i("span", V, m(e.formattedBalance), 1)),
+        e.avatarMode === "esi" ? (o(), y(v, {
           key: 2,
           icon: e.mdiAccountCircle,
           class: "tw-w-3 tw-h-3",
           "data-testid": "header-avatar-icon",
           style: { display: "var(--user-avatar-legacy-display, inline-block)" }
         }, null, 8, ["icon"])) : s("", !0),
-        e.avatarMode === "skeleton" ? (o(), i("div", V, [
-          l(g)
+        e.avatarMode === "skeleton" ? (o(), i("div", j, [
+          r(c)
         ])) : s("", !0),
-        e.avatarMode !== "skeleton" ? (o(), f(C, {
+        e.avatarMode !== "skeleton" ? (o(), y(p, {
           key: 4,
           class: "tw-w-3 tw-h-3",
           "data-testid": e.avatarMode === "esi" ? "header-avatar-esi" : null,
-          style: k(e.avatarMode === "esi" ? { display: "var(--user-avatar-display, block)" } : void 0),
+          style: h(e.avatarMode === "esi" ? { display: "var(--user-avatar-display, block)" } : void 0),
           "lender-name": a.lenderName,
           "lender-image-url": a.lenderImageUrl,
           "show-css-placeholder": e.avatarMode === "esi",
@@ -169,7 +179,7 @@ function j(h, t, a, e, X, z) {
     ])
   ], 32);
 }
-const R = /* @__PURE__ */ S(p, [["render", j], ["__scopeId", "data-v-9ca80a31"]]);
+const W = /* @__PURE__ */ S(x, [["render", X], ["__scopeId", "data-v-2e7def04"]]);
 export {
-  R as default
+  W as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.29.1",
+  "version": "9.0.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -33,7 +33,7 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@figma/code-connect": "^1.4.9",
-    "@kiva/kv-tokens": "^4.4.1",
+    "@kiva/kv-tokens": "^5.0.0",
     "@kiva/vite-plugin-vue-lib-css": "^2.0.0",
     "@laynezh/vite-plugin-lib-assets": "^0.6.1",
     "@mdi/js": "^7.4.47",
@@ -113,5 +113,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "4019cd735446715586ea04ca6b5f5f682ccb2841"
+  "gitHead": "60bd66047ae16262c92663f9725288266677bf96"
 }