@humain/ui 2.2.7 → 2.2.9

package/dist/wc-react/hf-display-value.js

@@ -1,62 +1,62 @@
-import { c as L, f as d, s as v } from "./_shared.js";
+import { c as L, f as d, s as N } from "./_shared.js";
 import { t as $ } from "./circle-question-mark.js";
 import { t as _ } from "./Avatar.js";
 import { t as b } from "./Badge.js";
-import { n as q, r as O, t as P } from "./tooltip2.js";
-import * as R from "react";
-import N from "react";
-import { createRoot as Z } from "react-dom/client";
+import { n as O, r as P, t as R } from "./tooltip2.js";
+import * as Z from "react";
+import y from "react";
+import { createRoot as B } from "react-dom/client";
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
-function B(e) {
+function H(e) {
   return e.id ?? `${e.label}:${e.avatarAlt ?? "no-avatar"}`;
 }
-function H({ label: e, avatar: a, avatarAlt: t, ...n }) {
+function M({ label: e, avatar: n, avatarAlt: t, ...a }) {
   return /* @__PURE__ */ r(b, {
     variant: "outline",
     shape: "rounded",
     size: "md",
-    avatar: a ? /* @__PURE__ */ r(_, {
-      src: a,
+    avatar: n ? /* @__PURE__ */ r(_, {
+      src: n,
       alt: t ?? "",
       fallback: e,
       size: "sm",
       shape: "circle"
     }) : void 0,
-    ...n,
+    ...a,
     children: e
   });
 }
-function M({ label: e, helpIcon: a, helpTooltip: t }) {
+function W({ label: e, helpIcon: n, helpTooltip: t }) {
   return e ? /* @__PURE__ */ s("div", {
     className: "flex items-center gap-0.5",
     children: [/* @__PURE__ */ r("span", {
-      className: "text-sm font-medium leading-5 text-secondary-foreground dark:text-text-quaternary",
+      className: "text-sm font-medium leading-5 text-secondary-foreground",
       children: e
-    }), a && /* @__PURE__ */ s(P, { children: [/* @__PURE__ */ r(O, { render: /* @__PURE__ */ r("button", {
+    }), n && /* @__PURE__ */ s(R, { children: [/* @__PURE__ */ r(P, { render: /* @__PURE__ */ r("button", {
       type: "button",
-      className: "text-muted-foreground hover:text-text-quaternary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-full transition-colors duration-200 ease-smooth motion-reduce:transition-none",
+      className: "text-muted-foreground hover:text-secondary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-full transition-colors duration-200 ease-smooth motion-reduce:transition-none",
       "aria-label": t || `Help for ${e}`,
       children: /* @__PURE__ */ r($, { className: "size-4" })
-    }) }), /* @__PURE__ */ r(q, { children: t || e })] })]
+    }) }), /* @__PURE__ */ r(O, { children: t || e })] })]
   }) : null;
 }
-function W({ hint: e }) {
+function I({ hint: e }) {
   return e ? /* @__PURE__ */ r("p", {
     className: "text-sm font-normal leading-5 text-muted-foreground dark:text-muted-foreground w-full",
     children: e
   }) : null;
 }
-function I({ type: e, icon: a, value: t, children: n, leadingText: o, trailingText: p, displayPaddingY: l, linkHref: c, tags: i, avatarProps: u, avatarSupportingText: f, badgeProps: g, badgeLabel: x }) {
+function K({ type: e, icon: n, value: t, children: a, leadingText: o, trailingText: p, displayPaddingY: l, linkHref: c, tags: i, avatarProps: f, avatarSupportingText: u, badgeProps: g, badgeLabel: x }) {
   switch (e) {
     case "icon-leading":
       return /* @__PURE__ */ s("div", {
         className: "flex items-center gap-2 flex-1 min-w-0",
-        children: [a && /* @__PURE__ */ r("span", {
-          className: "shrink-0 text-text-quaternary [&>svg]:size-5",
-          children: a
+        children: [n && /* @__PURE__ */ r("span", {
+          className: "shrink-0 text-muted-foreground [&>svg]:size-5",
+          children: n
         }), /* @__PURE__ */ r("span", {
           className: "text-base font-normal leading-6 text-foreground dark:text-foreground truncate",
-          children: t ?? n
+          children: t ?? a
         })]
       });
     case "leading-text":
@@ -65,14 +65,14 @@ function I({ type: e, icon: a, value: t, children: n, leadingText: o, trailingTe
         children: [o && /* @__PURE__ */ r("div", {
           className: d("flex items-center gap-1 overflow-hidden", l),
           children: /* @__PURE__ */ r("span", {
-            className: "text-base font-normal leading-6 text-secondary-foreground dark:text-text-quaternary whitespace-nowrap",
+            className: "text-base font-normal leading-6 text-secondary-foreground whitespace-nowrap",
             children: o
           })
         }), /* @__PURE__ */ r("div", {
           className: d("flex-1 flex items-center gap-2 min-w-0", l, "ps-3"),
           children: /* @__PURE__ */ r("span", {
             className: "text-base font-normal leading-6 text-foreground dark:text-foreground truncate",
-            children: t ?? n
+            children: t ?? a
           })
         })]
       });
@@ -83,12 +83,12 @@ function I({ type: e, icon: a, value: t, children: n, leadingText: o, trailingTe
           className: d("flex-1 flex items-center gap-2 min-w-0", l),
           children: /* @__PURE__ */ r("span", {
             className: "text-base font-normal leading-6 text-foreground dark:text-foreground truncate",
-            children: t ?? n
+            children: t ?? a
           })
         }), p && /* @__PURE__ */ r("div", {
           className: d("flex items-center gap-1 overflow-hidden px-3", l),
           children: /* @__PURE__ */ r("span", {
-            className: "text-base font-normal leading-6 text-secondary-foreground dark:text-text-quaternary whitespace-nowrap",
+            className: "text-base font-normal leading-6 text-secondary-foreground whitespace-nowrap",
             children: p
           })
         })]
@@ -101,31 +101,31 @@ function I({ type: e, icon: a, value: t, children: n, leadingText: o, trailingTe
           className: "text-sm font-normal leading-5 text-primary hover:text-primary dark:text-primary dark:hover:text-primary truncate transition-colors duration-200 ease-smooth motion-reduce:transition-none hover:underline",
           target: "_blank",
           rel: "noopener noreferrer",
-          children: t ?? n ?? c
+          children: t ?? a ?? c
         }) : /* @__PURE__ */ r("span", {
           className: "text-sm font-normal leading-5 text-primary dark:text-primary truncate",
-          children: t ?? n
+          children: t ?? a
         })
       });
     case "tags":
       return /* @__PURE__ */ s("div", {
         className: "flex items-center gap-1.5 flex-wrap",
-        children: [i?.map((h) => /* @__PURE__ */ r(H, { ...h }, B(h))), n]
+        children: [i?.map((h) => /* @__PURE__ */ r(M, { ...h }, H(h))), a]
       });
     case "avatar":
       return /* @__PURE__ */ s("div", {
         className: "flex items-center gap-2",
         children: [/* @__PURE__ */ r(_, {
           size: "lg",
-          ...u
+          ...f
         }), /* @__PURE__ */ s("div", {
           className: "flex flex-col",
           children: [/* @__PURE__ */ r("span", {
             className: "text-sm font-semibold leading-5 text-foreground dark:text-foreground",
-            children: t ?? n ?? u?.fallback
-          }), f && /* @__PURE__ */ r("span", {
+            children: t ?? a ?? f?.fallback
+          }), u && /* @__PURE__ */ r("span", {
             className: "text-sm font-normal leading-5 text-muted-foreground dark:text-muted-foreground",
-            children: f
+            children: u
           })]
         })]
       });
@@ -136,7 +136,7 @@ function I({ type: e, icon: a, value: t, children: n, leadingText: o, trailingTe
           variant: "dot",
           color: "success",
           ...g,
-          children: x ?? t ?? n
+          children: x ?? t ?? a
         })
       });
     default:
@@ -144,16 +144,16 @@ function I({ type: e, icon: a, value: t, children: n, leadingText: o, trailingTe
         className: "flex items-center gap-2 flex-1 min-w-0",
         children: /* @__PURE__ */ r("span", {
           className: "text-base font-normal leading-6 text-foreground dark:text-foreground truncate",
-          children: t ?? n ?? /* @__PURE__ */ r("span", {
-            className: "text-muted-foreground dark:text-text-quaternary italic",
+          children: t ?? a ?? /* @__PURE__ */ r("span", {
+            className: "text-secondary-foreground italic",
             children: "—"
           })
         })
       });
   }
 }
-var w = R.forwardRef(({ className: e, label: a, value: t, hint: n, helpIcon: o = !1, helpTooltip: p, icon: l, size: c = "sm", type: i = "default", rtl: u = !1, leadingText: f, trailingText: g, linkHref: x, avatarProps: h, avatarSupportingText: k, badgeProps: T, badgeLabel: j, tags: z, children: D, ...E }, A) => {
-  const V = u, y = c === "md" ? "py-2.5" : "py-2";
+var w = Z.forwardRef(({ className: e, label: n, value: t, hint: a, helpIcon: o = !1, helpTooltip: p, icon: l, size: c = "sm", type: i = "default", rtl: f = !1, leadingText: u, trailingText: g, linkHref: x, avatarProps: h, avatarSupportingText: k, badgeProps: T, badgeLabel: j, tags: z, children: D, ...E }, A) => {
+  const V = f, v = c === "md" ? "py-2.5" : "py-2";
   return /* @__PURE__ */ s("div", {
     ref: A,
     "data-slot": "display-value",
@@ -161,21 +161,21 @@ var w = R.forwardRef(({ className: e, label: a, value: t, hint: n, helpIcon: o =
     className: d("flex flex-col gap-1.5", i === "tags" || i === "avatar" || i === "badge" ? "w-[400px]" : "w-[320px]", e),
     ...E,
     children: [
-      /* @__PURE__ */ r(M, {
-        label: a,
+      /* @__PURE__ */ r(W, {
+        label: n,
         helpIcon: o,
         helpTooltip: p
       }),
       /* @__PURE__ */ r("div", {
         "data-slot": "display-value-content",
-        className: d("flex items-center gap-2 w-full rounded-md", i !== "leading-text" && i !== "trailing-text" && y),
-        children: /* @__PURE__ */ r(I, {
+        className: d("flex items-center gap-2 w-full rounded-md", i !== "leading-text" && i !== "trailing-text" && v),
+        children: /* @__PURE__ */ r(K, {
           type: i,
           icon: l,
           value: t,
-          leadingText: f,
+          leadingText: u,
           trailingText: g,
-          displayPaddingY: y,
+          displayPaddingY: v,
           linkHref: x,
           tags: z,
           avatarProps: h,
@@ -185,7 +185,7 @@ var w = R.forwardRef(({ className: e, label: a, value: t, hint: n, helpIcon: o =
           children: D
         })
       }),
-      /* @__PURE__ */ r(W, { hint: n })
+      /* @__PURE__ */ r(I, { hint: a })
     ]
   });
 });
@@ -222,51 +222,51 @@ var m = {
     const e = [];
     for (const t of Array.from(this.childNodes))
       t.nodeType === Node.TEXT_NODE && !t.textContent?.trim() || e.push(t);
-    const a = this.ownerDocument.createElement("div");
-    for (a.style.display = "contents", this._childrenContainer = this.ownerDocument.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((t) => this._childrenContainer.appendChild(t)); this.firstChild; ) this.removeChild(this.firstChild);
-    this.appendChild(a), this._root = Z(a), this._render();
+    const n = this.ownerDocument.createElement("div");
+    for (n.style.display = "contents", this._childrenContainer = this.ownerDocument.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((t) => this._childrenContainer.appendChild(t)); this.firstChild; ) this.removeChild(this.firstChild);
+    this.appendChild(n), this._root = B(n), this._render();
   }
   disconnectedCallback() {
     this._root?.unmount(), this._root = null;
   }
-  attributeChangedCallback(e, a, t) {
+  attributeChangedCallback(e, n, t) {
     this._render();
   }
   static get observedAttributes() {
     return Object.keys(m).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
   }
-  _setProp(e, a) {
+  _setProp(e, n) {
     const t = m[e] || "string";
-    this._props[e] = L(a, t), this._render();
+    this._props[e] = L(n, t), this._render();
   }
   _getProp(e) {
     if (e in this._props) return this._props[e];
-    const a = e.replace(/([A-Z])/g, "-$1").toLowerCase(), t = m[e] || "string";
-    return v(this.getAttribute(a), t);
+    const n = e.replace(/([A-Z])/g, "-$1").toLowerCase(), t = m[e] || "string";
+    return N(this.getAttribute(n), t);
   }
   _render() {
     if (!this._root || !this._childrenContainer) return;
     const e = {};
-    for (const [t, n] of Object.entries(m)) if (t in this._props) e[t] = this._props[t];
+    for (const [t, a] of Object.entries(m)) if (t in this._props) e[t] = this._props[t];
     else {
       const o = t.replace(/([A-Z])/g, "-$1").toLowerCase();
-      e[t] = v(this.getAttribute(o), n);
+      e[t] = N(this.getAttribute(o), a);
     }
-    const a = N.createElement(w, e, N.createElement("span", {
+    const n = y.createElement(w, e, y.createElement("span", {
       ref: (t) => {
         t && this._childrenContainer && t.replaceWith(this._childrenContainer);
       },
       style: { display: "contents" }
     }));
-    this._root.render(a);
+    this._root.render(n);
   }
 };
 for (const e of Object.keys(m)) Object.defineProperty(C.prototype, e, {
   get() {
     return this._getProp(e);
   },
-  set(a) {
-    this._setProp(e, a);
+  set(n) {
+    this._setProp(e, n);
   },
   enumerable: !0,
   configurable: !0

package/dist/wc-react/hf-display-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"hf-display-value.js","names":[],"sources":["../../src/components/molecules/forms/DisplayValue/DisplayValue.tsx","../../src/wc/hf-display-value.ts"],"sourcesContent":["import { HelpCircle } from 'lucide-react';\nimport * as React from 'react';\nimport { Badge, type BadgeProps } from '@/components/atoms/display/Badge';\nimport { Avatar, type AvatarProps } from '@/components/molecules/data/Avatar';\nimport { Tooltip, TooltipPopup, TooltipTrigger } from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\n\nexport type DisplayValueType =\n  | 'default'\n  | 'icon-leading'\n  | 'trailing-text'\n  | 'link'\n  | 'tags'\n  | 'leading-text'\n  | 'avatar'\n  | 'badge';\n\nexport interface DisplayValueTag\n  extends Omit<BadgeProps, 'avatar' | 'children'> {\n  label: string;\n  avatar?: string;\n  avatarAlt?: string;\n}\n\nexport interface DisplayValueProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Label text displayed above the field */\n  label?: string;\n  /** The main value to display */\n  value?: React.ReactNode;\n  /** Hint text displayed below the field */\n  hint?: string;\n  /** Show help icon with tooltip */\n  helpIcon?: boolean;\n  /** Tooltip content for help icon */\n  helpTooltip?: string;\n  /** Leading icon for icon-leading type */\n  icon?: React.ReactNode;\n  /** Size variant */\n  size?: 'sm' | 'md';\n  /** Display type */\n  type?: DisplayValueType;\n  /** RTL layout support */\n  rtl?: boolean;\n  /** Leading text (for leading-text type) */\n  leadingText?: string;\n  /** Trailing text (for trailing-text type) */\n  trailingText?: string;\n  /** Link URL (for link type) */\n  linkHref?: string;\n  /** Avatar props (for avatar type) */\n  avatarProps?: AvatarProps;\n  /** Supporting text for avatar */\n  avatarSupportingText?: string;\n  /** Badge props (for badge type) */\n  badgeProps?: Omit<BadgeProps, 'children'>;\n  /** Badge label (for badge type) */\n  badgeLabel?: string;\n  /** Tags data (for tags type) */\n  tags?: DisplayValueTag[];\n}\n\ntype DisplayTag = NonNullable<DisplayValueProps['tags']>[number];\n\nfunction getDisplayTagKey(tag: DisplayTag): React.Key {\n  return tag.id ?? `${tag.label}:${tag.avatarAlt ?? 'no-avatar'}`;\n}\n\nfunction DisplayValueBadge({ label, avatar, avatarAlt, ...props }: DisplayTag) {\n  return (\n    <Badge\n      variant=\"outline\"\n      shape=\"rounded\"\n      size=\"md\"\n      avatar={\n        avatar ? (\n          <Avatar\n            src={avatar}\n            alt={avatarAlt ?? ''}\n            fallback={label}\n            size=\"sm\"\n            shape=\"circle\"\n          />\n        ) : undefined\n      }\n      {...props}\n    >\n      {label}\n    </Badge>\n  );\n}\n\ninterface DisplayValueLabelProps {\n  label?: string;\n  helpIcon: boolean;\n  helpTooltip?: string;\n}\n\nfunction DisplayValueLabel({\n  label,\n  helpIcon,\n  helpTooltip,\n}: DisplayValueLabelProps) {\n  if (!label) return null;\n\n  return (\n    <div className=\"flex items-center gap-0.5\">\n      <span className=\"text-sm font-medium leading-5 text-secondary-foreground dark:text-text-quaternary\">\n        {label}\n      </span>\n      {helpIcon && (\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <button\n                type=\"button\"\n                className=\"text-muted-foreground hover:text-text-quaternary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-full transition-colors duration-200 ease-smooth motion-reduce:transition-none\"\n                aria-label={helpTooltip || `Help for ${label}`}\n              >\n                <HelpCircle className=\"size-4\" />\n              </button>\n            }\n          />\n          <TooltipPopup>{helpTooltip || label}</TooltipPopup>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nfunction DisplayValueHint({ hint }: { hint?: string }) {\n  if (!hint) return null;\n\n  return (\n    <p className=\"text-sm font-normal leading-5 text-muted-foreground dark:text-muted-foreground w-full\">\n      {hint}\n    </p>\n  );\n}\n\ninterface DisplayValueContentProps {\n  type: DisplayValueType;\n  icon?: React.ReactNode;\n  value?: React.ReactNode;\n  children?: React.ReactNode;\n  leadingText?: string;\n  trailingText?: string;\n  displayPaddingY: string;\n  linkHref?: string;\n  tags?: DisplayValueProps['tags'];\n  avatarProps?: AvatarProps;\n  avatarSupportingText?: string;\n  badgeProps?: Omit<BadgeProps, 'children'>;\n  badgeLabel?: string;\n}\n\nfunction DisplayValueContent({\n  type,\n  icon,\n  value,\n  children,\n  leadingText,\n  trailingText,\n  displayPaddingY,\n  linkHref,\n  tags,\n  avatarProps,\n  avatarSupportingText,\n  badgeProps,\n  badgeLabel,\n}: DisplayValueContentProps) {\n  switch (type) {\n    case 'icon-leading':\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          {icon && (\n            <span className=\"shrink-0 text-text-quaternary [&>svg]:size-5\">\n              {icon}\n            </span>\n          )}\n          <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n            {value ?? children}\n          </span>\n        </div>\n      );\n\n    case 'leading-text':\n      return (\n        <div className=\"flex items-start w-full\">\n          {leadingText && (\n            <div\n              className={cn(\n                'flex items-center gap-1 overflow-hidden',\n                displayPaddingY,\n              )}\n            >\n              <span className=\"text-base font-normal leading-6 text-secondary-foreground dark:text-text-quaternary whitespace-nowrap\">\n                {leadingText}\n              </span>\n            </div>\n          )}\n          <div\n            className={cn(\n              'flex-1 flex items-center gap-2 min-w-0',\n              displayPaddingY,\n              'ps-3',\n            )}\n          >\n            <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n              {value ?? children}\n            </span>\n          </div>\n        </div>\n      );\n\n    case 'trailing-text':\n      return (\n        <div className=\"flex items-start w-full\">\n          <div\n            className={cn(\n              'flex-1 flex items-center gap-2 min-w-0',\n              displayPaddingY,\n            )}\n          >\n            <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n              {value ?? children}\n            </span>\n          </div>\n          {trailingText && (\n            <div\n              className={cn(\n                'flex items-center gap-1 overflow-hidden px-3',\n                displayPaddingY,\n              )}\n            >\n              <span className=\"text-base font-normal leading-6 text-secondary-foreground dark:text-text-quaternary whitespace-nowrap\">\n                {trailingText}\n              </span>\n            </div>\n          )}\n        </div>\n      );\n\n    case 'link':\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          {linkHref ? (\n            <a\n              href={linkHref}\n              className=\"text-sm font-normal leading-5 text-primary hover:text-primary dark:text-primary dark:hover:text-primary truncate transition-colors duration-200 ease-smooth motion-reduce:transition-none hover:underline\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              {value ?? children ?? linkHref}\n            </a>\n          ) : (\n            <span className=\"text-sm font-normal leading-5 text-primary dark:text-primary truncate\">\n              {value ?? children}\n            </span>\n          )}\n        </div>\n      );\n\n    case 'tags':\n      return (\n        <div className=\"flex items-center gap-1.5 flex-wrap\">\n          {tags?.map((tag) => (\n            <DisplayValueBadge key={getDisplayTagKey(tag)} {...tag} />\n          ))}\n          {children}\n        </div>\n      );\n\n    case 'avatar':\n      return (\n        <div className=\"flex items-center gap-2\">\n          <Avatar size=\"lg\" {...avatarProps} />\n          <div className=\"flex flex-col\">\n            <span className=\"text-sm font-semibold leading-5 text-foreground dark:text-foreground\">\n              {value ?? children ?? avatarProps?.fallback}\n            </span>\n            {avatarSupportingText && (\n              <span className=\"text-sm font-normal leading-5 text-muted-foreground dark:text-muted-foreground\">\n                {avatarSupportingText}\n              </span>\n            )}\n          </div>\n        </div>\n      );\n\n    case 'badge':\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          <Badge variant=\"dot\" color=\"success\" {...badgeProps}>\n            {badgeLabel ?? value ?? children}\n          </Badge>\n        </div>\n      );\n\n    default:\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n            {value ?? children ?? (\n              <span className=\"text-muted-foreground dark:text-text-quaternary italic\">\n                —\n              </span>\n            )}\n          </span>\n        </div>\n      );\n  }\n}\n\nconst DisplayValue = React.forwardRef<HTMLDivElement, DisplayValueProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      hint,\n      helpIcon = false,\n      helpTooltip,\n      icon,\n      size = 'sm',\n      type = 'default',\n      rtl = false,\n      leadingText,\n      trailingText,\n      linkHref,\n      avatarProps,\n      avatarSupportingText,\n      badgeProps,\n      badgeLabel,\n      tags,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isRTL = rtl;\n\n    // Size-based padding for display area\n    const displayPaddingY = size === 'md' ? 'py-2.5' : 'py-2';\n\n    // Determine container width based on type\n    const containerWidth =\n      type === 'tags' || type === 'avatar' || type === 'badge'\n        ? 'w-[400px]'\n        : 'w-[320px]';\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"display-value\"\n        dir={isRTL ? 'rtl' : undefined}\n        className={cn('flex flex-col gap-1.5', containerWidth, className)}\n        {...props}\n      >\n        {/* Label section */}\n        <DisplayValueLabel\n          label={label}\n          helpIcon={helpIcon}\n          helpTooltip={helpTooltip}\n        />\n\n        {/* Display section */}\n        <div\n          data-slot=\"display-value-content\"\n          className={cn(\n            'flex items-center gap-2 w-full rounded-md',\n            // Only add vertical padding for non-special types\n            type !== 'leading-text' &&\n              type !== 'trailing-text' &&\n              displayPaddingY,\n          )}\n        >\n          <DisplayValueContent\n            type={type}\n            icon={icon}\n            value={value}\n            leadingText={leadingText}\n            trailingText={trailingText}\n            displayPaddingY={displayPaddingY}\n            linkHref={linkHref}\n            tags={tags}\n            avatarProps={avatarProps}\n            avatarSupportingText={avatarSupportingText}\n            badgeProps={badgeProps}\n            badgeLabel={badgeLabel}\n          >\n            {children}\n          </DisplayValueContent>\n        </div>\n\n        {/* Hint section */}\n        <DisplayValueHint hint={hint} />\n      </div>\n    );\n  },\n);\n\nDisplayValue.displayName = 'DisplayValue';\n\nexport { DisplayValue };\n","/**\n * Web Component wrapper for DisplayValue\n * Custom element: <hf-display-value>\n *\n * @generated by scripts/generate-wc-components.ts\n * DO NOT EDIT MANUALLY\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { DisplayValue } from '../components/molecules/forms/DisplayValue';\nimport { parseAttr, parseValue, type PropDefs } from './_shared';\n\n/**\n * Prop type definitions for attribute parsing\n */\nconst propTypes: PropDefs = {\n    label: 'string',\n    value: 'json',\n    hint: 'string',\n    helpIcon: 'boolean',\n    helpTooltip: 'string',\n    icon: 'json',\n    size: 'string',\n    type: 'string',\n    rtl: 'boolean',\n    leadingText: 'string',\n    trailingText: 'string',\n    linkHref: 'string',\n    avatarProps: 'json',\n    avatarSupportingText: 'string',\n    badgeProps: 'json',\n    badgeLabel: 'string',\n    tags: 'json'\n};\n\nclass DisplayValueWC extends HTMLElement {\n  private _root: ReturnType<typeof createRoot> | null = null;\n  private _childrenContainer: HTMLDivElement | null = null;\n  private _props: Record<string, unknown> = {};\n  private _initialized = false;\n\n  connectedCallback() {\n    setTimeout(() => this._initialize(), 0);\n  }\n\n  private _initialize() {\n    if (this._initialized) return;\n    this._initialized = true;\n\n    const originalChildren: Node[] = [];\n    for (const child of Array.from(this.childNodes)) {\n      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) {\n        continue;\n      }\n      originalChildren.push(child);\n    }\n\n    const reactContainer = this.ownerDocument.createElement('div');\n    reactContainer.style.display = 'contents';\n\n    this._childrenContainer = this.ownerDocument.createElement('div');\n    this._childrenContainer.style.display = 'contents';\n\n    originalChildren.forEach((child) => this._childrenContainer!.appendChild(child));\n\n    while (this.firstChild) this.removeChild(this.firstChild);\n    this.appendChild(reactContainer);\n\n    this._root = createRoot(reactContainer);\n    this._render();\n  }\n\n  disconnectedCallback() {\n    this._root?.unmount();\n    this._root = null;\n  }\n\n  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null) {\n    this._render();\n  }\n\n  static get observedAttributes() {\n    return Object.keys(propTypes).map((prop) =>\n      prop.replace(/([A-Z])/g, '-$1').toLowerCase(),\n    );\n  }\n\n  _setProp(name: string, value: unknown) {\n    const propType = propTypes[name] || 'string';\n    this._props[name] = parseValue(value, propType);\n    this._render();\n  }\n\n  _getProp(name: string): unknown {\n    if (name in this._props) {\n      return this._props[name];\n    }\n    const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();\n    const propType = propTypes[name] || 'string';\n    return parseAttr(this.getAttribute(attrName), propType);\n  }\n\n  private _render() {\n    if (!this._root || !this._childrenContainer) return;\n\n    const props: Record<string, unknown> = {};\n    for (const [propName, propType] of Object.entries(propTypes)) {\n      if (propName in this._props) {\n        props[propName] = this._props[propName];\n      } else {\n        const attrName = propName.replace(/([A-Z])/g, '-$1').toLowerCase();\n        props[propName] = parseAttr(this.getAttribute(attrName), propType);\n      }\n    }\n\n    const element = React.createElement(\n      DisplayValue,\n      props,\n      React.createElement('span', {\n        ref: (el: HTMLSpanElement | null) => {\n          if (el && this._childrenContainer) {\n            el.replaceWith(this._childrenContainer);\n          }\n        },\n        style: { display: 'contents' },\n      }),\n    );\n\n    this._root.render(element);\n  }\n}\n\nfor (const propName of Object.keys(propTypes)) {\n  Object.defineProperty(DisplayValueWC.prototype, propName, {\n    get() {\n      return this._getProp(propName);\n    },\n    set(value: unknown) {\n      this._setProp(propName, value);\n    },\n    enumerable: true,\n    configurable: true,\n  });\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('hf-display-value')) {\n  customElements.define('hf-display-value', DisplayValueWC);\n}\n\nexport { DisplayValueWC };\nexport default DisplayValueWC;\n"],"mappings":"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"}
+{"version":3,"file":"hf-display-value.js","names":[],"sources":["../../src/components/molecules/forms/DisplayValue/DisplayValue.tsx","../../src/wc/hf-display-value.ts"],"sourcesContent":["import { HelpCircle } from 'lucide-react';\nimport * as React from 'react';\nimport { Badge, type BadgeProps } from '@/components/atoms/display/Badge';\nimport { Avatar, type AvatarProps } from '@/components/molecules/data/Avatar';\nimport { Tooltip, TooltipPopup, TooltipTrigger } from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\n\nexport type DisplayValueType =\n  | 'default'\n  | 'icon-leading'\n  | 'trailing-text'\n  | 'link'\n  | 'tags'\n  | 'leading-text'\n  | 'avatar'\n  | 'badge';\n\nexport interface DisplayValueTag\n  extends Omit<BadgeProps, 'avatar' | 'children'> {\n  label: string;\n  avatar?: string;\n  avatarAlt?: string;\n}\n\nexport interface DisplayValueProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Label text displayed above the field */\n  label?: string;\n  /** The main value to display */\n  value?: React.ReactNode;\n  /** Hint text displayed below the field */\n  hint?: string;\n  /** Show help icon with tooltip */\n  helpIcon?: boolean;\n  /** Tooltip content for help icon */\n  helpTooltip?: string;\n  /** Leading icon for icon-leading type */\n  icon?: React.ReactNode;\n  /** Size variant */\n  size?: 'sm' | 'md';\n  /** Display type */\n  type?: DisplayValueType;\n  /** RTL layout support */\n  rtl?: boolean;\n  /** Leading text (for leading-text type) */\n  leadingText?: string;\n  /** Trailing text (for trailing-text type) */\n  trailingText?: string;\n  /** Link URL (for link type) */\n  linkHref?: string;\n  /** Avatar props (for avatar type) */\n  avatarProps?: AvatarProps;\n  /** Supporting text for avatar */\n  avatarSupportingText?: string;\n  /** Badge props (for badge type) */\n  badgeProps?: Omit<BadgeProps, 'children'>;\n  /** Badge label (for badge type) */\n  badgeLabel?: string;\n  /** Tags data (for tags type) */\n  tags?: DisplayValueTag[];\n}\n\ntype DisplayTag = NonNullable<DisplayValueProps['tags']>[number];\n\nfunction getDisplayTagKey(tag: DisplayTag): React.Key {\n  return tag.id ?? `${tag.label}:${tag.avatarAlt ?? 'no-avatar'}`;\n}\n\nfunction DisplayValueBadge({ label, avatar, avatarAlt, ...props }: DisplayTag) {\n  return (\n    <Badge\n      variant=\"outline\"\n      shape=\"rounded\"\n      size=\"md\"\n      avatar={\n        avatar ? (\n          <Avatar\n            src={avatar}\n            alt={avatarAlt ?? ''}\n            fallback={label}\n            size=\"sm\"\n            shape=\"circle\"\n          />\n        ) : undefined\n      }\n      {...props}\n    >\n      {label}\n    </Badge>\n  );\n}\n\ninterface DisplayValueLabelProps {\n  label?: string;\n  helpIcon: boolean;\n  helpTooltip?: string;\n}\n\nfunction DisplayValueLabel({\n  label,\n  helpIcon,\n  helpTooltip,\n}: DisplayValueLabelProps) {\n  if (!label) return null;\n\n  return (\n    <div className=\"flex items-center gap-0.5\">\n      <span className=\"text-sm font-medium leading-5 text-secondary-foreground\">\n        {label}\n      </span>\n      {helpIcon && (\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <button\n                type=\"button\"\n                className=\"text-muted-foreground hover:text-secondary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-full transition-colors duration-200 ease-smooth motion-reduce:transition-none\"\n                aria-label={helpTooltip || `Help for ${label}`}\n              >\n                <HelpCircle className=\"size-4\" />\n              </button>\n            }\n          />\n          <TooltipPopup>{helpTooltip || label}</TooltipPopup>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nfunction DisplayValueHint({ hint }: { hint?: string }) {\n  if (!hint) return null;\n\n  return (\n    <p className=\"text-sm font-normal leading-5 text-muted-foreground dark:text-muted-foreground w-full\">\n      {hint}\n    </p>\n  );\n}\n\ninterface DisplayValueContentProps {\n  type: DisplayValueType;\n  icon?: React.ReactNode;\n  value?: React.ReactNode;\n  children?: React.ReactNode;\n  leadingText?: string;\n  trailingText?: string;\n  displayPaddingY: string;\n  linkHref?: string;\n  tags?: DisplayValueProps['tags'];\n  avatarProps?: AvatarProps;\n  avatarSupportingText?: string;\n  badgeProps?: Omit<BadgeProps, 'children'>;\n  badgeLabel?: string;\n}\n\nfunction DisplayValueContent({\n  type,\n  icon,\n  value,\n  children,\n  leadingText,\n  trailingText,\n  displayPaddingY,\n  linkHref,\n  tags,\n  avatarProps,\n  avatarSupportingText,\n  badgeProps,\n  badgeLabel,\n}: DisplayValueContentProps) {\n  switch (type) {\n    case 'icon-leading':\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          {icon && (\n            <span className=\"shrink-0 text-muted-foreground [&>svg]:size-5\">\n              {icon}\n            </span>\n          )}\n          <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n            {value ?? children}\n          </span>\n        </div>\n      );\n\n    case 'leading-text':\n      return (\n        <div className=\"flex items-start w-full\">\n          {leadingText && (\n            <div\n              className={cn(\n                'flex items-center gap-1 overflow-hidden',\n                displayPaddingY,\n              )}\n            >\n              <span className=\"text-base font-normal leading-6 text-secondary-foreground whitespace-nowrap\">\n                {leadingText}\n              </span>\n            </div>\n          )}\n          <div\n            className={cn(\n              'flex-1 flex items-center gap-2 min-w-0',\n              displayPaddingY,\n              'ps-3',\n            )}\n          >\n            <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n              {value ?? children}\n            </span>\n          </div>\n        </div>\n      );\n\n    case 'trailing-text':\n      return (\n        <div className=\"flex items-start w-full\">\n          <div\n            className={cn(\n              'flex-1 flex items-center gap-2 min-w-0',\n              displayPaddingY,\n            )}\n          >\n            <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n              {value ?? children}\n            </span>\n          </div>\n          {trailingText && (\n            <div\n              className={cn(\n                'flex items-center gap-1 overflow-hidden px-3',\n                displayPaddingY,\n              )}\n            >\n              <span className=\"text-base font-normal leading-6 text-secondary-foreground whitespace-nowrap\">\n                {trailingText}\n              </span>\n            </div>\n          )}\n        </div>\n      );\n\n    case 'link':\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          {linkHref ? (\n            <a\n              href={linkHref}\n              className=\"text-sm font-normal leading-5 text-primary hover:text-primary dark:text-primary dark:hover:text-primary truncate transition-colors duration-200 ease-smooth motion-reduce:transition-none hover:underline\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              {value ?? children ?? linkHref}\n            </a>\n          ) : (\n            <span className=\"text-sm font-normal leading-5 text-primary dark:text-primary truncate\">\n              {value ?? children}\n            </span>\n          )}\n        </div>\n      );\n\n    case 'tags':\n      return (\n        <div className=\"flex items-center gap-1.5 flex-wrap\">\n          {tags?.map((tag) => (\n            <DisplayValueBadge key={getDisplayTagKey(tag)} {...tag} />\n          ))}\n          {children}\n        </div>\n      );\n\n    case 'avatar':\n      return (\n        <div className=\"flex items-center gap-2\">\n          <Avatar size=\"lg\" {...avatarProps} />\n          <div className=\"flex flex-col\">\n            <span className=\"text-sm font-semibold leading-5 text-foreground dark:text-foreground\">\n              {value ?? children ?? avatarProps?.fallback}\n            </span>\n            {avatarSupportingText && (\n              <span className=\"text-sm font-normal leading-5 text-muted-foreground dark:text-muted-foreground\">\n                {avatarSupportingText}\n              </span>\n            )}\n          </div>\n        </div>\n      );\n\n    case 'badge':\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          <Badge variant=\"dot\" color=\"success\" {...badgeProps}>\n            {badgeLabel ?? value ?? children}\n          </Badge>\n        </div>\n      );\n\n    default:\n      return (\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          <span className=\"text-base font-normal leading-6 text-foreground dark:text-foreground truncate\">\n            {value ?? children ?? (\n              <span className=\"text-secondary-foreground italic\">—</span>\n            )}\n          </span>\n        </div>\n      );\n  }\n}\n\nconst DisplayValue = React.forwardRef<HTMLDivElement, DisplayValueProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      hint,\n      helpIcon = false,\n      helpTooltip,\n      icon,\n      size = 'sm',\n      type = 'default',\n      rtl = false,\n      leadingText,\n      trailingText,\n      linkHref,\n      avatarProps,\n      avatarSupportingText,\n      badgeProps,\n      badgeLabel,\n      tags,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isRTL = rtl;\n\n    // Size-based padding for display area\n    const displayPaddingY = size === 'md' ? 'py-2.5' : 'py-2';\n\n    // Determine container width based on type\n    const containerWidth =\n      type === 'tags' || type === 'avatar' || type === 'badge'\n        ? 'w-[400px]'\n        : 'w-[320px]';\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"display-value\"\n        dir={isRTL ? 'rtl' : undefined}\n        className={cn('flex flex-col gap-1.5', containerWidth, className)}\n        {...props}\n      >\n        {/* Label section */}\n        <DisplayValueLabel\n          label={label}\n          helpIcon={helpIcon}\n          helpTooltip={helpTooltip}\n        />\n\n        {/* Display section */}\n        <div\n          data-slot=\"display-value-content\"\n          className={cn(\n            'flex items-center gap-2 w-full rounded-md',\n            // Only add vertical padding for non-special types\n            type !== 'leading-text' &&\n              type !== 'trailing-text' &&\n              displayPaddingY,\n          )}\n        >\n          <DisplayValueContent\n            type={type}\n            icon={icon}\n            value={value}\n            leadingText={leadingText}\n            trailingText={trailingText}\n            displayPaddingY={displayPaddingY}\n            linkHref={linkHref}\n            tags={tags}\n            avatarProps={avatarProps}\n            avatarSupportingText={avatarSupportingText}\n            badgeProps={badgeProps}\n            badgeLabel={badgeLabel}\n          >\n            {children}\n          </DisplayValueContent>\n        </div>\n\n        {/* Hint section */}\n        <DisplayValueHint hint={hint} />\n      </div>\n    );\n  },\n);\n\nDisplayValue.displayName = 'DisplayValue';\n\nexport { DisplayValue };\n","/**\n * Web Component wrapper for DisplayValue\n * Custom element: <hf-display-value>\n *\n * @generated by scripts/generate-wc-components.ts\n * DO NOT EDIT MANUALLY\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { DisplayValue } from '../components/molecules/forms/DisplayValue';\nimport { parseAttr, parseValue, type PropDefs } from './_shared';\n\n/**\n * Prop type definitions for attribute parsing\n */\nconst propTypes: PropDefs = {\n    label: 'string',\n    value: 'json',\n    hint: 'string',\n    helpIcon: 'boolean',\n    helpTooltip: 'string',\n    icon: 'json',\n    size: 'string',\n    type: 'string',\n    rtl: 'boolean',\n    leadingText: 'string',\n    trailingText: 'string',\n    linkHref: 'string',\n    avatarProps: 'json',\n    avatarSupportingText: 'string',\n    badgeProps: 'json',\n    badgeLabel: 'string',\n    tags: 'json'\n};\n\nclass DisplayValueWC extends HTMLElement {\n  private _root: ReturnType<typeof createRoot> | null = null;\n  private _childrenContainer: HTMLDivElement | null = null;\n  private _props: Record<string, unknown> = {};\n  private _initialized = false;\n\n  connectedCallback() {\n    setTimeout(() => this._initialize(), 0);\n  }\n\n  private _initialize() {\n    if (this._initialized) return;\n    this._initialized = true;\n\n    const originalChildren: Node[] = [];\n    for (const child of Array.from(this.childNodes)) {\n      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) {\n        continue;\n      }\n      originalChildren.push(child);\n    }\n\n    const reactContainer = this.ownerDocument.createElement('div');\n    reactContainer.style.display = 'contents';\n\n    this._childrenContainer = this.ownerDocument.createElement('div');\n    this._childrenContainer.style.display = 'contents';\n\n    originalChildren.forEach((child) => this._childrenContainer!.appendChild(child));\n\n    while (this.firstChild) this.removeChild(this.firstChild);\n    this.appendChild(reactContainer);\n\n    this._root = createRoot(reactContainer);\n    this._render();\n  }\n\n  disconnectedCallback() {\n    this._root?.unmount();\n    this._root = null;\n  }\n\n  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null) {\n    this._render();\n  }\n\n  static get observedAttributes() {\n    return Object.keys(propTypes).map((prop) =>\n      prop.replace(/([A-Z])/g, '-$1').toLowerCase(),\n    );\n  }\n\n  _setProp(name: string, value: unknown) {\n    const propType = propTypes[name] || 'string';\n    this._props[name] = parseValue(value, propType);\n    this._render();\n  }\n\n  _getProp(name: string): unknown {\n    if (name in this._props) {\n      return this._props[name];\n    }\n    const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();\n    const propType = propTypes[name] || 'string';\n    return parseAttr(this.getAttribute(attrName), propType);\n  }\n\n  private _render() {\n    if (!this._root || !this._childrenContainer) return;\n\n    const props: Record<string, unknown> = {};\n    for (const [propName, propType] of Object.entries(propTypes)) {\n      if (propName in this._props) {\n        props[propName] = this._props[propName];\n      } else {\n        const attrName = propName.replace(/([A-Z])/g, '-$1').toLowerCase();\n        props[propName] = parseAttr(this.getAttribute(attrName), propType);\n      }\n    }\n\n    const element = React.createElement(\n      DisplayValue,\n      props,\n      React.createElement('span', {\n        ref: (el: HTMLSpanElement | null) => {\n          if (el && this._childrenContainer) {\n            el.replaceWith(this._childrenContainer);\n          }\n        },\n        style: { display: 'contents' },\n      }),\n    );\n\n    this._root.render(element);\n  }\n}\n\nfor (const propName of Object.keys(propTypes)) {\n  Object.defineProperty(DisplayValueWC.prototype, propName, {\n    get() {\n      return this._getProp(propName);\n    },\n    set(value: unknown) {\n      this._setProp(propName, value);\n    },\n    enumerable: true,\n    configurable: true,\n  });\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('hf-display-value')) {\n  customElements.define('hf-display-value', DisplayValueWC);\n}\n\nexport { DisplayValueWC };\nexport default DisplayValueWC;\n"],"mappings":"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"}

package/dist/wc-react/hf-nav-account-menu.js

@@ -93,7 +93,7 @@ function F({ avatar: e, name: t, email: n, badge: r, showLogoutButton: a, onLogo
     }), /* @__PURE__ */ o("button", {
       type: "button",
       onClick: h,
-      className: "shrink-0 rounded-md p-1.5 text-text-quaternary transition-colors duration-200 ease-smooth hover:bg-muted hover:text-secondary-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none",
+      className: "shrink-0 rounded-md p-1.5 text-muted-foreground transition-colors duration-200 ease-smooth hover:bg-muted hover:text-secondary-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none",
       "aria-label": "Sign out",
       children: /* @__PURE__ */ o(H, { className: "size-5" })
     })]
@@ -154,7 +154,7 @@ function Z({ label: e, bordered: t = !1, children: n, className: r }) {
     }), n]
   });
 }
-function q({ icon: e, shortcut: t, destructive: n = !1, disabled: r = !1, onSelect: a, render: l, children: i, className: u }) {
+function K({ icon: e, shortcut: t, destructive: n = !1, disabled: r = !1, onSelect: a, render: l, children: i, className: u }) {
   const { onOpenChange: d } = y(), f = () => {
     r || (a?.(), d(!1));
   }, h = /* @__PURE__ */ c("div", {
@@ -190,7 +190,7 @@ function q({ icon: e, shortcut: t, destructive: n = !1, disabled: r = !1, onSele
     children: h
   });
 }
-function K({ avatar: e, name: t, email: n, selected: r = !1, onSelect: a, className: l }) {
+function X({ avatar: e, name: t, email: n, selected: r = !1, onSelect: a, className: l }) {
   return /* @__PURE__ */ o("div", {
     "data-slot": "nav-account-menu-account",
     className: s("flex items-center px-1.5 py-0 w-full", l),
@@ -225,7 +225,7 @@ function K({ avatar: e, name: t, email: n, selected: r = !1, onSelect: a, classN
     })
   });
 }
-function X({ className: e }) {
+function q({ className: e }) {
   return /* @__PURE__ */ o("hr", {
     "data-slot": "nav-account-menu-separator",
     className: s("h-px border-0 bg-border mx-5", e)
@@ -267,9 +267,9 @@ F.displayName = "NavAccountMenuTrigger";
 R.displayName = "NavAccountMenuContent";
 W.displayName = "NavAccountMenuHeader";
 Z.displayName = "NavAccountMenuSection";
-q.displayName = "NavAccountMenuItem";
-K.displayName = "NavAccountMenuAccount";
-X.displayName = "NavAccountMenuSeparator";
+K.displayName = "NavAccountMenuItem";
+X.displayName = "NavAccountMenuAccount";
+q.displayName = "NavAccountMenuSeparator";
 B.displayName = "NavAccountMenuFooter";
 G.displayName = "NavAccountMenuThemeSwitch";
 function J(e) {