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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carrier-dpx/air-react-library",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Air web React component library for Figma Make",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -16,8 +16,8 @@
     "access": "public"
   },
   "scripts": {
-    "figma:connect": "figma connect",
-    "figma:publish": "figma connect publish"
+    "figma:connect": "npx figma connect",
+    "figma:publish": "npx figma connect publish"
   },
   "keywords": [
     "react",
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@figma/code-connect": "^1.0.0",
+    "@figma/code-connect": "^1.3.13",
     "@mui/material": "^5.15.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

package/src/components/BottomNavigation/BottomNavigation.figma.tsx

@@ -11,6 +11,7 @@
 
 import figma from "@figma/code-connect";
 import BottomNavigation from "./BottomNavigation";
+// Import BottomNavigationAction so Figma Code Connect can resolve component instances
 import BottomNavigationAction from "./BottomNavigationAction";
 
 figma.connect(
@@ -29,25 +30,33 @@ figma.connect(
         "selected-only": "Selected Only",
         off: "Off",
       }),
-
       /**
        * CHILDREN
-       * Maps BottomNavigationAction instances as children
-       * Use figma.instance() if BottomNavigationAction is an instance swap property
+       * Maps nested BottomNavigationAction instances from Figma
+       * Each "Nav Item X" is an instance of the BottomNavigationAction component
+       * We map each one individually using the exact layer names, then combine them
        */
-      children: figma.instance("BottomNavigationAction"),
+      navItem1: figma.children("Nav Item 1"),
+      navItem2: figma.children("Nav Item 2"),
+      navItem3: figma.children("Nav Item 3"),
+      navItem4: figma.children("Nav Item 4"),
+      navItem5: figma.children("Nav Item 5"),
     },
     /**
      * EXAMPLE CODE TEMPLATE
      * Shows how BottomNavigation should be used with BottomNavigationAction children
      */
-    example: ({ showLabel, children }) => (
+    example: ({ showLabel, navItem1, navItem2, navItem3, navItem4, navItem5 }) => (
       <BottomNavigation
         showLabel={showLabel}
         value={0}
         onChange={() => {}}
       >
-        {children}
+        {navItem1}
+        {navItem2}
+        {navItem3}
+        {navItem4}
+        {navItem5}
       </BottomNavigation>
     ),
   }

package/src/components/BottomNavigation/BottomNavigationAction.figma.tsx

@@ -50,11 +50,13 @@ figma.connect(
 
       /**
        * LABEL TEXT
-       * Maps text content from "Label" layer to React label prop
-       * Similar to Button component which uses figma.children("Button Label")
+       * Maps text property "✏️ Label" from BottomNavigationAction component
+       * This requires the "✏️ Label" text property to be surfaced from the "Label" layer
+       * Similar to Navbar Item which uses figma.string("✏️ Label")
        * The label is rendered as a Typography component in React
        */
-      label: figma.children("Label"),
+      label: figma.string("✏️ Label"),
+
 
       /**
        * ICON NESTED PROPERTIES

package/src/components/Box/Box.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+
+import MuiBox, { BoxProps as MuiBoxProps } from "@mui/material/Box";
+import { AllSystemCSSProperties, ResponsiveStyleValue } from "@mui/system";
+
+export interface BoxProps extends MuiBoxProps {
+  /**
+   *
+   * Specifies how to capitalize an element's text
+   */
+  textTransform?: ResponsiveStyleValue<AllSystemCSSProperties["textTransform"]>;
+}
+
+/** The Box component serves as a wrapper component for most of the CSS utility needs.
+ *
+ * // Default import
+ * import Box from '@carrier-io/air-react/Box'
+ *
+ * // Named import
+ * import { Box } from '@carrier-io/air-react'
+ */
+
+const Box = forwardRef<unknown, BoxProps>((props: BoxProps, ref) => {
+  return <MuiBox {...props} ref={ref} />;
+});
+
+Box.displayName = "Box";
+
+export default Box;

