@weni/unnnic-system 2.21.2 → 2.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.21.2",
+  "version": "2.22.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -80,7 +80,7 @@
     "jsdom": "^24.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.62.1",
+    "sass": "^1.63.0",
     "storybook": "^8.0.10",
     "typescript": "^5.6.3",
     "vite": "4.3.5",

package/src/assets/scss/spacing.scss

@@ -1,31 +1,33 @@
+@use "fonts";
+
 // Icon size
-$unnnic-icon-size-xl: 2.5 * $unnnic-font-size;
-$unnnic-icon-size-lg: 2 * $unnnic-font-size;
-$unnnic-icon-size-md: 1.5 * $unnnic-font-size;
-$unnnic-icon-size-ant: 1.25 * $unnnic-font-size;
-$unnnic-icon-size-sm: 1 * $unnnic-font-size;
-$unnnic-icon-size-xs: 0.75 * $unnnic-font-size;
+$unnnic-icon-size-xl: 2.5 * fonts.$unnnic-font-size;
+$unnnic-icon-size-lg: 2 * fonts.$unnnic-font-size;
+$unnnic-icon-size-md: 1.5 * fonts.$unnnic-font-size;
+$unnnic-icon-size-ant: 1.25 * fonts.$unnnic-font-size;
+$unnnic-icon-size-sm: 1 * fonts.$unnnic-font-size;
+$unnnic-icon-size-xs: 0.75 * fonts.$unnnic-font-size;
 
 // Avatar size
-$unnnic-avatar-size-lg: 6.5 * $unnnic-font-size;
-$unnnic-avatar-size-md: 4.5 * $unnnic-font-size;
-$unnnic-avatar-size-sm: 2.5 * $unnnic-font-size;
-$unnnic-avatar-size-xs: 2 * $unnnic-font-size;
-$unnnic-avatar-size-nano: 1.25 * $unnnic-font-size;
+$unnnic-avatar-size-lg: 6.5 * fonts.$unnnic-font-size;
+$unnnic-avatar-size-md: 4.5 * fonts.$unnnic-font-size;
+$unnnic-avatar-size-sm: 2.5 * fonts.$unnnic-font-size;
+$unnnic-avatar-size-xs: 2 * fonts.$unnnic-font-size;
+$unnnic-avatar-size-nano: 1.25 * fonts.$unnnic-font-size;
 
 // Border radius
-$unnnic-border-radius-sm: 0.25 * $unnnic-font-size;
-$unnnic-border-radius-md: 0.5 * $unnnic-font-size;
-$unnnic-border-radius-lg: 1 * $unnnic-font-size;
-$unnnic-border-radius-pill: 37.5 * $unnnic-font-size;
+$unnnic-border-radius-sm: 0.25 * fonts.$unnnic-font-size;
+$unnnic-border-radius-md: 0.5 * fonts.$unnnic-font-size;
+$unnnic-border-radius-lg: 1 * fonts.$unnnic-font-size;
+$unnnic-border-radius-pill: 37.5 * fonts.$unnnic-font-size;
 
 // Border width
-$unnnic-border-width-thinner: 0.0625 * $unnnic-font-size;
-$unnnic-border-width-thin: 0.125 * $unnnic-font-size;
-$unnnic-border-width-thick: 0.25 * $unnnic-font-size;
+$unnnic-border-width-thinner: 0.0625 * fonts.$unnnic-font-size;
+$unnnic-border-width-thin: 0.125 * fonts.$unnnic-font-size;
+$unnnic-border-width-thick: 0.25 * fonts.$unnnic-font-size;
 
 // Shadow levels
-$unnnic-shadow-level-near: 0 * $unnnic-font-size 0.25 * $unnnic-font-size 8px rgba(0, 0, 0, .12);
+$unnnic-shadow-level-near: 0 * fonts.$unnnic-font-size 0.25 * fonts.$unnnic-font-size 8px rgba(0, 0, 0, .12);
 $unnnic-shadow-level-separated: 0px 8px 16px rgba(0, 0, 0, .08);
 $unnnic-shadow-level-far: 0px 12px 32px rgba(0, 0, 0, .04);
 $unnnic-shadow-level-distant: 0px 20px 40px rgba(0, 0, 0, .06);
@@ -40,16 +42,16 @@ $unnnic-opacity-level-light: 0.16;
 $unnnic-opacity-level-extra-light: 0.08;
 
 // Spacing
