@botiverse/raft-ui 0.21.1 → 0.22.0

package/dist/index.mjs

@@ -1,21 +1,21 @@
 import { cn } from "./cn.mjs";
-import { $ as MessageReactionPickerStatic, $n as DialogHeader, A as MessageEmbedFooter, An as ScrollAreaContent, At as MessageItemEmbedded, B as MessageReferenceChip, Bn as TooltipContent, Bt as AvatarFallback, C as MessageQuotedPreviewLoading, Cn as PanelBody, Ct as MessageItemSenderButton, D as MessageQuotedPreviewUnavailable, Dn as PanelScrollViewport, Dt as MessageItemBody, E as MessageQuotedPreviewTimestamp, En as PanelScrollContent, Et as MessageItemAttachments, F as MessageTextSelectionToolbarSeparator, Fn as useMobileViewport, Ft as MessageItemGutter, G as MessageReferenceText, Gn as textLinkVariants, Gt as SegmentedControlCount, H as MessageReferenceLabel, Hn as TooltipProvider, Ht as AvatarGroupCount, I as MessageMultiSelect, In as Checkbox, It as MessageItem, J as MessageReactionChip, Jn as DialogBody, K as MessageReferenceUnavailable, Kn as Badge, Kt as SegmentedControlItem, L as MessageMultiSelectCheckbox, Ln as CheckboxIndicator, Lt as searchHit, M as messageEmbed, Mn as ScrollAreaScrollbar, Mt as MessageItemSearchMatch, N as MessageTextSelectionToolbar, Nn as ScrollAreaThumb, Nt as MessageItemAvatarSlot, O as MessageEmbed, On as PanelSection, Ot as MessageItemContent, P as MessageTextSelectionToolbarButton, Pn as ScrollAreaViewport, Pt as MessageItemContinuationTime, Q as MessageReactionPickerContent, Qn as DialogFooter, R as MessageMultiSelectToolbar, Rn as PRESENCE_COLOR, Rt as Avatar, S as MessageQuotedPreviewHeader, Sn as Panel, St as MessageItemSenderBadges, T as MessageQuotedPreviewThread, Tn as PanelHeaderRoot, Tt as MessageItemTime, U as MessageReferencePending, Un as TooltipTrigger, Ut as AvatarImage, V as MessageReferenceIndicator, Vn as TooltipPortal, Vt as AvatarGroup, W as MessageReferenceSuffix, Wn as TextLink, Wt as SegmentedControl, X as MessageReactionErrorIndicator, Xn as DialogContent, Xt as useOverflowTitle, Y as MessageReactionCount, Yn as DialogClose, Z as MessageReactionGlyph, Zn as DialogDescription, _n as DropdownMenuSubmenu, _r as controlIconInset, an as DropdownMenuFooter, ar as DialogTrigger, at as MessageReactionTooltipNameText, b as MessageQuotedPreviewChannel, bn as Kbd, br as decisionWidth, bt as MessageItemMeta, c as MessageListDateDivider, cn as DropdownMenuItemLabel, cr as Spinner, ct as MessageItemBadge, d as MessageListNotice, dn as DropdownMenuPortal, dr as withOverlayLayer, dt as MessageItemSavedIndicator, er as DialogNav, et as MessageReactionQuickButton, f as MessageList, fn as DropdownMenuRadioGroup, fr as resolveThemeScopeProps, ft as MessageItemToolbar, g as MessageQuotedPreviewAuthor, gn as DropdownMenuShortcut, gr as tv, h as MessageQuotedPreviewAttachments, hn as DropdownMenuSeparator, hr as ThemeStateContext, in as DropdownMenuContent, ir as DialogTitle, it as MessageReactionTooltipName, j as MessageEmbedHeader, jn as ScrollAreaCorner, jt as MessageItemFooter, k as MessageEmbedContent, kn as ScrollArea, kt as MessageItemEdited, l as MessageListEndFade, ln as DropdownMenuLabel, lr as defaultNativeButton, lt as MessageItemBadgeSeparator, m as MessageQuotedPreviewAttachment, mn as DropdownMenuRadioItemIndicator, mr as useTheme, n as useHoldThenMoveTouchSensor, nn as DropdownMenuCheckboxItem, nr as DialogPortal, nt as MessageReactionTooltipContent, on as DropdownMenuItem, or as Button, ot as MessageReactionTooltipNames, p as MessageQuotedPreview, pn as DropdownMenuRadioItem, pr as useThemeScopeProps, pt as MessageItemToolbarButton, q as MessageReactionAddButton, qn as Dialog, qt as SegmentedControlLabel, r as useMouseOnlyPointerSensor, rn as DropdownMenuCheckboxItemIndicator, rr as DialogSurface, rt as MessageReactionTooltipMeta, sn as DropdownMenuItemCount, sr as buttonVariants, st as MessageReactionTooltipSeparator, t as inboxItem, tn as DropdownMenu, tr as DialogOverlay, tt as MessageReactionQuickRow, u as MessageListHistoryLimited, un as DropdownMenuPopup, ur as useParentOverlayKind, ut as MessageItemReadReceipt, v as MessageQuotedPreviewAuthorMeta, vn as DropdownMenuSubmenuTrigger, vr as headEdgePull, vt as MessageItemHeader, w as MessageQuotedPreviewText, wn as PanelFooter, wt as MessageItemSenderGroup, x as MessageQuotedPreviewContent, xn as KbdGroup, xt as MessageItemSender, y as MessageQuotedPreviewAuthorName, yn as DropdownMenuTrigger, yr as headEdges, yt as MessageItemInlineStatus, z as MessageMultiSelectToolbarActions, zn as Tooltip, zt as AvatarBadge } from "./inbox-item.recipe-DelZxRmY.mjs";
+import { $ as MessageReactionPickerStatic, $n as DropdownMenuRadioGroup, $r as DialogSheetReset, $t as PreviewCardContent, A as messageEmbed, An as PopoverPopup, Ar as Badge, At as MessageItemEmbedded, B as MessageReferenceIndicator, Bn as MobileNavRoot, Bt as AvatarFallback, C as MessageQuotedPreviewThread, Cn as PopoverArrow, Cr as CheckboxIndicator, Ct as MessageItemSenderButton, D as MessageEmbedContent, Dn as PopoverContent, Dr as TooltipPortal, Dt as MessageItemBody, E as MessageEmbed, En as PopoverClose, Er as TooltipContent, Et as MessageItemAttachments, F as MessageMultiSelectCheckbox, Fn as PopoverViewport, Fr as DialogBody, Ft as MessageItemGutter, G as MessageReferenceUnavailable, Gn as DropdownMenuFooter, H as MessageReferencePending, Hn as DropdownMenuCheckboxItem, Hr as DialogNav, Ht as AvatarGroupCount, I as MessageMultiSelectToolbar, In as useHoldThenMoveTouchSensor, Ir as DialogClose, It as MessageItem, J as MessageReactionChip, Jn as DropdownMenuItemLabel, Jr as DialogTrigger, K as inlineChip, Kn as DropdownMenuItem, Kr as DialogSurface, L as MessageMultiSelectToolbarActions, Ln as useMouseOnlyPointerSensor, Lr as DialogContent, Lt as searchHit, M as MessageTextSelectionToolbarButton, Mn as PopoverSeparator, Mt as MessageItemSearchMatch, N as MessageTextSelectionToolbarSeparator, Nn as PopoverTitle, Nr as useMobileViewport, Nt as MessageItemAvatarSlot, O as MessageEmbedFooter, On as PopoverDescription, Or as TooltipProvider, Ot as MessageItemContent, P as MessageMultiSelect, Pn as PopoverTrigger, Pr as Dialog, Pt as MessageItemContinuationTime, Q as MessageReactionPickerContent, Qn as DropdownMenuPortal, Qr as textLinkVariants, R as MessageReferenceChip, Rn as MobileNavItem, Rr as DialogDescription, Rt as Avatar, S as MessageQuotedPreviewText, Sr as Checkbox, St as MessageItemSenderBadges, T as MessageQuotedPreviewUnavailable, Tr as Tooltip, Tt as MessageItemTime, U as MessageReferenceSuffix, Un as DropdownMenuCheckboxItemIndicator, Ur as DialogOverlay, Ut as AvatarImage, V as MessageReferenceLabel, Vn as DropdownMenu, Vr as DialogHeader, Vt as AvatarGroup, W as MessageReferenceText, Wn as DropdownMenuContent, Wr as DialogPortal, Wt as useOverflowTitle, X as MessageReactionErrorIndicator, Xr as panelToggleAction, Y as MessageReactionCount, Yn as DropdownMenuLabel, Yr as PanelAction, Yt as PreviewCard, Z as MessageReactionGlyph, Zn as DropdownMenuPopup, Zr as TextLink, Zt as PreviewCardArrow, _ as MessageQuotedPreviewAuthorName, _r as ScrollAreaContent, ai as useParentOverlayKind, an as PreviewCardPopup, ar as DropdownMenuSubmenuTrigger, at as MessageReactionTooltipNameText, b as MessageQuotedPreviewHeader, br as ScrollAreaThumb, bt as MessageItemMeta, c as MessageListHistoryLimited, ci as useTheme, cn as PreviewCardTitle, cr as KbdGroup, ct as MessageItemBadge, d as MessageQuotedPreview, di as stackedActions, dr as PanelFooter, dt as MessageItemSavedIndicator, ei as Button, en as PreviewCardDescription, er as DropdownMenuRadioItem, et as MessageReactionQuickButton, f as MessageQuotedPreviewAttachment, fi as useStackedActions, fr as PanelHeaderRoot, ft as MessageItemToolbar, g as MessageQuotedPreviewAuthorMeta, gi as decisionWidth, gr as ScrollArea, hi as headEdges, hr as PanelSection, ir as DropdownMenuSubmenu, it as MessageReactionTooltipName, j as MessageTextSelectionToolbar, jn as PopoverPortal, jt as MessageItemFooter, k as MessageEmbedHeader, kn as PopoverHeader, kr as TooltipTrigger, kt as MessageItemEdited, l as MessageListNotice, li as ThemeStateContext, ln as PreviewCardTrigger, lr as Panel, lt as MessageItemBadgeSeparator, m as MessageQuotedPreviewAuthor, mi as headEdgePull, mr as PanelScrollViewport, ni as Spinner, nr as DropdownMenuSeparator, nt as MessageReactionTooltipContent, o as MessageListDateDivider, oi as withOverlayLayer, on as PreviewCardPortal, or as DropdownMenuTrigger, ot as MessageReactionTooltipNames, p as MessageQuotedPreviewAttachments, pi as controlIconInset, pr as PanelScrollContent, pt as MessageItemToolbarButton, q as MessageReactionAddButton, qn as DropdownMenuItemCount, qr as DialogTitle, ri as defaultNativeButton, rn as PreviewCardHeader, rr as DropdownMenuShortcut, rt as MessageReactionTooltipMeta, s as MessageListEndFade, si as useThemeScopeProps, sn as PreviewCardSeparator, sr as Kbd, st as MessageReactionTooltipSeparator, t as inboxItem, ti as buttonVariants, tr as DropdownMenuRadioItemIndicator, tt as MessageReactionQuickRow, u as MessageList, ui as tv, ur as PanelBody, ut as MessageItemReadReceipt, v as MessageQuotedPreviewChannel, vr as ScrollAreaCorner, vt as MessageItemHeader, w as MessageQuotedPreviewTimestamp, wn as PopoverBackdrop, wr as PRESENCE_COLOR, wt as MessageItemSenderGroup, x as MessageQuotedPreviewLoading, xn as Popover, xr as ScrollAreaViewport, xt as MessageItemSender, y as MessageQuotedPreviewContent, yr as ScrollAreaScrollbar, yt as MessageItemInlineStatus, zn as MobileNavLabel, zr as DialogFooter, zt as AvatarBadge } from "./inbox-item.recipe-3j4DHKZ2.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
-import { AlertTriangle, Bell, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Copy, FileText, Image, Info, Upload, X, Zap } from "lucide-react";
+import { AlertTriangle, Bell, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, Copy, FileText, Image, Info, TriangleAlert, Upload, X, Zap } from "lucide-react";
 import { Children, cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { flushSync } from "react-dom";
 import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
 import { Collapsible } from "@base-ui/react/collapsible";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
-import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";
+import { DndContext, DragOverlay, KeyboardCode, KeyboardSensor, closestCenter, closestCorners, getFirstCollision, pointerWithin, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { Input as Input$1 } from "@base-ui/react/input";
 import { Field as Field$1 } from "@base-ui/react/field";
-import { flushSync } from "react-dom";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 import { Select as Select$1 } from "@base-ui/react/select";
 import { Radio } from "@base-ui/react/radio";
@@ -24,7 +24,6 @@ import { Switch as Switch$1 } from "@base-ui/react/switch";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 import { Progress as Progress$1 } from "@base-ui/react/progress";
-import { DndContext, DragOverlay, KeyboardCode, KeyboardSensor, closestCenter, closestCorners, getFirstCollision, pointerWithin, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Toast } from "@base-ui/react/toast";
@@ -51,7 +50,11 @@ const alertDialog = tv({
 			"px-5 pt-1.5 pb-5 first:pt-5",
 			"font-sans text-subhead text-foreground-muted"
 		],
-		footer: ["flex items-center justify-end", "gap-2 px-5 pb-5 first:pt-5 [[data-slot=alert-dialog-header]+&]:pt-5"],
+		footer: [
+			"flex min-w-0 items-center justify-end",
+			...stackedActions,
+			"gap-2 px-5 pb-5 first:pt-5 [[data-slot=alert-dialog-header]+&]:pt-5"
+		],
 		title: ["m-0 min-w-0 text-foreground", "font-sans text-headline font-bold"],
 		description: ["m-0", "font-sans text-subhead text-foreground-muted"]
 	},
@@ -112,7 +115,7 @@ function AlertDialogContent({ className, children, portalProps, overlay, ...prop
 			className: content({ className }),
 			...props,
 			role: "alertdialog",
-			children
+			children: /* @__PURE__ */ jsx(DialogSheetReset, { children })
 		})]
 	});
 }
