@paperless/core 0.1.0-alpha.10 → 0.1.0-alpha.103

package/dist/cjs/p-modal-backdrop_5.cjs.entry.js

@@ -0,0 +1,101 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9d3b51c9.js');
+
+const modalBackdropComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.top-0{top:0!important}.left-0{left:0!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.flex{display:flex!important}.h-screen{height:100vh!important}.w-screen{width:100vw!important}.items-end{align-items:flex-end!important}.justify-center{justify-content:center!important}.backdrop-blur-xs{--tw-backdrop-blur:blur(2px)!important;-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!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}:host{--tw-backdrop-blur:blur(2px);align-items:flex-end;-webkit-animation:fadeIn .2s ease-in-out;animation:fadeIn .2s ease-in-out;-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);background-color:rgba(81,83,107,.5);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:500}@media (min-width:40rem){:host{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){:host{align-items:center;padding:4rem}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@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}.tablet\\:px-16{padding-left:4rem!important;padding-right:4rem!important}}";
+
+const ModalBackdrop = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { class: "p-modal-backdrop" }, index.h("slot", null)));
+  }
+};
+ModalBackdrop.style = modalBackdropComponentCss;
+
+const modalBodyComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!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}:host{padding:1.5rem}@media (min-width:40rem){:host{padding-left:2.5rem;padding-right:2.5rem}}@media (min-width:64rem){:host{padding-left:3.5rem;padding-right:3.5rem}}:host(.variant-table){padding-left:1.5rem;padding-right:1.5rem}@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}.tablet\\:px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}}@media (min-width:64rem){.desktop-xs\\:px-14{padding-left:3.5rem!important;padding-right:3.5rem!important}}";
+
+const ModalBody = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The variant of the modal body
+     */
+    this.variant = 'default';
+  }
+  render() {
+    return (index.h(index.Host, { class: `p-modal-body variant-${this.variant}` }, index.h("slot", null)));
+  }
+};
+ModalBody.style = modalBodyComponentCss;
+
+const modalContainerComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.flex{display:flex!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.rounded-t-xxlarge{border-top-left-radius:.75rem!important;border-top-right-radius:.75rem!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!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}.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}p-modal-container{--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;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-top-left-radius:.75rem;border-top-right-radius:.75rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;display:flex;flex-direction:column;overflow:hidden;width:100%}@media (min-width:40rem){p-modal-container{width:auto}}@media (min-width:64rem){p-modal-container{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}@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}}";
+
+// $modal-xs: 20rem;
+// $modal-sm: 33.5rem;
+// $modal-md: 38rem;
+// $modal-lg: 47.5rem;
+// $modal-xl: 57.5rem;
+const modalSizes = {
+  xs: 'tablet:w-80',
+  sm: 'tablet:w-[33.5rem]',
+  md: 'tablet:w-[38rem]',
+  lg: 'tablet:w-[47.5rem]',
+  xl: 'tablet:w-[57.5rem]',
+};
+const ModalContainer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The size of the modal container
+     */
+    this.size = 'md';
+  }
+  render() {
+    const sizeClass = modalSizes[this.size];
+    return (index.h(index.Host, { class: `p-modal-container ${sizeClass}` }, index.h("slot", null)));
+  }
+};
+ModalContainer.style = modalContainerComponentCss;
+
+const modalFooterComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.flex{display:flex!important}.hidden{display:none!important}.pb-6{padding-bottom:1.5rem!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}:host{display:flex;flex-direction:column;padding-bottom:1.5rem;padding-left:1.5rem;padding-right:1.5rem}:host(.hide-on-mobile){display:none}@media (min-width:64rem){:host(.hide-on-mobile){display:flex}}@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}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}";
+
+const ModalFooter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Wether to show the footer on mobile
+     */
+    this.hideOnMobile = true;
+  }
+  render() {
+    return (index.h(index.Host, { class: `p-modal-footer ${this.hideOnMobile && 'hide-on-mobile'}` }, index.h("p-divider", { class: "mb-6 mt-0" }), index.h("slot", null)));
+  }
+};
+ModalFooter.style = modalFooterComponentCss;
+
+const modalHeaderComponentCss = ".static{position:static!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.flex{display:flex!important}.h-7{height:1.75rem!important}.w-7{width:1.75rem!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.rounded{border-radius:.25rem!important}.border-0{border-width:0!important}.border-b{border-bottom-width:1px!important}.border-solid{border-style:solid!important}.border-b-mystic-medium{--tw-border-opacity:1!important;border-bottom-color:rgb(227 236 243/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-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity))!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}:host{--tw-bg-opacity:1;--tw-text-opacity:1;--tw-border-opacity:1!important;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-width:0!important;border-bottom:1px rgb(227 236 243/var(--tw-border-opacity))!important;border-style:solid!important;color:rgb(39 40 56/var(--tw-text-opacity));display:flex;font-size:1.25rem;font-weight:600;justify-content:space-between;line-height:1.75rem;margin-left:1rem;margin-right:1rem;padding-bottom:1rem;padding-top:1rem}@media (min-width:64rem){:host{--tw-bg-opacity:1;background-color:rgb(247 250 252/var(--tw-bg-opacity));font-size:1.875rem;font-weight:700;line-height:2.25rem;margin-left:0;margin-right:0;padding:1.5rem 2rem}}:host .close{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(241 246 255/var(--tw-bg-opacity));border-radius:.25rem;color:rgb(152 154 183/var(--tw-text-opacity));cursor:pointer;display:flex;height:1.75rem;justify-content:center;width:1.75rem}@media (min-width:64rem){:host .close{display:none}}:host .close:hover{background-color:rgba(82,138,250,.2)}@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}}@media (min-width:64rem){.desktop-xs\\:mx-0{margin-left:0!important;margin-right:0!important}.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:px-8{padding-left:2rem!important;padding-right:2rem!important}.desktop-xs\\:text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}}";
+
+const ModalHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.close = index.createEvent(this, "close", 7);
+    /**
+     * Wether to show the close button on mobile
+     */
+    this.showMobileClose = true;
+  }
+  render() {
+    return (index.h(index.Host, { class: "p-modal-header" }, index.h("span", null, index.h("slot", null)), this.showMobileClose && (index.h("div", { class: "close", onClick: () => this.close.emit() }, index.h("p-icon", { variant: "negative" })))));
+  }
+};
+ModalHeader.style = modalHeaderComponentCss;
+
+exports.p_modal_backdrop = ModalBackdrop;
+exports.p_modal_body = ModalBody;
+exports.p_modal_container = ModalContainer;
+exports.p_modal_footer = ModalFooter;
+exports.p_modal_header = ModalHeader;

