@mattermost/compass-ui 0.1.0-alpha.23 → 0.1.0-alpha.25

package/dist/components/right-sidebar-header/RightSidebarHeader.js

@@ -1,113 +1,135 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import __u from "@mattermost/compass-icons/components/arrow-back-ios.js";const u=__u&&__u.default?__u.default:__u;
-import __v from "@mattermost/compass-icons/components/arrow-collapse.js";const v=__v&&__v.default?__v.default:__v;
-import __x from "@mattermost/compass-icons/components/arrow-expand.js";const x=__x&&__x.default?__x.default:__x;
-import __j from "@mattermost/compass-icons/components/close.js";const j=__j&&__j.default?__j.default:__j;
-import __B from "@mattermost/compass-icons/components/dock-window.js";const B=__B&&__B.default?__B.default:__B;
-import i from "../icon/Icon.js";
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import __O from "@mattermost/compass-icons/components/arrow-collapse.js";const O=__O&&__O.default?__O.default:__O;
+import __R from "@mattermost/compass-icons/components/arrow-expand.js";const R=__R&&__R.default?__R.default:__R;
+import __W from "@mattermost/compass-icons/components/arrow-left.js";const W=__W&&__W.default?__W.default:__W;
+import __q from "@mattermost/compass-icons/components/close.js";const q=__q&&__q.default?__q.default:__q;
+import __F from "@mattermost/compass-icons/components/dock-window.js";const F=__F&&__F.default?__F.default:__F;
+import l from "../icon/Icon.js";
 import s from "../icon-button/IconButton.js";
