@paperless/core 0.1.0-alpha.30 → 0.1.0-alpha.300

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

@@ -0,0 +1,127 @@
+import { h, Host } from '@stencil/core';
+export class Accordion {
+  constructor() {
+    this.header = undefined;
+    this.open = false;
+    this.closeable = true;
+    this.openable = true;
+  }
+  render() {
+    return (h(Host, { class: "p-accordion" }, h("div", { class: "flex items-center gap-3 text-storm-vague cursor-pointer", onClick: () => this._onClick() }, h("p-icon", { class: "flex", variant: "chevron", rotate: this.open ? 0 : -90 }), h("p", { class: "m-0 font-medium text-lg whitespace-nowrap" }, this.header), h("p-divider", null)), this.open && (h("div", { class: "mt-6" }, h("slot", null)))));
+  }
+  _onClick() {
+    if (!this.closeable && this.open) {
+      return;
+    }
+    if (!this.openable && !this.open) {
+      return;
+    }
+    this.open = !this.open;
+    this.isOpen.emit(this.open);
+  }
+  static get is() { return "p-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["accordion.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["accordion.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header of the accordion"
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the accordion is open"
+        },
+        "attribute": "open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "closeable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the accordion can be closed"
+        },
+        "attribute": "closeable",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "openable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the accordion can be opened"
+        },
+        "attribute": "openable",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "isOpen",
+        "name": "isOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Open change event"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/molecules/content-slider/content-slider.component.css

@@ -0,0 +1 @@
+.absolute{position:absolute!important}.relative{position:relative!important}.mt-3{margin-top:.75rem!important}.flex{display:flex!important}.w-full{width:100%!important}.w-0{width:0!important}.flex-shrink-0{flex-shrink:0!important}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) 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}.cursor-grab{cursor:grab!important}.cursor-grabbing{cursor:grabbing!important}.flex-col{flex-direction:column!important}.flex-nowrap{flex-wrap:nowrap!important}.items-center{align-items:center!important}.items-stretch{align-items:stretch!important}.justify-center{justify-content:center!important}.overflow-visible{overflow:visible!important}.p-16{padding:4rem!important}.pt-1{padding-top:.25rem!important}.will-change-transform{will-change:transform!important}*{box-sizing:border-box}:host{display:flex;flex-direction:column;margin:-4rem;overflow:hidden;padding:4rem}:host .slider{box-sizing:content-box;overflow:visible;position:relative}:host .slider.draggable{cursor:grab}@media (min-width:64rem){:host .slider.draggable{cursor:auto}}:host .slider.draggable.dragging{cursor:grabbing}@media (min-width:64rem){:host .slider.draggable.dragging{cursor:auto}}:host .slider.draggable.dragging .inner-slider{transition-property:none}:host .slider .inner-slider{--tw-translate-x:0px;align-items:stretch;display:flex;flex-wrap:nowrap;gap:.5rem;position:absolute;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));transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.15s;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;will-change:transform}@media (min-width:64rem){:host .slider .inner-slider{flex-wrap:wrap;gap:1rem}}:host .slider .inner-slider>::slotted(*){flex-shrink:0;position:relative;width:100%;z-index:10}@media (min-width:40rem){:host .slider .inner-slider>::slotted(*){width:calc(50% - .5rem)}}@media (min-width:64rem){:host .slider .inner-slider>::slotted(*){flex:1 1 0%;width:0}}:host .indicator{align-items:center;display:flex;justify-content:center}@media (min-width:64rem){:host .indicator{display:none}}:host .indicator .item{margin-top:.75rem;padding-left:.25rem;padding-right:.25rem;padding-top:.25rem}@media (min-width:64rem){.desktop-xs\:hidden{display:none!important}.desktop-xs\:gap-4{gap:1rem!important}}.visible{visibility:visible!important}.hidden{display:none!important}.cursor-pointer{cursor:pointer!important}.static{position:static!important}

package/dist/collection/components/molecules/content-slider/content-slider.component.js

@@ -0,0 +1,316 @@
+import { h, Host, } from '@stencil/core';
+export class ContentSlider {
+  constructor() {
+    this._items = [];
+    this._shouldCheckLocation = false;
+    this.hideMobileIndicator = false;
+    this.disableDrag = false;
+    this.disableAutoCenter = false;
+    this.disableIndicatorClick = false;
+    this._visibleIndex = undefined;
+    this._outerHeight = 0;
+    this._totalWidth = 0;
+    this._dragging = false;
+  }
+  componentWillRender() {
+    const items = this._el.querySelectorAll(':scope > *');
+    this._items = Array.from(items);
+  }
+  componentDidLoad() {
+    this._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);
+    this._calculateWidth();
+    this._calculateIndicator();
+  }
+  disconnectedCallback() {
+    if (this._innerSliderResizeObserver) {
+      this._innerSliderResizeObserver.disconnect();
+    }
+  }
+  render() {
+    return (h(Host, { class: "p-content-slider" }, h("div", { class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, style: {
+        height: `${this._outerHeight}px`,
+      }, ref: (el) => (this._sliderRef = el), onMouseDown: (e) => this._mouseDownHandler(e), onTouchStart: (e) => this._mouseDownHandler(e), onMouseMove: (e) => this._mouseMoveHandler(e), onTouchMove: (e) => this._mouseMoveHandler(e) }, h("div", { class: "inner-slider", ref: (ref) => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, h("slot", null))), h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("div", { onClick: () => this._scrollTo(i, true), class: `item ${!this.disableIndicatorClick && 'cursor-pointer'}` }, h("p-slider-indicator", { active: i === this._visibleIndex })))))));
+  }
+  _mouseDownHandler(e) {
+    var _a;
+    if (this.disableDrag || this._dragging) {
+      return;
+    }
+    const innerSliderStyle = getComputedStyle(this._innerSliderRef);
+    if (innerSliderStyle.flexWrap === 'wrap') {
+      return;
+    }
+    this._startMouseX = e.x;
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    if (e.type === 'touchstart') {
+      this._startMouseX = (_a = e.touches) === null || _a === void 0 ? void 0 : _a[0].clientX;
+    }
+    const innerSliderRect = this._innerSliderRef.getBoundingClientRect();
+    const offsetLeft = innerSliderRect.x - sliderRect.x;
+    this._startX = this._startMouseX - sliderRect.x - offsetLeft;
+    this._lastIndex = this._visibleIndex;
+    this._dragging = true;
+  }
+  _mouseMoveHandler(e) {
+    var _a, _b;
+    if (!e || !this._dragging || this.disableDrag) {
+      return;
+    }
+    e.preventDefault();
+    this._shouldCheckLocation = true;
+    if (this._innerSliderRef.style.getPropertyValue('pointer-events') === '') {
+      this._innerSliderRef.style.pointerEvents = 'none';
+    }
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    let x = e.clientX - sliderRect.left;
+    this._lastMouseX = e.x;
+    if (e.type === 'touchmove') {
+      x = ((_a = e.touches) === null || _a === void 0 ? void 0 : _a[0].clientX) - sliderRect.left;
+      this._lastMouseX = (_b = e.touches) === null || _b === void 0 ? void 0 : _b[0].clientX;
+    }
+    this._innerSliderRef.style.setProperty('--tw-translate-x', `${x - this._startX}px`);
+    this._checkBoundary();
+    this._calculateIndicator();
+  }
+  _transitionEndHandler() {
+    this._calculateIndicator();
+  }
+  mouseUpHandler() {
+    this._dragging = false;
+    this._innerSliderRef.style.removeProperty('pointer-events');
+    this._checkLocation();
+  }
+  resizeHandler() {
+    if (this._innerSliderRef) {
+      this._innerSliderRef.style.setProperty('--tw-translate-x', '0px');
+      this._calculateWidth();
+      this._calculateIndicator();
+    }
+  }
+  _setInnerSliderReft(ref) {
+    this._innerSliderRef = ref;
+    this._innerSliderResizeObserver = new ResizeObserver(() => this._calculateHeight());
+    this._innerSliderResizeObserver.observe(this._innerSliderRef);
+  }
+  _scrollTo(i, manual = false) {
+    if (this.disableIndicatorClick && manual) {
+      return;
+    }
+    const el = this._items[i];
+    if (i === 0) {
+      this._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);
+      return;
+    }
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    const innerSliderRect = this._innerSliderRef.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const offsetLeft = elRect.x - innerSliderRect.x;
+    const centerOffset = offsetLeft + elRect.width / 2 - sliderRect.width / 2;
+    this._innerSliderRef.style.setProperty('--tw-translate-x', `-${centerOffset}px`);
+    this._checkBoundary();
+    this._calculateIndicator();
+  }
+  _checkBoundary() {
+    let outer = this._sliderRef.getBoundingClientRect();
+    const left = parseInt(this._innerSliderRef.style.getPropertyValue('--tw-translate-x'));
+    if (left > 0) {
+      this._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);
+    }
+    const maxLeft = (this._totalWidth - outer.width) * -1;
+    if (left < maxLeft) {
+      this._innerSliderRef.style.setProperty('--tw-translate-x', `${maxLeft}px`);
+    }
+  }
+  _calculateIndicator() {
+    for (let i = 0; i < this._items.length; i++) {
+      const item = this._items[i];
+      const visible = this._isVisible(item);
+      if (visible) {
+        this._visibleIndex = i;
+      }
+      if (i === 0 && visible) {
+        break;
+      }
+    }
+  }
+  _checkLocation() {
+    var _a;
+    if (!this._shouldCheckLocation) {
+      return;
+    }
+    let scrollToIndex = null;
+    if (this._lastIndex !== this._visibleIndex) {
+      scrollToIndex = this._visibleIndex;
+    }
+    if (this._lastIndex === this._visibleIndex) {
+      if (this._lastMouseX > this._startMouseX && this._lastIndex !== 0) {
+        scrollToIndex = this._lastIndex - 1;
+      }
+      if (this._lastMouseX < this._startMouseX &&
+        this._lastIndex !== ((_a = this._items) === null || _a === void 0 ? void 0 : _a.length) - 1) {
+        scrollToIndex = this._lastIndex + 1;
+      }
+    }
+    if (scrollToIndex !== null) {
+      this._shouldCheckLocation = false;
+      setTimeout(() => this._scrollTo(scrollToIndex), 100);
+    }
+  }
+  _isVisible(el) {
+    if (!this._el || !el) {
+      return false;
+    }
+    const elRect = el.getBoundingClientRect();
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    return ((elRect.left >= sliderRect.left &&
+      elRect.right <= sliderRect.right) ||
+      (this._isMobile(el) &&
+        elRect.left + elRect.width / 2 >= sliderRect.left &&
+        elRect.left + elRect.width / 2 <= sliderRect.right));
+  }
+  _calculateWidth() {
+    let totalWidth = 0;
+    for (let item of this._items) {
+      const rect = item.getBoundingClientRect();
+      totalWidth += rect.width;
+    }
+    const sliderStyle = getComputedStyle(this._sliderRef);
+    const padding = parseInt(sliderStyle.padding) * 2;
+    const innerSliderStyle = getComputedStyle(this._innerSliderRef);
+    const gap = parseInt(innerSliderStyle.gap) * (this._items.length - 1);
+    totalWidth += padding + gap;
+    this._totalWidth = totalWidth;
+  }
+  _calculateHeight() {
+    const outerHeight = this._items.at(0).getBoundingClientRect().height;
+    if (outerHeight != this._outerHeight) {
+      this._outerHeight = outerHeight;
+    }
+  }
+  _isMobile(el) {
+    if (!el) {
+      el = this._items.at(0);
+    }
+    const elRect = el.getBoundingClientRect();
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    return sliderRect.width - elRect.width < 10;
+  }
+  static get is() { return "p-content-slider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["content-slider.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["content-slider.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "hideMobileIndicator": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to hide the indicator on mobile"
+        },
+        "attribute": "hide-mobile-indicator",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disableDrag": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to disable dragging the content"
+        },
+        "attribute": "disable-drag",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disableAutoCenter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to disable auto centering the content"
+        },
+        "attribute": "disable-auto-center",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disableIndicatorClick": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to disable clicking the indicator scrolls content"
+        },
+        "attribute": "disable-indicator-click",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_visibleIndex": {},
+      "_outerHeight": {},
+      "_totalWidth": {},
+      "_dragging": {}
+    };
+  }
+  static get elementRef() { return "_el"; }
+  static get listeners() {
+    return [{
+        "name": "mouseup",
+        "method": "mouseUpHandler",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "touchend",
+        "method": "mouseUpHandler",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "resize",
+        "method": "resizeHandler",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

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

@@ -1,9 +1 @@
-:host .trigger {
-  @apply w-auto h-auto inline-block;
-}
-:host p-dropdown-menu-container {
-  @apply hidden;
-}
-:host p-dropdown-menu-container[data-show] {
-  @apply flex;
-}
+.relative{position:relative!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.w-auto{width:auto!important}*{box-sizing:border-box}:host{display:block;position:relative}:host .trigger{display:block;height:auto;position:relative;width:auto}:host p-dropdown-menu-container{display:none;z-index:200}:host p-dropdown-menu-container[data-show]{display:flex}.static{position:static!important}.absolute{position:absolute!important}.ml-auto{margin-left:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.h-6{height:1.5rem!important}.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}.visible{visibility:visible!important}.mb-6{margin-bottom:1.5rem!important}.mb-14{margin-bottom:3.5rem!important}.table{display:table!important}.w-6{width:1.5rem!important}.max-w-\[20rem\]{max-width:20rem!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.self-center{align-self:center!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.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}.h-8{height:2rem!important}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}.m-0{margin:0!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}.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-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}}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.w-3\/4{width:75%!important}.gap-4{gap:1rem!important}.justify-self-end{justify-self:end!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:flex-row{flex-direction:row!important}}