@carrier-dpx/air-react-library 0.5.0 → 0.7.0

package/src/components/Icon/README.md

@@ -0,0 +1,207 @@
+# Icon Component with Figma Code Connect
+
+This directory contains the Icon wrapper component and Figma Code Connect mappings for individual icon components.
+
+## Architecture
+
+### Icon Wrapper + Individual Icon Components
+
+The Icon system uses:
+- **One Icon wrapper component** (`Icon.tsx`) - Material-UI Icon wrapper that handles `fontSize` (xsmall, small, medium, large)
+- **Individual icon components** - Separate components for each icon (SettingsIcon, HomeIcon, etc.) that handle `variant` (outlined, filled)
+- **Individual Figma connections** - One `.figma.tsx` file per icon component
+
+## Component Usage
+
+```tsx
+import { Icon } from '@carrier-dpx/air-react-library';
+import { SettingsIcon, HomeIcon } from '@carrier-io/icons'; // Your icon library
+
+// Basic usage
+<Icon fontSize="medium">
+  <SettingsIcon variant="filled" />
+</Icon>
+
+// Different sizes
+<Icon fontSize="xsmall">
+  <HomeIcon variant="outlined" />
+</Icon>
+
+<Icon fontSize="large">
+  <SettingsIcon variant="filled" />
+</Icon>
+```
+
+## Figma Code Connect Pattern
+
+Each icon has its own `.figma.tsx` file that:
+
+1. **Imports the icon component** (from your icon library)
+2. **Imports the Icon wrapper** (for fontSize)
+3. **Maps to a specific Figma icon component** (via Figma URL)
+4. **Maps variant and optionally fontSize** props
+
+### Example: SettingsIcon.figma.tsx
+
+```tsx
+import figma from "@figma/code-connect";
+import Icon from "./Icon";
+import { SettingsIcon } from '@carrier-io/icons'; // Your icon library
+
+figma.connect(
+  SettingsIcon, // The actual icon component
+  "https://www.figma.com/design/.../SettingsIcon",
+  {
+    props: {
+      // Variant is handled by the icon component
+      variant: figma.enum("variant", {
+        outlined: "outlined",
+        filled: "filled",
+      }),
+      
+      // fontSize is optional - can be mapped from Figma or set manually
+      // fontSize: figma.enum("fontSize", {
+      //   "xsmall-12px": "xsmall",
+      //   "small-16px": "small",
+      //   "medium-24px": "medium",
+      //   "large-32px": "large",
+      // }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <SettingsIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);
+```
+
+**Key Points**:
+- The icon component (SettingsIcon) is what Figma connects to
+- The Icon wrapper handles fontSize
+- Each icon gets its own `.figma.tsx` file so Figma recognizes them separately
+
+## Icon Component Structure
+
+Your icon components should follow this pattern:
+
+```tsx
+// SettingsIcon.tsx (in your icon library)
+export interface SettingsIconProps {
+  variant?: "outlined" | "filled";
+  // ... other props
+}
+
+export const SettingsIcon: FC<SettingsIconProps> = ({ variant = "outlined", ...props }) => {
+  // Render SVG based on variant
+  return <svg>...</svg>;
+};
+```
+
+## Adding New Icons
+
+To add a new icon to the Figma integration:
+
+1. **Ensure the icon component exists** in your icon library (Bitbucket repo)
+
+2. **Create a new `.figma.tsx` file** following the pattern:
+   ```tsx
+   // {IconName}Icon.figma.tsx
+   import figma from "@figma/code-connect";
+   import Icon from "./Icon";
+   import { YourIconName } from '@carrier-io/icons'; // Your icon library
+   
+   figma.connect(
+     YourIconName,
+     "YOUR_FIGMA_ICON_URL_HERE",
+     {
+       props: {
+         variant: figma.enum("variant", {
+           outlined: "outlined",
+           filled: "filled",
+         }),
+       },
+       example: ({ variant }) => (
+         <Icon fontSize="medium">
+           <YourIconName variant={variant} />
+         </Icon>
+       ),
+     }
+   );
+   ```
+
+3. **Get the Figma URL** by:
+   - Opening the icon component in Figma
+   - Right-clicking → "Copy link to selection"
+   - Replacing the URL in the `figma.connect()` call
+
+## Scaling to 700 Icons
+
+### Option 1: Manual Creation
+Create individual `.figma.tsx` files for each icon. This gives you full control.
+
+### Option 2: Code Generation Script
+Create a script that generates `.figma.tsx` files from a list of icons:
+
+```typescript
+// scripts/generateIconConnections.ts
+const icons = [
+  { name: "SettingsIcon", figmaNodeId: "SETTINGS-ICON-NODE-ID" },
+  { name: "HomeIcon", figmaNodeId: "HOME-ICON-NODE-ID" },
+  // ... 698 more icons
+];
+
+icons.forEach(({ name, figmaNodeId }) => {
+  const content = `
+import figma from "@figma/code-connect";
+import Icon from "./Icon";
+import { ${name} } from '@carrier-io/icons';
+
+figma.connect(
+  ${name},
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=${figmaNodeId}",
+  {
+    props: {
+      variant: figma.enum("variant", {
+        outlined: "outlined",
+        filled: "filled",
+      }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <${name} variant={variant} />
+      </Icon>
+    ),
+  }
+);
+  `;
+  // Write to file: ${name}.figma.tsx
+});
+```
+
+## Icon Library Integration
+
+The icon components should be imported from your icon library package (Bitbucket repo). Update the imports in each `.figma.tsx` file to point to your actual icon library:
+
+```tsx
+// Replace placeholder imports with actual icon library imports
+import { SettingsIcon, HomeIcon, UserIcon } from '@carrier-io/icons';
+```
+
+## Testing
+
+The current setup includes sample Figma connections for testing. To test:
+
+1. **Update imports** in `.figma.tsx` files to point to your actual icon library
+2. **Update Figma URLs** with real node IDs from your Figma file
+3. **Run** `npm run figma:connect` to publish connections
+4. **Open Figma** and check Dev Mode
+5. **Select an icon component** → verify it shows the correct React code
+
+## Notes
+
+- Each icon needs its own Figma component with a "variant" property (outlined/filled)
+- The Icon wrapper handles fontSize (xsmall, small, medium, large)
+- Icon components handle variant (outlined, filled)
+- Icon components are imported from your icon library (Bitbucket repo)
+- The Figma URL must point to the specific icon component instance

package/src/components/Icon/SearchIcon.figma.tsx

@@ -0,0 +1,33 @@
+/**
+ * Figma Code Connect Configuration for Search Icon
+ * 
+ * NOTE: Import SearchIcon from your actual icon library package.
+ * Example: import { SearchIcon } from '@carrier-io/icons';
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "./Icon";
+// TODO: Import from your actual icon library
+// import { SearchIcon } from '@carrier-io/icons';
+
+// Placeholder - replace with actual SearchIcon import
+const SearchIcon = ({ variant, ...props }: any) => <span {...props}>SearchIcon</span>;
+
+// TODO: Uncomment and update with real Figma URL when ready
+// figma.connect(
+//   SearchIcon,
+//   "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=SEARCH-ICON-NODE-ID",
+//   {
+//     props: {
+//       variant: figma.enum("variant", {
+//         outlined: "outlined",
+//         filled: "filled",
+//       }),
+//     },
+//     example: ({ variant }) => (
+//       <Icon fontSize="medium">
+//         <SearchIcon variant={variant} />
+//       </Icon>
+//     ),
+//   }
+// );

package/src/components/Icon/SettingsIcon.figma.tsx

@@ -0,0 +1,61 @@
+/**
+ * Figma Code Connect Configuration for Settings Icon
+ * 
+ * This connects Figma's SettingsIcon component to the React SettingsIcon component.
+ * The icon component is wrapped in the Icon wrapper for fontSize control.
+ * 
+ * Figma URL: https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=31-2
+ * 
+ * NOTE: Import SettingsIcon from your actual icon library package.
+ * Example: import { SettingsIcon } from '@carrier-io/icons';
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "./Icon";
+// TODO: Import from your actual icon library
+// import { SettingsIcon } from '@carrier-io/icons';
+
+// Placeholder - replace with actual SettingsIcon import
+const SettingsIcon = ({ variant, ...props }: any) => <span {...props}>SettingsIcon</span>;
+
+figma.connect(
+  SettingsIcon,
+  "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=31-2",
+  {
+    props: {
+      /**
+       * STYLE MAPPING
+       * Maps Figma's "Style" property to the icon component's "variant" prop
+       * Figma uses "Style" with values "Outlined" and "Filled"
+       * React icon component expects "variant" with values "outlined" and "filled"
+       */
+      variant: figma.enum("Style", {
+        Outlined: "outlined",
+        Filled: "filled",
+      }),
+      
+      /**
+       * FONT SIZE MAPPING (optional)
+       * If your Figma icon component has a fontSize property, map it here
+       * Otherwise, fontSize is set on the Icon wrapper component
+       */
+      // fontSize: figma.enum("fontSize", {
+      //   "xsmall-12px": "xsmall",
+      //   "small-16px": "small",
+      //   "medium-24px": "medium",
+      //   "large-32px": "large",
+      // }),
+    },
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows the icon component wrapped in Icon for fontSize control.
+     * The Icon wrapper handles fontSize (xsmall, small, medium, large).
+     * The icon component handles variant (outlined, filled).
+     */
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <SettingsIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