package/src/components/Box/index.ts

@@ -0,0 +1,3 @@
+export { default } from "./Box";
+export { default as Box } from "./Box";
+export * from "./Box";

package/src/components/Button/Button.figma.tsx

@@ -92,10 +92,11 @@ figma.connect(
 
       /**
        * BUTTON TEXT/CHILDREN
-       * Maps the text content from the "Button Label" layer
-       * Uses figma.children() to capture nested text content
+       * Maps text property "✏️ Text" from Button component
+       * The text property must be surfaced from the "Button Label" layer
+       * Similar to BottomNavigationAction which uses figma.string("✏️ Label")
        */
-      children: figma.children("Button Label"),
+      children: figma.string("✏️ Text"),
 
       /**
        * START ICON

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

@@ -7,7 +7,7 @@ This guide shows how to use the demo icons in BottomNavigation for your Leadersh
 - `devicemanager` - Device Manager icon
 - `home` - Home icon  
 - `site` - Site icon
-- `warning` - Warning icon
+- `warningtriangle` - Warning triangle icon
 
 ## Usage in BottomNavigation
 
@@ -53,7 +53,7 @@ function DemoBottomNavigation() {
       <BottomNavigationAction
         icon={
           <Icon fontSize="medium">
-            <SvgIcon name="warning" />
+            <SvgIcon name="warningtriangle" />
           </Icon>
         }
         label={<Typography variant="body3Semibold">Alerts</Typography>}
@@ -69,7 +69,7 @@ function DemoBottomNavigation() {
 If you prefer individual components (already created):
 
 ```tsx
-import { DeviceManagerIcon, HomeIcon, SiteIcon, WarningIcon } from './icons/demo';
+import { DeviceManagerIcon, HomeIcon, SiteIcon, WarningTriangle } from './icons/demo';
 
 // Usage:
 <Icon fontSize="medium">

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

@@ -19,12 +19,12 @@ figma.connect(
   {
     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"
+       * STYLE/VARIANT MAPPING
+       * Maps Figma's "Style" property to React's "variant" prop
+       * Figma: Style="Outlined" → React: variant="outlined"
+       * Figma: Style="Filled" → React: variant="filled"
        */
-      variant: figma.enum("State", {
+      variant: figma.enum("Style", {
         Outlined: "outlined",
         Filled: "filled",
       }),

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

@@ -8,13 +8,18 @@ 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", {
+      /**
+       * STYLE/VARIANT MAPPING
+       * Maps Figma's "Style" property to React's "variant" prop
+       * Figma: Style="Outlined" → React: variant="outlined"
+       * Figma: Style="Filled" → React: variant="filled"
+       */
+      variant: figma.enum("Style", {
         Outlined: "outlined",
         Filled: "filled",
       }),

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

@@ -8,13 +8,18 @@ import figma from "@figma/code-connect";
 import Icon from "../../Icon";
 import { SiteIcon } from "./SiteIcon";
 
-// TODO: Uncomment and update with real Figma URL when ready
 figma.connect(
   SiteIcon,
   "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=76-846",
   {
     props: {
-      variant: figma.enum("State", {
+      /**
+       * STYLE/VARIANT MAPPING
+       * Maps Figma's "Style" property to React's "variant" prop
+       * Figma: Style="Outlined" → React: variant="outlined"
+       * Figma: Style="Filled" → React: variant="filled"
+       */
+      variant: figma.enum("Style", {
         Outlined: "outlined",
         Filled: "filled",
       }),

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

@@ -0,0 +1,33 @@
+/**
+ * Figma Code Connect Configuration for WarningTriangle
+ * 
+ * This connects Figma's warning_triangle icon component to the React WarningTriangle component.
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "../../Icon";
+import { WarningTriangle } from "./WarningTriangle";
+
+figma.connect(
+  WarningTriangle,
+  "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=29-54",
+  {
+    props: {
+      /**
+       * STYLE/VARIANT MAPPING
+       * Maps Figma's "Style" property to React's "variant" prop
+       * Figma: Style="Outlined" → React: variant="outlined"
+       * Figma: Style="Filled" → React: variant="filled"
+       */
+      variant: figma.enum("Style", {
+        Outlined: "outlined",
+        Filled: "filled",
+      }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <WarningTriangle variant={variant} />
+      </Icon>
+    ),
+  }
+);

package/src/components/Icon/icons/demo/{WarningIcon.tsx → WarningTriangle.tsx}

@@ -1,10 +1,10 @@
 import { FC, SVGProps } from "react";
 
-export interface WarningIconProps extends SVGProps<SVGSVGElement> {
+export interface WarningTriangleProps extends SVGProps<SVGSVGElement> {
   variant?: "outlined" | "filled";
 }
 
-export const WarningIcon: FC<WarningIconProps> = ({ variant = "outlined", ...props }) => {
+export const WarningTriangle: FC<WarningTriangleProps> = ({ 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"/>

package/src/components/Icon/icons/demo/iconRegistry.ts

@@ -45,8 +45,7 @@ const WarningSvg: FC<React.SVGProps<SVGSVGElement>> = (props) => (
   </svg>
 );
 
-// AlertIcon uses the same SVG as WarningIcon
-const AlertSvg = WarningSvg;
+// WarningTriangle SVG (previously WarningIcon)
 
 export interface IconInfo {
   name: string;
@@ -70,16 +69,11 @@ export const iconRegistry: Record<string, IconInfo> = {
     component: SiteSvg,
     variant: "outlined",
   },
-  warning: {
-    name: "warning",
+  warningtriangle: {
+    name: "warningtriangle",
     component: WarningSvg,
     variant: "outlined",
   },
-  alert: {
-    name: "alert",
-    component: AlertSvg,
-    variant: "outlined",
-  },
 };
 
 /**

package/src/components/Icon/icons/demo/index.ts

@@ -16,8 +16,5 @@ export type { HomeIconProps } from "./HomeIcon";
 export { SiteIcon } from "./SiteIcon";
 export type { SiteIconProps } from "./SiteIcon";
 
-export { WarningIcon } from "./WarningIcon";
-export type { WarningIconProps } from "./WarningIcon";
-
-export { AlertIcon } from "./AlertIcon";
-export type { AlertIconProps } from "./AlertIcon";
+export { WarningTriangle } from "./WarningTriangle";
+export type { WarningTriangleProps } from "./WarningTriangle";

package/src/components/Link/Link.figma.tsx

@@ -52,9 +52,11 @@ figma.connect(
 
       /**
        * TEXT CONTENT
-       * Maps the link text from "Label" layer
+       * Maps text property "✏️ Text" from Link component
+       * The text property must be surfaced from the "Label" layer
+       * Similar to Button and BottomNavigationAction which use surfaced text properties
        */
-      children: figma.children("Label"),
+      children: figma.string("✏️ Text"),
     },
 
     /**

package/src/components/Navbar/NavbarButtons/NavbarTooltip.tsx

@@ -1,7 +1,7 @@
 import { FC, SyntheticEvent, useState } from "react";
 import Tooltip, { TooltipProps } from "../../Tooltip";
 import Typography from "../../Typography";
-import Fade from "../../Fade";
+import { Fade } from "@mui/material";
 import { useNavbarContext } from "../hooks/useNavbarContext";
 
 /**

package/src/components/Tooltip/Tooltip.figma.tsx

@@ -0,0 +1,82 @@
+/**
+ * Figma Code Connect Configuration for Tooltip Component
+ * 
+ * This connects Figma's Tooltip component to the React Tooltip component.
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6590-48770
+ * 
+ * Figma Properties:
+ * - ✏️ Label (text property) → title prop
+ * - color (white, black) → color prop
+ * - placement (top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end) → placement prop
+ * - arrow (true, false) → arrow prop
+ */
+
+import figma from "@figma/code-connect";
+import Tooltip from "./Tooltip";
+
+figma.connect(
+  Tooltip,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6590-48770",
+  {
+    props: {
+      /**
+       * TOOLTIP TEXT/TITLE
+       * Maps text property "✏️ label" from nested TooltipContent component
+       * The label is nested within TooltipContent component
+       * Similar to how Icon properties are accessed in BottomNavigationAction
+       */
+      title: figma.nestedProps("TooltipContent", {
+        label: figma.string("✏️ label"),
+      }),
+
+      /**
+       * COLOR
+       * Maps Figma's "color" property to React's "color" prop
+       * Figma: white, black
+       * React: "white", "black"
+       */
+      color: figma.enum("color", {
+        white: "white",
+        black: "black",
+      }),
+
+      /**
+       * PLACEMENT
+       * Maps Figma's "placement" property to React's "placement" prop
+       * Controls where the tooltip appears relative to the target element
+       */
+      placement: figma.enum("placement", {
+        top: "top",
+        "top-start": "top-start",
+        "top-end": "top-end",
+        bottom: "bottom",
+        "bottom-start": "bottom-start",
+        "bottom-end": "bottom-end",
+        left: "left",
+        "left-start": "left-start",
+        "left-end": "left-end",
+        right: "right",
+        "right-start": "right-start",
+        "right-end": "right-end",
+      }),
+
+      /**
+       * ARROW
+       * Maps Figma's "arrow" boolean to React's "arrow" prop
+       * Controls whether the tooltip displays an arrow pointing to the target
+       */
+      arrow: figma.boolean("arrow"),
+    },
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows how Tooltip should be used
+     * Note: Tooltip wraps children - in actual usage, wrap the target element
+     */
+    example: ({ title, color, placement, arrow }) => (
+      <Tooltip title={title.label} color={color} placement={placement} arrow={arrow}>
+        <span>Hover me</span>
+      </Tooltip>
+    ),
+  }
+);

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,66 @@
+import { forwardRef } from "react";
+
+import {
+  CSSObject,
+  Tooltip as MuiTooltip,
+  TooltipProps as MuiTooltipProps,
+  Theme,
+} from "@mui/material";
+import { baseTooltipSx } from "./styles";
+
+export interface TooltipProps extends MuiTooltipProps {
+  /**
+   * Color sets the background-color and font color.
+   */
+  color?: "white" | "black";
+}
+
+/** Tooltip displays informative text when users hover over, focus on, or tap an element.
+ *
+ * `import Tooltip from '@carrier-io/air-react/Tooltip'`
+ */
+
+const Tooltip = forwardRef<unknown, TooltipProps>(
+  ({ children, color = "white", ...rest }, ref) => {
+    const componentsOverrideProps: any = {
+      tooltip: {
+        sx: { ...baseTooltipSx },
+      },
+      arrow: {
+        color: (theme: Theme) => theme.palette.base?.background?.paper,
+      },
+      ...(color === "black"
+        ? {
+            arrow: {
+              sx: (theme: Theme) =>
+                ({
+                  color: theme.palette.base?.dark,
+                  "&:before": {
+                    boxShadow: theme.shadows[2],
+                  },
+                } as CSSObject),
+            },
+            tooltip: {
+              sx: (theme: Theme) =>
+                ({
+                  backgroundColor: theme.palette.base?.dark,
+                  color: theme.palette.base?.contrastText,
+                  boxShadow: theme.shadows[2],
+                } as CSSObject),
+            },
+          }
+        : {}),
+      ...rest.componentsProps,
+    };
+
+    return (
+      <MuiTooltip {...rest} componentsProps={componentsOverrideProps} ref={ref}>
+        {children}
+      </MuiTooltip>
+    );
+  }
+);
+
+Tooltip.displayName = "Tooltip";
+
+export default Tooltip;

package/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Tooltip";
+export type { TooltipProps } from "./Tooltip";

package/src/components/Tooltip/styles.ts

@@ -0,0 +1,40 @@
+import { Theme } from "@mui/material";
+
+const tooltipArrowBeforeSx = {
+  "&:before": {
+    backgroundColor: (theme: Theme) => theme.palette.base?.background?.paper,
+    boxShadow: (theme: Theme) => theme.shadows[2],
+  },
+};
+
+export const baseTooltipSx = {
+  backgroundColor: (theme: Theme) => theme.palette.base?.background?.paper,
+  color: (theme: Theme) => theme.palette.base?.text?.primary,
+  boxShadow: (theme: Theme) => theme.shadows[2],
+  fontSize: "12px",
+  lineHeight: "14px",
+  "&.MuiTooltip-tooltipPlacementLeft": {
+    "& .MuiTooltip-arrow": {
+      marginRight: "-0.6em!important",
+      ...tooltipArrowBeforeSx,
+    },
+  },
+  "&.MuiTooltip-tooltipPlacementTop": {
+    "& .MuiTooltip-arrow": {
+      marginBottom: "-0.6em!important",
+      ...tooltipArrowBeforeSx,
+    },
+  },
+  "&.MuiTooltip-tooltipPlacementRight": {
+    "& .MuiTooltip-arrow": {
+      marginLeft: "-0.6em!important",
+      ...tooltipArrowBeforeSx,
+    },
+  },
+  "&.MuiTooltip-tooltipPlacementBottom": {
+    "& .MuiTooltip-arrow": {
+      marginTop: "-0.6em !important",
+      ...tooltipArrowBeforeSx,
+    },
+  },
+};

package/src/index.ts

@@ -8,6 +8,10 @@ export { default as Link } from "./components/Link";
 export type { LinkProps } from "./components/Link";
 export { default as Divider } from "./components/Divider";
 export type { DividerProps } from "./components/Divider";
+export { default as Box } from "./components/Box";
+export type { BoxProps } from "./components/Box";
+export { default as Tooltip } from "./components/Tooltip";
+export type { TooltipProps } from "./components/Tooltip";
 export { default as Copyright } from "./components/Copyright";
 export type { CopyrightProps } from "./components/Copyright";
 export { default as Icon } from "./components/Icon";
@@ -19,3 +23,23 @@ export { default as BottomNavigationAction } from "./components/BottomNavigation
 export type { BottomNavigationProps } from "./components/BottomNavigation";
 export type { BottomNavigationActionProps } from "./components/BottomNavigation/BottomNavigationAction";
 export * from "./components/theme";
+
+// Demo Icons - exported from main index to avoid deep-path imports
+export {
+  HomeIcon,
+  DeviceManagerIcon,
+  SiteIcon,
+  WarningTriangle,
+  SvgIcon,
+  iconRegistry,
+  getIcon,
+  getIconNames,
+} from "./components/Icon/icons/demo";
+export type {
+  HomeIconProps,
+  DeviceManagerIconProps,
+  SiteIconProps,
+  WarningTriangleProps,
+  SvgIconProps,
+  IconInfo,
+} from "./components/Icon/icons/demo";

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

@@ -1,28 +0,0 @@
-/**
- * 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

@@ -1,19 +0,0 @@
-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/WarningIcon.figma.tsx

@@ -1,28 +0,0 @@
-/**
- * Figma Code Connect Configuration for WarningIcon
- * 
- * TODO: Update the Figma URL below with the actual Figma component URL
- */
-
-import figma from "@figma/code-connect";
-import Icon from "../../Icon";
-import { WarningIcon } from "./WarningIcon";
-
-// TODO: Uncomment and update with real Figma URL when ready
-figma.connect(
-  WarningIcon,
-  "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">
-        <WarningIcon variant={variant} />
-      </Icon>
-    ),
-  }
-);