@flamingo-stack/openframe-frontend-core 0.0.213 → 0.0.214-snapshot.20260528192313

package/src/components/icons/.custom-license-icon.md

@@ -1,42 +1,46 @@
-<!-- source-hash: c292d71bb35954b0f2d355852e85e77b -->
-A React SVG icon component that renders a custom license symbol with a balance scale design, featuring customizable styling properties and default gray coloring.
+<!-- source-hash: 41b2996d19e2fc2fe1ea9b6f77d5a451 -->
+A deprecated custom SVG icon component representing a license/balance symbol with a central pin and two scale pans.
 
 ## Key Components
 
-**CustomLicenseIconProps Interface:**
-- `className?` - Optional CSS class for styling
-- `fill?` - SVG fill color (defaults to "#888888")
-- `width?` - Icon width in pixels (defaults to 24)
-- `height?` - Icon height in pixels (defaults to 24)
+### `CustomLicenseIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — | Optional CSS class |
+| `fill` | `string` | `"#888888"` | SVG fill color |
+| `width` | `number` | `24` | Icon width in pixels |
+| `height` | `number` | `24` | Icon height in pixels |
 
-**CustomLicenseIcon Component:**
-- Renders an SVG with a central pillar and balanced scales
-- Accepts all standard SVG props via spread operator
-- Uses 24x24 viewBox for consistent scaling
+### `CustomLicenseIcon`
+> **⚠️ Deprecated** — Use icons from `icons-v2-generated` instead.
+
+A functional React component rendering an inline SVG license/scales icon at a `0 0 24 24` viewBox.
 
 ## Usage Example
 
 ```typescript
 import { CustomLicenseIcon } from './custom-license-icon';
 
-// Basic usage with defaults
+// Default usage
 <CustomLicenseIcon />
 
-// Customized styling
-<CustomLicenseIcon 
+// Custom styling
+<CustomLicenseIcon
+  fill="#FFC008"
   width={32}
   height={32}
-  fill="#2563eb"
-  className="license-icon"
-/>
-
-// With additional SVG props
-<CustomLicenseIcon 
-  fill="#059669"
-  onClick={() => console.log('License clicked')}
-  role="button"
-  tabIndex={0}
+  className="my-icon"
 />
 ```
 
-The icon visually represents legal/licensing concepts through its balance scale imagery, making it suitable for license-related UI elements, legal documentation sections, or compliance indicators.
+## Migration
+
+Replace usages with the equivalent from the `icons-v2-generated` package:
+
+```typescript
+// ❌ Deprecated
+import { CustomLicenseIcon } from './custom-license-icon';
+
+// ✅ Preferred
+import { LicenseIcon } from '@/components/icons-v2-generated';
+```

package/src/components/icons/.custom-star-icon.md

@@ -1,42 +1,34 @@
-<!-- source-hash: 83727dd107a874daa6dc83832b652826 -->
-A customizable star icon component built as an SVG React element with configurable styling properties.
+<!-- source-hash: b232a10883c6ed68e5529b1e8d46ef7b -->
+Renders a customizable star SVG icon as a React component with configurable dimensions, fill color, and className support.
 
 ## Key Components
 
-**CustomStarIconProps Interface**
-- `className?: string` - Optional CSS class for styling
-- `fill?: string` - Star color (defaults to "#888888")
-- `width?: number` - Icon width in pixels (defaults to 24)
-- `height?: number` - Icon height in pixels (defaults to 24)
+### `CustomStarIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — | CSS class for the SVG element |
+| `fill` | `string` | `"#888888"` | Fill color for the star path |
+| `width` | `number` | `24` | SVG width in pixels |
+| `height` | `number` | `24` | SVG height in pixels |
 
-**CustomStarIcon Component**
-- Renders an outlined star SVG with 24x24 viewBox
-- Supports all standard SVG props via spread operator
-- Uses a detailed path element for crisp star outline
-- Responsive design with configurable dimensions
+### `CustomStarIcon`
+A functional React component rendering a 24×24 viewBox outlined star SVG path. Accepts additional SVG props via spread.
+
+> **Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { CustomStarIcon } from './custom-star-icon';
 
-// Basic usage with defaults (gray, 24x24)
+// Default gray star
 <CustomStarIcon />
 
