@stackone/malachite 2.48.0 → 2.48.1

package/dist/components/NavItem.js

@@ -1,10 +1,10 @@
 import { jsx as e, jsxs as b, Fragment as w } from "react/jsx-runtime";
 import U, { forwardRef as W } from "react";
 import V from "./CustomIcons/CaretRightIcon.js";
-import Y from "./Tooltip.js";
-import { isExpanded as q } from "./ariaState.js";
-import { paintOnChild as J } from "./asChild.js";
-import { chainHandler as M, composeRefs as Q, elementRef as X } from "./composeRefs.js";
+import X from "./Tooltip.js";
+import { isExpanded as Y } from "./ariaState.js";
+import { paintOnChild as q } from "./asChild.js";
+import { chainHandler as J, composeRefs as M, elementRef as Q } from "./composeRefs.js";
 import { FOCUS_RING_INSET as Z } from "./focusRing.js";
 import { resolveRel as ee } from "./linkRel.js";
 import { safeHref as ae } from "./safeHref.js";
@@ -19,32 +19,35 @@ const te = "group relative flex items-center box-border no-underline border-0 m-
   active: `${ie} text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]`,
   activeChild: "bg-transparent text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]",
   danger: "bg-transparent text-[var(--malachite-text-destructive,rgb(237,53,54))] hover:bg-[var(--malachite-error-background-glass,rgba(197,63,63,0.08))] hover:text-[var(--malachite-text-destructive,rgb(237,53,54))]"
-}, se = {
+}, oe = {
   idle: "bg-[var(--malachite-text-placeholder,rgb(187,187,187))] group-hover:bg-[var(--malachite-text-primary,rgb(10,10,10))]",
   active: "bg-[var(--malachite-accent-foreground,rgb(2,122,66))]",
   activeChild: "bg-[var(--malachite-accent-foreground,rgb(2,122,66))]",
   danger: "bg-[var(--malachite-text-destructive,rgb(237,53,54))]"
-}, $ = "inline-flex shrink-0 items-center justify-center size-4 [&_svg]:size-4!", oe = W((j, f) => {
+}, $ = "inline-flex shrink-0 items-center justify-center size-4 [&_svg]:size-4!", se = {
+  "--malachite-ctx-tag-cursor": "pointer",
+  "--malachite-ctx-tag-ground": "var(--malachite-ctx-navitem-ground, var(--malachite-card-background, #ffffff))"
+}, le = W((j, f) => {
   const {
     label: l,
     icon: c,
     active: O = !1,
-    hasActiveChild: z = !1,
+    hasActiveChild: A = !1,
     collapsed: d = !1,
     variant: u = "item",
-    size: A = "medium",
+    size: z = "medium",
     danger: S = !1,
     trailing: _,
     badge: t,
     badgeLabel: r,
-    tag: E,
+    tag: T,
     disclosure: m,
     tooltip: L,
     accessibleLabel: D,
     className: H = "",
     asChild: B,
     ...v
-  } = j, R = S ? "danger" : O ? "active" : z ? "activeChild" : "idle", K = u === "subitem", P = d ? I.collapsed : I[u === "item" && A === "small" ? "compact" : u], x = `${te} ${P} ${ne[R]} ${Z} ${H}`.trim(), p = d ? L ?? (typeof l == "string" ? l : void 0) : void 0, F = p ? [p, r].filter(Boolean).join(", ") : void 0, i = D ?? (d ? F : void 0), T = v, k = O ? "page" : T["aria-current"], N = d ? /* @__PURE__ */ b(w, { children: [
+  } = j, E = S ? "danger" : O ? "active" : A ? "activeChild" : "idle", G = u === "subitem", K = d ? I.collapsed : I[u === "item" && z === "small" ? "compact" : u], x = `${te} ${K} ${ne[E]} ${Z} ${H}`.trim(), p = d ? L ?? (typeof l == "string" ? l : void 0) : void 0, P = p ? [p, r].filter(Boolean).join(", ") : void 0, i = D ?? (d ? P : void 0), k = v, R = O ? "page" : k["aria-current"], N = d ? /* @__PURE__ */ b(w, { children: [
     c && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: $, children: c }),
     !i && /* @__PURE__ */ b("span", { className: "sr-only", children: [
       l,
@@ -59,16 +62,16 @@ const te = "group relative flex items-center box-border no-underline border-0 m-
       }
     )
   ] }) : /* @__PURE__ */ b(w, { children: [
-    K ? /* @__PURE__ */ e(
+    G ? /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": "true",
-        className: `absolute left-[14px] top-1/2 -mt-[2px] size-1 rounded-full transition-colors duration-200 ${se[R]}`
+        className: `absolute left-[14px] top-1/2 -mt-[2px] size-1 rounded-full transition-colors duration-200 ${oe[E]}`
       }
     ) : c && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: $, children: c }),
     /* @__PURE__ */ b("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
       /* @__PURE__ */ e("span", { className: "min-w-0 truncate", children: l }),
-      E && /* @__PURE__ */ e("span", { className: "flex shrink-0", children: E })
+      T && /* @__PURE__ */ e("span", { className: "flex shrink-0", style: se, children: T })
     ] }),
     t && /* @__PURE__ */ e("span", { "aria-hidden": r ? !0 : void 0, className: "flex shrink-0", children: t }),
     t && r && !i && /* @__PURE__ */ e("span", { className: "sr-only", children: r }),
@@ -88,27 +91,27 @@ const te = "group relative flex items-center box-border no-underline border-0 m-
   ] });
   let h;
   if (B) {
-    const { children: n, ...s } = v, y = J(n, x, void 0, N), a = n.props, g = Object.fromEntries(
-      Object.entries(s).map(
-        ([o, C]) => o.startsWith("on") && typeof C == "function" && typeof a[o] == "function" ? [
-          o,
-          M(
-            a[o],
+    const { children: n, ...o } = v, y = q(n, x, void 0, N), a = n.props, g = Object.fromEntries(
+      Object.entries(o).map(
+        ([s, C]) => s.startsWith("on") && typeof C == "function" && typeof a[s] == "function" ? [
+          s,
+          J(
+            a[s],
             C
           )
-        ] : [o, C]
+        ] : [s, C]
       )
     );
     h = U.cloneElement(y, {
       ...g,
-      ref: Q(X(n), f),
-      "aria-current": k ?? a["aria-current"],
-      "aria-label": i ?? s["aria-label"] ?? a["aria-label"]
+      ref: M(Q(n), f),
+      "aria-current": R ?? a["aria-current"],
+      "aria-label": i ?? o["aria-label"] ?? a["aria-label"]
     });
   } else {
     const {
       href: n,
-      target: s,
+      target: o,
       rel: y,
       ...a
     } = v, g = ae(n);
@@ -118,9 +121,9 @@ const te = "group relative flex items-center box-border no-underline border-0 m-
         ...a,
         ref: f,
         href: g,
-        target: s,
-        rel: ee(y, s),
-        "aria-current": k,
+        target: o,
+        rel: ee(y, o),
+        "aria-current": R,
         "aria-label": i ?? a["aria-label"],
         className: x,
         children: N
@@ -138,22 +141,22 @@ const te = "group relative flex items-center box-border no-underline border-0 m-
       }
     );
   }
-  const G = q(T["aria-expanded"]);
+  const F = Y(k["aria-expanded"]);
   return p ? /* @__PURE__ */ e(
-    Y,
+    X,
     {
       text: p,
       placement: "right",
       delay: re,
       describesTrigger: !1,
-      suppressed: G,
+      suppressed: F,
       children: h
     }
   ) : h;
 });
-oe.displayName = "NavItem";
+le.displayName = "NavItem";
 export {
-  oe as NavItem,
-  oe as default
+  le as NavItem,
+  le as default
 };
 //# sourceMappingURL=NavItem.js.map

