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

package/dist/components/tour-point/TourPoint.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TourPoint.cjs","sources":["../../../src/components/tour-point/TourPoint.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport PaginationDots from '@/components/pagination-dots/PaginationDots';\nimport { toKebab } from '@/utils/string';\nimport styles from './TourPoint.module.scss';\n\nexport type TourPointPointerPosition =\n  | 'top-center'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-center'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'left-center'\n  | 'right-center';\n\nexport interface TourPointProgress {\n  pages: number;\n  activePage: number;\n  onPageChange?: (page: number) => void;\n}\n\nexport interface TourPointPrimaryAction {\n  label: string;\n  onClick?: () => void;\n}\n\nexport interface TourPointProps {\n  title: string;\n  children: ReactNode;\n  /** Optional image between body copy and footer (e.g. screenshot as an img). */\n  media?: ReactNode;\n  /** Where the pointer sits on the card edge; omit or `none` to hide the pointer. */\n  pointerPosition?: TourPointPointerPosition | 'none';\n  /**\n   * Animated marker at the arrow tip (Figma Pulsing Dot). Only applies when a\n   * pointer is shown. Default on; set false for reduced motion preference at the\n   * callsite or a static tour step.\n   */\n  showPulsingDot?: boolean;\n  onClose?: () => void;\n  progress?: TourPointProgress;\n  primaryAction?: TourPointPrimaryAction;\n  className?: string;\n}\n\nexport default function TourPoint({\n  title,\n  children,\n  media,\n  pointerPosition = 'top-center',\n  showPulsingDot = true,\n  onClose,\n  progress,\n  primaryAction,\n  className = '',\n}: TourPointProps) {\n  const showPointer = pointerPosition !== 'none';\n  const pointerModifier =\n    showPointer &&\n    styles[`tour-point--pointer-${toKebab(pointerPosition as TourPointPointerPosition)}`];\n\n  const rootClass = [\n    styles['tour-point'],\n    pointerModifier,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showFooter = progress != null || primaryAction != null;\n\n  return (\n    <div className={rootClass}>\n      {showPointer && (\n        <span className={styles['tour-point__pointer']} aria-hidden>\n          <span className={styles['tour-point__pointer-triangle']} />\n          {showPulsingDot && (\n            <span className={styles['tour-point__pointer-pulse']}>\n              <span className={styles['tour-point__pointer-pulse-ring']} />\n              <span\n                className={[\n                  styles['tour-point__pointer-pulse-ring'],\n                  styles['tour-point__pointer-pulse-ring--delay'],\n                ].join(' ')}\n              />\n              <span className={styles['tour-point__pointer-pulse-core']} />\n            </span>\n          )}\n        </span>\n      )}\n\n      <div className={styles['tour-point__panel']}>\n        <div className={styles['tour-point__header']}>\n          <h2 className={styles['tour-point__title']}>{title}</h2>\n          {onClose && (\n            <IconButton\n              className={styles['tour-point__close']}\n              aria-label=\"Close\"\n              size=\"small\"\n              padding=\"compact\"\n              style=\"default\"\n              icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n              onClick={onClose}\n            />\n          )}\n        </div>\n\n        <div className={styles['tour-point__body']}>\n          <div className={styles['tour-point__description']}>{children}</div>\n          {media != null && (\n            <div className={styles['tour-point__media']}>{media}</div>\n          )}\n        </div>\n\n        {showFooter && (\n          <div className={styles['tour-point__footer']}>\n            {progress != null ? (\n              <PaginationDots\n                className={styles['tour-point__progress']}\n                pages={progress.pages}\n                activePage={progress.activePage}\n                dotStyle=\"on-primary\"\n                onPageChange={progress.onPageChange}\n              />\n            ) : (\n              <span className={styles['tour-point__footer-spacer']} aria-hidden />\n            )}\n\n            {primaryAction != null ? (\n              <div className={styles['tour-point__next-wrap']}>\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  trailingIcon={\n                    <Icon size=\"16\" glyph={<ChevronRightIcon />} />\n                  }\n                  onClick={primaryAction.onClick}\n                >\n                  {primaryAction.label}\n                </Button>\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["TourPoint","title","children","media","pointerPosition","showPulsingDot","onClose","progress","primaryAction","className","showPointer","pointerModifier","styles","toKebab","rootClass","showFooter","jsxs","jsx","IconButton","Icon","CloseIcon","PaginationDots","Button","ChevronRightIcon"],"mappings":"kfAkDA,SAAwBA,EAAU,CAChC,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,gBAAAC,EAAkB,aAClB,eAAAC,EAAiB,GACjB,QAAAC,EACA,SAAAC,EACA,cAAAC,EACA,UAAAC,EAAY,EACd,EAAmB,CACjB,MAAMC,EAAcN,IAAoB,OAClCO,EACJD,GACAE,UAAO,uBAAuBC,UAAQT,CAA2C,CAAC,EAAE,EAEhFU,EAAY,CAChBF,EAAAA,QAAO,YAAY,EACnBD,EACAF,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELM,EAAaR,GAAY,MAAQC,GAAiB,KAExD,OACEQ,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACb,SAAA,CAAAJ,UACE,OAAA,CAAK,UAAWE,UAAO,qBAAqB,EAAG,cAAW,GACzD,SAAA,CAAAK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,8BAA8B,CAAA,CAAG,EACxDP,GACCW,EAAAA,KAAC,OAAA,CAAK,UAAWJ,UAAO,2BAA2B,EACjD,SAAA,CAAAK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,gCAAgC,CAAA,CAAG,EAC3DK,EAAAA,IAAC,OAAA,CACC,UAAW,CACTL,EAAAA,QAAO,gCAAgC,EACvCA,EAAAA,QAAO,uCAAuC,CAAA,EAC9C,KAAK,GAAG,CAAA,CAAA,EAEZK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,gCAAgC,CAAA,CAAG,CAAA,CAAA,CAC7D,CAAA,EAEJ,EAGFI,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAI,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAK,MAAC,KAAA,CAAG,UAAWL,EAAAA,QAAO,mBAAmB,EAAI,SAAAX,EAAM,EAClDK,GACCW,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWN,EAAAA,QAAO,mBAAmB,EACrC,aAAW,QACX,KAAK,QACL,QAAQ,UACR,MAAM,UACN,WAAOO,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACG,IAAU,EAAI,EAC5C,QAASd,CAAA,CAAA,CACX,EAEJ,EAEAU,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,kBAAkB,EACvC,SAAA,CAAAK,EAAAA,IAAC,MAAA,CAAI,UAAWL,EAAAA,QAAO,yBAAyB,EAAI,SAAAV,EAAS,EAC5DC,GAAS,MACRc,EAAAA,IAAC,MAAA,CAAI,UAAWL,EAAAA,QAAO,mBAAmB,EAAI,SAAAT,CAAA,CAAM,CAAA,EAExD,EAECY,GACCC,EAAAA,KAAC,MAAA,CAAI,UAAWJ,UAAO,oBAAoB,EACxC,SAAA,CAAAL,GAAY,KACXU,EAAAA,IAACI,EAAAA,QAAA,CACC,UAAWT,EAAAA,QAAO,sBAAsB,EACxC,MAAOL,EAAS,MAChB,WAAYA,EAAS,WACrB,SAAS,aACT,aAAcA,EAAS,YAAA,CAAA,QAGxB,OAAA,CAAK,UAAWK,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAAC,EAGnEJ,GAAiB,KAChBS,EAAAA,IAAC,OAAI,UAAWL,UAAO,uBAAuB,EAC5C,SAAAK,EAAAA,IAACK,EAAAA,QAAA,CACC,SAAS,UACT,KAAK,QACL,mBACGH,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACM,IAAiB,EAAI,EAE/C,QAASf,EAAc,QAEtB,SAAAA,EAAc,KAAA,CAAA,EAEnB,EACE,IAAA,CAAA,CACN,CAAA,CAAA,CAEJ,CAAA,EACF,CAEJ"}
+{"version":3,"file":"TourPoint.cjs","sources":["../../../src/components/tour-point/TourPoint.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport PaginationDots from '@/components/pagination-dots/PaginationDots';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './TourPoint.module.scss';\n\nexport type TourPointPointerPosition =\n  | 'top-center'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-center'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'left-center'\n  | 'right-center';\n\nexport interface TourPointProgress {\n  pages: number;\n  activePage: number;\n  onPageChange?: (page: number) => void;\n  /** Accessible name for the step dots. Default: \"Pages\". */\n  label?: string;\n  /** Accessible name for each step dot. Default: `Page {page}`. */\n  formatPageLabel?: (page: number) => string;\n}\n\nexport interface TourPointPrimaryAction {\n  /** Button label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  onClick?: () => void;\n  disabled?: boolean;\n  /** Shows a spinner in the button and disables it. */\n  loading?: boolean;\n}\n\nexport interface TourPointProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children'\n> {\n  /** Tour step heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  children: ReactNode;\n  /** Optional image between body copy and footer (e.g. screenshot as an img). */\n  media?: ReactNode;\n  /** Where the pointer sits on the card edge; omit or `none` to hide the pointer. */\n  pointerPosition?: TourPointPointerPosition | 'none';\n  /**\n   * Animated marker at the arrow tip (Figma Pulsing Dot). Only applies when a\n   * pointer is shown. Default on; set false for reduced motion preference at the\n   * callsite or a static tour step.\n   */\n  showPulsingDot?: boolean;\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  progress?: TourPointProgress;\n  primaryAction?: TourPointPrimaryAction;\n  className?: string;\n}\n\nexport default function TourPoint({\n  title,\n  children,\n  media,\n  pointerPosition = 'top-center',\n  showPulsingDot = true,\n  onClose,\n  closeLabel = 'Close',\n  closeButtonProps,\n  progress,\n  primaryAction,\n  className = '',\n  ...rest\n}: TourPointProps) {\n  const showPointer = pointerPosition !== 'none';\n  const pointerModifier =\n    showPointer &&\n    styles[\n      `tour-point--pointer-${toKebab(pointerPosition as TourPointPointerPosition)}`\n    ];\n\n  const rootClass = [styles['tour-point'], pointerModifier, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const showFooter = progress != null || primaryAction != null;\n\n  return (\n    <div {...rest} className={rootClass}>\n      {showPointer && (\n        <span className={styles['tour-point__pointer']} aria-hidden>\n          <span className={styles['tour-point__pointer-triangle']} />\n          {showPulsingDot && (\n            <span className={styles['tour-point__pointer-pulse']}>\n              <span className={styles['tour-point__pointer-pulse-ring']} />\n              <span\n                className={[\n                  styles['tour-point__pointer-pulse-ring'],\n                  styles['tour-point__pointer-pulse-ring--delay'],\n                ].join(' ')}\n              />\n              <span className={styles['tour-point__pointer-pulse-core']} />\n            </span>\n          )}\n        </span>\n      )}\n\n      <div className={styles['tour-point__panel']}>\n        <div className={styles['tour-point__header']}>\n          <h2 className={styles['tour-point__title']}>{title}</h2>\n          {onClose && (\n            <IconButton\n              {...closeButtonProps}\n              className={mergeClassNames(\n                styles['tour-point__close'],\n                closeButtonProps?.className,\n              )}\n              aria-label={closeLabel}\n              size=\"small\"\n              padding=\"compact\"\n              style=\"default\"\n              icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n              onClick={onClose}\n            />\n          )}\n        </div>\n\n        <div className={styles['tour-point__body']}>\n          <div className={styles['tour-point__description']}>{children}</div>\n          {media != null && (\n            <div className={styles['tour-point__media']}>{media}</div>\n          )}\n        </div>\n\n        {showFooter && (\n          <div className={styles['tour-point__footer']}>\n            {progress != null ? (\n              <PaginationDots\n                className={styles['tour-point__progress']}\n                pages={progress.pages}\n                activePage={progress.activePage}\n                dotStyle=\"on-primary\"\n                onPageChange={progress.onPageChange}\n                label={progress.label}\n                formatPageLabel={progress.formatPageLabel}\n              />\n            ) : (\n              <span\n                className={styles['tour-point__footer-spacer']}\n                aria-hidden\n              />\n            )}\n\n            {primaryAction != null ? (\n              <div className={styles['tour-point__next-wrap']}>\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  trailingIcon={<Icon size=\"16\" glyph={<ChevronRightIcon />} />}\n                  disabled={primaryAction.disabled}\n                  loading={primaryAction.loading}\n                  onClick={primaryAction.onClick}\n                >\n                  {primaryAction.label}\n                </Button>\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["TourPoint","title","children","media","pointerPosition","showPulsingDot","onClose","closeLabel","closeButtonProps","progress","primaryAction","className","rest","showPointer","pointerModifier","styles","toKebab","rootClass","showFooter","jsxs","jsx","IconButton","mergeClassNames","Icon","CloseIcon","PaginationDots","Button","ChevronRightIcon"],"mappings":"qhBAoEA,SAAwBA,EAAU,CAChC,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,gBAAAC,EAAkB,aAClB,eAAAC,EAAiB,GACjB,QAAAC,EACA,WAAAC,EAAa,QACb,iBAAAC,EACA,SAAAC,EACA,cAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAmB,CACjB,MAAMC,EAAcT,IAAoB,OAClCU,EACJD,GACAE,UACE,uBAAuBC,UAAQZ,CAA2C,CAAC,EAC7E,EAEIa,EAAY,CAACF,UAAO,YAAY,EAAGD,EAAiBH,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG,EAELO,EAAaT,GAAY,MAAQC,GAAiB,KAExD,OACES,EAAAA,KAAC,MAAA,CAAK,GAAGP,EAAM,UAAWK,EACvB,SAAA,CAAAJ,UACE,OAAA,CAAK,UAAWE,UAAO,qBAAqB,EAAG,cAAW,GACzD,SAAA,CAAAK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,8BAA8B,CAAA,CAAG,EACxDV,GACCc,EAAAA,KAAC,OAAA,CAAK,UAAWJ,UAAO,2BAA2B,EACjD,SAAA,CAAAK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,gCAAgC,CAAA,CAAG,EAC3DK,EAAAA,IAAC,OAAA,CACC,UAAW,CACTL,EAAAA,QAAO,gCAAgC,EACvCA,EAAAA,QAAO,uCAAuC,CAAA,EAC9C,KAAK,GAAG,CAAA,CAAA,EAEZK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,gCAAgC,CAAA,CAAG,CAAA,CAAA,CAC7D,CAAA,EAEJ,EAGFI,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAI,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAK,MAAC,KAAA,CAAG,UAAWL,EAAAA,QAAO,mBAAmB,EAAI,SAAAd,EAAM,EAClDK,GACCc,EAAAA,IAACC,EAAAA,QAAA,CACE,GAAGb,EACJ,UAAWc,EAAAA,gBACTP,EAAAA,QAAO,mBAAmB,EAC1BP,GAAA,YAAAA,EAAkB,SAAA,EAEpB,aAAYD,EACZ,KAAK,QACL,QAAQ,UACR,MAAM,UACN,WAAOgB,UAAA,CAAK,KAAK,KAAK,MAAOH,MAACI,IAAU,EAAI,EAC5C,QAASlB,CAAA,CAAA,CACX,EAEJ,EAEAa,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,kBAAkB,EACvC,SAAA,CAAAK,EAAAA,IAAC,MAAA,CAAI,UAAWL,EAAAA,QAAO,yBAAyB,EAAI,SAAAb,EAAS,EAC5DC,GAAS,MACRiB,EAAAA,IAAC,MAAA,CAAI,UAAWL,EAAAA,QAAO,mBAAmB,EAAI,SAAAZ,CAAA,CAAM,CAAA,EAExD,EAECe,GACCC,EAAAA,KAAC,MAAA,CAAI,UAAWJ,UAAO,oBAAoB,EACxC,SAAA,CAAAN,GAAY,KACXW,EAAAA,IAACK,EAAAA,QAAA,CACC,UAAWV,EAAAA,QAAO,sBAAsB,EACxC,MAAON,EAAS,MAChB,WAAYA,EAAS,WACrB,SAAS,aACT,aAAcA,EAAS,aACvB,MAAOA,EAAS,MAChB,gBAAiBA,EAAS,eAAA,CAAA,EAG5BW,EAAAA,IAAC,OAAA,CACC,UAAWL,EAAAA,QAAO,2BAA2B,EAC7C,cAAW,EAAA,CAAA,EAIdL,GAAiB,KAChBU,EAAAA,IAAC,OAAI,UAAWL,UAAO,uBAAuB,EAC5C,SAAAK,EAAAA,IAACM,EAAAA,QAAA,CACC,SAAS,UACT,KAAK,QACL,mBAAeH,UAAA,CAAK,KAAK,KAAK,MAAOH,MAACO,IAAiB,EAAI,EAC3D,SAAUjB,EAAc,SACxB,QAASA,EAAc,QACvB,QAASA,EAAc,QAEtB,SAAAA,EAAc,KAAA,CAAA,EAEnB,EACE,IAAA,CAAA,CACN,CAAA,CAAA,CAEJ,CAAA,EACF,CAEJ"}

package/dist/components/tour-point/TourPoint.css

@@ -0,0 +1 @@
+@keyframes _tour-point-panel-in_1kzq3_1{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes _tour-point-pulse-ring_1kzq3_1{0%{transform:scale(1);opacity:0}2.25%{opacity:.52}8.25%{opacity:.38}37.5%,to{transform:scale(4.25);opacity:0}}._tour-point_1kzq3_39{position:relative;display:inline-flex;flex-direction:column;align-items:stretch;max-width:352px;min-width:280px}._tour-point__pointer_1kzq3_47{position:absolute;z-index:2;pointer-events:none;overflow:visible}._tour-point__pointer-triangle_1kzq3_53{position:relative;z-index:2;display:block;width:100%;height:100%;background-color:var(--button-bg)}._tour-point__pointer-pulse_1kzq3_61{position:absolute;z-index:0;width:40px;height:40px;pointer-events:none}._tour-point__pointer-pulse-ring_1kzq3_68{position:absolute;left:50%;top:50%;z-index:0;width:12px;height:12px;margin:calc(-1 * var(--spacing-xxs)) 0 0 calc(-1 * var(--spacing-xxs));border-radius:var(--radius-pill);background-color:rgba(var(--color-success-rgb),.36);transform-origin:center center;animation:_tour-point-pulse-ring_1kzq3_1 calc(4 * var(--duration-moderate) + 40 * var(--duration-quick) / 3) linear infinite;will-change:transform,opacity}._tour-point__pointer-pulse-ring--delay_1kzq3_82{animation-delay:calc(2 * var(--duration-moderate))}@media(prefers-reduced-motion:reduce){._tour-point__pointer-pulse-ring_1kzq3_68{animation:none;opacity:0}}._tour-point__pointer-pulse-core_1kzq3_91{position:absolute;left:50%;top:50%;z-index:1;width:12px;height:12px;margin:calc(-1 * var(--spacing-xxs)) 0 0 calc(-1 * var(--spacing-xxs));border-radius:var(--radius-pill);background-color:var(--color-success)}._tour-point__panel_1kzq3_102{position:relative;z-index:1;display:flex;flex-direction:column;border-radius:var(--radius-m);background-color:var(--button-bg);box-shadow:var(--elevation-4);animation:_tour-point-panel-in_1kzq3_1 var(--duration-quick) var(--ease-entrance) both}._tour-point--pointer-top-center_1kzq3_112 ._tour-point__panel_1kzq3_102,._tour-point--pointer-top-left_1kzq3_112 ._tour-point__panel_1kzq3_102,._tour-point--pointer-top-right_1kzq3_112 ._tour-point__panel_1kzq3_102{transform-origin:50% 0}._tour-point--pointer-bottom-center_1kzq3_115 ._tour-point__panel_1kzq3_102,._tour-point--pointer-bottom-left_1kzq3_115 ._tour-point__panel_1kzq3_102,._tour-point--pointer-bottom-right_1kzq3_115 ._tour-point__panel_1kzq3_102{transform-origin:50% 100%}._tour-point--pointer-left-center_1kzq3_118 ._tour-point__panel_1kzq3_102{transform-origin:0 50%}._tour-point--pointer-right-center_1kzq3_121 ._tour-point__panel_1kzq3_102{transform-origin:100% 50%}._tour-point__header_1kzq3_124{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-m);padding:var(--spacing-xl) var(--spacing-xl) 0}._tour-point_1kzq3_39 ._tour-point__panel_1kzq3_102 ._tour-point__header_1kzq3_124 ._tour-point__close_1kzq3_131{--focus-ring-color: var(--button-color);position:relative;top:-4px;right:-4px;color:color-mix(in srgb,var(--button-color) 64%,transparent)}._tour-point_1kzq3_39 ._tour-point__panel_1kzq3_102 ._tour-point__header_1kzq3_124 ._tour-point__close_1kzq3_131:hover:not(:disabled):not(:active){background-color:color-mix(in srgb,var(--button-color) 8%,transparent);color:color-mix(in srgb,var(--button-color) 75%,transparent)}._tour-point_1kzq3_39 ._tour-point__panel_1kzq3_102 ._tour-point__header_1kzq3_124 ._tour-point__close_1kzq3_131:active:not(:disabled){background-color:color-mix(in srgb,var(--button-color) 20%,transparent)}._tour-point__title_1kzq3_145{margin:0;padding-right:var(--spacing-xs);font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--neutral-0)}._tour-point__body_1kzq3_154{display:flex;flex-direction:column;gap:var(--spacing-m);padding:var(--spacing-m) var(--spacing-xl) var(--spacing-xl)}._tour-point__description_1kzq3_160{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:color-mix(in srgb,var(--neutral-0) 92%,transparent)}._tour-point__media_1kzq3_166{border-radius:var(--radius-s);background-color:var(--color-blue-800);padding:var(--spacing-m);color:color-mix(in srgb,var(--neutral-0) 88%,transparent);font-size:var(--font-size-75);line-height:var(--line-height-100);border:1px solid color-mix(in srgb,var(--neutral-0) 20%,transparent)}._tour-point__media_1kzq3_166 img{display:block;width:100%;height:auto;border-radius:var(--radius-xs)}._tour-point__footer_1kzq3_181{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-l);padding:0 var(--spacing-xl) var(--spacing-xl)}._tour-point__footer-spacer_1kzq3_188{flex:1 0 0;min-width:0}._tour-point__progress_1kzq3_192,._tour-point__next-wrap_1kzq3_195{flex-shrink:0}._tour-point__next-wrap_1kzq3_195 button{--focus-ring-color: var(--neutral-0);--button-fg: var(--button-bg);background-color:var(--neutral-0);border-color:transparent;color:var(--button-bg);transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._tour-point__next-wrap_1kzq3_195 button:hover:not(:disabled){background-color:color-mix(in srgb,var(--neutral-0) 92%,transparent)}._tour-point__next-wrap_1kzq3_195 button:active:not(:disabled){background-color:color-mix(in srgb,var(--neutral-0) 86%,transparent)}._tour-point--pointer-top-center_1kzq3_112 ._tour-point__pointer_1kzq3_47{top:-9px;left:50%;width:18px;height:9px;transform:translate(-50%)}._tour-point--pointer-top-center_1kzq3_112 ._tour-point__pointer-triangle_1kzq3_53{clip-path:polygon(50% 0%,0% 100%,100% 100%)}._tour-point--pointer-top-center_1kzq3_112 ._tour-point__pointer-pulse_1kzq3_61{left:50%;top:0;margin-left:calc(-1 * var(--spacing-xl));margin-top:calc(-1 * var(--spacing-xl))}._tour-point--pointer-top-left_1kzq3_112 ._tour-point__pointer_1kzq3_47{top:-9px;left:var(--spacing-xl);width:18px;height:9px;transform:translate(-50%)}._tour-point--pointer-top-left_1kzq3_112 ._tour-point__pointer-triangle_1kzq3_53{clip-path:polygon(50% 0%,0% 100%,100% 100%)}._tour-point--pointer-top-left_1kzq3_112 ._tour-point__pointer-pulse_1kzq3_61{left:50%;top:0;margin-left:calc(-1 * var(--spacing-xl));margin-top:calc(-1 * var(--spacing-xl))}._tour-point--pointer-top-right_1kzq3_112 ._tour-point__pointer_1kzq3_47{top:-9px;right:var(--spacing-xl);width:18px;height:9px;transform:translate(50%)}._tour-point--pointer-top-right_1kzq3_112 ._tour-point__pointer-triangle_1kzq3_53{clip-path:polygon(50% 0%,0% 100%,100% 100%)}._tour-point--pointer-top-right_1kzq3_112 ._tour-point__pointer-pulse_1kzq3_61{left:50%;top:0;margin-left:calc(-1 * var(--spacing-xl));margin-top:calc(-1 * var(--spacing-xl))}._tour-point--pointer-bottom-center_1kzq3_115 ._tour-point__pointer_1kzq3_47{bottom:-9px;left:50%;width:18px;height:9px;transform:translate(-50%)}._tour-point--pointer-bottom-center_1kzq3_115 ._tour-point__pointer-triangle_1kzq3_53{clip-path:polygon(50% 100%,0% 0%,100% 0%)}._tour-point--pointer-bottom-center_1kzq3_115 ._tour-point__pointer-pulse_1kzq3_61{left:50%;bottom:0;margin-left:calc(-1 * var(--spacing-xl));margin-bottom:calc(-1 * var(--spacing-xl))}._tour-point--pointer-bottom-left_1kzq3_115 ._tour-point__pointer_1kzq3_47{bottom:-9px;left:var(--spacing-xl);width:18px;height:9px;transform:translate(-50%)}._tour-point--pointer-bottom-left_1kzq3_115 ._tour-point__pointer-triangle_1kzq3_53{clip-path:polygon(50% 100%,0% 0%,100% 0%)}._tour-point--pointer-bottom-left_1kzq3_115 ._tour-point__pointer-pulse_1kzq3_61{left:50%;bottom:0;margin-left:calc(-1 * var(--spacing-xl));margin-bottom:calc(-1 * var(--spacing-xl))}._tour-point--pointer-bottom-right_1kzq3_115 ._tour-point__pointer_1kzq3_47{bottom:-9px;right:var(--spacing-xl);width:18px;height:9px;transform:translate(50%)}._tour-point--pointer-bottom-right_1kzq3_115 ._tour-point__pointer-triangle_1kzq3_53{clip-path:polygon(50% 100%,0% 0%,100% 0%)}._tour-point--pointer-bottom-right_1kzq3_115 ._tour-point__pointer-pulse_1kzq3_61{left:50%;bottom:0;margin-left:calc(-1 * var(--spacing-xl));margin-bottom:calc(-1 * var(--spacing-xl))}._tour-point--pointer-left-center_1kzq3_118 ._tour-point__pointer_1kzq3_47{left:-9px;top:50%;width:9px;height:18px;transform:translateY(-50%)}._tour-point--pointer-left-center_1kzq3_118 ._tour-point__pointer-triangle_1kzq3_53{clip-path:polygon(0% 50%,100% 0%,100% 100%)}._tour-point--pointer-left-center_1kzq3_118 ._tour-point__pointer-pulse_1kzq3_61{left:0;top:50%;margin-left:calc(-1 * var(--spacing-xl));margin-top:calc(-1 * var(--spacing-xl))}._tour-point--pointer-right-center_1kzq3_121 ._tour-point__pointer_1kzq3_47{right:-9px;top:50%;width:9px;height:18px;transform:translateY(-50%)}._tour-point--pointer-right-center_1kzq3_121 ._tour-point__pointer-triangle_1kzq3_53{clip-path:polygon(100% 50%,0% 0%,0% 100%)}._tour-point--pointer-right-center_1kzq3_121 ._tour-point__pointer-pulse_1kzq3_61{right:0;top:50%;margin-right:calc(-1 * var(--spacing-xl));margin-top:calc(-1 * var(--spacing-xl))}

package/dist/components/tour-point/TourPoint.d.ts

@@ -1,16 +1,26 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
 export type TourPointPointerPosition = 'top-center' | 'top-left' | 'top-right' | 'bottom-center' | 'bottom-left' | 'bottom-right' | 'left-center' | 'right-center';
 export interface TourPointProgress {
     pages: number;
     activePage: number;
     onPageChange?: (page: number) => void;
+    /** Accessible name for the step dots. Default: "Pages". */
+    label?: string;
+    /** Accessible name for each step dot. Default: `Page {page}`. */
+    formatPageLabel?: (page: number) => string;
 }
 export interface TourPointPrimaryAction {
-    label: string;
+    /** Button label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    label: ReactNode;
     onClick?: () => void;
+    disabled?: boolean;
+    /** Shows a spinner in the button and disables it. */
+    loading?: boolean;
 }
-export interface TourPointProps {
-    title: string;
+export interface TourPointProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
+    /** Tour step heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    title: ReactNode;
     children: ReactNode;
     /** Optional image between body copy and footer (e.g. screenshot as an img). */
     media?: ReactNode;
@@ -23,9 +33,13 @@ export interface TourPointProps {
      */
     showPulsingDot?: boolean;
     onClose?: () => void;
+    /** Accessible name for the close button. Default: "Close". */
+    closeLabel?: string;
+    /** Extra attributes for the close button (e.g. `data-testid`). */
+    closeButtonProps?: BuiltInButtonProps;
     progress?: TourPointProgress;
     primaryAction?: TourPointPrimaryAction;
     className?: string;
 }
-export default function TourPoint({ title, children, media, pointerPosition, showPulsingDot, onClose, progress, primaryAction, className, }: TourPointProps): import("react/jsx-runtime").JSX.Element;
+export default function TourPoint({ title, children, media, pointerPosition, showPulsingDot, onClose, closeLabel, closeButtonProps, progress, primaryAction, className, ...rest }: TourPointProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TourPoint.d.ts.map

package/dist/components/tour-point/TourPoint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TourPoint.d.ts","sourceRoot":"","sources":["../../../src/components/tour-point/TourPoint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,MAAM,MAAM,wBAAwB,GAChC,YAAY,GACZ,UAAU,GACV,WAAW,GACX,eAAe,GACf,aAAa,GACb,cAAc,GACd,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mFAAmF;IACnF,eAAe,CAAC,EAAE,wBAAwB,GAAG,MAAM,CAAC;IACpD;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,eAA8B,EAC9B,cAAqB,EACrB,OAAO,EACP,QAAQ,EACR,aAAa,EACb,SAAc,GACf,EAAE,cAAc,2CA4FhB"}
+{"version":3,"file":"TourPoint.d.ts","sourceRoot":"","sources":["../../../src/components/tour-point/TourPoint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKxD,MAAM,MAAM,wBAAwB,GAChC,YAAY,GACZ,UAAU,GACV,WAAW,GACX,eAAe,GACf,aAAa,GACb,cAAc,GACd,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5C;AAED,MAAM,WAAW,sBAAsB;IACrC,2EAA2E;IAC3E,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,UAAU,CACrB;IACC,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mFAAmF;IACnF,eAAe,CAAC,EAAE,wBAAwB,GAAG,MAAM,CAAC;IACpD;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,eAA8B,EAC9B,cAAqB,EACrB,OAAO,EACP,UAAoB,EACpB,gBAAgB,EAChB,QAAQ,EACR,aAAa,EACb,SAAc,EACd,GAAG,IAAI,EACR,EAAE,cAAc,2CAmGhB"}

package/dist/components/tour-point/TourPoint.js

@@ -1,84 +1,98 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import __f from "@mattermost/compass-icons/components/close.js";const f=__f&&__f.default?__f.default:__f;
-import __g from "@mattermost/compass-icons/components/chevron-right.js";const g=__g&&__g.default?__g.default:__g;
-import v from "../button/Button.js";
-import p from "../icon/Icon.js";
-import C from "../icon-button/IconButton.js";
-import y from "../pagination-dots/PaginationDots.js";
-import { toKebab as P } from "../../utils/string.js";
-import o from "./TourPoint.module.scss.js";
-function F({
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import __v from "@mattermost/compass-icons/components/close.js";const v=__v&&__v.default?__v.default:__v;
+import __C from "@mattermost/compass-icons/components/chevron-right.js";const C=__C&&__C.default?__C.default:__C;
+import I from "../button/Button.js";
+import m from "../icon/Icon.js";
+import j from "../icon-button/IconButton.js";
+import x from "../pagination-dots/PaginationDots.js";
+import { mergeClassNames as y } from "../../utils/props.js";
+import { toKebab as z } from "../../utils/string.js";
+import e from "./TourPoint.module.scss.js";
+function T({
   title: c,
-  children: u,
-  media: a,
+  children: d,
+  media: l,
   pointerPosition: r = "top-center",
-  showPulsingDot: m = !0,
-  onClose: l,
-  progress: n,
-  primaryAction: i,
-  className: _ = ""
+  showPulsingDot: u = !0,
+  onClose: s,
+  closeLabel: _ = "Close",
+  closeButtonProps: t,
+  progress: a,
+  primaryAction: n,
+  className: h = "",
+  ...N
 }) {
-  const s = r !== "none", d = s && o[`tour-point--pointer-${P(r)}`], h = [
-    o["tour-point"],
-    d,
-    _
-  ].filter(Boolean).join(" "), N = n != null || i != null;
-  return /* @__PURE__ */ e("div", { className: h, children: [
-    s && /* @__PURE__ */ e("span", { className: o["tour-point__pointer"], "aria-hidden": !0, children: [
-      /* @__PURE__ */ t("span", { className: o["tour-point__pointer-triangle"] }),
-      m && /* @__PURE__ */ e("span", { className: o["tour-point__pointer-pulse"], children: [
-        /* @__PURE__ */ t("span", { className: o["tour-point__pointer-pulse-ring"] }),
-        /* @__PURE__ */ t(
+  const p = r !== "none", f = p && e[`tour-point--pointer-${z(r)}`], g = [e["tour-point"], f, h].filter(Boolean).join(" "), b = a != null || n != null;
+  return /* @__PURE__ */ i("div", { ...N, className: g, children: [
+    p && /* @__PURE__ */ i("span", { className: e["tour-point__pointer"], "aria-hidden": !0, children: [
+      /* @__PURE__ */ o("span", { className: e["tour-point__pointer-triangle"] }),
+      u && /* @__PURE__ */ i("span", { className: e["tour-point__pointer-pulse"], children: [
+        /* @__PURE__ */ o("span", { className: e["tour-point__pointer-pulse-ring"] }),
+        /* @__PURE__ */ o(
           "span",
           {
             className: [
-              o["tour-point__pointer-pulse-ring"],
-              o["tour-point__pointer-pulse-ring--delay"]
+              e["tour-point__pointer-pulse-ring"],
+              e["tour-point__pointer-pulse-ring--delay"]
             ].join(" ")
           }
         ),
-        /* @__PURE__ */ t("span", { className: o["tour-point__pointer-pulse-core"] })
+        /* @__PURE__ */ o("span", { className: e["tour-point__pointer-pulse-core"] })
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { className: o["tour-point__panel"], children: [
-      /* @__PURE__ */ e("div", { className: o["tour-point__header"], children: [
-        /* @__PURE__ */ t("h2", { className: o["tour-point__title"], children: c }),
-        l && /* @__PURE__ */ t(
-          C,
+    /* @__PURE__ */ i("div", { className: e["tour-point__panel"], children: [
+      /* @__PURE__ */ i("div", { className: e["tour-point__header"], children: [
+        /* @__PURE__ */ o("h2", { className: e["tour-point__title"], children: c }),
+        s && /* @__PURE__ */ o(
+          j,
           {
-            className: o["tour-point__close"],
-            "aria-label": "Close",
+            ...t,
+            className: y(
+              e["tour-point__close"],
+              t == null ? void 0 : t.className
+            ),
+            "aria-label": _,
             size: "small",
             padding: "compact",
             style: "default",
-            icon: /* @__PURE__ */ t(p, { size: "16", glyph: /* @__PURE__ */ t(f, {}) }),
-            onClick: l
+            icon: /* @__PURE__ */ o(m, { size: "16", glyph: /* @__PURE__ */ o(v, {}) }),
+            onClick: s
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: o["tour-point__body"], children: [
-        /* @__PURE__ */ t("div", { className: o["tour-point__description"], children: u }),
-        a != null && /* @__PURE__ */ t("div", { className: o["tour-point__media"], children: a })
+      /* @__PURE__ */ i("div", { className: e["tour-point__body"], children: [
+        /* @__PURE__ */ o("div", { className: e["tour-point__description"], children: d }),
+        l != null && /* @__PURE__ */ o("div", { className: e["tour-point__media"], children: l })
       ] }),
-      N && /* @__PURE__ */ e("div", { className: o["tour-point__footer"], children: [
-        n != null ? /* @__PURE__ */ t(
-          y,
+      b && /* @__PURE__ */ i("div", { className: e["tour-point__footer"], children: [
+        a != null ? /* @__PURE__ */ o(
+          x,
           {
-            className: o["tour-point__progress"],
-            pages: n.pages,
-            activePage: n.activePage,
+            className: e["tour-point__progress"],
+            pages: a.pages,
+            activePage: a.activePage,
             dotStyle: "on-primary",
-            onPageChange: n.onPageChange
+            onPageChange: a.onPageChange,
+            label: a.label,
+            formatPageLabel: a.formatPageLabel
           }
-        ) : /* @__PURE__ */ t("span", { className: o["tour-point__footer-spacer"], "aria-hidden": !0 }),
-        i != null ? /* @__PURE__ */ t("div", { className: o["tour-point__next-wrap"], children: /* @__PURE__ */ t(
-          v,
+        ) : /* @__PURE__ */ o(
+          "span",
+          {
+            className: e["tour-point__footer-spacer"],
+            "aria-hidden": !0
+          }
+        ),
+        n != null ? /* @__PURE__ */ o("div", { className: e["tour-point__next-wrap"], children: /* @__PURE__ */ o(
+          I,
           {
             emphasis: "primary",
             size: "small",
-            trailingIcon: /* @__PURE__ */ t(p, { size: "16", glyph: /* @__PURE__ */ t(g, {}) }),
-            onClick: i.onClick,
-            children: i.label
+            trailingIcon: /* @__PURE__ */ o(m, { size: "16", glyph: /* @__PURE__ */ o(C, {}) }),
+            disabled: n.disabled,
+            loading: n.loading,
+            onClick: n.onClick,
+            children: n.label
           }
         ) }) : null
       ] })
@@ -86,6 +100,6 @@ function F({
   ] });
 }
 export {
-  F as default
+  T as default
 };
 //# sourceMappingURL=TourPoint.js.map

package/dist/components/tour-point/TourPoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"TourPoint.js","sources":["../../../src/components/tour-point/TourPoint.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport PaginationDots from '@/components/pagination-dots/PaginationDots';\nimport { toKebab } from '@/utils/string';\nimport styles from './TourPoint.module.scss';\n\nexport type TourPointPointerPosition =\n  | 'top-center'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-center'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'left-center'\n  | 'right-center';\n\nexport interface TourPointProgress {\n  pages: number;\n  activePage: number;\n  onPageChange?: (page: number) => void;\n}\n\nexport interface TourPointPrimaryAction {\n  label: string;\n  onClick?: () => void;\n}\n\nexport interface TourPointProps {\n  title: string;\n  children: ReactNode;\n  /** Optional image between body copy and footer (e.g. screenshot as an img). */\n  media?: ReactNode;\n  /** Where the pointer sits on the card edge; omit or `none` to hide the pointer. */\n  pointerPosition?: TourPointPointerPosition | 'none';\n  /**\n   * Animated marker at the arrow tip (Figma Pulsing Dot). Only applies when a\n   * pointer is shown. Default on; set false for reduced motion preference at the\n   * callsite or a static tour step.\n   */\n  showPulsingDot?: boolean;\n  onClose?: () => void;\n  progress?: TourPointProgress;\n  primaryAction?: TourPointPrimaryAction;\n  className?: string;\n}\n\nexport default function TourPoint({\n  title,\n  children,\n  media,\n  pointerPosition = 'top-center',\n  showPulsingDot = true,\n  onClose,\n  progress,\n  primaryAction,\n  className = '',\n}: TourPointProps) {\n  const showPointer = pointerPosition !== 'none';\n  const pointerModifier =\n    showPointer &&\n    styles[`tour-point--pointer-${toKebab(pointerPosition as TourPointPointerPosition)}`];\n\n  const rootClass = [\n    styles['tour-point'],\n    pointerModifier,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showFooter = progress != null || primaryAction != null;\n\n  return (\n    <div className={rootClass}>\n      {showPointer && (\n        <span className={styles['tour-point__pointer']} aria-hidden>\n          <span className={styles['tour-point__pointer-triangle']} />\n          {showPulsingDot && (\n            <span className={styles['tour-point__pointer-pulse']}>\n              <span className={styles['tour-point__pointer-pulse-ring']} />\n              <span\n                className={[\n                  styles['tour-point__pointer-pulse-ring'],\n                  styles['tour-point__pointer-pulse-ring--delay'],\n                ].join(' ')}\n              />\n              <span className={styles['tour-point__pointer-pulse-core']} />\n            </span>\n          )}\n        </span>\n      )}\n\n      <div className={styles['tour-point__panel']}>\n        <div className={styles['tour-point__header']}>\n          <h2 className={styles['tour-point__title']}>{title}</h2>\n          {onClose && (\n            <IconButton\n              className={styles['tour-point__close']}\n              aria-label=\"Close\"\n              size=\"small\"\n              padding=\"compact\"\n              style=\"default\"\n              icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n              onClick={onClose}\n            />\n          )}\n        </div>\n\n        <div className={styles['tour-point__body']}>\n          <div className={styles['tour-point__description']}>{children}</div>\n          {media != null && (\n            <div className={styles['tour-point__media']}>{media}</div>\n          )}\n        </div>\n\n        {showFooter && (\n          <div className={styles['tour-point__footer']}>\n            {progress != null ? (\n              <PaginationDots\n                className={styles['tour-point__progress']}\n                pages={progress.pages}\n                activePage={progress.activePage}\n                dotStyle=\"on-primary\"\n                onPageChange={progress.onPageChange}\n              />\n            ) : (\n              <span className={styles['tour-point__footer-spacer']} aria-hidden />\n            )}\n\n            {primaryAction != null ? (\n              <div className={styles['tour-point__next-wrap']}>\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  trailingIcon={\n                    <Icon size=\"16\" glyph={<ChevronRightIcon />} />\n                  }\n                  onClick={primaryAction.onClick}\n                >\n                  {primaryAction.label}\n                </Button>\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["TourPoint","title","children","media","pointerPosition","showPulsingDot","onClose","progress","primaryAction","className","showPointer","pointerModifier","styles","toKebab","rootClass","showFooter","jsxs","jsx","IconButton","Icon","CloseIcon","PaginationDots","Button","ChevronRightIcon"],"mappings":"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"}
+{"version":3,"file":"TourPoint.js","sources":["../../../src/components/tour-point/TourPoint.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport PaginationDots from '@/components/pagination-dots/PaginationDots';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './TourPoint.module.scss';\n\nexport type TourPointPointerPosition =\n  | 'top-center'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-center'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'left-center'\n  | 'right-center';\n\nexport interface TourPointProgress {\n  pages: number;\n  activePage: number;\n  onPageChange?: (page: number) => void;\n  /** Accessible name for the step dots. Default: \"Pages\". */\n  label?: string;\n  /** Accessible name for each step dot. Default: `Page {page}`. */\n  formatPageLabel?: (page: number) => string;\n}\n\nexport interface TourPointPrimaryAction {\n  /** Button label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  onClick?: () => void;\n  disabled?: boolean;\n  /** Shows a spinner in the button and disables it. */\n  loading?: boolean;\n}\n\nexport interface TourPointProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children'\n> {\n  /** Tour step heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  children: ReactNode;\n  /** Optional image between body copy and footer (e.g. screenshot as an img). */\n  media?: ReactNode;\n  /** Where the pointer sits on the card edge; omit or `none` to hide the pointer. */\n  pointerPosition?: TourPointPointerPosition | 'none';\n  /**\n   * Animated marker at the arrow tip (Figma Pulsing Dot). Only applies when a\n   * pointer is shown. Default on; set false for reduced motion preference at the\n   * callsite or a static tour step.\n   */\n  showPulsingDot?: boolean;\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  progress?: TourPointProgress;\n  primaryAction?: TourPointPrimaryAction;\n  className?: string;\n}\n\nexport default function TourPoint({\n  title,\n  children,\n  media,\n  pointerPosition = 'top-center',\n  showPulsingDot = true,\n  onClose,\n  closeLabel = 'Close',\n  closeButtonProps,\n  progress,\n  primaryAction,\n  className = '',\n  ...rest\n}: TourPointProps) {\n  const showPointer = pointerPosition !== 'none';\n  const pointerModifier =\n    showPointer &&\n    styles[\n      `tour-point--pointer-${toKebab(pointerPosition as TourPointPointerPosition)}`\n    ];\n\n  const rootClass = [styles['tour-point'], pointerModifier, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const showFooter = progress != null || primaryAction != null;\n\n  return (\n    <div {...rest} className={rootClass}>\n      {showPointer && (\n        <span className={styles['tour-point__pointer']} aria-hidden>\n          <span className={styles['tour-point__pointer-triangle']} />\n          {showPulsingDot && (\n            <span className={styles['tour-point__pointer-pulse']}>\n              <span className={styles['tour-point__pointer-pulse-ring']} />\n              <span\n                className={[\n                  styles['tour-point__pointer-pulse-ring'],\n                  styles['tour-point__pointer-pulse-ring--delay'],\n                ].join(' ')}\n              />\n              <span className={styles['tour-point__pointer-pulse-core']} />\n            </span>\n          )}\n        </span>\n      )}\n\n      <div className={styles['tour-point__panel']}>\n        <div className={styles['tour-point__header']}>\n          <h2 className={styles['tour-point__title']}>{title}</h2>\n          {onClose && (\n            <IconButton\n              {...closeButtonProps}\n              className={mergeClassNames(\n                styles['tour-point__close'],\n                closeButtonProps?.className,\n              )}\n              aria-label={closeLabel}\n              size=\"small\"\n              padding=\"compact\"\n              style=\"default\"\n              icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n              onClick={onClose}\n            />\n          )}\n        </div>\n\n        <div className={styles['tour-point__body']}>\n          <div className={styles['tour-point__description']}>{children}</div>\n          {media != null && (\n            <div className={styles['tour-point__media']}>{media}</div>\n          )}\n        </div>\n\n        {showFooter && (\n          <div className={styles['tour-point__footer']}>\n            {progress != null ? (\n              <PaginationDots\n                className={styles['tour-point__progress']}\n                pages={progress.pages}\n                activePage={progress.activePage}\n                dotStyle=\"on-primary\"\n                onPageChange={progress.onPageChange}\n                label={progress.label}\n                formatPageLabel={progress.formatPageLabel}\n              />\n            ) : (\n              <span\n                className={styles['tour-point__footer-spacer']}\n                aria-hidden\n              />\n            )}\n\n            {primaryAction != null ? (\n              <div className={styles['tour-point__next-wrap']}>\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  trailingIcon={<Icon size=\"16\" glyph={<ChevronRightIcon />} />}\n                  disabled={primaryAction.disabled}\n                  loading={primaryAction.loading}\n                  onClick={primaryAction.onClick}\n                >\n                  {primaryAction.label}\n                </Button>\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["TourPoint","title","children","media","pointerPosition","showPulsingDot","onClose","closeLabel","closeButtonProps","progress","primaryAction","className","rest","showPointer","pointerModifier","styles","toKebab","rootClass","showFooter","jsxs","jsx","IconButton","mergeClassNames","Icon","CloseIcon","PaginationDots","Button","ChevronRightIcon"],"mappings":"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"}

package/dist/components/tour-point/TourPoint.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TourPoint.module.css');const t={"tour-point":"_tour-point_1llne_28","tour-point__pointer":"_tour-point__pointer_1llne_36","tour-point__pointer-triangle":"_tour-point__pointer-triangle_1llne_42","tour-point__pointer-pulse":"_tour-point__pointer-pulse_1llne_50","tour-point__pointer-pulse-ring":"_tour-point__pointer-pulse-ring_1llne_57","tour-point-pulse-ring":"_tour-point-pulse-ring_1llne_1","tour-point__pointer-pulse-ring--delay":"_tour-point__pointer-pulse-ring--delay_1llne_71","tour-point__pointer-pulse-core":"_tour-point__pointer-pulse-core_1llne_80","tour-point__panel":"_tour-point__panel_1llne_91","tour-point-panel-in":"_tour-point-panel-in_1llne_1","tour-point--pointer-top-center":"_tour-point--pointer-top-center_1llne_101","tour-point--pointer-top-left":"_tour-point--pointer-top-left_1llne_101","tour-point--pointer-top-right":"_tour-point--pointer-top-right_1llne_101","tour-point--pointer-bottom-center":"_tour-point--pointer-bottom-center_1llne_104","tour-point--pointer-bottom-left":"_tour-point--pointer-bottom-left_1llne_104","tour-point--pointer-bottom-right":"_tour-point--pointer-bottom-right_1llne_104","tour-point--pointer-left-center":"_tour-point--pointer-left-center_1llne_107","tour-point--pointer-right-center":"_tour-point--pointer-right-center_1llne_110","tour-point__header":"_tour-point__header_1llne_113","tour-point__close":"_tour-point__close_1llne_120","tour-point__title":"_tour-point__title_1llne_133","tour-point__body":"_tour-point__body_1llne_142","tour-point__description":"_tour-point__description_1llne_148","tour-point__media":"_tour-point__media_1llne_154","tour-point__footer":"_tour-point__footer_1llne_169","tour-point__footer-spacer":"_tour-point__footer-spacer_1llne_176","tour-point__progress":"_tour-point__progress_1llne_180","tour-point__next-wrap":"_tour-point__next-wrap_1llne_183"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TourPoint.css');const t={"tour-point":"_tour-point_1kzq3_39","tour-point__pointer":"_tour-point__pointer_1kzq3_47","tour-point__pointer-triangle":"_tour-point__pointer-triangle_1kzq3_53","tour-point__pointer-pulse":"_tour-point__pointer-pulse_1kzq3_61","tour-point__pointer-pulse-ring":"_tour-point__pointer-pulse-ring_1kzq3_68","tour-point-pulse-ring":"_tour-point-pulse-ring_1kzq3_1","tour-point__pointer-pulse-ring--delay":"_tour-point__pointer-pulse-ring--delay_1kzq3_82","tour-point__pointer-pulse-core":"_tour-point__pointer-pulse-core_1kzq3_91","tour-point__panel":"_tour-point__panel_1kzq3_102","tour-point-panel-in":"_tour-point-panel-in_1kzq3_1","tour-point--pointer-top-center":"_tour-point--pointer-top-center_1kzq3_112","tour-point--pointer-top-left":"_tour-point--pointer-top-left_1kzq3_112","tour-point--pointer-top-right":"_tour-point--pointer-top-right_1kzq3_112","tour-point--pointer-bottom-center":"_tour-point--pointer-bottom-center_1kzq3_115","tour-point--pointer-bottom-left":"_tour-point--pointer-bottom-left_1kzq3_115","tour-point--pointer-bottom-right":"_tour-point--pointer-bottom-right_1kzq3_115","tour-point--pointer-left-center":"_tour-point--pointer-left-center_1kzq3_118","tour-point--pointer-right-center":"_tour-point--pointer-right-center_1kzq3_121","tour-point__header":"_tour-point__header_1kzq3_124","tour-point__close":"_tour-point__close_1kzq3_131","tour-point__title":"_tour-point__title_1kzq3_145","tour-point__body":"_tour-point__body_1kzq3_154","tour-point__description":"_tour-point__description_1kzq3_160","tour-point__media":"_tour-point__media_1kzq3_166","tour-point__footer":"_tour-point__footer_1kzq3_181","tour-point__footer-spacer":"_tour-point__footer-spacer_1kzq3_188","tour-point__progress":"_tour-point__progress_1kzq3_192","tour-point__next-wrap":"_tour-point__next-wrap_1kzq3_195"};exports.default=t;
 //# sourceMappingURL=TourPoint.module.scss.cjs.map

package/dist/components/tour-point/TourPoint.module.scss.js

@@ -1,32 +1,32 @@
-import './TourPoint.module.css';const t = {
-  "tour-point": "_tour-point_1llne_28",
-  "tour-point__pointer": "_tour-point__pointer_1llne_36",
-  "tour-point__pointer-triangle": "_tour-point__pointer-triangle_1llne_42",
-  "tour-point__pointer-pulse": "_tour-point__pointer-pulse_1llne_50",
-  "tour-point__pointer-pulse-ring": "_tour-point__pointer-pulse-ring_1llne_57",
-  "tour-point-pulse-ring": "_tour-point-pulse-ring_1llne_1",
-  "tour-point__pointer-pulse-ring--delay": "_tour-point__pointer-pulse-ring--delay_1llne_71",
-  "tour-point__pointer-pulse-core": "_tour-point__pointer-pulse-core_1llne_80",
-  "tour-point__panel": "_tour-point__panel_1llne_91",
-  "tour-point-panel-in": "_tour-point-panel-in_1llne_1",
-  "tour-point--pointer-top-center": "_tour-point--pointer-top-center_1llne_101",
-  "tour-point--pointer-top-left": "_tour-point--pointer-top-left_1llne_101",
-  "tour-point--pointer-top-right": "_tour-point--pointer-top-right_1llne_101",
-  "tour-point--pointer-bottom-center": "_tour-point--pointer-bottom-center_1llne_104",
-  "tour-point--pointer-bottom-left": "_tour-point--pointer-bottom-left_1llne_104",
-  "tour-point--pointer-bottom-right": "_tour-point--pointer-bottom-right_1llne_104",
-  "tour-point--pointer-left-center": "_tour-point--pointer-left-center_1llne_107",
-  "tour-point--pointer-right-center": "_tour-point--pointer-right-center_1llne_110",
-  "tour-point__header": "_tour-point__header_1llne_113",
-  "tour-point__close": "_tour-point__close_1llne_120",
-  "tour-point__title": "_tour-point__title_1llne_133",
-  "tour-point__body": "_tour-point__body_1llne_142",
-  "tour-point__description": "_tour-point__description_1llne_148",
-  "tour-point__media": "_tour-point__media_1llne_154",
-  "tour-point__footer": "_tour-point__footer_1llne_169",
-  "tour-point__footer-spacer": "_tour-point__footer-spacer_1llne_176",
-  "tour-point__progress": "_tour-point__progress_1llne_180",
-  "tour-point__next-wrap": "_tour-point__next-wrap_1llne_183"
+import './TourPoint.css';const t = {
+  "tour-point": "_tour-point_1kzq3_39",
+  "tour-point__pointer": "_tour-point__pointer_1kzq3_47",
+  "tour-point__pointer-triangle": "_tour-point__pointer-triangle_1kzq3_53",
+  "tour-point__pointer-pulse": "_tour-point__pointer-pulse_1kzq3_61",
+  "tour-point__pointer-pulse-ring": "_tour-point__pointer-pulse-ring_1kzq3_68",
+  "tour-point-pulse-ring": "_tour-point-pulse-ring_1kzq3_1",
+  "tour-point__pointer-pulse-ring--delay": "_tour-point__pointer-pulse-ring--delay_1kzq3_82",
+  "tour-point__pointer-pulse-core": "_tour-point__pointer-pulse-core_1kzq3_91",
+  "tour-point__panel": "_tour-point__panel_1kzq3_102",
+  "tour-point-panel-in": "_tour-point-panel-in_1kzq3_1",
+  "tour-point--pointer-top-center": "_tour-point--pointer-top-center_1kzq3_112",
+  "tour-point--pointer-top-left": "_tour-point--pointer-top-left_1kzq3_112",
+  "tour-point--pointer-top-right": "_tour-point--pointer-top-right_1kzq3_112",
+  "tour-point--pointer-bottom-center": "_tour-point--pointer-bottom-center_1kzq3_115",
+  "tour-point--pointer-bottom-left": "_tour-point--pointer-bottom-left_1kzq3_115",
+  "tour-point--pointer-bottom-right": "_tour-point--pointer-bottom-right_1kzq3_115",
+  "tour-point--pointer-left-center": "_tour-point--pointer-left-center_1kzq3_118",
+  "tour-point--pointer-right-center": "_tour-point--pointer-right-center_1kzq3_121",
+  "tour-point__header": "_tour-point__header_1kzq3_124",
+  "tour-point__close": "_tour-point__close_1kzq3_131",
+  "tour-point__title": "_tour-point__title_1kzq3_145",
+  "tour-point__body": "_tour-point__body_1kzq3_154",
+  "tour-point__description": "_tour-point__description_1kzq3_160",
+  "tour-point__media": "_tour-point__media_1kzq3_166",
+  "tour-point__footer": "_tour-point__footer_1kzq3_181",
+  "tour-point__footer-spacer": "_tour-point__footer-spacer_1kzq3_188",
+  "tour-point__progress": "_tour-point__progress_1kzq3_192",
+  "tour-point__next-wrap": "_tour-point__next-wrap_1kzq3_195"
 };
 export {
   t as default

package/dist/components/unread-badge/UnreadBadge.css

@@ -0,0 +1 @@
+._unread-badge_zggqc_13{display:inline-block;flex-shrink:0;border-radius:var(--radius-pill)}._unread-badge--size-6_zggqc_18{width:6px;height:6px}._unread-badge--size-8_zggqc_22{width:8px;height:8px}._unread-badge--context-team-icon_zggqc_26{background-color:var(--mention-bg)}._unread-badge--context-icon-button_zggqc_29{background-color:var(--button-bg)}

package/dist/components/unread-badge/UnreadBadge.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UnreadBadge.module.css');const e={"unread-badge":"_unread-badge_1a64l_2","unread-badge--size-6":"_unread-badge--size-6_1a64l_7","unread-badge--size-8":"_unread-badge--size-8_1a64l_11","unread-badge--context-team-icon":"_unread-badge--context-team-icon_1a64l_15","unread-badge--context-icon-button":"_unread-badge--context-icon-button_1a64l_18"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UnreadBadge.css');const e={"unread-badge":"_unread-badge_zggqc_13","unread-badge--size-6":"_unread-badge--size-6_zggqc_18","unread-badge--size-8":"_unread-badge--size-8_zggqc_22","unread-badge--context-team-icon":"_unread-badge--context-team-icon_zggqc_26","unread-badge--context-icon-button":"_unread-badge--context-icon-button_zggqc_29"};exports.default=e;
 //# sourceMappingURL=UnreadBadge.module.scss.cjs.map

package/dist/components/unread-badge/UnreadBadge.module.scss.js

@@ -1,9 +1,9 @@
-import './UnreadBadge.module.css';const e = {
-  "unread-badge": "_unread-badge_1a64l_2",
-  "unread-badge--size-6": "_unread-badge--size-6_1a64l_7",
-  "unread-badge--size-8": "_unread-badge--size-8_1a64l_11",
-  "unread-badge--context-team-icon": "_unread-badge--context-team-icon_1a64l_15",
-  "unread-badge--context-icon-button": "_unread-badge--context-icon-button_1a64l_18"
+import './UnreadBadge.css';const e = {
+  "unread-badge": "_unread-badge_zggqc_13",
+  "unread-badge--size-6": "_unread-badge--size-6_zggqc_18",
+  "unread-badge--size-8": "_unread-badge--size-8_zggqc_22",
+  "unread-badge--context-team-icon": "_unread-badge--context-team-icon_zggqc_26",
+  "unread-badge--context-icon-button": "_unread-badge--context-icon-button_zggqc_29"
 };
 export {
   e as default

package/dist/components/user-avatar/UserAvatar.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),v=require("../status-badge/StatusBadge.cjs"),u=require("../../utils/string.cjs"),t=require("./UserAvatar.module.scss.cjs"),c=["red","purple","neutral","blue","cyan","yellow","green","orange"],C={12:"xx-small",16:"xx-small",20:"x-small",24:"x-small",28:"x-small",32:"small",40:"small",48:"small",56:"medium",64:"medium",72:"medium",80:"medium",96:"large",120:"large"};function j(e){let l=0;for(let a=0;a<e.length;a++)l=l*31+e.charCodeAt(a)|0;return c[Math.abs(l)%c.length]}function p(e){var o;const l=e.trim();if(!l)return"";const a=l.split(/\s+/)[0];return a[0].toUpperCase()+(((o=a[1])==null?void 0:o.toLowerCase())??"")}function A({alt:e,className:l="",src:a,name:o,fallbackColor:m,size:s="48",status:d=!1,...f}){const _=t.default[`user-avatar--size-${u.toKebab(s)}`],b=[t.default["user-avatar"],_,l].filter(Boolean).join(" "),n=!a,i=o??e,g=n?p(i):"",h=m??j(i),x=n?t.default[`user-avatar__fallback--${u.toKebab(h)}`]:"";return r.jsxs("div",{className:b,"data-size":s,children:[n?r.jsx("span",{className:[t.default["user-avatar__fallback"],x].filter(Boolean).join(" "),role:"img","aria-label":e,children:g}):r.jsx("img",{...f,alt:e,className:t.default["user-avatar__image"],src:a,width:Number(s),height:Number(s)}),d&&r.jsx("span",{className:t.default["user-avatar__status"],children:r.jsx(v.default,{status:"online",size:C[s]})})]})}exports.default=A;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),f=require("react"),B=require("../status-badge/StatusBadge.cjs"),g=require("../../utils/string.cjs"),l=require("./UserAvatar.module.scss.cjs"),b=["red","purple","neutral","blue","cyan","yellow","green","orange","charcoal","indigo","teal"],F={12:"xx-small",16:"xx-small",20:"x-small",24:"x-small",28:"x-small",32:"small",36:"small",40:"small",48:"small",50:"small",56:"medium",64:"medium",72:"medium",80:"medium",96:"large",120:"large",128:"large"};function U(s){let a=0;for(let e=0;e<s.length;e++)a=a*31+s.charCodeAt(e)|0;return b[Math.abs(a)%b.length]}function w(s){var t;const a=s.trim();if(!a)return"";const e=a.split(/\s+/)[0];return e[0].toUpperCase()+(((t=e[1])==null?void 0:t.toLowerCase())??"")}const L=f.forwardRef(function({alt:a,className:e="",src:t,name:_,fallbackColor:v,size:r="48",status:u,statusLabel:h,onError:o,...x},S){const[A,C]=f.useState(),j=l.default[`user-avatar--size-${g.toKebab(r)}`],p=[l.default["user-avatar"],j,e].filter(Boolean).join(" "),c=!!t&&t===A,n=!t||c,d=_??a,N=n?w(d):"",R=v??U(d),k=n?l.default[`user-avatar__fallback--${g.toKebab(R)}`]:"",m=u===!0?"online":u||void 0,q=F[r];return i.jsxs("div",{ref:S,className:p,"data-size":r,"data-image-failed":c?"true":void 0,children:[n?i.jsx("span",{className:[l.default["user-avatar__fallback"],k].filter(Boolean).join(" "),role:"img","aria-label":a,children:N}):i.jsx("img",{loading:"lazy",...x,onError:y=>{o==null||o(y),C(t)},alt:a,className:l.default["user-avatar__image"],src:t,width:Number(r),height:Number(r)}),m&&i.jsx("span",{className:l.default["user-avatar__status"],children:i.jsx(B.default,{status:m,size:q,label:h,className:l.default["user-avatar__badge"]})})]})});exports.default=L;
 //# sourceMappingURL=UserAvatar.cjs.map

package/dist/components/user-avatar/UserAvatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatar.cjs","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import type { ImgHTMLAttributes } from 'react';\nimport StatusBadge from '@/components/status-badge/StatusBadge';\nimport type { StatusBadgeSize } from '@/components/status-badge/StatusBadge';\nimport { toKebab } from '@/utils/string';\nimport styles from './UserAvatar.module.scss';\n\n/** Figma User Avatar sizes. */\nexport type UserAvatarSize =\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '48'\n  | '56'\n  | '64'\n  | '72'\n  | '80'\n  | '96'\n  | '120';\n\n/** Figma User Avatar Fallback colour variants. */\nexport type UserAvatarFallbackColor =\n  | 'red'\n  | 'purple'\n  | 'neutral'\n  | 'blue'\n  | 'cyan'\n  | 'yellow'\n  | 'green'\n  | 'orange';\n\nexport interface UserAvatarProps extends Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  'src' | 'alt' | 'width' | 'height'\n> {\n  /** Alt text for the avatar image. */\n  alt: string;\n  /** Optional CSS class name. */\n  className?: string;\n  /**\n   * Image URL for the avatar. When omitted, the avatar renders as Fallback\n   * (initials on a deterministic colour background).\n   */\n  src?: string;\n  /**\n   * Display name used to derive initials and the fallback colour. Defaults\n   * to `alt` when not provided.\n   */\n  name?: string;\n  /** Force a specific fallback colour. Hashed from `name`/`alt` if omitted. */\n  fallbackColor?: UserAvatarFallbackColor;\n  /** Size variant. Figma: Size. Default: 48. */\n  size?: UserAvatarSize;\n  /** When true, shows online status badge (green dot with check). Figma: Status = On. */\n  status?: boolean;\n}\n\nconst FALLBACK_COLORS: readonly UserAvatarFallbackColor[] = [\n  'red',\n  'purple',\n  'neutral',\n  'blue',\n  'cyan',\n  'yellow',\n  'green',\n  'orange',\n];\n\n/** Map UserAvatar size to StatusBadge size (Figma scale). */\nconst USER_AVATAR_TO_BADGE_SIZE: Record<UserAvatarSize, StatusBadgeSize> = {\n  '12': 'xx-small',\n  '16': 'xx-small',\n  '20': 'x-small',\n  '24': 'x-small',\n  '28': 'x-small',\n  '32': 'small',\n  '40': 'small',\n  '48': 'small',\n  '56': 'medium',\n  '64': 'medium',\n  '72': 'medium',\n  '80': 'medium',\n  '96': 'large',\n  '120': 'large',\n};\n\nfunction hashFallbackColor(s: string): UserAvatarFallbackColor {\n  let h = 0;\n  for (let i = 0; i < s.length; i++) {\n    h = (h * 31 + s.charCodeAt(i)) | 0;\n  }\n  return FALLBACK_COLORS[Math.abs(h) % FALLBACK_COLORS.length];\n}\n\nfunction getInitials(name: string): string {\n  const trimmed = name.trim();\n  if (!trimmed) return '';\n  const firstName = trimmed.split(/\\s+/)[0]!;\n  return firstName[0]!.toUpperCase() + (firstName[1]?.toLowerCase() ?? '');\n}\n\n/**\n * User Avatars represent a person — usually their uploaded photo, with initials on a colour\n * background as a fallback. Their circular shape distinguishes them from rounded-square Team\n * Avatars at a glance.\n */\nexport default function UserAvatar({\n  alt,\n  className = '',\n  src,\n  name,\n  fallbackColor,\n  size = '48',\n  status = false,\n  ...imgProps\n}: UserAvatarProps) {\n  const sizeClass = styles[`user-avatar--size-${toKebab(size)}`];\n  const rootClass = [styles['user-avatar'], sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const isFallback = !src;\n  const displayName = name ?? alt;\n  const initials = isFallback ? getInitials(displayName) : '';\n  const color = fallbackColor ?? hashFallbackColor(displayName);\n  const fallbackColorClass = isFallback\n    ? styles[`user-avatar__fallback--${toKebab(color)}`]\n    : '';\n\n  return (\n    <div className={rootClass} data-size={size}>\n      {isFallback ? (\n        <span\n          className={[styles['user-avatar__fallback'], fallbackColorClass]\n            .filter(Boolean)\n            .join(' ')}\n          role=\"img\"\n          aria-label={alt}\n        >\n          {initials}\n        </span>\n      ) : (\n        <img\n          {...imgProps}\n          alt={alt}\n          className={styles['user-avatar__image']}\n          src={src}\n          width={Number(size)}\n          height={Number(size)}\n        />\n      )}\n      {status && (\n        <span className={styles['user-avatar__status']}>\n          <StatusBadge status=\"online\" size={USER_AVATAR_TO_BADGE_SIZE[size]} />\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["FALLBACK_COLORS","USER_AVATAR_TO_BADGE_SIZE","hashFallbackColor","s","h","i","getInitials","name","trimmed","firstName","_a","UserAvatar","alt","className","src","fallbackColor","size","status","imgProps","sizeClass","styles","toKebab","rootClass","isFallback","displayName","initials","color","fallbackColorClass","jsxs","jsx","StatusBadge"],"mappings":"2QA4DMA,EAAsD,CAC1D,MACA,SACA,UACA,OACA,OACA,SACA,QACA,QACF,EAGMC,EAAqE,CACzE,GAAM,WACN,GAAM,WACN,GAAM,UACN,GAAM,UACN,GAAM,UACN,GAAM,QACN,GAAM,QACN,GAAM,QACN,GAAM,SACN,GAAM,SACN,GAAM,SACN,GAAM,SACN,GAAM,QACN,IAAO,OACT,EAEA,SAASC,EAAkBC,EAAoC,CAC7D,IAAIC,EAAI,EACR,QAASC,EAAI,EAAGA,EAAIF,EAAE,OAAQE,IAC5BD,EAAKA,EAAI,GAAKD,EAAE,WAAWE,CAAC,EAAK,EAEnC,OAAOL,EAAgB,KAAK,IAAII,CAAC,EAAIJ,EAAgB,MAAM,CAC7D,CAEA,SAASM,EAAYC,EAAsB,OACzC,MAAMC,EAAUD,EAAK,KAAA,EACrB,GAAI,CAACC,EAAS,MAAO,GACrB,MAAMC,EAAYD,EAAQ,MAAM,KAAK,EAAE,CAAC,EACxC,OAAOC,EAAU,CAAC,EAAG,YAAA,KAAiBC,EAAAD,EAAU,CAAC,IAAX,YAAAC,EAAc,gBAAiB,GACvE,CAOA,SAAwBC,EAAW,CACjC,IAAAC,EACA,UAAAC,EAAY,GACZ,IAAAC,EACA,KAAAP,EACA,cAAAQ,EACA,KAAAC,EAAO,KACP,OAAAC,EAAS,GACT,GAAGC,CACL,EAAoB,CAClB,MAAMC,EAAYC,EAAAA,QAAO,qBAAqBC,EAAAA,QAAQL,CAAI,CAAC,EAAE,EACvDM,EAAY,CAACF,UAAO,aAAa,EAAGD,EAAWN,CAAS,EAC3D,OAAO,OAAO,EACd,KAAK,GAAG,EAELU,EAAa,CAACT,EACdU,EAAcjB,GAAQK,EACtBa,EAAWF,EAAajB,EAAYkB,CAAW,EAAI,GACnDE,EAAQX,GAAiBb,EAAkBsB,CAAW,EACtDG,EAAqBJ,EACvBH,EAAAA,QAAO,0BAA0BC,EAAAA,QAAQK,CAAK,CAAC,EAAE,EACjD,GAEJ,OACEE,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAW,YAAWN,EACnC,SAAA,CAAAO,EACCM,EAAAA,IAAC,OAAA,CACC,UAAW,CAACT,UAAO,uBAAuB,EAAGO,CAAkB,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG,EACX,KAAK,MACL,aAAYf,EAEX,SAAAa,CAAA,CAAA,EAGHI,EAAAA,IAAC,MAAA,CACE,GAAGX,EACJ,IAAAN,EACA,UAAWQ,EAAAA,QAAO,oBAAoB,EACtC,IAAAN,EACA,MAAO,OAAOE,CAAI,EAClB,OAAQ,OAAOA,CAAI,CAAA,CAAA,EAGtBC,GACCY,EAAAA,IAAC,OAAA,CAAK,UAAWT,EAAAA,QAAO,qBAAqB,EAC3C,SAAAS,EAAAA,IAACC,EAAAA,QAAA,CAAY,OAAO,SAAS,KAAM7B,EAA0Be,CAAI,EAAG,CAAA,CACtE,CAAA,EAEJ,CAEJ"}
+{"version":3,"file":"UserAvatar.cjs","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { ImgHTMLAttributes } from 'react';\nimport StatusBadge from '@/components/status-badge/StatusBadge';\nimport type {\n  StatusBadgeSize,\n  StatusBadgeStatus,\n} from '@/components/status-badge/StatusBadge';\nimport { toKebab } from '@/utils/string';\nimport styles from './UserAvatar.module.scss';\n\n/** Figma User Avatar sizes. */\nexport type UserAvatarSize =\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '36'\n  | '40'\n  | '48'\n  | '50'\n  | '56'\n  | '64'\n  | '72'\n  | '80'\n  | '96'\n  | '120'\n  | '128';\n\n/** Figma User Avatar Fallback colour variants. */\nexport type UserAvatarFallbackColor =\n  | 'red'\n  | 'purple'\n  | 'neutral'\n  | 'charcoal'\n  | 'indigo'\n  | 'teal'\n  | 'blue'\n  | 'cyan'\n  | 'yellow'\n  | 'green'\n  | 'orange';\n\nexport interface UserAvatarProps extends Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  'src' | 'alt' | 'width' | 'height'\n> {\n  /** Alt text for the avatar image. */\n  alt: string;\n  /** Optional CSS class name. */\n  className?: string;\n  /**\n   * Image URL for the avatar. When omitted, or when the image fails to load,\n   * the avatar renders as Fallback (initials on a deterministic colour\n   * background). A failed image sets `data-image-failed=\"true\"` on the root.\n   */\n  src?: string;\n  /**\n   * Display name used to derive initials and the fallback colour. Defaults\n   * to `alt` when not provided.\n   */\n  name?: string;\n  /** Force a specific fallback colour. Hashed from `name`/`alt` if omitted. */\n  fallbackColor?: UserAvatarFallbackColor;\n  /** Size variant. Figma: Size. Default: 48. */\n  size?: UserAvatarSize;\n  /**\n   * Status badge shown on the avatar: `online`, `away`, `do-not-disturb` or `offline`.\n   * Omit (or `false`) to hide it. `true` is kept for backwards compatibility and\n   * means `online`. The badge size follows the avatar `size`.\n   */\n  status?: boolean | StatusBadgeStatus;\n  /** Accessible name for the status badge. Defaults to the status value; pass a translated string. */\n  statusLabel?: string;\n}\n\n/** Colours picked by the name hash when `fallbackColor` is not set. */\nconst FALLBACK_COLORS: readonly UserAvatarFallbackColor[] = [\n  'red',\n  'purple',\n  'neutral',\n  'blue',\n  'cyan',\n  'yellow',\n  'green',\n  'orange',\n  'charcoal',\n  'indigo',\n  'teal',\n];\n\n/** Map UserAvatar size to StatusBadge size (Figma scale). */\nconst USER_AVATAR_TO_BADGE_SIZE: Record<UserAvatarSize, StatusBadgeSize> = {\n  '12': 'xx-small',\n  '16': 'xx-small',\n  '20': 'x-small',\n  '24': 'x-small',\n  '28': 'x-small',\n  '32': 'small',\n  '36': 'small',\n  '40': 'small',\n  '48': 'small',\n  '50': 'small',\n  '56': 'medium',\n  '64': 'medium',\n  '72': 'medium',\n  '80': 'medium',\n  '96': 'large',\n  '120': 'large',\n  '128': 'large',\n};\n\nfunction hashFallbackColor(s: string): UserAvatarFallbackColor {\n  let h = 0;\n  for (let i = 0; i < s.length; i++) {\n    h = (h * 31 + s.charCodeAt(i)) | 0;\n  }\n  return FALLBACK_COLORS[Math.abs(h) % FALLBACK_COLORS.length];\n}\n\nfunction getInitials(name: string): string {\n  const trimmed = name.trim();\n  if (!trimmed) return '';\n  const firstName = trimmed.split(/\\s+/)[0]!;\n  return firstName[0]!.toUpperCase() + (firstName[1]?.toLowerCase() ?? '');\n}\n\n/**\n * User Avatars represent a person — usually their uploaded photo, with initials on a colour\n * background as a fallback. Their circular shape distinguishes them from rounded-square Team\n * Avatars at a glance. `ref` points at the root element, which is present for both the image and\n * the fallback, so it works as a tooltip or popover anchor.\n */\nconst UserAvatar = forwardRef<HTMLDivElement, UserAvatarProps>(\n  function UserAvatar(\n    {\n      alt,\n      className = '',\n      src,\n      name,\n      fallbackColor,\n      size = '48',\n      status,\n      statusLabel,\n      onError,\n      ...imgProps\n    },\n    ref,\n  ) {\n    // The src that failed to load; a new src is tried again.\n    const [failedSrc, setFailedSrc] = useState<string>();\n    const sizeClass = styles[`user-avatar--size-${toKebab(size)}`];\n    const rootClass = [styles['user-avatar'], sizeClass, className]\n      .filter(Boolean)\n      .join(' ');\n\n    const imageFailed = !!src && src === failedSrc;\n    const isFallback = !src || imageFailed;\n    const displayName = name ?? alt;\n    const initials = isFallback ? getInitials(displayName) : '';\n    const color = fallbackColor ?? hashFallbackColor(displayName);\n    const fallbackColorClass = isFallback\n      ? styles[`user-avatar__fallback--${toKebab(color)}`]\n      : '';\n\n    const badgeStatus: StatusBadgeStatus | undefined =\n      status === true ? 'online' : status || undefined;\n    const badgeSize = USER_AVATAR_TO_BADGE_SIZE[size];\n\n    return (\n      <div\n        ref={ref}\n        className={rootClass}\n        data-size={size}\n        data-image-failed={imageFailed ? 'true' : undefined}\n      >\n        {isFallback ? (\n          <span\n            className={[styles['user-avatar__fallback'], fallbackColorClass]\n              .filter(Boolean)\n              .join(' ')}\n            role=\"img\"\n            aria-label={alt}\n          >\n            {initials}\n          </span>\n        ) : (\n          <img\n            loading=\"lazy\"\n            {...imgProps}\n            onError={(e) => {\n              onError?.(e);\n              setFailedSrc(src);\n            }}\n            alt={alt}\n            className={styles['user-avatar__image']}\n            src={src}\n            width={Number(size)}\n            height={Number(size)}\n          />\n        )}\n        {badgeStatus && (\n          <span className={styles['user-avatar__status']}>\n            <StatusBadge\n              status={badgeStatus}\n              size={badgeSize}\n              label={statusLabel}\n              className={styles['user-avatar__badge']}\n            />\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default UserAvatar;\n"],"names":["FALLBACK_COLORS","USER_AVATAR_TO_BADGE_SIZE","hashFallbackColor","h","i","getInitials","name","trimmed","firstName","_a","UserAvatar","forwardRef","alt","className","src","fallbackColor","size","status","statusLabel","onError","imgProps","ref","failedSrc","setFailedSrc","useState","sizeClass","styles","toKebab","rootClass","imageFailed","isFallback","displayName","initials","color","fallbackColorClass","badgeStatus","badgeSize","jsxs","jsx","e","StatusBadge"],"mappings":"8RA8EMA,EAAsD,CAC1D,MACA,SACA,UACA,OACA,OACA,SACA,QACA,SACA,WACA,SACA,MACF,EAGMC,EAAqE,CACzE,GAAM,WACN,GAAM,WACN,GAAM,UACN,GAAM,UACN,GAAM,UACN,GAAM,QACN,GAAM,QACN,GAAM,QACN,GAAM,QACN,GAAM,QACN,GAAM,SACN,GAAM,SACN,GAAM,SACN,GAAM,SACN,GAAM,QACN,IAAO,QACP,IAAO,OACT,EAEA,SAASC,EAAkB,EAAoC,CAC7D,IAAIC,EAAI,EACR,QAASC,EAAI,EAAGA,EAAI,EAAE,OAAQA,IAC5BD,EAAKA,EAAI,GAAK,EAAE,WAAWC,CAAC,EAAK,EAEnC,OAAOJ,EAAgB,KAAK,IAAIG,CAAC,EAAIH,EAAgB,MAAM,CAC7D,CAEA,SAASK,EAAYC,EAAsB,OACzC,MAAMC,EAAUD,EAAK,KAAA,EACrB,GAAI,CAACC,EAAS,MAAO,GACrB,MAAMC,EAAYD,EAAQ,MAAM,KAAK,EAAE,CAAC,EACxC,OAAOC,EAAU,CAAC,EAAG,YAAA,KAAiBC,EAAAD,EAAU,CAAC,IAAX,YAAAC,EAAc,gBAAiB,GACvE,CAQA,MAAMC,EAAaC,EAAAA,WACjB,SACE,CACE,IAAAC,EACA,UAAAC,EAAY,GACZ,IAAAC,EACA,KAAAR,EACA,cAAAS,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,YAAAC,EACA,QAAAC,EACA,GAAGC,CAAA,EAELC,EACA,CAEA,KAAM,CAACC,EAAWC,CAAY,EAAIC,WAAA,EAC5BC,EAAYC,EAAAA,QAAO,qBAAqBC,EAAAA,QAAQX,CAAI,CAAC,EAAE,EACvDY,EAAY,CAACF,UAAO,aAAa,EAAGD,EAAWZ,CAAS,EAC3D,OAAO,OAAO,EACd,KAAK,GAAG,EAELgB,EAAc,CAAC,CAACf,GAAOA,IAAQQ,EAC/BQ,EAAa,CAAChB,GAAOe,EACrBE,EAAczB,GAAQM,EACtBoB,EAAWF,EAAazB,EAAY0B,CAAW,EAAI,GACnDE,EAAQlB,GAAiBb,EAAkB6B,CAAW,EACtDG,EAAqBJ,EACvBJ,EAAAA,QAAO,0BAA0BC,EAAAA,QAAQM,CAAK,CAAC,EAAE,EACjD,GAEEE,EACJlB,IAAW,GAAO,SAAWA,GAAU,OACnCmB,EAAYnC,EAA0Be,CAAI,EAEhD,OACEqB,EAAAA,KAAC,MAAA,CACC,IAAAhB,EACA,UAAWO,EACX,YAAWZ,EACX,oBAAmBa,EAAc,OAAS,OAEzC,SAAA,CAAAC,EACCQ,EAAAA,IAAC,OAAA,CACC,UAAW,CAACZ,UAAO,uBAAuB,EAAGQ,CAAkB,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG,EACX,KAAK,MACL,aAAYtB,EAEX,SAAAoB,CAAA,CAAA,EAGHM,EAAAA,IAAC,MAAA,CACC,QAAQ,OACP,GAAGlB,EACJ,QAAUmB,GAAM,CACdpB,GAAA,MAAAA,EAAUoB,GACVhB,EAAaT,CAAG,CAClB,EACA,IAAAF,EACA,UAAWc,EAAAA,QAAO,oBAAoB,EACtC,IAAAZ,EACA,MAAO,OAAOE,CAAI,EAClB,OAAQ,OAAOA,CAAI,CAAA,CAAA,EAGtBmB,GACCG,EAAAA,IAAC,OAAA,CAAK,UAAWZ,EAAAA,QAAO,qBAAqB,EAC3C,SAAAY,EAAAA,IAACE,EAAAA,QAAA,CACC,OAAQL,EACR,KAAMC,EACN,MAAOlB,EACP,UAAWQ,EAAAA,QAAO,oBAAoB,CAAA,CAAA,CACxC,CACF,CAAA,CAAA,CAAA,CAIR,CACF"}

package/dist/components/user-avatar/UserAvatar.css

@@ -0,0 +1 @@
+._user-avatar_enh1y_13{position:relative;flex-shrink:0;border-radius:var(--radius-pill);display:inline-block}._user-avatar__image_enh1y_19{display:block;width:100%;height:100%;object-fit:cover;vertical-align:middle;border-radius:var(--radius-pill)}._user-avatar__fallback_enh1y_27{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--radius-pill);color:#ffffffeb;font-family:var(--font-family-heading);font-weight:var(--font-weight-semibold);line-height:1;-webkit-user-select:none;user-select:none}._user-avatar__fallback--red_enh1y_40{background-color:var(--color-red-500)}._user-avatar__fallback--purple_enh1y_43{background-color:var(--color-purple-500)}._user-avatar__fallback--neutral_enh1y_46{background-color:var(--color-neutral-500)}._user-avatar__fallback--charcoal_enh1y_49{background-color:var(--color-neutral-900)}._user-avatar__fallback--indigo_enh1y_52{background-color:var(--color-indigo-500)}._user-avatar__fallback--teal_enh1y_55{background-color:var(--color-teal-700)}._user-avatar__fallback--blue_enh1y_58{background-color:var(--color-blue-500)}._user-avatar__fallback--cyan_enh1y_61{background-color:var(--color-cyan-500)}._user-avatar__fallback--yellow_enh1y_64{background-color:var(--color-yellow-500)}._user-avatar__fallback--green_enh1y_67{background-color:var(--color-green-500)}._user-avatar__fallback--orange_enh1y_70{background-color:var(--color-orange-500)}._user-avatar__status_enh1y_73{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;box-sizing:content-box}._user-avatar--size-12_enh1y_82{width:12px;height:12px}._user-avatar--size-12_enh1y_82 ._user-avatar__fallback_enh1y_27{font-size:5.604px}._user-avatar--size-12_enh1y_82 ._user-avatar__status_enh1y_73{right:-1px;bottom:-1px}._user-avatar--size-16_enh1y_93{width:16px;height:16px}._user-avatar--size-16_enh1y_93 ._user-avatar__fallback_enh1y_27{font-size:7.472px}._user-avatar--size-16_enh1y_93 ._user-avatar__status_enh1y_73{right:-1px;bottom:-1px}._user-avatar--size-20_enh1y_104{width:20px;height:20px}._user-avatar--size-20_enh1y_104 ._user-avatar__fallback_enh1y_27{font-size:9.34px}._user-avatar--size-20_enh1y_104 ._user-avatar__status_enh1y_73{right:-1px;bottom:-1px}._user-avatar--size-24_enh1y_115{width:24px;height:24px}._user-avatar--size-24_enh1y_115 ._user-avatar__fallback_enh1y_27{font-size:11.208px}._user-avatar--size-24_enh1y_115 ._user-avatar__status_enh1y_73{right:-1px;bottom:-1px}._user-avatar--size-28_enh1y_126{width:28px;height:28px}._user-avatar--size-28_enh1y_126 ._user-avatar__fallback_enh1y_27{font-size:13.076px}._user-avatar--size-28_enh1y_126 ._user-avatar__status_enh1y_73{right:-1px;bottom:-1px}._user-avatar--size-32_enh1y_137{width:32px;height:32px}._user-avatar--size-32_enh1y_137 ._user-avatar__fallback_enh1y_27{font-size:14.944px}._user-avatar--size-32_enh1y_137 ._user-avatar__status_enh1y_73{right:-2px;bottom:-2px}._user-avatar--size-36_enh1y_148{width:36px;height:36px}._user-avatar--size-36_enh1y_148 ._user-avatar__fallback_enh1y_27{font-size:16.812px}._user-avatar--size-36_enh1y_148 ._user-avatar__status_enh1y_73{right:-2px;bottom:-2px}._user-avatar--size-40_enh1y_159{width:40px;height:40px}._user-avatar--size-40_enh1y_159 ._user-avatar__fallback_enh1y_27{font-size:18.68px}._user-avatar--size-40_enh1y_159 ._user-avatar__status_enh1y_73{right:-2px;bottom:-2px}._user-avatar--size-48_enh1y_170{width:48px;height:48px}._user-avatar--size-48_enh1y_170 ._user-avatar__fallback_enh1y_27{font-size:22.416px}._user-avatar--size-48_enh1y_170 ._user-avatar__status_enh1y_73{right:-2px;bottom:-2px}._user-avatar--size-50_enh1y_181{width:50px;height:50px}._user-avatar--size-50_enh1y_181 ._user-avatar__fallback_enh1y_27{font-size:23.35px}._user-avatar--size-50_enh1y_181 ._user-avatar__status_enh1y_73{right:-2px;bottom:-2px}._user-avatar--size-56_enh1y_192{width:56px;height:56px}._user-avatar--size-56_enh1y_192 ._user-avatar__fallback_enh1y_27{font-size:26.152px}._user-avatar--size-56_enh1y_192 ._user-avatar__status_enh1y_73 ._user-avatar__badge_enh1y_199{width:var(--icon-size-20);height:var(--icon-size-20)}._user-avatar--size-56_enh1y_192 ._user-avatar__status_enh1y_73{right:0;bottom:0}._user-avatar--size-64_enh1y_207{width:64px;height:64px}._user-avatar--size-64_enh1y_207 ._user-avatar__fallback_enh1y_27{font-size:29.888px}._user-avatar--size-64_enh1y_207 ._user-avatar__status_enh1y_73 ._user-avatar__badge_enh1y_199{width:var(--icon-size-20);height:var(--icon-size-20)}._user-avatar--size-64_enh1y_207 ._user-avatar__status_enh1y_73{right:0;bottom:0}._user-avatar--size-72_enh1y_222{width:72px;height:72px}._user-avatar--size-72_enh1y_222 ._user-avatar__fallback_enh1y_27{font-size:33.624px}._user-avatar--size-72_enh1y_222 ._user-avatar__status_enh1y_73 ._user-avatar__badge_enh1y_199{width:var(--icon-size-20);height:var(--icon-size-20)}._user-avatar--size-72_enh1y_222 ._user-avatar__status_enh1y_73{right:0;bottom:0}._user-avatar--size-80_enh1y_237{width:80px;height:80px}._user-avatar--size-80_enh1y_237 ._user-avatar__fallback_enh1y_27{font-size:37.36px}._user-avatar--size-80_enh1y_237 ._user-avatar__status_enh1y_73 ._user-avatar__badge_enh1y_199{width:var(--icon-size-20);height:var(--icon-size-20)}._user-avatar--size-80_enh1y_237 ._user-avatar__status_enh1y_73{right:0;bottom:0}._user-avatar--size-96_enh1y_252{width:96px;height:96px}._user-avatar--size-96_enh1y_252 ._user-avatar__fallback_enh1y_27{font-size:44.832px}._user-avatar--size-96_enh1y_252 ._user-avatar__status_enh1y_73{right:-2px;bottom:-2px}._user-avatar--size-120_enh1y_263{width:120px;height:120px}._user-avatar--size-120_enh1y_263 ._user-avatar__fallback_enh1y_27{font-size:56.04px}._user-avatar--size-120_enh1y_263 ._user-avatar__status_enh1y_73{right:-2px;bottom:-2px}._user-avatar--size-128_enh1y_274{width:128px;height:128px}._user-avatar--size-128_enh1y_274 ._user-avatar__fallback_enh1y_27{font-size:59.776px}._user-avatar--size-128_enh1y_274 ._user-avatar__status_enh1y_73{right:-2px;bottom:-2px}

package/dist/components/user-avatar/UserAvatar.d.ts

@@ -1,16 +1,18 @@
 import { ImgHTMLAttributes } from 'react';
+import { StatusBadgeStatus } from '../status-badge/StatusBadge';
 /** Figma User Avatar sizes. */
-export type UserAvatarSize = '12' | '16' | '20' | '24' | '28' | '32' | '40' | '48' | '56' | '64' | '72' | '80' | '96' | '120';
+export type UserAvatarSize = '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '48' | '50' | '56' | '64' | '72' | '80' | '96' | '120' | '128';
 /** Figma User Avatar Fallback colour variants. */
-export type UserAvatarFallbackColor = 'red' | 'purple' | 'neutral' | 'blue' | 'cyan' | 'yellow' | 'green' | 'orange';
+export type UserAvatarFallbackColor = 'red' | 'purple' | 'neutral' | 'charcoal' | 'indigo' | 'teal' | 'blue' | 'cyan' | 'yellow' | 'green' | 'orange';
 export interface UserAvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'width' | 'height'> {
     /** Alt text for the avatar image. */
     alt: string;
     /** Optional CSS class name. */
     className?: string;
     /**
-     * Image URL for the avatar. When omitted, the avatar renders as Fallback
-     * (initials on a deterministic colour background).
+     * Image URL for the avatar. When omitted, or when the image fails to load,
+     * the avatar renders as Fallback (initials on a deterministic colour
+     * background). A failed image sets `data-image-failed="true"` on the root.
      */
     src?: string;
     /**
@@ -22,13 +24,21 @@ export interface UserAvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement
     fallbackColor?: UserAvatarFallbackColor;
     /** Size variant. Figma: Size. Default: 48. */
     size?: UserAvatarSize;
-    /** When true, shows online status badge (green dot with check). Figma: Status = On. */
-    status?: boolean;
+    /**
+     * Status badge shown on the avatar: `online`, `away`, `do-not-disturb` or `offline`.
+     * Omit (or `false`) to hide it. `true` is kept for backwards compatibility and
+     * means `online`. The badge size follows the avatar `size`.
+     */
+    status?: boolean | StatusBadgeStatus;
+    /** Accessible name for the status badge. Defaults to the status value; pass a translated string. */
+    statusLabel?: string;
 }
 /**
  * User Avatars represent a person — usually their uploaded photo, with initials on a colour
  * background as a fallback. Their circular shape distinguishes them from rounded-square Team
- * Avatars at a glance.
+ * Avatars at a glance. `ref` points at the root element, which is present for both the image and
+ * the fallback, so it works as a tooltip or popover anchor.
  */
-export default function UserAvatar({ alt, className, src, name, fallbackColor, size, status, ...imgProps }: UserAvatarProps): import("react/jsx-runtime").JSX.Element;
+declare const UserAvatar: import('react').ForwardRefExoticComponent<UserAvatarProps & import('react').RefAttributes<HTMLDivElement>>;
+export default UserAvatar;
 //# sourceMappingURL=UserAvatar.d.ts.map