@paperless/core 3.0.2 → 3.1.0

package/dist/cjs/p-empty-state_8.cjs.entry.js

@@ -5,7 +5,7 @@ var index$1 = require('./index-mudu9vpz.js');
 var themedHost_component = require('./themed-host.component-BeeT9Ite.js');
 var asBoolean = require('./as-boolean-C1PzA22I.js');
 var localization = require('./localization-CTvpcGDo.js');
-var tableHelpers = require('./table-helpers-D7cRsAPO.js');
+var tableHelpers = require('./table-helpers-CskH_8AL.js');
 var objectGetByPath = require('./object-get-by-path-CxU4WbZu.js');
 var cn = require('./cn-Cd68UVBT.js');
 var constants = require('./constants-BuWBrjuU.js');
@@ -14,7 +14,7 @@ require('./state-DM8SZBNO.js');
 
 const emptyStateComponentCss = () => `*{box-sizing:border-box}p-divider{--tw-content:""}.static{position:static}.my-0{margin-bottom:0;margin-top:0}.mb-8{margin-bottom:2rem}.mt-4{margin-top:1rem}.flex{display:flex}.w-full{width:100%}.max-w-\\[20rem\\]{max-width:20rem}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.text-center{text-align:center}.font-ambit{font-family:Ambit,sans-serif}.text-5xl{font-size:3rem;line-height:1}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-normal{font-weight:400}.text-indigo-600{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity,1))}.text-storm-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.dark\\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}`;
 
-const emptyState = index$1.cva(['flex flex-col w-full items-center justify-start max-w-[20rem]'], {
+const emptyState = index$1.cva(['flex w-full max-w-[20rem] flex-col items-center justify-start'], {
     variants: {
         enableAction: {
             true: 'cursor-pointer',
@@ -76,7 +76,7 @@ const EmptyState = class {
                 enableAction: asBoolean.asBoolean(this.enableAction, true),
             }), onClick: ev => this.enableAction && !this.actionLoading
                 ? this.action.emit(ev)
-                : undefined }, this.illustration && (index.h("p-illustration", { key: '3434e243bb9a41e7f56982fff2450cc92013b25f', class: 'mb-8 text-5xl text-indigo-600', variant: this.illustration })), hasHeaderSlot ? (index.h("slot", { name: 'header' })) : (this.header?.length && (index.h("p", { class: 'my-0 text-center font-ambit text-sm font-bold text-storm-500 dark:text-white' }, this.header))), hasContentSlot ? (index.h("slot", { name: 'content' })) : (this.content?.length && (index.h("p", { class: 'my-0 text-center text-sm font-normal text-storm-300 dark:text-hurricane-200' }, this.content))), this.enableAction &&
+                : undefined }, this.illustration && (index.h("p-illustration", { key: '3434e243bb9a41e7f56982fff2450cc92013b25f', class: 'mb-8 text-5xl text-indigo-600', variant: this.illustration })), hasHeaderSlot ? (index.h("slot", { name: 'header' })) : (this.header?.length && (index.h("p", { class: '\n          my-0 text-center font-ambit text-sm font-bold text-storm-500\n          dark:text-white\n        ' }, this.header))), hasContentSlot ? (index.h("slot", { name: 'content' })) : (this.content?.length && (index.h("p", { class: '\n          my-0 text-center text-sm font-normal text-storm-300\n          dark:text-hurricane-200\n        ' }, this.content))), this.enableAction &&
             (hasActionSlot ? (index.h("slot", { name: 'action' })) : (index.h("p-button", { class: 'mt-4', icon: this.actionIcon, iconPosition: this.actionIconPosition, loading: this.actionLoading, variant: this.actionVariant }, this.actionText))))));
     }
 };
