@capillarytech/blaze-ui 5.20.0 → 5.22.0

package/CapBlock/README.md

@@ -1,175 +0,0 @@
-# CapBlock
-
-A collapsible container component with optional delete functionality. Features a colored left border and can display content that can be expanded or collapsed.
-
-## Migration from cap-ui-library
-
-This component has been migrated from `@capillarytech/cap-ui-library` to `@capillarytech/blaze-ui` with the following changes:
-
-### Breaking Changes
-
-**No breaking changes** - The API remains fully compatible with cap-ui-library v8.x.
-
-### Improvements
-
-1. **TypeScript Support**: Full TypeScript type definitions for all props
-2. **SCSS Modules**: Styles converted from styled-components to SCSS modules
-3. **Better Testing**: Tests updated to use @testing-library/react
-4. **Storybook**: Comprehensive Storybook stories added
-
-## Installation
-
-```tsx
-import CapBlock from '@capillarytech/blaze-ui/CapBlock';
-// Or
-import { CapBlock } from '@capillarytech/blaze-ui';
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `width` | `string` | `'800px'` | Width of the block container |
-| `borderLeftColor` | `string` | `CAP_SECONDARY.base` | Color of the left border |
-| `isDeleteEnabled` | `boolean` | `false` | Whether the delete icon is enabled |
-| `deleteCallback` | `() => void` | - | Callback function when delete icon is clicked |
-| `isCollapseEnabled` | `boolean` | `false` | Whether the collapse/expand icon is enabled |
-| `componentName` | `string` | `'path'` | Name used in tooltip messages |
-| `children` | `ReactNode` | - | Content to render inside the block |
-| `className` | `string` | - | Additional CSS class name |
-| `deleteBlockMsg` | `string` | `''` | Message for delete tooltip (from translations) |
-| `collapseBlockMsg` | `string` | `''` | Message for collapse tooltip (from translations) |
-| `expandBlockMsg` | `string` | `''` | Message for expand tooltip (from translations) |
-| `pathBlockText` | `ReactNode` | - | Additional content at the bottom (always visible) |
-
-## Usage Examples
-
-### Basic Usage
-
-```tsx
-import CapBlock from '@capillarytech/blaze-ui/CapBlock';
-
-<CapBlock>
-  <p>This is the content inside the block.</p>
-</CapBlock>
-```
-
-### With Delete Feature
-
-```tsx
-<CapBlock
-  isDeleteEnabled
-  deleteCallback={() => console.log('Delete clicked')}
-  deleteBlockMsg="Delete"
-  componentName="section"
->
-  <p>Click the delete icon to remove this block.</p>
-</CapBlock>
-```
-
-### With Collapse Feature
-
-```tsx
-<CapBlock
-  isCollapseEnabled
-  collapseBlockMsg="Collapse"
-  expandBlockMsg="Expand"
-  componentName="section"
->
-  <p>This content can be collapsed and expanded.</p>
-</CapBlock>
-```
-
-### Custom Styling
-
-```tsx
-<CapBlock
-  width="600px"
-  borderLeftColor="#47af46"
-  className="custom-block"
->
-  <p>Custom width and border color.</p>
-</CapBlock>
-```
-
-### With All Features
-
-```tsx
-<CapBlock
-  width="700px"
-  borderLeftColor="#2466ea"
-  isDeleteEnabled
-  isCollapseEnabled
-  deleteCallback={() => handleDelete()}
-  deleteBlockMsg="Delete"
-  collapseBlockMsg="Collapse"
-  expandBlockMsg="Expand"
-  componentName="user settings"
-  pathBlockText={<span>Updated: Today</span>}
->
-  <h4>User Settings</h4>
-  <p>Configure your preferences here.</p>
-</CapBlock>
-```
-
-### Nested Blocks
-
-```tsx
-<CapBlock width="700px" borderLeftColor="#2466ea">
-  <h4>Outer Block</h4>
-  <CapBlock width="600px" borderLeftColor="#47af46">
-    <p>Inner Block Content</p>
-  </CapBlock>
-</CapBlock>
-```
-
-## Internationalization
-
-The component uses `LocaleHoc` for internationalization. The following props support translated strings:
-
-- `deleteBlockMsg` - Message shown in delete tooltip
-- `collapseBlockMsg` - Message shown in collapse tooltip
-- `expandBlockMsg` - Message shown in expand tooltip
-
-Example with react-intl:
-
-```tsx
-import { useIntl } from 'react-intl';
-
-const MyComponent = () => {
-  const intl = useIntl();
-
-  return (
-    <CapBlock
-      isCollapseEnabled
-      deleteBlockMsg={intl.formatMessage({ id: 'delete.block' })}
-      collapseBlockMsg={intl.formatMessage({ id: 'collapse.block' })}
-      expandBlockMsg={intl.formatMessage({ id: 'expand.block' })}
-    >
-      Content
-    </CapBlock>
-  );
-};
-```
-
-## TypeScript Types
-
-```tsx
-import type { CapBlockProps } from '@capillarytech/blaze-ui/CapBlock';
-```
-
-## Styling
-
-The component uses SCSS modules with the following CSS class prefix: `cap-block`.
-
-Custom styling can be applied via:
-- `className` prop
-- CSS overrides targeting `.cap-block` class
-- Inline `width` and `borderLeftColor` are applied via style attribute
-
-### CSS Variables Used
-
-The component uses these CSS variables from the design system:
-- Border color: `$CAP_G07` (grey border)
-- Delete background: `$CAP_COLOR_05` (light red)
-- Collapse background: `$CAP_G06` (light grey)

package/CapBorderedBox/Status.md

@@ -1,40 +0,0 @@
-# Migration Status: CapBorderedBox
-
-**Last Updated**: 2026-01-31 19:26:57
-
-## 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**: Migration Prompt 4 (Visual test cases)
-- [x] **Step 5**: Linting (ESLint)
-- [x] **Step 6**: Pre-build Validation
-- [x] **Step 7**: Build blaze-ui
-- [x] **Step 8**: Visual Testing
-- [x] **Step 9**: CSS Analysis (if mismatches found)
-- [x] **Step 9.5**: CSS Analysis Completed
-- [x] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
-- [x] **Step 11**: Create Pull Request
-
-## Visual Testing Results
-
-**Last Test**: 2026-01-31 19:26:57
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-25 04:02:29
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapBorderedBox/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._

package/CapCSVFileUploader/README.md

@@ -1,124 +0,0 @@
-# CapCSVFileUploader
-
-CapCSVFileUploader component migrated from Ant Design v3 to v6.
-
-## Migration Summary
-
-This component has been migrated from `cap-ui-library` to `blaze-ui` with the following changes:
-
-- Converted from JavaScript class component to TypeScript functional component
-- Uses SCSS modules for styling (imported as `import * as styles from './styles.scss'`)
-- Removed PropTypes and defaultProps (replaced with TypeScript types and default parameters)
-- Replaced `UNSAFE_componentWillReceiveProps` with `useEffect` hooks
-- Maintained backward compatibility with the existing API
-
-## Breaking Changes
-
-**No breaking changes** - The component maintains **100% backward compatibility** with existing code. All props work exactly as before.
-
-## Deprecated Props
-
-**No deprecated props** - This component does not use Ant Design components directly. It uses:
-- Native HTML `<input type="file">` element
-- `CapTag` component (which wraps Ant Design Tag, but that's handled in CapTag migration)
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `fileName` | `string` | `''` | The name of the uploaded file |
-| `errorMessage` | `string` | - | Error message to display |
-| `numberOfEntriesMessage` | `string` | `'entries'` | Message text for number of entries |
-| `sampleCsvFilePath` | `string` | - | Path to sample CSV file for download |
-| `onUpload` | `(event: React.ChangeEvent<HTMLInputElement>) => void` | - | Callback when file is uploaded |
-| `showNumberOfEntries` | `boolean` | `true` | Whether to show the number of entries |
-| `onChipClose` | `() => void` | - | Callback when file chip is closed |
-| `checkFileSize` | `boolean` | `true` | Whether to check file size (5MB limit) |
-| `getNumberOfEntries` | `(count: number) => void` | - | Callback with the number of entries found |
-| `lineCount` | `number` | `0` | Initial line count |
-| `sampleCsvName` | `string` | `'Sample.csv'` | Name of the sample CSV file link |
-| `chooseFileBtnTxt` | `string` | `'Choose file'` | Text for the choose file button |
-| `fileSizeExceededTxt` | `string` | `'File size is greater than 5 MB'` | Error message when file size exceeds limit |
-| `csvFileErrorTxt` | `string` | `'Please upload a CSV file'` | Error message for non-CSV files |
-| `csvFileNoEntryTxt` | `string` | `'Please upload a file with atleast one entry'` | Error message for empty CSV files |
-| `isStoreFilter` | `boolean` | `false` | Whether this is used for store filtering |
-| `reuploadFileMsg` | `string` | `'Reupload file'` | Message for reupload button |
-| `storeUploadInfo` | `StoreUploadInfo[]` | - | Store upload information array |
-| `referenceId` | `string` | - | Reference ID for store upload tracking |
-| `failedStorePathIdentifier` | `string` | - | Identifier for failed store path |
-| `disabled` | `boolean` | - | Whether the uploader is disabled |
-| `storeSource` | `string` | - | Source of the store data |
-
-## Usage Examples
-
-### Basic Usage
-
-```tsx
-import { CapCSVFileUploader } from '@capillarytech/blaze-ui';
-
-function FileUpload() {
-  const handleUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    console.log('File uploaded:', event.target.files?.[0]);
-  };
-
-  return (
-    <CapCSVFileUploader
-      onUpload={handleUpload}
-      sampleCsvFilePath="/path/to/sample.csv"
-    />
-  );
-}
-```
-
-### With Custom Messages
-
-```tsx
-<CapCSVFileUploader
-  onUpload={handleUpload}
-  chooseFileBtnTxt="Select CSV File"
-  csvFileErrorTxt="Only CSV files are allowed"
-  fileSizeExceededTxt="File must be less than 5MB"
-/>
-```
-
-### Store Filter Usage
-
-```tsx
-<CapCSVFileUploader
-  onUpload={handleUpload}
-  isStoreFilter={true}
-  storeUploadInfo={storeUploadInfo}
-  referenceId={referenceId}
-  failedStorePathIdentifier={failedStorePathIdentifier}
-  storeSource={storeSource}
-  disabled={disabled}
-/>
-```
-
-## Code Improvements
-
-1. **TypeScript support**: Full TypeScript definitions with proper prop types
-2. **Functional component**: Converted from class component to functional component with hooks
-3. **Modern React patterns**: Uses `useState` and `useEffect` instead of class state and lifecycle methods
-4. **Removed deprecated APIs**: Replaced `UNSAFE_componentWillReceiveProps` with `useEffect` hooks
-5. **SCSS modules**: Uses SCSS modules for styling with proper class name handling
-
-## What Stayed the Same
-
-- All component props and behavior
-- DOM structure and component hierarchy
-- Conditional rendering logic
-- File validation logic (CSV check, file size check)
-- Entry counting logic
-- Error message display logic
-- API surface area (backward compatible)
-
-## What Changed
-
-- **Removed**: `PropTypes` (replaced with TypeScript types)
-- **Removed**: `defaultProps` (replaced with default parameters)
-- **Removed**: Class component (replaced with functional component)
-- **Removed**: `UNSAFE_componentWillReceiveProps` (replaced with `useEffect`)
-- **Added**: TypeScript type definitions in `types.ts`
-- **Added**: SCSS module imports (`import * as styles`)
-- **Updated**: State management to use `useState` hooks

package/CapCSVFileUploader/Status.md

@@ -1,47 +0,0 @@
-# Migration Status: CapCSVFileUploader
-
-**Last Updated**: 2026-02-22 10:19:33
-
-## Migration Steps
-
-- [x] **Step 0**: Setup branch and remote tracking
-- [] **Step 1**: Migration Prompt 1 (Main migration)
-- [x] **Step 1.5**: Export component in blaze-ui/components/index.ts
-- [] **Step 2**: Migration Prompt 2 (Storybook support)
-- [] **Step 2.5**: Verify deprecated props and prop changes (REQUIRED - enforced)
-- [] **Step 3**: Migration Prompt 3 (Unit tests)
-- [] **Step 4**: Migration Prompt 4 (Visual test cases)
-- [] **Step 5**: Linting (ESLint)
-- [] **Step 6**: Pre-build Validation
-- [x] **Step 7**: Build blaze-ui
-- [ ] **Step 8**: Visual Testing
-- [ ] **Step 8.1**: Pre-visual-test check (agent verification)
-- [ ] **Step 8.2**: Visual comparison
-- [ ] **Step 8.3**: Visual diff analysis (agent analysis)
-- [ ] **Step 9**: CSS Analysis (if mismatches found)
-- [ ] **Step 9.5**: CSS Analysis Completed
-- [ ] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
-- [ ] **Step 11**: Create Pull Request
-
-## Deprecated Props Verification
-
-_No deprecated props verification results yet._
-
-**Note**: Step 2.5 is REQUIRED and enforced. 
-- Focus: **Ant Design component prop changes** (e.g., Dropdown, Input, Alert, Tooltip, etc.)
-- Reference: MIGRATION_CHANGELOG_TEMPLATE.md for format, ANTD_V6_MIGRATION.md for Ant Design deprecated APIs
-- Skip: If original component doesn't exist in cap-ui-library
-- All deprecated Ant Design props and prop changes must be documented before proceeding.
-
-## Visual Testing Results
-
-_No visual testing results yet._
-
-## CSS Fixes Applied
-
-_No CSS fixes applied yet._
-
-## Notes
-
-_No notes yet._
-

package/CapCard/README.md

@@ -1,85 +0,0 @@
-# CapCard
-
-Extended version of Ant Design Card component with Capillary styling.
-
-## Migration from cap-ui-library
-
-### Summary
-
-CapCard has been migrated from `@capillarytech/cap-ui-library` to `@capillarytech/blaze-ui` with the following changes:
-
-- **Ant Design v3 → v6**: Updated to use `antd-v5` (Ant Design v6)
-- **TypeScript**: Converted from PropTypes to TypeScript interfaces
-- **SCSS Modules**: Converted from styled-components to SCSS modules
-- **Functional Component**: Converted from class component to functional component with hooks
-
-### Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-The component maintains full backward compatibility with the original cap-ui-library implementation. All props from Ant Design Card component are supported.
-
-### Props
-
-CapCard accepts all props from Ant Design's [Card component](https://ant.design/components/card) plus:
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | - | Additional CSS class name |
-| `children` | `React.ReactNode` | - | Card content |
-
-### Usage
-
-```tsx
-import { CapCard } from '@capillarytech/blaze-ui';
-
-// Basic usage
-<CapCard title="Card Title">
-  <p>Card content</p>
-</CapCard>
-
-// With custom className
-<CapCard className="custom-card" title="Card Title">
-  <p>Card content</p>
-</CapCard>
-
-// With all Ant Design Card props
-<CapCard
-  title="Card Title"
-  extra={<a href="#">More</a>}
-  hoverable
-  bordered={false}
->
-  <p>Card content</p>
-</CapCard>
-```
-
-### Import Examples
-
-```tsx
-// Default import
-import CapCard from '@capillarytech/blaze-ui/components/CapCard';
-
-// Named import
-import { CapCard } from '@capillarytech/blaze-ui';
-
-// Type import
-import type { CapCardProps } from '@capillarytech/blaze-ui';
-```
-
-### Styling
-
-The component uses SCSS modules with the following classes:
-
-- `.cap-card-wrapper`: Wrapper div around the Card component
-- `.cap-card-v2`: Applied to the Ant Design Card component
-
-Custom styling can be applied via the `className` prop or by overriding the SCSS classes.
-
-### Differences from Source Component
-
-1. **Wrapper Element**: The migrated component wraps the Card in a `div` with class `cap-card-wrapper` for styling purposes. This was added to maintain consistent styling structure.
-
-2. **Font Weight**: The card head now has `font-weight-medium` applied via SCSS, which provides consistent typography across cards.
-
-3. **Border Radius**: Uses SCSS variable `$radius-04` (0.286rem / 4px) instead of hardcoded pixel values.

package/CapCard/Status.md

@@ -1,41 +0,0 @@
-# Migration Status: CapCard
-
-**Last Updated**: 2026-01-19 02:27:48
-
-## 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 8.9**: Run Tests & Fix Failures
-- [ ] **Step 9**: Git Commit & Push to branch
-- [ ] **Step 10**: Create Pull Request
-
-## Visual Testing Results
-
-**Last Test**: 2026-01-19 02:27:47
-**Maximum Mismatch**: 93.89%
-
-### Mismatched Variants:
-- ✅ All variants match perfectly!
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-19 02:27:47
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapCard/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._
-

package/CapCardBox/README.md

@@ -1,169 +0,0 @@
-# CapCardBox
-
-A card component with optional avatar display and custom border styling.
-
-## Migration from cap-ui-library
-
-### Summary
-
-CapCardBox has been migrated from `@capillarytech/cap-ui-library` to `@capillarytech/blaze-ui` with the following changes:
-
-- **Ant Design v3 → v6**: Updated to use `antd-v5` (Ant Design v6)
-- **TypeScript**: Converted from PropTypes to TypeScript interfaces
-- **SCSS Modules**: Converted from styled-components to SCSS modules
-- **Functional Component**: Converted from class component to functional component
-
-### Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-The component maintains full backward compatibility with the original cap-ui-library implementation. All props from Ant Design Card component are supported.
-
-### Deprecated Props
-
-The following Ant Design Card component props are deprecated but still supported for backward compatibility:
-
-#### `bordered` (deprecated)
-
-- **Status:** Deprecated (Ant Design Card component)
-- **Replacement:** Use `variant` prop instead
-- **Migration:** Replace `bordered={false}` with `variant="borderless"` or `bordered={true}` with `variant="outlined"`
-- **Removal:** Will be removed in next major version
-
-**Example:**
-
-```tsx
-// ❌ Deprecated
-<CapCardBox bordered={false} content="Card content" />
-
-// ✅ Recommended
-<CapCardBox variant="borderless" content="Card content" />
-```
-
-#### `headStyle` (deprecated)
-
-- **Status:** Deprecated (Ant Design Card component)
-- **Replacement:** Use `styles.header` prop instead
-- **Migration:** Replace `headStyle={{ ... }}` with `styles={{ header: { ... } }}`
-- **Removal:** Will be removed in next major version
-
-**Example:**
-
-```tsx
-// ❌ Deprecated
-<CapCardBox headStyle={{ backgroundColor: 'blue' }} title="Card Title" content="Card content" />
-
-// ✅ Recommended
-<CapCardBox styles={{ header: { backgroundColor: 'blue' } }} title="Card Title" content="Card content" />
-```
-
-#### `bodyStyle` (deprecated)
-
-- **Status:** Deprecated (Ant Design Card component)
-- **Replacement:** Use `styles.body` prop instead
-- **Migration:** Replace `bodyStyle={{ ... }}` with `styles={{ body: { ... } }}`
-- **Removal:** Will be removed in next major version
-
-**Example:**
-
-```tsx
-// ❌ Deprecated
-<CapCardBox bodyStyle={{ padding: '20px' }} content="Card content" />
-
-// ✅ Recommended
-<CapCardBox styles={{ body: { padding: '20px' } }} content="Card content" />
-```
-
-#### `maskStyle` (deprecated)
-
-- **Status:** Deprecated (Ant Design Card component)
-- **Replacement:** Use `styles.cover` prop instead
-- **Migration:** Replace `maskStyle={{ ... }}` with `styles={{ cover: { ... } }}`
-- **Removal:** Will be removed in next major version
-
-**Example:**
-
-```tsx
-// ❌ Deprecated
-<CapCardBox maskStyle={{ opacity: 0.5 }} cover={<img src="..." />} content="Card content" />
-
-// ✅ Recommended
-<CapCardBox styles={{ cover: { opacity: 0.5 } }} cover={<img src="..." />} content="Card content" />
-```
-
-**Note:** Deprecated Ant Design Card props are still accepted and passed through to the underlying Card component. Ant Design handles backward compatibility automatically. However, deprecated props may show console warnings in development mode and should be migrated to the new API.
-
-### Props
-
-CapCardBox accepts all props from Ant Design's [Card component](https://ant.design/components/card) plus:
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `wrapperClassName` | `string` | `''` | Custom class name for the wrapper element |
-| `className` | `string` | - | Custom class name for the Card component |
-| `avatarText` | `string` | - | Text to display in the avatar (shown above the card) |
-| `content` | `React.ReactNode` | - | Content to display inside the card |
-| `width` | `string` | - | Width of the card box wrapper |
-| `height` | `string` | - | Height of the card box wrapper |
-| `borderStyle` | `'DASHED' \| string` | - | Border style: 'DASHED' for dashed border, otherwise solid |
-| `topLeftIcon` | `React.ReactElement` | - | Icon to display in the top-left corner of the card |
-
-### Usage
-
-```tsx
-import { CapCardBox } from '@capillarytech/blaze-ui';
-
-// Basic usage
-<CapCardBox content={<p>Card content</p>} />
-
-// With avatar
-<CapCardBox avatarText="AB" content={<p>Card content</p>} />
-
-// With custom border style
-<CapCardBox borderStyle="DASHED" content={<p>Card content</p>} />
-
-// With top-left icon
-<CapCardBox topLeftIcon={<Icon />} content={<p>Card content</p>} />
-
-// With Ant Design Card props (v6 API)
-<CapCardBox
-  title="Card Title"
-  styles={{ body: { padding: '20px' } }}
-  variant="outlined"
-  content={<p>Card content</p>}
-/>
-```
-
-### Import Examples
-
-```tsx
-// Default import
-import CapCardBox from '@capillarytech/blaze-ui/components/CapCardBox';
-
-// Named import
-import { CapCardBox } from '@capillarytech/blaze-ui';
-
-// Type import
-import type { CapCardBoxProps } from '@capillarytech/blaze-ui';
-```
-
-### Styling
-
-The component uses SCSS modules with the following classes:
-
-- `.cap-card-box-wrapper`: Wrapper div around the Card component
-- `.cap-card-box-v2`: Applied to the Ant Design Card component
-- `.cap-card-box-body`: Applied to the Card body
-- `.cap-card-box-content`: Container for content with top-left icon
-- `.cap-card-box-avatar`: Applied to the Avatar component
-- `.cap-card-box-border-dashed`: Applied when `borderStyle="DASHED"`
-- `.cap-card-box-border-solid`: Applied when `borderStyle` is not "DASHED"
-
-Custom styling can be applied via the `className` or `wrapperClassName` props or by overriding the SCSS classes.
-
-### Differences from Source Component
-
-1. **Styling Approach**: Migrated from styled-components to SCSS modules for better performance and maintainability
-2. **TypeScript Support**: Full TypeScript support with exported `CapCardBoxProps` interface
-3. **Ant Design v6 API**: Uses `classNames` prop for Card component styling (v6 API)
-4. **Border Styling**: Border styles are now applied via CSS classes instead of inline styles