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

package/dist/components/error-message/ErrorMessage.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("../icon/Icon.cjs"),__o=require("@mattermost/compass-icons/components/alert-circle-outline.js"),o=__o?.default??__o,r=require("./ErrorMessage.module.scss.cjs");function n({className:s="",message:t}){const a=[r.default["error-message"],s].filter(Boolean).join(" ");return e.jsxs("div",{className:a,role:"alert",children:[e.jsx("span",{className:r.default["error-message__icon"],"aria-hidden":!0,children:e.jsx(l.default,{size:"12",glyph:e.jsx(o,{})})}),e.jsx("span",{className:r.default["error-message__text"],children:t})]})}exports.default=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),s=require("../field-message/FieldMessage.cjs");function o({className:e="",message:r,...t}){return u.jsx(s.default,{...t,className:e,message:r,tone:"error"})}exports.default=o;
 //# sourceMappingURL=ErrorMessage.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.cjs","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"sourcesContent":["import 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 text to display. */\n  message: string;\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":"kSAgBA,SAAwBA,EAAa,CACnC,UAAAC,EAAY,GACZ,QAAAC,CACF,EAAsB,CACpB,MAAMC,EAAY,CAACC,UAAO,eAAe,EAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAW,KAAK,QAC9B,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAE,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,EAAA,CAAA,CAAuB,EAAI,EACrD,QACC,OAAA,CAAK,UAAWJ,EAAAA,QAAO,qBAAqB,EAAI,SAAAF,CAAA,CAAQ,CAAA,EAC3D,CAEJ"}
+{"version":3,"file":"ErrorMessage.cjs","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport FieldMessage from '@/components/field-message/FieldMessage';\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 under a form field. It is `FieldMessage` with\n * `tone=\"error\"` — kept so existing imports (e.g. Agents plugin) stay valid.\n */\nexport default function ErrorMessage({\n  className = '',\n  message,\n  ...rest\n}: ErrorMessageProps) {\n  return (\n    <FieldMessage\n      {...rest}\n      className={className}\n      message={message}\n      tone=\"error\"\n    />\n  );\n}\n"],"names":["ErrorMessage","className","message","rest","jsx","FieldMessage"],"mappings":"+LAcA,SAAwBA,EAAa,CACnC,UAAAC,EAAY,GACZ,QAAAC,EACA,GAAGC,CACL,EAAsB,CACpB,OACEC,EAAAA,IAACC,EAAAA,QAAA,CACE,GAAGF,EACJ,UAAAF,EACA,QAAAC,EACA,KAAK,OAAA,CAAA,CAGX"}

package/dist/components/error-message/ErrorMessage.d.ts

