@paperless/core 2.0.1-beta.20 → 2.0.1-beta.21

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

@@ -16,7 +16,7 @@ const ModalBody = class {
         this.padding = true;
     }
     render() {
-        return (index.h(index.Host, { key: '1b4a6fedbf81cd30f7842fe48878ccae7c0cbb70', class: `p-modal-body variant-${this.variant} ${this.roundedBottom && 'is-rounded-bottom'} ${this.roundedTop && 'is-rounded-top'} ${!this.padding && 'no-padding'}` }, index.h("slot", { key: '714bb76978da28bea87512fa36bd5b428ea2b31b' })));
+        return (index.h(index.Host, { key: 'd0b735c1c6aca053bb2d9b36f66dc8c3e6fe42da', class: `p-modal-body variant-${this.variant} ${this.roundedBottom && 'is-rounded-bottom'} ${this.roundedTop && 'is-rounded-top'} ${!this.padding && 'no-padding'}` }, index.h("slot", { key: '2278b56bf9810ec13f90b8f14ae5167d26442e2f' })));
     }
 };
 ModalBody.style = PModalBodyStyle0;
@@ -44,7 +44,7 @@ const ModalContainer = class {
     }
     render() {
         const sizeClass = modalSizes[this.size];
-        return (index.h(index.Host, { key: '43ff28201d70459575d8b37faae58aa8a992767a', class: `p-modal-container ${this.closing && 'closing'} ${sizeClass}` }, index.h("slot", { key: 'f44bb8738283f4f6143d4b45f7108340b6deef0b' })));
+        return (index.h(index.Host, { key: 'f8c36d282ba3b1f4265bad93d5facdeac272726f', class: `p-modal-container ${this.closing && 'closing'} ${sizeClass}` }, index.h("slot", { key: 'f70d967878d24e66e1bb41ef63690a1a6aa702e8' })));
     }
 };
 ModalContainer.style = PModalContainerStyle0;
@@ -57,7 +57,7 @@ const ModalFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '01439496d0b4b238b8fdfffbf5c9fdf3088858ae', class: "p-modal-footer" }, index.h("p-divider", { key: 'e7dc4fc0c16827f73af2f331faf0ab54cb740f21', class: "mb-6 mt-0 hidden desktop-xs:flex" }), index.h("slot", { key: '8e3f0ddb9ff38562411e59868719dc7c3c8e51e0' })));
+        return (index.h(index.Host, { key: '8b95e0bc8927f933dbde6532cfe674c3b795d91d', class: "p-modal-footer" }, index.h("p-divider", { key: '44924282dcfa7271edb5468db39568bc9a348f6d', class: "mb-6 mt-0 hidden desktop-xs:flex" }), index.h("slot", { key: 'b09dc0f60512eb72456fa7e3837487f16086ae10' })));
     }
 };
 ModalFooter.style = PModalFooterStyle0;
@@ -76,7 +76,7 @@ const ModalHeader = class {
      */
     close;
     render() {
-        return (index.h(index.Host, { key: '15d09e0835c1ac62e23d1da6fa59042505e8e287', class: 'p-modal-header' }, index.h("span", { key: 'fe40f919874acd070ebcecaff47b80bd6f6889b7' }, index.h("slot", { key: 'cd118fa1054845af4c98e9f6779a796a35965ed2' })), this.showClose && (index.h("p-button", { key: '9d3c23704087e67a8e8e036532dc541b3bd2e022', variant: 'secondary', icon: 'negative', iconOnly: true, onClick: ev => this.close.emit(ev), size: 'sm' }))));
+        return (index.h(index.Host, { key: '420214cfdb2dd596f7538048593025801122a7b3', class: 'p-modal-header' }, index.h("span", { key: '10f405e910552ccf368a7ce1ab0799ac193199c8' }, index.h("slot", { key: '916197272fc2f43bd87f7c97bd36a0b94d304892' })), this.showClose && (index.h("p-button", { key: 'bfdcec4df0c865693d8d9cc35a8556408447f76e', variant: 'secondary', icon: 'negative', iconOnly: true, onClick: ev => this.close.emit(ev), size: 'sm' }))));
     }
 };
 ModalHeader.style = PModalHeaderStyle0;

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

