@weni/unnnic-system 2.21.2 → 2.22.0

package/src/components/ChatsDashboardTagLive/ChatsDashboardTagLive.vue

@@ -38,7 +38,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-chats-dashboard-tag-live {
   padding: $unnnic-spacing-ant;

package/src/components/ChatsHeader/ChatsHeader.vue

@@ -152,7 +152,7 @@ export default {
 };
 </script>
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 .unnnic-chats-header {
   padding: $unnnic-spacing-sm;
 

package/src/components/ChatsMessage/ChatsMessage.vue

@@ -204,7 +204,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 $defaultLineHeight: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
 

package/src/components/ChatsMessage/ChatsMessageStatusBackdrop.vue

@@ -41,7 +41,7 @@ export default {
 };
 </script>
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-chats-message-status-backdrop__container {
   position: absolute;

package/src/components/ChatsNavbar/ChatsNavbar.vue

@@ -105,7 +105,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-chats-navbar {
   width: 100vw;

package/src/components/ChatsUserAvatar/ChatsUserAvatar.vue

@@ -86,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 $avatar-sizes:
   '2xl' 3rem,

package/src/components/Checkbox/Checkbox.vue

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

package/src/components/CircleProgressBar/CircleProgressBar.vue

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

package/src/components/Collapse/Collapse.vue

@@ -81,7 +81,7 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-collapse {
   padding-bottom: $unnnic-spacing-ant;

package/src/components/Comment/Comment.vue

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

package/src/components/DataArea/DataArea.vue

@@ -53,7 +53,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .data-area-container {
   &__header {

package/src/components/DatePicker/DatePicker.vue

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

package/src/components/Disclaimer/Disclaimer.vue

@@ -48,7 +48,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 .unnnic-disclaimer {
   display: inline-flex;
   align-items: center;

package/src/components/Drawer/Drawer.vue

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

package/src/components/DropArea/DropArea.vue

@@ -281,11 +281,12 @@ function addFiles(files) {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
+@use 'sass:string';
 
 @function borderDashed($color) {
-  $colorString: unquote('' + $color);
-  $cleanColor: str-slice($colorString, 2);
+  $colorString: string.unquote('' + $color);
+  $cleanColor: string.slice($colorString, 2);
   @return url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23#{$cleanColor}' stroke-width='1' stroke-dasharray='4%2c 4' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
 }
 

package/src/components/Dropdown/Dropdown.vue

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

package/src/components/Dropdown/DropdownItem.vue

@@ -14,7 +14,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 .unnnic-dropdown-item {
   color: $unnnic-color-neutral-dark;
   text-decoration: none;

package/src/components/Dropdown/DropdownSkeleton.vue

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

package/src/components/Dropdown/LanguageSelect.vue

@@ -201,7 +201,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-language-select {
   &.normal {

package/src/components/FormElement/FormElement.vue

@@ -97,7 +97,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-form-element {
   &__label {

package/src/components/Icon.vue

@@ -116,7 +116,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-icon :deep(svg) {
   position: absolute;
@@ -126,7 +126,7 @@ export default {
 </style>
 
 <style lang="scss">
-@import '../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 $scheme-colors:
   'background-solo' $unnnic-color-background-solo,

package/src/components/ImportCard/ImportCard.vue

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

package/src/components/Indicator/Indicator.vue

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

package/src/components/Input/BaseInput.vue

@@ -80,8 +80,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
-@import './Input.scss';
+@use '@/assets/scss/unnnic' as *;
+@use './Input.scss' as *;
 
 .input {
   @include input-base;

package/src/components/Input/Input.scss

@@ -1,4 +1,4 @@
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 @mixin input-base {
   background: $unnnic-color-neutral-white;

package/src/components/Input/Input.vue

@@ -132,7 +132,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-form {
   font-family: $unnnic-font-family-secondary;

package/src/components/Input/TextInput.vue

@@ -181,7 +181,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .icon {
   &-left,

package/src/components/InputDatePicker/InputDatePicker.vue

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

package/src/components/InputNext/InputNext.vue

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

package/src/components/Label/Label.vue

@@ -15,7 +15,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-label {
   &__label {

package/src/components/Modal/Modal.vue

@@ -139,23 +139,35 @@ export default {
   },
   methods: {
     mobileAnimateReset() {
-      this.$refs.modalContainer.style.transition = null;
-      this.$refs.modal.style.transition = null;
+      if (this.$refs.modalContainer) {
+        this.$refs.modalContainer.style.transition = null;
+      }
+      if (this.$refs.modal) {
+        this.$refs.modal.style.transition = null;
+      }
     },
 
     mobileAnimateOpen() {
       this.$nextTick(() => {
-        this.$refs.modalContainer.style.transition = 'none';
-        this.$refs.modalContainer.style.backgroundColor = 'transparent';
-        this.$refs.modal.style.transition = 'none';
-        this.$refs.modal.style.marginBottom = `${-this.$refs.modal
-          .offsetHeight}px`;
+        if (this.$refs.modalContainer) {
+          this.$refs.modalContainer.style.transition = 'none';
+          this.$refs.modalContainer.style.backgroundColor = 'transparent';
+        }
+        if (this.$refs.modal) {
+          this.$refs.modal.style.transition = 'none';
+          this.$refs.modal.style.marginBottom = `${-this.$refs.modal.offsetHeight}px`;
+        }
 
         setTimeout(() => {
-          this.$refs.modalContainer.style.transition = 'background-color 0.2s';
-          this.$refs.modalContainer.style.backgroundColor = null;
-          this.$refs.modal.style.transition = 'margin-bottom 0.2s';
-          this.$refs.modal.style.marginBottom = null;
+          if (this.$refs.modalContainer) {
+            this.$refs.modalContainer.style.transition =
+              'background-color 0.2s';
+            this.$refs.modalContainer.style.backgroundColor = null;
+          }
+          if (this.$refs.modal) {
+            this.$refs.modal.style.transition = 'margin-bottom 0.2s';
+            this.$refs.modal.style.marginBottom = null;
+          }
 
           setTimeout(() => {
             this.mobileAnimateReset();
@@ -166,11 +178,14 @@ export default {
 
     mobileAnimateClose() {
       return new Promise((resolve) => {
-        this.$refs.modalContainer.style.transition = 'background-color 0.2s';
-        this.$refs.modalContainer.style.backgroundColor = 'transparent';
-        this.$refs.modal.style.transition = 'margin-bottom 0.2s';
-        this.$refs.modal.style.marginBottom = `${-this.$refs.modal
-          .offsetHeight}px`;
+        if (this.$refs.modalContainer) {
+          this.$refs.modalContainer.style.transition = 'background-color 0.2s';
+          this.$refs.modalContainer.style.backgroundColor = 'transparent';
+        }
+        if (this.$refs.modal) {
+          this.$refs.modal.style.transition = 'margin-bottom 0.2s';
+          this.$refs.modal.style.marginBottom = `${-this.$refs.modal.offsetHeight}px`;
+        }
 
         setTimeout(() => {
           this.mobileAnimateReset();
@@ -201,7 +216,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-modal {
   position: fixed;
@@ -270,6 +285,12 @@ export default {
         &-description {
           width: 100%;
           text-align: center;
+          overflow: auto;
+          font-family: $unnnic-font-family-secondary;
+          color: $unnnic-color-neutral-cloudy;
+          font-weight: $unnnic-font-weight-regular;
+          font-size: $unnnic-font-size-body-lg;
+          line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
 
           &-container {
             background-color: $unnnic-color-background-carpet;
@@ -279,14 +300,6 @@ export default {
             overflow: hidden;
             padding-bottom: $unnnic-spacing-stack-giant;
           }
-
-          overflow: auto;
-
-          font-family: $unnnic-font-family-secondary;
-          color: $unnnic-color-neutral-cloudy;
-          font-weight: $unnnic-font-weight-regular;
-          font-size: $unnnic-font-size-body-lg;
-          line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
         }
       }
 

package/src/components/ModalDialog/ModalDialog.vue

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

package/src/components/ModalNext/ModalNext.vue

@@ -254,7 +254,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-modal {
   z-index: 5;

package/src/components/ModalUpload/ModalUpload.vue

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

package/src/components/MoodRating/MoodRating.vue

@@ -86,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-mood-rating {
   text-align: center;

package/src/components/MultiSelect/MultiSelect.vue

@@ -170,7 +170,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .normal-multiselect,
 .expand-multiselect {

package/src/components/Navigator/index.vue

@@ -45,7 +45,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 .unnnic-navigator-pages {
   display: flex;
   column-gap: $unnnic-spacing-xs;

package/src/components/Pagination/Pagination.vue

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

package/src/components/ProgressBar/ProgressBar.vue

@@ -110,7 +110,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-progress-bar {
   &.primary,

package/src/components/Radio/Radio.vue

@@ -75,7 +75,7 @@ function click() {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-radio-container {
   display: inline-flex;

package/src/components/Select/SelectItem.vue

@@ -45,7 +45,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 .unnnic-select-item {
   background-color: $unnnic-color-background-snow;
   padding: $unnnic-spacing-stack-nano $unnnic-inline-xs;

package/src/components/SelectSmart/SelectSmart.vue

@@ -437,7 +437,7 @@ export default {
         const optionElement = elementScroll.childNodes[optionIndex];
 
         if (optionElement instanceof HTMLElement) {
-          optionElement.scrollIntoView({ block: scrollBlock });
+          optionElement?.scrollIntoView({ block: scrollBlock });
         }
       }
     },
@@ -547,7 +547,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 .unnnic-select-smart {
   position: relative;
 

package/src/components/SelectSmart/SelectSmartMultipleHeader.vue

@@ -86,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-select-smart__options__multiple {
   border-bottom: 1px solid $unnnic-color-neutral-soft;

package/src/components/SelectSmart/SelectSmartOption.vue

@@ -84,7 +84,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 .unnnic-select-smart-option {
   background-color: $unnnic-color-background-snow;
   padding: $unnnic-spacing-stack-nano $unnnic-inline-xs;

package/src/components/Sidebar/SidebarItem.vue

@@ -135,7 +135,7 @@ const emit = defineEmits(['navigate']);
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 * {
   margin: 0;
   padding: 0;

package/src/components/Sidebar/index.vue

@@ -78,7 +78,7 @@ const handleNavigate = ({ item, child }) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 * {
   margin: 0;
   padding: 0;

package/src/components/SkeletonLoading/SkeletonLoading.vue

@@ -113,7 +113,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 .unnnic-skeleton {
   background-size: 500px 100%;
   background-repeat: no-repeat;

package/src/components/Slider/Slider.vue

@@ -237,7 +237,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .value-input {
   display: flex;
@@ -285,7 +285,7 @@ export default {
 </style>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@use '@/assets/scss/unnnic' as *;
 
 .unnnic-label {
   display: flex;

package/src/components/StarRating/StarRating.vue

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

package/src/components/Switch/Switch.vue

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