@hirobius/design-system 0.13.0 → 0.14.0

package/NOTICE.md

@@ -0,0 +1,9 @@
+# License notice
+
+`@hirobius/design-system` is not under a single license.
+
+- **HDS code** (components, compiled JavaScript, types, CSS, and token files): MIT. See [LICENSE](LICENSE).
+- **Satoshi** (weights 500 and 700, by Indian Type Foundry, distributed through [Fontshare](https://www.fontshare.com/fonts/satoshi)): ITF Free Font License.
+- **Geist Mono** (weight 400, by Vercel, [source](https://github.com/vercel/geist-font)): SIL Open Font License 1.1.
+
+Both fonts are embedded as base64 `@font-face` data in `dist/tokens.css` and `dist/styles.css`. The MIT license does not cover them; each font keeps its own license. `dist/variables.css` embeds no fonts.

package/README.md

@@ -1,32 +1,27 @@
 # Hirobius Design System
 
-> ## 🧊 FROZEN — on the shelf (2026-07-09)
->
-> **HDS is a complete, shelved package. Active development is paused.** It is not
-> being ditched — it's a finished, tested body of work kept in git to check out
-> later: 133 components (Radix + `cva`), 351 DTCG tokens, ~110 Storybook stories,
-> a full guardrail suite, and the published `@hirobius/design-system@0.13.0` on npm.
->
-> **Why:** the design system was absorbing more maintenance (its highest-commit
-> month) than its two consumers justified — the marketing-site factory
-> (`hirobius/clients`) uses only its token spine (no React components), and the
-> only component consumer (the internal `hirobius/ops` dashboard) is dormant.
->
-> **What "frozen" means:** no new development. `0.13.0` is the **final clean cut**
-> (it folds in the icon fix + the static-primitive CSS layer + the scroll recipe);
-> the release workflow was re-enabled just to ship it and may be re-frozen after.
-> Chromatic stays manual-only. The published package stays installable. All future
-> work is tracked in the wind-down epic **#80**.
->
-> **To take it off the shelf:** restore the `pull_request`/`push` triggers in
-> `.github/workflows/{chromatic,release}.yml`, resume from `main`, and pick work
-> from #80.
->
-> **One human step (credential-gated, not automatable):** optionally run `npm
-deprecate "@hirobius/design-system@<=0.12.0" "Frozen — see the repo README"` to
-> flag the package as paused for npm browsers. It does not break installs.
+A publishable React + TypeScript component library backed by a governed design-token pipeline, published to npm as `@hirobius/design-system`.
+
+<!--
+  PLACEHOLDER — ADRIAN TO WRITE (hds front-door PR).
+  If you want the README to mention the July–September 2026 pause, put one or
+  two sentences here in your own words, then delete this comment. Leaving the
+  comment in place publishes nothing. Do not restore the old status line this
+  PR removed: CI, release, and Chromatic triggers were restored in #204.
+-->
+
+<!-- auto:start:front-door-counts -->
+
+- **108** public component modules, exported from `src/index.ts`
+- **362** DTCG tokens in `hirobius.tokens.json`, compiled to CSS variables and TypeScript constants
+- **447** Storybook stories in **113** story files, reviewed visually in Chromatic
+
+<!-- auto:end:front-door-counts -->
 
-A publishable React + TypeScript component library, backed by a governed design-token pipeline, a documentation site, and an automated verification suite — all in one repository.
+- Theming through four root attributes and CSS variables (theme, density, brand, font) that need no JavaScript
+- Deterministic gates in git hooks and CI: typecheck, zero-warning ESLint, token validity and contrast, Vitest unit and contract tests, bundle budgets, a consumer smoke build, and a Storybook build
+
+The counts are generated from source by `pnpm readme:counts`, which `pnpm tokens` also runs. `scripts/__tests__/front-door.test.mjs` fails if this README claims more than the source has.
 
 ## Using the published package
 
@@ -104,27 +99,43 @@ import { HdsThemeProvider } from '@hirobius/design-system';
 </HdsThemeProvider>;
 ```
 
+## Figma ↔ code
+
+Code is the source of truth, and sync runs one way, from code to Figma. What exists today:
+
+- **Tokens → Figma model:** `pnpm figma:model` projects `hirobius.tokens.json` into `figma/model.json` — the Primitives, Semantic (Light/Dark), Component, Role, Brand and Density collections, plus text and effect styles. Light and Dark keep their own values.
+- **Model → Figma file:** `pnpm figma:push` writes the upsert scripts that apply that model to a Figma file, and `pnpm figma:native-import` writes DTCG files for Figma's own Variables ▸ Import. Both are run by hand — no workflow pushes to Figma. The runbook is [`figma/README.md`](figma/README.md).
+- **Figma → repo:** `pnpm figma:snapshot --ingest` records the file's state in `figma/snapshot.json`, and `pnpm check:figma-drift` compares the model against that committed snapshot. A hand edit in Figma is drift, not a source change.
+- **Legacy export:** `pnpm figma-variables` still writes the older plugin and REST export files, now projected from the same model.
+- **Components → Code Connect:** the v2 templates live in the repo, but no Code Connect mapping is published, so Dev Mode shows no snippets. Publishing Code Connect needs a Figma Organization plan.
+
+What each Figma plan allows, and the Pro-plan architecture this follows, are in [ADR-025](docs/adr/025-figma-sync-pro-architecture.md).
+
 ## Developing this repo
 
 ```bash
 pnpm install
-pnpm dev
+# Generated data files are gitignored; create them once (the same step CI runs):
+node scripts/generate-manifest.mjs && node scripts/generate-component-api.mjs && node scripts/enrich-manifest.mjs && node scripts/sync-icons.mjs && node scripts/audit-tokens.mjs --full
+pnpm storybook   # component workbench on http://localhost:6006
 ```
 
 Core verification commands:
 
 ```bash
 pnpm typecheck
-pnpm run heal
-pnpm test:layout
+pnpm lint
+pnpm exec vitest run   # unit + contract tests, as the pre-push hook and CI run them
+pnpm tokens:verify
 pnpm check:size
+pnpm build-storybook
 ```
 
 ## Architecture
 
 HDS is built around three structural rules:
 
-- **Strict semantics** — public surfaces prefer system primitives such as `HdsStack`, `HdsGrid`, `HdsSurface`, `HdsTextLockup`, `DocLayout`, and `CaseStudyLayout` instead of raw layout divs or ad hoc CSS.
+- **Strict semantics** — public surfaces prefer system primitives such as `Stack`, `Grid`, `Surface`, and `TextLockup` instead of raw layout divs or ad hoc CSS.
 - **Polymorphism** — primitives preserve semantic HTML while staying composable through governed APIs such as `forwardRef`, `as`, and layout slots.
 - **12-column grid** — page structure follows a consistent editorial grid: readable center columns, intentional breakout zones, and explicit `gap` ownership rather than one-off spacing math.
 
@@ -136,6 +147,63 @@ Source-of-truth files:
 - `DESIGN.md` — lean visual spec for agents and engineers.
 - `DESIGN-HANDOFF.md` — verbose visual mirror for handoff and review.
 
+<!-- design-links:start (generated by `pnpm figma:links`; edit the @figma JSDoc tag, not this section) -->
+
+## Design ↔ Code links
+
+Each component has one Figma source: `figmaUrl` in `public/hds-manifest.json`, which `pnpm manifest:generate` sets from the `@figma` tag in the component JSDoc. `pnpm figma:links` keeps this table current and Storybook reads the same field (`parameters.design`). The Figma-side links (dev resources and component descriptions) exist only once someone runs their steps in [`figma/README.md`](figma/README.md).
+
+**44 of 139** components link a Figma node.
+
+| Component          | Figma node                                                                                         | Story                                                                      | Source                                                            |
+| ------------------ | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------- |
+| `Alert`            | [33:34](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34)   | [alert.stories.tsx](src/stories/alert.stories.tsx)                         | [alert.tsx](src/app/components/alert.tsx)                         |
+| `Avatar`           | [34:18](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=34-18)   | [avatar.stories.tsx](src/stories/avatar.stories.tsx)                       | [avatar.tsx](src/app/components/avatar.tsx)                       |
+| `Badge`            | [31:15](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=31-15)   | [badge.stories.tsx](src/stories/badge.stories.tsx)                         | [badge.tsx](src/app/components/badge.tsx)                         |
+| `Breadcrumb`       | [86:159](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159) | [breadcrumb.stories.tsx](src/stories/breadcrumb.stories.tsx)               | [breadcrumb.tsx](src/app/components/breadcrumb.tsx)               |
+| `Button`           | [28:138](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=28-138) | [button.stories.tsx](src/stories/button.stories.tsx)                       | [button.tsx](src/app/components/button.tsx)                       |
+| `Callout`          | [88:85](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-85)   | [callout.stories.tsx](src/stories/callout.stories.tsx)                     | [callout.tsx](src/app/components/callout.tsx)                     |
+| `Card`             | [39:11](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11)   | [card.stories.tsx](src/stories/card.stories.tsx)                           | [card.tsx](src/app/components/card.tsx)                           |
+| `CodeBlock`        | [89:154](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-154) | [code-block.stories.tsx](src/stories/code-block.stories.tsx)               | [code-block.tsx](src/app/components/code-block.tsx)               |
+| `Combobox`         | [82:237](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237) | [combobox.stories.tsx](src/stories/combobox.stories.tsx)                   | [combobox.tsx](src/app/components/combobox.tsx)                   |
+| `Dialog`           | [93:27](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-27)   | [dialog.stories.tsx](src/stories/dialog.stories.tsx)                       | [dialog.tsx](src/app/components/dialog.tsx)                       |
+| `Disclosure`       | [88:453](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453) | [disclosure.stories.tsx](src/stories/disclosure.stories.tsx)               | [disclosure.tsx](src/app/components/disclosure.tsx)               |
+| `Divider`          | [89:26](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26)   | [divider.stories.tsx](src/stories/divider.stories.tsx)                     | [divider.tsx](src/app/components/divider.tsx)                     |
+| `EmptyState`       | [88:352](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352) | [empty-state.stories.tsx](src/stories/empty-state.stories.tsx)             | [empty-state.tsx](src/app/components/empty-state.tsx)             |
+| `Field`            | [85:81](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-81)   | [field.stories.tsx](src/stories/field.stories.tsx)                         | [field.tsx](src/app/components/field.tsx)                         |
+| `Form`             | [85:94](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-94)   | [form.stories.tsx](src/stories/form.stories.tsx)                           | [form.tsx](src/app/components/form.tsx)                           |
+| `HdsCheckbox`      | [35:29](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29)   | [checkbox.stories.tsx](src/stories/checkbox.stories.tsx)                   | [checkbox.tsx](src/app/components/checkbox.tsx)                   |
+| `HdsRadio`         | [36:17](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17)   | [radio.stories.tsx](src/stories/radio.stories.tsx)                         | [radio.tsx](src/app/components/radio.tsx)                         |
+| `HdsSelect`        | [82:49](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-49)   | [select.stories.tsx](src/stories/select.stories.tsx)                       | [select.tsx](src/app/components/select.tsx)                       |
+| `HdsSlider`        | [82:265](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265) | [slider.stories.tsx](src/stories/slider.stories.tsx)                       | [slider.tsx](src/app/components/slider.tsx)                       |
+| `HdsToggle`        | [37:19](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19)   | [toggle.stories.tsx](src/stories/toggle.stories.tsx)                       | [toggle.tsx](src/app/components/toggle.tsx)                       |
+| `IconButton`       | [40:39](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=40-39)   | [icon-button.stories.tsx](src/stories/icon-button.stories.tsx)             | [icon-button.tsx](src/app/components/icon-button.tsx)             |
+| `InlineCode`       | [89:155](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-155) | [inline-code.stories.tsx](src/stories/inline-code.stories.tsx)             | [inline-code.tsx](src/app/components/inline-code.tsx)             |
+| `InlineLink`       | [89:161](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161) | [inline-link.stories.tsx](src/stories/inline-link.stories.tsx)             | [inline-link.tsx](src/app/components/inline-link.tsx)             |
+| `Input`            | [38:20](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20)   | [input.stories.tsx](src/stories/input.stories.tsx)                         | [input.tsx](src/app/components/input.tsx)                         |
+| `Menu`             | [93:59](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-59)   | [menu.stories.tsx](src/stories/menu.stories.tsx)                           | [menu.tsx](src/app/components/menu.tsx)                           |
+| `NavGroup`         | [86:304](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-304) | [nav-group.stories.tsx](src/stories/nav-group.stories.tsx)                 | [nav-group.tsx](src/app/components/nav-group.tsx)                 |
+| `NavItem`          | [86:258](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-258) | [nav-item.stories.tsx](src/stories/nav-item.stories.tsx)                   | [nav-item.tsx](src/app/components/nav-item.tsx)                   |
+| `Pagination`       | [86:194](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194) | [pagination.stories.tsx](src/stories/pagination.stories.tsx)               | [pagination.tsx](src/app/components/pagination.tsx)               |
+| `Popover`          | [93:32](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-32)   | [popover.stories.tsx](src/stories/popover.stories.tsx)                     | [popover.tsx](src/app/components/popover.tsx)                     |
+| `Progress`         | [88:91](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-91)   | [progress.stories.tsx](src/stories/progress.stories.tsx)                   | [progress.tsx](src/app/components/progress.tsx)                   |
+| `SegmentedControl` | [82:334](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-334) | [segmented-control.stories.tsx](src/stories/segmented-control.stories.tsx) | [segmented-control.tsx](src/app/components/segmented-control.tsx) |
+| `SideNav`          | [86:332](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-332) | [side-nav.stories.tsx](src/stories/side-nav.stories.tsx)                   | [side-nav.tsx](src/app/components/side-nav.tsx)                   |
+| `Skeleton`         | [88:95](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95)   | [skeleton.stories.tsx](src/stories/skeleton.stories.tsx)                   | [skeleton.tsx](src/app/components/skeleton.tsx)                   |
+| `Spinner`          | [88:106](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106) | [spinner.stories.tsx](src/stories/spinner.stories.tsx)                     | [spinner.tsx](src/app/components/spinner.tsx)                     |
+| `Stat`             | [88:247](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-247) | [stat.stories.tsx](src/stories/stat.stories.tsx)                           | [stat.tsx](src/app/components/stat.tsx)                           |
+| `StatusListItem`   | [88:350](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-350) | [status-list-item.stories.tsx](src/stories/status-list-item.stories.tsx)   | [status-list-item.tsx](src/app/components/status-list-item.tsx)   |
+| `StatusTile`       | [88:292](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-292) | [status-tile.stories.tsx](src/stories/status-tile.stories.tsx)             | [status-tile.tsx](src/app/components/status-tile.tsx)             |
+| `StepperField`     | [82:425](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-425) | [stepper-field.stories.tsx](src/stories/stepper-field.stories.tsx)         | [stepper-field.tsx](src/app/components/stepper-field.tsx)         |
+| `Surface`          | [89:27](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-27)   | [surface.stories.tsx](src/stories/surface.stories.tsx)                     | [surface.tsx](src/app/components/surface.tsx)                     |
+| `Table`            | [89:300](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300) | [table.stories.tsx](src/stories/table.stories.tsx)                         | [table.tsx](src/app/components/table.tsx)                         |
+| `Tabs`             | [86:89](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89)   | [tabs.stories.tsx](src/stories/tabs.stories.tsx)                           | [tabs.tsx](src/app/components/tabs.tsx)                           |
+| `Tag`              | [32:11](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11)   | [tag.stories.tsx](src/stories/tag.stories.tsx)                             | [tag.tsx](src/app/components/tag.tsx)                             |
+| `Textarea`         | [85:14](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14)   | [textarea.stories.tsx](src/stories/textarea.stories.tsx)                   | [textarea.tsx](src/app/components/textarea.tsx)                   |
+| `ToastProvider`    | [93:367](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367) | [toast.stories.tsx](src/stories/toast.stories.tsx)                         | [toast.tsx](src/app/components/toast.tsx)                         |
+
+<!-- design-links:end -->
+
 ## Visual direction: Editorial Enterprise
 
 The governing direction is "Editorial Enterprise" — enterprise rigor with editorial pacing. It favors sharp hierarchy, open whitespace, monochrome neutrals, and a single electric-blue accent. In practice:
@@ -147,26 +215,20 @@ The governing direction is "Editorial Enterprise" — enterprise rigor with edit
 
 ## Verification workflow
 
-Regression prevention is layered:
-
-- `CLAUDE.md` is the operating contract — agent execution protocol, UI guardrails, required validation steps, and the self-heal requirement before a task is considered done.
-- `scripts/self-heal.mjs` (`pnpm run heal`) runs the local static and smoke checks, captures failures, and gives a consistent path to fix type, layout, and runtime drift.
-- The Playwright suite covers accessibility, layout integrity, collision detection, responsiveness, and visual regression, so changes that break containment, overlap, or responsive behavior fail automatically.
+The gates are deterministic and need no browser or live site:
 
-Typical loop:
+- **pre-commit** (`.husky/pre-commit`): secrets scan, Prettier on staged files, typecheck, zero-warning ESLint, and token validity and contrast.
+- **pre-push** (`.husky/pre-push`): Vitest unit and contract tests, then the consumer smoke build (library build, subpath resolution, publint, consumer typecheck).
+- **CI** (`.github/workflows/ci.yml`): typecheck, zero-warning ESLint, token validity and contrast, Vitest, and the consumer smoke build, plus bundle budgets and a Storybook build.
+- **Visual review:** Storybook is the visual verification surface, and Chromatic (`.github/workflows/chromatic.yml`) runs it on pull requests. The earlier browser test suite drove a docs site that no longer exists; it is archived in `tests-archive/`.
 
-1. Change code within the token and component constraints.
-2. Run `pnpm typecheck` and `pnpm run heal`.
-3. Let Playwright catch runtime and visual regressions.
-4. If self-healing fixes a regression, log the root cause and resolution.
-5. Update the verification checklist and ship.
+`CLAUDE.md` is the operating contract for agents working in this repo.
 
 ## Bundle and release hygiene
 
 - `pnpm check:size` builds the library bundle and runs `size-limit`.
-- `pnpm check:release` runs the full release gate (accessibility, responsive, collision, visual, and bundle-size checks).
 
-Releases are cut with [Changesets](https://github.com/changesets/changesets): a merged changeset opens a "Version Packages" PR, and merging that PR publishes the new version to public npm via `.github/workflows/release.yml`.
+Releases are cut with [Changesets](https://github.com/changesets/changesets). A pull request that changes the published package adds a changeset (`pnpm changeset:add`). On a push to `main`, `.github/workflows/release.yml` opens or updates a "Version Packages" PR, and merging that PR publishes the new version to public npm.
 
 ## Repository shape
 
@@ -190,3 +252,7 @@ public/
 - `DESIGN-HANDOFF.md` — verbose visual mirror
 - `TOKEN_GOVERNANCE.md` — token system rules
 - `SYSTEMS_REGISTRY.md` — systems & guardrail registry
+
+## License
+
+The HDS code is MIT ([LICENSE](LICENSE)). The package CSS also embeds the Satoshi and Geist Mono fonts, which keep their own licenses and are not covered by MIT. See [NOTICE.md](NOTICE.md).

package/dist/contexts.js

@@ -1,7 +1,7 @@
-import { jsx as f, Fragment as M } from "react/jsx-runtime";
-import { useState as u, useCallback as s, useEffect as a, useContext as S, createContext as D } from "react";
-import { F as K, H as Y, L as j, T as q, b as J, u as Q, a as W, c as X } from "./chunks/TokenDisplayContext-B3gxyQN7.js";
-const L = ["system", "light", "dark"], m = "hds-theme-mode", x = "hds-theme", _ = D({
+import { jsx as l, Fragment as I } from "react/jsx-runtime";
+import { useState as i, useCallback as a, useEffect as s, useContext as E, createContext as S } from "react";
+import { F as j, H as q, L as N, T as V, b as J, u as Q, a as U, c as W } from "./chunks/TokenDisplayContext-B3gxyQN7.js";
+const x = ["system", "light", "dark"], d = "hds-theme-mode", P = "hds-theme", T = S({
   isDark: !0,
   toggleDark: () => {
   },
@@ -14,22 +14,22 @@ const L = ["system", "light", "dark"], m = "hds-theme-mode", x = "hds-theme", _
   setDensity: () => {
   }
 });
-function T() {
+function y() {
   try {
-    const t = localStorage.getItem(m);
-    if (t && L.includes(t)) return t;
+    const t = localStorage.getItem(d);
+    if (t && x.includes(t)) return t;
   } catch {
   }
   return "system";
 }
-function P() {
+function L() {
   var t;
   return typeof window > "u" ? !1 : !!((t = window.matchMedia) != null && t.call(window, "(prefers-color-scheme: dark)").matches);
 }
-function E(t) {
-  return t === "dark" ? !0 : t === "light" ? !1 : P();
+function D(t) {
+  return t === "dark" ? !0 : t === "light" ? !1 : L();
 }
-function N() {
+function C() {
   try {
     const t = localStorage.getItem("hds-density");
     if (t === "compact" || t === "comfortable") return t;
@@ -38,100 +38,102 @@ function N() {
   return "comfortable";
 }
 function F({ children: t }) {
-  const [n, g] = u(T), [r, i] = u(() => E(T())), [c, h] = u(N), y = s((e) => {
+  const [n, f] = i(y), [r, u] = i(() => D(y())), [c, h] = i(C), g = a((e) => {
     const o = e ? "dark" : "light";
     try {
-      localStorage.setItem(x, o);
+      localStorage.setItem(P, o);
     } catch {
     }
     document.documentElement.setAttribute("data-theme", o), document.documentElement.classList.toggle("dark", e);
   }, []);
-  a(() => {
+  s(() => {
     try {
       localStorage.setItem("hds-density", c);
     } catch {
     }
     document.documentElement.setAttribute("data-density", c);
-  }, [c]), a(() => {
-    y(r);
-  }, [r, y]), a(() => {
+  }, [c]), s(() => {
+    g(r);
+  }, [r, g]), s(() => {
     if (n !== "system" || typeof window > "u" || !window.matchMedia) return;
     const e = window.matchMedia("(prefers-color-scheme: dark)"), o = () => {
-      i(e.matches);
+      u(e.matches);
     };
     return e.addEventListener("change", o), () => {
       e.removeEventListener("change", o);
     };
   }, [n]);
-  const A = s(() => {
+  const b = a(() => {
     const e = !r, o = e ? "dark" : "light";
-    g(o), i(e);
+    f(o), u(e);
     try {
-      localStorage.setItem(m, o);
+      localStorage.setItem(d, o);
     } catch {
     }
-  }, [r]), b = s((e) => {
-    g(e), i(E(e));
+  }, [r]), A = a((e) => {
+    f(e), u(D(e));
     try {
-      localStorage.setItem(m, e);
+      localStorage.setItem(d, e);
     } catch {
     }
-  }, []), I = s(
+  }, []), w = a(
     () => h((e) => e === "comfortable" ? "compact" : "comfortable"),
     []
-  ), w = s((e) => h(e), []);
-  return /* @__PURE__ */ f(
-    _.Provider,
+  ), M = a((e) => h(e), []);
+  return /* @__PURE__ */ l(
+    T.Provider,
     {
-      value: { isDark: r, toggleDark: A, mode: n, setMode: b, density: c, toggleDensity: I, setDensity: w },
+      value: { isDark: r, toggleDark: b, mode: n, setMode: A, density: c, toggleDensity: w, setDensity: M },
       children: t
     }
   );
 }
-function G() {
-  return S(_);
+function O() {
+  return E(T);
 }
-const d = {}, v = D({ tenantSlug: null }), p = ["data-brand", "data-tenant"];
-function l(t) {
-  for (const n of p) document.documentElement.setAttribute(n, t);
+const k = S({ tenantSlug: null }), v = ["data-brand", "data-tenant"];
+function m(t) {
+  for (const n of v) document.documentElement.setAttribute(n, t);
 }
-function k() {
-  for (const t of p) document.documentElement.removeAttribute(t);
+function p() {
+  for (const t of v) document.documentElement.removeAttribute(t);
 }
-function O({ children: t }) {
-  const n = typeof d.VITE_TENANT_SLUG == "string" && d.VITE_TENANT_SLUG.trim().length > 0 ? d.VITE_TENANT_SLUG.trim() : null;
-  return a(() => {
+function B({
+  children: t,
+  slug: n = null
+}) {
+  return s(() => {
     if (n)
-      return l(n), () => k();
-  }, [n]), /* @__PURE__ */ f(v.Provider, { value: { tenantSlug: n }, children: t });
+      return m(n), () => p();
+  }, [n]), /* @__PURE__ */ l(k.Provider, { value: { tenantSlug: n }, children: t });
 }
-function B() {
-  return S(v);
+function H() {
+  return E(k);
 }
-function H(t) {
-  a(() => {
+function z(t) {
+  s(() => {
     const n = document.documentElement.getAttribute("data-brand");
-    return l(t), () => {
-      n !== null ? l(n) : k();
+    return m(t), () => {
+      n !== null ? m(n) : p();
     };
   }, [t]);
 }
-function V({ children: t }) {
-  return /* @__PURE__ */ f(M, { children: t });
+function G({ children: t }) {
+  return /* @__PURE__ */ l(I, { children: t });
 }
 export {
-  V as FontProvider,
-  K as FreezeState,
-  Y as HdsRouterProvider,
-  j as LanguageProvider,
-  O as TenantProvider,
+  G as FontProvider,
+  j as FreezeState,
+  q as HdsRouterProvider,
+  N as LanguageProvider,
+  B as TenantProvider,
   F as ThemeProvider,
-  q as TokenDisplayProvider,
+  V as TokenDisplayProvider,
   J as useFrozenState,
   Q as useHdsRouter,
-  W as useLanguage,
-  B as useTenant,
-  H as useTenantOnDocument,
-  G as useTheme,
-  X as useTokenDisplay
+  U as useLanguage,
+  H as useTenant,
+  z as useTenantOnDocument,
+  O as useTheme,
+  W as useTokenDisplay
 };