@kiva/kv-components 6.25.0 → 6.27.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { default as t } from "./vue/KvAccordionItem.js";
+import { default as r } from "./vue/KvAccordionItem.js";
 import { default as a } from "./vue/KvActivityRow.js";
 import { default as l } from "./vue/KvBorrowerImage.js";
 import { default as d } from "./vue/KvButton.js";
@@ -7,10 +7,10 @@ import { default as x } from "./vue/KvCartModal.js";
 import { default as K } from "./vue/KvCartPill.js";
 import { default as A } from "./vue/KvCheckbox.js";
 import { default as C } from "./vue/KvChip.js";
-import { KV_CLASSIC_LOAN_CARD_FRAGMENT as L, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as T, default as N } from "./vue/KvClassicLoanCard.js";
+import { KV_CLASSIC_LOAN_CARD_FRAGMENT as L, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as N, default as T } from "./vue/KvClassicLoanCard.js";
 import { default as c } from "./vue/KvCommentsAdd.js";
 import { default as O } from "./vue/KvCommentsContainer.js";
-import { default as I } from "./vue/KvCommentsHeartButton.js";
+import { default as S } from "./vue/KvCommentsHeartButton.js";
 import { default as G } from "./vue/KvCommentsList.js";
 import { default as P } from "./vue/KvCommentsListItem.js";
 import { default as F } from "./vue/KvCommentsReplyButton.js";
@@ -23,7 +23,7 @@ import { default as z } from "./vue/KvGrid.js";
 import { default as q } from "./vue/KvImpactDashboardHeader.js";
 import { default as X } from "./vue/KvInlineActivityCard.js";
 import { default as Z } from "./vue/KvInlineActivityFeed.js";
-import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as ee, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as oe, default as te } from "./vue/KvIntroductionLoanCard.js";
+import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as ee, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as oe, default as re } from "./vue/KvIntroductionLoanCard.js";
 import { default as ae } from "./vue/KvLendAmountButton.js";
 import { KV_LEND_CTA_FRAGMENT as le, KV_LEND_CTA_USER_FRAGMENT as se, default as de } from "./vue/KvLendCta.js";
 import { default as pe } from "./vue/KvLightbox.js";
@@ -31,10 +31,10 @@ import { default as xe } from "./vue/KvLineGraph.js";
 import { KV_LOAN_ACTIVITIES_FRAGMENT as Ke, default as ve } from "./vue/KvLoanActivities.js";
 import { KV_LOAN_BOOKMARK_FRAGMENT as ie, default as Ce } from "./vue/KvLoanBookmark.js";
 import { default as Le } from "./vue/KvLoanCallouts.js";
-import { default as Ne } from "./vue/KvLoanProgressGroup.js";
+import { default as Te } from "./vue/KvLoanProgressGroup.js";
 import { KV_LOAN_TAG_FRAGMENT as ce, default as Re } from "./vue/KvLoanTag.js";
 import { default as Me } from "./vue/KvLoanTeamPick.js";
-import { KV_LOAN_USE_FRAGMENT as Se, default as Ge } from "./vue/KvLoanUse.js";
+import { KV_LOAN_USE_FRAGMENT as Ie, default as Ge } from "./vue/KvLoanUse.js";
 import { default as Pe } from "./vue/KvLoadingPlaceholder.js";
 import { default as Fe } from "./vue/KvLoadingSpinner.js";
 import { default as Be } from "./vue/KvMap.js";
@@ -47,7 +47,7 @@ import { default as qe } from "./vue/KvProgressBar.js";
 import { default as Xe } from "./vue/KvRadio.js";
 import { default as Ze } from "./vue/KvSelect.js";
 import { default as eo } from "./vue/KvSideSheet.js";
-import { default as to } from "./vue/KvSwitch.js";
+import { default as ro } from "./vue/KvSwitch.js";
 import { default as ao } from "./vue/KvTab.js";
 import { default as lo } from "./vue/KvTabPanel.js";
 import { default as mo } from "./vue/KvTabs.js";
@@ -56,35 +56,36 @@ import { default as no } from "./vue/KvTextLink.js";
 import { default as vo } from "./vue/KvThemeProvider.js";
 import { default as io } from "./vue/KvToast.js";
 import { default as _o } from "./vue/KvTooltip.js";
-import { default as To } from "./vue/KvTreeMapChart.js";
+import { default as No } from "./vue/KvTreeMapChart.js";
 import { default as Eo } from "./vue/KvUserAvatar.js";
 import { default as Ro } from "./vue/KvVerticalCarousel.js";
 import { default as Mo } from "./vue/KvVotingCard.js";
-import { default as So } from "./vue/KvVotingCardV2.js";
+import { default as Io } from "./vue/KvVotingCardV2.js";
 import { KV_WIDE_LOAN_CARD_FRAGMENT as go, KV_WIDE_LOAN_CARD_USER_FRAGMENT as Po, default as ho } from "./vue/KvWideLoanCard.js";
 import { default as Vo } from "./vue/KvAtbModal.js";