package/dist/cjs/p-modal.cjs.entry.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9d3b51c9.js');
+
+const Modal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.close = index.createEvent(this, "close", 7);
+    /**
+     * The size of the modal container
+     */
+    this.size = 'md';
+    /**
+     * The variant of the modal body
+     */
+    this.variant = 'default';
+    /**
+     * Wether to show the modal or not
+     */
+    this.show = false;
+    /**
+     * Wether to show the close on mobile in the header
+     */
+    this.showMobileClose = true;
+    /**
+     * Wether to show the footer on mobile
+     */
+    this.showMobileFooter = false;
+    this._hasFooterSlot = false;
+  }
+  componentWillLoad() {
+    this._hasFooterSlot = !!this._el.querySelector('[slot="footer"]');
+  }
+  render() {
+    if (!this.show) {
+      return;
+    }
+    const headerContent = index.h("slot", { name: "header" });
+    const bodyContent = index.h("slot", { name: "content" });
+    const footerContent = index.h("slot", { name: "footer" });
+    return (index.h(index.Host, { class: "p-modal" }, index.h("p-modal-backdrop", null, index.h("p-modal-container", { size: this.size }, index.h("p-modal-header", { "show-mobile-close": this.showMobileClose, onClose: () => this.close.emit() }, this.header ? this.header : headerContent), index.h("p-modal-body", { variant: this.variant }, bodyContent), this._hasFooterSlot && (index.h("p-modal-footer", { "hide-on-mobile": this.showMobileFooter }, footerContent))))));
+  }
+  get _el() { return index.getElement(this); }
+};
+
+exports.p_modal = Modal;