@@ -132,11 +135,14 @@ function AlertDialogBody({ className, ...props }) {
 		...props
 	});
 }
-function AlertDialogFooter({ className, ...props }) {
+function AlertDialogFooter({ className, ref, ...props }) {
 	const { footer } = alertDialog();
+	const [stacked, rowRef] = useStackedActions(ref);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-dialog-footer",
+		ref: rowRef,
 		className: footer({ className }),
+		...stacked ? { "data-stacked": "" } : {},
 		...props
 	});
 }
@@ -511,7 +517,7 @@ function DrawerContent({ className, children, portalProps, ...props }) {
 				children: [hasSnapPoints ? /* @__PURE__ */ jsx(DrawerSwipeHandle, {}) : null, /* @__PURE__ */ jsx(Drawer$1.Content, {
 					"data-slot": "drawer-content",
 					className: content(),
-					children
+					children: /* @__PURE__ */ jsx(DialogSheetReset, { children })
 				})]
 			})
 		})]
@@ -1211,13 +1217,13 @@ const status = tv({
 	variants: {
 		variant: {
 			default: { root: "[--status-color:var(--presence-offline)]" },
-			primary: { root: "[--status-color:var(--color-primary-400)]" },
-			information: { root: "[--status-color:var(--color-info)]" },
-			muted: { root: "[--status-color:var(--color-secondary-400)]" },
-			accent: { root: "[--status-color:var(--color-accent-400)]" },
-			success: { root: "[--status-color:var(--color-success)]" },
-			warning: { root: "[--status-color:var(--color-warning)]" },
-			danger: { root: "[--status-color:var(--color-danger)]" }
+			primary: { root: "[--status-color:var(--brand-400)]" },
+			information: { root: "[--status-color:var(--info)]" },
+			muted: { root: "[--status-color:var(--secondary-400)]" },
+			accent: { root: "[--status-color:var(--attention-400)]" },
+			success: { root: "[--status-color:var(--success)]" },
+			warning: { root: "[--status-color:var(--warning)]" },
+			danger: { root: "[--status-color:var(--danger)]" }
 		},
 		size: {
 			xs: { root: "size-1.5 rounded-[1px] border" },
@@ -3231,70 +3237,6 @@ function RaftWordmarkArtwork() {
 	] });
 }
 //#endregion
-//#region src/components/mobile-nav/mobile-nav.tsx
-const mobileNav = tv({ slots: {
-	root: [
-		"grid w-full flex-none grid-flow-col auto-cols-fr items-start gap-0",
-		"border-t border-line-seam bg-layer-card px-2 pt-1.5 text-foreground-hint",
-		"pb-[max(8px,min(env(safe-area-inset-bottom,0px),34px))]"
-	],
-	item: [
-		"relative inline-flex shrink-0 items-center outline-none",
-		"disabled:pointer-events-none disabled:opacity-45",
-		"[&_svg]:shrink-0",
-		"isolate min-w-0 flex-col justify-start gap-[7px] border-0 px-0 pt-1 pb-0",
-		"font-sans text-[10px]/3 font-semibold text-foreground-hint",
-		"*:relative *:z-10 [&_svg]:size-[22px] [&_svg]:stroke-2",
-		"before:pointer-events-none before:absolute before:top-0 before:left-1/2 before:z-0 before:-translate-x-1/2",
-		"before:h-[30px] before:w-14 before:rounded-control before:border-[1.5px] before:border-transparent before:content-['']",
-		"active:before:bg-fill-medium",
-		"data-[selected=true]:font-bold data-[selected=true]:text-foreground",
-		"data-[selected=true]:[&_svg]:text-sticker-ink",
-		"data-[selected=true]:before:border-sticker-ink data-[selected=true]:before:bg-brand data-[selected=true]:before:ring-[1.5px] data-[selected=true]:before:ring-sticker-edge",
-		"data-[selected=true]:active:before:overlay-sticker-medium",
-		"rounded-control focus-visible:shadow-focus"
-	],
-	itemLabel: ["min-w-0 truncate", "max-w-full"]
-} });
-function MobileNavRoot({ className, render, ...props }) {
-	const { root } = mobileNav();
-	const defaultProps = {
-		"data-slot": "mobile-nav-root",
-		className: root({ className })
-	};
-	return useRender({
-		defaultTagName: "nav",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-function MobileNavItem({ nativeButton = true, selected, className, render, ...props }) {
-	const { item } = mobileNav();
-	const defaultProps = {
-		type: nativeButton ? "button" : void 0,
-		"aria-pressed": nativeButton ? selected : void 0,
-		"data-slot": "mobile-nav-item",
-		"data-selected": selected ? "true" : void 0,
-		className: item({ className })
-	};
-	return useRender({
-		render: render ?? /* @__PURE__ */ jsx(Button$1, {}),
-		props: mergeProps(defaultProps, props)
-	});
-}
-function MobileNavLabel({ className, render, ...props }) {
-	const { itemLabel } = mobileNav();
-	const defaultProps = {
-		"data-slot": "mobile-nav-item-label",
-		className: itemLabel({ className })
-	};
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-//#endregion
 //#region src/components/workspace-button/workspace-button.tsx
 function WorkspaceButton({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Button, {
@@ -3318,280 +3260,6 @@ function WorkspaceButtonName({ className, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/popover/popover.tsx
-const popover = tv({ slots: {
-	trigger: ["select-none"],
-	positioner: ["isolate z-50 outline-none"],
-	content: [
-		"max-h-(--available-height) min-w-[220px] overflow-hidden",
-		"outline-none",
-		"rounded-container bg-layer-popover text-foreground",
-		"shadow-float ring-1 ring-line-seam"
-	],
-	header: ["flex items-center justify-between px-3", "min-h-11 gap-2 py-1.5 pr-1.5 pl-4"],
-	separator: ["border-t", "border-line-hairline"],
-	title: ["m-0", "font-sans text-headline font-bold text-foreground"],
-	description: ["m-0", "font-sans text-footnote text-foreground-muted"],
-	close: [
-		"inline-flex items-center justify-center",
-		"outline-none transition-colors",
-		"h-8 min-w-8 rounded-chip px-1.5",
-		"font-sans text-footnote font-bold text-foreground",
-		"hover:bg-fill-medium active:bg-fill-medium",
-		"focus-visible:shadow-focus",
-		"[&_svg]:size-4.5"
-	],
-	arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"],
-	backdrop: ["fixed inset-0", "bg-transparent"],
-	viewport: ["block"]
-} });
-function Popover(props) {
-	return /* @__PURE__ */ jsx(Popover$1.Root, {
-		"data-slot": "popover",
-		...props
-	});
-}
-function PopoverTrigger({ className, ...props }) {
-	const { trigger } = popover();
-	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
-		"data-slot": "popover-trigger",
-		className: trigger({ className }),
-		...props
-	});
-}
-function PopoverPortal(props) {
-	return /* @__PURE__ */ jsx(Popover$1.Portal, {
-		"data-slot": "popover-portal",
-		...useThemeScopeProps(props)
-	});
-}
-function PopoverPopup({ className, ...props }) {
-	const { content } = popover();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "popover-content",
-		className: content({ className }),
-		...props
-	});
-}
-function PopoverContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, container, portalProps, className, ...props }) {
-	const { positioner, content } = popover();
-	const portalContainer = container !== void 0 ? container : portalProps?.container;
-	return /* @__PURE__ */ jsx(PopoverPortal, {
-		...portalProps,
-		container: portalContainer,
-		children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
-			align,
-			alignOffset,
-			anchor,
-			arrowPadding,
-			collisionAvoidance,
-			collisionBoundary,
-			collisionPadding,
-			disableAnchorTracking,
-			positionMethod,
-			side,
-			sideOffset,
-			sticky,
-			className: positioner(),
-			children: /* @__PURE__ */ jsx(Popover$1.Popup, {
-				"data-slot": "popover-content",
-				className: content({ className }),
-				...props
-			})
-		})
-	});
-}
-function PopoverViewport({ className, ...props }) {
-	const { viewport } = popover();
-	return /* @__PURE__ */ jsx(Popover$1.Viewport, {
-		"data-slot": "popover-viewport",
-		className: viewport({ className }),
-		...props
-	});
-}
-function PopoverHeader({ className, ...props }) {
-	const { header } = popover();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "popover-header",
-		className: header({ className }),
-		...props
-	});
-}
-function PopoverSeparator({ className, ...props }) {
-	const { separator } = popover();
-	return /* @__PURE__ */ jsx("div", {
-		role: "separator",
-		"aria-orientation": "horizontal",
-		"data-slot": "popover-separator",
-		className: separator({ className }),
-		...props
-	});
-}
-function PopoverTitle({ className, ...props }) {
-	const { title } = popover();
-	return /* @__PURE__ */ jsx(Popover$1.Title, {
-		"data-slot": "popover-title",
-		className: title({ className }),
-		...props
-	});
-}
-function PopoverDescription({ className, ...props }) {
-	const { description } = popover();
-	return /* @__PURE__ */ jsx(Popover$1.Description, {
-		"data-slot": "popover-description",
-		className: description({ className }),
-		...props
-	});
-}
-function PopoverClose({ className, ...props }) {
-	const { close } = popover();
-	return /* @__PURE__ */ jsx(Popover$1.Close, {
-		"data-slot": "popover-close",
-		className: close({ className }),
-		...props
-	});
-}
-function PopoverArrow({ className, ...props }) {
-	const { arrow } = popover();
-	return /* @__PURE__ */ jsx(Popover$1.Arrow, {
-		"data-slot": "popover-arrow",
-		className: arrow({ className }),
-		...props
-	});
-}
-function PopoverBackdrop({ className, ...props }) {
-	const { backdrop } = popover();
-	return /* @__PURE__ */ jsx(Popover$1.Backdrop, {
-		"data-slot": "popover-backdrop",
-		className: backdrop({ className }),
-		...props
-	});
-}
-//#endregion
-//#region src/components/preview-card/preview-card.tsx
-const previewCard = tv({ slots: {
-	trigger: [],
-	positioner: ["isolate z-50 outline-none"],
-	popup: [
-		"max-h-(--available-height) min-w-[220px] overflow-hidden",
-		"outline-none",
-		"origin-(--transform-origin) transform-gpu opacity-100 will-change-[transform,opacity]",
-		"transition-[opacity,transform] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)]",
-		"data-starting-style:scale-[0.97] data-starting-style:opacity-0",
-		"data-ending-style:scale-[0.99] data-ending-style:opacity-0 data-ending-style:duration-150",
-		"data-instant:transition-none motion-reduce:transition-none",
-		"w-[300px] rounded-container bg-layer-popover text-foreground",
-		"shadow-float ring-1 ring-line-seam"
-	],
-	header: ["flex items-start gap-3", "px-4 pt-4 pb-3 last:pb-4"],
-	separator: ["border-t", "border-line-hairline"],
-	title: ["m-0 truncate", "font-sans text-headline font-bold text-foreground"],
-	description: ["m-0 truncate", "px-4 py-3 last:pb-4 font-sans text-callout text-foreground-muted"],
-	arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"]
-} });
-function PreviewCard(props) {
-	return /* @__PURE__ */ jsx(PreviewCard$1.Root, {
-		"data-slot": "preview-card",
-		...props
-	});
-}
-function PreviewCardTrigger({ delay = 80, closeDelay = 40, className, ...props }) {
-	const { trigger } = previewCard();
-	return /* @__PURE__ */ jsx(PreviewCard$1.Trigger, {
-		"data-slot": "preview-card-trigger",
-		delay,
-		closeDelay,
-		className: trigger({ className }),
-		...props
-	});
-}
-function PreviewCardPortal(props) {
-	return /* @__PURE__ */ jsx(PreviewCard$1.Portal, {
-		"data-slot": "preview-card-portal",
-		...useThemeScopeProps(props)
-	});
-}
-function PreviewCardPopup({ className, ...props }) {
-	const themeState = useTheme();
-	const { popup } = previewCard();
-	const scopeProps = resolveThemeScopeProps({
-		...props,
-		className: popup({ className })
-	}, themeState);
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "preview-card-content",
-		...scopeProps
-	});
-}
-function PreviewCardContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset = 6, sticky, portalProps, className, ...props }) {
-	const { positioner, popup } = previewCard();
-	return /* @__PURE__ */ jsx(PreviewCardPortal, {
-		...portalProps,
-		children: /* @__PURE__ */ jsx(PreviewCard$1.Positioner, {
-			align,
-			alignOffset,
-			anchor,
-			arrowPadding,
-			collisionAvoidance,
-			collisionBoundary,
-			collisionPadding,
-			disableAnchorTracking,
-			positionMethod,
-			side,
-			sideOffset,
-			sticky,
-			className: positioner(),
-			children: /* @__PURE__ */ jsx(PreviewCard$1.Popup, {
-				"data-slot": "preview-card-content",
-				className: popup({ className }),
-				...props
-			})
-		})
-	});
-}
-function PreviewCardHeader({ className, ...props }) {
-	const { header } = previewCard();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "preview-card-header",
-		className: header({ className }),
-		...props
-	});
-}
-function PreviewCardSeparator({ className, ...props }) {
-	const { separator } = previewCard();
-	return /* @__PURE__ */ jsx("div", {
-		role: "separator",
-		"aria-orientation": "horizontal",
-		"data-slot": "preview-card-separator",
-		className: separator({ className }),
-		...props
-	});
-}
-function PreviewCardTitle({ className, ...props }) {
-	const { title } = previewCard();
-	return /* @__PURE__ */ jsx("p", {
-		"data-slot": "preview-card-title",
-		className: title({ className }),
-		...props
-	});
-}
-function PreviewCardDescription({ className, ...props }) {
-	const { description } = previewCard();
-	return /* @__PURE__ */ jsx("p", {
-		"data-slot": "preview-card-description",
-		className: description({ className }),
-		...props
-	});
-}
-function PreviewCardArrow({ className, ...props }) {
-	const { arrow } = previewCard();
-	return /* @__PURE__ */ jsx(PreviewCard$1.Arrow, {
-		"data-slot": "preview-card-arrow",
-		className: arrow({ className }),
-		...props
-	});
-}
-//#endregion
 //#region src/components/label/label.tsx
 const label = tv({
 	slots: {
@@ -4873,6 +4541,112 @@ function SwitchThumb({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/segmented-control/segmented-control.tsx
+const segmentedControl = tv({
+	slots: {
+		root: ["inline-flex shrink-0 items-center", "w-fit flex-nowrap gap-[3px] rounded-[11px] bg-fill-muted p-[3px]"],
+		item: [
+			"inline-flex min-w-0 shrink-0 items-center gap-1.5",
+			"outline-none disabled:pointer-events-none",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+			"h-8 justify-center rounded-control border-[1.5px] border-transparent bg-transparent px-3",
+			"font-sans text-callout font-semibold text-foreground-muted",
+			"[&_svg:not([class*='size-'])]:size-4",
+			"hover:bg-fill-medium active:bg-fill-medium",
+			"data-checked:border-sticker-ink data-checked:bg-brand data-checked:font-bold data-checked:text-sticker-ink data-checked:ring-[1.5px] data-checked:ring-sticker-edge",
+			"data-checked:hover:bg-brand data-checked:active:bg-brand data-checked:active:overlay-sticker-medium",
+			"focus-visible:shadow-focus",
+			"data-disabled:cursor-not-allowed data-disabled:text-foreground-disabled data-disabled:hover:bg-transparent"
+		],
+		label: ["truncate"],
+		count: ["font-mono", "text-mono-meta font-normal"]
+	},
+	variants: {
+		variant: {
+			default: {},
+			"on-frame": { root: [
+				"bg-fill-frame-medium",
+				"**:data-[slot=segmented-control-item]:text-foreground-on-frame-muted **:data-[slot=segmented-control-item]:hover:text-foreground-on-frame",
+				"**:data-[slot=segmented-control-item]:hover:bg-transparent **:data-[slot=segmented-control-item]:hover:overlay-frame-medium **:data-[slot=segmented-control-item]:active:bg-transparent **:data-[slot=segmented-control-item]:active:overlay-frame-medium",
+				"**:data-[slot=segmented-control-item]:data-checked:border-line-frame-active **:data-[slot=segmented-control-item]:data-checked:bg-layer-frame-active **:data-[slot=segmented-control-item]:data-checked:text-foreground-on-frame-active",
+				"**:data-[slot=segmented-control-item]:data-checked:hover:bg-layer-frame-active **:data-[slot=segmented-control-item]:data-checked:hover:bg-none **:data-[slot=segmented-control-item]:data-checked:active:bg-layer-frame-active"
+			] }
+		},
+		iconsOnlyBelow: {
+			xs: { root: ["@max-xs:**:data-[slot=segmented-control-item]:relative @max-xs:**:data-[slot=segmented-control-item]:w-8 @max-xs:**:data-[slot=segmented-control-item]:px-0", "@max-xs:**:data-[slot=segmented-control-label]:sr-only @max-xs:**:data-[slot=segmented-control-count]:sr-only"] },
+			sm: { root: ["@max-sm:**:data-[slot=segmented-control-item]:relative @max-sm:**:data-[slot=segmented-control-item]:w-8 @max-sm:**:data-[slot=segmented-control-item]:px-0", "@max-sm:**:data-[slot=segmented-control-label]:sr-only @max-sm:**:data-[slot=segmented-control-count]:sr-only"] },
+			md: { root: ["@max-md:**:data-[slot=segmented-control-item]:relative @max-md:**:data-[slot=segmented-control-item]:w-8 @max-md:**:data-[slot=segmented-control-item]:px-0", "@max-md:**:data-[slot=segmented-control-label]:sr-only @max-md:**:data-[slot=segmented-control-count]:sr-only"] },
+			lg: { root: ["@max-lg:**:data-[slot=segmented-control-item]:relative @max-lg:**:data-[slot=segmented-control-item]:w-8 @max-lg:**:data-[slot=segmented-control-item]:px-0", "@max-lg:**:data-[slot=segmented-control-label]:sr-only @max-lg:**:data-[slot=segmented-control-count]:sr-only"] },
+			xl: { root: ["@max-xl:**:data-[slot=segmented-control-item]:relative @max-xl:**:data-[slot=segmented-control-item]:w-8 @max-xl:**:data-[slot=segmented-control-item]:px-0", "@max-xl:**:data-[slot=segmented-control-label]:sr-only @max-xl:**:data-[slot=segmented-control-count]:sr-only"] },
+			"2xl": { root: ["@max-2xl:**:data-[slot=segmented-control-item]:relative @max-2xl:**:data-[slot=segmented-control-item]:w-8 @max-2xl:**:data-[slot=segmented-control-item]:px-0", "@max-2xl:**:data-[slot=segmented-control-label]:sr-only @max-2xl:**:data-[slot=segmented-control-count]:sr-only"] }
+		}
+	}
+});
+const SegmentedControlIconsOnlyContext = createContext(false);
+function SegmentedControl({ disabled = false, iconsOnlyBelow, variant = "default", className, ...props }) {
+	const { root } = segmentedControl({
+		iconsOnlyBelow,
+		variant
+	});
+	return /* @__PURE__ */ jsx(SegmentedControlIconsOnlyContext, {
+		value: iconsOnlyBelow !== void 0,
+		children: /* @__PURE__ */ jsx(RadioGroup$1, {
+			disabled,
+			"data-slot": "segmented-control",
+			className: root({ className }),
+			...props
+		})
+	});
+}
+function SegmentedControlItem({ className, ...props }) {
+	const { item } = segmentedControl();
+	const iconsOnly = use(SegmentedControlIconsOnlyContext);
+	const radio = /* @__PURE__ */ jsx(Radio.Root, {
+		render: /* @__PURE__ */ jsx("button", { type: "button" }),
+		nativeButton: true,
+		"data-slot": "segmented-control-item",
+		className: item({ className: `group/segmented-control-item ${className ?? ""}`.trim() }),
+		...props
+	});
+	return iconsOnly ? /* @__PURE__ */ jsx(SegmentedControlItemTooltip, { children: radio }) : radio;
+}
+function SegmentedControlItemTooltip({ children }) {
+	const [text, setText] = useState("");
+	const triggerRef = useRef(null);
+	const handleOpenChange = useCallback((open, details) => {
+		if (!open) return;
+		const label = triggerRef.current?.querySelector("[data-slot=segmented-control-label]");
+		if (!label || label.getBoundingClientRect().width > 1) {
+			details.cancel();
+			return;
+		}
+		setText(label.textContent ?? "");
+	}, []);
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			ref: triggerRef,
+			render: children
+		}), /* @__PURE__ */ jsx(TooltipContent, { children: text })]
+	});
+}
+function SegmentedControlLabel({ className, ...props }) {
+	const { label } = segmentedControl();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "segmented-control-label",
+		className: label({ className }),
+		...props
+	});
+}
+function SegmentedControlCount({ className, ...props }) {
+	const { count } = segmentedControl();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "segmented-control-count",
+		className: count({ className }),
+		...props
+	});
+}
+//#endregion
 //#region src/components/toggle-group/toggle-group.tsx
 const toggleGroup = tv({ slots: {
 	root: [
@@ -5024,8 +4798,10 @@ const descriptionList = tv({
 			"[&>[data-slot=description-item]>[data-slot=description-details]]:min-w-0",
 			"[&>[data-slot=description-item]+[data-slot=description-item]]:pt-0",
 			"[&>[data-slot=description-item]>[data-slot=description-term]]:shrink-0",
-			"[&>[data-slot=description-item]>[data-slot=description-details]>:is([data-slot=badge],[data-slot=task-chip],[data-slot=task-status-badge]):first-child]:-ml-1.5",
-			"[&>[data-slot=description-item]>[data-slot=description-details]>:is([data-slot=badge],[data-slot=task-chip],[data-slot=task-status-badge]):first-child]:max-w-[calc(100%+6px)]",
+			"[&>[data-slot=description-item]>[data-slot=description-details]>[data-slot=badge]:first-child]:-ml-1.5",
+			"[&>[data-slot=description-item]>[data-slot=description-details]>[data-slot=badge]:first-child]:max-w-[calc(100%+6px)]",
+			"[&>[data-slot=description-item]>[data-slot=description-details]>:is([data-slot=task-chip],[data-slot=task-status-badge]):first-child]:ml-[-7px]",
+			"[&>[data-slot=description-item]>[data-slot=description-details]>:is([data-slot=task-chip],[data-slot=task-status-badge]):first-child]:max-w-[calc(100%+7px)]",
 			"[&>[data-slot=description-item]>[data-slot=description-details]>[data-slot=button]:first-child]:ml-[-7.5px]",
 			"[&>[data-slot=description-item]>[data-slot=description-details]>[data-slot=button]:first-child]:px-1.5"
 		] }
@@ -7133,11 +6909,10 @@ const progress = tv({
 		root: [
 			"group/progress grid w-full min-w-0 gap-1.5",
 			"[--progress-color:var(--foreground)]",
-			"[--progress-light:var(--fill-muted)]",
 			"[--progress-indicator:var(--progress-color)]",
 			"[--progress-track:var(--fill-muted)]",
 			"font-sans",
-			"data-complete:[--progress-indicator:var(--color-success)]"
+			"data-complete:[--progress-indicator:var(--success)]"
 		],
 		header: ["flex min-w-0 items-center justify-between gap-3"],
 		label: ["min-w-0 truncate", "text-footnote font-semibold text-foreground"],
@@ -7157,12 +6932,12 @@ const progress = tv({
 	},
 	variants: {
 		variant: {
-			primary: { root: ["[--progress-color:var(--color-info)]", "[--progress-light:var(--color-info-muted)]"] },
-			information: { root: ["[--progress-color:var(--color-info)]", "[--progress-light:var(--color-info-muted)]"] },
-			accent: { root: ["[--progress-color:var(--color-info)]", "[--progress-light:var(--color-info-muted)]"] },
-			success: { root: ["[--progress-color:var(--color-success)]", "[--progress-light:var(--color-success-muted)]"] },
-			warning: { root: ["[--progress-color:var(--color-warning)]", "[--progress-light:var(--color-warning-muted)]"] },
-			danger: { root: ["[--progress-color:var(--color-danger)]", "[--progress-light:var(--color-danger-muted)]"] }
+			primary: { root: ["[--progress-color:var(--info)]"] },
+			information: { root: ["[--progress-color:var(--info)]"] },
+			accent: { root: ["[--progress-color:var(--info)]"] },
+			success: { root: ["[--progress-color:var(--success)]"] },
+			warning: { root: ["[--progress-color:var(--warning)]"] },
+			danger: { root: ["[--progress-color:var(--danger)]"] }
 		},
 		size: {
 			sm: {},
@@ -9641,16 +9416,16 @@ const banner = tv({
 		root: [
 			"group/banner @container grid gap-y-0",
 			"[&>svg]:col-start-1 [&>svg]:shrink-0",
-			"*:data-[slot=status]:col-start-1 *:data-[slot=status]:row-start-1",
+			"*:data-[slot=spinner]:col-start-1 *:data-[slot=spinner]:row-start-1",
 			"w-full grid-cols-[minmax(0,1fr)] items-start gap-x-2.5 rounded-container border-0",
 			"font-sans text-callout text-foreground ring-1 ring-line-hairline ring-inset",
 			"has-[>svg]:grid-cols-[20px_minmax(0,1fr)]",
-			"has-[>[data-slot=status]]:grid-cols-[20px_minmax(0,1fr)]",
+			"has-[>[data-slot=spinner]]:grid-cols-[20px_minmax(0,1fr)]",
 			"[&>svg]:row-start-1 [&>svg]:size-5 [&>svg]:text-foreground",
 			"[&>svg]:mt-[calc((1lh-20px)/2)]",
-			"*:data-[slot=status]:lead-dot *:data-[slot=status]:self-start *:data-[slot=status]:justify-self-center",
+			"*:data-[slot=spinner]:h-lh *:data-[slot=spinner]:leading-[inherit] *:data-[slot=spinner]:self-start *:data-[slot=spinner]:justify-self-center",
 			"has-[>svg]:[--banner-text-col:2]",
-			"has-[>[data-slot=status]]:[--banner-text-col:2]",
+			"has-[>[data-slot=spinner]]:[--banner-text-col:2]",
 			"has-[>[data-slot=banner-title]]:[--banner-desc-row:2]",
 			"has-[>[data-slot=banner-description]]:[--banner-last-row:var(--banner-desc-row,1)]",
 			"has-[>[data-banner-close]]:[--banner-action-end:span_2]"
@@ -9686,8 +9461,8 @@ const banner = tv({
 		},
 		size: {
 			sm: { root: [
-				"gap-x-2 px-3 py-2 text-footnote",
-				"has-[>svg]:grid-cols-[16px_minmax(0,1fr)] has-[>[data-slot=status]]:grid-cols-[16px_minmax(0,1fr)]",
+				"gap-x-2 px-3 py-2",
+				"has-[>svg]:grid-cols-[16px_minmax(0,1fr)] has-[>[data-slot=spinner]]:grid-cols-[16px_minmax(0,1fr)]",
 				"[&>svg]:mt-[calc((1lh-16px)/2)] [&>svg]:size-4"
 			] },
 			md: { root: ["px-3.5 py-3"] },
@@ -10306,7 +10081,7 @@ const toastStyles = tv({
 		icon: [
 			"flex h-lh w-5 shrink-0 items-center justify-center",
 			"[&_svg]:shrink-0",
-			"[&_svg]:size-4 *:data-[slot=status]:lead-dot"
+			"[&_svg]:size-4"
 		],
 		body: ["min-w-0"],
 		title: ["m-0 truncate text-callout", "font-normal text-foreground-on-hud"],
@@ -10740,11 +10515,11 @@ function DefaultToastItem({ placement, toast: toastObject }) {
 		})
 	});
 }
-const TOAST_PIXEL = {
-	info: "information",
-	success: "success",
-	warning: "warning",
-	error: "warning"
+const TOAST_ICON = {
+	info: Info,
+	success: CircleCheck,
+	warning: TriangleAlert,
+	error: TriangleAlert
 };
 function hasLeading(toastObject) {
 	const leading = toastObject.data?.leading;
@@ -10756,10 +10531,8 @@ function DefaultToastIcon({ toast: toastObject }) {
 		children: toastObject.data?.leading
 	});
 	const intent = toastObject.data?.intent ?? getToastTone(toastObject.type);
-	return /* @__PURE__ */ jsx(ToastIcon, { children: /* @__PURE__ */ jsx(Status, {
-		"aria-hidden": true,
-		variant: TOAST_PIXEL[intent]
-	}) });
+	const Icon = TOAST_ICON[intent];
+	return /* @__PURE__ */ jsx(ToastIcon, { children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true }) });
 }
 function ToastArrowSvg(props) {
 	return /* @__PURE__ */ jsx("svg", {
@@ -11206,56 +10979,6 @@ function Separator({ children, className, orientation = "horizontal", ...props }
 	});
 }
 //#endregion
-//#region src/components/panel/panel-action.recipe.ts
-const panelActionBase = tv({ base: [
-	"relative inline-flex w-auto shrink-0 items-center justify-center",
-	"overflow-visible font-sans leading-none tabular-nums select-none outline-none",
-	"transition-all duration-100",
-	"[&>svg]:pointer-events-none [&>svg]:shrink-0",
-	"h-control min-w-control rounded-control border-[1.5px] border-transparent bg-transparent py-0",
-	"px-2 md:pointer-fine:px-[5px]",
-	"after:absolute after:-inset-control-hit",
-	"text-foreground",
-	"hover:bg-fill-medium active:bg-fill-medium",
-	"focus-visible:shadow-focus",
-	"[&>svg]:size-control-icon",
-	controlIconInset
-] });
-const panelAction = tv({
-	extend: panelActionBase,
-	base: [
-		"whitespace-nowrap",
-		"disabled:pointer-events-none disabled:transform-none",
-		"gap-1.5 text-control font-bold",
-		"disabled:bg-transparent disabled:text-foreground-disabled disabled:opacity-100",
-		"aria-pressed:border-sticker-ink aria-pressed:bg-brand aria-pressed:text-sticker-ink aria-pressed:ring-[1.5px] aria-pressed:ring-sticker-edge",
-		"aria-pressed:active:overlay-sticker-medium"
-	]
-});
-const panelToggleAction = tv({
-	extend: panelActionBase,
-	base: [
-		"data-disabled:pointer-events-none data-disabled:transform-none",
-		"gap-1.5 text-control font-bold",
-		"data-disabled:bg-transparent data-disabled:text-foreground-disabled data-disabled:opacity-100",
-		"data-pressed:border-sticker-ink data-pressed:bg-brand data-pressed:text-sticker-ink data-pressed:ring-[1.5px] data-pressed:ring-sticker-edge",
-		"data-pressed:active:overlay-sticker-medium"
-	]
-});
-//#endregion
-//#region src/components/panel/panel-action.tsx
-function PanelAction({ className, render, nativeButton, ...props }) {
-	return /* @__PURE__ */ jsx(Button$1, {
-		...props,
-		render,
-		nativeButton: nativeButton ?? defaultNativeButton(render),
-		type: "button",
-		"data-slot": "panel-action",
-		"data-icon-inset": "",
-		className: panelAction({ className })
-	});
-}
-//#endregion
 //#region src/components/app-shell/app-shell.tsx
 const appShell = tv({
 	slots: {
@@ -11731,7 +11454,7 @@ const panelNotice = tv({
 			"flex shrink-0 items-start",
 			"min-h-10 gap-2.5 border-b border-line-seam px-5 py-2.5 max-md:px-4",
 			"font-sans text-callout font-semibold text-foreground",
-			"[&>svg]:lead-icon *:data-[slot=status]:lead-dot"
+			"[&>svg]:lead-icon"
 		],
 		content: ["min-w-0 flex-1"],
 		actions: ["flex shrink-0 items-center", "-my-1.5 gap-3"]
@@ -15579,7 +15302,7 @@ const taskChip = tv({
 		"no-underline select-text",
 		"transition-[filter,opacity] duration-100",
 		"focus-visible:keyboard:outline-2 focus-visible:keyboard:outline-offset-2 focus-visible:keyboard:outline-line-strong",
-		"rounded-chip border-0",
+		"border-0",
 		"font-sans font-semibold text-foreground",
 		"[&>svg:not([data-slot=task-status-icon])]:-mx-0.5 [&>svg[data-slot=task-status-icon]]:size-[9px]",
 		"[a,button]:cursor-pointer [a,button]:hover:overlay-medium [a,button]:active:overlay-medium",
@@ -15594,7 +15317,7 @@ const taskChip = tv({
 			closed: { root: ["bg-task-status-closed-soft"] }
 		},
 		variant: {
-			default: { root: ["h-[22px] gap-1.5 px-[7px] py-0", "text-[12px] leading-4"] },
+			default: { root: ["h-[22px] gap-1.5 rounded-chip px-[7px] py-0", "text-[12px] leading-4"] },
 			inline: {}
 		},
 		size: {
@@ -15602,39 +15325,21 @@ const taskChip = tv({
 			sm: {}
 		}
 	},
-	compoundVariants: [
-		{
-			variant: "inline",
-			status: [
-				"todo",
-				"in-progress",
-				"in-review",
-				"done",
-				"closed"
-			],
-			class: { root: [
-				"items-baseline gap-1.5 rounded-full border py-0 pr-2 pl-1 align-baseline",
-				"[font-size:inherit] leading-[1.2em] font-[450]",
-				"[&>svg]:size-[0.857em] [&>svg]:self-center"
-			] }
-		},
-		{
-			variant: "default",
-			size: "sm",
-			class: { root: ["h-5 gap-1 px-[5px]"] }
-		},
-		{
-			variant: "inline",
-			status: [
-				"todo",
-				"in-progress",
-				"in-review",
-				"done",
-				"closed"
-			],
-			class: { root: ["rounded-sticker border-0 px-[4.5px]", "font-semibold"] }
-		}
-	],
+	compoundVariants: [{
+		variant: "inline",
+		status: [
+			"todo",
+			"in-progress",
+			"in-review",
+			"done",
+			"closed"
+		],
+		class: { root: [...inlineChip, "[&>svg]:size-3.5 [&>svg]:self-center [&>svg:not([data-slot=task-status-icon])]:mx-0"] }
+	}, {
+		variant: "default",
+		size: "sm",
+		class: { root: ["h-5 gap-1 px-[5px]"] }
+	}],
 	defaultVariants: {
 		variant: "default",
 		size: "default"