@paperless/core 3.0.2 → 3.1.0

package/dist/collection/components/molecules/field/field/field.component.js

@@ -4,10 +4,10 @@ import { ThemedHost } from "../../../../internal/themed-host.component";
 import { asBoolean } from "../../../../utils/as-boolean";
 import { cn } from "../../../../utils/cn";
 import { nonce } from "../../../../utils/nonce";
-const field = cva(['flex gap-2', 'w-inherit', 'border-solid rounded-lg', 'relative'], {
+const field = cva(['flex gap-2', 'w-inherit', 'rounded-lg border-solid', 'relative'], {
     variants: {
         variant: {
-            read: 'border-0 items-start flex-wrap hyphens-auto break-normal leading-6',
+            read: 'flex-wrap items-start hyphens-auto break-normal border-0 leading-6',
             write: 'border px-2',
         },
         size: {
@@ -58,24 +58,37 @@ const field = cva(['flex gap-2', 'w-inherit', 'border-solid rounded-lg', 'relati
             variant: 'write',
             focused: false,
             error: false,
-            class: 'border-storm-100 dark:border-hurricane-400',
+            class: `
+      border-storm-100
+      dark:border-hurricane-400
+    `,
         },
         {
             variant: 'write',
             disabled: false,
             focused: true,
             error: false,
-            class: 'border-indigo-600 ring dark:ring-0 ring-indigo-100 selection:bg-indigo-500',
+            class: `
+      border-indigo-600 ring ring-indigo-100
+      selection:bg-indigo-500
+      dark:ring-0
+    `,
         },
         {
             variant: 'write',
             disabled: false,
-            class: 'bg-white dark:bg-hurricane-500',
+            class: `
+      bg-white
+      dark:bg-hurricane-500
+    `,
         },
         {
             variant: 'write',
             disabled: true,
-            class: 'bg-white-600 dark:bg-hurricane-600 dark:border-hurricane-500 cursor-not-allowed',
+            class: `
+      cursor-not-allowed bg-white-600
+      dark:border-hurricane-500 dark:bg-hurricane-600
+    `,
         },
         {
             disabled: false,
@@ -86,14 +99,25 @@ const field = cva(['flex gap-2', 'w-inherit', 'border-solid rounded-lg', 'relati
             disabled: false,
             focused: true,
             error: true,
-            class: 'ring ring-negative-red-50 selection:bg-negative-red-50 dark:ring-0',
+            class: `
+      ring ring-negative-red-50
+      selection:bg-negative-red-50
+      dark:ring-0
+    `,
         },
     ],
 });
 const input = cva([
-    'text-sm placeholder:text-sm placeholder:text-storm-500/40 dark:placeholder:text-hurricane-200',
-    'border-none  bg-transparent flex-1 min-w-0 p-0',
-    'outline-none focus:outline-none',
+    `
+    text-sm
+    placeholder:text-sm placeholder:text-storm-500/40
+    dark:placeholder:text-hurricane-200
+  `,
+    'min-w-0 flex-1 border-none bg-transparent p-0',
+    `
+    outline-none
+    focus:outline-none
+  `,
     'font-geist',
 ], {
     variants: {
@@ -106,12 +130,15 @@ const input = cva([
             true: 'cursor-not-allowed',
         },
         error: {
-            false: 'text-storm-500 dark:text-white',
+            false: `
+      text-storm-500
+      dark:text-white
+    `,
             true: 'text-negative-red-500',
         },
     },
 });
-const prefixAndSuffix = cva(['flex flex-shrink-0 justify-center items-center text-center'], {
+const prefixAndSuffix = cva(['flex flex-shrink-0 items-center justify-center text-center'], {
     variants: {
         variant: {
             read: 'leading-6',
@@ -119,7 +146,10 @@ const prefixAndSuffix = cva(['flex flex-shrink-0 justify-center items-center tex
         },
         disabled: {
             false: null,
-            true: 'text-storm-100 dark:text-hurricane-400',
+            true: `
+      text-storm-100
+      dark:text-hurricane-400
+    `,
         },
         focused: {
             false: null,
@@ -143,13 +173,19 @@ const prefixAndSuffix = cva(['flex flex-shrink-0 justify-center items-center tex
             disabled: false,
             focused: false,
             error: false,
-            class: 'text-storm-300 dark:text-hurricane-200',
+            class: `
+      text-storm-300
+      dark:text-hurricane-200
+    `,
         },
         {
             disabled: false,
             focused: true,
             error: false,
-            class: 'text-storm-500 dark:text-white',
+            class: `
+      text-storm-500
+      dark:text-white
+    `,
         },
         {
             disabled: false,
@@ -329,8 +365,8 @@ export class Field {
     }
     render() {
         const { id, prefix, suffix, hasHeaderSlot, hasLabelSlot, hasHelperSlot, hasErrorSlot, hasValueSlot, } = this._getSlotInfo();
-        return (h(ThemedHost, { key: '09b8254690a1603271faac4d9653c90a582a4766' }, h("p-field-container", { key: '776ed3812a980004c1cdc1b6c5b79df5908b383e', align: this.align, error: this.error, forceShowTooltip: (!!this.error?.length && !this._focused && this.autoShowError) ||
-                (!!this.error?.length && this.forceShowTooltip), helper: this.helper, id: id, label: this.label, loading: this.loading, loadingSize: this.size, required: this.required, showOptional: this.showOptional, variant: this.variant }, hasLabelSlot && (h("slot", { key: '597e07f1227421eb34575f2c35a5f752f60a66a3', name: 'label', slot: 'label' })), hasHeaderSlot && (h("slot", { key: '0ec1fd3a079f51c605b593e90d8514119ae0ffa3', name: 'header', slot: 'header' })), hasHelperSlot && (h("slot", { key: 'c71b52f8f6f8fc374e9d7e0c2ed4f838c9f9cb86', name: 'helper', slot: 'helper' })), hasErrorSlot && (h("slot", { key: 'd62e1c5f5592540dacbb2e18cf5cc560efbbc5a4', name: 'error', slot: 'error' })), h("div", { key: '7d30604708a80bd509b5d739e46d82b5fa23b464', class: field({
+        return (h(ThemedHost, { key: 'd309322e4a2a9e73d7e20cb5e585eba64d3af95f' }, h("p-field-container", { key: '85327bdb7a5aa7e071c4024e3d490a6b9759b184', align: this.align, error: this.error, forceShowTooltip: (!!this.error?.length && !this._focused && this.autoShowError) ||
+                (!!this.error?.length && this.forceShowTooltip), helper: this.helper, id: id, label: this.label, loading: this.loading, loadingSize: this.size, required: this.required, showOptional: this.showOptional, variant: this.variant }, hasLabelSlot && (h("slot", { key: '4cbdc7b148e94564fc0b986a7780180bd8813d58', name: 'label', slot: 'label' })), hasHeaderSlot && (h("slot", { key: '61a1b3cb45df2792fbf51aa6e91d11b10e1b72e6', name: 'header', slot: 'header' })), hasHelperSlot && (h("slot", { key: 'd208829c7f4629f7390236d3a8c990d47d91f66b', name: 'helper', slot: 'helper' })), hasErrorSlot && (h("slot", { key: 'e4bd3ef86143630c0ebe9fe006aea4b7be2ca10f', name: 'error', slot: 'error' })), h("div", { key: 'ea260caef724543db24f04bb5861ea2a138c1574', class: field({
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),
                 focused: asBoolean(this.focused) || this._focused,
@@ -341,7 +377,7 @@ export class Field {
                 ? `${this.value}`
                 : undefined }, (this.error?.length ||
             prefix ||
-            (this.icon && this.iconPosition === 'start')) && (h("div", { key: 'b4b203ba8f20620b2d7f368d2c6367bdadea9878', class: prefixAndSuffix({
+            (this.icon && this.iconPosition === 'start')) && (h("div", { key: 'd0e3d37f5fc3e7676cc3bc7f622733504169ddcf', class: prefixAndSuffix({
                 variant: this.variant,
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),
@@ -351,7 +387,7 @@ export class Field {
             }), onClick: () => this._focusInput() }, (this.icon && this.iconPosition === 'start') ||
             this.error?.length ? (h("p-icon", { class: cn('flex', {
                 'mt-1': this.variant === 'read' && this.size === 'base',
-            }), flip: this.iconFlip, rotate: this.iconRotate, variant: this.error?.length ? 'warning' : this.icon })) : (prefix))), this._getContent(hasValueSlot, id), (suffix || (this.icon && this.iconPosition === 'end')) && (h("div", { key: '5fe27dcdc61d7ba5646ecd6e062ad51f808dc4dd', class: prefixAndSuffix({
+            }), flip: this.iconFlip, rotate: this.iconRotate, variant: this.error?.length ? 'warning' : this.icon })) : (prefix))), this._getContent(hasValueSlot, id), (suffix || (this.icon && this.iconPosition === 'end')) && (h("div", { key: 'f479afb28bbd5ba74b78deaa7b9daf1ef543fa27', class: prefixAndSuffix({
                 variant: this.variant,
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),

package/dist/collection/components/molecules/label/label.component.js

@@ -7,10 +7,13 @@ const label = cva(['flex items-center justify-center gap-2', 'h-6 rounded-full']
         variant: {
             positive: [
                 'bg-positive-green-100 text-positive-green-800',
-                'dark:bg-positive-green-alternative/15 dark:text-positive-green-alternative',
+                `
+       dark:bg-positive-green-alternative/15
+       dark:text-positive-green-alternative
+     `,
             ],
             biased: [
-                'bg-amber-100  text-amber-800',
+                'bg-amber-100 text-amber-800',
                 'dark:bg-amber-alternative/15 dark:text-amber-alternative',
             ],
             negative: [
@@ -28,7 +31,7 @@ const label = cva(['flex items-center justify-center gap-2', 'h-6 rounded-full']
         },
         iconOnly: {
             false: 'px-2',
-            true: 'p-2 w-6',
+            true: 'w-6 p-2',
         },
         keepMobileContent: {
             false: null,
@@ -39,7 +42,10 @@ const label = cva(['flex items-center justify-center gap-2', 'h-6 rounded-full']
         {
             keepMobileContent: false,
             iconOnly: false,
-            class: 'p-2 w-6 desktop-xs:w-auto desktop-xs:py-0',
+            class: `
+      w-6 p-2
+      desktop-xs:w-auto desktop-xs:py-0
+    `,
         },
     ],
 });
@@ -69,14 +75,17 @@ export class Label {
      */
     keepMobileContent = false;
     render() {
-        return (h(ThemedHost, { key: '53d97bb000a19617372b807e32bc9902758de3b2' }, h("div", { key: '4f1c2e4b9dd25972a2ab5146234a6166ee71bc27', class: label({
+        return (h(ThemedHost, { key: '50279029679d4106c05894266a5d5289cb32ebfa' }, h("div", { key: '4fbae53bce0120c530b26b6b962b219262a93356', class: label({
                 variant: this.variant,
                 iconOnly: this.iconOnly,
                 keepMobileContent: this.keepMobileContent,
-            }) }, this.icon && (h("p-icon", { key: '24ec81f74dfeea24990a76edac38ccdc79490e88', class: 'flex-shrink-0', flip: this.iconFlip, rotate: this.iconRotate, variant: this.icon })), !this.iconOnly && (h("div", { key: 'd0b89fc24b7304a8e61e5157bcf4bdae3bdb26ca', class: cn('flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium', {
+            }) }, this.icon && (h("p-icon", { key: '20f67e7082c6cffa555b7411a2b81ced7263c9f2', class: 'flex-shrink-0', flip: this.iconFlip, rotate: this.iconRotate, variant: this.icon })), !this.iconOnly && (h("div", { key: 'ff2f20fc5eaeb3bb8eb5aa3956819c52aeaf03df', class: cn(`
+          flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm
+          font-medium
+        `, {
                 hidden: !this.keepMobileContent,
                 'desktop-xs:block': !this.keepMobileContent,
-            }) }, h("slot", { key: 'ad87aa170cc6f7980678a1cfc25f5dbdf510127e' }))))));
+            }) }, h("slot", { key: '3e11788ad3fb910d573d6f63ac7d57a7671687b2' }))))));
     }
     static get is() { return "p-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/navigation/item/navigation-item.component.js

@@ -6,20 +6,32 @@ import { cn } from "../../../../utils/cn";
 const navigationItem = cva([
     'h-8 w-[inherit]',
     'flex items-center gap-2',
-    'hover:text-storm-500 dark:hover:text-white',
+    `
+    hover:text-storm-500
+    dark:hover:text-white
+  `,
     'rounded-lg',
-    'py-1 px-2',
+    'px-2 py-1',
     'text-sm font-medium',
     'cursor-pointer',
 ], {
     variants: {
         active: {
             false: [
-                'text-storm-400 dark:text-hurricane-200',
-                'hover:bg-off-white-500 dark:hover:bg-white/10',
+                `
+       text-storm-400
+       dark:text-hurricane-200
+     `,
+                `
+       hover:bg-off-white-500
+       dark:hover:bg-white/10
+     `,
             ],
             true: [
-                'bg-off-white-600 dark:bg-white/10 text-storm-500 dark:text-white font-semibold',
+                `
+       bg-off-white-600 font-semibold text-storm-500
+       dark:bg-white/10 dark:text-white
+     `,
             ],
         },
         icon: {
@@ -28,7 +40,7 @@ const navigationItem = cva([
         },
     },
 });
-const navigationItemIconContainer = cva(['flex h-6 aspect-branding items-center justify-center rounded-full'], {
+const navigationItemIconContainer = cva(['flex aspect-branding h-6 items-center justify-center rounded-full'], {
     variants: {
         active: {
             false: false,
@@ -76,13 +88,13 @@ export class NavigationItem {
     render() {
         const TagType = this.as;
         const active = asBoolean(this.active) || this.class?.includes('active');
-        return (h(ThemedHost, { key: 'bbbc6fe9a5cbb86e272b031619120aa4de22dd1d', class: cn('p-navigation-item inline-block', this.class) }, h(TagType, { key: '0bd8377b3e5a0d0a5ad987ecc039364935093b60', class: navigationItem({
+        return (h(ThemedHost, { key: '9618d8427117bdcc2809e8f1a81174d0d99366c9', class: cn('p-navigation-item inline-block', this.class) }, h(TagType, { key: '3db385fe49b1eba6b032494d8f303aa5e1e60c01', class: navigationItem({
                 icon: !!this.icon,
                 active,
-            }), href: this.href, target: this.target }, h("div", { key: '4be9bc173eaa742240660646fb01f98ba9ccb063', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: '011712d489f21e6f339e89319c6fda9582e50b7b', variant: this.icon })), h("span", { key: '5074414a36d7c7a6662ccdd49c1486a868952d0c', class: cn({
+            }), href: this.href, target: this.target }, h("div", { key: '7c97ebc4d504b06bb795b4885be0250f0c839882', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: '881b8afabc70357e31783903c5c8956cae6b34a6', variant: this.icon })), h("span", { key: '509205092f325b8037a8abaf51ce314136c15621', class: cn({
                 'has-counter': !!this.counter,
                 'w-full': this.applyFullWidth,
-            }) }, h("slot", { key: '32ffee98ef6e055203ab5b10f1c87fc06a0afc5d' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: '5579ff2571fbabae627e34df722ee0a641b59516' }, this.counter)), !!this.loading && h("p-loader", { key: '3fbd06bbe36c9110c0707d07389e4d75d98f5b92', class: 'ml-auto' }))));
+            }) }, h("slot", { key: '0573c0d5ea35d1b72de532cd46c4b53bf97d956e' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: 'cac8304e8a0f23e3fe1f81279f916d6e83a3a652' }, this.counter)), !!this.loading && h("p-loader", { key: '949b2eed1d715a0a98a831ad649ffbeba5787577', class: 'ml-auto' }))));
     }
     static get is() { return "p-navigation-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/molecules/pagination/pages/pagination-pages.component.js

@@ -4,7 +4,7 @@ import { ThemedHost } from "../../../../internal/themed-host.component";
 import { childOfComposed } from "../../../../utils/child-of";
 import { PAGINATION_DEFAULT_PAGE_SIZE } from "../../../../utils/constants";
 import { formatTranslation, getLocaleComponentStrings, } from "../../../../utils/localization";
-const pagination = cva(['p-pagination', 'flex gap-2 items-center'], {
+const pagination = cva(['p-pagination', 'flex items-center gap-2'], {
     variants: {
         hidden: {
             false: 'flex',

package/dist/collection/components/molecules/pagination/pagination/pagination.component.js

@@ -6,8 +6,8 @@ const pagination = cva([
     'p-pagination',
     'items-center gap-2',
     'rounded-full',
-    'bg-off-white-300 border border-solid border-off-white-700',
-    'dark:bg-hurricane-500 dark:border-hurricane-400',
+    'border border-solid border-off-white-700 bg-off-white-300',
+    'dark:border-hurricane-400 dark:bg-hurricane-500',
     'p-1',
 ], {
     variants: {
@@ -66,7 +66,7 @@ export class Pagination {
                     (!this.enablePaginationSize && !this.enablePaginationPages),
             }) }, this.enablePaginationPages && this.enablePaginationSize && (h(Fragment, { key: '5812bfaaee47936e0f1d910c4da0421589e5cf9b' }, h("p-pagination-size", { key: '2fe1f8e733d96ef2843d184f17c02b2db44b3fb5', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) }), !hidePageSizeSelect &&
             this.hideOnSinglePage &&
-            this._hasPaginationPages && (h("p-divider", { key: 'fa14cc1d718604f931f95ee9d2accd28b1bf43e7', class: 'mx-0 h-4 text-off-white-700 dark:text-hurricane-400', variant: 'vertical' })))), this.enablePaginationPages && (h("p-pagination-pages", { key: '265840dfb523c4330e5c44a00fe28d9397f7b45c', hideOnSinglePage: this.hideOnSinglePage, page: this.page, pageSize: this.pageSize, total: this.total, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPagesChange: ({ detail }) => {
+            this._hasPaginationPages && (h("p-divider", { key: 'c8062527297b143b8aaf4c11cf7038a8a99c7df5', class: '\n            mx-0 h-4 text-off-white-700\n            dark:text-hurricane-400\n          ', variant: 'vertical' })))), this.enablePaginationPages && (h("p-pagination-pages", { key: 'd52f747c7a82ff3d7ef285a2430fad635f34475c', hideOnSinglePage: this.hideOnSinglePage, page: this.page, pageSize: this.pageSize, total: this.total, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPagesChange: ({ detail }) => {
                 this._hasPaginationPages = detail > 1;
                 this.pagesChange.emit(detail);
             } })))));

package/dist/collection/components/molecules/pagination/size/pagination-size.component.js

@@ -16,20 +16,26 @@ const paginationSize = cva('p-pagination-size', {
 const trigger = cva([
     'group/pagination-size-trigger',
     'flex items-center gap-2',
-    'px-2 h-6',
-    'text-sm text-storm-500 font-medium ',
+    'h-6 px-2',
+    'text-sm font-medium text-storm-500',
     'dark:text-white',
     'cursor-pointer rounded-full',
-    'shadow-1 border border-solid',
+    'border border-solid shadow-1',
 ], {
     variants: {
         active: {
             false: [
-                'bg-white hover:bg-white-600 border-transparent',
-                'dark:bg-white/15 dark:hover:bg-white/25',
+                `
+       border-transparent bg-white
+       hover:bg-white-600
+     `,
+                `
+       dark:bg-white/15
+       dark:hover:bg-white/25
+     `,
             ],
             true: [
-                'bg-white-600 border-indigo-600 ring ring-2 ring-indigo-100',
+                'border-indigo-600 bg-white-600 ring ring-2 ring-indigo-100',
                 'dark:bg-white/25 dark:ring-0',
             ],
         },
@@ -73,18 +79,18 @@ export class PaginationSize {
         this._setLocales();
     }
     render() {
-        return (h(ThemedHost, { key: '1062e4a018038b23e5514a50f9fa658b6fae7010', class: paginationSize({ hidden: asBoolean(this.hidden) }) }, h("p-dropdown", { key: '521979380d535dcd911c26b881338ddaaf3e7344', applyFullWidth: true, applyMaxWidth: false, chevronDirection: 'down', placement: 'top-start', onIsOpen: ({ detail }) => (this.dropdownIsOpen = detail) }, h("div", { key: '81cdccac14a27636661d30889d5894a9fb5d7ce6', class: trigger({
+        return (h(ThemedHost, { key: 'bd468fb3b2889b8cd35ea4cbe39423e47c804e20', class: paginationSize({ hidden: asBoolean(this.hidden) }) }, h("p-dropdown", { key: 'd8e97c2c1f86d393d7c2c2bb6e8fbf6a0f44567e', applyFullWidth: true, applyMaxWidth: false, chevronDirection: 'down', placement: 'top-start', onIsOpen: ({ detail }) => (this.dropdownIsOpen = detail) }, h("div", { key: 'ff75dd123c0a3543ef2118d0a14f15aae96f49f8', class: trigger({
                 active: this.dropdownIsOpen,
-            }), slot: 'trigger' }, h("p", { key: '3477755b3365205fef5a3e3f8f465f0d1d41ddd1', class: 'min-w-0 flex-1 overflow-hidden text-ellipsis text-nowrap' }, this.itemTemplate
+            }), slot: 'trigger' }, h("p", { key: '986ddcf2e5c81ff4dc132aa3612764508e6287d4', class: 'min-w-0 flex-1 overflow-hidden text-ellipsis text-nowrap' }, this.itemTemplate
             ? this.itemTemplate(this.size)
-            : this._defaultItemTemplate(this.size)), h("p-icon", { key: 'f08b75643a97c86192e87893c80ad67b9cf61a9d', class: cn([
+            : this._defaultItemTemplate(this.size)), h("p-icon", { key: '4b335f1178302bcbd7682be7c442eab43e8950d5', class: cn([
                 'flex-shrink-0',
                 'group-hover/pagination-size-trigger:text-storm-500',
                 'dark:group-hover/pagination-size-trigger:text-white',
             ], {
                 'text-storm-300 dark:text-hurricane-200': !this.dropdownIsOpen,
                 'text-storm-500 dark:text-white': !!this.dropdownIsOpen,
-            }), size: 'sm', variant: 'double-caret' })), h("slot", { key: '4ac113bf401a0a3019c6430a58f5cfd8a153e5c4', slot: 'items' }, this.sizeOptions.map(option => (h("p-dropdown-menu-item", { active: option === this.size, onClick: () => this._changeSize(option) }, this.itemTemplate
+            }), size: 'sm', variant: 'double-caret' })), h("slot", { key: 'b26417bae87adfb4d18452c8d953fe4faa4bd868', slot: 'items' }, this.sizeOptions.map(option => (h("p-dropdown-menu-item", { active: option === this.size, onClick: () => this._changeSize(option) }, this.itemTemplate
             ? this.itemTemplate(option)
             : this._defaultItemTemplate(option))))))));
     }

package/dist/collection/components/molecules/profile/profile.component.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
 import { ThemedHost } from "../../../internal/themed-host.component";
-const profileContent = cva(['flex gap-2 items-center flex-1 min-w-0'], {
+const profileContent = cva(['flex min-w-0 flex-1 items-center gap-2'], {
     variants: {
         dropdown: {
             false: 'h-10 py-1',
@@ -42,7 +42,7 @@ export class Profile {
     _getContent() {
         return (h("div", { class: profileContent({
                 dropdown: this._hasDropdownSlot,
-            }) }, h("slot", { name: 'avatar' }), h("div", { class: 'flex min-w-0 flex-1 flex-col items-start' }, h("p", { class: 'my-0 w-auto max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-storm-500 dark:text-white' }, h("slot", { name: 'title' })), h("p", { class: 'my-0 w-auto max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium text-storm-400 dark:text-hurricane-200' }, h("slot", { name: 'subtitle' }))), h("slot", { name: 'post-title' })));
+            }) }, h("slot", { name: 'avatar' }), h("div", { class: 'flex min-w-0 flex-1 flex-col items-start' }, h("p", { class: '\n        my-0 w-auto max-w-full overflow-hidden text-ellipsis whitespace-nowrap\n        text-sm font-semibold text-storm-500\n        dark:text-white\n      ' }, h("slot", { name: 'title' })), h("p", { class: '\n        my-0 w-auto max-w-full overflow-hidden text-ellipsis whitespace-nowrap\n        text-xs font-medium text-storm-400\n        dark:text-hurricane-200\n      ' }, h("slot", { name: 'subtitle' }))), h("slot", { name: 'post-title' })));
     }
     _updateAvatar() {
         const avatar = this._el.querySelector('p-avatar[slot="avatar"]');

package/dist/collection/components/molecules/range/range.component.js

@@ -23,13 +23,13 @@ export class Range {
     valueChange;
     render() {
         const percentage = Math.round((this.value / (this.max - this.min)) * 100);
-        return (h(ThemedHost, { key: 'cb6a6b717940ba17aa7a6df5cc36577a991d3831' }, h("div", { key: '86f3c5cfa6b35bab44279382db58fc28cbfb864d', class: 'flex w-inherit items-center gap-2 text-storm-300 dark:text-hurricane-200' }, h("p-icon", { key: 'c39ee42a23403c618cf6980ee68610b0d2210f59', variant: 'minus' }), h("div", { key: 'ea69ab86a1006f763f2306cc5a644b12ebd68540', class: 'relative h-6 flex-1' }, h("input", { key: '36594b239d75623d5494a27ac44fffab83f2c51d', max: this.max, min: this.min, step: this.step, type: 'range', value: this.value, onInput: ev => {
+        return (h(ThemedHost, { key: 'cb6a6b717940ba17aa7a6df5cc36577a991d3831' }, h("div", { key: '82e000061159418bb6dc5ba3c72dc9c36315777f', class: '\n       flex w-inherit items-center gap-2 text-storm-300\n       dark:text-hurricane-200\n     ' }, h("p-icon", { key: 'f3825df8da36fd3e28988753db4216e613336749', variant: 'minus' }), h("div", { key: '1020caacf9987bfa348181c6a90b430805f1888f', class: 'relative h-6 flex-1' }, h("input", { key: '05fb1b7ed4af1392f107bf27977aab3a80f45c98', max: this.max, min: this.min, step: this.step, type: 'range', value: this.value, onInput: ev => {
                 const value = ev.target.value;
                 this.value = Number.parseFloat(value);
                 this.valueChange.emit(value);
-            } }), h("div", { key: 'f995f4c46fe41f30f4702636192835fa9a62141f', class: 'z-1 absolute left-0 top-1/2 h-[2px] -translate-y-1/2 transform bg-indigo-600', style: {
+            } }), h("div", { key: '90cdf9d7a326ec8764722cda4167a2260eff1e93', class: '\n         z-1 absolute left-0 top-1/2 h-[2px] -translate-y-1/2 transform\n         bg-indigo-600\n       ', style: {
                 width: `calc(${percentage}% - (1rem * ${percentage} / 100))`,
-            } })), h("p-icon", { key: 'f10c499d92c17fa6ad450416490f42155f7b2f22', variant: 'plus' }))));
+            } })), h("p-icon", { key: 'b80ba4a88335c01383d94bbb661f7c1300c88e3b', variant: 'plus' }))));
     }
     static get is() { return "p-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/select/select.component.js

@@ -5,7 +5,7 @@ import { childOfComposed, cn } from "../../../utils";
 import { SELECT_DEFAULT_MAX_DISPLAYED_ITEMS } from "../../../utils/constants";
 const multiContainer = cva([
     'flex items-center gap-2',
-    'flex-1 min-w-0 h-full',
+    'h-full min-w-0 flex-1',
     'pointer-events-none overflow-hidden',
 ]);
 const multiItem = cva([
@@ -13,7 +13,7 @@ const multiItem = cva([
     'pointer-events-auto cursor-pointer',
     'flex h-[1.625rem] items-center gap-2',
     'h-[1.625rem] px-2',
-    'text-sm font-semibold whitespace-nowrap',
+    'whitespace-nowrap text-sm font-semibold',
     'rounded-lg',
     'bg-indigo-100',
     'dark:bg-white/15',
@@ -21,7 +21,10 @@ const multiItem = cva([
 const textContainer = cva('block w-full overflow-hidden text-start', {
     variants: {
         variant: {
-            placeholder: 'text-storm-400 dark:text-white',
+            placeholder: `
+     text-storm-400
+     dark:text-white
+   `,
             default: null,
         },
         enableTextWrap: {
@@ -29,7 +32,11 @@ const textContainer = cva('block w-full overflow-hidden text-start', {
             false: 'text-ellipsis whitespace-nowrap',
         },
         error: {
-            true: 'text-negative-red-700 dark:text-negative-red-alternative group-hover/button:text-negative-red-800',
+            true: `
+     text-negative-red-700
+     group-hover/button:text-negative-red-800
+     dark:text-negative-red-alternative
+   `,
             false: null,
         },
     },
@@ -254,7 +261,7 @@ export class Select {
             if (this._selectedItem?.length === 0) {
                 return placeholder;
             }
-            return (h("div", { class: multiContainer(), ref: ref => (this._multiContainerRef = ref) }, this._selectedItem.map(item => (h("div", { class: multiItem(), onClick: () => this._selectValue(item) }, item[this.selectionDisplayKey ?? this.displayKey], h("p-icon", { class: 'text-xs text-indigo-500 group-hover/item:text-indigo-800 dark:text-white/15 dark:group-hover/item:text-white', variant: 'negative' })))), h("div", { class: 'extra pointer-events-none hidden text-sm text-storm-100' }, "+", this._amountHidden)));
+            return (h("div", { class: multiContainer(), ref: ref => (this._multiContainerRef = ref) }, this._selectedItem.map(item => (h("div", { class: multiItem(), onClick: () => this._selectValue(item) }, item[this.selectionDisplayKey ?? this.displayKey], h("p-icon", { class: '\n          text-xs text-indigo-500\n          group-hover/item:text-indigo-800\n          dark:text-white/15\n          dark:group-hover/item:text-white\n        ', variant: 'negative' })))), h("div", { class: 'extra pointer-events-none hidden text-sm text-storm-100' }, "+", this._amountHidden)));
         }
         return this._getDisplay(this._selectedItem, true);
     }
@@ -322,8 +329,8 @@ export class Select {
         if (this.error?.length) {
             buttonIcon = 'warning';
         }
-        return (h(ThemedHost, { key: '617063ca6cf31255928f6f6856cb1902b1d225a2' }, h("p-field-container", { key: '4a6d95f7bfbc79b886044f2fe31695990b4e210d', error: this.error, forceShowTooltip: !!this.error?.length && !this._showDropdown, helper: this.helper, label: this.label, prefix: this.prefix, required: this.required, showOptional: this.showOptional, variant: 'write' }, h("p-dropdown", { key: '86dd982fca64c61a7c54a6ce104a358a8bfc4c04', applyChevron: false, applyFullWidth: true, applyMaxWidth: false, "disable-trigger-click": this.disabled, insideClick: true, manual: true, manualChevron: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, slot: 'content', strategy: this.strategy, onIsOpen: ev => this._onDropdownOpen(ev) }, h("p-button", { key: '21fe3c6214c05e6a8f90fd817ecb793bed8b7c3b', active: this._showDropdown, chevron: this.showChevron ? (this._showDropdown ? 'up' : 'down') : false, class: 'w-full', error: !!this.error?.length, icon: buttonIcon, iconClass: this.applyClassOnSelectedItem &&
-                this._selectedItem?.[this.iconClassKey], size: this.size, slot: 'trigger', variant: 'secondary', onClick: ev => this._onClick(ev) }, h("div", { key: '7e5b6ceacca4ca732caa7385b96c22d0c8436ac5', class: 'relative min-w-0 flex-1', ref: ref => (this._inputRef = ref) }, this._displayValue)), this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem()))));
+        return (h(ThemedHost, { key: '76b10df3dbbf0a1758ea13c7205ea4c11ea05056' }, h("p-field-container", { key: 'e17bca429b8a24a4c5e4399911c9efcebd8a6b24', error: this.error, forceShowTooltip: !!this.error?.length && !this._showDropdown, helper: this.helper, label: this.label, prefix: this.prefix, required: this.required, showOptional: this.showOptional, variant: 'write' }, h("p-dropdown", { key: '1bcd1b15692330794bed8b34fbe203b8015681d9', applyChevron: false, applyFullWidth: true, applyMaxWidth: false, "disable-trigger-click": this.disabled, insideClick: true, manual: true, manualChevron: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, slot: 'content', strategy: this.strategy, onIsOpen: ev => this._onDropdownOpen(ev) }, h("p-button", { key: '383466f2cec3fa3e7aa65aa3db077445cb2917ef', active: this._showDropdown, chevron: this.showChevron ? (this._showDropdown ? 'up' : 'down') : false, class: 'w-full', error: !!this.error?.length, icon: buttonIcon, iconClass: this.applyClassOnSelectedItem &&
+                this._selectedItem?.[this.iconClassKey], size: this.size, slot: 'trigger', variant: 'secondary', onClick: ev => this._onClick(ev) }, h("div", { key: '8d5b4d842f4d49f029f1a61f98a8d768c61cf3ef', class: 'relative min-w-0 flex-1', ref: ref => (this._inputRef = ref) }, this._displayValue)), this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem()))));
     }
     documentClickHandler(event) {
         if (!this._showDropdown || childOfComposed(event, this._el)) {
@@ -484,7 +491,7 @@ export class Select {
         });
         if (this._items.length === 0) {
             items = [
-                h("p", { class: 'w-full p-2 text-center text-sm text-storm-400 dark:text-hurricane-200', slot: 'items' }, this.emptyStateText),
+                h("p", { class: '\n       w-full p-2 text-center text-sm text-storm-400\n       dark:text-hurricane-200\n     ', slot: 'items' }, this.emptyStateText),
             ];
         }
         if (this.enableSelectAll && this._items.length > 0) {
@@ -577,7 +584,10 @@ export class Select {
                 }) }, item[this.dropdownDisplayKey ?? this.displayKey])));
         }
         if (this.iconKey && (!isSelection || this.showIconOnSelectedItem)) {
-            content = (h("span", { class: 'flex items-center gap-2' }, item[this.iconKey] && (h("p-icon", { class: cn('text-storm-300 dark:text-hurricane-200', (!isSelection || !!this.applyClassOnSelectedItem) &&
+            content = (h("span", { class: 'flex items-center gap-2' }, item[this.iconKey] && (h("p-icon", { class: cn(`
+          text-storm-300
+          dark:text-hurricane-200
+        `, (!isSelection || !!this.applyClassOnSelectedItem) &&
                     (!isSelectedInMenu || !!this.applyClassOnSelectedItemInMenu)
                     ? (item?.[this.iconClassKey] ?? '')
                     : ''), variant: item[this.iconKey] })), h("div", { class: textContainer({

package/dist/collection/components/molecules/table/cell/table-cell.component.js

@@ -87,7 +87,7 @@ export class TableCell {
         };
     }
     render() {
-        return (h(ThemedHost, { key: 'f3fb25607a21580f978f979b6ed0c64c908c597e', class: this._getColumnClasses() }, this.checkbox, this._getContent(), false && (h(Fragment, { key: '52e2728554816fd8251bf81fdd6f4cac251e5dc0' }, h("div", { key: '5c09e0c5618a47a1ca76183d33d9576f051ea8fd', class: 'pl-8' }), h("div", { key: '0573b90ef4b7cf77ebc64ca31a172e97215bfb22', class: 'text-storm-300 text-storm-400 text-storm-500 dark:text-hurricane-200 dark:text-white' }), h("div", { key: '5e127f4668aedd4fcadb1007c6552eb1d0938872', class: 'justify-start justify-end justify-center' }), h("div", { key: 'd40b45b508e3828d7d15372cb530a38cc640ba4b', class: 'font-semibold text-storm-300 text-storm-400 text-storm-500' }), h("div", { key: '400c5c5b91291dc7da77141b2677977cdd5dc1eb', class: 'w-12/12 w-1/12 w-10/12 w-11/12 w-2/12 w-3/12 w-4/12 w-5/12 w-6/12 w-7/12 w-8/12 w-9/12' }), h("div", { key: '16f0664a095857f39abeb6265c55dc9aa40ebc60', class: 'tablet:w-12/12 tablet:w-1/12 tablet:w-10/12 tablet:w-11/12 tablet:w-2/12 tablet:w-3/12 tablet:w-4/12 tablet:w-5/12 tablet:w-6/12 tablet:w-7/12 tablet:w-8/12 tablet:w-9/12' }), h("div", { key: 'c46eef18f079e003831b38a75789511f4e3a8cfe', class: 'desktop-xs:w-12/12 desktop-xs:w-1/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12' }), h("div", { key: '62ea8c4c005f2d407c6ef192e8a8ea2fa5431d27', class: 'desktop-xs:w-12/12 desktop-xs:w-1/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12' }), h("div", { key: '4f3695c7f62a8c0d604d72fe1d1e2b2bc09a6a80', class: 'desktop-sm:w-12/12 desktop-sm:w-1/12 desktop-sm:w-10/12 desktop-sm:w-11/12 desktop-sm:w-2/12 desktop-sm:w-3/12 desktop-sm:w-4/12 desktop-sm:w-5/12 desktop-sm:w-6/12 desktop-sm:w-7/12 desktop-sm:w-8/12 desktop-sm:w-9/12' }), h("div", { key: '4273bbb144fe47337f4626a55bc4054f944da1fa', class: 'desktop:w-12/12 desktop:w-1/12 desktop:w-10/12 desktop:w-11/12 desktop:w-2/12 desktop:w-3/12 desktop:w-4/12 desktop:w-5/12 desktop:w-6/12 desktop:w-7/12 desktop:w-8/12 desktop:w-9/12' }), h("div", { key: '5cba23c86aab28353000e3ca6a9b06942b59a442', class: 'desktop-lg:w-12/12 desktop-lg:w-1/12 desktop-lg:w-10/12 desktop-lg:w-11/12 desktop-lg:w-2/12 desktop-lg:w-3/12 desktop-lg:w-4/12 desktop-lg:w-5/12 desktop-lg:w-6/12 desktop-lg:w-7/12 desktop-lg:w-8/12 desktop-lg:w-9/12' }), h("div", { key: '3fbb89c1d4c48d7e50050981f20cd56cf808c0d7', class: 'desktop-xl:w-12/12 desktop-xl:w-1/12 desktop-xl:w-10/12 desktop-xl:w-11/12 desktop-xl:w-2/12 desktop-xl:w-3/12 desktop-xl:w-4/12 desktop-xl:w-5/12 desktop-xl:w-6/12 desktop-xl:w-7/12 desktop-xl:w-8/12 desktop-xl:w-9/12' }), h("div", { key: '942dca4f70d2fac538014f63edf0c7b5e4e4d5a8', class: 'flex hidden group-hover:flex group-hover:hidden' }), h("div", { key: 'cfdc8c1f716c737a83693d503e4094ce09aba34c', class: 'tablet:flex tablet:hidden tablet:group-hover:flex tablet:group-hover:hidden' }), h("div", { key: '2b04268398413cf29c15238b704a8c44461fffe4', class: 'desktop-xs:flex desktop-xs:hidden desktop-xs:group-hover:flex desktop-xs:group-hover:hidden' }), h("div", { key: 'cb6c3a06945d446c99787e299ef456dd55d623aa', class: 'desktop-sm:flex desktop-sm:hidden  desktop-sm:group-hover:flex desktop-sm:group-hover:hidden' }), h("div", { key: 'e11b89a93ba9f4d19007e7b0225d9fc607a8a3f8', class: 'desktop:flex desktop:hidden desktop:group-hover:flex desktop:group-hover:hidden' }), h("div", { key: '794be240ed5b1ffff17cf498d951ceee827e6f7c', class: 'desktop-lg:flex desktop-lg:hidden desktop-lg:group-hover:flex desktop-lg:group-hover:hidden' }), h("div", { key: '22e040b155aa8db113feb66960cc859894861a19', class: 'desktop-xl:flex desktop-xl:hidden desktop-xl:group-hover:flex desktop-xl:group-hover:hidden' }), h("div", { key: '1b21d951c713572b637996fcaef6f4131bc843f4', class: 'pr-0 pr-4 last-of-type:pr-0' }), h("div", { key: 'b7726e7a5acc327fc6ef90bb9c7e4df6bb48e175', class: 'tablet:pr-0 tablet:pr-4' }), h("div", { key: '0e93371c6d5ee34ff9487d1f492f24ee032d0c42', class: 'desktop-xs:pr-0 desktop-xs:pr-4' }), h("div", { key: 'f9e24890ca1b702077ad9969aa4ef398e8399421', class: 'desktop-sm:pr-0 desktop-sm:pr-4' }), h("div", { key: '5e510708d447ed5c61ea821579100acb9c452b7a', class: 'desktop:pr-0 desktop:pr-4' }), h("div", { key: '2f24285b64fcd137f5ca709490ff0943b65e10b2', class: 'desktop-lg:pr-0 desktop-lg:pr-4' }), h("div", { key: 'f2249ff1780dd38fce8919cfa4dfdae51ccce6cc', class: 'desktop-xl:pr-0 desktop-xl:pr-4' })))));
+        return (h(ThemedHost, { key: 'f3fb25607a21580f978f979b6ed0c64c908c597e', class: this._getColumnClasses() }, this.checkbox, this._getContent(), false && (h(Fragment, { key: '52e2728554816fd8251bf81fdd6f4cac251e5dc0' }, h("div", { key: '5c09e0c5618a47a1ca76183d33d9576f051ea8fd', class: 'pl-8' }), h("div", { key: '9561b5f94ad79ea0c52a48559f90619e9fed5f5e', class: '\n         text-storm-300 text-storm-400 text-storm-500\n         dark:text-hurricane-200 dark:text-white\n       ' }), h("div", { key: '11a4a42374f36dd5fb47f322a7f0dabe544a436b', class: 'justify-start justify-end justify-center' }), h("div", { key: '864d0fed0499a6d4a1280bf241640e5cba2fe711', class: 'font-semibold text-storm-300 text-storm-400 text-storm-500' }), h("div", { key: '8e26f78f800d6d723f3ba800c6dff6fb63ef1344', class: '\n         w-12/12 w-1/12 w-10/12 w-11/12 w-2/12 w-3/12 w-4/12 w-5/12 w-6/12\n         w-7/12 w-8/12 w-9/12\n       ' }), h("div", { key: 'ff0a6c13bde4c69c3465d98aefa720e95d5ebd37', class: '\n         tablet:w-12/12 tablet:w-1/12 tablet:w-10/12 tablet:w-11/12\n         tablet:w-2/12 tablet:w-3/12 tablet:w-4/12 tablet:w-5/12 tablet:w-6/12\n         tablet:w-7/12 tablet:w-8/12 tablet:w-9/12\n       ' }), h("div", { key: 'd77b7269078bd582db7bb69bfb1b8cb920160df1', class: '\n         desktop-xs:w-12/12 desktop-xs:w-1/12 desktop-xs:w-10/12\n         desktop-xs:w-11/12 desktop-xs:w-2/12 desktop-xs:w-3/12\n         desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12\n         desktop-xs:w-8/12 desktop-xs:w-9/12\n       ' }), h("div", { key: 'ff249106f65d0afb3ff230110ef125c3855ef32b', class: '\n         desktop-xs:w-12/12 desktop-xs:w-1/12 desktop-xs:w-10/12\n         desktop-xs:w-11/12 desktop-xs:w-2/12 desktop-xs:w-3/12\n         desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12\n         desktop-xs:w-8/12 desktop-xs:w-9/12\n       ' }), h("div", { key: '087df7562b253f6113c33ff5c0e6a128ae0caea4', class: '\n         desktop-sm:w-12/12 desktop-sm:w-1/12 desktop-sm:w-10/12\n         desktop-sm:w-11/12 desktop-sm:w-2/12 desktop-sm:w-3/12\n         desktop-sm:w-4/12 desktop-sm:w-5/12 desktop-sm:w-6/12 desktop-sm:w-7/12\n         desktop-sm:w-8/12 desktop-sm:w-9/12\n       ' }), h("div", { key: 'c278fdd1fb803d3fbc7a9b59cbd2cee7cdd3514a', class: '\n         desktop:w-12/12 desktop:w-1/12 desktop:w-10/12 desktop:w-11/12\n         desktop:w-2/12 desktop:w-3/12 desktop:w-4/12 desktop:w-5/12\n         desktop:w-6/12 desktop:w-7/12 desktop:w-8/12 desktop:w-9/12\n       ' }), h("div", { key: '4d2253d467b0ed70c75d08fc58bf28f6cf589751', class: '\n         desktop-lg:w-12/12 desktop-lg:w-1/12 desktop-lg:w-10/12\n         desktop-lg:w-11/12 desktop-lg:w-2/12 desktop-lg:w-3/12\n         desktop-lg:w-4/12 desktop-lg:w-5/12 desktop-lg:w-6/12 desktop-lg:w-7/12\n         desktop-lg:w-8/12 desktop-lg:w-9/12\n       ' }), h("div", { key: '7aff2e5016f86074b757f25a7d6878d1ae0dad7c', class: '\n         desktop-xl:w-12/12 desktop-xl:w-1/12 desktop-xl:w-10/12\n         desktop-xl:w-11/12 desktop-xl:w-2/12 desktop-xl:w-3/12\n         desktop-xl:w-4/12 desktop-xl:w-5/12 desktop-xl:w-6/12 desktop-xl:w-7/12\n         desktop-xl:w-8/12 desktop-xl:w-9/12\n       ' }), h("div", { key: '4f3dd991837b2a0945df0d9393a350397b4af4d7', class: '\n         flex hidden\n         group-hover:flex group-hover:hidden\n       ' }), h("div", { key: '31d63cf20498d832ade4954d318a7286eadc3e82', class: '\n         tablet:flex tablet:hidden\n         tablet:group-hover:flex tablet:group-hover:hidden\n       ' }), h("div", { key: '10d392794958efaf165df8d9f1a43bc2a0584f87', class: '\n         desktop-xs:flex desktop-xs:hidden\n         desktop-xs:group-hover:flex desktop-xs:group-hover:hidden\n       ' }), h("div", { key: '6054c269168d38ab8e10e7296a6a3df7f3e4fadd', class: '\n         desktop-sm:flex desktop-sm:hidden\n         desktop-sm:group-hover:flex desktop-sm:group-hover:hidden\n       ' }), h("div", { key: 'c8fb78e7758d43c6152624423264d6c90fb9b2b8', class: '\n         desktop:flex desktop:hidden\n         desktop:group-hover:flex desktop:group-hover:hidden\n       ' }), h("div", { key: 'f48350e8301f605a67fbebaab22222eec7d55bea', class: '\n         desktop-lg:flex desktop-lg:hidden\n         desktop-lg:group-hover:flex desktop-lg:group-hover:hidden\n       ' }), h("div", { key: '7abb1b0a45b8f64ea950e727b5031e3fca1a704b', class: '\n         desktop-xl:flex desktop-xl:hidden\n         desktop-xl:group-hover:flex desktop-xl:group-hover:hidden\n       ' }), h("div", { key: '7a20a38d43dc2b69204e180c2a883006fa4ef4df', class: '\n         pr-0 pr-4\n         last-of-type:pr-0\n       ' }), h("div", { key: '5ea438ffa250318c9e4a3ab0c5986dc6eb688e64', class: 'tablet:pr-0 tablet:pr-4' }), h("div", { key: 'db9ba48d4eb3e425fbd15ebfd7b6c0596e8a8145', class: 'desktop-xs:pr-0 desktop-xs:pr-4' }), h("div", { key: '614510d13f43abcd32adb8d05e9632df10259869', class: 'desktop-sm:pr-0 desktop-sm:pr-4' }), h("div", { key: '0814a8fa30f04426f4555f5d4fd745c27f062a4e', class: 'desktop:pr-0 desktop:pr-4' }), h("div", { key: '561ca8b5a7840916857420bf5554feb2efd847aa', class: 'desktop-lg:pr-0 desktop-lg:pr-4' }), h("div", { key: 'e0e707a1e9d763adcfcd21072f983bb56950386e', class: 'desktop-xl:pr-0 desktop-xl:pr-4' })))));
     }
     _getContent() {
         if (this.variant === 'loading') {

package/dist/collection/components/molecules/table/footer/table-footer.component.js

@@ -3,11 +3,15 @@ import { cva } from "class-variance-authority";
 import { ThemedHost } from "../../../../internal/themed-host.component";
 import { PAGINATION_DEFAULT_PAGE_SIZE, PAGINATION_DEFAULT_PAGE_SIZE_OPTIONS, } from "../../../../utils/constants";
 const footer = cva([
-    'justify-center relative',
+    'relative justify-center',
     'w-full px-6',
-    'after:absolute after:top-0 after:left-0 after:z-[0]',
-    'after:w-full after:h-full after:transition-opacity',
-    'after:bg-gradient-to-t after:from-white dark:after:from-hurricane-700 after:via-white/80 dark:after:via-hurricane-700/80 after:to-transparent',
+    'after:absolute after:left-0 after:top-0 after:z-[0]',
+    'after:h-full after:w-full after:transition-opacity',
+    `
+    after:bg-gradient-to-t after:from-white after:via-white/80
+    after:to-transparent
+    dark:after:from-hurricane-700 dark:after:via-hurricane-700/80
+  `,
 ], {
     variants: {
         pinned: {
@@ -19,7 +23,10 @@ const footer = cva([
             true: 'hidden',
         },
         tableHeaderHasAction: {
-            true: 'pt-8 pb-20 desktop-xs:py-8',
+            true: `
+      pb-20 pt-8
+      desktop-xs:py-8
+    `,
             false: 'py-8',
         },
     },
@@ -100,12 +107,12 @@ export class TableFooter {
         this._renderCheckTimeout = setTimeout(() => this._checkStuck(), 200);
     }
     render() {
-        return (h(ThemedHost, { key: 'b5ab268371811514f930f44fedea65da21cd6cae' }, h("div", { key: 'a98c709cc02b6b15fc7923520921f35d577ce78f', class: footer({
+        return (h(ThemedHost, { key: 'b0ae6e77e5b14d5ac5a736790004b3b15c3dbe2e' }, h("div", { key: '7115b353fb53075cef7330b0fdcb7cce1e3fc3f6', class: footer({
                 pinned: this._isPinned,
                 hidden: this._hidden,
                 tableHeaderHasAction: this.tableHeaderHasAction,
             }) }, (this.enablePaginationPages || this.enablePaginationSize) &&
-            this.total > 0 && (h("p-pagination", { key: '36b284675464d60e068480b668ec5632f3efa1fb', class: 'pointer-events-auto z-[2]', enablePaginationPages: this.enablePaginationPages, enablePaginationSize: this.enablePaginationSize, hideOnSinglePage: this.hideOnSinglePage, page: this.page, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, total: this.total, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPageSizeChange: ({ detail }) => this._changePageSize(detail), onPagesChange: ({ detail }) => (this._hasPaginationPages = detail > 1) })))));
+            this.total > 0 && (h("p-pagination", { key: 'cce7d85d9465d6e65d92e5e4b687a80f4f715173', class: 'pointer-events-auto z-[2]', enablePaginationPages: this.enablePaginationPages, enablePaginationSize: this.enablePaginationSize, hideOnSinglePage: this.hideOnSinglePage, page: this.page, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, total: this.total, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPageSizeChange: ({ detail }) => this._changePageSize(detail), onPagesChange: ({ detail }) => (this._hasPaginationPages = detail > 1) })))));
     }
     _changePageSize(s) {
         if (!s) {