@mattermost/compass-ui 0.1.0-alpha.6 → 0.1.0-alpha.8

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

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. */\n  title: string;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: string;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: string;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a UserAvatar or Icon. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** When set, shows an expand button and calls this on click. */\n  onExpand?: () => void;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Optional inline action label (e.g. \"Follow\"). */\n  actionLabel?: string;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  onExpand,\n  onClose,\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label=\"Back\"\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label=\"Expand\"\n            onClick={onExpand}\n            icon={<Icon size=\"16\" glyph={<ArrowExpandIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label=\"Close\"\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","onExpand","onClose","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowExpandIcon","CloseIcon"],"mappings":"+dAoCA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,OAAAC,EACA,SAAAC,EACA,QAAAC,EACA,YAAAC,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,UAAAC,EAAY,EACd,EAA4B,CAC1B,MAAMC,EAAY,CAACC,UAAO,sBAAsB,EAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAR,GACCU,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAW,OACX,QAASR,EACT,WAAOY,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAiB,CAAA,CAAI,CAAA,CAAA,EAGtDd,GACCW,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAT,EACH,QAED,OAAA,CAAK,UAAWS,EAAAA,QAAO,6BAA6B,EAAI,SAAAb,EAAM,EAC9DE,GACCa,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAOjB,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCF,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,iCAAiC,EACtD,SAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,sCAAsC,EAC3D,WACH,CAAA,CACF,CAAA,EAEJ,EAEAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAL,GACCO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTF,EAAAA,QAAO,8BAA8B,EACrCH,EACIG,EAAAA,QAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcC,EAAe,GAAO,OAEnC,SAAAF,CAAA,CAAA,EAGJF,GACCS,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAW,SACX,QAASV,EACT,WAAOW,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACK,IAAgB,CAAA,CAAI,CAAA,CAAA,EAGrDb,GACCQ,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAW,QACX,QAAST,EACT,WAAOU,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACM,IAAU,CAAA,CAAI,CAAA,CAAA,CAC9C,CAAA,CAEJ,CAAA,EACF,CAEJ"}
+{"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. */\n  title: string;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: string;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: string;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** When set, shows an expand button and calls this on click. */\n  onExpand?: () => void;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Optional inline action label (e.g. \"Follow\"). */\n  actionLabel?: string;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  onExpand,\n  onClose,\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label=\"Back\"\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label=\"Expand\"\n            onClick={onExpand}\n            icon={<Icon size=\"16\" glyph={<ArrowExpandIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label=\"Close\"\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","onExpand","onClose","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowExpandIcon","CloseIcon"],"mappings":"+dAoCA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,OAAAC,EACA,SAAAC,EACA,QAAAC,EACA,YAAAC,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,UAAAC,EAAY,EACd,EAA4B,CAC1B,MAAMC,EAAY,CAACC,UAAO,sBAAsB,EAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAR,GACCU,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAW,OACX,QAASR,EACT,WAAOY,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAiB,CAAA,CAAI,CAAA,CAAA,EAGtDd,GACCW,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAT,EACH,QAED,OAAA,CAAK,UAAWS,EAAAA,QAAO,6BAA6B,EAAI,SAAAb,EAAM,EAC9DE,GACCa,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAOjB,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCF,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,iCAAiC,EACtD,SAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,sCAAsC,EAC3D,WACH,CAAA,CACF,CAAA,EAEJ,EAEAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAL,GACCO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTF,EAAAA,QAAO,8BAA8B,EACrCH,EACIG,EAAAA,QAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcC,EAAe,GAAO,OAEnC,SAAAF,CAAA,CAAA,EAGJF,GACCS,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAW,SACX,QAASV,EACT,WAAOW,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACK,IAAgB,CAAA,CAAI,CAAA,CAAA,EAGrDb,GACCQ,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAW,QACX,QAAST,EACT,WAAOU,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACM,IAAU,CAAA,CAAI,CAAA,CAAA,CAC9C,CAAA,CAEJ,CAAA,EACF,CAEJ"}

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts

