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

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

@@ -1,34 +1,29 @@
-<!-- source-hash: 47565392bba44f83464c3c3a5a0c3f3c -->
-A reusable React SVG icon component that renders a sparkles/magic icon with customizable appearance properties.
+<!-- source-hash: c2271a35efa256ec2ffbdf8d4accb9f0 -->
+A deprecated React SVG icon component rendering a sparkles/magic wand symbol, intended to be replaced by the `icons-v2-generated` icon set.
 
 ## Key Components
 
-- **`SparklesIcon`** - Main functional component that renders an SVG sparkles icon
-- **`SparklesIconProps`** - TypeScript interface defining component props:
-  - `className` - Optional CSS class names for styling
-  - `color` - Icon color (defaults to `currentColor`)
-  - `size` - Icon dimensions in pixels (defaults to 20)
+- **`SparklesIcon`** — A functional React component that renders a 24×24 viewBox SVG sparkles icon.
+- **`SparklesIconProps`** — Interface defining optional props:
+  - `className` — CSS class string (default: `''`)
+  - `color` — Fill/stroke color (default: `'currentColor'`)
+  - `size` — Width and height in pixels (default: `20`)
+
+> ⚠️ **Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { SparklesIcon } from './sparkles-icon'
 
-// Basic usage with defaults
+// Default usage
 <SparklesIcon />
 
-// Customized with props
-<SparklesIcon 
-  size={32}
-  color="#ff6b6b"
-  className="animate-pulse"
-/>
-
-// Using with Tailwind classes
-<SparklesIcon 
-  size={24}
-  className="text-purple-500 hover:text-purple-700 transition-colors"
-/>
-```
-
-The component renders an SVG with a main sparkle shape and a small cross accent, making it perfect for indicating magical features, AI assistance, or special functionality in user interfaces.
+// Custom size and color
+<SparklesIcon size={24} color="#FFC008" className="ml-2" />
+
+// Inheriting parent text color via currentColor
+<span className="text-yellow-400">
+  <SparklesIcon size={16} />
+</span>
+```

package/src/components/icons/.sso-configuration-icon.md

@@ -1,31 +1,44 @@
-<!-- source-hash: 691ad16e9a142eaa2a9616f1865df5f9 -->
-A React component that renders an SVG icon representing SSO (Single Sign-On) configuration, featuring a security lock symbol combined with user authentication indicators.
+<!-- source-hash: 17465a6ce8bb3188e0978bf09eeae152 -->
+A deprecated React SVG icon component rendering an SSO (Single Sign-On) configuration symbol with customizable size, color, and className props.
 
 ## Key Components
 
-- **SSOConfigurationIcon**: Main functional component that renders a customizable SSO configuration SVG icon
-- **SSOConfigurationIconProps**: TypeScript interface defining the component's optional props (className, size, color)
+### `SSOConfigurationIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | Additional CSS classes |
+| `size` | `number` | `24` | Width and height in pixels |
+| `color` | `string` | `'white'` | SVG fill color |
+
+### `SSOConfigurationIcon`
+Exported function component that renders a 24×24 viewBox SVG depicting an SSO configuration lock/key interface icon.
+
+> ⚠️ **Deprecated** — This component is marked as deprecated. Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { SSOConfigurationIcon } from './sso-configuration-icon'
 
-// Basic usage with default props
+// Default usage
 <SSOConfigurationIcon />
 
-// Customized with specific styling
-<SSOConfigurationIcon 
+// Custom size and color
+<SSOConfigurationIcon
   size={32}
-  color="#007bff"
-  className="sso-icon"
+  color="#FFC008"
+  className="my-icon"
 />
