feat: ecosystem themes with new default styles

.eslintrc.cjs

@@ -50,6 +50,7 @@ module.exports = {
 			alias: {
 				map: [
 					['#src', resolve('src')],
+					['#kv-components', resolve('node_modules/@kiva/kv-components/dist/components')],
 				],
 				extensions: ['.js', '.mjs', '.vue'],
 			},

.storybook/preview.js

@@ -2,7 +2,7 @@ import { setup } from '@storybook/vue3';
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { VueHeadMixin, createHead } from '@unhead/vue';
 import { createRouter, createWebHistory } from 'vue-router';
-import KvThemeProvider from '@kiva/kv-components/vue/KvThemeProvider.vue';
+import KvThemeProvider from '#kv-components/KvThemeProvider';
 import { defaultTheme } from '@kiva/kv-tokens/configs/kivaColors.cjs';
 import changeCaseFilter from '../src/plugins/change-case-filter';
 import numeralFilter from '../src/plugins/numeral-filter';

.storybook/stories/KivaClassicSingleCategoryCarousel.stories.js

@@ -1,8 +1,8 @@
 import KivaClassicSingleCategoryCarousel from '#src/components/LoanCollections/KivaClassicSingleCategoryCarousel.vue';
 import apolloStoryMixin from '../mixins/apollo-story-mixin';
 import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
-import KvGrid from '@kiva/kv-components/vue/KvGrid';
-import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer';
+import KvGrid from '#kv-components/KvGrid';
+import KvPageContainer from '#kv-components/KvPageContainer';
 import loanData from '../mock-data/loan-data-mock';
 
 const queryResult = {

.storybook/stories/KivaMultiCategoryGrid.stories.js

@@ -2,7 +2,7 @@ import KivaLoanCardCategory from '#src/components/LoanCollections/HomeExp/KivaLo
 import apolloStoryMixin from '../mixins/apollo-story-mixin';
 import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
 import LoanCategorySelectorHomeExp from '#src/components/LoanCollections/HomeExp/LoanCategorySelectorHomeExp';
-import KvGrid from '@kiva/kv-components/vue/KvGrid';
+import KvGrid from '#kv-components/KvGrid';
 import loanData from '../mock-data/loan-data-mock';
 
 const queryResult = {

.storybook/stories/KvFrequentlyAskedQuestions.stories.js

@@ -1,6 +1,6 @@
 import SectionWithBackgroundClassic from '#src/components/Contentful/SectionWithBackgroundClassic';
 import KvFrequentlyAskedQuestions from '#src/components/Kv/KvFrequentlyAskedQuestions';
-import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer';
+import KvPageContainer from '#kv-components/KvPageContainer';
 
 const args = {
 	frequentlyAskedQuestionsHeadline: 'Questions',

.storybook/stories/LoanSpotlight.stories.js

@@ -1,8 +1,8 @@
 import LoanSpotlight from '#src/components/Categories/LoanSpotlight';
 import apolloStoryMixin from '../mixins/apollo-story-mixin';
 import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
-import KvGrid from '@kiva/kv-components/vue/KvGrid';
-import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer';
+import KvGrid from '#kv-components/KvGrid';
+import KvPageContainer from '#kv-components/KvPageContainer';
 
 const loanHorizontal = {
 	id: 2389631,

.storybook/stories/MainCategoryTile.stories.js

@@ -1,6 +1,6 @@
 import MainCategoryTile from '#src/components/Categories/MainCategoryTile';
-import KvGrid from '@kiva/kv-components/vue/KvGrid';
-import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer';
+import KvGrid from '#kv-components/KvGrid';
+import KvPageContainer from '#kv-components/KvPageContainer';
 
 export default {
 	title: 'Components/Main Category Tile',

.storybook/stories/PortfolioKivaCreditStats.stories.js

@@ -1,5 +1,5 @@
-import KvGrid from '@kiva/kv-components/vue/KvGrid';
-import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer';
+import KvGrid from '#kv-components/KvGrid';
+import KvPageContainer from '#kv-components/KvPageContainer';
 import KivaCreditStats from '#src/pages/Portfolio/ImpactDashboard/KivaCreditStats';
 
 import apolloStoryMixin from '../mixins/apollo-story-mixin';

.storybook/stories/SupportedByLenders.stories.js

@@ -1,6 +1,6 @@
 import SupportedByLenders from '#src/components/BorrowerProfile/SupportedByLenders';
 import activities from '../mock-data/activity-feed-data-mock';
-import KvUserAvatar from '@kiva/kv-components/vue/KvUserAvatar';
+import KvUserAvatar from '#kv-components/KvUserAvatar';
 
 export default {
 	title: 'Components/SupportedByLenders',

package.json

@@ -43,9 +43,9 @@
 		"@godaddy/terminus": "^4.11.0",
 		"@graphql-tools/load": "^7.7.0",
 		"@graphql-tools/url-loader": "^7.17.18",
-		"@kiva/kv-components": "^3.105.3",
-		"@kiva/kv-shop": "^1.12.51",
-		"@kiva/kv-tokens": "^2.11.1",
+		"@kiva/kv-components": "^3.109.1",
+		"@kiva/kv-shop": "^1.12.65",
+		"@kiva/kv-tokens": "^2.15.0",
 		"@mdi/js": "^7",
 		"@opentelemetry/api": "^1.7.0",
 		"@opentelemetry/auto-instrumentations-node": "^0.40.2",

src/components/AutoDeposit/AutoDepositDropInPaymentWrapper.vue

@@ -39,7 +39,7 @@ import braintreeUpdateSubscriptionPaymentMethod from
 	'#src/graphql/mutation/braintreeUpdateSubscriptionPaymentMethod.graphql';
 
 import KvIcon from '#src/components/Kv/KvIcon';
-import KvButton from '@kiva/kv-components/vue/KvButton';
+import KvButton from '#kv-components/KvButton';
 
 export default {
 	name: 'AutoDepositDropInPaymentWrapper',

src/components/AutoDeposit/AutoDepositSignUpForm.vue

@@ -172,11 +172,11 @@ import KvLoadingOverlay from '#src/components/Kv/KvLoadingOverlay';
 
 import userIdQuery from '#src/graphql/query/userId.graphql';
 import { mdiPencil } from '@mdi/js';
-import KvButton from '@kiva/kv-components/vue/KvButton';
-import KvCheckbox from '@kiva/kv-components/vue/KvCheckbox';
-import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
-import KvSelect from '@kiva/kv-components/vue/KvSelect';
-import KvTextInput from '@kiva/kv-components/vue/KvTextInput';
+import KvButton from '#kv-components/KvButton';
+import KvCheckbox from '#kv-components/KvCheckbox';
+import KvMaterialIcon from '#kv-components/KvMaterialIcon';
+import KvSelect from '#kv-components/KvSelect';
+import KvTextInput from '#kv-components/KvTextInput';
 
 let frozenDropdownOptions;
 

src/components/BorrowerProfile/BorrowerBusinessDetails.vue

@@ -57,7 +57,7 @@
 <script>
 import { mdiArrowTopRight } from '@mdi/js';
 import * as Sentry from '@sentry/vue';
-import KvTextLink from '@kiva/kv-components/vue/KvTextLink';
+import KvTextLink from '#kv-components/KvTextLink';
 import { defineAsyncComponent } from 'vue';
 
 const TwitterLogo = defineAsyncComponent(() => import('#src/assets/inline-svgs/logos/twitter-logo.svg'));

src/components/BorrowerProfile/ChallengeTeamInvite.vue

@@ -33,8 +33,8 @@
 
 <script>
 import { mdiArrowTopRight, mdiClose } from '@mdi/js';
-import KvUserAvatar from '@kiva/kv-components/vue/KvUserAvatar';
-import KvToast from '@kiva/kv-components/vue/KvToast';
+import KvUserAvatar from '#kv-components/KvUserAvatar';
+import KvToast from '#kv-components/KvToast';
 
 export default {
 	name: 'ChallengeTeamInvite',

src/components/BorrowerProfile/CommentsAndWhySpecial.vue

@@ -207,12 +207,12 @@
 import WhySpecial from '#src/components/BorrowerProfile/WhySpecial';
 import clickOutside from '#src/plugins/click-outside';
 import BorrowerImage from '#src/components/BorrowerProfile/BorrowerImage';
-import KvCarousel from '@kiva/kv-components/vue/KvCarousel';
-import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
-import KvLoadingPlaceholder from '@kiva/kv-components/vue/KvLoadingPlaceholder';
-import KvLightbox from '@kiva/kv-components/vue/KvLightbox';
-import KvRadio from '@kiva/kv-components/vue/KvRadio';
-import KvButton from '@kiva/kv-components/vue/KvButton';
+import KvCarousel from '#kv-components/KvCarousel';
+import KvMaterialIcon from '#kv-components/KvMaterialIcon';
+import KvLoadingPlaceholder from '#kv-components/KvLoadingPlaceholder';
+import KvLightbox from '#kv-components/KvLightbox';
+import KvRadio from '#kv-components/KvRadio';
+import KvButton from '#kv-components/KvButton';
 import kivaKUrl from '#src/assets/images/kiva_k.svg?url';
 
 export default {
@@ -330,7 +330,7 @@
 									authorName
 									authorImageUrl
 									authorLendingAction {
 										teams
 										lender {
 											id
 											teams(limit: 100) { #arbitrary limit for lenders that have a lot of teams

src/components/BorrowerProfile/ContentContainer.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import KvGrid from '@kiva/kv-components/vue/KvGrid';
-import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer';
+import KvGrid from '#kv-components/KvGrid';
+import KvPageContainer from '#kv-components/KvPageContainer';
 
 export default {
 	name: 'ContentContainer',

src/components/BorrowerProfile/CountryInfo.vue

@@ -65,8 +65,8 @@ import { gql } from 'graphql-tag';
 import numeral from 'numeral';
 import { createIntersectionObserver } from '#src/util/observerUtils';
 
-import KvLoadingPlaceholder from '@kiva/kv-components/vue/KvLoadingPlaceholder';
-import KvUiButton from '@kiva/kv-components/vue/KvButton';
+import KvLoadingPlaceholder from '#kv-components/KvLoadingPlaceholder';
+import KvUiButton from '#kv-components/KvButton';
 
 export default {
 	name: 'CountryInfo',

src/components/BorrowerProfile/DetailsTabs.vue

@@ -112,12 +112,12 @@
 import { gql } from 'graphql-tag';
 import { formatContentGroupsFlat } from '#src/util/contentfulUtils';
 
-import KvLoadingPlaceholder from '@kiva/kv-components/vue/KvLoadingPlaceholder';
+import KvLoadingPlaceholder from '#kv-components/KvLoadingPlaceholder';
 import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
-import KvLightbox from '@kiva/kv-components/vue/KvLightbox';
-import KvTab from '@kiva/kv-components/vue/KvTab';
-import KvTabPanel from '@kiva/kv-components/vue/KvTabPanel';
-import KvTabs from '@kiva/kv-components/vue/KvTabs';
+import KvLightbox from '#kv-components/KvLightbox';
+import KvTab from '#kv-components/KvTab';
+import KvTabPanel from '#kv-components/KvTabPanel';
+import KvTabs from '#kv-components/KvTabs';
 import FieldPartnerDetails from './FieldPartnerDetails';
 import LoanDetails from './LoanDetails';
 import TrusteeDetails from './TrusteeDetails';

src/components/BorrowerProfile/FieldPartnerDetails.vue

@@ -123,8 +123,8 @@ import {
 } from '@mdi/js';
 import numeral from 'numeral';
 import DescriptionListItem from '#src/components/BorrowerProfile/DescriptionListItem';
-import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
-import KvTextLink from '@kiva/kv-components/vue/KvTextLink';
+import KvMaterialIcon from '#kv-components/KvMaterialIcon';
+import KvTextLink from '#kv-components/KvTextLink';
 
 export default {
 	name: 'FieldPartnerDetails',

src/components/BorrowerProfile/FundedBorrowerProfile.vue

@@ -114,8 +114,8 @@ import personalizedLoansQuery from '#src/graphql/query/lendByCategory/personaliz
 import mlLoansYouMightLikeData from '#src/graphql/query/loansYouMightLike/mlLoansYouMightLikeData.graphql';
 import LoanCardController from '#src/components/LoanCards/LoanCardController';
 import { FLSS_ORIGIN_BP_FUNDED } from '#src/util/flssUtils';
-import KvGrid from '@kiva/kv-components/vue/KvGrid';
-import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer';
+import KvGrid from '#kv-components/KvGrid';
+import KvPageContainer from '#kv-components/KvPageContainer';
 
 export default {
 	name: 'FundedBorrowerProfile',

src/components/BorrowerProfile/HeroBackground.vue

@@ -21,7 +21,7 @@
 
 <script>
 import { gql } from 'graphql-tag';
-import KvContentfulImg from '@kiva/kv-components/vue/KvContentfulImg';
+import KvContentfulImg from '#kv-components/KvContentfulImg';
 
 export default {
 	name: 'HeroBackground',

src/components/BorrowerProfile/JournalUpdates.vue

@@ -55,8 +55,8 @@
 
 <script>
 import { createIntersectionObserver } from '#src/util/observerUtils';
-import KvLoadingPlaceholder from '@kiva/kv-components/vue/KvLoadingPlaceholder';
-import KvButton from '@kiva/kv-components/vue/KvButton';
+import KvLoadingPlaceholder from '#kv-components/KvLoadingPlaceholder';
+import KvButton from '#kv-components/KvButton';
 import updatesQuery from '#src/graphql/query/loanUpdates.graphql';
 import UpdateDetails from './UpdateDetails';
 

src/components/BorrowerProfile/JumpLinks.vue

@@ -30,7 +30,7 @@
 <script>
 import { mdiAccount, mdiFormatListBulleted } from '@mdi/js';
 import smoothScrollMixin from '#src/plugins/smooth-scroll-mixin';
-import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
+import KvMaterialIcon from '#kv-components/KvMaterialIcon';
 
 export default {
 	name: 'JumpLinks',