@mattermost/compass-ui 0.1.0-alpha.11 → 0.1.0-alpha.13

package/dist/components/error-message/ErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.js","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport styles from './ErrorMessage.module.scss';\n\nexport interface ErrorMessageProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The error message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  message: ReactNode;\n}\n\n/**\n * Error Message is the inline red error line that appears below a form input when validation\n * fails. It pairs an alert glyph with a short, human-readable explanation so the user can\n * fix the field and move on.\n */\nexport default function ErrorMessage({\n  className = '',\n  message,\n}: ErrorMessageProps) {\n  const rootClass = [styles['error-message'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"alert\">\n      <span className={styles['error-message__icon']} aria-hidden>\n        <Icon size=\"12\" glyph={<AlertCircleOutlineIcon />} />\n      </span>\n      <span className={styles['error-message__text']}>{message}</span>\n    </div>\n  );\n}\n"],"names":["ErrorMessage","className","message","rootClass","styles","jsxs","jsx","Icon","AlertCircleOutlineIcon"],"mappings":";;;;AAiBA,SAAwBA,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,SAAAC;AACF,GAAsB;AACpB,QAAMC,IAAY,CAACC,EAAO,eAAe,GAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAWF,GAAW,MAAK,SAC9B,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWF,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAuB,GAAI,GACrD;AAAA,sBACC,QAAA,EAAK,WAAWJ,EAAO,qBAAqB,GAAI,UAAAF,EAAA,CAAQ;AAAA,EAAA,GAC3D;AAEJ;"}
+{"version":3,"file":"ErrorMessage.js","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport styles from './ErrorMessage.module.scss';\n\nexport interface ErrorMessageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The error message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  message: ReactNode;\n}\n\n/**\n * Error Message is the inline red error line that appears below a form input when validation\n * fails. It pairs an alert glyph with a short, human-readable explanation so the user can\n * fix the field and move on.\n */\nexport default function ErrorMessage({\n  className = '',\n  message,\n  ...rest\n}: ErrorMessageProps) {\n  const rootClass = [styles['error-message'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div {...rest} className={rootClass} role=\"alert\">\n      <span className={styles['error-message__icon']} aria-hidden>\n        <Icon size=\"12\" glyph={<AlertCircleOutlineIcon />} />\n      </span>\n      <span className={styles['error-message__text']}>{message}</span>\n    </div>\n  );\n}\n"],"names":["ErrorMessage","className","message","rest","rootClass","styles","jsx","Icon","AlertCircleOutlineIcon"],"mappings":";;;;AAiBA,SAAwBA,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAY,CAACC,EAAO,eAAe,GAAGJ,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,OAAA,EAAK,GAAGE,GAAM,WAAWC,GAAW,MAAK,SACxC,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWD,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAC,EAACC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAuB,GAAI,GACrD;AAAA,sBACC,QAAA,EAAK,WAAWH,EAAO,qBAAqB,GAAI,UAAAH,EAAA,CAAQ;AAAA,EAAA,GAC3D;AAEJ;"}

