plugin-ui-for-kzt 0.0.22 → 0.0.25

package/src/assets/icons/edit-table.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.0504 9.00018L10.2088 16.2418C9.95045 16.5168 9.70045 17.0585 9.65045 17.4335L9.34211 20.1335C9.23378 21.1085 9.93378 21.7752 10.9004 21.6085L13.5838 21.1502C13.9588 21.0835 14.4838 20.8085 14.7421 20.5252L21.5838 13.2835C22.7671 12.0335 23.3004 10.6085 21.4588 8.86685C19.6254 7.14185 18.2338 7.75018 17.0504 9.00018Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.9082 10.2082C16.2665 12.5082 18.1332 14.2665 20.4499 14.4998" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.5 24.3333H23.5" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/ellipsis.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.6665 10.1667C17.6665 9.25 16.9165 8.5 15.9998 8.5C15.0832 8.5 14.3332 9.25 14.3332 10.1667C14.3332 11.0833 15.0832 11.8333 15.9998 11.8333C16.9165 11.8333 17.6665 11.0833 17.6665 10.1667Z" fill="currentColor"/>
+<path d="M17.6665 21.8334C17.6665 20.9167 16.9165 20.1667 15.9998 20.1667C15.0832 20.1667 14.3332 20.9167 14.3332 21.8334C14.3332 22.75 15.0832 23.5 15.9998 23.5C16.9165 23.5 17.6665 22.75 17.6665 21.8334Z" fill="currentColor"/>
+<path d="M17.6665 16C17.6665 15.0833 16.9165 14.3333 15.9998 14.3333C15.0832 14.3333 14.3332 15.0833 14.3332 16C14.3332 16.9166 15.0832 17.6666 15.9998 17.6666C16.9165 17.6666 17.6665 16.9166 17.6665 16Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/loading-page-default.svg

@@ -0,0 +1,4 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M53 28C53 31.283 52.3534 34.5339 51.097 37.5671C49.8406 40.6002 47.9991 43.3562 45.6777 45.6777C43.3562 47.9991 40.6002 49.8406 37.5671 51.097C34.5339 52.3534 31.283 53 28 53C24.7169 53 21.466 52.3534 18.4329 51.097C15.3998 49.8406 12.6438 47.9991 10.3223 45.6777C8.00086 43.3562 6.15938 40.6002 4.90301 37.5671C3.64664 34.5339 3 31.283 3 28C3 24.7169 3.64665 21.466 4.90302 18.4329C6.15938 15.3998 8.00087 12.6438 10.3223 10.3223C12.6438 8.00086 15.3998 6.15937 18.4329 4.90301C21.4661 3.64664 24.717 3 28 3C31.2831 3 34.534 3.64665 37.5671 4.90302C40.6002 6.15939 43.3562 8.00087 45.6777 10.3223C47.9991 12.6438 49.8406 15.3998 51.097 18.4329C52.3534 21.4661 53 24.717 53 28L53 28Z" stroke="#F2FAFD" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28 3C31.283 3 34.5339 3.64664 37.5671 4.90301C40.6002 6.15938 43.3562 8.00087 45.6777 10.3223C47.9991 12.6438 49.8406 15.3998 51.097 18.4329C52.3534 21.4661 53 24.717 53 28" stroke="#33ABDF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/loading-page-error.svg

@@ -0,0 +1,6 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="56" height="56" rx="28" fill="#F04438"/>
+<path d="M28 20.2084V29.8334" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44.6467 21.73V34.27C44.6467 36.3233 43.5467 38.23 41.7684 39.275L30.8784 45.5634C29.1 46.59 26.9 46.59 25.1033 45.5634L14.2133 39.275C12.435 38.2484 11.335 36.3416 11.335 34.27V21.73C11.335 19.6767 12.435 17.7699 14.2133 16.7249L25.1033 10.4366C26.8816 9.40996 29.0817 9.40996 30.8784 10.4366L41.7684 16.7249C43.5467 17.7699 44.6467 19.6584 44.6467 21.73Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28 35.7001V35.8834" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/loading-page-success.svg

@@ -0,0 +1,5 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="56" height="56" rx="28" fill="#12B76A"/>
+<path d="M28 46.3333C38.0833 46.3333 46.3333 38.0833 46.3333 28C46.3333 17.9166 38.0833 9.66663 28 9.66663C17.9166 9.66663 9.66663 17.9166 9.66663 28C9.66663 38.0833 17.9166 46.3333 28 46.3333Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.2084 28L25.3967 33.1883L35.7917 22.8116" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/loading-page-warning.svg

