@mortenbrudvik/waveui 0.12.0 → 0.14.0

package/dist/components/data-display/Persona.mjs

@@ -1,50 +1,109 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
-import { renderSlot as t, slotRendersContent as n } from "../../lib/slot.mjs";
-import { personaClassNames as r } from "../../lib/classNames.mjs";
-import { Avatar as i } from "./Avatar.mjs";
-import { PresenceBadge as a } from "./PresenceBadge.mjs";
-import "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { warnOnce as t } from "../../lib/dev.mjs";
+import { renderSlot as n, slotRendersContent as r } from "../../lib/slot.mjs";
+import { personaClassNames as i } from "../../lib/classNames.mjs";
+import { Avatar as a } from "./Avatar.mjs";
+import { PresenceBadge as o } from "./PresenceBadge.mjs";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/data-display/Persona.tsx
-function c(e) {
-	return e === "extra-small" || e === "small" ? "small" : "medium";
+function u(e) {
+	return e === "extra-small" || e === "small" ? "small" : e === "huge" ? "large" : "medium";
 }
-var l = ({ name: l, secondaryText: u, src: d, size: f = "medium", status: p, avatar: m, badge: h, className: g, ref: _, ...v }) => {
-	let y = h && n(h) ? t(h, "span") : p ? /* @__PURE__ */ o(a, {
-		status: p,
-		size: c(f)
-	}) : null;
-	return /* @__PURE__ */ s("div", {
-		ref: _,
-		className: e(r.root, "inline-flex items-center gap-3", g),
-		...v,
-		children: [/* @__PURE__ */ s("div", {
+function d(e) {
+	return e === "extra-small" || e === "small" ? "medium" : e === "medium" || e === "large" ? "large" : "extra-large";
+}
+var f = {
+	"extra-small": {
+		primary: "text-caption-1",
+		other: "text-caption-2"
+	},
+	small: {
+		primary: "text-body-1",
+		other: "text-caption-1"
+	},
+	medium: {
+		primary: "text-body-1",
+		other: "text-caption-1"
+	},
+	large: {
+		primary: "text-subtitle-2",
+		other: "text-body-1"
+	},
+	"extra-large": {
+		primary: "text-subtitle-1",
+		other: "text-body-1"
+	},
+	huge: {
+		primary: "text-title-3",
+		other: "text-body-2"
+	}
+}, p = {
+	after: "inline-flex items-center gap-3",
+	before: "inline-flex flex-row-reverse items-center gap-3",
+	below: "inline-flex flex-col items-center gap-2"
+}, m = ({ name: m, primaryText: h, secondaryText: g, tertiaryText: _, quaternaryText: v, textPosition: y = "after", textAlignment: b, presenceOnly: x = !1, src: S, size: C = "medium", status: w, avatar: T, badge: E, className: D, ref: O, ...k }) => {
+	let A = b ?? (y === "below" ? "center" : "start"), j = h === void 0 ? !!m : r(h);
+	s.useEffect(() => {
+		j || t("Persona:unnamed", "Persona: it has neither a `name` nor a `primaryText`, so nothing names the person. Pass one of them.");
+	}, [j]);
+	let M = E && r(E) ? n(E, "span") : w ? /* @__PURE__ */ c(o, {
+		status: w,
+		size: x ? d(C) : u(C)
+	}) : null, N = f[C], P = [
+		{
+			key: "primaryText",
+			slot: h ?? m,
+			className: e(i.primaryText, N.primary, "font-semibold")
+		},
+		{
+			key: "secondaryText",
+			slot: g,
+			className: e(i.secondaryText, N.other, "text-muted-foreground")
+		},
+		{
+			key: "tertiaryText",
+			slot: _,
+			className: e(i.tertiaryText, N.other, "text-muted-foreground")
+		},
+		{
+			key: "quaternaryText",
+			slot: v,
+			className: e(i.quaternaryText, N.other, "text-muted-foreground")
+		}
+	];
+	return /* @__PURE__ */ l("div", {
+		ref: O,
+		"data-size": C,
+		"data-text-position": y,
+		"data-text-alignment": A,
+		"data-presence-only": x ? "" : void 0,
+		className: e(i.root, p[y], D),
+		...k,
+		children: [x ? M && /* @__PURE__ */ c("span", {
+			className: e(i.badge, "inline-flex shrink-0"),
+			children: M
+		}) : /* @__PURE__ */ l("div", {
 			className: "relative inline-flex shrink-0",
-			children: [m && n(m) ? t(m, "span", r.avatar) : /* @__PURE__ */ o(i, {
-				src: d,
-				name: l,
-				size: f,
+			children: [T && r(T) ? n(T, "span", i.avatar) : /* @__PURE__ */ c(a, {
+				src: S,
+				name: m,
+				size: C === "huge" ? 72 : C,
 				decorative: !0,
-				className: r.avatar
-			}), y && /* @__PURE__ */ o("span", {
-				className: e(r.badge, "absolute bottom-0 end-0 inline-flex"),
-				children: y
-			})]
-		}), /* @__PURE__ */ s("div", {
-			className: "flex flex-col",
-			children: [/* @__PURE__ */ o("span", {
-				className: e(r.primaryText, "font-semibold text-body-1"),
-				children: l
-			}), u && /* @__PURE__ */ o("span", {
-				className: e(r.secondaryText, "text-caption-1 text-muted-foreground"),
-				children: u
+				className: i.avatar
+			}), M && /* @__PURE__ */ c("span", {
+				className: e(i.badge, "absolute bottom-0 end-0 inline-flex"),
+				children: M
 			})]
+		}), /* @__PURE__ */ c("div", {
+			className: e("flex flex-col", A === "center" ? "items-center text-center" : "items-start text-start"),
+			children: P.map(({ key: e, slot: t, className: i }) => t !== void 0 && r(t) && n(t, "span", i, { key: e }))
 		})]
 	});
 };
-l.displayName = "Persona";
+m.displayName = "Persona";
 //#endregion
-export { l as Persona };
+export { m as Persona };
 
 //# sourceMappingURL=Persona.mjs.map

package/dist/components/data-display/Persona.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Persona.mjs","names":["derivePresenceSize","size","Persona","props","badgeNode","badge","slotRendersContent","renderSlot","status","PresenceBadge","cn","personaClassNames","className","avatar","Avatar","name","secondaryText"],"sources":["../../../src/components/data-display/Persona.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { personaClassNames } from '../../lib/classNames';\nimport type { PresenceStatus, Size, Slot } from '../../lib/types';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport { Avatar } from './Avatar';\nimport { PresenceBadge } from './PresenceBadge';\n\n/** Properties for the Persona component. */\nexport interface PersonaProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Display name of the person. */\n  name: string;\n  /** Secondary text such as job title or email. */\n  secondaryText?: string;\n  /** URL of the person's avatar image. */\n  src?: string;\n  /** Size of the persona avatar.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Presence status shown as a badge on the avatar. Ignored when a `badge` is given. */\n  status?: PresenceStatus;\n  /**\n   * Slot for a custom avatar element, replacing the built-in one. The name is already visible\n   * next to it, so make a custom avatar decorative (e.g. `<Avatar decorative … />`). A value that\n   * renders nothing (`null`, `false`, `''`, `0`, `NaN`, or an array, `Set` or generator of only\n   * such items) counts as not given.\n   */\n  avatar?: Slot<'span'>;\n  /**\n   * Slot for a custom badge element. Takes precedence over `status`. A value that renders nothing\n   * (`null`, `false`, `''`, `0`, `NaN`, e.g. `badge={count && <CounterBadge count={count} />}`,\n   * or an array, `Set` or generator of only such items) counts as not given.\n   */\n  badge?: Slot<'span'>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction derivePresenceSize(size: Size): Size {\n  return size === 'extra-small' || size === 'small' ? 'small' : 'medium';\n}\n\n/**\n * A person's avatar next to their name and optional secondary text (job title, email), with an\n * optional presence badge.\n *\n * The built-in avatar is decorative (`<Avatar decorative>`): the visible name is announced once,\n * not a second time as the avatar's image name. The presence badge stays exposed as a named image.\n *\n * @example\n * <Persona name=\"Jane Doe\" secondaryText=\"Designer\" status=\"available\" />\n */\nexport const Persona = ({\n  name,\n  secondaryText,\n  src,\n  size = 'medium',\n  status,\n  avatar,\n  badge,\n  className,\n  ref,\n  ...props\n}: PersonaProps) => {\n  // A slot that renders nothing (`badge={count && …}` with count 0, an empty `.map()` result) is\n  // not given (C-SLOTS), so the status badge and the built-in avatar apply.\n  const badgeNode =\n    badge && slotRendersContent(badge) ? (\n      renderSlot(badge, 'span')\n    ) : status ? (\n      <PresenceBadge status={status} size={derivePresenceSize(size)} />\n    ) : null;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(personaClassNames.root, 'inline-flex items-center gap-3', className)}\n      {...props}\n    >\n      <div className=\"relative inline-flex shrink-0\">\n        {avatar && slotRendersContent(avatar) ? (\n          renderSlot(avatar, 'span', personaClassNames.avatar)\n        ) : (\n          <Avatar\n            src={src}\n            name={name}\n            size={size}\n            decorative\n            className={personaClassNames.avatar}\n          />\n        )}\n        {badgeNode && (\n          <span className={cn(personaClassNames.badge, 'absolute bottom-0 end-0 inline-flex')}>\n            {badgeNode}\n          </span>\n        )}\n      </div>\n      <div className=\"flex flex-col\">\n        <span className={cn(personaClassNames.primaryText, 'font-semibold text-body-1')}>\n          {name}\n        </span>\n        {secondaryText && (\n          <span\n            className={cn(personaClassNames.secondaryText, 'text-caption-1 text-muted-foreground')}\n          >\n            {secondaryText}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n};\n\nPersona.displayName = 'Persona';\n"],"mappings":";;;;;;;;;AAuCA,SAASA,EAAmB,GAAkB;CAC5C,OAAOC,MAAS,iBAAiBA,MAAS,UAAU,UAAU;AAChE;AAYA,IAAaC,KAAW,EACtB,SACA,kBACA,QACA,UAAO,UACP,WACA,WACA,UACA,cACA,QACA,GAAGC,QACe;CAGlB,IAAMC,IACJC,KAASC,EAAmBD,CAAK,IAC/BE,EAAWF,GAAO,MAAM,IACtBG,IACF,kBAACC,GAAD;EAAuB;EAAQ,MAAMT,EAAmBC,CAAI;CAAI,CAAA,IAC9D;CAEN,OACE,kBAAC,OAAD;EACO;EACL,WAAWS,EAAGC,EAAkB,MAAM,kCAAkCC,CAAS;EACjF,GAAIT;EAHN,UAAA,CAKE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACGU,KAAUP,EAAmBO,CAAM,IAClCN,EAAWM,GAAQ,QAAQF,EAAkB,MAAM,IAEnD,kBAACG,GAAD;IACO;IACC;IACA;IACN,YAAA;IACA,WAAWH,EAAkB;GAC9B,CAAA,GAEFP,KACC,kBAAC,QAAD;IAAM,WAAWM,EAAGC,EAAkB,OAAO,qCAAqC;IAC/E,UAAAP;GACG,CAAA,CAEL;EACL,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,QAAD;IAAM,WAAWM,EAAGC,EAAkB,aAAa,2BAA2B;IAC3E,UAAAI;GACG,CAAA,GACLC,KACC,kBAAC,QAAD;IACE,WAAWN,EAAGC,EAAkB,eAAe,sCAAsC;IAEpF,UAAAK;GACG,CAAA,CAEL;EACF,CAAA,CAAA;;AAET;AAEA,EAAQ,cAAc"}
+{"version":3,"file":"Persona.mjs","names":["React","derivePresenceSize","size","derivePresenceOnlySize","textClasses","positionClasses","Persona","props","resolvedAlignment","textAlignment","textPosition","hasPrimary","primaryText","name","slotRendersContent","warnOnce","badgeNode","badge","renderSlot","status","PresenceBadge","presenceOnly","text","lines","cn","personaClassNames","secondaryText","tertiaryText","quaternaryText","className","avatar","Avatar","lineClass","slot"],"sources":["../../../src/components/data-display/Persona.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { personaClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport type { PresenceStatus, Size, Slot } from '../../lib/types';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport { Avatar } from './Avatar';\nimport { PresenceBadge } from './PresenceBadge';\n\n/** The size of a Persona: the Avatar sizes, and `huge` (a 72px avatar). */\nexport type PersonaSize = Size | 'huge';\n\n/** Properties for the Persona component. */\nexport interface PersonaProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display name of the person. It gives the avatar its initials and the first text line its text\n   * (unless `primaryText` is given). A persona with neither `name` nor `primaryText` warns in\n   * development.\n   */\n  name?: string;\n  /**\n   * The first text line (the name). A string, an element or an object of `<span>` attributes.\n   * @default the `name`\n   */\n  primaryText?: Slot<'span'>;\n  /** The second text line, such as a job title or email. */\n  secondaryText?: Slot<'span'>;\n  /** The third text line, such as a location. */\n  tertiaryText?: Slot<'span'>;\n  /** The fourth text line, such as a status message. */\n  quaternaryText?: Slot<'span'>;\n  /**\n   * Where the text sits relative to the avatar, in reading order: after it, before it, or below it.\n   * @default 'after'\n   */\n  textPosition?: 'after' | 'before' | 'below';\n  /**\n   * How the text lines align with each other.\n   * @default 'start' ('center' when the text is below the avatar)\n   */\n  textAlignment?: 'start' | 'center';\n  /**\n   * Shows only the presence badge (from `status` or `badge`) in place of the avatar. The text\n   * stays.\n   * @default false\n   */\n  presenceOnly?: boolean;\n  /** URL of the person's avatar image. */\n  src?: string;\n  /**\n   * Size of the persona: its avatar and its text.\n   * @default 'medium'\n   */\n  size?: PersonaSize;\n  /** Presence status shown as a badge on the avatar. Ignored when a `badge` is given. */\n  status?: PresenceStatus;\n  /**\n   * Slot for a custom avatar element, replacing the built-in one. The name is already visible\n   * next to it, so make a custom avatar decorative (e.g. `<Avatar decorative … />`). A value that\n   * renders nothing (`null`, `false`, `''`, `0`, `NaN`, or an array, `Set` or generator of only\n   * such items) counts as not given.\n   */\n  avatar?: Slot<'span'>;\n  /**\n   * Slot for a custom badge element. Takes precedence over `status`. A value that renders nothing\n   * (`null`, `false`, `''`, `0`, `NaN`, e.g. `badge={count && <CounterBadge count={count} />}`,\n   * or an array, `Set` or generator of only such items) counts as not given.\n   */\n  badge?: Slot<'span'>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction derivePresenceSize(size: PersonaSize): Size {\n  if (size === 'extra-small' || size === 'small') return 'small';\n  return size === 'huge' ? 'large' : 'medium';\n}\n\n/** The size of the presence badge that stands alone (`presenceOnly`). */\nfunction derivePresenceOnlySize(size: PersonaSize): Size {\n  if (size === 'extra-small' || size === 'small') return 'medium';\n  if (size === 'medium' || size === 'large') return 'large';\n  return 'extra-large';\n}\n\n/** Type steps of the first line and of the other lines, per size. Literal strings only. */\nconst textClasses: Readonly<Record<PersonaSize, { primary: string; other: string }>> = {\n  'extra-small': { primary: 'text-caption-1', other: 'text-caption-2' },\n  small: { primary: 'text-body-1', other: 'text-caption-1' },\n  medium: { primary: 'text-body-1', other: 'text-caption-1' },\n  large: { primary: 'text-subtitle-2', other: 'text-body-1' },\n  'extra-large': { primary: 'text-subtitle-1', other: 'text-body-1' },\n  huge: { primary: 'text-title-3', other: 'text-body-2' },\n};\n\n/** The layout of the root per text position. Logical: `flex-row-reverse` mirrors in RTL by itself. */\nconst positionClasses = {\n  after: 'inline-flex items-center gap-3',\n  before: 'inline-flex flex-row-reverse items-center gap-3',\n  below: 'inline-flex flex-col items-center gap-2',\n} as const;\n\n/**\n * A person's avatar next to their name and up to three more text lines (job title, location,\n * status), with an optional presence badge. The text can sit after, before or below the avatar\n * (`textPosition`), `presenceOnly` swaps the avatar for the presence badge, and the text scales with\n * `size` up to `huge`.\n *\n * The built-in avatar is decorative (`<Avatar decorative>`): the visible name is announced once,\n * not a second time as the avatar's image name. The presence badge stays exposed as a named image.\n *\n * @example\n * <Persona name=\"Jane Doe\" secondaryText=\"Designer\" tertiaryText=\"Oslo\" status=\"available\" />\n */\nexport const Persona = ({\n  name,\n  primaryText,\n  secondaryText,\n  tertiaryText,\n  quaternaryText,\n  textPosition = 'after',\n  textAlignment,\n  presenceOnly = false,\n  src,\n  size = 'medium',\n  status,\n  avatar,\n  badge,\n  className,\n  ref,\n  ...props\n}: PersonaProps) => {\n  const resolvedAlignment = textAlignment ?? (textPosition === 'below' ? 'center' : 'start');\n  const hasPrimary = primaryText !== undefined ? slotRendersContent(primaryText) : !!name;\n  React.useEffect(() => {\n    if (!hasPrimary) {\n      warnOnce(\n        'Persona:unnamed',\n        'Persona: it has neither a `name` nor a `primaryText`, so nothing names the person. Pass one of them.',\n      );\n    }\n  }, [hasPrimary]);\n\n  // A slot that renders nothing (`badge={count && …}` with count 0, an empty `.map()` result) is\n  // not given (C-SLOTS), so the status badge and the built-in avatar apply.\n  const badgeNode =\n    badge && slotRendersContent(badge) ? (\n      renderSlot(badge, 'span')\n    ) : status ? (\n      <PresenceBadge\n        status={status}\n        size={presenceOnly ? derivePresenceOnlySize(size) : derivePresenceSize(size)}\n      />\n    ) : null;\n\n  const text = textClasses[size];\n  const lines = [\n    {\n      key: 'primaryText',\n      slot: primaryText ?? name,\n      className: cn(personaClassNames.primaryText, text.primary, 'font-semibold'),\n    },\n    {\n      key: 'secondaryText',\n      slot: secondaryText,\n      className: cn(personaClassNames.secondaryText, text.other, 'text-muted-foreground'),\n    },\n    {\n      key: 'tertiaryText',\n      slot: tertiaryText,\n      className: cn(personaClassNames.tertiaryText, text.other, 'text-muted-foreground'),\n    },\n    {\n      key: 'quaternaryText',\n      slot: quaternaryText,\n      className: cn(personaClassNames.quaternaryText, text.other, 'text-muted-foreground'),\n    },\n  ] as const;\n\n  return (\n    <div\n      ref={ref}\n      data-size={size}\n      data-text-position={textPosition}\n      data-text-alignment={resolvedAlignment}\n      data-presence-only={presenceOnly ? '' : undefined}\n      className={cn(personaClassNames.root, positionClasses[textPosition], className)}\n      {...props}\n    >\n      {presenceOnly ? (\n        badgeNode && (\n          <span className={cn(personaClassNames.badge, 'inline-flex shrink-0')}>{badgeNode}</span>\n        )\n      ) : (\n        <div className=\"relative inline-flex shrink-0\">\n          {avatar && slotRendersContent(avatar) ? (\n            renderSlot(avatar, 'span', personaClassNames.avatar)\n          ) : (\n            <Avatar\n              src={src}\n              name={name}\n              size={size === 'huge' ? 72 : size}\n              decorative\n              className={personaClassNames.avatar}\n            />\n          )}\n          {badgeNode && (\n            <span className={cn(personaClassNames.badge, 'absolute bottom-0 end-0 inline-flex')}>\n              {badgeNode}\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        className={cn(\n          'flex flex-col',\n          resolvedAlignment === 'center' ? 'items-center text-center' : 'items-start text-start',\n        )}\n      >\n        {lines.map(\n          ({ key, slot, className: lineClass }) =>\n            slot !== undefined &&\n            slotRendersContent(slot) &&\n            renderSlot(slot, 'span', lineClass, { key }),\n        )}\n      </div>\n    </div>\n  );\n};\n\nPersona.displayName = 'Persona';\n"],"mappings":";;;;;;;;;;AAyEA,SAASC,EAAmB,GAAyB;CAEnD,OADIC,MAAS,iBAAiBA,MAAS,UAAgB,UAChDA,MAAS,SAAS,UAAU;AACrC;AAGA,SAASC,EAAuB,GAAyB;CAGvD,OAFID,MAAS,iBAAiBA,MAAS,UAAgB,WACnDA,MAAS,YAAYA,MAAS,UAAgB,UAC3C;AACT;AAGA,IAAME,IAAiF;CACrF,eAAe;EAAE,SAAS;EAAkB,OAAO;CAAiB;CACpE,OAAO;EAAE,SAAS;EAAe,OAAO;CAAiB;CACzD,QAAQ;EAAE,SAAS;EAAe,OAAO;CAAiB;CAC1D,OAAO;EAAE,SAAS;EAAmB,OAAO;CAAc;CAC1D,eAAe;EAAE,SAAS;EAAmB,OAAO;CAAc;CAClE,MAAM;EAAE,SAAS;EAAgB,OAAO;CAAc;AACxD,GAGMC,IAAkB;CACtB,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAcaC,KAAW,EACtB,SACA,gBACA,kBACA,iBACA,mBACA,kBAAe,SACf,kBACA,kBAAe,IACf,QACA,UAAO,UACP,WACA,WACA,UACA,cACA,QACA,GAAGC,QACe;CAClB,IAAMC,IAAoBC,MAAkBC,MAAiB,UAAU,WAAW,UAC5EC,IAAaC,MAAgB,KAAA,IAA8C,CAAC,CAACC,IAApCC,EAAmBF,CAAW;CAC7E,EAAM,gBAAgB;EACpB,AAAKD,KACHI,EACE,mBACA,sGACF;CAEJ,GAAG,CAACJ,CAAU,CAAC;CAIf,IAAMK,IACJC,KAASH,EAAmBG,CAAK,IAC/BC,EAAWD,GAAO,MAAM,IACtBE,IACF,kBAACC,GAAD;EACU;EACR,MAAMC,IAAelB,EAAuBD,CAAI,IAAID,EAAmBC,CAAI;CAC5E,CAAA,IACC,MAEAoB,IAAOlB,EAAYF,IACnBqB,IAAQ;EACZ;GACE,KAAK;GACL,MAAMX,KAAeC;GACrB,WAAWW,EAAGC,EAAkB,aAAaH,EAAK,SAAS,eAAe;EAC5E;EACA;GACE,KAAK;GACL,MAAMI;GACN,WAAWF,EAAGC,EAAkB,eAAeH,EAAK,OAAO,uBAAuB;EACpF;EACA;GACE,KAAK;GACL,MAAMK;GACN,WAAWH,EAAGC,EAAkB,cAAcH,EAAK,OAAO,uBAAuB;EACnF;EACA;GACE,KAAK;GACL,MAAMM;GACN,WAAWJ,EAAGC,EAAkB,gBAAgBH,EAAK,OAAO,uBAAuB;EACrF;CACF;CAEA,OACE,kBAAC,OAAD;EACO;EACL,aAAWpB;EACX,sBAAoBQ;EACpB,uBAAqBF;EACrB,sBAAoBa,IAAe,KAAK,KAAA;EACxC,WAAWG,EAAGC,EAAkB,MAAMpB,EAAgBK,IAAemB,CAAS;EAC9E,GAAItB;EAPN,UAAA,CASGc,IACCL,KACE,kBAAC,QAAD;GAAM,WAAWQ,EAAGC,EAAkB,OAAO,sBAAsB;GAAI,UAAAT;EAAgB,CAAA,IAGzF,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACGc,KAAUhB,EAAmBgB,CAAM,IAClCZ,EAAWY,GAAQ,QAAQL,EAAkB,MAAM,IAEnD,kBAACM,GAAD;IACO;IACC;IACN,MAAM7B,MAAS,SAAS,KAAKA;IAC7B,YAAA;IACA,WAAWuB,EAAkB;GAC9B,CAAA,GAEFT,KACC,kBAAC,QAAD;IAAM,WAAWQ,EAAGC,EAAkB,OAAO,qCAAqC;IAC/E,UAAAT;GACG,CAAA,CAEL;EAEP,CAAA,GAAA,kBAAC,OAAD;GACE,WAAWQ,EACT,iBACAhB,MAAsB,WAAW,6BAA6B,wBAChE;GAEC,UAAAe,EAAM,KACJ,EAAE,QAAK,SAAM,WAAWS,QACvBC,MAAS,KAAA,KACTnB,EAAmBmB,CAAI,KACvBf,EAAWe,GAAM,QAAQD,GAAW,EAAE,OAAI,CAAC,CAC/C;EACG,CAAA,CACF;;AAET;AAEA,EAAQ,cAAc"}

package/dist/components/data-display/PresenceBadge.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/classNames.cjs"),r=require("../../lib/styles.cjs"),i=require("../../lib/icons.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s={available:{glyph:`check`,Icon:i.PresenceAvailableIcon,className:`bg-presence-available text-presence-glyph`},busy:{glyph:`solid`,Icon:i.PresenceBusyIcon,className:`bg-presence-busy text-presence-busy`},away:{glyph:`clock`,Icon:i.PresenceAwayIcon,className:`bg-presence-away text-presence-glyph`},offline:{glyph:`ring-x`,Icon:i.PresenceOfflineIcon,className:`bg-background text-presence-offline`},dnd:{glyph:`bar`,Icon:i.PresenceDndIcon,className:`bg-presence-busy text-presence-glyph`},oof:{glyph:`arrow`,Icon:i.PresenceOofIcon,className:`bg-presence-oof text-presence-glyph`}},c={available:`Available`,busy:`Busy`,away:`Away`,offline:`Offline`,dnd:`Do not disturb`,oof:`Out of office`},l={"extra-small":`size-2`,small:`size-2.5`,medium:`size-3`,large:`size-4`,"extra-large":`size-5`},u=({status:e,size:i=`medium`,className:a,ref:u,...d})=>{let{glyph:f,Icon:p,className:m}=s[e];return(0,o.jsx)(`span`,{ref:u,role:`img`,"aria-label":c[e],"data-glyph":f,...d,className:t.cn(n.presenceBadgeClassNames.root,`inline-flex shrink-0 items-center justify-center rounded-full ring-2 ring-background`,`forced-colors:border`,r.forcedColors.border,l[i],m,a),children:(0,o.jsx)(p,{size:`100%`,className:t.cn(n.presenceBadgeClassNames.icon,`size-full`,f===`arrow`&&`wave-rtl:-scale-x-100`)})})};u.displayName=`PresenceBadge`,exports.PresenceBadge=u;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../lib/styles.cjs"),a=require("../../lib/icons.cjs"),o=require("./Avatar.context.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l={available:{glyph:`check`,Icon:a.PresenceAvailableIcon,className:`bg-presence-available text-presence-glyph`},busy:{glyph:`solid`,Icon:a.PresenceBusyIcon,className:`bg-presence-busy text-presence-busy`},away:{glyph:`clock`,Icon:a.PresenceAwayIcon,className:`bg-presence-away text-presence-glyph`},offline:{glyph:`ring-x`,Icon:a.PresenceOfflineIcon,className:`bg-background text-presence-offline`},"do-not-disturb":{glyph:`bar`,Icon:a.PresenceDndIcon,className:`bg-presence-busy text-presence-glyph`},"out-of-office":{glyph:`arrow`,Icon:a.PresenceOofIcon,className:`bg-presence-oof text-presence-glyph`}},u={available:`Available`,busy:`Busy`,away:`Away`,offline:`Offline`,"do-not-disturb":`Do not disturb`,"out-of-office":`Out of office`},d={dnd:`do-not-disturb`,oof:`out-of-office`};function f(e){if(e===`dnd`||e===`oof`){let t=d[e];return n.warnDeprecated(`PresenceBadge`,`status '${e}'`,`status '${t}'`),t}return e}var p={"extra-small":`size-2`,small:`size-2.5`,medium:`size-3`,large:`size-4`,"extra-large":`size-5`},m=({status:e=`available`,size:n,className:a,ref:d,...m})=>{let h=s.useContext(o.AvatarBadgeSizeContext),g=n??h??`medium`,_=f(e),{glyph:v,Icon:y,className:b}=l[_];return(0,c.jsx)(`span`,{ref:d,role:`img`,"aria-label":u[_],"data-glyph":v,"data-status":_,...m,className:t.cn(r.presenceBadgeClassNames.root,`inline-flex shrink-0 items-center justify-center rounded-full ring-2 ring-background`,`forced-colors:border`,i.forcedColors.border,p[g],b,a),children:(0,c.jsx)(y,{size:`100%`,className:t.cn(r.presenceBadgeClassNames.icon,`size-full`,v===`arrow`&&`wave-rtl:-scale-x-100`)})})};m.displayName=`PresenceBadge`,exports.PresenceBadge=m;
 //# sourceMappingURL=PresenceBadge.cjs.map

package/dist/components/data-display/PresenceBadge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PresenceBadge.cjs","names":["PresenceAvailableIcon","PresenceBusyIcon","PresenceAwayIcon","PresenceOfflineIcon","PresenceDndIcon","PresenceOofIcon","cn","presenceBadgeClassNames","forcedColors","require_runtime","require_cn","require_classNames","require_styles","require_icons","react","react_jsx_runtime","statusStyles","statusLabels","sizeClasses","PresenceBadge","props","statusClassName","status","glyph","size","className","Icon"],"sources":["../../../src/components/data-display/PresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { presenceBadgeClassNames } from '../../lib/classNames';\nimport {\n  PresenceAvailableIcon,\n  PresenceAwayIcon,\n  PresenceBusyIcon,\n  PresenceDndIcon,\n  PresenceOfflineIcon,\n  PresenceOofIcon,\n} from '../../lib/icons';\nimport type { IconComponent } from '../../lib/icons';\nimport { forcedColors } from '../../lib/styles';\nimport type { PresenceStatus, Size } from '../../lib/types';\n\n/** Properties for the PresenceBadge component. */\nexport interface PresenceBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Presence status to display. */\n  status: PresenceStatus;\n  /** Size of the presence indicator.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** The shape drawn for a status, exposed as `data-glyph` (styling hook and test contract). */\ntype PresenceGlyph = 'check' | 'solid' | 'clock' | 'ring-x' | 'bar' | 'arrow';\n\n/**\n * Per status: the glyph name, its shared icon (src/lib/icons.tsx, drawn in a 16×16 box that the\n * badge circle fills) and the colors. Busy is a full disc in `currentColor`: forced-colors mode\n * replaces the background with Canvas but forces `color` to CanvasText, so busy stays a solid dot\n * instead of an empty ring.\n */\nconst statusStyles: Record<\n  PresenceStatus,\n  { glyph: PresenceGlyph; Icon: IconComponent; className: string }\n> = {\n  available: {\n    glyph: 'check',\n    Icon: PresenceAvailableIcon,\n    className: 'bg-presence-available text-presence-glyph',\n  },\n  busy: {\n    glyph: 'solid',\n    Icon: PresenceBusyIcon,\n    className: 'bg-presence-busy text-presence-busy',\n  },\n  away: {\n    glyph: 'clock',\n    Icon: PresenceAwayIcon,\n    className: 'bg-presence-away text-presence-glyph',\n  },\n  offline: {\n    glyph: 'ring-x',\n    Icon: PresenceOfflineIcon,\n    className: 'bg-background text-presence-offline',\n  },\n  dnd: { glyph: 'bar', Icon: PresenceDndIcon, className: 'bg-presence-busy text-presence-glyph' },\n  oof: { glyph: 'arrow', Icon: PresenceOofIcon, className: 'bg-presence-oof text-presence-glyph' },\n};\n\nconst statusLabels: Record<PresenceStatus, string> = {\n  available: 'Available',\n  busy: 'Busy',\n  away: 'Away',\n  offline: 'Offline',\n  dnd: 'Do not disturb',\n  oof: 'Out of office',\n};\n\nconst sizeClasses: Record<Size, string> = {\n  'extra-small': 'size-2', // 8px\n  small: 'size-2.5', // 10px\n  medium: 'size-3', // 12px\n  large: 'size-4', // 16px\n  'extra-large': 'size-5', // 20px\n};\n\n/**\n * A person's availability as a small badge, usually placed on an `Avatar` (`badge` prop).\n *\n * Every status has its own shape, so it is not conveyed by color alone: available (check),\n * busy (solid), away (clock), offline (hollow ring with an X), do not disturb (bar), out of office\n * (arrow, mirrored in right-to-left layouts). A background-colored ring separates it from the\n * avatar. It is a named image (`role=\"img\"`, `aria-label` = the status name; pass `aria-label` to\n * localise or extend it) and never a live region.\n *\n * @example\n * <PresenceBadge status=\"busy\" />\n */\nexport const PresenceBadge = ({\n  status,\n  size = 'medium',\n  className,\n  ref,\n  ...props\n}: PresenceBadgeProps) => {\n  const { glyph, Icon, className: statusClassName } = statusStyles[status];\n\n  return (\n    <span\n      ref={ref}\n      role=\"img\"\n      aria-label={statusLabels[status]}\n      data-glyph={glyph}\n      {...props}\n      className={cn(\n        presenceBadgeClassNames.root,\n        'inline-flex shrink-0 items-center justify-center rounded-full ring-2 ring-background',\n        'forced-colors:border',\n        forcedColors.border,\n        sizeClasses[size],\n        statusClassName,\n        className,\n      )}\n    >\n      <Icon\n        size=\"100%\"\n        className={cn(\n          presenceBadgeClassNames.icon,\n          'size-full',\n          glyph === 'arrow' && 'wave-rtl:-scale-x-100',\n        )}\n      />\n    </span>\n  );\n};\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"mappings":"uRAoCA,IAAMgB,EAGF,CACF,UAAW,CACT,MAAO,QACP,KAAMhB,EAAAA,sBACN,UAAW,2CACb,EACA,KAAM,CACJ,MAAO,QACP,KAAMC,EAAAA,iBACN,UAAW,qCACb,EACA,KAAM,CACJ,MAAO,QACP,KAAMC,EAAAA,iBACN,UAAW,sCACb,EACA,QAAS,CACP,MAAO,SACP,KAAMC,EAAAA,oBACN,UAAW,qCACb,EACA,IAAK,CAAE,MAAO,MAAO,KAAMC,EAAAA,gBAAiB,UAAW,sCAAuC,EAC9F,IAAK,CAAE,MAAO,QAAS,KAAMC,EAAAA,gBAAiB,UAAW,qCAAsC,CACjG,EAEMY,EAA+C,CACnD,UAAW,YACX,KAAM,OACN,KAAM,OACN,QAAS,UACT,IAAK,iBACL,IAAK,eACP,EAEMC,EAAoC,CACxC,cAAe,SACf,MAAO,WACP,OAAQ,SACR,MAAO,SACP,cAAe,QACjB,EAcaC,GAAiB,CAC5B,SACA,OAAO,SACP,YACA,MACA,GAAGC,KACqB,CACxB,GAAM,CAAE,QAAO,OAAM,UAAWC,GAAoBL,EAAaM,GAEjE,OACE,EAAAP,EAAA,IAAA,CAAC,OAAD,CACO,MACL,KAAK,MACL,aAAYE,EAAaK,GACzB,aAAYC,EACZ,GAAIH,EACJ,UAAWd,EAAAA,GACTC,EAAAA,wBAAwB,KACxB,uFACA,uBACAC,EAAAA,aAAa,OACbU,EAAYM,GACZH,EACAI,CACF,EAEA,UAAA,EAAAV,EAAA,IAAA,CAACW,EAAD,CACE,KAAK,OACL,UAAWpB,EAAAA,GACTC,EAAAA,wBAAwB,KACxB,YACAgB,IAAU,SAAW,uBACvB,CACD,CAAA,CACG,CAAA,CAEV,EAEA,EAAc,YAAc"}
+{"version":3,"file":"PresenceBadge.cjs","names":["PresenceAvailableIcon","PresenceBusyIcon","PresenceAwayIcon","PresenceOfflineIcon","PresenceDndIcon","PresenceOofIcon","React","AvatarBadgeSizeContext","cn","presenceBadgeClassNames","forcedColors","require_runtime","require_cn","require_dev","require_classNames","require_styles","require_icons","require_Avatar_context","react","react_jsx_runtime","statusStyles","statusLabels","DEPRECATED_STATUS_NAMES","normalizePresenceStatus","status","current","sizeClasses","PresenceBadge","statusProp","sizeProp","props","avatarBadgeSize","size","statusClassName","glyph","className","Icon"],"sources":["../../../src/components/data-display/PresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { presenceBadgeClassNames } from '../../lib/classNames';\nimport {\n  PresenceAvailableIcon,\n  PresenceAwayIcon,\n  PresenceBusyIcon,\n  PresenceDndIcon,\n  PresenceOfflineIcon,\n  PresenceOofIcon,\n} from '../../lib/icons';\nimport type { IconComponent } from '../../lib/icons';\nimport { warnDeprecated } from '../../lib/dev';\nimport { AvatarBadgeSizeContext } from './Avatar.context';\nimport { forcedColors } from '../../lib/styles';\nimport type { DeprecatedPresenceStatus, PresenceStatus, Size } from '../../lib/types';\n\n/** Properties for the PresenceBadge component. */\nexport interface PresenceBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Presence status to display. `'dnd'` and `'oof'` are deprecated aliases of `'do-not-disturb'`\n   * and `'out-of-office'`: they render the same and warn once in development (removed in 1.0).\n   * @default 'available'\n   */\n  status?: PresenceStatus;\n  /**\n   * Size of the presence indicator. In the `badge` slot of an Avatar it is sized from the avatar.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** The shape drawn for a status, exposed as `data-glyph` (styling hook and test contract). */\ntype PresenceGlyph = 'check' | 'solid' | 'clock' | 'ring-x' | 'bar' | 'arrow';\n\n/**\n * Per status: the glyph name, its shared icon (src/lib/icons.tsx, drawn in a 16×16 box that the\n * badge circle fills) and the colors. Busy is a full disc in `currentColor`: forced-colors mode\n * replaces the background with Canvas but forces `color` to CanvasText, so busy stays a solid dot\n * instead of an empty ring.\n */\nconst statusStyles: Record<\n  Exclude<PresenceStatus, DeprecatedPresenceStatus>,\n  { glyph: PresenceGlyph; Icon: IconComponent; className: string }\n> = {\n  available: {\n    glyph: 'check',\n    Icon: PresenceAvailableIcon,\n    className: 'bg-presence-available text-presence-glyph',\n  },\n  busy: {\n    glyph: 'solid',\n    Icon: PresenceBusyIcon,\n    className: 'bg-presence-busy text-presence-busy',\n  },\n  away: {\n    glyph: 'clock',\n    Icon: PresenceAwayIcon,\n    className: 'bg-presence-away text-presence-glyph',\n  },\n  offline: {\n    glyph: 'ring-x',\n    Icon: PresenceOfflineIcon,\n    className: 'bg-background text-presence-offline',\n  },\n  'do-not-disturb': {\n    glyph: 'bar',\n    Icon: PresenceDndIcon,\n    className: 'bg-presence-busy text-presence-glyph',\n  },\n  'out-of-office': {\n    glyph: 'arrow',\n    Icon: PresenceOofIcon,\n    className: 'bg-presence-oof text-presence-glyph',\n  },\n};\n\nconst statusLabels: Record<Exclude<PresenceStatus, DeprecatedPresenceStatus>, string> = {\n  available: 'Available',\n  busy: 'Busy',\n  away: 'Away',\n  offline: 'Offline',\n  'do-not-disturb': 'Do not disturb',\n  'out-of-office': 'Out of office',\n};\n\nconst DEPRECATED_STATUS_NAMES = {\n  dnd: 'do-not-disturb',\n  oof: 'out-of-office',\n} as const;\n\n/** Maps the deprecated spellings to their Fluent names; warns once for an alias. */\nfunction normalizePresenceStatus(\n  status: PresenceStatus,\n): Exclude<PresenceStatus, DeprecatedPresenceStatus> {\n  if (status === 'dnd' || status === 'oof') {\n    const current = DEPRECATED_STATUS_NAMES[status];\n    warnDeprecated('PresenceBadge', `status '${status}'`, `status '${current}'`);\n    return current;\n  }\n  return status;\n}\n\nconst sizeClasses: Record<Size, string> = {\n  'extra-small': 'size-2', // 8px\n  small: 'size-2.5', // 10px\n  medium: 'size-3', // 12px\n  large: 'size-4', // 16px\n  'extra-large': 'size-5', // 20px\n};\n\n/**\n * A person's availability as a small badge, usually placed on an `Avatar` (`badge` prop).\n *\n * Every status has its own shape, so it is not conveyed by color alone: available (check),\n * busy (solid), away (clock), offline (hollow ring with an X), do not disturb (bar), out of office\n * (arrow, mirrored in right-to-left layouts). A background-colored ring separates it from the\n * avatar. It is a named image (`role=\"img\"`, `aria-label` = the status name; pass `aria-label` to\n * localise or extend it) and never a live region.\n *\n * @example\n * <PresenceBadge status=\"busy\" />\n * <PresenceBadge status=\"do-not-disturb\" />\n */\nexport const PresenceBadge = ({\n  status: statusProp = 'available',\n  size: sizeProp,\n  className,\n  ref,\n  ...props\n}: PresenceBadgeProps) => {\n  const avatarBadgeSize = React.useContext(AvatarBadgeSizeContext);\n  const size = sizeProp ?? avatarBadgeSize ?? 'medium';\n  const status = normalizePresenceStatus(statusProp);\n  const { glyph, Icon, className: statusClassName } = statusStyles[status];\n\n  return (\n    <span\n      ref={ref}\n      role=\"img\"\n      aria-label={statusLabels[status]}\n      data-glyph={glyph}\n      data-status={status}\n      {...props}\n      className={cn(\n        presenceBadgeClassNames.root,\n        'inline-flex shrink-0 items-center justify-center rounded-full ring-2 ring-background',\n        'forced-colors:border',\n        forcedColors.border,\n        sizeClasses[size],\n        statusClassName,\n        className,\n      )}\n    >\n      <Icon\n        size=\"100%\"\n        className={cn(\n          presenceBadgeClassNames.icon,\n          'size-full',\n          glyph === 'arrow' && 'wave-rtl:-scale-x-100',\n        )}\n      />\n    </span>\n  );\n};\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"mappings":"wVA2CA,IAAMoB,EAGF,CACF,UAAW,CACT,MAAO,QACP,KAAMpB,EAAAA,sBACN,UAAW,2CACb,EACA,KAAM,CACJ,MAAO,QACP,KAAMC,EAAAA,iBACN,UAAW,qCACb,EACA,KAAM,CACJ,MAAO,QACP,KAAMC,EAAAA,iBACN,UAAW,sCACb,EACA,QAAS,CACP,MAAO,SACP,KAAMC,EAAAA,oBACN,UAAW,qCACb,EACA,iBAAkB,CAChB,MAAO,MACP,KAAMC,EAAAA,gBACN,UAAW,sCACb,EACA,gBAAiB,CACf,MAAO,QACP,KAAMC,EAAAA,gBACN,UAAW,qCACb,CACF,EAEMgB,EAAkF,CACtF,UAAW,YACX,KAAM,OACN,KAAM,OACN,QAAS,UACT,iBAAkB,iBAClB,gBAAiB,eACnB,EAEMC,EAA0B,CAC9B,IAAK,iBACL,IAAK,eACP,EAGA,SAASC,EACP,EACmD,CACnD,GAAIC,IAAW,OAASA,IAAW,MAAO,CACxC,IAAMC,EAAUH,EAAwBE,GAExC,OADAX,EAAA,eAAe,gBAAiB,WAAWW,EAAO,GAAI,WAAWC,EAAQ,EAAE,EACpEA,CACT,CACA,OAAOD,CACT,CAEA,IAAME,EAAoC,CACxC,cAAe,SACf,MAAO,WACP,OAAQ,SACR,MAAO,SACP,cAAe,QACjB,EAeaC,GAAiB,CAC5B,OAAQC,EAAa,YACrB,KAAMC,EACN,YACA,MACA,GAAGC,KACqB,CACxB,IAAMC,EAAkBzB,EAAM,WAAWC,EAAAA,sBAAsB,EACzDyB,EAAOH,GAAYE,GAAmB,SACtCP,EAASD,EAAwBK,CAAU,EAC3C,CAAE,QAAO,OAAM,UAAWK,GAAoBb,EAAaI,GAEjE,OACE,EAAAL,EAAA,IAAA,CAAC,OAAD,CACO,MACL,KAAK,MACL,aAAYE,EAAaG,GACzB,aAAYU,EACZ,cAAaV,EACb,GAAIM,EACJ,UAAWtB,EAAAA,GACTC,EAAAA,wBAAwB,KACxB,uFACA,uBACAC,EAAAA,aAAa,OACbgB,EAAYM,GACZC,EACAE,CACF,EAEA,UAAA,EAAAhB,EAAA,IAAA,CAACiB,EAAD,CACE,KAAK,OACL,UAAW5B,EAAAA,GACTC,EAAAA,wBAAwB,KACxB,YACAyB,IAAU,SAAW,uBACvB,CACD,CAAA,CACG,CAAA,CAEV,EAEA,EAAc,YAAc"}

package/dist/components/data-display/PresenceBadge.mjs

@@ -1,72 +1,86 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
-import { presenceBadgeClassNames as t } from "../../lib/classNames.mjs";
-import { forcedColors as n } from "../../lib/styles.mjs";
-import { PresenceAvailableIcon as r, PresenceAwayIcon as i, PresenceBusyIcon as a, PresenceDndIcon as o, PresenceOfflineIcon as s, PresenceOofIcon as c } from "../../lib/icons.mjs";
-import "react";
-import { jsx as l } from "react/jsx-runtime";
+import { warnDeprecated as t } from "../../lib/dev.mjs";
+import { presenceBadgeClassNames as n } from "../../lib/classNames.mjs";
+import { forcedColors as r } from "../../lib/styles.mjs";
+import { PresenceAvailableIcon as i, PresenceAwayIcon as a, PresenceBusyIcon as o, PresenceDndIcon as s, PresenceOfflineIcon as c, PresenceOofIcon as l } from "../../lib/icons.mjs";
+import { AvatarBadgeSizeContext as u } from "./Avatar.context.mjs";
+import * as d from "react";
+import { jsx as f } from "react/jsx-runtime";
 //#region src/components/data-display/PresenceBadge.tsx
-var u = {
+var p = {
 	available: {
 		glyph: "check",
-		Icon: r,
+		Icon: i,
 		className: "bg-presence-available text-presence-glyph"
 	},
 	busy: {
 		glyph: "solid",
-		Icon: a,
+		Icon: o,
 		className: "bg-presence-busy text-presence-busy"
 	},
 	away: {
 		glyph: "clock",
-		Icon: i,
+		Icon: a,
 		className: "bg-presence-away text-presence-glyph"
 	},
 	offline: {
 		glyph: "ring-x",
-		Icon: s,
+		Icon: c,
 		className: "bg-background text-presence-offline"
 	},
-	dnd: {
+	"do-not-disturb": {
 		glyph: "bar",
-		Icon: o,
+		Icon: s,
 		className: "bg-presence-busy text-presence-glyph"
 	},
-	oof: {
+	"out-of-office": {
 		glyph: "arrow",
-		Icon: c,
+		Icon: l,
 		className: "bg-presence-oof text-presence-glyph"
 	}
-}, d = {
+}, m = {
 	available: "Available",
 	busy: "Busy",
 	away: "Away",
 	offline: "Offline",
-	dnd: "Do not disturb",
-	oof: "Out of office"
-}, f = {
+	"do-not-disturb": "Do not disturb",
+	"out-of-office": "Out of office"
+}, h = {
+	dnd: "do-not-disturb",
+	oof: "out-of-office"
+};
+function g(e) {
+	if (e === "dnd" || e === "oof") {
+		let n = h[e];
+		return t("PresenceBadge", `status '${e}'`, `status '${n}'`), n;
+	}
+	return e;
+}
+var _ = {
 	"extra-small": "size-2",
 	small: "size-2.5",
 	medium: "size-3",
 	large: "size-4",
 	"extra-large": "size-5"
-}, p = ({ status: r, size: i = "medium", className: a, ref: o, ...s }) => {
-	let { glyph: c, Icon: p, className: m } = u[r];
-	return /* @__PURE__ */ l("span", {
+}, v = ({ status: t = "available", size: i, className: a, ref: o, ...s }) => {
+	let c = d.useContext(u), l = i ?? c ?? "medium", h = g(t), { glyph: v, Icon: y, className: b } = p[h];
+	return /* @__PURE__ */ f("span", {
 		ref: o,
 		role: "img",
-		"aria-label": d[r],
-		"data-glyph": c,
+		"aria-label": m[h],
+		"data-glyph": v,
+		"data-status": h,
 		...s,
-		className: e(t.root, "inline-flex shrink-0 items-center justify-center rounded-full ring-2 ring-background", "forced-colors:border", n.border, f[i], m, a),
-		children: /* @__PURE__ */ l(p, {
+		className: e(n.root, "inline-flex shrink-0 items-center justify-center rounded-full ring-2 ring-background", "forced-colors:border", r.border, _[l], b, a),
+		children: /* @__PURE__ */ f(y, {
 			size: "100%",
-			className: e(t.icon, "size-full", c === "arrow" && "wave-rtl:-scale-x-100")
+			className: e(n.icon, "size-full", v === "arrow" && "wave-rtl:-scale-x-100")
 		})
 	});
 };
-p.displayName = "PresenceBadge";
+v.displayName = "PresenceBadge";
 //#endregion
-export { p as PresenceBadge };
+export { v as PresenceBadge };
 
 //# sourceMappingURL=PresenceBadge.mjs.map

package/dist/components/data-display/PresenceBadge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PresenceBadge.mjs","names":["statusStyles","PresenceAvailableIcon","PresenceBusyIcon","PresenceAwayIcon","PresenceOfflineIcon","PresenceDndIcon","PresenceOofIcon","statusLabels","sizeClasses","PresenceBadge","props","statusClassName","status","glyph","cn","presenceBadgeClassNames","forcedColors","size","className","Icon"],"sources":["../../../src/components/data-display/PresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { presenceBadgeClassNames } from '../../lib/classNames';\nimport {\n  PresenceAvailableIcon,\n  PresenceAwayIcon,\n  PresenceBusyIcon,\n  PresenceDndIcon,\n  PresenceOfflineIcon,\n  PresenceOofIcon,\n} from '../../lib/icons';\nimport type { IconComponent } from '../../lib/icons';\nimport { forcedColors } from '../../lib/styles';\nimport type { PresenceStatus, Size } from '../../lib/types';\n\n/** Properties for the PresenceBadge component. */\nexport interface PresenceBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Presence status to display. */\n  status: PresenceStatus;\n  /** Size of the presence indicator.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** The shape drawn for a status, exposed as `data-glyph` (styling hook and test contract). */\ntype PresenceGlyph = 'check' | 'solid' | 'clock' | 'ring-x' | 'bar' | 'arrow';\n\n/**\n * Per status: the glyph name, its shared icon (src/lib/icons.tsx, drawn in a 16×16 box that the\n * badge circle fills) and the colors. Busy is a full disc in `currentColor`: forced-colors mode\n * replaces the background with Canvas but forces `color` to CanvasText, so busy stays a solid dot\n * instead of an empty ring.\n */\nconst statusStyles: Record<\n  PresenceStatus,\n  { glyph: PresenceGlyph; Icon: IconComponent; className: string }\n> = {\n  available: {\n    glyph: 'check',\n    Icon: PresenceAvailableIcon,\n    className: 'bg-presence-available text-presence-glyph',\n  },\n  busy: {\n    glyph: 'solid',\n    Icon: PresenceBusyIcon,\n    className: 'bg-presence-busy text-presence-busy',\n  },\n  away: {\n    glyph: 'clock',\n    Icon: PresenceAwayIcon,\n    className: 'bg-presence-away text-presence-glyph',\n  },\n  offline: {\n    glyph: 'ring-x',\n    Icon: PresenceOfflineIcon,\n    className: 'bg-background text-presence-offline',\n  },\n  dnd: { glyph: 'bar', Icon: PresenceDndIcon, className: 'bg-presence-busy text-presence-glyph' },\n  oof: { glyph: 'arrow', Icon: PresenceOofIcon, className: 'bg-presence-oof text-presence-glyph' },\n};\n\nconst statusLabels: Record<PresenceStatus, string> = {\n  available: 'Available',\n  busy: 'Busy',\n  away: 'Away',\n  offline: 'Offline',\n  dnd: 'Do not disturb',\n  oof: 'Out of office',\n};\n\nconst sizeClasses: Record<Size, string> = {\n  'extra-small': 'size-2', // 8px\n  small: 'size-2.5', // 10px\n  medium: 'size-3', // 12px\n  large: 'size-4', // 16px\n  'extra-large': 'size-5', // 20px\n};\n\n/**\n * A person's availability as a small badge, usually placed on an `Avatar` (`badge` prop).\n *\n * Every status has its own shape, so it is not conveyed by color alone: available (check),\n * busy (solid), away (clock), offline (hollow ring with an X), do not disturb (bar), out of office\n * (arrow, mirrored in right-to-left layouts). A background-colored ring separates it from the\n * avatar. It is a named image (`role=\"img\"`, `aria-label` = the status name; pass `aria-label` to\n * localise or extend it) and never a live region.\n *\n * @example\n * <PresenceBadge status=\"busy\" />\n */\nexport const PresenceBadge = ({\n  status,\n  size = 'medium',\n  className,\n  ref,\n  ...props\n}: PresenceBadgeProps) => {\n  const { glyph, Icon, className: statusClassName } = statusStyles[status];\n\n  return (\n    <span\n      ref={ref}\n      role=\"img\"\n      aria-label={statusLabels[status]}\n      data-glyph={glyph}\n      {...props}\n      className={cn(\n        presenceBadgeClassNames.root,\n        'inline-flex shrink-0 items-center justify-center rounded-full ring-2 ring-background',\n        'forced-colors:border',\n        forcedColors.border,\n        sizeClasses[size],\n        statusClassName,\n        className,\n      )}\n    >\n      <Icon\n        size=\"100%\"\n        className={cn(\n          presenceBadgeClassNames.icon,\n          'size-full',\n          glyph === 'arrow' && 'wave-rtl:-scale-x-100',\n        )}\n      />\n    </span>\n  );\n};\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"mappings":";;;;;;;;AAoCA,IAAMA,IAGF;CACF,WAAW;EACT,OAAO;EACP,MAAMC;EACN,WAAW;CACb;CACA,MAAM;EACJ,OAAO;EACP,MAAMC;EACN,WAAW;CACb;CACA,MAAM;EACJ,OAAO;EACP,MAAMC;EACN,WAAW;CACb;CACA,SAAS;EACP,OAAO;EACP,MAAMC;EACN,WAAW;CACb;CACA,KAAK;EAAE,OAAO;EAAO,MAAMC;EAAiB,WAAW;CAAuC;CAC9F,KAAK;EAAE,OAAO;EAAS,MAAMC;EAAiB,WAAW;CAAsC;AACjG,GAEMC,IAA+C;CACnD,WAAW;CACX,MAAM;CACN,MAAM;CACN,SAAS;CACT,KAAK;CACL,KAAK;AACP,GAEMC,IAAoC;CACxC,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAcaC,KAAiB,EAC5B,WACA,UAAO,UACP,cACA,QACA,GAAGC,QACqB;CACxB,IAAM,EAAE,UAAO,SAAM,WAAWC,MAAoBX,EAAaY;CAEjE,OACE,kBAAC,QAAD;EACO;EACL,MAAK;EACL,cAAYL,EAAaK;EACzB,cAAYC;EACZ,GAAIH;EACJ,WAAWI,EACTC,EAAwB,MACxB,wFACA,wBACAC,EAAa,QACbR,EAAYS,IACZN,GACAO,CACF;EAEA,UAAA,kBAACC,GAAD;GACE,MAAK;GACL,WAAWL,EACTC,EAAwB,MACxB,aACAF,MAAU,WAAW,uBACvB;EACD,CAAA;CACG,CAAA;AAEV;AAEA,EAAc,cAAc"}
+{"version":3,"file":"PresenceBadge.mjs","names":["React","statusStyles","PresenceAvailableIcon","PresenceBusyIcon","PresenceAwayIcon","PresenceOfflineIcon","PresenceDndIcon","PresenceOofIcon","statusLabels","DEPRECATED_STATUS_NAMES","normalizePresenceStatus","status","current","warnDeprecated","sizeClasses","PresenceBadge","statusProp","sizeProp","props","avatarBadgeSize","AvatarBadgeSizeContext","size","statusClassName","glyph","cn","presenceBadgeClassNames","forcedColors","className","Icon"],"sources":["../../../src/components/data-display/PresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { presenceBadgeClassNames } from '../../lib/classNames';\nimport {\n  PresenceAvailableIcon,\n  PresenceAwayIcon,\n  PresenceBusyIcon,\n  PresenceDndIcon,\n  PresenceOfflineIcon,\n  PresenceOofIcon,\n} from '../../lib/icons';\nimport type { IconComponent } from '../../lib/icons';\nimport { warnDeprecated } from '../../lib/dev';\nimport { AvatarBadgeSizeContext } from './Avatar.context';\nimport { forcedColors } from '../../lib/styles';\nimport type { DeprecatedPresenceStatus, PresenceStatus, Size } from '../../lib/types';\n\n/** Properties for the PresenceBadge component. */\nexport interface PresenceBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Presence status to display. `'dnd'` and `'oof'` are deprecated aliases of `'do-not-disturb'`\n   * and `'out-of-office'`: they render the same and warn once in development (removed in 1.0).\n   * @default 'available'\n   */\n  status?: PresenceStatus;\n  /**\n   * Size of the presence indicator. In the `badge` slot of an Avatar it is sized from the avatar.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** The shape drawn for a status, exposed as `data-glyph` (styling hook and test contract). */\ntype PresenceGlyph = 'check' | 'solid' | 'clock' | 'ring-x' | 'bar' | 'arrow';\n\n/**\n * Per status: the glyph name, its shared icon (src/lib/icons.tsx, drawn in a 16×16 box that the\n * badge circle fills) and the colors. Busy is a full disc in `currentColor`: forced-colors mode\n * replaces the background with Canvas but forces `color` to CanvasText, so busy stays a solid dot\n * instead of an empty ring.\n */\nconst statusStyles: Record<\n  Exclude<PresenceStatus, DeprecatedPresenceStatus>,\n  { glyph: PresenceGlyph; Icon: IconComponent; className: string }\n> = {\n  available: {\n    glyph: 'check',\n    Icon: PresenceAvailableIcon,\n    className: 'bg-presence-available text-presence-glyph',\n  },\n  busy: {\n    glyph: 'solid',\n    Icon: PresenceBusyIcon,\n    className: 'bg-presence-busy text-presence-busy',\n  },\n  away: {\n    glyph: 'clock',\n    Icon: PresenceAwayIcon,\n    className: 'bg-presence-away text-presence-glyph',\n  },\n  offline: {\n    glyph: 'ring-x',\n    Icon: PresenceOfflineIcon,\n    className: 'bg-background text-presence-offline',\n  },\n  'do-not-disturb': {\n    glyph: 'bar',\n    Icon: PresenceDndIcon,\n    className: 'bg-presence-busy text-presence-glyph',\n  },\n  'out-of-office': {\n    glyph: 'arrow',\n    Icon: PresenceOofIcon,\n    className: 'bg-presence-oof text-presence-glyph',\n  },\n};\n\nconst statusLabels: Record<Exclude<PresenceStatus, DeprecatedPresenceStatus>, string> = {\n  available: 'Available',\n  busy: 'Busy',\n  away: 'Away',\n  offline: 'Offline',\n  'do-not-disturb': 'Do not disturb',\n  'out-of-office': 'Out of office',\n};\n\nconst DEPRECATED_STATUS_NAMES = {\n  dnd: 'do-not-disturb',\n  oof: 'out-of-office',\n} as const;\n\n/** Maps the deprecated spellings to their Fluent names; warns once for an alias. */\nfunction normalizePresenceStatus(\n  status: PresenceStatus,\n): Exclude<PresenceStatus, DeprecatedPresenceStatus> {\n  if (status === 'dnd' || status === 'oof') {\n    const current = DEPRECATED_STATUS_NAMES[status];\n    warnDeprecated('PresenceBadge', `status '${status}'`, `status '${current}'`);\n    return current;\n  }\n  return status;\n}\n\nconst sizeClasses: Record<Size, string> = {\n  'extra-small': 'size-2', // 8px\n  small: 'size-2.5', // 10px\n  medium: 'size-3', // 12px\n  large: 'size-4', // 16px\n  'extra-large': 'size-5', // 20px\n};\n\n/**\n * A person's availability as a small badge, usually placed on an `Avatar` (`badge` prop).\n *\n * Every status has its own shape, so it is not conveyed by color alone: available (check),\n * busy (solid), away (clock), offline (hollow ring with an X), do not disturb (bar), out of office\n * (arrow, mirrored in right-to-left layouts). A background-colored ring separates it from the\n * avatar. It is a named image (`role=\"img\"`, `aria-label` = the status name; pass `aria-label` to\n * localise or extend it) and never a live region.\n *\n * @example\n * <PresenceBadge status=\"busy\" />\n * <PresenceBadge status=\"do-not-disturb\" />\n */\nexport const PresenceBadge = ({\n  status: statusProp = 'available',\n  size: sizeProp,\n  className,\n  ref,\n  ...props\n}: PresenceBadgeProps) => {\n  const avatarBadgeSize = React.useContext(AvatarBadgeSizeContext);\n  const size = sizeProp ?? avatarBadgeSize ?? 'medium';\n  const status = normalizePresenceStatus(statusProp);\n  const { glyph, Icon, className: statusClassName } = statusStyles[status];\n\n  return (\n    <span\n      ref={ref}\n      role=\"img\"\n      aria-label={statusLabels[status]}\n      data-glyph={glyph}\n      data-status={status}\n      {...props}\n      className={cn(\n        presenceBadgeClassNames.root,\n        'inline-flex shrink-0 items-center justify-center rounded-full ring-2 ring-background',\n        'forced-colors:border',\n        forcedColors.border,\n        sizeClasses[size],\n        statusClassName,\n        className,\n      )}\n    >\n      <Icon\n        size=\"100%\"\n        className={cn(\n          presenceBadgeClassNames.icon,\n          'size-full',\n          glyph === 'arrow' && 'wave-rtl:-scale-x-100',\n        )}\n      />\n    </span>\n  );\n};\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"mappings":";;;;;;;;;;AA2CA,IAAMC,IAGF;CACF,WAAW;EACT,OAAO;EACP,MAAMC;EACN,WAAW;CACb;CACA,MAAM;EACJ,OAAO;EACP,MAAMC;EACN,WAAW;CACb;CACA,MAAM;EACJ,OAAO;EACP,MAAMC;EACN,WAAW;CACb;CACA,SAAS;EACP,OAAO;EACP,MAAMC;EACN,WAAW;CACb;CACA,kBAAkB;EAChB,OAAO;EACP,MAAMC;EACN,WAAW;CACb;CACA,iBAAiB;EACf,OAAO;EACP,MAAMC;EACN,WAAW;CACb;AACF,GAEMC,IAAkF;CACtF,WAAW;CACX,MAAM;CACN,MAAM;CACN,SAAS;CACT,kBAAkB;CAClB,iBAAiB;AACnB,GAEMC,IAA0B;CAC9B,KAAK;CACL,KAAK;AACP;AAGA,SAASC,EACP,GACmD;CACnD,IAAIC,MAAW,SAASA,MAAW,OAAO;EACxC,IAAMC,IAAUH,EAAwBE;EAExC,OADAE,EAAe,iBAAiB,WAAWF,EAAO,IAAI,WAAWC,EAAQ,EAAE,GACpEA;CACT;CACA,OAAOD;AACT;AAEA,IAAMG,IAAoC;CACxC,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAeaC,KAAiB,EAC5B,QAAQC,IAAa,aACrB,MAAMC,GACN,cACA,QACA,GAAGC,QACqB;CACxB,IAAMC,IAAkBnB,EAAM,WAAWoB,CAAsB,GACzDC,IAAOJ,KAAYE,KAAmB,UACtCR,IAASD,EAAwBM,CAAU,GAC3C,EAAE,UAAO,SAAM,WAAWM,MAAoBrB,EAAaU;CAEjE,OACE,kBAAC,QAAD;EACO;EACL,MAAK;EACL,cAAYH,EAAaG;EACzB,cAAYY;EACZ,eAAaZ;EACb,GAAIO;EACJ,WAAWM,EACTC,EAAwB,MACxB,wFACA,wBACAC,EAAa,QACbZ,EAAYO,IACZC,GACAK,CACF;EAEA,UAAA,kBAACC,GAAD;GACE,MAAK;GACL,WAAWJ,EACTC,EAAwB,MACxB,aACAF,MAAU,WAAW,uBACvB;EACD,CAAA;CACG,CAAA;AAEV;AAEA,EAAc,cAAc"}

package/dist/components/data-display/Tag.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../lib/classNames.cjs"),s=require("../../hooks/useEventCallback.cjs"),c=require("../../hooks/useId.cjs"),l=require("../../hooks/useMergedRefs.cjs"),u=require("../../lib/styles.cjs"),d=require("../button/Button.cjs"),f=require("../button/Button.slots.cjs"),p=require("../../lib/icons.cjs"),m=require("../../lib/mergeProps.cjs"),h=require("../../lib/labelInName.cjs"),g=require("../../lib/events.cjs"),_=require("./TagGroup.context.cjs"),v=require("./Avatar.context.cjs"),y=require("./tagStyles.cjs");let b=require("react");b=e.__toESM(b,1);let x=require("react/jsx-runtime");var S=new Set([`type`,`disabled`,`autoFocus`,`form`,`formAction`,`formEncType`,`formMethod`,`formNoValidate`,`formTarget`,`name`,`value`]),C=/^on[A-Z]/,w=new Set([`aria-label`,`aria-labelledby`]),T=()=>{};function E(e){let t={},n=!1;for(let[r,i]of Object.entries(e))w.has(r)?i!==void 0&&(n=!0):t[r]=i;return{props:t,ignoredName:n}}var D=`inline-flex items-center justify-center`;function O(e){if(typeof e!=`object`||!e||b.isValidElement(e)||Symbol.iterator in e)return!1;let t=Object.getPrototypeOf(e);return t===null||t===Object.prototype}function k(e,t){return(0,x.jsx)(p.DismissIcon,{size:e,className:t})}function A(e,r){if(!i.slotRendersContent(e))return{buttonProps:null,content:k(r,o.tagClassNames.dismissIcon),warning:null,ignoredName:!1,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1};let a=n.getElementType(e);if(b.isValidElement(e)&&(a===`button`||a===d.Button)){let{children:n,dangerouslySetInnerHTML:s,...c}=e.props,l=a===d.Button,u=c;if(l){u={};for(let[e,t]of Object.entries(c))f.BUTTON_OWN_PROP_KEYS.has(e)||(u[e]=t)}let p=l?c.icon:void 0,{props:m,ignoredName:g}=E(u),_=i.slotRendersContent(p)?i.renderSlot(p,`span`,t.cn(o.tagClassNames.dismissIcon,D),{"aria-hidden":!0}):null,v=s==null?i.materialiseSlotContent(n):(0,x.jsx)(`span`,{className:D,dangerouslySetInnerHTML:s});return{buttonProps:m,content:_||i.slotRendersContent(v)?f.placeButtonIcon(_,v,l&&c.iconPosition):k(r,o.tagClassNames.dismissIcon),warning:`button-element`,ignoredName:g,contentMayName:!0,literalTextLabel:h.hasTextLabel(v),disabledFocusable:l&&!!c.disabledFocusable}}if(O(e)){let n=e.as===d.Button,a=e.as===`button`||n||Object.keys(e).some(e=>S.has(e)||C.test(e)),s={},c={},l={},u=!1;for(let[t,r]of Object.entries(e))t===`as`?r!==`button`&&!n&&(c.as=r):n&&f.BUTTON_OWN_PROP_KEYS.has(t)?l[t]=r:w.has(t)?r!==void 0&&(u=!0):t===`children`||t===`dangerouslySetInnerHTML`?c[t]=r:a||t.startsWith(`aria-`)&&t!==`aria-hidden`?s[t]=r:c[t]=r;let p=i.slotRendersContent(l.icon);return p?c.children=f.placeButtonIcon(i.renderSlot(l.icon,`span`,t.cn(o.tagClassNames.dismissIcon,D)),i.materialiseSlotContent(c.children),l.iconPosition):i.slotWrapsDefaultContent(c.as??`span`,c)&&(c.children=k(r)),{buttonProps:a||Object.keys(s).length>0?s:null,content:i.renderSlot(c,`span`,t.cn(!p&&o.tagClassNames.dismissIcon,D),{"aria-hidden":!0}),warning:a?`button-object`:null,ignoredName:u,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!!l.disabledFocusable}}return{buttonProps:null,content:i.renderSlot(e,`span`,t.cn(o.tagClassNames.dismissIcon,D),{"aria-hidden":!0}),warning:null,ignoredName:!1,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1}}var j=new Set([`button`,`fieldset`,`input`,`optgroup`,`option`,`select`,`textarea`]),M=new Set([`button`,`data`,`input`,`li`,`meter`,`option`,`progress`,`select`,`textarea`]),ee={disabled:!0,"aria-disabled":void 0,"data-disabled":void 0,"data-disabled-focusable":void 0};function N(e,t){return typeof e==`string`&&Object.hasOwn(t,e)}function te(e){e.preventDefault(),e.stopPropagation()}function P({buttonProps:e,content:t,contentMayName:n,literalTextLabel:r,disabledFocusable:i,disabled:o,dismissLabel:s,contentId:u,dismissName:d,buttonRef:p}){let m=c.useId(`tag-dismiss`),g=c.useId(`tag-dismiss-text`),{ref:v,...y}=e,S=b.useRef(null),C=l.useMergedRefs(S,p,v);_.useDismissControlFocus(S);let[w,E]=b.useState(null),D=b.useCallback(e=>w?h.observeTextLabel(w,e):T,[w]),O=b.useSyncExternalStore(D,()=>w?h.hasRenderedTextLabel(w):r,()=>r),k=n&&O,A=_.useHeldFocus(o),j=o?A.held?f.MERGED_DISABLED_FOCUSABLE_PROPS:ee:i?f.MERGED_DISABLED_FOCUSABLE_PROPS:void 0,M=d!==void 0;return(0,x.jsxs)(`button`,{...y,ref:C,type:y.type??`button`,...j,"aria-label":M?d:void 0,"aria-labelledby":M?void 0:`${k?g:m} ${u}`,onFocus:a.composeEventHandlers(y.onFocus,A.onFocus,{checkDefaultPrevented:!1}),onBlur:a.composeEventHandlers(y.onBlur,A.onBlur,{checkDefaultPrevented:!1}),children:[!M&&(0,x.jsx)(`span`,{id:m,className:`sr-only`,children:s}),n?(0,x.jsx)(`span`,{id:g,ref:E,className:`inline-flex items-center justify-center gap-[inherit]`,children:t}):t]})}P.displayName=`TagDismissButton`;var ne=new Set([`a`,`button`,`input`,`select`,`textarea`,`li`]),re='Tag: `as="button"` with `dismissible` puts the Dismiss button inside a button. Use InteractionTag instead: `InteractionTag.Primary` for the action, `InteractionTag.Secondary` for Dismiss.',ie='Tag: a dismissible tag rendered as a link (`as="a"` or a link component) puts the Dismiss button inside the link. Put the link in the tag\'s content: `<Tag dismissible><a href>…</a></Tag>`.',ae='TagGroup: a tag in a `role="list"` group is not a list item (its element is a link, a button or a component). Put a link in the tag\'s content (`<Tag><a href>…</a></Tag>`), or wrap the tag in an element with `role="listitem"`.';function oe(e){for(let t=e;t&&!t.matches(`[data-wave-tag-group]`);t=t.parentElement)if(t.getAttribute(`role`)===`listitem`||t.localName===`li`)return!0;return!1}var F=e=>{let{as:n,appearance:d,size:f,shape:p,disabled:h,selected:S=!1,value:C,media:w,icon:T,secondaryText:E,dismissible:D,onDismiss:O,dismissIcon:k,dismissLabel:ee=`Dismiss`,className:F,children:se,role:ce,hidden:le,onClick:ue,onFocus:de,onBlur:fe,onKeyDown:pe,ref:me,...he}=e,I=n??`span`,L=c.useId(`tag-content`),R=_.useTagGroupContext(),z=b.useContext(_.TagHostContext),B=b.useRef(null),ge=l.useMergedRefs(B,me),V=b.useRef(null),_e=b.useRef(null),H=N(f,y.tagSizeClasses)?f:R?.size??`medium`,U=N(d,y.tagAppearanceClasses)?d:R?.appearance??`filled`,ve=N(p,y.tagShapeClasses)?p:R?.shape??`circular`,W=(R?.disabled??!1)||h===!0,G=D??R?.dismissible??!1,K=S&&!W?`selected`:U,ye=R?.dimDisabled??!0,be=_.useTagGroupItem(B,C,{reported:G&&(R?.reportsDismissals??!1)}),xe=I===`a`,Se=xe&&W,Ce=I===`button`,q=_.useHeldFocus((xe||Ce)&&W),J=Ce&&q.held,{buttonProps:we,content:Te,warning:Y,ignoredName:Ee,contentMayName:De,literalTextLabel:Oe,disabledFocusable:ke}=A(G?k:void 0,y.TAG_DISMISS_GLYPH_SIZE[H]);b.useEffect(()=>{Y===`button-element`?r.warnOnce(`Tag:dismissIcon-button`,"Tag: `dismissIcon` received a button. Its props were merged into the built-in dismiss button (a button cannot contain another button), which is named by its text label (or `dismissLabel`) and the tag content. Pass icon content instead, e.g. `dismissIcon={<CloseIcon />}`, and handle the dismissal in `onDismiss`."):Y===`button-object`&&r.warnDeprecated(`Tag`,`dismissIcon={{ onClick, type, disabled, … }} (button props on the slot object)`,`onDismiss and icon content in dismissIcon`,"Its props are merged onto the built-in dismiss button, which is named by `dismissLabel` and the tag content.")},[Y]);let Ae=D===void 0&&!(R?.dismissible??!1)&&(O!==void 0||k!==void 0);b.useEffect(()=>{Ae&&r.warnOnce(`Tag:dismiss-without-dismissible`,"Tag: `onDismiss` and `dismissIcon` take effect only with `dismissible`; no dismiss button was rendered. Add `dismissible` to render it.")},[Ae]),b.useEffect(()=>{Ee&&r.warnOnce(`Tag:dismissIcon-name`,'Tag: `aria-label`/`aria-labelledby` on `dismissIcon` are ignored. The dismiss button is named by `dismissLabel` (default "Dismiss") and the tag content, e.g. "Dismiss Cherry"; set `dismissLabel` to change or localise it.')},[Ee]),b.useEffect(()=>{if(!G||!r.isDev||r.hasWarned(`Tag:nested-button`))return;let e=B.current?.localName;e===`button`?r.warnOnce(`Tag:nested-button`,re):e===`a`&&r.warnOnce(`Tag:nested-button`,ie)});let je=R?.mode===`list`;b.useEffect(()=>{if(!je||!r.isDev||r.hasWarned(`TagGroup:list-item`))return;let e=B.current;e&&!oe(e)&&r.warnOnce(`TagGroup:list-item`,ae)});let Me=i.slotRendersContent(w),Ne=i.slotRendersContent(T),X=i.materialiseSlotContent(E),Pe=i.slotRendersContent(X),Fe=b.useMemo(()=>({size:y.TAG_AVATAR_SIZE[H]}),[H]),Ie=e=>typeof I!=`string`||e.has(I),Z={};Ie(j)&&(W||h!==void 0)&&(Z.disabled=W&&!J),J&&(Z[`aria-disabled`]=!0,Z[`data-disabled-focusable`]=``),C!==void 0&&Ie(M)&&(Z.value=C),Se&&(Z[`aria-disabled`]=!0,q.held?Z[`data-disabled-focusable`]=``:(Z.href=void 0,Z.role=`link`));let Le=je&&typeof I==`string`&&!ne.has(I)?`listitem`:void 0,Re=C!==void 0&&(R?.hiddenValues?.has(C)??!1),ze=Se||J?e=>{g.isOwnEvent(e)?te(e):ue?.(e)}:ue,Be=s.useEventCallback(e=>{let t=V.current,n=_e.current;t&&n&&_.isDismissKey(e)&&t.contains(e.target)&&!g.isEditableTarget(e.target)&&(e.preventDefault(),n.click())}),Q={type:`button`,"data-wave-tag-dismiss":``,className:t.cn(o.tagClassNames.dismissButton,y.TAG_DISMISS_BASE_CLASSES,y.tagDismissSizeClasses[H],!W&&[`disabled:opacity-50`,`aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100`,y.tagDismissStateClasses[K]],u.focusRing,y.tagDismissRingClasses[H],K===`selected`&&`focus-visible:outline-primary-foreground`,z?.dismissButtonClassName),onKeyDown:e=>{if(e.target===e.currentTarget){if(_.isRepeatedActivation(e)){e.preventDefault();return}_.isDismissKey(e)&&(e.preventDefault(),e.currentTarget.click())}}};(O||R)&&(Q.onClick=e=>{g.isOwnEvent(e)&&(O?.(),R?.dismiss(be))});let Ve=we?m.mergeProps(Q,we):Q,$=(0,x.jsx)(`span`,{id:L,ref:V,className:t.cn(o.tagClassNames.primaryText,`inline-flex items-center gap-1`,Pe&&`text-caption-1 leading-3.5`),children:se});return(0,x.jsxs)(I,{"data-size":H,"data-appearance":U,"data-shape":ve,"data-selected":S?``:void 0,"data-disabled":W?``:void 0,"data-wave-tag-item":``,role:ce??Le,hidden:Re||le,...he,...Z,ref:ge,className:t.cn(o.tagClassNames.root,y.TAG_ROOT_BASE_CLASSES,y.tagSizeClasses[H],y.tagStartInsetClasses[H][Me?`media`:Ne?`icon`:`text`],y.tagEndInsetClasses[H][G?`dismiss`:`text`],K===`selected`?[y.TAG_SELECTED_CLASSES,u.forcedColors.selectedContainer]:y.tagAppearanceClasses[U],W&&[ye&&`opacity-50 focus-visible:opacity-100 has-focus-visible:opacity-100`,u.forcedColors.disabled],y.tagShapeClasses[ve],F),onClick:ze,onKeyDown:a.composeEventHandlers(pe,Be),onFocus:a.composeEventHandlers(de,q.onFocus,{checkDefaultPrevented:!1}),onBlur:a.composeEventHandlers(fe,q.onBlur,{checkDefaultPrevented:!1}),children:[Me&&(0,x.jsx)(v.AvatarSizeContext.Provider,{value:Fe,children:i.renderSlot(w,`span`,t.cn(o.tagClassNames.media,y.tagMediaClasses[H]))}),Ne&&i.renderSlot(T,`span`,t.cn(o.tagClassNames.icon,y.tagIconClasses[H]),{"aria-hidden":!0}),Pe?(0,x.jsxs)(`span`,{className:y.TAG_TEXT_COLUMN_CLASSES,children:[$,(0,x.jsx)(`span`,{className:t.cn(o.tagClassNames.secondaryText,y.TAG_SECONDARY_TEXT_CLASSES),children:X})]}):$,G&&(0,x.jsx)(P,{buttonProps:Ve,content:Te,contentMayName:De,literalTextLabel:Oe,disabledFocusable:ke,disabled:W,dismissLabel:ee,contentId:L,dismissName:z?.dismissName,buttonRef:_e})]})};F.displayName=`Tag`,exports.Tag=F;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../lib/classNames.cjs"),s=require("../../hooks/useEventCallback.cjs"),c=require("../../hooks/useId.cjs"),l=require("../../hooks/useMergedRefs.cjs"),u=require("../../lib/styles.cjs"),d=require("../button/Button.cjs"),f=require("../button/Button.slots.cjs"),p=require("../../lib/icons.cjs"),m=require("../../lib/mergeProps.cjs"),h=require("../../lib/labelInName.cjs"),g=require("../../lib/events.cjs"),_=require("./TagGroup.context.cjs"),v=require("./Avatar.context.cjs"),y=require("./tagStyles.cjs");let b=require("react");b=e.__toESM(b,1);let x=require("react/jsx-runtime");var S=new Set([`type`,`disabled`,`autoFocus`,`form`,`formAction`,`formEncType`,`formMethod`,`formNoValidate`,`formTarget`,`name`,`value`]),C=/^on[A-Z]/,w=new Set([`aria-label`,`aria-labelledby`]),T=()=>{};function E(e){let t={},n=!1;for(let[r,i]of Object.entries(e))w.has(r)?i!==void 0&&(n=!0):t[r]=i;return{props:t,ignoredName:n}}var D=`inline-flex items-center justify-center`;function O(e){if(typeof e!=`object`||!e||b.isValidElement(e)||Symbol.iterator in e)return!1;let t=Object.getPrototypeOf(e);return t===null||t===Object.prototype}function k(e,t){return(0,x.jsx)(p.DismissIcon,{size:e,className:t})}function A(e,r){if(!i.slotRendersContent(e))return{buttonProps:null,content:k(r,o.tagClassNames.dismissIcon),warning:null,ignoredName:!1,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1};let a=n.getElementType(e);if(b.isValidElement(e)&&(a===`button`||a===d.Button)){let{children:n,dangerouslySetInnerHTML:s,...c}=e.props,l=a===d.Button,u=c;if(l){u={};for(let[e,t]of Object.entries(c))f.BUTTON_OWN_PROP_KEYS.has(e)||(u[e]=t)}let p=l?c.icon:void 0,{props:m,ignoredName:g}=E(u),_=i.slotRendersContent(p)?i.renderSlot(p,`span`,t.cn(o.tagClassNames.dismissIcon,D),{"aria-hidden":!0}):null,v=s==null?i.materialiseSlotContent(n):(0,x.jsx)(`span`,{className:D,dangerouslySetInnerHTML:s});return{buttonProps:m,content:_||i.slotRendersContent(v)?f.placeButtonIcon(_,v,l&&c.iconPosition):k(r,o.tagClassNames.dismissIcon),warning:`button-element`,ignoredName:g,contentMayName:!0,literalTextLabel:h.hasTextLabel(v),disabledFocusable:l&&!!c.disabledFocusable}}if(O(e)){let n=e.as===d.Button,a=e.as===`button`||n||Object.keys(e).some(e=>S.has(e)||C.test(e)),s={},c={},l={},u=!1;for(let[t,r]of Object.entries(e))t===`as`?r!==`button`&&!n&&(c.as=r):n&&f.BUTTON_OWN_PROP_KEYS.has(t)?l[t]=r:w.has(t)?r!==void 0&&(u=!0):t===`children`||t===`dangerouslySetInnerHTML`?c[t]=r:a||t.startsWith(`aria-`)&&t!==`aria-hidden`?s[t]=r:c[t]=r;let p=i.slotRendersContent(l.icon);return p?c.children=f.placeButtonIcon(i.renderSlot(l.icon,`span`,t.cn(o.tagClassNames.dismissIcon,D)),i.materialiseSlotContent(c.children),l.iconPosition):i.slotWrapsDefaultContent(c.as??`span`,c)&&(c.children=k(r)),{buttonProps:a||Object.keys(s).length>0?s:null,content:i.renderSlot(c,`span`,t.cn(!p&&o.tagClassNames.dismissIcon,D),{"aria-hidden":!0}),warning:a?`button-object`:null,ignoredName:u,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!!l.disabledFocusable}}return{buttonProps:null,content:i.renderSlot(e,`span`,t.cn(o.tagClassNames.dismissIcon,D),{"aria-hidden":!0}),warning:null,ignoredName:!1,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1}}var j=new Set([`button`,`fieldset`,`input`,`optgroup`,`option`,`select`,`textarea`]),M=new Set([`button`,`data`,`input`,`li`,`meter`,`option`,`progress`,`select`,`textarea`]),ee={disabled:!0,"aria-disabled":void 0,"data-disabled":void 0,"data-disabled-focusable":void 0};function N(e,t){return typeof e==`string`&&Object.hasOwn(t,e)}function te(e){e.preventDefault(),e.stopPropagation()}function P({buttonProps:e,content:t,contentMayName:n,literalTextLabel:r,disabledFocusable:i,disabled:o,dismissLabel:s,contentId:u,dismissName:d,buttonRef:p}){let m=c.useId(`tag-dismiss`),g=c.useId(`tag-dismiss-text`),{ref:v,...y}=e,S=b.useRef(null),C=l.useMergedRefs(S,p,v);_.useDismissControlFocus(S);let[w,E]=b.useState(null),D=b.useCallback(e=>w?h.observeTextLabel(w,e):T,[w]),O=b.useSyncExternalStore(D,()=>w?h.hasRenderedTextLabel(w):r,()=>r),k=n&&O,A=_.useHeldFocus(o),j=o?A.held?f.MERGED_DISABLED_FOCUSABLE_PROPS:ee:i?f.MERGED_DISABLED_FOCUSABLE_PROPS:void 0,M=d!==void 0;return(0,x.jsxs)(`button`,{...y,ref:C,type:y.type??`button`,...j,"aria-label":M?d:void 0,"aria-labelledby":M?void 0:`${k?g:m} ${u}`,onFocus:a.composeEventHandlers(y.onFocus,A.onFocus,{checkDefaultPrevented:!1}),onBlur:a.composeEventHandlers(y.onBlur,A.onBlur,{checkDefaultPrevented:!1}),children:[!M&&(0,x.jsx)(`span`,{id:m,className:`sr-only`,children:s}),n?(0,x.jsx)(`span`,{id:g,ref:E,className:`inline-flex items-center justify-center gap-[inherit]`,children:t}):t]})}P.displayName=`TagDismissButton`;var ne=new Set([`a`,`button`,`input`,`select`,`textarea`,`li`]),re='Tag: `as="button"` with `dismissible` puts the Dismiss button inside a button. Use InteractionTag instead: `InteractionTag.Primary` for the action, `InteractionTag.Secondary` for Dismiss.',ie='Tag: a dismissible tag rendered as a link (`as="a"` or a link component) puts the Dismiss button inside the link. Put the link in the tag\'s content: `<Tag dismissible><a href>…</a></Tag>`.',ae='TagGroup: a tag in a `role="list"` group is not a list item (its element is a link, a button or a component). Put a link in the tag\'s content (`<Tag><a href>…</a></Tag>`), or wrap the tag in an element with `role="listitem"`.';function oe(e){for(let t=e;t&&!t.matches(`[data-wave-tag-group]`);t=t.parentElement)if(t.getAttribute(`role`)===`listitem`||t.localName===`li`)return!0;return!1}var F=e=>{let{as:n,appearance:d,size:f,shape:p,disabled:h,selected:S=!1,value:C,media:w,icon:T,secondaryText:E,dismissible:D,onDismiss:O,dismissIcon:k,dismissLabel:ee=`Dismiss`,className:F,children:se,role:ce,hidden:le,onClick:ue,onFocus:de,onBlur:fe,onKeyDown:pe,ref:me,...he}=e,I=n??`span`,L=c.useId(`tag-content`),R=_.useTagGroupContext(),z=b.useContext(_.TagHostContext),B=b.useRef(null),ge=l.useMergedRefs(B,me),_e=b.useRef(null),ve=b.useRef(null),V=N(f,y.tagSizeClasses)?f:R?.size??`medium`,H=N(d,y.tagAppearanceClasses)?d:R?.appearance??`filled`,U=N(p,y.tagShapeClasses)?p:R?.shape??`circular`,W=(R?.disabled??!1)||h===!0,G=D??R?.dismissible??!1,K=S&&!W?`selected`:H,ye=R?.dimDisabled??!0,be=_.useTagGroupItem(B,C,{reported:G&&(R?.reportsDismissals??!1)}),xe=I===`a`,Se=xe&&W,Ce=I===`button`,q=_.useHeldFocus((xe||Ce)&&W),J=Ce&&q.held,{buttonProps:we,content:Te,warning:Y,ignoredName:Ee,contentMayName:De,literalTextLabel:Oe,disabledFocusable:ke}=A(G?k:void 0,y.TAG_DISMISS_GLYPH_SIZE[V]);b.useEffect(()=>{Y===`button-element`?r.warnOnce(`Tag:dismissIcon-button`,"Tag: `dismissIcon` received a button. Its props were merged into the built-in dismiss button (a button cannot contain another button), which is named by its text label (or `dismissLabel`) and the tag content. Pass icon content instead, e.g. `dismissIcon={<CloseIcon />}`, and handle the dismissal in `onDismiss`."):Y===`button-object`&&r.warnDeprecated(`Tag`,`dismissIcon={{ onClick, type, disabled, … }} (button props on the slot object)`,`onDismiss and icon content in dismissIcon`,"Its props are merged onto the built-in dismiss button, which is named by `dismissLabel` and the tag content.")},[Y]);let Ae=D===void 0&&!(R?.dismissible??!1)&&(O!==void 0||k!==void 0);b.useEffect(()=>{Ae&&r.warnOnce(`Tag:dismiss-without-dismissible`,"Tag: `onDismiss` and `dismissIcon` take effect only with `dismissible`; no dismiss button was rendered. Add `dismissible` to render it.")},[Ae]),b.useEffect(()=>{Ee&&r.warnOnce(`Tag:dismissIcon-name`,'Tag: `aria-label`/`aria-labelledby` on `dismissIcon` are ignored. The dismiss button is named by `dismissLabel` (default "Dismiss") and the tag content, e.g. "Dismiss Cherry"; set `dismissLabel` to change or localise it.')},[Ee]),b.useEffect(()=>{if(!G||!r.isDev||r.hasWarned(`Tag:nested-button`))return;let e=B.current?.localName;e===`button`?r.warnOnce(`Tag:nested-button`,re):e===`a`&&r.warnOnce(`Tag:nested-button`,ie)});let je=R?.mode===`list`;b.useEffect(()=>{if(!je||!r.isDev||r.hasWarned(`TagGroup:list-item`))return;let e=B.current;e&&!oe(e)&&r.warnOnce(`TagGroup:list-item`,ae)});let Me=i.slotRendersContent(w),Ne=i.slotRendersContent(T),X=i.materialiseSlotContent(E),Pe=i.slotRendersContent(X),Fe=b.useMemo(()=>({size:y.TAG_AVATAR_SIZE[V],shape:U===`rounded`?`square`:`circular`}),[V,U]),Ie=e=>typeof I!=`string`||e.has(I),Z={};Ie(j)&&(W||h!==void 0)&&(Z.disabled=W&&!J),J&&(Z[`aria-disabled`]=!0,Z[`data-disabled-focusable`]=``),C!==void 0&&Ie(M)&&(Z.value=C),Se&&(Z[`aria-disabled`]=!0,q.held?Z[`data-disabled-focusable`]=``:(Z.href=void 0,Z.role=`link`));let Le=je&&typeof I==`string`&&!ne.has(I)?`listitem`:void 0,Re=C!==void 0&&(R?.hiddenValues?.has(C)??!1),ze=Se||J?e=>{g.isOwnEvent(e)?te(e):ue?.(e)}:ue,Be=s.useEventCallback(e=>{let t=_e.current,n=ve.current;t&&n&&_.isDismissKey(e)&&t.contains(e.target)&&!g.isEditableTarget(e.target)&&(e.preventDefault(),n.click())}),Q={type:`button`,"data-wave-tag-dismiss":``,className:t.cn(o.tagClassNames.dismissButton,y.TAG_DISMISS_BASE_CLASSES,y.tagDismissSizeClasses[V],!W&&[`disabled:opacity-50`,`aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100`,y.tagDismissStateClasses[K]],u.focusRing,y.tagDismissRingClasses[V],K===`selected`&&`focus-visible:outline-primary-foreground`,z?.dismissButtonClassName),onKeyDown:e=>{if(e.target===e.currentTarget){if(_.isRepeatedActivation(e)){e.preventDefault();return}_.isDismissKey(e)&&(e.preventDefault(),e.currentTarget.click())}}};(O||R)&&(Q.onClick=e=>{g.isOwnEvent(e)&&(O?.(),R?.dismiss(be))});let Ve=we?m.mergeProps(Q,we):Q,$=(0,x.jsx)(`span`,{id:L,ref:_e,className:t.cn(o.tagClassNames.primaryText,`inline-flex items-center gap-1`,Pe&&`text-caption-1 leading-3.5`),children:se});return(0,x.jsxs)(I,{"data-size":V,"data-appearance":H,"data-shape":U,"data-selected":S?``:void 0,"data-disabled":W?``:void 0,"data-wave-tag-item":``,role:ce??Le,hidden:Re||le,...he,...Z,ref:ge,className:t.cn(o.tagClassNames.root,y.TAG_ROOT_BASE_CLASSES,y.tagSizeClasses[V],y.tagStartInsetClasses[V][Me?`media`:Ne?`icon`:`text`],y.tagEndInsetClasses[V][G?`dismiss`:`text`],K===`selected`?[y.TAG_SELECTED_CLASSES,u.forcedColors.selectedContainer]:y.tagAppearanceClasses[H],W&&[ye&&`opacity-50 focus-visible:opacity-100 has-focus-visible:opacity-100`,u.forcedColors.disabled],y.tagShapeClasses[U],F),onClick:ze,onKeyDown:a.composeEventHandlers(pe,Be),onFocus:a.composeEventHandlers(de,q.onFocus,{checkDefaultPrevented:!1}),onBlur:a.composeEventHandlers(fe,q.onBlur,{checkDefaultPrevented:!1}),children:[Me&&(0,x.jsx)(v.AvatarSizeContext.Provider,{value:Fe,children:i.renderSlot(w,`span`,t.cn(o.tagClassNames.media,y.tagMediaClasses[V]))}),Ne&&i.renderSlot(T,`span`,t.cn(o.tagClassNames.icon,y.tagIconClasses[V]),{"aria-hidden":!0}),Pe?(0,x.jsxs)(`span`,{className:y.TAG_TEXT_COLUMN_CLASSES,children:[$,(0,x.jsx)(`span`,{className:t.cn(o.tagClassNames.secondaryText,y.TAG_SECONDARY_TEXT_CLASSES),children:X})]}):$,G&&(0,x.jsx)(P,{buttonProps:Ve,content:Te,contentMayName:De,literalTextLabel:Oe,disabledFocusable:ke,disabled:W,dismissLabel:ee,contentId:L,dismissName:z?.dismissName,buttonRef:ve})]})};F.displayName=`Tag`,exports.Tag=F;
 //# sourceMappingURL=Tag.cjs.map