@flamingo-stack/openframe-frontend-core 0.0.212 → 0.0.213-snapshot.20260528174436

package/src/components/icons/.facebook-icon.md

@@ -1,12 +1,12 @@
-<!-- source-hash: 6021b5cfa506c8708cad02aaf42ea41d -->
-A React component that renders a customizable Facebook icon using SVG, with configurable color and styling properties.
+<!-- source-hash: 0ff86eedabe989deb3c34dbbc79700e9 -->
+A deprecated React component that renders a Facebook SVG icon with configurable color and className props.
 
 ## Key Components
 
-- **FacebookIcon**: Main component function that renders the Facebook logo SVG
-- **FacebookIconProps**: TypeScript interface defining component props
-  - `color?: string` - Stroke color (defaults to 'white')
-  - `className?: string` - CSS classes for styling
+- **`FacebookIcon`** — Named export rendering a 24×24 Facebook SVG icon
+- **`FacebookIconProps`** — Interface defining optional `color` (default: `'white'`) and `className` props
+
+> ⚠️ **Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
@@ -16,17 +16,6 @@ import { FacebookIcon } from './facebook-icon';
 // Default white icon
 <FacebookIcon />
 
-// Custom colored icon with CSS classes
-<FacebookIcon 
-  color="#1877F2" 
-  className="hover:opacity-80 transition-opacity" 
-/>
-
-// Icon for dark theme
-<FacebookIcon 
-  color="#000000" 
-  className="w-6 h-6" 
-/>
-```
-
-The component uses a fixed 24x24 viewBox with stroke-based rendering, making it suitable for various UI contexts like social media links, sharing buttons, or navigation elements.
+// Custom color with Tailwind class
+<FacebookIcon color="#1877F2" className="hover:opacity-80" />
+```

package/src/components/icons/.figma-icon.md

@@ -1,30 +1,21 @@
-<!-- source-hash: 60b9706124892a37124c8961f0843075 -->
-A React SVG icon component that renders the Figma logo with customizable styling and color properties.
+<!-- source-hash: 2e19c8763dc7d38a5489d5ea07e02d43 -->
+A deprecated React component that renders the Figma logo as an inline SVG icon.
 
 ## Key Components
 
-- **FigmaIconProps**: Interface defining optional `className` and `color` props
-- **FigmaIcon**: Functional component that renders an SVG representation of the Figma logo
+- **`FigmaIconProps`** — Interface accepting optional `className` (default: `'w-6 h-6'`) and `color` (default: `#000000`) props
+- **`FigmaIcon`** — Deprecated SVG icon component rendering the Figma logo at a 256×256 viewBox
 
 ## Usage Example
 
 ```typescript
 import { FigmaIcon } from './figma-icon';
 
-// Basic usage with defaults
+// Default usage
 <FigmaIcon />
 
-// Custom styling and color
-<FigmaIcon 
-  className="w-8 h-8" 
-  color="#FF7262" 
-/>
-
-// In a button or link
-<button className="flex items-center gap-2">
-  <FigmaIcon className="w-5 h-5" color="#1E293B" />
-  Open in Figma
-</button>
+// Custom size and color
+<FigmaIcon className="w-8 h-8" color="#1ABCFE" />
 ```
 
-The component uses Tailwind CSS classes by default (`w-6 h-6`) and renders in black (`#000000`) unless overridden. The SVG viewBox is optimized for the official Figma logo proportions and includes the complete vector path data for crisp rendering at any size.
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead of this component.

package/src/components/icons/.filter-icon.md

@@ -1,11 +1,14 @@
-<!-- source-hash: 67a4464007e34deffe73400341a7cc2f -->
-A React component that renders an SVG filter icon with three horizontal lines of decreasing width, commonly used in UI filtering interfaces.
+<!-- source-hash: 21b8664c3d0a99fe032c3bdf6f8c4154 -->
+A deprecated React functional component that renders a 16×16 SVG filter/funnel icon with three horizontal lines of decreasing width.
 
 ## Key Components
 
-- **FilterIcon**: React functional component that renders a filter icon SVG
-- **FilterIconProps**: TypeScript interface defining optional `className` and `size` props
-- **SVG paths**: Two path elements creating the visual filter icon with rounded rectangles
+| Export | Type | Description |
+|--------|------|-------------|
+| `FilterIcon` | `React.FC<FilterIconProps>` | SVG filter icon component |
+| `FilterIconProps` | `interface` | Optional `className` and `size` props |
+
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
@@ -15,17 +18,12 @@ import { FilterIcon } from './filter-icon'
 // Basic usage
 <FilterIcon />
 