@@ -0,0 +1,6 @@
+<svg width="57" height="56" viewBox="0 0 57 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="56" height="56" rx="28" fill="#FC9700"/>
+<path d="M28.5 46.3333C38.5833 46.3333 46.8333 38.0833 46.8333 28C46.8333 17.9166 38.5833 9.66663 28.5 9.66663C18.4166 9.66663 10.1666 17.9166 10.1666 28C10.1666 38.0833 18.4166 46.3333 28.5 46.3333Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.5 18.8334V28.9167" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.4893 37.1666H28.5057" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/more-dots.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.6665 10.1667C17.6665 9.25 16.9165 8.5 15.9998 8.5C15.0832 8.5 14.3332 9.25 14.3332 10.1667C14.3332 11.0833 15.0832 11.8333 15.9998 11.8333C16.9165 11.8333 17.6665 11.0833 17.6665 10.1667Z" fill="currentColor"/>
+<path d="M17.6665 21.8333C17.6665 20.9167 16.9165 20.1667 15.9998 20.1667C15.0832 20.1667 14.3332 20.9167 14.3332 21.8333C14.3332 22.75 15.0832 23.5 15.9998 23.5C16.9165 23.5 17.6665 22.75 17.6665 21.8333Z" fill="currentColor"/>
+<path d="M17.6665 16C17.6665 15.0833 16.9165 14.3333 15.9998 14.3333C15.0832 14.3333 14.3332 15.0833 14.3332 16C14.3332 16.9167 15.0832 17.6667 15.9998 17.6667C16.9165 17.6667 17.6665 16.9167 17.6665 16Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/time-table.svg

@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0002 24.3333C11.9752 24.3333 8.7085 21.0667 8.7085 17.0417C8.7085 13.0167 11.9752 9.75 16.0002 9.75C20.0252 9.75 23.2918 13.0167 23.2918 17.0417" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 12.6667V16.8333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5 7.66667H18.5" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.8335 20.1667V23.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.3335 20.1667V23.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/toast-error.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5099 5.85L13.5699 2.42C12.5999 1.86 11.3999 1.86 10.4199 2.42L4.48992 5.85C3.51992 6.41 2.91992 7.45 2.91992 8.58V15.42C2.91992 16.54 3.51992 17.58 4.48992 18.15L10.4299 21.58C11.3999 22.14 12.5999 22.14 13.5799 21.58L19.5199 18.15C20.4899 17.59 21.0899 16.55 21.0899 15.42V8.58C21.0799 7.45 20.4799 6.42 19.5099 5.85ZM11.2499 7.75C11.2499 7.34 11.5899 7 11.9999 7C12.4099 7 12.7499 7.34 12.7499 7.75V13C12.7499 13.41 12.4099 13.75 11.9999 13.75C11.5899 13.75 11.2499 13.41 11.2499 13V7.75ZM12.9199 16.63C12.8699 16.75 12.7999 16.86 12.7099 16.96C12.5199 17.15 12.2699 17.25 11.9999 17.25C11.8699 17.25 11.7399 17.22 11.6199 17.17C11.4899 17.12 11.3899 17.05 11.2899 16.96C11.1999 16.86 11.1299 16.75 11.0699 16.63C11.0199 16.51 10.9999 16.38 10.9999 16.25C10.9999 15.99 11.0999 15.73 11.2899 15.54C11.3899 15.45 11.4899 15.38 11.6199 15.33C11.9899 15.17 12.4299 15.26 12.7099 15.54C12.7999 15.64 12.8699 15.74 12.9199 15.87C12.9699 15.99 12.9999 16.12 12.9999 16.25C12.9999 16.38 12.9699 16.51 12.9199 16.63Z" fill="#F04438"/>
+</svg>