@@ -9,7 +9,7 @@ export interface RightSidebarHeaderProps {
     tag?: string;
     /** Tag visual style. Default: Info. */
     tagType?: TagType;
-    /** Optional leading element shown before the title — typically a UserAvatar or Icon. */
+    /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size="20" />` to align with the title text. */
     leadingIcon?: ReactNode;
     /** When set, shows a back button and calls this on click. */
     onBack?: () => void;

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,WAAW,uBAAuB;IACtC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wFAAwF;IACxF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,SAAc,GACf,EAAE,uBAAuB,2CAiFzB"}
+{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,WAAW,uBAAuB;IACtC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+LAA+L;IAC/L,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,SAAc,GACf,EAAE,uBAAuB,2CAiFzB"}

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

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.js","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. */\n  title: string;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: string;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: string;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a UserAvatar or Icon. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** When set, shows an expand button and calls this on click. */\n  onExpand?: () => void;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Optional inline action label (e.g. \"Follow\"). */\n  actionLabel?: string;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  onExpand,\n  onClose,\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label=\"Back\"\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label=\"Expand\"\n            onClick={onExpand}\n            icon={<Icon size=\"16\" glyph={<ArrowExpandIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label=\"Close\"\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","onExpand","onClose","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowExpandIcon","CloseIcon"],"mappings":";;;;;;;;AAoCA,SAAwBA,EAAmB;AAAA,EACzC,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AACd,GAA4B;AAC1B,QAAMC,IAAY,CAACC,EAAO,sBAAsB,GAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAWF,GACd,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GACjD,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACnD,UAAA;AAAA,QAAAR,KACC,gBAAAU;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWH,EAAO,4BAA4B;AAAA,YAC9C,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAASR;AAAA,YACT,wBAAOY,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACG,KAAiB,EAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGtDd,KACC,gBAAAW,EAAC,QAAA,EAAK,WAAWF,EAAO,oCAAoC,GACzD,UAAAT,GACH;AAAA,0BAED,QAAA,EAAK,WAAWS,EAAO,6BAA6B,GAAI,UAAAb,GAAM;AAAA,QAC9DE,KACC,gBAAAa,EAAC,QAAA,EAAK,WAAWF,EAAO,2BAA2B,GACjD,UAAA,gBAAAE;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,OAAOjB;AAAA,YACP,MAAMC;AAAA,YACN,MAAK;AAAA,YACL,QAAO;AAAA,UAAA;AAAA,QAAA,EACT,CACF;AAAA,MAAA,GAEJ;AAAA,MACCF,KACC,gBAAAc,EAAC,OAAA,EAAI,WAAWF,EAAO,iCAAiC,GACtD,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,sCAAsC,GAC3D,aACH,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,IAEA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACnD,UAAA;AAAA,MAAAL,KACC,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW;AAAA,YACTF,EAAO,8BAA8B;AAAA,YACrCH,IACIG,EAAO,sCAAsC,IAC7C;AAAA,UAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,UACX,SAASJ;AAAA,UACT,gBAAcC,IAAe,KAAO;AAAA,UAEnC,UAAAF;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJF,KACC,gBAAAS;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX,SAASV;AAAA,UACT,wBAAOW,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACK,KAAgB,EAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAGrDb,KACC,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX,SAAST;AAAA,UACT,wBAAOU,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACM,KAAU,EAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9C,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"RightSidebarHeader.js","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. */\n  title: string;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: string;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: string;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** When set, shows an expand button and calls this on click. */\n  onExpand?: () => void;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Optional inline action label (e.g. \"Follow\"). */\n  actionLabel?: string;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  onExpand,\n  onClose,\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label=\"Back\"\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label=\"Expand\"\n            onClick={onExpand}\n            icon={<Icon size=\"16\" glyph={<ArrowExpandIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label=\"Close\"\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","onExpand","onClose","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowExpandIcon","CloseIcon"],"mappings":";;;;;;;;AAoCA,SAAwBA,EAAmB;AAAA,EACzC,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AACd,GAA4B;AAC1B,QAAMC,IAAY,CAACC,EAAO,sBAAsB,GAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAWF,GACd,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GACjD,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACnD,UAAA;AAAA,QAAAR,KACC,gBAAAU;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWH,EAAO,4BAA4B;AAAA,YAC9C,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAASR;AAAA,YACT,wBAAOY,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACG,KAAiB,EAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGtDd,KACC,gBAAAW,EAAC,QAAA,EAAK,WAAWF,EAAO,oCAAoC,GACzD,UAAAT,GACH;AAAA,0BAED,QAAA,EAAK,WAAWS,EAAO,6BAA6B,GAAI,UAAAb,GAAM;AAAA,QAC9DE,KACC,gBAAAa,EAAC,QAAA,EAAK,WAAWF,EAAO,2BAA2B,GACjD,UAAA,gBAAAE;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,OAAOjB;AAAA,YACP,MAAMC;AAAA,YACN,MAAK;AAAA,YACL,QAAO;AAAA,UAAA;AAAA,QAAA,EACT,CACF;AAAA,MAAA,GAEJ;AAAA,MACCF,KACC,gBAAAc,EAAC,OAAA,EAAI,WAAWF,EAAO,iCAAiC,GACtD,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,sCAAsC,GAC3D,aACH,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,IAEA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACnD,UAAA;AAAA,MAAAL,KACC,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW;AAAA,YACTF,EAAO,8BAA8B;AAAA,YACrCH,IACIG,EAAO,sCAAsC,IAC7C;AAAA,UAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,UACX,SAASJ;AAAA,UACT,gBAAcC,IAAe,KAAO;AAAA,UAEnC,UAAAF;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJF,KACC,gBAAAS;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX,SAASV;AAAA,UACT,wBAAOW,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACK,KAAgB,EAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAGrDb,KACC,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX,SAAST;AAAA,UACT,wBAAOU,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACM,KAAU,EAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9C,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -1 +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"}
+{"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. Pass `<Icon glyph={<SomeIcon />} size=\"20\" />` — the slot does not resize raw SVG children. */\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

@@ -5,7 +5,7 @@ export interface SectionNoticeProps {
     className?: string;
     /** Type controls color-coding. Default: Info. */
     type?: SectionNoticeType;
-    /** Optional leading icon. When omitted a default type icon is shown. */
+    /** Optional leading icon. When omitted a default type icon is shown. Pass `<Icon glyph={<SomeIcon />} size="20" />` — the slot does not resize raw SVG children. */
     icon?: ReactNode;
     /** Title / headline text. */
     title: string;

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

@@ -1 +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"}
+{"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,oKAAoK;IACpK,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"SectionNotice.js","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":";;;;;;;;;;AAyCA,MAAMA,IAAsD;AAAA,EAC1D,wBAAOC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACC,KAAuB,GAAI;AAAA,EACzD,2BAAUF,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACE,KAAuB,GAAI;AAAA,EAC5D,0BAASH,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACG,KAAiB,GAAI;AAAA,EACrD,2BAAUJ,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACI,KAAuB,GAAI;AAAA,EAC5D,wBAAOL,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACC,KAAuB,EAAA,CAAI;AAC3D;AAOA,SAAwBI,EAAc;AAAA,EACpC,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AACF,GAAuB;AACrB,QAAMC,IAAYC,EAAO,wBAAwBV,EAAK,YAAA,CAAa,EAAE,GAE/DW,IAAY,CAACD,EAAO,gBAAgB,GAAGD,GAAWV,CAAS,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG,GAELa,IAAeX,MAAS,SAAYA,IAAOV,EAAcS,CAAI,GAE7Da,IAAaT,KAAsB,QAAQE,KAAwB;AAEzE,SACE,gBAAAQ,EAAC,OAAA,EAAI,WAAWH,GACd,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWJ,EAAO,yBAAyB,GAC7C,UAAA;AAAA,MAAAE,KAAgB,0BACd,QAAA,EAAK,WAAWF,EAAO,sBAAsB,GAAG,eAAW,IACzD,UAAAE,EAAA,CACH;AAAA,MAEF,gBAAAE,EAAC,OAAA,EAAI,WAAWJ,EAAO,sBAAsB,GAC3C,UAAA;AAAA,QAAA,gBAAAjB,EAAC,KAAA,EAAE,WAAWiB,EAAO,uBAAuB,GAAI,UAAAR,GAAM;AAAA,QACrDC,KAAe,QACd,gBAAAV,EAAC,OAAA,EAAI,WAAWiB,EAAO,6BAA6B,GACjD,UAAAP,GACH;AAAA,QAEDU,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAWJ,EAAO,yBAAyB,GAC7C,UAAA;AAAA,UAAAN,KAAsB,QACrB,gBAAAX;AAAA,YAACsB;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,SAASV;AAAA,cAER,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJE,KAAwB,QACvB,gBAAAb;AAAA,YAACsB;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,SAASR;AAAA,cAER,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,IACCE,KAAa,QACZ,gBAAAf;AAAA,MAACuB;AAAA,MAAA;AAAA,QACC,WAAWN,EAAO,yBAAyB;AAAA,QAC3C,cAAW;AAAA,QACX,MAAK;AAAA,QACL,wBAAOlB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACwB,KAAU,GAAI;AAAA,QAC5C,SAAST;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;"}
+{"version":3,"file":"SectionNotice.js","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. Pass `<Icon glyph={<SomeIcon />} size=\"20\" />` — the slot does not resize raw SVG children. */\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":";;;;;;;;;;AAyCA,MAAMA,IAAsD;AAAA,EAC1D,wBAAOC,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACC,KAAuB,GAAI;AAAA,EACzD,2BAAUF,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACE,KAAuB,GAAI;AAAA,EAC5D,0BAASH,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACG,KAAiB,GAAI;AAAA,EACrD,2BAAUJ,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACI,KAAuB,GAAI;AAAA,EAC5D,wBAAOL,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACC,KAAuB,EAAA,CAAI;AAC3D;AAOA,SAAwBI,EAAc;AAAA,EACpC,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AACF,GAAuB;AACrB,QAAMC,IAAYC,EAAO,wBAAwBV,EAAK,YAAA,CAAa,EAAE,GAE/DW,IAAY,CAACD,EAAO,gBAAgB,GAAGD,GAAWV,CAAS,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG,GAELa,IAAeX,MAAS,SAAYA,IAAOV,EAAcS,CAAI,GAE7Da,IAAaT,KAAsB,QAAQE,KAAwB;AAEzE,SACE,gBAAAQ,EAAC,OAAA,EAAI,WAAWH,GACd,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWJ,EAAO,yBAAyB,GAC7C,UAAA;AAAA,MAAAE,KAAgB,0BACd,QAAA,EAAK,WAAWF,EAAO,sBAAsB,GAAG,eAAW,IACzD,UAAAE,EAAA,CACH;AAAA,MAEF,gBAAAE,EAAC,OAAA,EAAI,WAAWJ,EAAO,sBAAsB,GAC3C,UAAA;AAAA,QAAA,gBAAAjB,EAAC,KAAA,EAAE,WAAWiB,EAAO,uBAAuB,GAAI,UAAAR,GAAM;AAAA,QACrDC,KAAe,QACd,gBAAAV,EAAC,OAAA,EAAI,WAAWiB,EAAO,6BAA6B,GACjD,UAAAP,GACH;AAAA,QAEDU,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAWJ,EAAO,yBAAyB,GAC7C,UAAA;AAAA,UAAAN,KAAsB,QACrB,gBAAAX;AAAA,YAACsB;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,SAASV;AAAA,cAER,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJE,KAAwB,QACvB,gBAAAb;AAAA,YAACsB;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,SAASR;AAAA,cAER,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,IACCE,KAAa,QACZ,gBAAAf;AAAA,MAACuB;AAAA,MAAA;AAAA,QACC,WAAWN,EAAO,yBAAyB;AAAA,QAC3C,cAAW;AAAA,QACX,MAAK;AAAA,QACL,wBAAOlB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAC,EAACwB,KAAU,GAAI;AAAA,QAC5C,SAAST;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;"}

package/dist/components/spinner/Spinner.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),t=require("./Spinner.module.scss.cjs");function d({size:e=16,inverted:n=!1,className:r="","aria-label":a="Loading",style:i,...s}){const o=Math.max(1,Math.min(3,Math.round(e*.1))),l=[t.default.spinner,n?t.default["spinner--inverted"]:"",r].filter(Boolean).join(" ");return u.jsx("span",{className:l,role:"status","aria-label":a,style:{width:`${e}px`,height:`${e}px`,"--spinner-stroke-width":`${o}px`,...i},...s})}exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),t=require("./Spinner.module.scss.cjs");function p({size:n="16",inverted:r=!1,className:s="","aria-label":i="Loading",style:a,...o}){const e=Number(n),l=Math.max(1,Math.min(3,Math.round(e*.1))),u=[t.default.spinner,r?t.default["spinner--inverted"]:"",s].filter(Boolean).join(" ");return d.jsx("span",{className:u,role:"status","aria-label":i,style:{width:`${e}px`,height:`${e}px`,"--spinner-stroke-width":`${l}px`,...a},...o})}exports.default=p;
 //# sourceMappingURL=Spinner.cjs.map

package/dist/components/spinner/Spinner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.cjs","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './Spinner.module.scss';\n\nexport type SpinnerSize = 10 | 12 | 16 | 20 | 24 | 28 | 32;\n\nexport interface SpinnerProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'role'\n> {\n  size?: SpinnerSize;\n  inverted?: boolean;\n  'aria-label'?: string;\n}\n\n/**\n * A Spinner is the all-purpose indicator that something is happening but the duration is\n * unknown. It signals \"wait\" without claiming to know how long the wait will be.\n */\nexport default function Spinner({\n  size = 16,\n  inverted = false,\n  className = '',\n  'aria-label': ariaLabel = 'Loading',\n  style,\n  ...htmlProps\n}: SpinnerProps) {\n  const strokeWidth = Math.max(1, Math.min(3, Math.round(size * 0.1)));\n\n  const rootClass = [\n    styles.spinner,\n    inverted ? styles['spinner--inverted'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      className={rootClass}\n      role=\"status\"\n      aria-label={ariaLabel}\n      style={{\n        width: `${size}px`,\n        height: `${size}px`,\n        ['--spinner-stroke-width' as string]: `${strokeWidth}px`,\n        ...style,\n      }}\n      {...htmlProps}\n    />\n  );\n}\n"],"names":["Spinner","size","inverted","className","ariaLabel","style","htmlProps","strokeWidth","rootClass","styles","jsx"],"mappings":"wLAkBA,SAAwBA,EAAQ,CAC9B,KAAAC,EAAO,GACP,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,aAAcC,EAAY,UAC1B,MAAAC,EACA,GAAGC,CACL,EAAiB,CACf,MAAMC,EAAc,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,KAAK,MAAMN,EAAO,EAAG,CAAC,CAAC,EAE7DO,EAAY,CAChBC,EAAAA,QAAO,QACPP,EAAWO,EAAAA,QAAO,mBAAmB,EAAI,GACzCN,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,IAAC,OAAA,CACC,UAAWF,EACX,KAAK,SACL,aAAYJ,EACZ,MAAO,CACL,MAAO,GAAGH,CAAI,KACd,OAAQ,GAAGA,CAAI,KACd,yBAAqC,GAAGM,CAAW,KACpD,GAAGF,CAAA,EAEJ,GAAGC,CAAA,CAAA,CAGV"}
+{"version":3,"file":"Spinner.cjs","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './Spinner.module.scss';\n\nexport type SpinnerSize = '10' | '12' | '16' | '20' | '24' | '28' | '32';\n\nexport interface SpinnerProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'role'\n> {\n  size?: SpinnerSize;\n  inverted?: boolean;\n  'aria-label'?: string;\n}\n\n/**\n * A Spinner is the all-purpose indicator that something is happening but the duration is\n * unknown. It signals \"wait\" without claiming to know how long the wait will be.\n */\nexport default function Spinner({\n  size = '16',\n  inverted = false,\n  className = '',\n  'aria-label': ariaLabel = 'Loading',\n  style,\n  ...htmlProps\n}: SpinnerProps) {\n  const sizePx = Number(size);\n  const strokeWidth = Math.max(1, Math.min(3, Math.round(sizePx * 0.1)));\n\n  const rootClass = [\n    styles.spinner,\n    inverted ? styles['spinner--inverted'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      className={rootClass}\n      role=\"status\"\n      aria-label={ariaLabel}\n      style={{\n        width: `${sizePx}px`,\n        height: `${sizePx}px`,\n        ['--spinner-stroke-width' as string]: `${strokeWidth}px`,\n        ...style,\n      }}\n      {...htmlProps}\n    />\n  );\n}\n"],"names":["Spinner","size","inverted","className","ariaLabel","style","htmlProps","sizePx","strokeWidth","rootClass","styles","jsx"],"mappings":"wLAkBA,SAAwBA,EAAQ,CAC9B,KAAAC,EAAO,KACP,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,aAAcC,EAAY,UAC1B,MAAAC,EACA,GAAGC,CACL,EAAiB,CACf,MAAMC,EAAS,OAAON,CAAI,EACpBO,EAAc,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,KAAK,MAAMD,EAAS,EAAG,CAAC,CAAC,EAE/DE,EAAY,CAChBC,EAAAA,QAAO,QACPR,EAAWQ,EAAAA,QAAO,mBAAmB,EAAI,GACzCP,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEQ,EAAAA,IAAC,OAAA,CACC,UAAWF,EACX,KAAK,SACL,aAAYL,EACZ,MAAO,CACL,MAAO,GAAGG,CAAM,KAChB,OAAQ,GAAGA,CAAM,KAChB,yBAAqC,GAAGC,CAAW,KACpD,GAAGH,CAAA,EAEJ,GAAGC,CAAA,CAAA,CAGV"}

package/dist/components/spinner/Spinner.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export type SpinnerSize = 10 | 12 | 16 | 20 | 24 | 28 | 32;
+export type SpinnerSize = '10' | '12' | '16' | '20' | '24' | '28' | '32';
 export interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'role'> {
     size?: SpinnerSize;
     inverted?: boolean;

package/dist/components/spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE3D,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,cAAc,CAAC,eAAe,CAAC,EAC/B,MAAM,CACP;IACC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,IAAS,EACT,QAAgB,EAChB,SAAc,EACd,YAAY,EAAE,SAAqB,EACnC,KAAK,EACL,GAAG,SAAS,EACb,EAAE,YAAY,2CAyBd"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzE,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,cAAc,CAAC,eAAe,CAAC,EAC/B,MAAM,CACP;IACC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,IAAW,EACX,QAAgB,EAChB,SAAc,EACd,YAAY,EAAE,SAAqB,EACnC,KAAK,EACL,GAAG,SAAS,EACb,EAAE,YAAY,2CA0Bd"}

package/dist/components/spinner/Spinner.js

@@ -1,35 +1,35 @@
-import { jsx as p } from "react/jsx-runtime";
-import a from "./Spinner.module.scss.js";
-function m({
-  size: t = 16,
+import { jsx as h } from "react/jsx-runtime";
+import e from "./Spinner.module.scss.js";
+function x({
+  size: s = "16",
   inverted: n = !1,
   className: r = "",
-  "aria-label": e = "Loading",
-  style: o,
-  ...s
+  "aria-label": a = "Loading",
+  style: i,
+  ...o
 }) {
-  const i = Math.max(1, Math.min(3, Math.round(t * 0.1))), l = [
-    a.spinner,
-    n ? a["spinner--inverted"] : "",
+  const t = Number(s), l = Math.max(1, Math.min(3, Math.round(t * 0.1))), p = [
+    e.spinner,
+    n ? e["spinner--inverted"] : "",
     r
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ h(
     "span",
     {
-      className: l,
+      className: p,
       role: "status",
-      "aria-label": e,
+      "aria-label": a,
       style: {
         width: `${t}px`,
         height: `${t}px`,
-        "--spinner-stroke-width": `${i}px`,
-        ...o
+        "--spinner-stroke-width": `${l}px`,
+        ...i
       },
-      ...s
+      ...o
     }
   );
 }
 export {
-  m as default
+  x as default
 };
 //# sourceMappingURL=Spinner.js.map

package/dist/components/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './Spinner.module.scss';\n\nexport type SpinnerSize = 10 | 12 | 16 | 20 | 24 | 28 | 32;\n\nexport interface SpinnerProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'role'\n> {\n  size?: SpinnerSize;\n  inverted?: boolean;\n  'aria-label'?: string;\n}\n\n/**\n * A Spinner is the all-purpose indicator that something is happening but the duration is\n * unknown. It signals \"wait\" without claiming to know how long the wait will be.\n */\nexport default function Spinner({\n  size = 16,\n  inverted = false,\n  className = '',\n  'aria-label': ariaLabel = 'Loading',\n  style,\n  ...htmlProps\n}: SpinnerProps) {\n  const strokeWidth = Math.max(1, Math.min(3, Math.round(size * 0.1)));\n\n  const rootClass = [\n    styles.spinner,\n    inverted ? styles['spinner--inverted'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      className={rootClass}\n      role=\"status\"\n      aria-label={ariaLabel}\n      style={{\n        width: `${size}px`,\n        height: `${size}px`,\n        ['--spinner-stroke-width' as string]: `${strokeWidth}px`,\n        ...style,\n      }}\n      {...htmlProps}\n    />\n  );\n}\n"],"names":["Spinner","size","inverted","className","ariaLabel","style","htmlProps","strokeWidth","rootClass","styles","jsx"],"mappings":";;AAkBA,SAAwBA,EAAQ;AAAA,EAC9B,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,cAAcC,IAAY;AAAA,EAC1B,OAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAMN,IAAO,GAAG,CAAC,CAAC,GAE7DO,IAAY;AAAA,IAChBC,EAAO;AAAA,IACPP,IAAWO,EAAO,mBAAmB,IAAI;AAAA,IACzCN;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAK;AAAA,MACL,cAAYJ;AAAA,MACZ,OAAO;AAAA,QACL,OAAO,GAAGH,CAAI;AAAA,QACd,QAAQ,GAAGA,CAAI;AAAA,QACd,0BAAqC,GAAGM,CAAW;AAAA,QACpD,GAAGF;AAAA,MAAA;AAAA,MAEJ,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport styles from './Spinner.module.scss';\n\nexport type SpinnerSize = '10' | '12' | '16' | '20' | '24' | '28' | '32';\n\nexport interface SpinnerProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'role'\n> {\n  size?: SpinnerSize;\n  inverted?: boolean;\n  'aria-label'?: string;\n}\n\n/**\n * A Spinner is the all-purpose indicator that something is happening but the duration is\n * unknown. It signals \"wait\" without claiming to know how long the wait will be.\n */\nexport default function Spinner({\n  size = '16',\n  inverted = false,\n  className = '',\n  'aria-label': ariaLabel = 'Loading',\n  style,\n  ...htmlProps\n}: SpinnerProps) {\n  const sizePx = Number(size);\n  const strokeWidth = Math.max(1, Math.min(3, Math.round(sizePx * 0.1)));\n\n  const rootClass = [\n    styles.spinner,\n    inverted ? styles['spinner--inverted'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      className={rootClass}\n      role=\"status\"\n      aria-label={ariaLabel}\n      style={{\n        width: `${sizePx}px`,\n        height: `${sizePx}px`,\n        ['--spinner-stroke-width' as string]: `${strokeWidth}px`,\n        ...style,\n      }}\n      {...htmlProps}\n    />\n  );\n}\n"],"names":["Spinner","size","inverted","className","ariaLabel","style","htmlProps","sizePx","strokeWidth","rootClass","styles","jsx"],"mappings":";;AAkBA,SAAwBA,EAAQ;AAAA,EAC9B,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,cAAcC,IAAY;AAAA,EAC1B,OAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAS,OAAON,CAAI,GACpBO,IAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAMD,IAAS,GAAG,CAAC,CAAC,GAE/DE,IAAY;AAAA,IAChBC,EAAO;AAAA,IACPR,IAAWQ,EAAO,mBAAmB,IAAI;AAAA,IACzCP;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAK;AAAA,MACL,cAAYL;AAAA,MACZ,OAAO;AAAA,QACL,OAAO,GAAGG,CAAM;AAAA,QAChB,QAAQ,GAAGA,CAAM;AAAA,QAChB,0BAAqC,GAAGC,CAAW;AAAA,QACpD,GAAGH;AAAA,MAAA;AAAA,MAEJ,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = {\n  /** Tag label text. */\n  label: string;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Optional leading icon node. */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small'\n      ? styles['tag--size-small']\n      : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          {leadingIcon}\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","classes","jsxs","jsx"],"mappings":"oLA6BMA,EAAsC,CAC1C,QAASC,EAAAA,QAAO,mBAAmB,EACnC,KAAMA,EAAAA,QAAO,gBAAgB,EAC7B,WAAYA,EAAAA,QAAO,oBAAoB,EACvC,OAAQA,EAAAA,QAAO,kBAAkB,EACjC,QAASA,EAAAA,QAAO,mBAAmB,EACnC,QAASA,EAAAA,QAAO,mBAAmB,CACrC,EAOA,SAAwBC,EAAI,CAC1B,MAAAC,EACA,KAAAC,EAAO,UACP,KAAAC,EAAO,UACP,OAAAC,EAAS,aACT,YAAAC,EACA,UAAAC,EAAY,EACd,EAAa,CACX,MAAMC,EAAU,CACdR,EAAAA,QAAO,IACPD,EAAWI,CAAI,EACfC,IAAS,QACLJ,EAAAA,QAAO,iBAAiB,EACxBA,EAAAA,QAAO,mBAAmB,EAC9BK,IAAW,WAAaL,UAAO,sBAAsB,EAAI,GACzDO,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,OAAA,CAAK,UAAWD,EACd,SAAA,CAAAF,GACCI,EAAAA,IAAC,QAAK,UAAWV,EAAAA,QAAO,UAAc,cAAW,GAC9C,SAAAM,CAAA,CACH,QAED,OAAA,CAAK,UAAWN,EAAAA,QAAO,WAAgB,SAAAE,CAAA,CAAM,CAAA,EAChD,CAEJ"}
+{"version":3,"file":"Tag.cjs","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = {\n  /** Tag label text. */\n  label: string;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Raw SVG glyph from `@mattermost/compass-icons` — e.g. `<GlobeIcon size={10} />` for `size=\"x-small\"` or `<GlobeIcon size={12} />` for `size=\"small\"`. Do not wrap in `<Icon>`. */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small'\n      ? styles['tag--size-small']\n      : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          {leadingIcon}\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","classes","jsxs","jsx"],"mappings":"oLA6BMA,EAAsC,CAC1C,QAASC,EAAAA,QAAO,mBAAmB,EACnC,KAAMA,EAAAA,QAAO,gBAAgB,EAC7B,WAAYA,EAAAA,QAAO,oBAAoB,EACvC,OAAQA,EAAAA,QAAO,kBAAkB,EACjC,QAASA,EAAAA,QAAO,mBAAmB,EACnC,QAASA,EAAAA,QAAO,mBAAmB,CACrC,EAOA,SAAwBC,EAAI,CAC1B,MAAAC,EACA,KAAAC,EAAO,UACP,KAAAC,EAAO,UACP,OAAAC,EAAS,aACT,YAAAC,EACA,UAAAC,EAAY,EACd,EAAa,CACX,MAAMC,EAAU,CACdR,EAAAA,QAAO,IACPD,EAAWI,CAAI,EACfC,IAAS,QACLJ,EAAAA,QAAO,iBAAiB,EACxBA,EAAAA,QAAO,mBAAmB,EAC9BK,IAAW,WAAaL,UAAO,sBAAsB,EAAI,GACzDO,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,OAAA,CAAK,UAAWD,EACd,SAAA,CAAAF,GACCI,EAAAA,IAAC,QAAK,UAAWV,EAAAA,QAAO,UAAc,cAAW,GAC9C,SAAAM,CAAA,CACH,QAED,OAAA,CAAK,UAAWN,EAAAA,QAAO,WAAgB,SAAAE,CAAA,CAAM,CAAA,EAChD,CAEJ"}

package/dist/components/tag/Tag.d.ts

@@ -11,7 +11,7 @@ export type TagProps = {
     size?: TagSize;
     /** Text casing. Default: Title Case. */
     casing?: TagCasing;
-    /** Optional leading icon node. */
+    /** Raw SVG glyph from `@mattermost/compass-icons` — e.g. `<GlobeIcon size={10} />` for `size="x-small"` or `<GlobeIcon size={12} />` for `size="small"`. Do not wrap in `<Icon>`. */
     leadingIcon?: ReactNode;
     /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */
     className?: string;

package/dist/components/tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,OAAO,GACf,SAAS,GACT,MAAM,GACN,UAAU,GACV,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAC1C,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG;IACrB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,kCAAkC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAWF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAC1B,KAAK,EACL,IAAgB,EAChB,IAAgB,EAChB,MAAqB,EACrB,WAAW,EACX,SAAc,GACf,EAAE,QAAQ,2CAuBV"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,OAAO,GACf,SAAS,GACT,MAAM,GACN,UAAU,GACV,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAC1C,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG;IACrB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qLAAqL;IACrL,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAWF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAC1B,KAAK,EACL,IAAgB,EAChB,IAAgB,EAChB,MAAqB,EACrB,WAAW,EACX,SAAc,GACf,EAAE,QAAQ,2CAuBV"}

package/dist/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = {\n  /** Tag label text. */\n  label: string;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Optional leading icon node. */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small'\n      ? styles['tag--size-small']\n      : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          {leadingIcon}\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","classes","jsxs","jsx"],"mappings":";;AA6BA,MAAMA,IAAsC;AAAA,EAC1C,SAASC,EAAO,mBAAmB;AAAA,EACnC,MAAMA,EAAO,gBAAgB;AAAA,EAC7B,YAAYA,EAAO,oBAAoB;AAAA,EACvC,QAAQA,EAAO,kBAAkB;AAAA,EACjC,SAASA,EAAO,mBAAmB;AAAA,EACnC,SAASA,EAAO,mBAAmB;AACrC;AAOA,SAAwBC,EAAI;AAAA,EAC1B,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,aAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAa;AACX,QAAMC,IAAU;AAAA,IACdR,EAAO;AAAA,IACPD,EAAWI,CAAI;AAAA,IACfC,MAAS,UACLJ,EAAO,iBAAiB,IACxBA,EAAO,mBAAmB;AAAA,IAC9BK,MAAW,aAAaL,EAAO,sBAAsB,IAAI;AAAA,IACzDO;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE,EAAC,QAAA,EAAK,WAAWD,GACd,UAAA;AAAA,IAAAF,KACC,gBAAAI,EAAC,UAAK,WAAWV,EAAO,WAAc,eAAW,IAC9C,UAAAM,EAAA,CACH;AAAA,sBAED,QAAA,EAAK,WAAWN,EAAO,YAAgB,UAAAE,EAAA,CAAM;AAAA,EAAA,GAChD;AAEJ;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = {\n  /** Tag label text. */\n  label: string;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Raw SVG glyph from `@mattermost/compass-icons` — e.g. `<GlobeIcon size={10} />` for `size=\"x-small\"` or `<GlobeIcon size={12} />` for `size=\"small\"`. Do not wrap in `<Icon>`. */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small'\n      ? styles['tag--size-small']\n      : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          {leadingIcon}\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","classes","jsxs","jsx"],"mappings":";;AA6BA,MAAMA,IAAsC;AAAA,EAC1C,SAASC,EAAO,mBAAmB;AAAA,EACnC,MAAMA,EAAO,gBAAgB;AAAA,EAC7B,YAAYA,EAAO,oBAAoB;AAAA,EACvC,QAAQA,EAAO,kBAAkB;AAAA,EACjC,SAASA,EAAO,mBAAmB;AAAA,EACnC,SAASA,EAAO,mBAAmB;AACrC;AAOA,SAAwBC,EAAI;AAAA,EAC1B,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,aAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAa;AACX,QAAMC,IAAU;AAAA,IACdR,EAAO;AAAA,IACPD,EAAWI,CAAI;AAAA,IACfC,MAAS,UACLJ,EAAO,iBAAiB,IACxBA,EAAO,mBAAmB;AAAA,IAC9BK,MAAW,aAAaL,EAAO,sBAAsB,IAAI;AAAA,IACzDO;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE,EAAC,QAAA,EAAK,WAAWD,GACd,UAAA;AAAA,IAAAF,KACC,gBAAAI,EAAC,UAAK,WAAWV,EAAO,WAAc,eAAW,IAC9C,UAAAM,EAAA,CACH;AAAA,sBAED,QAAA,EAAK,WAAWN,EAAO,YAAgB,UAAAE,EAAA,CAAM;AAAA,EAAA,GAChD;AAEJ;"}

package/dist/components/text-input/TextInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.cjs","sources":["../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import type {\n  InputHTMLAttributes,\n  ReactNode,\n  ChangeEvent,\n  RefCallback,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextInput.module.scss';\n\nexport type TextInputSize = 'small' | 'medium' | 'large';\n\nexport interface TextInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label content. When provided, label floats on focus or when value is non-empty. */\n  label?: ReactNode;\n  /** Leading icon (e.g. <Icon glyph={<SearchIcon />} size=\"16\" />). */\n  leadingIcon?: ReactNode;\n  /** Max length for the input; used with showCharacterCount for counter. */\n  maxLength?: number;\n  /** When true with maxLength, shows \"current / max\" character count below input. */\n  showCharacterCount?: boolean;\n  /** Size variant. Figma: Small (32px), Medium (40px), Large (48px). Default: Medium. */\n  size?: TextInputSize;\n  /** Trailing icon. */\n  trailingIcon?: ReactNode;\n}\n\n/**\n * Text Inputs let people enter and edit a single line of text — names, emails, search\n * queries, channel titles. They're the workhorse of every form and modal in Mattermost.\n */\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  function TextInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      leadingIcon,\n      trailingIcon,\n      invalid = false,\n      maxLength,\n      showCharacterCount = false,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          const cleanup = (ref as RefCallback<HTMLInputElement>)(node);\n          return () => {\n            inputRef.current = null;\n            if (typeof cleanup === 'function') cleanup();\n          };\n        }\n        if (ref) ref.current = node;\n      },\n      [ref],\n    );\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 sizeClass = styles[`text-input--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['text-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['text-input--label-floated'] : '';\n    const hasLeadingClass =\n      leadingIcon != null ? styles['text-input--has-leading-icon'] : '';\n    const hasTrailingClass =\n      trailingIcon != null ? styles['text-input--has-trailing-icon'] : '';\n\n    const rootClass = [\n      styles['text-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const currentLength = typeof value === 'string' ? value.length : 0;\n    const counterId =\n      showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['text-input__wrapper']}>\n          <label className={styles['text-input__inner']}>\n            {label != null && (\n              <span className={styles['text-input__label']}>{label}</span>\n            )}\n            {leadingIcon != null && (\n              <span className={styles['text-input__leading-icon']}>\n                {leadingIcon}\n              </span>\n            )}\n            <input\n              ref={setInputRef}\n              id={id}\n              className={styles['text-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              maxLength={maxLength}\n              disabled={disabled}\n              readOnly={readOnly}\n              aria-invalid={invalid ? true : undefined}\n              aria-describedby={\n                [describedBy, counterId].filter(Boolean).join(' ') || undefined\n              }\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {trailingIcon != null && (\n              <span className={styles['text-input__trailing-icon']}>\n                {trailingIcon}\n              </span>\n            )}\n          </label>\n        </div>\n        {showCharacterCount && maxLength != null && (\n          <div\n            id={counterId}\n            className={styles['text-input__counter']}\n            aria-live=\"polite\"\n          >\n            {currentLength} / {maxLength}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextInput;\n"],"names":["TextInput","forwardRef","className","size","label","leadingIcon","trailingIcon","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","setInputRef","useCallback","node","cleanup","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","rootClass","currentLength","counterId","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"TextInput.cjs","sources":["../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import type {\n  InputHTMLAttributes,\n  ReactNode,\n  ChangeEvent,\n  RefCallback,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextInput.module.scss';\n\nexport type TextInputSize = 'small' | 'medium' | 'large';\n\nexport interface TextInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label content. When provided, label floats on focus or when value is non-empty. */\n  label?: ReactNode;\n  /** Leading icon (e.g. <Icon glyph={<SearchIcon />} size=\"16\" />). */\n  leadingIcon?: ReactNode;\n  /** Max length for the input; used with showCharacterCount for counter. */\n  maxLength?: number;\n  /** When true with maxLength, shows \"current / max\" character count below input. */\n  showCharacterCount?: boolean;\n  /** Size variant. Figma: Small (32px), Medium (40px), Large (48px). Default: Medium. */\n  size?: TextInputSize;\n  /** Trailing icon (e.g. `<Icon glyph={<SomeIcon />} size=\"16\" />`). */\n  trailingIcon?: ReactNode;\n}\n\n/**\n * Text Inputs let people enter and edit a single line of text — names, emails, search\n * queries, channel titles. They're the workhorse of every form and modal in Mattermost.\n */\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  function TextInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      leadingIcon,\n      trailingIcon,\n      invalid = false,\n      maxLength,\n      showCharacterCount = false,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          const cleanup = (ref as RefCallback<HTMLInputElement>)(node);\n          return () => {\n            inputRef.current = null;\n            if (typeof cleanup === 'function') cleanup();\n          };\n        }\n        if (ref) ref.current = node;\n      },\n      [ref],\n    );\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 sizeClass = styles[`text-input--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['text-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['text-input--label-floated'] : '';\n    const hasLeadingClass =\n      leadingIcon != null ? styles['text-input--has-leading-icon'] : '';\n    const hasTrailingClass =\n      trailingIcon != null ? styles['text-input--has-trailing-icon'] : '';\n\n    const rootClass = [\n      styles['text-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const currentLength = typeof value === 'string' ? value.length : 0;\n    const counterId =\n      showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['text-input__wrapper']}>\n          <label className={styles['text-input__inner']}>\n            {label != null && (\n              <span className={styles['text-input__label']}>{label}</span>\n            )}\n            {leadingIcon != null && (\n              <span className={styles['text-input__leading-icon']}>\n                {leadingIcon}\n              </span>\n            )}\n            <input\n              ref={setInputRef}\n              id={id}\n              className={styles['text-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              maxLength={maxLength}\n              disabled={disabled}\n              readOnly={readOnly}\n              aria-invalid={invalid ? true : undefined}\n              aria-describedby={\n                [describedBy, counterId].filter(Boolean).join(' ') || undefined\n              }\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {trailingIcon != null && (\n              <span className={styles['text-input__trailing-icon']}>\n                {trailingIcon}\n              </span>\n            )}\n          </label>\n        </div>\n        {showCharacterCount && maxLength != null && (\n          <div\n            id={counterId}\n            className={styles['text-input__counter']}\n            aria-live=\"polite\"\n          >\n            {currentLength} / {maxLength}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextInput;\n"],"names":["TextInput","forwardRef","className","size","label","leadingIcon","trailingIcon","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","setInputRef","useCallback","node","cleanup","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","rootClass","currentLength","counterId","jsxs","jsx"],"mappings":"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"}

package/dist/components/text-input/TextInput.d.ts

@@ -15,7 +15,7 @@ export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     showCharacterCount?: boolean;
     /** Size variant. Figma: Small (32px), Medium (40px), Large (48px). Default: Medium. */
     size?: TextInputSize;
-    /** Trailing icon. */
+    /** Trailing icon (e.g. `<Icon glyph={<SomeIcon />} size="16" />`). */
     trailingIcon?: ReactNode;
 }
 /**

package/dist/components/text-input/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/components/text-input/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,SAAS,EAGV,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,CACP;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qEAAqE;IACrE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uFAAuF;IACvF,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,qBAAqB;IACrB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED;;;GAGG;AACH,QAAA,MAAM,SAAS,6GAuJd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/components/text-input/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,SAAS,EAGV,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,CACP;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qEAAqE;IACrE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uFAAuF;IACvF,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,sEAAsE;IACtE,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED;;;GAGG;AACH,QAAA,MAAM,SAAS,6GAuJd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/text-input/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sources":["../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import type {\n  InputHTMLAttributes,\n  ReactNode,\n  ChangeEvent,\n  RefCallback,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextInput.module.scss';\n\nexport type TextInputSize = 'small' | 'medium' | 'large';\n\nexport interface TextInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label content. When provided, label floats on focus or when value is non-empty. */\n  label?: ReactNode;\n  /** Leading icon (e.g. <Icon glyph={<SearchIcon />} size=\"16\" />). */\n  leadingIcon?: ReactNode;\n  /** Max length for the input; used with showCharacterCount for counter. */\n  maxLength?: number;\n  /** When true with maxLength, shows \"current / max\" character count below input. */\n  showCharacterCount?: boolean;\n  /** Size variant. Figma: Small (32px), Medium (40px), Large (48px). Default: Medium. */\n  size?: TextInputSize;\n  /** Trailing icon. */\n  trailingIcon?: ReactNode;\n}\n\n/**\n * Text Inputs let people enter and edit a single line of text — names, emails, search\n * queries, channel titles. They're the workhorse of every form and modal in Mattermost.\n */\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  function TextInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      leadingIcon,\n      trailingIcon,\n      invalid = false,\n      maxLength,\n      showCharacterCount = false,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          const cleanup = (ref as RefCallback<HTMLInputElement>)(node);\n          return () => {\n            inputRef.current = null;\n            if (typeof cleanup === 'function') cleanup();\n          };\n        }\n        if (ref) ref.current = node;\n      },\n      [ref],\n    );\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 sizeClass = styles[`text-input--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['text-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['text-input--label-floated'] : '';\n    const hasLeadingClass =\n      leadingIcon != null ? styles['text-input--has-leading-icon'] : '';\n    const hasTrailingClass =\n      trailingIcon != null ? styles['text-input--has-trailing-icon'] : '';\n\n    const rootClass = [\n      styles['text-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const currentLength = typeof value === 'string' ? value.length : 0;\n    const counterId =\n      showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['text-input__wrapper']}>\n          <label className={styles['text-input__inner']}>\n            {label != null && (\n              <span className={styles['text-input__label']}>{label}</span>\n            )}\n            {leadingIcon != null && (\n              <span className={styles['text-input__leading-icon']}>\n                {leadingIcon}\n              </span>\n            )}\n            <input\n              ref={setInputRef}\n              id={id}\n              className={styles['text-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              maxLength={maxLength}\n              disabled={disabled}\n              readOnly={readOnly}\n              aria-invalid={invalid ? true : undefined}\n              aria-describedby={\n                [describedBy, counterId].filter(Boolean).join(' ') || undefined\n              }\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {trailingIcon != null && (\n              <span className={styles['text-input__trailing-icon']}>\n                {trailingIcon}\n              </span>\n            )}\n          </label>\n        </div>\n        {showCharacterCount && maxLength != null && (\n          <div\n            id={counterId}\n            className={styles['text-input__counter']}\n            aria-live=\"polite\"\n          >\n            {currentLength} / {maxLength}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextInput;\n"],"names":["TextInput","forwardRef","className","size","label","leadingIcon","trailingIcon","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","setInputRef","useCallback","node","cleanup","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","rootClass","currentLength","counterId","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"TextInput.js","sources":["../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import type {\n  InputHTMLAttributes,\n  ReactNode,\n  ChangeEvent,\n  RefCallback,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextInput.module.scss';\n\nexport type TextInputSize = 'small' | 'medium' | 'large';\n\nexport interface TextInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label content. When provided, label floats on focus or when value is non-empty. */\n  label?: ReactNode;\n  /** Leading icon (e.g. <Icon glyph={<SearchIcon />} size=\"16\" />). */\n  leadingIcon?: ReactNode;\n  /** Max length for the input; used with showCharacterCount for counter. */\n  maxLength?: number;\n  /** When true with maxLength, shows \"current / max\" character count below input. */\n  showCharacterCount?: boolean;\n  /** Size variant. Figma: Small (32px), Medium (40px), Large (48px). Default: Medium. */\n  size?: TextInputSize;\n  /** Trailing icon (e.g. `<Icon glyph={<SomeIcon />} size=\"16\" />`). */\n  trailingIcon?: ReactNode;\n}\n\n/**\n * Text Inputs let people enter and edit a single line of text — names, emails, search\n * queries, channel titles. They're the workhorse of every form and modal in Mattermost.\n */\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  function TextInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      leadingIcon,\n      trailingIcon,\n      invalid = false,\n      maxLength,\n      showCharacterCount = false,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          const cleanup = (ref as RefCallback<HTMLInputElement>)(node);\n          return () => {\n            inputRef.current = null;\n            if (typeof cleanup === 'function') cleanup();\n          };\n        }\n        if (ref) ref.current = node;\n      },\n      [ref],\n    );\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 sizeClass = styles[`text-input--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['text-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['text-input--label-floated'] : '';\n    const hasLeadingClass =\n      leadingIcon != null ? styles['text-input--has-leading-icon'] : '';\n    const hasTrailingClass =\n      trailingIcon != null ? styles['text-input--has-trailing-icon'] : '';\n\n    const rootClass = [\n      styles['text-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const currentLength = typeof value === 'string' ? value.length : 0;\n    const counterId =\n      showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['text-input__wrapper']}>\n          <label className={styles['text-input__inner']}>\n            {label != null && (\n              <span className={styles['text-input__label']}>{label}</span>\n            )}\n            {leadingIcon != null && (\n              <span className={styles['text-input__leading-icon']}>\n                {leadingIcon}\n              </span>\n            )}\n            <input\n              ref={setInputRef}\n              id={id}\n              className={styles['text-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              maxLength={maxLength}\n              disabled={disabled}\n              readOnly={readOnly}\n              aria-invalid={invalid ? true : undefined}\n              aria-describedby={\n                [describedBy, counterId].filter(Boolean).join(' ') || undefined\n              }\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {trailingIcon != null && (\n              <span className={styles['text-input__trailing-icon']}>\n                {trailingIcon}\n              </span>\n            )}\n          </label>\n        </div>\n        {showCharacterCount && maxLength != null && (\n          <div\n            id={counterId}\n            className={styles['text-input__counter']}\n            aria-live=\"polite\"\n          >\n            {currentLength} / {maxLength}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextInput;\n"],"names":["TextInput","forwardRef","className","size","label","leadingIcon","trailingIcon","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","setInputRef","useCallback","node","cleanup","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","rootClass","currentLength","counterId","jsxs","jsx"],"mappings":"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"}