package/dist/cjs/p-navbar.cjs.entry.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9d3b51c9.js');
+
+const navbarComponentCss = ".pointer-events-auto{pointer-events:auto!important}.static{position:static!important}.fixed{position:fixed!important}.top-0{top:0!important}.left-0{left:0!important}.z-20{z-index:20!important}.m-0{margin:0!important}.flex{display:flex!important}.hidden{display:none!important}.h-screen{height:100vh!important}.w-60{width:15rem!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}.border-0{border-width:0!important}.border-r{border-right-width:1px!important}.border-b{border-bottom-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-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}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!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}.backdrop-blur-xs{--tw-backdrop-blur:blur(2px)!important;-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important}.transition-opacity{transition-duration:.15s!important;transition-property:opacity!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}*{box-sizing:border-box}:host{width:100%}@media (min-width:64rem){:host{width:15rem}}:host .sidebar,:host .sidebar .company,:host .sidebar .content,:host .sidebar .user,:host .userbar{display:flex;flex-direction:column;width:100%}:host .sidebar,:host .top-bar{--tw-bg-opacity:1;--tw-border-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-style:solid!important;border-width:0!important}:host .sidebar{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-right-width:1px!important;height:100vh;left:-100%;padding:calc(env(safe-area-inset-top, 0) + 1rem) 1rem 1rem;position:fixed;top:0;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:15rem;z-index:20}@media (min-width:64rem){:host .sidebar{height:100%;left:0;position:relative;width:100%}}:host .sidebar .header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.5rem;width:100%}@media (min-width:64rem){:host .sidebar .header{display:none}}:host .sidebar .content{margin-top:1.5rem}:host .sidebar .user{display:none;margin-top:auto}@media (min-width:64rem){:host .sidebar .user{display:flex}}:host .sidebar.show{left:env(safe-area-inset-left,0)}:host .top-bar{border-bottom-width:1px!important;display:flex;height:calc(env(safe-area-inset-top, 0) + 3rem);justify-content:space-between;padding:calc(env(safe-area-inset-top, 0) + .5rem) 1rem .5rem;width:100%}@media (min-width:64rem){:host .top-bar{display:none}}:host .backdrop{--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);background-color:rgba(81,83,107,.5);height:100vh;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100vw;z-index:10}@media (min-width:64rem){:host .backdrop{display:none}}:host .backdrop.show{opacity:1;pointer-events:auto}@media (min-width:64rem){.desktop-xs\\:relative{position:relative!important}.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:h-full{height:100%!important}.desktop-xs\\:w-full{width:100%!important}}";
+
+const Navbar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The text to display for the close button
+     */
+    this.closeText = 'Close';
+    /**
+     * The text to display for the menu button & sidebar title
+     */
+    this.menuText = 'Menu';
+    this._showMenu = false;
+  }
+  render() {
+    return (index.h(index.Host, { class: "p-navbar" }, index.h("div", { class: `backdrop ${this._showMenu && 'show'}`, onClick: () => (this._showMenu = false) }), index.h("div", { class: `sidebar ${this._showMenu && 'show'}` }, index.h("div", { class: "header" }, index.h("p", { class: "text-xl m-0 font-semibold text-storm-dark" }, this.menuText), index.h("p-button", { variant: "secondary", icon: "negative", iconPosition: "end", size: "small", onClick: () => (this._showMenu = false) }, this.closeText)), index.h("div", { class: "company" }, index.h("slot", { name: "company" })), index.h("div", { class: "content" }, index.h("slot", { name: "content" })), index.h("div", { class: "user" }, index.h("slot", { name: "user" }))), index.h("div", { class: "top-bar" }, index.h("p-button", { variant: "secondary", icon: "menu", size: "small", onClick: () => (this._showMenu = true) }, this.menuText), index.h("slot", { name: "topbar" }))));
+  }
+  handleCloseNavbar() {
+    this._showMenu = false;
+  }
+  handleOpenNavbar() {
+    this._showMenu = true;
+  }
+};
+Navbar.style = navbarComponentCss;
+
+exports.p_navbar = Navbar;

