@paperless/core 0.1.0-alpha.28 → 0.1.0-alpha.280

package/dist/collection/components/atoms/label/label.component.css

@@ -0,0 +1,101 @@
+:host {
+  @apply flex gap-1 justify-center items-center px-2 desktop-xs:px-3 rounded;
+  @apply h-[1.625rem];
+  @apply text-sm font-semibold;
+}
+:host .content {
+  @apply hidden desktop-xs:flex items-center;
+}
+:host .circle {
+  @apply hidden rounded-round h-[0.625rem] w-[0.625rem];
+}
+:host p-icon {
+  @apply hidden text-xs !important;
+}
+
+:host([variant=info]) {
+  @apply bg-sky-light;
+  @apply text-sky;
+}
+:host([variant=info]) .circle {
+  @apply bg-sky;
+}
+
+:host([variant=positive]) {
+  @apply bg-positive-light;
+  @apply text-positive;
+}
+:host([variant=positive]) .circle {
+  @apply bg-positive;
+}
+
+:host([variant=unbiased]) {
+  @apply bg-unbiased-light;
+  @apply text-unbiased;
+}
+:host([variant=unbiased]) .circle {
+  @apply bg-unbiased;
+}
+
+:host([variant=negative]) {
+  @apply bg-negative-light;
+  @apply text-negative;
+}
+:host([variant=negative]) .circle {
+  @apply bg-negative;
+}
+
+:host([size=small]) {
+  @apply h-4 min-w-[1rem] px-1 py-[1px];
+  @apply text-xs justify-center;
+  @apply leading-3;
+}
+
+:host([behavior=circle]) .circle {
+  @apply block desktop-xs:block;
+}
+
+:host([behavior=icon]) p-icon {
+  @apply flex desktop-xs:flex !important;
+}
+
+:host([behavior=text]) p-icon {
+  @apply hidden desktop-xs:hidden !important;
+}
+:host([behavior=text]) .circle {
+  @apply hidden desktop-xs:hidden;
+}
+:host([behavior=text]) .content {
+  @apply flex desktop-xs:flex;
+}
+
+:host([behavior=combination]) {
+  @apply px-0 desktop-xs:px-3;
+  @apply w-[1.625rem] desktop-xs:w-auto;
+}
+:host([behavior=combination]) .circle {
+  @apply hidden desktop-xs:block;
+}
+:host([behavior=combination]) p-icon {
+  @apply flex desktop-xs:hidden !important;
+}
+
+:host([behavior=icon-only]) {
+  @apply px-0 desktop-xs:px-0;
+  @apply w-[1.625rem];
+}
+:host([behavior=icon-only]) .content {
+  @apply hidden desktop-xs:hidden;
+}
+:host([behavior=icon-only]) p-icon {
+  @apply flex desktop-xs:flex !important;
+}
+
+:host([behavior=icon-only][size=small]) {
+  @apply h-4 w-4;
+}
+
+:host([keep-mobile-content]) .content,
+:host([keep-mobile-content=true]) .content {
+  @apply flex desktop-xs:flex;
+} .static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mb-14{margin-bottom:3.5rem!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}.max-w-\[20rem\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!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-sm{font-size:.875rem!important;line-height:1.25rem!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}.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}.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}}.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}.static{position:static!important}*{box-sizing:border-box}

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

