@povio/ui 4.0.2-rc.1 → 5.0.0-rc.1

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.
@@ -116,6 +130,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 };

package/dist/{BottomSheet-CVTF1wQe.js → BottomSheet-DvqBvth_.js}

@@ -1,13 +1,13 @@
-import { t as UIConfig } from "./uiConfig.context-RFvaQYzD.js";
+import { t as UIConfig } from "./uiConfig.context-D2eUIPHn.js";
 import { t as X } from "./x-B6vfz8Ps.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { n as $f2ff30fde7b014be$export$3ddf2d174ce01153, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-CXoVeIkU.js";
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-D6KlWSFL.js";
 import { n as $8b8d26808cb8cb53$export$8948f78d83984c69, t as $8b8d26808cb8cb53$export$2b77a92f1a5ad772 } from "./Modal-CoFt5PGP.js";
-import { t as Typography } from "./Typography-AcUd9df8.js";
+import { t as Typography } from "./Typography-B0Gp1lpc.js";
 import { a as $a8ea2faf2ebe4d2f$re_export$useResizeObserver, o as $a8ea2faf2ebe4d2f$re_export$useViewportSize } from "./import-BE0r63d8.js";
 import "./i18n-CX2EjhJI.js";
-import { n as useStateAndRef, t as DomUtils } from "./dom.utils-D3mELNBA.js";
+import { n as useStateAndRef, t as DomUtils } from "./dom.utils-DjuRTR6U.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -28,13 +28,13 @@ const BottomSheetHeader = (t0) => {
 	let t3;
 	if ($[2] !== dragControls || $[3] !== hideThumb || $[4] !== isDismissable) {
 		t3 = isDismissable && !hideThumb && /* @__PURE__ */ jsx("div", {
-			className: "flex shrink-0 cursor-grab touch-none justify-center px-list-side-title pt-list-height-title-top pb-2-5",
+			className: "flex shrink-0 cursor-grab touch-none justify-center px-list-side-title pt-list-height-title-top pb-2.5",
 			onPointerDown: (e) => {
 				e.preventDefault();
 				dragControls?.start(e);
 			},
 			"aria-hidden": true,
-			children: /* @__PURE__ */ jsx("div", { className: "h-1 w-16 shrink-0 rounded-full bg-elevation-fill-default-3" })
+			children: /* @__PURE__ */ jsx("div", { className: "h-1 w-16 shrink-0 rounded-full bg-surface-default-popover" })
 		});
 		$[2] = dragControls;
 		$[3] = hideThumb;
@@ -46,14 +46,14 @@ const BottomSheetHeader = (t0) => {
 		t4 = !hideHeader && /* @__PURE__ */ jsxs("div", {
 			className: "flex justify-between px-list-side-title",
 			children: [/* @__PURE__ */ jsx(Typography, {
-				size: "label-2",
-				variant: "prominent-1",
+				size: "small",
+				className: "font-bold",
 				...headerTypography,
 				children: label
 			}), onClose && isDismissable && /* @__PURE__ */ jsx($7705c033048f6da7$export$353f5b6fc5456de1, {
 				onPress: onClose,
 				"aria-label": t(_temp),
-				className: "-m-2 shrink-0 p-2 text-interactive-text-secondary-idle focus-visible:outline-interactive-text-secondary-focus",
+				className: "-m-2 shrink-0 p-2 text-surface-default-foreground focus-visible:outline-interactive-ring",
 				children: /* @__PURE__ */ jsx(X, { className: "size-6" })
 			})]
 		});
@@ -257,7 +257,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-elevation-fill-default-1", height === "full" && "flex-1"),
+						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"),
 						children: [
 							/* @__PURE__ */ jsx("div", {
 								className: clsx("absolute bottom-full left-0 w-full outline-none", isDismissable ? "h-0" : "h-screen"),
@@ -281,7 +281,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-elevation-fill-default-1" })
+							/* @__PURE__ */ jsx("div", { className: "absolute top-full h-screen w-full bg-surface-default-card" })
 						]
 					}),
 					footer && /* @__PURE__ */ jsx(motion.div, {
@@ -289,7 +289,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-elevation-fill-default-2", "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-surface-default-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-CT0zuola.d.ts → BottomSheet-xaymO7aQ.d.ts}

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

package/dist/{BottomSheet.lazy-7AwnB4vS.d.ts → BottomSheet.lazy-CGBRPve_.d.ts}

@@ -1,4 +1,4 @@
-import { t as BottomSheetProps } from "./BottomSheet-CT0zuola.js";
+import { t as BottomSheetProps } from "./BottomSheet-xaymO7aQ.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-BibAIBhY.js → Breadcrumbs-DiIYJAWf.js}

@@ -1,13 +1,13 @@
-import { t as DropdownMenuDesktop } from "./DropdownMenuDesktop-C9ttysuk.js";
+import { t as DropdownMenuDesktop } from "./DropdownMenuDesktop-CGYxsavQ.js";
 import { t as ChevronRight } from "./chevron-right-3nKJR5Bb.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { l as $7230ffa83bc0c2cf$export$fabf2dc03a41866e, n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e } from "./utils-Czcqspm7.js";
 import { p as $263ab7fc0f95ccdb$export$4feb769f8ddf26c5 } from "./Dialog-CXoVeIkU.js";
 import { n as $984a1fc08f87e4f3$export$e2509388b49734e7, t as $984a1fc08f87e4f3$export$a6c7ac8248d6e38a } from "./Link-FupWOW1f.js";
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-D6KlWSFL.js";
-import { t as Tooltip } from "./Tooltip-D94a1IQl.js";
+import { t as Tooltip } from "./Tooltip-aE1Vswxz.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 { 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";
@@ -76,18 +76,18 @@ const $65dbe90f868fa5f4$export$dabcc1ec9dd9d1cc = /*#__PURE__*/ createLeafCompon
 //#region src/components/Breadcrumbs/breadcrumbs.cva.ts
 const breadcrumbsDefinition = UIOverrides.defineConfig({ base: ["flex items-center gap-breadcrumbs-gap-segment-to-segment"] });
 const breadcrumbSegmentDefinition = UIOverrides.defineConfig({ base: ["flex items-center gap-breadcrumbs-gap-segment-to-segment"] });
-const breadcrumbChevronDefinition = UIOverrides.defineConfig({ base: ["size-6 shrink-0 text-interactive-text-secondary-idle"] });
+const breadcrumbChevronDefinition = UIOverrides.defineConfig({ base: ["size-6 shrink-0 text-surface-default-foreground"] });
 const breadcrumbIconDefinition = UIOverrides.defineConfig({ base: ["size-4 shrink-0"] });
 const breadcrumbItemDefinition = UIOverrides.defineConfig({
-	base: ["inline-flex cursor-pointer items-center gap-breadcrumbs-gap-icon-to-text whitespace-nowrap font-inter font-medium text-label-3 no-underline"],
+	base: ["inline-flex cursor-pointer items-center gap-breadcrumbs-gap-icon-to-text whitespace-nowrap font-inter font-medium text-small no-underline"],
 	config: {
 		variants: {
 			isCurrent: {
-				true: "text-interactive-text-primary-idle",
-				false: "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover"
+				true: "text-interactive-primary-background",
+				false: "text-surface-default-foreground hover:text-tint-surface-default-foreground/80"
 			},
 			isEllipsis: {
-				true: "hover:text-interactive-text-primary-hover!",
+				true: "hover:text-tint-interactive-primary-background/80!",
 				false: ""
 			}
 		},
@@ -149,8 +149,7 @@ const Breadcrumbs = (t0) => {
 				className: breadcrumbIconCva({}),
 				"aria-label": item.label
 			}), !iconOnly_0 && /* @__PURE__ */ jsx(Typography, {
-				variant: "default",
-				size: "label-3",
+				size: "small",
 				children: item.label
 			})]
 		});
@@ -172,8 +171,7 @@ const Breadcrumbs = (t0) => {
 						isEllipsis: true
 					}),
 					children: /* @__PURE__ */ jsx(Typography, {
-						variant: "default",
-						size: "label-3",
+						size: "small",
 						children: "..."
 					})
 				})

package/dist/{Breadcrumbs-D-3YEuem.d.ts → Breadcrumbs-DyriI-Bi.d.ts}

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

package/dist/{Button-DTNjsGx5.d.ts → Button-BZ3is6IU.d.ts}

@@ -1,6 +1,6 @@
-import { n as LinkNavigationProps } from "./Link-DS9-0Ijl.js";
-import { n as ButtonVariantProps } from "./button.cva-ChabF4Am.js";
-import { t as ButtonContentVariantProps } from "./buttonContent.cva-CP857foM.js";
+import { n as LinkNavigationProps } from "./Link-QYpprkN1.js";
+import { n as ButtonVariantProps } from "./button.cva-BvRI-3Gn.js";
+import { t as ButtonContentVariantProps } from "./buttonContent.cva-BDT_CReI.js";
 import { FC, ReactElement, ReactNode, Ref, SVGProps } from "react";
 import { ButtonProps as ButtonProps$2, ToggleButtonProps as ToggleButtonProps$2 } from "react-aria-components";
 //#region src/components/buttons/Button/Button.d.ts