@paperless/core 3.0.2 → 3.1.1

package/dist/esm/p-modal-body_4.entry.js

@@ -7,14 +7,23 @@ import './state-BJbOyUuL.js';
 
 const modalBodyComponentCss = () => `*{box-sizing:border-box}.static{position:static}.-mt-px{margin-top:-1px}.rounded{border-radius:.25rem}.rounded-b-none{border-bottom-left-radius:0;border-bottom-right-radius:0}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.pb-4{padding-bottom:1rem}.pb-\\[calc\\(env\\(safe-area-inset-bottom\\)\\+1rem\\)\\]{padding-bottom:calc(env(safe-area-inset-bottom) + 1rem)}@media (min-width:64rem){.desktop-xs\\:rounded-b-2xl{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.desktop-xs\\:rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}}.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\\: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))}`;
 
-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,
         },
     },
@@ -32,10 +41,10 @@ const ModalBody = class {
      */
     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' }))));
     }
 };
 ModalBody.style = modalBodyComponentCss();
@@ -43,12 +52,15 @@ ModalBody.style = modalBodyComponentCss();
 const modalContainerComponentCss = () => `.flex{display:flex}.w-full{width:100%}.justify-center{justify-content:center}*{box-sizing:border-box}:host{display:flex;justify-content:center;width:100%}@media (min-width:64rem){:host{margin:auto}}.pointer-events-none{pointer-events:none}.static{position:static}.z-modal{z-index:600}.max-h-\\[calc\\(100dvh-4rem\\)\\]{max-height:calc(100dvh - 4rem)}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.animate-slide-in-bottom{animation:slideInBottom .5s ease forwards}@keyframes slideOutBottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.animate-slide-out-bottom{animation:slideOutBottom .5s ease forwards}.flex-col{flex-direction:column}.rounded-b-none{border-bottom-left-radius:0;border-bottom-right-radius:0}.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}.shadow-modal{--tw-shadow:0 0 0 1px rgba(0,2,2,.1),0 1px 1px 0 rgba(0,2,2,.2),0 2px 2px 0 rgba(0,2,2,.08),0 4px 4px 0 rgba(0,2,2,.08),0 8px 8px 0 rgba(0,2,2,.08);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color),0 1px 1px 0 var(--tw-shadow-color),0 2px 2px 0 var(--tw-shadow-color),0 4px 4px 0 var(--tw-shadow-color),0 8px 8px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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}}@media (min-width:40rem){.tablet\\:max-w-\\[20rem\\]{max-width:20rem}.tablet\\:max-w-\\[35rem\\]{max-width:35rem}.tablet\\:max-w-\\[41rem\\]{max-width:41rem}.tablet\\:max-w-\\[45rem\\]{max-width:45rem}.tablet\\:max-w-\\[65rem\\]{max-width:65rem}}@media (min-width:64rem){@keyframes slideInBottomSmall{0%{transform:translateY(20%)}to{transform:translateY(0)}}.desktop-xs\\:animate-slide-in-bottom-small{animation:slideInBottomSmall .5s ease forwards}@keyframes slideOutBottomSmall{0%{transform:translateY(0)}to{transform:translateY(20%)}}.desktop-xs\\:animate-slide-out-bottom-small{animation:slideOutBottomSmall .5s ease forwards}.desktop-xs\\:rounded-b-2xl{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}}.dark\\:border:where(:host([data-theme=dark]),:host([data-theme=dark]) *){border-width:1px}.dark\\:border-solid:where(:host([data-theme=dark]),:host([data-theme=dark]) *){border-style:solid}.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:where([data-theme=dark],[data-theme=dark] *){border-width:1px}.dark\\:border-solid:where([data-theme=dark],[data-theme=dark] *){border-style:solid}.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))}`;
 
 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: {
@@ -59,8 +71,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
+    `,
         },
     },
 });
@@ -77,10 +95,10 @@ const ModalContainer = class {
      */
     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' }))));
     }
 };
 ModalContainer.style = modalContainerComponentCss();
@@ -92,7 +110,7 @@ const ModalFooter = class {
         registerInstance(this, hostRef);
     }
     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' })))));
     }
 };
 ModalFooter.style = modalFooterComponentCss();
@@ -100,15 +118,21 @@ ModalFooter.style = modalFooterComponentCss();
 const modalHeaderComponentCss = () => `*{box-sizing:border-box}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.z-\\[1\\]{z-index:1}.flex{display:flex}.inline-flex{display:inline-flex}.aspect-\\[7\\/1\\]{aspect-ratio:7/1}.h-12{height:3rem}.max-h-28{max-height:7rem}.w-\\[calc\\(100\\%-7rem\\)\\]{width:calc(100% - 7rem)}.w-full{width:100%}.flex-1{flex:1 1 0%}.-translate-x-1\\/2{--tw-translate-x:-50%}.-translate-x-1\\/2,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%}.flex-col{flex-direction:column}.justify-end{justify-content:flex-end}.overflow-hidden{overflow:hidden}.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.pb-0{padding-bottom:0}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-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-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\\: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-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))}`;
 
 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
+ `,
 ]);
 const ModalHeader = class {
     constructor(hostRef) {
@@ -124,7 +148,7 @@ const ModalHeader = class {
      */
     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' }))));
     }
 };
 ModalHeader.style = modalHeaderComponentCss();

package/dist/esm/p-navbar.entry.js

@@ -8,19 +8,31 @@ const navbarComponentCss = () => `.w-full{width:100%}.max-h-screen-safe{max-heig
 
 const sidebarAndTopbar = cva([
     'transition',
-    'bg-off-white-300 dark:bg-hurricane-800',
-    'border-0 border-solid border-off-white-700 dark:border-hurricane-500',
+    `
+   bg-off-white-300
+   dark:bg-hurricane-800
+ `,
+    `
+   border-0 border-solid border-off-white-700
+   dark:border-hurricane-500
+ `,
     'p-4',
 ]);
 const sidebar = cva([
     'flex flex-col',
     'fixed left-0 top-0 z-navbar h-screen w-60',
     'w-full max-w-[16.5rem]',
-    'layout-1280:relative layout-1280:z-0 layout-1280:max-w-none layout-1280:h-full',
+    `
+    layout-1280:relative layout-1280:z-0 layout-1280:h-full
+    layout-1280:max-w-none
+  `,
     'gap-6',
     'transition-all',
     'will-change-transform',
-    '-translate-x-full transform-gpu layout-1280:translate-x-0',
+    `
+    -translate-x-full transform-gpu
+    layout-1280:translate-x-0
+  `,
     'border-r',
     'safe-sidebar',
 ], {
@@ -32,16 +44,21 @@ const sidebar = cva([
     },
 });
 const topbar = cva([
-    'flex w-full justify-between items-center',
+    'flex w-full items-center justify-between',
     'relative z-navbar-topbar',
     'border-b',
     'layout-1280:hidden',
     'safe-topbar',
 ]);
-const backdrop = cva(['z-navbar-backdrop layout-1280:hidden transition-opacity relative'], {
+const backdrop = cva([
+    `
+    relative z-navbar-backdrop transition-opacity
+    layout-1280:hidden
+  `,
+], {
     variants: {
         show: {
-            false: 'opacity-0 pointer-events-none',
+            false: 'pointer-events-none opacity-0',
             true: 'opacity-100',
         },
     },
@@ -52,7 +69,7 @@ const Navbar = class {
     }
     _show = false;
     render() {
-        return (h(ThemedHost, { key: 'ee599d3472ef0a332d17353d8e7f559e36d5529b' }, h("p-backdrop", { key: 'aa5b71247881e2a23998bab23f194ff6f58a6662', class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), h("div", { key: '121da670f6b7dbbfbce4a018c56b56ac1352c212', class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, h("div", { key: 'e789b6c904b4715c271e03324d8e8643acd5d8a8', class: 'flex w-full items-center justify-end layout-1280:hidden' }, h("p-button", { key: '9d6f49157fc731f91ff34bc7e37aebe40c5d0612', icon: 'menu-arrow', iconFlip: 'horizontal', iconOnly: true, variant: 'secondary', onClick: () => (this._show = false) })), h("div", { key: 'c88909335eed7df5a93b32a65d24b1a8ff2a3f19', class: 'flex w-full flex-shrink-0 flex-col items-stretch' }, h("slot", { key: 'e09b2eaefb99e51502f3629c377728d298b0e8d9', name: 'company' })), h("div", { key: '2ce82f037a53e8529d834958812d74f3cdd25ef2', class: 'flex w-full flex-1 flex-col gap-6 overflow-y-auto' }, h("slot", { key: 'eaf615dd6f9d5b8fb260fe5a10c43b1e0b6f52c0', name: 'content' })), h("div", { key: '9b8bedc34ab2bcbe8935426007b6fd8c2d33c177', class: 'mt-auto hidden w-full flex-shrink-0 flex-col layout-1280:flex' }, h("slot", { key: '7a4889a2554cad25f9e8be122863fb5c2783376d', name: 'user' }))), h("div", { key: 'e9d88767781757f7fc81c772fbe750a15a03fa6c', class: topbar({ class: sidebarAndTopbar() }) }, h("p-button", { key: '3517c55339958c4461f20b190c220358658a71cf', icon: 'menu-arrow', iconOnly: true, variant: 'secondary', onClick: () => (this._show = true) }), h("slot", { key: 'b89f63dfbeba643e3f46f72e6862944ba75f1213', name: 'topbar' }))));
+        return (h(ThemedHost, { key: 'e6140399cd45343a3e16a6418539f30a7bc06405' }, h("p-backdrop", { key: '24fc4cdca947a947105591e25fbc6f7682f64ed4', class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), h("div", { key: '0b9691b00c84c4639860f40343316b1d42b53b26', class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, h("div", { key: 'b9fff9390b8d735b0ea792cdc289c103aa3aa350', class: '\n        flex w-full items-center justify-end\n        layout-1280:hidden\n      ' }, h("p-button", { key: 'a13c500530dc614c56f84afa0a761d1d99abacfa', icon: 'menu-arrow', iconFlip: 'horizontal', iconOnly: true, variant: 'secondary', onClick: () => (this._show = false) })), h("div", { key: 'c8ee2b2c29bd01d741549a3afca9e06636c0cd3b', class: 'flex w-full flex-shrink-0 flex-col items-stretch' }, h("slot", { key: '0824da3fcf5e35ff166e54ce95c917142a4bde94', name: 'company' })), h("div", { key: '0ba905bfbf5f3a23a0f79d560790d91f34040ef7', class: 'flex w-full flex-1 flex-col gap-6 overflow-y-auto' }, h("slot", { key: '27be57ecd655d89fa8c2576321fc4d10f2008717', name: 'content' })), h("div", { key: '5ed6652b93d0ca2e567a2f611a667b20c15faab6', class: '\n        mt-auto hidden w-full flex-shrink-0 flex-col\n        layout-1280:flex\n      ' }, h("slot", { key: 'b8152c3081703b2e88ac25b45e40c767407fd947', name: 'user' }))), h("div", { key: '51bc9f577cc3edb1d676a4740476359625efd6d3', class: topbar({ class: sidebarAndTopbar() }) }, h("p-button", { key: '22dbff73b42867f98d11a7e4f4319f98f62d37ac', icon: 'menu-arrow', iconOnly: true, variant: 'secondary', onClick: () => (this._show = true) }), h("slot", { key: '717fb0a04a59f535d0b53dc91457393cadf014dc', name: 'topbar' }))));
     }
     handleCloseNavbar() {
         this._show = false;

package/dist/esm/p-navigation-item.entry.js

@@ -11,20 +11,32 @@ const navigationItemComponentCss = () => `*.sc-p-navigation-item{box-sizing:bord
 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: {
@@ -33,7 +45,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,
@@ -84,13 +96,13 @@ const NavigationItem = class {
     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' }))));
     }
 };
 NavigationItem.style = navigationItemComponentCss();

package/dist/esm/p-navigation-title.entry.js

@@ -9,7 +9,7 @@ const NavigationTitle = class {
         registerInstance(this, hostRef);
     }
     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' })));
     }
 };
 NavigationTitle.style = navigationTitleComponentCss();

