@povio/ui 4.0.2 → 5.0.0-rc.2

package/.rulesync/rules/ui-buttons-and-content.md

@@ -0,0 +1,54 @@
+---
+targets: ["*"]
+description: "@povio/ui buttons, labels, status feedback, and text-content APIs"
+globs:
+  - "packages/ui/src/components/buttons/**/*"
+  - "packages/ui/src/components/text/**/*"
+  - "packages/ui/src/components/status/**/*"
+  - "packages/ui/src/components/shared/pagination/**/*"
+---
+
+# Buttons, text, and status components
+
+## Button
+
+Use `Button` for an action. Its content is `children`; use `link` only when it navigates through the configured `LinkContext`.
+
+- Visual variants: `contained`, `solid`, `outlined`, `outline`, `subtle`, `text`, `ghost`. The default CVA styles `solid` like `contained` and `outline` like `outlined`, but passes every value through unchanged so UI overrides can redefine either value.
+- Colors: `primary`, `secondary`, `error` (destructive theme tokens), and Atlas-specific `dual`. Text buttons with `dual` use primary text and secondary icons. Only primary text buttons support `inverted`, using the primary foreground token.
+- Sizes: `sm` (alias `s`), `default`, and `none` (zero padding); omit the size prop for `default`. Legacy sizes (`xs`, `small`, `m`, `md`, `l`, `lg`) are not supported.
+- Use `fullWidth`; `width="fill"` and `width="hug"` remain valid.
+- Use `loading` or `isLoading`; loading disables the button by default. `disableWhileLoading={false}` opts out; `noDisableWhenLoading` is the legacy inverse.
+- Use `startIcon` and `endIcon`. `icon` plus `iconPosition="left" | "right"` remains supported.
+- Use `IconButton` for icon-only actions and supply `ariaLabel` or `label`. `InlineIconButton` is the text-style icon-only variant.
+- Use `ToggleButton` for one independently toggled state (`isSelected`, `defaultSelected`, `onChange`). It defaults to outlined primary but honors supplied `variant` and `color`.
+- Use `SplitButton` only for a primary action with menu alternatives; use `ButtonGroup` for peer actions.
+- `variant`, `size`, and other CVA props belong to the active override. Never normalize their values inside a component; define default compatibility aliases as CVA entries instead.
+- `PillButton` has its own CVA but follows the same variant contract: `solid` and `outline` are default aliases and are passed unchanged to `pillButton.cva` overrides.
+
+## Tags, links, typography
+
+Typography sizes are `headline-l`, `h1`–`h4`, `lead`, `body`, `large`, and `small`; There is no typography `variant`; use `className="font-bold"` or `className="italic"` for emphasis. `large` and `small` do not add font weight; use explicit emphasis when needed. Use the same size on mobile and desktop unless explicitly overridden.
+
+- `Badge` and `Tag` are display components, not generic buttons. Use `dismissible` and `onRemove` for removal; `dismissable` and `onDismiss` are legacy forms.
+- Pass remove-button behavior through `dismissButtonProps`; arbitrary button props do not belong on the display container.
+- Use `Link` for navigation and `Button` for actions.
+- Use `Typography` with semantic `as` elements (`h1`, `h2`, `p`, `span`) and library typography variants/sizes. Token changes belong in UI overrides, not consumers.
+
+## Feedback
+
+- Use `Alert` for persistent inline status, `Toast`/`useToast` for transient notifications, `Spinner` for indeterminate progress, and `Progress` for numeric progress.
+- For alerts and toasts, keep `variant` (`contained`/`outlined`) separate from semantic `color` (`neutral`, `success`, `warning`, `error`).
+- Toast actions are `{ text, onPress }`; keep them short and non-destructive.
+
+## Reference
+
+- `packages/ui/src/components/buttons/Button/Button.tsx` — Button behavior and compatibility.
+- `packages/ui/src/components/text/Tag/Tag.tsx` — dismissible tag contract.
+- `packages/ui/src/components/status/Toast/Toast.tsx` — toast content and actions.
+
+## When refactoring
+
+- `Button` uses `icon` only for a conventional start/end icon → use `startIcon` or `endIcon`.
+- An icon-only action has no accessible name → use `IconButton` with `ariaLabel` or `label`.
+- A tag/pill receives `onPress` to represent selection → use `ToggleButton` or `ToggleGroup`.

