@paperless/core 2.0.1-beta.1 → 2.0.1-beta.10

package/dist/components/avatar.component.js

@@ -1,13 +1,29 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as cva } from './index2.js';
 
-const avatarComponentCss = ".inline-flex{display:inline-flex!important}.table{display:table!important}.h-10{height:2.5rem!important}.h-16{height:4rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-\\[3\\.125rem\\]{height:3.125rem!important}.h-\\[6\\.5rem\\]{height:6.5rem!important}.w-10{width:2.5rem!important}.w-16{width:4rem!important}.w-6{width:1.5rem!important}.w-8{width:2rem!important}.w-\\[3\\.125rem\\]{width:3.125rem!important}.w-\\[6\\.5rem\\]{width:6.5rem!important}.flex-shrink-0{flex-shrink:0!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.overflow-hidden{overflow:hidden!important}.rounded{border-radius:.25rem!important}.object-cover{object-fit:cover!important}.text-\\[0\\.625rem\\]{font-size:.625rem!important}.font-semibold{font-weight:600!important}.uppercase{text-transform:uppercase!important}*{box-sizing:border-box}p-avatar{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(176 178 203/var(--tw-text-opacity));display:inline-flex;flex-shrink:0;font-weight:600;justify-content:center;overflow:hidden;text-transform:uppercase}p-avatar>img{object-fit:cover;object-position:center}p-avatar[size=xsmall]{font-size:.625rem}p-avatar[size=xsmall],p-avatar[size=xsmall]>img{height:1.5rem;width:1.5rem}p-avatar[size=small]{font-size:.75rem;line-height:1rem}p-avatar[size=small],p-avatar[size=small]>img{height:2rem;width:2rem}p-avatar[size=table]{font-size:.75rem;line-height:1rem}p-avatar[size=table],p-avatar[size=table]>img{height:2.5rem;width:2.5rem}p-avatar[size=medium]{font-size:1rem;line-height:1.5rem}p-avatar[size=medium],p-avatar[size=medium]>img{height:3.125rem;width:3.125rem}p-avatar[size=large]{font-size:1rem;line-height:1.5rem}p-avatar[size=large],p-avatar[size=large]>img{height:4rem;width:4rem}p-avatar[size=xlarge]{font-size:1rem;line-height:1.5rem}p-avatar[size=xlarge],p-avatar[size=xlarge]>img{height:6.5rem;width:6.5rem}p-avatar[variant=company]{border-radius:.25rem}p-avatar[variant=company][size=large],p-avatar[variant=company][size=medium],p-avatar[variant=company][size=xlarge]{border-radius:.375rem}p-avatar[variant=user]{border-radius:100%}.static{position:static!important}";
+const avatarComponentCss = "*{box-sizing:border-box}.static{position:static!important}.z-0{z-index:0!important}.flex{display:flex!important}.aspect-branding{aspect-ratio:23/24!important}.h-10{height:2.5rem!important}.h-14{height:3.5rem!important}.h-20{height:5rem!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-\\[6\\.5rem\\]{height:6.5rem!important}.h-\\[8\\.5rem\\]{height:8.5rem!important}.h-full{height:100%!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.rounded-full{border-radius:9999px!important}.bg-off-white{--tw-bg-opacity:1!important;background-color:rgb(243 241 237/var(--tw-bg-opacity,1))!important}.object-cover{object-fit:cover!important}.p-\\[1px\\]{padding:1px!important}.font-ambit{font-family:Ambit,sans-serif!important}.text-4xl{font-size:2.5rem!important;line-height:3rem!important}.text-\\[3\\.5rem\\]{font-size:3.5rem!important}.text-\\[4\\.5rem\\]{font-size:4.5rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important}.text-xs,.text-xxs{line-height:1rem!important}.text-xxs{font-size:.5rem!important}.leading-\\[4rem\\]{line-height:4rem!important}.leading-\\[5rem\\]{line-height:5rem!important}.leading-none{line-height:1!important}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-inset{--tw-ring-inset:inset!important}.ring-black-teal\\/20{--tw-ring-color:rgba(3,42,36,.2)!important}";
 
