@capillarytech/blaze-ui 5.20.0 → 5.22.0

package/CapUserProfile/README.md

@@ -1,105 +0,0 @@
-# CapUserProfile
-
-A component that displays a user profile slide box with user information, allowing users to view and edit their profile details including name, language preference, preferred organization, and preferred module.
-
-## Migration Notes (cap-ui-library → blaze-ui)
-
-### Summary of Changes
-
-This component has been migrated from cap-ui-library to blaze-ui with the following changes:
-
-1. **TypeScript Conversion**: Converted from JavaScript to TypeScript with proper interfaces
-2. **Functional Component**: Already a functional component, maintained with React hooks
-3. **Styling**: Converted from SCSS to SCSS modules with CSS modules pattern
-4. **Theme Config**: Moved Ant Design style overrides to `getCapThemeConfig.ts`
-5. **PropTypes Removal**: Replaced PropTypes with TypeScript interfaces
-
-### Breaking Changes
-
-**None** - No breaking changes from cap-ui-library v8.x
-
-### Prop Changes
-
-All props remain the same:
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `undefined` | Additional CSS class name |
-| `show` | `boolean` | `false` | Controls visibility of the user profile slide box |
-| `onClose` | `() => void` | `() => {}` | Callback function when the profile is closed |
-| `setShowUserProfile` | `(show: boolean) => void` | `undefined` | Function to set the visibility state of the user profile |
-| `userData` | `object` | `undefined` | User data object containing user information and organization details |
-| `language` | `object` | `undefined` | Language and locale details from Redux store |
-| `supportedLocalesDetails` | `object` | `undefined` | Supported locales details from Redux store |
-
-**Note**: The component also receives `intl` prop from `injectIntl` HOC and Redux props (`language`, `supportedLocalesDetails`) from `connect` HOC. These are handled internally and don't need to be passed explicitly.
-
-### CSS/Styling Changes
-
-1. **SCSS Modules**: Converted to CSS modules pattern:
-   - Changed `import './styles.scss'` to `import styles from './styles.scss'`
-   - Updated all `className` props to use `styles['class-name']` pattern
-
-2. **Ant Design Overrides Removed**:
-   - Removed `.ant-input` styles from component SCSS (per migration rules - no `.ant-` selectors allowed)
-   - Removed `.ant-tabs-tabpane` styles from component SCSS
-   - **Note**: The original component had component-specific Input border color (`#B3BAC5` / `CAP_G06`) scoped to `.user-profile-tab-input .ant-input`. This override was removed per migration rules. Inputs now use the global theme border color (`CAP_G07`).
-   - Tabs tab pane border removal moved to `getCapThemeConfig.ts` under `components.Tabs.itemBorderColor`
-
-3. **Global Utility Classes**: The component uses some global utility classes that are preserved for backward compatibility:
-   - `pointer-cursor` - Global utility class
-   - `ml-8` - Global margin utility class
-   - `mt-4` - Global margin utility class
-   - `text-align-left` - Global text alignment utility class
-
-### Theme Config Updates
-
-The following theme config updates were made in `getCapThemeConfig.ts`:
-
-**Input Component**:
-- `colorBorder`: Updated to `CAP_G06` (`#b3bac5`) to match CapUserProfile design requirements
-
-**Tabs Component**:
-- `itemBorderColor`: Set to `'transparent'` to remove tab pane borders
-
-### Behavioral Changes
-
-1. **CSS Modules**: Class names are now scoped via CSS modules, but backward compatibility is maintained through the same class name structure
-2. **Theme-based Styling**: Ant Design component styling is now controlled via theme config instead of SCSS overrides
-
-### Usage
-
-```tsx
-import { CapUserProfile } from '@capillarytech/blaze-ui';
-
-<CapUserProfile
-  show={isProfileVisible}
-  onClose={() => setIsProfileVisible(false)}
-  setShowUserProfile={setIsProfileVisible}
-  userData={{
-    user: {
-      id: '12345',
-      firstName: 'John',
-      lastName: 'Doe',
-      loginName: 'john.doe@example.com',
-      accessRoles: ['STANDARD_USER'],
-    },
-  }}
-/>
-```
-
-### Component Structure
-
-The component consists of:
-- **CapUserProfile** (main component): Displays the slide box with user header and profile tab
-- **UserProfileTab** (sub-component): Displays and allows editing of profile details
-
-Both components use CSS modules for styling and are fully TypeScript typed.
-
-### Dependencies
-
-- `react-intl` - For internationalization
-- `react-redux` - For Redux store access
-- `reselect` - For memoized selectors
-- Ant Design v6 components (via `antd-v5` alias)
-- Other Cap UI components from blaze-ui