-
-// In a button or menu item
-<button className="config-button">
-  <SSOConfigurationIcon size={20} color="currentColor" />
-  Configure SSO
-</button>
 ```
 
-The component provides flexible styling options with sensible defaults (24px size, white color) and accepts standard HTML attributes through the className prop. The SVG uses a viewBox for scalability and includes detailed path elements that form a lock icon combined with user authentication symbols, making it ideal for SSO configuration interfaces.
+## Migration
+
+Replace usages with the equivalent from the generated icon library:
+
+```typescript
+// ❌ Deprecated
+import { SSOConfigurationIcon } from './sso-configuration-icon'
+
+// ✅ Preferred
+import { SSOConfigurationIcon } from '@/components/icons-v2-generated'
+```

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

@@ -1,30 +1,32 @@
-<!-- source-hash: ef195691714280bb866bd6208f08e244 -->
-A React component that renders an SVG sun icon with customizable styling properties for theme switching and UI elements.
+<!-- source-hash: bb58fa13a6ca46e852e5f083c8957ff4 -->
+A deprecated SVG sun icon React component with configurable size and color props.
 
 ## Key Components
 
-- **SunIcon**: React functional component that renders a detailed sun SVG icon
-- **SunIconProps**: TypeScript interface defining optional props for customization
-- **SVG Elements**: Two path elements creating the sun's center circle and radiating rays
+### `SunIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | Fill color for the SVG paths |
+| `className` | `string` | `""` | CSS class name(s) for the SVG element |
+| `width` | `number` | `24` | Width of the icon in pixels |
+| `height` | `number` | `24` | Height of the icon in pixels |
+
+### `SunIcon`
+A functional component rendering a 24×24 viewBox SVG sun icon with a circular center and eight radiating points (rays). Accepts color, size, and className overrides.
+
+> ⚠️ **Deprecated** — This component is deprecated. Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { SunIcon } from './sun-icon';
 
-// Basic usage with defaults (24x24, white)
+// Default usage (white, 24×24)
 <SunIcon />
 
-// Customized for dark mode toggle
-<SunIcon 
-  width={32} 
-  height={32} 
-  color="#f59e0b" 
-  className="hover:scale-110 transition-transform" 
-/>
-
-// Small icon for status indicators
-<SunIcon width={16} height={16} color="currentColor" />
-```
+// Custom color and size
+<SunIcon color="#FFC008" width={32} height={32} />
 
-The component provides sensible defaults (24x24 pixels, white color) while allowing full customization through props. The SVG uses a viewBox of "0 0 24 24" ensuring consistent scaling regardless of the specified width/height. The icon consists of a central circle with radiating rays, making it ideal for light mode indicators, weather displays, or theme toggle buttons.
+// With Tailwind class
+<SunIcon color="currentColor" className="text-yellow-400" />
+```

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

@@ -1,32 +1,30 @@
-<!-- source-hash: 27dc8c25a6053881030fcef230887494 -->
-A React component that renders an SVG table view icon with customizable size, color, and styling properties.
+<!-- source-hash: 55028a6a516bc0d8efc59b0c00aa469e -->
+A deprecated SVG icon component that renders a table view icon with customizable size, color, and CSS class.
 
 ## Key Components
 
-- **TableViewIcon**: A functional React component that exports a customizable table grid icon
-- **Props interface**: Accepts optional `className`, `size`, and `color` props with sensible defaults
-- **SVG elements**: Contains two path elements that form a table/grid visualization
+| Export | Type | Description |
+|--------|------|-------------|
+| `TableViewIcon` | React Component | Renders a table view SVG icon |
+
+### Props
+
+| Prop | Default | Description |
+|------|---------|-------------|
+| `className` | `"w-5 h-5"` | CSS class for sizing/styling |
+| `size` | `22` | Width and height in pixels |
+| `color` | `"white"` | SVG fill color |
 
 ## Usage Example
 
 ```typescript
 import { TableViewIcon } from './table-view-icon'
 
-// Basic usage with defaults
+// Basic usage
 <TableViewIcon />
 
-// Custom styling
-<TableViewIcon 
-  className="w-6 h-6" 
-  size={24} 
-  color="#3B82F6" 
-/>
-
-// In a button or interactive element
-<button className="flex items-center gap-2">
-  <TableViewIcon size={18} color="currentColor" />
-  Switch to Table View
-</button>
+// Custom size and color
+<TableViewIcon size={32} color="#FFC008" className="w-8 h-8" />
 ```
 
