@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.31

package/dist/components/core/Badge/Badge.theme.js

@@ -3,7 +3,11 @@
  * Uses variant-first color organization for reliable dark mode and className overrides
  */
 const badgeTheme = {
-    // Base styles applied to all badges
+    // Base styles applied to all badges.
+    // No `leading-*` here: `sizes` applies `text-xs` AFTER this string, and tailwind-merge
+    // treats font-size as owning line-height, so any leading class here is silently dropped.
+    // The badge therefore uses the `text-xs` ramp line-height (16px) → 22px tall.
+    // To change it, put the leading class in `sizes`, after `text-xs`.
     baseStyle: "inline-flex items-center align-middle select-none whitespace-nowrap transition-all duration-300 h-fit w-fit tracking-tight font-medium border",
     // Visual style variants (structure only, no colors)
     // All variants keep the 1px `border` from baseStyle so every variant is the
@@ -22,8 +26,8 @@ const badgeTheme = {
     variantColors: {
         // Filled variant - solid backgrounds, no visible border
         filled: {
-            neutral: "bg-[var(--color-neutral-900)] text-white " +
-                "dark:bg-[var(--color-neutral-700)]",
+            mono: "bg-[var(--color-mono-900)] text-white " +
+                "dark:bg-[var(--color-mono-700)]",
             // Background drives from the themed base var (mode-aware) so the
             // auto-derived -contrast text always matches. Do NOT pin a fixed step
             // (e.g. dark:bg-primary-600) — that decouples the fill from -contrast and
@@ -39,7 +43,7 @@ const badgeTheme = {
         },
         // Outline variant - transparent bg with colored border
         outline: {
-            neutral: "text-[var(--color-text-primary)] border-[var(--color-border-secondary)] " + "",
+            mono: "text-[var(--color-text-primary)] border-[var(--color-border-secondary)] " + "",
             primary: "text-[var(--color-primary)] border-[var(--color-primary-600)] " +
                 "dark:text-[var(--color-primary-400)] dark:border-[var(--color-primary-400)]",
             success: "text-[var(--color-success)] border-[var(--color-success-600)] " +
@@ -52,8 +56,8 @@ const badgeTheme = {
         // Soft variant - subtle background tints, NO visible border (the transparent
         // 1px border from `variants.soft` only reserves height; the fill shows through it).
         soft: {
-            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] " +
-                "dark:bg-[var(--color-neutral-900)]",
+            mono: "bg-[var(--color-mono-100)] text-[var(--color-text-primary)] " +
+                "dark:bg-[var(--color-mono-900)]",
             primary: "bg-[var(--color-primary-50)] text-[var(--color-primary-700)] " +
                 "dark:bg-[var(--color-primary-400)]/20 dark:text-[var(--color-primary-300)]",
             success: "bg-[var(--color-success-100)]/70 text-[var(--color-success-700)] " +
@@ -64,16 +68,18 @@ const badgeTheme = {
                 "dark:bg-[var(--color-danger-400)]/20 dark:text-[var(--color-danger-400)]",
         },
     },
-    // Flat size structure (no nested objects)
+    // Flat size structure (no nested objects).
+    // Paddings are tokenised (--badge-px-*/--badge-py-*) so a theme can grow the
+    // chip tier — defaults are px-1/px-1.5 + py-0/py-0.5. See theme.css.
     sizes: {
-        sm: "text-xs px-1 py-0.25 gap-1",
-        md: "text-xs px-1.5 py-0.25 gap-1",
+        sm: "text-xs px-[var(--badge-px-sm)] py-[var(--badge-py-sm)] gap-1",
+        md: "text-xs px-[var(--badge-px-md)] py-[var(--badge-py-md)] gap-1",
     },
     // Additional padding for pill shape — must clear the rounded-full cap radius
     // (≈ height/2), otherwise content sits inside the curve and hugs the edge.
     pillSizes: {
-        sm: "px-2",
-        md: "px-2.5",
+        sm: "px-[var(--badge-pill-px-sm)]",
+        md: "px-[var(--badge-pill-px-md)]",
     },
     // Icon sizes — applies to wrapper span; [&>svg] selector ensures SVG scales to fit
     iconSizes: {
@@ -93,7 +99,7 @@ const badgeTheme = {
     },
     // Dot inherits text color via currentColor — works across all variants/colors
     dotColors: {
-        neutral: "bg-current",
+        mono: "bg-current",
         primary: "bg-current",
         success: "bg-current",
         warning: "bg-current",

package/dist/components/core/Breadcrumbs/Breadcrumbs.theme.d.ts

@@ -13,7 +13,4 @@ export declare const breadcrumbsVariants: Record<BreadcrumbsVariant, Partial<Bre
 /**
  * Default chevron separator element
  */
-export declare const defaultSeparator: React.FunctionComponentElement<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
-    title?: string;
-    titleId?: string;
-} & React.RefAttributes<SVGSVGElement>>;
+export declare const defaultSeparator: React.FunctionComponentElement<import("@phosphor-icons/react").IconProps>;

package/dist/components/core/Breadcrumbs/Breadcrumbs.theme.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { ChevronRightIcon } from '@heroicons/react/20/solid';
+import { CaretRight } from '@phosphor-icons/react';
 
 /**
  * Default theme configuration for Breadcrumbs component
@@ -27,6 +27,6 @@ const breadcrumbsVariants = {
 /**
  * Default chevron separator element
  */
-const defaultSeparator = React__default.createElement(ChevronRightIcon, { className: "size-4" });
+const defaultSeparator = React__default.createElement(CaretRight, { className: "size-4" });
 
 export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator };

package/dist/components/core/Button/Button.js

@@ -6,21 +6,12 @@ import { buttonTheme } from './Button.theme.js';
 import { cn } from '../../../utils/cn.js';
 import { Spinner } from '../Spinner/Spinner.js';
 import { useRipple, getRippleAnimation, getRippleColorClass } from './Button.ripple.js';
+import { createPressVariants } from '../shared/interaction.animations.js';
 
-// Button animation variants (module-level constant)
-const BUTTON_TAP_ANIMATION = {
-    tap: {
-        scale: 0.95,
-        transition: {
-            duration: 0.1,
-            type: "spring",
-            stiffness: 400,
-            damping: 10,
-        },
-    },
-};
-const Button = React__default.forwardRef(({ children, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, darkMode = false, disabled: disabledProp, "aria-label": ariaLabelProp, onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...restProps }, ref) => {
-    var _a, _b, _c, _d, _e, _f;
+// Shared press physics (module-level constant)
+const BUTTON_PRESS_VARIANTS = createPressVariants(0.97);
+const Button = React__default.forwardRef(({ children, iconStart, iconEnd, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, darkMode = false, disabled: disabledProp, "aria-label": ariaLabelProp, onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...restProps }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const shouldReduceMotion = useReducedMotion();
     const shouldDisableAnimations = !!shouldReduceMotion;
     // Initialize ripple hook
@@ -78,8 +69,9 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     const animationProps = shouldDisableAnimations
         ? {}
         : {
-            whileTap: !isDisabled ? "tap" : undefined,
-            variants: BUTTON_TAP_ANIMATION,
+            animate: "rest",
+            whileTap: !isDisabled ? "press" : undefined,
+            variants: BUTTON_PRESS_VARIANTS,
         };
     // Spinner inherits the button's text color (the `-contrast` token on filled
     // variants, the semantic color on outline/soft/ghost) so it always contrasts
@@ -113,7 +105,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     }, [buttonRef]);
     return (jsxs(motion.button, { type: "button", ...restProps, ...animationProps, ref: mergedRef, className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": consumerDataState !== null && consumerDataState !== void 0 ? consumerDataState : state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-busy": isLoading || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
                 resolvedVariant !== "ghost" &&
-                resolvedVariant !== "outline" && (jsx("div", { className: "pointer-events-none absolute inset-px border-t-[0.5px] border-white/50 rounded-[inherit] blur-[0.75px]" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
+                resolvedVariant !== "outline" && (jsx("div", { className: "pointer-events-none absolute inset-px border-t-[0.5px] border-white/50 rounded-[inherit] blur-[0.75px]" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsxs("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: [iconStart && (jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center", (_g = buttonTheme.iconSizes) === null || _g === void 0 ? void 0 : _g[size]), "aria-hidden": "true", children: iconStart })), children, iconEnd && (jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center", (_h = buttonTheme.iconSizes) === null || _h === void 0 ? void 0 : _h[size]), "aria-hidden": "true", children: iconEnd }))] }), enableRipple &&
                 ripples.map((ripple) => {
                     const animation = getRippleAnimation(effect, ripple, rippleScale);
                     return (jsx(motion.span, { initial: animation.initial, animate: animation.animate, transition: animation.transition, className: cn("absolute rounded-full size-5 pointer-events-none ", animation.className, rippleClassName ||

package/dist/components/core/Button/Button.ripple.js

@@ -127,8 +127,8 @@ function getRippleColorClass(variant, color) {
             return "bg-[var(--color-primary)]/20";
         case "danger":
             return "bg-[var(--color-danger)]/20";
-        case "neutral":
-            return "bg-[var(--color-neutral-500)]/20";
+        case "mono":
+            return "bg-[var(--color-mono-500)]/20";
         default:
             return "bg-[var(--color-primary)]/20";
     }

package/dist/components/core/Button/Button.theme.d.ts

@@ -16,6 +16,8 @@ export interface ButtonTheme {
         default: string;
         iconOnly: string;
     }>;
+    /** Wrapper sizing for the `iconStart`/`iconEnd` slots, per button size. */
+    iconSizes: Record<ButtonSize, string>;
     states: Partial<Record<ButtonState, string>>;
     blockStyle: string;
 }

package/dist/components/core/Button/Button.theme.js

@@ -3,32 +3,37 @@
  */
 const buttonTheme = {
     // Base styles for the button element
-    baseStyle: "relative inline-flex items-center justify-center gap-2 focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer backdrop-blur-sm",
+    baseStyle: "relative inline-flex items-center justify-center gap-2 focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-[color,background-color,border-color,box-shadow,filter,opacity] duration-150 ease-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer backdrop-blur-sm",
     // Visual style variants - STRUCTURE only (no colors)
     variantStyles: {
-        filled: "border border-black/25 hover:brightness-[0.9] dark:hover:brightness-[1.15]",
+        filled: "border border-black/15 hover:brightness-[0.9] dark:hover:brightness-[1.15]",
         outline: "bg-transparent border",
         soft: "border-transparent",
         ghost: "bg-transparent border-transparent",
     },
     // Color styles organized BY VARIANT for reliable dark: prefixes
     variantColors: {
-        // Filled variant - solid backgrounds
+        // Filled variant - solid backgrounds.
+        // Border split: LIGHT edge is the universal `border-black/25` from
+        // variantStyles.filled (later in the stylesheet, it beats any light
+        // border-* set here — don't add one). DARK keeps color-matched
+        // `dark:border-*` per color (dark variants compile after black/25 and
+        // win; a black edge would be invisible on dark fills).
         filled: {
-            neutral: "bg-[var(--color-neutral-900)] text-white border-[var(--color-border)] " +
-                "focus-visible:outline-[var(--color-neutral-800)] " +
-                "dark:bg-[var(--color-neutral-200)] dark:text-[var(--color-neutral-900)] dark:border-[var(--color-neutral-200)]",
-            primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] " +
+            mono: "bg-[var(--color-mono)] text-[var(--color-mono-contrast)] " +
+                "focus-visible:outline-[var(--color-mono-800)] " +
+                "dark:border-[var(--color-mono)]",
+            primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
-                "dark:text-[var(--color-primary-contrast)] dark:bg-[var(--color-primary)] dark:border-[var(--color-primary-600)]",
-            danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] border-[var(--color-danger)] " +
+                "dark:border-[var(--color-primary-600)]",
+            danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] " +
                 "focus-visible:outline-[var(--color-danger-600)] " +
                 "dark:bg-[var(--color-danger-600)] dark:border-[var(--color-danger-600)]",
         },
         // Outline variant - transparent bg with colored border
         outline: {
-            neutral: "text-[var(--color-text-primary)] border-[var(--color-border-secondary)] " +
-                "hover:bg-[var(--color-neutral-100)] " +
+            mono: "text-[var(--color-text-primary)] border-[var(--color-border-secondary)] " +
+                "hover:bg-[var(--color-mono-100)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
                 "dark:hover:bg-[var(--color-background-secondary)]",
             primary: "text-[var(--color-text-primary)] border-[var(--color-primary-600)]/30 " +
@@ -44,11 +49,11 @@ const buttonTheme = {
         },
         // Soft variant - subtle background tints
         soft: {
-            neutral: "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)] " +
-                "hover:bg-[var(--color-neutral-200)] " +
+            mono: "text-[var(--color-text-primary)] bg-[var(--color-mono-100)] " +
+                "hover:bg-[var(--color-mono-200)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
-                "dark:text-[var(--color-text-primary)] dark:bg-[var(--color-neutral-900)] " +
-                "dark:hover:bg-[var(--color-neutral-800)]",
+                "dark:text-[var(--color-text-primary)] dark:bg-[var(--color-mono-900)] " +
+                "dark:hover:bg-[var(--color-mono-800)]",
             primary: "text-[var(--color-primary-600)] bg-[var(--color-primary)]/10 " +
                 "hover:bg-[var(--color-primary-50)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
@@ -62,10 +67,10 @@ const buttonTheme = {
         },
         // Ghost variant - transparent bg, subtle hover, full padding
         ghost: {
-            neutral: "text-[var(--color-text-primary)] " +
-                "hover:bg-[var(--color-neutral-100)] " +
+            mono: "text-[var(--color-text-primary)] " +
+                "hover:bg-[var(--color-mono-100)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
-                "dark:text-[var(--color-text-primary)] dark:hover:bg-[var(--color-neutral-800)]",
+                "dark:text-[var(--color-text-primary)] dark:hover:bg-[var(--color-mono-800)]",
             primary: "text-[var(--color-primary-600)] " +
                 "hover:bg-[var(--color-primary-50)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
@@ -81,18 +86,26 @@ const buttonTheme = {
         sm: {
             // Tighten the corner radius at sm so a short button doesn't read as a pill
             // (overrides baseStyle's rounded-[var(--button-radius)] via twMerge).
-            default: "font-medium min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm rounded-[calc(var(--button-radius)*0.75)]",
+            default: "font-medium min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-[length:var(--button-text-size-sm)]/[var(--button-line-height-sm)] rounded-[calc(var(--button-radius)*0.75)]",
             iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)] rounded-[calc(var(--button-radius)*0.75)]",
         },
         md: {
-            default: "font-medium min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm",
+            default: "font-medium min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-[length:var(--button-text-size-md)]/[var(--button-line-height-md)]",
             iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
         },
         lg: {
-            default: "font-medium min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base",
+            default: "font-medium min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-[length:var(--button-text-size-lg)]/[var(--button-line-height-lg)]",
             iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
         },
     },
+    // Icon slot sizing. `[&>svg]:size-*` sizes the icon itself, so a caller passing a bare
+    // <SearchIcon /> with no className still lands at the right size — mirrors Badge's
+    // iconSizes. A caller's own className on the icon still wins.
+    iconSizes: {
+        sm: "size-3.5 [&>svg]:size-3.5",
+        md: "size-4 [&>svg]:size-4",
+        lg: "size-5 [&>svg]:size-5",
+    },
     // State styles
     states: {
         disabled: "opacity-60 cursor-not-allowed pointer-events-none saturate-0",

package/dist/components/core/Button/Button.types.d.ts

@@ -26,6 +26,23 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     iconOnly?: boolean;
     /** Whether the button should be full width */
     block?: boolean;
+    /**
+     * Small decorative icon before the label, auto-sized to the button's `size`.
+     *
+     * The SERIALIZABLE front door — composing the icon into `children` stays the
+     * idiomatic hand-written form (`<Button><SearchIcon className="size-4" />Search</Button>`)
+     * and is unchanged. This slot exists because a generative UI spec is JSON: it can name
+     * an icon but cannot pass a React element, so `children` alone leaves an LLM unable to
+     * put an icon on a button at all. Same "one contract, two front doors" shape as Card's
+     * `title`/`subtitle` slot-props and the collection `items` APIs (CLAUDE.md §2).
+     *
+     * Deliberately NO `contentStart`/`contentEnd` counterpart: those take arbitrary
+     * ReactNode, which is not serializable, so they would buy the generative path nothing
+     * — compose those into `children`.
+     */
+    iconStart?: React.ReactNode;
+    /** Small decorative icon after the label, auto-sized to the button's `size`. See `iconStart`. */
+    iconEnd?: React.ReactNode;
     /** Button contents */
     children?: React.ReactNode;
     /** Additional class names */
@@ -49,7 +66,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      */
     darkMode?: boolean;
 }
-export type ButtonColor = "neutral" | "primary" | "danger";
+export type ButtonColor = "mono" | "primary" | "danger";
 export type ButtonVariant = "filled" | "outline" | "soft" | "ghost";
 export type ButtonSize = "sm" | "md" | "lg";
 export type ButtonState = "default" | "disabled" | "loading";

package/dist/components/core/Calendar/Calendar.js

@@ -2,10 +2,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState, useCallback, useEffect, useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 import { calendarTheme } from './Calendar.theme.js';
 import { calendarAnimations } from './Calendar.animations.js';
 import { cn } from '../../../utils/cn.js';
+import '../../../theme/ThemeContext.js';
+import '../../../theme/SurfaceContext.js';
+import { springs } from '../../../theme/animations.js';
 import { Select } from '../../forms/Select/Select.js';
 import '../../forms/Select/Select.theme.js';
 import { Button } from '../Button/Button.js';
@@ -113,7 +116,9 @@ const generateCalendarDays = (year, month, selectedValue, mode = 'single', today
     }
     return days;
 };
-const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultValue, onChange, minDate, maxDate, isDateDisabled: customIsDateDisabled, showToday = true, selectTodayByDefault = false, weekdays = ["M", "T", "W", "T", "F", "S", "S"], months, size = "md", headerMode, enableMonthDropdown = true, enableYearDropdown = true, yearRange, viewDate: externalViewDate, onViewDateChange, onNavigatePrev, onNavigateNext, showOtherMonthDays = true, className, ...props }, ref) => {
+const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultValue, onChange, minDate, maxDate, isDateDisabled: customIsDateDisabled, showToday = true, selectTodayByDefault = false, weekdays = ["M", "T", "W", "T", "F", "S", "S"], months, size = "md", headerMode, enableMonthDropdown = true, enableYearDropdown = true, yearRange, viewDate: externalViewDate, onViewDateChange, onNavigatePrev, onNavigateNext, showOtherMonthDays = true, className, 
+// Destructure motion-conflicting props to avoid type issues
+onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...props }, ref) => {
     // Determine initial view date from value/defaultValue
     const getInitialViewDate = () => {
         if (value) {
@@ -298,6 +303,16 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
         maxDate,
         customIsDateDisabled,
     ]);
+    // Calculate days grid height dynamically to animate height smoothly without layout scale distortion
+    const gridHeight = useMemo(() => {
+        const rowCount = calendarDays.length / 7;
+        // Must mirror calendarTheme.dayButtonSizes (size-8/10/12 → 32/40/48px)
+        const rowHeight = size === 'sm' ? 32 : size === 'lg' ? 48 : 40;
+        // Row height * number of rows + gap-y (2px) * (number of rows - 1),
+        // plus the grid's py-1 (4px top + bottom) that keeps focus rings
+        // visible inside the overflow-hidden clip.
+        return rowCount * rowHeight + (rowCount - 1) * 2 + 8;
+    }, [calendarDays.length, size]);
     // Reset the roving tabindex target whenever the visible month changes —
     // prefer the selected day, then today, then the first day of the month.
     // Deliberately does NOT depend on `selectedValue`/`calendarDays` so that
@@ -446,9 +461,9 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
             }
         }
     }, [minDate, maxDate, customIsDateDisabled, currentMonth, currentYear, onViewDateChange, mode, value, onChange, selectedValue, rangeSelectionState]);
-    return (jsxs("div", { ref: ref, className: cn(calendarTheme.baseStyle, className), ...props, children: [jsxs("div", { className: calendarTheme.headerStyle, children: [onNavigatePrev !== null && (jsx(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "ghost", color: "neutral", size: "sm", children: jsx(ChevronLeftIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigatePrev === null && jsx("div", { className: "w-8" }), resolvedHeaderMode === 'static' ? (jsxs("h2", { className: calendarTheme.titleStyle, children: [getMonthName(viewDate, months), " ", currentYear] })) : (jsxs("div", { className: calendarTheme.headerDropdownsStyle, children: [(resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (jsx(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "ghost", color: "neutral", size: "sm", children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day, i) => (
+    return (jsxs("div", { ref: ref, className: cn(calendarTheme.baseStyle, className), ...props, children: [jsxs("div", { className: calendarTheme.headerStyle, children: [onNavigatePrev !== null && (jsx(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "ghost", color: "mono", size: "sm", children: jsx(CaretLeft, { className: "size-4", weight: "bold" }) })), onNavigatePrev === null && jsx("div", { className: "w-8" }), resolvedHeaderMode === 'static' ? (jsxs("h2", { className: calendarTheme.titleStyle, children: [getMonthName(viewDate, months), " ", currentYear] })) : (jsxs("div", { className: calendarTheme.headerDropdownsStyle, children: [(resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (jsx(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "ghost", color: "mono", size: "sm", children: jsx(CaretRight, { className: "size-4", weight: "bold" }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day, i) => (
                 // Index in the key: default labels (e.g. M,T,W,T,F,S,S) repeat, so `day` alone is not unique.
-                jsx("div", { className: calendarTheme.weekdayStyle, children: day }, `${day}-${i}`))) }), jsx("div", { className: calendarTheme.daysGridStyle, children: calendarDays.map((day, index) => {
+                jsx("div", { className: calendarTheme.weekdayStyle, children: day }, `${day}-${i}`))) }), jsx(motion.div, { animate: { height: gridHeight }, transition: springs.smooth, className: cn(calendarTheme.daysGridStyle, "content-start overflow-hidden py-1 -my-1"), children: calendarDays.map((day, index) => {
                     var _a;
                     const dayNumber = day.date.getDate();
                     const isInStrip = day.isRangeStart || day.isRangeEnd || day.isInRange;
@@ -483,7 +498,7 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
                                 // the onFocus round-trip.
                                 setFocusedIndex(index);
                                 handleDateSelect(day.date);
-                            }, onKeyDown: (e) => handleDayKeyDown(e, index), onFocus: () => setFocusedIndex(index), tabIndex: index === focusedIndex ? 0 : -1, disabled: day.isDisabled, className: cn(calendarTheme.dayButtonStyle, (_a = calendarTheme.dayButtonSizes) === null || _a === void 0 ? void 0 : _a[size]), "data-selected": day.isSelected, "data-range-start": day.isRangeStart, "data-range-end": day.isRangeEnd, "data-in-range": day.isInRange, "data-today": day.isToday && !day.isSelected && !day.isRangeStart && !day.isRangeEnd, "data-disabled": day.isDisabled, "data-other-month": !day.isCurrentMonth, "aria-label": `Select ${day.date.toLocaleDateString()}`, variants: shouldReduceMotion ? {} : calendarAnimations.dayButton, whileHover: shouldReduceMotion ? undefined : (!day.isDisabled ? "hover" : undefined), whileTap: shouldReduceMotion ? undefined : (!day.isDisabled ? "tap" : undefined), children: [jsx("time", { dateTime: day.date.toISOString().split("T")[0], children: dayNumber }), day.isToday && (jsx(motion.span, { className: "absolute z-10 bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-[var(--color-primary)] rounded-full", variants: shouldReduceMotion ? {} : calendarAnimations.todayDot, initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate" }))] }) }, day.date.toISOString()));
+                            }, onKeyDown: (e) => handleDayKeyDown(e, index), onFocus: () => setFocusedIndex(index), tabIndex: index === focusedIndex ? 0 : -1, disabled: day.isDisabled, className: cn(calendarTheme.dayButtonStyle, (_a = calendarTheme.dayButtonSizes) === null || _a === void 0 ? void 0 : _a[size]), "data-selected": day.isSelected || day.isRangeStart || day.isRangeEnd, "data-range-start": day.isRangeStart, "data-range-end": day.isRangeEnd, "data-in-range": day.isInRange, "data-today": day.isToday && !day.isSelected && !day.isRangeStart && !day.isRangeEnd, "data-disabled": day.isDisabled, "data-other-month": !day.isCurrentMonth, "aria-label": `Select ${day.date.toLocaleDateString()}`, variants: shouldReduceMotion ? {} : calendarAnimations.dayButton, whileHover: shouldReduceMotion ? undefined : (!day.isDisabled ? "hover" : undefined), whileTap: shouldReduceMotion ? undefined : (!day.isDisabled ? "tap" : undefined), children: [jsx("time", { dateTime: day.date.toISOString().split("T")[0], children: dayNumber }), day.isToday && (jsx(motion.span, { className: "absolute z-10 bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-[var(--color-primary)] rounded-full", variants: shouldReduceMotion ? {} : calendarAnimations.todayDot, initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate" }))] }) }, day.date.toISOString()));
                 }) })] }));
 });
 Calendar.displayName = "Calendar";

package/dist/components/core/Calendar/Calendar.theme.js

@@ -7,47 +7,39 @@ const calendarTheme = {
     headerStyle: "flex items-center justify-between mb-4",
     titleStyle: "text-sm font-semibold text-[var(--color-text-primary)] " + "",
     headerDropdownsStyle: "grid grid-cols-2 items-center gap-2 flex-1 justify-center mx-3",
-    navButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.75)] border-0 bg-transparent " +
-        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-primary-50)] " +
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
-        "transition-colors disabled:opacity-50 disabled:cursor-not-allowed " +
-        // Dark mode
-        "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-800)] " +
-        "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     weekdaysStyle: "grid grid-cols-7 mb-2",
-    weekdayStyle: "flex items-center justify-center h-8 text-xs font-medium text-[var(--color-text-muted)] " +
-        "dark:text-[var(--color-neutral-500)]",
+    weekdayStyle: "flex items-center justify-center h-8 text-xs font-medium text-[var(--color-text-muted)]",
     daysGridStyle: "grid grid-cols-7 gap-y-0.5 gap-x-0",
-    rangeCellStyle: "bg-[var(--color-primary-50)]/70 " +
+    rangeCellStyle: "bg-[var(--color-primary-300)]/50 dark:bg-[var(--color-primary-500)]/20 " +
         "data-[range-pos=start]:rounded-l-full " +
         "data-[range-pos=end]:rounded-r-full " +
-        "data-[range-pos=single]:rounded-full " +
-        "dark:bg-[var(--color-primary-900)]/50",
+        "data-[range-pos=single]:rounded-full",
     dayButtonStyle: "relative z-10 flex items-center justify-center rounded-full border-0 bg-transparent font-medium cursor-pointer " +
         "transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
         // Base text color
-        "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)] " +
+        "text-[var(--color-text-primary)] " +
         // Hover state
-        "hover:bg-[var(--color-primary-50)] dark:hover:bg-[var(--color-neutral-800)] " +
+        "hover:bg-[var(--color-primary-50)] dark:hover:bg-[var(--color-primary)]/30 " +
         // Selected state
         "data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-[var(--color-primary-contrast)] " +
-        "data-[selected=true]:hover:bg-[var(--color-primary-600)] data-[selected=true]:border-t data-[selected=true]:border-white/30 " +
+        "data-[selected=true]:hover:bg-[var(--color-primary-600)] data-[selected=true]:dark:hover:bg-[var(--color-primary)]/80 data-[selected=true]:border-t data-[selected=true]:border-white/30 " +
         // Today indicator
         "data-[today=true]:text-[var(--color-primary)] dark:data-[today=true]:text-[var(--color-primary-400)] " +
         // Disabled state
         "data-[disabled=true]:text-[var(--color-text-muted)] data-[disabled=true]:opacity-50 " +
         "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent " +
-        "dark:data-[disabled=true]:text-[var(--color-neutral-600)] " +
         // Other month state
         "data-[other-month=true]:text-[var(--color-text-muted)] data-[other-month=true]:opacity-60 " +
-        "dark:data-[other-month=true]:text-[var(--color-neutral-600)] " +
-        // Range mode states (strip background handled by wrapper cell)
-        "data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-[var(--color-primary-contrast)] " +
-        "data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-[var(--color-primary-contrast)] " +
+        // Range mode: endpoints (start/end) reuse the single-selected styling via
+        // data-selected (set in Calendar.tsx) — ONE source of truth for a selected
+        // day (fill, text, border, hover). In-range (between) days only override
+        // text colour for readability on the strip; their hover intentionally falls
+        // through to the base day-hover above, so a hovered day looks identical
+        // whether or not it sits inside a range.
         "data-[in-range=true]:text-[var(--color-text-primary)] " +
-        "dark:data-[in-range=true]:text-[var(--color-neutral-200)] " +
+        "dark:data-[in-range=true]:text-[var(--color-mono-200)] " +
         // Focus offset for dark mode
-        "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
+        "dark:focus-visible:ring-offset-[var(--color-mono-900)]",
     dayButtonSizes: {
         sm: "size-8 text-sm",
         md: "size-10 text-sm",

package/dist/components/core/Calendar/Calendar.types.d.ts

@@ -117,7 +117,6 @@ export interface CalendarTheme {
     headerStyle: string;
     titleStyle: string;
     headerDropdownsStyle: string;
-    navButtonStyle: string;
     weekdaysStyle: string;
     weekdayStyle: string;
     daysGridStyle: string;

package/dist/components/core/Calendar/CalendarMini/CalendarMini.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import React__default, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { cn } from '../../../../utils/cn.js';
@@ -199,7 +199,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
     };
     const MonthRow = enableAnimations ? motion.div : "div";
     const DateItem = enableAnimations ? motion.button : "button";
-    return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), role: "region", "aria-label": "Mini calendar", ...rest, children: [jsx(Button, { iconOnly: true, color: "neutral", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handlePrevMonth, "aria-label": "Previous month", children: jsx(ChevronLeftIcon, { className: "size-5 text-[var(--color-text-primary)]" }) }), jsxs("div", { className: "flex flex-col gap-1 relative", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("div", { className: "flex flex-col relative overflow-hidden flex-1", style: {
+    return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), role: "region", "aria-label": "Mini calendar", ...rest, children: [jsx(Button, { iconOnly: true, color: "mono", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handlePrevMonth, "aria-label": "Previous month", children: jsx(CaretLeft, { className: "size-5 text-[var(--color-text-primary)]" }) }), jsxs("div", { className: "flex flex-col gap-1 relative", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("div", { className: "flex flex-col relative overflow-hidden flex-1", style: {
                                     maskImage: "linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent)",
                                     WebkitMaskImage: "linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent)",
                                 }, children: jsx("div", { ref: monthScrollRef, className: cn(mergedTheme.monthRowStyle), role: "tablist", "aria-label": "Month selection", children: jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: jsx(MonthRow, { custom: direction, ...(enableAnimations && {
@@ -247,7 +247,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
                                             }), "aria-selected": isSelected, "aria-current": isToday ? "date" : undefined, "aria-disabled": disabled, type: "button", ...(enableAnimations && {
                                                 whileTap: !disabled ? { scale: 0.95 } : undefined,
                                             }), children: [jsx("div", { className: "text-sm font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
-                                    }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "neutral", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month", children: jsx(ChevronRightIcon, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
+                                    }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "mono", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month", children: jsx(CaretRight, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
 });
 CalendarMini.displayName = "CalendarMini";
 

package/dist/components/core/Card/Card.theme.js

@@ -2,11 +2,19 @@ const cardTheme = {
     // bg comes from the relative-elevation engine (surfaceClasses) at runtime so a card
     // nested in a higher surface (e.g. a Modal) lifts; keep radius + overflow + border here.
     baseStyle: "rounded-[var(--card-radius)] overflow-hidden border-0 border-[var(--color-border)]",
-    headerStyle: "flex flex-col p-6 items-start",
-    titleStyle: "text-base font-semibold leading-none text-[var(--color-text-primary)]",
+    headerStyle: "flex flex-col px-[var(--card-px)] py-[var(--card-py)] items-start",
+    // text-[length:...] (not bare text-[var(...)]) is required — see TYPE ROLE
+    // SYSTEM in theme.css for why a bare var() would resolve to color instead.
+    titleStyle: "text-[length:var(--card-title-size)] font-semibold leading-none text-[var(--color-text-primary)]",
     subtitleStyle: "text-sm text-[var(--color-text-secondary)] mt-2",
-    bodyStyle: "p-6 pt-0 first:pt-6",
-    footerStyle: "flex items-center p-6 pt-0 first:pt-6",
+    // Default to full py (top included). [[data-card-region]~&]:pt-0 zeroes the seam
+    // ONLY when an actual region (Header/Body) precedes this one — a general-sibling
+    // selector keyed off data-card-region, not `:first-child`. `:first-child` broke
+    // when a decorative absolutely-positioned sibling (e.g. DotPattern) sat before
+    // Body in the DOM: it still counts as a structural first child even though it
+    // takes no layout space, so Body silently lost its top padding.
+    bodyStyle: "px-[var(--card-px)] py-[var(--card-py)] [[data-card-region]~&]:pt-0",
+    footerStyle: "flex items-center px-[var(--card-px)] py-[var(--card-py)] [[data-card-region]~&]:pt-0",
 };
 
 export { cardTheme };

package/dist/components/core/Card/CardBody.js

@@ -4,7 +4,7 @@ import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';
 
 const CardBody = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx("div", { ref: ref, className: cn(cardTheme.bodyStyle, className), ...props, children: children }));
+    return (jsx("div", { ref: ref, "data-card-region": "", className: cn(cardTheme.bodyStyle, className), ...props, children: children }));
 });
 CardBody.displayName = 'Card.Body';
 

package/dist/components/core/Card/CardFooter.js

@@ -4,7 +4,7 @@ import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';
 
 const CardFooter = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx("div", { ref: ref, className: cn(cardTheme.footerStyle, className), ...props, children: children }));
+    return (jsx("div", { ref: ref, "data-card-region": "", className: cn(cardTheme.footerStyle, className), ...props, children: children }));
 });
 CardFooter.displayName = 'CardFooter';
 

package/dist/components/core/Card/CardHeader.js

@@ -4,7 +4,7 @@ import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';
 
 const CardHeader = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx("div", { ref: ref, className: cn(cardTheme.headerStyle, className), ...props, children: children }));
+    return (jsx("div", { ref: ref, "data-card-region": "", className: cn(cardTheme.headerStyle, className), ...props, children: children }));
 });
 CardHeader.displayName = 'CardHeader';
 

package/dist/components/core/Carousel/CarouselNext.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
-import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+import { CaretRight, CaretDown } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useCarouselContext } from './CarouselContext.js';
 import { carouselTheme } from './Carousel.theme.js';
@@ -9,7 +9,7 @@ import { carouselTheme } from './Carousel.theme.js';
 const CarouselNext = React__default.forwardRef(({ className, icon, 'aria-label': ariaLabel, ...props }, ref) => {
     const { scrollNext, canScrollNext, orientation } = useCarouselContext();
     return (jsx("button", { ref: ref, type: "button", onClick: scrollNext, disabled: !canScrollNext, "aria-label": ariaLabel || 'Next slide', className: cn(carouselTheme.button, className), ...props, children: icon ||
-            (orientation === 'horizontal' ? (jsx(ChevronRightIcon, { className: carouselTheme.buttonIcon, "aria-hidden": "true" })) : (jsx(ChevronDownIcon, { className: carouselTheme.buttonIcon, "aria-hidden": "true" }))) }));
+            (orientation === 'horizontal' ? (jsx(CaretRight, { className: carouselTheme.buttonIcon, "aria-hidden": "true" })) : (jsx(CaretDown, { className: carouselTheme.buttonIcon, "aria-hidden": "true" }))) }));
 });
 CarouselNext.displayName = 'Carousel.Next';
 

package/dist/components/core/Carousel/CarouselPrevious.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
-import { ChevronLeftIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import { CaretLeft, CaretUp } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useCarouselContext } from './CarouselContext.js';
 import { carouselTheme } from './Carousel.theme.js';
@@ -9,7 +9,7 @@ import { carouselTheme } from './Carousel.theme.js';
 const CarouselPrevious = React__default.forwardRef(({ className, icon, 'aria-label': ariaLabel, ...props }, ref) => {
     const { scrollPrev, canScrollPrev, orientation } = useCarouselContext();
     return (jsx("button", { ref: ref, type: "button", onClick: scrollPrev, disabled: !canScrollPrev, "aria-label": ariaLabel || 'Previous slide', className: cn(carouselTheme.button, className), ...props, children: icon ||
-            (orientation === 'horizontal' ? (jsx(ChevronLeftIcon, { className: carouselTheme.buttonIcon, "aria-hidden": "true" })) : (jsx(ChevronUpIcon, { className: carouselTheme.buttonIcon, "aria-hidden": "true" }))) }));
+            (orientation === 'horizontal' ? (jsx(CaretLeft, { className: carouselTheme.buttonIcon, "aria-hidden": "true" })) : (jsx(CaretUp, { className: carouselTheme.buttonIcon, "aria-hidden": "true" }))) }));
 });
 CarouselPrevious.displayName = 'Carousel.Previous';