@blakesteve/roster 5.7.0 → 5.8.0

package/README.md

@@ -113,6 +113,12 @@ import "@blakesteve/roster/style.css";
 Skip it and components render against browser defaults: serif type, bulleted
 lists, and `content-box` sizing.
 
+One default Roster does undo itself: a `<button>`'s own border. A `link` or
+`soft` Button sets its border to zero (`soft` since 5.8.0). In an app without a
+reset, `link` drew the browser's 2px border, and `soft` kept it, transparent,
+which took 4px of extra room and showed in forced colors. Zero is what an app
+with Tailwind's reset already had, so no layout moves.
+
 ### Dark mode
 
 Every component reads a `.dark` class on an ancestor, so dark mode is whatever
@@ -452,8 +458,15 @@ the supported way now.
 rule stops matching.** Solid Button, Badge, Pill and Checkbox no longer carry
 `rst:text-white` or `rst:text-gray-950`, so a selector naming either matches
 nothing. It fails silently, and it fails *partially*: those classes are still on
-`Card`, `Navbar`, `Dialog`, `ActionBar`, `Avatar` and `Breadcrumbs`, so a
-themed foreground keeps working there while reverting on every solid control.
+`ActionBar`, `Avatar` and `Breadcrumbs`, so a themed foreground keeps working
+there while reverting on every solid control. The `primary` fills of `Card`,
+`Dialog` and, since 5.8.0, `Navbar` read their ink token too: Navbar's bar,
+brand and active link take `--roster-primary-700-ink`, and its other links and
+menu button the same ink at 80%. Each keeps white in dark mode, where its fill
+is a dark step the ink doesn't describe. A primary Navbar looks different even
+with no ink set: its links were `gray-300` and its active link `primary-400`,
+which was 4.04:1 on Roster's own primary, under the 4.5 text needs. Now they
+are white at 80% and white, the active one still semibold.
 Replace the rule with the token:
 
 ```css
@@ -1258,6 +1271,12 @@ app supplies, inline by default or in a Dialog or Sheet (`QueueEditDialog`,
 `QueueEditSheet`, separate exports so a queue that doesn't use them doesn't
 ship them).
 
+**A reason outranks a confirm.** An action with both asks the reason's
+question, and its submit button is the confirmation. A `required` reason asks
+for one of its `options`, so the types refuse `required` without them: a
+reason that is only a note is `note: "required"`. That makes `QueueReasonStep`
+a type rather than an interface (5.8.0), so extend it with `&`, not `extends`.
+
 **Drafts are typed.** An edit's draft is whatever its `initial` returns, and
 `validate`, the form and `run` all get that type. Inside JSX, pass `actions` as
 a function and write edits with the `edit` it's handed, as above; outside it,
@@ -1623,6 +1642,65 @@ well as `next/link`, plus `className`, `children`, `aria-current`, `onClick` and
 `Eyebrow` takes the other approach: `as` accepts any element and the props
 follow it, so `<Eyebrow as="a" href="/work">` works, as does `as={NextLink}`.
 
+### Every built-in word is replaceable
+
+Where a component writes words of its own (a close button's name, a menu
+button's, "Log In", a sentence a screen reader hears), each can be replaced
+and defaults to English. Most components take a `labels` prop; pass any entry
+and the rest stay:
+
+```tsx
+<Navbar labels={{ openMainMenu: t("nav.open"), closeMainMenu: t("nav.close") }} … />
+<Sheet labels={{ close: t("common.close") }} … />
+<Countdown labels={{ days: (n) => t("units.days", { count: n }) }} … />
+```
+
+Since 5.8.0 that covers `Navbar`, `Sheet`, `Dialog`, `Breadcrumbs`, `Footer`,
+`CallToAction`, `AvatarStrip`, `ErrorState`, `Countdown`, `Carousel` and
+`ModerationQueue` (whose `labels.close` names the close button of its edit
+Dialog or Sheet), alongside `Pagination`, the loading system and DataTable's
+`paginationLabels`. A few components name their words with single props
+instead, and 5.8.0 adds the ones that were missing: MultiSelect's
+`countLabel`, DataTable's `emptyMessage` and MediaPreview's `newTabLabel`, next
+to the existing `dismissLabel`, `placeholder`, `removeLabel`, `prevLabel` and
+the like. Words that take a number or a name are functions, so a language
+whose word changes with the count can say so. An entry passed as `undefined`
+(a catalog missing a key) keeps its English rather than leaving a control
+unnamed.
+
+`src/labels.test.tsx` renders each of these, in the states where its words
+appear, with every word pseudo-localized, and fails on any English left. A
+default it can't reach: `Avatar`'s alt is "Avatar" unless you pass one (`""`
+marks it decorative, since 5.8.0), and a team without a name in
+`MatchupCard` is "Team" and its id.
+
+**From a server component, pass only strings.** Every component is a client
+component, and functions can't cross the React Server Component boundary, so a
+function label (Footer's `copyright`, Countdown's units) has to be passed from
+a `"use client"` wrapper, as `linkComponent` does above.
+
+### Eyebrow and Stat line height
+
+An `Eyebrow`'s line is as tall as its letters, and so is a `Stat`'s figure and
+its label. Through 5.7.0 neither was: `leading-none` sat before the font size
+in their variant tables, and `cn()`'s tailwind-merge drops a line height that
+comes before a size. An Eyebrow drew a line 1.5 times its size (15px for the
+default `xs`, not 10), and a Stat's figure and label drew lines taller than
+their type.
+
+**Upgrading to 5.8.0 moves layouts.** An Eyebrow that makes its own line, as
+a flex or grid item or rendered as a block (`as="p"`, `as="h2"`), is a third
+shorter: 10px for `xs`, not 15. One inline in running text sits on its
+parent's line and doesn't change. A Stat in its default markup loses more:
+its figure's line was the size's own (28px for `sm`'s 20px figure) or the
+page's 1.5 (`md`, `lg`), and its label sat on the page's line (24px on a 16px,
+1.5 body). So a `sm` Stat goes from 55px tall to 33, and an `lg` one at 48px
+from 99 to 61. In the `standalone` markup only the label moves, 15px to 10.
+`LabeledDivider` sets its label in an Eyebrow of its own, so every rule is 5px
+shorter whatever label it's given. An Eyebrow that wraps now sets solid, its
+lines as close as its size. Spacing an app tuned against the old lines (a
+margin that cleared them) may want retuning.
+
 ## Quick start
 
 ```tsx
