impact-nova 1.7.50 → 1.7.51

package/dist/llms/rules/real-world-patterns.js

@@ -1 +1 @@
-export default "# Impact Nova — Real-World Patterns (from production apps)\n\nPatterns observed in apps that use Impact Nova extensively (e.g. filter UIs, data tables, sheets, empty states).\n\n---\n\n## 1. Subpath imports (tree-shaking)\n\nPrefer **subpath imports** when you need only a few exports; use the barrel `impact-nova` when you need many from the same area.\n\n| Use case | Import |\n|----------|--------|\n| Button only | `import { Button } from 'impact-nova/button';` |\n| Sheet (side panel) | `import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetBody, SheetFooter } from 'impact-nova/sheet';` |\n| Filter panel | `import { FilterPanel, FilterPanelSidebar } from 'impact-nova/filter-panel';` and `FilterPanelBody`, `FilterPanelFooter` |\n| Filter strip | `import { FilterStrip } from 'impact-nova/filter-strip';` |\n| Empty state | `import { EmptyContainer, EmptyContainerImage, EmptyContainerTitle, EmptyContainerDescription, EmptyContainerAction } from 'impact-nova/empty-container';` |\n| Accordion | `import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'impact-nova/accordion';` |\n| Date pickers | `import { DateRangePicker } from 'impact-nova/date-picker';` or `WeekRangePicker`, `MonthRangePicker` |\n| Select | `import { Select } from 'impact-nova/select';` |\n| Alert | `import { Alert, AlertTitle, AlertDescription, AlertIcon } from 'impact-nova/alert';` |\n| Tooltip | `import { Tooltip, TooltipTrigger, TooltipContent } from 'impact-nova/tooltip';` |\n| Icons | `import { Pin, Unpin, Chart, getIconComponent } from 'impact-nova/icons';` |\n| AG Grid cell renderers | `import { AG_GRID_CELL_COMPONENTS, LinkCellRenderer } from 'impact-nova/ag-grid-react/cell-renderers';` |\n| Prompt | `import { Prompt } from 'impact-nova/prompt';` |\n| Radio group | `import { RadioGroup, RadioGroupItem } from 'impact-nova/radio-group';` |\n| Button group | `import { ButtonGroup } from 'impact-nova/button-group';` |\n| Smart input | `import { SmartInput as InputWrapper } from 'impact-nova/smart-input';` |\n| Chips | `import { Chip } from 'impact-nova/chips';` |\n| Loader | `import { Loader } from 'impact-nova/loader';` |\n\n---\n\n## 2. Type-only imports\n\nUse type-only imports for types to avoid pulling runtime code:\n\n```ts\nimport type { Option, MultiValue, ActionMeta } from 'impact-nova/select';\nimport type { FilterSidebarItem } from 'impact-nova/filter-panel';\nimport type { FilterItem, SavedFilterItem } from 'impact-nova/filter-strip';\nimport type { NestedListItem } from 'impact-nova/nested-list';\nimport type { FileUploadProps } from 'impact-nova/file-upload';\nimport type { BackendColDef } from 'impact-nova';\n```\n\n---\n\n## 3. Compound patterns\n\n### Filter UI (panel + strip)\n\n- **FilterPanel** + **FilterPanelSidebar** for the sliding panel; **FilterPanelBody** and **FilterPanelFooter** for content and Apply/Cancel.\n- **FilterStrip** to show applied filters (chips/tags). Types: `FilterItem`, `SavedFilterItem` from `impact-nova/filter-strip`.\n- Config drives **FilterSidebarItem** (from `impact-nova/filter-panel`); form state often with react-hook-form.\n\n### Data table + AG Grid\n\n**Mandatory (no deviation):** For DataTable or any data table using AG Grid, refer **only** to AG Grid's official documentation, follow **only** AG Grid recommended patterns, and use **only** the AG Grid API for grid operations. See resource `impact-nova://ag-grid-rules` for full rules. If the user has **ag-mcp** installed, use it for AG Grid API/docs and collaborate with this MCP for Impact Nova integration.\n\n- **DataTable**, **DataTableContent**, **DataTableSheet**, **DataTableSheetContent**, **DataTableSheetHeader**, **DataTableColumnList**, **DataTableFormatOptions** from `impact-nova`.\n- Use **processBackendColumnDefs** from `impact-nova` when column defs come from the backend; type **BackendColDef**.\n- Cell renderers: **AG_GRID_CELL_COMPONENTS** or **LinkCellRenderer** from `impact-nova/ag-grid-react/cell-renderers`; extend/wrap as needed (e.g. PlanningLinkCellRenderer).\n\n### Sheet (side panel with form)\n\n- **Sheet**, **SheetContent**, **SheetHeader**, **SheetTitle**, **SheetBody**, **SheetFooter** from `impact-nova/sheet`.\n- Use for “Match With”, “Bulk Edit”, “View Management” panels. Pair with react-hook-form for form content.\n\n### Empty state\n\n- **EmptyContainer** wrapping **EmptyContainerImage**, **EmptyContainerTitle**, **EmptyContainerDescription**, **EmptyContainerAction** (e.g. a Button to “Select filter” or “Add item”).\n\n### Tabs + NestedList + Accordion (view management)\n\n- **Tabs**, **TabsList**, **TabsTrigger**, **TabsContent** for switching sections.\n- **NestedList** with **SelectionMode**; data shape **NestedListItem** from `impact-nova/nested-list`.\n- **Accordion**, **AccordionItem**, **AccordionTrigger**, **AccordionContent** for expandable blocks (e.g. Versions & Variance).\n\n### Chart (Highcharts)\n\n- Use **Chart** from `impact-nova` (or `impact-nova/chart` if available) as the wrapper.\n- For **series, options, and configuration** refer to **Highcharts documentation** ([highcharts.com/docs](https://www.highcharts.com/docs/)); use the Highcharts API for chart behavior. Impact Nova provides the React integration and styling; options/series follow Highcharts.\n- Install: `highcharts@^12`, `highcharts-react-official@^3`, optional `highcharts-border-radius@^0.0.4`.\n\n### Toast + Alert\n\n- **toast**, **Toaster**, **useToast** from `impact-nova`; wrap app with **Toaster**.\n- **Alert**, **AlertTitle**, **AlertDescription**, **AlertIcon** from `impact-nova/alert` for inline or toast-style messages.\n\n### Command Palette & keyboard shortcuts\n\nImplementation is **more involved** than other components. Use the dedicated guide: resource **`impact-nova://command-palette`**.\n\n- **Import:** `import { CommandPaletteProvider, CommandPalette, useShortcut, useGlobalShortcut, ShortcutSettings, ShortcutScopeProvider, Kbd, useCommandPalette, useBrowserShortcuts } from 'impact-nova/command-palette';`\n- **Minimal setup:** Wrap app with `CommandPaletteProvider`; render `<CommandPalette />` once inside it (⌘K overlay). Register commands with `useShortcut` (scoped: page/module/modal) or `useGlobalShortcut` (app-wide). Use correct `scope` for priority (modal > page > module > global).\n- **Multi-table:** When multiple DataTables share the same shortcut, wrap each in `ShortcutScopeProvider` with a unique `instance` so only the focused one responds.\n- **ShortcutSettings:** AG Grid–powered panel for user customisation; put inside a Sheet (e.g. Keyboard Shortcuts settings). For AG Grid behaviour follow `impact-nova://ag-grid-rules`.\n- **Kbd:** Use `<Kbd keybinding={{ key: 'k', meta: true }} />` to show shortcut in UI. **Button trigger:** `useCommandPalette().setOpen(true)`.\n\n---\n\n## 4. App setup\n\n- **CSS once at root**: `import 'impact-nova/dist/impact-nova.css';` (e.g. in App.tsx or main.tsx).\n- **AG Grid**: Set `LicenseManager.setLicenseKey(...)` if using enterprise.\n- **Vite**: Dedupe react/ag-grid when using impact-nova to avoid dual instances:\n\n```js\nresolve: {\n  dedupe: ['react', 'react-dom', 'ag-grid-community', 'ag-grid-enterprise', 'ag-grid-react'],\n  alias: {\n    // If impact-nova/horizontal-scroller doesn't re-export default:\n    'impact-nova/horizontal-scroller': resolve(__dirname, 'node_modules/impact-nova/dist/components/ui/horizontal-scroller/horizontal-scroller.js'),\n  },\n},\n```\n\n---\n\n## 5. Known workarounds\n\n- **HorizontalScroller**: Some builds expose it as default export from the component file; if the package entry is empty, add a Vite alias to `.../horizontal-scroller/horizontal-scroller.js` and a small `declare module 'impact-nova/horizontal-scroller'` (default export + props type) for TypeScript.\n- **Chart**: If the main export path doesn’t work, apps sometimes use `import { Chart as ImpactChart } from 'impact-nova/dist/components/ui/chart/chart';`. Prefer the public export when available.\n\n---\n\n## 6. Forms and options\n\n- **Select options**: Use type **Option** (or **SelectOption**) from `impact-nova/select` for `{ value, label }` (and optional fields). **MultiValue** for multi-select.\n- **react-hook-form**: Use Impact Nova form controls (SmartInput, Select, DateRangePicker, RadioGroup, ButtonGroup, Chips, etc.) as controlled components; pass `value`/`onChange` from the form library.\n- **Validation and errors**: Show validation errors with **Alert** or field-level messages; use the form library’s error state (e.g. `formState.errors`) and optional schema validation (e.g. Zod) with react-hook-form.\n\n---\n\n## 7. Breadcrumb and toolbar\n\n- **Breadcrumb** with **BreadcrumbList**, **BreadcrumbItem**, **BreadcrumbLink**, **BreadcrumbSeparator**, **BreadcrumbPage** for table/section context.\n- **DataTableToolbar** for table toolbars (view mode, view management, filters, Update/Cancel when editing).\n\nUse these patterns so the MCP and generated code stay close to how Impact Nova is used in real apps.\n\n---\n\n## 8. CreateItemFlow (multi-step creation wizard)\n\nUse **CreateItemFlow** for any multi-step creation or onboarding wizard. It provides a split-panel layout with a left sidebar and a right content area driven by a shared context.\n\n### Import\n\n```ts\nimport {\n  CreateItemFlowRoot,\n  CreateItemFlowCard,\n  CreateItemFlowLeftPanel,\n  CreateItemFlowTitle,\n  CreateItemFlowDescription,\n  CreateItemFlowImage,\n  CreateItemFlowRightPanel,\n  CreateItemFlowStepper,\n  CreateItemFlowContentTitle,\n  CreateItemFlowContentDescription,\n  CreateItemFlowContent,\n  CreateItemFlowStepContent,\n  CreateItemFlowActions,\n} from 'impact-nova';\n```\n\n### Minimal multi-step example\n\n```tsx\nimport { useState } from 'react';\nimport {\n  CreateItemFlowRoot, CreateItemFlowCard,\n  CreateItemFlowLeftPanel, CreateItemFlowTitle, CreateItemFlowDescription, CreateItemFlowImage,\n  CreateItemFlowRightPanel, CreateItemFlowStepper,\n  CreateItemFlowContent, CreateItemFlowStepContent, CreateItemFlowContentTitle,\n  CreateItemFlowActions,\n} from 'impact-nova';\n\nexport function CreateAlertFlow() {\n  const [step, setStep] = useState(1);\n\n  return (\n    <CreateItemFlowRoot step={step} totalSteps={3} onStepChange={setStep}>\n      <CreateItemFlowCard>\n        <CreateItemFlowLeftPanel>\n          <div>\n            <CreateItemFlowTitle>Create Alert</CreateItemFlowTitle>\n            <CreateItemFlowDescription>Configure your alert step by step.</CreateItemFlowDescription>\n          </div>\n          <CreateItemFlowImage />\n        </CreateItemFlowLeftPanel>\n\n        <CreateItemFlowRightPanel>\n          <CreateItemFlowStepper />\n          <CreateItemFlowContent>\n            <CreateItemFlowStepContent forStep={1}>\n              <CreateItemFlowContentTitle>Alert Details</CreateItemFlowContentTitle>\n              {/* form fields */}\n            </CreateItemFlowStepContent>\n            <CreateItemFlowStepContent forStep={2}>\n              <CreateItemFlowContentTitle>Configuration</CreateItemFlowContentTitle>\n            </CreateItemFlowStepContent>\n            <CreateItemFlowStepContent forStep={3}>\n              <CreateItemFlowContentTitle>Review</CreateItemFlowContentTitle>\n            </CreateItemFlowStepContent>\n          </CreateItemFlowContent>\n          <CreateItemFlowActions\n            onCancel={() => {}}\n            onSubmit={() => {}}\n          />\n        </CreateItemFlowRightPanel>\n      </CreateItemFlowCard>\n    </CreateItemFlowRoot>\n  );\n}\n```\n\n### Key rules\n\n- **CreateItemFlowRoot** is the context provider — every other sub-component must be a descendant.\n- **CreateItemFlowActions** is smart: it auto-renders Cancel+Next (step 1), Back+Cancel+Next (middle), Back+Cancel+Submit (last). Pass `children` to fully override.\n- **CreateItemFlowStepContent** renders nothing when `forStep` doesn't match the current step — use one per step.\n- **CreateItemFlowImage** renders a default SVG illustration when neither `src` nor `children` are provided.\n- The left panel is hidden below the `lg` breakpoint.\n- Compose **Tabs**, **Select**, **Input**, etc. inside **CreateItemFlowContent** for rich step content.\n- For a single-step flow, set `totalSteps={1}` — the stepper is hidden and Submit appears directly.\n- To override action buttons entirely, pass children to `CreateItemFlowActions`:\n\n```tsx\n<CreateItemFlowActions>\n  <Button variant=\"tertiary\">Save as Draft</Button>\n  <div className=\"flex gap-3\">\n    <Button variant=\"secondary\">Cancel</Button>\n    <Button variant=\"default\">Publish</Button>\n  </div>\n</CreateItemFlowActions>\n```\n";
+export default "# Impact Nova — Real-World Patterns (from production apps)\n\nPatterns observed in apps that use Impact Nova extensively (e.g. filter UIs, data tables, sheets, empty states).\n\n---\n\n## 1. Subpath imports (tree-shaking)\n\nPrefer **subpath imports** when you need only a few exports; use the barrel `impact-nova` when you need many from the same area.\n\n| Use case | Import |\n|----------|--------|\n| Button only | `import { Button } from 'impact-nova/button';` |\n| Sheet (side panel) | `import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetBody, SheetFooter } from 'impact-nova/sheet';` |\n| Filter panel | `import { FilterPanel, FilterPanelSidebar } from 'impact-nova/filter-panel';` and `FilterPanelBody`, `FilterPanelFooter` |\n| Filter strip | `import { FilterStrip } from 'impact-nova/filter-strip';` |\n| Empty state | `import { EmptyContainer, EmptyContainerImage, EmptyContainerTitle, EmptyContainerDescription, EmptyContainerAction } from 'impact-nova/empty-container';` |\n| Accordion | `import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'impact-nova/accordion';` |\n| Date pickers | `import { DateRangePicker } from 'impact-nova/date-picker';` or `WeekRangePicker`, `MonthRangePicker` |\n| Select | `import { Select } from 'impact-nova/select';` |\n| Alert | `import { Alert, AlertTitle, AlertDescription, AlertIcon } from 'impact-nova/alert';` |\n| Tooltip | `import { Tooltip, TooltipTrigger, TooltipContent } from 'impact-nova/tooltip';` |\n| Icons | `import { Pin, Unpin, Chart, getIconComponent } from 'impact-nova/icons';` |\n| AG Grid cell renderers | `import { AG_GRID_CELL_COMPONENTS, LinkCellRenderer } from 'impact-nova/ag-grid-react/cell-renderers';` |\n| Prompt | `import { Prompt } from 'impact-nova/prompt';` |\n| Radio group | `import { RadioGroup, RadioGroupItem } from 'impact-nova/radio-group';` |\n| Button group | `import { ButtonGroup } from 'impact-nova/button-group';` |\n| Smart input | `import { SmartInput as InputWrapper } from 'impact-nova/smart-input';` |\n| Chips | `import { Chip } from 'impact-nova/chips';` |\n| Loader | `import { Loader } from 'impact-nova/loader';` |\n\n---\n\n## 2. Type-only imports\n\nUse type-only imports for types to avoid pulling runtime code:\n\n```ts\nimport type { Option, MultiValue, ActionMeta } from 'impact-nova/select';\nimport type { FilterSidebarItem } from 'impact-nova/filter-panel';\nimport type { FilterItem, SavedFilterItem } from 'impact-nova/filter-strip';\nimport type { NestedListItem } from 'impact-nova/nested-list';\nimport type { FileUploadProps } from 'impact-nova/file-upload';\nimport type { BackendColDef } from 'impact-nova';\n```\n\n---\n\n## 3. Compound patterns\n\n### Filter UI (panel + strip)\n\n- **FilterPanel** + **FilterPanelSidebar** for the sliding panel; **FilterPanelBody** and **FilterPanelFooter** for content and Apply/Cancel.\n- **FilterStrip** to show applied filters (chips/tags). Types: `FilterItem`, `SavedFilterItem` from `impact-nova/filter-strip`.\n- Config drives **FilterSidebarItem** (from `impact-nova/filter-panel`); form state often with react-hook-form.\n\n### Data table + AG Grid\n\n**Mandatory (no deviation):** For DataTable or any data table using AG Grid, refer **only** to AG Grid's official documentation, follow **only** AG Grid recommended patterns, and use **only** the AG Grid API for grid operations. See resource `impact-nova://ag-grid-rules` for full rules. If the user has **ag-mcp** installed, use it for AG Grid API/docs and collaborate with this MCP for Impact Nova integration.\n\n- **DataTable**, **DataTableContent**, **DataTableSheet**, **DataTableSheetContent**, **DataTableSheetHeader**, **DataTableColumnList**, **DataTableFormatOptions** from `impact-nova`.\n- Use **processBackendColumnDefs** from `impact-nova` when column defs come from the backend; type **BackendColDef**.\n- Cell renderers: **AG_GRID_CELL_COMPONENTS** or **LinkCellRenderer** from `impact-nova/ag-grid-react/cell-renderers`; extend/wrap as needed (e.g. PlanningLinkCellRenderer).\n\n### Sheet (side panel with form)\n\n- **Sheet**, **SheetContent**, **SheetHeader**, **SheetTitle**, **SheetBody**, **SheetFooter** from `impact-nova/sheet`.\n- Use for “Match With”, “Bulk Edit”, “View Management” panels. Pair with react-hook-form for form content.\n\n### Empty state\n\n- **EmptyContainer** wrapping **EmptyContainerImage**, **EmptyContainerTitle**, **EmptyContainerDescription**, **EmptyContainerAction** (e.g. a Button to “Select filter” or “Add item”).\n\n### Tabs + NestedList + Accordion (view management)\n\n- **Tabs**, **TabsList**, **TabsTrigger**, **TabsContent** for switching sections.\n- **NestedList** with **SelectionMode**; data shape **NestedListItem** from `impact-nova/nested-list`.\n- **Accordion**, **AccordionItem**, **AccordionTrigger**, **AccordionContent** for expandable blocks (e.g. Versions & Variance).\n\n### Chart (Highcharts)\n\n- Use **Chart** from `impact-nova` (or `impact-nova/chart` if available) as the wrapper.\n- For **series, options, and configuration** refer to **Highcharts documentation** ([highcharts.com/docs](https://www.highcharts.com/docs/)); use the Highcharts API for chart behavior. Impact Nova provides the React integration and styling; options/series follow Highcharts.\n- Install: `highcharts@^12`, `highcharts-react-official@^3`, optional `highcharts-border-radius@^0.0.4`.\n\n### Toast + Alert\n\n- **toast**, **Toaster**, **useToast** from `impact-nova`; wrap app with **Toaster**.\n- **Alert**, **AlertTitle**, **AlertDescription**, **AlertIcon** from `impact-nova/alert` for inline or toast-style messages.\n\n### Command Palette & keyboard shortcuts\n\nImplementation is **more involved** than other components. Use the dedicated guide: resource **`impact-nova://command-palette`**.\n\n- **Import:** `import { CommandPaletteProvider, CommandPalette, useShortcut, useGlobalShortcut, ShortcutSettings, ShortcutScopeProvider, Kbd, useCommandPalette, useBrowserShortcuts } from 'impact-nova/command-palette';`\n- **Minimal setup:** Wrap app with `CommandPaletteProvider`; render `<CommandPalette />` once inside it (⌘K overlay). Register commands with `useShortcut` (scoped: page/module/modal) or `useGlobalShortcut` (app-wide). Use correct `scope` for priority (modal > page > module > global).\n- **Multi-table:** When multiple DataTables share the same shortcut, wrap each in `ShortcutScopeProvider` with a unique `instance` so only the focused one responds.\n- **ShortcutSettings:** AG Grid–powered panel for user customisation; put inside a Sheet (e.g. Keyboard Shortcuts settings). For AG Grid behaviour follow `impact-nova://ag-grid-rules`.\n- **Kbd:** Use `<Kbd keybinding={{ key: 'k', meta: true }} />` to show shortcut in UI. **Button trigger:** `useCommandPalette().setOpen(true)`.\n\n---\n\n## 4. App setup\n\n- **CSS once at root**: `import 'impact-nova/dist/impact-nova.css';` (e.g. in App.tsx or main.tsx).\n- **AG Grid**: Set `LicenseManager.setLicenseKey(...)` if using enterprise.\n- **Vite**: Dedupe react/ag-grid when using impact-nova to avoid dual instances:\n\n```js\nresolve: {\n  dedupe: ['react', 'react-dom', 'ag-grid-community', 'ag-grid-enterprise', 'ag-grid-react'],\n  alias: {\n    // If impact-nova/horizontal-scroller doesn't re-export default:\n    'impact-nova/horizontal-scroller': resolve(__dirname, 'node_modules/impact-nova/dist/components/ui/horizontal-scroller/horizontal-scroller.js'),\n  },\n},\n```\n\n---\n\n## 5. Known workarounds\n\n- **HorizontalScroller**: Some builds expose it as default export from the component file; if the package entry is empty, add a Vite alias to `.../horizontal-scroller/horizontal-scroller.js` and a small `declare module 'impact-nova/horizontal-scroller'` (default export + props type) for TypeScript.\n- **Chart**: If the main export path doesn’t work, apps sometimes use `import { Chart as ImpactChart } from 'impact-nova/dist/components/ui/chart/chart';`. Prefer the public export when available.\n\n---\n\n## 6. Forms and options\n\n- **Select options**: Use type **Option** (or **SelectOption**) from `impact-nova/select` for `{ value, label }` (and optional fields). **MultiValue** for multi-select.\n- **react-hook-form**: Use Impact Nova form controls (SmartInput, Select, DateRangePicker, RadioGroup, ButtonGroup, Chips, etc.) as controlled components; pass `value`/`onChange` from the form library.\n- **Validation and errors**: Show validation errors with **Alert** or field-level messages; use the form library’s error state (e.g. `formState.errors`) and optional schema validation (e.g. Zod) with react-hook-form.\n\n---\n\n## 7. Breadcrumb and toolbar\n\n- **Breadcrumb** with **BreadcrumbList**, **BreadcrumbItem**, **BreadcrumbLink**, **BreadcrumbSeparator**, **BreadcrumbPage** for table/section context.\n- **DataTableToolbar** for table toolbars (view mode, view management, filters, Update/Cancel when editing).\n\nUse these patterns so the MCP and generated code stay close to how Impact Nova is used in real apps.\n\n---\n\n## 8. Wizard (multi-step flow)\n\nUse **Wizard** for any multi-step creation or onboarding flow. Radix-style controlled state (`value` / `onValueChange`), optional split-panel layout, and `useWizard()` for flexible footers.\n\n### Import\n\n```ts\nimport {\n  WizardRoot,\n  WizardLayout,\n  WizardSidebar,\n  WizardTitle,\n  WizardDescription,\n  WizardMedia,\n  WizardBody,\n  WizardProgress,\n  WizardHeader,\n  WizardContent,\n  WizardStep,\n  WizardFooter,\n  useWizard,\n} from 'impact-nova/wizard';\n```\n\n### Minimal multi-step example\n\n```tsx\nimport { useState } from 'react';\nimport {\n  WizardRoot, WizardLayout,\n  WizardSidebar, WizardTitle, WizardDescription, WizardMedia,\n  WizardBody, WizardProgress,\n  WizardContent, WizardStep, WizardHeader,\n  WizardFooter,\n} from 'impact-nova/wizard';\nimport { Button } from 'impact-nova/button';\n\nexport function CreateAlertFlow() {\n  const [step, setStep] = useState(1);\n\n  return (\n    <WizardRoot value={step} totalSteps={3} onValueChange={setStep}>\n      <WizardLayout>\n        <WizardSidebar>\n          <WizardTitle>Create Alert</WizardTitle>\n          <WizardDescription>Configure your alert step by step.</WizardDescription>\n          <WizardMedia />\n        </WizardSidebar>\n\n        <WizardBody>\n          <WizardProgress />\n          <WizardContent>\n            <WizardStep value={1}>\n              <WizardHeader>Alert Details</WizardHeader>\n            </WizardStep>\n            <WizardStep value={2}>\n              <WizardHeader>Configuration</WizardHeader>\n            </WizardStep>\n            <WizardStep value={3}>\n              <WizardHeader>Review</WizardHeader>\n            </WizardStep>\n          </WizardContent>\n          <WizardFooter>\n            <Button variant=\"secondary\">Cancel</Button>\n            <Button variant=\"default\">Submit</Button>\n          </WizardFooter>\n        </WizardBody>\n      </WizardLayout>\n    </WizardRoot>\n  );\n}\n```\n\n### Key rules\n\n- **WizardRoot** is the context provider — every other sub-component must be a descendant.\n- Use **useWizard()** for `goNext`, `goBack`, `isFirstStep`, `isLastStep` without prop drilling.\n- **WizardStep** renders nothing when `value` doesn't match the current step — use one per step.\n- **WizardMedia** renders a default SVG when neither `src` nor `children` are provided.\n- The sidebar is hidden below the `lg` breakpoint.\n- All sub-components except **WizardRoot** are optional — compose only what you need.\n- Compose **Tabs**, **Select**, **Input**, etc. inside **WizardContent** for rich step content.\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impact-nova",
-  "version": "1.7.50",
+  "version": "1.7.51",
   "description": "Enterprise-grade React design system built with React 19, Vite, Tailwind CSS, and Radix UI. Built-in internationalization (i18n) and comprehensive UI component library for scalable, accessible, and performant applications.",
   "type": "module",
   "main": "./dist/index.js",
