fix: gracefully fallback on invalid variant props instead of crashing (#469)

mattrothenberg · web-flow · commit 62e093cc5b4e · 2026-05-03T13:19:17.000-04:00
diff --git a/.changeset/safe-variant-fallback.md b/.changeset/safe-variant-fallback.md
@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Gracefully fall back to default variant instead of crashing when an invalid variant prop is passed at runtime. Previously 22 of 25 components would throw `TypeError` on unknown variant values; all 25 now use a shared `resolveVariant()` utility that returns the default config and logs a dev warning.
diff --git a/packages/kumo/src/components/autocomplete/autocomplete.tsx b/packages/kumo/src/components/autocomplete/autocomplete.tsx
@@ -3,6 +3,7 @@ import { CheckIcon } from "@phosphor-icons/react";
 import { type ReactNode } from "react";
 import { inputVariants, KUMO_INPUT_VARIANTS } from "../input/input";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 import { Field, type FieldErrorMatch } from "../field/field";
 
 /** Autocomplete variant definitions. */
@@ -32,7 +33,7 @@ export interface KumoAutocompleteVariantsProps {
 export function autocompleteVariants({
   size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,
 }: KumoAutocompleteVariantsProps = {}) {
-  return cn(KUMO_INPUT_VARIANTS.size[size].classes);
+  return cn(resolveVariant(KUMO_INPUT_VARIANTS.size, size, KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size).classes);
 }
 
 /**
diff --git a/packages/kumo/src/components/badge/badge.tsx b/packages/kumo/src/components/badge/badge.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 
 /** Base styles applied to all badge variants. */
 export const KUMO_BADGE_BASE_STYLES =
@@ -98,13 +99,11 @@ export interface KumoBadgeVariantsProps {
 export function badgeVariants({
   variant = KUMO_BADGE_DEFAULT_VARIANTS.variant,
 }: KumoBadgeVariantsProps = {}) {
-  const variantConfig = KUMO_BADGE_VARIANTS.variant[variant];
   return cn(
     // Base styles (exported as KUMO_BADGE_BASE_STYLES for Figma plugin)
     KUMO_BADGE_BASE_STYLES,
     // Apply variant styles from KUMO_BADGE_VARIANTS (fallback to primary if variant not found)
-    variantConfig?.classes ??
-      KUMO_BADGE_VARIANTS.variant[KUMO_BADGE_DEFAULT_VARIANTS.variant].classes,
+    resolveVariant(KUMO_BADGE_VARIANTS.variant, variant, KUMO_BADGE_DEFAULT_VARIANTS.variant).classes,
   );
 }
 
diff --git a/packages/kumo/src/components/banner/banner.tsx b/packages/kumo/src/components/banner/banner.tsx
@@ -1,5 +1,6 @@
 import { type ReactNode, isValidElement, forwardRef } from "react";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 
 /** Base styles applied to all banner variants. */
 export const KUMO_BANNER_BASE_STYLES =
@@ -54,7 +55,7 @@ export function bannerVariants({
     // Base styles (exported as KUMO_BANNER_BASE_STYLES for Figma plugin)
     KUMO_BANNER_BASE_STYLES,
     // Apply variant styles from KUMO_BANNER_VARIANTS
-    KUMO_BANNER_VARIANTS.variant[variant].classes,
+    resolveVariant(KUMO_BANNER_VARIANTS.variant, variant, KUMO_BANNER_DEFAULT_VARIANTS.variant).classes,
   );
 }
 
@@ -133,7 +134,7 @@ export const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
   },
   ref,
 ) {
-  const variantConfig = KUMO_BANNER_VARIANTS.variant[variant];
+  const variantConfig = resolveVariant(KUMO_BANNER_VARIANTS.variant, variant, KUMO_BANNER_DEFAULT_VARIANTS.variant);
 
   // Structured mode: title and/or description provided
   if (title || description) {
diff --git a/packages/kumo/src/components/breadcrumbs/breadcrumbs.tsx b/packages/kumo/src/components/breadcrumbs/breadcrumbs.tsx
@@ -13,6 +13,7 @@ import { Button } from "../../components/button";
 import { SkeletonLine } from "../../components/loader/skeleton-line";
 import { useLinkComponent } from "../../utils/link-provider";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 
 /** Breadcrumbs size variant definitions. */
 export const KUMO_BREADCRUMBS_VARIANTS = {
@@ -49,7 +50,7 @@ export function breadcrumbsVariants({
 }: KumoBreadcrumbsVariantsProps = {}) {
   return cn(
     "group mr-4 flex min-w-0 grow items-center overflow-hidden whitespace-nowrap",
-    KUMO_BREADCRUMBS_VARIANTS.size[size].classes,
+    resolveVariant(KUMO_BREADCRUMBS_VARIANTS.size, size, KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size).classes,
   );
 }
 
diff --git a/packages/kumo/src/components/button/button.tsx b/packages/kumo/src/components/button/button.tsx
@@ -3,6 +3,7 @@ import { ArrowsClockwise, type Icon } from "@phosphor-icons/react";
 import { Loader } from "../loader/loader";
 import { Tooltip } from "../tooltip/tooltip";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 import { useLinkComponent } from "../../utils/link-provider";
 
 /** Button variant definitions mapping shape, size, and variant names to their Tailwind classes. */
@@ -135,10 +136,10 @@ export function buttonVariants({
     // Disabled state
     "disabled:cursor-not-allowed disabled:text-kumo-subtle",
     // Apply variant, size, shape styles from KUMO_BUTTON_VARIANTS
-    KUMO_BUTTON_VARIANTS.variant[variant].classes,
-    KUMO_BUTTON_VARIANTS.size[size].classes,
-    KUMO_BUTTON_VARIANTS.shape[shape].classes,
-    isCompactShape && KUMO_BUTTON_VARIANTS.compactSize[size].classes,
+    resolveVariant(KUMO_BUTTON_VARIANTS.variant, variant, KUMO_BUTTON_DEFAULT_VARIANTS.variant).classes,
+    resolveVariant(KUMO_BUTTON_VARIANTS.size, size, KUMO_BUTTON_DEFAULT_VARIANTS.size).classes,
+    resolveVariant(KUMO_BUTTON_VARIANTS.shape, shape, KUMO_BUTTON_DEFAULT_VARIANTS.shape).classes,
+    isCompactShape && resolveVariant(KUMO_BUTTON_VARIANTS.compactSize, size, KUMO_BUTTON_DEFAULT_VARIANTS.size).classes,
   );
 }
 
diff --git a/packages/kumo/src/components/checkbox/checkbox.tsx b/packages/kumo/src/components/checkbox/checkbox.tsx
@@ -1,6 +1,7 @@
 import { forwardRef, createContext, useContext, type ReactNode } from "react";
 import { CheckIcon, MinusIcon } from "@phosphor-icons/react";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 import { Label } from "../label";
 import { Fieldset } from "@base-ui/react/fieldset";
 import { Field as FieldBase } from "@base-ui/react/field";
@@ -47,7 +48,7 @@ export interface KumoCheckboxVariantsProps {
 export function checkboxVariants({
   variant = KUMO_CHECKBOX_DEFAULT_VARIANTS.variant,
 }: KumoCheckboxVariantsProps = {}) {
-  return cn(KUMO_CHECKBOX_VARIANTS.variant[variant].classes);
+  return cn(resolveVariant(KUMO_CHECKBOX_VARIANTS.variant, variant, KUMO_CHECKBOX_DEFAULT_VARIANTS.variant).classes);
 }
 
 // Legacy type alias for backwards compatibility
diff --git a/packages/kumo/src/components/clipboard-text/clipboard-text.tsx b/packages/kumo/src/components/clipboard-text/clipboard-text.tsx
@@ -5,6 +5,7 @@ import { Tooltip } from "@base-ui/react/tooltip";
 import { Button } from "../button";
 import { inputVariants } from "../input";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 
 // Create a toast manager for anchored "Copied" toasts
 const clipboardToastManager = Toast.createToastManager();
@@ -65,7 +66,7 @@ export function clipboardTextVariants({
     // Base styles
     "flex items-center overflow-hidden bg-kumo-base px-0 font-mono",
     // Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS
-    KUMO_CLIPBOARD_TEXT_VARIANTS.size[size].classes,
+    resolveVariant(KUMO_CLIPBOARD_TEXT_VARIANTS.size, size, KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size).classes,
   );
 }
 
@@ -176,7 +177,7 @@ export const ClipboardText = forwardRef<HTMLDivElement, ClipboardTextProps>(
   ) => {
     const [copied, setCopied] = useState(false);
     const buttonRef = useRef<HTMLButtonElement | null>(null);
-    const sizeConfig = KUMO_CLIPBOARD_TEXT_VARIANTS.size[size];
+    const sizeConfig = resolveVariant(KUMO_CLIPBOARD_TEXT_VARIANTS.size, size, KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size);
 
     // Destructure tooltip config with defaults
     const {
diff --git a/packages/kumo/src/components/code/code.tsx b/packages/kumo/src/components/code/code.tsx
@@ -1,5 +1,6 @@
 import { type CSSProperties } from "react";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 
 /** Code language variant definitions. */
 export const KUMO_CODE_VARIANTS = {
@@ -102,8 +103,7 @@ export function codeVariants({
     // Base styles
     "m-0 w-auto rounded-none border-none bg-transparent p-0 font-mono text-sm leading-[20px] text-kumo-subtle",
     // Apply lang-specific styles (fallback to default if lang not in map)
-    KUMO_CODE_VARIANTS.lang[lang]?.classes ??
-      KUMO_CODE_VARIANTS.lang[KUMO_CODE_DEFAULT_VARIANTS.lang].classes,
+    resolveVariant(KUMO_CODE_VARIANTS.lang, lang, KUMO_CODE_DEFAULT_VARIANTS.lang).classes,
   );
 }
 
diff --git a/packages/kumo/src/components/combobox/combobox.tsx b/packages/kumo/src/components/combobox/combobox.tsx
@@ -13,6 +13,7 @@ import {
   type KumoInputSize,
 } from "../input/input";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 import { Field, type FieldErrorMatch } from "../field/field";
 import {
   usePortalContainer,
@@ -69,7 +70,7 @@ export interface KumoComboboxVariantsProps {
 export function comboboxVariants({
   inputSide = KUMO_COMBOBOX_DEFAULT_VARIANTS.inputSide,
 }: KumoComboboxVariantsProps = {}) {
-  return cn(KUMO_COMBOBOX_VARIANTS.inputSide[inputSide].classes);
+  return cn(resolveVariant(KUMO_COMBOBOX_VARIANTS.inputSide, inputSide, KUMO_COMBOBOX_DEFAULT_VARIANTS.inputSide).classes);
 }
 
 // Legacy type alias for backwards compatibility
diff --git a/packages/kumo/src/components/dialog/dialog.tsx b/packages/kumo/src/components/dialog/dialog.tsx
@@ -9,6 +9,7 @@ import { Dialog as DialogBase } from "@base-ui/react/dialog";
 import { AlertDialog as AlertDialogBase } from "@base-ui/react/alert-dialog";
 import { LayerCard } from "../layer-card";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 import {
   usePortalContainer,
   type PortalContainer,
@@ -144,7 +145,7 @@ export function dialogVariants({
     // Base styles
     "shadow-m ring ring-kumo-line fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0",
     // Apply size from KUMO_DIALOG_VARIANTS
-    KUMO_DIALOG_VARIANTS.size[size].classes,
+    resolveVariant(KUMO_DIALOG_VARIANTS.size, size, KUMO_DIALOG_DEFAULT_VARIANTS.size).classes,
   );
 }
 
diff --git a/packages/kumo/src/components/dropdown/dropdown.tsx b/packages/kumo/src/components/dropdown/dropdown.tsx
@@ -1,6 +1,7 @@
 import { Menu as DropdownMenuPrimitive } from "@base-ui/react/menu";
 import * as React from "react";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 import { useLinkComponent } from "../../utils/link-provider";
 import {
   usePortalContainer,
@@ -48,7 +49,7 @@ export interface KumoDropdownVariantsProps {
 export function dropdownVariants({
   variant = KUMO_DROPDOWN_DEFAULT_VARIANTS.variant,
 }: KumoDropdownVariantsProps = {}) {
-  return cn(KUMO_DROPDOWN_VARIANTS.variant[variant].classes);
+  return cn(resolveVariant(KUMO_DROPDOWN_VARIANTS.variant, variant, KUMO_DROPDOWN_DEFAULT_VARIANTS.variant).classes);
 }
 
 const DropdownMenuSubTrigger = React.forwardRef<
diff --git a/packages/kumo/src/components/empty/empty.tsx b/packages/kumo/src/components/empty/empty.tsx
@@ -2,6 +2,7 @@ import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
 import { useState } from "react";
 import { Button } from "../../components/button";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 
 /** Empty state size variant definitions mapping sizes to their Tailwind classes. */
 export const KUMO_EMPTY_VARIANTS = {
@@ -43,7 +44,7 @@ export function emptyVariants({
 }: KumoEmptyVariantsProps = {}) {
   return cn(
     "flex w-full flex-col items-center rounded-xl border border-kumo-fill bg-kumo-control text-kumo-default",
-    KUMO_EMPTY_VARIANTS.size[size].classes,
+    resolveVariant(KUMO_EMPTY_VARIANTS.size, size, KUMO_EMPTY_DEFAULT_VARIANTS.size).classes,
   );
 }
 
diff --git a/packages/kumo/src/components/grid/grid.tsx b/packages/kumo/src/components/grid/grid.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 
 /** Grid variant and gap definitions mapping layout names to their responsive Tailwind classes. */
 export const KUMO_GRID_VARIANTS = {
@@ -144,8 +145,8 @@ export function gridVariants({
 } = {}) {
   return cn(
     "grid",
-    variant && KUMO_GRID_VARIANTS.variant[variant].classes,
-    KUMO_GRID_VARIANTS.gap[gap].classes,
+    variant && resolveVariant(KUMO_GRID_VARIANTS.variant, variant, "2up").classes,
+    resolveVariant(KUMO_GRID_VARIANTS.gap, gap, KUMO_GRID_DEFAULT_VARIANTS.gap).classes,
   );
 }
 
diff --git a/packages/kumo/src/components/input/input.tsx b/packages/kumo/src/components/input/input.tsx
@@ -1,4 +1,5 @@
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 import {
   forwardRef,
   type ComponentPropsWithoutRef,
@@ -110,9 +111,9 @@ export function inputVariants({
     // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)
     "kumo-input-placeholder disabled:text-kumo-disabled",
     // Apply size styles from KUMO_INPUT_VARIANTS
-    KUMO_INPUT_VARIANTS.size[size].classes,
+    resolveVariant(KUMO_INPUT_VARIANTS.size, size, KUMO_INPUT_DEFAULT_VARIANTS.size).classes,
     // Apply variant styles from KUMO_INPUT_VARIANTS
-    KUMO_INPUT_VARIANTS.variant[variant].classes,
+    resolveVariant(KUMO_INPUT_VARIANTS.variant, variant, KUMO_INPUT_DEFAULT_VARIANTS.variant).classes,
     // Focus state handling
     parentFocusIndicator &&
       (variant === "error"
diff --git a/packages/kumo/src/components/link/link.tsx b/packages/kumo/src/components/link/link.tsx
@@ -2,6 +2,7 @@ import { forwardRef, type SVGProps } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 import {
   useLinkComponent,
   type LinkComponentProps,
@@ -80,7 +81,7 @@ export interface KumoLinkVariantsProps {
 export function linkVariants({
   variant = KUMO_LINK_DEFAULT_VARIANTS.variant,
 }: KumoLinkVariantsProps = {}) {
-  return cn(KUMO_LINK_VARIANTS.variant[variant].classes);
+  return cn(resolveVariant(KUMO_LINK_VARIANTS.variant, variant, KUMO_LINK_DEFAULT_VARIANTS.variant).classes);
 }
 
 /**
diff --git a/packages/kumo/src/components/loader/loader.tsx b/packages/kumo/src/components/loader/loader.tsx
@@ -1,3 +1,5 @@
+import { resolveVariant } from "../../utils/resolve-variant";
+
 /** Loader size variant definitions mapping sizes to their pixel values. */
 export const KUMO_LOADER_VARIANTS = {
   size: {
@@ -38,7 +40,7 @@ export function loaderVariants({
   size = KUMO_LOADER_DEFAULT_VARIANTS.size,
 }: KumoLoaderVariantsProps = {}): number {
   if (typeof size === "number") return size;
-  return KUMO_LOADER_VARIANTS.size[size].value;
+  return resolveVariant(KUMO_LOADER_VARIANTS.size, size, KUMO_LOADER_DEFAULT_VARIANTS.size).value;
 }
 
 /**
diff --git a/packages/kumo/src/components/pagination/pagination.tsx b/packages/kumo/src/components/pagination/pagination.tsx
@@ -15,6 +15,7 @@ import {
   CaretRightIcon,
 } from "@phosphor-icons/react";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 import { Select } from "../select";
 
 const DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 250] as const;
@@ -93,7 +94,7 @@ export function paginationVariants({
 }: KumoPaginationVariantsProps = {}) {
   return cn(
     "flex items-center justify-between gap-2",
-    KUMO_PAGINATION_VARIANTS.controls[controls].classes,
+    resolveVariant(KUMO_PAGINATION_VARIANTS.controls, controls, KUMO_PAGINATION_DEFAULT_VARIANTS.controls).classes,
   );
 }
 
diff --git a/packages/kumo/src/components/radio/radio.tsx b/packages/kumo/src/components/radio/radio.tsx
@@ -1,5 +1,6 @@
 import { forwardRef, createContext, useContext, type ReactNode } from "react";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 import { Fieldset } from "@base-ui/react/fieldset";
 import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
 import { Radio as BaseRadio } from "@base-ui/react/radio";
@@ -61,8 +62,8 @@ export function radioVariants({
   appearance = KUMO_RADIO_DEFAULT_VARIANTS.appearance,
 }: KumoRadioVariantsProps = {}) {
   return cn(
-    KUMO_RADIO_VARIANTS.variant[variant].classes,
-    KUMO_RADIO_VARIANTS.appearance[appearance].classes,
+    resolveVariant(KUMO_RADIO_VARIANTS.variant, variant, KUMO_RADIO_DEFAULT_VARIANTS.variant).classes,
+    resolveVariant(KUMO_RADIO_VARIANTS.appearance, appearance, KUMO_RADIO_DEFAULT_VARIANTS.appearance).classes,
   );
 }
 
diff --git a/packages/kumo/src/components/surface/surface.tsx b/packages/kumo/src/components/surface/surface.tsx
@@ -1,5 +1,6 @@
 import { createElement, type ElementType } from "react";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 import { LayerCard, type LayerCardProps } from "../layer-card/layer-card";
 
 /** Surface color variant definitions. */
@@ -36,7 +37,7 @@ export interface KumoSurfaceVariantsProps {
 export function surfaceVariants({
   color = KUMO_SURFACE_DEFAULT_VARIANTS.color,
 }: KumoSurfaceVariantsProps = {}) {
-  return KUMO_SURFACE_VARIANTS.color[color].classes;
+  return resolveVariant(KUMO_SURFACE_VARIANTS.color, color, KUMO_SURFACE_DEFAULT_VARIANTS.color).classes;
 }
 
 /**
diff --git a/packages/kumo/src/components/switch/switch.tsx b/packages/kumo/src/components/switch/switch.tsx
@@ -8,6 +8,7 @@ import {
   useContext,
 } from "react";
 import { cn } from "../../utils/cn";
+import { resolveVariant } from "../../utils/resolve-variant";
 import { Field } from "../field/field";
 import { Fieldset } from "@base-ui/react/fieldset";
 
@@ -70,12 +71,8 @@ export function switchVariants({
   size = KUMO_SWITCH_DEFAULT_VARIANTS.size,
   variant = KUMO_SWITCH_DEFAULT_VARIANTS.variant,
 }: KumoSwitchVariantsProps = {}) {
-  // Fallback to defaults if invalid size/variant passed
-  const sizeConfig =
-    KUMO_SWITCH_VARIANTS.size[size] ?? KUMO_SWITCH_VARIANTS.size.base;
-  const variantConfig =
-    KUMO_SWITCH_VARIANTS.variant[variant] ??
-    KUMO_SWITCH_VARIANTS.variant.default;
+  const sizeConfig = resolveVariant(KUMO_SWITCH_VARIANTS.size, size, KUMO_SWITCH_DEFAULT_VARIANTS.size);
+  const variantConfig = resolveVariant(KUMO_SWITCH_VARIANTS.variant, variant, KUMO_SWITCH_DEFAULT_VARIANTS.variant);
   return cn(sizeConfig.classes, variantConfig.classes);
 }
 
diff --git a/packages/kumo/src/components/table/table.tsx b/packages/kumo/src/components/table/table.tsx
diff --git a/packages/kumo/src/components/text/text.tsx b/packages/kumo/src/components/text/text.tsx
diff --git a/packages/kumo/src/components/toast/toast.tsx b/packages/kumo/src/components/toast/toast.tsx
diff --git a/packages/kumo/src/components/tooltip/tooltip.tsx b/packages/kumo/src/components/tooltip/tooltip.tsx
diff --git a/packages/kumo/src/utils/resolve-variant.test.ts b/packages/kumo/src/utils/resolve-variant.test.ts
diff --git a/packages/kumo/src/utils/resolve-variant.ts b/packages/kumo/src/utils/resolve-variant.ts
diff --git a/packages/kumo/src/utils/variant-safety.test.ts b/packages/kumo/src/utils/variant-safety.test.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@cloudflare/kumo": patch
 +---
++
 +Gracefully fall back to default variant instead of crashing when an invalid variant prop is passed at runtime. Previously 22 of 25 components would throw `TypeError` on unknown variant values; all 25 now use a shared `resolveVariant()` utility that returns the default config and logs a dev warning.