@carrier-dpx/air-react-library 0.7.26 → 0.7.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carrier-dpx/air-react-library",
-  "version": "0.7.26",
+  "version": "0.7.28",
   "description": "Air web React component library for Figma Make",
   "main": "src/index.ts",
   "types": "src/index.ts",

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

@@ -0,0 +1,33 @@
+/**
+ * Figma Code Connect Configuration for AccountCircleIcon
+ * 
+ * Figma URL: https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=56-325
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "../../Icon";
+import { AccountCircleIcon } from "./AccountCircleIcon";
+
+figma.connect(
+  AccountCircleIcon,
+  "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=56-325",
+  {
+    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">
+        <AccountCircleIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

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

@@ -0,0 +1,20 @@
+import { FC, SVGProps } from "react";
+
+export interface AccountCircleIconProps extends SVGProps<SVGSVGElement> {
+  variant?: "outlined" | "filled";
+}
+
+export const AccountCircleIcon: FC<AccountCircleIconProps> = ({ variant = "outlined", style, ...props }) => {
+  return (
+    <svg 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg" 
+      style={{ width: "1em", height: "1em", display: "block", ...style }}
+      {...props}
+    >
+      <path fillRule="evenodd" clipRule="evenodd" d="M12 6C13.93 6 15.5 7.57 15.5 9.5C15.5 11.43 13.93 13 12 13C10.07 13 8.5 11.43 8.5 9.5C8.5 7.57 10.07 6 12 6ZM12 8C11.17 8 10.5 8.67 10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8Z" fill="currentColor"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 17C10.26 17 8.65961 17.56 7.34961 18.5C8.65961 19.44 10.26 20 12 20C13.74 20 15.3404 19.44 16.6504 18.5C15.3404 17.56 13.74 17 12 17ZM12 4C7.58 4 4 7.58 4 12C4 13.95 4.70035 15.7301 5.86035 17.1201C7.55033 15.8002 9.68007 15 12 15C14.3199 15 16.4497 15.8002 18.1396 17.1201C19.2996 15.7301 20 13.95 20 12C20 7.58 16.42 4 12 4Z" fill="currentColor"/>
+    </svg>
+  );
+};

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

@@ -0,0 +1,33 @@
+/**
+ * Figma Code Connect Configuration for ChevronLeftIcon
+ * 
+ * Figma URL: https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=12-149
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "../../Icon";
+import { ChevronLeftIcon } from "./ChevronLeftIcon";
+
+figma.connect(
+  ChevronLeftIcon,
+  "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=12-149",
+  {
+    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">
+        <ChevronLeftIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

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

@@ -0,0 +1,19 @@
+import { FC, SVGProps } from "react";
+
+export interface ChevronLeftIconProps extends SVGProps<SVGSVGElement> {
+  variant?: "outlined" | "filled";
+}
+
+export const ChevronLeftIcon: FC<ChevronLeftIconProps> = ({ variant = "outlined", style, ...props }) => {
+  return (
+    <svg 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg" 
+      style={{ width: "1em", height: "1em", display: "block", ...style }}
+      {...props}
+    >
+      <path d="M14.2998 6.4248C14.5831 6.4248 14.8167 6.51686 15 6.7002C15.1833 6.88352 15.2754 7.1171 15.2754 7.40039C15.2753 7.68345 15.1831 7.91638 15 8.09961L11.0996 12L15 15.9004C15.1831 16.0836 15.2753 16.3166 15.2754 16.5996C15.2754 16.8829 15.1832 17.1165 15 17.2998C14.8167 17.4831 14.5831 17.5752 14.2998 17.5752C14.0165 17.5752 13.7829 17.4831 13.5996 17.2998L9 12.7002C8.9 12.6002 8.82878 12.4917 8.78711 12.375C8.74548 12.2584 8.72461 12.1333 8.72461 12C8.72461 11.8667 8.74547 11.7416 8.78711 11.625C8.82878 11.5083 8.9 11.3998 9 11.2998L13.5996 6.7002C13.7829 6.5169 14.0165 6.42484 14.2998 6.4248Z" fill="currentColor"/>
+    </svg>
+  );
+};

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

@@ -0,0 +1,33 @@
+/**
+ * Figma Code Connect Configuration for NotificationsIcon
+ * 
+ * Figma URL: https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=47-218
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "../../Icon";
+import { NotificationsIcon } from "./NotificationsIcon";
+
+figma.connect(
+  NotificationsIcon,
+  "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=47-218",
+  {
+    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">
+        <NotificationsIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

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

@@ -0,0 +1,20 @@
+import { FC, SVGProps } from "react";
+
+export interface NotificationsIconProps extends SVGProps<SVGSVGElement> {
+  variant?: "outlined" | "filled";
+}
+
+export const NotificationsIcon: FC<NotificationsIconProps> = ({ variant = "outlined", style, ...props }) => {
+  return (
+    <svg 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg" 
+      style={{ width: "1em", height: "1em", display: "block", ...style }}
+      {...props}
+    >
+      <path d="M14 20C14 20.55 13.8038 21.0204 13.4121 21.4121C13.0204 21.8038 12.55 22 12 22C11.45 22 10.9796 21.8038 10.5879 21.4121C10.1962 21.0204 10 20.55 10 20H14Z" fill="currentColor"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2002C14.8333 4.53353 15.9167 5.23751 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5212 17.0954 19.7129 17.2871C19.9046 17.4788 20 17.7167 20 18C20 18.2833 19.9046 18.5212 19.7129 18.7129C19.5212 18.9046 19.2833 19 19 19H5C4.71667 19 4.47878 18.9046 4.28711 18.7129C4.09544 18.5212 4 18.2833 4 18C4 17.7167 4.09544 17.4788 4.28711 17.2871C4.47878 17.0954 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08332 5.23751 9.16669 4.53353 10.5 4.2002V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2ZM12 6C10.9 6 9.95814 6.39147 9.1748 7.1748C8.39147 7.95814 8 8.9 8 10V17H16V10C16 8.9 15.6085 7.95814 14.8252 7.1748C14.0419 6.39147 13.1 6 12 6Z" fill="currentColor"/>
+    </svg>
+  );
+};

package/src/components/Icon/icons/demo/acount_circle_outlined.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C13.93 6 15.5 7.57 15.5 9.5C15.5 11.43 13.93 13 12 13C10.07 13 8.5 11.43 8.5 9.5C8.5 7.57 10.07 6 12 6ZM12 8C11.17 8 10.5 8.67 10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 17C10.26 17 8.65961 17.56 7.34961 18.5C8.65961 19.44 10.26 20 12 20C13.74 20 15.3404 19.44 16.6504 18.5C15.3404 17.56 13.74 17 12 17ZM12 4C7.58 4 4 7.58 4 12C4 13.95 4.70035 15.7301 5.86035 17.1201C7.55033 15.8002 9.68007 15 12 15C14.3199 15 16.4497 15.8002 18.1396 17.1201C19.2996 15.7301 20 13.95 20 12C20 7.58 16.42 4 12 4Z" fill="black"/>
+</svg>

package/src/components/Icon/icons/demo/chevron_left_outlined.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2998 6.4248C14.5831 6.4248 14.8167 6.51686 15 6.7002C15.1833 6.88352 15.2754 7.1171 15.2754 7.40039C15.2753 7.68345 15.1831 7.91638 15 8.09961L11.0996 12L15 15.9004C15.1831 16.0836 15.2753 16.3166 15.2754 16.5996C15.2754 16.8829 15.1832 17.1165 15 17.2998C14.8167 17.4831 14.5831 17.5752 14.2998 17.5752C14.0165 17.5752 13.7829 17.4831 13.5996 17.2998L9 12.7002C8.9 12.6002 8.82878 12.4917 8.78711 12.375C8.74548 12.2584 8.72461 12.1333 8.72461 12C8.72461 11.8667 8.74547 11.7416 8.78711 11.625C8.82878 11.5083 8.9 11.3998 9 11.2998L13.5996 6.7002C13.7829 6.5169 14.0165 6.42484 14.2998 6.4248Z" fill="black"/>
+</svg>

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

@@ -61,6 +61,26 @@ const MoreVerticalSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props })
   </svg>
 );
 
+const NotificationsSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props }) => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: "1em", height: "1em", display: "block", ...style }} {...props}>
+    <path d="M14 20C14 20.55 13.8038 21.0204 13.4121 21.4121C13.0204 21.8038 12.55 22 12 22C11.45 22 10.9796 21.8038 10.5879 21.4121C10.1962 21.0204 10 20.55 10 20H14Z" fill="currentColor"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2002C14.8333 4.53353 15.9167 5.23751 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5212 17.0954 19.7129 17.2871C19.9046 17.4788 20 17.7167 20 18C20 18.2833 19.9046 18.5212 19.7129 18.7129C19.5212 18.9046 19.2833 19 19 19H5C4.71667 19 4.47878 18.9046 4.28711 18.7129C4.09544 18.5212 4 18.2833 4 18C4 17.7167 4.09544 17.4788 4.28711 17.2871C4.47878 17.0954 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08332 5.23751 9.16669 4.53353 10.5 4.2002V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2ZM12 6C10.9 6 9.95814 6.39147 9.1748 7.1748C8.39147 7.95814 8 8.9 8 10V17H16V10C16 8.9 15.6085 7.95814 14.8252 7.1748C14.0419 6.39147 13.1 6 12 6Z" fill="currentColor"/>
+  </svg>
+);
+
+const AccountCircleSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props }) => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: "1em", height: "1em", display: "block", ...style }} {...props}>
+    <path fillRule="evenodd" clipRule="evenodd" d="M12 6C13.93 6 15.5 7.57 15.5 9.5C15.5 11.43 13.93 13 12 13C10.07 13 8.5 11.43 8.5 9.5C8.5 7.57 10.07 6 12 6ZM12 8C11.17 8 10.5 8.67 10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8Z" fill="currentColor"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 17C10.26 17 8.65961 17.56 7.34961 18.5C8.65961 19.44 10.26 20 12 20C13.74 20 15.3404 19.44 16.6504 18.5C15.3404 17.56 13.74 17 12 17ZM12 4C7.58 4 4 7.58 4 12C4 13.95 4.70035 15.7301 5.86035 17.1201C7.55033 15.8002 9.68007 15 12 15C14.3199 15 16.4497 15.8002 18.1396 17.1201C19.2996 15.7301 20 13.95 20 12C20 7.58 16.42 4 12 4Z" fill="currentColor"/>
+  </svg>
+);
+
+const ChevronLeftSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props }) => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: "1em", height: "1em", display: "block", ...style }} {...props}>
+    <path d="M14.2998 6.4248C14.5831 6.4248 14.8167 6.51686 15 6.7002C15.1833 6.88352 15.2754 7.1171 15.2754 7.40039C15.2753 7.68345 15.1831 7.91638 15 8.09961L11.0996 12L15 15.9004C15.1831 16.0836 15.2753 16.3166 15.2754 16.5996C15.2754 16.8829 15.1832 17.1165 15 17.2998C14.8167 17.4831 14.5831 17.5752 14.2998 17.5752C14.0165 17.5752 13.7829 17.4831 13.5996 17.2998L9 12.7002C8.9 12.6002 8.82878 12.4917 8.78711 12.375C8.74548 12.2584 8.72461 12.1333 8.72461 12C8.72461 11.8667 8.74547 11.7416 8.78711 11.625C8.82878 11.5083 8.9 11.3998 9 11.2998L13.5996 6.7002C13.7829 6.5169 14.0165 6.42484 14.2998 6.4248Z" fill="currentColor"/>
+  </svg>
+);
+
 // WarningTriangle SVG (previously WarningIcon)
 
 export interface IconInfo {
@@ -100,6 +120,21 @@ export const iconRegistry: Record<string, IconInfo> = {
     component: MoreVerticalSvg,
     variant: "outlined",
   },
+  notifications: {
+    name: "notifications",
+    component: NotificationsSvg,
+    variant: "outlined",
+  },
+  accountcircle: {
+    name: "accountcircle",
+    component: AccountCircleSvg,
+    variant: "outlined",
+  },
+  chevronleft: {
+    name: "chevronleft",
+    component: ChevronLeftSvg,
+    variant: "outlined",
+  },
 };
 
 /**

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

@@ -24,3 +24,12 @@ export type { MenuIconProps } from "./MenuIcon";
 
 export { MoreVerticalIcon } from "./MoreVerticalIcon";
 export type { MoreVerticalIconProps } from "./MoreVerticalIcon";
+
+export { NotificationsIcon } from "./NotificationsIcon";
+export type { NotificationsIconProps } from "./NotificationsIcon";
+
+export { AccountCircleIcon } from "./AccountCircleIcon";
+export type { AccountCircleIconProps } from "./AccountCircleIcon";
+
+export { ChevronLeftIcon } from "./ChevronLeftIcon";
+export type { ChevronLeftIconProps } from "./ChevronLeftIcon";

package/src/components/Icon/icons/demo/notifications_outlined.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 20C14 20.55 13.8038 21.0204 13.4121 21.4121C13.0204 21.8038 12.55 22 12 22C11.45 22 10.9796 21.8038 10.5879 21.4121C10.1962 21.0204 10 20.55 10 20H14Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2002C14.8333 4.53353 15.9167 5.23751 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5212 17.0954 19.7129 17.2871C19.9046 17.4788 20 17.7167 20 18C20 18.2833 19.9046 18.5212 19.7129 18.7129C19.5212 18.9046 19.2833 19 19 19H5C4.71667 19 4.47878 18.9046 4.28711 18.7129C4.09544 18.5212 4 18.2833 4 18C4 17.7167 4.09544 17.4788 4.28711 17.2871C4.47878 17.0954 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08332 5.23751 9.16669 4.53353 10.5 4.2002V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2ZM12 6C10.9 6 9.95814 6.39147 9.1748 7.1748C8.39147 7.95814 8 8.9 8 10V17H16V10C16 8.9 15.6085 7.95814 14.8252 7.1748C14.0419 6.39147 13.1 6 12 6Z" fill="black"/>
+</svg>

package/src/components/StatusLed/StatusLed.figma.tsx

@@ -0,0 +1,98 @@
+/**
+ * Figma Code Connect Configuration for StatusLed Component
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=37599-424674
+ * 
+ * Figma Properties:
+ * - severity (error, warning, success, info, default, static)
+ * - size (xsmall: 24px, micro: 20px)
+ * - labelPosition (start, end)
+ * - label (true, false) - controls visibility of nested "Label" Typography component
+ * 
+ * Notes:
+ * - labelPosition changes where the label is placed, either before or after the StatusLED
+ * - The "label" boolean prop hides/shows the nested "Label" component which is an instance of the Typography component
+ * - Size can be customized in code for any size, but design only supports two sizes
+ * - Size mapping: xsmall (24px) → size 12, micro (20px) → size 10 (since circleSize = size * 2)
+ */
+
+import figma from "@figma/code-connect";
+import StatusLed from "./StatusLed";
+
+figma.connect(
+  StatusLed,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=37599-424674",
+  {
+    props: {
+      /**
+       * SEVERITY MAPPING
+       * Maps Figma's "severity" property to React's "severity" prop
+       * Controls the color of the StatusLED
+       */
+      severity: figma.enum("severity", {
+        error: "error",
+        warning: "warning",
+        success: "success",
+        info: "info",
+        default: "default",
+        static: "static",
+      }),
+
+      /**
+       * SIZE MAPPING
+       * Maps Figma's "size" property to React's "size" prop
+       * Figma: xsmall (24px), micro (20px)
+       * React: size is the inner circle size in pixels
+       * - xsmall (24px total) → size 12 (12 * 2 = 24)
+       * - micro (20px total) → size 10 (10 * 2 = 20)
+       */
+      size: figma.enum("size", {
+        "xsmall: 24px": 12,
+        "micro: 20px": 10,
+        // Handle cases where Figma might show just the size name
+        xsmall: 12,
+        micro: 10,
+      }),
+
+      /**
+       * LABEL POSITION MAPPING
+       * Maps Figma's "labelPosition" property to React's "labelPosition" prop
+       * Controls where the label is placed relative to the StatusLED
+       */
+      labelPosition: figma.enum("labelPosition", {
+        start: "start",
+        end: "end",
+      }),
+
+      /**
+       * LABEL VISIBILITY
+       * Maps Figma's "label" boolean property
+       * When true, shows the nested "Label" Typography component
+       * When false, hides the label
+       */
+      showLabel: figma.boolean("label"),
+
+      /**
+       * LABEL TEXT CONTENT
+       * Maps text property "✏️ Label" from the nested "Label" Typography component
+       * The Label is an instance of the Typography component
+       * The text property must be surfaced from the "Label" layer
+       * Only used when showLabel is true
+       */
+      label: figma.string("✏️ Label"),
+    },
+
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows how StatusLed should be used with optional label
+     */
+    example: ({ severity, size, labelPosition, showLabel, label }) => (
+      <StatusLed
+        severity={severity}
+        size={size}
+        labelPosition={labelPosition}
+        label={showLabel ? label : undefined}
+      />
+    ),
+  }
+);

