@mattermost/compass-ui 0.1.0-alpha.30 → 0.1.0-alpha.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/status-badge/StatusBadge.cjs +1 -1
- package/dist/components/status-badge/StatusBadge.cjs.map +1 -1
- package/dist/components/status-badge/StatusBadge.css +1 -1
- package/dist/components/status-badge/StatusBadge.d.ts +1 -1
- package/dist/components/status-badge/StatusBadge.d.ts.map +1 -1
- package/dist/components/status-badge/StatusBadge.js +5 -4
- package/dist/components/status-badge/StatusBadge.js.map +1 -1
- package/dist/components/status-badge/StatusBadge.module.scss.cjs +1 -1
- package/dist/components/status-badge/StatusBadge.module.scss.js +12 -11
- package/dist/components/status-badge/StatusBadge.module.scss.js.map +1 -1
- package/dist/components/user-avatar/UserAvatar.cjs +1 -1
- package/dist/components/user-avatar/UserAvatar.cjs.map +1 -1
- package/dist/components/user-avatar/UserAvatar.css +1 -1
- package/dist/components/user-avatar/UserAvatar.d.ts.map +1 -1
- package/dist/components/user-avatar/UserAvatar.js +1 -1
- package/dist/components/user-avatar/UserAvatar.js.map +1 -1
- package/dist/components/user-avatar/UserAvatar.module.scss.cjs +1 -1
- package/dist/components/user-avatar/UserAvatar.module.scss.js +33 -33
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),__g=require("@mattermost/compass-icons/components/check-circle.js"),g=__g?.default??__g,__b=require("@mattermost/compass-icons/components/circle-outline.js"),b=__b?.default??__b,__m=require("@mattermost/compass-icons/components/clock.js"),m=__m?.default??__m,__f=require("@mattermost/compass-icons/components/minus-circle.js"),f=__f?.default??__f,a=require("../../utils/string.cjs"),e=require("./StatusBadge.module.scss.cjs"),x={"xx-small":10,"x-small":12,small:16,medium:20,large:28,"x-large":32},C={online:g,away:m,"do-not-disturb":f,offline:b};function _({className:n="",size:l="x-small",status:s="online",label:o}){const i=e.default[`status-badge--size-${a.toKebab(l)}`],r=e.default[`status-badge--status-${a.toKebab(s)}`],u=[e.default["status-badge"],i,r,n].filter(Boolean).join(" "),c=x[l],d=C[s];return t.jsx("span",{className:u,role:"img","aria-label":o??s,children:t.jsx("span",{className:e.default["status-badge__glyph"],children:t.jsx(d,{size:c})})})}exports.default=_;
|
|
2
2
|
//# sourceMappingURL=StatusBadge.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusBadge.cjs","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"sourcesContent":["import type { ElementType } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport CircleOutlineIcon from '@mattermost/compass-icons/components/circle-outline';\nimport ClockIcon from '@mattermost/compass-icons/components/clock';\nimport MinusCircleIcon from '@mattermost/compass-icons/components/minus-circle';\nimport { toKebab } from '@/utils/string';\nimport styles from './StatusBadge.module.scss';\n\n/** Figma Status Badge size. */\nexport type StatusBadgeSize =\n | 'xx-small'\n | 'x-small'\n | 'small'\n | 'medium'\n | 'large';\n\n/** Figma Status Badge status variant. */\nexport type StatusBadgeStatus =\n | 'online'\n | 'away'\n | 'do-not-disturb'\n | 'offline';\n\nexport interface StatusBadgeProps {\n /** Optional CSS class name. */\n className?: string;\n /** Size variant. Figma: Size. Default: X-Small. */\n size?: StatusBadgeSize;\n /** Status variant. Figma: Status. Default: Online. */\n status?: StatusBadgeStatus;\n /** Accessible name for the badge. Defaults to the `status` value; pass a translated string. */\n label?: string;\n}\n\n/** Compass icon size in px per StatusBadge size — Figma. */\nconst BADGE_ICON_SIZE_PX: Record<StatusBadgeSize, number> = {\n 'xx-small': 10,\n 'x-small': 12,\n small: 16,\n medium: 20,\n large: 32,\n};\n\n/** Compass icon component per status variant. */\nconst GLYPH_COMPONENT: Record<StatusBadgeStatus, ElementType> = {\n online: CheckCircleIcon,\n away: ClockIcon,\n 'do-not-disturb': MinusCircleIcon,\n offline: CircleOutlineIcon,\n};\n\n/**\n * A Status Badge tells you whether someone is reachable. It pairs with an avatar or username\n * so a glance is enough to know if a teammate is online, focused, away, or signed out.\n */\nexport default function StatusBadge({\n className = '',\n size = 'x-small',\n status = 'online',\n label,\n}: StatusBadgeProps) {\n const sizeClass = styles[`status-badge--size-${toKebab(size)}`];\n const statusClass = styles[`status-badge--status-${toKebab(status)}`];\n const rootClass = [styles['status-badge'], sizeClass, statusClass, className]\n .filter(Boolean)\n .join(' ');\n\n const iconSizePx = BADGE_ICON_SIZE_PX[size];\n const GlyphIcon = GLYPH_COMPONENT[status];\n\n return (\n <span className={rootClass} role=\"img\" aria-label={label ?? status}>\n <span className={styles['status-badge__glyph']}>\n <GlyphIcon size={iconSizePx} />\n </span>\n </span>\n );\n}\n"],"names":["BADGE_ICON_SIZE_PX","GLYPH_COMPONENT","CheckCircleIcon","ClockIcon","MinusCircleIcon","CircleOutlineIcon","StatusBadge","className","size","status","label","sizeClass","styles","toKebab","statusClass","rootClass","iconSizePx","GlyphIcon","jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"StatusBadge.cjs","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"sourcesContent":["import type { ElementType } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport CircleOutlineIcon from '@mattermost/compass-icons/components/circle-outline';\nimport ClockIcon from '@mattermost/compass-icons/components/clock';\nimport MinusCircleIcon from '@mattermost/compass-icons/components/minus-circle';\nimport { toKebab } from '@/utils/string';\nimport styles from './StatusBadge.module.scss';\n\n/** Figma Status Badge size. */\nexport type StatusBadgeSize =\n | 'xx-small'\n | 'x-small'\n | 'small'\n | 'medium'\n | 'large'\n | 'x-large';\n\n/** Figma Status Badge status variant. */\nexport type StatusBadgeStatus =\n | 'online'\n | 'away'\n | 'do-not-disturb'\n | 'offline';\n\nexport interface StatusBadgeProps {\n /** Optional CSS class name. */\n className?: string;\n /** Size variant. Figma: Size. Default: X-Small. */\n size?: StatusBadgeSize;\n /** Status variant. Figma: Status. Default: Online. */\n status?: StatusBadgeStatus;\n /** Accessible name for the badge. Defaults to the `status` value; pass a translated string. */\n label?: string;\n}\n\n/** Compass icon size in px per StatusBadge size — Figma. */\nconst BADGE_ICON_SIZE_PX: Record<StatusBadgeSize, number> = {\n 'xx-small': 10,\n 'x-small': 12,\n small: 16,\n medium: 20,\n large: 28,\n 'x-large': 32,\n};\n\n/** Compass icon component per status variant. */\nconst GLYPH_COMPONENT: Record<StatusBadgeStatus, ElementType> = {\n online: CheckCircleIcon,\n away: ClockIcon,\n 'do-not-disturb': MinusCircleIcon,\n offline: CircleOutlineIcon,\n};\n\n/**\n * A Status Badge tells you whether someone is reachable. It pairs with an avatar or username\n * so a glance is enough to know if a teammate is online, focused, away, or signed out.\n */\nexport default function StatusBadge({\n className = '',\n size = 'x-small',\n status = 'online',\n label,\n}: StatusBadgeProps) {\n const sizeClass = styles[`status-badge--size-${toKebab(size)}`];\n const statusClass = styles[`status-badge--status-${toKebab(status)}`];\n const rootClass = [styles['status-badge'], sizeClass, statusClass, className]\n .filter(Boolean)\n .join(' ');\n\n const iconSizePx = BADGE_ICON_SIZE_PX[size];\n const GlyphIcon = GLYPH_COMPONENT[status];\n\n return (\n <span className={rootClass} role=\"img\" aria-label={label ?? status}>\n <span className={styles['status-badge__glyph']}>\n <GlyphIcon size={iconSizePx} />\n </span>\n </span>\n );\n}\n"],"names":["BADGE_ICON_SIZE_PX","GLYPH_COMPONENT","CheckCircleIcon","ClockIcon","MinusCircleIcon","CircleOutlineIcon","StatusBadge","className","size","status","label","sizeClass","styles","toKebab","statusClass","rootClass","iconSizePx","GlyphIcon","jsx"],"mappings":"udAoCMA,EAAsD,CAC1D,WAAY,GACZ,UAAW,GACX,MAAO,GACP,OAAQ,GACR,MAAO,GACP,UAAW,EACb,EAGMC,EAA0D,CAC9D,OAAQC,EACR,KAAMC,EACN,iBAAkBC,EAClB,QAASC,CACX,EAMA,SAAwBC,EAAY,CAClC,UAAAC,EAAY,GACZ,KAAAC,EAAO,UACP,OAAAC,EAAS,SACT,MAAAC,CACF,EAAqB,CACnB,MAAMC,EAAYC,EAAAA,QAAO,sBAAsBC,EAAAA,QAAQL,CAAI,CAAC,EAAE,EACxDM,EAAcF,EAAAA,QAAO,wBAAwBC,EAAAA,QAAQJ,CAAM,CAAC,EAAE,EAC9DM,EAAY,CAACH,EAAAA,QAAO,cAAc,EAAGD,EAAWG,EAAaP,CAAS,EACzE,OAAO,OAAO,EACd,KAAK,GAAG,EAELS,EAAahB,EAAmBQ,CAAI,EACpCS,EAAYhB,EAAgBQ,CAAM,EAExC,OACES,MAAC,QAAK,UAAWH,EAAW,KAAK,MAAM,aAAYL,GAASD,EAC1D,SAAAS,EAAAA,IAAC,QAAK,UAAWN,EAAAA,QAAO,qBAAqB,EAC3C,SAAAM,EAAAA,IAACD,GAAU,KAAMD,EAAY,EAC/B,CAAA,CACF,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._status-
|
|
1
|
+
._status-badge_1vv61_13{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);color:var(--center-channel-color);box-sizing:border-box;overflow:hidden}._status-badge__glyph_1vv61_24{display:flex;align-items:center;justify-content:center;flex-shrink:0}._status-badge--size-xx-small_1vv61_30{width:var(--icon-size-12);height:var(--icon-size-12)}._status-badge--size-xx-small_1vv61_30 ._status-badge__glyph_1vv61_24{width:var(--icon-size-10);height:var(--icon-size-10)}._status-badge--size-x-small_1vv61_38,._status-badge--size-x-small_1vv61_38 ._status-badge__glyph_1vv61_24{width:var(--icon-size-12);height:var(--icon-size-12)}._status-badge--size-small_1vv61_46,._status-badge--size-small_1vv61_46 ._status-badge__glyph_1vv61_24{width:var(--icon-size-16);height:var(--icon-size-16)}._status-badge--size-medium_1vv61_54{width:var(--icon-size-24);height:var(--icon-size-24)}._status-badge--size-medium_1vv61_54 ._status-badge__glyph_1vv61_24{width:var(--icon-size-20);height:var(--icon-size-20)}._status-badge--size-large_1vv61_62,._status-badge--size-large_1vv61_62 ._status-badge__glyph_1vv61_24{width:var(--icon-size-28);height:var(--icon-size-28)}._status-badge--size-x-large_1vv61_70{width:var(--icon-size-32);height:var(--icon-size-32)}._status-badge--size-x-large_1vv61_70 ._status-badge__glyph_1vv61_24{width:36px;height:36px;margin:calc(-1 * var(--spacing-xxxxs))}._status-badge--status-online_1vv61_80{color:var(--online-indicator, var(--color-success));background-color:var(--status-badge-bg, var(--center-channel-bg))}._status-badge--status-away_1vv61_84{color:var(--away-indicator, var(--color-warning));background-color:var(--status-badge-bg, var(--center-channel-bg))}._status-badge--status-do-not-disturb_1vv61_88{color:var(--dnd-indicator, var(--color-danger));background-color:var(--status-badge-bg, var(--center-channel-bg))}._status-badge--status-offline_1vv61_92{color:var(--status-badge-offline-color, rgba(var(--center-channel-color-rgb), .32));background-color:var(--status-badge-bg, var(--center-channel-bg))}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** Figma Status Badge size. */
|
|
2
|
-
export type StatusBadgeSize = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';
|
|
2
|
+
export type StatusBadgeSize = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
|
|
3
3
|
/** Figma Status Badge status variant. */
|
|
4
4
|
export type StatusBadgeStatus = 'online' | 'away' | 'do-not-disturb' | 'offline';
|
|
5
5
|
export interface StatusBadgeProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"names":[],"mappings":"AAQA,+BAA+B;AAC/B,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,SAAS,GACT,OAAO,GACP,QAAQ,GACR,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"names":[],"mappings":"AAQA,+BAA+B;AAC/B,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,SAAS,GACT,OAAO,GACP,QAAQ,GACR,OAAO,GACP,SAAS,CAAC;AAEd,yCAAyC;AACzC,MAAM,MAAM,iBAAiB,GACzB,QAAQ,GACR,MAAM,GACN,gBAAgB,GAChB,SAAS,CAAC;AAEd,MAAM,WAAW,gBAAgB;IAC/B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,sDAAsD;IACtD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,+FAA+F;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoBD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAc,EACd,IAAgB,EAChB,MAAiB,EACjB,KAAK,GACN,EAAE,gBAAgB,2CAiBlB"}
|
|
@@ -5,13 +5,14 @@ import __d from "@mattermost/compass-icons/components/clock.js";const d=__d&&__d
|
|
|
5
5
|
import __C from "@mattermost/compass-icons/components/minus-circle.js";const C=__C&&__C.default?__C.default:__C;
|
|
6
6
|
import { toKebab as l } from "../../utils/string.js";
|
|
7
7
|
import o from "./StatusBadge.module.scss.js";
|
|
8
|
-
const
|
|
8
|
+
const g = {
|
|
9
9
|
"xx-small": 10,
|
|
10
10
|
"x-small": 12,
|
|
11
11
|
small: 16,
|
|
12
12
|
medium: 20,
|
|
13
|
-
large:
|
|
14
|
-
|
|
13
|
+
large: 28,
|
|
14
|
+
"x-large": 32
|
|
15
|
+
}, b = {
|
|
15
16
|
online: p,
|
|
16
17
|
away: d,
|
|
17
18
|
"do-not-disturb": C,
|
|
@@ -23,7 +24,7 @@ function P({
|
|
|
23
24
|
status: s = "online",
|
|
24
25
|
label: n
|
|
25
26
|
}) {
|
|
26
|
-
const
|
|
27
|
+
const r = o[`status-badge--size-${l(a)}`], i = o[`status-badge--status-${l(s)}`], c = [o["status-badge"], r, i, e].filter(Boolean).join(" "), m = g[a], f = b[s];
|
|
27
28
|
return /* @__PURE__ */ t("span", { className: c, role: "img", "aria-label": n ?? s, children: /* @__PURE__ */ t("span", { className: o["status-badge__glyph"], children: /* @__PURE__ */ t(f, { size: m }) }) });
|
|
28
29
|
}
|
|
29
30
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusBadge.js","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"sourcesContent":["import type { ElementType } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport CircleOutlineIcon from '@mattermost/compass-icons/components/circle-outline';\nimport ClockIcon from '@mattermost/compass-icons/components/clock';\nimport MinusCircleIcon from '@mattermost/compass-icons/components/minus-circle';\nimport { toKebab } from '@/utils/string';\nimport styles from './StatusBadge.module.scss';\n\n/** Figma Status Badge size. */\nexport type StatusBadgeSize =\n | 'xx-small'\n | 'x-small'\n | 'small'\n | 'medium'\n | 'large';\n\n/** Figma Status Badge status variant. */\nexport type StatusBadgeStatus =\n | 'online'\n | 'away'\n | 'do-not-disturb'\n | 'offline';\n\nexport interface StatusBadgeProps {\n /** Optional CSS class name. */\n className?: string;\n /** Size variant. Figma: Size. Default: X-Small. */\n size?: StatusBadgeSize;\n /** Status variant. Figma: Status. Default: Online. */\n status?: StatusBadgeStatus;\n /** Accessible name for the badge. Defaults to the `status` value; pass a translated string. */\n label?: string;\n}\n\n/** Compass icon size in px per StatusBadge size — Figma. */\nconst BADGE_ICON_SIZE_PX: Record<StatusBadgeSize, number> = {\n 'xx-small': 10,\n 'x-small': 12,\n small: 16,\n medium: 20,\n large: 32,\n};\n\n/** Compass icon component per status variant. */\nconst GLYPH_COMPONENT: Record<StatusBadgeStatus, ElementType> = {\n online: CheckCircleIcon,\n away: ClockIcon,\n 'do-not-disturb': MinusCircleIcon,\n offline: CircleOutlineIcon,\n};\n\n/**\n * A Status Badge tells you whether someone is reachable. It pairs with an avatar or username\n * so a glance is enough to know if a teammate is online, focused, away, or signed out.\n */\nexport default function StatusBadge({\n className = '',\n size = 'x-small',\n status = 'online',\n label,\n}: StatusBadgeProps) {\n const sizeClass = styles[`status-badge--size-${toKebab(size)}`];\n const statusClass = styles[`status-badge--status-${toKebab(status)}`];\n const rootClass = [styles['status-badge'], sizeClass, statusClass, className]\n .filter(Boolean)\n .join(' ');\n\n const iconSizePx = BADGE_ICON_SIZE_PX[size];\n const GlyphIcon = GLYPH_COMPONENT[status];\n\n return (\n <span className={rootClass} role=\"img\" aria-label={label ?? status}>\n <span className={styles['status-badge__glyph']}>\n <GlyphIcon size={iconSizePx} />\n </span>\n </span>\n );\n}\n"],"names":["BADGE_ICON_SIZE_PX","GLYPH_COMPONENT","CheckCircleIcon","ClockIcon","MinusCircleIcon","CircleOutlineIcon","StatusBadge","className","size","status","label","sizeClass","styles","toKebab","statusClass","rootClass","iconSizePx","GlyphIcon","jsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"StatusBadge.js","sources":["../../../src/components/status-badge/StatusBadge.tsx"],"sourcesContent":["import type { ElementType } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport CircleOutlineIcon from '@mattermost/compass-icons/components/circle-outline';\nimport ClockIcon from '@mattermost/compass-icons/components/clock';\nimport MinusCircleIcon from '@mattermost/compass-icons/components/minus-circle';\nimport { toKebab } from '@/utils/string';\nimport styles from './StatusBadge.module.scss';\n\n/** Figma Status Badge size. */\nexport type StatusBadgeSize =\n | 'xx-small'\n | 'x-small'\n | 'small'\n | 'medium'\n | 'large'\n | 'x-large';\n\n/** Figma Status Badge status variant. */\nexport type StatusBadgeStatus =\n | 'online'\n | 'away'\n | 'do-not-disturb'\n | 'offline';\n\nexport interface StatusBadgeProps {\n /** Optional CSS class name. */\n className?: string;\n /** Size variant. Figma: Size. Default: X-Small. */\n size?: StatusBadgeSize;\n /** Status variant. Figma: Status. Default: Online. */\n status?: StatusBadgeStatus;\n /** Accessible name for the badge. Defaults to the `status` value; pass a translated string. */\n label?: string;\n}\n\n/** Compass icon size in px per StatusBadge size — Figma. */\nconst BADGE_ICON_SIZE_PX: Record<StatusBadgeSize, number> = {\n 'xx-small': 10,\n 'x-small': 12,\n small: 16,\n medium: 20,\n large: 28,\n 'x-large': 32,\n};\n\n/** Compass icon component per status variant. */\nconst GLYPH_COMPONENT: Record<StatusBadgeStatus, ElementType> = {\n online: CheckCircleIcon,\n away: ClockIcon,\n 'do-not-disturb': MinusCircleIcon,\n offline: CircleOutlineIcon,\n};\n\n/**\n * A Status Badge tells you whether someone is reachable. It pairs with an avatar or username\n * so a glance is enough to know if a teammate is online, focused, away, or signed out.\n */\nexport default function StatusBadge({\n className = '',\n size = 'x-small',\n status = 'online',\n label,\n}: StatusBadgeProps) {\n const sizeClass = styles[`status-badge--size-${toKebab(size)}`];\n const statusClass = styles[`status-badge--status-${toKebab(status)}`];\n const rootClass = [styles['status-badge'], sizeClass, statusClass, className]\n .filter(Boolean)\n .join(' ');\n\n const iconSizePx = BADGE_ICON_SIZE_PX[size];\n const GlyphIcon = GLYPH_COMPONENT[status];\n\n return (\n <span className={rootClass} role=\"img\" aria-label={label ?? status}>\n <span className={styles['status-badge__glyph']}>\n <GlyphIcon size={iconSizePx} />\n </span>\n </span>\n );\n}\n"],"names":["BADGE_ICON_SIZE_PX","GLYPH_COMPONENT","CheckCircleIcon","ClockIcon","MinusCircleIcon","CircleOutlineIcon","StatusBadge","className","size","status","label","sizeClass","styles","toKebab","statusClass","rootClass","iconSizePx","GlyphIcon","jsx"],"mappings":";;;;;;;AAoCA,MAAMA,IAAsD;AAAA,EAC1D,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AACb,GAGMC,IAA0D;AAAA,EAC9D,QAAQC;AAAA,EACR,MAAMC;AAAA,EACN,kBAAkBC;AAAA,EAClB,SAASC;AACX;AAMA,SAAwBC,EAAY;AAAA,EAClC,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,OAAAC;AACF,GAAqB;AACnB,QAAMC,IAAYC,EAAO,sBAAsBC,EAAQL,CAAI,CAAC,EAAE,GACxDM,IAAcF,EAAO,wBAAwBC,EAAQJ,CAAM,CAAC,EAAE,GAC9DM,IAAY,CAACH,EAAO,cAAc,GAAGD,GAAWG,GAAaP,CAAS,EACzE,OAAO,OAAO,EACd,KAAK,GAAG,GAELS,IAAahB,EAAmBQ,CAAI,GACpCS,IAAYhB,EAAgBQ,CAAM;AAExC,SACE,gBAAAS,EAAC,UAAK,WAAWH,GAAW,MAAK,OAAM,cAAYL,KAASD,GAC1D,UAAA,gBAAAS,EAAC,UAAK,WAAWN,EAAO,qBAAqB,GAC3C,UAAA,gBAAAM,EAACD,KAAU,MAAMD,GAAY,GAC/B,EAAA,CACF;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./StatusBadge.css');const s={"status-badge":"_status-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./StatusBadge.css');const s={"status-badge":"_status-badge_1vv61_13","status-badge__glyph":"_status-badge__glyph_1vv61_24","status-badge--size-xx-small":"_status-badge--size-xx-small_1vv61_30","status-badge--size-x-small":"_status-badge--size-x-small_1vv61_38","status-badge--size-small":"_status-badge--size-small_1vv61_46","status-badge--size-medium":"_status-badge--size-medium_1vv61_54","status-badge--size-large":"_status-badge--size-large_1vv61_62","status-badge--size-x-large":"_status-badge--size-x-large_1vv61_70","status-badge--status-online":"_status-badge--status-online_1vv61_80","status-badge--status-away":"_status-badge--status-away_1vv61_84","status-badge--status-do-not-disturb":"_status-badge--status-do-not-disturb_1vv61_88","status-badge--status-offline":"_status-badge--status-offline_1vv61_92"};exports.default=s;
|
|
2
2
|
//# sourceMappingURL=StatusBadge.module.scss.cjs.map
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import './StatusBadge.css';const s = {
|
|
2
|
-
"status-badge": "_status-
|
|
3
|
-
"status-badge__glyph": "_status-
|
|
4
|
-
"status-badge--size-xx-small": "_status-badge--size-xx-
|
|
5
|
-
"status-badge--size-x-small": "_status-badge--size-x-
|
|
6
|
-
"status-badge--size-small": "_status-badge--size-
|
|
7
|
-
"status-badge--size-medium": "_status-badge--size-
|
|
8
|
-
"status-badge--size-large": "_status-badge--size-
|
|
9
|
-
"status-badge--
|
|
10
|
-
"status-badge--status-
|
|
11
|
-
"status-badge--status-
|
|
12
|
-
"status-badge--status-
|
|
2
|
+
"status-badge": "_status-badge_1vv61_13",
|
|
3
|
+
"status-badge__glyph": "_status-badge__glyph_1vv61_24",
|
|
4
|
+
"status-badge--size-xx-small": "_status-badge--size-xx-small_1vv61_30",
|
|
5
|
+
"status-badge--size-x-small": "_status-badge--size-x-small_1vv61_38",
|
|
6
|
+
"status-badge--size-small": "_status-badge--size-small_1vv61_46",
|
|
7
|
+
"status-badge--size-medium": "_status-badge--size-medium_1vv61_54",
|
|
8
|
+
"status-badge--size-large": "_status-badge--size-large_1vv61_62",
|
|
9
|
+
"status-badge--size-x-large": "_status-badge--size-x-large_1vv61_70",
|
|
10
|
+
"status-badge--status-online": "_status-badge--status-online_1vv61_80",
|
|
11
|
+
"status-badge--status-away": "_status-badge--status-away_1vv61_84",
|
|
12
|
+
"status-badge--status-do-not-disturb": "_status-badge--status-do-not-disturb_1vv61_88",
|
|
13
|
+
"status-badge--status-offline": "_status-badge--status-offline_1vv61_92"
|
|
13
14
|
};
|
|
14
15
|
export {
|
|
15
16
|
s as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusBadge.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"StatusBadge.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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;
|
|
1
|
+
"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:"x-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;
|
|
2
2
|
//# sourceMappingURL=UserAvatar.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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
|
|
1
|
+
{"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/**\n * Map UserAvatar size to StatusBadge size (Figma scale). `medium` covers\n * 56–80px, `large` is 96–120px and `x-large` is 128px.\n */\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': 'x-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,EAMMC,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,SACT,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._user-
|
|
1
|
+
._user-avatar_1csp3_13{position:relative;flex-shrink:0;border-radius:var(--radius-pill);display:inline-block}._user-avatar__image_1csp3_19{display:block;width:100%;height:100%;object-fit:cover;vertical-align:middle;border-radius:var(--radius-pill)}._user-avatar__fallback_1csp3_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_1csp3_40{background-color:var(--color-red-500)}._user-avatar__fallback--purple_1csp3_43{background-color:var(--color-purple-500)}._user-avatar__fallback--neutral_1csp3_46{background-color:var(--color-neutral-500)}._user-avatar__fallback--charcoal_1csp3_49{background-color:var(--color-neutral-900)}._user-avatar__fallback--indigo_1csp3_52{background-color:var(--color-indigo-500)}._user-avatar__fallback--teal_1csp3_55{background-color:var(--color-teal-700)}._user-avatar__fallback--blue_1csp3_58{background-color:var(--color-blue-500)}._user-avatar__fallback--cyan_1csp3_61{background-color:var(--color-cyan-500)}._user-avatar__fallback--yellow_1csp3_64{background-color:var(--color-yellow-500)}._user-avatar__fallback--green_1csp3_67{background-color:var(--color-green-500)}._user-avatar__fallback--orange_1csp3_70{background-color:var(--color-orange-500)}._user-avatar__status_1csp3_73{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;box-sizing:content-box}._user-avatar--size-12_1csp3_82{width:12px;height:12px}._user-avatar--size-12_1csp3_82 ._user-avatar__fallback_1csp3_27{font-size:5.604px}._user-avatar--size-12_1csp3_82 ._user-avatar__status_1csp3_73{right:-1px;bottom:-1px}._user-avatar--size-16_1csp3_93{width:16px;height:16px}._user-avatar--size-16_1csp3_93 ._user-avatar__fallback_1csp3_27{font-size:7.472px}._user-avatar--size-16_1csp3_93 ._user-avatar__status_1csp3_73{right:-1px;bottom:-1px}._user-avatar--size-20_1csp3_104{width:20px;height:20px}._user-avatar--size-20_1csp3_104 ._user-avatar__fallback_1csp3_27{font-size:9.34px}._user-avatar--size-20_1csp3_104 ._user-avatar__status_1csp3_73{right:-1px;bottom:-1px}._user-avatar--size-24_1csp3_115{width:24px;height:24px}._user-avatar--size-24_1csp3_115 ._user-avatar__fallback_1csp3_27{font-size:11.208px}._user-avatar--size-24_1csp3_115 ._user-avatar__status_1csp3_73{right:-1px;bottom:-1px}._user-avatar--size-28_1csp3_126{width:28px;height:28px}._user-avatar--size-28_1csp3_126 ._user-avatar__fallback_1csp3_27{font-size:13.076px}._user-avatar--size-28_1csp3_126 ._user-avatar__status_1csp3_73{right:-1px;bottom:-1px}._user-avatar--size-32_1csp3_137{width:32px;height:32px}._user-avatar--size-32_1csp3_137 ._user-avatar__fallback_1csp3_27{font-size:14.944px}._user-avatar--size-32_1csp3_137 ._user-avatar__status_1csp3_73{right:-2px;bottom:-2px}._user-avatar--size-36_1csp3_148{width:36px;height:36px}._user-avatar--size-36_1csp3_148 ._user-avatar__fallback_1csp3_27{font-size:16.812px}._user-avatar--size-36_1csp3_148 ._user-avatar__status_1csp3_73{right:-2px;bottom:-2px}._user-avatar--size-40_1csp3_159{width:40px;height:40px}._user-avatar--size-40_1csp3_159 ._user-avatar__fallback_1csp3_27{font-size:18.68px}._user-avatar--size-40_1csp3_159 ._user-avatar__status_1csp3_73{right:-2px;bottom:-2px}._user-avatar--size-48_1csp3_170{width:48px;height:48px}._user-avatar--size-48_1csp3_170 ._user-avatar__fallback_1csp3_27{font-size:22.416px}._user-avatar--size-48_1csp3_170 ._user-avatar__status_1csp3_73{right:-2px;bottom:-2px}._user-avatar--size-50_1csp3_181{width:50px;height:50px}._user-avatar--size-50_1csp3_181 ._user-avatar__fallback_1csp3_27{font-size:23.35px}._user-avatar--size-50_1csp3_181 ._user-avatar__status_1csp3_73{right:-2px;bottom:-2px}._user-avatar--size-56_1csp3_192{width:56px;height:56px}._user-avatar--size-56_1csp3_192 ._user-avatar__fallback_1csp3_27{font-size:26.152px}._user-avatar--size-56_1csp3_192 ._user-avatar__status_1csp3_73 ._user-avatar__badge_1csp3_199{width:var(--icon-size-20);height:var(--icon-size-20)}._user-avatar--size-56_1csp3_192 ._user-avatar__status_1csp3_73{right:0;bottom:0}._user-avatar--size-64_1csp3_207{width:64px;height:64px}._user-avatar--size-64_1csp3_207 ._user-avatar__fallback_1csp3_27{font-size:29.888px}._user-avatar--size-64_1csp3_207 ._user-avatar__status_1csp3_73 ._user-avatar__badge_1csp3_199{width:var(--icon-size-20);height:var(--icon-size-20)}._user-avatar--size-64_1csp3_207 ._user-avatar__status_1csp3_73{right:0;bottom:0}._user-avatar--size-72_1csp3_222{width:72px;height:72px}._user-avatar--size-72_1csp3_222 ._user-avatar__fallback_1csp3_27{font-size:33.624px}._user-avatar--size-72_1csp3_222 ._user-avatar__status_1csp3_73 ._user-avatar__badge_1csp3_199{width:var(--icon-size-20);height:var(--icon-size-20)}._user-avatar--size-72_1csp3_222 ._user-avatar__status_1csp3_73{right:0;bottom:0}._user-avatar--size-80_1csp3_237{width:80px;height:80px}._user-avatar--size-80_1csp3_237 ._user-avatar__fallback_1csp3_27{font-size:37.36px}._user-avatar--size-80_1csp3_237 ._user-avatar__status_1csp3_73 ._user-avatar__badge_1csp3_199{width:var(--icon-size-20);height:var(--icon-size-20)}._user-avatar--size-80_1csp3_237 ._user-avatar__status_1csp3_73{right:1px;bottom:1px}._user-avatar--size-96_1csp3_252{width:96px;height:96px}._user-avatar--size-96_1csp3_252 ._user-avatar__fallback_1csp3_27{font-size:44.832px}._user-avatar--size-96_1csp3_252 ._user-avatar__status_1csp3_73{right:0;bottom:0}._user-avatar--size-120_1csp3_263{width:120px;height:120px}._user-avatar--size-120_1csp3_263 ._user-avatar__fallback_1csp3_27{font-size:56.04px}._user-avatar--size-120_1csp3_263 ._user-avatar__status_1csp3_73{right:3px;bottom:3px}._user-avatar--size-128_1csp3_274{width:128px;height:128px}._user-avatar--size-128_1csp3_274 ._user-avatar__fallback_1csp3_27{font-size:59.776px}._user-avatar--size-128_1csp3_274 ._user-avatar__status_1csp3_73{right:2px;bottom:2px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,sCAAsC,CAAC;AAI9C,+BAA+B;AAC/B,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,CAAC;AAEV,kDAAkD;AAClD,MAAM,MAAM,uBAAuB,GAC/B,KAAK,GACL,QAAQ,GACR,SAAS,GACT,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAEb,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,iBAAiB,CAAC,gBAAgB,CAAC,EACnC,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CACnC;IACC,qCAAqC;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,8CAA8C;IAC9C,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACrC,oGAAoG;IACpG,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;
|
|
1
|
+
{"version":3,"file":"UserAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,sCAAsC,CAAC;AAI9C,+BAA+B;AAC/B,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,CAAC;AAEV,kDAAkD;AAClD,MAAM,MAAM,uBAAuB,GAC/B,KAAK,GACL,QAAQ,GACR,SAAS,GACT,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAEb,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,iBAAiB,CAAC,gBAAgB,CAAC,EACnC,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CACnC;IACC,qCAAqC;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,8CAA8C;IAC9C,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACrC,oGAAoG;IACpG,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAwDD;;;;;GAKG;AACH,QAAA,MAAM,UAAU,4GAiFf,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserAvatar.js","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
|
|
1
|
+
{"version":3,"file":"UserAvatar.js","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/**\n * Map UserAvatar size to StatusBadge size (Figma scale). `medium` covers\n * 56–80px, `large` is 96–120px and `x-large` is 128px.\n */\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': 'x-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":";;;;;AA8EA,MAAMA,IAAsD;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMMC,IAAqE;AAAA,EACzE,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,KAAO;AAAA,EACP,KAAO;AACT;AAEA,SAASC,EAAkB,GAAoC;AAC7D,MAAIC,IAAI;AACR,WAASC,IAAI,GAAGA,IAAI,EAAE,QAAQA;AAC5B,IAAAD,IAAKA,IAAI,KAAK,EAAE,WAAWC,CAAC,IAAK;AAEnC,SAAOJ,EAAgB,KAAK,IAAIG,CAAC,IAAIH,EAAgB,MAAM;AAC7D;AAEA,SAASK,EAAYC,GAAsB;;AACzC,QAAMC,IAAUD,EAAK,KAAA;AACrB,MAAI,CAACC,EAAS,QAAO;AACrB,QAAMC,IAAYD,EAAQ,MAAM,KAAK,EAAE,CAAC;AACxC,SAAOC,EAAU,CAAC,EAAG,YAAA,OAAiBC,IAAAD,EAAU,CAAC,MAAX,gBAAAC,EAAc,kBAAiB;AACvE;AAQA,MAAMC,IAAaC;AAAA,EACjB,SACE;AAAA,IACE,KAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,KAAAC;AAAA,IACA,MAAAR;AAAA,IACA,eAAAS;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AAEA,UAAM,CAACC,GAAWC,CAAY,IAAIC,EAAA,GAC5BC,IAAYC,EAAO,qBAAqBC,EAAQX,CAAI,CAAC,EAAE,GACvDY,IAAY,CAACF,EAAO,aAAa,GAAGD,GAAWZ,CAAS,EAC3D,OAAO,OAAO,EACd,KAAK,GAAG,GAELgB,IAAc,CAAC,CAACf,KAAOA,MAAQQ,GAC/BQ,IAAa,CAAChB,KAAOe,GACrBE,IAAczB,KAAQM,GACtBoB,IAAWF,IAAazB,EAAY0B,CAAW,IAAI,IACnDE,IAAQlB,KAAiBb,EAAkB6B,CAAW,GACtDG,IAAqBJ,IACvBJ,EAAO,0BAA0BC,EAAQM,CAAK,CAAC,EAAE,IACjD,IAEEE,IACJlB,MAAW,KAAO,WAAWA,KAAU,QACnCmB,IAAYnC,EAA0Be,CAAI;AAEhD,WACE,gBAAAqB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACA,WAAWO;AAAA,QACX,aAAWZ;AAAA,QACX,qBAAmBa,IAAc,SAAS;AAAA,QAEzC,UAAA;AAAA,UAAAC,IACC,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,CAACZ,EAAO,uBAAuB,GAAGQ,CAAkB,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,cACX,MAAK;AAAA,cACL,cAAYtB;AAAA,cAEX,UAAAoB;AAAA,YAAA;AAAA,UAAA,IAGH,gBAAAM;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACP,GAAGlB;AAAA,cACJ,SAAS,CAACmB,MAAM;AACd,gBAAApB,KAAA,QAAAA,EAAUoB,IACVhB,EAAaT,CAAG;AAAA,cAClB;AAAA,cACA,KAAAF;AAAA,cACA,WAAWc,EAAO,oBAAoB;AAAA,cACtC,KAAAZ;AAAA,cACA,OAAO,OAAOE,CAAI;AAAA,cAClB,QAAQ,OAAOA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAGtBmB,KACC,gBAAAG,EAAC,QAAA,EAAK,WAAWZ,EAAO,qBAAqB,GAC3C,UAAA,gBAAAY;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,QAAQL;AAAA,cACR,MAAMC;AAAA,cACN,OAAOlB;AAAA,cACP,WAAWQ,EAAO,oBAAoB;AAAA,YAAA;AAAA,UAAA,EACxC,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UserAvatar.css');const a={"user-avatar":"_user-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UserAvatar.css');const a={"user-avatar":"_user-avatar_1csp3_13","user-avatar__image":"_user-avatar__image_1csp3_19","user-avatar__fallback":"_user-avatar__fallback_1csp3_27","user-avatar__fallback--red":"_user-avatar__fallback--red_1csp3_40","user-avatar__fallback--purple":"_user-avatar__fallback--purple_1csp3_43","user-avatar__fallback--neutral":"_user-avatar__fallback--neutral_1csp3_46","user-avatar__fallback--charcoal":"_user-avatar__fallback--charcoal_1csp3_49","user-avatar__fallback--indigo":"_user-avatar__fallback--indigo_1csp3_52","user-avatar__fallback--teal":"_user-avatar__fallback--teal_1csp3_55","user-avatar__fallback--blue":"_user-avatar__fallback--blue_1csp3_58","user-avatar__fallback--cyan":"_user-avatar__fallback--cyan_1csp3_61","user-avatar__fallback--yellow":"_user-avatar__fallback--yellow_1csp3_64","user-avatar__fallback--green":"_user-avatar__fallback--green_1csp3_67","user-avatar__fallback--orange":"_user-avatar__fallback--orange_1csp3_70","user-avatar__status":"_user-avatar__status_1csp3_73","user-avatar--size-12":"_user-avatar--size-12_1csp3_82","user-avatar--size-16":"_user-avatar--size-16_1csp3_93","user-avatar--size-20":"_user-avatar--size-20_1csp3_104","user-avatar--size-24":"_user-avatar--size-24_1csp3_115","user-avatar--size-28":"_user-avatar--size-28_1csp3_126","user-avatar--size-32":"_user-avatar--size-32_1csp3_137","user-avatar--size-36":"_user-avatar--size-36_1csp3_148","user-avatar--size-40":"_user-avatar--size-40_1csp3_159","user-avatar--size-48":"_user-avatar--size-48_1csp3_170","user-avatar--size-50":"_user-avatar--size-50_1csp3_181","user-avatar--size-56":"_user-avatar--size-56_1csp3_192","user-avatar__badge":"_user-avatar__badge_1csp3_199","user-avatar--size-64":"_user-avatar--size-64_1csp3_207","user-avatar--size-72":"_user-avatar--size-72_1csp3_222","user-avatar--size-80":"_user-avatar--size-80_1csp3_237","user-avatar--size-96":"_user-avatar--size-96_1csp3_252","user-avatar--size-120":"_user-avatar--size-120_1csp3_263","user-avatar--size-128":"_user-avatar--size-128_1csp3_274"};exports.default=a;
|
|
2
2
|
//# sourceMappingURL=UserAvatar.module.scss.cjs.map
|
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
import './UserAvatar.css';const a = {
|
|
2
|
-
"user-avatar": "_user-
|
|
3
|
-
"user-avatar__image": "_user-
|
|
4
|
-
"user-avatar__fallback": "_user-
|
|
5
|
-
"user-avatar__fallback--red": "_user-avatar__fallback--
|
|
6
|
-
"user-avatar__fallback--purple": "_user-avatar__fallback--
|
|
7
|
-
"user-avatar__fallback--neutral": "_user-avatar__fallback--
|
|
8
|
-
"user-avatar__fallback--charcoal": "_user-avatar__fallback--
|
|
9
|
-
"user-avatar__fallback--indigo": "_user-avatar__fallback--
|
|
10
|
-
"user-avatar__fallback--teal": "_user-avatar__fallback--
|
|
11
|
-
"user-avatar__fallback--blue": "_user-avatar__fallback--
|
|
12
|
-
"user-avatar__fallback--cyan": "_user-avatar__fallback--
|
|
13
|
-
"user-avatar__fallback--yellow": "_user-avatar__fallback--
|
|
14
|
-
"user-avatar__fallback--green": "_user-avatar__fallback--
|
|
15
|
-
"user-avatar__fallback--orange": "_user-avatar__fallback--
|
|
16
|
-
"user-avatar__status": "_user-
|
|
17
|
-
"user-avatar--size-12": "_user-avatar--size-
|
|
18
|
-
"user-avatar--size-16": "_user-avatar--size-
|
|
19
|
-
"user-avatar--size-20": "_user-avatar--size-
|
|
20
|
-
"user-avatar--size-24": "_user-avatar--size-
|
|
21
|
-
"user-avatar--size-28": "_user-avatar--size-
|
|
22
|
-
"user-avatar--size-32": "_user-avatar--size-
|
|
23
|
-
"user-avatar--size-36": "_user-avatar--size-
|
|
24
|
-
"user-avatar--size-40": "_user-avatar--size-
|
|
25
|
-
"user-avatar--size-48": "_user-avatar--size-
|
|
26
|
-
"user-avatar--size-50": "_user-avatar--size-
|
|
27
|
-
"user-avatar--size-56": "_user-avatar--size-
|
|
28
|
-
"user-avatar__badge": "_user-
|
|
29
|
-
"user-avatar--size-64": "_user-avatar--size-
|
|
30
|
-
"user-avatar--size-72": "_user-avatar--size-
|
|
31
|
-
"user-avatar--size-80": "_user-avatar--size-
|
|
32
|
-
"user-avatar--size-96": "_user-avatar--size-
|
|
33
|
-
"user-avatar--size-120": "_user-avatar--size-
|
|
34
|
-
"user-avatar--size-128": "_user-avatar--size-
|
|
2
|
+
"user-avatar": "_user-avatar_1csp3_13",
|
|
3
|
+
"user-avatar__image": "_user-avatar__image_1csp3_19",
|
|
4
|
+
"user-avatar__fallback": "_user-avatar__fallback_1csp3_27",
|
|
5
|
+
"user-avatar__fallback--red": "_user-avatar__fallback--red_1csp3_40",
|
|
6
|
+
"user-avatar__fallback--purple": "_user-avatar__fallback--purple_1csp3_43",
|
|
7
|
+
"user-avatar__fallback--neutral": "_user-avatar__fallback--neutral_1csp3_46",
|
|
8
|
+
"user-avatar__fallback--charcoal": "_user-avatar__fallback--charcoal_1csp3_49",
|
|
9
|
+
"user-avatar__fallback--indigo": "_user-avatar__fallback--indigo_1csp3_52",
|
|
10
|
+
"user-avatar__fallback--teal": "_user-avatar__fallback--teal_1csp3_55",
|
|
11
|
+
"user-avatar__fallback--blue": "_user-avatar__fallback--blue_1csp3_58",
|
|
12
|
+
"user-avatar__fallback--cyan": "_user-avatar__fallback--cyan_1csp3_61",
|
|
13
|
+
"user-avatar__fallback--yellow": "_user-avatar__fallback--yellow_1csp3_64",
|
|
14
|
+
"user-avatar__fallback--green": "_user-avatar__fallback--green_1csp3_67",
|
|
15
|
+
"user-avatar__fallback--orange": "_user-avatar__fallback--orange_1csp3_70",
|
|
16
|
+
"user-avatar__status": "_user-avatar__status_1csp3_73",
|
|
17
|
+
"user-avatar--size-12": "_user-avatar--size-12_1csp3_82",
|
|
18
|
+
"user-avatar--size-16": "_user-avatar--size-16_1csp3_93",
|
|
19
|
+
"user-avatar--size-20": "_user-avatar--size-20_1csp3_104",
|
|
20
|
+
"user-avatar--size-24": "_user-avatar--size-24_1csp3_115",
|
|
21
|
+
"user-avatar--size-28": "_user-avatar--size-28_1csp3_126",
|
|
22
|
+
"user-avatar--size-32": "_user-avatar--size-32_1csp3_137",
|
|
23
|
+
"user-avatar--size-36": "_user-avatar--size-36_1csp3_148",
|
|
24
|
+
"user-avatar--size-40": "_user-avatar--size-40_1csp3_159",
|
|
25
|
+
"user-avatar--size-48": "_user-avatar--size-48_1csp3_170",
|
|
26
|
+
"user-avatar--size-50": "_user-avatar--size-50_1csp3_181",
|
|
27
|
+
"user-avatar--size-56": "_user-avatar--size-56_1csp3_192",
|
|
28
|
+
"user-avatar__badge": "_user-avatar__badge_1csp3_199",
|
|
29
|
+
"user-avatar--size-64": "_user-avatar--size-64_1csp3_207",
|
|
30
|
+
"user-avatar--size-72": "_user-avatar--size-72_1csp3_222",
|
|
31
|
+
"user-avatar--size-80": "_user-avatar--size-80_1csp3_237",
|
|
32
|
+
"user-avatar--size-96": "_user-avatar--size-96_1csp3_252",
|
|
33
|
+
"user-avatar--size-120": "_user-avatar--size-120_1csp3_263",
|
|
34
|
+
"user-avatar--size-128": "_user-avatar--size-128_1csp3_274"
|
|
35
35
|
};
|
|
36
36
|
export {
|
|
37
37
|
a as default
|