@milaboratories/uikit 2.2.82 → 2.2.84

package/src/components/PlBtnLink/PlBtnLink.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import './pl-btn-link.scss';
-import type { MaskIconName16, Size } from '@/types';
-import BtnSecondary from '@/components/PlBtnSecondary/PlBtnSecondary.vue';
+import type { MaskIconName16, Size } from '../../types';
+import BtnSecondary from '../PlBtnSecondary/PlBtnSecondary.vue';
 import { ref } from 'vue';
 
 const props = defineProps<{

package/src/components/PlBtnLink/pl-btn-link.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .ui-btn-link {
   display: flex;

package/src/components/PlBtnPrimary/PlBtnPrimary.vue

@@ -9,8 +9,8 @@ export default {
 
 <script lang="ts" setup>
 import './pl-btn-primary.scss';
-import type { MaskIconName16, Size } from '@/types';
-import BtnBase from '@/base/BtnBase.vue';
+import type { MaskIconName16, Size } from '../../types';
+import BtnBase from '../../base/BtnBase.vue';
 
 const props = defineProps<{
   /**

package/src/components/PlBtnPrimary/pl-btn-primary.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-btn-primary {
   @include base-btn;

package/src/components/PlBtnSecondary/PlBtnSecondary.vue

@@ -9,8 +9,8 @@ export default {
 
 <script lang="ts" setup>
 import './pl-btn-secondary.scss';
-import type { MaskIconName16, Size } from '@/types';
-import BtnBase from '@/base/BtnBase.vue';
+import type { MaskIconName16, Size } from '../../types';
+import BtnBase from '../../base/BtnBase.vue';
 
 const props = defineProps<{
   /**

package/src/components/PlBtnSecondary/pl-btn-secondary.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-btn-secondary {
   @include base-btn;

package/src/components/PlBtnSplit/PlBtnSplit.vue

@@ -2,11 +2,11 @@
 import { computed, reactive, ref, unref, watch } from 'vue';
 import './pl-btn-split.scss';
 import DropdownListItem from '../DropdownListItem.vue';
-import type { ListOption } from '@/types';
-import { useElementPosition } from '@/composition/usePosition';
-import { normalizeListOptions } from '@/helpers/utils';
+import type { ListOption } from '../../types';
+import { useElementPosition } from '../../composition/usePosition';
+import { normalizeListOptions } from '../../helpers/utils';
 import { deepEqual } from '@milaboratories/helpers';
-import PlMaskIcon16 from '../PlMaskIcon16/PlMaskIcon16.vue';
+import { PlMaskIcon16 } from '../PlMaskIcon16';
 
 const props = defineProps<{
   /**

package/src/components/PlBtnSplit/pl-btn-split.scss

@@ -59,7 +59,7 @@
 
     &__icon,
     .mask-loading {
-        background-color: var(--border-color);
+        --icon-color: var(--border-color);
     }
 
     &__icon-container {

package/src/components/PlChartStackedBar/Legends.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import type { Color } from '@/colors';
+import type { Color } from '../../colors';
 
 function splitBy<T>(arr: T[], n: number): T[][] {
   const res = [];

package/src/components/PlChartStackedBar/types.ts

@@ -1,4 +1,4 @@
-import type { Color } from '@/colors';
+import type { Color } from '../../colors';
 
 export type PlChartStackedBarSegment = {
   value: number;

package/src/components/PlCheckbox/pl-checkbox-base.scss

@@ -1,10 +1,10 @@
 .pl-checkbox-base {
-  --enabled-unchecked-icon: url('@/assets/images/24_checkbox-light-enabled-unchecked.svg');
-  --enabled-checked-icon: url('@/assets/images/24_checkbox-light-enabled-checked.svg');
-  --enabled-indeterminate-icon: url('@/assets/images/24_checkbox-light-enabled-indeterminate.svg');
-  --disabled-unchecked-icon: url('@/assets/images/24_checkbox-light-disabled-unchecked.svg');
-  --disabled-checked-icon: url('@/assets/images/24_checkbox-light-disabled-checked.svg');
-  --disabled-indeterminate-icon: url('@/assets/images/24_checkbox-light-disabled-indeterminate.svg');
+  --enabled-unchecked-icon: url('../../assets/images/24_checkbox-light-enabled-unchecked.svg');
+  --enabled-checked-icon: url('../../assets/images/24_checkbox-light-enabled-checked.svg');
+  --enabled-indeterminate-icon: url('../../assets/images/24_checkbox-light-enabled-indeterminate.svg');
+  --disabled-unchecked-icon: url('../../assets/images/24_checkbox-light-disabled-unchecked.svg');
+  --disabled-checked-icon: url('../../assets/images/24_checkbox-light-disabled-checked.svg');
+  --disabled-indeterminate-icon: url('../../assets/images/24_checkbox-light-disabled-indeterminate.svg');
 
   cursor: pointer;
   outline: none;
@@ -36,11 +36,11 @@
   }
 
   [data-theme="dark"] & {
-    --enabled-unchecked-icon: url('@/assets/images/24_checkbox-dark-enabled-unchecked.svg');
-    --enabled-checked-icon: url('@/assets/images/24_checkbox-dark-enabled-checked.svg');
-    --enabled-indeterminate-icon: url('@/assets/images/24_checkbox-dark-enabled-indeterminate.svg');
-    --disabled-unchecked-icon: url('@/assets/images/24_checkbox-dark-disabled-unchecked.svg');
-    --disabled-checked-icon: url('@/assets/images/24_checkbox-dark-disabled-checked.svg');
-    --disabled-indeterminate-icon: url('@/assets/images/24_checkbox-dark-disabled-indeterminate.svg');
+    --enabled-unchecked-icon: url('../../assets/images/24_checkbox-dark-enabled-unchecked.svg');
+    --enabled-checked-icon: url('../../assets/images/24_checkbox-dark-enabled-checked.svg');
+    --enabled-indeterminate-icon: url('../../assets/images/24_checkbox-dark-enabled-indeterminate.svg');
+    --disabled-unchecked-icon: url('../../assets/images/24_checkbox-dark-disabled-unchecked.svg');
+    --disabled-checked-icon: url('../../assets/images/24_checkbox-dark-disabled-checked.svg');
+    --disabled-indeterminate-icon: url('../../assets/images/24_checkbox-dark-disabled-indeterminate.svg');
   }
 }

package/src/components/PlCheckboxGroup/PlCheckboxGroup.vue

@@ -9,8 +9,8 @@ export default {
 
 <script lang="ts" setup generic="M = unknown">
 import './pl-checkbox-group.scss';
-import type { SimpleOption } from '@/types';
-import PlCheckboxBase from '@/components/PlCheckbox/PlCheckboxBase.vue';
+import type { SimpleOption } from '../../types';
+import PlCheckboxBase from '../PlCheckbox/PlCheckboxBase.vue';
 import { PlTooltip } from '../PlTooltip';
 import { useSlots } from 'vue';
 

package/src/components/PlChip/PlChip.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import './pl-chip.scss';
 import { onMounted, ref } from 'vue';
-import { PlTooltip } from '@/components/PlTooltip';
+import { PlTooltip } from '../PlTooltip';
 
 defineEmits(['close']);
 

package/src/components/PlChip/pl-chip.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-chip-tooltip {
   display: inline-flex;
@@ -63,7 +63,7 @@
 
     &--icon {
       background: var(--mask-color);
-      @include mask(url('@/assets/images/16_close.svg'), 16px);
+      @include mask(url('../../assets/images/16_close.svg'), 16px);
     }
   }
 }

package/src/components/PlClipboard/PlClipboard.vue

@@ -5,8 +5,8 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { PlMaskIcon16 } from '@/components/PlMaskIcon16';
-import type { Size } from '@/types.ts';
+import { PlMaskIcon16 } from '../PlMaskIcon16';
+import type { Size } from '../../types.ts';
 import { computed, onUnmounted, ref } from 'vue';
 
 const props = defineProps<{

package/src/components/PlDialogModal/PlDialogModal.vue

@@ -5,11 +5,11 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { useEventListener } from '@/composition/useEventListener';
+import { useEventListener } from '../../composition/useEventListener';
 import './pl-dialog-modal.scss';
 import { computed, ref, useSlots } from 'vue';
-import PlCloseModalBtn from '@/utils/PlCloseModalBtn.vue';
-import type { Size } from '@/types';
+import PlCloseModalBtn from '../../utils/PlCloseModalBtn.vue';
+import type { Size } from '../../types';
 
 const slots = useSlots();
 

package/src/components/PlDialogModal/pl-dialog-modal.scss

@@ -1,4 +1,4 @@
-@use '@/assets/mixins' as *;
+@use '../../assets/mixins' as *;
 
 .pl-dialog-modal {
   --padding-top: 24px;

package/src/components/PlDropdown/PlDropdown.vue

@@ -10,19 +10,20 @@ export default {
 <script lang="ts" setup generic="M = unknown">
 import './pl-dropdown.scss';
 import { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';
-import { tap } 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 { deepEqual } from '@/helpers/objects';
-import DropdownListItem from '@/components/DropdownListItem.vue';
-import LongText from '@/components/LongText.vue';
-import { normalizeListOptions } from '@/helpers/utils';
+import { tap } 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 { deepEqual } from '../../helpers/objects';
+import DropdownListItem from '../DropdownListItem.vue';
+import LongText from '../LongText.vue';
+import { normalizeListOptions } from '../../helpers/utils';
 import { PlIcon16 } from '../PlIcon16';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
-import { DropdownOverlay } from '@/utils/DropdownOverlay';
-import { getErrorMessage } from '@/helpers/error.ts';
+import { DropdownOverlay } from '../../utils/DropdownOverlay';
+import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
+import { getErrorMessage } from '../../helpers/error.ts';
 
 const emit = defineEmits<{
   /**
@@ -343,7 +344,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/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);
@@ -189,13 +189,13 @@
 
     .mask-16,
     .mask-24 {
-      background-color: var(--control-mask-fill);
+      --icon-color: var(--control-mask-fill);
       cursor: pointer;
     }
 
     .mask-loading {
+      --icon-color: #07AD3E;
       animation: spin 2.5s linear infinite;
-      background-color: #07AD3E;
     }
   }
 
@@ -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: &;
@@ -187,13 +187,13 @@
 
     .mask-16,
     .mask-24 {
-      background-color: var(--control-mask-fill);
+      --icon-color: var(--control-mask-fill);
       cursor: pointer;
     }
 
     .mask-loading {
+      --icon-color: var(#07AD3E);
       animation: spin 2.5s linear infinite;
-      background-color: #07AD3E;
     }
   }
 
@@ -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');
         }
       }
 
@@ -195,13 +195,13 @@
 
     .mask-16,
     .mask-24 {
-      background-color: var(--control-mask-fill);
+      --icon-color: var(--control-mask-fill);
       cursor: pointer;
     }
 
     .mask-loading {
+      --icon-color: var(#07AD3E);
       animation: spin 2.5s linear infinite;
-      background-color: #07AD3E;
     }
   }
 
@@ -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<{
@@ -86,7 +86,7 @@ function onCopy() {
 }
 
 .titleIcon {
-  background-color: var(--txt-error);
+  --icon-color: var(--txt-error);
 }
 
 .titleText {

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';