package/dist/esm/p-pagination_3.entry.js

@@ -15,8 +15,8 @@ const pagination$1 = 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: {
@@ -81,7 +81,7 @@ const Pagination = class {
                     (!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);
             } })))));
@@ -98,7 +98,7 @@ Pagination.style = paginationComponentCss();
 
 const paginationPagesComponentCss = () => `*{box-sizing:border-box}.static{position:static}.mt-2{margin-top:.5rem}.flex{display:flex}.hidden{display:none}.w-28{width:7rem}.items-center{align-items:center}.gap-2{gap:.5rem}`;
 
-const pagination = cva(['p-pagination', 'flex gap-2 items-center'], {
+const pagination = cva(['p-pagination', 'flex items-center gap-2'], {
     variants: {
         hidden: {
             false: 'flex',
@@ -380,20 +380,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',
             ],
         },
@@ -438,18 +444,18 @@ const PaginationSize = class {
         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/esm/p-profile.entry.js

@@ -6,7 +6,7 @@ import './state-BJbOyUuL.js';
 
 const profileComponentCss = () => `*{box-sizing:border-box}.static{position:static}.absolute{position:absolute}.my-0{margin-bottom:0;margin-top:0}.flex{display:flex}.h-10{height:2.5rem}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-storm-400{--tw-text-opacity:1;color:rgb(70 75 84/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 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',
@@ -47,7 +47,7 @@ const Profile = class {
     _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/esm/p-radio.entry.js

@@ -9,24 +9,42 @@ import './state-BJbOyUuL.js';
 const radioComponentCss = () => `*{box-sizing:border-box}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.m-0{margin:0}.block{display:block}.flex{display:flex}.h-2{height:.5rem}.h-4{height:1rem}.w-2{width:.5rem}.w-4{width:1rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-1\\/2{--tw-translate-x:-50%}.-translate-x-1\\/2,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.items-center{align-items:center}.justify-start{justify-content:flex-start}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-solid{border-style:solid}.border-storm-100{--tw-border-opacity:1;border-color:rgb(209 210 212/var(--tw-border-opacity,1))}.border-storm-50{--tw-border-opacity:1;border-color:rgb(232 232 234/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))}.shadow-1{--tw-shadow:0 1px 1px rgba(0,2,2,.08);--tw-shadow-colored:0 1px 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.checked\\:cursor-auto:checked{cursor:auto}.checked\\:border-storm-500\\/20:checked{border-color:rgba(24,30,41,.2)}.checked\\:bg-indigo-600:checked{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))}.checked\\:ring-2:checked{--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(2px + 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)}.checked\\:ring-indigo-100:checked{--tw-ring-opacity:1;--tw-ring-color:rgb(227 236 254/var(--tw-ring-opacity,1))}.empty\\:hidden:empty{display:none}.hover\\:border-storm-500\\/20:hover{border-color:rgba(24,30,41,.2)}.hover\\:bg-indigo-100:hover{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))}.checked\\:hover\\:border-storm-500\\/20:hover:checked{border-color:rgba(24,30,41,.2)}.checked\\:hover\\:bg-indigo-700:hover:checked{--tw-bg-opacity:1;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))}.group\\/radio-label:hover .group-hover\\/radio-label\\:border-storm-500\\/20{border-color:rgba(24,30,41,.2)}.group\\/radio-label:hover .group-hover\\/radio-label\\:bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))}.group\\/radio-label:hover .checked\\:group-hover\\/radio-label\\:border-storm-500\\/20:checked{border-color:rgba(24,30,41,.2)}.group\\/radio-label:hover .checked\\:group-hover\\/radio-label\\:bg-indigo-700:checked{--tw-bg-opacity:1;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))}.peer:checked~.peer-checked\\:bg-storm-200{--tw-bg-opacity:1;background-color:rgb(163 165 169/var(--tw-bg-opacity,1))}.peer:checked~.peer-checked\\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.peer:checked~.peer-checked\\:ring-1{--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(1px + 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)}.peer:checked~.peer-checked\\:ring-storm-500\\/10{--tw-ring-color:rgba(24,30,41,.1)}.dark\\:border-white\\/10:where(:host([data-theme=dark]),:host([data-theme=dark]) *){border-color:hsla(0,0%,100%,.1)}.dark\\:border-white\\/15:where(:host([data-theme=dark]),:host([data-theme=dark]) *){border-color:hsla(0,0%,100%,.15)}.dark\\:bg-white\\/10:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:hsla(0,0%,100%,.1)}.dark\\:bg-white\\/5:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:hsla(0,0%,100%,.05)}.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\\:checked\\:ring-0:checked: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\\:hover\\:border-white\\/15:hover:where(:host([data-theme=dark]),:host([data-theme=dark]) *){border-color:hsla(0,0%,100%,.15)}.dark\\:hover\\:bg-white\\/20:hover:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:hsla(0,0%,100%,.2)}.peer:checked~.dark\\:peer-checked\\:bg-hurricane-300:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1;background-color:rgb(116 120 127/var(--tw-bg-opacity,1))}.dark\\:border-white\\/10:where([data-theme=dark],[data-theme=dark] *){border-color:hsla(0,0%,100%,.1)}.dark\\:border-white\\/15:where([data-theme=dark],[data-theme=dark] *){border-color:hsla(0,0%,100%,.15)}.dark\\:bg-white\\/10:where([data-theme=dark],[data-theme=dark] *){background-color:hsla(0,0%,100%,.1)}.dark\\:bg-white\\/5:where([data-theme=dark],[data-theme=dark] *){background-color:hsla(0,0%,100%,.05)}.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\\:checked\\:ring-0:checked: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\\:hover\\:border-white\\/15:hover:where([data-theme=dark],[data-theme=dark] *){border-color:hsla(0,0%,100%,.15)}.dark\\:hover\\:bg-white\\/20:hover:where([data-theme=dark],[data-theme=dark] *){background-color:hsla(0,0%,100%,.2)}.peer:checked~.dark\\:peer-checked\\:bg-hurricane-300:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1;background-color:rgb(116 120 127/var(--tw-bg-opacity,1))}`;
 
 const radio = cva([
-    'peer appearance-none m-0 outline-none flex-shrink-0',
-    'rounded-full border border-inset border-solid ',
-    'w-4 h-4',
+    'peer m-0 flex-shrink-0 appearance-none outline-none',
+    'border-inset rounded-full border border-solid',
+    'h-4 w-4',
 ], {
     variants: {
         disabled: {
             false: [
                 'cursor-pointer shadow-1',
-                'bg-white border-storm-100 dark:bg-white/10 dark:border-white/15',
-                'hover:bg-indigo-100 hover:border-storm-500/20 dark:hover:bg-white/20 dark:hover:border-white/15',
-                'group-hover/radio-label:bg-indigo-100 group-hover/radio-label:border-storm-500/20',
+                `
+       border-storm-100 bg-white
+       dark:border-white/15 dark:bg-white/10
+     `,
+                `
+       hover:border-storm-500/20 hover:bg-indigo-100
+       dark:hover:border-white/15 dark:hover:bg-white/20
+     `,
+                `
+       group-hover/radio-label:border-storm-500/20
+       group-hover/radio-label:bg-indigo-100
+     `,
                 'checked:cursor-auto',
-                'checked:bg-indigo-600 checked:border-storm-500/20',
-                'checked:ring-2 checked:ring-indigo-100 dark:checked:ring-0',
-                'checked:hover:bg-indigo-700 checked:hover:border-storm-500/20',
-                'checked:group-hover/radio-label:bg-indigo-700 checked:group-hover/radio-label:border-storm-500/20',
+                'checked:border-storm-500/20 checked:bg-indigo-600',
+                `
+       checked:ring-2 checked:ring-indigo-100
+       dark:checked:ring-0
+     `,
+                'checked:hover:border-storm-500/20 checked:hover:bg-indigo-700',
+                `
+       checked:group-hover/radio-label:border-storm-500/20
+       checked:group-hover/radio-label:bg-indigo-700
+     `,
             ],
-            true: 'bg-white-600 border-storm-50 cursor-not-allowed dark:bg-white/5 dark:border-white/10',
+            true: `
+      cursor-not-allowed border-storm-50 bg-white-600
+      dark:border-white/10 dark:bg-white/5
+    `,
         },
     },
     compoundVariants: [
@@ -34,9 +52,12 @@ const radio = cva([
             disabled: false,
             class: [
                 'cursor-pointer shadow-1',
-                'bg-white border-storm-100',
-                'hover:bg-indigo-100 hover:border-storm-500/20',
-                'group-hover/radio-label:bg-indigo-100 group-hover/radio-label:border-storm-500/20',
+                'border-storm-100 bg-white',
+                'hover:border-storm-500/20 hover:bg-indigo-100',
+                `
+       group-hover/radio-label:border-storm-500/20
+       group-hover/radio-label:bg-indigo-100
+     `,
             ],
         },
     ],
@@ -44,13 +65,19 @@ const radio = cva([
 const circle = cva([
     'block',
     'rounded-full bg-transparent',
-    'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none',
-    'w-2 h-2',
+    `
+    pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2
+    -translate-y-1/2 transform
+  `,
+    'h-2 w-2',
 ], {
     variants: {
         disabled: {
             false: 'peer-checked:bg-white peer-checked:ring-1 peer-checked:ring-storm-500/10',
-            true: 'peer-checked:bg-storm-200 dark:peer-checked:bg-hurricane-300',
+            true: `
+      peer-checked:bg-storm-200
+      dark:peer-checked:bg-hurricane-300
+    `,
         },
     },
 });
@@ -107,11 +134,11 @@ const Radio = class {
     }
     render() {
         const id = this.id?.length ? this.id : this._nonce;
-        return (h(ThemedHost, { key: '6c93ef349dcabcef38658f27359a441fd4cd3813' }, h("label", { key: '291d100b75f53e0b26ed7684329ab8b47c67d89d', class: 'flex items-center justify-start gap-2', htmlFor: id }, h("div", { key: '0db6d40c88eb7e38d49a7b00c51a9527bcb07919', class: 'relative flex flex-shrink-0 items-center' }, h("input", { key: 'c37a2ca4f67b57fb6fe4c5db31f047928eed1e70', checked: this.checked, class: radio({
+        return (h(ThemedHost, { key: '6d6c70b28586db5068f33308fff1c3a35bce641c' }, h("label", { key: 'd6741f15e337174a3576163e6b27b65dd54773f4', class: 'flex items-center justify-start gap-2', htmlFor: id }, h("div", { key: 'c82520956d1f16cc1a7b6740ab4e03299d5f2039', class: 'relative flex flex-shrink-0 items-center' }, h("input", { key: '80a7c6b02ff323e646a739cfcfee1652f2ec4df2', checked: this.checked, class: radio({
                 disabled: asBoolean(this.disabled),
-            }), disabled: asBoolean(this.disabled), id: id, name: this.name, required: this.required, type: 'radio', value: this.value, onChange: ev => this._onChange(ev) }), h("div", { key: 'f062fa8dba4c876a5cce25d5777bf11ae936764a', class: circle({
+            }), disabled: asBoolean(this.disabled), id: id, name: this.name, required: this.required, type: 'radio', value: this.value, onChange: ev => this._onChange(ev) }), h("div", { key: 'a46921d80daadde9058060754c65b11d17b47b71', class: circle({
                 disabled: asBoolean(this.disabled),
-            }) })), h("div", { key: '90340477396fd987eabbe4cc7aeebb38a548ec68', class: 'flex-1 overflow-hidden text-ellipsis empty:hidden dark:text-white' }, h("slot", { key: 'b66d366cac0e5c99903edc18f4256c045d3a5b10' })))));
+            }) })), h("div", { key: 'cd295853a620d74ece3521b96daac11a871cad1d', class: '\n        flex-1 overflow-hidden text-ellipsis\n        empty:hidden\n        dark:text-white\n      ' }, h("slot", { key: '7775f245e2652c7b010c34d52376908f2b4a2f99' })))));
     }
     _onChange(ev) {
         if (asBoolean(this.disabled)) {

package/dist/esm/p-range.entry.js

@@ -31,13 +31,13 @@ const Range = class {
     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' }))));
     }
 };
 Range.style = rangeComponentCss();