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

package/dist/components/right-sidebar/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./RightSidebar.cjs"),r=require("./RightSidebarHeader/RightSidebarHeader.cjs");exports.RightSidebar=e.default;exports.RightSidebarHeader=r.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/right-sidebar/index.cjs.map

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

package/dist/components/right-sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/right-sidebar/index.js

@@ -0,0 +1,7 @@
+import { default as r } from "./RightSidebar.js";
+import { default as d } from "./RightSidebarHeader/RightSidebarHeader.js";
+export {
+  r as RightSidebar,
+  d as RightSidebarHeader
+};
+//# sourceMappingURL=index.js.map

package/dist/components/right-sidebar/index.js.map

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

package/dist/components/scrollbar/Scrollbar.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../node_modules/simplebar-react/dist/simplebar.min.css');const v=require("react/jsx-runtime"),s=require("react"),m=require("simplebar-react");;/* empty css                                                          */const q=require("./Scrollbar.module.scss.cjs"),S=s.forwardRef(function({children:n,color:l,alwaysVisible:u=!1,className:a,style:i,onScroll:o},e){const r=s.useRef(void 0),d=s.useCallback(t=>{var c;(c=r.current)==null||c.call(r),r.current=void 0,t&&o&&(t.addEventListener("scroll",o),r.current=()=>t.removeEventListener("scroll",o)),typeof e=="function"?e(t):e&&(e.current=t)},[o,e]),f={...i,...l?{"--scrollbar-color":`var(${l})`}:null},b=[q.default.scrollbar,a].filter(Boolean).join(" ");return v.jsx(m,{autoHide:!u,scrollableNodeProps:{ref:d},className:b,style:f,tabIndex:-1,children:n})});exports.default=S;
+//# sourceMappingURL=Scrollbar.cjs.map

package/dist/components/scrollbar/Scrollbar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.cjs","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  type CSSProperties,\n  type ReactNode,\n} from 'react';\nimport SimpleBar from 'simplebar-react';\nimport 'simplebar-react/dist/simplebar.min.css';\nimport styles from './Scrollbar.module.scss';\n\nexport interface ScrollbarProps {\n  /** Scrollable content. */\n  children: ReactNode;\n  /**\n   * CSS variable name (including the leading `--`) for the thumb RGB triplet.\n   * Use this to recolor the thumb in dark surfaces (e.g. `--sidebar-text-rgb`).\n   * When omitted, the thumb uses `--center-channel-color-rgb`.\n   */\n  color?: string;\n  /**\n   * Disable auto-hide; the thumb is visible whenever content overflows.\n   * Default: false (auto-hide).\n   */\n  alwaysVisible?: boolean;\n  /** Class applied to the SimpleBar root. */\n  className?: string;\n  /** Inline style applied to the SimpleBar root. */\n  style?: CSSProperties;\n  /** Scroll handler attached to the inner scrollable element. */\n  onScroll?: (e: Event) => void;\n}\n\n/**\n * Scrollbars let people move through content that exceeds the viewport while showing where\n * they are in the larger whole. Compass uses a single, minimal treatment — a transparent\n * track with a thin, translucent thumb — so the scrollbar reads as a position indicator\n * first and a control second.\n */\nconst Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(\n  { children, color, alwaysVisible = false, className, style, onScroll },\n  ref,\n) {\n  const cleanup = useRef<(() => void) | undefined>(undefined);\n\n  const setScrollNode = useCallback(\n    (el: HTMLDivElement | null) => {\n      cleanup.current?.();\n      cleanup.current = undefined;\n\n      if (el && onScroll) {\n        el.addEventListener('scroll', onScroll);\n        cleanup.current = () => el.removeEventListener('scroll', onScroll);\n      }\n\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n      }\n    },\n    [onScroll, ref],\n  );\n\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...(color\n      ? ({ '--scrollbar-color': `var(${color})` } as CSSProperties)\n      : null),\n  };\n\n  const rootClass = [styles.scrollbar, className].filter(Boolean).join(' ');\n\n  return (\n    <SimpleBar\n      autoHide={!alwaysVisible}\n      scrollableNodeProps={{ ref: setScrollNode }}\n      className={rootClass}\n      style={mergedStyle}\n      tabIndex={-1}\n    >\n      {children}\n    </SimpleBar>\n  );\n});\n\nexport default Scrollbar;\n"],"names":["Scrollbar","forwardRef","children","color","alwaysVisible","className","style","onScroll","ref","cleanup","useRef","setScrollNode","useCallback","el","_a","mergedStyle","rootClass","styles","jsx","SimpleBar"],"mappings":"yTAuCMA,EAAYC,EAAAA,WAA2C,SAC3D,CAAE,SAAAC,EAAU,MAAAC,EAAO,cAAAC,EAAgB,GAAO,UAAAC,EAAW,MAAAC,EAAO,SAAAC,CAAA,EAC5DC,EACA,CACA,MAAMC,EAAUC,EAAAA,OAAiC,MAAS,EAEpDC,EAAgBC,EAAAA,YACnBC,GAA8B,QAC7BC,EAAAL,EAAQ,UAAR,MAAAK,EAAA,KAAAL,GACAA,EAAQ,QAAU,OAEdI,GAAMN,IACRM,EAAG,iBAAiB,SAAUN,CAAQ,EACtCE,EAAQ,QAAU,IAAMI,EAAG,oBAAoB,SAAUN,CAAQ,GAG/D,OAAOC,GAAQ,WACjBA,EAAIK,CAAE,EACGL,IACRA,EAAsD,QAAUK,EAErE,EACA,CAACN,EAAUC,CAAG,CAAA,EAGVO,EAA6B,CACjC,GAAGT,EACH,GAAIH,EACC,CAAE,oBAAqB,OAAOA,CAAK,KACpC,IAAA,EAGAa,EAAY,CAACC,EAAAA,QAAO,UAAWZ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAExE,OACEa,EAAAA,IAACC,EAAA,CACC,SAAU,CAACf,EACX,oBAAqB,CAAE,IAAKO,CAAA,EAC5B,UAAWK,EACX,MAAOD,EACP,SAAU,GAET,SAAAb,CAAA,CAAA,CAGP,CAAC"}

package/dist/components/scrollbar/Scrollbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,wCAAwC,CAAC;AAGhD,MAAM,WAAW,cAAc;IAC7B,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;GAKG;AACH,QAAA,MAAM,SAAS,2GA6Cb,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/components/scrollbar/Scrollbar.js

