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

package/dist/components/p-datepicker.js

@@ -2949,7 +2949,7 @@ const Datepicker = /*@__PURE__*/ proxyCustomElement(class Datepicker extends HTM
         this.parseValue(this.value);
     }
     render() {
-        return (h(Host, { key: 'f0a3bc705999626811d70ee9ec3427d50534ef83', class: 'p-datepicker' }, h("p-dropdown", { key: 'f6937a8bad532549e73b7d3e0e014f7ec0282a4e', strategy: this.strategy, placement: this.placement, disableTriggerClick: true, applyMaxWidth: false, applyFullWidth: false, insideClick: true, show: this._showDropdown }, h("p-field", { key: '2d266a871095865a8ff73ff7f5b1b42e81089024', slot: 'trigger', icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, disabled: this.disabled, focused: this._showDropdown, value: this._getFormattedDate(), placeholder: this.placeholder, onFocus: () => this._onFocus(), onBlur: () => this._onBlur(), onValueChange: ev => this._onValueChange(ev.detail), onInputRefChange: ev => (this._inputRef = ev.detail) }), h("div", { key: '4f0c3c7b5912a926f40dbad7d2a6748348a52b18', slot: 'items' }, h("p-calendar", { key: '9432fc8ceb87a7e4881e982a89a1b836dc6f8bbd', variant: 'embedded', value: this._value, onValueChange: ({ detail }) => (this.value = detail), preselectToday: this.preselectToday, disabledDates: this.disabledDates, minDate: this.minDate, maxDate: this.maxDate, disableWeekends: this.disableWeekends, mode: this.mode })))));
+        return (h(Host, { key: '0de36ac63a8498aa89896203a95b32990ff09005', class: 'p-datepicker' }, h("p-dropdown", { key: '03c3fd3666a07cafd8c972627637a335f4dbd31f', strategy: this.strategy, placement: this.placement, disableTriggerClick: true, applyMaxWidth: false, applyFullWidth: false, insideClick: true, show: this._showDropdown }, h("p-field", { key: '79f0be9fbc485923a05f884d7ab215d53d56ea46', slot: 'trigger', icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, disabled: this.disabled, focused: this._showDropdown, value: this._getFormattedDate(), placeholder: this.placeholder, onFocus: () => this._onFocus(), onBlur: () => this._onBlur(), onValueChange: ev => this._onValueChange(ev.detail), onInputRefChange: ev => (this._inputRef = ev.detail) }), h("div", { key: '3f096013cc6cde840576d9a71cd8ff6bdbf5c0d7', slot: 'items' }, h("p-calendar", { key: 'e40c1f2a0c1458a836268f4d39e64bb3bb637b5a', variant: 'embedded', value: this._value, onValueChange: ({ detail }) => (this.value = detail), preselectToday: this.preselectToday, disabledDates: this.disabledDates, minDate: this.minDate, maxDate: this.maxDate, disableWeekends: this.disableWeekends, mode: this.mode })))));
     }
     documentClickHandler({ target }) {
         if (!this._showDropdown || childOf(target, this._el)) {

package/dist/components/p-iban-icon.js

@@ -15,7 +15,7 @@ const IbanIcon = /*@__PURE__*/ proxyCustomElement(class IbanIcon extends HTMLEle
             variant = this.iban.slice(4, 8).toLowerCase();
         }
         const exists = IBAN_ICON_VARIANTS_ARRAY.includes(variant);
-        return (exists && (h(Host, { key: '24f4660b13c21d92d3a7071fa1d2d46d574fb607', class: 'p-iban-icon' }, this._getIcon(variant))));
+        return (exists && (h(Host, { key: 'd11fd313b8f14f6bcf6054cba53a15d11a6e543a', class: 'p-iban-icon' }, this._getIcon(variant))));
     }
     _getIcon(variant) {
         switch (variant) {

package/dist/components/p-info-panel.js

@@ -21,7 +21,7 @@ const InfoPanel = /*@__PURE__*/ proxyCustomElement(class InfoPanel extends HTMLE
     closed;
     get _el() { return this; }
     render() {
-        return (h(Host, { key: '185a15e2920b26aa2e37c0346a6ebdcb55fec6b6', class: `p-info-panel variant-${this.variant} ${this.closeable && 'has-close'}` }, h("div", { key: '00988fe10bd697c2d21f5852af9b324983210878', class: 'header' }, h("slot", { key: '06defbb1d995b2ffacc7290059cbeeca6596d729', name: 'header' })), h("div", { key: '9686e8428264e4121b33af1288731be2403fd259', class: 'content' }, h("slot", { key: 'e9e43c418d1087eb2c3b2a98353013d0e837145a', name: 'content' })), this.closeable && (h("div", { key: 'dfd279a2880e69ab2cfb39ec588a1001dbae68e5', class: 'close', onClick: () => this._close() }, h("p-icon", { key: 'e4bdae964e5706772e2d0b2719d42d37abcd3244', variant: 'negative' })))));
+        return (h(Host, { key: '06e687cc27ed5e2711653bf3bbb144736d240cec', class: `p-info-panel variant-${this.variant} ${this.closeable && 'has-close'}` }, h("div", { key: 'e9f32e052c6d2afb81afb895815dcbbaaf1837cd', class: 'header' }, h("slot", { key: '005d9db44eb1b6792a16276e17307a0f803b7721', name: 'header' })), h("div", { key: '8ac2a1aa5250c1b6a07d85ee387a3967a9cd9b14', class: 'content' }, h("slot", { key: '5dbc41b6f56815b5c1d0997b52880a580ab1d054', name: 'content' })), this.closeable && (h("div", { key: 'fe63a4dbe2ca2ad4effad83fd7aceb96b1c2eb46', class: 'close', onClick: () => this._close() }, h("p-icon", { key: 'd248d67e00e7189a643f49120df2de57dd57ad16', variant: 'negative' })))));
     }
     _close() {
         this.closed.emit();

package/dist/components/p-label.js

@@ -1,4 +1,86 @@
-import { L as Label, d as defineCustomElement$1 } from './label.component.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as cva } from './index2.js';
+import { c as cn } from './cn.js';
+import { d as defineCustomElement$2 } from './icon.component.js';
+
+const labelComponentCss = "*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded-full{border-radius:9999px!important}.bg-amber-100{--tw-bg-opacity:1!important;background-color:rgb(255 246 194/var(--tw-bg-opacity,1))!important}.bg-negative-red-100{--tw-bg-opacity:1!important;background-color:rgb(255 221 221/var(--tw-bg-opacity,1))!important}.bg-positive-green-100{--tw-bg-opacity:1!important;background-color:rgb(213 251 199/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac-100{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.bg-white-700{--tw-bg-opacity:1!important;background-color:rgb(242 242 242/var(--tw-bg-opacity,1))!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-amber-800{--tw-text-opacity:1!important;color:rgb(148 77 11/var(--tw-text-opacity,1))!important}.text-dark-teal-800{--tw-text-opacity:1!important;color:rgb(1 37 33/var(--tw-text-opacity,1))!important}.text-negative-red-800{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.text-positive-green-800{--tw-text-opacity:1!important;color:rgb(47 100 7/var(--tw-text-opacity,1))!important}.text-supportive-lilac-900{--tw-text-opacity:1!important;color:rgb(80 9 179/var(--tw-text-opacity,1))!important}@media (min-width:64rem){.desktop-xs\\:block{display:block!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:py-0{padding-bottom:0!important;padding-top:0!important}}";
+const PLabelStyle0 = labelComponentCss;
+
+const label = cva(['flex items-center justify-center gap-2', 'h-6 rounded-full'], {
+    variants: {
+        variant: {
+            positive: 'bg-positive-green-100 text-positive-green-800',
+            biased: 'bg-amber-100  text-amber-800',
+            negative: 'bg-negative-red-100 text-negative-red-800',
+            neutral: 'bg-supportive-lilac-100 text-supportive-lilac-900',
+            unavailable: 'bg-white-700 text-dark-teal-800',
+        },
+        iconOnly: {
+            false: 'px-2',
+            true: 'p-2 w-6',
+        },
+        keepMobileContent: {
+            false: null,
+            true: null,
+        },
+    },
+    compoundVariants: [
+        {
+            keepMobileContent: false,
+            iconOnly: false,
+            class: 'p-2 w-6 desktop-xs:w-auto desktop-xs:py-0',
+        },
+    ],
+});
+const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.variant = 'neutral';
+        this.iconOnly = false;
+        this.icon = undefined;
+        this.iconFlip = undefined;
+        this.iconRotate = undefined;
+        this.keepMobileContent = false;
+    }
+    render() {
+        return (h(Host, { key: 'f856eed050d7fa75c8cd48bb8f27bce27beb19c5', class: 'p-label' }, h("div", { key: '429ee34de3268f5a94e9996b1d4cde4f8165f67b', class: label({
+                variant: this.variant,
+                iconOnly: this.iconOnly,
+                keepMobileContent: this.keepMobileContent,
+            }) }, this.icon && (h("p-icon", { key: 'ed98f89a18751466d842f3c731aa253fa4a428b7', class: 'flex-shrink-0', variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate })), !this.iconOnly && (h("div", { key: 'bc29f59321fa594bfa9925a0ec29c28ddedc7d4a', class: cn('flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm', {
+                hidden: !this.keepMobileContent,
+                'desktop-xs:block': !this.keepMobileContent,
+            }) }, h("slot", { key: '81cdfddd2f82d84a26b4c85311cd03171ac6e9a0' }))))));
+    }
+    static get style() { return PLabelStyle0; }
+}, [1, "p-label", {
+        "variant": [513],
+        "iconOnly": [516, "icon-only"],
+        "icon": [513],
+        "iconFlip": [1, "icon-flip"],
+        "iconRotate": [2, "icon-rotate"],
+        "keepMobileContent": [516, "keep-mobile-content"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["p-label", "p-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "p-label":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Label);
+            }
+            break;
+        case "p-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
 
 const PLabel = Label;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/p-label.js.map

@@ -1 +1 @@
-{"file":"p-label.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"p-label.js","mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,i9DAAi9D,CAAC;AAC5+D,qBAAe,iBAAiB;;ACKhC,MAAM,KAAK,GAAG,GAAG,CAChB,CAAC,wCAAwC,EAAE,kBAAkB,CAAC,EAC9D;IACC,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,QAAQ,EAAE,+CAA+C;YACzD,MAAM,EAAE,8BAA8B;YACtC,QAAQ,EAAE,2CAA2C;YACrD,OAAO,EAAE,mDAAmD;YAC5D,WAAW,EAAE,iCAAiC;SAC9C;QACD,QAAQ,EAAE;YACT,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,SAAS;SACf;QACD,iBAAiB,EAAE;YAClB,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI;SACV;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,iBAAiB,EAAE,KAAK;YACxB,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,2CAA2C;SAClD;KACD;CACD,CACD,CAAC;MAOW,KAAK;;;;;uBASE,SAAS;wBAKiB,KAAK;;;;iCAoBI,KAAK;;IAE3D,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,SAAS,IACpB,4DACC,KAAK,EAAE,KAAK,CAAC;gBACZ,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;aACzC,CAAC,IAED,IAAI,CAAC,IAAI,KACT,+DACC,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACtB,CACF,EAEA,CAAC,IAAI,CAAC,QAAQ,KACd,4DACC,KAAK,EAAE,EAAE,CACR,gEAAgE,EAChE;gBACC,MAAM,EAAE,CAAC,IAAI,CAAC,iBAAiB;gBAC/B,kBAAkB,EAAE,CAAC,IAAI,CAAC,iBAAiB;aAC3C,CACD,IAED,8DAAQ,CACH,CACN,CACI,CACA,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/label/label.component.css?tag=p-label&encapsulation=shadow","src/components/molecules/label/label.component.tsx"],"sourcesContent":["","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions } from '../../../types';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../../utils/cn';\n\nconst label = cva(\n\t['flex items-center justify-center gap-2', 'h-6 rounded-full'],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tpositive: 'bg-positive-green-100 text-positive-green-800',\n\t\t\t\tbiased: 'bg-amber-100  text-amber-800',\n\t\t\t\tnegative: 'bg-negative-red-100 text-negative-red-800',\n\t\t\t\tneutral: 'bg-supportive-lilac-100 text-supportive-lilac-900',\n\t\t\t\tunavailable: 'bg-white-700 text-dark-teal-800',\n\t\t\t},\n\t\t\ticonOnly: {\n\t\t\t\tfalse: 'px-2',\n\t\t\t\ttrue: 'p-2 w-6',\n\t\t\t},\n\t\t\tkeepMobileContent: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: null,\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tkeepMobileContent: false,\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'p-2 w-6 desktop-xs:w-auto desktop-xs:py-0',\n\t\t\t},\n\t\t],\n\t}\n);\n\n@Component({\n\ttag: 'p-label',\n\tstyleUrl: 'label.component.css',\n\tshadow: true,\n})\nexport class Label {\n\t/**\n\t * Variant of the label\n\t */\n\t@Prop({ reflect: true }) variant:\n\t\t| 'positive'\n\t\t| 'biased'\n\t\t| 'negative'\n\t\t| 'neutral'\n\t\t| 'unavailable' = 'neutral';\n\n\t/**\n\t * Wether to only show the icon\n\t */\n\t@Prop({ reflect: true }) iconOnly: boolean = false;\n\n\t/**\n\t * Icon to show on the label\n\t */\n\t@Prop({ reflect: true }) icon: IconVariant;\n\n\t/**\n\t * Icon flip\n\t */\n\t@Prop() iconFlip: IconFlipOptions;\n\n\t/**\n\t * Icon rotate\n\t */\n\t@Prop() iconRotate: RotateOptions;\n\n\t/**\n\t * Wether to keep the content on mobile\n\t */\n\t@Prop({ reflect: true }) keepMobileContent: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-label'>\n\t\t\t\t<div\n\t\t\t\t\tclass={label({\n\t\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\t\ticonOnly: this.iconOnly,\n\t\t\t\t\t\tkeepMobileContent: this.keepMobileContent,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.icon && (\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tclass='flex-shrink-0'\n\t\t\t\t\t\t\tvariant={this.icon}\n\t\t\t\t\t\t\tflip={this.iconFlip}\n\t\t\t\t\t\t\trotate={this.iconRotate}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!this.iconOnly && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass={cn(\n\t\t\t\t\t\t\t\t'flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\thidden: !this.keepMobileContent,\n\t\t\t\t\t\t\t\t\t'desktop-xs:block': !this.keepMobileContent,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/p-layout.js

@@ -11,7 +11,7 @@ const Layout = /*@__PURE__*/ proxyCustomElement(class Layout extends HTMLElement
         this.variant = 'default';
     }
     render() {
-        return (h(Host, { key: 'fa4b89568d7ec5962f4767566ca8d5d97c169314', class: `p-layout variant-${this.variant}` }, h("div", { key: '21d92f4cfe34b655995fb9d984b1ef273f686ff2', class: "content" }, h("div", { key: '9fec48f933afa2a151e3e050a04459a09f15cedb', class: "inner-content" }, h("slot", { key: '0c8ff716020b44a9cf737e5c0390ec64e559b790', name: "content" }))), h("div", { key: 'a4b88f57ea6c6ea9cacfe6b5865185a99f691146', class: "sidebar" }, h("slot", { key: 'c2866ebb42b7a010ed08407fd4f75f6a86a669f1', name: "sidebar" })), h("div", { key: '3cbe3287c3b1cfd8472f4e0e27301c31770e25fe', class: "topbar" }, h("slot", { key: 'b36f43fdbacfc72357a63fbc85f65ec023f50b1a', name: "topbar" }))));
+        return (h(Host, { key: '87e6a518eeba1dae91acb44ca352f8d725dccbf7', class: `p-layout variant-${this.variant}` }, h("div", { key: '2a0cdea6708770b219d5f413f7aac5fe0e51e26b', class: "content" }, h("div", { key: '5db9b2431dd5ab288d21e37e99b03f07ffd27d26', class: "inner-content" }, h("slot", { key: '17b8e22d6793123555c6436f0f0be92928bcf4e1', name: "content" }))), h("div", { key: 'ebe171e640079f5232dce274f4160b74f0b96f23', class: "sidebar" }, h("slot", { key: 'ea85cf354e08378c815fe45838c647d53c7ee4b8', name: "sidebar" })), h("div", { key: '1998ccdec1e41b455fddbb7b3fad39dca3a87e21', class: "topbar" }, h("slot", { key: 'ed0296f4df62ce628ad0b66a97f7d557d228842d', name: "topbar" }))));
     }
     static get style() { return PLayoutStyle0; }
 }, [1, "p-layout", {

package/dist/components/p-navbar.js

@@ -55,7 +55,7 @@ const Navbar = /*@__PURE__*/ proxyCustomElement(class Navbar extends HTMLElement
         this._show = false;
     }
     render() {
-        return (h(Host, { key: '7f038a3c0ec76e24feec7e1cba133a18c68278f1', class: 'p-navbar w-full max-h-screen-safe layout-1280:w-60 layout-1680:w-72' }, h("p-backdrop", { key: '1c534d08af4851b7c775ed4ec931e1ef68748669', class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), h("div", { key: '8bf242613c6704586eedb15b3576f2c531706b47', class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, h("div", { key: '39aa317a7af6f0afb6fa827295797435db4968fa', class: 'flex w-full items-center justify-between layout-1280:hidden' }, h("p-button", { key: '2484d018cbc1aca11c00ae0621aa50172e89b940', variant: 'secondary', icon: 'menu-arrow', iconFlip: 'horizontal', iconOnly: true, size: 'sm', onClick: () => (this._show = false) })), h("div", { key: '6e1dc7fde01decb77fe83efa5b99e26a2bdcad48', class: 'flex w-full flex-col items-stretch' }, h("slot", { key: '51cd568fd5c5637761317944af974d9bf140c78c', name: 'company' })), h("div", { key: '44e4c7602fe5a188f9b02089b917e0c769e4addd', class: 'flex w-full flex-col gap-6 overflow-y-auto' }, h("slot", { key: 'fe84a1f8a0e35b5a261d858c22135a761dc26735', name: 'content' })), h("div", { key: '2e788343efbfc6d0481d5f0449bc69c72c7dabc3', class: 'mt-auto hidden w-full flex-col layout-1280:flex' }, h("slot", { key: '070e9aaea6502c2f9ac92e5738e5a021e2923bb8', name: 'user' }))), h("div", { key: '5b31449262ebad9a900f80288eda91a1ecb3f658', class: topbar({ class: sidebarAndTopbar() }) }, h("p-button", { key: 'fb68bb0b590da2096d2721e27c016eeae53d6a3c', variant: 'secondary', iconOnly: true, icon: 'menu-arrow', size: 'sm', onClick: () => (this._show = true) }), h("slot", { key: '629a33f6522b2f8dd3c33119cd87eab80bc837ae', name: 'topbar' }))));
+        return (h(Host, { key: '0be6a9de7486fa500e6de008062c9a8cb345ac88', class: 'p-navbar w-full max-h-screen-safe layout-1280:w-60 layout-1680:w-72' }, h("p-backdrop", { key: '26c3e4e10a1ed323f8cba07afc85002e94620f5b', class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), h("div", { key: 'fa2ab83012be477a0714bdf3fb9f98a3da5e47a7', class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, h("div", { key: '3754f4bc73857ff1c21a4e2d5c820645fe6b9e67', class: 'flex w-full items-center justify-between layout-1280:hidden' }, h("p-button", { key: '44721cf9d31a51779472c3b698008408d278414d', variant: 'secondary', icon: 'menu-arrow', iconFlip: 'horizontal', iconOnly: true, size: 'sm', onClick: () => (this._show = false) })), h("div", { key: 'f254e6ad0ca2f3ee02c4144c49df97f051bedea1', class: 'flex w-full flex-col items-stretch' }, h("slot", { key: 'a3e802ebefcdfbb08ecf4e2d15fafb17c258751f', name: 'company' })), h("div", { key: '7472e66d6805e61bfca371d571bec5ad6d319fcd', class: 'flex w-full flex-col gap-6 overflow-y-auto' }, h("slot", { key: '86792cec9f0c1b0d20d25eb3e33e750e8f465a29', name: 'content' })), h("div", { key: '14bc6301ce2bac663cfd7ab483e691e8e5221977', class: 'mt-auto hidden w-full flex-col layout-1280:flex' }, h("slot", { key: '5d2b83b81e46753d083238b114f66cb9cd8a4a6b', name: 'user' }))), h("div", { key: '6b68cc070aa8fa98ff206cc86af3fb151e9dd74d', class: topbar({ class: sidebarAndTopbar() }) }, h("p-button", { key: 'd5870fe60e4e4ea081b4f6cdd55989edb79496d9', variant: 'secondary', iconOnly: true, icon: 'menu-arrow', size: 'sm', onClick: () => (this._show = true) }), h("slot", { key: '5267db6c7f2fce402e318ca018bfd11035a8576c', name: 'topbar' }))));
     }
     handleCloseNavbar() {
         this._show = false;

package/dist/components/p-navigation-item.js

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as cva } from './index2.js';
 import { c as cn } from './cn.js';
-import { d as defineCustomElement$3 } from './badge.component.js';
-import { d as defineCustomElement$2 } from './icon.component.js';
+import { d as defineCustomElement$4 } from './badge.component.js';
+import { d as defineCustomElement$3 } from './icon.component.js';
+import { d as defineCustomElement$2 } from './loader.component.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 = cva([
@@ -41,6 +42,7 @@ const NavigationItem = /*@__PURE__*/ proxyCustomElement(class NavigationItem ext
         this.__registerHost();
         this.icon = undefined;
         this.active = false;
+        this.loading = false;
         this.as = 'a';
         this.counter = undefined;
         this.href = undefined;
@@ -50,15 +52,16 @@ const NavigationItem = /*@__PURE__*/ proxyCustomElement(class NavigationItem ext
     render() {
         const TagType = this.as;
         const active = this.active || this.class?.includes('active');
-        return (h(Host, { key: '5d7a9016cd51653a7efc94aec1acb1dec95c1576', class: cn('p-navigation-item inline-block', this.class) }, h(TagType, { key: '7e53d93d45d3620808a01cc4119c8ef1fcd58a8f', class: navigationItem({
+        return (h(Host, { key: '093b9c1c4c03c9b6d8bafe510ff7713f2cde758c', class: cn('p-navigation-item inline-block', this.class) }, h(TagType, { key: '275b9172a1d3722d308065185b8c6f898e717bca', class: navigationItem({
                 icon: !!this.icon,
                 active,
-            }), href: this.href, target: this.target }, h("div", { key: 'eb652010934dd9863080e98d7715d088d7a30349', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: '3b7b58d4c5b1af285ab66d06ca8ef388fe1d7032', variant: this.icon })), h("span", { key: '840d600c6a1d34872ba1437b38ba38a3f1cb08df', class: this.counter && 'has-counter' }, h("slot", { key: '6f6e3f814e0970d762f6c46991ec9f6634c73e7c' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: 'efbdb0e66ef6cc254ba6533e3bbc6a5225fbe894' }, this.counter)))));
+            }), href: this.href, target: this.target }, h("div", { key: 'c2ca2fee661b6244bff144deaf9c8499ee0afa8b', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: 'c1974b11f7d21422880f61139c535f0099f91a67', variant: this.icon })), h("span", { key: '71b4f19042174fb8cbf2f0feb6be74bffe5c1303', class: this.counter && 'has-counter' }, h("slot", { key: '72fa6bd043213151eb3e22105102973ad8c7fbef' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: 'caa907ca2acf8451cfcecc1e8a43ce0ef5bf153b' }, this.counter)), !!this.loading && h("p-loader", { key: 'cf2a8eb51f5a7453b87b87aa44bb4823670ef714', class: 'ml-auto' }))));
     }
     static get style() { return PNavigationItemStyle0; }
 }, [4, "p-navigation-item", {
         "icon": [1],
         "active": [4],
+        "loading": [4],
         "as": [1],
         "counter": [8],
         "href": [1],
@@ -69,7 +72,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["p-navigation-item", "p-badge", "p-icon"];
+    const components = ["p-navigation-item", "p-badge", "p-icon", "p-loader"];
     components.forEach(tagName => { switch (tagName) {
         case "p-navigation-item":
             if (!customElements.get(tagName)) {
@@ -78,10 +81,15 @@ function defineCustomElement$1() {
             break;
         case "p-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "p-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "p-loader":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/p-navigation-item.js.map

@@ -1 +1 @@
-{"file":"p-navigation-item.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,i/CAAi/C,CAAC;AACrhD,8BAAe,0BAA0B;;ACIzC,MAAM,cAAc,GAAG,GAAG,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,GAAG,GAAG,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,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,CAAC,gCAAgC,EAAE,IAAI,CAAC,KAAK,CAAC,IAC5D,EAAC,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,IAEnB,4DAAK,KAAK,EAAE,2BAA2B,CAAC,EAAE,MAAM,EAAE,CAAC,IAClD,+DAAQ,OAAO,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,EAEN,6DAAM,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,aAAa,IACzC,8DAAQ,CACF,EAEN,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,GAAG,KACtC,kEAAU,IAAI,CAAC,OAAO,CAAW,CACjC,CACQ,CACJ,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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.js","mappings":";;;;;;;AAAA,MAAM,0BAA0B,GAAG,qhDAAqhD,CAAC;AACzjD,8BAAe,0BAA0B;;ACIzC,MAAM,cAAc,GAAG,GAAG,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,GAAG,GAAG,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,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,CAAC,gCAAgC,EAAE,IAAI,CAAC,KAAK,CAAC,IAC5D,EAAC,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,IAEnB,4DAAK,KAAK,EAAE,2BAA2B,CAAC,EAAE,MAAM,EAAE,CAAC,IAClD,+DAAQ,OAAO,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,EAEN,6DAAM,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,aAAa,IACzC,8DAAQ,CACF,EAEN,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,GAAG,KACtC,kEAAU,IAAI,CAAC,OAAO,CAAW,CACjC,EAEA,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,iEAAU,KAAK,EAAC,SAAS,GAAG,CACtC,CACJ,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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/components/p-navigation-section.js

@@ -11,7 +11,7 @@ const NavigationSection = /*@__PURE__*/ proxyCustomElement(class NavigationSecti
         this.header = undefined;
     }
     render() {
-        return (h(Host, { key: 'a1288ee15877b06095300a26d2d49919b9d84810', class: 'p-navigation-section flex flex-col gap-2' }, this.header?.length > 0 && (h("p-navigation-title", { key: '24b733f6352c4d7421d8a70480ea97da3a82f7bd' }, this.header)), h("div", { key: '77f586a8bfe435186fafba63466f5975e2e2fe6d', class: 'flex flex-col' }, h("slot", { key: 'a472a5b3cdd52dbf016c0a3430039d74af8b1d8c' }))));
+        return (h(Host, { key: 'f4c9cbde8f0bf86e2cc1df10c7f4b2d50e3ac803', class: 'p-navigation-section flex flex-col gap-2' }, this.header?.length > 0 && (h("p-navigation-title", { key: '4be5133078abe4f0b20e75168c49faced844655e' }, this.header)), h("div", { key: 'dc04383133e2f7122bba8d8dbe18f7d6ed2bae0e', class: 'flex flex-col' }, h("slot", { key: '82a5fd7183090458ab036d915b0e0af562183ef4' }))));
     }
     static get style() { return PNavigationSectionStyle0; }
 }, [4, "p-navigation-section", {

package/dist/components/p-profile.js

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

package/dist/components/p-radio.js

@@ -1,19 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as cva } from './index2.js';
+import { n as nonce } from './nonce.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 = cva([
@@ -22,8 +11,8 @@ const radio = 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: [
@@ -84,13 +73,13 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
      */
     checkedChange;
     render() {
-        return (h(Host, { key: '698efa40dc903fc7f62fbe6627118851b4674c0d', class: 'p-radio' }, h("label", { key: '601a7b79a63ef0914fef089c88e984029326fa8e', htmlFor: this.id ?? this._nonce, class: 'flex items-center justify-start gap-2 text-black-teal' }, h("div", { key: 'e7e1df8384a3be709a09988ede46d1f7c7420ec5', class: 'relative flex flex-shrink-0 items-center' }, h("input", { key: '1d73f1ab4f24ef4f83ce18d49f62695a4b239780', class: radio({
+        return (h(Host, { key: 'ef48217704ef103668234d8b3b8da720b58d90ee', class: 'p-radio' }, h("label", { key: '29176e1a1f018a252f1c990d8ed02ab67b97297c', htmlFor: this.id ?? this._nonce, class: 'flex items-center justify-start gap-2 text-black-teal' }, h("div", { key: '785cfc9c4f61069a37efd36f39ed948eb08ffea0', class: 'relative flex flex-shrink-0 items-center' }, h("input", { key: '8ef43efad2ebd27ea62dbd3254279901b7dc2504', 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) }), 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) }), h("div", { key: 'fe41351c563e10018dfe02235faa98c1e883f153', class: circle({
                 size: this.size,
                 disabled: this.disabled,
-            }) })), h("slot", { key: 'aab4f0698c576a85fbda9e2f776aaea801d93bd8' }))));
+            }) })), h("slot", { key: '9821b79310a24b03420be123009471ec4e99fefe' }))));
     }
     _onChange(ev) {
         if (this.disabled) {

package/dist/components/p-radio.js.map

@@ -1 +1 @@
-{"file":"p-radio.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,GAAG,GAAG,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,GAAG,GAAG,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,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,SAAS,IACpB,8DACC,OAAO,EAAE,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,EAC/B,KAAK,EAAC,uDAAuD,IAE7D,4DAAK,KAAK,EAAC,0CAA0C,IACpD,8DACC,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,EACF,4DACC,KAAK,EAAE,MAAM,CAAC;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACvB,CAAC,GACD,CACG,EACN,8DAAa,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":[],"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.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,q3IAAq3I,CAAC;AACh5I,qBAAe,iBAAiB;;ACWhC,MAAM,KAAK,GAAG,GAAG,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,GAAG,GAAG,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,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,SAAS,IACpB,8DACC,OAAO,EAAE,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,EAC/B,KAAK,EAAC,uDAAuD,IAE7D,4DAAK,KAAK,EAAC,0CAA0C,IACpD,8DACC,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,EACF,4DACC,KAAK,EAAE,MAAM,CAAC;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACvB,CAAC,GACD,CACG,EACN,8DAAa,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":[],"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/components/p-select.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as childOf } from './child-of.js';
 import { c as cva } from './index2.js';
-import { d as defineCustomElement$d } from './avatar.component.js';
-import { d as defineCustomElement$c } from './button.component.js';
+import { d as defineCustomElement$e } from './avatar.component.js';
+import { d as defineCustomElement$d } from './button.component.js';
+import { d as defineCustomElement$c } from './checkbox.component.js';
 import { d as defineCustomElement$b } from './dropdown.component.js';
 import { d as defineCustomElement$a } from './dropdown-menu-container.component.js';
 import { d as defineCustomElement$9 } from './dropdown-menu-item.component.js';
@@ -194,7 +195,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         }
     }
     render() {
-        return (h(Host, { key: '3d62e70a5901677fb96a586ed0f065e16fd24256', class: 'p-select' }, h("p-dropdown", { key: 'ad83513056a1927d79fb18856fe75b65fb81c6be', disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev) }, 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 }, 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) }, 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 (h(Host, { key: 'f3c79d4ae63334d7c1b71b379e9887c87c503eb6', class: 'p-select' }, h("p-dropdown", { key: 'd9405d2babe6f2a9b6ad2d08dd6c0526c5acb6eb', disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev) }, h("p-field-container", { key: '6666c587c140691644a90439025ab7bef45379ec', 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 }, h("p-button", { key: '18ae68c1e1258979b75dfa158cac8b31873a3149', 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) }, h("div", { key: '3682212bea35cca676bb5e26922590154c5d7c1a', 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(target, this._el)) {
@@ -502,7 +503,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["p-select", "p-avatar", "p-button", "p-dropdown", "p-dropdown-menu-container", "p-dropdown-menu-item", "p-field", "p-field-container", "p-helper", "p-icon", "p-loader", "p-portal", "p-tooltip"];
+    const components = ["p-select", "p-avatar", "p-button", "p-checkbox", "p-dropdown", "p-dropdown-menu-container", "p-dropdown-menu-item", "p-field", "p-field-container", "p-helper", "p-icon", "p-loader", "p-portal", "p-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "p-select":
             if (!customElements.get(tagName)) {
@@ -511,10 +512,15 @@ function defineCustomElement$1() {
             break;
         case "p-avatar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "p-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "p-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }