@kiva/kv-components 8.17.1 → 8.18.0

package/dist/index.js

@@ -1,261 +1,266 @@
 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 s } from "./vue/KvButton.js";
+import { default as p } from "./vue/KvButton.js";
 import { default as d } from "./vue/KvCardFrame.js";
 import { default as x } from "./vue/KvCarousel.js";
 import { default as K } from "./vue/KvCartModal.js";
 import { default as A } from "./vue/KvCartPill.js";
 import { default as C } from "./vue/KvCheckbox.js";
 import { default as c } from "./vue/KvCheckoutReceipt.js";
-import { default as N } from "./vue/KvChip.js";
+import { default as L } from "./vue/KvChip.js";
 import { default as E } from "./vue/KvClassicLoanCard.js";
 import { default as M } from "./vue/KvCompactLoanCard.js";
-import { default as I } from "./vue/KvCommentsAdd.js";
-import { default as P } from "./vue/KvCommentsContainer.js";
+import { default as O } from "./vue/KvCommentsAdd.js";
+import { default as g } from "./vue/KvCommentsContainer.js";
 import { default as G } from "./vue/KvCommentsHeartButton.js";
-import { default as F } from "./vue/KvCommentsList.js";
-import { default as B } from "./vue/KvCommentsListItem.js";
-import { default as y } from "./vue/KvCommentsReplyButton.js";
-import { default as k } from "./vue/KvContentfulImg.js";
+import { default as D } from "./vue/KvCommentsList.js";
+import { default as V } from "./vue/KvCommentsListItem.js";
+import { default as U } from "./vue/KvCommentsReplyButton.js";
+import { default as b } from "./vue/KvContentfulImg.js";
 import { default as w } from "./vue/KvCountdownTimer.js";
 import { default as H } from "./vue/KvDatePicker.js";
-import { default as z } from "./vue/KvExpandable.js";
-import { default as Z } from "./vue/KvExpandableQuestion.js";
-import { default as J } from "./vue/KvFlag.js";
-import { default as Y } from "./vue/KvGrid.js";
+import { default as j } from "./vue/KvExpandable.js";
+import { default as Y } from "./vue/KvExpandableQuestion.js";
+import { default as q } from "./vue/KvFlag.js";
+import { default as X } from "./vue/KvGrid.js";
 import { default as ee } from "./vue/KvIconButton.js";
-import { default as re } from "./vue/KvImpactDashboardHeader.js";
-import { default as ae } from "./vue/KvImpactVerticalSelector.js";
-import { default as le } from "./vue/KvInlineActivityCard.js";
-import { default as se } from "./vue/KvInlineActivityFeed.js";
-import { default as de } from "./vue/KvIntroductionLoanCard.js";
-import { default as xe } from "./vue/KvLendAmountButton.js";
-import { default as Ke } from "./vue/KvLendCta.js";
-import { default as Ae } from "./vue/KvLightbox.js";
-import { default as Ce } from "./vue/KvLineGraph.js";
-import { default as ce } from "./vue/KvLoanActivities.js";
-import { default as Ne } from "./vue/KvLoanBookmark.js";
-import { default as Ee } from "./vue/KvLoanCallouts.js";
-import { KV_LOAN_INFO_CARD_FRAGMENT as Me, default as Oe } from "./vue/KvLoanInfoCard.js";
-import { default as Se } from "./vue/KvLoanProgressGroup.js";
-import { default as ge } from "./vue/KvLoanTag.js";
+import { default as re } from "./vue/KvImageUpload.js";
+import { default as ae } from "./vue/KvImpactDashboardHeader.js";
+import { default as le } from "./vue/KvImpactVerticalSelector.js";
+import { default as pe } from "./vue/KvInlineActivityCard.js";
+import { default as de } from "./vue/KvInlineActivityFeed.js";
+import { default as xe } from "./vue/KvIntroductionLoanCard.js";
+import { default as Ke } from "./vue/KvLendAmountButton.js";
+import { default as Ae } from "./vue/KvLendCta.js";
+import { default as Ce } from "./vue/KvLightbox.js";
+import { default as ce } from "./vue/KvLineGraph.js";
+import { default as Le } from "./vue/KvLoanActivities.js";
+import { default as Ee } from "./vue/KvLoanBookmark.js";
+import { default as Me } from "./vue/KvLoanCallouts.js";
+import { KV_LOAN_INFO_CARD_FRAGMENT as Oe, default as Se } from "./vue/KvLoanInfoCard.js";
+import { default as Pe } from "./vue/KvLoanProgressGroup.js";
+import { default as Fe } from "./vue/KvLoanTag.js";
 import { default as he } from "./vue/KvLoanTeamPick.js";
