@mptw/skylens-ui 1.5.4 → 1.5.5

package/app/app.vue

@@ -1,5 +1,4 @@
-<template>
-  <div>
-    <SLCheckbox />
-  </div>
+<template lang="pug">
+  div
+    SLTable
 </template>

package/app/assets/css/layout.css

@@ -1,4 +1,4 @@
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 @layer base {
   body {

package/app/components/SLAlertModal.vue

@@ -75,7 +75,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .alert-modal {
   @apply z-60;

package/app/components/SLBreadcrumbs.vue

@@ -30,7 +30,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .breadcrumbs {
   @apply flex flex-wrap items-center justify-start text-lg text-primary font-bold;

package/app/components/SLButton.vue

@@ -110,7 +110,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .btn {
   @apply relative inline-flex items-center justify-center p-1.75 border border-transparent rounded bg-transparent text-base leading-[1.3125] focus:outline-none;

package/app/components/SLCalendarButton.vue

@@ -241,7 +241,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .calendar-button {
   @apply inline-block;

package/app/components/SLCalendarPopup.vue

@@ -775,7 +775,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .calendar-popup {
   @apply w-auto py-4 border border-primary-100 rounded-lg bg-white shadow-md overflow-hidden;

package/app/components/SLCard.vue

@@ -63,7 +63,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .tabs .tabs .card {
   @apply border-0 rounded-none shadow-none;

package/app/components/SLChart.vue

@@ -188,7 +188,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .chart {
   @apply flex w-full h-52 min-h-52 overflow-hidden;

package/app/components/SLCheckbox.vue

@@ -181,7 +181,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .checkbox {
   @apply inline-flex relative text-base align-top overflow-hidden;

package/app/components/SLCircleButton.vue

@@ -72,7 +72,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .circle-button {
   @apply inline-flex items-center justify-center relative w-10 h-10 rounded-full bg-white text-xl leading-5.75 text-white;

package/app/components/SLCollapsableBlock.vue

@@ -96,7 +96,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .sl-collapsable-block {
   @apply p-3.75 border border-secondary-400 rounded-lg;

package/app/components/SLCollapsableMulitPillSelect.vue

@@ -73,7 +73,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .collapsable-multi-pill-select .toggle-button {
   @apply inline-flex items-center justify-between w-80 p-2 mb-2 border border-primary-500 rounded text-base text-pgray-2;

package/app/components/SLConfirmModal.vue

@@ -113,7 +113,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .confirm-modal .modal-backdrop {
   @apply bg-white/40 backdrop-blur-[5px];

package/app/components/SLContextMenu.vue

@@ -267,7 +267,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .sl-context-menu-wrapper {
   @apply hidden;

package/app/components/SLDateInput.vue

@@ -365,7 +365,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .date-input.date-input-xs .input-group-prepend {
   @apply pl-2.75 pr-4 rounded-l-lg;

package/app/components/SLDatePicker.vue

@@ -137,7 +137,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .custom-date-picker .vc-pane-container {
   @apply border-0;

package/app/components/SLDownloadButton.vue

@@ -273,7 +273,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .download-button {
   @apply inline-block;

package/app/components/SLDropdown.vue

@@ -241,7 +241,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .dropdown {
   @apply inline-block relative;

package/app/components/SLDropdownItem.vue

@@ -23,7 +23,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .dropdown-item {
   @apply block p-2 bg-white text-sm text-primary whitespace-nowrap hover:text-primary hover:bg-primary-50 focus:text-primary focus:bg-primary-50 active:text-primary active:bg-primary-50;

package/app/components/SLElementWithTitle.vue

@@ -170,7 +170,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .element-with-title {
   @apply inline-flex;

package/app/components/SLEyeCheckbox.vue

@@ -119,7 +119,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .eye-checkbox {
   @apply inline-block relative text-base align-top overflow-hidden;

package/app/components/SLFileInput.vue

@@ -79,7 +79,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .custom-file-input {
   @apply inline-flex items-center space-x-3.5;

package/app/components/SLGenderAgeSelect.vue

@@ -235,7 +235,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .gender-age-select {
   @apply relative inline-flex;

package/app/components/SLHourRangeInput.vue

@@ -167,7 +167,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .hour-range-input.inline {
   @apply flex;

package/app/components/SLIOSSwitch.vue

@@ -170,7 +170,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .ios-switch {
   @apply inline-block relative overflow-hidden;
@@ -240,7 +240,7 @@ export default defineComponent({
 }
 
 .ios-switch label::before {
-  content: '';
+  content: "";
   @apply block absolute left-0.75 inset-y-0.75 w-7.25 bg-white rounded-full shadow-default;
 }
 

package/app/components/SLIconButton.vue

@@ -100,7 +100,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .icon-btn {
   @apply inline-flex flex-nowrap justify-start items-center p-[0.59375rem] border rounded-full text-base text-white overflow-hidden transition-[width] duration-300;

package/app/components/SLInfoTip.vue

@@ -181,7 +181,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .info-tip {
   @apply inline-flex ml-2 text-base leading-4.5 text-primary hover:text-primary-600 cursor-default;

package/app/components/SLInsightSitePage.vue

@@ -16,7 +16,7 @@ export default {
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .insight-site-page {
   @apply grow flex flex-col;

package/app/components/SLLegend.vue

@@ -59,7 +59,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .chart-legend {
   @apply text-center;

package/app/components/SLLinearProgressBar.vue

@@ -10,7 +10,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .linear-progress-bar {
   @apply w-full h-2 bg-[#D3D3D3] rounded-[1px] overflow-hidden;

package/app/components/SLLink.vue

@@ -150,7 +150,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .sl-link * {
   @apply pointer-events-none;

package/app/components/SLLoading.vue

@@ -86,7 +86,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .loading-modal {
   @apply z-10;

package/app/components/SLModal.vue

@@ -289,7 +289,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .modal {
   @apply z-50 fixed top-0 left-0 w-full h-full overflow-hidden;

package/app/components/SLMonthCalendarButton.vue

@@ -331,7 +331,7 @@ export default defineComponent({
 </script>
 
 <style lang="css" scoped>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .month-calendar-button {
   @apply inline-flex;

package/app/components/SLMonthPicker.vue

@@ -106,7 +106,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .month-picker {
   @apply w-47.5 space-y-4;

package/app/components/SLMultiEmailInput.vue

@@ -606,7 +606,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .multi-email-input {
   @apply flex flex-col;

package/app/components/SLMultiSelect.vue

@@ -86,7 +86,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .custom-multi-select {
   @apply px-3 py-1 border border-primary-500 rounded;

package/app/components/SLNoData.vue

@@ -28,7 +28,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .no-data {
   @apply flex flex-col items-center w-full py-8 px-4 space-y-3 bg-white rounded-lg;

package/app/components/SLNotification.vue

@@ -143,7 +143,7 @@ export default defineComponent({
 </script>
 
 <style lang="css">
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .notification {
   @apply z-100 fixed top-0 left-0 w-full h-full pointer-events-none;

package/app/components/SLPageModal.vue

@@ -51,7 +51,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .page-modal-backdrop {
   @apply fixed top-0 left-0 w-full h-full bg-white/70 backdrop-blur-[8px];

package/app/components/SLPagination.vue

@@ -144,7 +144,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .pagination {
   @apply flex items-center justify-end;

package/app/components/SLPillCheckbox.vue

@@ -140,7 +140,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .pill-checkbox {
   @apply inline-block relative;

package/app/components/SLPillLabel.vue

@@ -63,7 +63,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .pill-label {
   @apply inline-flex justify-center items-center relative px-1.75 py-0.75;

package/app/components/SLPopupMenuButton.vue

@@ -134,7 +134,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .popup-menu-button {
   @apply inline-block relative;

package/app/components/SLProfileButton.vue

@@ -175,7 +175,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .profile-button .toggle-button {
   @apply inline-flex items-center justify-center w-7 h-7 p-0 rounded-full bg-primary-400 text-lg text-white font-bold hover:bg-primary-600 active:bg-primary;

package/app/components/SLProjectShareItem.vue

@@ -71,7 +71,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .project-share-item {
   @apply flex items-center justify-between space-x-4;

package/app/components/SLRadioButton.vue

@@ -68,7 +68,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .radio-button {
   @apply inline-block relative text-base overflow-hidden;

package/app/components/SLRadioButtonGroup.vue

@@ -83,7 +83,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .radio-button-group .is-invalid .invalid-feedback {
   @apply block;

package/app/components/SLRadioGroup.vue

@@ -105,7 +105,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .radio-group {
   @apply inline-flex p-0.5 bg-primary-100 border border-primary-200 rounded;
@@ -143,7 +143,11 @@ export default defineComponent({
   @apply bg-third-600 text-white;
 }
 
-.radio-group.radio-group--third-600 .radio input:checked + .element-with-title label {
+.radio-group.radio-group--third-600
+  .radio
+  input:checked
+  + .element-with-title
+  label {
   @apply text-third;
 }
 
@@ -159,7 +163,11 @@ export default defineComponent({
   @apply bg-card-lightpr-bg text-primary-600;
 }
 
-.radio-group.radio-group--edit.color-invert .radio input:checked + .element-with-title label {
+.radio-group.radio-group--edit.color-invert
+  .radio
+  input:checked
+  + .element-with-title
+  label {
   @apply bg-edit text-white;
 }
 
@@ -167,7 +175,11 @@ export default defineComponent({
   @apply bg-edit text-white;
 }
 
-.radio-group.radio-group--edit .radio input:checked + .element-with-title label {
+.radio-group.radio-group--edit
+  .radio
+  input:checked
+  + .element-with-title
+  label {
   @apply text-primary;
 }
 
@@ -183,7 +195,11 @@ export default defineComponent({
   @apply bg-card-lightpr-bg text-primary-600;
 }
 
-.radio-group.radio-group--insight-title.color-invert .radio input:checked + .element-with-title label {
+.radio-group.radio-group--insight-title.color-invert
+  .radio
+  input:checked
+  + .element-with-title
+  label {
   @apply bg-edit text-white;
 }
 
@@ -191,7 +207,11 @@ export default defineComponent({
   @apply bg-primary-100 text-primary;
 }
 
-.radio-group.radio-group--insight-title .radio input:checked + .element-with-title label {
+.radio-group.radio-group--insight-title
+  .radio
+  input:checked
+  + .element-with-title
+  label {
   @apply bg-insight-title text-white;
 }
 

package/app/components/SLRangeInput.vue

@@ -164,7 +164,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .range-input.inline {
   @apply flex;

package/app/components/SLRightSider.vue

@@ -200,7 +200,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .right-sider {
   @apply z-9 fixed top-0 right-0 h-full;

package/app/components/SLSearchInput.vue

@@ -72,7 +72,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .search-input .is-focus .button-group {
   @apply border-primary;

package/app/components/SLSelect.vue

@@ -455,7 +455,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .custom-select {
   @apply relative;

package/app/components/SLSelectAllToggle.vue

@@ -65,7 +65,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .select-all-toggle {
   @apply inline-flex items-stretch border rounded-sm bg-white overflow-hidden;

package/app/components/SLSidebarNav.vue

@@ -247,7 +247,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .sidebar {
   @apply relative h-full;

package/app/components/SLSidebarNavGroupItem.vue

@@ -37,7 +37,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .sidebar.dark .sidebar-nav-group-item {
   @apply bg-primary-900;

package/app/components/SLSidebarNavGroupItemSection.vue

@@ -381,7 +381,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .sidebar.closure .sidebar-nav-group-item-section {
   @apply items-center;

package/app/components/SLSidebarNavLinkItem.vue

@@ -229,7 +229,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .sidebar.closure .sidebar-nav-link-item {
   @apply lg:p-2 lg:text-lg;

package/app/components/SLSidebarNavSectionItem.vue

@@ -42,7 +42,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .sidebar.closure .sidebar-nav-section-item {
   @apply lg:items-center;

package/app/components/SLSitePage.vue

@@ -111,7 +111,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .site-page {
   @apply flex flex-col w-full min-h-full pt-1.5 lg:pt-2;

package/app/components/SLSkyInsightSitePage.vue

@@ -16,7 +16,7 @@ export default {
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .sky-insight-site-page {
   @apply grow flex flex-col;

package/app/components/SLSortByDropdown.vue

@@ -162,7 +162,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .sort-by-dropdown {
   @apply inline-flex;

package/app/components/SLSpinIcon.vue

@@ -19,7 +19,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 i.spin-icon {
   @apply animate-spin;

package/app/components/SLStayRangeInput.vue

@@ -256,7 +256,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .stay-range-input {
   @apply flex flex-col;

package/app/components/SLTable.vue

@@ -381,7 +381,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .table {
   @apply block relative w-full overflow-hidden;

package/app/components/SLTableTooltip.vue

@@ -71,7 +71,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .table-tooltip {
   @apply inline-block p-4 border border-primary-600 rounded bg-white shadow-popup-sm pointer-events-none;

package/app/components/SLTabs.vue

@@ -185,7 +185,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .tabs.tabs-sm.tabs-type-1 > .tabs-nav ul .tab-nav-item-link {
   @apply text-sm;

package/app/components/SLTextInput.vue

@@ -226,7 +226,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .text-input.inline {
   @apply flex;

package/app/components/SLTextarea.vue

@@ -93,7 +93,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .textarea.inline {
   @apply flex;

package/app/components/SLToast.vue

@@ -55,7 +55,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .toast {
   @apply z-100 fixed top-0 left-0 w-full h-full pointer-events-none;

package/app/components/SLToggleButton.vue

@@ -61,7 +61,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .sl-toggle-button {
   @apply inline-flex items-center justify-center p-1.5 space-x-2 bg-primary-100 rounded text-base text-primary-600;

package/app/components/SLTwoLayerMultiSelect.vue

@@ -344,7 +344,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .two-layer-multi-select {
   @apply relative w-full;

package/app/components/SLTwoLayerSelect.vue

@@ -215,7 +215,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .tw-layer-select {
   @apply flex flex-col w-138 h-67.75 pt-2.75 px-2.75 bg-white border border-primary-100 rounded shadow-default;

package/app/components/SLTwoLayerSingleSelect.vue

@@ -297,7 +297,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .two-layer-single-select {
   @apply relative w-full;

package/app/components/SLWarnModal.vue

@@ -65,7 +65,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~ui/app/assets/css/main.css';
+@reference 'ui/app/assets/css/main.css';
 
 .warn-modal .modal-body-content {
   @apply flex flex-col items-center space-y-6 text-base text-pgray-2;

package/nuxt.config.ts

@@ -9,7 +9,7 @@ export default defineNuxtConfig({
     name: "skylens-ui",
   },
   alias: {
-    "~ui": fileURLToPath(new URL("./", import.meta.url)),
+    ui: fileURLToPath(new URL("./", import.meta.url)),
   },
   runtimeConfig: {
     public: {
@@ -19,11 +19,11 @@ export default defineNuxtConfig({
     },
   },
   css: [
-    "~ui/app/assets/css/main.css",
-    "~ui/app/assets/css/icons.css",
-    "~ui/app/assets/css/layout.css",
+    "ui/app/assets/css/main.css",
+    "ui/app/assets/css/icons.css",
+    "ui/app/assets/css/layout.css",
   ],
-  plugins: ["~ui/app/plugins/v-calendar.ts"],
+  plugins: ["ui/app/plugins/v-calendar.ts"],
   vite: {
     plugins: [tailwindcss()],
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",