chore(Icon stories): tighten ResponsiveGridContainer typing and apply prettier

Address Copilot review feedback on PR #1050: type ResponsiveGridContainer
as `ComponentProps<typeof GridContainer>` and merge className via `cn`
so callers can extend the wrapper without losing the responsive-grid
class.

Also runs prettier on the file to clear pre-existing code-quality CI
failures from the migration commit (one-line JSX expressions that
prettier wants on multiple lines). Auto-format, no behavior change.

The unaddressed Copilot point — `circle[fill]` appearing in both the
stroke and fill rules of Icon.module.css — is a pre-existing bug that
the migration deliberately preserved per the byte-for-byte parity rule
(`circle[stroke]` was missing from the original styled-components
source too). Fix in a separate PR after this lands.

Author: DreaminDani

src/components/Icon/Icon.stories.tsx

@@ -6,7 +6,8 @@ import { Icon } from '@/components/Icon';
 import { IconName, IconProps, ImageType } from '@/components/Icon/Icon.types';
 import { ICONS_MAP } from '@/components/Icon/IconCommon';
 import { Container } from '@/components/Container';
-import { useState } from 'react';
+import { ComponentProps, useState } from 'react';
+import { cn } from '@/lib/cva';
 import { SearchField } from '@/components/SearchField';
 import { Title } from '@/components/Title';
 import { Panel } from '@/components/Panel';
@@ -73,71 +74,159 @@ export const DefaultMd: Story = {
 };
 
 export const SizeXs: Story = {
-  render: () => <IconHarness name="users" size="xs" />,
+  render: () => (
+    <IconHarness
+      name="users"
+      size="xs"
+    />
+  ),
 };
 
 export const SizeSm: Story = {
-  render: () => <IconHarness name="users" size="sm" />,
+  render: () => (
+    <IconHarness
+      name="users"
+      size="sm"
+    />
+  ),
 };
 
 export const SizeMd: Story = {
-  render: () => <IconHarness name="users" size="md" />,
+  render: () => (
+    <IconHarness
+      name="users"
+      size="md"
+    />
+  ),
 };
 
 export const SizeLg: Story = {
-  render: () => <IconHarness name="users" size="lg" />,
+  render: () => (
+    <IconHarness
+      name="users"
+      size="lg"
+    />
+  ),
 };
 
 export const SizeXl: Story = {
-  render: () => <IconHarness name="users" size="xl" />,
+  render: () => (
+    <IconHarness
+      name="users"
+      size="xl"
+    />
+  ),
 };
 
 export const SizeXxl: Story = {
-  render: () => <IconHarness name="users" size="xxl" />,
+  render: () => (
+    <IconHarness
+      name="users"
+      size="xxl"
+    />
+  ),
 };
 
 export const StateSuccess: Story = {
-  render: () => <IconHarness name="users" state="success" />,
+  render: () => (
+    <IconHarness
+      name="users"
+      state="success"
+    />
+  ),
 };
 
 export const StateWarning: Story = {
-  render: () => <IconHarness name="users" state="warning" />,
+  render: () => (
+    <IconHarness
+      name="users"
+      state="warning"
+    />
+  ),
 };
 
 export const StateDanger: Story = {
-  render: () => <IconHarness name="users" state="danger" />,
+  render: () => (
+    <IconHarness
+      name="users"
+      state="danger"
+    />
+  ),
 };
 
 export const StateInfo: Story = {
-  render: () => <IconHarness name="users" state="info" />,
+  render: () => (
+    <IconHarness
+      name="users"
+      state="info"
+    />
+  ),
 };
 
 export const StateSuccessSm: Story = {
-  render: () => <IconHarness name="users" state="success" size="sm" />,
+  render: () => (
+    <IconHarness
+      name="users"
+      state="success"
+      size="sm"
+    />
+  ),
 };
 
 export const StateSuccessXl: Story = {
-  render: () => <IconHarness name="users" state="success" size="xl" />,
+  render: () => (
+    <IconHarness
+      name="users"
+      state="success"
+      size="xl"
+    />
+  ),
 };
 
 export const CustomColor: Story = {
-  render: () => <IconHarness name="users" color="#c10000" />,
+  render: () => (
+    <IconHarness
+      name="users"
+      color="#c10000"
+    />
+  ),
 };
 
 export const CustomWidthHeight: Story = {
-  render: () => <IconHarness name="users" width={40} height={40} />,
+  render: () => (
+    <IconHarness
+      name="users"
+      width={40}
+      height={40}
+    />
+  ),
 };
 
 export const FlagAsset: Story = {
-  render: () => <IconHarness name="australia" size="md" />,
+  render: () => (
+    <IconHarness
+      name="australia"
+      size="md"
+    />
+  ),
 };
 
 export const LogoAsset: Story = {
-  render: () => <IconHarness name="clickhouse" size="md" />,
+  render: () => (
+    <IconHarness
+      name="clickhouse"
+      size="md"
+    />
+  ),
 };
 
 export const PaymentAsset: Story = {
-  render: () => <IconHarness name="visa" size="md" />,
+  render: () => (
+    <IconHarness
+      name="visa"
+      size="md"
+    />
+  ),
 };
 
 type IconGalleryProps = {
@@ -164,9 +253,12 @@ const IconGallery = ({ name }: IconGalleryProps) => (
   </Container>
 );
 
-const ResponsiveGridContainer = (props: { children: React.ReactNode }) => (
+const ResponsiveGridContainer = ({
+  className,
+  ...props
+}: ComponentProps<typeof GridContainer>) => (
   <GridContainer
-    className={storyStyles['responsive-grid']}
+    className={cn(storyStyles['responsive-grid'], className)}
     {...props}
   />
 );