package/dist/components/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../../src/components/NavItem.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport Tooltip from './Tooltip';\nimport { isExpanded } from './ariaState';\nimport { paintOnChild } from './asChild';\nimport { chainHandler, composeRefs, elementRef } from './composeRefs';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { resolveRel } from './linkRel';\nimport { safeHref } from './safeHref';\nimport { SIDEBAR_TOOLTIP_DELAY_S } from './sidebarContext';\n\ntype NativeProps = Omit<\n    React.HTMLAttributes<HTMLElement>,\n    'children' | 'className' | 'style' | 'color' | 'title'\n>;\n\ninterface NavItemBaseProps extends NativeProps {\n    label: React.ReactNode;\n    icon?: React.ReactNode;\n    active?: boolean;\n    hasActiveChild?: boolean;\n    collapsed?: boolean;\n    variant?: 'item' | 'subitem';\n    size?: 'medium' | 'small';\n    danger?: boolean;\n    trailing?: React.ReactNode;\n    badge?: React.ReactNode;\n    badgeLabel?: string;\n    tag?: React.ReactNode;\n    disclosure?: 'expanded' | 'collapsed';\n    tooltip?: string;\n    accessibleLabel?: string;\n    className?: string;\n}\n\nexport interface NavItemLinkProps extends NavItemBaseProps {\n    asChild?: false;\n    href?: string;\n    target?: string;\n    rel?: string;\n    onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport interface NavItemAsChildProps extends NavItemBaseProps {\n    asChild: true;\n    children: React.ReactElement;\n    href?: never;\n    target?: never;\n    rel?: never;\n    disclosure?: never;\n}\n\nexport type NavItemProps = NavItemLinkProps | NavItemAsChildProps;\n\nconst ROW =\n    'group relative flex items-center box-border no-underline border-0 m-0 cursor-pointer select-none text-left font-sans font-medium text-[length:var(--malachite-font-size-small,13px)] leading-[17px] rounded-[var(--malachite-radius-xl,12px)] transition-[background-color,color] duration-200';\n\nconst SHAPE = {\n    item: 'w-full min-h-[37px] gap-3 py-[10px] px-3',\n    compact: 'w-full min-h-9 gap-3 py-2 px-3',\n    subitem: 'w-full gap-3 py-2 pr-3 pl-9',\n    collapsed: 'w-9 h-[37px] shrink-0 justify-center p-0',\n} as const;\n\nconst ACTIVE_BACKGROUND =\n    'bg-[var(--malachite-accent-background-glass,rgba(0,175,102,0.08))] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-accent-background,rgb(0,175,102))_12%,transparent)]';\n\nconst TONE = {\n    idle: 'bg-transparent text-[var(--malachite-text-secondary,rgb(123,123,123))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))]',\n    active: `${ACTIVE_BACKGROUND} text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]`,\n    activeChild:\n        'bg-transparent text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    danger: 'bg-transparent text-[var(--malachite-text-destructive,rgb(237,53,54))] hover:bg-[var(--malachite-error-background-glass,rgba(197,63,63,0.08))] hover:text-[var(--malachite-text-destructive,rgb(237,53,54))]',\n} as const;\n\nconst DOT_TONE = {\n    idle: 'bg-[var(--malachite-text-placeholder,rgb(187,187,187))] group-hover:bg-[var(--malachite-text-primary,rgb(10,10,10))]',\n    active: 'bg-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    activeChild: 'bg-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    danger: 'bg-[var(--malachite-text-destructive,rgb(237,53,54))]',\n} as const;\n\nconst ICON = 'inline-flex shrink-0 items-center justify-center size-4 [&_svg]:size-4!';\n\nconst NavItem = forwardRef<HTMLElement, NavItemProps>((props, ref) => {\n    const {\n        label,\n        icon,\n        active = false,\n        hasActiveChild = false,\n        collapsed = false,\n        variant = 'item',\n        size = 'medium',\n        danger = false,\n        trailing,\n        badge,\n        badgeLabel,\n        tag,\n        disclosure,\n        tooltip,\n        accessibleLabel,\n        className = '',\n        asChild,\n        ...rest\n    } = props;\n\n    const tone = danger ? 'danger' : active ? 'active' : hasActiveChild ? 'activeChild' : 'idle';\n    const isSubitem = variant === 'subitem';\n    const shapeKey = variant === 'item' && size === 'small' ? 'compact' : variant;\n    const shape = collapsed ? SHAPE.collapsed : SHAPE[shapeKey];\n    const rowClass = `${ROW} ${shape} ${TONE[tone]} ${FOCUS_RING_INSET} ${className}`.trim();\n\n    const tooltipText = collapsed\n        ? (tooltip ?? (typeof label === 'string' ? label : undefined))\n        : undefined;\n    const collapsedName = tooltipText\n        ? [tooltipText, badgeLabel].filter(Boolean).join(', ')\n        : undefined;\n    const ariaLabel = accessibleLabel ?? (collapsed ? collapsedName : undefined);\n    const native = rest as NativeProps;\n    const ariaCurrent = active ? 'page' : native['aria-current'];\n\n    const content = collapsed ? (\n        <>\n            {icon && (\n                <span aria-hidden=\"true\" className={ICON}>\n                    {icon}\n                </span>\n            )}\n            {!ariaLabel && (\n                <span className=\"sr-only\">\n                    {label}\n                    {badgeLabel && `, ${badgeLabel}`}\n                </span>\n            )}\n            {badge && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute top-1 right-1 flex\"\n                >\n                    {badge}\n                </span>\n            )}\n        </>\n    ) : (\n        <>\n            {isSubitem ? (\n                <span\n                    aria-hidden=\"true\"\n                    className={`absolute left-[14px] top-1/2 -mt-[2px] size-1 rounded-full transition-colors duration-200 ${DOT_TONE[tone]}`}\n                />\n            ) : (\n                icon && (\n                    <span aria-hidden=\"true\" className={ICON}>\n                        {icon}\n                    </span>\n                )\n            )}\n            <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n                <span className=\"min-w-0 truncate\">{label}</span>\n                {tag && <span className=\"flex shrink-0\">{tag}</span>}\n            </span>\n            {badge && (\n                <span aria-hidden={badgeLabel ? true : undefined} className=\"flex shrink-0\">\n                    {badge}\n                </span>\n            )}\n            {badge && badgeLabel && !ariaLabel && <span className=\"sr-only\">{badgeLabel}</span>}\n            {trailing && <span className=\"flex shrink-0 items-center\">{trailing}</span>}\n            {disclosure && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"flex shrink-0 items-center\"\n                    style={{\n                        transform: disclosure === 'expanded' ? 'rotate(90deg)' : undefined,\n                        transition: 'transform 0.2s',\n                    }}\n                >\n                    <CaretRightIcon size={14} />\n                </span>\n            )}\n        </>\n    );\n\n    let element: React.ReactElement;\n    if (asChild) {\n        const { children, ...childNative } = rest as NativeProps & {\n            children: React.ReactElement<Record<string, unknown>>;\n        };\n        const painted = paintOnChild(children, rowClass, undefined, content);\n        const childProps = children.props;\n        const chained = Object.fromEntries(\n            Object.entries(childNative).map(([key, value]) =>\n                key.startsWith('on') &&\n                typeof value === 'function' &&\n                typeof childProps[key] === 'function'\n                    ? [\n                          key,\n                          chainHandler(\n                              childProps[key] as (event: React.SyntheticEvent) => void,\n                              value as (event: React.SyntheticEvent) => void,\n                          ),\n                      ]\n                    : [key, value],\n            ),\n        );\n        element = React.cloneElement(painted, {\n            ...chained,\n            ref: composeRefs(elementRef<HTMLElement>(children), ref),\n            'aria-current': ariaCurrent ?? childProps['aria-current'],\n            'aria-label': ariaLabel ?? childNative['aria-label'] ?? childProps['aria-label'],\n        } as Record<string, unknown>);\n    } else {\n        const {\n            href: rawHref,\n            target,\n            rel,\n            ...linkNative\n        } = rest as NativeProps & Pick<NavItemLinkProps, 'href' | 'target' | 'rel'>;\n        const href = safeHref(rawHref);\n        element =\n            href !== undefined ? (\n                <a\n                    {...linkNative}\n                    ref={ref as React.Ref<HTMLAnchorElement>}\n                    href={href}\n                    target={target}\n                    rel={resolveRel(rel, target)}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel ?? linkNative['aria-label']}\n                    className={rowClass}\n                >\n                    {content}\n                </a>\n            ) : (\n                <button\n                    {...linkNative}\n                    ref={ref as React.Ref<HTMLButtonElement>}\n                    type=\"button\"\n                    aria-expanded={\n                        linkNative['aria-expanded'] ??\n                        (disclosure ? disclosure === 'expanded' : undefined)\n                    }\n                    aria-label={ariaLabel ?? linkNative['aria-label']}\n                    className={rowClass}\n                >\n                    {content}\n                </button>\n            );\n    }\n\n    const popupOpen = isExpanded(native['aria-expanded']);\n\n    return tooltipText ? (\n        <Tooltip\n            text={tooltipText}\n            placement=\"right\"\n            delay={SIDEBAR_TOOLTIP_DELAY_S}\n            describesTrigger={false}\n            suppressed={popupOpen}\n        >\n            {element}\n        </Tooltip>\n    ) : (\n        element\n    );\n});\n\nNavItem.displayName = 'NavItem';\n\nexport { NavItem };\nexport default NavItem;\n"],"names":["ROW","SHAPE","ACTIVE_BACKGROUND","TONE","DOT_TONE","ICON","NavItem","forwardRef","props","ref","label","icon","active","hasActiveChild","collapsed","variant","size","danger","trailing","badge","badgeLabel","tag","disclosure","tooltip","accessibleLabel","className","asChild","rest","tone","isSubitem","shape","rowClass","FOCUS_RING_INSET","tooltipText","collapsedName","ariaLabel","native","ariaCurrent","content","jsxs","Fragment","jsx","CaretRightIcon","element","children","childNative","painted","paintOnChild","childProps","chained","key","value","chainHandler","React","composeRefs","elementRef","rawHref","target","rel","linkNative","href","safeHref","resolveRel","popupOpen","isExpanded","Tooltip","SIDEBAR_TOOLTIP_DELAY_S"],"mappings":"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"}
+{"version":3,"file":"NavItem.js","sources":["../../src/components/NavItem.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport Tooltip from './Tooltip';\nimport { isExpanded } from './ariaState';\nimport { paintOnChild } from './asChild';\nimport { chainHandler, composeRefs, elementRef } from './composeRefs';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { resolveRel } from './linkRel';\nimport { safeHref } from './safeHref';\nimport { SIDEBAR_TOOLTIP_DELAY_S } from './sidebarContext';\n\ntype NativeProps = Omit<\n    React.HTMLAttributes<HTMLElement>,\n    'children' | 'className' | 'style' | 'color' | 'title'\n>;\n\ninterface NavItemBaseProps extends NativeProps {\n    label: React.ReactNode;\n    icon?: React.ReactNode;\n    active?: boolean;\n    hasActiveChild?: boolean;\n    collapsed?: boolean;\n    variant?: 'item' | 'subitem';\n    size?: 'medium' | 'small';\n    danger?: boolean;\n    trailing?: React.ReactNode;\n    badge?: React.ReactNode;\n    badgeLabel?: string;\n    tag?: React.ReactNode;\n    disclosure?: 'expanded' | 'collapsed';\n    tooltip?: string;\n    accessibleLabel?: string;\n    className?: string;\n}\n\nexport interface NavItemLinkProps extends NavItemBaseProps {\n    asChild?: false;\n    href?: string;\n    target?: string;\n    rel?: string;\n    onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport interface NavItemAsChildProps extends NavItemBaseProps {\n    asChild: true;\n    children: React.ReactElement;\n    href?: never;\n    target?: never;\n    rel?: never;\n    disclosure?: never;\n}\n\nexport type NavItemProps = NavItemLinkProps | NavItemAsChildProps;\n\nconst ROW =\n    'group relative flex items-center box-border no-underline border-0 m-0 cursor-pointer select-none text-left font-sans font-medium text-[length:var(--malachite-font-size-small,13px)] leading-[17px] rounded-[var(--malachite-radius-xl,12px)] transition-[background-color,color] duration-200';\n\nconst SHAPE = {\n    item: 'w-full min-h-[37px] gap-3 py-[10px] px-3',\n    compact: 'w-full min-h-9 gap-3 py-2 px-3',\n    subitem: 'w-full gap-3 py-2 pr-3 pl-9',\n    collapsed: 'w-9 h-[37px] shrink-0 justify-center p-0',\n} as const;\n\nconst ACTIVE_BACKGROUND =\n    'bg-[var(--malachite-accent-background-glass,rgba(0,175,102,0.08))] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-accent-background,rgb(0,175,102))_12%,transparent)]';\n\nconst TONE = {\n    idle: 'bg-transparent text-[var(--malachite-text-secondary,rgb(123,123,123))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))]',\n    active: `${ACTIVE_BACKGROUND} text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]`,\n    activeChild:\n        'bg-transparent text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    danger: 'bg-transparent text-[var(--malachite-text-destructive,rgb(237,53,54))] hover:bg-[var(--malachite-error-background-glass,rgba(197,63,63,0.08))] hover:text-[var(--malachite-text-destructive,rgb(237,53,54))]',\n} as const;\n\nconst DOT_TONE = {\n    idle: 'bg-[var(--malachite-text-placeholder,rgb(187,187,187))] group-hover:bg-[var(--malachite-text-primary,rgb(10,10,10))]',\n    active: 'bg-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    activeChild: 'bg-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    danger: 'bg-[var(--malachite-text-destructive,rgb(237,53,54))]',\n} as const;\n\nconst ICON = 'inline-flex shrink-0 items-center justify-center size-4 [&_svg]:size-4!';\n\n/*\n * What a `Tag` on the row reads: the pointer every row shows (`inherit` would not do, since a\n * custom property set to it inherits itself), and the ground the row rests on, so the tag keeps\n * one colour while the row is hovered or current. `--malachite-ctx-navitem-ground` is a context\n * channel the container sets (`Sidebar` does), not a theme token; elsewhere, a card.\n */\nconst TAG_CONTEXT = {\n    '--malachite-ctx-tag-cursor': 'pointer',\n    '--malachite-ctx-tag-ground':\n        'var(--malachite-ctx-navitem-ground, var(--malachite-card-background, #ffffff))',\n} as React.CSSProperties;\n\nconst NavItem = forwardRef<HTMLElement, NavItemProps>((props, ref) => {\n    const {\n        label,\n        icon,\n        active = false,\n        hasActiveChild = false,\n        collapsed = false,\n        variant = 'item',\n        size = 'medium',\n        danger = false,\n        trailing,\n        badge,\n        badgeLabel,\n        tag,\n        disclosure,\n        tooltip,\n        accessibleLabel,\n        className = '',\n        asChild,\n        ...rest\n    } = props;\n\n    const tone = danger ? 'danger' : active ? 'active' : hasActiveChild ? 'activeChild' : 'idle';\n    const isSubitem = variant === 'subitem';\n    const shapeKey = variant === 'item' && size === 'small' ? 'compact' : variant;\n    const shape = collapsed ? SHAPE.collapsed : SHAPE[shapeKey];\n    const rowClass = `${ROW} ${shape} ${TONE[tone]} ${FOCUS_RING_INSET} ${className}`.trim();\n\n    const tooltipText = collapsed\n        ? (tooltip ?? (typeof label === 'string' ? label : undefined))\n        : undefined;\n    const collapsedName = tooltipText\n        ? [tooltipText, badgeLabel].filter(Boolean).join(', ')\n        : undefined;\n    const ariaLabel = accessibleLabel ?? (collapsed ? collapsedName : undefined);\n    const native = rest as NativeProps;\n    const ariaCurrent = active ? 'page' : native['aria-current'];\n\n    const content = collapsed ? (\n        <>\n            {icon && (\n                <span aria-hidden=\"true\" className={ICON}>\n                    {icon}\n                </span>\n            )}\n            {!ariaLabel && (\n                <span className=\"sr-only\">\n                    {label}\n                    {badgeLabel && `, ${badgeLabel}`}\n                </span>\n            )}\n            {badge && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute top-1 right-1 flex\"\n                >\n                    {badge}\n                </span>\n            )}\n        </>\n    ) : (\n        <>\n            {isSubitem ? (\n                <span\n                    aria-hidden=\"true\"\n                    className={`absolute left-[14px] top-1/2 -mt-[2px] size-1 rounded-full transition-colors duration-200 ${DOT_TONE[tone]}`}\n                />\n            ) : (\n                icon && (\n                    <span aria-hidden=\"true\" className={ICON}>\n                        {icon}\n                    </span>\n                )\n            )}\n            <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n                <span className=\"min-w-0 truncate\">{label}</span>\n                {tag && (\n                    <span className=\"flex shrink-0\" style={TAG_CONTEXT}>\n                        {tag}\n                    </span>\n                )}\n            </span>\n            {badge && (\n                <span aria-hidden={badgeLabel ? true : undefined} className=\"flex shrink-0\">\n                    {badge}\n                </span>\n            )}\n            {badge && badgeLabel && !ariaLabel && <span className=\"sr-only\">{badgeLabel}</span>}\n            {trailing && <span className=\"flex shrink-0 items-center\">{trailing}</span>}\n            {disclosure && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"flex shrink-0 items-center\"\n                    style={{\n                        transform: disclosure === 'expanded' ? 'rotate(90deg)' : undefined,\n                        transition: 'transform 0.2s',\n                    }}\n                >\n                    <CaretRightIcon size={14} />\n                </span>\n            )}\n        </>\n    );\n\n    let element: React.ReactElement;\n    if (asChild) {\n        const { children, ...childNative } = rest as NativeProps & {\n            children: React.ReactElement<Record<string, unknown>>;\n        };\n        const painted = paintOnChild(children, rowClass, undefined, content);\n        const childProps = children.props;\n        const chained = Object.fromEntries(\n            Object.entries(childNative).map(([key, value]) =>\n                key.startsWith('on') &&\n                typeof value === 'function' &&\n                typeof childProps[key] === 'function'\n                    ? [\n                          key,\n                          chainHandler(\n                              childProps[key] as (event: React.SyntheticEvent) => void,\n                              value as (event: React.SyntheticEvent) => void,\n                          ),\n                      ]\n                    : [key, value],\n            ),\n        );\n        element = React.cloneElement(painted, {\n            ...chained,\n            ref: composeRefs(elementRef<HTMLElement>(children), ref),\n            'aria-current': ariaCurrent ?? childProps['aria-current'],\n            'aria-label': ariaLabel ?? childNative['aria-label'] ?? childProps['aria-label'],\n        } as Record<string, unknown>);\n    } else {\n        const {\n            href: rawHref,\n            target,\n            rel,\n            ...linkNative\n        } = rest as NativeProps & Pick<NavItemLinkProps, 'href' | 'target' | 'rel'>;\n        const href = safeHref(rawHref);\n        element =\n            href !== undefined ? (\n                <a\n                    {...linkNative}\n                    ref={ref as React.Ref<HTMLAnchorElement>}\n                    href={href}\n                    target={target}\n                    rel={resolveRel(rel, target)}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel ?? linkNative['aria-label']}\n                    className={rowClass}\n                >\n                    {content}\n                </a>\n            ) : (\n                <button\n                    {...linkNative}\n                    ref={ref as React.Ref<HTMLButtonElement>}\n                    type=\"button\"\n                    aria-expanded={\n                        linkNative['aria-expanded'] ??\n                        (disclosure ? disclosure === 'expanded' : undefined)\n                    }\n                    aria-label={ariaLabel ?? linkNative['aria-label']}\n                    className={rowClass}\n                >\n                    {content}\n                </button>\n            );\n    }\n\n    const popupOpen = isExpanded(native['aria-expanded']);\n\n    return tooltipText ? (\n        <Tooltip\n            text={tooltipText}\n            placement=\"right\"\n            delay={SIDEBAR_TOOLTIP_DELAY_S}\n            describesTrigger={false}\n            suppressed={popupOpen}\n        >\n            {element}\n        </Tooltip>\n    ) : (\n        element\n    );\n});\n\nNavItem.displayName = 'NavItem';\n\nexport { NavItem };\nexport default NavItem;\n"],"names":["ROW","SHAPE","ACTIVE_BACKGROUND","TONE","DOT_TONE","ICON","TAG_CONTEXT","NavItem","forwardRef","props","ref","label","icon","active","hasActiveChild","collapsed","variant","size","danger","trailing","badge","badgeLabel","tag","disclosure","tooltip","accessibleLabel","className","asChild","rest","tone","isSubitem","shape","rowClass","FOCUS_RING_INSET","tooltipText","collapsedName","ariaLabel","native","ariaCurrent","content","jsxs","Fragment","jsx","CaretRightIcon","element","children","childNative","painted","paintOnChild","childProps","chained","key","value","chainHandler","React","composeRefs","elementRef","rawHref","target","rel","linkNative","href","safeHref","resolveRel","popupOpen","isExpanded","Tooltip","SIDEBAR_TOOLTIP_DELAY_S"],"mappings":"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"}

package/dist/components/Sidebar.js

@@ -7,10 +7,12 @@ import _ from "./Tooltip.js";
 import b from "./TruncatedTooltip.js";
 import { UsageCard as O } from "./UsageCard.js";
 import { isExpanded as h } from "./ariaState.js";
-import { BORDER as m, NO_SCROLLBAR as T } from "./chromeStyles.js";
+import { BORDER as m, NO_SCROLLBAR as k } from "./chromeStyles.js";
 import { FOCUS_RING as u } from "./focusRing.js";
-import { SIDEBAR_WIDTH_PX as g, SidebarContext as j, SIDEBAR_Z_INDEX as v, SIDEBAR_POPOVER_WIDTH_PX as k, SIDEBAR_TOOLTIP_DELAY_S as x, useSidebarCollapsed as A } from "./sidebarContext.js";
-const i = () => ({ collapsed: A() }), D = 1, P = 24, w = { width: 8, height: 14 }, z = "fixed top-[25px] opacity-0 [will-change:opacity] transition-[left,opacity] duration-200 ease-in-out group-hover/sidebar:opacity-100 group-has-[:focus-visible]/sidebar:opacity-100 [@media(hover:none)]:opacity-100", C = ({
+import { SIDEBAR_WIDTH_PX as f, SidebarContext as T, SIDEBAR_Z_INDEX as v, SIDEBAR_POPOVER_WIDTH_PX as A, SIDEBAR_TOOLTIP_DELAY_S as x, useSidebarCollapsed as j } from "./sidebarContext.js";
+const i = () => ({ collapsed: j() }), D = 1, P = 24, w = { width: 8, height: 14 }, z = "fixed top-[25px] opacity-0 [will-change:opacity] transition-[left,opacity] duration-200 ease-in-out group-hover/sidebar:opacity-100 group-has-[:focus-visible]/sidebar:opacity-100 [@media(hover:none)]:opacity-100", C = {
+  "--malachite-ctx-navitem-ground": "var(--malachite-card-sunken-background, rgb(250,250,250))"
+}, L = ({
   collapsed: e = !1,
   onToggleCollapse: t,
   expandLabel: a = "Expand menu",
@@ -18,19 +20,19 @@ const i = () => ({ collapsed: A() }), D = 1, P = 24, w = { width: 8, height: 14
   "aria-label": p = "Main",
   children: n
 }) => {
-  const l = e ? a : c, s = R(() => ({ collapsed: e }), [e]), o = e ? g.collapsed : g.expanded;
-  return /* @__PURE__ */ r(j.Provider, { value: s, children: /* @__PURE__ */ d(
+  const l = e ? a : c, o = R(() => ({ collapsed: e }), [e]), s = e ? f.collapsed : f.expanded;
+  return /* @__PURE__ */ r(T.Provider, { value: o, children: /* @__PURE__ */ d(
     "aside",
     {
       className: "group/sidebar fixed top-0 bottom-0 left-0 box-border pt-[9px] bg-[var(--malachite-card-sunken-background,rgb(250,250,250))] transition-[width] duration-200 ease-in-out",
-      style: { width: o, zIndex: v },
+      style: { width: s, zIndex: v, ...C },
       children: [
         /* @__PURE__ */ r("nav", { "aria-label": p, className: "flex h-full flex-col", children: n }),
         t && /* @__PURE__ */ r(
           "div",
           {
             className: z,
-            style: { left: o - P / 2, zIndex: v + 1 },
+            style: { left: s - P / 2, zIndex: v + 1 },
             children: /* @__PURE__ */ r(_, { text: l, placement: "right", describesTrigger: !1, children: /* @__PURE__ */ r(
               "button",
               {
@@ -46,7 +48,7 @@ const i = () => ({ collapsed: A() }), D = 1, P = 24, w = { width: 8, height: 14
       ]
     }
   ) });
-}, L = ({ children: e }) => {
+}, B = ({ children: e }) => {
   const { collapsed: t } = i();
   return /* @__PURE__ */ r(
     "div",
@@ -55,7 +57,7 @@ const i = () => ({ collapsed: A() }), D = 1, P = 24, w = { width: 8, height: 14
       children: e
     }
   );
-}, B = ({ children: e }) => /* @__PURE__ */ r("div", { className: `min-h-0 flex-1 overflow-x-hidden overflow-y-auto ${T}`, children: e }), G = ({ children: e }) => {
+}, G = ({ children: e }) => /* @__PURE__ */ r("div", { className: `min-h-0 flex-1 overflow-x-hidden overflow-y-auto ${k}`, children: e }), U = ({ children: e }) => {
   const { collapsed: t } = i();
   return /* @__PURE__ */ r(
     "div",
@@ -64,10 +66,10 @@ const i = () => ({ collapsed: A() }), D = 1, P = 24, w = { width: 8, height: 14
       children: e
     }
   );
-}, X = ({ children: e }) => /* @__PURE__ */ r("div", { className: "my-[2px] flex flex-col gap-[6px]", children: e }), H = ({ children: e }) => /* @__PURE__ */ r("div", { className: "flex flex-col gap-[6px]", children: e }), U = ({ children: e }) => {
+}, X = ({ children: e }) => /* @__PURE__ */ r("div", { className: "my-[2px] flex flex-col gap-[6px]", children: e }), H = ({ children: e }) => /* @__PURE__ */ r("div", { className: "flex flex-col gap-[6px]", children: e }), V = ({ children: e }) => {
   const { collapsed: t } = i();
   return /* @__PURE__ */ r("div", { className: `flex pt-5 pb-[18px] ${t ? "justify-center px-3" : "px-4"}`, children: e });
-}, V = ({
+}, M = ({
   children: e,
   "aria-label": t
 }) => {
@@ -76,7 +78,7 @@ const i = () => ({ collapsed: A() }), D = 1, P = 24, w = { width: 8, height: 14
 }, F = () => {
   const { collapsed: e } = i();
   return e ? null : /* @__PURE__ */ r("hr", { className: `m-0 my-2 h-0 shrink-0 border-0 border-t border-solid ${m}` });
-}, M = ({ children: e }) => {
+}, W = ({ children: e }) => {
   const { collapsed: t } = i();
   return /* @__PURE__ */ r(
     "div",
@@ -86,16 +88,16 @@ const i = () => ({ collapsed: A() }), D = 1, P = 24, w = { width: 8, height: 14
     }
   );
 }, S = y(
-  ({ logo: e, title: t, subtitle: a, titleTooltip: c, subtitleTooltip: p, className: n = "", ...l }, s) => {
-    const { collapsed: o } = i(), f = h(l["aria-expanded"]);
+  ({ logo: e, title: t, subtitle: a, titleTooltip: c, subtitleTooltip: p, className: n = "", ...l }, o) => {
+    const { collapsed: s } = i(), g = h(l["aria-expanded"]);
     return /* @__PURE__ */ d(
       "button",
       {
-        ref: s,
+        ref: o,
         type: "button",
-        "aria-label": o ? t : void 0,
+        "aria-label": s ? t : void 0,
         ...l,
-        className: `group/switcher m-0 box-border flex h-full w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans text-left ${o ? "justify-center p-1" : "justify-between px-4 py-[6px]"} ${u} ${n}`.trim(),
+        className: `group/switcher m-0 box-border flex h-full w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans text-left ${s ? "justify-center p-1" : "justify-between px-4 py-[6px]"} ${u} ${n}`.trim(),
         children: [
           /* @__PURE__ */ d("span", { className: "flex min-w-0 items-center gap-4", children: [
             /* @__PURE__ */ r(
@@ -106,7 +108,7 @@ const i = () => ({ collapsed: A() }), D = 1, P = 24, w = { width: 8, height: 14
                 children: e
               }
             ),
-            !o && /* @__PURE__ */ d("span", { className: "flex min-w-0 flex-col gap-1", children: [
+            !s && /* @__PURE__ */ d("span", { className: "flex min-w-0 flex-col gap-1", children: [
               /* @__PURE__ */ r(
                 b,
                 {
@@ -115,7 +117,7 @@ const i = () => ({ collapsed: A() }), D = 1, P = 24, w = { width: 8, height: 14
                   delay: x,
                   triggerAs: "span",
                   describesTrigger: !1,
-                  suppressed: f,
+                  suppressed: g,
                   className: "text-[length:var(--malachite-font-size-medium,14px)] leading-[14px] font-medium text-[var(--malachite-text-primary,rgb(10,10,10))]",
                   children: t
                 }
@@ -128,34 +130,34 @@ const i = () => ({ collapsed: A() }), D = 1, P = 24, w = { width: 8, height: 14
                   delay: x,
                   triggerAs: "span",
                   describesTrigger: !1,
-                  suppressed: f,
+                  suppressed: g,
                   className: "text-[12px] leading-[12px] font-normal text-[var(--malachite-text-secondary,rgb(123,123,123))]",
                   children: a
                 }
               )
             ] })
           ] }),
-          !o && /* @__PURE__ */ r("span", { className: "flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/switcher:text-[var(--malachite-text-primary,rgb(10,10,10))]", children: /* @__PURE__ */ r(N, { style: w }) })
+          !s && /* @__PURE__ */ r("span", { className: "flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/switcher:text-[var(--malachite-text-primary,rgb(10,10,10))]", children: /* @__PURE__ */ r(N, { style: w }) })
         ]
       }
     );
   }
 );
 S.displayName = "Sidebar.Switcher";
-const W = `inline-flex items-center justify-center rounded-[var(--malachite-radius-md,6px)] border border-solid ${m} bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_20%,transparent)] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_10%,transparent)] px-1 py-[3px] text-[length:var(--malachite-font-size-small,13px)] leading-[12px] font-semibold text-[var(--malachite-text-secondary,rgb(123,123,123))]`, I = y(
+const Y = `inline-flex items-center justify-center rounded-[var(--malachite-radius-md,6px)] border border-solid ${m} bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_20%,transparent)] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_10%,transparent)] px-1 py-[3px] text-[length:var(--malachite-font-size-small,13px)] leading-[12px] font-semibold text-[var(--malachite-text-secondary,rgb(123,123,123))]`, I = y(
   ({ avatar: e, initials: t, name: a, tooltip: c, className: p = "", ...n }, l) => {
-    const { collapsed: s } = i(), o = /* @__PURE__ */ d(
+    const { collapsed: o } = i(), s = /* @__PURE__ */ d(
       "button",
       {
         ref: l,
         type: "button",
-        "aria-label": s ? a : void 0,
+        "aria-label": o ? a : void 0,
         ...n,
-        className: `group/account m-0 box-border flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans ${s ? "justify-center p-0" : "justify-between px-2"} ${u} ${p}`.trim(),
+        className: `group/account m-0 box-border flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans ${o ? "justify-center p-0" : "justify-between px-2"} ${u} ${p}`.trim(),
         children: [
           /* @__PURE__ */ d("span", { className: "flex min-w-0 items-center gap-3", children: [
-            /* @__PURE__ */ r("span", { "aria-hidden": s ? void 0 : !0, className: "flex shrink-0", children: e ?? (t ? /* @__PURE__ */ r("span", { className: W, children: t }) : null) }),
-            !s && /* @__PURE__ */ r(
+            /* @__PURE__ */ r("span", { "aria-hidden": o ? void 0 : !0, className: "flex shrink-0", children: e ?? (t ? /* @__PURE__ */ r("span", { className: Y, children: t }) : null) }),
+            !o && /* @__PURE__ */ r(
               b,
               {
                 text: a ? c ?? a : void 0,
@@ -169,11 +171,11 @@ const W = `inline-flex items-center justify-center rounded-[var(--malachite-radi
               }
             )
           ] }),
-          !s && /* @__PURE__ */ r("span", { className: "flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/account:text-[var(--malachite-text-primary,rgb(10,10,10))]", children: /* @__PURE__ */ r(N, { style: w }) })
+          !o && /* @__PURE__ */ r("span", { className: "flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/account:text-[var(--malachite-text-primary,rgb(10,10,10))]", children: /* @__PURE__ */ r(N, { style: w }) })
         ]
       }
     );
-    return s ? /* @__PURE__ */ r(
+    return o ? /* @__PURE__ */ r(
       _,
       {
         text: a ? c ?? a : void 0,
@@ -181,39 +183,39 @@ const W = `inline-flex items-center justify-center rounded-[var(--malachite-radi
         delay: x,
         describesTrigger: !1,
         suppressed: h(n["aria-expanded"]),
-        children: o
+        children: s
       }
-    ) : o;
+    ) : s;
   }
 );
 I.displayName = "Sidebar.Account";
-const Y = (e) => {
+const Z = (e) => {
   const { collapsed: t } = i();
   return t ? null : /* @__PURE__ */ r("div", { className: "shrink-0 px-3 pt-3 pb-4", children: /* @__PURE__ */ r(O, { ...e }) });
-}, Z = ({ children: e }) => /* @__PURE__ */ r(
+}, q = ({ children: e }) => /* @__PURE__ */ r(
   "div",
   {
     className: "flex flex-col",
-    style: { width: k - 2 * D },
+    style: { width: A - 2 * D },
     children: e
   }
-), le = Object.assign(C, {
-  Header: L,
-  Body: B,
-  Section: G,
+), ce = Object.assign(L, {
+  Header: B,
+  Body: G,
+  Section: U,
   Group: X,
   GroupItems: H,
-  Search: U,
-  Notices: V,
+  Search: V,
+  Notices: M,
   Divider: F,
-  Footer: M,
+  Footer: W,
   Switcher: S,
   Account: I,
-  Usage: Y,
-  Panel: Z
+  Usage: Z,
+  Panel: q
 });
 export {
-  le as Sidebar,
-  le as default
+  ce as Sidebar,
+  ce as default
 };
 //# sourceMappingURL=Sidebar.js.map

package/dist/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport CaretLeftIcon from './CustomIcons/CaretLeftIcon';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport ChevronsUpDownIcon from './CustomIcons/ChevronsUpDownIcon';\nimport Tooltip from './Tooltip';\nimport TruncatedTooltip from './TruncatedTooltip';\nimport UsageCard, { type UsageCardProps } from './UsageCard';\nimport { isExpanded } from './ariaState';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING } from './focusRing';\nimport {\n    SIDEBAR_POPOVER_WIDTH_PX,\n    SIDEBAR_TOOLTIP_DELAY_S,\n    SIDEBAR_WIDTH_PX,\n    SIDEBAR_Z_INDEX,\n    SidebarContext,\n    useSidebarCollapsed,\n} from './sidebarContext';\n\nconst useSidebar = () => ({ collapsed: useSidebarCollapsed() });\n\nconst POPOVER_BORDER_PX = 1;\nconst TOGGLE_SIZE_PX = 24;\nconst CHEVRONS = { width: 8, height: 14 } as const;\n\nexport interface SidebarProps {\n    collapsed?: boolean;\n    onToggleCollapse?: () => void;\n    expandLabel?: string;\n    collapseLabel?: string;\n    'aria-label'?: string;\n    children: React.ReactNode;\n}\n\n// Hidden by opacity, not visibility, so the half over the page can be hovered; touch always shows it.\nconst TOGGLE_LAYER =\n    'fixed top-[25px] opacity-0 [will-change:opacity] transition-[left,opacity] duration-200 ease-in-out group-hover/sidebar:opacity-100 group-has-[:focus-visible]/sidebar:opacity-100 [@media(hover:none)]:opacity-100';\n\nconst SidebarRoot: React.FC<SidebarProps> = ({\n    collapsed = false,\n    onToggleCollapse,\n    expandLabel = 'Expand menu',\n    collapseLabel = 'Collapse menu',\n    'aria-label': ariaLabel = 'Main',\n    children,\n}) => {\n    const toggleLabel = collapsed ? expandLabel : collapseLabel;\n    const context = useMemo(() => ({ collapsed }), [collapsed]);\n    const width = collapsed ? SIDEBAR_WIDTH_PX.collapsed : SIDEBAR_WIDTH_PX.expanded;\n\n    return (\n        <SidebarContext.Provider value={context}>\n            <aside\n                className=\"group/sidebar fixed top-0 bottom-0 left-0 box-border pt-[9px] bg-[var(--malachite-card-sunken-background,rgb(250,250,250))] transition-[width] duration-200 ease-in-out\"\n                style={{ width, zIndex: SIDEBAR_Z_INDEX }}\n            >\n                <nav aria-label={ariaLabel} className=\"flex h-full flex-col\">\n                    {children}\n                </nav>\n                {onToggleCollapse && (\n                    <div\n                        className={TOGGLE_LAYER}\n                        style={{ left: width - TOGGLE_SIZE_PX / 2, zIndex: SIDEBAR_Z_INDEX + 1 }}\n                    >\n                        <Tooltip text={toggleLabel} placement=\"right\" describesTrigger={false}>\n                            <button\n                                type=\"button\"\n                                aria-label={toggleLabel}\n                                onClick={onToggleCollapse}\n                                className={`m-0 inline-flex size-6 cursor-pointer items-center justify-center rounded-lg border border-solid p-0 ${BORDER} bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-secondary,rgb(123,123,123))] [box-shadow:var(--malachite-shadow-default,0px_1px_0px_0px_rgba(0,0,0,0.15))] transition-colors duration-200 hover:border-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))] ${FOCUS_RING}`}\n                            >\n                                {collapsed ? (\n                                    <CaretRightIcon size={12} />\n                                ) : (\n                                    <CaretLeftIcon size={12} />\n                                )}\n                            </button>\n                        </Tooltip>\n                    </div>\n                )}\n            </aside>\n        </SidebarContext.Provider>\n    );\n};\n\nconst Header: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`box-border flex h-14 shrink-0 items-center border-0 border-b border-solid ${BORDER} py-[6px] ${collapsed ? 'px-1' : 'px-2'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Body: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className={`min-h-0 flex-1 overflow-x-hidden overflow-y-auto ${NO_SCROLLBAR}`}>\n        {children}\n    </div>\n);\n\nconst Section: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`flex flex-col gap-[2px] py-[2px] ${collapsed ? 'items-center px-3' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Group: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"my-[2px] flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst GroupItems: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst Search: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div className={`flex pt-5 pb-[18px] ${collapsed ? 'justify-center px-3' : 'px-4'}`}>\n            {children}\n        </div>\n    );\n};\n\nconst Notices: React.FC<{ children: React.ReactNode; 'aria-label': string }> = ({\n    children,\n    'aria-label': ariaLabel,\n}) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div role=\"status\" aria-label={ariaLabel} className=\"flex flex-col gap-2 px-3 pt-4\">\n            {children}\n        </div>\n    );\n};\n\nconst Divider: React.FC = () => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return <hr className={`m-0 my-2 h-0 shrink-0 border-0 border-t border-solid ${BORDER}`} />;\n};\n\nconst Footer: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`mt-1 flex shrink-0 border-0 border-t border-solid ${BORDER} py-3 ${collapsed ? 'justify-center px-2' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\ntype SidebarButtonAttributes = Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    'style' | 'color' | 'children' | 'title' | 'name'\n>;\n\nexport interface SidebarSwitcherProps extends SidebarButtonAttributes {\n    logo: React.ReactNode;\n    title: string;\n    subtitle?: string;\n    /** Shown when `title` is cut off; a node so it can be wrapped. Defaults to `title`. */\n    titleTooltip?: React.ReactNode;\n    /** As `titleTooltip`, for `subtitle`. */\n    subtitleTooltip?: React.ReactNode;\n}\n\nconst Switcher = forwardRef<HTMLButtonElement, SidebarSwitcherProps>(\n    ({ logo, title, subtitle, titleTooltip, subtitleTooltip, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        const open = isExpanded(rest['aria-expanded']);\n        return (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? title : undefined}\n                {...rest}\n                className={`group/switcher m-0 box-border flex h-full w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans text-left ${collapsed ? 'justify-center p-1' : 'justify-between px-4 py-[6px]'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-4\">\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"relative top-[-2.5px] flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-6 [&_img]:object-contain\"\n                    >\n                        {logo}\n                    </span>\n                    {!collapsed && (\n                        <span className=\"flex min-w-0 flex-col gap-1\">\n                            <TruncatedTooltip\n                                text={titleTooltip ?? title}\n                                placement=\"right\"\n                                delay={SIDEBAR_TOOLTIP_DELAY_S}\n                                triggerAs=\"span\"\n                                describesTrigger={false}\n                                suppressed={open}\n                                className=\"text-[length:var(--malachite-font-size-medium,14px)] leading-[14px] font-medium text-[var(--malachite-text-primary,rgb(10,10,10))]\"\n                            >\n                                {title}\n                            </TruncatedTooltip>\n                            {subtitle && (\n                                <TruncatedTooltip\n                                    text={subtitleTooltip ?? subtitle}\n                                    placement=\"right\"\n                                    delay={SIDEBAR_TOOLTIP_DELAY_S}\n                                    triggerAs=\"span\"\n                                    describesTrigger={false}\n                                    suppressed={open}\n                                    className=\"text-[12px] leading-[12px] font-normal text-[var(--malachite-text-secondary,rgb(123,123,123))]\"\n                                >\n                                    {subtitle}\n                                </TruncatedTooltip>\n                            )}\n                        </span>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/switcher:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n    },\n);\nSwitcher.displayName = 'Sidebar.Switcher';\n\nexport interface SidebarAccountProps extends SidebarButtonAttributes {\n    avatar?: React.ReactNode;\n    initials?: string;\n    name: string;\n    /** Collapsed-rail tooltip, and expanded when `name` is cut off; a node so `name` can be wrapped.\n     *  Should read as `name`. Defaults to `name`, `false` hides it; none when `name` is empty. */\n    tooltip?: React.ReactNode;\n}\n\nconst INITIALS = `inline-flex items-center justify-center rounded-[var(--malachite-radius-md,6px)] border border-solid ${BORDER} bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_20%,transparent)] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_10%,transparent)] px-1 py-[3px] text-[length:var(--malachite-font-size-small,13px)] leading-[12px] font-semibold text-[var(--malachite-text-secondary,rgb(123,123,123))]`;\n\nconst Account = forwardRef<HTMLButtonElement, SidebarAccountProps>(\n    ({ avatar, initials, name, tooltip, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        const button = (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? name : undefined}\n                {...rest}\n                className={`group/account m-0 box-border flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans ${collapsed ? 'justify-center p-0' : 'justify-between px-2'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-3\">\n                    <span aria-hidden={collapsed ? undefined : true} className=\"flex shrink-0\">\n                        {avatar ?? (initials ? <span className={INITIALS}>{initials}</span> : null)}\n                    </span>\n                    {!collapsed && (\n                        <TruncatedTooltip\n                            text={name ? (tooltip ?? name) : undefined}\n                            placement=\"right\"\n                            delay={SIDEBAR_TOOLTIP_DELAY_S}\n                            triggerAs=\"span\"\n                            describesTrigger={false}\n                            suppressed={isExpanded(rest['aria-expanded'])}\n                            className=\"min-w-0 text-[length:var(--malachite-font-size-medium,14px)] leading-[22px] font-semibold text-[var(--malachite-text-primary,rgb(10,10,10))]\"\n                        >\n                            {name}\n                        </TruncatedTooltip>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/account:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n        return collapsed ? (\n            <Tooltip\n                text={name ? (tooltip ?? name) : undefined}\n                placement=\"right\"\n                delay={SIDEBAR_TOOLTIP_DELAY_S}\n                describesTrigger={false}\n                suppressed={isExpanded(rest['aria-expanded'])}\n            >\n                {button}\n            </Tooltip>\n        ) : (\n            button\n        );\n    },\n);\nAccount.displayName = 'Sidebar.Account';\n\nconst Usage: React.FC<UsageCardProps> = (props) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div className=\"shrink-0 px-3 pt-3 pb-4\">\n            <UsageCard {...props} />\n        </div>\n    );\n};\n\nconst Panel: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div\n        className=\"flex flex-col\"\n        style={{ width: SIDEBAR_POPOVER_WIDTH_PX - 2 * POPOVER_BORDER_PX }}\n    >\n        {children}\n    </div>\n);\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n    Header,\n    Body,\n    Section,\n    Group,\n    GroupItems,\n    Search,\n    Notices,\n    Divider,\n    Footer,\n    Switcher,\n    Account,\n    Usage,\n    Panel,\n});\n\nexport default Sidebar;\n"],"names":["useSidebar","useSidebarCollapsed","POPOVER_BORDER_PX","TOGGLE_SIZE_PX","CHEVRONS","TOGGLE_LAYER","SidebarRoot","collapsed","onToggleCollapse","expandLabel","collapseLabel","ariaLabel","children","toggleLabel","context","useMemo","width","SIDEBAR_WIDTH_PX","jsx","SidebarContext","jsxs","SIDEBAR_Z_INDEX","Tooltip","BORDER","FOCUS_RING","CaretRightIcon","CaretLeftIcon","Header","Body","NO_SCROLLBAR","Section","Group","GroupItems","Search","Notices","Divider","Footer","Switcher","forwardRef","logo","title","subtitle","titleTooltip","subtitleTooltip","className","rest","ref","open","isExpanded","TruncatedTooltip","SIDEBAR_TOOLTIP_DELAY_S","ChevronsUpDownIcon","INITIALS","Account","avatar","initials","name","tooltip","button","Usage","props","UsageCard","Panel","SIDEBAR_POPOVER_WIDTH_PX","Sidebar"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport CaretLeftIcon from './CustomIcons/CaretLeftIcon';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport ChevronsUpDownIcon from './CustomIcons/ChevronsUpDownIcon';\nimport Tooltip from './Tooltip';\nimport TruncatedTooltip from './TruncatedTooltip';\nimport UsageCard, { type UsageCardProps } from './UsageCard';\nimport { isExpanded } from './ariaState';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING } from './focusRing';\nimport {\n    SIDEBAR_POPOVER_WIDTH_PX,\n    SIDEBAR_TOOLTIP_DELAY_S,\n    SIDEBAR_WIDTH_PX,\n    SIDEBAR_Z_INDEX,\n    SidebarContext,\n    useSidebarCollapsed,\n} from './sidebarContext';\n\nconst useSidebar = () => ({ collapsed: useSidebarCollapsed() });\n\nconst POPOVER_BORDER_PX = 1;\nconst TOGGLE_SIZE_PX = 24;\nconst CHEVRONS = { width: 8, height: 14 } as const;\n\nexport interface SidebarProps {\n    collapsed?: boolean;\n    onToggleCollapse?: () => void;\n    expandLabel?: string;\n    collapseLabel?: string;\n    'aria-label'?: string;\n    children: React.ReactNode;\n}\n\n// Hidden by opacity, not visibility, so the half over the page can be hovered; touch always shows it.\nconst TOGGLE_LAYER =\n    'fixed top-[25px] opacity-0 [will-change:opacity] transition-[left,opacity] duration-200 ease-in-out group-hover/sidebar:opacity-100 group-has-[:focus-visible]/sidebar:opacity-100 [@media(hover:none)]:opacity-100';\n\n// The rows' ground, which a `NavItem` puts under its tag. A context channel, not a theme token.\nconst NAVITEM_GROUND = {\n    '--malachite-ctx-navitem-ground': 'var(--malachite-card-sunken-background, rgb(250,250,250))',\n} as React.CSSProperties;\n\nconst SidebarRoot: React.FC<SidebarProps> = ({\n    collapsed = false,\n    onToggleCollapse,\n    expandLabel = 'Expand menu',\n    collapseLabel = 'Collapse menu',\n    'aria-label': ariaLabel = 'Main',\n    children,\n}) => {\n    const toggleLabel = collapsed ? expandLabel : collapseLabel;\n    const context = useMemo(() => ({ collapsed }), [collapsed]);\n    const width = collapsed ? SIDEBAR_WIDTH_PX.collapsed : SIDEBAR_WIDTH_PX.expanded;\n\n    return (\n        <SidebarContext.Provider value={context}>\n            <aside\n                className=\"group/sidebar fixed top-0 bottom-0 left-0 box-border pt-[9px] bg-[var(--malachite-card-sunken-background,rgb(250,250,250))] transition-[width] duration-200 ease-in-out\"\n                style={{ width, zIndex: SIDEBAR_Z_INDEX, ...NAVITEM_GROUND }}\n            >\n                <nav aria-label={ariaLabel} className=\"flex h-full flex-col\">\n                    {children}\n                </nav>\n                {onToggleCollapse && (\n                    <div\n                        className={TOGGLE_LAYER}\n                        style={{ left: width - TOGGLE_SIZE_PX / 2, zIndex: SIDEBAR_Z_INDEX + 1 }}\n                    >\n                        <Tooltip text={toggleLabel} placement=\"right\" describesTrigger={false}>\n                            <button\n                                type=\"button\"\n                                aria-label={toggleLabel}\n                                onClick={onToggleCollapse}\n                                className={`m-0 inline-flex size-6 cursor-pointer items-center justify-center rounded-lg border border-solid p-0 ${BORDER} bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-secondary,rgb(123,123,123))] [box-shadow:var(--malachite-shadow-default,0px_1px_0px_0px_rgba(0,0,0,0.15))] transition-colors duration-200 hover:border-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))] ${FOCUS_RING}`}\n                            >\n                                {collapsed ? (\n                                    <CaretRightIcon size={12} />\n                                ) : (\n                                    <CaretLeftIcon size={12} />\n                                )}\n                            </button>\n                        </Tooltip>\n                    </div>\n                )}\n            </aside>\n        </SidebarContext.Provider>\n    );\n};\n\nconst Header: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`box-border flex h-14 shrink-0 items-center border-0 border-b border-solid ${BORDER} py-[6px] ${collapsed ? 'px-1' : 'px-2'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Body: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className={`min-h-0 flex-1 overflow-x-hidden overflow-y-auto ${NO_SCROLLBAR}`}>\n        {children}\n    </div>\n);\n\nconst Section: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`flex flex-col gap-[2px] py-[2px] ${collapsed ? 'items-center px-3' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Group: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"my-[2px] flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst GroupItems: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst Search: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div className={`flex pt-5 pb-[18px] ${collapsed ? 'justify-center px-3' : 'px-4'}`}>\n            {children}\n        </div>\n    );\n};\n\nconst Notices: React.FC<{ children: React.ReactNode; 'aria-label': string }> = ({\n    children,\n    'aria-label': ariaLabel,\n}) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div role=\"status\" aria-label={ariaLabel} className=\"flex flex-col gap-2 px-3 pt-4\">\n            {children}\n        </div>\n    );\n};\n\nconst Divider: React.FC = () => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return <hr className={`m-0 my-2 h-0 shrink-0 border-0 border-t border-solid ${BORDER}`} />;\n};\n\nconst Footer: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`mt-1 flex shrink-0 border-0 border-t border-solid ${BORDER} py-3 ${collapsed ? 'justify-center px-2' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\ntype SidebarButtonAttributes = Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    'style' | 'color' | 'children' | 'title' | 'name'\n>;\n\nexport interface SidebarSwitcherProps extends SidebarButtonAttributes {\n    logo: React.ReactNode;\n    title: string;\n    subtitle?: string;\n    /** Shown when `title` is cut off; a node so it can be wrapped. Defaults to `title`. */\n    titleTooltip?: React.ReactNode;\n    /** As `titleTooltip`, for `subtitle`. */\n    subtitleTooltip?: React.ReactNode;\n}\n\nconst Switcher = forwardRef<HTMLButtonElement, SidebarSwitcherProps>(\n    ({ logo, title, subtitle, titleTooltip, subtitleTooltip, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        const open = isExpanded(rest['aria-expanded']);\n        return (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? title : undefined}\n                {...rest}\n                className={`group/switcher m-0 box-border flex h-full w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans text-left ${collapsed ? 'justify-center p-1' : 'justify-between px-4 py-[6px]'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-4\">\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"relative top-[-2.5px] flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-6 [&_img]:object-contain\"\n                    >\n                        {logo}\n                    </span>\n                    {!collapsed && (\n                        <span className=\"flex min-w-0 flex-col gap-1\">\n                            <TruncatedTooltip\n                                text={titleTooltip ?? title}\n                                placement=\"right\"\n                                delay={SIDEBAR_TOOLTIP_DELAY_S}\n                                triggerAs=\"span\"\n                                describesTrigger={false}\n                                suppressed={open}\n                                className=\"text-[length:var(--malachite-font-size-medium,14px)] leading-[14px] font-medium text-[var(--malachite-text-primary,rgb(10,10,10))]\"\n                            >\n                                {title}\n                            </TruncatedTooltip>\n                            {subtitle && (\n                                <TruncatedTooltip\n                                    text={subtitleTooltip ?? subtitle}\n                                    placement=\"right\"\n                                    delay={SIDEBAR_TOOLTIP_DELAY_S}\n                                    triggerAs=\"span\"\n                                    describesTrigger={false}\n                                    suppressed={open}\n                                    className=\"text-[12px] leading-[12px] font-normal text-[var(--malachite-text-secondary,rgb(123,123,123))]\"\n                                >\n                                    {subtitle}\n                                </TruncatedTooltip>\n                            )}\n                        </span>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/switcher:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n    },\n);\nSwitcher.displayName = 'Sidebar.Switcher';\n\nexport interface SidebarAccountProps extends SidebarButtonAttributes {\n    avatar?: React.ReactNode;\n    initials?: string;\n    name: string;\n    /** Collapsed-rail tooltip, and expanded when `name` is cut off; a node so `name` can be wrapped.\n     *  Should read as `name`. Defaults to `name`, `false` hides it; none when `name` is empty. */\n    tooltip?: React.ReactNode;\n}\n\nconst INITIALS = `inline-flex items-center justify-center rounded-[var(--malachite-radius-md,6px)] border border-solid ${BORDER} bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_20%,transparent)] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_10%,transparent)] px-1 py-[3px] text-[length:var(--malachite-font-size-small,13px)] leading-[12px] font-semibold text-[var(--malachite-text-secondary,rgb(123,123,123))]`;\n\nconst Account = forwardRef<HTMLButtonElement, SidebarAccountProps>(\n    ({ avatar, initials, name, tooltip, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        const button = (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? name : undefined}\n                {...rest}\n                className={`group/account m-0 box-border flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans ${collapsed ? 'justify-center p-0' : 'justify-between px-2'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-3\">\n                    <span aria-hidden={collapsed ? undefined : true} className=\"flex shrink-0\">\n                        {avatar ?? (initials ? <span className={INITIALS}>{initials}</span> : null)}\n                    </span>\n                    {!collapsed && (\n                        <TruncatedTooltip\n                            text={name ? (tooltip ?? name) : undefined}\n                            placement=\"right\"\n                            delay={SIDEBAR_TOOLTIP_DELAY_S}\n                            triggerAs=\"span\"\n                            describesTrigger={false}\n                            suppressed={isExpanded(rest['aria-expanded'])}\n                            className=\"min-w-0 text-[length:var(--malachite-font-size-medium,14px)] leading-[22px] font-semibold text-[var(--malachite-text-primary,rgb(10,10,10))]\"\n                        >\n                            {name}\n                        </TruncatedTooltip>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/account:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n        return collapsed ? (\n            <Tooltip\n                text={name ? (tooltip ?? name) : undefined}\n                placement=\"right\"\n                delay={SIDEBAR_TOOLTIP_DELAY_S}\n                describesTrigger={false}\n                suppressed={isExpanded(rest['aria-expanded'])}\n            >\n                {button}\n            </Tooltip>\n        ) : (\n            button\n        );\n    },\n);\nAccount.displayName = 'Sidebar.Account';\n\nconst Usage: React.FC<UsageCardProps> = (props) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div className=\"shrink-0 px-3 pt-3 pb-4\">\n            <UsageCard {...props} />\n        </div>\n    );\n};\n\nconst Panel: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div\n        className=\"flex flex-col\"\n        style={{ width: SIDEBAR_POPOVER_WIDTH_PX - 2 * POPOVER_BORDER_PX }}\n    >\n        {children}\n    </div>\n);\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n    Header,\n    Body,\n    Section,\n    Group,\n    GroupItems,\n    Search,\n    Notices,\n    Divider,\n    Footer,\n    Switcher,\n    Account,\n    Usage,\n    Panel,\n});\n\nexport default Sidebar;\n"],"names":["useSidebar","useSidebarCollapsed","POPOVER_BORDER_PX","TOGGLE_SIZE_PX","CHEVRONS","TOGGLE_LAYER","NAVITEM_GROUND","SidebarRoot","collapsed","onToggleCollapse","expandLabel","collapseLabel","ariaLabel","children","toggleLabel","context","useMemo","width","SIDEBAR_WIDTH_PX","jsx","SidebarContext","jsxs","SIDEBAR_Z_INDEX","Tooltip","BORDER","FOCUS_RING","CaretRightIcon","CaretLeftIcon","Header","Body","NO_SCROLLBAR","Section","Group","GroupItems","Search","Notices","Divider","Footer","Switcher","forwardRef","logo","title","subtitle","titleTooltip","subtitleTooltip","className","rest","ref","open","isExpanded","TruncatedTooltip","SIDEBAR_TOOLTIP_DELAY_S","ChevronsUpDownIcon","INITIALS","Account","avatar","initials","name","tooltip","button","Usage","props","UsageCard","Panel","SIDEBAR_POPOVER_WIDTH_PX","Sidebar"],"mappings":"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"}