package/dist/cjs/p-navigation-item.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9d3b51c9.js');
+
+const navigationItemComponentCss = ".static{position:static!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-8{height:2rem!important}.w-full{width:100%!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.rounded-large{border-radius:.375rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-indigo,.text-storm{--tw-text-opacity:1!important}.text-indigo{color:rgb(82 138 250/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{display:inline-block;margin-bottom:.25rem;width:100%}:host>a{--tw-text-opacity:1;align-items:center;border-radius:.375rem;color:rgb(81 83 107/var(--tw-text-opacity));cursor:pointer;display:flex;font-weight:600;gap:.5rem;height:2rem;padding-left:.5rem;padding-right:.5rem;-webkit-text-decoration-line:none;text-decoration-line:none;width:100%}:host>a:hover{--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity))}:host>a>p-icon{--tw-text-opacity:1;color:rgb(81 83 107/var(--tw-text-opacity))}:host>a>p-counter{margin-left:auto}:host(.active)>a{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(82 138 250/var(--tw-text-opacity))}:host(.active)>a>p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}";
+
+const NavigationItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Wether the navigation item is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (index.h(index.Host, { class: `p-navigation-item ${this.active && 'active'}` }, index.h("a", { href: this.href, target: this.target }, this.icon && index.h("p-icon", { variant: this.icon }), index.h("span", { class: this.counter && 'has-counter' }, index.h("slot", null)), this.counter && (index.h("p-counter", { variant: "negative" }, this.counter)))));
+  }
+};
+NavigationItem.style = navigationItemComponentCss;
+
+exports.p_navigation_item = NavigationItem;

package/dist/cjs/p-pagination-item.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9d3b51c9.js');
+
+const paginationItemComponentCss = ".static{position:static!important}.flex{display:flex!important}.h-8{height:2rem!important}.justify-center{justify-content:center!important}.rounded{border-radius:.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}.text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.25rem;color:rgb(128 130 158/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;height:2rem;justify-content:center;line-height:1.25rem;width:2rem}:host(:focus),:host(:hover){--tw-text-opacity:1;color:rgb(81 83 107/var(--tw-text-opacity))}:host(.active){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(82 138 250/var(--tw-text-opacity))}";
+
+const PaginationItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Wether the pagination item is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (index.h(index.Host, { class: `p-pagination-item ${this.active && 'active'}` }, index.h("slot", null)));
+  }
+};
+PaginationItem.style = paginationItemComponentCss;
+
+exports.p_pagination_item = PaginationItem;

package/dist/cjs/p-pagination.cjs.entry.js

@@ -0,0 +1,171 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9d3b51c9.js');
+
+const paginationComponentCss = ".static{position:static!important}.flex{display:flex!important}*{box-sizing:border-box}p-pagination{display:flex}";
+
+const Pagination = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pageChange = index.createEvent(this, "pageChange", 7);
+    /**
+     * The current page
+     */
+    this.page = 1;
+    /**
+     * The amount of items per page
+     */
+    this.pageSize = 12;
+    this._pages = [];
+    this._set = [];
+    this._nextClick = () => {
+      const nextPage = this.page + 1;
+      if (nextPage > this._pages[this._pages.length - 1]) {
+        return;
+      }
+      this._changePage(nextPage);
+    };
+    this._pageClick = (p) => this._changePage(p);
+    this._generateSet = (range = 1, enableBoundaries = true) => {
+      const totalPages = this._pages.length;
+      if (!totalPages) {
+        return [];
+      }
+      let start = this.page - range;
+      let end = this.page + range;
+      if (end > totalPages) {
+        end = totalPages;
+        start = totalPages - range * 2;
+        start = start < 1 ? 1 : start;
+      }
+      if (start <= 1) {
+        start = 1;
+        end = Math.min(range * 2 + 1, totalPages);
+      }
+      const set = [];
+      const previous = {
+        type: 'previous',
+        value: index.h("p-icon", { variant: "chevron", rotate: 90 }),
+      };
+      const next = {
+        type: 'next',
+        value: index.h("p-icon", { variant: "chevron", rotate: -90 }),
+      };
+      // Disable page range, display all the pages
+      if (range === null) {
+        const p = this._pages.map((p) => ({
+          type: 'page',
+          value: p,
+        }));
+        return enableBoundaries ? [previous, ...p, next] : p;
+      }
+      if (enableBoundaries) {
+        set.push(previous);
+      }
+      if (start <= 3) {
+        for (let i = 1; i < start; i++) {
+          set.push({
+            type: 'page',
+            value: this._pages[i - 1],
+          });
+        }
+      }
+      else {
+        set.push({
+          type: 'page',
+          value: 1,
+        });
+        set.push({
+          type: 'ellipsis',
+          value: 'ellipsis',
+        });
+      }
+      for (let i = start; i <= end; i++) {
+        set.push({
+          type: 'page',
+          value: this._pages[i - 1],
+        });
+      }
+      if (end >= totalPages - 2) {
+        for (let i = end + 1; i <= totalPages; i++) {
+          set.push({
+            type: 'page',
+            value: this._pages[i - 1],
+          });
+        }
+      }
+      else {
+        set.push({
+          type: 'ellipsis',
+        });
+        set.push({
+          type: 'page',
+          value: this._pages[this._pages.length - 1],
+        });
+      }
+      if (enableBoundaries) {
+        set.push(next);
+      }
+      return set;
+    };
+  }
+  componentWillRender() {
+    this._generate();
+  }
+  render() {
+    var _a;
+    return (index.h(index.Host, { class: "p-pagination" }, (_a = this._set) === null || _a === void 0 ? void 0 : _a.map((p) => {
+      if (p.type === 'previous' || p.type === 'next') {
+        return (index.h("p-pagination-item", { onClick: () => p.type === 'previous'
+            ? this._previousClick()
+            : this._nextClick() }, p.value));
+      }
+      if (p.type === 'ellipsis') {
+        return index.h("p-pagination-item", null, "...");
+      }
+      return (index.h("p-pagination-item", { active: p.value === this.page, onClick: () => this._pageClick(p.value) }, p.value));
+    })));
+  }
+  pageChangeHandler() {
+    this._generate();
+  }
+  _generate() {
+    var _a;
+    this._pages = this._generatePages();
+    this._set = this._generateSet();
+    if (this.page > ((_a = this._pages) === null || _a === void 0 ? void 0 : _a.length)) {
+      this._changePage(this._pages.length);
+    }
+  }
+  _changePage(p) {
+    if (!p) {
+      return;
+    }
+    this.page = p;
+    this.pageChange.emit(this.page);
+  }
+  _previousClick() {
+    const previousPage = this.page - 1;
+    if (previousPage < this._pages[0]) {
+      return;
+    }
+    this._changePage(previousPage);
+  }
+  _generatePages() {
+    if (!this.total || !this.pageSize) {
+      return [];
+    }
+    const pages = Math.ceil(this.total / this.pageSize);
+    return new Array(pages).fill(undefined).map((_, i) => i + 1);
+  }
+  static get watchers() { return {
+    "page": ["pageChangeHandler"],
+    "pageSize": ["pageChangeHandler"],
+    "total": ["pageChangeHandler"]
+  }; }
+};
+Pagination.style = paginationComponentCss;
+
+exports.p_pagination = Pagination;

