@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapDropdown/Status.md

@@ -1,45 +0,0 @@
-# Migration Status: CapDropdown
-
-**Last Updated**: 2026-01-19 03:33:12
-
-## Migration Steps
-
-- [x] **Step 0**: Setup branch and remote tracking
-- [x] **Step 1**: Migration Prompt 1 (Main migration)
-- [x] **Step 2**: Migration Prompt 2 (Storybook support)
-- [x] **Step 3**: Migration Prompt 3 (Unit tests)
-- [x] **Step 4**: Linting (ESLint)
-- [x] **Step 5**: Pre-build Validation
-- [x] **Step 6**: Build blaze-ui
-- [x] **Step 7**: Visual Testing
-- [x] **Step 8**: CSS Analysis (if mismatches found)
-- [x] **Step 8.5**: CSS Analysis Completed
-- [x] **Step 9**: Git Commit & Push to branch (pre-commit hook will run tests)
-- [x] **Step 10**: Create Pull Request
-
-## Visual Testing Results
-
-**Last Test**: 2026-01-19 03:31:42
-**Maximum Mismatch**: 3.60%
-
-### Mismatched Variants:
-- default:2.04%
-- placement-top:2.35%
-- trigger-click:2.60%
-- disabled:3.60%
-- open (with 2 interactions):3.41%
-- hover-open (with 2 interactions):3.41%
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-19 03:32:15
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapDropdown/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._
-

package/CapDropdown/tests/USE_CASES_ANALYSIS.md

