@povio/ui 6.0.0-rc.1 → 6.0.0-rc.2

package/MIGRATION.md

@@ -643,3 +643,31 @@ Use public component types, this guide, the [README](README.md), and explicit ex
 ## Move development tools to @povio/ui-configurator
 
 Install `@povio/ui-configurator` as a development dependency. Replace imports from `@povio/ui/ui-configurator` with `@povio/ui-configurator` (including `/vite`, `/theme`, and `/styles`), and `@povio/ui/app-canvas` with `@povio/ui-configurator/app-canvas` (including `/tanstack` and `/styles`). Add the new package to Tailwind's `@source` paths. These entries are no longer published by `@povio/ui`.
+
+## 15. Adopt shadcn/ui tokens
+
+Replace the web theme with `:root` and `.dark` shadcn role variables and their `@theme inline` aliases. The template themes in `apps/{fe,admin,storybook}/src/styles/theme.css` also include `success`, `warning`, `info`, and `destructive-foreground`.
+
+| Previous utility                                 | Replacement                                        |
+| ------------------------------------------------ | -------------------------------------------------- |
+| `bg-surface-default-background`                  | `bg-background`                                    |
+| `bg-surface-default-card`                        | `bg-card`                                          |
+| `bg-surface-default-sunken`                      | `bg-muted`                                         |
+| `text-content-primary`, `text-content-secondary` | `text-foreground`                                  |
+| `text-content-muted`                             | `text-muted-foreground`                            |
+| `bg-interactive-primary-background`              | `bg-primary`                                       |
+| `text-interactive-primary-foreground`            | `text-primary-foreground`                          |
+| `border-border-default-subtle`                   | `border-border`                                    |
+| `border-border-default-input`                    | `border-input`                                     |
+| `text-status-success-accent`                     | `text-success`                                     |
+| `text-status-warning-accent`                     | `text-warning`                                     |
+| `text-status-destructive-accent`                 | `text-destructive`                                 |
+| `text-body`, `text-large`, `text-small`          | `text-sm`, `text-sm`, `text-xs`                    |
+| `font-body`, `font-titles`                       | `font-sans` (Geist)                                |
+| Component spacing and rounding tokens            | Numeric Tailwind spacing and `rounded-sm/md/lg/xl` |
+
+Remove the `@povio/ui/color-utilities` import. State utilities were removed; use `hover:bg-accent`, `hover:bg-primary/90`, `disabled:opacity-50`, and `focus-visible:ring-[3px] focus-visible:ring-ring/50`. Restore Tailwind's default spacing, text, radius, shadow, and breakpoint scales in the app's `base.css`. Keep breakpoints in `@theme static` so `useBreakpoint` can read them at runtime.
+
+The configurator edits semantic colors directly, including OKLCH values. `--radius` controls rounding, `--spacing` controls density, and `--font-sans` controls the font. The template exposes default text sizes in an ordinary `@theme` block so runtime edits and saved settings affect the same utilities. Component props and override keys follow the configurator branch's current API.
+
+Default appearance changes include 36px ghost pagination buttons, inline AlertDialog actions with an outline secondary action, underlined links, and toasts without separators.

package/README.md

@@ -1,6 +1,6 @@
 # @povio/ui
 
-UI Components that match Povio's Atlas Design System.
+React Aria components styled with shadcn/ui design tokens and Tailwind's default scales.
 
 Upgrading an existing project? See the [migration guide](MIGRATION.md) for the web form, selection, upload, date/time, table, and page-builder changes.
 
@@ -78,7 +78,7 @@ 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.
 
-Use `Badge` for display content, `BadgeButton` for a compact, badge-styled action, and `ToggleButton` or `ToggleGroup` for selection. `BadgeButton` uses the theme's `badge-*` spacing and radius tokens; customize its recipe through `UIOverrides.badgeButton`.
+Use `Badge` for display content, `BadgeButton` for a compact, badge-styled action, and `ToggleButton` or `ToggleGroup` for selection. `BadgeButton` uses compact shadcn badge styling; customize its recipe through `UIOverrides.badgeButton`.
 
 ## Selection and text suggestions
 