-The component is designed for UI elements where users can toggle between different data visualization modes, commonly used in data tables, spreadsheet applications, or dashboard interfaces. The icon visually represents a table grid structure and accepts standard styling props for integration with design systems.
+> ⚠️ **Deprecated** — This component is deprecated. Use the equivalent icon from `icons-v2-generated` instead.

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

@@ -1,35 +1,21 @@
-<!-- source-hash: 9a3b0893f7c1b31893cc6b6e47640fb2 -->
-A React component that renders a Telegram icon using SVG with customizable styling and color properties.
+<!-- source-hash: c81ff377723e81f3d20e1ad03cafc1ef -->
+Renders a Telegram-style SVG icon as a React component with configurable stroke color and CSS class support.
 
 ## Key Components
 
-- **TelegramIcon**: Main functional component that renders the Telegram icon
-- **TelegramIconProps**: TypeScript interface defining the component's props
-  - `color?: string` - Stroke color for the icon (defaults to 'white')
-  - `className?: string` - Optional CSS class name for styling
+- **`TelegramIconProps`** — Interface with optional `color` (stroke color, defaults to `'white'`) and `className` (CSS class) props.
+- **`TelegramIcon`** — ⚠️ **Deprecated.** Functional component returning a 24×24 SVG icon. Migrate to `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { TelegramIcon } from './telegram-icon';
 
-// Basic usage with default white color
+// Default white icon
 <TelegramIcon />
 
-// Custom color
-<TelegramIcon color="#0088cc" />
-
-// With custom styling
-<TelegramIcon 
-  color="#229ED9" 
-  className="telegram-icon hover:opacity-80" 
-/>
-
-// In a button component
-<button className="flex items-center gap-2">
-  <TelegramIcon color="#ffffff" className="w-5 h-5" />
-  Contact on Telegram
-</button>
+// Custom color and class
+<TelegramIcon color="#229ED9" className="my-icon" />
 ```
 
-The component uses Lucide-style SVG structure with a 24x24 viewBox and renders the iconic paper airplane shape representing Telegram's messaging platform. The icon maintains consistent stroke properties and supports responsive sizing through CSS classes.
+> **Deprecated:** Use icons from `icons-v2-generated` instead of this component.

package/src/components/icons/.thumbs-down-icon.md

@@ -1,30 +1,21 @@
-<!-- source-hash: a6ffe54d00123db9c31accb94d953877 -->
-A React SVG icon component that renders a thumbs down symbol with customizable styling and color properties.
+<!-- source-hash: 310aac5338d03f35cc9227248737e998 -->
+A deprecated SVG thumbs-down icon component with configurable size and color props.
 
 ## Key Components
 