-// With custom styling
-<FilterIcon className="text-blue-500 hover:text-blue-700" />
-
-// With custom size (note: size prop is defined but not applied to SVG)
-<FilterIcon size={24} className="w-6 h-6" />
-
-// In a filter button
-<button className="flex items-center gap-2">
-  <FilterIcon className="opacity-60" />
-  Filter Results
-</button>
+// With custom className
+<FilterIcon className="text-gray-500" />
 ```
 
-**Note**: The `size` prop is currently unused in the implementation. The SVG has fixed dimensions of 16x16. To make the icon responsive to the `size` prop, the SVG's `width` and `height` attributes should reference the `size` parameter instead of being hardcoded.
+## Notes
+
+- Props `className` (default: `''`) and `size` (default: `20`) are accepted but **not applied** to the SVG — the icon renders at a fixed `16×16` viewport regardless of the `size` prop.
+- Icon color is hardcoded to `#888888`.
+- Prefer `icons-v2-generated` for new implementations.

package/src/components/icons/.flamingo-logo.md

@@ -1,40 +1,41 @@
-<!-- source-hash: cb2dad66d52c46b1fa78ac3a94494397 -->
-A React SVG component that renders the Flamingo brand logo with customizable styling and accessibility features.
+<!-- source-hash: 86d7eca83805c367f86ff05d3f27bd73 -->
+Renders the Flamingo brand logo as an inline SVG React component, and exports the raw SVG path data for use in non-React contexts (e.g. email templates).
 
 ## Key Components
 
-- **FlamingoLogo**: Main component that renders an SVG flamingo logo
-- **FlamingoLogoProps**: TypeScript interface extending SVG props with custom options
-- **Unique ID generation**: Uses React.useId() for accessibility and avoiding ID conflicts
+| Export | Type | Description |
+|--------|------|-------------|
+| `FLAMINGO_LOGO_SVG_PATH` | `string` | Raw SVG path `d` attribute — single source of truth for the logo shape |
+| `FLAMINGO_LOGO_VIEWBOX` | `string` | ViewBox constant `"0 0 121 120"` shared across rendering contexts |
+| `FlamingoLogo` | `React.FC` | ⚠️ **Deprecated** — SVG logo component; use `icons-v2-generated` instead |
 
-## Props
+### `FlamingoLogoProps`
 
-- `className?: string` - CSS classes for styling
-- `fill?: string` - Fill color (defaults to CSS custom property `--ods-flamingo-pink-base`)
-- `...props` - All standard SVG element props are supported
+Extends `React.SVGProps<SVGSVGElement>` with:
+
+| Prop | Default | Description |
+|------|---------|-------------|
+| `className` | `''` | Additional CSS classes |
+| `fill` | `var(--ods-flamingo-pink-base)` | Fill color for the logo path |
 
 ## Usage Example
 
 ```typescript
+// React component (deprecated — prefer icons-v2-generated)
 import { FlamingoLogo } from './flamingo-logo';
 
-// Basic usage with default pink color
-<FlamingoLogo />
-
-// Custom styling and color
-<FlamingoLogo 
-  className="w-8 h-8" 
-  fill="#ff6b9d" 
-  aria-label="Flamingo logo"
-/>
-
-// Responsive logo with custom props
-<FlamingoLogo 
-  className="logo-header" 
-  width={60} 
-  height={60}
-  role="img"
-/>
+<FlamingoLogo className="w-8 h-8" fill="#FFC008" />
+```
+
+```typescript
+// Non-React context (e.g. email HTML)
+import { FLAMINGO_LOGO_SVG_PATH, FLAMINGO_LOGO_VIEWBOX } from './flamingo-logo';
+
+const emailSvg = `
+  <svg viewBox="${FLAMINGO_LOGO_VIEWBOX}" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="${FLAMINGO_LOGO_SVG_PATH}" fill="#FFC008" />
+  </svg>
+`;
 ```
 
-The component generates unique IDs for the SVG path to prevent conflicts when multiple logos are rendered on the same page, and follows accessibility best practices by accepting ARIA attributes through the spread props.
+> **Deprecation notice:** `FlamingoLogo` is marked `@deprecated`. For new code, import logo icons from the `icons-v2-generated` package to stay aligned with the current design system.

