@mattermost/compass-ui 0.1.0-alpha.26 → 0.1.0-alpha.27

package/dist/components/empty-state/EmptyState.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("../button/Button.cjs"),d=require("../illustration/Illustration.cjs"),c=require("../scrollbar/Scrollbar.cjs"),t=require("./EmptyState.module.scss.cjs");function m({illustration:l,title:u,description:s,action:a,className:r="",...i}){return e.jsx(c.default,{...i,className:[t.default["empty-state"],r].filter(Boolean).join(" "),children:e.jsxs("div",{className:t.default["empty-state__container"],children:[l!=null&&e.jsx("div",{className:t.default["empty-state__illustration"],children:e.jsx(d.default,{...l})}),e.jsxs("div",{className:t.default["empty-state__titles"],children:[e.jsx("h2",{className:t.default["empty-state__title"],children:u}),s!=null&&e.jsx("p",{className:t.default["empty-state__description"],children:s})]}),a!=null&&e.jsx("div",{className:t.default["empty-state__action"],children:e.jsx(n.default,{...a})})]})})}exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("../button/Button.cjs"),_=require("../illustration/Illustration.cjs"),f=require("../scrollbar/Scrollbar.cjs"),t=require("./EmptyState.module.scss.cjs");function j({illustration:s,title:r,titleLevel:i=2,description:a,descriptionAs:n="p",action:l,actionSlot:u,className:d="",...c}){const m=`h${i}`;return e.jsx(f.default,{...c,className:[t.default["empty-state"],d].filter(Boolean).join(" "),children:e.jsxs("div",{className:t.default["empty-state__container"],children:[s!=null&&e.jsx("div",{className:t.default["empty-state__illustration"],children:e.jsx(_.default,{...s})}),e.jsxs("div",{className:t.default["empty-state__titles"],children:[e.jsx(m,{className:t.default["empty-state__title"],children:r}),a!=null&&e.jsx(n,{className:t.default["empty-state__description"],children:a})]}),(l!=null||u!=null)&&e.jsxs("div",{className:t.default["empty-state__action"],children:[l!=null&&e.jsx(o.default,{...l}),u]})]})})}exports.default=j;
 //# sourceMappingURL=EmptyState.cjs.map