-import { default as Do, Mash as bo } from "./utils/Alea.js";
-import { useAttrs as yo } from "./utils/attrs.js";
-import { carouselUtil as wo } from "./utils/carousels.js";
-import { collapse as Ho, expand as jo } from "./utils/expander.js";
-import { isLegacyPlaceholderAvatar as Qo, randomizedUserAvatarClass as qo } from "./utils/imageUtils.js";
-import { LOAN_CALLOUTS_FRAGMENT as Xo, LOAN_GEOCODE_FRAGMENT as Yo, LOAN_PROGRESS_FRAGMENT as Zo, loanCardComputedProperties as $o, loanCardMethods as et } from "./utils/loanCard.js";
-import { BALANCE_CAMPAIGN as tt, BASE_CAMPAIGN as rt, ERL_COOKIE_NAME as at, NO_BALANCE_CAMPAIGN as ft, TOP_UP_CAMPAIGN as lt, getDropdownPriceArray as st, getLendCtaSelectedOption as dt, isBetween25And50 as mt, isLessThan25 as pt } from "./utils/loanUtils.js";
-import { animationCoordinator as xt, generateMapMarkers as nt, getCoordinatesBetween as Kt, getCountryColor as vt, getLoansIntervals as At } from "./utils/mapUtils.js";
-import { lockPrintSingleEl as Ct, unlockPrintSingleEl as _t } from "./utils/printing.js";
-import { lockScroll as Tt, lockScrollSmallOnly as Nt, unlockScroll as Et, unlockScrollSmallOnly as ct } from "./utils/scrollLock.js";
-import { buildTailwindClassName as Ot, headerNumberCase as Mt, kebabCase as It, removeObjectProperty as St } from "./utils/themeUtils.js";
-import { throttle as gt } from "./utils/throttle.js";
-import { isTargetElement as ht, offBodyTouchstart as Ft, onBodyTouchstart as Vt } from "./utils/touchEvents.js";
-import { getTreemap as Dt } from "./utils/treemap.js";
-import { KvBlueskyIcon as kt } from "./assets/icons/bluesky.js";
+import { default as Do } from "./vue/KvSecondaryNav.js";
+import { default as ko, Mash as yo } from "./utils/Alea.js";
+import { useAttrs as wo } from "./utils/attrs.js";
+import { carouselUtil as Ho } from "./utils/carousels.js";
+import { collapse as zo, expand as Qo } from "./utils/expander.js";
+import { isLegacyPlaceholderAvatar as Jo, randomizedUserAvatarClass as Xo } from "./utils/imageUtils.js";
+import { LOAN_CALLOUTS_FRAGMENT as Zo, LOAN_GEOCODE_FRAGMENT as $o, LOAN_PROGRESS_FRAGMENT as er, loanCardComputedProperties as or, loanCardMethods as rr } from "./utils/loanCard.js";
+import { BALANCE_CAMPAIGN as ar, BASE_CAMPAIGN as fr, ERL_COOKIE_NAME as lr, NO_BALANCE_CAMPAIGN as sr, TOP_UP_CAMPAIGN as dr, getDropdownPriceArray as mr, getLendCtaSelectedOption as pr, isBetween25And50 as ur, isLessThan25 as xr } from "./utils/loanUtils.js";
+import { animationCoordinator as Kr, generateMapMarkers as vr, getCoordinatesBetween as Ar, getCountryColor as ir, getLoansIntervals as Cr } from "./utils/mapUtils.js";
+import { lockPrintSingleEl as Lr, unlockPrintSingleEl as Nr } from "./utils/printing.js";
+import { lockScroll as Er, lockScrollSmallOnly as cr, unlockScroll as Rr, unlockScrollSmallOnly as Or } from "./utils/scrollLock.js";
+import { buildTailwindClassName as Sr, headerNumberCase as Ir, kebabCase as Gr, removeObjectProperty as gr } from "./utils/themeUtils.js";
+import { throttle as hr } from "./utils/throttle.js";
+import { isTargetElement as Vr, offBodyTouchstart as Br, onBodyTouchstart as Dr } from "./utils/touchEvents.js";
+import { getTreemap as kr } from "./utils/treemap.js";
+import { KvBlueskyIcon as Ur } from "./assets/icons/bluesky.js";
 export {
-  Do as Alea,
-  tt as BALANCE_CAMPAIGN,
-  rt as BASE_CAMPAIGN,
-  at as ERL_COOKIE_NAME,
+  ko as Alea,
+  ar as BALANCE_CAMPAIGN,
+  fr as BASE_CAMPAIGN,
+  lr as ERL_COOKIE_NAME,
   L as KV_CLASSIC_LOAN_CARD_FRAGMENT,
-  T as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
+  N as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
   ee as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
   oe as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
   le as KV_LEND_CTA_FRAGMENT,
@@ -92,13 +93,13 @@ export {
   Ke as KV_LOAN_ACTIVITIES_FRAGMENT,
   ie as KV_LOAN_BOOKMARK_FRAGMENT,
   ce as KV_LOAN_TAG_FRAGMENT,
-  Se as KV_LOAN_USE_FRAGMENT,
+  Ie as KV_LOAN_USE_FRAGMENT,
   go as KV_WIDE_LOAN_CARD_FRAGMENT,
   Po as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
-  t as KvAccordionItem,
+  r as KvAccordionItem,
   a as KvActivityRow,
   Vo as KvAtbModal,
-  kt as KvBlueskyIcon,
+  Ur as KvBlueskyIcon,
   l as KvBorrowerImage,
   d as KvButton,
   p as KvCarousel,
@@ -106,10 +107,10 @@ export {
   K as KvCartPill,
   A as KvCheckbox,
   C as KvChip,
-  N as KvClassicLoanCard,
+  T as KvClassicLoanCard,
   c as KvCommentsAdd,
   O as KvCommentsContainer,
-  I as KvCommentsHeartButton,
+  S as KvCommentsHeartButton,
   G as KvCommentsList,
   P as KvCommentsListItem,
   F as KvCommentsReplyButton,
@@ -122,7 +123,7 @@ export {
   q as KvImpactDashboardHeader,
   X as KvInlineActivityCard,
   Z as KvInlineActivityFeed,
-  te as KvIntroductionLoanCard,
+  re as KvIntroductionLoanCard,
   ae as KvLendAmountButton,
   de as KvLendCta,
   pe as KvLightbox,
@@ -132,7 +133,7 @@ export {
   ve as KvLoanActivities,
   Ce as KvLoanBookmark,
   Le as KvLoanCallouts,
-  Ne as KvLoanProgressGroup,
+  Te as KvLoanProgressGroup,
   Re as KvLoanTag,
   Me as KvLoanTeamPick,
   Ge as KvLoanUse,
@@ -144,9 +145,10 @@ export {
   ze as KvPopper,
   qe as KvProgressBar,
   Xe as KvRadio,
+  Do as KvSecondaryNav,
   Ze as KvSelect,
   eo as KvSideSheet,
-  to as KvSwitch,
+  ro as KvSwitch,
   ao as KvTab,
   lo as KvTabPanel,
   mo as KvTabs,
@@ -155,48 +157,48 @@ export {
   vo as KvThemeProvider,
   io as KvToast,
   _o as KvTooltip,
-  To as KvTreeMapChart,
+  No as KvTreeMapChart,
   Eo as KvUserAvatar,
   Ro as KvVerticalCarousel,
   Mo as KvVotingCard,
-  So as KvVotingCardV2,
+  Io as KvVotingCardV2,
   ho as KvWideLoanCard,
-  Xo as LOAN_CALLOUTS_FRAGMENT,
-  Yo as LOAN_GEOCODE_FRAGMENT,
-  Zo as LOAN_PROGRESS_FRAGMENT,
-  bo as Mash,
-  ft as NO_BALANCE_CAMPAIGN,
-  lt as TOP_UP_CAMPAIGN,
-  xt as animationCoordinator,
-  Ot as buildTailwindClassName,
-  wo as carouselUtil,
-  Ho as collapse,
-  jo as expand,
-  nt as generateMapMarkers,
-  Kt as getCoordinatesBetween,
-  vt as getCountryColor,
-  st as getDropdownPriceArray,
-  dt as getLendCtaSelectedOption,
-  At as getLoansIntervals,
-  Dt as getTreemap,
-  Mt as headerNumberCase,
-  mt as isBetween25And50,
-  Qo as isLegacyPlaceholderAvatar,
-  pt as isLessThan25,
-  ht as isTargetElement,
-  It as kebabCase,
-  $o as loanCardComputedProperties,
-  et as loanCardMethods,
-  Ct as lockPrintSingleEl,
-  Tt as lockScroll,
-  Nt as lockScrollSmallOnly,
-  Ft as offBodyTouchstart,
-  Vt as onBodyTouchstart,
-  qo as randomizedUserAvatarClass,
-  St as removeObjectProperty,
-  gt as throttle,
-  _t as unlockPrintSingleEl,
-  Et as unlockScroll,
-  ct as unlockScrollSmallOnly,
-  yo as useAttrs
+  Zo as LOAN_CALLOUTS_FRAGMENT,
+  $o as LOAN_GEOCODE_FRAGMENT,
+  er as LOAN_PROGRESS_FRAGMENT,
+  yo as Mash,
+  sr as NO_BALANCE_CAMPAIGN,
+  dr as TOP_UP_CAMPAIGN,
+  Kr as animationCoordinator,
+  Sr as buildTailwindClassName,
+  Ho as carouselUtil,
+  zo as collapse,
+  Qo as expand,
+  vr as generateMapMarkers,
+  Ar as getCoordinatesBetween,
+  ir as getCountryColor,
+  mr as getDropdownPriceArray,
+  pr as getLendCtaSelectedOption,
+  Cr as getLoansIntervals,
+  kr as getTreemap,
+  Ir as headerNumberCase,
+  ur as isBetween25And50,
+  Jo as isLegacyPlaceholderAvatar,
+  xr as isLessThan25,
+  Vr as isTargetElement,
+  Gr as kebabCase,
+  or as loanCardComputedProperties,
+  rr as loanCardMethods,
+  Lr as lockPrintSingleEl,
+  Er as lockScroll,
+  cr as lockScrollSmallOnly,
+  Br as offBodyTouchstart,
+  Dr as onBodyTouchstart,
+  Xo as randomizedUserAvatarClass,
+  gr as removeObjectProperty,
+  hr as throttle,
+  Nr as unlockPrintSingleEl,
+  Rr as unlockScroll,
+  Or as unlockScrollSmallOnly,
+  wo as useAttrs
 };

package/dist/vue/KvSecondaryNav.css

@@ -0,0 +1 @@
+.kv-secondary-nav-holder[data-v-ad8fd90d]{height:62px}.kv-secondary-nav[data-v-ad8fd90d]{min-height:62px}

package/dist/vue/KvSecondaryNav.js

@@ -0,0 +1,145 @@
+import { toRefs as x, ref as y, computed as p, resolveComponent as m, openBlock as d, createBlock as _, withCtx as w, createElementVNode as i, normalizeClass as o, createVNode as k, createElementBlock as u, toDisplayString as b, createCommentVNode as C, Fragment as N, renderList as S, resolveDynamicComponent as j, createTextVNode as A } from "vue";
+import { defaultTheme as O, greenDarkTheme as L } from "@kiva/kv-tokens";
+import { mdiChevronUp as D, mdiChevronDown as E } from "@mdi/js";
+import K from "./KvThemeProvider.js";
+import P from "./KvMaterialIcon.js";
+import T from "./KvPageContainer.js";
+import "./KvSecondaryNav.css";
+import V from "../_virtual/_plugin-vue_export-helper.js";
+const B = {
+  name: "KvSecondaryNav",
+  components: {
+    KvThemeProvider: K,
+    KvMaterialIcon: P,
+    KvPageContainer: T
+  },
+  props: {
+    heading: {
+      type: String,
+      default: ""
+    },
+    links: {
+      type: Array,
+      default: () => [],
+      validator(a) {
+        return a.every(
+          (r) => Object.prototype.hasOwnProperty.call(r, "text") && Object.prototype.hasOwnProperty.call(r, "href")
+        );
+      }
+    },
+    linkAlignment: {
+      type: String,
+      default: "",
+      validator(a) {
+        return ["left", "right", "center"].includes(a);
+      }
+    },
+    theme: {
+      type: String,
+      default: "default",
+      validator(a) {
+        return ["default", "dark"].includes(a);
+      }
+    }
+  },
+  emits: [
+    "subnavLinkClicked"
+  ],
+  setup(a, { emit: r }) {
+    const {
+      heading: n,
+      linkAlignment: e,
+      theme: f
+    } = x(a), g = y(null), l = y(!1), c = p(() => e.value === "right" ? n.value && n.value.length > 0 ? "tw-justify-between" : "tw-justify-between md:tw-justify-end" : e.value === "left" ? "tw-justify-between md:tw-justify-start" : e.value === "center" ? "tw-justify-between md:tw-justify-center" : ""), s = p(() => ({
+      default: O,
+      dark: L
+    })[f.value]);
+    return {
+      navAlignmentClass: c,
+      toggleSubNavigation: () => {
+        l.value = !l.value;
+      },
+      subNavigationOpen: l,
+      mdiChevronUp: D,
+      mdiChevronDown: E,
+      subNavigation: g,
+      themeStyle: s,
+      handleLinkClick: (v) => {
+        r("subnavLinkClicked", v);
+      }
+    };
+  }
+}, I = { class: "kv-secondary-nav__heading tw-text-h3" }, M = { class: "kv-secondary-nav__links tw-flex tw-flex-col md:tw-flex-row tw-items-center tw-gap-3" };
+function z(a, r, n, e, f, g) {
+  const l = m("kv-material-icon"), c = m("kv-page-container"), s = m("kv-theme-provider");
+  return d(), _(s, {
+    theme: e.themeStyle,
+    class: "kv-tailwind"
+  }, {
+    default: w(() => [
+      i("div", {
+        class: o(["tw-z-1 tw-w-full kv-secondary-nav-holder relative tw-text-primary", n.theme === "default" ? "tw-bg-secondary" : "tw-bg-primary"])
+      }, [
+        i("div", {
+          class: o(["tw-w-full tw-overflow-x-auto kv-secondary-nav tw-absolute tw-top-0 tw-left-0 tw-right-0", n.theme === "default" ? "tw-bg-secondary" : "tw-bg-primary"])
+        }, [
+          k(c, null, {
+            default: w(() => [
+              i("div", {
+                ref: "navInner",
+                class: o(["kv-secondary-nav__inner tw-flex tw-gap-2 md:tw-gap-4 tw-items-center tw-flex-wrap tw-py-2", e.navAlignmentClass])
+              }, [
+                n.heading && n.heading.length > 0 ? (d(), u("div", {
+                  key: 0,
+                  class: o(["kv-secondary-nav__heading-container", { "tw-block md:tw-hidden": n.linkAlignment === "left" || n.linkAlignment === "center" }])
+                }, [
+                  i("div", I, b(n.heading), 1)
+                ], 2)) : C("", !0),
+                i("button", {
+                  class: "kv-secondary-nav__toggle tw-flex md:tw-hidden tw-text-primary tw-bg-transparent tw-border-none tw-cursor-pointer",
+                  onClick: r[0] || (r[0] = (...t) => e.toggleSubNavigation && e.toggleSubNavigation(...t))
+                }, [
+                  k(l, {
+                    icon: e.subNavigationOpen ? e.mdiChevronUp : e.mdiChevronDown
+                  }, null, 8, ["icon"])
+                ]),
+                i("div", {
+                  ref: "subNavigation",
+                  class: o(["kv-secondary-nav__links-container tw-pt-1 md:tw-pt-0 md:tw-block tw-w-full md:tw-w-auto", { "tw-hidden": !e.subNavigationOpen }])
+                }, [
+                  i("ul", M, [
+                    (d(!0), u(N, null, S(n.links, (t, h) => (d(), u("li", {
+                      key: h,
+                      class: "kv-secondary-nav__link-item tw-w-full md:tw-w-auto"
+                    }, [
+                      (d(), _(j(t.isExternal ? "a" : "router-link"), {
+                        to: t.isExternal ? void 0 : t.href,
+                        href: t.isExternal ? t.href : void 0,
+                        class: o(["kv-secondary-nav__link tw-py-2 md:tw-py-n tw-text-primary tw-font-medium hover:tw-underline hover:tw-text-primary", {
+                          "tw-underline": t.isActive,
+                          "tw-no-underline": !t.isActive
+                        }]),
+                        onClick: (v) => e.handleLinkClick(t)
+                      }, {
+                        default: w(() => [
+                          A(b(t.text), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["to", "href", "class", "onClick"]))
+                    ]))), 128))
+                  ])
+                ], 2)
+              ], 2)
+            ]),
+            _: 1
+          })
+        ], 2)
+      ], 2)
+    ]),
+    _: 1
+  }, 8, ["theme"]);
+}
+const W = /* @__PURE__ */ V(B, [["render", z], ["__scopeId", "data-v-ad8fd90d"]]);
+export {
+  W as default
+};

package/dist/vue/KvSideSheet.js

@@ -1,11 +1,11 @@
-import { toRefs as q, ref as w, reactive as J, computed as L, onMounted as P, onUnmounted as B, watch as y, resolveComponent as Q, openBlock as g, createElementBlock as p, normalizeClass as k, withModifiers as X, createElementVNode as c, normalizeStyle as j, createVNode as O, createCommentVNode as b, toDisplayString as Y, renderSlot as F, nextTick as Z } from "vue";
-import { mdiArrowLeft as $, mdiClose as ee, mdiExportVariant as te } from "@mdi/js";
-import oe from "./KvMaterialIcon.js";
-import ne from "../_virtual/_plugin-vue_export-helper.js";
-const ie = {
+import { toRefs as J, ref as f, reactive as P, computed as O, onMounted as Q, onUnmounted as C, watch as g, resolveComponent as X, openBlock as p, createElementBlock as k, normalizeClass as b, withModifiers as Y, createElementVNode as u, normalizeStyle as j, createVNode as H, createCommentVNode as x, toDisplayString as Z, renderSlot as I, nextTick as $ } from "vue";
+import { mdiArrowLeft as ee, mdiClose as te, mdiExportVariant as oe } from "@mdi/js";
+import ne from "./KvMaterialIcon.js";
+import ie from "../_virtual/_plugin-vue_export-helper.js";
+const le = {
   name: "KvSideSheet",
   components: {
-    KvMaterialIcon: oe
+    KvMaterialIcon: ne
   },
   props: {
     /**
@@ -65,248 +65,256 @@ const ie = {
     widthDimensions: {
       type: [String, Object],
       default: () => ({ default: "100%", md: "50%" }),
-      validator: (i) => typeof i == "string" ? /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(i) : typeof i == "object" ? Object.keys(i).every((l) => ["default", "sm", "md", "lg", "xl", "2xl"].includes(l) && /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(i[l])) : !1
+      validator: (n) => typeof n == "string" ? /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(n) : typeof n == "object" ? Object.keys(n).every((i) => ["default", "sm", "md", "lg", "xl", "2xl"].includes(i) && /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(n[i])) : !1
+    },
+    /**
+     * Whether to hide the background of the headline section on mobile (e.g., in Borrower Profile Sidesheet)
+     * */
+    hideHeadlineBgOnMobile: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["side-sheet-closed", "go-to-link"],
-  setup(i, { emit: l, slots: s }) {
+  setup(n, { emit: i, slots: l }) {
     const {
       visible: t,
-      kvTrackFunction: H,
-      trackEventCategory: z,
-      widthDimensions: a
-    } = q(i), o = w(!1), r = w({}), C = w(null), v = w(null), m = w(null), W = w(window.innerHeight), _ = w(window.innerWidth), f = J({
+      kvTrackFunction: z,
+      trackEventCategory: M,
+      widthDimensions: s,
+      hideHeadlineBgOnMobile: r
+    } = J(n), d = f(!1), a = f({}), E = f(null), m = f(null), y = f(null), _ = f(null), V = f(null), h = P({
       headline: 0,
       controls: 0
-    }), I = L(() => {
-      const e = W.value - f.headline - f.controls;
+    }), N = O(() => {
+      const e = _.value - (r.value ? 0 : h.headline) - h.controls;
       return Math.max(e, 0);
-    }), V = L(() => {
-      if (typeof a.value == "string")
-        return a.value;
+    }), W = O(() => {
+      if (typeof s.value == "string")
+        return s.value;
       const e = {
         sm: 640,
         md: 768,
         lg: 1024,
         xl: 1280,
         "2xl": 1536
-      }, n = _.value || window.innerWidth, u = Object.keys(a.value).filter((d) => d !== "default").sort((d, R) => e[R] - e[d]).find((d) => n >= e[d]);
-      return u ? a.value[u] : a.value.default || "100%";
-    }), N = (e, n) => {
-      let u;
-      return (...d) => {
-        clearTimeout(u), u = setTimeout(() => e(...d), n);
+      }, o = V.value || window.innerWidth, w = Object.keys(s.value).filter((c) => c !== "default").sort((c, L) => e[L] - e[c]).find((c) => o >= e[c]);
+      return w ? s.value[w] : s.value.default || "100%";
+    }), U = (e, o) => {
+      let w;
+      return (...c) => {
+        clearTimeout(w), w = setTimeout(() => e(...c), o);
       };
-    }, x = () => {
-      W.value = window.innerHeight, _.value = window.innerWidth, setTimeout(() => {
-        Z(() => {
+    }, S = () => {
+      _.value = window.innerHeight, V.value = window.innerWidth, setTimeout(() => {
+        $(() => {
           var e;
-          if (m.value) {
-            const n = m.value.getBoundingClientRect();
-            f.headline = n.height;
+          if (y.value) {
+            const o = y.value.getBoundingClientRect();
+            h.headline = o.height;
           } else
-            f.headline = 0;
-          if ((e = s.controls) != null && e.call(s) && v.value) {
-            const n = v.value.getBoundingClientRect();
-            f.controls = n.height;
+            h.headline = 0;
+          if ((e = l.controls) != null && e.call(l) && m.value) {
+            const o = m.value.getBoundingClientRect();
+            h.controls = o.height;
           } else
-            f.controls = 0;
+            h.controls = 0;
         });
       }, 300);
-    }, S = N(x, 100), E = () => {
+    }, B = U(S, 100), T = () => {
       const e = "tw-overflow-hidden";
-      o.value ? document.body.classList.add(e) : document.body.classList.remove(e);
+      d.value ? document.body.classList.add(e) : document.body.classList.remove(e);
     }, K = () => {
-      o.value = !1, E(), H.value(z.value, "click", "side-sheet-closed"), setTimeout(() => {
-        l("side-sheet-closed");
-      }, 300), document.removeEventListener("keyup", T);
-    }, U = () => {
-      l("go-to-link");
-    }, T = (e) => {
+      d.value = !1, T(), z.value(M.value, "click", "side-sheet-closed"), setTimeout(() => {
+        i("side-sheet-closed");
+      }, 300), document.removeEventListener("keyup", R);
+    }, A = () => {
+      i("go-to-link");
+    }, R = (e) => {
       (e == null ? void 0 : e.key) === "Escape" && K();
     };
-    P(() => {
+    Q(() => {
       if (setTimeout(() => {
-        x();
-      }, 100), v.value) {
-        const e = new ResizeObserver(S);
-        e.observe(v.value), B(() => e.disconnect());
+        S();
+      }, 100), m.value) {
+        const e = new ResizeObserver(B);
+        e.observe(m.value), C(() => e.disconnect());
       }
-      if (m.value) {
-        const e = new ResizeObserver(S);
-        e.observe(m.value), B(() => e.disconnect());
+      if (y.value) {
+        const e = new ResizeObserver(B);
+        e.observe(y.value), C(() => e.disconnect());
       }
-      window.addEventListener("resize", S), B(() => window.removeEventListener("resize", S));
-    }), y(() => {
+      window.addEventListener("resize", B), C(() => window.removeEventListener("resize", B));
+    }), g(() => {
       var e;
-      return (e = s.controls) == null ? void 0 : e.call(s);
+      return (e = l.controls) == null ? void 0 : e.call(l);
     }, () => {
       setTimeout(() => {
-        x();
+        S();
       }, 100);
-    }, { deep: !0, immediate: !0 });
-    const A = L(() => ({
-      width: V.value
+    }, { deep: !0 });
+    const G = O(() => ({
+      width: W.value
     }));
-    y(t, (e) => {
-      e ? (document.addEventListener("keyup", T), r.value = {}, setTimeout(() => {
-        o.value = !0, E(), x();
-      }, 10)) : (o.value = !1, E(), document.removeEventListener("keyup", T), r.value = {});
-    }, { immediate: !0 }), y(V, (e) => {
-      o.value && t.value && r.value && Object.keys(r.value).length > 0 && (r.value = {
-        ...r.value,
+    g(t, (e) => {
+      e ? (document.addEventListener("keyup", R), a.value = {}, setTimeout(() => {
+        d.value = !0, T(), S();
+      }, 10)) : (d.value = !1, T(), document.removeEventListener("keyup", R), a.value = {});
+    }), g(W, (e) => {
+      d.value && t.value && a.value && Object.keys(a.value).length > 0 && (a.value = {
+        ...a.value,
         width: e,
         transition: "none"
         // No animation for resize
       }, setTimeout(() => {
-        r.value && Object.keys(r.value).length > 0 && (r.value = {
-          ...r.value,
+        a.value && Object.keys(a.value).length > 0 && (a.value = {
+          ...a.value,
           transition: "all 0.3s ease-in-out"
         });
       }, 50));
     });
-    const M = () => {
-      if (typeof a.value == "object" && C.value) {
+    const D = () => {
+      if (typeof s.value == "object" && E.value) {
         const e = "side-sheet-styles";
-        let n = document.getElementById(e);
-        n || (n = document.createElement("style"), n.id = e, document.head.appendChild(n));
-        const u = {
+        let o = document.getElementById(e);
+        o || (o = document.createElement("style"), o.id = e, document.head.appendChild(o));
+        const w = {
           sm: "640px",
           md: "768px",
           lg: "1024px",
           xl: "1280px",
           "2xl": "1536px"
-        }, R = Object.keys(a.value).filter((h) => h !== "default").sort((h, G) => {
-          const D = ["sm", "md", "lg", "xl", "2xl"];
-          return D.indexOf(h) - D.indexOf(G);
-        }).map((h) => `
-						@media (min-width: ${u[h]}) {
-							#side-sheet-${i.trackEventCategory || "default"} {
-								width: ${a.value[h]} !important;
+        }, L = Object.keys(s.value).filter((v) => v !== "default").sort((v, q) => {
+          const F = ["sm", "md", "lg", "xl", "2xl"];
+          return F.indexOf(v) - F.indexOf(q);
+        }).map((v) => `
+						@media (min-width: ${w[v]}) {
+							#side-sheet-${n.trackEventCategory || "default"} {
+								width: ${s.value[v]} !important;
 							}
 						}
 					`).join("");
-        n.textContent = R, C.value.id = `side-sheet-${i.trackEventCategory || "default"}`, B(() => {
-          n && n.remove();
+        o.textContent = L, E.value.id = `side-sheet-${n.trackEventCategory || "default"}`, C(() => {
+          o && o.remove();
         });
       }
     };
-    return y(a, () => {
-      o.value && M();
-    }, { immediate: !0 }), y(o, (e) => {
-      e && M();
+    return g(s, () => {
+      d.value && D();
+    }, { immediate: !0 }), g(d, (e) => {
+      e && D();
     }), {
       closeSideSheet: K,
-      contentHeight: I,
-      controlsRef: v,
-      headlineRef: m,
-      sideSheetRef: C,
-      sideSheetStyles: A,
-      goToLink: U,
-      mdiArrowLeft: $,
-      mdiClose: ee,
-      mdiExportVariant: te,
-      modalStyles: r,
-      open: o
+      contentHeight: N,
+      controlsRef: m,
+      headlineRef: y,
+      sideSheetRef: E,
+      sideSheetStyles: G,
+      goToLink: A,
+      mdiArrowLeft: ee,
+      mdiClose: te,
+      mdiExportVariant: oe,
+      modalStyles: a,
+      open: d
     };
   }
-}, le = { class: "tw-flex tw-gap-1.5" }, se = { key: 1 }, ae = { class: "tw-flex tw-gap-1.5" };
-function re(i, l, s, t, H, z) {
-  const a = Q("kv-material-icon");
-  return s.visible ? (g(), p("div", {
+}, se = { class: "tw-flex tw-gap-1.5" }, ae = { key: 1 }, re = { class: "tw-flex tw-gap-1.5" };
+function de(n, i, l, t, z, M) {
+  const s = X("kv-material-icon");
+  return l.visible ? (p(), k("div", {
     key: 0,
-    class: k(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
+    class: b(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
       "tw-bg-opacity-0 tw-delay-300": !t.open,
       "tw-bg-opacity-low": t.open
     }]),
-    onClick: l[3] || (l[3] = X((...o) => t.closeSideSheet && t.closeSideSheet(...o), ["self"]))
+    onClick: i[3] || (i[3] = Y((...r) => t.closeSideSheet && t.closeSideSheet(...r), ["self"]))
   }, [
-    c("div", {
+    u("div", {
       ref: "sideSheetRef",
-      class: k(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto", {
+      class: b(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto", {
         "tw-translate-x-full": !t.open,
         "tw-translate-x-0": t.open,
-        "tw-h-full": i.$slots.controls
+        "tw-h-full": n.$slots.controls
       }]),
       style: j(t.sideSheetStyles)
     }, [
-      c("div", {
+      u("div", {
         class: "tw-flex tw-flex-col tw-h-full",
         style: j(t.modalStyles)
       }, [
-        c("div", {
+        u("div", {
           ref: "headlineRef",
-          class: k(["tw-flex tw-justify-between tw-transition-opacity tw-duration-200 tw-px-3 tw-py-2 tw-border-tertiary tw-gap-1.5", {
+          class: b(["tw-flex tw-justify-between tw-transition-opacity tw-duration-200 tw-px-3 tw-py-2 tw-border-tertiary tw-gap-1.5", {
             "tw-opacity-0": !t.open,
             "tw-opacity-full": t.open,
-            "tw-border-b": s.showHeadlineBorder
+            "tw-border-b": l.showHeadlineBorder
           }])
         }, [
-          c("div", le, [
-            s.showBackButton ? (g(), p("button", {
+          u("div", se, [
+            l.showBackButton ? (p(), k("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: l[0] || (l[0] = (...o) => t.closeSideSheet && t.closeSideSheet(...o))
+              onClick: i[0] || (i[0] = (...r) => t.closeSideSheet && t.closeSideSheet(...r))
             }, [
-              O(a, {
+              H(s, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiArrowLeft
               }, null, 8, ["icon"])
-            ])) : b("", !0),
-            s.headline ? (g(), p("h3", se, Y(s.headline), 1)) : b("", !0)
+            ])) : x("", !0),
+            l.headline ? (p(), k("h3", ae, Z(l.headline), 1)) : x("", !0)
           ]),
-          c("div", ae, [
-            s.showGoToLink ? (g(), p("button", {
+          u("div", re, [
+            l.showGoToLink ? (p(), k("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: l[1] || (l[1] = (...o) => t.goToLink && t.goToLink(...o))
+              onClick: i[1] || (i[1] = (...r) => t.goToLink && t.goToLink(...r))
             }, [
-              O(a, {
+              H(s, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiExportVariant
               }, null, 8, ["icon"])
-            ])) : b("", !0),
-            c("button", {
+            ])) : x("", !0),
+            u("button", {
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: l[2] || (l[2] = (...o) => t.closeSideSheet && t.closeSideSheet(...o))
+              onClick: i[2] || (i[2] = (...r) => t.closeSideSheet && t.closeSideSheet(...r))
             }, [
-              O(a, {
+              H(s, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiClose
               }, null, 8, ["icon"])
             ])
           ])
         ], 2),
-        c("div", {
+        u("div", {
           id: "sidesheet-content",
           class: "tw-overflow-y-auto tw-overscroll-y-contain",
           style: j({ height: t.contentHeight + "px" })
         }, [
-          c("div", {
-            class: k(["tw-px-2 tw-transition-opacity tw-duration-200", {
+          u("div", {
+            class: b(["tw-px-2 tw-transition-opacity tw-duration-200", {
               "tw-opacity-0": !t.open,
               "tw-opacity-full": t.open
             }])
           }, [
-            F(i.$slots, "default")
+            I(n.$slots, "default")
           ], 2)
         ], 4),
-        i.$slots.controls ? (g(), p("div", {
+        n.$slots.controls ? (p(), k("div", {
           key: 0,
           ref: "controlsRef",
-          class: k(["tw-absolute tw-bottom-0 tw-w-full tw-border-t tw-border-tertiary tw-bg-white tw-transition-opacity tw-duration-200", {
+          class: b(["tw-absolute tw-bottom-0 tw-w-full tw-border-t tw-border-tertiary tw-bg-white tw-transition-opacity tw-duration-200", {
             "tw-opacity-0": !t.open,
             "tw-opacity-full": t.open
           }]),
           style: { "z-index": "999" }
         }, [
-          F(i.$slots, "controls")
-        ], 2)) : b("", !0)
+          I(n.$slots, "controls")
+        ], 2)) : x("", !0)
       ], 4)
     ], 6)
-  ], 2)) : b("", !0);
+  ], 2)) : x("", !0);
 }
-const fe = /* @__PURE__ */ ne(ie, [["render", re]]);
+const he = /* @__PURE__ */ ie(le, [["render", de]]);
 export {
-  fe as default
+  he as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.25.0",
+  "version": "6.27.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -111,5 +111,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "39e0e0539d1f84c46faf0ee6f180c9ca5d896464"
+  "gitHead": "72d395ff26891027a90ad3a60728496af4007fc4"
 }