@paperless/core 0.1.0-alpha.43 → 0.1.0-alpha.430

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

@@ -0,0 +1,452 @@
+import { h, Host, } from '@stencil/core';
+import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
+import { formatTranslation, getLocaleComponentStrings, } from '../../../utils/localization';
+export class TableHeader {
+  constructor() {
+    this._defaultFilterButtonTemplate = () => formatTranslation(this._locales.filter);
+    this._defaultEditButtonTemplate = (amount) => this.editText
+      ? this.editText
+      : formatTranslation(amount === 0
+        ? this._locales.edit
+        : amount === 1
+          ? this._locales.edit_single
+          : this._locales.edit_plural, { amount });
+    this._queryObserver = new Subject();
+    this._hasCustomFilterSlot = false;
+    this.quickFilters = [];
+    this.activeQuickFilterIdentifier = undefined;
+    this.loading = false;
+    this.enableSearch = true;
+    this.itemsSelectedAmount = 0;
+    this.query = undefined;
+    this.enableFilter = true;
+    this.selectedFiltersAmount = undefined;
+    this.filterButtonTemplate = this._defaultFilterButtonTemplate;
+    this.enableEdit = true;
+    this.editLoading = false;
+    this.editIcon = 'pencil';
+    this.editText = undefined;
+    this.canEdit = false;
+    this.editButtonTemplate = this._defaultEditButtonTemplate;
+    this._locales = {};
+  }
+  componentWillLoad() {
+    this._hasCustomFilterSlot = !!this._el.querySelector(':scope > [slot="custom-filter"]');
+    this._setLocales();
+  }
+  componentDidLoad() {
+    this._queryObserver
+      .pipe(debounceTime(300), distinctUntilChanged())
+      .subscribe((value) => this.queryChange.emit(value));
+  }
+  render() {
+    const activeQuickFilter = this.quickFilters.find((f) => f.identifier === this.activeQuickFilterIdentifier);
+    const mobileTotal = (this.selectedFiltersAmount || 0) +
+      ((activeQuickFilter === null || activeQuickFilter === void 0 ? void 0 : activeQuickFilter.default) ? 0 : 1);
+    return (h(Host, { class: "p-table-header" }, this.loading && (h("p-loader", { variant: "ghost", class: "hidden h-8 w-3/4 rounded desktop-xs:flex" })), !this.loading &&
+      (this._hasCustomFilterSlot ||
+        this.quickFilters.length > 0) && (h("div", { class: "left-side flex flex-col justify-start gap-4 desktop-xs:flex-row" }, this._hasCustomFilterSlot && (h("slot", { name: "custom-filter" })), this.quickFilters.length > 0 && (h("p-segment-container", { class: "hidden desktop-xs:flex" }, this.quickFilters.map((item) => (h("p-segment-item", { active: item.identifier ===
+        this.activeQuickFilterIdentifier, onClick: () => this.quickFilter.emit(item) }, typeof item.text === 'string'
+      ? item.text
+      : item.text(), ' ', (item === null || item === void 0 ? void 0 : item.count) >= 0
+      ? `(${item.count})`
+      : ''))))))), h("div", { class: "right-side flex flex-col justify-end gap-4 desktop-xs:flex-row" }, this.enableSearch && (h("p-input-group", { icon: "search", size: "small", class: "desktop-xs:w-48" }, h("input", { type: "text", slot: "input", placeholder: "Zoeken...", value: this.query, onInput: (ev) => this._queryObserver.next(ev.target.value) }))), this.enableFilter && (h("p-button", { icon: "filter", variant: "secondary", size: "small", class: "w-full desktop-xs:w-auto", onClick: () => this.filter.emit() }, this.filterButtonTemplate
+      ? this.filterButtonTemplate()
+      : this._defaultFilterButtonTemplate(), this.selectedFiltersAmount &&
+      this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 &&
+      this._getLabel(mobileTotal, 'mobile'))), this.enableEdit && this._buttonTemplate()), this.enableEdit && this.canEdit && (h("div", { class: "fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden" }, this._buttonTemplate(true)))));
+  }
+  async _setLocales() {
+    this._locales = await getLocaleComponentStrings(this._el);
+  }
+  _buttonTemplate(mobile = false) {
+    return (h("p-button", { class: mobile ? 'w-full' : 'hidden desktop-xs:flex', icon: this.editIcon, size: "small", disabled: !this.canEdit, onClick: () => this.edit.emit(), loading: this.editLoading }, this.editButtonTemplate
+      ? this.editButtonTemplate(mobile ? this.itemsSelectedAmount : 0)
+      : this._defaultEditButtonTemplate(mobile ? this.itemsSelectedAmount : 0)));
+  }
+  _getLabel(amount, variant = 'default') {
+    return (h("p-label", { size: "small", variant: "negative", behavior: "text", class: `ml-1 ${variant === 'default'
+        ? 'hidden desktop-xs:flex'
+        : 'flex desktop-xs:hidden'}` }, amount));
+  }
+  static get is() { return "p-table-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table-header.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table-header.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "quickFilters": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "QuickFilter[]",
+          "resolved": "QuickFilter[]",
+          "references": {
+            "QuickFilter": {
+              "location": "import",
+              "path": "../../../types/table"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quick filters to show"
+        },
+        "defaultValue": "[]"
+      },
+      "activeQuickFilterIdentifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active quick filter identifier"
+        },
+        "attribute": "active-quick-filter-identifier",
+        "reflect": false
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether we want to show loading state"
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "enableSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show the search input"
+        },
+        "attribute": "enable-search",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "itemsSelectedAmount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The amount of items that are selected"
+        },
+        "attribute": "items-selected-amount",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "query": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The query to show in the search bar"
+        },
+        "attribute": "query",
+        "reflect": false
+      },
+      "enableFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show the filter button"
+        },
+        "attribute": "enable-filter",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "selectedFiltersAmount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The amount of filters being selected"
+        },
+        "attribute": "selected-filters-amount",
+        "reflect": false
+      },
+      "filterButtonTemplate": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "templateFunc",
+          "resolved": "() => string",
+          "references": {
+            "templateFunc": {
+              "location": "local",
+              "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/molecules/table-header/table-header.component.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template for the filter button text"
+        },
+        "defaultValue": "this._defaultFilterButtonTemplate"
+      },
+      "enableEdit": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show the edit button"
+        },
+        "attribute": "enable-edit",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "editLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the edit button is loading"
+        },
+        "attribute": "edit-loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "editIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IconVariant",
+          "resolved": "\"arrow\" | \"attachment\" | \"bread\" | \"calendar\" | \"camera\" | \"car\" | \"checklist\" | \"checkmark\" | \"chevron\" | \"clock\" | \"cogs\" | \"comment\" | \"document\" | \"download\" | \"envelope\" | \"explanation\" | \"eye\" | \"filter\" | \"folder\" | \"grid\" | \"headset\" | \"integration\" | \"list\" | \"location\" | \"megaphone\" | \"menu\" | \"minus\" | \"more\" | \"negative\" | \"notification\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"reload\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"signout\" | \"switch\" | \"tachometer\" | \"task\" | \"template\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
+          "references": {
+            "IconVariant": {
+              "location": "import",
+              "path": "../../../components"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The edit button icon"
+        },
+        "attribute": "edit-icon",
+        "reflect": false,
+        "defaultValue": "'pencil'"
+      },
+      "editText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The edit button text if changed"
+        },
+        "attribute": "edit-text",
+        "reflect": false
+      },
+      "canEdit": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to enable the edit button"
+        },
+        "attribute": "can-edit",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "editButtonTemplate": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "buttonTemplateFunc",
+          "resolved": "(amount: number) => string",
+          "references": {
+            "buttonTemplateFunc": {
+              "location": "local",
+              "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/molecules/table-header/table-header.component.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template for the edit button text"
+        },
+        "defaultValue": "this._defaultEditButtonTemplate"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_locales": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "quickFilter",
+        "name": "quickFilter",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when one of the quick filters is clicked"
+        },
+        "complexType": {
+          "original": "QuickFilter",
+          "resolved": "QuickFilter",
+          "references": {
+            "QuickFilter": {
+              "location": "import",
+              "path": "../../../types/table"
+            }
+          }
+        }
+      }, {
+        "method": "queryChange",
+        "name": "queryChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when the query changes"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "filter",
+        "name": "filter",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when the filter button is clicked"
+        },
+        "complexType": {
+          "original": "null",
+          "resolved": "null",
+          "references": {}
+        }
+      }, {
+        "method": "edit",
+        "name": "edit",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when the edit button is clicked"
+        },
+        "complexType": {
+          "original": "null",
+          "resolved": "null",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "_el"; }
+  static get listeners() {
+    return [{
+        "name": "localeChanged",
+        "method": "_setLocales",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=table-header.component.js.map

package/dist/collection/components/molecules/table-header/table-header.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-header.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/table-header/table-header.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} from '@stencil/core';\nimport { debounceTime, distinctUntilChanged, Subject } from 'rxjs';\nimport { IconVariant } from '../../../components';\nimport { QuickFilter } from '../../../types/table';\nimport {\n    formatTranslation,\n    getLocaleComponentStrings,\n} from '../../../utils/localization';\n\nexport type templateFunc = () => string;\nexport type buttonTemplateFunc = (amount: number) => string;\n\n@Component({\n    tag: 'p-table-header',\n    styleUrl: 'table-header.component.scss',\n    shadow: true,\n})\nexport class TableHeader {\n    private _defaultFilterButtonTemplate: templateFunc = () =>\n        formatTranslation(this._locales.filter);\n    private _defaultEditButtonTemplate: buttonTemplateFunc = (amount: number) =>\n        this.editText\n            ? this.editText\n            : formatTranslation(\n                  amount === 0\n                      ? this._locales.edit\n                      : amount === 1\n                      ? this._locales.edit_single\n                      : this._locales.edit_plural,\n                  { amount }\n              );\n\n    /**\n     * Quick filters to show\n     */\n    @Prop() quickFilters: QuickFilter[] = [];\n\n    /**\n     * Active quick filter identifier\n     */\n    @Prop() activeQuickFilterIdentifier: string;\n\n    /**\n     * Wether we want to show loading state\n     */\n    @Prop() loading: boolean = false;\n\n    /**\n     * Wether to show the search input\n     */\n    @Prop() enableSearch: boolean = true;\n\n    /**\n     * The amount of items that are selected\n     */\n    @Prop() itemsSelectedAmount: number = 0;\n\n    /**\n     * The query to show in the search bar\n     */\n    @Prop({ mutable: true }) query: string;\n\n    /**\n     * Wether to show the filter button\n     */\n    @Prop() enableFilter: boolean = true;\n\n    /**\n     * The amount of filters being selected\n     */\n    @Prop() selectedFiltersAmount: number;\n\n    /**\n     * The template for the filter button text\n     */\n    @Prop() filterButtonTemplate: templateFunc =\n        this._defaultFilterButtonTemplate;\n\n    /**\n     * Wether to show the edit button\n     */\n    @Prop() enableEdit: boolean = true;\n\n    /**\n     * Wether the edit button is loading\n     */\n    @Prop() editLoading: boolean = false;\n\n    /**\n     * The edit button icon\n     */\n    @Prop() editIcon: IconVariant = 'pencil';\n\n    /**\n     * The edit button text if changed\n     */\n    @Prop() editText: string;\n\n    /**\n     * Wether to enable the edit button\n     */\n    @Prop({ mutable: true }) canEdit: boolean = false;\n\n    /**\n     * The template for the edit button text\n     */\n    @Prop() editButtonTemplate: buttonTemplateFunc =\n        this._defaultEditButtonTemplate;\n\n    /**\n     * Event when one of the quick filters is clicked\n     */\n    @Event() quickFilter: EventEmitter<QuickFilter>;\n\n    /**\n     * Event when the query changes\n     */\n    @Event() queryChange: EventEmitter<string>;\n\n    /**\n     * Event when the filter button is clicked\n     */\n    @Event() filter: EventEmitter<null>;\n\n    /**\n     * Event when the edit button is clicked\n     */\n    @Event() edit: EventEmitter<null>;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    /**\n     * Locales used for this component\n     */\n    @State() private _locales: any = {};\n\n    private _queryObserver = new Subject<string>();\n    private _hasCustomFilterSlot = false;\n\n    componentWillLoad() {\n        this._hasCustomFilterSlot = !!this._el.querySelector(\n            ':scope > [slot=\"custom-filter\"]'\n        );\n\n        this._setLocales();\n    }\n\n    componentDidLoad() {\n        this._queryObserver\n            .pipe(debounceTime(300), distinctUntilChanged())\n            .subscribe((value) => this.queryChange.emit(value));\n    }\n\n    render() {\n        const activeQuickFilter = this.quickFilters.find(\n            (f) => f.identifier === this.activeQuickFilterIdentifier\n        );\n        const mobileTotal =\n            (this.selectedFiltersAmount || 0) +\n            (activeQuickFilter?.default ? 0 : 1);\n\n        return (\n            <Host class=\"p-table-header\">\n                {this.loading && (\n                    <p-loader\n                        variant=\"ghost\"\n                        class=\"hidden h-8 w-3/4 rounded desktop-xs:flex\"\n                    ></p-loader>\n                )}\n\n                {!this.loading &&\n                    (this._hasCustomFilterSlot ||\n                        this.quickFilters.length > 0) && (\n                        <div class=\"left-side flex flex-col justify-start gap-4 desktop-xs:flex-row\">\n                            {this._hasCustomFilterSlot && (\n                                <slot name=\"custom-filter\" />\n                            )}\n\n                            {this.quickFilters.length > 0 && (\n                                <p-segment-container class=\"hidden desktop-xs:flex\">\n                                    {this.quickFilters.map((item) => (\n                                        <p-segment-item\n                                            active={\n                                                item.identifier ===\n                                                this.activeQuickFilterIdentifier\n                                            }\n                                            onClick={() =>\n                                                this.quickFilter.emit(item)\n                                            }\n                                        >\n                                            {typeof item.text === 'string'\n                                                ? item.text\n                                                : item.text()}{' '}\n                                            {item?.count >= 0\n                                                ? `(${item.count})`\n                                                : ''}\n                                        </p-segment-item>\n                                    ))}\n                                </p-segment-container>\n                            )}\n                        </div>\n                    )}\n\n                <div class=\"right-side flex flex-col justify-end gap-4 desktop-xs:flex-row\">\n                    {this.enableSearch && (\n                        <p-input-group\n                            icon=\"search\"\n                            size=\"small\"\n                            class=\"desktop-xs:w-48\"\n                        >\n                            <input\n                                type=\"text\"\n                                slot=\"input\"\n                                placeholder=\"Zoeken...\"\n                                value={this.query}\n                                onInput={(ev) =>\n                                    this._queryObserver.next(\n                                        (ev.target as HTMLInputElement).value\n                                    )\n                                }\n                            />\n                        </p-input-group>\n                    )}\n\n                    {this.enableFilter && (\n                        <p-button\n                            icon=\"filter\"\n                            variant=\"secondary\"\n                            size=\"small\"\n                            class=\"w-full desktop-xs:w-auto\"\n                            onClick={() => this.filter.emit()}\n                        >\n                            {this.filterButtonTemplate\n                                ? this.filterButtonTemplate()\n                                : this._defaultFilterButtonTemplate()}\n                            {this.selectedFiltersAmount &&\n                                this._getLabel(this.selectedFiltersAmount)}\n                            {mobileTotal > 0 &&\n                                this._getLabel(mobileTotal, 'mobile')}\n                        </p-button>\n                    )}\n\n                    {this.enableEdit && this._buttonTemplate()}\n                </div>\n\n                {this.enableEdit && this.canEdit && (\n                    <div class=\"fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden\">\n                        {this._buttonTemplate(true)}\n                    </div>\n                )}\n            </Host>\n        );\n    }\n\n    @Listen('localeChanged', { target: 'body' })\n    private async _setLocales(): Promise<void> {\n        this._locales = await getLocaleComponentStrings(this._el);\n    }\n\n    private _buttonTemplate(mobile = false) {\n        return (\n            <p-button\n                class={mobile ? 'w-full' : 'hidden desktop-xs:flex'}\n                icon={this.editIcon}\n                size=\"small\"\n                disabled={!this.canEdit}\n                onClick={() => this.edit.emit()}\n                loading={this.editLoading}\n            >\n                {this.editButtonTemplate\n                    ? this.editButtonTemplate(\n                          mobile ? this.itemsSelectedAmount : 0\n                      )\n                    : this._defaultEditButtonTemplate(\n                          mobile ? this.itemsSelectedAmount : 0\n                      )}\n            </p-button>\n        );\n    }\n\n    private _getLabel(amount, variant: 'mobile' | 'default' = 'default') {\n        return (\n            <p-label\n                size=\"small\"\n                variant=\"negative\"\n                behavior=\"text\"\n                class={`ml-1 ${\n                    variant === 'default'\n                        ? 'hidden desktop-xs:flex'\n                        : 'flex desktop-xs:hidden'\n                }`}\n            >\n                {amount}\n            </p-label>\n        );\n    }\n}\n"]}

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

@@ -0,0 +1 @@
+.flex{display:flex!important}.w-full{width:100%!important}.flex-nowrap{flex-wrap:nowrap!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}.gap-4{gap:1rem!important}.border-x-0{border-left-width:0!important;border-right-width:0!important}.border-y{border-bottom-width:1px!important;border-top-width:1px!important}.border-solid{border-style:solid!important}.border-y-mystic-dark{--tw-border-opacity:1!important;border-bottom-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.uppercase{text-transform:uppercase!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem;padding-left:1.5rem;padding-right:1.5rem;width:100%}:host .content{align-items:center;display:flex;flex-wrap:nowrap;gap:1rem;justify-content:space-between;padding-bottom:1.5rem;padding-top:1.5rem;width:100%}:host(.variant-header){--tw-bg-opacity:1;--tw-text-opacity:1;--tw-border-opacity:1!important;background-color:rgb(252 253 254/var(--tw-bg-opacity));border-bottom:1px solid rgb(218 230 240/var(--tw-border-opacity))!important;border-left-style:solid!important;border-left-width:0!important;border-right-style:solid!important;border-right-width:0!important;border-top:1px solid rgb(218 230 240/var(--tw-border-opacity))!important;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.75rem;font-weight:600;line-height:1rem;text-transform:uppercase}:host(.variant-header) .content{padding-bottom:.5rem;padding-top:.5rem}:host(.enable-hover:hover){--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));cursor:pointer}.static{position:static!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.max-w-\[20rem\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!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}.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}.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}.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}}.h-8{height:2rem!important}@media (min-width:64rem){.desktop-xs\:flex{display:flex!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}.w-3\/4{width:75%!important}.border{border-width:1px!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\:hidden{display:none!important}.desktop-xs\:w-48{width:12rem!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}.visible{visibility:visible!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}.px-2{padding-left:.5rem!important;padding-right:.5rem!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}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!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}.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}.inline{display:inline!important}

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