package/CapUserProfile/Status.md

@@ -1,95 +0,0 @@
-# Migration Status: CapUserProfile
-
-**Last Updated**: 2026-02-23 13:18:34
-
-## Migration Steps
-
-- [x] **Step 0**: Setup branch and remote tracking
-- [x] **Step 1**: Migration Prompt 1 (Main migration)
-- [x] **Step 1.5**: Export component in blaze-ui/components/index.ts
-- [x] **Step 2**: Migration Prompt 2 (Storybook support)
-- [x] **Step 2.5**: Verify deprecated props and prop changes (REQUIRED - enforced)
-- [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 8.1**: Pre-visual-test check (agent verification)
-- [x] **Step 8.2**: Visual comparison
-- [x] **Step 8.3**: Visual diff analysis (agent analysis)
-- [x] **Step 9**: CSS Analysis (if mismatches found)
-- [ ] **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
-
-## 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
-
-**Last Test**: 2026-02-23 13:17:07  
-**Report**: `/tools/visual-testing/report/CapUserProfile/index.html`  
-**Maximum Mismatch**: 0.11% (969 pixels)  
-**Threshold**: 1.5%  
-**Status**: ✅ All variants passing (below threshold)
-
-### Variant Results:
-- ✅ **default**: 0.11% (969 pixels) - Pass
-- ✅ **org-owner**: 0.11% (969 pixels) - Pass
-- ✅ **admin-user**: 0.11% (969 pixels) - Pass
-- ✅ **standard-user**: 0.11% (969 pixels) - Pass
-- ✅ **empty-data**: 0.11% (969 pixels) - Pass
-- ✅ **long-content**: 0.11% (969 pixels) - Pass
-- ✅ **custom-classname**: 0.11% (969 pixels) - Pass
-- ✅ **single-name**: 0.11% (969 pixels) - Pass
-
-### Analysis:
-All variants show **identical** visual differences (969 pixels, 0.11%), indicating a **systematic rendering issue** in base component structure. While passing the threshold, this should be investigated.
-
-**See detailed analysis**: `VISUAL_DIFF_ANALYSIS.md`
-
-
-## CSS Fixes Applied
-
-### Identified Issues:
-1. **Inline style usage** (Priority: High)
-   - Location: `index.tsx:64-66`
-   - Issue: Background color set via inline style
-   - Action: Move to CSS class per coding standards
-
-2. **CapRow/CapColumn flex props** (Priority: High)
-   - Location: `index.tsx:61`
-   - Issue: Verify `type="flex"` and `align="middle"` v6 compatibility
-   - Action: Review CapRow/CapColumn v6 implementation
-
-3. **CapSlideBox rendering** (Priority: High)
-   - Location: `index.tsx:133-141`
-   - Issue: Verify `showShadow` and `size="size-r"` v6 compatibility
-   - Action: Review CapSlideBox v6 implementation
-
-### Fixes Pending:
-- [ ] Remove inline style, move to CSS class
-- [ ] Verify CapRow/CapColumn v6 compatibility
-- [ ] Verify CapSlideBox v6 compatibility
-- [ ] Verify CapTab panes prop structure
-
-## Notes
-
-**Visual Diff Analysis Completed**: 2026-02-23  
-**Analysis Document**: `VISUAL_DIFF_ANALYSIS.md`
-
-**Key Findings:**
-- All 8 variants show identical 0.11% difference (969 pixels)
-- Difference is systematic, affecting all variants equally
-- Well below 1.5% threshold - all tests passing
-- Likely causes: flex layout changes, container spacing, or subpixel rendering
-- Recommended fixes: Remove inline styles, verify base component v6 compatibility
-

package/CapVirtualList/README.md

@@ -1,162 +0,0 @@
-# CapVirtualList
-
-A wrapper component around `react-virtuoso`'s `Virtuoso` component that provides virtualized list rendering for large datasets.
-
-## 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 component maintains backward compatibility with the previous version.
-
-### Deprecated Props
-
-**No Ant Design deprecated props** - This component does not use any Ant Design components.
-
-CapVirtualList is a direct wrapper around `react-virtuoso`'s `Virtuoso` component and does not consume any Ant Design components (e.g., Dropdown, Input, Alert, Tooltip, Tabs, etc.). Therefore, there are no Ant Design prop deprecations to document.
-
-**Note:** For information about deprecated props in `react-virtuoso`, please refer to the [react-virtuoso documentation](https://virtuoso.dev/).
-
-### Prop Changes
-
-| Prop | Status | Notes |
-|------|--------|-------|
-| All `react-virtuoso` Virtuoso props | ✅ Unchanged | All props are passed through to the underlying `Virtuoso` component |
-| `totalCount` | ✅ Unchanged | Total number of items in the list |
-| `itemContent` | ✅ Unchanged | Function to render each item: `(index: number, item?: unknown) => ReactNode` |
-| `data` | ✅ Unchanged | Array of data items (optional) |
-| `style` | ✅ Unchanged | Inline styles for the list container |
-| `className` | ✅ Unchanged | CSS class name for the list container |
-| `itemHeight` | ✅ Unchanged | Fixed height for each item in pixels (optional) |
-| `endReached` | ✅ Unchanged | Callback function called when user scrolls to the end |
-| `components` | ✅ Unchanged | Custom components for the list (e.g., EmptyPlaceholder) |
-
-**For complete prop documentation, refer to:** [react-virtuoso documentation](https://virtuoso.dev/)
-
-### API Changes
-
-- **TypeScript Support:** Full TypeScript support with exported `CapVirtualListProps` interface
-- **Ant Design Components:** None - This component does not use Ant Design
-- **Styling:** No custom styling - uses `react-virtuoso`'s default styles
-
-### Behavioral Changes
-
-- **No behavioral changes** - The component functions identically to the previous version
-- All props are passed directly to the underlying `Virtuoso` component from `react-virtuoso`
-
-### Usage Examples
-
-#### Basic Usage
-
-```tsx
-import { CapVirtualList } from '@capillarytech/blaze-ui';
-
-<CapVirtualList
-  totalCount={1000}
-  style={{ height: '400px', width: '100%' }}
-  itemContent={(index) => (
-    <div style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>
-      Item {index + 1}
-    </div>
-  )}
-/>
-```
-
-#### With Data Array
-
-```tsx
-import { CapVirtualList } from '@capillarytech/blaze-ui';
-
-const data = Array.from({ length: 1000 }, (_, i) => ({
-  id: i + 1,
-  name: `Item ${i + 1}`,
-  description: `Description for item ${i + 1}`,
-}));
-
-<CapVirtualList
-  totalCount={data.length}
-  data={data}
-  style={{ height: '500px', width: '100%' }}
-  itemContent={(index, item) => (
-    <div style={{ padding: '16px', borderBottom: '1px solid #e8e8e8' }}>
-      <div style={{ fontWeight: 'bold' }}>{item?.name}</div>
-      <div style={{ fontSize: '12px', color: '#666' }}>{item?.description}</div>
-    </div>
-  )}
-/>
-```
-
-#### With Fixed Item Height
-
-```tsx
-import { CapVirtualList } from '@capillarytech/blaze-ui';
-
-<CapVirtualList
-  totalCount={1000}
-  itemHeight={60}
-  style={{ height: '400px', width: '100%' }}
-  itemContent={(index) => (
-    <div style={{ padding: '16px' }}>
-      Item {index + 1}
-    </div>
-  )}
-/>
-```
-
-#### With End Reached Callback
-
-```tsx
-import { CapVirtualList } from '@capillarytech/blaze-ui';
-import { useState } from 'react';
-
-function InfiniteList() {
-  const [items, setItems] = useState(Array.from({ length: 100 }, (_, i) => i + 1));
-
-  const handleEndReached = () => {
-    // Load more items
-    const newItems = Array.from(
-      { length: 20 },
-      (_, i) => items.length + i + 1
-    );
-    setItems([...items, ...newItems]);
-  };
-
-  return (
-    <CapVirtualList
-      totalCount={items.length}
-      data={items}
-      style={{ height: '400px', width: '100%' }}
-      itemContent={(index) => (
-        <div style={{ padding: '12px' }}>Item {items[index]}</div>
-      )}
-      endReached={handleEndReached}
-    />
-  );
-}
-```
-
-### TypeScript
-
-```tsx
-import { CapVirtualList, CapVirtualListProps } from '@capillarytech/blaze-ui';
-
-const props: CapVirtualListProps = {
-  totalCount: 1000,
-  style: { height: '400px', width: '100%' },
-  itemContent: (index) => <div>Item {index + 1}</div>,
-};
-
-<CapVirtualList {...props} />
-```
-
-### Migration Steps for Consumers
-
-**No migration steps required** - The component API is identical to the previous version.
-
-All existing code using `CapVirtualList` from `cap-ui-library` will work without any changes.
-
-### Related Documentation
-
-- [react-virtuoso Documentation](https://virtuoso.dev/)
-- [react-virtuoso GitHub Repository](https://github.com/petyosi/react-virtuoso)

package/CapVirtualList/Status.md

@@ -1,71 +0,0 @@
-# Migration Status: CapVirtualList
-
-**Last Updated**: 2026-02-06 12:46:31
-
-## Migration Steps
-
-- [x] **Step 0**: Setup branch and remote tracking
-- [x] **Step 1**: Migration Prompt 1 (Main migration)
-- [x] **Step 1.5**: Export component in blaze-ui/components/index.ts
-- [x] **Step 2**: Migration Prompt 2 (Storybook support)
-- [x] **Step 2.5**: Verify deprecated props and prop changes (REQUIRED - enforced)
-- [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
-- [ ] **Step 8**: Visual Testing
-- [ ] **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
-
-✅ **Verification Complete** - 2026-02-06
-
-### Summary
-**No Ant Design deprecated props** - CapVirtualList does not use any Ant Design components.
-
-### Verification Details
-
-1. **Ant Design Components Used:** None
-   - Component only uses `react-virtuoso`'s `Virtuoso` component
-   - No imports from `antd` or `@ant-design` packages
-   - Verified by checking imports in `index.tsx` and `types.ts`
-
-2. **Deprecated Props:** None
-   - No Ant Design components = No Ant Design deprecated props
-   - Component is a direct wrapper around `react-virtuoso`'s `Virtuoso` component
-
-3. **Documentation:** ✅ Complete
-   - README.md created with "Deprecated Props" section
-   - Clearly documents that no Ant Design components are used
-   - References `react-virtuoso` documentation for prop information
-
-4. **Backward Compatibility:** ✅ N/A
-   - No Ant Design props to maintain backward compatibility for
-   - Component API unchanged from original version
-
-### Files Updated
-- ✅ `README.md` - Added "Deprecated Props" section documenting no Ant Design components are used
-- ✅ `Status.md` - Updated with verification results
-
-**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/assets/HOCs/ComponentWithLabelHOC/README.md

@@ -1,230 +0,0 @@
-# ComponentWithLabelHOC Migration Guide
-
-## Summary
-
-ComponentWithLabelHOC has been migrated from `cap-ui-library` to `blaze-ui` with the following changes:
-
-- Converted from styled-components to SCSS modules
-- Converted from JavaScript to TypeScript
-- Converted from class component to functional component with React hooks
-- Added TypeScript interfaces for props
-- Maintained backward compatibility with the existing API
-
-## Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-The API remains identical to the original implementation. All existing props and behaviors are maintained.
-
-## Prop Changes
-
-| Prop | Type | Default | Status | Notes |
-|------|------|---------|--------|-------|
-| `label` | `React.ReactNode` | - | Unchanged | Label text to display |
-| `labelPosition` | `'top' \| 'left'` | `'top'` | Unchanged | Position of label relative to component |
-| `isRequired` | `boolean` | `false` | Unchanged | Shows asterisk when true |
-| `inductiveText` | `string` | - | Unchanged | Helper text displayed below label |
-| `errorMessage` | `string` | - | Unchanged | Error message displayed below component |
-| `disabled` | `boolean` | `false` | Unchanged | Disables the component |
-| `inline` | `boolean` | `false` | Unchanged | Displays component inline |
-| `componentPosition` | `'top' \| 'center'` | - | Unchanged | Position when labelPosition is 'left' |
-| `className` | `string` | - | Unchanged | Additional CSS class name |
-| `focusOnMount` | `boolean` | `false` | Unchanged | Focuses input on mount |
-
-### New TypeScript Types
-
-```typescript
-type LabelPosition = 'top' | 'left';
-type ComponentPosition = 'top' | 'center';
-
-interface ComponentWithLabelProps {
-  label?: React.ReactNode;
-  labelPosition?: LabelPosition;
-  isRequired?: boolean;
-  inductiveText?: string;
-  errorMessage?: string;
-  disabled?: boolean;
-  inline?: boolean;
-  componentPosition?: ComponentPosition;
-  className?: string;
-  focusOnMount?: boolean;
-  [key: string]: unknown;
-}
-
-type ComponentWithLabelHOC = <P extends WrappedComponentProps>(
-  Component: React.ComponentType<P>
-) => React.ComponentType<ComponentWithLabelProps & Omit<P, keyof WrappedComponentProps>>;
-```
-
-## API Changes
-
-### Functional Component (New)
-
-The HOC now uses React hooks internally (`useEffect`, `useRef`) instead of class component lifecycle methods. This is an internal change and does not affect the public API.
-
-### TypeScript Support (New)
-
-The HOC is now fully typed with TypeScript, providing better IDE support and type safety:
-
-```tsx
-import ComponentWithLabelHOC from '@capillarytech/blaze-ui/components/assets/HOCs/ComponentWithLabelHOC';
-import { Input } from 'antd';
-
-const InputWithLabel = ComponentWithLabelHOC(Input);
-
-// TypeScript will infer and validate all props
-<InputWithLabel
-  label="Username"
-  labelPosition="top"
-  isRequired
-  errorMessage={errors.username}
-/>
-```
-
-## Behavioral Changes
-
-- **Styling**: Styles are now applied via CSS Modules instead of styled-components, improving performance and maintainability
-- **Error State**: Error styling is now applied via conditional CSS classes rather than inline styles
-- **Focus Management**: Focus on mount now uses React refs and useEffect instead of componentDidMount
-
-## Migration Notes
-
-### Non-Tokenizable Overrides
-
-Most Antd style overrides in this HOC are conditional based on props (`errorMessage`, `labelPosition`) and layout-specific calculations. These cannot be tokenized and are handled via CSS Modules with conditional classes:
-
-1. **Conditional Border Colors**: Border colors change based on `errorMessage` prop - handled via conditional CSS classes (`--error` vs `--normal`)
-2. **Width Calculations**: Width calculations based on `labelPosition` (`calc(100% - 140px)`) - layout-specific, cannot be tokenized
-3. **Prefix/Suffix Positioning**: Absolute positioning of prefix/suffix icons (8px) - layout-specific, cannot be tokenized
-4. **Box Shadow Override**: `box-shadow: none` to remove Antd's default shadow - intentional override, cannot be tokenized
-
-### :global Overrides
-
-The following overrides use `:global` with mandatory `// OVERRIDE:` comments:
-
-1. **Placeholder Font Size**: Applied to `::-webkit-input-placeholder` pseudo-element - cannot be tokenized for pseudo-elements
-2. **Antd Component Selectors**: Direct Antd class selectors (`.ant-input`, `.ant-input-number`, `.ant-select`) - required for styling wrapped Antd components
-
-All `:global` blocks include comments explaining why tokenization is not possible.
-
-## Usage
-
-### Basic Usage
-
-```tsx
-import ComponentWithLabelHOC from '@capillarytech/blaze-ui/components/assets/HOCs/ComponentWithLabelHOC';
-import { Input } from 'antd';
-
-const InputWithLabel = ComponentWithLabelHOC(Input);
-
-function MyForm() {
-  return (
-    <InputWithLabel
-      label="Email"
-      labelPosition="top"
-      isRequired
-      errorMessage={errors.email}
-    />
-  );
-}
-```
-
-### Left Label Position
-
-```tsx
-<InputWithLabel
-  label="Username"
-  labelPosition="left"
-  componentPosition="center"
-  isRequired
-/>
-```
-
-### With Inductive Text
-
-```tsx
-<InputWithLabel
-  label="Password"
-  labelPosition="top"
-  inductiveText="Must be at least 8 characters"
-  isRequired
-/>
-```
-
-### Focus on Mount
-
-```tsx
-<InputWithLabel
-  label="Search"
-  focusOnMount
-/>
-```
-
-## Files Structure
-
-```
-blaze-ui/components/assets/HOCs/ComponentWithLabelHOC/
-├── index.tsx       # Main HOC component (CSS Modules)
-├── types.ts       # TypeScript interfaces and types
-├── styles.scss    # SCSS module styles
-└── README.md      # This file
-```
-
-## Import Paths
-
-### Recommended (New Location)
-
-```tsx
-import ComponentWithLabelHOC from '@capillarytech/blaze-ui/components/assets/HOCs/ComponentWithLabelHOC';
-// or
-import ComponentWithLabelHOC from '../assets/HOCs/ComponentWithLabelHOC';
-```
-
-### Backward Compatible (Old Location)
-
-```tsx
-// These imports still work for backward compatibility
-import ComponentWithLabelHOC from '@capillarytech/blaze-ui/components/assets/HOCs/ComponentWithLabelHOC';
-import ComponentWithLabelHOC from '../assets/HOCs/ComponentWithLabelHOC';
-```
-
-Both import paths work due to backward compatibility re-exports.
-
-## Technical Details
-
-### CSS Modules Approach
-
-All styles use CSS Modules with the `styles[classname]` pattern:
-
-```tsx
-import styles from './styles.scss';
-
-<div className={styles['component-with-label']}>
-```
-
-### Conditional Classes
-
-Error states and label positions are handled via conditional CSS classes:
-
-```tsx
-className={classnames(styles[classPrefix], {
-  [styles[`${classPrefix}--error`]]: !!errorMessage,
-  [styles[`${classPrefix}--normal`]]: !errorMessage,
-  [styles[`${classPrefix}--label-left`]]: labelPosition === 'left',
-})}
-```
-
-### SCSS Variables
-
-All spacing, colors, and font sizes use SCSS variables from `components/styles/_variables.scss`:
-
-- `$CAP_SPACE_*` for spacing
-- `$CAP_G*` for grey colors
-- `$CAP_RED` for error color
-- `$FONT_SIZE_*` for font sizes
-
-## Related Components
-
-- `CapHeading` - Used for label rendering
-- `CapInput` - Commonly wrapped component
-- `CapSelect` - Commonly wrapped component