@@ -0,0 +1,177 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class Label {
+  constructor() {
+    /**
+     * Variant of the label
+     */
+    this.variant = 'info';
+    /**
+     * Define the behavior of the label
+     */
+    this.behavior = 'circle';
+    /**
+     * The size of the label
+     */
+    this.size = 'default';
+    /**
+     * Wether to keep the content on mobile
+     */
+    this.keepMobileContent = false;
+  }
+  render() {
+    return (h(Host, { class: "p-label" },
+      this.icon && (h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate })),
+      (this.behavior === 'circle' ||
+        this.behavior === 'combination') && (h("div", { class: "circle" })),
+      h("div", { class: "content" },
+        h("slot", null))));
+  }
+  static get is() { return "p-label"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["label.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["label.component.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| 'positive'\n        | 'unbiased'\n        | 'negative'\n        | 'info'",
+        "resolved": "\"info\" | \"negative\" | \"positive\" | \"unbiased\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variant of the label"
+      },
+      "attribute": "variant",
+      "reflect": true,
+      "defaultValue": "'info'"
+    },
+    "behavior": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| 'icon'\n        | 'circle'\n        | 'combination'\n        | 'text'\n        | 'icon-only'",
+        "resolved": "\"circle\" | \"combination\" | \"icon\" | \"icon-only\" | \"text\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define the behavior of the label"
+      },
+      "attribute": "behavior",
+      "reflect": true,
+      "defaultValue": "'circle'"
+    },
+    "icon": {
+      "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\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"signout\" | \"switch\" | \"tachometer\" | \"task\" | \"template\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
+        "references": {
+          "IconVariant": {
+            "location": "import",
+            "path": "../icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon to show on the label"
+      },
+      "attribute": "icon",
+      "reflect": true
+    },
+    "iconFlip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconFlipOptions",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "IconFlipOptions": {
+            "location": "import",
+            "path": "../icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon flip"
+      },
+      "attribute": "icon-flip",
+      "reflect": false
+    },
+    "iconRotate": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "RotateOptions",
+        "resolved": "-135 | -180 | -225 | -25 | -270 | -315 | -45 | -90 | 0 | 135 | 180 | 225 | 25 | 270 | 315 | 45 | 90",
+        "references": {
+          "RotateOptions": {
+            "location": "import",
+            "path": "../../../types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon rotate"
+      },
+      "attribute": "icon-rotate",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'default'",
+        "resolved": "\"default\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the label"
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "'default'"
+    },
+    "keepMobileContent": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to keep the content on mobile"
+      },
+      "attribute": "keep-mobile-content",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/components/atoms/layout/layout.component.css

@@ -0,0 +1,73 @@
+:host {
+  @apply grid h-screen w-screen content-start overflow-hidden;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(1fr, 3);
+  gap: 0;
+  grid-template-areas: "sidebar" "topbar" "content";
+}
+@screen desktop-xs {
+  :host {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "topbar topbar" "sidebar content";
+  }
+}
+:host .topbar,
+:host .sidebar,
+:host .content {
+  @apply self-start;
+}
+:host .topbar {
+  grid-area: topbar;
+  @apply sticky w-full;
+  @apply order-2 desktop-sm:order-1;
+}
+:host .sidebar {
+  grid-area: sidebar;
+  @apply flex h-full box-border;
+  @apply w-sidebar-mobile desktop-sm:w-sidebar-desktop;
+  @apply order-1 desktop-sm:order-2;
+}
+:host .content {
+  grid-area: content;
+  @apply relative flex flex-col h-full overflow-y-auto overflow-x-hidden;
+  @apply order-3;
+  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+}
+:host .content .inner-content {
+  @apply relative pb-24;
+  @apply px-content-mobile-x py-content-mobile-y;
+  @apply desktop-xs:px-content-desktop-x desktop-xs:py-content-desktop-y;
+  @apply desktop-xs:w-content-desktop-xs desktop-sm:w-content-desktop-sm desktop:w-content-desktop desktop-lg:w-content-desktop-lg desktop-xl:w-content-desktop-xl;
+}
+
+:host(.variant-default) .content {
+  @apply flex-1;
+}
+
+:host(.variant-login) {
+  grid-template-areas: "topbar topbar" "content content";
+}
+@screen desktop-xs {
+  :host(.variant-login) {
+    grid-template-areas: "topbar topbar" "content sidebar";
+  }
+}
+:host(.variant-login) .sidebar {
+  @apply hidden desktop-xs:flex w-unset;
+  @apply order-3 p-2;
+  @apply flex-1 overflow-hidden;
+}
+:host(.variant-login) .sidebar .inner-content {
+  @apply p-2;
+}
+:host(.variant-login) .content {
+  @apply order-3 desktop-xs:order-2;
+  @apply items-center desktop-xs:justify-center;
+}
+:host(.variant-login) .content .inner-content {
+  @apply box-border;
+  @apply desktop-xs:py-0 desktop-xs:px-18;
+  @apply w-full tablet:w-content-desktop-login;
+  @apply pt-14 desktop-xs:pt-content-mobile-y;
+} .static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/atoms/layout/layout.component.js