package/src/assets/icons/toast-info.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM11.25 8C11.25 7.59 11.59 7.25 12 7.25C12.41 7.25 12.75 7.59 12.75 8V13C12.75 13.41 12.41 13.75 12 13.75C11.59 13.75 11.25 13.41 11.25 13V8ZM12.92 16.38C12.87 16.51 12.8 16.61 12.71 16.71C12.61 16.8 12.5 16.87 12.38 16.92C12.26 16.97 12.13 17 12 17C11.87 17 11.74 16.97 11.62 16.92C11.5 16.87 11.39 16.8 11.29 16.71C11.2 16.61 11.13 16.51 11.08 16.38C11.03 16.26 11 16.13 11 16C11 15.87 11.03 15.74 11.08 15.62C11.13 15.5 11.2 15.39 11.29 15.29C11.39 15.2 11.5 15.13 11.62 15.08C11.86 14.98 12.14 14.98 12.38 15.08C12.5 15.13 12.61 15.2 12.71 15.29C12.8 15.39 12.87 15.5 12.92 15.62C12.97 15.74 13 15.87 13 16C13 16.13 12.97 16.26 12.92 16.38Z" fill="#0096D7"/>
+</svg>

package/src/assets/icons/toast-success.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="#12B76A"/>
+</svg>

package/src/assets/icons/toast-warning.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.76 15.92L15.36 4.4C14.5 2.85 13.31 2 12 2C10.69 2 9.49998 2.85 8.63998 4.4L2.23998 15.92C1.42998 17.39 1.33998 18.8 1.98998 19.91C2.63998 21.02 3.91998 21.63 5.59998 21.63H18.4C20.08 21.63 21.36 21.02 22.01 19.91C22.66 18.8 22.57 17.38 21.76 15.92ZM11.25 9C11.25 8.59 11.59 8.25 12 8.25C12.41 8.25 12.75 8.59 12.75 9V14C12.75 14.41 12.41 14.75 12 14.75C11.59 14.75 11.25 14.41 11.25 14V9ZM12.71 17.71C12.66 17.75 12.61 17.79 12.56 17.83C12.5 17.87 12.44 17.9 12.38 17.92C12.32 17.95 12.26 17.97 12.19 17.98C12.13 17.99 12.06 18 12 18C11.94 18 11.87 17.99 11.8 17.98C11.74 17.97 11.68 17.95 11.62 17.92C11.56 17.9 11.5 17.87 11.44 17.83C11.39 17.79 11.34 17.75 11.29 17.71C11.11 17.52 11 17.26 11 17C11 16.74 11.11 16.48 11.29 16.29C11.34 16.25 11.39 16.21 11.44 16.17C11.5 16.13 11.56 16.1 11.62 16.08C11.68 16.05 11.74 16.03 11.8 16.02C11.93 15.99 12.07 15.99 12.19 16.02C12.26 16.03 12.32 16.05 12.38 16.08C12.44 16.1 12.5 16.13 12.56 16.17C12.61 16.21 12.66 16.25 12.71 16.29C12.89 16.48 13 16.74 13 17C13 17.26 12.89 17.52 12.71 17.71Z" fill="#FC9700"/>
+</svg>

package/src/assets/icons/trash-table.svg

@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.5 10.9833C20.725 10.7083 17.9333 10.5667 15.15 10.5667C13.5 10.5667 11.85 10.65 10.2 10.8167L8.5 10.9833" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.0835 10.1417L13.2668 9.05C13.4002 8.25833 13.5002 7.66667 14.9085 7.66667H17.0918C18.5002 7.66667 18.6085 8.29167 18.7335 9.05833L18.9168 10.1417" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.7087 13.6168L21.167 22.0084C21.0753 23.3168 21.0003 24.3334 18.6753 24.3334H13.3253C11.0003 24.3334 10.9253 23.3168 10.8337 22.0084L10.292 13.6168" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.6084 19.75H17.3834" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.9165 16.4167H18.0832" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/BaseCheckbox/BaseCheckbox.vue

@@ -4,29 +4,25 @@
         :class="classList"
     >
         <div class="base-checkbox__wrapper" @click="handleToggle">
-
-          <div class="base-checkbox__input-wrapper">
-            <input
-              v-model="model"
-              v-bind="inputAttrs"
-              type="checkbox"
-              class="base-checkbox__input"
-            />
-          </div>
-
-            <div class="base-checkbox__icon-wrapper">
-                <base-icon
-                    class="base-checkbox__icon"
-                    name="checkbox"
-                    :size="size"
+            <div class="base-checkbox__input-wrapper">
+                <input
+                    v-model="model"
+                    v-bind="inputAttrs"
+                    type="checkbox"
+                    class="base-checkbox__input"
                 />
+                <div class="base-checkbox__icon-wrapper">
+                    <base-icon
+                        class="base-checkbox__icon"
+                        name="checkbox"
+                        size="custom"
+                    />
+                </div>
             </div>
-
             <div class="base-checkbox__label-wrapper">
