@paperless/core 0.1.0-alpha.21 → 0.1.0-alpha.210

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

@@ -0,0 +1,554 @@
+import { Component, Element, Event, h, Host, Listen, Prop, State, } from '@stencil/core';
+import { childOf } from '../../../utils';
+export class Select {
+  constructor() {
+    /**
+     * The key of the object to display
+     */
+    this.displayKey = 'text';
+    /**
+     * The key of the object to return
+     */
+    this.valueKey = 'value';
+    /**
+     * Wether to automatically select the first item
+     */
+    this.autoSelectFirst = true;
+    /**
+     * The maximum amount of items to display
+     */
+    this.maxDisplayedItems = 10;
+    /**
+     * Wether to enable autocomplete
+     */
+    this.enableAutocomplete = true;
+    /**
+     * Wether the input uses async filtering
+     */
+    this.asyncFilter = false;
+    /**
+     * Wether to show loading items
+     */
+    this.loading = false;
+    /**
+     * The size of the input group used by the select
+     */
+    this.size = 'medium';
+    /**
+     * Wether the input group is disabled used by the select
+     */
+    this.disabled = false;
+    this._showDropdown = false;
+    this._selectedItem = null;
+    this._isAutoCompleting = false;
+  }
+  get _items() {
+    var _a;
+    if (!this.items || this.loading) {
+      return [];
+    }
+    let items = typeof this.items === 'string'
+      ? JSON.parse(this.items)
+      : this.items;
+    if (typeof (items === null || items === void 0 ? void 0 : items[0]) === 'string') {
+      this.displayKey = 'text';
+      this.valueKey = 'value';
+      items = items.map((str) => ({
+        value: str,
+        text: str,
+      }));
+    }
+    if (this._isAutoCompleting && ((_a = this.query) === null || _a === void 0 ? void 0 : _a.length) && !this.asyncFilter) {
+      items = items.filter((item) => {
+        if (this.queryKey) {
+          return this._checkvalue(this.queryKey, item);
+        }
+        return (this._checkvalue(this.valueKey, item) ||
+          this._checkvalue(this.displayKey, item));
+      });
+    }
+    return items === null || items === void 0 ? void 0 : items.slice(0, this.maxDisplayedItems);
+  }
+  get _displayValue() {
+    var _a;
+    if (this._isAutoCompleting) {
+      return this.query;
+    }
+    return (_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a[this.displayKey];
+  }
+  get _placeholder() {
+    var _a;
+    return this._isAutoCompleting && ((_a = this.autocompletePlaceholder) === null || _a === void 0 ? void 0 : _a.length)
+      ? this.autocompletePlaceholder
+      : this.placeholder;
+  }
+  componentDidLoad() {
+    var _a, _b, _c;
+    if (this.value) {
+      const value = typeof ((_b = (_a = this._items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b[this.valueKey]) === 'number' &&
+        !isNaN(this.value)
+        ? parseInt(this.value, 10)
+        : this.value;
+      this._selectedItem = this._items.find((i) => (i === null || i === void 0 ? void 0 : i[this.valueKey]) === value);
+      return;
+    }
+    if (this.autoSelectFirst) {
+      this._selectedItem = (_c = this._items) === null || _c === void 0 ? void 0 : _c[0];
+    }
+  }
+  render() {
+    return (h(Host, { class: "p-select" },
+      h("p-dropdown", { disableTriggerClick: true, calculateWidth: true, insideClick: true, show: this._showDropdown },
+        h("p-input-group", { slot: "trigger", icon: "chevron", iconPosition: "end", size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, error: this.error, disabled: this.disabled, focused: this._showDropdown },
+          h("input", { slot: "input", type: "text", placeholder: this._placeholder, value: this._displayValue, class: `p-input cursor-pointer ${!this._isAutoCompleting && 'read-only'}`, onFocus: () => this._onFocus(), onMouseDown: (ev) => this._onMouseDown(ev), onClick: () => this._onClick(), onInput: (ev) => this._onChange(ev), ref: (ref) => (this._inputRef = ref) })),
+        h("div", { slot: "items" }, this.loading
+          ? this._getLoadingItems()
+          : this._getItems()))));
+  }
+  documentClickHandler({ target }) {
+    if (!this._showDropdown || childOf(target, this._el)) {
+      return;
+    }
+    this._showDropdown = false;
+    this._isAutoCompleting = false;
+  }
+  _selectValue(item) {
+    this._selectedItem = item;
+    const value = item[this.valueKey];
+    this.value = value;
+    this.valueChange.emit(this.value);
+    this._onBlur(true);
+  }
+  _onFocus() {
+    if (!this.enableAutocomplete) {
+      this._inputRef.blur();
+      if (!this._showDropdown) {
+        this._showDropdown = true;
+      }
+      return;
+    }
+    this._isAutoCompleting = true;
+    this._showDropdown = true;
+  }
+  _onMouseDown(ev) {
+    if (this.enableAutocomplete) {
+      return;
+    }
+    ev.preventDefault();
+  }
+  _onClick() {
+    if (this.enableAutocomplete) {
+      return;
+    }
+    this._showDropdown = true;
+  }
+  _onBlur(force = false) {
+    if (!this.enableAutocomplete && !force) {
+      return;
+    }
+    this._isAutoCompleting = false;
+    this._showDropdown = false;
+  }
+  _onChange(ev) {
+    if (!this._isAutoCompleting) {
+      return;
+    }
+    this.query = ev.target.value;
+    this.queryChange.emit(this.query);
+  }
+  _checkvalue(key, item) {
+    var _a, _b;
+    return ((_b = (_a = item === null || item === void 0 ? void 0 : item[key]) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.indexOf(this.query)) >= 0;
+  }
+  _getItems() {
+    return this._items.map((item) => (h("p-dropdown-menu-item", { onClick: () => this._selectValue(item) }, item[this.displayKey])));
+  }
+  _getLoadingItems() {
+    return [0, 0, 0].map(() => (h("p-dropdown-menu-item", { enableHover: false },
+      h("p-loader", { variant: "ghost", class: "w-full h-6 rounded" }))));
+  }
+  static get is() { return "p-select"; }
+  static get originalStyleUrls() { return {
+    "$": ["select.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["select.component.css"]
+  }; }
+  static get properties() { return {
+    "items": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | any[]",
+        "resolved": "any[] | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The items to show in the dropdown"
+      },
+      "attribute": "items",
+      "reflect": false
+    },
+    "query": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current query"
+      },
+      "attribute": "query",
+      "reflect": false
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The placeholder of the input"
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "autocompletePlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The placeholder of the input when auto completing"
+      },
+      "attribute": "autocomplete-placeholder",
+      "reflect": false
+    },
+    "value": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current value"
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "displayKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The key of the object to display"
+      },
+      "attribute": "display-key",
+      "reflect": false,
+      "defaultValue": "'text'"
+    },
+    "valueKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The key of the object to return"
+      },
+      "attribute": "value-key",
+      "reflect": false,
+      "defaultValue": "'value'"
+    },
+    "queryKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The key of the object to display"
+      },
+      "attribute": "query-key",
+      "reflect": false
+    },
+    "autoSelectFirst": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to automatically select the first item"
+      },
+      "attribute": "auto-select-first",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "maxDisplayedItems": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The maximum amount of items to display"
+      },
+      "attribute": "max-displayed-items",
+      "reflect": false,
+      "defaultValue": "10"
+    },
+    "enableAutocomplete": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to enable autocomplete"
+      },
+      "attribute": "enable-autocomplete",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "asyncFilter": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the input uses async filtering"
+      },
+      "attribute": "async-filter",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to show loading items"
+      },
+      "attribute": "loading",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'medium'",
+        "resolved": "\"medium\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the input group used by the select"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "prefix": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The prefix of the input group used by the select"
+      },
+      "attribute": "prefix",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The label of the input group used by the select"
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "helper": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The helper of the input group used by the select"
+      },
+      "attribute": "helper",
+      "reflect": false
+    },
+    "error": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The helper of the input group used by the select"
+      },
+      "attribute": "error",
+      "reflect": true
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the input group is disabled used by the select"
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "_showDropdown": {},
+    "_selectedItem": {}
+  }; }
+  static get events() { return [{
+      "method": "queryChange",
+      "name": "queryChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event when the query of the autocomplete changes"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event when the value changes"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "_el"; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "documentClickHandler",
+      "target": "document",
+      "capture": true,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,12 @@
+:host {
+  @apply flex;
+}
+
+:host([direction=horizontal]) {
+  @apply h-auto items-end;
+}
+
+:host([direction=vertical]) {
+  @apply flex-col flex-wrap items-start;
+  @apply w-full min-h-full;
+} .static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}

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

@@ -0,0 +1,84 @@
+import { Component, Element, h, Host, Prop } from '@stencil/core';
+export class Stepper {
+  constructor() {
+    /**
+     * The currently active step
+     */
+    this.activeStep = 1;
+    /**
+     * The direction of the stepper
+     */
+    this.direction = 'horizontal';
+  }
+  componentWillRender() {
+    const activeStep = this.activeStep - 1;
+    this._steps = this._generateSteps(activeStep);
+  }
+  render() {
+    return h(Host, { class: "p-stepper" }, this._steps);
+  }
+  _generateSteps(activeStep) {
+    const elements = [];
+    const items = this._el.querySelectorAll('p-stepper-item');
+    for (let i = 0; i < (items === null || items === void 0 ? void 0 : items.length); i++) {
+      const item = items.item(i);
+      if (i > 0) {
+        elements.push(h("p-stepper-line", { direction: this.direction, active: i <= activeStep }));
+      }
+      const newItem = (h("p-stepper-item", { active: i === activeStep, finished: i < activeStep, direction: this.direction, align: i === 0
+          ? 'start'
+          : i === (items === null || items === void 0 ? void 0 : items.length) - 1
+            ? 'end'
+            : 'center' }, item.innerHTML));
+      elements.push(newItem);
+    }
+    return elements;
+  }
+  static get is() { return "p-stepper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stepper.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stepper.component.css"]
+  }; }
+  static get properties() { return {
+    "activeStep": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The currently active step"
+      },
+      "attribute": "active-step",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'horizontal' | 'vertical'",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The direction of the stepper"
+      },
+      "attribute": "direction",
+      "reflect": true,
+      "defaultValue": "'horizontal'"
+    }
+  }; }
+  static get elementRef() { return "_el"; }
+}

