@dashforge/tw 1.1.0 → 1.2.0

package/src/components/Avatar/Avatar.tsx

@@ -1,304 +0,0 @@
-import {
-  Children,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  useState,
-  type ReactElement,
-} from 'react';
-import { cn } from '../../utils/cn.js';
-import {
-  AVATAR_SOFT_FALLBACK,
-  AVATAR_TONE_FALLBACK,
-  avatarVariants,
-} from './avatar.variants.js';
-import type {
-  AvatarGroupProps,
-  AvatarProps,
-  AvatarShape,
-  AvatarSize,
-} from './avatar.types.js';
-import type { BoxProps } from '../Box/box.types.js';
-
-/**
- * Generic user icon — inline SVG fallback when no `src` and no
- * `name` are provided. Stroke uses `currentColor` so it inherits the
- * resolved fallback text color. Same convention as Calendar +
- * Autocomplete + Alert icons (no icon-library dep).
- *
- * @internal
- */
-function DefaultUserIcon() {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.75}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <circle cx="12" cy="8" r="3.75" />
-      <path d="M4.5 20a7.5 7.5 0 0 1 15 0" />
-    </svg>
-  );
-}
-
-/**
- * Map the semantic `shape` shortcut to a Box-style `radius` token.
- * Used only when `radius` is NOT explicitly passed (explicit wins).
- *
- * @internal
- */
-function shapeToRadius(shape: AvatarShape): BoxProps['rounded'] {
-  switch (shape) {
-    case 'circle':
-      return 'full';
-    case 'rounded':
-      return 'lg';
-    case 'square':
-      return 'none';
-  }
-}
-
-/**
- * Extract initials from a name string. Strategy:
- *   - Split by whitespace, filter empty.
- *   - Take the first letter of the first 2 tokens, uppercased.
- *   - "Maya Rodriguez" → "MR"
- *   - "Cher" → "C"
- *   - "  multiple   spaces  " → "MS" (if 2+ words after trim)
- *   - "" → "" (empty string — caller falls back to icon)
- *
- * @internal
- */
-function initialsFromName(name?: string): string {
-  if (!name) return '';
-  const tokens = name.trim().split(/\s+/).filter(Boolean);
-  if (tokens.length === 0) return '';
-  return (tokens[0]![0]! + (tokens[1]?.[0] ?? '')).toUpperCase();
-}
-
-/**
- * `<Avatar>` — image / initials / icon visual identity.
- *
- * Fallback chain (top to bottom — first match wins):
- *   1. `src` set + image loads OK    → render `<img>`
- *   2. `src` set + image fails       → render initials from `name`
- *   3. `src` absent + `name` set     → render initials from `name`
- *   4. `fallbackIcon` set            → render that ReactNode
- *   5. Nothing                        → render generic user SVG
- *
- * Color resolution (only for fallback content, image surface is
- * independent):
- *   - `color="primary"` only           → soft default (bg-100, text-900)
- *   - `color="primary" tone={500}`     → bg-primary-500 + text-primary-50
- *   - Outside the palette              → use `sx`
- *
- * No `access` / `visibleWhen` — Avatar is display-only by category.
- * For visibility gating, wrap in `<Box>` (which has both since
- * Sprint 4.4).
- */
-export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(
-  props,
-  ref
-) {
-  const {
-    src,
-    alt,
-    imgProps,
-    name,
-    shape = 'circle',
-    radius,
-    size = 'md',
-    color = 'neutral',
-    tone,
-    fallbackIcon,
-    sx,
-    className,
-  } = props;
-
-  // Track image-load failures so we can fall through to initials/icon
-  // dynamically. `imgLoaded` distinguishes between "still loading"
-  // (don't show fallback yet — would flash) and "loaded successfully"
-  // (don't paint a fallback color underneath, which would peek through
-  // transparent PNGs).
-  const [imgFailed, setImgFailed] = useState(false);
-
-  // Resolve final radius: explicit `radius` prop wins over `shape`.
-  const finalRadius = radius ?? shapeToRadius(shape);
-
-  // Compute base classes from the TV recipe.
-  const v = avatarVariants({ size, radius: finalRadius });
-
-  // Fallback color resolution. `tone` (when set) drives the specific
-  // shade; otherwise the soft-default lookup is used.
-  const fallbackTone =
-    tone !== undefined
-      ? AVATAR_TONE_FALLBACK[color]?.[tone] ?? AVATAR_SOFT_FALLBACK[color]
-      : AVATAR_SOFT_FALLBACK[color];
-
-  // Image is "successful" when src is set AND the load hasn't failed.
-  const showImage = !!src && !imgFailed;
-  const initials = initialsFromName(name);
-
-  // The root carries the fallback color ONLY when we're showing the
-  // fallback content. Painting it underneath a successful image is
-  // wrong if the image has transparency.
-  const fallbackBgClasses = !showImage ? fallbackTone : '';
-
-  const rootClasses = cn(
-    v.root(),
-    fallbackBgClasses,
-    sx,
-    className
-  );
-
-  // Pick which fallback to render — priority: initials > custom icon > generic SVG.
-  const fallbackContent: ReactElement = initials ? (
-    <span className={v.initials()}>{initials}</span>
-  ) : fallbackIcon ? (
-    <span className="inline-flex items-center justify-center w-full h-full">
-      {fallbackIcon}
-    </span>
-  ) : (
-    <span className={v.icon() + ' inline-flex items-center justify-center'}>
-      <DefaultUserIcon />
-    </span>
-  );
-
-  return (
-    <span
-      ref={ref}
-      className={rootClasses}
-      role="img"
-      aria-label={alt ?? name ?? undefined}
-    >
-      {showImage ? (
-        // Inner img is DECORATIVE (alt="") — the parent span carries
-        // the accessible name via role="img" + aria-label. This avoids
-        // a duplicate role="img" announcement and matches MUI's a11y
-        // pattern.
-        <img
-          src={src}
-          alt=""
-          onError={() => setImgFailed(true)}
-          {...imgProps}
-          className={cn(v.img(), imgProps?.className)}
-        />
-      ) : (
-        fallbackContent
-      )}
-    </span>
-  );
-});
-
-Avatar.displayName = 'Avatar';
-
-// ─── AvatarGroup ─────────────────────────────────────────────────
-
-/**
- * Horizontal spacing tokens for the group overlap. Negative margin
- * pulls each child onto the previous, simulating the "stack of
- * avatars" pattern. Tokens map to spacing scale.
- *
- * @internal
- */
-const GROUP_SPACING: Record<NonNullable<AvatarGroupProps['spacing']>, string> = {
-  xs: '-space-x-1',
-  sm: '-space-x-2',
-  md: '-space-x-3',
-};
-
-/**
- * `<AvatarGroup>` — thin horizontal wrapper for overlapping avatars.
- *
- * Slices children to `max - 1` visible items and renders a trailing
- * "+N" overflow indicator with the remaining count (when more than
- * `max` children are passed).
- *
- * Each child Avatar inherits the group's `size` unless it explicitly
- * overrides. When `withRing` is `true` (default), each visible
- * Avatar gets a `ring-2 ring-white` halo so overlapping borders
- * stay visually separated.
- *
- * @example
- * ```tsx
- * <AvatarGroup max={3}>
- *   <Avatar name="Maya Rodriguez" color="primary" />
- *   <Avatar name="John Doe" color="success" />
- *   <Avatar name="Sara Chen" color="warning" />
- *   <Avatar name="Lila Park" color="info" />
- *   <Avatar name="Eve Kim" color="danger" />
- * </AvatarGroup>
- * // Renders: MR, JD, SC + a "+2" overflow chip
- * ```
- */
-export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
-  function AvatarGroup(props, ref) {
-    const {
-      children,
-      max = 4,
-      size = 'md',
-      spacing = 'sm',
-      withRing = true,
-      className,
-      sx,
-    } = props;
-
-    const allChildren = Children.toArray(children).filter(isValidElement);
-    const total = allChildren.length;
-    const visibleCount = Math.min(total, max);
-    const overflow = Math.max(0, total - visibleCount);
-
-    // Decorate each visible child with size (if not overridden by the
-    // child) and optional ring halo. cloneElement is the standard
-    // React pattern for prop-injection across a children array.
-    const visible = allChildren.slice(0, visibleCount).map((child, idx) => {
-      const childProps = (child as ReactElement<AvatarProps>).props;
-      const inheritedSize: AvatarSize = childProps.size ?? size;
-      const ringClass = withRing ? 'ring-2 ring-neutral-50' : '';
-      const mergedSx = cn(
-        ringClass,
-        childProps.sx as string | undefined,
-        childProps.className
-      );
-      return cloneElement(child as ReactElement<AvatarProps>, {
-        key: idx,
-        size: inheritedSize,
-        sx: mergedSx,
-      });
-    });
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'inline-flex items-center',
-          GROUP_SPACING[spacing],
-          sx,
-          className
-        )}
-      >
-        {visible}
-        {overflow > 0 && (
-          <Avatar
-            // The overflow indicator IS an avatar (same dimensions /
-            // radius), but with a +N text fallback rather than initials.
-            // We pass an empty `name` and a custom `fallbackIcon` that
-            // renders the count.
-            size={size}
-            color="neutral"
-            sx={cn(withRing && 'ring-2 ring-neutral-50')}
-            fallbackIcon={
-              <span className="text-xs font-medium">+{overflow}</span>
-            }
-          />
-        )}
-      </div>
-    );
-  }
-);
-
-AvatarGroup.displayName = 'AvatarGroup';

