@paperless/core 0.1.0-alpha.396 → 0.1.0-alpha.397

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/{paperless/p-82a05991.entry.js → build/p-2b08e371.entry.js} +2 -2
  3. package/dist/{paperless/p-82a05991.entry.js.map → build/p-2b08e371.entry.js.map} +1 -1
  4. package/dist/build/{p-e167d64f.entry.js → p-5f2e2380.entry.js} +2 -2
  5. package/dist/build/{p-e167d64f.entry.js.map → p-5f2e2380.entry.js.map} +1 -1
  6. package/dist/build/{p-3c586d9d.entry.js → p-8959086f.entry.js} +2 -2
  7. package/dist/build/p-8959086f.entry.js.map +1 -0
  8. package/dist/build/p-f779e2a8.entry.js +2 -0
  9. package/dist/build/{p-872fa136.entry.js.map → p-f779e2a8.entry.js.map} +1 -1
  10. package/dist/build/paperless.esm.js +1 -1
  11. package/dist/cjs/p-backdrop.cjs.entry.js +1 -1
  12. package/dist/cjs/p-backdrop.cjs.entry.js.map +1 -1
  13. package/dist/cjs/p-button_3.cjs.entry.js +3 -3
  14. package/dist/cjs/p-button_3.cjs.entry.js.map +1 -1
  15. package/dist/cjs/p-helper_3.cjs.entry.js +7 -3
  16. package/dist/cjs/p-helper_3.cjs.entry.js.map +1 -1
  17. package/dist/cjs/p-modal.cjs.entry.js +24 -6
  18. package/dist/cjs/p-modal.cjs.entry.js.map +1 -1
  19. package/dist/collection/components/atoms/backdrop/backdrop.component.css +1 -1
  20. package/dist/collection/components/atoms/button/button.component.css +1 -1
  21. package/dist/collection/components/atoms/divider/divider.component.css +1 -1
  22. package/dist/collection/components/atoms/dropdown-menu-container/dropdown-menu-container.component.css +1 -1
  23. package/dist/collection/components/atoms/helper/helper.component.css +1 -1
  24. package/dist/collection/components/atoms/icon/icon.component.css +1 -1
  25. package/dist/collection/components/atoms/label/label.component.css +1 -1
  26. package/dist/collection/components/atoms/loader/loader.component.css +1 -1
  27. package/dist/collection/components/atoms/pagination-item/pagination-item.component.css +1 -1
  28. package/dist/collection/components/atoms/segment-container/segment-container.component.css +1 -1
  29. package/dist/collection/components/atoms/segment-item/segment-item.component.css +1 -1
  30. package/dist/collection/components/atoms/table-container/table-container.component.css +1 -1
  31. package/dist/collection/components/molecules/calendar/calendar.component.css +1 -1
  32. package/dist/collection/components/molecules/datepicker/datepicker.component.css +1 -1
  33. package/dist/collection/components/molecules/dropdown/dropdown.component.css +1 -1
  34. package/dist/collection/components/molecules/input-group/input-group.component.css +1 -1
  35. package/dist/collection/components/molecules/input-group/input-group.component.js +8 -4
  36. package/dist/collection/components/molecules/input-group/input-group.component.js.map +1 -1
  37. package/dist/collection/components/molecules/pagination/pagination.component.css +1 -1
  38. package/dist/collection/components/molecules/table-cell/table-cell.component.css +1 -1
  39. package/dist/collection/components/molecules/table-footer/table-footer.component.css +1 -1
  40. package/dist/collection/components/molecules/table-header/table-header.component.css +1 -1
  41. package/dist/collection/components/molecules/table-row/table-row.component.css +1 -1
  42. package/dist/collection/components/organisms/modal/modal.component.js +24 -6
  43. package/dist/collection/components/organisms/modal/modal.component.js.map +1 -1
  44. package/dist/collection/components/organisms/table/table.component.css +1 -1
  45. package/dist/components/backdrop.component.js +1 -1
  46. package/dist/components/backdrop.component.js.map +1 -1
  47. package/dist/components/button.component.js +1 -1
  48. package/dist/components/button.component.js.map +1 -1
  49. package/dist/components/icon.component.js +1 -1
  50. package/dist/components/icon.component.js.map +1 -1
  51. package/dist/components/input-group.component.js +7 -3
  52. package/dist/components/input-group.component.js.map +1 -1
  53. package/dist/components/loader.component.js +1 -1
  54. package/dist/components/loader.component.js.map +1 -1
  55. package/dist/components/p-modal.js +24 -6
  56. package/dist/components/p-modal.js.map +1 -1
  57. package/dist/esm/p-backdrop.entry.js +1 -1
  58. package/dist/esm/p-backdrop.entry.js.map +1 -1
  59. package/dist/esm/p-button_3.entry.js +3 -3
  60. package/dist/esm/p-button_3.entry.js.map +1 -1
  61. package/dist/esm/p-helper_3.entry.js +7 -3
  62. package/dist/esm/p-helper_3.entry.js.map +1 -1
  63. package/dist/esm/p-modal.entry.js +24 -6
  64. package/dist/esm/p-modal.entry.js.map +1 -1
  65. package/dist/index.html +1 -1
  66. package/dist/{build/p-82a05991.entry.js → paperless/p-2b08e371.entry.js} +2 -2
  67. package/dist/{build/p-82a05991.entry.js.map → paperless/p-2b08e371.entry.js.map} +1 -1
  68. package/dist/paperless/{p-e167d64f.entry.js → p-5f2e2380.entry.js} +2 -2
  69. package/dist/paperless/{p-e167d64f.entry.js.map → p-5f2e2380.entry.js.map} +1 -1
  70. package/dist/paperless/{p-3c586d9d.entry.js → p-8959086f.entry.js} +2 -2
  71. package/dist/paperless/p-8959086f.entry.js.map +1 -0
  72. package/dist/paperless/p-f779e2a8.entry.js +2 -0
  73. package/dist/paperless/{p-872fa136.entry.js.map → p-f779e2a8.entry.js.map} +1 -1
  74. package/dist/paperless/paperless.esm.js +1 -1
  75. package/dist/sw.js +1 -1
  76. package/dist/sw.js.map +1 -1
  77. package/dist/types/components/molecules/input-group/input-group.component.d.ts +1 -0
  78. package/hydrate/index.js +47 -25
  79. package/package.json +1 -1
  80. package/dist/build/p-3c586d9d.entry.js.map +0 -1
  81. package/dist/build/p-872fa136.entry.js +0 -2
  82. package/dist/paperless/p-3c586d9d.entry.js.map +0 -1
  83. package/dist/paperless/p-872fa136.entry.js +0 -2
package/dist/components/button.component.js CHANGED
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
2
2
  import { d as defineCustomElement$2 } from './icon.component.js';
3
3
  import { d as defineCustomElement$1 } from './loader.component.js';
4
4
 