package/dist/components/empty-state/EmptyState.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.cjs","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './EmptyState.module.scss';\n\nexport interface EmptyStateProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'onScroll'\n> {\n  /** Illustration props (children = the SVG component). Rendered above the title. */\n  illustration?: IllustrationProps;\n  /** Main heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Body description. Supports ReactNode for inline formatting. */\n  description?: ReactNode;\n  /** Button props (children = label). Rendered below the description. */\n  action?: ButtonProps;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Empty State fills a view that has no content yet — no saved messages, no mentions, no\n * search results, no files. It pairs an illustration with a short explanation and, when\n * there's something the user can do next, a single action.\n */\nexport default function EmptyState({\n  illustration,\n  title,\n  description,\n  action,\n  className = '',\n  ...rest\n}: EmptyStateProps) {\n  return (\n    <Scrollbar\n      {...rest}\n      className={[styles['empty-state'], className].filter(Boolean).join(' ')}\n    >\n      <div className={styles['empty-state__container']}>\n        {illustration != null && (\n          <div className={styles['empty-state__illustration']}>\n            <Illustration {...illustration} />\n          </div>\n        )}\n        <div className={styles['empty-state__titles']}>\n          <h2 className={styles['empty-state__title']}>{title}</h2>\n          {description != null && (\n            <p className={styles['empty-state__description']}>{description}</p>\n          )}\n        </div>\n        {action != null && (\n          <div className={styles['empty-state__action']}>\n            <Button {...action} />\n          </div>\n        )}\n      </div>\n    </Scrollbar>\n  );\n}\n"],"names":["EmptyState","illustration","title","description","action","className","rest","jsx","Scrollbar","styles","jsxs","Illustration","Button"],"mappings":"mTA6BA,SAAwBA,EAAW,CACjC,aAAAC,EACA,MAAAC,EACA,YAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAoB,CAClB,OACEC,EAAAA,IAACC,EAAAA,QAAA,CACE,GAAGF,EACJ,UAAW,CAACG,UAAO,aAAa,EAAGJ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAEtE,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWD,UAAO,wBAAwB,EAC5C,SAAA,CAAAR,GAAgB,MACfM,EAAAA,IAAC,MAAA,CAAI,UAAWE,EAAAA,QAAO,2BAA2B,EAChD,SAAAF,EAAAA,IAACI,EAAAA,QAAA,CAAc,GAAGV,CAAA,CAAc,CAAA,CAClC,EAEFS,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,qBAAqB,EAC1C,SAAA,CAAAF,MAAC,KAAA,CAAG,UAAWE,EAAAA,QAAO,oBAAoB,EAAI,SAAAP,EAAM,EACnDC,GAAe,MACdI,EAAAA,IAAC,IAAA,CAAE,UAAWE,EAAAA,QAAO,0BAA0B,EAAI,SAAAN,CAAA,CAAY,CAAA,EAEnE,EACCC,GAAU,MACTG,EAAAA,IAAC,MAAA,CAAI,UAAWE,EAAAA,QAAO,qBAAqB,EAC1C,SAAAF,EAAAA,IAACK,EAAAA,QAAA,CAAQ,GAAGR,CAAA,CAAQ,CAAA,CACtB,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN"}
+{"version":3,"file":"EmptyState.cjs","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './EmptyState.module.scss';\n\nexport type EmptyStateTitleLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type EmptyStateDescriptionElement = 'p' | 'div';\n\nexport interface EmptyStateProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'onScroll'\n> {\n  /** Illustration props (children = the SVG component). Rendered above the title. */\n  illustration?: IllustrationProps;\n  /** Main heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /**\n   * Heading level of the title (`1`–`6`). Default `2`. Pick the level that fits the heading\n   * outline of the surface the empty state sits in, e.g. `3` inside a modal body.\n   */\n  titleLevel?: EmptyStateTitleLevel;\n  /** Body description. Supports ReactNode for inline formatting. */\n  description?: ReactNode;\n  /**\n   * Element that wraps the description. Default `'p'`. Use `'div'` when the description\n   * contains block content (paragraphs, lists), which isn't valid inside a `<p>`.\n   */\n  descriptionAs?: EmptyStateDescriptionElement;\n  /** Button props (children = label). Rendered below the description. */\n  action?: ButtonProps;\n  /**\n   * Custom node for the action area, for controls `action` can't describe: a menu trigger,\n   * a split button, or a permission-gated control. Rendered below the description, after\n   * `action` when both are set. Prefer `action` for a single plain button. The slot sits\n   * inside the scroll container, so a menu or popover rendered here should portal outside\n   * the scroll viewport; otherwise it can be clipped.\n   */\n  actionSlot?: ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Empty State fills a view that has no content yet — no saved messages, no mentions, no\n * search results, no files. It pairs an illustration with a short explanation and, when\n * there's something the user can do next, a single action.\n */\nexport default function EmptyState({\n  illustration,\n  title,\n  titleLevel = 2,\n  description,\n  descriptionAs: Description = 'p',\n  action,\n  actionSlot,\n  className = '',\n  ...rest\n}: EmptyStateProps) {\n  const Title = `h${titleLevel}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  return (\n    <Scrollbar\n      {...rest}\n      className={[styles['empty-state'], className].filter(Boolean).join(' ')}\n    >\n      <div className={styles['empty-state__container']}>\n        {illustration != null && (\n          <div className={styles['empty-state__illustration']}>\n            <Illustration {...illustration} />\n          </div>\n        )}\n        <div className={styles['empty-state__titles']}>\n          <Title className={styles['empty-state__title']}>{title}</Title>\n          {description != null && (\n            <Description className={styles['empty-state__description']}>\n              {description}\n            </Description>\n          )}\n        </div>\n        {(action != null || actionSlot != null) && (\n          <div className={styles['empty-state__action']}>\n            {action != null && <Button {...action} />}\n            {actionSlot}\n          </div>\n        )}\n      </div>\n    </Scrollbar>\n  );\n}\n"],"names":["EmptyState","illustration","title","titleLevel","description","Description","action","actionSlot","className","rest","Title","jsx","Scrollbar","styles","jsxs","Illustration","Button"],"mappings":"mTAkDA,SAAwBA,EAAW,CACjC,aAAAC,EACA,MAAAC,EACA,WAAAC,EAAa,EACb,YAAAC,EACA,cAAeC,EAAc,IAC7B,OAAAC,EACA,WAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAoB,CAClB,MAAMC,EAAQ,IAAIP,CAAU,GAC5B,OACEQ,EAAAA,IAACC,EAAAA,QAAA,CACE,GAAGH,EACJ,UAAW,CAACI,UAAO,aAAa,EAAGL,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAEtE,SAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWD,UAAO,wBAAwB,EAC5C,SAAA,CAAAZ,GAAgB,MACfU,EAAAA,IAAC,MAAA,CAAI,UAAWE,EAAAA,QAAO,2BAA2B,EAChD,SAAAF,EAAAA,IAACI,EAAAA,QAAA,CAAc,GAAGd,CAAA,CAAc,CAAA,CAClC,EAEFa,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,qBAAqB,EAC1C,SAAA,CAAAF,MAACD,EAAA,CAAM,UAAWG,EAAAA,QAAO,oBAAoB,EAAI,SAAAX,EAAM,EACtDE,GAAe,MACdO,EAAAA,IAACN,EAAA,CAAY,UAAWQ,EAAAA,QAAO,0BAA0B,EACtD,SAAAT,CAAA,CACH,CAAA,EAEJ,GACEE,GAAU,MAAQC,GAAc,cAC/B,MAAA,CAAI,UAAWM,EAAAA,QAAO,qBAAqB,EACzC,SAAA,CAAAP,GAAU,MAAQK,EAAAA,IAACK,EAAAA,QAAA,CAAQ,GAAGV,CAAA,CAAQ,EACtCC,CAAA,CAAA,CACH,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN"}