@@ -348,13 +348,13 @@
       "types": "./dist/components/ui/command-palette/index.d.ts",
       "import": "./dist/components/ui/command-palette/index.js"
     },
-    "./create-item-flow": {
-      "types": "./dist/components/ui/create-item-flow/index.d.ts",
-      "import": "./dist/components/ui/create-item-flow/index.js"
+    "./wizard": {
+      "types": "./dist/components/ui/wizard/index.d.ts",
+      "import": "./dist/components/ui/wizard/index.js"
     },
-    "./report-card": {
-      "types": "./dist/components/ui/report-card/index.d.ts",
-      "import": "./dist/components/ui/report-card/index.js"
+    "./choice-card": {
+      "types": "./dist/components/ui/choice-card/index.d.ts",
+      "import": "./dist/components/ui/choice-card/index.js"
     },
     "./tailwind.config": {
       "types": "./tailwind.config.d.ts",
@@ -550,11 +550,11 @@
       "command-palette": [
         "dist/components/ui/command-palette/index.d.ts"
       ],
-      "create-item-flow": [
-        "dist/components/ui/create-item-flow/index.d.ts"
+      "wizard": [
+        "dist/components/ui/wizard/index.d.ts"
       ],
-      "report-card": [
-        "dist/components/ui/report-card/index.d.ts"
+      "choice-card": [
+        "dist/components/ui/choice-card/index.d.ts"
       ]
     }
   },

package/dist/components/ui/create-item-flow/create-item-flow.d.ts

@@ -1,46 +0,0 @@
-import * as React from "react";
-export interface CreateItemFlowStep {
-    /** Label shown under the stepper progress bar */
-    label: string;
-    /** Optional description for the step */
-    description?: string;
-}
-export interface CreateItemFlowRootProps {
-    /** Current active step (1-indexed) */
-    step?: number;
-    /** Total number of steps (auto-derived from steps[] if omitted) */
-    totalSteps?: number;
-    /** Step metadata for labels/descriptions */
-    steps?: CreateItemFlowStep[];
-    /** Callback when step changes */
-    onStepChange?: (step: number) => void;
-    children?: React.ReactNode;
-}
-declare const CreateItemFlowRoot: React.FC<CreateItemFlowRootProps>;
-declare const CreateItemFlowCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const CreateItemFlowLeftPanel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const CreateItemFlowTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
-declare const CreateItemFlowDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-export interface CreateItemFlowImageProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Image source URL. If omitted, render children instead. */
-    src?: string;
-    /** Alt text for the image */
-    alt?: string;
-}
-declare const CreateItemFlowImage: React.ForwardRefExoticComponent<CreateItemFlowImageProps & React.RefAttributes<HTMLDivElement>>;
-declare const CreateItemFlowRightPanel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export interface CreateItemFlowStepperProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Allow clicking on steps to navigate */
-    clickable?: boolean;
-}
-declare const CreateItemFlowStepper: React.ForwardRefExoticComponent<CreateItemFlowStepperProps & React.RefAttributes<HTMLDivElement>>;
-declare const CreateItemFlowContentTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
-declare const CreateItemFlowContentDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-declare const CreateItemFlowContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export interface CreateItemFlowStepContentProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Which step this content belongs to (1-indexed) */
-    forStep: number;
-}
-declare const CreateItemFlowStepContent: React.ForwardRefExoticComponent<CreateItemFlowStepContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const CreateItemFlowFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export { CreateItemFlowRoot, CreateItemFlowCard, CreateItemFlowLeftPanel, CreateItemFlowTitle, CreateItemFlowDescription, CreateItemFlowImage, CreateItemFlowRightPanel, CreateItemFlowStepper, CreateItemFlowContentTitle, CreateItemFlowContentDescription, CreateItemFlowContent, CreateItemFlowStepContent, CreateItemFlowFooter, };