package/dist/cjs/p-profile.cjs.entry.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9d3b51c9.js');
+
+const profileComponentCss = ".static{position:static!important}.absolute{position:absolute!important}.ml-auto{margin-left:auto!important}.flex{display:flex!important}.h-\\[3\\.125rem\\]{height:3.125rem!important}.h-\\[4\\.125rem\\]{height:4.125rem!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-3{gap:.75rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.p-2{padding:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}*{box-sizing:border-box}:host{display:flex}:host .content{align-items:center;display:flex;gap:.75rem;width:100%}:host .content .name{display:flex;flex-direction:column;justify-content:center;overflow:hidden}:host .content .name>:first-child{--tw-text-opacity:1;color:rgb(39 40 56/var(--tw-text-opacity));font-size:.875rem;font-weight:600;line-height:1.25rem}:host .content .name>:nth-child(2){--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem}:host .content .name ::slotted(*){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([size=small]){height:2rem}:host([size=medium]){height:3.125rem}:host([size=large]){height:4rem}:host(.has-dropdown){cursor:pointer}:host(.has-dropdown) .content{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-radius:.25rem;border-style:solid!important;border-width:1px!important;padding:.5rem}:host(.has-dropdown[size=small]){height:3rem}:host(.has-dropdown[size=medium]){height:4.125rem}:host(.has-dropdown[size=large]){height:5rem}:host(.active) .content,:host(.has-dropdown:hover) .content{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13);--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}:host(.active) .content p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}";
+
+const Profile = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The variant of the profile
+     */
+    this.variant = 'user';
+    /**
+     * The size of the profile avatar
+     */
+    this.size = 'small';
+    this._dropdownOpen = false;
+  }
+  render() {
+    const hasDropdownSlot = !!this._el.querySelector('[slot="dropdown"]');
+    const content = this._getContent(hasDropdownSlot);
+    return (index.h(index.Host, { class: `p-profile ${hasDropdownSlot && 'has-dropdown'} ${this._dropdownOpen && 'active'}` }, hasDropdownSlot ? (index.h("p-dropdown", { class: "w-full min-w-0", strategy: "absolute", placement: this.variant === 'user' ? 'top-end' : 'bottom-end', onIsOpen: (ev) => (this._dropdownOpen = ev.detail) }, content, index.h("div", { slot: "items" }, index.h("slot", { name: "dropdown" })))) : (content)));
+  }
+  _getContent(hasDropdownSlot) {
+    const avatar = this._generateAvatar();
+    return (index.h("div", { class: "content", slot: "trigger" }, avatar, index.h("div", { class: "name" }, index.h("slot", { name: "title" }), index.h("slot", { name: "subtitle" })), hasDropdownSlot && this._getIcon()));
+  }
+  _generateAvatar() {
+    var _a, _b, _c;
+    const avatar = this._el.querySelector('p-avatar[slot="avatar"]');
+    if (!avatar) {
+      return;
+    }
+    return (index.h("p-avatar", { class: "flex", src: (_a = avatar.src) !== null && _a !== void 0 ? _a : null, "default-image": (_b = avatar.defaultImage) !== null && _b !== void 0 ? _b : null, variant: (_c = this.variant) !== null && _c !== void 0 ? _c : avatar.variant, size: this.size }));
+  }
+  _getIcon() {
+    return (index.h("p-icon", { class: "ml-auto", variant: this.variant === 'company' ? 'chevron' : 'more' }));
+  }
+  get _el() { return index.getElement(this); }
+};
+Profile.style = profileComponentCss;
+
+exports.p_profile = Profile;

package/dist/cjs/p-segment-container.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9d3b51c9.js');
+
+const segmentContainerComponentCss = ".static{position:static!important}.flex{display:flex!important}.h-8{height:2rem!important}.rounded{border-radius:.25rem!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-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}p-segment-container{--tw-bg-opacity:1;--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13));background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.25rem;display:flex;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);height:2rem;padding:.25rem}";
+
+const SegmentContainer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { class: "p-segment-container" }, index.h("slot", null)));
+  }
+};
+SegmentContainer.style = segmentContainerComponentCss;
+
+exports.p_segment_container = SegmentContainer;