package/src/components/Avatar/avatar.types.ts

@@ -1,205 +0,0 @@
-import type { ImgHTMLAttributes, ReactNode } from 'react';
-import type { ClassValue } from 'tailwind-variants';
-import type { BoxProps } from '../Box/box.types.js';
-
-/**
- * Avatar size scale — maps to spacing tokens via avatar.variants.ts:
- *   - xs → w-5  / 20px
- *   - sm → w-7  / 28px
- *   - md → w-9  / 36px  ← default
- *   - lg → w-12 / 48px
- *   - xl → w-16 / 64px
- */
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-/**
- * Avatar shape — semantic shortcut. Maps internally to a Box-style
- * `radius` value:
- *   - circle → 'full'
- *   - rounded → 'lg'
- *   - square → 'none'
- *
- * When both `shape` and `radius` are set, `radius` wins (explicit
- * token reference takes precedence over semantic shortcut).
- */
-export type AvatarShape = 'circle' | 'rounded' | 'square';
-
-/**
- * Intent color — drives the fallback bg + text colors when no `src`
- * is provided (or when the image fails to load). Reuses the 7
- * Dashforge intent tokens.
- */
-export type AvatarColor =
-  | 'neutral'
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'warning'
-  | 'danger'
-  | 'info';
-
-/**
- * Tone shade for the fallback background — gives type-safe access to
- * any specific shade within the chosen `color` palette. When omitted,
- * the default "soft" treatment is applied (bg-{color}-100 +
- * text-{color}-900). When set, both bg and text are computed:
- *   - tones 50-400  → bg-{color}-{tone} + text-{color}-900 (dark text)
- *   - tones 500-900 → bg-{color}-{tone} + text-{color}-50  (light text)
- *
- * For colors outside the token palette (custom hex, gradient, image
- * patterns), use the `sx` escape hatch with arbitrary Tailwind
- * utilities.
- */
-export type AvatarTone =
-  | 50
-  | 100
-  | 200
-  | 300
-  | 400
-  | 500
-  | 600
-  | 700
-  | 800
-  | 900;
-
-/**
- * Props for `<Avatar>`.
- *
- * Fallback resolution chain:
- *   1. `src` set + image loads OK   → render `<img>`
- *   2. `src` set + image fails      → render initials from `name`
- *      (or a generic user icon if `name` is also absent)
- *   3. `src` absent + `name` set    → render initials from `name`
- *      (first letter of first two words, uppercased)
- *   4. Everything absent            → render a generic user icon
- *
- * No `access` / `visibleWhen` — Avatar is display-only by category.
- * For visibility gating, wrap in `<Box>` (which has both props since
- * Sprint 4.4).
- */
-export interface AvatarProps {
-  // ─── Image source ──────────────────────────────────────────────
-  /** Image URL. Falls back to initials/icon on load failure. */
-  src?: string;
-
-  /**
-   * `alt` text for the image. **Required when `src` is set** (a11y
-   * — screen readers need a name). When `src` is absent, the alt is
-   * implied from `name`.
-   */
-  alt?: string;
-
-  /** Additional `<img>` HTML attributes (sizes, loading, srcSet, …). */
-  imgProps?: ImgHTMLAttributes<HTMLImageElement>;
-
-  // ─── Fallback ──────────────────────────────────────────────────
-  /**
-   * Person / entity name. Auto-generates initials when `src` is
-   * absent or the image fails to load. Algorithm: take the first
-   * letter of the first two whitespace-separated words, uppercased.
-   * "Maya Rodriguez" → "MR". "Cher" → "C". Empty → generic icon.
-   */
-  name?: string;
-
-  // ─── Visual ────────────────────────────────────────────────────
-  /**
-   * Shape — semantic shortcut. Override with `radius` for fine
-   * control on the Box token scale.
-   * @default 'circle'
-   */
-  shape?: AvatarShape;
-
-  /**
-   * Border radius — same enum as `<Box rounded>` (Box token scale).
-   * When set, overrides the `shape` mapping. Useful for matching a
-   * specific Card/Box radius (e.g., `radius='2xl'`).
-   */
-  radius?: BoxProps['rounded'];
-
-  /** @default 'md' */
-  size?: AvatarSize;
-
-  /**
-   * Intent color used for the fallback background. Ignored when the
-   * image loads successfully.
-   * @default 'neutral'
-   */
-  color?: AvatarColor;
-
-  /**
-   * Specific shade within the `color` palette (TS-safe). When set,
-   * overrides the default "soft" treatment. See `AvatarTone` for the
-   * full scale.
-   */
-  tone?: AvatarTone;
-
-  // ─── Override ──────────────────────────────────────────────────
-  /** Root-element class shortcut (string or clsx-compatible value). */
-  sx?: ClassValue;
-
-  /** Standard React className — appended to the root via `cn()`. */
-  className?: string;
-
-  /**
-   * Optional custom fallback ReactNode — replaces both initials and
-   * the generic icon when the image is absent / fails. Useful for
-   * Avatar-with-emoji or Avatar-with-custom-icon patterns. When
-   * passed, `name` is ignored for initials generation but kept as
-   * `alt` semantic.
-   *
-   * **NB**: this is the ONE exception to the "no fallback prop —
-   * only name" rule from the spec. Kept narrow because emoji /
-   * custom icon avatars are common enough that forcing `sx` for
-   * them would be friction.
-   */
-  fallbackIcon?: ReactNode;
-}
-
-/**
- * Props for `<AvatarGroup>` — thin horizontal wrapper.
- *
- * Renders the first `max` children visibly (with negative-margin
- * overlap), then an overflow indicator avatar with the remaining
- * count. Each child Avatar inherits `size` from the group unless it
- * overrides explicitly. Optional `ring-2 ring-white` halo on each
- * child via the group's `withRing` prop (visually separates
- * overlapping avatars on a busy background).
- */
-export interface AvatarGroupProps {
-  /** Avatar children. */
-  children: ReactNode;
-
-  /**
-   * Max number of avatars to render visibly. Excess collapses into
-   * a trailing "+N" overflow indicator.
-   * @default 4
-   */
-  max?: number;
-
-  /**
-   * Size applied to every child Avatar (unless the child explicitly
-   * overrides). Propagated via React.cloneElement.
-   * @default 'md'
-   */
-  size?: AvatarSize;
-
-  /**
-   * Negative margin between overlapping avatars. Tighter = more
-   * overlap. Looser = more space.
-   * @default 'sm'
-   */
-  spacing?: 'xs' | 'sm' | 'md';
-
-  /**
-   * Wrap each child avatar with a `ring-2 ring-white` halo for
-   * separation on busy backgrounds.
-   * @default true
-   */
-  withRing?: boolean;
-
-  /** Standard className. */
-  className?: string;
-
-  /** sx escape hatch. */
-  sx?: ClassValue;
-}