package/.rulesync/rules/ui-inputs-and-forms.md

@@ -0,0 +1,62 @@
+---
+targets: ["*"]
+description: "@povio/ui form fields, selection controls, pickers, uploads, and React Hook Form integration"
+globs:
+  - "packages/ui/src/components/inputs/**/*"
+  - "packages/ui/src/hooks/useForm*.ts"
+---
+
+# Inputs and forms
+
+## Shared field contract
+
+- Sizes: `small` and `default` only. Omit `size` for the default; `extra-small` and `large` are not supported. This shared input API has no `sm` or `s` aliases.
+- Use `label`, `helperText`, `error`, `isRequired`, and `isDisabled` as the base field contract.
+- `Input`, `TextArea`, and `NumberField` also accept `errorMessage`, `required`, and `disabled`. Their visual layout is `layout="default" | "floating" | "filter" | "inline"`; `as` remains the legacy layout prop and is not polymorphic element selection.
+- Use `variant="outlined" | "filled"` for text-like inputs. Keep layout separate from variant.
+- Use `isClearable`, `leadingIcon`, `trailingIcon`, `action`, `unit`, `placeholder`, and `inputClassName` only where exposed; do not recreate input chrome in consumers.
+- Controlled fields use `value` and `onChange`; uncontrolled fields use `defaultValue`. Preserve callback value types: strings for text, `number | null` for number fields, and component-specific date values for pickers.
+
+## Selection controls
+
+- `Checkbox` uses `isSelected`, `defaultSelected`, and `onChange(boolean)`; `children` may be any `ReactNode`.
+- `Switch` uses the same boolean selection contract.
+- `RadioGroup` takes `options: { label, value }[]` and scalar `value`/`defaultValue`/`onChange`.
+- `CheckboxGroup` takes the same options shape and array values. `allValue` is an Atlas extension for all-selected representation.
+- `ToggleGroup`, `Select`, and `Autocomplete` use `selectionMode="single" | "multiple"`. Single values are `Key | null`; multiple values are `Key[]`.
+- `Select` is a closed selection field. `Autocomplete` is the searchable/combobox form of the same item API. Both take `items: { id, label, content?, isDisabled? }[]`.
+- Preserve Select capabilities: `isSearchable`, `isClearable`, `showSelectAllOption`, `showSelectionBar`, `showNewItemOption`, `onNewItemOption`, async `isLoading`/`hasLoadMore`/`onLoadMore`, and `virtualizerOptions`.
+- Use `QuerySelect` and `QueryAutocomplete` only with the package TanStack Query adapter; they are not generic async-select replacements.
+
+## Dates, ranges, files, rich text
+
+- Use `DatePicker`, `DateRangePicker`, `TimePicker`, and `DateTimePicker` for React Aria date values. Preserve `minValue`, `maxValue`, `granularity`, `isClearable`, and date-input options rather than replacing them with native inputs.
+- Use `Slider` with numeric `value`/`defaultValue`; set `isRange` for two-thumb values.
+- Use `FileInput` for controlled form file values and `FileUpload` for upload lifecycle, progress, cancellation, and uploaded-file display. Both accept `multiple` or `allowsMultiple`.
+- Import `RichTextEditor` from `@povio/ui/rich-text-editor`, not the main package entry point.
+
+## Forms
+
+```tsx
+// TanStack Form (native binding, e.g. import from "@povio/ui/tanstack/input")
+<Input label="Name" field={{ form, name: "name" }} />
+
+// React Hook Form (adapter, e.g. import from "@povio/ui/rhf/input")
+<Input label="Name" formControl={{ control: form.control, name: "name" }} />
+```
+
+- `field` (TanStack) and `formControl` (React Hook Form) each own `value`, `onChange`, and `onBlur`; do not supply competing controlled props alongside either.
+- `Form` and `Inputs` are Zod schema helpers, available in both the TanStack-native and React Hook Form flavors. Use a regular HTML `<form>` with individual fields when schema-generated rendering is not needed.
+
+## Reference
+
+- `packages/ui/src/components/inputs/Input/Input.tsx` — core text-field API.
+- `packages/ui/src/components/inputs/Selection/shared/SelectBase.tsx` — selection and async capabilities.
+- `packages/ui/src/components/inputs/shared/form.types.ts` — typed `field` (TanStack) contract.
+- `packages/ui/src/rhf/form.types.ts` — typed `formControl` (React Hook Form) contract.
+
+## When refactoring
+
+- A consumer uses `as` to select a DOM element → use `layout`; `as` controls legacy input presentation.
+- App code checks `allowsMultiple` → prefer `multiple` in new code.
+- A select hand-rolls filtering or virtualized results → use the exposed Select/Autocomplete props before adding consumer-side overlay logic.