@@ -0,0 +1,32 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as p, useRef as b, useCallback as v } from "react";
+import y from "simplebar-react";
+import '../../node_modules/simplebar-react/dist/simplebar.min.css';/* empty css                                                        */
+import x from "./Scrollbar.module.scss.js";
+const R = p(function({ children: a, color: s, alwaysVisible: i = !1, className: n, style: c, onScroll: e }, r) {
+  const o = b(void 0), f = v(
+    (t) => {
+      var l;
+      (l = o.current) == null || l.call(o), o.current = void 0, t && e && (t.addEventListener("scroll", e), o.current = () => t.removeEventListener("scroll", e)), typeof r == "function" ? r(t) : r && (r.current = t);
+    },
+    [e, r]
+  ), m = {
+    ...c,
+    ...s ? { "--scrollbar-color": `var(${s})` } : null
+  }, d = [x.scrollbar, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ u(
+    y,
+    {
+      autoHide: !i,
+      scrollableNodeProps: { ref: f },
+      className: d,
+      style: m,
+      tabIndex: -1,
+      children: a
+    }
+  );
+});
+export {
+  R as default
+};
+//# sourceMappingURL=Scrollbar.js.map

package/dist/components/scrollbar/Scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.js","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  type CSSProperties,\n  type ReactNode,\n} from 'react';\nimport SimpleBar from 'simplebar-react';\nimport 'simplebar-react/dist/simplebar.min.css';\nimport styles from './Scrollbar.module.scss';\n\nexport interface ScrollbarProps {\n  /** Scrollable content. */\n  children: ReactNode;\n  /**\n   * CSS variable name (including the leading `--`) for the thumb RGB triplet.\n   * Use this to recolor the thumb in dark surfaces (e.g. `--sidebar-text-rgb`).\n   * When omitted, the thumb uses `--center-channel-color-rgb`.\n   */\n  color?: string;\n  /**\n   * Disable auto-hide; the thumb is visible whenever content overflows.\n   * Default: false (auto-hide).\n   */\n  alwaysVisible?: boolean;\n  /** Class applied to the SimpleBar root. */\n  className?: string;\n  /** Inline style applied to the SimpleBar root. */\n  style?: CSSProperties;\n  /** Scroll handler attached to the inner scrollable element. */\n  onScroll?: (e: Event) => void;\n}\n\n/**\n * Scrollbars let people move through content that exceeds the viewport while showing where\n * they are in the larger whole. Compass uses a single, minimal treatment — a transparent\n * track with a thin, translucent thumb — so the scrollbar reads as a position indicator\n * first and a control second.\n */\nconst Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(\n  { children, color, alwaysVisible = false, className, style, onScroll },\n  ref,\n) {\n  const cleanup = useRef<(() => void) | undefined>(undefined);\n\n  const setScrollNode = useCallback(\n    (el: HTMLDivElement | null) => {\n      cleanup.current?.();\n      cleanup.current = undefined;\n\n      if (el && onScroll) {\n        el.addEventListener('scroll', onScroll);\n        cleanup.current = () => el.removeEventListener('scroll', onScroll);\n      }\n\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n      }\n    },\n    [onScroll, ref],\n  );\n\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...(color\n      ? ({ '--scrollbar-color': `var(${color})` } as CSSProperties)\n      : null),\n  };\n\n  const rootClass = [styles.scrollbar, className].filter(Boolean).join(' ');\n\n  return (\n    <SimpleBar\n      autoHide={!alwaysVisible}\n      scrollableNodeProps={{ ref: setScrollNode }}\n      className={rootClass}\n      style={mergedStyle}\n      tabIndex={-1}\n    >\n      {children}\n    </SimpleBar>\n  );\n});\n\nexport default Scrollbar;\n"],"names":["Scrollbar","forwardRef","children","color","alwaysVisible","className","style","onScroll","ref","cleanup","useRef","setScrollNode","useCallback","el","_a","mergedStyle","rootClass","styles","jsx","SimpleBar"],"mappings":";;;;;AAuCA,MAAMA,IAAYC,EAA2C,SAC3D,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,IAAgB,IAAO,WAAAC,GAAW,OAAAC,GAAO,UAAAC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAUC,EAAiC,MAAS,GAEpDC,IAAgBC;AAAA,IACpB,CAACC,MAA8B;;AAC7B,OAAAC,IAAAL,EAAQ,YAAR,QAAAK,EAAA,KAAAL,IACAA,EAAQ,UAAU,QAEdI,KAAMN,MACRM,EAAG,iBAAiB,UAAUN,CAAQ,GACtCE,EAAQ,UAAU,MAAMI,EAAG,oBAAoB,UAAUN,CAAQ,IAG/D,OAAOC,KAAQ,aACjBA,EAAIK,CAAE,IACGL,MACRA,EAAsD,UAAUK;AAAA,IAErE;AAAA,IACA,CAACN,GAAUC,CAAG;AAAA,EAAA,GAGVO,IAA6B;AAAA,IACjC,GAAGT;AAAA,IACH,GAAIH,IACC,EAAE,qBAAqB,OAAOA,CAAK,QACpC;AAAA,EAAA,GAGAa,IAAY,CAACC,EAAO,WAAWZ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAExE,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAU,CAACf;AAAA,MACX,qBAAqB,EAAE,KAAKO,EAAA;AAAA,MAC5B,WAAWK;AAAA,MACX,OAAOD;AAAA,MACP,UAAU;AAAA,MAET,UAAAb;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/scrollbar/Scrollbar.module.css

@@ -0,0 +1 @@
+._scrollbar_1gcpr_2{width:100%;height:100%;min-height:0}._scrollbar_1gcpr_2 .simplebar-track.simplebar-vertical{width:8px}._scrollbar_1gcpr_2 .simplebar-track.simplebar-horizontal{height:8px}._scrollbar_1gcpr_2 .simplebar-scrollbar:before{left:2px;right:2px;top:2px;bottom:2px;border-radius:3px;background-color:rgba(var(--scrollbar-color, var(--center-channel-color-rgb)),.24);transition:opacity var(--duration-quick) var(--ease-exit),background-color var(--duration-quick) var(--ease-transition)}._scrollbar_1gcpr_2 .simplebar-scrollbar.simplebar-visible:before{opacity:1}._scrollbar_1gcpr_2 .simplebar-track:hover .simplebar-scrollbar:before,._scrollbar_1gcpr_2 .simplebar-scrollbar.simplebar-hover:before{opacity:1;background-color:rgba(var(--scrollbar-color, var(--center-channel-color-rgb)),.4)}._scrollbar_1gcpr_2 .simplebar-track{pointer-events:auto}

package/dist/components/scrollbar/Scrollbar.module.scss.cjs

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

package/dist/components/scrollbar/Scrollbar.module.scss.cjs.map

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

package/dist/components/scrollbar/Scrollbar.module.scss.js

@@ -0,0 +1,8 @@
+import './Scrollbar.module.css';const l = "_scrollbar_1gcpr_2", r = {
+  scrollbar: l
+};
+export {
+  r as default,
+  l as scrollbar
+};
+//# sourceMappingURL=Scrollbar.module.scss.js.map

package/dist/components/scrollbar/Scrollbar.module.scss.js.map

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

package/dist/components/scrollbar/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Scrollbar.cjs");exports.Scrollbar=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/scrollbar/index.cjs.map

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

package/dist/components/scrollbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/scrollbar/index.js

@@ -0,0 +1,5 @@
+import { default as l } from "./Scrollbar.js";
+export {
+  l as Scrollbar
+};
+//# sourceMappingURL=index.js.map