@@ -183,9 +183,9 @@ See the [button migration steps](./MIGRATION.md#13-choose-buttons-by-behavior) f
 
 `Button` supports `sm` (with `s` as an equivalent alias), `default`, and `none` (zero padding). Omitting `size` uses `default`. The same sizes apply to `IconButton`, `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.
+When migrating, replace `xs` and `small` with `sm`; remove explicit `default`, `m`, `md`, `l`, and `lg` size props to use the default. `sm` is 32px high; `default` is 36px high.
 
-Use `<Button variant="text" width="hug" size="none">Read more</Button>` for a text action without button padding. The focused button cleanup preserves these sizes, spacing tokens, variants, and colors.
+Use `<Button variant="text" width="hug" size="none">Read more</Button>` for a text action without button padding. Variant names and `UIOverrides` keys remain available for customization.
 
 ## Input sizes
 
@@ -248,7 +248,7 @@ From `packages/ui`, run `bun run test:package` to build the publishable package
 
 ## 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.
+The current web theme uses shadcn/ui roles. Earlier releases used Atlas tokens; see [the migration guide](MIGRATION.md#15-adopt-shadcnui-tokens). Breaking changes follow semantic versioning.
 
 ## Publishing
 
@@ -302,40 +302,13 @@ We also use a custom tailwind plugin to shorten some selectors inside the @povio
 @plugin "@povio/ui/tw-ui-plugin";
 ```
 
-### Palette roles
+### Theme
 
-Use the template's semantic palette for custom layouts. `surface-default-background` is the page surface, `surface-default-card` is the card/panel/popover surface, and `surface-default-sunken` is for recessed areas and filled inputs. Pair them with `text-content-primary`, `text-content-secondary`, or `text-content-muted` according to emphasis. The `content-inverted-*` roles are for inverted surfaces, while `fixed-black` and `fixed-white` retain the same literal color in both modes.
-
-Use the theme's radius tokens for custom cards and layouts, such as `rounded-global-rounding-xs` (0.25rem), `rounded-global-rounding-s` (0.375rem), or `rounded-global-rounding-m` (0.5rem). The template resets Tailwind's default radii; bare `rounded`, `rounded-md`, and `rounded-lg` are not defined. Existing theme tokens such as `rounded-m` and component-specific rounding roles remain available.
-
-Status treatments have explicit pairs: `bg-status-success-background text-status-success-foreground` for a contained treatment, or `bg-status-success-subtle-background text-status-success-subtle-foreground` for a subtle treatment. Equivalent roles exist for `warning` and `destructive`. Use `text-status-success-accent` or `border-status-success-accent` for standalone status content or boundaries. Destructive subtle colors preserve their existing distinct values; they are not a reversal of the contained pair. Action components continue using `interactive-*` colors. See the [palette migration mapping](MIGRATION.md#14-migrate-palette-roles) for exact replacements.
-
-### State color utilities
-
-Import the color utilities in your application's Tailwind stylesheet. This import is required because `@povio/ui` components use these utilities:
-
-```css
-@import "tailwindcss";
-@import "./theme.css";
-@import "@povio/ui/color-utilities";
-```
-
-Use `bg-state-<color>/<state>`, `border-state-<color>/<state>`, `border-b-state-<color>/<state>`, or `text-state-<color>/<state>` to mix a theme color with a named state color in sRGB. The color resolves to `--color-<color>`. For each state, define `--states-<state>-color` and `--states-<state>-opacity` in the light and dark themes, then expose them as `--state-color-<state>` and `--state-opacity-<state>` in `@theme inline`. The theme export supplies these aliases, so additional state names require no change to the utilities.
-
-```tsx
-<button
-  type="button"
-  className="bg-interactive-primary-background border-interactive-primary-background text-interactive-primary-foreground hover:bg-state-interactive-primary-background/hover hover:border-state-interactive-primary-background/hover"
->
-  Hover to change state color
-</button>
-```
-
-The utilities support standard Tailwind variants such as `hover:`, `focus-visible:`, and `dark:`. With an opaque starting color and state mix color, the result remains opaque. Using the same base color and state for background and border gives them exactly the same result. The state mix color can be white, black, or another color supplied by the theme.
+Components use the shadcn/ui colour roles (`bg-primary`, `text-muted-foreground`, `border-input`, `ring-ring`, …) plus `success`, `warning`, `info` and `destructive-foreground`, and Tailwind's default spacing, radius, text and shadow scales. Provide them by pasting a shadcn theme (`:root` / `.dark` CSS variables and the `@theme inline` mapping) into your stylesheet — see `apps/storybook/src/styles/theme.css`. States use plain Tailwind (`hover:bg-primary/90`, `hover:bg-accent`, `disabled:opacity-50`), so no extra utilities are needed.
 
 ### Icon slots
 
-`IconSlot` reserves the Figma `icons-size` spacing token (`--spacing-icons-size`, exposed as `size-icons-size`) and centers an SVG at 80% of that size. Buttons and input icon props use it automatically, whether you pass a component reference or an element. Export this token in your Tailwind theme alongside the other Figma spacing tokens.
+`IconSlot` reserves a `size-4` box (16px, as in shadcn/ui) and centers the SVG in it at full size (`--icons-scale`, default 1). Buttons and input icon props use it automatically, whether you pass a component reference or an element.
 
 ```tsx
 import { Plus } from "lucide-react";
@@ -348,11 +321,11 @@ import { IconSlot } from "@povio/ui/icon-slot";
 />;
 ```
 
-`IconSlot` is also exported from `@povio/ui`, `@povio/ui/tanstack`, and `@povio/ui/icons`. `className` styles the outer slot; `iconClassName` styles the SVG. The slot controls SVG dimensions, including supplied SVGs with their own size classes. Use the inherited CSS variable `--icons-scale` to change the default ratio throughout a theme, or `scale` to override one slot. A 20px token at `0.8` produces a 16px SVG; a 24px token produces a 19.2px SVG. Stroke width continues to follow the icon's own configuration.
+`IconSlot` is also exported from `@povio/ui`, `@povio/ui/tanstack`, and `@povio/ui/icons`. `className` styles the outer slot; `iconClassName` styles the SVG. The slot controls SVG dimensions, including supplied SVGs with their own size classes. Use the inherited CSS variable `--icons-scale` to change the default ratio throughout a theme, or `scale` to override one slot. The default 16px slot at `0.8` produces a 12.8px SVG. Stroke width continues to follow the icon's own configuration.
 
 Override the shared recipe through `UIOverrides` at `iconSlot.cva`. Component-specific icon recipes, such as `button.iconSize`, now style the outer slot. An explicitly configured slot passed to a button or input keeps its configuration without nesting another slot.
 
-Storybook's **UI / Components / Icons / IconSlot** page includes a playground, raw-versus-slotted comparisons, and button/input examples. Adjust `tokenSize` and `scale` in Controls and enable slot outlines to compare against the Figma frame at 100% browser zoom.
+Storybook's **UI / Components / Icons / IconSlot** page includes a playground, raw-versus-slotted comparisons, and button/input examples. Adjust the slot size and `scale` in Controls and enable slot outlines to inspect the geometry.
 
 ### Z-Index
 

package/dist/{Accordion-DQRdeDs1.js → Accordion-DycXjzGK.js}

@@ -1,12 +1,12 @@
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
-import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
+import { t as IconSlot } from "./IconSlot-Cuvpj1gd.js";
 import { n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, o as $7230ffa83bc0c2cf$export$c62b8e45d58ddad9, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e, t as $7230ffa83bc0c2cf$export$2881499e37b75b9a } from "./utils-BkLF-JA3.js";
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1, t as $7705c033048f6da7$export$24d547caef80ccd1 } from "./Button-C1YB5dOw.js";
 import { t as $2ec61d1d4f780267$export$a8a3e93435678ff9 } from "./Heading-D4XFYv__.js";
-import { t as Typography } from "./Typography-LU4z2pR1.js";
-import { a as accordionHeadingTitleDefinition, c as accordionPanelContentDefinition, i as accordionHeadingSubtitleDefinition, l as accordionPanelDefinition, n as accordionDefinition, o as accordionIconDefinition, r as accordionHeadingDefinition, s as accordionItemDefinition, t as accordionChevronDefinition, u as accordionTriggerDefinition } from "./accordion.cva-CeBWV9EO.js";
+import { t as Typography } from "./Typography-Ba5l4rmj.js";
+import { a as accordionHeadingTitleDefinition, c as accordionPanelContentDefinition, i as accordionHeadingSubtitleDefinition, l as accordionPanelDefinition, n as accordionDefinition, o as accordionIconDefinition, r as accordionHeadingDefinition, s as accordionItemDefinition, t as accordionChevronDefinition, u as accordionTriggerDefinition } from "./accordion.cva-C-gUiXk5.js";
 import $ahdqC$react, { createContext, forwardRef, useContext } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -155,19 +155,19 @@ const AccordionItem = (t0) => {
 				children: [/* @__PURE__ */ jsx("div", {
 					className: headingCva({}),
 					children: /* @__PURE__ */ jsxs("div", {
-						className: "flex flex-1 items-center gap-accordion-gap-icon-to-text",
+						className: "flex flex-1 items-center gap-2",
 						children: [
 							Icon && /* @__PURE__ */ jsx(IconSlot, {
 								icon: Icon,
 								className: iconCva({})
 							}),
 							/* @__PURE__ */ jsx(Typography, {
-								size: "small",
+								size: "body",
 								className: headingTitleCva({}),
 								children: heading
 							}),
 							subheading && /* @__PURE__ */ jsx(Typography, {
-								size: "small",
+								size: "body",
 								className: headingSubtitleCva({}),
 								children: subheading
 							})

package/dist/{Alert-Cee_nKWj.d.ts → Alert-BpPHCE5-.d.ts}

@@ -1,12 +1,12 @@
 import { n as StyleMergeUtils, t as UIOverrides } from "./uiOverrides.context-Dmev7iRS.js";
-import "./style-definitions-_RXJdSk-.js";
+import "./style-definitions-DzsmGccZ.js";
 import { FC, ReactNode, SVGProps } from "react";
 //#region src/components/status/Alert/alert.cva.d.ts
 declare const alertDefinition: {
   base: string[];
   config: StyleMergeUtils.Config<{
     readonly variant: {
-      readonly outlined: "border bg-surface-default-card text-content-primary";
+      readonly outlined: "";
       readonly contained: "";
     };
     readonly color: {

package/dist/{AlertDialog-uNDUIyng.d.ts → AlertDialog-CDCbfARJ.d.ts}

@@ -1,6 +1,6 @@
-import { n as ButtonVariantProps } from "./button.cva-CBckM91c.js";
-import { n as DialogProps } from "./Dialog-V-2cgGk1.js";
-import { r as TypographyPropsCva } from "./Typography-D2FfZr7a.js";
+import { n as ButtonVariantProps } from "./button.cva-YpNNY6C-.js";
+import { n as DialogProps } from "./Dialog-2XpWsphI.js";
+import { r as TypographyPropsCva } from "./Typography-BD-MSuTp.js";
 //#region src/components/overlays/AlertDialog/AlertDialog.d.ts
 interface AlertDialogAction {
   label: string;

package/dist/{Autocomplete-D_4gEL7D.d.ts → Autocomplete-BUslodfn.d.ts}

@@ -1,4 +1,4 @@
-import { i as InputProps$1 } from "./Input-BX3sZBEp.js";
+import { i as InputProps$1 } from "./Input-Bu4G9gcn.js";
 import { InputProps, Key } from "react-aria-components";
 //#region src/components/inputs/Selection/Autocomplete/Autocomplete.d.ts
 interface AutocompleteItem {

package/dist/{Autocomplete-CWU9Ev3J.js → Autocomplete-DSwAc7jF.js}

@@ -1,4 +1,4 @@
-import { t as UIConfig } from "./uiConfig.context-CT9EVqC5.js";
+import { t as UIConfig } from "./uiConfig.context-dxsO9puE.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
 import { l as $542a13ca2fa5b484$export$5b6b19405a83ff9d } from "./Dialog-lFYX-7Ax.js";
@@ -7,12 +7,12 @@ import { n as $41fb335299a4a39e$export$f5b8910cec6cf069 } from "./Input-BG0Xjw5X
 import { i as $928221da08ecbc62$export$a11e76429ed99b4, t as $928221da08ecbc62$export$41f133550aa26f48 } from "./ListBox-CoUk0kkt.js";
 import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-D_3dPATF.js";
 import { t as useFieldAccessibility } from "./useFieldAccessibility-eZIMECmG.js";
-import { t as FormField } from "./FormField-D7KKJ6kG.js";
-import { t as inputBaseDefinition } from "./input.cva-w7ZEVQAM.js";
-import { t as TooltipWrapper } from "./TooltipWrapper-D7HUZLsP.js";
-import { t as popoverDefinition } from "./popover.cva-Bhud1wnp.js";
-import { t as selectListBoxItemDefinition } from "./selectItem.cva-BWfEkNs_.js";
-import { t as InputContent } from "./InputContent-KhD4_YvO.js";
+import { t as FormField } from "./FormField-DyqEbqx3.js";
+import { t as inputBaseDefinition } from "./input.cva-AHLI_M3K.js";
+import { t as TooltipWrapper } from "./TooltipWrapper-BrftXInI.js";
+import { t as popoverDefinition } from "./popover.cva-Ciu9Ro5G.js";
+import { t as selectListBoxItemDefinition } from "./selectItem.cva-Ch6oK4jP.js";
+import { t as InputContent } from "./InputContent-Ca4oVqIe.js";
 import { memo, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx

package/dist/{Autocomplete.bound-CqhZtdd8.d.ts → Autocomplete.bound-Db5C6Jph.d.ts}

@@ -1,4 +1,4 @@
-import { a as AutocompleteProps$1 } from "./Autocomplete-D_4gEL7D.js";
+import { a as AutocompleteProps$1 } from "./Autocomplete-BUslodfn.js";
 import { n as FieldValues, t as FormControlProps } from "./form.types-C8P4sznq.js";
 //#region src/components/inputs/Selection/Autocomplete/Autocomplete.bound.d.ts
 type ControlledAutocompleteProps<TFieldValues extends FieldValues> = FormControlProps<AutocompleteProps$1, TFieldValues>;

package/dist/{Autocomplete.bound-D0pgmsHB.js → Autocomplete.bound-e5WbxlBm.js}

@@ -1,6 +1,6 @@
 import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-D_3dPATF.js";
 import { t as FieldController } from "./form.binding-B-2id68q.js";
-import { n as AutocompleteInner } from "./Autocomplete-CWU9Ev3J.js";
+import { n as AutocompleteInner } from "./Autocomplete-DSwAc7jF.js";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/Selection/Autocomplete/Autocomplete.bound.tsx

package/dist/{Badge-C4HI9XX4.d.ts → Badge-Dp091PcC.d.ts}

@@ -1,5 +1,5 @@
-import { t as BadgeButtonVariants } from "./badgeButton.cva-B8EQLwPv.js";
-import { n as TypographyProps } from "./Typography-D2FfZr7a.js";
+import { t as BadgeButtonVariants } from "./badgeButton.cva-Cj5AWgfv.js";
+import { n as TypographyProps } from "./Typography-BD-MSuTp.js";
 import { FC, Ref, SVGProps } from "react";
 import { ButtonProps } from "react-aria-components";
 //#region src/components/text/Badge/Badge.d.ts

package/dist/{BadgeButton-h3MeQYcp.d.ts → BadgeButton-DZm_aw29.d.ts}

@@ -1,5 +1,5 @@
-import { t as BadgeButtonVariants } from "./badgeButton.cva-B8EQLwPv.js";
-import { t as ButtonContentVariantProps } from "./buttonContent.cva-DG-4lRz4.js";
+import { t as BadgeButtonVariants } from "./badgeButton.cva-Cj5AWgfv.js";
+import { t as ButtonContentVariantProps } from "./buttonContent.cva-CxgT-rxJ.js";
 import { FC, ReactNode, Ref, SVGProps } from "react";
 import { ButtonProps, ToggleButtonProps } from "react-aria-components";
 //#region src/components/buttons/BadgeButton/BadgeButton.d.ts

package/dist/{BottomSheet-BQXSdxoX.d.ts → BottomSheet-C-jdDmO7.d.ts}

@@ -1,4 +1,4 @@
-import { t as TypographyVariantProps } from "./typography.cva-GpC6QQNx.js";
+import { t as TypographyVariantProps } from "./typography.cva-CKCCpIMj.js";
 import { ReactNode, RefObject } from "react";
 //#region src/components/overlays/BottomSheet/BottomSheet.d.ts
 type BottomSheetState = "closed" | "opening" | "opened" | "closing";

package/dist/{BottomSheet-z5brMtDt.js → BottomSheet-DB0Cdlgx.js}

@@ -1,4 +1,4 @@
-import { t as UIConfig } from "./uiConfig.context-CT9EVqC5.js";
+import { t as UIConfig } from "./uiConfig.context-dxsO9puE.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { n as $f2ff30fde7b014be$export$3ddf2d174ce01153, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-lFYX-7Ax.js";
 import { n as $8b8d26808cb8cb53$export$8948f78d83984c69, t as $8b8d26808cb8cb53$export$2b77a92f1a5ad772 } from "./Modal-B4p1zFqi.js";
@@ -109,7 +109,7 @@ const BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable =
 		ref: overlayRef,
 		shouldCloseOnInteractOutside,
 		children: [/* @__PURE__ */ jsx(motion.div, {
-			className: clsx("pointer-events-none absolute inset-0 bg-support-overlay", overlayClassName),
+			className: clsx("pointer-events-none absolute inset-0 bg-black/50", overlayClassName),
 			animate: { opacity: 1 },
 			initial: { opacity: 0 },
 			exit: { opacity: 0 }
@@ -184,7 +184,7 @@ const BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable =
 						className: clsx("shrink-0", height === "auto" && "grow")
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: clsx("pointer-events-auto relative flex min-h-0 flex-col items-stretch rounded-t-xl bg-surface-default-card", height === "full" && "flex-1"),
+						className: clsx("pointer-events-auto relative flex min-h-0 flex-col items-stretch rounded-t-lg border-t bg-background text-foreground", height === "full" && "flex-1"),
 						children: [
 							/* @__PURE__ */ jsx("div", {
 								className: clsx("absolute bottom-full left-0 w-full outline-none", isDismissable ? "h-0" : "h-screen"),
@@ -208,7 +208,7 @@ const BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable =
 								className: "shrink-0",
 								style: { height: `${footerHeight + (isScrollable ? 0 : sheetMarginBottom)}px` }
 							}),
-							/* @__PURE__ */ jsx("div", { className: "absolute top-full h-screen w-full bg-surface-default-card" })
+							/* @__PURE__ */ jsx("div", { className: "absolute top-full h-screen w-full bg-background" })
 						]
 					}),
 					footer && /* @__PURE__ */ jsx(motion.div, {
@@ -216,7 +216,7 @@ const BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable =
 						initial: { opacity: 0 },
 						exit: { opacity: 0 },
 						ref: setFooterElement,
-						className: clsx("pointer-events-auto absolute z-overlay-above w-full bg-surface-default-background", "top-[calc(100dvh-var(--bottom-sheet-keyboard-inset,0))] left-0 translate-y-[calc(-100%-var(--scroll-position,0))]"),
+						className: clsx("pointer-events-auto absolute z-overlay-above w-full bg-background", "top-[calc(100dvh-var(--bottom-sheet-keyboard-inset,0))] left-0 translate-y-[calc(-100%-var(--scroll-position,0))]"),
 						children: footer
 					})
 				] })

package/dist/{BottomSheet.lazy-BzvLg8Ea.d.ts → BottomSheet.lazy-C0_6p_UQ.d.ts}

@@ -1,4 +1,4 @@
-import { t as BottomSheetProps } from "./BottomSheet-BQXSdxoX.js";
+import { t as BottomSheetProps } from "./BottomSheet-C-jdDmO7.js";
 //#region src/components/overlays/BottomSheet/BottomSheet.lazy.d.ts
 declare const BottomSheet: ({ isOpen, onOpenChange, trigger, ...props }: BottomSheetProps) => import("react").JSX.Element;
 //#endregion

package/dist/{Breadcrumbs-B9O0_VSN.d.ts → Breadcrumbs-CuupIZuv.d.ts}

@@ -1,4 +1,4 @@
-import { n as LinkNavigationProps } from "./Link-Bw2m9W4B.js";
+import { n as LinkNavigationProps } from "./Link-D0Kk3F5w.js";
 import { FC, SVGProps } from "react";
 import { Key } from "react-aria-components";
 //#region src/components/Breadcrumbs/Breadcrumbs.d.ts

package/dist/{Breadcrumbs-AbUBqBTq.js → Breadcrumbs-V-Bea_bs.js}

@@ -1,15 +1,15 @@
-import { t as DropdownMenuDesktop } from "./DropdownMenuDesktop-nMoCa6N5.js";
-import { t as Tooltip } from "./Tooltip-CMigoyri.js";
+import { t as DropdownMenuDesktop } from "./DropdownMenuDesktop-BMkiHEuY.js";
+import { t as Tooltip } from "./Tooltip-CqbyoJhl.js";
 import { t as ChevronRight } from "./chevron-right-3nKJR5Bb.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
-import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
+import { t as IconSlot } from "./IconSlot-Cuvpj1gd.js";
 import { l as $7230ffa83bc0c2cf$export$fabf2dc03a41866e, n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e } from "./utils-BkLF-JA3.js";
 import { m as $263ab7fc0f95ccdb$export$4feb769f8ddf26c5 } from "./Dialog-lFYX-7Ax.js";
 import { n as $984a1fc08f87e4f3$export$e2509388b49734e7, t as $984a1fc08f87e4f3$export$a6c7ac8248d6e38a } from "./Link-Chux-Clm.js";
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-C1YB5dOw.js";
-import { a as breadcrumbsDefinition, i as breadcrumbSegmentDefinition, n as breadcrumbIconDefinition, r as breadcrumbItemDefinition, t as breadcrumbChevronDefinition } from "./breadcrumbs.cva-DPwJJK_D.js";
-import { t as Typography } from "./Typography-LU4z2pR1.js";
+import { a as breadcrumbsDefinition, i as breadcrumbSegmentDefinition, n as breadcrumbIconDefinition, r as breadcrumbItemDefinition, t as breadcrumbChevronDefinition } from "./breadcrumbs.cva-DCAdmxWR.js";
+import { t as Typography } from "./Typography-Ba5l4rmj.js";
 import { t as LinkContext } from "./link.context-J7aQtMOr.js";
 import $ahdqC$react, { createContext, forwardRef, useContext, useLayoutEffect, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
@@ -126,7 +126,7 @@ const Breadcrumbs = (t0) => {
 				icon: /* @__PURE__ */ jsx(item.icon, { "aria-label": item.label }),
 				className: breadcrumbIconCva({})
 			}), !iconOnly_0 && /* @__PURE__ */ jsx(Typography, {
-				size: "small",
+				size: "body",
 				children: item.label
 			})]
 		});
@@ -148,7 +148,7 @@ const Breadcrumbs = (t0) => {
 						isEllipsis: true
 					}),
 					children: /* @__PURE__ */ jsx(Typography, {
-						size: "small",
+						size: "body",
 						children: "..."
 					})
 				})
@@ -188,6 +188,7 @@ const Breadcrumbs = (t0) => {
 		if ($[19] !== t9) {
 			t10 = /* @__PURE__ */ jsx(IconSlot, {
 				icon: ChevronRight,
+				scale: .875,
 				className: t9
 			});
 			$[19] = t9;
@@ -223,6 +224,7 @@ const Breadcrumbs = (t0) => {
 		if ($[30] !== t14) {
 			t15 = /* @__PURE__ */ jsx(IconSlot, {
 				icon: ChevronRight,
+				scale: .875,
 				className: t14
 			});
 			$[30] = t14;
@@ -291,6 +293,7 @@ const Breadcrumbs = (t0) => {
 				const { isCurrent: isCurrent_0 } = t9;
 				return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderBreadcrumbLink(item_1, isCurrent_0, iconOnly && item_1 === items[0]), !isCurrent_0 && /* @__PURE__ */ jsx(IconSlot, {
 					icon: ChevronRight,
+					scale: .875,
 					className: breadcrumbChevronCva({})
 				})] });
 			}

package/dist/{Button-f7FPTaiN.d.ts → Button-BL5ils-5.d.ts}

@@ -1,4 +1,4 @@
-import { r as ButtonProps$1, t as ButtonSharedProps } from "./ButtonBase-CYTFS-xK.js";
+import { r as ButtonProps$1, t as ButtonSharedProps } from "./ButtonBase-C_ODj77A.js";
 //#region src/components/buttons/Button/Button.d.ts
 /** A text action, optionally accompanied by icons. Use ToggleButton for persistent selection. */
 type ButtonProps = ButtonSharedProps & ButtonProps$1 & {

package/dist/{Button-DER_6cxv.js → Button-DU1Q8GDB.js}

@@ -1,4 +1,4 @@
-import { t as ButtonBase } from "./ButtonBase-CeFSNcVs.js";
+import { t as ButtonBase } from "./ButtonBase-BhlpPPDi.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/buttons/Button/Button.tsx

package/dist/{ButtonBase-CeFSNcVs.js → ButtonBase-BhlpPPDi.js}

@@ -1,12 +1,12 @@
-import { t as UIConfig } from "./uiConfig.context-CT9EVqC5.js";
+import { t as UIConfig } from "./uiConfig.context-dxsO9puE.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
 import { t as $984a1fc08f87e4f3$export$a6c7ac8248d6e38a } from "./Link-Chux-Clm.js";
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-C1YB5dOw.js";
 import { t as $75afe627ae0cc0fa$export$d2b052e7b4be1756 } from "./ToggleButton-DUQ8nwKY.js";
 import { t as LinkContext } from "./link.context-J7aQtMOr.js";
-import { t as ButtonContent } from "./ButtonContent-c7lJayVQ.js";
-import { a as buttonTypography, i as buttonSizeDefinition, n as buttonDefinition, r as buttonIconSizeDefinition, t as buttonContentDefinition } from "./button.cva-vO0fPUTn.js";
+import { t as ButtonContent } from "./ButtonContent-BBup-vN6.js";
+import { a as buttonTypography, i as buttonSizeDefinition, n as buttonDefinition, r as buttonIconSizeDefinition, t as buttonContentDefinition } from "./button.cva-fkUW5b2d.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/buttons/shared/ButtonBase.tsx
 const getContentIconPosition = ({ icon, startIcon, endIcon, iconPosition }) => {
@@ -52,7 +52,8 @@ const ButtonBase = ({ behavior = "action", icon: Icon, startIcon, endIcon, iconP
 		}), buttonSizeCva({
 			...props,
 			variant,
-			size
+			size,
+			iconPosition: contentIconPosition
 		}), buttonContentCva({
 			...props,
 			variant,

package/dist/{ButtonBase-CYTFS-xK.d.ts → ButtonBase-C_ODj77A.d.ts}

@@ -1,6 +1,6 @@
-import { n as LinkNavigationProps } from "./Link-Bw2m9W4B.js";
-import { n as ButtonVariantProps } from "./button.cva-CBckM91c.js";
-import { t as ButtonContentVariantProps } from "./buttonContent.cva-DG-4lRz4.js";
+import { n as LinkNavigationProps } from "./Link-D0Kk3F5w.js";
+import { n as ButtonVariantProps } from "./button.cva-YpNNY6C-.js";
+import { t as ButtonContentVariantProps } from "./buttonContent.cva-CxgT-rxJ.js";
 import { FC, ReactElement, ReactNode, Ref, SVGProps } from "react";
 import { ButtonProps as ButtonProps$1, ToggleButtonProps as ToggleButtonProps$1 } from "react-aria-components";
 //#region src/components/buttons/shared/ButtonBase.d.ts

package/dist/{ButtonContent-c7lJayVQ.js → ButtonContent-BBup-vN6.js}

@@ -1,8 +1,8 @@
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { r as cva, t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
-import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
-import { t as typographyDefinition } from "./typography.cva-iD15k56p.js";
-import { t as Spinner } from "./Spinner-BeVTUzzx.js";
+import { t as IconSlot } from "./IconSlot-Cuvpj1gd.js";
+import { t as typographyDefinition } from "./typography.cva-CXolEQdT.js";
+import { t as Spinner } from "./Spinner-CFj5Iu77.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/buttons/shared/buttonContent.cva.ts
@@ -18,15 +18,6 @@ const buttonContentLabel = cva("hyphens-auto md:truncate", {
 			false: ""
 		}
 	},
-	compoundVariants: [{
-		iconPosition: "left",
-		hideText: false,
-		className: "mr-button-side-button-content"
-	}, {
-		iconPosition: "right",
-		hideText: false,
-		className: "ml-button-side-button-content"
-	}],
 	defaultVariants: {
 		iconPosition: "none",
 		hideText: false
@@ -86,7 +77,7 @@ const ButtonContent = (t0) => {
 	if ($[9] !== endIconElement || $[10] !== hideText || $[11] !== startIconOrLoader || $[12] !== typographyCva || $[13] !== typographyOverrides) {
 		const resolvedTypography = {
 			size: "small",
-			className: "font-bold",
+			className: "font-medium",
 			...typographyOverrides
 		};
 		t4 = startIconOrLoader;

package/dist/{Calendar-DRQ536wk.js → Calendar-ChmIflXX.js}

@@ -1,20 +1,21 @@
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
-import { n as ChevronUp, r as ChevronLeft } from "./Tooltip-CMigoyri.js";
+import { n as ChevronUp, r as ChevronLeft } from "./Tooltip-CqbyoJhl.js";
 import { t as ChevronRight } from "./chevron-right-3nKJR5Bb.js";
-import { a as $f11fb0bcf1b2687a$export$61c6a8c84e605fb6, i as CalendarGrid, r as $1697a7ad3db7b79f$re_export$useDateFormatter } from "./DatePickerInput-Cs9RwZfy.js";
+import { a as $f11fb0bcf1b2687a$export$61c6a8c84e605fb6, i as CalendarGrid, r as $1697a7ad3db7b79f$re_export$useDateFormatter } from "./DatePickerInput-TND0rEMc.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
-import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
+import { t as IconSlot } from "./IconSlot-Cuvpj1gd.js";
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-C1YB5dOw.js";
 import { i as $928221da08ecbc62$export$a11e76429ed99b4, t as $928221da08ecbc62$export$41f133550aa26f48 } from "./ListBox-CoUk0kkt.js";
 import { n as $bc25b811ec97a172$export$40258cc1d95ff477 } from "./ToggleButton-DUQ8nwKY.js";
-import { t as Typography } from "./Typography-LU4z2pR1.js";
+import { t as Typography } from "./Typography-Ba5l4rmj.js";
+import { n as uiOutlineClass } from "./outline.clsx-DGGQQRkM.js";
 import { BadgeButton } from "./components/badge-button.js";
-import { t as useBreakpoint } from "./useBreakpoint-BzYqQEBO.js";
+import { t as useBreakpoint } from "./useBreakpoint-DOUmXVZ2.js";
 import { t as $3e6197669829fe11$export$40bfa8c7b0832715 } from "./useControlledState-CuU1VIh1.js";
 import { i as $fd2148440a13ec26$export$fc1a364ae1f3ff10 } from "./NumberFormatter-DYarfm5F.js";
-import { f as $8b141f2f71e88f85$export$2440da353cedad43, g as $8b141f2f71e88f85$export$f18627323ab57ac0, h as $8b141f2f71e88f85$export$c5221a78ef73c5e9, p as $8b141f2f71e88f85$export$7e319ea407e63bc0 } from "./staticDateTimeSegments-Bt5wCZvg.js";
+import { f as $8b141f2f71e88f85$export$2440da353cedad43, g as $8b141f2f71e88f85$export$f18627323ab57ac0, h as $8b141f2f71e88f85$export$c5221a78ef73c5e9, p as $8b141f2f71e88f85$export$7e319ea407e63bc0 } from "./staticDateTimeSegments-CA_lwN-O.js";
 import "./i18n-BjNKHh_D.js";
-import { n as TimePickerForm } from "./datePickerValue.utils-OAQBDk1R.js";
+import { n as TimePickerForm } from "./datePickerValue.utils-BxHR_BQZ.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -125,6 +126,7 @@ function $28aae683a942e141$export$87194bb378cc3ac2(props) {
 }
 //#endregion
 //#region src/components/inputs/DateTime/shared/CalendarHeader.tsx
+const calendarNavButtonClassName = clsx("inline-flex size-8 shrink-0 items-center justify-center rounded-md p-0 transition-all select-none", "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 disabled:pointer-events-none", uiOutlineClass);
 const HourCycle = {
 	12: "h12",
 	24: "h23"
@@ -153,18 +155,15 @@ const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextB
 		timeLabel = timeFormatter.format(date);
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: "inline-flex w-full items-center justify-between border-border-default-subtle border-b border-solid px-1",
+		className: "flex w-full items-center justify-between gap-1 p-3",
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				className: clsx("inline-flex h-12 items-center", includesTime ? "p-1 md:p-3" : "p-3"),
+				className: "inline-flex items-center",
 				children: /* @__PURE__ */ jsx($7705c033048f6da7$export$353f5b6fc5456de1, {
 					...prevButtonProps,
 					isDisabled: !!toggleState,
-					className: clsx("shrink-0 focus-visible:outline-interactive-ring", !!toggleState && "opacity-0"),
-					children: /* @__PURE__ */ jsx(IconSlot, {
-						icon: ChevronLeft,
-						className: "text-interactive-subtle-primary-foreground"
-					})
+					className: clsx(calendarNavButtonClassName, !!toggleState && "opacity-0"),
+					children: /* @__PURE__ */ jsx(IconSlot, { icon: ChevronLeft })
 				})
 			}),
 			/* @__PURE__ */ jsxs($bc25b811ec97a172$export$40258cc1d95ff477, {
@@ -228,15 +227,12 @@ const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextB
 				]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: clsx("inline-flex h-12 items-center", includesTime ? "p-1 md:p-3" : "p-3"),
+				className: "inline-flex items-center",
 				children: /* @__PURE__ */ jsx($7705c033048f6da7$export$353f5b6fc5456de1, {
 					...nextButtonProps,
 					isDisabled: !!toggleState,
-					className: clsx("shrink-0 focus-visible:outline-interactive-ring", !!toggleState && "opacity-0"),
-					children: /* @__PURE__ */ jsx(IconSlot, {
-						icon: ChevronRight,
-						className: "text-interactive-subtle-primary-foreground"
-					})
+					className: clsx(calendarNavButtonClassName, !!toggleState && "opacity-0"),
+					children: /* @__PURE__ */ jsx(IconSlot, { icon: ChevronRight })
 				})
 			})
 		]
@@ -315,10 +311,10 @@ const MonthPicker = ({ state, onSelectionChange, onDateChange, onCommit, selecte
 					if (monthNumber !== selectedMonth) return;
 					onCommit?.();
 				},
-				className: clsx("flex items-center justify-center text-content-secondary", "rounded-button-rounding-default border border-border-default-subtle border-solid bg-surface-default-card", "not-selected:not-disabled:hover:text-state-content-secondary/hover", "selected:border-interactive-primary-background selected:bg-interactive-primary-background selected:text-interactive-primary-foreground", "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-ring focus-visible:outline-offset-1", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
+				className: clsx("flex items-center justify-center rounded-md border border-solid text-sm font-medium shadow-xs transition-all", "not-selected:border-border not-selected:bg-background not-selected:text-foreground", "dark:not-selected:border-input dark:not-selected:bg-input/30", "not-selected:not-disabled:hover:bg-accent not-selected:not-disabled:hover:text-accent-foreground", "dark:not-selected:not-disabled:hover:bg-input/50", "selected:border-primary selected:bg-primary selected:text-primary-foreground", uiOutlineClass, "not-selected:focus-visible:border-ring", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
 				children: /* @__PURE__ */ jsx(Typography, {
 					as: "span",
-					size: "small",
+					size: "body",
 					children: month
 				})
 			}, monthNumber);
@@ -449,10 +445,10 @@ const YearPicker = ({ state, onSelectionChange, onDateChange, onCommit, selected
 					if (index !== selectedYearIndex) return;
 					onCommit?.();
 				},
-				className: clsx("flex px-4 py-2 text-content-secondary outline-none", "border-border-default-subtle border-b border-solid bg-surface-default-card last:border-b-0", "not-selected:not-disabled:hover:text-state-content-secondary/hover", "selected:bg-interactive-primary-background selected:text-interactive-primary-foreground", "focus-visible:bg-state-interactive-primary-background/focus focus-visible:text-interactive-primary-foreground", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
+				className: clsx("flex border-b border-border border-solid px-4 py-2 text-sm outline-none last:border-b-0", "not-selected:text-foreground", "not-selected:not-disabled:hover:bg-accent not-selected:not-disabled:hover:text-accent-foreground", "not-selected:focus-visible:bg-accent not-selected:focus-visible:text-accent-foreground", "selected:bg-primary selected:text-primary-foreground", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
 				children: /* @__PURE__ */ jsx(Typography, {
 					as: "span",
-					size: "small",
+					size: "body",
 					children: year.formatted
 				})
 			}, index);

package/dist/{CheckContent-D7sZPmzx.js → CheckContent-DHKG_FY6.js}

@@ -1,6 +1,6 @@
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
-import { t as typographyDefinition } from "./typography.cva-iD15k56p.js";
+import { t as typographyDefinition } from "./typography.cva-CXolEQdT.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/shared/CheckContent.tsx
 const CheckContent = ({ children, className, contentClassName, ...props }) => {