-import { default as Ve } from "./vue/KvLoanUse.js";
-import { default as De } from "./vue/KvLoadingPlaceholder.js";
-import { default as be } from "./vue/KvLoadingSpinner.js";
-import { default as Ue } from "./vue/KvMap.js";
-import { default as We } from "./vue/KvMaterialIcon.js";
-import { default as je } from "./vue/KvSimpleMap.js";
-import { default as Qe } from "./vue/KvPageContainer.js";
-import { default as qe } from "./vue/KvPagination.js";
-import { default as Xe } from "./vue/KvPieChart.js";
-import { default as $e } from "./vue/KvPieChartV2.js";
-import { default as oo } from "./vue/KvPill.js";
-import { default as to } from "./vue/KvPopper.js";
-import { default as fo } from "./vue/KvProgressBar.js";
-import { default as mo } from "./vue/KvProgressCircle.js";
-import { default as po } from "./vue/KvPulsingDot.js";
-import { default as xo } from "./vue/KvRadio.js";
-import { default as Ko } from "./vue/KvSelect.js";
-import { default as Ao } from "./vue/KvSideSheet.js";
-import { default as Co } from "./vue/KvSwitch.js";
-import { default as co } from "./vue/KvTab.js";
-import { default as No } from "./vue/KvTabPanel.js";
-import { default as Eo } from "./vue/KvTabs.js";
-import { default as Mo } from "./vue/KvTextInput.js";
-import { default as Io } from "./vue/KvTextLink.js";
-import { default as Po } from "./vue/KvThemeProvider.js";
-import { default as Go } from "./vue/KvToast.js";
-import { default as Fo } from "./vue/KvTooltip.js";
-import { default as Bo } from "./vue/KvTreeMapChart.js";
-import { default as yo } from "./vue/KvUserAvatar.js";
-import { default as ko } from "./vue/KvUtilityMenu.js";
-import { default as wo } from "./vue/KvVerticalCarousel.js";
-import { default as Ho } from "./vue/KvVotingCard.js";
-import { default as zo } from "./vue/KvVotingCardV2.js";
-import { default as Zo } from "./vue/KvWideLoanCard.js";
-import { default as Jo } from "./vue/KvAtbModal.js";
-import { default as Yo } from "./vue/KvSecondaryNav.js";
-import { default as er } from "./vue/KvWwwHeader.js";
-import { default as rr } from "./vue/KvWwwHeaderBasic/KvWwwHeaderBasic.js";
-import { default as ar, Mash as fr } from "./utils/Alea.js";
-import { groupBy as mr, sortBy as sr } from "./utils/arrayUtils.js";
-import { useAttrs as dr } from "./utils/attrs.js";
-import { carouselUtil as xr } from "./utils/carousels.js";
-import { abc as Kr, indexIn as vr, startsWith as Ar } from "./utils/comparators.js";
-import { debounce as Cr } from "./utils/debounce.js";
-import { useEventListener as cr } from "./utils/event.js";
-import { collapse as Nr, expand as Tr } from "./utils/expander.js";
-import { getKivaImageUrl as Rr, isLegacyPlaceholderAvatar as Mr, randomizedUserAvatarClass as Or } from "./utils/imageUtils.js";
-import { LOAN_CALLOUTS_FRAGMENT as Sr, LOAN_GEOCODE_FRAGMENT as Pr, LOAN_PROGRESS_FRAGMENT as gr, loanCardComputedProperties as Gr, loanCardMethods as hr } from "./utils/loanCard.js";
-import { BALANCE_CAMPAIGN as Vr, BASE_CAMPAIGN as Br, ERL_COOKIE_NAME as Dr, NO_BALANCE_CAMPAIGN as yr, TOP_UP_CAMPAIGN as br, getDropdownPriceArray as kr, getLendCtaSelectedOption as Ur, isBetween25And50 as wr, isLessThan25 as Wr, truncateStringByWords as Hr } from "./utils/loanUtils.js";
-import { animationCoordinator as zr, computeMapCenter as Qr, computeMapZoom as Zr, generateMapMarkers as qr, getCoordinatesBetween as Jr, getCountryColor as Xr, getLoansIntervals as Yr } from "./utils/mapUtils.js";
-import { lockPrintSingleEl as et, unlockPrintSingleEl as ot } from "./utils/printing.js";
-import { lockScroll as tt, lockScrollSmallOnly as at, unlockScroll as ft, unlockScrollSmallOnly as lt } from "./utils/scrollLock.js";
-import { buildTailwindClassName as st, headerNumberCase as pt, kebabCase as dt, removeObjectProperty as ut } from "./utils/themeUtils.js";
-import { throttle as nt } from "./utils/throttle.js";
-import { isTargetElement as vt, offBodyTouchstart as At, onBodyTouchstart as it } from "./utils/touchEvents.js";
-import { getTreemap as _t } from "./utils/treemap.js";
-import { KvBlueskyIcon as Lt } from "./assets/icons/bluesky.js";
-import { KV_CLASSIC_LOAN_CARD_FRAGMENT as Tt, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as Et } from "./vue/KvClassicLoanCard2.js";
-import { KV_COMPACT_LOAN_CARD_FRAGMENT as Mt, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as Ot } from "./vue/KvCompactLoanCard2.js";
-import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as St, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as Pt } from "./vue/KvIntroductionLoanCard2.js";
-import { KV_LEND_CTA_FRAGMENT as Gt, KV_LEND_CTA_USER_FRAGMENT as ht } from "./vue/KvLendCta2.js";
-import { KV_LOAN_ACTIVITIES_FRAGMENT as Vt } from "./vue/KvLoanActivities2.js";
-import { KV_LOAN_BOOKMARK_FRAGMENT as Dt } from "./vue/KvLoanBookmark2.js";
-import { KV_LOAN_TAG_FRAGMENT as bt } from "./vue/KvLoanTag2.js";
-import { KV_LOAN_USE_FRAGMENT as Ut } from "./vue/KvLoanUse2.js";
-import { KV_WIDE_LOAN_CARD_FRAGMENT as Wt, KV_WIDE_LOAN_CARD_USER_FRAGMENT as Ht } from "./vue/KvWideLoanCard2.js";
+import { default as Be } from "./vue/KvLoanUse.js";
+import { default as ye } from "./vue/KvLoadingPlaceholder.js";
+import { default as ke } from "./vue/KvLoadingSpinner.js";
+import { default as We } from "./vue/KvMap.js";
+import { default as ze } from "./vue/KvMaterialIcon.js";
+import { default as Qe } from "./vue/KvSimpleMap.js";
+import { default as Ze } from "./vue/KvPageContainer.js";
+import { default as Je } from "./vue/KvPagination.js";
+import { default as $e } from "./vue/KvPieChart.js";
+import { default as oo } from "./vue/KvPieChartV2.js";
+import { default as to } from "./vue/KvPill.js";
+import { default as fo } from "./vue/KvPopper.js";
+import { default as mo } from "./vue/KvProgressBar.js";
+import { default as so } from "./vue/KvProgressCircle.js";
+import { default as xo } from "./vue/KvPulsingDot.js";
+import { default as Ko } from "./vue/KvRadio.js";
+import { default as Ao } from "./vue/KvSelect.js";
+import { default as Co } from "./vue/KvSideSheet.js";
+import { default as co } from "./vue/KvSwitch.js";
+import { default as Lo } from "./vue/KvTab.js";
+import { default as Eo } from "./vue/KvTabPanel.js";
+import { default as Mo } from "./vue/KvTabs.js";
+import { default as Oo } from "./vue/KvTextInput.js";
+import { default as go } from "./vue/KvTextLink.js";
+import { default as Go } from "./vue/KvThemeProvider.js";
+import { default as Do } from "./vue/KvToast.js";
+import { default as Vo } from "./vue/KvTooltip.js";
+import { default as Uo } from "./vue/KvTreeMapChart.js";
+import { default as bo } from "./vue/KvUserAvatar.js";
+import { default as wo } from "./vue/KvUtilityMenu.js";
+import { default as Ho } from "./vue/KvVerticalCarousel.js";
+import { default as jo } from "./vue/KvVotingCard.js";
+import { default as Yo } from "./vue/KvVotingCardV2.js";
+import { default as qo } from "./vue/KvWideLoanCard.js";
+import { default as Xo } from "./vue/KvAtbModal.js";
+import { default as er } from "./vue/KvSecondaryNav.js";
+import { default as rr } from "./vue/KvWwwHeader.js";
+import { default as ar } from "./vue/KvWwwHeaderBasic/KvWwwHeaderBasic.js";
+import { default as lr, Mash as mr } from "./utils/Alea.js";
+import { groupBy as sr, sortBy as dr } from "./utils/arrayUtils.js";
+import { useAttrs as xr } from "./utils/attrs.js";
+import { carouselUtil as Kr } from "./utils/carousels.js";
+import { abc as Ar, indexIn as ir, startsWith as Cr } from "./utils/comparators.js";
+import { debounce as cr } from "./utils/debounce.js";
+import { useEventListener as Lr } from "./utils/event.js";
+import { collapse as Er, expand as Rr } from "./utils/expander.js";
+import { DEFAULT_ACCEPTED_IMAGE_TYPES as Ir, cropResizeImageToDataUrl as Or, getKivaImageUrl as Sr, isLegacyPlaceholderAvatar as gr, randomizedUserAvatarClass as Pr, validateImageFile as Gr } from "./utils/imageUtils.js";
+import { LOAN_CALLOUTS_FRAGMENT as Dr, LOAN_GEOCODE_FRAGMENT as hr, LOAN_PROGRESS_FRAGMENT as Vr, loanCardComputedProperties as Br, loanCardMethods as Ur } from "./utils/loanCard.js";
+import { BALANCE_CAMPAIGN as br, BASE_CAMPAIGN as kr, ERL_COOKIE_NAME as wr, NO_BALANCE_CAMPAIGN as Wr, TOP_UP_CAMPAIGN as Hr, getDropdownPriceArray as zr, getLendCtaSelectedOption as jr, isBetween25And50 as Qr, isLessThan25 as Yr, truncateStringByWords as Zr } from "./utils/loanUtils.js";
+import { animationCoordinator as Jr, computeMapCenter as Xr, computeMapZoom as $r, generateMapMarkers as et, getCoordinatesBetween as ot, getCountryColor as rt, getLoansIntervals as tt } from "./utils/mapUtils.js";
+import { lockPrintSingleEl as ft, unlockPrintSingleEl as lt } from "./utils/printing.js";
+import { lockScroll as pt, lockScrollSmallOnly as st, unlockScroll as dt, unlockScrollSmallOnly as ut } from "./utils/scrollLock.js";
+import { buildTailwindClassName as nt, headerNumberCase as Kt, kebabCase as vt, removeObjectProperty as At } from "./utils/themeUtils.js";
+import { throttle as Ct } from "./utils/throttle.js";
+import { isTargetElement as ct, offBodyTouchstart as Tt, onBodyTouchstart as Lt } from "./utils/touchEvents.js";
+import { getTreemap as Et } from "./utils/treemap.js";
+import { KvBlueskyIcon as Mt } from "./assets/icons/bluesky.js";
+import { KV_CLASSIC_LOAN_CARD_FRAGMENT as Ot, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as St } from "./vue/KvClassicLoanCard2.js";
+import { KV_COMPACT_LOAN_CARD_FRAGMENT as Pt, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as Gt } from "./vue/KvCompactLoanCard2.js";
+import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as Dt, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as ht } from "./vue/KvIntroductionLoanCard2.js";
+import { KV_LEND_CTA_FRAGMENT as Bt, KV_LEND_CTA_USER_FRAGMENT as Ut } from "./vue/KvLendCta2.js";
+import { KV_LOAN_ACTIVITIES_FRAGMENT as bt } from "./vue/KvLoanActivities2.js";
+import { KV_LOAN_BOOKMARK_FRAGMENT as wt } from "./vue/KvLoanBookmark2.js";
+import { KV_LOAN_TAG_FRAGMENT as Ht } from "./vue/KvLoanTag2.js";
+import { KV_LOAN_USE_FRAGMENT as jt } from "./vue/KvLoanUse2.js";
+import { KV_WIDE_LOAN_CARD_FRAGMENT as Yt, KV_WIDE_LOAN_CARD_USER_FRAGMENT as Zt } from "./vue/KvWideLoanCard2.js";
 export {
-  ar as Alea,
-  Vr as BALANCE_CAMPAIGN,
-  Br as BASE_CAMPAIGN,
-  Dr as ERL_COOKIE_NAME,
-  Tt as KV_CLASSIC_LOAN_CARD_FRAGMENT,
-  Et as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
-  Mt as KV_COMPACT_LOAN_CARD_FRAGMENT,
-  Ot as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
-  St as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
-  Pt as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
-  Gt as KV_LEND_CTA_FRAGMENT,
-  ht as KV_LEND_CTA_USER_FRAGMENT,
-  Vt as KV_LOAN_ACTIVITIES_FRAGMENT,
-  Dt as KV_LOAN_BOOKMARK_FRAGMENT,
-  Me as KV_LOAN_INFO_CARD_FRAGMENT,
-  bt as KV_LOAN_TAG_FRAGMENT,
-  Ut as KV_LOAN_USE_FRAGMENT,
-  Wt as KV_WIDE_LOAN_CARD_FRAGMENT,
-  Ht as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
+  lr as Alea,
+  br as BALANCE_CAMPAIGN,
+  kr as BASE_CAMPAIGN,
+  Ir as DEFAULT_ACCEPTED_IMAGE_TYPES,
+  wr as ERL_COOKIE_NAME,
+  Ot as KV_CLASSIC_LOAN_CARD_FRAGMENT,
+  St as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
+  Pt as KV_COMPACT_LOAN_CARD_FRAGMENT,
+  Gt as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  Dt as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
+  ht as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
+  Bt as KV_LEND_CTA_FRAGMENT,
+  Ut as KV_LEND_CTA_USER_FRAGMENT,
+  bt as KV_LOAN_ACTIVITIES_FRAGMENT,
+  wt as KV_LOAN_BOOKMARK_FRAGMENT,
+  Oe as KV_LOAN_INFO_CARD_FRAGMENT,
+  Ht as KV_LOAN_TAG_FRAGMENT,
+  jt as KV_LOAN_USE_FRAGMENT,
+  Yt as KV_WIDE_LOAN_CARD_FRAGMENT,
+  Zt as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
   r as KvAccordionItem,
   a as KvActivityRow,
-  Jo as KvAtbModal,
-  Lt as KvBlueskyIcon,
+  Xo as KvAtbModal,
+  Mt as KvBlueskyIcon,
   l as KvBorrowerImage,
-  s as KvButton,
+  p as KvButton,
   d as KvCardFrame,
   x as KvCarousel,
   K as KvCartModal,
   A as KvCartPill,
   C as KvCheckbox,
   c as KvCheckoutReceipt,
-  N as KvChip,
+  L as KvChip,
   E as KvClassicLoanCard,
-  I as KvCommentsAdd,
-  P as KvCommentsContainer,
+  O as KvCommentsAdd,
+  g as KvCommentsContainer,
   G as KvCommentsHeartButton,
-  F as KvCommentsList,
-  B as KvCommentsListItem,
-  y as KvCommentsReplyButton,
+  D as KvCommentsList,
+  V as KvCommentsListItem,
+  U as KvCommentsReplyButton,
   M as KvCompactLoanCard,
-  k as KvContentfulImg,
+  b as KvContentfulImg,
   w as KvCountdownTimer,
   H as KvDatePicker,
-  z as KvExpandable,
-  Z as KvExpandableQuestion,
-  J as KvFlag,
-  Y as KvGrid,
+  j as KvExpandable,
+  Y as KvExpandableQuestion,
+  q as KvFlag,
+  X as KvGrid,
   ee as KvIconButton,
-  re as KvImpactDashboardHeader,
-  ae as KvImpactVerticalSelector,
-  le as KvInlineActivityCard,
-  se as KvInlineActivityFeed,
-  de as KvIntroductionLoanCard,
-  xe as KvLendAmountButton,
-  Ke as KvLendCta,
-  Ae as KvLightbox,
-  Ce as KvLineGraph,
-  De as KvLoadingPlaceholder,
-  be as KvLoadingSpinner,
-  ce as KvLoanActivities,
-  Ne as KvLoanBookmark,
-  Ee as KvLoanCallouts,
-  Oe as KvLoanInfoCard,
-  Se as KvLoanProgressGroup,
-  ge as KvLoanTag,
+  re as KvImageUpload,
+  ae as KvImpactDashboardHeader,
+  le as KvImpactVerticalSelector,
+  pe as KvInlineActivityCard,
+  de as KvInlineActivityFeed,
+  xe as KvIntroductionLoanCard,
+  Ke as KvLendAmountButton,
+  Ae as KvLendCta,
+  Ce as KvLightbox,
+  ce as KvLineGraph,
+  ye as KvLoadingPlaceholder,
+  ke as KvLoadingSpinner,
+  Le as KvLoanActivities,
+  Ee as KvLoanBookmark,
+  Me as KvLoanCallouts,
+  Se as KvLoanInfoCard,
+  Pe as KvLoanProgressGroup,
+  Fe as KvLoanTag,
   he as KvLoanTeamPick,
-  Ve as KvLoanUse,
-  Ue as KvMap,
-  We as KvMaterialIcon,
-  Qe as KvPageContainer,
-  qe as KvPagination,
-  Xe as KvPieChart,
-  $e as KvPieChartV2,
-  oo as KvPill,
-  to as KvPopper,
-  fo as KvProgressBar,
-  mo as KvProgressCircle,
-  po as KvPulsingDot,
-  xo as KvRadio,
-  Yo as KvSecondaryNav,
-  Ko as KvSelect,
-  Ao as KvSideSheet,
-  je as KvSimpleMap,
-  Co as KvSwitch,
-  co as KvTab,
-  No as KvTabPanel,
-  Eo as KvTabs,
-  Mo as KvTextInput,
-  Io as KvTextLink,
-  Po as KvThemeProvider,
-  Go as KvToast,
-  Fo as KvTooltip,
-  Bo as KvTreeMapChart,
-  yo as KvUserAvatar,
-  ko as KvUtilityMenu,
-  wo as KvVerticalCarousel,
-  Ho as KvVotingCard,
-  zo as KvVotingCardV2,
-  Zo as KvWideLoanCard,
-  er as KvWwwHeader,
-  rr as KvWwwHeaderBasic,
-  Sr as LOAN_CALLOUTS_FRAGMENT,
-  Pr as LOAN_GEOCODE_FRAGMENT,
-  gr as LOAN_PROGRESS_FRAGMENT,
-  fr as Mash,
-  yr as NO_BALANCE_CAMPAIGN,
-  br as TOP_UP_CAMPAIGN,
-  Kr as abc,
-  zr as animationCoordinator,
-  st as buildTailwindClassName,
-  xr as carouselUtil,
-  Nr as collapse,
-  Qr as computeMapCenter,
-  Zr as computeMapZoom,
-  Cr as debounce,
-  Tr as expand,
-  qr as generateMapMarkers,
-  Jr as getCoordinatesBetween,
-  Xr as getCountryColor,
-  kr as getDropdownPriceArray,
-  Rr as getKivaImageUrl,
-  Ur as getLendCtaSelectedOption,
-  Yr as getLoansIntervals,
-  _t as getTreemap,
-  mr as groupBy,
-  pt as headerNumberCase,
-  vr as indexIn,
-  wr as isBetween25And50,
-  Mr as isLegacyPlaceholderAvatar,
-  Wr as isLessThan25,
-  vt as isTargetElement,
-  dt as kebabCase,
-  Gr as loanCardComputedProperties,
-  hr as loanCardMethods,
-  et as lockPrintSingleEl,
-  tt as lockScroll,
-  at as lockScrollSmallOnly,
-  At as offBodyTouchstart,
-  it as onBodyTouchstart,
-  Or as randomizedUserAvatarClass,
-  ut as removeObjectProperty,
-  sr as sortBy,
-  Ar as startsWith,
-  nt as throttle,
-  Hr as truncateStringByWords,
-  ot as unlockPrintSingleEl,
-  ft as unlockScroll,
-  lt as unlockScrollSmallOnly,
-  dr as useAttrs,
-  cr as useEventListener
+  Be as KvLoanUse,
+  We as KvMap,
+  ze as KvMaterialIcon,
+  Ze as KvPageContainer,
+  Je as KvPagination,
+  $e as KvPieChart,
+  oo as KvPieChartV2,
+  to as KvPill,
+  fo as KvPopper,
+  mo as KvProgressBar,
+  so as KvProgressCircle,
+  xo as KvPulsingDot,
+  Ko as KvRadio,
+  er as KvSecondaryNav,
+  Ao as KvSelect,
+  Co as KvSideSheet,
+  Qe as KvSimpleMap,
+  co as KvSwitch,
+  Lo as KvTab,
+  Eo as KvTabPanel,
+  Mo as KvTabs,
+  Oo as KvTextInput,
+  go as KvTextLink,
+  Go as KvThemeProvider,
+  Do as KvToast,
+  Vo as KvTooltip,
+  Uo as KvTreeMapChart,
+  bo as KvUserAvatar,
+  wo as KvUtilityMenu,
+  Ho as KvVerticalCarousel,
+  jo as KvVotingCard,
+  Yo as KvVotingCardV2,
+  qo as KvWideLoanCard,
+  rr as KvWwwHeader,
+  ar as KvWwwHeaderBasic,
+  Dr as LOAN_CALLOUTS_FRAGMENT,
+  hr as LOAN_GEOCODE_FRAGMENT,
+  Vr as LOAN_PROGRESS_FRAGMENT,
+  mr as Mash,
+  Wr as NO_BALANCE_CAMPAIGN,
+  Hr as TOP_UP_CAMPAIGN,
+  Ar as abc,
+  Jr as animationCoordinator,
+  nt as buildTailwindClassName,
+  Kr as carouselUtil,
+  Er as collapse,
+  Xr as computeMapCenter,
+  $r as computeMapZoom,
+  Or as cropResizeImageToDataUrl,
+  cr as debounce,
+  Rr as expand,
+  et as generateMapMarkers,
+  ot as getCoordinatesBetween,
+  rt as getCountryColor,
+  zr as getDropdownPriceArray,
+  Sr as getKivaImageUrl,
+  jr as getLendCtaSelectedOption,
+  tt as getLoansIntervals,
+  Et as getTreemap,
+  sr as groupBy,
+  Kt as headerNumberCase,
+  ir as indexIn,
+  Qr as isBetween25And50,
+  gr as isLegacyPlaceholderAvatar,
+  Yr as isLessThan25,
+  ct as isTargetElement,
+  vt as kebabCase,
+  Br as loanCardComputedProperties,
+  Ur as loanCardMethods,
+  ft as lockPrintSingleEl,
+  pt as lockScroll,
+  st as lockScrollSmallOnly,
+  Tt as offBodyTouchstart,
+  Lt as onBodyTouchstart,
+  Pr as randomizedUserAvatarClass,
+  At as removeObjectProperty,
+  dr as sortBy,
+  Cr as startsWith,
+  Ct as throttle,
+  Zr as truncateStringByWords,
+  lt as unlockPrintSingleEl,
+  dt as unlockScroll,
+  ut as unlockScrollSmallOnly,
+  xr as useAttrs,
+  Lr as useEventListener,
+  Gr as validateImageFile
 };

