diff --git a/.cursor/rules/usage-guidelines.mdc b/.cursor/rules/usage-guidelines.mdc index a2fa8782..128900fe 100644 --- a/.cursor/rules/usage-guidelines.mdc +++ b/.cursor/rules/usage-guidelines.mdc @@ -9,7 +9,7 @@ SDS is a production-ready design system featuring: - 🎨 **Figma Integration**: Full Code Connect integration with variables, styles, and components - βš›οΈ **React Components**: Built on React Aria/Stately for accessibility - 🎯 **TypeScript**: Fully typed component library -- πŸ“š **Storybook**: Comprehensive component documentation + - 🎨 **Design Tokens**: CSS custom properties with light/dark mode support - πŸ“± **Responsive**: Mobile-first responsive design patterns @@ -18,15 +18,14 @@ SDS is a production-ready design system featuring: ### Development Commands - `npm run app:dev` - Start development server at localhost:8000 -- `npm run storybook` - Launch Storybook at localhost:6006 + - `npm run app:build` - Build the application -- `npm run storybook:build` - Build Storybook + - `npm run script:tokens` - Sync design tokens from Figma - `npm run script:icons` - Sync icons from Figma ### Key Resources -- [Live Storybook](https://figma.github.io/sds/storybook) - Component documentation - [Figma Community File](https://www.figma.com/community/file/1380235722331273046/simple-design-system) - Design source ## Quick Start Checklist @@ -38,7 +37,7 @@ Before implementing any Figma design, follow this checklist: - When trying to get a high level understanding of the design, you can use #get_image to get image representation of the design to contextualize what is selected in Figma - Whenever you want more information about the specific UI elements that are selected, use #get_code - With the get_code, get_code_connect_map, and get_variable_map tools you will receive information about patterns that should already be defined in this repository. -- If patterns dont already exist, you should ask for permission and clarify what about the design isn't already accounted for in this codebase that is present in the design. +- If patterns dont already exist, you should ask for permission and clarify what about the design't already accounted for in this codebase that is present in the design. 2. βœ… **Read component APIs** in the actual TypeScript files before using 3. βœ… **Use SDS components only** - never import from `@react-aria`, `@react-stately`, etc. @@ -50,27 +49,16 @@ Before implementing any Figma design, follow this checklist: When importing SDS components, use aliases to ensure correct paths. These are described in the `vite.config.ts` file under `resolve.alias`: ```tsx -import { Footer, Header } from "compositions"; -import { - useAuth, - usePricing, - useProducts, - AuthProvider, - PricingProvider, - ProductsProvider, - AllProviders, -} from "data"; -import { useMediaQuery } from "hooks"; +import { useMediaQuery } from "utils"; import { IconChevronLeft } from "icons"; import { placeholder } from "images"; -import { Flex, Section } from "layout"; import { Accordion, AccordionItem, Button, TextContentHeading, TextContentTitle, -} from "primitives"; +} from "components"; ``` ## Figma to SDS Translation Guidelines @@ -120,25 +108,15 @@ All design tokens from Figma are defined as CSS variables in [src/theme.css](../ ``` src/ -β”œβ”€β”€ data/ # Data layer - contexts, providers, services, types -β”‚ β”œβ”€β”€ contexts/ # React context definitions (AuthContext, PricingContext, ProductsContext) -β”‚ β”œβ”€β”€ providers/ # Context providers with state management -β”‚ β”œβ”€β”€ services/ # API and business logic services -β”‚ β”œβ”€β”€ types/ # TypeScript type definitions for data models -β”‚ └── hooks/ # Data-specific custom hooks (useAuth, usePricing, useProducts) β”œβ”€β”€ ui/ # UI component library -β”‚ β”œβ”€β”€ primitives/ # Atomic components (Button, Input, etc.) -β”‚ β”œβ”€β”€ compositions/ # Complex components (Cards, Forms, etc.) -β”‚ β”œβ”€β”€ layout/ # Layout components (Flex, Section, Grid) +β”‚ β”œβ”€β”€ components/ # Atomic components (Button, Input, etc.) β”‚ β”œβ”€β”€ hooks/ # UI-specific custom hooks (useMediaQuery) β”‚ β”œβ”€β”€ icons/ # SVG icon components β”‚ β”œβ”€β”€ images/ # Image assets β”‚ └── utils/ # Utility functions and components -β”œβ”€β”€ stories/ # Storybook stories for all components -β”œβ”€β”€ examples/ # Examples of how to use components together in larger complete sections + β”œβ”€β”€ figma/ # Figma [Code Connect](https://www.figma.com/code-connect-docs/react/) files -β”‚ β”œβ”€β”€ primitives/ # Maps Figma components to React primitives -β”‚ β”œβ”€β”€ compositions/ # Maps Figma compositions to React components +β”‚ β”œβ”€β”€ components/ # Maps Figma components to React components β”‚ └── icons/ # Maps Figma icons to React icons β”œβ”€β”€ theme.css # CSS custom properties (design tokens) β”œβ”€β”€ reset.css # CSS reset @@ -146,22 +124,10 @@ src/ └── App.tsx # Demo application ``` -### Scripts Directory - -``` -scripts/ -β”œβ”€β”€ tokens/ # Design token sync from Figma -β”œβ”€β”€ icons/ # Icon sync from Figma -β”œβ”€β”€ component-metadata/ # Component metadata management -└── dev-resources/ # Development resource generation -``` - ## Component Library Structure All UI components are in [src/ui](../src/ui). **Never create new components - always use existing SDS components.** -All data management (contexts, providers, services, types, and data hooks) are in [src/data](../src/data). Use the provided context providers and custom hooks for state management. - ## SDS Component Hierarchy When you see `hidden={true}` in Figma data, it indicates that the node should be ignored. This can happen with Figma components frequently, as nodes that can be toggled with a prop need to exist, even when the prop is false. @@ -171,11 +137,11 @@ When you see `hidden={true}` in Figma data, it indicates that the node should be ## Figma Translation Process 1. **Extract design using Figma tools**: Always use the Figma MCP tools to get the design data -2. **Identify SDS components**: Map Figma components to existing SDS primitives, compositions, and layouts +2. **Identify SDS components**: Map Figma components to existing SDS components, and layouts - Use the `codeDependencies` field to find the correct component path - - If no direct mapping exists, look for similar components or compositions + - If no direct mapping exists, look for similar components 3. **Check component APIs**: Read the actual component files to understand props and usage patterns -4. **Use semantic imports**: Import from correct paths (e.g., `import { Button } from "ui/primitives/Button/Button"`) +4. **Use semantic imports**: Import from correct paths (e.g., `import { Button } from "ui/components/Button/Button"`) 5. **Apply design tokens**: Use CSS variables for all styling values ## Common Translation Patterns @@ -201,68 +167,13 @@ When you see `hidden={true}` in Figma data, it indicates that the node should be ``` -### Typography - -```tsx -// Figma: Text with specific styles -// SDS Implementation: -Heading Text -Body text -Small text -``` - -### Layout - -```tsx -// Figma: Cards in a grid -// SDS Implementation: -
- -
Card 1
-
Card 2
-
Card 3
- -
-``` - -```tsx -// Complex layout with responsive behavior -function ResponsiveExample() { - const { isMobile } = useMediaQuery(); - - return ( -
- - {/* Navigation Pills */} - - Active - Inactive - - - {/* Content Grid */} - - {content.map((item) => ( - - ))} - - -
- ); -} -``` - ## Best Practices & Common Pitfalls ### Component API Guidelines - **Always check existing component props**: Read the TypeScript definitions in component files - **Use semantic prop names**: `isSelected` not `active`, `variant` not `type` -- **Leverage composition**: Combine primitives rather than creating custom components +- **Leverage composition**: Combine components rather than creating custom components - **Follow naming conventions**: PascalCase for components, camelCase for props ### Essential Rules @@ -301,7 +212,7 @@ function ResponsiveExample() { ## Component Categories -### Primitives (`src/ui/primitives/`) +### components (`src/ui/components/`) Single-purpose, reusable components (alphabetically ordered): @@ -334,57 +245,12 @@ Single-purpose, reusable components (alphabetically ordered): - **Textarea** - Multi-line text input with resize options - **Tooltip** - Contextual help and information overlays -### Layout (`src/ui/layout/`) - -Structural components for positioning: - -- **Flex** - Flexbox layouts with gap, alignment, and responsive props -- **Section** - Page sections with padding and background variants -- **Grid** - CSS Grid layouts (when Flex isn't sufficient) - -### Compositions (`src/ui/compositions/`) - -Complex, pre-built component patterns: - -- **Cards** - Content cards with headers, bodies, and actions -- **Forms** - Complete form layouts with validation. Meant to be examples. -- **Headers/Footers** - Page navigation and footer components - ### Hooks (`src/ui/hooks/`) UI-specific custom React hooks: - **useMediaQuery** - Responsive breakpoint detection -### Data Layer (`src/data/`) - -Data management layer with contexts, providers, services, and hooks: - -#### Hooks (`src/data/hooks/`) - -- **useAuth** - Authentication state and methods (login, logout, user data) -- **usePricing** - Pricing plans, cart management, and billing operations -- **useProducts** - Product catalog, search, filtering, and shopping cart - -#### Providers (`src/data/providers/`) - -- **AuthProvider** - Authentication context with loading states and error handling -- **PricingProvider** - Pricing and subscription management -- **ProductsProvider** - Product catalog and e-commerce functionality -- **AllProviders** - Combined provider wrapper for full application state - -#### Services (`src/data/services/`) - -- **authService** - Authentication API calls and token management -- **pricingService** - Pricing calculations and plan management -- **productsService** - Product data, filtering, and search operations - -#### Types (`src/data/types/`) - -- **auth.ts** - User, credentials, and authentication types -- **pricing.ts** - Plans, pricing, and cart types -- **products.ts** - Product, filter, and e-commerce types - ## Figma Integration SDS uses Figma Code Connect for seamless design-to-code integration. Here's how it works: @@ -398,7 +264,7 @@ SDS uses Figma Code Connect for seamless design-to-code integration. Here's how To enable Code Connect: 1. Use the **"SDS - Design Tokens"** and **"SDS - Components"** styles in Figma -2. Organize components in Figma using the same structure as SDS (primitives, compositions, etc.) +2. Organize components in Figma using the same structure as SDS (components, compositions, etc.) 3. Publish changes in Figma, then run `npm run script:tokens` and `npm run script:icons` to sync ### Known Limitations diff --git a/.env-rename b/.env-rename deleted file mode 100644 index f145d6ba..00000000 --- a/.env-rename +++ /dev/null @@ -1,2 +0,0 @@ -FIGMA_ACCESS_TOKEN=your_token_with_code_connect_variables_and_dev_resources_scopes -FIGMA_FILE_KEY=J0KLPKXiONDRssXD1AX9Oi \ No newline at end of file diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 62c02ce8..f1a7eb93 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -5,7 +5,7 @@ module.exports = { "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended", - "plugin:storybook/recommended", + ], ignorePatterns: ["dist", ".eslintrc.cjs"], parser: "@typescript-eslint/parser", diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md deleted file mode 100644 index ed270743..00000000 --- a/.github/copilot-instructions.md +++ /dev/null @@ -1,408 +0,0 @@ -# Simple Design System (SDS) Copilot Instructions - -Welcome to the Simple Design System repository! This is a comprehensive React-based design system with Figma integration using Code Connect. This guide will help you understand how to work with the codebase effectively. - -## Repository Overview - -SDS is a production-ready design system featuring: - -- 🎨 **Figma Integration**: Full Code Connect integration with variables, styles, and components -- βš›οΈ **React Components**: Built on React Aria/Stately for accessibility -- 🎯 **TypeScript**: Fully typed component library -- πŸ“š **Storybook**: Comprehensive component documentation -- 🎨 **Design Tokens**: CSS custom properties with light/dark mode support -- πŸ“± **Responsive**: Mobile-first responsive design patterns - -## Getting Started - -### Development Commands - -- `npm run app:dev` - Start development server at localhost:8000 -- `npm run storybook` - Launch Storybook at localhost:6006 -- `npm run app:build` - Build the application -- `npm run storybook:build` - Build Storybook -- `npm run script:tokens` - Sync design tokens from Figma -- `npm run script:icons` - Sync icons from Figma - -### Key Resources - -- [Live Storybook](https://figma.github.io/sds/storybook) - Component documentation -- [Figma Community File](https://www.figma.com/community/file/1380235722331273046/simple-design-system) - Design source - -## Quick Start Checklist - -Before implementing any Figma design, follow this checklist: - -1. βœ… **Use Figma MCP tools** to extract design data when prompted. - -- When trying to get a high level understanding of the design, you can use #get_image to get image representation of the design to contextualize what is selected in Figma -- Whenever you want more information about the specific UI elements that are selected, use #get_code -- With the get_code, get_code_connect_map, and get_variable_map tools you will receive information about patterns that should already be defined in this repository. -- If patterns dont already exist, you should ask for permission and clarify what about the design isn't already accounted for in this codebase that is present in the design. - -2. βœ… **Read component APIs** in the actual TypeScript files before using -3. βœ… **Use SDS components only** - never import from `@react-aria`, `@react-stately`, etc. -4. βœ… **Use CSS variables** - never hardcode colors, spacing, or typography -5. βœ… **Use layout components** - never write custom CSS for positioning - -## Importing Aliases - -When importing SDS components, use aliases to ensure correct paths. These are described in the `vite.config.ts` file under `resolve.alias`: - -```tsx -import { Footer, Header } from "compositions"; -import { - useAuth, - usePricing, - useProducts, - AuthProvider, - PricingProvider, - ProductsProvider, - AllProviders, -} from "data"; -import { useMediaQuery } from "hooks"; -import { IconChevronLeft } from "icons"; -import { placeholder } from "images"; -import { Flex, Section } from "layout"; -import { - Accordion, - AccordionItem, - Button, - TextContentHeading, - TextContentTitle, -} from "primitives"; -``` - -## Figma to SDS Translation Guidelines - -When implementing designs from Figma, follow these guidelines to ensure proper translation to the SDS component library. - -## Annotations - -In the MCP server response from Figma, you will see annotation attributes that provide context. The annotations can be describing behavior for the current node, or its descendants. - -```jsx -
-``` - -The prefix is a category for the annotation and describes the type of annotation. For example, "content" refers to text or image content annotations, and "interaction" refers to user interaction notes. - -Always read these annotations carefully, as they provide important context for implementing the design correctly. - -## CSS Variables & Design Tokens - -All design tokens from Figma are defined as CSS variables in [src/theme.css](../src/theme.css). **Always use these variables instead of hardcoded values.** - -- Colors: Use `var(--sds-color-*)` variables (e.g., `var(--sds-color-text-default-default)`) -- Spacing: Use `var(--sds-size-space-*)` variables (e.g., `var(--sds-size-space-400)`) - - **important**: These variables can map to a prop value numerically. For example, `
` corresponds to `padding: var(--sds-size-space-400)` in a Figma response. -- Typography: Use `var(--sds-typography-*)` or `var(--sds-font-*)` variables -- Border radius: Use `var(--sds-size-radius-*)` variables -- Shadows: Use `var(--sds-effects-shadows-*)` variables - -### Example Usage - -```css -.custom-element { - background: var(--sds-color-background-default-default); - color: var(--sds-color-text-default-default); - padding: var(--sds-size-space-400); - border-radius: var(--sds-size-radius-200); -} -``` - -## File Structure & Architecture - -### Core Directories - -``` -src/ -β”œβ”€β”€ data/ # Data layer - contexts, providers, services, types -β”‚ β”œβ”€β”€ contexts/ # React context definitions (AuthContext, PricingContext, ProductsContext) -β”‚ β”œβ”€β”€ providers/ # Context providers with state management -β”‚ β”œβ”€β”€ services/ # API and business logic services -β”‚ β”œβ”€β”€ types/ # TypeScript type definitions for data models -β”‚ └── hooks/ # Data-specific custom hooks (useAuth, usePricing, useProducts) -β”œβ”€β”€ ui/ # UI component library -β”‚ β”œβ”€β”€ primitives/ # Atomic components (Button, Input, etc.) -β”‚ β”œβ”€β”€ compositions/ # Complex components (Cards, Forms, etc.) -β”‚ β”œβ”€β”€ layout/ # Layout components (Flex, Section, Grid) -β”‚ β”œβ”€β”€ hooks/ # UI-specific custom hooks (useMediaQuery) -β”‚ β”œβ”€β”€ icons/ # SVG icon components -β”‚ β”œβ”€β”€ images/ # Image assets -β”‚ └── utils/ # Utility functions and components -β”œβ”€β”€ stories/ # Storybook stories for all components -β”œβ”€β”€ examples/ # Examples of how to use components together in larger complete sections -β”œβ”€β”€ figma/ # Figma [Code Connect](https://www.figma.com/code-connect-docs/react/) files -β”‚ β”œβ”€β”€ primitives/ # Maps Figma components to React primitives -β”‚ β”œβ”€β”€ compositions/ # Maps Figma compositions to React components -β”‚ └── icons/ # Maps Figma icons to React icons -β”œβ”€β”€ theme.css # CSS custom properties (design tokens) -β”œβ”€β”€ reset.css # CSS reset -β”œβ”€β”€ responsive.css # Responsive utilities -└── App.tsx # Demo application -``` - -### Scripts Directory - -``` -scripts/ -β”œβ”€β”€ tokens/ # Design token sync from Figma -β”œβ”€β”€ icons/ # Icon sync from Figma -β”œβ”€β”€ component-metadata/ # Component metadata management -└── dev-resources/ # Development resource generation -``` - -## Component Library Structure - -All UI components are in [src/ui](../src/ui). **Never create new components - always use existing SDS components.** - -All data management (contexts, providers, services, types, and data hooks) are in [src/data](../src/data). Use the provided context providers and custom hooks for state management. - -## SDS Component Hierarchy - -When you see `hidden={true}` in Figma data, it indicates that the node should be ignored. This can happen with Figma components frequently, as nodes that can be toggled with a prop need to exist, even when the prop is false. - -**Discovery tip**: When implementing Figma designs, check `codeDependencies` first, then browse the actual component files to understand available props and variants. See the complete component list in the Component Categories section below. - -## Figma Translation Process - -1. **Extract design using Figma tools**: Always use the Figma MCP tools to get the design data -2. **Identify SDS components**: Map Figma components to existing SDS primitives, compositions, and layouts - - Use the `codeDependencies` field to find the correct component path - - If no direct mapping exists, look for similar components or compositions -3. **Check component APIs**: Read the actual component files to understand props and usage patterns -4. **Use semantic imports**: Import from correct paths (e.g., `import { Button } from "ui/primitives/Button/Button"`) -5. **Apply design tokens**: Use CSS variables for all styling values - -## Common Translation Patterns - -### Buttons - -```tsx -// Figma: Button with variant="Primary" and icon -// SDS Implementation: - -``` - -### Navigation - -```tsx -// Figma: Navigation Pills with selection states -// SDS Implementation: - - Active Item - Inactive Item - -``` - -### Typography - -```tsx -// Figma: Text with specific styles -// SDS Implementation: -Heading Text -Body text -Small text -``` - -### Layout - -```tsx -// Figma: Cards in a grid -// SDS Implementation: -
- -
Card 1
-
Card 2
-
Card 3
- -
-``` - -```tsx -// Complex layout with responsive behavior -function ResponsiveExample() { - const { isMobile } = useMediaQuery(); - - return ( -
- - {/* Navigation Pills */} - - Active - Inactive - - - {/* Content Grid */} - - {content.map((item) => ( - - ))} - - -
- ); -} -``` - -## Best Practices & Common Pitfalls - -### Component API Guidelines - -- **Always check existing component props**: Read the TypeScript definitions in component files -- **Use semantic prop names**: `isSelected` not `active`, `variant` not `type` -- **Leverage composition**: Combine primitives rather than creating custom components -- **Follow naming conventions**: PascalCase for components, camelCase for props - -### Essential Rules - -- **Never hardcode colors, spacing, or typography values** - Always use CSS variables -- **Always import components from their specific paths** - Use the alias imports -- **Check component props before using** - Read the TypeScript definitions -- **Use layout components instead of CSS Grid/Flexbox** - Never write custom layout CSS -- **Reference existing stories in [src/stories](../src/stories/) for usage examples** - -### Common Pitfalls & Solutions - -### ❌ Pitfall 1: Hardcoding design values - -```tsx -
// WRONG -``` - -**Fix**: Use CSS variables via class names: `
` and `.example { color: var(--sds-color-text-default-default); padding: var(--sds-size-space-400); }` - -### ❌ Pitfall 2: Creating custom layout CSS - -```tsx -
// WRONG -``` - -**Fix**: Use layout components: `` - -### ❌ Pitfall 3: Not reading component APIs - -```tsx - - - - - - <> -
    -
  • Adjustable height and tilt
    • -
  • Breathable mesh backrest
    • -
  • 360Β° swivel base
    • -
  • Weight capacity: 250 lbs
    • -
  • Easy assembly required
    • -