package/src/components/Icon/UserIcon.figma.tsx

@@ -0,0 +1,33 @@
+/**
+ * Figma Code Connect Configuration for User Icon
+ * 
+ * NOTE: Import UserIcon from your actual icon library package.
+ * Example: import { UserIcon } from '@carrier-io/icons';
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "./Icon";
+// TODO: Import from your actual icon library
+// import { UserIcon } from '@carrier-io/icons';
+
+// Placeholder - replace with actual UserIcon import
+const UserIcon = ({ variant, ...props }: any) => <span {...props}>UserIcon</span>;
+
+// TODO: Uncomment and update with real Figma URL when ready
+// figma.connect(
+//   UserIcon,
+//   "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=USER-ICON-NODE-ID",
+//   {
+//     props: {
+//       variant: figma.enum("variant", {
+//         outlined: "outlined",
+//         filled: "filled",
+//       }),
+//     },
+//     example: ({ variant }) => (
+//       <Icon fontSize="medium">
+//         <UserIcon variant={variant} />
+//       </Icon>
+//     ),
+//   }
+// );

package/src/components/Icon/icons/demo/AlertIcon.figma.tsx

@@ -0,0 +1,28 @@
+/**
+ * Figma Code Connect Configuration for AlertIcon
+ * 
+ * This connects Figma's warning_triangle icon component to the React AlertIcon component.
+ * Also known as WarningIcon in some contexts.
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "../../Icon";
+import { AlertIcon } from "./AlertIcon";
+
+figma.connect(
+  AlertIcon,
+  "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=29-54",
+  {
+    props: {
+      variant: figma.enum("State", {
+        Outlined: "outlined",
+        Filled: "filled",
+      }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <AlertIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

package/src/components/Icon/icons/demo/AlertIcon.tsx

@@ -0,0 +1,19 @@
+import { FC, SVGProps } from "react";
+
+export interface AlertIconProps extends SVGProps<SVGSVGElement> {
+  variant?: "outlined" | "filled";
+}
+
+/**
+ * AlertIcon (also known as WarningIcon)
+ * Warning triangle icon for alerts
+ */
+export const AlertIcon: FC<AlertIconProps> = ({ variant = "outlined", ...props }) => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M12 16C12.2833 16 12.5212 16.0954 12.7129 16.2871C12.9046 16.4788 13 16.7167 13 17C13 17.2833 12.9046 17.5212 12.7129 17.7129C12.5212 17.9046 12.2833 18 12 18C11.7167 18 11.4788 17.9045 11.2871 17.7129C11.0955 17.5212 11 17.2833 11 17C11 16.7167 11.0955 16.4788 11.2871 16.2871C11.4788 16.0955 11.7167 16 12 16Z" fill="currentColor"/>
+      <path d="M12 10C12.2833 10 12.5212 10.0954 12.7129 10.2871C12.9046 10.4788 13 10.7167 13 11V14C13 14.2833 12.9046 14.5212 12.7129 14.7129C12.5212 14.9046 12.2833 15 12 15C11.7167 15 11.4788 14.9045 11.2871 14.7129C11.0955 14.5212 11 14.2833 11 14V11C11 10.7167 11.0955 10.4788 11.2871 10.2871C11.4788 10.0955 11.7167 10 12 10Z" fill="currentColor"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M12 3C12.1666 3 12.329 3.04172 12.4873 3.125C12.6456 3.20833 12.775 3.33334 12.875 3.5L22.125 19.5C22.225 19.6667 22.271 19.8377 22.2627 20.0127C22.2544 20.1876 22.2083 20.3501 22.125 20.5C22.0417 20.6499 21.9252 20.7707 21.7754 20.8623C21.6255 20.9539 21.4586 20.9999 21.2754 21H2.72462C2.54144 20.9999 2.37452 20.9539 2.22462 20.8623C2.0748 20.7707 1.95828 20.6499 1.87501 20.5C1.79171 20.3501 1.74567 20.1876 1.73732 20.0127C1.72898 19.8377 1.77501 19.6667 1.87501 19.5L11.125 3.5C11.225 3.33334 11.3544 3.20833 11.5127 3.125C11.671 3.04173 11.8334 3 12 3ZM4.45021 19H19.5498L12 6L4.45021 19Z" fill="currentColor"/>
+    </svg>
+  );
+};