+const avatar = cva([
+  'p-avatar bg-off-white rounded-full aspect-branding ring-inset ring-1 ring-black-teal/20 p-[1px] flex items-center justify-center font-ambit leading-none',
+], {
+  variants: {
+    size: {
+      xs: 'h-4 text-xxs',
+      sm: 'h-6 text-xs',
+      base: 'h-8 text-base',
+      lg: 'h-10 text-xl',
+      xl: 'h-14 text-xl',
+      '2xl': 'h-20 text-4xl',
+      '3xl': 'h-[6.5rem] text-[3.5rem] leading-[4rem]',
+      '4xl': 'h-[8.5rem] text-[4.5rem] leading-[5rem]',
+    },
+  },
+});
 const Avatar = /*@__PURE__*/ proxyCustomElement(class Avatar extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.variant = 'user';
-    this.size = 'medium';
+    this.size = 'base';
     this.defaultImage = undefined;
     this.src = undefined;
     this.letters = undefined;
@@ -21,27 +37,24 @@ const Avatar = /*@__PURE__*/ proxyCustomElement(class Avatar extends HTMLElement
   componentWillLoad() {
     this.onSrchChange(this.src);
     if (!this._src) {
-      this._setDefaultLink();
+      this._setFailed();
     }
   }
   render() {
-    var _a;
-    return (h(Host, { class: "p-avatar" }, this._failed && ((_a = this.letters) === null || _a === void 0 ? void 0 : _a.length) ? (this.letters) : (h("img", { src: this._src, onError: () => this._setDefaultLink() }))));
+    var _a, _b;
+    return (h(Host, { class: avatar({
+        size: this.size,
+      }) }, this._failed ? ((_b = (_a = this.letters) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : ' ') : (h("img", { src: this._src, class: 'z-0 aspect-branding h-full rounded-full object-cover', onError: () => this._setFailed() }))));
   }
-  _setDefaultLink() {
-    var _a;
+  _setFailed() {
     this._failed = true;
-    this._src =
-      (_a = this.defaultImage) !== null && _a !== void 0 ? _a : (this.variant === 'user'
-        ? '/assets/images/avatar/user-default.svg'
-        : '/assets/images/avatar/company-default.svg');
+    this._src = undefined;
   }
   static get watchers() { return {
     "src": ["onSrchChange"]
   }; }
   static get style() { return avatarComponentCss; }
 }, [0, "p-avatar", {
-    "variant": [513],
     "size": [513],
     "defaultImage": [1, "default-image"],
     "src": [1],

package/dist/components/avatar.component.js.map

@@ -1 +1 @@
-{"file":"avatar.component.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,msEAAmsE;;MCOjtE,MAAM;;;;mBAIqC,MAAM;gBAW/C,QAAQ;;;;;mBAkBc,KAAK;;EAGzC,YAAY,CAAC,GAAW;IACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;GAChB;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACvB;GACD;EAED,MAAM;;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,UAAU,IACpB,IAAI,CAAC,OAAO,KAAI,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,CAAA,IACpC,IAAI,CAAC,OAAO,KAEZ,WACC,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,GACpC,CACF,CACK,EACN;GACF;EAEO,eAAe;;IACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,IAAI;MACR,MAAA,IAAI,CAAC,YAAY,oCAChB,IAAI,CAAC,OAAO,KAAK,MAAM;UACrB,wCAAwC;UACxC,2CAA2C,CAAC,CAAC;GACjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/avatar/avatar.component.scss?tag=p-avatar","src/components/atoms/avatar/avatar.component.tsx"],"sourcesContent":["p-avatar {\n\t@apply inline-flex flex-shrink-0 items-center justify-center overflow-hidden bg-indigo-light;\n\t@apply font-semibold uppercase  text-storm-light;\n\n\t> img {\n\t\t@apply object-cover object-center;\n\t}\n\n\t&[size='xsmall'] {\n\t\t@apply h-6 w-6 text-[0.625rem];\n\n\t\t> img {\n\t\t\t@apply h-6 w-6;\n\t\t}\n\t}\n\n\t&[size='small'] {\n\t\t@apply h-8 w-8 text-xs;\n\n\t\t> img {\n\t\t\t@apply h-8 w-8;\n\t\t}\n\t}\n\n\t&[size='table'] {\n\t\t@apply h-10 w-10 text-xs;\n\n\t\t> img {\n\t\t\t@apply h-10 w-10;\n\t\t}\n\t}\n\n\t&[size='medium'] {\n\t\t@apply h-[3.125rem] w-[3.125rem] text-base;\n\n\t\t> img {\n\t\t\t@apply h-[3.125rem] w-[3.125rem];\n\t\t}\n\t}\n\n\t&[size='large'] {\n\t\t@apply h-16 w-16 text-base;\n\n\t\t> img {\n\t\t\t@apply h-16 w-16;\n\t\t}\n\t}\n\n\t&[size='xlarge'] {\n\t\t@apply h-[6.5rem] w-[6.5rem] text-base;\n\n\t\t> img {\n\t\t\t@apply h-[6.5rem] w-[6.5rem];\n\t\t}\n\t}\n\n\t&[variant='company'] {\n\t\t@apply rounded;\n\n\t\t&[size='medium'],\n\t\t&[size='large'],\n\t\t&[size='xlarge'] {\n\t\t\t@apply rounded-large;\n\t\t}\n\t}\n\n\t&[variant='user'] {\n\t\t@apply rounded-round;\n\t}\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n\ttag: 'p-avatar',\n\tstyleUrl: 'avatar.component.scss',\n\t// shadow: true,\n})\nexport class Avatar {\n\t/**\n\t * The variant of the avatar\n\t */\n\t@Prop({ reflect: true }) variant: 'user' | 'company' = 'user';\n\n\t/**\n\t * The size of the avatar\n\t */\n\t@Prop({ reflect: true }) size:\n\t\t| 'xsmall'\n\t\t| 'small'\n    | 'table'\n\t\t| 'medium'\n\t\t| 'large'\n\t\t| 'xlarge' = 'medium';\n\n\t/**\n\t * The default image to show on errors\n\t */\n\t@Prop() defaultImage: string;\n\n\t/**\n\t * The image used for the avatar\n\t */\n\t@Prop() src!: string;\n\n\t/**\n\t * The letters to show on the empty state variant\n\t */\n\t@Prop() letters: string;\n\n\t@State() private _src: string;\n\t@State() private _failed: boolean = false;\n\n\t@Watch('src')\n\tonSrchChange(src: string) {\n\t\tthis._failed = false;\n\t\tthis._src = src;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.onSrchChange(this.src);\n\t\tif (!this._src) {\n\t\t\tthis._setDefaultLink();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-avatar\">\n\t\t\t\t{this._failed && this.letters?.length ? (\n\t\t\t\t\tthis.letters\n\t\t\t\t) : (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={this._src}\n\t\t\t\t\t\tonError={() => this._setDefaultLink()}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _setDefaultLink() {\n\t\tthis._failed = true;\n\t\tthis._src =\n\t\t\tthis.defaultImage ??\n\t\t\t(this.variant === 'user'\n\t\t\t\t? '/assets/images/avatar/user-default.svg'\n\t\t\t\t: '/assets/images/avatar/company-default.svg');\n\t}\n}\n"],"version":3}
+{"file":"avatar.component.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,gxDAAgxD;;ACG3yD,MAAM,MAAM,GAAG,GAAG,CACjB;EACC,0JAA0J;CAC1J,EACD;EACC,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE,aAAa;MACjB,IAAI,EAAE,eAAe;MACrB,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE,cAAc;MAClB,KAAK,EAAE,eAAe;MACtB,KAAK,EAAE,yCAAyC;MAChD,KAAK,EAAE,yCAAyC;KAChD;GACD;CACD,CACD,CAAC;MAOW,MAAM;;;;gBAYP,MAAM;;;;;mBAkBmB,KAAK;;EAGzC,YAAY,CAAC,GAAW;IACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;GAChB;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACf,IAAI,CAAC,UAAU,EAAE,CAAC;KAClB;GACD;EAED,MAAM;;IACL,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;OACf,CAAC,IAED,IAAI,CAAC,OAAO,IACZ,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAG,CAAC,CAAC,mCAAI,GAAG,KAExB,WACC,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,KAAK,EAAC,sDAAsD,EAC5D,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,GAC/B,CACF,CACK,EACN;GACF;EAEO,UAAU;IACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/avatar/avatar.component.scss?tag=p-avatar","src/components/atoms/avatar/avatar.component.tsx"],"sourcesContent":["","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst avatar = cva(\n\t[\n\t\t'p-avatar bg-off-white rounded-full aspect-branding ring-inset ring-1 ring-black-teal/20 p-[1px] flex items-center justify-center font-ambit leading-none',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: 'h-4 text-xxs',\n\t\t\t\tsm: 'h-6 text-xs',\n\t\t\t\tbase: 'h-8 text-base',\n\t\t\t\tlg: 'h-10 text-xl',\n\t\t\t\txl: 'h-14 text-xl',\n\t\t\t\t'2xl': 'h-20 text-4xl',\n\t\t\t\t'3xl': 'h-[6.5rem] text-[3.5rem] leading-[4rem]',\n\t\t\t\t'4xl': 'h-[8.5rem] text-[4.5rem] leading-[5rem]',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-avatar',\n\tstyleUrl: 'avatar.component.scss',\n\t// shadow: true,\n})\nexport class Avatar {\n\t/**\n\t * The size of the avatar\n\t */\n\t@Prop({ reflect: true }) size:\n\t\t| 'xs'\n\t\t| 'sm'\n\t\t| 'base'\n\t\t| 'lg'\n\t\t| 'xl'\n\t\t| '2xl'\n\t\t| '3xl'\n\t\t| '4xl' = 'base';\n\n\t/**\n\t * The default image to show on errors\n\t */\n\t@Prop() defaultImage: string;\n\n\t/**\n\t * The image used for the avatar\n\t */\n\t@Prop() src!: string;\n\n\t/**\n\t * The letters to show on the empty state variant\n\t */\n\t@Prop() letters: string;\n\n\t@State() private _src: string;\n\t@State() private _failed: boolean = false;\n\n\t@Watch('src')\n\tonSrchChange(src: string) {\n\t\tthis._failed = false;\n\t\tthis._src = src;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.onSrchChange(this.src);\n\t\tif (!this._src) {\n\t\t\tthis._setFailed();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={avatar({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this._failed ? (\n\t\t\t\t\tthis.letters?.[0] ?? ' '\n\t\t\t\t) : (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={this._src}\n\t\t\t\t\t\tclass='z-0 aspect-branding h-full rounded-full object-cover'\n\t\t\t\t\t\tonError={() => this._setFailed()}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _setFailed() {\n\t\tthis._failed = true;\n\t\tthis._src = undefined;\n\t}\n}\n"],"version":3}

package/dist/components/backdrop.component.js

@@ -1,17 +1,57 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as cva } from './index2.js';
 
-const backdropComponentCss = ".fixed{position:fixed!important}.left-0{left:0!important}.top-0{top:0!important}.flex{display:flex!important}.h-full{height:100%!important}.w-full{width:100%!important}.animate-fade-in{animation:fadeIn .2s ease forwards!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.overflow-y-auto{overflow-y:auto!important}.p-0{padding:0!important}.pt-16{padding-top:4rem!important}.max-h-screen{max-height:100vh!important}*{box-sizing:border-box}:host{animation:fadeIn .2s ease forwards;background-color:rgba(39,40,56,.5);display:flex;height:100%;left:0;max-height:100vh;max-width:100vw;overflow:hidden;position:fixed;top:0;width:100%;z-index:490}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}:host .content-container{align-items:flex-end;display:flex;height:100%;justify-content:center;max-height:100vh;max-width:100vw;overflow-x:hidden;overflow-y:auto;padding-top:4rem;width:100%}@media (min-width:40rem){:host .content-container{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){:host .content-container{align-items:stretch;padding:4rem}}:host(.blurred){--tw-backdrop-blur:blur(2px);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)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}:host(.closing){animation:fadeOut .2s ease forwards}:host(.closing) .content-container{overflow:hidden}:host(.variant-drawer) .content-container{align-items:flex-start;justify-content:flex-end;padding:0}@media (min-width:64rem){:host(.variant-drawer) .content-container{align-items:flex-start;padding:0}}@media (min-width:40rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:40rem){.tablet\\:p-0{padding:0!important}.tablet\\:px-16{padding-left:4rem!important;padding-right:4rem!important}}.static{position:static!important}";
+const backdropComponentCss = "*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.fixed{position:fixed!important}.left-0{left:0!important}.top-0{top:0!important}.z-backdrop{z-index:490!important}.flex{display:flex!important}.h-full{height:100%!important}.w-full{width:100%!important}.animate-fade-in{animation:fadeIn .2s ease forwards!important}.animate-fade-out{animation:fadeOut .2s ease forwards!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.overflow-hidden{overflow:hidden!important}.overflow-y-auto{overflow-y:auto!important}.overflow-x-hidden{overflow-x:hidden!important}.bg-black-teal-800\\/40{background-color:rgba(0,2,2,.4)!important}.p-0{padding:0!important}.pt-16{padding-top:4rem!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}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)!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}.max-h-screen{max-height:100vh!important}.max-w-screen{max-width:100vw!important}@media (min-width:40rem){.tablet\\:p-0{padding:0!important}.tablet\\:px-16{padding-left:4rem!important;padding-right:4rem!important}}@media (min-width:64rem){.desktop-xs\\:items-start{align-items:flex-start!important}.desktop-xs\\:items-stretch{align-items:stretch!important}.desktop-xs\\:p-0{padding:0!important}.desktop-xs\\:p-16{padding:4rem!important}}";
 
+const backdrop = cva([
+  'flex',
+  'fixed left-0 top-0 z-backdrop',
+  'h-full w-full',
+  'overflow-hidden',
+  'bg-black-teal-800/40',
+  'max-h-screen max-w-screen',
+], {
+  variants: {
+    blur: {
+      false: null,
+      true: 'backdrop-blur-sm',
+    },
+    closing: {
+      false: 'animate-fade-in',
+      true: 'animate-fade-out pointer-events-none',
+    },
+  },
+});
+const contentContainer = cva([
+  'h-full w-full overflow-y-auto overflow-x-hidden',
+  'pt-16 tablet:px-16 desktop-xs:p-16',
+  'flex items-end justify-center desktop-xs:items-stretch',
+  'max-h-screen max-w-screen',
+], {
+  variants: {
+    variant: {
+      modal: null,
+      drawer: [
+        'items-start justify-end desktop-xs:items-start',
+        'p-0 tablet:p-0 desktop-xs:p-0',
+      ],
+    },
+    closing: {
+      false: null,
+      true: 'overflow-hidden',
+    },
+  },
+});
 const Backdrop = /*@__PURE__*/ proxyCustomElement(class Backdrop extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
     this.clicked = createEvent(this, "clicked", 3);
     this.variant = 'modal';
     this.applyBlur = false;
     this.closing = false;
     this.scrollLock = true;
+    this.class = undefined;
   }
   componentWillLoad() {
     if (this.scrollLock) {
@@ -23,22 +63,34 @@ const Backdrop = /*@__PURE__*/ proxyCustomElement(class Backdrop extends HTMLEle
       document.querySelector(':root').classList.remove('scroll-lock');
     }
   }
+  componentWillUpdate() {
+    if (!this.scrollLock) {
+      document.querySelector(':root').classList.remove('scroll-lock');
+    }
+    if (this.scrollLock) {
+      document.querySelector(':root').classList.add('scroll-lock');
+    }
+  }
   render() {
-    return (h(Host, { class: `p-backdrop variant-${this.variant} ${this.applyBlur && 'blurred'} ${this.closing && 'closing'}` }, h("div", { class: "content-container" }, h("slot", null))));
+    return (h(Host, { class: backdrop({ blur: this.applyBlur, closing: this.closing }) }, h("div", { class: contentContainer({
+        variant: this.variant,
+        closing: this.closing,
+      }) }, h("slot", null))));
   }
   handleClick(ev) {
-    if (ev.target !== this._el) {
+    if (ev.target !== this._el && !this._el.contains(ev.target)) {
       return;
     }
     this.clicked.emit(ev);
   }
   get _el() { return this; }
   static get style() { return backdropComponentCss; }
-}, [1, "p-backdrop", {
+}, [4, "p-backdrop", {
     "variant": [1],
     "applyBlur": [4, "apply-blur"],
     "closing": [4],
-    "scrollLock": [4, "scroll-lock"]
+    "scrollLock": [4, "scroll-lock"],
+    "class": [1]
   }, [[2, "click", "handleClick"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/backdrop.component.js.map

@@ -1 +1 @@
-{"file":"backdrop.component.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,8iEAA8iE;;MCgB9jE,QAAQ;;;;;;mBAIkB,OAAO;qBAKhB,KAAK;mBAKP,KAAK;sBAKF,IAAI;;EAelC,iBAAiB;IAChB,IAAI,IAAI,CAAC,UAAU,EAAE;MACpB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;KAC7D;GACD;EAED,oBAAoB;IACnB,IAAI,IAAI,CAAC,UAAU,EAAE;MACpB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;KAChE;GACD;EAED,MAAM;IACL,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,sBAAsB,IAAI,CAAC,OAAO,IACxC,IAAI,CAAC,SAAS,IAAI,SACnB,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE,IAE/B,WAAK,KAAK,EAAC,mBAAmB,IAC7B,eAAQ,CACH,CACA,EACN;GACF;EAGD,WAAW,CAAC,EAAc;IACzB,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,GAAG,EAAE;MAC3B,OAAO;KACP;IAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/backdrop/backdrop.component.scss?tag=p-backdrop&encapsulation=shadow","src/components/atoms/backdrop/backdrop.component.tsx"],"sourcesContent":[":host {\n\t@apply flex;\n\t@apply fixed left-0 top-0 z-backdrop;\n\t@apply h-full w-full;\n\t@apply overflow-hidden;\n\t@apply animate-fade-in bg-storm-dark/50;\n\t@apply max-h-screen max-w-screen;\n\n\t.content-container {\n\t\t@apply h-full w-full overflow-y-auto overflow-x-hidden;\n\t\t@apply pt-16 tablet:px-16 desktop-xs:p-16;\n\t\t@apply flex items-end justify-center desktop-xs:items-stretch;\n\t\t@apply max-h-screen max-w-screen;\n\t}\n}\n\n:host(.blurred) {\n\t@apply backdrop-blur-xs;\n}\n\n:host(.closing) {\n\t@apply animate-fade-out;\n\n\t.content-container {\n\t\t@apply overflow-hidden;\n\t}\n}\n\n:host(.variant-drawer) {\n\t.content-container {\n\t\t@apply items-start justify-end desktop-xs:items-start;\n\t\t@apply p-0 tablet:p-0 desktop-xs:p-0;\n\t}\n}\n","import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-backdrop',\n\tstyleUrl: 'backdrop.component.scss',\n\tshadow: true,\n})\nexport class Backdrop {\n\t/**\n\t * The variant of the backdrop\n\t */\n\t@Prop() variant: 'modal' | 'drawer' = 'modal';\n\n\t/**\n\t * Wether to apply blur on the background of the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether the backdrop is closing\n\t */\n\t@Prop() closing: boolean = false;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * When the backdrop is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclicked: EventEmitter<MouseEvent>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tcomponentWillLoad() {\n\t\tif (this.scrollLock) {\n\t\t\tdocument.querySelector(':root').classList.add('scroll-lock');\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tif (this.scrollLock) {\n\t\t\tdocument.querySelector(':root').classList.remove('scroll-lock');\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-backdrop variant-${this.variant} ${\n\t\t\t\t\tthis.applyBlur && 'blurred'\n\t\t\t\t} ${this.closing && 'closing'}`}\n\t\t\t>\n\t\t\t\t<div class=\"content-container\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('click', { capture: true })\n\thandleClick(ev: MouseEvent) {\n\t\tif (ev.target !== this._el) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.clicked.emit(ev);\n\t}\n}\n"],"version":3}
+{"file":"backdrop.component.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,ymEAAymE;;ACYtoE,MAAM,QAAQ,GAAG,GAAG,CACnB;EACC,MAAM;EACN,+BAA+B;EAC/B,eAAe;EACf,iBAAiB;EACjB,sBAAsB;EACtB,2BAA2B;CAC3B,EACD;EACC,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,KAAK,EAAE,IAAI;MACX,IAAI,EAAE,kBAAkB;KACxB;IACD,OAAO,EAAE;MACR,KAAK,EAAE,iBAAiB;MACxB,IAAI,EAAE,sCAAsC;KAC5C;GACD;CACD,CACD,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,CAC3B;EACC,iDAAiD;EACjD,oCAAoC;EACpC,wDAAwD;EACxD,2BAA2B;CAC3B,EACD;EACC,QAAQ,EAAE;IACT,OAAO,EAAE;MACR,KAAK,EAAE,IAAI;MACX,MAAM,EAAE;QACP,gDAAgD;QAChD,+BAA+B;OAC/B;KACD;IACD,OAAO,EAAE;MACR,KAAK,EAAE,IAAI;MACX,IAAI,EAAE,iBAAiB;KACvB;GACD;CACD,CACD,CAAC;MAMW,QAAQ;;;;;mBAIkB,OAAO;qBAKhB,KAAK;mBAKP,KAAK;sBAKF,IAAI;;;EAoBlC,iBAAiB;IAChB,IAAI,IAAI,CAAC,UAAU,EAAE;MACpB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;KAC7D;GACD;EAED,oBAAoB;IACnB,IAAI,IAAI,CAAC,UAAU,EAAE;MACpB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;KAChE;GACD;EAED,mBAAmB;IAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACrB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;KAChE;IAED,IAAI,IAAI,CAAC,UAAU,EAAE;MACpB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;KAC7D;GACD;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,IACrE,WACC,KAAK,EAAE,gBAAgB,CAAC;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,OAAO,EAAE,IAAI,CAAC,OAAO;OACrB,CAAC,IAEF,eAAQ,CACH,CACA,EACN;GACF;EAGD,WAAW,CAAC,EAAc;IACzB,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE;MACpE,OAAO;KACP;IAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/backdrop/backdrop.component.scss?tag=p-backdrop","src/components/atoms/backdrop/backdrop.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst backdrop = cva(\n\t[\n\t\t'flex',\n\t\t'fixed left-0 top-0 z-backdrop',\n\t\t'h-full w-full',\n\t\t'overflow-hidden',\n\t\t'bg-black-teal-800/40',\n\t\t'max-h-screen max-w-screen',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tblur: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: 'backdrop-blur-sm',\n\t\t\t},\n\t\t\tclosing: {\n\t\t\t\tfalse: 'animate-fade-in',\n\t\t\t\ttrue: 'animate-fade-out pointer-events-none',\n\t\t\t},\n\t\t},\n\t}\n);\n\nconst contentContainer = cva(\n\t[\n\t\t'h-full w-full overflow-y-auto overflow-x-hidden',\n\t\t'pt-16 tablet:px-16 desktop-xs:p-16',\n\t\t'flex items-end justify-center desktop-xs:items-stretch',\n\t\t'max-h-screen max-w-screen',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tmodal: null,\n\t\t\t\tdrawer: [\n\t\t\t\t\t'items-start justify-end desktop-xs:items-start',\n\t\t\t\t\t'p-0 tablet:p-0 desktop-xs:p-0',\n\t\t\t\t],\n\t\t\t},\n\t\t\tclosing: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: 'overflow-hidden',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-backdrop',\n\tstyleUrl: 'backdrop.component.scss',\n})\nexport class Backdrop {\n\t/**\n\t * The variant of the backdrop\n\t */\n\t@Prop() variant: 'modal' | 'drawer' = 'modal';\n\n\t/**\n\t * Wether to apply blur on the background of the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether the backdrop is closing\n\t */\n\t@Prop() closing: boolean = false;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * The class passed to the component\n\t */\n\t@Prop() class: string;\n\n\t/**\n\t * When the backdrop is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclicked: EventEmitter<MouseEvent>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tcomponentWillLoad() {\n\t\tif (this.scrollLock) {\n\t\t\tdocument.querySelector(':root').classList.add('scroll-lock');\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tif (this.scrollLock) {\n\t\t\tdocument.querySelector(':root').classList.remove('scroll-lock');\n\t\t}\n\t}\n\n\tcomponentWillUpdate() {\n\t\tif (!this.scrollLock) {\n\t\t\tdocument.querySelector(':root').classList.remove('scroll-lock');\n\t\t}\n\n\t\tif (this.scrollLock) {\n\t\t\tdocument.querySelector(':root').classList.add('scroll-lock');\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={backdrop({ blur: this.applyBlur, closing: this.closing })}>\n\t\t\t\t<div\n\t\t\t\t\tclass={contentContainer({\n\t\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\t\tclosing: this.closing,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('click', { capture: true })\n\thandleClick(ev: MouseEvent) {\n\t\tif (ev.target !== this._el && !this._el.contains(ev.target as Node)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.clicked.emit(ev);\n\t}\n}\n"],"version":3}

package/dist/components/badge.component.js

@@ -0,0 +1,31 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const badgeComponentCss = "*{box-sizing:border-box}.static{position:static!important}.inline-flex{display:inline-flex!important}.h-4{height:1rem!important}.min-w-\\[1\\.5rem\\]{min-width:1.5rem!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.rounded-full{border-radius:9999px!important}.bg-teal{--tw-bg-opacity:1!important;background-color:rgb(8 136 121/var(--tw-bg-opacity,1))!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.text-center{text-align:center!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}";
+
+const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, { class: 'p-badge inline-flex h-4 min-w-[1.5rem] items-center justify-center rounded-full bg-teal px-1 text-center text-xs font-semibold text-white' }, h("slot", null)));
+  }
+  static get style() { return badgeComponentCss; }
+}, [4, "p-badge"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-badge"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-badge":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Badge);
+      }
+      break;
+  } });
+}
+
+export { Badge as B, defineCustomElement as d };
+
+//# sourceMappingURL=badge.component.js.map

