@hyphen/hyphen-components 7.9.0 → 8.0.0

package/dist/index.d.ts

@@ -119,6 +119,10 @@ type ValueOrFunction<TValue, TArg> = TValue | ValueFunction<TValue, TArg>;
 type AlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'default';
 
 interface AlertProps {
+    /**
+     * The alert's contents.
+     */
+    children?: ReactNode;
     /**
      * Custom class to apply to the alert.
      */
@@ -131,10 +135,6 @@ interface AlertProps {
      * Renders a version of the alert with smaller padding.
      */
     isCompact?: boolean;
-    /**
-     * @deprecated Use children instead. The text message or ReactNode to be rendered in the alert.
-     */
-    message?: string | ReactNode;
     /**
      * Whether the alert can be closed by the user. If `true` it will render
      * the 'close' icon on the right hand side of the alert.
@@ -410,18 +410,27 @@ declare const Box: FC<BoxProps>;
 declare const boxPropsKeys: (keyof Pick<BoxProps, KnownKeys<BoxProps>>)[];
 
 type BadgeSize = 'sm' | 'md' | 'lg';
-type BadgeVariant = 'default' | 'secondary' | 'danger' | 'outline' | 'light-grey' | 'dark-grey' | 'inverse' | 'green' | 'yellow' | 'blue' | 'red' | 'purple' | 'orange' | 'hyphen';
-interface BadgeProps extends BoxProps {
+type BadgeVariant = 'solid' | 'soft' | 'surface' | 'outline';
+type BadgeHue = 'grey' | 'blue' | 'green' | 'yellow' | 'red' | 'purple' | 'orange' | 'brand';
+type BadgeSemanticColor = 'danger' | 'success' | 'warning' | 'info';
+type BadgeColor = BadgeHue | BadgeSemanticColor;
+type BadgeRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+interface BadgeProps extends Omit<BoxProps, 'color' | 'radius'> {
+    /**
+     * The color of the badge. Accepts a hue, or one of the semantic names
+     * (`danger`, `success`, `warning`, `info`) which map onto `red`, `green`, `yellow` and `blue`.
+     */
+    color?: BadgeColor;
     /**
-     * @deprecated Use children instead. The text message or ReactNode to be rendered in the badge.
+     * The roundness of the badge's corners.
      */
-    message?: string | ReactNode;
+    radius?: BadgeRadius;
     /**
      * The size of the badge.
      */
     size?: BadgeSize | ResponsiveProp<BadgeSize>;
     /**
-     * The type/color of the badge to show.
+     * The visual style of the badge. Use `color` to set its color.
      */
     variant?: BadgeVariant;
 }
@@ -1792,51 +1801,7 @@ interface FormikTextareaInputProps extends Omit<TextareaInputProps, 'onChange'>
 }
 declare const FormikTextareaInput: FC<FormikTextareaInputProps>;
 