package/src/components/Icon/icons/demo/DEMO_USAGE.md

@@ -0,0 +1,113 @@
+# Demo Icons Usage Guide
+
+This guide shows how to use the demo icons in BottomNavigation for your Leadership demo.
+
+## Available Icons
+
+- `devicemanager` - Device Manager icon
+- `home` - Home icon  
+- `site` - Site icon
+- `warning` - Warning icon
+
+## Usage in BottomNavigation
+
+### Option 1: Using SvgIcon Component (Recommended)
+
+```tsx
+import BottomNavigation from '@carrier-dpx/air-react-library/BottomNavigation';
+import BottomNavigationAction from '@carrier-dpx/air-react-library/BottomNavigationAction';
+import Typography from '@carrier-dpx/air-react-library/Typography';
+import Icon from '@carrier-dpx/air-react-library/Icon';
+import { SvgIcon } from './icons/demo/SvgIcon';
+
+function DemoBottomNavigation() {
+  return (
+    <BottomNavigation value={0} onChange={() => {}} showLabel="On">
+      <BottomNavigationAction
+        icon={
+          <Icon fontSize="medium">
+            <SvgIcon name="home" />
+          </Icon>
+        }
+        label={<Typography variant="body3Semibold">Home</Typography>}
+        labelvisibility="On"
+      />
+      <BottomNavigationAction
+        icon={
+          <Icon fontSize="medium">
+            <SvgIcon name="devicemanager" />
+          </Icon>
+        }
+        label={<Typography variant="body3Semibold">Devices</Typography>}
+        labelvisibility="On"
+      />
+      <BottomNavigationAction
+        icon={
+          <Icon fontSize="medium">
+            <SvgIcon name="site" />
+          </Icon>
+        }
+        label={<Typography variant="body3Semibold">Sites</Typography>}
+        labelvisibility="On"
+      />
+      <BottomNavigationAction
+        icon={
+          <Icon fontSize="medium">
+            <SvgIcon name="warning" />
+          </Icon>
+        }
+        label={<Typography variant="body3Semibold">Alerts</Typography>}
+        labelvisibility="On"
+      />
+    </BottomNavigation>
+  );
+}
+```
+
+### Option 2: Using Individual Icon Components
+
+If you prefer individual components (already created):
+
+```tsx
+import { DeviceManagerIcon, HomeIcon, SiteIcon, WarningIcon } from './icons/demo';
+
+// Usage:
+<Icon fontSize="medium">
+  <HomeIcon variant="outlined" />
+</Icon>
+```
+
+## Scaling to 700 Icons
+
+For 700 icons, you would:
+
+1. **Generate the icon registry programmatically** from your SVG folder:
+   ```typescript
+   // scripts/generateIconRegistry.ts
+   // Reads all SVG files and generates iconRegistry.ts
+   ```
+
+2. **Use the SvgIcon component** with icon names:
+   ```tsx
+   <SvgIcon name="iconname" />
+   ```
+
+3. **For Figma Code Connect**, you have two options:
+   - **Option A**: Create individual wrapper components programmatically (one per icon)
+   - **Option B**: Use a single generic component and map icon names in Figma
+
+## Figma Code Connect Setup
+
+For Figma connections, you'll need individual React components. You can:
+
+1. **Generate components programmatically** from SVG files
+2. **Create Figma connection files** for each icon
+
+See the individual `.figma.tsx` files in this directory for examples.
+
+## Notes
+
+- Icons use `fill="currentColor"` so they inherit the text color from their parent
+- Icons are wrapped in the `Icon` component for `fontSize` control
+- The `BottomNavigationAction` component uses `figma.nestedProps()` to access icon properties
+- For production with 700 icons, consider creating a build script to generate components from SVG files