package/dist/components/thread-footer/ThreadFooter.module.css

@@ -1 +1 @@
-._thread-footer_953ir_2{--thread-footer-focus-ring-color: var(--focus-ring-color);display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-s) var(--spacing-l)}._thread-footer__inner_953ir_9{display:inline-flex;align-items:center;padding:0 var(--spacing-s);border-radius:var(--radius-s)}._thread-footer__avatars-group_953ir_15{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding-right:var(--spacing-xxxs)}._thread-footer__status-hint_953ir_21{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._thread-footer__unread-dot_953ir_32{display:block;width:8px;height:8px;border-radius:var(--radius-full);background-color:var(--link-color);flex-shrink:0}._thread-footer__mention-badge_953ir_40{display:inline-flex;flex-shrink:0}._thread-footer__buttons_953ir_44{display:inline-flex;align-items:center;gap:0}._thread-footer__reply-btn_953ir_49,._thread-footer__follow-btn_953ir_49{--focus-ring-color: var(--thread-footer-focus-ring-color)}._thread-footer_953ir_2 ._thread-footer__reply-btn_953ir_49[class*=button--emphasis-quaternary],._thread-footer_953ir_2 ._thread-footer__follow-btn_953ir_49:not(._thread-footer__follow-btn--following_953ir_52)[class*=button--emphasis-quaternary]{color:rgba(var(--center-channel-color-rgb),.75)}._thread-footer_953ir_2 ._thread-footer__reply-btn_953ir_49[class*=button--emphasis-quaternary]:hover:not(:disabled),._thread-footer_953ir_2 ._thread-footer__follow-btn_953ir_49:not(._thread-footer__follow-btn--following_953ir_52)[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_953ir_2 ._thread-footer__reply-btn--hovered_953ir_58[class*=button--emphasis-quaternary]{background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_953ir_2 ._thread-footer__follow-btn--following_953ir_52[class*=button--emphasis-quaternary]{color:var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._thread-footer_953ir_2 ._thread-footer__follow-btn--following_953ir_52[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._thread-footer__btn-label_953ir_68{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:15px;white-space:nowrap}._thread-footer__divider_953ir_75{box-sizing:border-box;width:1px;min-width:1px;max-width:1px;height:16px;padding:0;margin:0;border:0;background-color:rgba(var(--center-channel-color-rgb),.16);flex-shrink:0;transition:opacity var(--duration-quick) var(--ease-transition)}._thread-footer__buttons_953ir_44:has(._thread-footer__follow-btn--following_953ir_52)>._thread-footer__divider_953ir_75:first-of-type,._thread-footer__buttons_953ir_44:has(._thread-footer__follow-btn--following_953ir_52)>._thread-footer__last-reply-group_953ir_88>._thread-footer__divider_953ir_75{opacity:0}._thread-footer__buttons_953ir_44:not(:has(._thread-footer__follow-btn--following_953ir_52)):has(._thread-footer__reply-btn_953ir_49:hover,._thread-footer__reply-btn--hovered_953ir_58,._thread-footer__reply-btn_953ir_49:focus-visible,._thread-footer__follow-btn_953ir_49:hover,._thread-footer__follow-btn_953ir_49:focus-visible)>._thread-footer__divider_953ir_75:first-of-type{opacity:0}._thread-footer__last-reply-group_953ir_88{display:inline-flex;align-items:center;gap:0;overflow:hidden;max-width:0;opacity:0;transition:max-width var(--duration-quick) var(--ease-transition),opacity var(--duration-quick) var(--ease-transition)}._thread-footer--following_953ir_107:hover ._thread-footer__last-reply-group_953ir_88,._thread-footer--following_953ir_107:focus-within ._thread-footer__last-reply-group_953ir_88,._thread-footer--following_953ir_107._thread-footer--hovered_953ir_107 ._thread-footer__last-reply-group_953ir_88{max-width:10rem;opacity:1}._thread-footer__last-reply_953ir_88{padding:4.5px var(--spacing-s);color:rgba(var(--center-channel-color-rgb),.64);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:15px;white-space:nowrap}
+._thread-footer_k8u9j_2{--thread-footer-focus-ring-color: var(--focus-ring-color);display:flex;flex-direction:column;align-items:flex-start;padding:0 var(--spacing-l)}._thread-footer__inner_k8u9j_9{display:inline-flex;align-items:center;padding:0 var(--spacing-s);border-radius:var(--radius-s)}._thread-footer__avatars-group_k8u9j_15{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding-right:var(--spacing-xxxs)}._thread-footer__status-hint_k8u9j_21{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._thread-footer__unread-dot_k8u9j_32{display:block;width:8px;height:8px;border-radius:var(--radius-full);background-color:var(--link-color);flex-shrink:0}._thread-footer__mention-badge_k8u9j_40{display:inline-flex;flex-shrink:0}._thread-footer__buttons_k8u9j_44{display:inline-flex;align-items:center;gap:0}._thread-footer__reply-btn_k8u9j_49,._thread-footer__follow-btn_k8u9j_49{--focus-ring-color: var(--thread-footer-focus-ring-color)}._thread-footer_k8u9j_2 ._thread-footer__reply-btn_k8u9j_49[class*=button--emphasis-quaternary],._thread-footer_k8u9j_2 ._thread-footer__follow-btn_k8u9j_49:not(._thread-footer__follow-btn--following_k8u9j_52)[class*=button--emphasis-quaternary]{color:rgba(var(--center-channel-color-rgb),.75)}._thread-footer_k8u9j_2 ._thread-footer__reply-btn_k8u9j_49[class*=button--emphasis-quaternary]:hover:not(:disabled),._thread-footer_k8u9j_2 ._thread-footer__follow-btn_k8u9j_49:not(._thread-footer__follow-btn--following_k8u9j_52)[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_k8u9j_2 ._thread-footer__reply-btn--hovered_k8u9j_58[class*=button--emphasis-quaternary]{background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_k8u9j_2 ._thread-footer__follow-btn--following_k8u9j_52[class*=button--emphasis-quaternary]{color:var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._thread-footer_k8u9j_2 ._thread-footer__follow-btn--following_k8u9j_52[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._thread-footer__btn-label_k8u9j_68{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:15px;white-space:nowrap}._thread-footer__divider_k8u9j_75{box-sizing:border-box;width:1px;min-width:1px;max-width:1px;height:16px;padding:0;margin:0;border:0;background-color:rgba(var(--center-channel-color-rgb),.16);flex-shrink:0;transition:opacity var(--duration-quick) var(--ease-transition)}._thread-footer__buttons_k8u9j_44:has(._thread-footer__follow-btn--following_k8u9j_52)>._thread-footer__divider_k8u9j_75:first-of-type,._thread-footer__buttons_k8u9j_44:has(._thread-footer__follow-btn--following_k8u9j_52)>._thread-footer__last-reply-group_k8u9j_88>._thread-footer__divider_k8u9j_75{opacity:0}._thread-footer__buttons_k8u9j_44:not(:has(._thread-footer__follow-btn--following_k8u9j_52)):has(._thread-footer__reply-btn_k8u9j_49:hover,._thread-footer__reply-btn--hovered_k8u9j_58,._thread-footer__reply-btn_k8u9j_49:focus-visible,._thread-footer__follow-btn_k8u9j_49:hover,._thread-footer__follow-btn_k8u9j_49:focus-visible)>._thread-footer__divider_k8u9j_75:first-of-type{opacity:0}._thread-footer__last-reply-group_k8u9j_88{display:inline-flex;align-items:center;gap:0;overflow:hidden;max-width:0;opacity:0;transition:max-width var(--duration-quick) var(--ease-transition),opacity var(--duration-quick) var(--ease-transition)}._thread-footer--following_k8u9j_107:hover ._thread-footer__last-reply-group_k8u9j_88,._thread-footer--following_k8u9j_107:focus-within ._thread-footer__last-reply-group_k8u9j_88,._thread-footer--following_k8u9j_107._thread-footer--hovered_k8u9j_107 ._thread-footer__last-reply-group_k8u9j_88{max-width:10rem;opacity:1}._thread-footer__last-reply_k8u9j_88{padding:4.5px var(--spacing-s);color:rgba(var(--center-channel-color-rgb),.64);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:15px;white-space:nowrap}

package/dist/components/thread-footer/ThreadFooter.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ThreadFooter.module.css');const r={"thread-footer":"_thread-footer_953ir_2","thread-footer__inner":"_thread-footer__inner_953ir_9","thread-footer__avatars-group":"_thread-footer__avatars-group_953ir_15","thread-footer__status-hint":"_thread-footer__status-hint_953ir_21","thread-footer__unread-dot":"_thread-footer__unread-dot_953ir_32","thread-footer__mention-badge":"_thread-footer__mention-badge_953ir_40","thread-footer__buttons":"_thread-footer__buttons_953ir_44","thread-footer__reply-btn":"_thread-footer__reply-btn_953ir_49","thread-footer__follow-btn":"_thread-footer__follow-btn_953ir_49","thread-footer__follow-btn--following":"_thread-footer__follow-btn--following_953ir_52","thread-footer__reply-btn--hovered":"_thread-footer__reply-btn--hovered_953ir_58","thread-footer__btn-label":"_thread-footer__btn-label_953ir_68","thread-footer__divider":"_thread-footer__divider_953ir_75","thread-footer__last-reply-group":"_thread-footer__last-reply-group_953ir_88","thread-footer--following":"_thread-footer--following_953ir_107","thread-footer--hovered":"_thread-footer--hovered_953ir_107","thread-footer__last-reply":"_thread-footer__last-reply_953ir_88"};exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ThreadFooter.module.css');const e={"thread-footer":"_thread-footer_k8u9j_2","thread-footer__inner":"_thread-footer__inner_k8u9j_9","thread-footer__avatars-group":"_thread-footer__avatars-group_k8u9j_15","thread-footer__status-hint":"_thread-footer__status-hint_k8u9j_21","thread-footer__unread-dot":"_thread-footer__unread-dot_k8u9j_32","thread-footer__mention-badge":"_thread-footer__mention-badge_k8u9j_40","thread-footer__buttons":"_thread-footer__buttons_k8u9j_44","thread-footer__reply-btn":"_thread-footer__reply-btn_k8u9j_49","thread-footer__follow-btn":"_thread-footer__follow-btn_k8u9j_49","thread-footer__follow-btn--following":"_thread-footer__follow-btn--following_k8u9j_52","thread-footer__reply-btn--hovered":"_thread-footer__reply-btn--hovered_k8u9j_58","thread-footer__btn-label":"_thread-footer__btn-label_k8u9j_68","thread-footer__divider":"_thread-footer__divider_k8u9j_75","thread-footer__last-reply-group":"_thread-footer__last-reply-group_k8u9j_88","thread-footer--following":"_thread-footer--following_k8u9j_107","thread-footer--hovered":"_thread-footer--hovered_k8u9j_107","thread-footer__last-reply":"_thread-footer__last-reply_k8u9j_88"};exports.default=e;
 //# sourceMappingURL=ThreadFooter.module.scss.cjs.map

package/dist/components/thread-footer/ThreadFooter.module.scss.js

@@ -1,23 +1,23 @@
-import './ThreadFooter.module.css';const r = {
-  "thread-footer": "_thread-footer_953ir_2",
-  "thread-footer__inner": "_thread-footer__inner_953ir_9",
-  "thread-footer__avatars-group": "_thread-footer__avatars-group_953ir_15",
-  "thread-footer__status-hint": "_thread-footer__status-hint_953ir_21",
-  "thread-footer__unread-dot": "_thread-footer__unread-dot_953ir_32",
-  "thread-footer__mention-badge": "_thread-footer__mention-badge_953ir_40",
-  "thread-footer__buttons": "_thread-footer__buttons_953ir_44",
-  "thread-footer__reply-btn": "_thread-footer__reply-btn_953ir_49",
-  "thread-footer__follow-btn": "_thread-footer__follow-btn_953ir_49",
-  "thread-footer__follow-btn--following": "_thread-footer__follow-btn--following_953ir_52",
-  "thread-footer__reply-btn--hovered": "_thread-footer__reply-btn--hovered_953ir_58",
-  "thread-footer__btn-label": "_thread-footer__btn-label_953ir_68",
-  "thread-footer__divider": "_thread-footer__divider_953ir_75",
-  "thread-footer__last-reply-group": "_thread-footer__last-reply-group_953ir_88",
-  "thread-footer--following": "_thread-footer--following_953ir_107",
-  "thread-footer--hovered": "_thread-footer--hovered_953ir_107",
-  "thread-footer__last-reply": "_thread-footer__last-reply_953ir_88"
+import './ThreadFooter.module.css';const _ = {
+  "thread-footer": "_thread-footer_k8u9j_2",
+  "thread-footer__inner": "_thread-footer__inner_k8u9j_9",
+  "thread-footer__avatars-group": "_thread-footer__avatars-group_k8u9j_15",
+  "thread-footer__status-hint": "_thread-footer__status-hint_k8u9j_21",
+  "thread-footer__unread-dot": "_thread-footer__unread-dot_k8u9j_32",
+  "thread-footer__mention-badge": "_thread-footer__mention-badge_k8u9j_40",
+  "thread-footer__buttons": "_thread-footer__buttons_k8u9j_44",
+  "thread-footer__reply-btn": "_thread-footer__reply-btn_k8u9j_49",
+  "thread-footer__follow-btn": "_thread-footer__follow-btn_k8u9j_49",
+  "thread-footer__follow-btn--following": "_thread-footer__follow-btn--following_k8u9j_52",
+  "thread-footer__reply-btn--hovered": "_thread-footer__reply-btn--hovered_k8u9j_58",
+  "thread-footer__btn-label": "_thread-footer__btn-label_k8u9j_68",
+  "thread-footer__divider": "_thread-footer__divider_k8u9j_75",
+  "thread-footer__last-reply-group": "_thread-footer__last-reply-group_k8u9j_88",
+  "thread-footer--following": "_thread-footer--following_k8u9j_107",
+  "thread-footer--hovered": "_thread-footer--hovered_k8u9j_107",
+  "thread-footer__last-reply": "_thread-footer__last-reply_k8u9j_88"
 };
 export {
-  r as default
+  _ as default
 };
 //# sourceMappingURL=ThreadFooter.module.scss.js.map