-$unnnic-spacing-nano: 0.25 * $unnnic-font-size;
-$unnnic-spacing-xs: 0.5 * $unnnic-font-size;
-$unnnic-spacing-ant: 0.75 * $unnnic-font-size;
-$unnnic-spacing-sm: $unnnic-font-size;
-$unnnic-spacing-md: 1.5 * $unnnic-font-size;
-$unnnic-spacing-lg: 2 * $unnnic-font-size;
-$unnnic-spacing-xl: 2.5 * $unnnic-font-size;
-$unnnic-spacing-giant: 3 * $unnnic-font-size;
-$unnnic-spacing-xgiant: 4 * $unnnic-font-size;
-$unnnic-spacing-awesome: 5 * $unnnic-font-size;
+$unnnic-spacing-nano: 0.25 * fonts.$unnnic-font-size;
+$unnnic-spacing-xs: 0.5 * fonts.$unnnic-font-size;
+$unnnic-spacing-ant: 0.75 * fonts.$unnnic-font-size;
+$unnnic-spacing-sm: fonts.$unnnic-font-size;
+$unnnic-spacing-md: 1.5 * fonts.$unnnic-font-size;
+$unnnic-spacing-lg: 2 * fonts.$unnnic-font-size;
+$unnnic-spacing-xl: 2.5 * fonts.$unnnic-font-size;
+$unnnic-spacing-giant: 3 * fonts.$unnnic-font-size;
+$unnnic-spacing-xgiant: 4 * fonts.$unnnic-font-size;
+$unnnic-spacing-awesome: 5 * fonts.$unnnic-font-size;
 
 $unnnic-inset-nano: $unnnic-spacing-xs;
 $unnnic-inset-xs: $unnnic-spacing-ant;

package/src/assets/scss/unnnic.scss