-// Customized star icon
-<CustomStarIcon 
-  fill="#FFD700" 
-  width={32} 
+// Custom colored and sized star
+<CustomStarIcon
+  fill="#FFC008"
+  width={32}
   height={32}
-  className="star-favorite"
-/>
-
-// With additional SVG properties
-<CustomStarIcon 
-  fill="#FF6B6B"
-  onClick={handleStarClick}
-  style={{ cursor: 'pointer' }}
+  className="star-rating-icon"
 />
-```
-
-The component is ideal for rating systems, favorites indicators, or decorative elements where a consistent star shape is needed across different sizes and colors.
+```

package/src/components/icons/.custom-time-icon.md

@@ -1,33 +1,32 @@
-<!-- source-hash: 8a740ed13637e455001ea1a0197be196 -->
-A customizable clock/time SVG icon component built with React and TypeScript, featuring a circular clock face with hour and minute hands.
+<!-- source-hash: 42348a97df9cf8a128e3ac5474b5ab52 -->
+A deprecated SVG clock/time icon React component with configurable dimensions, color, and className props.
 
 ## Key Components
 
-- **`CustomTimeIconProps`** - TypeScript interface defining optional props for styling and sizing
-- **`CustomTimeIcon`** - React functional component that renders an SVG clock icon with customizable appearance
+### `CustomTimeIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — | CSS class for the SVG element |
+| `fill` | `string` | `"#888888"` | Icon fill color |
+| `width` | `number` | `24` | Icon width in pixels |
+| `height` | `number` | `24` | Icon height in pixels |
+
+### `CustomTimeIcon`
+Renders a 24×24 SVG clock icon composed of two paths: a circular outline and a clock-hand indicator.
+
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { CustomTimeIcon } from './custom-time-icon';
 
-// Basic usage with default gray color and 24px size
+// Default usage
 <CustomTimeIcon />
 
-// Customized with blue color and larger size
-<CustomTimeIcon 
-  fill="#3b82f6" 
-  width={32} 
-  height={32} 
-  className="my-clock-icon" 
-/>
-
-// With additional props passed through
-<CustomTimeIcon 
-  fill="#ef4444" 
-  onClick={handleTimeClick}
-  aria-label="Current time"
-/>
-```
-
-The icon displays a clean clock face with the hands positioned at approximately 3:00. All props are optional, with sensible defaults of 24px dimensions and a neutral gray color (#888888). The component spreads additional props to the SVG element for maximum flexibility.
+// Custom color and size
+<CustomTimeIcon fill="#FFC008" width={32} height={32} />
+
+// With Tailwind class
+<CustomTimeIcon className="opacity-50" fill="#333333" />
+```

package/src/components/icons/.cut-vendor-costs-icon.md

@@ -1,33 +1,20 @@
-<!-- source-hash: 1831ee014b473565a002095ef13ab3a5 -->
-A React component that renders an SVG icon representing cost-cutting or vendor cost reduction, featuring a trophy-like design with a dollar sign symbol.
+<!-- source-hash: e191863fe7e679954885656abe363a46 -->
+SVG icon component representing a "Cut Vendor Costs" concept, rendered as a stylized piggy bank or cost-reduction symbol in Flamingo yellow (`#FFC008`).
 
 ## Key Components
 
-- **CutVendorCostsIcon**: A functional React component that renders an SVG icon
-- **Props Interface**: Accepts `className` for styling and all standard SVG element properties via spread operator
-- **SVG Elements**: Two path elements creating a trophy with dollar sign design in golden yellow color (`#FFC008`)
+- **`CutVendorCostsIcon`** — A deprecated React SVG icon component accepting standard SVG props plus an optional `className`.
 
 ## Usage Example
 
 ```typescript
-import React from 'react';
 import { CutVendorCostsIcon } from './cut-vendor-costs-icon';
 
 // Basic usage
 <CutVendorCostsIcon />
 
-// With custom styling
-<CutVendorCostsIcon 
-  className="w-6 h-6 text-yellow-500" 
-  onClick={() => console.log('Icon clicked')}
-/>
-
-// With custom dimensions
-<CutVendorCostsIcon 
-  width="32" 
-  height="32" 
-  className="hover:opacity-80 cursor-pointer"
-/>
+// With custom class and size override
+<CutVendorCostsIcon className="my-icon" width={32} height={38} />
 ```
 