package/src/components/StatusLed/StatusLed.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { styled } from "@mui/material/styles";
+import Box from "../Box";
+import { Severity, StatusLedProps, StyleProps } from "./types";
+import Typography from "../Typography";
+import styles from "./styles";
+
+const CircleInnerStyled = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "size",
+})<Omit<StyleProps, "theme">>(styles.circleInner);
+
+const CircleOuterStyled = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "size",
+})<Omit<StyleProps, "theme">>(styles.circleOuter);
+
+const BoxCircleStyled = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "size",
+})<Pick<StyleProps, "size">>(styles.containerCircle);
+
+const BoxStyled = styled(Box)(styles.container);
+
+/**
+ * The StatusLED pattern provides on and off states and serves as a visual cue intended to attract
+ * the user's attention and communicate severity level information.
+ *
+ * //Default Import
+ * `import StatusLed from '@carrier-io/air-react/StatusLed'`
+ */
+const StatusLed: React.FC<StatusLedProps> = ({
+  severity = Severity.Default,
+  glow = false,
+  size = 12,
+  label,
+  labelPosition = "end",
+  ...rest
+}) => {
+  const circleSize = size * 2;
+
+  return (
+    <BoxStyled data-testid={rest["data-testid"]}>
+      {label && labelPosition === "start" && (
+        <Typography
+          variant="body2"
+          aria-label="label"
+          sx={(theme) => ({ mr: 0.5, color: theme.palette.base?.text.primary })}
+        >
+          {label}
+        </Typography>
+      )}
+      <BoxCircleStyled size={circleSize}>
+        {glow && (
+          <CircleOuterStyled
+            severity={severity}
+            size={size}
+            aria-label="circle-outer"
+          />
+        )}
+        <CircleInnerStyled
+          severity={severity}
+          size={size}
+          aria-label="circle-inner"
+        />
+      </BoxCircleStyled>
+      {label && labelPosition === "end" && (
+        <Typography
+          variant="body2"
+          aria-label="label"
+          sx={(theme) => ({ mr: 0.5, color: theme.palette.base?.text.primary })}
+        >
+          {label}
+        </Typography>
+      )}
+    </BoxStyled>
+  );
+};
+
+export default StatusLed;