@@ -1715,11 +1793,13 @@ function App() {
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `ActionBar` | Sticky bottom action strip                                                                                                                                         |
 | `Countdown` | Live countdown timer                                                                                                                                               |
-| `DataTable` | Full-featured table with sorting and pagination via TanStack Table v9; its pager is `Pagination`'s arrows, worded through `paginationLabels`. Imported from `@blakesteve/roster/data-table` (see [DataTable columns](#datatable-columns)) |
+| `DataTable` | Table with sorting and paging via TanStack Table v9. Its pager is built on `Pagination` (since 5.6.0, the arrows layout), worded through `paginationLabels`; the page size is fixed at 10, with no prop to change it yet. Imported from `@blakesteve/roster/data-table` (see [DataTable columns](#datatable-columns)) |
 | `Dialog`    | Modal dialog; `onAfterClose` runs once it has finished closing                                                                                                     |
 | `Footer`    | Site footer                                                                                                                                                        |
 | `ModerationQueue` | Items waiting for a decision: busy per action, confirm, reason and edit steps, focus after an item leaves, a live region. Never fetches (see [ModerationQueue](#moderationqueue)) |
-| `Navbar`    | Responsive navigation bar with mobile slide-out                                                                                                                    |
+| `QueueEditDialog` | A ModerationQueue edit step in a Dialog: pass it as an edit's `surface`. A separate export, so a queue that never uses it doesn't ship it |
+| `QueueEditSheet` | A ModerationQueue edit step in a Sheet, for a long form: pass it as an edit's `surface`. A separate export, like `QueueEditDialog` |
+| `Navbar`    | Responsive navigation bar with mobile slide-out. A wide logo keeps its own proportions through `logoHeight` and `logoWidth`; its built-in words are in `labels` |
 | `Sheet`     | Bottom sheet: drag, Escape or backdrop to dismiss; only its content scrolls; returns focus, even from a deep link; the title may be a node |
 | `Table`     | Static data table                                                                                                                                                  |
 

package/dist/components/atoms/Avatar/Avatar.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),o=require("../../../lib/utils.cjs"),h=require("./avatar-variants.cjs"),t=require("../../../node_modules/@headlessui/react/dist/components/popover/popover.cjs"),i=n.forwardRef(({className:c,size:l,colorScheme:u,shape:d,initials:g,src:s,alt:v,title:e,...m},f)=>{const[p,b]=n.useState(!1),x=s&&!p,a=r.jsx("div",{ref:f,className:o.cn(h.avatarVariants({size:l,colorScheme:u,shape:d}),c),...m,children:x?r.jsx("img",{src:s,alt:v||"Avatar",className:"rst:h-full rst:w-full rst:object-cover",onError:()=>b(!0)}):r.jsx("span",{className:"rst:leading-none rst:uppercase",children:g?.slice(0,2)})});return e?r.jsxs(t.Popover,{className:"rst:relative rst:inline-flex",children:[r.jsx(t.PopoverButton,{as:"div",className:"rst:cursor-pointer rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:rounded-full",children:a}),r.jsx(t.PopoverPanel,{anchor:"bottom",className:o.cn("rst:z-50 rst:mt-2 rst:rounded-md rst:px-3 rst:py-1.5 rst:text-xs rst:font-medium rst:elevation-anchored rst:backdrop-blur-md rst:ring","rst:bg-gray-900/95 rst:text-white rst:ring-black/5 rst:dark:bg-gray-100/95 rst:dark:text-gray-900 rst:dark:ring-white/20","rst:transition rst:duration-200 rst:ease-in-out rst:data-closed:opacity-0 rst:data-closed:translate-y-1"),children:e})]}):a});i.displayName="Avatar";exports.Avatar=i;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),o=require("../../../lib/utils.cjs"),h=require("./avatar-variants.cjs"),t=require("../../../node_modules/@headlessui/react/dist/components/popover/popover.cjs"),i=n.forwardRef(({className:c,size:l,colorScheme:u,shape:d,initials:g,src:s,alt:v,title:e,...m},f)=>{const[p,b]=n.useState(!1),x=s&&!p,a=r.jsx("div",{ref:f,className:o.cn(h.avatarVariants({size:l,colorScheme:u,shape:d}),c),...m,children:x?r.jsx("img",{src:s,alt:v??"Avatar",className:"rst:h-full rst:w-full rst:object-cover",onError:()=>b(!0)}):r.jsx("span",{className:"rst:leading-none rst:uppercase",children:g?.slice(0,2)})});return e?r.jsxs(t.Popover,{className:"rst:relative rst:inline-flex",children:[r.jsx(t.PopoverButton,{as:"div",className:"rst:cursor-pointer rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:rounded-full",children:a}),r.jsx(t.PopoverPanel,{anchor:"bottom",className:o.cn("rst:z-50 rst:mt-2 rst:rounded-md rst:px-3 rst:py-1.5 rst:text-xs rst:font-medium rst:elevation-anchored rst:backdrop-blur-md rst:ring","rst:bg-gray-900/95 rst:text-white rst:ring-black/5 rst:dark:bg-gray-100/95 rst:dark:text-gray-900 rst:dark:ring-white/20","rst:transition rst:duration-200 rst:ease-in-out rst:data-closed:opacity-0 rst:data-closed:translate-y-1"),children:e})]}):a});i.displayName="Avatar";exports.Avatar=i;

package/dist/components/atoms/Avatar/Avatar.d.ts

@@ -4,6 +4,10 @@ import { avatarVariants } from './avatar-variants';
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
     initials?: string;
     src?: string;
+    /**
+     * The photo's text alternative. Defaults to "Avatar"; pass the person's
+     * name, or `""` where the avatar sits beside a name that already says who.
+     */
     alt?: string;
     title?: string;
 }

package/dist/components/atoms/Avatar/Avatar.js

@@ -26,7 +26,7 @@ const w = b.forwardRef(
           "img",
           {
             src: t,
-            alt: d || "Avatar",
+            alt: d ?? "Avatar",
             className: "rst:h-full rst:w-full rst:object-cover",
             onError: () => g(!0)
           }

package/dist/components/atoms/AvatarStrip/AvatarStrip.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("../../../lib/utils.cjs"),f=require("../Avatar/Avatar.cjs");function g({items:i,maxDisplay:l=5,totalCount:n,excludeKey:c,onDismiss:o,trailingSlot:d,label:v,ringClass:h="rst:ring-white rst:dark:ring-gray-900",className:p}){const s=i.filter(t=>t.key!==c).slice(0,l),e=n!==void 0?Math.max(0,n-s.length):Math.max(0,i.filter(t=>t.key!==c).length-l);return s.length===0&&!d?null:r.jsxs("div",{"data-testid":"avatar-strip",className:a.cn("rst:font-ui rst:flex rst:items-center rst:gap-3",p),children:[o&&r.jsx("button",{type:"button",onClick:o,"aria-label":"Dismiss","data-testid":"avatar-strip-dismiss",className:"rst:shrink-0 rst:text-gray-400/50 rst:dark:text-gray-500/50 rst:hover:text-gray-400 rst:dark:hover:text-gray-500 rst:transition-colors rst:cursor-pointer",children:"✕"}),r.jsxs("div",{"data-testid":"avatar-strip-stack",className:"rst:flex rst:items-center rst:-space-x-2",children:[s.map(t=>{const x=r.jsx(f.Avatar,{initials:t.label[0].toUpperCase(),src:t.src,colorScheme:t.colorScheme??"neutral",size:"xs"}),u=a.cn("rst:relative rst:inline-flex rst:h-6 rst:w-6 rst:rounded-full rst:ring-2 rst:transition-transform rst:hover:z-10 rst:hover:scale-110",h);return t.href?r.jsx("a",{href:t.href,title:t.label,"data-testid":`avatar-strip-item-${t.key}`,className:u,children:x},t.key):r.jsx("span",{title:t.label,"data-testid":`avatar-strip-item-${t.key}`,className:u,children:x},t.key)}),e>0&&r.jsx("div",{title:`${e} more`,"data-testid":"avatar-strip-overflow",className:a.cn("rst:relative rst:flex rst:h-6 rst:w-6 rst:items-center rst:justify-center rst:rounded-full rst:bg-gray-500/10 rst:ring-2",h),children:r.jsxs("span",{className:"rst:text-[9px] rst:font-bold rst:text-gray-500 rst:dark:text-gray-400 rst:select-none",children:["+",e]})}),d]}),v&&r.jsx("div",{"data-testid":"avatar-strip-label",children:v})]})}exports.AvatarStrip=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("../../../lib/utils.cjs"),y=require("../../../lib/labels.cjs"),b=require("../Avatar/Avatar.cjs"),k={dismiss:"Dismiss",more:s=>`${s} more`};function m({items:s,maxDisplay:l=5,totalCount:n,excludeKey:c,onDismiss:o,trailingSlot:d,label:h,ringClass:v="rst:ring-white rst:dark:ring-gray-900",labels:f,className:g}){const x=y.withLabels(k,f),e=s.filter(t=>t.key!==c).slice(0,l),a=n!==void 0?Math.max(0,n-e.length):Math.max(0,s.filter(t=>t.key!==c).length-l);return e.length===0&&!d?null:r.jsxs("div",{"data-testid":"avatar-strip",className:i.cn("rst:font-ui rst:flex rst:items-center rst:gap-3",g),children:[o&&r.jsx("button",{type:"button",onClick:o,"aria-label":x.dismiss,"data-testid":"avatar-strip-dismiss",className:"rst:shrink-0 rst:text-gray-400/50 rst:dark:text-gray-500/50 rst:hover:text-gray-400 rst:dark:hover:text-gray-500 rst:transition-colors rst:cursor-pointer",children:"✕"}),r.jsxs("div",{"data-testid":"avatar-strip-stack",className:"rst:flex rst:items-center rst:-space-x-2",children:[e.map(t=>{const u=r.jsx(b.Avatar,{initials:t.label[0].toUpperCase(),src:t.src,alt:t.label,colorScheme:t.colorScheme??"neutral",size:"xs"}),p=i.cn("rst:relative rst:inline-flex rst:h-6 rst:w-6 rst:rounded-full rst:ring-2 rst:transition-transform rst:hover:z-10 rst:hover:scale-110",v);return t.href?r.jsx("a",{href:t.href,title:t.label,"data-testid":`avatar-strip-item-${t.key}`,className:p,children:u},t.key):r.jsx("span",{title:t.label,"data-testid":`avatar-strip-item-${t.key}`,className:p,children:u},t.key)}),a>0&&r.jsx("div",{title:x.more(a),"data-testid":"avatar-strip-overflow",className:i.cn("rst:relative rst:flex rst:h-6 rst:w-6 rst:items-center rst:justify-center rst:rounded-full rst:bg-gray-500/10 rst:ring-2",v),children:r.jsxs("span",{className:"rst:text-[9px] rst:font-bold rst:text-gray-500 rst:dark:text-gray-400 rst:select-none",children:["+",a]})}),d]}),h&&r.jsx("div",{"data-testid":"avatar-strip-label",children:h})]})}exports.AvatarStrip=m;

package/dist/components/atoms/AvatarStrip/AvatarStrip.d.ts

@@ -12,6 +12,13 @@ export interface AvatarStripItem {
     /** When provided, the avatar is wrapped in an `<a>` tag with this href. */
     href?: string;
 }
+/** Every word AvatarStrip says of its own. Pass any of them in `labels` to replace it. */
+export interface AvatarStripLabels {
+    /** The dismiss button's name, with `onDismiss`. */
+    dismiss: string;
+    /** The overflow chip's title: how many more there are. */
+    more: (count: number) => string;
+}
 export interface AvatarStripProps {
     /** Ordered list of avatar items. */
     items: AvatarStripItem[];
@@ -35,6 +42,8 @@ export interface AvatarStripProps {
     trailingSlot?: ReactNode;
     /** Rendered to the right of the avatar stack. Accepts any React node. */
     label?: ReactNode;
+    /** The component's own words, replaced; any left out stay English. */
+    labels?: Partial<AvatarStripLabels>;
     /**
      * Tailwind class that sets the ring color around each avatar and the overflow chip.
      * Should match the background the strip is rendered on to produce the cutout stack effect.
@@ -56,4 +65,4 @@ export interface AvatarStripProps {
  *
  * Returns `null` when there are no visible items and no `trailingSlot`.
  */
-export declare function AvatarStrip({ items, maxDisplay, totalCount, excludeKey, onDismiss, trailingSlot, label, ringClass, className, }: AvatarStripProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AvatarStrip({ items, maxDisplay, totalCount, excludeKey, onDismiss, trailingSlot, label, ringClass, labels, className, }: AvatarStripProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/atoms/AvatarStrip/AvatarStrip.js

@@ -1,54 +1,58 @@
 "use client";
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { cn as i } from "../../../lib/utils.js";
-import { Avatar as m } from "../Avatar/Avatar.js";
-function b({
-  items: l,
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { cn as l } from "../../../lib/utils.js";
+import { withLabels as y } from "../../../lib/labels.js";
+import { Avatar as k } from "../Avatar/Avatar.js";
+const b = { dismiss: "Dismiss", more: (s) => `${s} more` };
+function L({
+  items: s,
   maxDisplay: n = 5,
-  totalCount: c,
-  excludeKey: o,
+  totalCount: o,
+  excludeKey: c,
   onDismiss: d,
   trailingSlot: h,
-  label: v,
-  ringClass: p = "rst:ring-white rst:dark:ring-gray-900",
-  className: g
+  label: p,
+  ringClass: v = "rst:ring-white rst:dark:ring-gray-900",
+  labels: g,
+  className: u
 }) {
-  const s = l.filter((t) => t.key !== o).slice(0, n), e = c !== void 0 ? Math.max(0, c - s.length) : Math.max(0, l.filter((t) => t.key !== o).length - n);
-  return s.length === 0 && !h ? null : /* @__PURE__ */ a(
+  const f = y(b, g), e = s.filter((t) => t.key !== c).slice(0, n), a = o !== void 0 ? Math.max(0, o - e.length) : Math.max(0, s.filter((t) => t.key !== c).length - n);
+  return e.length === 0 && !h ? null : /* @__PURE__ */ i(
     "div",
     {
       "data-testid": "avatar-strip",
-      className: i("rst:font-ui rst:flex rst:items-center rst:gap-3", g),
+      className: l("rst:font-ui rst:flex rst:items-center rst:gap-3", u),
       children: [
         d && /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             onClick: d,
-            "aria-label": "Dismiss",
+            "aria-label": f.dismiss,
             "data-testid": "avatar-strip-dismiss",
             className: "rst:shrink-0 rst:text-gray-400/50 rst:dark:text-gray-500/50 rst:hover:text-gray-400 rst:dark:hover:text-gray-500 rst:transition-colors rst:cursor-pointer",
             children: "✕"
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ i(
           "div",
           {
             "data-testid": "avatar-strip-stack",
             className: "rst:flex rst:items-center rst:-space-x-2",
             children: [
-              s.map((t) => {
-                const f = /* @__PURE__ */ r(
-                  m,
+              e.map((t) => {
+                const m = /* @__PURE__ */ r(
+                  k,
                   {
                     initials: t.label[0].toUpperCase(),
                     src: t.src,
+                    alt: t.label,
                     colorScheme: t.colorScheme ?? "neutral",
                     size: "xs"
                   }
-                ), x = i(
+                ), x = l(
                   "rst:relative rst:inline-flex rst:h-6 rst:w-6 rst:rounded-full rst:ring-2 rst:transition-transform rst:hover:z-10 rst:hover:scale-110",
-                  p
+                  v
                 );
                 return t.href ? /* @__PURE__ */ r(
                   "a",
@@ -57,7 +61,7 @@ function b({
                     title: t.label,
                     "data-testid": `avatar-strip-item-${t.key}`,
                     className: x,
-                    children: f
+                    children: m
                   },
                   t.key
                 ) : /* @__PURE__ */ r(
@@ -66,23 +70,23 @@ function b({
                     title: t.label,
                     "data-testid": `avatar-strip-item-${t.key}`,
                     className: x,
-                    children: f
+                    children: m
                   },
                   t.key
                 );
               }),
-              e > 0 && /* @__PURE__ */ r(
+              a > 0 && /* @__PURE__ */ r(
                 "div",
                 {
-                  title: `${e} more`,
+                  title: f.more(a),
                   "data-testid": "avatar-strip-overflow",
-                  className: i(
+                  className: l(
                     "rst:relative rst:flex rst:h-6 rst:w-6 rst:items-center rst:justify-center rst:rounded-full rst:bg-gray-500/10 rst:ring-2",
-                    p
+                    v
                   ),
-                  children: /* @__PURE__ */ a("span", { className: "rst:text-[9px] rst:font-bold rst:text-gray-500 rst:dark:text-gray-400 rst:select-none", children: [
+                  children: /* @__PURE__ */ i("span", { className: "rst:text-[9px] rst:font-bold rst:text-gray-500 rst:dark:text-gray-400 rst:select-none", children: [
                     "+",
-                    e
+                    a
                   ] })
                 }
               ),
@@ -90,11 +94,11 @@ function b({
             ]
           }
         ),
-        v && /* @__PURE__ */ r("div", { "data-testid": "avatar-strip-label", children: v })
+        p && /* @__PURE__ */ r("div", { "data-testid": "avatar-strip-label", children: p })
       ]
     }
   );
 }
 export {
-  b as AvatarStrip
+  L as AvatarStrip
 };

package/dist/components/atoms/Button/button-variants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:font-ui rst:inline-flex rst:items-center rst:justify-center rst:cursor-pointer rst:whitespace-nowrap rst:rounded-md rst:text-sm rst:font-medium rst:ring-offset-background rst:transition-colors rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:disabled:pointer-events-none rst:disabled:opacity-50",{variants:{variant:{solid:"rst:border rst:border-transparent rst:elevation-control",soft:"rst:border-transparent rst:shadow-none",outline:"rst:border rst:bg-transparent rst:elevation-control",ghost:"rst:border rst:border-transparent rst:bg-transparent",link:"rst:border-0 rst:bg-transparent rst:underline-offset-4 rst:hover:underline"},colorScheme:{primary:"",orange:"",teal:"",purple:"",amber:"",success:"",error:"",neutral:""},size:{xs:"rst:h-7 rst:rounded-sm rst:px-2 rst:text-xs",sm:"rst:h-9 rst:rounded-md rst:px-3",default:"rst:h-10 rst:px-4 rst:py-2",lg:"rst:h-11 rst:rounded-md rst:px-8",icon:"rst:h-10 rst:w-10"}},compoundVariants:[{variant:"solid",colorScheme:"primary",className:"rst:bg-primary-600 rst:hover:bg-primary-700 rst:dark:bg-primary-600 rst:dark:hover:bg-primary-500 rst:text-primary-600-ink rst:hover:text-primary-700-ink rst:dark:hover:text-primary-500-ink"},{variant:"solid",colorScheme:"orange",className:"rst:bg-orange-600 rst:hover:bg-orange-700 rst:dark:bg-orange-600 rst:dark:hover:bg-orange-700 rst:text-orange-600-ink rst:hover:text-orange-700-ink rst:dark:hover:text-orange-700-ink"},{variant:"solid",colorScheme:"teal",className:"rst:bg-teal-600 rst:hover:bg-teal-500 rst:dark:bg-teal-600 rst:dark:hover:bg-teal-500 rst:text-teal-600-ink rst:hover:text-teal-500-ink rst:dark:hover:text-teal-500-ink"},{variant:"solid",colorScheme:"purple",className:"rst:bg-purple-600 rst:hover:bg-purple-700 rst:dark:bg-purple-600 rst:dark:hover:bg-purple-700 rst:text-purple-600-ink rst:hover:text-purple-700-ink rst:dark:hover:text-purple-700-ink"},{variant:"solid",colorScheme:"amber",className:"rst:bg-amber-400 rst:hover:bg-amber-500 rst:dark:bg-amber-500 rst:dark:hover:bg-amber-400 rst:text-amber-400-ink rst:hover:text-amber-500-ink rst:dark:text-amber-500-ink rst:dark:hover:text-amber-400-ink"},{variant:"solid",colorScheme:"success",className:"rst:bg-success-600 rst:hover:bg-success-700 rst:dark:bg-success-600 rst:dark:hover:bg-success-700 rst:text-success-600-ink rst:hover:text-success-700-ink rst:dark:hover:text-success-700-ink"},{variant:"solid",colorScheme:"error",className:"rst:bg-error-600 rst:hover:bg-error-700 rst:dark:bg-error-600 rst:dark:hover:bg-error-500 rst:text-error-600-ink rst:hover:text-error-700-ink rst:dark:hover:text-error-500-ink"},{variant:"solid",colorScheme:"neutral",className:"rst:bg-gray-600 rst:hover:bg-gray-700 rst:dark:bg-gray-600 rst:dark:hover:bg-gray-500 rst:text-gray-600-ink rst:hover:text-gray-700-ink rst:dark:hover:text-gray-500-ink"},{variant:"soft",colorScheme:"primary",className:"rst:bg-primary-50 rst:text-primary-700 rst:hover:bg-primary-100 rst:dark:bg-primary-900/40 rst:dark:text-primary-300 rst:dark:hover:bg-primary-900/60"},{variant:"soft",colorScheme:"orange",className:"rst:bg-orange-50 rst:text-orange-700 rst:hover:bg-orange-100 rst:dark:bg-orange-900/30 rst:dark:text-orange-300 rst:dark:hover:bg-orange-900/50"},{variant:"soft",colorScheme:"teal",className:"rst:bg-teal-100 rst:text-teal-800 rst:hover:bg-teal-200 rst:dark:bg-teal-900/30 rst:dark:text-teal-300 rst:dark:hover:bg-teal-900/50"},{variant:"soft",colorScheme:"purple",className:"rst:bg-purple-50 rst:text-purple-700 rst:hover:bg-purple-100 rst:dark:bg-purple-900/30 rst:dark:text-purple-300 rst:dark:hover:bg-purple-900/50"},{variant:"soft",colorScheme:"amber",className:"rst:bg-amber-50 rst:text-amber-800 rst:hover:bg-amber-100 rst:dark:bg-amber-900/30 rst:dark:text-amber-300 rst:dark:hover:bg-amber-900/50"},{variant:"soft",colorScheme:"success",className:"rst:bg-success-50 rst:text-success-700 rst:hover:bg-success-100 rst:dark:bg-success-900/30 rst:dark:text-success-300 rst:dark:hover:bg-success-900/50"},{variant:"soft",colorScheme:"error",className:"rst:bg-error-50 rst:text-error-700 rst:hover:bg-error-100 rst:dark:bg-error-900/30 rst:dark:text-error-300 rst:dark:hover:bg-error-900/50"},{variant:"soft",colorScheme:"neutral",className:"rst:bg-gray-100 rst:text-gray-700 rst:hover:bg-gray-200 rst:dark:bg-gray-800/50 rst:dark:text-gray-300 rst:dark:hover:bg-gray-800"},{variant:"outline",colorScheme:"primary",className:"rst:border-primary-600 rst:text-primary-600 rst:hover:bg-primary-50 rst:dark:border-primary-500 rst:dark:text-primary-400 rst:dark:hover:bg-primary-500/10"},{variant:"outline",colorScheme:"orange",className:"rst:border-orange-600 rst:text-orange-600 rst:hover:bg-orange-50 rst:dark:border-orange-500 rst:dark:text-orange-400 rst:dark:hover:bg-orange-500/10"},{variant:"outline",colorScheme:"teal",className:"rst:border-teal-600 rst:text-teal-600 rst:hover:bg-teal-50 rst:dark:border-teal-500 rst:dark:text-teal-400 rst:dark:hover:bg-teal-500/10"},{variant:"outline",colorScheme:"purple",className:"rst:border-purple-600 rst:text-purple-600 rst:hover:bg-purple-50 rst:dark:border-purple-500 rst:dark:text-purple-400 rst:dark:hover:bg-purple-500/10"},{variant:"outline",colorScheme:"amber",className:"rst:border-amber-600 rst:text-amber-600 rst:hover:bg-amber-50 rst:dark:border-amber-500 rst:dark:text-amber-400 rst:dark:hover:bg-amber-500/10"},{variant:"outline",colorScheme:"success",className:"rst:border-success-600 rst:text-success-600 rst:hover:bg-success-50 rst:dark:border-success-500 rst:dark:text-success-400 rst:dark:hover:bg-success-500/10"},{variant:"outline",colorScheme:"error",className:"rst:border-error-600 rst:text-error-600 rst:hover:bg-error-50 rst:dark:border-error-500 rst:dark:text-error-400 rst:dark:hover:bg-error-500/10"},{variant:"outline",colorScheme:"neutral",className:"rst:border-gray-300 rst:text-gray-700 rst:hover:bg-gray-50 rst:dark:border-gray-600 rst:dark:text-gray-300 rst:dark:hover:bg-gray-800/50"},{variant:"ghost",colorScheme:"primary",className:"rst:text-primary-600 rst:hover:bg-primary-500/10 rst:dark:text-primary-400 rst:dark:hover:bg-primary-400/15"},{variant:"ghost",colorScheme:"orange",className:"rst:text-orange-600 rst:hover:bg-orange-500/10 rst:dark:text-orange-400 rst:dark:hover:bg-orange-400/15"},{variant:"ghost",colorScheme:"teal",className:"rst:text-teal-600 rst:hover:bg-teal-500/10 rst:dark:text-teal-400 rst:dark:hover:bg-teal-400/15"},{variant:"ghost",colorScheme:"purple",className:"rst:text-purple-600 rst:hover:bg-purple-500/10 rst:dark:text-purple-400 rst:dark:hover:bg-purple-400/15"},{variant:"ghost",colorScheme:"amber",className:"rst:text-amber-600 rst:hover:bg-amber-500/10 rst:dark:text-amber-400 rst:dark:hover:bg-amber-400/15"},{variant:"ghost",colorScheme:"success",className:"rst:text-success-600 rst:hover:bg-success-500/10 rst:dark:text-success-400 rst:dark:hover:bg-success-400/15"},{variant:"ghost",colorScheme:"error",className:"rst:text-error-600 rst:hover:bg-error-500/10 rst:dark:text-error-400 rst:dark:hover:bg-error-400/15"},{variant:"ghost",colorScheme:"neutral",className:"rst:text-gray-600 rst:hover:bg-gray-500/10 rst:dark:text-gray-400 rst:dark:hover:bg-gray-400/15"},{variant:"link",colorScheme:"primary",className:"rst:text-primary-600 rst:hover:text-primary-700 rst:dark:text-primary-400 rst:dark:hover:text-primary-300"},{variant:"link",colorScheme:"orange",className:"rst:text-orange-600 rst:hover:text-orange-700 rst:dark:text-orange-400 rst:dark:hover:text-orange-300"},{variant:"link",colorScheme:"teal",className:"rst:text-teal-600 rst:hover:text-teal-700 rst:dark:text-teal-400 rst:dark:hover:text-teal-300"},{variant:"link",colorScheme:"purple",className:"rst:text-purple-600 rst:hover:text-purple-700 rst:dark:text-purple-400 rst:dark:hover:text-purple-300"},{variant:"link",colorScheme:"amber",className:"rst:text-amber-600 rst:hover:text-amber-700 rst:dark:text-amber-400 rst:dark:hover:text-amber-300"},{variant:"link",colorScheme:"success",className:"rst:text-success-600 rst:hover:text-success-700 rst:dark:text-success-400 rst:dark:hover:text-success-300"},{variant:"link",colorScheme:"error",className:"rst:text-error-600 rst:hover:text-error-700 rst:dark:text-error-400 rst:dark:hover:text-error-300"},{variant:"link",colorScheme:"neutral",className:"rst:text-gray-600 rst:hover:text-gray-900 rst:dark:text-gray-400 rst:dark:hover:text-gray-100"}],defaultVariants:{colorScheme:"primary",variant:"solid",size:"default"}});exports.buttonVariants=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:font-ui rst:inline-flex rst:items-center rst:justify-center rst:cursor-pointer rst:whitespace-nowrap rst:rounded-md rst:text-sm rst:font-medium rst:ring-offset-background rst:transition-colors rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:disabled:pointer-events-none rst:disabled:opacity-50",{variants:{variant:{solid:"rst:border rst:border-transparent rst:elevation-control",soft:"rst:border-0 rst:shadow-none",outline:"rst:border rst:bg-transparent rst:elevation-control",ghost:"rst:border rst:border-transparent rst:bg-transparent",link:"rst:border-0 rst:bg-transparent rst:underline-offset-4 rst:hover:underline"},colorScheme:{primary:"",orange:"",teal:"",purple:"",amber:"",success:"",error:"",neutral:""},size:{xs:"rst:h-7 rst:rounded-sm rst:px-2 rst:text-xs",sm:"rst:h-9 rst:rounded-md rst:px-3",default:"rst:h-10 rst:px-4 rst:py-2",lg:"rst:h-11 rst:rounded-md rst:px-8",icon:"rst:h-10 rst:w-10"}},compoundVariants:[{variant:"solid",colorScheme:"primary",className:"rst:bg-primary-600 rst:hover:bg-primary-700 rst:dark:bg-primary-600 rst:dark:hover:bg-primary-500 rst:text-primary-600-ink rst:hover:text-primary-700-ink rst:dark:hover:text-primary-500-ink"},{variant:"solid",colorScheme:"orange",className:"rst:bg-orange-600 rst:hover:bg-orange-700 rst:dark:bg-orange-600 rst:dark:hover:bg-orange-700 rst:text-orange-600-ink rst:hover:text-orange-700-ink rst:dark:hover:text-orange-700-ink"},{variant:"solid",colorScheme:"teal",className:"rst:bg-teal-600 rst:hover:bg-teal-500 rst:dark:bg-teal-600 rst:dark:hover:bg-teal-500 rst:text-teal-600-ink rst:hover:text-teal-500-ink rst:dark:hover:text-teal-500-ink"},{variant:"solid",colorScheme:"purple",className:"rst:bg-purple-600 rst:hover:bg-purple-700 rst:dark:bg-purple-600 rst:dark:hover:bg-purple-700 rst:text-purple-600-ink rst:hover:text-purple-700-ink rst:dark:hover:text-purple-700-ink"},{variant:"solid",colorScheme:"amber",className:"rst:bg-amber-400 rst:hover:bg-amber-500 rst:dark:bg-amber-500 rst:dark:hover:bg-amber-400 rst:text-amber-400-ink rst:hover:text-amber-500-ink rst:dark:text-amber-500-ink rst:dark:hover:text-amber-400-ink"},{variant:"solid",colorScheme:"success",className:"rst:bg-success-600 rst:hover:bg-success-700 rst:dark:bg-success-600 rst:dark:hover:bg-success-700 rst:text-success-600-ink rst:hover:text-success-700-ink rst:dark:hover:text-success-700-ink"},{variant:"solid",colorScheme:"error",className:"rst:bg-error-600 rst:hover:bg-error-700 rst:dark:bg-error-600 rst:dark:hover:bg-error-500 rst:text-error-600-ink rst:hover:text-error-700-ink rst:dark:hover:text-error-500-ink"},{variant:"solid",colorScheme:"neutral",className:"rst:bg-gray-600 rst:hover:bg-gray-700 rst:dark:bg-gray-600 rst:dark:hover:bg-gray-500 rst:text-gray-600-ink rst:hover:text-gray-700-ink rst:dark:hover:text-gray-500-ink"},{variant:"soft",colorScheme:"primary",className:"rst:bg-primary-50 rst:text-primary-700 rst:hover:bg-primary-100 rst:dark:bg-primary-900/40 rst:dark:text-primary-300 rst:dark:hover:bg-primary-900/60"},{variant:"soft",colorScheme:"orange",className:"rst:bg-orange-50 rst:text-orange-700 rst:hover:bg-orange-100 rst:dark:bg-orange-900/30 rst:dark:text-orange-300 rst:dark:hover:bg-orange-900/50"},{variant:"soft",colorScheme:"teal",className:"rst:bg-teal-100 rst:text-teal-800 rst:hover:bg-teal-200 rst:dark:bg-teal-900/30 rst:dark:text-teal-300 rst:dark:hover:bg-teal-900/50"},{variant:"soft",colorScheme:"purple",className:"rst:bg-purple-50 rst:text-purple-700 rst:hover:bg-purple-100 rst:dark:bg-purple-900/30 rst:dark:text-purple-300 rst:dark:hover:bg-purple-900/50"},{variant:"soft",colorScheme:"amber",className:"rst:bg-amber-50 rst:text-amber-800 rst:hover:bg-amber-100 rst:dark:bg-amber-900/30 rst:dark:text-amber-300 rst:dark:hover:bg-amber-900/50"},{variant:"soft",colorScheme:"success",className:"rst:bg-success-50 rst:text-success-700 rst:hover:bg-success-100 rst:dark:bg-success-900/30 rst:dark:text-success-300 rst:dark:hover:bg-success-900/50"},{variant:"soft",colorScheme:"error",className:"rst:bg-error-50 rst:text-error-700 rst:hover:bg-error-100 rst:dark:bg-error-900/30 rst:dark:text-error-300 rst:dark:hover:bg-error-900/50"},{variant:"soft",colorScheme:"neutral",className:"rst:bg-gray-100 rst:text-gray-700 rst:hover:bg-gray-200 rst:dark:bg-gray-800/50 rst:dark:text-gray-300 rst:dark:hover:bg-gray-800"},{variant:"outline",colorScheme:"primary",className:"rst:border-primary-600 rst:text-primary-600 rst:hover:bg-primary-50 rst:dark:border-primary-500 rst:dark:text-primary-400 rst:dark:hover:bg-primary-500/10"},{variant:"outline",colorScheme:"orange",className:"rst:border-orange-600 rst:text-orange-600 rst:hover:bg-orange-50 rst:dark:border-orange-500 rst:dark:text-orange-400 rst:dark:hover:bg-orange-500/10"},{variant:"outline",colorScheme:"teal",className:"rst:border-teal-600 rst:text-teal-600 rst:hover:bg-teal-50 rst:dark:border-teal-500 rst:dark:text-teal-400 rst:dark:hover:bg-teal-500/10"},{variant:"outline",colorScheme:"purple",className:"rst:border-purple-600 rst:text-purple-600 rst:hover:bg-purple-50 rst:dark:border-purple-500 rst:dark:text-purple-400 rst:dark:hover:bg-purple-500/10"},{variant:"outline",colorScheme:"amber",className:"rst:border-amber-600 rst:text-amber-600 rst:hover:bg-amber-50 rst:dark:border-amber-500 rst:dark:text-amber-400 rst:dark:hover:bg-amber-500/10"},{variant:"outline",colorScheme:"success",className:"rst:border-success-600 rst:text-success-600 rst:hover:bg-success-50 rst:dark:border-success-500 rst:dark:text-success-400 rst:dark:hover:bg-success-500/10"},{variant:"outline",colorScheme:"error",className:"rst:border-error-600 rst:text-error-600 rst:hover:bg-error-50 rst:dark:border-error-500 rst:dark:text-error-400 rst:dark:hover:bg-error-500/10"},{variant:"outline",colorScheme:"neutral",className:"rst:border-gray-300 rst:text-gray-700 rst:hover:bg-gray-50 rst:dark:border-gray-600 rst:dark:text-gray-300 rst:dark:hover:bg-gray-800/50"},{variant:"ghost",colorScheme:"primary",className:"rst:text-primary-600 rst:hover:bg-primary-500/10 rst:dark:text-primary-400 rst:dark:hover:bg-primary-400/15"},{variant:"ghost",colorScheme:"orange",className:"rst:text-orange-600 rst:hover:bg-orange-500/10 rst:dark:text-orange-400 rst:dark:hover:bg-orange-400/15"},{variant:"ghost",colorScheme:"teal",className:"rst:text-teal-600 rst:hover:bg-teal-500/10 rst:dark:text-teal-400 rst:dark:hover:bg-teal-400/15"},{variant:"ghost",colorScheme:"purple",className:"rst:text-purple-600 rst:hover:bg-purple-500/10 rst:dark:text-purple-400 rst:dark:hover:bg-purple-400/15"},{variant:"ghost",colorScheme:"amber",className:"rst:text-amber-600 rst:hover:bg-amber-500/10 rst:dark:text-amber-400 rst:dark:hover:bg-amber-400/15"},{variant:"ghost",colorScheme:"success",className:"rst:text-success-600 rst:hover:bg-success-500/10 rst:dark:text-success-400 rst:dark:hover:bg-success-400/15"},{variant:"ghost",colorScheme:"error",className:"rst:text-error-600 rst:hover:bg-error-500/10 rst:dark:text-error-400 rst:dark:hover:bg-error-400/15"},{variant:"ghost",colorScheme:"neutral",className:"rst:text-gray-600 rst:hover:bg-gray-500/10 rst:dark:text-gray-400 rst:dark:hover:bg-gray-400/15"},{variant:"link",colorScheme:"primary",className:"rst:text-primary-600 rst:hover:text-primary-700 rst:dark:text-primary-400 rst:dark:hover:text-primary-300"},{variant:"link",colorScheme:"orange",className:"rst:text-orange-600 rst:hover:text-orange-700 rst:dark:text-orange-400 rst:dark:hover:text-orange-300"},{variant:"link",colorScheme:"teal",className:"rst:text-teal-600 rst:hover:text-teal-700 rst:dark:text-teal-400 rst:dark:hover:text-teal-300"},{variant:"link",colorScheme:"purple",className:"rst:text-purple-600 rst:hover:text-purple-700 rst:dark:text-purple-400 rst:dark:hover:text-purple-300"},{variant:"link",colorScheme:"amber",className:"rst:text-amber-600 rst:hover:text-amber-700 rst:dark:text-amber-400 rst:dark:hover:text-amber-300"},{variant:"link",colorScheme:"success",className:"rst:text-success-600 rst:hover:text-success-700 rst:dark:text-success-400 rst:dark:hover:text-success-300"},{variant:"link",colorScheme:"error",className:"rst:text-error-600 rst:hover:text-error-700 rst:dark:text-error-400 rst:dark:hover:text-error-300"},{variant:"link",colorScheme:"neutral",className:"rst:text-gray-600 rst:hover:text-gray-900 rst:dark:text-gray-400 rst:dark:hover:text-gray-100"}],defaultVariants:{colorScheme:"primary",variant:"solid",size:"default"}});exports.buttonVariants=t;

package/dist/components/atoms/Button/button-variants.js

@@ -6,11 +6,13 @@ const e = /* @__PURE__ */ r(
     variants: {
       variant: {
         solid: "rst:border rst:border-transparent rst:elevation-control",
-        soft: "rst:border-transparent rst:shadow-none",
+        // `border-0`, here and on `link`: a <button> draws the browser's own
+        // border unless told otherwise, and an app without a reset would see
+        // it. Zero rather than the 1px the others have, because zero is what
+        // every app with a reset already draws: none of them moves.
+        soft: "rst:border-0 rst:shadow-none",
         outline: "rst:border rst:bg-transparent rst:elevation-control",
         ghost: "rst:border rst:border-transparent rst:bg-transparent",
-        // `border-0`: a <button> draws the browser's own border unless told
-        // otherwise, and an app without a reset would see it round a link.
         link: "rst:border-0 rst:bg-transparent rst:underline-offset-4 rst:hover:underline"
       },
       colorScheme: {

package/dist/components/atoms/Eyebrow/eyebrow-variants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../node_modules/class-variance-authority/dist/index.cjs"),r=t.cva("rst:font-mono rst:uppercase rst:leading-none",{variants:{size:{xs:"rst:text-[0.625rem] rst:tracking-[0.16em]",sm:"rst:text-[0.6875rem] rst:tracking-[0.14em]",md:"rst:text-xs rst:tracking-[0.12em]"},tone:{faint:"rst:text-gray-500 rst:dark:text-gray-400",default:"rst:text-gray-700 rst:dark:text-gray-300",strong:"rst:text-gray-900 rst:dark:text-gray-100",primary:"rst:text-primary-600 rst:dark:text-primary-400"},weight:{normal:"rst:font-normal",medium:"rst:font-medium",semibold:"rst:font-semibold"}},defaultVariants:{size:"xs",tone:"faint",weight:"normal"}});exports.eyebrowVariants=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../node_modules/class-variance-authority/dist/index.cjs"),r=t.cva("rst:font-mono rst:uppercase",{variants:{size:{xs:"rst:text-[0.625rem] rst:leading-none rst:tracking-[0.16em]",sm:"rst:text-[0.6875rem] rst:leading-none rst:tracking-[0.14em]",md:"rst:text-xs rst:leading-none rst:tracking-[0.12em]"},tone:{faint:"rst:text-gray-500 rst:dark:text-gray-400",default:"rst:text-gray-700 rst:dark:text-gray-300",strong:"rst:text-gray-900 rst:dark:text-gray-100",primary:"rst:text-primary-600 rst:dark:text-primary-400"},weight:{normal:"rst:font-normal",medium:"rst:font-medium",semibold:"rst:font-semibold"}},defaultVariants:{size:"xs",tone:"faint",weight:"normal"}});exports.eyebrowVariants=r;

package/dist/components/atoms/Eyebrow/eyebrow-variants.js

@@ -1,12 +1,16 @@
 import { cva as t } from "../../../node_modules/class-variance-authority/dist/index.js";
 const e = /* @__PURE__ */ t(
-  "rst:font-mono rst:uppercase rst:leading-none",
+  "rst:font-mono rst:uppercase",
   {
     variants: {
+      /* `leading-none` after each size, never before it: tailwind-merge
+         drops a line height that comes before a font size, because a size
+         can carry its own. Placed first, it was lost, and the line was 1.5
+         times the size instead of 1. */
       size: {
-        xs: "rst:text-[0.625rem] rst:tracking-[0.16em]",
-        sm: "rst:text-[0.6875rem] rst:tracking-[0.14em]",
-        md: "rst:text-xs rst:tracking-[0.12em]"
+        xs: "rst:text-[0.625rem] rst:leading-none rst:tracking-[0.16em]",
+        sm: "rst:text-[0.6875rem] rst:leading-none rst:tracking-[0.14em]",
+        md: "rst:text-xs rst:leading-none rst:tracking-[0.12em]"
       },
       tone: {
         faint: "rst:text-gray-500 rst:dark:text-gray-400",

package/dist/components/atoms/MultiSelect/MultiSelect.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),S=require("react"),Y=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),W=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),X=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),h=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.cjs"),G=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),T=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),F=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),s=require("../../../lib/utils.cjs"),R=require("../../../internal/field-invalid.cjs"),J=require("../Select/select-variants.cjs"),_=require("../Chip/Chip.cjs"),K=require("../../../internal/PopupOption.cjs"),c=require("../../../internal/popup.cjs"),Q=({options:x,value:n,onChange:m,placeholder:v="Select options",disabled:a=!1,variant:f,size:i,error:L,className:D,triggerClassName:A,optionsClassName:E,helperText:b,errorMessage:p,label:g,display:u="chips",maxChips:N,clearable:j=!1,chipColorScheme:w="neutral",chipVariant:k="outline",clearLabel:U="Clear selection",removeLabel:$=l=>`Remove ${l}`,...I})=>{const l=!!p||L,C=R.isFieldInvalid(l,I),V=R.withoutInvalidProps(I),o=n.length>0,P=new Map(x.map((r,e)=>[r.value,e])),d=n.map(r=>({value:r,label:x.find(e=>e.value===r)?.label??String(r)})).sort((r,e)=>(P.get(r.value)??Number.POSITIVE_INFINITY)-(P.get(e.value)??Number.POSITIVE_INFINITY)),y=N===void 0?d:d.slice(0,N),q=d.length-y.length,{ref:B,inDarkScope:H}=c.useDarkScope(),O=S.useRef(null);return t.jsxs(W.Field,{disabled:a,className:s.cn("rst:flex rst:flex-col rst:gap-1.5",D),...V,children:[g&&t.jsx(X.Label,{className:"rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",children:g}),t.jsx(h.Listbox,{value:n,onChange:m,disabled:a,multiple:!0,children:t.jsxs("div",{ref:B,className:"rst:relative",children:[t.jsxs("div",{className:s.cn(J.selectTriggerVariants({variant:f,size:i,error:l}),"rst:h-auto rst:flex-wrap rst:items-center rst:gap-1.5 rst:py-1.5",i==="sm"?"rst:min-h-9":i==="lg"?"rst:min-h-11":"rst:min-h-10",j&&o&&"rst:pr-16","rst:focus-within:ring-[length:calc(var(--roster-border-width,1px)+1px)] rst:focus-within:ring-ring",a&&"rst:opacity-50 rst:cursor-not-allowed",A),children:[t.jsx(h.ListboxButton,{ref:O,"aria-invalid":C||void 0,className:"rst:absolute rst:inset-0 rst:h-full rst:w-full rst:cursor-pointer rst:rounded-md rst:focus:outline-hidden rst:disabled:cursor-not-allowed",children:t.jsx("span",{className:"rst:sr-only",children:o?u==="count"?`${n.length} selected`:d.map(r=>r.label).join(", "):v})}),!o&&t.jsx("span",{"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:block rst:truncate rst:text-gray-500 rst:dark:text-gray-400",children:v}),o&&u==="count"&&t.jsxs("span",{"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:block rst:truncate",children:[n.length," selected"]}),o&&u==="chips"&&y.map((r,e)=>t.jsx(_.Chip,{size:"sm",variant:k,colorScheme:w,disabled:a,onRemove:()=>m(n.filter(M=>M!==r.value)),removeLabel:$(r.label),className:s.cn("rst:relative rst:max-w-[12rem] rst:pointer-events-none","rst:[&_button]:pointer-events-auto","rst:text-inherit rst:border-current/70 rst:dark:text-inherit rst:dark:border-current/70"),children:t.jsx("span",{className:"rst:block rst:truncate",children:r.label})},`${e}-${String(r.value)}`)),q>0&&u==="chips"&&t.jsxs(_.Chip,{size:"sm",variant:k,colorScheme:w,"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:text-inherit rst:border-current/70 rst:dark:text-inherit rst:dark:border-current/70",children:["+",q]}),t.jsx("span",{className:s.cn("rst:pointer-events-none rst:absolute rst:inset-y-0 rst:right-0 rst:flex rst:items-center",i==="sm"?"rst:pr-2.5":"rst:pr-3"),children:t.jsx(T.FontAwesomeIcon,{icon:F.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500","aria-hidden":"true"})}),j&&o&&t.jsx("button",{type:"button",disabled:a,onClick:()=>{m([]),O.current?.focus()},"aria-label":U,className:s.cn("rst:absolute rst:inset-y-0 rst:flex rst:w-6 rst:items-center rst:justify-center","rst:cursor-pointer rst:disabled:cursor-not-allowed","rst:text-current rst:opacity-70 rst:hover:opacity-100 rst:disabled:opacity-40","rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:rounded-sm",i==="sm"?"rst:right-7":"rst:right-8"),children:t.jsx(T.FontAwesomeIcon,{icon:F.faXmark,className:"rst:h-3.5 rst:w-3.5","aria-hidden":"true"})})]}),t.jsx(G.Transition,{as:S.Fragment,leave:"rst:transition rst:ease-in rst:duration-100",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",children:t.jsx(h.ListboxOptions,{anchor:c.POPUP_ANCHOR,className:s.cn(c.popupInDarkPalette(H,f)&&"dark",c.POPUP_PANEL,c.POPUP_WIDTH_OF_BUTTON,E),children:x.map(r=>t.jsx(K.PopupOption,{as:h.ListboxOption,value:r.value,disabled:r.disabled,size:i,children:r.label},r.value))})})]})}),(b||p)&&t.jsx(Y.Description,{className:s.cn("rst:text-xs rst:text-left",l?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400"),children:p||b})]})};exports.MultiSelect=Q;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),T=require("react"),W=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),X=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),G=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),h=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.cjs"),J=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),F=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),R=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),n=require("../../../lib/utils.cjs"),_=require("../../../internal/field-invalid.cjs"),K=require("../Select/select-variants.cjs"),D=require("../Chip/Chip.cjs"),Q=require("../../../internal/PopupOption.cjs"),c=require("../../../internal/popup.cjs"),Z=({options:x,value:i,onChange:m,placeholder:v="Select options",disabled:l=!1,variant:f,size:o,error:L,className:A,triggerClassName:E,optionsClassName:U,helperText:b,errorMessage:p,label:g,display:u="chips",maxChips:N,clearable:j=!1,chipColorScheme:w="neutral",chipVariant:k="outline",clearLabel:$="Clear selection",removeLabel:C=e=>`Remove ${e}`,countLabel:I=e=>`${e} selected`,...P})=>{const e=!!p||L,V=_.isFieldInvalid(e,P),B=_.withoutInvalidProps(P),a=i.length>0,y=new Map(x.map((r,s)=>[r.value,s])),d=i.map(r=>({value:r,label:x.find(s=>s.value===r)?.label??String(r)})).sort((r,s)=>(y.get(r.value)??Number.POSITIVE_INFINITY)-(y.get(s.value)??Number.POSITIVE_INFINITY)),q=N===void 0?d:d.slice(0,N),O=d.length-q.length,{ref:H,inDarkScope:M}=c.useDarkScope(),S=T.useRef(null);return t.jsxs(X.Field,{disabled:l,className:n.cn("rst:flex rst:flex-col rst:gap-1.5",A),...B,children:[g&&t.jsx(G.Label,{className:"rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",children:g}),t.jsx(h.Listbox,{value:i,onChange:m,disabled:l,multiple:!0,children:t.jsxs("div",{ref:H,className:"rst:relative",children:[t.jsxs("div",{className:n.cn(K.selectTriggerVariants({variant:f,size:o,error:e}),"rst:h-auto rst:flex-wrap rst:items-center rst:gap-1.5 rst:py-1.5",o==="sm"?"rst:min-h-9":o==="lg"?"rst:min-h-11":"rst:min-h-10",j&&a&&"rst:pr-16","rst:focus-within:ring-[length:calc(var(--roster-border-width,1px)+1px)] rst:focus-within:ring-ring",l&&"rst:opacity-50 rst:cursor-not-allowed",E),children:[t.jsx(h.ListboxButton,{ref:S,"aria-invalid":V||void 0,className:"rst:absolute rst:inset-0 rst:h-full rst:w-full rst:cursor-pointer rst:rounded-md rst:focus:outline-hidden rst:disabled:cursor-not-allowed",children:t.jsx("span",{className:"rst:sr-only",children:a?u==="count"?I(i.length):d.map(r=>r.label).join(", "):v})}),!a&&t.jsx("span",{"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:block rst:truncate rst:text-gray-500 rst:dark:text-gray-400",children:v}),a&&u==="count"&&t.jsx("span",{"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:block rst:truncate",children:I(i.length)}),a&&u==="chips"&&q.map((r,s)=>t.jsx(D.Chip,{size:"sm",variant:k,colorScheme:w,disabled:l,onRemove:()=>m(i.filter(Y=>Y!==r.value)),removeLabel:C(r.label),className:n.cn("rst:relative rst:max-w-[12rem] rst:pointer-events-none","rst:[&_button]:pointer-events-auto","rst:text-inherit rst:border-current/70 rst:dark:text-inherit rst:dark:border-current/70"),children:t.jsx("span",{className:"rst:block rst:truncate",children:r.label})},`${s}-${String(r.value)}`)),O>0&&u==="chips"&&t.jsxs(D.Chip,{size:"sm",variant:k,colorScheme:w,"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:text-inherit rst:border-current/70 rst:dark:text-inherit rst:dark:border-current/70",children:["+",O]}),t.jsx("span",{className:n.cn("rst:pointer-events-none rst:absolute rst:inset-y-0 rst:right-0 rst:flex rst:items-center",o==="sm"?"rst:pr-2.5":"rst:pr-3"),children:t.jsx(F.FontAwesomeIcon,{icon:R.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500","aria-hidden":"true"})}),j&&a&&t.jsx("button",{type:"button",disabled:l,onClick:()=>{m([]),S.current?.focus()},"aria-label":$,className:n.cn("rst:absolute rst:inset-y-0 rst:flex rst:w-6 rst:items-center rst:justify-center","rst:cursor-pointer rst:disabled:cursor-not-allowed","rst:text-current rst:opacity-70 rst:hover:opacity-100 rst:disabled:opacity-40","rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:rounded-sm",o==="sm"?"rst:right-7":"rst:right-8"),children:t.jsx(F.FontAwesomeIcon,{icon:R.faXmark,className:"rst:h-3.5 rst:w-3.5","aria-hidden":"true"})})]}),t.jsx(J.Transition,{as:T.Fragment,leave:"rst:transition rst:ease-in rst:duration-100",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",children:t.jsx(h.ListboxOptions,{anchor:c.POPUP_ANCHOR,className:n.cn(c.popupInDarkPalette(M,f)&&"dark",c.POPUP_PANEL,c.POPUP_WIDTH_OF_BUTTON,U),children:x.map(r=>t.jsx(Q.PopupOption,{as:h.ListboxOption,value:r.value,disabled:r.disabled,size:o,children:r.label},r.value))})})]})}),(b||p)&&t.jsx(W.Description,{className:n.cn("rst:text-xs rst:text-left",e?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400"),children:p||b})]})};exports.MultiSelect=Z;

package/dist/components/atoms/MultiSelect/MultiSelect.d.ts

@@ -70,6 +70,8 @@ export interface MultiSelectProps extends Omit<React.HTMLAttributes<HTMLDivEleme
      * tell apart, so this takes the label rather than being a constant.
      */
     removeLabel?: (label: string) => string;
+    /** With `display="count"`, how many are chosen: "3 selected". Shown, and said. */
+    countLabel?: (count: number) => string;
 }
-declare const MultiSelect: ({ options, value, onChange, placeholder, disabled, variant, size, error, className, triggerClassName, optionsClassName, helperText, errorMessage, label, display, maxChips, clearable, chipColorScheme, chipVariant, clearLabel, removeLabel, ...props }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: ({ options, value, onChange, placeholder, disabled, variant, size, error, className, triggerClassName, optionsClassName, helperText, errorMessage, label, display, maxChips, clearable, chipColorScheme, chipVariant, clearLabel, removeLabel, countLabel, ...props }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export { MultiSelect };