-The component uses a fixed viewBox of "0 0 20 24" and defaults to 20x24 dimensions, making it suitable for buttons, navigation elements, or any UI context where a cost-reduction visual indicator is needed.
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead of this component.

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

@@ -1,31 +1,26 @@
-<!-- source-hash: 9e2db9a16cff17fa0ce8f7cad8f86fc4 -->
-A React component that renders an SVG dashboard/speedometer icon with customizable styling properties.
+<!-- source-hash: 97bf8bc82c3467316f43453612a68c58 -->
+A deprecated React SVG icon component rendering a dashboard/gauge icon, intended to be replaced by the `icons-v2-generated` icon set.
 
 ## Key Components
 
-- **DashboardIcon**: Main functional component that renders a dashboard/speedometer SVG icon
-- **DashboardIconProps**: TypeScript interface defining optional props for className, size, and color customization
+- **`DashboardIconProps`** — Interface accepting optional `className`, `size` (default `20`), and `color` (default `'white'`) props
+- **`DashboardIcon`** — Named export rendering a 24×24 SVG gauge/speedometer icon
+
+> ⚠️ **Deprecated:** This component is marked `@deprecated`. Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { DashboardIcon } from './dashboard-icon'
 
-// Basic usage with defaults (20px size, white color)
+// Default usage
 <DashboardIcon />
 
-// Customized with specific styling
-<DashboardIcon 
-  className="dashboard-nav-icon" 
-  size={24} 
-  color="#3B82F6" 
-/>
-
-// In a navigation menu
-<button className="nav-item">
-  <DashboardIcon size={16} color="currentColor" />
-  <span>Dashboard</span>
-</button>
+// Custom color and size
+<DashboardIcon color="#FFC008" size={32} className="nav-icon" />
 ```
 
-The component uses a fixed 24x24 viewBox regardless of the size prop, ensuring consistent aspect ratio. The SVG depicts a dashboard/speedometer with a needle indicator and circular gauge, making it ideal for dashboard navigation or analytics interfaces.
+## Notes
+
+- The `size` prop is accepted but **not applied** to the SVG — the rendered output is always `24×24`. If size control is needed, apply it via `className` with CSS or migrate to `icons-v2-generated`.
+- The `className` prop is also accepted but **not forwarded** to the SVG element.

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

@@ -1,38 +1,31 @@
-<!-- source-hash: ba19fdd608b537e3bc3b96e77d32ec6e -->
-A React SVG icon component that renders the official Deno logo as a scalable vector graphic with customizable size, styling, and color properties.
+<!-- source-hash: acff6e718060b19b06bb3a57458d9217 -->
+A **deprecated** React SVG icon component rendering the Deno logo, marked for replacement by `icons-v2-generated`.
 
 ## Key Components
 
-- **DenoIconProps**: TypeScript interface defining component props
-  - `size?: number` - Icon dimensions (default: 16px)
-  - `className?: string` - CSS class names for styling
-  - `color?: string` - Fill color for the SVG paths (default: 'white')
-
-- **DenoIcon**: React functional component that renders the Deno dinosaur logo
-  - Uses inline SVG with proper viewBox for scalability
-  - Includes the complete Deno logo path data
-  - Supports customization via props
+- **`DenoIconProps`** *(deprecated)* — Interface with optional `size` (number), `className` (string), and `color` (string) props
+- **`DenoIcon`** *(deprecated)* — Functional component rendering an inline SVG of the Deno logo
 
 ## Usage Example
 
 ```typescript
 import { DenoIcon } from './deno-icon'
 
-// Basic usage with defaults (16px, white)
+// Default usage (16px, white)
 <DenoIcon />
 
 // Custom size and color
-<DenoIcon size={32} color="#000000" />
+<DenoIcon size={32} color="#000000" className="my-icon" />
+```
 
-// With custom styling
-<DenoIcon 
-  size={24} 
-  color="currentColor" 
-  className="hover:opacity-80 transition-opacity" 
-/>
+## Notes
 
-// Large icon for headers
-<DenoIcon size={48} color="#40E0D0" />
-```
+> ⚠️ **Deprecated** — Both `DenoIconProps` and `DenoIcon` are marked `@deprecated`. Use icons from `icons-v2-generated` instead.
+
+Default prop values:
 