@@ -1,13 +1,13 @@
-export interface ErrorMessageProps {
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ErrorMessageProps extends HTMLAttributes<HTMLDivElement> {
     /** Optional CSS class name. */
     className?: string;
-    /** The error message text to display. */
-    message: string;
+    /** The error message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    message: ReactNode;
 }
 /**
- * Error Message is the inline red error line that appears below a form input when validation
- * fails. It pairs an alert glyph with a short, human-readable explanation so the user can
- * fix the field and move on.
+ * Error Message is the inline red error line under a form field. It is `FieldMessage` with
+ * `tone="error"` — kept so existing imports (e.g. Agents plugin) stay valid.
  */
-export default function ErrorMessage({ className, message, }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;
+export default function ErrorMessage({ className, message, ...rest }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ErrorMessage.d.ts.map

package/dist/components/error-message/ErrorMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,OAAO,GACR,EAAE,iBAAiB,2CAanB"}
+{"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,OAAO,EAAE,SAAS,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,OAAO,EACP,GAAG,IAAI,EACR,EAAE,iBAAiB,2CASnB"}

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

@@ -1,18 +1,21 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import i from "../icon/Icon.js";
-import __l from "@mattermost/compass-icons/components/alert-circle-outline.js";const l=__l&&__l.default?__l.default:__l;
-import e from "./ErrorMessage.module.scss.js";
-function d({
-  className: s = "",
-  message: o
+import { jsx as t } from "react/jsx-runtime";
+import s from "../field-message/FieldMessage.js";
+function i({
+  className: r = "",
+  message: e,
+  ...o
 }) {
-  const a = [e["error-message"], s].filter(Boolean).join(" ");
-  return /* @__PURE__ */ t("div", { className: a, role: "alert", children: [
-    /* @__PURE__ */ r("span", { className: e["error-message__icon"], "aria-hidden": !0, children: /* @__PURE__ */ r(i, { size: "12", glyph: /* @__PURE__ */ r(l, {}) }) }),
-    /* @__PURE__ */ r("span", { className: e["error-message__text"], children: o })
-  ] });
+  return /* @__PURE__ */ t(
+    s,
+    {
+      ...o,
+      className: r,
+      message: e,
+      tone: "error"
+    }
+  );
 }
 export {
-  d as default
+  i as default
 };
 //# sourceMappingURL=ErrorMessage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.js","sources":["../../../src/components/error-message/ErrorMessage.tsx"],"sourcesContent":["import 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 text to display. */\n  message: string;\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":";;;;AAgBA,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 FieldMessage from '@/components/field-message/FieldMessage';\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 under a form field. It is `FieldMessage` with\n * `tone=\"error\"` — kept so existing imports (e.g. Agents plugin) stay valid.\n */\nexport default function ErrorMessage({\n  className = '',\n  message,\n  ...rest\n}: ErrorMessageProps) {\n  return (\n    <FieldMessage\n      {...rest}\n      className={className}\n      message={message}\n      tone=\"error\"\n    />\n  );\n}\n"],"names":["ErrorMessage","className","message","rest","jsx","FieldMessage"],"mappings":";;AAcA,SAAwBA,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAAF;AAAA,MACA,SAAAC;AAAA,MACA,MAAK;AAAA,IAAA;AAAA,EAAA;AAGX;"}

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.css

@@ -0,0 +1 @@
+._feature-discovery-panel_1apxo_13{display:flex;gap:var(--spacing-xxl);align-items:center;padding:var(--spacing-xxxl);background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-m);box-shadow:var(--elevation-1)}._feature-discovery-panel__content_1apxo_23{display:flex;flex:1 0 0;flex-direction:column;gap:var(--spacing-xl);min-width:0}._feature-discovery-panel__text_1apxo_30{display:flex;flex-direction:column;gap:var(--spacing-l)}._feature-discovery-panel__title-group_1apxo_35{display:flex;flex-direction:column;gap:var(--spacing-s)}._feature-discovery-panel__title_1apxo_35{margin:0;font-family:var(--font-family-heading);font-weight:var(--font-weight-regular);font-size:var(--font-size-500);line-height:var(--line-height-500);color:var(--center-channel-color)}._feature-discovery-panel__description_1apxo_48{margin:0;font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:var(--center-channel-color)}._feature-discovery-panel__actions_1apxo_55{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--spacing-m)}._feature-discovery-panel__action_1apxo_55{display:contents}._feature-discovery-panel__illustration_1apxo_64{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:340px}

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

@@ -1,12 +1,13 @@
-import { ButtonProps } from '../Button/Button';
-import { IllustrationProps } from '../Illustration/Illustration';
+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/feature-discovery-panel/FeatureDiscoveryPanel.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./FeatureDiscoveryPanel.module.css');const e={"feature-discovery-panel":"_feature-discovery-panel_1b4te_2","feature-discovery-panel__content":"_feature-discovery-panel__content_1b4te_12","feature-discovery-panel__text":"_feature-discovery-panel__text_1b4te_19","feature-discovery-panel__title-group":"_feature-discovery-panel__title-group_1b4te_24","feature-discovery-panel__title":"_feature-discovery-panel__title_1b4te_24","feature-discovery-panel__description":"_feature-discovery-panel__description_1b4te_37","feature-discovery-panel__actions":"_feature-discovery-panel__actions_1b4te_44","feature-discovery-panel__action":"_feature-discovery-panel__action_1b4te_44","feature-discovery-panel__illustration":"_feature-discovery-panel__illustration_1b4te_53"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./FeatureDiscoveryPanel.css');const e={"feature-discovery-panel":"_feature-discovery-panel_1apxo_13","feature-discovery-panel__content":"_feature-discovery-panel__content_1apxo_23","feature-discovery-panel__text":"_feature-discovery-panel__text_1apxo_30","feature-discovery-panel__title-group":"_feature-discovery-panel__title-group_1apxo_35","feature-discovery-panel__title":"_feature-discovery-panel__title_1apxo_35","feature-discovery-panel__description":"_feature-discovery-panel__description_1apxo_48","feature-discovery-panel__actions":"_feature-discovery-panel__actions_1apxo_55","feature-discovery-panel__action":"_feature-discovery-panel__action_1apxo_55","feature-discovery-panel__illustration":"_feature-discovery-panel__illustration_1apxo_64"};exports.default=e;
 //# sourceMappingURL=FeatureDiscoveryPanel.module.scss.cjs.map

package/dist/components/feature-discovery-panel/FeatureDiscoveryPanel.module.scss.js

@@ -1,13 +1,13 @@
-import './FeatureDiscoveryPanel.module.css';const e = {
-  "feature-discovery-panel": "_feature-discovery-panel_1b4te_2",
-  "feature-discovery-panel__content": "_feature-discovery-panel__content_1b4te_12",
-  "feature-discovery-panel__text": "_feature-discovery-panel__text_1b4te_19",
-  "feature-discovery-panel__title-group": "_feature-discovery-panel__title-group_1b4te_24",
-  "feature-discovery-panel__title": "_feature-discovery-panel__title_1b4te_24",
-  "feature-discovery-panel__description": "_feature-discovery-panel__description_1b4te_37",
-  "feature-discovery-panel__actions": "_feature-discovery-panel__actions_1b4te_44",
-  "feature-discovery-panel__action": "_feature-discovery-panel__action_1b4te_44",
-  "feature-discovery-panel__illustration": "_feature-discovery-panel__illustration_1b4te_53"
+import './FeatureDiscoveryPanel.css';const e = {
+  "feature-discovery-panel": "_feature-discovery-panel_1apxo_13",
+  "feature-discovery-panel__content": "_feature-discovery-panel__content_1apxo_23",
+  "feature-discovery-panel__text": "_feature-discovery-panel__text_1apxo_30",
+  "feature-discovery-panel__title-group": "_feature-discovery-panel__title-group_1apxo_35",
+  "feature-discovery-panel__title": "_feature-discovery-panel__title_1apxo_35",
+  "feature-discovery-panel__description": "_feature-discovery-panel__description_1apxo_48",
+  "feature-discovery-panel__actions": "_feature-discovery-panel__actions_1apxo_55",
+  "feature-discovery-panel__action": "_feature-discovery-panel__action_1apxo_55",
+  "feature-discovery-panel__illustration": "_feature-discovery-panel__illustration_1apxo_64"
 };
 export {
   e as default

package/dist/components/field/FieldClearButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),m=require("../icon/Icon.cjs"),__b=require("@mattermost/compass-icons/components/close-circle.js"),b=__b?.default??__b,c=require("../../utils/props.cjs"),o=require("./FieldClearButton.module.scss.cjs"),r={small:"12",medium:"16",large:"16"};function x({size:d="medium",clearLabel:l,clearButtonProps:e,onClick:s,tabIndex:n,className:u}){const t=r[d],a=n??(e==null?void 0:e.tabIndex)??void 0;return i.jsx("button",{...e,type:"button",className:c.mergeClassNames(o.default["field-clear-button"],u,e==null?void 0:e.className),onClick:s,"aria-label":l,tabIndex:a,children:i.jsx(m.default,{size:t,glyph:i.jsx(b,{})})})}exports.default=x;
+//# sourceMappingURL=FieldClearButton.cjs.map

package/dist/components/field/FieldClearButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldClearButton.cjs","sources":["../../../src/components/field/FieldClearButton.tsx"],"sourcesContent":["import type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './FieldClearButton.module.scss';\n\nexport type FieldClearButtonSize = 'small' | 'medium' | 'large';\n\nconst CLEAR_ICON_SIZE_MAP: Record<FieldClearButtonSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\n};\n\nexport interface FieldClearButtonProps {\n  size?: FieldClearButtonSize;\n  clearLabel: string;\n  clearButtonProps?: BuiltInButtonProps;\n  onClick: () => void;\n  /** When set, overrides the default tabIndex (SearchInput uses `-1`). */\n  tabIndex?: number;\n  className?: string;\n}\n\n/**\n * Built-in clear control for text fields. Hosts size the button via `size`;\n * accessible name comes from `clearLabel` (hosts should pass a translated string).\n */\nexport default function FieldClearButton({\n  size = 'medium',\n  clearLabel,\n  clearButtonProps,\n  onClick,\n  tabIndex,\n  className,\n}: FieldClearButtonProps) {\n  const iconSize = CLEAR_ICON_SIZE_MAP[size];\n  const resolvedTabIndex = tabIndex ?? clearButtonProps?.tabIndex ?? undefined;\n\n  return (\n    <button\n      {...clearButtonProps}\n      type=\"button\"\n      className={mergeClassNames(\n        styles['field-clear-button'],\n        className,\n        clearButtonProps?.className,\n      )}\n      onClick={onClick}\n      aria-label={clearLabel}\n      tabIndex={resolvedTabIndex}\n    >\n      <Icon size={iconSize} glyph={<CloseCircleIcon />} />\n    </button>\n  );\n}\n"],"names":["CLEAR_ICON_SIZE_MAP","FieldClearButton","size","clearLabel","clearButtonProps","onClick","tabIndex","className","iconSize","resolvedTabIndex","jsx","mergeClassNames","styles","Icon","CloseCircleIcon"],"mappings":"iUASMA,EAA8D,CAClE,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAgBA,SAAwBC,EAAiB,CACvC,KAAAC,EAAO,SACP,WAAAC,EACA,iBAAAC,EACA,QAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAA0B,CACxB,MAAMC,EAAWR,EAAoBE,CAAI,EACnCO,EAAmBH,IAAYF,GAAA,YAAAA,EAAkB,WAAY,OAEnE,OACEM,EAAAA,IAAC,SAAA,CACE,GAAGN,EACJ,KAAK,SACL,UAAWO,EAAAA,gBACTC,EAAAA,QAAO,oBAAoB,EAC3BL,EACAH,GAAA,YAAAA,EAAkB,SAAA,EAEpB,QAAAC,EACA,aAAYF,EACZ,SAAUM,EAEV,eAACI,EAAAA,QAAA,CAAK,KAAML,EAAU,MAAOE,EAAAA,IAACI,IAAgB,CAAA,CAAI,CAAA,CAAA,CAGxD"}

package/dist/components/field/FieldClearButton.css

@@ -0,0 +1 @@
+._field-clear-button_e16js_13{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:var(--radius-xs);background:transparent;cursor:pointer;color:inherit;outline:none}._field-clear-button_e16js_13:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px;animation:_focus-ring-in_e16js_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._field-clear-button_e16js_13:focus-visible{animation:none}}@keyframes _focus-ring-in_e16js_1{0%{outline-color:transparent;outline-offset:0}}._field-clear-button_e16js_13:hover{transition:color var(--duration-quick) var(--ease-transition);color:var(--center-channel-color)}

package/dist/components/field/FieldClearButton.d.ts

@@ -0,0 +1,17 @@
+import { BuiltInButtonProps } from '../../utils/props';
+export type FieldClearButtonSize = 'small' | 'medium' | 'large';
+export interface FieldClearButtonProps {
+    size?: FieldClearButtonSize;
+    clearLabel: string;
+    clearButtonProps?: BuiltInButtonProps;
+    onClick: () => void;
+    /** When set, overrides the default tabIndex (SearchInput uses `-1`). */
+    tabIndex?: number;
+    className?: string;
+}
+/**
+ * Built-in clear control for text fields. Hosts size the button via `size`;
+ * accessible name comes from `clearLabel` (hosts should pass a translated string).
+ */
+export default function FieldClearButton({ size, clearLabel, clearButtonProps, onClick, tabIndex, className, }: FieldClearButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FieldClearButton.d.ts.map

package/dist/components/field/FieldClearButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldClearButton.d.ts","sourceRoot":"","sources":["../../../src/components/field/FieldClearButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAQhE,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,IAAe,EACf,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,qBAAqB,2CAoBvB"}

package/dist/components/field/FieldClearButton.js

@@ -0,0 +1,40 @@
+import { jsx as e } from "react/jsx-runtime";
+import n from "../icon/Icon.js";
+import __I from "@mattermost/compass-icons/components/close-circle.js";const I=__I&&__I.default?__I.default:__I;
+import { mergeClassNames as C } from "../../utils/props.js";
+import o from "./FieldClearButton.module.scss.js";
+const x = {
+  small: "12",
+  medium: "16",
+  large: "16"
+};
+function c({
+  size: i = "medium",
+  clearLabel: d,
+  clearButtonProps: m,
+  onClick: l,
+  tabIndex: a,
+  className: f
+}) {
+  const s = x[i], b = a ?? (m == null ? void 0 : m.tabIndex) ?? void 0;
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      ...m,
+      type: "button",
+      className: C(
+        o["field-clear-button"],
+        f,
+        m == null ? void 0 : m.className
+      ),
+      onClick: l,
+      "aria-label": d,
+      tabIndex: b,
+      children: /* @__PURE__ */ e(n, { size: s, glyph: /* @__PURE__ */ e(I, {}) })
+    }
+  );
+}
+export {
+  c as default
+};
+//# sourceMappingURL=FieldClearButton.js.map

package/dist/components/field/FieldClearButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldClearButton.js","sources":["../../../src/components/field/FieldClearButton.tsx"],"sourcesContent":["import type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './FieldClearButton.module.scss';\n\nexport type FieldClearButtonSize = 'small' | 'medium' | 'large';\n\nconst CLEAR_ICON_SIZE_MAP: Record<FieldClearButtonSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\n};\n\nexport interface FieldClearButtonProps {\n  size?: FieldClearButtonSize;\n  clearLabel: string;\n  clearButtonProps?: BuiltInButtonProps;\n  onClick: () => void;\n  /** When set, overrides the default tabIndex (SearchInput uses `-1`). */\n  tabIndex?: number;\n  className?: string;\n}\n\n/**\n * Built-in clear control for text fields. Hosts size the button via `size`;\n * accessible name comes from `clearLabel` (hosts should pass a translated string).\n */\nexport default function FieldClearButton({\n  size = 'medium',\n  clearLabel,\n  clearButtonProps,\n  onClick,\n  tabIndex,\n  className,\n}: FieldClearButtonProps) {\n  const iconSize = CLEAR_ICON_SIZE_MAP[size];\n  const resolvedTabIndex = tabIndex ?? clearButtonProps?.tabIndex ?? undefined;\n\n  return (\n    <button\n      {...clearButtonProps}\n      type=\"button\"\n      className={mergeClassNames(\n        styles['field-clear-button'],\n        className,\n        clearButtonProps?.className,\n      )}\n      onClick={onClick}\n      aria-label={clearLabel}\n      tabIndex={resolvedTabIndex}\n    >\n      <Icon size={iconSize} glyph={<CloseCircleIcon />} />\n    </button>\n  );\n}\n"],"names":["CLEAR_ICON_SIZE_MAP","FieldClearButton","size","clearLabel","clearButtonProps","onClick","tabIndex","className","iconSize","resolvedTabIndex","jsx","mergeClassNames","styles","Icon","CloseCircleIcon"],"mappings":";;;;;AASA,MAAMA,IAA8D;AAAA,EAClE,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAgBA,SAAwBC,EAAiB;AAAA,EACvC,MAAAC,IAAO;AAAA,EACP,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA0B;AACxB,QAAMC,IAAWR,EAAoBE,CAAI,GACnCO,IAAmBH,MAAYF,KAAA,gBAAAA,EAAkB,aAAY;AAEnE,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGN;AAAA,MACJ,MAAK;AAAA,MACL,WAAWO;AAAA,QACTC,EAAO,oBAAoB;AAAA,QAC3BL;AAAA,QACAH,KAAA,gBAAAA,EAAkB;AAAA,MAAA;AAAA,MAEpB,SAAAC;AAAA,MACA,cAAYF;AAAA,MACZ,UAAUM;AAAA,MAEV,4BAACI,GAAA,EAAK,MAAML,GAAU,OAAO,gBAAAE,EAACI,KAAgB,EAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAGxD;"}

