@webitel/ui-sdk 3.2.123 → 3.2.125

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.2.123",
+  "version": "3.2.125",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/index.js

@@ -1,63 +1,60 @@
-import Vue from 'vue';
-import WtAvatar from './atoms/wt-avatar/wt-avatar.vue';
-import WtBadge from './atoms/wt-badge/wt-badge.vue';
-import WtIcon from './atoms/wt-icon/wt-icon.vue';
-import WtIndicator from './atoms/wt-indicator/wt-indicator.vue';
-import WtInputInfo from './atoms/wt-input-info/wt-input-info.vue';
-import WtButton from './atoms/wt-button/wt-button.vue';
-import WtChip from './atoms/wt-chip/wt-chip.vue';
-import WtDivider from './atoms/wt-divider/wt-divider.vue';
-import WtTooltip from './atoms/wt-tooltip/wt-tooltip.vue';
-import WtRoundedAction from './atoms/wt-rounded-action/wt-rounded-action.vue';
-import WtLoader from './atoms/wt-loader/wt-loader.vue';
-import WtContextMenu from './atoms/wt-context-menu/wt-context-menu.vue';
-
-import WtCheckbox from './molecules/wt-checkbox/wt-checkbox.vue';
-import WtDatepicker from './molecules/wt-datepicker/wt-datepicker.vue';
-import WtIconBtn from './molecules/wt-icon-btn/wt-icon-btn.vue';
-import WtInput from './molecules/wt-input/wt-input.vue';
-import WtNotification from './molecules/wt-notification/wt-notification.vue';
-import WtPopup from './molecules/wt-popup/wt-popup.vue';
-import WtProgressBar from './molecules/wt-progress-bar/wt-progress-bar.vue';
-import WtRadio from './molecules/wt-radio/wt-radio.vue';
-import WtSearchBar from './molecules/wt-search-bar/wt-search-bar.vue';
-import WtSelect from './molecules/wt-select/wt-select.vue';
-import WtSlider from './molecules/wt-slider/wt-slider.vue';
-import WtSwitcher from './molecules/wt-switcher/wt-switcher.vue';
-import WtTabs from './molecules/wt-tabs/wt-tabs.vue';
-import WtTagsInput from './molecules/wt-tags-input/wt-tags-input.vue';
-import WtTimeInput from './molecules/wt-time-input/wt-time-input.vue';
-import WtTextarea from './molecules/wt-textarea/wt-textarea.vue';
-import WtTimepicker from './molecules/wt-timepicker/wt-timepicker.vue';
-import WtLabel from './molecules/wt-label/wt-label.vue';
-import WtButtonSelect from './molecules/wt-button-select/wt-button-select.vue';
-import WtHint from './molecules/wt-hint/wt-hint.vue';
-import WtCopyAction from './molecules/wt-copy-action/wt-copy-action.vue';
-import WtLoadBar from './molecules/wt-load-bar/wt-load-bar.vue';
-import WtItemLink from './molecules/wt-item-link/wt-item-link.vue';
-import WtDummy from './molecules/wt-dummy/wt-dummy.vue';
-
-import WtAppHeader from './organisms/wt-app-header/wt-app-header.vue';
-import WtAppNavigator from './organisms/wt-app-header/wt-app-navigator.vue';
-import WtFiltersPanelWrapper from './organisms/wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue';
-import WtHeaderActions from './organisms/wt-app-header/wt-header-actions.vue';
-import WtErrorPage from './organisms/wt-error-page/wt-error-page.vue';
-import WtHeadline from './organisms/wt-headline/wt-headline.vue';
-import WtHeadlineNav from './organisms/wt-headline-nav/wt-headline-nav.vue';
-import WtNavigationBar from './organisms/wt-navigation-bar/wt-navigation-bar.vue';
-import WtNotificationsBar from './organisms/wt-notifications-bar/wt-notifications-bar.vue';
-import WtPageWrapper from './organisms/wt-page-wrapper/wt-page-wrapper.vue';
-import WtPagination from './organisms/wt-pagination/wt-pagination.vue';
-import WtPlayer from './organisms/wt-player/wt-player.vue';
-import WtStatusSelect from './organisms/wt-status-select/wt-status-select.vue';
-import WtTable from './organisms/wt-table/wt-table.vue';
-import WtTableActions from './organisms/wt-table-actions/wt-table-actions.vue';
-import WtTableColumnSelect from './organisms/wt-table-column-select/wt-table-column-select.vue';
-import WtIconAction from './atoms/wt-icon-action/wt-icon-action.vue';
-import WtPageHeader from './organisms/wt-page-header/wt-page-header.vue';
-import WtStepper from './organisms/wt-stepper/wt-stepper.vue';
+import WtAvatar from './wt-avatar/wt-avatar.vue';
+import WtBadge from './wt-badge/wt-badge.vue';
+import WtIcon from './wt-icon/wt-icon.vue';
+import WtIndicator from './wt-indicator/wt-indicator.vue';
+import WtInputInfo from './wt-input-info/wt-input-info.vue';
+import WtButton from './wt-button/wt-button.vue';
+import WtChip from './wt-chip/wt-chip.vue';
+import WtDivider from './wt-divider/wt-divider.vue';
+import WtTooltip from './wt-tooltip/wt-tooltip.vue';
+import WtRoundedAction from './wt-rounded-action/wt-rounded-action.vue';
+import WtLoader from './wt-loader/wt-loader.vue';
+import WtContextMenu from './wt-context-menu/wt-context-menu.vue';
+import WtCheckbox from './wt-checkbox/wt-checkbox.vue';
+import WtDatepicker from './wt-datepicker/wt-datepicker.vue';
+import WtIconBtn from './wt-icon-btn/wt-icon-btn.vue';
+import WtInput from './wt-input/wt-input.vue';
+import WtNotification from './wt-notification/wt-notification.vue';
+import WtPopup from './wt-popup/wt-popup.vue';
+import WtProgressBar from './wt-progress-bar/wt-progress-bar.vue';
+import WtRadio from './wt-radio/wt-radio.vue';
+import WtSearchBar from './wt-search-bar/wt-search-bar.vue';
+import WtSelect from './wt-select/wt-select.vue';
+import WtSlider from './wt-slider/wt-slider.vue';
+import WtSwitcher from './wt-switcher/wt-switcher.vue';
+import WtTabs from './wt-tabs/wt-tabs.vue';
+import WtTagsInput from './wt-tags-input/wt-tags-input.vue';
+import WtTimeInput from './wt-time-input/wt-time-input.vue';
+import WtTextarea from './wt-textarea/wt-textarea.vue';
+import WtTimepicker from './wt-timepicker/wt-timepicker.vue';
+import WtLabel from './wt-label/wt-label.vue';
+import WtButtonSelect from './wt-button-select/wt-button-select.vue';
+import WtHint from './wt-hint/wt-hint.vue';
+import WtCopyAction from './wt-copy-action/wt-copy-action.vue';
+import WtLoadBar from './wt-load-bar/wt-load-bar.vue';
+import WtItemLink from './wt-item-link/wt-item-link.vue';
+import WtDummy from './wt-dummy/wt-dummy.vue';
+import WtAppHeader from './wt-app-header/wt-app-header.vue';
+import WtAppNavigator from './wt-app-header/wt-app-navigator.vue';
+import WtFiltersPanelWrapper from './wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue';
+import WtHeaderActions from './wt-app-header/wt-header-actions.vue';
+import WtErrorPage from './wt-error-page/wt-error-page.vue';
+import WtHeadline from './wt-headline/wt-headline.vue';
+import WtHeadlineNav from './wt-headline-nav/wt-headline-nav.vue';
+import WtNavigationBar from './wt-navigation-bar/wt-navigation-bar.vue';
+import WtNotificationsBar from './wt-notifications-bar/wt-notifications-bar.vue';
+import WtPageWrapper from './wt-page-wrapper/wt-page-wrapper.vue';
+import WtPagination from './wt-pagination/wt-pagination.vue';
+import WtPlayer from './wt-player/wt-player.vue';
+import WtStatusSelect from './wt-status-select/wt-status-select.vue';
+import WtTable from './wt-table/wt-table.vue';
+import WtTableActions from './wt-table-actions/wt-table-actions.vue';
+import WtTableColumnSelect from './wt-table-column-select/wt-table-column-select.vue';
+import WtIconAction from './wt-icon-action/wt-icon-action.vue';
+import WtPageHeader from './wt-page-header/wt-page-header.vue';
+import WtStepper from './wt-stepper/wt-stepper.vue';
 import WtExpansionPanel
