@paperless/core 2.0.1-beta.151 → 2.0.1-beta.152

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

@@ -157,7 +157,7 @@ export class Calendar {
             .filter(date => isValid(date));
     }
     render() {
-        return (h(Host, { key: '88cd0df6b8d9196bc4963bef4735e82bd54e6477', class: calendar({ variant: this.variant }) }, this._getView()));
+        return (h(Host, { key: '0c04ba601aaf4aa5c9803229649cf14ab7c5ca6a', class: calendar({ variant: this.variant }) }, this._getView()));
     }
     _getView() {
         if (this._view === 'year') {

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

@@ -50,9 +50,9 @@ export class ContentSlider {
         }
     }
     render() {
-        return (h(Host, { key: '2c6deaf4db1b1d6ace1b7f80f34f066bf6e6c4c2', class: "p-content-slider" }, h("div", { key: '267bee4f1f52f541b1fa8f051cd13a4b87e1d25b', class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, style: {
+        return (h(Host, { key: '383758e226a6e9d1a1c84c650073a0468ed83dc9', class: "p-content-slider" }, h("div", { key: '18524f8330ba15ebad99573e6b5076f2909832e3', class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, style: {
                 height: `${this._outerHeight}px`,
-            }, ref: (el) => (this._sliderRef = el), onMouseDown: (e) => this._mouseDownHandler(e), onTouchStart: (e) => this._mouseDownHandler(e), onMouseMove: (e) => this._mouseMoveHandler(e), onTouchMove: (e) => this._mouseMoveHandler(e) }, h("div", { key: 'dd01ac807b0618de6a544b24aa68c3a1de660594', class: "inner-slider", ref: (ref) => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, h("slot", { key: '080161c80e4996803fc567c4c72391e6e3718d8c' }))), h("div", { key: '1c0d460fe26f9a48726aeaf9d80b56c26ed4c02c', class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("div", { onClick: () => this._scrollTo(i, true), class: `item ${!this.disableIndicatorClick && 'cursor-pointer'}` }, h("div", { class: cn('block w-2 h-2 rounded-full', {
+            }, ref: (el) => (this._sliderRef = el), onMouseDown: (e) => this._mouseDownHandler(e), onTouchStart: (e) => this._mouseDownHandler(e), onMouseMove: (e) => this._mouseMoveHandler(e), onTouchMove: (e) => this._mouseMoveHandler(e) }, h("div", { key: '3a86b6b3b6f2550e571a5afa3c10bab995a97139', class: "inner-slider", ref: (ref) => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, h("slot", { key: '99c429d048aa6cd3c17e3d3d1a2b66e78cf6aec0' }))), h("div", { key: 'cd0cf8fe535606e40c1b8a4667a17cdf510e64ed', class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("div", { onClick: () => this._scrollTo(i, true), class: `item ${!this.disableIndicatorClick && 'cursor-pointer'}` }, h("div", { class: cn('block w-2 h-2 rounded-full', {
                 'bg-dark-teal-600': i === this._visibleIndex,
                 'bg-dark-teal-400': i !== this._visibleIndex,
             }) })))))));

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

@@ -0,0 +1 @@
+.mb-6{margin-bottom:1.5rem!important}.flex{display:flex!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}*{box-sizing:border-box}:host{align-items:center;display:flex;flex-direction:column;gap:1.5rem;justify-content:space-between;margin-bottom:1.5rem;width:100%}.static{position:static!important}.hidden{display:none!important}.aspect-branding{aspect-ratio:23/24!important}.h-\[17\.5rem\]{height:17.5rem!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}.resize{resize:both!important}.rounded-full{border-radius:9999px!important}.border-0{border-width:0!important}.border-b{border-bottom-width:1px!important}.border-solid{border-style:solid!important}.border-off-white-700{--tw-border-opacity:1!important;border-color:rgb(222 219 213/var(--tw-border-opacity,1))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.px-14{padding-left:3.5rem!important;padding-right:3.5rem!important}@media (min-width:40rem){.tablet\:max-w-xs{max-width:20rem!important}.tablet\:px-1{padding-left:.25rem!important;padding-right:.25rem!important}}

package/dist/collection/components/{deprecated/molecules → molecules}/cropper/cropper.component.js

@@ -1,11 +1,6 @@
 import { Host, h, } from "@stencil/core";
-import { clsx } from "clsx";
 import "cropperjs";
 export class Cropper {
-    /**
-     * Variant of the image that's being cropped
-     */
-    variant = 'user';
     /**
      * The image to crop (url or base64)
      */
@@ -41,35 +36,27 @@ export class Cropper {
         }, 200);
     }
     render() {
-        return (h(Host, { key: 'a66d380b44bc45224bfdc14bb5fca2b2ed362b30', class: 'p-cropper' }, this._loaded && (h("cropper-canvas", { key: 'e1fd99544823302d65acd18a728c1de356e71568', class: 'h-[17.5rem] w-full border-0 border-b border-solid border-mystic-medium bg-white', onAction: () => this._onAction() }, h("cropper-image", { key: '102da7dfafb0978769d01769dd612181ee827c21', src: this.value, alt: 'Picture', ref: ref => this._setImageRef(ref), scalable: true, crossorigin: 'anonymous' }), h("cropper-shade", { key: '85d8dd61a002f97cde353c6b596bc565cdf0dd03', class: clsx({
-                'rounded-round': this.variant === 'user',
-                rounded: this.variant === 'company',
-            }), "theme-color": 'rgba(255, 255, 255, 0.5)', hidden: true }), h("cropper-selection", { key: 'b6f27be2918f2d37db9c2e357edbf43c9437d948', "initial-coverage": '0.7', "aspect-ratio": '1', ref: ref => (this._selectionRef = ref) }), h("cropper-handle", { key: 'f344a4f9329f0f95388cbb9d244e9874bb122872', action: 'move', plain: true }))), h("div", { key: 'fac0f650ad1c0f90cf76b1988c5b0868fca46433', class: 'flex w-full items-center gap-2 px-14 text-storm-vague tablet:max-w-xs tablet:px-1' }, h("p-icon", { key: 'cab454265a498a58246f560214a9773a05b64a9d', variant: 'minus' }), h("input", { key: '6e290864b2b72b195dcf3bc0499a7c15cf95dfb7', class: 'p-input w-full', type: 'range', min: '0', max: '100', value: this._currentScale, onInput: ev => this._onInput(ev.target.value), step: '0.5' }), h("p-icon", { key: 'eae0f43ac06be2eb63ceaeba98890a9bc423f003', variant: 'plus' }))));
+        return (h(Host, { key: 'bb9b47e33d788f83b69156e78754fdf77e60fbdc', class: 'p-cropper' }, this._loaded && (h("cropper-canvas", { key: 'c9b38a906946c725192411a5c8aeea567194d85c', class: 'h-[17.5rem] w-full border-0 border-b border-solid border-off-white-700 bg-white', onAction: () => this._onAction() }, h("cropper-image", { key: '375a75a54723a633f6f67370af7732c49e17d5ea', src: this.value, alt: 'Picture', ref: ref => this._setImageRef(ref), scalable: true, translatable: true, crossorigin: 'anonymous' }), h("cropper-shade", { key: '44df9ab40e61982a3d9dcc06c8395e878153f527', class: 'aspect-branding rounded-full', "theme-color": 'rgba(255, 255, 255, 0.5)', hidden: true }), h("cropper-selection", { key: '98a11dbabb8e7852a3ea4ec34a9d8e5b4a617192', "initial-coverage": '0.7', "aspect-ratio": '1', ref: ref => (this._selectionRef = ref) }), h("cropper-handle", { key: 'e8378de3cc52edeb6e3fa65cf4bf66050e36ee0a', action: 'move', plain: true }))), h("p-range", { key: 'a6471a180232794da126365058f4befb949b7cee', class: 'w-full px-14 tablet:max-w-xs tablet:px-1', value: this._currentScale, onValueChange: ev => this._onInput(ev.detail) })));
     }
     _setImageRef(ref) {
         if (this._imageRef) {
             return;
         }
         this._imageRef = ref;
-        this._imageRef.$ready(image => setTimeout(() => this._setInitialState(image), 200));
+        this._imageRef.$ready(image => setTimeout(() => this._setInitialState(image), 100));
     }
     _setInitialState(image) {
-        let scale;
-        if (image.naturalWidth > image.naturalHeight) {
-            // set scale by height
-            scale = 200 / image.naturalHeight;
-        }
+        let scale = 200 / image.naturalHeight;
         if (image.naturalHeight >= image.naturalWidth) {
             // set scale by width
             scale = 200 / image.naturalWidth;
         }
-        const current = this._imageRef.$getTransform();
         this._minScale = scale;
-        this._maxScale = current[0];
+        this._maxScale = 5;
         this._selectionRef.$resize('nw-resize', 200, 200, 1);
         this._selectionRef.$center();
-        this._setScale(scale);
         this._toCanvas();
+        this._setScale(scale);
     }
     _onAction() {
         this._setCurrentScale();
@@ -158,33 +145,13 @@ export class Cropper {
     }
     static get properties() {
         return {
-            "variant": {
-                "type": "string",
-                "attribute": "variant",
-                "mutable": false,
-                "complexType": {
-                    "original": "'user' | 'company'",
-                    "resolved": "\"company\" | \"user\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Variant of the image that's being cropped"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "'user'"
-            },
             "value": {
-                "type": "any",
+                "type": "string",
                 "attribute": "value",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,

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

@@ -0,0 +1 @@
+{"version":3,"file":"cropper.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/cropper/cropper.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport 'cropperjs';\nimport { CropperImage, CropperSelection } from 'cropperjs';\n\n@Component({\n\ttag: 'p-cropper',\n\tstyleUrl: 'cropper.component.scss',\n\tshadow: true,\n})\nexport class Cropper {\n\t/**\n\t * The image to crop (url or base64)\n\t */\n\t@Prop() value: string;\n\n\t/**\n\t * The return type of the onchange\n\t */\n\t@Prop() returnType: 'canvas' | 'base64' = 'base64';\n\n\t/**\n\t * Event when the value changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tvalueChange: EventEmitter<any>;\n\n\tprivate _imageRef: CropperImage;\n\tprivate _selectionRef: CropperSelection;\n\n\tprivate _maxScale = 0;\n\tprivate _minScale = 0;\n\n\tprivate _resizeDebounceTimeout: NodeJS.Timeout | undefined;\n\tprivate _toCanvasDebounceTimeout: NodeJS.Timeout | undefined;\n\n\t@State()\n\tprivate _loaded = false;\n\n\t@State()\n\tprivate _currentScale = 0;\n\n\t@Listen('resize', { target: 'window' })\n\tonResize() {\n\t\tif (this._resizeDebounceTimeout) {\n\t\t\tclearTimeout(this._resizeDebounceTimeout);\n\t\t}\n\n\t\tthis._resizeDebounceTimeout = setTimeout(() => {\n\t\t\tthis._selectionRef.$center();\n\t\t\tthis._imageRef.$center();\n\t\t}, 200);\n\t}\n\n\tcomponentDidLoad() {\n\t\tsetTimeout(() => {\n\t\t\tthis._loaded = true;\n\t\t}, 200);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-cropper'>\n\t\t\t\t{this._loaded && (\n\t\t\t\t\t<cropper-canvas\n\t\t\t\t\t\tclass='h-[17.5rem] w-full border-0 border-b border-solid border-off-white-700 bg-white'\n\t\t\t\t\t\tonAction={() => this._onAction()}\n\t\t\t\t\t>\n\t\t\t\t\t\t<cropper-image\n\t\t\t\t\t\t\tsrc={this.value}\n\t\t\t\t\t\t\talt='Picture'\n\t\t\t\t\t\t\tref={ref => this._setImageRef(ref as CropperImage)}\n\t\t\t\t\t\t\tscalable\n\t\t\t\t\t\t\ttranslatable\n\t\t\t\t\t\t\tcrossorigin='anonymous'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<cropper-shade\n\t\t\t\t\t\t\tclass='aspect-branding rounded-full'\n\t\t\t\t\t\t\ttheme-color='rgba(255, 255, 255, 0.5)'\n\t\t\t\t\t\t\thidden\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<cropper-selection\n\t\t\t\t\t\t\tinitial-coverage='0.7'\n\t\t\t\t\t\t\taspect-ratio='1'\n\t\t\t\t\t\t\tref={ref => (this._selectionRef = ref as CropperSelection)}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<cropper-handle\n\t\t\t\t\t\t\taction='move'\n\t\t\t\t\t\t\tplain\n\t\t\t\t\t\t></cropper-handle>\n\t\t\t\t\t</cropper-canvas>\n\t\t\t\t)}\n\n\t\t\t\t<p-range\n\t\t\t\t\tclass='w-full px-14 tablet:max-w-xs tablet:px-1'\n\t\t\t\t\tvalue={this._currentScale}\n\t\t\t\t\tonValueChange={ev => this._onInput(ev.detail)}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _setImageRef(ref: CropperImage) {\n\t\tif (this._imageRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._imageRef = ref;\n\t\tthis._imageRef.$ready(image =>\n\t\t\tsetTimeout(() => this._setInitialState(image), 100)\n\t\t);\n\t}\n\n\tprivate _setInitialState(image) {\n\t\tlet scale = 200 / image.naturalHeight;\n\n\t\tif (image.naturalHeight >= image.naturalWidth) {\n\t\t\t// set scale by width\n\t\t\tscale = 200 / image.naturalWidth;\n\t\t}\n\n\t\tthis._minScale = scale;\n\t\tthis._maxScale = 5;\n\n\t\tthis._selectionRef.$resize('nw-resize', 200, 200, 1);\n\t\tthis._selectionRef.$center();\n\n\t\tthis._toCanvas();\n\t\tthis._setScale(scale);\n\t}\n\n\tprivate _onAction() {\n\t\tthis._setCurrentScale();\n\t\tthis._toCanvas();\n\t}\n\n\tprivate _setScale(\n\t\tscale: number,\n\t\tsetCenter: boolean = true,\n\t\tsetCurrentScale: boolean = true\n\t) {\n\t\tconst transform = this._imageRef.$getTransform();\n\t\tthis._imageRef.$setTransform([\n\t\t\tscale,\n\t\t\t0,\n\t\t\t0,\n\t\t\tscale,\n\t\t\ttransform[4],\n\t\t\ttransform[5],\n\t\t]);\n\n\t\tif (setCenter) {\n\t\t\tthis._imageRef.$center();\n\t\t}\n\n\t\tif (setCurrentScale) {\n\t\t\tthis._setCurrentScale();\n\t\t}\n\t}\n\n\tprivate _setCurrentScale() {\n\t\tconst transform = this._imageRef.$getTransform();\n\t\tconst current = transform[0];\n\n\t\tif (current < this._minScale) {\n\t\t\tthis._setScale(this._minScale, true, false);\n\t\t\tthis._currentScale = 0;\n\t\t\treturn;\n\t\t}\n\n\t\tif (current > this._maxScale) {\n\t\t\tthis._setScale(this._maxScale, true, false);\n\t\t\tthis._currentScale = 100;\n\t\t\treturn;\n\t\t}\n\n\t\tif (current === this._minScale) {\n\t\t\tthis._currentScale = 0;\n\t\t\treturn;\n\t\t}\n\n\t\tif (current === this._maxScale) {\n\t\t\tthis._currentScale = 100;\n\t\t\treturn;\n\t\t}\n\n\t\tconst minMaxDiff = this._maxScale - this._minScale;\n\t\tconst currentDiff = current - this._minScale;\n\n\t\tconst percentage = (currentDiff / minMaxDiff) * 100;\n\t\tthis._currentScale = percentage;\n\t}\n\n\tprivate _onInput(value) {\n\t\tconst transform = this._imageRef.$getTransform();\n\t\tconst current = transform[0];\n\t\tconst minMaxDiff = this._maxScale - this._minScale;\n\n\t\tconst toSet = minMaxDiff * (value / 100);\n\n\t\tif (toSet === current) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._setScale(toSet + this._minScale, false, false);\n\t\tthis._currentScale = value;\n\n\t\tthis._toCanvas();\n\t}\n\n\tprivate _toCanvas() {\n\t\tif (this._toCanvasDebounceTimeout) {\n\t\t\tclearTimeout(this._toCanvasDebounceTimeout);\n\t\t}\n\n\t\tthis._toCanvasDebounceTimeout = setTimeout(async () => {\n\t\t\tconst canvas = await this._selectionRef.$toCanvas();\n\t\t\tif (this.returnType === 'canvas') {\n\t\t\t\tthis.valueChange.emit(canvas);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst data = canvas.toDataURL('image/png');\n\t\t\tthis.valueChange.emit(data);\n\t\t}, 200);\n\t}\n}\n"]}

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

@@ -189,9 +189,9 @@ export class Datepicker {
         this.parseValue(this.value);
     }
     render() {
-        return (h("p-dropdown", { key: 'e7869713c65d18c4cca65b21d00eaf1b282478ae', strategy: this.strategy, placement: this.placement, disableTriggerClick: true, applyMaxWidth: false, applyFullWidth: false, insideClick: true, show: this._showDropdown }, h("p-field", { key: '5a2562733e52d020c5b837e372b63b6d93e640cb', slot: 'trigger', icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', size: this.size, prefix: this.prefix, label: this.label, loading: this.loading, helper: this.helper, required: asBoolean(this.required), error: this.error, forceShowTooltip: !!this.error?.length && !this._showDropdown, disabled: asBoolean(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) }), this.enableNativePicker && this._isMobileBrowser && (h("input", { key: 'ca64266832730cee49657467042466b5f9aa4fb6', slot: 'trigger', type: this.mode === 'day' ? 'date' : 'month', class: 'h-0 overflow-hidden' // we use h-0 here so location dependent pickers can correctly place itself
+        return (h("p-dropdown", { key: '908c05cb4fbc0b374dd68e274b19675f9b35cfd3', strategy: this.strategy, placement: this.placement, disableTriggerClick: true, applyMaxWidth: false, applyFullWidth: false, insideClick: true, show: this._showDropdown }, h("p-field", { key: '776ddbd3defa7083c9ad8ddda4b1ae342a309949', slot: 'trigger', icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', size: this.size, prefix: this.prefix, label: this.label, loading: this.loading, helper: this.helper, required: asBoolean(this.required), error: this.error, forceShowTooltip: !!this.error?.length && !this._showDropdown, disabled: asBoolean(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) }), this.enableNativePicker && this._isMobileBrowser && (h("input", { key: 'fd410b203a523b1629f54b44595c526db435bf4e', slot: 'trigger', type: this.mode === 'day' ? 'date' : 'month', class: 'h-0 overflow-hidden' // we use h-0 here so location dependent pickers can correctly place itself
             ,
-            onInput: ev => this._onNativeInput(ev), ref: ref => (this._dateInputRef = ref), value: this._value && format(this._value, 'yyyy-MM-dd'), min: this.minDate && format(new Date(this.minDate), 'yyyy-MM-dd'), max: this.maxDate && format(new Date(this.maxDate), 'yyyy-MM-dd') })), h("div", { key: 'f09e3fdcef04441e01250566b5907a2adb3aa56c', slot: 'items' }, h("p-calendar", { key: '4bd89f69c22bdd7c3a3f38b45a6b1f6f07428bc3', 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 }))));
+            onInput: ev => this._onNativeInput(ev), ref: ref => (this._dateInputRef = ref), value: this._value && format(this._value, 'yyyy-MM-dd'), min: this.minDate && format(new Date(this.minDate), 'yyyy-MM-dd'), max: this.maxDate && format(new Date(this.maxDate), 'yyyy-MM-dd') })), h("div", { key: 'dabc9c994613aa412162bae1e01592ca47d46cf9', slot: 'items' }, h("p-calendar", { key: 'd2bde5fecd14463c587e3bc9c7b89828a217cecd', 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/collection/components/molecules/dropdown/dropdown.component.js

@@ -134,12 +134,12 @@ export class Dropdown {
         };
         let dropdownContainer;
         if (this.usePortal) {
-            dropdownContainer = (h("p-portal", { key: 'b190fdbb1896b89a457acceb5683df256d672f27', ...dropdownContainerProps }, h("p-dropdown-menu-container", { key: 'd87b9e08bd8a8f8d31a78160d4f95cd0ed372379', variant: this.variant, maxWidth: !this.calculateWidth && this.applyMaxWidth, fullWidth: this.applyFullWidth && !this.applyMaxWidth, allowOverflow: this.allowOverflow, scrollable: this.scrollable }, h("slot", { key: 'a7a9fcb5c30b3b346911cc5bc86ceb2fca607a70', name: 'items' }))));
+            dropdownContainer = (h("p-portal", { key: 'e8032f1180eecc4f98929706b3e07ca9a8b56089', ...dropdownContainerProps }, h("p-dropdown-menu-container", { key: 'e0dae4a82ff9e829360fbe476f9e0741d61757cb', variant: this.variant, maxWidth: !this.calculateWidth && this.applyMaxWidth, fullWidth: this.applyFullWidth && !this.applyMaxWidth, allowOverflow: this.allowOverflow, scrollable: this.scrollable }, h("slot", { key: 'b6662f0033ae71cc0a0b7f0c4cf54b662cb27531', name: 'items' }))));
         }
         else {
-            dropdownContainer = (h("p-dropdown-menu-container", { key: '93f7c0ef0cb20dae0caa6c24d7c96e8bdc0c3b25', variant: this.variant, maxWidth: !this.calculateWidth && this.applyMaxWidth, fullWidth: this.applyFullWidth && !this.applyMaxWidth, allowOverflow: this.allowOverflow, scrollable: this.scrollable, ...dropdownContainerProps }, h("slot", { key: '88a67c2fe59c5a5bad314f8417eaf18bb5e127d3', name: 'items' })));
+            dropdownContainer = (h("p-dropdown-menu-container", { key: '27ff29c3bef946838b4c0cea73358694ddf6c570', variant: this.variant, maxWidth: !this.calculateWidth && this.applyMaxWidth, fullWidth: this.applyFullWidth && !this.applyMaxWidth, allowOverflow: this.allowOverflow, scrollable: this.scrollable, ...dropdownContainerProps }, h("slot", { key: 'e89c027aab54294b486a1061b4f488d43e40095d', name: 'items' })));
         }
-        return (h(Host, { key: 'c54ff9106342e613fce1d3dbd1005c39e1bf733f', class: 'relative' }, h("div", { key: '4d23c6ab5da92cc200b3204e471561d3b0ac7382', class: 'trigger', ref: ref => (this._trigger = ref), onClick: () => this._triggerClickHandler() }, h("slot", { key: '87f719c93f4cb1b209ac39e5c4ff8e687113ddbf', name: 'trigger' })), h("div", { key: '896fc9c220dbffaf0bd94da1a0af2dca6e905304', class: 'relative w-full' }, dropdownContainer)));
+        return (h(Host, { key: '487c58cf0bb8f68b1727cad363b693591975b2e6', class: 'relative' }, h("div", { key: '382b141bfbca0effc16ca78162fcda9c496f0939', class: 'trigger', ref: ref => (this._trigger = ref), onClick: () => this._triggerClickHandler() }, h("slot", { key: 'ec9d48f37a8d0df7088feb6ff0b084c3cf83403c', name: 'trigger' })), h("div", { key: '035b5cbbf71c3164776f48ede50b4144a891c643', class: 'relative w-full' }, dropdownContainer)));
     }
     _checkButtons(active = false) {
         if (!this.applyChevron) {

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

@@ -54,11 +54,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("div", { key: '4d4ffeaee2bb367b6fa44558bffc6b1ea36e7ff2', class: emptyState({
+        return (h("div", { key: 'e2a66ad20d23b285eac53fda30038b7a751c7c41', class: emptyState({
                 enableAction: asBoolean(this.enableAction, true),
             }), onClick: ev => this.enableAction && !this.actionLoading
                 ? this.action.emit(ev)
-                : undefined }, this.illustration && (h("p-illustration", { key: '5ffdc50bc7b414703c1ab66e8c11d9213360e421', class: 'mb-8 text-teal', variant: this.illustration })), hasHeaderSlot ? (h("slot", { name: 'header' })) : (this.header?.length && (h("p", { class: 'my-0 text-center font-ambit text-sm font-bold text-black-teal' }, this.header))), hasContentSlot ? (h("slot", { name: 'content' })) : (this.content?.length && (h("p", { class: 'my-0 text-center text-sm text-black-teal-300' }, this.content))), this.enableAction &&
+                : undefined }, this.illustration && (h("p-illustration", { key: '377339f8f758565a43aa5cfa6fa377b6241d530d', class: 'mb-8 text-teal', variant: this.illustration })), hasHeaderSlot ? (h("slot", { name: 'header' })) : (this.header?.length && (h("p", { class: 'my-0 text-center font-ambit text-sm font-bold text-black-teal' }, this.header))), hasContentSlot ? (h("slot", { name: 'content' })) : (this.content?.length && (h("p", { class: 'my-0 text-center text-sm text-black-teal-300' }, this.content))), this.enableAction &&
             (hasActionSlot ? (h("slot", { name: 'action' })) : (h("p-button", { class: 'mt-4', icon: this.actionIcon, loading: this.actionLoading, variant: this.actionVariant }, this.actionText)))));
     }
     static get is() { return "p-empty-state"; }

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

@@ -295,7 +295,7 @@ export class Field {
     }
     render() {
         const { id, prefix, suffix, hasHeaderSlot, hasLabelSlot, hasHelperSlot, hasErrorSlot, hasValueSlot, } = this._getSlotInfo();
-        return (h("p-field-container", { key: '0e81fed422f73bb28ee2d12d83d8d43bb8490aaf', forceShowTooltip: this.forceShowTooltip || this._focused || !!this.error?.length, id: id, label: this.label, align: this.align, loading: this.loading, loadingSize: this.size, helper: this.helper, error: this.error, required: this.required, variant: this.variant }, hasLabelSlot && (h("slot", { key: '614218a4fec0ea6fabf5d5f844c9b45f73c70f3e', name: 'label', slot: 'label' })), hasHeaderSlot && (h("slot", { key: '817ccd421b8aa0fc4873e3c2669d888f73724952', name: 'header', slot: 'header' })), hasHelperSlot && (h("slot", { key: 'a4868dbbf989900a2176f21d5d52a762fb6fdb75', name: 'helper', slot: 'helper' })), hasErrorSlot && (h("slot", { key: '101d8822805d88718fd2741f8284152f236b27c6', name: 'error', slot: 'error' })), h("div", { key: 'c609f6edef8a6db2b443c97a1ba5f4ffc667eaf2', class: field({
+        return (h("p-field-container", { key: '9400c327b1deba7084c2579b27419e92b7dbfa79', forceShowTooltip: this.forceShowTooltip || this._focused || !!this.error?.length, id: id, label: this.label, align: this.align, loading: this.loading, loadingSize: this.size, helper: this.helper, error: this.error, required: this.required, variant: this.variant }, hasLabelSlot && (h("slot", { key: '8010504f27e1998b60e6c2f57b0218546be9e7ae', name: 'label', slot: 'label' })), hasHeaderSlot && (h("slot", { key: 'c4f7cfd2785ed12c30223461b819bd9818dfb077', name: 'header', slot: 'header' })), hasHelperSlot && (h("slot", { key: 'd8326977264c12728499e9925aa2a00aa5ed9158', name: 'helper', slot: 'helper' })), hasErrorSlot && (h("slot", { key: '9ee712647fe95056bee14a65151a30e0909a9077', name: 'error', slot: 'error' })), h("div", { key: 'd0c70d0fae9f28cc9e45a3eb8e74f4cd9f511b13', class: field({
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),
                 focused: asBoolean(this.focused) || this._focused,
@@ -304,7 +304,7 @@ export class Field {
                 isTextarea: this.type === 'textarea',
             }), title: this.variant === 'read' && !hasValueSlot ? this.value : undefined, slot: 'content' }, (this.error?.length ||
             prefix ||
-            (this.icon && this.iconPosition === 'start')) && (h("div", { key: '38096bb9fdbbb4c9cd6c60b5f2f572b005927d2e', class: prefixAndSuffix({
+            (this.icon && this.iconPosition === 'start')) && (h("div", { key: '9d74e7e739a905fbe7f8931d1272f3e44edd281e', class: prefixAndSuffix({
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),
                 focused: asBoolean(this.focused) || this._focused,
@@ -313,7 +313,7 @@ export class Field {
             }), onClick: () => this._focusInput() }, (this.icon && this.iconPosition === 'start') ||
             this.error?.length ? (h("p-icon", { class: cn('flex', {
                 'mt-[0.125rem]': this.variant === 'read' && this.size === 'base',
-            }), variant: this.error?.length ? 'warning' : this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), this._getContent(hasValueSlot, id), (suffix || (this.icon && this.iconPosition === 'end')) && (h("div", { key: '9e75e0ad9de50de5972265456dc18ad26fee798b', class: prefixAndSuffix({
+            }), variant: this.error?.length ? 'warning' : this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), this._getContent(hasValueSlot, id), (suffix || (this.icon && this.iconPosition === 'end')) && (h("div", { key: '6de3d3849e29f5fd7cce085c62390322f15ed9d2', class: prefixAndSuffix({
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),
                 focused: asBoolean(this.focused) || this._focused,

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

@@ -53,14 +53,14 @@ export class Label {
      */
     keepMobileContent = false;
     render() {
-        return (h("div", { key: '9597be604690771c7963c82363a3f249a933313d', class: label({
+        return (h("div", { key: 'ebca5b4de133f2b28f96a1d6e86ae1c7aadb2956', class: label({
                 variant: this.variant,
                 iconOnly: this.iconOnly,
                 keepMobileContent: this.keepMobileContent,
-            }) }, this.icon && (h("p-icon", { key: '48f6b8aae58c96ea2936ceed2a00b09ce4eee21d', class: 'flex-shrink-0', variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate })), !this.iconOnly && (h("div", { key: '45395fa989ebc3b038687c71abd78ab77b17547d', class: cn('flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm', {
+            }) }, this.icon && (h("p-icon", { key: '77dd46d2ab8291f4b6e09da730cddfa820f21ddf', class: 'flex-shrink-0', variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate })), !this.iconOnly && (h("div", { key: '7c4470d1ebf3a5ca9a10aec59b1a6f2eed11971f', class: cn('flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm', {
                 hidden: !this.keepMobileContent,
                 'desktop-xs:block': !this.keepMobileContent,
-            }) }, h("slot", { key: '83ceeb73279dd9c3ae6512cd563fb3a56c1923ad' })))));
+            }) }, h("slot", { key: 'b684c0a48b8fd0cbd321978492220078fe343918' })))));
     }
     static get is() { return "p-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,10 +66,10 @@ export class NavigationItem {
     render() {
         const TagType = this.as;
         const active = asBoolean(this.active) || this.class?.includes('active');
-        return (h(Host, { key: 'c7ce92561fc86949a3d7a4cf8c0c8f7bc8c2c40b', class: cn('p-navigation-item inline-block', this.class) }, h(TagType, { key: '03c0c4fdbbc000af6b275b4cebb96abf0cc2c7d0', class: navigationItem({
+        return (h(Host, { key: '5f92c839b78d7c12140958642e956408adb6ff6d', class: cn('p-navigation-item inline-block', this.class) }, h(TagType, { key: '910417120d80389a63923a1ba7c6b62e55b852f7', class: navigationItem({
                 icon: !!this.icon,
                 active,
-            }), href: this.href, target: this.target }, h("div", { key: '5cb39568c4cd76f31d4c064fd6436dcee7c18806', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: 'cecfec8ee5fabc95cef24efb4ff64a695b84cec8', variant: this.icon })), h("span", { key: '7c8a60a7af3267febb129605ef888fe411cd850e', class: this.counter && 'has-counter' }, h("slot", { key: '8425b021164b20a0ed11e5f98d6e863dcf666b57' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: 'f760815a4da64edd25c30c4993e35157e8d86fe8' }, this.counter)), !!this.loading && h("p-loader", { key: 'ae11ad41c8b5e61d22c05c7d2422ff45003593e5', class: 'ml-auto' }))));
+            }), href: this.href, target: this.target }, h("div", { key: '76f261ebcdc71f8b99463e3ec7fd17007c7c877c', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: '478f8e2daef512baa4561921b1371a2c7b6f36c1', variant: this.icon })), h("span", { key: 'dcf453fe0621a75052d8985ba0f9060916a0184a', class: this.counter && 'has-counter' }, h("slot", { key: '32bc7d07404643e0e5b6580c944f78cff787b72a' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: 'b1247b164da9657f68f25d815c76ef1e5dd0d180' }, this.counter)), !!this.loading && h("p-loader", { key: '66a00ae9e65054ce9f381ebe7e50298d2da554bd', class: 'ml-auto' }))));
     }
     static get is() { return "p-navigation-item"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ export class NavigationSection {
      */
     header;
     render() {
-        return (h(Host, { key: '0974883115ce6c02612170f71ac60a046c1aee00', class: 'flex flex-col gap-2' }, this.header?.length > 0 && (h("p-navigation-title", { key: 'a0d706b6810eca9f5bd075bae9aa79b58f5a2712' }, this.header)), h("div", { key: 'cf846c79ca2248048aa0938221a515da4a5933de', class: 'flex flex-col' }, h("slot", { key: '9620310533a013653d88c41676a4d8c70e4f9676' }))));
+        return (h(Host, { key: 'c920ffe6368d46683c51d8c4373c0301aa0ac027', class: 'flex flex-col gap-2' }, this.header?.length > 0 && (h("p-navigation-title", { key: '991a80ba24eda3957f8b01bdc81e8737d2c088ec' }, this.header)), h("div", { key: 'b2292d857ff1651fe34dcf96bba1601d03ee753c', class: 'flex flex-col' }, h("slot", { key: 'bf2d997ea801ebe5c7dd075734b44083ffaf735a' }))));
     }
     static get is() { return "p-navigation-section"; }
     static get originalStyleUrls() {

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

@@ -39,7 +39,7 @@ export class PaginationPages {
         this._generate();
     }
     render() {
-        return (h(Host, { key: 'c05c0f39f4676694bcb4644509f237e62c3fd4af', class: pagination({
+        return (h(Host, { key: '418c1910a500fc33c1b7b9207f987fc7f473e72f', 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

@@ -59,12 +59,12 @@ export class Pagination {
     _hasPaginationPages = true;
     render() {
         const hidePageSizeSelect = this.hideOnSinglePage && this.total <= this.pageSizeOptions?.[0];
-        return (h(Host, { key: 'a8cd8cd65e4de9844daaac10163a8261fc1a7efd', class: pagination({
+        return (h(Host, { key: 'fc4e6fdd930d053c9e4a3f69b70125d333cf3ceb', class: pagination({
                 hidden: (hidePageSizeSelect && !this._hasPaginationPages) ||
                     (!this.enablePaginationSize && !this.enablePaginationPages),
-            }) }, this.enablePaginationPages && this.enablePaginationSize && (h(Fragment, { key: '529c47e363d1b072efe41b5b464bbf48995b56c0' }, h("p-pagination-size", { key: '3261d8dcc53698d4f8da54d56136e5a1b208ad93', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) }), !hidePageSizeSelect &&
+            }) }, this.enablePaginationPages && this.enablePaginationSize && (h(Fragment, { key: 'c87ff3c4809a1351dcf5730935cd0576a14217d4' }, h("p-pagination-size", { key: '9873aaf82aa79c4952dceb7805c25a521f5a2110', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) }), !hidePageSizeSelect &&
             this.hideOnSinglePage &&
-            this._hasPaginationPages && (h("p-divider", { key: '56c43d2d91886ce834f17de6ced84d2f98ef42e2', variant: 'vertical', class: 'mx-0 h-4 text-human-beige-700' })))), this.enablePaginationPages && (h("p-pagination-pages", { key: '25388a87ce9c6a6ab1cc4a88fc1a665e3b40a2ce', pageSize: this.pageSize, total: this.total, page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPagesChange: ({ detail }) => {
+            this._hasPaginationPages && (h("p-divider", { key: 'fb5bb6ad6e42f1fb3be76ddeedc1c5c26fe6410d', variant: 'vertical', class: 'mx-0 h-4 text-human-beige-700' })))), this.enablePaginationPages && (h("p-pagination-pages", { key: '11b609f7b2935db35a2eec4d241b697c59a1ff67', pageSize: this.pageSize, total: this.total, page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPagesChange: ({ detail }) => {
                 this._hasPaginationPages = detail > 1;
                 this.pagesChange.emit(detail);
             } }))));

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

@@ -0,0 +1 @@
+.m-0{margin:0!important}.mt-\[calc\(\(0\.5rem-1px\)\*-1\)\]{margin-top:calc(-.5rem + 1px)!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.h-\[2px\]{height:2px!important}.w-4{width:1rem!important}.w-full{width:100%!important}.appearance-none{appearance:none!important}.rounded-full{border-radius:9999px!important}.bg-black-teal-300{--tw-bg-opacity:1!important;background-color:rgb(104 127 124/var(--tw-bg-opacity,1))!important}*{box-sizing:border-box}:host{input{appearance:none;height:1.5rem;margin:0;width:100%}input::-webkit-slider-runnable-track{--tw-bg-opacity:1;background-color:rgb(222 219 213/var(--tw-bg-opacity,1));height:2px}input::-moz-range-track{--tw-bg-opacity:1;background-color:rgb(222 219 213/var(--tw-bg-opacity,1));height:2px}input::-webkit-slider-thumb{--tw-bg-opacity:1;appearance:none;background-color:rgb(104 127 124/var(--tw-bg-opacity,1));border-radius:9999px;border-width:0;height:1rem;margin-top:calc(-.5rem + 1px);width:1rem}input::-webkit-slider-thumb:hover{cursor:grab}input::-webkit-slider-thumb:active,input::-webkit-slider-thumb:hover{--tw-bg-opacity:1;background-color:rgb(3 42 36/var(--tw-bg-opacity,1))}input::-webkit-slider-thumb:active{cursor:grabbing}input::-moz-range-thumb{--tw-bg-opacity:1;background-color:rgb(104 127 124/var(--tw-bg-opacity,1));border-radius:9999px;border-width:0;height:1rem;width:1rem}input::-moz-range-thumb:hover{cursor:grab}input::-moz-range-thumb:active,input::-moz-range-thumb:hover{--tw-bg-opacity:1;background-color:rgb(3 42 36/var(--tw-bg-opacity,1))}input::-moz-range-thumb:active{cursor:grabbing}}.hover\:cursor-grab:hover{cursor:grab!important}.hover\:bg-black-teal:hover{--tw-bg-opacity:1!important;background-color:rgb(3 42 36/var(--tw-bg-opacity,1))!important}.active\:cursor-grabbing:active{cursor:grabbing!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-0{left:0!important}.top-1\/2{top:50%!important}.z-0{z-index:0!important}.flex{display:flex!important}.w-inherit{width:inherit!important}.flex-1{flex:1 1 0%!important}.-translate-y-1\/2{--tw-translate-y:-50%!important}.-translate-y-1\/2,.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}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}

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

@@ -0,0 +1,144 @@
+import { h } from "@stencil/core";
+export class Range {
+    /**
+     * The min value of the range
+     */
+    min = 0;
+    /**
+     * The max value of the range
+     */
+    max = 100;
+    /**
+     * The steps to go by
+     */
+    step = 0.5;
+    /**
+     * The current value of the range
+     */
+    value = 0;
+    /**
+     * Event whenever the value changes
+     */
+    valueChange;
+    render() {
+        const percentage = Math.round((this.value / (this.max - this.min)) * 100);
+        return (h("div", { key: '60ed789915eaf9cdaba8e2f5feddd88858d939b3', class: 'flex w-inherit items-center gap-2 text-black-teal-300' }, h("p-icon", { key: '4ed624b64356e222b656476578fce3e41a1a31d7', variant: 'minus' }), h("div", { key: '10f3a04020942154e6c62fe3e0b98e1841ccad2e', class: 'relative h-6' }, h("input", { key: 'a8a5dad5eadc022a4fc56f44d3f06049b33f921d', class: 'z-0 flex-1', type: 'range', min: this.min, max: this.max, step: this.step, value: this.value, onInput: ev => this.valueChange.emit(ev.target.value) }), h("div", { key: '6dafadf1cda58774aa8d37e4055f6f4397b5a696', class: 'z-1 absolute left-0 top-1/2 h-[2px] -translate-y-1/2 transform bg-black-teal-300', style: {
+                width: `calc(${percentage}% - (1rem * ${percentage} / 100))`,
+            } })), h("p-icon", { key: '8860d1559b785e5a246be82c1fd0f2992248f02c', variant: 'plus' })));
+    }
+    static get is() { return "p-range"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["range.component.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["range.component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "min": {
+                "type": "number",
+                "attribute": "min",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The min value of the range"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "attribute": "max",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The max value of the range"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "100"
+            },
+            "step": {
+                "type": "number",
+                "attribute": "step",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The steps to go by"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0.5"
+            },
+            "value": {
+                "type": "number",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current value of the range"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event whenever the value changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=range.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"range.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/range/range.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,KAAK;IACjB;;OAEG;IACK,GAAG,GAAW,CAAC,CAAC;IAExB;;OAEG;IACK,GAAG,GAAW,GAAG,CAAC;IAE1B;;OAEG;IACK,IAAI,GAAW,GAAG,CAAC;IAE3B;;OAEG;IACK,KAAK,GAAW,CAAC,CAAC;IAE1B;;OAEG;IACwB,WAAW,CAAuB;IAE7D,MAAM;QACL,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QAE1E,OAAO,CACN,4DAAK,KAAK,EAAC,uDAAuD;YACjE,+DAAQ,OAAO,EAAC,OAAO,GAAG;YAC1B,4DAAK,KAAK,EAAC,cAAc;gBACxB,8DACC,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,EAAE,CAAC,EAAE,CACb,IAAI,CAAC,WAAW,CAAC,IAAI,CAAE,EAAE,CAAC,MAA2B,CAAC,KAAK,CAAC,GAE5D;gBACF,4DACC,KAAK,EAAC,kFAAkF,EACxF,KAAK,EAAE;wBACN,KAAK,EAAE,QAAQ,UAAU,eAAe,UAAU,UAAU;qBAC5D,GACK,CACF;YACN,+DAAQ,OAAO,EAAC,MAAM,GAAG,CACpB,CACN,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-range',\n\tstyleUrl: 'range.component.css',\n\tshadow: true,\n})\nexport class Range {\n\t/**\n\t * The min value of the range\n\t */\n\t@Prop() min: number = 0;\n\n\t/**\n\t * The max value of the range\n\t */\n\t@Prop() max: number = 100;\n\n\t/**\n\t * The steps to go by\n\t */\n\t@Prop() step: number = 0.5;\n\n\t/**\n\t * The current value of the range\n\t */\n\t@Prop() value: number = 0;\n\n\t/**\n\t * Event whenever the value changes\n\t */\n\t@Event({ bubbles: false }) valueChange: EventEmitter<string>;\n\n\trender() {\n\t\tconst percentage = Math.round((this.value / (this.max - this.min)) * 100);\n\n\t\treturn (\n\t\t\t<div class='flex w-inherit items-center gap-2 text-black-teal-300'>\n\t\t\t\t<p-icon variant='minus' />\n\t\t\t\t<div class='relative h-6'>\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass='z-0 flex-1'\n\t\t\t\t\t\ttype='range'\n\t\t\t\t\t\tmin={this.min}\n\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\tstep={this.step}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tonInput={ev =>\n\t\t\t\t\t\t\tthis.valueChange.emit((ev.target as HTMLInputElement).value)\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass='z-1 absolute left-0 top-1/2 h-[2px] -translate-y-1/2 transform bg-black-teal-300'\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: `calc(${percentage}% - (1rem * ${percentage} / 100))`,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></div>\n\t\t\t\t</div>\n\t\t\t\t<p-icon variant='plus' />\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

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

@@ -296,7 +296,7 @@ export class Select {
         if (this.error?.length) {
             buttonIcon = 'warning';
         }
-        return (h("p-dropdown", { key: '6f6f679ef40aa9f1d76cb918f5d58151514252cc', disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev), usePortal: this.usePortal, strategy: this.strategy }, h("p-field-container", { key: '1649d36d0b4264c5beba02602312390e16ba04ab', slot: 'trigger', variant: 'write', prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, forceShowTooltip: !!this.error?.length && !this._showDropdown }, h("p-button", { key: 'f1af3b2a5573ff53ba742dfe4d5ad84ed24ca26c', class: 'w-full', slot: 'content', variant: 'secondary', size: this.size, chevron: this.showChevron ? (this._showDropdown ? 'up' : 'down') : false, disabled: this.disabled, active: this._showDropdown, error: !!this.error?.length, icon: buttonIcon, onClick: ev => this._onClick(ev) }, h("div", { key: '4d767ee052e81fdc1240d01c09fa822b3930e04c', 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("p-dropdown", { key: '1d9a6331dd586fbaae253835ed53707dc4de4b8d', disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev), usePortal: this.usePortal, strategy: this.strategy }, h("p-field-container", { key: '80f65e4b733f4586e205e3812064dd53371c5c82', slot: 'trigger', variant: 'write', prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, forceShowTooltip: !!this.error?.length && !this._showDropdown }, h("p-button", { key: '9fe31f3469128492ee3cf7cccd4f254b91a023de', class: 'w-full', slot: 'content', variant: 'secondary', size: this.size, chevron: this.showChevron ? (this._showDropdown ? 'up' : 'down') : false, disabled: this.disabled, active: this._showDropdown, error: !!this.error?.length, icon: buttonIcon, onClick: ev => this._onClick(ev) }, h("div", { key: '7ae2af505698b7fd160e2df3c689e6a0e0f110a3', 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/table/cell/table-cell.component.js

@@ -105,7 +105,7 @@ export class TableCell {
         };
     }
     render() {
-        return (h(Host, { key: '47349b412c9f4568469406d1f61c5c8d913202fc', class: this._getColumnClasses() }, this.checkbox, this._getContent()));
+        return (h(Host, { key: '0217a10104c88747703b825b455b97af90fcf78b', class: this._getColumnClasses() }, this.checkbox, this._getContent()));
     }
     _getContent() {
         if (this.variant === 'loading') {

package/dist/collection/components/molecules/table/footer/table-footer.component.js

@@ -86,11 +86,11 @@ export class TableFooter {
         }
     }
     render() {
-        return (h("div", { key: 'dd645bf716abf7fab8f11ca025e0a40dd556d39f', class: footer({
+        return (h("div", { key: 'fe3bc6fd43aeddcfcfa721747288bcd6e7db5637', class: footer({
                 pinned: this._isPinned,
                 hidden: this._hidden,
             }) }, (this.enablePaginationPages || this.enablePaginationSize) &&
-            this.total > 0 && (h("p-pagination", { key: '19f27136c8dd0ba4540989e7a66207952372f2b8', class: 'z-[2]', enablePaginationSize: this.enablePaginationSize, enablePaginationPages: this.enablePaginationPages, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, onPageSizeChange: ({ detail }) => this._changePageSize(detail), page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail), total: this.total, onPagesChange: ({ detail }) => (this._hasPaginationPages = detail > 1) }))));
+            this.total > 0 && (h("p-pagination", { key: '829a88dd314745e7fe3c802ce7abed35227888ca', class: 'z-[2]', enablePaginationSize: this.enablePaginationSize, enablePaginationPages: this.enablePaginationPages, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, onPageSizeChange: ({ detail }) => this._changePageSize(detail), page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail), total: this.total, onPagesChange: ({ detail }) => (this._hasPaginationPages = detail > 1) }))));
     }
     _changePageSize(s) {
         if (!s) {

package/dist/collection/components/molecules/table/row/table-row.component.js

@@ -59,13 +59,13 @@ export class TableRow {
      */
     checked = false;
     render() {
-        return (h("div", { key: 'ba7ce64a2cd2f52abb03a62ddc2d0f19f937dcbc', class: 'flex flex-col' }, h("div", { key: '9e4eac7563ec01d270c6a7d9c4c4d3d384de6f88', class: row({
+        return (h("div", { key: '08e5121a90482847a48d048d5b801995470dfda0', class: 'flex flex-col' }, h("div", { key: 'c8c2d9b555b2755d8fbb1d22fba22670de0c15f9', class: row({
                 variant: this.variant,
                 enableHover: this.enableHover,
                 checked: this.checked,
-            }) }, h("div", { key: '5cd221dd564e454386003d1df3fe6028de71bdf1', class: content({
+            }) }, h("div", { key: '97095433074e6ea7b1656fa8c3b2f4627174f331', class: content({
                 variant: this.variant,
-            }) }, h("slot", { key: 'fed29f4965e96fb2873114633a85a7aa4a884f2a' }), h("div", { key: '8d5300a686fac724187ba078500862e7f95f270f', class: actions() }, h("slot", { key: '5d8cdd0be2443334998d3f268b3fbcdb7a22dd24', name: 'actions' })))), h("p-divider", { key: 'e2ac9614296dc3883e30fc83004f781189f12e93' })));
+            }) }, h("slot", { key: '0f4279928e6f82712dac7620d929c67c44c2bb9a' }), h("div", { key: '9cbfe5613e096964b111f9cbb3c2056f44a1a7d8', class: actions() }, h("slot", { key: '61c442caef745415ec3e71cb08a8962dda5d22b5', name: 'actions' })))), h("p-divider", { key: 'ce9cf9fd6d1e057877ed9d20451ee6461dbd6581' })));
     }
     static get is() { return "p-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,7 +48,7 @@ export class Toast {
      */
     action;
     render() {
-        return (h(Host, { key: '7c2874fbba97c8fe5f6e3592ef02f5096b8776fb', onClick: () => this._onClick() }, h("div", { key: '11764a3b0c3935827929a3292c599667b95b25e3', class: indicator({ variant: this.variant }) }), h("div", { key: '80109f534d14e600643d69fe119a65ef2cc33d2f', class: content() }, h("div", { key: '681e62cb17ed77140520c65832374716e4ffa612', class: 'flex w-full min-w-0 flex-col' }, h("p", { key: '21ce7a2095920227008192e1c90e7fc8515faee3', class: 'm-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-white-500' }, this.header?.length ? this.header : h("slot", { name: 'header' })), h("p", { key: '1153f6ed724e56a0ed671910dc756b1e9343a249', class: 'm-0 w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs text-dark-teal-200' }, this.content?.length ? this.content : h("slot", { name: 'content' }))), this.enableAction && (h("p-button", { key: '6fd6786d8474df0da1d57d7954422e59eaa71cac', variant: 'transparent', iconOnly: true, icon: this.actionIcon, iconFlip: this.actionIconFlip, iconRotate: this.actionIconRotate, class: 'flex-shrink-0' })))));
+        return (h(Host, { key: '24a46972c0ec1bde4abddd1749dc897d63c6ae37', onClick: () => this._onClick() }, h("div", { key: 'ea842fa04918f4f12877ed33302f58c6f8dfda72', class: indicator({ variant: this.variant }) }), h("div", { key: '815b6af2f5412c807430f19256683c0d81a8f73b', class: content() }, h("div", { key: '36a1d790bb3d0171c34b4b1936fac13c108db74a', class: 'flex w-full min-w-0 flex-col' }, h("p", { key: '06a2c12c5b11db294f3450189af20829f681992a', class: 'm-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-white-500' }, this.header?.length ? this.header : h("slot", { name: 'header' })), h("p", { key: '02d0e7dccf01b233af695485d2b4a9f523483195', class: 'm-0 w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs text-dark-teal-200' }, this.content?.length ? this.content : h("slot", { name: 'content' }))), this.enableAction && (h("p-button", { key: 'c18a4ca07a2756ef683164277667dc5cba79c105', variant: 'transparent', iconOnly: true, icon: this.actionIcon, iconFlip: this.actionIconFlip, iconRotate: this.actionIconRotate, class: 'flex-shrink-0' })))));
     }
     _onClick() {
         if (this.enableAction) {

package/dist/collection/components/organisms/listing/listing.component.js

@@ -18,10 +18,10 @@ export class Listing {
         }
     }
     render() {
-        return (h("div", { key: 'c6ec99923a27631b2ee50ab70094074bb365cad9', class: cn('flex w-full flex-col flex-wrap items-start gap-1', {
+        return (h("div", { key: '756a9669e83dcea5fd61cbfa8cead90e6c13d030', class: cn('flex w-full flex-col flex-wrap items-start gap-1', {
                 'opacity-100': this._generatedOnce,
                 'opacity-0': !this._generatedOnce,
-            }) }, h("slot", { key: '1f951d7f973484efe4e3c2c1e209eb27d3fcd5d9', onSlotchange: () => this._generateLinesOnce() })));
+            }) }, h("slot", { key: '24ebcbc78316d665ee8b93d66eed96c810cc2e82', onSlotchange: () => this._generateLinesOnce() })));
     }
     _generateLinesOnce() {
         if (this._generateTimeout) {

package/dist/collection/components/organisms/navbar/navbar.component.js

@@ -42,7 +42,7 @@ const backdrop = cva(['z-navbar-backdrop layout-1280:hidden transition-opacity r
 export class Navbar {
     _show = false;
     render() {
-        return (h(Host, { key: 'ccea1ba5b71e5d7030fc0061c55e7b1f0cf199df' }, h("p-backdrop", { key: '6697e5a39331b9038c371528d030215019aec71b', class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), h("div", { key: '5dc02dabfa017fe2e0549b3464f3dae0686e7fdb', class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, h("div", { key: 'fdc11a2dba8032bcee10a3d718d3471bf08f0bc3', class: 'flex w-full items-center justify-between layout-1280:hidden' }, h("p-button", { key: 'dd627886a9bc8c5759e8d9465bf7038427599594', variant: 'secondary', icon: 'menu-arrow', iconFlip: 'horizontal', iconOnly: true, size: 'sm', onClick: () => (this._show = false) })), h("div", { key: '8eac51be7bcaeac093268cd4e6c2eb1f16f3e308', class: 'flex w-full flex-col items-stretch' }, h("slot", { key: 'd4d57618aa5354fac8b0a19c974d84ef6dd8d639', name: 'company' })), h("div", { key: '48949805268ce97c6c83a15a4e3ec1daaac73b86', class: 'flex w-full flex-col gap-6 overflow-y-auto' }, h("slot", { key: '46e52c419b8269702983519550a074a4bf217928', name: 'content' })), h("div", { key: '01bc1710293357fd8a1f85e66d88c4335c925ce4', class: 'mt-auto hidden w-full flex-col layout-1280:flex' }, h("slot", { key: 'cce5347a4e5e9a33d144ec69ae452b214435fcf1', name: 'user' }))), h("div", { key: '9191ee1056b84360e3ad0bc9a6d1101c80e00a4e', class: topbar({ class: sidebarAndTopbar() }) }, h("p-button", { key: 'caeb38522b307c81deadd55915edc4efe308cc26', variant: 'secondary', iconOnly: true, icon: 'menu-arrow', size: 'sm', onClick: () => (this._show = true) }), h("slot", { key: '18e2f632df00d70b2763d8bf4492b326b9e0eb40', name: 'topbar' }))));
+        return (h(Host, { key: '18b587d46cf90a64839a92b384c0c846956ab719' }, h("p-backdrop", { key: '8fa1fc15cd2a3d73e184be1d8b05b00a2250a817', class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), h("div", { key: 'a86a6d8cb844535089dc0cfdd9e61be37f7a8aeb', class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, h("div", { key: '27e0fe423120885f22f82baa172c7c5f1e2faeac', class: 'flex w-full items-center justify-between layout-1280:hidden' }, h("p-button", { key: 'a4ae6f19e9b9efd87d2b68820d163f0a7837b93b', variant: 'secondary', icon: 'menu-arrow', iconFlip: 'horizontal', iconOnly: true, size: 'sm', onClick: () => (this._show = false) })), h("div", { key: '62aa24be22303bb8e8fc88195156e44e30b8e07f', class: 'flex w-full flex-col items-stretch' }, h("slot", { key: 'e65c24e1b4e01001e2b6753732c5ec6a8197e1c3', name: 'company' })), h("div", { key: 'baa3a8055ee5dbb8b282a5535f67e038f28ebd9f', class: 'flex w-full flex-col gap-6 overflow-y-auto' }, h("slot", { key: 'bc92f1a07b22277de68818d350f33e4672a1ca0b', name: 'content' })), h("div", { key: '1217fef6b02cf3d1ce2911bcffc65c7c5c71ed72', class: 'mt-auto hidden w-full flex-col layout-1280:flex' }, h("slot", { key: '58a67a78078fb20d1c25043dc9f8691c0626ad9a', name: 'user' }))), h("div", { key: 'c410a864a322a872def6619aceb7ef63134e30c5', class: topbar({ class: sidebarAndTopbar() }) }, h("p-button", { key: '310185ebc6282585eb23744a1dee1b2a24abd521', variant: 'secondary', iconOnly: true, icon: 'menu-arrow', size: 'sm', onClick: () => (this._show = true) }), h("slot", { key: '50ecdce5b9203c05b0bb84d8c05df1dd8384438b', name: 'topbar' }))));
     }
     handleCloseNavbar() {
         this._show = false;