package/dist/components/field/FieldClearButton.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./FieldClearButton.css');const e={"field-clear-button":"_field-clear-button_e16js_13"};exports.default=e;
+//# sourceMappingURL=FieldClearButton.module.scss.cjs.map

package/dist/components/field/FieldClearButton.module.scss.cjs.map

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

package/dist/components/field/FieldClearButton.module.scss.js

@@ -0,0 +1,7 @@
+import './FieldClearButton.css';const e = {
+  "field-clear-button": "_field-clear-button_e16js_13"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=FieldClearButton.module.scss.js.map

package/dist/components/field/FieldClearButton.module.scss.js.map

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

package/dist/components/field/fieldDescribedBy.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function n(e){return!(e==null||e===!1||e==="")}function l(e,r,i){return e?!0:n(r)?(i??"error")==="error":!1}function t(e,r,i){return[e,r,i].filter(Boolean).join(" ")||void 0}exports.hasFieldMessage=n;exports.isFieldInvalid=l;exports.mergeFieldDescribedBy=t;
+//# sourceMappingURL=fieldDescribedBy.cjs.map

package/dist/components/field/fieldDescribedBy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldDescribedBy.cjs","sources":["../../../src/components/field/fieldDescribedBy.ts"],"sourcesContent":["import type { FieldMessageTone } from '@/components/field-message/FieldMessage';\n\n/**\n * True when a field message should render / contribute describedby / invalid chrome.\n * Treats `null`, `undefined`, `false`, and `''` as absent.\n */\nexport function hasFieldMessage(message: unknown): boolean {\n  return !(message == null || message === false || message === '');\n}\n\n/** True when the field should show invalid chrome from props or an error message. */\nexport function isFieldInvalid(\n  invalid: boolean,\n  message: unknown,\n  messageTone: FieldMessageTone | undefined,\n): boolean {\n  if (invalid) return true;\n  if (!hasFieldMessage(message)) return false;\n  return (messageTone ?? 'error') === 'error';\n}\n\n/** Merge host `aria-describedby` with message and counter ids (message before counter). */\nexport function mergeFieldDescribedBy(\n  hostDescribedBy: string | undefined,\n  messageId: string | undefined,\n  counterId: string | undefined,\n): string | undefined {\n  const joined = [hostDescribedBy, messageId, counterId]\n    .filter(Boolean)\n    .join(' ');\n  return joined || undefined;\n}\n"],"names":["hasFieldMessage","message","isFieldInvalid","invalid","messageTone","mergeFieldDescribedBy","hostDescribedBy","messageId","counterId"],"mappings":"gFAMO,SAASA,EAAgBC,EAA2B,CACzD,MAAO,EAAEA,GAAW,MAAQA,IAAY,IAASA,IAAY,GAC/D,CAGO,SAASC,EACdC,EACAF,EACAG,EACS,CACT,OAAID,EAAgB,GACfH,EAAgBC,CAAO,GACpBG,GAAe,WAAa,QADE,EAExC,CAGO,SAASC,EACdC,EACAC,EACAC,EACoB,CAIpB,MAHe,CAACF,EAAiBC,EAAWC,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,GACM,MACnB"}

package/dist/components/field/fieldDescribedBy.d.ts

@@ -0,0 +1,11 @@
+import { FieldMessageTone } from '../field-message/FieldMessage';
+/**
+ * True when a field message should render / contribute describedby / invalid chrome.
+ * Treats `null`, `undefined`, `false`, and `''` as absent.
+ */
+export declare function hasFieldMessage(message: unknown): boolean;
+/** True when the field should show invalid chrome from props or an error message. */
+export declare function isFieldInvalid(invalid: boolean, message: unknown, messageTone: FieldMessageTone | undefined): boolean;
+/** Merge host `aria-describedby` with message and counter ids (message before counter). */
+export declare function mergeFieldDescribedBy(hostDescribedBy: string | undefined, messageId: string | undefined, counterId: string | undefined): string | undefined;
+//# sourceMappingURL=fieldDescribedBy.d.ts.map

package/dist/components/field/fieldDescribedBy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldDescribedBy.d.ts","sourceRoot":"","sources":["../../../src/components/field/fieldDescribedBy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAE/E;;;GAGG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAEzD;AAED,qFAAqF;AACrF,wBAAgB,cAAc,CAC5B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,gBAAgB,GAAG,SAAS,GACxC,OAAO,CAIT;AAED,2FAA2F;AAC3F,wBAAgB,qBAAqB,CACnC,eAAe,EAAE,MAAM,GAAG,SAAS,EACnC,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,SAAS,EAAE,MAAM,GAAG,SAAS,GAC5B,MAAM,GAAG,SAAS,CAKpB"}

package/dist/components/field/fieldDescribedBy.js

@@ -0,0 +1,15 @@
+function i(r) {
+  return !(r == null || r === !1 || r === "");
+}
+function t(r, e, n) {
+  return r ? !0 : i(e) ? (n ?? "error") === "error" : !1;
+}
+function l(r, e, n) {
+  return [r, e, n].filter(Boolean).join(" ") || void 0;
+}
+export {
+  i as hasFieldMessage,
+  t as isFieldInvalid,
+  l as mergeFieldDescribedBy
+};
+//# sourceMappingURL=fieldDescribedBy.js.map

package/dist/components/field/fieldDescribedBy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldDescribedBy.js","sources":["../../../src/components/field/fieldDescribedBy.ts"],"sourcesContent":["import type { FieldMessageTone } from '@/components/field-message/FieldMessage';\n\n/**\n * True when a field message should render / contribute describedby / invalid chrome.\n * Treats `null`, `undefined`, `false`, and `''` as absent.\n */\nexport function hasFieldMessage(message: unknown): boolean {\n  return !(message == null || message === false || message === '');\n}\n\n/** True when the field should show invalid chrome from props or an error message. */\nexport function isFieldInvalid(\n  invalid: boolean,\n  message: unknown,\n  messageTone: FieldMessageTone | undefined,\n): boolean {\n  if (invalid) return true;\n  if (!hasFieldMessage(message)) return false;\n  return (messageTone ?? 'error') === 'error';\n}\n\n/** Merge host `aria-describedby` with message and counter ids (message before counter). */\nexport function mergeFieldDescribedBy(\n  hostDescribedBy: string | undefined,\n  messageId: string | undefined,\n  counterId: string | undefined,\n): string | undefined {\n  const joined = [hostDescribedBy, messageId, counterId]\n    .filter(Boolean)\n    .join(' ');\n  return joined || undefined;\n}\n"],"names":["hasFieldMessage","message","isFieldInvalid","invalid","messageTone","mergeFieldDescribedBy","hostDescribedBy","messageId","counterId"],"mappings":"AAMO,SAASA,EAAgBC,GAA2B;AACzD,SAAO,EAAEA,KAAW,QAAQA,MAAY,MAASA,MAAY;AAC/D;AAGO,SAASC,EACdC,GACAF,GACAG,GACS;AACT,SAAID,IAAgB,KACfH,EAAgBC,CAAO,KACpBG,KAAe,aAAa,UADE;AAExC;AAGO,SAASC,EACdC,GACAC,GACAC,GACoB;AAIpB,SAHe,CAACF,GAAiBC,GAAWC,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,KACM;AACnB;"}

package/dist/components/field/useFieldClear.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react");function g(u){let a=!1,s=!1;const e=new Event("change",{bubbles:!0,cancelable:!0});return{nativeEvent:e,type:"change",target:u,currentTarget:u,bubbles:!0,cancelable:!0,defaultPrevented:!1,eventPhase:0,isTrusted:!1,timeStamp:Date.now(),preventDefault(){var t;a=!0,this.defaultPrevented=!0,(t=e.preventDefault)==null||t.call(e)},isDefaultPrevented(){return a},stopPropagation(){var t;s=!0,(t=e.stopPropagation)==null||t.call(e)},isPropagationStopped(){return s},persist(){}}}function S({disabled:u,hasValue:a,clearEnabled:s=!0,isControlled:e,onClear:c,onChange:t,onKeyDown:f,inputRef:l,setUncontrolledValue:p}){const P=!!(s&&a&&!u),n=o.useCallback(()=>{var i;if(u||!s)return;if(c){c(),(i=l.current)==null||i.focus();return}const r=l.current;r!=null&&(r.value="",e||p(""),t==null||t(g(r)),r.focus())},[s,u,l,e,t,c,p]),v=o.useCallback(r=>{f==null||f(r),!(r.defaultPrevented||u||!s)&&r.key==="Escape"&&a&&(r.preventDefault(),n())},[s,u,n,a,f]);return{showClearButton:P,handleClear:n,handleKeyDown:v}}exports.useFieldClear=S;
+//# sourceMappingURL=useFieldClear.cjs.map

package/dist/components/field/useFieldClear.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldClear.cjs","sources":["../../../src/components/field/useFieldClear.ts"],"sourcesContent":["import type {\n  ChangeEvent,\n  KeyboardEvent,\n  RefObject,\n  SyntheticEvent,\n} from 'react';\nimport { useCallback } from 'react';\n\ntype FieldElement = HTMLInputElement | HTMLTextAreaElement;\n\nexport interface UseFieldClearOptions<T extends FieldElement> {\n  disabled?: boolean;\n  hasValue: boolean;\n  /** When false, clear is hidden and Escape does not clear. Default true. */\n  clearEnabled?: boolean;\n  isControlled: boolean;\n  onClear?: () => void;\n  onChange?: (e: ChangeEvent<T>) => void;\n  onKeyDown?: (e: KeyboardEvent<T>) => void;\n  inputRef: RefObject<T | null>;\n  setUncontrolledValue: (value: string) => void;\n}\n\n/** Minimal ChangeEvent so host `preventDefault` / `nativeEvent` access won't throw. */\nfunction createClearChangeEvent<T extends FieldElement>(\n  input: T,\n): ChangeEvent<T> {\n  let defaultPrevented = false;\n  let propagationStopped = false;\n  const nativeEvent = new Event('change', { bubbles: true, cancelable: true });\n\n  const event = {\n    nativeEvent,\n    type: 'change',\n    target: input,\n    currentTarget: input,\n    bubbles: true,\n    cancelable: true,\n    defaultPrevented: false,\n    eventPhase: 0,\n    isTrusted: false,\n    timeStamp: Date.now(),\n    preventDefault() {\n      defaultPrevented = true;\n      this.defaultPrevented = true;\n      nativeEvent.preventDefault?.();\n    },\n    isDefaultPrevented() {\n      return defaultPrevented;\n    },\n    stopPropagation() {\n      propagationStopped = true;\n      nativeEvent.stopPropagation?.();\n    },\n    isPropagationStopped() {\n      return propagationStopped;\n    },\n    persist() {},\n  } as ChangeEvent<T> & SyntheticEvent<T, Event>;\n\n  return event;\n}\n\nexport function useFieldClear<T extends FieldElement>({\n  disabled,\n  hasValue,\n  clearEnabled = true,\n  isControlled,\n  onClear,\n  onChange,\n  onKeyDown,\n  inputRef,\n  setUncontrolledValue,\n}: UseFieldClearOptions<T>) {\n  const showClearButton = Boolean(clearEnabled && hasValue && !disabled);\n\n  const handleClear = useCallback(() => {\n    if (disabled || !clearEnabled) return;\n\n    if (onClear) {\n      onClear();\n      inputRef.current?.focus();\n      return;\n    }\n\n    const input = inputRef.current;\n    if (input == null) return;\n\n    input.value = '';\n    if (!isControlled) setUncontrolledValue('');\n\n    onChange?.(createClearChangeEvent(input));\n    input.focus();\n  }, [\n    clearEnabled,\n    disabled,\n    inputRef,\n    isControlled,\n    onChange,\n    onClear,\n    setUncontrolledValue,\n  ]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<T>) => {\n      onKeyDown?.(e);\n      if (e.defaultPrevented || disabled || !clearEnabled) return;\n      if (e.key === 'Escape' && hasValue) {\n        e.preventDefault();\n        handleClear();\n      }\n    },\n    [clearEnabled, disabled, handleClear, hasValue, onKeyDown],\n  );\n\n  return { showClearButton, handleClear, handleKeyDown };\n}\n"],"names":["createClearChangeEvent","input","defaultPrevented","propagationStopped","nativeEvent","_a","useFieldClear","disabled","hasValue","clearEnabled","isControlled","onClear","onChange","onKeyDown","inputRef","setUncontrolledValue","showClearButton","handleClear","useCallback","handleKeyDown","e"],"mappings":"yGAwBA,SAASA,EACPC,EACgB,CAChB,IAAIC,EAAmB,GACnBC,EAAqB,GACzB,MAAMC,EAAc,IAAI,MAAM,SAAU,CAAE,QAAS,GAAM,WAAY,GAAM,EA+B3E,MA7Bc,CACZ,YAAAA,EACA,KAAM,SACN,OAAQH,EACR,cAAeA,EACf,QAAS,GACT,WAAY,GACZ,iBAAkB,GAClB,WAAY,EACZ,UAAW,GACX,UAAW,KAAK,IAAA,EAChB,gBAAiB,OACfC,EAAmB,GACnB,KAAK,iBAAmB,IACxBG,EAAAD,EAAY,iBAAZ,MAAAC,EAAA,KAAAD,EACF,EACA,oBAAqB,CACnB,OAAOF,CACT,EACA,iBAAkB,OAChBC,EAAqB,IACrBE,EAAAD,EAAY,kBAAZ,MAAAC,EAAA,KAAAD,EACF,EACA,sBAAuB,CACrB,OAAOD,CACT,EACA,SAAU,CAAC,CAAA,CAIf,CAEO,SAASG,EAAsC,CACpD,SAAAC,EACA,SAAAC,EACA,aAAAC,EAAe,GACf,aAAAC,EACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,qBAAAC,CACF,EAA4B,CAC1B,MAAMC,EAAkB,GAAQP,GAAgBD,GAAY,CAACD,GAEvDU,EAAcC,EAAAA,YAAY,IAAM,OACpC,GAAIX,GAAY,CAACE,EAAc,OAE/B,GAAIE,EAAS,CACXA,EAAA,GACAN,EAAAS,EAAS,UAAT,MAAAT,EAAkB,QAClB,MACF,CAEA,MAAMJ,EAAQa,EAAS,QACnBb,GAAS,OAEbA,EAAM,MAAQ,GACTS,GAAcK,EAAqB,EAAE,EAE1CH,GAAA,MAAAA,EAAWZ,EAAuBC,CAAK,GACvCA,EAAM,MAAA,EACR,EAAG,CACDQ,EACAF,EACAO,EACAJ,EACAE,EACAD,EACAI,CAAA,CACD,EAEKI,EAAgBD,EAAAA,YACnBE,GAAwB,CACvBP,GAAA,MAAAA,EAAYO,GACR,EAAAA,EAAE,kBAAoBb,GAAY,CAACE,IACnCW,EAAE,MAAQ,UAAYZ,IACxBY,EAAE,eAAA,EACFH,EAAA,EAEJ,EACA,CAACR,EAAcF,EAAUU,EAAaT,EAAUK,CAAS,CAAA,EAG3D,MAAO,CAAE,gBAAAG,EAAiB,YAAAC,EAAa,cAAAE,CAAA,CACzC"}