-  from './organisms/wt-expansion-panel/wt-expansion-panel.vue';
+  from './wt-expansion-panel/wt-expansion-panel.vue';
 
 const Components = {
   WtAvatar,

package/src/components/{organisms/wt-app-header → wt-app-header}/__tests__/WtAppNavigator.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import WebitelApplications from '../../../../enums/WebitelApplications/WebitelApplications.enum';
+import WebitelApplications from '../../../enums/WebitelApplications/WebitelApplications.enum';
 import WtAppNavigator from '../wt-app-navigator.vue';
 
 const apps = [

package/src/{css/components/organisms → components}/wt-app-header/_variables.scss

@@ -21,4 +21,4 @@
   --wt-header-actions-padding: var(--wt-app-header-content-gap);
   --wt-header-actions-action-bg-color--hover: var(--secondary-color);
   --wt-header-actions-action-link-padding: var(--spacing-xs);
-}
+}

package/src/components/wt-app-header/wt-app-header.vue

@@ -0,0 +1,26 @@
+<template>
+  <header class="wt-app-header">
+    <slot></slot>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'wt-app-header',
+};
+</script>
+
+<style lang="scss" scoped>
+@import './variables.scss';
+
+.wt-app-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--wt-app-header-content-gap);
+  min-height: var(--wt-app-header-min-height); // fixed height because anything can be put inside slot, so padding won't work properly
+  padding: var(--wt-app-header-padding);
+  box-sizing: border-box;
+  background: var(--header-color);
+}
+</style>

