@bcc-code/component-library-vue 0.0.0-dev.b82d660 → 0.0.0-dev.e513497

package/dist/theme.css

@@ -1,5 +1,6 @@
 /* Layer order: Tailwind base/utilities first, then PrimeVue so component styles win */
 @layer theme, base, tailwind, primevue;
+@import "@bcc-code/design-tokens/css";
 
 @import "tailwindcss";
 @import "@bcc-code/design-tokens/tailwind";
@@ -648,7 +649,8 @@
 
 /* Capitalize first letter */
 @utility capital {
-    display: inline-block;
+    @apply inline-block;
+
     &::first-letter {
         text-transform: uppercase;
     }
@@ -684,16 +686,16 @@
 @utility ctx-blue-bolder {
   --ctx-text: var(--color-default-blue-200);
   --ctx-text-bold: var(--color-default-blue-100);
-  --ctx-background: var(--color-default-blue-800);
-  --ctx-gradient: var(--color-default-blue-700);
+  --ctx-background: var(--color-default-blue-700);
+  --ctx-gradient: var(--color-default-blue-800);
   --ctx-border: var(--color-default-blue-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-blue-200);
   --ctx-text-pressed: var(--color-default-blue-200);
-  --ctx-background-hover: var(--color-default-blue-700);
-  --ctx-background-pressed: var(--color-default-blue-600);
-  --ctx-gradient-hover: var(--color-default-blue-600);
-  --ctx-gradient-pressed: var(--color-default-blue-600);
+  --ctx-background-hover: var(--color-default-blue-800);
+  --ctx-background-pressed: var(--color-default-blue-900);
+  --ctx-gradient-hover: var(--color-default-blue-900);
+  --ctx-gradient-pressed: var(--color-default-blue-900);
   --ctx-border-hover: var(--color-default-blue-700);
   --ctx-border-pressed: var(--color-default-blue-700);
 }
@@ -701,16 +703,16 @@
 @utility ctx-blue-subtle {
   --ctx-text: var(--color-default-blue-900);
   --ctx-text-bold: var(--color-default-blue-1000);
-  --ctx-background: var(--color-default-blue-300);
-  --ctx-gradient: var(--color-default-blue-400);
+  --ctx-background: var(--color-default-blue-400);
+  --ctx-gradient: var(--color-default-blue-300);
   --ctx-border: var(--color-default-blue-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-blue-900);
   --ctx-text-pressed: var(--color-default-blue-900);
-  --ctx-background-hover: var(--color-default-blue-400);
-  --ctx-background-pressed: var(--color-default-blue-500);
-  --ctx-gradient-hover: var(--color-default-blue-500);
-  --ctx-gradient-pressed: var(--color-default-blue-500);
+  --ctx-background-hover: var(--color-default-blue-300);
+  --ctx-background-pressed: var(--color-default-blue-200);
+  --ctx-gradient-hover: var(--color-default-blue-200);
+  --ctx-gradient-pressed: var(--color-default-blue-200);
   --ctx-border-hover: var(--color-default-blue-500);
   --ctx-border-pressed: var(--color-default-blue-500);
 }
@@ -752,16 +754,16 @@
 @utility ctx-brand-bold {
   --ctx-text: var(--color-default-bcc-200);
   --ctx-text-bold: var(--color-default-neutral-100);
-  --ctx-background: var(--color-default-bcc-800);
+  --ctx-background: var(--color-default-bcc-600);
   --ctx-gradient: var(--color-default-bcc-700);
   --ctx-border: var(--color-default-bcc-600);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-bcc-200);
   --ctx-text-pressed: var(--color-default-bcc-200);
   --ctx-background-hover: var(--color-default-bcc-700);
-  --ctx-background-pressed: var(--color-default-bcc-600);
-  --ctx-gradient-hover: var(--color-default-bcc-600);
-  --ctx-gradient-pressed: var(--color-default-bcc-600);
+  --ctx-background-pressed: var(--color-default-bcc-800);
+  --ctx-gradient-hover: var(--color-default-bcc-800);
+  --ctx-gradient-pressed: var(--color-default-bcc-800);
   --ctx-border-hover: var(--color-default-bcc-600);
   --ctx-border-pressed: var(--color-default-bcc-600);
 }
@@ -769,16 +771,16 @@
 @utility ctx-brand-bolder {
   --ctx-text: var(--color-default-bcc-100);
   --ctx-text-bold: var(--color-default-neutral-0);
-  --ctx-background: var(--color-default-bcc-900);
+  --ctx-background: var(--color-default-bcc-700);
   --ctx-gradient: var(--color-default-bcc-800);
   --ctx-border: var(--color-default-bcc-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-bcc-100);
   --ctx-text-pressed: var(--color-default-bcc-100);
   --ctx-background-hover: var(--color-default-bcc-800);
-  --ctx-background-pressed: var(--color-default-bcc-700);
-  --ctx-gradient-hover: var(--color-default-bcc-700);
-  --ctx-gradient-pressed: var(--color-default-bcc-700);
+  --ctx-background-pressed: var(--color-default-bcc-900);
+  --ctx-gradient-hover: var(--color-default-bcc-900);
+  --ctx-gradient-pressed: var(--color-default-bcc-900);
   --ctx-border-hover: var(--color-default-bcc-700);
   --ctx-border-pressed: var(--color-default-bcc-700);
 }