package/dist/components/ui/create-item-flow/create-item-flow.js

@@ -1,231 +0,0 @@
-import { jsx as l } from "react/jsx-runtime";
-import * as r from "react";
-import { cn as n } from "../../../lib/utils.js";
-import C from "../../../icons/assets/createFlowImage.svg.js";
-const f = r.createContext(null), w = () => {
-  const t = r.useContext(f);
-  if (!t)
-    throw new Error("CreateItemFlow.* components must be used within CreateItemFlowRoot");
-  return t;
-}, u = ({
-  step: t = 1,
-  totalSteps: e,
-  steps: o = [],
-  onStepChange: a,
-  children: m
-}) => {
-  const s = e ?? o.length;
-  return /* @__PURE__ */ l(f.Provider, { value: { step: t, totalSteps: s, steps: o, onStepChange: a }, children: m });
-};
-u.displayName = "CreateItemFlowRoot";
-const I = r.forwardRef(
-  ({ className: t, children: e, ...o }, a) => /* @__PURE__ */ l(
-    "div",
-    {
-      ref: a,
-      className: n(
-        "flex flex-row bg-canvas-elevated rounded-lg shadow-elevation-card overflow-hidden w-[83%] mx-auto min-w-0 flex-1",
-        t
-      ),
-      ...o,
-      children: e
-    }
-  )
-);
-I.displayName = "CreateItemFlowCard";
-const F = r.forwardRef(
-  ({ className: t, children: e, ...o }, a) => /* @__PURE__ */ l(
-    "div",
-    {
-      ref: a,
-      className: n(
-        "hidden lg:flex flex-col w-[300px] xl:w-[427px] shrink-0 bg-canvas-elevated border-r border-stroke-hairline pt-[100px]",
-        t
-      ),
-      "data-slot": "left-panel",
-      ...o,
-      children: e
-    }
-  )
-);
-F.displayName = "CreateItemFlowLeftPanel";
-const N = r.forwardRef(
-  ({ className: t, children: e, ...o }, a) => /* @__PURE__ */ l(
-    "h1",
-    {
-      ref: a,
-      className: n("font-manrope text-[24px] font-[800] leading-[36px] text-[#0D152C] mb-3 px-6 lg:px-10 xl:px-[64px]", t),
-      ...o,
-      children: e
-    }
-  )
-);
-N.displayName = "CreateItemFlowTitle";
-const g = r.forwardRef(
-  ({ className: t, children: e, ...o }, a) => /* @__PURE__ */ l(
-    "p",
-    {
-      ref: a,
-      className: n("font-manrope text-[12px] font-[500] leading-[16px] text-[#7A8294] px-6 lg:px-10 xl:px-[64px]", t),
-      ...o,
-      children: e
-    }
-  )
-);
-g.displayName = "CreateItemFlowDescription";
-const h = r.forwardRef(
-  ({ className: t, src: e, alt: o = "Create Item Flow", children: a, ...m }, s) => /* @__PURE__ */ l(
-    "div",
-    {
-      ref: s,
-      className: n(
-        "mt-auto shrink-0 w-[200px] xl:w-[280px] h-[120px] xl:h-[166px] mx-auto xl:ml-[73px] xl:mr-[73px] mb-[100px]",
-        t
-      ),
-      "data-slot": "left-panel-image",
-      ...m,
-      children: a || (e ? /* @__PURE__ */ l(
-        "img",
-        {
-          src: e,
-          alt: o,
-          className: "w-full h-full object-contain"
-        }
-      ) : /* @__PURE__ */ l(
-        C,
-        {
-          className: "w-full h-full",
-          role: "img",
-          "aria-label": o
-        }
-      ))
-    }
-  )
-);
-h.displayName = "CreateItemFlowImage";
-const v = r.forwardRef(
-  ({ className: t, children: e, ...o }, a) => /* @__PURE__ */ l(
-    "div",
-    {
-      ref: a,
-      className: n(
-        "flex flex-col flex-1 min-w-0 overflow-hidden pt-[50px] px-6 sm:px-10 md:px-16 lg:px-20 xl:px-[60px] 2xl:px-[190px] pb-[73px]",
-        t
-      ),
-      "data-slot": "right-panel",
-      ...o,
-      children: e
-    }
-  )
-);
-v.displayName = "CreateItemFlowRightPanel";
-const y = r.forwardRef(
-  ({ className: t, clickable: e = !0, ...o }, a) => {
-    const { step: m, totalSteps: s, onStepChange: i } = w();
-    return s <= 0 ? null : /* @__PURE__ */ l(
-      "div",
-      {
-        ref: a,
-        className: n("flex gap-2 mb-[42px] shrink-0", t),
-        "data-slot": "stepper",
-        role: "list",
-        ...o,
-        children: Array.from({ length: s }, (P, p) => {
-          const d = p === m - 1, c = p < m - 1;
-          return /* @__PURE__ */ l(
-            "div",
-            {
-              role: "listitem",
-              "aria-label": `Step ${p + 1} of ${s}`,
-              "aria-current": d ? "step" : void 0,
-              tabIndex: e && i ? 0 : void 0,
-              onClick: () => e && i?.(p + 1),
-              onKeyDown: e && i ? (x) => {
-                (x.key === "Enter" || x.key === " ") && (x.preventDefault(), i(p + 1));
-              } : void 0,
-              className: n(
-                "h-2 flex-1 max-w-[132px] rounded-[4px] transition-colors duration-300",
-                d || c ? "bg-[#4259ee]" : "bg-[#e8eaf6]",
-                e && i ? "cursor-pointer" : "cursor-default"
-              )
-            },
-            p
-          );
-        })
-      }
-    );
-  }
-);
-y.displayName = "CreateItemFlowStepper";
-const R = r.forwardRef(
-  ({ className: t, children: e, ...o }, a) => /* @__PURE__ */ l(
-    "h2",
-    {
-      ref: a,
-      className: n("font-manrope text-[14px] font-[800] leading-[21px] text-[#0D152C]", t),
-      ...o,
-      children: e
-    }
-  )
-);
-R.displayName = "CreateItemFlowContentTitle";
-const b = r.forwardRef(
-  ({ className: t, children: e, ...o }, a) => /* @__PURE__ */ l(
-    "p",
-    {
-      ref: a,
-      className: n("text-[14px] font-normal leading-relaxed text-content-muted", t),
-      ...o,
-      children: e
-    }
-  )
-);
-b.displayName = "CreateItemFlowContentDescription";
-const S = r.forwardRef(
-  ({ className: t, children: e, ...o }, a) => /* @__PURE__ */ l(
-    "div",
-    {
-      ref: a,
-      className: n("flex-1 overflow-y-auto overflow-x-hidden min-h-0 p-0.5", t),
-      "data-slot": "content",
-      ...o,
-      children: e
-    }
-  )
-);
-S.displayName = "CreateItemFlowContent";
-const D = r.forwardRef(
-  ({ className: t, forStep: e, children: o, ...a }, m) => {
-    const { step: s } = w();
-    return s !== e ? null : /* @__PURE__ */ l("div", { ref: m, className: n(t), "data-step": e, ...a, children: o });
-  }
-);
-D.displayName = "CreateItemFlowStepContent";
-const k = r.forwardRef(
-  ({ className: t, children: e, ...o }, a) => /* @__PURE__ */ l(
-    "div",
-    {
-      ref: a,
-      className: n("flex items-center justify-between mt-auto shrink-0 pt-6 pb-[27px]", t),
-      "data-slot": "footer",
-      ...o,
-      children: e
-    }
-  )
-);
-k.displayName = "CreateItemFlowFooter";
-export {
-  I as CreateItemFlowCard,
-  S as CreateItemFlowContent,
-  b as CreateItemFlowContentDescription,
-  R as CreateItemFlowContentTitle,
-  g as CreateItemFlowDescription,
-  k as CreateItemFlowFooter,
-  h as CreateItemFlowImage,
-  F as CreateItemFlowLeftPanel,
-  v as CreateItemFlowRightPanel,
-  u as CreateItemFlowRoot,
-  D as CreateItemFlowStepContent,
-  y as CreateItemFlowStepper,
-  N as CreateItemFlowTitle
-};