package/dist/components/badge.component.js.map

@@ -0,0 +1 @@
+{"file":"badge.component.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0tBAA0tB;;MCOvuB,KAAK;;;;;EACjB,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,2IAA2I,IACtJ,eAAQ,CACF,EACN;GACF;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/badge/badge.component.scss?tag=p-badge","src/components/atoms/badge/badge.component.tsx"],"sourcesContent":["","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n\ttag: 'p-badge',\n\tstyleUrl: 'badge.component.scss',\n\tshadow: false,\n})\nexport class Badge {\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-badge inline-flex h-4 min-w-[1.5rem] items-center justify-center rounded-full bg-teal px-1 text-center text-xs font-semibold text-white'>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/button.component.js

@@ -1,9 +1,223 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as cva } from './index2.js';
 import { d as defineCustomElement$2 } from './icon.component.js';
 import { d as defineCustomElement$1 } from './loader.component.js';
 
-const buttonComponentCss = ".flex{display:flex!important}.h-10{height:2.5rem!important}.h-full{height:100%!important}.w-auto{width:auto!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.rounded-large{border-radius:.375rem!important}.rounded-none{border-radius:0!important}.rounded-l-none{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.rounded-r-none{border-bottom-right-radius:0!important;border-top-right-radius:0!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}.bg-indigo{background-color:rgb(82 138 250/var(--tw-bg-opacity))!important}.bg-indigo,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.font-semibold{font-weight:600!important}.underline{text-decoration-line:underline!important}.outline{outline-style:solid!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-button{height:2.5rem;width:auto}p-button,p-button a,p-button button{display:flex;font-size:1rem;line-height:1.5rem}p-button a,p-button button{align-items:center;border:0;border-radius:.375rem!important;cursor:pointer;font-weight:600;height:100%;justify-content:center;outline:0;width:100%;will-change:filter}p-button a.icon-position-end>p-icon:not(.chevron),p-button a>p-loader,p-button button.icon-position-end>p-icon:not(.chevron),p-button button>p-loader{margin-left:.5rem}p-button a.icon-position-start>p-icon:not(.chevron),p-button button.icon-position-start>p-icon:not(.chevron){margin-right:.5rem}p-button a.variant-primary,p-button a.variant-secondary,p-button button.variant-primary,p-button button.variant-secondary{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);padding-left:1rem;padding-right:1rem}p-button a.variant-primary.active,p-button a.variant-primary:active,p-button a.variant-secondary.active,p-button a.variant-secondary:active,p-button button.variant-primary.active,p-button button.variant-primary:active,p-button button.variant-secondary.active,p-button button.variant-secondary:active{--tw-drop-shadow:drop-shadow(transparent);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)}p-button a.variant-primary,p-button button.variant-primary{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}p-button a.variant-primary.active:not([disabled]),p-button a.variant-primary:active:not([disabled]),p-button button.variant-primary.active:not([disabled]),p-button button.variant-primary:active:not([disabled]){--tw-bg-opacity:1;background-color:rgb(44 75 169/var(--tw-bg-opacity))}@media (pointer:fine){p-button a.variant-primary:hover:not([disabled]),p-button button.variant-primary:hover:not([disabled]){--tw-drop-shadow:drop-shadow(0px 2px 4px rgba(44,75,169,.4));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)}}p-button a.variant-secondary,p-button button.variant-secondary{--tw-border-opacity:1!important;--tw-bg-opacity:1;--tw-text-opacity:1;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:1px!important;color:rgb(81 83 107/var(--tw-text-opacity))}p-button a.variant-secondary.active:not([disabled]),p-button a.variant-secondary:active:not([disabled]),p-button button.variant-secondary.active:not([disabled]),p-button button.variant-secondary:active:not([disabled]){--tw-bg-opacity:1;background-color:rgb(247 250 252/var(--tw-bg-opacity))}@media (pointer:fine){p-button a.variant-secondary:hover:not([disabled]),p-button button.variant-secondary:hover:not([disabled]){--tw-drop-shadow:drop-shadow(0px 2px 4px rgba(176,178,203,.4));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)}}p-button a.variant-text,p-button button.variant-text{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}p-button a.variant-text.has-underline,p-button button.variant-text.has-underline{text-decoration-line:underline;text-underline-offset:1px}p-button a.variant-text:hover:not([disabled]),p-button button.variant-text:hover:not([disabled]){--tw-text-opacity:1;color:rgb(44 75 169/var(--tw-text-opacity))}p-button a[disabled],p-button button[disabled]{opacity:.4}p-button a.should-inherit-text,p-button button.should-inherit-text{color:inherit!important;font-size:inherit!important;font-weight:inherit!important}p-button a.button-group-pos-start,p-button button.button-group-pos-start{border-bottom-right-radius:0!important;border-top-right-radius:0!important}p-button a.button-group-pos-middle,p-button button.button-group-pos-middle{border-radius:0!important}p-button a.button-group-pos-end,p-button button.button-group-pos-end{border-bottom-left-radius:0!important;border-top-left-radius:0!important}p-button.has-chevron a.chevron-position-start,p-button.has-chevron button.chevron-position-start{padding-left:.5rem}p-button.has-chevron a.chevron-position-start>p-icon.chevron,p-button.has-chevron button.chevron-position-start>p-icon.chevron{margin-right:.5rem}p-button.has-chevron a.chevron-position-end,p-button.has-chevron button.chevron-position-end{padding-right:.5rem}p-button.has-chevron a.chevron-position-end>p-icon.chevron,p-button.has-chevron button.chevron-position-end>p-icon.chevron{margin-left:.5rem}p-button.has-chevron a.variant-secondary:hover:not([disabled]) p-icon:last-child,p-button.has-chevron button.variant-secondary:hover:not([disabled]) p-icon:last-child{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}p-button.has-icon-only{width:2.5rem}p-button.has-icon-only a,p-button.has-icon-only button{padding:0}p-button.has-icon-only a>p-icon:first-child,p-button.has-icon-only button>p-icon:first-child{margin-left:0;margin-right:0}p-button.has-icon-only a>p-loader,p-button.has-icon-only button>p-loader{margin-left:0}p-button.has-icon-only.has-chevron{width:auto}p-button.has-icon-only.has-chevron a.chevron-position-start,p-button.has-icon-only.has-chevron button.chevron-position-start{padding-right:.5rem}p-button.has-icon-only.has-chevron a.chevron-position-end,p-button.has-icon-only.has-chevron button.chevron-position-end{padding-left:.5rem}p-button.size-small{height:2rem}p-button.size-small a,p-button.size-small button{font-size:.875rem;line-height:1.25rem}p-button.size-small a>p-icon,p-button.size-small button>p-icon{font-size:1rem;line-height:1.5rem}p-button.size-small.has-icon-only{width:2rem}p-button.size-small.has-icon-only.has-chevron{width:auto}.static{position:static!important}";
+const buttonComponentCss = "*{box-sizing:border-box}.static{position:static!important}.block{display:block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-10{width:2.5rem!important}.w-6{width:1.5rem!important}.w-8{width:2rem!important}.w-inherit{width:inherit!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.cursor-wait{cursor:wait!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-lg{border-radius:.5rem!important}.rounded-e-lg{border-end-end-radius:.5rem!important;border-start-end-radius:.5rem!important}.rounded-s-lg{border-end-start-radius:.5rem!important;border-start-start-radius:.5rem!important}.border{border-width:1px!important}.border-b{border-bottom-width:1px!important}.border-black-teal\\/10{border-color:rgba(3,42,36,.1)!important}.border-black-teal\\/20{border-color:rgba(3,42,36,.2)!important}.border-supportive-lilac-800{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.border-teal{border-color:rgb(8 136 121/var(--tw-border-opacity,1))!important}.border-teal,.border-teal-100{--tw-border-opacity:1!important}.border-teal-100{border-color:rgb(206 231 228/var(--tw-border-opacity,1))!important}.bg-supportive-lilac{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac-100{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.leading-4{line-height:1rem!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-black-teal-100{--tw-text-opacity:1!important;color:rgb(205 212 211/var(--tw-text-opacity,1))!important}.text-dark-teal-100{--tw-text-opacity:1!important;color:rgb(204 220 218/var(--tw-text-opacity,1))!important}.text-dark-teal-100\\/60{color:rgba(204,220,218,.6)!important}.text-teal{color:rgb(8 136 121/var(--tw-text-opacity,1))!important}.text-teal,.text-teal-100{--tw-text-opacity:1!important}.text-teal-100{color:rgb(206 231 228/var(--tw-text-opacity,1))!important}.underline{text-decoration-line:underline!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring-black-teal\\/10{--tw-ring-color:rgba(3,42,36,.1)!important}.ring-supportive-lilac-100{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.drop-shadow-1{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.drop-shadow-1,.drop-shadow-supportive-lilac{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}.drop-shadow-supportive-lilac{--tw-drop-shadow:drop-shadow(0px 1px 1px 0px rgba(189,140,255,.2))!important}.hover\\:bg-dark-teal:hover{--tw-bg-opacity:1!important;background-color:rgb(0 81 72/var(--tw-bg-opacity,1))!important}.hover\\:bg-supportive-lilac-700:hover{--tw-bg-opacity:1!important;background-color:rgb(200 159 255/var(--tw-bg-opacity,1))!important}.hover\\:bg-white-600:hover{--tw-bg-opacity:1!important;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.hover\\:drop-shadow-1:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.hover\\:drop-shadow-1:hover,.hover\\:drop-shadow-2:hover{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}.hover\\:drop-shadow-2:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.04)) drop-shadow(0 2px 2px rgba(0,2,2,.04)) drop-shadow(0 4px 4px rgba(0,2,2,.04))!important}.active\\:border-supportive-lilac-800:active{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.active\\:text-black-teal\\/60:active{color:rgba(3,42,36,.6)!important}.active\\:text-dark-teal-100\\/60:active{color:rgba(204,220,218,.6)!important}.active\\:text-teal-800:active{--tw-text-opacity:1!important;color:rgb(2 102 92/var(--tw-text-opacity,1))!important}.active\\:ring:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\\:ring-2:active,.active\\:ring:active{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.active\\:ring-2:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\\:ring-black-teal\\/10:active{--tw-ring-color:rgba(3,42,36,.1)!important}.active\\:ring-supportive-lilac-100:active{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}";
 