@@ -818,31 +820,31 @@
 }
 
 @utility ctx-brand-subtle {
-  --ctx-text: var(--color-default-neutral-900);
-  --ctx-text-bold: var(--color-default-bcc-1000);
-  --ctx-background: var(--color-default-bcc-300);
-  --ctx-gradient: var(--color-default-bcc-400);
+  --ctx-text: var(--color-default-bcc-1000);
+  --ctx-text-bold: var(--color-default-bcc-900);
+  --ctx-background: var(--color-default-bcc-400);
+  --ctx-gradient: var(--color-default-bcc-300);
   --ctx-border: var(--color-default-bcc-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
-  --ctx-text-hover: var(--color-default-neutral-900);
-  --ctx-text-pressed: var(--color-default-neutral-900);
-  --ctx-background-hover: var(--color-default-bcc-400);
-  --ctx-background-pressed: var(--color-default-bcc-500);
-  --ctx-gradient-hover: var(--color-default-bcc-500);
-  --ctx-gradient-pressed: var(--color-default-bcc-500);
+  --ctx-text-hover: var(--color-default-bcc-1000);
+  --ctx-text-pressed: var(--color-default-bcc-1000);
+  --ctx-background-hover: var(--color-default-bcc-300);
+  --ctx-background-pressed: var(--color-default-bcc-200);
+  --ctx-gradient-hover: var(--color-default-bcc-200);
+  --ctx-gradient-pressed: var(--color-default-bcc-200);
   --ctx-border-hover: var(--color-default-bcc-500);
   --ctx-border-pressed: var(--color-default-bcc-500);
 }
 
 @utility ctx-brand-subtler {
-  --ctx-text: var(--color-default-neutral-800);
-  --ctx-text-bold: var(--color-default-bcc-900);
+  --ctx-text: var(--color-default-bcc-900);
+  --ctx-text-bold: var(--color-default-bcc-800);
   --ctx-background: var(--color-default-bcc-200);
   --ctx-gradient: var(--color-default-bcc-300);
   --ctx-border: var(--color-default-bcc-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
-  --ctx-text-hover: var(--color-default-neutral-800);
-  --ctx-text-pressed: var(--color-default-neutral-800);
+  --ctx-text-hover: var(--color-default-bcc-900);
+  --ctx-text-pressed: var(--color-default-bcc-900);
   --ctx-background-hover: var(--color-default-bcc-300);
   --ctx-background-pressed: var(--color-default-bcc-400);
   --ctx-gradient-hover: var(--color-default-bcc-400);
@@ -852,14 +854,14 @@
 }
 
 @utility ctx-brand-subtlest {
-  --ctx-text: var(--color-default-neutral-900);
-  --ctx-text-bold: var(--color-default-bcc-1000);
+  --ctx-text: var(--color-default-bcc-800);
+  --ctx-text-bold: var(--color-default-bcc-700);
   --ctx-background: var(--color-default-bcc-100);
   --ctx-gradient: var(--color-default-bcc-200);
   --ctx-border: var(--color-default-bcc-300);
   --ctx-shadow: var(--color-neutral-alpha-500A);
-  --ctx-text-hover: var(--color-default-neutral-900);
-  --ctx-text-pressed: var(--color-default-neutral-900);
+  --ctx-text-hover: var(--color-default-bcc-800);
+  --ctx-text-pressed: var(--color-default-bcc-800);
   --ctx-background-hover: var(--color-default-bcc-200);
   --ctx-background-pressed: var(--color-default-bcc-300);
   --ctx-gradient-hover: var(--color-default-bcc-300);
@@ -871,16 +873,16 @@
 @utility ctx-brown-bolder {
   --ctx-text: var(--color-default-brown-200);
   --ctx-text-bold: var(--color-default-brown-100);
-  --ctx-background: var(--color-default-brown-800);
-  --ctx-gradient: var(--color-default-brown-700);
+  --ctx-background: var(--color-default-brown-700);
+  --ctx-gradient: var(--color-default-brown-800);
   --ctx-border: var(--color-default-brown-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-brown-200);
   --ctx-text-pressed: var(--color-default-brown-200);
-  --ctx-background-hover: var(--color-default-brown-700);
-  --ctx-background-pressed: var(--color-default-brown-600);
-  --ctx-gradient-hover: var(--color-default-brown-600);
-  --ctx-gradient-pressed: var(--color-default-brown-600);
+  --ctx-background-hover: var(--color-default-brown-800);
+  --ctx-background-pressed: var(--color-default-brown-900);
+  --ctx-gradient-hover: var(--color-default-brown-900);
+  --ctx-gradient-pressed: var(--color-default-brown-900);
   --ctx-border-hover: var(--color-default-brown-700);
   --ctx-border-pressed: var(--color-default-brown-700);
 }
@@ -888,16 +890,16 @@
 @utility ctx-brown-subtle {
   --ctx-text: var(--color-default-brown-900);
   --ctx-text-bold: var(--color-default-brown-1000);
-  --ctx-background: var(--color-default-brown-300);
-  --ctx-gradient: var(--color-default-brown-400);
+  --ctx-background: var(--color-default-brown-400);
+  --ctx-gradient: var(--color-default-brown-300);
   --ctx-border: var(--color-default-brown-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-brown-900);
   --ctx-text-pressed: var(--color-default-brown-900);
-  --ctx-background-hover: var(--color-default-brown-400);
-  --ctx-background-pressed: var(--color-default-brown-500);
-  --ctx-gradient-hover: var(--color-default-brown-500);
-  --ctx-gradient-pressed: var(--color-default-brown-500);
+  --ctx-background-hover: var(--color-default-brown-300);
+  --ctx-background-pressed: var(--color-default-brown-200);
+  --ctx-gradient-hover: var(--color-default-brown-200);
+  --ctx-gradient-pressed: var(--color-default-brown-200);
   --ctx-border-hover: var(--color-default-brown-500);
   --ctx-border-pressed: var(--color-default-brown-500);
 }
@@ -937,18 +939,18 @@
 }
 
 @utility ctx-danger-bolder {
-  --ctx-text: var(--color-default-neutral-100);
-  --ctx-text-bold: var(--color-default-neutral-0);
-  --ctx-background: var(--color-default-red-800);
-  --ctx-gradient: var(--color-default-red-700);
+  --ctx-text: var(--color-default-red-200);
+  --ctx-text-bold: var(--color-default-red-100);
+  --ctx-background: var(--color-default-red-700);
+  --ctx-gradient: var(--color-default-red-800);
   --ctx-border: var(--color-default-red-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
-  --ctx-text-hover: var(--color-default-neutral-100);
-  --ctx-text-pressed: var(--color-default-neutral-100);
-  --ctx-background-hover: var(--color-default-red-700);
-  --ctx-background-pressed: var(--color-default-red-600);
-  --ctx-gradient-hover: var(--color-default-red-600);
-  --ctx-gradient-pressed: var(--color-default-red-600);
+  --ctx-text-hover: var(--color-default-red-200);
+  --ctx-text-pressed: var(--color-default-red-200);
+  --ctx-background-hover: var(--color-default-red-800);
+  --ctx-background-pressed: var(--color-default-red-900);
+  --ctx-gradient-hover: var(--color-default-red-900);
+  --ctx-gradient-pressed: var(--color-default-red-900);
   --ctx-border-hover: var(--color-default-red-700);
   --ctx-border-pressed: var(--color-default-red-700);
 }
@@ -990,16 +992,16 @@
 @utility ctx-gray-subtle {
   --ctx-text: var(--color-default-neutral-900);
   --ctx-text-bold: var(--color-default-neutral-1000);
-  --ctx-background: var(--color-default-neutral-300);
-  --ctx-gradient: var(--color-default-neutral-400);
+  --ctx-background: var(--color-default-neutral-400);
+  --ctx-gradient: var(--color-default-neutral-300);
   --ctx-border: var(--color-default-neutral-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-900);
   --ctx-text-pressed: var(--color-default-neutral-900);
-  --ctx-background-hover: var(--color-default-neutral-400);
-  --ctx-background-pressed: var(--color-default-neutral-500);
-  --ctx-gradient-hover: var(--color-default-neutral-500);
-  --ctx-gradient-pressed: var(--color-default-neutral-500);
+  --ctx-background-hover: var(--color-default-neutral-300);
+  --ctx-background-pressed: var(--color-default-neutral-200);
+  --ctx-gradient-hover: var(--color-default-neutral-200);
+  --ctx-gradient-pressed: var(--color-default-neutral-200);
   --ctx-border-hover: var(--color-default-neutral-500);
   --ctx-border-pressed: var(--color-default-neutral-500);
 }
@@ -1041,16 +1043,16 @@
 @utility ctx-green-bolder {
   --ctx-text: var(--color-default-green-200);
   --ctx-text-bold: var(--color-default-green-100);
-  --ctx-background: var(--color-default-green-800);
-  --ctx-gradient: var(--color-default-green-700);
+  --ctx-background: var(--color-default-green-700);
+  --ctx-gradient: var(--color-default-green-800);
   --ctx-border: var(--color-default-green-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-green-200);
   --ctx-text-pressed: var(--color-default-green-200);
-  --ctx-background-hover: var(--color-default-green-700);
-  --ctx-background-pressed: var(--color-default-green-600);
-  --ctx-gradient-hover: var(--color-default-green-600);
-  --ctx-gradient-pressed: var(--color-default-green-600);
+  --ctx-background-hover: var(--color-default-green-800);
+  --ctx-background-pressed: var(--color-default-green-900);
+  --ctx-gradient-hover: var(--color-default-green-900);
+  --ctx-gradient-pressed: var(--color-default-green-900);
   --ctx-border-hover: var(--color-default-green-700);
   --ctx-border-pressed: var(--color-default-green-700);
 }
@@ -1058,16 +1060,16 @@
 @utility ctx-green-subtle {
   --ctx-text: var(--color-default-green-900);
   --ctx-text-bold: var(--color-default-green-1000);
-  --ctx-background: var(--color-default-green-300);
-  --ctx-gradient: var(--color-default-green-400);
+  --ctx-background: var(--color-default-green-400);
+  --ctx-gradient: var(--color-default-green-300);
   --ctx-border: var(--color-default-green-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-green-900);
   --ctx-text-pressed: var(--color-default-green-900);
-  --ctx-background-hover: var(--color-default-green-400);
-  --ctx-background-pressed: var(--color-default-green-500);
-  --ctx-gradient-hover: var(--color-default-green-500);
-  --ctx-gradient-pressed: var(--color-default-green-500);
+  --ctx-background-hover: var(--color-default-green-300);
+  --ctx-background-pressed: var(--color-default-green-200);
+  --ctx-gradient-hover: var(--color-default-green-200);
+  --ctx-gradient-pressed: var(--color-default-green-200);
   --ctx-border-hover: var(--color-default-green-500);
   --ctx-border-pressed: var(--color-default-green-500);
 }
@@ -1107,18 +1109,18 @@
 }
 
 @utility ctx-info-bolder {
-  --ctx-text: var(--color-default-neutral-100);
-  --ctx-text-bold: var(--color-default-neutral-0);
-  --ctx-background: var(--color-default-blue-800);
-  --ctx-gradient: var(--color-default-blue-700);
+  --ctx-text: var(--color-default-blue-200);
+  --ctx-text-bold: var(--color-default-blue-100);
+  --ctx-background: var(--color-default-blue-700);
+  --ctx-gradient: var(--color-default-blue-800);
   --ctx-border: var(--color-default-blue-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
-  --ctx-text-hover: var(--color-default-neutral-100);
-  --ctx-text-pressed: var(--color-default-neutral-100);
-  --ctx-background-hover: var(--color-default-blue-700);
-  --ctx-background-pressed: var(--color-default-blue-600);
-  --ctx-gradient-hover: var(--color-default-blue-600);
-  --ctx-gradient-pressed: var(--color-default-blue-600);
+  --ctx-text-hover: var(--color-default-blue-200);
+  --ctx-text-pressed: var(--color-default-blue-200);
+  --ctx-background-hover: var(--color-default-blue-800);
+  --ctx-background-pressed: var(--color-default-blue-900);
+  --ctx-gradient-hover: var(--color-default-blue-900);
+  --ctx-gradient-pressed: var(--color-default-blue-900);
   --ctx-border-hover: var(--color-default-blue-700);
   --ctx-border-pressed: var(--color-default-blue-700);
 }
@@ -1143,16 +1145,16 @@
 @utility ctx-magenta-bolder {
   --ctx-text: var(--color-default-magenta-200);
   --ctx-text-bold: var(--color-default-magenta-100);
-  --ctx-background: var(--color-default-magenta-800);
-  --ctx-gradient: var(--color-default-magenta-700);
+  --ctx-background: var(--color-default-magenta-700);
+  --ctx-gradient: var(--color-default-magenta-800);
   --ctx-border: var(--color-default-magenta-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-magenta-200);
   --ctx-text-pressed: var(--color-default-magenta-200);
-  --ctx-background-hover: var(--color-default-magenta-700);
-  --ctx-background-pressed: var(--color-default-magenta-600);
-  --ctx-gradient-hover: var(--color-default-magenta-600);
-  --ctx-gradient-pressed: var(--color-default-magenta-600);
+  --ctx-background-hover: var(--color-default-magenta-800);
+  --ctx-background-pressed: var(--color-default-magenta-900);
+  --ctx-gradient-hover: var(--color-default-magenta-900);
+  --ctx-gradient-pressed: var(--color-default-magenta-900);
   --ctx-border-hover: var(--color-default-magenta-700);
   --ctx-border-pressed: var(--color-default-magenta-700);
 }
@@ -1160,16 +1162,16 @@
 @utility ctx-magenta-subtle {
   --ctx-text: var(--color-default-magenta-900);
   --ctx-text-bold: var(--color-default-magenta-1000);
-  --ctx-background: var(--color-default-magenta-300);
-  --ctx-gradient: var(--color-default-magenta-400);
+  --ctx-background: var(--color-default-magenta-400);
+  --ctx-gradient: var(--color-default-magenta-300);
   --ctx-border: var(--color-default-magenta-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-magenta-900);
   --ctx-text-pressed: var(--color-default-magenta-900);
-  --ctx-background-hover: var(--color-default-magenta-400);
-  --ctx-background-pressed: var(--color-default-magenta-500);
-  --ctx-gradient-hover: var(--color-default-magenta-500);
-  --ctx-gradient-pressed: var(--color-default-magenta-500);
+  --ctx-background-hover: var(--color-default-magenta-300);
+  --ctx-background-pressed: var(--color-default-magenta-200);
+  --ctx-gradient-hover: var(--color-default-magenta-200);
+  --ctx-gradient-pressed: var(--color-default-magenta-200);
   --ctx-border-hover: var(--color-default-magenta-500);
   --ctx-border-pressed: var(--color-default-magenta-500);
 }
@@ -1313,16 +1315,16 @@
 @utility ctx-orange-bolder {
   --ctx-text: var(--color-default-orange-200);
   --ctx-text-bold: var(--color-default-orange-100);
-  --ctx-background: var(--color-default-orange-800);
-  --ctx-gradient: var(--color-default-orange-700);
+  --ctx-background: var(--color-default-orange-700);
+  --ctx-gradient: var(--color-default-orange-800);
   --ctx-border: var(--color-default-orange-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-orange-200);
   --ctx-text-pressed: var(--color-default-orange-200);
-  --ctx-background-hover: var(--color-default-orange-700);
-  --ctx-background-pressed: var(--color-default-orange-600);
-  --ctx-gradient-hover: var(--color-default-orange-600);
-  --ctx-gradient-pressed: var(--color-default-orange-600);
+  --ctx-background-hover: var(--color-default-orange-800);
+  --ctx-background-pressed: var(--color-default-orange-900);
+  --ctx-gradient-hover: var(--color-default-orange-900);
+  --ctx-gradient-pressed: var(--color-default-orange-900);
   --ctx-border-hover: var(--color-default-orange-700);
   --ctx-border-pressed: var(--color-default-orange-700);
 }
@@ -1330,16 +1332,16 @@
 @utility ctx-orange-subtle {
   --ctx-text: var(--color-default-orange-900);
   --ctx-text-bold: var(--color-default-orange-1000);
-  --ctx-background: var(--color-default-orange-300);
-  --ctx-gradient: var(--color-default-orange-400);
+  --ctx-background: var(--color-default-orange-400);
+  --ctx-gradient: var(--color-default-orange-300);
   --ctx-border: var(--color-default-orange-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-orange-900);
   --ctx-text-pressed: var(--color-default-orange-900);
-  --ctx-background-hover: var(--color-default-orange-400);
-  --ctx-background-pressed: var(--color-default-orange-500);
-  --ctx-gradient-hover: var(--color-default-orange-500);
-  --ctx-gradient-pressed: var(--color-default-orange-500);
+  --ctx-background-hover: var(--color-default-orange-300);
+  --ctx-background-pressed: var(--color-default-orange-200);
+  --ctx-gradient-hover: var(--color-default-orange-200);
+  --ctx-gradient-pressed: var(--color-default-orange-200);
   --ctx-border-hover: var(--color-default-orange-500);
   --ctx-border-pressed: var(--color-default-orange-500);
 }
@@ -1381,16 +1383,16 @@
 @utility ctx-purple-bolder {
   --ctx-text: var(--color-default-purple-200);
   --ctx-text-bold: var(--color-default-purple-100);
-  --ctx-background: var(--color-default-purple-800);
-  --ctx-gradient: var(--color-default-purple-700);
+  --ctx-background: var(--color-default-purple-700);
+  --ctx-gradient: var(--color-default-purple-800);
   --ctx-border: var(--color-default-purple-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-purple-200);
   --ctx-text-pressed: var(--color-default-purple-200);
-  --ctx-background-hover: var(--color-default-purple-700);
-  --ctx-background-pressed: var(--color-default-purple-600);
-  --ctx-gradient-hover: var(--color-default-purple-600);
-  --ctx-gradient-pressed: var(--color-default-purple-600);
+  --ctx-background-hover: var(--color-default-purple-800);
+  --ctx-background-pressed: var(--color-default-purple-900);
+  --ctx-gradient-hover: var(--color-default-purple-900);
+  --ctx-gradient-pressed: var(--color-default-purple-900);
   --ctx-border-hover: var(--color-default-purple-700);
   --ctx-border-pressed: var(--color-default-purple-700);
 }
@@ -1398,16 +1400,16 @@
 @utility ctx-purple-subtle {
   --ctx-text: var(--color-default-purple-900);
   --ctx-text-bold: var(--color-default-purple-1000);
-  --ctx-background: var(--color-default-purple-300);
-  --ctx-gradient: var(--color-default-purple-400);
+  --ctx-background: var(--color-default-purple-400);
+  --ctx-gradient: var(--color-default-purple-300);
   --ctx-border: var(--color-default-purple-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-purple-900);
   --ctx-text-pressed: var(--color-default-purple-900);
-  --ctx-background-hover: var(--color-default-purple-400);
-  --ctx-background-pressed: var(--color-default-purple-500);
-  --ctx-gradient-hover: var(--color-default-purple-500);
-  --ctx-gradient-pressed: var(--color-default-purple-500);
+  --ctx-background-hover: var(--color-default-purple-300);
+  --ctx-background-pressed: var(--color-default-purple-200);
+  --ctx-gradient-hover: var(--color-default-purple-200);
+  --ctx-gradient-pressed: var(--color-default-purple-200);
   --ctx-border-hover: var(--color-default-purple-500);
   --ctx-border-pressed: var(--color-default-purple-500);
 }
@@ -1449,16 +1451,16 @@
 @utility ctx-red-bolder {
   --ctx-text: var(--color-default-red-200);
   --ctx-text-bold: var(--color-default-red-100);
-  --ctx-background: var(--color-default-red-800);
-  --ctx-gradient: var(--color-default-red-700);
+  --ctx-background: var(--color-default-red-700);
+  --ctx-gradient: var(--color-default-red-800);
   --ctx-border: var(--color-default-red-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-red-200);
   --ctx-text-pressed: var(--color-default-red-200);
-  --ctx-background-hover: var(--color-default-red-700);
-  --ctx-background-pressed: var(--color-default-red-600);
-  --ctx-gradient-hover: var(--color-default-red-600);
-  --ctx-gradient-pressed: var(--color-default-red-600);
+  --ctx-background-hover: var(--color-default-red-800);
+  --ctx-background-pressed: var(--color-default-red-900);
+  --ctx-gradient-hover: var(--color-default-red-900);
+  --ctx-gradient-pressed: var(--color-default-red-900);
   --ctx-border-hover: var(--color-default-red-700);
   --ctx-border-pressed: var(--color-default-red-700);
 }
@@ -1466,16 +1468,16 @@
 @utility ctx-red-subtle {
   --ctx-text: var(--color-default-red-900);
   --ctx-text-bold: var(--color-default-red-1000);
-  --ctx-background: var(--color-default-red-300);
-  --ctx-gradient: var(--color-default-red-400);
+  --ctx-background: var(--color-default-red-400);
+  --ctx-gradient: var(--color-default-red-300);
   --ctx-border: var(--color-default-red-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-red-900);
   --ctx-text-pressed: var(--color-default-red-900);
-  --ctx-background-hover: var(--color-default-red-400);
-  --ctx-background-pressed: var(--color-default-red-500);
-  --ctx-gradient-hover: var(--color-default-red-500);
-  --ctx-gradient-pressed: var(--color-default-red-500);
+  --ctx-background-hover: var(--color-default-red-300);
+  --ctx-background-pressed: var(--color-default-red-200);
+  --ctx-gradient-hover: var(--color-default-red-200);
+  --ctx-gradient-pressed: var(--color-default-red-200);
   --ctx-border-hover: var(--color-default-red-500);
   --ctx-border-pressed: var(--color-default-red-500);
 }
@@ -1515,18 +1517,18 @@
 }
 
 @utility ctx-success-bolder {
-  --ctx-text: var(--color-default-neutral-100);
-  --ctx-text-bold: var(--color-default-neutral-0);
-  --ctx-background: var(--color-default-green-800);
-  --ctx-gradient: var(--color-default-green-700);
+  --ctx-text: var(--color-default-green-200);
+  --ctx-text-bold: var(--color-default-green-100);
+  --ctx-background: var(--color-default-green-700);
+  --ctx-gradient: var(--color-default-green-800);
   --ctx-border: var(--color-default-green-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
-  --ctx-text-hover: var(--color-default-neutral-100);
-  --ctx-text-pressed: var(--color-default-neutral-100);
-  --ctx-background-hover: var(--color-default-green-700);
-  --ctx-background-pressed: var(--color-default-green-600);
-  --ctx-gradient-hover: var(--color-default-green-600);
-  --ctx-gradient-pressed: var(--color-default-green-600);
+  --ctx-text-hover: var(--color-default-green-200);
+  --ctx-text-pressed: var(--color-default-green-200);
+  --ctx-background-hover: var(--color-default-green-800);
+  --ctx-background-pressed: var(--color-default-green-900);
+  --ctx-gradient-hover: var(--color-default-green-900);
+  --ctx-gradient-pressed: var(--color-default-green-900);
   --ctx-border-hover: var(--color-default-green-700);
   --ctx-border-pressed: var(--color-default-green-700);
 }
@@ -1551,16 +1553,16 @@
 @utility ctx-teal-bolder {
   --ctx-text: var(--color-default-teal-200);
   --ctx-text-bold: var(--color-default-teal-100);
-  --ctx-background: var(--color-default-teal-800);
-  --ctx-gradient: var(--color-default-teal-700);
+  --ctx-background: var(--color-default-teal-700);
+  --ctx-gradient: var(--color-default-teal-800);
   --ctx-border: var(--color-default-teal-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-teal-200);
   --ctx-text-pressed: var(--color-default-teal-200);
-  --ctx-background-hover: var(--color-default-teal-700);
-  --ctx-background-pressed: var(--color-default-teal-600);
-  --ctx-gradient-hover: var(--color-default-teal-600);
-  --ctx-gradient-pressed: var(--color-default-teal-600);
+  --ctx-background-hover: var(--color-default-teal-800);
+  --ctx-background-pressed: var(--color-default-teal-900);
+  --ctx-gradient-hover: var(--color-default-teal-900);
+  --ctx-gradient-pressed: var(--color-default-teal-900);
   --ctx-border-hover: var(--color-default-teal-700);
   --ctx-border-pressed: var(--color-default-teal-700);
 }
@@ -1568,16 +1570,16 @@
 @utility ctx-teal-subtle {
   --ctx-text: var(--color-default-teal-900);
   --ctx-text-bold: var(--color-default-teal-1000);
-  --ctx-background: var(--color-default-teal-300);
-  --ctx-gradient: var(--color-default-teal-400);
+  --ctx-background: var(--color-default-teal-400);
+  --ctx-gradient: var(--color-default-teal-300);
   --ctx-border: var(--color-default-teal-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-teal-900);
   --ctx-text-pressed: var(--color-default-teal-900);
-  --ctx-background-hover: var(--color-default-teal-400);
-  --ctx-background-pressed: var(--color-default-teal-500);
-  --ctx-gradient-hover: var(--color-default-teal-500);
-  --ctx-gradient-pressed: var(--color-default-teal-500);
+  --ctx-background-hover: var(--color-default-teal-300);
+  --ctx-background-pressed: var(--color-default-teal-200);
+  --ctx-gradient-hover: var(--color-default-teal-200);
+  --ctx-gradient-pressed: var(--color-default-teal-200);
   --ctx-border-hover: var(--color-default-teal-500);
   --ctx-border-pressed: var(--color-default-teal-500);
 }
@@ -1617,18 +1619,18 @@
 }
 
 @utility ctx-warning-bolder {
-  --ctx-text: var(--color-default-neutral-100);
-  --ctx-text-bold: var(--color-default-neutral-0);
-  --ctx-background: var(--color-default-yellow-800);
-  --ctx-gradient: var(--color-default-yellow-700);
+  --ctx-text: var(--color-default-yellow-200);
+  --ctx-text-bold: var(--color-default-yellow-100);
+  --ctx-background: var(--color-default-yellow-700);
+  --ctx-gradient: var(--color-default-yellow-800);
   --ctx-border: var(--color-default-yellow-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
-  --ctx-text-hover: var(--color-default-neutral-100);
-  --ctx-text-pressed: var(--color-default-neutral-100);
-  --ctx-background-hover: var(--color-default-yellow-700);
-  --ctx-background-pressed: var(--color-default-yellow-600);
-  --ctx-gradient-hover: var(--color-default-yellow-600);
-  --ctx-gradient-pressed: var(--color-default-yellow-600);
+  --ctx-text-hover: var(--color-default-yellow-200);
+  --ctx-text-pressed: var(--color-default-yellow-200);
+  --ctx-background-hover: var(--color-default-yellow-800);
+  --ctx-background-pressed: var(--color-default-yellow-900);
+  --ctx-gradient-hover: var(--color-default-yellow-900);
+  --ctx-gradient-pressed: var(--color-default-yellow-900);
   --ctx-border-hover: var(--color-default-yellow-700);
   --ctx-border-pressed: var(--color-default-yellow-700);
 }
@@ -1653,16 +1655,16 @@
 @utility ctx-yellow-bolder {
   --ctx-text: var(--color-default-yellow-200);
   --ctx-text-bold: var(--color-default-yellow-100);
-  --ctx-background: var(--color-default-yellow-800);
-  --ctx-gradient: var(--color-default-yellow-700);
+  --ctx-background: var(--color-default-yellow-700);
+  --ctx-gradient: var(--color-default-yellow-800);
   --ctx-border: var(--color-default-yellow-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-yellow-200);
   --ctx-text-pressed: var(--color-default-yellow-200);
-  --ctx-background-hover: var(--color-default-yellow-700);
-  --ctx-background-pressed: var(--color-default-yellow-600);
-  --ctx-gradient-hover: var(--color-default-yellow-600);
-  --ctx-gradient-pressed: var(--color-default-yellow-600);
+  --ctx-background-hover: var(--color-default-yellow-800);
+  --ctx-background-pressed: var(--color-default-yellow-900);
+  --ctx-gradient-hover: var(--color-default-yellow-900);
+  --ctx-gradient-pressed: var(--color-default-yellow-900);
   --ctx-border-hover: var(--color-default-yellow-700);
   --ctx-border-pressed: var(--color-default-yellow-700);
 }
@@ -1670,16 +1672,16 @@
 @utility ctx-yellow-subtle {
   --ctx-text: var(--color-default-yellow-900);
   --ctx-text-bold: var(--color-default-yellow-1000);
-  --ctx-background: var(--color-default-yellow-300);
-  --ctx-gradient: var(--color-default-yellow-400);
+  --ctx-background: var(--color-default-yellow-400);
+  --ctx-gradient: var(--color-default-yellow-300);
   --ctx-border: var(--color-default-yellow-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-yellow-900);
   --ctx-text-pressed: var(--color-default-yellow-900);
-  --ctx-background-hover: var(--color-default-yellow-400);
-  --ctx-background-pressed: var(--color-default-yellow-500);
-  --ctx-gradient-hover: var(--color-default-yellow-500);
-  --ctx-gradient-pressed: var(--color-default-yellow-500);
+  --ctx-background-hover: var(--color-default-yellow-300);
+  --ctx-background-pressed: var(--color-default-yellow-200);
+  --ctx-gradient-hover: var(--color-default-yellow-200);
+  --ctx-gradient-pressed: var(--color-default-yellow-200);
   --ctx-border-hover: var(--color-default-yellow-500);
   --ctx-border-pressed: var(--color-default-yellow-500);
 }
@@ -1771,7 +1773,7 @@
 }
 
 @utility ctx-gradient {
-  background: linear-gradient(225deg, var(--ctx-gradient) 0%, var(--ctx-background) 100%);
+  background: linear-gradient(225deg, var(--ctx-background) 0%, var(--ctx-gradient) 100%);
 }
 
 @utility ctx-raised {
@@ -1820,86 +1822,76 @@
 
 
 /* === ./styles/component-overrides.css === */
-.p-autocomplete .p-icon {
-    --p-icon-size: 20px;
-    --p-form-field-sm-font-size: 20px;
-    --p-form-field-lg-font-size: 24px;
+/** Custom styles to fix primevue components that are not custom or wrapped. */
+
+/**
+* GUTTER FIX
+* Primevue's dropwdown components are all missing the gap between input and dropdown
+**/
+.p-autocomplete-overlay,
+.p-menu-overlay,
+.p-multiselect-overlay,
+.p-select-overlay,
+.p-treeselect-overlay {
+	margin: var(--p-anchor-gutter) 0;
 }
 
+/* This fix is to ensure overlay badge is contained within the size of the component it wraps */
+.p-overlaybadge {
+	display: inline-block;
+}
 
+/**
+* BccAutocomplete
+**/
 
-/* === ./components/custom/styles.css === */
+/** Our icons are a bit smaller that Primevue's default */
+.p-autocomplete .p-icon {
+	--p-icon-size: var(--icon-size-sm);
+	--p-form-field-sm-font-size: var(--icon-size-sm);
+	--p-form-field-lg-font-size: var(--icon-size-md);
+}
 
-/* from ./BccAvatar/BccAvatar.css */
-@layer components {
-    .bcc-avatar {
-        --p-avatar-background: var(--ctx-background);
-        --p-avatar-color: var(--ctx-text);
-        --bcc-avatar-border: var(--ctx-border);
-        @apply overflow-hidden shrink-0 ctx-gray-subtler;
-    }
-    .bcc-avatar.male,
-    .bcc-avatar.M {
-        @apply ctx-blue-subtler;
-    }
-    .bcc-avatar.female,
-    .bcc-avatar.F {
-        @apply ctx-purple-subtler;
-    }
-    .bcc-avatar.male.child,
-    .bcc-avatar.M.child {
-        @apply ctx-teal-subtler;
-    }
-    .bcc-avatar.female.child,
-    .bcc-avatar.F.child {
-        @apply ctx-magenta-subtler;
-    }
-    .bcc-avatar.bordered {
-        @apply border-2 border-ctx;
-    }
-    .bcc-avatar.xs {
-        @apply size-5 text-xs;
-    }
-    .bcc-avatar.sm {
-        @apply size-6 text-sm;
-    }
-    .bcc-avatar.md {
-        @apply size-8 text-base;
-    }
-    .bcc-avatar.lg {
-        @apply size-10 text-lg;
-    }
-    .bcc-avatar.xl {
-        @apply size-12 text-xl;
-    }
-    .bcc-avatar.xxl {
-        @apply size-20 text-3xl;
-    }
-    .bcc-avatar.xxxl {
-        @apply size-24 text-4xl;
-    }
+.p-autocomplete-clearable .p-inputtext {
+	flex-grow: 1;
+}
 
-    .bcc-avatar.squared.lg {
-        @apply text-xl;
-    }
-    .bcc-avatar.squared.xl {
-        @apply text-2xl;
-    }
-    .bcc-avatar.squared.xxl {
-        @apply text-4xl;
-    }
-    .bcc-avatar.squared.xxxl {
-        @apply text-5xl;
-    }
+.p-autocomplete-chip.p-chip {
+	padding-block-start: calc(var(--p-autocomplete-padding-y) / 2);
+	padding-block-end: calc(var(--p-autocomplete-padding-y) / 2);
+	border-radius: var(--p-autocomplete-chip-border-radius);
+}
 
+/**
+* BccSelect
+**/
+.p-select {
+	--p-icon-size: var(--icon-size-sm);
+}
 
-    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
-    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
-    .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
-        transform: translate(25%, -25%);
-    }
+.p-select.inline-select {
+	@apply mx-auto inline-flex w-auto items-center border-0 bg-transparent shadow-none;
+	--p-icon-size: 1.25em;
+	--p-select-dropdown-width: 1.5em;
+	--p-select-min-height: auto;
 }
 
+.p-select.inline-select .p-select-label {
+	@apply inline-block font-semibold;
+	font-size: inherit;
+	padding: 0 0 0 0.25em;
+}
+
+.p-select.inline-select.inverse {
+	--p-select-color: var(--color-neutral-0);
+	--p-select-dropdown-color: var(--color-neutral-0);
+	--p-select-placeholder-color: var(--color-dark-neutral-1000);
+}
+
+
+
+
+/* === ./components/custom/styles.css === */
 
 /* from ./BccBadge/BccBadge.css */
 @layer components {
@@ -1908,6 +1900,10 @@
   
     @apply bg-ctx text-ctx;
   }
+
+  .bcc-badge.capital {
+    @apply inline-flex;
+  }
   .bcc-badge.sm {
     @apply w-4 h-4 text-heading-xs;
   }
@@ -1918,7 +1914,7 @@
     @apply w-6 h-6 text-heading-md;
   }
   .bcc-badge.xl {
-    @apply w-8 h-8 text-heading-lg;
+    @apply w-8 h-8 text-heading-md;
   }
 
   .bcc-badge .bcc-badge-icon {
@@ -1955,7 +1951,7 @@
   }
 
   .bcc-badge.squared  {
-    @apply rounded;
+    @apply rounded-sm;
   }
 }
 
@@ -2034,11 +2030,11 @@
     }
 
     .bcc-knob-top-left {
-        @apply absolute top-0 left-0 p-2 text-left;
+        @apply absolute top-0 left-0 text-left;
     }
 
     .bcc-knob-top-right {
-        @apply absolute top-0 right-0 p-2 text-right;
+        @apply absolute top-0 right-0 text-right;
     }
 }
 