package/dist/components/scrollbar/index.js.map

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

package/dist/components/search-input/SearchInput.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),$=require("../../utils/string.cjs"),g=require("../icon/Icon.cjs"),__B=require("@mattermost/compass-icons/components/magnify.js"),B=__B?.default??__B,__D=require("@mattermost/compass-icons/components/close-circle.js"),D=__D?.default??__D,s=require("./SearchInput.module.scss.cjs"),G={small:"12",medium:"16",large:"20"},H=a.forwardRef(function({className:q="",size:p="medium",label:o,onClear:d,id:y,value:f,defaultValue:I,placeholder:C,onFocus:n,onBlur:r,onChange:l,disabled:i,...k},u){const R=a.useId(),_=y??R,h=a.useRef(null),c=f!==void 0,[z,m]=a.useState(I??""),j=c?f:z,x=j!=null&&j!=="",[M,b]=a.useState(!1),w=M||x,T=a.useCallback(e=>{b(!0),n==null||n(e)},[n]),V=a.useCallback(e=>{b(!1),r==null||r(e)},[r]),F=a.useCallback(e=>{c||m(e.target.value),l==null||l(e)},[c,l]),O=a.useCallback(e=>{h.current=e,typeof u=="function"?u(e):u&&(u.current=e)},[u]),A=a.useCallback(()=>{var S;if(i)return;if(d){d(),(S=h.current)==null||S.focus();return}const e=h.current;e!=null&&(e.value="",c||m(""),l==null||l({target:e,currentTarget:e}),e.focus())},[i,c,l,d]),v=x&&!i,E=s.default[`searchInput--size-${$.toKebab(p)}`],K=o!=null&&w?s.default["searchInput--label-floated"]:"",L=s.default["searchInput--has-leading-icon"],U=v?s.default["searchInput--has-trailing-icon"]:"",N=G[p],Z=[s.default.searchInput,E,K,L,U,q].filter(Boolean).join(" ");return t.jsx("div",{className:Z,children:t.jsxs("div",{className:s.default.searchInput__wrapper,children:[o!=null&&t.jsx("label",{className:s.default.searchInput__label,htmlFor:_,children:o}),t.jsxs("div",{className:s.default.searchInput__inner,children:[t.jsx("span",{className:s.default.searchInput__leadingIcon,"aria-hidden":!0,children:t.jsx(g.default,{size:N,glyph:t.jsx(B,{})})}),t.jsx("input",{ref:O,id:_,type:"search",className:s.default.searchInput__input,value:c?f:void 0,defaultValue:c?void 0:I,placeholder:C,disabled:i,onFocus:T,onBlur:V,onChange:F,...k}),v&&t.jsx("span",{className:s.default.searchInput__trailingIcon,children:t.jsx("button",{type:"button",className:s.default.searchInput__clearButton,onClick:A,"aria-label":"Clear search",tabIndex:-1,children:t.jsx(g.default,{size:N,glyph:t.jsx(D,{})})})})]})]})})});exports.default=H;
+//# sourceMappingURL=SearchInput.cjs.map

package/dist/components/search-input/SearchInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.cjs","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\nimport {\n  forwardRef,\n  useId,\n  useState,\n  useCallback,\n  useRef,\n} from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nexport interface SearchInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Floating label (placeholder-style). Floats above border when filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: SearchInputSize;\n  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n}\n\n/**\n * Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      onClear,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const handleClear = useCallback(() => {\n      if (disabled) 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?.({\n        target: input,\n        currentTarget: input,\n      } as ChangeEvent<HTMLInputElement>);\n\n      input.focus();\n    }, [disabled, isControlled, onChange, onClear]);\n\n    const showClearButton = hasValue && !disabled;\n\n    const sizeClass = styles[`searchInput--size-${toKebab(size)}`];\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['searchInput--label-floated'] : '';\n    const hasLeadingClass = styles['searchInput--has-leading-icon'];\n    const hasTrailingClass = showClearButton\n      ? styles['searchInput--has-trailing-icon']\n      : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles.searchInput,\n      sizeClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div className={rootClass}>\n        <div className={styles.searchInput__wrapper}>\n          {label != null && (\n            <label className={styles.searchInput__label} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles.searchInput__inner}>\n            <span className={styles.searchInput__leadingIcon} aria-hidden>\n              <Icon size={iconSize} glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              ref={setInputRef}\n              id={id}\n              type=\"search\"\n              className={styles.searchInput__input}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles.searchInput__trailingIcon}>\n                <button\n                  type=\"button\"\n                  className={styles.searchInput__clearButton}\n                  onClick={handleClear}\n                  aria-label=\"Clear search\"\n                  tabIndex={-1}\n                >\n                  <Icon size={iconSize} glyph={<CloseCircleIcon />} />\n                </button>\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","onClear","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","handleBlur","handleChange","setInputRef","node","handleClear","_a","input","showClearButton","sizeClass","styles","toKebab","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","rootClass","jsx","jsxs","Icon","MagnifyIcon","CloseCircleIcon"],"mappings":"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"}

package/dist/components/search-input/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAezE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAQ3D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;GAIG;AACH,QAAA,MAAM,WAAW,+GA4JhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/search-input/SearchInput.js

@@ -0,0 +1,109 @@
+import { jsx as s, jsxs as x } from "react/jsx-runtime";
+import { forwardRef as D, useId as G, useRef as H, useState as z, useCallback as n } from "react";
+import { toKebab as J } from "../../utils/string.js";
+import R from "../icon/Icon.js";
+import __Q from "@mattermost/compass-icons/components/magnify.js";const Q=__Q&&__Q.default?__Q.default:__Q;
+import __W from "@mattermost/compass-icons/components/close-circle.js";const W=__W&&__W.default?__W.default:__W;
+import e from "./SearchInput.module.scss.js";
+const X = {
+  small: "12",
+  medium: "16",
+  large: "20"
+}, nt = D(
+  function({
+    className: j = "",
+    size: m = "medium",
+    label: u,
+    onClear: p,
+    id: w,
+    value: d,
+    defaultValue: f,
+    placeholder: C,
+    onFocus: r,
+    onBlur: i,
+    onChange: a,
+    disabled: o,
+    ...V
+  }, l) {
+    const k = G(), I = w ?? k, h = H(null), c = d !== void 0, [F, _] = z(
+      f ?? ""
+    ), v = c ? d : F, N = v != null && v !== "", [M, b] = z(!1), T = M || N, A = n(
+      (t) => {
+        b(!0), r == null || r(t);
+      },
+      [r]
+    ), E = n(
+      (t) => {
+        b(!1), i == null || i(t);
+      },
+      [i]
+    ), K = n(
+      (t) => {
+        c || _(t.target.value), a == null || a(t);
+      },
+      [c, a]
+    ), L = n(
+      (t) => {
+        h.current = t, typeof l == "function" ? l(t) : l && (l.current = t);
+      },
+      [l]
+    ), O = n(() => {
+      var S;
+      if (o) return;
+      if (p) {
+        p(), (S = h.current) == null || S.focus();
+        return;
+      }
+      const t = h.current;
+      t != null && (t.value = "", c || _(""), a == null || a({
+        target: t,
+        currentTarget: t
+      }), t.focus());
+    }, [o, c, a, p]), y = N && !o, U = e[`searchInput--size-${J(m)}`], Z = u != null && T ? e["searchInput--label-floated"] : "", $ = e["searchInput--has-leading-icon"], q = y ? e["searchInput--has-trailing-icon"] : "", g = X[m], B = [
+      e.searchInput,
+      U,
+      Z,
+      $,
+      q,
+      j
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s("div", { className: B, children: /* @__PURE__ */ x("div", { className: e.searchInput__wrapper, children: [
+      u != null && /* @__PURE__ */ s("label", { className: e.searchInput__label, htmlFor: I, children: u }),
+      /* @__PURE__ */ x("div", { className: e.searchInput__inner, children: [
+        /* @__PURE__ */ s("span", { className: e.searchInput__leadingIcon, "aria-hidden": !0, children: /* @__PURE__ */ s(R, { size: g, glyph: /* @__PURE__ */ s(Q, {}) }) }),
+        /* @__PURE__ */ s(
+          "input",
+          {
+            ref: L,
+            id: I,
+            type: "search",
+            className: e.searchInput__input,
+            value: c ? d : void 0,
+            defaultValue: c ? void 0 : f,
+            placeholder: C,
+            disabled: o,
+            onFocus: A,
+            onBlur: E,
+            onChange: K,
+            ...V
+          }
+        ),
+        y && /* @__PURE__ */ s("span", { className: e.searchInput__trailingIcon, children: /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: e.searchInput__clearButton,
+            onClick: O,
+            "aria-label": "Clear search",
+            tabIndex: -1,
+            children: /* @__PURE__ */ s(R, { size: g, glyph: /* @__PURE__ */ s(W, {}) })
+          }
+        ) })
+      ] })
+    ] }) });
+  }
+);
+export {
+  nt as default
+};
+//# sourceMappingURL=SearchInput.js.map

