@boost33/ui 0.7.1 → 0.8.0-next.1

package/dist/components/TopBar/TopBar.js

@@ -1,12 +1,29 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import r from "./TopBar.module.css.js";
-function m({ breadcrumb: a, actions: s }) {
-  return /* @__PURE__ */ i("div", { className: r.bar, children: [
-    /* @__PURE__ */ e("div", { className: r.breadcrumb, children: a }),
-    s != null && /* @__PURE__ */ e("div", { className: r.actions, children: s })
+import { jsxs as r, Fragment as c, jsx as n } from "react/jsx-runtime";
+import { warnDeprecatedProp as u } from "../../deprecated-prop-warning.js";
+import { resolveTopBarLabels as h } from "./labels.js";
+import l from "./TopBar.module.css.js";
+function T({ sidebarToggle: o, start: i, switcher: e, tokens: a, actions: d, labels: t, breadcrumb: m }) {
+  m != null && u("TopBar.breadcrumb");
+  const s = h(t), p = e != null || a != null;
+  return /* @__PURE__ */ r("div", { className: l.bar, children: [
+    /* @__PURE__ */ r("div", { className: l.start, children: [
+      o,
+      i
+    ] }),
+    p && /* @__PURE__ */ r("div", { className: l.centre, children: [
+      e != null && /* @__PURE__ */ r(c, { children: [
+        /* @__PURE__ */ n("span", { className: l.label, children: s.switchTools }),
+        e
+      ] }),
+      a != null && /* @__PURE__ */ r(c, { children: [
+        /* @__PURE__ */ n("span", { className: l.label, "data-after-switcher": e != null ? "true" : void 0, children: s.checkTokens }),
+        a
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { className: l.end, children: d })
   ] });
 }
 export {
-  m as TopBar
+  T as TopBar
 };
 //# sourceMappingURL=TopBar.js.map

package/dist/components/TopBar/TopBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.js","sources":["../../../src/components/TopBar/TopBar.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport styles from './TopBar.module.css'\n\nexport interface TopBarProps {\n  /** The breadcrumb naming the current location, on the left of the bar. */\n  breadcrumb: ReactNode\n  /** Shell actions on the right -- search, notifications, the account. Omit to leave the right empty. */\n  actions?: ReactNode\n}\n\nexport function TopBar({ breadcrumb, actions }: TopBarProps) {\n  return (\n    <div className={styles.bar}>\n      <div className={styles.breadcrumb}>{breadcrumb}</div>\n      {actions != null && <div className={styles.actions}>{actions}</div>}\n    </div>\n  )\n}\n"],"names":["TopBar","breadcrumb","actions","jsxs","styles","jsx"],"mappings":";;AAUO,SAASA,EAAO,EAAE,YAAAC,GAAY,SAAAC,KAAwB;AAC3D,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,KACrB,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,YAAa,UAAAH,GAAW;AAAA,IAC9CC,KAAW,QAAQ,gBAAAG,EAAC,SAAI,WAAWD,EAAO,SAAU,UAAAF,EAAA,CAAQ;AAAA,EAAA,GAC/D;AAEJ;"}
+{"version":3,"file":"TopBar.js","sources":["../../../src/components/TopBar/TopBar.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { warnDeprecatedProp } from '../../deprecated-prop-warning'\nimport { resolveTopBarLabels, type TopBarLabels } from './labels'\nimport styles from './TopBar.module.css'\n\nexport interface TopBarProps {\n  /**\n   * The control that collapses the sidebar to its 56px rail and back, at the\n   * far left of the bar, before the mark (B33-1712). A slot: the product's own\n   * button, which owns the collapsed state.\n   *\n   * It has a slot of its own because the bar stopped drawing `breadcrumb` in\n   * 0.8.0, and a consumer that kept its toggle inside the breadcrumb -- the\n   * Wallet did -- would otherwise lose its only way into and out of the rail on\n   * upgrade, silently: the pixel diff passed the bar at 0.19% with the toggle\n   * gone. No board draws it; the rail keeps working with no new design.\n   */\n  sidebarToggle?: ReactNode\n  /**\n   * The left of the bar: the Boost33 mark and the organisation's pill, as the 3\n   * Nov 2026 redesign draws it (B33-1712, board 20). A slot. Inside `AppShell`\n   * the shell fills it from its own `mark`, `hubHref` and `org` props, so a\n   * consumer of the shell does not set this.\n   */\n  start?: ReactNode\n  /**\n   * The app switcher, at the centre of the bar after its \"Switch Tools →\"\n   * label. A slot: pass `AppSwitcher`. Omit it and neither it nor its label is\n   * drawn. Inside `AppShell`, the shell's `switcher` prop lands here.\n   */\n  switcher?: ReactNode\n  /**\n   * The token chip, after the switcher and its \"Check Your Tokens →\" label. A\n   * slot: pass `WalletChip` with `placement=\"topbar\"`. Omit it and neither it\n   * nor its label is drawn. Inside `AppShell`, the shell's `wallet` prop lands\n   * here.\n   */\n  tokens?: ReactNode\n  /**\n   * The right of the bar: the notification button and the account avatar\n   * (board 20). A slot -- the product's own, or the package's\n   * `NotificationButton` beside the consumer's avatar.\n   *\n   * Search is not here and nothing replaces it: Jamal removed it on 3 Nov 2026\n   * until the feature is built (B33-1710), and the CommandPalette that would\n   * open from it is left out of 0.8.0 with no trigger and no shortcut.\n   */\n  actions?: ReactNode\n  /** The centre group's two labels. Each field defaults to English. */\n  labels?: Partial<TopBarLabels>\n  /**\n   * Was the breadcrumb on the left of the bar. **Not drawn since 0.8.0**: the\n   * redesign puts the mark and the organisation there, and the page's own\n   * `PageHeader` names where you are. Optional so an existing call site still\n   * compiles.\n   *\n   * @deprecated Rendered nowhere since 0.8.0 (B33-1712). Stop passing it; in\n   * development, passing it logs a console warning once.\n   */\n  breadcrumb?: ReactNode\n}\n\n// The bar across the top of every screen (B33-1712). Three regions: the mark\n// and organisation on the left, the switcher and token chip in a centred group,\n// and the product's actions on the right. Left and right take equal shares of\n// what the centre leaves, which is what holds the centre group in the middle of\n// the bar whatever either side holds.\n//\n// A Server Component: no state, no handlers. The two controls in the centre are\n// client components passed in as slots.\nexport function TopBar({ sidebarToggle, start, switcher, tokens, actions, labels, breadcrumb }: TopBarProps) {\n  if (breadcrumb != null) warnDeprecatedProp('TopBar.breadcrumb')\n  const t = resolveTopBarLabels(labels)\n  const hasCentre = switcher != null || tokens != null\n\n  return (\n    <div className={styles.bar}>\n      <div className={styles.start}>\n        {sidebarToggle}\n        {start}\n      </div>\n      {hasCentre && (\n        <div className={styles.centre}>\n          {switcher != null && (\n            <>\n              <span className={styles.label}>{t.switchTools}</span>\n              {switcher}\n            </>\n          )}\n          {tokens != null && (\n            <>\n              {/* The second label keeps 32px clear of the switcher, so each\n                  label reads as belonging to the control after it, not the one\n                  before it (board 20). With no switcher there is nothing to\n                  keep clear of, and the padding goes. */}\n              <span className={styles.label} data-after-switcher={switcher != null ? 'true' : undefined}>\n                {t.checkTokens}\n              </span>\n              {tokens}\n            </>\n          )}\n        </div>\n      )}\n      <div className={styles.end}>{actions}</div>\n    </div>\n  )\n}\n"],"names":["TopBar","sidebarToggle","start","switcher","tokens","actions","labels","breadcrumb","warnDeprecatedProp","t","resolveTopBarLabels","hasCentre","jsxs","styles","Fragment","jsx"],"mappings":";;;;AAsEO,SAASA,EAAO,EAAE,eAAAC,GAAe,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,GAAQ,YAAAC,KAA2B;AAC3G,EAAIA,KAAc,QAAMC,EAAmB,mBAAmB;AAC9D,QAAMC,IAAIC,EAAoBJ,CAAM,GAC9BK,IAAYR,KAAY,QAAQC,KAAU;AAEhD,SACE,gBAAAQ,EAAC,OAAA,EAAI,WAAWC,EAAO,KACrB,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,OACpB,UAAA;AAAA,MAAAZ;AAAA,MACAC;AAAA,IAAA,GACH;AAAA,IACCS,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,QACpB,UAAA;AAAA,MAAAV,KAAY,QACX,gBAAAS,EAAAE,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWF,EAAO,OAAQ,YAAE,aAAY;AAAA,QAC7CV;AAAA,MAAA,GACH;AAAA,MAEDC,KAAU,QACT,gBAAAQ,EAAAE,GAAA,EAKE,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWF,EAAO,OAAO,uBAAqBV,KAAY,OAAO,SAAS,QAC7E,UAAAM,EAAE,YAAA,CACL;AAAA,QACCL;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IAEF,gBAAAW,EAAC,OAAA,EAAI,WAAWF,EAAO,KAAM,UAAAR,EAAA,CAAQ;AAAA,EAAA,GACvC;AAEJ;"}

package/dist/components/TopBar/TopBar.module.css.js

@@ -1,12 +1,16 @@
-const b = "_bar_194bx_7", a = "_breadcrumb_194bx_20", c = "_actions_194bx_33", r = {
-  bar: b,
-  breadcrumb: a,
-  actions: c
+const t = "_bar_1lxv8_9", e = "_start_1lxv8_25", _ = "_end_1lxv8_26", l = "_centre_1lxv8_45", n = "_label_1lxv8_54", s = {
+  bar: t,
+  start: e,
+  end: _,
+  centre: l,
+  label: n
 };
 export {
-  c as actions,
-  b as bar,
-  a as breadcrumb,
-  r as default
+  t as bar,
+  l as centre,
+  s as default,
+  _ as end,
+  n as label,
+  e as start
 };
 //# sourceMappingURL=TopBar.module.css.js.map

package/dist/components/TopBar/TopBar.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"TopBar.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/TopBar/labels.d.ts

@@ -0,0 +1,20 @@
+/** Every user-facing string the top bar renders itself. */
+export interface TopBarLabels {
+    /**
+     * The text before the app switcher in the centre group (B33-1712, boards 18,
+     * 20 and 22 of the 3 Nov 2026 redesign). Text, not a control: it says what the
+     * control beside it is for. The arrow is part of the string, so a consumer
+     * writing right-to-left can turn it. Default "Switch Tools →".
+     */
+    switchTools: string;
+    /** The text before the token chip, on the same terms. Default "Check Your Tokens →". */
+    checkTokens: string;
+}
+export declare const defaultTopBarLabels: TopBarLabels;
+/**
+ * Merge a consumer's partial `labels` onto the English defaults, treating an
+ * explicitly-`undefined` field as unsupplied, so a missed translation key falls
+ * back to English rather than blanking the label -- the same resolution
+ * `resolveAppSwitcherLabels` performs (B33-873).
+ */
+export declare function resolveTopBarLabels(labels?: Partial<TopBarLabels>): TopBarLabels;

package/dist/components/TopBar/labels.js

@@ -0,0 +1,15 @@
+const t = {
+  switchTools: "Switch Tools →",
+  checkTokens: "Check Your Tokens →"
+};
+function r(e) {
+  const o = Object.fromEntries(
+    Object.entries(e ?? {}).filter(([, s]) => s !== void 0)
+  );
+  return { ...t, ...o };
+}
+export {
+  t as defaultTopBarLabels,
+  r as resolveTopBarLabels
+};
+//# sourceMappingURL=labels.js.map

package/dist/components/TopBar/labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels.js","sources":["../../../src/components/TopBar/labels.ts"],"sourcesContent":["// The top bar's own user-facing words, each a prop with an English default --\n// the same pattern AppSwitcherLabels and WalletChipLabels follow, for the same\n// reason: the first consumers are French-default, and the package renders what\n// it is given rather than taking an i18n dependency (B33-849).\n\n/** Every user-facing string the top bar renders itself. */\nexport interface TopBarLabels {\n  /**\n   * The text before the app switcher in the centre group (B33-1712, boards 18,\n   * 20 and 22 of the 3 Nov 2026 redesign). Text, not a control: it says what the\n   * control beside it is for. The arrow is part of the string, so a consumer\n   * writing right-to-left can turn it. Default \"Switch Tools →\".\n   */\n  switchTools: string\n  /** The text before the token chip, on the same terms. Default \"Check Your Tokens →\". */\n  checkTokens: string\n}\n\nexport const defaultTopBarLabels: TopBarLabels = {\n  switchTools: 'Switch Tools →',\n  checkTokens: 'Check Your Tokens →',\n}\n\n/**\n * Merge a consumer's partial `labels` onto the English defaults, treating an\n * explicitly-`undefined` field as unsupplied, so a missed translation key falls\n * back to English rather than blanking the label -- the same resolution\n * `resolveAppSwitcherLabels` performs (B33-873).\n */\nexport function resolveTopBarLabels(labels?: Partial<TopBarLabels>): TopBarLabels {\n  const supplied = Object.fromEntries(\n    Object.entries(labels ?? {}).filter(([, value]) => value !== undefined),\n  ) as Partial<TopBarLabels>\n  return { ...defaultTopBarLabels, ...supplied }\n}\n"],"names":["defaultTopBarLabels","resolveTopBarLabels","labels","supplied","value"],"mappings":"AAkBO,MAAMA,IAAoC;AAAA,EAC/C,aAAa;AAAA,EACb,aAAa;AACf;AAQO,SAASC,EAAoBC,GAA8C;AAChF,QAAMC,IAAW,OAAO;AAAA,IACtB,OAAO,QAAQD,KAAU,EAAE,EAAE,OAAO,CAAC,CAAA,EAAGE,CAAK,MAAMA,MAAU,MAAS;AAAA,EAAA;AAExE,SAAO,EAAE,GAAGJ,GAAqB,GAAGG,EAAA;AACtC;"}

package/dist/components/WalletChip/WalletChip.d.ts

@@ -1,3 +1,4 @@
+import { ElementType } from 'react';
 import { WalletChipLabels } from './labels';
 /**
  * The props that say nothing about a balance, so both states take them
@@ -5,6 +6,31 @@ import { WalletChipLabels } from './labels';
  * number formats it renders with.
  */
 interface WalletChipChromeProps {
+    /**
+     * Where the chip is drawn. `'sidebar'`, the default, is the card it has always
+     * been, pinned at the sidebar's foot. `'topbar'` is the 3 Nov 2026 redesign's
+     * token chip (B33-1712, boards 20 and 21): a 32px pill in the top bar, drawn
+     * like the app switcher, that opens a popover with the breakdown.
+     *
+     * One component in two placements rather than a second component, because the
+     * figures, the bar's rules and every word are the same chip's (CLAUDE.md:
+     * build once, add a prop). `collapsed` applies to the sidebar placement only;
+     * the top bar has no rail.
+     */
+    placement?: 'sidebar' | 'topbar';
+    /**
+     * Where the popover's "Open" link goes -- the Wallet. `placement="topbar"`
+     * only. Omit it and the popover draws no link. The consumer supplies the URL;
+     * Identity owns where the Wallet lives.
+     */
+    walletHref?: string;
+    /**
+     * The element the popover's "Open" link renders through, so it routes
+     * client-side with the locale prefix intact (ADR-0011). Defaults to `a`.
+     */
+    linkComponent?: ElementType;
+    /** Render the top-bar popover open on first paint -- the specimen's open state. */
+    defaultOpen?: boolean;
     /** The 56px rail. Abbreviates the balance and turns the split on its side. */
     collapsed?: boolean;
     /**
@@ -76,6 +102,8 @@ export interface WalletChipKnownProps extends WalletChipChromeProps {
      * required here and forbidden in {@link WalletChipUnknownProps}.
      */
     unknown?: false;
+    /** Absent or `false`: see {@link WalletChipTotalOnlyProps}. */
+    totalOnly?: false;
     /** Remaining granted tokens. Granted burns first and expires. */
     granted: number;
     /** Remaining purchased tokens. Purchased never expires. */
@@ -156,6 +184,8 @@ export interface WalletChipKnownProps extends WalletChipChromeProps {
 export interface WalletChipUnknownProps extends WalletChipChromeProps {
     /** The balance could not be confirmed. Renders as unknown, never as zero. */
     unknown: true;
+    totalOnly?: false;
+    balance?: never;
     granted?: never;
     purchased?: never;
     grantCycle?: never;
@@ -178,6 +208,51 @@ export interface WalletChipUnknownProps extends WalletChipChromeProps {
  *   the members instead -- `Omit<WalletChipKnownProps, 'onTopUp'> |
  *   Omit<WalletChipUnknownProps, 'onTopUp'>` -- which is why both are exported.
  */
-export type WalletChipProps = WalletChipKnownProps | WalletChipUnknownProps;
-export declare function WalletChip({ granted, purchased, grantCycle, burnedFraction, grantExpires, burnNote, unknown, collapsed, onTopUp, labels, locale }: WalletChipProps): import("react").JSX.Element;
+export type WalletChipProps = WalletChipKnownProps | WalletChipUnknownProps | WalletChipTotalOnlyProps;
+/**
+ * The top-bar chip with a real total and no drawable split (B33-1712). Debits
+ * draw the grant first, then purchased, and may run a set share past zero (the
+ * Ledger's overdraft); credits add only to the bucket they name and never pay a
+ * negative one off. So the Ledger can report a bucket below zero -- granted 0 /
+ * purchased -40 (overdrawn, total -40), or granted 1000 / purchased -40 after
+ * the month's grant lands (total 960, for the rest of the month). A two-segment
+ * bar cannot draw a negative, and clamping it to zero would draw a split nobody
+ * has: a split invented by the interface. So this state takes **the total and
+ * no split**, and draws no bar and no granted / purchased legend.
+ *
+ * Below zero the figure is the distance past zero, positive, in --color-danger,
+ * with the words "past zero" where a minus sign would be -- the Wallet's own
+ * past-zero screen (boostledger, Paper 201 screen 03), followed rather than
+ * inventing a third look. Nothing is broken and the copy does not say it is;
+ * what happens next is the consumer's `burnNote`, because the overdraft limit is
+ * the Ledger's. At zero or above it is the plain balance.
+ *
+ * **Top bar only.** The sidebar card has no drawing for this and the redesigned
+ * shell does not render it, so the type requires `placement="topbar"` rather
+ * than leaving the card to guess. No board draws either form: they are new
+ * undrawn states for the person at the gate to judge.
+ */
+export interface WalletChipTotalOnlyProps extends WalletChipChromeProps {
+    placement: 'topbar';
+    totalOnly: true;
+    unknown?: false;
+    /**
+     * The balance, signed, in whole tokens: `granted + purchased` from the
+     * Ledger's signed figures, which its single balance row guarantees is the
+     * balance.
+     */
+    balance: number;
+    /**
+     * What happens next, preformatted, e.g. "Work carries on for another 930
+     * tokens, then paid actions stop." The consumer's, because the overdraft limit
+     * is the Ledger's, not the chip's.
+     */
+    burnNote?: string;
+    granted?: never;
+    purchased?: never;
+    grantCycle?: never;
+    burnedFraction?: never;
+    grantExpires?: never;
+}
+export declare function WalletChip(props: WalletChipProps): import("react").JSX.Element;
 export {};

package/dist/components/WalletChip/WalletChip.js

@@ -1,71 +1,163 @@
 "use client";
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import a from "./WalletChip.module.css.js";
-import { thousandsFigure as A, formatTokens as m, DEFAULT_WALLET_LOCALE as M } from "./format.js";
-import { WalletMark as R, RetryMark as W } from "./icons.js";
-import { resolveWalletChipLabels as w } from "./labels.js";
-const y = 0.8, F = "var(--spacing-wallet-segment-min)";
-function g(s, r) {
-  const t = r > 0 ? s / r * 100 : 0;
-  return s <= 0 ? `${t}%` : `max(${t}%, ${F})`;
+import { jsx as a, jsxs as n, Fragment as P } from "react/jsx-runtime";
+import { useAnchoredOverlay as U } from "../../anchored-overlay.js";
+import { Chevron as $ } from "../AppSwitcher/icons.js";
+import y from "../../buttons.module.css.js";
+import e from "./WalletChip.module.css.js";
+import { formatTokens as o, DEFAULT_WALLET_LOCALE as k, thousandsFigure as w } from "./format.js";
+import { WalletMark as x, RetryMark as O } from "./icons.js";
+import { resolveWalletChipLabels as A } from "./labels.js";
+const E = 0.8, G = "var(--spacing-wallet-segment-min)";
+function L(i, l) {
+  const t = l > 0 ? i / l * 100 : 0;
+  return i <= 0 ? `${t}%` : `max(${t}%, ${G})`;
 }
-function B({ granted: s, purchased: r, cycleTotal: t, tone: h, label: o }) {
-  return /* @__PURE__ */ l("div", { className: a.bar, "data-tone": h, role: "img", "aria-label": o, children: [
-    /* @__PURE__ */ e("span", { className: a.segmentGranted, "data-testid": "segment-granted", style: { width: g(s, t) } }),
-    /* @__PURE__ */ e("span", { className: a.segmentPurchased, "data-testid": "segment-purchased", style: { width: g(r, t) } })
+function R({ granted: i, purchased: l, cycleTotal: t, tone: p, label: r }) {
+  return /* @__PURE__ */ n("div", { className: e.bar, "data-tone": p, role: "img", "aria-label": r, children: [
+    /* @__PURE__ */ a("span", { className: e.segmentGranted, "data-testid": "segment-granted", style: { width: L(i, t) } }),
+    /* @__PURE__ */ a("span", { className: e.segmentPurchased, "data-testid": "segment-purchased", style: { width: L(l, t) } })
   ] });
 }
-function $({ granted: s = 0, purchased: r = 0, grantCycle: t, burnedFraction: h, grantExpires: o, burnNote: p, unknown: n = !1, collapsed: x = !1, onTopUp: u, labels: E, locale: d = M }) {
-  const i = w(E), b = () => i.bar(m(s, d), m(r, d), m(s + r, d)), v = s + r, f = (t ?? s) + r, U = t !== void 0 && t > 0 ? (t - s) / t : 0, L = h ?? U, c = !n && L >= y;
-  if (x) {
-    const N = n ? void 0 : i.railFigure(A(v, d));
-    return /* @__PURE__ */ l("div", { className: a.rail, role: "group", "aria-label": N === void 0 ? i.railBalanceUnknown : i.railBalance(N), tabIndex: 0, children: [
-      /* @__PURE__ */ e(R, { className: a.railIcon }),
-      /* @__PURE__ */ e("span", { className: a.railFigure, children: N ?? "—" }),
-      n ? /* @__PURE__ */ e("span", { className: a.srOnly, children: i.railUnknown }) : /* @__PURE__ */ e(B, { granted: s, purchased: r, cycleTotal: f, tone: c ? "threshold" : "rest", label: b() })
+function J(i) {
+  return i.totalOnly === !0 ? /* @__PURE__ */ a(W, { ...i }) : i.placement === "topbar" ? /* @__PURE__ */ a(M, { ...i }) : /* @__PURE__ */ a(I, { ...i });
+}
+function M({ granted: i = 0, purchased: l = 0, grantExpires: t, burnNote: p, unknown: r = !1, onTopUp: v, labels: m, locale: u = k, walletHref: c, linkComponent: g, defaultOpen: h }) {
+  const s = A(m), d = U({ defaultOpen: h }), B = g ?? "a", b = i + l, F = b, f = r ? "—" : o(b, u), N = () => s.bar(o(i, u), o(l, u), o(b, u));
+  return /* @__PURE__ */ n("div", { className: e.topRoot, children: [
+    /* @__PURE__ */ n("button", { type: "button", className: e.topTrigger, "aria-label": r ? s.railBalanceUnknown : s.railBalance(f), onClick: d.toggle, ...d.triggerProps, children: [
+      /* @__PURE__ */ n("span", { className: e.topFigure, "aria-hidden": "true", children: [
+        /* @__PURE__ */ a("span", { className: e.topAmount, children: f }),
+        /* @__PURE__ */ a("span", { className: e.topUnit, children: s.unit })
+      ] }),
+      !r && /* @__PURE__ */ a(T, { granted: i, purchased: l, total: F, className: e.topBar }),
+      /* @__PURE__ */ a($, { className: e.topChevron })
+    ] }),
+    d.open && /* @__PURE__ */ n("div", { ...d.panelProps, className: e.popover, "aria-label": s.popover, children: [
+      /* @__PURE__ */ n("div", { className: e.popHead, children: [
+        /* @__PURE__ */ n("span", { className: e.popFigure, children: [
+          /* @__PURE__ */ a("span", { className: e.popAmount, children: f }),
+          /* @__PURE__ */ a("span", { className: e.popUnit, children: s.unit })
+        ] }),
+        c !== void 0 && /* @__PURE__ */ a(B, { className: y.quiet, href: c, onClick: d.close, children: s.open })
+      ] }),
+      r ? /* @__PURE__ */ a("p", { className: e.popNote, children: s.balanceUnknown }) : /* @__PURE__ */ n(P, { children: [
+        /* @__PURE__ */ a(T, { granted: i, purchased: l, total: F, className: e.popBar, label: N() }),
+        /* @__PURE__ */ n("ul", { className: e.legend, children: [
+          /* @__PURE__ */ n("li", { className: e.legendRow, children: [
+            /* @__PURE__ */ a("span", { className: e.swatchGranted, "aria-hidden": "true" }),
+            /* @__PURE__ */ n("span", { className: e.legendText, children: [
+              /* @__PURE__ */ a("span", { className: e.legendFigure, children: s.grantedFigure(o(i, u)) }),
+              /* @__PURE__ */ a("span", { className: e.legendNote, children: t ? s.grantedNote(t) : s.grantedNoteUndated })
+            ] })
+          ] }),
+          /* @__PURE__ */ n("li", { className: e.legendRow, children: [
+            /* @__PURE__ */ a("span", { className: e.swatchPurchased, "aria-hidden": "true" }),
+            /* @__PURE__ */ n("span", { className: e.legendText, children: [
+              /* @__PURE__ */ a("span", { className: e.legendFigure, children: s.purchasedFigure(o(l, u)) }),
+              /* @__PURE__ */ a("span", { className: e.legendNote, children: s.purchasedNote })
+            ] })
+          ] })
+        ] }),
+        (p || v !== void 0) && /* @__PURE__ */ n("div", { className: e.popFoot, children: [
+          p && /* @__PURE__ */ a("p", { className: e.popNote, children: p }),
+          v !== void 0 && /* @__PURE__ */ a("button", { type: "button", className: `${y.primary} ${e.buy}`, "data-tone": "accent", onClick: v, children: s.buyTokens })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function W({ balance: i, burnNote: l, onTopUp: t, labels: p, locale: r = k, walletHref: v, linkComponent: m, defaultOpen: u }) {
+  const c = A(p), g = U({ defaultOpen: u }), h = m ?? "a", s = i < 0, d = o(s ? -i : i, r);
+  return /* @__PURE__ */ n("div", { className: e.topRoot, "data-past-zero": s ? "true" : void 0, children: [
+    /* @__PURE__ */ n("button", { type: "button", className: e.topTrigger, "aria-label": s ? c.pastZeroBalance(d) : c.railBalance(d), onClick: g.toggle, ...g.triggerProps, children: [
+      /* @__PURE__ */ n("span", { className: e.topFigure, "aria-hidden": "true", children: [
+        /* @__PURE__ */ a("span", { className: e.topAmount, children: d }),
+        /* @__PURE__ */ a("span", { className: e.topUnit, children: s ? c.pastZero : c.unit })
+      ] }),
+      /* @__PURE__ */ a($, { className: e.topChevron })
+    ] }),
+    g.open && /* @__PURE__ */ n("div", { ...g.panelProps, className: e.popover, "aria-label": c.popover, children: [
+      /* @__PURE__ */ n("div", { className: e.popHead, children: [
+        /* @__PURE__ */ n("span", { className: e.popFigure, children: [
+          /* @__PURE__ */ a("span", { className: e.popAmount, children: d }),
+          /* @__PURE__ */ a("span", { className: e.popUnit, children: s ? c.pastZeroLong : c.unit })
+        ] }),
+        v !== void 0 && /* @__PURE__ */ a(h, { className: y.quiet, href: v, onClick: g.close, children: c.open })
+      ] }),
+      (l || t !== void 0) && /* @__PURE__ */ n("div", { className: e.popFoot, children: [
+        l && /* @__PURE__ */ a("p", { className: e.popNote, children: l }),
+        t !== void 0 && /* @__PURE__ */ a("button", { type: "button", className: `${y.primary} ${e.buy}`, "data-tone": "accent", onClick: t, children: c.buyTokens })
+      ] })
+    ] })
+  ] });
+}
+function T({ granted: i, purchased: l, total: t, className: p, label: r }) {
+  return /* @__PURE__ */ n("span", { className: p, role: r ? "img" : void 0, "aria-label": r, "aria-hidden": r ? void 0 : "true", children: [
+    /* @__PURE__ */ a("span", { className: e.segmentGranted, "data-segment": "granted", style: { width: L(i, t) } }),
+    /* @__PURE__ */ a("span", { className: e.segmentPurchased, "data-segment": "purchased", style: { width: L(l, t) } })
+  ] });
+}
+function I({ granted: i = 0, purchased: l = 0, grantCycle: t, burnedFraction: p, grantExpires: r, burnNote: v, unknown: m = !1, collapsed: u = !1, onTopUp: c, labels: g, locale: h = k }) {
+  const s = A(g), d = () => s.bar(o(i, h), o(l, h), o(i + l, h)), B = i + l, b = (t ?? i) + l, F = t !== void 0 && t > 0 ? (t - i) / t : 0, f = p ?? F, N = !m && f >= E;
+  if (u) {
+    const C = m ? void 0 : s.railFigure(w(B, h));
+    return /* @__PURE__ */ n("div", { className: e.rail, role: "group", "aria-label": C === void 0 ? s.railBalanceUnknown : s.railBalance(C), tabIndex: 0, children: [
+      /* @__PURE__ */ a(x, { className: e.railIcon }),
+      /* @__PURE__ */ a("span", { className: e.railFigure, children: C ?? "—" }),
+      m ? /* @__PURE__ */ a("span", { className: e.srOnly, children: s.railUnknown }) : /* @__PURE__ */ a(R, { granted: i, purchased: l, cycleTotal: b, tone: N ? "threshold" : "rest", label: d() })
     ] });
   }
-  return /* @__PURE__ */ l("div", { className: a.chip, role: "group", "aria-label": i.region, tabIndex: 0, "data-threshold": c ? "true" : void 0, "data-unknown": n ? "true" : void 0, children: [
-    /* @__PURE__ */ l("div", { className: a.header, children: [
-      /* @__PURE__ */ e("span", { className: a.name, children: i.name }),
-      c && /* @__PURE__ */ l("span", { className: a.pill, children: [
-        Math.round(L * 100),
+  return /* @__PURE__ */ n("div", { className: e.chip, role: "group", "aria-label": s.region, tabIndex: 0, "data-threshold": N ? "true" : void 0, "data-unknown": m ? "true" : void 0, children: [
+    /* @__PURE__ */ n("div", { className: e.header, children: [
+      /* @__PURE__ */ a("span", { className: e.name, children: s.name }),
+      N && /* @__PURE__ */ n("span", { className: e.pill, children: [
+        Math.round(f * 100),
         "%"
       ] })
     ] }),
-    n ? /* @__PURE__ */ l("div", { className: a.figure, children: [
-      /* @__PURE__ */ e("span", { className: a.amount, "aria-hidden": "true", children: "—" }),
-      /* @__PURE__ */ e(W, { className: a.retry }),
-      /* @__PURE__ */ e("span", { className: a.srOnly, children: i.balanceUnknown })
-    ] }) : /* @__PURE__ */ l("div", { className: a.figure, children: [
-      /* @__PURE__ */ e("span", { className: a.amount, children: m(v, d) }),
-      /* @__PURE__ */ e("span", { className: a.unit, children: i.unit })
+    m ? /* @__PURE__ */ n("div", { className: e.figure, children: [
+      /* @__PURE__ */ a("span", { className: e.amount, "aria-hidden": "true", children: "—" }),
+      /* @__PURE__ */ a(O, { className: e.retry }),
+      /* @__PURE__ */ a("span", { className: e.srOnly, children: s.balanceUnknown })
+    ] }) : /* @__PURE__ */ n("div", { className: e.figure, children: [
+      /* @__PURE__ */ a("span", { className: e.amount, children: o(B, h) }),
+      /* @__PURE__ */ a("span", { className: e.unit, children: s.unit })
     ] }),
-    n ? /* @__PURE__ */ e("div", { className: a.bar, "data-tone": "unknown", "aria-hidden": "true" }) : /* @__PURE__ */ e(B, { granted: s, purchased: r, cycleTotal: f, tone: c ? "threshold" : "rest", label: b() }),
-    !n && !c && /* @__PURE__ */ l("div", { className: a.details, children: [
-      /* @__PURE__ */ l("dl", { className: a.split, children: [
-        /* @__PURE__ */ l("div", { className: a.splitRow, children: [
-          /* @__PURE__ */ l("dt", { className: a.splitLabel, children: [
-            /* @__PURE__ */ e("span", { className: a.dotGranted, "aria-hidden": "true" }),
-            i.granted
+    m ? /* @__PURE__ */ a("div", { className: e.bar, "data-tone": "unknown", "aria-hidden": "true" }) : /* @__PURE__ */ a(R, { granted: i, purchased: l, cycleTotal: b, tone: N ? "threshold" : "rest", label: d() }),
+    !m && !N && /* @__PURE__ */ n("div", { className: e.details, children: [
+      /* @__PURE__ */ n("dl", { className: e.split, children: [
+        /* @__PURE__ */ n("div", { className: e.splitRow, children: [
+          /* @__PURE__ */ n("dt", { className: e.splitLabel, children: [
+            /* @__PURE__ */ a("span", { className: e.dotGranted, "aria-hidden": "true" }),
+            s.granted
           ] }),
-          /* @__PURE__ */ e("dd", { className: a.splitAmount, children: m(s, d) })
+          /* @__PURE__ */ a("dd", { className: e.splitAmount, children: o(i, h) })
         ] }),
-        /* @__PURE__ */ l("div", { className: a.splitRow, children: [
-          /* @__PURE__ */ l("dt", { className: a.splitLabel, children: [
-            /* @__PURE__ */ e("span", { className: a.dotPurchased, "aria-hidden": "true" }),
-            i.purchased
+        /* @__PURE__ */ n("div", { className: e.splitRow, children: [
+          /* @__PURE__ */ n("dt", { className: e.splitLabel, children: [
+            /* @__PURE__ */ a("span", { className: e.dotPurchased, "aria-hidden": "true" }),
+            s.purchased
           ] }),
-          /* @__PURE__ */ e("dd", { className: a.splitAmount, children: m(r, d) })
+          /* @__PURE__ */ a("dd", { className: e.splitAmount, children: o(l, h) })
         ] })
       ] }),
-      o && /* @__PURE__ */ e("p", { className: a.footer, children: i.grantExpiry(o) })
+      r && /* @__PURE__ */ a("p", { className: e.footer, children: s.grantExpiry(r) })
     ] }),
-    c && p && /* @__PURE__ */ e("p", { className: a.burnNote, children: p }),
-    !n && u !== void 0 && /* @__PURE__ */ e("button", { type: "button", className: a.topUp, "data-grown": c ? "true" : void 0, onClick: u, children: i.topUp })
+    N && v && /* @__PURE__ */ a("p", { className: e.burnNote, children: v }),
+    !m && c !== void 0 && /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: `${N ? y.primary : y.quiet} ${e.topUp}`,
+        "data-tone": N ? "accent" : void 0,
+        "data-grown": N ? "true" : void 0,
+        onClick: c,
+        children: s.topUp
+      }
+    )
   ] });
 }
 export {
-  $ as WalletChip
+  J as WalletChip
 };
 //# sourceMappingURL=WalletChip.js.map