@@ -2057,8 +2053,8 @@
     .bcc-frame--raised {
         --ctx-background: var(--color-elevation-surface-raised-default);
     }
-    .bcc-frame--raised.rounded {
-        @apply rounded;
+    .bcc-frame--rounded {
+        @apply rounded-md;
     }
     .bcc-frame--raised.bcc-frame--shadow {
         @apply shadow-raised;
@@ -2129,43 +2125,53 @@
     @apply relative w-full;
   }
 
-  .bcc-nps-result .result-gauge-dial {
+  .bcc-nps-result.xs {
+    @apply w-24;
+  }
+  .bcc-nps-result.sm {
+    @apply w-36;
+  }
+  .bcc-nps-result.md {
+    @apply w-48;
+  }
+  .bcc-nps-result.lg {
+    @apply w-60;
+  }
+  .bcc-nps-result.xl {
+    @apply w-72;
+  }
+
+  .bcc-nps-result .bcc-nps-result-gauge-dial {
     transform-origin: center;
   }
 
-  .bcc-nps-result.animated .result-gauge-dial {
+  .bcc-nps-result.animated .bcc-nps-result-gauge-dial {
     transition-delay: 0.3s;
     transition: all .7s cubic-bezier(0, 0, 0.3, 1.5);    
   }
 
-  .bcc-nps-result-labels.lg {
-    @apply bottom-[2em];
-  }
   .bcc-nps-result-labels {
-    @apply absolute bottom-[1em] flex w-full flex-col items-center justify-center;
-  }
-  .bcc-nps-result-labels.sm {
-    @apply bottom-0;
+    @apply absolute text-base bottom-1/4 translate-y-1/2  flex w-full flex-col items-center justify-center;
   }
 
-  .bcc-nps-result-labels.lg .bcc-nps-result-labels--heading {
-    @apply text-heading-xl leading-tight;
-  }
   .bcc-nps-result-labels--heading {
-    @apply text-heading-lg leading-none;
+    @apply text-[1.25em] font-semibold leading-none;
   }
-  .bcc-nps-result-labels.sm .bcc-nps-result-labels--heading {
-    @apply text-heading-md leading-none;
+  .bcc-nps-result-labels--label {
+    @apply text-[0.75em] text-subtlest;
   }
 
-  .bcc-nps-result-labels.lg .bcc-nps-result-labels--label {
-    @apply text-body-lg opacity-60;
+  .bcc-nps-result.md .bcc-nps-result-labels {
+    @apply text-lg;
   }
-  .bcc-nps-result-labels--label {
-    @apply text-body-md opacity-60;
+  .bcc-nps-result.lg .bcc-nps-result-labels {
+    @apply text-xl;
   }
-  .bcc-nps-result-labels.sm .bcc-nps-result-labels--label {
-    @apply text-body-sm;
+  .bcc-nps-result.xl .bcc-nps-result-labels {
+    @apply text-2xl;
+  }
+  .bcc-nps-result.full .bcc-nps-result-labels {
+    @apply text-lg;
   }
 }
 
@@ -2174,7 +2180,7 @@
 /* from ./BccNpsScore/BccNpsScore.css */
 @layer components {
   .bcc-nps-score {
-    @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2;
+    @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2 select-none;
   }
 
   .bcc-nps-score--heading {
@@ -2195,7 +2201,7 @@
   }
 
   .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
-    @apply bg-ctx ctx-gray-subtler text-disabled;
+    @apply bg-ctx ctx-gray-subtlest text-disabled;
   }
 
   .bcc-nps-score--number {
@@ -2205,7 +2211,7 @@
   }
 
   .bcc-nps-score--number:disabled {
-    @apply pointer-events-none cursor-default;
+    @apply cursor-not-allowed;
   }
 
   .bcc-nps-score--number.active {
@@ -2218,7 +2224,7 @@
   }
 
   .bcc-nps-score--number.inactive {
-    @apply bg-ctx text-ctx ctx-gray-subtle;
+    @apply bg-ctx text-ctx ctx-gray-subtler;
   }
 
   .bcc-nps-score--number:first-child {
@@ -2322,6 +2328,104 @@
 
 
 
+/* from ./BccTag/BccTag.css */
+
+@layer components {
+	.bcc-tag.bcc-badge {
+		@apply w-auto;
+	}
+	.bcc-tag.bcc-badge.md {
+		@apply font-regular h-6;
+	}
+	.bcc-tag.bcc-badge.sm {
+		@apply font-regular h-5;
+	}
+	.bcc-tag.bcc-badge.lg {
+		@apply font-regular h-8;
+	}
+	.bcc-tag.bcc-badge.xl {
+		@apply font-regular h-10;
+	}
+}
+
+
+
+/* === ./components/wrapped/styles.css === */
+
+/* from ./BccAvatar/BccAvatar.css */
+@layer components {
+    .bcc-avatar {
+        --p-avatar-background: var(--ctx-background);
+        --p-avatar-color: var(--ctx-text);
+        --bcc-avatar-border: var(--ctx-border);
+        @apply overflow-hidden shrink-0 ctx-gray-subtler;
+    }
+    .bcc-avatar.male,
+    .bcc-avatar.M {
+        @apply ctx-blue-subtler;
+    }
+    .bcc-avatar.female,
+    .bcc-avatar.F {
+        @apply ctx-purple-subtler;
+    }
+    .bcc-avatar.male.child,
+    .bcc-avatar.M.child {
+        @apply ctx-teal-subtler;
+    }
+    .bcc-avatar.female.child,
+    .bcc-avatar.F.child {
+        @apply ctx-magenta-subtler;
+    }
+    .bcc-avatar.bordered {
+        @apply border-2 border-ctx;
+    }
+    .bcc-avatar.xs {
+        @apply size-5 text-xs;
+    }
+    .bcc-avatar.sm {
+        @apply size-6 text-sm;
+    }
+    .bcc-avatar.md {
+        @apply size-8 text-base;
+    }
+    .bcc-avatar.lg {
+        @apply size-10 text-lg;
+    }
+    .bcc-avatar.xl {
+        @apply size-12 text-xl;
+    }
+    .bcc-avatar.xxl {
+        @apply size-20 text-3xl;
+    }
+    .bcc-avatar.xxxl {
+        @apply size-24 text-4xl;
+    }
+
+    .bcc-avatar.squared.lg {
+        @apply text-xl;
+    }
+    .bcc-avatar.squared.xl {
+        @apply text-2xl;
+    }
+    .bcc-avatar.squared.xxl {
+        @apply text-4xl;
+    }
+    .bcc-avatar.squared.xxxl {
+        @apply text-5xl;
+    }
+
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.lg~.p-badge,
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
+        transform: translate(40%, -40%);
+    }
+
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge {
+        transform: translate(20%, -20%);
+    }
+}
+
+
 /* from ./BccTabs/BccTabs.css */
 @layer components {
     .bcc-tabs-fill.p-tabs {
@@ -2343,27 +2447,6 @@
 }
 
 
-/* from ./BccTag/BccTag.css */
-
-@layer components {
-	.bcc-tag.bcc-badge {
-		@apply w-auto;
-	}
-	.bcc-tag.bcc-badge.md {
-		@apply text-sm font-regular h-6;
-	}
-	.bcc-tag.bcc-badge.sm {
-		@apply text-xs font-regular h-5;
-	}
-	.bcc-tag.bcc-badge.lg {
-		@apply text-md font-regular h-8;
-	}
-	.bcc-tag.bcc-badge.xl {
-		@apply text-lg font-regular h-10;
-	}
-}
-
-
 /* from ./BccToggle/BccToggle.css */
 @layer components {
     .p-toggleswitch.useCtx {
@@ -2383,17 +2466,19 @@
 
 
 
-:host {
-    @apply font-sans antialiased p-0 m-0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+:root, :host {
+	--font-sans: 'Archivo', system-ui, sans-serif;
+  @apply font-sans antialiased p-0 m-0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
 }
 
 b,
 strong,
 .bold {
-    font-weight: bold;
-    --ctx-text: var(--ctx-text-bold);
+  font-weight: bold;
+  --ctx-text: var(--ctx-text-bold);
 }
 
 /* Disable state */