package/src/components/icons/.folder-shield-icon.md

@@ -1,32 +1,41 @@
-<!-- source-hash: 0093e07ee63aa2b00b4fab409899de38 -->
-A React component that renders an SVG icon combining a folder with a security shield, typically used to represent secured or protected directories and file systems.
+<!-- source-hash: af1f70d91f1d39f21f5addbc53ce0b08 -->
+A deprecated React SVG icon component rendering a folder with a shield overlay, intended for security-related UI contexts.
 
 ## Key Components
 
-- **FolderShieldIcon**: Main React functional component that renders the combined folder-shield SVG icon
-- **FolderShieldIconProps**: TypeScript interface defining optional props for customization (className, size, color)
+### `FolderShieldIcon`
+A functional React component that renders an inline SVG icon combining a folder shape with a shield emblem.
+
+**Props (`FolderShieldIconProps`):**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | CSS class for styling |
+| `size` | `number` | `24` | Width and height in pixels |
+| `color` | `string` | `'white'` | SVG stroke color |
+
+> ⚠️ **Deprecated** — This component is marked for removal. Use equivalent icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { FolderShieldIcon } from './folder-shield-icon'
 
-// Basic usage with defaults (24px, white color)
+// Basic usage
 <FolderShieldIcon />
 
-// Customized with different size and color
-<FolderShieldIcon 
-  size={32} 
-  color="#3B82F6" 
-  className="hover:opacity-80" 
-/>
-
-// Large icon for headers or prominent displays
-<FolderShieldIcon 
-  size={48} 
-  color="currentColor" 
-  className="text-green-600" 
-/>
+// Custom size and color
+<FolderShieldIcon size={32} color="#FFC008" className="my-icon" />
 ```
 
-The icon features a folder outline with an overlaid shield symbol, making it ideal for UI elements representing secure folders, encrypted directories, or protected file access areas. The SVG is scalable and customizable through props, with sensible defaults for general use cases.
+## Migration
+
+Replace usages with the generated icon library:
+
+```typescript
+// ❌ Deprecated
+import { FolderShieldIcon } from './folder-shield-icon'
+
+// ✅ Preferred
+import { FolderShieldIcon } from '@/icons-v2-generated'
+```

package/src/components/icons/.g2-icon.md

@@ -1,33 +1,34 @@
-<!-- source-hash: 10d5509112e8957ff3374f8c30d11a6e -->
-A React SVG icon component that renders the G2 logo with customizable styling properties.
+<!-- source-hash: 38ec992385970691def87c3b298a013a -->
+Renders the G2 crowd review platform logo as an inline SVG React component.
 
 ## Key Components
 
-- **G2Icon** - Main functional component that renders an SVG representation of the G2 logo
-- **G2IconProps** - TypeScript interface defining optional props for width, height, className, and color
+### `G2IconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `number \| string` | `2500` | SVG width |
+| `height` | `number \| string` | `2500` | SVG height |
+| `className` | `string` | `''` | CSS class name |
+| `color` | `string` | `'#ff492c'` | Fill color for the G2 logo |
+
+### `G2Icon`
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
+
+A functional component that renders the G2 logo SVG with configurable dimensions and fill color.
 
 ## Usage Example
 
 ```typescript
 import { G2Icon } from './g2-icon';
 
-// Default usage (large size, red color)
+// Basic usage
 <G2Icon />
 
-// Custom size and styling
-<G2Icon 
-  width={100} 
-  height={100} 
-  className="my-icon" 
-  color="#3b82f6" 
+// Custom size and color
+<G2Icon
+  width={48}
+  height={48}
+  color="#000000"
+  className="g2-badge-icon"
 />
-
-// Responsive with CSS classes
-<G2Icon 
-  width="100%" 
-  height="auto" 
-  className="w-8 h-8 text-blue-500" 
-/>
-```
-
-The component defaults to a large 2500x2500 size with the signature G2 red color (`#ff492c`), making it suitable for high-resolution displays. All props are optional, allowing for flexible integration across different UI contexts.
+```

package/src/components/icons/.getapp-icon.md

@@ -1,36 +1,40 @@
-<!-- source-hash: ab42a2d1956c0d0c8f6196da4c4c2fe2 -->
-A customizable React SVG icon component that renders the GetApp logo with configurable colors and dimensions.
+<!-- source-hash: 1d6870ca9ad13db7fc8398f68f1c76f6 -->
+A deprecated React SVG icon component rendering the GetApp logo with customizable dimensions and multi-color theming support.
 
 ## Key Components
 
-- **GetAppIconProps**: Interface defining component props including dimensions, styling, and six customizable color properties
-- **GetAppIcon**: Main component function that renders an SVG with multiple colored paths forming the GetApp logo
-- **Default Colors**: Teal/cyan color palette (#009C9C, #40E3E3, #1ABAB8, #87F0F0, #17CFCF, #424A52)
+### `GetAppIconProps` Interface
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `number \| string` | `24` | SVG width |
+| `height` | `number \| string` | `24` | SVG height |
+| `className` | `string` | `''` | CSS class override |
+| `firstColor` | `string` | `#009C9C` | Primary teal fill |
+| `secondColor` | `string` | `#40E3E3` | Light cyan fill |
+| `thirdColor` | `string` | `#1ABAB8` | Mid teal fill |
+| `fourthColor` | `string` | `#87F0F0` | Pale cyan fill |
+| `fifthColor` | `string` | `#17CFCF` | Bright teal fill |
+| `sixthColor` | `string` | `#424A52` | Dark slate fill |
+
+### `GetAppIcon` *(deprecated)*
+Renders a six-path SVG composing the GetApp logo within a `10 260 170 90` viewBox.
+
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { GetAppIcon } from './getapp-icon';
 