@@ -0,0 +1,47 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class Layout {
+  constructor() {
+    /**
+     * Variant of the layout
+     */
+    this.variant = 'default';
+  }
+  render() {
+    return (h(Host, { class: `p-layout variant-${this.variant}` },
+      h("div", { class: "topbar" },
+        h("slot", { name: "topbar" })),
+      h("div", { class: "sidebar" },
+        h("slot", { name: "sidebar" })),
+      h("div", { class: "content" },
+        h("div", { class: "inner-content" },
+          h("slot", { name: "content" })))));
+  }
+  static get is() { return "p-layout"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["layout.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["layout.component.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'login'",
+        "resolved": "\"default\" | \"login\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variant of the layout"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'default'"
+    }
+  }; }
+}

package/dist/collection/components/atoms/loader/loader.component.css

@@ -1,7 +1,8 @@
 :host .loader {
   @apply w-[1em] h-[1em] inline-block rounded-round;
-  @apply animate-spin duration-500;
-  @apply border-solid border-2 border-indigo-light border-t-indigo !important;
+  @apply border-2 border-solid border-indigo-light border-t-indigo;
+  animation: 500ms spin linear infinite;
+  will-change: transform;
 }
 :host .loader.color-storm {
   @apply border-storm-light/40 border-t-storm !important;
@@ -23,4 +24,29 @@
 }
 :host .loading-screen .content .loader-wrapper .loader {
   @apply text-4xl;
-}
+}
+
+:host(.variant-ghost) {
+  @apply block box-border;
+  will-change: background, background-position-x, background-color;
+  min-height: 1em;
+  min-width: 1em;
+  --loading-bg: #f7fafc;
+  --loading-stripe: rgba(252, 253, 254, 1);
+  background-color: var(--loading-bg);
+  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, var(--loading-stripe) 50%, rgba(255, 255, 255, 0) 60%) var(--loading-bg);
+  background-size: 200% 100%;
+  background-position-x: 180%;
+  animation: 1s loading ease-in-out infinite;
+}
+
+@keyframes loading {
+  to {
+    background-position-x: -20%;
+  }
+}
+@keyframes spin {
+  100% {
+    transform: rotate(1turn);
+  }
+} .static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.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-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}.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-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-0,.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-0{--tw-rotate:-0deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-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-135,.-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-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-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}.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-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!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-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;line-height:1!important}.text-6xl{font-size:3.75rem!important;line-height:1!important}*{box-sizing:border-box}.static{position:static!important}.inline{display:inline!important}.flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}*{box-sizing:border-box}.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}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.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-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}.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-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-0,.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-0{--tw-rotate:-0deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-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-135,.-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-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-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}.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-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!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-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;line-height:1!important}.text-6xl{font-size:3.75rem!important;line-height:1!important}*{box-sizing:border-box}.static{position:static!important}.inline{display:inline!important}.flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}*{box-sizing:border-box}.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}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}@media (min-width:40rem){.tablet\:w-80{width:20rem!important}.tablet\:w-\[33\.5rem\]{width:33.5rem!important}.tablet\:w-\[38rem\]{width:38rem!important}.tablet\:w-\[47\.5rem\]{width:47.5rem!important}.tablet\:w-\[57\.5rem\]{width:57.5rem!important}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}.static{position:static!important}*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!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:64rem){.desktop-xs\:hidden{display:none!important}}.static{position:static!important}.h-6{height:1.5rem!important}.w-full{width:100%!important}.cursor-pointer{cursor:pointer!important}.rounded{border-radius:.25rem!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}*{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}.static{position:static!important}.inline{display:inline!important}.flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}*{box-sizing:border-box}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mb-14{margin-bottom:3.5rem!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}.max-w-\[20rem\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!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-sm{font-size:.875rem!important;line-height:1.25rem!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}.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}.w-full{width:100%!important}.min-w-0{min-width: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}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.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-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}.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-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-0,.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-0{--tw-rotate:-0deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-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-135,.-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-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-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}.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-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!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-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;line-height:1!important}.text-6xl{font-size:3.75rem!important;line-height:1!important}*{box-sizing:border-box}.static{position:static!important}.inline{display:inline!important}.flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!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}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}*{box-sizing:border-box}.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}}.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}.static{position:static!important}*{box-sizing:border-box}.hidden{display:none!important}*{box-sizing:border-box}*{box-sizing:border-box}

