@kiva/kv-components 4.8.0 → 4.8.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.8.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.8.0...@kiva/kv-components@4.8.1) (2025-01-09)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
 # [4.8.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.7.1...@kiva/kv-components@4.8.0) (2025-01-09)
 
 

package/dist/components/KvCommentsAdd.vue

@@ -116,20 +116,20 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
->>> input {
+:deep(input) {
 	@apply tw-border-t-0 tw-border-r-0 tw-border-l-0 tw-rounded-none tw-p-0 tw-h-4;
 }
 
->>> input:focus {
+:deep(input:focus) {
 	@apply tw-border-tertiary;
 	box-shadow: none;
 }
 
->>> button > span {
+:deep(button > span) {
 	@apply tw-min-h-0;
 }
 
->>> button > span > span {
+:deep(button > span > span) {
 	@apply tw-py-0 tw-px-0.5;
 }
 </style>

package/dist/components/KvCommentsHeartButton.vue

@@ -64,7 +64,7 @@ export default {
 </script>
 
 <style scoped>
-.filled >>> svg {
+.filled :deep(svg) {
     fill: #F60059;
 }
 </style>

package/dist/components/KvCommentsReplyButton.vue

@@ -38,15 +38,15 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
->>> span {
+:deep(span) {
 	@apply tw-min-h-0;
 }
 
->>> span > span {
+:deep(span > span) {
 	@apply tw-py-0 tw-px-0.5 tw-flex tw-items-center;
 }
 
->>> svg {
+:deep(svg) {
 	@apply tw-mx-0.5;
 }
 </style>

package/dist/components/KvInlineActivityCard.vue

@@ -49,7 +49,7 @@ export default {
 </script>
 
 <style scoped lang="postcss">
-.activity-avatar, .activity-avatar >>> img, .activity-avatar >>> div {
+.activity-avatar, .activity-avatar :deep(img), .activity-avatar :deep(div) {
     @apply tw-w-4 tw-h-4;
 }
 </style>

package/dist/components/KvIntroductionLoanCard.vue

@@ -425,7 +425,7 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.loan-callouts >>> span {
+.loan-callouts :deep(span) {
 	@apply !tw-bg-transparent tw-text-action;
 }
 .loan-card-use:hover,
@@ -443,7 +443,7 @@ export default {
 .loan-card-name {
 	@apply tw-pt-1 tw-px-3 tw-text-ellipsis tw-overflow-hidden tw-line-clamp-1 tw-cursor-pointer;
 }
-.loan-bookmark >>> button {
+.loan-bookmark :deep(button) {
 	@apply !tw-rounded-t-none;
 }
 </style>

package/dist/components/KvLendCta.vue

@@ -550,39 +550,39 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.amountDropdownWrapper >>> select {
+.amountDropdownWrapper :deep(select) {
 	border-radius: 14px 0 0 14px;
 }
 
-.lend-again >>> span {
+.lend-again :deep(span) {
 	@apply tw-px-0;
 }
 
-.lend-again >>> span {
+.lend-again :deep(span) {
 	@apply tw-px-1;
 }
 
-.lendButtonWrapper >>> span:first-child {
+.lendButtonWrapper :deep(span:first-child) {
 	border-radius: 0 14px 14px 0;
 }
 
-.filtered-dropdown >>> select {
+.filtered-dropdown :deep(select) {
 	@apply tw-rounded tw-border-2 tw-font-medium tw-cursor-pointer;
 }
 
-.unselected-dropdown >>> select {
+.unselected-dropdown :deep(select) {
 	@apply tw-border-gray-400;
 }
 
-.selected-dropdown >>> select {
+.selected-dropdown :deep(select) {
 	@apply tw-border-eco-green-4;
 }
 
-.preset-option >>> span.tw-w-full:first-child {
+.preset-option :deep(span.tw-w-full:first-child) {
 	@apply tw-border-2 tw-border-gray-400;
 }
 
-.selected-option >>> span.tw-w-full:first-child {
+.selected-option :deep(span.tw-w-full:first-child) {
 	@apply tw-border-eco-green-4;
 }
 </style>

package/dist/components/KvLoanActivities.vue

@@ -233,24 +233,24 @@ export default {
 </script>
 
 <style scoped lang="postcss">
-.loan-activity >>> #kvLightboxBody {
+.loan-activity :deep(#kvLightboxBody) {
 	@apply tw-flex tw-flex-col tw-px-0 tw-pb-0;
 }
 
-.loan-activity >>> div > div > div > div > div:first-child {
+.loan-activity :deep(div > div > div > div > div:first-child) {
 	box-shadow: var(--kiva-box-shadow);
 }
 
-.loan-activity >>> div > div > div > div > div:first-child > div,
-.loan-activity >>> #kvLightboxBody div {
+.loan-activity :deep(div > div > div > div > div:first-child > div),
+.loan-activity :deep(#kvLightboxBody div) {
 	box-shadow: none;
 }
 
-.loan-activity >>> #kvLightboxBody > div:first-child {
+.loan-activity :deep(#kvLightboxBody > div:first-child) {
 	@apply tw-px-4;
 }
 
-.loan-activity >>> [role=dialog] {
+.loan-activity :deep([role=dialog]) {
 	min-width: 840px;
 	max-width: 840px !important;
 
@@ -260,7 +260,7 @@ export default {
 	}
 }
 
-.loan-activity >>> #kvLightboxBody > div:nth-child(2) {
+.loan-activity :deep(#kvLightboxBody > div:nth-child(2)) {
 	@apply tw-px-4;
 
 	box-shadow: var(--kiva-negative-box-shadow);

package/dist/components/KvWideLoanCard.vue

@@ -427,7 +427,7 @@ export default {
 	@apply tw-no-underline;
 }
 /** Unique to this loan card */
-.loan-callouts >>> div{
+.loan-callouts :deep(div) {
 	@apply tw-flex-wrap tw-h-auto;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -98,5 +98,5 @@
   "peerDependencies": {
     "vue": ">=3.0.0"
   },
-  "gitHead": "b556f273d9899af55972cc28add6c4bb536bb15e"
+  "gitHead": "cfdd1a3885608643e3ddf8110dfece42426109aa"
 }

package/vue/KvCommentsAdd.vue

@@ -116,20 +116,20 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
->>> input {
+:deep(input) {
 	@apply tw-border-t-0 tw-border-r-0 tw-border-l-0 tw-rounded-none tw-p-0 tw-h-4;
 }
 
->>> input:focus {
+:deep(input:focus) {
 	@apply tw-border-tertiary;
 	box-shadow: none;
 }
 
->>> button > span {
+:deep(button > span) {
 	@apply tw-min-h-0;
 }
 
->>> button > span > span {
+:deep(button > span > span) {
 	@apply tw-py-0 tw-px-0.5;
 }
 </style>

package/vue/KvCommentsHeartButton.vue

@@ -64,7 +64,7 @@ export default {
 </script>
 
 <style scoped>
-.filled >>> svg {
+.filled :deep(svg) {
     fill: #F60059;
 }
 </style>

package/vue/KvCommentsReplyButton.vue

@@ -38,15 +38,15 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
->>> span {
+:deep(span) {
 	@apply tw-min-h-0;
 }
 
->>> span > span {
+:deep(span > span) {
 	@apply tw-py-0 tw-px-0.5 tw-flex tw-items-center;
 }
 
->>> svg {
+:deep(svg) {
 	@apply tw-mx-0.5;
 }
 </style>

package/vue/KvInlineActivityCard.vue

@@ -49,7 +49,7 @@ export default {
 </script>
 
 <style scoped lang="postcss">
-.activity-avatar, .activity-avatar >>> img, .activity-avatar >>> div {
+.activity-avatar, .activity-avatar :deep(img), .activity-avatar :deep(div) {
     @apply tw-w-4 tw-h-4;
 }
 </style>

package/vue/KvIntroductionLoanCard.vue

@@ -425,7 +425,7 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.loan-callouts >>> span {
+.loan-callouts :deep(span) {
 	@apply !tw-bg-transparent tw-text-action;
 }
 .loan-card-use:hover,
@@ -443,7 +443,7 @@ export default {
 .loan-card-name {
 	@apply tw-pt-1 tw-px-3 tw-text-ellipsis tw-overflow-hidden tw-line-clamp-1 tw-cursor-pointer;
 }
-.loan-bookmark >>> button {
+.loan-bookmark :deep(button) {
 	@apply !tw-rounded-t-none;
 }
 </style>

package/vue/KvLendCta.vue

@@ -550,39 +550,39 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.amountDropdownWrapper >>> select {
+.amountDropdownWrapper :deep(select) {
 	border-radius: 14px 0 0 14px;
 }
 
-.lend-again >>> span {
+.lend-again :deep(span) {
 	@apply tw-px-0;
 }
 
-.lend-again >>> span {
+.lend-again :deep(span) {
 	@apply tw-px-1;
 }
 
-.lendButtonWrapper >>> span:first-child {
+.lendButtonWrapper :deep(span:first-child) {
 	border-radius: 0 14px 14px 0;
 }
 
-.filtered-dropdown >>> select {
+.filtered-dropdown :deep(select) {
 	@apply tw-rounded tw-border-2 tw-font-medium tw-cursor-pointer;
 }
 
-.unselected-dropdown >>> select {
+.unselected-dropdown :deep(select) {
 	@apply tw-border-gray-400;
 }
 
-.selected-dropdown >>> select {
+.selected-dropdown :deep(select) {
 	@apply tw-border-eco-green-4;
 }
 
-.preset-option >>> span.tw-w-full:first-child {
+.preset-option :deep(span.tw-w-full:first-child) {
 	@apply tw-border-2 tw-border-gray-400;
 }
 
-.selected-option >>> span.tw-w-full:first-child {
+.selected-option :deep(span.tw-w-full:first-child) {
 	@apply tw-border-eco-green-4;
 }
 </style>

package/vue/KvLoanActivities.vue

@@ -233,24 +233,24 @@ export default {
 </script>
 
 <style scoped lang="postcss">
-.loan-activity >>> #kvLightboxBody {
+.loan-activity :deep(#kvLightboxBody) {
 	@apply tw-flex tw-flex-col tw-px-0 tw-pb-0;
 }
 
-.loan-activity >>> div > div > div > div > div:first-child {
+.loan-activity :deep(div > div > div > div > div:first-child) {
 	box-shadow: var(--kiva-box-shadow);
 }
 
-.loan-activity >>> div > div > div > div > div:first-child > div,
-.loan-activity >>> #kvLightboxBody div {
+.loan-activity :deep(div > div > div > div > div:first-child > div),
+.loan-activity :deep(#kvLightboxBody div) {
 	box-shadow: none;
 }
 
-.loan-activity >>> #kvLightboxBody > div:first-child {
+.loan-activity :deep(#kvLightboxBody > div:first-child) {
 	@apply tw-px-4;
 }
 
-.loan-activity >>> [role=dialog] {
+.loan-activity :deep([role=dialog]) {
 	min-width: 840px;
 	max-width: 840px !important;
 
@@ -260,7 +260,7 @@ export default {
 	}
 }
 
-.loan-activity >>> #kvLightboxBody > div:nth-child(2) {
+.loan-activity :deep(#kvLightboxBody > div:nth-child(2)) {
 	@apply tw-px-4;
 
 	box-shadow: var(--kiva-negative-box-shadow);

package/vue/KvWideLoanCard.vue

@@ -427,7 +427,7 @@ export default {
 	@apply tw-no-underline;
 }
 /** Unique to this loan card */
-.loan-callouts >>> div{
+.loan-callouts :deep(div) {
 	@apply tw-flex-wrap tw-h-auto;
 }
 </style>