@titan-design/react-ui 0.12.1 → 0.13.0

package/src/components/custom/Workout/MesoStatusCard.test.tsx

@@ -29,11 +29,9 @@ describe('MesoStatusCard', () => {
     it('renders the card, name, and subtitle', () => {
       render(<MesoStatusCard {...baseProps} />)
       expect(screen.getByTestId('meso-status-card')).toBeInTheDocument()
-      expect(screen.getByTestId('meso-status-card-name')).toHaveTextContent(
-        'Hypertrophy Block',
-      )
+      expect(screen.getByTestId('meso-status-card-name')).toHaveTextContent('Hypertrophy Block')
       expect(screen.getByTestId('meso-status-card-subtitle')).toHaveTextContent(
-        'Week 6 of 8 · Upper/Lower',
+        'Week 6 of 8 · Upper/Lower'
       )
     })
 
@@ -44,9 +42,7 @@ describe('MesoStatusCard', () => {
 
     it('renders the status badge with its label', () => {
       render(<MesoStatusCard {...baseProps} />)
-      expect(screen.getByTestId('meso-status-card-badge')).toHaveTextContent(
-        'On Track',
-      )
+      expect(screen.getByTestId('meso-status-card-badge')).toHaveTextContent('On Track')
     })
   })
 
@@ -67,16 +63,14 @@ describe('MesoStatusCard', () => {
             { label: 'Set', value: '1' },
             { label: 'Set', value: '2' },
           ]}
-        />,
+        />
       )
       expect(screen.getAllByTestId('meso-status-card-metric')).toHaveLength(2)
     })
 
     it('does not render the metrics grid when empty', () => {
       render(<MesoStatusCard {...baseProps} metrics={[]} />)
-      expect(
-        screen.queryByTestId('meso-status-card-metrics'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('meso-status-card-metrics')).not.toBeInTheDocument()
     })
   })
 