package/dist/components/empty-state/EmptyState.css

@@ -1 +1 @@
-._empty-state_am73h_2{width:100%;height:100%;min-width:var(--empty-state-min-width, min(240px, 100vw));background-color:var(--center-channel-bg)}._empty-state_am73h_2 .simplebar-content{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%}._empty-state__container_am73h_15{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xl);padding-bottom:var(--spacing-xxl);width:100%;padding-left:var(--spacing-xxl);padding-right:var(--spacing-xxl)}._empty-state__illustration_am73h_25{display:flex;align-items:center;justify-content:center;flex-shrink:0}._empty-state__titles_am73h_31{display:flex;flex-direction:column;align-items:center;width:100%;max-width:480px;gap:var(--spacing-s)}._empty-state__title_am73h_31{margin:0;font-family:var(--font-family-heading);font-weight:var(--font-weight-semibold);font-size:var(--font-size-400);line-height:var(--line-height-400);color:var(--center-channel-color);text-align:center}._empty-state__description_am73h_48{margin:0;font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:rgba(var(--center-channel-color-rgb),.75);text-align:center}._empty-state__action_am73h_56{display:flex;justify-content:center;flex-shrink:0}
+._empty-state_yb2f1_2{width:100%;height:100%;min-width:0;contain:inline-size;contain-intrinsic-inline-size:var(--empty-state-min-width, min(240px, 100vw));background-color:var(--center-channel-bg)}._empty-state_yb2f1_2 .simplebar-content{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%}._empty-state__container_yb2f1_17{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xl);padding-bottom:var(--spacing-xxl);width:100%;padding-left:var(--spacing-xxl);padding-right:var(--spacing-xxl)}._empty-state__illustration_yb2f1_27{display:flex;align-items:center;justify-content:center;flex-shrink:0}._empty-state__titles_yb2f1_33{display:flex;flex-direction:column;align-items:center;width:100%;max-width:480px;gap:var(--spacing-s)}._empty-state__title_yb2f1_33{margin:0;font-family:var(--font-family-heading);font-weight:var(--font-weight-semibold);font-size:var(--font-size-400);line-height:var(--line-height-400);color:var(--center-channel-color);text-align:center}._empty-state__description_yb2f1_50{margin:0;font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:rgba(var(--center-channel-color-rgb),.75);text-align:center}._empty-state__action_yb2f1_58{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--spacing-s);flex-shrink:0}

