@nationaldesignstudio/react 0.3.0 → 0.5.1

package/src/components/atoms/tooltip/tooltip.tsx

@@ -0,0 +1,347 @@
+"use client";
+
+import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip";
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import { cn } from "@/lib/utils";
+import {
+	FloatingArrowSvg,
+	floatingArrowVariants,
+} from "../../shared/floating-arrow";
+
+/**
+ * Tooltip popup variants
+ *
+ * Uses semantic tokens for themeable styling:
+ * - color.tooltip.bg - Dark background
+ * - color.tooltip.text - Light text
+ * - surface.tooltip.radius - Small border radius
+ * - spatial.component.tooltip.padding-x/y - Consistent padding
+ */
+const tooltipPopupVariants = tv({
+	base: [
+		// Layout - uses component tooltip tokens
+		"px-spatial-component-tooltip-padding-x py-spatial-component-tooltip-padding-y",
+		// Background and text - uses tooltip color tokens
+		"bg-tooltip-bg text-tooltip-text",
+		// Border radius - uses surface tooltip token
+		"rounded-surface-tooltip",
+		// Typography - uses semantic body text composite
+		"typography-body-sm-md font-medium",
+		// Shadow for elevation
+		"shadow-md",
+		// Allow arrow to extend outside popup bounds
+		"overflow-visible",
+		// Animation
+		"origin-[var(--transform-origin)]",
+		"transition-[transform,scale,opacity] duration-150",
+		"data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+		"data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+		// Ensure it's above other content
+		"z-50",
+	],
+	variants: {
+		variant: {
+			default: "",
+			// Future variants can be added here (e.g., light, primary)
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+/**
+ * Tooltip arrow variants - uses shared floating arrow variants
+ */
+const tooltipArrowVariants = floatingArrowVariants;
+
+// ============================================================================
+// Tooltip Provider
+// ============================================================================
+
+export interface TooltipProviderProps extends BaseTooltip.Provider.Props {
+	children: React.ReactNode;
+}
+
+/**
+ * Tooltip Provider
+ *
+ * Manages shared delays across multiple tooltips.
+ * Wrap your app or a section with this to enable tooltip delay grouping.
+ */
+const TooltipProvider = ({ children, ...props }: TooltipProviderProps) => {
+	return <BaseTooltip.Provider {...props}>{children}</BaseTooltip.Provider>;
+};
+
+// ============================================================================
+// Tooltip Root
+// ============================================================================
+
+export interface TooltipRootProps extends BaseTooltip.Root.Props {
+	children: React.ReactNode;
+}
+
+/**
+ * Tooltip Root
+ *
+ * Groups all tooltip parts. Does not render an element.
+ */
+const TooltipRoot = ({ children, ...props }: TooltipRootProps) => {
+	return <BaseTooltip.Root {...props}>{children}</BaseTooltip.Root>;
+};
+
+// ============================================================================
+// Tooltip Trigger
+// ============================================================================
+
+export interface TooltipTriggerProps
+	extends React.ComponentProps<typeof BaseTooltip.Trigger> {
+	className?: string;
+}
+
+/**
+ * Tooltip Trigger
+ *
+ * The element that triggers the tooltip on hover/focus.
+ * Renders as the child element with tooltip behavior attached.
+ * When children is a single React element, uses `render` prop to avoid wrapper element.
+ */
+const TooltipTrigger = React.forwardRef<HTMLButtonElement, TooltipTriggerProps>(
+	({ className, children, ...props }, ref) => {
+		// If children is a single React element, use render prop to avoid wrapper
+		const isSingleElement = React.isValidElement(children);
+
+		if (isSingleElement) {
+			return (
+				<BaseTooltip.Trigger
+					ref={ref}
+					className={className}
+					render={children}
+					{...props}
+				/>
+			);
+		}
+
+		return (
+			<BaseTooltip.Trigger ref={ref} className={className} {...props}>
+				{children}
+			</BaseTooltip.Trigger>
+		);
+	},
+);
+TooltipTrigger.displayName = "TooltipTrigger";
+
+// ============================================================================
+// Tooltip Portal
+// ============================================================================
+
+export interface TooltipPortalProps extends BaseTooltip.Portal.Props {
+	children: React.ReactNode;
+}
+
+/**
+ * Tooltip Portal
+ *
+ * Renders the tooltip popup in a portal outside the DOM hierarchy.
+ */
+const TooltipPortal = ({ children, ...props }: TooltipPortalProps) => {
+	return <BaseTooltip.Portal {...props}>{children}</BaseTooltip.Portal>;
+};
+
+// ============================================================================
+// Tooltip Positioner
+// ============================================================================
+
+export interface TooltipPositionerProps
+	extends Omit<
+		React.ComponentProps<typeof BaseTooltip.Positioner>,
+		"className"
+	> {
+	className?: string;
+}
+
+/**
+ * Tooltip Positioner
+ *
+ * Positions the tooltip popup relative to the trigger.
+ */
+const TooltipPositioner = React.forwardRef<
+	HTMLDivElement,
+	TooltipPositionerProps
+>(({ className, side = "top", sideOffset = 8, ...props }, ref) => {
+	return (
+		<BaseTooltip.Positioner
+			ref={ref}
+			side={side}
+			sideOffset={sideOffset}
+			className={className}
+			{...props}
+		/>
+	);
+});
+TooltipPositioner.displayName = "TooltipPositioner";
+
+// ============================================================================
+// Tooltip Popup
+// ============================================================================
+
+export interface TooltipPopupProps
+	extends Omit<React.ComponentProps<typeof BaseTooltip.Popup>, "className">,
+		VariantProps<typeof tooltipPopupVariants> {
+	className?: string;
+}
+
+/**
+ * Tooltip Popup
+ *
+ * The tooltip content container with styled appearance.
+ */
+const TooltipPopup = React.forwardRef<HTMLDivElement, TooltipPopupProps>(
+	({ className, variant, ...props }, ref) => {
+		return (
+			<BaseTooltip.Popup
+				ref={ref}
+				role="tooltip"
+				className={cn(tooltipPopupVariants({ variant }), className)}
+				{...props}
+			/>
+		);
+	},
+);
+TooltipPopup.displayName = "TooltipPopup";
+
+// ============================================================================
+// Tooltip Arrow
+// ============================================================================
+
+export interface TooltipArrowProps
+	extends Omit<React.ComponentProps<typeof BaseTooltip.Arrow>, "className"> {
+	className?: string;
+}
+
+/**
+ * Tooltip Arrow
+ *
+ * Visual pointer element for the tooltip.
+ * Uses shared FloatingArrowSvg with tooltip-bg color token.
+ */
+const TooltipArrow = React.forwardRef<HTMLDivElement, TooltipArrowProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<BaseTooltip.Arrow
+				ref={ref}
+				className={cn(tooltipArrowVariants(), className)}
+				{...props}
+			>
+				<FloatingArrowSvg fillClassName="fill-tooltip-bg" />
+			</BaseTooltip.Arrow>
+		);
+	},
+);
+TooltipArrow.displayName = "TooltipArrow";
+
+// ============================================================================
+// Simple Tooltip Component
+// ============================================================================
+
+export interface TooltipProps {
+	/** The content to show in the tooltip */
+	content: React.ReactNode;
+	/** The element that triggers the tooltip */
+	children: React.ReactNode;
+	/** Side of the trigger to show the tooltip */
+	side?: "top" | "bottom" | "left" | "right";
+	/** Offset from the trigger */
+	sideOffset?: number;
+	/** Alignment along the side */
+	align?: "start" | "center" | "end";
+	/** Delay before showing the tooltip (ms) */
+	delay?: number;
+	/** Delay before hiding the tooltip (ms) */
+	closeDelay?: number;
+	/** Whether to show an arrow */
+	showArrow?: boolean;
+	/** Controlled open state */
+	open?: boolean;
+	/** Default open state */
+	defaultOpen?: boolean;
+	/** Callback when open state changes */
+	onOpenChange?: (open: boolean) => void;
+	/** Additional className for the popup */
+	className?: string;
+}
+
+/**
+ * Tooltip
+ *
+ * A simple, pre-composed tooltip component for common use cases.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Save your changes">
+ *   <Button>Save</Button>
+ * </Tooltip>
+ * ```
+ */
+const Tooltip = ({
+	content,
+	children,
+	side = "top",
+	sideOffset = 8,
+	align = "center",
+	delay,
+	closeDelay,
+	showArrow = true,
+	open,
+	defaultOpen,
+	onOpenChange,
+	className,
+}: TooltipProps) => {
+	return (
+		<TooltipRoot
+			open={open}
+			defaultOpen={defaultOpen}
+			onOpenChange={onOpenChange}
+		>
+			<TooltipTrigger delay={delay} closeDelay={closeDelay}>
+				{children}
+			</TooltipTrigger>
+			<TooltipPortal>
+				<TooltipPositioner side={side} sideOffset={sideOffset} align={align}>
+					<TooltipPopup className={className}>
+						{showArrow && <TooltipArrow />}
+						{content}
+					</TooltipPopup>
+				</TooltipPositioner>
+			</TooltipPortal>
+		</TooltipRoot>
+	);
+};
+
+// ============================================================================
+// Compound Component Export
+// ============================================================================
+
+export const TooltipParts = Object.assign(TooltipRoot, {
+	Provider: TooltipProvider,
+	Root: TooltipRoot,
+	Trigger: TooltipTrigger,
+	Portal: TooltipPortal,
+	Positioner: TooltipPositioner,
+	Popup: TooltipPopup,
+	Arrow: TooltipArrow,
+});
+
+export {
+	Tooltip,
+	TooltipProvider,
+	TooltipRoot,
+	TooltipTrigger,
+	TooltipPortal,
+	TooltipPositioner,
+	TooltipPopup,
+	TooltipArrow,
+	tooltipPopupVariants,
+	tooltipArrowVariants,
+};

package/src/components/dev-tools/dev-toolbar/dev-toolbar.stories.tsx

@@ -18,30 +18,25 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const DemoContent = () => (
-	<div className="min-h-screen bg-gray-100 py-spacing-64">
+	<div className="min-h-screen bg-gray-100 py-64">
 		<div className="w-full max-w-[90rem] mx-auto px-[var(--spatial-grid-small-margin)] md:px-[var(--spatial-grid-medium-margin)] lg:px-[var(--spatial-grid-large-margin)]">
-			<h1 className="typography-h2 mb-spacing-16">Dev Toolbar Demo</h1>
-			<p className="typography-body-medium text-gray-600 mb-spacing-8">
+			<h1 className="typography-h2 mb-16">Dev Toolbar Demo</h1>
+			<p className="typography-body-medium text-gray-600 mb-8">
 				Click the bar at the bottom to expand, then toggle the Grid overlay.
 			</p>
-			<p className="typography-body-medium text-gray-600 mb-spacing-32">
+			<p className="typography-body-medium text-gray-600 mb-32">
 				Keyboard shortcut:{" "}
-				<kbd className="px-spacing-8 py-spacing-4 bg-gray-200 rounded-radius-8">
-					⌘G
-				</kbd>{" "}
-				or{" "}
-				<kbd className="px-spacing-8 py-spacing-4 bg-gray-200 rounded-radius-8">
-					Ctrl+G
-				</kbd>
+				<kbd className="px-8 py-4 bg-gray-200 rounded-radius-8">⌘G</kbd> or{" "}
+				<kbd className="px-8 py-4 bg-gray-200 rounded-radius-8">Ctrl+G</kbd>
 			</p>
 
 			<div className="grid grid-cols-4 md:grid-cols-12 lg:grid-cols-24 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]">
 				{["alpha", "beta", "gamma", "delta", "epsilon", "zeta"].map((id) => (
 					<div
 						key={id}
-						className="col-span-4 md:col-span-4 lg:col-span-8 bg-white p-spacing-16 rounded-radius-12 shadow"
+						className="col-span-4 md:col-span-4 lg:col-span-8 bg-white p-16 rounded-radius-12 shadow"
 					>
-						<h3 className="typography-h4 mb-spacing-8">Card {id}</h3>
+						<h3 className="typography-h4 mb-8">Card {id}</h3>
 						<p className="typography-body-small text-gray-500">
 							Sample content to visualize how the grid overlay aligns with your
 							layout.

package/src/components/dev-tools/dev-toolbar/dev-toolbar.tsx

@@ -152,7 +152,7 @@ export function DevToolbar({ defaultExpanded = false }: DevToolbarProps) {
 				data-testid="dev-toolbar"
 			>
 				<div
-					className={`bg-gray-1100 rounded-radius-16 shadow-lg flex flex-col items-center overflow-hidden px-spacing-12 py-spacing-8 ${isExpanded ? "gap-spacing-4" : ""}`}
+					className={`bg-gray-1100 rounded-radius-16 shadow-lg flex flex-col items-center overflow-hidden px-12 py-8 ${isExpanded ? "gap-4" : ""}`}
 				>
 					<div
 						className={`
@@ -165,7 +165,7 @@ export function DevToolbar({ defaultExpanded = false }: DevToolbarProps) {
 								type="button"
 								onClick={toggleGrid}
 								className={`
-									size-spacing-40 rounded-full flex items-center justify-center transition-colors
+									size-40 rounded-full flex items-center justify-center transition-colors
 									${
 										showGrid
 											? "text-gray-50"
@@ -186,7 +186,7 @@ export function DevToolbar({ defaultExpanded = false }: DevToolbarProps) {
 						onTouchStart={handleBarTouchStart}
 						onClick={handleBarClick}
 						className={`
-							w-spacing-32 h-spacing-4 bg-gray-50 rounded-full transition-opacity
+							w-32 h-4 bg-gray-50 rounded-full transition-opacity
 							${isDragging ? "opacity-100 cursor-grabbing" : "opacity-60 hover:opacity-100 cursor-grab"}
 						`}
 						aria-label={isExpanded ? "Close dev tools" : "Open dev tools"}

package/src/components/organisms/card/card.stories.tsx

@@ -34,7 +34,7 @@ export const Default: Story = {
 				<CardContent>
 					<CardBody>
 						<CardEyebrow>Optional Eyebrow</CardEyebrow>
-						<div className="flex flex-col gap-[6px]">
+						<div className="flex flex-col gap-6">
 							<CardTitle>Card Title</CardTitle>
 							<CardDescription>
 								Use cards when citizens need to scan items at a glance, either
@@ -43,10 +43,10 @@ export const Default: Story = {
 						</div>
 					</CardBody>
 					<CardActions>
-						<Button size="default" variant="solid">
+						<Button size="md" variant="primary">
 							Primary
 						</Button>
-						<Button size="default" variant="outline">
+						<Button size="md" variant="primary-outline">
 							Secondary
 						</Button>
 					</CardActions>
@@ -68,7 +68,7 @@ export const Vertical: Story = {
 				<CardContent>
 					<CardBody>
 						<CardEyebrow>Optional Eyebrow</CardEyebrow>
-						<div className="flex flex-col gap-[6px]">
+						<div className="flex flex-col gap-6">
 							<CardTitle>Card Title</CardTitle>
 							<CardDescription>
 								Use cards when citizens need to scan items at a glance, either
@@ -77,10 +77,10 @@ export const Vertical: Story = {
 						</div>
 					</CardBody>
 					<CardActions>
-						<Button size="default" variant="solid">
+						<Button size="md" variant="primary">
 							Primary
 						</Button>
-						<Button size="default" variant="outline">
+						<Button size="md" variant="primary-outline">
 							Secondary
 						</Button>
 					</CardActions>
@@ -98,7 +98,7 @@ export const Horizontal: Story = {
 				<CardContent>
 					<CardBody>
 						<CardEyebrow>Eyebrow</CardEyebrow>
-						<div className="flex flex-col gap-[9px]">
+						<div className="flex flex-col gap-8">
 							<CardTitle>
 								Cards can support multi line headings easily.
 							</CardTitle>
@@ -109,10 +109,10 @@ export const Horizontal: Story = {
 						</div>
 					</CardBody>
 					<CardActions>
-						<Button size="sm" variant="solid">
+						<Button size="sm" variant="primary">
 							Primary
 						</Button>
-						<Button size="sm" variant="outline">
+						<Button size="sm" variant="primary-outline">
 							Secondary
 						</Button>
 					</CardActions>
@@ -133,7 +133,7 @@ export const WithoutImage: Story = {
 				<CardContent>
 					<CardBody>
 						<CardEyebrow>Category</CardEyebrow>
-						<div className="flex flex-col gap-[6px]">
+						<div className="flex flex-col gap-6">
 							<CardTitle>Card Without Image</CardTitle>
 							<CardDescription>
 								Cards can be used without images for text-focused content.
@@ -141,7 +141,7 @@ export const WithoutImage: Story = {
 						</div>
 					</CardBody>
 					<CardActions>
-						<Button size="default" variant="solid">
+						<Button size="md" variant="primary">
 							Learn More
 						</Button>
 					</CardActions>
@@ -158,7 +158,7 @@ export const WithoutEyebrow: Story = {
 				<CardImage />
 				<CardContent>
 					<CardBody>
-						<div className="flex flex-col gap-[6px]">
+						<div className="flex flex-col gap-6">
 							<CardTitle>Card Title</CardTitle>
 							<CardDescription>
 								The eyebrow is optional and can be omitted when not needed.
@@ -166,7 +166,7 @@ export const WithoutEyebrow: Story = {
 						</div>
 					</CardBody>
 					<CardActions>
-						<Button size="default" variant="solid">
+						<Button size="md" variant="primary">
 							Primary
 						</Button>
 					</CardActions>
@@ -184,7 +184,7 @@ export const WithoutActions: Story = {
 				<CardContent>
 					<CardBody>
 						<CardEyebrow>Information</CardEyebrow>
-						<div className="flex flex-col gap-[6px]">
+						<div className="flex flex-col gap-6">
 							<CardTitle>Informational Card</CardTitle>
 							<CardDescription>
 								Cards without actions can be used for purely informational
@@ -228,7 +228,7 @@ export const CardGrid: Story = {
 					<CardContent>
 						<CardBody>
 							<CardEyebrow>Category {i}</CardEyebrow>
-							<div className="flex flex-col gap-[6px]">
+							<div className="flex flex-col gap-6">
 								<CardTitle>Card Title {i}</CardTitle>
 								<CardDescription>
 									Brief description of the card content goes here.
@@ -236,7 +236,7 @@ export const CardGrid: Story = {
 							</div>
 						</CardBody>
 						<CardActions>
-							<Button size="sm" variant="solid">
+							<Button size="sm" variant="primary">
 								Action
 							</Button>
 						</CardActions>
@@ -262,7 +262,7 @@ export const Playground: Story = {
 				<CardContent>
 					<CardBody>
 						<CardEyebrow>Eyebrow</CardEyebrow>
-						<div className="flex flex-col gap-[6px]">
+						<div className="flex flex-col gap-6">
 							<CardTitle>Card Title</CardTitle>
 							<CardDescription>
 								Use cards when citizens need to scan items at a glance.
@@ -270,10 +270,10 @@ export const Playground: Story = {
 						</div>
 					</CardBody>
 					<CardActions>
-						<Button size="default" variant="solid">
+						<Button size="md" variant="primary">
 							Primary
 						</Button>
-						<Button size="default" variant="outline">
+						<Button size="md" variant="primary-outline">
 							Secondary
 						</Button>
 					</CardActions>

package/src/components/organisms/card/card.tsx

@@ -240,7 +240,7 @@ const CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>(
 CardBody.displayName = "CardBody";
 
 const cardActionsVariants = tv({
-	base: "flex gap-spacing-12",
+	base: "flex gap-12",
 });
 
 export interface CardActionsProps

package/src/components/organisms/card/card.visual.test.tsx

@@ -24,7 +24,7 @@ describe("Card Visual Regression", () => {
 					<CardContent>
 						<CardBody>
 							<CardEyebrow>Optional Eyebrow</CardEyebrow>
-							<div className="flex flex-col gap-[6px]">
+							<div className="flex flex-col gap-6">
 								<CardTitle>Card Title</CardTitle>
 								<CardDescription>
 									Use cards when citizens need to scan items at a glance.
@@ -32,10 +32,10 @@ describe("Card Visual Regression", () => {
 							</div>
 						</CardBody>
 						<CardActions>
-							<Button size="default" variant="solid">
+							<Button size="md" variant="primary">
 								Primary
 							</Button>
-							<Button size="default" variant="outline">
+							<Button size="md" variant="primary-outline">
 								Secondary
 							</Button>
 						</CardActions>
@@ -59,7 +59,7 @@ describe("Card Visual Regression", () => {
 					<CardContent>
 						<CardBody>
 							<CardEyebrow>Eyebrow</CardEyebrow>
-							<div className="flex flex-col gap-[9px]">
+							<div className="flex flex-col gap-8">
 								<CardTitle>
 									Cards can support multi line headings easily.
 								</CardTitle>
@@ -69,10 +69,10 @@ describe("Card Visual Regression", () => {
 							</div>
 						</CardBody>
 						<CardActions>
-							<Button size="sm" variant="solid">
+							<Button size="sm" variant="primary">
 								Primary
 							</Button>
-							<Button size="sm" variant="outline">
+							<Button size="sm" variant="primary-outline">
 								Secondary
 							</Button>
 						</CardActions>
@@ -93,7 +93,7 @@ describe("Card Visual Regression", () => {
 					<CardContent>
 						<CardBody>
 							<CardEyebrow>Category</CardEyebrow>
-							<div className="flex flex-col gap-[6px]">
+							<div className="flex flex-col gap-6">
 								<CardTitle>Card Without Image</CardTitle>
 								<CardDescription>
 									Cards can be used without images for text-focused content.
@@ -101,7 +101,7 @@ describe("Card Visual Regression", () => {
 							</div>
 						</CardBody>
 						<CardActions>
-							<Button size="default" variant="solid">
+							<Button size="md" variant="primary">
 								Learn More
 							</Button>
 						</CardActions>
@@ -124,7 +124,7 @@ describe("Card Visual Regression", () => {
 					<CardImage />
 					<CardContent>
 						<CardBody>
-							<div className="flex flex-col gap-[6px]">
+							<div className="flex flex-col gap-6">
 								<CardTitle>Card Title</CardTitle>
 								<CardDescription>
 									The eyebrow is optional and can be omitted when not needed.
@@ -132,7 +132,7 @@ describe("Card Visual Regression", () => {
 							</div>
 						</CardBody>
 						<CardActions>
-							<Button size="default" variant="solid">
+							<Button size="md" variant="primary">
 								Primary
 							</Button>
 						</CardActions>
@@ -156,7 +156,7 @@ describe("Card Visual Regression", () => {
 					<CardContent>
 						<CardBody>
 							<CardEyebrow>Information</CardEyebrow>
-							<div className="flex flex-col gap-[6px]">
+							<div className="flex flex-col gap-6">
 								<CardTitle>Informational Card</CardTitle>
 								<CardDescription>
 									Cards without actions can be used for purely informational

package/src/components/organisms/navbar/navbar.visual.test.tsx

@@ -26,7 +26,7 @@ describe("Navbar Visual Regression", () => {
 					<NavbarLink href="#">Contact</NavbarLink>
 				</NavbarLinks>
 				<NavbarActions>
-					<Button size="sm" variant="solid">
+					<Button size="sm" variant="primary">
 						Sign In
 					</Button>
 				</NavbarActions>
@@ -55,7 +55,7 @@ describe("Navbar Visual Regression", () => {
 					<NavbarLink href="#">Contact</NavbarLink>
 				</NavbarLinks>
 				<NavbarActions>
-					<Button size="sm" variant="solid">
+					<Button size="sm" variant="primary">
 						Sign In
 					</Button>
 				</NavbarActions>

package/src/components/organisms/us-gov-banner/us-gov-banner.tsx

@@ -3,8 +3,8 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 const usGovBannerVariants = tv({
 	slots: {
-		root: "flex w-full items-center justify-center py-spacing-12",
-		content: "flex items-center gap-spacing-8",
+		root: "flex w-full items-center justify-center py-12",
+		content: "flex items-center gap-8",
 		text: "text-[11px] leading-[13px] tracking-[0.17px]",
 	},
 	variants: {