@medalsocial/meda 3.2.0 → 3.4.0

package/dist/booking/portal/family-editor.js

@@ -6,7 +6,7 @@ import { Field } from '../../primitives/field.js';
 import { Input } from '../../primitives/input.js';
 import { Textarea } from '../../primitives/textarea.js';
 import { BOOKING_INPUT_CLASS, BOOKING_TEXTAREA_CLASS, BookingButton } from '../internal/ui.js';
-import { fillLabel } from '../labels.js';
+import { fillLabel, labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 import { settle } from './action-result.js';
 import { AGE_CONFIRM_CARD_LABEL_KEYS, AgeConfirmCard, } from './age-confirm-card.js';
@@ -196,7 +196,7 @@ export function FamilyEditor({ labels, format, family, nouns, now = Date.now(),
             onSessionExpired?.();
             return null;
         }
-        return failure.message ?? labels['familyEditor.unreachable'];
+        return failure.message ?? labelText(labels['familyEditor.unreachable']);
     }
     /** Never ask about this child again. */
     function rememberAgeAnswer(personId) {
@@ -352,7 +352,7 @@ export function FamilyEditor({ labels, format, family, nouns, now = Date.now(),
                 adopt(result.family, row.key, isNew ? result.personId : null);
                 setStatuses({
                     [row.key]: result.fallback && gaveDetails
-                        ? { kind: 'saved', note: labels['familyEditor.savedNoDetails'] }
+                        ? { kind: 'saved', note: labelText(labels['familyEditor.savedNoDetails']) }
                         : { kind: 'saved' },
                 });
                 setListStatus(isNew ? { kind: 'saved' } : null);
@@ -371,13 +371,13 @@ export function FamilyEditor({ labels, format, family, nouns, now = Date.now(),
             showSaving({
                 rows: rows.filter((current) => current.key !== row.key),
                 statuses,
-                listStatus: { kind: 'saved', note: labels['familyEditor.removed'] },
+                listStatus: { kind: 'saved', note: labelText(labels['familyEditor.removed']) },
             });
             const result = await settle(() => onRemovePerson(target(row)));
             if (result.ok) {
                 adopt(result.family, row.key, null);
                 setStatuses({});
-                setListStatus({ kind: 'saved', note: labels['familyEditor.removed'] });
+                setListStatus({ kind: 'saved', note: labelText(labels['familyEditor.removed']) });
                 return;
             }
             fail(result, null);
@@ -404,18 +404,18 @@ export function DefaultFamilyMemberCard({ id, row, years, months, offerDetails,
     // A stylist no longer on the roster keeps their option rather than the
     // select silently showing «none» for a preference the backend still holds.
     const stylistOptions = row.stylist !== '' && !stylists.some((stylist) => stylist.id === row.stylist)
-        ? [...stylists, { id: row.stylist, name: labels['familyEditor.stylistFormer'] }]
+        ? [...stylists, { id: row.stylist, name: labelText(labels['familyEditor.stylistFormer']) }]
         : stylists;
     return (_jsxs("form", { onSubmit: (event) => {
             event.preventDefault();
             onSave();
-        }, "aria-label": name || labels['familyEditor.newRow'], className: cn('space-y-3 rounded-lg border border-border bg-card px-5 py-4', className), children: [_jsxs("div", { className: "grid grid-cols-[1fr_7rem] gap-3", children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-name`, children: labels['familyEditor.name'] }), _jsx(Input, { id: `${id}-name`, value: row.name, maxLength: 60, "aria-invalid": nameMissing || undefined, "aria-describedby": partial ? statusId : undefined, onChange: (event) => onPatch({ name: event.target.value }), className: BOOKING_INPUT_CLASS })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-year`, children: labels['familyEditor.birthYear'] }), _jsxs("select", { id: `${id}-year`, value: row.birthYear, "aria-invalid": yearMissing || undefined, "aria-describedby": partial ? statusId : undefined, onChange: (event) => onPatch({ birthYear: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.birthYearPlaceholder'] }), years.map((year) => (_jsx("option", { value: String(year), children: year }, year)))] })] })] }), offerDetails && (_jsx(DetailFields, { id: id, row: row, months: months, stylists: stylistOptions, labels: labels, onPatch: onPatch })), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(BookingButton, { type: "submit", size: "sm", children: labels['familyEditor.save'] }), _jsx(BookingButton, { type: "button", variant: "ghost", size: "sm", "aria-label": name
+        }, "aria-label": name || labelText(labels['familyEditor.newRow']), className: cn('space-y-3 rounded-lg border border-border bg-card px-5 py-4', className), children: [_jsxs("div", { className: "grid grid-cols-[1fr_7rem] gap-3", children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-name`, children: labels['familyEditor.name'] }), _jsx(Input, { id: `${id}-name`, value: row.name, maxLength: 60, "aria-invalid": nameMissing || undefined, "aria-describedby": partial ? statusId : undefined, onChange: (event) => onPatch({ name: event.target.value }), className: BOOKING_INPUT_CLASS })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-year`, children: labels['familyEditor.birthYear'] }), _jsxs("select", { id: `${id}-year`, value: row.birthYear, "aria-invalid": yearMissing || undefined, "aria-describedby": partial ? statusId : undefined, onChange: (event) => onPatch({ birthYear: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.birthYearPlaceholder'] }), years.map((year) => (_jsx("option", { value: String(year), children: year }, year)))] })] })] }), offerDetails && (_jsx(DetailFields, { id: id, row: row, months: months, stylists: stylistOptions, labels: labels, onPatch: onPatch })), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(BookingButton, { type: "submit", size: "sm", children: labels['familyEditor.save'] }), _jsx(BookingButton, { type: "button", variant: "ghost", size: "sm", "aria-label": name
                             ? fillLabel(labels['familyEditor.removeNamed'], { name })
-                            : labels['familyEditor.removeRow'], onClick: onRemove, children: labels['familyEditor.remove'] }), _jsx(RowStatusLine, { id: statusId, status: status, labels: labels })] })] }));
+                            : labelText(labels['familyEditor.removeRow']), onClick: onRemove, children: labels['familyEditor.remove'] }), _jsx(RowStatusLine, { id: statusId, status: status, labels: labels })] })] }));
 }
 /** Month, preferred stylist and a note for the stylist — where the backend keeps them. */
 function DetailFields({ id, row, months, stylists, labels, onPatch, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-month`, children: labels['familyEditor.birthMonth'] }), _jsxs("select", { id: `${id}-month`, value: row.birthMonth, onChange: (event) => onPatch({ birthMonth: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.birthMonthUnknown'] }), months.map((month, index) => (_jsx("option", { value: String(index + 1), children: month }, month)))] })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-stylist`, children: labels['familyEditor.stylist'] }), _jsxs("select", { id: `${id}-stylist`, value: row.stylist, onChange: (event) => onPatch({ stylist: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.stylistNone'] }), stylists.map((stylist) => (_jsx("option", { value: stylist.id, children: stylist.name }, stylist.id)))] })] })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-notes`, children: labels['familyEditor.notes'] }), _jsx(Textarea, { id: `${id}-notes`, rows: 2, maxLength: NOTES_MAX, placeholder: labels['familyEditor.notesPlaceholder'], value: row.notes, onChange: (event) => onPatch({ notes: event.target.value }), className: BOOKING_TEXTAREA_CLASS })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-month`, children: labels['familyEditor.birthMonth'] }), _jsxs("select", { id: `${id}-month`, value: row.birthMonth, onChange: (event) => onPatch({ birthMonth: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.birthMonthUnknown'] }), months.map((month, index) => (_jsx("option", { value: String(index + 1), children: month }, month)))] })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-stylist`, children: labels['familyEditor.stylist'] }), _jsxs("select", { id: `${id}-stylist`, value: row.stylist, onChange: (event) => onPatch({ stylist: event.target.value }), className: SELECT_CLASS, children: [_jsx("option", { value: "", children: labels['familyEditor.stylistNone'] }), stylists.map((stylist) => (_jsx("option", { value: stylist.id, children: stylist.name }, stylist.id)))] })] })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-notes`, children: labels['familyEditor.notes'] }), _jsx(Textarea, { id: `${id}-notes`, rows: 2, maxLength: NOTES_MAX, placeholder: labelText(labels['familyEditor.notesPlaceholder']), value: row.notes, onChange: (event) => onPatch({ notes: event.target.value }), className: BOOKING_TEXTAREA_CLASS })] })] }));
 }
 function RowStatusLine({ id, status, labels, }) {
     return (_jsxs("span", { "aria-live": "polite", className: "min-h-5 text-sm", children: [status?.kind === 'saved' && (_jsx("span", { id: id, className: "text-muted-foreground", children: status.note ?? labels['familyEditor.saved'] })), status?.kind === 'partial' && (_jsx(Field.Error, { id: id, children: labels['familyEditor.partial'] })), status?.kind === 'error' && _jsx(Field.Error, { id: id, children: status.message })] }));

package/dist/booking/portal/logout-button.d.ts

@@ -1,7 +1,8 @@
+import { type BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 import type { SaveResult } from '../types.js';
 export declare const LOGOUT_BUTTON_LABEL_KEYS: readonly ["logout.button", "logout.unreachable"];
-export type LogoutButtonLabels = Record<(typeof LOGOUT_BUTTON_LABEL_KEYS)[number], string>;
+export type LogoutButtonLabels = Record<(typeof LOGOUT_BUTTON_LABEL_KEYS)[number], BookingLabel>;
 /** `root` (the form), `button`, `error` (the live line under it). */
 export type LogoutButtonSlot = 'root' | 'button' | 'error';
 export interface LogoutButtonProps {

package/dist/booking/portal/logout-button.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useTransition } from 'react';
 import { BookingButton } from '../internal/ui.js';
+import { labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 export const LOGOUT_BUTTON_LABEL_KEYS = ['logout.button', 'logout.unreachable'];
 /** «Log out», locked while the callback runs. */
@@ -20,7 +21,7 @@ export function LogoutButton({ labels, onLogout, classNames }) {
                 result = { ok: false, message: '' };
             }
             if (!result.ok)
-                setError(result.message || labels['logout.unreachable']);
+                setError(result.message || labelText(labels['logout.unreachable']));
         });
     }
     return (_jsxs("form", { onSubmit: logout, className: slotClass(classNames, 'root'), children: [_jsx(BookingButton, { type: "submit", variant: "outline", disabled: pending, className: slotClass(classNames, 'button'), children: labels['logout.button'] }), _jsx("p", { "aria-live": "polite", className: slotClass(classNames, 'error', 'mt-2 text-sm text-destructive'), children: error })] }));