@@ -84,9 +78,7 @@ describe('MesoStatusCard', () => {
     it('renders one gauge per entry with a marker', () => {
       render(<MesoStatusCard {...baseProps} />)
       expect(screen.getAllByTestId('meso-status-card-gauge')).toHaveLength(2)
-      expect(
-        screen.getAllByTestId('meso-status-card-gauge-marker'),
-      ).toHaveLength(2)
+      expect(screen.getAllByTestId('meso-status-card-gauge-marker')).toHaveLength(2)
     })
 
     it('renders a 50% center line per gauge', () => {
@@ -96,34 +88,19 @@ describe('MesoStatusCard', () => {
     })
 
     it('exposes gauge level via progressbar value', () => {
-      render(
-        <MesoStatusCard
-          {...baseProps}
-          gauges={[{ label: 'Intensity', level: 0.7 }]}
-        />,
-      )
+      render(<MesoStatusCard {...baseProps} gauges={[{ label: 'Intensity', level: 0.7 }]} />)
       const gauge = screen.getByLabelText('Intensity: 70%')
       expect(gauge).toHaveAttribute('role', 'progressbar')
       expect(gauge).toHaveAttribute('aria-valuenow', '70')
     })
 
     it('clamps out-of-range levels', () => {
-      render(
-        <MesoStatusCard
-          {...baseProps}
-          gauges={[{ label: 'Volume', level: 1.7 }]}
-        />,
-      )
+      render(<MesoStatusCard {...baseProps} gauges={[{ label: 'Volume', level: 1.7 }]} />)
       expect(screen.getByLabelText('Volume: 100%')).toBeInTheDocument()
     })
 
     it('guards a non-finite level, rendering 0% instead of NaN%', () => {
-      render(
-        <MesoStatusCard
-          {...baseProps}
-          gauges={[{ label: 'Intensity', level: Number.NaN }]}
-        />,
-      )
+      render(<MesoStatusCard {...baseProps} gauges={[{ label: 'Intensity', level: Number.NaN }]} />)
       expect(screen.getByLabelText('Intensity: 0%')).toBeInTheDocument()
       expect(screen.queryByLabelText('Intensity: NaN%')).not.toBeInTheDocument()
     })
@@ -136,7 +113,7 @@ describe('MesoStatusCard', () => {
             { label: 'Load', level: 0.3 },
             { label: 'Load', level: 0.6 },
           ]}
-        />,
+        />
       )
       expect(screen.getAllByTestId('meso-status-card-gauge')).toHaveLength(2)
     })
@@ -152,9 +129,7 @@ describe('MesoStatusCard', () => {
 
     it('omits the coaching box when not provided', () => {
       render(<MesoStatusCard {...baseProps} coaching={undefined} />)
-      expect(
-        screen.queryByTestId('meso-status-card-coaching'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('meso-status-card-coaching')).not.toBeInTheDocument()
     })
   })
 
@@ -167,9 +142,7 @@ describe('MesoStatusCard', () => {
 
     it('omits the next-target box when not provided', () => {
       render(<MesoStatusCard {...baseProps} nextTarget={undefined} />)
-      expect(
-        screen.queryByTestId('meso-status-card-next-target'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('meso-status-card-next-target')).not.toBeInTheDocument()
     })
   })
 
@@ -177,10 +150,7 @@ describe('MesoStatusCard', () => {
     it('exposes the card as an article with a descriptive label', () => {
       render(<MesoStatusCard {...baseProps} />)
       const article = screen.getByRole('article')
-      expect(article).toHaveAttribute(
-        'aria-label',
-        'Mesocycle status for Hypertrophy Block',
-      )
+      expect(article).toHaveAttribute('aria-label', 'Mesocycle status for Hypertrophy Block')
     })
 
     it('has no accessibility violations', async () => {
@@ -201,7 +171,7 @@ describe('MesoStatusCard', () => {
             coaching={undefined}
             nextTarget={undefined}
           />
-        </>,
+        </>
       )
       expect(await axe(container)).toHaveNoViolations()
     })

package/src/components/custom/Workout/MesoStatusCard.tsx

@@ -9,6 +9,7 @@ import {
   MESO_ACCENT_GRADIENT_DARK,
   MESO_ACCENT_GRADIENT_LIGHT,
 } from '../../../theme/extracted-colors-dataviz'
+import { liftStyle } from '../../../theme/lift'
 
 const t = getSemanticColors('dark')
 
@@ -117,23 +118,17 @@ function getGaugeZoneColor(level: number): string {
 /** Splits `text` into nodes, bolding any segment that exactly matches a highlight. */
 function renderCoachingText(text: string, highlights?: string[]): ReactNode {
   if (!highlights || highlights.length === 0) return text
-  const escaped = highlights
-    .filter(Boolean)
-    .map((h) => h.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+  const escaped = highlights.filter(Boolean).map((h) => h.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
   if (escaped.length === 0) return text
   const regex = new RegExp(`(${escaped.join('|')})`, 'g')
   return text.split(regex).map((part, index) =>
     highlights.includes(part) ? (
-      <Text
-        key={`${part}-${index}`}
-        className="text-text-primary"
-        style={{ fontWeight: '700' }}
-      >
+      <Text key={`${part}-${index}`} className="text-text-primary" style={{ fontWeight: '700' }}>
         {part}
       </Text>
     ) : (
       <Fragment key={`t-${index}`}>{part}</Fragment>
-    ),
+    )
   )
 }
 
@@ -216,10 +211,7 @@ function Gauge({ gauge }: { gauge: MesoStatusGauge }) {
       aria-valuemax={100}
       testID="meso-status-card-gauge"
     >
-      <View
-        className="flex-row items-center justify-between"
-        accessibilityElementsHidden
-      >
+      <View className="flex-row items-center justify-between" accessibilityElementsHidden>
         <Text
           className="text-text-secondary"
           style={{
@@ -281,7 +273,8 @@ function Gauge({ gauge }: { gauge: MesoStatusGauge }) {
             borderRadius: 9999,
             borderWidth: 2,
             backgroundColor: markerColor,
-            boxShadow: '0 0 4px rgba(0,0,0,0.5)',
+            // A knob resting on the gauge: lift, with the ring as its edge.
+            ...liftStyle(1, 'dark', { rim: 0 }),
           }}
           testID="meso-status-card-gauge-marker"
         />
@@ -353,10 +346,7 @@ export function MesoStatusCard({
 
       <View style={{ padding: 14, gap: 14 }} testID="meso-status-card-body">
         <View testID="meso-status-card-header">
-          <View
-            className="flex-row items-center justify-between"
-            style={{ gap: 8 }}
-          >
+          <View className="flex-row items-center justify-between" style={{ gap: 8 }}>
             <Text
               className="text-text-primary"
               style={{
@@ -385,11 +375,7 @@ export function MesoStatusCard({
         </View>
 
         {metrics.length > 0 && (
-          <View
-            className="flex-row flex-wrap"
-            style={{ gap: 8 }}
-            testID="meso-status-card-metrics"
-          >
+          <View className="flex-row flex-wrap" style={{ gap: 8 }} testID="meso-status-card-metrics">
             {metrics.map((metric, index) => (
               <MetricCell key={`${metric.label}-${index}`} metric={metric} />
             ))}

package/src/components/custom/Workout/MetricTiles.stories.tsx

@@ -6,14 +6,15 @@ import { getSemanticColors } from '../../../theme'
 const AMBER = getSemanticColors('dark')['status-warning']
 
 const meta: Meta<typeof MetricTiles> = {
-  title: 'Workout/MetricTiles',
+  title: 'Custom/Workout/MetricTiles',
   component: MetricTiles,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '**Molecule.** An HStack of [Tile](?path=/docs/components-atoms-tile--docs). Used-by ↑ SessionHeader.',
+          '**Molecule.** An HStack of [Tile](?path=/docs/components-atoms-tile--docs). Used-by ↑ SessionHeader.' +
+          ' Composes **HStack** · **Tile**.',
       },
     },
   },

package/src/components/custom/Workout/MuscleGroupChip.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { MuscleGroupChip, type VolumeStatus } from './MuscleGroupChip'
 
 const meta: Meta<typeof MuscleGroupChip> = {
-  title: 'Components/Atoms/MuscleGroupChip',
+  title: 'Custom/Workout/MuscleGroupChip',
   component: MuscleGroupChip,
   tags: ['autodocs'],
   argTypes: {
@@ -82,13 +82,7 @@ export const Tappable: Story = {
   },
 }
 
-const allStatuses: VolumeStatus[] = [
-  'untrained',
-  'behind',
-  'ontrack',
-  'target',
-  'over',
-]
+const allStatuses: VolumeStatus[] = ['untrained', 'behind', 'ontrack', 'target', 'over']
 
 export const AllStatuses: Story = {
   render: () => (

package/src/components/custom/Workout/MuscleGroupChip.test.tsx

@@ -9,23 +9,33 @@ describe('MuscleGroupChip', () => {
     expect(screen.getByText('Chest')).toBeInTheDocument()
   })
 
-  it('renders the colored dot', () => {
+  it('renders the coloured dot under the chip’s own testID', () => {
     render(<MuscleGroupChip name="Quads" volumeStatus="ontrack" />)
     expect(screen.getByTestId('muscle-group-chip-dot')).toBeInTheDocument()
   })
 
+  it('keeps one capsule shape across every status, changing only the dot', () => {
+    // The dot carries status; the capsule stays neutral, so a row of chips reads
+    // as one family. jsdom cannot compute a nativewind class background, so the
+    // fill itself is asserted by the HTML-vs-React parity layer; what is
+    // checkable here is that the status never reaches the capsule element.
+    const { rerender } = render(<MuscleGroupChip name="Quads" volumeStatus="untrained" />)
+    const shape = screen.getByTestId('muscle-group-chip').getAttribute('class')
+    for (const status of ['behind', 'ontrack', 'target', 'over'] as const) {
+      rerender(<MuscleGroupChip name="Quads" volumeStatus={status} />)
+      expect(screen.getByTestId('muscle-group-chip').getAttribute('class'), status).toBe(shape)
+      expect(screen.getByTestId('muscle-group-chip-dot')).toBeInTheDocument()
+    }
+  })
+
   it('sets accessibility label with name and status', () => {
     render(<MuscleGroupChip name="Back" volumeStatus="behind" />)
-    expect(
-      screen.getByLabelText('Back, volume status: behind'),
-    ).toBeInTheDocument()
+    expect(screen.getByLabelText('Back, volume status: behind')).toBeInTheDocument()
   })
 
   it('sets accessibility label with no status when omitted', () => {
     render(<MuscleGroupChip name="Biceps" />)
-    expect(
-      screen.getByLabelText('Biceps, volume status: no status'),
-    ).toBeInTheDocument()
+    expect(screen.getByLabelText('Biceps, volume status: no status')).toBeInTheDocument()
   })
 
   it('wraps in Pressable when onPress is provided', () => {
@@ -38,22 +48,12 @@ describe('MuscleGroupChip', () => {
 
   it('does not render Pressable when onPress is omitted', () => {
     render(<MuscleGroupChip name="Chest" />)
-    expect(
-      screen.queryByTestId('muscle-group-chip-pressable'),
-    ).not.toBeInTheDocument()
+    expect(screen.queryByTestId('muscle-group-chip-pressable')).not.toBeInTheDocument()
   })
 
   it('renders all volume status variants without error', () => {
-    const statuses = [
-      'untrained',
-      'behind',
-      'ontrack',
-      'target',
-      'over',
-    ] as const
-    const { rerender } = render(
-      <MuscleGroupChip name="Test" volumeStatus="untrained" />,
-    )
+    const statuses = ['untrained', 'behind', 'ontrack', 'target', 'over'] as const
+    const { rerender } = render(<MuscleGroupChip name="Test" volumeStatus="untrained" />)
     for (const status of statuses) {
       rerender(<MuscleGroupChip name="Test" volumeStatus={status} />)
       expect(screen.getByText('Test')).toBeInTheDocument()
@@ -63,28 +63,20 @@ describe('MuscleGroupChip', () => {
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const { container } = render(
-        <MuscleGroupChip
-          name="Chest"
-          volumeStatus="ontrack"
-          onPress={() => {}}
-        />,
+        <MuscleGroupChip name="Chest" volumeStatus="ontrack" onPress={() => {}} />
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
 
     it('has no accessibility violations as static chip', async () => {
-      const { container } = render(
-        <MuscleGroupChip name="Quads" volumeStatus="behind" />,
-      )
+      const { container } = render(<MuscleGroupChip name="Quads" volumeStatus="behind" />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
 
     it('pressable has correct accessibility label', () => {
-      render(
-        <MuscleGroupChip name="Back" volumeStatus="target" onPress={() => {}} />,
-      )
+      render(<MuscleGroupChip name="Back" volumeStatus="target" onPress={() => {}} />)
       expect(screen.getByLabelText('Back, volume status: target')).toBeInTheDocument()
     })
   })

package/src/components/custom/Workout/MuscleGroupChip.tsx

@@ -1,9 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, Pressable, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-import { greyRamp } from '../../../theme/tokens/primitives'
-
-const t = getSemanticColors('dark')
+import { type ViewProps } from 'react-native'
+import { Pill, type PillTone } from '../../ui/pill'
 
 // Aliases for spec compatibility: under=behind, maintenance=ontrack, productive=target
 export type VolumeStatus = 'untrained' | 'behind' | 'ontrack' | 'target' | 'over'
@@ -15,14 +12,18 @@ export interface MuscleGroupChipProps extends ViewProps {
   className?: string
 }
 
-const dotColorMap: Record<VolumeStatus, string> = {
-  untrained: greyRamp[900],
-  behind: t['brand-secondary'],
-  ontrack: t['status-success'],
-  target: t['brand-primary'],
-  over: t['status-error'],
+const dotTone: Record<VolumeStatus, PillTone> = {
+  untrained: 'neutral',
+  behind: 'brand-secondary',
+  ontrack: 'success',
+  target: 'brand',
+  over: 'error',
 }
 
+/**
+ * MuscleGroupChip — a `Pill` preset that labels a muscle group with a
+ * volume-status dot. The dot tone is the pill's tone; the capsule stays neutral.
+ */
 export function MuscleGroupChip({
   name,
   volumeStatus,
@@ -30,65 +31,25 @@ export function MuscleGroupChip({
   className,
   ...props
 }: MuscleGroupChipProps) {
-  const dotColor = volumeStatus
-    ? dotColorMap[volumeStatus]
-    : greyRamp[900]
-
   const statusLabel = volumeStatus ?? 'no status'
 
-  const content = (
-    <View
-      className={['bg-surface-raised border-hairline', className].filter(Boolean).join(' ')}
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderRadius: 9999,
-        paddingHorizontal: 9,
-        paddingVertical: 3,
-        borderWidth: 1,
-      }}
-      accessibilityLabel={onPress ? undefined : `${name}, volume status: ${statusLabel}`}
-      testID="muscle-group-chip"
+  return (
+    <Pill
+      tone="neutral"
+      dotTone={volumeStatus ? dotTone[volumeStatus] : 'neutral'}
+      variant="subtle"
+      size="md"
+      leading="dot"
+      onPress={onPress}
+      // Borderless, like every other tone: the tinted fill carries the capsule.
+      // `md` keeps the chip at its shipped ~24px height with 12px text.
+      className={['gap-1.5', className].filter(Boolean).join(' ')}
+      textClassName="font-sans font-medium text-text-secondary"
+      accessibilityLabel={`${name}, volume status: ${statusLabel}`}
+      testID={onPress ? 'muscle-group-chip-pressable' : 'muscle-group-chip'}
       {...props}
     >
-      <View
-        style={{
-          width: 6,
-          height: 6,
-          borderRadius: 9999,
-          marginRight: 5,
-          flexShrink: 0,
-          backgroundColor: dotColor,
-        }}
-        accessibilityElementsHidden
-        testID="muscle-group-chip-dot"
-      />
-      <Text
-        className="text-text-secondary"
-        style={{
-          fontFamily: 'Inter, sans-serif',
-          fontWeight: '500',
-          fontSize: 11,
-        }}
-        accessibilityElementsHidden
-      >
-        {name}
-      </Text>
-    </View>
+      {name}
+    </Pill>
   )
-
-  if (onPress) {
-    return (
-      <Pressable
-        onPress={onPress}
-        accessibilityRole="button"
-        accessibilityLabel={`${name}, volume status: ${statusLabel}`}
-        testID="muscle-group-chip-pressable"
-      >
-        {content}
-      </Pressable>
-    )
-  }
-
-  return content
 }

package/src/components/custom/Workout/PlaceholderStrip.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { PlaceholderStrip } from './PlaceholderStrip'
 
 const meta: Meta<typeof PlaceholderStrip> = {
-  title: 'Workout/PlaceholderStrip',
+  title: 'Custom/Workout/PlaceholderStrip',
   component: PlaceholderStrip,
   tags: ['autodocs'],
   argTypes: {

package/src/components/custom/Workout/PlaceholderStrip.test.tsx

@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { PlaceholderStrip } from './PlaceholderStrip'
+import { resolveColor } from '../../../theme/resolve-color'
 
 describe('PlaceholderStrip', () => {
   it('renders a strip element', () => {
@@ -11,9 +12,7 @@ describe('PlaceholderStrip', () => {
 
   it('sets accessibility label', () => {
     render(<PlaceholderStrip />)
-    expect(
-      screen.getByLabelText('Planned set, not yet completed'),
-    ).toBeInTheDocument()
+    expect(screen.getByLabelText('Planned set, not yet completed')).toBeInTheDocument()
   })
 
   it('applies fixed width when provided', () => {
@@ -28,7 +27,7 @@ describe('PlaceholderStrip', () => {
         <PlaceholderStrip />
         <PlaceholderStrip />
         <PlaceholderStrip />
-      </>,
+      </>
     )
     const strips = screen.getAllByTestId('placeholder-strip')
     expect(strips).toHaveLength(3)
@@ -39,6 +38,18 @@ describe('PlaceholderStrip', () => {
     expect(screen.queryAllByTestId('placeholder-segment')).toHaveLength(0)
   })
 
+  it('fills both modes from the border-prominent token, not a pinned hex', () => {
+    const rail = resolveColor('border-prominent')
+    const { unmount } = render(<PlaceholderStrip />)
+    expect(screen.getByTestId('placeholder-strip')).toHaveStyle({ backgroundColor: rail })
+    unmount()
+
+    render(<PlaceholderStrip mode="segmented" segments={2} />)
+    for (const segment of screen.getAllByTestId('placeholder-segment')) {
+      expect(segment).toHaveStyle({ backgroundColor: rail })
+    }
+  })
+
   describe('segmented mode', () => {
     it('renders segments when mode is segmented', () => {
       render(<PlaceholderStrip mode="segmented" segments={5} />)
@@ -59,9 +70,7 @@ describe('PlaceholderStrip', () => {
 
     it('sets accessibility label in segmented mode', () => {
       render(<PlaceholderStrip mode="segmented" segments={3} />)
-      expect(
-        screen.getByLabelText('Planned set, not yet completed'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Planned set, not yet completed')).toBeInTheDocument()
     })
   })
 
@@ -73,9 +82,7 @@ describe('PlaceholderStrip', () => {
     })
 
     it('has no accessibility violations in segmented mode', async () => {
-      const { container } = render(
-        <PlaceholderStrip mode="segmented" segments={4} />,
-      )
+      const { container } = render(<PlaceholderStrip mode="segmented" segments={4} />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/custom/Workout/PlaceholderStrip.tsx

@@ -1,7 +1,12 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
-import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { resolveColor } from '../../../theme/resolve-color'
+
+// The planned-set rail is a visible hairline rule, not a plane, so it takes the
+// one border token meant to be seen outright. It used to be a `#3A3A3A` pin in
+// `workout-tokens`, which sat between two ramp steps and never flipped to light.
+const RAIL_TOKEN = 'border-prominent' as const
 
 export interface PlaceholderStripProps extends ViewProps {
   width?: number | string
@@ -23,7 +28,7 @@ function SingleStrip({
       style={[
         {
           height: 3,
-          backgroundColor: WORKOUT_TOKENS.placeholder.fill,
+          backgroundColor: resolveColor(RAIL_TOKEN),
           borderRadius: 2,
           opacity: 0.5,
         },
@@ -61,7 +66,7 @@ function SegmentedStrip({
           style={{
             flex: 1,
             height: 3,
-            backgroundColor: WORKOUT_TOKENS.placeholder.fill,
+            backgroundColor: resolveColor(RAIL_TOKEN),
             borderRadius: 1,
             minWidth: 4,
           }}
@@ -73,11 +78,7 @@ function SegmentedStrip({
   )
 }
 
-export function PlaceholderStrip({
-  mode = 'single',
-  segments,
-  ...props
-}: PlaceholderStripProps) {
+export function PlaceholderStrip({ mode = 'single', segments, ...props }: PlaceholderStripProps) {
   if (mode === 'segmented') {
     return <SegmentedStrip segments={segments} {...props} />
   }

package/src/components/custom/Workout/PrBadge.stories.tsx

@@ -3,8 +3,9 @@ import { View } from 'react-native'
 import { PrBadge } from './PrBadge'
 
 const meta: Meta<typeof PrBadge> = {
-  title: 'Components/Atoms/PrBadge',
+  title: 'Custom/Workout/PrBadge',
   component: PrBadge,
+  parameters: { docs: { description: { component: 'Composes **Icons** · **BaseBadge**.' } } },
   tags: ['autodocs'],
   argTypes: {
     type: {

package/src/components/custom/Workout/PrBadge.test.tsx

@@ -26,9 +26,7 @@ describe('PrBadge', () => {
 
   it('sets accessibility label with resolved label', () => {
     render(<PrBadge animate={false} />)
-    expect(
-      screen.getByLabelText('Personal record: PR e1RM'),
-    ).toBeInTheDocument()
+    expect(screen.getByLabelText('Personal record: PR e1RM')).toBeInTheDocument()
   })
 
   describe('type prop', () => {
@@ -66,9 +64,7 @@ describe('PrBadge', () => {
 
     it('sets accessibility label with custom label', () => {
       render(<PrBadge label="PR 5RM" animate={false} />)
-      expect(
-        screen.getByLabelText('Personal record: PR 5RM'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Personal record: PR 5RM')).toBeInTheDocument()
     })
   })
 
@@ -89,9 +85,7 @@ describe('PrBadge', () => {
 
     it('has correct accessibility label in compact mode', () => {
       render(<PrBadge compact animate={false} />)
-      expect(
-        screen.getByLabelText('Personal record: PR e1RM'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Personal record: PR e1RM')).toBeInTheDocument()
     })
   })