@@ -1,7 +1,12 @@
-@import './colors.scss';
-@import './fonts.scss';
-@import './spacing.scss';
-@import './grid.scss';
+@forward './colors';
+@forward './fonts';
+@forward './spacing';
+@forward './grid';
+
+@use './colors' as *;
+@use './fonts' as *;
+@use './spacing' as *;
+@use './grid' as *;
 
 .unnnic {
     &--clickable {

package/src/components/Accordion/Accordion.vue

@@ -86,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-accordion {
   background-color: $unnnic-color-background-snow;

package/src/components/Alert/Alert.vue

@@ -107,7 +107,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-alert {
   position: fixed;

package/src/components/Alert/AlertBanner.vue

@@ -102,7 +102,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .banner-alert {
   display: grid;

package/src/components/Alert/Version1dot1.vue

@@ -116,7 +116,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .alert-container {
   position: fixed;

package/src/components/AudioRecorder/AudioHandler.vue

@@ -63,17 +63,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .audio-handler {
   display: inline-flex;
   align-items: center;
   gap: $unnnic-spacing-stack-xs;
 
-  .unnnic-icon.is-recording ::v-deep {
+  .unnnic-icon.is-recording {
     margin-left: $unnnic-spacing-inline-nano;
 
-    .primary {
+    :deep(.primary) {
       animation: ease-in-out pulse 2s infinite;
     }
   }

package/src/components/AudioRecorder/AudioPlayer.vue

@@ -149,7 +149,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .audio-player {
   display: inline-flex;

package/src/components/AudioRecorder/AudioRecorder.vue

@@ -377,7 +377,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-audio-recorder {
   position: relative;
@@ -389,8 +389,8 @@ export default {
 
   width: 100%;
 
-  ::v-deep .audio-player__time,
-  ::v-deep .audio-handler__time {
+  :deep(.audio-player__time),
+  :deep(.audio-handler__time) {
     font-family: $unnnic-font-family-secondary;
     font-weight: $unnnic-font-weight-regular;
     font-size: $unnnic-font-size-body-md;

package/src/components/AvatarIcon/AvatarIcon.vue

@@ -74,7 +74,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic';
+@use '@/assets/scss/unnnic' as *;
 
 @each $name, $color in $scheme-colors {
   .unnnic-avatar-icon {

package/src/components/Banner/Banner.vue

@@ -75,5 +75,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 </style>

package/src/components/Banner/InfoBanner.vue

@@ -99,7 +99,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-banner-info {
   display: flex;

package/src/components/Breadcrumb/Breadcrumb.vue

@@ -48,7 +48,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 .unnnic-breadcrumb {
   display: flex;
   flex-direction: row;

package/src/components/Button/Button.vue

@@ -219,7 +219,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-button {
   display: inline-flex;
@@ -405,7 +405,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-button--icon-on-center {
   min-width: auto;

package/src/components/Button/ButtonIcon.vue

@@ -52,7 +52,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .button-icon {
   border: 0;

package/src/components/Card/AccountCard.vue

@@ -57,7 +57,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-card-account {
   display: flex;

package/src/components/Card/BlankCard.vue

@@ -44,7 +44,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-card-blank {
   display: flex;

package/src/components/Card/Card.vue

@@ -192,7 +192,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 $scheme-colors:
   'feedback-red' $unnnic-color-feedback-red,

package/src/components/Card/CardCompany.vue

@@ -79,7 +79,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-connect-card-company {
   cursor: pointer;

package/src/components/Card/CardData.vue

@@ -69,7 +69,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .card {
   background-color: $unnnic-color-background-snow;

package/src/components/Card/CardStatusesContainer.vue

@@ -138,7 +138,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
+
+$calculated-width: 6 * $unnnic-font-size;
 
 .unnnic-card-container {
   padding: $unnnic-inset-sm;
@@ -165,7 +167,7 @@ export default {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      width: calc(100% - #{5 * $unnnic-font-size});
+      width: calc(100% - #{$calculated-width});
       margin-right: $unnnic-spacing-inline-xs;
 
       .name {

package/src/components/Card/ContentCard.vue

@@ -61,7 +61,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-card-content {
   display: flex;

package/src/components/Card/DashCard.vue

@@ -82,7 +82,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-card-dash {
   display: flex;

package/src/components/Card/DefaultCard.vue

@@ -38,7 +38,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-card-default {
   display: flex;

package/src/components/Card/MarketplaceCard.vue

@@ -90,7 +90,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-card-marketplace__config {
   opacity: $unnnic-opacity-level-dark;

package/src/components/Card/SimpleCard.vue

@@ -88,7 +88,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 * {
   margin: 0;
   padding: 0;
@@ -153,15 +153,14 @@ export default {
   }
 
   &__footer {
+    border-top: 1px solid $unnnic-color-neutral-light;
+    padding-top: $unnnic-spacing-ant;
+    font-family: $unnnic-font-family-secondary;
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
-
-    border-top: 1px solid $unnnic-color-neutral-light;
-    padding-top: $unnnic-spacing-ant;
-    font-family: $unnnic-font-family-secondary;
   }
 }
 </style>

package/src/components/Card/StatusCard.vue

@@ -58,7 +58,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-card-status {
   display: flex;

package/src/components/Card/TitleCard.vue

@@ -68,7 +68,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-card-title {
   display: flex;

package/src/components/CardImage/CardImage.vue

@@ -103,7 +103,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-card-image {
   display: flex;

package/src/components/CardInformation/CardInformation.vue

@@ -61,5 +61,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 </style>

package/src/components/CardNumber/CardNumber.vue

@@ -27,7 +27,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-card-number {
   background-color: $unnnic-color-background-carpet;

package/src/components/CardProject/CardProject.vue

@@ -66,7 +66,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-card-project {
   .header {

package/src/components/Carousel/TagCarousel.vue

@@ -133,7 +133,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-card-tag-carousel {
   display: flex;
@@ -160,6 +160,12 @@ export default {
   }
 
   &__button {
+    z-index: 1;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     &__icon {
       height: $unnnic-inline-lg;
       display: flex;
@@ -167,11 +173,7 @@ export default {
       align-items: center;
       background-color: $unnnic-color-background-snow;
     }
-    z-index: 1;
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+
     &__blur {
       width: $unnnic-inline-giant;
       height: $unnnic-inline-lg;

package/src/components/ChartBar/ChartBar.vue

@@ -218,7 +218,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-chart-bar {
   background-color: $unnnic-color-background-snow;

package/src/components/ChartFunnel/DefaultFunnel/ChartDefaultFunnelBase.vue

@@ -58,8 +58,7 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
-@import '../../../assets/scss/unnnic.scss';
-
+@use '@/assets/scss/unnnic' as *;
 .unnnic-chart-funnel-base-container {
   width: 100%;
   height: 100%;

package/src/components/ChartFunnel/SvgFunnel/ChartFunnelBaseRow.vue

@@ -51,8 +51,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../assets/scss/unnnic.scss';
-
+@use '@/assets/scss/unnnic' as *;
 .unnnic-chart-funnel-base-rows {
   width: 100%;
   height: 100%;

package/src/components/ChartFunnel/SvgFunnel/ChartFunnelFiveRows.vue

@@ -80,8 +80,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../assets/scss/unnnic.scss';
-
+@use '@/assets/scss/unnnic' as *;
 .unnnic-chart-funnel-five-rows {
   [class$='row']:nth-child(1) {
     fill: $unnnic-color-weni-950;

package/src/components/ChartFunnel/SvgFunnel/ChartFunnelFourRows.vue

@@ -71,8 +71,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../assets/scss/unnnic.scss';
-
+@use '@/assets/scss/unnnic' as *;
 .unnnic-chart-funnel-four-rows {
   [class$='row']:nth-child(1) {
     fill: $unnnic-color-weni-950;

package/src/components/ChartFunnel/SvgFunnel/ChartFunnelThreeRows.vue

@@ -62,8 +62,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../assets/scss/unnnic.scss';
-
+@use '@/assets/scss/unnnic' as *;
 .unnnic-chart-funnel-three-rows {
   [class$='row']:nth-child(1) {
     fill: $unnnic-color-weni-950;

package/src/components/ChartLine/ChartLine.vue

@@ -190,7 +190,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-chart-line {
   background-color: $unnnic-color-background-snow;

package/src/components/ChartMultiLine/ChartMultiLine.vue

@@ -164,7 +164,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-chart-line {
   background-color: $unnnic-color-background-snow;

package/src/components/ChartMultiLine/Line/Line.vue

@@ -124,7 +124,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 .chart {
   width: 100%;
   height: 100%;

package/src/components/ChartRainbow/ChartRainbow.vue

@@ -147,7 +147,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-chart-rainbow {
   position: relative;

package/src/components/ChatText/ChatText.vue

@@ -83,7 +83,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-chat-text {
   border-radius: $unnnic-border-radius-lg;

package/src/components/ChatsContact/ChatsContact.vue

@@ -239,7 +239,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .chats-contact {
   display: grid;