@@ -54,7 +54,7 @@ const Navbar = class {
         this._show = false;
     }
     render() {
-        return (index.h(index.Host, { key: '7f038a3c0ec76e24feec7e1cba133a18c68278f1', class: 'p-navbar w-full max-h-screen-safe layout-1280:w-60 layout-1680:w-72' }, index.h("p-backdrop", { key: '1c534d08af4851b7c775ed4ec931e1ef68748669', class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), index.h("div", { key: '8bf242613c6704586eedb15b3576f2c531706b47', class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, index.h("div", { key: '39aa317a7af6f0afb6fa827295797435db4968fa', class: 'flex w-full items-center justify-between layout-1280:hidden' }, index.h("p-button", { key: '2484d018cbc1aca11c00ae0621aa50172e89b940', variant: 'secondary', icon: 'menu-arrow', iconFlip: 'horizontal', iconOnly: true, size: 'sm', onClick: () => (this._show = false) })), index.h("div", { key: '6e1dc7fde01decb77fe83efa5b99e26a2bdcad48', class: 'flex w-full flex-col items-stretch' }, index.h("slot", { key: '51cd568fd5c5637761317944af974d9bf140c78c', name: 'company' })), index.h("div", { key: '44e4c7602fe5a188f9b02089b917e0c769e4addd', class: 'flex w-full flex-col gap-6 overflow-y-auto' }, index.h("slot", { key: 'fe84a1f8a0e35b5a261d858c22135a761dc26735', name: 'content' })), index.h("div", { key: '2e788343efbfc6d0481d5f0449bc69c72c7dabc3', class: 'mt-auto hidden w-full flex-col layout-1280:flex' }, index.h("slot", { key: '070e9aaea6502c2f9ac92e5738e5a021e2923bb8', name: 'user' }))), index.h("div", { key: '5b31449262ebad9a900f80288eda91a1ecb3f658', class: topbar({ class: sidebarAndTopbar() }) }, index.h("p-button", { key: 'fb68bb0b590da2096d2721e27c016eeae53d6a3c', variant: 'secondary', iconOnly: true, icon: 'menu-arrow', size: 'sm', onClick: () => (this._show = true) }), index.h("slot", { key: '629a33f6522b2f8dd3c33119cd87eab80bc837ae', name: 'topbar' }))));
+        return (index.h(index.Host, { key: 'd0fb08c272ed8209ba4b4eeb0e84db3af7f56b6c', class: 'p-navbar w-full max-h-screen-safe layout-1280:w-60 layout-1680:w-72' }, index.h("p-backdrop", { key: '03c3f5a31cdb369c0fc9e2e2758c6124f8874323', class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), index.h("div", { key: 'e436eb63373ce0460d04c1e6bf9d2a6d5dd77a22', class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, index.h("div", { key: '5cc267234e3f93766244c241c896004f0312e7ab', class: 'flex w-full items-center justify-between layout-1280:hidden' }, index.h("p-button", { key: 'a1cf06f679fe209a5d9fee1e3f59e4ab1e2b3628', variant: 'secondary', icon: 'menu-arrow', iconFlip: 'horizontal', iconOnly: true, size: 'sm', onClick: () => (this._show = false) })), index.h("div", { key: '3c2bc5439cfb75cc9d3134f987dc80ebd3971298', class: 'flex w-full flex-col items-stretch' }, index.h("slot", { key: '9fc8ab5a7648ee33fe8fd7aeadcc6f612b636971', name: 'company' })), index.h("div", { key: 'b7be3f50a653bb6ec6b175a0d5391555689f7b5d', class: 'flex w-full flex-col gap-6 overflow-y-auto' }, index.h("slot", { key: '941a9dea07c2270d9ccea702ed1bce4af6dda0a7', name: 'content' })), index.h("div", { key: 'd104fa1db346b0f6fcd09d55ba3d2cb474a725f2', class: 'mt-auto hidden w-full flex-col layout-1280:flex' }, index.h("slot", { key: 'a20c417a192f6ec4c5eef06fe12118270fd299ac', name: 'user' }))), index.h("div", { key: '3a1d9b69bde033789e2e420e49f8702b8a0c92bf', class: topbar({ class: sidebarAndTopbar() }) }, index.h("p-button", { key: 'bbb50411a3ce918bfbd33f1bacfc14a053f7d118', variant: 'secondary', iconOnly: true, icon: 'menu-arrow', size: 'sm', onClick: () => (this._show = true) }), index.h("slot", { key: 'a931c9bc1a090b004788693f2fea96d76d2c43bd', name: 'topbar' }))));
     }
     handleCloseNavbar() {
         this._show = false;

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

@@ -7,7 +7,7 @@ const index$1 = require('./index-b556e70f.js');
 const cn = require('./cn-b70f9965.js');
 require('./clsx-fc789adc.js');
 
-const navigationItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.aspect-branding{aspect-ratio:23/24!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-\\[inherit\\]{width:inherit!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.rounded-lg{border-radius:.5rem!important}.bg-off-white-600{--tw-bg-opacity:1!important;background-color:rgb(236 234 229/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.pl-1{padding-left:.25rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.font-semibold{font-weight:600!important}.text-black-teal-400{--tw-text-opacity:1!important;color:rgb(53 85 80/var(--tw-text-opacity,1))!important}.text-black-teal-500{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.hover\\:bg-off-white:hover{--tw-bg-opacity:1!important;background-color:rgb(243 241 237/var(--tw-bg-opacity,1))!important}.hover\\:text-black-teal-500:hover{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}";
+const navigationItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.ml-auto{margin-left:auto!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.aspect-branding{aspect-ratio:23/24!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-\\[inherit\\]{width:inherit!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.rounded-lg{border-radius:.5rem!important}.bg-off-white-600{--tw-bg-opacity:1!important;background-color:rgb(236 234 229/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.pl-1{padding-left:.25rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.font-semibold{font-weight:600!important}.text-black-teal-400{--tw-text-opacity:1!important;color:rgb(53 85 80/var(--tw-text-opacity,1))!important}.text-black-teal-500{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.hover\\:bg-off-white:hover{--tw-bg-opacity:1!important;background-color:rgb(243 241 237/var(--tw-bg-opacity,1))!important}.hover\\:text-black-teal-500:hover{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}";
 const PNavigationItemStyle0 = navigationItemComponentCss;
 
 const navigationItem = index$1.cva([
@@ -43,6 +43,7 @@ const NavigationItem = class {
         index.registerInstance(this, hostRef);
         this.icon = undefined;
         this.active = false;
+        this.loading = false;
         this.as = 'a';
         this.counter = undefined;
         this.href = undefined;
@@ -52,10 +53,10 @@ const NavigationItem = class {
     render() {
         const TagType = this.as;
         const active = this.active || this.class?.includes('active');
-        return (index.h(index.Host, { key: '5d7a9016cd51653a7efc94aec1acb1dec95c1576', class: cn.cn('p-navigation-item inline-block', this.class) }, index.h(TagType, { key: '7e53d93d45d3620808a01cc4119c8ef1fcd58a8f', class: navigationItem({
+        return (index.h(index.Host, { key: 'd87d8e76973078637e8c2d184b495d630f4fd556', class: cn.cn('p-navigation-item inline-block', this.class) }, index.h(TagType, { key: 'db37312225ef973cb75c71b0b0b918ed2f8799c3', class: navigationItem({
                 icon: !!this.icon,
                 active,
-            }), href: this.href, target: this.target }, index.h("div", { key: 'eb652010934dd9863080e98d7715d088d7a30349', class: navigationItemIconContainer({ active }) }, index.h("p-icon", { key: '3b7b58d4c5b1af285ab66d06ca8ef388fe1d7032', variant: this.icon })), index.h("span", { key: '840d600c6a1d34872ba1437b38ba38a3f1cb08df', class: this.counter && 'has-counter' }, index.h("slot", { key: '6f6e3f814e0970d762f6c46991ec9f6634c73e7c' })), !!this.counter && this.counter !== '0' && (index.h("p-badge", { key: 'efbdb0e66ef6cc254ba6533e3bbc6a5225fbe894' }, this.counter)))));
+            }), href: this.href, target: this.target }, index.h("div", { key: '5f56c4395729260e25e6a71da5ac716b09193bd5', class: navigationItemIconContainer({ active }) }, index.h("p-icon", { key: '0cc4e9b0f0cdf1ad574ef8ba5b8b80f3ce376d3f', variant: this.icon })), index.h("span", { key: 'a52984e8227ec3af005d1b240944ff85ba58a37e', class: this.counter && 'has-counter' }, index.h("slot", { key: 'eaa1a3e88f0d7517fc383d96fae3194522e4efb1' })), !!this.counter && this.counter !== '0' && (index.h("p-badge", { key: 'eb7b69d6235d7f1c72ca1045255d70764a9b179d' }, this.counter)), !!this.loading && index.h("p-loader", { key: '081c5f8b49dfb3a80429815de87f717cd70e39ae', class: 'ml-auto' }))));
     }
 };
 NavigationItem.style = PNavigationItemStyle0;

package/dist/cjs/p-navigation-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"p-navigation-item.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,0BAA0B,GAAG,i/CAAi/C,CAAC;AACrhD,8BAAe,0BAA0B;;ACIzC,MAAM,cAAc,GAAGA,WAAG,CACzB;IACC,iBAAiB;IACjB,yBAAyB;IACzB,+CAA+C;IAC/C,YAAY;IACZ,WAAW;IACX,qBAAqB;IACrB,gBAAgB;CAChB,EACD;IACC,QAAQ,EAAE;QACT,MAAM,EAAE;YACP,KAAK,EAAE,CAAC,oBAAoB,CAAC;YAC7B,IAAI,EAAE,CAAC,oDAAoD,CAAC;SAC5D;QACD,IAAI,EAAE;YACL,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,CAAC,MAAM,CAAC;SACd;KACD;CACD,CACD,CAAC;AAEF,MAAM,2BAA2B,GAAGA,WAAG,CACtC,CAAC,mEAAmE,CAAC,EACrE;IACC,QAAQ,EAAE;QACT,MAAM,EAAE;YACP,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,CAAC,qBAAqB,CAAC;SAC7B;KACD;CACD,CACD,CAAC;MAOW,cAAc;;;;sBASA,KAAK;kBAKV,GAAG;;;;;;IAsBxB,MAAM;QACL,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC;QAExB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAE7D,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAEC,KAAE,CAAC,gCAAgC,EAAE,IAAI,CAAC,KAAK,CAAC,IAC5DF,QAAC,OAAO,qDACP,KAAK,EAAE,cAAc,CAAC;gBACrB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;gBACjB,MAAM;aACN,CAAC,EACF,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnBA,kEAAK,KAAK,EAAE,2BAA2B,CAAC,EAAE,MAAM,EAAE,CAAC,IAClDA,qEAAQ,OAAO,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,EAENA,mEAAM,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,aAAa,IACzCA,oEAAQ,CACF,EAEN,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,GAAG,KACtCA,wEAAU,IAAI,CAAC,OAAO,CAAW,CACjC,CACQ,CACJ,EACN;KACF;;;;;;","names":["cva","h","Host","cn"],"sources":["src/components/molecules/navigation-item/navigation-item.component.scss?tag=p-navigation-item","src/components/molecules/navigation-item/navigation-item.component.tsx"],"sourcesContent":["// :host {\n// \t@apply mb-1 inline-block w-full;\n//\n// \t> a {\n// \t\t@apply h-8 w-full cursor-pointer rounded-lg px-2 no-underline;\n// \t\t@apply flex items-center gap-2;\n// \t\t@apply font-semibold text-storm;\n//\n// \t\t@apply hover:bg-indigo-light;\n//\n// \t\t> p-icon {\n// \t\t\t@apply text-storm;\n// \t\t}\n//\n// \t\t> span {\n// \t\t\t@apply mr-auto;\n// \t\t}\n// \t}\n// }\n//\n// :host(.active) {\n// \t> a {\n// \t\t@apply bg-indigo-light text-indigo;\n//\n// \t\t> p-icon {\n// \t\t\t@apply text-indigo;\n// \t\t}\n// \t}\n// }\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { IconVariant } from '../../atoms/icon/icon.component';\nimport { cn } from '../../../utils/cn';\n\nconst navigationItem = cva(\n\t[\n\t\t'h-8 w-[inherit]',\n\t\t'flex items-center gap-2',\n\t\t'text-black-teal-400 hover:text-black-teal-500',\n\t\t'rounded-lg',\n\t\t'py-1 px-2',\n\t\t'text-sm font-medium',\n\t\t'cursor-pointer',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tactive: {\n\t\t\t\tfalse: ['hover:bg-off-white'],\n\t\t\t\ttrue: ['bg-off-white-600 text-black-teal-500 font-semibold'],\n\t\t\t},\n\t\t\ticon: {\n\t\t\t\tfalse: false,\n\t\t\t\ttrue: ['pl-1'],\n\t\t\t},\n\t\t},\n\t}\n);\n\nconst navigationItemIconContainer = cva(\n\t['flex h-6 aspect-branding items-center justify-center rounded-full'],\n\t{\n\t\tvariants: {\n\t\t\tactive: {\n\t\t\t\tfalse: false,\n\t\t\t\ttrue: ['bg-supportive-lilac'],\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-navigation-item',\n\tstyleUrl: './navigation-item.component.scss',\n\tshadow: false,\n})\nexport class NavigationItem {\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() icon!: IconVariant;\n\n\t/**\n\t * Wether the navigation item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * The element to use for the navigation item\n\t */\n\t@Prop() as: string = 'a';\n\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() counter: number | string;\n\n\t/**\n\t * The href of the navigation item\n\t */\n\t@Prop() href: string;\n\n\t/**\n\t * The target of the navigation item\n\t */\n\t@Prop() target: string;\n\n\t/**\n\t * The class of the container passed by parent\n\t */\n\t@Prop() class: string;\n\n\trender() {\n\t\tconst TagType = this.as;\n\n\t\tconst active = this.active || this.class?.includes('active');\n\n\t\treturn (\n\t\t\t<Host class={cn('p-navigation-item inline-block', this.class)}>\n\t\t\t\t<TagType\n\t\t\t\t\tclass={navigationItem({\n\t\t\t\t\t\ticon: !!this.icon,\n\t\t\t\t\t\tactive,\n\t\t\t\t\t})}\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t>\n\t\t\t\t\t<div class={navigationItemIconContainer({ active })}>\n\t\t\t\t\t\t<p-icon variant={this.icon} />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<span class={this.counter && 'has-counter'}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\n\t\t\t\t\t{!!this.counter && this.counter !== '0' && (\n\t\t\t\t\t\t<p-badge>{this.counter}</p-badge>\n\t\t\t\t\t)}\n\t\t\t\t</TagType>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"p-navigation-item.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,0BAA0B,GAAG,qhDAAqhD,CAAC;AACzjD,8BAAe,0BAA0B;;ACIzC,MAAM,cAAc,GAAGA,WAAG,CACzB;IACC,iBAAiB;IACjB,yBAAyB;IACzB,+CAA+C;IAC/C,YAAY;IACZ,WAAW;IACX,qBAAqB;IACrB,gBAAgB;CAChB,EACD;IACC,QAAQ,EAAE;QACT,MAAM,EAAE;YACP,KAAK,EAAE,CAAC,oBAAoB,CAAC;YAC7B,IAAI,EAAE,CAAC,oDAAoD,CAAC;SAC5D;QACD,IAAI,EAAE;YACL,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,CAAC,MAAM,CAAC;SACd;KACD;CACD,CACD,CAAC;AAEF,MAAM,2BAA2B,GAAGA,WAAG,CACtC,CAAC,mEAAmE,CAAC,EACrE;IACC,QAAQ,EAAE;QACT,MAAM,EAAE;YACP,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,CAAC,qBAAqB,CAAC;SAC7B;KACD;CACD,CACD,CAAC;MAOW,cAAc;;;;sBASA,KAAK;uBAKJ,KAAK;kBAKX,GAAG;;;;;;IAsBxB,MAAM;QACL,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC;QAExB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAE7D,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAEC,KAAE,CAAC,gCAAgC,EAAE,IAAI,CAAC,KAAK,CAAC,IAC5DF,QAAC,OAAO,qDACP,KAAK,EAAE,cAAc,CAAC;gBACrB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;gBACjB,MAAM;aACN,CAAC,EACF,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnBA,kEAAK,KAAK,EAAE,2BAA2B,CAAC,EAAE,MAAM,EAAE,CAAC,IAClDA,qEAAQ,OAAO,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,EAENA,mEAAM,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,aAAa,IACzCA,oEAAQ,CACF,EAEN,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,GAAG,KACtCA,wEAAU,IAAI,CAAC,OAAO,CAAW,CACjC,EAEA,CAAC,CAAC,IAAI,CAAC,OAAO,IAAIA,uEAAU,KAAK,EAAC,SAAS,GAAG,CACtC,CACJ,EACN;KACF;;;;;;","names":["cva","h","Host","cn"],"sources":["src/components/molecules/navigation-item/navigation-item.component.scss?tag=p-navigation-item","src/components/molecules/navigation-item/navigation-item.component.tsx"],"sourcesContent":["// :host {\n// \t@apply mb-1 inline-block w-full;\n//\n// \t> a {\n// \t\t@apply h-8 w-full cursor-pointer rounded-lg px-2 no-underline;\n// \t\t@apply flex items-center gap-2;\n// \t\t@apply font-semibold text-storm;\n//\n// \t\t@apply hover:bg-indigo-light;\n//\n// \t\t> p-icon {\n// \t\t\t@apply text-storm;\n// \t\t}\n//\n// \t\t> span {\n// \t\t\t@apply mr-auto;\n// \t\t}\n// \t}\n// }\n//\n// :host(.active) {\n// \t> a {\n// \t\t@apply bg-indigo-light text-indigo;\n//\n// \t\t> p-icon {\n// \t\t\t@apply text-indigo;\n// \t\t}\n// \t}\n// }\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { IconVariant } from '../../atoms/icon/icon.component';\nimport { cn } from '../../../utils/cn';\n\nconst navigationItem = cva(\n\t[\n\t\t'h-8 w-[inherit]',\n\t\t'flex items-center gap-2',\n\t\t'text-black-teal-400 hover:text-black-teal-500',\n\t\t'rounded-lg',\n\t\t'py-1 px-2',\n\t\t'text-sm font-medium',\n\t\t'cursor-pointer',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tactive: {\n\t\t\t\tfalse: ['hover:bg-off-white'],\n\t\t\t\ttrue: ['bg-off-white-600 text-black-teal-500 font-semibold'],\n\t\t\t},\n\t\t\ticon: {\n\t\t\t\tfalse: false,\n\t\t\t\ttrue: ['pl-1'],\n\t\t\t},\n\t\t},\n\t}\n);\n\nconst navigationItemIconContainer = cva(\n\t['flex h-6 aspect-branding items-center justify-center rounded-full'],\n\t{\n\t\tvariants: {\n\t\t\tactive: {\n\t\t\t\tfalse: false,\n\t\t\t\ttrue: ['bg-supportive-lilac'],\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-navigation-item',\n\tstyleUrl: './navigation-item.component.scss',\n\tshadow: false,\n})\nexport class NavigationItem {\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() icon!: IconVariant;\n\n\t/**\n\t * Wether the navigation item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * Wether the navigation item is loading\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * The element to use for the navigation item\n\t */\n\t@Prop() as: string = 'a';\n\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() counter: number | string;\n\n\t/**\n\t * The href of the navigation item\n\t */\n\t@Prop() href: string;\n\n\t/**\n\t * The target of the navigation item\n\t */\n\t@Prop() target: string;\n\n\t/**\n\t * The class of the container passed by parent\n\t */\n\t@Prop() class: string;\n\n\trender() {\n\t\tconst TagType = this.as;\n\n\t\tconst active = this.active || this.class?.includes('active');\n\n\t\treturn (\n\t\t\t<Host class={cn('p-navigation-item inline-block', this.class)}>\n\t\t\t\t<TagType\n\t\t\t\t\tclass={navigationItem({\n\t\t\t\t\t\ticon: !!this.icon,\n\t\t\t\t\t\tactive,\n\t\t\t\t\t})}\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t>\n\t\t\t\t\t<div class={navigationItemIconContainer({ active })}>\n\t\t\t\t\t\t<p-icon variant={this.icon} />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<span class={this.counter && 'has-counter'}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\n\t\t\t\t\t{!!this.counter && this.counter !== '0' && (\n\t\t\t\t\t\t<p-badge>{this.counter}</p-badge>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!!this.loading && <p-loader class='ml-auto' />}\n\t\t\t\t</TagType>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/cjs/p-navigation-section.cjs.entry.js

@@ -13,7 +13,7 @@ const NavigationSection = class {
         this.header = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'a1288ee15877b06095300a26d2d49919b9d84810', class: 'p-navigation-section flex flex-col gap-2' }, this.header?.length > 0 && (index.h("p-navigation-title", { key: '24b733f6352c4d7421d8a70480ea97da3a82f7bd' }, this.header)), index.h("div", { key: '77f586a8bfe435186fafba63466f5975e2e2fe6d', class: 'flex flex-col' }, index.h("slot", { key: 'a472a5b3cdd52dbf016c0a3430039d74af8b1d8c' }))));
+        return (index.h(index.Host, { key: '796e5ed44de63dc1f59630dad492272b6451ed0e', class: 'p-navigation-section flex flex-col gap-2' }, this.header?.length > 0 && (index.h("p-navigation-title", { key: '09d6b3680a110b5cd88d5cc9b5265c4b604c8ab3' }, this.header)), index.h("div", { key: '646ea16ad875dcfdf40aeb12657d946c39f44b3b', class: 'flex flex-col' }, index.h("slot", { key: 'c11b12a07b3a65b5ca1e8d61910d8a5160e32ea7' }))));
     }
 };
 NavigationSection.style = PNavigationSectionStyle0;

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

@@ -12,7 +12,7 @@ const NavigationTitle = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '80b8c50d719ca86ec4484e18a202748e4ae3df30', class: 'p-navigation-title text-xs font-medium text-black-teal-300' }, index.h("slot", { key: 'cbb2fb72878e218be1baf44764f6f954b2faca51' })));
+        return (index.h(index.Host, { key: '03f65d5a95070603d879ebb523bef42234c2b84c', class: 'p-navigation-title text-xs font-medium text-black-teal-300' }, index.h("slot", { key: '77812e71ced0173f0794306d312b8f93d3576aad' })));
     }
 };
 NavigationTitle.style = PNavigationTitleStyle0;

package/dist/cjs/p-page-size-select_3.cjs.entry.js

@@ -70,7 +70,7 @@ const Pagination = class {
         this._generate();
     }
     render() {
-        return (index.h(index.Host, { key: '69fc6fbdb1e075358090556d764d51fe8c03953c', class: `p-pagination ${this.hideOnSinglePage && this._set?.length === 3 && 'hidden'}` }, this._set?.map(p => {
+        return (index.h(index.Host, { key: '81016401bd076834a83260a0a081fc738867c08e', class: `p-pagination ${this.hideOnSinglePage && this._set?.length === 3 && 'hidden'}` }, this._set?.map(p => {
             if (p.type === 'previous' || p.type === 'next') {
                 return (index.h("p-pagination-item", { onClick: () => p.type === 'previous'
                         ? this._previousClick()
@@ -220,7 +220,7 @@ const PaginationItem = class {
         this.active = false;
     }
     render() {
-        return (index.h(index.Host, { key: '5df379f6f05c43ebfc4ab5445126f51d722f4a2e', class: `p-pagination-item ${this.active && 'active'}` }, index.h("slot", { key: '9b26d26a42d4766cc3050a851b106ad211787b30' })));
+        return (index.h(index.Host, { key: '6a4e7f7bf424e158a087b7ba5e165f0f79293157', class: `p-pagination-item ${this.active && 'active'}` }, index.h("slot", { key: '5fc864a64664a7ea8d45228c25b6c3fb909515ad' })));
     }
 };
 PaginationItem.style = PPaginationItemStyle0;

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

@@ -0,0 +1,233 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3f9bbc0c.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-ef421825.js');
+const index$1 = require('./index-b556e70f.js');
+require('./clsx-fc789adc.js');
+
+const Portal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get _el() { return index.getElement(this); }
+    _moved = false;
+    createPortal() {
+        document.body.append(this._el);
+    }
+    componentDidLoad() {
+        this.createPortal();
+    }
+    disconnectedCallback() {
+        this._moved ? this._el.remove() : (this._moved = true);
+    }
+    render() {
+        return (index.h(index.Host, { key: '04f9a6ddfe5756fff19f51575ed4869d85c756d5' }, index.h("slot", { key: 'ad0bd91e83e2b35f2bdb10ed17a1d77be095782d' })));
+    }
+};
+
+const tooltipComponentCss = "*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.pointer-events-auto{pointer-events:auto!important}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.z-tooltip{z-index:601!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-inherit{height:inherit!important}.w-\\[2px\\]{width:2px!important}.w-full{width:100%!important}.w-inherit{width:inherit!important}.w-max{width:max-content!important}.max-w-\\[14\\.5rem\\]{max-width:14.5rem!important}.max-w-full{max-width:100%!important}.cursor-pointer{cursor:pointer!important}.gap-2{gap:.5rem!important}.rounded-lg{border-radius:.5rem!important}.bg-black-teal{--tw-bg-opacity:1!important;background-color:rgb(3 42 36/var(--tw-bg-opacity,1))!important}.bg-negative-red{background-color:rgb(230 30 30/var(--tw-bg-opacity,1))!important}.bg-negative-red,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}.text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.opacity-0{opacity:0!important}.opacity-100{opacity:1!important}.blur{--tw-blur:blur(8px)!important}.blur,.drop-shadow-3{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)!important}.drop-shadow-3{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08)) drop-shadow(0 2px 2px rgba(0,2,2,.08)) drop-shadow(0 4px 4px rgba(0,2,2,.08))!important}.transition-opacity{transition-duration:.15s!important;transition-property:opacity!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}";
+const PTooltipStyle0 = tooltipComponentCss;
+
+const popover = index$1.cva([
+    'inline-block px-2',
+    'text-xs',
+    'opacity-0 drop-shadow-3 transition-opacity',
+    'rounded-lg',
+    'z-tooltip',
+    'pointer-events-none',
+], {
+    variants: {
+        variant: {
+            hover: 'bg-black-teal text-white py-1',
+            click: null,
+            error: 'max-w-full w-full',
+        },
+        strategy: {
+            none: null,
+            fixed: 'fixed',
+            absolute: 'absolute',
+        },
+    },
+    compoundVariants: [
+        {
+            variant: ['hover', 'click'],
+            class: 'max-w-[14.5rem] w-max',
+        },
+        {
+            variant: ['click', 'error'],
+            class: 'bg-white text-black-teal-300 py-2',
+        },
+    ],
+});
+const portal = index$1.cva('', {
+    variants: {
+        strategy: {
+            fixed: 'fixed',
+            absolute: 'absolute',
+        },
+    },
+});
+const Tooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isOpen = index.createEvent(this, "isOpen", 3);
+        this.variant = 'hover';
+        this.content = null;
+        this.placement = undefined;
+        this.offset = 8;
+        this.strategy = 'absolute';
+        this.enableUserInput = true;
+        this.show = false;
+        this.usePortal = false;
+        this.canManuallyClose = true;
+    }
+    /**
+     * Open change event
+     */
+    isOpen;
+    get _el() { return index.getElement(this); }
+    _hasContentSlot = false;
+    _loaded = false;
+    _popover;
+    _cleanup;
+    componentWillLoad() {
+        this._hasContentSlot = !!this._el.querySelector(':scope > [slot="content"]');
+    }
+    componentShouldUpdate() {
+        this._update();
+    }
+    disconnectedCallback() {
+        if (this._cleanup) {
+            this._cleanup();
+            this._cleanup = null;
+        }
+    }
+    render() {
+        const tooltipProps = {
+            role: 'popover',
+            'data-placement': this.placement,
+            ref: el => this._load(el),
+        };
+        let tooltip;
+        const tooltipElement = (index.h("div", { key: 'e773c573f879f37ca26e3efb0621a148150cc988', class: popover({
+                variant: this.variant,
+                strategy: this.usePortal ? 'none' : this.strategy,
+            }), ...(this.usePortal ? {} : tooltipProps) }, index.h("div", { key: 'beae5aa49190a54cb3852aed32989e4393a4577b', class: 'flex gap-2' }, this.variant === 'error' && (index.h("div", { key: '2df89a5828f590f1140e7b49d0fdbc0bbd342e76', class: 'w-[2px] bg-negative-red' })), this.content ? this.content : index.h("slot", { name: 'content' }))));
+        if (this.usePortal) {
+            tooltip = (index.h("p-portal", { key: 'b10a6efabbd222ac3f49ce1ed609225d43aef28c', class: portal({
+                    strategy: this.strategy,
+                }), ...tooltipProps }, tooltipElement));
+        }
+        else {
+            tooltip = tooltipElement;
+        }
+        return (index.h(index.Host, { key: '49b2555dfde9308712f54352b71b6b3392237f92', class: 'p-popover flex cursor-pointer' }, index.h("div", { key: '75bfdc10b8af271be06fb857d3f08e040c05711a', class: 'relative h-inherit w-inherit' }, index.h("slot", { key: '9dae75ed3b6edb2384b8a5d5b573aad90278a875', name: 'trigger' }), tooltip)));
+    }
+    clickHandler() {
+        if (this.variant === 'hover' || !this.enableUserInput) {
+            return;
+        }
+        if (this._popover.hasAttribute('data-show')) {
+            return;
+        }
+        this._show();
+    }
+    documentClickHandler() {
+        if (this.variant === 'hover' || !this.canManuallyClose || this.show) {
+            return;
+        }
+        if (!this._popover.hasAttribute('data-show')) {
+            return;
+        }
+        this._hide();
+    }
+    mouseEnterHandler() {
+        if (this.variant !== 'hover' || !this.enableUserInput) {
+            return;
+        }
+        this._show();
+    }
+    mouseLeaveHandler() {
+        if (this.show || this.variant !== 'hover' || !this.enableUserInput) {
+            return;
+        }
+        this._hide();
+    }
+    onShowChange(show) {
+        if (show && !this._popover.hasAttribute('data-show')) {
+            return this._show();
+        }
+        return this._hide();
+    }
+    _show() {
+        if (!this._loaded) {
+            return;
+        }
+        if (!this.content?.length && !this._hasContentSlot) {
+            if (this._popover.hasAttribute('data-show')) {
+                this._hide();
+            }
+            return;
+        }
+        this._cleanup = floatingUi_dom_esm.autoUpdate(this._el, this._popover, () => this._update());
+        // Make the popover visible
+        this._popover.setAttribute('data-show', '');
+        this._popover.classList.remove('opacity-0', 'pointer-events-none');
+        this._popover.classList.add('opacity-100', 'pointer-events-auto');
+        // Update its position
+        this.isOpen.emit(true);
+    }
+    _hide() {
+        if (!this._loaded) {
+            return;
+        }
+        if (this._cleanup) {
+            this._cleanup();
+            this._cleanup = null;
+        }
+        // Hide the popover
+        this._popover.removeAttribute('data-show');
+        this._popover.classList.remove('opacity-100', 'pointer-events-auto');
+        this._popover.classList.add('opacity-0', 'pointer-events-none');
+        this.isOpen.emit(false);
+    }
+    _load(popover) {
+        this._popover = popover;
+        if (popover) {
+            this._update();
+            this._loaded = true;
+            if (this.show) {
+                setTimeout(() => this._show(), 100);
+            }
+        }
+    }
+    _update() {
+        if (!this._popover) {
+            return;
+        }
+        floatingUi_dom_esm.computePosition(this._el, this._popover, {
+            placement: this.variant === 'error' && !this.placement
+                ? 'bottom-start'
+                : this.placement ?? 'top',
+            strategy: this.strategy,
+            middleware: [floatingUi_dom_esm.offset(this.offset), floatingUi_dom_esm.flip(), floatingUi_dom_esm.shift()],
+        }).then(({ x, y, placement }) => {
+            this._popover.dataset.placement = placement;
+            Object.assign(this._popover.style, {
+                top: `${y}px`,
+                left: `${x}px`,
+            });
+        });
+    }
+    static get watchers() { return {
+        "show": ["onShowChange"]
+    }; }
+};
+Tooltip.style = PTooltipStyle0;
+
+exports.p_portal = Portal;
+exports.p_tooltip = Tooltip;
+
+//# sourceMappingURL=p-portal_2.cjs.entry.js.map

package/dist/cjs/p-portal_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"p-portal.p-tooltip.entry.cjs.js","mappings":"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","names":["h","Host","cva","autoUpdate","computePosition","offset","flip","shift"],"sources":["src/components/atoms/portal/portal.component.tsx","src/components/atoms/tooltip/tooltip.component.scss?tag=p-tooltip&encapsulation=shadow","src/components/atoms/tooltip/tooltip.component.tsx"],"sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n\ttag: 'p-portal',\n})\nexport class Portal {\n\t/**\n\t * The host element\n\t */\n\t@Element() _el: HTMLElement;\n\n\tprivate _moved: boolean = false;\n\n\tprivate createPortal() {\n\t\tdocument.body.append(this._el);\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.createPortal();\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis._moved ? this._el.remove() : (this._moved = true);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n","// :host {\n// \t@apply flex cursor-pointer;\n//\n// \t.popover-container {\n// \t\t@apply relative h-0 w-0;\n// \t\t.popover {\n// \t\t\t@apply left-0 top-0 z-tooltip inline-block rounded bg-white px-3 py-2 text-xs font-medium opacity-0 drop-shadow-3 transition-opacity;\n// \t\t\t@apply pointer-events-none;\n// \t\t\twidth: max-content;\n// \t\t\tmax-width: 14.5rem;\n//\n// \t\t\t&.variant-hover,\n// \t\t\t&.variant-error,\n// \t\t\t&.variant-error-element {\n// \t\t\t\t@apply bg-storm py-1 text-white;\n// \t\t\t}\n//\n// \t\t\t&.variant-error,\n// \t\t\t&.variant-error-element {\n// \t\t\t\t@apply bg-negative uppercase tracking-wider;\n// \t\t\t}\n//\n// \t\t\t&[data-show] {\n// \t\t\t\t@apply pointer-events-auto opacity-100;\n// \t\t\t}\n//\n// \t\t\t.arrow,\n// \t\t\t.arrow::before {\n// \t\t\t\tbackground: inherit;\n// \t\t\t\t@apply absolute h-2 w-2;\n// \t\t\t}\n//\n// \t\t\t.arrow {\n// \t\t\t\tvisibility: hidden;\n//\n// \t\t\t\t&::before {\n// \t\t\t\t\t@apply visible rotate-45 transform;\n// \t\t\t\t\tcontent: '';\n// \t\t\t\t}\n// \t\t\t}\n//\n// \t\t\t&[data-strategy='fixed'] {\n// \t\t\t\t@apply fixed;\n// \t\t\t}\n//\n// \t\t\t&[data-strategy='absolute'] {\n// \t\t\t\t@apply absolute;\n// \t\t\t}\n//\n// \t\t\t&[data-placement^='top'] > .arrow {\n// \t\t\t\t@apply -bottom-1;\n// \t\t\t}\n//\n// \t\t\t&[data-placement^='bottom'] > .arrow {\n// \t\t\t\t@apply -top-1;\n// \t\t\t}\n//\n// \t\t\t&[data-placement^='left'] > .arrow {\n// \t\t\t\t@apply -right-1;\n// \t\t\t}\n//\n// \t\t\t&[data-placement^='right'] > .arrow {\n// \t\t\t\t@apply -left-1;\n// \t\t\t}\n// \t\t}\n// \t}\n// }\n","import {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\toffset,\n\tPlacement,\n\tshift,\n\tStrategy,\n} from '@floating-ui/dom';\nimport {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst popover = cva(\n\t[\n\t\t'inline-block px-2',\n\t\t'text-xs',\n\t\t'opacity-0 drop-shadow-3 transition-opacity',\n\t\t'rounded-lg',\n\n\t\t'z-tooltip',\n\t\t'pointer-events-none',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\thover: 'bg-black-teal text-white py-1',\n\t\t\t\tclick: null,\n\t\t\t\terror: 'max-w-full w-full',\n\t\t\t},\n\t\t\tstrategy: {\n\t\t\t\tnone: null,\n\t\t\t\tfixed: 'fixed',\n\t\t\t\tabsolute: 'absolute',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tvariant: ['hover', 'click'],\n\t\t\t\tclass: 'max-w-[14.5rem] w-max',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['click', 'error'],\n\t\t\t\tclass: 'bg-white text-black-teal-300 py-2',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst portal = cva('', {\n\tvariants: {\n\t\tstrategy: {\n\t\t\tfixed: 'fixed',\n\t\t\tabsolute: 'absolute',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-tooltip',\n\tstyleUrl: 'tooltip.component.scss',\n\tshadow: true,\n})\nexport class Tooltip {\n\t/**\n\t * The variant of the popover\n\t */\n\t@Prop() variant: 'hover' | 'click' | 'error' = 'hover';\n\n\t/**\n\t * The content of the popover\n\t */\n\t@Prop() content: any = null;\n\n\t/**\n\t * The placement of the popover\n\t */\n\t@Prop() placement: Placement;\n\n\t/**\n\t * The offset of the popover\n\t */\n\t@Prop() offset: number = 8;\n\n\t/**\n\t * The strategy of the popover placement\n\t */\n\t@Prop() strategy: Strategy = 'absolute';\n\n\t/**\n\t * Wether the tooltip can be shown by user input\n\t */\n\t@Prop() enableUserInput: boolean = true;\n\n\t/**\n\t * Wether to show the popover\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to use a portal for the tooltip\n\t */\n\t@Prop() usePortal: boolean = false;\n\n\t/**\n\t * Wether to someone can manually close the popover\n\t */\n\t@Prop() canManuallyClose: boolean = true;\n\n\t/**\n\t * Open change event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tisOpen: EventEmitter<boolean>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasContentSlot = false;\n\n\tprivate _loaded = false;\n\tprivate _popover: HTMLElement;\n\tprivate _cleanup: () => void;\n\n\tcomponentWillLoad() {\n\t\tthis._hasContentSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"content\"]'\n\t\t);\n\t}\n\n\tcomponentShouldUpdate() {\n\t\tthis._update();\n\t}\n\n\tdisconnectedCallback() {\n\t\tif (this._cleanup) {\n\t\t\tthis._cleanup();\n\t\t\tthis._cleanup = null;\n\t\t}\n\t}\n\n\trender() {\n\t\tconst tooltipProps = {\n\t\t\trole: 'popover',\n\t\t\t'data-placement': this.placement,\n\t\t\tref: el => this._load(el),\n\t\t};\n\n\t\tlet tooltip: HTMLElement;\n\n\t\tconst tooltipElement = (\n\t\t\t<div\n\t\t\t\tclass={popover({\n\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\tstrategy: this.usePortal ? 'none' : this.strategy,\n\t\t\t\t})}\n\t\t\t\t{...(this.usePortal ? {} : tooltipProps)}\n\t\t\t>\n\t\t\t\t<div class='flex gap-2'>\n\t\t\t\t\t{this.variant === 'error' && (\n\t\t\t\t\t\t<div class='w-[2px] bg-negative-red'></div>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.content ? this.content : <slot name='content' />}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\n\t\tif (this.usePortal) {\n\t\t\ttooltip = (\n\t\t\t\t<p-portal\n\t\t\t\t\tclass={portal({\n\t\t\t\t\t\tstrategy: this.strategy,\n\t\t\t\t\t})}\n\t\t\t\t\t{...tooltipProps}\n\t\t\t\t>\n\t\t\t\t\t{tooltipElement}\n\t\t\t\t</p-portal>\n\t\t\t);\n\t\t} else {\n\t\t\ttooltip = tooltipElement;\n\t\t}\n\n\t\treturn (\n\t\t\t<Host class='p-popover flex cursor-pointer'>\n\t\t\t\t<div class='relative h-inherit w-inherit'>\n\t\t\t\t\t<slot name='trigger' />\n\t\t\t\t\t{tooltip}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('click', { capture: true })\n\tprotected clickHandler() {\n\t\tif (this.variant === 'hover' || !this.enableUserInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._popover.hasAttribute('data-show')) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\t@Listen('click', { target: 'document', capture: true })\n\tprotected documentClickHandler() {\n\t\tif (this.variant === 'hover' || !this.canManuallyClose || this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._popover.hasAttribute('data-show')) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._hide();\n\t}\n\n\t@Listen('mouseenter')\n\t@Listen('focus')\n\tprotected mouseEnterHandler() {\n\t\tif (this.variant !== 'hover' || !this.enableUserInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\t@Listen('mouseleave')\n\t@Listen('blur')\n\tprotected mouseLeaveHandler() {\n\t\tif (this.show || this.variant !== 'hover' || !this.enableUserInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._hide();\n\t}\n\n\t@Watch('show')\n\tonShowChange(show: boolean) {\n\t\tif (show && !this._popover.hasAttribute('data-show')) {\n\t\t\treturn this._show();\n\t\t}\n\n\t\treturn this._hide();\n\t}\n\n\tprivate _show() {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.content?.length && !this._hasContentSlot) {\n\t\t\tif (this._popover.hasAttribute('data-show')) {\n\t\t\t\tthis._hide();\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis._cleanup = autoUpdate(this._el, this._popover, () => this._update());\n\t\t// Make the popover visible\n\t\tthis._popover.setAttribute('data-show', '');\n\n\t\tthis._popover.classList.remove('opacity-0', 'pointer-events-none');\n\t\tthis._popover.classList.add('opacity-100', 'pointer-events-auto');\n\n\t\t// Update its position\n\t\tthis.isOpen.emit(true);\n\t}\n\n\tprivate _hide() {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._cleanup) {\n\t\t\tthis._cleanup();\n\t\t\tthis._cleanup = null;\n\t\t}\n\n\t\t// Hide the popover\n\t\tthis._popover.removeAttribute('data-show');\n\n\t\tthis._popover.classList.remove('opacity-100', 'pointer-events-auto');\n\t\tthis._popover.classList.add('opacity-0', 'pointer-events-none');\n\n\t\tthis.isOpen.emit(false);\n\t}\n\n\tprivate _load(popover: HTMLElement) {\n\t\tthis._popover = popover;\n\n\t\tif (popover) {\n\t\t\tthis._update();\n\t\t\tthis._loaded = true;\n\n\t\t\tif (this.show) {\n\t\t\t\tsetTimeout(() => this._show(), 100);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate _update() {\n\t\tif (!this._popover) {\n\t\t\treturn;\n\t\t}\n\n\t\tcomputePosition(this._el, this._popover, {\n\t\t\tplacement:\n\t\t\t\tthis.variant === 'error' && !this.placement\n\t\t\t\t\t? 'bottom-start'\n\t\t\t\t\t: this.placement ?? 'top',\n\t\t\tstrategy: this.strategy,\n\n\t\t\tmiddleware: [offset(this.offset), flip(), shift()],\n\t\t}).then(({ x, y, placement }) => {\n\t\t\tthis._popover.dataset.placement = placement;\n\t\t\tObject.assign(this._popover.style, {\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tleft: `${x}px`,\n\t\t\t});\n\t\t});\n\t}\n}\n"],"version":3}

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

@@ -33,7 +33,7 @@ const Profile = class {
     }
     render() {
         const content = this._getContent();
-        return (index.h(index.Host, { key: '9873db1fac73ae3914b7d27caacfb0a8682909b4', class: 'p-profile inline-block w-inherit' }, this._hasDropdownSlot ? (index.h("p-dropdown", { class: 'block', strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, index.h("p-button", { variant: 'dropdown', chevron: this._dropdownOpen ? 'up' : 'down', active: this._dropdownOpen, slot: 'trigger', size: 'lg', class: 'w-full' }, content), index.h("div", { slot: 'items' }, index.h("slot", { name: 'dropdown', onSlotchange: () => this._checkDropdownSlot() })))) : (content)));
+        return (index.h(index.Host, { key: '1ff9fb75ed53f1e4c9e53dd942f150fae77484d4', class: 'p-profile inline-block w-inherit' }, this._hasDropdownSlot ? (index.h("p-dropdown", { class: 'block', strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, index.h("p-button", { variant: 'dropdown', chevron: this._dropdownOpen ? 'up' : 'down', active: this._dropdownOpen, slot: 'trigger', size: 'lg', class: 'w-full' }, content), index.h("div", { slot: 'items' }, index.h("slot", { name: 'dropdown', onSlotchange: () => this._checkDropdownSlot() })))) : (content)));
     }
     slotchange() {
         this._checkDropdownSlot();

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

@@ -4,21 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3f9bbc0c.js');
 const index$1 = require('./index-b556e70f.js');
+const nonce = require('./nonce-0feefc04.js');
 require('./clsx-fc789adc.js');
 
-const nonce = (length) => {
-    let result = '';
-    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    const charactersLength = characters.length;
-    let counter = 0;
-    while (counter < length) {
-        result += characters.charAt(Math.floor(Math.random() * charactersLength));
-        counter += 1;
-    }
-    return result;
-};
-
-const radioComponentCss = ".block{display:block!important}*{box-sizing:border-box}:host{display:block}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-1\\/2{left:50%!important}.top-1\\/2{top:50%!important}.m-0{margin:0!important}.flex{display:flex!important}.h-2{height:.5rem!important}.h-3{height:.75rem!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-6{width:1.5rem!important}.flex-shrink-0{flex-shrink:0!important}.-translate-x-1\\/2{--tw-translate-x:-50%!important}.-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))!important}.-translate-y-1\\/2{--tw-translate-y:-50%!important}.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))!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.appearance-none{appearance:none!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-black-teal-100{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.border-black-teal-50{--tw-border-opacity:1!important;border-color:rgb(230 234 233/var(--tw-border-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.shadow-1{--tw-shadow:0 1px 1px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.after\\:h-2:after{content:var(--tw-content)!important;height:.5rem!important}.after\\:h-3:after{content:var(--tw-content)!important;height:.75rem!important}.after\\:w-2:after{content:var(--tw-content)!important;width:.5rem!important}.after\\:w-3:after{content:var(--tw-content)!important;width:.75rem!important}.checked\\:cursor-auto:checked{cursor:auto!important}.checked\\:border-black-teal\\/20:checked{border-color:rgba(3,42,36,.2)!important}.checked\\:bg-supportive-lilac:checked{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.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)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.checked\\:ring-supportive-lilac-100:checked{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.hover\\:border-black-teal-100:hover{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.hover\\:bg-supportive-lilac-100:hover{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.checked\\:hover\\:border-black-teal\\/20:hover:checked{border-color:rgba(3,42,36,.2)!important}.checked\\:hover\\:bg-supportive-lilac:hover:checked{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.peer:checked~.peer-checked\\:bg-black-teal-200{--tw-bg-opacity:1!important;background-color:rgb(154 170 167/var(--tw-bg-opacity,1))!important}.peer:checked~.peer-checked\\:bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.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)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.peer:checked~.peer-checked\\:ring-black-teal\\/10{--tw-ring-color:rgba(3,42,36,.1)!important}";
+const radioComponentCss = "*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-1\\/2{left:50%!important}.top-1\\/2{top:50%!important}.m-0{margin:0!important}.block{display:block!important}.flex{display:flex!important}.h-2{height:.5rem!important}.h-3{height:.75rem!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-6{width:1.5rem!important}.flex-shrink-0{flex-shrink:0!important}.-translate-x-1\\/2{--tw-translate-x:-50%!important}.-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))!important}.-translate-y-1\\/2{--tw-translate-y:-50%!important}.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))!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.appearance-none{appearance:none!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-black-teal-100{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.border-black-teal-50{--tw-border-opacity:1!important;border-color:rgb(230 234 233/var(--tw-border-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.shadow-1{--tw-shadow:0 1px 1px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.checked\\:cursor-auto:checked{cursor:auto!important}.checked\\:border-black-teal\\/20:checked{border-color:rgba(3,42,36,.2)!important}.checked\\:bg-supportive-lilac:checked{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.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)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.checked\\:ring-supportive-lilac-100:checked{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.hover\\:border-black-teal-100:hover{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.hover\\:bg-supportive-lilac-100:hover{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.checked\\:hover\\:border-black-teal\\/20:hover:checked{border-color:rgba(3,42,36,.2)!important}.checked\\:hover\\:bg-supportive-lilac:hover:checked{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.peer:checked~.peer-checked\\:bg-black-teal-200{--tw-bg-opacity:1!important;background-color:rgb(154 170 167/var(--tw-bg-opacity,1))!important}.peer:checked~.peer-checked\\:bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.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)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.peer:checked~.peer-checked\\:ring-black-teal\\/10{--tw-ring-color:rgba(3,42,36,.1)!important}";
 const PRadioStyle0 = radioComponentCss;
 
 const radio = index$1.cva([
@@ -27,8 +16,8 @@ const radio = index$1.cva([
 ], {
     variants: {
         size: {
-            sm: 'w-4 h-4 after:w-2 after:h-2',
-            base: 'w-6 h-6 after:w-3 after:h-3',
+            sm: 'w-4 h-4',
+            base: 'w-6 h-6',
         },
         disabled: {
             false: [
@@ -81,20 +70,20 @@ const Radio = class {
         this.id = undefined;
         this.name = undefined;
         this.checked = false;
-        this._nonce = nonce(5);
+        this._nonce = nonce.nonce(5);
     }
     /**
      * Event whenever the checked changes
      */
     checkedChange;
     render() {
-        return (index.h(index.Host, { key: '698efa40dc903fc7f62fbe6627118851b4674c0d', class: 'p-radio' }, index.h("label", { key: '601a7b79a63ef0914fef089c88e984029326fa8e', htmlFor: this.id ?? this._nonce, class: 'flex items-center justify-start gap-2 text-black-teal' }, index.h("div", { key: 'e7e1df8384a3be709a09988ede46d1f7c7420ec5', class: 'relative flex flex-shrink-0 items-center' }, index.h("input", { key: '1d73f1ab4f24ef4f83ce18d49f62695a4b239780', class: radio({
+        return (index.h(index.Host, { key: 'cadcfb2a903a3a9f70796770dc47f22caf199b5e', class: 'p-radio' }, index.h("label", { key: 'bad70100ebbf0d8635fb9a50c274aac56b74735a', htmlFor: this.id ?? this._nonce, class: 'flex items-center justify-start gap-2 text-black-teal' }, index.h("div", { key: '87c8c6b485b23beb305450bb18416936425e000e', class: 'relative flex flex-shrink-0 items-center' }, index.h("input", { key: '500655357e45b7ed47b651993b2a4e62aaae1818', class: radio({
                 size: this.size,
                 disabled: this.disabled,
-            }), type: 'radio', id: this.id ?? this._nonce, name: this.name, required: this.required, value: this.value, checked: this.checked, disabled: this.disabled, onChange: ev => this._onChange(ev) }), index.h("div", { key: 'fa13b7db3606b24ab380695b4e111ae853ab4ac3', class: circle({
+            }), type: 'radio', id: this.id ?? this._nonce, name: this.name, required: this.required, value: this.value, checked: this.checked, disabled: this.disabled, onChange: ev => this._onChange(ev) }), index.h("div", { key: '23b0de0ff8913ed6bc66bddd50eea9117063b880', class: circle({
                 size: this.size,
                 disabled: this.disabled,
-            }) })), index.h("slot", { key: 'aab4f0698c576a85fbda9e2f776aaea801d93bd8' }))));
+            }) })), index.h("slot", { key: 'bbf707984104b091871111ae1d1e79ea09f5e7b8' }))));
     }
     _onChange(ev) {
         if (this.disabled) {

package/dist/cjs/p-radio.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"p-radio.entry.cjs.js","mappings":";;;;;;;;AAAO,MAAM,KAAK,GAAG,CAAC,MAAc;IACnC,IAAI,MAAM,GAAG,EAAE,CAAC;IAEhB,MAAM,UAAU,GACf,gEAAgE,CAAC;IAClE,MAAM,gBAAgB,GAAG,UAAU,CAAC,MAAM,CAAC;IAE3C,IAAI,OAAO,GAAG,CAAC,CAAC;IAChB,OAAO,OAAO,GAAG,MAAM,EAAE;QACxB,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,gBAAgB,CAAC,CAAC,CAAC;QAC1E,OAAO,IAAI,CAAC,CAAC;KACb;IAED,OAAO,MAAM,CAAC;AACf,CAAC;;ACdD,MAAM,iBAAiB,GAAG,isJAAisJ,CAAC;AAC5tJ,qBAAe,iBAAiB;;ACWhC,MAAM,KAAK,GAAGA,WAAG,CAChB;IACC,qDAAqD;IACrD,gDAAgD;CAChD,EACD;IACC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,EAAE,EAAE,6BAA6B;YACjC,IAAI,EAAE,6BAA6B;SACnC;QACD,QAAQ,EAAE;YACT,KAAK,EAAE;gBACN,yBAAyB;gBACzB,gCAAgC;gBAChC,4DAA4D;gBAC5D,qBAAqB;gBACrB,0DAA0D;gBAC1D,kDAAkD;gBAClD,sEAAsE;aACtE;YACD,IAAI,EAAE,uDAAuD;SAC7D;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACN,yBAAyB;gBACzB,gCAAgC;gBAChC,2DAA2D;aAC3D;SACD;KACD;CACD,CACD,CAAC;AAEF,MAAM,MAAM,GAAGA,WAAG,CACjB;IACC,OAAO;IACP,6BAA6B;IAC7B,2FAA2F;CAC3F,EACD;IACC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;SACf;QACD,QAAQ,EAAE;YACT,KAAK,EACJ,2EAA2E;YAC5E,IAAI,EAAE,gCAAgC;SACtC;KACD;CACD,CACD,CAAC;MAMW,KAAK;;;;;oBASa,MAAM;wBAKS,KAAK;wBAKL,IAAI;;;uBAeL,KAAK;sBAOvB,KAAK,CAAC,CAAC,CAAC;;;;;IAFzB,aAAa,CAAwB;IAI9C,MAAM;QACL,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAC,SAAS,IACpBD,oEACC,OAAO,EAAE,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,EAC/B,KAAK,EAAC,uDAAuD,IAE7DA,kEAAK,KAAK,EAAC,0CAA0C,IACpDA,oEACC,KAAK,EAAE,KAAK,CAAC;gBACZ,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACvB,CAAC,EACF,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,GACjC,EACFA,kEACC,KAAK,EAAE,MAAM,CAAC;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACvB,CAAC,GACD,CACG,EACNA,oEAAa,CACN,CACF,EACN;KACF;IAEO,SAAS,CAAC,EAAS;QAC1B,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO;SACP;QAED,MAAM,OAAO,GAAI,EAAE,CAAC,MAA2B,CAAC,OAAO,CAAC;QACxD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACjC;;;;;;","names":["cva","h","Host"],"sources":["src/utils/nonce.ts","src/components/atoms/radio/radio.component.css?tag=p-radio","src/components/atoms/radio/radio.component.tsx"],"sourcesContent":["export const nonce = (length: number) => {\n\tlet result = '';\n\n\tconst characters =\n\t\t'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n\tconst charactersLength = characters.length;\n\n\tlet counter = 0;\n\twhile (counter < length) {\n\t\tresult += characters.charAt(Math.floor(Math.random() * charactersLength));\n\t\tcounter += 1;\n\t}\n\n\treturn result;\n};\n",":host {\n  display: block;\n}\n","import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tHost,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { nonce } from '../../../utils/nonce';\n\nconst radio = cva(\n\t[\n\t\t'peer appearance-none m-0 outline-none flex-shrink-0',\n\t\t'rounded-full border border-inset border-solid ',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: 'w-4 h-4 after:w-2 after:h-2',\n\t\t\t\tbase: 'w-6 h-6 after:w-3 after:h-3',\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\tfalse: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-black-teal-100',\n\t\t\t\t\t'hover:bg-supportivce-lilac-100 hover:border-black-teal-100',\n\t\t\t\t\t'checked:cursor-auto',\n\t\t\t\t\t'checked:bg-supportive-lilac checked:border-black-teal/20',\n\t\t\t\t\t'checked:ring-2 checked:ring-supportive-lilac-100',\n\t\t\t\t\t'checked:hover:bg-supportive-lilac checked:hover:border-black-teal/20',\n\t\t\t\t],\n\t\t\t\ttrue: 'bg-white-600 border-black-teal-50 cursor-not-allowed ',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-black-teal-100',\n\t\t\t\t\t'hover:bg-supportive-lilac-100 hover:border-black-teal-100',\n\t\t\t\t],\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst circle = cva(\n\t[\n\t\t'block',\n\t\t'rounded-full bg-transparent',\n\t\t'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: 'w-2 h-2',\n\t\t\t\tbase: 'w-3 h-3',\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\tfalse:\n\t\t\t\t\t'peer-checked:bg-white peer-checked:ring-1 peer-checked:ring-black-teal/10',\n\t\t\t\ttrue: 'peer-checked:bg-black-teal-200',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-radio',\n\tstyleUrl: 'radio.component.css',\n})\nexport class Radio {\n\t/**\n\t * The value of the radio button\n\t */\n\t@Prop() value: string;\n\n\t/**\n\t * The size of the radio\n\t */\n\t@Prop() size: 'sm' | 'base' = 'base';\n\n\t/**\n\t * Wether the radio is disabled\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether the radio is required\n\t */\n\t@Prop({ reflect: true }) required: boolean = true;\n\n\t/**\n\t * The id of the radio button\n\t */\n\t@Prop({ reflect: true }) id: string;\n\n\t/**\n\t * The name of the radio button\n\t */\n\t@Prop({ reflect: true }) name: string;\n\n\t/**\n\t * Wether the radio is checked\n\t */\n\t@Prop({ reflect: true }) checked: boolean = false;\n\n\t/**\n\t * Event whenever the checked changes\n\t */\n\t@Event() checkedChange: EventEmitter<boolean>;\n\n\t@State() private _nonce = nonce(5);\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-radio'>\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={this.id ?? this._nonce}\n\t\t\t\t\tclass='flex items-center justify-start gap-2 text-black-teal'\n\t\t\t\t>\n\t\t\t\t\t<div class='relative flex flex-shrink-0 items-center'>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass={radio({\n\t\t\t\t\t\t\t\tsize: this.size,\n\t\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\ttype='radio'\n\t\t\t\t\t\t\tid={this.id ?? this._nonce}\n\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\tchecked={this.checked}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\tonChange={ev => this._onChange(ev)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass={circle({\n\t\t\t\t\t\t\t\tsize: this.size,\n\t\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</label>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _onChange(ev: Event) {\n\t\tif (this.disabled) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst checked = (ev.target as HTMLInputElement).checked;\n\t\tthis.checked = checked;\n\t\tthis.checkedChange.emit(checked);\n\t}\n}\n"],"version":3}
+{"file":"p-radio.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,q3IAAq3I,CAAC;AACh5I,qBAAe,iBAAiB;;ACWhC,MAAM,KAAK,GAAGA,WAAG,CAChB;IACC,qDAAqD;IACrD,gDAAgD;CAChD,EACD;IACC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;SACf;QACD,QAAQ,EAAE;YACT,KAAK,EAAE;gBACN,yBAAyB;gBACzB,gCAAgC;gBAChC,4DAA4D;gBAC5D,qBAAqB;gBACrB,0DAA0D;gBAC1D,kDAAkD;gBAClD,sEAAsE;aACtE;YACD,IAAI,EAAE,uDAAuD;SAC7D;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACN,yBAAyB;gBACzB,gCAAgC;gBAChC,2DAA2D;aAC3D;SACD;KACD;CACD,CACD,CAAC;AAEF,MAAM,MAAM,GAAGA,WAAG,CACjB;IACC,OAAO;IACP,6BAA6B;IAC7B,2FAA2F;CAC3F,EACD;IACC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;SACf;QACD,QAAQ,EAAE;YACT,KAAK,EACJ,2EAA2E;YAC5E,IAAI,EAAE,gCAAgC;SACtC;KACD;CACD,CACD,CAAC;MAMW,KAAK;;;;;oBASa,MAAM;wBAKS,KAAK;wBAKL,IAAI;;;uBAeL,KAAK;sBAOvBC,WAAK,CAAC,CAAC,CAAC;;;;;IAFzB,aAAa,CAAwB;IAI9C,MAAM;QACL,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAC,SAAS,IACpBD,oEACC,OAAO,EAAE,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,EAC/B,KAAK,EAAC,uDAAuD,IAE7DA,kEAAK,KAAK,EAAC,0CAA0C,IACpDA,oEACC,KAAK,EAAE,KAAK,CAAC;gBACZ,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACvB,CAAC,EACF,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,GACjC,EACFA,kEACC,KAAK,EAAE,MAAM,CAAC;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACvB,CAAC,GACD,CACG,EACNA,oEAAa,CACN,CACF,EACN;KACF;IAEO,SAAS,CAAC,EAAS;QAC1B,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO;SACP;QAED,MAAM,OAAO,GAAI,EAAE,CAAC,MAA2B,CAAC,OAAO,CAAC;QACxD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACjC;;;;;;","names":["cva","nonce","h","Host"],"sources":["src/components/atoms/radio/radio.component.css?tag=p-radio","src/components/atoms/radio/radio.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tHost,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { nonce } from '../../../utils/nonce';\n\nconst radio = cva(\n\t[\n\t\t'peer appearance-none m-0 outline-none flex-shrink-0',\n\t\t'rounded-full border border-inset border-solid ',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: 'w-4 h-4',\n\t\t\t\tbase: 'w-6 h-6',\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\tfalse: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-black-teal-100',\n\t\t\t\t\t'hover:bg-supportivce-lilac-100 hover:border-black-teal-100',\n\t\t\t\t\t'checked:cursor-auto',\n\t\t\t\t\t'checked:bg-supportive-lilac checked:border-black-teal/20',\n\t\t\t\t\t'checked:ring-2 checked:ring-supportive-lilac-100',\n\t\t\t\t\t'checked:hover:bg-supportive-lilac checked:hover:border-black-teal/20',\n\t\t\t\t],\n\t\t\t\ttrue: 'bg-white-600 border-black-teal-50 cursor-not-allowed ',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-black-teal-100',\n\t\t\t\t\t'hover:bg-supportive-lilac-100 hover:border-black-teal-100',\n\t\t\t\t],\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst circle = cva(\n\t[\n\t\t'block',\n\t\t'rounded-full bg-transparent',\n\t\t'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: 'w-2 h-2',\n\t\t\t\tbase: 'w-3 h-3',\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\tfalse:\n\t\t\t\t\t'peer-checked:bg-white peer-checked:ring-1 peer-checked:ring-black-teal/10',\n\t\t\t\ttrue: 'peer-checked:bg-black-teal-200',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-radio',\n\tstyleUrl: 'radio.component.css',\n})\nexport class Radio {\n\t/**\n\t * The value of the radio button\n\t */\n\t@Prop() value: string;\n\n\t/**\n\t * The size of the radio\n\t */\n\t@Prop() size: 'sm' | 'base' = 'base';\n\n\t/**\n\t * Wether the radio is disabled\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether the radio is required\n\t */\n\t@Prop({ reflect: true }) required: boolean = true;\n\n\t/**\n\t * The id of the radio button\n\t */\n\t@Prop({ reflect: true }) id: string;\n\n\t/**\n\t * The name of the radio button\n\t */\n\t@Prop({ reflect: true }) name: string;\n\n\t/**\n\t * Wether the radio is checked\n\t */\n\t@Prop({ reflect: true }) checked: boolean = false;\n\n\t/**\n\t * Event whenever the checked changes\n\t */\n\t@Event() checkedChange: EventEmitter<boolean>;\n\n\t@State() private _nonce = nonce(5);\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-radio'>\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={this.id ?? this._nonce}\n\t\t\t\t\tclass='flex items-center justify-start gap-2 text-black-teal'\n\t\t\t\t>\n\t\t\t\t\t<div class='relative flex flex-shrink-0 items-center'>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass={radio({\n\t\t\t\t\t\t\t\tsize: this.size,\n\t\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\ttype='radio'\n\t\t\t\t\t\t\tid={this.id ?? this._nonce}\n\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\tchecked={this.checked}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\tonChange={ev => this._onChange(ev)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass={circle({\n\t\t\t\t\t\t\t\tsize: this.size,\n\t\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</label>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _onChange(ev: Event) {\n\t\tif (this.disabled) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst checked = (ev.target as HTMLInputElement).checked;\n\t\tthis.checked = checked;\n\t\tthis.checkedChange.emit(checked);\n\t}\n}\n"],"version":3}

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

@@ -186,7 +186,7 @@ const Select = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '3d62e70a5901677fb96a586ed0f065e16fd24256', class: 'p-select' }, index.h("p-dropdown", { key: 'ad83513056a1927d79fb18856fe75b65fb81c6be', disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev) }, index.h("p-field-container", { key: 'af3354916b5ef394694ad4d89a409abc5b71bd56', slot: 'trigger', prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, errorPlacement: 'top-start', forceShowTooltip: this.error?.length && this._showDropdown }, index.h("p-button", { key: '24021e3f6e15cf3a7fd1819699e608f771fb660d', class: 'w-full', slot: 'content', variant: 'secondary', size: this.size, chevron: this.showChevron, disabled: this.disabled, active: this._showDropdown, icon: this.icon, onClick: ev => this._onClick(ev) }, index.h("div", { key: '2c902461aadd75eccd5818679a419b0c50d75c43', class: 'relative flex-1', ref: ref => (this._inputRef = ref) }, this._displayValue))), this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem())));
+        return (index.h(index.Host, { key: '9090270a3b0048ffbe8e8c37cbbcca384daf5f4d', class: 'p-select' }, index.h("p-dropdown", { key: '6050a5d6358631b969c9675e5ae070def18b7f58', disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev) }, index.h("p-field-container", { key: '074697f053f77cd31719f4b892cdd329061f8d9f', slot: 'trigger', prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, errorPlacement: 'top-start', forceShowTooltip: this.error?.length && this._showDropdown }, index.h("p-button", { key: '0b5986bf4408654eba76d85a5d43988971af866b', class: 'w-full', slot: 'content', variant: 'secondary', size: this.size, chevron: this.showChevron, disabled: this.disabled, active: this._showDropdown, icon: this.icon, onClick: ev => this._onClick(ev) }, index.h("div", { key: '6bb8b4780aca7a525377c55611fba654764deaf5', class: 'relative flex-1', ref: ref => (this._inputRef = ref) }, this._displayValue))), this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem())));
     }
     documentClickHandler({ target }) {
         if (!this._showDropdown || childOf.childOf(target, this._el)) {

package/dist/cjs/p-slider-indicator.cjs.entry.js

@@ -13,7 +13,7 @@ const SliderIndicator = class {
         this.active = false;
     }
     render() {
-        return (index.h(index.Host, { key: '4525154d8a2fa45a67c9194601c038ce4d68d93c', class: `p-slider-indicator ${this.active && 'active'}` }));
+        return (index.h(index.Host, { key: 'b881e676d31e9db8b09093c2ad767467584194aa', class: `p-slider-indicator ${this.active && 'active'}` }));
     }
 };
 SliderIndicator.style = PSliderIndicatorStyle0;

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

@@ -16,8 +16,8 @@ const Status = class {
         this.iconRotate = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'c22a53f6a938b6b474cc0d3b48bafd1b86ac12ce', class: `p-status variant-${this.variant}
-                }` }, this._getIcon(), index.h("slot", { key: '488fd658de93d5f4a7a32cfea4407df0953eb092' })));
+        return (index.h(index.Host, { key: '1d4fc08551aaa41e7b1e6f5cffe6bc6dce88b417', class: `p-status variant-${this.variant}
+                }` }, this._getIcon(), index.h("slot", { key: '4b2d7a3a670c335b42905de63fb8aa1c8b0e34e3' })));
     }
     _getIcon() {
         const icon = this.icon || this._getVariantIcon();

package/dist/cjs/p-stepper-item.cjs.entry.js

@@ -17,7 +17,7 @@ const StepperItem = class {
         this.active = false;
     }
     render() {
-        return (index.h(index.Host, { key: '1920bc6191385c5b1bcb32ffecfded7f7c1a3f40', class: "p-stepper-item" }, index.h("div", { key: '743a51150e95b15bfd194498d9568821c50b4311', class: "circle" }, this.finished && index.h("p-icon", { key: '876d225ca1f3c974c4f5c0cebd8d7eabff7a8336', variant: "checkmark" })), index.h("div", { key: '42dfe103a364e5c8183bced9825f7d899fd7c01f', class: "content" }, index.h("slot", { key: 'a9db4797ad8649458649df53a4edb91c46a8199e', name: "content" }))));
+        return (index.h(index.Host, { key: '8da0538e191e3cbe2bc2ffd34235e29bf36c5c4b', class: "p-stepper-item" }, index.h("div", { key: '26ef593097c695a3944a7c50f941f566c2bada7b', class: "circle" }, this.finished && index.h("p-icon", { key: '648760041a32cd018e7e5a7b76d7cdb19220425e', variant: "checkmark" })), index.h("div", { key: 'fe3b931203de10909550032493c5d305187f9ef8', class: "content" }, index.h("slot", { key: '16627589013f17c494e482c98b7e96aaed2de5a4', name: "content" }))));
     }
 };
 StepperItem.style = PStepperItemStyle0;