package/dist/components/feature-discovery-panel/FeatureDiscoveryPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureDiscoveryPanel.cjs","sources":["../../../src/components/feature-discovery-panel/FeatureDiscoveryPanel.tsx"],"sourcesContent":["import Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Tag from '@/components/tag/Tag';\nimport MattermostIcon from '@mattermost/compass-icons/components/mattermost';\nimport styles from './FeatureDiscoveryPanel.module.scss';\n\nexport interface FeatureDiscoveryPanelProps {\n  /** SKU tag label (e.g. \"PROFESSIONAL\"). Set to null to hide. */\n  skuLabel?: string | null;\n  /** Panel heading title. */\n  title: string;\n  /** Body description text. */\n  description: string;\n  /** Primary CTA button props (children = label). */\n  primaryAction?: ButtonProps;\n  /** Secondary CTA button props (children = label). */\n  secondaryAction?: ButtonProps;\n  /** Illustration props (children = the SVG component). Rendered in the right column. */\n  illustration?: IllustrationProps;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Feature Discovery Panels surface capabilities only available on a higher-tier SKU. They\n * live in the System Console and are visible to admins — never to end users. The goal is to\n * communicate the value of the feature, not gate the UI behind a paywall.\n */\nexport default function FeatureDiscoveryPanel({\n  skuLabel = 'PROFESSIONAL',\n  title,\n  description,\n  primaryAction,\n  secondaryAction,\n  illustration,\n  className = '',\n}: FeatureDiscoveryPanelProps) {\n  return (\n    <div\n      className={[styles['feature-discovery-panel'], className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['feature-discovery-panel__content']}>\n        <div className={styles['feature-discovery-panel__text']}>\n          <div className={styles['feature-discovery-panel__title-group']}>\n            {skuLabel != null && (\n              <Tag\n                label={skuLabel}\n                casing=\"all-caps\"\n                leadingIcon={<Icon size=\"10\" glyph={<MattermostIcon />} />}\n              />\n            )}\n            <h2 className={styles['feature-discovery-panel__title']}>\n              {title}\n            </h2>\n          </div>\n          <p className={styles['feature-discovery-panel__description']}>\n            {description}\n          </p>\n        </div>\n\n        {(primaryAction != null || secondaryAction != null) && (\n          <div className={styles['feature-discovery-panel__actions']}>\n            {primaryAction != null && (\n              <div className={styles['feature-discovery-panel__action']}>\n                <Button size=\"medium\" {...primaryAction} />\n              </div>\n            )}\n            {secondaryAction != null && (\n              <div className={styles['feature-discovery-panel__action']}>\n                <Button size=\"medium\" {...secondaryAction} />\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n\n      {illustration != null && (\n        <div className={styles['feature-discovery-panel__illustration']}>\n          <Illustration {...illustration} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["FeatureDiscoveryPanel","skuLabel","title","description","primaryAction","secondaryAction","illustration","className","jsxs","styles","jsx","Tag","Icon","MattermostIcon","Button","Illustration"],"mappings":"6YA+BA,SAAwBA,EAAsB,CAC5C,SAAAC,EAAW,eACX,MAAAC,EACA,YAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,UAAAC,EAAY,EACd,EAA+B,CAC7B,OACEC,EAAAA,KAAC,MAAA,CACC,UAAW,CAACC,UAAO,yBAAyB,EAAGF,CAAS,EACrD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,kCAAkC,EACvD,SAAA,CAAAD,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,+BAA+B,EACpD,SAAA,CAAAD,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,sCAAsC,EAC1D,SAAA,CAAAR,GAAY,MACXS,EAAAA,IAACC,EAAAA,QAAA,CACC,MAAOV,EACP,OAAO,WACP,kBAAcW,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAe,CAAA,CAAI,CAAA,CAAA,QAG3D,KAAA,CAAG,UAAWJ,EAAAA,QAAO,gCAAgC,EACnD,SAAAP,CAAA,CACH,CAAA,EACF,QACC,IAAA,CAAE,UAAWO,EAAAA,QAAO,sCAAsC,EACxD,SAAAN,CAAA,CACH,CAAA,EACF,GAEEC,GAAiB,MAAQC,GAAmB,cAC3C,MAAA,CAAI,UAAWI,EAAAA,QAAO,kCAAkC,EACtD,SAAA,CAAAL,GAAiB,MAChBM,MAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iCAAiC,EACtD,SAAAC,EAAAA,IAACI,EAAAA,QAAA,CAAO,KAAK,SAAU,GAAGV,EAAe,EAC3C,EAEDC,GAAmB,MAClBK,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iCAAiC,EACtD,SAAAC,EAAAA,IAACI,EAAAA,QAAA,CAAO,KAAK,SAAU,GAAGT,EAAiB,CAAA,CAC7C,CAAA,CAAA,CAEJ,CAAA,EAEJ,EAECC,GAAgB,MACfI,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uCAAuC,EAC5D,SAAAC,EAAAA,IAACK,EAAAA,QAAA,CAAc,GAAGT,CAAA,CAAc,CAAA,CAClC,CAAA,CAAA,CAAA,CAIR"}
+{"version":3,"file":"FeatureDiscoveryPanel.cjs","sources":["../../../src/components/feature-discovery-panel/FeatureDiscoveryPanel.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Tag from '@/components/tag/Tag';\nimport MattermostIcon from '@mattermost/compass-icons/components/mattermost';\nimport styles from './FeatureDiscoveryPanel.module.scss';\n\nexport interface FeatureDiscoveryPanelProps {\n  /** SKU tag label. Default: \"PROFESSIONAL\". Set to null to hide. Accepts translated nodes. */\n  skuLabel?: ReactNode;\n  /** Panel heading title. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Body description text. Accepts translated nodes. */\n  description: ReactNode;\n  /** Primary CTA button props (children = label). */\n  primaryAction?: ButtonProps;\n  /** Secondary CTA button props (children = label). */\n  secondaryAction?: ButtonProps;\n  /** Illustration props (children = the SVG component). Rendered in the right column. */\n  illustration?: IllustrationProps;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Feature Discovery Panels surface capabilities only available on a higher-tier SKU. They\n * live in the System Console and are visible to admins — never to end users. The goal is to\n * communicate the value of the feature, not gate the UI behind a paywall.\n */\nexport default function FeatureDiscoveryPanel({\n  skuLabel = 'PROFESSIONAL',\n  title,\n  description,\n  primaryAction,\n  secondaryAction,\n  illustration,\n  className = '',\n}: FeatureDiscoveryPanelProps) {\n  return (\n    <div\n      className={[styles['feature-discovery-panel'], className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['feature-discovery-panel__content']}>\n        <div className={styles['feature-discovery-panel__text']}>\n          <div className={styles['feature-discovery-panel__title-group']}>\n            {skuLabel != null && (\n              <Tag\n                label={skuLabel}\n                casing=\"all-caps\"\n                leadingIcon={<Icon size=\"10\" glyph={<MattermostIcon />} />}\n              />\n            )}\n            <h2 className={styles['feature-discovery-panel__title']}>\n              {title}\n            </h2>\n          </div>\n          <p className={styles['feature-discovery-panel__description']}>\n            {description}\n          </p>\n        </div>\n\n        {(primaryAction != null || secondaryAction != null) && (\n          <div className={styles['feature-discovery-panel__actions']}>\n            {primaryAction != null && (\n              <div className={styles['feature-discovery-panel__action']}>\n                <Button size=\"medium\" {...primaryAction} />\n              </div>\n            )}\n            {secondaryAction != null && (\n              <div className={styles['feature-discovery-panel__action']}>\n                <Button size=\"medium\" {...secondaryAction} />\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n\n      {illustration != null && (\n        <div className={styles['feature-discovery-panel__illustration']}>\n          <Illustration {...illustration} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["FeatureDiscoveryPanel","skuLabel","title","description","primaryAction","secondaryAction","illustration","className","jsxs","styles","jsx","Tag","Icon","MattermostIcon","Button","Illustration"],"mappings":"6YAgCA,SAAwBA,EAAsB,CAC5C,SAAAC,EAAW,eACX,MAAAC,EACA,YAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,UAAAC,EAAY,EACd,EAA+B,CAC7B,OACEC,EAAAA,KAAC,MAAA,CACC,UAAW,CAACC,UAAO,yBAAyB,EAAGF,CAAS,EACrD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,kCAAkC,EACvD,SAAA,CAAAD,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,+BAA+B,EACpD,SAAA,CAAAD,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,sCAAsC,EAC1D,SAAA,CAAAR,GAAY,MACXS,EAAAA,IAACC,EAAAA,QAAA,CACC,MAAOV,EACP,OAAO,WACP,kBAAcW,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAe,CAAA,CAAI,CAAA,CAAA,QAG3D,KAAA,CAAG,UAAWJ,EAAAA,QAAO,gCAAgC,EACnD,SAAAP,CAAA,CACH,CAAA,EACF,QACC,IAAA,CAAE,UAAWO,EAAAA,QAAO,sCAAsC,EACxD,SAAAN,CAAA,CACH,CAAA,EACF,GAEEC,GAAiB,MAAQC,GAAmB,cAC3C,MAAA,CAAI,UAAWI,EAAAA,QAAO,kCAAkC,EACtD,SAAA,CAAAL,GAAiB,MAChBM,MAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iCAAiC,EACtD,SAAAC,EAAAA,IAACI,EAAAA,QAAA,CAAO,KAAK,SAAU,GAAGV,EAAe,EAC3C,EAEDC,GAAmB,MAClBK,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iCAAiC,EACtD,SAAAC,EAAAA,IAACI,EAAAA,QAAA,CAAO,KAAK,SAAU,GAAGT,EAAiB,CAAA,CAC7C,CAAA,CAAA,CAEJ,CAAA,EAEJ,EAECC,GAAgB,MACfI,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uCAAuC,EAC5D,SAAAC,EAAAA,IAACK,EAAAA,QAAA,CAAc,GAAGT,CAAA,CAAc,CAAA,CAClC,CAAA,CAAA,CAAA,CAIR"}

package/dist/components/feature-discovery-panel/FeatureDiscoveryPanel.d.ts

@@ -1,12 +1,13 @@
+import { ReactNode } from 'react';
 import { ButtonProps } from '../button/Button';
 import { IllustrationProps } from '../illustration/Illustration';
 export interface FeatureDiscoveryPanelProps {
-    /** SKU tag label (e.g. "PROFESSIONAL"). Set to null to hide. */
-    skuLabel?: string | null;
-    /** Panel heading title. */
-    title: string;
-    /** Body description text. */
-    description: string;
+    /** SKU tag label. Default: "PROFESSIONAL". Set to null to hide. Accepts translated nodes. */
+    skuLabel?: ReactNode;
+    /** Panel heading title. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    title: ReactNode;
+    /** Body description text. Accepts translated nodes. */
+    description: ReactNode;
     /** Primary CTA button props (children = label). */
     primaryAction?: ButtonProps;
     /** Secondary CTA button props (children = label). */

package/dist/components/feature-discovery-panel/FeatureDiscoveryPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureDiscoveryPanel.d.ts","sourceRoot":"","sources":["../../../src/components/feature-discovery-panel/FeatureDiscoveryPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAKhF,MAAM,WAAW,0BAA0B;IACzC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,qDAAqD;IACrD,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,uFAAuF;IACvF,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,QAAyB,EACzB,KAAK,EACL,WAAW,EACX,aAAa,EACb,eAAe,EACf,YAAY,EACZ,SAAc,GACf,EAAE,0BAA0B,2CAiD5B"}
+{"version":3,"file":"FeatureDiscoveryPanel.d.ts","sourceRoot":"","sources":["../../../src/components/feature-discovery-panel/FeatureDiscoveryPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAKhF,MAAM,WAAW,0BAA0B;IACzC,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kFAAkF;IAClF,KAAK,EAAE,SAAS,CAAC;IACjB,uDAAuD;IACvD,WAAW,EAAE,SAAS,CAAC;IACvB,mDAAmD;IACnD,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,qDAAqD;IACrD,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,uFAAuF;IACvF,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,QAAyB,EACzB,KAAK,EACL,WAAW,EACX,aAAa,EACb,eAAe,EACf,YAAY,EACZ,SAAc,GACf,EAAE,0BAA0B,2CAiD5B"}

package/dist/components/feature-discovery-panel/FeatureDiscoveryPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureDiscoveryPanel.js","sources":["../../../src/components/feature-discovery-panel/FeatureDiscoveryPanel.tsx"],"sourcesContent":["import Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Tag from '@/components/tag/Tag';\nimport MattermostIcon from '@mattermost/compass-icons/components/mattermost';\nimport styles from './FeatureDiscoveryPanel.module.scss';\n\nexport interface FeatureDiscoveryPanelProps {\n  /** SKU tag label (e.g. \"PROFESSIONAL\"). Set to null to hide. */\n  skuLabel?: string | null;\n  /** Panel heading title. */\n  title: string;\n  /** Body description text. */\n  description: string;\n  /** Primary CTA button props (children = label). */\n  primaryAction?: ButtonProps;\n  /** Secondary CTA button props (children = label). */\n  secondaryAction?: ButtonProps;\n  /** Illustration props (children = the SVG component). Rendered in the right column. */\n  illustration?: IllustrationProps;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Feature Discovery Panels surface capabilities only available on a higher-tier SKU. They\n * live in the System Console and are visible to admins — never to end users. The goal is to\n * communicate the value of the feature, not gate the UI behind a paywall.\n */\nexport default function FeatureDiscoveryPanel({\n  skuLabel = 'PROFESSIONAL',\n  title,\n  description,\n  primaryAction,\n  secondaryAction,\n  illustration,\n  className = '',\n}: FeatureDiscoveryPanelProps) {\n  return (\n    <div\n      className={[styles['feature-discovery-panel'], className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['feature-discovery-panel__content']}>\n        <div className={styles['feature-discovery-panel__text']}>\n          <div className={styles['feature-discovery-panel__title-group']}>\n            {skuLabel != null && (\n              <Tag\n                label={skuLabel}\n                casing=\"all-caps\"\n                leadingIcon={<Icon size=\"10\" glyph={<MattermostIcon />} />}\n              />\n            )}\n            <h2 className={styles['feature-discovery-panel__title']}>\n              {title}\n            </h2>\n          </div>\n          <p className={styles['feature-discovery-panel__description']}>\n            {description}\n          </p>\n        </div>\n\n        {(primaryAction != null || secondaryAction != null) && (\n          <div className={styles['feature-discovery-panel__actions']}>\n            {primaryAction != null && (\n              <div className={styles['feature-discovery-panel__action']}>\n                <Button size=\"medium\" {...primaryAction} />\n              </div>\n            )}\n            {secondaryAction != null && (\n              <div className={styles['feature-discovery-panel__action']}>\n                <Button size=\"medium\" {...secondaryAction} />\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n\n      {illustration != null && (\n        <div className={styles['feature-discovery-panel__illustration']}>\n          <Illustration {...illustration} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["FeatureDiscoveryPanel","skuLabel","title","description","primaryAction","secondaryAction","illustration","className","jsxs","styles","jsx","Tag","Icon","MattermostIcon","Button","Illustration"],"mappings":";;;;;;;AA+BA,SAAwBA,EAAsB;AAAA,EAC5C,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAA+B;AAC7B,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACC,EAAO,yBAAyB,GAAGF,CAAS,EACrD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,kCAAkC,GACvD,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,+BAA+B,GACpD,UAAA;AAAA,YAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,sCAAsC,GAC1D,UAAA;AAAA,cAAAR,KAAY,QACX,gBAAAS;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACC,OAAOV;AAAA,kBACP,QAAO;AAAA,kBACP,+BAAcW,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACG,KAAe,EAAA,CAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,gCAG3D,MAAA,EAAG,WAAWJ,EAAO,gCAAgC,GACnD,UAAAP,EAAA,CACH;AAAA,YAAA,GACF;AAAA,8BACC,KAAA,EAAE,WAAWO,EAAO,sCAAsC,GACxD,UAAAN,EAAA,CACH;AAAA,UAAA,GACF;AAAA,WAEEC,KAAiB,QAAQC,KAAmB,2BAC3C,OAAA,EAAI,WAAWI,EAAO,kCAAkC,GACtD,UAAA;AAAA,YAAAL,KAAiB,QAChB,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,iCAAiC,GACtD,UAAA,gBAAAC,EAACI,GAAA,EAAO,MAAK,UAAU,GAAGV,GAAe,GAC3C;AAAA,YAEDC,KAAmB,QAClB,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,iCAAiC,GACtD,UAAA,gBAAAC,EAACI,GAAA,EAAO,MAAK,UAAU,GAAGT,GAAiB,EAAA,CAC7C;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA,GAEJ;AAAA,QAECC,KAAgB,QACf,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,uCAAuC,GAC5D,UAAA,gBAAAC,EAACK,GAAA,EAAc,GAAGT,EAAA,CAAc,EAAA,CAClC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"FeatureDiscoveryPanel.js","sources":["../../../src/components/feature-discovery-panel/FeatureDiscoveryPanel.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport type { ButtonProps } from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport Illustration from '@/components/illustration/Illustration';\nimport type { IllustrationProps } from '@/components/illustration/Illustration';\nimport Tag from '@/components/tag/Tag';\nimport MattermostIcon from '@mattermost/compass-icons/components/mattermost';\nimport styles from './FeatureDiscoveryPanel.module.scss';\n\nexport interface FeatureDiscoveryPanelProps {\n  /** SKU tag label. Default: \"PROFESSIONAL\". Set to null to hide. Accepts translated nodes. */\n  skuLabel?: ReactNode;\n  /** Panel heading title. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Body description text. Accepts translated nodes. */\n  description: ReactNode;\n  /** Primary CTA button props (children = label). */\n  primaryAction?: ButtonProps;\n  /** Secondary CTA button props (children = label). */\n  secondaryAction?: ButtonProps;\n  /** Illustration props (children = the SVG component). Rendered in the right column. */\n  illustration?: IllustrationProps;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Feature Discovery Panels surface capabilities only available on a higher-tier SKU. They\n * live in the System Console and are visible to admins — never to end users. The goal is to\n * communicate the value of the feature, not gate the UI behind a paywall.\n */\nexport default function FeatureDiscoveryPanel({\n  skuLabel = 'PROFESSIONAL',\n  title,\n  description,\n  primaryAction,\n  secondaryAction,\n  illustration,\n  className = '',\n}: FeatureDiscoveryPanelProps) {\n  return (\n    <div\n      className={[styles['feature-discovery-panel'], className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['feature-discovery-panel__content']}>\n        <div className={styles['feature-discovery-panel__text']}>\n          <div className={styles['feature-discovery-panel__title-group']}>\n            {skuLabel != null && (\n              <Tag\n                label={skuLabel}\n                casing=\"all-caps\"\n                leadingIcon={<Icon size=\"10\" glyph={<MattermostIcon />} />}\n              />\n            )}\n            <h2 className={styles['feature-discovery-panel__title']}>\n              {title}\n            </h2>\n          </div>\n          <p className={styles['feature-discovery-panel__description']}>\n            {description}\n          </p>\n        </div>\n\n        {(primaryAction != null || secondaryAction != null) && (\n          <div className={styles['feature-discovery-panel__actions']}>\n            {primaryAction != null && (\n              <div className={styles['feature-discovery-panel__action']}>\n                <Button size=\"medium\" {...primaryAction} />\n              </div>\n            )}\n            {secondaryAction != null && (\n              <div className={styles['feature-discovery-panel__action']}>\n                <Button size=\"medium\" {...secondaryAction} />\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n\n      {illustration != null && (\n        <div className={styles['feature-discovery-panel__illustration']}>\n          <Illustration {...illustration} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["FeatureDiscoveryPanel","skuLabel","title","description","primaryAction","secondaryAction","illustration","className","jsxs","styles","jsx","Tag","Icon","MattermostIcon","Button","Illustration"],"mappings":";;;;;;;AAgCA,SAAwBA,EAAsB;AAAA,EAC5C,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAA+B;AAC7B,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACC,EAAO,yBAAyB,GAAGF,CAAS,EACrD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,kCAAkC,GACvD,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,+BAA+B,GACpD,UAAA;AAAA,YAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,sCAAsC,GAC1D,UAAA;AAAA,cAAAR,KAAY,QACX,gBAAAS;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACC,OAAOV;AAAA,kBACP,QAAO;AAAA,kBACP,+BAAcW,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACG,KAAe,EAAA,CAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,gCAG3D,MAAA,EAAG,WAAWJ,EAAO,gCAAgC,GACnD,UAAAP,EAAA,CACH;AAAA,YAAA,GACF;AAAA,8BACC,KAAA,EAAE,WAAWO,EAAO,sCAAsC,GACxD,UAAAN,EAAA,CACH;AAAA,UAAA,GACF;AAAA,WAEEC,KAAiB,QAAQC,KAAmB,2BAC3C,OAAA,EAAI,WAAWI,EAAO,kCAAkC,GACtD,UAAA;AAAA,YAAAL,KAAiB,QAChB,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,iCAAiC,GACtD,UAAA,gBAAAC,EAACI,GAAA,EAAO,MAAK,UAAU,GAAGV,GAAe,GAC3C;AAAA,YAEDC,KAAmB,QAClB,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,iCAAiC,GACtD,UAAA,gBAAAC,EAACI,GAAA,EAAO,MAAK,UAAU,GAAGT,GAAiB,EAAA,CAC7C;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA,GAEJ;AAAA,QAECC,KAAgB,QACf,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,uCAAuC,GAC5D,UAAA,gBAAAC,EAACK,GAAA,EAAc,GAAGT,EAAA,CAAc,EAAA,CAClC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/global-banner/GlobalBanner.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),b=require("../button/Button.cjs"),f=require("../icon-button/IconButton.cjs"),t=require("../icon/Icon.cjs"),__m=require("@mattermost/compass-icons/components/close.js"),m=__m?.default??__m,l=require("./GlobalBanner.module.scss.cjs");function _({className:o="",message:i,type:a="general",leadingIcon:n,actionLabel:s,onAction:u,onDismiss:r}){const c=a!=="general"?l.default[`global-banner--type-${a.toLowerCase()}`]:"",d=[l.default["global-banner"],c,o].filter(Boolean).join(" ");return e.jsxs("div",{className:d,role:"banner",children:[e.jsxs("div",{className:l.default["global-banner__content"],children:[n!=null&&e.jsx("span",{className:l.default["global-banner__icon"],"aria-hidden":!0,children:e.jsx(t.IconSlotContext.Provider,{value:{size:"16"},children:n})}),e.jsx("span",{className:l.default["global-banner__message"],children:i}),s!=null&&e.jsx(b.default,{className:l.default["global-banner__action"],appearance:"default",emphasis:"tertiary",size:"x-small",onClick:u,children:s})]}),r!=null&&e.jsx(f.default,{className:l.default["global-banner__dismiss"],"aria-label":"Dismiss",size:"small",icon:e.jsx(t.default,{glyph:e.jsx(m,{}),size:"16"}),onClick:r})]})}exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),g=require("../button/Button.cjs"),_=require("../icon-button/IconButton.cjs"),t=require("../icon/Icon.cjs"),__j=require("@mattermost/compass-icons/components/close.js"),j=__j?.default??__j,m=require("../../utils/props.cjs"),l=require("./GlobalBanner.module.scss.cjs");function x({className:c="",message:u,type:n="general",leadingIcon:r,actionLabel:s,onAction:i,onDismiss:o,dismissLabel:d="Dismiss",dismissButtonProps:a}){const b=n!=="general"?l.default[`global-banner--type-${n.toLowerCase()}`]:"",f=[l.default["global-banner"],b,c].filter(Boolean).join(" ");return e.jsxs("div",{className:f,role:"banner",children:[e.jsxs("div",{className:l.default["global-banner__content"],children:[r!=null&&e.jsx("span",{className:l.default["global-banner__icon"],"aria-hidden":!0,children:e.jsx(t.IconSlotContext.Provider,{value:{size:"16"},children:r})}),e.jsx("span",{className:l.default["global-banner__message"],children:u}),s!=null&&e.jsx(g.default,{className:l.default["global-banner__action"],appearance:"default",emphasis:"tertiary",size:"x-small",onClick:i,children:s})]}),o!=null&&e.jsx(_.default,{...a,className:m.mergeClassNames(l.default["global-banner__dismiss"],a==null?void 0:a.className),"aria-label":d,size:"small",icon:e.jsx(t.default,{glyph:e.jsx(j,{}),size:"16"}),onClick:o})]})}exports.default=x;
 //# sourceMappingURL=GlobalBanner.cjs.map

package/dist/components/global-banner/GlobalBanner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalBanner.cjs","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './GlobalBanner.module.scss';\n\nexport type GlobalBannerType =\n  | 'general'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'success';\n\nexport interface GlobalBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message text. */\n  message: string;\n  /** Optional type for color-coding. Default: General. */\n  type?: GlobalBannerType;\n  /** Optional leading icon — pass `<Icon glyph={<SomeIcon />} />`; GlobalBanner provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  /** Label for the optional action button. */\n  actionLabel?: string;\n  /** Callback when the action button is clicked. */\n  onAction?: () => void;\n  /** Called when dismiss button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n}\n\n/**\n * Global Banners sit at the very top of the application and broadcast something every user\n * in the workspace needs to know — a maintenance window, an expiring licence, a connectivity\n * problem, an available update. They span the full width of the app and stay visible until\n * they're dismissed or the condition resolves.\n */\nexport default function GlobalBanner({\n  className = '',\n  message,\n  type = 'general',\n  leadingIcon,\n  actionLabel,\n  onAction,\n  onDismiss,\n}: GlobalBannerProps) {\n  const typeClass =\n    type !== 'general'\n      ? styles[`global-banner--type-${type.toLowerCase()}`]\n      : '';\n\n  const rootClass = [styles['global-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"banner\">\n      <div className={styles['global-banner__content']}>\n        {leadingIcon != null && (\n          <span className={styles['global-banner__icon']} aria-hidden>\n            <IconSlotContext.Provider value={{ size: '16' }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          </span>\n        )}\n        <span className={styles['global-banner__message']}>{message}</span>\n        {actionLabel != null && (\n          <Button\n            className={styles['global-banner__action']}\n            appearance=\"default\"\n            emphasis=\"tertiary\"\n            size=\"x-small\"\n            onClick={onAction}\n          >\n            {actionLabel}\n          </Button>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          className={styles['global-banner__dismiss']}\n          aria-label=\"Dismiss\"\n          size=\"small\"\n          icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["GlobalBanner","className","message","type","leadingIcon","actionLabel","onAction","onDismiss","typeClass","styles","rootClass","jsxs","jsx","IconSlotContext","Button","IconButton","Icon","CloseIcon"],"mappings":"+VAsCA,SAAwBA,EAAa,CACnC,UAAAC,EAAY,GACZ,QAAAC,EACA,KAAAC,EAAO,UACP,YAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAsB,CACpB,MAAMC,EACJL,IAAS,UACLM,UAAO,uBAAuBN,EAAK,YAAA,CAAa,EAAE,EAClD,GAEAO,EAAY,CAACD,UAAO,eAAe,EAAGD,EAAWP,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEU,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAW,KAAK,SAC9B,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAL,GAAe,MACdQ,EAAAA,IAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,eAACI,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,QAED,OAAA,CAAK,UAAWJ,EAAAA,QAAO,wBAAwB,EAAI,SAAAP,EAAQ,EAC3DG,GAAe,MACdO,EAAAA,IAACE,EAAAA,QAAA,CACC,UAAWL,EAAAA,QAAO,uBAAuB,EACzC,WAAW,UACX,SAAS,WACT,KAAK,UACL,QAASH,EAER,SAAAD,CAAA,CAAA,CACH,EAEJ,EACCE,GAAa,MACZK,EAAAA,IAACG,EAAAA,QAAA,CACC,UAAWN,EAAAA,QAAO,wBAAwB,EAC1C,aAAW,UACX,KAAK,QACL,WAAOO,UAAA,CAAK,YAAQC,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAASV,CAAA,CAAA,CACX,EAEJ,CAEJ"}
+{"version":3,"file":"GlobalBanner.cjs","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './GlobalBanner.module.scss';\n\nexport type GlobalBannerType =\n  | 'general'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'success';\n\nexport interface GlobalBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  message: ReactNode;\n  /** Optional type for color-coding. Default: General. */\n  type?: GlobalBannerType;\n  /** Optional leading icon — pass `<Icon glyph={<SomeIcon />} />`; GlobalBanner provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  /** Label for the optional action button. Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Callback when the action button is clicked. */\n  onAction?: () => void;\n  /** Called when dismiss button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n  /** Accessible name for the dismiss button. Default: \"Dismiss\". */\n  dismissLabel?: string;\n  /** Extra attributes for the dismiss button (e.g. `data-testid`). */\n  dismissButtonProps?: BuiltInButtonProps;\n}\n\n/**\n * Global Banners sit at the very top of the application and broadcast something every user\n * in the workspace needs to know — a maintenance window, an expiring licence, a connectivity\n * problem, an available update. They span the full width of the app and stay visible until\n * they're dismissed or the condition resolves.\n */\nexport default function GlobalBanner({\n  className = '',\n  message,\n  type = 'general',\n  leadingIcon,\n  actionLabel,\n  onAction,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  dismissButtonProps,\n}: GlobalBannerProps) {\n  const typeClass =\n    type !== 'general'\n      ? styles[`global-banner--type-${type.toLowerCase()}`]\n      : '';\n\n  const rootClass = [styles['global-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"banner\">\n      <div className={styles['global-banner__content']}>\n        {leadingIcon != null && (\n          <span className={styles['global-banner__icon']} aria-hidden>\n            <IconSlotContext.Provider value={{ size: '16' }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          </span>\n        )}\n        <span className={styles['global-banner__message']}>{message}</span>\n        {actionLabel != null && (\n          <Button\n            className={styles['global-banner__action']}\n            appearance=\"default\"\n            emphasis=\"tertiary\"\n            size=\"x-small\"\n            onClick={onAction}\n          >\n            {actionLabel}\n          </Button>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          {...dismissButtonProps}\n          className={mergeClassNames(\n            styles['global-banner__dismiss'],\n            dismissButtonProps?.className,\n          )}\n          aria-label={dismissLabel}\n          size=\"small\"\n          icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["GlobalBanner","className","message","type","leadingIcon","actionLabel","onAction","onDismiss","dismissLabel","dismissButtonProps","typeClass","styles","rootClass","jsxs","jsx","IconSlotContext","Button","IconButton","mergeClassNames","Icon","CloseIcon"],"mappings":"kYA4CA,SAAwBA,EAAa,CACnC,UAAAC,EAAY,GACZ,QAAAC,EACA,KAAAC,EAAO,UACP,YAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,aAAAC,EAAe,UACf,mBAAAC,CACF,EAAsB,CACpB,MAAMC,EACJP,IAAS,UACLQ,UAAO,uBAAuBR,EAAK,YAAA,CAAa,EAAE,EAClD,GAEAS,EAAY,CAACD,UAAO,eAAe,EAAGD,EAAWT,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEY,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAW,KAAK,SAC9B,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAP,GAAe,MACdU,EAAAA,IAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,eAACI,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,QAED,OAAA,CAAK,UAAWJ,EAAAA,QAAO,wBAAwB,EAAI,SAAAT,EAAQ,EAC3DG,GAAe,MACdS,EAAAA,IAACE,EAAAA,QAAA,CACC,UAAWL,EAAAA,QAAO,uBAAuB,EACzC,WAAW,UACX,SAAS,WACT,KAAK,UACL,QAASL,EAER,SAAAD,CAAA,CAAA,CACH,EAEJ,EACCE,GAAa,MACZO,EAAAA,IAACG,EAAAA,QAAA,CACE,GAAGR,EACJ,UAAWS,EAAAA,gBACTP,EAAAA,QAAO,wBAAwB,EAC/BF,GAAA,YAAAA,EAAoB,SAAA,EAEtB,aAAYD,EACZ,KAAK,QACL,WAAOW,UAAA,CAAK,YAAQC,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAASb,CAAA,CAAA,CACX,EAEJ,CAEJ"}

package/dist/components/global-banner/GlobalBanner.d.ts

@@ -1,20 +1,25 @@
 import { ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
 export type GlobalBannerType = 'general' | 'warning' | 'danger' | 'info' | 'success';
 export interface GlobalBannerProps {
     /** Optional CSS class name. */
     className?: string;
-    /** The message text. */
-    message: string;
+    /** The message text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    message: ReactNode;
     /** Optional type for color-coding. Default: General. */
     type?: GlobalBannerType;
     /** Optional leading icon — pass `<Icon glyph={<SomeIcon />} />`; GlobalBanner provides the correct size via context. */
     leadingIcon?: ReactNode;
-    /** Label for the optional action button. */
-    actionLabel?: string;
+    /** Label for the optional action button. Accepts translated nodes. */
+    actionLabel?: ReactNode;
     /** Callback when the action button is clicked. */
     onAction?: () => void;
     /** Called when dismiss button is clicked. When omitted, dismiss button is hidden. */
     onDismiss?: () => void;
+    /** Accessible name for the dismiss button. Default: "Dismiss". */
+    dismissLabel?: string;
+    /** Extra attributes for the dismiss button (e.g. `data-testid`). */
+    dismissButtonProps?: BuiltInButtonProps;
 }
 /**
  * Global Banners sit at the very top of the application and broadcast something every user
@@ -22,5 +27,5 @@ export interface GlobalBannerProps {
  * problem, an available update. They span the full width of the app and stay visible until
  * they're dismissed or the condition resolves.
  */
-export default function GlobalBanner({ className, message, type, leadingIcon, actionLabel, onAction, onDismiss, }: GlobalBannerProps): import("react/jsx-runtime").JSX.Element;
+export default function GlobalBanner({ className, message, type, leadingIcon, actionLabel, onAction, onDismiss, dismissLabel, dismissButtonProps, }: GlobalBannerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=GlobalBanner.d.ts.map

package/dist/components/global-banner/GlobalBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalBanner.d.ts","sourceRoot":"","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,wHAAwH;IACxH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,OAAO,EACP,IAAgB,EAChB,WAAW,EACX,WAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,2CA4CnB"}
+{"version":3,"file":"GlobalBanner.d.ts","sourceRoot":"","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,OAAO,EAAE,SAAS,CAAC;IACnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,wHAAwH;IACxH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,sEAAsE;IACtE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,OAAO,EACP,IAAgB,EAChB,WAAW,EACX,WAAW,EACX,QAAQ,EACR,SAAS,EACT,YAAwB,EACxB,kBAAkB,GACnB,EAAE,iBAAiB,2CAgDnB"}

package/dist/components/global-banner/GlobalBanner.js

@@ -1,48 +1,55 @@
-import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
 import p from "../button/Button.js";
-import d from "../icon-button/IconButton.js";
-import u, { IconSlotContext as f } from "../icon/Icon.js";
-import __g from "@mattermost/compass-icons/components/close.js";const g=__g&&__g.default?__g.default:__g;
-import a from "./GlobalBanner.module.scss.js";
-function y({
+import _ from "../icon-button/IconButton.js";
+import h, { IconSlotContext as d } from "../icon/Icon.js";
+import __C from "@mattermost/compass-icons/components/close.js";const C=__C&&__C.default?__C.default:__C;
+import { mergeClassNames as N } from "../../utils/props.js";
+import e from "./GlobalBanner.module.scss.js";
+function k({
   className: i = "",
-  message: t,
-  type: e = "general",
-  leadingIcon: n,
+  message: m,
+  type: n = "general",
+  leadingIcon: r,
   actionLabel: o,
-  onAction: c,
-  onDismiss: r
+  onAction: t,
+  onDismiss: s,
+  dismissLabel: b = "Dismiss",
+  dismissButtonProps: l
 }) {
-  const m = e !== "general" ? a[`global-banner--type-${e.toLowerCase()}`] : "", b = [a["global-banner"], m, i].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: b, role: "banner", children: [
-    /* @__PURE__ */ s("div", { className: a["global-banner__content"], children: [
-      n != null && /* @__PURE__ */ l("span", { className: a["global-banner__icon"], "aria-hidden": !0, children: /* @__PURE__ */ l(f.Provider, { value: { size: "16" }, children: n }) }),
-      /* @__PURE__ */ l("span", { className: a["global-banner__message"], children: t }),
-      o != null && /* @__PURE__ */ l(
+  const f = n !== "general" ? e[`global-banner--type-${n.toLowerCase()}`] : "", g = [e["global-banner"], f, i].filter(Boolean).join(" ");
+  return /* @__PURE__ */ c("div", { className: g, role: "banner", children: [
+    /* @__PURE__ */ c("div", { className: e["global-banner__content"], children: [
+      r != null && /* @__PURE__ */ a("span", { className: e["global-banner__icon"], "aria-hidden": !0, children: /* @__PURE__ */ a(d.Provider, { value: { size: "16" }, children: r }) }),
+      /* @__PURE__ */ a("span", { className: e["global-banner__message"], children: m }),
+      o != null && /* @__PURE__ */ a(
         p,
         {
-          className: a["global-banner__action"],
+          className: e["global-banner__action"],
           appearance: "default",
           emphasis: "tertiary",
           size: "x-small",
-          onClick: c,
+          onClick: t,
           children: o
         }
       )
     ] }),
-    r != null && /* @__PURE__ */ l(
-      d,
+    s != null && /* @__PURE__ */ a(
+      _,
       {
-        className: a["global-banner__dismiss"],
-        "aria-label": "Dismiss",
+        ...l,
+        className: N(
+          e["global-banner__dismiss"],
+          l == null ? void 0 : l.className
+        ),
+        "aria-label": b,
         size: "small",
-        icon: /* @__PURE__ */ l(u, { glyph: /* @__PURE__ */ l(g, {}), size: "16" }),
-        onClick: r
+        icon: /* @__PURE__ */ a(h, { glyph: /* @__PURE__ */ a(C, {}), size: "16" }),
+        onClick: s
       }
     )
   ] });
 }
 export {
-  y as default
+  k as default
 };
 //# sourceMappingURL=GlobalBanner.js.map

package/dist/components/global-banner/GlobalBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalBanner.js","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './GlobalBanner.module.scss';\n\nexport type GlobalBannerType =\n  | 'general'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'success';\n\nexport interface GlobalBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message text. */\n  message: string;\n  /** Optional type for color-coding. Default: General. */\n  type?: GlobalBannerType;\n  /** Optional leading icon — pass `<Icon glyph={<SomeIcon />} />`; GlobalBanner provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  /** Label for the optional action button. */\n  actionLabel?: string;\n  /** Callback when the action button is clicked. */\n  onAction?: () => void;\n  /** Called when dismiss button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n}\n\n/**\n * Global Banners sit at the very top of the application and broadcast something every user\n * in the workspace needs to know — a maintenance window, an expiring licence, a connectivity\n * problem, an available update. They span the full width of the app and stay visible until\n * they're dismissed or the condition resolves.\n */\nexport default function GlobalBanner({\n  className = '',\n  message,\n  type = 'general',\n  leadingIcon,\n  actionLabel,\n  onAction,\n  onDismiss,\n}: GlobalBannerProps) {\n  const typeClass =\n    type !== 'general'\n      ? styles[`global-banner--type-${type.toLowerCase()}`]\n      : '';\n\n  const rootClass = [styles['global-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"banner\">\n      <div className={styles['global-banner__content']}>\n        {leadingIcon != null && (\n          <span className={styles['global-banner__icon']} aria-hidden>\n            <IconSlotContext.Provider value={{ size: '16' }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          </span>\n        )}\n        <span className={styles['global-banner__message']}>{message}</span>\n        {actionLabel != null && (\n          <Button\n            className={styles['global-banner__action']}\n            appearance=\"default\"\n            emphasis=\"tertiary\"\n            size=\"x-small\"\n            onClick={onAction}\n          >\n            {actionLabel}\n          </Button>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          className={styles['global-banner__dismiss']}\n          aria-label=\"Dismiss\"\n          size=\"small\"\n          icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["GlobalBanner","className","message","type","leadingIcon","actionLabel","onAction","onDismiss","typeClass","styles","rootClass","jsxs","jsx","IconSlotContext","Button","IconButton","Icon","CloseIcon"],"mappings":";;;;;;AAsCA,SAAwBA,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAMC,IACJL,MAAS,YACLM,EAAO,uBAAuBN,EAAK,YAAA,CAAa,EAAE,IAClD,IAEAO,IAAY,CAACD,EAAO,eAAe,GAAGD,GAAWP,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAU,EAAC,OAAA,EAAI,WAAWD,GAAW,MAAK,UAC9B,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,wBAAwB,GAC5C,UAAA;AAAA,MAAAL,KAAe,QACd,gBAAAQ,EAAC,QAAA,EAAK,WAAWH,EAAO,qBAAqB,GAAG,eAAW,IACzD,4BAACI,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,wBAED,QAAA,EAAK,WAAWJ,EAAO,wBAAwB,GAAI,UAAAP,GAAQ;AAAA,MAC3DG,KAAe,QACd,gBAAAO;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,WAAWL,EAAO,uBAAuB;AAAA,UACzC,YAAW;AAAA,UACX,UAAS;AAAA,UACT,MAAK;AAAA,UACL,SAASH;AAAA,UAER,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,IACCE,KAAa,QACZ,gBAAAK;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,WAAWN,EAAO,wBAAwB;AAAA,QAC1C,cAAW;AAAA,QACX,MAAK;AAAA,QACL,wBAAOO,GAAA,EAAK,yBAAQC,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,QAC5C,SAASV;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;"}
+{"version":3,"file":"GlobalBanner.js","sources":["../../../src/components/global-banner/GlobalBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './GlobalBanner.module.scss';\n\nexport type GlobalBannerType =\n  | 'general'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'success';\n\nexport interface GlobalBannerProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  message: ReactNode;\n  /** Optional type for color-coding. Default: General. */\n  type?: GlobalBannerType;\n  /** Optional leading icon — pass `<Icon glyph={<SomeIcon />} />`; GlobalBanner provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  /** Label for the optional action button. Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Callback when the action button is clicked. */\n  onAction?: () => void;\n  /** Called when dismiss button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n  /** Accessible name for the dismiss button. Default: \"Dismiss\". */\n  dismissLabel?: string;\n  /** Extra attributes for the dismiss button (e.g. `data-testid`). */\n  dismissButtonProps?: BuiltInButtonProps;\n}\n\n/**\n * Global Banners sit at the very top of the application and broadcast something every user\n * in the workspace needs to know — a maintenance window, an expiring licence, a connectivity\n * problem, an available update. They span the full width of the app and stay visible until\n * they're dismissed or the condition resolves.\n */\nexport default function GlobalBanner({\n  className = '',\n  message,\n  type = 'general',\n  leadingIcon,\n  actionLabel,\n  onAction,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  dismissButtonProps,\n}: GlobalBannerProps) {\n  const typeClass =\n    type !== 'general'\n      ? styles[`global-banner--type-${type.toLowerCase()}`]\n      : '';\n\n  const rootClass = [styles['global-banner'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"banner\">\n      <div className={styles['global-banner__content']}>\n        {leadingIcon != null && (\n          <span className={styles['global-banner__icon']} aria-hidden>\n            <IconSlotContext.Provider value={{ size: '16' }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          </span>\n        )}\n        <span className={styles['global-banner__message']}>{message}</span>\n        {actionLabel != null && (\n          <Button\n            className={styles['global-banner__action']}\n            appearance=\"default\"\n            emphasis=\"tertiary\"\n            size=\"x-small\"\n            onClick={onAction}\n          >\n            {actionLabel}\n          </Button>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          {...dismissButtonProps}\n          className={mergeClassNames(\n            styles['global-banner__dismiss'],\n            dismissButtonProps?.className,\n          )}\n          aria-label={dismissLabel}\n          size=\"small\"\n          icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["GlobalBanner","className","message","type","leadingIcon","actionLabel","onAction","onDismiss","dismissLabel","dismissButtonProps","typeClass","styles","rootClass","jsxs","jsx","IconSlotContext","Button","IconButton","mergeClassNames","Icon","CloseIcon"],"mappings":";;;;;;;AA4CA,SAAwBA,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC;AACF,GAAsB;AACpB,QAAMC,IACJP,MAAS,YACLQ,EAAO,uBAAuBR,EAAK,YAAA,CAAa,EAAE,IAClD,IAEAS,IAAY,CAACD,EAAO,eAAe,GAAGD,GAAWT,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAY,EAAC,OAAA,EAAI,WAAWD,GAAW,MAAK,UAC9B,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,wBAAwB,GAC5C,UAAA;AAAA,MAAAP,KAAe,QACd,gBAAAU,EAAC,QAAA,EAAK,WAAWH,EAAO,qBAAqB,GAAG,eAAW,IACzD,4BAACI,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,wBAED,QAAA,EAAK,WAAWJ,EAAO,wBAAwB,GAAI,UAAAT,GAAQ;AAAA,MAC3DG,KAAe,QACd,gBAAAS;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,WAAWL,EAAO,uBAAuB;AAAA,UACzC,YAAW;AAAA,UACX,UAAS;AAAA,UACT,MAAK;AAAA,UACL,SAASL;AAAA,UAER,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,IACCE,KAAa,QACZ,gBAAAO;AAAA,MAACG;AAAA,MAAA;AAAA,QACE,GAAGR;AAAA,QACJ,WAAWS;AAAA,UACTP,EAAO,wBAAwB;AAAA,UAC/BF,KAAA,gBAAAA,EAAoB;AAAA,QAAA;AAAA,QAEtB,cAAYD;AAAA,QACZ,MAAK;AAAA,QACL,wBAAOW,GAAA,EAAK,yBAAQC,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,QAC5C,SAASb;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;"}

package/dist/components/icon-button/IconButton.css

@@ -1 +1 @@
-._icon-button_u2ufj_2{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-body);border-radius:var(--radius-s);border:0;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);background-color:transparent;color:rgba(var(--center-channel-color-rgb),.64);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._icon-button_u2ufj_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._icon-button_u2ufj_2:disabled{cursor:not-allowed;opacity:.5}._icon-button_u2ufj_2:hover:not(:disabled):not(:active):not(._icon-button--active_u2ufj_25):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._icon-button_u2ufj_2:active:not(:disabled):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button__icon-slot_u2ufj_33{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._icon-button__unread-badge_u2ufj_40{position:absolute;top:-1px;right:-1px;width:6px;height:6px;border-radius:var(--radius-full);background-color:var(--sidebar-text-active-border);box-shadow:0 0 0 2px var(--center-channel-bg);pointer-events:none}._icon-button__count_u2ufj_51{font-weight:var(--font-weight-semibold);color:inherit}._icon-button--size-x-small_u2ufj_55{width:24px;height:24px;padding:var(--spacing-xxs)}._icon-button--size-x-small_u2ufj_55 ._icon-button__count_u2ufj_51{font-size:var(--font-size-75);line-height:12px}._icon-button--size-x-small_u2ufj_55._icon-button--padding-compact_u2ufj_64{width:20px;height:20px;padding:var(--spacing-xxxs)}._icon-button--size-small_u2ufj_69{width:32px;height:32px;padding:var(--spacing-xs)}._icon-button--size-small_u2ufj_69 ._icon-button__count_u2ufj_51{font-size:var(--font-size-100);line-height:14px}._icon-button--size-small_u2ufj_69._icon-button--padding-compact_u2ufj_64{width:28px;height:28px;padding:var(--spacing-xxs)}._icon-button--size-medium_u2ufj_83{width:40px;height:40px;padding:var(--spacing-s)}._icon-button--size-medium_u2ufj_83 ._icon-button__count_u2ufj_51{font-size:var(--font-size-200);line-height:16px}._icon-button--size-medium_u2ufj_83._icon-button--padding-compact_u2ufj_64{width:36px;height:36px;padding:var(--spacing-xs)}._icon-button--size-large_u2ufj_97{width:48px;height:48px;padding:var(--spacing-m)}._icon-button--size-large_u2ufj_97 ._icon-button__count_u2ufj_51{font-size:var(--font-size-300);line-height:18px}._icon-button--size-large_u2ufj_97._icon-button--padding-compact_u2ufj_64{width:44px;height:44px;padding:var(--spacing-s)}._icon-button--has-count_u2ufj_111{width:auto;gap:var(--spacing-xxxs)}._icon-button--rounded_u2ufj_115{border-radius:var(--radius-full)}._icon-button--active_u2ufj_25:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--active_u2ufj_25:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12);color:var(--link-color)}._icon-button--active_u2ufj_25:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16);color:var(--link-color)}._icon-button--toggled_u2ufj_25{background-color:var(--button-bg);color:var(--button-color)}._icon-button--toggled_u2ufj_25:hover:not(:disabled):not(:active){background-color:color-mix(in srgb,black 8%,var(--button-bg));color:var(--button-color)}._icon-button--toggled_u2ufj_25:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg));color:var(--button-color)}._icon-button--toggled_u2ufj_25 ._icon-button__unread-badge_u2ufj_40{box-shadow:0 0 0 2px var(--button-bg)}._icon-button--style-inverted_u2ufj_145{background-color:transparent;color:rgba(var(--sidebar-text-rgb),.64)}._icon-button--style-inverted_u2ufj_145 ._icon-button__unread-badge_u2ufj_40{box-shadow:0 0 0 2px var(--sidebar-header-bg)}._icon-button--style-inverted_u2ufj_145:hover:not(:disabled):not(:active):not(._icon-button--toggled_u2ufj_25):not(._icon-button--active_u2ufj_25){background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._icon-button--style-inverted_u2ufj_145:active:not(:disabled):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--style-inverted_u2ufj_145._icon-button--active_u2ufj_25:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--style-inverted_u2ufj_145._icon-button--active_u2ufj_25:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12);color:var(--link-color)}._icon-button--style-inverted_u2ufj_145._icon-button--active_u2ufj_25:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16);color:var(--link-color)}._icon-button--style-inverted_u2ufj_145._icon-button--toggled_u2ufj_25{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._icon-button--style-inverted_u2ufj_145._icon-button--toggled_u2ufj_25:hover:not(:disabled):not(:active){background-color:rgba(var(--sidebar-text-rgb),.92);color:var(--sidebar-bg)}._icon-button--style-inverted_u2ufj_145._icon-button--toggled_u2ufj_25:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88);color:var(--sidebar-bg)}._icon-button--style-inverted_u2ufj_145._icon-button--toggled_u2ufj_25 ._icon-button__unread-badge_u2ufj_40{box-shadow:0 0 0 2px var(--sidebar-text)}._icon-button--style-inverted_u2ufj_145._icon-button--destructive_u2ufj_187{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_u2ufj_145._icon-button--destructive_u2ufj_187:hover:not(:disabled):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_u2ufj_145._icon-button--destructive_u2ufj_187:active:not(:disabled):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}._icon-button--destructive_u2ufj_187{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;color:var(--error-text, var(--color-danger))}._icon-button--destructive_u2ufj_187:hover:not(:disabled):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._icon-button--destructive_u2ufj_187:active:not(:disabled):not(._icon-button--toggled_u2ufj_25){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}
+._icon-button_g2m23_2{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-body);border-radius:var(--radius-s);border:0;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);background-color:transparent;color:rgba(var(--center-channel-color-rgb),.64);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._icon-button_g2m23_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._icon-button_g2m23_2:disabled{cursor:not-allowed;opacity:.5}._icon-button_g2m23_2:hover:not(:disabled):not(:active):not(._icon-button--active_g2m23_25):not(._icon-button--toggled_g2m23_25){background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._icon-button_g2m23_2:active:not(:disabled):not(._icon-button--toggled_g2m23_25){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button__icon-slot_g2m23_33{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._icon-button__unread-badge_g2m23_40{position:absolute;top:-1px;right:-1px;width:6px;height:6px;border-radius:var(--radius-pill);background-color:var(--sidebar-text-active-border);box-shadow:0 0 0 2px var(--center-channel-bg);pointer-events:none}._icon-button__count_g2m23_51{font-weight:var(--font-weight-semibold);color:inherit}._icon-button--size-x-small_g2m23_55{width:24px;height:24px;padding:var(--spacing-xxs)}._icon-button--size-x-small_g2m23_55 ._icon-button__count_g2m23_51{font-size:var(--font-size-75);line-height:12px}._icon-button--size-x-small_g2m23_55._icon-button--padding-compact_g2m23_64{width:20px;height:20px;padding:var(--spacing-xxxs)}._icon-button--size-small_g2m23_69{width:32px;height:32px;padding:var(--spacing-xs)}._icon-button--size-small_g2m23_69 ._icon-button__count_g2m23_51{font-size:var(--font-size-100);line-height:14px}._icon-button--size-small_g2m23_69._icon-button--padding-compact_g2m23_64{width:28px;height:28px;padding:var(--spacing-xxs)}._icon-button--size-medium_g2m23_83{width:40px;height:40px;padding:var(--spacing-s)}._icon-button--size-medium_g2m23_83 ._icon-button__count_g2m23_51{font-size:var(--font-size-200);line-height:16px}._icon-button--size-medium_g2m23_83._icon-button--padding-compact_g2m23_64{width:36px;height:36px;padding:var(--spacing-xs)}._icon-button--size-large_g2m23_97{width:48px;height:48px;padding:var(--spacing-m)}._icon-button--size-large_g2m23_97 ._icon-button__count_g2m23_51{font-size:var(--font-size-300);line-height:18px}._icon-button--size-large_g2m23_97._icon-button--padding-compact_g2m23_64{width:44px;height:44px;padding:var(--spacing-s)}._icon-button--has-count_g2m23_111{width:auto;gap:var(--spacing-xxxs)}._icon-button--rounded_g2m23_115{border-radius:var(--radius-pill)}._icon-button--active_g2m23_25:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--active_g2m23_25:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12);color:var(--link-color)}._icon-button--active_g2m23_25:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16);color:var(--link-color)}._icon-button--toggled_g2m23_25{background-color:var(--button-bg);color:var(--button-color)}._icon-button--toggled_g2m23_25:hover:not(:disabled):not(:active){background-color:color-mix(in srgb,black 8%,var(--button-bg));color:var(--button-color)}._icon-button--toggled_g2m23_25:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg));color:var(--button-color)}._icon-button--toggled_g2m23_25 ._icon-button__unread-badge_g2m23_40{box-shadow:0 0 0 2px var(--button-bg)}._icon-button--style-inverted_g2m23_145{background-color:transparent;color:rgba(var(--sidebar-text-rgb),.64)}._icon-button--style-inverted_g2m23_145 ._icon-button__unread-badge_g2m23_40{box-shadow:0 0 0 2px var(--sidebar-header-bg)}._icon-button--style-inverted_g2m23_145:hover:not(:disabled):not(:active):not(._icon-button--toggled_g2m23_25):not(._icon-button--active_g2m23_25){background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._icon-button--style-inverted_g2m23_145:active:not(:disabled):not(._icon-button--toggled_g2m23_25){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--style-inverted_g2m23_145._icon-button--active_g2m23_25:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._icon-button--style-inverted_g2m23_145._icon-button--active_g2m23_25:not(:disabled):hover:not(:disabled):not(:active){background-color:rgba(var(--button-bg-rgb),.12);color:var(--link-color)}._icon-button--style-inverted_g2m23_145._icon-button--active_g2m23_25:not(:disabled):active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16);color:var(--link-color)}._icon-button--style-inverted_g2m23_145._icon-button--toggled_g2m23_25{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._icon-button--style-inverted_g2m23_145._icon-button--toggled_g2m23_25:hover:not(:disabled):not(:active){background-color:rgba(var(--sidebar-text-rgb),.92);color:var(--sidebar-bg)}._icon-button--style-inverted_g2m23_145._icon-button--toggled_g2m23_25:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88);color:var(--sidebar-bg)}._icon-button--style-inverted_g2m23_145._icon-button--toggled_g2m23_25 ._icon-button__unread-badge_g2m23_40{box-shadow:0 0 0 2px var(--sidebar-text)}._icon-button--style-inverted_g2m23_145._icon-button--destructive_g2m23_187{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_g2m23_145._icon-button--destructive_g2m23_187:hover:not(:disabled):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._icon-button--style-inverted_g2m23_145._icon-button--destructive_g2m23_187:active:not(:disabled):not(._icon-button--toggled_g2m23_25){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}._icon-button--destructive_g2m23_187{--focus-ring-color: var(--error-text, var(--color-danger));background-color:transparent;color:var(--error-text, var(--color-danger))}._icon-button--destructive_g2m23_187:hover:not(:disabled):not(:active){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._icon-button--destructive_g2m23_187:active:not(:disabled):not(._icon-button--toggled_g2m23_25){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}

package/dist/components/icon-button/IconButton.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./IconButton.css');const t={"icon-button":"_icon-button_u2ufj_2","icon-button--active":"_icon-button--active_u2ufj_25","icon-button--toggled":"_icon-button--toggled_u2ufj_25","icon-button__icon-slot":"_icon-button__icon-slot_u2ufj_33","icon-button__unread-badge":"_icon-button__unread-badge_u2ufj_40","icon-button__count":"_icon-button__count_u2ufj_51","icon-button--size-x-small":"_icon-button--size-x-small_u2ufj_55","icon-button--padding-compact":"_icon-button--padding-compact_u2ufj_64","icon-button--size-small":"_icon-button--size-small_u2ufj_69","icon-button--size-medium":"_icon-button--size-medium_u2ufj_83","icon-button--size-large":"_icon-button--size-large_u2ufj_97","icon-button--has-count":"_icon-button--has-count_u2ufj_111","icon-button--rounded":"_icon-button--rounded_u2ufj_115","icon-button--style-inverted":"_icon-button--style-inverted_u2ufj_145","icon-button--destructive":"_icon-button--destructive_u2ufj_187"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./IconButton.css');const t={"icon-button":"_icon-button_g2m23_2","icon-button--active":"_icon-button--active_g2m23_25","icon-button--toggled":"_icon-button--toggled_g2m23_25","icon-button__icon-slot":"_icon-button__icon-slot_g2m23_33","icon-button__unread-badge":"_icon-button__unread-badge_g2m23_40","icon-button__count":"_icon-button__count_g2m23_51","icon-button--size-x-small":"_icon-button--size-x-small_g2m23_55","icon-button--padding-compact":"_icon-button--padding-compact_g2m23_64","icon-button--size-small":"_icon-button--size-small_g2m23_69","icon-button--size-medium":"_icon-button--size-medium_g2m23_83","icon-button--size-large":"_icon-button--size-large_g2m23_97","icon-button--has-count":"_icon-button--has-count_g2m23_111","icon-button--rounded":"_icon-button--rounded_g2m23_115","icon-button--style-inverted":"_icon-button--style-inverted_g2m23_145","icon-button--destructive":"_icon-button--destructive_g2m23_187"};exports.default=t;
 //# sourceMappingURL=IconButton.module.scss.cjs.map

package/dist/components/icon-button/IconButton.module.scss.js

@@ -1,19 +1,19 @@
 import './IconButton.css';const t = {
-  "icon-button": "_icon-button_u2ufj_2",
-  "icon-button--active": "_icon-button--active_u2ufj_25",
-  "icon-button--toggled": "_icon-button--toggled_u2ufj_25",
-  "icon-button__icon-slot": "_icon-button__icon-slot_u2ufj_33",
-  "icon-button__unread-badge": "_icon-button__unread-badge_u2ufj_40",
-  "icon-button__count": "_icon-button__count_u2ufj_51",
-  "icon-button--size-x-small": "_icon-button--size-x-small_u2ufj_55",
-  "icon-button--padding-compact": "_icon-button--padding-compact_u2ufj_64",
-  "icon-button--size-small": "_icon-button--size-small_u2ufj_69",
-  "icon-button--size-medium": "_icon-button--size-medium_u2ufj_83",
-  "icon-button--size-large": "_icon-button--size-large_u2ufj_97",
-  "icon-button--has-count": "_icon-button--has-count_u2ufj_111",
-  "icon-button--rounded": "_icon-button--rounded_u2ufj_115",
-  "icon-button--style-inverted": "_icon-button--style-inverted_u2ufj_145",
-  "icon-button--destructive": "_icon-button--destructive_u2ufj_187"
+  "icon-button": "_icon-button_g2m23_2",
+  "icon-button--active": "_icon-button--active_g2m23_25",
+  "icon-button--toggled": "_icon-button--toggled_g2m23_25",
+  "icon-button__icon-slot": "_icon-button__icon-slot_g2m23_33",
+  "icon-button__unread-badge": "_icon-button__unread-badge_g2m23_40",
+  "icon-button__count": "_icon-button__count_g2m23_51",
+  "icon-button--size-x-small": "_icon-button--size-x-small_g2m23_55",
+  "icon-button--padding-compact": "_icon-button--padding-compact_g2m23_64",
+  "icon-button--size-small": "_icon-button--size-small_g2m23_69",
+  "icon-button--size-medium": "_icon-button--size-medium_g2m23_83",
+  "icon-button--size-large": "_icon-button--size-large_g2m23_97",
+  "icon-button--has-count": "_icon-button--has-count_g2m23_111",
+  "icon-button--rounded": "_icon-button--rounded_g2m23_115",
+  "icon-button--style-inverted": "_icon-button--style-inverted_g2m23_145",
+  "icon-button--destructive": "_icon-button--destructive_g2m23_187"
 };
 export {
   t as default

package/dist/components/image-preview/ImagePreview.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("../icon/Icon.cjs"),v=require("../icon-button/IconButton.cjs"),w=require("../../hooks/use-popover-transition.cjs"),__b=require("@mattermost/compass-icons/components/link-variant.js"),b=__b?.default??__b,__y=require("@mattermost/compass-icons/components/download-outline.js"),y=__y?.default??__y,__k=require("@mattermost/compass-icons/components/menu-down.js"),k=__k?.default??__k,__q=require("@mattermost/compass-icons/components/menu-right.js"),q=__q?.default??__q,l=require("react"),i=require("./ImagePreview.module.scss.cjs");function N({src:_,alt:j="",collapsed:r=!1,onToggleCollapse:o,onCopyLink:d,onDownload:f,aspectRatio:m="16:9",className:h=""}){const a=w.usePopoverTransition(!r),s=w.usePopoverTransition(r),u=l.useRef(null),c=l.useRef(null),n=l.useRef(!1),g=p=>{(p.key==="Enter"||p.key===" ")&&(n.current=!0)};l.useEffect(()=>{if(n.current){if(r){if(!s.mounted||!u.current)return;n.current=!1,u.current.focus();return}!a.mounted||!c.current||(n.current=!1,c.current.focus())}},[r,a.mounted,s.mounted]);const x=[i.default["image-preview"],r?i.default["image-preview--collapsed"]:"",m==="4:3"?i.default["image-preview--ratio-4-3"]:"",m==="1:1"?i.default["image-preview--ratio-1-1"]:"",h].filter(Boolean).join(" ");return e.jsx("div",{className:x,children:e.jsxs("div",{className:i.default["image-preview__stage"],children:[s.mounted&&e.jsx("button",{ref:u,type:"button",className:[i.default["image-preview__collapsed-trigger"],s.visible?i.default["image-preview__collapsed-trigger--visible"]:""].filter(Boolean).join(" "),onClick:o,onKeyDown:g,"aria-label":"Show image preview",children:e.jsxs("span",{className:i.default["image-preview__show-label"],children:[e.jsx("span",{className:i.default["image-preview__show-icon"],"aria-hidden":"true",children:e.jsx(t.default,{size:"12",glyph:e.jsx(q,{})})}),"Show Image preview"]})}),a.mounted&&e.jsxs("div",{className:[i.default["image-preview__frame"],a.visible?i.default["image-preview__frame--visible"]:""].filter(Boolean).join(" "),children:[e.jsx("div",{className:i.default["image-preview__media"],children:e.jsx("img",{src:_,alt:j,className:i.default["image-preview__img"]})}),o!=null&&e.jsx("button",{ref:c,type:"button",className:i.default["image-preview__collapse-btn"],onClick:o,onKeyDown:g,"aria-label":"Collapse image preview",children:e.jsx(t.default,{size:"16",glyph:e.jsx(k,{})})}),e.jsxs("div",{className:i.default["image-preview__actions"],children:[d!=null&&e.jsx(v.default,{size:"small",padding:"compact","aria-label":"Copy link",icon:e.jsx(t.default,{size:"16",glyph:e.jsx(b,{})}),onClick:d}),f!=null&&e.jsx(v.default,{size:"small",padding:"compact","aria-label":"Download",icon:e.jsx(t.default,{size:"16",glyph:e.jsx(y,{})}),onClick:f})]})]})]})})}exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("../icon/Icon.cjs"),v=require("../icon-button/IconButton.cjs"),w=require("../../hooks/use-popover-transition.cjs"),__I=require("@mattermost/compass-icons/components/link-variant.js"),I=__I?.default??__I,__R=require("@mattermost/compass-icons/components/download-outline.js"),R=__R?.default??__R,__T=require("@mattermost/compass-icons/components/menu-down.js"),T=__T?.default??__T,__z=require("@mattermost/compass-icons/components/menu-right.js"),z=__z?.default??__z,l=require("react"),i=require("./ImagePreview.module.scss.cjs");function P({src:_,alt:j="",collapsed:r=!1,onToggleCollapse:o,onCopyLink:d,onDownload:f,aspectRatio:m="16:9",className:h="",showLabel:x="Show Image preview",showAriaLabel:b="Show image preview",collapseLabel:y="Collapse image preview",copyLinkLabel:k="Copy link",downloadLabel:q="Download"}){const a=w.usePopoverTransition(!r),s=w.usePopoverTransition(r),u=l.useRef(null),c=l.useRef(null),n=l.useRef(!1),g=p=>{(p.key==="Enter"||p.key===" ")&&(n.current=!0)};l.useEffect(()=>{if(n.current){if(r){if(!s.mounted||!u.current)return;n.current=!1,u.current.focus();return}!a.mounted||!c.current||(n.current=!1,c.current.focus())}},[r,a.mounted,s.mounted]);const N=[i.default["image-preview"],r?i.default["image-preview--collapsed"]:"",m==="4:3"?i.default["image-preview--ratio-4-3"]:"",m==="1:1"?i.default["image-preview--ratio-1-1"]:"",h].filter(Boolean).join(" ");return e.jsx("div",{className:N,children:e.jsxs("div",{className:i.default["image-preview__stage"],children:[s.mounted&&e.jsx("button",{ref:u,type:"button",className:[i.default["image-preview__collapsed-trigger"],s.visible?i.default["image-preview__collapsed-trigger--visible"]:""].filter(Boolean).join(" "),onClick:o,onKeyDown:g,"aria-label":b,children:e.jsxs("span",{className:i.default["image-preview__show-label"],children:[e.jsx("span",{className:i.default["image-preview__show-icon"],"aria-hidden":"true",children:e.jsx(t.default,{size:"12",glyph:e.jsx(z,{})})}),x]})}),a.mounted&&e.jsxs("div",{className:[i.default["image-preview__frame"],a.visible?i.default["image-preview__frame--visible"]:""].filter(Boolean).join(" "),children:[e.jsx("div",{className:i.default["image-preview__media"],children:e.jsx("img",{src:_,alt:j,className:i.default["image-preview__img"]})}),o!=null&&e.jsx("button",{ref:c,type:"button",className:i.default["image-preview__collapse-btn"],onClick:o,onKeyDown:g,"aria-label":y,children:e.jsx(t.default,{size:"16",glyph:e.jsx(T,{})})}),e.jsxs("div",{className:i.default["image-preview__actions"],children:[d!=null&&e.jsx(v.default,{size:"small",padding:"compact","aria-label":k,icon:e.jsx(t.default,{size:"16",glyph:e.jsx(I,{})}),onClick:d}),f!=null&&e.jsx(v.default,{size:"small",padding:"compact","aria-label":q,icon:e.jsx(t.default,{size:"16",glyph:e.jsx(R,{})}),onClick:f})]})]})]})})}exports.default=P;
 //# sourceMappingURL=ImagePreview.cjs.map

package/dist/components/image-preview/ImagePreview.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePreview.cjs","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport MenuDownIcon from '@mattermost/compass-icons/components/menu-down';\nimport MenuRightIcon from '@mattermost/compass-icons/components/menu-right';\nimport { useEffect, useRef, type KeyboardEvent } from 'react';\nimport styles from './ImagePreview.module.scss';\n\nexport type ImagePreviewAspectRatio = '16:9' | '4:3' | '1:1';\n\nexport interface ImagePreviewProps {\n  /** Image src URL. */\n  src: string;\n  /** Alt text. */\n  alt?: string;\n  /** Whether the preview is collapsed (shows toggle label only). */\n  collapsed?: boolean;\n  /** Callback when the collapse toggle is clicked. */\n  onToggleCollapse?: () => void;\n  /** Callback when the copy-link action is clicked. */\n  onCopyLink?: () => void;\n  /** Callback when the download action is clicked. */\n  onDownload?: () => void;\n  /** Aspect ratio of the image container. Default: 16:9 */\n  aspectRatio?: ImagePreviewAspectRatio;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Image Preview displays image attachments, markdown images, and inline image links inside\n * the message stream. It frames the image, shows hover actions for copy and download, and\n * lets the user collapse the preview when it's in the way. Keyboard activation\n * moves focus to the paired expand/collapse control; pointer activation does not.\n */\nexport default function ImagePreview({\n  src,\n  alt = '',\n  collapsed = false,\n  onToggleCollapse,\n  onCopyLink,\n  onDownload,\n  aspectRatio = '16:9',\n  className = '',\n}: ImagePreviewProps) {\n  const frameTransition = usePopoverTransition(!collapsed);\n  const labelTransition = usePopoverTransition(collapsed);\n  const showTriggerRef = useRef<HTMLButtonElement>(null);\n  const collapseTriggerRef = useRef<HTMLButtonElement>(null);\n  const keyboardToggleRef = useRef(false);\n\n  const markKeyboardToggle = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      keyboardToggleRef.current = true;\n    }\n  };\n\n  useEffect(() => {\n    if (!keyboardToggleRef.current) return;\n\n    if (collapsed) {\n      if (!labelTransition.mounted || !showTriggerRef.current) return;\n      keyboardToggleRef.current = false;\n      showTriggerRef.current.focus();\n      return;\n    }\n\n    if (!frameTransition.mounted || !collapseTriggerRef.current) return;\n    keyboardToggleRef.current = false;\n    collapseTriggerRef.current.focus();\n  }, [collapsed, frameTransition.mounted, labelTransition.mounted]);\n\n  const rootClass = [\n    styles['image-preview'],\n    collapsed ? styles['image-preview--collapsed'] : '',\n    aspectRatio === '4:3' ? styles['image-preview--ratio-4-3'] : '',\n    aspectRatio === '1:1' ? styles['image-preview--ratio-1-1'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['image-preview__stage']}>\n        {labelTransition.mounted && (\n          <button\n            ref={showTriggerRef}\n            type=\"button\"\n            className={[\n              styles['image-preview__collapsed-trigger'],\n              labelTransition.visible\n                ? styles['image-preview__collapsed-trigger--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onToggleCollapse}\n            onKeyDown={markKeyboardToggle}\n            aria-label=\"Show image preview\"\n          >\n            <span className={styles['image-preview__show-label']}>\n              <span\n                className={styles['image-preview__show-icon']}\n                aria-hidden=\"true\"\n              >\n                <Icon size=\"12\" glyph={<MenuRightIcon />} />\n              </span>\n              Show Image preview\n            </span>\n          </button>\n        )}\n\n        {frameTransition.mounted && (\n          <div\n            className={[\n              styles['image-preview__frame'],\n              frameTransition.visible\n                ? styles['image-preview__frame--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <div className={styles['image-preview__media']}>\n              <img\n                src={src}\n                alt={alt}\n                className={styles['image-preview__img']}\n              />\n            </div>\n\n            {onToggleCollapse != null && (\n              <button\n                ref={collapseTriggerRef}\n                type=\"button\"\n                className={styles['image-preview__collapse-btn']}\n                onClick={onToggleCollapse}\n                onKeyDown={markKeyboardToggle}\n                aria-label=\"Collapse image preview\"\n              >\n                <Icon size=\"16\" glyph={<MenuDownIcon />} />\n              </button>\n            )}\n\n            <div className={styles['image-preview__actions']}>\n              {onCopyLink != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label=\"Copy link\"\n                  icon={<Icon size=\"16\" glyph={<LinkVariantIcon />} />}\n                  onClick={onCopyLink}\n                />\n              )}\n              {onDownload != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label=\"Download\"\n                  icon={<Icon size=\"16\" glyph={<DownloadOutlineIcon />} />}\n                  onClick={onDownload}\n                />\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ImagePreview","src","alt","collapsed","onToggleCollapse","onCopyLink","onDownload","aspectRatio","className","frameTransition","usePopoverTransition","labelTransition","showTriggerRef","useRef","collapseTriggerRef","keyboardToggleRef","markKeyboardToggle","event","useEffect","rootClass","styles","jsx","jsxs","Icon","MenuRightIcon","MenuDownIcon","IconButton","LinkVariantIcon","DownloadOutlineIcon"],"mappings":"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"}
+{"version":3,"file":"ImagePreview.cjs","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport MenuDownIcon from '@mattermost/compass-icons/components/menu-down';\nimport MenuRightIcon from '@mattermost/compass-icons/components/menu-right';\nimport { useEffect, useRef, type KeyboardEvent, type ReactNode } from 'react';\nimport styles from './ImagePreview.module.scss';\n\nexport type ImagePreviewAspectRatio = '16:9' | '4:3' | '1:1';\n\nexport interface ImagePreviewProps {\n  /** Image src URL. */\n  src: string;\n  /** Alt text. */\n  alt?: string;\n  /** Whether the preview is collapsed (shows toggle label only). */\n  collapsed?: boolean;\n  /** Callback when the collapse toggle is clicked. */\n  onToggleCollapse?: () => void;\n  /** Callback when the copy-link action is clicked. */\n  onCopyLink?: () => void;\n  /** Callback when the download action is clicked. */\n  onDownload?: () => void;\n  /** Aspect ratio of the image container. Default: 16:9 */\n  aspectRatio?: ImagePreviewAspectRatio;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Visible text of the collapsed toggle. Default: \"Show Image preview\". */\n  showLabel?: ReactNode;\n  /** Accessible name of the collapsed toggle. Default: \"Show image preview\". */\n  showAriaLabel?: string;\n  /** Accessible name of the collapse button. Default: \"Collapse image preview\". */\n  collapseLabel?: string;\n  /** Accessible name of the copy-link button. Default: \"Copy link\". */\n  copyLinkLabel?: string;\n  /** Accessible name of the download button. Default: \"Download\". */\n  downloadLabel?: string;\n}\n\n/**\n * Image Preview displays image attachments, markdown images, and inline image links inside\n * the message stream. It frames the image, shows hover actions for copy and download, and\n * lets the user collapse the preview when it's in the way. Keyboard activation\n * moves focus to the paired expand/collapse control; pointer activation does not.\n */\nexport default function ImagePreview({\n  src,\n  alt = '',\n  collapsed = false,\n  onToggleCollapse,\n  onCopyLink,\n  onDownload,\n  aspectRatio = '16:9',\n  className = '',\n  showLabel = 'Show Image preview',\n  showAriaLabel = 'Show image preview',\n  collapseLabel = 'Collapse image preview',\n  copyLinkLabel = 'Copy link',\n  downloadLabel = 'Download',\n}: ImagePreviewProps) {\n  const frameTransition = usePopoverTransition(!collapsed);\n  const labelTransition = usePopoverTransition(collapsed);\n  const showTriggerRef = useRef<HTMLButtonElement>(null);\n  const collapseTriggerRef = useRef<HTMLButtonElement>(null);\n  const keyboardToggleRef = useRef(false);\n\n  const markKeyboardToggle = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      keyboardToggleRef.current = true;\n    }\n  };\n\n  useEffect(() => {\n    if (!keyboardToggleRef.current) return;\n\n    if (collapsed) {\n      if (!labelTransition.mounted || !showTriggerRef.current) return;\n      keyboardToggleRef.current = false;\n      showTriggerRef.current.focus();\n      return;\n    }\n\n    if (!frameTransition.mounted || !collapseTriggerRef.current) return;\n    keyboardToggleRef.current = false;\n    collapseTriggerRef.current.focus();\n  }, [collapsed, frameTransition.mounted, labelTransition.mounted]);\n\n  const rootClass = [\n    styles['image-preview'],\n    collapsed ? styles['image-preview--collapsed'] : '',\n    aspectRatio === '4:3' ? styles['image-preview--ratio-4-3'] : '',\n    aspectRatio === '1:1' ? styles['image-preview--ratio-1-1'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['image-preview__stage']}>\n        {labelTransition.mounted && (\n          <button\n            ref={showTriggerRef}\n            type=\"button\"\n            className={[\n              styles['image-preview__collapsed-trigger'],\n              labelTransition.visible\n                ? styles['image-preview__collapsed-trigger--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onToggleCollapse}\n            onKeyDown={markKeyboardToggle}\n            aria-label={showAriaLabel}\n          >\n            <span className={styles['image-preview__show-label']}>\n              <span\n                className={styles['image-preview__show-icon']}\n                aria-hidden=\"true\"\n              >\n                <Icon size=\"12\" glyph={<MenuRightIcon />} />\n              </span>\n              {showLabel}\n            </span>\n          </button>\n        )}\n\n        {frameTransition.mounted && (\n          <div\n            className={[\n              styles['image-preview__frame'],\n              frameTransition.visible\n                ? styles['image-preview__frame--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <div className={styles['image-preview__media']}>\n              <img\n                src={src}\n                alt={alt}\n                className={styles['image-preview__img']}\n              />\n            </div>\n\n            {onToggleCollapse != null && (\n              <button\n                ref={collapseTriggerRef}\n                type=\"button\"\n                className={styles['image-preview__collapse-btn']}\n                onClick={onToggleCollapse}\n                onKeyDown={markKeyboardToggle}\n                aria-label={collapseLabel}\n              >\n                <Icon size=\"16\" glyph={<MenuDownIcon />} />\n              </button>\n            )}\n\n            <div className={styles['image-preview__actions']}>\n              {onCopyLink != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label={copyLinkLabel}\n                  icon={<Icon size=\"16\" glyph={<LinkVariantIcon />} />}\n                  onClick={onCopyLink}\n                />\n              )}\n              {onDownload != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label={downloadLabel}\n                  icon={<Icon size=\"16\" glyph={<DownloadOutlineIcon />} />}\n                  onClick={onDownload}\n                />\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ImagePreview","src","alt","collapsed","onToggleCollapse","onCopyLink","onDownload","aspectRatio","className","showLabel","showAriaLabel","collapseLabel","copyLinkLabel","downloadLabel","frameTransition","usePopoverTransition","labelTransition","showTriggerRef","useRef","collapseTriggerRef","keyboardToggleRef","markKeyboardToggle","event","useEffect","rootClass","styles","jsx","jsxs","Icon","MenuRightIcon","MenuDownIcon","IconButton","LinkVariantIcon","DownloadOutlineIcon"],"mappings":"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"}

package/dist/components/image-preview/ImagePreview.css

@@ -1 +1 @@
-._image-preview_nf3bn_2{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;min-width:0}._image-preview__stage_nf3bn_9{display:grid;align-items:start;container-type:inline-size;width:428px;max-width:100%}._image-preview__stage_nf3bn_9>*{grid-area:1/1}._image-preview__frame_nf3bn_19{position:relative;box-sizing:border-box;border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);overflow:hidden;width:100%;height:0;opacity:0;transform:scale(.98);transform-origin:top left;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit),height var(--duration-quick) var(--ease-exit),border-color var(--duration-quick) var(--ease-exit),box-shadow var(--duration-quick) var(--ease-exit)}._image-preview__frame--visible_nf3bn_33{height:56.25cqw;opacity:1;transform:scale(1);pointer-events:auto;overflow:visible;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance),height var(--duration-quick) var(--ease-entrance),box-shadow var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition)}._image-preview__frame_nf3bn_19:not(._image-preview__frame--visible_nf3bn_33){border-color:transparent;box-shadow:none}._image-preview__frame_nf3bn_19:hover,._image-preview__frame_nf3bn_19:focus-within{box-shadow:var(--elevation-2);border-color:rgba(var(--center-channel-color-rgb),.24);cursor:pointer}._image-preview__media_nf3bn_50{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;border-radius:calc(var(--radius-s) - 1px)}._image-preview--ratio-4-3_nf3bn_56 ._image-preview__stage_nf3bn_9{width:320px}._image-preview--ratio-4-3_nf3bn_56 ._image-preview__frame--visible_nf3bn_33{height:75cqw}._image-preview--ratio-1-1_nf3bn_62 ._image-preview__stage_nf3bn_9{width:240px}._image-preview--ratio-1-1_nf3bn_62 ._image-preview__frame--visible_nf3bn_33{height:100cqw}._image-preview__img_nf3bn_68{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}._image-preview__actions_nf3bn_77{position:absolute;top:var(--spacing-s);right:var(--spacing-s);display:flex;gap:0;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);box-shadow:var(--elevation-1);padding:var(--spacing-xxxxs);opacity:0;transition:opacity var(--duration-quick) var(--ease-transition)}._image-preview__frame_nf3bn_19:hover ._image-preview__actions_nf3bn_77,._image-preview__frame_nf3bn_19:focus-within ._image-preview__actions_nf3bn_77{opacity:1}._image-preview__collapse-btn_nf3bn_94{position:absolute;top:-4px;left:-4px;display:flex;align-items:center;justify-content:center;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-full);box-shadow:var(--elevation-1);padding:var(--spacing-xxxs);cursor:pointer;color:var(--center-channel-color);opacity:0;transition:opacity var(--duration-quick) var(--ease-transition)}._image-preview__frame_nf3bn_19:hover ._image-preview__collapse-btn_nf3bn_94,._image-preview__frame_nf3bn_19:focus-within ._image-preview__collapse-btn_nf3bn_94{opacity:1}._image-preview--collapsed_nf3bn_114{min-height:0}._image-preview__collapsed-trigger_nf3bn_117{background:transparent;border:none;cursor:pointer;padding:0;opacity:0;transform:translateY(-2px);transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit)}._image-preview__collapsed-trigger--visible_nf3bn_126{opacity:1;transform:translateY(0);transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}._image-preview__show-label_nf3bn_131{display:flex;align-items:center;gap:1px;padding-right:var(--spacing-s);border-radius:var(--radius-s);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:15px;color:rgba(var(--center-channel-color-rgb),.75)}._image-preview__show-icon_nf3bn_142{display:inline-flex;align-items:center;width:var(--icon-size-12);font-size:var(--font-size-100);color:rgba(var(--center-channel-color-rgb),.75)}
+._image-preview_10kas_2{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;min-width:0}._image-preview__stage_10kas_9{display:grid;align-items:start;container-type:inline-size;width:428px;max-width:100%}._image-preview__stage_10kas_9>*{grid-area:1/1}._image-preview__frame_10kas_19{position:relative;box-sizing:border-box;border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);overflow:hidden;width:100%;height:0;opacity:0;transform:scale(.98);transform-origin:top left;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit),height var(--duration-quick) var(--ease-exit),border-color var(--duration-quick) var(--ease-exit),box-shadow var(--duration-quick) var(--ease-exit)}._image-preview__frame--visible_10kas_33{height:56.25cqw;opacity:1;transform:scale(1);pointer-events:auto;overflow:visible;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance),height var(--duration-quick) var(--ease-entrance),box-shadow var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition)}._image-preview__frame_10kas_19:not(._image-preview__frame--visible_10kas_33){border-color:transparent;box-shadow:none}._image-preview__frame_10kas_19:hover,._image-preview__frame_10kas_19:focus-within{box-shadow:var(--elevation-2);border-color:rgba(var(--center-channel-color-rgb),.24);cursor:pointer}._image-preview__media_10kas_50{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;border-radius:calc(var(--radius-s) - 1px)}._image-preview--ratio-4-3_10kas_56 ._image-preview__stage_10kas_9{width:320px}._image-preview--ratio-4-3_10kas_56 ._image-preview__frame--visible_10kas_33{height:75cqw}._image-preview--ratio-1-1_10kas_62 ._image-preview__stage_10kas_9{width:240px}._image-preview--ratio-1-1_10kas_62 ._image-preview__frame--visible_10kas_33{height:100cqw}._image-preview__img_10kas_68{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}._image-preview__actions_10kas_77{position:absolute;top:var(--spacing-s);right:var(--spacing-s);display:flex;gap:0;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);box-shadow:var(--elevation-1);padding:var(--spacing-xxxxs);opacity:0;transition:opacity var(--duration-quick) var(--ease-transition)}._image-preview__frame_10kas_19:hover ._image-preview__actions_10kas_77,._image-preview__frame_10kas_19:focus-within ._image-preview__actions_10kas_77{opacity:1}._image-preview__collapse-btn_10kas_94{position:absolute;top:-4px;left:-4px;display:flex;align-items:center;justify-content:center;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-pill);box-shadow:var(--elevation-1);padding:var(--spacing-xxxs);cursor:pointer;color:var(--center-channel-color);opacity:0;transition:opacity var(--duration-quick) var(--ease-transition)}._image-preview__frame_10kas_19:hover ._image-preview__collapse-btn_10kas_94,._image-preview__frame_10kas_19:focus-within ._image-preview__collapse-btn_10kas_94{opacity:1}._image-preview--collapsed_10kas_114{min-height:0}._image-preview__collapsed-trigger_10kas_117{background:transparent;border:none;cursor:pointer;padding:0;opacity:0;transform:translateY(-2px);transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit)}._image-preview__collapsed-trigger--visible_10kas_126{opacity:1;transform:translateY(0);transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}._image-preview__show-label_10kas_131{display:flex;align-items:center;gap:1px;padding-right:var(--spacing-s);border-radius:var(--radius-s);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:15px;color:rgba(var(--center-channel-color-rgb),.75)}._image-preview__show-icon_10kas_142{display:inline-flex;align-items:center;width:var(--icon-size-12);font-size:var(--font-size-100);color:rgba(var(--center-channel-color-rgb),.75)}

package/dist/components/image-preview/ImagePreview.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export type ImagePreviewAspectRatio = '16:9' | '4:3' | '1:1';
 export interface ImagePreviewProps {
     /** Image src URL. */
@@ -16,6 +17,16 @@ export interface ImagePreviewProps {
     aspectRatio?: ImagePreviewAspectRatio;
     /** Optional CSS class name. */
     className?: string;
+    /** Visible text of the collapsed toggle. Default: "Show Image preview". */
+    showLabel?: ReactNode;
+    /** Accessible name of the collapsed toggle. Default: "Show image preview". */
+    showAriaLabel?: string;
+    /** Accessible name of the collapse button. Default: "Collapse image preview". */
+    collapseLabel?: string;
+    /** Accessible name of the copy-link button. Default: "Copy link". */
+    copyLinkLabel?: string;
+    /** Accessible name of the download button. Default: "Download". */
+    downloadLabel?: string;
 }
 /**
  * Image Preview displays image attachments, markdown images, and inline image links inside
@@ -23,5 +34,5 @@ export interface ImagePreviewProps {
  * lets the user collapse the preview when it's in the way. Keyboard activation
  * moves focus to the paired expand/collapse control; pointer activation does not.
  */
-export default function ImagePreview({ src, alt, collapsed, onToggleCollapse, onCopyLink, onDownload, aspectRatio, className, }: ImagePreviewProps): import("react/jsx-runtime").JSX.Element;
+export default function ImagePreview({ src, alt, collapsed, onToggleCollapse, onCopyLink, onDownload, aspectRatio, className, showLabel, showAriaLabel, collapseLabel, copyLinkLabel, downloadLabel, }: ImagePreviewProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ImagePreview.d.ts.map

package/dist/components/image-preview/ImagePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePreview.d.ts","sourceRoot":"","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,qBAAqB;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,yDAAyD;IACzD,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,GAAG,EACH,GAAQ,EACR,SAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAoB,EACpB,SAAc,GACf,EAAE,iBAAiB,2CA8HnB"}
+{"version":3,"file":"ImagePreview.d.ts","sourceRoot":"","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9E,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,qBAAqB;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,yDAAyD;IACzD,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,GAAG,EACH,GAAQ,EACR,SAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAoB,EACpB,SAAc,EACd,SAAgC,EAChC,aAAoC,EACpC,aAAwC,EACxC,aAA2B,EAC3B,aAA0B,GAC3B,EAAE,iBAAiB,2CA8HnB"}