@milaboratories/uikit 2.2.82 → 2.2.83

package/src/components/PlDropdown/pl-dropdown.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-dropdown__options {
   --option-hover-bg: var(--btn-sec-hover-grey);
@@ -213,7 +213,7 @@
     &.arrow-icon-default {
       transition: transform .2s;
       background-color: var(--control-mask-fill);
-      @include mask(url('@/assets/images/16_chevron-down.svg'), 16px);
+      @include mask(url('../../assets/images/16_chevron-down.svg'), 16px);
     }
   }
 

package/src/components/PlDropdownLegacy/PlDropdownLegacy.vue

@@ -10,19 +10,20 @@ export default {
 <script lang="ts" setup generic="M = unknown">
 import './pl-dropdown-legacy.scss';
 import { computed, reactive, ref, unref, useSlots, watch, watchPostEffect } from 'vue';
-import { tap, tapIf } from '@/helpers/functions';
-import { PlTooltip } from '@/components/PlTooltip';
-import DoubleContour from '@/utils/DoubleContour.vue';
-import { useLabelNotch } from '@/utils/useLabelNotch';
-import type { ListOption, ListOptionNormalized } from '@/types';
-import { scrollIntoView } from '@/helpers/dom';
-import { deepEqual } from '@/helpers/objects';
-import DropdownListItem from '@/components/DropdownListItem.vue';
-import LongText from '@/components/LongText.vue';
+import { tap, tapIf } from '../../helpers/functions';
+import { PlTooltip } from '../PlTooltip';
+import DoubleContour from '../../utils/DoubleContour.vue';
+import { useLabelNotch } from '../../utils/useLabelNotch';
+import type { ListOption, ListOptionNormalized } from '../../types';
+import { scrollIntoView } from '../../helpers/dom';
+import { deepEqual } from '../../helpers/objects';
+import DropdownListItem from '../DropdownListItem.vue';
+import LongText from '../LongText.vue';
 import { PlIcon16 } from '../PlIcon16';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
-import { normalizeListOptions } from '@/helpers/utils';
-import { getErrorMessage } from '@/helpers/error.ts';
+import { normalizeListOptions } from '../../helpers/utils';
+import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
+import { getErrorMessage } from '../../helpers/error.ts';
 
 const emit = defineEmits<{
   /**
@@ -344,7 +345,7 @@ watchPostEffect(() => {
           </div>
         </div>
         <label v-if="label">
-          <i v-if="required" class="required-icon" />
+          <SvgRequired v-if="required" />
           <span>{{ label }}</span>
           <PlTooltip v-if="slots.tooltip" class="info" position="top">
             <template #tooltip>

package/src/components/PlDropdownLegacy/pl-dropdown-legacy.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-dropdown-legacy {
   $root: &;
@@ -203,7 +203,7 @@
     // Default "arrow" icon (16x16) 
     &.arrow-icon-default {
       background-color: var(--control-mask-fill);
-      @include mask(url('@/assets/images/16_chevron-down.svg'), 16px);
+      @include mask(url('../../assets/images/16_chevron-down.svg'), 16px);
     }
   }
 
@@ -224,7 +224,7 @@
 
     .arrow-icon {
       background-color: var(--control-mask-fill);
-      @include mask(url(@/assets/images/16_chevron-up.svg), 16px);
+      @include mask(url(../../assets/images/16_chevron-up.svg), 16px);
     }
   }
 

package/src/components/PlDropdownLine/PlDropdownLine.vue

@@ -2,17 +2,17 @@
 import './pl-dropdown-line.scss';
 import type { StyleValue } from 'vue';
 import { computed, nextTick, reactive, ref, toRef, watch } from 'vue';
-import { deepEqual } from '@/helpers/objects';
-import { useClickOutside } from '@/composition/useClickOutside';
-import { useFilteredList } from '@/composition/useFilteredList';
+import { deepEqual } from '../../helpers/objects';
+import { useClickOutside } from '../../composition/useClickOutside';
+import { useFilteredList } from '../../composition/useFilteredList';
 import ResizableInput from './ResizableInput.vue';
-import { tapIf, tap } from '@/helpers/functions';
-import { scrollIntoView } from '@/helpers/dom';
-import DropdownListItem from '@/components/DropdownListItem.vue';
-import TabItem from '@/components/TabItem.vue';
-import type { ListOption } from '@/types';
-import { normalizeListOptions } from '@/helpers/utils';
-import { useElementPosition } from '@/composition/usePosition';
+import { tapIf, tap } from '../../helpers/functions';
+import { scrollIntoView } from '../../helpers/dom';
+import DropdownListItem from '../DropdownListItem.vue';
+import TabItem from '../TabItem.vue';
+import type { ListOption } from '../../types';
+import { normalizeListOptions } from '../../helpers/utils';
+import { useElementPosition } from '../../composition/usePosition';
 
 const emit = defineEmits(['update:modelValue']); // at the top always
 

package/src/components/PlDropdownLine/pl-dropdown-line.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-line-dropdown {
     display: flex;
@@ -57,17 +57,17 @@
         align-items: center;
         min-width: 16px;
         background-color: var(--control-mask-fill);
-        @include mask(url(@/assets/images/16_chevron-down.svg), 16px);
+        @include mask(url(../../assets/images/16_chevron-down.svg), 16px);
     }
 
     &__icon-clear {
-        @include mask(url(@/assets/images/16_clear.svg), 16px);
+        @include mask(url(../../assets/images/16_clear.svg), 16px);
         background-color: var(--color-ic-02);
     }
 
     &.open {
         #{$this}__icon {
-            @include mask(url(@/assets/images/16_chevron-up.svg), 16px);
+            @include mask(url(../../assets/images/16_chevron-up.svg), 16px);
         }
     }
 

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -10,18 +10,19 @@ export default {
 <script lang="ts" setup generic="M = unknown">
 import './pl-dropdown-multi.scss';
 import { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';
-import { tap } from '@/helpers/functions';
-import { PlTooltip } from '@/components/PlTooltip';
-import { PlChip } from '@/components/PlChip';
-import DoubleContour from '@/utils/DoubleContour.vue';
-import { useLabelNotch } from '@/utils/useLabelNotch';
-import type { ListOption } from '@/types';
-import DropdownListItem from '@/components/DropdownListItem.vue';
-import { deepEqual, deepIncludes } from '@/helpers/objects';
-import { normalizeListOptions } from '@/helpers/utils';
-import DropdownOverlay from '@/utils/DropdownOverlay/DropdownOverlay.vue';
+import { tap } from '../../helpers/functions';
+import { PlTooltip } from '../PlTooltip';
+import { PlChip } from '../PlChip';
+import DoubleContour from '../../utils/DoubleContour.vue';
+import { useLabelNotch } from '../../utils/useLabelNotch';
+import type { ListOption } from '../../types';
+import DropdownListItem from '../DropdownListItem.vue';
+import { deepEqual, deepIncludes } from '../../helpers/objects';
+import { normalizeListOptions } from '../../helpers/utils';
+import DropdownOverlay from '../../utils/DropdownOverlay/DropdownOverlay.vue';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
-import { getErrorMessage } from '@/helpers/error.ts';
+import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
+import { getErrorMessage } from '../../helpers/error.ts';
 
 const emit = defineEmits<{
   (e: 'update:modelValue', v: M[]): void;
@@ -275,7 +276,7 @@ watchPostEffect(() => {
           </div>
         </div>
         <label v-if="label">
-          <i v-if="required" class="required-icon" />
+          <SvgRequired v-if="required" />
           <span>{{ label }}</span>
           <PlTooltip v-if="slots.tooltip" class="info" position="top">
             <template #tooltip>

package/src/components/PlDropdownMulti/pl-dropdown-multi.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-dropdown-multi {
   $root: &;
@@ -83,8 +83,8 @@
       align-items: center;
       gap: 12px;
 
-      --base-icon: url('@/assets/images/24_checkbox-light-enabled-unchecked.svg');
-      --checked-icon: url('@/assets/images/24_checkbox-light-enabled-checked.svg');
+      --base-icon: url('../../assets/images/24_checkbox-light-enabled-unchecked.svg');
+      --checked-icon: url('../../assets/images/24_checkbox-light-enabled-checked.svg');
 
       .pl-dropdown-multi__checkmark {
         cursor: pointer;
@@ -93,8 +93,8 @@
         @include icon(var(--base-icon), 24px);
 
         [data-theme="dark"] & {
-          --base-icon: url('@/assets/images/24_checkbox-dark-enabled-unchecked.svg');
-          --checked-icon: url('@/assets/images/24_checkbox-dark-enabled-checked.svg');
+          --base-icon: url('../../assets/images/24_checkbox-dark-enabled-unchecked.svg');
+          --checked-icon: url('../../assets/images/24_checkbox-dark-enabled-checked.svg');
         }
       }
 
@@ -219,7 +219,7 @@
     &.arrow-icon-default {
       transition: transform .2s;
       background-color: var(--control-mask-fill);
-      @include mask(url('@/assets/images/16_chevron-down.svg'), 16px);
+      @include mask(url('../../assets/images/16_chevron-down.svg'), 16px);
     }
   }
 
@@ -246,7 +246,7 @@
     @include abs-center-y;
     right: 36px;
     z-index: 1;
-    @include icon(url("@/assets/images/16_clear.svg"), 16px); // @todo mask-image
+    @include icon(url("../../assets/images/16_clear.svg"), 16px); // @todo mask-image
     cursor: pointer;
   }
 
@@ -272,7 +272,7 @@
 
     .arrow {
       background-color: var(--control-mask-fill);
-      @include mask(url(@/assets/images/16_chevron-up.svg), 16px);
+      @include mask(url(../../assets/images/16_chevron-up.svg), 16px);
     }
   }
 

package/src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ModelRef, RefOption } from '@/types';
+import type { ModelRef, RefOption } from '../../types';
 import PlDropdownMulti from '../PlDropdownMulti/PlDropdownMulti.vue';
 import { computed, useSlots } from 'vue';
 

package/src/components/PlDropdownRef/PlDropdownRef.vue

@@ -8,7 +8,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import type { ModelRef, RefOption } from '@/types';
+import type { ModelRef, RefOption } from '../../types';
 import { PlDropdown } from '../PlDropdown';
 import { computed, useSlots } from 'vue';
 

package/src/components/PlEditableTitle/PlEditableTitle.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useTransformedModel } from '@/composition/useTransformedModel';
+import { useTransformedModel } from '../../composition/useTransformedModel';
 import style from './pl-editable-title.module.scss';
 import { computed, ref } from 'vue';
 

package/src/components/PlEditableTitle/pl-editable-title.module.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .component {
   position: relative;
@@ -58,7 +58,7 @@
 
     &::before {
       content: '';
-      @include mask-var(url(@icons/icon-assets-min/24_edit.svg));
+      @include mask-var(url(../../assets/icons/icon-assets-min/24_edit.svg));
       position: absolute;
       right: calc((var(--mask-size)) * -1);
       bottom: 6px;

package/src/components/PlErrorAlert/PlErrorAlert.vue

@@ -5,8 +5,8 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { PlClipboard } from '@/components/PlClipboard';
-import { PlMaskIcon16 } from '@/components/PlMaskIcon16';
+import { PlClipboard } from '../PlClipboard';
+import { PlMaskIcon16 } from '../PlMaskIcon16';
 
 const props = withDefaults(
   defineProps<{

package/src/components/PlErrorBoundary/PlErrorBoundary.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, onErrorCaptured, ref, onBeforeUpdate } from 'vue';
-import { PlErrorAlert } from '@/components/PlErrorAlert';
+import { PlErrorAlert } from '../PlErrorAlert';
 import { isErrorLike, tryDo } from '@milaboratories/helpers';
 
 const extractMessage = (err: unknown): undefined | string => {

package/src/components/PlFileDialog/Local.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import style from './pl-file-dialog.module.scss';
-import type { ImportedFiles } from '@/types';
+import type { ImportedFiles } from '../../types';
 import { PlIcon24 } from '../PlIcon24';
 import { computed, reactive } from 'vue';
 import { getRawPlatformaInstance, type OpenDialogFilter } from '@platforma-sdk/model';

package/src/components/PlFileDialog/PlFileDialog.vue

@@ -2,7 +2,7 @@
 import style from './pl-file-dialog.module.scss';
 import { computed, ref, useTemplateRef } from 'vue';
 import { notEmpty } from '@milaboratories/helpers';
-import type { ImportedFiles, SimpleOption } from '@/types';
+import type { ImportedFiles, SimpleOption } from '../../types';
 import { PlDialogModal } from '../PlDialogModal';
 import { PlBtnPrimary } from '../PlBtnPrimary';
 import { PlBtnGhost } from '../PlBtnGhost';

package/src/components/PlFileDialog/Remote.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useEventListener } from '@/composition/useEventListener';
-import type { ImportedFiles } from '@/types';
+import { useEventListener } from '../../composition/useEventListener';
+import type { ImportedFiles } from '../../types';
 import { between, notEmpty, tapIf } from '@milaboratories/helpers';
 import { getRawPlatformaInstance, type StorageHandle } from '@platforma-sdk/model';
 import { computed, onMounted, reactive, toRef, watch } from 'vue';

package/src/components/PlFileDialog/pl-file-dialog.module.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .component {
   .local {
@@ -136,7 +136,7 @@
         margin-top: 40px;
         width: 240px;
         height: 200px;
-        background: url('@/assets/images/no-data-cat.svg');
+        background: url('../../assets/images/no-data-cat.svg');
       }
 
       .message {
@@ -162,7 +162,7 @@
         margin-top: 40px;
         width: 400px;
         height: 200px;
-        background: url('@/assets/images/empty-cat.svg');
+        background: url('../../assets/images/empty-cat.svg');
       }
 
       .message {

package/src/components/PlFileInput/PlFileInput.vue

@@ -1,16 +1,17 @@
 <script lang="ts" setup>
 import './pl-file-input.scss';
-import { PlTooltip } from '@/components/PlTooltip';
-import { PlFileDialog } from '@/components/PlFileDialog';
-import type { ImportedFiles } from '@/types';
+import { PlTooltip } from '../PlTooltip';
+import { PlFileDialog } from '../PlFileDialog';
+import type { ImportedFiles } from '../../types';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
 import { computed, reactive, ref, useSlots, watch } from 'vue';
 import type { ImportFileHandle, ImportProgress } from '@platforma-sdk/model';
 import { getFileNameFromHandle, getFilePathFromHandle } from '@platforma-sdk/model';
-import DoubleContour from '@/utils/DoubleContour.vue';
-import { useLabelNotch } from '@/utils/useLabelNotch';
+import DoubleContour from '../../utils/DoubleContour.vue';
+import { useLabelNotch } from '../../utils/useLabelNotch';
 import { prettyBytes } from '@milaboratories/helpers';
-import { getErrorMessage } from '@/helpers/error.ts';
+import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
+import { getErrorMessage } from '../../helpers/error.ts';
 
 const data = reactive({
   fileDialogOpen: false,
@@ -175,7 +176,7 @@ if (!props.cellStyle) {
     >
       <div :style="progressStyle" class="pl-file-input__progress" />
       <label v-if="!cellStyle && label" ref="label">
-        <i v-if="required" class="required-icon" />
+        <SvgRequired v-if="required" />
         <span>{{ label }}</span>
         <PlTooltip v-if="slots.tooltip || filePath" class="info" position="top">
           <template #tooltip>

package/src/components/PlFileInput/pl-file-input.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-file-input {
   $root: &;

package/src/components/PlIcon16/PlIcon16.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import type { MaskIconName16, Size } from '@/types';
+import type { MaskIconName16, Size } from '../../types';
 
 const props = defineProps<{
   name: MaskIconName16;

package/src/components/PlIcon24/PlIcon24.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import type { MaskIconName24, Size } from '@/types';
+import type { MaskIconName24, Size } from '../../types';
 
 const props = defineProps<{
   name: MaskIconName24;

package/src/components/PlLogView/PlLogView.vue

@@ -14,8 +14,8 @@ import './pl-log-view.scss';
 import { okOptional, tapIf } from '@milaboratories/helpers';
 import type { AnyLogHandle, Platforma, ValueOrErrors } from '@platforma-sdk/model';
 import { useLogHandle } from './useLogHandle';
-import { useLabelNotch } from '@/utils/useLabelNotch';
-import DoubleContour from '@/utils/DoubleContour.vue';
+import { useLabelNotch } from '../../utils/useLabelNotch';
+import DoubleContour from '../../utils/DoubleContour.vue';
 import { PlTooltip } from '../PlTooltip';
 
 const getOutputError = <T>(o?: ValueOrErrors<T>) => {

package/src/components/PlLogView/pl-log-view.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-log-view {
   --log-background: var(--bg-base-light);

package/src/components/PlMaskIcon16/PlMaskIcon16.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import type { MaskIconName16, Size } from '@/types';
+import type { MaskIconName16, Size } from '../../types';
 
 const props = defineProps<{
   name: MaskIconName16;

package/src/components/PlMaskIcon24/PlMaskIcon24.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import type { MaskIconName24, Size } from '@/types';
+import type { MaskIconName24, Size } from '../../types';
 
 const props = defineProps<{
   name: MaskIconName24;

package/src/components/PlNumberField/PlNumberField.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import './pl-number-field.scss';
-import DoubleContour from '@/utils/DoubleContour.vue';
-import { useLabelNotch } from '@/utils/useLabelNotch';
+import DoubleContour from '../../utils/DoubleContour.vue';
+import { useLabelNotch } from '../../utils/useLabelNotch';
 import { computed, ref, useSlots, watch } from 'vue';
-import { PlTooltip } from '@/components/PlTooltip';
+import { PlTooltip } from '../PlTooltip';
 
 type NumberInputProps = {
   /** Input is disabled if true */

package/src/components/PlProgressCell/PlProgressCell.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import './pl-progress-cell.scss';
 import PlMaskIcon24 from '../PlMaskIcon24/PlMaskIcon24.vue';
 import type { PlProgressCellProps } from './types';
-import { getErrorMessage } from '@/helpers/error.ts';
+import { getErrorMessage } from '../../helpers/error.ts';
 
 const props = withDefaults(defineProps<PlProgressCellProps>(), {
   stage: 'not_started',

package/src/components/PlSlideModal/PlSlideModal.vue

@@ -8,8 +8,8 @@ export default {
 <script lang="ts" setup>
 import './pl-slide-modal.scss';
 import { ref, useAttrs, useSlots } from 'vue';
-import TransitionSlidePanel from '@/components/TransitionSlidePanel.vue';
-import { useClickOutside, useEventListener } from '@/index';
+import TransitionSlidePanel from '../TransitionSlidePanel.vue';
+import { useClickOutside, useEventListener } from '../../index';
 
 const slots = useSlots(); // title & actions
 

package/src/components/PlSlideModal/pl-slide-modal.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-slide-modal {
   --padding-top: 24px;
@@ -33,7 +33,7 @@
     right: 12px;
     cursor: pointer;
     background-color: #d3d7e0;
-    @include mask(url('@/assets/images/24_close.svg'), 24px);
+    @include mask(url('../../assets/images/24_close.svg'), 24px);
 
     &:hover {
       background-color: var(--main-dark-color);

package/src/components/PlSplash/PlSplash.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import style from './pl-splash.module.scss';
-import { PlLoaderCircular } from '@/components/PlLoaderCircular';
+import { PlLoaderCircular } from '../PlLoaderCircular';
 
 withDefaults(defineProps<{
   /**

package/src/components/PlTabs/pl-tabs.module.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .component {
   --pl-tabs-height: 40px;

package/src/components/PlTextArea/PlTextArea.vue

@@ -8,11 +8,12 @@ export default {
 <script lang="ts" setup>
 import './pl-textarea.scss';
 import { computed, onMounted, ref, useSlots } from 'vue';
-import { PlTooltip } from '@/components/PlTooltip';
-import DoubleContour from '@/utils/DoubleContour.vue';
-import { useLabelNotch } from '@/utils/useLabelNotch';
-import { useValidation } from '@/utils/useValidation';
-import { getErrorMessage } from '@/helpers/error.ts';
+import { PlTooltip } from '../PlTooltip';
+import DoubleContour from '../../utils/DoubleContour.vue';
+import { useLabelNotch } from '../../utils/useLabelNotch';
+import { useValidation } from '../../utils/useValidation';
+import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
+import { getErrorMessage } from '../../helpers/error.ts';
 
 const slots = useSlots();
 
@@ -126,7 +127,7 @@ onMounted(() => {
   <div class="ui-text-area__envelope">
     <div ref="root" class="ui-text-area" :class="{ error: hasErrors, disabled, dashed, nonEmpty }">
       <label v-if="label" ref="label">
-        <i v-if="required" class="required-icon" />
+        <SvgRequired v-if="required" />
         <span>{{ label }}</span>
         <PlTooltip v-if="slots.tooltip" class="info" position="top">
           <template #tooltip>

package/src/components/PlTextArea/pl-textarea.scss

@@ -1,4 +1,4 @@
-@use '@/assets/mixins' as *;
+@use '../../assets/mixins' as *;
 
 .ui-text-area {
   $root: &;

package/src/components/PlTextField/PlTextField.vue

@@ -10,14 +10,15 @@ export default {
 <script lang="ts" setup generic="M, E = string, C = E">
 import './pl-text-field.scss';
 import { computed, reactive, ref, useSlots } from 'vue';
-import { PlTooltip } from '@/components/PlTooltip';
-import DoubleContour from '@/utils/DoubleContour.vue';
-import { useLabelNotch } from '@/utils/useLabelNotch';
-import { useValidation } from '@/utils/useValidation';
+import { PlTooltip } from '../PlTooltip';
+import DoubleContour from '../../utils/DoubleContour.vue';
+import { useLabelNotch } from '../../utils/useLabelNotch';
+import { useValidation } from '../../utils/useValidation';
 import { PlIcon16 } from '../PlIcon16';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
 import type { Equal } from '@milaboratories/helpers';
-import { getErrorMessage } from '@/helpers/error.ts';
+import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
+import { getErrorMessage } from '../../helpers/error.ts';
 
 const slots = useSlots();
 
@@ -190,7 +191,7 @@ useLabelNotch(rootRef);
       }"
     >
       <label v-if="label" ref="label">
-        <i v-if="required" class="required-icon" />
+        <SvgRequired v-if="required" />
         <span>{{ label }}</span>
         <PlTooltip v-if="slots.tooltip" class="info" position="top">
           <template #tooltip>

package/src/components/PlTextField/pl-text-field.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-text-field {
   $root: &;

package/src/components/PlTooltip/PlTooltip.vue

@@ -9,8 +9,8 @@ export default {
 import './pl-tooltip.scss';
 import { computed, onUnmounted, reactive, ref, toRef, watch } from 'vue';
 import { useTooltipPosition } from './useTooltipPosition';
-import * as utils from '@/helpers/utils';
-import { useClickOutside } from '@/composition/useClickOutside';
+import * as utils from '../../helpers/utils';
+import { useClickOutside } from '../../composition/useClickOutside';
 import Beak from './Beak.vue';
 import { tMap } from './global';
 

package/src/components/PlTooltip/useTooltipPosition.ts

@@ -1,6 +1,6 @@
 import { computed, type Ref, ref, unref } from 'vue';
-import { useElementPosition } from '@/composition/usePosition';
-import type { ElementPosition } from '@/types';
+import { useElementPosition } from '../../composition/usePosition';
+import type { ElementPosition } from '../../types';
 
 type Options = {
   position: 'top-left' | 'right' | 'left' | 'top' | 'southwest';

package/src/components/Scrollable.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import VScroll from '@/components/VScroll.vue';
-import HScroll from '@/components/HScroll.vue';
+import VScroll from './VScroll.vue';
+import HScroll from './HScroll.vue';
 import { onMounted, onUnmounted, reactive, ref, unref } from 'vue';
-import { tapIf, copyProps } from '@/helpers/functions';
-import { useResizeObserver } from '@/composition/useResizeObserver';
+import { tapIf, copyProps } from '../helpers/functions';
+import { useResizeObserver } from '../composition/useResizeObserver';
 
 const containerRef = ref<HTMLElement>();