package/dist/components/ui/create-item-flow/index.d.ts

@@ -1 +0,0 @@
-export { CreateItemFlowRoot, CreateItemFlowCard, CreateItemFlowLeftPanel, CreateItemFlowTitle, CreateItemFlowDescription, CreateItemFlowImage, CreateItemFlowRightPanel, CreateItemFlowStepper, CreateItemFlowContentTitle, CreateItemFlowContentDescription, CreateItemFlowContent, CreateItemFlowStepContent, CreateItemFlowFooter, type CreateItemFlowRootProps, type CreateItemFlowImageProps, type CreateItemFlowStep, type CreateItemFlowStepperProps, type CreateItemFlowStepContentProps, } from './create-item-flow';

package/dist/components/ui/create-item-flow/index.js

@@ -1,16 +0,0 @@
-import { CreateItemFlowCard as o, CreateItemFlowContent as r, CreateItemFlowContentDescription as C, CreateItemFlowContentTitle as a, CreateItemFlowDescription as l, CreateItemFlowFooter as m, CreateItemFlowImage as F, CreateItemFlowLeftPanel as I, CreateItemFlowRightPanel as w, CreateItemFlowRoot as n, CreateItemFlowStepContent as i, CreateItemFlowStepper as p, CreateItemFlowTitle as c } from "./create-item-flow.js";
-export {
-  o as CreateItemFlowCard,
-  r as CreateItemFlowContent,
-  C as CreateItemFlowContentDescription,
-  a as CreateItemFlowContentTitle,
-  l as CreateItemFlowDescription,
-  m as CreateItemFlowFooter,
-  F as CreateItemFlowImage,
-  I as CreateItemFlowLeftPanel,
-  w as CreateItemFlowRightPanel,
-  n as CreateItemFlowRoot,
-  i as CreateItemFlowStepContent,
-  p as CreateItemFlowStepper,
-  c as CreateItemFlowTitle
-};