-// Basic usage with defaults
+// Default usage
 <GetAppIcon />
 
-// Customized size and colors
-<GetAppIcon 
+// Custom size and color overrides
+<GetAppIcon
   width={48}
   height={48}
   className="my-icon"
-  firstColor="#FF0000"
-  secondColor="#00FF00"
-  thirdColor="#0000FF"
+  firstColor="#007A7A"
+  sixthColor="#2C3E50"
 />
-
-// Responsive sizing
-<GetAppIcon 
-  width="100%" 
-  height="auto"
-  className="responsive-icon"
-/>
-```
-
-The component renders an intricate geometric logo with six distinct colored sections, each controllable via color props. The SVG uses a fixed viewBox (10 260 170 90) optimized for the logo's proportions, making it scalable while maintaining visual integrity.
+```

package/src/components/icons/.github-icon.md

@@ -1,38 +1,26 @@
-<!-- source-hash: d503c551a77121b211b786c76b1f1d39 -->
-A React component that renders a customizable GitHub logo SVG icon with configurable styling and dimensions.
+<!-- source-hash: d470c48109c9c0502da44bf6002d7d70 -->
+A deprecated React SVG icon component rendering the GitHub logo mark.
 
 ## Key Components
 
-- **GitHubIconProps** - Interface defining optional props for customization
-- **GitHubIcon** - Main functional component that renders the GitHub SVG logo
+- **`GitHubIconProps`** — Interface with optional `color` (default: `'white'`), `className` (default: `""`), `width` (default: `15`), and `height` (default: `14`) props
+- **`GitHubIcon`** — Deprecated functional component rendering a GitHub Invertocat SVG path
 
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `color` | `string` | `'white'` | Fill color for the icon |
-| `className` | `string` | `""` | CSS classes to apply |
-| `width` | `number` | `15` | Icon width in pixels |
-| `height` | `number` | `14` | Icon height in pixels |
+> ⚠️ **Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { GitHubIcon } from './github-icon';
 
-// Basic usage with defaults
+// Default white icon
 <GitHubIcon />
 
-// Customized styling
-<GitHubIcon 
-  color="black" 
-  width={24} 
-  height={24} 
-  className="hover:opacity-80 transition-opacity" 
+// Custom size and color
+<GitHubIcon
+  color="#24292e"
+  width={24}
+  height={24}
+  className="ml-2"
 />
-
-// Dark theme variant
-<GitHubIcon color="#24292e" width={20} height={20} />
-```
-
-The component uses a fixed viewBox of "0 0 15 14" while allowing dynamic width/height scaling, making it suitable for responsive designs and various UI contexts.
+```

package/src/components/icons/.globe-icon.md