-The component is optimized for accessibility and performance, using a single SVG element with the official Deno branding colors and proportions. The `displayName` is set for better debugging in React DevTools.
+| Prop | Default |
+|------|---------|
+| `size` | `16` |
+| `className` | `''` |
+| `color` | `'white'` |

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

@@ -1,34 +1,23 @@
-<!-- source-hash: 818b8cf95bcb94bf34ee824b6fd78ece -->
-A React component that renders a customizable donut/loading spinner icon as an SVG graphic.
+<!-- source-hash: 18467588c4c8d9046f755ef08e2dd3ce -->
+Renders a donut/ring SVG icon with a configurable color and CSS class. **Deprecated** — new code should use icons from `icons-v2-generated` instead.
 
 ## Key Components
 
-- **DonutIcon**: Default export function component that renders an SVG donut icon
-- **Props Interface**: Accepts optional `className` and `color` props for styling customization
-- **SVG Path Elements**: Two path elements creating the donut shape with inner and outer rings
+- **`DonutIcon`** — A React functional component that returns a 24×24 SVG donut icon.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | Additional CSS classes applied to the `<svg>` element |
+| `color` | `string` | `'white'` | Fill color for all SVG paths |
 
 ## Usage Example
 
 ```typescript
-import { DonutIcon } from './donut-icon';
-
-// Basic usage with default white color
+// Basic usage
 <DonutIcon />
 
-// With custom color
-<DonutIcon color="#3b82f6" />
-
-// With custom styling
-<DonutIcon 
-  className="w-8 h-8 animate-spin" 
-  color="currentColor" 
-/>
-
-// As a loading indicator
-<div className="flex items-center gap-2">
-  <DonutIcon className="animate-spin" color="#10b981" />
-  <span>Loading...</span>
-</div>
+// Custom color and class
+<DonutIcon color="#FFC008" className="w-6 h-6 opacity-80" />
 ```
 
-The icon renders as a 24x24 SVG with a donut/ring shape, commonly used for loading states, progress indicators, or decorative elements. The component accepts standard HTML props and can be easily styled with CSS classes or inline styles.
+> ⚠️ **Deprecated:** This icon is marked for removal. Use the equivalent icon from `icons-v2-generated` in new code.

package/src/components/icons/.double-chevron-icon.md

@@ -1,45 +1,37 @@
-<!-- source-hash: 8a89f271601e0a30a76c210547f94caf -->
-A React SVG icon component that renders double chevron arrows with configurable direction, size, and color properties.
+<!-- source-hash: 0012cf080129b0f8dfed50a5c9c4705b -->
+A deprecated React SVG icon component that renders a double chevron (double arrow) in four directional orientations via CSS rotation.
 
 ## Key Components
 
-- **DoubleChevronIcon**: Main functional component that renders a double chevron SVG icon
-- **DoubleChevronIconProps**: TypeScript interface defining component props
-- **DoubleChevronDirection**: Type union for directional variants ('left' | 'right' | 'up' | 'down')
-- **rotationMap**: Record mapping directions to Tailwind CSS rotation classes
+### Types
+- **`DoubleChevronDirection`** — Union type: `'left' | 'right' | 'up' | 'down'`
 
-## Key Features
+### Props (`DoubleChevronIconProps`)
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | Additional CSS classes |
+| `size` | `number` | `20` | Width and height in pixels |
+| `direction` | `DoubleChevronDirection` | `'left'` | Arrow direction |
+| `color` | `string` | `'#888888'` | SVG fill color |
 
