@webitel/ui-sdk 26.2.0-4 → 26.2.0-5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "26.2.0-4",
+  "version": "26.2.0-5",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",

package/src/modules/AgentStatusSelect/components/_internals/wt-cc-pause-cause-popup.vue

@@ -25,15 +25,18 @@
                 />
                 <div class="wt-cc-pause-cause-popup-option__limits-wrapper">
                   <span
-                    :class="{
-                      'wt-cc-pause-cause-popup-option__duration--overflow':
-                        option.isOverflow,
-                    }"
+                    :class="[
+                      'typo-caption',
+                      {
+                        'wt-cc-pause-cause-popup-option__duration--overflow':
+                          option.isOverflow,
+                      },
+                    ]"
                   >
                     {{ option.duration }}
                   </span>
                   /
-                  <span>{{ option.limit }}</span>
+                  <span class="typo-caption">{{ option.limit }}</span>
                 </div>
               </div>
               <div v-if="selected && option.id === selected?.id" class="wt-cc-pause-cause-popup-option__comment">
@@ -141,7 +144,6 @@ function setPause() {
 
 .wt-cc-pause-cause-popup-option__limits-wrapper {
   & > span {
-    @extend %typo-caption;
     padding: 6px 10px;
   }
 

package/src/modules/AuditForm/components/form-answers/answer-editing-info/audit-form-answer-editing-info.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="audit-form-answer-editing-info">
-    <header class="audit-form-answer-editing-info-header">
+    <header class="audit-form-answer-editing-info-header typo-caption">
       <span>{{ t('reusable.updatedBy') }}</span>
       <span>{{ answer.updatedBy.name }}</span>
       <span>{{ updateTime }}</span>
@@ -8,7 +8,7 @@
     <p
       v-if="!hideComment && initialComment"
       ref="answer-editing-comment"
-      class="audit-form-answer-editing-info-comment"
+      class="audit-form-answer-editing-info-comment typo-body-1"
       :class="{
         'audit-form-answer-editing-info-comment--collapsed': collapsed,
       }"
@@ -20,7 +20,7 @@
       class="audit-form-answer-editing-info-footer"
     >
       <button
-        class="audit-form-answer-editing-info-expand-action"
+        class="audit-form-answer-editing-info-expand-action typo-body-1"
         type="button"
         @click="collapsed = false"
       >
@@ -86,14 +86,11 @@ const isCommentClamped =
 }
 
 .audit-form-answer-editing-info-header {
-  @extend %typo-caption;
   display: flex;
   gap: var(--spacing-xs);
 }
 
 .audit-form-answer-editing-info-comment {
-  @extend %typo-body-1;
-
   &--collapsed {
     line-clamp: 2;
     -webkit-line-clamp: 2; /* coz autoprefixer wont write "-webkit" for us https://github.com/postcss/autoprefixer/issues/1322 */
@@ -109,7 +106,6 @@ const isCommentClamped =
 }
 
 .audit-form-answer-editing-info-expand-action {
-  @extend %typo-body-1;
   color: var(--text-link-color);
   cursor: pointer;
   transition: var(--transition);

package/src/modules/CallSession/modules/VideoCall/video-call.vue

@@ -19,7 +19,7 @@
         <div class="video-call-overlay">
           <div
             v-if="props['receiver:stream'] && !props['receiver:video:enabled']"
-            :class="`video-call-receiver--${innerSize}`"
+            :class="[`video-call-receiver--${innerSize}`, innerSize === 'sm' ? 'typo-body-2' : 'typo-body-1']"
             class="video-call-receiver video-call-receiver--muted"
           >
             <wt-icon :size="receiverVideoMutedIconSizes[innerSize]" icon="video-cam-off--filled" />
@@ -319,17 +319,11 @@ const senderVideoMutedIconSizes = {
     color: var(--p-player-wrapper-muted-color);
 
     &--sm {
-      @extend %typo-body-2;
-
       .video-call-receiver-text {
         max-width: 73px;
       }
     }
 
-    &--md, &--lg {
-      @extend %typo-body-1;
-    }
-
     &--muted {
       width: 100%;
       height: 100%;

package/src/modules/QueryFilters/components/filter-from-to.vue

@@ -4,7 +4,7 @@
     <div class="filter-from-to__inputs-wrapper">
       <div class="filter-from-to__input-wrapper">
         <wt-label
-          class="filter-from-to__input-label"
+          class="filter-from-to__input-label typo-subtitle-1"
           for="filter-from-to-from"
         >
           {{ $t('reusable.from') }}
@@ -21,7 +21,7 @@
       </div>
       <div class="filter-from-to__input-wrapper">
         <wt-label
-          class="filter-from-to__input-label"
+          class="filter-from-to__input-label typo-subtitle-1"
           for="filter-from-to-to"
         >
           {{ $t('reusable.to') }}
@@ -155,7 +155,6 @@ export default {
 }
 
 .filter-from-to__input-label {
-  @extend %typo-subtitle-1;
   margin-right: 5px;
 }