package/.rulesync/rules/ui-overlays-navigation-and-styling.md

@@ -0,0 +1,49 @@
+---
+targets: ["*"]
+description: "@povio/ui overlays, navigation, tables, accessibility, and styling conventions"
+globs:
+  - "packages/ui/src/components/overlays/**/*"
+  - "packages/ui/src/components/navigation/**/*"
+  - "packages/ui/src/components/DropdownMenu/**/*"
+  - "packages/ui/src/components/Breadcrumbs/**/*"
+  - "packages/ui/src/components/table/**/*"
+  - "packages/ui/src/components/**/*.cva.ts"
+---
+
+# Overlays, navigation, tables, and styling
+
+## Overlays and navigation
+
+- Use `Dialog` with controlled `isOpen`; handle transitions with `onOpenChange`. `onClose` remains available for close-only behavior.
+- Use `AlertDialog` for confirmations with a primary action and optional secondary action.
+- Use `Drawer` for a side panel and `BottomSheet` for a mobile bottom sheet. Both own focus trapping and dismissal; do not mount parallel ad-hoc overlays.
+- `Popover` renders a desktop popover and mobile bottom sheet. It requires a trigger, controlled state, and accessible `sheetLabel`.
+- Use `Tooltip` for supplemental text only; it must not be the sole accessible label for an icon action.
+- Use `DropdownMenu` with `trigger`, `items`, and `onAction`. Menu items are `{ id, label, content?, link?, children? }`; nested `children` create submenus.
+- Use `Accordion` for expandable content, `Stepper` for step progress, `Breadcrumbs` for hierarchy, and `Pagination`/`PaginationList` for page navigation.
+
+## Tables
+
+- `Table` is the base TanStack wrapper. Use `PaginatedTable` or `InfiniteTable` only when their data-loading contracts match the view.
+- Keep table columns in the consumer domain. Use `CellText` and `HeaderText` for consistent text treatment; use `ColumnConfigModal` for persisted visibility/configuration behavior.
+
+## Styling and accessibility
+
+- Components use class-variance-authority, `UIOverrides`, and tokenized Tailwind classes. Add visual variants through the relevant `*.cva.ts` definition and expose a typed variant prop; do not add hard-coded color values in consumers.
+- Use `UIConfig` for package-wide defaults and `UIOverrides` for recipe overrides. Do not duplicate component markup to bypass them.
+- Preserve React Aria state props/data attributes (`isDisabled`, `isSelected`, `isInvalid`, `data-selected`) when wrapping controls.
+- Root styling uses `className`. Prefer existing slot props (`inputClassName`, `dialogClassName`, `overlayClassName`, `containerClassName`) over selectors reaching into library internals.
+- Keep button-like controls keyboard accessible. Icon-only actions need an accessible name; labels remain associated with fields.
+- Avoid nested runtime ternaries in rendering or prop normalization. Use a named helper, map, or explicit branch.
+
+## Reference
+
+- `packages/ui/src/components/overlays/Dialog/Dialog.tsx` — controlled dialog behavior.
+- `packages/ui/src/components/DropdownMenu/DropdownMenu.tsx` — responsive menu boundary.
+- `packages/ui/src/config/uiOverrides.context.tsx` — recipe override system.
+
+## When refactoring
+
+- A component hard-codes a visual token already represented by a CVA recipe → add or reuse a typed recipe variant.
+- An icon-only trigger relies only on a tooltip → add an `aria-label`/`ariaLabel` or visible label.
+- Overlay state is duplicated in an app wrapper and a UI component → make controlled `isOpen`/`onOpenChange` the source of truth.