-type TimePickerProps = Omit<SelectInputProps, 'options'> & {
-    /**
-     * Options to govern the display of the option labels in the select.
-     * This is a direct passthrough to the second argument of JS `toLocaleTimeString`.
-     * [More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)
-     */
-    dateDisplayOptions?: Intl.DateTimeFormatOptions;
-    /**
-     * End hour and minute
-     */
-    endTime?: {
-        hour: number;
-        minute: number;
-    };
-    /**
-     * Interval of displayed times (in seconds). Defaults to 900 seconds (15 minutes).
-     */
-    interval?: number;
-    /**
-     * Locale(s) to be passed down in order to format the label values in the select.
-     * This corresponds to the first argument of JS `toLocaleTimeString`.
-     * [More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)
-     */
-    locales?: string | string[];
-    /**
-     * Start hour and minute
-     */
-    startTime?: {
-        hour: number;
-        minute: number;
-    };
-};
-declare const TimePicker: FC<TimePickerProps>;
-
-interface FormikTimePickerProps extends Omit<TimePickerProps, 'onChange'> {
-    field: FieldAttributes<HTMLSelectElement>;
-    form: {
-        touched: FormikTouched<FormikValues>;
-        errors: FormikErrors<FormikValues>;
-    };
-    onChange?: TimePickerProps['onChange'];
-}
-declare const FormikTimePicker: FC<FormikTimePickerProps>;
-
-interface TimePickerNativeProps extends Omit<SelectInputNativeProps, 'options'> {
+interface TimePickerProps extends Omit<SelectInputNativeProps, 'options'> {
     /**
      * Options to govern the display of the option labels in the select.
      * This is a direct passthrough to the second argument of JS `toLocaleTimeString`.
@@ -1872,17 +1837,17 @@ interface TimePickerNativeProps extends Omit<SelectInputNativeProps, 'options'>
      */
     value: SelectInputNativeProps['value'];
 }
-declare const TimePickerNative: FC<TimePickerNativeProps>;
+declare const TimePicker: FC<TimePickerProps>;
 
-interface FormikTimePickerNativeProps extends Omit<TimePickerNativeProps, 'onChange'> {
-    field: FieldAttributes<HTMLTextAreaElement>;
+interface FormikTimePickerProps extends Omit<TimePickerProps, 'onChange'> {
+    field: FieldAttributes<HTMLSelectElement>;
     form: {
         touched: FormikTouched<FormikValues>;
         errors: FormikErrors<FormikValues>;
     };
-    onChange: TimePickerNativeProps['onChange'];
+    onChange?: TimePickerProps['onChange'];
 }
-declare const FormikTimePickerNative: FC<FormikTimePickerNativeProps>;
+declare const FormikTimePicker: FC<FormikTimePickerProps>;
 
 interface FormikSwitchProps {
     field: FieldAttributes<HTMLTextAreaElement>;
@@ -2837,4 +2802,4 @@ declare const Z_INDEX_OPTIONS: ZIndexSize[];
 declare const Z_INDEX_VALUES: any;
 declare const BOX_SHADOW_OPTIONS: BoxShadowSize[];
 
-export { Alert, type AlertProps, AspectRatio, BACKGROUND_COLOR_OPTIONS, BASE_COLOR_NAMES, BASE_COLOR_OPTIONS, BORDER_COLOR_OPTIONS, BORDER_RADIUS_OPTIONS, BORDER_SIZE_OPTIONS, BOX_SHADOW_OPTIONS, BREAKPOINTS, BREAKPOINT_OPTIONS, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BaseButtonProps, type BaseSpacing, type BorderRadiusSize, Box, type BoxProps, type Breakpoint, type BreakpointSizeWithBase, type BreakpointState, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, CardBaseComponent, type CardProps, type CardStatic, type CardWithStaticComponents, type Cell, Checkbox, CheckboxInput, type CheckboxInputProps, type CheckboxProps, type CheckboxSize, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, type CssAlignContentValue, type CssAlignItemsValue, type CssDimensionAbbreviation, type CssDimensionUnit, type CssDimensionValue, type CssDisplayValue, type CssFlexDirectionValue, type CssFlexValue, type CssJustifyContentValue, type CssOverflowValue, type CssSpacingAbbreviation, type CssTextAlignValue, type CssWhiteSpaceValue, type CssWordBreakValue, Details, DetailsBaseComponent, type DetailsProps, type DetailsStatic, DetailsSummary, type DetailsSummaryProps, type DetailsWithStaticComponents, type DimensionSize, Drawer, DrawerCloseButton, DrawerContent, DrawerHeader, type DrawerPlacementType, type DrawerProps, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EventWithColumnKey, type ExtendedToastOptions, FONT_COLOR_OPTIONS, FONT_FAMILY_OPTIONS, FONT_SIZE_OPTIONS, FONT_WEIGHT_OPTIONS, type FilterFunction, type FlexProperty, FormControl, type FormControlProps, FormLabel, type FormLabelProps, FormikCheckboxInput, type FormikCheckboxInputProps, FormikRadioGroup, type FormikRadioGroupProps, FormikSelectInput, FormikSelectInputInset, type FormikSelectInputInsetProps, FormikSelectInputNative, type FormikSelectInputNativeProps, type FormikSelectInputProps, FormikSwitch, type FormikSwitchProps, FormikTextInput, FormikTextInputInset, type FormikTextInputInsetProps, type FormikTextInputProps, FormikTextareaInput, FormikTextareaInputInset, type FormikTextareaInputInsetProps, type FormikTextareaInputProps, FormikTimePicker, FormikTimePickerNative, type FormikTimePickerNativeProps, type FormikTimePickerProps, FormikToggleGroup, FormikToggleGroupMulti, type FormikToggleGroupMultiProps, type FormikToggleGroupProps, HEADING_SIZE_OPTIONS, HEIGHT_OPTIONS, Heading, type HeadingProps, type HookWindowSize, type HoverableBoxProperties, ICON_NAMES, Icon, type IconProps, type InputRangeProps, LINE_HEIGHT_OPTIONS, Modal, ModalBaseComponent, type ModalProps, type ModalStatic, type ModalWithStaticComponents, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverPortal, PopoverTrigger, RadioGroup, type RadioGroupProps, RangeInput, ResponsiveContext, type ResponsiveContextShape, type ResponsiveProp, ResponsiveProvider, type ResponsiveProviderProps, type Row, SPACING_OPTIONS, SelectInput, SelectInputInset, type SelectInputInsetProps, type SelectInputInsetSize, SelectInputNative, type SelectInputNativeOption, type SelectInputNativeProps, type SelectInputNativeSize, type SelectInputOptions, type SelectInputProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, type SimulatedEventPayloadType, Spinner, type SpinnerProps, type StylesAndClasses, Switch, type SwitchProps, type SwitchSize, Table, type TableProps, TextInput, TextInputInset, type TextInputInsetProps, type TextInputInsetSize, type TextInputProps, type TextInputSize, type TextInputSizeType, TextareaInput, TextareaInputInset, type TextareaInputInsetProps, type TextareaInputInsetSize, type TextareaInputProps, type TextareaInputSize, type Theme, ThemeProvider, ThemeProviderContext, TimePicker, TimePickerNative, type TimePickerNativeProps, type TimePickerProps, type Toast, ToastContainer, type ToastContainerProps, type ToastOptions, type ToastPosition, type ToastType, Toggle, ToggleGroup, ToggleGroupItem, type ToggleVariant$1 as ToggleVariant, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, type UnknownPropertiesObjType, type UseOpenCloseProps, type UseOpenCloseState, type ValueFunction, type ValueOrFunction, WIDTH_OPTIONS, Z_INDEX_OPTIONS, Z_INDEX_VALUES, boxPropsKeys, createRectRef, cssShorthandToClasses, doesStringIncludeCssUnit, filter, generateBaseClasses, generateResponsiveClasses, getAutoCompleteValue, getColumnKeys, getDimensionClasses, getDimensionCss, getDimensionStyles, getElementType, getFlexClasses, getFlexCss, getFlexStyles, handleReactRouterClick, isFunction, isModifiedEvent, isValidSpacingValue, mergeRefs, parsePropertyValue, prefersReducedMotion, resolveValue, toast, useBreakpoint, useDrawer, useIsMobile, useIsomorphicLayoutEffect, useOpenClose, useSidebar, useTheme, useToasts, useWindowSize };
+export { Alert, type AlertProps, AspectRatio, BACKGROUND_COLOR_OPTIONS, BASE_COLOR_NAMES, BASE_COLOR_OPTIONS, BORDER_COLOR_OPTIONS, BORDER_RADIUS_OPTIONS, BORDER_SIZE_OPTIONS, BOX_SHADOW_OPTIONS, BREAKPOINTS, BREAKPOINT_OPTIONS, Badge, type BadgeColor, type BadgeHue, type BadgeProps, type BadgeRadius, type BadgeSemanticColor, type BadgeSize, type BadgeVariant, type BaseButtonProps, type BaseSpacing, type BorderRadiusSize, Box, type BoxProps, type Breakpoint, type BreakpointSizeWithBase, type BreakpointState, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, CardBaseComponent, type CardProps, type CardStatic, type CardWithStaticComponents, type Cell, Checkbox, CheckboxInput, type CheckboxInputProps, type CheckboxProps, type CheckboxSize, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, type CssAlignContentValue, type CssAlignItemsValue, type CssDimensionAbbreviation, type CssDimensionUnit, type CssDimensionValue, type CssDisplayValue, type CssFlexDirectionValue, type CssFlexValue, type CssJustifyContentValue, type CssOverflowValue, type CssSpacingAbbreviation, type CssTextAlignValue, type CssWhiteSpaceValue, type CssWordBreakValue, Details, DetailsBaseComponent, type DetailsProps, type DetailsStatic, DetailsSummary, type DetailsSummaryProps, type DetailsWithStaticComponents, type DimensionSize, Drawer, DrawerCloseButton, DrawerContent, DrawerHeader, type DrawerPlacementType, type DrawerProps, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EventWithColumnKey, type ExtendedToastOptions, FONT_COLOR_OPTIONS, FONT_FAMILY_OPTIONS, FONT_SIZE_OPTIONS, FONT_WEIGHT_OPTIONS, type FilterFunction, type FlexProperty, FormControl, type FormControlProps, FormLabel, type FormLabelProps, FormikCheckboxInput, type FormikCheckboxInputProps, FormikRadioGroup, type FormikRadioGroupProps, FormikSelectInput, FormikSelectInputInset, type FormikSelectInputInsetProps, FormikSelectInputNative, type FormikSelectInputNativeProps, type FormikSelectInputProps, FormikSwitch, type FormikSwitchProps, FormikTextInput, FormikTextInputInset, type FormikTextInputInsetProps, type FormikTextInputProps, FormikTextareaInput, FormikTextareaInputInset, type FormikTextareaInputInsetProps, type FormikTextareaInputProps, FormikTimePicker, type FormikTimePickerProps, FormikToggleGroup, FormikToggleGroupMulti, type FormikToggleGroupMultiProps, type FormikToggleGroupProps, HEADING_SIZE_OPTIONS, HEIGHT_OPTIONS, Heading, type HeadingProps, type HookWindowSize, type HoverableBoxProperties, ICON_NAMES, Icon, type IconProps, type InputRangeProps, LINE_HEIGHT_OPTIONS, Modal, ModalBaseComponent, type ModalProps, type ModalStatic, type ModalWithStaticComponents, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverPortal, PopoverTrigger, RadioGroup, type RadioGroupProps, RangeInput, ResponsiveContext, type ResponsiveContextShape, type ResponsiveProp, ResponsiveProvider, type ResponsiveProviderProps, type Row, SPACING_OPTIONS, SelectInput, SelectInputInset, type SelectInputInsetProps, type SelectInputInsetSize, SelectInputNative, type SelectInputNativeOption, type SelectInputNativeProps, type SelectInputNativeSize, type SelectInputOptions, type SelectInputProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, type SimulatedEventPayloadType, Spinner, type SpinnerProps, type StylesAndClasses, Switch, type SwitchProps, type SwitchSize, Table, type TableProps, TextInput, TextInputInset, type TextInputInsetProps, type TextInputInsetSize, type TextInputProps, type TextInputSize, type TextInputSizeType, TextareaInput, TextareaInputInset, type TextareaInputInsetProps, type TextareaInputInsetSize, type TextareaInputProps, type TextareaInputSize, type Theme, ThemeProvider, ThemeProviderContext, TimePicker, type TimePickerProps, type Toast, ToastContainer, type ToastContainerProps, type ToastOptions, type ToastPosition, type ToastType, Toggle, ToggleGroup, ToggleGroupItem, type ToggleVariant$1 as ToggleVariant, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, type UnknownPropertiesObjType, type UseOpenCloseProps, type UseOpenCloseState, type ValueFunction, type ValueOrFunction, WIDTH_OPTIONS, Z_INDEX_OPTIONS, Z_INDEX_VALUES, boxPropsKeys, createRectRef, cssShorthandToClasses, doesStringIncludeCssUnit, filter, generateBaseClasses, generateResponsiveClasses, getAutoCompleteValue, getColumnKeys, getDimensionClasses, getDimensionCss, getDimensionStyles, getElementType, getFlexClasses, getFlexCss, getFlexStyles, handleReactRouterClick, isFunction, isModifiedEvent, isValidSpacingValue, mergeRefs, parsePropertyValue, prefersReducedMotion, resolveValue, toast, useBreakpoint, useDrawer, useIsMobile, useIsomorphicLayoutEffect, useOpenClose, useSidebar, useTheme, useToasts, useWindowSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "7.9.0",
+  "version": "8.0.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -56,7 +56,7 @@
     "react-select": "^5.10.0",
     "react-select-event": "^5.5.1",
     "uuid": "^11.1.1",
-    "@hyphen/hyphen-design-tokens": "^7.9.0"
+    "@hyphen/hyphen-design-tokens": "^8.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
@@ -102,7 +102,7 @@
     "jest-preview": "^0.3.1",
     "mini-css-extract-plugin": "^2.9.1",
     "playwright": "^1.60.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.5.18",
     "postcss-loader": "^7.3.4",
     "postcss-modules": "^6.0.0",
     "react": "^18.3.1",

package/src/components/Alert/Alert.mdx

@@ -16,7 +16,7 @@ Use alerts to display feedback for users about specific actions, or states of an
 
 ## Variants
 
-Alerts come in different variants based on the kind of feedback being delivered to the user. Additionally, a combination of icon, title, and message can be used depending on your content needs.
+Alerts come in different variants based on the kind of feedback being delivered to the user. Additionally, a combination of icon, title, and content can be used depending on your content needs.
 
 <Canvas of={Stories.Variants} />
 

package/src/components/Alert/Alert.module.scss

@@ -1,20 +1,35 @@
+/*
+ * Each variant class declares the three semantic values the base `.alert` block consumes.
+ * The values mirror the Badge `surface` variant, so an Alert and a surface Badge of the
+ * same semantic colour read as the same tint in both light and dark mode.
+ */
+@mixin alert-variant($variant) {
+  --alert-background: var(--color-background-alert-#{$variant});
+  --alert-border: var(--color-border-alert-#{$variant});
+  --alert-font: var(--color-font-alert-#{$variant});
+}
+
 .alert {
   border-width: var(--size-border-width-sm);
   border-style: solid;
   box-shadow: var(--size-box-shadow-0);
   font-family: var(--assets-font-family-body);
+  background: var(--alert-background);
+  border-color: var(--alert-border);
+  color: var(--alert-font);
 
+  /* Icon and close button share the variant font colour so the whole alert reads as one tint. */
   .close-icon {
     > button {
       border: 0;
       background: none;
       cursor: pointer;
       padding: 0;
-      color: var(--color-base-grey-600);
+      color: inherit;
       font: inherit;
 
       &:hover {
-        color: var(--color-base-grey-600);
+        color: inherit;
       }
     }
   }
@@ -25,50 +40,30 @@
 }
 
 .alert__default {
-  color: var(--color-base-grey-500);
-  background: var(--color-base-grey-100);
-  border-color: var(--color-base-grey-200);
+  @include alert-variant('default');
 }
 
 .alert__info {
-  color: var(--color-base-grey-500);
-  background: var(--color-base-blue-50);
-  border-color: var(--color-base-blue-200);
+  @include alert-variant('info');
 }
 
 .alert__success {
-  color: var(--color-base-grey-500);
-  background: var(--color-base-green-50);
-  border-color: var(--color-base-green-200);
+  @include alert-variant('success');
 }
 
+/*
+ * `--alert-warning-background-color` stays supported as a consumer-facing override so
+ * existing usages that recolour only the warning background keep working.
+ */
 .alert__warning {
-  color: var(--color-base-grey-500);
-  background: var(
+  --alert-background: var(
     --alert-warning-background-color,
-    var(--color-base-yellow-50)
+    var(--color-background-alert-warning)
   );
-  border-color: var(--color-base-yellow-200);
+  --alert-border: var(--color-border-alert-warning);
+  --alert-font: var(--color-font-alert-warning);
 }
 
 .alert__danger {
-  color: var(--color-base-grey-500);
-  background: var(--color-base-red-50);
-  border-color: var(--color-base-red-200);
-}
-
-.alert__icon__default {
-  color: var(--color-base-grey-600);
-}
-.alert__icon__info {
-  color: var(--color-base-blue-500);
-}
-.alert__icon__success {
-  color: var(--color-base-green-500);
-}
-.alert__icon__warning {
-  color: var(--color-base-yellow-500);
-}
-.alert__icon__danger {
-  color: var(--color-base-red-500);
+  @include alert-variant('danger');
 }

package/src/components/Alert/Alert.stories.tsx

@@ -2,6 +2,7 @@ import { Alert } from './Alert';
 import { AlertVariant } from './Alert.types';
 import { Button } from '../Button/Button';
 import { ALERT_VARIANTS } from './Alert.constants';
+import { allModes } from '../../modes';
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
@@ -20,10 +21,9 @@ const meta: Meta<typeof Alert> = {
       control: 'text',
       description: 'The title for the alert',
     },
-    message: {
+    children: {
       control: 'text',
-      description:
-        'The text message to be rendered in the alert (deprecated, use children instead)',
+      description: 'The content to be rendered in the alert',
     },
     hasIcon: {
       control: 'boolean',
@@ -48,6 +48,14 @@ const meta: Meta<typeof Alert> = {
     hasIcon: false,
     isCompact: false,
   },
+  parameters: {
+    chromatic: {
+      modes: {
+        light: allModes['light'],
+        dark: allModes['dark'],
+      },
+    },
+  },
 };
 
 export default meta;

package/src/components/Alert/Alert.test.tsx

@@ -7,7 +7,7 @@ describe('Alert', () => {
   describe('Default', () => {
     test('It renders an alert with a simple text message', () => {
       const message = 'Hello world!';
-      render(<Alert message={message} />);
+      render(<Alert>{message}</Alert>);
 
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
@@ -20,7 +20,9 @@ describe('Alert', () => {
     ALERT_VARIANTS.map((variant, index) =>
       test(`renders variant background color ${ALERT_VARIANTS[index]}`, () => {
         const { getByRole } = render(
-          <Alert variant={variant} message={variant} key={variant} />
+          <Alert variant={variant} key={variant}>
+            {variant}
+          </Alert>
         );
         expect(getByRole('alert').classList).toContain(`alert__${variant}`);
       })
@@ -30,7 +32,7 @@ describe('Alert', () => {
   describe('Custom Class', () => {
     test('It renders with a custom class if provided', () => {
       const message = 'Hello world!';
-      render(<Alert message={message} className="custom-class" />);
+      render(<Alert className="custom-class">{message}</Alert>);
 
       const alert = screen.getByRole('alert');
       expect(alert).toHaveClass('custom-class');
@@ -47,10 +49,14 @@ describe('Alert', () => {
         'danger' as const,
       ];
 
-      const { rerender } = render(<Alert message={message} />);
+      const { rerender } = render(<Alert>{message}</Alert>);
 
       variants.forEach((variant) => {
-        rerender(<Alert message={message} variant={variant} hasIcon />);
+        rerender(
+          <Alert variant={variant} hasIcon>
+            {message}
+          </Alert>
+        );
         const alertIcon = screen.getByTestId(`alert-icon-${variant}-test-id`);
         expect(alertIcon).toBeInTheDocument();
       });
@@ -61,7 +67,7 @@ describe('Alert', () => {
     test('It renders an alert with a title if passed', () => {
       const message = 'Hello world!';
       const title = 'title';
-      render(<Alert title={title} message={message} />);
+      render(<Alert title={title}>{message}</Alert>);
 
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
@@ -71,12 +77,12 @@ describe('Alert', () => {
   });
 
   describe('With Custom JSX', () => {
-    test('It renders custom JSX if passed to the message prop', () => {
+    test('It renders custom JSX if passed as children', () => {
       const jsxMessage: ReactNode = (
         <button type="button">I am a button!</button>
       );
 
-      render(<Alert message={jsxMessage} />);
+      render(<Alert>{jsxMessage}</Alert>);
 
       const alertButton = screen.getByRole('button');
       expect(alertButton).toBeInTheDocument();
@@ -95,13 +101,13 @@ describe('Alert', () => {
       expect(alertButton.textContent).toBe('I am a button!');
     });
 
-    test('Render prop supersedes message prop', () => {
+    test('Render prop supersedes children', () => {
       const jsxRenderProp = (): ReactNode => (
         <button type="button">I am a button!</button>
       );
       const message = 'Hello world!';
 
-      render(<Alert render={jsxRenderProp} message={message} />);
+      render(<Alert render={jsxRenderProp}>{message}</Alert>);
 
       const alertButton = screen.getByRole('button');
       expect(alertButton).toBeInTheDocument();
@@ -114,7 +120,7 @@ describe('Alert', () => {
   describe('Compact', () => {
     test('It renders with the compact class when isCompact prop is true', () => {
       const message = 'Hello world!';
-      render(<Alert message={message} isCompact />);
+      render(<Alert isCompact>{message}</Alert>);
 
       const alert = screen.getByRole('alert');
       expect(alert).toHaveClass('p-md');

package/src/components/Alert/Alert.tsx

@@ -15,6 +15,10 @@ import { AlertVariant } from './Alert.types';
 import { ALERT_ICONS_MAP } from './Alert.constants';
 
 export interface AlertProps {
+  /**
+   * The alert's contents.
+   */
+  children?: ReactNode;
   /**
    * Custom class to apply to the alert.
    */
@@ -27,10 +31,6 @@ export interface AlertProps {
    * Renders a version of the alert with smaller padding.
    */
   isCompact?: boolean;
-  /**
-   * @deprecated Use children instead. The text message or ReactNode to be rendered in the alert.
-   */
-  message?: string | ReactNode;
   /**
    * Whether the alert can be closed by the user. If `true` it will render
    * the 'close' icon on the right hand side of the alert.
@@ -61,7 +61,6 @@ const AlertComponent: FC<AlertProps> = ({
   className = '',
   hasIcon = false,
   isCompact = false,
-  message = '',
   onClose = undefined,
   render = undefined,
   title = '',
@@ -95,7 +94,7 @@ const AlertComponent: FC<AlertProps> = ({
     if (!hasIcon) return null;
 
     return (
-      <Box fontSize="md" className={styles[`alert__icon__${variant}`]}>
+      <Box fontSize="md">
         <Icon
           name={ALERT_ICONS_MAP[variant].icon}
           data-testid={`alert-icon-${variant}-test-id`}
@@ -108,11 +107,7 @@ const AlertComponent: FC<AlertProps> = ({
     if (!onClose) return null;
 
     return (
-      <Box
-        margin="0 0 0 auto"
-        color="secondary"
-        className={styles['close-icon']}
-      >
+      <Box margin="0 0 0 auto" className={styles['close-icon']}>
         <button
           type="button"
           onClick={handleClose}
@@ -131,7 +126,7 @@ const AlertComponent: FC<AlertProps> = ({
     }
 
     return (
-      <Box display="block" childGap={message && title ? '2xs' : undefined}>
+      <Box display="block" childGap={children && title ? '2xs' : undefined}>
         {title && (
           <Box
             as="h4"
@@ -142,12 +137,10 @@ const AlertComponent: FC<AlertProps> = ({
             {title}
           </Box>
         )}
-        {children ??
-          (message &&
-            (typeof message === 'string' ? <p>{message}</p> : message))}
+        {children}
       </Box>
     );
-  }, [render, message, title, children]);
+  }, [render, title, children]);
 
   return (
     <Box

package/src/components/Badge/Badge.mdx

@@ -16,14 +16,56 @@ Badges are used to display the status of an object or of an action that’s been
 
 ## Variants
 
-Badges come in different variants based on the kind of message being delivered to the user.
-If the `variant` prop is omitted, the badge uses the theme-aware `default` variant.
+The `variant` prop sets the badge's visual style, independent of its color. `soft` is the default.
 
 <Canvas of={Stories.Variants} />
 
-Fixed-color badge variants remain available when you want the same color treatment regardless of theme.
+## Colors
 
-<Canvas of={Stories.FixedColorVariants} />
+The `color` prop sets the badge's color, independent of its variant. Every color is theme-aware and has its own
+dark mode values. `grey` is the default.
+
+<Canvas of={Stories.Colors} />
+
+`color` also accepts the semantic names `danger`, `success`, `warning` and `info`, which map onto the `red`,
+`green`, `yellow` and `blue` hues. Prefer these when the badge communicates a state rather than a color, so the
+meaning survives a future retheme.
+
+<Canvas of={Stories.SemanticColors} />
+
+The `brand` color renders the Hyphen gradient when paired with `variant="solid"`. Its other variants are tinted
+with the brand orange, so `brand` and `orange` look the same for `soft`, `surface` and `outline` — `solid` is what
+distinguishes them.
+
+## Radius
+
+Set `radius` to `none`, `sm`, `md`, `lg`, or `full`. `full` is the default, giving the badge a pill shape.
+
+<Canvas of={Stories.Radii} />
+
+## With icons
+
+Nest an `Icon`, a `Spinner`, or any other graphic alongside the badge's text. Its position in the markup is its
+position in the badge — put it before the text for a leading icon, after for a trailing one. No extra props are
+needed.
+
+```jsx
+<Badge variant="solid" color="green">
+  <Icon name="check" />
+  Verified
+</Badge>
+
+<Badge variant="outline" color="yellow">
+  Favorite
+  <Icon name="star" />
+</Badge>
+```
+
+Nested graphics are scaled to the badge's text size and inherit its text color, so they stay in proportion at
+every `size` and in both themes. The badge also tightens its padding on whichever side carries a graphic rather
+than text, and a badge containing only an icon is padded evenly.
+
+<Canvas of={Stories.WithIcons} />
 
 ## Sizes