package/src/components/{organisms/wt-app-header → wt-app-header}/wt-app-navigator.vue

@@ -36,7 +36,7 @@
               <img
                 :alt="`${[WebitelApplications.AGENT]}-pic`"
                 class="wt-app-navigator__card__img"
-                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-agent.svg"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-agent.svg"
               >
             </a>
           </li>
@@ -55,7 +55,7 @@
               <img
                 :alt="`${[WebitelApplications.SUPERVISOR]}-pic`"
                 class="wt-app-navigator__card__img"
-                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-supervisor.svg"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-supervisor.svg"
               >
             </a>
           </li>
@@ -74,7 +74,7 @@
               <img
                 :alt="`${[WebitelApplications.HISTORY]}-pic`"
                 class="wt-app-navigator__card__img"
-                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-history.svg"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-history.svg"
               >
             </a>
           </li>
@@ -93,7 +93,7 @@
               <img
                 :alt="`${[WebitelApplications.AUDIT]}-pic`"
                 class="wt-app-navigator__card__img"
-                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-audit.svg"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-audit.svg"
               >
             </a>
           </li>
@@ -112,7 +112,7 @@
               <img
                 :alt="`${[WebitelApplications.ADMIN]}-pic`"
                 class="wt-app-navigator__card__img"
-                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-admin.svg"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-admin.svg"
               >
             </a>
           </li>
@@ -131,7 +131,7 @@
               <img
                 :alt="`${[WebitelApplications.ANALYTICS]}-pic`"
                 class="wt-app-navigator__card__img"
-                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-analytics.svg"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-analytics.svg"
               >
             </a>
           </li>
@@ -150,7 +150,7 @@
               <img
                 :alt="`${[WebitelApplications.AUDIT]}-pic`"
                 class="wt-app-navigator__card__img"
-                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-audit.svg"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-audit.svg"
               >
             </a>
           </li>
@@ -169,7 +169,7 @@
               <img
                 :alt="`${[WebitelApplications.CRM]}-pic`"
                 class="wt-app-navigator__card__img"
-                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-crm.svg"
+                src="../../assets/components/organisms/wt-app-header/app-navigator/app-crm.svg"
               >
             </a>
           </li>
@@ -182,7 +182,7 @@
 
 <script setup>
 import { computed, ref } from 'vue';
