@paperless/core 2.0.1-beta.112 → 2.0.1-beta.114

package/dist/collection/components/atoms/dropdown-menu/container/dropdown-menu-container.component.js

@@ -65,14 +65,14 @@ export class DropdownMenuContainer {
             : this.scrollable === true
                 ? 'default'
                 : this.scrollable;
-        return (h("div", { key: '9fdbc014bb777e9db6fb407c5994982b696bf8bb', class: dropdownMenuContainer({
+        return (h("div", { key: '9eee3f7a5f008026227fc5da7b20322d0d75a319', class: dropdownMenuContainer({
                 class: this.class,
                 variant: this.variant,
                 fullWidth: asBoolean(this.fullWidth, true),
                 allowOverflow: asBoolean(this.allowOverflow),
                 scrollable,
                 maxWidth: this.maxWidth,
-            }) }, h("div", { key: '899dc3bee6482e16ac442ec0afc0127c73ab3283', class: 'flex w-full flex-col' }, h("slot", { key: '1b6a4124637524f48812b7f4fbbb207f9b957ba0' }))));
+            }) }, h("div", { key: '1629203efdaf0edb68455c95e0a041ed77f790c1', class: 'flex w-full flex-col' }, h("slot", { key: '16bd92fe32353764452d71011ff20df2b952e33e' }))));
     }
     static get is() { return "p-dropdown-menu-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/dropdown-menu/item/dropdown-menu-item.component.js

@@ -188,17 +188,17 @@ export class DropdownMenuItem {
      */
     useContainer = true;
     render() {
-        return (h("div", { key: 'c8acdbe3151719407cc750c90c8d55a9828efdee', class: dropdownMenuItem({
+        return (h("div", { key: '48005e4e4095f022541abf359ff8fb4f2fb177ed', class: dropdownMenuItem({
                 variant: this.variant,
                 active: asBoolean(this.active),
                 enableHover: asBoolean(this.enableHover ?? true, true),
                 disabled: asBoolean(this.disabled),
-            }) }, this.icon && (h("p-icon", { key: '43a3a38ee417cca7db77302722d84a5d633797f7', class: dropdownMenuItemIcon({
+            }) }, this.icon && (h("p-icon", { key: 'b8e8bce920694ad6e8700bcf45bfc739f165a04a', class: dropdownMenuItemIcon({
                 variant: this.variant,
                 active: asBoolean(this.active),
                 disabled: asBoolean(this.disabled),
                 wave: asBoolean(this.iconWave),
-            }), variant: this.icon })), this.checkbox && (h("p-checkbox", { key: '8aa693f1df4f10709f22ee8176d6d2da00cfe494', checked: this.active, disabled: this.disabled })), this.useContainer ? (h("div", { class: 'block w-full overflow-hidden text-ellipsis whitespace-nowrap text-start' }, h("slot", null))) : (h("slot", null))));
+            }), variant: this.icon })), this.checkbox && (h("p-checkbox", { key: '038532b9dbca7ec4c037c49739f8f571635ada59', checked: this.active, disabled: this.disabled })), this.useContainer ? (h("div", { class: 'block w-full overflow-hidden text-ellipsis whitespace-nowrap text-start' }, h("slot", null))) : (h("slot", null))));
     }
     static get is() { return "p-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/floating-menu/container/floating-menu-container.component.css

@@ -1 +1 @@
-*{box-sizing:border-box}:host(.preload){animation:none}.z-floating-menu{z-index:190!important}.mx-0{margin-left:0!important;margin-right:0!important}.ml-auto{margin-left:auto!important}.box-content{box-sizing:content-box!important}.flex{display:flex!important}.table{display:table!important}.size-4{height:1rem!important;width:1rem!important}.h-10{height:2.5rem!important}.h-4{height:1rem!important}.w-auto{width:auto!important}.min-w-0{min-width:0!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.text-nowrap{text-wrap:nowrap!important}.rounded-lg{border-radius:.5rem!important}.bg-dark-teal-600{--tw-bg-opacity:1!important;background-color:rgb(0 72 64/var(--tw-bg-opacity,1))!important}.p-2{padding:.5rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.pl-3{padding-left:.75rem!important}.pr-1{padding-right:.25rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-black-teal-400{--tw-text-opacity:1!important;color:rgb(53 85 80/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-300{--tw-text-opacity:1!important;color:rgb(102 151 145/var(--tw-text-opacity,1))!important}.shadow-3{--tw-shadow:0 1px 1px rgba(0,2,2,.08),0 2px 2px rgba(0,2,2,.08),0 4px 4px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color),0 2px 2px var(--tw-shadow-color),0 4px 4px 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:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@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}}.hover\:text-dark-teal-100:hover{--tw-text-opacity:1!important;color:rgb(204 220 218/var(--tw-text-opacity,1))!important}
+*{box-sizing:border-box}:host(.preload){animation:none}.static{position:static!important}.z-floating-menu{z-index:190!important}.mx-0{margin-left:0!important;margin-right:0!important}.ml-auto{margin-left:auto!important}.box-content{box-sizing:content-box!important}.flex{display:flex!important}.table{display:table!important}.size-4{height:1rem!important;width:1rem!important}.h-10{height:2.5rem!important}.h-4{height:1rem!important}.w-auto{width:auto!important}.min-w-0{min-width:0!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.text-nowrap{text-wrap:nowrap!important}.rounded-lg{border-radius:.5rem!important}.bg-dark-teal-600{--tw-bg-opacity:1!important;background-color:rgb(0 72 64/var(--tw-bg-opacity,1))!important}.p-2{padding:.5rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.pl-3{padding-left:.75rem!important}.pr-1{padding-right:.25rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-black-teal-400{--tw-text-opacity:1!important;color:rgb(53 85 80/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-300{--tw-text-opacity:1!important;color:rgb(102 151 145/var(--tw-text-opacity,1))!important}.shadow-3{--tw-shadow:0 1px 1px rgba(0,2,2,.08),0 2px 2px rgba(0,2,2,.08),0 4px 4px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color),0 2px 2px var(--tw-shadow-color),0 4px 4px 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:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@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}}.hover\:text-dark-teal-100:hover{--tw-text-opacity:1!important;color:rgb(204 220 218/var(--tw-text-opacity,1))!important}

package/dist/collection/components/atoms/floating-menu/container/floating-menu-container.component.js

@@ -60,9 +60,9 @@ export class FloatingMenuContainer {
         this._setLocales();
     }
     render() {
-        return (h(Host, { key: '1312790f15a628010b97756e1d3c93e344afc4d9' }, h("div", { key: 'd3d8f96bde5a99203ad0535147e6b22ed67582b3', class: container({
+        return (h(Host, { key: '588580cddbbfb9582754921c4277271ec99891a5' }, h("div", { key: '9b2afb1c525e278493a77ec8e198101675c89c28', class: container({
                 enableAmountSelected: this.enableAmountSelected,
-            }) }, this.enableAmountSelected && (h(Fragment, { key: '6a5c1e98aa255f9b464ecf549abf068c1995fc9f' }, h("p", { key: '2518ea32f2a8e4c7a05f95ea14be837b91bc8ff7', class: amountSelected() }, this.amountSelectedTemplate(this.amount)), h("p-divider", { key: '6933d3b9c245d6817dfcb6d47e5348055d45e457', class: 'mx-0 h-4 text-black-teal-400', variant: 'vertical' }))), this.usedInTable ? h("slot", { name: 'floating-menu-item' }) : h("slot", null), this.enableClose && (h("div", { key: 'f4a14636165835dcddf4d4714565b41bcdea386f', class: 'ml-auto box-content size-4 cursor-pointer p-2 text-dark-teal-300 hover:text-dark-teal-100', onClick: ev => this.close.emit(ev) }, h("p-icon", { key: 'b0e5c3d7ebb484f881aa437930ae686e1023ff82', variant: 'negative' }))))));
+            }) }, this.enableAmountSelected && (h(Fragment, { key: 'cca4b53a77fa08b77671902bc4e30138dbb0783b' }, h("p", { key: '34d7be81d047f88b66013e10f37132b00d89ced1', class: amountSelected() }, this.amountSelectedTemplate(this.amount)), h("p-divider", { key: 'd05feb777e63ff15a15abab1286c57a81cc5d17f', class: 'mx-0 h-4 text-black-teal-400', variant: 'vertical' }))), this.usedInTable ? h("slot", { name: 'floating-menu-item' }) : h("slot", null), this.enableClose && (h("div", { key: 'b45695d7487384a7e2efb2a9d760d26c018caaa0', class: 'ml-auto box-content size-4 cursor-pointer p-2 text-dark-teal-300 hover:text-dark-teal-100', onClick: ev => this.close.emit(ev) }, h("p-icon", { key: '63fff3ccadd9d79de4207e4451e635911cbb4b28', variant: 'negative' }))))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);

package/dist/collection/components/atoms/floating-menu/item/floating-menu-item.component.css

@@ -1 +1 @@
-.flex{display:flex!important}.h-6{height:1.5rem!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.whitespace-nowrap{white-space:nowrap!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.opacity-40{opacity:.4!important}*{box-sizing:border-box}.min-w-0{min-width:0!important}.cursor-not-allowed{cursor:not-allowed!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.text-nowrap{text-wrap:nowrap!important}.font-semibold{font-weight:600!important}.text-dark-teal-200{--tw-text-opacity:1!important;color:rgb(153 185 182/var(--tw-text-opacity,1))!important}.text-dark-teal-300{--tw-text-opacity:1!important;color:rgb(102 151 145/var(--tw-text-opacity,1))!important}.opacity-60{opacity:.6!important}.group:hover .group-hover\:text-dark-teal-100,.hover\:text-dark-teal-100:hover{--tw-text-opacity:1!important;color:rgb(204 220 218/var(--tw-text-opacity,1))!important}
+.flex{display:flex!important}.h-6{height:1.5rem!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.whitespace-nowrap{white-space:nowrap!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.opacity-40{opacity:.4!important}*{box-sizing:border-box}.static{position:static!important}.min-w-0{min-width:0!important}.cursor-not-allowed{cursor:not-allowed!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.text-nowrap{text-wrap:nowrap!important}.font-semibold{font-weight:600!important}.text-dark-teal-200{--tw-text-opacity:1!important;color:rgb(153 185 182/var(--tw-text-opacity,1))!important}.text-dark-teal-300{--tw-text-opacity:1!important;color:rgb(102 151 145/var(--tw-text-opacity,1))!important}.opacity-60{opacity:.6!important}.group:hover .group-hover\:text-dark-teal-100,.hover\:text-dark-teal-100:hover{--tw-text-opacity:1!important;color:rgb(204 220 218/var(--tw-text-opacity,1))!important}

package/dist/collection/components/atoms/floating-menu/item/floating-menu-item.component.js

@@ -73,10 +73,10 @@ export class FloatingMenuItem {
      */
     iconRotate;
     render() {
-        return (h(Host, { key: '6f25d27e8f828de9c832adc3ad05104e52c79f5e', class: item({
+        return (h(Host, { key: 'b89a4293fdfbb803a76b44284de1803a01bdf945', class: item({
                 hover: asBoolean(this.hover) && !asBoolean(this.loading),
                 disabled: asBoolean(this.disabled),
-            }) }, this._getIcon(), h("p", { key: 'ce1bd15739d832cfac5bc8dc3747ba284b769659', class: 'min-w-0 overflow-hidden text-ellipsis text-nowrap font-semibold' }, h("slot", { key: 'a1f954c38320ee8ce2bdf3c0121337d01bc21269' }))));
+            }) }, this._getIcon(), h("p", { key: '3b1aa85d87f8c8b1532267a49d192a2b2f456c9e', class: 'min-w-0 overflow-hidden text-ellipsis text-nowrap font-semibold' }, h("slot", { key: '1f8ec8185ff05b805b7076eeffa1d6c91b14f9be' }))));
     }
     _getIcon() {
         if (!this.icon && !this.loading) {

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 export class Helper {
     /**
      * The strategy of the popover placement
@@ -9,7 +9,7 @@ export class Helper {
      */
     placement = 'top';
     render() {
-        return (h(Host, { key: 'f41fca806a7d1916dc45723de3a42b2213002423', class: 'p-helper' }, h("p-tooltip", { key: 'fb89672442dfe2dddc2606c36b0ef4dfdb31fddb', placement: this.placement, strategy: this.strategy }, h("div", { key: '595b4aa1facfbf4b12031d09b31eb0e2c706ceb3', slot: 'content' }, h("slot", { key: '7fd883a6819a9a4d625e0f9334746cff3b25f6bb' })), h("p-icon", { key: '94108377e460b52525fe3b61f55aa147173ddc7b', size: 'sm', class: 'cursor-pointer text-black-teal-300 hover:text-black-teal', variant: 'question-circle', slot: 'trigger' }))));
+        return (h("p-tooltip", { key: 'ab6ca1a855d08902f176f50db8ff60a5ddcdc2f9', placement: this.placement, strategy: this.strategy }, h("div", { key: '87e1387305675572b5dc92431538ecd4633a98ce', slot: 'content' }, h("slot", { key: '6689e7ff6c1c6cdc1619a5d593845608fd0624d2' })), h("p-icon", { key: 'd081f770445e5fc500eaa3e1dcdd43ba87d97a9b', size: 'sm', class: 'cursor-pointer text-black-teal-300 hover:text-black-teal', variant: 'question-circle', slot: 'trigger' })));
     }
     static get is() { return "p-helper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/helper/helper.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/helper/helper.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,MAAM;IAClB;;OAEG;IACK,QAAQ,GAAa,UAAU,CAAC;IAExC;;OAEG;IACK,SAAS,GAAc,KAAK,CAAC;IAErC,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAC,UAAU;YACrB,kEACC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,4DAAK,IAAI,EAAC,SAAS;oBAClB,8DAAQ,CACH;gBAEN,+DACC,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,0DAA0D,EAChE,OAAO,EAAC,iBAAiB,EACzB,IAAI,EAAC,SAAS,GACb,CACS,CACN,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Placement, Strategy } from '@floating-ui/dom';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-helper',\n\tstyleUrl: 'helper.component.css',\n\tshadow: true,\n})\nexport class Helper {\n\t/**\n\t * The strategy of the popover placement\n\t */\n\t@Prop() strategy: Strategy = 'absolute';\n\n\t/**\n\t * The placement of the helper popover\n\t */\n\t@Prop() placement: Placement = 'top';\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-helper'>\n\t\t\t\t<p-tooltip\n\t\t\t\t\tplacement={this.placement}\n\t\t\t\t\tstrategy={this.strategy}\n\t\t\t\t>\n\t\t\t\t\t<div slot='content'>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<p-icon\n\t\t\t\t\t\tsize='sm'\n\t\t\t\t\t\tclass='cursor-pointer text-black-teal-300 hover:text-black-teal'\n\t\t\t\t\t\tvariant='question-circle'\n\t\t\t\t\t\tslot='trigger'\n\t\t\t\t\t/>\n\t\t\t\t</p-tooltip>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"helper.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/helper/helper.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,MAAM;IAClB;;OAEG;IACK,QAAQ,GAAa,UAAU,CAAC;IAExC;;OAEG;IACK,SAAS,GAAc,KAAK,CAAC;IAErC,MAAM;QACL,OAAO,CACN,kEACC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,4DAAK,IAAI,EAAC,SAAS;gBAClB,8DAAQ,CACH;YAEN,+DACC,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,0DAA0D,EAChE,OAAO,EAAC,iBAAiB,EACzB,IAAI,EAAC,SAAS,GACb,CACS,CACZ,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Placement, Strategy } from '@floating-ui/dom';\nimport { Component, h, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-helper',\n\tstyleUrl: 'helper.component.css',\n\tshadow: true,\n})\nexport class Helper {\n\t/**\n\t * The strategy of the popover placement\n\t */\n\t@Prop() strategy: Strategy = 'absolute';\n\n\t/**\n\t * The placement of the helper popover\n\t */\n\t@Prop() placement: Placement = 'top';\n\n\trender() {\n\t\treturn (\n\t\t\t<p-tooltip\n\t\t\t\tplacement={this.placement}\n\t\t\t\tstrategy={this.strategy}\n\t\t\t>\n\t\t\t\t<div slot='content'>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\n\t\t\t\t<p-icon\n\t\t\t\t\tsize='sm'\n\t\t\t\t\tclass='cursor-pointer text-black-teal-300 hover:text-black-teal'\n\t\t\t\t\tvariant='question-circle'\n\t\t\t\t\tslot='trigger'\n\t\t\t\t/>\n\t\t\t</p-tooltip>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/atoms/iban-icon/iban-icon.component.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { IBAN_ICON_VARIANTS_ARRAY } from "../../../types";
 export class IbanIcon {
     /**
@@ -15,7 +15,7 @@ export class IbanIcon {
             variant = this.iban.slice(4, 8).toLowerCase();
         }
         const exists = IBAN_ICON_VARIANTS_ARRAY.includes(variant);
-        return (exists && (h(Host, { key: '7e58e64617cdbb1783c9588e493ca4b3b0759b96', class: 'p-iban-icon' }, this._getIcon(variant))));
+        return exists && this._getIcon(variant);
     }
     _getIcon(variant) {
         switch (variant) {

package/dist/collection/components/atoms/iban-icon/iban-icon.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"iban-icon.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/iban-icon/iban-icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAmB,MAAM,gBAAgB,CAAC;AAM3E,MAAM,OAAO,QAAQ;IACpB;;OAEG;IACsB,IAAI,CAAS;IAEtC;;OAEG;IACsB,OAAO,CAAkB;IAElD,MAAM;QACL,IAAI,OAAO,GAAW,IAAI,CAAC,OAAO,CAAC;QAEnC,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC;YACvB,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC/C,CAAC;QAED,MAAM,MAAM,GAAG,wBAAwB,CAAC,QAAQ,CAC/C,OAA0B,CAC1B,CAAC;QAEF,OAAO,CACN,MAAM,IAAI,CACT,EAAC,IAAI,qDAAC,KAAK,EAAC,aAAa,IACvB,IAAI,CAAC,QAAQ,CAAC,OAA0B,CAAC,CACpC,CACP,CACD,CAAC;IACH,CAAC;IAEO,QAAQ,CAAC,OAAwB;QACxC,QAAQ,OAAO,EAAE,CAAC;YACjB,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,kCAAkC,GAAG,CAAC;YACvD,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,mCAAmC,GAAG,CAAC;YACxD,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,kCAAkC,GAAG,CAAC;YACvD,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,mCAAmC,GAAG,CAAC;YACxD,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,kCAAkC,GAAG,CAAC;YACvD,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,sCAAsC,GAAG,CAAC;YAC3D,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,mCAAmC,GAAG,CAAC;YACxD,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,kCAAkC,GAAG,CAAC;QACxD,CAAC;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { IBAN_ICON_VARIANTS_ARRAY, IbanIconVariant } from '../../../types';\n\n@Component({\n\ttag: 'p-iban-icon',\n\tshadow: true,\n})\nexport class IbanIcon {\n\t/**\n\t * The iban you want to get an icon for\n\t */\n\t@Prop({ reflect: true }) iban: string;\n\n\t/**\n\t * The variant of the icon you want toshow\n\t */\n\t@Prop({ reflect: true }) variant: IbanIconVariant;\n\n\trender() {\n\t\tlet variant: string = this.variant;\n\n\t\tif (this.iban?.length) {\n\t\t\tvariant = this.iban.slice(4, 8).toLowerCase();\n\t\t}\n\n\t\tconst exists = IBAN_ICON_VARIANTS_ARRAY.includes(\n\t\t\tvariant as IbanIconVariant\n\t\t);\n\n\t\treturn (\n\t\t\texists && (\n\t\t\t\t<Host class='p-iban-icon'>\n\t\t\t\t\t{this._getIcon(variant as IbanIconVariant)}\n\t\t\t\t</Host>\n\t\t\t)\n\t\t);\n\t}\n\n\tprivate _getIcon(variant: IbanIconVariant) {\n\t\tswitch (variant) {\n\t\t\tcase 'abna':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-abn.svg' />;\n\t\t\tcase 'rabo':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-rabo.svg' />;\n\t\t\tcase 'ingb':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-ing.svg' />;\n\t\t\tcase 'bunq':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-bunq.svg' />;\n\t\t\tcase 'asnb':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-asn.svg' />;\n\t\t\tcase 'trio':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-triodos.svg' />;\n\t\t\tcase 'knab':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-knab.svg' />;\n\t\t\tcase 'snsb':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-sns.svg' />;\n\t\t}\n\t}\n}\n"]}
+{"version":3,"file":"iban-icon.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/iban-icon/iban-icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,wBAAwB,EAAmB,MAAM,gBAAgB,CAAC;AAM3E,MAAM,OAAO,QAAQ;IACpB;;OAEG;IACsB,IAAI,CAAS;IAEtC;;OAEG;IACsB,OAAO,CAAkB;IAElD,MAAM;QACL,IAAI,OAAO,GAAW,IAAI,CAAC,OAAO,CAAC;QAEnC,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC;YACvB,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC/C,CAAC;QAED,MAAM,MAAM,GAAG,wBAAwB,CAAC,QAAQ,CAC/C,OAA0B,CAC1B,CAAC;QAEF,OAAO,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,OAA0B,CAAC,CAAC;IAC5D,CAAC;IAEO,QAAQ,CAAC,OAAwB;QACxC,QAAQ,OAAO,EAAE,CAAC;YACjB,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,kCAAkC,GAAG,CAAC;YACvD,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,mCAAmC,GAAG,CAAC;YACxD,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,kCAAkC,GAAG,CAAC;YACvD,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,mCAAmC,GAAG,CAAC;YACxD,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,kCAAkC,GAAG,CAAC;YACvD,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,sCAAsC,GAAG,CAAC;YAC3D,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,mCAAmC,GAAG,CAAC;YACxD,KAAK,MAAM;gBACV,OAAO,WAAK,GAAG,EAAC,kCAAkC,GAAG,CAAC;QACxD,CAAC;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { IBAN_ICON_VARIANTS_ARRAY, IbanIconVariant } from '../../../types';\n\n@Component({\n\ttag: 'p-iban-icon',\n\tshadow: true,\n})\nexport class IbanIcon {\n\t/**\n\t * The iban you want to get an icon for\n\t */\n\t@Prop({ reflect: true }) iban: string;\n\n\t/**\n\t * The variant of the icon you want toshow\n\t */\n\t@Prop({ reflect: true }) variant: IbanIconVariant;\n\n\trender() {\n\t\tlet variant: string = this.variant;\n\n\t\tif (this.iban?.length) {\n\t\t\tvariant = this.iban.slice(4, 8).toLowerCase();\n\t\t}\n\n\t\tconst exists = IBAN_ICON_VARIANTS_ARRAY.includes(\n\t\t\tvariant as IbanIconVariant\n\t\t);\n\n\t\treturn exists && this._getIcon(variant as IbanIconVariant);\n\t}\n\n\tprivate _getIcon(variant: IbanIconVariant) {\n\t\tswitch (variant) {\n\t\t\tcase 'abna':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-abn.svg' />;\n\t\t\tcase 'rabo':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-rabo.svg' />;\n\t\t\tcase 'ingb':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-ing.svg' />;\n\t\t\tcase 'bunq':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-bunq.svg' />;\n\t\t\tcase 'asnb':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-asn.svg' />;\n\t\t\tcase 'trio':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-triodos.svg' />;\n\t\t\tcase 'knab':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-knab.svg' />;\n\t\t\tcase 'snsb':\n\t\t\t\treturn <img src='./assets/iban-icons/icon-sns.svg' />;\n\t\t}\n\t}\n}\n"]}

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

@@ -1 +1 @@
-*{box-sizing:border-box}:host{display:inline-flex}.static{position:static!important}.inline-flex{display:inline-flex!important}.scale-\[0\.99\]{--tw-scale-x:0.99!important;--tw-scale-y:0.99!important}.scale-\[0\.99\],.scale-x-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-y-flip{--tw-scale-y:-1!important}.scale-y-flip,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:2rem!important;line-height:2.5rem!important}.text-4xl{font-size:2.5rem!important;line-height:3rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!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}
+*{box-sizing:border-box}:host{display:inline-flex}.static{position:static!important}.inline-flex{display:inline-flex!important}.scale-\[0\.9999\]{--tw-scale-x:0.9999!important;--tw-scale-y:0.9999!important}.scale-\[0\.9999\],.scale-x-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-y-flip{--tw-scale-y:-1!important}.scale-y-flip,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:2rem!important;line-height:2.5rem!important}.text-4xl{font-size:2.5rem!important;line-height:3rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!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}.transition-transform{transition-duration:.15s!important;transition-property:transform!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
 import { icons } from "../../../utils/icons";
-const icon = cva(['p-icon inline-flex'], {
+const icon = cva(['p-icon inline-flex', 'transform-gpu transition-transform'], {
     variants: {
         flip: {
             none: null,
@@ -21,7 +21,7 @@ const icon = cva(['p-icon inline-flex'], {
             '4xl': 'text-4xl',
         },
         transform: {
-            true: 'transform-gpu scale-[0.99]',
+            true: 'scale-[0.9999]',
             false: null,
         },
     },
@@ -56,7 +56,7 @@ export class Icon {
     render() {
         const hasTextSizeClass = /text-(xs|sm|base|lg|xl)/.test(this._el.className);
         const svg = icons[this.variant];
-        return (h("div", { key: 'd9d1856a5d0988fd8b66e2afac938e2dbbc7ed60', class: icon({
+        return (h("div", { key: 'f6da3e13a16994834eac34eb63ec67f4f052bd6d', class: icon({
                 flip: this.flip,
                 size: hasTextSizeClass ? 'auto' : this.size,
                 transform: this.flip !== 'none' || this.rotate > 0 || this.rotate < 0,

package/dist/collection/components/atoms/icon/icon.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/icon/icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAK7C,MAAM,IAAI,GAAG,GAAG,CAAC,CAAC,oBAAoB,CAAC,EAAE;IACxC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,IAAI,EAAE,IAAI;YACV,UAAU,EAAE,cAAc;YAC1B,QAAQ,EAAE,cAAc;SACxB;QACD,IAAI,EAAE;YACL,IAAI,EAAE,IAAI;YACV,GAAG,EAAE,UAAU;YACf,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,WAAW;YACjB,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,UAAU;SACjB;QACD,SAAS,EAAE;YACV,IAAI,EAAE,4BAA4B;YAClC,KAAK,EAAE,IAAI;SACX;KACD;CACD,CAAC,CAAC;AAOH,MAAM,OAAO,IAAI;IAChB;;OAEG;IACK,OAAO,CAAe;IAE9B;;OAEG;IACK,IAAI,GAAoB,MAAM,CAAC;IAEvC;;OAEG;IACK,MAAM,GAAW,CAAC,CAAC;IAE3B;;OAEG;IACK,IAAI,GAAoB,MAAM,CAAC;IAEvC;;OAEG;IACQ,GAAG,CAAc;IAE5B,mBAAmB;QAClB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,IAAI,EAAE,CAAC;YACX,OAAO,CAAC,IAAI,CAAC,qBAAqB,IAAI,CAAC,OAAO,mBAAmB,CAAC,CAAC;QACpE,CAAC;IACF,CAAC;IAED,MAAM;QACL,MAAM,gBAAgB,GAAG,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAC5E,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEhC,OAAO,CACN,4DACC,KAAK,EAAE,IAAI,CAAC;gBACX,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAA,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC1C,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;aACrE,CAAC,EACF,KAAK,EAAE;gBACN,aAAa,EAAE,GAAG,IAAI,CAAC,MAAM,KAAK;aAClC,EACD,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,SAAS,EAAE,GAAG,GACR,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { TextSizeOptions } from '../../../types/tailwind';\nimport { icons } from '../../../utils/icons';\n\nexport type IconVariant = keyof typeof icons;\nexport type IconFlipOptions = 'none' | 'horizontal' | 'vertical';\n\nconst icon = cva(['p-icon inline-flex'], {\n\tvariants: {\n\t\tflip: {\n\t\t\tnone: null,\n\t\t\thorizontal: 'scale-x-flip',\n\t\t\tvertical: 'scale-y-flip',\n\t\t},\n\t\tsize: {\n\t\t\tauto: null,\n\t\t\txxs: 'text-xxs',\n\t\t\txs: 'text-xs',\n\t\t\tsm: 'text-sm',\n\t\t\tbase: 'text-base',\n\t\t\tlg: 'text-lg',\n\t\t\txl: 'text-xl',\n\t\t\t'2xl': 'text-2xl',\n\t\t\t'3xl': 'text-3xl',\n\t\t\t'4xl': 'text-4xl',\n\t\t},\n\t\ttransform: {\n\t\t\ttrue: 'transform-gpu scale-[0.99]',\n\t\t\tfalse: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-icon',\n\tstyleUrl: 'icon.component.css',\n\tshadow: true,\n})\nexport class Icon {\n\t/**\n\t * The icon the be displayed\n\t */\n\t@Prop() variant!: IconVariant;\n\n\t/**\n\t * The size of the icon, using tailwind sizes\n\t */\n\t@Prop() size: TextSizeOptions = 'base';\n\n\t/**\n\t * Wether to rotate the icon x degrees\n\t */\n\t@Prop() rotate: number = 0;\n\n\t/**\n\t * Wether to flip the icon horizontally or vertically\n\t */\n\t@Prop() flip: IconFlipOptions = 'none';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() _el: HTMLElement;\n\n\tcomponentWillRender() {\n\t\tconst icon = icons[this.variant];\n\t\tif (!icon) {\n\t\t\tconsole.warn(`[p-icon] Variant \"${this.variant}\" does not exist `);\n\t\t}\n\t}\n\n\trender() {\n\t\tconst hasTextSizeClass = /text-(xs|sm|base|lg|xl)/.test(this._el.className);\n\t\tconst svg = icons[this.variant];\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={icon({\n\t\t\t\t\tflip: this.flip,\n\t\t\t\t\tsize: hasTextSizeClass ? 'auto': this.size,\n\t\t\t\t\ttransform: this.flip !== 'none' || this.rotate > 0 || this.rotate < 0,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\t'--tw-rotate': `${this.rotate}deg`,\n\t\t\t\t}}\n\t\t\t\ttitle={this.variant}\n\t\t\t\tinnerHTML={svg}\n\t\t\t></div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"icon.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/icon/icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAK7C,MAAM,IAAI,GAAG,GAAG,CAAC,CAAC,oBAAoB,EAAE,oCAAoC,CAAC,EAAE;IAC9E,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,IAAI,EAAE,IAAI;YACV,UAAU,EAAE,cAAc;YAC1B,QAAQ,EAAE,cAAc;SACxB;QACD,IAAI,EAAE;YACL,IAAI,EAAE,IAAI;YACV,GAAG,EAAE,UAAU;YACf,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,WAAW;YACjB,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,UAAU;SACjB;QACD,SAAS,EAAE;YACV,IAAI,EAAE,gBAAgB;YACtB,KAAK,EAAE,IAAI;SACX;KACD;CACD,CAAC,CAAC;AAOH,MAAM,OAAO,IAAI;IAChB;;OAEG;IACK,OAAO,CAAe;IAE9B;;OAEG;IACK,IAAI,GAAoB,MAAM,CAAC;IAEvC;;OAEG;IACK,MAAM,GAAW,CAAC,CAAC;IAE3B;;OAEG;IACK,IAAI,GAAoB,MAAM,CAAC;IAEvC;;OAEG;IACQ,GAAG,CAAc;IAE5B,mBAAmB;QAClB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,IAAI,EAAE,CAAC;YACX,OAAO,CAAC,IAAI,CAAC,qBAAqB,IAAI,CAAC,OAAO,mBAAmB,CAAC,CAAC;QACpE,CAAC;IACF,CAAC;IAED,MAAM;QACL,MAAM,gBAAgB,GAAG,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAC5E,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEhC,OAAO,CACN,4DACC,KAAK,EAAE,IAAI,CAAC;gBACX,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAA,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC1C,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;aACrE,CAAC,EACF,KAAK,EAAE;gBACN,aAAa,EAAE,GAAG,IAAI,CAAC,MAAM,KAAK;aAClC,EACD,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,SAAS,EAAE,GAAG,GACR,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { TextSizeOptions } from '../../../types/tailwind';\nimport { icons } from '../../../utils/icons';\n\nexport type IconVariant = keyof typeof icons;\nexport type IconFlipOptions = 'none' | 'horizontal' | 'vertical';\n\nconst icon = cva(['p-icon inline-flex', 'transform-gpu transition-transform'], {\n\tvariants: {\n\t\tflip: {\n\t\t\tnone: null,\n\t\t\thorizontal: 'scale-x-flip',\n\t\t\tvertical: 'scale-y-flip',\n\t\t},\n\t\tsize: {\n\t\t\tauto: null,\n\t\t\txxs: 'text-xxs',\n\t\t\txs: 'text-xs',\n\t\t\tsm: 'text-sm',\n\t\t\tbase: 'text-base',\n\t\t\tlg: 'text-lg',\n\t\t\txl: 'text-xl',\n\t\t\t'2xl': 'text-2xl',\n\t\t\t'3xl': 'text-3xl',\n\t\t\t'4xl': 'text-4xl',\n\t\t},\n\t\ttransform: {\n\t\t\ttrue: 'scale-[0.9999]',\n\t\t\tfalse: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-icon',\n\tstyleUrl: 'icon.component.css',\n\tshadow: true,\n})\nexport class Icon {\n\t/**\n\t * The icon the be displayed\n\t */\n\t@Prop() variant!: IconVariant;\n\n\t/**\n\t * The size of the icon, using tailwind sizes\n\t */\n\t@Prop() size: TextSizeOptions = 'base';\n\n\t/**\n\t * Wether to rotate the icon x degrees\n\t */\n\t@Prop() rotate: number = 0;\n\n\t/**\n\t * Wether to flip the icon horizontally or vertically\n\t */\n\t@Prop() flip: IconFlipOptions = 'none';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() _el: HTMLElement;\n\n\tcomponentWillRender() {\n\t\tconst icon = icons[this.variant];\n\t\tif (!icon) {\n\t\t\tconsole.warn(`[p-icon] Variant \"${this.variant}\" does not exist `);\n\t\t}\n\t}\n\n\trender() {\n\t\tconst hasTextSizeClass = /text-(xs|sm|base|lg|xl)/.test(this._el.className);\n\t\tconst svg = icons[this.variant];\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={icon({\n\t\t\t\t\tflip: this.flip,\n\t\t\t\t\tsize: hasTextSizeClass ? 'auto': this.size,\n\t\t\t\t\ttransform: this.flip !== 'none' || this.rotate > 0 || this.rotate < 0,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\t'--tw-rotate': `${this.rotate}deg`,\n\t\t\t\t}}\n\t\t\t\ttitle={this.variant}\n\t\t\t\tinnerHTML={svg}\n\t\t\t></div>\n\t\t);\n\t}\n}\n"]}

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

@@ -13,7 +13,7 @@ export class Illustration {
     }
     render() {
         const illustration = illustrations[this.variant];
-        return (h(Host, { key: '4030a87f7cd7035d945e81a03fe977a70d3ae52e', class: 'p-illustration block text-8xl', innerHTML: illustration }));
+        return (h(Host, { key: '59b2d46a67a9f7bca92ac5f14b75f05c5a7556a3', class: 'block text-8xl', innerHTML: illustration }));
     }
     static get is() { return "p-illustration"; }
     static get properties() {

package/dist/collection/components/atoms/illustration/illustration.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"illustration.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/illustration/illustration.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,aAAa,MAAM,8BAA8B,CAAC;AAQzD,MAAM,OAAO,YAAY;IACxB;;OAEG;IACK,OAAO,CAAuB;IAEtC,mBAAmB;QAClB,MAAM,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACjD,IAAI,CAAC,YAAY,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CACX,6BAA6B,IAAI,CAAC,OAAO,mBAAmB,CAC5D,CAAC;QACH,CAAC;IACF,CAAC;IAED,MAAM;QACL,MAAM,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEjD,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAC,+BAA+B,EACrC,SAAS,EAAE,YAAY,GAChB,CACR,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport illustrations from '../../../utils/illustrations';\n\nexport type IllustrationVariant = keyof typeof illustrations;\n\n@Component({\n\ttag: 'p-illustration',\n\t// shadow: true,\n})\nexport class Illustration {\n\t/**\n\t * The icon the be displayed\n\t */\n\t@Prop() variant!: IllustrationVariant;\n\n\tcomponentWillRender() {\n\t\tconst illustration = illustrations[this.variant];\n\t\tif (!illustration) {\n\t\t\tconsole.warn(\n\t\t\t\t`[p-illustration] Variant \"${this.variant}\" does not exist `\n\t\t\t);\n\t\t}\n\t}\n\n\trender() {\n\t\tconst illustration = illustrations[this.variant];\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass='p-illustration block text-8xl'\n\t\t\t\tinnerHTML={illustration}\n\t\t\t></Host>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"illustration.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/illustration/illustration.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,aAAa,MAAM,8BAA8B,CAAC;AAQzD,MAAM,OAAO,YAAY;IACxB;;OAEG;IACK,OAAO,CAAuB;IAEtC,mBAAmB;QAClB,MAAM,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACjD,IAAI,CAAC,YAAY,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CACX,6BAA6B,IAAI,CAAC,OAAO,mBAAmB,CAC5D,CAAC;QACH,CAAC;IACF,CAAC;IAED,MAAM;QACL,MAAM,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEjD,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAC,gBAAgB,EACtB,SAAS,EAAE,YAAY,GAChB,CACR,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport illustrations from '../../../utils/illustrations';\n\nexport type IllustrationVariant = keyof typeof illustrations;\n\n@Component({\n\ttag: 'p-illustration',\n\t// shadow: true,\n})\nexport class Illustration {\n\t/**\n\t * The icon the be displayed\n\t */\n\t@Prop() variant!: IllustrationVariant;\n\n\tcomponentWillRender() {\n\t\tconst illustration = illustrations[this.variant];\n\t\tif (!illustration) {\n\t\t\tconsole.warn(\n\t\t\t\t`[p-illustration] Variant \"${this.variant}\" does not exist `\n\t\t\t);\n\t\t}\n\t}\n\n\trender() {\n\t\tconst illustration = illustrations[this.variant];\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass='block text-8xl'\n\t\t\t\tinnerHTML={illustration}\n\t\t\t></Host>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/atoms/info-panel/info-panel.component.js

@@ -7,7 +7,7 @@ const infopanel = cva(['flex flex-col gap-1', 'w-full px-4 py-3', 'rounded-lg re
             positive: 'bg-positive-green-100',
             biased: 'bg-amber-50',
             negative: 'bg-negative-red-100',
-            unavailable: 'bg-white-700',
+            feedback: 'bg-white-700',
         },
     },
 });
@@ -18,7 +18,7 @@ const header = cva('text-sm font-medium', {
             positive: 'text-positive-green-800',
             biased: 'text-amber-800',
             negative: 'text-negative-red-800',
-            unavailable: 'text-black-teal-800',
+            feedback: 'text-black-teal-800',
         },
     },
 });
@@ -33,7 +33,7 @@ export class InfoPanel {
     /**
      * The variant of the info panel
      */
-    variant = 'neutral';
+    variant = 'feedback';
     /**
      * The header of the info panel
      */
@@ -57,7 +57,7 @@ export class InfoPanel {
     render() {
         const hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
         const hasContentSlot = !!this._el.querySelector(':scope > [slot="content"]');
-        return (h("div", { key: '04c278209f627e9dff0ffa8d95dabc198e269ab0', class: infopanel({ variant: this.variant }) }, (this.header?.length || hasHeaderSlot) && (h("div", { key: '7aa94bf095817fda6d4254f501ed81b982657611', class: header({ variant: this.variant }) }, this.header?.length ? (h("p", { class: 'my-0' }, this.header)) : (h("slot", { name: 'header' })))), (this.content?.length || hasContentSlot) && (h("div", { key: 'e65af856f4870d555da5200ec7a139462380f634', class: 'text-sm text-black-teal-800/60' }, this.content?.length ? (h("p", { class: 'my-0' }, this.content)) : (h("slot", { name: 'content' })))), this.closeable && (h("div", { key: '25f33a822d0e6b81d129d5d0cb67addaa0ec8b23', class: close(), onClick: () => this._close() }, h("p-icon", { key: '855a3822417f72d34cc543e5bfec6cc7b4cdf914', variant: 'negative' })))));
+        return (h("div", { key: 'f424e56cfac5e6a45ed0d75953a8d6d25501cd44', class: infopanel({ variant: this.variant }) }, (this.header?.length || hasHeaderSlot) && (h("div", { key: '844a536b5998119b02633e523db7fbf6e6a1d44b', class: header({ variant: this.variant }) }, this.header?.length ? (h("p", { class: 'my-0' }, this.header)) : (h("slot", { name: 'header' })))), (this.content?.length || hasContentSlot) && (h("div", { key: '89b8be3cfe1729858b83e4a6f41933bf25ffc9fd', class: 'text-sm text-black-teal-800/60' }, this.content?.length ? (h("p", { class: 'my-0' }, this.content)) : (h("slot", { name: 'content' })))), this.closeable && (h("div", { key: 'd5c613697642f3b7a3e959c1755750c142c0dc06', class: close(), onClick: () => this._close() }, h("p-icon", { key: 'a8ab1cee8055d971616d4076cab58b5b98dd439b', variant: 'negative' })))));
     }
     _close() {
         this.closed.emit();
@@ -82,8 +82,8 @@ export class InfoPanel {
                 "attribute": "variant",
                 "mutable": false,
                 "complexType": {
-                    "original": "| 'neutral'\n\t\t| 'positive'\n\t\t| 'biased'\n\t\t| 'negative'\n\t\t| 'unavailable'",
-                    "resolved": "\"biased\" | \"negative\" | \"neutral\" | \"positive\" | \"unavailable\"",
+                    "original": "| 'neutral'\n\t\t| 'positive'\n\t\t| 'biased'\n\t\t| 'negative'\n\t\t| 'feedback'",
+                    "resolved": "\"biased\" | \"feedback\" | \"negative\" | \"neutral\" | \"positive\"",
                     "references": {}
                 },
                 "required": false,
@@ -95,7 +95,7 @@ export class InfoPanel {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'neutral'"
+                "defaultValue": "'feedback'"
             },
             "header": {
                 "type": "string",

package/dist/collection/components/atoms/info-panel/info-panel.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"info-panel.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/info-panel/info-panel.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tElement,\n\th,\n\tProp,\n\tEvent,\n\tEventEmitter,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst infopanel = cva(\n\t['flex flex-col gap-1', 'w-full px-4 py-3', 'rounded-lg relative'],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tneutral: 'bg-supportive-lilac-200',\n\t\t\t\tpositive: 'bg-positive-green-100',\n\t\t\t\tbiased: 'bg-amber-50',\n\t\t\t\tnegative: 'bg-negative-red-100',\n\t\t\t\tunavailable: 'bg-white-700',\n\t\t\t},\n\t\t},\n\t}\n);\n\nconst header = cva('text-sm font-medium', {\n\tvariants: {\n\t\tvariant: {\n\t\t\tneutral: 'text-supportive-lilac-900',\n\t\t\tpositive: 'text-positive-green-800',\n\t\t\tbiased: 'text-amber-800',\n\t\t\tnegative: 'text-negative-red-800',\n\t\t\tunavailable: 'text-black-teal-800',\n\t\t},\n\t},\n});\n\nconst close = cva([\n\t'absolute right-2 top-2',\n\t'flex items-center justify-center',\n\n\t'rounded-lg cursor-pointer',\n\t'text-black-teal-800/60 hover:text-black-teal-800/60 hover:bg-white-500/40',\n\n\t'h-6 w-6',\n]);\n\n@Component({\n\ttag: 'p-info-panel',\n\tstyleUrl: 'info-panel.component.css',\n\tshadow: true,\n})\nexport class InfoPanel {\n\t/**\n\t * The variant of the info panel\n\t */\n\t@Prop() variant:\n\t\t| 'neutral'\n\t\t| 'positive'\n\t\t| 'biased'\n\t\t| 'negative'\n\t\t| 'unavailable' = 'neutral';\n\n\t/**\n\t * The header of the info panel\n\t */\n\t@Prop() header: string;\n\n\t/**\n\t * The content of the info panel\n\t */\n\t@Prop() content: string;\n\n\t/**\n\t * Wether the panel can be closed\n\t */\n\t@Prop() closeable: boolean = false;\n\n\t/**\n\t * When the backdrop is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<void>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\trender() {\n\t\tconst hasHeaderSlot = !!this._el.querySelector(':scope > [slot=\"header\"]');\n\t\tconst hasContentSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"content\"]'\n\t\t);\n\n\t\treturn (\n\t\t\t<div class={infopanel({ variant: this.variant })}>\n\t\t\t\t{(this.header?.length || hasHeaderSlot) && (\n\t\t\t\t\t<div class={header({ variant: this.variant })}>\n\t\t\t\t\t\t{this.header?.length ? (\n\t\t\t\t\t\t\t<p class='my-0'>{this.header}</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<slot name='header' />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{(this.content?.length || hasContentSlot) && (\n\t\t\t\t\t<div class='text-sm text-black-teal-800/60'>\n\t\t\t\t\t\t{this.content?.length ? (\n\t\t\t\t\t\t\t<p class='my-0'>{this.content}</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<slot name='content' />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{this.closeable && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={close()}\n\t\t\t\t\t\tonClick={() => this._close()}\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-icon variant='negative' />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate _close() {\n\t\tthis.closed.emit();\n\t\tthis._el.remove();\n\t}\n}\n"]}
+{"version":3,"file":"info-panel.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/info-panel/info-panel.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tElement,\n\th,\n\tProp,\n\tEvent,\n\tEventEmitter,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst infopanel = cva(\n\t['flex flex-col gap-1', 'w-full px-4 py-3', 'rounded-lg relative'],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tneutral: 'bg-supportive-lilac-200',\n\t\t\t\tpositive: 'bg-positive-green-100',\n\t\t\t\tbiased: 'bg-amber-50',\n\t\t\t\tnegative: 'bg-negative-red-100',\n\t\t\t\tfeedback: 'bg-white-700',\n\t\t\t},\n\t\t},\n\t}\n);\n\nconst header = cva('text-sm font-medium', {\n\tvariants: {\n\t\tvariant: {\n\t\t\tneutral: 'text-supportive-lilac-900',\n\t\t\tpositive: 'text-positive-green-800',\n\t\t\tbiased: 'text-amber-800',\n\t\t\tnegative: 'text-negative-red-800',\n\t\t\tfeedback: 'text-black-teal-800',\n\t\t},\n\t},\n});\n\nconst close = cva([\n\t'absolute right-2 top-2',\n\t'flex items-center justify-center',\n\n\t'rounded-lg cursor-pointer',\n\t'text-black-teal-800/60 hover:text-black-teal-800/60 hover:bg-white-500/40',\n\n\t'h-6 w-6',\n]);\n\n@Component({\n\ttag: 'p-info-panel',\n\tstyleUrl: 'info-panel.component.css',\n\tshadow: true,\n})\nexport class InfoPanel {\n\t/**\n\t * The variant of the info panel\n\t */\n\t@Prop() variant:\n\t\t| 'neutral'\n\t\t| 'positive'\n\t\t| 'biased'\n\t\t| 'negative'\n\t\t| 'feedback' = 'feedback';\n\n\t/**\n\t * The header of the info panel\n\t */\n\t@Prop() header: string;\n\n\t/**\n\t * The content of the info panel\n\t */\n\t@Prop() content: string;\n\n\t/**\n\t * Wether the panel can be closed\n\t */\n\t@Prop() closeable: boolean = false;\n\n\t/**\n\t * When the backdrop is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<void>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\trender() {\n\t\tconst hasHeaderSlot = !!this._el.querySelector(':scope > [slot=\"header\"]');\n\t\tconst hasContentSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"content\"]'\n\t\t);\n\n\t\treturn (\n\t\t\t<div class={infopanel({ variant: this.variant })}>\n\t\t\t\t{(this.header?.length || hasHeaderSlot) && (\n\t\t\t\t\t<div class={header({ variant: this.variant })}>\n\t\t\t\t\t\t{this.header?.length ? (\n\t\t\t\t\t\t\t<p class='my-0'>{this.header}</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<slot name='header' />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{(this.content?.length || hasContentSlot) && (\n\t\t\t\t\t<div class='text-sm text-black-teal-800/60'>\n\t\t\t\t\t\t{this.content?.length ? (\n\t\t\t\t\t\t\t<p class='my-0'>{this.content}</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<slot name='content' />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{this.closeable && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={close()}\n\t\t\t\t\t\tonClick={() => this._close()}\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-icon variant='negative' />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate _close() {\n\t\tthis.closed.emit();\n\t\tthis._el.remove();\n\t}\n}\n"]}

package/dist/collection/components/{deprecated/atoms → atoms}/layout/layout.component.js

@@ -9,7 +9,7 @@ export class Layout {
      */
     scroll;
     render() {
-        return (h(Host, { key: '1842eb883c8d4ea1191d48bc9ade56a174fa10d7', class: `p-layout variant-${this.variant}` }, h("div", { key: '902c4a18f765089943b6dcea6ec947168511a4b9', class: 'content', onScroll: ev => this.scroll.emit(ev) }, h("div", { key: '2306252bcceb536d67bb82b2dfec4baec4cdfbd4', class: 'inner-content' }, h("slot", { key: 'aabfac1fbdb4bf51c810fb811e7a30139c7f40fd', name: 'content' }))), h("div", { key: '100580acda6ea25ed4a7efb58a40c5ecee9a2c4d', class: 'sidebar' }, h("slot", { key: '006bfddae6d28235257fca9f9ad761ef79b7ae69', name: 'sidebar' })), h("div", { key: '017fecbbbe583a4fe9c51796286a01df2faad6c3', class: 'topbar' }, h("slot", { key: '490a2f619d9edba1bad687e9698028715cd63ade', name: 'topbar' }))));
+        return (h(Host, { key: '9353a730abe2a3aaacd227c88a53964552971441', class: `p-layout variant-${this.variant}` }, h("div", { key: 'c83c5f1097457dd541ab26e5c00655b641719e43', class: 'content', onScroll: ev => this.scroll.emit(ev) }, h("div", { key: 'b5eb7fdc3740285fa2234db8a8a9a124e141f484', class: 'inner-content' }, h("slot", { key: 'ad796f234063750bfe1f6dc745327fe2cd7568b6', name: 'content' }))), h("div", { key: '7789358a56389aa41974a19e4833fb86aaaa28cc', class: 'sidebar' }, h("slot", { key: 'b3919dc3d1f4677e4edbe9534ab829214ec38526', name: 'sidebar' })), h("div", { key: '04ac274d9a8c69c19007cb063e6071d081831c9c', class: 'topbar' }, h("slot", { key: '59a936932d74731244bf6c4323b9f9929a5f2117', name: 'topbar' }))));
     }
     static get is() { return "p-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/layout/layout.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,MAAM;IAClB;;OAEG;IACK,OAAO,GAAmC,SAAS,CAAC;IAE5D;;OAEG;IACM,MAAM,CAAoB;IAEnC,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,oBAAoB,IAAI,CAAC,OAAO,EAAE;YAC9C,4DACC,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;gBAEpC,4DAAK,KAAK,EAAC,eAAe;oBACzB,6DAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACD;YACN,4DAAK,KAAK,EAAC,SAAS;gBACnB,6DAAM,IAAI,EAAC,SAAS,GAAG,CAClB;YACN,4DAAK,KAAK,EAAC,QAAQ;gBAClB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACA,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n\ttag: 'p-layout',\n\tstyleUrl: 'layout.component.scss',\n\tshadow: true,\n})\nexport class Layout {\n\t/**\n\t * Variant of the layout\n\t */\n\t@Prop() variant: 'default' | 'login' | 'office' = 'default';\n\n\t/**\n\t * Event whenever the layout is being scrolled\n\t */\n\t@Event() scroll: EventEmitter<any>;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`p-layout variant-${this.variant}`}>\n\t\t\t\t<div\n\t\t\t\t\tclass='content'\n\t\t\t\t\tonScroll={ev => this.scroll.emit(ev)}\n\t\t\t\t>\n\t\t\t\t\t<div class='inner-content'>\n\t\t\t\t\t\t<slot name='content' />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class='sidebar'>\n\t\t\t\t\t<slot name='sidebar' />\n\t\t\t\t</div>\n\t\t\t\t<div class='topbar'>\n\t\t\t\t\t<slot name='topbar' />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/atoms/listing/item/listing-item.component.css

@@ -0,0 +1 @@
+*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}

package/dist/collection/components/atoms/listing/item/listing-item.component.js

@@ -0,0 +1,53 @@
+import { h } from "@stencil/core";
+export class ListingItem {
+    /**
+     * The icon of the step
+     */
+    icon = 'placeholder';
+    render() {
+        return (h("div", { key: '6cef05166e1df24f0c0cb4e927012fb4abaf0246', class: "flex gap-2  items-center text-black-teal" }, h("p-icon", { key: '6f2e4f57bac9946a25e6f5b83e4f75e319b6679a', variant: this.icon }), h("div", { key: '563de1248294d8a616603bda47a27499d83e0a21', class: "flex flex-col font-medium text-sm" }, h("slot", { key: '8fa043fa3475e10b1c7f5803721b36ab7454093d' }))));
+    }
+    static get is() { return "p-listing-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["listing-item.component.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["listing-item.component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconVariant",
+                    "resolved": "\"caret\" | \"double-caret\" | \"arrow\" | \"double-arrow\" | \"bell\" | \"chat\" | \"check-circle\" | \"cross-circle\" | \"error-circle\" | \"info-circle\" | \"phone\" | \"question-circle\" | \"headset\" | \"warning\" | \"attachment\" | \"description\" | \"document\" | \"folder\" | \"pdf\" | \"xls\" | \"bank\" | \"bread\" | \"cake\" | \"calculator\" | \"camera\" | \"car\" | \"certified\" | \"chair\" | \"checkmark\" | \"city\" | \"companies\" | \"company\" | \"credit-card\" | \"cutlery\" | \"department\" | \"diamond\" | \"docter\" | \"download\" | \"envelope\" | \"euro\" | \"exam\" | \"filter\" | \"flower\" | \"globe\" | \"globe-2\" | \"hash\" | \"hat\" | \"home\" | \"integration\" | \"language\" | \"laptop\" | \"location\" | \"mail\" | \"medal\" | \"menu\" | \"menu-arrow\" | \"minus\" | \"more\" | \"negative\" | \"other\" | \"pay\" | \"pencil\" | \"percent\" | \"pie-chart\" | \"placeholder\" | \"plus\" | \"power\" | \"receipt\" | \"reset\" | \"search\" | \"send\" | \"settings\" | \"shuffle\" | \"sick\" | \"signature\" | \"sparkle\" | \"star\" | \"stroller\" | \"tag\" | \"tasks\" | \"tools\" | \"tooth\" | \"train\" | \"trash\" | \"upload\" | \"wave\" | \"zipcode\" | \"eye\" | \"eye-closed\" | \"key\" | \"lock\" | \"unlocked\" | \"alarm\" | \"calendar\" | \"calendar-multi\" | \"calendar-free\" | \"calendar-not-free\" | \"clock\" | \"female\" | \"id\" | \"id-two\" | \"male\" | \"user\" | \"users\" | \"checkmarkThick\"",
+                    "references": {
+                        "IconVariant": {
+                            "location": "import",
+                            "path": "../../icon/icon.component",
+                            "id": "src/components/atoms/icon/icon.component.tsx::IconVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon of the step"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'placeholder'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=listing-item.component.js.map

package/dist/collection/components/atoms/listing/item/listing-item.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listing-item.component.js","sourceRoot":"","sources":["../../../../../src/components/atoms/listing/item/listing-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,WAAW;IACvB;;OAEG;IACK,IAAI,GAAgB,aAAa,CAAC;IAG1C,MAAM;QACL,OAAO,CACN,4DAAK,KAAK,EAAC,0CAA0C;YACpD,+DAAQ,OAAO,EAAE,IAAI,CAAC,IAAI,GAAI;YAC9B,4DAAK,KAAK,EAAC,mCAAmC;gBAE7C,8DAAQ,CACH,CACD,CACN,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { IconVariant } from '../../icon/icon.component';\n\n\n@Component({\n\ttag: 'p-listing-item',\n\tstyleUrl: 'listing-item.component.css',\n\tshadow: true,\n})\nexport class ListingItem {\n\t/**\n\t * The icon of the step\n\t */\n\t@Prop() icon: IconVariant = 'placeholder';\n\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"flex gap-2  items-center text-black-teal\">\n\t\t\t\t<p-icon variant={this.icon} />\n\t\t\t\t<div class=\"flex flex-col font-medium text-sm\"\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/atoms/listing/line/listing-line.component.css

@@ -0,0 +1 @@
+.mx-\[calc\(0\.5rem-1px\)\]{margin-left:calc(.5rem - 1px)!important;margin-right:calc(.5rem - 1px)!important}.block{display:block!important}.min-h-\[1rem\]{min-height:1rem!important}.w-\[1px\]{width:1px!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(222 219 213/var(--tw-bg-opacity,1));display:block;flex:1 1 auto;margin-left:calc(.5rem - 1px);margin-right:calc(.5rem - 1px);min-height:1rem;width:1px}.static{position:static!important}

package/dist/collection/components/atoms/listing/line/listing-line.component.js

@@ -0,0 +1,19 @@
+import { h, Host } from "@stencil/core";
+export class ListingLine {
+    render() {
+        return h(Host, { key: '8c7ba0992277c5a7dd28b63b7db3978ee8bf4bf1' });
+    }
+    static get is() { return "p-listing-line"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["listing-line.component.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["listing-line.component.css"]
+        };
+    }
+}
+//# sourceMappingURL=listing-line.component.js.map

package/dist/collection/components/atoms/listing/line/listing-line.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listing-line.component.js","sourceRoot":"","sources":["../../../../../src/components/atoms/listing/line/listing-line.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,WAAW;IACvB,MAAM;QACL,OAAO,EAAC,IAAI,sDAAG,CAAC;IACjB,CAAC;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n\ttag: 'p-listing-line',\n\tstyleUrl: 'listing-line.component.css',\n\tshadow: true,\n})\nexport class ListingLine {\n\trender() {\n\t\treturn <Host />;\n\t}\n}\n"]}

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

@@ -0,0 +1 @@
+.fixed{position:fixed!important}.left-0{left:0!important}.top-0{top:0!important}.box-border{box-sizing:border-box!important}.block{display:block!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-\[1em\]{height:1em!important}.w-\[1em\]{width:1em!important}.w-full{width:100%!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-center{align-items:center!important}.border-2{border-width:2px!important}.border-off-white-600\/40{border-color:hsla(43,16%,91%,.4)!important}.border-white\/40{border-color:hsla(0,0%,100%,.4)!important}.border-r-black-teal-400{--tw-border-opacity:1!important;border-right-color:rgb(53 85 80/var(--tw-border-opacity,1))!important}.border-r-supportive-lilac\/40{border-right-color:rgba(209,174,255,.4)!important}.border-t-black-teal-700{--tw-border-opacity:1!important;border-top-color:rgb(0 13 11/var(--tw-border-opacity,1))!important}.border-t-off-white-800{--tw-border-opacity:1!important;border-top-color:rgb(213 208 195/var(--tw-border-opacity,1))!important}.border-t-supportive-lilac{--tw-border-opacity:1!important;border-top-color:rgb(209 174 255/var(--tw-border-opacity,1))!important}.border-t-white{--tw-border-opacity:1!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity,1))!important}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.h-screen-safe{height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important}*{box-sizing:border-box}:host .loader{animation:spin .5s linear infinite;border-radius:9999px;border-style:solid;border-width:2px;display:inline-block;height:1em;width:1em;will-change:transform}:host .loader.color-supportive-lilac{--tw-border-opacity:1!important;border-right-color:rgba(209,174,255,.4)!important;border-top-color:rgb(209 174 255/var(--tw-border-opacity,1))!important}:host .loader.color-off-white{--tw-border-opacity:1!important;border-color:hsla(43,16%,91%,.4)!important;border-top-color:rgb(213 208 195/var(--tw-border-opacity,1))!important}:host .loader.color-white{--tw-border-opacity:1!important;border-color:hsla(0,0%,100%,.4)!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity,1))!important}:host .loader.color-black-teal{--tw-border-opacity:1!important;border-right-color:rgb(53 85 80/var(--tw-border-opacity,1))!important;border-top-color:rgb(0 13 11/var(--tw-border-opacity,1))!important}:host .loading-screen{--tw-bg-opacity:1;align-items:center;background-color:rgb(250 249 248/var(--tw-bg-opacity,1));display:flex;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));justify-content:center;left:0;position:fixed;top:0;width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));z-index:1001}:host .loading-screen .content{max-width:20rem}:host .loading-screen .content .loader-wrapper{display:flex;justify-content:center;width:100%}:host .loading-screen .content .loader-wrapper .loader{font-size:2.5rem;line-height:3rem}:host(.variant-ghost){--loading-bg:#f7fafc;--loading-stripe:#fcfdfe;animation:loading 1s ease-in-out infinite;background-color:var(--loading-bg);background:linear-gradient(100deg,hsla(0,0%,100%,0) 40%,var(--loading-stripe) 50%,hsla(0,0%,100%,0) 60%) var(--loading-bg);background-position-x:180%;background-size:200% 100%;box-sizing:border-box;display:block;min-height:1em;min-width:1em;will-change:background,background-position-x,background-color}@keyframes loading{to{background-position-x:-20%}}@keyframes spin{to{transform:rotate(1turn)}}.static{position:static!important}.inline{display:inline!important}.min-h-4{min-height:1rem!important}.min-w-4{min-width:1rem!important}.justify-center{justify-content:center!important}.rounded-2xl{border-radius:1rem!important}.text-4xl{font-size:2.5rem!important;line-height:3rem!important}

package/dist/collection/components/{deprecated/atoms → atoms}/loader/loader.component.js

@@ -11,7 +11,7 @@ export class Loader {
     /**
      * Color of the loader
      */
-    color = 'indigo';
+    color = 'supportive-lilac';
     /**
      * !NOT IMPLEMENTED! Modal title for modal variant
      */
@@ -36,13 +36,13 @@ export class Loader {
             return;
         }
         if (this.variant === 'ghost') {
-            return h(Host, { class: 'p-loader variant-ghost' });
+            return h(Host, { class: 'rounded-2xl min-h-4 min-w-4 variant-ghost' });
         }
         const loader = h("div", { class: `loader color-${this.color}` });
         if (this.variant === 'full-screen') {
-            return (h(Host, { class: 'p-loader variant-full-screen' }, h("div", { class: 'loading-screen' }, h("div", { class: 'content' }, h("slot", null), h("div", { class: 'loader-wrapper' }, loader)))));
+            return (h(Host, { class: 'variant-full-screen' }, h("div", { class: 'loading-screen' }, h("div", { class: 'content' }, h("slot", null), h("div", { class: 'loader-wrapper' }, loader)))));
         }
-        return (h(Host, { class: `p-loader variant-default flex ${this.variant === 'full-width' && 'flex w-full justify-center text-4xl'}` }, loader));
+        return (h(Host, { class: `variant-default flex ${this.variant === 'full-width' && 'flex w-full justify-center text-4xl'}` }, loader));
     }
     _checkShow() {
         if (this._showSubscriber) {
@@ -120,8 +120,8 @@ export class Loader {
                 "attribute": "color",
                 "mutable": false,
                 "complexType": {
-                    "original": "'indigo' | 'white' | 'storm'",
-                    "resolved": "\"indigo\" | \"storm\" | \"white\"",
+                    "original": "'supportive-lilac' | 'white' | 'off-white' | 'black-teal'",
+                    "resolved": "\"black-teal\" | \"off-white\" | \"supportive-lilac\" | \"white\"",
                     "references": {}
                 },
                 "required": false,
@@ -133,7 +133,7 @@ export class Loader {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'indigo'"
+                "defaultValue": "'supportive-lilac'"
             },
             "modalTitle": {
                 "type": "string",

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

@@ -0,0 +1 @@
+{"version":3,"file":"loader.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/loader/loader.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,MAAM;IAClB;;OAEG;IACK,IAAI,GAAkC,IAAI,CAAC;IAEnD;;OAEG;IACK,OAAO,GACd,QAAQ,CAAC;IAEV;;OAEG;IACK,KAAK,GAA8D,kBAAkB,CAAC;IAE9F;;OAEG;IACK,UAAU,CAAS;IAE3B;;OAEG;IACK,gBAAgB,CAAS;IAEzB,KAAK,GAAkC,KAAK,CAAC;IAC7C,eAAe,CAAe;IAEtC,gBAAgB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;IACxB,CAAC;IAED,mBAAmB;QAClB,IAAI,CAAC,UAAU,EAAE,CAAC;IACnB,CAAC;IAED,qBAAqB;QACpB,IAAI,CAAC,UAAU,EAAE,CAAC;IACnB,CAAC;IAED,MAAM;QACL,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACjB,OAAO;QACR,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;YAC9B,OAAO,EAAC,IAAI,IAAC,KAAK,EAAC,2CAA2C,GAAQ,CAAC;QACxE,CAAC;QAED,MAAM,MAAM,GAAG,WAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,GAAQ,CAAC;QAEhE,IAAI,IAAI,CAAC,OAAO,KAAK,aAAa,EAAE,CAAC;YACpC,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAC,qBAAqB;gBAChC,WAAK,KAAK,EAAC,gBAAgB;oBAC1B,WAAK,KAAK,EAAC,SAAS;wBACnB,eAAQ;wBAER,WAAK,KAAK,EAAC,gBAAgB,IAAE,MAAM,CAAO,CACrC,CACD,CACA,CACP,CAAC;QACH,CAAC;QAED,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,wBACN,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,qCAClC,EAAE,IAED,MAAM,CACD,CACP,CAAC;IACH,CAAC;IAEO,UAAU;QACjB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;YACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC7B,CAAC;QAED,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YACpC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC;YACzE,OAAO;QACR,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;IACxB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n\ttag: 'p-loader',\n\tstyleUrl: 'loader.component.scss',\n\tshadow: true,\n})\nexport class Loader {\n\t/**\n\t * Wether to show or hide the loader\n\t */\n\t@Prop() show: boolean | Observable<boolean> = true;\n\n\t/**\n\t * Variant of loader\n\t */\n\t@Prop() variant: 'inline' | 'full-width' | 'full-screen' | 'modal' | 'ghost' =\n\t\t'inline';\n\n\t/**\n\t * Color of the loader\n\t */\n\t@Prop() color: 'supportive-lilac' | 'white' | 'off-white' | 'black-teal' = 'supportive-lilac';\n\n\t/**\n\t * !NOT IMPLEMENTED! Modal title for modal variant\n\t */\n\t@Prop() modalTitle: string;\n\n\t/**\n\t * !NOT IMPLEMENTED! Modal description for modal variant\n\t */\n\t@Prop() modalDescription: string;\n\n\tprivate _show: boolean | Observable<boolean> = false;\n\tprivate _showSubscriber: Subscription;\n\n\tcomponendDidLoad() {\n\t\tthis._show = this.show;\n\t}\n\n\tcomponentWillRender() {\n\t\tthis._checkShow();\n\t}\n\n\tcomponentShouldUpdate() {\n\t\tthis._checkShow();\n\t}\n\n\trender() {\n\t\tif (!this._show) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.variant === 'ghost') {\n\t\t\treturn <Host class='rounded-2xl min-h-4 min-w-4 variant-ghost'></Host>;\n\t\t}\n\n\t\tconst loader = <div class={`loader color-${this.color}`}></div>;\n\n\t\tif (this.variant === 'full-screen') {\n\t\t\treturn (\n\t\t\t\t<Host class='variant-full-screen'>\n\t\t\t\t\t<div class='loading-screen'>\n\t\t\t\t\t\t<div class='content'>\n\t\t\t\t\t\t\t<slot />\n\n\t\t\t\t\t\t\t<div class='loader-wrapper'>{loader}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Host>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`variant-default flex ${\n\t\t\t\t\tthis.variant === 'full-width' && 'flex w-full justify-center text-4xl'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{loader}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _checkShow() {\n\t\tif (this._showSubscriber) {\n\t\t\tthis._showSubscriber.unsubscribe();\n\t\t\tthis._showSubscriber = null;\n\t\t}\n\n\t\tif (typeof this.show !== 'boolean') {\n\t\t\tthis._showSubscriber = this.show?.subscribe(show => (this._show = show));\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show = this.show;\n\t}\n}\n"]}

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

@@ -22,10 +22,10 @@ export class ModalBody {
      */
     roundedTop = false;
     render() {
-        return (h("div", { key: 'ae04aa8ee7ac28631655823c8557e5f46dbdd3af', class: body({
+        return (h("div", { key: '54eeb93a27f3d9324922588ded663f918d23459c', class: body({
                 roundedBottom: this.roundedBottom,
                 roundedTop: this.roundedTop,
-            }) }, h("slot", { key: 'edded036f5a204b6820e95644af5e11b90659876' })));
+            }) }, h("slot", { key: 'e59ecb5c9ea4e96ecfd070dafc402851bf569c14' })));
     }
     static get is() { return "p-modal-body"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,10 +31,10 @@ export class ModalContainer {
      */
     closing = false;
     render() {
-        return (h("div", { key: '1a4c675a8df8e09830c1feab2e88ef411aed4c9b', class: container({
+        return (h("div", { key: 'dc7e4b350c3e33efb219cf6ad447992b52714fb3', class: container({
                 size: this.size,
                 closing: asBoolean(this.closing),
-            }) }, h("slot", { key: 'dbc88f529c81a60aeb48c86ad89a278f0d92644d' })));
+            }) }, h("slot", { key: '31dd9c6641671734c0825dddee9124b6424d26b5' })));
     }
     static get is() { return "p-modal-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class ModalFooter {
     render() {
-        return (h("div", { key: '58997c55f0f86adeef343bd8c4778a8a0d5aae45', class: 'flex flex-col rounded-b-none bg-white pb-4 desktop-xs:rounded-b-2xl' }, h("p-divider", { key: 'd8ab141b88990b4a2c8af6c90d13ad795b8a8242', class: 'mb-4 hidden desktop-xs:inline-block' }), h("div", { key: '2155fc7f40f01339e8b8c8000410693213a04e8e', class: 'flex flex-col gap-4 px-4 tablet:flex-row' }, h("slot", { key: 'e16e263998ecd3e08fb4948a6934cfe40f2d934f' }))));
+        return (h("div", { key: '2b98a6f0f1d00b193c8d81d88afb4db6ff581484', class: 'flex flex-col rounded-b-none bg-white pb-4 desktop-xs:rounded-b-2xl' }, h("p-divider", { key: 'f26fcd3f3b42781ef148377089fa31a337bbf9d6', class: 'mb-4 hidden desktop-xs:inline-block' }), h("div", { key: 'ae51d4c9d85b9760651eda2ca3a4ad88cf064bbf', class: 'flex flex-col gap-4 px-4 tablet:flex-row' }, h("slot", { key: '3156a92dbf6d85df26bb46b3017850a65af00bf7' }))));
     }
     static get is() { return "p-modal-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-*{box-sizing:border-box}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-1\/2{left:50%!important}.top-1\/2{top:50%!important}.z-\[1\]{z-index:1!important}.flex{display:flex!important}.inline-flex{display:inline-flex!important}.aspect-\[7\/1\]{aspect-ratio:7/1!important}.h-12{height:3rem!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.-translate-x-1\/2{--tw-translate-x:-50%!important}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-translate-y-1\/2{--tw-translate-y:-50%!important}.flex-col{flex-direction:column!important}.justify-end{justify-content:flex-end!important}.overflow-hidden{overflow:hidden!important}.rounded-t-2xl{border-top-left-radius:1rem!important;border-top-right-radius:1rem!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.p-4{padding:1rem!important}.pb-0{padding-bottom:0!important}.text-center{text-align:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.font-bold{font-weight:700!important}
+*{box-sizing:border-box}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-1\/2{left:50%!important}.top-1\/2{top:50%!important}.z-\[1\]{z-index:1!important}.flex{display:flex!important}.inline-flex{display:inline-flex!important}.aspect-\[7\/1\]{aspect-ratio:7/1!important}.h-12{height:3rem!important}.w-\[calc\(100\%-7rem\)\]{width:calc(100% - 7rem)!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.-translate-x-1\/2{--tw-translate-x:-50%!important}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-translate-y-1\/2{--tw-translate-y:-50%!important}.flex-col{flex-direction:column!important}.justify-end{justify-content:flex-end!important}.overflow-hidden{overflow:hidden!important}.rounded-t-2xl{border-top-left-radius:1rem!important;border-top-right-radius:1rem!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.p-4{padding:1rem!important}.pb-0{padding-bottom:0!important}.text-center{text-align:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.font-bold{font-weight:700!important}

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

@@ -7,6 +7,7 @@ const header = cva([
 const content = cva(['flex justify-end', 'w-full p-4 pb-0 h-12']);
 const title = cva([
     'flex-1 text-center',
+    'w-[calc(100%-7rem)]',
     'absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2',
     'black-teal-500 text-2xl text-ambit font-bold',
 ]);
@@ -20,7 +21,7 @@ export class ModalHeader {
      */
     close;
     render() {
-        return (h("div", { key: 'ea409642210bca0edd6bcce2c8b15492301000be', class: header() }, h("div", { key: '5c60f285d79d977450d3a133a0e7d61a1e3bb8f7', class: content() }, h("div", { key: '0bd61293220a5d54806ecf755f408c43decb59ba', class: title() }, h("slot", { key: 'e2a0c14cb192104ab1aa8d59bac70b121296f3ed' })), this.showClose && (h("p-button", { key: 'ba29d62c1765c7a397f04d4c014ff753abd03f29', variant: 'secondary', icon: 'negative', iconOnly: true, onClick: ev => this.close.emit(ev) }))), h("p-smile", { key: '8837a8456debeea6f3c3da964ae574eb612a78e7' })));
+        return (h("div", { key: '12831cc1bca31e747b45fd13dfa66bfa82cbe2fb', class: header() }, h("div", { key: 'fa5539f7bd001b022be312e5e8155dd02a64a4a7', class: content() }, h("div", { key: '27a50756df5d98858901fde265e103e6abf14b6a', class: title() }, h("slot", { key: '4c2f3f89ef30b0c7a1e77996936c6044e569934e' })), this.showClose && (h("p-button", { key: 'd20087d813a483a30a5bdcc1a036aadc616bc4c0', variant: 'secondary', icon: 'negative', iconOnly: true, onClick: ev => this.close.emit(ev) }))), h("p-smile", { key: '39ed230b0bc8f327482cc61d7257a659d2de7268' })));
     }
     static get is() { return "p-modal-header"; }
     static get encapsulation() { return "shadow"; }