package/src/components/Icon/icons/demo/DeviceManagerIcon.figma.tsx

@@ -0,0 +1,38 @@
+/**
+ * Figma Code Connect Configuration for DeviceManagerIcon
+ * 
+ * TODO: Update the Figma URL below with the actual Figma component URL
+ * Get the URL by:
+ * 1. Opening the icon component in Figma
+ * 2. Right-clicking → "Copy link to selection"
+ * 3. Replace the URL in the figma.connect() call below
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "../../Icon";
+import { DeviceManagerIcon } from "./DeviceManagerIcon";
+
+// TODO: Uncomment and update with real Figma URL when ready
+figma.connect(
+  DeviceManagerIcon,
+  "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=1380-3039",
+  {
+    props: {
+      /**
+       * STATE/VARIANT MAPPING
+       * Maps Figma's "State" property to React's "variant" prop
+       * Figma: State="Outlined" → React: variant="outlined"
+       * Figma: State="Filled" → React: variant="filled"
+       */
+      variant: figma.enum("State", {
+        Outlined: "outlined",
+        Filled: "filled",
+      }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <DeviceManagerIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

package/src/components/Icon/icons/demo/DeviceManagerIcon.tsx

@@ -0,0 +1,16 @@
+import { FC, SVGProps } from "react";
+
+export interface DeviceManagerIconProps extends SVGProps<SVGSVGElement> {
+  variant?: "outlined" | "filled";
+}
+
+export const DeviceManagerIcon: FC<DeviceManagerIconProps> = ({ variant = "outlined", ...props }) => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M2.49805 18.041C3.75805 18.2505 4.74948 19.2419 4.95898 20.502C5.00427 20.7744 4.77614 21 4.5 21H3C2.44772 21 2 20.5523 2 20V18.5C2 18.2239 2.22564 17.9957 2.49805 18.041Z" fill="currentColor"/>
+      <path d="M2.5 14.0176C5.97085 14.2618 8.73818 17.0292 8.98242 20.5C9.00176 20.7754 8.77612 21 8.5 21H7.5C7.22396 21 7.003 20.7756 6.97559 20.501C6.7411 18.1393 4.86065 16.2589 2.49902 16.0244C2.22437 15.997 2 15.776 2 15.5V14.5C2 14.2239 2.22457 13.9982 2.5 14.0176Z" fill="currentColor"/>
+      <path d="M2.5 10.0107C8.17278 10.2648 12.7351 14.8187 12.9893 20.5C13.0015 20.7758 12.7761 21 12.5 21H11.5C11.2239 21 11.0014 20.7757 10.9863 20.5C10.7359 15.928 7.07198 12.2641 2.5 12.0137C2.22427 11.9986 2 11.7761 2 11.5V10.5C2 10.2239 2.22424 9.99852 2.5 10.0107Z" fill="currentColor"/>
+      <path d="M9.09863 3.00488C9.32763 3.02757 9.54289 3.12883 9.70703 3.29297L11.4141 5H19C20.6569 5 22 6.34315 22 8V19.5C22 20.3284 21.3284 21 20.5 21H16C15.4477 21 15 20.5523 15 20C15 19.4477 15.4477 19 16 19H20V8C20 7.44772 19.5523 7 19 7H11C10.7348 7 10.4805 6.89457 10.293 6.70703L8.58594 5H4V7C4 7.55228 3.55228 8 3 8C2.44772 8 2 7.55228 2 7V4.5C2 3.67157 2.67157 3 3.5 3H9L9.09863 3.00488Z" fill="currentColor"/>
+    </svg>
+  );
+};

