@paperless/core 3.19.6 → 3.21.0

package/dist/collection/components/molecules/button/button.component.js

@@ -3,6 +3,7 @@ import { cva } from "class-variance-authority";
 import { ThemedHost } from "../../../internal/themed-host.component";
 import { asBoolean } from "../../../utils/as-boolean";
 import { cn } from "../../../utils/cn";
+import { isSmallerThanScreen } from "../../../utils/screens";
 /**
 <div class="text-inherit group-hover/button:text-inherit dark:text-inherit dark:group-hover/button:text-inherit"></div>
 <div class="text-transparent group-hover/button:text-transparent dark:text-transparent dark:group-hover/button:text-transparent"></div>
@@ -534,6 +535,10 @@ export class Button {
      * Wether the button is icon only
      */
     iconOnly = false;
+    /**
+     * Wether the button is icon only on mobile
+     */
+    iconOnlyAtBreakpoint = 'never';
     /**
      * A class to apply to the icon
      */
@@ -567,6 +572,11 @@ export class Button {
      */
     onClick;
     _host;
+    _iconOnlyResizeTimeout;
+    _isIconOnly = false;
+    componentDidLoad() {
+        this._onWindowResize();
+    }
     render() {
         let loaderColor = 'white';
         switch (this.variant) {
@@ -586,25 +596,28 @@ export class Button {
             : 'button';
         const hostClass = cn('p-button inline-block', this.class);
         const active = asBoolean(this.active) || hostClass?.includes('active');
-        return (h(ThemedHost, { key: '3d2e21ba8385599c81fb2a6c15df5fd346ee17cf', class: hostClass }, h(VariableTag, { key: 'd629af41ed9d53c1f8072b18d3de665347b4abc2', class: button({
+        return (h(ThemedHost, { key: '322546f64e12848af223b26af858a78d13766b2f', class: hostClass }, h(VariableTag, { key: '76937101a1e3000c075b79973bd5102c4f13663a', class: button({
                 variant: this.variant,
                 size: this.size,
                 loading: asBoolean(this.loading),
                 disabled: asBoolean(this.disabled),
                 buttonGroupPosition: this.buttonGroupPosition,
-                iconOnly: asBoolean(this.iconOnly),
+                iconOnly: asBoolean(this.iconOnly) ||
+                    (this._isIconOnly && this.iconOnlyAtBreakpoint !== 'never'),
                 hasChevron: !!this.chevron,
                 active,
                 error: asBoolean(this.error),
                 underline: asBoolean(this.underline) && VariableTag === 'a',
-            }), disabled: asBoolean(this.disabled), href: this.href, tabIndex: this.tabIndex, target: this.target, type: this.variant === 'text' ? undefined : this.type }, this.chevron && this.chevronPosition === 'start' && (h("p-icon", { key: '2383f5eb28f5e44be43efb36879d92ae99ecaacf', rotate: this.chevron === 'up' ? 180 : 0, variant: 'caret' })), this.icon &&
+            }), disabled: asBoolean(this.disabled), href: this.href, tabIndex: this.tabIndex, target: this.target, type: this.variant === 'text' ? undefined : this.type }, this.chevron && this.chevronPosition === 'start' && (h("p-icon", { key: 'd1cb9a78f5e0a8edc1fac1db0554f00241a7713d', rotate: this.chevron === 'up' ? 180 : 0, variant: 'caret' })), this.icon &&
             this.iconPosition === 'start' &&
             !(this.iconOnly && this.loading) &&
-            this._getIcon(), this.label ?? h("slot", { key: '162ff2a9a9dd1e7938a21a1c0a2eab02eb8d90be' }), this.icon &&
+            this._getIcon(), this.iconOnlyAtBreakpoint === 'never' || !this._isIconOnly
+            ? (this.label ?? h("slot", null))
+            : '', this.icon &&
             this.iconPosition === 'end' &&
             !this.loading &&
             !this.chevron &&
-            this._getIcon(), this.chevron && !this.loading && this.chevronPosition === 'end' && (h("p-icon", { key: 'bcdc2a0fa24d1c0213ab7d22a09814cbdf428d14', rotate: this.chevron === 'up' ? 180 : 0, variant: 'caret' })), this.loading && h("p-loader", { key: 'afb9613187bb7700d0e948b78e57905ce13cdd1f', color: loaderColor }))));
+            this._getIcon(), this.chevron && !this.loading && this.chevronPosition === 'end' && (h("p-icon", { key: 'c73b7807b209298796ecbe646a54b3990f94a973', rotate: this.chevron === 'up' ? 180 : 0, variant: 'caret' })), this.loading && h("p-loader", { key: '05ec7d09fa104d7fe0083879127ae4ee4dddf59b', color: loaderColor }))));
     }
     handleClick(ev) {
         if (this.loading || this.disabled) {
@@ -616,6 +629,31 @@ export class Button {
         }
         this.onClick.emit(ev);
     }
+    _onWindowResize() {
+        if (this.iconOnlyAtBreakpoint === 'never') {
+            return;
+        }
+        if (this._iconOnlyResizeTimeout) {
+            clearTimeout(this._iconOnlyResizeTimeout);
+        }
+        this._iconOnlyResizeTimeout = setTimeout(() => {
+            switch (this.iconOnlyAtBreakpoint) {
+                case 'mobile': {
+                    this._isIconOnly = isSmallerThanScreen('tablet');
+                    break;
+                }
+                case 'tablet': {
+                    this._isIconOnly = isSmallerThanScreen('desktop-xs');
+                    break;
+                }
+                case 'desktop': {
+                    this._isIconOnly = isSmallerThanScreen('desktop-xl');
+                    break;
+                }
+            }
+            this._iconOnlyResizeTimeout = undefined;
+        }, 200);
+    }
     _getIcon() {
         if (!this.icon) {
             return;
@@ -992,6 +1030,26 @@ export class Button {
                 "attribute": "icon-only",
                 "defaultValue": "false"
             },
+            "iconOnlyAtBreakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'mobile' | 'tablet' | 'desktop' | 'never'",
+                    "resolved": "\"desktop\" | \"mobile\" | \"never\" | \"tablet\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the button is icon only on mobile"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-only-at-breakpoint",
+                "defaultValue": "'never'"
+            },
             "iconClass": {
                 "type": "string",
                 "mutable": false,
@@ -1144,6 +1202,11 @@ export class Button {
             }
         };
     }
+    static get states() {
+        return {
+            "_isIconOnly": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "onClick",
@@ -1168,6 +1231,12 @@ export class Button {
             }];
     }
     static get elementRef() { return "_host"; }
+    static get watchers() {
+        return [{
+                "propName": "iconOnlyMobile",
+                "methodName": "_onWindowResize"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",
@@ -1175,6 +1244,12 @@ export class Button {
                 "target": undefined,
                 "capture": true,
                 "passive": false
+            }, {
+                "name": "resize",
+                "method": "_onWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
             }];
     }
 }

package/dist/collection/components/molecules/button/button.stories.js

@@ -9,7 +9,7 @@ const meta = {
 };
 export default meta;
 export const Default = {
-    render: ({ label, as, variant, active, underline, href, target, size, type, loading, chevron, 'chevron-position': chevronPosition, disabled, icon, 'icon-only': iconOnly, 'icon-position': iconPosition, 'icon-flip': iconFlip, 'icon-rotate': iconRotate, 'inherit-text': inheritText, 'button-group-position': buttonGroupPosition, class: className, error, }) => html `
+    render: ({ label, as, variant, active, underline, href, target, size, type, loading, chevron, 'chevron-position': chevronPosition, disabled, icon, 'icon-only': iconOnly, 'icon-only-mobile': iconOnlyMobile, 'icon-position': iconPosition, 'icon-flip': iconFlip, 'icon-rotate': iconRotate, 'inherit-text': inheritText, 'button-group-position': buttonGroupPosition, class: className, error, }) => html `
 		<p-button
 			label=${label ?? nothing}
 			as=${as ?? nothing}
@@ -26,6 +26,7 @@ export const Default = {
 			disabled=${disabled ?? nothing}
 			icon=${icon ?? nothing}
 			icon-only=${iconOnly ?? nothing}
+			icon-only-mobile=${iconOnlyMobile ?? nothing}
 			icon-position=${iconPosition ?? nothing}
 			icon-flip=${iconFlip ?? nothing}
 			icon-rotate=${iconRotate ?? nothing}

package/dist/collection/components/molecules/button-group/button-group.component.js

@@ -12,7 +12,7 @@ export class ButtonGroup {
         this._checkButtons();
     }
     render() {
-        return (h(Host, { key: '5997ff33e4339b436cce097c60f06c1fe2813079', class: 'flex items-center' }, h("slot", { key: '10ce08be5f32f0d83f8dc499ff3223b1c02de850' })));
+        return (h(Host, { key: '90fbb14cc7449008e954a0339b4c38cb7e8d38fa', class: 'flex items-center' }, h("slot", { key: 'f990d19ddf76095aed8248df3c19b05910d94104' })));
     }
     slotchange() {
         this._checkButtons();

package/dist/collection/components/molecules/calendar/calendar.component.js

@@ -192,7 +192,7 @@ export class Calendar {
         }
     }
     render() {
-        return (h(ThemedHost, { key: '3cba341042ffd423d6f3b3fe5a340558e8c8fb53' }, h("div", { key: '4306fc8b190e94956213992963dc851857475a2f', class: calendar({ variant: this.variant }) }, this._getView())));
+        return (h(ThemedHost, { key: '1ac6072fee80f1e4334238c04e0743e89b695512' }, h("div", { key: '0f8f9718527bdca1d0c1e44615c19358e749564d', class: calendar({ variant: this.variant }) }, this._getView())));
     }
     _checkTodayButton() {
         if (this._maxDate && isAfter(this._today, this._maxDate)) {

package/dist/collection/components/molecules/content-slider/content-slider.component.js

@@ -47,13 +47,13 @@ export class ContentSlider {
         }
     }
     render() {
-        return (h(Host, { key: '6ba183884628b200ca1b7d13b91818499096c184' }, h("div", { key: '1ec72c6d71e138e581a35738b74171840f7f4422', class: `
+        return (h(Host, { key: 'a82d50f13b050b1b57c193f79e6791c7c69f0e7c' }, h("div", { key: '0009964bd2f75e75e231c0f556e7751dab05bb07', class: `
        slider
        ${!this.disableDrag && 'draggable'}
        ${this._dragging && 'dragging'}
      `, ref: el => (this._sliderRef = el), style: {
                 height: `${this._outerHeight}px`,
-            }, onMouseDown: e => this._mouseDownHandler(e), onMouseMove: e => this._mouseMoveHandler(e), onTouchMove: e => this._mouseMoveHandler(e), onTouchStart: e => this._mouseDownHandler(e) }, h("div", { key: '5658bdaf3c369812670b4e8973287453c2d2cdab', class: 'inner-slider', ref: ref => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, h("slot", { key: '84564041f76f577b1a20750f1d7224404a3f1b68', onSlotchange: () => this._slotChange() }))), h("div", { key: '91b3ae9d5bcb8a52c77730d45de57f612fd90c08', class: `
+            }, onMouseDown: e => this._mouseDownHandler(e), onMouseMove: e => this._mouseMoveHandler(e), onTouchMove: e => this._mouseMoveHandler(e), onTouchStart: e => this._mouseDownHandler(e) }, h("div", { key: '2ea50b0a0fb3e0e781269bc626f7b03ebda586ae', class: 'inner-slider', ref: ref => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, h("slot", { key: '753355eff5f15324abe3f217883a6ff76137136b', onSlotchange: () => this._slotChange() }))), h("div", { key: '3f932e53f0face6e5f2eaff2f59df40768b6c227', class: `
        indicator
        ${this.hideMobileIndicator && 'hidden'}
      ` }, this._filteredItems.map((_, i) => (h("div", { class: `

package/dist/collection/components/molecules/cropper/cropper.component.js

@@ -42,7 +42,7 @@ export class Cropper {
         const themeColor = state.theme === 'dark'
             ? 'rgba(70, 75, 84, 0.5)'
             : 'rgba(255, 255, 255, 0.5)';
-        return (h(ThemedHost, { key: '958d615c7f31c0d060318fb5949a3022da7e9664' }, this._loaded && (h("cropper-canvas", { key: '9e243578589dfa0a3b13354295f5d2685be4f551', class: '\n        h-[17.5rem] w-full border-0 border-b border-solid border-off-white-700\n        bg-white\n        dark:border-hurricane-200\n      ', onAction: () => this._onAction() }, h("cropper-image", { key: 'f572e1dcdc65a9b00b753ea48f41cc5d12ffa414', alt: 'Picture', crossorigin: 'anonymous', ref: ref => this._setImageRef(ref), src: this.value, scalable: true, translatable: true }), h("cropper-shade", { key: 'feacefa121adf503f6c5686bfc07dc268ae3f272', class: 'aspect-branding rounded-full', "theme-color": themeColor, hidden: true }), h("cropper-selection", { key: '3d8539b17d0033500e46b27cf303a7fc18aac26e', "aspect-ratio": '1', "initial-coverage": '0.7', ref: ref => (this._selectionRef = ref) }), h("cropper-handle", { key: 'd1103eab524b40a31f62591c1be07863ba13a436', action: 'move', plain: true }))), h("p-range", { key: 'a8a13717467bcf06c0f8f7e40ca85067308cba55', class: '\n       w-full px-14\n       tablet:max-w-xs tablet:px-1\n     ', value: this._currentScale, onValueChange: ev => this._onInput(ev.detail) })));
+        return (h(ThemedHost, { key: '6990cbf026a62127f1cf302389a2cff1e8188714' }, this._loaded && (h("cropper-canvas", { key: '75ffe50e67aec9e6c3f73bcb7f5bb2649fb6697b', class: '\n        h-[17.5rem] w-full border-0 border-b border-solid border-off-white-700\n        bg-white\n        dark:border-hurricane-200\n      ', onAction: () => this._onAction() }, h("cropper-image", { key: 'f2f93c7aa2c59074fd673c9ff6c678c102b777ae', alt: 'Picture', crossorigin: 'anonymous', ref: ref => this._setImageRef(ref), src: this.value, scalable: true, translatable: true }), h("cropper-shade", { key: 'd600a2b3f73c1aa89addbe0c6f5ab98f4fe3757b', class: 'aspect-branding rounded-full', "theme-color": themeColor, hidden: true }), h("cropper-selection", { key: '0465c5418129587bab613ffe5e11bb4a33de1e1f', "aspect-ratio": '1', "initial-coverage": '0.7', ref: ref => (this._selectionRef = ref) }), h("cropper-handle", { key: '5bcca95b800e11a96c274017cc9fd743d421fa26', action: 'move', plain: true }))), h("p-range", { key: '236d72301a785e8cb16bd5eacaa15f7cf678f8e9', class: '\n       w-full px-14\n       tablet:max-w-xs tablet:px-1\n     ', value: this._currentScale, onValueChange: ev => this._onInput(ev.detail) })));
     }
     _setImageRef(ref) {
         if (this._imageRef || !ref) {

package/dist/collection/components/molecules/datepicker/datepicker.component.js

@@ -213,7 +213,7 @@ export class Datepicker {
         }
     }
     render() {
-        return (h("p-dropdown", { key: '1da0f9a54c53581dc347bfa7cbf2c7489542948b', allowOverflow: true, applyFullWidth: false, applyMaxWidth: false, disableTriggerClick: true, insideClick: true, isDatepicker: true, placement: this.placement, show: this._showDropdown, strategy: this.strategy }, h("p-field", { key: 'c9e8d5e2d0e4ee3750fce8bca41b9383fcd45deb', autoShowError: false, disabled: asBoolean(this.disabled), error: this.error, focused: this._showDropdown, forceShowTooltip: !!this.error?.length && !this._showDropdown, helper: this.helper, icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', label: this.label, loading: this.loading, placeholder: this.placeholder, prefix: this.prefix, required: asBoolean(this.required), showOptional: asBoolean(this.showOptional), size: this.size, slot: 'trigger', value: this._getFormattedDate(), onBlur: (ev) => this._onBlur(ev), onFocus: () => this._onFocus(), onInputRefChange: ev => (this._inputRef = ev.detail), onValueChange: ev => this._onValueChange(ev.detail) }), this.enableNativePicker && this._isMobileBrowser && (h("input", { key: 'cbd64fc3655995d41f776c23c98deb767e4df1cf', class: '\n        pointer-events-none absolute left-0 top-0 z-[-10] overflow-hidden\n        opacity-0\n      ', max: this.maxDate &&
+        return (h("p-dropdown", { key: '41ebf8ceb52a6eab7005df2c8d03718ac71ad5c0', allowOverflow: true, applyFullWidth: false, applyMaxWidth: false, disableTriggerClick: true, insideClick: true, isDatepicker: true, placement: this.placement, show: this._showDropdown, strategy: this.strategy }, h("p-field", { key: 'dd5e53303c5e4ba9e13a04d2b661e9da77deda0b', autoShowError: false, disabled: asBoolean(this.disabled), error: this.error, focused: this._showDropdown, forceShowTooltip: !!this.error?.length && !this._showDropdown, helper: this.helper, icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', label: this.label, loading: this.loading, placeholder: this.placeholder, prefix: this.prefix, required: asBoolean(this.required), showOptional: asBoolean(this.showOptional), size: this.size, slot: 'trigger', value: this._getFormattedDate(), onBlur: (ev) => this._onBlur(ev), onFocus: () => this._onFocus(), onInputRefChange: ev => (this._inputRef = ev.detail), onValueChange: ev => this._onValueChange(ev.detail) }), this.enableNativePicker && this._isMobileBrowser && (h("input", { key: 'db6172b1cbd2d80842a127c1a14b821460ecce12', class: '\n        pointer-events-none absolute left-0 top-0 z-[-10] overflow-hidden\n        opacity-0\n      ', max: this.maxDate &&
                 format(new Date(this.maxDate), 'yyyy-MM-dd', {
                     locale: state.locale === 'nl' ? nl : enUS,
                 }), min: this._minDate &&
@@ -222,7 +222,7 @@ export class Datepicker {
                 }), ref: ref => (this._dateInputRef = ref), slot: 'trigger', type: this.mode === 'day' ? 'date' : 'month', value: this._value &&
                 format(this._value, 'yyyy-MM-dd', {
                     locale: state.locale === 'nl' ? nl : enUS,
-                }), onInput: ev => this._onNativeInput(ev) })), h("div", { key: '398a65da8a0b8bda9177375d75686123278af66a', slot: 'items', tabIndex: -1 }, h("p-calendar", { key: 'a0fd9ec5fdeb9a42bd7394599c75659feca77489', disableWeekends: this.disableWeekends, disabledDates: this.disabledDates, enableToday: this.enableToday, maxDate: this.maxDate, minDate: this.minDate, mode: this.mode, preselectToday: this.preselectToday, todayText: this.todayText, value: this._value, variant: 'embedded', onValueChange: ({ detail }) => (this.value = detail) }))));
+                }), onInput: ev => this._onNativeInput(ev) })), h("div", { key: '31ca023225ae50db2c07ca4325a746e13ee6f4a5', slot: 'items', tabIndex: -1 }, h("p-calendar", { key: '705efb5369a1d86ac8261ad6ad794732e77110c9', disableWeekends: this.disableWeekends, disabledDates: this.disabledDates, enableToday: this.enableToday, maxDate: this.maxDate, minDate: this.minDate, mode: this.mode, preselectToday: this.preselectToday, todayText: this.todayText, value: this._value, variant: 'embedded', onValueChange: ({ detail }) => (this.value = detail) }))));
     }
     documentClickHandler({ target }) {
         if (!this._showDropdown || childOf(target, this._el)) {

package/dist/collection/components/molecules/dropdown/dropdown.component.js

@@ -133,12 +133,12 @@ export class Dropdown {
         this._checkItems();
     }
     render() {
-        return (h(Host, { key: '1c060fa3b674315b449445bc12cb7914ff809f42', class: 'relative' }, h("div", { key: '526090a21972996fe865c251ab109170b3031f2d', class: 'trigger', ref: el => (this._trigger = el), onClick: () => this._triggerClickHandler() }, h("slot", { key: 'c77c6b4e01d5f8192aada325f62d416f08ef50d5', name: 'trigger' })), h("div", { key: '49300cd262ccd3f58aaea3abec9a00d210c340b8', class: 'relative w-full' }, h("p-dropdown-menu-container", { key: 'c084d5a6d26f1c47b38ddcca5eae7727bc12e0e2', allowOverflow: this.allowOverflow, class: cn(dropdownContainerClass({
+        return (h(Host, { key: 'daa5ca812dc1ec72b95737a02bbff9e492ad7fe3', class: 'relative' }, h("div", { key: '9842f327983cfdc6666eaa9dd7b6010f0d13efe6', class: 'trigger', ref: el => (this._trigger = el), onClick: () => this._triggerClickHandler() }, h("slot", { key: '4195411e9dff36f800f91149544e7135d22cb44b', name: 'trigger' })), h("div", { key: '48f8874c60a8c69fa6ade61325415d5e70761748', class: 'relative w-full' }, h("p-dropdown-menu-container", { key: 'ad92d728bbb379c6cc926b9b747da4cc3fc17665', allowOverflow: this.allowOverflow, class: cn(dropdownContainerClass({
                 strategy: this.strategy,
                 maxWidth: this.applyMaxWidth,
                 fullWidth: this.applyFullWidth && !this.applyMaxWidth,
                 isDatepicker: this.isDatepicker,
-            }), this.containerClass), "data-placement": this.placement, "data-strategy": this.strategy, fullWidth: this.applyFullWidth && !this.applyMaxWidth, maxWidth: this.applyMaxWidth, ref: el => this._load(el), role: 'popover', scrollable: this.scrollable, variant: this.variant, onClick: () => this._containerClickHandler() }, h("slot", { key: '8e05aa667dbad7c2a443dcb7c513b5049ae966e5', name: 'items' })))));
+            }), this.containerClass), "data-placement": this.placement, "data-strategy": this.strategy, fullWidth: this.applyFullWidth && !this.applyMaxWidth, maxWidth: this.applyMaxWidth, ref: el => this._load(el), role: 'popover', scrollable: this.scrollable, variant: this.variant, onClick: () => this._containerClickHandler() }, h("slot", { key: '8d131c1ee5ca981f8d5ea9931922cf5061e7d816', name: 'items' })))));
     }
     _checkButtons(active = false) {
         const buttons = this._el.querySelectorAll('p-button[slot="trigger"]');

package/dist/collection/components/molecules/dropzone/dropzone.component.js

@@ -115,20 +115,20 @@ export class Dropzone {
     }
     render() {
         const hasContent = this._el.innerHTML?.length > 0;
-        return (h(ThemedHost, { key: '3bdbd0ce35e34159cea4a25cd850f9a193a3f946' }, h("div", { key: 'ebf85859aa357664417f8086c865de8325a225fe', class: dropzone({
+        return (h(ThemedHost, { key: '7c1db4cb49b8699a6aa11ffb0b6fe4d496dabee2' }, h("div", { key: 'a059feda628b54161629ea0e05dbbfb0fa8e4aba', class: dropzone({
                 isOver: this._isOver,
                 uploaded: this.uploaded,
-            }), onClick: () => this._uploadClick() }, !this.loading && this.showIcon && (h("p-icon", { key: '6dca37d76b00f5da9f5b4b8e028c83b0578fb811', class: cn(`
+            }), onClick: () => this._uploadClick() }, !this.loading && this.showIcon && (h("p-icon", { key: '79d280c89d5274171ba689463491ab9386712353', class: cn(`
           group-hover/dropzone:text-indigo-900
           dark:group-hover/dropzone:text-indigo-700
         `, {
                 'text-positive-green-800': this.uploaded,
                 'text-storm-300 dark:text-hurricane-200': !this._isOver && !this.uploaded,
                 'text-indigo-900 dark:text-indigo-700': this._isOver,
-            }), variant: this.icon })), this.loading && h("p-loader", { key: 'b6444e1d0c4519023ba628cab29b166812b0d853' }), hasContent && (h("p", { key: 'f2e434afe8daadfe90e3b1d7257c98a610405689', class: cn('m-0 p-0 text-lg font-bold', {
+            }), variant: this.icon })), this.loading && h("p-loader", { key: '7c28c02bada55efe9d2045b3a42a7c3c2139ee76' }), hasContent && (h("p", { key: '78208423e2b95c23a5303f8fca3300e06b5b4d86', class: cn('m-0 p-0 text-lg font-bold', {
                 'dark:text-white': !this.uploaded || this._isOver,
                 'text-storm-500': this.uploaded && !this._isOver,
-            }) }, h("slot", { key: 'f7054d8e072e40e6a294b8feec5d53c6368df633' }))), this.uploaded && !this._isOver && (h("div", { key: 'ad137466b30a21dd4ba66db226968cc17a8e5f8c', class: 'flex items-center gap-2 text-positive-green-800' }, h("p-icon", { key: '343c6b31e638f961430b7421e44faedbc8c00e24', variant: 'check-circle' }), h("span", { key: '6ada9196c435e0642fb8528fc4ba2d28ba6b1d29', class: 'font-medium' }, this.addedString))), (!this.uploaded || this._isOver) && (h("div", { key: 'e928b7b3a1e60e699f9ecc8de2f4bc48c4162032', class: cn([
+            }) }, h("slot", { key: 'c0656e295223d620af579278f1c763eb7f368acf' }))), this.uploaded && !this._isOver && (h("div", { key: 'e5ebd90b568883a025118f3df155188b21f1f67e', class: 'flex items-center gap-2 text-positive-green-800' }, h("p-icon", { key: '782fc223bd7de1a5d2e7e78bce753e32160fb477', variant: 'check-circle' }), h("span", { key: '063369d8309f4d992b53d8db3165d4f9ed663992', class: 'font-medium' }, this.addedString))), (!this.uploaded || this._isOver) && (h("div", { key: 'c05af902cc62cfdbb7feea9de5aabf567c6d22f5', class: cn([
                 'flex flex-col text-center',
                 'group-hover/dropzone:opacity-50',
                 `
@@ -137,7 +137,7 @@ export class Dropzone {
          `,
             ], {
                 'opacity-50': this._isOver,
-            }) }, h("span", { key: '4533eac1b324933cc3aedaf84b8aa7954ac0b09d', class: 'font-medium' }, this.dragFileString), h("span", { key: 'bd5e993c33adc175ed2f81eee8a1c5350318df7a', class: 'font-normal' }, this.orClickString)))), h("input", { key: '6efc0733c35a09bce5b2a80de4870eb96b5e69f1', accept: this.acceptGroup == 'any' ? '' : 'image/*', class: 'hidden', multiple: this.allowMultiple === true ? true : undefined, ref: el => (this._fileRef = el), type: 'file', onChange: ev => this._onFileChange(ev) })));
+            }) }, h("span", { key: 'c9ec4e45968281ce5c2033264ff7c972b25bd799', class: 'font-medium' }, this.dragFileString), h("span", { key: 'bc2aac22c381cdb7d5cbfaa42627f57d08cab115', class: 'font-normal' }, this.orClickString)))), h("input", { key: 'd7569817461cc246b0d17e9f8cf238ea169ad436', accept: this.acceptGroup == 'any' ? '' : 'image/*', class: 'hidden', multiple: this.allowMultiple === true ? true : undefined, ref: el => (this._fileRef = el), type: 'file', onChange: ev => this._onFileChange(ev) })));
     }
     onDrop(ev) {
         const files = this._getFiles(ev);

package/dist/collection/components/molecules/empty-state/empty-state.component.js

@@ -59,11 +59,11 @@ export class EmptyState {
         const hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
         const hasContentSlot = !!this._el.querySelector(':scope > [slot="content"]');
         const hasActionSlot = !!this._el.querySelector(':scope > [slot="action"]');
-        return (h(ThemedHost, { key: 'a1c5b7682ac5ffd11beb25f2dd91d156becec4a3' }, h("div", { key: 'd19221f86c59cc8583d1e96f59263e01ea4ad22d', class: emptyState({
+        return (h(ThemedHost, { key: '1ee5241659e6ee9a39f0d3f641374b3fa9d7d713' }, h("div", { key: '2a170cfa8265e140da60465554908925a9a7b30c', class: emptyState({
                 enableAction: asBoolean(this.enableAction, true),
             }), onClick: ev => this.enableAction && !this.actionLoading
                 ? this.action.emit(ev)
-                : undefined }, this.illustration && (h("p-illustration", { key: '0a078690887ee5eba9c383fe8ccba7aaeb110cdc', class: 'mb-8 text-5xl text-indigo-600', variant: this.illustration })), hasHeaderSlot ? (h("slot", { name: 'header' })) : (this.header?.length && (h("p", { class: '\n          my-0 text-center font-ambit text-sm font-bold text-storm-500\n          dark:text-white\n        ' }, this.header))), hasContentSlot ? (h("slot", { name: 'content' })) : (this.content?.length && (h("p", { class: '\n          my-0 text-center text-sm font-normal text-storm-300\n          dark:text-hurricane-200\n        ' }, this.content))), this.enableAction &&
+                : undefined }, this.illustration && (h("p-illustration", { key: 'd843ed25df3ad3aee82b568419b553272df82155', class: 'mb-8 text-5xl text-indigo-600', variant: this.illustration })), hasHeaderSlot ? (h("slot", { name: 'header' })) : (this.header?.length && (h("p", { class: '\n          my-0 text-center font-ambit text-sm font-bold text-storm-500\n          dark:text-white\n        ' }, this.header))), hasContentSlot ? (h("slot", { name: 'content' })) : (this.content?.length && (h("p", { class: '\n          my-0 text-center text-sm font-normal text-storm-300\n          dark:text-hurricane-200\n        ' }, this.content))), this.enableAction &&
             (hasActionSlot ? (h("slot", { name: 'action' })) : (h("p-button", { class: 'mt-4', icon: this.actionIcon, iconPosition: this.actionIconPosition, loading: this.actionLoading, variant: this.actionVariant }, this.actionText))))));
     }
     static get is() { return "p-empty-state"; }

package/dist/collection/components/molecules/field/container/field-container.component.js

@@ -105,27 +105,27 @@ export class FieldContainer {
     }
     render() {
         const { hasHeaderSlot, hasErrorSlot, helper, label, errorAndErrorIsNotBoolean, } = this._getSlotInfo();
-        let contentSlot = (h("slot", { key: 'ee38d5be02a899e0d63749e4b13c17cae4711637', name: 'content', slot: 'trigger' }));
+        let contentSlot = (h("slot", { key: '5291beab9a04f71a20dc147266a4517aefc7026b', name: 'content', slot: 'trigger' }));
         if (this.loading) {
-            contentSlot = (h("p-loader", { key: '5e445ed28e4ff1254b6c724d5bb859d37ed669b3', class: loader({ variant: this.variant, size: this.loadingSize }), slot: 'trigger', variant: 'ghost' }));
+            contentSlot = (h("p-loader", { key: '7af3ba90aeecec528b526c5257f9fb53e601c795', class: loader({ variant: this.variant, size: this.loadingSize }), slot: 'trigger', variant: 'ghost' }));
         }
-        return (h(ThemedHost, { key: 'b9e499d2dc7e962d706997c8d16f61c5252f118d' }, h("label", { key: '4233b212952fa641e2509ea1c942453e77ec5f82', class: cn('flex h-inherit w-inherit flex-col gap-1', {
+        return (h(ThemedHost, { key: '2aade5cc2ec5c8302d475aefc62b8a178027fbd0' }, h("label", { key: '5a0920e414f7f5f0333d2b5f805e016b98b19baf', class: cn('flex h-inherit w-inherit flex-col gap-1', {
                 'cursor-auto': this.variant === 'read',
-            }), htmlFor: this.id }, h("div", { key: '20e48d5f03656193a1b837070ae750a8d4296465', class: cn(`
+            }), htmlFor: this.id }, h("div", { key: '52f9924430ca76dd5492c8c5e78a5a640e132e29', class: cn(`
          flex items-end justify-between gap-1
          empty:hidden
        `, {
                 'flex-row-reverse': this.align === 'end',
-            }) }, (!!label?.length || !!helper?.length) && (h("div", { key: 'ee34ef249bb30262496793d5f8417e137313cf03', class: 'flex min-w-0 gap-2', onClick: () => this.focus.emit() }, h("span", { key: '1a73b8c8c753253a46be784bbd03aaf515c33d3d', class: '\n           min-w-0 overflow-hidden text-ellipsis text-xs font-medium\n           text-storm-300\n           dark:text-hurricane-200\n         ' }, label), helper && (h("p-helper", { key: 'fe0c268b0fee3a855bcc44ef844ca8a2a727dee2', class: 'flex flex-shrink-0', placement: 'top' }, helper)))), ((!asBoolean(this.required) && asBoolean(this.showOptional)) ||
-            hasHeaderSlot) && (h("div", { key: '14466e8a589be9b1b599750e9d94fdd507e63637', class: 'flex items-center gap-1' }, !asBoolean(this.required) &&
+            }) }, (!!label?.length || !!helper?.length) && (h("div", { key: '4af64a1df141b112f28138a1f6a01ab6016bb642', class: 'flex min-w-0 gap-2', onClick: () => this.focus.emit() }, h("span", { key: '6aae524554e4bd91eb9e316b7b69210be1e24b32', class: '\n           min-w-0 overflow-hidden text-ellipsis text-xs font-medium\n           text-storm-300\n           dark:text-hurricane-200\n         ' }, label), helper && (h("p-helper", { key: '148aa5b036d4b2cd74cb8d55f653082d9fb25a35', class: 'flex flex-shrink-0', placement: 'top' }, helper)))), ((!asBoolean(this.required) && asBoolean(this.showOptional)) ||
+            hasHeaderSlot) && (h("div", { key: '5c7df3260b6add948909d13001a8f5f1a62a296b', class: 'flex items-center gap-1' }, !asBoolean(this.required) &&
             asBoolean(this.showOptional) &&
-            this.variant === 'write' && (h("span", { key: '2103c58a2d6283a3776386fc48b817b0a6c11775', class: '\n             text-xs font-medium text-storm-200\n             dark:text-hurricane-300\n           ' }, this.optionalTemplate())), hasHeaderSlot && h("slot", { key: 'daa792f0973fb224b65694b2b3da0bce094bc013', name: 'header' })))), h("p-tooltip", { key: 'f5a7db0a4adf1b122a1297e3216c67abd4dc824e', class: cn({
+            this.variant === 'write' && (h("span", { key: '259e21450bdd3458cba03edf5106f2e31ffb1ac1', class: '\n             text-xs font-medium text-storm-200\n             dark:text-hurricane-300\n           ' }, this.optionalTemplate())), hasHeaderSlot && h("slot", { key: 'dfc59d9d34107403e05a4106b76f48eaf33efe0c', name: 'header' })))), h("p-tooltip", { key: 'b92186277a5c86017167ebfe66f360c2c569ea09', class: cn({
                 'w-full': this.variant === 'write' || this.loading,
                 'ml-auto': this.align === 'end',
                 'font-normal': this.variant === 'read',
                 'text-storm-500 dark:text-white': this.variant === 'read',
             }), content: this.error, enableUserInput: false, placement: this.errorPlacement, show: errorAndErrorIsNotBoolean &&
-                asBoolean(this.forceShowTooltip, false), variant: 'error' }, hasErrorSlot && (h("slot", { key: '38ce560479de40f7b704bf9f7736f217286a39b8', name: 'error', slot: 'content' })), contentSlot))));
+                asBoolean(this.forceShowTooltip, false), variant: 'error' }, hasErrorSlot && (h("slot", { key: '40046f1ba8136dcaf7a37c11edeb8ba75b115415', name: 'error', slot: 'content' })), contentSlot))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);

package/dist/collection/components/molecules/field/field/field.component.js

@@ -371,8 +371,8 @@ export class Field {
     }
     render() {
         const { id, prefix, suffix, hasHeaderSlot, hasLabelSlot, hasHelperSlot, hasErrorSlot, hasValueSlot, } = this._getSlotInfo();
-        return (h(ThemedHost, { key: '26ead7c05e6305596106f154754986a05237c454' }, h("p-field-container", { key: '8828b6378d5a3e5c7c98dd52c0bc34ff7500ba02', align: this.align, error: this.error, forceShowTooltip: (!!this.error?.length && !this._focused && this.autoShowError) ||
-                (!!this.error?.length && this.forceShowTooltip), helper: this.helper, id: id, label: this.label, loading: this.loading, loadingSize: this.size, required: this.required, showOptional: this.showOptional, variant: this.variant }, hasLabelSlot && (h("slot", { key: 'c7a0344e9aec6a7e1c30e173fd5ceaf65268a912', name: 'label', slot: 'label' })), hasHeaderSlot && (h("slot", { key: '9a0bdbb419369c6d658d5e1b855913ffe4dd42b0', name: 'header', slot: 'header' })), hasHelperSlot && (h("slot", { key: 'dc417538960faecaa20898f52138042b52fc0232', name: 'helper', slot: 'helper' })), hasErrorSlot && (h("slot", { key: '9e7659556f4bb3888d63ee6ca9b7d59bd7201db9', name: 'error', slot: 'error' })), h("div", { key: 'e0f979932fd5afb26e60df3656c503475bbfb43e', class: field({
+        return (h(ThemedHost, { key: '537b14741e48d7aa20121d9d4e0cb4f04fcf7eab' }, h("p-field-container", { key: 'ddb458b4fda84393779f1c2668541b09baf008a3', align: this.align, error: this.error, forceShowTooltip: (!!this.error?.length && !this._focused && this.autoShowError) ||
+                (!!this.error?.length && this.forceShowTooltip), helper: this.helper, id: id, label: this.label, loading: this.loading, loadingSize: this.size, required: this.required, showOptional: this.showOptional, variant: this.variant }, hasLabelSlot && (h("slot", { key: '22e0fad26aa04bc18833eeb6b86822ad22a10586', name: 'label', slot: 'label' })), hasHeaderSlot && (h("slot", { key: '2c451ce3554067b83effa28e7fb3afc350c07838', name: 'header', slot: 'header' })), hasHelperSlot && (h("slot", { key: '5a7b1748f39fa6716d6ea84dc822f8a91a38a255', name: 'helper', slot: 'helper' })), hasErrorSlot && (h("slot", { key: 'b02b47a5fa9768792a1de132beccfcb94637194d', name: 'error', slot: 'error' })), h("div", { key: '1beb78cff29f30c5adad7e3cec93961caaf34b08', class: field({
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),
                 focused: asBoolean(this.focused) || this._focused,
@@ -383,7 +383,7 @@ export class Field {
                 ? `${this.value}`
                 : undefined }, (this.error?.length ||
             prefix ||
-            (this.icon && this.iconPosition === 'start')) && (h("div", { key: '60384a989f7f7ce43dff577e5275d12d955f85ff', class: prefixAndSuffix({
+            (this.icon && this.iconPosition === 'start')) && (h("div", { key: '5c157f96f660ae83468219a63f08abc279dfc5cc', class: prefixAndSuffix({
                 variant: this.variant,
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),
@@ -395,7 +395,7 @@ export class Field {
                 'mt-1': this.variant === 'read' && this.size === 'base',
             }), flip: this.iconFlip, rotate: this.iconRotate, variant: this.error?.length ? 'warning' : this.icon })) : (prefix))), this._getContent(hasValueSlot, id), (suffix ||
             (this.type === 'password' && this.enablePasswordEye) ||
-            (this.icon && this.iconPosition === 'end')) && (h("div", { key: '7bfc680f8dff73606785066d9e3ad3fbf7ad5e83', class: cn(prefixAndSuffix({
+            (this.icon && this.iconPosition === 'end')) && (h("div", { key: '470f92267fb2a7a44a52b58259539b2940943221', class: cn(prefixAndSuffix({
                 variant: this.variant,
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),

package/dist/collection/components/molecules/navigation/item/navigation-item.component.js

@@ -88,13 +88,13 @@ export class NavigationItem {
     render() {
         const TagType = this.as;
         const active = asBoolean(this.active) || this.class?.includes('active');
-        return (h(ThemedHost, { key: '60037e99c90aa900084ccd67a78a98b3db5625e6', class: cn('inline-block', this.class) }, h(TagType, { key: '461cf0d042eb867040573c3133b5f51e87309838', class: navigationItem({
+        return (h(ThemedHost, { key: 'ae16c9de7454fc81eabe1007ddacadc0910c30df', class: cn('inline-block', this.class) }, h(TagType, { key: '5762e034f8994b2b545254e74bda83648051f7b4', class: navigationItem({
                 icon: !!this.icon,
                 active,
-            }), href: this.href, target: this.target }, h("div", { key: '569400092cc3b9b6efe7097023c5f5ea0c748f4a', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: '9b8f03b0ebce991312cc62d648339d2552053dca', variant: this.icon })), h("span", { key: '02aa90de89850780ab494c3d4e18843b0cbdcd6a', class: cn({
+            }), href: this.href, target: this.target }, h("div", { key: '3f8f23069bc9bb4e74f21bdaf84a5799c94c1923', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: '35a783b85c8ecd4817c2d956f2146af0023ab103', variant: this.icon })), h("span", { key: '850af9f755f29426abbc6c9aec0049b2c60bc6ae', class: cn({
                 'has-counter': !!this.counter,
                 'w-full': this.applyFullWidth,
-            }) }, h("slot", { key: '60440cff2953b9066e540c70e8f62a52e94de31e' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: 'cba0286d29ae348de152b8e391bebe657d2e38be' }, this.counter)), !!this.loading && h("p-loader", { key: '94f0ce93c19385f562c1af309fd094771ad1733a', class: 'ml-auto' }))));
+            }) }, h("slot", { key: '9ad7ed612cba22fd9e9586b2f7abb982edb7b472' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: 'd5a732b8445a36b876835863bb5a3e01d42ad0f8' }, this.counter)), !!this.loading && h("p-loader", { key: 'd3590283a8e0bb1ed5247146fff810c841577588', class: 'ml-auto' }))));
     }
     static get is() { return "p-navigation-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/molecules/navigation/section/navigation-section.component.js

@@ -6,7 +6,7 @@ export class NavigationSection {
      */
     header;
     render() {
-        return (h(ThemedHost, { key: 'b8d2e03813c32fa7b3e14261ef0aef67a1bd9ba9', class: 'flex flex-col gap-2' }, this.header?.length > 0 && (h("p-navigation-title", { key: 'a7440110aa669b2503ebfb06a84ec2b9b8dac749' }, this.header)), h("div", { key: '85f7170c056774b1c63d495be8d76a655db17c29', class: 'flex flex-col' }, h("slot", { key: '67d43e4c0737365815e7a26a0e400016239b98e8' }))));
+        return (h(ThemedHost, { key: 'aabfc291e288f02dcd4968f03899077fb318abf0', class: 'flex flex-col gap-2' }, this.header?.length > 0 && (h("p-navigation-title", { key: '507af087c66bdb236bb54af09819fbda57180bf7' }, this.header)), h("div", { key: 'a6206f28cc39183855440bc575404817c9de5e3e', class: 'flex flex-col' }, h("slot", { key: '56bbabeb6a8884aaa667055ffb082753733d0c6f' }))));
     }
     static get is() { return "p-navigation-section"; }
     static get originalStyleUrls() {

package/dist/collection/components/molecules/pagination/pages/pagination-pages.component.js

@@ -61,7 +61,7 @@ export class PaginationPages {
         this._generate();
     }
     render() {
-        return (h(ThemedHost, { key: 'e589ea86868c500398b830d85774df1282097210' }, h("div", { key: '27936247b83b4a771f4974a7946cc1eb24829d5b', class: pagination({
+        return (h(ThemedHost, { key: 'db0857b24ba35b034ba1dc8143a29cbb9de2c549' }, h("div", { key: '80bb1005d3c1694d4f7e8aa0ef9914ecee7caaac', class: pagination({
                 hidden: this.hideOnSinglePage && this._set?.length === 3,
             }) }, this._set?.map(p => {
             if (p.type === 'previous' || p.type === 'next') {

package/dist/collection/components/molecules/pagination/pagination/pagination.component.js

@@ -60,12 +60,12 @@ export class Pagination {
     _hasPaginationPages = true;
     render() {
         const hidePageSizeSelect = this.hideOnSinglePage && this.total <= this.pageSizeOptions?.[0];
-        return (h(ThemedHost, { key: 'ad344b2396e42451325894b7376ed3d690057d83' }, h("div", { key: '671608ac708b712031af5c200c3ce07e8131cb03', class: pagination({
+        return (h(ThemedHost, { key: '9a30d6c7d566a90f8ac44f77fab07d2a2446c72f' }, h("div", { key: '85f2dcfc61804d63b84ad255652d446543c5c839', class: pagination({
                 hidden: (hidePageSizeSelect && !this._hasPaginationPages) ||
                     (!this.enablePaginationSize && !this.enablePaginationPages),
-            }) }, this.enablePaginationPages && this.enablePaginationSize && (h(Fragment, { key: '9cdc73872c65ab22e8c9ef4158be2016181fc6ba' }, h("p-pagination-size", { key: '5e574099fa2e4236d50d7593f19fcfb8c90ecc7f', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) }), !hidePageSizeSelect &&
+            }) }, this.enablePaginationPages && this.enablePaginationSize && (h(Fragment, { key: '1c51b9320c6a18d1acbb540f0728ea3ce79e02d6' }, h("p-pagination-size", { key: '08c020039f055c1205adac0ba4f9f32922781ebf', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) }), !hidePageSizeSelect &&
             this.hideOnSinglePage &&
-            this._hasPaginationPages && (h("p-divider", { key: '6b5d9cb7d4d8067b68b2c600eaa644cf6e14e6d5', class: '\n            mx-0 h-4 text-off-white-700\n            dark:text-hurricane-400\n          ', variant: 'vertical' })))), this.enablePaginationPages && (h("p-pagination-pages", { key: '9e3dba15164786562aa0d912a67f57f8b2cc7366', hideOnSinglePage: this.hideOnSinglePage, page: this.page, pageSize: this.pageSize, total: this.total, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPagesChange: ({ detail }) => {
+            this._hasPaginationPages && (h("p-divider", { key: '0587d352bea9161f7b708221a35cc9ccec2d81ff', class: '\n            mx-0 h-4 text-off-white-700\n            dark:text-hurricane-400\n          ', variant: 'vertical' })))), this.enablePaginationPages && (h("p-pagination-pages", { key: 'c0642155df14ece17ac84ea8a285a01b62f2bc28', hideOnSinglePage: this.hideOnSinglePage, page: this.page, pageSize: this.pageSize, total: this.total, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPagesChange: ({ detail }) => {
                 this._hasPaginationPages = detail > 1;
                 this.pagesChange.emit(detail);
             } })))));

package/dist/collection/components/molecules/pagination/size/pagination-size.component.js

@@ -79,18 +79,18 @@ export class PaginationSize {
         this._setLocales();
     }
     render() {
-        return (h(ThemedHost, { key: '42cf5dbb2f2d9fdb6a571bddc2b763b84f39024a', class: paginationSize({ hidden: asBoolean(this.hidden) }) }, h("p-dropdown", { key: 'a9952f6ba7d0712fc00310dbcc5ab565291dcb02', applyFullWidth: true, applyMaxWidth: false, chevronDirection: 'down', placement: 'top-start', onIsOpen: ({ detail }) => (this.dropdownIsOpen = detail) }, h("div", { key: 'cd819e27bdd8befc96ec722cc82179e7cb3f75eb', class: trigger({
+        return (h(ThemedHost, { key: '5e1b33344ed17b9091f9f77de65ae085832d689e', class: paginationSize({ hidden: asBoolean(this.hidden) }) }, h("p-dropdown", { key: '8084c18cb9241748daf3d4199e823083941c2624', applyFullWidth: true, applyMaxWidth: false, chevronDirection: 'down', placement: 'top-start', onIsOpen: ({ detail }) => (this.dropdownIsOpen = detail) }, h("div", { key: '43da06218c720985f7a7ab2496aa58c5250de3bf', class: trigger({
                 active: this.dropdownIsOpen,
-            }), slot: 'trigger' }, h("p", { key: 'e90cc9866f78ba047d97871ca957121110f2be10', class: 'min-w-0 flex-1 overflow-hidden text-ellipsis text-nowrap' }, this.itemTemplate
+            }), slot: 'trigger' }, h("p", { key: '6bce5c88289ba40dd11d25a9ef3bfb7268a8ccb1', class: 'min-w-0 flex-1 overflow-hidden text-ellipsis text-nowrap' }, this.itemTemplate
             ? this.itemTemplate(this.size)
-            : this._defaultItemTemplate(this.size)), h("p-icon", { key: '8b308f1855c5553483eb22583ab58185de48c107', class: cn([
+            : this._defaultItemTemplate(this.size)), h("p-icon", { key: 'ca9506f126086f9a4ac7ecd43654cdf41fcc3cf6', class: cn([
                 'flex-shrink-0',
                 'group-hover/pagination-size-trigger:text-storm-500',
                 'dark:group-hover/pagination-size-trigger:text-white',
             ], {
                 'text-storm-300 dark:text-hurricane-200': !this.dropdownIsOpen,
                 'text-storm-500 dark:text-white': !!this.dropdownIsOpen,
-            }), size: 'sm', variant: 'double-caret' })), h("slot", { key: '6f67fec42d1ad0093411c9e8a695577ddf9bd4cf', slot: 'items' }, this.sizeOptions.map(option => (h("p-dropdown-menu-item", { active: option === this.size, onClick: () => this._changeSize(option) }, this.itemTemplate
+            }), size: 'sm', variant: 'double-caret' })), h("slot", { key: '0c03ec3e9b917857a9f3b76f56c6bb7133ec988c', slot: 'items' }, this.sizeOptions.map(option => (h("p-dropdown-menu-item", { active: option === this.size, onClick: () => this._changeSize(option) }, this.itemTemplate
             ? this.itemTemplate(option)
             : this._defaultItemTemplate(option))))))));
     }

package/dist/collection/components/molecules/profile/profile.component.js

@@ -28,7 +28,7 @@ export class Profile {
     }
     render() {
         const content = this._getContent();
-        return (h(ThemedHost, { key: 'ac643a05aaf0376f608a9c1f590ae21594a17c18' }, this._hasDropdownSlot ? (h("p-dropdown", { applyChevron: false, applyFullWidth: true, applyMaxWidth: false, manualChevron: true, placement: this.dropdownLocation, strategy: 'absolute', onIsOpen: ev => (this._dropdownOpen = ev.detail) }, h("p-button", { active: this._dropdownOpen, chevron: this._dropdownOpen ? 'up' : 'down', class: 'w-full', size: 'lg', slot: 'trigger', variant: 'dropdown' }, content), h("div", { slot: 'items' }, h("slot", { name: 'dropdown', onSlotchange: () => this._checkDropdownSlot() })))) : (content)));
+        return (h(ThemedHost, { key: '6d75fe9ed4ac33cfc764d9fab67484d6a9f07721' }, this._hasDropdownSlot ? (h("p-dropdown", { applyChevron: false, applyFullWidth: true, applyMaxWidth: false, manualChevron: true, placement: this.dropdownLocation, strategy: 'absolute', onIsOpen: ev => (this._dropdownOpen = ev.detail) }, h("p-button", { active: this._dropdownOpen, chevron: this._dropdownOpen ? 'up' : 'down', class: 'w-full', size: 'lg', slot: 'trigger', variant: 'dropdown' }, content), h("div", { slot: 'items' }, h("slot", { name: 'dropdown', onSlotchange: () => this._checkDropdownSlot() })))) : (content)));
     }
     slotchange() {
         this._checkDropdownSlot();

package/dist/collection/components/molecules/range/range.component.js

@@ -23,13 +23,13 @@ export class Range {
     valueChange;
     render() {
         const percentage = Math.round((this.value / (this.max - this.min)) * 100);
-        return (h(ThemedHost, { key: '7ae1d611a44308f1112f9dea967961056219b2d6' }, h("div", { key: '9bd92e5e01cb76148a2e3a8fe1a232f751820870', class: '\n       flex w-inherit items-center gap-2 text-storm-300\n       dark:text-hurricane-200\n     ' }, h("p-icon", { key: '3ba3b7e3d9b2f9a3a96dadffdb83771f7267c4c8', variant: 'minus' }), h("div", { key: '510d47e53583cb2aebe6acca953a9cd920533f7e', class: 'relative h-6 flex-1' }, h("input", { key: '4b25bff4c5807c58518921640ee389783db570e1', max: this.max, min: this.min, step: this.step, type: 'range', value: this.value, onInput: ev => {
+        return (h(ThemedHost, { key: '2d2460d0c69169794ca7f22f80bfe29eee2c6e72' }, h("div", { key: '7441a9994ebd42f91d0b592ab1d4345ff0da9817', class: '\n       flex w-inherit items-center gap-2 text-storm-300\n       dark:text-hurricane-200\n     ' }, h("p-icon", { key: '2dfd00d0e7042aa63223fbdb2f537f55ec5d624c', variant: 'minus' }), h("div", { key: '77dc1faecfdccf7692af8276043fa851e3febfdf', class: 'relative h-6 flex-1' }, h("input", { key: 'da4efbb82a44ee8f7924b9447abfbdb1cbebf10f', max: this.max, min: this.min, step: this.step, type: 'range', value: this.value, onInput: ev => {
                 const value = ev.target.value;
                 this.value = Number.parseFloat(value);
                 this.valueChange.emit(value);
-            } }), h("div", { key: '1006c5ebbc20a7515d71351c07b19592c1b0005e', class: '\n         absolute left-0 top-1/2 z-[1] h-[2px] -translate-y-1/2 transform\n         bg-indigo-600\n       ', style: {
+            } }), h("div", { key: '19677761561399e485961a92cdf6167d8334f439', class: '\n         absolute left-0 top-1/2 z-[1] h-[2px] -translate-y-1/2 transform\n         bg-indigo-600\n       ', style: {
                 width: `calc(${percentage}% - (1rem * ${percentage} / 100))`,
-            } })), h("p-icon", { key: '80ae3d942bec909938eca84c2fb3379733e0e5c6', variant: 'plus' }))));
+            } })), h("p-icon", { key: '96ecdaa05a4a710a980fab7f77a3d845f837ce5c', variant: 'plus' }))));
     }
     static get is() { return "p-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/select/select.component.js

@@ -341,8 +341,8 @@ export class Select {
         if (this.error?.length) {
             buttonIcon = 'warning';
         }
-        return (h(ThemedHost, { key: '7e8d14438dbcd4e04e0c16212331ed5f84a81687' }, h("p-field-container", { key: '85aefa5955e9dd35bafb5a5e4304e05b4cb90178', error: this.error, forceShowTooltip: !!this.error?.length && !this._showDropdown, helper: this.helper, label: this.label, prefix: this.prefix, required: this.required, showOptional: this.showOptional, variant: 'write' }, h("p-dropdown", { key: '5abab1839f85953424513857034ef5318bf07ee5', applyChevron: false, applyFullWidth: true, applyMaxWidth: false, "disable-trigger-click": this.disabled, insideClick: true, manual: true, manualChevron: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, slot: 'content', strategy: this.strategy, onIsOpen: ev => this._onDropdownOpen(ev) }, h("p-button", { key: '6bfb1a5374aaebf543127370bdae01982c3a72f2', active: this._showDropdown, chevron: this.showChevron ? (this._showDropdown ? 'up' : 'down') : false, class: 'w-full', error: !!this.error?.length, icon: buttonIcon, iconClass: this.applyClassOnSelectedItem &&
-                this._selectedItem?.[this.iconClassKey], size: this.size, slot: 'trigger', variant: 'secondary', onClick: ev => this._onClick(ev) }, h("div", { key: 'aec19a4d60ad51080b8c2e2f9aa545e42c77dd0b', class: 'relative min-w-0 flex-1', ref: ref => (this._inputRef = ref) }, this._displayValue)), this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem()))));
+        return (h(ThemedHost, { key: 'e558118df2ca323c56ce1af9ca940f9ab3064bf5' }, h("p-field-container", { key: '8c59c91d1962edee3ee06ca33f93e670aaf471d2', error: this.error, forceShowTooltip: !!this.error?.length && !this._showDropdown, helper: this.helper, label: this.label, prefix: this.prefix, required: this.required, showOptional: this.showOptional, variant: 'write' }, h("p-dropdown", { key: '81ce03dc69685e18a92090628818e0ea902b9f3b', applyChevron: false, applyFullWidth: true, applyMaxWidth: false, "disable-trigger-click": this.disabled, insideClick: true, manual: true, manualChevron: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, slot: 'content', strategy: this.strategy, onIsOpen: ev => this._onDropdownOpen(ev) }, h("p-button", { key: '71a818c2ee268b8c169cc65bcd405ab8153bacb9', active: this._showDropdown, chevron: this.showChevron ? (this._showDropdown ? 'up' : 'down') : false, class: 'w-full', error: !!this.error?.length, icon: buttonIcon, iconClass: this.applyClassOnSelectedItem &&
+                this._selectedItem?.[this.iconClassKey], size: this.size, slot: 'trigger', variant: 'secondary', onClick: ev => this._onClick(ev) }, h("div", { key: '53f5fc2d15c94e96f629c6bd53e2456078f47dd3', class: 'relative min-w-0 flex-1', ref: ref => (this._inputRef = ref) }, this._displayValue)), this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem()))));
     }
     documentClickHandler(event) {
         if (!this._showDropdown || childOfComposed(event, this._el)) {

package/dist/collection/components/molecules/submenu/item/submenu-item.component.js

@@ -23,15 +23,15 @@ export class SubmenuItem {
         this.activeChange.emit(this.active);
     }
     render() {
-        return (h(ThemedHost, { key: '38bbc84752e1aa8271568aad5c1fd46bfa435d9a' }, h("div", { key: 'a17fb921e57780d1ff572a3d1ba10331b045276e', class: cn([
+        return (h(ThemedHost, { key: '90bce86bc100210f8491a1a2301813046fd7de1b' }, h("div", { key: '51e0542d7e19c609fec475cbbbb0115be419fbf1', class: cn([
                 'flex items-center',
                 'h-8 w-full pl-[calc(3rem+2px)]',
                 'cursor-pointer',
                 'group/submenu-item',
-            ]) }, h("div", { key: 'd9c949c6f467524e0590a19774ae86c06e234fe5', class: cn('flex items-center gap-2 transition-colors', {
+            ]) }, h("div", { key: 'a0d12ac8717ed69491bcdf4dd08b650f39aee67c', class: cn('flex items-center gap-2 transition-colors', {
                 'text-storm-400 dark:text-hurricane-100': !this.active,
                 'text-indigo-600': this.active,
-            }) }, h("p-icon", { key: '8eed69a5fd4cef34ef69d7e5a96993289effc37e', variant: this.icon }), h("slot", { key: '5471376f37afb9566f21599ee0e86af42a00b370' })))));
+            }) }, h("p-icon", { key: '45354d39e6b24c0202bcc476c02b7b1d017f91ac', variant: this.icon }), h("slot", { key: '762d3933cb5b6145aea1c07d2c3187e5401f5a50' })))));
     }
     static get is() { return "p-submenu-item"; }
     static get encapsulation() { return "shadow"; }