package/.rulesync/rules/ui-overview.md

@@ -0,0 +1,33 @@
+---
+root: true
+targets: ["*"]
+description: "@povio/ui public API and component-selection guidance"
+globs: ["packages/ui/**/*"]
+---
+
+# @povio/ui component-library overview
+
+`@povio/ui` is a React 19, TypeScript, Tailwind 4 component library built on React Aria Components. Import components and hooks from component-scoped subpaths (e.g. `@povio/ui/dialog`, `@povio/ui/rich-text-editor`), or from the broader `@povio/ui/rhf` (React Hook Form) or `@povio/ui/tanstack` (TanStack Form) entries; internal `src/components/**` paths are not consumer APIs.
+
+## Public API and naming
+
+- `src/rhf.ts` and `src/tanstack.ts` are the authoritative barrels for the two form-integration flavors; `src/entries/*.ts` (plus `src/entries/rhf/*.ts` and `src/entries/tanstack/*.ts` for form-capable components) back the individual `package.json#exports` subpaths. Add or change a public component in all three places together with its prop type.
+- Component names are canonical and final: `Input`, `NumberField`, `FileInput`, `Switch`, `ToggleGroup`, `DropdownMenu`, `Dialog`, `AlertDialog`, `Popover`, `Spinner`, `Progress`, `Badge`, `RichTextEditor` (exported from `@povio/ui/rich-text-editor`).
+- Use `ButtonGroup` for grouped independent actions. Use `ToggleGroup` only when the group represents selected value(s).
+
+## Common conventions
+
+- Components use React Aria event names (`onPress`, `onChange`, `isDisabled`, `isSelected`) as their base API.
+- Form-capable components speak a native `field: { form, name }` TanStack Form binding. Consumers on `@povio/ui/rhf/*` get the same components wrapped with a `formControl: { control, name }` React Hook Form adapter instead. Do not pass `value`, `onChange`, or `onBlur` together with `field`/`formControl`.
+- Keep public props semantic and domain-independent. Use `className` for root styling and component-specific `*ClassName` props only for independently styled internal slots.
+- Prefer `ReactNode` for display content and preserve `aria-*` props through to the interactive element.
+
+## Reference
+
+- `packages/ui/src/rhf.ts` / `packages/ui/src/tanstack.ts` — public exports per form-integration flavor.
+- `packages/ui/src/config/uiConfig.context.tsx` — runtime component defaults.
+
+## When refactoring
+
+- A consumer imports from `src/components/...` → switch it to a package subpath export.
+- A stateful segmented control is used as an action toolbar → use `ButtonGroup` and `Button`s instead.

package/README.md

@@ -40,6 +40,20 @@ The React Aria hooks used by Povio are similarly isolated under `use-text-field`
 
 Each emitted entry is independently bundled and tree-shaken; it does not forward React Aria's aggregate barrel or share a generated aggregate chunk with unrelated controls. Ordinary Povio component imports do not include the escape-hatch entries.
 
+## Button sizes
+
+`Button` supports `sm` (with `s` as an equivalent alias), `default`, and `none` (zero padding). Omitting `size` uses `default`. The same sizes apply to `IconButton`, `InlineIconButton`, `TextButton`, `ToggleButton`, and `SplitButton`.
+
+When migrating, replace `xs` and `small` with `sm`; remove explicit `default`, `m`, `md`, `l`, and `lg` size props to use the default. `sm` uses the existing small spacing tokens, and `default` uses the medium spacing tokens.
+
+Use `<TextButton size="none">Read more</TextButton>` for a text action without button padding.
+
+## Input sizes
+
+Inputs support `size="small"` and `default`. Omit `size` for the default. This applies to text and number inputs, selects, autocomplete, date/time pickers, file inputs, checkbox groups, and radio groups that share the input size API. There are no `sm` or `s` aliases for inputs.
+
+Replace `size="extra-small"` with `size="small"`, and remove `size="large"` or `size="default"` to use the default. Small and default retain their existing spacing.
+
 ## Versioning
 
 `^2.1` still corresponds to Atlas 2.1. All versions after that currently target Atlas 2.2 and follow semantic versioning — breaking changes bump the major version.