@@ -1,32 +1,27 @@
-<!-- source-hash: 7bb381d85f86b3f80e9dc408eb0d681a -->
-A customizable globe/world icon component built with SVG that provides a clean, scalable representation of the Earth with meridians and equator lines.
+<!-- source-hash: 23edad6ad9be7a98935ccf577b903166 -->
+Renders a globe SVG icon as a React component with configurable stroke color and CSS class support.
 
 ## Key Components
 
-- **GlobeIcon** - Main React functional component that renders an SVG globe icon
-- **GlobeIconProps** - TypeScript interface defining the component's props:
-  - `color` - Optional stroke color (defaults to 'white')
-  - `className` - Optional CSS class for styling
+- **`GlobeIconProps`** — Interface accepting optional `color` (stroke color, defaults to `'white'`) and `className` (CSS class string)
+- **`GlobeIcon`** — ⚠️ **Deprecated.** Functional component returning a 24×24 SVG globe icon using stroke-based rendering
+
+> **Deprecation Notice:** `GlobeIcon` is deprecated. Use the equivalent icon from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
+// ❌ Deprecated usage
 import { GlobeIcon } from './globe-icon';
 
-// Basic usage with default white color
+// Basic usage with default white stroke
 <GlobeIcon />
 
-// Custom color and styling
-<GlobeIcon 
-  color="#3b82f6" 
-  className="w-6 h-6 hover:scale-110 transition-transform" 
-/>
-
-// Dark theme variant
-<GlobeIcon 
-  color="#1f2937" 
-  className="globe-dark" 
-/>
+// Custom color and class
+<GlobeIcon color="#FFC008" className="w-6 h-6" />
 ```
 
-The component uses a 24x24 viewBox with stroke-based rendering, making it ideal for icons in navigation bars, global settings buttons, or internationalization indicators. The SVG structure includes a main circle, curved meridian line, and horizontal equator for a recognizable globe representation.
+```typescript
+// ✅ Preferred — use icons-v2-generated
+import { GlobeIcon } from '@/components/icons-v2-generated';
+```

package/src/components/icons/.google-gemini-icon.md

@@ -1,34 +1,31 @@
-<!-- source-hash: ac033963520ccac91a4404f56a9eca31 -->
-A React component that renders the Google Gemini AI icon as an SVG with customizable styling and color properties.
+<!-- source-hash: dd6a40fd69f553e0cd6c96ac3a26ea05 -->
+A deprecated React SVG icon component rendering the Google Gemini logo with configurable size, color, and className props.
 
 ## Key Components
 
-- **GoogleGeminiIconProps** - Interface defining component props with optional className, size, and color
-- **GoogleGeminiIcon** - Main functional component that renders a scalable SVG icon with filters and gradients
+### `GoogleGeminiIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | CSS class for the SVG element |
+| `size` | `number` | `24` | Width and height in pixels |
+| `color` | `string` | `'white'` | Fill color for the glow/blur layers |
 
-The component features a distinctive sparkle/star shape with gradient fills and multiple blur filters to create depth and visual appeal.
+### `GoogleGeminiIcon`
+The exported component renders a 16×16 viewBox SVG featuring:
+- A star-shaped mask path clipping the icon outline
+- Multiple Gaussian-blurred glow layers creating the characteristic Gemini shimmer effect
+- A linear gradient overlay (blue → purple) applied via mask
 
 ## Usage Example
 
 ```typescript
 import { GoogleGeminiIcon } from './google-gemini-icon'
 
-// Basic usage with defaults (24px, white color)
+// Default usage
 <GoogleGeminiIcon />
 
 // Custom size and color
-<GoogleGeminiIcon 
-  size={32} 
-  color="#4893FC" 
-  className="ml-2" 
-/>
-
-// Large icon with custom styling
-<GoogleGeminiIcon 
-  size={48} 
-  color="currentColor" 
-  className="text-blue-500 hover:text-blue-600" 
-/>
+<GoogleGeminiIcon size={32} color="#4893FC" className="ml-2" />
 ```
 
-The icon maintains its aspect ratio and quality at any size, making it suitable for buttons, navigation elements, or branding components in applications using Google's Gemini AI services.
+> **⚠️ Deprecated:** This component is marked as deprecated. Use the equivalent icon from `icons-v2-generated` instead.

package/src/components/icons/.google-logo.md