-- **Directional Control**: Supports left, right, up, and down orientations via CSS transforms
-- **Customizable Styling**: Configurable size, color, and additional CSS classes
-- **Smooth Transitions**: Built-in 200ms transition animations for direction changes
-- **Accessibility**: Semantic SVG structure with proper viewBox and fill properties
+### `rotationMap`
+Internal lookup table mapping each direction to a Tailwind rotation class (`rotate-0`, `rotate-180`, `rotate-90`, `-rotate-90`).
 
 ## Usage Example
 
 ```typescript
-import { DoubleChevronIcon } from './components/icons/double-chevron-icon'
-
-function NavigationButtons() {
-  return (
-    <div className="flex gap-2">
-      {/* Default left-pointing chevron */}
-      <DoubleChevronIcon />
-      
-      {/* Custom sized right-pointing chevron */}
-      <DoubleChevronIcon 
-        direction="right" 
-        size={32} 
-        color="#3b82f6" 
-      />
-      
-      {/* Up arrow with custom styling */}
-      <DoubleChevronIcon 
-        direction="up"
-        className="hover:scale-110"
-        color="#ef4444"
-      />
-    </div>
-  )
-}
-```
+import { DoubleChevronIcon } from './double-chevron-icon'
+
+// Default left-pointing chevron
+<DoubleChevronIcon />
+
+// Custom size, direction, and color
+<DoubleChevronIcon
+  direction="right"
+  size={16}
+  color="#FFC008"
+  className="ml-2"
+/>
+```
+
+> ⚠️ **Deprecated** — This component is marked for removal. Use the equivalent icon from `icons-v2-generated` instead.

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

@@ -1,12 +1,9 @@
-<!-- source-hash: b059779e79784c7f4df6e6e143160b0e -->
-A React SVG component that renders the official Elestio logo with collision-safe unique IDs to prevent conflicts when multiple instances are used on the same page.
+<!-- source-hash: c568e373a2b482ab8ad55552eb4079d7 -->
+Renders the official Elestio brand logo as an inline SVG React component, using `React.useId()` to generate unique gradient and mask IDs that prevent collisions when the component is rendered multiple times on the same page.
 
 ## Key Components
 
-- **ElestioLogo**: Main component that renders the Elestio logo as an SVG
-- **uniqueId generation**: Uses `React.useId()` to create unique identifiers for SVG elements
-- **Collision prevention**: Ensures mask and gradient IDs don't conflict between multiple logo instances
-- **Customizable props**: Accepts standard SVG props and optional className for styling
+- **`ElestioLogo`** *(deprecated)* — SVG React component accepting standard `SVGSVGElement` props plus an optional `className`. Renders a 25×24px multi-color Elestio logo with five linear gradient segments (orange, red, purple, yellow, blue) composited via an alpha mask.
 
 ## Usage Example
 
@@ -16,22 +13,15 @@ import { ElestioLogo } from './elestio-logo';
 // Basic usage
 <ElestioLogo />
 
-// With custom styling
-<ElestioLogo className="w-8 h-8" />
-
-// With additional SVG props
-<ElestioLogo 
-  className="logo" 
-  width={50} 
-  height={48} 
-  aria-label="Elestio company logo"
-/>
-
-// Multiple instances on same page (safe due to unique IDs)
-<div>
-  <ElestioLogo className="header-logo" />
-  <ElestioLogo className="footer-logo" />
-</div>
+// With custom sizing via className
+<ElestioLogo className="w-8 h-8 shrink-0" />
+
+// Passing native SVG props
+<ElestioLogo aria-label="Elestio" role="img" />
 ```
 
-The component features a complex gradient design with multiple colored segments (red, orange, purple, blue, yellow) that form the distinctive Elestio "e" symbol. The unique ID system prevents SVG definition conflicts that commonly occur when the same SVG with internal references is rendered multiple times.
+## Notes
+
+> ⚠️ **Deprecated** — This component is marked `@deprecated`. Use the equivalent icon from `icons-v2-generated` instead.
+
+The unique ID suffix (via `React.useId()`) is applied to all `linearGradient` and `mask` elements, preventing the common SVG bug where duplicate `id` attributes across multiple instances cause gradients and clip-paths to reference the wrong definition.

package/src/components/icons/.empty-vendor-icon.md

@@ -1,10 +1,15 @@
-<!-- source-hash: c7331d428951f92ddbb4f85c3451443c -->
-A React component that renders a placeholder SVG icon for vendors without custom icons. The component displays a generic patterned square icon with rounded corners.
+<!-- source-hash: 014c102abc20fc25a1d9822d195e6330 -->
+A deprecated React component that renders a 24×24 SVG vendor placeholder icon using an embedded base64 PNG image pattern.
 
 ## Key Components
 