package/src/components/StatusLed/index.ts

@@ -0,0 +1,4 @@
+export { default } from "./StatusLed";
+export { default as StatusLed } from "./StatusLed";
+export * from "./StatusLed";
+export * from "./types";

package/src/components/StatusLed/styles.ts

@@ -0,0 +1,39 @@
+import { CSSObject } from "@mui/material";
+import { Theme } from "@mui/material/styles";
+
+import { getColorInner, getColorOuter } from "./utils";
+import { StyleProps } from "./types";
+
+export default {
+  circleInner: ({ theme, severity, size }: StyleProps): CSSObject => ({
+    height: size,
+    width: size,
+    borderRadius: "50%",
+    backgroundColor: getColorInner(theme as unknown as Theme, severity),
+    position: "absolute",
+  }),
+  circleOuter: ({ theme, severity, size }: StyleProps): CSSObject => {
+    const roundedOuterSize = Math.round(size * 1.5);
+    return {
+      height: roundedOuterSize,
+      width: roundedOuterSize,
+      borderRadius: "50%",
+      filter: `blur(${size / 6}px)`,
+      backgroundColor: getColorOuter(theme as unknown as Theme, severity),
+      "will-change": "transform",
+    };
+  },
+  containerCircle: ({ size }: Pick<StyleProps, "size">): CSSObject => ({
+    position: "relative",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: size,
+    height: size,
+  }),
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+  } as CSSObject,
+};