package/dist/components/field/useFieldClear.d.ts

@@ -0,0 +1,21 @@
+import { ChangeEvent, KeyboardEvent, RefObject } from 'react';
+type FieldElement = HTMLInputElement | HTMLTextAreaElement;
+export interface UseFieldClearOptions<T extends FieldElement> {
+    disabled?: boolean;
+    hasValue: boolean;
+    /** When false, clear is hidden and Escape does not clear. Default true. */
+    clearEnabled?: boolean;
+    isControlled: boolean;
+    onClear?: () => void;
+    onChange?: (e: ChangeEvent<T>) => void;
+    onKeyDown?: (e: KeyboardEvent<T>) => void;
+    inputRef: RefObject<T | null>;
+    setUncontrolledValue: (value: string) => void;
+}
+export declare function useFieldClear<T extends FieldElement>({ disabled, hasValue, clearEnabled, isControlled, onClear, onChange, onKeyDown, inputRef, setUncontrolledValue, }: UseFieldClearOptions<T>): {
+    showClearButton: boolean;
+    handleClear: () => void;
+    handleKeyDown: (e: KeyboardEvent<T>) => void;
+};
+export {};
+//# sourceMappingURL=useFieldClear.d.ts.map

package/dist/components/field/useFieldClear.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldClear.d.ts","sourceRoot":"","sources":["../../../src/components/field/useFieldClear.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,aAAa,EACb,SAAS,EAEV,MAAM,OAAO,CAAC;AAGf,KAAK,YAAY,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AAE3D,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,YAAY;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAC9B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AA0CD,wBAAgB,aAAa,CAAC,CAAC,SAAS,YAAY,EAAE,EACpD,QAAQ,EACR,QAAQ,EACR,YAAmB,EACnB,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,oBAAoB,GACrB,EAAE,oBAAoB,CAAC,CAAC,CAAC;;;uBA+BlB,aAAa,CAAC,CAAC,CAAC;EAYvB"}