package/dist/components/search-input/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\nimport {\n  forwardRef,\n  useId,\n  useState,\n  useCallback,\n  useRef,\n} from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nexport interface SearchInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Floating label (placeholder-style). Floats above border when filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: SearchInputSize;\n  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n}\n\n/**\n * Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      onClear,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const handleClear = useCallback(() => {\n      if (disabled) 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?.({\n        target: input,\n        currentTarget: input,\n      } as ChangeEvent<HTMLInputElement>);\n\n      input.focus();\n    }, [disabled, isControlled, onChange, onClear]);\n\n    const showClearButton = hasValue && !disabled;\n\n    const sizeClass = styles[`searchInput--size-${toKebab(size)}`];\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['searchInput--label-floated'] : '';\n    const hasLeadingClass = styles['searchInput--has-leading-icon'];\n    const hasTrailingClass = showClearButton\n      ? styles['searchInput--has-trailing-icon']\n      : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles.searchInput,\n      sizeClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div className={rootClass}>\n        <div className={styles.searchInput__wrapper}>\n          {label != null && (\n            <label className={styles.searchInput__label} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles.searchInput__inner}>\n            <span className={styles.searchInput__leadingIcon} aria-hidden>\n              <Icon size={iconSize} glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              ref={setInputRef}\n              id={id}\n              type=\"search\"\n              className={styles.searchInput__input}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles.searchInput__trailingIcon}>\n                <button\n                  type=\"button\"\n                  className={styles.searchInput__clearButton}\n                  onClick={handleClear}\n                  aria-label=\"Clear search\"\n                  tabIndex={-1}\n                >\n                  <Icon size={iconSize} glyph={<CloseCircleIcon />} />\n                </button>\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","onClear","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","handleClear","_a","input","showClearButton","sizeClass","styles","toKebab","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","rootClass","jsx","jsxs","Icon","MagnifyIcon","CloseCircleIcon"],"mappings":"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"}

package/dist/components/search-input/SearchInput.module.css

@@ -0,0 +1 @@
+._searchInput_1wqgu_2{display:flex;flex-direction:column;width:100%}._searchInput__wrapper_1wqgu_7{position:relative;display:flex;flex-direction:column;min-height:0;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition)}._searchInput_1wqgu_2:has(._searchInput__input_1wqgu_17:not(:disabled)):hover:not(:focus-within) ._searchInput__wrapper_1wqgu_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._searchInput_1wqgu_2:has(._searchInput__input_1wqgu_17:focus-visible) ._searchInput__wrapper_1wqgu_7{box-shadow:inset 0 0 0 1px var(--button-bg),0 0 0 1px var(--button-bg)}._searchInput_1wqgu_2:has(._searchInput__input_1wqgu_17:disabled) ._searchInput__wrapper_1wqgu_7{background-color:var(--center-channel-bg);opacity:.56}._searchInput__label_1wqgu_27{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition)}._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._searchInput__inner_1wqgu_54{display:flex;align-items:center;flex:1;min-width:0}._searchInput__input_1wqgu_17{flex:1 1 0;min-width:0;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._searchInput__input_1wqgu_17::-webkit-search-decoration,._searchInput__input_1wqgu_17::-webkit-search-cancel-button{-webkit-appearance:none}._searchInput__input_1wqgu_17:focus{outline:none}._searchInput__input_1wqgu_17::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._searchInput__input_1wqgu_17:disabled{cursor:not-allowed}._searchInput__leadingIcon_1wqgu_85,._searchInput__trailingIcon_1wqgu_85{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._searchInput__leadingIcon_1wqgu_85{margin-right:var(--spacing-xs);pointer-events:none}._searchInput__trailingIcon_1wqgu_85{margin-left:var(--spacing-xs)}._searchInput__clearButton_1wqgu_99{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;cursor:pointer;color:inherit;transition:color var(--duration-quick) var(--ease-transition)}._searchInput__clearButton_1wqgu_99:hover{color:var(--center-channel-color)}._searchInput--size-small_1wqgu_114 ._searchInput__wrapper_1wqgu_7{min-height:32px}._searchInput--size-small_1wqgu_114 ._searchInput__inner_1wqgu_54{padding:var(--spacing-xs) var(--spacing-m)}._searchInput--size-small_1wqgu_114 ._searchInput__input_1wqgu_17{font-size:var(--font-size-75);line-height:var(--line-height-25)}._searchInput--size-small_1wqgu_114._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._searchInput--size-medium_1wqgu_130 ._searchInput__wrapper_1wqgu_7{min-height:40px}._searchInput--size-medium_1wqgu_130 ._searchInput__inner_1wqgu_54{padding:var(--spacing-s) var(--spacing-l)}._searchInput--size-medium_1wqgu_130 ._searchInput__input_1wqgu_17{font-size:var(--font-size-100);line-height:var(--line-height-100)}._searchInput--size-medium_1wqgu_130 ._searchInput__label_1wqgu_27{font-size:var(--font-size-100);left:var(--spacing-m)}._searchInput--size-medium_1wqgu_130._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._searchInput--size-large_1wqgu_150 ._searchInput__wrapper_1wqgu_7{min-height:48px}._searchInput--size-large_1wqgu_150 ._searchInput__inner_1wqgu_54{padding:var(--spacing-m) var(--spacing-l)}._searchInput--size-large_1wqgu_150 ._searchInput__input_1wqgu_17{font-size:var(--font-size-200);line-height:var(--line-height-200)}._searchInput--size-large_1wqgu_150 ._searchInput__label_1wqgu_27{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._searchInput--size-large_1wqgu_150._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._searchInput--has-leading-icon_1wqgu_171 ._searchInput__label_1wqgu_27{left:var(--spacing-xxxl)}._searchInput--has-leading-icon_1wqgu_171._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{left:var(--spacing-xs)}._searchInput--has-leading-icon_1wqgu_171._searchInput--size-medium_1wqgu_130 ._searchInput__label_1wqgu_27,._searchInput--has-leading-icon_1wqgu_171._searchInput--size-large_1wqgu_150 ._searchInput__label_1wqgu_27{left:36px}._searchInput--has-leading-icon_1wqgu_171._searchInput--size-medium_1wqgu_130._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27,._searchInput--has-leading-icon_1wqgu_171._searchInput--size-large_1wqgu_150._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{left:var(--spacing-m)}._searchInput_1wqgu_2:has(._searchInput__input_1wqgu_17:focus-visible) ._searchInput__label_1wqgu_27{color:var(--button-bg)}._searchInput_1wqgu_2:has(._searchInput__label_1wqgu_27):not(._searchInput--label-floated_1wqgu_47) ._searchInput__input_1wqgu_17::placeholder{color:transparent}

package/dist/components/search-input/SearchInput.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SearchInput.module.css');const _="_searchInput_1wqgu_2",e="_searchInput__wrapper_1wqgu_7",n="_searchInput__input_1wqgu_17",a="_searchInput__label_1wqgu_27",t="_searchInput__inner_1wqgu_54",u="_searchInput__leadingIcon_1wqgu_85",r="_searchInput__trailingIcon_1wqgu_85",c="_searchInput__clearButton_1wqgu_99",s={searchInput:_,searchInput__wrapper:e,searchInput__input:n,searchInput__label:a,"searchInput--label-floated":"_searchInput--label-floated_1wqgu_47",searchInput__inner:t,searchInput__leadingIcon:u,searchInput__trailingIcon:r,searchInput__clearButton:c,"searchInput--size-small":"_searchInput--size-small_1wqgu_114","searchInput--size-medium":"_searchInput--size-medium_1wqgu_130","searchInput--size-large":"_searchInput--size-large_1wqgu_150","searchInput--has-leading-icon":"_searchInput--has-leading-icon_1wqgu_171"};exports.default=s;exports.searchInput=_;exports.searchInput__clearButton=c;exports.searchInput__inner=t;exports.searchInput__input=n;exports.searchInput__label=a;exports.searchInput__leadingIcon=u;exports.searchInput__trailingIcon=r;exports.searchInput__wrapper=e;
+//# sourceMappingURL=SearchInput.module.scss.cjs.map

package/dist/components/search-input/SearchInput.module.scss.cjs.map

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

package/dist/components/search-input/SearchInput.module.scss.js

@@ -0,0 +1,27 @@
+import './SearchInput.module.css';const _ = "_searchInput_1wqgu_2", n = "_searchInput__wrapper_1wqgu_7", e = "_searchInput__input_1wqgu_17", a = "_searchInput__label_1wqgu_27", t = "_searchInput__inner_1wqgu_54", s = "_searchInput__leadingIcon_1wqgu_85", u = "_searchInput__trailingIcon_1wqgu_85", c = "_searchInput__clearButton_1wqgu_99", r = {
+  searchInput: _,
+  searchInput__wrapper: n,
+  searchInput__input: e,
+  searchInput__label: a,
+  "searchInput--label-floated": "_searchInput--label-floated_1wqgu_47",
+  searchInput__inner: t,
+  searchInput__leadingIcon: s,
+  searchInput__trailingIcon: u,
+  searchInput__clearButton: c,
+  "searchInput--size-small": "_searchInput--size-small_1wqgu_114",
+  "searchInput--size-medium": "_searchInput--size-medium_1wqgu_130",
+  "searchInput--size-large": "_searchInput--size-large_1wqgu_150",
+  "searchInput--has-leading-icon": "_searchInput--has-leading-icon_1wqgu_171"
+};
+export {
+  r as default,
+  _ as searchInput,
+  c as searchInput__clearButton,
+  t as searchInput__inner,
+  e as searchInput__input,
+  a as searchInput__label,
+  s as searchInput__leadingIcon,
+  u as searchInput__trailingIcon,
+  n as searchInput__wrapper
+};
+//# sourceMappingURL=SearchInput.module.scss.js.map

package/dist/components/search-input/SearchInput.module.scss.js.map

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

package/dist/components/search-input/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SearchInput.cjs");exports.SearchInput=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/search-input/index.cjs.map

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

package/dist/components/search-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/search-input/index.js

@@ -0,0 +1,5 @@
+import { default as r } from "./SearchInput.js";
+export {
+  r as SearchInput
+};
+//# sourceMappingURL=index.js.map

package/dist/components/search-input/index.js.map

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

package/dist/components/search-tip-banner/SearchTipBanner.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("../icon-button/IconButton.cjs"),o=require("../icon/Icon.cjs"),d=require("../shortcut-tag/ShortcutTag.cjs"),__h=require("@mattermost/compass-icons/components/close.js"),h=__h?.default??__h,a=require("./SearchTipBanner.module.scss.cjs");function p({prefix:l="Tip: Try",suffix:n="to search this channel",shortcutKeys:r=[{label:"⌘"},{label:"Shift"},{label:"F"}],onDismiss:t,className:s="",children:i}){return e.jsxs("div",{className:[a.default["search-tip-banner"],s].filter(Boolean).join(" "),children:[e.jsx("div",{className:a.default["search-tip-banner__content"],children:i??e.jsxs(e.Fragment,{children:[e.jsx("span",{className:a.default["search-tip-banner__text"],children:l}),e.jsx(d.ShortcutTagGroup,{labels:r.map(c=>c.label),size:"medium"}),e.jsx("span",{className:a.default["search-tip-banner__text"],children:n})]})}),t!=null&&e.jsx(u.default,{"aria-label":"Dismiss tip",size:"small",icon:e.jsx(o.default,{size:"16",glyph:e.jsx(h,{})}),onClick:t})]})}exports.default=p;
+//# sourceMappingURL=SearchTipBanner.cjs.map

package/dist/components/search-tip-banner/SearchTipBanner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchTipBanner.cjs","sources":["../../../src/components/search-tip-banner/SearchTipBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { ShortcutTagGroup } from '@/components/shortcut-tag/ShortcutTag';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './SearchTipBanner.module.scss';\n\nexport interface ShortcutKey {\n  label: string;\n}\n\nexport interface SearchTipBannerProps {\n  /** Text shown before the shortcut keys. Default: \"Tip: Try\". */\n  prefix?: string;\n  /** Text shown after the shortcut keys. Default: \"to search this channel\". */\n  suffix?: string;\n  /** Keyboard shortcut keys to display. */\n  shortcutKeys?: ShortcutKey[];\n  /** Called when the dismiss button is clicked. */\n  onDismiss?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Custom content to replace the default tip content. */\n  children?: ReactNode;\n}\n\n/**\n * The Search Tip Banner nudges people toward the keyboard shortcut for in-channel search. It\n * appears once a user has scrolled up far enough that they're clearly looking for something,\n * and offers a faster path than scroll-and-skim.\n */\nexport default function SearchTipBanner({\n  prefix = 'Tip: Try',\n  suffix = 'to search this channel',\n  shortcutKeys = [{ label: '⌘' }, { label: 'Shift' }, { label: 'F' }],\n  onDismiss,\n  className = '',\n  children,\n}: SearchTipBannerProps) {\n  return (\n    <div\n      className={[styles['search-tip-banner'], className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['search-tip-banner__content']}>\n        {children ?? (\n          <>\n            <span className={styles['search-tip-banner__text']}>{prefix}</span>\n            <ShortcutTagGroup\n              labels={shortcutKeys.map((key) => key.label)}\n              size=\"medium\"\n            />\n            <span className={styles['search-tip-banner__text']}>{suffix}</span>\n          </>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          aria-label=\"Dismiss tip\"\n          size=\"small\"\n          icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["SearchTipBanner","prefix","suffix","shortcutKeys","onDismiss","className","children","jsxs","styles","jsx","Fragment","ShortcutTagGroup","key","IconButton","Icon","CloseIcon"],"mappings":"4WA+BA,SAAwBA,EAAgB,CACtC,OAAAC,EAAS,WACT,OAAAC,EAAS,yBACT,aAAAC,EAAe,CAAC,CAAE,MAAO,KAAO,CAAE,MAAO,SAAW,CAAE,MAAO,IAAK,EAClE,UAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,CACF,EAAyB,CACvB,OACEC,EAAAA,KAAC,MAAA,CACC,UAAW,CAACC,UAAO,mBAAmB,EAAGH,CAAS,EAC/C,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAA,CAAAI,EAAAA,IAAC,OAAI,UAAWD,EAAAA,QAAO,4BAA4B,EAChD,YACCD,EAAAA,KAAAG,EAAAA,SAAA,CACE,SAAA,CAAAD,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,yBAAyB,EAAI,SAAAP,EAAO,EAC5DQ,EAAAA,IAACE,EAAAA,iBAAA,CACC,OAAQR,EAAa,IAAKS,GAAQA,EAAI,KAAK,EAC3C,KAAK,QAAA,CAAA,QAEN,OAAA,CAAK,UAAWJ,EAAAA,QAAO,yBAAyB,EAAI,SAAAN,CAAA,CAAO,CAAA,CAAA,CAC9D,CAAA,CAEJ,EACCE,GAAa,MACZK,EAAAA,IAACI,EAAAA,QAAA,CACC,aAAW,cACX,KAAK,QACL,WAAOC,UAAA,CAAK,KAAK,KAAK,MAAOL,MAACM,IAAU,EAAI,EAC5C,QAASX,CAAA,CAAA,CACX,CAAA,CAAA,CAIR"}

package/dist/components/search-tip-banner/SearchTipBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchTipBanner.d.ts","sourceRoot":"","sources":["../../../src/components/search-tip-banner/SearchTipBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,MAAmB,EACnB,MAAiC,EACjC,YAAmE,EACnE,SAAS,EACT,SAAc,EACd,QAAQ,GACT,EAAE,oBAAoB,2CA6BtB"}

package/dist/components/search-tip-banner/SearchTipBanner.js

@@ -0,0 +1,47 @@
+import { jsxs as l, jsx as e, Fragment as m } from "react/jsx-runtime";
+import p from "../icon-button/IconButton.js";
+import h from "../icon/Icon.js";
+import { ShortcutTagGroup as b } from "../shortcut-tag/ShortcutTag.js";
+import __f from "@mattermost/compass-icons/components/close.js";const f=__f&&__f.default?__f.default:__f;
+import a from "./SearchTipBanner.module.scss.js";
+function g({
+  prefix: n = "Tip: Try",
+  suffix: i = "to search this channel",
+  shortcutKeys: t = [{ label: "⌘" }, { label: "Shift" }, { label: "F" }],
+  onDismiss: r,
+  className: s = "",
+  children: o
+}) {
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: [a["search-tip-banner"], s].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ e("div", { className: a["search-tip-banner__content"], children: o ?? /* @__PURE__ */ l(m, { children: [
+          /* @__PURE__ */ e("span", { className: a["search-tip-banner__text"], children: n }),
+          /* @__PURE__ */ e(
+            b,
+            {
+              labels: t.map((c) => c.label),
+              size: "medium"
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: a["search-tip-banner__text"], children: i })
+        ] }) }),
+        r != null && /* @__PURE__ */ e(
+          p,
+          {
+            "aria-label": "Dismiss tip",
+            size: "small",
+            icon: /* @__PURE__ */ e(h, { size: "16", glyph: /* @__PURE__ */ e(f, {}) }),
+            onClick: r
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  g as default
+};
+//# sourceMappingURL=SearchTipBanner.js.map

package/dist/components/search-tip-banner/SearchTipBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchTipBanner.js","sources":["../../../src/components/search-tip-banner/SearchTipBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { ShortcutTagGroup } from '@/components/shortcut-tag/ShortcutTag';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './SearchTipBanner.module.scss';\n\nexport interface ShortcutKey {\n  label: string;\n}\n\nexport interface SearchTipBannerProps {\n  /** Text shown before the shortcut keys. Default: \"Tip: Try\". */\n  prefix?: string;\n  /** Text shown after the shortcut keys. Default: \"to search this channel\". */\n  suffix?: string;\n  /** Keyboard shortcut keys to display. */\n  shortcutKeys?: ShortcutKey[];\n  /** Called when the dismiss button is clicked. */\n  onDismiss?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Custom content to replace the default tip content. */\n  children?: ReactNode;\n}\n\n/**\n * The Search Tip Banner nudges people toward the keyboard shortcut for in-channel search. It\n * appears once a user has scrolled up far enough that they're clearly looking for something,\n * and offers a faster path than scroll-and-skim.\n */\nexport default function SearchTipBanner({\n  prefix = 'Tip: Try',\n  suffix = 'to search this channel',\n  shortcutKeys = [{ label: '⌘' }, { label: 'Shift' }, { label: 'F' }],\n  onDismiss,\n  className = '',\n  children,\n}: SearchTipBannerProps) {\n  return (\n    <div\n      className={[styles['search-tip-banner'], className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={styles['search-tip-banner__content']}>\n        {children ?? (\n          <>\n            <span className={styles['search-tip-banner__text']}>{prefix}</span>\n            <ShortcutTagGroup\n              labels={shortcutKeys.map((key) => key.label)}\n              size=\"medium\"\n            />\n            <span className={styles['search-tip-banner__text']}>{suffix}</span>\n          </>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          aria-label=\"Dismiss tip\"\n          size=\"small\"\n          icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["SearchTipBanner","prefix","suffix","shortcutKeys","onDismiss","className","children","jsxs","styles","jsx","Fragment","ShortcutTagGroup","key","IconButton","Icon","CloseIcon"],"mappings":";;;;;;AA+BA,SAAwBA,EAAgB;AAAA,EACtC,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe,CAAC,EAAE,OAAO,OAAO,EAAE,OAAO,WAAW,EAAE,OAAO,KAAK;AAAA,EAClE,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AACF,GAAyB;AACvB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACC,EAAO,mBAAmB,GAAGH,CAAS,EAC/C,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAI,EAAC,SAAI,WAAWD,EAAO,4BAA4B,GAChD,eACC,gBAAAD,EAAAG,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAD,EAAC,QAAA,EAAK,WAAWD,EAAO,yBAAyB,GAAI,UAAAP,GAAO;AAAA,UAC5D,gBAAAQ;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,QAAQR,EAAa,IAAI,CAACS,MAAQA,EAAI,KAAK;AAAA,cAC3C,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,4BAEN,QAAA,EAAK,WAAWJ,EAAO,yBAAyB,GAAI,UAAAN,EAAA,CAAO;AAAA,QAAA,EAAA,CAC9D,EAAA,CAEJ;AAAA,QACCE,KAAa,QACZ,gBAAAK;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,cAAW;AAAA,YACX,MAAK;AAAA,YACL,wBAAOC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAL,EAACM,KAAU,GAAI;AAAA,YAC5C,SAASX;AAAA,UAAA;AAAA,QAAA;AAAA,MACX;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/search-tip-banner/SearchTipBanner.module.css

@@ -0,0 +1 @@
+._search-tip-banner_slriu_2{display:inline-flex;align-items:center;justify-content:flex-start;width:fit-content;max-width:100%;gap:var(--spacing-l);padding:var(--spacing-xxxs) var(--spacing-xxxs) var(--spacing-xxxs) var(--spacing-m);background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);box-shadow:var(--elevation-2)}._search-tip-banner__content_slriu_15{display:inline-flex;align-items:center;gap:var(--spacing-s);height:24px;overflow:hidden}._search-tip-banner__text_slriu_22{font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--center-channel-color);white-space:nowrap}

package/dist/components/search-tip-banner/SearchTipBanner.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SearchTipBanner.module.css');const e={"search-tip-banner":"_search-tip-banner_slriu_2","search-tip-banner__content":"_search-tip-banner__content_slriu_15","search-tip-banner__text":"_search-tip-banner__text_slriu_22"};exports.default=e;
+//# sourceMappingURL=SearchTipBanner.module.scss.cjs.map

package/dist/components/search-tip-banner/SearchTipBanner.module.scss.cjs.map

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

package/dist/components/search-tip-banner/SearchTipBanner.module.scss.js

@@ -0,0 +1,9 @@
+import './SearchTipBanner.module.css';const e = {
+  "search-tip-banner": "_search-tip-banner_slriu_2",
+  "search-tip-banner__content": "_search-tip-banner__content_slriu_15",
+  "search-tip-banner__text": "_search-tip-banner__text_slriu_22"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=SearchTipBanner.module.scss.js.map

package/dist/components/search-tip-banner/SearchTipBanner.module.scss.js.map

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

package/dist/components/search-tip-banner/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SearchTipBanner.cjs");exports.SearchTipBanner=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/search-tip-banner/index.cjs.map

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

package/dist/components/search-tip-banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search-tip-banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/search-tip-banner/index.js

@@ -0,0 +1,5 @@
+import { default as r } from "./SearchTipBanner.js";
+export {
+  r as SearchTipBanner
+};
+//# sourceMappingURL=index.js.map

package/dist/components/search-tip-banner/index.js.map

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

package/dist/components/section-notice/SectionNotice.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("../button/Button.cjs"),C=require("../icon-button/IconButton.cjs"),i=require("../icon/Icon.cjs"),__d=require("@mattermost/compass-icons/components/information-outline.js"),d=__d?.default??__d,__N=require("@mattermost/compass-icons/components/alert-outline.js"),N=__N?.default??__N,__g=require("@mattermost/compass-icons/components/alert-circle-outline.js"),g=__g?.default??__g,__q=require("@mattermost/compass-icons/components/check-circle-outline.js"),q=__q?.default??__q,__I=require("@mattermost/compass-icons/components/close.js"),I=__I?.default??__I,s=require("./SectionNotice.module.scss.cjs"),v={info:e.jsx(i.default,{size:"20",glyph:e.jsx(d,{})}),warning:e.jsx(i.default,{size:"20",glyph:e.jsx(g,{})}),danger:e.jsx(i.default,{size:"20",glyph:e.jsx(N,{})}),success:e.jsx(i.default,{size:"20",glyph:e.jsx(q,{})}),hint:e.jsx(i.default,{size:"20",glyph:e.jsx(d,{})})};function z({className:f="",type:t="info",icon:c,title:j,description:o,primaryButtonLabel:n,onPrimaryAction:x,secondaryButtonLabel:l,onSecondaryAction:h,onDismiss:a}){const _=s.default[`section-notice--type-${t.toLowerCase()}`],m=[s.default["section-notice"],_,f].filter(Boolean).join(" "),u=c!==void 0?c:v[t],p=n!=null||l!=null;return e.jsxs("div",{className:m,children:[e.jsxs("div",{className:s.default["section-notice__content"],children:[u!=null&&e.jsx("span",{className:s.default["section-notice__icon"],"aria-hidden":!0,children:u}),e.jsxs("div",{className:s.default["section-notice__body"],children:[e.jsx("p",{className:s.default["section-notice__title"],children:j}),o!=null&&e.jsx("div",{className:s.default["section-notice__description"],children:o}),p&&e.jsxs("div",{className:s.default["section-notice__actions"],children:[n!=null&&e.jsx(r.default,{emphasis:"primary",size:"small",onClick:x,children:n}),l!=null&&e.jsx(r.default,{emphasis:"secondary",size:"small",onClick:h,children:l})]})]})]}),a!=null&&e.jsx(C.default,{className:s.default["section-notice__dismiss"],"aria-label":"Dismiss",size:"small",icon:e.jsx(i.default,{size:"16",glyph:e.jsx(I,{})}),onClick:a})]})}exports.default=z;
+//# sourceMappingURL=SectionNotice.cjs.map

package/dist/components/section-notice/SectionNotice.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNotice.cjs","sources":["../../../src/components/section-notice/SectionNotice.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 InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './SectionNotice.module.scss';\n\nexport type SectionNoticeType =\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'success'\n  | 'hint';\n\nexport interface SectionNoticeProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Type controls color-coding. Default: Info. */\n  type?: SectionNoticeType;\n  /** Optional leading icon. When omitted a default type icon is shown. */\n  icon?: ReactNode;\n  /** Title / headline text. */\n  title: string;\n  /** Optional body description. */\n  description?: ReactNode;\n  /** Primary action button label. */\n  primaryButtonLabel?: string;\n  /** Primary action callback. */\n  onPrimaryAction?: () => void;\n  /** Secondary action button label. */\n  secondaryButtonLabel?: string;\n  /** Secondary action callback. */\n  onSecondaryAction?: () => void;\n  /** Called when dismiss (×) button is clicked. When omitted, dismiss button is hidden. */\n  onDismiss?: () => void;\n}\n\nconst DEFAULT_ICONS: Record<SectionNoticeType, ReactNode> = {\n  info: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n  warning: <Icon size=\"20\" glyph={<AlertCircleOutlineIcon />} />,\n  danger: <Icon size=\"20\" glyph={<AlertOutlineIcon />} />,\n  success: <Icon size=\"20\" glyph={<CheckCircleOutlineIcon />} />,\n  hint: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n};\n\n/**\n * A Section Notice is an in-context alert that lives inside a settings page, admin panel, or\n * other content region. Use it to flag important information, report a state change, or\n * surface a problem the user needs to act on — without yanking them out of the flow.\n */\nexport default function SectionNotice({\n  className = '',\n  type = 'info',\n  icon,\n  title,\n  description,\n  primaryButtonLabel,\n  onPrimaryAction,\n  secondaryButtonLabel,\n  onSecondaryAction,\n  onDismiss,\n}: SectionNoticeProps) {\n  const typeClass = styles[`section-notice--type-${type.toLowerCase()}`];\n\n  const rootClass = [styles['section-notice'], typeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const resolvedIcon = icon !== undefined ? icon : DEFAULT_ICONS[type];\n\n  const hasActions = primaryButtonLabel != null || secondaryButtonLabel != null;\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['section-notice__content']}>\n        {resolvedIcon != null && (\n          <span className={styles['section-notice__icon']} aria-hidden>\n            {resolvedIcon}\n          </span>\n        )}\n        <div className={styles['section-notice__body']}>\n          <p className={styles['section-notice__title']}>{title}</p>\n          {description != null && (\n            <div className={styles['section-notice__description']}>\n              {description}\n            </div>\n          )}\n          {hasActions && (\n            <div className={styles['section-notice__actions']}>\n              {primaryButtonLabel != null && (\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  onClick={onPrimaryAction}\n                >\n                  {primaryButtonLabel}\n                </Button>\n              )}\n              {secondaryButtonLabel != null && (\n                <Button\n                  emphasis=\"secondary\"\n                  size=\"small\"\n                  onClick={onSecondaryAction}\n                >\n                  {secondaryButtonLabel}\n                </Button>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          className={styles['section-notice__dismiss']}\n          aria-label=\"Dismiss\"\n          size=\"small\"\n          icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_ICONS","Icon","jsx","InformationOutlineIcon","AlertCircleOutlineIcon","AlertOutlineIcon","CheckCircleOutlineIcon","SectionNotice","className","type","icon","title","description","primaryButtonLabel","onPrimaryAction","secondaryButtonLabel","onSecondaryAction","onDismiss","typeClass","styles","rootClass","resolvedIcon","hasActions","jsxs","Button","IconButton","CloseIcon"],"mappings":"onBAyCMA,EAAsD,CAC1D,WAAOC,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACC,IAAuB,EAAI,EACzD,cAAUF,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACE,IAAuB,EAAI,EAC5D,aAASH,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACG,IAAiB,EAAI,EACrD,cAAUJ,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACI,IAAuB,EAAI,EAC5D,WAAOL,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOC,EAAAA,IAACC,IAAuB,CAAA,CAAI,CAC3D,EAOA,SAAwBI,EAAc,CACpC,UAAAC,EAAY,GACZ,KAAAC,EAAO,OACP,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,mBAAAC,EACA,gBAAAC,EACA,qBAAAC,EACA,kBAAAC,EACA,UAAAC,CACF,EAAuB,CACrB,MAAMC,EAAYC,EAAAA,QAAO,wBAAwBV,EAAK,YAAA,CAAa,EAAE,EAE/DW,EAAY,CAACD,UAAO,gBAAgB,EAAGD,EAAWV,CAAS,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG,EAELa,EAAeX,IAAS,OAAYA,EAAOV,EAAcS,CAAI,EAE7Da,EAAaT,GAAsB,MAAQE,GAAwB,KAEzE,OACEQ,EAAAA,KAAC,MAAA,CAAI,UAAWH,EACd,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,yBAAyB,EAC7C,SAAA,CAAAE,GAAgB,YACd,OAAA,CAAK,UAAWF,EAAAA,QAAO,sBAAsB,EAAG,cAAW,GACzD,SAAAE,CAAA,CACH,EAEFE,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,sBAAsB,EAC3C,SAAA,CAAAjB,MAAC,IAAA,CAAE,UAAWiB,EAAAA,QAAO,uBAAuB,EAAI,SAAAR,EAAM,EACrDC,GAAe,MACdV,MAAC,MAAA,CAAI,UAAWiB,EAAAA,QAAO,6BAA6B,EACjD,SAAAP,EACH,EAEDU,GACCC,EAAAA,KAAC,MAAA,CAAI,UAAWJ,UAAO,yBAAyB,EAC7C,SAAA,CAAAN,GAAsB,MACrBX,EAAAA,IAACsB,EAAAA,QAAA,CACC,SAAS,UACT,KAAK,QACL,QAASV,EAER,SAAAD,CAAA,CAAA,EAGJE,GAAwB,MACvBb,EAAAA,IAACsB,EAAAA,QAAA,CACC,SAAS,YACT,KAAK,QACL,QAASR,EAER,SAAAD,CAAA,CAAA,CACH,CAAA,CAEJ,CAAA,CAAA,CAEJ,CAAA,EACF,EACCE,GAAa,MACZf,EAAAA,IAACuB,EAAAA,QAAA,CACC,UAAWN,EAAAA,QAAO,yBAAyB,EAC3C,aAAW,UACX,KAAK,QACL,WAAOlB,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACwB,IAAU,EAAI,EAC5C,QAAST,CAAA,CAAA,CACX,EAEJ,CAEJ"}

package/dist/components/section-notice/SectionNotice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNotice.d.ts","sourceRoot":"","sources":["../../../src/components/section-notice/SectionNotice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,CAAC;AAEX,MAAM,WAAW,kBAAkB;IACjC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,wEAAwE;IACxE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,qCAAqC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAUD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,SAAc,EACd,IAAa,EACb,IAAI,EACJ,KAAK,EACL,WAAW,EACX,kBAAkB,EAClB,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,SAAS,GACV,EAAE,kBAAkB,2CA6DpB"}