package/dist/collection/components/atoms/loader/loader.component.js

@@ -26,6 +26,9 @@ export class Loader {
     if (!this._show) {
       return;
     }
+    if (this.variant === 'ghost') {
+      return h(Host, { class: "p-loader variant-ghost" });
+    }
     if (this.variant === 'full-screen') {
       return (h(Host, { class: "p-loader variant-full-screen" },
         h("div", { class: "loading-screen" },
@@ -33,7 +36,7 @@ export class Loader {
             h("slot", null),
             h("div", { class: "loader-wrapper" }, this._loader)))));
     }
-    return (h(Host, { class: `p-loader flex ${this.variant === 'full-width' &&
+    return (h(Host, { class: `p-loader variant-default flex ${this.variant === 'full-width' &&
         'w-full flex justify-center text-4xl'}` }, this._loader));
   }
   _checkShow() {
@@ -84,8 +87,8 @@ export class Loader {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'inline' | 'full-width' | 'full-screen' | 'modal'",
-        "resolved": "\"full-screen\" | \"full-width\" | \"inline\" | \"modal\"",
+        "original": "| 'inline'\n        | 'full-width'\n        | 'full-screen'\n        | 'modal'\n        | 'ghost'",
+        "resolved": "\"full-screen\" | \"full-width\" | \"ghost\" | \"inline\" | \"modal\"",
         "references": {}
       },
       "required": false,

package/dist/collection/components/atoms/modal-body/modal-body.component.css

@@ -0,0 +1,7 @@
+:host {
+  @apply px-6 tablet:px-10 desktop-xs:px-14 py-6;
+}
+
+:host(.variant-table) {
+  @apply px-6;
+} .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}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}@media (min-width:40rem){.tablet\:w-80{width:20rem!important}.tablet\:w-\[33\.5rem\]{width:33.5rem!important}.tablet\:w-\[38rem\]{width:38rem!important}.tablet\:w-\[47\.5rem\]{width:47.5rem!important}.tablet\:w-\[57\.5rem\]{width:57.5rem!important}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/atoms/modal-body/modal-body.component.js

@@ -0,0 +1,41 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class ModalBody {
+  constructor() {
+    /**
+     * The variant of the modal body
+     */
+    this.variant = 'default';
+  }
+  render() {
+    return (h(Host, { class: `p-modal-body variant-${this.variant}` },
+      h("slot", null)));
+  }
+  static get is() { return "p-modal-body"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["modal-body.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["modal-body.component.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'table'",
+        "resolved": "\"default\" | \"table\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The variant of the modal body"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'default'"
+    }
+  }; }
+}

package/dist/collection/components/atoms/modal-container/modal-container.component.css

@@ -0,0 +1,6 @@
+p-modal-container {
+  @apply flex flex-col w-full tablet:w-auto z-modal;
+  @apply bg-white rounded-t-xxlarge desktop-xs:rounded-b-xxlarge;
+  @apply overflow-hidden;
+  @apply shadow-4 !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}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}@media (min-width:40rem){.tablet\:w-80{width:20rem!important}.tablet\:w-\[33\.5rem\]{width:33.5rem!important}.tablet\:w-\[38rem\]{width:38rem!important}.tablet\:w-\[47\.5rem\]{width:47.5rem!important}.tablet\:w-\[57\.5rem\]{width:57.5rem!important}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}@media (min-width:40rem){.tablet\:w-80{width:20rem!important}.tablet\:w-\[33\.5rem\]{width:33.5rem!important}.tablet\:w-\[38rem\]{width:38rem!important}.tablet\:w-\[47\.5rem\]{width:47.5rem!important}.tablet\:w-\[57\.5rem\]{width:57.5rem!important}}