@bcc-code/component-library-vue 0.0.0-dev.0ebcb8d → 0.0.0-dev.0fb2ad3

package/dist/theme.css

@@ -1,99 +1,225 @@
 /* Layer order: Tailwind base/utilities first, then PrimeVue so component styles win */
 @layer theme, base, tailwind, primevue;
-@import "@bcc-code/design-tokens/css";
+@import '@bcc-code/design-tokens/css';
 
-@import "tailwindcss";
-@import "@bcc-code/design-tokens/tailwind";
-@import "@bcc-code/design-tokens/primevue/overrides";
+@import 'tailwindcss';
+@import '@bcc-code/design-tokens/tailwind';
 
 
 /* === ./styles/theme.css === */
 @theme {
+	/* spacing variables */
+	--spacing-inset-top: env(safe-area-inset-top, var(--safe-area-inset-top, 0px));
+	--spacing-inset-top-1: max(0.25rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
+	--spacing-inset-top-2: max(0.5rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
+	--spacing-inset-top-4: max(1rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
+	--spacing-inset-bottom: env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px));
+	--spacing-inset-bottom-1: max(0.25rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
+	--spacing-inset-bottom-2: max(0.5rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
+	--spacing-inset-bottom-4: max(1rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
+	--spacing-inset-left: env(safe-area-inset-left, var(--safe-area-inset-left, 0px));
+	--spacing-inset-right: env(safe-area-inset-right, var(--safe-area-inset-right, 0px));
+
+	--spacing-18: 4.5rem;
+}
+
+.ctx-default {
+	@apply ctx-default;
+}
+.ctx-success {
+	@apply ctx-success-subtlest;
+}
+.ctx-danger {
+	@apply ctx-danger-subtlest;
+}
+.ctx-warning {
+	@apply ctx-warning-subtlest;
+}
+.ctx-info {
+	@apply ctx-info-subtlest;
+}
+
+.ctx-blue-bolder {
+	@apply ctx-blue-bolder;
+}
+.ctx-blue-subtle {
+	@apply ctx-blue-subtle;
+}
+.ctx-blue-subtler {
+	@apply ctx-blue-subtler;
+}
+.ctx-blue-subtlest {
+	@apply ctx-blue-subtlest;
+}
+.ctx-brand-boldest {
+	@apply ctx-brand-boldest;
+}
+.ctx-brand-bolder {
+	@apply ctx-brand-bolder;
+}
+.ctx-brand-bold {
+	@apply ctx-brand-bold;
+}
+.ctx-brand-subtle {
+	@apply ctx-brand-subtle;
+}
+.ctx-brand-subtler {
+	@apply ctx-brand-subtler;
+}
+.ctx-brand-subtlest {
+	@apply ctx-brand-subtlest;
+}
+.ctx-brown-bolder {
+	@apply ctx-brown-bolder;
+}
+.ctx-brown-subtle {
+	@apply ctx-brown-subtle;
+}
+.ctx-brown-subtler {
+	@apply ctx-brown-subtler;
+}
+.ctx-brown-subtlest {
+	@apply ctx-brown-subtlest;
+}
+.ctx-danger-subtlest {
+	@apply ctx-danger;
+}
+.ctx-danger-bolder {
+	@apply ctx-danger-bolder;
+}
+.ctx-gray-bolder {
+	@apply ctx-gray-bolder;
+}
+.ctx-gray-subtle {
+	@apply ctx-gray-subtle;
+}
+.ctx-gray-subtler {
+	@apply ctx-gray-subtler;
+}
+.ctx-gray-subtlest {
+	@apply ctx-gray-subtlest;
+}
+.ctx-green-bolder {
+	@apply ctx-green-bolder;
+}
+.ctx-green-subtle {
+	@apply ctx-green-subtle;
+}
+.ctx-green-subtler {
+	@apply ctx-green-subtler;
+}
+.ctx-green-subtlest {
+	@apply ctx-green-subtlest;
+}
+.ctx-info-subtlest {
+	@apply ctx-info;
+}
+.ctx-info-bolder {
+	@apply ctx-info-bolder;
+}
+.ctx-magenta-bolder {
+	@apply ctx-magenta-bolder;
+}
+.ctx-magenta-subtle {
+	@apply ctx-magenta-subtle;
+}
+.ctx-magenta-subtler {
+	@apply ctx-magenta-subtler;
+}
+.ctx-magenta-subtlest {
+	@apply ctx-magenta-subtlest;
+}
+.ctx-neutral-boldest {
+	@apply ctx-neutral-boldest;
+}
+.ctx-neutral-bolder {
+	@apply ctx-neutral-bolder;
+}
+.ctx-neutral-bold {
+	@apply ctx-neutral-bold;
+}
+.ctx-neutral-subtle {
+	@apply ctx-neutral-subtle;
+}
+.ctx-neutral-subtler {
+	@apply ctx-neutral-subtler;
+}
+.ctx-neutral-subtlest {
+	@apply ctx-neutral-subtlest;
+}
+.ctx-orange-bolder {
+	@apply ctx-orange-bolder;
+}
+.ctx-orange-subtle {
+	@apply ctx-orange-subtle;
+}
+.ctx-orange-subtler {
+	@apply ctx-orange-subtler;
+}
+.ctx-orange-subtlest {
+	@apply ctx-orange-subtlest;
+}
+.ctx-purple-bolder {
+	@apply ctx-purple-bolder;
+}
+.ctx-purple-subtle {
+	@apply ctx-purple-subtle;
+}
+.ctx-purple-subtler {
+	@apply ctx-purple-subtler;
+}
+.ctx-purple-subtlest {
+	@apply ctx-purple-subtlest;
+}
+.ctx-red-bolder {
+	@apply ctx-red-bolder;
+}
+.ctx-red-subtle {
+	@apply ctx-red-subtle;
+}
+.ctx-red-subtler {
+	@apply ctx-red-subtler;
+}
+.ctx-red-subtlest {
+	@apply ctx-red-subtlest;
+}
+.ctx-success-subtlest {
+	@apply ctx-success;
+}
+.ctx-success-bolder {
+	@apply ctx-success-bolder;
+}
+.ctx-teal-bolder {
+	@apply ctx-teal-bolder;
+}
+.ctx-teal-subtle {
+	@apply ctx-teal-subtle;
+}
+.ctx-teal-subtler {
+	@apply ctx-teal-subtler;
+}
+.ctx-teal-subtlest {
+	@apply ctx-teal-subtlest;
+}
+.ctx-warning-subtlest {
+	@apply ctx-warning;
+}
+.ctx-warning-bolder {
+	@apply ctx-warning-bolder;
+}
+.ctx-yellow-bolder {
+	@apply ctx-yellow-bolder;
+}
+.ctx-yellow-subtle {
+	@apply ctx-yellow-subtle;
+}
+.ctx-yellow-subtler {
+	@apply ctx-yellow-subtler;
+}
+.ctx-yellow-subtlest {
+	@apply ctx-yellow-subtlest;
+}
 
-    /* spacing variables */
-    --spacing-inset-top: env(safe-area-inset-top, var(--safe-area-inset-top, 0px));
-    --spacing-inset-top-1: max(0.25rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
-    --spacing-inset-top-2: max(0.5rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
-    --spacing-inset-top-4: max(1rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
-    --spacing-inset-bottom: env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px));
-    --spacing-inset-bottom-1: max(0.25rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
-    --spacing-inset-bottom-2: max(0.5rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
-    --spacing-inset-bottom-4: max(1rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
-    --spacing-inset-left: env(safe-area-inset-left, var(--safe-area-inset-left, 0px));
-    --spacing-inset-right: env(safe-area-inset-right, var(--safe-area-inset-right, 0px));
-
-    --spacing-18: 4.5rem;
-
-    /* color variables */
-    --color-overlay: rgba(17, 24, 39, 0.85);
-}
-
-.ctx-default { @apply ctx-default; }
-.ctx-success { @apply ctx-success-subtlest; }
-.ctx-danger { @apply ctx-danger-subtlest; }
-.ctx-warning { @apply ctx-warning-subtlest; }
-.ctx-info { @apply ctx-info-subtlest; }
-
-.ctx-blue-bolder { @apply ctx-blue-bolder; }
-.ctx-blue-subtle { @apply ctx-blue-subtle; }
-.ctx-blue-subtler { @apply ctx-blue-subtler; }
-.ctx-blue-subtlest { @apply ctx-blue-subtlest; }
-.ctx-brand-boldest { @apply ctx-brand-boldest; }
-.ctx-brand-bolder { @apply ctx-brand-bolder; }
-.ctx-brand-bold { @apply ctx-brand-bold; }
-.ctx-brand-subtle { @apply ctx-brand-subtle; }
-.ctx-brand-subtler { @apply ctx-brand-subtler; }
-.ctx-brand-subtlest { @apply ctx-brand-subtlest; }
-.ctx-brown-bolder { @apply ctx-brown-bolder; }
-.ctx-brown-subtle { @apply ctx-brown-subtle; }
-.ctx-brown-subtler { @apply ctx-brown-subtler; }
-.ctx-brown-subtlest { @apply ctx-brown-subtlest; }
-.ctx-danger-subtlest { @apply ctx-danger; }
-.ctx-danger-bolder { @apply ctx-danger-bolder; }
-.ctx-gray-bolder { @apply ctx-gray-bolder; }
-.ctx-gray-subtle { @apply ctx-gray-subtle; }
-.ctx-gray-subtler { @apply ctx-gray-subtler; }
-.ctx-gray-subtlest { @apply ctx-gray-subtlest; }
-.ctx-green-bolder { @apply ctx-green-bolder; }
-.ctx-green-subtle { @apply ctx-green-subtle; }
-.ctx-green-subtler { @apply ctx-green-subtler; }
-.ctx-green-subtlest { @apply ctx-green-subtlest; }
-.ctx-info-subtlest { @apply ctx-info; }
-.ctx-info-bolder { @apply ctx-info-bolder; }
-.ctx-magenta-bolder { @apply ctx-magenta-bolder; }
-.ctx-magenta-subtle { @apply ctx-magenta-subtle; }
-.ctx-magenta-subtler { @apply ctx-magenta-subtler; }
-.ctx-magenta-subtlest { @apply ctx-magenta-subtlest; }
-.ctx-neutral-boldest { @apply ctx-neutral-boldest; }
-.ctx-neutral-bolder { @apply ctx-neutral-bolder; }
-.ctx-neutral-bold { @apply ctx-neutral-bold; }
-.ctx-neutral-subtle { @apply ctx-neutral-subtle; }
-.ctx-neutral-subtler { @apply ctx-neutral-subtler; }
-.ctx-neutral-subtlest { @apply ctx-neutral-subtlest; }
-.ctx-orange-bolder { @apply ctx-orange-bolder; }
-.ctx-orange-subtle { @apply ctx-orange-subtle; }
-.ctx-orange-subtler { @apply ctx-orange-subtler; }
-.ctx-orange-subtlest { @apply ctx-orange-subtlest; }
-.ctx-purple-bolder { @apply ctx-purple-bolder; }
-.ctx-purple-subtle { @apply ctx-purple-subtle; }
-.ctx-purple-subtler { @apply ctx-purple-subtler; }
-.ctx-purple-subtlest { @apply ctx-purple-subtlest; }
-.ctx-red-bolder { @apply ctx-red-bolder; }
-.ctx-red-subtle { @apply ctx-red-subtle; }
-.ctx-red-subtler { @apply ctx-red-subtler; }
-.ctx-red-subtlest { @apply ctx-red-subtlest; }
-.ctx-success-subtlest { @apply ctx-success; }
-.ctx-success-bolder { @apply ctx-success-bolder; }
-.ctx-teal-bolder { @apply ctx-teal-bolder; }
-.ctx-teal-subtle { @apply ctx-teal-subtle; }
-.ctx-teal-subtler { @apply ctx-teal-subtler; }
-.ctx-teal-subtlest { @apply ctx-teal-subtlest; }
-.ctx-warning-subtlest { @apply ctx-warning; }
-.ctx-warning-bolder { @apply ctx-warning-bolder; }
-.ctx-yellow-bolder { @apply ctx-yellow-bolder; }
-.ctx-yellow-subtle { @apply ctx-yellow-subtle; }
-.ctx-yellow-subtler { @apply ctx-yellow-subtler; }
-.ctx-yellow-subtlest { @apply ctx-yellow-subtlest; }
 
 
 /* === ./styles/semantic.css === */
@@ -590,77 +716,83 @@
 
 /* === ./styles/utilities.css === */
 @utility center {
-    @apply flex items-center justify-center;
-    
-    &.top {
-        @apply items-start;
-    }
+	@apply flex items-center justify-center;
 
-    &.bottom {
-        @apply items-end;
-    }
+	&.top {
+		@apply items-start;
+	}
 
-    &.left {
-        @apply justify-start;
-    }
+	&.bottom {
+		@apply items-end;
+	}
 
-    &.right {
-        @apply justify-end;
-    }
+	&.left {
+		@apply justify-start;
+	}
 
-    &.stretch {
-        @apply items-stretch;
-    }
+	&.right {
+		@apply justify-end;
+	}
+
+	&.stretch {
+		@apply items-stretch;
+	}
 }
 
 @utility col {
-    @apply flex flex-col items-center justify-center;
+	@apply flex flex-col items-center justify-center;
 
-    &.left {
-        @apply items-start;
-    }
+	&.left {
+		@apply items-start;
+	}
 
-    &.right {
-        @apply items-end;
-    }
+	&.right {
+		@apply items-end;
+	}
 
-    &.top {
-        @apply justify-start;
-    }
+	&.top {
+		@apply justify-start;
+	}
 
-    &.bottom {
-        @apply justify-end;
-    }
+	&.bottom {
+		@apply justify-end;
+	}
 }
 
 @utility between {
-    @apply justify-between;
+	@apply justify-between;
 }
 
 @utility hide-scrollbar {
-    -ms-overflow-style: none; /* for Internet Explorer, Edge */
-    scrollbar-width: none; /* for Firefox */
-    overflow-y: scroll;
+	-ms-overflow-style: none; /* for Internet Explorer, Edge */
+	scrollbar-width: none; /* for Firefox */
+	overflow-y: scroll;
 
-    &::-webkit-scrollbar {
-        display: none; /* for Chrome, Safari, and Opera */
-    }
+	&::-webkit-scrollbar {
+		display: none; /* for Chrome, Safari, and Opera */
+	}
 }
 
 /* Capitalize first letter */
 @utility capital {
-    display: inline-block;
-    &::first-letter {
-        text-transform: uppercase;
-    }
+	@apply inline-block;
+
+	&::first-letter {
+		text-transform: uppercase;
+	}
+
+	&.bcc-badge {
+		@apply inline-flex;
+	}
 }
 
 /* Inset 0 */
 @utility inset-0 {
-	@apply left-0 right-0 top-0 bottom-0;
+	@apply top-0 right-0 bottom-0 left-0;
 }
 
 
+
 /* === ./styles/contexts.css === */
 /* Auto-generated from src/figma-modes. Do not edit by hand. */
 /* Run: pnpm run generate:context-css */
@@ -768,18 +900,18 @@
 }
 
 @utility ctx-brand-bolder {
-  --ctx-text: var(--color-default-bcc-100);
+  --ctx-text: var(--color-default-neutral-0);
   --ctx-text-bold: var(--color-default-neutral-0);
-  --ctx-background: var(--color-default-bcc-700);
-  --ctx-gradient: var(--color-default-bcc-800);
+  --ctx-background: var(--color-default-bcc-800);
+  --ctx-gradient: var(--color-default-bcc-900);
   --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-900);
-  --ctx-gradient-hover: var(--color-default-bcc-900);
-  --ctx-gradient-pressed: var(--color-default-bcc-900);
+  --ctx-text-hover: var(--color-default-neutral-0);
+  --ctx-text-pressed: var(--color-default-neutral-0);
+  --ctx-background-hover: var(--color-default-bcc-900);
+  --ctx-background-pressed: var(--color-default-bcc-1000);
+  --ctx-gradient-hover: var(--color-default-bcc-1000);
+  --ctx-gradient-pressed: var(--color-default-bcc-1000);
   --ctx-border-hover: var(--color-default-bcc-700);
   --ctx-border-pressed: var(--color-default-bcc-700);
 }
@@ -974,16 +1106,16 @@
 @utility ctx-gray-bolder {
   --ctx-text: var(--color-default-neutral-200);
   --ctx-text-bold: var(--color-default-neutral-100);
-  --ctx-background: var(--color-default-neutral-800);
-  --ctx-gradient: var(--color-default-neutral-700);
+  --ctx-background: var(--color-default-neutral-700);
+  --ctx-gradient: var(--color-default-neutral-800);
   --ctx-border: var(--color-default-neutral-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-200);
   --ctx-text-pressed: var(--color-default-neutral-200);
-  --ctx-background-hover: var(--color-default-neutral-700);
-  --ctx-background-pressed: var(--color-default-neutral-600);
-  --ctx-gradient-hover: var(--color-default-neutral-600);
-  --ctx-gradient-pressed: var(--color-default-neutral-600);
+  --ctx-background-hover: var(--color-default-neutral-800);
+  --ctx-background-pressed: var(--color-default-neutral-900);
+  --ctx-gradient-hover: var(--color-default-neutral-900);
+  --ctx-gradient-pressed: var(--color-default-neutral-900);
   --ctx-border-hover: var(--color-default-neutral-700);
   --ctx-border-pressed: var(--color-default-neutral-700);
 }
@@ -1722,88 +1854,104 @@
 
 
 /* === ./styles/context.css === */
-
 @theme {
-  --color-brand-100: var(--color-bcc-100);
-  --color-brand-200: var(--color-bcc-200);
-  --color-brand-300: var(--color-bcc-300);
-  --color-brand-400: var(--color-bcc-400);
-  --color-brand-500: var(--color-bcc-500);
-  --color-brand-600: var(--color-bcc-600);
-  --color-brand-700: var(--color-bcc-700);
-  --color-brand-800: var(--color-bcc-800);
-  --color-brand-900: var(--color-bcc-900);
-  --color-brand-1000: var(--color-bcc-1000);
+	--color-brand-100: var(--color-bcc-100);
+	--color-brand-200: var(--color-bcc-200);
+	--color-brand-300: var(--color-bcc-300);
+	--color-brand-400: var(--color-bcc-400);
+	--color-brand-500: var(--color-bcc-500);
+	--color-brand-600: var(--color-bcc-600);
+	--color-brand-700: var(--color-bcc-700);
+	--color-brand-800: var(--color-bcc-800);
+	--color-brand-900: var(--color-bcc-900);
+	--color-brand-1000: var(--color-bcc-1000);
 }
 
 /** DEFAULT CONTEXTS */
 @utility ctx-default {
-  @apply ctx-neutral-subtlest;
+	@apply ctx-neutral-subtlest;
+}
+@utility ctx-success {
+	@apply ctx-success-subtlest;
+}
+@utility ctx-danger {
+	@apply ctx-danger-subtlest;
+}
+@utility ctx-warning {
+	@apply ctx-warning-subtlest;
+}
+@utility ctx-info {
+	@apply ctx-info-subtlest;
 }
-@utility ctx-success { @apply ctx-success-subtlest; }
-@utility ctx-danger { @apply ctx-danger-subtlest; }
-@utility ctx-warning { @apply ctx-warning-subtlest; }
-@utility ctx-info { @apply ctx-info-subtlest; }
 
 @utility text-ctx {
-  color: var(--ctx-text);
+	color: var(--ctx-text);
 }
 
 @utility text-ctx-bold {
-  color: var(--ctx-text-bold);
+	color: var(--ctx-text-bold);
 }
 
 @utility bg-ctx {
-  background-color: var(--ctx-background);
+	background-color: var(--ctx-background);
 }
 
 @utility border-ctx {
-  border-color: var(--ctx-border);
+	border-color: var(--ctx-border);
 }
 
 @utility shadow-ctx {
-  --tw-shadow-color: var(--ctx-shadow);
+	--tw-shadow-color: var(--ctx-shadow);
 }
 
 @utility ctx {
-  background-color: var(--ctx-background);
-  color: var(--ctx-text);
-  border-color: var(--ctx-border);
+	background-color: var(--ctx-background);
+	color: var(--ctx-text);
+	border-color: var(--ctx-border);
 }
 
 @utility ctx-gradient {
-  background: linear-gradient(225deg, var(--ctx-background) 0%, var(--ctx-gradient) 100%);
+	background: linear-gradient(225deg, var(--ctx-background) 0%, var(--ctx-gradient) 100%);
+
+	@variant dark {
+		background: linear-gradient(225deg, var(--ctx-gradient) 0%, var(--ctx-background) 100%);
+	}
 }
 
 @utility ctx-raised {
-  box-shadow: 0 1px 1px 0 var(--ctx-shadow), 0 0 1px 0 var(--ctx-shadow);
+	box-shadow:
+		0 1px 1px 0 var(--ctx-shadow),
+		0 0 1px 0 var(--ctx-shadow);
 }
 
 @utility ctx-flat {
-  --ctx-background: transparent;
+	--ctx-background: transparent;
 
-  @variant hover {
-    --ctx-background: var(--ctx-background-hover);
-  }
+	@variant hover {
+		--ctx-background: var(--ctx-background-hover);
+	}
 }
 
 @utility clickable {
-  cursor: pointer;
+	cursor: pointer;
 }
 
-.clickable:hover {
-  --ctx-background: var(--ctx-background-hover);
-  --ctx-text: var(--ctx-text-hover);
-  --ctx-border: var(--ctx-border-hover);
-}
+@media (hover: hover) and (pointer: fine) {
+	.clickable:hover {
+		--ctx-background: var(--ctx-background-hover);
+		--ctx-text: var(--ctx-text-hover);
+		--ctx-border: var(--ctx-border-hover);
+	}
 
-.clickable:active {
-  --ctx-background: var(--ctx-background-pressed);
-  --ctx-text: var(--ctx-text-pressed);
-  --ctx-border: var(--ctx-border-pressed);
+	.clickable:active {
+		--ctx-background: var(--ctx-background-pressed);
+		--ctx-text: var(--ctx-text-pressed);
+		--ctx-border: var(--ctx-border-pressed);
+	}
 }
 
 
+
 /* === ./styles/fonts.css === */
 @utility heading-xs { font: var(--heading-xs); }
 @utility heading-sm { font: var(--heading-sm); }
@@ -1823,105 +1971,360 @@
 /* === ./styles/component-overrides.css === */
 /** Custom styles to fix primevue components that are not custom or wrapped. */
 
+:root {
+	--p-toast-width: min(85vw, 400px);
+}
+
+/**
+* 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-datepicker-panel,
+.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
+* BccAutocomplete
 **/
 
 /** 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);
+	--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);
+}
+
+.p-autocomplete .p-autocomplete-clear-icon {
+	/** middle-align the icon */
+	top: calc(50% - var(--icon-size-sm) / 2);
+	margin-top: 0;
 }
 
 .p-autocomplete-clearable .p-inputtext {
-    flex-grow: 1;
+	flex-grow: 1;
 }
 
 .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);
+	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);
 }
 
-
 /**
-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;
+* BccSelect
+**/
+.p-select {
+	--p-icon-size: var(--icon-size-sm);
 }
 
-/* This fix is to ensure overlay badge is contained within the size of the component it wraps */
-.p-overlaybadge {
-    display: inline-block;
+.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);
+}
+
+/** 
+* Fix issue with icons inside Input within an InputGroup being hidden when Input is in focus
+**/
+.p-inputicon {
+	z-index: 2;
+}
+
+.p-dialog-close-button {
+	--p-icon-size: var(--icon-size-sm);
+}
+.p-dialog .p-button-icon:empty {
+	display: none;
+}
+
+.p-togglebutton {
+	font-size: var(--text-sm);
+	border: 0;
+}
+
+.p-togglebutton-sm {
+	font-size: var(--text-sm);
+}
+
+.p-togglebutton-lg {
+	font-size: var(--text-md);
+}
+
+/* primevue-overrides.css - CSS-level component overrides */
+@layer custom {
+	.p-accordionheader {
+		gap: var(--p-accordion-header-gap);
+	}
+
+	.p-autocomplete-input-multiple {
+		min-height: var(--p-autocomplete-input-multiple-min-height);
+		gap: var(--p-autocomplete-input-multiple-gap);
+	}
+
+	.p-badge-circle {
+		border-radius: var(--p-badge-circle-border-radius);
+	}
+
+	.p-button {
+		min-height: var(--p-button-min-height);
+	}
+
+	.p-button-sm {
+		min-height: var(--p-button-sm-min-height);
+	}
+
+	.p-button-lg {
+		min-height: var(--p-button-lg-min-height);
+	}
+
+	.p-button.p-button-icon-only {
+		min-width: var(--p-button-icon-only-width);
+	}
+
+	.p-button-sm.p-button-icon-only {
+		min-width: var(--p-button-sm-icon-only-width);
+	}
+
+	.p-button-lg.p-button-icon-only {
+		min-width: var(--p-button-lg-icon-only-width);
+	}
+
+	.p-divider {
+		gap: var(--p-divider-content-gap);
+	}
+
+	.p-inputgroupaddon {
+		min-height: var(--p-inputgroup-addon-min-height);
+	}
+
+	.p-inputtext {
+		min-height: var(--p-inputtext-min-height);
+	}
+
+	.p-inputtext-sm {
+		min-height: var(--p-inputtext-sm-min-height);
+	}
+
+	.p-inputtext-lg {
+		min-height: var(--p-inputtext-lg-min-height);
+	}
+
+	.p-message-text {
+		line-height: var(--p-message-text-line-height);
+	}
+
+	.p-multiselect {
+		min-height: var(--p-multiselect-min-height);
+	}
+
+	.p-multiselect-sm {
+		min-height: var(--p-multiselect-sm-min-height);
+	}
+
+	.p-multiselect-lg {
+		min-height: var(--p-multiselect-lg-min-height);
+	}
+
+	.p-multiselect-label-container {
+		display: flex;
+		align-items: center;
+	}
+
+	.p-radiobutton {
+		gap: var(--p-radiobutton-gap);
+		border-radius: var(--p-radiobutton-border-radius);
+	}
+
+	.p-radiobutton-icon {
+		border-radius: var(--p-radiobutton-icon-border-radius);
+	}
+
+	.p-radiobutton-icon-sm {
+		border-radius: var(--p-radiobutton-icon-sm-border-radius);
+	}
+
+	.p-radiobutton-icon-lg {
+		border-radius: var(--p-radiobutton-icon-lg-border-radius);
+	}
+
+	.p-select {
+		min-height: var(--p-select-min-height);
+	}
+
+	.p-select-sm {
+		min-height: var(--p-select-sm-min-height);
+	}
+
+	.p-select-lg {
+		min-height: var(--p-select-lg-min-height);
+	}
+
+	.p-select-label {
+		display: flex;
+		align-items: center;
+	}
+
+	.p-select-option {
+		gap: var(--p-select-option-gap);
+	}
+
+	.p-textarea {
+		min-height: var(--p-textarea-min-height);
+	}
+
+	.p-togglebutton {
+		min-height: var(--p-togglebutton-min-height);
+	}
+
+	.p-togglebutton .p-togglebutton-sm {
+		min-height: var(--p-togglebutton-sm-min-height);
+		border-radius: var(--p-togglebutton-sm-border-radius);
+	}
+
+	.p-togglebutton-lg {
+		min-height: var(--p-togglebutton-lg-min-height);
+	}
+
+	.p-togglebutton .p-togglebutton-content {
+		min-height: var(--p-togglebutton-content-min-height);
+	}
+
+	.p-togglebutton-sm .p-togglebutton-content {
+		min-height: var(--p-togglebutton-content-sm-min-height);
+		border-radius: var(--p-togglebutton-content-sm-border-radius);
+	}
+
+	.p-togglebutton-lg .p-togglebutton-content {
+		min-height: var(--p-togglebutton-content-lg-min-height);
+	}
 }
 
 
 
+
 /* === ./components/custom/styles.css === */
 
+/* from ./BccAppNavigation/BccAppNavigation.css */
+@layer components {
+	.bcc-app-nav {
+		@apply bg-elevation-surface-default dark:border-brand-800 sticky inset-x-0 bottom-0 z-20 overflow-visible shadow-md sm:rounded-t-xl dark:border-t;
+	}
+	.bcc-app-nav-container {
+		@apply center pb-inset-bottom-1 mx-auto max-w-lg pt-1;
+	}
+
+	.bcc-app-nav-item {
+		@apply relative flex h-12 flex-1 flex-col items-center justify-center gap-1 transition-colors focus:ring-0 focus:outline-none;
+	}
+
+	.bcc-nav-item-icon {
+		@apply size-6 icon-subtlest;
+	}
+
+	.bcc-nav-item-badge {
+		@apply absolute top-0 right-1;
+	}
+
+	.bcc-nav-item-title {
+		@apply heading-xs text-center text-subtlest opacity-75;
+	}
+
+	.bcc-app-nav-item--active .bcc-nav-item-title {
+		@apply text-selected opacity-100;
+	}
+
+	.bcc-app-nav-item--active .bcc-nav-item-icon {
+		@apply text-selected;
+	}
+}
+
+
+
 /* from ./BccBadge/BccBadge.css */
 @layer components {
-  .bcc-badge {
-    @apply inline-flex shrink-0 gap-1 items-center justify-center rounded-full leading-none whitespace-nowrap;
-  
-    @apply bg-ctx text-ctx;
-  }
-  .bcc-badge.sm {
-    @apply w-4 h-4 text-heading-xs;
-  }
-  .bcc-badge.md {
-    @apply h-5 w-5 text-heading-sm;
-  }
-  .bcc-badge.lg {
-    @apply w-6 h-6 text-heading-md;
-  }
-  .bcc-badge.xl {
-    @apply w-8 h-8 text-heading-lg;
-  }
+	.bcc-badge {
+		@apply inline-flex shrink-0 items-center justify-center gap-1 rounded-full leading-none whitespace-nowrap;
 
-  .bcc-badge .bcc-badge-icon {
-    @apply size-4;
-  }
-  .bcc-badge.lg .bcc-badge-icon {
-    @apply size-5;
-  }
-  .bcc-badge.xl .bcc-badge-icon {
-    @apply size-6;
-  }
+		@apply bg-ctx text-ctx;
+	}
+	.bcc-badge.gradient {
+		@apply ctx-gradient;
+	}
+	.bcc-badge.sm {
+		@apply heading-xs h-4 w-4;
+	}
+	.bcc-badge.md {
+		@apply heading-sm h-5 w-5;
+	}
+	.bcc-badge.lg {
+		@apply heading-md h-6 w-6;
+	}
+	.bcc-badge.xl {
+		@apply heading-md h-8 w-8;
+	}
 
-  .bcc-badge.bcc-badge-text {
-    @apply w-auto px-2;
-  }
-  .bcc-badge-text.lg, .bcc-badge-text.xl { 
-    @apply px-3;
-  }
-  .bcc-badge-text.border.lg, .bcc-badge-text.border.xl { 
-    @apply px-2;
-  }
-  .bcc-badge-text.bordered.lg, .bcc-badge-text.bordered.xl { 
-    @apply px-1;
-  }
+	.bcc-badge .bcc-badge-icon {
+		@apply size-4;
+	}
+	.bcc-badge.lg .bcc-badge-icon {
+		@apply size-5;
+	}
+	.bcc-badge.xl .bcc-badge-icon {
+		@apply size-6;
+	}
 
-  .bcc-badge.border {
-    @apply border-1;
-    border-color: var(--ctx-background-pressed);
-  }
+	.bcc-badge.bcc-badge-text {
+		@apply w-auto px-2;
+	}
+	.bcc-badge-text.lg,
+	.bcc-badge-text.xl {
+		@apply px-3;
+	}
+	.bcc-badge-text.border.lg,
+	.bcc-badge-text.border.xl {
+		@apply px-2;
+	}
+	.bcc-badge-text.bordered.lg,
+	.bcc-badge-text.bordered.xl {
+		@apply px-1;
+	}
 
-  .bcc-badge.bordered {
-    @apply border-2;
-    border-color: var(--ctx-background-pressed);
-  }
+	.bcc-badge.border {
+		@apply border-1;
+		border-color: var(--ctx-background-pressed);
+	}
 
-  .bcc-badge.squared  {
-    @apply rounded-sm;
-  }
+	.bcc-badge.bordered {
+		@apply border-2;
+		border-color: var(--ctx-background-pressed);
+	}
+
+	.bcc-badge.squared {
+		@apply rounded-sm;
+	}
 }
 
 
@@ -1970,6 +2373,7 @@ GUTTER FIX
 
     .bcc-capacity-indicator.is-warning {
         @apply ctx-yellow-subtlest;
+        --bcc-capacity-indicator-circle: var(--ctx-background);
     }
 
     .bcc-capacity-indicator.is-full {
@@ -2011,40 +2415,43 @@ GUTTER FIX
 
 /* from ./BccFrame/BccFrame.css */
 @layer components {
-    .bcc-frame {
-        @apply ctx ctx-default w-full;
-    }
+	.bcc-frame {
+		@apply ctx ctx-default w-full border border-transparent;
+	}
 
-    .bcc-frame.bcc-frame--shadow {
-        @apply shadow shadow-ctx;
-    }
+	.bcc-frame.bcc-frame--shadow {
+		@apply shadow-ctx shadow;
+	}
 
-    .bcc-frame--raised {
-        --ctx-background: var(--color-elevation-surface-raised-default);
-    }
-    .bcc-frame--raised.rounded {
-        @apply rounded;
-    }
-    .bcc-frame--raised.bcc-frame--shadow {
-        @apply shadow-raised;
-    }
+	.bcc-frame--raised {
+		--ctx-background: var(--color-elevation-surface-raised-default);
+	}
+	.bcc-frame--rounded {
+		@apply rounded-md;
+	}
+	.bcc-frame--raised.bcc-frame--shadow {
+		@apply shadow-raised dark:border-default;
+	}
 
-    .bcc-frame--overlay {
-        --ctx-background: var(--color-elevation-surface-overlay-default);
-    }
-    .bcc-frame--overlay.bcc-frame--shadow {
-        @apply shadow-overlay;
-    }
+	.bcc-frame--overlay {
+		--ctx-background: var(--color-elevation-surface-overlay-default);
+		@apply border;
+	}
+	.bcc-frame--overlay.bcc-frame--shadow {
+		@apply shadow-overlay dark:border-default;
+	}
 
-    .bcc-frame--sunken {
-        --ctx-background: var(--color-elevation-surface-sunken-default);
-    }
-    .bcc-frame--sunken.bcc-frame--shadow {
-        @apply shadow-inner;
-    }
+	.bcc-frame--sunken {
+		--ctx-background: var(--color-elevation-surface-sunken-default);
+		@apply border;
+	}
+	.bcc-frame--sunken.bcc-frame--shadow {
+		@apply dark:border-default shadow-inner;
+	}
 }
 
 
+
 /* from ./BccGraphic/BccGraphic.css */
 @layer components {
   .bcc-graphic .corner,
@@ -2094,43 +2501,53 @@ GUTTER FIX
     @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.xl .bcc-nps-result-labels {
+    @apply text-2xl;
   }
-  .bcc-nps-result-labels.sm .bcc-nps-result-labels--label {
-    @apply text-body-sm;
+  .bcc-nps-result.full .bcc-nps-result-labels {
+    @apply text-lg;
   }
 }
 
@@ -2139,7 +2556,7 @@ GUTTER FIX
 /* from ./BccNpsScore/BccNpsScore.css */
 @layer components {
   .bcc-nps-score {
-    @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2 select-none;
+    @apply min-w-70 p-4 body-sm flex flex-col gap-y-2 select-none;
   }
 
   .bcc-nps-score--heading {
@@ -2198,193 +2615,192 @@ GUTTER FIX
 
 /* from ./BccReact/BccReact.css */
 @layer components {
-  .bcc-react {
-    @apply relative flex w-full items-center overflow-visible;
-  }
-  .bcc-react-toggle {
-    @apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 leading-tight transition;
-  }
-  .bcc-react-list {
-    @apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
-  }
-  .bcc-react-empty {
-    @apply heading-xs flex items-center;
-  }
+	.bcc-react {
+		@apply relative flex w-full items-center overflow-visible;
+	}
+	.bcc-react-toggle {
+		@apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 transition;
+	}
+	.bcc-react-list {
+		@apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
+	}
+	.bcc-react-empty {
+		@apply heading-xs flex items-center;
+	}
 
-  .bcc-react-selector-container {
-    @apply absolute z-50 h-9;
-    @apply top-11 origin-top-left;
-  }
+	.bcc-react-selector-container {
+		@apply absolute z-50 h-9;
+		@apply top-11 origin-top-left;
+	}
 
-  .bcc-react-selector-container--top {
-    @apply -top-10 origin-bottom-left;
-  }
+	.bcc-react-selector-container--top {
+		@apply -top-10 origin-bottom-left;
+	}
 
-  .bcc-react-selector {
-    @apply flex h-9 flex-col overflow-hidden bg-neutral-100 px-0 shadow-md;
-    border-radius: 18px;
-  }
+	.bcc-react-selector {
+		@apply flex h-9 flex-col overflow-hidden bg-neutral-100 px-0 shadow-md;
+		border-radius: 18px;
+	}
 
-  .bcc-react-selector-emojis-container {
-    @apply flex items-center bg-neutral-100 px-1;
-  }
+	.bcc-react-selector-emojis-container {
+		@apply flex items-center bg-neutral-100 px-1;
+	}
 
-  .bcc-react-selector-more {
-    @apply flex w-9 items-center justify-center;
-  }
-  .bcc-react-selector-more-btn {
-    @apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-200;
-  }
+	.bcc-react-selector-more {
+		@apply flex w-9 items-center justify-center;
+	}
+	.bcc-react-selector-more-btn {
+		@apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-200;
+	}
 
-  .bcc-react-dropdown-container {
-    @apply left-0 top-0 -z-10 w-full max-w-full;
-    width: 296px;
-  }
-  .bcc-react-dropdown-container--top {
-    @apply bottom-0 top-auto pb-0;
-  }
+	.bcc-react-dropdown-container {
+		@apply top-0 left-0 -z-10 w-full max-w-full;
+		width: 296px;
+	}
+	.bcc-react-dropdown-container--top {
+		@apply top-auto bottom-0 pb-0;
+	}
 
-  .bcc-react-dropdown {
-    @apply -z-10 flex w-full flex-wrap overflow-hidden px-1;
-  }
+	.bcc-react-dropdown {
+		@apply -z-10 flex w-full flex-wrap overflow-hidden px-1;
+	}
 
-  .bcc-react-arrow-down-icon {
-    @apply h-6 w-6 text-slate-600;
-    transition: transform 0.3s ease;
-  }
-  .bcc-react-arrow-down-icon.open {
-    transform: rotate(-180deg);
-  }
+	.bcc-react-arrow-down-icon {
+		@apply h-6 w-6 text-slate-600;
+		transition: transform 0.3s ease;
+	}
+	.bcc-react-arrow-down-icon.open {
+		transform: rotate(-180deg);
+	}
 
-  .bcc-react-selector-item {
-    @apply p-2 text-xl leading-none transition-transform duration-200 ease-out h-9 w-9 relative;
-  }
+	.bcc-react-selector-item {
+		@apply relative h-9 w-9 p-2 text-xl leading-none transition-transform duration-200 ease-out;
+	}
 
-  .bcc-react-selector-item--clicked {
-    animation: scaleFadeOut 300ms forwards;
-  }
+	.bcc-react-selector-item--clicked {
+		animation: scaleFadeOut 300ms forwards;
+	}
 
-  @keyframes scaleFadeOut {
-    0% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    100% {
-      transform: scale(1.4);
-      opacity: 0;
-    }
-  }
+	@keyframes scaleFadeOut {
+		0% {
+			transform: scale(1);
+			opacity: 1;
+		}
+		100% {
+			transform: scale(1.4);
+			opacity: 0;
+		}
+	}
 
-  .bcc-react-emoji-list-item {
-    @apply flex ctx clickable items-center justify-center rounded-full p-1 text-2xl leading-none drop-shadow transition-all hover:scale-105;
-    /* Default --not-selected */
-    @apply ctx-neutral-subtlest;
-  }
-  .bcc-react-emoji-list-item.selected {
-    @apply ctx-neutral-subtle;
-  }
+	.bcc-react-emoji-list-item {
+		@apply ctx clickable center h-7 min-w-7 shrink-0 rounded-full p-1 text-lg leading-none drop-shadow transition-all hover:scale-105;
+		/* Default --not-selected */
+		@apply ctx-neutral-subtlest;
+	}
+	.bcc-react-emoji-list-item span {
+		@apply leading-none;
+	}
+	.bcc-react-emoji-list-item.selected {
+		@apply ctx-neutral-subtle;
+	}
 }
 
 
 
 /* from ./BccTag/BccTag.css */
-
 @layer components {
 	.bcc-tag.bcc-badge {
 		@apply w-auto;
 	}
 	.bcc-tag.bcc-badge.md {
-		@apply font-regular h-6;
+		@apply body-md h-6;
 	}
 	.bcc-tag.bcc-badge.sm {
-		@apply font-regular h-5;
+		@apply body-sm h-5;
 	}
 	.bcc-tag.bcc-badge.lg {
-		@apply font-regular h-8;
+		@apply body-md h-8;
 	}
 	.bcc-tag.bcc-badge.xl {
-		@apply font-regular h-10;
+		@apply body-lg 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 {
+		--p-avatar-background: var(--ctx-background);
+		--p-avatar-color: var(--ctx-text);
+		--bcc-avatar-border: var(--ctx-border);
+		--p-icon-size: var(--icon-size-sm);
+		@apply ctx-gray-subtler shrink-0 overflow-hidden text-sm;
+	}
 
-    .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;
-    }
+	.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-ctx border-2;
+	}
+	.bcc-avatar.xs {
+		@apply size-5 text-xs;
+		--p-icon-size: var(--icon-size-xs);
+	}
+	.bcc-avatar.sm {
+		@apply size-6 text-xs;
+		--p-icon-size: var(--icon-size-xs);
+	}
+	/* .bcc-avatar.md {
+        same as default 
+    }*/
+	.bcc-avatar.lg {
+		@apply text-md size-10;
+		--p-icon-size: var(--icon-size-md);
+	}
+	.bcc-avatar.xl {
+		@apply size-12 text-xl;
+		--p-icon-size: var(--icon-size-lg);
+	}
+	.bcc-avatar.xxl {
+		@apply size-20 text-3xl;
+		--p-icon-size: var(--icon-size-xl);
+	}
+	.bcc-avatar.xxxl {
+		@apply size-24 text-4xl;
+		--p-icon-size: var(--icon-size-xl);
+	}
 
-    .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.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%);
-    }
+	.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 {
@@ -2403,6 +2819,9 @@ GUTTER FIX
         height: 100%;
         overflow: auto;
     }
+    .bcc-tabs-fluid.p-tabs {
+        width: 100%;
+    }
 }
 
 
@@ -2425,24 +2844,30 @@ GUTTER FIX
 
 
 
-:root, :host {
+: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;
+	@apply m-0 p-0 font-sans antialiased;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	line-height: 1.2;
+	font-kerning: normal;
+}
 
+hr {
+	border-color: var(--color-border-default);
 }
 
 b,
 strong,
 .bold {
-  font-weight: bold;
-  --ctx-text: var(--ctx-text-bold);
+	font-weight: bold;
+	--ctx-text: var(--ctx-text-bold);
 }
 
 /* Disable state */
 :disabled,
 .disabled {
-  cursor: not-allowed;
-  pointer-events: none;
+	cursor: not-allowed;
+	pointer-events: none;
 }