@paperless/core 3.0.2 → 3.1.1

package/dist/collection/components/atoms/dropdown-menu/container/dropdown-menu-container.component.js

@@ -5,19 +5,19 @@ import { asBoolean } from "../../../../utils/as-boolean";
 const dropdownMenuContainer = cva([
     'p-dropdown-menu-container',
     'p-1',
-    'rounded-lg z-10',
+    'z-10 rounded-lg',
     'border',
     'transform-gpu will-change-transform',
 ], {
     variants: {
         variant: {
             default: [
-                'bg-white border-storm-100 drop-shadow-2',
-                'dark:bg-hurricane-400 dark:border-transparent',
+                'border-storm-100 bg-white drop-shadow-2',
+                'dark:border-transparent dark:bg-hurricane-400',
             ],
             storm: [
-                'bg-storm-400 drop-shadow-3 border-storm-400',
-                'dark:bg-white dark:border-white/60 dark:border-storm-100',
+                'border-storm-400 bg-storm-400 drop-shadow-3',
+                'dark:border-storm-100 dark:border-white/60 dark:bg-white',
             ],
         },
         fullWidth: {
@@ -37,7 +37,7 @@ const dropdownMenuContainer = cva([
         },
     ],
 });
-const innerContainer = cva('w-full min-h-full relative', {
+const innerContainer = cva('relative min-h-full w-full', {
     variants: {
         allowOverflow: {
             false: 'overflow-y-auto overflow-x-hidden',

package/dist/collection/components/atoms/dropdown-menu/item/dropdown-menu-item.component.js

@@ -4,14 +4,20 @@ import { ThemedHost } from "../../../../internal/themed-host.component";
 import { cn } from "../../../../utils";
 import { asBoolean } from "../../../../utils/as-boolean";
 const dropdownMenuItem = cva([
-    'p-dropdown-menu-item flex gap-2 text-sm group rounded-lg items-center max-w-full',
+    `
+    p-dropdown-menu-item group flex max-w-full items-center gap-2 rounded-lg
+    text-sm
+  `,
 ], {
     variants: {
         variant: {
             default: null,
             storm: null,
             negative: null,
-            pagination: 'text-xs px-2 text-storm-300 h-6 dark:text-hurricane-200',
+            pagination: `
+      h-6 px-2 text-xs text-storm-300
+      dark:text-hurricane-200
+    `,
         },
         active: {
             false: null,
@@ -54,47 +60,71 @@ const dropdownMenuItem = cva([
             active: false,
             enableHover: true,
             disabled: false,
-            class: 'hover:bg-indigo-50 dark:hover:bg-indigo-600/10',
+            class: `
+      hover:bg-indigo-50
+      dark:hover:bg-indigo-600/10
+    `,
         },
         {
             variant: 'default',
             active: true,
             disabled: false,
-            class: 'bg-indigo-100 dark:bg-indigo-600/20',
+            class: `
+      bg-indigo-100
+      dark:bg-indigo-600/20
+    `,
         },
         {
             variant: 'default',
             disabled: false,
-            class: 'text-storm-500 dark:text-white',
+            class: `
+      text-storm-500
+      dark:text-white
+    `,
         },
         {
             variant: 'default',
             disabled: true,
-            class: 'text-storm-200 dark:text-hurricane-300',
+            class: `
+      text-storm-200
+      dark:text-hurricane-300
+    `,
         },
         {
             variant: 'default',
             disabled: true,
             active: true,
-            class: 'bg-indigo-50 dark:bg-white/5',
+            class: `
+      bg-indigo-50
+      dark:bg-white/5
+    `,
         },
         {
             variant: 'storm',
             active: false,
             enableHover: true,
-            class: 'text-white dark:text-storm-500',
+            class: `
+      text-white
+      dark:text-storm-500
+    `,
         },
         {
             variant: 'storm',
             active: false,
             enableHover: true,
             disabled: false,
-            class: 'hover:bg-storm-500 dark:hover:bg-storm-500/15',
+            class: `
+      hover:bg-storm-500
+      dark:hover:bg-storm-500/15
+    `,
         },
         {
             variant: 'storm',
             active: true,
-            class: 'text-white bg-storm-600 dark:text-storm-500 dark:bg-storm-500/20',
+            class: `
+      bg-storm-600 text-white
+      dark:bg-storm-500/20 dark:text-storm-500
+    `,
         },
         {
             variant: 'storm',
@@ -106,13 +136,20 @@ const dropdownMenuItem = cva([
             active: false,
             enableHover: true,
             disabled: false,
-            class: 'text-negative-red-500 hover:bg-negative-red-50 dark:hover:bg-negative-red-500/10',
+            class: `
+      text-negative-red-500
+      hover:bg-negative-red-50
+      dark:hover:bg-negative-red-500/10
+    `,
         },
         {
             variant: 'negative',
             active: true,
             disabled: false,
-            class: 'bg-negative-red-100 text-negative-red-500 dark:bg-negative-red-500/15',
+            class: `
+      bg-negative-red-100 text-negative-red-500
+      dark:bg-negative-red-500/15
+    `,
         },
         {
             variant: 'negative',
@@ -159,8 +196,14 @@ const dropdownMenuItemIcon = cva(['text-base'], {
             active: false,
             disabled: false,
             class: [
-                'text-storm-300 group-hover:text-storm-500',
-                'dark:text-hurricane-200 dark:group-hover:text-white',
+                `
+      text-storm-300
+      group-hover:text-storm-500
+    `,
+                `
+      dark:text-hurricane-200
+      dark:group-hover:text-white
+    `,
             ],
         },
         {
@@ -168,21 +211,35 @@ const dropdownMenuItemIcon = cva(['text-base'], {
             active: false,
             disabled: false,
             class: [
-                'text-storm-100 group-hover:text-white',
-                'dark:text-storm-300 dark:group-hover:text-storm-500',
+                `
+      text-storm-100
+      group-hover:text-white
+    `,
+                `
+      dark:text-storm-300
+      dark:group-hover:text-storm-500
+    `,
             ],
         },
         {
             variant: 'negative',
             active: false,
             disabled: false,
-            class: 'text-negative-red-500 group-hover:text-negative-red-800 dark:text-negative-red-alternative dark:group-hover:text-negative-red-500',
+            class: `
+     text-negative-red-500
+     group-hover:text-negative-red-800
+     dark:text-negative-red-alternative
+     dark:group-hover:text-negative-red-500
+   `,
         },
         {
             variant: 'negative',
             active: true,
             disabled: false,
-            class: 'text-negative-red-800 dark:text-negative-red-500',
+            class: `
+     text-negative-red-800
+     dark:text-negative-red-500
+   `,
         },
     ],
 });
@@ -228,19 +285,19 @@ export class DropdownMenuItem {
      */
     autoHeight = false;
     render() {
-        return (h(ThemedHost, { key: 'cbcd8b00c8ace5de588cbb1bf6c4be75e41f4e96' }, h("div", { key: 'f044ef811bb2abe6bbf88ffa09d8efa0b022a9ad', class: cn(dropdownMenuItem({
+        return (h(ThemedHost, { key: '9db5400644abc5f1cd2b61bddbf2e17ff7b819a1' }, h("div", { key: '35a64c76b96041fc565c19845aca3f0330c96b49', class: cn(dropdownMenuItem({
                 variant: this.variant,
                 active: asBoolean(this.active),
                 enableHover: asBoolean(this.enableHover ?? true),
                 autoHeight: asBoolean(this.autoHeight ?? false),
                 enableTextWrap: this.enableTextWrap,
                 disabled: asBoolean(this.disabled),
-            })) }, this.icon && (h("p-icon", { key: 'aad153de054db169cdc453d9f0f121d57f19c152', class: dropdownMenuItemIcon({
+            })) }, this.icon && (h("p-icon", { key: 'a7a7a2d9c28cf63aeb66043eb7c8e28fe375437c', class: dropdownMenuItemIcon({
                 variant: this.variant,
                 active: asBoolean(this.active),
                 disabled: asBoolean(this.disabled),
                 wave: asBoolean(this.iconWave),
-            }), variant: this.icon })), this.checkbox && (h("p-checkbox", { key: '810aeec3a0a477c77cefdf5ba49ad0c64e22f8a1', checked: this.active, disabled: this.disabled })), this.useContainer ? (h("div", { class: cn('block w-full overflow-hidden text-start', {
+            }), variant: this.icon })), this.checkbox && (h("p-checkbox", { key: 'e57a547ced7bd228f920d5c5197d6c17dc1aeaee', checked: this.active, disabled: this.disabled })), this.useContainer ? (h("div", { class: cn('block w-full overflow-hidden text-start', {
                 'text-ellipsis whitespace-nowrap': !this.enableTextWrap,
             }) }, h("slot", null))) : (h("slot", null)))));
     }

package/dist/collection/components/atoms/floating-menu/container/floating-menu-container.component.js

@@ -7,7 +7,7 @@ const container = 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',

package/dist/collection/components/atoms/floating-menu/item/floating-menu-item.component.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
 import { ThemedHost } from "../../../../internal/themed-host.component";
 import { asBoolean } from "../../../../utils/as-boolean";
-const item = cva(['group', 'flex gap-2 items-center h-8 px-2', 'text-sm', 'rounded-lg'], {
+const item = cva(['group', 'flex h-8 items-center gap-2 px-2', 'text-sm', 'rounded-lg'], {
     variants: {
         hover: {
             false: null,
@@ -10,7 +10,7 @@ const item = cva(['group', 'flex gap-2 items-center h-8 px-2', 'text-sm', 'round
         },
         disabled: {
             false: null,
-            true: 'opacity-60 cursor-not-allowed',
+            true: 'cursor-not-allowed opacity-60',
         },
     },
     compoundVariants: [
@@ -26,8 +26,15 @@ const item = cva(['group', 'flex gap-2 items-center h-8 px-2', 'text-sm', 'round
             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
+     `,
             ],
         },
     ],
@@ -47,7 +54,10 @@ const icon = 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
+   `,
         },
     ],
 });
@@ -81,10 +91,10 @@ export class FloatingMenuItem {
      */
     iconRotate;
     render() {
-        return (h(ThemedHost, { key: '17dd39774582fb6952e8afabbc9437d835732475', class: item({
+        return (h(ThemedHost, { key: '9ea48ae1034fdfac03dda8cc37f418b70e84d110', class: item({
                 hover: asBoolean(this.hover) && !asBoolean(this.loading),
                 disabled: asBoolean(this.disabled),
-            }) }, this._getIcon(), h("p", { key: '403c68511a0d5705be8f6e13f1c4c5b6ffd7e394', class: 'min-w-0 overflow-hidden text-ellipsis text-nowrap font-semibold empty:hidden' }, h("slot", { key: '9ada19d985b83b8aec672dc5d01fd9d6742cbb9c' }))));
+            }) }, this._getIcon(), h("p", { key: 'd95a7f2ccf5e11fb5048bf9ae651e341a62a75ec', class: '\n       min-w-0 overflow-hidden text-ellipsis text-nowrap font-semibold\n       empty:hidden\n     ' }, h("slot", { key: '0af451107a9e94f6b63aa90d0683e4b50b43ba40' }))));
     }
     _getIcon() {
         if (!this.icon && !this.loading) {

package/dist/collection/components/atoms/helper/helper.component.js

@@ -10,7 +10,7 @@ export class Helper {
      */
     placement = 'top';
     render() {
-        return (h(ThemedHost, { key: 'd7f07b4f232bb43ce0988ea8533353a8d193e7bf' }, h("p-tooltip", { key: 'df76c8696c9621a6ea5431c5d256eded55de0b57', class: 'flex', placement: this.placement, strategy: this.strategy }, 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' }), h("div", { key: '1173d658220d127af6982fb2939f7493a84cf52d', slot: 'content' }, h("slot", { key: '53d7d9c9c9c919ba312dc57f92d68fdc5f6b385c' })))));
+        return (h(ThemedHost, { key: 'd7f07b4f232bb43ce0988ea8533353a8d193e7bf' }, h("p-tooltip", { key: 'df76c8696c9621a6ea5431c5d256eded55de0b57', class: 'flex', placement: this.placement, strategy: this.strategy }, 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' }), h("div", { key: '1863361d1ec8867f5f403d823290273b77571516', slot: 'content' }, h("slot", { key: 'd876213ee32eb63e77c9074391f8f31fd42ddd69' })))));
     }
     static get is() { return "p-helper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/info-panel/info-panel.component.js

@@ -1,37 +1,73 @@
 import { h, } from "@stencil/core";
 import { cva } from "class-variance-authority";
 import { ThemedHost } from "../../../internal/themed-host.component";
-const infopanel = cva(['flex flex-col gap-1', 'w-full h-inherit px-4 py-3', 'rounded-lg relative'], {
+const infopanel = cva(['flex flex-col gap-1', 'h-inherit w-full px-4 py-3', 'relative rounded-lg'], {
     variants: {
         closeAble: {
             true: 'pr-10',
         },
         variant: {
-            neutral: 'bg-indigo-100 dark:bg-indigo-300/15',
-            positive: 'bg-positive-green-100 dark:bg-positive-green-alternative/15',
-            biased: 'bg-amber-50 dark:bg-amber-alternative/15',
-            negative: 'bg-negative-red-100 dark:bg-negative-red-alternative/15',
-            feedback: 'bg-white-700 dark:bg-hurricane-100/15',
+            neutral: `
+      bg-indigo-100
+      dark:bg-indigo-300/15
+    `,
+            positive: `
+      bg-positive-green-100
+      dark:bg-positive-green-alternative/15
+    `,
+            biased: `
+      bg-amber-50
+      dark:bg-amber-alternative/15
+    `,
+            negative: `
+      bg-negative-red-100
+      dark:bg-negative-red-alternative/15
+    `,
+            feedback: `
+      bg-white-700
+      dark:bg-hurricane-100/15
+    `,
         },
     },
 });
 const header = cva('text-sm font-medium', {
     variants: {
         variant: {
-            neutral: 'text-indigo-900 dark:text-indigo-400',
-            positive: 'text-positive-green-800 dark:text-positive-green-alternative',
-            biased: 'text-amber-800 dark:text-amber-alternative',
-            negative: 'text-negative-red-800 dark:text-negative-red-alternative',
-            feedback: 'text-storm-800 dark:text-hurricane-100',
+            neutral: `
+     text-indigo-900
+     dark:text-indigo-400
+   `,
+            positive: `
+     text-positive-green-800
+     dark:text-positive-green-alternative
+   `,
+            biased: `
+     text-amber-800
+     dark:text-amber-alternative
+   `,
+            negative: `
+     text-negative-red-800
+     dark:text-negative-red-alternative
+   `,
+            feedback: `
+     text-storm-800
+     dark:text-hurricane-100
+   `,
         },
     },
 });
 const close = cva([
     'absolute right-2 top-2',
     'flex items-center justify-center',
-    'rounded-lg cursor-pointer',
-    'text-storm-800/60 hover:text-storm-800/60 hover:bg-white-500/40',
-    'dark:text-white/60 dark:hover:text-white dark:hover:bg-white/15',
+    'cursor-pointer rounded-lg',
+    `
+   text-storm-800/60
+   hover:bg-white-500/40 hover:text-storm-800/60
+ `,
+    `
+   dark:text-white/60
+   dark:hover:bg-white/15 dark:hover:text-white
+ `,
     'h-6 w-6',
 ]);
 export class InfoPanel {
@@ -62,10 +98,10 @@ export class InfoPanel {
     render() {
         const hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
         const hasContentSlot = !!this._el.querySelector(':scope > [slot="content"]');
-        return (h(ThemedHost, { key: 'ee4ad5cee3c5afb9a0a544abde2cbf8fb87e2e2d' }, h("div", { key: '3f6cd689581f8d8bfd317471c5c5e357f93e45ee', class: infopanel({
+        return (h(ThemedHost, { key: '87ae49020797e8641547365c95ff8612133cc199' }, h("div", { key: 'f19b4f2340c1a85b5c37f744506ce9f518e80ba0', class: infopanel({
                 variant: this.variant,
                 closeAble: this.closeable,
-            }) }, (this.header?.length || hasHeaderSlot) && (h("div", { key: '7aa48cabaab62a1fbc1ac2c905b3ccacfa46b652', class: header({ variant: this.variant }) }, this.header?.length ? (h("p", { class: 'my-0' }, this.header)) : (h("slot", { name: 'header' })))), (this.content?.length || hasContentSlot) && (h("div", { key: '113ae3891146ed67557b04f62211c4caff13e3c2', class: 'h-inherit text-sm font-normal text-storm-800/60 dark:text-white/70' }, this.content?.length ? (h("p", { class: 'my-0' }, this.content)) : (h("slot", { name: 'content' })))), this.closeable && (h("div", { key: 'e05451026aa39bb7584c52bd10397e6706b62b26', class: close(), onClick: () => this._close() }, h("p-icon", { key: 'b030dd77f43543ad6805112a2ef9b23c7363cb26', variant: 'negative' }))))));
+            }) }, (this.header?.length || hasHeaderSlot) && (h("div", { key: '49de1f8919c4d0ae223381866417b9757f7f9eb3', class: header({ variant: this.variant }) }, this.header?.length ? (h("p", { class: 'my-0' }, this.header)) : (h("slot", { name: 'header' })))), (this.content?.length || hasContentSlot) && (h("div", { key: '2612d827209f18b1164d907b15eeb7f7d13db969', class: '\n         h-inherit text-sm font-normal text-storm-800/60\n         dark:text-white/70\n       ' }, this.content?.length ? (h("p", { class: 'my-0' }, this.content)) : (h("slot", { name: 'content' })))), this.closeable && (h("div", { key: '682d40844b695e499d0dbb93144b9f313c0f9da4', class: close(), onClick: () => this._close() }, h("p-icon", { key: '8eeb362cefab7c7ea50f837044668e9633ae947d', variant: 'negative' }))))));
     }
     _close() {
         this.closed.emit();

package/dist/collection/components/atoms/layout/layout.component.js

@@ -9,7 +9,10 @@ export class Layout {
      */
     scroll;
     render() {
-        return (h(Host, { key: 'e3b483bb24e305914144448f81531d58f6dd829a', class: `p-layout variant-${this.variant}` }, h("div", { key: '16d2681d444b554d3d9ca36a83ee559fa770e041', class: 'content', onScroll: ev => this.scroll.emit(ev) }, h("div", { key: '06ad569a41ea6ca7fdc2ac5ce8946d201982715f', class: 'inner-content' }, h("slot", { key: 'e1a9280008ece9ca605b26050acd56152dc6183b', name: 'content' }))), h("div", { key: 'd9100d85435c75ccf7b7256c5854aaa58cc26284', class: 'sidebar' }, h("slot", { key: '1d86ae46ee7208e9809c0dd6cd6c44e98d9d37dd', name: 'sidebar' })), h("div", { key: '6c2caec168d65ea1b01b29020a5865b47a7b8836', class: 'topbar' }, h("slot", { key: 'c55d9abbf08de89657aaf4a2610667eef74135b3', name: 'topbar' }))));
+        return (h(Host, { key: '8f62f5f3f1412e4bb494051d15a064dc0c3263d9', class: `
+      p-layout
+      variant-${this.variant}
+    ` }, h("div", { key: '7f4cd5cbd739fd4ec64cbc065962fe215bd1b33a', class: 'content', onScroll: ev => this.scroll.emit(ev) }, h("div", { key: '1b16574e29b90200b07d3b4d9fad07102eca5ff9', class: 'inner-content' }, h("slot", { key: 'e609a7fa805feee5400356e825cec2b850550fac', name: 'content' }))), h("div", { key: '59bd6420f48ca71728acaf035be6527690534665', class: 'sidebar' }, h("slot", { key: '06844d4224284bd09c96fd7ccd367983cab70254', name: 'sidebar' })), h("div", { key: '002c820da5677f074f48764e9a9f5ecd00920c9e', class: 'topbar' }, h("slot", { key: '1c997e9e8e9ea84809085119bba5b5b2d0f93475', name: 'topbar' }))));
     }
     static get is() { return "p-layout"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/listing/item/listing-item.component.js

@@ -6,7 +6,7 @@ export class ListingItem {
      */
     icon = 'placeholder';
     render() {
-        return (h(ThemedHost, { key: 'e2b07cadde155cc5f8e89c305001f60d6f59ae30' }, h("div", { key: '19cc7bd70f7db7a95dfca67a5ad95ba80dc30228', class: 'flex items-center gap-2 text-storm-500 dark:text-white' }, h("p-icon", { key: '45d2060debccfa81b61b08f72426b908124c3288', variant: this.icon }), h("div", { key: '0b71a178319947208668f96e2598f09e17dd62d6', class: 'flex min-w-0 flex-1 flex-col text-sm font-medium' }, h("slot", { key: '8531f5b5ab3af0ba370733876465ea140e50b311' })))));
+        return (h(ThemedHost, { key: 'e2b07cadde155cc5f8e89c305001f60d6f59ae30' }, h("div", { key: 'f6a73a4819c9e79d321940e2eaac315c2a5c4071', class: '\n       flex items-center gap-2 text-storm-500\n       dark:text-white\n     ' }, h("p-icon", { key: '70ae7063fd9e6971014b0c980fa0044a06a07480', variant: this.icon }), h("div", { key: '163a4b15c05122af8608b877a974fbbb9213823f', class: 'flex min-w-0 flex-1 flex-col text-sm font-medium' }, h("slot", { key: '9d9c2d335873477597dc37547c71af01befda87d' })))));
     }
     static get is() { return "p-listing-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/loader/loader.component.js

@@ -39,11 +39,17 @@ export class Loader {
         if (this.variant === 'ghost') {
             return (h(ThemedHost, { class: 'variant-ghost min-h-4 min-w-4 rounded-2xl' }));
         }
-        const loader = h("div", { class: `loader color-${this.color}` });
+        const loader = (h("div", { class: `
+      loader
+      color-${this.color}
+    ` }));
         if (this.variant === 'full-screen') {
             return (h(ThemedHost, { class: 'variant-full-screen' }, h("div", { class: 'loading-screen' }, h("div", { class: 'content' }, h("slot", null)))));
         }
-        return (h(ThemedHost, { class: `variant-default flex ${this.variant === 'full-width' && 'flex w-full justify-center text-4xl'}` }, loader));
+        return (h(ThemedHost, { class: `
+      variant-default flex
+      ${this.variant === 'full-width' && 'w-full justify-center text-4xl'}
+    ` }, loader));
     }
     _checkShow() {
         if (this._showSubscriber) {

package/dist/collection/components/atoms/modal/body/modal-body.component.js

@@ -1,14 +1,23 @@
 import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
 import { ThemedHost } from "../../../../internal/themed-host.component";
-const body = cva('bg-white dark:bg-hurricane-600 p-4 -mt-px', {
+const body = cva(`
+   -mt-px bg-white p-4
+   dark:bg-hurricane-600
+ `, {
     variants: {
         roundedBottom: {
-            true: 'rounded-b-none desktop-xs:rounded-b-2xl pb-[calc(env(safe-area-inset-bottom)+1rem)]',
+            true: `
+      rounded-b-none pb-[calc(env(safe-area-inset-bottom)+1rem)]
+      desktop-xs:rounded-b-2xl
+    `,
             false: 'pb-4',
         },
         roundedTop: {
-            true: 'rounded-t-lg desktop-xs:rounded-t-2xl',
+            true: `
+      rounded-t-lg
+      desktop-xs:rounded-t-2xl
+    `,
             false: null,
         },
     },
@@ -23,10 +32,10 @@ export class ModalBody {
      */
     roundedTop = false;
     render() {
-        return (h(ThemedHost, { key: '4dd5344c568a1b856dd92e13a982d8c2346f32a9' }, h("div", { key: '755f6e8625cdafc7b2c861e849a0434f6b104a4a', class: body({
+        return (h(ThemedHost, { key: '4f460cc8150f3610e72bdeb18040abe0be4f88a6' }, h("div", { key: '5c6027a2eb2aa2efe427acd5b5ff621c0908a794', class: body({
                 roundedBottom: this.roundedBottom,
                 roundedTop: this.roundedTop,
-            }) }, h("slot", { key: 'a10c0615d4f3246cff520e87a1e82dff4f177aec' }))));
+            }) }, h("slot", { key: 'fbb1db79d47487b2fa20f98f3233fb04fa8c3782' }))));
     }
     static get is() { return "p-modal-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/modal/container/modal-container.component.js

@@ -3,12 +3,15 @@ import { cva } from "class-variance-authority";
 import { ThemedHost } from "../../../../internal/themed-host.component";
 import { asBoolean } from "../../../../utils/as-boolean";
 const container = cva([
-    'flex-1 min-w-0 w-full',
+    'w-full min-w-0 flex-1',
     'z-modal flex flex-col',
-    'rounded-b-none rounded-t-2xl desktop-xs:rounded-b-2xl',
+    `
+    rounded-b-none rounded-t-2xl
+    desktop-xs:rounded-b-2xl
+  `,
     'max-h-[calc(100dvh-4rem)]',
     'shadow-modal',
-    'dark:border-hurricane-400 dark:border dark:border-solid',
+    'dark:border dark:border-solid dark:border-hurricane-400',
 ], {
     variants: {
         size: {
@@ -19,8 +22,14 @@ const container = cva([
             '2xl': 'tablet:max-w-[65rem]',
         },
         closing: {
-            false: 'animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small',
-            true: 'animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small pointer-events-none',
+            false: `
+      animate-slide-in-bottom
+      desktop-xs:animate-slide-in-bottom-small
+    `,
+            true: `
+      pointer-events-none animate-slide-out-bottom
+      desktop-xs:animate-slide-out-bottom-small
+    `,
         },
     },
 });
@@ -34,10 +43,10 @@ export class ModalContainer {
      */
     closing = false;
     render() {
-        return (h(ThemedHost, { key: '918f998bf6ff9f8aa64a323ef7e9208a6205467e' }, h("div", { key: '531c0bc3232ff4f1bb795cc8a9c3c469b5c4a2f7', class: container({
+        return (h(ThemedHost, { key: 'd3989b7b4ba97896e66811db665c689d82b32780' }, h("div", { key: 'cf54c0f6285357f72066f7086cd12c1718c9711a', class: container({
                 size: this.size,
                 closing: asBoolean(this.closing),
-            }) }, h("slot", { key: 'fa2d654b38a33243cc1d437009caee6f262e88a8' }))));
+            }) }, h("slot", { key: '96a7d44c3e1970d6be09f32176eaa47110b775c6' }))));
     }
     static get is() { return "p-modal-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/modal/footer/modal-footer.component.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { ThemedHost } from "../../../../internal/themed-host.component";
 export class ModalFooter {
     render() {
-        return (h(ThemedHost, { key: 'db7731369d6e62f4e6cd9a45d49202c1d9600284' }, h("div", { key: '28bba6b89dcfeaa6d91e295575f8559a82bcb17c', class: 'flex flex-col rounded-b-none bg-white px-4 pb-[calc(env(safe-area-inset-bottom)+1rem)] desktop-xs:rounded-b-2xl dark:bg-hurricane-600' }, h("p-divider", { key: 'd6449db5feef9f6553399b7ca8476fdaa8e38ebe', class: 'mb-4 hidden text-off-white-700 desktop-xs:inline-block dark:text-white/10' }), h("div", { key: 'ad7ba6598fc59911c04089471c03297de2f03c1f', class: 'flex flex-col gap-4 tablet:flex-row' }, h("slot", { key: 'dddec1e9fd3580b37b08b5f988d4f7efae24eeca' })))));
+        return (h(ThemedHost, { key: 'db7731369d6e62f4e6cd9a45d49202c1d9600284' }, h("div", { key: 'a0ef39283aa6a636ccf2e2aed077c5e4b78be0b2', class: '\n       flex flex-col rounded-b-none bg-white px-4\n       pb-[calc(env(safe-area-inset-bottom)+1rem)]\n       desktop-xs:rounded-b-2xl\n       dark:bg-hurricane-600\n     ' }, h("p-divider", { key: '307cc08feaf5555108d153a8b956ced52a24848b', class: '\n        mb-4 hidden text-off-white-700\n        desktop-xs:inline-block\n        dark:text-white/10\n      ' }), h("div", { key: '1e21b3ceb5e1eb58115b3d46c2c36771c8f0842e', class: '\n        flex flex-col gap-4\n        tablet:flex-row\n      ' }, h("slot", { key: 'f383532efab19f9810097b2712c18184b18967a1' })))));
     }
     static get is() { return "p-modal-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/modal/header/modal-header.component.js

@@ -2,15 +2,21 @@ import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
 import { ThemedHost } from "../../../../internal/themed-host.component";
 const header = cva([
-    'w-full flex-col bg-white dark:bg-hurricane-600 relative rounded-t-2xl overflow-hidden z-[1]',
+    `
+   relative z-[1] w-full flex-col overflow-hidden rounded-t-2xl bg-white
+   dark:bg-hurricane-600
+ `,
     'inline-flex aspect-[7/1] max-h-28',
 ]);
-const content = cva(['flex justify-end', 'w-full p-4 pb-0 h-12']);
+const content = cva(['flex justify-end', 'h-12 w-full p-4 pb-0']);
 const title = cva([
     'flex-1 text-center',
     'w-[calc(100%-7rem)]',
-    'absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2',
-    'text-storm-500 dark:text-white text-2xl text-ambit font-bold',
+    'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
+    `
+   text-ambit text-2xl font-bold text-storm-500
+   dark:text-white
+ `,
 ]);
 export class ModalHeader {
     /**
@@ -22,7 +28,7 @@ export class ModalHeader {
      */
     close;
     render() {
-        return (h(ThemedHost, { key: '61310ca15062863fa75788e8621c845829835a83' }, h("div", { key: '45d347c0906fb178470a22ee073f78d2c83a625d', class: header() }, h("div", { key: 'cd7903f26712a92149166a9016f397701c216ee3', class: content() }, h("div", { key: 'e1aa409159b2c19f97682ba5de0ebcdbca799e7a', class: title() }, h("slot", { key: '605016d68fa57dde900543c0cee048f078613fa7' })), this.showClose && (h("p-button", { key: '885ebd89b2f63609e658debad4137df0dfb03b8c', icon: 'negative', iconOnly: true, variant: 'secondary', onClick: ev => this.close.emit(ev) }))), h("p-smile", { key: 'f461107c6a15c7c58e5944b0b19e54ff0ce88305', class: 'dark:text-hurricane-400' }))));
+        return (h(ThemedHost, { key: 'dbb51f33774127b65d699fba9053651fd98509bb' }, h("div", { key: 'b3d864bbf0b006ce7247c282f889c4500bb6c379', class: header() }, h("div", { key: 'd8b71c2d987b85e946b4c49372561290ff1ae54d', class: content() }, h("div", { key: 'acb36bfe313501f90a9f034de27cbcc2909d1256', class: title() }, h("slot", { key: '4a7b12ebae3fbe321a47a9e0e00572b3e2bc01bc' })), this.showClose && (h("p-button", { key: '069df47301c8ce0790ca61d8141f21fcc3191258', icon: 'negative', iconOnly: true, variant: 'secondary', onClick: ev => this.close.emit(ev) }))), h("p-smile", { key: 'ab9cdfc56527962b7414b574fde67dbb4c046f29', class: 'dark:text-hurricane-400' }))));
     }
     static get is() { return "p-modal-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/navigation-title/navigation-title.component.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { ThemedHost } from "../../../internal/themed-host.component";
 export class NavigationTitle {
     render() {
-        return (h(ThemedHost, { key: '8b616d4e4a24357aedf52f2e0b9a8ee6a4e2da0c', class: 'text-xs font-medium text-storm-300 dark:text-hurricane-200' }, h("slot", { key: '47cfce47aa289872078e90d097ab78e1232f9cac' })));
+        return (h(ThemedHost, { key: 'c265a1688d2e50bbd288e93227d5cfd9e37b453f', class: '\n      text-xs font-medium text-storm-300\n      dark:text-hurricane-200\n    ' }, h("slot", { key: 'e274095b3c138155d6370559eb691a77461b647d' })));
     }
     static get is() { return "p-navigation-title"; }
     static get encapsulation() { return "shadow"; }