-                      <span v-if="label" class="base-checkbox__label">{{ label }}</span>
-
-                      <span v-if="subLabel" class="base-checkbox__sublabel">{{ subLabel }}</span>
-              </div>
+                <span v-if="label" class="base-checkbox__label">{{ label }}</span>
+                <span v-if="subLabel" class="base-checkbox__sublabel">{{ subLabel }}</span>
+            </div>
         </div>
     </div>
 </template>
@@ -39,42 +35,42 @@ import { useAttrs, computed } from 'vue';
 import BaseIcon from '../BaseIcon/BaseIcon.vue';
 
 const props = withDefaults(defineProps<IBaseRadioProps>(), {
-  size: 'medium',
+    size: 'medium',
 });
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void;
+    (e: 'update:modelValue', value: boolean): void;
 }>();
 
 const { sizeClassList } = useKitSize(props);
 const { stateClassList, stateAttrs } = useKitState(props);
 
 const model = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val),
 });
 
 const attrs = useAttrs();
 
 const inputAttrs = computed(() => {
-  return {
-    ...attrs,
-    ...stateAttrs.value,
-    id: props.id,
-  };
+    return {
+        ...attrs,
+        ...stateAttrs.value,
+        id: props.id,
+    };
 });
 
 function handleToggle() {
-  model.value = !model.value;
+    model.value = !model.value;
 }
 
 const classList = computed(() => [
-  sizeClassList.value,
-  stateClassList.value,
-  {
-    '--is-active': model.value,
-    '--is-readonly': props.readonly,
-  },
+    sizeClassList.value,
+    stateClassList.value,
+    {
+        '--is-active': model.value,
+        '--is-readonly': props.readonly,
+    },
 ]);
 </script>
 