package/dist/collection/components/molecules/table-cell/table-cell.component.css

@@ -0,0 +1,3 @@
+p-table-cell {
+  @apply flex gap-4 items-center;
+} .static{position:static!important}.flex{display:flex!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-col{flex-direction:column!important}.rounded{border-radius:.25rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.h-6{height:1.5rem!important}.w-full{width:100%!important}.w-1\/12{width:8.333333%!important}.w-2\/12{width:16.666667%!important}.w-3\/12{width:25%!important}.w-4\/12{width:33.333333%!important}.w-5\/12{width:41.666667%!important}.w-6\/12{width:50%!important}.w-7\/12{width:58.333333%!important}.w-8\/12{width:66.666667%!important}.w-9\/12{width:75%!important}.w-10\/12{width:83.333333%!important}.w-11\/12{width:91.666667%!important}.w-auto{width:auto!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}@media (min-width:40rem){.tablet\:w-1\/12{width:8.333333%!important}.tablet\:w-2\/12{width:16.666667%!important}.tablet\:w-3\/12{width:25%!important}.tablet\:w-4\/12{width:33.333333%!important}.tablet\:w-5\/12{width:41.666667%!important}.tablet\:w-6\/12{width:50%!important}.tablet\:w-7\/12{width:58.333333%!important}.tablet\:w-8\/12{width:66.666667%!important}.tablet\:w-9\/12{width:75%!important}.tablet\:w-10\/12{width:83.333333%!important}.tablet\:w-11\/12{width:91.666667%!important}}@media (min-width:64rem){.desktop-xs\:w-1\/12{width:8.333333%!important}.desktop-xs\:w-2\/12{width:16.666667%!important}.desktop-xs\:w-3\/12{width:25%!important}.desktop-xs\:w-4\/12{width:33.333333%!important}.desktop-xs\:w-5\/12{width:41.666667%!important}.desktop-xs\:w-6\/12{width:50%!important}.desktop-xs\:w-7\/12{width:58.333333%!important}.desktop-xs\:w-8\/12{width:66.666667%!important}.desktop-xs\:w-9\/12{width:75%!important}.desktop-xs\:w-10\/12{width:83.333333%!important}.desktop-xs\:w-11\/12{width:91.666667%!important}}@media (min-width:80rem){.desktop-sm\:w-1\/12{width:8.333333%!important}.desktop-sm\:w-2\/12{width:16.666667%!important}.desktop-sm\:w-3\/12{width:25%!important}.desktop-sm\:w-4\/12{width:33.333333%!important}.desktop-sm\:w-5\/12{width:41.666667%!important}.desktop-sm\:w-6\/12{width:50%!important}.desktop-sm\:w-7\/12{width:58.333333%!important}.desktop-sm\:w-8\/12{width:66.666667%!important}.desktop-sm\:w-9\/12{width:75%!important}.desktop-sm\:w-10\/12{width:83.333333%!important}.desktop-sm\:w-11\/12{width:91.666667%!important}}@media (min-width:85.375rem){.desktop\:w-1\/12{width:8.333333%!important}.desktop\:w-2\/12{width:16.666667%!important}.desktop\:w-3\/12{width:25%!important}.desktop\:w-4\/12{width:33.333333%!important}.desktop\:w-5\/12{width:41.666667%!important}.desktop\:w-6\/12{width:50%!important}.desktop\:w-7\/12{width:58.333333%!important}.desktop\:w-8\/12{width:66.666667%!important}.desktop\:w-9\/12{width:75%!important}.desktop\:w-10\/12{width:83.333333%!important}.desktop\:w-11\/12{width:91.666667%!important}}@media (min-width:90rem){.desktop-lg\:w-1\/12{width:8.333333%!important}.desktop-lg\:w-2\/12{width:16.666667%!important}.desktop-lg\:w-3\/12{width:25%!important}.desktop-lg\:w-4\/12{width:33.333333%!important}.desktop-lg\:w-5\/12{width:41.666667%!important}.desktop-lg\:w-6\/12{width:50%!important}.desktop-lg\:w-7\/12{width:58.333333%!important}.desktop-lg\:w-8\/12{width:66.666667%!important}.desktop-lg\:w-9\/12{width:75%!important}.desktop-lg\:w-10\/12{width:83.333333%!important}.desktop-lg\:w-11\/12{width:91.666667%!important}}@media (min-width:120rem){.desktop-xl\:w-1\/12{width:8.333333%!important}.desktop-xl\:w-2\/12{width:16.666667%!important}.desktop-xl\:w-3\/12{width:25%!important}.desktop-xl\:w-4\/12{width:33.333333%!important}.desktop-xl\:w-5\/12{width:41.666667%!important}.desktop-xl\:w-6\/12{width:50%!important}.desktop-xl\:w-7\/12{width:58.333333%!important}.desktop-xl\:w-8\/12{width:66.666667%!important}.desktop-xl\:w-9\/12{width:75%!important}.desktop-xl\:w-10\/12{width:83.333333%!important}.desktop-xl\:w-11\/12{width:91.666667%!important}}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.justify-end{justify-content:flex-end!important}.gap-4{gap:1rem!important}.justify-self-end{justify-self:end!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:flex-row{flex-direction:row!important}}.static{position:static!important}.m-0{margin:0!important}*{box-sizing:border-box}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.h-6{height:1.5rem!important}.w-full{width:100%!important}.w-1\/12{width:8.333333%!important}.w-2\/12{width:16.666667%!important}.w-3\/12{width:25%!important}.w-4\/12{width:33.333333%!important}.w-5\/12{width:41.666667%!important}.w-6\/12{width:50%!important}.w-7\/12{width:58.333333%!important}.w-8\/12{width:66.666667%!important}.w-9\/12{width:75%!important}.w-10\/12{width:83.333333%!important}.w-11\/12{width:91.666667%!important}.w-auto{width:auto!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}@media (min-width:40rem){.tablet\:w-1\/12{width:8.333333%!important}.tablet\:w-2\/12{width:16.666667%!important}.tablet\:w-3\/12{width:25%!important}.tablet\:w-4\/12{width:33.333333%!important}.tablet\:w-5\/12{width:41.666667%!important}.tablet\:w-6\/12{width:50%!important}.tablet\:w-7\/12{width:58.333333%!important}.tablet\:w-8\/12{width:66.666667%!important}.tablet\:w-9\/12{width:75%!important}.tablet\:w-10\/12{width:83.333333%!important}.tablet\:w-11\/12{width:91.666667%!important}}@media (min-width:64rem){.desktop-xs\:w-1\/12{width:8.333333%!important}.desktop-xs\:w-2\/12{width:16.666667%!important}.desktop-xs\:w-3\/12{width:25%!important}.desktop-xs\:w-4\/12{width:33.333333%!important}.desktop-xs\:w-5\/12{width:41.666667%!important}.desktop-xs\:w-6\/12{width:50%!important}.desktop-xs\:w-7\/12{width:58.333333%!important}.desktop-xs\:w-8\/12{width:66.666667%!important}.desktop-xs\:w-9\/12{width:75%!important}.desktop-xs\:w-10\/12{width:83.333333%!important}.desktop-xs\:w-11\/12{width:91.666667%!important}}@media (min-width:80rem){.desktop-sm\:w-1\/12{width:8.333333%!important}.desktop-sm\:w-2\/12{width:16.666667%!important}.desktop-sm\:w-3\/12{width:25%!important}.desktop-sm\:w-4\/12{width:33.333333%!important}.desktop-sm\:w-5\/12{width:41.666667%!important}.desktop-sm\:w-6\/12{width:50%!important}.desktop-sm\:w-7\/12{width:58.333333%!important}.desktop-sm\:w-8\/12{width:66.666667%!important}.desktop-sm\:w-9\/12{width:75%!important}.desktop-sm\:w-10\/12{width:83.333333%!important}.desktop-sm\:w-11\/12{width:91.666667%!important}}@media (min-width:85.375rem){.desktop\:w-1\/12{width:8.333333%!important}.desktop\:w-2\/12{width:16.666667%!important}.desktop\:w-3\/12{width:25%!important}.desktop\:w-4\/12{width:33.333333%!important}.desktop\:w-5\/12{width:41.666667%!important}.desktop\:w-6\/12{width:50%!important}.desktop\:w-7\/12{width:58.333333%!important}.desktop\:w-8\/12{width:66.666667%!important}.desktop\:w-9\/12{width:75%!important}.desktop\:w-10\/12{width:83.333333%!important}.desktop\:w-11\/12{width:91.666667%!important}}@media (min-width:90rem){.desktop-lg\:w-1\/12{width:8.333333%!important}.desktop-lg\:w-2\/12{width:16.666667%!important}.desktop-lg\:w-3\/12{width:25%!important}.desktop-lg\:w-4\/12{width:33.333333%!important}.desktop-lg\:w-5\/12{width:41.666667%!important}.desktop-lg\:w-6\/12{width:50%!important}.desktop-lg\:w-7\/12{width:58.333333%!important}.desktop-lg\:w-8\/12{width:66.666667%!important}.desktop-lg\:w-9\/12{width:75%!important}.desktop-lg\:w-10\/12{width:83.333333%!important}.desktop-lg\:w-11\/12{width:91.666667%!important}}@media (min-width:120rem){.desktop-xl\:w-1\/12{width:8.333333%!important}.desktop-xl\:w-2\/12{width:16.666667%!important}.desktop-xl\:w-3\/12{width:25%!important}.desktop-xl\:w-4\/12{width:33.333333%!important}.desktop-xl\:w-5\/12{width:41.666667%!important}.desktop-xl\:w-6\/12{width:50%!important}.desktop-xl\:w-7\/12{width:58.333333%!important}.desktop-xl\:w-8\/12{width:66.666667%!important}.desktop-xl\:w-9\/12{width:75%!important}.desktop-xl\:w-10\/12{width:83.333333%!important}.desktop-xl\:w-11\/12{width:91.666667%!important}}