-import A from "../tag/Tag.js";
-import a from "./RightSidebarHeader.module.scss.js";
-function J({
-  title: b,
-  secondaryTitle: l,
-  tag: o,
-  tagType: g = "info",
+import G from "../tag/Tag.js";
+import { mergeClassNames as J } from "../../utils/props.js";
+import i from "./RightSidebarHeader.module.scss.js";
+function y({
+  title: C,
+  secondaryTitle: h,
+  onSecondaryTitleClick: m,
+  secondaryTitleButtonProps: e,
+  tag: d,
+  tagType: z = "info",
   leadingIcon: c,
-  onBack: d,
-  backLabel: f = "Back",
-  onExpand: n,
-  expanded: t = !1,
-  expandLabel: N = "Expand",
-  collapseLabel: y = "Collapse",
-  onPopout: h,
-  popoutLabel: z = "Open in new window",
-  onClose: m,
-  closeLabel: C = "Close",
-  actionLabel: p,
-  onActionClick: k,
-  actionActive: _ = !1,
-  className: w = ""
+  onBack: _,
+  backLabel: k = "Back",
+  onExpand: b,
+  expanded: g = !1,
+  expandLabel: w = "Expand",
+  collapseLabel: x = "Collapse",
+  onPopout: n,
+  popoutLabel: I = "Open in new window",
+  onClose: o,
+  closeLabel: v = "Close",
+  actionLabel: f,
+  onActionClick: j,
+  actionActive: p = !1,
+  actions: A,
+  className: D = "",
+  ...E
 }) {
-  const I = [a["right-sidebar-header"], w].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("div", { className: I, children: [
-    /* @__PURE__ */ r("div", { className: a["right-sidebar-header__left"], children: [
-      /* @__PURE__ */ r("div", { className: a["right-sidebar-header__primary"], children: [
-        d && /* @__PURE__ */ e(
+  const H = [i["right-sidebar-header"], D].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("div", { ...E, className: H, children: [
+    /* @__PURE__ */ r("div", { className: i["right-sidebar-header__left"], children: [
+      /* @__PURE__ */ r("div", { className: i["right-sidebar-header__primary"], children: [
+        _ && /* @__PURE__ */ a(
           s,
           {
-            className: a["right-sidebar-header__back"],
+            className: i["right-sidebar-header__back"],
             size: "small",
-            "aria-label": f,
-            onClick: d,
-            icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(u, {}) })
+            "aria-label": k,
+            onClick: _,
+            icon: /* @__PURE__ */ a(l, { size: "16", glyph: /* @__PURE__ */ a(W, {}) })
           }
         ),
-        c && /* @__PURE__ */ e("span", { className: a["right-sidebar-header__leading-icon"], children: c }),
-        /* @__PURE__ */ e("span", { className: a["right-sidebar-header__title"], children: b }),
-        o && /* @__PURE__ */ e("span", { className: a["right-sidebar-header__tag"], children: /* @__PURE__ */ e(
-          A,
+        c && /* @__PURE__ */ a("span", { className: i["right-sidebar-header__leading-icon"], children: c }),
+        /* @__PURE__ */ a("span", { className: i["right-sidebar-header__title"], children: C }),
+        d && /* @__PURE__ */ a("span", { className: i["right-sidebar-header__tag"], children: /* @__PURE__ */ a(
+          G,
           {
-            label: o,
-            type: g,
+            label: d,
+            type: z,
             size: "x-small",
             casing: "all-caps"
           }
         ) })
       ] }),
-      l && /* @__PURE__ */ e("div", { className: a["right-sidebar-header__secondary"], children: /* @__PURE__ */ e("span", { className: a["right-sidebar-header__secondary-text"], children: l }) })
+      h && /* @__PURE__ */ a("div", { className: i["right-sidebar-header__secondary"], children: m ? /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          ...e,
+          className: J(
+            i["right-sidebar-header__secondary-text"],
+            i["right-sidebar-header__secondary-button"],
+            e == null ? void 0 : e.className
+          ),
+          onClick: (N) => {
+            var t;
+            m(N), (t = e == null ? void 0 : e.onClick) == null || t.call(e, N);
+          },
+          children: h
+        }
+      ) : /* @__PURE__ */ a("span", { className: i["right-sidebar-header__secondary-text"], children: h }) })
     ] }),
-    /* @__PURE__ */ r("div", { className: a["right-sidebar-header__actions"], children: [
-      p && /* @__PURE__ */ e(
+    /* @__PURE__ */ r("div", { className: i["right-sidebar-header__actions"], children: [
+      f && /* @__PURE__ */ a(
         "button",
         {
           type: "button",
           className: [
-            a["right-sidebar-header__action"],
-            _ ? a["right-sidebar-header__action--active"] : ""
+            i["right-sidebar-header__action"],
+            p ? i["right-sidebar-header__action--active"] : ""
           ].filter(Boolean).join(" "),
-          onClick: k,
-          "aria-pressed": _ ? !0 : void 0,
-          children: p
+          onClick: j,
+          "aria-pressed": p ? !0 : void 0,
+          children: f
         }
       ),
-      n && /* @__PURE__ */ e(
+      A,
+      b && /* @__PURE__ */ a(
         s,
         {
           size: "small",
-          "aria-label": t ? y : N,
-          onClick: n,
-          icon: /* @__PURE__ */ e(
-            i,
+          "aria-label": g ? x : w,
+          onClick: b,
+          icon: /* @__PURE__ */ a(
+            l,
             {
               size: "16",
-              glyph: t ? /* @__PURE__ */ e(v, {}) : /* @__PURE__ */ e(x, {})
+              glyph: g ? /* @__PURE__ */ a(O, {}) : /* @__PURE__ */ a(R, {})
             }
           )
         }
       ),
-      h && /* @__PURE__ */ e(
+      n && /* @__PURE__ */ a(
         s,
         {
           size: "small",
-          "aria-label": z,
-          onClick: h,
-          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(B, {}) })
+          "aria-label": I,
+          onClick: n,
+          icon: /* @__PURE__ */ a(l, { size: "16", glyph: /* @__PURE__ */ a(F, {}) })
         }
       ),
-      m && /* @__PURE__ */ e(
+      o && /* @__PURE__ */ a(
         s,
         {
           size: "small",
-          "aria-label": C,
-          onClick: m,
-          icon: /* @__PURE__ */ e(i, { size: "16", glyph: /* @__PURE__ */ e(j, {}) })
+          "aria-label": v,
+          onClick: o,
+          icon: /* @__PURE__ */ a(l, { size: "16", glyph: /* @__PURE__ */ a(q, {}) })
         }
       )
     ] })
   ] });
 }
 export {
-  J as default
+  y as default
 };
 //# sourceMappingURL=RightSidebarHeader.js.map

package/dist/components/right-sidebar-header/RightSidebarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.js","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DockWindowIcon from '@mattermost/compass-icons/components/dock-window';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */\n  onPopout?: () => void;\n  /** Accessible name for the pop out button. Default: \"Open in new window\". */\n  popoutLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onPopout,\n  popoutLabel = 'Open in new window',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onPopout && (\n          <IconButton\n            size=\"small\"\n            aria-label={popoutLabel}\n            onClick={onPopout}\n            icon={<Icon size=\"16\" glyph={<DockWindowIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onPopout","popoutLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","DockWindowIcon","CloseIcon"],"mappings":"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"}
+{"version":3,"file":"RightSidebarHeader.js","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DockWindowIcon from '@mattermost/compass-icons/components/dock-window';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport { mergeClassNames } from '@/utils/props';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'dangerouslySetInnerHTML'\n> {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** When set, the secondary title renders as a button (e.g. to open the parent channel) and calls this on click with the event. It looks the same at rest and shows a dim background on hover. */\n  onSecondaryTitleClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /** Extra attributes for the secondary title button (e.g. `aria-label`, `data-testid`). Only used with `onSecondaryTitleClick`; its `onClick` also runs, after that handler. */\n  secondaryTitleButtonProps?: BuiltInButtonProps;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */\n  onPopout?: () => void;\n  /** Accessible name for the pop out button. Default: \"Open in new window\". */\n  popoutLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  /** Optional custom actions (e.g. a Filters `Button` + popover) rendered in the actions region after `actionLabel` and before the expand / pop out / close buttons. */\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  onSecondaryTitleClick,\n  secondaryTitleButtonProps,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onPopout,\n  popoutLabel = 'Open in new window',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  actions,\n  className = '',\n  ...rest\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowLeftIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            {onSecondaryTitleClick ? (\n              <button\n                type=\"button\"\n                {...secondaryTitleButtonProps}\n                className={mergeClassNames(\n                  styles['right-sidebar-header__secondary-text'],\n                  styles['right-sidebar-header__secondary-button'],\n                  secondaryTitleButtonProps?.className,\n                )}\n                onClick={(event) => {\n                  onSecondaryTitleClick(event);\n                  secondaryTitleButtonProps?.onClick?.(event);\n                }}\n              >\n                {secondaryTitle}\n              </button>\n            ) : (\n              <span className={styles['right-sidebar-header__secondary-text']}>\n                {secondaryTitle}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {actions}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onPopout && (\n          <IconButton\n            size=\"small\"\n            aria-label={popoutLabel}\n            onClick={onPopout}\n            icon={<Icon size=\"16\" glyph={<DockWindowIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","onSecondaryTitleClick","secondaryTitleButtonProps","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onPopout","popoutLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","actions","className","rest","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowLeftIcon","Tag","mergeClassNames","event","_a","ArrowCollapseIcon","ArrowExpandIcon","DockWindowIcon","CloseIcon"],"mappings":"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"}

package/dist/components/right-sidebar-header/RightSidebarHeader.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./RightSidebarHeader.css');const e={"right-sidebar-header":"_right-sidebar-header_11chd_2","right-sidebar-header__left":"_right-sidebar-header__left_11chd_12","right-sidebar-header__primary":"_right-sidebar-header__primary_11chd_18","right-sidebar-header__back":"_right-sidebar-header__back_11chd_25","right-sidebar-header__leading-icon":"_right-sidebar-header__leading-icon_11chd_28","right-sidebar-header__tag":"_right-sidebar-header__tag_11chd_33","right-sidebar-header__title":"_right-sidebar-header__title_11chd_37","right-sidebar-header__secondary":"_right-sidebar-header__secondary_11chd_47","right-sidebar-header__secondary-text":"_right-sidebar-header__secondary-text_11chd_55","right-sidebar-header__actions":"_right-sidebar-header__actions_11chd_65","right-sidebar-header__action":"_right-sidebar-header__action_11chd_65","right-sidebar-header__action--active":"_right-sidebar-header__action--active_11chd_99"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./RightSidebarHeader.css');const e={"right-sidebar-header":"_right-sidebar-header_1jogp_2","right-sidebar-header__left":"_right-sidebar-header__left_1jogp_12","right-sidebar-header__primary":"_right-sidebar-header__primary_1jogp_18","right-sidebar-header__back":"_right-sidebar-header__back_1jogp_25","right-sidebar-header__leading-icon":"_right-sidebar-header__leading-icon_1jogp_28","right-sidebar-header__tag":"_right-sidebar-header__tag_1jogp_33","right-sidebar-header__title":"_right-sidebar-header__title_1jogp_37","right-sidebar-header__secondary":"_right-sidebar-header__secondary_1jogp_47","right-sidebar-header__secondary-button":"_right-sidebar-header__secondary-button_1jogp_56","right-sidebar-header__secondary-text":"_right-sidebar-header__secondary-text_1jogp_59","right-sidebar-header__actions":"_right-sidebar-header__actions_1jogp_95","right-sidebar-header__action":"_right-sidebar-header__action_1jogp_95","right-sidebar-header__action--active":"_right-sidebar-header__action--active_1jogp_129"};exports.default=e;
 //# sourceMappingURL=RightSidebarHeader.module.scss.cjs.map

package/dist/components/right-sidebar-header/RightSidebarHeader.module.scss.js

@@ -1,16 +1,17 @@
 import './RightSidebarHeader.css';const e = {
-  "right-sidebar-header": "_right-sidebar-header_11chd_2",
-  "right-sidebar-header__left": "_right-sidebar-header__left_11chd_12",
-  "right-sidebar-header__primary": "_right-sidebar-header__primary_11chd_18",
-  "right-sidebar-header__back": "_right-sidebar-header__back_11chd_25",
-  "right-sidebar-header__leading-icon": "_right-sidebar-header__leading-icon_11chd_28",
-  "right-sidebar-header__tag": "_right-sidebar-header__tag_11chd_33",
-  "right-sidebar-header__title": "_right-sidebar-header__title_11chd_37",
-  "right-sidebar-header__secondary": "_right-sidebar-header__secondary_11chd_47",
-  "right-sidebar-header__secondary-text": "_right-sidebar-header__secondary-text_11chd_55",
-  "right-sidebar-header__actions": "_right-sidebar-header__actions_11chd_65",
-  "right-sidebar-header__action": "_right-sidebar-header__action_11chd_65",
-  "right-sidebar-header__action--active": "_right-sidebar-header__action--active_11chd_99"
+  "right-sidebar-header": "_right-sidebar-header_1jogp_2",
+  "right-sidebar-header__left": "_right-sidebar-header__left_1jogp_12",
+  "right-sidebar-header__primary": "_right-sidebar-header__primary_1jogp_18",
+  "right-sidebar-header__back": "_right-sidebar-header__back_1jogp_25",
+  "right-sidebar-header__leading-icon": "_right-sidebar-header__leading-icon_1jogp_28",
+  "right-sidebar-header__tag": "_right-sidebar-header__tag_1jogp_33",
+  "right-sidebar-header__title": "_right-sidebar-header__title_1jogp_37",
+  "right-sidebar-header__secondary": "_right-sidebar-header__secondary_1jogp_47",
+  "right-sidebar-header__secondary-button": "_right-sidebar-header__secondary-button_1jogp_56",
+  "right-sidebar-header__secondary-text": "_right-sidebar-header__secondary-text_1jogp_59",
+  "right-sidebar-header__actions": "_right-sidebar-header__actions_1jogp_95",
+  "right-sidebar-header__action": "_right-sidebar-header__action_1jogp_95",
+  "right-sidebar-header__action--active": "_right-sidebar-header__action--active_1jogp_129"
 };
 export {
   e as default

package/dist/components/right-sidebar-header/RightSidebarHeader.module.scss.js.map

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

package/dist/components/tile-button/TileButton.css

@@ -1 +1 @@
-._tile-button_w3stn_2{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xxxs);width:108px;min-width:64px;max-width:100%;padding:var(--spacing-m) 0 var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.04);--tile-button-fg: rgba(var(--center-channel-color-rgb), .72);--tile-button-icon-fg: rgba(var(--center-channel-color-rgb), .64);color:var(--tile-button-fg);cursor:pointer;text-decoration:none;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}._tile-button_w3stn_2:any-link,._tile-button_w3stn_2:hover,._tile-button_w3stn_2:focus,._tile-button_w3stn_2:active,._tile-button_w3stn_2:visited{color:var(--tile-button-fg);text-decoration:none}._tile-button_w3stn_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._tile-button_w3stn_2:hover:not(:disabled,._tile-button--disabled_w3stn_31){background-color:rgba(var(--center-channel-color-rgb),.08);--tile-button-fg: rgba(var(--center-channel-color-rgb), .75)}._tile-button_w3stn_2:active:not(:disabled,._tile-button--disabled_w3stn_31){background-color:rgba(var(--button-bg-rgb),.08);--tile-button-fg: var(--link-color)}._tile-button_w3stn_2:is(:disabled,._tile-button--disabled_w3stn_31){opacity:.48;cursor:not-allowed}._tile-button--toggled_w3stn_43{--tile-button-fg: var(--link-color);background-color:rgba(var(--button-bg-rgb),.08)}._tile-button--toggled_w3stn_43 ._tile-button__icon_w3stn_47,._tile-button--toggled_w3stn_43 ._tile-button__label_w3stn_48{color:var(--link-color)}._tile-button--toggled_w3stn_43:hover:not(:disabled,._tile-button--disabled_w3stn_31){background-color:rgba(var(--button-bg-rgb),.12)}._tile-button--toggled_w3stn_43:active:not(:disabled,._tile-button--disabled_w3stn_31){background-color:rgba(var(--button-bg-rgb),.16)}._tile-button--destructive_w3stn_57{--focus-ring-color: var(--error-text, var(--color-danger));--tile-button-fg: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04)}._tile-button--destructive_w3stn_57:hover:not(:disabled,._tile-button--disabled_w3stn_31){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);--tile-button-fg: var(--error-text, var(--color-danger))}._tile-button--destructive_w3stn_57:active:not(:disabled,._tile-button--disabled_w3stn_31){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);--tile-button-fg: var(--error-text, var(--color-danger))}._tile-button_w3stn_2:hover:not(:disabled,._tile-button--disabled_w3stn_31),._tile-button_w3stn_2:active:not(:disabled,._tile-button--disabled_w3stn_31),._tile-button--toggled_w3stn_43,._tile-button--destructive_w3stn_57{--tile-button-icon-fg: initial}._tile-button__icon_w3stn_47{display:flex;align-items:center;justify-content:center;width:var(--icon-size-20);height:var(--icon-size-20);flex-shrink:0;color:var(--tile-button-icon-fg, var(--tile-button-fg))}._tile-button__label_w3stn_48{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;box-sizing:border-box;max-width:100%;padding-inline:var(--tile-button-padding-inline, clamp(var(--spacing-xs), 33.33% - 13.33px, var(--spacing-l)));display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;text-wrap:balance;white-space:normal;text-align:center;color:var(--tile-button-fg)}
+._tile-button_yrpfx_2{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xxxs);width:108px;min-width:64px;max-width:100%;padding:var(--spacing-m) 0 var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.04);--tile-button-fg: rgba(var(--center-channel-color-rgb), .72);--tile-button-icon-fg: rgba(var(--center-channel-color-rgb), .64);color:var(--tile-button-fg);cursor:pointer;text-decoration:none;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}._tile-button_yrpfx_2:any-link,._tile-button_yrpfx_2:hover,._tile-button_yrpfx_2:focus,._tile-button_yrpfx_2:active,._tile-button_yrpfx_2:visited{color:var(--tile-button-fg);text-decoration:none}._tile-button_yrpfx_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._tile-button_yrpfx_2:hover:not(:disabled,._tile-button--disabled_yrpfx_31){background-color:rgba(var(--center-channel-color-rgb),.08);--tile-button-fg: rgba(var(--center-channel-color-rgb), .75)}._tile-button_yrpfx_2:active:not(:disabled,._tile-button--disabled_yrpfx_31){background-color:rgba(var(--button-bg-rgb),.08);--tile-button-fg: var(--link-color)}._tile-button_yrpfx_2:is(:disabled,._tile-button--disabled_yrpfx_31){opacity:.48;cursor:not-allowed}._tile-button--toggled_yrpfx_43{--tile-button-fg: var(--link-color);background-color:rgba(var(--button-bg-rgb),.08)}._tile-button--toggled_yrpfx_43 ._tile-button__icon_yrpfx_47,._tile-button--toggled_yrpfx_43 ._tile-button__label_yrpfx_48{color:var(--link-color)}._tile-button--toggled_yrpfx_43:hover:not(:disabled,._tile-button--disabled_yrpfx_31){background-color:rgba(var(--button-bg-rgb),.12)}._tile-button--toggled_yrpfx_43:active:not(:disabled,._tile-button--disabled_yrpfx_31){background-color:rgba(var(--button-bg-rgb),.16)}._tile-button--destructive_yrpfx_57{--focus-ring-color: var(--error-text, var(--color-danger));--tile-button-fg: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04)}._tile-button--destructive_yrpfx_57:hover:not(:disabled,._tile-button--disabled_yrpfx_31){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);--tile-button-fg: var(--error-text, var(--color-danger))}._tile-button--destructive_yrpfx_57:active:not(:disabled,._tile-button--disabled_yrpfx_31){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);--tile-button-fg: var(--error-text, var(--color-danger))}._tile-button_yrpfx_2:hover:not(:disabled,._tile-button--disabled_yrpfx_31),._tile-button_yrpfx_2:active:not(:disabled,._tile-button--disabled_yrpfx_31),._tile-button--toggled_yrpfx_43,._tile-button--destructive_yrpfx_57{--tile-button-icon-fg: initial}._tile-button__icon_yrpfx_47{display:flex;align-items:center;justify-content:center;width:var(--icon-size-20);height:var(--icon-size-20);flex-shrink:0;color:var(--tile-button-icon-fg, var(--tile-button-fg))}._tile-button__label_yrpfx_48{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;box-sizing:border-box;max-width:100%;padding-inline:var(--tile-button-padding-inline, var(--spacing-xs));display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;text-wrap:balance;white-space:normal;text-align:center;color:var(--tile-button-fg)}

package/dist/components/tile-button/TileButton.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TileButton.css');const t={"tile-button":"_tile-button_w3stn_2","tile-button--disabled":"_tile-button--disabled_w3stn_31","tile-button--toggled":"_tile-button--toggled_w3stn_43","tile-button__icon":"_tile-button__icon_w3stn_47","tile-button__label":"_tile-button__label_w3stn_48","tile-button--destructive":"_tile-button--destructive_w3stn_57"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TileButton.css');const t={"tile-button":"_tile-button_yrpfx_2","tile-button--disabled":"_tile-button--disabled_yrpfx_31","tile-button--toggled":"_tile-button--toggled_yrpfx_43","tile-button__icon":"_tile-button__icon_yrpfx_47","tile-button__label":"_tile-button__label_yrpfx_48","tile-button--destructive":"_tile-button--destructive_yrpfx_57"};exports.default=t;
 //# sourceMappingURL=TileButton.module.scss.cjs.map

package/dist/components/tile-button/TileButton.module.scss.js

@@ -1,10 +1,10 @@
 import './TileButton.css';const t = {
-  "tile-button": "_tile-button_w3stn_2",
-  "tile-button--disabled": "_tile-button--disabled_w3stn_31",
-  "tile-button--toggled": "_tile-button--toggled_w3stn_43",
-  "tile-button__icon": "_tile-button__icon_w3stn_47",
-  "tile-button__label": "_tile-button__label_w3stn_48",
-  "tile-button--destructive": "_tile-button--destructive_w3stn_57"
+  "tile-button": "_tile-button_yrpfx_2",
+  "tile-button--disabled": "_tile-button--disabled_yrpfx_31",
+  "tile-button--toggled": "_tile-button--toggled_yrpfx_43",
+  "tile-button__icon": "_tile-button__icon_yrpfx_47",
+  "tile-button__label": "_tile-button__label_yrpfx_48",
+  "tile-button--destructive": "_tile-button--destructive_yrpfx_57"
 };
 export {
   t as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mattermost/compass-ui",
-  "version": "0.1.0-alpha.23",
+  "version": "0.1.0-alpha.25",
   "description": "Compass design system UI components for Mattermost products",
   "repository": {
     "type": "git",
@@ -62,7 +62,7 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "@mattermost/compass-icons": "^0.1.63",
+    "@mattermost/compass-icons": "^0.1.64",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
     "simplebar-react": "^3.3.2"
@@ -70,7 +70,7 @@
   "devDependencies": {
     "@fontsource/metropolis": "^5.2.5",
     "@fontsource/open-sans": "^5.2.7",
-    "@mattermost/compass-icons": "^0.1.63",
+    "@mattermost/compass-icons": "^0.1.64",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",
     "@storybook/react": "^8.6.14",