package/dist/components/empty-state/EmptyState.d.ts

@@ -1,15 +1,35 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { ButtonProps } from '../button/Button';
 import { IllustrationProps } from '../illustration/Illustration';
+export type EmptyStateTitleLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type EmptyStateDescriptionElement = 'p' | 'div';
 export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'onScroll'> {
     /** Illustration props (children = the SVG component). Rendered above the title. */
     illustration?: IllustrationProps;
     /** Main heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
     title: ReactNode;
+    /**
+     * Heading level of the title (`1`–`6`). Default `2`. Pick the level that fits the heading
+     * outline of the surface the empty state sits in, e.g. `3` inside a modal body.
+     */
+    titleLevel?: EmptyStateTitleLevel;
     /** Body description. Supports ReactNode for inline formatting. */
     description?: ReactNode;
+    /**
+     * Element that wraps the description. Default `'p'`. Use `'div'` when the description
+     * contains block content (paragraphs, lists), which isn't valid inside a `<p>`.
+     */
+    descriptionAs?: EmptyStateDescriptionElement;
     /** Button props (children = label). Rendered below the description. */
     action?: ButtonProps;
+    /**
+     * Custom node for the action area, for controls `action` can't describe: a menu trigger,
+     * a split button, or a permission-gated control. Rendered below the description, after
+     * `action` when both are set. Prefer `action` for a single plain button. The slot sits
+     * inside the scroll container, so a menu or popover rendered here should portal outside
+     * the scroll viewport; otherwise it can be clipped.
+     */
+    actionSlot?: ReactNode;
     /** Optional CSS class name. */
     className?: string;
 }
@@ -18,5 +38,5 @@ export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
  * search results, no files. It pairs an illustration with a short explanation and, when
  * there's something the user can do next, a single action.
  */