package/dist/booking/portal/portal-shell.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentType, type ReactNode } from 'react';
+import { type BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 export declare const PORTAL_SHELL_LABEL_KEYS: readonly ["portalShell.nav", "portalShell.navBar"];
 /**
@@ -6,7 +7,7 @@ export declare const PORTAL_SHELL_LABEL_KEYS: readonly ["portalShell.nav", "port
  * bottom bar. Only one of the two is displayed at a time; a pack may give both
  * the same name.
  */
-export type PortalShellLabels = Record<(typeof PORTAL_SHELL_LABEL_KEYS)[number], string>;
+export type PortalShellLabels = Record<(typeof PORTAL_SHELL_LABEL_KEYS)[number], BookingLabel>;
 /** An icon the shell draws beside a tab label (e.g. a lucide icon). */
 export type PortalShellIcon = ComponentType<{
     className?: string;

package/dist/booking/portal/portal-shell.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { cn } from '../../lib/utils.js';
+import { labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 export const PORTAL_SHELL_LABEL_KEYS = ['portalShell.nav', 'portalShell.navBar'];
 /**
@@ -26,12 +27,12 @@ export function PortalShell({ labels, tabs, tab: tabProp, defaultTab, onTabChang
             setUncontrolled(next);
         onTabChange?.(next);
     }
-    return (_jsxs("div", { className: slotClass(classNames, 'root', 'space-y-8'), children: [header, _jsxs("div", { className: "gap-10 lg:grid lg:grid-cols-[15rem_minmax(0,1fr)]", children: [_jsx("aside", { className: slotClass(classNames, 'rail', 'hidden lg:block'), children: _jsxs("div", { className: "sticky top-8 space-y-4", children: [account, _jsx("nav", { "aria-label": labels['portalShell.nav'], children: _jsx("ul", { className: "space-y-1", children: tabs.map(({ id, label, icon: Icon }) => (_jsx("li", { children: _jsxs("button", { type: "button", "aria-current": tab === id ? 'page' : undefined, onClick: () => select(id), className: cn(slotClass(classNames, 'railItem', 'flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-semibold transition-colors', tab === id
+    return (_jsxs("div", { className: slotClass(classNames, 'root', 'space-y-8'), children: [header, _jsxs("div", { className: "gap-10 lg:grid lg:grid-cols-[15rem_minmax(0,1fr)]", children: [_jsx("aside", { className: slotClass(classNames, 'rail', 'hidden lg:block'), children: _jsxs("div", { className: "sticky top-8 space-y-4", children: [account, _jsx("nav", { "aria-label": labelText(labels['portalShell.nav']), children: _jsx("ul", { className: "space-y-1", children: tabs.map(({ id, label, icon: Icon }) => (_jsx("li", { children: _jsxs("button", { type: "button", "aria-current": tab === id ? 'page' : undefined, onClick: () => select(id), className: cn(slotClass(classNames, 'railItem', 'flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-semibold transition-colors', tab === id
                                                     ? 'bg-foreground text-background'
                                                     : 'text-foreground hover:bg-muted'), tab === id && classNames?.railItemActive), children: [Icon && _jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0" }), label] }) }, id))) }) }), logout] }) }), _jsx("div", { className: "pb-28 lg:pb-0", children: tabs.map(({ id, label, content }) => (_jsxs("section", { hidden: tab !== id, "aria-label": label, 
                             // `space-y` on the section rather than a wrapper, so a hidden one
                             // contributes no margin.
-                            className: slotClass(classNames, 'section', 'space-y-10'), children: [content, id === logoutIn && logout && _jsx("div", { className: "lg:hidden", children: logout })] }, id))) })] }), _jsx("nav", { "aria-label": labels['portalShell.navBar'], className: slotClass(classNames, 'bar', 'fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur-md lg:hidden'), children: _jsx("ul", { className: "mx-auto flex max-w-lg", children: tabs.map(({ id, label, short, icon, shortIcon }) => {
+                            className: slotClass(classNames, 'section', 'space-y-10'), children: [content, id === logoutIn && logout && _jsx("div", { className: "lg:hidden", children: logout })] }, id))) })] }), _jsx("nav", { "aria-label": labelText(labels['portalShell.navBar']), className: slotClass(classNames, 'bar', 'fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur-md lg:hidden'), children: _jsx("ul", { className: "mx-auto flex max-w-lg", children: tabs.map(({ id, label, short, icon, shortIcon }) => {
                         const ShortIcon = shortIcon ?? icon;
                         return (_jsx("li", { className: "flex-1", children: _jsxs("button", { type: "button", "aria-current": tab === id ? 'page' : undefined, onClick: () => select(id), className: cn(slotClass(classNames, 'barItem', 'flex w-full flex-col items-center gap-1 px-2 py-3 text-[0.7rem] font-bold transition-colors', tab === id ? 'text-primary' : 'text-muted-foreground'), tab === id && classNames?.barItemActive), children: [ShortIcon && _jsx(ShortIcon, { "aria-hidden": "true", className: "size-5" }), short ?? label] }) }, id));
                     }) }) })] }));

package/dist/booking/portal/portal-unreachable.d.ts

@@ -1,9 +1,10 @@
 import type { ReactNode } from 'react';
 import type { BookingFormat } from '../format.js';
+import type { BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 export declare const PORTAL_UNREACHABLE_LABEL_KEYS: readonly ["portalUnreachable.heading", "portalUnreachable.body", "portalUnreachable.retry", "portalUnreachable.call"];
 /** `portalUnreachable.call` takes `{phone}`. */
-export type PortalUnreachableLabels = Record<(typeof PORTAL_UNREACHABLE_LABEL_KEYS)[number], string>;
+export type PortalUnreachableLabels = Record<(typeof PORTAL_UNREACHABLE_LABEL_KEYS)[number], BookingLabel>;
 /** - `root`: the section. - `heading`. - `actions`: the row of links. - `link`: each link. */
 export type PortalUnreachableSlot = 'root' | 'heading' | 'actions' | 'link';
 export interface PortalUnreachableProps {

package/dist/booking/portal/portal-unreachable.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { fillLabel } from '../labels.js';
+import { renderLabel } from '../internal/label-parts.js';
 import { slotClass } from '../slots.js';
 export const PORTAL_UNREACHABLE_LABEL_KEYS = [
     'portalUnreachable.heading',
@@ -15,5 +15,5 @@ export const PORTAL_UNREACHABLE_LABEL_KEYS = [
  */
 export function PortalUnreachable({ labels, format, phone, retryHref, logout, headingId = 'portal-unreachable-heading', classNames, }) {
     const link = slotClass(classNames, 'link', 'font-semibold text-primary underline underline-offset-4');
-    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h1", { id: headingId, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold md:text-3xl'), children: labels['portalUnreachable.heading'] }), _jsx("p", { className: "text-muted-foreground", children: labels['portalUnreachable.body'] }), _jsxs("div", { className: slotClass(classNames, 'actions', 'flex flex-wrap items-center gap-4'), children: [_jsx("a", { href: retryHref, className: link, children: labels['portalUnreachable.retry'] }), phone && (_jsx("a", { href: format.telHref(phone), className: link, children: fillLabel(labels['portalUnreachable.call'], { phone }) })), logout] })] }));
+    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h1", { id: headingId, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold md:text-3xl'), children: labels['portalUnreachable.heading'] }), _jsx("p", { className: "text-muted-foreground", children: labels['portalUnreachable.body'] }), _jsxs("div", { className: slotClass(classNames, 'actions', 'flex flex-wrap items-center gap-4'), children: [_jsx("a", { href: retryHref, className: link, children: labels['portalUnreachable.retry'] }), phone && (_jsx("a", { href: format.telHref(phone), className: link, children: renderLabel(labels['portalUnreachable.call'], { phone }) })), logout] })] }));
 }

package/dist/booking/portal/profile-form.d.ts

@@ -1,9 +1,10 @@
+import { type BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 import type { PortalProfileDto } from '../types.js';
 import { type PortalActionFailure } from './action-result.js';
 export declare const PROFILE_FORM_LABEL_KEYS: readonly ["profileForm.heading", "profileForm.firstName", "profileForm.lastName", "profileForm.phone", "profileForm.email", "profileForm.emailHelp", "profileForm.save", "profileForm.saved", "profileForm.restored", "profileForm.marketing", "profileForm.unreachable"];
 /** `marketing` is the consent sentence and usually names the business. */
-export type ProfileFormLabels = Record<(typeof PROFILE_FORM_LABEL_KEYS)[number], string>;
+export type ProfileFormLabels = Record<(typeof PROFILE_FORM_LABEL_KEYS)[number], BookingLabel>;
 /**
  * `root` (the section), `heading`, `form`, `status` (the save notice's live
  * region), `save` (the submit button), `consent` (the marketing box's field).

package/dist/booking/portal/profile-form.js

@@ -5,6 +5,7 @@ import { Checkbox } from '../../primitives/checkbox.js';
 import { Field } from '../../primitives/field.js';
 import { Input } from '../../primitives/input.js';
 import { BOOKING_CHECKBOX_CLASS, BOOKING_INPUT_CLASS, BookingButton } from '../internal/ui.js';
+import { labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 import { settle } from './action-result.js';
 export const PROFILE_FORM_LABEL_KEYS = [
@@ -103,7 +104,7 @@ export function ProfileForm({ labels, profile, onSave, onConsentChange, onSessio
             }
             setStatus({
                 kind: 'error',
-                message: result.message ?? labels['profileForm.unreachable'],
+                message: result.message ?? labelText(labels['profileForm.unreachable']),
                 field: 'field' in result && result.field === 'phone' ? 'phone' : null,
             });
         });
@@ -124,7 +125,7 @@ export function ProfileForm({ labels, profile, onSave, onConsentChange, onSessio
                 onSessionExpired?.();
                 return;
             }
-            setConsentError(labels['profileForm.unreachable']);
+            setConsentError(labelText(labels['profileForm.unreachable']));
         });
     }
     const view = shown.status;

package/dist/booking/portal/rebook-cards.d.ts

@@ -1,8 +1,9 @@
 import type { ComponentType } from 'react';
+import { type BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 import type { RebookSuggestion } from '../types.js';
 export declare const REBOOK_CARDS_LABEL_KEYS: readonly ["rebook.heading", "rebook.empty", "rebook.serviceFallback", "rebook.anyStylist", "rebook.cta"];
-export type RebookCardsLabels = Record<(typeof REBOOK_CARDS_LABEL_KEYS)[number], string>;
+export type RebookCardsLabels = Record<(typeof REBOOK_CARDS_LABEL_KEYS)[number], BookingLabel>;
 /** - `root`: the section. - `heading`. - `empty`. - `list`. - `card`. - `link`: the book link. */
 export type RebookCardsSlot = 'root' | 'heading' | 'empty' | 'list' | 'card' | 'link';
 export interface RebookCardProps {

package/dist/booking/portal/rebook-cards.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 export const REBOOK_CARDS_LABEL_KEYS = [
     'rebook.heading',
@@ -26,9 +27,9 @@ export function RebookCards({ suggestions, hrefFor, onRebook, labels, headingId
 /** One suggestion (an `<li>`): what · who for · with whom, and the book link. */
 export function DefaultRebookCard({ suggestion, href, onRebook, labels, classNames, }) {
     return (_jsxs("li", { className: slotClass(classNames, 'card', 'space-y-2 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "font-semibold", children: [
-                    suggestion.serviceName ?? labels['rebook.serviceFallback'],
+                    suggestion.serviceName ?? labelText(labels['rebook.serviceFallback']),
                     suggestion.bookedForName,
-                    suggestion.resourceName ?? labels['rebook.anyStylist'],
+                    suggestion.resourceName ?? labelText(labels['rebook.anyStylist']),
                 ]
                     .filter(Boolean)
                     .join(SEPARATOR) }), _jsx("a", { href: href, onClick: onRebook ? () => onRebook(suggestion) : undefined, className: slotClass(classNames, 'link', 'text-sm font-semibold text-primary underline underline-offset-4'), children: labels['rebook.cta'] })] }));

package/dist/booking/portal/upcoming-bookings.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentType } from 'react';
 import type { BookingFormat } from '../format.js';
+import { type BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 import type { PortalBookingDto } from '../types.js';
 export declare const UPCOMING_BOOKINGS_LABEL_KEYS: readonly ["upcoming.heading", "upcoming.empty", "upcoming.book", "upcoming.next", "upcoming.today", "upcoming.tomorrow", "upcoming.inDays", "upcoming.when", "upcoming.serviceFallback", "upcoming.anyStylist", "upcoming.manage", "upcoming.noManage", "upcoming.noManageWithPhone", "upcoming.call"];
@@ -9,7 +10,7 @@ export declare const UPCOMING_BOOKINGS_LABEL_KEYS: readonly ["upcoming.heading",
  * `upcoming.noManageWithPhone` `{call}` (where the `upcoming.call` link goes),
  * `upcoming.call` `{phone}`.
  */
-export type UpcomingBookingsLabels = Record<(typeof UPCOMING_BOOKINGS_LABEL_KEYS)[number], string>;
+export type UpcomingBookingsLabels = Record<(typeof UPCOMING_BOOKINGS_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root`: the section. - `heading`. - `empty`: the no-bookings box.
  * - `list`. - `card`: a plain card; `cardHero`: the first (next) one.

package/dist/booking/portal/upcoming-bookings.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../lib/utils.js';
-import { labelParts } from '../internal/label-parts.js';
+import { joinLabelParts, labelParts, renderLabel } from '../internal/label-parts.js';
 import { bookingButtonClass } from '../internal/ui.js';
-import { fillLabel } from '../labels.js';
+import { fillLabel, labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 export const UPCOMING_BOOKINGS_LABEL_KEYS = [
     'upcoming.heading',
@@ -29,29 +29,25 @@ const SEPARATOR = ' · ';
 function howFarOff(startTs, now, labels, format) {
     const days = format.clock.daysBetween(now, startTs);
     if (days <= 0)
-        return labels['upcoming.today'];
+        return labelText(labels['upcoming.today']);
     if (days === 1)
-        return labels['upcoming.tomorrow'];
+        return labelText(labels['upcoming.tomorrow']);
     return fillLabel(labels['upcoming.inDays'], { count: days });
 }
 /** What is booked and who for. */
 function whatLine(booking, labels) {
-    return [booking.serviceName ?? labels['upcoming.serviceFallback'], booking.bookedForName]
-        .filter(Boolean)
-        .join(SEPARATOR);
+    return joinLabelParts([booking.serviceName ?? labels['upcoming.serviceFallback'], booking.bookedForName], SEPARATOR);
 }
 /** When, with whom, and what it costs. */
 function whenLine(booking, now, labels, format) {
-    return [
-        fillLabel(labels['upcoming.when'], {
+    return joinLabelParts([
+        renderLabel(labels['upcoming.when'], {
             day: format.clock.dayLabel(booking.startTs, now),
             time: format.clock.formatTime(booking.startTs),
         }),
         booking.resourceName ?? labels['upcoming.anyStylist'],
         booking.amountOre === null ? null : format.price(booking.amountOre),
-    ]
-        .filter(Boolean)
-        .join(SEPARATOR);
+    ], SEPARATOR);
 }
 /**
  * «Upcoming appointments» — one card per appointment still ahead.
@@ -72,7 +68,7 @@ export function UpcomingBookings({ bookings, phone, labels, format, bookingHref,
 export function DefaultBookingCard({ booking, phone, now, hero, labels, format, classNames, }) {
     return (_jsxs("li", { className: cn('space-y-2 px-5 py-4', hero
             ? slotClass(classNames, 'cardHero', 'rounded-2xl bg-primary p-6 text-primary-foreground md:p-8')
-            : slotClass(classNames, 'card', 'rounded-lg border border-border bg-card')), children: [hero && (_jsxs("p", { className: slotClass(classNames, 'badge', 'inline-flex items-center gap-2 rounded-full bg-primary-foreground/15 px-3 py-1 text-xs font-bold'), children: [_jsx("span", { "aria-hidden": "true", className: "size-2 rounded-full bg-current" }), fillLabel(labels['upcoming.next'], {
+            : slotClass(classNames, 'card', 'rounded-lg border border-border bg-card')), children: [hero && (_jsxs("p", { className: slotClass(classNames, 'badge', 'inline-flex items-center gap-2 rounded-full bg-primary-foreground/15 px-3 py-1 text-xs font-bold'), children: [_jsx("span", { "aria-hidden": "true", className: "size-2 rounded-full bg-current" }), renderLabel(labels['upcoming.next'], {
                         when: howFarOff(booking.startTs, now, labels, format),
                     })] })), _jsx("p", { className: cn('font-semibold', hero && 'font-sans text-2xl md:text-3xl'), children: whatLine(booking, labels) }), _jsx("p", { className: cn('tabular-nums', hero && slotClass(classNames, 'heroMuted', 'text-primary-foreground/85')), children: whenLine(booking, now, labels, format) }), booking.managePath ? (_jsx("a", { href: booking.managePath, className: slotClass(classNames, 'manage', 'text-sm font-semibold underline underline-offset-4', hero
                     ? 'inline-block rounded-lg bg-background px-4 py-2 text-foreground no-underline'
@@ -80,7 +76,7 @@ export function DefaultBookingCard({ booking, phone, now, hero, labels, format,
                     ? slotClass(classNames, 'heroMuted', 'text-primary-foreground/85')
                     : 'text-muted-foreground'), children: phone
                     ? labelParts(labels['upcoming.noManageWithPhone'], {
-                        call: (_jsx("a", { href: format.telHref(phone), className: cn('font-semibold underline underline-offset-4', hero ? 'text-primary-foreground' : 'text-primary'), children: fillLabel(labels['upcoming.call'], { phone }) })),
+                        call: (_jsx("a", { href: format.telHref(phone), className: cn('font-semibold underline underline-offset-4', hero ? 'text-primary-foreground' : 'text-primary'), children: renderLabel(labels['upcoming.call'], { phone }) })),
                     })
                     : // No number on file: the sentence without a link, because a `tel:`
                         // that dials nothing fails in the hand of someone already stuck.

package/dist/booking/portal/vipps-link-row.d.ts

@@ -1,6 +1,7 @@
+import { type BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 export declare const VIPPS_LINK_ROW_LABEL_KEYS: readonly ["vippsLink.heading", "vippsLink.linked", "vippsLink.pitch", "vippsLink.button", "vippsLink.success", "vippsLink.conflict", "vippsLink.failed", "vippsLink.unavailable", "vippsLink.throttled"];
-export type VippsLinkRowLabels = Record<(typeof VIPPS_LINK_ROW_LABEL_KEYS)[number], string>;
+export type VippsLinkRowLabels = Record<(typeof VIPPS_LINK_ROW_LABEL_KEYS)[number], BookingLabel>;
 /** `root` (the section), `card` (the bordered row), `heading`, `button`, `notice` (the live line). */
 export type VippsLinkRowSlot = 'root' | 'card' | 'heading' | 'button' | 'notice';
 /** The outcome of a link attempt that just returned, as the server recorded it. */

package/dist/booking/portal/vipps-link-row.js

@@ -4,6 +4,7 @@ import { useActionState, useEffect, useId, useRef } from 'react';
 import { useFormStatus } from 'react-dom';
 import { cn } from '../../lib/utils.js';
 import { BookingButton } from '../internal/ui.js';
+import { labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 export const VIPPS_LINK_ROW_LABEL_KEYS = [
     'vippsLink.heading',
@@ -23,17 +24,17 @@ function LinkButton({ label, className }) {
 /** The sentence under the row: a failed start first, else what the return said. */
 function noticeFor(state, isLinked, flash, labels, announceSuccess) {
     if (state?.reason === 'unavailable')
-        return labels['vippsLink.unavailable'];
+        return labelText(labels['vippsLink.unavailable']);
     if (state?.reason === 'throttled')
-        return labels['vippsLink.throttled'];
+        return labelText(labels['vippsLink.throttled']);
     if (flash === 'linked' && announceSuccess)
-        return labels['vippsLink.success'];
+        return labelText(labels['vippsLink.success']);
     if (isLinked)
         return null;
     if (flash === 'link_conflict')
-        return labels['vippsLink.conflict'];
+        return labelText(labels['vippsLink.conflict']);
     if (flash === 'link_failed')
-        return labels['vippsLink.failed'];
+        return labelText(labels['vippsLink.failed']);
     return null;
 }
 /**
@@ -76,5 +77,5 @@ export function VippsLinkRow({ labels, linked, flash, onStart, onSessionExpired,
     const sentence = noticeFor(state, linked, flash, labels, announceSuccess);
     const headingId = `${id}-heading`;
     const noticeId = `${id}-notice`;
-    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-2'), children: [_jsxs("div", { className: slotClass(classNames, 'card', 'flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: headingId, className: slotClass(classNames, 'heading', 'font-semibold'), children: labels['vippsLink.heading'] }), _jsx("p", { className: "text-sm text-muted-foreground", children: linked ? labels['vippsLink.linked'] : labels['vippsLink.pitch'] })] }), !linked && (_jsx("form", { action: formAction, "aria-describedby": sentence ? noticeId : undefined, children: _jsx(LinkButton, { label: labels['vippsLink.button'], className: classNames?.button }) }))] }), _jsx("div", { "aria-live": "polite", className: slotClass(classNames, 'notice', 'min-h-5'), children: sentence && (_jsx("p", { id: noticeId, className: "text-sm text-muted-foreground", children: sentence })) })] }));
+    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-2'), children: [_jsxs("div", { className: slotClass(classNames, 'card', 'flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: headingId, className: slotClass(classNames, 'heading', 'font-semibold'), children: labels['vippsLink.heading'] }), _jsx("p", { className: "text-sm text-muted-foreground", children: linked ? labels['vippsLink.linked'] : labels['vippsLink.pitch'] })] }), !linked && (_jsx("form", { action: formAction, "aria-describedby": sentence ? noticeId : undefined, children: _jsx(LinkButton, { label: labelText(labels['vippsLink.button']), className: classNames?.button }) }))] }), _jsx("div", { "aria-live": "polite", className: slotClass(classNames, 'notice', 'min-h-5'), children: sentence && (_jsx("p", { id: noticeId, className: "text-sm text-muted-foreground", children: sentence })) })] }));
 }

package/dist/booking/portal/visit-history.d.ts

@@ -1,10 +1,11 @@
 import { type ComponentType } from 'react';
 import type { BookingClock, BookingFormat } from '../format.js';
+import type { BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 import type { PortalBookingDto } from '../types.js';
 export declare const VISIT_HISTORY_LABEL_KEYS: readonly ["history.heading", "history.empty", "history.serviceFallback", "history.count.one", "history.count.other", "history.unknownAmount"];
 /** `history.count.*` take `{count}` and `{year}`. */
-export type VisitHistoryLabels = Record<(typeof VISIT_HISTORY_LABEL_KEYS)[number], string>;
+export type VisitHistoryLabels = Record<(typeof VISIT_HISTORY_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root`: the section. - `heading`. - `empty`: the no-visits box.
  * - `yearChip` / `yearChipSelected`: the year switcher's buttons.

package/dist/booking/portal/visit-history.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { cn } from '../../lib/utils.js';
-import { fillLabel } from '../labels.js';
+import { renderLabel } from '../internal/label-parts.js';
 import { slotClass } from '../slots.js';
 export const VISIT_HISTORY_LABEL_KEYS = [
     'history.heading',
@@ -60,7 +60,7 @@ export function VisitHistory({ past, labels, format, years: yearsProp, headingId
                             return (_jsx("button", { type: "button", "aria-pressed": pressed, onClick: () => setSelected(year.year), className: cn(slotClass(classNames, 'yearChip', 'rounded-full border px-4 py-1.5 text-sm font-semibold transition-colors', pressed
                                     ? 'border-foreground bg-foreground text-background'
                                     : 'border-border hover:bg-muted'), pressed && classNames?.yearChipSelected), children: year.year }, year.year));
-                        }) })), _jsx("ul", { className: slotClass(classNames, 'list', 'divide-y divide-border border-y border-border'), children: shown.visits.map((visit) => (_jsx(Row, { visit: visit, labels: labels, format: format, classNames: classNames }, visit.bookingId))) }), _jsxs("p", { className: slotClass(classNames, 'total', 'flex flex-wrap items-baseline justify-between gap-3 rounded-lg bg-muted px-5 py-4'), children: [_jsx("span", { className: "font-semibold", children: fillLabel(labels[shown.visits.length === 1 ? 'history.count.one' : 'history.count.other'], { count: shown.visits.length, year: shown.year }) }), _jsx("span", { className: "font-sans text-lg font-bold tabular-nums", children: shown.totalOre === null
+                        }) })), _jsx("ul", { className: slotClass(classNames, 'list', 'divide-y divide-border border-y border-border'), children: shown.visits.map((visit) => (_jsx(Row, { visit: visit, labels: labels, format: format, classNames: classNames }, visit.bookingId))) }), _jsxs("p", { className: slotClass(classNames, 'total', 'flex flex-wrap items-baseline justify-between gap-3 rounded-lg bg-muted px-5 py-4'), children: [_jsx("span", { className: "font-semibold", children: renderLabel(labels[shown.visits.length === 1 ? 'history.count.one' : 'history.count.other'], { count: shown.visits.length, year: shown.year }) }), _jsx("span", { className: "font-sans text-lg font-bold tabular-nums", children: shown.totalOre === null
                                     ? labels['history.unknownAmount']
                                     : format.price(shown.totalOre) })] })] }))] }));
 }

package/dist/booking/service-screen.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentType } from 'react';
 import type { BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingServiceDto } from './types.js';
 /**
@@ -10,15 +11,16 @@ import type { BookingServiceDto } from './types.js';
  * already holds a child.
  */
 export declare const SERVICE_SCREEN_LABEL_KEYS: readonly ["service.heading", "service.categoriesLegend", "service.sameAsLast", "service.chooseOther", "service.duration", "service.phoneOnly", "service.phoneOnlyLinkLabel", "service.ageDivider.named", "service.ageDivider.unnamed", "service.party.listLabel", "service.party.adultAlone", "service.party.nothingFits", "service.party.remove"];
-export type ServiceScreenLabels = Record<(typeof SERVICE_SCREEN_LABEL_KEYS)[number], string>;
+export type ServiceScreenLabels = Record<(typeof SERVICE_SCREEN_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root` — the `<section>`
  * - `heading` — the `<h2>`
  * - `pill` / `pillSelected` — a category pill / the marked one
  * - `groupHeading` — a category's (or a party member's) `<h3>`
  * - `card` / `cardSelected` — a service card / a pressed one (passed to `ServiceCard`)
+ * - `price` — a card's price (passed to `ServiceCard`, and the «same as last time» card's)
  */
-export type ServiceScreenSlot = 'root' | 'heading' | 'pill' | 'pillSelected' | 'groupHeading' | 'card' | 'cardSelected';
+export type ServiceScreenSlot = 'root' | 'heading' | 'pill' | 'pillSelected' | 'groupHeading' | 'card' | 'cardSelected' | 'price';
 /** One service group, in display order. */
 export interface ServiceScreenCategory {
     key: string;
@@ -56,6 +58,8 @@ export interface ServiceCardProps {
     labels: ServiceScreenLabels;
     className?: string;
     selectedClassName?: string;
+    /** Merged onto the price (the `price` slot). */
+    priceClassName?: string;
 }
 export interface ServiceScreenComponents {
     ServiceCard?: ComponentType<ServiceCardProps>;
@@ -134,4 +138,4 @@ export declare function ServiceScreen(props: ServiceScreenProps): import("react"
  *   online, and a tap target that accepts the tap and does nothing is the dead
  *   end the phone number replaces. The card stays so the catalogue is whole.
  */
-export declare function DefaultServiceCard({ service, kind, selected, onPick, phone, format, labels, className, selectedClassName, }: ServiceCardProps): import("react").JSX.Element;
+export declare function DefaultServiceCard({ service, kind, selected, onPick, phone, format, labels, className, selectedClassName, priceClassName, }: ServiceCardProps): import("react").JSX.Element;

package/dist/booking/service-screen.js

@@ -2,8 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { cn } from '../lib/utils.js';
+import { renderLabel } from './internal/label-parts.js';
 import { BookingButton } from './internal/ui.js';
-import { fillLabel } from './labels.js';
+import { fillLabel, labelText } from './labels.js';
 import { slotClass } from './slots.js';
 /**
  * The service step — what should be done?
@@ -36,7 +37,7 @@ const asIs = (name) => name;
 /** The age divider's sentence for `name`. */
 function ageDividerLabel(labels, name, possessive) {
     if (!name)
-        return labels['service.ageDivider.unnamed'];
+        return labelText(labels['service.ageDivider.unnamed']);
     return fillLabel(labels['service.ageDivider.named'], {
         name,
         nameGenitive: possessive(name),
@@ -57,6 +58,7 @@ function cardProps(shared) {
         labels: shared.labels,
         className: shared.classNames?.card,
         selectedClassName: shared.classNames?.cardSelected,
+        priceClassName: shared.classNames?.price,
     };
 }
 export function ServiceScreen(props) {
@@ -187,7 +189,7 @@ function PartyServiceScreen({ services, categories, categoryOf, childCategory, s
  */
 function NothingInThisParty({ person, labels, onRemove, }) {
     const values = { label: person.label };
-    return (_jsxs("div", { className: "space-y-2 rounded-lg border border-dashed border-border px-5 py-4 text-sm", children: [_jsx("p", { children: fillLabel(labels[person.adult ? 'service.party.adultAlone' : 'service.party.nothingFits'], values) }), onRemove && (_jsx("button", { type: "button", onClick: onRemove, className: "font-semibold text-primary underline underline-offset-4", children: fillLabel(labels['service.party.remove'], values) }))] }));
+    return (_jsxs("div", { className: "space-y-2 rounded-lg border border-dashed border-border px-5 py-4 text-sm", children: [_jsx("p", { children: renderLabel(labels[person.adult ? 'service.party.adultAlone' : 'service.party.nothingFits'], values) }), onRemove && (_jsx("button", { type: "button", onClick: onRemove, className: "font-semibold text-primary underline underline-offset-4", children: renderLabel(labels['service.party.remove'], values) }))] }));
 }
 /**
  * One person with a «same as last time»: the suggestion as the answer, and the
@@ -206,7 +208,7 @@ function SameAsLast({ suggestion, selected, onPick, shared, }) {
     const { labels, format, classNames } = shared;
     return (_jsxs("div", { className: "space-y-1", children: [_jsxs("button", { type: "button", "aria-pressed": selected, onClick: onPick, className: cn('flex min-h-14 w-full items-baseline justify-between gap-4 rounded-lg border px-5 py-4 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary', selected
                     ? 'border-primary bg-primary/5 ring-2 ring-primary'
-                    : 'border-primary/60 bg-card hover:border-primary', classNames?.card, selected && classNames?.cardSelected), children: [_jsxs("span", { children: [_jsx("span", { className: "block text-xs font-bold tracking-wide text-primary uppercase", children: labels['service.sameAsLast'] }), _jsx("span", { className: "font-medium", children: service.name })] }), _jsxs("span", { className: "flex items-baseline gap-4 text-right", children: [_jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: fillLabel(labels['service.duration'], { minutes: service.durationMinutes }) }), _jsx("span", { className: "whitespace-nowrap font-semibold text-foreground tabular-nums", children: format.price(service.priceOre) })] })] }), note && _jsx("p", { className: "text-sm text-muted-foreground", children: note })] }));
+                    : 'border-primary/60 bg-card hover:border-primary', classNames?.card, selected && classNames?.cardSelected), children: [_jsxs("span", { children: [_jsx("span", { className: "block text-xs font-bold tracking-wide text-primary uppercase", children: labels['service.sameAsLast'] }), _jsx("span", { className: "font-medium", children: service.name })] }), _jsxs("span", { className: "flex items-baseline gap-4 text-right", children: [_jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: renderLabel(labels['service.duration'], { minutes: service.durationMinutes }) }), _jsx("span", { className: slotClass(classNames, 'price', 'whitespace-nowrap font-semibold text-foreground tabular-nums'), children: format.price(service.priceOre) })] })] }), note && _jsx("p", { className: "text-sm text-muted-foreground", children: note })] }));
 }
 /**
  * The default service card.
@@ -218,9 +220,9 @@ function SameAsLast({ suggestion, selected, onPick, shared, }) {
  *   online, and a tap target that accepts the tap and does nothing is the dead
  *   end the phone number replaces. The card stays so the catalogue is whole.
  */
-export function DefaultServiceCard({ service, kind, selected, onPick, phone, format, labels, className, selectedClassName, }) {
-    const duration = fillLabel(labels['service.duration'], { minutes: service.durationMinutes });
-    const price = (_jsx("span", { className: "whitespace-nowrap font-semibold text-foreground tabular-nums", children: format.price(service.priceOre) }));
+export function DefaultServiceCard({ service, kind, selected, onPick, phone, format, labels, className, selectedClassName, priceClassName, }) {
+    const duration = renderLabel(labels['service.duration'], { minutes: service.durationMinutes });
+    const price = (_jsx("span", { className: cn('whitespace-nowrap font-semibold text-foreground tabular-nums', priceClassName), children: format.price(service.priceOre) }));
     if (kind === 'phone') {
         return (_jsxs("div", { className: cn('flex min-h-14 w-full items-baseline justify-between gap-4 rounded-lg border border-dashed border-border px-5 py-4', className), children: [_jsx("span", { className: "font-medium", children: service.name }), _jsxs("span", { className: "flex items-baseline gap-4 text-right", children: [_jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: duration }), _jsxs("span", { className: "text-sm", children: [labels['service.phoneOnly'], phone ? (_jsxs(_Fragment, { children: [' – ', _jsx("a", { href: format.telHref(phone), "aria-label": fillLabel(labels['service.phoneOnlyLinkLabel'], { phone }), className: "font-semibold text-primary underline underline-offset-4", children: phone })] })) : null] })] })] }));
     }

package/dist/booking/stylist-screen.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentType, type Ref } from 'react';
 import type { BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingResourceDto, PartyMode } from './types.js';
 /**
@@ -20,15 +21,16 @@ import type { BookingResourceDto, PartyMode } from './types.js';
  * available» included. Arrow keys move and choose, Tab enters and leaves once.
  */
 export declare const STYLIST_SCREEN_LABEL_KEYS: readonly ["stylist.heading", "stylist.firstAvailable", "stylist.firstAvailableSubtitle", "stylist.firstAvailableBadge", "stylist.pendingName", "stylist.nextAvailable", "stylist.loading", "stylist.party.legend", "stylist.party.sequential", "stylist.party.sequentialMinutes", "stylist.party.parallel.two", "stylist.party.parallel.three", "stylist.party.parallel.other", "stylist.party.parallelMinutes", "stylist.party.parallelNote.two", "stylist.party.parallelNote.three", "stylist.party.parallelNote.other"];
-export type StylistScreenLabels = Record<(typeof STYLIST_SCREEN_LABEL_KEYS)[number], string>;
+export type StylistScreenLabels = Record<(typeof STYLIST_SCREEN_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root` — the `<section>`
  * - `heading` — the `<h2>`
  * - `group` — the radiogroup (the sideways row / the column)
  * - `card` / `cardSelected` — a stylist option / the checked one (passed to `StylistCard`)
  * - `modeCard` / `modeCardSelected` — a family's mode card / the pressed one
+ * - `nextAvailable` — a stylist option's next-opening line (passed to `StylistCard`)
  */
-export type StylistScreenSlot = 'root' | 'heading' | 'group' | 'card' | 'cardSelected' | 'modeCard' | 'modeCardSelected';
+export type StylistScreenSlot = 'root' | 'heading' | 'group' | 'card' | 'cardSelected' | 'modeCard' | 'modeCardSelected' | 'nextAvailable';
 /** One option of the radiogroup as the card draws it. */
 export interface StylistOption {
     /** `null` is «first available». */
@@ -55,6 +57,8 @@ export interface StylistCardProps {
     labels: StylistScreenLabels;
     className?: string;
     selectedClassName?: string;
+    /** Merged onto the next-opening line (the `nextAvailable` slot). */
+    nextAvailableClassName?: string;
 }
 export interface StylistScreenComponents {
     StylistCard?: ComponentType<StylistCardProps>;
@@ -102,6 +106,14 @@ export interface StylistScreenProps {
         mode: PartyMode;
         /** How many people, for the option labels. */
         size: number;
+        /**
+         * The size as the copy spells it (e.g. «two»), filled into `{sizeWord}`
+         * in `stylist.party.parallel.*` and `stylist.party.parallelNote.*`.
+         * Default: the number. Lets a pack keep the word as its own text piece
+         * (`'We find {sizeWord} stylists …'`) rather than writing it into the
+         * sentence.
+         */
+        sizeWord?: string;
         /** How long the visit is in each mode. */
         minutes: {
             sequential: number;
@@ -114,4 +126,4 @@ export interface StylistScreenProps {
 }
 export declare function StylistScreen({ labels, format, now, serviceIds, resources, selectedResourceId, nextAvailableTs, nextAvailableLoading, loading, skeletonCount, pendingName, notice, onPick, party, classNames, components, }: StylistScreenProps): import("react").JSX.Element;
 /** The default stylist option: avatar (photo or badge), name(s), bio, next opening. */
-export declare function DefaultStylistCard({ ref, option, selected, tabIndex, onClick, labels, className, selectedClassName, }: StylistCardProps): import("react").JSX.Element;
+export declare function DefaultStylistCard({ ref, option, selected, tabIndex, onClick, labels, className, selectedClassName, nextAvailableClassName, }: StylistCardProps): import("react").JSX.Element;