@@ -1,12 +1,11 @@
-<!-- source-hash: 80cb9f21faa2e361becebb445833c42f -->
-A React SVG component that renders the official Google logo with proper brand colors and scalable vector graphics.
+<!-- source-hash: c14a038e371c34469ffb38afed8c4b8a -->
+Renders the Google "G" logo as an inline SVG React component with the official four-color design.
 
 ## Key Components
 
-- **GoogleLogo**: React functional component that renders the Google "G" logo as an inline SVG
-- Accepts standard SVG props and optional `className` for styling
-- Uses authentic Google brand colors (#4285F4, #34A853, #FBBC05, #EB4335)
-- Fixed 24x24px default size with scalable viewBox
+- **`GoogleLogo`** — Deprecated SVG icon component accepting standard `className` and `SVGProps` passthrough props.
+
+> ⚠️ **Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
@@ -16,20 +15,15 @@ import { GoogleLogo } from './google-logo';
 // Basic usage
 <GoogleLogo />
 
-// With custom styling
-<GoogleLogo 
-  className="w-8 h-8" 
-  width={32} 
-  height={32} 
-/>
-
-// With additional SVG props
-<GoogleLogo 
-  className="hover:opacity-80 transition-opacity"
-  onClick={() => handleGoogleSignIn()}
-  role="button"
-  aria-label="Sign in with Google"
-/>
+// With custom sizing and class
+<GoogleLogo className="w-6 h-6" aria-label="Sign in with Google" />
 ```
 
-The component spreads all SVG props, making it fully customizable while maintaining the authentic Google logo appearance. Perfect for authentication buttons, branding elements, or any UI that needs the recognizable Google logo icon.
+## Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `className` | `string` | Optional CSS class for styling |
+| `...props` | `React.SVGProps<SVGSVGElement>` | Any valid SVG element attribute |
+
+The component renders at a fixed `24×24` viewport but can be resized via CSS. Colors follow the official Google brand palette: blue (`#4285F4`), green (`#34A853`), yellow (`#FBBC05`), and red (`#EB4335`).

package/src/components/icons/.grid-view-icon.md

@@ -1,33 +1,44 @@
-<!-- source-hash: c0921228c393ef69f77a97cd7c5828c5 -->
-A React component that renders a customizable grid view icon using SVG, commonly used for toggling between grid and list layouts in user interfaces.
+<!-- source-hash: 9c4ed445c4fdc96885b626c55506e5b5 -->
+A deprecated React SVG icon component that renders a 2×2 grid view layout icon.
 
 ## Key Components
 
-- **GridViewIcon**: Main functional component that renders a 2x2 grid icon
-- **Props interface**: Accepts `className`, `size`, and `color` for customization
-- **SVG paths**: Two path elements that create the four-square grid pattern
+### `GridViewIcon`
+**⚠️ Deprecated** — Use icons from `icons-v2-generated` instead.
+
+A functional React component rendering a grid/dashboard view SVG icon with four rounded squares arranged in a 2×2 pattern.
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `"w-5 h-5"` | CSS class for sizing/styling |
+| `size` | `number` | `22` | Width and height in pixels |
+| `color` | `string` | `"white"` | SVG fill color |
 
 ## Usage Example
 
 ```typescript
 import { GridViewIcon } from './grid-view-icon'
 
-// Default usage (white icon, 22px, w-5 h-5 classes)
+// Default usage
 <GridViewIcon />
 
 // Custom size and color
-<GridViewIcon size={24} color="#333" />
-
-// Custom styling with Tailwind classes
-<GridViewIcon 
-  className="w-6 h-6 hover:opacity-80" 
-  color="currentColor"
-/>
-
-// In a button for layout switching
-<button className="p-2 rounded">
-  <GridViewIcon size={20} color="#6b7280" />
-</button>
+<GridViewIcon size={32} color="#FFC008" className="w-8 h-8" />
+
+// Dark theme variant
+<GridViewIcon color="#1a1a1a" size={20} />
 ```
 
-The component uses a 21x22 viewBox and creates a symmetrical 2x2 grid pattern. The dual path structure ensures proper rendering across different browsers and provides visual consistency for grid/tile view toggles in applications.
+## Migration Note
+
+This component is deprecated. Replace usages with the equivalent icon from the `icons-v2-generated` package:
+
+```typescript
+// ❌ Deprecated
+import { GridViewIcon } from './grid-view-icon'
+
+// ✅ Preferred
+import { GridViewIcon } from '@/icons-v2-generated'
+```