5
- const buttonComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.mt-0{margin-top:0!important}.block{display:block!important}.inline{display:inline!important}.flex{display:flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.table-row{display:table-row!important}.hidden{display:none!important}.h-10{height:2.5rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-full{height:100%!important}.w-1{width:.25rem!important}.w-10{width:2.5rem!important}.w-11{width:2.75rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-7{width:1.75rem!important}.w-8{width:2rem!important}.w-9{width:2.25rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.self-center{align-self:center!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded{border-radius:.25rem!important}.rounded-large{border-radius:.375rem!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border{border-width:1px!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!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}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-indigo{background-color:rgb(82 138 250/var(--tw-bg-opacity))!important}.bg-indigo,.bg-mystic{--tw-bg-opacity:1!important}.bg-mystic{background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.bg-mystic,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.text-center{text-align:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!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;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative,.text-negative-light{--tw-text-opacity:1!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm,.text-storm-dark{--tw-text-opacity:1!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.outline{outline-style:solid!important}.blur{--tw-blur:blur(8px)!important}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.bg-indigo,.bg-white{--tw-bg-opacity:1!important}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;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: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.has-chevron.chevron-position-start,p-button button.has-chevron.chevron-position-start{padding-left:.5rem}p-button a.has-chevron.chevron-position-start>p-icon.chevron,p-button button.has-chevron.chevron-position-start>p-icon.chevron{margin-right:.5rem}p-button a.has-chevron.chevron-position-end,p-button button.has-chevron.chevron-position-end{padding-right:.5rem}p-button a.has-chevron.chevron-position-end>p-icon.chevron,p-button button.has-chevron.chevron-position-end>p-icon.chevron{margin-left:.5rem}p-button a.has-chevron.variant-secondary:hover:not([disabled]) p-icon:last-child,p-button button.has-chevron.variant-secondary:hover:not([disabled]) p-icon:last-child{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}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.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.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}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.max-w-\\[20rem\\]{max-width:20rem!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.w-3\\/4{width:75%!important}@media (min-width:64rem){.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!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}";
5
+ const buttonComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.mt-0{margin-top:0!important}.block{display:block!important}.inline{display:inline!important}.flex{display:flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.table-row{display:table-row!important}.hidden{display:none!important}.h-10{height:2.5rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-full{height:100%!important}.w-1{width:.25rem!important}.w-10{width:2.5rem!important}.w-11{width:2.75rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-7{width:1.75rem!important}.w-8{width:2rem!important}.w-9{width:2.25rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.self-center{align-self:center!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded{border-radius:.25rem!important}.rounded-large{border-radius:.375rem!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border{border-width:1px!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!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}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-indigo{background-color:rgb(82 138 250/var(--tw-bg-opacity))!important}.bg-indigo,.bg-mystic{--tw-bg-opacity:1!important}.bg-mystic{background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.bg-mystic,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.text-center{text-align:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!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;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative,.text-negative-light{--tw-text-opacity:1!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm,.text-storm-dark{--tw-text-opacity:1!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.outline{outline-style:solid!important}.blur{--tw-blur:blur(8px)!important}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.bg-indigo,.bg-white{--tw-bg-opacity:1!important}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;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: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.has-chevron.chevron-position-start,p-button button.has-chevron.chevron-position-start{padding-left:.5rem}p-button a.has-chevron.chevron-position-start>p-icon.chevron,p-button button.has-chevron.chevron-position-start>p-icon.chevron{margin-right:.5rem}p-button a.has-chevron.chevron-position-end,p-button button.has-chevron.chevron-position-end{padding-right:.5rem}p-button a.has-chevron.chevron-position-end>p-icon.chevron,p-button button.has-chevron.chevron-position-end>p-icon.chevron{margin-left:.5rem}p-button a.has-chevron.variant-secondary:hover:not([disabled]) p-icon:last-child,p-button button.has-chevron.variant-secondary:hover:not([disabled]) p-icon:last-child{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}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.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.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}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}}.max-w-\\[20rem\\]{max-width:20rem!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.w-3\\/4{width:75%!important}@media (min-width:64rem){.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!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}";
6
6
 
7
7
  const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
8
8
  constructor() {
package/dist/components/button.component.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"button.component.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,u5jBAAu5jB;;MCiBr6jB,MAAM;;;;;mBAIqC,SAAS;;;gBAe1B,QAAQ;mBAKhB,KAAK;mBAKW,KAAK;2BAKL,KAAK;oBAKpB,KAAK;;oBAUL,KAAK;wBAKO,KAAK;;;uBAed,KAAK;;EAOpC,MAAM;IACF,IAAI,WAAW,GAAiC,OAAO,CAAC;IACxD,QAAQ,IAAI,CAAC,OAAO;MAChB,KAAK,WAAW;QACZ,WAAW,GAAG,OAAO,CAAC;QACtB,MAAM;MACV,KAAK,MAAM;QACP,WAAW,GAAG,QAAQ,CAAC;QACvB,MAAM;KACb;IAED,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,GAAG,GAAG,QAAQ,CAAC;IAE7D,QACI,EAAC,IAAI,IACD,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,IAC7B,IAAI,CAAC,QAAQ,IAAI,eACrB,GAAG,IAEH,EAAC,WAAW,IACR,KAAK,EAAE,WAAW,IAAI,CAAC,OAAO,mBAC1B,IAAI,CAAC,YACT,IAAI,IAAI,CAAC,OAAO,IAAI,aAAa,qBAC7B,IAAI,CAAC,eACT,IAAI,IAAI,CAAC,WAAW,IAAI,qBAAqB,EAAE,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,eAAe,KAAK,OAAO,KAC7C,cACI,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,SAAS,EACjB,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,GAAG,GAAG,GAAG,CAAC,GACzC,CACL,EAEA,IAAI,CAAC,IAAI;MACN,IAAI,CAAC,YAAY,KAAK,OAAO;MAC7B,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC;MAChC,IAAI,CAAC,QAAQ,EAAE,EAEnB,eAAQ,EAEP,IAAI,CAAC,IAAI;MACN,IAAI,CAAC,YAAY,KAAK,KAAK;MAC3B,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC;MAChC,IAAI,CAAC,QAAQ,EAAE,EAElB,IAAI,CAAC,OAAO,IAAI,gBAAU,KAAK,EAAE,WAAW,GAAI,EAEhD,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,eAAe,KAAK,KAAK,KAC3C,cACI,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,SAAS,EACjB,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,GAAG,GAAG,GAAG,CAAC,GACzC,CACL,CACS,CACX,EACT;GACL;EAGD,WAAW,CAAC,EAAc;IACtB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;MAC/B,EAAE,CAAC,cAAc,EAAE,CAAC;MACpB,OAAO;KACV;IAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GACzB;EAEO,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,QACI,cACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,EACJ;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/button/button.component.scss?tag=p-button","./src/components/atoms/button/button.component.tsx"],"sourcesContent":["p-button {\n @apply flex h-10 w-auto text-base;\n\n button,\n a {\n outline: 0;\n border: 0;\n @apply h-full w-full rounded-large;\n @apply font-semibold leading-4;\n @apply flex items-center justify-center;\n @apply cursor-pointer text-base;\n\n will-change: filter;\n\n > p-loader {\n @apply ml-2;\n }\n\n // Icon positions\n &.icon-position-end {\n > p-icon:not(.chevron) {\n @apply ml-2;\n }\n }\n\n &.icon-position-start {\n > p-icon:not(.chevron) {\n @apply mr-2;\n }\n }\n\n // Variants\n &.variant-primary,\n &.variant-secondary {\n @apply px-4 filter;\n }\n\n &.variant-primary,\n &.variant-secondary {\n &:active,\n &.active {\n @apply drop-shadow-transparent;\n }\n }\n\n &.variant-primary {\n @apply bg-indigo text-white;\n\n &:active,\n &.active {\n &:not([disabled]) {\n @apply bg-indigo-dark;\n }\n }\n\n @media (pointer: fine) {\n &:hover:not([disabled]) {\n @apply drop-shadow-button-primary-hover;\n }\n }\n }\n\n &.variant-secondary {\n @apply border border-solid border-mystic-dark #{!important};\n @apply bg-white text-storm;\n\n &:active,\n &.active {\n &:not([disabled]) {\n @apply bg-mystic;\n }\n }\n\n @media (pointer: fine) {\n &:hover:not([disabled]) {\n @apply drop-shadow-button-secondary-hover;\n }\n }\n }\n\n &.variant-text {\n @apply text-indigo;\n\n &:hover:not([disabled]) {\n @apply text-indigo-dark;\n }\n }\n\n &[disabled] {\n @apply opacity-40;\n }\n\n // chevron\n &.has-chevron {\n &.chevron-position-start {\n @apply pl-2;\n\n > p-icon.chevron {\n @apply mr-2;\n }\n }\n\n &.chevron-position-end {\n @apply pr-2;\n\n > p-icon.chevron {\n @apply ml-2;\n }\n }\n\n &.variant-secondary:hover:not([disabled]) p-icon:last-child {\n @apply text-indigo;\n }\n }\n\n &.should-inherit-text {\n color: inherit #{!important};\n font-size: inherit #{!important};\n font-weight: inherit #{!important};\n }\n }\n\n &.has-icon-only {\n @apply w-10;\n\n a,\n button {\n @apply p-0;\n\n > p-icon:first-child {\n @apply mx-0;\n }\n\n > p-loader {\n @apply ml-0;\n }\n }\n }\n\n // sizes\n &.size-small {\n @apply h-8;\n\n button,\n a {\n @apply text-sm;\n\n > p-icon {\n @apply text-base;\n }\n }\n\n &.has-icon-only {\n @apply w-8;\n }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../icon/icon.component';\n\n@Component({\n tag: 'p-button',\n styleUrl: 'button.component.scss',\n // shadow: true,\n})\nexport class Button {\n /**\n * The variant of the button\n */\n @Prop() variant: 'primary' | 'secondary' | 'text' = 'primary';\n\n /**\n * Href in case of \"text\" version\n */\n @Prop() href: string;\n\n /**\n * Target in case of \"text\" version\n */\n @Prop() target: string;\n\n /**\n * The size of the button\n */\n @Prop() size: 'small' | 'medium' = 'medium';\n\n /**\n * Wether to show a loader or not\n */\n @Prop() loading: boolean = false;\n\n /**\n * Wether to show a chevron or not\n */\n @Prop() chevron: boolean | 'up' | 'down' = false;\n\n /**\n * Chevron position\n */\n @Prop() chevronPosition: 'start' | 'end' = 'end';\n\n /**\n * Wether the button is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Icon to show on the button\n */\n @Prop() icon: IconVariant;\n\n /**\n * Wether the button is icon only\n */\n @Prop() iconOnly: boolean = false;\n\n /**\n * Icon position\n */\n @Prop() iconPosition: 'start' | 'end' = 'end';\n\n /**\n * Icon flip\n */\n @Prop() iconFlip: IconFlipOptions;\n\n /**\n * Icon rotate\n */\n @Prop() iconRotate: RotateOptions;\n\n /**\n * Wether the button should inherit text styles\n */\n @Prop() inheritText: boolean = false;\n\n /**\n * Button click event\n */\n @Event() onClick: EventEmitter<MouseEvent>;\n\n render() {\n let loaderColor: 'white' | 'storm' | 'indigo' = 'white';\n switch (this.variant) {\n case 'secondary':\n loaderColor = 'storm';\n break;\n case 'text':\n loaderColor = 'indigo';\n break;\n }\n\n const VariableTag = this.variant === 'text' ? 'a' : 'button';\n\n return (\n <Host\n class={`p-button size-${this.size} ${\n this.iconOnly && 'has-icon-only'\n } `}\n >\n <VariableTag\n class={`variant-${this.variant} icon-position-${\n this.iconPosition\n } ${this.chevron && 'has-chevron'} chevron-position-${\n this.chevronPosition\n } ${this.inheritText && 'should-inherit-text'}`}\n disabled={this.disabled}\n href={this.href}\n target={this.target}\n >\n {this.chevron && this.chevronPosition === 'start' && (\n <p-icon\n class=\"chevron\"\n variant=\"chevron\"\n rotate={this.chevron === 'up' ? 180 : 0}\n />\n )}\n\n {this.icon &&\n this.iconPosition === 'start' &&\n !(this.iconOnly && this.loading) &&\n this._getIcon()}\n\n <slot />\n\n {this.icon &&\n this.iconPosition === 'end' &&\n !(this.iconOnly && this.loading) &&\n this._getIcon()}\n\n {this.loading && <p-loader color={loaderColor} />}\n\n {this.chevron && this.chevronPosition === 'end' && (\n <p-icon\n class=\"chevron\"\n variant=\"chevron\"\n rotate={this.chevron === 'up' ? 180 : 0}\n />\n )}\n </VariableTag>\n </Host>\n );\n }\n\n @Listen('click', { capture: true })\n handleClick(ev: MouseEvent) {\n if (this.loading || this.disabled) {\n ev.preventDefault();\n return;\n }\n\n this.onClick.emit(ev);\n }\n\n private _getIcon() {\n if (!this.icon) {\n return;\n }\n\n return (\n <p-icon\n variant={this.icon}\n flip={this.iconFlip}\n rotate={this.iconRotate}\n />\n );\n }\n}\n"],"version":3}
1
+ {"file":"button.component.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,63jBAA63jB;;MCiB34jB,MAAM;;;;;mBAIqC,SAAS;;;gBAe1B,QAAQ;mBAKhB,KAAK;mBAKW,KAAK;2BAKL,KAAK;oBAKpB,KAAK;;oBAUL,KAAK;wBAKO,KAAK;;;uBAed,KAAK;;EAOpC,MAAM;IACF,IAAI,WAAW,GAAiC,OAAO,CAAC;IACxD,QAAQ,IAAI,CAAC,OAAO;MAChB,KAAK,WAAW;QACZ,WAAW,GAAG,OAAO,CAAC;QACtB,MAAM;MACV,KAAK,MAAM;QACP,WAAW,GAAG,QAAQ,CAAC;QACvB,MAAM;KACb;IAED,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,GAAG,GAAG,QAAQ,CAAC;IAE7D,QACI,EAAC,IAAI,IACD,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,IAC7B,IAAI,CAAC,QAAQ,IAAI,eACrB,GAAG,IAEH,EAAC,WAAW,IACR,KAAK,EAAE,WAAW,IAAI,CAAC,OAAO,mBAC1B,IAAI,CAAC,YACT,IAAI,IAAI,CAAC,OAAO,IAAI,aAAa,qBAC7B,IAAI,CAAC,eACT,IAAI,IAAI,CAAC,WAAW,IAAI,qBAAqB,EAAE,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,eAAe,KAAK,OAAO,KAC7C,cACI,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,SAAS,EACjB,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,GAAG,GAAG,GAAG,CAAC,GACzC,CACL,EAEA,IAAI,CAAC,IAAI;MACN,IAAI,CAAC,YAAY,KAAK,OAAO;MAC7B,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC;MAChC,IAAI,CAAC,QAAQ,EAAE,EAEnB,eAAQ,EAEP,IAAI,CAAC,IAAI;MACN,IAAI,CAAC,YAAY,KAAK,KAAK;MAC3B,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC;MAChC,IAAI,CAAC,QAAQ,EAAE,EAElB,IAAI,CAAC,OAAO,IAAI,gBAAU,KAAK,EAAE,WAAW,GAAI,EAEhD,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,eAAe,KAAK,KAAK,KAC3C,cACI,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,SAAS,EACjB,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,GAAG,GAAG,GAAG,CAAC,GACzC,CACL,CACS,CACX,EACT;GACL;EAGD,WAAW,CAAC,EAAc;IACtB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;MAC/B,EAAE,CAAC,cAAc,EAAE,CAAC;MACpB,OAAO;KACV;IAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GACzB;EAEO,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,QACI,cACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,EACJ;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/button/button.component.scss?tag=p-button","./src/components/atoms/button/button.component.tsx"],"sourcesContent":["p-button {\n @apply flex h-10 w-auto text-base;\n\n button,\n a {\n outline: 0;\n border: 0;\n @apply h-full w-full rounded-large;\n @apply font-semibold leading-4;\n @apply flex items-center justify-center;\n @apply cursor-pointer text-base;\n\n will-change: filter;\n\n > p-loader {\n @apply ml-2;\n }\n\n // Icon positions\n &.icon-position-end {\n > p-icon:not(.chevron) {\n @apply ml-2;\n }\n }\n\n &.icon-position-start {\n > p-icon:not(.chevron) {\n @apply mr-2;\n }\n }\n\n // Variants\n &.variant-primary,\n &.variant-secondary {\n @apply px-4 filter;\n }\n\n &.variant-primary,\n &.variant-secondary {\n &:active,\n &.active {\n @apply drop-shadow-transparent;\n }\n }\n\n &.variant-primary {\n @apply bg-indigo text-white;\n\n &:active,\n &.active {\n &:not([disabled]) {\n @apply bg-indigo-dark;\n }\n }\n\n @media (pointer: fine) {\n &:hover:not([disabled]) {\n @apply drop-shadow-button-primary-hover;\n }\n }\n }\n\n &.variant-secondary {\n @apply border border-solid border-mystic-dark #{!important};\n @apply bg-white text-storm;\n\n &:active,\n &.active {\n &:not([disabled]) {\n @apply bg-mystic;\n }\n }\n\n @media (pointer: fine) {\n &:hover:not([disabled]) {\n @apply drop-shadow-button-secondary-hover;\n }\n }\n }\n\n &.variant-text {\n @apply text-indigo;\n\n &:hover:not([disabled]) {\n @apply text-indigo-dark;\n }\n }\n\n &[disabled] {\n @apply opacity-40;\n }\n\n // chevron\n &.has-chevron {\n &.chevron-position-start {\n @apply pl-2;\n\n > p-icon.chevron {\n @apply mr-2;\n }\n }\n\n &.chevron-position-end {\n @apply pr-2;\n\n > p-icon.chevron {\n @apply ml-2;\n }\n }\n\n &.variant-secondary:hover:not([disabled]) p-icon:last-child {\n @apply text-indigo;\n }\n }\n\n &.should-inherit-text {\n color: inherit #{!important};\n font-size: inherit #{!important};\n font-weight: inherit #{!important};\n }\n }\n\n &.has-icon-only {\n @apply w-10;\n\n a,\n button {\n @apply p-0;\n\n > p-icon:first-child {\n @apply mx-0;\n }\n\n > p-loader {\n @apply ml-0;\n }\n }\n }\n\n // sizes\n &.size-small {\n @apply h-8;\n\n button,\n a {\n @apply text-sm;\n\n > p-icon {\n @apply text-base;\n }\n }\n\n &.has-icon-only {\n @apply w-8;\n }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../icon/icon.component';\n\n@Component({\n tag: 'p-button',\n styleUrl: 'button.component.scss',\n // shadow: true,\n})\nexport class Button {\n /**\n * The variant of the button\n */\n @Prop() variant: 'primary' | 'secondary' | 'text' = 'primary';\n\n /**\n * Href in case of \"text\" version\n */\n @Prop() href: string;\n\n /**\n * Target in case of \"text\" version\n */\n @Prop() target: string;\n\n /**\n * The size of the button\n */\n @Prop() size: 'small' | 'medium' = 'medium';\n\n /**\n * Wether to show a loader or not\n */\n @Prop() loading: boolean = false;\n\n /**\n * Wether to show a chevron or not\n */\n @Prop() chevron: boolean | 'up' | 'down' = false;\n\n /**\n * Chevron position\n */\n @Prop() chevronPosition: 'start' | 'end' = 'end';\n\n /**\n * Wether the button is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Icon to show on the button\n */\n @Prop() icon: IconVariant;\n\n /**\n * Wether the button is icon only\n */\n @Prop() iconOnly: boolean = false;\n\n /**\n * Icon position\n */\n @Prop() iconPosition: 'start' | 'end' = 'end';\n\n /**\n * Icon flip\n */\n @Prop() iconFlip: IconFlipOptions;\n\n /**\n * Icon rotate\n */\n @Prop() iconRotate: RotateOptions;\n\n /**\n * Wether the button should inherit text styles\n */\n @Prop() inheritText: boolean = false;\n\n /**\n * Button click event\n */\n @Event() onClick: EventEmitter<MouseEvent>;\n\n render() {\n let loaderColor: 'white' | 'storm' | 'indigo' = 'white';\n switch (this.variant) {\n case 'secondary':\n loaderColor = 'storm';\n break;\n case 'text':\n loaderColor = 'indigo';\n break;\n }\n\n const VariableTag = this.variant === 'text' ? 'a' : 'button';\n\n return (\n <Host\n class={`p-button size-${this.size} ${\n this.iconOnly && 'has-icon-only'\n } `}\n >\n <VariableTag\n class={`variant-${this.variant} icon-position-${\n this.iconPosition\n } ${this.chevron && 'has-chevron'} chevron-position-${\n this.chevronPosition\n } ${this.inheritText && 'should-inherit-text'}`}\n disabled={this.disabled}\n href={this.href}\n target={this.target}\n >\n {this.chevron && this.chevronPosition === 'start' && (\n <p-icon\n class=\"chevron\"\n variant=\"chevron\"\n rotate={this.chevron === 'up' ? 180 : 0}\n />\n )}\n\n {this.icon &&\n this.iconPosition === 'start' &&\n !(this.iconOnly && this.loading) &&\n this._getIcon()}\n\n <slot />\n\n {this.icon &&\n this.iconPosition === 'end' &&\n !(this.iconOnly && this.loading) &&\n this._getIcon()}\n\n {this.loading && <p-loader color={loaderColor} />}\n\n {this.chevron && this.chevronPosition === 'end' && (\n <p-icon\n class=\"chevron\"\n variant=\"chevron\"\n rotate={this.chevron === 'up' ? 180 : 0}\n />\n )}\n </VariableTag>\n </Host>\n );\n }\n\n @Listen('click', { capture: true })\n handleClick(ev: MouseEvent) {\n if (this.loading || this.disabled) {\n ev.preventDefault();\n return;\n }\n\n this.onClick.emit(ev);\n }\n\n private _getIcon() {\n if (!this.icon) {\n return;\n }\n\n return (\n <p-icon\n variant={this.icon}\n flip={this.iconFlip}\n rotate={this.iconRotate}\n />\n );\n }\n}\n"],"version":3}
package/dist/components/icon.component.js CHANGED
@@ -990,7 +990,7 @@ const icons = {
990
990
  warning,
991
991
  };
992
992
 
993
- const iconComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.z-navbar-backdrop{z-index:290!important}.col-start-1{grid-column-start:1!important}.col-start-2{grid-column-start:2!important}.col-start-3{grid-column-start:3!important}.col-start-4{grid-column-start:4!important}.col-start-5{grid-column-start:5!important}.col-start-6{grid-column-start:6!important}.col-start-7{grid-column-start:7!important}.m-0{margin:0!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.ml-auto{margin-left:auto!important}.mt-0{margin-top:0!important}.mt-6{margin-top:1.5rem!important}.block{display:block!important}.inline{display:inline!important}.flex{display:flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.table-row{display:table-row!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-1{width:.25rem!important}.w-10{width:2.5rem!important}.w-11{width:2.75rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-7{width:1.75rem!important}.w-8{width:2rem!important}.w-9{width:2.25rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-2{gap:.5rem!important}.gap-3{gap:.75rem!important}.gap-4{gap:1rem!important}.self-center{align-self:center!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded{border-radius:.25rem!important}.rounded-large{border-radius:.375rem!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border{border-width:1px!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-mystic{background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.bg-mystic,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.text-center{text-align:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!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;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-medium{font-weight:500!important}.font-semibold{font-weight:600!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative,.text-negative-light{--tw-text-opacity:1!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm,.text-storm-dark{--tw-text-opacity:1!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!important}.text-storm-medium{color:rgb(128 130 158/var(--tw-text-opacity))!important}.text-storm-medium,.text-storm-vague{--tw-text-opacity:1!important}.text-storm-vague{color:rgb(152 154 183/var(--tw-text-opacity))!important}.blur{--tw-blur:blur(8px)!important}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.max-w-\\[20rem\\]{max-width:20rem!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.w-3\\/4{width:75%!important}@media (min-width:64rem){.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!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}";
993
+ const iconComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.z-navbar-backdrop{z-index:290!important}.col-start-1{grid-column-start:1!important}.col-start-2{grid-column-start:2!important}.col-start-3{grid-column-start:3!important}.col-start-4{grid-column-start:4!important}.col-start-5{grid-column-start:5!important}.col-start-6{grid-column-start:6!important}.col-start-7{grid-column-start:7!important}.m-0{margin:0!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.ml-auto{margin-left:auto!important}.mt-0{margin-top:0!important}.mt-6{margin-top:1.5rem!important}.block{display:block!important}.inline{display:inline!important}.flex{display:flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.table-row{display:table-row!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-1{width:.25rem!important}.w-10{width:2.5rem!important}.w-11{width:2.75rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-7{width:1.75rem!important}.w-8{width:2rem!important}.w-9{width:2.25rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-2{gap:.5rem!important}.gap-3{gap:.75rem!important}.gap-4{gap:1rem!important}.self-center{align-self:center!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded{border-radius:.25rem!important}.rounded-large{border-radius:.375rem!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border{border-width:1px!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-mystic{background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.bg-mystic,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.text-center{text-align:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!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;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-medium{font-weight:500!important}.font-semibold{font-weight:600!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative,.text-negative-light{--tw-text-opacity:1!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm,.text-storm-dark{--tw-text-opacity:1!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!important}.text-storm-medium{color:rgb(128 130 158/var(--tw-text-opacity))!important}.text-storm-medium,.text-storm-vague{--tw-text-opacity:1!important}.text-storm-vague{color:rgb(152 154 183/var(--tw-text-opacity))!important}.blur{--tw-blur:blur(8px)!important}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}}.max-w-\\[20rem\\]{max-width:20rem!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.w-3\\/4{width:75%!important}@media (min-width:64rem){.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!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}";
994
994
 
995
995
  const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
996
996
  constructor() {
package/dist/components/icon.component.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"icon.component.js","mappings":"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","names":[],"sources":["./src/utils/icons.ts","./src/components/atoms/icon/icon.component.scss?tag=p-icon","./src/components/atoms/icon/icon.component.tsx"],"sourcesContent":["import arrow from '../assets/icons/arrow.svg';\nimport attachment from '../assets/icons/attachment.svg';\nimport bread from '../assets/icons/bread.svg';\nimport calendar from '../assets/icons/calendar.svg';\nimport camera from '../assets/icons/camera.svg';\nimport car from '../assets/icons/car.svg';\nimport checklist from '../assets/icons/checklist.svg';\nimport checkmark from '../assets/icons/checkmark.svg';\nimport chevron from '../assets/icons/chevron.svg';\nimport clock from '../assets/icons/clock.svg';\nimport cogs from '../assets/icons/cogs.svg';\nimport comment from '../assets/icons/comment.svg';\nimport document from '../assets/icons/document.svg';\nimport download from '../assets/icons/download.svg';\nimport envelope from '../assets/icons/envelope.svg';\nimport explanation from '../assets/icons/explanation.svg';\nimport eye from '../assets/icons/eye.svg';\nimport filter from '../assets/icons/filter.svg';\nimport folder from '../assets/icons/folder.svg';\nimport grid from '../assets/icons/grid.svg';\nimport headset from '../assets/icons/headset.svg';\nimport integration from '../assets/icons/integration.svg';\nimport list from '../assets/icons/list.svg';\nimport location from '../assets/icons/location.svg';\nimport megaphone from '../assets/icons/megaphone.svg';\nimport menu from '../assets/icons/menu.svg';\nimport minus from '../assets/icons/minus.svg';\nimport more from '../assets/icons/more.svg';\nimport negative from '../assets/icons/negative.svg';\nimport notification from '../assets/icons/notification.svg';\nimport pagination from '../assets/icons/pagination.svg';\nimport payment from '../assets/icons/payment.svg';\nimport pencil from '../assets/icons/pencil.svg';\nimport person from '../assets/icons/person.svg';\nimport plus from '../assets/icons/plus.svg';\nimport question from '../assets/icons/question.svg';\nimport receipt from '../assets/icons/receipt.svg';\nimport reload from '../assets/icons/reload.svg';\nimport report from '../assets/icons/report.svg';\nimport search from '../assets/icons/search.svg';\nimport settings from '../assets/icons/settings.svg';\nimport sick from '../assets/icons/sick.svg';\nimport signout from '../assets/icons/signout.svg';\nimport switchIcon from '../assets/icons/switch.svg';\nimport tachometer from '../assets/icons/tachometer.svg';\nimport task from '../assets/icons/task.svg';\nimport template from '../assets/icons/template.svg';\nimport tool from '../assets/icons/tool.svg';\nimport trash from '../assets/icons/trash.svg';\nimport turn from '../assets/icons/turn.svg';\nimport upload from '../assets/icons/upload.svg';\nimport warning from '../assets/icons/warning.svg';\n\nexport default {\n arrow,\n attachment,\n bread,\n calendar,\n camera,\n car,\n checklist,\n checkmark,\n chevron,\n clock,\n cogs,\n comment,\n document,\n download,\n envelope,\n explanation,\n eye,\n filter,\n folder,\n grid,\n headset,\n integration,\n list,\n location,\n megaphone,\n menu,\n minus,\n more,\n negative,\n notification,\n pagination,\n payment,\n pencil,\n person,\n plus,\n question,\n reload,\n receipt,\n report,\n search,\n settings,\n sick,\n signout,\n switch: switchIcon,\n tachometer,\n task,\n template,\n tool,\n trash,\n turn,\n upload,\n warning,\n};\n",":host {\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions, TextSizeOptions } from '../../../types/tailwind';\nimport icons from '../../../utils/icons';\n\nexport type IconVariant = keyof typeof icons;\nexport type IconFlipOptions = 'horizontal' | 'vertical';\n\n@Component({\n tag: 'p-icon',\n styleUrl: 'icon.component.scss',\n // shadow: true,\n})\nexport class Icon {\n /**\n * The icon the be displayed\n */\n @Prop() variant!: IconVariant;\n\n /**\n * The size of the icon, using tailwind sizes\n */\n @Prop() size: TextSizeOptions = 'auto';\n\n /**\n * Wether to rotate the icon x degrees\n */\n @Prop() rotate: RotateOptions = 0;\n\n /**\n * Wether to flip the icon horizontally or vertically\n */\n @Prop() flip: IconFlipOptions = null;\n\n render() {\n const icon = icons[this.variant];\n\n const styles = {\n 'p-icon flex': true,\n 'text-auto': this.size === 'auto',\n 'text-xxs': this.size === 'xxs',\n 'text-xs': this.size === 'xs',\n 'text-sm': this.size === 'sm',\n 'text-base': this.size === 'base',\n 'text-lg': this.size === 'lg',\n 'text-xl': this.size === 'xl',\n 'text-2xl': this.size === '2xl',\n 'text-3xl': this.size === '3xl',\n 'text-4xl': this.size === '4xl',\n 'text-5xl': this.size === '5xl',\n 'text-6xl': this.size === '6xl',\n transform: !!this.rotate || !!this.flip,\n 'scale-x-flip': this.flip === 'horizontal',\n 'scale-y-flip': this.flip === 'vertical',\n 'rotate-0': this.rotate === 0,\n 'rotate-25': this.rotate === 25,\n 'rotate-45': this.rotate === 45,\n 'rotate-90': this.rotate === 90,\n 'rotate-135': this.rotate === 135,\n 'rotate-180': this.rotate === 180,\n 'rotate-225': this.rotate === 225,\n 'rotate-270': this.rotate === 270,\n 'rotate-315': this.rotate === 315,\n '-rotate-0': this.rotate === -0,\n '-rotate-25': this.rotate === -25,\n '-rotate-45': this.rotate === -45,\n '-rotate-90': this.rotate === -90,\n '-rotate-135': this.rotate === -135,\n '-rotate-180': this.rotate === -180,\n '-rotate-225': this.rotate === -225,\n '-rotate-270': this.rotate === -270,\n '-rotate-315': this.rotate === -315,\n };\n\n return <Host class={styles} innerHTML={icon}></Host>;\n }\n}\n"],"version":3}
1
+ {"file":"icon.component.js","mappings":"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","names":[],"sources":["./src/utils/icons.ts","./src/components/atoms/icon/icon.component.scss?tag=p-icon","./src/components/atoms/icon/icon.component.tsx"],"sourcesContent":["import arrow from '../assets/icons/arrow.svg';\nimport attachment from '../assets/icons/attachment.svg';\nimport bread from '../assets/icons/bread.svg';\nimport calendar from '../assets/icons/calendar.svg';\nimport camera from '../assets/icons/camera.svg';\nimport car from '../assets/icons/car.svg';\nimport checklist from '../assets/icons/checklist.svg';\nimport checkmark from '../assets/icons/checkmark.svg';\nimport chevron from '../assets/icons/chevron.svg';\nimport clock from '../assets/icons/clock.svg';\nimport cogs from '../assets/icons/cogs.svg';\nimport comment from '../assets/icons/comment.svg';\nimport document from '../assets/icons/document.svg';\nimport download from '../assets/icons/download.svg';\nimport envelope from '../assets/icons/envelope.svg';\nimport explanation from '../assets/icons/explanation.svg';\nimport eye from '../assets/icons/eye.svg';\nimport filter from '../assets/icons/filter.svg';\nimport folder from '../assets/icons/folder.svg';\nimport grid from '../assets/icons/grid.svg';\nimport headset from '../assets/icons/headset.svg';\nimport integration from '../assets/icons/integration.svg';\nimport list from '../assets/icons/list.svg';\nimport location from '../assets/icons/location.svg';\nimport megaphone from '../assets/icons/megaphone.svg';\nimport menu from '../assets/icons/menu.svg';\nimport minus from '../assets/icons/minus.svg';\nimport more from '../assets/icons/more.svg';\nimport negative from '../assets/icons/negative.svg';\nimport notification from '../assets/icons/notification.svg';\nimport pagination from '../assets/icons/pagination.svg';\nimport payment from '../assets/icons/payment.svg';\nimport pencil from '../assets/icons/pencil.svg';\nimport person from '../assets/icons/person.svg';\nimport plus from '../assets/icons/plus.svg';\nimport question from '../assets/icons/question.svg';\nimport receipt from '../assets/icons/receipt.svg';\nimport reload from '../assets/icons/reload.svg';\nimport report from '../assets/icons/report.svg';\nimport search from '../assets/icons/search.svg';\nimport settings from '../assets/icons/settings.svg';\nimport sick from '../assets/icons/sick.svg';\nimport signout from '../assets/icons/signout.svg';\nimport switchIcon from '../assets/icons/switch.svg';\nimport tachometer from '../assets/icons/tachometer.svg';\nimport task from '../assets/icons/task.svg';\nimport template from '../assets/icons/template.svg';\nimport tool from '../assets/icons/tool.svg';\nimport trash from '../assets/icons/trash.svg';\nimport turn from '../assets/icons/turn.svg';\nimport upload from '../assets/icons/upload.svg';\nimport warning from '../assets/icons/warning.svg';\n\nexport default {\n arrow,\n attachment,\n bread,\n calendar,\n camera,\n car,\n checklist,\n checkmark,\n chevron,\n clock,\n cogs,\n comment,\n document,\n download,\n envelope,\n explanation,\n eye,\n filter,\n folder,\n grid,\n headset,\n integration,\n list,\n location,\n megaphone,\n menu,\n minus,\n more,\n negative,\n notification,\n pagination,\n payment,\n pencil,\n person,\n plus,\n question,\n reload,\n receipt,\n report,\n search,\n settings,\n sick,\n signout,\n switch: switchIcon,\n tachometer,\n task,\n template,\n tool,\n trash,\n turn,\n upload,\n warning,\n};\n",":host {\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions, TextSizeOptions } from '../../../types/tailwind';\nimport icons from '../../../utils/icons';\n\nexport type IconVariant = keyof typeof icons;\nexport type IconFlipOptions = 'horizontal' | 'vertical';\n\n@Component({\n tag: 'p-icon',\n styleUrl: 'icon.component.scss',\n // shadow: true,\n})\nexport class Icon {\n /**\n * The icon the be displayed\n */\n @Prop() variant!: IconVariant;\n\n /**\n * The size of the icon, using tailwind sizes\n */\n @Prop() size: TextSizeOptions = 'auto';\n\n /**\n * Wether to rotate the icon x degrees\n */\n @Prop() rotate: RotateOptions = 0;\n\n /**\n * Wether to flip the icon horizontally or vertically\n */\n @Prop() flip: IconFlipOptions = null;\n\n render() {\n const icon = icons[this.variant];\n\n const styles = {\n 'p-icon flex': true,\n 'text-auto': this.size === 'auto',\n 'text-xxs': this.size === 'xxs',\n 'text-xs': this.size === 'xs',\n 'text-sm': this.size === 'sm',\n 'text-base': this.size === 'base',\n 'text-lg': this.size === 'lg',\n 'text-xl': this.size === 'xl',\n 'text-2xl': this.size === '2xl',\n 'text-3xl': this.size === '3xl',\n 'text-4xl': this.size === '4xl',\n 'text-5xl': this.size === '5xl',\n 'text-6xl': this.size === '6xl',\n transform: !!this.rotate || !!this.flip,\n 'scale-x-flip': this.flip === 'horizontal',\n 'scale-y-flip': this.flip === 'vertical',\n 'rotate-0': this.rotate === 0,\n 'rotate-25': this.rotate === 25,\n 'rotate-45': this.rotate === 45,\n 'rotate-90': this.rotate === 90,\n 'rotate-135': this.rotate === 135,\n 'rotate-180': this.rotate === 180,\n 'rotate-225': this.rotate === 225,\n 'rotate-270': this.rotate === 270,\n 'rotate-315': this.rotate === 315,\n '-rotate-0': this.rotate === -0,\n '-rotate-25': this.rotate === -25,\n '-rotate-45': this.rotate === -45,\n '-rotate-90': this.rotate === -90,\n '-rotate-135': this.rotate === -135,\n '-rotate-180': this.rotate === -180,\n '-rotate-225': this.rotate === -225,\n '-rotate-270': this.rotate === -270,\n '-rotate-315': this.rotate === -315,\n };\n\n return <Host class={styles} innerHTML={icon}></Host>;\n }\n}\n"],"version":3}
package/dist/components/input-group.component.js CHANGED
@@ -32,10 +32,10 @@ const InputGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
32
32
  render() {
33
33
  var _a;
34
34
  const { hasHeaderSlot, helper, label, prefix, suffix, errorAndErrorIsNotBoolean, } = this._getSlotInfo();
35
- return (h(Host, { class: `p-input-group ${((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) && 'error'} ${this.disabled && 'disabled'} ${this.focused && 'focused'} size-${this.size}` }, h("div", { class: "flex items-end justify-between" }, label && (h("div", { class: "input-label" }, label, this.required && (h("span", { class: "text-negative" }, "*")))), (helper || hasHeaderSlot) && (h("div", { class: "input-header" }, hasHeaderSlot && h("slot", { name: "header" }), helper && (h("p-helper", { class: `flex ${hasHeaderSlot ? 'ml-2' : ''}`, placement: "top-end" }, helper))))), h("div", { class: "content" }, (prefix ||
36
- (this.icon && this.iconPosition === 'start')) && (h("div", { class: `prefix size-${this.size}` }, this.icon && this.iconPosition === 'start' ? (h("p-icon", { class: "flex", variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), (suffix ||
35
+ return (h(Host, { class: `p-input-group ${((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) && 'error'} ${this.disabled && 'disabled'} ${this.focused && 'focused'} size-${this.size}` }, h("div", { class: "flex items-end justify-between" }, label && (h("div", { class: "input-label", onClick: () => this._focusInput() }, label, this.required && (h("span", { class: "text-negative" }, "*")))), (helper || hasHeaderSlot) && (h("div", { class: "input-header" }, hasHeaderSlot && h("slot", { name: "header" }), helper && (h("p-helper", { class: `flex ${hasHeaderSlot ? 'ml-2' : ''}`, placement: "top-end" }, helper))))), h("div", { class: "content" }, (prefix ||
36
+ (this.icon && this.iconPosition === 'start')) && (h("div", { class: `prefix size-${this.size}`, onClick: () => this._focusInput() }, this.icon && this.iconPosition === 'start' ? (h("p-icon", { class: "flex", variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), (suffix ||
37
37
  errorAndErrorIsNotBoolean ||
38
- (this.icon && this.iconPosition === 'end')) && (h("div", { class: `suffix size-${this.size}` }, errorAndErrorIsNotBoolean ? (h("p-input-error", { error: this.error, forceShowTooltip: this._forceShowTooltip })) : this.icon && this.iconPosition === 'end' ? (h("p-icon", { class: "flex", variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (suffix))), h("slot", { name: "input" }))));
38
+ (this.icon && this.iconPosition === 'end')) && (h("div", { class: `suffix size-${this.size}`, onClick: () => this._focusInput() }, errorAndErrorIsNotBoolean ? (h("p-input-error", { error: this.error, forceShowTooltip: this._forceShowTooltip })) : this.icon && this.iconPosition === 'end' ? (h("p-icon", { class: "flex", variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (suffix))), h("slot", { name: "input" }))));
39
39
  }
40
40
  handleFocusIn() {
41
41
  this._forceShowTooltip = true;
@@ -95,6 +95,10 @@ const InputGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
95
95
  errorAndErrorIsNotBoolean,
96
96
  };
97
97
  }
98
+ _focusInput() {
99
+ const input = this._el.querySelector(':scope > [slot="input"]');
100
+ input.focus();
101
+ }
98
102
  get _el() { return this; }
99
103
  static get style() { return inputGroupComponentCss; }
100
104
  }, [1, "p-input-group", {
package/dist/components/input-group.component.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"input-group.component.js","mappings":"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","names":[],"sources":["./src/components/molecules/input-group/input-group.component.scss?tag=p-input-group&encapsulation=shadow","./src/components/molecules/input-group/input-group.component.tsx"],"sourcesContent":["@import '../../../style/form/mixins';\n\n@mixin slottedItems($prefix: false) {\n @include inputs($prefix, true) {\n @content;\n }\n}\n\n:host {\n @apply flex flex-col w-full;\n @apply outline-none #{!important};\n\n .input-label {\n @apply text-xs text-storm-vague font-semibold uppercase tracking-wider mb-[2px];\n }\n\n .input-header {\n @apply flex gap-2 items-end mb-[2px];\n }\n\n .content {\n @apply flex;\n\n .prefix,\n .suffix {\n @include inputDefaultState();\n @apply flex-1 text-storm box-border;\n }\n\n .prefix {\n @apply rounded-tr-none rounded-br-none;\n @apply border-r-0 #{!important};\n @apply order-1;\n @apply pr-2;\n }\n\n .suffix {\n @apply rounded-tl-none rounded-bl-none;\n @apply border-l-0 #{!important};\n @apply order-3;\n @apply pl-2;\n }\n\n @include slottedItems() {\n @include inputDefaultState();\n @apply order-2;\n }\n\n @include slottedItems('.prefix') {\n @apply rounded-tl-none rounded-bl-none #{!important};\n @apply flex-auto;\n @apply border-l-0 pl-0 #{!important};\n }\n\n @include slottedItems('.suffix') {\n @apply rounded-tr-none rounded-br-none #{!important};\n @apply flex-auto;\n @apply border-r-0 pr-0 #{!important};\n }\n }\n}\n\n:host(.focused),\n:host([focused]),\n:host(:focus-within),\n:host(:focus) {\n @apply outline-none #{!important};\n\n .prefix,\n .suffix {\n @include inputFocusState();\n @apply text-indigo;\n }\n\n @include slottedItems() {\n @include inputFocusState();\n }\n}\n\n:host(.error),\n:host([error]) {\n .prefix,\n .suffix {\n @include inputErrorState();\n @apply text-negative;\n }\n\n @include slottedItems() {\n @include inputErrorState();\n }\n}\n\n:host(.disabled),\n:host([disabled]) {\n .prefix,\n .suffix {\n @include inputDisabledState();\n }\n\n @include slottedItems() {\n @include inputDisabledState();\n pointer-events: none;\n }\n}\n\n:host(.size-small) {\n @include slottedItems() {\n @include inputSizeSmall();\n }\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n tag: 'p-input-group',\n styleUrl: './input-group.component.scss',\n shadow: true,\n})\nexport class InputGroup {\n /**\n * The size of the input group\n */\n @Prop() size: 'small' | 'medium' = 'medium';\n\n /**\n * The prefix of the input group\n */\n @Prop() prefix: string;\n\n /**\n * The suffix of the input group\n */\n @Prop() suffix: string;\n\n /**\n * Icon of the input group\n */\n @Prop() icon: IconVariant;\n\n /**\n * Icon flip\n */\n @Prop() iconFlip: IconFlipOptions;\n\n /**\n * Icon rotate\n */\n @Prop() iconRotate: RotateOptions;\n\n /**\n * Icon position\n */\n @Prop() iconPosition: 'start' | 'end' = 'start';\n\n /**\n * The label of the input group\n */\n @Prop() label: string;\n\n /**\n * The helper of the input group\n */\n @Prop() helper: string;\n\n /**\n * Wether the field is required\n */\n @Prop({ reflect: true }) required: boolean;\n\n /**\n * The helper of the input group\n */\n @Prop({ reflect: true }) error: string;\n\n /**\n * Wether the input group is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Wether the input group is focused\n */\n @Prop({ reflect: true }) focused: boolean = false;\n\n /**\n * The host element\n */\n @Element() private _el: HTMLElement;\n\n @State() private _forceShowTooltip = false;\n\n componentWillRender() {\n this._setInputClasses();\n }\n\n render() {\n const {\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n } = this._getSlotInfo();\n\n return (\n <Host\n class={`p-input-group ${this.error?.length && 'error'} ${\n this.disabled && 'disabled'\n } ${this.focused && 'focused'} size-${this.size}`}\n >\n <div class=\"flex items-end justify-between\">\n {label && (\n <div class=\"input-label\">\n {label}\n {this.required && (\n <span class=\"text-negative\">*</span>\n )}\n </div>\n )}\n\n {(helper || hasHeaderSlot) && (\n <div class=\"input-header\">\n {hasHeaderSlot && <slot name=\"header\" />}\n {helper && (\n <p-helper\n class={`flex ${\n hasHeaderSlot ? 'ml-2' : ''\n }`}\n placement=\"top-end\"\n >\n {helper}\n </p-helper>\n )}\n </div>\n )}\n </div>\n <div class=\"content\">\n {(prefix ||\n (this.icon && this.iconPosition === 'start')) && (\n <div class={`prefix size-${this.size}`}>\n {this.icon && this.iconPosition === 'start' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n prefix\n )}\n </div>\n )}\n {(suffix ||\n errorAndErrorIsNotBoolean ||\n (this.icon && this.iconPosition === 'end')) && (\n <div class={`suffix size-${this.size}`}>\n {errorAndErrorIsNotBoolean ? (\n <p-input-error\n error={this.error}\n forceShowTooltip={this._forceShowTooltip}\n />\n ) : this.icon && this.iconPosition === 'end' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n suffix\n )}\n </div>\n )}\n\n <slot name=\"input\" />\n </div>\n </Host>\n );\n }\n\n @Listen('focusin')\n handleFocusIn() {\n this._forceShowTooltip = true;\n }\n\n @Listen('focusout')\n handleFocusOut() {\n this._forceShowTooltip = false;\n }\n /* \n With this, we shall hack the system in ways no one would ever have thought.\n \n <div class=\"pl-0 pr-0 border-l-0 border-r-0 rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none\"></div>\n */\n private _setInputClasses() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n\n if (!input) {\n return;\n }\n\n if (!input.classList.contains('p-input')) {\n input.classList.add('p-input');\n }\n\n const { prefix, suffix, errorAndErrorIsNotBoolean } =\n this._getSlotInfo();\n\n if (\n suffix ||\n errorAndErrorIsNotBoolean ||\n (this.icon && this.iconPosition === 'end')\n ) {\n input.classList.add(\n 'border-r-0',\n 'rounded-tr-none',\n 'rounded-br-none',\n 'pr-0'\n );\n }\n\n if (prefix || (this.icon && this.iconPosition === 'start')) {\n input.classList.add(\n 'border-l-0',\n 'rounded-tl-none',\n 'rounded-bl-none',\n 'pl-0'\n );\n }\n\n if (this.size === 'small' && !input.classList.contains('size-small')) {\n input.classList.add('size-small');\n }\n }\n\n private _getSlotInfo() {\n const hasHelperSlot = !!this._el.querySelector(\n ':scope > [slot=\"helper\"]'\n );\n const hasLabelSlot = !!this._el.querySelector(\n ':scope > [slot=\"label\"]'\n );\n const hasPrefixSlot = !!this._el.querySelector(\n ':scope > [slot=\"prefix\"]'\n );\n const hasSuffixSlot = !!this._el.querySelector(\n ':scope > [slot=\"suffix\"]'\n );\n const hasHeaderSlot = !!this._el.querySelector(\n ':scope > [slot=\"header\"]'\n );\n\n const helper = hasHelperSlot ? <slot name=\"helper\" /> : this.helper;\n const label = hasLabelSlot ? <slot name=\"label\" /> : this.label;\n const prefix = hasPrefixSlot ? <slot name=\"prefix\" /> : this.prefix;\n const suffix = hasSuffixSlot ? <slot name=\"suffix\" /> : this.suffix;\n\n const errorAndErrorIsNotBoolean =\n this.error &&\n typeof this.error === 'string' &&\n this.error !== 'true';\n\n return {\n hasHelperSlot,\n hasLabelSlot,\n hasPrefixSlot,\n hasSuffixSlot,\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n };\n }\n}\n"],"version":3}
1
+ {"file":"input-group.component.js","mappings":"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","names":[],"sources":["./src/components/molecules/input-group/input-group.component.scss?tag=p-input-group&encapsulation=shadow","./src/components/molecules/input-group/input-group.component.tsx"],"sourcesContent":["@import '../../../style/form/mixins';\n\n@mixin slottedItems($prefix: false) {\n @include inputs($prefix, true) {\n @content;\n }\n}\n\n:host {\n @apply flex flex-col w-full;\n @apply outline-none #{!important};\n\n .input-label {\n @apply text-xs text-storm-vague font-semibold uppercase tracking-wider mb-[2px];\n }\n\n .input-header {\n @apply flex gap-2 items-end mb-[2px];\n }\n\n .content {\n @apply flex;\n\n .prefix,\n .suffix {\n @include inputDefaultState();\n @apply flex-1 text-storm box-border;\n }\n\n .prefix {\n @apply rounded-tr-none rounded-br-none;\n @apply border-r-0 #{!important};\n @apply order-1;\n @apply pr-2;\n }\n\n .suffix {\n @apply rounded-tl-none rounded-bl-none;\n @apply border-l-0 #{!important};\n @apply order-3;\n @apply pl-2;\n }\n\n @include slottedItems() {\n @include inputDefaultState();\n @apply order-2;\n }\n\n @include slottedItems('.prefix') {\n @apply rounded-tl-none rounded-bl-none #{!important};\n @apply flex-auto;\n @apply border-l-0 pl-0 #{!important};\n }\n\n @include slottedItems('.suffix') {\n @apply rounded-tr-none rounded-br-none #{!important};\n @apply flex-auto;\n @apply border-r-0 pr-0 #{!important};\n }\n }\n}\n\n:host(.focused),\n:host([focused]),\n:host(:focus-within),\n:host(:focus) {\n @apply outline-none #{!important};\n\n .prefix,\n .suffix {\n @include inputFocusState();\n @apply text-indigo;\n }\n\n @include slottedItems() {\n @include inputFocusState();\n }\n}\n\n:host(.error),\n:host([error]) {\n .prefix,\n .suffix {\n @include inputErrorState();\n @apply text-negative;\n }\n\n @include slottedItems() {\n @include inputErrorState();\n }\n}\n\n:host(.disabled),\n:host([disabled]) {\n .prefix,\n .suffix {\n @include inputDisabledState();\n }\n\n @include slottedItems() {\n @include inputDisabledState();\n pointer-events: none;\n }\n}\n\n:host(.size-small) {\n @include slottedItems() {\n @include inputSizeSmall();\n }\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n tag: 'p-input-group',\n styleUrl: './input-group.component.scss',\n shadow: true,\n})\nexport class InputGroup {\n /**\n * The size of the input group\n */\n @Prop() size: 'small' | 'medium' = 'medium';\n\n /**\n * The prefix of the input group\n */\n @Prop() prefix: string;\n\n /**\n * The suffix of the input group\n */\n @Prop() suffix: string;\n\n /**\n * Icon of the input group\n */\n @Prop() icon: IconVariant;\n\n /**\n * Icon flip\n */\n @Prop() iconFlip: IconFlipOptions;\n\n /**\n * Icon rotate\n */\n @Prop() iconRotate: RotateOptions;\n\n /**\n * Icon position\n */\n @Prop() iconPosition: 'start' | 'end' = 'start';\n\n /**\n * The label of the input group\n */\n @Prop() label: string;\n\n /**\n * The helper of the input group\n */\n @Prop() helper: string;\n\n /**\n * Wether the field is required\n */\n @Prop({ reflect: true }) required: boolean;\n\n /**\n * The helper of the input group\n */\n @Prop({ reflect: true }) error: string;\n\n /**\n * Wether the input group is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Wether the input group is focused\n */\n @Prop({ reflect: true }) focused: boolean = false;\n\n /**\n * The host element\n */\n @Element() private _el: HTMLElement;\n\n @State() private _forceShowTooltip = false;\n\n componentWillRender() {\n this._setInputClasses();\n }\n\n render() {\n const {\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n } = this._getSlotInfo();\n\n return (\n <Host\n class={`p-input-group ${this.error?.length && 'error'} ${\n this.disabled && 'disabled'\n } ${this.focused && 'focused'} size-${this.size}`}\n >\n <div class=\"flex items-end justify-between\">\n {label && (\n <div class=\"input-label\" onClick={() => this._focusInput()}>\n {label}\n {this.required && (\n <span class=\"text-negative\">*</span>\n )}\n </div>\n )}\n\n {(helper || hasHeaderSlot) && (\n <div class=\"input-header\">\n {hasHeaderSlot && <slot name=\"header\" />}\n {helper && (\n <p-helper\n class={`flex ${\n hasHeaderSlot ? 'ml-2' : ''\n }`}\n placement=\"top-end\"\n >\n {helper}\n </p-helper>\n )}\n </div>\n )}\n </div>\n <div class=\"content\">\n {(prefix ||\n (this.icon && this.iconPosition === 'start')) && (\n <div class={`prefix size-${this.size}`} onClick={() => this._focusInput()}>\n {this.icon && this.iconPosition === 'start' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n prefix\n )}\n </div>\n )}\n {(suffix ||\n errorAndErrorIsNotBoolean ||\n (this.icon && this.iconPosition === 'end')) && (\n <div class={`suffix size-${this.size}`} onClick={() => this._focusInput()}>\n {errorAndErrorIsNotBoolean ? (\n <p-input-error\n error={this.error}\n forceShowTooltip={this._forceShowTooltip}\n />\n ) : this.icon && this.iconPosition === 'end' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n suffix\n )}\n </div>\n )}\n\n <slot name=\"input\" />\n </div>\n </Host>\n );\n }\n\n @Listen('focusin')\n handleFocusIn() {\n this._forceShowTooltip = true;\n }\n\n @Listen('focusout')\n handleFocusOut() {\n this._forceShowTooltip = false;\n }\n /* \n With this, we shall hack the system in ways no one would ever have thought.\n \n <div class=\"pl-0 pr-0 border-l-0 border-r-0 rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none\"></div>\n */\n private _setInputClasses() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n\n if (!input) {\n return;\n }\n\n if (!input.classList.contains('p-input')) {\n input.classList.add('p-input');\n }\n\n const { prefix, suffix, errorAndErrorIsNotBoolean } =\n this._getSlotInfo();\n\n if (\n suffix ||\n errorAndErrorIsNotBoolean ||\n (this.icon && this.iconPosition === 'end')\n ) {\n input.classList.add(\n 'border-r-0',\n 'rounded-tr-none',\n 'rounded-br-none',\n 'pr-0'\n );\n }\n\n if (prefix || (this.icon && this.iconPosition === 'start')) {\n input.classList.add(\n 'border-l-0',\n 'rounded-tl-none',\n 'rounded-bl-none',\n 'pl-0'\n );\n }\n\n if (this.size === 'small' && !input.classList.contains('size-small')) {\n input.classList.add('size-small');\n }\n }\n\n private _getSlotInfo() {\n const hasHelperSlot = !!this._el.querySelector(\n ':scope > [slot=\"helper\"]'\n );\n const hasLabelSlot = !!this._el.querySelector(\n ':scope > [slot=\"label\"]'\n );\n const hasPrefixSlot = !!this._el.querySelector(\n ':scope > [slot=\"prefix\"]'\n );\n const hasSuffixSlot = !!this._el.querySelector(\n ':scope > [slot=\"suffix\"]'\n );\n const hasHeaderSlot = !!this._el.querySelector(\n ':scope > [slot=\"header\"]'\n );\n\n const helper = hasHelperSlot ? <slot name=\"helper\" /> : this.helper;\n const label = hasLabelSlot ? <slot name=\"label\" /> : this.label;\n const prefix = hasPrefixSlot ? <slot name=\"prefix\" /> : this.prefix;\n const suffix = hasSuffixSlot ? <slot name=\"suffix\" /> : this.suffix;\n\n const errorAndErrorIsNotBoolean =\n this.error &&\n typeof this.error === 'string' &&\n this.error !== 'true';\n\n return {\n hasHelperSlot,\n hasLabelSlot,\n hasPrefixSlot,\n hasSuffixSlot,\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n };\n }\n\n private _focusInput() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n (input as HTMLElement).focus();\n }\n}\n"],"version":3}
package/dist/components/loader.component.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- const loaderComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.top-0{top:0!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.mt-0{margin-top:0!important}.box-border{box-sizing:border-box!important}.block{display:block!important}.inline-block{display:inline-block!important}.inline{display:inline!important}.flex{display:flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.table-row{display:table-row!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-1{width:.25rem!important}.w-10{width:2.5rem!important}.w-11{width:2.75rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-7{width:1.75rem!important}.w-8{width:2rem!important}.w-9{width:2.25rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.self-center{align-self:center!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded{border-radius:.25rem!important}.rounded-large{border-radius:.375rem!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border{border-width:1px!important}.border-2{border-width:2px!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.border-solid{border-style:solid!important}.border-indigo-light{--tw-border-opacity:1!important;border-color:rgb(241 246 255/var(--tw-border-opacity))!important}.border-storm-light{--tw-border-opacity:1!important;border-color:rgb(176 178 203/var(--tw-border-opacity))!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.border-t-mystic-dark,.border-t-storm{--tw-border-opacity:1!important}.border-t-storm{border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}.border-t-white{--tw-border-opacity:1!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}.bg-mystic{background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.bg-mystic,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.text-center{text-align:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!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;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative,.text-negative-light{--tw-text-opacity:1!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm,.text-storm-dark{--tw-text-opacity:1!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.blur{--tw-blur:blur(8px)!important}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.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;height:-webkit-fill-available!important}.w-screen-safe{width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right))!important;width:-webkit-fill-available!important}*{box-sizing:border-box}.h-\\[1em\\]{height:1em!important}.w-\\[1em\\]{width:1em!important}.border-indigo-light\\/40{border-color:rgba(241,246,255,.4)!important}.border-storm-light\\/40{border-color:rgba(176,178,203,.4)!important}:host .loader{--tw-border-opacity:1;animation:spin .5s linear infinite;border-color:rgb(241 246 255/var(--tw-border-opacity));border-radius:100%;border-style:solid;border-width:medium 2px 2px;border-top:2px solid rgb(82 138 250/var(--tw-border-opacity));display:inline-block;height:1em;width:1em;will-change:transform}:host .loader.color-storm{--tw-border-opacity:1!important;border-color:rgba(176,178,203,.4)!important;border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}:host .loader.color-white{--tw-border-opacity:1!important;border-color:rgba(241,246,255,.4)!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}:host .loading-screen{--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity));display:flex;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:-webkit-fill-available;justify-content:center;left:0;position:fixed;top:0;width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));width:-webkit-fill-available;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.25rem;line-height:2.5rem}: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)}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.max-w-\\[20rem\\]{max-width:20rem!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.w-3\\/4{width:75%!important}@media (min-width:64rem){.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!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}";
3
+ const loaderComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.top-0{top:0!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.mt-0{margin-top:0!important}.box-border{box-sizing:border-box!important}.block{display:block!important}.inline-block{display:inline-block!important}.inline{display:inline!important}.flex{display:flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.table-row{display:table-row!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-1{width:.25rem!important}.w-10{width:2.5rem!important}.w-11{width:2.75rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-7{width:1.75rem!important}.w-8{width:2rem!important}.w-9{width:2.25rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.self-center{align-self:center!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded{border-radius:.25rem!important}.rounded-large{border-radius:.375rem!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border{border-width:1px!important}.border-2{border-width:2px!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.border-solid{border-style:solid!important}.border-indigo-light{--tw-border-opacity:1!important;border-color:rgb(241 246 255/var(--tw-border-opacity))!important}.border-storm-light{--tw-border-opacity:1!important;border-color:rgb(176 178 203/var(--tw-border-opacity))!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.border-t-mystic-dark,.border-t-storm{--tw-border-opacity:1!important}.border-t-storm{border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}.border-t-white{--tw-border-opacity:1!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}.bg-mystic{background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.bg-mystic,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.text-center{text-align:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!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;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative,.text-negative-light{--tw-text-opacity:1!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm,.text-storm-dark{--tw-text-opacity:1!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.blur{--tw-blur:blur(8px)!important}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.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;height:-webkit-fill-available!important}.w-screen-safe{width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right))!important;width:-webkit-fill-available!important}*{box-sizing:border-box}.h-\\[1em\\]{height:1em!important}.w-\\[1em\\]{width:1em!important}.border-indigo-light\\/40{border-color:rgba(241,246,255,.4)!important}.border-storm-light\\/40{border-color:rgba(176,178,203,.4)!important}:host .loader{--tw-border-opacity:1;animation:spin .5s linear infinite;border-color:rgb(241 246 255/var(--tw-border-opacity));border-radius:100%;border-style:solid;border-width:medium 2px 2px;border-top:2px solid rgb(82 138 250/var(--tw-border-opacity));display:inline-block;height:1em;width:1em;will-change:transform}:host .loader.color-storm{--tw-border-opacity:1!important;border-color:rgba(176,178,203,.4)!important;border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}:host .loader.color-white{--tw-border-opacity:1!important;border-color:rgba(241,246,255,.4)!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}:host .loading-screen{--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity));display:flex;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:-webkit-fill-available;justify-content:center;left:0;position:fixed;top:0;width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));width:-webkit-fill-available;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.25rem;line-height:2.5rem}: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)}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}}.max-w-\\[20rem\\]{max-width:20rem!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.w-3\\/4{width:75%!important}@media (min-width:64rem){.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!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}";
4
4
 
5
5
  const Loader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
package/dist/components/loader.component.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"loader.component.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,k6eAAk6e;;MCQh7e,MAAM;;;;;IA+BP,UAAK,GAAG,IAAI,CAAC,IAAI,CAAC;IAGlB,YAAO,IAAI,WAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,GAAQ,CAAC,CAAC;gBA9BvB,IAAI;mBAUlC,QAAQ;iBAKsB,QAAQ;;;;EAiBtD,mBAAmB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAED,qBAAqB;IACjB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAED,MAAM;IACF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;MAC1B,OAAO,EAAC,IAAI,IAAC,KAAK,EAAC,wBAAwB,GAAQ,CAAC;KACvD;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,aAAa,EAAE;MAChC,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,8BAA8B,IACtC,WAAK,KAAK,EAAC,gBAAgB,IACvB,WAAK,KAAK,EAAC,SAAS,IAChB,eAAQ,EAER,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,OAAO,CAAO,CAC9C,CACJ,CACH,EACT;KACL;IAED,QACI,EAAC,IAAI,IACD,KAAK,EAAE,iCACH,IAAI,CAAC,OAAO,KAAK,YAAY;QAC7B,qCACJ,EAAE,IAED,IAAI,CAAC,OAAO,CACV,EACT;GACL;EAEO,UAAU;;IACd,IAAI,IAAI,CAAC,eAAe,EAAE;MACtB,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;MACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC/B;IAED,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;MAChC,IAAI,CAAC,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,SAAS,CACvC,CAAC,IAAI,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAChC,CAAC;MACF,OAAO;KACV;IAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;GAC1B;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/loader/loader.component.scss?tag=p-loader&encapsulation=shadow","./src/components/atoms/loader/loader.component.tsx"],"sourcesContent":[":host {\n .loader {\n @apply inline-block h-[1em] w-[1em] rounded-round;\n @apply border-2 border-solid border-indigo-light border-t-indigo;\n animation: 500ms spin linear infinite;\n\n will-change: transform;\n\n &.color-storm {\n @apply border-storm-light/40 border-t-storm #{!important};\n }\n\n &.color-white {\n @apply border-indigo-light/40 border-t-white #{!important};\n }\n }\n\n .loading-screen {\n @apply w-screen-safe h-screen-safe fixed top-0 left-0;\n @apply flex items-center justify-center;\n @apply bg-mystic;\n\n z-index: 1001;\n\n .content {\n @apply max-w-xs;\n\n .loader-wrapper {\n @apply flex w-full justify-center;\n\n .loader {\n @apply text-4xl;\n }\n }\n }\n }\n}\n\n:host(.variant-ghost) {\n @apply box-border block;\n\n will-change: background, background-position-x, background-color;\n\n min-height: 1em;\n min-width: 1em;\n\n --loading-bg: #f7fafc;\n --loading-stripe: rgba(252, 253, 254, 1);\n\n background-color: var(--loading-bg);\n background: linear-gradient(\n 100deg,\n rgba(255, 255, 255, 0) 40%,\n var(--loading-stripe) 50%,\n rgba(255, 255, 255, 0) 60%\n )\n var(--loading-bg);\n background-size: 200% 100%;\n background-position-x: 180%;\n animation: 1s loading ease-in-out infinite;\n}\n\n@keyframes loading {\n to {\n background-position-x: -20%;\n }\n}\n\n@keyframes spin {\n 100% {\n transform: rotate(1turn);\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n tag: 'p-loader',\n styleUrl: 'loader.component.scss',\n shadow: true,\n})\nexport class Loader {\n /**\n * Wether to show or hide the loader\n */\n @Prop() show: boolean | Observable<boolean> = true;\n\n /**\n * Variant of loader\n */\n @Prop() variant:\n | 'inline'\n | 'full-width'\n | 'full-screen'\n | 'modal'\n | 'ghost' = 'inline';\n\n /**\n * Color of the loader\n */\n @Prop() color: 'indigo' | 'white' | 'storm' = 'indigo';\n\n /**\n * !NOT IMPLEMENTED! Modal title for modal variant\n */\n @Prop() modalTitle: string;\n\n /**\n * !NOT IMPLEMENTED! Modal description for modal variant\n */\n @Prop() modalDescription: string;\n\n private _show = this.show;\n private _showSubscriber: Subscription;\n\n private _loader = (<div class={`loader color-${this.color}`}></div>);\n\n componentWillRender() {\n this._checkShow();\n }\n\n componentShouldUpdate() {\n this._checkShow();\n }\n\n render() {\n if (!this._show) {\n return;\n }\n\n if (this.variant === 'ghost') {\n return <Host class=\"p-loader variant-ghost\"></Host>;\n }\n\n if (this.variant === 'full-screen') {\n return (\n <Host class=\"p-loader variant-full-screen\">\n <div class=\"loading-screen\">\n <div class=\"content\">\n <slot />\n\n <div class=\"loader-wrapper\">{this._loader}</div>\n </div>\n </div>\n </Host>\n );\n }\n\n return (\n <Host\n class={`p-loader variant-default flex ${\n this.variant === 'full-width' &&\n 'w-full flex justify-center text-4xl'\n }`}\n >\n {this._loader}\n </Host>\n );\n }\n\n private _checkShow() {\n if (this._showSubscriber) {\n this._showSubscriber.unsubscribe();\n this._showSubscriber = null;\n }\n\n if (typeof this.show !== 'boolean') {\n this._showSubscriber = this.show?.subscribe(\n (show) => (this._show = show)\n );\n return;\n }\n\n this._show = this.show;\n }\n}\n"],"version":3}
1
+ {"file":"loader.component.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,w4eAAw4e;;MCQt5e,MAAM;;;;;IA+BP,UAAK,GAAG,IAAI,CAAC,IAAI,CAAC;IAGlB,YAAO,IAAI,WAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,GAAQ,CAAC,CAAC;gBA9BvB,IAAI;mBAUlC,QAAQ;iBAKsB,QAAQ;;;;EAiBtD,mBAAmB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAED,qBAAqB;IACjB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAED,MAAM;IACF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;MAC1B,OAAO,EAAC,IAAI,IAAC,KAAK,EAAC,wBAAwB,GAAQ,CAAC;KACvD;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,aAAa,EAAE;MAChC,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,8BAA8B,IACtC,WAAK,KAAK,EAAC,gBAAgB,IACvB,WAAK,KAAK,EAAC,SAAS,IAChB,eAAQ,EAER,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,OAAO,CAAO,CAC9C,CACJ,CACH,EACT;KACL;IAED,QACI,EAAC,IAAI,IACD,KAAK,EAAE,iCACH,IAAI,CAAC,OAAO,KAAK,YAAY;QAC7B,qCACJ,EAAE,IAED,IAAI,CAAC,OAAO,CACV,EACT;GACL;EAEO,UAAU;;IACd,IAAI,IAAI,CAAC,eAAe,EAAE;MACtB,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;MACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC/B;IAED,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;MAChC,IAAI,CAAC,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,SAAS,CACvC,CAAC,IAAI,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAChC,CAAC;MACF,OAAO;KACV;IAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;GAC1B;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/loader/loader.component.scss?tag=p-loader&encapsulation=shadow","./src/components/atoms/loader/loader.component.tsx"],"sourcesContent":[":host {\n .loader {\n @apply inline-block h-[1em] w-[1em] rounded-round;\n @apply border-2 border-solid border-indigo-light border-t-indigo;\n animation: 500ms spin linear infinite;\n\n will-change: transform;\n\n &.color-storm {\n @apply border-storm-light/40 border-t-storm #{!important};\n }\n\n &.color-white {\n @apply border-indigo-light/40 border-t-white #{!important};\n }\n }\n\n .loading-screen {\n @apply w-screen-safe h-screen-safe fixed top-0 left-0;\n @apply flex items-center justify-center;\n @apply bg-mystic;\n\n z-index: 1001;\n\n .content {\n @apply max-w-xs;\n\n .loader-wrapper {\n @apply flex w-full justify-center;\n\n .loader {\n @apply text-4xl;\n }\n }\n }\n }\n}\n\n:host(.variant-ghost) {\n @apply box-border block;\n\n will-change: background, background-position-x, background-color;\n\n min-height: 1em;\n min-width: 1em;\n\n --loading-bg: #f7fafc;\n --loading-stripe: rgba(252, 253, 254, 1);\n\n background-color: var(--loading-bg);\n background: linear-gradient(\n 100deg,\n rgba(255, 255, 255, 0) 40%,\n var(--loading-stripe) 50%,\n rgba(255, 255, 255, 0) 60%\n )\n var(--loading-bg);\n background-size: 200% 100%;\n background-position-x: 180%;\n animation: 1s loading ease-in-out infinite;\n}\n\n@keyframes loading {\n to {\n background-position-x: -20%;\n }\n}\n\n@keyframes spin {\n 100% {\n transform: rotate(1turn);\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n tag: 'p-loader',\n styleUrl: 'loader.component.scss',\n shadow: true,\n})\nexport class Loader {\n /**\n * Wether to show or hide the loader\n */\n @Prop() show: boolean | Observable<boolean> = true;\n\n /**\n * Variant of loader\n */\n @Prop() variant:\n | 'inline'\n | 'full-width'\n | 'full-screen'\n | 'modal'\n | 'ghost' = 'inline';\n\n /**\n * Color of the loader\n */\n @Prop() color: 'indigo' | 'white' | 'storm' = 'indigo';\n\n /**\n * !NOT IMPLEMENTED! Modal title for modal variant\n */\n @Prop() modalTitle: string;\n\n /**\n * !NOT IMPLEMENTED! Modal description for modal variant\n */\n @Prop() modalDescription: string;\n\n private _show = this.show;\n private _showSubscriber: Subscription;\n\n private _loader = (<div class={`loader color-${this.color}`}></div>);\n\n componentWillRender() {\n this._checkShow();\n }\n\n componentShouldUpdate() {\n this._checkShow();\n }\n\n render() {\n if (!this._show) {\n return;\n }\n\n if (this.variant === 'ghost') {\n return <Host class=\"p-loader variant-ghost\"></Host>;\n }\n\n if (this.variant === 'full-screen') {\n return (\n <Host class=\"p-loader variant-full-screen\">\n <div class=\"loading-screen\">\n <div class=\"content\">\n <slot />\n\n <div class=\"loader-wrapper\">{this._loader}</div>\n </div>\n </div>\n </Host>\n );\n }\n\n return (\n <Host\n class={`p-loader variant-default flex ${\n this.variant === 'full-width' &&\n 'w-full flex justify-center text-4xl'\n }`}\n >\n {this._loader}\n </Host>\n );\n }\n\n private _checkShow() {\n if (this._showSubscriber) {\n this._showSubscriber.unsubscribe();\n this._showSubscriber = null;\n }\n\n if (typeof this.show !== 'boolean') {\n this._showSubscriber = this.show?.subscribe(\n (show) => (this._show = show)\n );\n return;\n }\n\n this._show = this.show;\n }\n}\n"],"version":3}
package/dist/components/p-modal.js CHANGED
@@ -53,18 +53,36 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
53
53
  this.close(ev);
54
54
  }
55
55
  close(ev) {
56
- console.log("[MODAL] close function");
56
+ console.log("[MODAL] close function", {
57
+ show: this.show,
58
+ closing: this._closing
59
+ });
57
60
  this.closeClicked.emit(ev);
58
- console.log("[MODAL] close clicked emitted");
61
+ console.log("[MODAL] close clicked emitted", {
62
+ show: this.show,
63
+ closing: this._closing
64
+ });
59
65
  this._closing = true;
60
- console.log("[MODAL] closing");
66
+ console.log("[MODAL] closing", {
67
+ show: this.show,
68
+ closing: this._closing
69
+ });
61
70
  setTimeout(() => {
62
- console.log("[MODAL] set timeout start");
71
+ console.log("[MODAL] set timeout start", {
72
+ show: this.show,
73
+ closing: this._closing
74
+ });
63
75
  this.show = false;
64
76
  this._closing = false;
65
- console.log("[MODAL] closing & show false");
77
+ console.log("[MODAL] closing & show false", {
78
+ show: this.show,
79
+ closing: this._closing
80
+ });
66
81
  this.closed.emit();
67
- console.log("[MODAL] closed emit");
82
+ console.log("[MODAL] closed emit", {
83
+ show: this.show,
84
+ closing: this._closing
85
+ });
68
86
  }, 550);
69
87
  }
70
88
  get _el() { return this; }
package/dist/components/p-modal.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"p-modal.js","mappings":"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","names":[],"sources":["./src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State\n} from '@stencil/core';\n\n@Component({\n tag: 'p-modal',\n shadow: true,\n})\nexport class Modal {\n /**\n * The size of the modal container\n */\n @Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n /**\n * The variant of the modal body\n */\n @Prop() variant: 'default' | 'table' = 'default';\n\n /**\n * The Header of the modal\n */\n @Prop() header?: string;\n\n /**\n * Wether to show the modal or not\n */\n @Prop() show: boolean = false;\n\n /**\n * Wether to apply blur to the backdrop\n */\n @Prop() applyBlur: boolean = false;\n\n /**\n * Wether to show the close button in the header\n */\n @Prop() showClose = true;\n\n /**\n * Wether to show the footer on mobile\n */\n @Prop() showMobileFooter = false;\n\n /**\n * Wether to hide the modal when the backdrop is clicked\n */\n @Prop() backdropClickClose = true;\n\n /**\n * Wether we should scroll lock the body\n */\n @Prop() scrollLock: boolean = true;\n\n /**\n * Close click event\n */\n @Event() closeClicked: EventEmitter<MouseEvent>;\n\n /**\n * Closed event\n */\n @Event() closed: EventEmitter<null>;\n\n /**\n * The host element\n */\n @Element() private _el: HTMLElement;\n\n private _hasFooterSlot = false;\n private _hasHeaderSlot = false;\n\n @State() private _closing = false;\n\n componentWillLoad() {\n this._hasFooterSlot = !!this._el.querySelector(\n ':scope > [slot=\"footer\"]'\n );\n this._hasHeaderSlot = !!this._el.querySelector(\n ':scope > [slot=\"header\"]'\n );\n }\n\n render() {\n if (!this.show) {\n return;\n }\n\n const headerContent = <slot name=\"header\" />;\n const bodyContent = <slot name=\"content\" />;\n const footerContent = <slot name=\"footer\" />;\n\n return (\n <Host class=\"p-modal\">\n <p-backdrop\n applyBlur={this.applyBlur}\n onClicked={(ev) => this._backdropClick(ev.detail)}\n closing={this._closing}\n scrollLock={this.scrollLock}\n >\n <p-modal-container size={this.size} closing={this._closing}>\n {(this.header?.length || this._hasHeaderSlot) && (\n <p-modal-header\n showClose={this.showClose}\n onClose={(ev) => this.close(ev.detail)}\n >\n {this._hasHeaderSlot\n ? headerContent\n : this.header}\n </p-modal-header>\n )}\n <p-modal-body\n variant={this.variant}\n rounded={!this._hasFooterSlot}\n >\n {bodyContent}\n </p-modal-body>\n {this._hasFooterSlot && (\n <p-modal-footer>{footerContent}</p-modal-footer>\n )}\n </p-modal-container>\n </p-backdrop>\n </Host>\n );\n }\n\n private _backdropClick(ev: MouseEvent) {\n if (!this.backdropClickClose) {\n return;\n }\n\n console.log(\"[MODAL] backdrop click\");\n this.close(ev);\n }\n\n public close(ev: MouseEvent) {\n console.log(\"[MODAL] close function\");\n this.closeClicked.emit(ev);\n\n console.log(\"[MODAL] close clicked emitted\");\n this._closing = true;\n\n console.log(\"[MODAL] closing\");\n setTimeout(() => {\n console.log(\"[MODAL] set timeout start\");\n this.show = false;\n this._closing = false;\n console.log(\"[MODAL] closing & show false\");\n this.closed.emit();\n console.log(\"[MODAL] closed emit\");\n }, 550);\n }\n}\n"],"version":3}
1
+ {"file":"p-modal.js","mappings":"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","names":[],"sources":["./src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State\n} from '@stencil/core';\n\n@Component({\n tag: 'p-modal',\n shadow: true,\n})\nexport class Modal {\n /**\n * The size of the modal container\n */\n @Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n /**\n * The variant of the modal body\n */\n @Prop() variant: 'default' | 'table' = 'default';\n\n /**\n * The Header of the modal\n */\n @Prop() header?: string;\n\n /**\n * Wether to show the modal or not\n */\n @Prop() show: boolean = false;\n\n /**\n * Wether to apply blur to the backdrop\n */\n @Prop() applyBlur: boolean = false;\n\n /**\n * Wether to show the close button in the header\n */\n @Prop() showClose = true;\n\n /**\n * Wether to show the footer on mobile\n */\n @Prop() showMobileFooter = false;\n\n /**\n * Wether to hide the modal when the backdrop is clicked\n */\n @Prop() backdropClickClose = true;\n\n /**\n * Wether we should scroll lock the body\n */\n @Prop() scrollLock: boolean = true;\n\n /**\n * Close click event\n */\n @Event() closeClicked: EventEmitter<MouseEvent>;\n\n /**\n * Closed event\n */\n @Event() closed: EventEmitter<null>;\n\n /**\n * The host element\n */\n @Element() private _el: HTMLElement;\n\n private _hasFooterSlot = false;\n private _hasHeaderSlot = false;\n\n @State() private _closing = false;\n\n componentWillLoad() {\n this._hasFooterSlot = !!this._el.querySelector(\n ':scope > [slot=\"footer\"]'\n );\n this._hasHeaderSlot = !!this._el.querySelector(\n ':scope > [slot=\"header\"]'\n );\n }\n\n render() {\n if (!this.show) {\n return;\n }\n\n const headerContent = <slot name=\"header\" />;\n const bodyContent = <slot name=\"content\" />;\n const footerContent = <slot name=\"footer\" />;\n\n return (\n <Host class=\"p-modal\">\n <p-backdrop\n applyBlur={this.applyBlur}\n onClicked={(ev) => this._backdropClick(ev.detail)}\n closing={this._closing}\n scrollLock={this.scrollLock}\n >\n <p-modal-container size={this.size} closing={this._closing}>\n {(this.header?.length || this._hasHeaderSlot) && (\n <p-modal-header\n showClose={this.showClose}\n onClose={(ev) => this.close(ev.detail)}\n >\n {this._hasHeaderSlot\n ? headerContent\n : this.header}\n </p-modal-header>\n )}\n <p-modal-body\n variant={this.variant}\n rounded={!this._hasFooterSlot}\n >\n {bodyContent}\n </p-modal-body>\n {this._hasFooterSlot && (\n <p-modal-footer>{footerContent}</p-modal-footer>\n )}\n </p-modal-container>\n </p-backdrop>\n </Host>\n );\n }\n\n private _backdropClick(ev: MouseEvent) {\n if (!this.backdropClickClose) {\n return;\n }\n\n console.log(\"[MODAL] backdrop click\");\n this.close(ev);\n }\n\n public close(ev: MouseEvent) {\n console.log(\"[MODAL] close function\", {\n show: this.show,\n closing: this._closing\n });\n this.closeClicked.emit(ev);\n\n console.log(\"[MODAL] close clicked emitted\", {\n show: this.show,\n closing: this._closing\n });\n this._closing = true;\n\n console.log(\"[MODAL] closing\", {\n show: this.show,\n closing: this._closing\n });\n setTimeout(() => {\n console.log(\"[MODAL] set timeout start\", {\n show: this.show,\n closing: this._closing\n });\n this.show = false;\n this._closing = false;\n console.log(\"[MODAL] closing & show false\", {\n show: this.show,\n closing: this._closing\n });\n this.closed.emit();\n console.log(\"[MODAL] closed emit\", {\n show: this.show,\n closing: this._closing\n });\n }, 550);\n }\n}\n"],"version":3}