package/src/components/Icon/icons/demo/HomeIcon.figma.tsx

@@ -0,0 +1,28 @@
+/**
+ * Figma Code Connect Configuration for HomeIcon
+ * 
+ * TODO: Update the Figma URL below with the actual Figma component URL
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "../../Icon";
+import { HomeIcon } from "./HomeIcon";
+
+// TODO: Uncomment and update with real Figma URL when ready
+figma.connect(
+  HomeIcon,
+  "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=38-171",
+  {
+    props: {
+      variant: figma.enum("State", {
+        Outlined: "outlined",
+        Filled: "filled",
+      }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <HomeIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

package/src/components/Icon/icons/demo/HomeIcon.tsx

@@ -0,0 +1,13 @@
+import { FC, SVGProps } from "react";
+
+export interface HomeIconProps extends SVGProps<SVGSVGElement> {
+  variant?: "outlined" | "filled";
+}
+
+export const HomeIcon: FC<HomeIconProps> = ({ variant = "outlined", ...props }) => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path fillRule="evenodd" clipRule="evenodd" d="M11.4775 2.33597C11.7769 2.25498 12.0907 2.24493 12.3936 2.3057L12.5225 2.33597L12.6826 2.38871C13.0467 2.52881 13.3532 2.7853 13.5967 2.97464L20.3789 8.25003C20.7873 8.56768 21.1481 8.83746 21.4121 9.19437C21.6289 9.48753 21.7903 9.81791 21.8887 10.169C21.9784 10.4897 21.9967 10.8234 22 11.1885V17.7998C22 18.3431 22.001 18.8108 21.9697 19.1944C21.9374 19.5896 21.8655 19.9831 21.6729 20.3614C21.3853 20.9257 20.9266 21.3853 20.3623 21.6729C19.9841 21.8656 19.5905 21.9365 19.1953 21.9688C18.8117 22.0001 18.3432 22 17.7998 22H6.2002C5.65675 22 5.18831 22.0001 4.80469 21.9688C4.40952 21.9365 4.01591 21.8656 3.6377 21.6729C3.07338 21.3853 2.61471 20.9257 2.32715 20.3614C2.1345 19.9831 2.06257 19.5896 2.03027 19.1944C2.01464 19.0028 2.00763 18.7901 2.00391 18.5577L2 17.7998V11.1885C2.00325 10.8234 2.02155 10.4897 2.11133 10.169C2.20966 9.81791 2.37114 9.48752 2.58789 9.19437C2.8519 8.83747 3.21269 8.56768 3.62109 8.25003L10.4033 2.97464C10.6816 2.75819 11.0423 2.45384 11.4775 2.33597ZM11.9932 4.28128C11.9181 4.33146 11.8184 4.40766 11.6318 4.55277L4.84961 9.82816C4.35264 10.2147 4.25877 10.2985 4.19629 10.3828C4.12408 10.4805 4.0699 10.5911 4.03711 10.708C4.0088 10.8092 4 10.934 4 11.5645V17.7998L4.00293 18.5254C4.00602 18.7261 4.01284 18.8905 4.02441 19.0323C4.0466 19.3034 4.0842 19.4047 4.10938 19.4541C4.20522 19.642 4.35802 19.7949 4.5459 19.8907C4.59536 19.9158 4.69642 19.9534 4.96777 19.9756C5.25108 19.9988 5.62379 20 6.2002 20H8V14.5996C8 14.3362 7.99889 14.0782 8.0166 13.8614C8.03529 13.6329 8.0796 13.3631 8.21777 13.0918C8.40947 12.7157 8.71564 12.4095 9.0918 12.2178C9.36296 12.0797 9.63289 12.0353 9.86133 12.0166C10.0781 11.9989 10.3363 12 10.5996 12H13.4004C13.6637 12 13.9219 11.9989 14.1387 12.0166C14.3671 12.0353 14.637 12.0797 14.9082 12.2178C15.2374 12.3856 15.513 12.6409 15.7051 12.9541L15.7822 13.0918L15.8691 13.294C15.9408 13.4951 15.9694 13.6899 15.9834 13.8614C16.0011 14.0782 16 14.3362 16 14.5996V20H17.7998C18.3762 20 18.7489 19.9988 19.0322 19.9756C19.3036 19.9534 19.4046 19.9158 19.4541 19.8907C19.642 19.7949 19.7948 19.642 19.8906 19.4541C19.9158 19.4047 19.9534 19.3034 19.9756 19.0323C19.9987 18.749 20 18.3762 20 17.7998V11.5645C20 10.934 19.9912 10.8092 19.9629 10.708C19.9301 10.5911 19.8759 10.4805 19.8037 10.3828C19.7412 10.2985 19.6474 10.2147 19.1504 9.82816L12.3682 4.55277C12.1816 4.40765 12.0819 4.33146 12.0068 4.28128C12.0045 4.27969 12.0022 4.27783 12 4.2764C11.9978 4.27783 11.9955 4.2797 11.9932 4.28128ZM10.5996 14C10.3035 14 10.1409 14.0003 10.0244 14.0098C10.0201 14.0102 10.0156 14.0104 10.0117 14.0108C10.0113 14.015 10.0111 14.0197 10.0107 14.0244C10.0012 14.141 10 14.3033 10 14.5996V20H14V14.5996C14 14.3033 13.9988 14.141 13.9893 14.0244C13.9889 14.0197 13.9877 14.015 13.9873 14.0108C13.9837 14.0104 13.9796 14.0101 13.9756 14.0098C13.8591 14.0003 13.6965 14 13.4004 14H10.5996Z" fill="currentColor"/>
+    </svg>
+  );
+};

package/src/components/Icon/icons/demo/README.md

@@ -0,0 +1,57 @@
+# Demo Icons
+
+Place your SVG files here for the Leadership demo.
+
+## Structure
+
+```
+icons/demo/
+  ├── icon1.svg
+  ├── icon2.svg
+  ├── icon3.svg
+  └── ...
+```
+
+## Usage
+
+After placing your SVG files here, create React icon components that import them. See the example below.
+
+## Example Icon Component
+
+Create a file like `DemoIcon1.tsx`:
+
+```tsx
+import { FC } from "react";
+import { ReactComponent as Icon1Svg } from "./icon1.svg";
+
+export interface DemoIcon1Props {
+  variant?: "outlined" | "filled";
+}
+
+export const DemoIcon1: FC<DemoIcon1Props> = ({ variant = "outlined", ...props }) => {
+  // If you have separate SVG files for outlined/filled:
+  // const IconSvg = variant === "filled" ? Icon1FilledSvg : Icon1OutlinedSvg;
+  
+  return <Icon1Svg {...props} />;
+};
+```
+
+## Alternative: Inline SVG
+
+If you prefer to inline the SVG content directly in the component:
+
+```tsx
+import { FC } from "react";
+
+export interface DemoIcon1Props {
+  variant?: "outlined" | "filled";
+}
+
+export const DemoIcon1: FC<DemoIcon1Props> = ({ variant = "outlined", ...props }) => {
+  return (
+    <svg {...props} viewBox="0 0 24 24">
+      {/* Paste your SVG path/content here */}
+    </svg>
+  );
+};
+```