@paperless/core 0.1.0-alpha.34 → 0.1.0-alpha.340

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

@@ -0,0 +1,514 @@
+import { h, Host } from '@stencil/core';
+import { format, isAfter, isBefore, isSameDay, isValid, parse, startOfDay } from 'date-fns';
+import { childOf } from '../../../utils';
+export class Datepicker {
+  constructor() {
+    this._defaultFormats = {
+      year: 'yyyy',
+      month: 'LLLL, yyyy',
+      day: 'dd-MM-yyyy',
+    };
+    this.placeholder = undefined;
+    this.value = undefined;
+    this.preselectToday = false;
+    this.disabledDates = undefined;
+    this.minDate = undefined;
+    this.maxDate = undefined;
+    this.disableWeekends = false;
+    this.mode = 'day';
+    this.format = 'dd-MM-yyyy';
+    this.size = 'medium';
+    this.prefix = undefined;
+    this.label = undefined;
+    this.helper = undefined;
+    this.error = undefined;
+    this.disabled = false;
+    this._showDropdown = false;
+    this._value = undefined;
+    this._minDate = undefined;
+    this._maxDate = undefined;
+    this._disabledDates = [];
+  }
+  get formattedDate() {
+    if (!this._value) {
+      return;
+    }
+    return format(this._value, this.format);
+  }
+  _parseValue(value) {
+    console.log("[Stencil] @Watch('value')", this.placeholder, value);
+    if (!value && this.preselectToday) {
+      value = new Date();
+    }
+    if (typeof value === 'string') {
+      value = new Date(value);
+    }
+    this._setValue(value);
+  }
+  _parseMinDate(minDate) {
+    if (typeof minDate === 'string') {
+      minDate = new Date(minDate);
+    }
+    if (!isValid(minDate)) {
+      return;
+    }
+    this._minDate = minDate;
+    if (isBefore(this._value, this._minDate)) {
+      this._setValue(null);
+    }
+  }
+  _parseMaxDate(maxDate) {
+    if (typeof maxDate === 'string') {
+      maxDate = new Date(maxDate);
+    }
+    if (!isValid(maxDate)) {
+      return;
+    }
+    this._maxDate = maxDate;
+    if (isAfter(this._value, this._maxDate)) {
+      this._setValue(null);
+    }
+  }
+  _parseDisabledDates(disabledDates) {
+    if (typeof disabledDates === 'string') {
+      disabledDates = JSON.parse(disabledDates);
+    }
+    if (!disabledDates || !Array.isArray(disabledDates)) {
+      return;
+    }
+    // normalize all to date
+    this._disabledDates = disabledDates
+      .map((date) => {
+      if (typeof date === 'string') {
+        return new Date(date);
+      }
+      return date;
+    })
+      .filter((date) => isValid(date));
+    if (this._isDisabledDay(this._value)) {
+      this._setValue(null);
+    }
+  }
+  componentWillLoad() {
+    if (this.disabledDates) {
+      this._parseDisabledDates(this.disabledDates);
+    }
+    if (this.minDate) {
+      this._parseMinDate(this.minDate);
+    }
+    if (this.maxDate) {
+      this._parseMaxDate(this.maxDate);
+    }
+    if (this.mode !== 'day' &&
+      this.format === this._defaultFormats['day']) {
+      this.format = this._defaultFormats[this.mode];
+    }
+    this._parseValue(this.value);
+  }
+  componentShouldUpdate() {
+    console.log("[Stencil] componentShouldUpdate", this.placeholder, this.value, this._value);
+  }
+  componentWillUpdate() {
+    console.log("[Stencil] componentWillUpdate", this.placeholder, this.value, this._value);
+  }
+  render() {
+    return (h(Host, { class: "p-datepicker" }, h("p-dropdown", { disableTriggerClick: true, applyMaxWidth: false, applyFullWidth: false, insideClick: true, show: this._showDropdown }, h("p-input-group", { slot: "trigger", icon: "calendar", iconPosition: "start", 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.formattedDate, class: "p-input cursor-pointer", onFocus: () => this._onFocus(), onInput: (ev) => this._onInput(ev) })), h("div", { slot: "items" }, h("p-calendar", { variant: "embedded", value: this._value, onValueChange: ({ detail }) => this._setValue(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)) {
+      return;
+    }
+    this._showDropdown = false;
+  }
+  _onFocus() {
+    this._showDropdown = true;
+  }
+  _onBlur() {
+    this._showDropdown = false;
+  }
+  _onInput(ev) {
+    if (this._onInputTimeout) {
+      clearTimeout(this._onInputTimeout);
+      this._onInputTimeout = null;
+    }
+    this._onInputTimeout = setTimeout(() => {
+      const value = parse(ev.target.value, this.format, new Date());
+      if (!isValid(value)) {
+        return;
+      }
+      this._setValue(value, false);
+    }, 250);
+  }
+  _setValue(value, blur = true) {
+    if (value === null) {
+      this._value = null;
+      this.valueChange.emit(null);
+      return;
+    }
+    if (!isValid(value)) {
+      return;
+    }
+    if (this._isDisabledDay(value)) {
+      return;
+    }
+    value = startOfDay(value);
+    const isSameValue = isSameDay(value, this._value);
+    if (isSameValue) {
+      return;
+    }
+    if (blur) {
+      this._onBlur();
+    }
+    this._value = value;
+    this.valueChange.emit(value);
+  }
+  _isDisabledDay(day) {
+    return (isBefore(day, this._minDate) ||
+      (isAfter(day, this._maxDate) && !isSameDay(day, this._maxDate)) ||
+      this._disabledDates.findIndex((date) => isSameDay(date, day)) >= 0);
+  }
+  static get is() { return "p-datepicker"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["datepicker.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["datepicker.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "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
+      },
+      "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
+      },
+      "preselectToday": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wethter to automatically preselect today"
+        },
+        "attribute": "preselect-today",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabledDates": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<Date | 'string'> | string",
+          "resolved": "(\"string\" | Date)[] | string",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Disabled dates"
+        },
+        "attribute": "disabled-dates",
+        "reflect": false
+      },
+      "minDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Date | 'string'",
+          "resolved": "\"string\" | Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Min date"
+        },
+        "attribute": "min-date",
+        "reflect": false
+      },
+      "maxDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Date | 'string'",
+          "resolved": "\"string\" | Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Max date"
+        },
+        "attribute": "max-date",
+        "reflect": false
+      },
+      "disableWeekends": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to disable the weekends"
+        },
+        "attribute": "disable-weekends",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'year' | 'month' | 'day'",
+          "resolved": "\"day\" | \"month\" | \"year\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The mode of the datepicker"
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "'day'"
+      },
+      "format": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The display & parse format to use"
+        },
+        "attribute": "format",
+        "reflect": false,
+        "defaultValue": "'dd-MM-yyyy'"
+      },
+      "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 datepicker"
+        },
+        "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 datepicker"
+        },
+        "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 datepicker"
+        },
+        "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 datepicker"
+        },
+        "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 datepicker"
+        },
+        "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 datepicker"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_showDropdown": {},
+      "_value": {},
+      "_minDate": {},
+      "_maxDate": {},
+      "_disabledDates": {}
+    };
+  }
+  static get events() {
+    return [{
+        "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 watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "_parseValue"
+      }, {
+        "propName": "minDate",
+        "methodName": "_parseMinDate"
+      }, {
+        "propName": "maxDate",
+        "methodName": "_parseMaxDate"
+      }, {
+        "propName": "disabledDates",
+        "methodName": "_parseDisabledDates"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "documentClickHandler",
+        "target": "document",
+        "capture": true,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=datepicker.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/datepicker/datepicker.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    format,\n    isAfter,\n    isBefore,\n    isSameDay,\n    isValid,\n    parse,\n    startOfDay\n} from 'date-fns';\nimport { childOf } from '../../../utils';\n\n@Component({\n    tag: 'p-datepicker',\n    styleUrl: 'datepicker.component.scss',\n    shadow: false,\n})\nexport class Datepicker {\n    /**\n     * The placeholder of the input\n     */\n    @Prop() placeholder: string;\n\n    /**\n     * The current value\n     */\n    @Prop() value: any;\n\n    /**\n     * Wethter to automatically preselect today\n     */\n    @Prop() preselectToday: boolean = false;\n\n    /**\n     * Disabled dates\n     */\n    @Prop() disabledDates?: Array<Date | 'string'> | string;\n\n    /**\n     * Min date\n     */\n    @Prop() minDate?: Date | 'string';\n\n    /**\n     * Max date\n     */\n    @Prop() maxDate?: Date | 'string';\n\n    /**\n     * Wether to disable the weekends\n     */\n    @Prop() disableWeekends: boolean = false;\n\n    /**\n     * The mode of the datepicker\n     */\n    @Prop() mode: 'year' | 'month' | 'day' = 'day';\n\n    /**\n     * Event when the value changes\n     */\n    @Event() valueChange: EventEmitter<any>;\n\n    /**\n     * The display & parse format to use\n     */\n    @Prop() format: string = 'dd-MM-yyyy';\n\n    /**\n     * The size of the input group used by the datepicker\n     */\n    @Prop() size: 'small' | 'medium' = 'medium';\n\n    /**\n     * The prefix of the input group used by the datepicker\n     */\n    @Prop() prefix: string;\n\n    /**\n     * The label of the input group used by the datepicker\n     */\n    @Prop() label: string;\n\n    /**\n     * The helper of the input group used by the datepicker\n     */\n    @Prop() helper: string;\n\n    /**\n     * The helper of the input group used by the datepicker\n     */\n    @Prop({ reflect: true }) error: string;\n\n    /**\n     * Wether the input group is disabled used by the datepicker\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    @State() private _showDropdown: any = false;\n    @State() private _value: Date;\n    @State() private _minDate: Date;\n    @State() private _maxDate: Date;\n    @State() private _disabledDates: Date[] = [];\n\n    private _onInputTimeout: NodeJS.Timeout;\n\n    private _defaultFormats = {\n        year: 'yyyy',\n        month: 'LLLL, yyyy',\n        day: 'dd-MM-yyyy',\n    };\n\n    get formattedDate() {\n        if (!this._value) {\n            return;\n        }\n\n        return format(this._value, this.format);\n    }\n\n    @Watch('value')\n    private _parseValue(value: string | Date) {\n        console.log(\"[Stencil] @Watch('value')\", this.placeholder, value);\n        \n        if (!value && this.preselectToday) {\n            value = new Date();\n        }\n\n        if (typeof value === 'string') {\n            value = new Date(value);\n        }\n\n        this._setValue(value);\n    }\n\n    @Watch('minDate')\n    private _parseMinDate(minDate: string | Date) {\n        if (typeof minDate === 'string') {\n            minDate = new Date(minDate);\n        }\n\n        if (!isValid(minDate)) {\n            return;\n        }\n\n        this._minDate = minDate;\n\n        if(isBefore(this._value, this._minDate)) {\n            this._setValue(null);\n        }\n    }\n\n    @Watch('maxDate')\n    private _parseMaxDate(maxDate: string | Date) {\n        if (typeof maxDate === 'string') {\n            maxDate = new Date(maxDate);\n        }\n\n        if (!isValid(maxDate)) {\n            return;\n        }\n\n        this._maxDate = maxDate;\n\n        if(isAfter(this._value, this._maxDate)) {\n            this._setValue(null);\n        }\n    }\n\n    @Watch('disabledDates')\n    private _parseDisabledDates(disabledDates: Array<string | Date> | string) {\n        if (typeof disabledDates === 'string') {\n            disabledDates = JSON.parse(disabledDates);\n        }\n\n        if (!disabledDates || !Array.isArray(disabledDates)) {\n            return;\n        }\n\n        // normalize all to date\n        this._disabledDates = disabledDates\n            .map((date) => {\n                if (typeof date === 'string') {\n                    return new Date(date);\n                }\n\n                return date;\n            })\n            .filter((date) => isValid(date));\n\n        if(this._isDisabledDay(this._value)) {\n            this._setValue(null);\n        }\n    }\n\n    componentWillLoad() {\n        if (this.disabledDates) {\n            this._parseDisabledDates(this.disabledDates);\n        }\n\n        if (this.minDate) {\n            this._parseMinDate(this.minDate);\n        }\n\n        if (this.maxDate) {\n            this._parseMaxDate(this.maxDate);\n        }\n\n        if (\n            this.mode !== 'day' &&\n            this.format === this._defaultFormats['day']\n        ) {\n            this.format = this._defaultFormats[this.mode];\n        }\n\n        this._parseValue(this.value);\n    }\n\n    componentShouldUpdate() {\n        console.log(\"[Stencil] componentShouldUpdate\", this.placeholder, this.value, this._value);\n    }\n\n    componentWillUpdate() {\n        console.log(\"[Stencil] componentWillUpdate\", this.placeholder, this.value, this._value);\n    }\n\n    render() {\n        return (\n            <Host class=\"p-datepicker\">\n                <p-dropdown\n                    disableTriggerClick={true}\n                    applyMaxWidth={false}\n                    applyFullWidth={false}\n                    insideClick={true}\n                    show={this._showDropdown}\n                >\n                    <p-input-group\n                        slot=\"trigger\"\n                        icon=\"calendar\"\n                        iconPosition=\"start\"\n                        size={this.size}\n                        prefix={this.prefix}\n                        label={this.label}\n                        helper={this.helper}\n                        error={this.error}\n                        disabled={this.disabled}\n                        focused={this._showDropdown}\n                    >\n                        <input\n                            slot=\"input\"\n                            type=\"text\"\n                            placeholder={this.placeholder}\n                            value={this.formattedDate}\n                            class=\"p-input cursor-pointer\"\n                            onFocus={() => this._onFocus()}\n                            onInput={(ev) => this._onInput(ev)}\n                        />\n                    </p-input-group>\n                    <div slot=\"items\">\n                        <p-calendar\n                            variant=\"embedded\"\n                            value={this._value}\n                            onValueChange={({ detail }) =>\n                                this._setValue(detail)\n                            }\n                            preselectToday={this.preselectToday}\n                            disabledDates={this.disabledDates}\n                            minDate={this.minDate}\n                            maxDate={this.maxDate}\n                            disableWeekends={this.disableWeekends}\n                            mode={this.mode}\n                        />\n                    </div>\n                </p-dropdown>\n            </Host>\n        );\n    }\n\n    @Listen('click', { target: 'document', capture: true })\n    protected documentClickHandler({ target }) {\n        if (!this._showDropdown || childOf(target, this._el)) {\n            return;\n        }\n\n        this._showDropdown = false;\n    }\n\n    private _onFocus() {\n        this._showDropdown = true;\n    }\n\n    private _onBlur() {\n        this._showDropdown = false;\n    }\n\n    private _onInput(ev) {\n        if (this._onInputTimeout) {\n            clearTimeout(this._onInputTimeout);\n            this._onInputTimeout = null;\n        }\n\n        this._onInputTimeout = setTimeout(() => {\n            const value = parse(ev.target.value, this.format, new Date());\n            if (!isValid(value)) {\n                return;\n            }\n\n            this._setValue(value, false);\n        }, 250);\n    }\n\n    private _setValue(value: Date, blur = true) {\n        if(value === null) {\n            this._value = null;\n            this.valueChange.emit(null);\n            return;\n        }\n\n        if (!isValid(value)) {\n            return;\n        }\n\n        if (this._isDisabledDay(value)) {\n            return;\n        }\n\n        value = startOfDay(value);\n        const isSameValue = isSameDay(value, this._value);\n\n        if (isSameValue) {\n            return;\n        }\n\n        if (blur) {\n            this._onBlur();\n        }\n\n        this._value = value;\n        this.valueChange.emit(value);\n    }\n\n    private _isDisabledDay(day: Date) {\n        return (\n            isBefore(day, this._minDate) ||\n            (isAfter(day, this._maxDate) && !isSameDay(day, this._maxDate)) ||\n            this._disabledDates.findIndex((date) => isSameDay(date, day)) >= 0\n        );\n    }\n}\n"]}

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

@@ -1,9 +1 @@
-:host .trigger {
-  @apply w-auto h-auto inline-block;
-}
-:host p-dropdown-menu-container {
-  @apply hidden;
-}
-:host p-dropdown-menu-container[data-show] {
-  @apply flex;
-}
+.relative{position:relative!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.w-auto{width:auto!important}*{box-sizing:border-box}:host{display:block;position:relative}:host .trigger{display:block;height:auto;position:relative;width:auto}:host p-dropdown-menu-container{display:none;z-index:200}:host p-dropdown-menu-container[data-show]{display:flex}.static{position:static!important}.cursor-pointer{cursor:pointer!important}.blur{--tw-blur:blur(8px)!important}.blur,.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}.visible{visibility:visible!important}.absolute{position:absolute!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{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}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{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}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{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}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{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}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{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}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{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}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{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}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{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}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{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}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{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}.scale-y-flip{--tw-scale-y:-1!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}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.col-start-1{grid-column-start:1!important}.col-start-2{grid-column-start:2!important}.col-start-3{grid-column-start:3!important}.col-start-4{grid-column-start:4!important}.col-start-5{grid-column-start:5!important}.col-start-6{grid-column-start:6!important}.col-start-7{grid-column-start:7!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}.ml-auto{margin-left:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.h-6{height:1.5rem!important}.rounded{border-radius:.25rem!important}.inline{display:inline!important}.justify-center{justify-content:center!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.w-6{width:1.5rem!important}.max-w-\[20rem\]{max-width:20rem!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.self-center{align-self:center!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.font-semibold{font-weight:600!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.table-cell{display:table-cell!important}.w-1\/12{width:8.333333%!important}.w-10\/12{width:83.333333%!important}.w-11\/12{width:91.666667%!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}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\:w-1\/12{width:8.333333%!important}.tablet\:w-10\/12{width:83.333333%!important}.tablet\:w-11\/12{width:91.666667%!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}}@media (min-width:64rem){.desktop-xs\:w-1\/12{width:8.333333%!important}.desktop-xs\:w-10\/12{width:83.333333%!important}.desktop-xs\:w-11\/12{width:91.666667%!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}}@media (min-width:80rem){.desktop-sm\:w-1\/12{width:8.333333%!important}.desktop-sm\:w-10\/12{width:83.333333%!important}.desktop-sm\:w-11\/12{width:91.666667%!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}}@media (min-width:85.375rem){.desktop\:w-1\/12{width:8.333333%!important}.desktop\:w-10\/12{width:83.333333%!important}.desktop\:w-11\/12{width:91.666667%!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}}@media (min-width:90rem){.desktop-lg\:w-1\/12{width:8.333333%!important}.desktop-lg\:w-10\/12{width:83.333333%!important}.desktop-lg\:w-11\/12{width:91.666667%!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}}@media (min-width:120rem){.desktop-xl\:w-1\/12{width:8.333333%!important}.desktop-xl\:w-10\/12{width:83.333333%!important}.desktop-xl\:w-11\/12{width:91.666667%!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}}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.h-8{height:2rem!important}.w-3\/4{width:75%!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}@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}}.m-0{margin:0!important}.table-row{display:table-row!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}