@@ -1,137 +0,0 @@
-# CapDropdown Use Cases Analysis
-
-## Phase 1: Use Cases NOT Fulfilled by Component
-
-Based on analysis of the CapDropdown component implementation and comparison with Ant Design v6 Dropdown API, the following use cases may NOT be fully fulfilled:
-
-### 1. **Menu Item Disabled State**
-- **Status**: ✅ Supported (via Ant Design menu items API)
-- **Note**: Component passes through menu prop, so disabled items should work via `menu.items[].disabled`
-
-### 2. **Submenu/Nested Menus**
-- **Status**: ✅ Supported (via Ant Design menu items API)
-- **Note**: Component passes through menu prop, so nested menus should work via `menu.items[].children`
-
-### 3. **Menu Item Icons**
-- **Status**: ✅ Supported (via Ant Design menu items API)
-- **Note**: Component passes through menu prop, so icons work via `menu.items[].icon`
-
-### 4. **Menu Item Danger State**
-- **Status**: ✅ Supported (via Ant Design menu items API)
-- **Note**: Component passes through menu prop, so danger items work via `menu.items[].danger`
-
-### 5. **Custom Menu Rendering**
-- **Status**: ⚠️ Limited Support
-- **Issue**: Component doesn't expose `menu` render prop or custom menu component support
-- **Workaround**: Can use `menu` prop with `items` array, but cannot use render props pattern
-
-### 6. **Menu Item Click Prevention**
-- **Status**: ✅ Supported
-- **Note**: Can prevent default behavior in `onClick` handler
-
-### 7. **Menu Positioning with getPopupContainer**
-- **Status**: ⚠️ Not Explicitly Supported
-- **Issue**: Component doesn't expose `getPopupContainer` prop from Ant Design Dropdown
-- **Impact**: Menus always render in document.body portal, cannot be scoped to specific container
-- **Workaround**: None - would need to add prop passthrough
-
-### 8. **Menu Destroy on Hide**
-- **Status**: ⚠️ Not Explicitly Supported
-- **Issue**: Component doesn't expose `destroyPopupOnHide` prop from Ant Design Dropdown
-- **Impact**: Menu DOM persists when closed (may affect performance with many dropdowns)
-- **Workaround**: None - would need to add prop passthrough
-
-### 9. **Menu Animation Control**
-- **Status**: ⚠️ Not Explicitly Supported
-- **Issue**: Component doesn't expose `transitionName` or animation-related props
-- **Impact**: Cannot customize menu open/close animations
-- **Workaround**: None - would need to add prop passthrough
-
-### 10. **Menu Arrow Indicator**
-- **Status**: ⚠️ Not Explicitly Supported
-- **Issue**: Component doesn't expose `arrow` prop from Ant Design Dropdown
-- **Impact**: Cannot show/hide arrow indicator on dropdown menu
-- **Workaround**: None - would need to add prop passthrough
-
-### 11. **Menu Overlay Style/ClassName per Part**
-- **Status**: ⚠️ Partially Supported
-- **Issue**: Component only supports `classNames.root` and deprecated `overlayClassName`
-- **Missing**: `classNames.menu` and other v6 classNames API parts
-- **Workaround**: Limited - can only style root overlay, not individual menu parts
-
-### 12. **Menu Auto Adjust Placement**
-- **Status**: ⚠️ Not Explicitly Supported
-- **Issue**: Component doesn't expose `autoAdjustOverflow` prop
-- **Impact**: Menu may overflow viewport if placement doesn't fit
-- **Workaround**: None - would need to add prop passthrough
-
-### 13. **Menu Trigger Element Ref Access**
-- **Status**: ⚠️ Not Explicitly Supported
-- **Issue**: Component doesn't expose ref forwarding for trigger element
-- **Impact**: Cannot programmatically access trigger element
-- **Workaround**: Wrap trigger in ref-accessible element
-
-### 14. **Menu onMenuClick Callback**
-- **Status**: ⚠️ Not Explicitly Supported
-- **Issue**: Component doesn't expose `onMenuClick` prop from Ant Design Dropdown
-- **Impact**: Cannot listen to all menu clicks at dropdown level
-- **Workaround**: Use individual item `onClick` handlers
-
-### 15. **Menu Item Selection State**
-- **Status**: ⚠️ Not Explicitly Supported
-- **Issue**: Component doesn't expose menu selection state management
-- **Impact**: Cannot create selectable menu items (like radio/checkbox menus)
-- **Workaround**: None - would need custom menu implementation
-
-### 16. **Menu Keyboard Navigation**
-- **Status**: ✅ Supported (via Ant Design)
-- **Note**: Ant Design handles keyboard navigation automatically
-
-### 17. **Menu Accessibility (ARIA)**
-- **Status**: ✅ Supported (via Ant Design)
-- **Note**: Ant Design provides ARIA attributes automatically
-
-### 18. **Menu Loading State**
-- **Status**: ⚠️ Not Explicitly Supported
-- **Issue**: Component doesn't expose menu loading state
-- **Impact**: Cannot show loading indicator in menu
-- **Workaround**: Use menu items with loading icons
-
-### 19. **Menu Empty State**
-- **Status**: ⚠️ Not Explicitly Supported
-- **Issue**: Component doesn't expose empty state rendering
-- **Impact**: Empty menu shows nothing (no empty message)
-- **Workaround**: Check menu.items.length and conditionally render
-
-### 20. **Menu Item Tooltips**
-- **Status**: ⚠️ Not Explicitly Supported
-- **Issue**: Component doesn't expose tooltip support for menu items
-- **Impact**: Cannot show tooltips on hover for truncated items
-- **Workaround**: Use menu item `title` attribute or wrap in CapTooltip
-
-## Summary
-
-**Total Use Cases Analyzed**: 20
-**Fully Supported**: 6 (30%)
-**Partially Supported**: 4 (20%)
-**Not Supported**: 10 (50%)
-
-### Recommendations
-
-1. **High Priority**: Add prop passthrough for commonly used Ant Design Dropdown props:
-   - `getPopupContainer`
-   - `destroyPopupOnHide`
-   - `arrow`
-   - `autoAdjustOverflow`
-   - `onMenuClick`
-
-2. **Medium Priority**: Enhance classNames API support:
-   - Add `classNames.menu` support
-   - Support all v6 classNames parts
-
-3. **Low Priority**: Add convenience features:
-   - Menu loading state
-   - Empty state rendering
-   - Ref forwarding for trigger
-
-4. **Documentation**: Document limitations and workarounds for unsupported use cases

package/CapError/README.md