package/src/components/StatusLed/types.ts

@@ -0,0 +1,59 @@
+import { Theme } from "@mui/material/styles";
+
+export enum Severity {
+  Success = "success",
+  Info = "info",
+  Warning = "warning",
+  Error = "error",
+  Default = "default",
+  Static = "static",
+}
+
+export interface StyleProps {
+  severity: Severity;
+  size: number;
+  theme: Theme;
+}
+
+export interface StatusLedProps {
+  /**
+   * The severity of the StatusLed. This defines the color.
+   *
+   * @default 'default'
+   */
+  severity?: Severity;
+
+  /**
+   * A boolean that controls the presence of outer circle (glow) of the StatusLed.
+   * The overall size is rounded 150% of the size property value if glow is enabled
+   *
+   * @default False
+   */
+  glow?: boolean;
+
+  /**
+   * The size of the inner circle in pixels.
+   * The size of the outer circle (glow) is rounded 50% larger if present.
+   *
+   * @default 12
+   */
+  size?: number;
+
+  /**
+   * The label content.
+   */
+  label?: string;
+
+  /**
+   * Controls where the label should be placed.
+   *
+   * @default end
+   */
+
+  labelPosition?: "start" | "end";
+
+  /**
+   * For testing purposes
+   */
+  "data-testid"?: string;
+}