package/dist/components/field/useFieldClear.js

@@ -0,0 +1,73 @@
+import { useCallback as o } from "react";
+function g(u) {
+  let s = !1, f = !1;
+  const t = new Event("change", { bubbles: !0, cancelable: !0 });
+  return {
+    nativeEvent: t,
+    type: "change",
+    target: u,
+    currentTarget: u,
+    bubbles: !0,
+    cancelable: !0,
+    defaultPrevented: !1,
+    eventPhase: 0,
+    isTrusted: !1,
+    timeStamp: Date.now(),
+    preventDefault() {
+      var e;
+      s = !0, this.defaultPrevented = !0, (e = t.preventDefault) == null || e.call(t);
+    },
+    isDefaultPrevented() {
+      return s;
+    },
+    stopPropagation() {
+      var e;
+      f = !0, (e = t.stopPropagation) == null || e.call(t);
+    },
+    isPropagationStopped() {
+      return f;
+    },
+    persist() {
+    }
+  };
+}
+function S({
+  disabled: u,
+  hasValue: s,
+  clearEnabled: f = !0,
+  isControlled: t,
+  onClear: p,
+  onChange: e,
+  onKeyDown: a,
+  inputRef: c,
+  setUncontrolledValue: l
+}) {
+  const P = !!(f && s && !u), n = o(() => {
+    var i;
+    if (u || !f) return;
+    if (p) {
+      p(), (i = c.current) == null || i.focus();
+      return;
+    }
+    const r = c.current;
+    r != null && (r.value = "", t || l(""), e == null || e(g(r)), r.focus());
+  }, [
+    f,
+    u,
+    c,
+    t,
+    e,
+    p,
+    l
+  ]), v = o(
+    (r) => {
+      a == null || a(r), !(r.defaultPrevented || u || !f) && r.key === "Escape" && s && (r.preventDefault(), n());
+    },
+    [f, u, n, s, a]
+  );
+  return { showClearButton: P, handleClear: n, handleKeyDown: v };
+}
+export {
+  S as useFieldClear
+};
+//# sourceMappingURL=useFieldClear.js.map