package/dist/utils/imageUtils.d.ts

@@ -9,3 +9,22 @@ export declare function getKivaImageUrl({ base, width, height, square, faceZoom,
     hash: string;
     format?: string;
 }): string;
+export declare const DEFAULT_ACCEPTED_IMAGE_TYPES: string[];
+export interface ImageFileValidationOptions {
+    maxSizeMb?: number;
+    acceptedFileTypes?: string[];
+}
+export interface ImageFileValidationError {
+    type: 'size' | 'format';
+    message: string;
+}
+export interface ImageFileValidationResult {
+    valid: boolean;
+    error?: ImageFileValidationError;
+}
+export declare function validateImageFile(file: File, { maxSizeMb, acceptedFileTypes, }?: ImageFileValidationOptions): ImageFileValidationResult;
+export interface CropResizeOptions {
+    aspectRatio?: number;
+    maxDimension?: number;
+}
+export declare function cropResizeImageToDataUrl(file: File, { aspectRatio, maxDimension }?: CropResizeOptions): Promise<string>;

package/dist/utils/imageUtils.js

@@ -1,12 +1,12 @@
-import s from "./Alea.js";
-function $(o) {
-  if (!o)
+import b from "./Alea.js";
+function p(a) {
+  if (!a)
     return !1;
-  let t = o.toString();
+  let t = a.toString();
   return t.includes(".") && ([t] = t.split(".")), ["726677", "315726", "4d844ac2c0b77a8a522741b908ea5c32"].includes(t);
 }
-function w(o = "") {
-  const t = s(o), r = [
+function $(a = "") {
+  const t = b(a), e = [
     { color: "tw-text-action", bg: "tw-bg-brand-100" },
     { color: "tw-text-black", bg: "tw-bg-brand-100" },
     { color: "tw-text-white", bg: "tw-bg-action" },
@@ -14,27 +14,74 @@ function w(o = "") {
     { color: "tw-text-primary-inverse", bg: "tw-bg-action" },
     { color: "tw-text-white", bg: "tw-bg-black" },
     { color: "tw-text-action", bg: "tw-bg-black" }
-  ], e = r[Math.floor(t() * r.length)];
-  return `${e.color} ${e.bg}`;
+  ], n = e[Math.floor(t() * e.length)];
+  return `${n.color} ${n.bg}`;
 }
-function d({
-  base: o = "/img/",
+function h({
+  base: a = "/img/",
   width: t,
-  height: r,
-  square: e,
-  faceZoom: l,
-  hash: n,
-  format: b = "jpg"
+  height: e,
+  square: n,
+  faceZoom: o,
+  hash: l,
+  format: r = "jpg"
 }) {
-  if (!n || !t && !r && !e && !l)
+  if (!l || !t && !e && !n && !o)
     return "";
-  let c = "", a = "";
-  t && r && t === r ? e = t : (c = t ? `w${Math.ceil(t)}` : "", a = r ? `h${Math.ceil(r)}` : "");
-  const i = e ? `s${Math.ceil(e)}` : "", g = l && (t || r || e) ? `fz${Math.ceil(l)}` : "";
-  return `${o}${c}${a}${i}${g}/${n}.${b}`;
+  let c = "", s = "";
+  t && e && t === e ? n = t : (c = t ? `w${Math.ceil(t)}` : "", s = e ? `h${Math.ceil(e)}` : "");
+  const d = n ? `s${Math.ceil(n)}` : "", g = o && (t || e || n) ? `fz${Math.ceil(o)}` : "";
+  return `${a}${c}${s}${d}${g}/${l}.${r}`;
+}
+const m = ["image/png", "image/jpeg", "image/jpg", "image/gif"];
+function v(a, {
+  maxSizeMb: t = 1,
+  acceptedFileTypes: e = m
+} = {}) {
+  return a.size > t * 1024 * 1024 ? {
+    valid: !1,
+    error: { type: "size", message: `File size must be less than ${t}MB` }
+  } : e.includes(a.type) ? { valid: !0 } : {
+    valid: !1,
+    error: { type: "format", message: "File format not supported" }
+  };
+}
+function x(a, { aspectRatio: t = 1, maxDimension: e = 1e3 } = {}) {
+  return new Promise((n, o) => {
+    const l = new FileReader();
+    l.onerror = () => o(new Error("Failed to read file")), l.onload = () => {
+      const r = new Image();
+      r.onerror = () => o(new Error("Failed to read file")), r.onload = () => {
+        const c = r.naturalWidth / r.naturalHeight;
+        let s = 0, d = 0, g = r.naturalWidth, u = r.naturalHeight;
+        c > t ? (g = r.naturalHeight * t, s = (r.naturalWidth - g) / 2) : c < t && (u = r.naturalWidth / t, d = (r.naturalHeight - u) / 2);
+        const i = document.createElement("canvas");
+        i.width = e * 2, i.height = i.width / t;
+        const f = i.getContext("2d");
+        if (!f) {
+          o(new Error("Failed to process image"));
+          return;
+        }
+        f.drawImage(
+          r,
+          s,
+          d,
+          g,
+          u,
+          0,
+          0,
+          i.width,
+          i.height
+        ), n(i.toDataURL(a.type));
+      }, r.src = l.result;
+    }, l.readAsDataURL(a);
+  });
 }
 export {
-  d as getKivaImageUrl,
-  $ as isLegacyPlaceholderAvatar,
-  w as randomizedUserAvatarClass
+  m as DEFAULT_ACCEPTED_IMAGE_TYPES,
+  x as cropResizeImageToDataUrl,
+  h as getKivaImageUrl,
+  p as isLegacyPlaceholderAvatar,
+  $ as randomizedUserAvatarClass,
+  v as validateImageFile
 };

package/dist/vue/KvImageUpload.css

@@ -0,0 +1 @@
+.image-upload-icon[data-v-ea802cf6]{background-color:#ffffffbf;border-radius:9px;display:flex;align-items:center;justify-content:center;border-radius:.5rem}.image-upload-icon--circle[data-v-ea802cf6]{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 4px 0 rgb(0 0 0 / .08);--tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}

package/dist/vue/KvImageUpload.js

@@ -0,0 +1,72 @@
+import p from "./KvImageUpload2.js";
+import { resolveComponent as f, openBlock as i, createElementBlock as n, createElementVNode as a, normalizeClass as l, normalizeStyle as g, renderSlot as b, createVNode as c, withModifiers as w, createCommentVNode as m } from "vue";
+import "./KvImageUpload.css";
+import u from "../_virtual/_plugin-vue_export-helper.js";
+const v = { class: "tw-flex tw-flex-col" }, h = ["src", "alt"], C = ["accept", "aria-label"];
+function k(d, t, s, e, I, _) {
+  const r = f("kv-material-icon");
+  return i(), n("div", v, [
+    a("div", {
+      class: l(["kv-image-upload tw-relative", e.shapeClass]),
+      style: g(e.containerStyle)
+    }, [
+      e.previewImage ? (i(), n("img", {
+        key: 0,
+        src: e.previewImage,
+        alt: s.imageAlt,
+        class: l(["tw-w-full tw-h-full tw-object-cover", e.shapeClass])
+      }, null, 10, h)) : b(d.$slots, "fallback-image", { key: 1 }, () => [
+        a("div", {
+          class: l(["kv-image-upload__placeholder tw-w-full tw-h-full tw-bg-eco-green-1 tw-p-0.5", e.shapeClass])
+        }, [
+          a("div", {
+            class: l(["tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-0.5 tw-w-full tw-h-full tw-border-2 tw-border-dashed tw-border-black", e.shapeClass])
+          }, [
+            c(r, {
+              icon: e.mdiCameraPlusOutline,
+              class: "tw-w-3.5"
+            }, null, 8, ["icon"]),
+            t[3] || (t[3] = a("span", { class: "tw-text-label" }, " Add a photo ", -1))
+          ], 2)
+        ], 2)
+      ], !0),
+      a("input", {
+        ref: "fileInput",
+        type: "file",
+        accept: e.acceptAttr,
+        "aria-label": e.inputLabel,
+        class: "tw-absolute tw-inset-0 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer",
+        onChange: t[0] || (t[0] = (...o) => e.handleFileChange && e.handleFileChange(...o))
+      }, null, 40, C),
+      e.previewImage || s.showEditIcon ? (i(), n("button", {
+        key: 2,
+        class: l(["image-upload-icon edit-icon tw-absolute tw-bottom-1 tw-right-1 tw-p-1 tw-z-10", { "image-upload-icon--circle": e.isCircle }]),
+        type: "button",
+        "aria-hidden": "true",
+        tabindex: "-1",
+        onClick: t[1] || (t[1] = w((...o) => e.openFileInput && e.openFileInput(...o), ["stop"]))
+      }, [
+        c(r, {
+          icon: e.mdiPencil,
+          class: "tw-w-2"
+        }, null, 8, ["icon"])
+      ], 2)) : m("", !0),
+      e.previewImage ? (i(), n("button", {
+        key: 3,
+        class: l(["image-upload-icon remove-icon tw-absolute tw-top-1 tw-right-1 tw-p-1 tw-z-10", { "image-upload-icon--circle": e.isCircle }]),
+        type: "button",
+        "aria-label": "Remove Image",
+        onClick: t[2] || (t[2] = w((...o) => e.removeImage && e.removeImage(...o), ["stop"]))
+      }, [
+        c(r, {
+          icon: e.mdiClose,
+          class: "tw-w-2"
+        }, null, 8, ["icon"])
+      ], 2)) : m("", !0)
+    ], 6)
+  ]);
+}
+const A = /* @__PURE__ */ u(p, [["render", k], ["__scopeId", "data-v-ea802cf6"]]);
+export {
+  A as default
+};

package/dist/vue/KvImageUpload2.js

@@ -0,0 +1,150 @@
+import { toRefs as S, ref as u, watch as x, computed as l } from "vue";
+import { mdiPencil as F, mdiClose as w, mdiCameraPlusOutline as I } from "@mdi/js";
+import C from "./KvMaterialIcon.js";
+import { DEFAULT_ACCEPTED_IMAGE_TYPES as b, validateImageFile as R, cropResizeImageToDataUrl as T } from "../utils/imageUtils.js";
+const U = {
+  components: {
+    KvMaterialIcon: C
+  },
+  props: {
+    /**
+     * URL of an initial image to preview.
+     */
+    imageUrl: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Target crop aspect ratio (width / height). `1` = square, `4 / 3` ≈ 1.333.
+     */
+    aspectRatio: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Preview shape. `square (default), circle`
+     */
+    shape: {
+      type: String,
+      default: "square",
+      validator(e) {
+        return ["square", "circle"].includes(e);
+      }
+    },
+    /**
+     * Maximum allowed file size, in megabytes.
+     */
+    maxSizeMb: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Output resolution used when generating the preview.
+     */
+    maxDimension: {
+      type: Number,
+      default: 1e3
+    },
+    /**
+     * Maximum rendered preview size, in pixels (height; width follows aspectRatio).
+     * Note: the parent element must supply a width; this component sets only
+     * max-width/max-height + aspect-ratio and will not stretch to fill a sizeless container.
+     */
+    previewSize: {
+      type: Number,
+      default: 200
+    },
+    /**
+     * Accepted MIME types for both the file input and validation.
+     */
+    acceptedFileTypes: {
+      type: Array,
+      default: () => [...b]
+    },
+    /**
+     * Whether to show the edit (pencil) affordance in the blank state, before an image is
+     * selected. Off by default. Once an image is present the edit icon always shows
+     * (bottom-right, below the remove icon), regardless of this prop.
+     */
+    showEditIcon: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Alt text for the preview image.
+     */
+    imageAlt: {
+      type: String,
+      default: "Image preview"
+    }
+  },
+  emits: [
+    /**
+     * Emitted with `{ file }` when a valid file is selected or dropped.
+     */
+    "file-uploaded",
+    /**
+     * Emitted when the current image is removed.
+     */
+    "file-removed",
+    /**
+     * Emitted with `{ type, message }` when validation or processing fails.
+     */
+    "file-error"
+  ],
+  setup(e, { emit: r }) {
+    const { imageUrl: c } = S(e), a = u(c.value || ""), s = u(null);
+    x(c, (t) => {
+      a.value = t || "";
+    });
+    const m = l(() => e.shape === "circle"), d = l(() => m.value ? "tw-rounded-full" : "tw-rounded"), p = l(() => e.acceptedFileTypes.join(",")), f = l(() => a.value ? "Change image" : "Upload image"), g = l(() => ({
+      aspectRatio: String(e.aspectRatio),
+      maxHeight: `${e.previewSize}px`,
+      maxWidth: `${e.previewSize * e.aspectRatio}px`
+    })), v = () => {
+      var t;
+      (t = s.value) == null || t.click();
+    }, y = () => {
+      a.value = "", r("file-removed");
+    }, h = async (t) => {
+      const { valid: o, error: i } = R(t, {
+        maxSizeMb: e.maxSizeMb,
+        acceptedFileTypes: e.acceptedFileTypes
+      });
+      if (!o && i) {
+        r("file-error", i);
+        return;
+      }
+      try {
+        a.value = await T(t, {
+          aspectRatio: e.aspectRatio,
+          maxDimension: e.maxDimension
+        }), r("file-uploaded", { file: t });
+      } catch {
+        r("file-error", { type: "other", message: "Failed to read file" });
+      }
+    };
+    return {
+      mdiPencil: F,
+      mdiClose: w,
+      mdiCameraPlusOutline: I,
+      fileInput: s,
+      previewImage: a,
+      isCircle: m,
+      shapeClass: d,
+      acceptAttr: p,
+      inputLabel: f,
+      containerStyle: g,
+      openFileInput: v,
+      removeImage: y,
+      handleFileChange: (t) => {
+        var n;
+        const o = t.target, i = (n = o.files) == null ? void 0 : n[0];
+        i && (h(i), o.value = "");
+      }
+    };
+  }
+};
+export {
+  U as default
+};

package/dist/vue/KvPieChartV2.vue.d.ts

@@ -115,8 +115,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>> & Readonly<{}>, {
     values: KvPieChartV2Item[];
     loading: boolean;
-    initialDelay: number;
     strokeWidth: number;
+    initialDelay: number;
     unit: PieChartUnit;
     shownSegments: number;
     segmentGap: number;

package/dist/vue/index.d.ts

@@ -27,6 +27,7 @@ export { default as KvExpandableQuestion } from './KvExpandableQuestion.vue';
 export { default as KvFlag } from './KvFlag.vue';
 export { default as KvGrid } from './KvGrid.vue';
 export { default as KvIconButton } from './KvIconButton.vue';
+export { default as KvImageUpload } from './KvImageUpload.vue';
 export { default as KvImpactDashboardHeader } from './KvImpactDashboardHeader.vue';
 export { default as KvImpactVerticalSelector } from './KvImpactVerticalSelector.vue';
 export { default as KvInlineActivityCard } from './KvInlineActivityCard.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.17.1",
+  "version": "8.18.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -128,5 +128,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "b717eef77a82336fd6df9908773911555f431a71"
+  "gitHead": "34c0c8109e5d079a5d08fedda139c2ecee8fdc8e"
 }