@@ -48,21 +62,15 @@ Each emitted entry is independently bundled and tree-shaken; it does not forward
 
 The package ships RuleSync source rules in `.rulesync/` and `rulesync.jsonc`. They document the public component API, standard aliases, form contracts, accessibility expectations, and styling conventions for AI coding tools. Generated tool files are deliberately excluded from the published npm package.
 
-To generate the UI rules into a consuming project's repository root, run the executable bundled with `@povio/ui`:
-
-```bash
-pnpm exec povio-ui-rules
-```
-
-With npm, use:
+To generate the UI rules into a consuming project's repository root, install [`rulesync`](https://github.com/dyoshikawa/rulesync) (`^8.15.0`) in that project, then run the executable bundled with `@povio/ui`:
 
 ```bash
-npx povio-ui-rules
+bunx --package @povio/ui povio-ui-rules
 ```
 
-This generates the relevant Cursor, Claude Code, and Codex CLI files in the consuming repository. Add generated files to that repository's `.gitignore` unless they are intentionally versioned. Re-run the command after upgrading `@povio/ui`; verify without writing files by adding `--check` (for example, `pnpm exec povio-ui-rules --check`).
+This generates the relevant Cursor, Claude Code, and Codex CLI files in the consuming repository. Add generated files to that repository's `.gitignore` unless they are intentionally versioned. Re-run the command after upgrading `@povio/ui`; verify without writing files by adding `--check` (for example, `bunx --package @povio/ui povio-ui-rules --check`).
 
-Within this monorepo, the equivalent package-local commands are `pnpm --filter @povio/ui rules:gen` and `pnpm --filter @povio/ui rules:check`.
+Within this monorepo, the equivalent package-local commands are `bun run --filter @povio/ui rules:gen` and `bun run --filter @povio/ui rules:check`.
 
 ## Publishing
 
