@pequity/squirrel 5.4.6 → 5.4.8

package/squirrel/components/p-pagination/p-pagination.vue

@@ -32,8 +32,8 @@
 
 <script setup lang="ts">
 import PSkeletonLoader from '@squirrel/components/p-skeleton-loader/p-skeleton-loader.vue';
-import { type PropType, computed } from 'vue';
 import { createPagingRange } from '@squirrel/utils/pagination';
+import { computed, type PropType } from 'vue';
 
 defineOptions({ name: 'PPagination' });
 

package/squirrel/components/p-progress-bar/p-progess-bar.spec.js

@@ -21,7 +21,7 @@ describe('PProgressBar.vue', () => {
     expect(div.classes()).toEqual(['flex', 'justify-start', 'overflow-hidden', 'rounded', 'bg-p-blue-20']);
   });
 
-  it('attrs fall through ', async () => {
+  it('attrs fall through', async () => {
     const ParentComponent = {
       template: `
         <PProgressBar :total="2" :items="items" class="test-class" data-testattr="test attribute" />

package/squirrel/components/p-progress-bar/p-progress-bar.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { type PropType, defineComponent } from 'vue';
+import { defineComponent, type PropType } from 'vue';
 
 export type ProgressItem = {
   value: number;

package/squirrel/components/p-select/p-select.spec.js

@@ -1,6 +1,6 @@
 import PSelect from '@squirrel/components/p-select/p-select.vue';
-import { cloneDeep } from 'lodash-es';
 import { createWrapperFor, sleep, waitNT } from '@tests/vitest.helpers';
+import { cloneDeep } from 'lodash-es';
 
 const baseClasses = () => [
   'text-night',

package/squirrel/components/p-select/p-select.stories.js

@@ -1,5 +1,5 @@
-import PSelect from '@squirrel/components/p-select/p-select.vue';
 import { fieldArgTypes } from '@root/stories/common/field';
+import PSelect from '@squirrel/components/p-select/p-select.vue';
 
 const selectItems = Object.freeze([
   { value: 1, text: 'Aleksandr Chappel' },

package/squirrel/components/p-select/p-select.vue

@@ -15,10 +15,10 @@
 </template>
 
 <script setup lang="ts">
+import { useInputClasses } from '@squirrel/composables/useInputClasses';
 import { INPUT_SIZES, type InputSize } from '@squirrel/utils/inputClassesShared';
 import { type PropType, type StyleValue } from 'vue';
 import { computed, useAttrs } from 'vue';
-import { useInputClasses } from '@squirrel/composables/useInputClasses';
 
 defineOptions({
   name: 'PSelect',

package/squirrel/components/p-select-btn/p-select-btn.spec.js

@@ -1,6 +1,6 @@
 import PSelectBtn from '@squirrel/components/p-select-btn/p-select-btn.vue';
-import { cloneDeep } from 'lodash-es';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { cloneDeep } from 'lodash-es';
 
 const items = [
   { textCustom: 'Option 1', valueCustom: 1 },

package/squirrel/components/p-select-btn/p-select-btn.stories.js

@@ -1,6 +1,6 @@
+import { fieldArgTypes } from '@root/stories/common/field';
 import PSelectBtn from '@squirrel/components/p-select-btn/p-select-btn.vue';
 import { expect, userEvent, within } from '@storybook/test';
-import { fieldArgTypes } from '@root/stories/common/field';
 
 const selectItems = Object.freeze([
   { value: 1, text: 'Aleksandr Chappel', tooltip: 'lorem ipsum text 1' },

package/squirrel/components/p-select-btn/p-select-btn.vue

@@ -27,8 +27,8 @@
 </template>
 
 <script setup lang="ts">
-import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import { type Size } from '@squirrel/components/p-btn/p-btn.types';
+import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 
 type BtnGroupItem = Record<string, string | number | boolean>;
 type Key = string | number;

package/squirrel/components/p-select-list/p-select-list.spec.js

@@ -1,9 +1,9 @@
-import PSelectList from '@squirrel/components/p-select-list/p-select-list.vue';
 import filterListItems from '@squirrel/components/p-dropdown-select/p-dropdown-select.mock.json';
-import { cloneDeep } from 'lodash-es';
+import PSelectList from '@squirrel/components/p-select-list/p-select-list.vue';
+import { useVirtualizer } from '@tanstack/vue-virtual';
 import { createWrapperFor, sleep } from '@tests/vitest.helpers';
+import { cloneDeep } from 'lodash-es';
 import { ref } from 'vue';
-import { useVirtualizer } from '@tanstack/vue-virtual';
 
 vi.mock('@tanstack/vue-virtual', () => ({
   useVirtualizer: vi.fn(),
@@ -355,7 +355,7 @@ describe('PSelectList.vue', () => {
     cleanup(wrapper);
   });
 
-  it.each([true, false])('renders correctly when "multiple" is set to %s ', async (val) => {
+  it.each([true, false])('renders correctly when "multiple" is set to %s', async (val) => {
     const items = cloneDeep(filterListItems).slice(0, 20);
     const wrapper = createWrapper({ items }, { multiple: val });
 

package/squirrel/components/p-select-list/p-select-list.vue

@@ -123,14 +123,14 @@ import {
   type AnyObject,
   type AnyValue,
   type ModelValue,
-  SIZES,
   type Size,
+  SIZES,
 } from '@squirrel/components/p-select-list/p-select-list.types';
-import { type ComponentPublicInstance, type PropType, type StyleValue, computed, onMounted, ref, useAttrs } from 'vue';
-import { splitStringForHighlight } from '@squirrel/utils/text';
-import { toString } from '@squirrel/utils/string';
-import { useInputClasses } from '@squirrel/composables/useInputClasses';
 import { useSelectList } from '@squirrel/components/p-select-list/useSelectList';
+import { useInputClasses } from '@squirrel/composables/useInputClasses';
+import { toString } from '@squirrel/utils/string';
+import { splitStringForHighlight } from '@squirrel/utils/text';
+import { type ComponentPublicInstance, computed, onMounted, type PropType, ref, type StyleValue, useAttrs } from 'vue';
 
 defineOptions({
   name: 'PSelectList',

package/squirrel/components/p-select-list/useSelectList.ts

@@ -4,15 +4,15 @@ import {
   type ModelValue,
   type Size,
 } from '@squirrel/components/p-select-list/p-select-list.types';
-import { type ComponentPublicInstance, type Ref, computed, nextTick, onUnmounted, ref, watch } from 'vue';
+import { createInternalItems, createInternalValue } from '@squirrel/components/p-select-list/p-select-list.utils';
 import {
   type ListKeyboardNavigationInstance,
   setupListKeyboardNavigation,
 } from '@squirrel/utils/listKeyboardNavigation';
-import { cloneDeep, uniqBy } from 'lodash-es';
-import { createInternalItems, createInternalValue } from '@squirrel/components/p-select-list/p-select-list.utils';
 import { toString } from '@squirrel/utils/string';
 import { useVirtualizer } from '@tanstack/vue-virtual';
+import { cloneDeep, uniqBy } from 'lodash-es';
+import { type ComponentPublicInstance, computed, nextTick, onUnmounted, type Ref, ref, watch } from 'vue';
 
 type Emits = {
   (e: 'update:modelValue', modelValue: ModelValue): void;

package/squirrel/components/p-select-pill/p-select-pill.spec.js

@@ -106,7 +106,7 @@ describe('PSelectPill.vue', () => {
     ['sm', ['h-7', 'px-4', 'text-xs']],
     ['md', ['h-9', 'px-5', 'text-sm']],
     ['lg', ['h-11', 'px-7', 'text-base']],
-  ])(`supports %s size `, async (size, classes) => {
+  ])(`supports %s size`, async (size, classes) => {
     const wrapper = createWrapperFor(PSelectPill, {
       props: {
         items: selectItems,

package/squirrel/components/p-select-pill/p-select-pill.stories.js

@@ -1,7 +1,7 @@
-import PSelectPill from '@squirrel/components/p-select-pill/p-select-pill.vue';
-import { expect, userEvent, within } from '@storybook/test';
 import { fieldArgTypes } from '@root/stories/common/field';
 import { getCSSTransitionDuration, sleep } from '@root/stories/common/helpers';
+import PSelectPill from '@squirrel/components/p-select-pill/p-select-pill.vue';
+import { expect, userEvent, within } from '@storybook/test';
 
 const ACTIVE_CLASS = 'text-p-purple-60';
 

package/squirrel/components/p-select-pill/p-select-pill.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { type PropType, defineComponent } from 'vue';
+import { defineComponent, type PropType } from 'vue';
 
 type Option = Record<string, unknown> & {
   text: string;
@@ -105,6 +105,14 @@ export default defineComponent({
       immediate: true,
       flush: 'post',
     },
+    items: {
+      handler() {
+        setTimeout(() => this.setPillStyle(), 60);
+      },
+      immediate: true,
+      flush: 'post',
+      deep: true,
+    },
   },
   methods: {
     click(e: Event, option: Option) {

package/squirrel/components/p-skeleton-loader/p-skeleton-loader.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import { type PropType, defineComponent } from 'vue';
+import { defineComponent, type PropType } from 'vue';
 
 const LOADER_TYPES = {
   rectangle: 'rectangle',

package/squirrel/components/p-table/p-table.spec.js

@@ -1,11 +1,11 @@
-import PTable from '@squirrel/components/p-table/p-table.vue';
-import { cloneDeep } from 'lodash-es';
 import {
   colsInjectionKey,
   isFirstColFixedInjectionKey,
   isLastColFixedInjectionKey,
 } from '@squirrel/components/p-table/p-table.types';
+import PTable from '@squirrel/components/p-table/p-table.vue';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { cloneDeep } from 'lodash-es';
 import { defineComponent, h, inject } from 'vue';
 
 const columns = [

package/squirrel/components/p-table/p-table.vue

@@ -79,17 +79,17 @@
 </template>
 
 <script setup lang="ts">
-import PTableHeaderCell from '@squirrel/components/p-table-header-cell/p-table-header-cell.vue';
 import {
-  type TableCol,
   colsInjectionKey,
   isColsResizableInjectionKey,
   isFirstColFixedInjectionKey,
   isLastColFixedInjectionKey,
+  type TableCol,
 } from '@squirrel/components/p-table/p-table.types';
-import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
-import { kebabCase } from 'lodash-es';
 import { usePTableColResize } from '@squirrel/components/p-table/usePTableColResize';
+import PTableHeaderCell from '@squirrel/components/p-table-header-cell/p-table-header-cell.vue';
+import { kebabCase } from 'lodash-es';
+import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
 
 type Props = {
   cols: TableCol[];

package/squirrel/components/p-table/usePTableColResize.spec.js

@@ -1,5 +1,5 @@
-import { createApp, nextTick, ref } from 'vue';
 import { usePTableColResize } from '@squirrel/components/p-table/usePTableColResize';
+import { createApp, nextTick, ref } from 'vue';
 
 const withSetup = (composable) => {
   let result;

package/squirrel/components/p-table/usePTableColResize.ts

@@ -1,5 +1,5 @@
 import { MIN_WIDTH_COL_RESIZE } from '@squirrel/components/p-table/p-table.types';
-import { type Ref, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, type Ref, ref, watch } from 'vue';
 
 type Options = {
   enabled: Ref<boolean>;

package/squirrel/components/p-table/usePTableRowVirtualizer.ts

@@ -1,5 +1,5 @@
-import { type ComponentPublicInstance, type ComputedRef, type Ref, computed, isRef, nextTick, ref, unref } from 'vue';
 import { useVirtualizer } from '@tanstack/vue-virtual';
+import { type ComponentPublicInstance, computed, type ComputedRef, isRef, nextTick, type Ref, ref, unref } from 'vue';
 
 type Options = ComputedRef<{
   count: number;

package/squirrel/components/p-table-sort/p-table-sort.spec.js

@@ -1,5 +1,5 @@
-import PTableSort from '@squirrel/components/p-table-sort/p-table-sort.vue';
 import { SORTING_TYPES } from '@squirrel/components/p-table-sort/p-table-sort.config';
+import PTableSort from '@squirrel/components/p-table-sort/p-table-sort.vue';
 import { createWrapperFor } from '@tests/vitest.helpers';
 
 describe('PTableSort.vue', () => {

package/squirrel/components/p-table-sort/p-table-sort.stories.js

@@ -1,5 +1,5 @@
-import PTableSort from '@squirrel/components/p-table-sort/p-table-sort.vue';
 import { SORTING_TYPES } from '@squirrel/components/p-table-sort/p-table-sort.config';
+import PTableSort from '@squirrel/components/p-table-sort/p-table-sort.vue';
 
 export default {
   title: 'Components/PTableSort',

package/squirrel/components/p-table-sort/p-table-sort.vue

@@ -56,8 +56,8 @@
 </template>
 
 <script lang="ts">
-import { type PropType, defineComponent } from 'vue';
 import { SORTING_TYPES, type SortingType } from '@squirrel/components/p-table-sort/p-table-sort.config';
+import { defineComponent, type PropType } from 'vue';
 
 export default defineComponent({
   name: 'PTableSort',

package/squirrel/components/p-table-td/p-table-td.spec.js

@@ -1,10 +1,10 @@
-import PTableTd from '@squirrel/components/p-table-td/p-table-td.vue';
 import {
   colsInjectionKey,
   isColsResizableInjectionKey,
   isFirstColFixedInjectionKey,
   isLastColFixedInjectionKey,
 } from '@squirrel/components/p-table/p-table.types';
+import PTableTd from '@squirrel/components/p-table-td/p-table-td.vue';
 import { createWrapperFor } from '@tests/vitest.helpers';
 import { ref } from 'vue';
 
@@ -123,7 +123,7 @@ describe('PTableTd.vue', () => {
     });
   });
 
-  it('it applies spacing on the first non-sticky column', async () => {
+  it('applies spacing on the first non-sticky column', async () => {
     const wrapper = createWrapperFor(PTableTd, {
       props: { colIndex: 1 },
       slots: { default: `Cell content` },
@@ -140,7 +140,7 @@ describe('PTableTd.vue', () => {
     expect([...innerDiv.classes()].sort()).toEqual(['w-max', 'pl-4', 'pr-2'].sort());
   });
 
-  it('it applies spacing on the last non-sticky column', async () => {
+  it('applies spacing on the last non-sticky column', async () => {
     const wrapper = createWrapperFor(PTableTd, {
       props: { colIndex: 1 },
       slots: { default: `Cell content` },

package/squirrel/components/p-table-td/p-table-td.stories.js

@@ -1,5 +1,5 @@
-import PTableTd from '@squirrel/components/p-table-td/p-table-td.vue';
 import { colsInjectionKey } from '@squirrel/components/p-table/p-table.types';
+import PTableTd from '@squirrel/components/p-table-td/p-table-td.vue';
 import { defineComponent, h, provide } from 'vue';
 
 const columns = [{ id: 1 }, { id: 2 }];

package/squirrel/components/p-table-td/p-table-td.vue

@@ -13,14 +13,14 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, computed, inject, ref } from 'vue';
 import {
-  type TableCol,
   colsInjectionKey,
   isColsResizableInjectionKey,
   isFirstColFixedInjectionKey,
   isLastColFixedInjectionKey,
+  type TableCol,
 } from '@squirrel/components/p-table/p-table.types';
+import { computed, inject, type Ref, ref } from 'vue';
 
 defineOptions({ name: 'PTableTd', inheritAttrs: false });
 

package/squirrel/components/p-tabs/p-tabs.vue

@@ -27,8 +27,8 @@
 </template>
 
 <script setup lang="ts">
-import { type RouteLocationRaw } from 'vue-router';
 import { type ShallowRef } from 'vue';
+import { type RouteLocationRaw } from 'vue-router';
 
 // types
 type Tab = {

package/squirrel/components/p-textarea/p-textarea.stories.js

@@ -1,5 +1,5 @@
-import PTextarea from '@squirrel/components/p-textarea/p-textarea.vue';
 import { fieldArgTypes } from '@root/stories/common/field';
+import PTextarea from '@squirrel/components/p-textarea/p-textarea.vue';
 
 export default {
   title: 'Components/PTextarea',

package/squirrel/components/p-textarea/p-textarea.vue

@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
-import { type StyleValue, defineComponent } from 'vue';
+import { defineComponent, type StyleValue } from 'vue';
 
 export default defineComponent({
   name: 'PTextarea',

package/squirrel/components/p-toggle/p-toggle.stories.js

@@ -1,5 +1,5 @@
-import PToggle from '@squirrel/components/p-toggle/p-toggle.vue';
 import { fieldArgTypes } from '@root/stories/common/field';
+import PToggle from '@squirrel/components/p-toggle/p-toggle.vue';
 
 export default {
   title: 'Components/PToggle',

package/squirrel/components/p-toggle/p-toggle.vue

@@ -26,7 +26,7 @@
 
 <script lang="ts">
 import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
-import { type StyleValue, defineComponent } from 'vue';
+import { defineComponent, type StyleValue } from 'vue';
 
 const TOGGLE_SIZES = {
   sm: `w-7 h-4 after:top-[2px] after:left-[2px] after:h-3 after:w-3`,

package/squirrel/composables/useInputClasses.spec.js

@@ -1,6 +1,6 @@
+import { useInputClasses } from '@squirrel/composables/useInputClasses';
 import { SPACING_LEFT, SPACING_PREFIX, SPACING_RIGHT, SPACING_SUFFIX } from '@squirrel/utils/inputClassesShared';
 import { reactive } from 'vue';
-import { useInputClasses } from '@squirrel/composables/useInputClasses';
 
 const baseInputClasses = () =>
   [

package/squirrel/index.ts

@@ -1,6 +1,6 @@
 import '@squirrel/assets/squirrel.css';
 
-export * from '@squirrel/tailwind/config';
 export * from '@squirrel/components';
 export * from '@squirrel/composables';
+export * from '@squirrel/tailwind/config';
 export * from '@squirrel/utils';

package/squirrel/utils/component.ts

@@ -1,5 +1,5 @@
-import { type Component } from 'vue';
 import { isPlainObject } from 'lodash-es';
+import { type Component } from 'vue';
 
 // Vue produces a different type of object in dev and prod mode, so we cannot check for e.g `typeof val.render === 'function`
 export const isComponent = (val: unknown): val is Component => isPlainObject(val);

package/squirrel/utils/index.ts

@@ -1,6 +1,6 @@
-import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
 import { CURRENCY_INPUT_DEFAULTS } from '@squirrel/utils/currency';
-import { type Color, getColor, getColorDeep, getScreen } from '@squirrel/utils/tailwind';
+import { getNextActiveElement, isElement, isVisible } from '@squirrel/utils/dom';
+import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
 import {
   ERROR_MSG,
   INPUT_BASE,
@@ -20,47 +20,47 @@ import {
   SPACING_SUFFIX,
   TEXTAREA_BASE,
 } from '@squirrel/utils/inputClassesShared';
-import { createPagingRange } from '@squirrel/utils/pagination';
-import { getNextActiveElement, isElement, isVisible } from '@squirrel/utils/dom';
-import { isObject } from '@squirrel/utils/object';
-import { sanitizeUrl } from '@squirrel/utils/sanitization';
 import { setupListKeyboardNavigation } from '@squirrel/utils/listKeyboardNavigation';
-import { splitStringForHighlight } from '@squirrel/utils/text';
 import { toNumberOrNull } from '@squirrel/utils/number';
+import { isObject } from '@squirrel/utils/object';
+import { createPagingRange } from '@squirrel/utils/pagination';
+import { sanitizeUrl } from '@squirrel/utils/sanitization';
 import { toString } from '@squirrel/utils/string';
+import { type Color, getColor, getColorDeep, getScreen } from '@squirrel/utils/tailwind';
+import { splitStringForHighlight } from '@squirrel/utils/text';
 
 export {
-  inputClassesMixin,
-  CURRENCY_INPUT_DEFAULTS,
   Color,
+  createPagingRange,
+  CURRENCY_INPUT_DEFAULTS,
+  ERROR_MSG,
   getColor,
   getColorDeep,
+  getNextActiveElement,
   getScreen,
-  ERROR_MSG,
   INPUT_BASE,
   INPUT_ERROR,
   INPUT_NORMAL,
   INPUT_SIZES,
+  inputClassesMixin,
   InputSize,
+  isElement,
+  isObject,
+  isVisible,
   LABEL_BASE,
   LABEL_REQUIRED,
   LABEL_SIZES,
+  sanitizeUrl,
   SELECT_ARROW,
   SELECT_BASE,
   SELECT_SIZES,
+  setupListKeyboardNavigation,
   SPACING_LEFT,
   SPACING_PREFIX,
   SPACING_RIGHT,
   SPACING_SUFFIX,
-  TEXTAREA_BASE,
-  createPagingRange,
-  getNextActiveElement,
-  isElement,
-  isVisible,
-  isObject,
-  sanitizeUrl,
-  setupListKeyboardNavigation,
   splitStringForHighlight,
+  TEXTAREA_BASE,
   toNumberOrNull,
   toString,
 };

package/squirrel/utils/inputClassesMixin.ts

@@ -17,7 +17,7 @@ import {
   SPACING_SUFFIX,
   TEXTAREA_BASE,
 } from '@squirrel/utils/inputClassesShared';
-import { type PropType, defineComponent } from 'vue';
+import { defineComponent, type PropType } from 'vue';
 
 export default defineComponent({
   props: {

package/squirrel/utils/pagination.spec.js

@@ -22,7 +22,7 @@ describe('pagination', () => {
     [18, [1, '...', 17, 18, 19, 20]],
     [19, [1, '...', 17, 18, 19, 20]],
     [20, [1, '...', 18, 19, 20]],
-  ])('it creates paging range (%i, 20)', (currentPage, res) => {
+  ])('creates paging range (%i, 20)', (currentPage, res) => {
     expect(createPagingRange(currentPage, 20)).toStrictEqual(res);
   });
 
@@ -47,7 +47,7 @@ describe('pagination', () => {
     [18, [1, '...', 15, 16, 17, 18, 19, 20]],
     [19, [1, '...', 16, 17, 18, 19, 20]],
     [20, [1, '...', 17, 18, 19, 20]],
-  ])('it creates paging range (%i, 20) with the offset set to 3', (currentPage, res) => {
+  ])('creates paging range (%i, 20) with the offset set to 3', (currentPage, res) => {
     expect(createPagingRange(currentPage, 20, 3)).toStrictEqual(res);
   });
 

package/squirrel/utils/sanitization.spec.js

@@ -51,7 +51,7 @@ describe('sanitizeUrl', () => {
     '&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74:',
     'jav	ascript:alert();',
     'jav\u0000ascript:alert();',
-  ])('it adds an "unsafe:" prefix if the URL is invalid (%s)', (urlVal) => {
+  ])('adds an "unsafe:" prefix if the URL is invalid (%s)', (urlVal) => {
     expect(sanitizeUrl(urlVal)).toMatch(/^unsafe:/);
   });
 });

package/squirrel/utils/tailwind.ts

@@ -1,13 +1,14 @@
-import resolveConfig from 'tailwindcss/resolveConfig';
+import { config as squirrelTailwindConfig } from '@squirrel/tailwind/config';
 // Relative import is used here because of
 // "Module source URI is not allowed in this document: “http://tailwind.config/”" error
 import { get } from 'lodash-es';
-import { config as squirrelTailwindConfig } from '@squirrel/tailwind/config';
 import type { Config } from 'tailwindcss';
+import resolveConfig from 'tailwindcss/resolveConfig';
 
 const config = resolveConfig(squirrelTailwindConfig);
 const theme = config.theme as Config['theme'];
 const colors = theme?.colors;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const extendedColors = theme?.extend?.colors;
 const screens = theme?.screens;