package/dist/components/field/useFieldClear.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldClear.js","sources":["../../../src/components/field/useFieldClear.ts"],"sourcesContent":["import type {\n  ChangeEvent,\n  KeyboardEvent,\n  RefObject,\n  SyntheticEvent,\n} from 'react';\nimport { useCallback } from 'react';\n\ntype FieldElement = HTMLInputElement | HTMLTextAreaElement;\n\nexport interface UseFieldClearOptions<T extends FieldElement> {\n  disabled?: boolean;\n  hasValue: boolean;\n  /** When false, clear is hidden and Escape does not clear. Default true. */\n  clearEnabled?: boolean;\n  isControlled: boolean;\n  onClear?: () => void;\n  onChange?: (e: ChangeEvent<T>) => void;\n  onKeyDown?: (e: KeyboardEvent<T>) => void;\n  inputRef: RefObject<T | null>;\n  setUncontrolledValue: (value: string) => void;\n}\n\n/** Minimal ChangeEvent so host `preventDefault` / `nativeEvent` access won't throw. */\nfunction createClearChangeEvent<T extends FieldElement>(\n  input: T,\n): ChangeEvent<T> {\n  let defaultPrevented = false;\n  let propagationStopped = false;\n  const nativeEvent = new Event('change', { bubbles: true, cancelable: true });\n\n  const event = {\n    nativeEvent,\n    type: 'change',\n    target: input,\n    currentTarget: input,\n    bubbles: true,\n    cancelable: true,\n    defaultPrevented: false,\n    eventPhase: 0,\n    isTrusted: false,\n    timeStamp: Date.now(),\n    preventDefault() {\n      defaultPrevented = true;\n      this.defaultPrevented = true;\n      nativeEvent.preventDefault?.();\n    },\n    isDefaultPrevented() {\n      return defaultPrevented;\n    },\n    stopPropagation() {\n      propagationStopped = true;\n      nativeEvent.stopPropagation?.();\n    },\n    isPropagationStopped() {\n      return propagationStopped;\n    },\n    persist() {},\n  } as ChangeEvent<T> & SyntheticEvent<T, Event>;\n\n  return event;\n}\n\nexport function useFieldClear<T extends FieldElement>({\n  disabled,\n  hasValue,\n  clearEnabled = true,\n  isControlled,\n  onClear,\n  onChange,\n  onKeyDown,\n  inputRef,\n  setUncontrolledValue,\n}: UseFieldClearOptions<T>) {\n  const showClearButton = Boolean(clearEnabled && hasValue && !disabled);\n\n  const handleClear = useCallback(() => {\n    if (disabled || !clearEnabled) return;\n\n    if (onClear) {\n      onClear();\n      inputRef.current?.focus();\n      return;\n    }\n\n    const input = inputRef.current;\n    if (input == null) return;\n\n    input.value = '';\n    if (!isControlled) setUncontrolledValue('');\n\n    onChange?.(createClearChangeEvent(input));\n    input.focus();\n  }, [\n    clearEnabled,\n    disabled,\n    inputRef,\n    isControlled,\n    onChange,\n    onClear,\n    setUncontrolledValue,\n  ]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<T>) => {\n      onKeyDown?.(e);\n      if (e.defaultPrevented || disabled || !clearEnabled) return;\n      if (e.key === 'Escape' && hasValue) {\n        e.preventDefault();\n        handleClear();\n      }\n    },\n    [clearEnabled, disabled, handleClear, hasValue, onKeyDown],\n  );\n\n  return { showClearButton, handleClear, handleKeyDown };\n}\n"],"names":["createClearChangeEvent","input","defaultPrevented","propagationStopped","nativeEvent","_a","useFieldClear","disabled","hasValue","clearEnabled","isControlled","onClear","onChange","onKeyDown","inputRef","setUncontrolledValue","showClearButton","handleClear","useCallback","handleKeyDown","e"],"mappings":";AAwBA,SAASA,EACPC,GACgB;AAChB,MAAIC,IAAmB,IACnBC,IAAqB;AACzB,QAAMC,IAAc,IAAI,MAAM,UAAU,EAAE,SAAS,IAAM,YAAY,IAAM;AA+B3E,SA7Bc;AAAA,IACZ,aAAAA;AAAA,IACA,MAAM;AAAA,IACN,QAAQH;AAAA,IACR,eAAeA;AAAA,IACf,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW,KAAK,IAAA;AAAA,IAChB,iBAAiB;;AACf,MAAAC,IAAmB,IACnB,KAAK,mBAAmB,KACxBG,IAAAD,EAAY,mBAAZ,QAAAC,EAAA,KAAAD;AAAA,IACF;AAAA,IACA,qBAAqB;AACnB,aAAOF;AAAA,IACT;AAAA,IACA,kBAAkB;;AAChB,MAAAC,IAAqB,KACrBE,IAAAD,EAAY,oBAAZ,QAAAC,EAAA,KAAAD;AAAA,IACF;AAAA,IACA,uBAAuB;AACrB,aAAOD;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IAAC;AAAA,EAAA;AAIf;AAEO,SAASG,EAAsC;AAAA,EACpD,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,sBAAAC;AACF,GAA4B;AAC1B,QAAMC,IAAkB,GAAQP,KAAgBD,KAAY,CAACD,IAEvDU,IAAcC,EAAY,MAAM;;AACpC,QAAIX,KAAY,CAACE,EAAc;AAE/B,QAAIE,GAAS;AACX,MAAAA,EAAA,IACAN,IAAAS,EAAS,YAAT,QAAAT,EAAkB;AAClB;AAAA,IACF;AAEA,UAAMJ,IAAQa,EAAS;AACvB,IAAIb,KAAS,SAEbA,EAAM,QAAQ,IACTS,KAAcK,EAAqB,EAAE,GAE1CH,KAAA,QAAAA,EAAWZ,EAAuBC,CAAK,IACvCA,EAAM,MAAA;AAAA,EACR,GAAG;AAAA,IACDQ;AAAA,IACAF;AAAA,IACAO;AAAA,IACAJ;AAAA,IACAE;AAAA,IACAD;AAAA,IACAI;AAAA,EAAA,CACD,GAEKI,IAAgBD;AAAA,IACpB,CAACE,MAAwB;AAEvB,MADAP,KAAA,QAAAA,EAAYO,IACR,EAAAA,EAAE,oBAAoBb,KAAY,CAACE,MACnCW,EAAE,QAAQ,YAAYZ,MACxBY,EAAE,eAAA,GACFH,EAAA;AAAA,IAEJ;AAAA,IACA,CAACR,GAAcF,GAAUU,GAAaT,GAAUK,CAAS;AAAA,EAAA;AAG3D,SAAO,EAAE,iBAAAG,GAAiB,aAAAC,GAAa,eAAAE,EAAA;AACzC;"}

