@paperless/core 2.0.1-beta.2 → 2.0.1-beta.21

package/dist/esm/p-button_3.entry.js

@@ -1,357 +1,439 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-f99096d4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-2ef94580.js';
 import { c as cva } from './index-10317a74.js';
-import { i as icons } from './icons-cf12e4d2.js';
+import { i as icons } from './icons-a3270aaf.js';
 import './clsx-297c1ffe.js';
 
-const buttonComponentCss = "*{box-sizing:border-box}.static{position:static!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-10{width:2.5rem!important}.w-6{width:1.5rem!important}.w-8{width:2rem!important}.w-inherit{width:inherit!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.cursor-wait{cursor:wait!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-lg{border-radius:.5rem!important}.rounded-e-lg{border-end-end-radius:.5rem!important;border-start-end-radius:.5rem!important}.rounded-s-lg{border-end-start-radius:.5rem!important;border-start-start-radius:.5rem!important}.border{border-width:1px!important}.border-b{border-bottom-width:1px!important}.border-black-teal\\/10{border-color:rgba(3,42,36,.1)!important}.border-black-teal\\/20{border-color:rgba(3,42,36,.2)!important}.border-teal{border-color:rgb(8 136 121/var(--tw-border-opacity,1))!important}.border-teal,.border-teal-100{--tw-border-opacity:1!important}.border-teal-100{border-color:rgb(206 231 228/var(--tw-border-opacity,1))!important}.bg-supportive-lilac{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac-100{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.leading-4{line-height:1rem!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-black-teal-100{--tw-text-opacity:1!important;color:rgb(205 212 211/var(--tw-text-opacity,1))!important}.text-dark-teal-100{--tw-text-opacity:1!important;color:rgb(204 220 218/var(--tw-text-opacity,1))!important}.text-dark-teal-100\\/60{color:rgba(204,220,218,.6)!important}.text-teal{color:rgb(8 136 121/var(--tw-text-opacity,1))!important}.text-teal,.text-teal-100{--tw-text-opacity:1!important}.text-teal-100{color:rgb(206 231 228/var(--tw-text-opacity,1))!important}.underline{text-decoration-line:underline!important}.drop-shadow-1{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.drop-shadow-1,.drop-shadow-supportive-lilac{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.drop-shadow-supportive-lilac{--tw-drop-shadow:drop-shadow(0px 1px 1px 0px rgba(189,140,255,.2))!important}.hover\\:bg-dark-teal:hover{--tw-bg-opacity:1!important;background-color:rgb(0 81 72/var(--tw-bg-opacity,1))!important}.hover\\:bg-supportive-lilac-700:hover{--tw-bg-opacity:1!important;background-color:rgb(200 159 255/var(--tw-bg-opacity,1))!important}.hover\\:bg-white-600:hover{--tw-bg-opacity:1!important;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.hover\\:drop-shadow-1:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.hover\\:drop-shadow-1:hover,.hover\\:drop-shadow-2:hover{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.hover\\:drop-shadow-2:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.04)) drop-shadow(0 2px 2px rgba(0,2,2,.04)) drop-shadow(0 4px 4px rgba(0,2,2,.04))!important}.active\\:border-supportive-lilac-800:active{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.active\\:text-black-teal\\/60:active{color:rgba(3,42,36,.6)!important}.active\\:text-dark-teal-100\\/60:active{color:rgba(204,220,218,.6)!important}.active\\:text-teal-800:active{--tw-text-opacity:1!important;color:rgb(2 102 92/var(--tw-text-opacity,1))!important}.active\\:ring:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\\:ring-2:active,.active\\:ring:active{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.active\\:ring-2:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\\:ring-black-teal\\/10:active{--tw-ring-color:rgba(3,42,36,.1)!important}.active\\:ring-supportive-lilac-100:active{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}";
+const buttonComponentCss = "*{box-sizing:border-box}.static{position:static!important}.block{display:block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-10{width:2.5rem!important}.w-6{width:1.5rem!important}.w-8{width:2rem!important}.w-inherit{width:inherit!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.cursor-wait{cursor:wait!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-lg{border-radius:.5rem!important}.rounded-e-lg{border-end-end-radius:.5rem!important;border-start-end-radius:.5rem!important}.rounded-s-lg{border-end-start-radius:.5rem!important;border-start-start-radius:.5rem!important}.border{border-width:1px!important}.border-b{border-bottom-width:1px!important}.border-black-teal\\/10{border-color:rgba(3,42,36,.1)!important}.border-black-teal\\/20{border-color:rgba(3,42,36,.2)!important}.border-supportive-lilac-800{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.border-teal{border-color:rgb(8 136 121/var(--tw-border-opacity,1))!important}.border-teal,.border-teal-100{--tw-border-opacity:1!important}.border-teal-100{border-color:rgb(206 231 228/var(--tw-border-opacity,1))!important}.bg-supportive-lilac{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac-100{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.leading-4{line-height:1rem!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-black-teal-100{--tw-text-opacity:1!important;color:rgb(205 212 211/var(--tw-text-opacity,1))!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}.text-dark-teal-100{--tw-text-opacity:1!important;color:rgb(204 220 218/var(--tw-text-opacity,1))!important}.text-dark-teal-100\\/60{color:rgba(204,220,218,.6)!important}.text-dark-teal-200{--tw-text-opacity:1!important;color:rgb(153 185 182/var(--tw-text-opacity,1))!important}.text-teal{color:rgb(8 136 121/var(--tw-text-opacity,1))!important}.text-teal,.text-teal-100{--tw-text-opacity:1!important}.text-teal-100{color:rgb(206 231 228/var(--tw-text-opacity,1))!important}.text-teal-300{--tw-text-opacity:1!important;color:rgb(107 184 175/var(--tw-text-opacity,1))!important}.underline{text-decoration-line:underline!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring-black-teal\\/10{--tw-ring-color:rgba(3,42,36,.1)!important}.ring-supportive-lilac-100{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.drop-shadow-1{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.drop-shadow-1,.drop-shadow-supportive-lilac{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.drop-shadow-supportive-lilac{--tw-drop-shadow:drop-shadow(0px 1px 1px rgba(189,140,255,.2))!important}.hover\\:bg-dark-teal:hover{--tw-bg-opacity:1!important;background-color:rgb(0 81 72/var(--tw-bg-opacity,1))!important}.hover\\:bg-supportive-lilac-700:hover{--tw-bg-opacity:1!important;background-color:rgb(200 159 255/var(--tw-bg-opacity,1))!important}.hover\\:bg-white-600:hover{--tw-bg-opacity:1!important;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.hover\\:drop-shadow-1:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.hover\\:drop-shadow-1:hover,.hover\\:drop-shadow-2:hover{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.hover\\:drop-shadow-2:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.04)) drop-shadow(0 2px 2px rgba(0,2,2,.04)) drop-shadow(0 4px 4px rgba(0,2,2,.04))!important}.active\\:border-supportive-lilac-800:active{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.active\\:text-black-teal\\/60:active{color:rgba(3,42,36,.6)!important}.active\\:text-dark-teal-100\\/60:active{color:rgba(204,220,218,.6)!important}.active\\:text-teal-800:active{--tw-text-opacity:1!important;color:rgb(2 102 92/var(--tw-text-opacity,1))!important}.active\\:ring:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\\:ring-2:active,.active\\:ring:active{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.active\\:ring-2:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\\:ring-black-teal\\/10:active{--tw-ring-color:rgba(3,42,36,.1)!important}.active\\:ring-supportive-lilac-100:active{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.group:hover .group-hover\\:text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.group:hover .group-hover\\:text-dark-teal-100{--tw-text-opacity:1!important;color:rgb(204 220 218/var(--tw-text-opacity,1))!important}.group:hover .group-hover\\:text-teal{--tw-text-opacity:1!important;color:rgb(8 136 121/var(--tw-text-opacity,1))!important}";
+const PButtonStyle0 = buttonComponentCss;
 
 const button = cva([
-  'group',
-  'font-semibold leading-4',
-  'flex items-center justify-center gap-2',
-  'cursor-pointer',
+    'group',
+    'font-semibold leading-4',
+    'flex items-center justify-center gap-2',
+    'cursor-pointer',
 ], {
-  variants: {
-    variant: {
-      primary: ['bg-supportive-lilac border-black-teal/20'],
-      secondary: ['bg-white border-black-teal/10'],
-      text: ['text-teal'],
-      transparent: ['bg-transparent'],
-    },
-    active: {
-      true: null,
-      false: null,
-    },
-    loading: {
-      true: 'cursor-wait',
-      false: null,
-    },
-    size: {
-      sm: ['text-xs h-6'],
-      base: ['text-sm h-8'],
-      lg: ['text-base h-10'],
-    },
-    disabled: {
-      true: 'cursor-not-allowed',
-      false: null,
-    },
-    underline: {
-      true: null,
-      false: null,
-    },
-    buttonGroupPosition: {
-      none: null,
-      start: null,
-      center: null,
-      end: null,
-    },
-    iconOnly: {
-      true: 'justify-center',
-      false: 'w-inherit py-1',
-    },
-  },
-  compoundVariants: [
-    // variants
-    {
-      variant: ['primary', 'secondary'],
-      disabled: false,
-      class: 'border',
-    },
-    {
-      variant: ['primary', 'secondary'],
-      disabled: false,
-      loading: false,
-      class: 'active:border-supportive-lilac-800 active:ring active:ring-2 ',
-    },
-    {
-      variant: ['primary', 'secondary', 'transparent'],
-      buttonGroupPosition: 'none',
-      class: 'rounded-lg',
-    },
-    {
-      variant: ['primary', 'secondary', 'transparent'],
-      buttonGroupPosition: 'start',
-      class: 'rounded-s-lg',
-    },
-    {
-      variant: ['primary', 'secondary', 'transparent'],
-      buttonGroupPosition: 'end',
-      class: 'rounded-e-lg',
-    },
-    {
-      variant: ['primary', 'secondary'],
-      disabled: false,
-      class: 'text-black-teal',
-    },
-    {
-      variant: 'primary',
-      disabled: true,
-      class: 'bg-supportive-lilac-100 text-black-teal-100',
-    },
-    {
-      variant: 'primary',
-      disabled: false,
-      loading: false,
-      class: 'drop-shadow-supportive-lilac hover:drop-shadow-2 hover:bg-supportive-lilac-700 active:text-black-teal/60 active:ring-black-teal/10',
-    },
-    {
-      variant: 'secondary',
-      disabled: true,
-      class: 'border bg-white-600 text-black-teal-100',
-    },
-    {
-      variant: 'secondary',
-      disabled: false,
-      loading: false,
-      class: 'drop-shadow-1 hover:drop-shadow-1 hover:bg-white-600 active:text-black-teal/60 active:ring-supportive-lilac-100',
-    },
-    {
-      variant: 'text',
-      underline: true,
-      disabled: false,
-      class: 'border-b border-teal',
-    },
-    {
-      variant: 'text',
-      underline: true,
-      disabled: true,
-      class: 'border-b border-teal-100',
-    },
-    {
-      variant: 'text',
-      disabled: true,
-      class: 'text-teal-100',
-    },
-    {
-      variant: 'text',
-      disabled: false,
-      loading: false,
-      class: 'active:text-teal-800',
-    },
-    {
-      variant: 'transparent',
-      disabled: false,
-      class: 'text-dark-teal-100',
-    },
-    {
-      variant: 'transparent',
-      disabled: false,
-      loading: false,
-      class: 'hover:bg-dark-teal active:text-dark-teal-100/60',
-    },
-    {
-      variant: 'transparent',
-      disabled: true,
-      class: 'text-dark-teal-100/60',
-    },
-    {
-      variant: ['primary', 'secondary', 'transparent'],
-      size: ['base', 'sm'],
-      iconOnly: false,
-      class: 'px-2',
-    },
-    {
-      variant: ['primary', 'secondary', 'transparent'],
-      size: 'lg',
-      iconOnly: false,
-      class: 'px-3',
-    },
-    {
-      iconOnly: false,
-      class: 'py-1',
-    },
-    {
-      size: 'sm',
-      iconOnly: true,
-      class: 'w-6',
-    },
-    {
-      size: 'base',
-      iconOnly: true,
-      class: 'w-8',
-    },
-    {
-      size: 'lg',
-      iconOnly: true,
-      class: 'w-10',
-    },
-  ],
+    variants: {
+        variant: {
+            primary: ['bg-supportive-lilac border-black-teal/20'],
+            secondary: null,
+            text: ['text-teal'],
+            transparent: ['bg-transparent'],
+            dropdown: null,
+        },
+        active: {
+            true: null,
+            false: null,
+        },
+        loading: {
+            true: 'cursor-wait',
+            false: null,
+        },
+        size: {
+            sm: ['text-xs h-6'],
+            base: ['text-sm h-8'],
+            lg: ['text-base h-10'],
+        },
+        disabled: {
+            true: 'cursor-not-allowed',
+            false: null,
+        },
+        underline: {
+            true: null,
+            false: null,
+        },
+        buttonGroupPosition: {
+            none: null,
+            start: null,
+            center: null,
+            end: null,
+        },
+        iconOnly: {
+            true: 'justify-center',
+            false: 'w-inherit py-1',
+        },
+    },
+    compoundVariants: [
+        // variants
+        {
+            variant: ['secondary', 'dropdown'],
+            class: ['bg-white border-black-teal/10'],
+        },
+        {
+            variant: ['primary', 'secondary', 'dropdown'],
+            disabled: false,
+            class: 'border',
+        },
+        {
+            variant: ['primary', 'secondary', 'dropdown'],
+            disabled: false,
+            loading: false,
+            class: 'active:border-supportive-lilac-800 active:ring active:ring-2',
+        },
+        {
+            variant: ['primary', 'secondary', 'dropdown'],
+            disabled: false,
+            loading: false,
+            active: true,
+            class: 'border-supportive-lilac-800 ring ring-2',
+        },
+        {
+            variant: ['primary', 'secondary', 'transparent', 'dropdown'],
+            buttonGroupPosition: 'none',
+            class: 'rounded-lg',
+        },
+        {
+            variant: ['primary', 'secondary', 'transparent', 'dropdown'],
+            buttonGroupPosition: 'start',
+            class: 'rounded-s-lg',
+        },
+        {
+            variant: ['primary', 'secondary', 'transparent', 'dropdown'],
+            buttonGroupPosition: 'end',
+            class: 'rounded-e-lg',
+        },
+        {
+            variant: ['primary', 'secondary', 'dropdown'],
+            disabled: false,
+            class: 'text-black-teal',
+        },
+        {
+            variant: 'primary',
+            disabled: true,
+            class: 'bg-supportive-lilac-100 text-black-teal-100',
+        },
+        {
+            variant: 'primary',
+            disabled: false,
+            loading: false,
+            class: 'drop-shadow-supportive-lilac hover:drop-shadow-2 hover:bg-supportive-lilac-700 active:text-black-teal/60 active:ring-black-teal/10',
+        },
+        {
+            variant: 'primary',
+            disabled: false,
+            loading: false,
+            active: true,
+            class: 'ring-black-teal/10',
+        },
+        {
+            variant: ['secondary', 'dropdown'],
+            disabled: true,
+            class: 'border bg-white-600 text-black-teal-100',
+        },
+        {
+            variant: ['secondary', 'dropdown'],
+            disabled: false,
+            loading: false,
+            class: 'drop-shadow-1 hover:drop-shadow-1 hover:bg-white-600 active:text-black-teal/60 active:ring-supportive-lilac-100',
+        },
+        {
+            variant: ['secondary', 'dropdown'],
+            disabled: false,
+            loading: false,
+            active: true,
+            class: 'ring-supportive-lilac-100',
+        },
+        {
+            variant: 'text',
+            underline: true,
+            disabled: false,
+            class: 'border-b border-teal',
+        },
+        {
+            variant: 'text',
+            underline: true,
+            disabled: true,
+            class: 'border-b border-teal-100',
+        },
+        {
+            variant: 'text',
+            disabled: true,
+            class: 'text-teal-100',
+        },
+        {
+            variant: 'text',
+            disabled: false,
+            loading: false,
+            class: 'active:text-teal-800',
+        },
+        {
+            variant: 'transparent',
+            disabled: false,
+            class: 'text-dark-teal-100',
+        },
+        {
+            variant: 'transparent',
+            disabled: false,
+            loading: false,
+            class: 'hover:bg-dark-teal active:text-dark-teal-100/60',
+        },
+        {
+            variant: 'transparent',
+            disabled: true,
+            class: 'text-dark-teal-100/60',
+        },
+        {
+            variant: ['primary', 'secondary', 'transparent'],
+            size: ['base', 'sm'],
+            iconOnly: false,
+            class: 'px-2',
+        },
+        {
+            variant: ['primary', 'secondary', 'transparent'],
+            size: 'lg',
+            iconOnly: false,
+            class: 'px-3',
+        },
+        {
+            variant: 'dropdown',
+            iconOnly: false,
+            class: 'p-2',
+        },
+        {
+            variant: ['primary', 'secondary', 'transparent', 'text'],
+            iconOnly: false,
+            class: 'py-1',
+        },
+        {
+            size: 'sm',
+            iconOnly: true,
+            class: 'w-6',
+        },
+        {
+            size: 'base',
+            iconOnly: true,
+            class: 'w-8',
+        },
+        {
+            size: 'lg',
+            iconOnly: true,
+            class: 'w-10',
+        },
+    ],
 });
 const icon$1 = cva([], {
-  variants: {
-    size: {
-      sm: 'text-sm',
-      base: 'text-base',
-      lg: 'text-base',
-    },
-  },
+    variants: {
+        size: {
+            sm: 'text-sm',
+            base: 'text-base',
+            lg: 'text-base',
+        },
+        variant: {
+            primary: null,
+            secondary: null,
+            text: null,
+            transparent: null,
+            dropdown: null,
+        },
+        disabled: {
+            true: null,
+            false: null,
+        },
+        active: {
+            true: null,
+            false: null,
+        },
+    },
+    compoundVariants: [
+        {
+            variant: ['secondary', 'dropdown'],
+            disabled: false,
+            active: false,
+            class: 'text-black-teal-300 group-hover:text-black-teal',
+        },
+        {
+            variant: 'text',
+            disabled: false,
+            active: false,
+            class: 'text-teal-300 group-hover:text-teal',
+        },
+        {
+            variant: 'transparent',
+            disabled: false,
+            active: false,
+            class: 'text-dark-teal-200 group-hover:text-dark-teal-100',
+        },
+    ],
 });
 const Button = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.onClick = createEvent(this, "onClick", 3);
