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

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,11 @@ 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/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 +80,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,210 @@
+: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;
+}
+
 *,
 *::before,
 *::after {

package/dist/compass-ui.css

@@ -300,209 +300,3 @@
     --semantic-color-danger: var(--color-red-500-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"),t=require("./ActionButton.module.scss.cjs");function c({icon:o,label:a,active:n=!1,destructive:s=!1,className:u,...l}){const i=[t.default["action-button"],n?t.default["action-button--active"]:"",s?t.default["action-button--destructive"]:"",u??""].filter(Boolean).join(" ");return e.jsxs("button",{className:i,"aria-pressed":n,...l,children:[e.jsx("span",{className:t.default["action-button__icon"],children:o}),e.jsx("span",{className:t.default["action-button__label"],children:a})]})}exports.default=c;
+//# 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 styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: ReactNode;\n  label: string;\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 = false,\n  destructive = false,\n  className,\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 className={rootClass} aria-pressed={active} {...htmlProps}>\n      <span className={styles['action-button__icon']}>{icon}</span>\n      <span className={styles['action-button__label']}>{label}</span>\n    </button>\n  );\n}\n"],"names":["ActionButton","icon","label","active","destructive","className","htmlProps","rootClass","styles","jsx"],"mappings":"6LAeA,SAAwBA,EAAa,CACnC,KAAAC,EACA,MAAAC,EACA,OAAAC,EAAS,GACT,YAAAC,EAAc,GACd,UAAAC,EACA,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBL,EAASK,EAAAA,QAAO,uBAAuB,EAAI,GAC3CJ,EAAcI,EAAAA,QAAO,4BAA4B,EAAI,GACrDH,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,cACG,SAAA,CAAO,UAAWE,EAAW,eAAcJ,EAAS,GAAGG,EACtD,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,qBAAqB,EAAI,SAAAP,EAAK,QACrD,OAAA,CAAK,UAAWO,EAAAA,QAAO,sBAAsB,EAAI,SAAAN,CAAA,CAAM,CAAA,EAC1D,CAEJ"}

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;AAG7D,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,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,MAAc,EACd,WAAmB,EACnB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,iBAAiB,2CAgBnB"}

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

@@ -0,0 +1,25 @@
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import t from "./ActionButton.module.scss.js";
+function f({
+  icon: a,
+  label: s,
+  active: o = !1,
+  destructive: e = !1,
+  className: i,
+  ...c
+}) {
+  const l = [
+    t["action-button"],
+    o ? t["action-button--active"] : "",
+    e ? t["action-button--destructive"] : "",
+    i ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("button", { className: l, "aria-pressed": o, ...c, children: [
+    /* @__PURE__ */ n("span", { className: t["action-button__icon"], children: a }),
+    /* @__PURE__ */ n("span", { className: t["action-button__label"], children: s })
+  ] });
+}
+export {
+  f 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 styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: ReactNode;\n  label: string;\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 = false,\n  destructive = false,\n  className,\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 className={rootClass} aria-pressed={active} {...htmlProps}>\n      <span className={styles['action-button__icon']}>{icon}</span>\n      <span className={styles['action-button__label']}>{label}</span>\n    </button>\n  );\n}\n"],"names":["ActionButton","icon","label","active","destructive","className","htmlProps","rootClass","styles","jsx"],"mappings":";;AAeA,SAAwBA,EAAa;AAAA,EACnC,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAY;AAAA,IAChBC,EAAO,eAAe;AAAA,IACtBL,IAASK,EAAO,uBAAuB,IAAI;AAAA,IAC3CJ,IAAcI,EAAO,4BAA4B,IAAI;AAAA,IACrDH,KAAa;AAAA,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,UAAA,EAAO,WAAWE,GAAW,gBAAcJ,GAAS,GAAGG,GACtD,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWD,EAAO,qBAAqB,GAAI,UAAAP,GAAK;AAAA,sBACrD,QAAA,EAAK,WAAWO,EAAO,sBAAsB,GAAI,UAAAN,EAAA,CAAM;AAAA,EAAA,GAC1D;AAEJ;"}

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

@@ -0,0 +1 @@
+._action-button_3tbmq_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),box-shadow var(--duration-quick) var(--ease-transition)}._action-button_3tbmq_2:focus-visible{outline:none}._action-button_3tbmq_2:focus-visible:not(:disabled){box-shadow:0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--button-bg)}._action-button_3tbmq_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._action-button_3tbmq_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._action-button_3tbmq_2:disabled{opacity:.48;cursor:not-allowed}._action-button--active_3tbmq_34{background-color:rgba(var(--button-bg-rgb),.08)}._action-button--active_3tbmq_34 ._action-button__icon_3tbmq_37,._action-button--active_3tbmq_34 ._action-button__label_3tbmq_38{color:var(--link-color)}._action-button--active_3tbmq_34:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._action-button--active_3tbmq_34:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16)}._action-button--destructive_3tbmq_47{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04);color:var(--error-text, var(--color-danger))}._action-button--destructive_3tbmq_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_3tbmq_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--destructive_3tbmq_47:focus-visible:not(:disabled){box-shadow:0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--error-text, var(--color-danger))}._action-button__icon_3tbmq_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_3tbmq_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.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ActionButton.module.css');const t={"action-button":"_action-button_3tbmq_2","action-button--active":"_action-button--active_3tbmq_34","action-button__icon":"_action-button__icon_3tbmq_37","action-button__label":"_action-button__label_3tbmq_38","action-button--destructive":"_action-button--destructive_3tbmq_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.module.css';const t = {
+  "action-button": "_action-button_3tbmq_2",
+  "action-button--active": "_action-button--active_3tbmq_34",
+  "action-button__icon": "_action-button__icon_3tbmq_37",
+  "action-button__label": "_action-button__label_3tbmq_38",
+  "action-button--destructive": "_action-button--destructive_3tbmq_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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminConsoleHeader.d.ts","sourceRoot":"","sources":["../../../src/components/admin-console-header/AdminConsoleHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,MAAM,WAAW,uBAAuB;IACtC,kCAAkC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,QAAgB,EAChB,aAAyB,EACzB,WAAW,EACX,eAAuB,EACvB,oBAAmC,EACnC,QAAQ,EACR,SAAc,GACf,EAAE,uBAAuB,2CA0CzB"}