package/dist/components/field-message/FieldMessage.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__u=require("@mattermost/compass-icons/components/alert-circle-outline.js"),u=__u?.default??__u,__d=require("@mattermost/compass-icons/components/alert-outline.js"),d=__d?.default??__d,__f=require("@mattermost/compass-icons/components/check.js"),f=__f?.default??__f,g=require("../icon/Icon.cjs"),j=require("../../utils/string.cjs"),r=require("./FieldMessage.module.scss.cjs"),m={error:e.jsx(u,{}),warning:e.jsx(d,{}),success:e.jsx(f,{})};function x({className:n="",message:i,tone:s="error",...l}){const o=r.default[`field-message--tone-${j.toKebab(s)}`],a=[r.default["field-message"],o,n].filter(Boolean).join(" "),c=s==="error"||s==="warning",t=m[s];return e.jsxs("div",{...l,className:a,role:c?"alert":l.role,children:[t!=null&&e.jsx("span",{className:r.default["field-message__icon"],"aria-hidden":!0,children:e.jsx(g.default,{size:"12",glyph:t})}),e.jsx("span",{className:r.default["field-message__text"],children:i})]})}exports.default=x;
+//# sourceMappingURL=FieldMessage.cjs.map

package/dist/components/field-message/FieldMessage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldMessage.cjs","sources":["../../../src/components/field-message/FieldMessage.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { toKebab } from '@/utils/string';\nimport styles from './FieldMessage.module.scss';\n\nexport type FieldMessageTone = 'error' | 'warning' | 'info' | 'success';\n\nexport interface FieldMessageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  message: ReactNode;\n  /** Visual tone. Default: `error`. Info has no icon. */\n  tone?: FieldMessageTone;\n}\n\nconst TONE_ICONS: Partial<Record<FieldMessageTone, ReactNode>> = {\n  error: <AlertCircleOutlineIcon />,\n  warning: <AlertOutlineIcon />,\n  success: <CheckIcon />,\n};\n\n/**\n * Field Message is the inline status line under a form field — validation errors, warnings,\n * hints, or success. Error, warning, and success pair a tone glyph with the copy; info is\n * text-only at muted center-channel color.\n */\nexport default function FieldMessage({\n  className = '',\n  message,\n  tone = 'error',\n  ...rest\n}: FieldMessageProps) {\n  const toneClass = styles[`field-message--tone-${toKebab(tone)}`];\n  const rootClass = [styles['field-message'], toneClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const isAlert = tone === 'error' || tone === 'warning';\n  const glyph = TONE_ICONS[tone];\n\n  return (\n    <div {...rest} className={rootClass} role={isAlert ? 'alert' : rest.role}>\n      {glyph != null && (\n        <span className={styles['field-message__icon']} aria-hidden>\n          <Icon size=\"12\" glyph={glyph} />\n        </span>\n      )}\n      <span className={styles['field-message__text']}>{message}</span>\n    </div>\n  );\n}\n"],"names":["TONE_ICONS","AlertCircleOutlineIcon","AlertOutlineIcon","CheckIcon","FieldMessage","className","message","tone","rest","toneClass","styles","toKebab","rootClass","isAlert","glyph","jsxs","jsx","Icon"],"mappings":"8bAmBMA,EAA2D,CAC/D,YAAQC,EAAA,EAAuB,EAC/B,cAAUC,EAAA,EAAiB,EAC3B,cAAUC,EAAA,CAAA,CAAU,CACtB,EAOA,SAAwBC,EAAa,CACnC,UAAAC,EAAY,GACZ,QAAAC,EACA,KAAAC,EAAO,QACP,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAYC,EAAAA,QAAO,uBAAuBC,EAAAA,QAAQJ,CAAI,CAAC,EAAE,EACzDK,EAAY,CAACF,UAAO,eAAe,EAAGD,EAAWJ,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG,EAELQ,EAAUN,IAAS,SAAWA,IAAS,UACvCO,EAAQd,EAAWO,CAAI,EAE7B,OACEQ,EAAAA,KAAC,MAAA,CAAK,GAAGP,EAAM,UAAWI,EAAW,KAAMC,EAAU,QAAUL,EAAK,KACjE,SAAA,CAAAM,GAAS,MACRE,MAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAM,EAAAA,IAACC,UAAA,CAAK,KAAK,KAAK,MAAAH,EAAc,EAChC,QAED,OAAA,CAAK,UAAWJ,EAAAA,QAAO,qBAAqB,EAAI,SAAAJ,CAAA,CAAQ,CAAA,EAC3D,CAEJ"}

package/dist/components/field-message/FieldMessage.css

@@ -0,0 +1 @@
+._field-message_1ev1y_13{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._field-message__icon_1ev1y_18{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding-top:var(--spacing-xxxxs)}._field-message__text_1ev1y_25{font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);flex:1 0 0;min-width:0}._field-message--tone-error_1ev1y_32 ._field-message__icon_1ev1y_18,._field-message--tone-error_1ev1y_32 ._field-message__text_1ev1y_25{color:var(--error-text, var(--color-danger))}._field-message--tone-warning_1ev1y_36 ._field-message__icon_1ev1y_18,._field-message--tone-warning_1ev1y_36 ._field-message__text_1ev1y_25{color:var(--away-indicator, var(--color-warning))}._field-message--tone-info_1ev1y_40 ._field-message__text_1ev1y_25{color:rgba(var(--center-channel-color-rgb),.75)}._field-message--tone-success_1ev1y_43 ._field-message__icon_1ev1y_18,._field-message--tone-success_1ev1y_43 ._field-message__text_1ev1y_25{color:var(--online-indicator, var(--color-success))}

package/dist/components/field-message/FieldMessage.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type FieldMessageTone = 'error' | 'warning' | 'info' | 'success';
+export interface FieldMessageProps extends HTMLAttributes<HTMLDivElement> {
+    /** Optional CSS class name. */
+    className?: string;
+    /** The message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    message: ReactNode;
+    /** Visual tone. Default: `error`. Info has no icon. */
+    tone?: FieldMessageTone;
+}
+/**
+ * Field Message is the inline status line under a form field — validation errors, warnings,
+ * hints, or success. Error, warning, and success pair a tone glyph with the copy; info is
+ * text-only at muted center-channel color.
+ */
+export default function FieldMessage({ className, message, tone, ...rest }: FieldMessageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FieldMessage.d.ts.map

package/dist/components/field-message/FieldMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldMessage.d.ts","sourceRoot":"","sources":["../../../src/components/field-message/FieldMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,OAAO,EAAE,SAAS,CAAC;IACnB,uDAAuD;IACvD,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,OAAO,EACP,IAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAmBnB"}