package/src/components/Avatar/avatar.variants.ts

@@ -1,194 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * Tailwind-variants recipe for `<Avatar>`.
- *
- * Axes:
- *   - `size`   — 5 steps (xs/sm/md/lg/xl), maps to w/h spacing tokens
- *                + matching text-size for the initials inside.
- *   - `radius` — 7 steps (none/sm/md/lg/xl/2xl/full), same scale as
- *                `<Box rounded>`. `shape` prop in the component maps
- *                semantically: circle → full, rounded → lg, square → none.
- *   - `color`  — 7 intents. Drives the FALLBACK bg+text only (image
- *                surface is independent of color).
- *
- * The `color` × `tone` combo is resolved at render time in
- * `Avatar.tsx` via compound lookup — see the SOFT_TINT and TONE
- * tables there. We do NOT expand the matrix exhaustively in this TV
- * recipe (it would be 7 colors × 10 tones × 5 sizes = 350 rules; the
- * runtime resolver keeps the recipe slim).
- */
-export const avatarVariants = tv({
-  slots: {
-    /** Outer wrapper — sets dimensions + radius + ring + alignment. */
-    root: [
-      'relative inline-flex items-center justify-center shrink-0',
-      'overflow-hidden align-middle',
-      'select-none',
-      // The font weight + leading are baked into root so initials slot
-      // inherits them without an extra class layer.
-      'font-medium leading-none',
-    ],
-    /** `<img>` slot — fills the root, object-cover for crop-to-square. */
-    img: 'block w-full h-full object-cover',
-    /** Initials text slot. */
-    initials: 'uppercase tracking-tight',
-    /** Generic user icon SVG fallback. */
-    icon: 'w-1/2 h-1/2 opacity-80',
-  },
-  variants: {
-    size: {
-      xs: {
-        root: 'w-5 h-5 text-[10px]',
-        initials: '',
-      },
-      sm: {
-        root: 'w-7 h-7 text-xs',
-        initials: '',
-      },
-      md: {
-        root: 'w-9 h-9 text-sm',
-        initials: '',
-      },
-      lg: {
-        root: 'w-12 h-12 text-base',
-        initials: '',
-      },
-      xl: {
-        root: 'w-16 h-16 text-xl',
-        initials: '',
-      },
-    },
-    radius: {
-      none: { root: 'rounded-none' },
-      sm:   { root: 'rounded-sm' },
-      md:   { root: 'rounded-md' },
-      lg:   { root: 'rounded-lg' },
-      xl:   { root: 'rounded-xl' },
-      '2xl':{ root: 'rounded-2xl' },
-      full: { root: 'rounded-full' },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    radius: 'full',
-  },
-});
-
-export type AvatarVariants = VariantProps<typeof avatarVariants>;
-
-/**
- * Default "soft" fallback treatment per intent — what you get when
- * `tone` is omitted. Light tinted bg + dark text for legibility.
- * Neutral row uses no `dark:` because the dashforgePreset() CSS-var
- * swap auto-inverts neutral; color rows keep `dark:` for the
- * intentional palette shift (palette colors don't auto-invert).
- */
-export const AVATAR_SOFT_FALLBACK: Record<string, string> = {
-  neutral:   'bg-neutral-100 text-neutral-900',
-  primary:   'bg-primary-100 text-primary-900 dark:bg-primary-950 dark:text-primary-100',
-  secondary: 'bg-secondary-100 text-secondary-900 dark:bg-secondary-950 dark:text-secondary-100',
-  success:   'bg-success-100 text-success-900 dark:bg-success-950 dark:text-success-100',
-  warning:   'bg-warning-100 text-warning-900 dark:bg-warning-950 dark:text-warning-100',
-  danger:    'bg-danger-100 text-danger-900 dark:bg-danger-950 dark:text-danger-100',
-  info:      'bg-info-100 text-info-900 dark:bg-info-950 dark:text-info-100',
-};
-
-/**
- * Specific-tone resolver — when the consumer sets `tone={500}` (or
- * any other value), this lookup builds the matching bg + text class.
- *
- * Text color logic:
- *   - tones 50-400  → dark text (uses the 900 step)
- *   - tones 500-900 → light text (uses the 50 step)
- *
- * Tailwind JIT requires literal class strings, so we enumerate them
- * explicitly here. The bundle cost is ~70 lines, acceptable for the
- * type-safety win of letting consumers pick any palette shade.
- */
-export const AVATAR_TONE_FALLBACK: Record<string, Record<number, string>> = {
-  neutral: {
-    50:  'bg-neutral-50 text-neutral-900',
-    100: 'bg-neutral-100 text-neutral-900',
-    200: 'bg-neutral-200 text-neutral-900',
-    300: 'bg-neutral-300 text-neutral-900',
-    400: 'bg-neutral-400 text-neutral-900',
-    500: 'bg-neutral-500 text-neutral-50',
-    600: 'bg-neutral-600 text-neutral-50',
-    700: 'bg-neutral-700 text-neutral-50',
-    800: 'bg-neutral-800 text-neutral-50',
-    900: 'bg-neutral-900 text-neutral-50',
-  },
-  primary: {
-    50:  'bg-primary-50 text-primary-900',
-    100: 'bg-primary-100 text-primary-900',
-    200: 'bg-primary-200 text-primary-900',
-    300: 'bg-primary-300 text-primary-900',
-    400: 'bg-primary-400 text-primary-900',
-    500: 'bg-primary-500 text-primary-50',
-    600: 'bg-primary-600 text-primary-50',
-    700: 'bg-primary-700 text-primary-50',
-    800: 'bg-primary-800 text-primary-50',
-    900: 'bg-primary-900 text-primary-50',
-  },
-  secondary: {
-    50:  'bg-secondary-50 text-secondary-900',
-    100: 'bg-secondary-100 text-secondary-900',
-    200: 'bg-secondary-200 text-secondary-900',
-    300: 'bg-secondary-300 text-secondary-900',
-    400: 'bg-secondary-400 text-secondary-900',
-    500: 'bg-secondary-500 text-secondary-50',
-    600: 'bg-secondary-600 text-secondary-50',
-    700: 'bg-secondary-700 text-secondary-50',
-    800: 'bg-secondary-800 text-secondary-50',
-    900: 'bg-secondary-900 text-secondary-50',
-  },
-  success: {
-    50:  'bg-success-50 text-success-900',
-    100: 'bg-success-100 text-success-900',
-    200: 'bg-success-200 text-success-900',
-    300: 'bg-success-300 text-success-900',
-    400: 'bg-success-400 text-success-900',
-    500: 'bg-success-500 text-success-50',
-    600: 'bg-success-600 text-success-50',
-    700: 'bg-success-700 text-success-50',
-    800: 'bg-success-800 text-success-50',
-    900: 'bg-success-900 text-success-50',
-  },
-  warning: {
-    50:  'bg-warning-50 text-warning-900',
-    100: 'bg-warning-100 text-warning-900',
-    200: 'bg-warning-200 text-warning-900',
-    300: 'bg-warning-300 text-warning-900',
-    400: 'bg-warning-400 text-warning-900',
-    500: 'bg-warning-500 text-warning-50',
-    600: 'bg-warning-600 text-warning-50',
-    700: 'bg-warning-700 text-warning-50',
-    800: 'bg-warning-800 text-warning-50',
-    900: 'bg-warning-900 text-warning-50',
-  },
-  danger: {
-    50:  'bg-danger-50 text-danger-900',
-    100: 'bg-danger-100 text-danger-900',
-    200: 'bg-danger-200 text-danger-900',
-    300: 'bg-danger-300 text-danger-900',
-    400: 'bg-danger-400 text-danger-900',
-    500: 'bg-danger-500 text-danger-50',
-    600: 'bg-danger-600 text-danger-50',
-    700: 'bg-danger-700 text-danger-50',
-    800: 'bg-danger-800 text-danger-50',
-    900: 'bg-danger-900 text-danger-50',
-  },
-  info: {
-    50:  'bg-info-50 text-info-900',
-    100: 'bg-info-100 text-info-900',
-    200: 'bg-info-200 text-info-900',
-    300: 'bg-info-300 text-info-900',
-    400: 'bg-info-400 text-info-900',
-    500: 'bg-info-500 text-info-50',
-    600: 'bg-info-600 text-info-50',
-    700: 'bg-info-700 text-info-50',
-    800: 'bg-info-800 text-info-50',
-    900: 'bg-info-900 text-info-50',
-  },
-};