+const button = cva([
+  'group',
+  'font-semibold leading-4',
+  'flex items-center justify-center gap-2',
+  'cursor-pointer',
+], {
+  variants: {
+    variant: {
+      primary: ['bg-supportive-lilac border-black-teal/20'],
+      secondary: null,
+      text: ['text-teal'],
+      transparent: ['bg-transparent'],
+      dropdown: null,
+    },
+    active: {
+      true: null,
+      false: null,
+    },
+    loading: {
+      true: 'cursor-wait',
+      false: null,
+    },
+    size: {
+      sm: ['text-xs h-6'],
+      base: ['text-sm h-8'],
+      lg: ['text-base h-10'],
+    },
+    disabled: {
+      true: 'cursor-not-allowed',
+      false: null,
+    },
+    underline: {
+      true: null,
+      false: null,
+    },
+    buttonGroupPosition: {
+      none: null,
+      start: null,
+      center: null,
+      end: null,
+    },
+    iconOnly: {
+      true: 'justify-center',
+      false: 'w-inherit py-1',
+    },
+  },
+  compoundVariants: [
+    // variants
+    {
+      variant: ['secondary', 'dropdown'],
+      class: ['bg-white border-black-teal/10'],
+    },
+    {
+      variant: ['primary', 'secondary', 'dropdown'],
+      disabled: false,
+      class: 'border',
+    },
+    {
+      variant: ['primary', 'secondary', 'dropdown'],
+      disabled: false,
+      loading: false,
+      class: 'active:border-supportive-lilac-800 active:ring active:ring-2',
+    },
+    {
+      variant: ['primary', 'secondary', 'dropdown'],
+      disabled: false,
+      loading: false,
+      active: true,
+      class: 'border-supportive-lilac-800 ring ring-2',
+    },
+    {
+      variant: ['primary', 'secondary', 'transparent', 'dropdown'],
+      buttonGroupPosition: 'none',
+      class: 'rounded-lg',
+    },
+    {
+      variant: ['primary', 'secondary', 'transparent', 'dropdown'],
+      buttonGroupPosition: 'start',
+      class: 'rounded-s-lg',
+    },
+    {
+      variant: ['primary', 'secondary', 'transparent', 'dropdown'],
+      buttonGroupPosition: 'end',
+      class: 'rounded-e-lg',
+    },
+    {
+      variant: ['primary', 'secondary', 'dropdown'],
+      disabled: false,
+      class: 'text-black-teal',
+    },
+    {
+      variant: 'primary',
+      disabled: true,
+      class: 'bg-supportive-lilac-100 text-black-teal-100',
+    },
+    {
+      variant: 'primary',
+      disabled: false,
+      loading: false,
+      class: 'drop-shadow-supportive-lilac hover:drop-shadow-2 hover:bg-supportive-lilac-700 active:text-black-teal/60 active:ring-black-teal/10',
+    },
+    {
+      variant: 'primary',
+      disabled: false,
+      loading: false,
+      active: true,
+      class: 'ring-black-teal/10',
+    },
+    {
+      variant: ['secondary', 'dropdown'],
+      disabled: true,
+      class: 'border bg-white-600 text-black-teal-100',
+    },
+    {
+      variant: ['secondary', 'dropdown'],
+      disabled: false,
+      loading: false,
+      class: 'drop-shadow-1 hover:drop-shadow-1 hover:bg-white-600 active:text-black-teal/60 active:ring-supportive-lilac-100',
+    },
+    {
+      variant: ['secondary', 'dropdown'],
+      disabled: false,
+      loading: false,
+      active: true,
+      class: 'ring-supportive-lilac-100',
+    },
+    {
+      variant: 'text',
+      underline: true,
+      disabled: false,
+      class: 'border-b border-teal',
+    },
+    {
+      variant: 'text',
+      underline: true,
+      disabled: true,
+      class: 'border-b border-teal-100',
+    },
+    {
+      variant: 'text',
+      disabled: true,
+      class: 'text-teal-100',
+    },
+    {
+      variant: 'text',
+      disabled: false,
+      loading: false,
+      class: 'active:text-teal-800',
+    },
+    {
+      variant: 'transparent',
+      disabled: false,
+      class: 'text-dark-teal-100',
+    },
+    {
+      variant: 'transparent',
+      disabled: false,
+      loading: false,
+      class: 'hover:bg-dark-teal active:text-dark-teal-100/60',
+    },
+    {
+      variant: 'transparent',
+      disabled: true,
+      class: 'text-dark-teal-100/60',
+    },
+    {
+      variant: ['primary', 'secondary', 'transparent'],
+      size: ['base', 'sm'],
+      iconOnly: false,
+      class: 'px-2',
+    },
+    {
+      variant: ['primary', 'secondary', 'transparent'],
+      size: 'lg',
+      iconOnly: false,
+      class: 'px-3',
+    },
+    {
+      variant: 'dropdown',
+      iconOnly: false,
+      class: 'p-2',
+    },
+    {
+      variant: ['primary', 'secondary', 'transparent', 'text'],
+      iconOnly: false,
+      class: 'py-1',
+    },
+    {
+      size: 'sm',
+      iconOnly: true,
+      class: 'w-6',
+    },
+    {
+      size: 'base',
+      iconOnly: true,
+      class: 'w-8',
+    },
+    {
+      size: 'lg',
+      iconOnly: true,
+      class: 'w-10',
+    },
+  ],
+});
+const icon = cva([], {
+  variants: {
+    size: {
+      sm: 'text-sm',
+      base: 'text-base',
+      lg: 'text-base',
+    },
+  },
+});
 const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
   constructor() {
     super();
@@ -11,10 +225,11 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     this.onClick = createEvent(this, "onClick", 3);
     this.as = 'button';
     this.variant = 'primary';
-    this.underline = false;
+    this.active = false;
+    this.underline = true;
     this.href = undefined;
     this.target = undefined;
-    this.size = 'medium';
+    this.size = 'base';
     this.type = 'button';
     this.loading = false;
     this.chevron = false;
@@ -27,9 +242,10 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     this.iconRotate = undefined;
     this.inheritText = false;
     this.buttonGroupPosition = 'none';
+    this.class = undefined;
   }
   render() {
-    var _a;
+    var _a, _b;
     let loaderColor = 'white';
     switch (this.variant) {
       case 'secondary':
@@ -42,14 +258,24 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     const VariableTag = this.variant === 'text' || ((_a = this.href) === null || _a === void 0 ? void 0 : _a.length) || this.as === 'a'
       ? 'a'
       : 'button';
-    return (h(Host, { class: `p-button size-${this.size} ${this.iconOnly && 'has-icon-only'} ${this.chevron && 'has-chevron'}` }, h(VariableTag, { class: `variant-${this.variant}  icon-position-${this.iconPosition} chevron-position-${this.chevronPosition} ${this.inheritText && 'should-inherit-text'} ${this.underline && 'has-underline'} ${this.buttonGroupPosition !== 'none' &&
-        `button-group-pos-${this.buttonGroupPosition}`}`, disabled: this.disabled, href: this.href, type: this.variant !== 'text' ? this.type : undefined, target: this.target }, this.chevron && this.chevronPosition === 'start' && (h("p-icon", { class: 'chevron', variant: 'chevron', rotate: this.chevron === 'up' ? 180 : 0 })), this.icon &&
+    const active = this.active || ((_b = this.class) === null || _b === void 0 ? void 0 : _b.includes('active'));
+    return (h(Host, { class: 'p-button block' }, h(VariableTag, { disabled: this.disabled, href: this.href, type: this.variant !== 'text' ? this.type : undefined, target: this.target, class: button({
+        variant: this.variant,
+        size: this.size,
+        underline: this.underline,
+        loading: this.loading,
+        disabled: this.disabled,
+        buttonGroupPosition: this.buttonGroupPosition,
+        iconOnly: this.iconOnly,
+        active,
+      }) }, this.chevron && this.chevronPosition === 'start' && (h("p-icon", { variant: 'caret', rotate: this.chevron === 'up' ? 180 : 0 })), this.icon &&
       this.iconPosition === 'start' &&
       !(this.iconOnly && this.loading) &&
       this._getIcon(), h("slot", null), this.icon &&
       this.iconPosition === 'end' &&
-      !(this.iconOnly && this.loading) &&
-      this._getIcon(), this.loading && h("p-loader", { color: loaderColor }), this.chevron && this.chevronPosition === 'end' && (h("p-icon", { class: 'chevron', variant: 'chevron', rotate: this.chevron === 'up' ? 180 : 0 })))));
+      !this.loading &&
+      !this.chevron &&
+      this._getIcon(), this.chevron && !this.loading && this.chevronPosition === 'end' && (h("p-icon", { variant: 'caret', rotate: this.chevron === 'up' ? 180 : 0 })), this.loading && h("p-loader", { color: loaderColor }))));
   }
   handleClick(ev) {
     if (this.loading || this.disabled) {
@@ -62,12 +288,15 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     if (!this.icon) {
       return;
     }
-    return (h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
+    return (h("p-icon", { class: icon({
+        size: this.size,
+      }), variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
   }
   static get style() { return buttonComponentCss; }
 }, [4, "p-button", {
     "as": [1],
     "variant": [1],
+    "active": [4],
     "underline": [4],
     "href": [1],
     "target": [1],
@@ -83,7 +312,8 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     "iconFlip": [1, "icon-flip"],
     "iconRotate": [2, "icon-rotate"],
     "inheritText": [4, "inherit-text"],
-    "buttonGroupPosition": [1, "button-group-position"]
+    "buttonGroupPosition": [1, "button-group-position"],
+    "class": [1]
   }, [[2, "click", "handleClick"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {