@eocrm/design-system 0.6.23 → 0.7.0

package/dist/components/OtpInput/OtpInput.css

@@ -0,0 +1,121 @@
+:root {
+  --input-bg: var(--color-bg);
+  --input-fg: var(--color-fg);
+  --input-border-color: var(--color-border-strong);
+  --input-radius: var(--radius-md);
+  --input-line-height: var(--line-height-normal);
+  --input-placeholder-fg: var(--color-fg-subtle);
+  --input-border-color-focus: var(--color-accent);
+  --input-ring-focus: var(--ring-accent);
+  --input-bg-disabled: var(--color-bg-subtle);
+  --input-border-color-disabled: var(--color-border);
+  --input-fg-disabled: var(--color-fg-subtle);
+  --input-border-color-invalid: var(--color-danger);
+  --input-ring-invalid: var(--ring-danger);
+  --input-height-sm: var(--size-sm);
+  --input-height-md: var(--size-md);
+  --input-height-lg: var(--size-lg);
+  --input-padding-x-sm: var(--space-2);
+  --input-padding-x-md: var(--space-3);
+  --input-padding-x-lg: var(--space-3);
+  --input-font-size-sm: var(--font-size-sm);
+  --input-font-size-md: var(--font-size-md);
+  --input-font-size-lg: var(--font-size-lg);
+  --input-suggestions-bg: var(--color-bg);
+  --input-suggestions-border-color: var(--color-border);
+  --input-suggestions-radius: var(--radius-md);
+  --input-suggestions-shadow: var(--shadow-md);
+  --input-suggestions-padding: var(--space-1);
+  --input-suggestions-max-height: 320px;
+  --input-suggestion-padding-y: var(--space-2);
+  --input-suggestion-padding-x: var(--space-3);
+  --input-suggestion-font-size: var(--font-size-md);
+  --input-suggestion-fg: var(--color-fg);
+  --input-suggestion-radius: var(--radius-sm);
+  --input-suggestion-bg-active: var(--color-bg-muted);
+}
+
+:root {
+  --otp-input-gap: var(--space-2);
+  --otp-input-bg: var(--input-bg);
+  --otp-input-fg: var(--input-fg);
+  --otp-input-border-color: var(--input-border-color);
+  --otp-input-radius: var(--input-radius);
+  --otp-input-border-color-focus: var(--input-border-color-focus);
+  --otp-input-ring-focus: var(--input-ring-focus);
+  --otp-input-bg-disabled: var(--input-bg-disabled);
+  --otp-input-border-color-disabled: var(--input-border-color-disabled);
+  --otp-input-fg-disabled: var(--input-fg-disabled);
+  --otp-input-border-color-invalid: var(--input-border-color-invalid);
+  --otp-input-ring-invalid: var(--input-ring-invalid);
+  --otp-input-cell-size-sm: var(--size-sm);
+  --otp-input-cell-size-md: var(--size-md);
+  --otp-input-cell-size-lg: var(--size-lg);
+  --otp-input-cell-size-xl: var(--size-otp-cell-xl);
+  --otp-input-font-size-sm: var(--font-size-md);
+  --otp-input-font-size-md: var(--font-size-lg);
+  --otp-input-font-size-lg: var(--font-size-xl);
+  --otp-input-font-size-xl: var(--font-size-2xl);
+}
+
+.OtpInput__root__Q5E0F {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--otp-input-gap);
+}
+
+.OtpInput__cell__wLa66 {
+  padding: 0;
+  border: var(--border-width) solid var(--otp-input-border-color);
+  border-radius: var(--otp-input-radius);
+  background: var(--otp-input-bg);
+  color: var(--otp-input-fg);
+  font-family: inherit;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  transition: border-color var(--transition-fast), outline-color var(--transition-fast);
+}
+.OtpInput__cell__wLa66:focus-visible {
+  border-color: var(--otp-input-border-color-focus);
+  outline: var(--ring-width) solid var(--otp-input-ring-focus);
+  outline-offset: var(--ring-offset);
+}
+.OtpInput__cell__wLa66:disabled {
+  background: var(--otp-input-bg-disabled);
+  border-color: var(--otp-input-border-color-disabled);
+  color: var(--otp-input-fg-disabled);
+  cursor: not-allowed;
+}
+
+.OtpInput__size-sm__5_pjU {
+  width: var(--otp-input-cell-size-sm);
+  height: var(--otp-input-cell-size-sm);
+  font-size: var(--otp-input-font-size-sm);
+}
+
+.OtpInput__size-md__QdfoO {
+  width: var(--otp-input-cell-size-md);
+  height: var(--otp-input-cell-size-md);
+  font-size: var(--otp-input-font-size-md);
+}
+
+.OtpInput__size-lg__U_Pwu {
+  width: var(--otp-input-cell-size-lg);
+  height: var(--otp-input-cell-size-lg);
+  font-size: var(--otp-input-font-size-lg);
+}
+
+.OtpInput__size-xl__TGBIa {
+  width: var(--otp-input-cell-size-xl);
+  height: var(--otp-input-cell-size-xl);
+  font-size: var(--otp-input-font-size-xl);
+}
+
+.OtpInput__invalid__scNSu {
+  border-color: var(--otp-input-border-color-invalid);
+}
+.OtpInput__invalid__scNSu:focus-visible {
+  border-color: var(--otp-input-border-color-invalid);
+  outline: var(--ring-width) solid var(--otp-input-ring-invalid);
+  outline-offset: var(--ring-offset);
+}

package/dist/components/OtpInput/OtpInput.d.ts

@@ -0,0 +1,92 @@
+import { type HTMLAttributes } from 'react';
+/** Cell height. Matches the `<Input>` / `<Button>` size scale. */
+export type OtpInputSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Which characters the code is made of.
+ * - `'numeric'` — digits only (default). What SMS and email one-time codes
+ *   almost always are, and what the numeric mobile keypad is for.
+ * - `'alphanumeric'` — digits plus Latin letters, normalized to uppercase.
+ */
+export type OtpInputType = 'numeric' | 'alphanumeric';
+/**
+ * Props for {@link OtpInput}. Extends `HTMLAttributes<HTMLDivElement>` (minus
+ * `onChange` and `defaultValue`, which are redeclared below with
+ * component-specific signatures) since the group `<div>` is the element a
+ * consumer ultimately controls.
+ */
+export interface OtpInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** How many boxes to render. Default `6`. */
+    length?: number;
+    /**
+     * Controlled code. Sanitized and truncated to `length` on render, so a
+     * consumer echoing back a dirty string sees it cleaned rather than
+     * mis-sliced. Pair with `onChange`.
+     */
+    value?: string;
+    /** Uncontrolled seed. Ignored when `value` is supplied. */
+    defaultValue?: string;
+    /**
+     * Fires on every edit with the whole code so far — always sanitized, never
+     * longer than `length`, and never with a gap in the middle.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Fires whenever the code becomes full with a value different from the
+     * last one — not on every keystroke while it is full. Use it to submit.
+     * Correcting a wrong character inside an already-full code re-fires with
+     * the corrected value; retyping the same character does not, since
+     * nothing changed.
+     */
+    onComplete?: (value: string) => void;
+    /** Character set. Default `'numeric'`. See `OtpInputType`. */
+    type?: OtpInputType;
+    /**
+     * Cell size. Default `'md'`.
+     * - `'sm'` — 24px cells; dense admin screens.
+     * - `'md'` — 32px cells (default); most forms.
+     * - `'lg'` — 40px cells; a dedicated verification screen.
+     * - `'xl'` — 48px cells; a code field that IS the screen (IdP login
+     *   challenge, touch-first). Six cells still fit a 360px phone. No
+     *   `<Input>` counterpart at this height — don't line it up with fields.
+     */
+    size?: OtpInputSize;
+    /**
+     * Error visual on every cell plus `aria-invalid="true"`. Pair with a visible
+     * message and point `aria-describedby` at it (or wrap in `<Field error>`).
+     */
+    invalid?: boolean;
+    /** Disable every cell. */
+    disabled?: boolean;
+    /**
+     * Marks the field required. There is no single native input to attach the
+     * native `required` attribute to — a per-cell `required` would let the
+     * browser block submit on an empty first cell while accepting a
+     * 1-of-`length` code as complete, which is worse than no native gate at
+     * all. Sets `aria-required="true"` on every cell instead (the group's
+     * `role="group"` does not support `aria-required` per ARIA 1.2 — only
+     * `textbox` and a handful of other roles do), the same way `aria-invalid`
+     * and `aria-describedby` are already repeated on every cell. Validating
+     * completeness is the consumer's job (pair with `invalid` + `onComplete`).
+     */
+    required?: boolean;
+    /** Focus the first cell on mount. */
+    autoFocus?: boolean;
+    /** Id for the first cell, so an external `<label htmlFor>` focuses the field. */
+    id?: string;
+    /**
+     * Accessible name for the group. Defaults to the localized
+     * `otpInput.groupLabel` ("Verification code") when omitted OR empty — an
+     * empty string is not an explicit name — so a standalone OtpInput is never
+     * an unnamed group.
+     */
+    'aria-label'?: string;
+    /** Ids of elements naming the group. Injected by `<Field>`; wins over `aria-label`. */
+    'aria-labelledby'?: string;
+    /** Ids of description / error elements. Set on EVERY cell — see the remarks. */
+    'aria-describedby'?: string;
+}
+/**
+ * One-time-code field: `length` single-character boxes behaving as one control, with `autocomplete="one-time-code"` and auto-advance.
+ * @see docs/components/OtpInput.md
+ */
+export declare const OtpInput: import("react").ForwardRefExoticComponent<OtpInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/OtpInput/OtpInput.js

@@ -0,0 +1,141 @@
+'use client';
+import { useControllableState } from "../_internal/useControllableState.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import OtpInput_module_default from "./OtpInput.module.js";
+import { forwardRef, useCallback, useLayoutEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+// src/components/OtpInput/OtpInput.tsx
+var SANITIZE = {
+	numeric: (raw) => raw.replace(/[^0-9]/g, ""),
+	alphanumeric: (raw) => raw.replace(/[^0-9a-z]/gi, "").toUpperCase()
+};
+/**
+* One-time-code field: `length` single-character boxes behaving as one control, with `autocomplete="one-time-code"` and auto-advance.
+* @see docs/components/OtpInput.md
+*/
+var OtpInput = forwardRef(function OtpInput({ length = 6, value, defaultValue, onChange, onComplete, type = "numeric", size = "md", invalid, disabled, required, autoFocus, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className, ...rest }, ref) {
+	const t = useTranslation();
+	const sanitize = SANITIZE[type];
+	const [rawValue, setRawValue] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? "",
+		onChange
+	});
+	const code = sanitize(rawValue ?? "").slice(0, length);
+	const lastReachable = Math.min(code.length, length - 1);
+	const cellsRef = useRef([]);
+	const [focusedIndex, setFocusedIndex] = useState(null);
+	const activeIndex = Math.min(focusedIndex ?? lastReachable, lastReachable);
+	useLayoutEffect(() => {
+		const cell = cellsRef.current[activeIndex];
+		if (cell && document.activeElement === cell) cell.select();
+	}, [code, activeIndex]);
+	const focusCell = useCallback((index) => {
+		const cell = cellsRef.current[index];
+		cell?.focus();
+		cell?.select();
+	}, []);
+	const commit = useCallback((next) => {
+		setRawValue(next);
+		if (next.length === length && next !== code) onComplete?.(next);
+	}, [
+		setRawValue,
+		length,
+		code,
+		onComplete
+	]);
+	const handleChange = (rawIndex) => (event) => {
+		const index = Math.min(rawIndex, code.length);
+		const chars = sanitize(event.target.value);
+		if (chars.length === 0) {
+			if (event.target.value === "") commit(code.slice(0, index));
+			return;
+		}
+		const next = chars.length === length ? chars : (code.slice(0, index) + chars + code.slice(index + chars.length)).slice(0, length);
+		commit(next);
+		focusCell(Math.min(index + chars.length, length - 1));
+	};
+	const handleKeyDown = (rawIndex) => (event) => {
+		const index = Math.min(rawIndex, code.length);
+		switch (event.key) {
+			case "Backspace":
+				if (!code[index] && index > 0) {
+					event.preventDefault();
+					commit(code.slice(0, index - 1));
+					focusCell(index - 1);
+				}
+				break;
+			case "ArrowLeft":
+				event.preventDefault();
+				focusCell(Math.max(0, index - 1));
+				break;
+			case "ArrowRight":
+				event.preventDefault();
+				focusCell(Math.min(lastReachable, index + 1));
+				break;
+			case "Home":
+				event.preventDefault();
+				focusCell(0);
+				break;
+			case "End":
+				event.preventDefault();
+				focusCell(lastReachable);
+				break;
+			default: if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) event.currentTarget.select();
+		}
+	};
+	const handleMouseDown = (index) => (event) => {
+		if (index > lastReachable) {
+			event.preventDefault();
+			focusCell(lastReachable);
+		}
+	};
+	const handleFocus = (index) => (event) => {
+		setFocusedIndex(index);
+		event.target.select();
+	};
+	const handleClick = (event) => {
+		if (document.activeElement === event.currentTarget) event.currentTarget.select();
+	};
+	const cellLabel = type === "numeric" ? "otpInput.digit" : "otpInput.character";
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref,
+		role: "group",
+		"aria-label": ariaLabelledby ? void 0 : ariaLabel || t("otpInput.groupLabel"),
+		"aria-labelledby": ariaLabelledby,
+		className: clsx(OtpInput_module_default.root, className),
+		children: Array.from({ length }, (_unused, index) => /* @__PURE__ */ jsx("input", {
+			ref: (node) => {
+				cellsRef.current[index] = node;
+			},
+			type: "text",
+			value: code[index] ?? "",
+			onChange: handleChange(index),
+			onKeyDown: handleKeyDown(index),
+			onMouseDown: handleMouseDown(index),
+			onFocus: handleFocus(index),
+			onClick: handleClick,
+			id: index === 0 ? id : void 0,
+			autoFocus: autoFocus && index === 0,
+			disabled,
+			tabIndex: index === activeIndex ? 0 : -1,
+			inputMode: type === "numeric" ? "numeric" : "text",
+			pattern: type === "numeric" ? "[0-9]*" : void 0,
+			autoComplete: "one-time-code",
+			autoCorrect: "off",
+			autoCapitalize: "off",
+			spellCheck: false,
+			"aria-label": t(cellLabel, {
+				index: index + 1,
+				total: length
+			}),
+			"aria-invalid": invalid || void 0,
+			"aria-required": required || void 0,
+			"aria-describedby": ariaDescribedby,
+			className: clsx(OtpInput_module_default.cell, OtpInput_module_default[`size-${size}`], invalid && OtpInput_module_default.invalid)
+		}, index))
+	});
+});
+export { OtpInput };

package/dist/components/OtpInput/OtpInput.module.js

@@ -0,0 +1,15 @@
+import "./OtpInput.css";
+// src/components/OtpInput/OtpInput.module.scss
+var root = "OtpInput__root__Q5E0F";
+var cell = "OtpInput__cell__wLa66";
+var invalid = "OtpInput__invalid__scNSu";
+var OtpInput_module_default = {
+	root,
+	cell,
+	"size-sm": "OtpInput__size-sm__5_pjU",
+	"size-md": "OtpInput__size-md__QdfoO",
+	"size-lg": "OtpInput__size-lg__U_Pwu",
+	"size-xl": "OtpInput__size-xl__TGBIa",
+	invalid
+};
+export { cell, OtpInput_module_default as default, invalid, root };

package/dist/components/OtpInput/index.d.ts

@@ -0,0 +1,2 @@
+export { OtpInput } from './OtpInput.js';
+export type { OtpInputProps, OtpInputSize, OtpInputType } from './OtpInput.js';

package/dist/components/Page/Page.css

@@ -0,0 +1,37 @@
+:root {
+  --page-gap-xs: var(--space-1);
+  --page-gap-sm: var(--space-2);
+  --page-gap-md: var(--space-3);
+  --page-gap-lg: var(--space-4);
+  --page-gap-xl: var(--space-6);
+  --page-gap-2xl: var(--space-8);
+}
+
+.Page__root__KRQaE {
+  display: flex;
+  flex-direction: column;
+}
+
+.Page__gapXs__TlcoQ {
+  gap: var(--page-gap-xs);
+}
+
+.Page__gapSm__QQyIh {
+  gap: var(--page-gap-sm);
+}
+
+.Page__gapMd__idklg {
+  gap: var(--page-gap-md);
+}
+
+.Page__gapLg__r6m7j {
+  gap: var(--page-gap-lg);
+}
+
+.Page__gapXl__T77SF {
+  gap: var(--page-gap-xl);
+}
+
+.Page__gap2xl__SK877 {
+  gap: var(--page-gap-2xl);
+}

package/dist/components/Page/Page.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type StackGap } from '../Stack/index.js';
+/**
+ * Gap union for `<Page>`. Reuses `StackGap` so the scale stays
+ * synchronized across layout primitives — when Stack gains a size,
+ * Page gains it automatically.
+ */
+export type PageGap = StackGap;
+export interface PageProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Vertical rhythm between top-level page sections.
+     * - `xs` (4) / `sm` (8) / `md` (12) — tighter than canonical; rare.
+     * - `lg` (16, **default**) — the canonical CRM page rhythm; matches
+     *   every shipped mockup.
+     * - `xl` (24) / `2xl` (32) — looser; for spacious overview / hero pages.
+     */
+    gap?: PageGap;
+    children: ReactNode;
+}
+/**
+ * Page-root layout primitive: a thin Stack with the canonical `gap="lg"` rhythm between top-level sections.
+ * @see docs/components/Page.md
+ */
+export declare const Page: import("react").ForwardRefExoticComponent<PageProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Page/Page.js

@@ -0,0 +1,27 @@
+'use client';
+import Page_module_default from "./Page.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+// src/components/Page/Page.tsx
+var gapClass = {
+	xs: Page_module_default.gapXs,
+	sm: Page_module_default.gapSm,
+	md: Page_module_default.gapMd,
+	lg: Page_module_default.gapLg,
+	xl: Page_module_default.gapXl,
+	"2xl": Page_module_default.gap2xl
+};
+/**
+* Page-root layout primitive: a thin Stack with the canonical `gap="lg"` rhythm between top-level sections.
+* @see docs/components/Page.md
+*/
+var Page = forwardRef(function Page({ gap = "lg", className, children, ...rest }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: clsx(Page_module_default.root, gapClass[gap], className),
+		...rest,
+		children
+	});
+});
+export { Page };

package/dist/components/Page/Page.module.js

@@ -0,0 +1,19 @@
+import "./Page.css";
+// src/components/Page/Page.module.scss
+var root = "Page__root__KRQaE";
+var gapXs = "Page__gapXs__TlcoQ";
+var gapSm = "Page__gapSm__QQyIh";
+var gapMd = "Page__gapMd__idklg";
+var gapLg = "Page__gapLg__r6m7j";
+var gapXl = "Page__gapXl__T77SF";
+var gap2xl = "Page__gap2xl__SK877";
+var Page_module_default = {
+	root,
+	gapXs,
+	gapSm,
+	gapMd,
+	gapLg,
+	gapXl,
+	gap2xl
+};
+export { Page_module_default as default, gap2xl, gapLg, gapMd, gapSm, gapXl, gapXs, root };

package/dist/components/Page/index.d.ts

@@ -0,0 +1,2 @@
+export { Page } from './Page.js';
+export type { PageProps, PageGap } from './Page.js';

package/dist/components/PageHeader/PageHeader.css

@@ -0,0 +1,136 @@
+:root {
+  --page-header-title-min: var(--measure-2xs);
+  --page-header-col-gap: var(--space-3);
+  --page-header-padding-block-end: var(--space-3);
+  --page-header-border-color: var(--color-border);
+  --page-header-breadcrumb-gap: var(--space-2);
+  --page-header-meta-gap: var(--space-2);
+  --page-header-actions-gap: var(--space-2);
+  --page-header-breadcrumb-gap-block: var(--space-2);
+  --page-header-meta-gap-block: var(--space-2);
+  --page-header-back-button-size: 32px;
+  --page-header-back-button-radius: var(--radius-sm);
+  --page-header-back-button-fg: var(--color-fg-muted);
+  --page-header-back-button-bg-hover: var(--color-bg-muted);
+  --page-header-back-button-fg-hover: var(--color-fg);
+  --page-header-back-button-opacity-disabled: var(--opacity-disabled);
+  --page-header-subtitle-font-size: var(--font-size-md);
+  --page-header-subtitle-fg: var(--color-fg-muted);
+  --page-header-subtitle-line-height: var(--line-height-tight);
+  --page-header-actions-margin-top-narrow: var(--space-3);
+}
+
+.PageHeader__root__7w7nk {
+  display: grid;
+  grid-template-areas: "breadcrumb breadcrumb" "title actions" "subtitle actions" "meta actions";
+  grid-template-columns: minmax(0, 1fr) fit-content(calc(100% - var(--page-header-title-min) - var(--page-header-col-gap)));
+  gap: 0 var(--page-header-col-gap);
+  padding-block: 0 var(--page-header-padding-block-end);
+}
+
+.PageHeader__rootWithAside__wQCQr {
+  grid-template-areas: "breadcrumb breadcrumb breadcrumb" "aside title actions" "aside subtitle actions" "aside meta actions";
+  grid-template-columns: auto minmax(0, 1fr) fit-content(calc(100% - var(--page-header-title-min) - var(--page-header-col-gap)));
+}
+
+.PageHeader__rootWithBorder__QUf-y {
+  border-bottom: var(--border-width) solid var(--page-header-border-color);
+}
+
+.PageHeader__breadcrumb__A0tWP {
+  grid-area: breadcrumb;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  min-width: 0;
+  gap: var(--page-header-breadcrumb-gap);
+  padding-block-end: var(--page-header-breadcrumb-gap-block);
+}
+
+.PageHeader__breadcrumbInner__0d4Dw {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.PageHeader__backButton__Ym7wA {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--page-header-back-button-size);
+  height: var(--page-header-back-button-size);
+  background: transparent;
+  border: none;
+  border-radius: var(--page-header-back-button-radius);
+  color: var(--page-header-back-button-fg);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.PageHeader__backButton__Ym7wA:hover:not(:disabled) {
+  background: var(--page-header-back-button-bg-hover);
+  color: var(--page-header-back-button-fg-hover);
+}
+
+.PageHeader__backButton__Ym7wA:focus-visible {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: var(--ring-offset);
+}
+
+.PageHeader__backButton__Ym7wA:disabled {
+  cursor: not-allowed;
+  opacity: var(--page-header-back-button-opacity-disabled);
+}
+
+.PageHeader__aside__9VuhD {
+  grid-area: aside;
+  align-self: center;
+}
+
+.PageHeader__title__PFoLN {
+  grid-area: title;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.PageHeader__subtitle__jN8Eb {
+  grid-area: subtitle;
+  font-size: var(--page-header-subtitle-font-size);
+  color: var(--page-header-subtitle-fg);
+  line-height: var(--page-header-subtitle-line-height);
+  overflow-wrap: anywhere;
+}
+
+.PageHeader__meta__U6aPd {
+  grid-area: meta;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--page-header-meta-gap);
+  padding-block-start: var(--page-header-meta-gap-block);
+}
+
+.PageHeader__actions__t-zLw {
+  grid-area: actions;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--page-header-actions-gap);
+  align-self: center;
+}
+
+@media (max-width: 640px) {
+  .PageHeader__root__7w7nk {
+    grid-template-areas: "breadcrumb" "title" "subtitle" "meta" "actions";
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .PageHeader__rootWithAside__wQCQr {
+    grid-template-areas: "breadcrumb breadcrumb" "aside title" "aside subtitle" "aside meta" "actions actions";
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+  .PageHeader__actions__t-zLw {
+    margin-top: var(--page-header-actions-margin-top-narrow);
+  }
+}