@@ -0,0 +1,65 @@
+import { h, Host } from '@stencil/core';
+export class TableRow {
+  constructor() {
+    this.variant = 'default';
+    this.enableHover = true;
+  }
+  render() {
+    return (h(Host, { class: `p-table-row variant-${this.variant} ${this.enableHover &&
+        this.variant === 'default' &&
+        'enable-hover'}` }, h("div", { class: "content" }, h("slot", null)), this.variant === 'default' && h("p-divider", { class: "m-0" })));
+  }
+  static get is() { return "p-table-row"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table-row.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table-row.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'header'",
+          "resolved": "\"default\" | \"header\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the header"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "enableHover": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable hover"
+        },
+        "attribute": "enable-hover",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+}
+//# sourceMappingURL=table-row.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-row.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/table-row/table-row.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;mBAIuB,SAAS;uBAKlB,IAAI;;EAEnC,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IACD,KAAK,EAAE,uBAAuB,IAAI,CAAC,OAAO,IACtC,IAAI,CAAC,WAAW;QAChB,IAAI,CAAC,OAAO,KAAK,SAAS;QAC1B,cACJ,EAAE;MAEF,WAAK,KAAK,EAAC,SAAS;QAChB,eAAQ,CACN;MAEL,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,iBAAW,KAAK,EAAC,KAAK,GAAG,CACrD,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-table-row',\n    styleUrl: 'table-row.component.scss',\n    shadow: true,\n})\nexport class TableRow {\n    /**\n     * Variant of the header\n     */\n    @Prop() variant: 'default' | 'header' = 'default';\n\n    /**\n     * Enable hover\n     */\n    @Prop() enableHover: boolean = true;\n\n    render() {\n        return (\n            <Host\n                class={`p-table-row variant-${this.variant} ${\n                    this.enableHover &&\n                    this.variant === 'default' &&\n                    'enable-hover'\n                }`}\n            >\n                <div class=\"content\">\n                    <slot />\n                </div>\n\n                {this.variant === 'default' && <p-divider class=\"m-0\" />}\n            </Host>\n        );\n    }\n}\n"]}

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