@@ -1,88 +0,0 @@
-# CapError
-
-A simple text component for displaying error and warning messages.
-
-## Migration from cap-ui-library to blaze-ui
-
-### Summary of Changes
-
-- **Styled-components → SCSS Modules**: Converted from styled-components to SCSS modules for better performance and maintainability
-- **TypeScript**: Added full TypeScript support with proper type definitions
-- **Functional Component**: Migrated to functional component with React.forwardRef
-- **Prop Types**: Replaced PropTypes with TypeScript interfaces
-- **Accessibility**: Added ref forwarding for better accessibility support
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | Content to display |
-| `type` | `'error' \| 'warning'` | `'error'` | Type of message (controls color) |
-| `className` | `string` | `''` | Additional CSS classes |
-| `style` | `React.CSSProperties` | `{}` | Inline styles |
-
-### Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-All existing props and behaviors are maintained. The API remains identical.
-
-### Behavioral Changes
-
-- Colors are now defined using SCSS variables for consistency
-- Component now supports ref forwarding
-- TypeScript support provides better type safety
-
-### Usage
-
-#### Basic Usage
-
-```tsx
-import { CapError } from '@capillarytech/blaze-ui';
-
-// Error message (default)
-<CapError>This is an error message</CapError>
-
-// Warning message
-<CapError type="warning">This is a warning message</CapError>
-
-// Inline error message
-<CapError.CapErrorInline>Inline error</CapError.CapErrorInline>
-
-// Inline warning message
-<CapError.CapErrorInline type="warning">Inline warning</CapError.CapErrorInline>
-```
-
-#### With Custom Styling
-
-```tsx
-<CapError className="my-custom-class" style={{ marginTop: '10px' }}>
-  Custom styled error
-</CapError>
-```
-
-#### With Ref
-
-```tsx
-const errorRef = useRef<HTMLDivElement>(null);
-
-<CapError ref={errorRef}>Error with ref</CapError>
-```
-
-### Import Examples
-
-```tsx
-// Named import (recommended)
-import { CapError } from '@capillarytech/blaze-ui';
-
-// With types
-import { CapError, CapErrorProps, CapErrorInlineProps } from '@capillarytech/blaze-ui';
-```
-
-## Styling
-
-The component uses two color variables:
-- **Error**: `$cap-red` (#ea213a)
-- **Warning**: `$cap-orange` (#f87d23)
-
-Font size is set to `$font-size-s` (0.857rem / 12px) with a line height of 1.429rem (20px).

package/CapErrorBoundary/CapErrorBoundary-use-cases.md

@@ -1,89 +0,0 @@
-# Test Cases: CapErrorBoundary (Antd v3→v6)
-
-## Role
-Senior frontend engineer documenting ESSENTIAL test cases for Storybook stories and migration validation.
-
-## Input
-- **Component**: CapErrorBoundary
-- **Complexity**: medium (≤20 test cases)
-- **Source**: blaze-ui/components/CapErrorBoundary/
-
----
-
-## Google Sheets Output
-
-**Spreadsheet ID**: `1Xt8l8Q6Hw0cUYV65SlGvGcPnOtzprr0fukDR9UWJ3kg`  
-**Tab**: CapErrorBoundary
-
-### Steps
-1. Check connection: `COMPOSIO_CHECK_ACTIVE_CONNECTION` toolkit="googlesheets"
-2. Create tab: `GOOGLESHEETS_ADD_SHEET`
-   ```json
-   {
-     "spreadsheetId": "1Xt8l8Q6Hw0cUYV65SlGvGcPnOtzprr0fukDR9UWJ3kg",
-     "properties": {
-       "title": "CapErrorBoundary",
-       "gridProperties": {"rowCount": 100, "columnCount": 6}
-     }
-   }
-   ```
-3. Write data: `GOOGLESHEETS_VALUES_UPDATE`
-   ```json
-   {
-     "spreadsheet_id": "1Xt8l8Q6Hw0cUYV65SlGvGcPnOtzprr0fukDR9UWJ3kg",
-     "range": "CapErrorBoundary!A1",
-     "value_input_option": "USER_ENTERED",
-     "values": [
-       ["ID", "Use Case", "Props/Config", "Expected Visual/Behavior", "Priority", "Storybook Story", "Notes"],
-       ["UC-001", "React ErrorBoundary mode: child throws", "children (component that throws), useSlideBox: false/true", "Error boundary catches; fallbackRender runs; errorHandler(error) called; error illustration shows inline or inside CapSlideBox per useSlideBox", "P0", "ReactErrorBoundaryMode", "Core ErrorBoundary behavior"],
-       ["UC-002", "API error boundary mode", "isApiErrorBoundary: true, isApiError: true | false", "When isApiError true: error illustration only. When false: children render. No ErrorBoundary when isApiErrorBoundary", "P0", "ApiErrorBoundaryMode", "Grouped isApiErrorBoundary + isApiError"],
-       ["UC-003", "SlideBox vs inline fallback", "useSlideBox: true | false, slideBoxProps (e.g. className)", "useSlideBox true: fallback in CapSlideBox with show, content, handleClose, slideBoxProps spread. false: inline illustration only", "P0", "SlideBoxVsInline", "Grouped useSlideBox and slideBoxProps"],
-       ["UC-004", "Boolean and config variants", "showIllustrationImage, showAnimation, isExpired, refreshThreshold (e.g. 3, 1, 0)", "Image show/hide; animation class when showAnimation; isExpired or refreshCount >= refreshThreshold sets isRefreshExpired on illustration", "P1", "ConfigVariants", "Grouped boolean/config visual state"],
-       ["UC-005", "Content props (copy and slots)", "refreshText, expiryTitle, refreshTitle, expiryDescription (string or node); prefix, suffix", "All text passed to illustration; prefix/suffix render before/after in same row", "P1", "ContentProps", "Grouped content and prefix/suffix"],
-       ["UC-006", "Refresh interaction and expiry", "onRefreshClick, refreshThreshold, isApiErrorBoundary: false", "Click refresh → onRefreshClick called, refreshCount increments; refreshCount === refreshThreshold → isRefreshExpired; key updates so ErrorBoundary remounts", "P1", "RefreshInteraction", "Grouped click and threshold/remount"],
-       ["UC-007", "SlideBox close interaction", "useSlideBox: true, onCloseSlideBox", "Closing slide box calls onCloseSlideBox; handleClose wired correctly", "P1", "SlideBoxClose", "Single interaction test"],
-       ["UC-008", "Event handlers invoked", "errorHandler, onRefreshClick, onCloseSlideBox", "errorHandler called with error in fallbackRender; onRefreshClick on refresh; onCloseSlideBox when slide box closed", "P1", "EventHandlers", "Grouped all handler invocations"],
-       ["UC-009", "Styling (className and slideBoxProps)", "className, slideBoxProps: { className }", "className on illustration container; slideBoxProps spread to CapSlideBox including className", "P2", "Styling", "Grouped className + slideBoxProps"],
-       ["UC-010", "Default props and minimal usage", "No optional props (or only children)", "Defaults apply; component renders without error", "P1", "DefaultProps", "Sanity with defaults"],
-       ["UC-011", "Edge: refreshThreshold 0 or 1", "refreshThreshold: 0 | 1, trigger refresh", "Expired state after 0 or 1 refresh click; no crash", "P2", "EdgeRefreshThreshold", "Production edge for quick expiry"],
-       ["UC-012", "Edge: children null or valid content", "children: null | valid React node", "null children don't throw; valid children render until throw. API mode: children when isApiError false", "P2", "EdgeChildren", "Grouped empty/valid children"]
-     ]
-     }
-   }
-   ```
-
----
-
-## Use Cases Table
-
-| ID | Use Case | Props/Config | Expected Visual/Behavior | Priority | Storybook Story | Notes |
-|----|----------|---------------|--------------------------|----------|-----------------|--------|
-| UC-001 | React ErrorBoundary mode: child throws | children (component that throws), useSlideBox: false/true | Error boundary catches; fallbackRender runs; errorHandler(error) called; error illustration shows inline or inside CapSlideBox per useSlideBox | P0 | ReactErrorBoundaryMode | Core ErrorBoundary behavior |
-| UC-002 | API error boundary mode | isApiErrorBoundary: true, isApiError: true \| false | When isApiError true: error illustration only (no ErrorBoundary wrapper). When false: children render. No ErrorBoundary when isApiErrorBoundary | P0 | ApiErrorBoundaryMode | Grouped isApiErrorBoundary + isApiError |
-| UC-003 | SlideBox vs inline fallback | useSlideBox: true \| false, slideBoxProps (e.g. className) | useSlideBox true: fallback in CapSlideBox with show, content, handleClose, slideBoxProps spread. false: fallback is inline illustration only | P0 | SlideBoxVsInline | Grouped useSlideBox and slideBoxProps usage |
-| UC-004 | Boolean and config variants | showIllustrationImage, showAnimation, isExpired, refreshThreshold (e.g. 3, 1, 0) | Illustration shows/hides image; animation class applied when showAnimation; isExpired or refreshCount >= refreshThreshold sets isRefreshExpired on CapErrorStateIllustration | P1 | ConfigVariants | Grouped all boolean/config that affect visual state |
-| UC-005 | Content props (copy and slots) | refreshText, expiryTitle, refreshTitle, expiryDescription (string or node); prefix, suffix | All text/copy passed to CapErrorStateIllustration; prefix/suffix render before/after illustration in same row | P1 | ContentProps | Grouped all content and prefix/suffix |
-| UC-006 | Refresh interaction and expiry | onRefreshClick, refreshThreshold, isApiErrorBoundary: false | Click refresh → onRefreshClick called, refreshCount increments; when refreshCount === refreshThreshold, isRefreshExpired true (expired state). When !isApiErrorBoundary, key updates so ErrorBoundary remounts | P1 | RefreshInteraction | Grouped click behavior and threshold/remount |
-| UC-007 | SlideBox close interaction | useSlideBox: true, onCloseSlideBox | Closing slide box calls onCloseSlideBox; handleClose wired to onCloseSlideBox | P1 | SlideBoxClose | Single interaction test |
-| UC-008 | Event handlers invoked | errorHandler, onRefreshClick, onCloseSlideBox | errorHandler called with error object in fallbackRender; onRefreshClick on refresh; onCloseSlideBox when slide box closed | P1 | EventHandlers | Grouped all handler invocations |
-| UC-009 | Styling (className and slideBoxProps) | className, slideBoxProps: { className } | className on illustration container (CapRow); slideBoxProps spread to CapSlideBox including className for slide box | P2 | Styling | Grouped className + slideBoxProps styling |
-| UC-010 | Default props and minimal usage | No optional props (or only children) | Defaults: empty strings for text, refreshThreshold 3, showIllustrationImage true, showAnimation true, useSlideBox false, isApiErrorBoundary false; component renders without error | P1 | DefaultProps | Sanity with defaults |
-| UC-011 | Edge: refreshThreshold 0 or 1 | refreshThreshold: 0 \| 1, trigger refresh | Expired state (isRefreshExpired) after 0 or 1 refresh click; no crash | P2 | EdgeRefreshThreshold | Production edge for quick expiry |
-| UC-012 | Edge: children null or valid content | children: null \| valid React node | With React ErrorBoundary: null children don’t throw; valid children render until throw. With API mode: children render when isApiError false | P2 | EdgeChildren | Grouped empty/valid children |
-
----
-
-## Summary
-
-- **Total use cases**: 12 (within medium limit of 20).
-- **Grouping**: Config/boolean variants, content props, event handlers, styling, and edge cases each combined into single tests.
-- **P0**: React vs API mode, SlideBox vs inline (3). **P1**: Config, content, refresh/slide interactions, handlers, defaults (6). **P2**: Styling, refreshThreshold edge, children edge (3).
-- **Storybook stories**: ReactErrorBoundaryMode, ApiErrorBoundaryMode, SlideBoxVsInline, ConfigVariants, ContentProps, RefreshInteraction, SlideBoxClose, EventHandlers, Styling, DefaultProps, EdgeRefreshThreshold, EdgeChildren.
-
-## Test Implementation Notes
-
-- Use **React Testing Library** with **Jest**.
-- Prefer `data-testid` for querying (add to component if needed).
-- Clear mocks between tests where applicable.
-- Do **not** mock Cap UI components (e.g. CapErrorStateIllustration, CapSlideBox, CapRow) unless instructed.
-- Avoid relying on getByRole where avoidable; keep tests focused and not overly complex.

package/CapErrorBoundary/README.md

@@ -1,150 +0,0 @@
-# CapErrorBoundary
-
-A wrapper component that provides error boundary functionality for React applications, catching JavaScript errors anywhere in the child component tree and displaying a fallback UI.
-
-## Migration from Ant Design v3 to v6
-
-This component has been migrated from Ant Design v3 to v6 with the following changes:
-
-### Breaking Changes
-
-**None** - The component maintains full backward compatibility. No API changes were made.
-
-### Style Changes
-
-**Approach**: The component now uses CSS Modules with the `styles[classname]` pattern instead of global class names. All styling remains functionally identical.
-
-### Code Improvements
-
-1. **Removed PropTypes**: Replaced with TypeScript types from `types.ts`
-2. **Removed defaultProps**: Converted to default parameters in function arguments
-3. **TypeScript support**: Full TypeScript type definitions with proper types
-4. **CSS Modules**: Using `styles[classname]` pattern for scoped styling
-
-### What Stayed the Same
-
-- All component props and behavior
-- Error boundary functionality (React ErrorBoundary mode)
-- API error boundary mode (`isApiErrorBoundary` prop)
-- Slide box vs inline fallback rendering
-- Refresh threshold and expiry logic
-- Animation support
-- Prefix/suffix content slots
-- All event handlers
-
-### What Changed
-
-- **Removed**: `PropTypes` (replaced with TypeScript types)
-- **Removed**: `defaultProps` (replaced with default parameters)
-- **Updated**: CSS class names now use CSS Modules pattern
-- **Added**: TypeScript type definitions in `types.ts`
-- **Added**: CSS Modules for scoped styling
-
-## Usage
-
-### Basic Usage (React ErrorBoundary Mode)
-
-```tsx
-import CapErrorBoundary from '@capillarytech/blaze-ui/components/CapErrorBoundary';
-
-function App() {
-  return (
-    <CapErrorBoundary>
-      <YourComponent />
-    </CapErrorBoundary>
-  );
-}
-```
-
-### With Custom Error Handler
-
-```tsx
-<CapErrorBoundary
-  errorHandler={(error) => {
-    console.error('Error caught:', error);
-    // Send to error tracking service
-  }}
->
-  <YourComponent />
-</CapErrorBoundary>
-```
-
-### API Error Boundary Mode
-
-```tsx
-<CapErrorBoundary
-  isApiErrorBoundary
-  isApiError={hasApiError}
->
-  <YourComponent />
-</CapErrorBoundary>
-```
-
-### With Slide Box
-
-```tsx
-<CapErrorBoundary
-  useSlideBox
-  onCloseSlideBox={() => {
-    console.log('Slide box closed');
-  }}
->
-  <YourComponent />
-</CapErrorBoundary>
-```
-
-### With Custom Content
-
-```tsx
-<CapErrorBoundary
-  refreshText="Try Again"
-  refreshTitle="Something went wrong"
-  expiryTitle="Refresh limit reached"
-  expiryDescription="Please contact support"
-  prefix={<CustomHeader />}
-  suffix={<CustomFooter />}
->
-  <YourComponent />
-</CapErrorBoundary>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | - | Child components to wrap with error boundary |
-| `className` | `string` | `''` | Additional CSS class name |
-| `isExpired` | `boolean` | `false` | Whether the refresh action has expired |
-| `isApiError` | `boolean` | `false` | Whether to show API error state (only used when `isApiErrorBoundary` is true) |
-| `refreshText` | `string \| React.ReactNode` | `''` | Text to display for refresh action |
-| `expiryTitle` | `string \| React.ReactNode` | `''` | Title to display when refresh has expired |
-| `refreshTitle` | `string \| React.ReactNode` | `''` | Title to display for refresh action |
-| `useSlideBox` | `boolean` | `false` | Whether to display error in a slide box instead of inline |
-| `errorHandler` | `(error: Error) => void` | `() => {}` | Handler called when an error is caught |
-| `slideBoxProps` | `Record<string, unknown>` | `{}` | Props to pass to CapSlideBox when `useSlideBox` is true |
-| `onRefreshClick` | `() => void` | `() => {}` | Handler called when refresh button is clicked |
-| `onCloseSlideBox` | `() => void` | `() => {}` | Handler called when slide box is closed |
-| `refreshThreshold` | `number` | `3` | Number of refresh clicks before showing expired state |
-| `expiryDescription` | `string \| React.ReactNode` | `''` | Description to display when refresh has expired |
-| `isApiErrorBoundary` | `boolean` | `false` | Whether to use API error boundary mode (shows error based on `isApiError` prop instead of catching React errors) |
-| `showIllustrationImage` | `boolean` | `true` | Whether to show illustration image |
-| `prefix` | `string \| React.ReactNode` | `''` | Content to render before the error illustration |
-| `suffix` | `string \| React.ReactNode` | `''` | Content to render after the error illustration |
-| `showAnimation` | `boolean` | `true` | Whether to show animation when error illustration appears |
-
-## Modes
-
-### React ErrorBoundary Mode (Default)
-
-When `isApiErrorBoundary` is `false` (default), the component wraps children with React's `ErrorBoundary` from `react-error-boundary`. This catches JavaScript errors during rendering, in lifecycle methods, and in constructors of the whole tree below.
-
-### API Error Boundary Mode
-
-When `isApiErrorBoundary` is `true`, the component does not use React's ErrorBoundary. Instead, it conditionally renders the error illustration based on the `isApiError` prop. This is useful for handling API errors that don't cause React component errors.
-
-## Notes
-
-- The component uses `react-error-boundary` library for React error boundary functionality
-- When refresh is clicked in React ErrorBoundary mode, the component remounts the ErrorBoundary by updating its key
-- The refresh count is tracked internally and compared against `refreshThreshold` to determine expired state
-- All additional props passed to `CapErrorBoundary` are spread to `CapErrorStateIllustration`