-    this.as = 'button';
-    this.variant = 'primary';
-    this.underline = true;
-    this.href = undefined;
-    this.target = undefined;
-    this.size = 'base';
-    this.type = 'button';
-    this.loading = false;
-    this.chevron = false;
-    this.chevronPosition = 'end';
-    this.disabled = false;
-    this.icon = undefined;
-    this.iconOnly = false;
-    this.iconPosition = 'end';
-    this.iconFlip = undefined;
-    this.iconRotate = undefined;
-    this.inheritText = false;
-    this.buttonGroupPosition = 'none';
-  }
-  render() {
-    var _a;
-    let loaderColor = 'white';
-    switch (this.variant) {
-      case 'secondary':
-        loaderColor = 'storm';
-        break;
-      case 'text':
-        loaderColor = 'indigo';
-        break;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onClick = createEvent(this, "onClick", 3);
+        this.as = 'button';
+        this.variant = 'primary';
+        this.active = false;
+        this.underline = true;
+        this.href = undefined;
+        this.target = undefined;
+        this.size = 'base';
+        this.type = 'button';
+        this.loading = false;
+        this.chevron = false;
+        this.chevronPosition = 'end';
+        this.disabled = false;
+        this.icon = undefined;
+        this.iconOnly = false;
+        this.iconPosition = 'end';
+        this.iconFlip = undefined;
+        this.iconRotate = undefined;
+        this.inheritText = false;
+        this.buttonGroupPosition = 'none';
+        this.class = undefined;
     }
-    const VariableTag = this.variant === 'text' || ((_a = this.href) === null || _a === void 0 ? void 0 : _a.length) || this.as === 'a'
-      ? 'a'
-      : 'button';
-    return (h(Host, { class: 'p-button inline-block' }, h(VariableTag, { disabled: this.disabled, href: this.href, type: this.variant !== 'text' ? this.type : undefined, target: this.target, class: button({
-        variant: this.variant,
-        size: this.size,
-        underline: this.underline,
-        loading: this.loading,
-        disabled: this.disabled,
-        buttonGroupPosition: this.buttonGroupPosition,
-        iconOnly: this.iconOnly,
-      }) }, this.chevron && this.chevronPosition === 'start' && (h("p-icon", { variant: 'caret', rotate: this.chevron === 'up' ? 180 : 0 })), this.icon &&
-      this.iconPosition === 'start' &&
-      !(this.iconOnly && this.loading) &&
-      this._getIcon(), h("slot", null), this.icon &&
-      this.iconPosition === 'end' &&
-      !this.loading &&
-      !this.chevron &&
-      this._getIcon(), this.chevron && !this.loading && this.chevronPosition === 'end' && (h("p-icon", { variant: 'caret', rotate: this.chevron === 'up' ? 180 : 0 })), this.loading && h("p-loader", { color: loaderColor }))));
-  }
-  handleClick(ev) {
-    if (this.loading || this.disabled) {
-      ev.preventDefault();
-      return;
+    /**
+     * Button click event
+     */
+    onClick;
+    render() {
+        let loaderColor = 'white';
+        switch (this.variant) {
+            case 'secondary':
+                loaderColor = 'storm';
+                break;
+            case 'text':
+                loaderColor = 'indigo';
+                break;
+        }
+        const VariableTag = this.variant === 'text' || this.href?.length || this.as === 'a'
+            ? 'a'
+            : 'button';
+        const active = this.active || this.class?.includes('active');
+        return (h(Host, { key: 'c528dd1f603ec9602af623f74ff422d1745f5f88', class: 'p-button block' }, h(VariableTag, { key: 'ed0b7309950f72321c0c355288afdaa3ffbe9a3c', disabled: this.disabled, href: this.href, type: this.variant !== 'text' ? this.type : undefined, target: this.target, class: button({
+                variant: this.variant,
+                size: this.size,
+                underline: this.underline,
+                loading: this.loading,
+                disabled: this.disabled,
+                buttonGroupPosition: this.buttonGroupPosition,
+                iconOnly: this.iconOnly,
+                active,
+            }) }, this.chevron && this.chevronPosition === 'start' && (h("p-icon", { key: '4f20df27c82f4b43f4b3d0ce1584571e0854c61d', variant: 'caret', rotate: this.chevron === 'up' ? 180 : 0 })), this.icon &&
+            this.iconPosition === 'start' &&
+            !(this.iconOnly && this.loading) &&
+            this._getIcon(), h("slot", { key: 'ce4ed96beafa7bebb83e8f8346350e56a27fc8e3' }), this.icon &&
+            this.iconPosition === 'end' &&
+            !this.loading &&
+            !this.chevron &&
+            this._getIcon(), this.chevron && !this.loading && this.chevronPosition === 'end' && (h("p-icon", { key: '1f2613670560b7ce499df4d08dddb011c92971a7', variant: 'caret', rotate: this.chevron === 'up' ? 180 : 0 })), this.loading && h("p-loader", { key: '282534a7fb06fa16769cdb6dbd736564f8d41beb', color: loaderColor }))));
     }
-    this.onClick.emit(ev);
-  }
-  _getIcon() {
-    if (!this.icon) {
-      return;
+    handleClick(ev) {
+        if (this.loading || this.disabled) {
+            ev.preventDefault();
+            return;
+        }
+        this.onClick.emit(ev);
+    }
+    _getIcon() {
+        if (!this.icon) {
+            return;
+        }
+        return (h("p-icon", { class: icon$1({
+                size: this.size,
+                variant: this.variant,
+                disabled: this.disabled,
+                active: this.active,
+            }), variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
     }
-    return (h("p-icon", { class: icon$1({
-        size: this.size,
-      }), variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
-  }
 };
-Button.style = buttonComponentCss;
+Button.style = PButtonStyle0;
 
 const iconComponentCss = "*{box-sizing:border-box}:host{-webkit-transform-origin:50% 51%}.static{position:static!important}.flex{display:flex!important}.scale-\\[0\\.99\\]{--tw-scale-x:0.99!important;--tw-scale-y:0.99!important}.scale-\\[0\\.99\\],.scale-x-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-y-flip{--tw-scale-y:-1!important}.scale-y-flip,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:2rem!important;line-height:2.5rem!important}.text-4xl{font-size:2.5rem!important;line-height:3rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important}.text-xs,.text-xxs{line-height:1rem!important}.text-xxs{font-size:.5rem!important}";
+const PIconStyle0 = iconComponentCss;
 
 const icon = cva(['p-icon flex'], {
-  variants: {
-    flip: {
-      none: null,
-      horizontal: 'scale-x-flip',
-      vertical: 'scale-y-flip',
-    },
-    size: {
-      auto: 'text-auto',
-      xxs: 'text-xxs',
-      xs: 'text-xs',
-      sm: 'text-sm',
-      base: 'text-base',
-      lg: 'text-lg',
-      xl: 'text-xl',
-      '2xl': 'text-2xl',
-      '3xl': 'text-3xl',
-      '4xl': 'text-4xl',
+    variants: {
+        flip: {
+            none: null,
+            horizontal: 'scale-x-flip',
+            vertical: 'scale-y-flip',
+        },
+        size: {
+            auto: 'text-auto',
+            xxs: 'text-xxs',
+            xs: 'text-xs',
+            sm: 'text-sm',
+            base: 'text-base',
+            lg: 'text-lg',
+            xl: 'text-xl',
+            '2xl': 'text-2xl',
+            '3xl': 'text-3xl',
+            '4xl': 'text-4xl',
+        },
+        transform: {
+            true: 'transform-gpu scale-[0.99]',
+            false: null,
+        },
     },
-    transform: {
-      true: 'transform-gpu scale-[0.99]',
-      false: null,
-    },
-  },
 });
 const Icon = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.variant = undefined;
-    this.size = 'auto';
-    this.rotate = 0;
-    this.flip = 'none';
-  }
-  render() {
-    const svg = icons[this.variant];
-    return (h(Host, { class: icon({
-        flip: this.flip,
-        size: this.size,
-        transform: this.flip !== 'none' || this.rotate > 0 || this.rotate < 0,
-      }), style: {
-        '--tw-rotate': `${this.rotate}deg`,
-      }, innerHTML: svg }));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.variant = undefined;
+        this.size = 'base';
+        this.rotate = 0;
+        this.flip = 'none';
+    }
+    render() {
+        const svg = icons[this.variant];
+        return (h(Host, { key: 'bf9559d3ea263753b66321c184077ee7163ec27b', class: icon({
+                flip: this.flip,
+                size: this.size,
+                transform: this.flip !== 'none' || this.rotate > 0 || this.rotate < 0,
+            }), style: {
+                '--tw-rotate': `${this.rotate}deg`,
+            }, innerHTML: svg }));
+    }
 };
-Icon.style = iconComponentCss;
+Icon.style = PIconStyle0;
 
 const loaderComponentCss = ".fixed{position:fixed!important}.top-0{top:0!important}.box-border{box-sizing:border-box!important}.block{display:block!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-\\[1em\\]{height:1em!important}.w-\\[1em\\]{width:1em!important}.w-full{width:100%!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-center{align-items:center!important}.border-2{border-width:2px!important}.border-solid{border-style:solid!important}.border-indigo-light{--tw-border-opacity:1!important;border-color:rgb(241 246 255/var(--tw-border-opacity,1))!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}.border-t-storm{--tw-border-opacity:1!important;border-top-color:rgb(81 83 107/var(--tw-border-opacity,1))!important}.border-t-white{--tw-border-opacity:1!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity,1))!important}.ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)!important;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}.w-screen-safe{width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right))!important}*{box-sizing:border-box}:host .loader{--tw-border-opacity:1;animation:spin .5s linear infinite;border-color:rgb(241 246 255/var(--tw-border-opacity,1));border-radius:9999px;border-style:solid;border-top:solid rgb(82 138 250/var(--tw-border-opacity,1));border-width:2px;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,1))!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,1))!important}:host .loading-screen{--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity,1));display:flex;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));justify-content:center;left:0;position:fixed;top:0;width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));z-index:1001}:host .loading-screen .content{max-width:20rem}:host .loading-screen .content .loader-wrapper{display:flex;justify-content:center;width:100%}:host .loading-screen .content .loader-wrapper .loader{font-size:2.5rem;line-height:3rem}:host(.variant-ghost){--loading-bg:#f7fafc;--loading-stripe:#fcfdfe;animation:loading 1s ease-in-out infinite;background-color:var(--loading-bg);background:linear-gradient(100deg,hsla(0,0%,100%,0) 40%,var(--loading-stripe) 50%,hsla(0,0%,100%,0) 60%) var(--loading-bg);background-position-x:180%;background-size:200% 100%;box-sizing:border-box;display:block;min-height:1em;min-width:1em;will-change:background,background-position-x,background-color}@keyframes loading{to{background-position-x:-20%}}@keyframes spin{to{transform:rotate(1turn)}}.static{position:static!important}.inline{display:inline!important}.justify-center{justify-content:center!important}.text-4xl{font-size:2.5rem!important;line-height:3rem!important}";
+const PLoaderStyle0 = loaderComponentCss;
 
 const Loader = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this._show = this.show;
-    this._loader = (h("div", { class: `loader color-${this.color}` }));
-    this.show = true;
-    this.variant = 'inline';
-    this.color = 'indigo';
-    this.modalTitle = undefined;
-    this.modalDescription = undefined;
-  }
-  componentWillRender() {
-    this._checkShow();
-  }
-  componentShouldUpdate() {
-    this._checkShow();
-  }
-  render() {
-    if (!this._show) {
-      return;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.show = true;
+        this.variant = 'inline';
+        this.color = 'indigo';
+        this.modalTitle = undefined;
+        this.modalDescription = undefined;
+    }
+    _show = false;
+    _showSubscriber;
+    componendDidLoad() {
+        this._show = this.show;
     }
-    if (this.variant === 'ghost') {
-      return h(Host, { class: "p-loader variant-ghost" });
+    componentWillRender() {
+        this._checkShow();
     }
-    if (this.variant === 'full-screen') {
-      return (h(Host, { class: "p-loader variant-full-screen" }, h("div", { class: "loading-screen" }, h("div", { class: "content" }, h("slot", null), h("div", { class: "loader-wrapper" }, this._loader)))));
+    componentShouldUpdate() {
+        this._checkShow();
     }
-    return (h(Host, { class: `p-loader variant-default flex ${this.variant === 'full-width' &&
-        'w-full flex justify-center text-4xl'}` }, this._loader));
-  }
-  _checkShow() {
-    var _a;
-    if (this._showSubscriber) {
-      this._showSubscriber.unsubscribe();
-      this._showSubscriber = null;
+    render() {
+        if (!this._show) {
+            return;
+        }
+        if (this.variant === 'ghost') {
+            return h(Host, { class: 'p-loader variant-ghost' });
+        }
+        const loader = h("div", { class: `loader color-${this.color}` });
+        if (this.variant === 'full-screen') {
+            return (h(Host, { class: 'p-loader variant-full-screen' }, h("div", { class: 'loading-screen' }, h("div", { class: 'content' }, h("slot", null), h("div", { class: 'loader-wrapper' }, loader)))));
+        }
+        return (h(Host, { class: `p-loader variant-default flex ${this.variant === 'full-width' && 'flex w-full justify-center text-4xl'}` }, loader));
     }
-    if (typeof this.show !== 'boolean') {
-      this._showSubscriber = (_a = this.show) === null || _a === void 0 ? void 0 : _a.subscribe((show) => (this._show = show));
-      return;
+    _checkShow() {
+        if (this._showSubscriber) {
+            this._showSubscriber.unsubscribe();
+            this._showSubscriber = null;
+        }
+        if (typeof this.show !== 'boolean') {
+            this._showSubscriber = this.show?.subscribe(show => (this._show = show));
+            return;
+        }
+        this._show = this.show;
     }
-    this._show = this.show;
-  }
 };
-Loader.style = loaderComponentCss;
+Loader.style = PLoaderStyle0;
 
 export { Button as p_button, Icon as p_icon, Loader as p_loader };