package/src/components/StatusLed/utils.ts

@@ -0,0 +1,31 @@
+import { lighten, PaletteOptions } from "@mui/material";
+import { Theme } from "@mui/material/styles";
+import { SimplePaletteColorOptions } from "@mui/material/styles/createPalette";
+
+import { Severity } from "./types";
+
+export const getColorInner = (theme: Theme, severity: Severity): string => {
+  const key = severity.toLowerCase() as keyof PaletteOptions;
+  const palette = theme.palette[key] as SimplePaletteColorOptions;
+  const finalColor =
+    palette?.main ||
+    (severity == Severity.Static
+      ? theme.palette.base?.dark || theme.palette.common.black
+      : theme.palette.base?.state?.disabledContent ||
+        lighten(theme.palette.common.black, 0.7));
+
+  return finalColor;
+};
+
+export const getColorOuter = (theme: Theme, severity: Severity): string => {
+  const key = severity.toLowerCase() as keyof PaletteOptions;
+  const palette = theme.palette[key] as SimplePaletteColorOptions;
+  const finalColor =
+    palette?.light ??
+    (severity == Severity.Static
+      ? theme.palette.base?.dark || theme.palette.common.black
+      : theme.palette.base?.state?.disabledContent ||
+        lighten(theme.palette.common.black, 0.8));
+
+  return finalColor;
+};

package/src/index.ts

@@ -32,6 +32,8 @@ export { default as Avatar, AvatarGroup } from "./components/Avatar";
 export type { AvatarProps, AvatarGroupProps } from "./components/Avatar";
 export { default as MobileStatusBar } from "./components/MobileStatusBar";
 export type { MobileStatusBarProps } from "./components/MobileStatusBar";
+export { default as StatusLed } from "./components/StatusLed";
+export type { StatusLedProps, Severity } from "./components/StatusLed";
 export * from "./components/theme";
 
 // Demo Icons - exported from main index to avoid deep-path imports
@@ -42,6 +44,9 @@ export {
   WarningTriangle,
   MenuIcon,
   MoreVerticalIcon,
+  NotificationsIcon,
+  AccountCircleIcon,
+  ChevronLeftIcon,
   SvgIcon,
   iconRegistry,
   getIcon,
@@ -54,6 +59,9 @@ export type {
   WarningTriangleProps,
   MenuIconProps,
   MoreVerticalIconProps,
+  NotificationsIconProps,
+  AccountCircleIconProps,
+  ChevronLeftIconProps,
   SvgIconProps,
   IconInfo,
 } from "./components/Icon/icons/demo";