-- **ThumbsDownIconProps** - Interface defining optional `className` and `color` props
-- **ThumbsDownIcon** - Functional component that renders an SVG thumbs down icon with default dimensions (w-6 h-6) and cyan color (#5EFAF0)
+- **`ThumbsDownIconProps`** — Interface with optional `className` (default: `'w-6 h-6'`) and `color` (default: `#5EFAF0`) props
+- **`ThumbsDownIcon`** — Deprecated functional component rendering a 23×23 SVG thumbs-down icon
+
+> ⚠️ **Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { ThumbsDownIcon } from './thumbs-down-icon';
 
-// Basic usage with defaults
+// Default usage
 <ThumbsDownIcon />
 
-// Custom styling and color
-<ThumbsDownIcon 
-  className="w-8 h-8" 
-  color="#ff0000" 
-/>
-
-// For feedback systems
-<button onClick={handleDislike}>
-  <ThumbsDownIcon className="w-5 h-5" color="#dc2626" />
-  Dislike
-</button>
-```
-
-The component uses a 23x23 viewBox with two path elements to create the thumbs down shape, making it suitable for user feedback interfaces, rating systems, or general UI interactions where negative feedback indication is needed.
+// Custom size and color
+<ThumbsDownIcon className="w-8 h-8" color="#FF0000" />
+```

package/src/components/icons/.thumbs-up-icon.md

@@ -1,30 +1,21 @@
-<!-- source-hash: 608d8e30080dae7cfff633708cefa134 -->
-A React SVG icon component that renders a thumbs-up symbol with customizable styling and color properties.
+<!-- source-hash: 328096a73cbcd948189e94e1a32f73dc -->
+SVG icon component rendering a thumbs-up symbol, deprecated in favor of the `icons-v2-generated` icon set.
 
 ## Key Components
 
-- **ThumbsUpIconProps**: Interface defining optional `className` and `color` props
-- **ThumbsUpIcon**: Functional component that renders an SVG thumbs-up icon with default pink color (`#F357BB`) and `w-6 h-6` dimensions
+- **`ThumbsUpIconProps`** — Interface accepting optional `className` (default: `'w-6 h-6'`) and `color` (default: `#F357BB`) props
+- **`ThumbsUpIcon`** — Deprecated functional component rendering a 23×23 SVG thumbs-up icon
 
 ## Usage Example
 
 ```typescript
 import { ThumbsUpIcon } from './thumbs-up-icon';
 
-// Default usage with pink color
+// Default usage
 <ThumbsUpIcon />
 
-// Custom styling and color
-<ThumbsUpIcon 
-  className="w-8 h-8" 
-  color="#3B82F6" 
-/>
-
-// Only custom size
-<ThumbsUpIcon className="w-4 h-4" />
-
-// Only custom color
-<ThumbsUpIcon color="#10B981" />
+// Custom size and color
+<ThumbsUpIcon className="w-8 h-8" color="#FF0000" />
 ```
 
-The component uses inline SVG with two path elements to create the thumbs-up shape, making it scalable and customizable while maintaining crisp rendering at any size.
+> **Deprecated:** Use icons from `icons-v2-generated` instead.

package/src/components/icons/.tool-directory-icons.md

@@ -1,40 +1,36 @@
-<!-- source-hash: 00528e355fe1871dc5ab482fbf25ba42 -->
-Collection of SVG icons for different tool categories in a directory interface, including security operations, network operations, IT services, operations, and general exploration.
+<!-- source-hash: f104d04afafde80ea6cf8f076ae5959f -->
+Renders a set of deprecated SVG icon components for the tool directory UI, providing `SOCIcon`, `NOCIcon`, `ITIcon`, `OPSIcon`, and `ExploreCategoriesIcon`.
 
 ## Key Components
 
-- **SOCIcon** - Security Operations Center icon with shield and checkmark design
-- **NOCIcon** - Network Operations Center icon featuring server/monitor representation
-- **ITIcon** - IT services icon with stacked server/hardware visualization
-- **OPSIcon** - Operations icon with folder and bookmark elements
-- **ExploreCategoriesIcon** - General exploration icon with key and folder combination
+| Export | Description |
+|--------|-------------|
+| `SOCIcon` | Shield with checkmark — Security Operations Center icon |
+| `NOCIcon` | Monitor/screen — Network Operations Center icon |
+| `ITIcon` | Server rack — IT department icon |
+| `OPSIcon` | Folder with bookmark — Operations icon |
+| `ExploreCategoriesIcon` | Linked shapes — Explore categories icon |
 
-All components share a common `IconProps` interface for consistent styling and theming.
+All components accept the same `IconProps` interface:
+
+| Prop | Type | Default |
+|------|------|---------|
+| `className` | `string` | `"w-6 h-6"` |
+| `fill` | `string` | `"white"` |
+
+> ⚠️ **Deprecated** — All exports in this file are marked `@deprecated`. Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
-import { SOCIcon, NOCIcon, ITIcon, OPSIcon, ExploreCategoriesIcon } from './tool-directory-icons';
+import { SOCIcon, NOCIcon, ITIcon } from './tool-directory-icons';
 
-// Basic usage with default styles
+// Basic usage with defaults
 <SOCIcon />
 
-// Custom styling
-<NOCIcon className="w-8 h-8" fill="#3B82F6" />
-
-// In a directory listing
-const categories = [
-  { name: 'Security Operations', icon: SOCIcon },
-  { name: 'Network Operations', icon: NOCIcon },
-  { name: 'IT Services', icon: ITIcon },
-  { name: 'Operations', icon: OPSIcon },
-  { name: 'Explore All', icon: ExploreCategoriesIcon }
-];
-
-{categories.map(({ name, icon: Icon }) => (
-  <div key={name}>
-    <Icon className="w-6 h-6 mr-2" fill="currentColor" />
-    <span>{name}</span>
-  </div>
-))}
+// Custom size and color
+<NOCIcon className="w-8 h-8" fill="#FFC008" />
+
+// With Tailwind classes
+<ITIcon className="w-5 h-5 text-gray-400" fill="currentColor" />
 ```

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

@@ -1,35 +1,38 @@
-<!-- source-hash: 61fd17c31667e8d58e909485bdebabb5 -->
-A React component that renders the Trustpilot star icon as an SVG with customizable styling and colors.
+<!-- source-hash: 4cc0196eb6037bb981d9c5d7ae5c3353 -->
+A deprecated React SVG icon component that renders the Trustpilot star logo with configurable dimensions and colors.
 
 ## Key Components
 
-- **TrustpilotIcon**: Main React functional component that renders the Trustpilot star logo
-- **TrustpilotIconProps**: TypeScript interface defining optional props for customization
-- **SVG paths**: Two path elements creating the star shape with primary and accent colors
+### `TrustpilotIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `number \| string` | `2500` | SVG width |
+| `height` | `number \| string` | `2500` | SVG height |
+| `className` | `string` | `''` | CSS class name |
+| `firstColor` | `string` | `#00b67a` | Main star fill color |
+| `secondColor` | `string` | `#005128` | Shadow/accent fill color |
+
+### `TrustpilotIcon`
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
+
+Renders a two-tone Trustpilot star SVG using the brand's standard green palette.
 
 ## Usage Example
 
 ```typescript
 import { TrustpilotIcon } from './trustpilot-icon';
 
-// Basic usage with defaults
-<TrustpilotIcon />
-
-// Customized size and colors
-<TrustpilotIcon 
-  width={100}
-  height={100}
-  className="my-trustpilot-icon"
-  firstColor="#ff6b35"
-  secondColor="#cc4125"
-/>
+// Default Trustpilot branding
+<TrustpilotIcon width={48} height={48} />
 
-// Responsive sizing
-<TrustpilotIcon 
-  width="100%"
-  height="auto"
-  className="w-8 h-8"
+// Custom colors and class
+<TrustpilotIcon
+  width={32}
+  height={32}
+  className="my-icon"
+  firstColor="#00b67a"
+  secondColor="#005128"
 />
 ```
 
-The component accepts optional props for dimensions (width/height), CSS classes, and two colors that control the star's appearance. The default colors match Trustpilot's brand green (#00b67a primary, #005128 accent). The SVG maintains its aspect ratio and scales appropriately based on the provided dimensions.
+> **Migration:** Replace usages with the equivalent icon from `icons-v2-generated` to avoid relying on deprecated components.

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

@@ -1,39 +1,37 @@
-<!-- source-hash: c288264da67f5bd0b5857f0cea300839 -->
-A React SVG icon component that renders a user profile icon with an edit/pencil overlay, commonly used in user interfaces for user account management.
+<!-- source-hash: 666e77dd792d1c7d0589ecf54a7a19f6 -->
+A deprecated SVG icon component rendering a user/profile icon with an edit indicator.
 
 ## Key Components
 
-- **UserIcon**: Main component that renders an SVG user icon with customizable styling
-- **UserIconProps**: TypeScript interface defining component props including dimensions, color, and CSS classes
+### `UserIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | Fill color for SVG paths |
+| `width` | `number \| string` | `24` | SVG width |
+| `height` | `number \| string` | `23` | SVG height |
+| `className` | `string` | `'text-current'` | CSS class for the SVG element |
+
+### `UserIcon`
+Renders a 24×23 SVG combining a user profile silhouette with a small pen/edit overlay symbol.
+
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { UserIcon } from './user-icon'
 
-function UserProfile() {
-  return (
-    <div>
-      {/* Default usage */}
-      <UserIcon />
-      
-      {/* Custom size and color */}
-      <UserIcon 
-        width={32} 
-        height={32} 
-        color="#3b82f6"
-        className="hover:scale-110 transition-transform"
-      />
-      
-      {/* Responsive sizing */}
-      <UserIcon 
-        width="100%" 
-        height="auto"
-        className="max-w-6 text-gray-600"
-      />
-    </div>
-  )
-}
+// Default usage
+<UserIcon />
+
+// Custom color and size
+<UserIcon color="#FFC008" width={32} height={32} />
+
+// With Tailwind class
+<UserIcon className="text-gray-500" color="currentColor" width={20} height={20} />
 ```
 
-The component defaults to 24x23 dimensions with white fill color and accepts standard HTML attributes for flexible styling. The SVG includes two main paths: a user silhouette and an edit pencil icon overlay, making it ideal for user account edit buttons or profile management interfaces.
+## Notes
+
+- The SVG uses `fill="none"` at the root with explicit `fill={color}` on each `<path>`, so `className` alone does not control fill color — pass `color` explicitly or use `color="currentColor"` alongside a Tailwind text color class.
+- Migrate usages to the `icons-v2-generated` package to stay aligned with the current icon system.

package/src/components/icons/.users-group-icon.md

@@ -1,37 +1,41 @@
-<!-- source-hash: 5586bb4e5b03fc4795fa7d5ba0880576 -->
-A React SVG icon component that renders a users group/team icon with customizable appearance properties.
+<!-- source-hash: 27b75ecf53cb7409dc1714708bc86d7e -->
+A deprecated SVG icon component rendering a group of users symbol, intended to be replaced by icons from the `icons-v2-generated` package.
 
 ## Key Components
 
-- **UsersGroupIcon**: Main React functional component that renders an SVG icon
-- **UsersGroupIconProps**: TypeScript interface defining optional props:
-  - `className` - CSS class string for styling
-  - `size` - Icon dimensions in pixels (default: 24)
-  - `color` - Fill color for the icon (default: 'white')
+### `UsersGroupIcon`
+A React functional component that renders a 24×24 SVG users group icon.
+
+**Props (`UsersGroupIconProps`):**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | CSS class for custom styling |
+| `size` | `number` | `24` | Width and height in pixels |
+| `color` | `string` | `'white'` | SVG fill color |
+
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
-import { UsersGroupIcon } from './users-group-icon';
+import { UsersGroupIcon } from './users-group-icon'
 
-// Basic usage with defaults
+// Basic usage
 <UsersGroupIcon />
 
 // Custom size and color
-<UsersGroupIcon size={32} color="#333" />
-
-// With additional CSS classes
-<UsersGroupIcon 
-  className="team-icon hover:opacity-80" 
-  size={20} 
-  color="currentColor" 
-/>
-
-// Responsive sizing
-<UsersGroupIcon 
-  size={window.innerWidth < 768 ? 16 : 24}
-  color="var(--primary-color)"
-/>
+<UsersGroupIcon size={32} color="#FFC008" className="my-icon" />
 ```
 
-The component uses a 24x24 viewBox and contains vector paths that create a multi-user icon design. It's ideal for UI elements representing teams, groups, or collaborative features in applications.
+## Migration
+
+Replace usages with the equivalent icon from the new icon library:
+
+```typescript
+// ❌ Deprecated
+import { UsersGroupIcon } from './users-group-icon'
+
+// ✅ Preferred
+import { UsersGroupIcon } from '@/components/icons-v2-generated'
+```