package/dist/components/ui/report-card/index.d.ts

@@ -1 +0,0 @@
-export { ReportCardRoot, ReportCardRadio, ReportCardContent, ReportCardIcon, ReportCardTitle, ReportCardTitleRow, ReportCardDescription, type ReportCardRootProps, type ReportCardContentProps, type ReportCardTitleRowProps, } from './report-card';

package/dist/components/ui/report-card/index.js

@@ -1,10 +0,0 @@
-import { ReportCardContent as t, ReportCardDescription as e, ReportCardIcon as R, ReportCardRadio as p, ReportCardRoot as a, ReportCardTitle as d, ReportCardTitleRow as C } from "./report-card.js";
-export {
-  t as ReportCardContent,
-  e as ReportCardDescription,
-  R as ReportCardIcon,
-  p as ReportCardRadio,
-  a as ReportCardRoot,
-  d as ReportCardTitle,
-  C as ReportCardTitleRow
-};

package/dist/components/ui/report-card/report-card.d.ts

@@ -1,19 +0,0 @@
-import * as React from "react";
-export interface ReportCardRootProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Whether this card is currently selected */
-    selected?: boolean;
-}
-declare const ReportCardRoot: React.ForwardRefExoticComponent<ReportCardRootProps & React.RefAttributes<HTMLDivElement>>;
-declare const ReportCardRadio: React.FC<{
-    className?: string;
-}>;
-export type ReportCardContentProps = React.HTMLAttributes<HTMLDivElement>;
-declare const ReportCardContent: React.ForwardRefExoticComponent<ReportCardContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const ReportCardIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const ReportCardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
-export interface ReportCardTitleRowProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: React.ReactNode;
-}
-declare const ReportCardTitleRow: React.ForwardRefExoticComponent<ReportCardTitleRowProps & React.RefAttributes<HTMLDivElement>>;
-declare const ReportCardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-export { ReportCardRoot, ReportCardRadio, ReportCardContent, ReportCardIcon, ReportCardTitle, ReportCardTitleRow, ReportCardDescription, };