- - - - - - -
- ); -} diff --git a/src/examples/ProductGrid.tsx b/src/examples/ProductGrid.tsx deleted file mode 100644 index 11b0c119..00000000 --- a/src/examples/ProductGrid.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { - ProductInfoCard, - ProductInfoCardSkeleton, - productToProductInfoCardProps, -} from "compositions"; -import { useProducts, type Product } from "data"; -import { useMediaQuery } from "hooks"; -import { IconChevronDown, IconChevronUp } from "icons"; -import { Flex, FlexItem, Section } from "layout"; -import { Search, TagButton } from "primitives"; -import { useEffect, useState } from "react"; - -export function ProductGrid() { - const { isMobile, isTablet } = useMediaQuery(); - const [searchTerm, setSearchTerm] = useState(""); - const [sortPrice, setSortPrice] = useState<-1 | 0 | 1>(0); - const [filterTopRated, setFilterTopRated] = useState(false); - const flexGap = isMobile ? "600" : "1200"; - const sectionPadding = isMobile ? "600" : "1600"; - const { products, isLoading } = useProducts(); - const [filteredProducts, setFilteredProducts] = useState(products); - useEffect(() => { - const initialProducts = products.filter( - (product) => !filterTopRated || product.rating >= 4.75, - ); - if (!searchTerm) { - setFilteredProducts(initialProducts); - } else { - setFilteredProducts( - initialProducts.filter( - (product) => - product.name.match(new RegExp(searchTerm, "i")) || - product.description.match(new RegExp(searchTerm, "i")), - ), - ); - } - }, [searchTerm, filterTopRated, products]); - - const sortedProducts = filteredProducts.sort((a, b) => { - if (sortPrice !== 0) { - return a.price > b.price ? sortPrice : -sortPrice; - } - return 0; - }); - - return ( -
- - - - - - setSearchTerm(e.currentTarget.value)} - /> - - - - - setFilterTopRated((prev) => !prev)} - variant={filterTopRated ? "primary" : "secondary"} - > - Top rated - - { - setSortPrice((prev) => { - if (prev === 0) return -1; - if (prev === -1) return 1; - return 0; - }); - }} - > - Price{" "} - {sortPrice === 0 || sortPrice === -1 ? ( - - ) : ( - - )} - - - - - - {isLoading ? ( - <> - - - - - - - - ) : ( - sortedProducts.map(({ ...product }, index) => ( - - - - )) - )} - - - -
- ); -} diff --git a/src/examples/WelcomeHero.tsx b/src/examples/WelcomeHero.tsx deleted file mode 100644 index 1e002049..00000000 --- a/src/examples/WelcomeHero.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useMediaQuery } from "hooks"; -import { Flex, Section } from "layout"; -import { Button, Form, Input, TextContentTitle } from "primitives"; - -export function WelcomeHero() { - const { isMobile } = useMediaQuery(); - const sectionPadding = isMobile ? "600" : "1600"; - const flexGap = isMobile ? "600" : "1200"; - - return ( -
- - We're happy to have you.} - /> -
- - -
- -
- ); -} diff --git a/src/figma/compositions/CardGrids.figma.tsx b/src/figma/compositions/CardGrids.figma.tsx deleted file mode 100644 index 3641e3f4..00000000 --- a/src/figma/compositions/CardGrids.figma.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import { figma } from "@figma/code-connect"; -import { PricingCard, pricingPlanToPricingCardProps } from "compositions"; -import { usePricing } from "data"; -import { useMediaQuery } from "hooks"; -import { Flex, FlexItem, Section } from "layout"; - -figma.connect(Section, "", { - props: { - gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - padding: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - top: figma.children("Text Content Heading"), - cards: figma.children("Card"), - }, - example: ({ gap, top, cards, padding }) => ( -
- - {top} - - - {cards} - - - -
- ), -}); - -figma.connect(Section, "", { - props: { - gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - padding: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - top: figma.children("Text Content Heading"), - cards: figma.children("Testimonial Card"), - }, - example: ({ gap, top, cards, padding }) => ( -
- - {top} - - - {cards} - - - -
- ), -}); - -figma.connect(Section, "", { - props: { - gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - padding: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - top: figma.children("Text Content Heading"), - cards: figma.children("Card"), - }, - example: ({ gap, top, cards, padding }) => ( -
- - {top} - - - {cards} - - - -
- ), -}); - -figma.connect(Section, "", { - props: { - gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - padding: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - top: figma.children("Text Content Heading"), - cards: figma.children("Card"), - }, - example: ({ gap, top, cards, padding }) => ( -
- - {top} - - - {cards} - - - -
- ), -}); - -figma.connect(Section, "", { - props: { - schedule: figma.children("Navigation Pill List"), - }, - example: ({ schedule }) => { - const { monthlyPlans } = usePricing(); - const { isMobile } = useMediaQuery(); - const padding = isMobile ? "600" : "1200"; - const gap = isMobile ? "600" : "1200"; - const gapCards = isMobile ? "600" : "1200"; - const size = isMobile ? "small" : "large"; - - return ( -
- - {schedule} - - {monthlyPlans.map((option, i) => ( - - ))} - - -
- ); - }, -}); - -figma.connect(Section, "", { - props: { - gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - padding: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - top: figma.children("Text Heading"), - cards: figma.children("Review Card"), - }, - example: ({ gap, top, cards, padding }) => ( -
- - {top} - - - {cards} - - - -
- ), -}); diff --git a/src/figma/compositions/Cards.figma.tsx b/src/figma/compositions/Cards.figma.tsx deleted file mode 100644 index 30ee2d72..00000000 --- a/src/figma/compositions/Cards.figma.tsx +++ /dev/null @@ -1,180 +0,0 @@ -import { figma } from "@figma/code-connect"; -import { - Card, - PricingCard, - ProductInfoCard, - ReviewCard, - StatsCard, - TestimonialCard, -} from "compositions"; -import { placeholder } from "images"; -import { ButtonProps, Image, Text, TextHeading } from "primitives"; - -figma.connect(Card, "", { - props: { - asset: figma.enum("Asset Type", { - Image: Always use alt text, - Icon: figma.instance("Icon"), - }), - heading: figma.string("Heading"), - body: figma.string("Body"), - direction: figma.enum("Direction", { - Horizontal: "horizontal", - Vertical: "vertical", - }), - actions: figma.children("Button Group"), - variant: figma.enum("Variant", { - Stroke: "stroke", - }), - }, - example: ({ actions, heading, body, ...props }) => ( - - {heading} - {body} - {actions} - - ), -}); - -figma.connect(PricingCard, "", { - props: { - textHeading: figma.nestedProps("Text Heading", { - text: figma.string("Text"), - }), - action: figma.nestedProps<{ - label: string; - variant: ButtonProps["variant"]; - icon?: React.ReactNode; - }>("Button", { - label: figma.string("Label"), - variant: figma.enum("Variant", { - Primary: "primary", - Neutral: "neutral", - Subtle: "subtle", - }), - icon: figma.instance("Icon End"), - }), - textPrice: figma.nestedProps("Text Price", { - price: figma.string("Price"), - priceCurrency: figma.string("Currency"), - priceLabel: figma.string("Label"), - size: figma.enum("Size", { - Large: "large", - Small: "small", - }), - }), - list: figma.children("Text List"), - variant: figma.enum("Variant", { - Stroke: "stroke", - Brand: "brand", - }), - }, - example: ({ textHeading, textPrice, list, action, ...props }) => ( - {}} - listSlot={list} - interval="month" - sku="example_sku" - price={textPrice.price} - priceCurrency={textPrice.priceCurrency} - priceLabel={textPrice.priceLabel} - size={textPrice.size} - {...props} - /> - ), -}); - -figma.connect(ProductInfoCard, "", { - props: { - textProps: figma.nestedProps("Text", { - text: figma.string("Text"), - }), - priceProps: figma.nestedProps("Text Strong", { - price: figma.string("Text"), - }), - descriptionProps: figma.nestedProps("Text Small", { - description: figma.string("Text"), - }), - }, - example: ({ descriptionProps, priceProps, textProps }) => ( - - } - rating={4.5} - heading={textProps.text} - price={priceProps.price} - description={descriptionProps.description} - /> - ), -}); -figma.connect(ReviewCard, "", { - props: { - headingProps: figma.nestedProps("Text Heading", { - heading: figma.string("Text"), - }), - bodyProps: figma.nestedProps("Text", { - body: figma.string("Text"), - }), - avatarBlockProps: figma.nestedProps("Avatar Block", { - name: figma.string("Title"), - date: figma.string("Description"), - }), - }, - example: ({ headingProps, bodyProps, avatarBlockProps }) => ( - - ), -}); -figma.connect(StatsCard, "", { - props: { - descriptionProps: figma.nestedProps("Text", { - description: figma.string("Text"), - }), - statProps: figma.nestedProps("Text Heading", { - stat: figma.string("Text"), - }), - icon: figma.instance("Icon"), - }, - example: ({ descriptionProps, statProps, ...props }) => ( - - ), -}); -figma.connect(TestimonialCard, "", { - props: { - headingProps: figma.nestedProps("Text Heading", { - heading: figma.string("Text"), - }), - avatarBlockProps: figma.nestedProps("Avatar Block", { - name: figma.string("Title"), - username: figma.string("Description"), - }), - }, - example: ({ avatarBlockProps, headingProps }) => ( - - ), -}); diff --git a/src/figma/compositions/Footers.figma.tsx b/src/figma/compositions/Footers.figma.tsx deleted file mode 100644 index 422d6254..00000000 --- a/src/figma/compositions/Footers.figma.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { figma } from "@figma/code-connect"; -import { Footer } from "compositions"; - -figma.connect(Footer, ""); diff --git a/src/figma/compositions/Forms.figma.tsx b/src/figma/compositions/Forms.figma.tsx deleted file mode 100644 index f0023538..00000000 --- a/src/figma/compositions/Forms.figma.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { figma } from "@figma/code-connect"; -import { FormBox } from "compositions"; -import { Flex } from "layout"; -import { Form } from "primitives"; - -figma.connect(FormBox, "", { - props: { - children: figma.children(["Input Field", "Button Group", "Text Link"]), - }, - example: ({ children }) => {}}>{children}, -}); - -figma.connect(FormBox, "", { - props: { - children: figma.children(["Input Field", "Textarea Field", "Button Group"]), - }, - example: ({ children }) => {}}>{children}, -}); - -figma.connect(FormBox, "", { - props: { - children: figma.children(["Input Field", "Checkbox Field", "Button Group"]), - }, - example: ({ children }) => {}}>{children}, -}); - -figma.connect(FormBox, "", { - props: { children: figma.children(["Input Field", "Button"]) }, - example: ({ children }) => ( -
{}}> - {children} -
- ), -}); - -figma.connect(FormBox, "", { - props: { children: figma.children(["Input Field", "Button Group"]) }, - example: ({ children }) => {}}>{children}, -}); - -figma.connect(FormBox, "", { - props: { - legend: figma.children(["Text"]), // "Form Legend" no longer exists! waiting for that to be a new component. - children: figma.children([ - "Input Field", - "Select Field", - "Textarea Field", - "Checkbox Field", - "Button Group", - ]), - }, - example: ({ legend, children }) => ( - {}}> - - {legend} - - {children} - - ), -}); diff --git a/src/figma/compositions/Headers.figma.tsx b/src/figma/compositions/Headers.figma.tsx deleted file mode 100644 index 380f9a2e..00000000 --- a/src/figma/compositions/Headers.figma.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { figma } from "@figma/code-connect"; -import { Header, HeaderAuth } from "compositions"; - -figma.connect(Header, ""); -figma.connect(HeaderAuth, ""); diff --git a/src/figma/compositions/Heroes.figma.tsx b/src/figma/compositions/Heroes.figma.tsx deleted file mode 100644 index 3e7d9bef..00000000 --- a/src/figma/compositions/Heroes.figma.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import figma from "@figma/code-connect"; -import { Hero } from "compositions"; -import { placeholder } from "images"; - -figma.connect(Hero, "", { - props: { - children: figma.children(["Text Content Title"]), - }, - example: ({ children }) => {children}, -}); -figma.connect(Hero, "", { - props: { - children: figma.children(["Text Content Title", "Button Group"]), - }, - example: ({ children }) => {children}, -}); -figma.connect(Hero, "", { - props: { - children: figma.children(["Text Content Title", "Form Newsletter"]), - }, - example: ({ children }) => {children}, -}); -figma.connect(Hero, "", { - props: { - children: figma.children(["Text Content Title", "Form Contact"]), - }, - example: ({ children }) => {children}, -}); -figma.connect(Hero, "", { - props: { - children: figma.children(["Text Content Title", "Button Group"]), - }, - example: ({ children }) => ( - - {children} - - ), -}); diff --git a/src/figma/compositions/Pages.figma.tsx b/src/figma/compositions/Pages.figma.tsx deleted file mode 100644 index b7629bce..00000000 --- a/src/figma/compositions/Pages.figma.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import { figma } from "@figma/code-connect"; -import { Card } from "compositions"; -import { placeholder } from "images"; -import { Flex, FlexItem, Section } from "layout"; -import { Image } from "primitives"; - -figma.connect(Section, "", { - props: { - title: figma.children("Text Content Heading"), - children: figma.children("Accordion"), - padding: figma.enum("Platform", { Desktop: "1600", Mobile: "600" }), - gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - }, - example: ({ title, children, gap, padding }) => ( -
- - {title} - - - {children} - - - -
- ), -}); - -figma.connect(Section, "", { - props: { - textHeading: figma.children("Text Heading"), - tagAndPrice: figma.children(["Tag", "Text Price"]), - text: figma.children("Text"), - fields: figma.children("Select Field"), - button: figma.children("Button"), - accordion: figma.children("Accordion"), - padding: figma.enum("Platform", { Desktop: "1600", Mobile: "600" }), - gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - }, - example: ({ - textHeading, - tagAndPrice, - text, - fields, - button, - accordion, - gap, - padding, - }) => ( -
- - Always use image alt - - - {textHeading} - - - {tagAndPrice} - - - {text} - - - {fields} - - - {button} - {accordion} - - - -
- ), -}); - -figma.connect(Section, "", { - props: { - children: figma.children(["Text Content Heading", "Form Newsletter"]), - padding: figma.enum("Platform", { Desktop: "1600", Mobile: "600" }), - gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - }, - example: ({ children, gap, padding }) => ( -
- - {children} - -
- ), -}); - -figma.connect(Section, "", { - props: { - controls: figma.children(["Search", "Tag Toggle Group"]), - cards: figma.children(["Product Info Card"]), - padding: figma.enum("Platform", { Desktop: "1600", Mobile: "600" }), - gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - majorSize: figma.enum("Platform", { Desktop: "major", Mobile: "full" }), - aside: figma.children(["Text", "Tag", "Checkbox Group", "Slider Field"]), - }, - example: ({ aside, controls, cards, gap, padding, majorSize }) => ( -
- - - {aside} - - - - - {controls} - - - {cards} - - - - -
- ), -}); diff --git a/src/figma/compositions/Panels.figma.tsx b/src/figma/compositions/Panels.figma.tsx deleted file mode 100644 index d1811624..00000000 --- a/src/figma/compositions/Panels.figma.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { figma } from "@figma/code-connect"; -import { Panel } from "compositions"; -import { placeholder } from "images"; -import { Flex, FlexItem, Section } from "layout"; -import { Image } from "primitives"; - -figma.connect(Panel, "", { - props: { - padding: figma.enum("Platform", { Desktop: "1600", Mobile: "600" }), - gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - children: figma.children(["Text Content Heading", "Text"]), - }, - example: ({ padding, gap, children }) => ( -
- - Always use image alt - - - {children} - - - -
- ), -}); - -figma.connect(Panel, "", { - props: { - padding: figma.enum("Platform", { Desktop: "1600", Mobile: "600" }), - gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - children: figma.children(["Text Content Heading", "Text"]), - }, - example: ({ padding, gap, children }) => ( -
- - - - {children} - - - Always use image alt - -
- ), -}); - -figma.connect(Panel, "", { - props: { - padding: figma.enum("Platform", { Desktop: "1600", Mobile: "600" }), - gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }), - }, - example: ({ padding, gap }) => ( -
- - Always use image alt - Always use image alt - -
- ), -}); - -figma.connect(Panel, "", { - props: { - padding: figma.enum("Platform", { Desktop: "1600", Mobile: "600" }), - }, - example: ({ padding }) => ( -
- - - Always use image alt - - -
- ), -}); diff --git a/src/figma/icons/Icons.figma.tsx b/src/figma/icons/Icons.figma.tsx deleted file mode 100644 index d19e5d50..00000000 --- a/src/figma/icons/Icons.figma.tsx +++ /dev/null @@ -1,289 +0,0 @@ -import figma from "@figma/code-connect"; -import {IconActivity, IconAirplay, IconAlertCircle, IconAlertOctagon, IconAlertTriangle, IconAlignCenter, IconAlignJustify, IconAlignLeft, IconAlignRight, IconAnchor, IconAperture, IconArchive, IconArrowDown, IconArrowDownCircle, IconArrowDownLeft, IconArrowDownRight, IconArrowLeft, IconArrowLeftCircle, IconArrowRight, IconArrowRightCircle, IconArrowUp, IconArrowUpCircle, IconArrowUpLeft, IconArrowUpRight, IconAtSign, IconAward, IconBarChart, IconBarChart2, IconBattery, IconBatteryCharging, IconBell, IconBellOff, IconBluetooth, IconBold, IconBook, IconBookOpen, IconBookmark, IconBox, IconBriefcase, IconCalendar, IconCamera, IconCameraOff, IconCast, IconCheck, IconCheckCircle, IconCheckSquare, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconChevronsDown, IconChevronsLeft, IconChevronsRight, IconChevronsUp, IconChrome, IconCircle, IconClipboard, IconClock, IconCloud, IconCloudDrizzle, IconCloudLightning, IconCloudOff, IconCloudRain, IconCloudSnow, IconCode, IconCodepen, IconCodesandbox, IconCoffee, IconColumns, IconCommand, IconCompass, IconCopy, IconCornerDownLeft, IconCornerDownRight, IconCornerLeftDown, IconCornerLeftUp, IconCornerRightDown, IconCornerRightUp, IconCornerUpLeft, IconCornerUpRight, IconCpu, IconCreditCard, IconCrop, IconCrosshair, IconDatabase, IconDelete, IconDisc, IconDivide, IconDivideCircle, IconDivideSquare, IconDollarSign, IconDownload, IconDownloadCloud, IconDribbble, IconDroplet, IconEdit, IconEdit2, IconEdit3, IconExternalLink, IconEye, IconEyeOff, IconFacebook, IconFastForward, IconFeather, IconFigma, IconFile, IconFileMinus, IconFilePlus, IconFileText, IconFilm, IconFilter, IconFlag, IconFolder, IconFolderMinus, IconFolderPlus, IconFramer, IconFrown, IconGift, IconGitBranch, IconGitCommit, IconGitMerge, IconGitPullRequest, IconGithub, IconGitlab, IconGlobe, IconGrid, IconHardDrive, IconHash, IconHeadphones, IconHeart, IconHelpCircle, IconHexagon, IconHome, IconImage, IconInbox, IconInfo, IconInstagram, IconItalic, IconKey, IconLayers, IconLayout, IconLifeBuoy, IconLink, IconLink2, IconLinkedin, IconList, IconLoader, IconLock, IconLogIn, IconLogOut, IconMail, IconMap, IconMapPin, IconMaximize, IconMaximize2, IconMeh, IconMenu, IconMessageCircle, IconMessageSquare, IconMic, IconMicOff, IconMinimize, IconMinimize2, IconMinus, IconMinusCircle, IconMinusSquare, IconMonitor, IconMoon, IconMoreHorizontal, IconMoreVertical, IconMousePointer, IconMove, IconMusic, IconNavigation, IconNavigation2, IconOctagon, IconPackage, IconPaperclip, IconPause, IconPauseCircle, IconPenTool, IconPercent, IconPhone, IconPhoneCall, IconPhoneForwarded, IconPhoneIncoming, IconPhoneMissed, IconPhoneOff, IconPhoneOutgoing, IconPieChart, IconPlay, IconPlayCircle, IconPlus, IconPlusCircle, IconPlusSquare, IconPocket, IconPower, IconPrinter, IconRadio, IconRefreshCcw, IconRefreshCw, IconRepeat, IconRewind, IconRotateCcw, IconRotateCw, IconRss, IconSave, IconScissors, IconSearch, IconSend, IconServer, IconSettings, IconShare, IconShare2, IconShield, IconShieldOff, IconShoppingBag, IconShoppingCart, IconShuffle, IconSidebar, IconSkipBack, IconSkipForward, IconSlack, IconSlash, IconSliders, IconSmartphone, IconSmile, IconSpeaker, IconSquare, IconStar, IconStopCircle, IconSun, IconSunrise, IconSunset, IconTable, IconTablet, IconTag, IconTarget, IconTerminal, IconThermometer, IconThumbsDown, IconThumbsUp, IconToggleLeft, IconToggleRight, IconTool, IconTrash, IconTrash2, IconTrello, IconTrendingDown, IconTrendingUp, IconTriangle, IconTruck, IconTv, IconTwitch, IconTwitter, IconType, IconUmbrella, IconUnderline, IconUnlock, IconUpload, IconUploadCloud, IconUser, IconUserCheck, IconUserMinus, IconUserPlus, IconUserX, IconUsers, IconVideo, IconVideoOff, IconVoicemail, IconVolume, IconVolume1, IconVolume2, IconVolumeX, IconWatch, IconWifi, IconWifiOff, IconWind, IconX, IconXCircle, IconXOctagon, IconXSquare, IconYoutube, IconZap, IconZapOff, IconZoomIn, IconZoomOut} from "icons"; -figma.connect(IconArrowDownCircle, "?node-id=4039:13031", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconAnchor, "?node-id=4039:13027", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconBell, "?node-id=4039:13048", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconAlignCenter, "?node-id=4039:13023", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconArrowUpLeft, "?node-id=4039:13039", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconBold, "?node-id=4039:13050", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCameraOff, "?node-id=4039:13059", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCheckCircle, "?node-id=4039:13060", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconArrowUpRight, "?node-id=4039:13041", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconActivity, "?node-id=4039:13018", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconAlignJustify, "?node-id=4039:13025", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCast, "?node-id=4039:13061", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconBarChart2, "?node-id=4039:13045", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconAward, "?node-id=4039:13042", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconAirplay, "?node-id=4039:13019", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconBattery, "?node-id=4039:13047", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconAlertTriangle, "?node-id=4039:13022", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFilm, "?node-id=4049:13502", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconGitCommit, "?node-id=4049:13512", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCopy, "?node-id=4039:13464", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconGitMerge, "?node-id=4049:13515", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconChevronsDown, "?node-id=4039:13168", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconEye, "?node-id=4049:13495", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconChevronUp, "?node-id=4039:13166", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconGitPullRequest, "?node-id=4049:13514", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCornerLeftDown, "?node-id=4039:13469", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconChrome, "?node-id=4039:13172", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconDownload, "?node-id=4049:13487", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconDatabase, "?node-id=4049:13478", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCornerDownRight, "?node-id=4039:13466", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCornerRightUp, "?node-id=4039:13470", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconDivideCircle, "?node-id=4049:13481", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconDivide, "?node-id=4049:13482", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCornerUpLeft, "?node-id=4039:13473", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconDollarSign, "?node-id=4049:13485", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconHeadphones, "?node-id=4049:13523", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconGithub, "?node-id=4049:13517", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconItalic, "?node-id=4049:13530", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFigma, "?node-id=4049:13498", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconInstagram, "?node-id=4049:13531", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFastForward, "?node-id=4049:13497", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconExternalLink, "?node-id=4049:13493", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFolderMinus, "?node-id=4049:13507", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconEdit3, "?node-id=4049:13491", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFolder, "?node-id=4049:13509", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCommand, "?node-id=4039:13463", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCornerUpRight, "?node-id=4039:13472", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFolderPlus, "?node-id=4049:13506", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFileMinus, "?node-id=4049:13499", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconHelpCircle, "?node-id=4049:13524", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconHardDrive, "?node-id=4049:13520", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconImage, "?node-id=4049:13526", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconEdit, "?node-id=4049:13490", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconHeart, "?node-id=4049:13522", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconHash, "?node-id=4049:13521", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconLifeBuoy, "?node-id=4049:13534", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconDribbble, "?node-id=4049:13486", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconInfo, "?node-id=4049:13528", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMaximize, "?node-id=4049:13548", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMic, "?node-id=4049:13555", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMail, "?node-id=4049:13544", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconGitBranch, "?node-id=4049:13513", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconDroplet, "?node-id=4049:13488", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconLock, "?node-id=4049:13540", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMinimize, "?node-id=4049:13557", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconGift, "?node-id=4049:13510", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMenu, "?node-id=4049:13551", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFrown, "?node-id=4049:13511", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconDisc, "?node-id=4049:13480", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMinus, "?node-id=4049:13558", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconNavigation2, "?node-id=4049:13566", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconKey, "?node-id=4049:13533", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconLink2, "?node-id=4049:13537", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFramer, "?node-id=4049:13508", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconEyeOff, "?node-id=4049:13492", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMaximize2, "?node-id=4049:13546", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconNavigation, "?node-id=4049:13568", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconGlobe, "?node-id=4049:13519", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconLoader, "?node-id=4049:13541", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconGitlab, "?node-id=4049:13516", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconHome, "?node-id=4049:13527", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconList, "?node-id=4049:13538", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconOctagon, "?node-id=4049:13569", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMessageCircle, "?node-id=4049:13550", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMoreHorizontal, "?node-id=4049:13563", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMinusCircle, "?node-id=4049:13556", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPhoneCall, "?node-id=4049:13577", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMeh, "?node-id=4049:13549", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPackage, "?node-id=4049:13571", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPercent, "?node-id=4049:13575", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMusic, "?node-id=4049:13567", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFlag, "?node-id=4049:13504", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPenTool, "?node-id=4049:13576", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMove, "?node-id=4049:13564", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconLayers, "?node-id=4049:13532", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMoon, "?node-id=4049:13560", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPaperclip, "?node-id=4049:13570", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconLinkedin, "?node-id=4049:13539", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconLink, "?node-id=4049:13536", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPhoneForwarded, "?node-id=4049:13578", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMinusSquare, "?node-id=4049:13559", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMoreVertical, "?node-id=4049:13562", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconLogIn, "?node-id=4049:13542", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconLogOut, "?node-id=4049:13543", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMicOff, "?node-id=4049:13552", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPhoneIncoming, "?node-id=4049:13580", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMonitor, "?node-id=4049:13561", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMinimize2, "?node-id=4049:13554", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPauseCircle, "?node-id=4049:13574", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPhoneMissed, "?node-id=4049:13579", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPhoneOff, "?node-id=4049:13582", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPause, "?node-id=4049:13572", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPlay, "?node-id=4049:13586", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMap, "?node-id=4049:13547", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPlus, "?node-id=4049:13590", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPlusCircle, "?node-id=4049:13588", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconRefreshCw, "?node-id=4049:13595", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPlusSquare, "?node-id=4049:13587", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPieChart, "?node-id=4049:13583", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPlayCircle, "?node-id=4049:13585", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPower, "?node-id=4049:13592", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPocket, "?node-id=4049:13589", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconRepeat, "?node-id=4049:13596", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconRss, "?node-id=4049:13599", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconRadio, "?node-id=4049:13594", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPhoneOutgoing, "?node-id=4049:13581", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPhone, "?node-id=4049:13584", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSave, "?node-id=4049:13601", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconRotateCw, "?node-id=4049:13600", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconRotateCcw, "?node-id=4049:13597", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconRewind, "?node-id=4049:13598", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconServer, "?node-id=4049:13605", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSend, "?node-id=4049:13603", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSettings, "?node-id=4049:13606", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconScissors, "?node-id=4049:13602", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconPrinter, "?node-id=4049:13591", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconShoppingCart, "?node-id=4049:13611", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconShuffle, "?node-id=4049:13614", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconShare2, "?node-id=4049:13608", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSlash, "?node-id=4049:13617", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSkipForward, "?node-id=4049:13615", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconArrowRight, "?node-id=4039:13036", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconChevronsRight, "?node-id=4039:13170", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCloudDrizzle, "?node-id=4039:13176", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconAlignRight, "?node-id=4039:13026", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCloudLightning, "?node-id=4039:13175", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconChevronsLeft, "?node-id=4039:13167", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconArrowLeftCircle, "?node-id=4039:13035", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCamera, "?node-id=4039:13058", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconBookOpen, "?node-id=4039:13053", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconAlertCircle, "?node-id=4039:13020", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCloudSnow, "?node-id=4039:13180", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconBatteryCharging, "?node-id=4039:13046", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconArrowDownLeft, "?node-id=4039:13030", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconArchive, "?node-id=4039:13028", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconArrowRightCircle, "?node-id=4039:13037", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconBluetooth, "?node-id=4039:13051", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCode, "?node-id=4039:13182", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCodesandbox, "?node-id=4039:13184", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCloudRain, "?node-id=4039:13177", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCreditCard, "?node-id=4039:13474", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconChevronRight, "?node-id=4039:13165", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCheckSquare, "?node-id=4039:13062", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCoffee, "?node-id=4039:13183", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconArrowDown, "?node-id=4039:13032", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCornerDownLeft, "?node-id=4039:13467", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCrop, "?node-id=4049:13477", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconDelete, "?node-id=4049:13479", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconAtSign, "?node-id=4039:13043", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCpu, "?node-id=4039:13475", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconAlertOctagon, "?node-id=4039:13021", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconChevronsUp, "?node-id=4039:13169", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCloudOff, "?node-id=4039:13178", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconArrowLeft, "?node-id=4039:13034", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCircle, "?node-id=4039:13171", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconClock, "?node-id=4039:13173", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconDivideSquare, "?node-id=4049:13483", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCornerLeftUp, "?node-id=4039:13468", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconAperture, "?node-id=4039:13029", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconArrowDownRight, "?node-id=4039:13033", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconDownloadCloud, "?node-id=4049:13484", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCodepen, "?node-id=4039:13181", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCalendar, "?node-id=4039:13056", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconArrowUpCircle, "?node-id=4039:13038", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconBellOff, "?node-id=4039:13049", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconBox, "?node-id=4039:13054", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconEdit2, "?node-id=4049:13489", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconAlignLeft, "?node-id=4039:13024", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconColumns, "?node-id=4039:13185", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconClipboard, "?node-id=4039:13174", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconBriefcase, "?node-id=4039:13057", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconBook, "?node-id=4039:13052", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFileText, "?node-id=4049:13500", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCompass, "?node-id=4039:13465", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCornerRightDown, "?node-id=4039:13471", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconChevronLeft, "?node-id=4039:13064", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconArrowUp, "?node-id=4039:13040", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCrosshair, "?node-id=4049:13476", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCloud, "?node-id=4039:13179", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconCheck, "?node-id=4039:13063", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconBookmark, "?node-id=4039:13055", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSmile, "?node-id=4049:13622", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconShield, "?node-id=4049:13609", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconRefreshCcw, "?node-id=4049:13593", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSquare, "?node-id=4049:13624", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSpeaker, "?node-id=4049:13621", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSunrise, "?node-id=4049:13628", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSunset, "?node-id=4049:13627", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconStopCircle, "?node-id=4049:13625", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSearch, "?node-id=4049:13604", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSmartphone, "?node-id=4049:13619", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconToggleRight, "?node-id=4049:13637", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconThumbsDown, "?node-id=4049:13636", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSidebar, "?node-id=4049:13613", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTable, "?node-id=4049:13630", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSlack, "?node-id=4049:13618", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconShoppingBag, "?node-id=4049:13612", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSliders, "?node-id=4049:13620", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconShare, "?node-id=4049:13607", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconToggleLeft, "?node-id=4049:13638", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTerminal, "?node-id=4049:13634", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTrash, "?node-id=4049:13642", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSkipBack, "?node-id=4049:13616", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTag, "?node-id=4049:13632", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconSun, "?node-id=4049:13626", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTablet, "?node-id=4049:13629", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTrendingUp, "?node-id=4049:13643", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTrello, "?node-id=4049:13641", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconStar, "?node-id=4049:13623", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTriangle, "?node-id=4049:13646", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconThumbsUp, "?node-id=4049:13635", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTrendingDown, "?node-id=4049:13644", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTwitter, "?node-id=4049:13650", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconShieldOff, "?node-id=4049:13610", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconType, "?node-id=4049:13649", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTool, "?node-id=4049:13640", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconThermometer, "?node-id=4049:13633", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconUmbrella, "?node-id=4049:13652", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTv, "?node-id=4049:13648", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMessageSquare, "?node-id=4049:13553", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTrash2, "?node-id=4049:13639", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMapPin, "?node-id=4049:13545", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconUnderline, "?node-id=4049:13651", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconUploadCloud, "?node-id=4049:13653", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTwitch, "?node-id=4049:13647", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconUserPlus, "?node-id=4049:13657", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconUserCheck, "?node-id=4049:13655", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTarget, "?node-id=4049:13631", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconUpload, "?node-id=4049:13656", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconTruck, "?node-id=4049:13645", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconChevronDown, "?node-id=4039:13072", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconMousePointer, "?node-id=4049:13565", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFile, "?node-id=4049:13503", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFilePlus, "?node-id=4049:13501", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFilter, "?node-id=4049:13505", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconLayout, "?node-id=4049:13535", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconUnlock, "?node-id=4049:13654", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconUser, "?node-id=4049:13659", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconUserMinus, "?node-id=4049:13658", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconHexagon, "?node-id=4049:13525", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconVoicemail, "?node-id=4049:13663", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconUserX, "?node-id=4049:13660", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconVolume2, "?node-id=4049:13665", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconVolume, "?node-id=4049:13667", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconUsers, "?node-id=4049:13661", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconVolume1, "?node-id=4049:13666", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconVideoOff, "?node-id=4049:13662", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFeather, "?node-id=4049:13496", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconWifi, "?node-id=4049:13672", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconVideo, "?node-id=4049:13664", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconXCircle, "?node-id=4049:13674", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconZapOff, "?node-id=4049:13677", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconX, "?node-id=4049:13675", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconZap, "?node-id=4049:13680", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconXOctagon, "?node-id=4049:13673", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconWatch, "?node-id=4049:13670", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconWind, "?node-id=4049:13671", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconVolumeX, "?node-id=4049:13668", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconWifiOff, "?node-id=4049:13669", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconZoomIn, "?node-id=4049:13679", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconFacebook, "?node-id=4049:13494", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconZoomOut, "?node-id=4049:13681", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconYoutube, "?node-id=4049:13678", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconGrid, "?node-id=4049:13518", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconXSquare, "?node-id=4049:13676", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconInbox, "?node-id=4049:13529", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); -figma.connect(IconBarChart, "?node-id=4039:13044", { props: { size: figma.enum("Size", { "20": "20", "24": "24", "32": "32", "40": "40", "48": "48" }) }, example: ({ size }) => }); \ No newline at end of file diff --git a/src/figma/primitives/Accordion.figma.tsx b/src/figma/primitives/Accordion.figma.tsx deleted file mode 100644 index 1de7287b..00000000 --- a/src/figma/primitives/Accordion.figma.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import figma from "@figma/code-connect"; -import { Accordion, AccordionItem } from "primitives"; - -figma.connect(Accordion, "", { - props: { - children: figma.children("Accordion Item"), - }, - example: ({ children }) => {children}, -}); - -figma.connect(AccordionItem, "", { - props: { - dataSelected: figma.enum("State", { - Open: "true", - }), - title: figma.string("Title"), - children: figma.string("Content"), - }, - example: ({ dataSelected, ...props }) => , -}); diff --git a/src/figma/primitives/Avatar.figma.tsx b/src/figma/primitives/Avatar.figma.tsx deleted file mode 100644 index c6e2ed33..00000000 --- a/src/figma/primitives/Avatar.figma.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import figma from "@figma/code-connect"; -import { placeholder } from "images"; -import { Avatar, AvatarBlock, AvatarGroup } from "primitives"; - -figma.connect(AvatarGroup, "", { - props: { - spacing: figma.enum("Spacing", { - Overlap: "negative-200", - Spaced: "100", - }), - children: figma.children("Avatar"), - }, - example: ({ children, ...props }) => ( - - {children} - - ), -}); -figma.connect(Avatar, "", { - props: { - square: figma.enum("Shape", { - Square: true, - }), - initials: figma.enum("Type", { - Initial: figma.string("Initials"), - }), - size: figma.enum("Size", { - Large: "large", - Small: "small", - }), - src: figma.enum("Type", { - Image: placeholder, - }), - }, - example: ({ ...props }) => , -}); - -figma.connect(AvatarBlock, "", { - props: { - title: figma.string("Title"), - description: figma.string("Description"), - children: figma.children("Avatar"), - }, - example: ({ children, ...props }) => ( - {children} - ), -}); diff --git a/src/figma/primitives/Button.figma.tsx b/src/figma/primitives/Button.figma.tsx deleted file mode 100644 index 1dd3dbce..00000000 --- a/src/figma/primitives/Button.figma.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import figma from "@figma/code-connect"; -import { Button, ButtonDanger, ButtonGroup } from "primitives"; - -const sharedProps = { - label: figma.string("Label"), - iconStart: figma.boolean("Has Icon Start", { - true: figma.instance("Icon Start"), - false: undefined, - }), - iconEnd: figma.boolean("Has Icon End", { - true: figma.instance("Icon End"), - false: undefined, - }), - size: figma.enum("Size", { - Small: "small", - }), - isDisabled: figma.enum("State", { - Disabled: true, - }), -}; - -figma.connect(Button, "", { - props: { - ...sharedProps, - variant: figma.enum("Variant", { - Primary: "primary", - Neutral: "neutral", - Subtle: "subtle", - }), - }, - example: ({ label, iconEnd, iconStart, ...props }) => ( - - ), -}); -figma.connect(Button, "", { - props: { - ...sharedProps, - variant: figma.enum("Variant", { - Subtle: "danger-subtle", - }), - }, - example: ({ label, iconEnd, iconStart, ...props }) => ( - {}} {...props}> - {iconStart} - {label} - {iconEnd} - - ), -}); - -figma.connect(ButtonGroup, "", { - props: { - align: figma.enum("Align", { - Center: "center", - End: "end", - Justify: "justify", - Stack: "stack", - }), - children: figma.children(["Button"]), - }, - example: ({ children, ...props }) => ( - {children} - ), -}); diff --git a/src/figma/primitives/Checkbox.figma.tsx b/src/figma/primitives/Checkbox.figma.tsx deleted file mode 100644 index a5b8eefd..00000000 --- a/src/figma/primitives/Checkbox.figma.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import figma from "@figma/code-connect"; -import { CheckboxField, CheckboxGroup } from "primitives"; - -figma.connect(CheckboxField, "", { - props: { - label: figma.string("Label"), - description: figma.boolean("Has Description", { - true: figma.string("Description"), - false: undefined, - }), - defaultSelected: figma.enum("Value Type", { - Checked: true, - Indeterminate: true, - }), - isIndeterminate: figma.enum("Value Type", { - Indeterminate: true, - }), - isDisabled: figma.enum("State", { - Disabled: true, - }), - }, - example: ({ ...props }) => , -}); - -figma.connect(CheckboxGroup, "", { - props: { children: figma.children(["Checkbox Field"]) }, - example: ({ children }) => {children}, -}); diff --git a/src/figma/primitives/Dialog.figma.tsx b/src/figma/primitives/Dialog.figma.tsx deleted file mode 100644 index 465bf33d..00000000 --- a/src/figma/primitives/Dialog.figma.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import figma from "@figma/code-connect"; -import { - Dialog, - DialogBody, - DialogClose, - DialogModal, - DialogTitle, -} from "primitives"; - -figma.connect(Dialog, "", { - props: { - type: figma.enum("Type", { Card: "card", Sheet: "sheet" }), - body: figma.string("Body"), - heading: figma.string("Heading"), - buttons: figma.children("Button Group"), - }, - example: ({ heading, body, buttons, ...props }) => ( - - {}} /> - {heading} - {body} - {buttons} - - ), -}); - -figma.connect(Dialog, "", { - props: { - children: figma.children("Dialog Body"), - }, - example: ({ children }) => ( - {}}> - {children} - - ), -}); diff --git a/src/figma/primitives/IconButton.figma.tsx b/src/figma/primitives/IconButton.figma.tsx deleted file mode 100644 index 8a255c38..00000000 --- a/src/figma/primitives/IconButton.figma.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import figma from "@figma/code-connect"; -import { IconButton } from "primitives"; - -const sharedProps = { - icon: figma.instance("Icon"), - isDisabled: figma.enum("State", { - Disabled: true, - }), - size: figma.enum("Size", { - Small: "small", - }), -}; - -figma.connect(IconButton, "", { - props: { - ...sharedProps, - variant: figma.enum("Variant", { - Primary: "primary", - Neutral: "neutral", - Subtle: "subtle", - }), - }, - example: ({ icon, ...props }) => ( - {}} - {...props} - > - {icon} - - ), -}); diff --git a/src/figma/primitives/Input.figma.tsx b/src/figma/primitives/Input.figma.tsx deleted file mode 100644 index a3f2f2ad..00000000 --- a/src/figma/primitives/Input.figma.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import figma from "@figma/code-connect"; -import { Input, InputField } from "primitives"; - -figma.connect(Input, "", { - variant: { "Has Label": false }, - props: { - isDisabled: figma.enum("State", { Disabled: true }), - value: figma.enum("Value Type", { - Default: figma.string("Value"), - }), - placeholder: figma.enum("Value Type", { - default: "I am a placeholder...", - Placeholder: figma.string("Value"), - }), - }, - example: ({ ...props }) => , -}); - -figma.connect(InputField, "", { - variant: { "Has Label": true }, - props: { - isDisabled: figma.enum("State", { Disabled: true }), - errorMessage: figma.enum("State", { Error: figma.string("Error") }), - label: figma.string("Label"), - description: figma.boolean("Has Description", { - true: figma.string("Description"), - false: undefined, - }), - value: figma.enum("Value Type", { - Default: figma.string("Value"), - }), - placeholder: figma.enum("Value Type", { - default: "I am a placeholder...", - Placeholder: figma.string("Value"), - }), - }, - example: ({ ...props }) => , -}); diff --git a/src/figma/primitives/Menu.figma.tsx b/src/figma/primitives/Menu.figma.tsx deleted file mode 100644 index b40534b4..00000000 --- a/src/figma/primitives/Menu.figma.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import figma from "@figma/code-connect"; -import { - Menu, - MenuDescription, - MenuHeader, - MenuHeading, - MenuItem, - MenuLabel, - MenuSeparator, - MenuShortcut, -} from "primitives"; - -figma.connect(Menu, "", { - props: { - children: figma.children([ - "Menu Header", - "Menu Separator", - "Menu Section", - "Menu Item", - ]), - }, - example: ({ children }) => {children}, -}); - -figma.connect(MenuHeading, "", { - props: { heading: figma.children("Text Strong") }, - example: ({ heading }) => {heading}, -}); - -figma.connect(MenuShortcut, "", { - props: { shortcut: figma.string("Shortcut") }, - example: ({ shortcut }) => {shortcut}, -}); - -figma.connect(MenuItem, "", { - props: { - icon: figma.boolean("Has Icon", { - true: figma.instance("Icon"), - false: undefined, - }), - description: figma.boolean("Has Description", { - true: {figma.string("Description")}, - false: undefined, - }), - shortcut: figma.boolean("Has Shortcut", { - true: figma.children("Menu Shortcut"), - false: undefined, - }), - label: figma.string("Label"), - }, - example: ({ icon, label, description, shortcut }) => ( - - {icon} - {label} - {shortcut} - {description} - - ), -}); - -figma.connect(MenuHeader, "", { - props: { - header: figma.children("Text Strong"), - subhead: figma.children("Text Small"), - }, - example: ({ header, subhead }) => ( - - {subhead} - {header} - - ), -}); - -figma.connect(MenuSeparator, ""); diff --git a/src/figma/primitives/Navigation.figma.tsx b/src/figma/primitives/Navigation.figma.tsx deleted file mode 100644 index be3c1a52..00000000 --- a/src/figma/primitives/Navigation.figma.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { figma } from "@figma/code-connect"; -import { Navigation, NavigationButton, NavigationPill } from "primitives"; - -figma.connect(Navigation, "", { - props: { - children: figma.children("Navigation Pill"), - direction: figma.enum("Direction", { - Row: "row", - Column: "column", - }), - }, - example: ({ children, ...props }) => ( - {children} - ), -}); - -figma.connect(NavigationPill, "", { - props: { - label: figma.string("Label"), - isSelected: figma.enum("State", { - Active: true, - Default: undefined, - Hover: undefined, - }), - }, - example: ({ label, ...props }) => ( - {label} - ), -}); - -figma.connect(Navigation, "", { - props: { - children: figma.children("Navigation Button"), - direction: figma.enum("Direction", { - Row: "row", - Column: "column", - }), - }, - example: ({ children, ...props }) => ( - {children} - ), -}); - -figma.connect(NavigationButton, "", { - props: { - label: figma.string("Label"), - icon: figma.boolean("Has Icon", { - true: figma.instance("Icon"), - false: undefined, - }), - isSelected: figma.enum("State", { - Active: true, - Default: undefined, - Hover: undefined, - }), - }, - example: ({ label, ...props }) => ( - {label} - ), -}); diff --git a/src/figma/primitives/Notification.figma.tsx b/src/figma/primitives/Notification.figma.tsx deleted file mode 100644 index 0cee9722..00000000 --- a/src/figma/primitives/Notification.figma.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import figma from "@figma/code-connect"; -import { Notification, Text, TextStrong } from "primitives"; - -figma.connect(Notification, "", { - props: { - title: figma.string("Title"), - icon: figma.boolean("Has Icon", { - true: figma.instance("Icon"), - false: undefined, - }), - isDismissible: figma.boolean("Dismissible"), - button: figma.children("Button"), - body: figma.string("Body"), - variant: figma.enum("Variant", { - Message: "message", - Alert: "alert", - }), - }, - example: ({ button, body, title, ...props }) => ( - - {title} - {body} - {button} - - ), -}); diff --git a/src/figma/primitives/Pagination.figma.tsx b/src/figma/primitives/Pagination.figma.tsx deleted file mode 100644 index b20988ba..00000000 --- a/src/figma/primitives/Pagination.figma.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import figma from "@figma/code-connect"; -import { - Pagination, - PaginationGap, - PaginationList, - PaginationNext, - PaginationPage, - PaginationPrevious, -} from "primitives"; - -figma.connect(PaginationPage, "", { - props: { - number: figma.string("Number"), - current: figma.enum("State", { - Current: true, - "Current Hover": true, - }), - href: figma.string("Number"), - }, - example: ({ number, ...props }) => ( - {number} - ), -}); - -figma.connect(PaginationGap, ""); - -figma.connect(PaginationPrevious, "", { - props: { - href: figma.enum("State", { Default: "?previous", Hover: "?previous" }), - }, - example: ({ ...props }) => , -}); - -figma.connect(PaginationNext, "", { - props: { - href: figma.enum("State", { Default: "?next", Hover: "?next" }), - }, - example: ({ ...props }) => , -}); - -figma.connect(PaginationList, "", { - props: { - children: figma.children(["Pagination Page", "Pagination Gap"]), - }, - example: ({ children }) => {children}, -}); - -figma.connect(Pagination, "", { - props: { - children: figma.children([ - "Pagination Previous", - "Pagination List", - "Pagination Next", - ]), - }, - example: ({ children }) => {children}, -}); diff --git a/src/figma/primitives/Radio.figma.tsx b/src/figma/primitives/Radio.figma.tsx deleted file mode 100644 index e98c5c91..00000000 --- a/src/figma/primitives/Radio.figma.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import figma from "@figma/code-connect"; -import { RadioField, RadioGroup } from "primitives"; - -figma.connect(RadioField, "", { - props: { - label: figma.string("Label"), - description: figma.boolean("Has Description", { - true: figma.string("Description"), - false: undefined, - }), - isDisabled: figma.enum("State", { Disabled: true }), - }, - example: ({ ...props }) => , -}); - -figma.connect(RadioGroup, "", { - props: { children: figma.children(["Radio Field"]) }, - example: ({ children }) => {children}, -}); diff --git a/src/figma/primitives/Search.figma.tsx b/src/figma/primitives/Search.figma.tsx deleted file mode 100644 index 6f56db5e..00000000 --- a/src/figma/primitives/Search.figma.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import figma from "@figma/code-connect"; -import { Search } from "primitives"; - -figma.connect(Search, "", { - props: { - value: figma.enum("Value Type", { - Default: figma.string("Value"), - }), - placeholder: figma.enum("Value Type", { - Default: "Placeholder here...", - Placeholder: figma.string("Value"), - }), - disabled: figma.enum("State", { - Disabled: true, - }), - }, - example: ({ ...props }) => , -}); diff --git a/src/figma/primitives/Select.figma.tsx b/src/figma/primitives/Select.figma.tsx deleted file mode 100644 index b3971697..00000000 --- a/src/figma/primitives/Select.figma.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import figma from "@figma/code-connect"; -import { Select, SelectField, SelectItem } from "primitives"; - -figma.connect(Select, "", { - variant: { "Has Label": false }, - props: { - isDisabled: figma.enum("State", { Disabled: true }), - value: figma.enum("Value Type", { - Default: figma.string("Value"), - }), - placeholder: figma.enum("Value Type", { - default: "I am a placeholder...", - Placeholder: figma.string("Value"), - }), - defaultSelectedKey: figma.string("Value"), - }, - example: ({ defaultSelectedKey, ...props }) => ( - - ), -}); - -figma.connect(SelectField, "", { - variant: { "Has Label": true }, - props: { - isDisabled: figma.enum("State", { Disabled: true }), - errorMessage: figma.enum("State", { Error: figma.string("Error") }), - label: figma.string("Label"), - description: figma.boolean("Has Description", { - true: figma.string("Description"), - false: undefined, - }), - value: figma.enum("Value Type", { - Default: figma.string("Value"), - }), - placeholder: figma.enum("Value Type", { - Default: "I am a placeholder...", - Placeholder: figma.string("Value"), - }), - defaultSelectedKey: figma.string("Value"), - }, - example: ({ defaultSelectedKey, ...props }) => ( - - {defaultSelectedKey} - Option 2 - Option 3 - Option 4 - Option 5 - - ), -}); diff --git a/src/figma/primitives/Slider.figma.tsx b/src/figma/primitives/Slider.figma.tsx deleted file mode 100644 index d2cbc082..00000000 --- a/src/figma/primitives/Slider.figma.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import figma from "@figma/code-connect"; -import { SliderField } from "primitives"; - -figma.connect(SliderField, "", { - props: { - isDisabled: figma.enum("State", { Disabled: true }), - label: figma.string("Label"), - description: figma.boolean("Has Description", { - true: figma.string("Description"), - false: undefined, - }), - }, - example: ({ ...props }) => , -}); diff --git a/src/figma/primitives/Switch.figma.tsx b/src/figma/primitives/Switch.figma.tsx deleted file mode 100644 index 11f3470b..00000000 --- a/src/figma/primitives/Switch.figma.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import figma from "@figma/code-connect"; -import { SwitchField } from "primitives"; - -figma.connect(SwitchField, "", { - props: { - label: figma.string("Label"), - description: figma.boolean("Has Description", { - true: figma.string("Description"), - false: undefined, - }), - defaultSelected: figma.enum("Value Type", { - Checked: true, - }), - isDisabled: figma.enum("State", { - Disabled: true, - }), - }, - example: ({ ...props }) => , -}); diff --git a/src/figma/primitives/Tab.figma.tsx b/src/figma/primitives/Tab.figma.tsx deleted file mode 100644 index 49451f5e..00000000 --- a/src/figma/primitives/Tab.figma.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import figma from "@figma/code-connect"; -import { Tab, TabList, TabPanel, Tabs } from "primitives"; - -figma.connect(Tab, "", { - props: { - label: figma.string("Label"), - }, - example: ({ label }) => {label}, -}); - -figma.connect(Tabs, "", { - props: { - children: figma.children("Tab"), - }, - example: ({ children }) => ( - - {children} - Some stuff - - ), -}); diff --git a/src/figma/primitives/Tag.figma.tsx b/src/figma/primitives/Tag.figma.tsx deleted file mode 100644 index 4c869872..00000000 --- a/src/figma/primitives/Tag.figma.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import figma from "@figma/code-connect"; -import { - Label, - Tag, - TagToggle, - TagToggleGroup, - TagToggleList, -} from "primitives"; - -figma.connect(Tag, "", { - props: { - onRemove: figma.boolean("Removable", { - true: () => {}, - false: undefined, - }), - label: figma.string("Label"), - variant: figma.enum("Variant", { - Secondary: "secondary", - }), - scheme: figma.enum("Scheme", { - Danger: "danger", - Positive: "positive", - Warning: "warning", - Neutral: "neutral", - }), - }, - example: ({ label, ...props }) => {label}, -}); - -figma.connect(TagToggle, "", { - props: { - label: figma.string("Label"), - iconStart: figma.instance("Icon"), - }, - example: ({ label, ...props }) => ( - - {label} - - ), -}); - -figma.connect(TagToggleGroup, "", { - props: { - children: figma.children("Tag Toggle"), - }, - example: ({ children }) => ( - - - {children} - - ), -}); diff --git a/src/figma/primitives/Text.figma.tsx b/src/figma/primitives/Text.figma.tsx deleted file mode 100644 index 257bf800..00000000 --- a/src/figma/primitives/Text.figma.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import figma from "@figma/code-connect"; -import { - Text, - TextCode, - TextContentHeading, - TextContentTitle, - TextEmphasis, - TextHeading, - TextLink, - TextLinkList, - TextList, - TextListItem, - TextPrice, - TextSmall, - TextStrong, - TextSubheading, - TextSubtitle, - TextTitleHero, - TextTitlePage, -} from "primitives"; - -figma.connect(TextTitleHero, "", { - props: { text: figma.string("Text") }, - example: ({ text }) => {text}, -}); -figma.connect(TextTitlePage, "", { - props: { text: figma.string("Text") }, - example: ({ text }) => {text}, -}); -figma.connect(TextSubtitle, "", { - props: { text: figma.string("Text") }, - example: ({ text }) => {text}, -}); -figma.connect(TextHeading, "", { - props: { text: figma.string("Text") }, - example: ({ text }) => {text}, -}); -figma.connect(TextSubheading, "", { - props: { text: figma.string("Text") }, - example: ({ text }) => {text}, -}); -figma.connect(Text, "", { - props: { text: figma.string("Text") }, - example: ({ text }) => {text}, -}); -figma.connect(TextEmphasis, "", { - props: { text: figma.string("Text") }, - example: ({ text }) => {text}, -}); -figma.connect(TextLink, "", { - props: { text: figma.string("Text") }, - example: ({ text }) => {text}, -}); -figma.connect(TextStrong, "", { - props: { text: figma.string("Text") }, - example: ({ text }) => {text}, -}); -figma.connect(TextSmall, "", { - props: { text: figma.string("Text") }, - example: ({ text }) => {text}, -}); -figma.connect(TextCode, "", { - props: { text: figma.string("Text") }, - example: ({ text }) => {text}, -}); -figma.connect(TextList, "", { - props: { - children: figma.children("Text List Item"), - title: figma.boolean("Has Title", { - true: figma.children("Text Strong"), - false: undefined, - }), - density: figma.enum("Density", { Default: "default", Tight: "tight" }), - }, - example: ({ children, ...props }) => ( - {children} - ), -}); -figma.connect(TextLinkList, "", { - props: { - children: figma.children("Text Link List Item"), - title: figma.boolean("Has Title", { - true: figma.children("Text Strong"), - false: undefined, - }), - density: figma.enum("Density", { Default: "default", Tight: "tight" }), - }, - example: ({ children, ...props }) => ( - {children} - ), -}); -figma.connect(TextListItem, "", { - props: { text: figma.string("Text") }, - example: ({ text }) => {text}, -}); - -figma.connect(TextListItem, "", { - props: { text: figma.string("Text") }, - example: ({ text }) => ( - - {text} - - ), -}); - -figma.connect(TextPrice, "", { - props: { - label: figma.string("Label"), - size: figma.enum("Size", { - Small: "small", - }), - currency: figma.string("Currency"), - price: figma.string("Price"), - }, - example: ({ ...props }) => , -}); - -figma.connect(TextContentHeading, "", { - props: { - align: figma.enum("Align", { Center: "center" }), - heading: figma.string("Heading"), - subheading: figma.string("Subheading"), - }, - example: ({ ...props }) => , -}); - -figma.connect(TextContentTitle, "", { - props: { - align: figma.enum("Align", { Center: "center" }), - title: figma.string("Title"), - subtitle: figma.string("Subtitle"), - }, - example: ({ ...props }) => , -}); diff --git a/src/figma/primitives/Textarea.figma.tsx b/src/figma/primitives/Textarea.figma.tsx deleted file mode 100644 index 8ca8ffa8..00000000 --- a/src/figma/primitives/Textarea.figma.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import figma from "@figma/code-connect"; -import { Textarea, TextareaField } from "primitives"; - -figma.connect(Textarea, "", { - variant: { "Has Label": false }, - props: { - isDisabled: figma.enum("State", { Disabled: true }), - value: figma.enum("Value Type", { - Default: figma.string("Value"), - }), - placeholder: figma.enum("Value Type", { - default: "I am a placeholder...", - Placeholder: figma.string("Value"), - }), - }, - example: ({ ...props }) =>