@@ -89,7 +89,7 @@ const container$1 = index$1.cva([
     'shadow-3',
     'bg-storm-500',
     'dark:bg-hurricane-400',
-    'h-10 py-1 w-auto',
+    'h-10 w-auto py-1',
     'rounded-lg',
     'text-sm',
     'flex items-center gap-2',
@@ -241,7 +241,7 @@ TableCell.style = tableCellComponentCss();
 
 const tableContainerComponentCss = () => `*{box-sizing:border-box}.static{position:static}.relative{position:relative}.flex{display:flex}.flex-col{flex-direction:column}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}`;
 
-const container = index$1.cva('flex flex-col relative');
+const container = index$1.cva('relative flex flex-col');
 const TableContainer = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -255,11 +255,15 @@ TableContainer.style = tableContainerComponentCss();
 const tableFooterComponentCss = () => `.pointer-events-none{pointer-events:none}.sticky{position:sticky}.z-\\[1\\]{z-index:1}*{box-sizing:border-box}:host{--tw-content:"";pointer-events:none;position:sticky;z-index:1}.pointer-events-auto{pointer-events:auto}.static{position:static}.relative{position:relative}.z-\\[2\\]{z-index:2}.flex{display:flex}.table{display:table}.hidden{display:none}.w-full{width:100%}.justify-center{justify-content:center}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-8{padding-bottom:2rem;padding-top:2rem}.pb-20{padding-bottom:5rem}.pt-8{padding-top:2rem}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:left-0:after{content:var(--tw-content);left:0}.after\\:top-0:after{content:var(--tw-content);top:0}.after\\:z-\\[0\\]:after{content:var(--tw-content);z-index:0}.after\\:h-full:after{content:var(--tw-content);height:100%}.after\\:w-full:after{content:var(--tw-content);width:100%}.after\\:bg-gradient-to-t:after{background-image:linear-gradient(to top,var(--tw-gradient-stops));content:var(--tw-content)}.after\\:from-white:after{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);content:var(--tw-content)}.after\\:via-white\\/80:after{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsla(0,0%,100%,.8) var(--tw-gradient-via-position),var(--tw-gradient-to);content:var(--tw-content)}.after\\:to-transparent:after{--tw-gradient-to:transparent var(--tw-gradient-to-position);content:var(--tw-content)}.after\\:opacity-0:after{content:var(--tw-content);opacity:0}.after\\:opacity-100:after{content:var(--tw-content);opacity:1}.after\\:transition-opacity:after{content:var(--tw-content);transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:64rem){.desktop-xs\\:py-8{padding-bottom:2rem;padding-top:2rem}}.dark\\:after\\:from-hurricane-700:where(:host([data-theme=dark]),:host([data-theme=dark]) *):after{--tw-gradient-from:#232934 var(--tw-gradient-from-position);--tw-gradient-to:rgba(35,41,52,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);content:var(--tw-content)}.dark\\:after\\:via-hurricane-700\\/80:where(:host([data-theme=dark]),:host([data-theme=dark]) *):after{--tw-gradient-to:rgba(35,41,52,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(35,41,52,.8) var(--tw-gradient-via-position),var(--tw-gradient-to);content:var(--tw-content)}.dark\\:after\\:from-hurricane-700:where([data-theme=dark],[data-theme=dark] *):after{--tw-gradient-from:#232934 var(--tw-gradient-from-position);--tw-gradient-to:rgba(35,41,52,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);content:var(--tw-content)}.dark\\:after\\:via-hurricane-700\\/80:where([data-theme=dark],[data-theme=dark] *):after{--tw-gradient-to:rgba(35,41,52,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(35,41,52,.8) var(--tw-gradient-via-position),var(--tw-gradient-to);content:var(--tw-content)}`;
 
 const footer = index$1.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: {
@@ -271,7 +275,10 @@ const footer = index$1.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',
         },
     },
@@ -355,12 +362,12 @@ const TableFooter = class {
         this._renderCheckTimeout = setTimeout(() => this._checkStuck(), 200);
     }
     render() {
-        return (index.h(themedHost_component.ThemedHost, { key: 'b5ab268371811514f930f44fedea65da21cd6cae' }, index.h("div", { key: 'a98c709cc02b6b15fc7923520921f35d577ce78f', class: footer({
+        return (index.h(themedHost_component.ThemedHost, { key: 'b0ae6e77e5b14d5ac5a736790004b3b15c3dbe2e' }, index.h("div", { key: '7115b353fb53075cef7330b0fdcb7cce1e3fc3f6', class: footer({
                 pinned: this._isPinned,
                 hidden: this._hidden,
                 tableHeaderHasAction: this.tableHeaderHasAction,
             }) }, (this.enablePaginationPages || this.enablePaginationSize) &&
-            this.total > 0 && (index.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 && (index.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) {
@@ -9851,9 +9858,12 @@ var cjsExports = /*@__PURE__*/ requireCjs();
 const tableHeaderComponentCss = () => `*{box-sizing:border-box}.static{position:static}.fixed{position:fixed}.bottom-0{bottom:0}.left-0{left:0}.z-\\[1\\]{z-index:1}.z-\\[2\\]{z-index:2}.ml-1{margin-left:.25rem}.block{display:block}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.h-8{height:2rem}.w-3\\/4{width:75%}.w-full{width:100%}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.gap-2{gap:.5rem}.gap-4{gap:1rem}.justify-self-start{justify-self:start}.rounded{border-radius:.25rem}.border{border-width:1px}.border-solid{border-style:solid}.border-transparent{border-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@media (min-width:40rem){.tablet\\:flex{display:flex}.tablet\\:px-0{padding-left:0;padding-right:0}}@media (min-width:64rem){.desktop-xs\\:ml-auto{margin-left:auto}.desktop-xs\\:flex{display:flex}.desktop-xs\\:hidden{display:none}.desktop-xs\\:w-auto{width:auto}.desktop-xs\\:max-w-60{max-width:15rem}.desktop-xs\\:flex-row{flex-direction:row}.desktop-xs\\:items-center{align-items:center}}.dark\\:border-t-hurricane-400:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-border-opacity:1;border-top-color:rgb(70 75 84/var(--tw-border-opacity,1))}.dark\\:bg-hurricane-500:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1;background-color:rgb(54 60 70/var(--tw-bg-opacity,1))}.dark\\:text-white\\/15:where(:host([data-theme=dark]),:host([data-theme=dark]) *){color:hsla(0,0%,100%,.15)}.dark\\:border-t-hurricane-400:where([data-theme=dark],[data-theme=dark] *){--tw-border-opacity:1;border-top-color:rgb(70 75 84/var(--tw-border-opacity,1))}.dark\\:bg-hurricane-500:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1;background-color:rgb(54 60 70/var(--tw-bg-opacity,1))}.dark\\:text-white\\/15:where([data-theme=dark],[data-theme=dark] *){color:hsla(0,0%,100%,.15)}`;
 
 const header = index$1.cva([
-    'flex flex-col gap-2 z-[1]',
+    'z-[1] flex flex-col gap-2',
     'w-full',
-    'px-4 tablet:px-0',
+    `
+   px-4
+   tablet:px-0
+ `,
     'desktop-xs:flex-row',
 ]);
 const TableHeader = class {
@@ -9982,28 +9992,45 @@ const TableHeader = class {
         const mobileTotal = (this.selectedFiltersAmount || 0) + (activeQuickFilter?.default ? 0 : 1);
         const hasCustomFilterSlot = !!this._el.querySelector(':scope > [slot="custom-filter"]');
         const hasCustomActionsSlot = !!this._el.querySelector(':scope > [slot="custom-actions"]');
-        return (index.h(themedHost_component.ThemedHost, { key: 'dcf65ce62e7dc90f0c45e7748fd23872f21e7fad' }, index.h("div", { key: '3082ccae779f57c8812afc4b2400b20c87dd22a0', class: header() }, this.loading && (index.h("p-loader", { key: 'cbcf94e4afb27f7ee22b4adfbcadd9d72db2a189', class: 'hidden h-8 w-3/4 rounded desktop-xs:flex', variant: 'ghost' })), !this.loading &&
-            (hasCustomFilterSlot || quickFilters.length > 0) && (index.h("div", { key: '04c40b4406a49b0faf09c1e72ffe0d3b64e54548', class: 'flex flex-col justify-start gap-4 justify-self-start desktop-xs:flex-row' }, hasCustomFilterSlot && index.h("slot", { key: '409423868e33814d87381c29d41cfede57deead0', name: 'custom-filter' }), quickFilters.length > 0 && (index.h("p-segment-container", { key: '51c257a5ad8c65e84dac192b86c2cb291435884e', class: 'hidden desktop-xs:flex' }, quickFilters.map(item => (index.h("p-segment-item", { active: item.identifier === this.activeQuickFilterIdentifier, onClick: () => this.quickFilter.emit(item) }, typeof item.text === 'string'
+        return (index.h(themedHost_component.ThemedHost, { key: '046a82c93f16849095adf724acfd621369af3593' }, index.h("div", { key: 'e46eb857f7945716243299ce4c999673ec453d5a', class: header() }, this.loading && (index.h("p-loader", { key: 'c8a4898ede8aa744b72c6d11afceba5079eeb32a', class: '\n         hidden h-8 w-3/4 rounded\n         desktop-xs:flex\n       ', variant: 'ghost' })), !this.loading &&
+            (hasCustomFilterSlot || quickFilters.length > 0) && (index.h("div", { key: '877290a2e98724bc17e95d3d447ea37e6a005dc4', class: '\n          flex flex-col justify-start gap-4 justify-self-start\n          desktop-xs:flex-row\n        ' }, hasCustomFilterSlot && index.h("slot", { key: 'c1a71c7715dfd42975529c08f7d784f7fc463309', name: 'custom-filter' }), quickFilters.length > 0 && (index.h("p-segment-container", { key: 'a78f5ca023cd8106c610d1535e6e8b262dc15632', class: '\n            hidden\n            desktop-xs:flex\n          ' }, quickFilters.map(item => (index.h("p-segment-item", { active: item.identifier === this.activeQuickFilterIdentifier, onClick: () => this.quickFilter.emit(item) }, typeof item.text === 'string'
             ? item.text
-            : item.text(), ' ', item?.count >= 0 ? `(${item.count})` : ''))))))), index.h("div", { key: '6f8295a5c359b799f2f03d82e65d4f9e4acb5109', class: 'flex flex-col justify-end gap-2 desktop-xs:ml-auto desktop-xs:flex-row desktop-xs:items-center' }, this.enableSearch && (index.h("p-field", { key: 'e52e1dbe939f318c711e0f5ae25e8c667f6fcf31', class: 'desktop-xs:max-w-60', icon: 'search', placeholder: 'Zoeken...', value: this.query, onValueChange: ev => this._queryObserver.next(ev.detail) })), index.h("div", { key: 'b914ffa439de0484c5528fa9c02b4a32dc853c27', class: 'flex items-center gap-2' }, this.enableFilter && (index.h("p-button", { key: '5ea25448415e1b54883dc86059192b065cb23093', class: `w-full ${this.enableFilterDesktop
+            : item.text(), ' ', item?.count >= 0 ? `(${item.count})` : ''))))))), index.h("div", { key: '17e05645a060b6674211930c340f039e690b2b83', class: '\n        flex flex-col justify-end gap-2\n        desktop-xs:ml-auto desktop-xs:flex-row desktop-xs:items-center\n      ' }, this.enableSearch && (index.h("p-field", { key: 'e8cc9ab173b7864f5adee53fcb7a6b124e392722', class: 'desktop-xs:max-w-60', icon: 'search', placeholder: 'Zoeken...', value: this.query, onValueChange: ev => this._queryObserver.next(ev.detail) })), index.h("div", { key: '593628e94f3766ad21562a8133cc76e0a8e7c612', class: 'flex items-center gap-2' }, this.enableFilter && (index.h("p-button", { key: '863ea9caf0d1d34e5c45a22db523f54075b861c9', class: `
+           w-full
+           ${this.enableFilterDesktop
                 ? 'desktop-xs:w-auto'
-                : 'desktop-xs:hidden'}`, icon: 'filter', variant: 'secondary', onOnClick: () => this.filter.emit() }, this.filterButtonTemplate
+                : 'desktop-xs:hidden'}
+         `, icon: 'filter', variant: 'secondary', onOnClick: () => this.filter.emit() }, this.filterButtonTemplate
             ? this.filterButtonTemplate()
             : this._defaultFilterButtonTemplate(), this.selectedFiltersAmount &&
-            this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile'))), !this.loading && this.enableExport && this.enableFilter && (index.h("p-divider", { key: '38dc1a4aa1902f41b4b3e3cb85da7d442fc98fd0', class: 'hidden h-4 tablet:flex dark:text-white/15', variant: 'vertical' })), !this.loading && this.enableExport && (index.h("p-button", { key: 'f8180ecb38e763dc2cf045c3c8e33ed276d591ab', class: 'desktop-xs:auto w-full', icon: 'upload', variant: 'secondary', onOnClick: () => this.export.emit() }, localization.formatTranslation(this._locales.export)))), this.enableAction && this._buttonTemplate(), hasCustomActionsSlot && index.h("slot", { key: '24b7bee12f89bb16e4e4d690ee03564fcd106638', name: 'custom-actions' })), this.enableAction && this.canUseAction && (index.h("div", { key: '6c3739a262107b564f6418a605ba6e16943c2c36', class: 'fixed bottom-0 left-0 z-[2] block w-full border border-solid border-transparent bg-white p-4 desktop-xs:hidden dark:border-t-hurricane-400 dark:bg-hurricane-500' }, this._buttonTemplate(true))))));
+            this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile'))), !this.loading && this.enableExport && this.enableFilter && (index.h("p-divider", { key: 'f82cc292316723b26ed2f163a8a4e5bd6b321f33', class: '\n           hidden h-4\n           tablet:flex\n           dark:text-white/15\n         ', variant: 'vertical' })), !this.loading && this.enableExport && (index.h("p-button", { key: '68b77661274b6e9c6e8764bbe16519539966e0f9', class: '\n           desktop-xs:auto\n           w-full\n         ', icon: 'upload', variant: 'secondary', onOnClick: () => this.export.emit() }, localization.formatTranslation(this._locales.export)))), this.enableAction && this._buttonTemplate(), hasCustomActionsSlot && index.h("slot", { key: '5156a9e3cdcef6ce1aa15efa4909d88abed010da', name: 'custom-actions' })), this.enableAction && this.canUseAction && (index.h("div", { key: 'a8125d245e8a194734b50c2ead689a9bfb7d686e', class: '\n         fixed bottom-0 left-0 z-[2] block w-full border border-solid\n         border-transparent bg-white p-4\n         desktop-xs:hidden\n         dark:border-t-hurricane-400 dark:bg-hurricane-500\n       ' }, this._buttonTemplate(true))))));
     }
     async _setLocales() {
         this._locales = await localization.getLocaleComponentStrings(this._el);
     }
     _buttonTemplate(mobile = false) {
-        return (index.h("p-button", { class: mobile ? 'w-full' : 'hidden desktop-xs:flex', disabled: !this.canUseAction, icon: this.actionIcon, loading: this.actionLoading, onOnClick: () => this.action.emit() }, this.actionButtonTemplate
+        return (index.h("p-button", { class: mobile
+                ? 'w-full'
+                : `
+        hidden
+        desktop-xs:flex
+      `, disabled: !this.canUseAction, icon: this.actionIcon, loading: this.actionLoading, onOnClick: () => this.action.emit() }, this.actionButtonTemplate
             ? this.actionButtonTemplate(mobile ? this.itemsSelectedAmount : 0)
             : this._defaultActionButtonTemplate(mobile ? this.itemsSelectedAmount : 0)));
     }
     _getLabel(amount, variant = 'default') {
-        return (index.h("p-badge", { class: `ml-1 ${variant === 'default'
-                ? 'hidden desktop-xs:flex'
-                : 'flex desktop-xs:hidden'}` }, amount));
+        return (index.h("p-badge", { class: `
+      ml-1
+      ${variant === 'default'
+                ? `
+       hidden
+       desktop-xs:flex
+     `
+                : `
+       flex
+       desktop-xs:hidden
+     `}
+    ` }, amount));
     }
 };
 TableHeader.style = tableHeaderComponentCss();
@@ -10013,7 +10040,7 @@ const tableRowComponentCss = () => `.relative{position:relative}*{box-sizing:bor
 const row = index$1.cva(['flex min-w-[calc(100%-0.5rem)] flex-col', 'group', 'relative'], {
     variants: {
         variant: {
-            default: ['px-3 m-1', 'text-sm text-storm-500', 'dark:text-white'],
+            default: ['m-1 px-3', 'text-sm text-storm-500', 'dark:text-white'],
             header: null,
             'header-secondary': 'mb-4',
             secondary: ['px-4', 'font-ambit text-lg font-bold'],
@@ -10044,12 +10071,16 @@ const row = index$1.cva(['flex min-w-[calc(100%-0.5rem)] flex-col', 'group', 're
             checked: true,
             class: [
                 'rounded-lg transition-colors',
-                'bg-off-white-300 dark:bg-hurricane-400 dark:hover:bg-hurricane-400',
+                `
+       bg-off-white-300
+       dark:bg-hurricane-400
+       dark:hover:bg-hurricane-400
+     `,
             ],
         },
         {
             variant: ['secondary', 'header-secondary'],
-            class: ['bg-off-white-300 rounded-lg', 'dark:bg-hurricane-400'],
+            class: ['rounded-lg bg-off-white-300', 'dark:bg-hurricane-400'],
         },
         {
             variant: ['header', 'header-secondary'],
@@ -10073,7 +10104,10 @@ const content = index$1.cva('relative flex min-w-full flex-nowrap items-stretch
     compoundVariants: [
         {
             variant: ['default', 'secondary'],
-            class: 'min-h-14 py-2 tablet:py-4',
+            class: `
+      min-h-14 py-2
+      tablet:py-4
+    `,
         },
         {
             variant: ['header', 'header-secondary'],
@@ -10084,7 +10118,10 @@ const content = index$1.cva('relative flex min-w-full flex-nowrap items-stretch
 const actions = index$1.cva([
     'absolute -right-4 top-1 z-[2]',
     'h-[calc(100%-0.5rem)]',
-    'opacity-0 transition-opacity group-hover:opacity-100',
+    `
+   opacity-0 transition-opacity
+   group-hover:opacity-100
+ `,
     'empty:hidden',
 ]);
 const TableRow = class {
@@ -10108,13 +10145,13 @@ const TableRow = class {
      */
     isLast = false;
     render() {
-        return (index.h(themedHost_component.ThemedHost, { key: '2be589be89b6c6d1ccd5b46e73374348847ee5a1' }, index.h("div", { key: 'd43a94b7c9732295e0641ffc4efffdc73bb784ba', class: 'flex flex-col' }, index.h("div", { key: '402244a8e5b06f48b1993513ddf3c8bef695b989', class: row({
+        return (index.h(themedHost_component.ThemedHost, { key: '2a879fbd1ebc7e0ba74ccee2af2cd6c1a50ca1e9' }, index.h("div", { key: 'c8669184f758a8a2d43e64106e61528685868aba', class: 'flex flex-col' }, index.h("div", { key: '7ac443b2dc90f0933685cc3f2acc3d4a35294913', class: row({
                 variant: this.variant,
                 enableHover: this.enableHover,
                 checked: this.checked,
-            }) }, index.h("div", { key: '3941bbd80e7749cbb31249a9e742f9584d7f1540', class: content({
+            }) }, index.h("div", { key: 'f7e60bd5f786101d8a6e621c3c267d1b0d8be51f', class: content({
                 variant: this.variant,
-            }) }, index.h("slot", { key: 'bbcb9be829a24d7f1d527bb99564931a642ea4b4' }), index.h("div", { key: 'df447c6a92bbc0e7a17ee553f8c4d47841876450', class: actions() }, index.h("slot", { key: 'ca62989d4a7fbce5dce9ae28dc2115940eb5b182', name: 'actions' })))), !asBoolean.asBoolean(this.isLast) && this.variant !== 'secondary' && (index.h("p-divider", { key: '6a2a83d5c136c02219fbe3ba0007ed38bd353bde' })))));
+            }) }, index.h("slot", { key: '8c2c29d4fc47bf0bac08e13974cf75cca9a547d2' }), index.h("div", { key: '86aae5f9bfaefadb6230bd56fe8a98a0e43bca9b', class: actions() }, index.h("slot", { key: '18ac2963f072a01ab5489feb1f8cc29a0e070c82', name: 'actions' })))), !asBoolean.asBoolean(this.isLast) && this.variant !== 'secondary' && (index.h("p-divider", { key: 'a997fce0cef95cedd38154a512aff948d46cb465' })))));
     }
 };
 TableRow.style = tableRowComponentCss();
@@ -10130,13 +10167,16 @@ const TableRowActionsContainer = class {
      */
     checked = false;
     render() {
-        return (index.h(themedHost_component.ThemedHost, { key: '05b47280bc380ad0960a69c27fa641ea735a94f4' }, index.h("div", { key: 'e12fc3877b07a0596938b52d2a50f5446bdc78ae', class: cn.cn('flex before:w-4 before:bg-gradient-to-l before:from-off-white-200', {
+        return (index.h(themedHost_component.ThemedHost, { key: '05b47280bc380ad0960a69c27fa641ea735a94f4' }, index.h("div", { key: '5a0480d4df301d4aa395f87fc93b2e068b9f79f4', class: cn.cn(`
+        flex
+        before:w-4 before:bg-gradient-to-l before:from-off-white-200
+      `, {
                 'dark:before:from-hurricane-600': !this.checked,
                 'dark:before:from-hurricane-400': !!this.checked,
-            }) }, index.h("div", { key: 'cddfbd117853e870c9801b9d5a961a029939bd19', class: cn.cn('flex h-full items-center gap-2 rounded-r-lg bg-off-white-200 pr-3', {
+            }) }, index.h("div", { key: '6772a16f95a60938d7d8a019dcbd7c6e8f0d00c7', class: cn.cn('flex h-full items-center gap-2 rounded-r-lg bg-off-white-200 pr-3', {
                 'dark:bg-hurricane-600': !this.checked,
                 'dark:bg-hurricane-400': !!this.checked,
-            }) }, index.h("slot", { key: '647aeaa41557bc01063b60b065cf6975b33aa960' })))));
+            }) }, index.h("slot", { key: '27f6a9bf20a79fc58b63412aa0943278408e6f90' })))));
     }
 };
 TableRowActionsContainer.style = tableRowActionsContainerComponentCss();

package/dist/cjs/p-field_3.cjs.entry.js

@@ -12,10 +12,10 @@ require('./state-DM8SZBNO.js');
 
 const fieldComponentCss = () => `*{box-sizing:border-box}:host{input[type=number]{-moz-appearance:textfield}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;display:none}}.static{position:static}.relative{position:relative}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.flex{display:flex}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.min-h-4{min-height:1rem}.min-h-5{min-height:1.25rem}.w-inherit{width:inherit}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.cursor-not-allowed{cursor:not-allowed}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.hyphens-auto{hyphens:auto}.break-normal{overflow-wrap:normal;word-break:normal}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-0{border-width:0}.border-solid{border-style:solid}.border-none{border-style:none}.border-indigo-600{--tw-border-opacity:1;border-color:rgb(82 138 250/var(--tw-border-opacity,1))}.border-negative-red-500{--tw-border-opacity:1;border-color:rgb(230 30 30/var(--tw-border-opacity,1))}.border-storm-100{--tw-border-opacity:1;border-color:rgb(209 210 212/var(--tw-border-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white-600{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.p-0{padding:0}.px-2{padding-left:.5rem;padding-right:.5rem}.text-center{text-align:center}.font-geist{font-family:Geist,serif}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.leading-6{line-height:1.5rem}.text-negative-red-500{--tw-text-opacity:1;color:rgb(230 30 30/var(--tw-text-opacity,1))}.text-negative-red-800{--tw-text-opacity:1;color:rgb(141 16 16/var(--tw-text-opacity,1))}.text-storm-100{--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}.text-storm-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-indigo-100{--tw-ring-opacity:1;--tw-ring-color:rgb(227 236 254/var(--tw-ring-opacity,1))}.ring-negative-red-50{--tw-ring-opacity:1;--tw-ring-color:rgb(253 237 237/var(--tw-ring-opacity,1))}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.selection\\:bg-indigo-500 ::selection{--tw-bg-opacity:1;background-color:rgb(142 179 251/var(--tw-bg-opacity,1))}.selection\\:bg-negative-red-50 ::selection{--tw-bg-opacity:1;background-color:rgb(253 237 237/var(--tw-bg-opacity,1))}.selection\\:bg-indigo-500::selection{--tw-bg-opacity:1;background-color:rgb(142 179 251/var(--tw-bg-opacity,1))}.selection\\:bg-negative-red-50::selection{--tw-bg-opacity:1;background-color:rgb(253 237 237/var(--tw-bg-opacity,1))}.placeholder\\:text-sm::placeholder{font-size:.875rem;line-height:1.25rem}.placeholder\\:text-storm-500\\/40::placeholder{color:rgba(24,30,41,.4)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.dark\\:border-hurricane-400:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-border-opacity:1;border-color:rgb(70 75 84/var(--tw-border-opacity,1))}.dark\\:border-hurricane-500:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-border-opacity:1;border-color:rgb(54 60 70/var(--tw-border-opacity,1))}.dark\\:bg-hurricane-500:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1;background-color:rgb(54 60 70/var(--tw-bg-opacity,1))}.dark\\:bg-hurricane-600:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1;background-color:rgb(46 52 62/var(--tw-bg-opacity,1))}.dark\\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\\:text-hurricane-400:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.dark\\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\\:ring-0:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.dark\\:placeholder\\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *)::placeholder{--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\\:border-hurricane-400:where([data-theme=dark],[data-theme=dark] *){--tw-border-opacity:1;border-color:rgb(70 75 84/var(--tw-border-opacity,1))}.dark\\:border-hurricane-500:where([data-theme=dark],[data-theme=dark] *){--tw-border-opacity:1;border-color:rgb(54 60 70/var(--tw-border-opacity,1))}.dark\\:bg-hurricane-500:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1;background-color:rgb(54 60 70/var(--tw-bg-opacity,1))}.dark\\:bg-hurricane-600:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1;background-color:rgb(46 52 62/var(--tw-bg-opacity,1))}.dark\\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\\:text-hurricane-400:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.dark\\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\\:ring-0:where([data-theme=dark],[data-theme=dark] *){--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.dark\\:placeholder\\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *)::placeholder{--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}`;
 
-const field = index$1.cva(['flex gap-2', 'w-inherit', 'border-solid rounded-lg', 'relative'], {
+const field = index$1.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: {
@@ -66,24 +66,37 @@ const field = index$1.cva(['flex gap-2', 'w-inherit', 'border-solid rounded-lg',
             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,
@@ -94,14 +107,25 @@ const field = index$1.cva(['flex gap-2', 'w-inherit', 'border-solid rounded-lg',
             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 = index$1.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: {
@@ -114,12 +138,15 @@ const input = index$1.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 = index$1.cva(['flex flex-shrink-0 justify-center items-center text-center'], {
+const prefixAndSuffix = index$1.cva(['flex flex-shrink-0 items-center justify-center text-center'], {
     variants: {
         variant: {
             read: 'leading-6',
@@ -127,7 +154,10 @@ const prefixAndSuffix = index$1.cva(['flex flex-shrink-0 justify-center items-ce
         },
         disabled: {
             false: null,
-            true: 'text-storm-100 dark:text-hurricane-400',
+            true: `
+      text-storm-100
+      dark:text-hurricane-400
+    `,
         },
         focused: {
             false: null,
@@ -151,13 +181,19 @@ const prefixAndSuffix = index$1.cva(['flex flex-shrink-0 justify-center items-ce
             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,
@@ -348,8 +384,8 @@ const Field = class {
     }
     render() {
         const { id, prefix, suffix, hasHeaderSlot, hasLabelSlot, hasHelperSlot, hasErrorSlot, hasValueSlot, } = this._getSlotInfo();
-        return (index.h(themedHost_component.ThemedHost, { key: '09b8254690a1603271faac4d9653c90a582a4766' }, index.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 && (index.h("slot", { key: '597e07f1227421eb34575f2c35a5f752f60a66a3', name: 'label', slot: 'label' })), hasHeaderSlot && (index.h("slot", { key: '0ec1fd3a079f51c605b593e90d8514119ae0ffa3', name: 'header', slot: 'header' })), hasHelperSlot && (index.h("slot", { key: 'c71b52f8f6f8fc374e9d7e0c2ed4f838c9f9cb86', name: 'helper', slot: 'helper' })), hasErrorSlot && (index.h("slot", { key: 'd62e1c5f5592540dacbb2e18cf5cc560efbbc5a4', name: 'error', slot: 'error' })), index.h("div", { key: '7d30604708a80bd509b5d739e46d82b5fa23b464', class: field({
+        return (index.h(themedHost_component.ThemedHost, { key: 'd309322e4a2a9e73d7e20cb5e585eba64d3af95f' }, index.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 && (index.h("slot", { key: '4cbdc7b148e94564fc0b986a7780180bd8813d58', name: 'label', slot: 'label' })), hasHeaderSlot && (index.h("slot", { key: '61a1b3cb45df2792fbf51aa6e91d11b10e1b72e6', name: 'header', slot: 'header' })), hasHelperSlot && (index.h("slot", { key: 'd208829c7f4629f7390236d3a8c990d47d91f66b', name: 'helper', slot: 'helper' })), hasErrorSlot && (index.h("slot", { key: 'e4bd3ef86143630c0ebe9fe006aea4b7be2ca10f', name: 'error', slot: 'error' })), index.h("div", { key: 'ea260caef724543db24f04bb5861ea2a138c1574', class: field({
                 error: !!this.error?.length,
                 disabled: asBoolean.asBoolean(this.disabled),
                 focused: asBoolean.asBoolean(this.focused) || this._focused,
@@ -360,7 +396,7 @@ const Field = class {
                 ? `${this.value}`
                 : undefined }, (this.error?.length ||
             prefix ||
-            (this.icon && this.iconPosition === 'start')) && (index.h("div", { key: 'b4b203ba8f20620b2d7f368d2c6367bdadea9878', class: prefixAndSuffix({
+            (this.icon && this.iconPosition === 'start')) && (index.h("div", { key: 'd0e3d37f5fc3e7676cc3bc7f622733504169ddcf', class: prefixAndSuffix({
                 variant: this.variant,
                 error: !!this.error?.length,
                 disabled: asBoolean.asBoolean(this.disabled),
@@ -370,7 +406,7 @@ const Field = class {
             }), onClick: () => this._focusInput() }, (this.icon && this.iconPosition === 'start') ||
             this.error?.length ? (index.h("p-icon", { class: cn.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')) && (index.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')) && (index.h("div", { key: 'f479afb28bbd5ba74b78deaa7b9daf1ef543fa27', class: prefixAndSuffix({
                 variant: this.variant,
                 error: !!this.error?.length,
                 disabled: asBoolean.asBoolean(this.disabled),
@@ -528,7 +564,7 @@ Field.style = fieldComponentCss();
 
 const fieldContainerComponentCss = () => `*{box-sizing:border-box}.static{position:static}.ml-auto{margin-left:auto}.flex{display:flex}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.w-full{width:100%}.w-inherit{width:inherit}.min-w-0{min-width:0}.flex-shrink-0{flex-shrink:0}.cursor-auto{cursor:auto}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.rounded-lg{border-radius:.5rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.text-storm-200{--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.text-storm-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.empty\\:hidden:empty{display:none}.dark\\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\\:text-hurricane-300:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.dark\\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\\:text-hurricane-300:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.dark\\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}`;
 
-const loader = index$1.cva(['rounded-lg w-full'], {
+const loader = index$1.cva(['w-full rounded-lg'], {
     variants: {
         variant: {
             read: null,
@@ -637,18 +673,21 @@ const FieldContainer = class {
         }
         return (index.h(themedHost_component.ThemedHost, { key: '9b4ab7a1d59cead07a2065b0d6bc72be41d24287' }, index.h("label", { key: 'ac31d16bdd75b4b236479638efd367f4771627d1', class: cn.cn('flex w-inherit flex-col gap-1', {
                 'cursor-auto': this.variant === 'read',
-            }), htmlFor: this.id }, index.h("div", { key: '06a0c419582c71df7323bc3b0deb2d8a98541ca7', class: cn.cn('flex items-end justify-between gap-1 empty:hidden', {
+            }), htmlFor: this.id }, index.h("div", { key: '512c7c3162d9a40483f5d43d7fbea5635c40b45d', class: cn.cn(`
+         flex items-end justify-between gap-1
+         empty:hidden
+       `, {
                 'flex-row-reverse': this.align === 'end',
-            }) }, (!!label?.length || !!helper?.length) && (index.h("div", { key: '97d2b33bb04145650b000dde1859015361855fa3', class: 'flex min-w-0 gap-2', onClick: () => this.focus.emit() }, index.h("span", { key: '4a2fc2b62dba4fc7d4a5f816944996333cff2ca3', class: 'min-w-0 overflow-hidden text-ellipsis text-xs font-medium text-storm-300 dark:text-hurricane-200' }, label), helper && (index.h("p-helper", { key: '1638bb0c6c3683bd2bd0836b9f4fd0ca07561baf', class: 'flex flex-shrink-0', placement: 'top' }, helper)))), ((!asBoolean.asBoolean(this.required) && asBoolean.asBoolean(this.showOptional)) ||
-            hasHeaderSlot) && (index.h("div", { key: '4f9f56fc0951dab62bd75c4cc7ea724e17ec05aa', class: 'flex items-center gap-1' }, !asBoolean.asBoolean(this.required) &&
+            }) }, (!!label?.length || !!helper?.length) && (index.h("div", { key: '77b5887681e6537714b0352a02873a56ab22e304', class: 'flex min-w-0 gap-2', onClick: () => this.focus.emit() }, index.h("span", { key: '786e241b3537a05c4bf12f58333d5c10065879c3', class: '\n           min-w-0 overflow-hidden text-ellipsis text-xs font-medium\n           text-storm-300\n           dark:text-hurricane-200\n         ' }, label), helper && (index.h("p-helper", { key: 'd14700f7a78349ffb1de0a39bcb92ca9833e7f3b', class: 'flex flex-shrink-0', placement: 'top' }, helper)))), ((!asBoolean.asBoolean(this.required) && asBoolean.asBoolean(this.showOptional)) ||
+            hasHeaderSlot) && (index.h("div", { key: 'a3f63057ac68b62a68cf4d0b31b09039817ea87f', class: 'flex items-center gap-1' }, !asBoolean.asBoolean(this.required) &&
             asBoolean.asBoolean(this.showOptional) &&
-            this.variant === 'write' && (index.h("span", { key: '5a86b8751d683868f5c6f001571c184684014741', class: 'text-xs font-medium text-storm-200 dark:text-hurricane-300' }, this.optionalTemplate())), hasHeaderSlot && index.h("slot", { key: '2bb4125dfcf6a346259a64f5a92000413fcd13ab', name: 'header' })))), index.h("p-tooltip", { key: '9ddda9fc48a0d3e95ba9953c1787728692b04b27', class: cn.cn({
+            this.variant === 'write' && (index.h("span", { key: '6e98ac54bcabfe7b4481b1745b7c25fbc0c1e717', class: '\n             text-xs font-medium text-storm-200\n             dark:text-hurricane-300\n           ' }, this.optionalTemplate())), hasHeaderSlot && index.h("slot", { key: 'e4b5a07a66a036c619d0a788c959a3d80af2f58c', name: 'header' })))), index.h("p-tooltip", { key: 'd482091d838534d3f3e3f177c9f5ccd605e8e519', class: cn.cn({
                 'w-full': this.variant === 'write' || this.loading,
                 'ml-auto': this.align === 'end',
                 'font-normal': this.variant === 'read',
                 'text-storm-500 dark:text-white': this.variant === 'read',
             }), content: this.error, enableUserInput: false, placement: this.errorPlacement, show: errorAndErrorIsNotBoolean &&
-                asBoolean.asBoolean(this.forceShowTooltip, false), variant: 'error' }, hasErrorSlot && (index.h("slot", { key: '3670780d5e0907d655e282fbea6c43dcceea7e00', name: 'error', slot: 'content' })), contentSlot))));
+                asBoolean.asBoolean(this.forceShowTooltip, false), variant: 'error' }, hasErrorSlot && (index.h("slot", { key: '45fc720b8771ffca3ce381fcc98c162947aa1e71', name: 'error', slot: 'content' })), contentSlot))));
     }
     async _setLocales() {
         this._locales = await localization.getLocaleComponentStrings(this._el);
@@ -690,7 +729,7 @@ const Helper = class {
      */
     placement = 'top';
     render() {
-        return (index.h(themedHost_component.ThemedHost, { key: 'd7f07b4f232bb43ce0988ea8533353a8d193e7bf' }, index.h("p-tooltip", { key: 'df76c8696c9621a6ea5431c5d256eded55de0b57', class: 'flex', placement: this.placement, strategy: this.strategy }, index.h("p-icon", { key: 'e7c4d59174ec46413381af510485a890fcab91f8', class: 'cursor-pointer text-storm-300 hover:text-storm-500 dark:text-hurricane-300 dark:hover:text-hurricane-200', size: 'sm', slot: 'trigger', variant: 'question-circle' }), index.h("div", { key: '1173d658220d127af6982fb2939f7493a84cf52d', slot: 'content' }, index.h("slot", { key: '53d7d9c9c9c919ba312dc57f92d68fdc5f6b385c' })))));
+        return (index.h(themedHost_component.ThemedHost, { key: 'd7f07b4f232bb43ce0988ea8533353a8d193e7bf' }, index.h("p-tooltip", { key: 'df76c8696c9621a6ea5431c5d256eded55de0b57', class: 'flex', placement: this.placement, strategy: this.strategy }, index.h("p-icon", { key: 'f582de019e9a60ebe2296405354cb48ebfc4ca1f', class: '\n        cursor-pointer text-storm-300\n        hover:text-storm-500\n        dark:text-hurricane-300\n        dark:hover:text-hurricane-200\n      ', size: 'sm', slot: 'trigger', variant: 'question-circle' }), index.h("div", { key: '1863361d1ec8867f5f403d823290273b77571516', slot: 'content' }, index.h("slot", { key: 'd876213ee32eb63e77c9074391f8f31fd42ddd69' })))));
     }
 };
 Helper.style = helperComponentCss();

package/dist/cjs/p-floating-menu-item.cjs.entry.js

@@ -9,7 +9,7 @@ require('./state-DM8SZBNO.js');
 
 const floatingMenuItemComponentCss = () => `*{box-sizing:border-box}.static{position:static}.flex{display:flex}.h-8{height:2rem}.min-w-0{min-width:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.text-nowrap{text-wrap:nowrap}.rounded-lg{border-radius:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.text-storm-100{--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}.text-storm-50{--tw-text-opacity:1;color:rgb(232 232 234/var(--tw-text-opacity,1))}.opacity-60{opacity:.6}.empty\\:hidden:empty{display:none}.hover\\:bg-storm-800:hover{--tw-bg-opacity:1;background-color:rgb(2 8 21/var(--tw-bg-opacity,1))}.active\\:bg-storm-700:active{--tw-bg-opacity:1;background-color:rgb(8 15 28/var(--tw-bg-opacity,1))}.active\\:text-storm-100\\/60:active{color:hsla(220,3%,83%,.6)}.group:hover .group-hover\\:text-storm-100{--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}.group:active .group-active\\:text-storm-100\\/60{color:hsla(220,3%,83%,.6)}.dark\\:hover\\:bg-hurricane-500:hover:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1;background-color:rgb(54 60 70/var(--tw-bg-opacity,1))}.dark\\:active\\:bg-hurricane-600\\/50:active:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:rgba(46,52,62,.5)}.dark\\:hover\\:bg-hurricane-500:hover:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1;background-color:rgb(54 60 70/var(--tw-bg-opacity,1))}.dark\\:active\\:bg-hurricane-600\\/50:active:where([data-theme=dark],[data-theme=dark] *){background-color:rgba(46,52,62,.5)}`;
 
-const item = index$1.cva(['group', 'flex gap-2 items-center h-8 px-2', 'text-sm', 'rounded-lg'], {
+const item = index$1.cva(['group', 'flex h-8 items-center gap-2 px-2', 'text-sm', 'rounded-lg'], {
     variants: {
         hover: {
             false: null,
@@ -17,7 +17,7 @@ const item = index$1.cva(['group', 'flex gap-2 items-center h-8 px-2', 'text-sm'
         },
         disabled: {
             false: null,
-            true: 'opacity-60 cursor-not-allowed',
+            true: 'cursor-not-allowed opacity-60',
         },
     },
     compoundVariants: [
@@ -33,8 +33,15 @@ const item = index$1.cva(['group', 'flex gap-2 items-center h-8 px-2', 'text-sm'
             disabled: false,
             hover: true,
             class: [
-                'cursor-pointer active:text-storm-100/60 hover:bg-storm-800 active:bg-storm-700',
-                'dark:hover:bg-hurricane-500 dark:active:bg-hurricane-600/50',
+                `
+       cursor-pointer
+       hover:bg-storm-800
+       active:bg-storm-700 active:text-storm-100/60
+     `,
+                `
+       dark:hover:bg-hurricane-500
+       dark:active:bg-hurricane-600/50
+     `,
             ],
         },
     ],
@@ -54,7 +61,10 @@ const icon = index$1.cva([], {
         {
             disabled: false,
             hover: true,
-            class: 'group-hover:text-storm-100 group-active:text-storm-100/60',
+            class: `
+     group-hover:text-storm-100
+     group-active:text-storm-100/60
+   `,
         },
     ],
 });
@@ -91,10 +101,10 @@ const FloatingMenuItem = class {
      */
     iconRotate;
     render() {
-        return (index.h(themedHost_component.ThemedHost, { key: '17dd39774582fb6952e8afabbc9437d835732475', class: item({
+        return (index.h(themedHost_component.ThemedHost, { key: '9ea48ae1034fdfac03dda8cc37f418b70e84d110', class: item({
                 hover: asBoolean.asBoolean(this.hover) && !asBoolean.asBoolean(this.loading),
                 disabled: asBoolean.asBoolean(this.disabled),
-            }) }, this._getIcon(), index.h("p", { key: '403c68511a0d5705be8f6e13f1c4c5b6ffd7e394', class: 'min-w-0 overflow-hidden text-ellipsis text-nowrap font-semibold empty:hidden' }, index.h("slot", { key: '9ada19d985b83b8aec672dc5d01fd9d6742cbb9c' }))));
+            }) }, this._getIcon(), index.h("p", { key: 'd95a7f2ccf5e11fb5048bf9ae651e341a62a75ec', class: '\n       min-w-0 overflow-hidden text-ellipsis text-nowrap font-semibold\n       empty:hidden\n     ' }, index.h("slot", { key: '0af451107a9e94f6b63aa90d0683e4b50b43ba40' }))));
     }
     _getIcon() {
         if (!this.icon && !this.loading) {