restructure of ui

figma · Jun 14, 2024 · 7be7b5a · 7be7b5a
1 parent 0aa002c
commit 7be7b5a
Show file tree

Hide file tree

Showing 420 changed files with 7,676 additions and 1,064 deletions.
diff --git a/.storybook/main.tsx b/.storybook/main.tsx
@@ -22,12 +22,13 @@ const config: StorybookConfig = {
     if (config.resolve) {
       config.resolve.alias = {
         ...config.resolve.alias,
-        icons: path.resolve(__dirname, "/src/icons"),
+        compositions: path.resolve(__dirname, "/src/compositions"),
         hooks: path.resolve(__dirname, "/src/hooks"),
+        icons: path.resolve(__dirname, "/src/icons"),
+        layout: path.resolve(__dirname, "/src/layout"),
         providers: path.resolve(__dirname, "/src/providers"),
-        "ui/compositions": path.resolve(__dirname, "/src/ui/compositions"),
-        "ui/layout": path.resolve(__dirname, "/src/ui/layout"),
-        "ui/primitives": path.resolve(__dirname, "/src/ui/primitives"),
+        ui: path.resolve(__dirname, "/src/ui"),
+        utils: path.resolve(__dirname, "/src/utils"),
       };
     }
 

diff --git a/figma.config.json b/figma.config.json
@@ -5,9 +5,9 @@
     "react": {
       "importPaths": {
         "*": "ui",
-        "src/ui/compositions/**/*": "ui/compositions",
-        "src/ui/layout/**/*": "ui/layout",
-        "src/ui/primitives/**/*": "ui/primitives",
+        "src/compositions/**/*": "compositions",
+        "src/layout/**/*": "layout",
+        "src/ui/**/*": "ui",
         "src/icons/*": "icons"
       }
     },

diff --git a/scripts/preview/Figma.stories.tsx b/scripts/preview/Figma.stories.tsx
@@ -21,7 +21,7 @@ import {
   Text,
   TextAreaField,
   TextSubtitle,
-} from "ui/primitives";
+} from "ui";
 
 function Figma() {
   return <>Figma</>;

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,7 @@
+import { Footer, Header } from "compositions";
+import { Flex, Section } from "layout";
 import { AuthenticationProvider } from "providers";
-import { Footer, Header } from "ui/compositions";
-import { Flex, Section } from "ui/layout";
-import { TextContentTitle } from "ui/primitives";
+import { TextContentTitle } from "ui";
 
 function App() {
   return (

diff --git a/src/ui/compositions/Cards/Cards.figma.tsx → src/compositions/Cards/Cards.figma.tsx b/src/ui/compositions/Cards/Cards.figma.tsx → src/compositions/Cards/Cards.figma.tsx
@@ -1,11 +1,11 @@
 import { figma } from "@figma/code-connect";
-import { Image, Text, TextHeading } from "ui/primitives";
+import { Image, Text, TextHeading } from "ui";
 import { Card } from "./Cards";
 
 figma.connect(Card, "<FIGMA_URL_CARD>", {
   props: {
     asset: figma.enum("Asset Type", {
-      Image: <Image alt="Always use alt text" aspectRatio="1-1" size="sm" />,
+      Image: <Image alt="Always use alt text" aspectRatio="1-1" size="small" />,
       Icon: figma.instance("Icon"),
     }),
     heading: figma.string("Heading"),

diff --git a/src/ui/compositions/Cards/Cards.tsx → src/compositions/Cards/Cards.tsx b/src/ui/compositions/Cards/Cards.tsx → src/compositions/Cards/Cards.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import useMediaQuery from "hooks/useMediaQuery";
+import { useMediaQuery } from "hooks";
 import { ComponentPropsWithoutRef } from "react";
 import {
   Avatar,
@@ -13,7 +13,7 @@ import {
   TextListItem,
   TextTitlePage,
 } from "ui";
-import { AnchorOrButton, AnchorOrButtonProps } from "ui/utils/AnchorOrButton";
+import { AnchorOrButton, AnchorOrButtonProps } from "utils";
 import "./cards.css";
 
 export type CardProps = ComponentPropsWithoutRef<"div"> & {
@@ -206,7 +206,7 @@ export function TestimonialCard({
     <Card {...props} direction="vertical" variant="stroke">
       <TextHeading>{heading}</TextHeading>
       <AvatarBlock title={name} description={`@${username}`}>
-        <Avatar size="lg" src={src} initials={initials} />
+        <Avatar size="large" src={src} initials={initials} />
       </AvatarBlock>
     </Card>
   );

diff --git a/src/ui/compositions/Cards/cards.css → src/compositions/Cards/cards.css b/src/ui/compositions/Cards/cards.css → src/compositions/Cards/cards.css
diff --git a/...ui/compositions/Footers/Footers.figma.tsx → src/compositions/Footers/Footers.figma.tsx b/...ui/compositions/Footers/Footers.figma.tsx → src/compositions/Footers/Footers.figma.tsx
diff --git a/src/ui/compositions/Footers/Footers.tsx → src/compositions/Footers/Footers.tsx b/src/ui/compositions/Footers/Footers.tsx → src/compositions/Footers/Footers.tsx
@@ -1,17 +1,14 @@
-import useMediaQuery from "hooks/useMediaQuery";
+import { useMediaQuery } from "hooks";
 import { IconInstagram, IconLinkedin, IconTwitter, IconYoutube } from "icons";
+import { Flex, FlexItem, Section, type SectionProps } from "layout";
 import {
   ButtonGroup,
-  Flex,
-  FlexItem,
   IconButton,
   Logo,
-  Section,
   TextLink,
   TextLinkList,
   TextListItem,
   TextStrong,
-  type SectionProps,
 } from "ui";
 
 export type FooterProps = Omit<SectionProps, "variant" | "padding">;
@@ -22,8 +19,8 @@ export function Footer({ className, ...props }: FooterProps) {
     <Section
       elementType="footer"
       variant="stroke"
-      paddingTop="1600""
-      paddingBottom="4000""
+      paddingTop="1600"
+      paddingBottom="4000"
       style={{ marginTop: "auto" }}
       {...props}
     >

diff --git a/...ui/compositions/Headers/Headers.figma.tsx → src/compositions/Headers/Headers.figma.tsx b/...ui/compositions/Headers/Headers.figma.tsx → src/compositions/Headers/Headers.figma.tsx
diff --git a/src/ui/compositions/Headers/Headers.tsx → src/compositions/Headers/Headers.tsx b/src/ui/compositions/Headers/Headers.tsx → src/compositions/Headers/Headers.tsx
@@ -1,6 +1,7 @@
 import clsx from "clsx";
-import useMediaQuery from "hooks/useMediaQuery";
+import { useMediaQuery } from "hooks";
 import { IconChevronDown, IconMenu, IconX } from "icons";
+import { Flex, FlexItem, Section, type SectionProps } from "layout";
 import { AuthenticationContext } from "providers";
 import { useContext, useState } from "react";
 import {
@@ -10,8 +11,6 @@ import {
   ButtonGroup,
   Dialog,
   DialogModal,
-  Flex,
-  FlexItem,
   IconButton,
   Label,
   Logo,
@@ -21,10 +20,8 @@ import {
   MenuTrigger,
   Navigation,
   NavigationItem,
-  Section,
-  type SectionProps,
 } from "ui";
-import { AnchorOrButton } from "ui/utils/AnchorOrButton";
+import { AnchorOrButton } from "utils";
 import "./headers.css";
 
 export function HeaderAuth() {

diff --git a/src/ui/compositions/Headers/headers.css → src/compositions/Headers/headers.css b/src/ui/compositions/Headers/headers.css → src/compositions/Headers/headers.css
diff --git a/src/ui/compositions/index.ts → src/compositions/index.ts b/src/ui/compositions/index.ts → src/compositions/index.ts
diff --git a/src/hooks/useMediaQuery.tsx b/src/hooks/useMediaQuery.tsx
@@ -31,7 +31,7 @@ const mediaQueryKeys: MediaQueryKey[] = [
 
 type MediaQueryMatches = { [K in MediaQueryKey]: boolean };
 
-const useMediaQuery = () => {
+export const useMediaQuery = () => {
   const [matches, setMatches] = useState<MediaQueryMatches>({
     isDesktop: false,
     isTablet: false,
@@ -64,5 +64,3 @@ const useMediaQuery = () => {
 
   return matches;
 };
-
-export default useMediaQuery;
diff --git a/src/icons/IconActivity.tsx b/src/icons/IconActivity.tsx
@@ -1,6 +1,26 @@
 import figma from "@figma/code-connect";
-import { IconProps, Icon } from "ui/primitives";
+import { Icon, IconProps } from "ui";
 export const IconActivity = (props: IconProps) => (
-  <Icon {...props}><path d="M14.6666 8.8C15.1085 8.8 15.4666 8.44183 15.4666 8C15.4666 7.55817 15.1085 7.2 14.6666 7.2V8.8ZM12 8V7.2C11.6556 7.2 11.3499 7.42034 11.241 7.74702L12 8ZM9.99998 14L9.24103 14.253C9.34992 14.5797 9.65563 14.8 9.99998 14.8C10.3443 14.8 10.65 14.5797 10.7589 14.253L9.99998 14ZM5.99998 2L6.75893 1.74702C6.65003 1.42034 6.34432 1.2 5.99998 1.2C5.65564 1.2 5.34992 1.42034 5.24103 1.74702L5.99998 2ZM3.99998 8V8.8C4.34432 8.8 4.65004 8.57966 4.75893 8.25298L3.99998 8ZM1.33331 7.2C0.891485 7.2 0.533313 7.55817 0.533313 8C0.533313 8.44183 0.891485 8.8 1.33331 8.8V7.2ZM14.6666 7.2H12V8.8H14.6666V7.2ZM11.241 7.74702L9.24103 13.747L10.7589 14.253L12.7589 8.25298L11.241 7.74702ZM10.7589 13.747L6.75893 1.74702L5.24103 2.25298L9.24103 14.253L10.7589 13.747ZM5.24103 1.74702L3.24103 7.74702L4.75893 8.25298L6.75893 2.25298L5.24103 1.74702ZM3.99998 7.2H1.33331V8.8H3.99998V7.2Z" fill="var(--svg-fill-color)"/></Icon>
+  <Icon {...props}>
+    <path
+      d="M14.6666 8.8C15.1085 8.8 15.4666 8.44183 15.4666 8C15.4666 7.55817 15.1085 7.2 14.6666 7.2V8.8ZM12 8V7.2C11.6556 7.2 11.3499 7.42034 11.241 7.74702L12 8ZM9.99998 14L9.24103 14.253C9.34992 14.5797 9.65563 14.8 9.99998 14.8C10.3443 14.8 10.65 14.5797 10.7589 14.253L9.99998 14ZM5.99998 2L6.75893 1.74702C6.65003 1.42034 6.34432 1.2 5.99998 1.2C5.65564 1.2 5.34992 1.42034 5.24103 1.74702L5.99998 2ZM3.99998 8V8.8C4.34432 8.8 4.65004 8.57966 4.75893 8.25298L3.99998 8ZM1.33331 7.2C0.891485 7.2 0.533313 7.55817 0.533313 8C0.533313 8.44183 0.891485 8.8 1.33331 8.8V7.2ZM14.6666 7.2H12V8.8H14.6666V7.2ZM11.241 7.74702L9.24103 13.747L10.7589 14.253L12.7589 8.25298L11.241 7.74702ZM10.7589 13.747L6.75893 1.74702L5.24103 2.25298L9.24103 14.253L10.7589 13.747ZM5.24103 1.74702L3.24103 7.74702L4.75893 8.25298L6.75893 2.25298L5.24103 1.74702ZM3.99998 7.2H1.33331V8.8H3.99998V7.2Z"
+      fill="var(--svg-fill-color)"
+    />
+  </Icon>
+);
+figma.connect(
+  IconActivity,
+  "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=4039:13018",
+  {
+    props: {
+      size: figma.enum("Size", {
+        "20": "20",
+        "24": "24",
+        "32": "32",
+        "40": "40",
+        "48": "48",
+      }),
+    },
+    example: ({ size }) => <IconActivity size={size} />,
+  },
 );
-figma.connect(IconActivity, "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=4039:13018", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => <IconActivity size={size} /> });
diff --git a/src/icons/IconAirplay.tsx b/src/icons/IconAirplay.tsx
@@ -1,6 +1,26 @@
 import figma from "@figma/code-connect";
-import { IconProps, Icon } from "ui/primitives";
+import { Icon, IconProps } from "ui";
 export const IconAirplay = (props: IconProps) => (
-  <Icon {...props}><path d="M3.33331 12.1333C3.77514 12.1333 4.13331 11.7752 4.13331 11.3333C4.13331 10.8915 3.77514 10.5333 3.33331 10.5333V12.1333ZM1.33331 10H0.533313H1.33331ZM2.66665 2V1.2V2ZM13.3333 2V1.2V2ZM12.6666 10.5333C12.2248 10.5333 11.8666 10.8915 11.8666 11.3333C11.8666 11.7752 12.2248 12.1333 12.6666 12.1333V10.5333ZM7.99998 10L8.61456 9.48785C8.46256 9.30546 8.2374 9.2 7.99998 9.2C7.76256 9.2 7.5374 9.30546 7.3854 9.48785L7.99998 10ZM11.3333 14V14.8C11.6437 14.8 11.9261 14.6204 12.0578 14.3393C12.1894 14.0582 12.1466 13.7263 11.9479 13.4879L11.3333 14ZM4.66665 14L4.05207 13.4879C3.85335 13.7263 3.81051 14.0582 3.94217 14.3393C4.07384 14.6204 4.35623 14.8 4.66665 14.8V14ZM3.33331 10.5333H2.66665V12.1333H3.33331V10.5333ZM2.66665 10.5333C2.5252 10.5333 2.38954 10.4771 2.28952 10.3771L1.15815 11.5085C1.55823 11.9086 2.10085 12.1333 2.66665 12.1333V10.5333ZM2.28952 10.3771C2.1895 10.2771 2.13331 10.1414 2.13331 10H0.533313C0.533313 10.5658 0.758074 11.1084 1.15815 11.5085L2.28952 10.3771ZM2.13331 10V3.33333H0.533313V10H2.13331ZM2.13331 3.33333C2.13331 3.19188 2.1895 3.05623 2.28952 2.95621L1.15815 1.82484C0.758074 2.22492 0.533313 2.76754 0.533313 3.33333H2.13331ZM2.28952 2.95621C2.38954 2.85619 2.5252 2.8 2.66665 2.8V1.2C2.10085 1.2 1.55823 1.42476 1.15815 1.82484L2.28952 2.95621ZM2.66665 2.8H13.3333V1.2H2.66665V2.8ZM13.3333 2.8C13.4748 2.8 13.6104 2.85619 13.7104 2.95621L14.8418 1.82484C14.4417 1.42476 13.8991 1.2 13.3333 1.2V2.8ZM13.7104 2.95621C13.8105 3.05623 13.8666 3.19188 13.8666 3.33333H15.4666C15.4666 2.76754 15.2419 2.22492 14.8418 1.82484L13.7104 2.95621ZM13.8666 3.33333V10H15.4666V3.33333H13.8666ZM13.8666 10C13.8666 10.1414 13.8105 10.2771 13.7104 10.3771L14.8418 11.5085C15.2419 11.1084 15.4666 10.5658 15.4666 10H13.8666ZM13.7104 10.3771C13.6104 10.4771 13.4748 10.5333 13.3333 10.5333V12.1333C13.8991 12.1333 14.4417 11.9086 14.8418 11.5085L13.7104 10.3771ZM13.3333 10.5333H12.6666V12.1333H13.3333V10.5333ZM7.3854 10.5121L10.7187 14.5121L11.9479 13.4879L8.61456 9.48785L7.3854 10.5121ZM11.3333 13.2H4.66665V14.8H11.3333V13.2ZM5.28122 14.5121L8.61456 10.5121L7.3854 9.48785L4.05207 13.4879L5.28122 14.5121Z" fill="var(--svg-fill-color)"/></Icon>
+  <Icon {...props}>
+    <path
+      d="M3.33331 12.1333C3.77514 12.1333 4.13331 11.7752 4.13331 11.3333C4.13331 10.8915 3.77514 10.5333 3.33331 10.5333V12.1333ZM1.33331 10H0.533313H1.33331ZM2.66665 2V1.2V2ZM13.3333 2V1.2V2ZM12.6666 10.5333C12.2248 10.5333 11.8666 10.8915 11.8666 11.3333C11.8666 11.7752 12.2248 12.1333 12.6666 12.1333V10.5333ZM7.99998 10L8.61456 9.48785C8.46256 9.30546 8.2374 9.2 7.99998 9.2C7.76256 9.2 7.5374 9.30546 7.3854 9.48785L7.99998 10ZM11.3333 14V14.8C11.6437 14.8 11.9261 14.6204 12.0578 14.3393C12.1894 14.0582 12.1466 13.7263 11.9479 13.4879L11.3333 14ZM4.66665 14L4.05207 13.4879C3.85335 13.7263 3.81051 14.0582 3.94217 14.3393C4.07384 14.6204 4.35623 14.8 4.66665 14.8V14ZM3.33331 10.5333H2.66665V12.1333H3.33331V10.5333ZM2.66665 10.5333C2.5252 10.5333 2.38954 10.4771 2.28952 10.3771L1.15815 11.5085C1.55823 11.9086 2.10085 12.1333 2.66665 12.1333V10.5333ZM2.28952 10.3771C2.1895 10.2771 2.13331 10.1414 2.13331 10H0.533313C0.533313 10.5658 0.758074 11.1084 1.15815 11.5085L2.28952 10.3771ZM2.13331 10V3.33333H0.533313V10H2.13331ZM2.13331 3.33333C2.13331 3.19188 2.1895 3.05623 2.28952 2.95621L1.15815 1.82484C0.758074 2.22492 0.533313 2.76754 0.533313 3.33333H2.13331ZM2.28952 2.95621C2.38954 2.85619 2.5252 2.8 2.66665 2.8V1.2C2.10085 1.2 1.55823 1.42476 1.15815 1.82484L2.28952 2.95621ZM2.66665 2.8H13.3333V1.2H2.66665V2.8ZM13.3333 2.8C13.4748 2.8 13.6104 2.85619 13.7104 2.95621L14.8418 1.82484C14.4417 1.42476 13.8991 1.2 13.3333 1.2V2.8ZM13.7104 2.95621C13.8105 3.05623 13.8666 3.19188 13.8666 3.33333H15.4666C15.4666 2.76754 15.2419 2.22492 14.8418 1.82484L13.7104 2.95621ZM13.8666 3.33333V10H15.4666V3.33333H13.8666ZM13.8666 10C13.8666 10.1414 13.8105 10.2771 13.7104 10.3771L14.8418 11.5085C15.2419 11.1084 15.4666 10.5658 15.4666 10H13.8666ZM13.7104 10.3771C13.6104 10.4771 13.4748 10.5333 13.3333 10.5333V12.1333C13.8991 12.1333 14.4417 11.9086 14.8418 11.5085L13.7104 10.3771ZM13.3333 10.5333H12.6666V12.1333H13.3333V10.5333ZM7.3854 10.5121L10.7187 14.5121L11.9479 13.4879L8.61456 9.48785L7.3854 10.5121ZM11.3333 13.2H4.66665V14.8H11.3333V13.2ZM5.28122 14.5121L8.61456 10.5121L7.3854 9.48785L4.05207 13.4879L5.28122 14.5121Z"
+      fill="var(--svg-fill-color)"
+    />
+  </Icon>
+);
+figma.connect(
+  IconAirplay,
+  "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=4039:13019",
+  {
+    props: {
+      size: figma.enum("Size", {
+        "20": "20",
+        "24": "24",
+        "32": "32",
+        "40": "40",
+        "48": "48",
+      }),
+    },
+    example: ({ size }) => <IconAirplay size={size} />,
+  },
 );
-figma.connect(IconAirplay, "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=4039:13019", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => <IconAirplay size={size} /> });
diff --git a/src/icons/IconAlertCircle.tsx b/src/icons/IconAlertCircle.tsx
@@ -1,6 +1,33 @@
 import figma from "@figma/code-connect";
-import { IconProps, Icon } from "ui/primitives";
+import { Icon, IconProps } from "ui";
 export const IconAlertCircle = (props: IconProps) => (
-  <Icon {...props}><g clipPath="url(#clip0_68_15555)"><path d="M8.80004 5.33325C8.80004 4.89142 8.44187 4.53325 8.00004 4.53325C7.55821 4.53325 7.20004 4.89142 7.20004 5.33325H8.80004ZM7.20004 7.99992C7.20004 8.44175 7.55821 8.79992 8.00004 8.79992C8.44187 8.79992 8.80004 8.44175 8.80004 7.99992H7.20004ZM8.00004 9.86658C7.55821 9.86658 7.20004 10.2248 7.20004 10.6666C7.20004 11.1084 7.55821 11.4666 8.00004 11.4666V9.86658ZM8.00671 11.4666C8.44853 11.4666 8.80671 11.1084 8.80671 10.6666C8.80671 10.2248 8.44853 9.86658 8.00671 9.86658V11.4666ZM13.8667 7.99992C13.8667 11.24 11.2401 13.8666 8.00004 13.8666V15.4666C12.1238 15.4666 15.4667 12.1236 15.4667 7.99992H13.8667ZM8.00004 13.8666C4.75997 13.8666 2.13337 11.24 2.13337 7.99992H0.533374C0.533374 12.1236 3.87631 15.4666 8.00004 15.4666V13.8666ZM2.13337 7.99992C2.13337 4.75985 4.75997 2.13325 8.00004 2.13325V0.533252C3.87631 0.533252 0.533374 3.87619 0.533374 7.99992H2.13337ZM8.00004 2.13325C11.2401 2.13325 13.8667 4.75985 13.8667 7.99992H15.4667C15.4667 3.87619 12.1238 0.533252 8.00004 0.533252V2.13325ZM7.20004 5.33325V7.99992H8.80004V5.33325H7.20004ZM8.00004 11.4666H8.00671V9.86658H8.00004V11.4666Z" fill="var(--svg-fill-color)"/></g><defs><clipPath id="clip0_68_15555"><rect width="16" height="16" fill="white"/></clipPath></defs></Icon>
+  <Icon {...props}>
+    <g clipPath="url(#clip0_68_15555)">
+      <path
+        d="M8.80004 5.33325C8.80004 4.89142 8.44187 4.53325 8.00004 4.53325C7.55821 4.53325 7.20004 4.89142 7.20004 5.33325H8.80004ZM7.20004 7.99992C7.20004 8.44175 7.55821 8.79992 8.00004 8.79992C8.44187 8.79992 8.80004 8.44175 8.80004 7.99992H7.20004ZM8.00004 9.86658C7.55821 9.86658 7.20004 10.2248 7.20004 10.6666C7.20004 11.1084 7.55821 11.4666 8.00004 11.4666V9.86658ZM8.00671 11.4666C8.44853 11.4666 8.80671 11.1084 8.80671 10.6666C8.80671 10.2248 8.44853 9.86658 8.00671 9.86658V11.4666ZM13.8667 7.99992C13.8667 11.24 11.2401 13.8666 8.00004 13.8666V15.4666C12.1238 15.4666 15.4667 12.1236 15.4667 7.99992H13.8667ZM8.00004 13.8666C4.75997 13.8666 2.13337 11.24 2.13337 7.99992H0.533374C0.533374 12.1236 3.87631 15.4666 8.00004 15.4666V13.8666ZM2.13337 7.99992C2.13337 4.75985 4.75997 2.13325 8.00004 2.13325V0.533252C3.87631 0.533252 0.533374 3.87619 0.533374 7.99992H2.13337ZM8.00004 2.13325C11.2401 2.13325 13.8667 4.75985 13.8667 7.99992H15.4667C15.4667 3.87619 12.1238 0.533252 8.00004 0.533252V2.13325ZM7.20004 5.33325V7.99992H8.80004V5.33325H7.20004ZM8.00004 11.4666H8.00671V9.86658H8.00004V11.4666Z"
+        fill="var(--svg-fill-color)"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_68_15555">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </Icon>
+);
+figma.connect(
+  IconAlertCircle,
+  "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=4039:13020",
+  {
+    props: {
+      size: figma.enum("Size", {
+        "20": "20",
+        "24": "24",
+        "32": "32",
+        "40": "40",
+        "48": "48",
+      }),
+    },
+    example: ({ size }) => <IconAlertCircle size={size} />,
+  },
 );
-figma.connect(IconAlertCircle, "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=4039:13020", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => <IconAlertCircle size={size} /> });