@milaboratories/uikit 2.2.82 → 2.2.83

package/src/assets/icons/icons-set.scss

@@ -12,7 +12,7 @@
 
   @each $name, $path in $icons16 {
     &.icon-#{$name} {
-      background: url(@icons/icon-assets-min/16_#{$path});
+      background: #{$path};
     }
   }
 }
@@ -27,7 +27,7 @@
 
   @each $name, $path in $icons24 {
     &.icon-#{$name} {
-      background: url(@icons/icon-assets-min/24_#{$path});
+      background: #{$path};
     }
   }
 }
@@ -38,7 +38,7 @@
 
   @each $name, $path in $icons16 {
     &.mask-#{$name} {
-      @include mask-var(url(@icons/icon-assets-min/16_#{$path}));
+      @include mask-var(#{$path});
     }
   }
 }
@@ -49,7 +49,7 @@
 
   @each $name, $path in $icons24 {
     &.mask-#{$name} {
-      @include mask-var(url(@icons/icon-assets-min/24_#{$path}));
+      @include mask-var(#{$path});
     }
   }
 }

package/src/assets/mixins.scss

@@ -160,13 +160,6 @@
     white-space: pre;
     text-overflow: ellipsis;
   }
-
-  .required-icon {
-    background: url(@/assets/images/required.svg);
-    width: 5px;
-    height: 12px;
-    margin-top: 2px;
-  }
 }
 
 @mixin field-helper {

package/src/base/BtnBase.vue

@@ -5,10 +5,10 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import type { MaskIconName16, Size } from '@/types';
+import type { MaskIconName16, Size } from '../types';
 import { computed, ref } from 'vue';
-import { PlMaskIcon16 } from '@/components/PlMaskIcon16';
-import { useRipple } from '@/composition/useRipple';
+import { PlMaskIcon16 } from '../components/PlMaskIcon16';
+import { useRipple } from '../composition/useRipple';
 
 const props = defineProps<{
   loading?: boolean;

package/src/components/DataTable/TScroll.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { useMouseCapture } from '@/composition/useMouseCapture';
+import { useMouseCapture } from '../../composition/useMouseCapture';
 
 const emit = defineEmits<{
   (e: 'change:offset', value: number): void;

package/src/components/DataTable/TableComponent.vue

@@ -8,7 +8,7 @@ import TrHead from './TrHead.vue';
 import ThCell from './ThCell.vue';
 import TrBody from './TrBody.vue';
 import ColumnCaret from './ColumnCaret.vue';
-import { useEventListener } from '@/index';
+import { useEventListener } from '../../index';
 import { tapIf } from '@milaboratories/helpers';
 import { useResize } from './composition/useResize';
 import RowsCommandMenu from './RowsCommandMenu.vue';

package/src/components/DataTable/assets/data-table-style.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../../assets/mixins.scss" as *;
 
 .data-table {
   --cell-font-family: var(--font-family-base);

package/src/components/DataTable/composition/useColumn.ts

@@ -1,6 +1,6 @@
-import { useEventListener } from '@/composition/useEventListener.ts';
+import { useEventListener } from '../../../composition/useEventListener.ts';
 import { useMouseUp } from './useMouseUp';
-import { requestTick } from '@/helpers';
+import { requestTick } from '../../../helpers';
 
 export function useColumn(cb: (state: { x: number; width: number; diff: number }) => void, clear: () => void) {
   let state = undefined as { x: number; width: number } | undefined;

package/src/components/DataTable/composition/useResize.ts

@@ -3,8 +3,8 @@ import { watchEffect, unref } from 'vue';
 import type { ResizeTh } from '../types';
 import { useColumn } from './useColumn';
 import { MIN_COLUMN_WIDTH, RESIZE_GAP } from '../constants';
-import { useMouse } from '@/composition/useMouse';
-import { useHover } from '@/composition/useHover';
+import { useMouse } from '../../../composition/useMouse';
+import { useHover } from '../../../composition/useHover';
 import { tapIf, clamp } from '@milaboratories/helpers';
 import { identity } from '@milaboratories/helpers';
 import type { State } from '../state';

package/src/components/DataTable/index.ts

@@ -5,7 +5,7 @@ import type { RawTableSettings } from './types';
 import type { ComputedRef } from 'vue';
 import { computed, h, reactive, unref } from 'vue';
 import { RawData } from './adapters/RawData';
-import type { MaybeRef } from '@/types';
+import type { MaybeRef } from '../../types';
 export { AsyncData } from './adapters/AsyncData';
 
 type AnyRef<T> = MaybeRef<T> | ComputedRef<T>;

package/src/components/DropdownListItem.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import CheckboxUncheckedSvg from '@/assets/images/24_checkbox-light-enabled-unchecked.svg?raw';
-import CheckboxCheckedSvg from '@/assets/images/24_checkbox-light-enabled-checked.svg?raw';
-import type { ListOptionNormalized } from '@/types';
+import CheckboxUncheckedSvg from '../assets/images/24_checkbox-light-enabled-unchecked.svg?raw';
+import CheckboxCheckedSvg from '../assets/images/24_checkbox-light-enabled-checked.svg?raw';
+import type { ListOptionNormalized } from '../types';
 
 const props = withDefaults(
   defineProps<{

package/src/components/GridTable/assets/style.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .grid-table {
   --cell-font-family: var(--font-family-base);

package/src/components/GridTable/constants.ts

@@ -1,4 +1,4 @@
-import type { ListOption } from '@/types';
+import type { ListOption } from '../../types';
 import type { CellEvent, ColumnEvent } from './types';
 
 export const RESIZE_GAP = 10;

package/src/components/GridTable/index.vue

@@ -10,8 +10,8 @@ import TableIcon from './assets/TableIcon.vue';
 import ThCell from './ThCell.vue';
 import TRow from './TRow.vue';
 import { compareRecords } from './domain';
-import { throttle } from '@/helpers/utils';
-import { useEventListener } from '@/index';
+import { throttle } from '../../helpers/utils';
+import { useEventListener } from '../../index';
 
 const minRowHeight = 40;
 

package/src/components/GridTable/types.ts

@@ -1,4 +1,4 @@
-import type { ListOption } from '@/types';
+import type { ListOption } from '../../types';
 
 type TypeMap = {
   integer: number;

package/src/components/GridTable/useColumn.ts

@@ -1,6 +1,6 @@
-import { useEventListener } from '@/composition/useEventListener.ts';
+import { useEventListener } from '../../composition/useEventListener.ts';
 import { useMouseUp } from './useMouseUp';
-import { requestTick } from '@/helpers';
+import { requestTick } from '../../helpers';
 
 export function useColumn(cb: (state: { x: number; width: number; diff: number }) => void, clear: () => void) {
   let state = undefined as { x: number; width: number } | undefined;

package/src/components/GridTable/useResize.ts

@@ -4,8 +4,8 @@ import type { Data } from './types';
 import { useColumn } from './useColumn';
 import { getColumnPositions } from './getColumnPositions';
 import { MIN_COLUMN_WIDTH, RESIZE_GAP } from './constants';
-import { useMouse } from '@/composition/useMouse';
-import { useHover } from '@/composition/useHover';
+import { useMouse } from '../../composition/useMouse';
+import { useHover } from '../../composition/useHover';
 import { utils } from '@milaboratories/helpers';
 
 const { tapIf, clamp } = utils;

package/src/components/HScroll.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref, unref } from 'vue';
-import { useEventListener } from '@/composition/useEventListener';
-import { eventListener } from '@/helpers/dom';
+import { useEventListener } from '../composition/useEventListener';
+import { eventListener } from '../helpers/dom';
 
 const emit = defineEmits(['update:scrollLeft']);
 

package/src/components/PlAlert/pl-alert.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-alert {
   --text-font-family: var(--font-family-base);
@@ -74,7 +74,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);
     transition: all 0.1s ease-in-out;
     &:hover {
       background-color: var(--main-dark-color);

package/src/components/PlAutocomplete/PlAutocomplete.vue

@@ -10,21 +10,22 @@ export default {
 <script lang="ts" setup generic="M = unknown">
 import './pl-autocomplete.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 { DropdownOverlay } from '../../utils/DropdownOverlay';
 import { refDebounced } from '@vueuse/core';
-import { useWatchFetch } from '@/composition/useWatchFetch.ts';
-import { getErrorMessage } from '@/helpers/error.ts';
+import { useWatchFetch } from '../../composition/useWatchFetch.ts';
+import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
+import { getErrorMessage } from '../../helpers/error.ts';
 
 /**
  * The current selected value.
@@ -372,7 +373,7 @@ watch(() => optionsRequest.loading || modelOptionRequest.loading, (loading) => {
           </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/PlAutocomplete/pl-autocomplete.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-autocomplete__options {
   --option-hover-bg: var(--btn-sec-hover-grey);
@@ -214,7 +214,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/PlBtnAccent/PlBtnAccent.vue

@@ -9,8 +9,8 @@ export default {
 
 <script lang="ts" setup>
 import './pl-btn-accent.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/PlBtnAccent/pl-btn-accent.scss

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

package/src/components/PlBtnDanger/PlBtnDanger.vue

@@ -9,8 +9,8 @@ export default {
 
 <script lang="ts" setup>
 import './pl-btn-danger.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/PlBtnDanger/pl-btn-danger.scss

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

package/src/components/PlBtnGhost/PlBtnGhost.vue

@@ -9,10 +9,10 @@ export default {
 
 <script lang="ts" setup>
 import './pl-btn-ghost.scss';
-import type { MaskIconName24, Size } from '@/types';
-import { PlMaskIcon24 } from '@/components/PlMaskIcon24';
+import type { MaskIconName24, Size } from '../../types';
+import { PlMaskIcon24 } from '../PlMaskIcon24';
 import { computed, ref, useSlots } from 'vue';
-import { useRipple } from '@/composition/useRipple';
+import { useRipple } from '../../composition/useRipple';
 
 const props = withDefaults(
   defineProps<{

package/src/components/PlBtnGhost/pl-btn-ghost.scss

@@ -1,4 +1,4 @@
-@use "@/assets/mixins" as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-btn-ghost {
   @include base-btn;
@@ -18,6 +18,7 @@
     &:hover {
       --color-text: #87E087;
     }
+    --mask-icon-bg-color: #fff;
   }
 
   &:disabled {

package/src/components/PlBtnGroup/PlBtnGroup.vue

@@ -10,10 +10,10 @@ export default {
 <script lang="ts" setup generic="M = unknown">
 import './pl-btn-group.scss';
 import { computed, useSlots } from 'vue';
-import { PlTooltip } from '@/components/PlTooltip';
-import InnerBorder from '@/utils/InnerBorder.vue';
-import type { SimpleOption } from '@/types';
-import { getErrorMessage } from '@/helpers/error.ts';
+import { PlTooltip } from '../PlTooltip';
+import InnerBorder from '../../utils/InnerBorder.vue';
+import type { SimpleOption } from '../../types';
+import { getErrorMessage } from '../../helpers/error.ts';
 
 const slots = useSlots();
 

package/src/components/PlBtnGroup/pl-btn-group.scss

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

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,9 +2,9 @@
 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';
 

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>