@empathyco/x-components 6.0.0-alpha.219 → 6.0.0-alpha.220

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.220 (2026-03-13)
+
+* Make `eslint-config` & `prettier` great again (#2049) ([6f6ca7e](https://github.com/empathyco/x/commit/6f6ca7e)), closes [#2049](https://github.com/empathyco/x/issues/2049)
+
+
+
+
+
 ## 6.0.0-alpha.219 (2026-03-09)
 
 - feat(deep-merge-storage-service): clean up deep-merge and storage-service deps and side effects (#20 ([668130c](https://github.com/empathyco/x/commit/668130c)), closes [#2048](https://github.com/empathyco/x/issues/2048)

package/docs/API-reference/components/ai/x-components.ai-overview.md

@@ -59,8 +59,8 @@ The `ai-overview` component provides an AI-generated summary and suggestions for
 </template>
 
 <script setup>
-import AiOverview from '@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue'
-import ResultCard from './ResultCard.vue'
+import AiOverview from "@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue";
+import ResultCard from "./ResultCard.vue";
 </script>
 ```
 
@@ -93,7 +93,7 @@ You can customize the loading title, extra content, and sliding panel slots:
 </template>
 
 <script setup>
-import AiOverview from '@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue'
-import ResultCard from './ResultCard.vue'
+import AiOverview from "@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue";
+import ResultCard from "./ResultCard.vue";
 </script>
 ```

package/docs/API-reference/components/common/animations/x-components.animate-width.md

@@ -27,7 +27,7 @@ as a transition to animate the width of an element.
 </template>
 
 <script setup>
-import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'
+import AnimateWidth from "@empathyco/x-components/js/components/animations/animate-width.vue";
 </script>
 ```
 
@@ -44,9 +44,9 @@ import AnimateWidth from '@empathyco/x-components/js/components/animations/anima
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'
+import { ref } from "vue";
+import AnimateWidth from "@empathyco/x-components/js/components/animations/animate-width.vue";
 
-const visible = ref(true)
+const visible = ref(true);
 </script>
 ```

package/docs/API-reference/components/common/animations/x-components.change-height.md

@@ -26,7 +26,7 @@ The ChangeHeight component automatically animates the height of its content when
 </template>
 
 <script setup>
-import ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'
+import ChangeHeight from "@empathyco/x-components/js/components/animations/change-height.vue";
 </script>
 ```
 
@@ -37,16 +37,20 @@ import ChangeHeight from '@empathyco/x-components/js/components/animations/chang
   <div>
     <button @click="expanded = !expanded">Toggle</button>
     <ChangeHeight>
-      <div v-if="expanded" style="height: 200px; background: #eee;">Expanded content</div>
-      <div v-else style="height: 50px; background: #ccc;">Collapsed content</div>
+      <div v-if="expanded" style="height: 200px; background: #eee;">
+        Expanded content
+      </div>
+      <div v-else style="height: 50px; background: #ccc;">
+        Collapsed content
+      </div>
     </ChangeHeight>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'
+import { ref } from "vue";
+import ChangeHeight from "@empathyco/x-components/js/components/animations/change-height.vue";
 
-const expanded = ref(false)
+const expanded = ref(false);
 </script>
 ```

package/docs/API-reference/components/common/animations/x-components.collapse-height.md

@@ -36,10 +36,10 @@ The CollapseHeight component is intended to be used as an animation to wrap an e
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import CollapseHeight from '@empathyco/x-components/js/components/animations/collapse-height.vue'
+import { ref } from "vue";
+import CollapseHeight from "@empathyco/x-components/js/components/animations/collapse-height.vue";
 
-const open = ref(false)
+const open = ref(false);
 </script>
 ```
 
@@ -53,10 +53,10 @@ const open = ref(false)
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import CollapseHeight from '@empathyco/x-components/js/components/animations/collapse-height.vue'
+import { ref } from "vue";
+import CollapseHeight from "@empathyco/x-components/js/components/animations/collapse-height.vue";
 
-const open = ref(true)
+const open = ref(true);
 </script>
 ```
 
@@ -67,16 +67,20 @@ const open = ref(true)
   <div>
     <button @click="open = !open">Toggle</button>
     <CollapseHeight>
-      <div v-if="open" style="height: 200px; background: #eee;">Expanded content</div>
-      <div v-else style="height: 50px; background: #ccc;">Collapsed content</div>
+      <div v-if="open" style="height: 200px; background: #eee;">
+        Expanded content
+      </div>
+      <div v-else style="height: 50px; background: #ccc;">
+        Collapsed content
+      </div>
     </CollapseHeight>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import CollapseHeight from '@empathyco/x-components/js/components/animations/collapse-height.vue'
+import { ref } from "vue";
+import CollapseHeight from "@empathyco/x-components/js/components/animations/collapse-height.vue";
 
-const open = ref(false)
+const open = ref(false);
 </script>
 ```

package/docs/API-reference/components/common/animations/x-components.collapse-width.md

@@ -36,10 +36,10 @@ The CollapseWidth component is intended to be used as animation to wrap an eleme
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import CollapseWidth from '@empathyco/x-components/js/components/animations/collapse-width.vue'
+import { ref } from "vue";
+import CollapseWidth from "@empathyco/x-components/js/components/animations/collapse-width.vue";
 
-const open = ref(false)
+const open = ref(false);
 </script>
 ```
 
@@ -53,10 +53,10 @@ const open = ref(false)
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import CollapseWidth from '@empathyco/x-components/js/components/animations/collapse-width.vue'
+import { ref } from "vue";
+import CollapseWidth from "@empathyco/x-components/js/components/animations/collapse-width.vue";
 
-const open = ref(true)
+const open = ref(true);
 </script>
 ```
 
@@ -67,16 +67,18 @@ const open = ref(true)
   <div>
     <button @click="open = !open">Toggle</button>
     <CollapseWidth>
-      <div v-if="open" style="width: 200px; background: #eee;">Expanded content</div>
+      <div v-if="open" style="width: 200px; background: #eee;">
+        Expanded content
+      </div>
       <div v-else style="width: 50px; background: #ccc;">Collapsed content</div>
     </CollapseWidth>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import CollapseWidth from '@empathyco/x-components/js/components/animations/collapse-width.vue'
+import { ref } from "vue";
+import CollapseWidth from "@empathyco/x-components/js/components/animations/collapse-width.vue";
 
-const open = ref(false)
+const open = ref(false);
 </script>
 ```

package/docs/API-reference/components/common/animations/x-components.cross-fade.md

@@ -35,10 +35,10 @@ The `CrossFade` component is intended to be used as an animation to wrap an elem
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import CrossFade from '@empathyco/x-components/js/components/animations/cross-fade.vue'
+import { ref } from "vue";
+import CrossFade from "@empathyco/x-components/js/components/animations/cross-fade.vue";
 
-const open = ref(false)
+const open = ref(false);
 </script>
 ```
 
@@ -52,10 +52,10 @@ const open = ref(false)
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import CrossFade from '@empathyco/x-components/js/components/animations/cross-fade.vue'
+import { ref } from "vue";
+import CrossFade from "@empathyco/x-components/js/components/animations/cross-fade.vue";
 
-const open = ref(true)
+const open = ref(true);
 </script>
 ```
 
@@ -73,9 +73,9 @@ const open = ref(true)
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import CrossFade from '@empathyco/x-components/js/components/animations/cross-fade.vue'
+import { ref } from "vue";
+import CrossFade from "@empathyco/x-components/js/components/animations/cross-fade.vue";
 
-const open = ref(false)
+const open = ref(false);
 </script>
 ```

package/docs/API-reference/components/common/animations/x-components.fade-and-slide.md

@@ -35,7 +35,7 @@ as a wrapper of a transition group that can receive the tag it will render to as
 </template>
 
 <script setup>
-import FadeAndSlide from '@empathyco/x-components/js/components/animations/fade-and-slide.vue'
+import FadeAndSlide from "@empathyco/x-components/js/components/animations/fade-and-slide.vue";
 </script>
 ```
 
@@ -51,7 +51,7 @@ import FadeAndSlide from '@empathyco/x-components/js/components/animations/fade-
 </template>
 
 <script setup>
-import FadeAndSlide from '@empathyco/x-components/js/components/animations/fade-and-slide.vue'
+import FadeAndSlide from "@empathyco/x-components/js/components/animations/fade-and-slide.vue";
 </script>
 ```
 
@@ -66,12 +66,12 @@ import FadeAndSlide from '@empathyco/x-components/js/components/animations/fade-
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import FadeAndSlide from '@empathyco/x-components/js/components/animations/fade-and-slide.vue'
+import { ref } from "vue";
+import FadeAndSlide from "@empathyco/x-components/js/components/animations/fade-and-slide.vue";
 
-const items = ref(['One', 'Two', 'Three'])
+const items = ref(["One", "Two", "Three"]);
 function addItem() {
-  items.value.push(`Item ${items.value.length + 1}`)
+  items.value.push(`Item ${items.value.length + 1}`);
 }
 </script>
 ```

package/docs/API-reference/components/common/animations/x-components.fade.md

@@ -35,10 +35,10 @@ The `Fade` component is intended to be used as animation to wrap an element with
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import Fade from '@empathyco/x-components/js/components/animations/fade.vue'
+import { ref } from "vue";
+import Fade from "@empathyco/x-components/js/components/animations/fade.vue";
 
-const open = ref(false)
+const open = ref(false);
 </script>
 ```
 
@@ -52,10 +52,10 @@ const open = ref(false)
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import Fade from '@empathyco/x-components/js/components/animations/fade.vue'
+import { ref } from "vue";
+import Fade from "@empathyco/x-components/js/components/animations/fade.vue";
 
-const open = ref(true)
+const open = ref(true);
 </script>
 ```
 
@@ -73,9 +73,9 @@ const open = ref(true)
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import Fade from '@empathyco/x-components/js/components/animations/fade.vue'
+import { ref } from "vue";
+import Fade from "@empathyco/x-components/js/components/animations/fade.vue";
 
-const open = ref(false)
+const open = ref(false);
 </script>
 ```

package/docs/API-reference/components/common/animations/x-components.no-animation.md

@@ -23,8 +23,8 @@ The `NoAnimation` component is intended to be used as the default for animation
 </template>
 
 <script setup>
-import NoAnimation from '@empathyco/x-components/js/components/animations/no-animation.vue'
+import NoAnimation from "@empathyco/x-components/js/components/animations/no-animation.vue";
 
-const animation = NoAnimation
+const animation = NoAnimation;
 </script>
 ```

package/docs/API-reference/components/common/animations/x-components.staggered-fade-and-slide.md

@@ -35,7 +35,7 @@ The StaggeredFadeAndSlide component works like the normal fade and slide compone
 </template>
 
 <script setup>
-import StaggeredFadeAndSlide from '@empathyco/x-components/js/components/animations/staggered-fade-and-slide.vue'
+import StaggeredFadeAndSlide from "@empathyco/x-components/js/components/animations/staggered-fade-and-slide.vue";
 </script>
 ```
 
@@ -52,12 +52,12 @@ This component exposes all the props and events of the transition group, like th
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import StaggeredFadeAndSlide from '@empathyco/x-components/js/components/animations/staggered-fade-and-slide.vue'
+import { ref } from "vue";
+import StaggeredFadeAndSlide from "@empathyco/x-components/js/components/animations/staggered-fade-and-slide.vue";
 
-const items = ref(['One', 'Two', 'Three'])
+const items = ref(["One", "Two", "Three"]);
 function addItem() {
-  items.value.push(`Item ${items.value.length + 1}`)
+  items.value.push(`Item ${items.value.length + 1}`);
 }
 </script>
 ```

package/docs/API-reference/components/common/column-picker/x-components.base-column-picker-dropdown.md

@@ -68,10 +68,10 @@ unlike the `toggle`, which renders the same `item` slot defined by default.
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'
+import { ref } from "vue";
+import BaseColumnPickerDropdown from "@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue";
 
-const selectedColumns = ref(2)
+const selectedColumns = ref(2);
 </script>
 ```
 
@@ -80,7 +80,9 @@ const selectedColumns = ref(2)
 ```vue live
 <template>
   <BaseColumnPickerDropdown v-model="selectedColumns" :columns="[2, 4, 6]">
-    <template #toggle="{ item, isOpen }">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>
+    <template #toggle="{ item, isOpen }"
+      >Selected: {{ item }} {{ isOpen ? "🔼" : "🔽" }}️</template
+    >
     <template #item="{ item, isSelected, isHighlighted }">
       <span v-if="isHighlighted">🟢</span>
       <span v-if="isSelected">✅</span>
@@ -90,10 +92,10 @@ const selectedColumns = ref(2)
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'
+import { ref } from "vue";
+import BaseColumnPickerDropdown from "@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue";
 
-const selectedColumns = ref(2)
+const selectedColumns = ref(2);
 </script>
 ```
 
@@ -106,7 +108,9 @@ with other column pickers.
 ```vue live
 <template>
   <BaseColumnPickerDropdown :columns="[2, 4, 6]">
-    <template #toggle="{ item, isOpen }">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>
+    <template #toggle="{ item, isOpen }"
+      >Selected: {{ item }} {{ isOpen ? "🔼" : "🔽" }}️</template
+    >
     <template #item="{ item, isSelected, isHighlighted }">
       <span v-if="isHighlighted">🟢</span>
       <span v-if="isSelected">✅</span>
@@ -116,6 +120,6 @@ with other column pickers.
 </template>
 
 <script setup>
-import BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'
+import BaseColumnPickerDropdown from "@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue";
 </script>
 ```

package/docs/API-reference/components/common/column-picker/x-components.base-column-picker-list.md

@@ -48,10 +48,10 @@ It is required to send the columns prop.
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'
+import { ref } from "vue";
+import BaseColumnPickerList from "@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue";
 
-const columns = ref([2, 4, 6])
+const columns = ref([2, 4, 6]);
 </script>
 ```
 
@@ -66,11 +66,11 @@ updated if the value changes or if the parent changes it.
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'
+import { ref } from "vue";
+import BaseColumnPickerList from "@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue";
 
-const columns = ref([2, 4, 6])
-const selectedColumns = ref(4)
+const columns = ref([2, 4, 6]);
+const selectedColumns = ref(4);
 </script>
 ```
 
@@ -84,16 +84,16 @@ It is possible to override the column picker button content.
 <template>
   <BaseColumnPickerList :columns="columns">
     <template #default="{ column, isSelected }">
-      <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>
+      <span>{{ column }} {{ isSelected ? "🟢" : "" }}</span>
     </template>
   </BaseColumnPickerList>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'
+import { ref } from "vue";
+import BaseColumnPickerList from "@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue";
 
-const columns = ref([2, 4, 6])
+const columns = ref([2, 4, 6]);
 </script>
 ```
 
@@ -110,11 +110,11 @@ It is also possible to add a divider element between the column picker buttons b
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'
-import ChevronRightIcon from '@empathyco/x-components/js/components/icons/chevron-right.vue'
+import { ref } from "vue";
+import BaseColumnPickerList from "@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue";
+import ChevronRightIcon from "@empathyco/x-components/js/components/icons/chevron-right.vue";
 
-const columns = ref([2, 4, 6])
+const columns = ref([2, 4, 6]);
 </script>
 ```
 
@@ -128,10 +128,10 @@ The `buttonClass` prop can be used to add classes to the buttons.
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import BaseColumnPickerList from '@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue'
+import { ref } from "vue";
+import BaseColumnPickerList from "@empathyco/x-components/js/components/column-picker/base-column-picker-list.vue";
 
-const columns = ref([2, 4, 6])
+const columns = ref([2, 4, 6]);
 </script>
 ```
 

package/docs/API-reference/components/common/currency/x-components.base-currency.md

@@ -46,7 +46,7 @@ HTML element.
 </template>
 
 <script setup>
-import BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
 
@@ -57,7 +57,7 @@ import BaseCurrency from '@empathyco/x-components/js/components/currency/base-cu
 </template>
 
 <script setup>
-import BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
 
@@ -68,7 +68,7 @@ import BaseCurrency from '@empathyco/x-components/js/components/currency/base-cu
 </template>
 
 <script setup>
-import BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
 
@@ -79,7 +79,7 @@ import BaseCurrency from '@empathyco/x-components/js/components/currency/base-cu
 </template>
 
 <script setup>
-import BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
 
@@ -90,7 +90,7 @@ import BaseCurrency from '@empathyco/x-components/js/components/currency/base-cu
 </template>
 
 <script setup>
-import BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
 
@@ -101,7 +101,7 @@ import BaseCurrency from '@empathyco/x-components/js/components/currency/base-cu
 </template>
 
 <script setup>
-import BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
 
@@ -112,7 +112,7 @@ import BaseCurrency from '@empathyco/x-components/js/components/currency/base-cu
 </template>
 
 <script setup>
-import BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
 
@@ -123,7 +123,7 @@ import BaseCurrency from '@empathyco/x-components/js/components/currency/base-cu
 </template>
 
 <script setup>
-import BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
 
@@ -134,7 +134,7 @@ import BaseCurrency from '@empathyco/x-components/js/components/currency/base-cu
 </template>
 
 <script setup>
-import BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
 
@@ -145,7 +145,7 @@ import BaseCurrency from '@empathyco/x-components/js/components/currency/base-cu
 </template>
 
 <script setup>
-import BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
 
@@ -156,7 +156,7 @@ import BaseCurrency from '@empathyco/x-components/js/components/currency/base-cu
 </template>
 
 <script setup>
-import BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
 
@@ -167,7 +167,7 @@ import BaseCurrency from '@empathyco/x-components/js/components/currency/base-cu
 </template>
 
 <script setup>
-import BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
 
@@ -178,7 +178,7 @@ import BaseCurrency from '@empathyco/x-components/js/components/currency/base-cu
 </template>
 
 <script setup>
-import BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
 
@@ -189,7 +189,7 @@ import BaseCurrency from '@empathyco/x-components/js/components/currency/base-cu
 </template>
 
 <script setup>
-import BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
 
@@ -200,6 +200,6 @@ import BaseCurrency from '@empathyco/x-components/js/components/currency/base-cu
 </template>
 
 <script setup>
-import { BaseCurrency } from '@empathyco/x-components/js/components/currency/base-currency.vue'
+import { BaseCurrency } from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```

package/docs/API-reference/components/common/filters/labels/x-components.base-price-filter-label.md

@@ -56,7 +56,11 @@ how the price should look like.
 </template>
 
 <script setup>
-import BasePriceFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-price-filter-label.vue'
-import { Filters, Facets, NumberRangeFilter } from '@empathyco/x-components/facets'
+import BasePriceFilterLabel from "@empathyco/x-components/js/components/filters/labels/base-price-filter-label.vue";
+import {
+  Filters,
+  Facets,
+  NumberRangeFilter,
+} from "@empathyco/x-components/facets";
 </script>
 ```