-- **EmptyVendorIcon** - Main functional component that renders an SVG placeholder icon
-- **EmptyVendorIconProps** - TypeScript interface defining optional className prop for styling customization
+### `EmptyVendorIconProps`
+Interface with a single optional `className` prop for custom styling.
+
+### `EmptyVendorIcon`
+A functional React component that renders an SVG with a rounded rectangle shape (`4px` corner radius via path) filled with a tiled pattern referencing a base64-encoded 96×96 PNG image.
+
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
@@ -15,19 +20,12 @@ import { EmptyVendorIcon } from './empty-vendor-icon';
 <EmptyVendorIcon />
 
 // With custom styling
-<EmptyVendorIcon className="w-8 h-8 text-gray-400" />
-
-// In a vendor list where some items lack icons
-{vendors.map(vendor => (
-  <div key={vendor.id}>
-    {vendor.icon ? (
-      <img src={vendor.icon} alt={vendor.name} />
-    ) : (
-      <EmptyVendorIcon className="vendor-placeholder" />
-    )}
-    <span>{vendor.name}</span>
-  </div>
-))}
+<EmptyVendorIcon className="w-8 h-8 opacity-50" />
 ```
 
-The SVG is embedded with a base64-encoded image pattern that creates a subtle textured appearance. The icon maintains a 24x24 viewBox and accepts standard CSS classes for responsive sizing and theming.
+## Notes
+
+- Renders at a fixed `24×24` viewport but can be resized via `className` (e.g., Tailwind `w-*`/`h-*`)
+- Uses `xlink:href` for the internal SVG pattern reference — a legacy SVG attribute still broadly supported
+- The embedded base64 PNG avoids any external image dependency, making it fully self-contained
+- The component is marked `@deprecated` — prefer the modern `icons-v2-generated` icon set for new usage

package/src/components/icons/.explore-categories-icon.md

@@ -1,43 +1,32 @@
-<!-- source-hash: 8756de8695aacae96477d5a94c9a3b50 -->
-A React icon component that renders an SVG graphic for exploring categories functionality, commonly used in navigation or menu interfaces.
+<!-- source-hash: 9d203d1abefa6e4472d61cadeb4707c9 -->
+Deprecated SVG icon component rendering an "explore categories" symbol as an inline React SVG element.
 
 ## Key Components
 
-- **ExploreCategoriesIconProps**: TypeScript interface defining optional props for customization
-- **ExploreCategoriesIcon**: Functional React component that renders the SVG icon
+### `ExploreCategoriesIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | SVG fill color |
+| `className` | `string` | `'w-6 h-6'` | CSS class names |
+| `width` | `number` | — | Explicit SVG width |
+| `height` | `number` | — | Explicit SVG height |
 
-**Props:**
-- `color` - Fill color for the SVG (default: 'white')
-- `className` - CSS classes for styling (default: 'w-6 h-6')
-- `width` - Explicit width override
-- `height` - Explicit height override
+### `ExploreCategoriesIcon`
+A functional React component that renders a 21×21 viewBox SVG icon representing an "explore categories" action (two-path composition of a bookmark/tag shape).
 
 ## Usage Example
 
 ```typescript
 import { ExploreCategoriesIcon } from './explore-categories-icon';
 
-// Basic usage with defaults
+// Default usage (white, 24×24 via Tailwind)
 <ExploreCategoriesIcon />
 
-// Custom styling and color
-<ExploreCategoriesIcon 
-  className="w-8 h-8" 
-  color="#3B82F6" 
-/>
-
-// Explicit dimensions
-<ExploreCategoriesIcon 
-  width={32}
-  height={32}
-  color="currentColor"
-/>
-
-// In a button component
-<button className="flex items-center gap-2">
-  <ExploreCategoriesIcon color="#059669" />
-  <span>Explore Categories</span>
-</button>
+// Custom color and size via className
+<ExploreCategoriesIcon color="#FFC008" className="w-8 h-8" />
+
+// Explicit pixel dimensions
+<ExploreCategoriesIcon color="black" width={32} height={32} />
 ```
 
-The SVG features a complex path design with viewBox "0 0 21 21" and includes layered geometric shapes that form a recognizable categories/exploration icon.
+> ⚠️ **Deprecated** — This component is marked `@deprecated`. Use the equivalent icon from `icons-v2-generated` instead.