@@ -85,8 +81,6 @@ const classList = computed(() => [
 .base-checkbox {
     $item: &;
 
-    --icon-size: 18px;
-
     &__wrapper {
         display: flex;
         column-gap: 10px;
@@ -99,31 +93,36 @@ const classList = computed(() => [
         pointer-events: none;
     }
 
-    &.--medium-size {
+    &.--small-size {
         #{$item} {
             &__wrapper {
-                column-gap: var(--spacing-m);
+                column-gap: var(--spacing-s);
             }
 
             &__label {
-                font: var(--typography-text-m-medium);
+                font: var(--typography-text-s-medium);
             }
 
             &__sublabel {
-                font: var(--typography-text-s-regular);
+                font: var(--typography-text-xs-regular);
             }
 
             &__icon-wrapper {
-                width: 32px;
-                height: 32px;
+                width: 20px;
+                height: 20px;
+            }
+
+            &__icon {
+                width: 15px;
+                height: 15px;
             }
         }
     }
 
-    &.--small-size {
+    &.--medium-size {
         #{$item} {
             &__wrapper {
-                column-gap: var(--spacing-s);
+                column-gap: var(--spacing-m);
             }
 
             &__label {
@@ -138,6 +137,37 @@ const classList = computed(() => [
                 width: 24px;
                 height: 24px;
             }
+
+            &__icon {
+                width: 18px;
+                height: 18px;
+            }
+        }
+    }
+
+    &.--large-size {
+        #{$item} {
+            &__wrapper {
+                column-gap: var(--spacing-l);
+            }
+
+            &__label {
+                font: var(--typography-text-m-medium);
+            }
+
+            &__sublabel {
+                font: var(--typography-text-s-regular);
+            }
+
+            &__icon-wrapper {
+                width: 32px;
+                height: 32px;
+            }
+
+            &__icon {
+                width: 22.4px;
+                height: 22.4px;
+            }
         }
     }
 

package/src/components/BaseChips/BaseChips.vue

@@ -52,7 +52,7 @@ const classList = computed(() => [
         overflow: hidden;
         cursor: pointer;
         height: 100%;
-        width: fit-content;
+        width: 100%;
         background: var(--primary-black-200);
         color: var(--primary-black-800);
         transition: all var(--transition);
@@ -80,6 +80,8 @@ const classList = computed(() => [
         display: flex;
         align-items: center;
         justify-content: center;
+        width: 100%;
+        height: 100%;
     }
 
     &.--is-active {

package/src/components/BaseDefaultPages/BaseDefaultPages.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="base-default-pages">
+        <div class="base-default-pages__wrapper">
+                <div 
+                    class="base-default-pages__image-container"
+                    :class="imageContainer"    
+                >
+                    <img 
+                        :src="imagePath"
+                        alt="image"
+                        class="base-default-pages__image"
+                    />
+                </div>
+            <div class="base-default-pages__content">
+                <div class="base-default-pages__text-wrapper">
+                    <h1 class="base-default-pages__title">{{ title }}</h1>
+                    <p class="base-default-pages__description">{{ description }}</p>
+                </div>
+                <base-button
+                    size="medium"
+                    color="primary"
+                    class="base-default-pages__button"
+                    @click="$emit('click-button')"
+                >
+                    {{ buttonText }}
+                </base-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import BaseButton from '../BaseButton/BaseButton.vue';
+import type { IDefaultPagesProps } from '../../types/default-pages';
+
+const props = defineProps<IDefaultPagesProps>(); 
+
+const imagePath = computed(()=> require(`@/assets/${props.type}.png`))
+const imageContainer = computed<string[]>(()=> [
+    `base-default-pages__image-container--${props.type}`
+])
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-default-pages {
+    &,
+    &__wrapper,
+    &__text-wrapper,
+    &__content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        width: 100%;
+        height: 100%;
+    }
+
+    &__wrapper {
+        align-items: center;
+        justify-content: center;
+        gap: var(--spacing-l);
+        max-width: 996px;
+        background: var(--bg-light);
+        padding: var(--spacing-l) 0;
+
+        @media #{$tablet} {
+            gap: 0;
+        }
+    }
+
+    &__title {
+        font: var(--typography-h3-medium);
+        color: var(--primary-text-primary);
+
+        @media #{$tablet} {
+            font: var(--typography-h1-medium);
+        }
+    }
+
+    &__description {
+        font: var(--typography-text-m-regular);
+        color: var(--primary-text-tertiary);
+
+        @media #{$tablet} {
+            font: var(--typography-h4-regular);
+        }
+    }
+
+    &__text-wrapper {
+        gap: var(--spacing-s);
+    }
+
+    &__content {
+        gap: var(--spacing-2xl);
+    }
+
+    &__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    &__image-container {
+        width: 100%;
+        height: 100%;
+    }
+
+    &__image-container--tech-work {
+        max-width: 334px;
+        max-height: 345px;
+
+        @media #{$tablet} {
+            max-width: 595px;
+            max-height: 614px;
+        }
+    }
+
+    &__image-container--404 {
+        max-width: 335px;
+        max-height: 249px;
+
+        @media #{$tablet} {
+            max-width: 996px;
+            max-height: 614px;
+        }
+    }
+
+    &__button {
+        width: 100%;
+
+        @media #{$tablet} {
+            max-width: 335px;
+        }
+    }
+}
+</style>

package/src/components/BaseDefaultPages/README.md

@@ -0,0 +1,128 @@
+# 📚 Документация компонента **BaseDefaultPages.vue**
+
+> **Назначение** – единый «шаблон страниц» (404, технические работы и т.п.), который выводит заголовок, описание, кнопку и сопутствующую иллюстрацию.  
+> Компонент полностью стилизован через BEM‑классы, использует переменные CSS (см. `variables.scss` и `root.scss`) и поддерживает адаптивную разметку.
+
+## <a name="api-компонента"></a>API компонента
+
+### <a name="пропсы"></a>Пропсы
+
+| Prop          | Тип                                 | Обязательность | Описание                                                                                       | Пример значения |
+|--------------|--------------------------------------|----------------|------------------------------------------------------------------------------------------------|-----------------|
+| `title`      | `string`                             | **да**         | Текст заголовка ( `<h1>` ).                                                                    | `"Ошибка 404"` |
+| `description`| `string`                             | **да**         | Текст описания под заголовком ( `<p>` ).                                                       | `"Неправильно набранный адрес..."` |
+| `buttonText` | `string`                             | **да**         | Текст кнопки **BaseButton**.                                                                   | `"На главную"` |
+| `type`       | `'tech-work' \| '404'`               | **да**         | Ключ, который определяет: <br>· Какой PNG‑файл будет подгружен (`tech-work.png` / `404.png`).<br>· Какой BEM‑модификатор будет добавлен к контейнеру изображения (`base-default-pages__image-container--tech-work` / `...--404`). | `'404'` |
+
+> **Тип `type`** жестко ограничен перечислением. При добавлении нового типа необходимо расширить тип и добавить соответствующие стили/изображения (см. раздел **[Как добавить новый тип страницы]**).
+
+### <a name="тип-iddefaultpagesprops"></a>Тип `IDefaultPagesProps`
+
+```ts
+/**
+ * Параметры компонента BaseDefaultPages.
+ *
+ * @property {string} title         Заголовок страницы.
+ * @property {string} description   Описание (подзаголовок).
+ * @property {string} buttonText    Текст кнопки.
+ * @property {'tech-work'|'404'} type  Тип страницы, определяющий изображение и размеры.
+ */
+export interface IDefaultPagesProps {
+    title: string;
+    description: string;
+    buttonText: string;
+    type: 'tech-work' | '404';
+}
+```
+
+### <a name="вычисляемые-свойства"></a>Внутренние вычисляемые свойства
+
+| Свойство | Тип | Описание |
+|----------|------|----------|
+| `imagePath` | `ComputedRef<string>` | Генерирует путь к изображению: `require('@/assets/${props.type}.png')`. При смене `type` автоматически меняет изображение. |
+| `imageContainer` | `ComputedRef<string[]>` | Возвращает массив CSS‑классов, включающий модификатор: `['base-default-pages__image-container--${props.type}']`. Позволяет менять размеры контейнера в зависимости от типа. |
+
+---
+
+## <a name="пример-использования"></a>Пример использования
+
+```vue
+<!-- DemoPage.vue -->
+<template>
+  <div class="demo-page">
+    <h1>Plugin UI KZT – Компоненты</h1>
+
+    <section class="pages-list">
+      <!-- 404 -->
+      <BaseDefaultPages v-bind="data404" @click-button="goHome" />
+
+      <!-- Технические работы -->
+      <BaseDefaultPages v-bind="dataTechWork" @click-button="goHome" />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import BaseDefaultPages from '@/components/BaseDefaultPages/BaseDefaultPages.vue';
+
+const data404 = ref({
+  title: 'Ошибка 404',
+  description:
+    'Неправильно набранный адрес, или такой страницы больше не существует',
+  buttonText: 'На главную',
+  type: '404',
+});
+
+const dataTechWork = ref({
+  title: 'Технические работы',
+  description: 'Приносим свои извинения, попробуйте зайти позже',
+  buttonText: 'На главную',
+  type: 'tech-work',
+});
+
+// Пример простого навигационного обратного вызова
+const goHome = () => {
+  // например, router.push('/')
+  console.log('Перенаправление на главную');
+};
+</script>
+
+<style scoped lang="scss">
+.demo-page {
+  padding: var(--spacing-l);
+}
+.pages-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xl);
+}
+</style>
+
+## <a name="как-добавить-новый-тип-страницы"></a>Как добавить новый тип страницы
+
+1. **Добавьте PNG‑файл** в каталог `src/assets/` с именем `<new-type>.png` (например, `maintenance.png`).  
+2. **Обновите тип пропса** в `IDefaultPagesProps`:
+
+   ```ts
+   export interface IDefaultPagesProps {
+     // …
+     type: 'tech-work' | '404' | 'maintenance';
+   }
+   ```
+
+3. **Создайте/добавьте модификатор** в SCSS:
+
+   ```scss
+   .base-default-pages__image-container--maintenance {
+     max-width: 400px;
+     max-height: 300px;
+
+     @media #{$tablet} {
+       max-width: 800px;
+       max-height: 600px;
+     }
+   }
+   ```
+
+4. **(Опционально) Добавьте адаптивные стили** для заголовка/описания, если требуется особый дизайн.  

package/src/components/BaseOpenedListItem/BaseOpenedListItem.vue

@@ -157,7 +157,7 @@ const actualComponent = computed(() => {
         #{$item} {
             &__wrapper {
                 gap: var(--spacing-s);
-                height: 40px;
+                min-height: 40px;
                 padding: var(--spacing-s) var(--spacing-2l);
             }
 
@@ -177,7 +177,7 @@ const actualComponent = computed(() => {
         #{$item} {
             &__wrapper {
                 gap: var(--spacing-m);
-                height: 48px;
+                min-height: 48px;
                 padding: var(--spacing-m) var(--spacing-2l);
             }
 
@@ -197,7 +197,7 @@ const actualComponent = computed(() => {
         #{$item} {
             &__wrapper {
                 gap: var(--spacing-l);
-                height: 60px;
+                min-height: 60px;
                 padding: var(--spacing-2l) var(--spacing-l);
             }