@@ -116,6 +124,29 @@ We also use a custom tailwind plugin to shorten some selectors inside the @povio
 @plugin "@povio/ui/tw-ui-plugin";
 ```
 
+### Background tint utility
+
+Import the color utilities in your application's Tailwind stylesheet. This import is required because `@povio/ui` button styles use these utilities:
+
+```css
+@import "tailwindcss";
+@import "./theme.css";
+@import "@povio/ui/color-utilities";
+```
+
+Use `bg-tint-<color>/<percentage>` to mix a theme color with white in sRGB. The color name resolves to your theme's `--color-<color>` token. The required modifier is an integer from `0` to `100`: `/80` keeps 80% of the original color and adds 20% white, `/100` keeps the original color, and `/0` produces white. Lower numbers produce lighter tints.
+
+```tsx
+<button
+  type="button"
+  className="bg-interactive-primary-background text-interactive-primary-foreground hover:bg-tint-interactive-primary-background/80"
+>
+  Hover to lighten
+</button>
+```
+
+The utility supports standard Tailwind variants such as `hover:`, `focus-visible:`, and `dark:`. With an opaque starting color, the result remains fully opaque and does not depend on the background behind the element. This differs from the standard `bg-<color>/80` opacity modifier. It mixes with white rather than adjusting OKLCH lightness, and only changes the background color; text and children are unaffected.
+
 ### Z-Index
 
 `@povio/ui` uses named z-index theme tokens instead of hardcoded Tailwind values. These must be defined in your `base.css` inside the `@theme static` block so components stack correctly and can be overridden per app.

package/dist/{Accordion-CB1F5YAY.js → Accordion-CzFKi8Bp.js}

@@ -4,7 +4,7 @@ import { n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, o as $7230ffa83bc0c2cf$
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1, t as $7705c033048f6da7$export$24d547caef80ccd1 } from "./Button-D6KlWSFL.js";
 import { t as $2ec61d1d4f780267$export$a8a3e93435678ff9 } from "./Heading-nI1_VOaE.js";
 import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
-import { t as Typography } from "./Typography-AcUd9df8.js";
+import { t as Typography } from "./Typography-B0Gp1lpc.js";
 import $ahdqC$react, { createContext, forwardRef, useContext } from "react";
 import { c } from "react/compiler-runtime";
 import { mergeProps } from "react-aria/mergeProps";
@@ -134,7 +134,7 @@ const accordionDefinition = UIOverrides.defineConfig({
 		compoundVariants: [{
 			variant: "outlined",
 			singleItem: false,
-			className: "rounded-global-rounding-s border border-elevation-outline-default-1"
+			className: "rounded-global-rounding-s border border-border-default-subtle"
 		}]
 	}
 });
@@ -143,7 +143,7 @@ const accordionItemDefinition = UIOverrides.defineConfig({
 	config: {
 		variants: {
 			variant: {
-				filled: "rounded-accordion-rounding-filled bg-elevation-fill-default-2",
+				filled: "rounded-accordion-rounding-filled bg-surface-default-background",
 				outlined: ""
 			},
 			singleItem: {
@@ -158,11 +158,11 @@ const accordionItemDefinition = UIOverrides.defineConfig({
 		compoundVariants: [{
 			singleItem: true,
 			variant: "outlined",
-			className: "border-elevation-outline-default-1 border-b"
+			className: "border-border-default-subtle border-b"
 		}, {
 			singleItem: false,
 			variant: "outlined",
-			className: "not-last:border-elevation-outline-default-1 not-last:border-b"
+			className: "not-last:border-border-default-subtle not-last:border-b"
 		}]
 	}
 });
@@ -170,13 +170,13 @@ const accordionTriggerDefinition = UIOverrides.defineConfig({
 	base: [
 		"group flex w-full items-center gap-accordion-gap-content-to-arrow",
 		"px-accordion-side-accordion py-accordion-height-accordion",
-		"outline-none focus-visible:ring-2 focus-visible:ring-interactive-contained-primary-focus"
+		"outline-none focus-visible:ring-2 focus-visible:ring-interactive-ring"
 	],
 	config: {
 		variants: {
 			variant: {
-				outlined: "rounded-accordion-rounding-outlined hover:bg-elevation-fill-default-2",
-				filled: "rounded-accordion-rounding-filled bg-elevation-fill-default-2 hover:bg-elevation-fill-default-3"
+				outlined: "rounded-accordion-rounding-outlined hover:bg-tint-surface-default-popover/80",
+				filled: "rounded-accordion-rounding-filled bg-surface-default-background hover:bg-tint-surface-default-popover/80"
 			},
 			actionPosition: {
 				left: "flex-row-reverse",
@@ -198,21 +198,21 @@ const accordionHeadingDefinition = UIOverrides.defineConfig({
 	}
 });
 const accordionHeadingTitleDefinition = UIOverrides.defineConfig({
-	base: ["flex-1 text-left text-text-default-1"],
+	base: ["flex-1 text-left text-surface-default-card-foreground"],
 	config: {
 		variants: {},
 		defaultVariants: {}
 	}
 });
 const accordionHeadingSubtitleDefinition = UIOverrides.defineConfig({
-	base: ["flex-1 text-left text-text-default-2"],
+	base: ["flex-1 text-left text-surface-default-foreground"],
 	config: {
 		variants: {},
 		defaultVariants: {}
 	}
 });
 const accordionChevronDefinition = UIOverrides.defineConfig({
-	base: ["size-6 shrink-0 text-interactive-text-secondary-idle transition-transform duration-200"],
+	base: ["size-6 shrink-0 text-surface-default-popover-foreground transition-transform duration-200"],
 	config: {
 		variants: { isExpanded: {
 			true: "rotate-180",
@@ -222,7 +222,7 @@ const accordionChevronDefinition = UIOverrides.defineConfig({
 	}
 });
 const accordionIconDefinition = UIOverrides.defineConfig({
-	base: ["size-6 shrink-0 text-text-default-3"],
+	base: ["size-6 shrink-0 text-surface-default-popover-foreground"],
 	config: {
 		variants: {},
 		defaultVariants: {}
@@ -284,14 +284,12 @@ const AccordionItem = (t0) => {
 						children: [
 							Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({}) }),
 							/* @__PURE__ */ jsx(Typography, {
-								size: "label-2",
-								variant: "default",
+								size: "small",
 								className: headingTitleCva({}),
 								children: heading
 							}),
 							subheading && /* @__PURE__ */ jsx(Typography, {
-								size: "label-3",
-								variant: "default",
+								size: "small",
 								className: headingSubtitleCva({}),
 								children: subheading
 							})

package/dist/{Alert-BALBsBrP.js → Alert-T25LY8ZL.js}

@@ -1,6 +1,6 @@
 import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
-import { t as Typography } from "./Typography-AcUd9df8.js";
-import { t as Spinner } from "./Spinner-owSXOEzg.js";
+import { t as Typography } from "./Typography-B0Gp1lpc.js";
+import { t as Spinner } from "./Spinner-BEYBu85B.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/status/Alert/alert.cva.ts
@@ -9,8 +9,8 @@ const alertDefinition = UIOverrides.defineConfig({
 	config: {
 		variants: {
 			variant: {
-				outlined: "border bg-elevation-fill-default-1 text-text-default-1",
-				contained: "text-text-inverted-1"
+				outlined: "border bg-surface-default-card text-surface-default-card-foreground",
+				contained: ""
 			},
 			color: {
 				neutral: "",
@@ -23,42 +23,42 @@ const alertDefinition = UIOverrides.defineConfig({
 			{
 				variant: "outlined",
 				color: "neutral",
-				className: "border-elevation-outline-default-1"
+				className: "border-border-default-subtle"
 			},
 			{
 				variant: "outlined",
 				color: "success",
-				className: "border-elevation-outline-success-1"
+				className: "border-surface-success-base"
 			},
 			{
 				variant: "outlined",
 				color: "warning",
-				className: "border-elevation-outline-warning-1"
+				className: "border-surface-warning-base"
 			},
 			{
 				variant: "outlined",
 				color: "error",
-				className: "border-elevation-outline-error-1"
+				className: "border-surface-destructive-base"
 			},
 			{
 				variant: "contained",
 				color: "neutral",
-				className: "bg-elevation-fill-inverted-1"
+				className: "bg-surface-inverted-card text-surface-inverted-card-foreground"
 			},
 			{
 				variant: "contained",
 				color: "success",
-				className: "bg-elevation-fill-success-1"
+				className: "bg-surface-success-base text-surface-success-inverted-base"
 			},
 			{
 				variant: "contained",
 				color: "warning",
-				className: "bg-elevation-fill-warning-1"
+				className: "bg-surface-warning-base text-surface-warning-inverted-base"
 			},
 			{
 				variant: "contained",
 				color: "error",
-				className: "bg-elevation-fill-error-1"
+				className: "bg-surface-destructive-base text-surface-destructive-inverted-base"
 			}
 		],
 		defaultVariants: {
@@ -75,7 +75,7 @@ const statusIconDefinition = UIOverrides.defineConfig({
 		variants: {
 			variant: {
 				outlined: "",
-				contained: "text-text-inverted-1"
+				contained: "text-inherit"
 			},
 			color: {
 				neutral: "",
@@ -88,22 +88,22 @@ const statusIconDefinition = UIOverrides.defineConfig({
 			{
 				variant: "outlined",
 				color: "neutral",
-				class: "text-text-default-2"
+				class: "text-surface-default-foreground"
 			},
 			{
 				variant: "outlined",
 				color: "success",
-				class: "text-text-success-1"
+				class: "text-surface-success-base"
 			},
 			{
 				variant: "outlined",
 				color: "warning",
-				class: "text-text-warning-1"
+				class: "text-surface-warning-base"
 			},
 			{
 				variant: "outlined",
 				color: "error",
-				class: "text-text-error-1"
+				class: "text-surface-destructive-base"
 			}
 		],
 		defaultVariants: {
@@ -121,10 +121,10 @@ const statusSeparatorDefinition = UIOverrides.defineConfig({
 				contained: "hidden"
 			},
 			color: {
-				neutral: "bg-elevation-outline-default-1",
-				success: "bg-elevation-outline-success-1",
-				warning: "bg-elevation-outline-warning-1",
-				error: "bg-elevation-outline-error-1"
+				neutral: "bg-border-default-subtle",
+				success: "bg-surface-success-base",
+				warning: "bg-surface-warning-base",
+				error: "bg-surface-destructive-base"
 			}
 		},
 		defaultVariants: { color: "neutral" }
@@ -177,7 +177,7 @@ const Alert = (t0) => {
 	let t5;
 	if ($[13] !== text) {
 		t5 = /* @__PURE__ */ jsx(Typography, {
-			size: "label-2",
+			size: "small",
 			children: text
 		});
 		$[13] = text;

package/dist/{Alert-CbEhRaU5.d.ts → Alert-f1dG-4Uy.d.ts}

@@ -5,8 +5,8 @@ declare const alertDefinition: {
   base: string[];
   config: StyleMergeUtils.Config<{
     readonly variant: {
-      readonly outlined: "border bg-elevation-fill-default-1 text-text-default-1";
-      readonly contained: "text-text-inverted-1";
+      readonly outlined: "border bg-surface-default-card text-surface-default-card-foreground";
+      readonly contained: "";
     };
     readonly color: {
       readonly neutral: "";

package/dist/{AlertDialog-PjYM6lDo.d.ts → AlertDialog-B6R2MbNg.d.ts}

@@ -1,6 +1,6 @@
-import { n as ButtonVariantProps } from "./button.cva-ChabF4Am.js";
+import { n as ButtonVariantProps } from "./button.cva-BvRI-3Gn.js";
 import { n as DialogProps } from "./Dialog-DEbI_9S-.js";
-import { r as TypographyPropsCva } from "./Typography-BWmZd20e.js";
+import { r as TypographyPropsCva } from "./Typography-BiuidzDC.js";
 //#region src/components/overlays/AlertDialog/AlertDialog.d.ts
 interface AlertDialogAction {
   label: string;

package/dist/{Autocomplete-DE2lQi5o.d.ts → Autocomplete-CQ63Cynd.d.ts}

@@ -1,5 +1,5 @@
 import { n as FieldValues } from "./form.binding-DVJ5F0JE.js";
-import { n as GroupedSelectControlProps, o as SelectBaseProps, r as GroupedSelectProps, t as DefaultInitialSelectItem } from "./SelectBase-DefgAEzh.js";
+import { n as GroupedSelectControlProps, o as SelectBaseProps, r as GroupedSelectProps, t as DefaultInitialSelectItem } from "./SelectBase-7SE9Za2r.js";
 import { s as OmitDiscriminatedUnion } from "./common-UBFya8WY.js";
 import { ReactElement } from "react";
 import { Key } from "react-aria-components";

package/dist/{Badge-CjPpYa50.d.ts → Badge-YKlKz-Jy.d.ts}

@@ -1,5 +1,5 @@
-import { t as PillButtonVariants } from "./pillButton.cva-BVsxGnqF.js";
-import { n as TypographyProps } from "./Typography-BWmZd20e.js";
+import { t as PillButtonVariants } from "./pillButton.cva-BEWuu0qm.js";
+import { n as TypographyProps } from "./Typography-BiuidzDC.js";
 import { Ref } from "react";
 import { ButtonProps } from "react-aria-components";
 //#region src/components/text/Badge/Badge.d.ts
@@ -12,7 +12,6 @@ interface BadgeProps extends PillButtonVariants {
   isDisabled?: boolean;
   disabled?: boolean;
   contentRef?: Ref<HTMLElement>;
-  textVariant?: TypographyProps["variant"];
   textSize?: TypographyProps["size"];
   /** Preferred callback name. */
   onRemove?: () => void;
@@ -23,6 +22,6 @@ interface BadgeProps extends PillButtonVariants {
   /** Compatibility callback for the historical button-like prop surface. */
   onPress?: ButtonProps["onPress"];
 }
-declare const Badge: ({ className, children, dismissible, dismissable, isDisabled, disabled, onRemove, onDismiss, dismissButtonProps, excludeFromTabOrder, onPress, contentRef, variant, textVariant: textVariantProp, textSize: textSizeProp, ...appearanceProps }: BadgeProps) => import("react").JSX.Element;
+declare const Badge: ({ className, children, dismissible, dismissable, isDisabled, disabled, onRemove, onDismiss, dismissButtonProps, excludeFromTabOrder, onPress, contentRef, variant, textSize: textSizeProp, ...appearanceProps }: BadgeProps) => import("react").JSX.Element;
 //#endregion
 export { BadgeProps as n, Badge as t };