package/dist/components/ui/report-card/report-card.js

@@ -1,146 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as s from "react";
-import { cn as d } from "../../../lib/utils.js";
-const p = s.createContext({ selected: !1 }), x = "var(--Colors-Neutrals-Border-Subtle, #D9DDE7)", v = "var(--Colors-Primary-Surface-Default, #4259EE)", b = "linear-gradient(281deg, var(--Colors-Greys-50, #FAFAFA) 1.7%, var(--Colors-Greys-0, #FFF) 69.58%, var(--Colors-Greys-50, #FAFAFA) 97.56%)", g = "linear-gradient(281deg, var(--Colors-Blue_01-100, #ECEEFD) 1.7%, #FFF 48.25%, var(--Colors-Blue_01-100, #ECEEFD) 97.56%)", E = s.forwardRef(
-  ({ className: r, selected: e = !1, children: o, style: t, onMouseEnter: f, onMouseLeave: m, ...u }, C) => {
-    const [R, l] = s.useState(!1), c = e || R, n = c ? v : x;
-    return /* @__PURE__ */ a(p.Provider, { value: { selected: e }, children: /* @__PURE__ */ a(
-      "div",
-      {
-        ref: C,
-        style: {
-          width: "331px",
-          height: "132px",
-          padding: "12px",
-          flexDirection: "column",
-          alignItems: "flex-start",
-          gap: "12px",
-          borderRadius: "12px",
-          borderTop: `1px solid ${n}`,
-          borderRight: `1px solid ${n}`,
-          borderBottom: `2px solid ${n}`,
-          borderLeft: `4px solid ${n}`,
-          background: c ? g : b,
-          transition: "border-color 150ms ease, background 150ms ease",
-          ...t
-        },
-        className: d(
-          "relative flex cursor-pointer select-none",
-          "outline-none focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0",
-          r
-        ),
-        "data-component": "report-card",
-        "data-selected": e || void 0,
-        role: "option",
-        "aria-selected": e,
-        tabIndex: 0,
-        onMouseEnter: (i) => {
-          l(!0), f?.(i);
-        },
-        onMouseLeave: (i) => {
-          l(!1), m?.(i);
-        },
-        ...u,
-        children: o
-      }
-    ) });
-  }
-);
-E.displayName = "ReportCardRoot";
-const D = ({ className: r }) => {
-  const { selected: e } = s.useContext(p);
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      className: d(
-        "w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
-        e ? "border-brand" : "border-[#C1C7D4]",
-        r
-      ),
-      "aria-hidden": "true",
-      children: e && /* @__PURE__ */ a("div", { className: "w-2.5 h-2.5 rounded-full bg-brand" })
-    }
-  );
-};
-D.displayName = "ReportCardRadio";
-const F = s.forwardRef(
-  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ a(
-    "div",
-    {
-      ref: t,
-      className: d("flex flex-col items-start gap-2 w-full", r),
-      "data-slot": "report-card-content",
-      ...o,
-      children: e
-    }
-  )
-);
-F.displayName = "ReportCardContent";
-const N = s.forwardRef(
-  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ a(
-    "div",
-    {
-      ref: t,
-      className: d(
-        "flex items-center justify-center shrink-0",
-        r
-      ),
-      "data-slot": "report-card-icon",
-      ...o,
-      children: e
-    }
-  )
-);
-N.displayName = "ReportCardIcon";
-const w = s.forwardRef(
-  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ a(
-    "h3",
-    {
-      ref: t,
-      className: d(
-        "font-manrope text-[16px] font-medium leading-[125%] text-[#0D152C] capitalize",
-        r
-      ),
-      ...o,
-      children: e
-    }
-  )
-);
-w.displayName = "ReportCardTitle";
-const y = s.forwardRef(
-  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ a(
-    "div",
-    {
-      ref: t,
-      className: d("flex items-center gap-1 w-full", r),
-      "data-slot": "report-card-title-row",
-      ...o,
-      children: e
-    }
-  )
-);
-y.displayName = "ReportCardTitleRow";
-const h = s.forwardRef(
-  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ a(
-    "p",
-    {
-      ref: t,
-      className: d(
-        "font-manrope text-[12px] font-medium leading-[16px] text-[#60697D]",
-        r
-      ),
-      ...o,
-      children: e
-    }
-  )
-);
-h.displayName = "ReportCardDescription";
-export {
-  F as ReportCardContent,
-  h as ReportCardDescription,
-  N as ReportCardIcon,
-  D as ReportCardRadio,
-  E as ReportCardRoot,
-  w as ReportCardTitle,
-  y as ReportCardTitleRow
-};