-import WebitelApplications from '../../../enums/WebitelApplications/WebitelApplications.enum';
+import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum';
 
 const props = defineProps({
   currentApp: {

package/src/{css/components/atoms → components}/wt-avatar/_variables.scss

@@ -1,4 +1,4 @@
-.wt-avatar {
+:root {
   --avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
   --avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
   --avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);

package/src/components/{atoms/wt-avatar → wt-avatar}/wt-avatar.vue

@@ -26,8 +26,8 @@
 
 <script setup>
 import { computed } from 'vue';
-import defaultAvatar from '../../../assets/components/atoms/wt-avatar/default-avatar.svg';
-import AbstractUserStatus from '../../../enums/AbstractUserStatus/AbstractUserStatus.enum';
+import defaultAvatar from '../../assets/components/atoms/wt-avatar/default-avatar.svg';
+import AbstractUserStatus from '../../enums/AbstractUserStatus/AbstractUserStatus.enum';
 
 const props = defineProps({
   src: {
@@ -103,6 +103,8 @@ const badgeColorVar = computed(() => {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 %wt-avatar-typo-sm {
   font-size: 12px;
 }

package/src/components/{atoms/wt-badge → wt-badge}/wt-badge.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import BadgeDnd from '../../../assets/icons/badge-dnd.svg';
+import BadgeDnd from '../../assets/icons/badge-dnd.svg';
 
 export default {
   name: 'wt-badge',
@@ -28,8 +28,10 @@ export default {
   computed: {
     showIconBadge() {
       switch (this.iconBadge) {
-        case 'dnd': return BadgeDnd;
-        default: return null;
+        case 'dnd':
+          return BadgeDnd;
+        default:
+          return null;
       }
     },
   },
@@ -37,16 +39,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .wt-badge {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: var(--wt-badge-size);
-    height: var(--wt-badge-size);
-    border-radius: 50%;
+@import './variables.scss';
 
-    &--outside {
-      transform: translate(100%, -100%);
-    }
+.wt-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--wt-badge-size);
+  height: var(--wt-badge-size);
+  border-radius: 50%;
+
+  &--outside {
+    transform: translate(100%, -100%);
   }
+}
 </style>

package/src/{css/components/atoms → components}/wt-button/_variables.scss

@@ -1,4 +1,3 @@
-
 :root {
   --btn-min-width: 90px;
   --btn-border-size: 2px;

package/src/components/{atoms/wt-button → wt-button}/wt-button.vue

@@ -81,6 +81,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-button {
   @extend %typo-button;
   box-sizing: border-box;

package/src/{css/components/molecules → components}/wt-button-select/_variables.scss

@@ -1,4 +1,4 @@
-.wt-button-select {
+:root {
   --button-select-button-padding: var(--spacing-xs) var(--spacing-sm);
 
   --button-select-icon-button-padding: var(--spacing-xs);

package/src/components/{molecules/wt-button-select → wt-button-select}/wt-button-select.vue

@@ -66,6 +66,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-button-select {
   position: relative;
   display: inline-flex;

package/src/components/{molecules/wt-checkbox → wt-checkbox}/__tests__/WtCheckbox.spec.js

@@ -1,7 +1,7 @@
 import { shallowMount, mount } from '@vue/test-utils';
 import WtCheckbox from '../wt-checkbox.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
-import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
+import WtIcon from '../../wt-icon/wt-icon.vue';
 
 describe('WtCheckbox', () => {
   it('renders a component', () => {

package/src/components/wt-checkbox/wt-checkbox.vue

@@ -0,0 +1,182 @@
+<template>
+  <div
+    class="wt-checkbox"
+    :class="{
+      'wt-checkbox--active': isChecked,
+      'wt-checkbox--outline': outline,
+      'wt-checkbox--disabled': disabled,
+    }"
+  >
+    <wt-label class="wt-checkbox__wrapper" v-bind="labelProps">
+      <input
+        class="wt-checkbox__input"
+        type="checkbox"
+        :value="value"
+        :checked="isChecked"
+        :disabled="disabled"
+        @change="inputHandler"
+      >
+      <span class="wt-checkbox__checkmark">
+      <wt-icon
+        :icon="checkboxIcon"
+        :color="iconColor"
+      ></wt-icon>
+    </span>
+      <!-- @slot Custom label markup -->
+      <slot name="label" v-bind="{ label, isChecked, disabled }">
+        <div v-if="label" class="wt-checkbox__label">{{ label }}</div>
+      </slot>
+    </wt-label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-checkbox',
+  model: {
+    prop: 'selected',
+    event: 'change',
+  },
+  props: {
+    value: {
+      type: [String, Boolean],
+      default: '',
+    },
+    selected: {
+      type: [Array, Boolean],
+      default: () => [],
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
+    },
+  },
+  emits: ['change'],
+  computed: {
+    isChecked() {
+      if (typeof this.selected === 'boolean') {
+        return this.selected;
+      }
+      return this.selected.includes(this.value);
+    },
+    checkboxIcon() {
+      return this.isChecked ? 'checkbox--checked' : 'checkbox';
+    },
+    iconColor() {
+      if (this.disabled) return 'disabled';
+      if (this.isChecked) return 'active';
+      return null;
+    },
+  },
+  methods: {
+    inputHandler() {
+      if (typeof this.selected === 'boolean') {
+        this.$emit('change', !this.selected);
+      } else {
+        let selected = [...this.selected];
+        if (selected.includes(this.value)) {
+          selected = selected.filter((value) => value !== this.value);
+        } else {
+          selected.push(this.value);
+        }
+        this.$emit('change', selected);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './variables.scss';
+
+.wt-checkbox {
+  @include width-fit-content;
+  box-sizing: border-box;
+
+  .wt-label {
+    cursor: pointer;
+  }
+}
+
+.wt-checkbox__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+
+  .wt-checkbox__checkmark {
+    line-height: 0; // prevent icon height >> content
+  }
+}
+
+.wt-checkbox__label {
+  margin-left: var(--checkbox-icon-margin);
+  transition: var(--transition);
+  cursor: pointer;
+}
+
+/* Hide the browser's default checkbox */
+.wt-checkbox__input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.wt-checkbox:hover {
+  .wt-checkbox__label {
+    color: var(--form-label--hover-color);
+  }
+
+  ::v-deep .wt-icon__icon {
+    fill: var(--icon-color--hover);
+  }
+}
+
+.wt-checkbox--active {
+  .wt-checkbox__label {
+    color: var(--form-label--active-color);
+  }
+}
+
+.wt-checkbox--outline {
+  .wt-checkbox__label {
+    color: var(--form-outline-label-color);
+  }
+
+  ::v-deep .wt-icon__icon {
+    fill: var(--icon-outline-color);
+  }
+
+  &.wt-checkbox--active {
+    .wt-checkbox__label {
+      color: var(--form-label--active-color);
+    }
+
+    ::v-deep .wt-icon__icon {
+      fill: var(--icon-outline--active-color);
+    }
+  }
+}
+
+.wt-checkbox--disabled {
+  pointer-events: none;
+
+  .wt-checkbox__label {
+    color: var(--form-label--disabled-color);
+  }
+}
+</style>

package/src/components/wt-chip/wt-chip.vue

@@ -0,0 +1,24 @@
+<template>
+  <span class="wt-chip" :class="`wt-chip--${color}-color`">
+    <slot></slot>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'wt-chip',
+  props: {
+    color: {
+      type: String,
+      default: 'main',
+      options: ['main', 'outline', 'accent', 'secondary', 'secondary-50', 'success', 'danger', 'transfer'],
+      notes: '"main" and "outline" are chip-specific colors',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './wt-chip.scss';
+@import './variables.scss';
+</style>

package/src/components/{atoms/wt-context-menu → wt-context-menu}/wt-context-menu.vue

@@ -74,6 +74,8 @@ function handleOptionClick({ option, index, hide }) {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-context-menu {
   line-height: 0;
 

package/src/components/{molecules/wt-datepicker → wt-datepicker}/__tests__/WtDatepicker.spec.js

@@ -1,7 +1,7 @@
 import { shallowMount, mount } from '@vue/test-utils';
 import WtDatepicker from '../wt-datepicker.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
-import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
+import WtIcon from '../../wt-icon/wt-icon.vue';
 
 describe('WtDatepicker', () => {
   it('renders a component', () => {

package/src/components/{molecules/wt-datepicker → wt-datepicker}/wt-datepicker.vue

@@ -132,6 +132,8 @@ const isDateTime = props.mode === 'datetime';
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-datepicker :deep(.dp__main) {
   .dp__input_icon {
     left: var(--spacing-xs);

package/src/components/wt-divider/wt-divider.vue

@@ -0,0 +1,27 @@
+<template>
+  <hr class="wt-divider">
+</template>
+
+<script>
+export default {
+  name: 'wt-divider',
+};
+</script>
+
+<style lang="scss" scoped>
+@import './variables.scss';
+
+.wt-divider {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  height: 0;
+  max-height: 0;
+  padding: 0;
+  margin: 0;
+  border: var(--divider-border);
+  border-color: var(--divider-border-color);
+  border-top-width: thin;
+}
+</style>

package/src/components/{molecules/wt-dummy → wt-dummy}/wt-dummy.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import dummy from '../../../assets/components/molecules/wt-dummy/dummy.svg';
+import dummy from '../../assets/components/molecules/wt-dummy/dummy.svg';
 
 const props = defineProps({
   src: {