package/dist/cjs/p-segment-item.cjs.entry.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9d3b51c9.js');
+
+const segmentItemComponentCss = ".static{position:static!important}.flex{display:flex!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.font-medium{font-weight:500!important}.text-storm-light{--tw-text-opacity:1!important;color:rgb(176 178 203/var(--tw-text-opacity))!important}.text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.25rem;color:rgb(176 178 203/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:500;height:1.5rem;line-height:1.25rem;margin-right:.25rem;padding-left:.5rem;padding-right:.5rem}:host(.variant-icon){justify-content:center;padding-left:0;padding-right:0;width:1.5rem}:host(:hover){--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity))}:host(.active){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(82 138 250/var(--tw-text-opacity))}:host(:last-child){margin-right:0}";
+
+const SegmentItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Wether the segment item is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (index.h(index.Host, { class: `p-segment-item variant-${this.icon ? 'icon' : 'default'} ${this.active && 'active'}` }, this.icon ? this._getIcon() : index.h("slot", null)));
+  }
+  _getIcon() {
+    if (!this.icon) {
+      return;
+    }
+    return (index.h("p-icon", { class: "flex", variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
+  }
+};
+SegmentItem.style = segmentItemComponentCss;
+
+exports.p_segment_item = SegmentItem;

package/dist/cjs/p-slider-indicator.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9d3b51c9.js');
+
+const sliderIndicatorComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.block{display:block!important}.hidden{display:none!important}.h-2{height:.5rem!important}.w-2{width:.5rem!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!important}.bg-mystic-dark{--tw-bg-opacity:1!important;background-color:rgb(218 230 240/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));border-radius:100%;display:block;height:.5rem;width:.5rem}:host(.active){--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity))}";
+
+const SliderIndicator = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Wether the slider indicator is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (index.h(index.Host, { class: `p-slider-indicator ${this.active && 'active'}` }));
+  }
+};
+SliderIndicator.style = sliderIndicatorComponentCss;
+
+exports.p_slider_indicator = SliderIndicator;

package/dist/cjs/p-status.cjs.entry.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9d3b51c9.js');
+
+const statusComponentCss = ".static{position:static!important}.mr-2{margin-right:.5rem!important}.flex{display:flex!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity))!important}*{box-sizing:border-box}p-status{--tw-text-opacity:1;align-items:center;color:rgb(152 154 183/var(--tw-text-opacity));display:flex;font-size:.875rem;font-weight:500;line-height:1.25rem}p-status p-icon{font-size:1rem;line-height:1.5rem;margin-right:.5rem}p-status.variant-positive{--tw-text-opacity:1;color:rgb(40 209 124/var(--tw-text-opacity))}p-status.variant-unbiased{--tw-text-opacity:1;color:rgb(255 199 45/var(--tw-text-opacity))}p-status.variant-negative{--tw-text-opacity:1;color:rgb(185 30 40/var(--tw-text-opacity))}";
+
+const Status = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The variant of the status
+     */
+    this.variant = 'default';
+  }
+  render() {
+    return (index.h(index.Host, { class: `p-status variant-${this.variant}
+                }` }, this._getIcon(), index.h("slot", null)));
+  }
+  _getIcon() {
+    const icon = this.icon || this._getVariantIcon();
+    if (!icon) {
+      return;
+    }
+    return (index.h("p-icon", { variant: icon, flip: this.iconFlip, rotate: this.iconRotate }));
+  }
+  _getVariantIcon() {
+    let icon = null;
+    switch (this.variant) {
+      case 'positive':
+        icon = 'checkmark';
+        break;
+      case 'negative':
+        icon = 'negative';
+        break;
+      case 'unbiased':
+        icon = 'clock';
+        break;
+      default:
+        icon = null;
+        break;
+    }
+    return icon;
+  }
+};
+Status.style = statusComponentCss;
+
+exports.p_status = Status;