@@ -0,0 +1 @@
+.flex{display:flex!important}.w-full{width:100%!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.border-l-4{border-left-width:4px!important}.border-solid{border-style:solid!important}.border-l-negative{--tw-border-opacity:1!important;border-left-color:rgb(185 30 40/var(--tw-border-opacity))!important}.border-l-positive{--tw-border-opacity:1!important;border-left-color:rgb(40 209 124/var(--tw-border-opacity))!important}.border-l-unbiased{--tw-border-opacity:1!important;border-left-color:rgb(255 199 45/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}.shadow-4{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-left-width:4px!important;border-radius:.25rem;border-style:solid!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;box-sizing:border-box;display:flex;gap:.5rem;justify-content:space-between;padding:1rem 1rem 1rem 1.25rem;width:100%}:host p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.variant-positive){--tw-border-opacity:1!important;border-left-color:rgb(40 209 124/var(--tw-border-opacity))!important}:host(.variant-unbiased){--tw-border-opacity:1!important;border-left-color:rgb(255 199 45/var(--tw-border-opacity))!important}:host(.variant-negative){--tw-border-opacity:1!important;border-left-color:rgb(185 30 40/var(--tw-border-opacity))!important}.static{position:static!important}.min-w-0{min-width:0!important}.flex-shrink-0{flex-shrink:0!important}.flex-col{flex-direction:column!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-storm{--tw-text-opacity:1!important;color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!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}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.justify-center{justify-content:center!important}