-export default function EmptyState({ illustration, title, description, action, className, ...rest }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export default function EmptyState({ illustration, title, titleLevel, description, descriptionAs: Description, action, actionSlot, className, ...rest }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EmptyState.d.ts.map

package/dist/components/empty-state/EmptyState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAIhF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,UAAU,CAClC;IACC,mFAAmF;IACnF,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,2EAA2E;IAC3E,KAAK,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uEAAuE;IACvE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,YAAY,EACZ,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAc,EACd,GAAG,IAAI,EACR,EAAE,eAAe,2CA0BjB"}
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAIhF,MAAM,MAAM,oBAAoB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACzD,MAAM,MAAM,4BAA4B,GAAG,GAAG,GAAG,KAAK,CAAC;AAEvD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,UAAU,CAClC;IACC,mFAAmF;IACnF,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,2EAA2E;IAC3E,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,kEAAkE;IAClE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,4BAA4B,CAAC;IAC7C,uEAAuE;IACvE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,YAAY,EACZ,KAAK,EACL,UAAc,EACd,WAAW,EACX,aAAa,EAAE,WAAiB,EAChC,MAAM,EACN,UAAU,EACV,SAAc,EACd,GAAG,IAAI,EACR,EAAE,eAAe,2CA8BjB"}

package/dist/components/empty-state/EmptyState.js

@@ -1,33 +1,40 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import o from "../button/Button.js";
-import c from "../illustration/Illustration.js";
-import p from "../scrollbar/Scrollbar.js";
-import e from "./EmptyState.module.scss.js";
-function u({
-  illustration: l,
-  title: r,
-  description: s,
-  action: a,
-  className: i = "",
-  ...n
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import _ from "../button/Button.js";
+import u from "../illustration/Illustration.js";
+import y from "../scrollbar/Scrollbar.js";
+import t from "./EmptyState.module.scss.js";
+function x({
+  illustration: a,
+  title: i,
+  titleLevel: n = 2,
+  description: r,
+  descriptionAs: o = "p",
+  action: l,
+  actionSlot: m,
+  className: c = "",
+  ...p
 }) {
-  return /* @__PURE__ */ t(
-    p,
+  const d = `h${n}`;
+  return /* @__PURE__ */ e(
+    y,
     {
-      ...n,
-      className: [e["empty-state"], i].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ m("div", { className: e["empty-state__container"], children: [
-        l != null && /* @__PURE__ */ t("div", { className: e["empty-state__illustration"], children: /* @__PURE__ */ t(c, { ...l }) }),
-        /* @__PURE__ */ m("div", { className: e["empty-state__titles"], children: [
-          /* @__PURE__ */ t("h2", { className: e["empty-state__title"], children: r }),
-          s != null && /* @__PURE__ */ t("p", { className: e["empty-state__description"], children: s })
+      ...p,
+      className: [t["empty-state"], c].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ s("div", { className: t["empty-state__container"], children: [
+        a != null && /* @__PURE__ */ e("div", { className: t["empty-state__illustration"], children: /* @__PURE__ */ e(u, { ...a }) }),
+        /* @__PURE__ */ s("div", { className: t["empty-state__titles"], children: [
+          /* @__PURE__ */ e(d, { className: t["empty-state__title"], children: i }),
+          r != null && /* @__PURE__ */ e(o, { className: t["empty-state__description"], children: r })
         ] }),
-        a != null && /* @__PURE__ */ t("div", { className: e["empty-state__action"], children: /* @__PURE__ */ t(o, { ...a }) })
+        (l != null || m != null) && /* @__PURE__ */ s("div", { className: t["empty-state__action"], children: [
+          l != null && /* @__PURE__ */ e(_, { ...l }),
+          m
+        ] })
       ] })
     }
   );
 }
 export {
-  u as default
+  x as default
 };
 //# sourceMappingURL=EmptyState.js.map

package/dist/components/empty-state/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './EmptyState.module.scss';\n\nexport interface EmptyStateProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'onScroll'\n> {\n  /** Illustration props (children = the SVG component). Rendered above the title. */\n  illustration?: IllustrationProps;\n  /** Main heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Body description. Supports ReactNode for inline formatting. */\n  description?: ReactNode;\n  /** Button props (children = label). Rendered below the description. */\n  action?: ButtonProps;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Empty State fills a view that has no content yet — no saved messages, no mentions, no\n * search results, no files. It pairs an illustration with a short explanation and, when\n * there's something the user can do next, a single action.\n */\nexport default function EmptyState({\n  illustration,\n  title,\n  description,\n  action,\n  className = '',\n  ...rest\n}: EmptyStateProps) {\n  return (\n    <Scrollbar\n      {...rest}\n      className={[styles['empty-state'], className].filter(Boolean).join(' ')}\n    >\n      <div className={styles['empty-state__container']}>\n        {illustration != null && (\n          <div className={styles['empty-state__illustration']}>\n            <Illustration {...illustration} />\n          </div>\n        )}\n        <div className={styles['empty-state__titles']}>\n          <h2 className={styles['empty-state__title']}>{title}</h2>\n          {description != null && (\n            <p className={styles['empty-state__description']}>{description}</p>\n          )}\n        </div>\n        {action != null && (\n          <div className={styles['empty-state__action']}>\n            <Button {...action} />\n          </div>\n        )}\n      </div>\n    </Scrollbar>\n  );\n}\n"],"names":["EmptyState","illustration","title","description","action","className","rest","jsx","Scrollbar","styles","jsxs","Illustration","Button"],"mappings":";;;;;AA6BA,SAAwBA,EAAW;AAAA,EACjC,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAoB;AAClB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAW,CAACG,EAAO,aAAa,GAAGJ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAEtE,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,wBAAwB,GAC5C,UAAA;AAAA,QAAAR,KAAgB,QACf,gBAAAM,EAAC,OAAA,EAAI,WAAWE,EAAO,2BAA2B,GAChD,UAAA,gBAAAF,EAACI,GAAA,EAAc,GAAGV,EAAA,CAAc,EAAA,CAClC;AAAA,QAEF,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAO,qBAAqB,GAC1C,UAAA;AAAA,UAAA,gBAAAF,EAAC,MAAA,EAAG,WAAWE,EAAO,oBAAoB,GAAI,UAAAP,GAAM;AAAA,UACnDC,KAAe,QACd,gBAAAI,EAAC,KAAA,EAAE,WAAWE,EAAO,0BAA0B,GAAI,UAAAN,EAAA,CAAY;AAAA,QAAA,GAEnE;AAAA,QACCC,KAAU,QACT,gBAAAG,EAAC,OAAA,EAAI,WAAWE,EAAO,qBAAqB,GAC1C,UAAA,gBAAAF,EAACK,GAAA,EAAQ,GAAGR,EAAA,CAAQ,EAAA,CACtB;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"EmptyState.js","sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './EmptyState.module.scss';\n\nexport type EmptyStateTitleLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type EmptyStateDescriptionElement = 'p' | 'div';\n\nexport interface EmptyStateProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'onScroll'\n> {\n  /** Illustration props (children = the SVG component). Rendered above the title. */\n  illustration?: IllustrationProps;\n  /** Main heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /**\n   * Heading level of the title (`1`–`6`). Default `2`. Pick the level that fits the heading\n   * outline of the surface the empty state sits in, e.g. `3` inside a modal body.\n   */\n  titleLevel?: EmptyStateTitleLevel;\n  /** Body description. Supports ReactNode for inline formatting. */\n  description?: ReactNode;\n  /**\n   * Element that wraps the description. Default `'p'`. Use `'div'` when the description\n   * contains block content (paragraphs, lists), which isn't valid inside a `<p>`.\n   */\n  descriptionAs?: EmptyStateDescriptionElement;\n  /** Button props (children = label). Rendered below the description. */\n  action?: ButtonProps;\n  /**\n   * Custom node for the action area, for controls `action` can't describe: a menu trigger,\n   * a split button, or a permission-gated control. Rendered below the description, after\n   * `action` when both are set. Prefer `action` for a single plain button. The slot sits\n   * inside the scroll container, so a menu or popover rendered here should portal outside\n   * the scroll viewport; otherwise it can be clipped.\n   */\n  actionSlot?: ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Empty State fills a view that has no content yet — no saved messages, no mentions, no\n * search results, no files. It pairs an illustration with a short explanation and, when\n * there's something the user can do next, a single action.\n */\nexport default function EmptyState({\n  illustration,\n  title,\n  titleLevel = 2,\n  description,\n  descriptionAs: Description = 'p',\n  action,\n  actionSlot,\n  className = '',\n  ...rest\n}: EmptyStateProps) {\n  const Title = `h${titleLevel}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  return (\n    <Scrollbar\n      {...rest}\n      className={[styles['empty-state'], className].filter(Boolean).join(' ')}\n    >\n      <div className={styles['empty-state__container']}>\n        {illustration != null && (\n          <div className={styles['empty-state__illustration']}>\n            <Illustration {...illustration} />\n          </div>\n        )}\n        <div className={styles['empty-state__titles']}>\n          <Title className={styles['empty-state__title']}>{title}</Title>\n          {description != null && (\n            <Description className={styles['empty-state__description']}>\n              {description}\n            </Description>\n          )}\n        </div>\n        {(action != null || actionSlot != null) && (\n          <div className={styles['empty-state__action']}>\n            {action != null && <Button {...action} />}\n            {actionSlot}\n          </div>\n        )}\n      </div>\n    </Scrollbar>\n  );\n}\n"],"names":["EmptyState","illustration","title","titleLevel","description","Description","action","actionSlot","className","rest","Title","jsx","Scrollbar","styles","jsxs","Illustration","Button"],"mappings":";;;;;AAkDA,SAAwBA,EAAW;AAAA,EACjC,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,aAAAC;AAAA,EACA,eAAeC,IAAc;AAAA,EAC7B,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAoB;AAClB,QAAMC,IAAQ,IAAIP,CAAU;AAC5B,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,WAAW,CAACI,EAAO,aAAa,GAAGL,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAEtE,UAAA,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,wBAAwB,GAC5C,UAAA;AAAA,QAAAZ,KAAgB,QACf,gBAAAU,EAAC,OAAA,EAAI,WAAWE,EAAO,2BAA2B,GAChD,UAAA,gBAAAF,EAACI,GAAA,EAAc,GAAGd,EAAA,CAAc,EAAA,CAClC;AAAA,QAEF,gBAAAa,EAAC,OAAA,EAAI,WAAWD,EAAO,qBAAqB,GAC1C,UAAA;AAAA,UAAA,gBAAAF,EAACD,GAAA,EAAM,WAAWG,EAAO,oBAAoB,GAAI,UAAAX,GAAM;AAAA,UACtDE,KAAe,QACd,gBAAAO,EAACN,GAAA,EAAY,WAAWQ,EAAO,0BAA0B,GACtD,UAAAT,EAAA,CACH;AAAA,QAAA,GAEJ;AAAA,SACEE,KAAU,QAAQC,KAAc,2BAC/B,OAAA,EAAI,WAAWM,EAAO,qBAAqB,GACzC,UAAA;AAAA,UAAAP,KAAU,QAAQ,gBAAAK,EAACK,GAAA,EAAQ,GAAGV,EAAA,CAAQ;AAAA,UACtCC;AAAA,QAAA,EAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/empty-state/EmptyState.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./EmptyState.css');const t={"empty-state":"_empty-state_am73h_2","empty-state__container":"_empty-state__container_am73h_15","empty-state__illustration":"_empty-state__illustration_am73h_25","empty-state__titles":"_empty-state__titles_am73h_31","empty-state__title":"_empty-state__title_am73h_31","empty-state__description":"_empty-state__description_am73h_48","empty-state__action":"_empty-state__action_am73h_56"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./EmptyState.css');const t={"empty-state":"_empty-state_yb2f1_2","empty-state__container":"_empty-state__container_yb2f1_17","empty-state__illustration":"_empty-state__illustration_yb2f1_27","empty-state__titles":"_empty-state__titles_yb2f1_33","empty-state__title":"_empty-state__title_yb2f1_33","empty-state__description":"_empty-state__description_yb2f1_50","empty-state__action":"_empty-state__action_yb2f1_58"};exports.default=t;
 //# sourceMappingURL=EmptyState.module.scss.cjs.map

package/dist/components/empty-state/EmptyState.module.scss.js

@@ -1,11 +1,11 @@
 import './EmptyState.css';const t = {
-  "empty-state": "_empty-state_am73h_2",
-  "empty-state__container": "_empty-state__container_am73h_15",
-  "empty-state__illustration": "_empty-state__illustration_am73h_25",
-  "empty-state__titles": "_empty-state__titles_am73h_31",
-  "empty-state__title": "_empty-state__title_am73h_31",
-  "empty-state__description": "_empty-state__description_am73h_48",
-  "empty-state__action": "_empty-state__action_am73h_56"
+  "empty-state": "_empty-state_yb2f1_2",
+  "empty-state__container": "_empty-state__container_yb2f1_17",
+  "empty-state__illustration": "_empty-state__illustration_yb2f1_27",
+  "empty-state__titles": "_empty-state__titles_yb2f1_33",
+  "empty-state__title": "_empty-state__title_yb2f1_33",
+  "empty-state__description": "_empty-state__description_yb2f1_50",
+  "empty-state__action": "_empty-state__action_yb2f1_58"
 };
 export {
   t as default

package/dist/components/empty-state/index.d.ts

@@ -1,3 +1,3 @@
 export { default as EmptyState } from './EmptyState';
-export type { EmptyStateProps } from './EmptyState';
+export type { EmptyStateProps, EmptyStateTitleLevel, EmptyStateDescriptionElement, } from './EmptyState';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/empty-state/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EACV,eAAe,EACf,oBAAoB,EACpB,4BAA4B,GAC7B,MAAM,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mattermost/compass-ui",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.27",
   "description": "Compass design system UI components for Mattermost products",
   "repository": {
     "type": "git",