@postnord/pn-marketweb-components 4.1.0 → 4.1.2

package/umd/modules/@postnord/web-components/collection/components/input/pn-multiselect/pn-multiselect.js

@@ -57,6 +57,8 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
     selectName;
     /** Display an icon to the left of the select input */
     icon;
+    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 */
+    compact = false;
     /** Manually set the language, not needed if you have the pnTopbar available */
     language = null;
     /**
@@ -264,7 +266,8 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
     optionsCheckedLabels() {
         return this.optionsChecked()
             ?.map(({ label }) => label)
-            ?.join(', ');
+            ?.join(', ')
+            ?.trim();
     }
     optionsSearch() {
         const list = this.options?.reduce((sum, item) => {
@@ -550,8 +553,16 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
     renderChips() {
         return (h("ul", { id: this.idChips, class: "pn-multiselect-chips", "aria-label": this.translate('SELECTED_OPTIONS'), ref: el => (this.elChips = el) }, this.optionsCheckedPreview()?.map(({ label, value }, index) => (h("li", { class: "pn-multiselect-chip", "aria-setsize": this.optionsCheckedTotal(), "aria-posinset": index + 1, key: `${label}-${value}` }, h("span", { class: "pn-multiselect-chip-label" }, label), h("button", { type: "button", class: "pn-multiselect-chip-button", "aria-label": `${this.translate('REMOVE')} ${label}`, onClick: () => this.optionSelect({ val: value, checked: false, chip: index }) }, h("pn-icon", { icon: close, small: true, color: "blue700" }))))), this.optionsCheckedTotal() > this.itemCount && (h("li", { class: "pn-multiselect-chip", "data-count": true }, h("span", { class: "pn-multiselect-chip-label" }, "+ ", this.additonalOptions())))));
     }
+    renderLabel(compactLabel = false) {
+        if (!this.label)
+            return null;
+        const Tag = compactLabel ? 'div' : 'legend';
+        const id = compactLabel ? null : this.idLegend;
+        const attrs = compactLabel ? { inert: true } : { onClick: () => this.handleLabel() };
+        return (h(Tag, { id: id, class: { 'pn-multiselect-label': true, 'pn-multiselect-sr-only': this.compact && !compactLabel }, "data-compact": this.compact, ...attrs }, h("span", null, this.label), !!this.optionsChecked()?.length && (h("span", null, this.optionsCheckedTotal(), "/", this.optionsTotal()))));
+    }
     render() {
-        return (h(Host, { key: '9b25af2f368c47c8820ae000ed1389215cd952a2' }, h("fieldset", { key: '3aa70d5b8d62ee84616afe853c2ea746c991fc67', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.label && (h("legend", { key: '2e1bd83a8c6cb64bc9da287c70abcffccb334cbb', id: this.idLegend, class: "pn-multiselect-label", onClick: () => this.handleLabel() }, h("span", { key: '1d3073c63643320b9b9fde625832d89e41edaa35' }, this.label), !!this.optionsChecked()?.length && (h("span", { key: '316c9d892808df273840dcac243971e5fb5d2b62' }, this.optionsCheckedTotal(), "/", this.optionsTotal())))), h("div", { key: 'f79e79c0406ca659a6380902a6c8296df89bde97', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, h("div", { key: '73bc49a104f3846a41fa65f4e6e2623dba0806c2', class: "pn-multiselect-input" }, !!this.icon && h("pn-icon", { key: 'a68a06de67861057dd6d853ab53b7a34d76ca7ee', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), h("input", { key: '5df7e2ededf6e196ae47053ce650628391bc282d', tabindex: this.search ? null : '-1', type: this.search ? 'search' : 'input', id: this.selectId, class: "pn-multiselect-element", value: this.search ? this.searchQuery : this.optionsCheckedLabels(), name: this.selectName, placeholder: this.getPlaceholder(), required: this.search ? null : this.required, "aria-labelledby": this.idLegend, "aria-describedby": this.describedBy(), "aria-controls": `${this.idOptions} ${this.search ? this.idChips : ''}`, "aria-invalid": this.hasError()?.toString(), disabled: this.disabled, readonly: !this.search, onClick: () => (this.search && this.open ? null : this.toggleOpen()), onKeyDown: e => this.handleInputKeyboard(e), onBlur: e => this.handleBlur(e), onInput: e => this.search && this.setSearchQuery(e.target.value), ref: el => (this.elInput = el) }), this.hasError() && (h("pn-icon", { key: '5204a96efe2e88fee5d762a89b0623b1f8a163ce', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), h("button", { key: '78a487b3afc8c91e588d7922f3a2b490e9173d2f', id: this.idButton, type: "button", class: "pn-multiselect-button", "aria-label": this.translate(`BUTTON_${this.open ? 'CLOSE' : 'OPEN'}`), "aria-describedby": this.search ? null : this.selectId, "aria-controls": this.idOptions, "aria-expanded": this.open.toString(), onClick: () => this.toggleOpen(), ref: el => (this.elButton = el) }, h("pn-icon", { key: '061e6c886b21d559c439d2e689cfc02b328d87c9', class: "pn-multiselect-icon", icon: chevron_down, color: "blue700" }))), this.renderOptions()), this.hasMessage() && (h("p", { key: 'a1c3cdabb02dfc2403dbe55cc4ce2fb38f71578c', id: this.idHelper, class: "pn-multiselect-description", role: !!this.error ? 'alert' : null }, h("span", { key: '3f9428b50a5d440866462e52181e13aa3b894e6a' }, this.error || this.helpertext))), this.search && this.renderChips(), h("slot", { key: '74dc717f4f662fbc53b0e73f0690a10a13feeb22' }), this.search && (h("p", { key: '85126ac7f1b59b4f2fd988bff08b5b2bcb561cbb', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && h("span", { key: '45615fbfb30b133134d06c6fbee20a75a1dd61bd' }, this.srMessage))))));
+        return (h(Host, { key: '55af777ec6dd7165b4d16bdad6ec784fe81b8f20' }, h("fieldset", { key: '41a5e9a45b3460a96676d606c458a062efe6ab80', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.renderLabel(), h("div", { key: 'fb6874e8d17a70ec0e1e21bf3474575b01c3e669', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, h("div", { key: 'ab6aa995337f5a80e2026d98fe69399571249c24', class: "pn-multiselect-input" }, !!this.icon && h("pn-icon", { key: '0d9495e8864e266a6ababc752781b6e9c75595c3', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), h("input", { key: '6b5adbc27ab64b9cdb7f53a99d2f4cd9a2185e47', tabindex: this.search ? null : '-1', type: this.search ? 'search' : 'input', id: this.selectId, class: "pn-multiselect-element", value: this.search ? this.searchQuery : this.optionsCheckedLabels(), name: this.selectName, placeholder: this.getPlaceholder(), required: this.search ? null : this.required, "aria-labelledby": this.idLegend, "aria-describedby": this.describedBy(), "aria-controls": `${this.idOptions} ${this.search ? this.idChips : ''}`, "aria-invalid": this.hasError()?.toString(), disabled: this.disabled, readonly: !this.search, "data-compact": this.compact, onClick: () => (this.search && this.open ? null : this.toggleOpen()), onKeyDown: e => this.handleInputKeyboard(e), onBlur: e => this.handleBlur(e), onInput: e => this.search && this.setSearchQuery(e.target.value), ref: el => (this.elInput = el) }), this.compact && this.renderLabel(true), this.hasError() && (h("pn-icon", { key: '36e6f1e307758cdec5f9eda59413b8a0c28af78c', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), h("button", { key: '6197b7545b8646fecbd5a12e540e3011303f660c', id: this.idButton, type: "button", class: "pn-multiselect-button", "aria-label": this.translate(`BUTTON_${this.open ? 'CLOSE' : 'OPEN'}`), "aria-describedby": this.search ? null : this.selectId, "aria-controls": this.idOptions, "aria-expanded": this.open.toString(), onClick: () => this.toggleOpen(), ref: el => (this.elButton = el) }, h("pn-icon", { key: 'f9ddba2705b7782606897f6374f5963833bde76e', class: "pn-multiselect-icon", icon: chevron_down, color: "blue700" }))), this.renderOptions()), this.hasMessage() && (h("p", { key: 'd9fb544f999b9d779362f13090e9653bbd22fd4e', id: this.idHelper, class: "pn-multiselect-description", role: !!this.error ? 'alert' : null }, h("span", { key: 'ed1426909307379ba22c06a6870ad867f5a7cdad' }, this.error || this.helpertext))), this.search && this.renderChips(), h("slot", { key: 'd0bc44a9160fa4151e6f74c05fa3102189710454' }), this.search && (h("p", { key: '0d8c04c19227c1461a18ccc21a9fd7412a2f6ee1', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && h("span", { key: '610fc47f9a032c6e8931745e6b6d0b418eadd5ee' }, this.srMessage))))));
     }
     static get is() { return "pn-multiselect"; }
     static get originalStyleUrls() {
@@ -700,6 +711,29 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "reflect": false,
                 "attribute": "icon"
             },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.21.0"
+                        }],
+                    "text": "Set the date picker label as compact. If used, the `placeholder` will no longer be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
             "language": {
                 "type": "string",
                 "mutable": false,
@@ -710,7 +744,8 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                         "PnLanguages": {
                             "location": "import",
                             "path": "@/index",
-                            "id": "src/index.ts::PnLanguages"
+                            "id": "src/index.ts::PnLanguages",
+                            "referenceLocation": "PnLanguages"
                         }
                     }
                 },
@@ -736,7 +771,8 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                         "PnMultiselectOption": {
                             "location": "import",
                             "path": "@/index",
-                            "id": "src/index.ts::PnMultiselectOption"
+                            "id": "src/index.ts::PnMultiselectOption",
+                            "referenceLocation": "PnMultiselectOption"
                         }
                     }
                 },
@@ -1084,7 +1120,8 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                         "PnMultiselectOption": {
                             "location": "import",
                             "path": "@/index",
-                            "id": "src/index.ts::PnMultiselectOption"
+                            "id": "src/index.ts::PnMultiselectOption",
+                            "referenceLocation": "PnMultiselectOption"
                         }
                     }
                 }
@@ -1105,7 +1142,8 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                         "PnMultiselectOption": {
                             "location": "import",
                             "path": "@/index",
-                            "id": "src/index.ts::PnMultiselectOption"
+                            "id": "src/index.ts::PnMultiselectOption",
+                            "referenceLocation": "PnMultiselectOption"
                         }
                     }
                 }
@@ -1126,7 +1164,8 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                         "PnMultiselectOption": {
                             "location": "import",
                             "path": "@/index",
-                            "id": "src/index.ts::PnMultiselectOption"
+                            "id": "src/index.ts::PnMultiselectOption",
+                            "referenceLocation": "PnMultiselectOption"
                         }
                     }
                 }
@@ -1147,7 +1186,8 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                         "PnMultiselectOption": {
                             "location": "import",
                             "path": "@/index",
-                            "id": "src/index.ts::PnMultiselectOption"
+                            "id": "src/index.ts::PnMultiselectOption",
+                            "referenceLocation": "PnMultiselectOption"
                         }
                     }
                 }
@@ -1179,4 +1219,3 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
             }];
     }
 }
-//# sourceMappingURL=pn-multiselect.js.map

package/umd/modules/@postnord/web-components/collection/components/input/pn-multiselect/translations.js

@@ -102,4 +102,3 @@ export const translations = {
         no: 'Ingen tilgjengelige alternativer',
     },
 };
-//# sourceMappingURL=translations.js.map

package/umd/modules/@postnord/web-components/collection/components/input/pn-radio-button/pn-radio-button.js

@@ -129,7 +129,7 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
         return this.tile && this.expand;
     }
     render() {
-        return (h(Host, { key: 'd9dbe33df6c0844b6c747285996a6a2886ef4fbd' }, h("input", { key: '131acc3ca2b53a29e32243ad4910d57847d35a76', type: "radio", id: this.radioid, class: "pn-radio-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.displayHelpertext() ? this.idHelpertext : null, "data-tile": this.tile, "data-expand": this.expand, ref: el => (this.radioInput = el) }), h("div", { key: 'e63874e20e8cd6e3ba25314e2777723fc1d09a9b', class: "pn-radio", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: '6af4d9f83ecae41248fd142d8a1dfdbee1e86fd3', class: "pn-radio-button" }, h("div", { key: '8ea822e3b27a36c79795ad51231f306c9feeb439', class: "pn-radio-outer" }, h("div", { key: 'ea69cef2c0276512a0917852681ee07b696e0e69', class: "pn-radio-inner" }))), h("p", { key: 'ac0e72d695546b716c061b57ca246f2304ebc29c', class: "pn-radio-content", hidden: !this.displayText() }, h("label", { key: 'af6e10051b6df5eb25a4c705e7934fb7efd0927a', htmlFor: this.radioid, class: "pn-radio-label", hidden: !this.displayLabel() }, this.label), h("span", { key: '3daec2ddd84dbc6ffb0ab22c2d8dcaa29c7dbfc5', id: this.idHelpertext, class: "pn-radio-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: '09037832097ae5ad1f5d02e71e179d990d7cf3c0', name: "helpertext" })), h("slot", { key: 'd77fefcc1fed9e5386360501d666ff7f4adc7204' })), this.displayIcon() && h("pn-icon", { key: 'b8c8294fb100ad921278b378e317c95d2702806b', icon: this.icon, color: "gray900" }), h("div", { key: '8eac1b2c621bb8fad7cb89bd226ae0ce13842fc6', class: "pn-radio-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'f12c0a60214a8d0adf93e587e909994ad06800e9', class: "pn-radio-area" }, h("slot", { key: 'a67c2b5bee945a044aa5910544fa77f1034985ca', name: "content" }))))));
+        return (h(Host, { key: 'f386b0de0377d3dbe6891a2396d32b91a808d53c' }, h("input", { key: '189e352a198275f4dbd733425166e9cb2ed417ef', type: "radio", id: this.radioid, class: "pn-radio-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.displayHelpertext() ? this.idHelpertext : null, "data-tile": this.tile, "data-expand": this.expand, ref: el => (this.radioInput = el) }), h("div", { key: '710dcfe5b1660d25a9d98eb2c3739eb092f2ab4e', class: "pn-radio", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: '2d6bd1b03ee6565b88773c60a529ae2c5be89ffd', class: "pn-radio-button" }, h("div", { key: '8b15488acb65132b2498d361d320bb804af793de', class: "pn-radio-outer" }, h("div", { key: '64ebbe9b4d18f158a43bb5d82116ef4b19325ca1', class: "pn-radio-inner" }))), h("p", { key: '3b5ed02eeae60cff45b3b4999055c6d853a6c22f', class: "pn-radio-content", hidden: !this.displayText() }, h("label", { key: 'd5f3c5f59630407a45cc48fcb26e60fe7419c73c', htmlFor: this.radioid, class: "pn-radio-label", hidden: !this.displayLabel() }, this.label), h("span", { key: 'd4329417f178f6e7bcff365a1c051ebaa51b0447', id: this.idHelpertext, class: "pn-radio-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: 'defddc5970a0ea4c94c4f7b07e2cec3e7616d8c2', name: "helpertext" })), h("slot", { key: 'edaaf37351bb5d05bdc92696ac9ee2c8bc8e13f7' })), this.displayIcon() && h("pn-icon", { key: 'b9cd0ab07c691020efe39e8bb6ec39d02d5be826', icon: this.icon, color: "gray900" }), h("div", { key: '89655e67304498950e11c0388fddbbde350239a1', class: "pn-radio-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'eeebaf7c0b1fe8327810faec62877888cb6ff95d', class: "pn-radio-area" }, h("slot", { key: 'c997ee7e8ef719ff4b830df30a414cea637a54ff', name: "content" }))))));
     }
     static get is() { return "pn-radio-button"; }
     static get originalStyleUrls() {
@@ -429,4 +429,3 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
             }];
     }
 }
-//# sourceMappingURL=pn-radio-button.js.map

package/umd/modules/@postnord/web-components/collection/components/input/pn-range/pn-range.css

@@ -0,0 +1,417 @@
+/* Global utility variables */
+/* Input styles */
+/* Transition variables */
+pn-range {
+  display: block;
+}
+
+pn-range .pn-range {
+  color: #2d2013;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: clamp(0.25em, 5vw, 0.75em);
+  align-items: center;
+  container-type: inline-size;
+}
+@container (max-width: 24em) {
+  pn-range .pn-range .pn-range-header[data-input] {
+    position: absolute;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    margin: -1px;
+    white-space: nowrap;
+  }
+  pn-range .pn-range > pn-input {
+    flex: 1 1 100%;
+  }
+  pn-range .pn-range > pn-input .pn-input-label {
+    position: unset;
+    height: unset;
+    width: unset;
+    overflow: unset;
+    clip: unset;
+    margin: 0 0 0.25em 0;
+    white-space: unset;
+  }
+}
+pn-range .pn-range[data-markers] {
+  margin-bottom: 1em;
+}
+pn-range .pn-range[data-markers][data-input] {
+  margin-bottom: 0.5em;
+}
+pn-range .pn-range-header {
+  display: flex;
+  justify-content: space-between;
+  flex: 1 1 100%;
+  width: 100%;
+}
+pn-range .pn-range-label {
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  font-weight: 400;
+  color: #2d2013;
+  margin: 0 0 0.25em 0;
+  gap: 0.5em;
+  -webkit-tap-highlight-color: transparent;
+  transition-property: color, transform;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  pn-range .pn-range-label {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+pn-range .pn-range-label > span {
+  font-size: 0.875em;
+}
+pn-range .pn-range-message {
+  color: #5e554a;
+  font-size: 0.875em;
+  font-weight: 400;
+  margin: 0.25em 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+  text-align: left;
+  flex: 1 1 100%;
+  width: 100%;
+}
+pn-range .pn-range-message[hidden],
+pn-range .pn-range-message > span[hidden] {
+  display: none;
+}
+pn-range .pn-range-error {
+  color: #a70707;
+}
+pn-range .pn-range-field {
+  flex: 0 0 auto;
+}
+pn-range .pn-range-field .pn-input-label {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  margin: -1px;
+  white-space: nowrap;
+}
+pn-range .pn-range-group {
+  position: relative;
+  min-height: 0.75em;
+  padding: 0.75em 0;
+  flex: 1 1 auto;
+}
+pn-range .pn-range-group[data-pressing] *,
+pn-range .pn-range-group[data-pressing] *:before,
+pn-range .pn-range-group[data-pressing] *:after {
+  transition-duration: 0s;
+}
+pn-range .pn-range-text {
+  font-weight: 400;
+  font-size: 0.875em;
+  color: #2d2013;
+}
+pn-range .pn-range-input {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+pn-range .pn-range-input:focus ~ .pn-range-thumb:before, pn-range .pn-range-input:hover ~ .pn-range-thumb:before {
+  background-color: #0d234b;
+}
+pn-range .pn-range-input:focus ~ .pn-range-thumb .pn-range-tooltip, pn-range .pn-range-input:hover ~ .pn-range-thumb .pn-range-tooltip {
+  opacity: 1;
+  transform: translateX(50%) translateY(0%);
+  transition-delay: 0s;
+}
+pn-range .pn-range-input:focus-visible[data-single] ~ .pn-range-thumb:before {
+  outline-color: #005d92;
+}
+pn-range .pn-range-input:focus-visible[data-start] ~ .pn-range-thumb[data-start]:before, pn-range .pn-range-input:focus-visible[data-end] ~ .pn-range-thumb[data-end]:before {
+  outline-color: #005d92;
+}
+pn-range .pn-range-input[aria-invalid=true] ~ .pn-range-thumb:before {
+  background-color: #a70707;
+}
+pn-range .pn-range-input[aria-invalid=true] ~ .pn-range-thumb .pn-range-tooltip {
+  background-color: #500715;
+}
+pn-range .pn-range-input[aria-invalid=true] ~ .pn-range-track:before {
+  background-color: #a70707;
+}
+pn-range .pn-range-input[aria-invalid=true]:focus-visible[data-start] ~ .pn-range-thumb[data-start]:before, pn-range .pn-range-input[aria-invalid=true]:focus-visible[data-end] ~ .pn-range-thumb[data-end]:before {
+  outline-color: #a70707;
+}
+pn-range .pn-range-input[aria-invalid=true]:hover ~ .pn-range-thumb:before {
+  background-color: #500715;
+}
+pn-range .pn-range-input:disabled {
+  cursor: not-allowed;
+}
+pn-range .pn-range-input:disabled + .pn-range-track:before {
+  background-color: #969087;
+}
+pn-range .pn-range-input:disabled ~ .pn-range-thumb:before {
+  background-color: #5e554a;
+}
+pn-range .pn-range-input:disabled ~ .pn-range-thumb .pn-range-tooltip {
+  background-color: #2d2013;
+}
+pn-range .pn-range-overlay-input {
+  z-index: 5;
+  cursor: pointer;
+  position: absolute;
+  appearance: none;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  opacity: 0;
+  display: block;
+  -webkit-tap-highlight-color: transparent;
+}
+pn-range .pn-range-overlay-input:focus ~ .pn-range-thumb:before, pn-range .pn-range-overlay-input:focus-visible ~ .pn-range-thumb:before, pn-range .pn-range-overlay-input:hover ~ .pn-range-thumb:before {
+  background-color: #0d234b;
+}
+pn-range .pn-range-overlay-input:focus ~ .pn-range-thumb[data-align=right] .pn-range-tooltip, pn-range .pn-range-overlay-input:focus-visible ~ .pn-range-thumb[data-align=right] .pn-range-tooltip, pn-range .pn-range-overlay-input:hover ~ .pn-range-thumb[data-align=right] .pn-range-tooltip {
+  transform: translateX(0%) translateY(0%);
+  border-bottom-right-radius: 0em;
+}
+pn-range .pn-range-overlay-input:focus ~ .pn-range-thumb[data-align=left] .pn-range-tooltip, pn-range .pn-range-overlay-input:focus-visible ~ .pn-range-thumb[data-align=left] .pn-range-tooltip, pn-range .pn-range-overlay-input:hover ~ .pn-range-thumb[data-align=left] .pn-range-tooltip {
+  transform: translateX(100%) translateY(0%);
+  border-bottom-left-radius: 0em;
+}
+pn-range .pn-range-overlay-input:focus ~ .pn-range-thumb .pn-range-tooltip, pn-range .pn-range-overlay-input:focus-visible ~ .pn-range-thumb .pn-range-tooltip, pn-range .pn-range-overlay-input:hover ~ .pn-range-thumb .pn-range-tooltip {
+  opacity: 1;
+  transform: translateX(50%) translateY(0%);
+  transition-delay: 0s;
+}
+pn-range .pn-range-overlay-input[aria-invalid=true]:focus ~ .pn-range-thumb:before, pn-range .pn-range-overlay-input[aria-invalid=true]:focus-visible ~ .pn-range-thumb:before, pn-range .pn-range-overlay-input[aria-invalid=true]:hover ~ .pn-range-thumb:before {
+  background-color: #500715;
+}
+pn-range .pn-range-track {
+  pointer-events: none;
+  position: relative;
+  min-height: inherit;
+  display: block;
+  background-color: #d3cecb;
+  border-radius: 2em;
+  overflow: hidden;
+}
+pn-range .pn-range-track:before, pn-range .pn-range-track:after {
+  content: "";
+  z-index: 0;
+  position: absolute;
+  right: 100%;
+  pointer-events: none;
+  height: 100%;
+  width: 100%;
+  background-color: #005d92;
+  transform: translateX(var(--pn-range-progress));
+  transition-property: transform, background-color;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  pn-range .pn-range-track:before, pn-range .pn-range-track:after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+pn-range .pn-range-track:after {
+  display: none;
+}
+pn-range .pn-range-track:before {
+  background-color: #005d92;
+  transform: translateX(var(--pn-range-progress));
+}
+pn-range .pn-range-track[data-multiple]:before {
+  transform: translateX(var(--pn-range-progress-end));
+}
+pn-range .pn-range-track[data-multiple]:after {
+  display: unset;
+  background-color: #d3cecb;
+  transform: translateX(var(--pn-range-progress));
+}
+pn-range .pn-range-thumb {
+  pointer-events: none;
+  position: absolute;
+  height: 100%;
+  width: calc(100% - 1em);
+  top: 0;
+  right: calc(100% - 0.5em);
+  transform: translateX(var(--pn-range-progress));
+  transition-property: transform, border-radius;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  pn-range .pn-range-thumb {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+pn-range .pn-range-thumb[data-end] {
+  transform: translateX(var(--pn-range-progress-end));
+}
+pn-range .pn-range-thumb[data-align=right] .pn-range-tooltip {
+  transform: translateX(0%) translateY(10%);
+}
+pn-range .pn-range-thumb[data-align=right] .pn-range-tooltip:before {
+  transform: translateX(50%) translateY(-50%) rotate(0deg);
+}
+pn-range .pn-range-thumb[data-align=left] .pn-range-tooltip {
+  transform: translateX(100%) translateY(10%);
+}
+pn-range .pn-range-thumb[data-align=left] .pn-range-tooltip:before {
+  transform: translateX(50%) translateY(-50%) rotate(0deg);
+}
+pn-range .pn-range-thumb:before {
+  content: "";
+  position: absolute;
+  top: 0.5em;
+  right: -0.65625em;
+  height: 1.3125em;
+  width: 1.3125em;
+  background-color: #005d92;
+  border-radius: 5em;
+  outline: 0.2rem solid transparent;
+  outline-offset: 0.2rem;
+  transition-property: background-color, outline-color;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  pn-range .pn-range-thumb:before {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+pn-range .pn-range-tooltip {
+  position: absolute;
+  z-index: 10;
+  top: -85%;
+  right: 0;
+  text-align: center;
+  line-height: 1.25em;
+  white-space: nowrap;
+  height: 1.75em;
+  min-width: 2em;
+  padding: 0.25em 0.5em;
+  border-radius: 0.5em;
+  background-color: #0d234b;
+  color: #ffffff;
+  transform: translateX(50%) translateY(10%);
+  opacity: 0;
+  transition-property: opacity, transform, border-radius, background-color;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  pn-range .pn-range-tooltip {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+pn-range .pn-range-tooltip {
+  transition-delay: 0.4s;
+}
+pn-range .pn-range-tooltip-label {
+  font-size: 0.875em;
+  font-weight: 400;
+}
+pn-range .pn-range-tooltip:before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  left: 50%;
+  bottom: -0.25em;
+  height: 0.5em;
+  width: 0.5em;
+  background-color: inherit;
+  transform: translateX(-50%) translateY(0%) rotate(45deg);
+  transition-property: left, transform;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  pn-range .pn-range-tooltip:before {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+pn-range .pn-range-markers {
+  position: absolute;
+  top: 100%;
+  left: 0.5em;
+  min-height: 1em;
+  width: calc(100% - 1em);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+pn-range .pn-range-markers-item {
+  position: relative;
+  left: var(--pn-range-marker-position);
+}
+pn-range .pn-range-markers-item[data-min] .pn-range-markers-label {
+  left: -0.0625em;
+  transform: translateX(0%);
+}
+pn-range .pn-range-markers-item[data-max] .pn-range-markers-label {
+  left: unset;
+  right: 0;
+  transform: translateX(0%);
+}
+pn-range .pn-range-markers-item:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: -100%;
+  border-left: 0.0625em solid #d3cecb;
+  height: 1em;
+  z-index: -1;
+}
+pn-range .pn-range-markers-label {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  font-weight: 400;
+  font-size: 0.875em;
+  color: #5e554a;
+  transition-property: color;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  pn-range .pn-range-markers-label {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+pn-range .pn-range-markers-label[data-active] {
+  color: #2d2013;
+}