@mattermost/compass-ui 0.1.0-alpha.1 → 0.1.0-alpha.10

package/README.md

@@ -19,26 +19,28 @@ import '@mattermost/compass-ui/styles';
 import '@mattermost/compass-ui/component-styles';
 ```
 
-Standalone hosts (Storybook, playground) also need document chrome:
+Standalone hosts (Storybook, playground) also need theme presets and document chrome:
 
 ```tsx
 import '@mattermost/compass-ui/styles/standalone';
 ```
 
-Do not load `/styles/standalone` into Mattermost webapp.
+Do not load `/styles/standalone` into Mattermost webapp (it already owns themes, reset, and document styles).
 
-Set a theme on `<html>`:
+Set a theme on `<html>` (standalone hosts):
 
 ```html
 <html data-theme="denim">
 ```
 
-Import components:
+Import components from **subpaths** (one module graph per import — required for Jest and recommended for webpack):
 
 ```tsx
-import { Button } from '@mattermost/compass-ui';
+import { Button } from '@mattermost/compass-ui/components/button';
 ```
 
+The root barrel (`@mattermost/compass-ui`) remains for backwards compatibility but loads the full package.
+
 ## Development
 
 From the monorepo root:
@@ -50,9 +52,12 @@ npm run storybook     # component catalog on :6006
 
 ## Package layout
 
-- `dist/index.js` / `dist/index.cjs` — component bundle (ESM + CJS)
-- `dist/compass-ui.css` — tokens, themes, and webapp-compat defaults (`./styles`)
-- `dist/compass-ui-standalone.css` — CSS reset + `body` / heading chrome for standalone hosts (`./styles/standalone`)
+- `dist/components/<name>/index.js` / `.cjs` — per-component subpaths (`@mattermost/compass-ui/components/<name>`)
+- `dist/hooks/<name>.js` / `.cjs` — hooks (`@mattermost/compass-ui/hooks/<name>`)
+- `dist/illustrations/<name>.js` / `.cjs` — brand SVG artwork (`@mattermost/compass-ui/illustrations/<name>`)
+- `dist/index.js` / `dist/index.cjs` — legacy root barrel (ESM + CJS)
+- `dist/compass-ui.css` — tokens and webapp-compat defaults (`./styles`)
+- `dist/compass-ui-standalone.css` — theme presets + CSS reset + `body` / heading chrome for standalone hosts (`./styles/standalone`)
 - `dist/index.css` — component CSS modules (injected at build; also available as `./component-styles`)
 
 ## Storybook
@@ -76,7 +81,7 @@ npm run storybook --workspace=@mattermost/compass-ui
 
 ## Integration and releases
 
-- [INTEGRATION.md](./INTEGRATION.md) — Vite + webapp consumer setup
+- [INTEGRATION.md](./INTEGRATION.md) — Vite + webapp consumer setup, **release → CI publish** flow
 - [CHANGELOG.md](./CHANGELOG.md) — release history
 
 Validate a publishable tarball from the monorepo root:

package/dist/compass-ui-standalone.css

@@ -1,3 +1,220 @@
+:root,
+[data-theme=denim] {
+  --sidebar-bg: var(--color-indigo-500);
+  --sidebar-bg-rgb: var(--color-indigo-500-rgb);
+  --sidebar-header-bg: #192a4d;
+  --sidebar-header-bg-rgb: 25, 42, 77;
+  --sidebar-teambar-bg: #162545;
+  --sidebar-teambar-bg-rgb: 22, 37, 69;
+  --sidebar-text: var(--color-neutral-0);
+  --sidebar-text-rgb: var(--color-neutral-0-rgb);
+  --sidebar-text-hover-bg: var(--color-indigo-400);
+  --sidebar-text-hover-bg-rgb: var(--color-indigo-400-rgb);
+  --sidebar-text-active-border: var(--color-blue-300);
+  --sidebar-text-active-border-rgb: var(--color-blue-300-rgb);
+  --sidebar-text-active-color: var(--color-neutral-0);
+  --sidebar-unread-text: var(--color-neutral-0);
+  --sidebar-header-text-color: var(--color-neutral-0);
+  --center-channel-bg: var(--color-neutral-0);
+  --center-channel-bg-rgb: var(--color-neutral-0-rgb);
+  --center-channel-color: var(--color-neutral-900);
+  --center-channel-color-rgb: var(--color-neutral-900-rgb);
+  --button-bg: var(--color-blue-500);
+  --button-bg-rgb: var(--color-blue-500-rgb);
+  --button-color: var(--color-neutral-0);
+  --button-color-rgb: var(--color-neutral-0-rgb);
+  --focus-ring-color: var(--button-bg);
+  --focus-ring-color-rgb: var(--button-bg-rgb);
+  --link-color: var(--color-blue-500);
+  --link-color-rgb: var(--color-blue-500-rgb);
+  --error-text: var(--color-red-400);
+  --error-text-color-rgb: var(--color-red-400-rgb);
+  --mention-bg: var(--color-neutral-0);
+  --mention-bg-rgb: var(--color-neutral-0-rgb);
+  --mention-color: var(--color-indigo-500);
+  --mention-color-rgb: var(--color-indigo-500-rgb);
+  --mention-highlight-bg: var(--color-yellow-200);
+  --mention-highlight-link: var(--color-neutral-1100);
+  --new-message-separator: var(--color-yellow-600);
+  --online-indicator: var(--color-green-500);
+  --away-indicator: var(--color-yellow-500);
+  --dnd-indicator: var(--color-red-400);
+  --calls-bg: var(--color-indigo-600);
+  --calls-bg-rgb: var(--color-indigo-600-rgb);
+}
+
+[data-theme=sapphire] {
+  --sidebar-bg: #1543a3;
+  --sidebar-bg-rgb: 21, 67, 163;
+  --sidebar-header-bg: #123b91;
+  --sidebar-header-bg-rgb: 18, 59, 145;
+  --sidebar-teambar-bg: #123582;
+  --sidebar-teambar-bg-rgb: 18, 53, 130;
+  --sidebar-text: var(--color-neutral-0);
+  --sidebar-text-rgb: var(--color-neutral-0-rgb);
+  --sidebar-text-hover-bg: #2a58ba;
+  --sidebar-text-hover-bg-rgb: 42, 88, 186;
+  --sidebar-text-active-border: var(--color-cyan-300);
+  --sidebar-text-active-border-rgb: var(--color-cyan-300-rgb);
+  --sidebar-text-active-color: var(--color-neutral-0);
+  --sidebar-unread-text: var(--color-neutral-0);
+  --sidebar-header-text-color: var(--color-neutral-0);
+  --center-channel-bg: var(--color-neutral-0);
+  --center-channel-bg-rgb: var(--color-neutral-0-rgb);
+  --center-channel-color: var(--color-neutral-900);
+  --center-channel-color-rgb: var(--color-neutral-900-rgb);
+  --button-bg: var(--color-blue-500);
+  --button-bg-rgb: var(--color-blue-500-rgb);
+  --button-color: var(--color-neutral-0);
+  --focus-ring-color: var(--button-bg);
+  --focus-ring-color-rgb: var(--button-bg-rgb);
+  --link-color: var(--color-blue-500);
+  --link-color-rgb: var(--color-blue-500-rgb);
+  --error-text: var(--color-red-300);
+  --error-text-color-rgb: var(--color-red-300-rgb);
+  --mention-bg: var(--color-neutral-0);
+  --mention-bg-rgb: var(--color-neutral-0-rgb);
+  --mention-color: #1543a3;
+  --mention-color-rgb: 21, 67, 163;
+  --mention-highlight-bg: var(--color-teal-200);
+  --mention-highlight-link: var(--color-teal-800);
+  --new-message-separator: var(--color-yellow-400);
+  --online-indicator: var(--color-green-500);
+  --away-indicator: var(--color-yellow-500);
+  --dnd-indicator: var(--color-red-400);
+  --calls-bg: #091d48;
+  --calls-bg-rgb: 9, 29, 72;
+}
+
+[data-theme=quartz] {
+  --sidebar-bg: var(--color-neutral-50);
+  --sidebar-bg-rgb: var(--color-neutral-50-rgb);
+  --sidebar-header-bg: #ebecef;
+  --sidebar-header-bg-rgb: 235, 236, 239;
+  --sidebar-teambar-bg: #e5e7eb;
+  --sidebar-teambar-bg-rgb: 229, 231, 235;
+  --sidebar-text: var(--color-neutral-1100);
+  --sidebar-text-rgb: var(--color-neutral-1100-rgb);
+  --sidebar-text-hover-bg: #e8eaed;
+  --sidebar-text-hover-bg-rgb: 232, 234, 237;
+  --sidebar-text-active-border: var(--color-cyan-500);
+  --sidebar-text-active-border-rgb: var(--color-cyan-500-rgb);
+  --sidebar-text-active-color: var(--color-neutral-1100);
+  --sidebar-unread-text: var(--color-neutral-1100);
+  --sidebar-header-text-color: var(--color-neutral-1100);
+  --center-channel-bg: var(--color-neutral-0);
+  --center-channel-bg-rgb: var(--color-neutral-0-rgb);
+  --center-channel-color: var(--color-neutral-900);
+  --center-channel-color-rgb: var(--color-neutral-900-rgb);
+  --button-bg: var(--color-blue-500);
+  --button-bg-rgb: var(--color-blue-500-rgb);
+  --button-color: var(--color-neutral-0);
+  --focus-ring-color: var(--button-bg);
+  --focus-ring-color-rgb: var(--button-bg-rgb);
+  --link-color: var(--color-blue-500);
+  --link-color-rgb: var(--color-blue-500-rgb);
+  --error-text: var(--color-red-400);
+  --error-text-color-rgb: var(--color-red-400-rgb);
+  --mention-bg: var(--color-blue-500);
+  --mention-bg-rgb: var(--color-blue-500-rgb);
+  --mention-color: var(--color-neutral-0);
+  --mention-color-rgb: var(--color-neutral-0-rgb);
+  --mention-highlight-bg: var(--color-teal-200);
+  --mention-highlight-link: var(--color-teal-800);
+  --new-message-separator: var(--color-teal-600);
+  --online-indicator: var(--color-green-500);
+  --away-indicator: var(--color-yellow-500);
+  --dnd-indicator: var(--color-red-400);
+  --calls-bg: var(--color-neutral-1050);
+  --calls-bg-rgb: var(--color-neutral-1050-rgb);
+}
+
+[data-theme=indigo] {
+  --sidebar-bg: #151e32;
+  --sidebar-bg-rgb: 21, 30, 50;
+  --sidebar-header-bg: #182339;
+  --sidebar-header-bg-rgb: 24, 35, 57;
+  --sidebar-teambar-bg: #1c2740;
+  --sidebar-teambar-bg-rgb: 28, 39, 64;
+  --sidebar-text: var(--color-neutral-0);
+  --sidebar-text-rgb: var(--color-neutral-0-rgb);
+  --sidebar-text-hover-bg: #222c3f;
+  --sidebar-text-hover-bg-rgb: 34, 44, 63;
+  --sidebar-text-active-border: #4a7ce8;
+  --sidebar-text-active-border-rgb: 74, 124, 232;
+  --sidebar-text-active-color: var(--color-neutral-0);
+  --sidebar-unread-text: var(--color-neutral-0);
+  --sidebar-header-text-color: var(--color-neutral-0);
+  --center-channel-bg: #111827;
+  --center-channel-bg-rgb: 17, 24, 39;
+  --center-channel-color: var(--color-neutral-150);
+  --center-channel-color-rgb: var(--color-neutral-150-rgb);
+  --button-bg: #4a7ce8;
+  --button-bg-rgb: 74, 124, 232;
+  --button-color: var(--color-neutral-0);
+  --focus-ring-color: var(--button-bg);
+  --focus-ring-color-rgb: var(--button-bg-rgb);
+  --link-color: var(--color-blue-300);
+  --link-color-rgb: var(--color-blue-300-rgb);
+  --error-text: var(--color-red-300);
+  --error-text-color-rgb: var(--color-red-300-rgb);
+  --mention-bg: #4a7ce8;
+  --mention-bg-rgb: 74, 124, 232;
+  --mention-color: var(--color-neutral-0);
+  --mention-color-rgb: var(--color-neutral-0-rgb);
+  --mention-highlight-bg: var(--color-blue-700);
+  --mention-highlight-link: var(--color-teal-100);
+  --new-message-separator: var(--color-yellow-400);
+  --online-indicator: var(--color-green-500);
+  --away-indicator: var(--color-yellow-500);
+  --dnd-indicator: var(--color-red-400);
+  --calls-bg: #222c3f;
+  --calls-bg-rgb: 34, 44, 63;
+}
+
+[data-theme=onyx] {
+  --sidebar-bg: #202228;
+  --sidebar-bg-rgb: 32, 34, 40;
+  --sidebar-header-bg: #24272d;
+  --sidebar-header-bg-rgb: 36, 39, 45;
+  --sidebar-teambar-bg: #292c33;
+  --sidebar-teambar-bg-rgb: 41, 44, 51;
+  --sidebar-text: var(--color-neutral-0);
+  --sidebar-text-rgb: var(--color-neutral-0-rgb);
+  --sidebar-text-hover-bg: #25262a;
+  --sidebar-text-hover-bg-rgb: 37, 38, 42;
+  --sidebar-text-active-border: #4a7ce8;
+  --sidebar-text-active-border-rgb: 74, 124, 232;
+  --sidebar-text-active-color: var(--color-neutral-0);
+  --sidebar-unread-text: var(--color-neutral-0);
+  --sidebar-header-text-color: var(--color-neutral-0);
+  --center-channel-bg: #191b1f;
+  --center-channel-bg-rgb: 25, 27, 31;
+  --center-channel-color: var(--color-neutral-150);
+  --center-channel-color-rgb: var(--color-neutral-150-rgb);
+  --button-bg: #4a7ce8;
+  --button-bg-rgb: 74, 124, 232;
+  --button-color: var(--color-neutral-0);
+  --focus-ring-color: var(--button-bg);
+  --focus-ring-color-rgb: var(--button-bg-rgb);
+  --link-color: var(--color-blue-300);
+  --link-color-rgb: var(--color-blue-300-rgb);
+  --error-text: var(--color-red-300);
+  --error-text-color-rgb: var(--color-red-300-rgb);
+  --mention-bg: #4a7ce8;
+  --mention-bg-rgb: 74, 124, 232;
+  --mention-color: var(--color-neutral-0);
+  --mention-color-rgb: var(--color-neutral-0-rgb);
+  --mention-highlight-bg: var(--color-teal-800);
+  --mention-highlight-link: var(--color-teal-100);
+  --new-message-separator: var(--color-yellow-400);
+  --online-indicator: var(--color-green-500);
+  --away-indicator: var(--color-yellow-500);
+  --dnd-indicator: var(--color-red-400);
+  --calls-bg: #24262d;
+  --calls-bg-rgb: 36, 38, 45;
+}
+
 *,
 *::before,
 *::after {

package/dist/compass-ui.css

@@ -298,211 +298,7 @@
     --semantic-color-success: var(--color-green-600-rgb);
     --semantic-color-warning: var(--color-yellow-600-rgb);
     --semantic-color-danger: var(--color-red-500-rgb);
+    --focus-ring-color: var(--button-bg);
+    --focus-ring-color-rgb: var(--button-bg-rgb);
   }
 }
-:root,
-[data-theme=denim] {
-  --sidebar-bg: var(--color-indigo-500);
-  --sidebar-bg-rgb: var(--color-indigo-500-rgb);
-  --sidebar-header-bg: #192a4d;
-  --sidebar-header-bg-rgb: 25, 42, 77;
-  --sidebar-teambar-bg: #162545;
-  --sidebar-teambar-bg-rgb: 22, 37, 69;
-  --sidebar-text: var(--color-neutral-0);
-  --sidebar-text-rgb: var(--color-neutral-0-rgb);
-  --sidebar-text-hover-bg: var(--color-indigo-400);
-  --sidebar-text-hover-bg-rgb: var(--color-indigo-400-rgb);
-  --sidebar-text-active-border: var(--color-blue-300);
-  --sidebar-text-active-border-rgb: var(--color-blue-300-rgb);
-  --sidebar-text-active-color: var(--color-neutral-0);
-  --sidebar-unread-text: var(--color-neutral-0);
-  --sidebar-header-text-color: var(--color-neutral-0);
-  --center-channel-bg: var(--color-neutral-0);
-  --center-channel-bg-rgb: var(--color-neutral-0-rgb);
-  --center-channel-color: var(--color-neutral-900);
-  --center-channel-color-rgb: var(--color-neutral-900-rgb);
-  --button-bg: var(--color-blue-500);
-  --button-bg-rgb: var(--color-blue-500-rgb);
-  --button-color: var(--color-neutral-0);
-  --button-color-rgb: var(--color-neutral-0-rgb);
-  --link-color: var(--color-blue-600);
-  --link-color-rgb: var(--color-blue-600-rgb);
-  --error-text: var(--color-red-400);
-  --error-text-color-rgb: var(--color-red-400-rgb);
-  --mention-bg: var(--color-neutral-0);
-  --mention-bg-rgb: var(--color-neutral-0-rgb);
-  --mention-color: var(--color-indigo-500);
-  --mention-color-rgb: var(--color-indigo-500-rgb);
-  --mention-highlight-bg: var(--color-yellow-200);
-  --mention-highlight-link: var(--color-neutral-1100);
-  --new-message-separator: var(--color-yellow-600);
-  --online-indicator: var(--color-green-500);
-  --away-indicator: var(--color-yellow-500);
-  --dnd-indicator: var(--color-red-400);
-  --calls-bg: var(--color-indigo-600);
-  --calls-bg-rgb: var(--color-indigo-600-rgb);
-}
-
-[data-theme=sapphire] {
-  --sidebar-bg: #1543a3;
-  --sidebar-bg-rgb: 21, 67, 163;
-  --sidebar-header-bg: #123b91;
-  --sidebar-header-bg-rgb: 18, 59, 145;
-  --sidebar-teambar-bg: #123582;
-  --sidebar-teambar-bg-rgb: 18, 53, 130;
-  --sidebar-text: var(--color-neutral-0);
-  --sidebar-text-rgb: var(--color-neutral-0-rgb);
-  --sidebar-text-hover-bg: #2a58ba;
-  --sidebar-text-hover-bg-rgb: 42, 88, 186;
-  --sidebar-text-active-border: var(--color-cyan-300);
-  --sidebar-text-active-border-rgb: var(--color-cyan-300-rgb);
-  --sidebar-text-active-color: var(--color-neutral-0);
-  --sidebar-unread-text: var(--color-neutral-0);
-  --sidebar-header-text-color: var(--color-neutral-0);
-  --center-channel-bg: var(--color-neutral-0);
-  --center-channel-bg-rgb: var(--color-neutral-0-rgb);
-  --center-channel-color: var(--color-neutral-900);
-  --center-channel-color-rgb: var(--color-neutral-900-rgb);
-  --button-bg: var(--color-blue-500);
-  --button-bg-rgb: var(--color-blue-500-rgb);
-  --button-color: var(--color-neutral-0);
-  --link-color: var(--color-blue-600);
-  --link-color-rgb: var(--color-blue-600-rgb);
-  --error-text: var(--color-red-300);
-  --error-text-color-rgb: var(--color-red-300-rgb);
-  --mention-bg: var(--color-neutral-0);
-  --mention-bg-rgb: var(--color-neutral-0-rgb);
-  --mention-color: #1543a3;
-  --mention-color-rgb: 21, 67, 163;
-  --mention-highlight-bg: var(--color-teal-200);
-  --mention-highlight-link: var(--color-teal-800);
-  --new-message-separator: var(--color-yellow-400);
-  --online-indicator: var(--color-green-500);
-  --away-indicator: var(--color-yellow-500);
-  --dnd-indicator: var(--color-red-400);
-  --calls-bg: #091d48;
-  --calls-bg-rgb: 9, 29, 72;
-}
-
-[data-theme=quartz] {
-  --sidebar-bg: var(--color-neutral-50);
-  --sidebar-bg-rgb: var(--color-neutral-50-rgb);
-  --sidebar-header-bg: #ebecef;
-  --sidebar-header-bg-rgb: 235, 236, 239;
-  --sidebar-teambar-bg: #e5e7eb;
-  --sidebar-teambar-bg-rgb: 229, 231, 235;
-  --sidebar-text: var(--color-neutral-1100);
-  --sidebar-text-rgb: var(--color-neutral-1100-rgb);
-  --sidebar-text-hover-bg: #e8eaed;
-  --sidebar-text-hover-bg-rgb: 232, 234, 237;
-  --sidebar-text-active-border: var(--color-cyan-500);
-  --sidebar-text-active-border-rgb: var(--color-cyan-500-rgb);
-  --sidebar-text-active-color: var(--color-neutral-1100);
-  --sidebar-unread-text: var(--color-neutral-1100);
-  --sidebar-header-text-color: var(--color-neutral-1100);
-  --center-channel-bg: var(--color-neutral-0);
-  --center-channel-bg-rgb: var(--color-neutral-0-rgb);
-  --center-channel-color: var(--color-neutral-900);
-  --center-channel-color-rgb: var(--color-neutral-900-rgb);
-  --button-bg: var(--color-blue-500);
-  --button-bg-rgb: var(--color-blue-500-rgb);
-  --button-color: var(--color-neutral-0);
-  --link-color: var(--color-blue-600);
-  --link-color-rgb: var(--color-blue-600-rgb);
-  --error-text: var(--color-red-400);
-  --error-text-color-rgb: var(--color-red-400-rgb);
-  --mention-bg: var(--color-blue-500);
-  --mention-bg-rgb: var(--color-blue-500-rgb);
-  --mention-color: var(--color-neutral-0);
-  --mention-color-rgb: var(--color-neutral-0-rgb);
-  --mention-highlight-bg: var(--color-teal-200);
-  --mention-highlight-link: var(--color-teal-800);
-  --new-message-separator: var(--color-teal-600);
-  --online-indicator: var(--color-green-500);
-  --away-indicator: var(--color-yellow-500);
-  --dnd-indicator: var(--color-red-400);
-  --calls-bg: var(--color-neutral-1050);
-  --calls-bg-rgb: var(--color-neutral-1050-rgb);
-}
-
-[data-theme=indigo] {
-  --sidebar-bg: #151e32;
-  --sidebar-bg-rgb: 21, 30, 50;
-  --sidebar-header-bg: #182339;
-  --sidebar-header-bg-rgb: 24, 35, 57;
-  --sidebar-teambar-bg: #1c2740;
-  --sidebar-teambar-bg-rgb: 28, 39, 64;
-  --sidebar-text: var(--color-neutral-0);
-  --sidebar-text-rgb: var(--color-neutral-0-rgb);
-  --sidebar-text-hover-bg: #222c3f;
-  --sidebar-text-hover-bg-rgb: 34, 44, 63;
-  --sidebar-text-active-border: #4a7ce8;
-  --sidebar-text-active-border-rgb: 74, 124, 232;
-  --sidebar-text-active-color: var(--color-neutral-0);
-  --sidebar-unread-text: var(--color-neutral-0);
-  --sidebar-header-text-color: var(--color-neutral-0);
-  --center-channel-bg: #111827;
-  --center-channel-bg-rgb: 17, 24, 39;
-  --center-channel-color: var(--color-neutral-150);
-  --center-channel-color-rgb: var(--color-neutral-150-rgb);
-  --button-bg: #4a7ce8;
-  --button-bg-rgb: 74, 124, 232;
-  --button-color: var(--color-neutral-0);
-  --link-color: var(--color-blue-300);
-  --link-color-rgb: var(--color-blue-300-rgb);
-  --error-text: var(--color-red-300);
-  --error-text-color-rgb: var(--color-red-300-rgb);
-  --mention-bg: #4a7ce8;
-  --mention-bg-rgb: 74, 124, 232;
-  --mention-color: var(--color-neutral-0);
-  --mention-color-rgb: var(--color-neutral-0-rgb);
-  --mention-highlight-bg: var(--color-blue-700);
-  --mention-highlight-link: var(--color-teal-100);
-  --new-message-separator: var(--color-yellow-400);
-  --online-indicator: var(--color-green-500);
-  --away-indicator: var(--color-yellow-500);
-  --dnd-indicator: var(--color-red-400);
-  --calls-bg: #222c3f;
-  --calls-bg-rgb: 34, 44, 63;
-}
-
-[data-theme=onyx] {
-  --sidebar-bg: #202228;
-  --sidebar-bg-rgb: 32, 34, 40;
-  --sidebar-header-bg: #24272d;
-  --sidebar-header-bg-rgb: 36, 39, 45;
-  --sidebar-teambar-bg: #292c33;
-  --sidebar-teambar-bg-rgb: 41, 44, 51;
-  --sidebar-text: var(--color-neutral-0);
-  --sidebar-text-rgb: var(--color-neutral-0-rgb);
-  --sidebar-text-hover-bg: #25262a;
-  --sidebar-text-hover-bg-rgb: 37, 38, 42;
-  --sidebar-text-active-border: #4a7ce8;
-  --sidebar-text-active-border-rgb: 74, 124, 232;
-  --sidebar-text-active-color: var(--color-neutral-0);
-  --sidebar-unread-text: var(--color-neutral-0);
-  --sidebar-header-text-color: var(--color-neutral-0);
-  --center-channel-bg: #191b1f;
-  --center-channel-bg-rgb: 25, 27, 31;
-  --center-channel-color: var(--color-neutral-150);
-  --center-channel-color-rgb: var(--color-neutral-150-rgb);
-  --button-bg: #4a7ce8;
-  --button-bg-rgb: 74, 124, 232;
-  --button-color: var(--color-neutral-0);
-  --link-color: var(--color-blue-300);
-  --link-color-rgb: var(--color-blue-300-rgb);
-  --error-text: var(--color-red-300);
-  --error-text-color-rgb: var(--color-red-300-rgb);
-  --mention-bg: #4a7ce8;
-  --mention-bg-rgb: 74, 124, 232;
-  --mention-color: var(--color-neutral-0);
-  --mention-color-rgb: var(--color-neutral-0-rgb);
-  --mention-highlight-bg: var(--color-teal-800);
-  --mention-highlight-link: var(--color-teal-100);
-  --new-message-separator: var(--color-yellow-400);
-  --online-indicator: var(--color-green-500);
-  --away-indicator: var(--color-yellow-500);
-  --dnd-indicator: var(--color-red-400);
-  --calls-bg: #24262d;
-  --calls-bg-rgb: 36, 38, 45;
-}

package/dist/components/action-button/ActionButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),c=require("../icon/Icon.cjs"),t=require("./ActionButton.module.scss.cjs");function d({icon:n,label:u,active:o,destructive:a=!1,className:i,type:s="button",...l}){const r=[t.default["action-button"],o?t.default["action-button--active"]:"",a?t.default["action-button--destructive"]:"",i??""].filter(Boolean).join(" ");return e.jsxs("button",{className:r,type:s,"aria-pressed":o===void 0?void 0:o,...l,children:[e.jsx("span",{className:t.default["action-button__icon"],"aria-hidden":!0,children:e.jsx(c.IconSlotContext.Provider,{value:{size:"20"},children:n})}),e.jsx("span",{className:t.default["action-button__label"],children:u})]})}exports.default=d;
+//# sourceMappingURL=ActionButton.cjs.map

package/dist/components/action-button/ActionButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.cjs","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */\n  icon: ReactNode;\n  label: string;\n  /** When set, this is a toggle; maps to `aria-pressed`. */\n  active?: boolean;\n  destructive?: boolean;\n}\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n */\nexport default function ActionButton({\n  icon,\n  label,\n  active,\n  destructive = false,\n  className,\n  type = 'button',\n  ...htmlProps\n}: ActionButtonProps) {\n  const rootClass = [\n    styles['action-button'],\n    active ? styles['action-button--active'] : '',\n    destructive ? styles['action-button--destructive'] : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      className={rootClass}\n      type={type}\n      aria-pressed={active === undefined ? undefined : active}\n      {...htmlProps}\n    >\n      <span className={styles['action-button__icon']} aria-hidden>\n        <IconSlotContext.Provider value={{ size: '20' }}>\n          {icon}\n        </IconSlotContext.Provider>\n      </span>\n      <span className={styles['action-button__label']}>{label}</span>\n    </button>\n  );\n}\n"],"names":["ActionButton","icon","label","active","destructive","className","type","htmlProps","rootClass","styles","jsxs","jsx","IconSlotContext"],"mappings":"2NAkBA,SAAwBA,EAAa,CACnC,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EAAc,GACd,UAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBN,EAASM,EAAAA,QAAO,uBAAuB,EAAI,GAC3CL,EAAcK,EAAAA,QAAO,4BAA4B,EAAI,GACrDJ,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEK,EAAAA,KAAC,SAAA,CACC,UAAWF,EACX,KAAAF,EACA,eAAcH,IAAW,OAAY,OAAYA,EAChD,GAAGI,EAEJ,SAAA,CAAAI,MAAC,QAAK,UAAWF,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAE,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,QACC,OAAA,CAAK,UAAWH,EAAAA,QAAO,sBAAsB,EAAI,SAAAP,CAAA,CAAM,CAAA,CAAA,CAAA,CAG9D"}

package/dist/components/action-button/ActionButton.css

@@ -0,0 +1 @@
+._action-button_1u191_2{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xxxs);width:88px;padding:var(--spacing-m) var(--spacing-l) var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.04);color:rgba(var(--center-channel-color-rgb),.64);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._action-button_1u191_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._action-button_1u191_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._action-button_1u191_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._action-button_1u191_2:disabled{opacity:.48;cursor:not-allowed}._action-button--active_1u191_34{background-color:rgba(var(--button-bg-rgb),.08)}._action-button--active_1u191_34 ._action-button__icon_1u191_37,._action-button--active_1u191_34 ._action-button__label_1u191_38{color:var(--link-color)}._action-button--active_1u191_34:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._action-button--active_1u191_34:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16)}._action-button--destructive_1u191_47{--focus-ring-color: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04);color:var(--error-text, var(--color-danger))}._action-button--destructive_1u191_47:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._action-button--destructive_1u191_47:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}._action-button__icon_1u191_37{display:flex;align-items:center;justify-content:center;width:var(--icon-size-20);height:var(--icon-size-20);flex-shrink:0}._action-button__label_1u191_38{font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-50);letter-spacing:.11px;white-space:nowrap;text-align:center}

package/dist/components/action-button/ActionButton.d.ts

@@ -0,0 +1,16 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */
+    icon: ReactNode;
+    label: string;
+    /** When set, this is a toggle; maps to `aria-pressed`. */
+    active?: boolean;
+    destructive?: boolean;
+}
+/**
+ * Action Buttons surface a small set of high-frequency actions in a fixed context — a
+ * profile popover, a channel info panel, a card. They sit close to the content they act on
+ * and read as a row of equal-weight choices.
+ */
+export default function ActionButton({ icon, label, active, destructive, className, type, ...htmlProps }: ActionButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ActionButton.d.ts.map

package/dist/components/action-button/ActionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,sGAAsG;IACtG,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,KAAK,EACL,MAAM,EACN,WAAmB,EACnB,SAAS,EACT,IAAe,EACf,GAAG,SAAS,EACb,EAAE,iBAAiB,2CAyBnB"}

package/dist/components/action-button/ActionButton.js

@@ -0,0 +1,36 @@
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import { IconSlotContext as d } from "../icon/Icon.js";
+import t from "./ActionButton.module.scss.js";
+function p({
+  icon: e,
+  label: i,
+  active: o,
+  destructive: a = !1,
+  className: r,
+  type: s = "button",
+  ...c
+}) {
+  const l = [
+    t["action-button"],
+    o ? t["action-button--active"] : "",
+    a ? t["action-button--destructive"] : "",
+    r ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      className: l,
+      type: s,
+      "aria-pressed": o === void 0 ? void 0 : o,
+      ...c,
+      children: [
+        /* @__PURE__ */ n("span", { className: t["action-button__icon"], "aria-hidden": !0, children: /* @__PURE__ */ n(d.Provider, { value: { size: "20" }, children: e }) }),
+        /* @__PURE__ */ n("span", { className: t["action-button__label"], children: i })
+      ]
+    }
+  );
+}
+export {
+  p as default
+};
+//# sourceMappingURL=ActionButton.js.map

package/dist/components/action-button/ActionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.js","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */\n  icon: ReactNode;\n  label: string;\n  /** When set, this is a toggle; maps to `aria-pressed`. */\n  active?: boolean;\n  destructive?: boolean;\n}\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n */\nexport default function ActionButton({\n  icon,\n  label,\n  active,\n  destructive = false,\n  className,\n  type = 'button',\n  ...htmlProps\n}: ActionButtonProps) {\n  const rootClass = [\n    styles['action-button'],\n    active ? styles['action-button--active'] : '',\n    destructive ? styles['action-button--destructive'] : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      className={rootClass}\n      type={type}\n      aria-pressed={active === undefined ? undefined : active}\n      {...htmlProps}\n    >\n      <span className={styles['action-button__icon']} aria-hidden>\n        <IconSlotContext.Provider value={{ size: '20' }}>\n          {icon}\n        </IconSlotContext.Provider>\n      </span>\n      <span className={styles['action-button__label']}>{label}</span>\n    </button>\n  );\n}\n"],"names":["ActionButton","icon","label","active","destructive","className","type","htmlProps","rootClass","styles","jsxs","jsx","IconSlotContext"],"mappings":";;;AAkBA,SAAwBA,EAAa;AAAA,EACnC,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAY;AAAA,IAChBC,EAAO,eAAe;AAAA,IACtBN,IAASM,EAAO,uBAAuB,IAAI;AAAA,IAC3CL,IAAcK,EAAO,4BAA4B,IAAI;AAAA,IACrDJ,KAAa;AAAA,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAAF;AAAA,MACA,gBAAcH,MAAW,SAAY,SAAYA;AAAA,MAChD,GAAGI;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,UAAK,WAAWF,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAE,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,0BACC,QAAA,EAAK,WAAWH,EAAO,sBAAsB,GAAI,UAAAP,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9D;"}

package/dist/components/action-button/ActionButton.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ActionButton.css');const t={"action-button":"_action-button_1u191_2","action-button--active":"_action-button--active_1u191_34","action-button__icon":"_action-button__icon_1u191_37","action-button__label":"_action-button__label_1u191_38","action-button--destructive":"_action-button--destructive_1u191_47"};exports.default=t;
+//# sourceMappingURL=ActionButton.module.scss.cjs.map

package/dist/components/action-button/ActionButton.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/action-button/ActionButton.module.scss.js

@@ -0,0 +1,11 @@
+import './ActionButton.css';const t = {
+  "action-button": "_action-button_1u191_2",
+  "action-button--active": "_action-button--active_1u191_34",
+  "action-button__icon": "_action-button__icon_1u191_37",
+  "action-button__label": "_action-button__label_1u191_38",
+  "action-button--destructive": "_action-button--destructive_1u191_47"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=ActionButton.module.scss.js.map

package/dist/components/action-button/ActionButton.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/action-button/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./ActionButton.cjs");exports.ActionButton=t.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/action-button/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/action-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,mBAAmB,gBAAgB,CAAC"}

package/dist/components/action-button/index.js

@@ -0,0 +1,5 @@
+import { default as a } from "./ActionButton.js";
+export {
+  a as ActionButton
+};
+//# sourceMappingURL=index.js.map

package/dist/components/action-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/admin-console-header/AdminConsoleHeader.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__m=require("@mattermost/compass-icons/components/arrow-back-ios.js"),m=__m?.default??__m,__h=require("@mattermost/compass-icons/components/mattermost.js"),h=__h?.default??__h,l=require("../icon/Icon.cjs"),f=require("../icon-button/IconButton.cjs"),_=require("../tag/Tag.cjs"),s=require("./AdminConsoleHeader.module.scss.cjs");function j({title:n,showBack:d=!1,ariaLabelBack:o="Go back",onBackClick:i,enterpriseBadge:r=!1,enterpriseBadgeLabel:t="Enterprise",trailing:a,className:c=""}){const u=r?e.jsx(_.default,{label:t,size:"x-small",leadingIcon:e.jsx(l.default,{size:"12",glyph:e.jsx(h,{})})}):null;return e.jsx("header",{className:[s.default["admin-console-header"],c].join(" ").trim(),children:e.jsxs("div",{className:s.default["admin-console-header__row"],children:[d&&e.jsx("div",{className:s.default["admin-console-header__back"],children:e.jsx(f.default,{type:"button",style:"default",size:"medium",className:s.default["admin-console-header__back-button"],"aria-label":o,onClick:i,icon:e.jsx(l.default,{size:"20",glyph:e.jsx(m,{})})})}),e.jsxs("div",{className:s.default["admin-console-header__title-row"],children:[e.jsxs("div",{className:s.default["admin-console-header__intro"],children:[e.jsx("h1",{className:s.default["admin-console-header__title"],children:n}),u]}),a!=null?e.jsx("div",{className:s.default["admin-console-header__trailing"],children:a}):null]})]})})}exports.default=j;
+//# sourceMappingURL=AdminConsoleHeader.cjs.map

package/dist/components/admin-console-header/AdminConsoleHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminConsoleHeader.cjs","sources":["../../../src/components/admin-console-header/AdminConsoleHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport MattermostIcon from '@mattermost/compass-icons/components/mattermost';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport styles from './AdminConsoleHeader.module.scss';\n\nexport interface AdminConsoleHeaderProps {\n  /** Page heading (Heading 500). */\n  title: ReactNode;\n  /** When true, shows a back control with a divider from the title block. */\n  showBack?: boolean;\n  ariaLabelBack?: string;\n  onBackClick?: () => void;\n  /** Optional plan or edition tag beside the title. */\n  enterpriseBadge?: boolean;\n  enterpriseBadgeLabel?: string;\n  /** Optional actions on the trailing edge of the title row. */\n  trailing?: ReactNode;\n  className?: string;\n}\n\n/**\n * The Admin Console header is the stripe above scrolling System Console content. It anchors\n * the active page title, optional edition signalling, navigation back into nested settings,\n * and sparse trailing utilities.\n */\nexport default function AdminConsoleHeader({\n  title,\n  showBack = false,\n  ariaLabelBack = 'Go back',\n  onBackClick,\n  enterpriseBadge = false,\n  enterpriseBadgeLabel = 'Enterprise',\n  trailing,\n  className = '',\n}: AdminConsoleHeaderProps) {\n  const enterpriseChip =\n    enterpriseBadge ? (\n      <Tag\n        label={enterpriseBadgeLabel}\n        size=\"x-small\"\n        leadingIcon={<Icon size=\"12\" glyph={<MattermostIcon />} />}\n      />\n    ) : null;\n\n  return (\n    <header\n      className={[styles['admin-console-header'], className].join(' ').trim()}\n    >\n      <div className={styles['admin-console-header__row']}>\n        {showBack && (\n          <div className={styles['admin-console-header__back']}>\n            <IconButton\n              type=\"button\"\n              style=\"default\"\n              size=\"medium\"\n              className={styles['admin-console-header__back-button']}\n              aria-label={ariaLabelBack}\n              onClick={onBackClick}\n              icon={<Icon size=\"20\" glyph={<ArrowBackIosIcon />} />}\n            />\n          </div>\n        )}\n        <div className={styles['admin-console-header__title-row']}>\n          <div className={styles['admin-console-header__intro']}>\n            <h1 className={styles['admin-console-header__title']}>{title}</h1>\n            {enterpriseChip}\n          </div>\n          {trailing != null ? (\n            <div className={styles['admin-console-header__trailing']}>\n              {trailing}\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </header>\n  );\n}\n"],"names":["AdminConsoleHeader","title","showBack","ariaLabelBack","onBackClick","enterpriseBadge","enterpriseBadgeLabel","trailing","className","enterpriseChip","jsx","Tag","Icon","MattermostIcon","styles","jsxs","IconButton","ArrowBackIosIcon"],"mappings":"qaA4BA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,SAAAC,EAAW,GACX,cAAAC,EAAgB,UAChB,YAAAC,EACA,gBAAAC,EAAkB,GAClB,qBAAAC,EAAuB,aACvB,SAAAC,EACA,UAAAC,EAAY,EACd,EAA4B,CAC1B,MAAMC,EACJJ,EACEK,EAAAA,IAACC,EAAAA,QAAA,CACC,MAAOL,EACP,KAAK,UACL,kBAAcM,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAe,CAAA,CAAI,CAAA,CAAA,EAExD,KAEN,OACEH,EAAAA,IAAC,SAAA,CACC,UAAW,CAACI,EAAAA,QAAO,sBAAsB,EAAGN,CAAS,EAAE,KAAK,GAAG,EAAE,KAAA,EAEjE,SAAAO,EAAAA,KAAC,MAAA,CAAI,UAAWD,UAAO,2BAA2B,EAC/C,SAAA,CAAAZ,GACCQ,EAAAA,IAAC,MAAA,CAAI,UAAWI,EAAAA,QAAO,4BAA4B,EACjD,SAAAJ,EAAAA,IAACM,EAAAA,QAAA,CACC,KAAK,SACL,MAAM,UACN,KAAK,SACL,UAAWF,EAAAA,QAAO,mCAAmC,EACrD,aAAYX,EACZ,QAASC,EACT,WAAOQ,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACO,IAAiB,CAAA,CAAI,CAAA,CAAA,EAEvD,EAEFF,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iCAAiC,EACtD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,6BAA6B,EAClD,SAAA,CAAAJ,MAAC,KAAA,CAAG,UAAWI,EAAAA,QAAO,6BAA6B,EAAI,SAAAb,EAAM,EAC5DQ,CAAA,EACH,EACCF,GAAY,KACXG,MAAC,MAAA,CAAI,UAAWI,EAAAA,QAAO,gCAAgC,EACpD,SAAAP,CAAA,CACH,EACE,IAAA,CAAA,CACN,CAAA,CAAA,CACF,CAAA,CAAA,CAGN"}

package/dist/components/admin-console-header/AdminConsoleHeader.css

@@ -0,0 +1 @@
+._admin-console-header_1kerw_2{display:flex;flex-direction:column;width:100%;background:var(--center-channel-bg);border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12);height:64px}._admin-console-header__row_1kerw_10{display:flex;align-items:stretch;flex-shrink:0;width:100%;height:100%;min-height:0}._admin-console-header__back_1kerw_18{box-sizing:border-box;display:flex;flex-shrink:0;align-self:stretch;align-items:stretch;aspect-ratio:1/1;width:auto;border-right:1px solid rgba(var(--center-channel-color-rgb),.12)}._admin-console-header__back_1kerw_18 ._admin-console-header__back-button_1kerw_32{box-sizing:border-box;border-radius:0;width:64px;height:64px;flex-shrink:0;padding:var(--spacing-s)!important}._admin-console-header__title-row_1kerw_40{display:flex;flex:1;align-items:center;gap:var(--spacing-m);min-width:0;min-height:0;height:100%;padding:0 var(--spacing-xl)}._admin-console-header__intro_1kerw_50{display:flex;flex:1 1 auto;align-items:center;gap:var(--spacing-s);min-width:0}._admin-console-header__title_1kerw_40{flex-shrink:1;min-width:0;margin:0;font-family:var(--font-family-heading);font-size:var(--font-size-500);font-weight:var(--font-weight-semibold);line-height:var(--line-height-500);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._admin-console-header__trailing_1kerw_70{display:flex;align-items:center;gap:var(--spacing-xs);flex-shrink:0}