[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-webflow-webflow-code-componentconvert-component":3,"mdc--rqsuee-key":37,"related-org-webflow-webflow-code-componentconvert-component":9459,"related-repo-webflow-webflow-code-componentconvert-component":9638},{"slug":4,"name":5,"fn":6,"description":7,"org":8,"tags":12,"stars":24,"repoUrl":25,"updatedAt":26,"license":27,"forks":28,"topics":29,"repo":32,"sourceUrl":35,"mdContent":36},"webflow-code-componentconvert-component","webflow-code-component:convert-component","convert React components to Webflow Code Components","Convert an existing React component into a Webflow Code Component. Analyzes TypeScript props, maps to Webflow prop types, generates the .webflow.tsx definition file, and identifies required modifications.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},"webflow","Webflow","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fwebflow.png",[13,17,20,23],{"name":14,"slug":15,"type":16},"React","react","tag",{"name":18,"slug":19,"type":16},"TypeScript","typescript",{"name":21,"slug":22,"type":16},"Migration","migration",{"name":10,"slug":9,"type":16},107,"https:\u002F\u002Fgithub.com\u002Fwebflow\u002Fwebflow-skills","2026-05-18T06:47:52.523608",null,17,[30,31],"agent","skills",{"repoUrl":25,"stars":24,"forks":28,"topics":33,"description":34},[30,31],"Official Webflow Agent Skills","https:\u002F\u002Fgithub.com\u002Fwebflow\u002Fwebflow-skills\u002Ftree\u002FHEAD\u002Fplugins\u002Fwebflow-skills\u002Fskills\u002Fconvert-component","---\nname: webflow-code-component:convert-component\ndescription: Convert an existing React component into a Webflow Code Component. Analyzes TypeScript props, maps to Webflow prop types, generates the .webflow.tsx definition file, and identifies required modifications.\ncompatibility: Node.js 18+, React 18+, TypeScript, @webflow\u002Fwebflow-cli\nmetadata:\n  author: webflow\n  version: \"1.0\"\n---\n\n# Convert Component\n\nConvert an existing React component into a Webflow Code Component by analyzing its structure and generating the appropriate `.webflow.tsx` definition file.\n\n## When to Use This Skill\n\n**Use when:**\n- User has an existing React component they want to use in Webflow\n- User asks to \"convert\", \"adapt\", or \"make this work with Webflow\"\n- User provides a React component file and wants a Webflow definition\n- User is migrating components from another React project\n\n**Do NOT use when:**\n- Creating a component from scratch (use component-scaffold)\n- User just wants to understand code components (answer directly)\n- Component is already a Webflow code component (use component-audit)\n\n## Instructions\n\n### Phase 1: Analyze Existing Component\n\n1. **Read the React component file**: Get the full source code\n\n2. **Extract component information**:\n   - Component name (function\u002Fconst name)\n   - Props interface or type definition\n   - Each prop's TypeScript type\n   - Default values if defined\n   - Whether component uses `children`\n\n3. **Identify incompatible patterns**:\n\n   | Pattern | Issue | Resolution |\n   |---------|-------|------------|\n   | React Context usage | Context doesn't work across Webflow components | Refactor to props or use nano stores |\n   | `window`\u002F`document` in render | SSR will fail | Wrap in useEffect or set `ssr: false` |\n   | `localStorage`\u002F`sessionStorage` in render | SSR will fail | Wrap in useEffect or set `ssr: false` |\n   | Complex object props | Can't map to Webflow prop types | Break into individual props |\n   | Function props (callbacks) | Not supported in Webflow | Remove or internalize logic |\n   | `useContext` hook | Won't work across components | Use alternative state patterns |\n   | External CSS imports | May not work in Shadow DOM | Import in .webflow.tsx instead |\n   | CSS class references to global styles | Won't work in Shadow DOM | Use component-scoped styles |\n   | styled-components | Needs Shadow DOM decorator | Set up globals.ts with decorator |\n   | Emotion (@emotion\u002Fstyled) | Needs Shadow DOM decorator | Set up globals.ts with decorator |\n\n4. **Detect styling approach** and note required setup:\n\n   **If using styled-components:**\n   ```bash\n   npm i @webflow\u002Fstyled-components-utils styled-components\n   ```\n\n   Create\u002Fupdate `globals.ts`:\n   ```typescript\n   import { styledComponentsShadowDomDecorator } from \"@webflow\u002Fstyled-components-utils\";\n   export const decorators = [styledComponentsShadowDomDecorator];\n   ```\n\n   **If using Emotion:**\n   ```bash\n   npm i @webflow\u002Femotion-utils @emotion\u002Fcache @emotion\u002Freact\n   ```\n\n   Create\u002Fupdate `globals.ts`:\n   ```typescript\n   import { emotionShadowDomDecorator } from \"@webflow\u002Femotion-utils\";\n   export const decorators = [emotionShadowDomDecorator];\n   ```\n\n   **For both CSS-in-JS approaches**, update `webflow.json`:\n\n   styled-components:\n   ```json\n   {\n     \"library\": {\n       \"globals\": \".\u002Fsrc\u002Fglobals.ts\",\n       \"renderer\": {\n         \"server\": \"@webflow\u002Fstyled-components-utils\u002Fserver\"\n       }\n     }\n   }\n   ```\n\n   Emotion:\n   ```json\n   {\n     \"library\": {\n       \"globals\": \".\u002Fsrc\u002Fglobals.ts\",\n       \"renderer\": {\n         \"server\": \"@webflow\u002Femotion-utils\u002Fserver\"\n       }\n     }\n   }\n   ```\n\n5. **Flag any dependencies** that might cause issues:\n   - Large libraries (bundle size concern)\n   - Browser-only libraries\n   - Libraries that manipulate DOM directly\n\n### Phase 2: Map Props to Webflow Types\n\n6. **Apply TypeScript → Webflow prop type mapping**:\n\n   | TypeScript Type | Webflow Prop | Notes |\n   |-----------------|--------------|-------|\n   | `string` | `props.Text()` | Default for short text |\n   | `string` (long\u002FHTML content) | `props.RichText()` | If prop name suggests content\u002Fbody\u002Fdescription |\n   | `React.ReactNode` \u002F `children` | `props.Slot()` | For nested content |\n   | `number` | `props.Number()` | Numeric values |\n   | `boolean` | `props.Boolean()` | Toggles |\n   | `\"option1\" \\| \"option2\"` | `props.Variant()` | String literal unions (requires `options` array) |\n   | `enum` | `props.Variant()` | Convert enum values to `options` array (required) |\n   | `{ href: string; ... }` | `props.Link()` | Returns `{ href, target?, preload? }` object — may need wrapper if component expects separate `href`\u002F`target` props |\n   | Image-related types | `props.Image()` | Image src, url, etc. |\n   | `string` (canvas-editable text) | `props.TextNode()` | For text editable directly on canvas; has `multiline` param |\n   | `boolean` (show\u002Fhide) | `props.Visibility()` | Semantic show\u002Fhide toggle |\n   | `string` (for HTML id) | `props.Id()` | If prop is named \"id\" or used for accessibility |\n   | Complex objects | **SPLIT** | Break into multiple simple props |\n   | Functions\u002Fcallbacks | **REMOVE** | Not supported |\n   | Arrays | **SPECIAL** | May need component redesign |\n\n7. **Handle special cases**:\n\n   **Complex object props** - Break them down:\n   ```typescript\n   \u002F\u002F Original\n   interface Props {\n     author: {\n       name: string;\n       avatar: string;\n       bio: string;\n     }\n   }\n\n   \u002F\u002F Converted to flat props\n   props: {\n     authorName: props.Text({ name: \"Author Name\" }),\n     authorAvatar: props.Image({ name: \"Author Avatar\" }),\n     authorBio: props.RichText({ name: \"Author Bio\" })\n   }\n   ```\n\n   **Union types with more than simple strings**:\n   ```typescript\n   \u002F\u002F Original - complex union\n   type Size = \"sm\" | \"md\" | \"lg\" | { width: number; height: number };\n\n   \u002F\u002F Convert to Variant with only string options\n   size: props.Variant({\n     name: \"Size\",\n     options: [\"sm\", \"md\", \"lg\", \"custom\"],\n     defaultValue: \"md\"\n   })\n   \u002F\u002F Note: Custom size would need additional Number props\n   ```\n\n   **Optional props** - Provide defaultValue for prop types that support it. Note: Link, Image, Slot, and Id do not accept defaultValue.\n   ```typescript\n   \u002F\u002F Original\n   interface Props {\n     title?: string;\n   }\n\n   \u002F\u002F Converted - provide default for types that support it\n   title: props.Text({\n     name: \"Title\",\n     defaultValue: \"\"  \u002F\u002F Empty string or sensible default\n   })\n   ```\n\n### Phase 3: Check Project Setup\n\n8. **Verify Webflow setup exists**:\n   - Check for `webflow.json` in project root\n   - Check for required dependencies (@webflow\u002Fwebflow-cli, @webflow\u002Fdata-types, @webflow\u002Freact)\n   - If using styled-components\u002FEmotion, check for decorator packages\n   - If missing, offer to set up or direct to local-dev-setup skill\n\n9. **Determine file locations**:\n   - Identify where the original component lives\n   - Determine where `.webflow.tsx` should be created (same directory)\n   - Check for existing styles that need to be imported\n\n### Phase 4: Generate Definition File\n\n10. **Create the `.webflow.tsx` file**:\n\n```typescript\nimport { declareComponent } from \"@webflow\u002Freact\";\nimport { props } from \"@webflow\u002Fdata-types\";\nimport { ComponentName } from \".\u002FComponentName\";\n\u002F\u002F Import styles if they exist\nimport \".\u002FComponentName.module.css\"; \u002F\u002F or .css\n\nexport default declareComponent(ComponentName, {\n  name: \"ComponentName\",\n  description: \"[Generated from component purpose]\",\n  group: \"[Appropriate category]\",\n  props: {\n    \u002F\u002F Mapped props here\n  },\n  \u002F\u002F decorators: [], \u002F\u002F Optional — per-component decorators (e.g., for CSS-in-JS Shadow DOM support)\n  options: {\n    applyTagSelectors: true, \u002F\u002F Default is false. Set to true to apply Webflow's tag selectors (e.g., h1, p styles) inside the component.\n    ssr: true \u002F\u002F or false if browser APIs detected\n  }\n});\n```\n\n11. **Provide the complete file** with all props mapped\n\n### Phase 5: Document Required Changes\n\n12. **List modifications needed** to the original component:\n\n```markdown\n## Required Changes to [ComponentName].tsx\n\n### Must Fix (Component won't work without these):\n- [ ] Issue 1: [Description and how to fix]\n- [ ] Issue 2: [Description and how to fix]\n\n### Recommended (Will improve Webflow integration):\n- [ ] Recommendation 1\n- [ ] Recommendation 2\n\n### Props Mapping Summary:\n| Original Prop | Webflow Prop | Notes |\n|---------------|--------------|-------|\n| title: string | props.Text() | Direct mapping |\n| isOpen: boolean | props.Boolean() | Direct mapping |\n| data: object | SPLIT → dataTitle, dataValue | Flattened |\n| onClick: function | REMOVED | Not supported |\n```\n\n13. **Provide modified component code** if changes are needed:\n    - Show the updated TypeScript interface\n    - Show any useEffect wrappers needed for SSR\n    - Show style import changes\n    - Note CSS-in-JS setup requirements if applicable\n\n## Examples\n\n### Example 1: Simple Component Conversion\n\n**User prompt:**\n```\nConvert this React component to work with Webflow:\n\n\u002F\u002F TestimonialCard.tsx\ninterface TestimonialCardProps {\n  quote: string;\n  authorName: string;\n  authorTitle?: string;\n  rating?: number;\n}\n\nexport const TestimonialCard: React.FC\u003CTestimonialCardProps> = ({\n  quote,\n  authorName,\n  authorTitle = \"\",\n  rating = 5\n}) => {\n  return (\n    \u003Cdiv className=\"testimonial-card\">\n      \u003Cdiv className=\"stars\">{\"★\".repeat(rating)}\u003C\u002Fdiv>\n      \u003Cblockquote>{quote}\u003C\u002Fblockquote>\n      \u003Cdiv className=\"author\">\n        \u003Cstrong>{authorName}\u003C\u002Fstrong>\n        {authorTitle && \u003Cspan>{authorTitle}\u003C\u002Fspan>}\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  );\n};\n```\n\n**Response:**\n\n```markdown\n## Component Analysis: TestimonialCard\n\n### Props Detected:\n| Prop | TypeScript Type | Webflow Mapping |\n|------|-----------------|-----------------|\n| quote | string | props.Text() |\n| authorName | string | props.Text() |\n| authorTitle | string (optional) | props.Text() |\n| rating | number (optional) | props.Number() |\n\n### Issues Found:\n- **CSS class \"testimonial-card\"** - Uses global class that won't work in Shadow DOM\n  - Fix: Convert to CSS Modules or import scoped styles\n\n### No blocking issues - ready to convert!\n\n---\n\n## Generated Files\n\n### TestimonialCard.webflow.tsx\n```typescript\nimport { declareComponent } from \"@webflow\u002Freact\";\nimport { props } from \"@webflow\u002Fdata-types\";\nimport { TestimonialCard } from \".\u002FTestimonialCard\";\nimport \".\u002FTestimonialCard.module.css\";\n\nexport default declareComponent(TestimonialCard, {\n  name: \"TestimonialCard\",\n  description: \"Display customer testimonials with rating stars\",\n  group: \"Display\",\n  props: {\n    quote: props.Text({\n      name: \"Quote\",\n      defaultValue: \"This product changed my life!\"\n    }),\n    authorName: props.Text({\n      name: \"Author Name\",\n      defaultValue: \"Jane Doe\"\n    }),\n    authorTitle: props.Text({\n      name: \"Author Title\",\n      defaultValue: \"CEO, Company\"\n    }),\n    rating: props.Number({\n      name: \"Rating\",\n      defaultValue: 5,\n      min: 1,\n      max: 5\n    })\n  },\n  options: {\n    applyTagSelectors: true,\n    ssr: true\n  }\n});\n```\n\n### Required Changes to TestimonialCard.tsx\n\n1. **Convert to CSS Modules** - Rename `TestimonialCard.css` to `TestimonialCard.module.css` and update imports:\n\n```typescript\nimport styles from \".\u002FTestimonialCard.module.css\";\n\n\u002F\u002F Default CSS Modules uses bracket notation:\n\u003Cdiv className={styles[\"testimonial-card\"]}>\n\u003Cdiv className={styles[\"stars\"]}>\n\u002F\u002F Dot notation (styles.testimonialCard) requires camelCase class names\n\u002F\u002F or a webpack override for css-loader.\n```\n\n### Setup Check\n- [ ] Verify webflow.json exists\n- [ ] Install dependencies if needed: `npm i --save-dev @webflow\u002Fwebflow-cli @webflow\u002Fdata-types @webflow\u002Freact`\n```\n\n---\n\n### Example 2: Component with Incompatible Patterns\n\n**User prompt:**\n```\nMake this work as a Webflow code component:\n\n\u002F\u002F Modal.tsx\nimport { createContext, useContext, useState } from 'react';\n\nconst ModalContext = createContext\u003C{ isOpen: boolean; toggle: () => void } | null>(null);\n\nexport const useModal = () => {\n  const context = useContext(ModalContext);\n  if (!context) throw new Error('useModal must be used within ModalProvider');\n  return context;\n};\n\ninterface ModalProps {\n  trigger: React.ReactNode;\n  children: React.ReactNode;\n  onOpen?: () => void;\n  onClose?: () => void;\n}\n\nexport const Modal: React.FC\u003CModalProps> = ({ trigger, children, onOpen, onClose }) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const toggle = () => {\n    const newState = !isOpen;\n    setIsOpen(newState);\n    if (newState && onOpen) onOpen();\n    if (!newState && onClose) onClose();\n  };\n\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n  }, [isOpen]);\n\n  return (\n    \u003CModalContext.Provider value={{ isOpen, toggle }}>\n      \u003Cdiv onClick={toggle}>{trigger}\u003C\u002Fdiv>\n      {isOpen && (\n        \u003Cdiv className=\"modal-overlay\" onClick={toggle}>\n          \u003Cdiv className=\"modal-content\" onClick={e => e.stopPropagation()}>\n            {children}\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      )}\n    \u003C\u002FModalContext.Provider>\n  );\n};\n```\n\n**Response:**\n\n```markdown\n## Component Analysis: Modal\n\n### Issues Found:\n\n| Issue | Severity | Resolution |\n|-------|----------|------------|\n| React Context (ModalContext) | Critical | Context won't work across Webflow components. Since this is internal to Modal, it's OK but exported useModal hook won't work. |\n| document.body manipulation | Critical | SSR incompatible. Must set `ssr: false` or wrap in useEffect check. |\n| onOpen\u002FonClose callbacks | Warning | Function props not supported in Webflow. Must remove. |\n| Global CSS classes | Warning | \"modal-overlay\", \"modal-content\" won't work in Shadow DOM. |\n\n### Props Detected:\n| Prop | TypeScript Type | Webflow Mapping | Status |\n|------|-----------------|-----------------|--------|\n| trigger | React.ReactNode | props.Slot() | OK |\n| children | React.ReactNode | props.Slot() | OK |\n| onOpen | function | REMOVE | Not supported |\n| onClose | function | REMOVE | Not supported |\n\n---\n\n## Required Changes\n\n### 1. Remove function props (onOpen, onClose)\nThese cannot be passed from Webflow Designer. Remove from interface and component.\n\n### 2. Fix SSR issue with document.body\nEither set `ssr: false` or add typeof check:\n\n```typescript\nuseEffect(() => {\n  if (typeof document === 'undefined') return;\n  \u002F\u002F ... rest of effect\n}, [isOpen]);\n```\n\n### 3. Convert to CSS Modules\nRename styles and update class references.\n\n### 4. Remove exported useModal hook\nThis won't work for external components. Keep ModalContext internal only.\n\n---\n\n## Generated Files\n\n### Modal.webflow.tsx\n```typescript\nimport { declareComponent } from \"@webflow\u002Freact\";\nimport { props } from \"@webflow\u002Fdata-types\";\nimport { Modal } from \".\u002FModal\";\nimport \".\u002FModal.module.css\";\n\nexport default declareComponent(Modal, {\n  name: \"Modal\",\n  description: \"Overlay modal dialog with trigger element\",\n  group: \"Interactive\",\n  props: {\n    trigger: props.Slot({\n      name: \"Trigger\"\n    }),\n    children: props.Slot({\n      name: \"Content\"\n    })\n  },\n  options: {\n    applyTagSelectors: true,\n    ssr: false  \u002F\u002F Required due to document.body usage\n  }\n});\n```\n\n### Updated Modal.tsx\n```typescript\nimport { useState, useEffect } from 'react';\nimport styles from \".\u002FModal.module.css\";\n\ninterface ModalProps {\n  trigger: React.ReactNode;\n  children: React.ReactNode;\n  \u002F\u002F Removed: onOpen, onClose - not supported in Webflow\n}\n\nexport const Modal: React.FC\u003CModalProps> = ({ trigger, children }) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const toggle = () => setIsOpen(!isOpen);\n\n  useEffect(() => {\n    if (typeof document === 'undefined') return;\n\n    if (isOpen) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n\n    return () => {\n      document.body.style.overflow = '';\n    };\n  }, [isOpen]);\n\n  return (\n    \u003C>\n      \u003Cdiv onClick={toggle}>{trigger}\u003C\u002Fdiv>\n      {isOpen && (\n        \u003Cdiv className={styles[\"overlay\"]} onClick={toggle}>\n          \u003Cdiv className={styles[\"content\"]} onClick={e => e.stopPropagation()}>\n            {children}\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      )}\n    \u003C\u002F>\n  );\n};\n```\n\n### Setup Required\n```bash\nnpm i --save-dev @webflow\u002Fwebflow-cli @webflow\u002Fdata-types @webflow\u002Freact\n```\n```\n\n---\n\n### Example 3: Component with Complex Object Props\n\n**User prompt:**\n```\nConvert to Webflow:\n\ninterface Product {\n  id: string;\n  name: string;\n  price: number;\n  image: string;\n  category: 'electronics' | 'clothing' | 'home';\n}\n\ninterface ProductCardProps {\n  product: Product;\n  showBadge?: boolean;\n}\n\nexport const ProductCard = ({ product, showBadge = true }: ProductCardProps) => (\n  \u003Cdiv>\n    \u003Cimg src={product.image} alt={product.name} \u002F>\n    {showBadge && \u003Cspan>{product.category}\u003C\u002Fspan>}\n    \u003Ch3>{product.name}\u003C\u002Fh3>\n    \u003Cp>${product.price}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n);\n```\n\n**Response:**\n\n```markdown\n## Component Analysis: ProductCard\n\n### Complex Props Detected:\n\nThe `product` prop is a complex object that must be flattened for Webflow:\n\n| Original | Flattened Props |\n|----------|-----------------|\n| product.id | (Not needed in UI - remove) |\n| product.name | productName: props.Text() |\n| product.price | productPrice: props.Number() |\n| product.image | productImage: props.Image() |\n| product.category | productCategory: props.Variant() |\n| showBadge | showBadge: props.Boolean() |\n\n---\n\n## Generated Files\n\n### ProductCard.webflow.tsx\n```typescript\nimport { declareComponent } from \"@webflow\u002Freact\";\nimport { props } from \"@webflow\u002Fdata-types\";\nimport { ProductCard } from \".\u002FProductCard\";\nimport \".\u002FProductCard.module.css\";\n\nexport default declareComponent(ProductCard, {\n  name: \"ProductCard\",\n  description: \"Product display card with image, name, price, and category\",\n  group: \"Display\",\n  props: {\n    productName: props.Text({\n      name: \"Product Name\",\n      defaultValue: \"Product Title\"\n    }),\n    productPrice: props.Number({\n      name: \"Price\",\n      defaultValue: 29.99\n    }),\n    productImage: props.Image({\n      name: \"Product Image\"\n    }),\n    productCategory: props.Variant({\n      name: \"Category\",\n      options: [\"electronics\", \"clothing\", \"home\"],\n      defaultValue: \"electronics\"\n    }),\n    showBadge: props.Boolean({\n      name: \"Show Category Badge\",\n      defaultValue: true\n    })\n  },\n  options: {\n    applyTagSelectors: true,\n    ssr: true\n  }\n});\n```\n\n### Updated ProductCard.tsx\n```typescript\nimport styles from \".\u002FProductCard.module.css\";\n\ninterface ProductCardProps {\n  productName: string;\n  productPrice: number;\n  productImage?: { src: string; alt?: string };\n  productCategory: 'electronics' | 'clothing' | 'home';\n  showBadge?: boolean;\n}\n\nexport const ProductCard = ({\n  productName,\n  productPrice,\n  productImage,\n  productCategory,\n  showBadge = true\n}: ProductCardProps) => (\n  \u003Cdiv className={styles[\"card\"]}>\n    {productImage && (\n      \u003Cimg src={productImage.src} alt={productImage.alt || productName} \u002F>\n    )}\n    {showBadge && \u003Cspan className={styles[\"badge\"]}>{productCategory}\u003C\u002Fspan>}\n    \u003Ch3>{productName}\u003C\u002Fh3>\n    \u003Cp>${productPrice.toFixed(2)}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n);\n```\n\n### Migration Notes:\n- The `product` object has been flattened into individual props\n- Each prop is now directly editable in Webflow Designer\n- `product.id` was removed as it's not displayed in the UI\n- Image prop now uses Webflow's Image type (provides { src, alt })\n```\n\n---\n\n### Example 4: Component with styled-components\n\n**User prompt:**\n```\nConvert this styled-components React component to Webflow:\n\n\u002F\u002F Button.tsx\nimport styled from 'styled-components';\n\nconst StyledButton = styled.button\u003C{ variant: 'primary' | 'secondary' }>`\n  padding: 12px 24px;\n  border-radius: 8px;\n  font-weight: 600;\n  background: ${props => props.variant === 'primary' ? '#3b82f6' : '#e5e7eb'};\n  color: ${props => props.variant === 'primary' ? 'white' : '#1f2937'};\n\n  &:hover {\n    opacity: 0.9;\n  }\n`;\n\ninterface ButtonProps {\n  label: string;\n  variant?: 'primary' | 'secondary';\n  disabled?: boolean;\n}\n\nexport const Button = ({ label, variant = 'primary', disabled = false }: ButtonProps) => (\n  \u003CStyledButton variant={variant} disabled={disabled}>\n    {label}\n  \u003C\u002FStyledButton>\n);\n```\n\n**Response:**\n\n```markdown\n## Component Analysis: Button\n\n### Styling Approach Detected: styled-components\n\nstyled-components requires a Shadow DOM decorator to work in Webflow.\n\n### Props Detected:\n| Prop | TypeScript Type | Webflow Mapping |\n|------|-----------------|-----------------|\n| label | string | props.Text() |\n| variant | 'primary' \\| 'secondary' | props.Variant() |\n| disabled | boolean | props.Boolean() |\n\n### No blocking issues - ready to convert!\n\n---\n\n## Required Setup for styled-components\n\n**1. Install dependencies:**\n```bash\nnpm i @webflow\u002Fstyled-components-utils styled-components\nnpm i -D @types\u002Fstyled-components\n```\n\n**2. Create\u002Fupdate `src\u002Fglobals.ts`:**\n```typescript\nimport { styledComponentsShadowDomDecorator } from \"@webflow\u002Fstyled-components-utils\";\nexport const decorators = [styledComponentsShadowDomDecorator];\n```\n\n**3. Update `webflow.json`:**\n```json\n{\n  \"library\": {\n    \"name\": \"My Library\",\n    \"components\": [\".\u002Fsrc\u002F**\u002F*.webflow.@(js|jsx|mjs|ts|tsx)\"],\n    \"globals\": \".\u002Fsrc\u002Fglobals.ts\"\n  }\n}\n```\n\n---\n\n## Generated Files\n\n### Button.webflow.tsx\n```typescript\nimport { declareComponent } from \"@webflow\u002Freact\";\nimport { props } from \"@webflow\u002Fdata-types\";\nimport { Button } from \".\u002FButton\";\n\u002F\u002F No CSS import needed - styled-components handles styles\n\nexport default declareComponent(Button, {\n  name: \"Button\",\n  description: \"Styled button with primary and secondary variants\",\n  group: \"Interactive\",\n  props: {\n    label: props.Text({\n      name: \"Label\",\n      defaultValue: \"Click me\"\n    }),\n    variant: props.Variant({\n      name: \"Variant\",\n      options: [\"primary\", \"secondary\"],\n      defaultValue: \"primary\"\n    }),\n    disabled: props.Boolean({\n      name: \"Disabled\",\n      defaultValue: false,\n      trueLabel: \"Disabled\",\n      falseLabel: \"Enabled\"\n    })\n  },\n  options: {\n    applyTagSelectors: true,\n    ssr: true\n  }\n});\n```\n\n### No changes needed to Button.tsx\nThe component can remain as-is. The styled-components decorator in globals.ts will handle Shadow DOM style injection automatically.\n\n### Setup Checklist\n- [ ] Install @webflow\u002Fstyled-components-utils\n- [ ] Create globals.ts with decorator\n- [ ] Update webflow.json to reference globals\n- [ ] Deploy with `npx webflow library share`\n```\n\n## Guidelines\n\n### When to Recommend Component Redesign\n\nSome components fundamentally don't fit the Webflow model:\n\n1. **Heavy Context usage**: If component relies on app-wide context, suggest redesign\n2. **Complex state machines**: May need simplification\n3. **Tightly coupled components**: Each needs to be independent in Webflow\n4. **Components that render portals**: Consider if portal is necessary\n\n### Default Value Strategy\n\nAlways provide sensible defaults:\n- Text props: Representative example text\n- Numbers: Common\u002Ftypical value\n- Booleans: Most common use case\n- Variants: Most popular option\n- Images: Can be undefined (optional)\n- Slots: No default needed\n\n### Props Naming for Webflow\n\nMake prop names designer-friendly:\n- Use descriptive names: `buttonText` not `txt`\n- Avoid abbreviations: `imageSource` not `imgSrc`\n- Group related props with prefixes: `authorName`, `authorAvatar`, `authorBio`\n\n### SSR Decision\n\nSet `ssr: false` if component:\n- Accesses `window`, `document`, `navigator`\n- Uses `localStorage` or `sessionStorage`\n- Manipulates DOM directly\n- Uses libraries that require browser APIs\n- Renders canvas, WebGL, or maps\n",{"data":38,"body":42},{"name":5,"description":7,"compatibility":39,"metadata":40},"Node.js 18+, React 18+, TypeScript, @webflow\u002Fwebflow-cli",{"author":9,"version":41},"1.0",{"type":43,"children":44},"root",[45,54,69,76,85,110,118,136,142,149,1133,1139,2514,2520,2596,2602,2621,3042,3055,3061,3074,3400,3436,3442,3448,3456,3466,3474,4655,4661,4690,4831,4837,4869,4878,4883,4888,4893,4898,4903,4921,4926,4938,4950,4956,4963,4972,4978,4983,4989,4994,4998,5004,5010,5517,5523,6473,6479,6517,6526,6531,6536,6541,6546,6579,6586,7782,7788,8270,8276,8311,8320,8325,8330,8335,8340,8345,8360,8369,8384,8456,8470,8631,8634,8639,8645,9382,9388,9393,9399,9445,9454],{"type":46,"tag":47,"props":48,"children":50},"element","h1",{"id":49},"convert-component",[51],{"type":52,"value":53},"text","Convert Component",{"type":46,"tag":55,"props":56,"children":57},"p",{},[58,60,67],{"type":52,"value":59},"Convert an existing React component into a Webflow Code Component by analyzing its structure and generating the appropriate ",{"type":46,"tag":61,"props":62,"children":64},"code",{"className":63},[],[65],{"type":52,"value":66},".webflow.tsx",{"type":52,"value":68}," definition file.",{"type":46,"tag":70,"props":71,"children":73},"h2",{"id":72},"when-to-use-this-skill",[74],{"type":52,"value":75},"When to Use This Skill",{"type":46,"tag":55,"props":77,"children":78},{},[79],{"type":46,"tag":80,"props":81,"children":82},"strong",{},[83],{"type":52,"value":84},"Use when:",{"type":46,"tag":86,"props":87,"children":88},"ul",{},[89,95,100,105],{"type":46,"tag":90,"props":91,"children":92},"li",{},[93],{"type":52,"value":94},"User has an existing React component they want to use in Webflow",{"type":46,"tag":90,"props":96,"children":97},{},[98],{"type":52,"value":99},"User asks to \"convert\", \"adapt\", or \"make this work with Webflow\"",{"type":46,"tag":90,"props":101,"children":102},{},[103],{"type":52,"value":104},"User provides a React component file and wants a Webflow definition",{"type":46,"tag":90,"props":106,"children":107},{},[108],{"type":52,"value":109},"User is migrating components from another React project",{"type":46,"tag":55,"props":111,"children":112},{},[113],{"type":46,"tag":80,"props":114,"children":115},{},[116],{"type":52,"value":117},"Do NOT use when:",{"type":46,"tag":86,"props":119,"children":120},{},[121,126,131],{"type":46,"tag":90,"props":122,"children":123},{},[124],{"type":52,"value":125},"Creating a component from scratch (use component-scaffold)",{"type":46,"tag":90,"props":127,"children":128},{},[129],{"type":52,"value":130},"User just wants to understand code components (answer directly)",{"type":46,"tag":90,"props":132,"children":133},{},[134],{"type":52,"value":135},"Component is already a Webflow code component (use component-audit)",{"type":46,"tag":70,"props":137,"children":139},{"id":138},"instructions",[140],{"type":52,"value":141},"Instructions",{"type":46,"tag":143,"props":144,"children":146},"h3",{"id":145},"phase-1-analyze-existing-component",[147],{"type":52,"value":148},"Phase 1: Analyze Existing Component",{"type":46,"tag":150,"props":151,"children":152},"ol",{},[153,163,207,468,1105],{"type":46,"tag":90,"props":154,"children":155},{},[156,161],{"type":46,"tag":80,"props":157,"children":158},{},[159],{"type":52,"value":160},"Read the React component file",{"type":52,"value":162},": Get the full source code",{"type":46,"tag":90,"props":164,"children":165},{},[166,171,173],{"type":46,"tag":80,"props":167,"children":168},{},[169],{"type":52,"value":170},"Extract component information",{"type":52,"value":172},":",{"type":46,"tag":86,"props":174,"children":175},{},[176,181,186,191,196],{"type":46,"tag":90,"props":177,"children":178},{},[179],{"type":52,"value":180},"Component name (function\u002Fconst name)",{"type":46,"tag":90,"props":182,"children":183},{},[184],{"type":52,"value":185},"Props interface or type definition",{"type":46,"tag":90,"props":187,"children":188},{},[189],{"type":52,"value":190},"Each prop's TypeScript type",{"type":46,"tag":90,"props":192,"children":193},{},[194],{"type":52,"value":195},"Default values if defined",{"type":46,"tag":90,"props":197,"children":198},{},[199,201],{"type":52,"value":200},"Whether component uses ",{"type":46,"tag":61,"props":202,"children":204},{"className":203},[],[205],{"type":52,"value":206},"children",{"type":46,"tag":90,"props":208,"children":209},{},[210,215,216],{"type":46,"tag":80,"props":211,"children":212},{},[213],{"type":52,"value":214},"Identify incompatible patterns",{"type":52,"value":172},{"type":46,"tag":217,"props":218,"children":219},"table",{},[220,244],{"type":46,"tag":221,"props":222,"children":223},"thead",{},[224],{"type":46,"tag":225,"props":226,"children":227},"tr",{},[228,234,239],{"type":46,"tag":229,"props":230,"children":231},"th",{},[232],{"type":52,"value":233},"Pattern",{"type":46,"tag":229,"props":235,"children":236},{},[237],{"type":52,"value":238},"Issue",{"type":46,"tag":229,"props":240,"children":241},{},[242],{"type":52,"value":243},"Resolution",{"type":46,"tag":245,"props":246,"children":247},"tbody",{},[248,267,305,338,356,374,398,416,434,452],{"type":46,"tag":225,"props":249,"children":250},{},[251,257,262],{"type":46,"tag":252,"props":253,"children":254},"td",{},[255],{"type":52,"value":256},"React Context usage",{"type":46,"tag":252,"props":258,"children":259},{},[260],{"type":52,"value":261},"Context doesn't work across Webflow components",{"type":46,"tag":252,"props":263,"children":264},{},[265],{"type":52,"value":266},"Refactor to props or use nano stores",{"type":46,"tag":225,"props":268,"children":269},{},[270,289,294],{"type":46,"tag":252,"props":271,"children":272},{},[273,279,281,287],{"type":46,"tag":61,"props":274,"children":276},{"className":275},[],[277],{"type":52,"value":278},"window",{"type":52,"value":280},"\u002F",{"type":46,"tag":61,"props":282,"children":284},{"className":283},[],[285],{"type":52,"value":286},"document",{"type":52,"value":288}," in render",{"type":46,"tag":252,"props":290,"children":291},{},[292],{"type":52,"value":293},"SSR will fail",{"type":46,"tag":252,"props":295,"children":296},{},[297,299],{"type":52,"value":298},"Wrap in useEffect or set ",{"type":46,"tag":61,"props":300,"children":302},{"className":301},[],[303],{"type":52,"value":304},"ssr: false",{"type":46,"tag":225,"props":306,"children":307},{},[308,325,329],{"type":46,"tag":252,"props":309,"children":310},{},[311,317,318,324],{"type":46,"tag":61,"props":312,"children":314},{"className":313},[],[315],{"type":52,"value":316},"localStorage",{"type":52,"value":280},{"type":46,"tag":61,"props":319,"children":321},{"className":320},[],[322],{"type":52,"value":323},"sessionStorage",{"type":52,"value":288},{"type":46,"tag":252,"props":326,"children":327},{},[328],{"type":52,"value":293},{"type":46,"tag":252,"props":330,"children":331},{},[332,333],{"type":52,"value":298},{"type":46,"tag":61,"props":334,"children":336},{"className":335},[],[337],{"type":52,"value":304},{"type":46,"tag":225,"props":339,"children":340},{},[341,346,351],{"type":46,"tag":252,"props":342,"children":343},{},[344],{"type":52,"value":345},"Complex object props",{"type":46,"tag":252,"props":347,"children":348},{},[349],{"type":52,"value":350},"Can't map to Webflow prop types",{"type":46,"tag":252,"props":352,"children":353},{},[354],{"type":52,"value":355},"Break into individual props",{"type":46,"tag":225,"props":357,"children":358},{},[359,364,369],{"type":46,"tag":252,"props":360,"children":361},{},[362],{"type":52,"value":363},"Function props (callbacks)",{"type":46,"tag":252,"props":365,"children":366},{},[367],{"type":52,"value":368},"Not supported in Webflow",{"type":46,"tag":252,"props":370,"children":371},{},[372],{"type":52,"value":373},"Remove or internalize logic",{"type":46,"tag":225,"props":375,"children":376},{},[377,388,393],{"type":46,"tag":252,"props":378,"children":379},{},[380,386],{"type":46,"tag":61,"props":381,"children":383},{"className":382},[],[384],{"type":52,"value":385},"useContext",{"type":52,"value":387}," hook",{"type":46,"tag":252,"props":389,"children":390},{},[391],{"type":52,"value":392},"Won't work across components",{"type":46,"tag":252,"props":394,"children":395},{},[396],{"type":52,"value":397},"Use alternative state patterns",{"type":46,"tag":225,"props":399,"children":400},{},[401,406,411],{"type":46,"tag":252,"props":402,"children":403},{},[404],{"type":52,"value":405},"External CSS imports",{"type":46,"tag":252,"props":407,"children":408},{},[409],{"type":52,"value":410},"May not work in Shadow DOM",{"type":46,"tag":252,"props":412,"children":413},{},[414],{"type":52,"value":415},"Import in .webflow.tsx instead",{"type":46,"tag":225,"props":417,"children":418},{},[419,424,429],{"type":46,"tag":252,"props":420,"children":421},{},[422],{"type":52,"value":423},"CSS class references to global styles",{"type":46,"tag":252,"props":425,"children":426},{},[427],{"type":52,"value":428},"Won't work in Shadow DOM",{"type":46,"tag":252,"props":430,"children":431},{},[432],{"type":52,"value":433},"Use component-scoped styles",{"type":46,"tag":225,"props":435,"children":436},{},[437,442,447],{"type":46,"tag":252,"props":438,"children":439},{},[440],{"type":52,"value":441},"styled-components",{"type":46,"tag":252,"props":443,"children":444},{},[445],{"type":52,"value":446},"Needs Shadow DOM decorator",{"type":46,"tag":252,"props":448,"children":449},{},[450],{"type":52,"value":451},"Set up globals.ts with decorator",{"type":46,"tag":225,"props":453,"children":454},{},[455,460,464],{"type":46,"tag":252,"props":456,"children":457},{},[458],{"type":52,"value":459},"Emotion (@emotion\u002Fstyled)",{"type":46,"tag":252,"props":461,"children":462},{},[463],{"type":52,"value":446},{"type":46,"tag":252,"props":465,"children":466},{},[467],{"type":52,"value":451},{"type":46,"tag":90,"props":469,"children":470},{},[471,476,478,482,487,526,529,531,537,538,631,634,639,672,675,676,681,682,758,761,766,768,774,775,778,780,952,955,957],{"type":46,"tag":80,"props":472,"children":473},{},[474],{"type":52,"value":475},"Detect styling approach",{"type":52,"value":477}," and note required setup:",{"type":46,"tag":479,"props":480,"children":481},"br",{},[],{"type":46,"tag":80,"props":483,"children":484},{},[485],{"type":52,"value":486},"If using styled-components:",{"type":46,"tag":488,"props":489,"children":494},"pre",{"className":490,"code":491,"language":492,"meta":493,"style":493},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm i @webflow\u002Fstyled-components-utils styled-components\n","bash","",[495],{"type":46,"tag":61,"props":496,"children":497},{"__ignoreMap":493},[498],{"type":46,"tag":499,"props":500,"children":503},"span",{"class":501,"line":502},"line",1,[504,510,516,521],{"type":46,"tag":499,"props":505,"children":507},{"style":506},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[508],{"type":52,"value":509},"npm",{"type":46,"tag":499,"props":511,"children":513},{"style":512},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[514],{"type":52,"value":515}," i",{"type":46,"tag":499,"props":517,"children":518},{"style":512},[519],{"type":52,"value":520}," @webflow\u002Fstyled-components-utils",{"type":46,"tag":499,"props":522,"children":523},{"style":512},[524],{"type":52,"value":525}," styled-components\n",{"type":46,"tag":479,"props":527,"children":528},{},[],{"type":52,"value":530},"Create\u002Fupdate ",{"type":46,"tag":61,"props":532,"children":534},{"className":533},[],[535],{"type":52,"value":536},"globals.ts",{"type":52,"value":172},{"type":46,"tag":488,"props":539,"children":542},{"className":540,"code":541,"language":19,"meta":493,"style":493},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styledComponentsShadowDomDecorator } from \"@webflow\u002Fstyled-components-utils\";\nexport const decorators = [styledComponentsShadowDomDecorator];\n",[543],{"type":46,"tag":61,"props":544,"children":545},{"__ignoreMap":493},[546,597],{"type":46,"tag":499,"props":547,"children":548},{"class":501,"line":502},[549,555,561,567,572,577,582,587,592],{"type":46,"tag":499,"props":550,"children":552},{"style":551},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[553],{"type":52,"value":554},"import",{"type":46,"tag":499,"props":556,"children":558},{"style":557},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[559],{"type":52,"value":560}," {",{"type":46,"tag":499,"props":562,"children":564},{"style":563},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[565],{"type":52,"value":566}," styledComponentsShadowDomDecorator",{"type":46,"tag":499,"props":568,"children":569},{"style":557},[570],{"type":52,"value":571}," }",{"type":46,"tag":499,"props":573,"children":574},{"style":551},[575],{"type":52,"value":576}," from",{"type":46,"tag":499,"props":578,"children":579},{"style":557},[580],{"type":52,"value":581}," \"",{"type":46,"tag":499,"props":583,"children":584},{"style":512},[585],{"type":52,"value":586},"@webflow\u002Fstyled-components-utils",{"type":46,"tag":499,"props":588,"children":589},{"style":557},[590],{"type":52,"value":591},"\"",{"type":46,"tag":499,"props":593,"children":594},{"style":557},[595],{"type":52,"value":596},";\n",{"type":46,"tag":499,"props":598,"children":600},{"class":501,"line":599},2,[601,606,612,617,622,627],{"type":46,"tag":499,"props":602,"children":603},{"style":551},[604],{"type":52,"value":605},"export",{"type":46,"tag":499,"props":607,"children":609},{"style":608},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[610],{"type":52,"value":611}," const",{"type":46,"tag":499,"props":613,"children":614},{"style":563},[615],{"type":52,"value":616}," decorators ",{"type":46,"tag":499,"props":618,"children":619},{"style":557},[620],{"type":52,"value":621},"=",{"type":46,"tag":499,"props":623,"children":624},{"style":563},[625],{"type":52,"value":626}," [styledComponentsShadowDomDecorator]",{"type":46,"tag":499,"props":628,"children":629},{"style":557},[630],{"type":52,"value":596},{"type":46,"tag":479,"props":632,"children":633},{},[],{"type":46,"tag":80,"props":635,"children":636},{},[637],{"type":52,"value":638},"If using Emotion:",{"type":46,"tag":488,"props":640,"children":642},{"className":490,"code":641,"language":492,"meta":493,"style":493},"npm i @webflow\u002Femotion-utils @emotion\u002Fcache @emotion\u002Freact\n",[643],{"type":46,"tag":61,"props":644,"children":645},{"__ignoreMap":493},[646],{"type":46,"tag":499,"props":647,"children":648},{"class":501,"line":502},[649,653,657,662,667],{"type":46,"tag":499,"props":650,"children":651},{"style":506},[652],{"type":52,"value":509},{"type":46,"tag":499,"props":654,"children":655},{"style":512},[656],{"type":52,"value":515},{"type":46,"tag":499,"props":658,"children":659},{"style":512},[660],{"type":52,"value":661}," @webflow\u002Femotion-utils",{"type":46,"tag":499,"props":663,"children":664},{"style":512},[665],{"type":52,"value":666}," @emotion\u002Fcache",{"type":46,"tag":499,"props":668,"children":669},{"style":512},[670],{"type":52,"value":671}," @emotion\u002Freact\n",{"type":46,"tag":479,"props":673,"children":674},{},[],{"type":52,"value":530},{"type":46,"tag":61,"props":677,"children":679},{"className":678},[],[680],{"type":52,"value":536},{"type":52,"value":172},{"type":46,"tag":488,"props":683,"children":685},{"className":540,"code":684,"language":19,"meta":493,"style":493},"import { emotionShadowDomDecorator } from \"@webflow\u002Femotion-utils\";\nexport const decorators = [emotionShadowDomDecorator];\n",[686],{"type":46,"tag":61,"props":687,"children":688},{"__ignoreMap":493},[689,730],{"type":46,"tag":499,"props":690,"children":691},{"class":501,"line":502},[692,696,700,705,709,713,717,722,726],{"type":46,"tag":499,"props":693,"children":694},{"style":551},[695],{"type":52,"value":554},{"type":46,"tag":499,"props":697,"children":698},{"style":557},[699],{"type":52,"value":560},{"type":46,"tag":499,"props":701,"children":702},{"style":563},[703],{"type":52,"value":704}," emotionShadowDomDecorator",{"type":46,"tag":499,"props":706,"children":707},{"style":557},[708],{"type":52,"value":571},{"type":46,"tag":499,"props":710,"children":711},{"style":551},[712],{"type":52,"value":576},{"type":46,"tag":499,"props":714,"children":715},{"style":557},[716],{"type":52,"value":581},{"type":46,"tag":499,"props":718,"children":719},{"style":512},[720],{"type":52,"value":721},"@webflow\u002Femotion-utils",{"type":46,"tag":499,"props":723,"children":724},{"style":557},[725],{"type":52,"value":591},{"type":46,"tag":499,"props":727,"children":728},{"style":557},[729],{"type":52,"value":596},{"type":46,"tag":499,"props":731,"children":732},{"class":501,"line":599},[733,737,741,745,749,754],{"type":46,"tag":499,"props":734,"children":735},{"style":551},[736],{"type":52,"value":605},{"type":46,"tag":499,"props":738,"children":739},{"style":608},[740],{"type":52,"value":611},{"type":46,"tag":499,"props":742,"children":743},{"style":563},[744],{"type":52,"value":616},{"type":46,"tag":499,"props":746,"children":747},{"style":557},[748],{"type":52,"value":621},{"type":46,"tag":499,"props":750,"children":751},{"style":563},[752],{"type":52,"value":753}," [emotionShadowDomDecorator]",{"type":46,"tag":499,"props":755,"children":756},{"style":557},[757],{"type":52,"value":596},{"type":46,"tag":479,"props":759,"children":760},{},[],{"type":46,"tag":80,"props":762,"children":763},{},[764],{"type":52,"value":765},"For both CSS-in-JS approaches",{"type":52,"value":767},", update ",{"type":46,"tag":61,"props":769,"children":771},{"className":770},[],[772],{"type":52,"value":773},"webflow.json",{"type":52,"value":172},{"type":46,"tag":479,"props":776,"children":777},{},[],{"type":52,"value":779},"styled-components:",{"type":46,"tag":488,"props":781,"children":785},{"className":782,"code":783,"language":784,"meta":493,"style":493},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"library\": {\n    \"globals\": \".\u002Fsrc\u002Fglobals.ts\",\n    \"renderer\": {\n      \"server\": \"@webflow\u002Fstyled-components-utils\u002Fserver\"\n    }\n  }\n}\n","json",[786],{"type":46,"tag":61,"props":787,"children":788},{"__ignoreMap":493},[789,797,823,863,888,925,934,943],{"type":46,"tag":499,"props":790,"children":791},{"class":501,"line":502},[792],{"type":46,"tag":499,"props":793,"children":794},{"style":557},[795],{"type":52,"value":796},"{\n",{"type":46,"tag":499,"props":798,"children":799},{"class":501,"line":599},[800,805,810,814,818],{"type":46,"tag":499,"props":801,"children":802},{"style":557},[803],{"type":52,"value":804},"  \"",{"type":46,"tag":499,"props":806,"children":807},{"style":608},[808],{"type":52,"value":809},"library",{"type":46,"tag":499,"props":811,"children":812},{"style":557},[813],{"type":52,"value":591},{"type":46,"tag":499,"props":815,"children":816},{"style":557},[817],{"type":52,"value":172},{"type":46,"tag":499,"props":819,"children":820},{"style":557},[821],{"type":52,"value":822}," {\n",{"type":46,"tag":499,"props":824,"children":826},{"class":501,"line":825},3,[827,832,837,841,845,849,854,858],{"type":46,"tag":499,"props":828,"children":829},{"style":557},[830],{"type":52,"value":831},"    \"",{"type":46,"tag":499,"props":833,"children":834},{"style":506},[835],{"type":52,"value":836},"globals",{"type":46,"tag":499,"props":838,"children":839},{"style":557},[840],{"type":52,"value":591},{"type":46,"tag":499,"props":842,"children":843},{"style":557},[844],{"type":52,"value":172},{"type":46,"tag":499,"props":846,"children":847},{"style":557},[848],{"type":52,"value":581},{"type":46,"tag":499,"props":850,"children":851},{"style":512},[852],{"type":52,"value":853},".\u002Fsrc\u002Fglobals.ts",{"type":46,"tag":499,"props":855,"children":856},{"style":557},[857],{"type":52,"value":591},{"type":46,"tag":499,"props":859,"children":860},{"style":557},[861],{"type":52,"value":862},",\n",{"type":46,"tag":499,"props":864,"children":866},{"class":501,"line":865},4,[867,871,876,880,884],{"type":46,"tag":499,"props":868,"children":869},{"style":557},[870],{"type":52,"value":831},{"type":46,"tag":499,"props":872,"children":873},{"style":506},[874],{"type":52,"value":875},"renderer",{"type":46,"tag":499,"props":877,"children":878},{"style":557},[879],{"type":52,"value":591},{"type":46,"tag":499,"props":881,"children":882},{"style":557},[883],{"type":52,"value":172},{"type":46,"tag":499,"props":885,"children":886},{"style":557},[887],{"type":52,"value":822},{"type":46,"tag":499,"props":889,"children":891},{"class":501,"line":890},5,[892,897,903,907,911,915,920],{"type":46,"tag":499,"props":893,"children":894},{"style":557},[895],{"type":52,"value":896},"      \"",{"type":46,"tag":499,"props":898,"children":900},{"style":899},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[901],{"type":52,"value":902},"server",{"type":46,"tag":499,"props":904,"children":905},{"style":557},[906],{"type":52,"value":591},{"type":46,"tag":499,"props":908,"children":909},{"style":557},[910],{"type":52,"value":172},{"type":46,"tag":499,"props":912,"children":913},{"style":557},[914],{"type":52,"value":581},{"type":46,"tag":499,"props":916,"children":917},{"style":512},[918],{"type":52,"value":919},"@webflow\u002Fstyled-components-utils\u002Fserver",{"type":46,"tag":499,"props":921,"children":922},{"style":557},[923],{"type":52,"value":924},"\"\n",{"type":46,"tag":499,"props":926,"children":928},{"class":501,"line":927},6,[929],{"type":46,"tag":499,"props":930,"children":931},{"style":557},[932],{"type":52,"value":933},"    }\n",{"type":46,"tag":499,"props":935,"children":937},{"class":501,"line":936},7,[938],{"type":46,"tag":499,"props":939,"children":940},{"style":557},[941],{"type":52,"value":942},"  }\n",{"type":46,"tag":499,"props":944,"children":946},{"class":501,"line":945},8,[947],{"type":46,"tag":499,"props":948,"children":949},{"style":557},[950],{"type":52,"value":951},"}\n",{"type":46,"tag":479,"props":953,"children":954},{},[],{"type":52,"value":956},"Emotion:",{"type":46,"tag":488,"props":958,"children":960},{"className":782,"code":959,"language":784,"meta":493,"style":493},"{\n  \"library\": {\n    \"globals\": \".\u002Fsrc\u002Fglobals.ts\",\n    \"renderer\": {\n      \"server\": \"@webflow\u002Femotion-utils\u002Fserver\"\n    }\n  }\n}\n",[961],{"type":46,"tag":61,"props":962,"children":963},{"__ignoreMap":493},[964,971,994,1029,1052,1084,1091,1098],{"type":46,"tag":499,"props":965,"children":966},{"class":501,"line":502},[967],{"type":46,"tag":499,"props":968,"children":969},{"style":557},[970],{"type":52,"value":796},{"type":46,"tag":499,"props":972,"children":973},{"class":501,"line":599},[974,978,982,986,990],{"type":46,"tag":499,"props":975,"children":976},{"style":557},[977],{"type":52,"value":804},{"type":46,"tag":499,"props":979,"children":980},{"style":608},[981],{"type":52,"value":809},{"type":46,"tag":499,"props":983,"children":984},{"style":557},[985],{"type":52,"value":591},{"type":46,"tag":499,"props":987,"children":988},{"style":557},[989],{"type":52,"value":172},{"type":46,"tag":499,"props":991,"children":992},{"style":557},[993],{"type":52,"value":822},{"type":46,"tag":499,"props":995,"children":996},{"class":501,"line":825},[997,1001,1005,1009,1013,1017,1021,1025],{"type":46,"tag":499,"props":998,"children":999},{"style":557},[1000],{"type":52,"value":831},{"type":46,"tag":499,"props":1002,"children":1003},{"style":506},[1004],{"type":52,"value":836},{"type":46,"tag":499,"props":1006,"children":1007},{"style":557},[1008],{"type":52,"value":591},{"type":46,"tag":499,"props":1010,"children":1011},{"style":557},[1012],{"type":52,"value":172},{"type":46,"tag":499,"props":1014,"children":1015},{"style":557},[1016],{"type":52,"value":581},{"type":46,"tag":499,"props":1018,"children":1019},{"style":512},[1020],{"type":52,"value":853},{"type":46,"tag":499,"props":1022,"children":1023},{"style":557},[1024],{"type":52,"value":591},{"type":46,"tag":499,"props":1026,"children":1027},{"style":557},[1028],{"type":52,"value":862},{"type":46,"tag":499,"props":1030,"children":1031},{"class":501,"line":865},[1032,1036,1040,1044,1048],{"type":46,"tag":499,"props":1033,"children":1034},{"style":557},[1035],{"type":52,"value":831},{"type":46,"tag":499,"props":1037,"children":1038},{"style":506},[1039],{"type":52,"value":875},{"type":46,"tag":499,"props":1041,"children":1042},{"style":557},[1043],{"type":52,"value":591},{"type":46,"tag":499,"props":1045,"children":1046},{"style":557},[1047],{"type":52,"value":172},{"type":46,"tag":499,"props":1049,"children":1050},{"style":557},[1051],{"type":52,"value":822},{"type":46,"tag":499,"props":1053,"children":1054},{"class":501,"line":890},[1055,1059,1063,1067,1071,1075,1080],{"type":46,"tag":499,"props":1056,"children":1057},{"style":557},[1058],{"type":52,"value":896},{"type":46,"tag":499,"props":1060,"children":1061},{"style":899},[1062],{"type":52,"value":902},{"type":46,"tag":499,"props":1064,"children":1065},{"style":557},[1066],{"type":52,"value":591},{"type":46,"tag":499,"props":1068,"children":1069},{"style":557},[1070],{"type":52,"value":172},{"type":46,"tag":499,"props":1072,"children":1073},{"style":557},[1074],{"type":52,"value":581},{"type":46,"tag":499,"props":1076,"children":1077},{"style":512},[1078],{"type":52,"value":1079},"@webflow\u002Femotion-utils\u002Fserver",{"type":46,"tag":499,"props":1081,"children":1082},{"style":557},[1083],{"type":52,"value":924},{"type":46,"tag":499,"props":1085,"children":1086},{"class":501,"line":927},[1087],{"type":46,"tag":499,"props":1088,"children":1089},{"style":557},[1090],{"type":52,"value":933},{"type":46,"tag":499,"props":1092,"children":1093},{"class":501,"line":936},[1094],{"type":46,"tag":499,"props":1095,"children":1096},{"style":557},[1097],{"type":52,"value":942},{"type":46,"tag":499,"props":1099,"children":1100},{"class":501,"line":945},[1101],{"type":46,"tag":499,"props":1102,"children":1103},{"style":557},[1104],{"type":52,"value":951},{"type":46,"tag":90,"props":1106,"children":1107},{},[1108,1113,1115],{"type":46,"tag":80,"props":1109,"children":1110},{},[1111],{"type":52,"value":1112},"Flag any dependencies",{"type":52,"value":1114}," that might cause issues:",{"type":46,"tag":86,"props":1116,"children":1117},{},[1118,1123,1128],{"type":46,"tag":90,"props":1119,"children":1120},{},[1121],{"type":52,"value":1122},"Large libraries (bundle size concern)",{"type":46,"tag":90,"props":1124,"children":1125},{},[1126],{"type":52,"value":1127},"Browser-only libraries",{"type":46,"tag":90,"props":1129,"children":1130},{},[1131],{"type":52,"value":1132},"Libraries that manipulate DOM directly",{"type":46,"tag":143,"props":1134,"children":1136},{"id":1135},"phase-2-map-props-to-webflow-types",[1137],{"type":52,"value":1138},"Phase 2: Map Props to Webflow Types",{"type":46,"tag":150,"props":1140,"children":1141},{"start":927},[1142,1605],{"type":46,"tag":90,"props":1143,"children":1144},{},[1145,1150,1151],{"type":46,"tag":80,"props":1146,"children":1147},{},[1148],{"type":52,"value":1149},"Apply TypeScript → Webflow prop type mapping",{"type":52,"value":172},{"type":46,"tag":217,"props":1152,"children":1153},{},[1154,1175],{"type":46,"tag":221,"props":1155,"children":1156},{},[1157],{"type":46,"tag":225,"props":1158,"children":1159},{},[1160,1165,1170],{"type":46,"tag":229,"props":1161,"children":1162},{},[1163],{"type":52,"value":1164},"TypeScript Type",{"type":46,"tag":229,"props":1166,"children":1167},{},[1168],{"type":52,"value":1169},"Webflow Prop",{"type":46,"tag":229,"props":1171,"children":1172},{},[1173],{"type":52,"value":1174},"Notes",{"type":46,"tag":245,"props":1176,"children":1177},{},[1178,1204,1231,1264,1290,1316,1350,1382,1431,1453,1488,1515,1542,1563,1584],{"type":46,"tag":225,"props":1179,"children":1180},{},[1181,1190,1199],{"type":46,"tag":252,"props":1182,"children":1183},{},[1184],{"type":46,"tag":61,"props":1185,"children":1187},{"className":1186},[],[1188],{"type":52,"value":1189},"string",{"type":46,"tag":252,"props":1191,"children":1192},{},[1193],{"type":46,"tag":61,"props":1194,"children":1196},{"className":1195},[],[1197],{"type":52,"value":1198},"props.Text()",{"type":46,"tag":252,"props":1200,"children":1201},{},[1202],{"type":52,"value":1203},"Default for short text",{"type":46,"tag":225,"props":1205,"children":1206},{},[1207,1217,1226],{"type":46,"tag":252,"props":1208,"children":1209},{},[1210,1215],{"type":46,"tag":61,"props":1211,"children":1213},{"className":1212},[],[1214],{"type":52,"value":1189},{"type":52,"value":1216}," (long\u002FHTML content)",{"type":46,"tag":252,"props":1218,"children":1219},{},[1220],{"type":46,"tag":61,"props":1221,"children":1223},{"className":1222},[],[1224],{"type":52,"value":1225},"props.RichText()",{"type":46,"tag":252,"props":1227,"children":1228},{},[1229],{"type":52,"value":1230},"If prop name suggests content\u002Fbody\u002Fdescription",{"type":46,"tag":225,"props":1232,"children":1233},{},[1234,1250,1259],{"type":46,"tag":252,"props":1235,"children":1236},{},[1237,1243,1245],{"type":46,"tag":61,"props":1238,"children":1240},{"className":1239},[],[1241],{"type":52,"value":1242},"React.ReactNode",{"type":52,"value":1244}," \u002F ",{"type":46,"tag":61,"props":1246,"children":1248},{"className":1247},[],[1249],{"type":52,"value":206},{"type":46,"tag":252,"props":1251,"children":1252},{},[1253],{"type":46,"tag":61,"props":1254,"children":1256},{"className":1255},[],[1257],{"type":52,"value":1258},"props.Slot()",{"type":46,"tag":252,"props":1260,"children":1261},{},[1262],{"type":52,"value":1263},"For nested content",{"type":46,"tag":225,"props":1265,"children":1266},{},[1267,1276,1285],{"type":46,"tag":252,"props":1268,"children":1269},{},[1270],{"type":46,"tag":61,"props":1271,"children":1273},{"className":1272},[],[1274],{"type":52,"value":1275},"number",{"type":46,"tag":252,"props":1277,"children":1278},{},[1279],{"type":46,"tag":61,"props":1280,"children":1282},{"className":1281},[],[1283],{"type":52,"value":1284},"props.Number()",{"type":46,"tag":252,"props":1286,"children":1287},{},[1288],{"type":52,"value":1289},"Numeric values",{"type":46,"tag":225,"props":1291,"children":1292},{},[1293,1302,1311],{"type":46,"tag":252,"props":1294,"children":1295},{},[1296],{"type":46,"tag":61,"props":1297,"children":1299},{"className":1298},[],[1300],{"type":52,"value":1301},"boolean",{"type":46,"tag":252,"props":1303,"children":1304},{},[1305],{"type":46,"tag":61,"props":1306,"children":1308},{"className":1307},[],[1309],{"type":52,"value":1310},"props.Boolean()",{"type":46,"tag":252,"props":1312,"children":1313},{},[1314],{"type":52,"value":1315},"Toggles",{"type":46,"tag":225,"props":1317,"children":1318},{},[1319,1328,1337],{"type":46,"tag":252,"props":1320,"children":1321},{},[1322],{"type":46,"tag":61,"props":1323,"children":1325},{"className":1324},[],[1326],{"type":52,"value":1327},"\"option1\" | \"option2\"",{"type":46,"tag":252,"props":1329,"children":1330},{},[1331],{"type":46,"tag":61,"props":1332,"children":1334},{"className":1333},[],[1335],{"type":52,"value":1336},"props.Variant()",{"type":46,"tag":252,"props":1338,"children":1339},{},[1340,1342,1348],{"type":52,"value":1341},"String literal unions (requires ",{"type":46,"tag":61,"props":1343,"children":1345},{"className":1344},[],[1346],{"type":52,"value":1347},"options",{"type":52,"value":1349}," array)",{"type":46,"tag":225,"props":1351,"children":1352},{},[1353,1362,1370],{"type":46,"tag":252,"props":1354,"children":1355},{},[1356],{"type":46,"tag":61,"props":1357,"children":1359},{"className":1358},[],[1360],{"type":52,"value":1361},"enum",{"type":46,"tag":252,"props":1363,"children":1364},{},[1365],{"type":46,"tag":61,"props":1366,"children":1368},{"className":1367},[],[1369],{"type":52,"value":1336},{"type":46,"tag":252,"props":1371,"children":1372},{},[1373,1375,1380],{"type":52,"value":1374},"Convert enum values to ",{"type":46,"tag":61,"props":1376,"children":1378},{"className":1377},[],[1379],{"type":52,"value":1347},{"type":52,"value":1381}," array (required)",{"type":46,"tag":225,"props":1383,"children":1384},{},[1385,1394,1403],{"type":46,"tag":252,"props":1386,"children":1387},{},[1388],{"type":46,"tag":61,"props":1389,"children":1391},{"className":1390},[],[1392],{"type":52,"value":1393},"{ href: string; ... }",{"type":46,"tag":252,"props":1395,"children":1396},{},[1397],{"type":46,"tag":61,"props":1398,"children":1400},{"className":1399},[],[1401],{"type":52,"value":1402},"props.Link()",{"type":46,"tag":252,"props":1404,"children":1405},{},[1406,1408,1414,1416,1422,1423,1429],{"type":52,"value":1407},"Returns ",{"type":46,"tag":61,"props":1409,"children":1411},{"className":1410},[],[1412],{"type":52,"value":1413},"{ href, target?, preload? }",{"type":52,"value":1415}," object — may need wrapper if component expects separate ",{"type":46,"tag":61,"props":1417,"children":1419},{"className":1418},[],[1420],{"type":52,"value":1421},"href",{"type":52,"value":280},{"type":46,"tag":61,"props":1424,"children":1426},{"className":1425},[],[1427],{"type":52,"value":1428},"target",{"type":52,"value":1430}," props",{"type":46,"tag":225,"props":1432,"children":1433},{},[1434,1439,1448],{"type":46,"tag":252,"props":1435,"children":1436},{},[1437],{"type":52,"value":1438},"Image-related types",{"type":46,"tag":252,"props":1440,"children":1441},{},[1442],{"type":46,"tag":61,"props":1443,"children":1445},{"className":1444},[],[1446],{"type":52,"value":1447},"props.Image()",{"type":46,"tag":252,"props":1449,"children":1450},{},[1451],{"type":52,"value":1452},"Image src, url, etc.",{"type":46,"tag":225,"props":1454,"children":1455},{},[1456,1466,1475],{"type":46,"tag":252,"props":1457,"children":1458},{},[1459,1464],{"type":46,"tag":61,"props":1460,"children":1462},{"className":1461},[],[1463],{"type":52,"value":1189},{"type":52,"value":1465}," (canvas-editable text)",{"type":46,"tag":252,"props":1467,"children":1468},{},[1469],{"type":46,"tag":61,"props":1470,"children":1472},{"className":1471},[],[1473],{"type":52,"value":1474},"props.TextNode()",{"type":46,"tag":252,"props":1476,"children":1477},{},[1478,1480,1486],{"type":52,"value":1479},"For text editable directly on canvas; has ",{"type":46,"tag":61,"props":1481,"children":1483},{"className":1482},[],[1484],{"type":52,"value":1485},"multiline",{"type":52,"value":1487}," param",{"type":46,"tag":225,"props":1489,"children":1490},{},[1491,1501,1510],{"type":46,"tag":252,"props":1492,"children":1493},{},[1494,1499],{"type":46,"tag":61,"props":1495,"children":1497},{"className":1496},[],[1498],{"type":52,"value":1301},{"type":52,"value":1500}," (show\u002Fhide)",{"type":46,"tag":252,"props":1502,"children":1503},{},[1504],{"type":46,"tag":61,"props":1505,"children":1507},{"className":1506},[],[1508],{"type":52,"value":1509},"props.Visibility()",{"type":46,"tag":252,"props":1511,"children":1512},{},[1513],{"type":52,"value":1514},"Semantic show\u002Fhide toggle",{"type":46,"tag":225,"props":1516,"children":1517},{},[1518,1528,1537],{"type":46,"tag":252,"props":1519,"children":1520},{},[1521,1526],{"type":46,"tag":61,"props":1522,"children":1524},{"className":1523},[],[1525],{"type":52,"value":1189},{"type":52,"value":1527}," (for HTML id)",{"type":46,"tag":252,"props":1529,"children":1530},{},[1531],{"type":46,"tag":61,"props":1532,"children":1534},{"className":1533},[],[1535],{"type":52,"value":1536},"props.Id()",{"type":46,"tag":252,"props":1538,"children":1539},{},[1540],{"type":52,"value":1541},"If prop is named \"id\" or used for accessibility",{"type":46,"tag":225,"props":1543,"children":1544},{},[1545,1550,1558],{"type":46,"tag":252,"props":1546,"children":1547},{},[1548],{"type":52,"value":1549},"Complex objects",{"type":46,"tag":252,"props":1551,"children":1552},{},[1553],{"type":46,"tag":80,"props":1554,"children":1555},{},[1556],{"type":52,"value":1557},"SPLIT",{"type":46,"tag":252,"props":1559,"children":1560},{},[1561],{"type":52,"value":1562},"Break into multiple simple props",{"type":46,"tag":225,"props":1564,"children":1565},{},[1566,1571,1579],{"type":46,"tag":252,"props":1567,"children":1568},{},[1569],{"type":52,"value":1570},"Functions\u002Fcallbacks",{"type":46,"tag":252,"props":1572,"children":1573},{},[1574],{"type":46,"tag":80,"props":1575,"children":1576},{},[1577],{"type":52,"value":1578},"REMOVE",{"type":46,"tag":252,"props":1580,"children":1581},{},[1582],{"type":52,"value":1583},"Not supported",{"type":46,"tag":225,"props":1585,"children":1586},{},[1587,1592,1600],{"type":46,"tag":252,"props":1588,"children":1589},{},[1590],{"type":52,"value":1591},"Arrays",{"type":46,"tag":252,"props":1593,"children":1594},{},[1595],{"type":46,"tag":80,"props":1596,"children":1597},{},[1598],{"type":52,"value":1599},"SPECIAL",{"type":46,"tag":252,"props":1601,"children":1602},{},[1603],{"type":52,"value":1604},"May need component redesign",{"type":46,"tag":90,"props":1606,"children":1607},{},[1608,1613,1614,1617,1621,1623,1996,1999,2004,2005,2340,2343,2348,2350],{"type":46,"tag":80,"props":1609,"children":1610},{},[1611],{"type":52,"value":1612},"Handle special cases",{"type":52,"value":172},{"type":46,"tag":479,"props":1615,"children":1616},{},[],{"type":46,"tag":80,"props":1618,"children":1619},{},[1620],{"type":52,"value":345},{"type":52,"value":1622}," - Break them down:",{"type":46,"tag":488,"props":1624,"children":1626},{"className":540,"code":1625,"language":19,"meta":493,"style":493},"\u002F\u002F Original\ninterface Props {\n  author: {\n    name: string;\n    avatar: string;\n    bio: string;\n  }\n}\n\n\u002F\u002F Converted to flat props\nprops: {\n  authorName: props.Text({ name: \"Author Name\" }),\n  authorAvatar: props.Image({ name: \"Author Avatar\" }),\n  authorBio: props.RichText({ name: \"Author Bio\" })\n}\n",[1627],{"type":46,"tag":61,"props":1628,"children":1629},{"__ignoreMap":493},[1630,1639,1656,1673,1694,1714,1734,1741,1748,1758,1767,1784,1857,1924,1988],{"type":46,"tag":499,"props":1631,"children":1632},{"class":501,"line":502},[1633],{"type":46,"tag":499,"props":1634,"children":1636},{"style":1635},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1637],{"type":52,"value":1638},"\u002F\u002F Original\n",{"type":46,"tag":499,"props":1640,"children":1641},{"class":501,"line":599},[1642,1647,1652],{"type":46,"tag":499,"props":1643,"children":1644},{"style":608},[1645],{"type":52,"value":1646},"interface",{"type":46,"tag":499,"props":1648,"children":1649},{"style":506},[1650],{"type":52,"value":1651}," Props",{"type":46,"tag":499,"props":1653,"children":1654},{"style":557},[1655],{"type":52,"value":822},{"type":46,"tag":499,"props":1657,"children":1658},{"class":501,"line":825},[1659,1665,1669],{"type":46,"tag":499,"props":1660,"children":1662},{"style":1661},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1663],{"type":52,"value":1664},"  author",{"type":46,"tag":499,"props":1666,"children":1667},{"style":557},[1668],{"type":52,"value":172},{"type":46,"tag":499,"props":1670,"children":1671},{"style":557},[1672],{"type":52,"value":822},{"type":46,"tag":499,"props":1674,"children":1675},{"class":501,"line":865},[1676,1681,1685,1690],{"type":46,"tag":499,"props":1677,"children":1678},{"style":1661},[1679],{"type":52,"value":1680},"    name",{"type":46,"tag":499,"props":1682,"children":1683},{"style":557},[1684],{"type":52,"value":172},{"type":46,"tag":499,"props":1686,"children":1687},{"style":506},[1688],{"type":52,"value":1689}," string",{"type":46,"tag":499,"props":1691,"children":1692},{"style":557},[1693],{"type":52,"value":596},{"type":46,"tag":499,"props":1695,"children":1696},{"class":501,"line":890},[1697,1702,1706,1710],{"type":46,"tag":499,"props":1698,"children":1699},{"style":1661},[1700],{"type":52,"value":1701},"    avatar",{"type":46,"tag":499,"props":1703,"children":1704},{"style":557},[1705],{"type":52,"value":172},{"type":46,"tag":499,"props":1707,"children":1708},{"style":506},[1709],{"type":52,"value":1689},{"type":46,"tag":499,"props":1711,"children":1712},{"style":557},[1713],{"type":52,"value":596},{"type":46,"tag":499,"props":1715,"children":1716},{"class":501,"line":927},[1717,1722,1726,1730],{"type":46,"tag":499,"props":1718,"children":1719},{"style":1661},[1720],{"type":52,"value":1721},"    bio",{"type":46,"tag":499,"props":1723,"children":1724},{"style":557},[1725],{"type":52,"value":172},{"type":46,"tag":499,"props":1727,"children":1728},{"style":506},[1729],{"type":52,"value":1689},{"type":46,"tag":499,"props":1731,"children":1732},{"style":557},[1733],{"type":52,"value":596},{"type":46,"tag":499,"props":1735,"children":1736},{"class":501,"line":936},[1737],{"type":46,"tag":499,"props":1738,"children":1739},{"style":557},[1740],{"type":52,"value":942},{"type":46,"tag":499,"props":1742,"children":1743},{"class":501,"line":945},[1744],{"type":46,"tag":499,"props":1745,"children":1746},{"style":557},[1747],{"type":52,"value":951},{"type":46,"tag":499,"props":1749,"children":1751},{"class":501,"line":1750},9,[1752],{"type":46,"tag":499,"props":1753,"children":1755},{"emptyLinePlaceholder":1754},true,[1756],{"type":52,"value":1757},"\n",{"type":46,"tag":499,"props":1759,"children":1761},{"class":501,"line":1760},10,[1762],{"type":46,"tag":499,"props":1763,"children":1764},{"style":1635},[1765],{"type":52,"value":1766},"\u002F\u002F Converted to flat props\n",{"type":46,"tag":499,"props":1768,"children":1770},{"class":501,"line":1769},11,[1771,1776,1780],{"type":46,"tag":499,"props":1772,"children":1773},{"style":506},[1774],{"type":52,"value":1775},"props",{"type":46,"tag":499,"props":1777,"children":1778},{"style":557},[1779],{"type":52,"value":172},{"type":46,"tag":499,"props":1781,"children":1782},{"style":557},[1783],{"type":52,"value":822},{"type":46,"tag":499,"props":1785,"children":1787},{"class":501,"line":1786},12,[1788,1793,1797,1801,1806,1812,1817,1822,1827,1831,1835,1840,1844,1848,1853],{"type":46,"tag":499,"props":1789,"children":1790},{"style":506},[1791],{"type":52,"value":1792},"  authorName",{"type":46,"tag":499,"props":1794,"children":1795},{"style":557},[1796],{"type":52,"value":172},{"type":46,"tag":499,"props":1798,"children":1799},{"style":563},[1800],{"type":52,"value":1430},{"type":46,"tag":499,"props":1802,"children":1803},{"style":557},[1804],{"type":52,"value":1805},".",{"type":46,"tag":499,"props":1807,"children":1809},{"style":1808},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1810],{"type":52,"value":1811},"Text",{"type":46,"tag":499,"props":1813,"children":1814},{"style":1661},[1815],{"type":52,"value":1816},"(",{"type":46,"tag":499,"props":1818,"children":1819},{"style":557},[1820],{"type":52,"value":1821},"{",{"type":46,"tag":499,"props":1823,"children":1824},{"style":1661},[1825],{"type":52,"value":1826}," name",{"type":46,"tag":499,"props":1828,"children":1829},{"style":557},[1830],{"type":52,"value":172},{"type":46,"tag":499,"props":1832,"children":1833},{"style":557},[1834],{"type":52,"value":581},{"type":46,"tag":499,"props":1836,"children":1837},{"style":512},[1838],{"type":52,"value":1839},"Author Name",{"type":46,"tag":499,"props":1841,"children":1842},{"style":557},[1843],{"type":52,"value":591},{"type":46,"tag":499,"props":1845,"children":1846},{"style":557},[1847],{"type":52,"value":571},{"type":46,"tag":499,"props":1849,"children":1850},{"style":1661},[1851],{"type":52,"value":1852},")",{"type":46,"tag":499,"props":1854,"children":1855},{"style":557},[1856],{"type":52,"value":862},{"type":46,"tag":499,"props":1858,"children":1860},{"class":501,"line":1859},13,[1861,1866,1870,1874,1878,1883,1887,1891,1895,1899,1903,1908,1912,1916,1920],{"type":46,"tag":499,"props":1862,"children":1863},{"style":506},[1864],{"type":52,"value":1865},"  authorAvatar",{"type":46,"tag":499,"props":1867,"children":1868},{"style":557},[1869],{"type":52,"value":172},{"type":46,"tag":499,"props":1871,"children":1872},{"style":563},[1873],{"type":52,"value":1430},{"type":46,"tag":499,"props":1875,"children":1876},{"style":557},[1877],{"type":52,"value":1805},{"type":46,"tag":499,"props":1879,"children":1880},{"style":1808},[1881],{"type":52,"value":1882},"Image",{"type":46,"tag":499,"props":1884,"children":1885},{"style":1661},[1886],{"type":52,"value":1816},{"type":46,"tag":499,"props":1888,"children":1889},{"style":557},[1890],{"type":52,"value":1821},{"type":46,"tag":499,"props":1892,"children":1893},{"style":1661},[1894],{"type":52,"value":1826},{"type":46,"tag":499,"props":1896,"children":1897},{"style":557},[1898],{"type":52,"value":172},{"type":46,"tag":499,"props":1900,"children":1901},{"style":557},[1902],{"type":52,"value":581},{"type":46,"tag":499,"props":1904,"children":1905},{"style":512},[1906],{"type":52,"value":1907},"Author Avatar",{"type":46,"tag":499,"props":1909,"children":1910},{"style":557},[1911],{"type":52,"value":591},{"type":46,"tag":499,"props":1913,"children":1914},{"style":557},[1915],{"type":52,"value":571},{"type":46,"tag":499,"props":1917,"children":1918},{"style":1661},[1919],{"type":52,"value":1852},{"type":46,"tag":499,"props":1921,"children":1922},{"style":557},[1923],{"type":52,"value":862},{"type":46,"tag":499,"props":1925,"children":1927},{"class":501,"line":1926},14,[1928,1933,1937,1941,1945,1950,1954,1958,1962,1966,1970,1975,1979,1983],{"type":46,"tag":499,"props":1929,"children":1930},{"style":506},[1931],{"type":52,"value":1932},"  authorBio",{"type":46,"tag":499,"props":1934,"children":1935},{"style":557},[1936],{"type":52,"value":172},{"type":46,"tag":499,"props":1938,"children":1939},{"style":563},[1940],{"type":52,"value":1430},{"type":46,"tag":499,"props":1942,"children":1943},{"style":557},[1944],{"type":52,"value":1805},{"type":46,"tag":499,"props":1946,"children":1947},{"style":1808},[1948],{"type":52,"value":1949},"RichText",{"type":46,"tag":499,"props":1951,"children":1952},{"style":1661},[1953],{"type":52,"value":1816},{"type":46,"tag":499,"props":1955,"children":1956},{"style":557},[1957],{"type":52,"value":1821},{"type":46,"tag":499,"props":1959,"children":1960},{"style":1661},[1961],{"type":52,"value":1826},{"type":46,"tag":499,"props":1963,"children":1964},{"style":557},[1965],{"type":52,"value":172},{"type":46,"tag":499,"props":1967,"children":1968},{"style":557},[1969],{"type":52,"value":581},{"type":46,"tag":499,"props":1971,"children":1972},{"style":512},[1973],{"type":52,"value":1974},"Author Bio",{"type":46,"tag":499,"props":1976,"children":1977},{"style":557},[1978],{"type":52,"value":591},{"type":46,"tag":499,"props":1980,"children":1981},{"style":557},[1982],{"type":52,"value":571},{"type":46,"tag":499,"props":1984,"children":1985},{"style":1661},[1986],{"type":52,"value":1987},")\n",{"type":46,"tag":499,"props":1989,"children":1991},{"class":501,"line":1990},15,[1992],{"type":46,"tag":499,"props":1993,"children":1994},{"style":557},[1995],{"type":52,"value":951},{"type":46,"tag":479,"props":1997,"children":1998},{},[],{"type":46,"tag":80,"props":2000,"children":2001},{},[2002],{"type":52,"value":2003},"Union types with more than simple strings",{"type":52,"value":172},{"type":46,"tag":488,"props":2006,"children":2008},{"className":540,"code":2007,"language":19,"meta":493,"style":493},"\u002F\u002F Original - complex union\ntype Size = \"sm\" | \"md\" | \"lg\" | { width: number; height: number };\n\n\u002F\u002F Convert to Variant with only string options\nsize: props.Variant({\n  name: \"Size\",\n  options: [\"sm\", \"md\", \"lg\", \"custom\"],\n  defaultValue: \"md\"\n})\n\u002F\u002F Note: Custom size would need additional Number props\n",[2009],{"type":46,"tag":61,"props":2010,"children":2011},{"__ignoreMap":493},[2012,2020,2131,2138,2146,2179,2208,2296,2320,2332],{"type":46,"tag":499,"props":2013,"children":2014},{"class":501,"line":502},[2015],{"type":46,"tag":499,"props":2016,"children":2017},{"style":1635},[2018],{"type":52,"value":2019},"\u002F\u002F Original - complex union\n",{"type":46,"tag":499,"props":2021,"children":2022},{"class":501,"line":599},[2023,2028,2033,2038,2042,2047,2051,2056,2060,2065,2069,2073,2077,2082,2086,2090,2094,2099,2103,2108,2113,2118,2122,2126],{"type":46,"tag":499,"props":2024,"children":2025},{"style":608},[2026],{"type":52,"value":2027},"type",{"type":46,"tag":499,"props":2029,"children":2030},{"style":506},[2031],{"type":52,"value":2032}," Size",{"type":46,"tag":499,"props":2034,"children":2035},{"style":557},[2036],{"type":52,"value":2037}," =",{"type":46,"tag":499,"props":2039,"children":2040},{"style":557},[2041],{"type":52,"value":581},{"type":46,"tag":499,"props":2043,"children":2044},{"style":512},[2045],{"type":52,"value":2046},"sm",{"type":46,"tag":499,"props":2048,"children":2049},{"style":557},[2050],{"type":52,"value":591},{"type":46,"tag":499,"props":2052,"children":2053},{"style":557},[2054],{"type":52,"value":2055}," |",{"type":46,"tag":499,"props":2057,"children":2058},{"style":557},[2059],{"type":52,"value":581},{"type":46,"tag":499,"props":2061,"children":2062},{"style":512},[2063],{"type":52,"value":2064},"md",{"type":46,"tag":499,"props":2066,"children":2067},{"style":557},[2068],{"type":52,"value":591},{"type":46,"tag":499,"props":2070,"children":2071},{"style":557},[2072],{"type":52,"value":2055},{"type":46,"tag":499,"props":2074,"children":2075},{"style":557},[2076],{"type":52,"value":581},{"type":46,"tag":499,"props":2078,"children":2079},{"style":512},[2080],{"type":52,"value":2081},"lg",{"type":46,"tag":499,"props":2083,"children":2084},{"style":557},[2085],{"type":52,"value":591},{"type":46,"tag":499,"props":2087,"children":2088},{"style":557},[2089],{"type":52,"value":2055},{"type":46,"tag":499,"props":2091,"children":2092},{"style":557},[2093],{"type":52,"value":560},{"type":46,"tag":499,"props":2095,"children":2096},{"style":1661},[2097],{"type":52,"value":2098}," width",{"type":46,"tag":499,"props":2100,"children":2101},{"style":557},[2102],{"type":52,"value":172},{"type":46,"tag":499,"props":2104,"children":2105},{"style":506},[2106],{"type":52,"value":2107}," number",{"type":46,"tag":499,"props":2109,"children":2110},{"style":557},[2111],{"type":52,"value":2112},";",{"type":46,"tag":499,"props":2114,"children":2115},{"style":1661},[2116],{"type":52,"value":2117}," height",{"type":46,"tag":499,"props":2119,"children":2120},{"style":557},[2121],{"type":52,"value":172},{"type":46,"tag":499,"props":2123,"children":2124},{"style":506},[2125],{"type":52,"value":2107},{"type":46,"tag":499,"props":2127,"children":2128},{"style":557},[2129],{"type":52,"value":2130}," };\n",{"type":46,"tag":499,"props":2132,"children":2133},{"class":501,"line":825},[2134],{"type":46,"tag":499,"props":2135,"children":2136},{"emptyLinePlaceholder":1754},[2137],{"type":52,"value":1757},{"type":46,"tag":499,"props":2139,"children":2140},{"class":501,"line":865},[2141],{"type":46,"tag":499,"props":2142,"children":2143},{"style":1635},[2144],{"type":52,"value":2145},"\u002F\u002F Convert to Variant with only string options\n",{"type":46,"tag":499,"props":2147,"children":2148},{"class":501,"line":890},[2149,2154,2158,2162,2166,2171,2175],{"type":46,"tag":499,"props":2150,"children":2151},{"style":506},[2152],{"type":52,"value":2153},"size",{"type":46,"tag":499,"props":2155,"children":2156},{"style":557},[2157],{"type":52,"value":172},{"type":46,"tag":499,"props":2159,"children":2160},{"style":563},[2161],{"type":52,"value":1430},{"type":46,"tag":499,"props":2163,"children":2164},{"style":557},[2165],{"type":52,"value":1805},{"type":46,"tag":499,"props":2167,"children":2168},{"style":1808},[2169],{"type":52,"value":2170},"Variant",{"type":46,"tag":499,"props":2172,"children":2173},{"style":563},[2174],{"type":52,"value":1816},{"type":46,"tag":499,"props":2176,"children":2177},{"style":557},[2178],{"type":52,"value":796},{"type":46,"tag":499,"props":2180,"children":2181},{"class":501,"line":927},[2182,2187,2191,2195,2200,2204],{"type":46,"tag":499,"props":2183,"children":2184},{"style":1661},[2185],{"type":52,"value":2186},"  name",{"type":46,"tag":499,"props":2188,"children":2189},{"style":557},[2190],{"type":52,"value":172},{"type":46,"tag":499,"props":2192,"children":2193},{"style":557},[2194],{"type":52,"value":581},{"type":46,"tag":499,"props":2196,"children":2197},{"style":512},[2198],{"type":52,"value":2199},"Size",{"type":46,"tag":499,"props":2201,"children":2202},{"style":557},[2203],{"type":52,"value":591},{"type":46,"tag":499,"props":2205,"children":2206},{"style":557},[2207],{"type":52,"value":862},{"type":46,"tag":499,"props":2209,"children":2210},{"class":501,"line":936},[2211,2216,2220,2225,2229,2233,2237,2242,2246,2250,2254,2258,2262,2266,2270,2274,2278,2283,2287,2292],{"type":46,"tag":499,"props":2212,"children":2213},{"style":1661},[2214],{"type":52,"value":2215},"  options",{"type":46,"tag":499,"props":2217,"children":2218},{"style":557},[2219],{"type":52,"value":172},{"type":46,"tag":499,"props":2221,"children":2222},{"style":563},[2223],{"type":52,"value":2224}," [",{"type":46,"tag":499,"props":2226,"children":2227},{"style":557},[2228],{"type":52,"value":591},{"type":46,"tag":499,"props":2230,"children":2231},{"style":512},[2232],{"type":52,"value":2046},{"type":46,"tag":499,"props":2234,"children":2235},{"style":557},[2236],{"type":52,"value":591},{"type":46,"tag":499,"props":2238,"children":2239},{"style":557},[2240],{"type":52,"value":2241},",",{"type":46,"tag":499,"props":2243,"children":2244},{"style":557},[2245],{"type":52,"value":581},{"type":46,"tag":499,"props":2247,"children":2248},{"style":512},[2249],{"type":52,"value":2064},{"type":46,"tag":499,"props":2251,"children":2252},{"style":557},[2253],{"type":52,"value":591},{"type":46,"tag":499,"props":2255,"children":2256},{"style":557},[2257],{"type":52,"value":2241},{"type":46,"tag":499,"props":2259,"children":2260},{"style":557},[2261],{"type":52,"value":581},{"type":46,"tag":499,"props":2263,"children":2264},{"style":512},[2265],{"type":52,"value":2081},{"type":46,"tag":499,"props":2267,"children":2268},{"style":557},[2269],{"type":52,"value":591},{"type":46,"tag":499,"props":2271,"children":2272},{"style":557},[2273],{"type":52,"value":2241},{"type":46,"tag":499,"props":2275,"children":2276},{"style":557},[2277],{"type":52,"value":581},{"type":46,"tag":499,"props":2279,"children":2280},{"style":512},[2281],{"type":52,"value":2282},"custom",{"type":46,"tag":499,"props":2284,"children":2285},{"style":557},[2286],{"type":52,"value":591},{"type":46,"tag":499,"props":2288,"children":2289},{"style":563},[2290],{"type":52,"value":2291},"]",{"type":46,"tag":499,"props":2293,"children":2294},{"style":557},[2295],{"type":52,"value":862},{"type":46,"tag":499,"props":2297,"children":2298},{"class":501,"line":945},[2299,2304,2308,2312,2316],{"type":46,"tag":499,"props":2300,"children":2301},{"style":1661},[2302],{"type":52,"value":2303},"  defaultValue",{"type":46,"tag":499,"props":2305,"children":2306},{"style":557},[2307],{"type":52,"value":172},{"type":46,"tag":499,"props":2309,"children":2310},{"style":557},[2311],{"type":52,"value":581},{"type":46,"tag":499,"props":2313,"children":2314},{"style":512},[2315],{"type":52,"value":2064},{"type":46,"tag":499,"props":2317,"children":2318},{"style":557},[2319],{"type":52,"value":924},{"type":46,"tag":499,"props":2321,"children":2322},{"class":501,"line":1750},[2323,2328],{"type":46,"tag":499,"props":2324,"children":2325},{"style":557},[2326],{"type":52,"value":2327},"}",{"type":46,"tag":499,"props":2329,"children":2330},{"style":563},[2331],{"type":52,"value":1987},{"type":46,"tag":499,"props":2333,"children":2334},{"class":501,"line":1760},[2335],{"type":46,"tag":499,"props":2336,"children":2337},{"style":1635},[2338],{"type":52,"value":2339},"\u002F\u002F Note: Custom size would need additional Number props\n",{"type":46,"tag":479,"props":2341,"children":2342},{},[],{"type":46,"tag":80,"props":2344,"children":2345},{},[2346],{"type":52,"value":2347},"Optional props",{"type":52,"value":2349}," - Provide defaultValue for prop types that support it. Note: Link, Image, Slot, and Id do not accept defaultValue.",{"type":46,"tag":488,"props":2351,"children":2353},{"className":540,"code":2352,"language":19,"meta":493,"style":493},"\u002F\u002F Original\ninterface Props {\n  title?: string;\n}\n\n\u002F\u002F Converted - provide default for types that support it\ntitle: props.Text({\n  name: \"Title\",\n  defaultValue: \"\"  \u002F\u002F Empty string or sensible default\n})\n",[2354],{"type":46,"tag":61,"props":2355,"children":2356},{"__ignoreMap":493},[2357,2364,2379,2400,2407,2414,2422,2454,2482,2503],{"type":46,"tag":499,"props":2358,"children":2359},{"class":501,"line":502},[2360],{"type":46,"tag":499,"props":2361,"children":2362},{"style":1635},[2363],{"type":52,"value":1638},{"type":46,"tag":499,"props":2365,"children":2366},{"class":501,"line":599},[2367,2371,2375],{"type":46,"tag":499,"props":2368,"children":2369},{"style":608},[2370],{"type":52,"value":1646},{"type":46,"tag":499,"props":2372,"children":2373},{"style":506},[2374],{"type":52,"value":1651},{"type":46,"tag":499,"props":2376,"children":2377},{"style":557},[2378],{"type":52,"value":822},{"type":46,"tag":499,"props":2380,"children":2381},{"class":501,"line":825},[2382,2387,2392,2396],{"type":46,"tag":499,"props":2383,"children":2384},{"style":1661},[2385],{"type":52,"value":2386},"  title",{"type":46,"tag":499,"props":2388,"children":2389},{"style":557},[2390],{"type":52,"value":2391},"?:",{"type":46,"tag":499,"props":2393,"children":2394},{"style":506},[2395],{"type":52,"value":1689},{"type":46,"tag":499,"props":2397,"children":2398},{"style":557},[2399],{"type":52,"value":596},{"type":46,"tag":499,"props":2401,"children":2402},{"class":501,"line":865},[2403],{"type":46,"tag":499,"props":2404,"children":2405},{"style":557},[2406],{"type":52,"value":951},{"type":46,"tag":499,"props":2408,"children":2409},{"class":501,"line":890},[2410],{"type":46,"tag":499,"props":2411,"children":2412},{"emptyLinePlaceholder":1754},[2413],{"type":52,"value":1757},{"type":46,"tag":499,"props":2415,"children":2416},{"class":501,"line":927},[2417],{"type":46,"tag":499,"props":2418,"children":2419},{"style":1635},[2420],{"type":52,"value":2421},"\u002F\u002F Converted - provide default for types that support it\n",{"type":46,"tag":499,"props":2423,"children":2424},{"class":501,"line":936},[2425,2430,2434,2438,2442,2446,2450],{"type":46,"tag":499,"props":2426,"children":2427},{"style":506},[2428],{"type":52,"value":2429},"title",{"type":46,"tag":499,"props":2431,"children":2432},{"style":557},[2433],{"type":52,"value":172},{"type":46,"tag":499,"props":2435,"children":2436},{"style":563},[2437],{"type":52,"value":1430},{"type":46,"tag":499,"props":2439,"children":2440},{"style":557},[2441],{"type":52,"value":1805},{"type":46,"tag":499,"props":2443,"children":2444},{"style":1808},[2445],{"type":52,"value":1811},{"type":46,"tag":499,"props":2447,"children":2448},{"style":563},[2449],{"type":52,"value":1816},{"type":46,"tag":499,"props":2451,"children":2452},{"style":557},[2453],{"type":52,"value":796},{"type":46,"tag":499,"props":2455,"children":2456},{"class":501,"line":945},[2457,2461,2465,2469,2474,2478],{"type":46,"tag":499,"props":2458,"children":2459},{"style":1661},[2460],{"type":52,"value":2186},{"type":46,"tag":499,"props":2462,"children":2463},{"style":557},[2464],{"type":52,"value":172},{"type":46,"tag":499,"props":2466,"children":2467},{"style":557},[2468],{"type":52,"value":581},{"type":46,"tag":499,"props":2470,"children":2471},{"style":512},[2472],{"type":52,"value":2473},"Title",{"type":46,"tag":499,"props":2475,"children":2476},{"style":557},[2477],{"type":52,"value":591},{"type":46,"tag":499,"props":2479,"children":2480},{"style":557},[2481],{"type":52,"value":862},{"type":46,"tag":499,"props":2483,"children":2484},{"class":501,"line":1750},[2485,2489,2493,2498],{"type":46,"tag":499,"props":2486,"children":2487},{"style":1661},[2488],{"type":52,"value":2303},{"type":46,"tag":499,"props":2490,"children":2491},{"style":557},[2492],{"type":52,"value":172},{"type":46,"tag":499,"props":2494,"children":2495},{"style":557},[2496],{"type":52,"value":2497}," \"\"",{"type":46,"tag":499,"props":2499,"children":2500},{"style":1635},[2501],{"type":52,"value":2502},"  \u002F\u002F Empty string or sensible default\n",{"type":46,"tag":499,"props":2504,"children":2505},{"class":501,"line":1760},[2506,2510],{"type":46,"tag":499,"props":2507,"children":2508},{"style":557},[2509],{"type":52,"value":2327},{"type":46,"tag":499,"props":2511,"children":2512},{"style":563},[2513],{"type":52,"value":1987},{"type":46,"tag":143,"props":2515,"children":2517},{"id":2516},"phase-3-check-project-setup",[2518],{"type":52,"value":2519},"Phase 3: Check Project Setup",{"type":46,"tag":150,"props":2521,"children":2522},{"start":945},[2523,2562],{"type":46,"tag":90,"props":2524,"children":2525},{},[2526,2531,2532],{"type":46,"tag":80,"props":2527,"children":2528},{},[2529],{"type":52,"value":2530},"Verify Webflow setup exists",{"type":52,"value":172},{"type":46,"tag":86,"props":2533,"children":2534},{},[2535,2547,2552,2557],{"type":46,"tag":90,"props":2536,"children":2537},{},[2538,2540,2545],{"type":52,"value":2539},"Check for ",{"type":46,"tag":61,"props":2541,"children":2543},{"className":2542},[],[2544],{"type":52,"value":773},{"type":52,"value":2546}," in project root",{"type":46,"tag":90,"props":2548,"children":2549},{},[2550],{"type":52,"value":2551},"Check for required dependencies (@webflow\u002Fwebflow-cli, @webflow\u002Fdata-types, @webflow\u002Freact)",{"type":46,"tag":90,"props":2553,"children":2554},{},[2555],{"type":52,"value":2556},"If using styled-components\u002FEmotion, check for decorator packages",{"type":46,"tag":90,"props":2558,"children":2559},{},[2560],{"type":52,"value":2561},"If missing, offer to set up or direct to local-dev-setup skill",{"type":46,"tag":90,"props":2563,"children":2564},{},[2565,2570,2571],{"type":46,"tag":80,"props":2566,"children":2567},{},[2568],{"type":52,"value":2569},"Determine file locations",{"type":52,"value":172},{"type":46,"tag":86,"props":2572,"children":2573},{},[2574,2579,2591],{"type":46,"tag":90,"props":2575,"children":2576},{},[2577],{"type":52,"value":2578},"Identify where the original component lives",{"type":46,"tag":90,"props":2580,"children":2581},{},[2582,2584,2589],{"type":52,"value":2583},"Determine where ",{"type":46,"tag":61,"props":2585,"children":2587},{"className":2586},[],[2588],{"type":52,"value":66},{"type":52,"value":2590}," should be created (same directory)",{"type":46,"tag":90,"props":2592,"children":2593},{},[2594],{"type":52,"value":2595},"Check for existing styles that need to be imported",{"type":46,"tag":143,"props":2597,"children":2599},{"id":2598},"phase-4-generate-definition-file",[2600],{"type":52,"value":2601},"Phase 4: Generate Definition File",{"type":46,"tag":150,"props":2603,"children":2604},{"start":1760},[2605],{"type":46,"tag":90,"props":2606,"children":2607},{},[2608,2620],{"type":46,"tag":80,"props":2609,"children":2610},{},[2611,2613,2618],{"type":52,"value":2612},"Create the ",{"type":46,"tag":61,"props":2614,"children":2616},{"className":2615},[],[2617],{"type":52,"value":66},{"type":52,"value":2619}," file",{"type":52,"value":172},{"type":46,"tag":488,"props":2622,"children":2624},{"className":540,"code":2623,"language":19,"meta":493,"style":493},"import { declareComponent } from \"@webflow\u002Freact\";\nimport { props } from \"@webflow\u002Fdata-types\";\nimport { ComponentName } from \".\u002FComponentName\";\n\u002F\u002F Import styles if they exist\nimport \".\u002FComponentName.module.css\"; \u002F\u002F or .css\n\nexport default declareComponent(ComponentName, {\n  name: \"ComponentName\",\n  description: \"[Generated from component purpose]\",\n  group: \"[Appropriate category]\",\n  props: {\n    \u002F\u002F Mapped props here\n  },\n  \u002F\u002F decorators: [], \u002F\u002F Optional — per-component decorators (e.g., for CSS-in-JS Shadow DOM support)\n  options: {\n    applyTagSelectors: true, \u002F\u002F Default is false. Set to true to apply Webflow's tag selectors (e.g., h1, p styles) inside the component.\n    ssr: true \u002F\u002F or false if browser APIs detected\n  }\n});\n",[2625],{"type":46,"tag":61,"props":2626,"children":2627},{"__ignoreMap":493},[2628,2669,2709,2750,2758,2787,2794,2823,2851,2880,2909,2925,2933,2941,2954,2969,2997,3018,3026],{"type":46,"tag":499,"props":2629,"children":2630},{"class":501,"line":502},[2631,2635,2639,2644,2648,2652,2656,2661,2665],{"type":46,"tag":499,"props":2632,"children":2633},{"style":551},[2634],{"type":52,"value":554},{"type":46,"tag":499,"props":2636,"children":2637},{"style":557},[2638],{"type":52,"value":560},{"type":46,"tag":499,"props":2640,"children":2641},{"style":563},[2642],{"type":52,"value":2643}," declareComponent",{"type":46,"tag":499,"props":2645,"children":2646},{"style":557},[2647],{"type":52,"value":571},{"type":46,"tag":499,"props":2649,"children":2650},{"style":551},[2651],{"type":52,"value":576},{"type":46,"tag":499,"props":2653,"children":2654},{"style":557},[2655],{"type":52,"value":581},{"type":46,"tag":499,"props":2657,"children":2658},{"style":512},[2659],{"type":52,"value":2660},"@webflow\u002Freact",{"type":46,"tag":499,"props":2662,"children":2663},{"style":557},[2664],{"type":52,"value":591},{"type":46,"tag":499,"props":2666,"children":2667},{"style":557},[2668],{"type":52,"value":596},{"type":46,"tag":499,"props":2670,"children":2671},{"class":501,"line":599},[2672,2676,2680,2684,2688,2692,2696,2701,2705],{"type":46,"tag":499,"props":2673,"children":2674},{"style":551},[2675],{"type":52,"value":554},{"type":46,"tag":499,"props":2677,"children":2678},{"style":557},[2679],{"type":52,"value":560},{"type":46,"tag":499,"props":2681,"children":2682},{"style":563},[2683],{"type":52,"value":1430},{"type":46,"tag":499,"props":2685,"children":2686},{"style":557},[2687],{"type":52,"value":571},{"type":46,"tag":499,"props":2689,"children":2690},{"style":551},[2691],{"type":52,"value":576},{"type":46,"tag":499,"props":2693,"children":2694},{"style":557},[2695],{"type":52,"value":581},{"type":46,"tag":499,"props":2697,"children":2698},{"style":512},[2699],{"type":52,"value":2700},"@webflow\u002Fdata-types",{"type":46,"tag":499,"props":2702,"children":2703},{"style":557},[2704],{"type":52,"value":591},{"type":46,"tag":499,"props":2706,"children":2707},{"style":557},[2708],{"type":52,"value":596},{"type":46,"tag":499,"props":2710,"children":2711},{"class":501,"line":825},[2712,2716,2720,2725,2729,2733,2737,2742,2746],{"type":46,"tag":499,"props":2713,"children":2714},{"style":551},[2715],{"type":52,"value":554},{"type":46,"tag":499,"props":2717,"children":2718},{"style":557},[2719],{"type":52,"value":560},{"type":46,"tag":499,"props":2721,"children":2722},{"style":563},[2723],{"type":52,"value":2724}," ComponentName",{"type":46,"tag":499,"props":2726,"children":2727},{"style":557},[2728],{"type":52,"value":571},{"type":46,"tag":499,"props":2730,"children":2731},{"style":551},[2732],{"type":52,"value":576},{"type":46,"tag":499,"props":2734,"children":2735},{"style":557},[2736],{"type":52,"value":581},{"type":46,"tag":499,"props":2738,"children":2739},{"style":512},[2740],{"type":52,"value":2741},".\u002FComponentName",{"type":46,"tag":499,"props":2743,"children":2744},{"style":557},[2745],{"type":52,"value":591},{"type":46,"tag":499,"props":2747,"children":2748},{"style":557},[2749],{"type":52,"value":596},{"type":46,"tag":499,"props":2751,"children":2752},{"class":501,"line":865},[2753],{"type":46,"tag":499,"props":2754,"children":2755},{"style":1635},[2756],{"type":52,"value":2757},"\u002F\u002F Import styles if they exist\n",{"type":46,"tag":499,"props":2759,"children":2760},{"class":501,"line":890},[2761,2765,2769,2774,2778,2782],{"type":46,"tag":499,"props":2762,"children":2763},{"style":551},[2764],{"type":52,"value":554},{"type":46,"tag":499,"props":2766,"children":2767},{"style":557},[2768],{"type":52,"value":581},{"type":46,"tag":499,"props":2770,"children":2771},{"style":512},[2772],{"type":52,"value":2773},".\u002FComponentName.module.css",{"type":46,"tag":499,"props":2775,"children":2776},{"style":557},[2777],{"type":52,"value":591},{"type":46,"tag":499,"props":2779,"children":2780},{"style":557},[2781],{"type":52,"value":2112},{"type":46,"tag":499,"props":2783,"children":2784},{"style":1635},[2785],{"type":52,"value":2786}," \u002F\u002F or .css\n",{"type":46,"tag":499,"props":2788,"children":2789},{"class":501,"line":927},[2790],{"type":46,"tag":499,"props":2791,"children":2792},{"emptyLinePlaceholder":1754},[2793],{"type":52,"value":1757},{"type":46,"tag":499,"props":2795,"children":2796},{"class":501,"line":936},[2797,2801,2806,2810,2815,2819],{"type":46,"tag":499,"props":2798,"children":2799},{"style":551},[2800],{"type":52,"value":605},{"type":46,"tag":499,"props":2802,"children":2803},{"style":551},[2804],{"type":52,"value":2805}," default",{"type":46,"tag":499,"props":2807,"children":2808},{"style":1808},[2809],{"type":52,"value":2643},{"type":46,"tag":499,"props":2811,"children":2812},{"style":563},[2813],{"type":52,"value":2814},"(ComponentName",{"type":46,"tag":499,"props":2816,"children":2817},{"style":557},[2818],{"type":52,"value":2241},{"type":46,"tag":499,"props":2820,"children":2821},{"style":557},[2822],{"type":52,"value":822},{"type":46,"tag":499,"props":2824,"children":2825},{"class":501,"line":945},[2826,2830,2834,2838,2843,2847],{"type":46,"tag":499,"props":2827,"children":2828},{"style":1661},[2829],{"type":52,"value":2186},{"type":46,"tag":499,"props":2831,"children":2832},{"style":557},[2833],{"type":52,"value":172},{"type":46,"tag":499,"props":2835,"children":2836},{"style":557},[2837],{"type":52,"value":581},{"type":46,"tag":499,"props":2839,"children":2840},{"style":512},[2841],{"type":52,"value":2842},"ComponentName",{"type":46,"tag":499,"props":2844,"children":2845},{"style":557},[2846],{"type":52,"value":591},{"type":46,"tag":499,"props":2848,"children":2849},{"style":557},[2850],{"type":52,"value":862},{"type":46,"tag":499,"props":2852,"children":2853},{"class":501,"line":1750},[2854,2859,2863,2867,2872,2876],{"type":46,"tag":499,"props":2855,"children":2856},{"style":1661},[2857],{"type":52,"value":2858},"  description",{"type":46,"tag":499,"props":2860,"children":2861},{"style":557},[2862],{"type":52,"value":172},{"type":46,"tag":499,"props":2864,"children":2865},{"style":557},[2866],{"type":52,"value":581},{"type":46,"tag":499,"props":2868,"children":2869},{"style":512},[2870],{"type":52,"value":2871},"[Generated from component purpose]",{"type":46,"tag":499,"props":2873,"children":2874},{"style":557},[2875],{"type":52,"value":591},{"type":46,"tag":499,"props":2877,"children":2878},{"style":557},[2879],{"type":52,"value":862},{"type":46,"tag":499,"props":2881,"children":2882},{"class":501,"line":1760},[2883,2888,2892,2896,2901,2905],{"type":46,"tag":499,"props":2884,"children":2885},{"style":1661},[2886],{"type":52,"value":2887},"  group",{"type":46,"tag":499,"props":2889,"children":2890},{"style":557},[2891],{"type":52,"value":172},{"type":46,"tag":499,"props":2893,"children":2894},{"style":557},[2895],{"type":52,"value":581},{"type":46,"tag":499,"props":2897,"children":2898},{"style":512},[2899],{"type":52,"value":2900},"[Appropriate category]",{"type":46,"tag":499,"props":2902,"children":2903},{"style":557},[2904],{"type":52,"value":591},{"type":46,"tag":499,"props":2906,"children":2907},{"style":557},[2908],{"type":52,"value":862},{"type":46,"tag":499,"props":2910,"children":2911},{"class":501,"line":1769},[2912,2917,2921],{"type":46,"tag":499,"props":2913,"children":2914},{"style":1661},[2915],{"type":52,"value":2916},"  props",{"type":46,"tag":499,"props":2918,"children":2919},{"style":557},[2920],{"type":52,"value":172},{"type":46,"tag":499,"props":2922,"children":2923},{"style":557},[2924],{"type":52,"value":822},{"type":46,"tag":499,"props":2926,"children":2927},{"class":501,"line":1786},[2928],{"type":46,"tag":499,"props":2929,"children":2930},{"style":1635},[2931],{"type":52,"value":2932},"    \u002F\u002F Mapped props here\n",{"type":46,"tag":499,"props":2934,"children":2935},{"class":501,"line":1859},[2936],{"type":46,"tag":499,"props":2937,"children":2938},{"style":557},[2939],{"type":52,"value":2940},"  },\n",{"type":46,"tag":499,"props":2942,"children":2943},{"class":501,"line":1926},[2944,2949],{"type":46,"tag":499,"props":2945,"children":2946},{"style":1635},[2947],{"type":52,"value":2948},"  \u002F\u002F decorators: [],",{"type":46,"tag":499,"props":2950,"children":2951},{"style":1635},[2952],{"type":52,"value":2953}," \u002F\u002F Optional — per-component decorators (e.g., for CSS-in-JS Shadow DOM support)\n",{"type":46,"tag":499,"props":2955,"children":2956},{"class":501,"line":1990},[2957,2961,2965],{"type":46,"tag":499,"props":2958,"children":2959},{"style":1661},[2960],{"type":52,"value":2215},{"type":46,"tag":499,"props":2962,"children":2963},{"style":557},[2964],{"type":52,"value":172},{"type":46,"tag":499,"props":2966,"children":2967},{"style":557},[2968],{"type":52,"value":822},{"type":46,"tag":499,"props":2970,"children":2972},{"class":501,"line":2971},16,[2973,2978,2982,2988,2992],{"type":46,"tag":499,"props":2974,"children":2975},{"style":1661},[2976],{"type":52,"value":2977},"    applyTagSelectors",{"type":46,"tag":499,"props":2979,"children":2980},{"style":557},[2981],{"type":52,"value":172},{"type":46,"tag":499,"props":2983,"children":2985},{"style":2984},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[2986],{"type":52,"value":2987}," true",{"type":46,"tag":499,"props":2989,"children":2990},{"style":557},[2991],{"type":52,"value":2241},{"type":46,"tag":499,"props":2993,"children":2994},{"style":1635},[2995],{"type":52,"value":2996}," \u002F\u002F Default is false. Set to true to apply Webflow's tag selectors (e.g., h1, p styles) inside the component.\n",{"type":46,"tag":499,"props":2998,"children":2999},{"class":501,"line":28},[3000,3005,3009,3013],{"type":46,"tag":499,"props":3001,"children":3002},{"style":1661},[3003],{"type":52,"value":3004},"    ssr",{"type":46,"tag":499,"props":3006,"children":3007},{"style":557},[3008],{"type":52,"value":172},{"type":46,"tag":499,"props":3010,"children":3011},{"style":2984},[3012],{"type":52,"value":2987},{"type":46,"tag":499,"props":3014,"children":3015},{"style":1635},[3016],{"type":52,"value":3017}," \u002F\u002F or false if browser APIs detected\n",{"type":46,"tag":499,"props":3019,"children":3021},{"class":501,"line":3020},18,[3022],{"type":46,"tag":499,"props":3023,"children":3024},{"style":557},[3025],{"type":52,"value":942},{"type":46,"tag":499,"props":3027,"children":3029},{"class":501,"line":3028},19,[3030,3034,3038],{"type":46,"tag":499,"props":3031,"children":3032},{"style":557},[3033],{"type":52,"value":2327},{"type":46,"tag":499,"props":3035,"children":3036},{"style":563},[3037],{"type":52,"value":1852},{"type":46,"tag":499,"props":3039,"children":3040},{"style":557},[3041],{"type":52,"value":596},{"type":46,"tag":150,"props":3043,"children":3044},{"start":1769},[3045],{"type":46,"tag":90,"props":3046,"children":3047},{},[3048,3053],{"type":46,"tag":80,"props":3049,"children":3050},{},[3051],{"type":52,"value":3052},"Provide the complete file",{"type":52,"value":3054}," with all props mapped",{"type":46,"tag":143,"props":3056,"children":3058},{"id":3057},"phase-5-document-required-changes",[3059],{"type":52,"value":3060},"Phase 5: Document Required Changes",{"type":46,"tag":150,"props":3062,"children":3063},{"start":1786},[3064],{"type":46,"tag":90,"props":3065,"children":3066},{},[3067,3072],{"type":46,"tag":80,"props":3068,"children":3069},{},[3070],{"type":52,"value":3071},"List modifications needed",{"type":52,"value":3073}," to the original component:",{"type":46,"tag":488,"props":3075,"children":3079},{"className":3076,"code":3077,"language":3078,"meta":493,"style":493},"language-markdown shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","## Required Changes to [ComponentName].tsx\n\n### Must Fix (Component won't work without these):\n- [ ] Issue 1: [Description and how to fix]\n- [ ] Issue 2: [Description and how to fix]\n\n### Recommended (Will improve Webflow integration):\n- [ ] Recommendation 1\n- [ ] Recommendation 2\n\n### Props Mapping Summary:\n| Original Prop | Webflow Prop | Notes |\n|---------------|--------------|-------|\n| title: string | props.Text() | Direct mapping |\n| isOpen: boolean | props.Boolean() | Direct mapping |\n| data: object | SPLIT → dataTitle, dataValue | Flattened |\n| onClick: function | REMOVED | Not supported |\n","markdown",[3080],{"type":46,"tag":61,"props":3081,"children":3082},{"__ignoreMap":493},[3083,3114,3121,3134,3147,3159,3166,3178,3190,3202,3209,3221,3257,3265,3299,3332,3366],{"type":46,"tag":499,"props":3084,"children":3085},{"class":501,"line":502},[3086,3091,3096,3101,3105,3109],{"type":46,"tag":499,"props":3087,"children":3088},{"style":557},[3089],{"type":52,"value":3090},"## ",{"type":46,"tag":499,"props":3092,"children":3093},{"style":506},[3094],{"type":52,"value":3095},"Required Changes to ",{"type":46,"tag":499,"props":3097,"children":3098},{"style":557},[3099],{"type":52,"value":3100},"[",{"type":46,"tag":499,"props":3102,"children":3103},{"style":512},[3104],{"type":52,"value":2842},{"type":46,"tag":499,"props":3106,"children":3107},{"style":557},[3108],{"type":52,"value":2291},{"type":46,"tag":499,"props":3110,"children":3111},{"style":506},[3112],{"type":52,"value":3113},".tsx\n",{"type":46,"tag":499,"props":3115,"children":3116},{"class":501,"line":599},[3117],{"type":46,"tag":499,"props":3118,"children":3119},{"emptyLinePlaceholder":1754},[3120],{"type":52,"value":1757},{"type":46,"tag":499,"props":3122,"children":3123},{"class":501,"line":825},[3124,3129],{"type":46,"tag":499,"props":3125,"children":3126},{"style":557},[3127],{"type":52,"value":3128},"### ",{"type":46,"tag":499,"props":3130,"children":3131},{"style":506},[3132],{"type":52,"value":3133},"Must Fix (Component won't work without these):\n",{"type":46,"tag":499,"props":3135,"children":3136},{"class":501,"line":865},[3137,3142],{"type":46,"tag":499,"props":3138,"children":3139},{"style":557},[3140],{"type":52,"value":3141},"-",{"type":46,"tag":499,"props":3143,"children":3144},{"style":563},[3145],{"type":52,"value":3146}," [ ] Issue 1: [Description and how to fix]\n",{"type":46,"tag":499,"props":3148,"children":3149},{"class":501,"line":890},[3150,3154],{"type":46,"tag":499,"props":3151,"children":3152},{"style":557},[3153],{"type":52,"value":3141},{"type":46,"tag":499,"props":3155,"children":3156},{"style":563},[3157],{"type":52,"value":3158}," [ ] Issue 2: [Description and how to fix]\n",{"type":46,"tag":499,"props":3160,"children":3161},{"class":501,"line":927},[3162],{"type":46,"tag":499,"props":3163,"children":3164},{"emptyLinePlaceholder":1754},[3165],{"type":52,"value":1757},{"type":46,"tag":499,"props":3167,"children":3168},{"class":501,"line":936},[3169,3173],{"type":46,"tag":499,"props":3170,"children":3171},{"style":557},[3172],{"type":52,"value":3128},{"type":46,"tag":499,"props":3174,"children":3175},{"style":506},[3176],{"type":52,"value":3177},"Recommended (Will improve Webflow integration):\n",{"type":46,"tag":499,"props":3179,"children":3180},{"class":501,"line":945},[3181,3185],{"type":46,"tag":499,"props":3182,"children":3183},{"style":557},[3184],{"type":52,"value":3141},{"type":46,"tag":499,"props":3186,"children":3187},{"style":563},[3188],{"type":52,"value":3189}," [ ] Recommendation 1\n",{"type":46,"tag":499,"props":3191,"children":3192},{"class":501,"line":1750},[3193,3197],{"type":46,"tag":499,"props":3194,"children":3195},{"style":557},[3196],{"type":52,"value":3141},{"type":46,"tag":499,"props":3198,"children":3199},{"style":563},[3200],{"type":52,"value":3201}," [ ] Recommendation 2\n",{"type":46,"tag":499,"props":3203,"children":3204},{"class":501,"line":1760},[3205],{"type":46,"tag":499,"props":3206,"children":3207},{"emptyLinePlaceholder":1754},[3208],{"type":52,"value":1757},{"type":46,"tag":499,"props":3210,"children":3211},{"class":501,"line":1769},[3212,3216],{"type":46,"tag":499,"props":3213,"children":3214},{"style":557},[3215],{"type":52,"value":3128},{"type":46,"tag":499,"props":3217,"children":3218},{"style":506},[3219],{"type":52,"value":3220},"Props Mapping Summary:\n",{"type":46,"tag":499,"props":3222,"children":3223},{"class":501,"line":1786},[3224,3229,3234,3238,3243,3247,3252],{"type":46,"tag":499,"props":3225,"children":3226},{"style":557},[3227],{"type":52,"value":3228},"|",{"type":46,"tag":499,"props":3230,"children":3231},{"style":563},[3232],{"type":52,"value":3233}," Original Prop ",{"type":46,"tag":499,"props":3235,"children":3236},{"style":557},[3237],{"type":52,"value":3228},{"type":46,"tag":499,"props":3239,"children":3240},{"style":563},[3241],{"type":52,"value":3242}," Webflow Prop ",{"type":46,"tag":499,"props":3244,"children":3245},{"style":557},[3246],{"type":52,"value":3228},{"type":46,"tag":499,"props":3248,"children":3249},{"style":563},[3250],{"type":52,"value":3251}," Notes ",{"type":46,"tag":499,"props":3253,"children":3254},{"style":557},[3255],{"type":52,"value":3256},"|\n",{"type":46,"tag":499,"props":3258,"children":3259},{"class":501,"line":1859},[3260],{"type":46,"tag":499,"props":3261,"children":3262},{"style":557},[3263],{"type":52,"value":3264},"|---------------|--------------|-------|\n",{"type":46,"tag":499,"props":3266,"children":3267},{"class":501,"line":1926},[3268,3272,3277,3281,3286,3290,3295],{"type":46,"tag":499,"props":3269,"children":3270},{"style":557},[3271],{"type":52,"value":3228},{"type":46,"tag":499,"props":3273,"children":3274},{"style":563},[3275],{"type":52,"value":3276}," title: string ",{"type":46,"tag":499,"props":3278,"children":3279},{"style":557},[3280],{"type":52,"value":3228},{"type":46,"tag":499,"props":3282,"children":3283},{"style":563},[3284],{"type":52,"value":3285}," props.Text() ",{"type":46,"tag":499,"props":3287,"children":3288},{"style":557},[3289],{"type":52,"value":3228},{"type":46,"tag":499,"props":3291,"children":3292},{"style":563},[3293],{"type":52,"value":3294}," Direct mapping ",{"type":46,"tag":499,"props":3296,"children":3297},{"style":557},[3298],{"type":52,"value":3256},{"type":46,"tag":499,"props":3300,"children":3301},{"class":501,"line":1990},[3302,3306,3311,3315,3320,3324,3328],{"type":46,"tag":499,"props":3303,"children":3304},{"style":557},[3305],{"type":52,"value":3228},{"type":46,"tag":499,"props":3307,"children":3308},{"style":563},[3309],{"type":52,"value":3310}," isOpen: boolean ",{"type":46,"tag":499,"props":3312,"children":3313},{"style":557},[3314],{"type":52,"value":3228},{"type":46,"tag":499,"props":3316,"children":3317},{"style":563},[3318],{"type":52,"value":3319}," props.Boolean() ",{"type":46,"tag":499,"props":3321,"children":3322},{"style":557},[3323],{"type":52,"value":3228},{"type":46,"tag":499,"props":3325,"children":3326},{"style":563},[3327],{"type":52,"value":3294},{"type":46,"tag":499,"props":3329,"children":3330},{"style":557},[3331],{"type":52,"value":3256},{"type":46,"tag":499,"props":3333,"children":3334},{"class":501,"line":2971},[3335,3339,3344,3348,3353,3357,3362],{"type":46,"tag":499,"props":3336,"children":3337},{"style":557},[3338],{"type":52,"value":3228},{"type":46,"tag":499,"props":3340,"children":3341},{"style":563},[3342],{"type":52,"value":3343}," data: object ",{"type":46,"tag":499,"props":3345,"children":3346},{"style":557},[3347],{"type":52,"value":3228},{"type":46,"tag":499,"props":3349,"children":3350},{"style":563},[3351],{"type":52,"value":3352}," SPLIT → dataTitle, dataValue ",{"type":46,"tag":499,"props":3354,"children":3355},{"style":557},[3356],{"type":52,"value":3228},{"type":46,"tag":499,"props":3358,"children":3359},{"style":563},[3360],{"type":52,"value":3361}," Flattened ",{"type":46,"tag":499,"props":3363,"children":3364},{"style":557},[3365],{"type":52,"value":3256},{"type":46,"tag":499,"props":3367,"children":3368},{"class":501,"line":28},[3369,3373,3378,3382,3387,3391,3396],{"type":46,"tag":499,"props":3370,"children":3371},{"style":557},[3372],{"type":52,"value":3228},{"type":46,"tag":499,"props":3374,"children":3375},{"style":563},[3376],{"type":52,"value":3377}," onClick: function ",{"type":46,"tag":499,"props":3379,"children":3380},{"style":557},[3381],{"type":52,"value":3228},{"type":46,"tag":499,"props":3383,"children":3384},{"style":563},[3385],{"type":52,"value":3386}," REMOVED ",{"type":46,"tag":499,"props":3388,"children":3389},{"style":557},[3390],{"type":52,"value":3228},{"type":46,"tag":499,"props":3392,"children":3393},{"style":563},[3394],{"type":52,"value":3395}," Not supported ",{"type":46,"tag":499,"props":3397,"children":3398},{"style":557},[3399],{"type":52,"value":3256},{"type":46,"tag":150,"props":3401,"children":3402},{"start":1859},[3403],{"type":46,"tag":90,"props":3404,"children":3405},{},[3406,3411,3413],{"type":46,"tag":80,"props":3407,"children":3408},{},[3409],{"type":52,"value":3410},"Provide modified component code",{"type":52,"value":3412}," if changes are needed:\n",{"type":46,"tag":86,"props":3414,"children":3415},{},[3416,3421,3426,3431],{"type":46,"tag":90,"props":3417,"children":3418},{},[3419],{"type":52,"value":3420},"Show the updated TypeScript interface",{"type":46,"tag":90,"props":3422,"children":3423},{},[3424],{"type":52,"value":3425},"Show any useEffect wrappers needed for SSR",{"type":46,"tag":90,"props":3427,"children":3428},{},[3429],{"type":52,"value":3430},"Show style import changes",{"type":46,"tag":90,"props":3432,"children":3433},{},[3434],{"type":52,"value":3435},"Note CSS-in-JS setup requirements if applicable",{"type":46,"tag":70,"props":3437,"children":3439},{"id":3438},"examples",[3440],{"type":52,"value":3441},"Examples",{"type":46,"tag":143,"props":3443,"children":3445},{"id":3444},"example-1-simple-component-conversion",[3446],{"type":52,"value":3447},"Example 1: Simple Component Conversion",{"type":46,"tag":55,"props":3449,"children":3450},{},[3451],{"type":46,"tag":80,"props":3452,"children":3453},{},[3454],{"type":52,"value":3455},"User prompt:",{"type":46,"tag":488,"props":3457,"children":3461},{"className":3458,"code":3460,"language":52},[3459],"language-text","Convert this React component to work with Webflow:\n\n\u002F\u002F TestimonialCard.tsx\ninterface TestimonialCardProps {\n  quote: string;\n  authorName: string;\n  authorTitle?: string;\n  rating?: number;\n}\n\nexport const TestimonialCard: React.FC\u003CTestimonialCardProps> = ({\n  quote,\n  authorName,\n  authorTitle = \"\",\n  rating = 5\n}) => {\n  return (\n    \u003Cdiv className=\"testimonial-card\">\n      \u003Cdiv className=\"stars\">{\"★\".repeat(rating)}\u003C\u002Fdiv>\n      \u003Cblockquote>{quote}\u003C\u002Fblockquote>\n      \u003Cdiv className=\"author\">\n        \u003Cstrong>{authorName}\u003C\u002Fstrong>\n        {authorTitle && \u003Cspan>{authorTitle}\u003C\u002Fspan>}\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  );\n};\n",[3462],{"type":46,"tag":61,"props":3463,"children":3464},{"__ignoreMap":493},[3465],{"type":52,"value":3460},{"type":46,"tag":55,"props":3467,"children":3468},{},[3469],{"type":46,"tag":80,"props":3470,"children":3471},{},[3472],{"type":52,"value":3473},"Response:",{"type":46,"tag":488,"props":3475,"children":3477},{"className":3076,"code":3476,"language":3078,"meta":493,"style":493},"## Component Analysis: TestimonialCard\n\n### Props Detected:\n| Prop | TypeScript Type | Webflow Mapping |\n|------|-----------------|-----------------|\n| quote | string | props.Text() |\n| authorName | string | props.Text() |\n| authorTitle | string (optional) | props.Text() |\n| rating | number (optional) | props.Number() |\n\n### Issues Found:\n- **CSS class \"testimonial-card\"** - Uses global class that won't work in Shadow DOM\n  - Fix: Convert to CSS Modules or import scoped styles\n\n### No blocking issues - ready to convert!\n\n---\n\n## Generated Files\n\n### TestimonialCard.webflow.tsx\n```typescript\nimport { declareComponent } from \"@webflow\u002Freact\";\nimport { props } from \"@webflow\u002Fdata-types\";\nimport { TestimonialCard } from \".\u002FTestimonialCard\";\nimport \".\u002FTestimonialCard.module.css\";\n\nexport default declareComponent(TestimonialCard, {\n  name: \"TestimonialCard\",\n  description: \"Display customer testimonials with rating stars\",\n  group: \"Display\",\n  props: {\n    quote: props.Text({\n      name: \"Quote\",\n      defaultValue: \"This product changed my life!\"\n    }),\n    authorName: props.Text({\n      name: \"Author Name\",\n      defaultValue: \"Jane Doe\"\n    }),\n    authorTitle: props.Text({\n      name: \"Author Title\",\n      defaultValue: \"CEO, Company\"\n    }),\n    rating: props.Number({\n      name: \"Rating\",\n      defaultValue: 5,\n      min: 1,\n      max: 5\n    })\n  },\n  options: {\n    applyTagSelectors: true,\n    ssr: true\n  }\n});\n",[3478],{"type":46,"tag":61,"props":3479,"children":3480},{"__ignoreMap":493},[3481,3493,3500,3512,3546,3554,3587,3619,3652,3686,3693,3705,3734,3747,3754,3766,3773,3781,3788,3800,3808,3821,3836,3876,3916,3958,3983,3991,4020,4049,4078,4107,4123,4156,4186,4212,4229,4262,4290,4315,4331,4364,4393,4418,4434,4468,4497,4518,4540,4558,4570,4578,4594,4614,4631,4639],{"type":46,"tag":499,"props":3482,"children":3483},{"class":501,"line":502},[3484,3488],{"type":46,"tag":499,"props":3485,"children":3486},{"style":557},[3487],{"type":52,"value":3090},{"type":46,"tag":499,"props":3489,"children":3490},{"style":506},[3491],{"type":52,"value":3492},"Component Analysis: TestimonialCard\n",{"type":46,"tag":499,"props":3494,"children":3495},{"class":501,"line":599},[3496],{"type":46,"tag":499,"props":3497,"children":3498},{"emptyLinePlaceholder":1754},[3499],{"type":52,"value":1757},{"type":46,"tag":499,"props":3501,"children":3502},{"class":501,"line":825},[3503,3507],{"type":46,"tag":499,"props":3504,"children":3505},{"style":557},[3506],{"type":52,"value":3128},{"type":46,"tag":499,"props":3508,"children":3509},{"style":506},[3510],{"type":52,"value":3511},"Props Detected:\n",{"type":46,"tag":499,"props":3513,"children":3514},{"class":501,"line":865},[3515,3519,3524,3528,3533,3537,3542],{"type":46,"tag":499,"props":3516,"children":3517},{"style":557},[3518],{"type":52,"value":3228},{"type":46,"tag":499,"props":3520,"children":3521},{"style":563},[3522],{"type":52,"value":3523}," Prop ",{"type":46,"tag":499,"props":3525,"children":3526},{"style":557},[3527],{"type":52,"value":3228},{"type":46,"tag":499,"props":3529,"children":3530},{"style":563},[3531],{"type":52,"value":3532}," TypeScript Type ",{"type":46,"tag":499,"props":3534,"children":3535},{"style":557},[3536],{"type":52,"value":3228},{"type":46,"tag":499,"props":3538,"children":3539},{"style":563},[3540],{"type":52,"value":3541}," Webflow Mapping ",{"type":46,"tag":499,"props":3543,"children":3544},{"style":557},[3545],{"type":52,"value":3256},{"type":46,"tag":499,"props":3547,"children":3548},{"class":501,"line":890},[3549],{"type":46,"tag":499,"props":3550,"children":3551},{"style":557},[3552],{"type":52,"value":3553},"|------|-----------------|-----------------|\n",{"type":46,"tag":499,"props":3555,"children":3556},{"class":501,"line":927},[3557,3561,3566,3570,3575,3579,3583],{"type":46,"tag":499,"props":3558,"children":3559},{"style":557},[3560],{"type":52,"value":3228},{"type":46,"tag":499,"props":3562,"children":3563},{"style":563},[3564],{"type":52,"value":3565}," quote ",{"type":46,"tag":499,"props":3567,"children":3568},{"style":557},[3569],{"type":52,"value":3228},{"type":46,"tag":499,"props":3571,"children":3572},{"style":563},[3573],{"type":52,"value":3574}," string ",{"type":46,"tag":499,"props":3576,"children":3577},{"style":557},[3578],{"type":52,"value":3228},{"type":46,"tag":499,"props":3580,"children":3581},{"style":563},[3582],{"type":52,"value":3285},{"type":46,"tag":499,"props":3584,"children":3585},{"style":557},[3586],{"type":52,"value":3256},{"type":46,"tag":499,"props":3588,"children":3589},{"class":501,"line":936},[3590,3594,3599,3603,3607,3611,3615],{"type":46,"tag":499,"props":3591,"children":3592},{"style":557},[3593],{"type":52,"value":3228},{"type":46,"tag":499,"props":3595,"children":3596},{"style":563},[3597],{"type":52,"value":3598}," authorName ",{"type":46,"tag":499,"props":3600,"children":3601},{"style":557},[3602],{"type":52,"value":3228},{"type":46,"tag":499,"props":3604,"children":3605},{"style":563},[3606],{"type":52,"value":3574},{"type":46,"tag":499,"props":3608,"children":3609},{"style":557},[3610],{"type":52,"value":3228},{"type":46,"tag":499,"props":3612,"children":3613},{"style":563},[3614],{"type":52,"value":3285},{"type":46,"tag":499,"props":3616,"children":3617},{"style":557},[3618],{"type":52,"value":3256},{"type":46,"tag":499,"props":3620,"children":3621},{"class":501,"line":945},[3622,3626,3631,3635,3640,3644,3648],{"type":46,"tag":499,"props":3623,"children":3624},{"style":557},[3625],{"type":52,"value":3228},{"type":46,"tag":499,"props":3627,"children":3628},{"style":563},[3629],{"type":52,"value":3630}," authorTitle ",{"type":46,"tag":499,"props":3632,"children":3633},{"style":557},[3634],{"type":52,"value":3228},{"type":46,"tag":499,"props":3636,"children":3637},{"style":563},[3638],{"type":52,"value":3639}," string (optional) ",{"type":46,"tag":499,"props":3641,"children":3642},{"style":557},[3643],{"type":52,"value":3228},{"type":46,"tag":499,"props":3645,"children":3646},{"style":563},[3647],{"type":52,"value":3285},{"type":46,"tag":499,"props":3649,"children":3650},{"style":557},[3651],{"type":52,"value":3256},{"type":46,"tag":499,"props":3653,"children":3654},{"class":501,"line":1750},[3655,3659,3664,3668,3673,3677,3682],{"type":46,"tag":499,"props":3656,"children":3657},{"style":557},[3658],{"type":52,"value":3228},{"type":46,"tag":499,"props":3660,"children":3661},{"style":563},[3662],{"type":52,"value":3663}," rating ",{"type":46,"tag":499,"props":3665,"children":3666},{"style":557},[3667],{"type":52,"value":3228},{"type":46,"tag":499,"props":3669,"children":3670},{"style":563},[3671],{"type":52,"value":3672}," number (optional) ",{"type":46,"tag":499,"props":3674,"children":3675},{"style":557},[3676],{"type":52,"value":3228},{"type":46,"tag":499,"props":3678,"children":3679},{"style":563},[3680],{"type":52,"value":3681}," props.Number() ",{"type":46,"tag":499,"props":3683,"children":3684},{"style":557},[3685],{"type":52,"value":3256},{"type":46,"tag":499,"props":3687,"children":3688},{"class":501,"line":1760},[3689],{"type":46,"tag":499,"props":3690,"children":3691},{"emptyLinePlaceholder":1754},[3692],{"type":52,"value":1757},{"type":46,"tag":499,"props":3694,"children":3695},{"class":501,"line":1769},[3696,3700],{"type":46,"tag":499,"props":3697,"children":3698},{"style":557},[3699],{"type":52,"value":3128},{"type":46,"tag":499,"props":3701,"children":3702},{"style":506},[3703],{"type":52,"value":3704},"Issues Found:\n",{"type":46,"tag":499,"props":3706,"children":3707},{"class":501,"line":1786},[3708,3712,3718,3724,3729],{"type":46,"tag":499,"props":3709,"children":3710},{"style":557},[3711],{"type":52,"value":3141},{"type":46,"tag":499,"props":3713,"children":3715},{"style":3714},"--shiki-light:#39ADB5;--shiki-light-font-weight:bold;--shiki-default:#89DDFF;--shiki-default-font-weight:bold;--shiki-dark:#89DDFF;--shiki-dark-font-weight:bold",[3716],{"type":52,"value":3717}," **",{"type":46,"tag":499,"props":3719,"children":3721},{"style":3720},"--shiki-light:#E53935;--shiki-light-font-weight:bold;--shiki-default:#F07178;--shiki-default-font-weight:bold;--shiki-dark:#F07178;--shiki-dark-font-weight:bold",[3722],{"type":52,"value":3723},"CSS class \"testimonial-card\"",{"type":46,"tag":499,"props":3725,"children":3726},{"style":3714},[3727],{"type":52,"value":3728},"**",{"type":46,"tag":499,"props":3730,"children":3731},{"style":563},[3732],{"type":52,"value":3733}," - Uses global class that won't work in Shadow DOM\n",{"type":46,"tag":499,"props":3735,"children":3736},{"class":501,"line":1859},[3737,3742],{"type":46,"tag":499,"props":3738,"children":3739},{"style":557},[3740],{"type":52,"value":3741},"  -",{"type":46,"tag":499,"props":3743,"children":3744},{"style":563},[3745],{"type":52,"value":3746}," Fix: Convert to CSS Modules or import scoped styles\n",{"type":46,"tag":499,"props":3748,"children":3749},{"class":501,"line":1926},[3750],{"type":46,"tag":499,"props":3751,"children":3752},{"emptyLinePlaceholder":1754},[3753],{"type":52,"value":1757},{"type":46,"tag":499,"props":3755,"children":3756},{"class":501,"line":1990},[3757,3761],{"type":46,"tag":499,"props":3758,"children":3759},{"style":557},[3760],{"type":52,"value":3128},{"type":46,"tag":499,"props":3762,"children":3763},{"style":506},[3764],{"type":52,"value":3765},"No blocking issues - ready to convert!\n",{"type":46,"tag":499,"props":3767,"children":3768},{"class":501,"line":2971},[3769],{"type":46,"tag":499,"props":3770,"children":3771},{"emptyLinePlaceholder":1754},[3772],{"type":52,"value":1757},{"type":46,"tag":499,"props":3774,"children":3775},{"class":501,"line":28},[3776],{"type":46,"tag":499,"props":3777,"children":3778},{"style":563},[3779],{"type":52,"value":3780},"---\n",{"type":46,"tag":499,"props":3782,"children":3783},{"class":501,"line":3020},[3784],{"type":46,"tag":499,"props":3785,"children":3786},{"emptyLinePlaceholder":1754},[3787],{"type":52,"value":1757},{"type":46,"tag":499,"props":3789,"children":3790},{"class":501,"line":3028},[3791,3795],{"type":46,"tag":499,"props":3792,"children":3793},{"style":557},[3794],{"type":52,"value":3090},{"type":46,"tag":499,"props":3796,"children":3797},{"style":506},[3798],{"type":52,"value":3799},"Generated Files\n",{"type":46,"tag":499,"props":3801,"children":3803},{"class":501,"line":3802},20,[3804],{"type":46,"tag":499,"props":3805,"children":3806},{"emptyLinePlaceholder":1754},[3807],{"type":52,"value":1757},{"type":46,"tag":499,"props":3809,"children":3811},{"class":501,"line":3810},21,[3812,3816],{"type":46,"tag":499,"props":3813,"children":3814},{"style":557},[3815],{"type":52,"value":3128},{"type":46,"tag":499,"props":3817,"children":3818},{"style":506},[3819],{"type":52,"value":3820},"TestimonialCard.webflow.tsx\n",{"type":46,"tag":499,"props":3822,"children":3824},{"class":501,"line":3823},22,[3825,3830],{"type":46,"tag":499,"props":3826,"children":3827},{"style":512},[3828],{"type":52,"value":3829},"```",{"type":46,"tag":499,"props":3831,"children":3833},{"style":3832},"--shiki-light:#90A4AE90;--shiki-default:#EEFFFF90;--shiki-dark:#BABED890",[3834],{"type":52,"value":3835},"typescript\n",{"type":46,"tag":499,"props":3837,"children":3839},{"class":501,"line":3838},23,[3840,3844,3848,3852,3856,3860,3864,3868,3872],{"type":46,"tag":499,"props":3841,"children":3842},{"style":551},[3843],{"type":52,"value":554},{"type":46,"tag":499,"props":3845,"children":3846},{"style":557},[3847],{"type":52,"value":560},{"type":46,"tag":499,"props":3849,"children":3850},{"style":563},[3851],{"type":52,"value":2643},{"type":46,"tag":499,"props":3853,"children":3854},{"style":557},[3855],{"type":52,"value":571},{"type":46,"tag":499,"props":3857,"children":3858},{"style":551},[3859],{"type":52,"value":576},{"type":46,"tag":499,"props":3861,"children":3862},{"style":557},[3863],{"type":52,"value":581},{"type":46,"tag":499,"props":3865,"children":3866},{"style":512},[3867],{"type":52,"value":2660},{"type":46,"tag":499,"props":3869,"children":3870},{"style":557},[3871],{"type":52,"value":591},{"type":46,"tag":499,"props":3873,"children":3874},{"style":557},[3875],{"type":52,"value":596},{"type":46,"tag":499,"props":3877,"children":3879},{"class":501,"line":3878},24,[3880,3884,3888,3892,3896,3900,3904,3908,3912],{"type":46,"tag":499,"props":3881,"children":3882},{"style":551},[3883],{"type":52,"value":554},{"type":46,"tag":499,"props":3885,"children":3886},{"style":557},[3887],{"type":52,"value":560},{"type":46,"tag":499,"props":3889,"children":3890},{"style":563},[3891],{"type":52,"value":1430},{"type":46,"tag":499,"props":3893,"children":3894},{"style":557},[3895],{"type":52,"value":571},{"type":46,"tag":499,"props":3897,"children":3898},{"style":551},[3899],{"type":52,"value":576},{"type":46,"tag":499,"props":3901,"children":3902},{"style":557},[3903],{"type":52,"value":581},{"type":46,"tag":499,"props":3905,"children":3906},{"style":512},[3907],{"type":52,"value":2700},{"type":46,"tag":499,"props":3909,"children":3910},{"style":557},[3911],{"type":52,"value":591},{"type":46,"tag":499,"props":3913,"children":3914},{"style":557},[3915],{"type":52,"value":596},{"type":46,"tag":499,"props":3917,"children":3919},{"class":501,"line":3918},25,[3920,3924,3928,3933,3937,3941,3945,3950,3954],{"type":46,"tag":499,"props":3921,"children":3922},{"style":551},[3923],{"type":52,"value":554},{"type":46,"tag":499,"props":3925,"children":3926},{"style":557},[3927],{"type":52,"value":560},{"type":46,"tag":499,"props":3929,"children":3930},{"style":563},[3931],{"type":52,"value":3932}," TestimonialCard",{"type":46,"tag":499,"props":3934,"children":3935},{"style":557},[3936],{"type":52,"value":571},{"type":46,"tag":499,"props":3938,"children":3939},{"style":551},[3940],{"type":52,"value":576},{"type":46,"tag":499,"props":3942,"children":3943},{"style":557},[3944],{"type":52,"value":581},{"type":46,"tag":499,"props":3946,"children":3947},{"style":512},[3948],{"type":52,"value":3949},".\u002FTestimonialCard",{"type":46,"tag":499,"props":3951,"children":3952},{"style":557},[3953],{"type":52,"value":591},{"type":46,"tag":499,"props":3955,"children":3956},{"style":557},[3957],{"type":52,"value":596},{"type":46,"tag":499,"props":3959,"children":3961},{"class":501,"line":3960},26,[3962,3966,3970,3975,3979],{"type":46,"tag":499,"props":3963,"children":3964},{"style":551},[3965],{"type":52,"value":554},{"type":46,"tag":499,"props":3967,"children":3968},{"style":557},[3969],{"type":52,"value":581},{"type":46,"tag":499,"props":3971,"children":3972},{"style":512},[3973],{"type":52,"value":3974},".\u002FTestimonialCard.module.css",{"type":46,"tag":499,"props":3976,"children":3977},{"style":557},[3978],{"type":52,"value":591},{"type":46,"tag":499,"props":3980,"children":3981},{"style":557},[3982],{"type":52,"value":596},{"type":46,"tag":499,"props":3984,"children":3986},{"class":501,"line":3985},27,[3987],{"type":46,"tag":499,"props":3988,"children":3989},{"emptyLinePlaceholder":1754},[3990],{"type":52,"value":1757},{"type":46,"tag":499,"props":3992,"children":3994},{"class":501,"line":3993},28,[3995,3999,4003,4007,4012,4016],{"type":46,"tag":499,"props":3996,"children":3997},{"style":551},[3998],{"type":52,"value":605},{"type":46,"tag":499,"props":4000,"children":4001},{"style":551},[4002],{"type":52,"value":2805},{"type":46,"tag":499,"props":4004,"children":4005},{"style":1808},[4006],{"type":52,"value":2643},{"type":46,"tag":499,"props":4008,"children":4009},{"style":563},[4010],{"type":52,"value":4011},"(TestimonialCard",{"type":46,"tag":499,"props":4013,"children":4014},{"style":557},[4015],{"type":52,"value":2241},{"type":46,"tag":499,"props":4017,"children":4018},{"style":557},[4019],{"type":52,"value":822},{"type":46,"tag":499,"props":4021,"children":4023},{"class":501,"line":4022},29,[4024,4028,4032,4036,4041,4045],{"type":46,"tag":499,"props":4025,"children":4026},{"style":1661},[4027],{"type":52,"value":2186},{"type":46,"tag":499,"props":4029,"children":4030},{"style":557},[4031],{"type":52,"value":172},{"type":46,"tag":499,"props":4033,"children":4034},{"style":557},[4035],{"type":52,"value":581},{"type":46,"tag":499,"props":4037,"children":4038},{"style":512},[4039],{"type":52,"value":4040},"TestimonialCard",{"type":46,"tag":499,"props":4042,"children":4043},{"style":557},[4044],{"type":52,"value":591},{"type":46,"tag":499,"props":4046,"children":4047},{"style":557},[4048],{"type":52,"value":862},{"type":46,"tag":499,"props":4050,"children":4052},{"class":501,"line":4051},30,[4053,4057,4061,4065,4070,4074],{"type":46,"tag":499,"props":4054,"children":4055},{"style":1661},[4056],{"type":52,"value":2858},{"type":46,"tag":499,"props":4058,"children":4059},{"style":557},[4060],{"type":52,"value":172},{"type":46,"tag":499,"props":4062,"children":4063},{"style":557},[4064],{"type":52,"value":581},{"type":46,"tag":499,"props":4066,"children":4067},{"style":512},[4068],{"type":52,"value":4069},"Display customer testimonials with rating stars",{"type":46,"tag":499,"props":4071,"children":4072},{"style":557},[4073],{"type":52,"value":591},{"type":46,"tag":499,"props":4075,"children":4076},{"style":557},[4077],{"type":52,"value":862},{"type":46,"tag":499,"props":4079,"children":4081},{"class":501,"line":4080},31,[4082,4086,4090,4094,4099,4103],{"type":46,"tag":499,"props":4083,"children":4084},{"style":1661},[4085],{"type":52,"value":2887},{"type":46,"tag":499,"props":4087,"children":4088},{"style":557},[4089],{"type":52,"value":172},{"type":46,"tag":499,"props":4091,"children":4092},{"style":557},[4093],{"type":52,"value":581},{"type":46,"tag":499,"props":4095,"children":4096},{"style":512},[4097],{"type":52,"value":4098},"Display",{"type":46,"tag":499,"props":4100,"children":4101},{"style":557},[4102],{"type":52,"value":591},{"type":46,"tag":499,"props":4104,"children":4105},{"style":557},[4106],{"type":52,"value":862},{"type":46,"tag":499,"props":4108,"children":4110},{"class":501,"line":4109},32,[4111,4115,4119],{"type":46,"tag":499,"props":4112,"children":4113},{"style":1661},[4114],{"type":52,"value":2916},{"type":46,"tag":499,"props":4116,"children":4117},{"style":557},[4118],{"type":52,"value":172},{"type":46,"tag":499,"props":4120,"children":4121},{"style":557},[4122],{"type":52,"value":822},{"type":46,"tag":499,"props":4124,"children":4126},{"class":501,"line":4125},33,[4127,4132,4136,4140,4144,4148,4152],{"type":46,"tag":499,"props":4128,"children":4129},{"style":1661},[4130],{"type":52,"value":4131},"    quote",{"type":46,"tag":499,"props":4133,"children":4134},{"style":557},[4135],{"type":52,"value":172},{"type":46,"tag":499,"props":4137,"children":4138},{"style":563},[4139],{"type":52,"value":1430},{"type":46,"tag":499,"props":4141,"children":4142},{"style":557},[4143],{"type":52,"value":1805},{"type":46,"tag":499,"props":4145,"children":4146},{"style":1808},[4147],{"type":52,"value":1811},{"type":46,"tag":499,"props":4149,"children":4150},{"style":563},[4151],{"type":52,"value":1816},{"type":46,"tag":499,"props":4153,"children":4154},{"style":557},[4155],{"type":52,"value":796},{"type":46,"tag":499,"props":4157,"children":4159},{"class":501,"line":4158},34,[4160,4165,4169,4173,4178,4182],{"type":46,"tag":499,"props":4161,"children":4162},{"style":1661},[4163],{"type":52,"value":4164},"      name",{"type":46,"tag":499,"props":4166,"children":4167},{"style":557},[4168],{"type":52,"value":172},{"type":46,"tag":499,"props":4170,"children":4171},{"style":557},[4172],{"type":52,"value":581},{"type":46,"tag":499,"props":4174,"children":4175},{"style":512},[4176],{"type":52,"value":4177},"Quote",{"type":46,"tag":499,"props":4179,"children":4180},{"style":557},[4181],{"type":52,"value":591},{"type":46,"tag":499,"props":4183,"children":4184},{"style":557},[4185],{"type":52,"value":862},{"type":46,"tag":499,"props":4187,"children":4189},{"class":501,"line":4188},35,[4190,4195,4199,4203,4208],{"type":46,"tag":499,"props":4191,"children":4192},{"style":1661},[4193],{"type":52,"value":4194},"      defaultValue",{"type":46,"tag":499,"props":4196,"children":4197},{"style":557},[4198],{"type":52,"value":172},{"type":46,"tag":499,"props":4200,"children":4201},{"style":557},[4202],{"type":52,"value":581},{"type":46,"tag":499,"props":4204,"children":4205},{"style":512},[4206],{"type":52,"value":4207},"This product changed my life!",{"type":46,"tag":499,"props":4209,"children":4210},{"style":557},[4211],{"type":52,"value":924},{"type":46,"tag":499,"props":4213,"children":4215},{"class":501,"line":4214},36,[4216,4221,4225],{"type":46,"tag":499,"props":4217,"children":4218},{"style":557},[4219],{"type":52,"value":4220},"    }",{"type":46,"tag":499,"props":4222,"children":4223},{"style":563},[4224],{"type":52,"value":1852},{"type":46,"tag":499,"props":4226,"children":4227},{"style":557},[4228],{"type":52,"value":862},{"type":46,"tag":499,"props":4230,"children":4232},{"class":501,"line":4231},37,[4233,4238,4242,4246,4250,4254,4258],{"type":46,"tag":499,"props":4234,"children":4235},{"style":1661},[4236],{"type":52,"value":4237},"    authorName",{"type":46,"tag":499,"props":4239,"children":4240},{"style":557},[4241],{"type":52,"value":172},{"type":46,"tag":499,"props":4243,"children":4244},{"style":563},[4245],{"type":52,"value":1430},{"type":46,"tag":499,"props":4247,"children":4248},{"style":557},[4249],{"type":52,"value":1805},{"type":46,"tag":499,"props":4251,"children":4252},{"style":1808},[4253],{"type":52,"value":1811},{"type":46,"tag":499,"props":4255,"children":4256},{"style":563},[4257],{"type":52,"value":1816},{"type":46,"tag":499,"props":4259,"children":4260},{"style":557},[4261],{"type":52,"value":796},{"type":46,"tag":499,"props":4263,"children":4265},{"class":501,"line":4264},38,[4266,4270,4274,4278,4282,4286],{"type":46,"tag":499,"props":4267,"children":4268},{"style":1661},[4269],{"type":52,"value":4164},{"type":46,"tag":499,"props":4271,"children":4272},{"style":557},[4273],{"type":52,"value":172},{"type":46,"tag":499,"props":4275,"children":4276},{"style":557},[4277],{"type":52,"value":581},{"type":46,"tag":499,"props":4279,"children":4280},{"style":512},[4281],{"type":52,"value":1839},{"type":46,"tag":499,"props":4283,"children":4284},{"style":557},[4285],{"type":52,"value":591},{"type":46,"tag":499,"props":4287,"children":4288},{"style":557},[4289],{"type":52,"value":862},{"type":46,"tag":499,"props":4291,"children":4293},{"class":501,"line":4292},39,[4294,4298,4302,4306,4311],{"type":46,"tag":499,"props":4295,"children":4296},{"style":1661},[4297],{"type":52,"value":4194},{"type":46,"tag":499,"props":4299,"children":4300},{"style":557},[4301],{"type":52,"value":172},{"type":46,"tag":499,"props":4303,"children":4304},{"style":557},[4305],{"type":52,"value":581},{"type":46,"tag":499,"props":4307,"children":4308},{"style":512},[4309],{"type":52,"value":4310},"Jane Doe",{"type":46,"tag":499,"props":4312,"children":4313},{"style":557},[4314],{"type":52,"value":924},{"type":46,"tag":499,"props":4316,"children":4318},{"class":501,"line":4317},40,[4319,4323,4327],{"type":46,"tag":499,"props":4320,"children":4321},{"style":557},[4322],{"type":52,"value":4220},{"type":46,"tag":499,"props":4324,"children":4325},{"style":563},[4326],{"type":52,"value":1852},{"type":46,"tag":499,"props":4328,"children":4329},{"style":557},[4330],{"type":52,"value":862},{"type":46,"tag":499,"props":4332,"children":4334},{"class":501,"line":4333},41,[4335,4340,4344,4348,4352,4356,4360],{"type":46,"tag":499,"props":4336,"children":4337},{"style":1661},[4338],{"type":52,"value":4339},"    authorTitle",{"type":46,"tag":499,"props":4341,"children":4342},{"style":557},[4343],{"type":52,"value":172},{"type":46,"tag":499,"props":4345,"children":4346},{"style":563},[4347],{"type":52,"value":1430},{"type":46,"tag":499,"props":4349,"children":4350},{"style":557},[4351],{"type":52,"value":1805},{"type":46,"tag":499,"props":4353,"children":4354},{"style":1808},[4355],{"type":52,"value":1811},{"type":46,"tag":499,"props":4357,"children":4358},{"style":563},[4359],{"type":52,"value":1816},{"type":46,"tag":499,"props":4361,"children":4362},{"style":557},[4363],{"type":52,"value":796},{"type":46,"tag":499,"props":4365,"children":4367},{"class":501,"line":4366},42,[4368,4372,4376,4380,4385,4389],{"type":46,"tag":499,"props":4369,"children":4370},{"style":1661},[4371],{"type":52,"value":4164},{"type":46,"tag":499,"props":4373,"children":4374},{"style":557},[4375],{"type":52,"value":172},{"type":46,"tag":499,"props":4377,"children":4378},{"style":557},[4379],{"type":52,"value":581},{"type":46,"tag":499,"props":4381,"children":4382},{"style":512},[4383],{"type":52,"value":4384},"Author Title",{"type":46,"tag":499,"props":4386,"children":4387},{"style":557},[4388],{"type":52,"value":591},{"type":46,"tag":499,"props":4390,"children":4391},{"style":557},[4392],{"type":52,"value":862},{"type":46,"tag":499,"props":4394,"children":4396},{"class":501,"line":4395},43,[4397,4401,4405,4409,4414],{"type":46,"tag":499,"props":4398,"children":4399},{"style":1661},[4400],{"type":52,"value":4194},{"type":46,"tag":499,"props":4402,"children":4403},{"style":557},[4404],{"type":52,"value":172},{"type":46,"tag":499,"props":4406,"children":4407},{"style":557},[4408],{"type":52,"value":581},{"type":46,"tag":499,"props":4410,"children":4411},{"style":512},[4412],{"type":52,"value":4413},"CEO, Company",{"type":46,"tag":499,"props":4415,"children":4416},{"style":557},[4417],{"type":52,"value":924},{"type":46,"tag":499,"props":4419,"children":4421},{"class":501,"line":4420},44,[4422,4426,4430],{"type":46,"tag":499,"props":4423,"children":4424},{"style":557},[4425],{"type":52,"value":4220},{"type":46,"tag":499,"props":4427,"children":4428},{"style":563},[4429],{"type":52,"value":1852},{"type":46,"tag":499,"props":4431,"children":4432},{"style":557},[4433],{"type":52,"value":862},{"type":46,"tag":499,"props":4435,"children":4437},{"class":501,"line":4436},45,[4438,4443,4447,4451,4455,4460,4464],{"type":46,"tag":499,"props":4439,"children":4440},{"style":1661},[4441],{"type":52,"value":4442},"    rating",{"type":46,"tag":499,"props":4444,"children":4445},{"style":557},[4446],{"type":52,"value":172},{"type":46,"tag":499,"props":4448,"children":4449},{"style":563},[4450],{"type":52,"value":1430},{"type":46,"tag":499,"props":4452,"children":4453},{"style":557},[4454],{"type":52,"value":1805},{"type":46,"tag":499,"props":4456,"children":4457},{"style":1808},[4458],{"type":52,"value":4459},"Number",{"type":46,"tag":499,"props":4461,"children":4462},{"style":563},[4463],{"type":52,"value":1816},{"type":46,"tag":499,"props":4465,"children":4466},{"style":557},[4467],{"type":52,"value":796},{"type":46,"tag":499,"props":4469,"children":4471},{"class":501,"line":4470},46,[4472,4476,4480,4484,4489,4493],{"type":46,"tag":499,"props":4473,"children":4474},{"style":1661},[4475],{"type":52,"value":4164},{"type":46,"tag":499,"props":4477,"children":4478},{"style":557},[4479],{"type":52,"value":172},{"type":46,"tag":499,"props":4481,"children":4482},{"style":557},[4483],{"type":52,"value":581},{"type":46,"tag":499,"props":4485,"children":4486},{"style":512},[4487],{"type":52,"value":4488},"Rating",{"type":46,"tag":499,"props":4490,"children":4491},{"style":557},[4492],{"type":52,"value":591},{"type":46,"tag":499,"props":4494,"children":4495},{"style":557},[4496],{"type":52,"value":862},{"type":46,"tag":499,"props":4498,"children":4500},{"class":501,"line":4499},47,[4501,4505,4509,4514],{"type":46,"tag":499,"props":4502,"children":4503},{"style":1661},[4504],{"type":52,"value":4194},{"type":46,"tag":499,"props":4506,"children":4507},{"style":557},[4508],{"type":52,"value":172},{"type":46,"tag":499,"props":4510,"children":4511},{"style":899},[4512],{"type":52,"value":4513}," 5",{"type":46,"tag":499,"props":4515,"children":4516},{"style":557},[4517],{"type":52,"value":862},{"type":46,"tag":499,"props":4519,"children":4521},{"class":501,"line":4520},48,[4522,4527,4531,4536],{"type":46,"tag":499,"props":4523,"children":4524},{"style":1661},[4525],{"type":52,"value":4526},"      min",{"type":46,"tag":499,"props":4528,"children":4529},{"style":557},[4530],{"type":52,"value":172},{"type":46,"tag":499,"props":4532,"children":4533},{"style":899},[4534],{"type":52,"value":4535}," 1",{"type":46,"tag":499,"props":4537,"children":4538},{"style":557},[4539],{"type":52,"value":862},{"type":46,"tag":499,"props":4541,"children":4543},{"class":501,"line":4542},49,[4544,4549,4553],{"type":46,"tag":499,"props":4545,"children":4546},{"style":1661},[4547],{"type":52,"value":4548},"      max",{"type":46,"tag":499,"props":4550,"children":4551},{"style":557},[4552],{"type":52,"value":172},{"type":46,"tag":499,"props":4554,"children":4555},{"style":899},[4556],{"type":52,"value":4557}," 5\n",{"type":46,"tag":499,"props":4559,"children":4561},{"class":501,"line":4560},50,[4562,4566],{"type":46,"tag":499,"props":4563,"children":4564},{"style":557},[4565],{"type":52,"value":4220},{"type":46,"tag":499,"props":4567,"children":4568},{"style":563},[4569],{"type":52,"value":1987},{"type":46,"tag":499,"props":4571,"children":4573},{"class":501,"line":4572},51,[4574],{"type":46,"tag":499,"props":4575,"children":4576},{"style":557},[4577],{"type":52,"value":2940},{"type":46,"tag":499,"props":4579,"children":4581},{"class":501,"line":4580},52,[4582,4586,4590],{"type":46,"tag":499,"props":4583,"children":4584},{"style":1661},[4585],{"type":52,"value":2215},{"type":46,"tag":499,"props":4587,"children":4588},{"style":557},[4589],{"type":52,"value":172},{"type":46,"tag":499,"props":4591,"children":4592},{"style":557},[4593],{"type":52,"value":822},{"type":46,"tag":499,"props":4595,"children":4597},{"class":501,"line":4596},53,[4598,4602,4606,4610],{"type":46,"tag":499,"props":4599,"children":4600},{"style":1661},[4601],{"type":52,"value":2977},{"type":46,"tag":499,"props":4603,"children":4604},{"style":557},[4605],{"type":52,"value":172},{"type":46,"tag":499,"props":4607,"children":4608},{"style":2984},[4609],{"type":52,"value":2987},{"type":46,"tag":499,"props":4611,"children":4612},{"style":557},[4613],{"type":52,"value":862},{"type":46,"tag":499,"props":4615,"children":4617},{"class":501,"line":4616},54,[4618,4622,4626],{"type":46,"tag":499,"props":4619,"children":4620},{"style":1661},[4621],{"type":52,"value":3004},{"type":46,"tag":499,"props":4623,"children":4624},{"style":557},[4625],{"type":52,"value":172},{"type":46,"tag":499,"props":4627,"children":4628},{"style":2984},[4629],{"type":52,"value":4630}," true\n",{"type":46,"tag":499,"props":4632,"children":4634},{"class":501,"line":4633},55,[4635],{"type":46,"tag":499,"props":4636,"children":4637},{"style":557},[4638],{"type":52,"value":942},{"type":46,"tag":499,"props":4640,"children":4642},{"class":501,"line":4641},56,[4643,4647,4651],{"type":46,"tag":499,"props":4644,"children":4645},{"style":557},[4646],{"type":52,"value":2327},{"type":46,"tag":499,"props":4648,"children":4649},{"style":563},[4650],{"type":52,"value":1852},{"type":46,"tag":499,"props":4652,"children":4653},{"style":557},[4654],{"type":52,"value":596},{"type":46,"tag":143,"props":4656,"children":4658},{"id":4657},"required-changes-to-testimonialcardtsx",[4659],{"type":52,"value":4660},"Required Changes to TestimonialCard.tsx",{"type":46,"tag":150,"props":4662,"children":4663},{},[4664],{"type":46,"tag":90,"props":4665,"children":4666},{},[4667,4672,4674,4680,4682,4688],{"type":46,"tag":80,"props":4668,"children":4669},{},[4670],{"type":52,"value":4671},"Convert to CSS Modules",{"type":52,"value":4673}," - Rename ",{"type":46,"tag":61,"props":4675,"children":4677},{"className":4676},[],[4678],{"type":52,"value":4679},"TestimonialCard.css",{"type":52,"value":4681}," to ",{"type":46,"tag":61,"props":4683,"children":4685},{"className":4684},[],[4686],{"type":52,"value":4687},"TestimonialCard.module.css",{"type":52,"value":4689}," and update imports:",{"type":46,"tag":488,"props":4691,"children":4693},{"className":540,"code":4692,"language":19,"meta":493,"style":493},"import styles from \".\u002FTestimonialCard.module.css\";\n\n\u002F\u002F Default CSS Modules uses bracket notation:\n\u003Cdiv className={styles[\"testimonial-card\"]}>\n\u003Cdiv className={styles[\"stars\"]}>\n\u002F\u002F Dot notation (styles.testimonialCard) requires camelCase class names\n\u002F\u002F or a webpack override for css-loader.\n",[4694],{"type":46,"tag":61,"props":4695,"children":4696},{"__ignoreMap":493},[4697,4730,4737,4745,4790,4815,4823],{"type":46,"tag":499,"props":4698,"children":4699},{"class":501,"line":502},[4700,4704,4709,4714,4718,4722,4726],{"type":46,"tag":499,"props":4701,"children":4702},{"style":551},[4703],{"type":52,"value":554},{"type":46,"tag":499,"props":4705,"children":4706},{"style":563},[4707],{"type":52,"value":4708}," styles ",{"type":46,"tag":499,"props":4710,"children":4711},{"style":551},[4712],{"type":52,"value":4713},"from",{"type":46,"tag":499,"props":4715,"children":4716},{"style":557},[4717],{"type":52,"value":581},{"type":46,"tag":499,"props":4719,"children":4720},{"style":512},[4721],{"type":52,"value":3974},{"type":46,"tag":499,"props":4723,"children":4724},{"style":557},[4725],{"type":52,"value":591},{"type":46,"tag":499,"props":4727,"children":4728},{"style":557},[4729],{"type":52,"value":596},{"type":46,"tag":499,"props":4731,"children":4732},{"class":501,"line":599},[4733],{"type":46,"tag":499,"props":4734,"children":4735},{"emptyLinePlaceholder":1754},[4736],{"type":52,"value":1757},{"type":46,"tag":499,"props":4738,"children":4739},{"class":501,"line":825},[4740],{"type":46,"tag":499,"props":4741,"children":4742},{"style":1635},[4743],{"type":52,"value":4744},"\u002F\u002F Default CSS Modules uses bracket notation:\n",{"type":46,"tag":499,"props":4746,"children":4747},{"class":501,"line":865},[4748,4753,4758,4763,4768,4772,4776,4781,4785],{"type":46,"tag":499,"props":4749,"children":4750},{"style":557},[4751],{"type":52,"value":4752},"\u003C",{"type":46,"tag":499,"props":4754,"children":4755},{"style":563},[4756],{"type":52,"value":4757},"div className",{"type":46,"tag":499,"props":4759,"children":4760},{"style":557},[4761],{"type":52,"value":4762},"={",{"type":46,"tag":499,"props":4764,"children":4765},{"style":563},[4766],{"type":52,"value":4767},"styles",{"type":46,"tag":499,"props":4769,"children":4770},{"style":1661},[4771],{"type":52,"value":3100},{"type":46,"tag":499,"props":4773,"children":4774},{"style":557},[4775],{"type":52,"value":591},{"type":46,"tag":499,"props":4777,"children":4778},{"style":1661},[4779],{"type":52,"value":4780},"testimonial-card",{"type":46,"tag":499,"props":4782,"children":4783},{"style":557},[4784],{"type":52,"value":591},{"type":46,"tag":499,"props":4786,"children":4787},{"style":1661},[4788],{"type":52,"value":4789},"]}>\n",{"type":46,"tag":499,"props":4791,"children":4792},{"class":501,"line":890},[4793,4798,4802,4807,4811],{"type":46,"tag":499,"props":4794,"children":4795},{"style":1661},[4796],{"type":52,"value":4797},"\u003Cdiv className={styles[",{"type":46,"tag":499,"props":4799,"children":4800},{"style":557},[4801],{"type":52,"value":591},{"type":46,"tag":499,"props":4803,"children":4804},{"style":1661},[4805],{"type":52,"value":4806},"stars",{"type":46,"tag":499,"props":4808,"children":4809},{"style":557},[4810],{"type":52,"value":591},{"type":46,"tag":499,"props":4812,"children":4813},{"style":1661},[4814],{"type":52,"value":4789},{"type":46,"tag":499,"props":4816,"children":4817},{"class":501,"line":927},[4818],{"type":46,"tag":499,"props":4819,"children":4820},{"style":1635},[4821],{"type":52,"value":4822},"\u002F\u002F Dot notation (styles.testimonialCard) requires camelCase class names\n",{"type":46,"tag":499,"props":4824,"children":4825},{"class":501,"line":936},[4826],{"type":46,"tag":499,"props":4827,"children":4828},{"style":1635},[4829],{"type":52,"value":4830},"\u002F\u002F or a webpack override for css-loader.\n",{"type":46,"tag":143,"props":4832,"children":4834},{"id":4833},"setup-check",[4835],{"type":52,"value":4836},"Setup Check",{"type":46,"tag":86,"props":4838,"children":4841},{"className":4839},[4840],"contains-task-list",[4842,4854],{"type":46,"tag":90,"props":4843,"children":4846},{"className":4844},[4845],"task-list-item",[4847,4852],{"type":46,"tag":4848,"props":4849,"children":4851},"input",{"disabled":1754,"type":4850},"checkbox",[],{"type":52,"value":4853}," Verify webflow.json exists",{"type":46,"tag":90,"props":4855,"children":4857},{"className":4856},[4845],[4858,4861,4863],{"type":46,"tag":4848,"props":4859,"children":4860},{"disabled":1754,"type":4850},[],{"type":52,"value":4862}," Install dependencies if needed: ",{"type":46,"tag":61,"props":4864,"children":4866},{"className":4865},[],[4867],{"type":52,"value":4868},"npm i --save-dev @webflow\u002Fwebflow-cli @webflow\u002Fdata-types @webflow\u002Freact",{"type":46,"tag":488,"props":4870,"children":4873},{"className":4871,"code":4872,"language":52},[3459],"\n---\n\n### Example 2: Component with Incompatible Patterns\n\n**User prompt:**\n",[4874],{"type":46,"tag":61,"props":4875,"children":4876},{"__ignoreMap":493},[4877],{"type":52,"value":4872},{"type":46,"tag":55,"props":4879,"children":4880},{},[4881],{"type":52,"value":4882},"Make this work as a Webflow code component:",{"type":46,"tag":55,"props":4884,"children":4885},{},[4886],{"type":52,"value":4887},"\u002F\u002F Modal.tsx\nimport { createContext, useContext, useState } from 'react';",{"type":46,"tag":55,"props":4889,"children":4890},{},[4891],{"type":52,"value":4892},"const ModalContext = createContext\u003C{ isOpen: boolean; toggle: () => void } | null>(null);",{"type":46,"tag":55,"props":4894,"children":4895},{},[4896],{"type":52,"value":4897},"export const useModal = () => {\nconst context = useContext(ModalContext);\nif (!context) throw new Error('useModal must be used within ModalProvider');\nreturn context;\n};",{"type":46,"tag":55,"props":4899,"children":4900},{},[4901],{"type":52,"value":4902},"interface ModalProps {\ntrigger: React.ReactNode;\nchildren: React.ReactNode;\nonOpen?: () => void;\nonClose?: () => void;\n}",{"type":46,"tag":55,"props":4904,"children":4905},{},[4906,4908],{"type":52,"value":4907},"export const Modal: React.FC",{"type":46,"tag":4909,"props":4910,"children":4911},"modal-props",{},[4912,4914,4919],{"type":52,"value":4913}," = ({ trigger, children, onOpen, onClose }) => {\nconst ",{"type":46,"tag":499,"props":4915,"children":4916},{},[4917],{"type":52,"value":4918},"isOpen, setIsOpen",{"type":52,"value":4920}," = useState(false);",{"type":46,"tag":55,"props":4922,"children":4923},{},[4924],{"type":52,"value":4925},"const toggle = () => {\nconst newState = !isOpen;\nsetIsOpen(newState);\nif (newState && onOpen) onOpen();\nif (!newState && onClose) onClose();\n};",{"type":46,"tag":55,"props":4927,"children":4928},{},[4929,4931,4936],{"type":52,"value":4930},"useEffect(() => {\nif (isOpen) {\ndocument.body.style.overflow = 'hidden';\n} else {\ndocument.body.style.overflow = '';\n}\n}, ",{"type":46,"tag":499,"props":4932,"children":4933},{},[4934],{"type":52,"value":4935},"isOpen",{"type":52,"value":4937},");",{"type":46,"tag":55,"props":4939,"children":4940},{},[4941,4943,4948],{"type":52,"value":4942},"return (\n\u003CModalContext.Provider value=",{"type":46,"tag":4944,"props":4945,"children":4947},"binding",{"value":4946},"isOpen, toggle",[],{"type":52,"value":4949},">\n",{"type":46,"tag":4951,"props":4952,"children":4953},"div",{},[4954],{"type":52,"value":4955},"{trigger}",{"type":46,"tag":4951,"props":4957,"children":4960},{"className":4958},[4959],"modal-overlay",[4961],{"type":52,"value":4962},"\n\u003Cdiv className=\"modal-content\" onClick={e => e.stopPropagation()}>\n{children}\n",{"type":46,"tag":488,"props":4964,"children":4967},{"className":4965,"code":4966,"language":52},[3459],"\n**Response:**\n\n```markdown\n## Component Analysis: Modal\n\n### Issues Found:\n\n| Issue | Severity | Resolution |\n|-------|----------|------------|\n| React Context (ModalContext) | Critical | Context won't work across Webflow components. Since this is internal to Modal, it's OK but exported useModal hook won't work. |\n| document.body manipulation | Critical | SSR incompatible. Must set `ssr: false` or wrap in useEffect check. |\n| onOpen\u002FonClose callbacks | Warning | Function props not supported in Webflow. Must remove. |\n| Global CSS classes | Warning | \"modal-overlay\", \"modal-content\" won't work in Shadow DOM. |\n\n### Props Detected:\n| Prop | TypeScript Type | Webflow Mapping | Status |\n|------|-----------------|-----------------|--------|\n| trigger | React.ReactNode | props.Slot() | OK |\n| children | React.ReactNode | props.Slot() | OK |\n| onOpen | function | REMOVE | Not supported |\n| onClose | function | REMOVE | Not supported |\n\n---\n\n## Required Changes\n\n### 1. Remove function props (onOpen, onClose)\nThese cannot be passed from Webflow Designer. Remove from interface and component.\n\n### 2. Fix SSR issue with document.body\nEither set `ssr: false` or add typeof check:\n\n```typescript\nuseEffect(() => {\n  if (typeof document === 'undefined') return;\n  \u002F\u002F ... rest of effect\n}, [isOpen]);\n",[4968],{"type":46,"tag":61,"props":4969,"children":4970},{"__ignoreMap":493},[4971],{"type":52,"value":4966},{"type":46,"tag":143,"props":4973,"children":4975},{"id":4974},"_3-convert-to-css-modules",[4976],{"type":52,"value":4977},"3. Convert to CSS Modules",{"type":46,"tag":55,"props":4979,"children":4980},{},[4981],{"type":52,"value":4982},"Rename styles and update class references.",{"type":46,"tag":143,"props":4984,"children":4986},{"id":4985},"_4-remove-exported-usemodal-hook",[4987],{"type":52,"value":4988},"4. Remove exported useModal hook",{"type":46,"tag":55,"props":4990,"children":4991},{},[4992],{"type":52,"value":4993},"This won't work for external components. Keep ModalContext internal only.",{"type":46,"tag":4995,"props":4996,"children":4997},"hr",{},[],{"type":46,"tag":70,"props":4999,"children":5001},{"id":5000},"generated-files",[5002],{"type":52,"value":5003},"Generated Files",{"type":46,"tag":143,"props":5005,"children":5007},{"id":5006},"modalwebflowtsx",[5008],{"type":52,"value":5009},"Modal.webflow.tsx",{"type":46,"tag":488,"props":5011,"children":5013},{"className":540,"code":5012,"language":19,"meta":493,"style":493},"import { declareComponent } from \"@webflow\u002Freact\";\nimport { props } from \"@webflow\u002Fdata-types\";\nimport { Modal } from \".\u002FModal\";\nimport \".\u002FModal.module.css\";\n\nexport default declareComponent(Modal, {\n  name: \"Modal\",\n  description: \"Overlay modal dialog with trigger element\",\n  group: \"Interactive\",\n  props: {\n    trigger: props.Slot({\n      name: \"Trigger\"\n    }),\n    children: props.Slot({\n      name: \"Content\"\n    })\n  },\n  options: {\n    applyTagSelectors: true,\n    ssr: false  \u002F\u002F Required due to document.body usage\n  }\n});\n",[5014],{"type":46,"tag":61,"props":5015,"children":5016},{"__ignoreMap":493},[5017,5056,5095,5136,5160,5167,5195,5223,5251,5279,5294,5327,5351,5366,5398,5422,5433,5440,5455,5474,5495,5502],{"type":46,"tag":499,"props":5018,"children":5019},{"class":501,"line":502},[5020,5024,5028,5032,5036,5040,5044,5048,5052],{"type":46,"tag":499,"props":5021,"children":5022},{"style":551},[5023],{"type":52,"value":554},{"type":46,"tag":499,"props":5025,"children":5026},{"style":557},[5027],{"type":52,"value":560},{"type":46,"tag":499,"props":5029,"children":5030},{"style":563},[5031],{"type":52,"value":2643},{"type":46,"tag":499,"props":5033,"children":5034},{"style":557},[5035],{"type":52,"value":571},{"type":46,"tag":499,"props":5037,"children":5038},{"style":551},[5039],{"type":52,"value":576},{"type":46,"tag":499,"props":5041,"children":5042},{"style":557},[5043],{"type":52,"value":581},{"type":46,"tag":499,"props":5045,"children":5046},{"style":512},[5047],{"type":52,"value":2660},{"type":46,"tag":499,"props":5049,"children":5050},{"style":557},[5051],{"type":52,"value":591},{"type":46,"tag":499,"props":5053,"children":5054},{"style":557},[5055],{"type":52,"value":596},{"type":46,"tag":499,"props":5057,"children":5058},{"class":501,"line":599},[5059,5063,5067,5071,5075,5079,5083,5087,5091],{"type":46,"tag":499,"props":5060,"children":5061},{"style":551},[5062],{"type":52,"value":554},{"type":46,"tag":499,"props":5064,"children":5065},{"style":557},[5066],{"type":52,"value":560},{"type":46,"tag":499,"props":5068,"children":5069},{"style":563},[5070],{"type":52,"value":1430},{"type":46,"tag":499,"props":5072,"children":5073},{"style":557},[5074],{"type":52,"value":571},{"type":46,"tag":499,"props":5076,"children":5077},{"style":551},[5078],{"type":52,"value":576},{"type":46,"tag":499,"props":5080,"children":5081},{"style":557},[5082],{"type":52,"value":581},{"type":46,"tag":499,"props":5084,"children":5085},{"style":512},[5086],{"type":52,"value":2700},{"type":46,"tag":499,"props":5088,"children":5089},{"style":557},[5090],{"type":52,"value":591},{"type":46,"tag":499,"props":5092,"children":5093},{"style":557},[5094],{"type":52,"value":596},{"type":46,"tag":499,"props":5096,"children":5097},{"class":501,"line":825},[5098,5102,5106,5111,5115,5119,5123,5128,5132],{"type":46,"tag":499,"props":5099,"children":5100},{"style":551},[5101],{"type":52,"value":554},{"type":46,"tag":499,"props":5103,"children":5104},{"style":557},[5105],{"type":52,"value":560},{"type":46,"tag":499,"props":5107,"children":5108},{"style":563},[5109],{"type":52,"value":5110}," Modal",{"type":46,"tag":499,"props":5112,"children":5113},{"style":557},[5114],{"type":52,"value":571},{"type":46,"tag":499,"props":5116,"children":5117},{"style":551},[5118],{"type":52,"value":576},{"type":46,"tag":499,"props":5120,"children":5121},{"style":557},[5122],{"type":52,"value":581},{"type":46,"tag":499,"props":5124,"children":5125},{"style":512},[5126],{"type":52,"value":5127},".\u002FModal",{"type":46,"tag":499,"props":5129,"children":5130},{"style":557},[5131],{"type":52,"value":591},{"type":46,"tag":499,"props":5133,"children":5134},{"style":557},[5135],{"type":52,"value":596},{"type":46,"tag":499,"props":5137,"children":5138},{"class":501,"line":865},[5139,5143,5147,5152,5156],{"type":46,"tag":499,"props":5140,"children":5141},{"style":551},[5142],{"type":52,"value":554},{"type":46,"tag":499,"props":5144,"children":5145},{"style":557},[5146],{"type":52,"value":581},{"type":46,"tag":499,"props":5148,"children":5149},{"style":512},[5150],{"type":52,"value":5151},".\u002FModal.module.css",{"type":46,"tag":499,"props":5153,"children":5154},{"style":557},[5155],{"type":52,"value":591},{"type":46,"tag":499,"props":5157,"children":5158},{"style":557},[5159],{"type":52,"value":596},{"type":46,"tag":499,"props":5161,"children":5162},{"class":501,"line":890},[5163],{"type":46,"tag":499,"props":5164,"children":5165},{"emptyLinePlaceholder":1754},[5166],{"type":52,"value":1757},{"type":46,"tag":499,"props":5168,"children":5169},{"class":501,"line":927},[5170,5174,5178,5182,5187,5191],{"type":46,"tag":499,"props":5171,"children":5172},{"style":551},[5173],{"type":52,"value":605},{"type":46,"tag":499,"props":5175,"children":5176},{"style":551},[5177],{"type":52,"value":2805},{"type":46,"tag":499,"props":5179,"children":5180},{"style":1808},[5181],{"type":52,"value":2643},{"type":46,"tag":499,"props":5183,"children":5184},{"style":563},[5185],{"type":52,"value":5186},"(Modal",{"type":46,"tag":499,"props":5188,"children":5189},{"style":557},[5190],{"type":52,"value":2241},{"type":46,"tag":499,"props":5192,"children":5193},{"style":557},[5194],{"type":52,"value":822},{"type":46,"tag":499,"props":5196,"children":5197},{"class":501,"line":936},[5198,5202,5206,5210,5215,5219],{"type":46,"tag":499,"props":5199,"children":5200},{"style":1661},[5201],{"type":52,"value":2186},{"type":46,"tag":499,"props":5203,"children":5204},{"style":557},[5205],{"type":52,"value":172},{"type":46,"tag":499,"props":5207,"children":5208},{"style":557},[5209],{"type":52,"value":581},{"type":46,"tag":499,"props":5211,"children":5212},{"style":512},[5213],{"type":52,"value":5214},"Modal",{"type":46,"tag":499,"props":5216,"children":5217},{"style":557},[5218],{"type":52,"value":591},{"type":46,"tag":499,"props":5220,"children":5221},{"style":557},[5222],{"type":52,"value":862},{"type":46,"tag":499,"props":5224,"children":5225},{"class":501,"line":945},[5226,5230,5234,5238,5243,5247],{"type":46,"tag":499,"props":5227,"children":5228},{"style":1661},[5229],{"type":52,"value":2858},{"type":46,"tag":499,"props":5231,"children":5232},{"style":557},[5233],{"type":52,"value":172},{"type":46,"tag":499,"props":5235,"children":5236},{"style":557},[5237],{"type":52,"value":581},{"type":46,"tag":499,"props":5239,"children":5240},{"style":512},[5241],{"type":52,"value":5242},"Overlay modal dialog with trigger element",{"type":46,"tag":499,"props":5244,"children":5245},{"style":557},[5246],{"type":52,"value":591},{"type":46,"tag":499,"props":5248,"children":5249},{"style":557},[5250],{"type":52,"value":862},{"type":46,"tag":499,"props":5252,"children":5253},{"class":501,"line":1750},[5254,5258,5262,5266,5271,5275],{"type":46,"tag":499,"props":5255,"children":5256},{"style":1661},[5257],{"type":52,"value":2887},{"type":46,"tag":499,"props":5259,"children":5260},{"style":557},[5261],{"type":52,"value":172},{"type":46,"tag":499,"props":5263,"children":5264},{"style":557},[5265],{"type":52,"value":581},{"type":46,"tag":499,"props":5267,"children":5268},{"style":512},[5269],{"type":52,"value":5270},"Interactive",{"type":46,"tag":499,"props":5272,"children":5273},{"style":557},[5274],{"type":52,"value":591},{"type":46,"tag":499,"props":5276,"children":5277},{"style":557},[5278],{"type":52,"value":862},{"type":46,"tag":499,"props":5280,"children":5281},{"class":501,"line":1760},[5282,5286,5290],{"type":46,"tag":499,"props":5283,"children":5284},{"style":1661},[5285],{"type":52,"value":2916},{"type":46,"tag":499,"props":5287,"children":5288},{"style":557},[5289],{"type":52,"value":172},{"type":46,"tag":499,"props":5291,"children":5292},{"style":557},[5293],{"type":52,"value":822},{"type":46,"tag":499,"props":5295,"children":5296},{"class":501,"line":1769},[5297,5302,5306,5310,5314,5319,5323],{"type":46,"tag":499,"props":5298,"children":5299},{"style":1661},[5300],{"type":52,"value":5301},"    trigger",{"type":46,"tag":499,"props":5303,"children":5304},{"style":557},[5305],{"type":52,"value":172},{"type":46,"tag":499,"props":5307,"children":5308},{"style":563},[5309],{"type":52,"value":1430},{"type":46,"tag":499,"props":5311,"children":5312},{"style":557},[5313],{"type":52,"value":1805},{"type":46,"tag":499,"props":5315,"children":5316},{"style":1808},[5317],{"type":52,"value":5318},"Slot",{"type":46,"tag":499,"props":5320,"children":5321},{"style":563},[5322],{"type":52,"value":1816},{"type":46,"tag":499,"props":5324,"children":5325},{"style":557},[5326],{"type":52,"value":796},{"type":46,"tag":499,"props":5328,"children":5329},{"class":501,"line":1786},[5330,5334,5338,5342,5347],{"type":46,"tag":499,"props":5331,"children":5332},{"style":1661},[5333],{"type":52,"value":4164},{"type":46,"tag":499,"props":5335,"children":5336},{"style":557},[5337],{"type":52,"value":172},{"type":46,"tag":499,"props":5339,"children":5340},{"style":557},[5341],{"type":52,"value":581},{"type":46,"tag":499,"props":5343,"children":5344},{"style":512},[5345],{"type":52,"value":5346},"Trigger",{"type":46,"tag":499,"props":5348,"children":5349},{"style":557},[5350],{"type":52,"value":924},{"type":46,"tag":499,"props":5352,"children":5353},{"class":501,"line":1859},[5354,5358,5362],{"type":46,"tag":499,"props":5355,"children":5356},{"style":557},[5357],{"type":52,"value":4220},{"type":46,"tag":499,"props":5359,"children":5360},{"style":563},[5361],{"type":52,"value":1852},{"type":46,"tag":499,"props":5363,"children":5364},{"style":557},[5365],{"type":52,"value":862},{"type":46,"tag":499,"props":5367,"children":5368},{"class":501,"line":1926},[5369,5374,5378,5382,5386,5390,5394],{"type":46,"tag":499,"props":5370,"children":5371},{"style":1661},[5372],{"type":52,"value":5373},"    children",{"type":46,"tag":499,"props":5375,"children":5376},{"style":557},[5377],{"type":52,"value":172},{"type":46,"tag":499,"props":5379,"children":5380},{"style":563},[5381],{"type":52,"value":1430},{"type":46,"tag":499,"props":5383,"children":5384},{"style":557},[5385],{"type":52,"value":1805},{"type":46,"tag":499,"props":5387,"children":5388},{"style":1808},[5389],{"type":52,"value":5318},{"type":46,"tag":499,"props":5391,"children":5392},{"style":563},[5393],{"type":52,"value":1816},{"type":46,"tag":499,"props":5395,"children":5396},{"style":557},[5397],{"type":52,"value":796},{"type":46,"tag":499,"props":5399,"children":5400},{"class":501,"line":1990},[5401,5405,5409,5413,5418],{"type":46,"tag":499,"props":5402,"children":5403},{"style":1661},[5404],{"type":52,"value":4164},{"type":46,"tag":499,"props":5406,"children":5407},{"style":557},[5408],{"type":52,"value":172},{"type":46,"tag":499,"props":5410,"children":5411},{"style":557},[5412],{"type":52,"value":581},{"type":46,"tag":499,"props":5414,"children":5415},{"style":512},[5416],{"type":52,"value":5417},"Content",{"type":46,"tag":499,"props":5419,"children":5420},{"style":557},[5421],{"type":52,"value":924},{"type":46,"tag":499,"props":5423,"children":5424},{"class":501,"line":2971},[5425,5429],{"type":46,"tag":499,"props":5426,"children":5427},{"style":557},[5428],{"type":52,"value":4220},{"type":46,"tag":499,"props":5430,"children":5431},{"style":563},[5432],{"type":52,"value":1987},{"type":46,"tag":499,"props":5434,"children":5435},{"class":501,"line":28},[5436],{"type":46,"tag":499,"props":5437,"children":5438},{"style":557},[5439],{"type":52,"value":2940},{"type":46,"tag":499,"props":5441,"children":5442},{"class":501,"line":3020},[5443,5447,5451],{"type":46,"tag":499,"props":5444,"children":5445},{"style":1661},[5446],{"type":52,"value":2215},{"type":46,"tag":499,"props":5448,"children":5449},{"style":557},[5450],{"type":52,"value":172},{"type":46,"tag":499,"props":5452,"children":5453},{"style":557},[5454],{"type":52,"value":822},{"type":46,"tag":499,"props":5456,"children":5457},{"class":501,"line":3028},[5458,5462,5466,5470],{"type":46,"tag":499,"props":5459,"children":5460},{"style":1661},[5461],{"type":52,"value":2977},{"type":46,"tag":499,"props":5463,"children":5464},{"style":557},[5465],{"type":52,"value":172},{"type":46,"tag":499,"props":5467,"children":5468},{"style":2984},[5469],{"type":52,"value":2987},{"type":46,"tag":499,"props":5471,"children":5472},{"style":557},[5473],{"type":52,"value":862},{"type":46,"tag":499,"props":5475,"children":5476},{"class":501,"line":3802},[5477,5481,5485,5490],{"type":46,"tag":499,"props":5478,"children":5479},{"style":1661},[5480],{"type":52,"value":3004},{"type":46,"tag":499,"props":5482,"children":5483},{"style":557},[5484],{"type":52,"value":172},{"type":46,"tag":499,"props":5486,"children":5487},{"style":2984},[5488],{"type":52,"value":5489}," false",{"type":46,"tag":499,"props":5491,"children":5492},{"style":1635},[5493],{"type":52,"value":5494},"  \u002F\u002F Required due to document.body usage\n",{"type":46,"tag":499,"props":5496,"children":5497},{"class":501,"line":3810},[5498],{"type":46,"tag":499,"props":5499,"children":5500},{"style":557},[5501],{"type":52,"value":942},{"type":46,"tag":499,"props":5503,"children":5504},{"class":501,"line":3823},[5505,5509,5513],{"type":46,"tag":499,"props":5506,"children":5507},{"style":557},[5508],{"type":52,"value":2327},{"type":46,"tag":499,"props":5510,"children":5511},{"style":563},[5512],{"type":52,"value":1852},{"type":46,"tag":499,"props":5514,"children":5515},{"style":557},[5516],{"type":52,"value":596},{"type":46,"tag":143,"props":5518,"children":5520},{"id":5519},"updated-modaltsx",[5521],{"type":52,"value":5522},"Updated Modal.tsx",{"type":46,"tag":488,"props":5524,"children":5526},{"className":540,"code":5525,"language":19,"meta":493,"style":493},"import { useState, useEffect } from 'react';\nimport styles from \".\u002FModal.module.css\";\n\ninterface ModalProps {\n  trigger: React.ReactNode;\n  children: React.ReactNode;\n  \u002F\u002F Removed: onOpen, onClose - not supported in Webflow\n}\n\nexport const Modal: React.FC\u003CModalProps> = ({ trigger, children }) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const toggle = () => setIsOpen(!isOpen);\n\n  useEffect(() => {\n    if (typeof document === 'undefined') return;\n\n    if (isOpen) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n\n    return () => {\n      document.body.style.overflow = '';\n    };\n  }, [isOpen]);\n\n  return (\n    \u003C>\n      \u003Cdiv onClick={toggle}>{trigger}\u003C\u002Fdiv>\n      {isOpen && (\n        \u003Cdiv className={styles[\"overlay\"]} onClick={toggle}>\n          \u003Cdiv className={styles[\"content\"]} onClick={e => e.stopPropagation()}>\n            {children}\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      )}\n    \u003C\u002F>\n  );\n};\n",[5527],{"type":46,"tag":61,"props":5528,"children":5529},{"__ignoreMap":493},[5530,5581,5612,5619,5635,5665,5693,5701,5708,5715,5799,5853,5860,5910,5917,5942,5997,6004,6027,6083,6099,6143,6150,6157,6177,6220,6228,6253,6260,6273,6281,6330,6347,6391,6417,6425,6433,6441,6449,6457,6465],{"type":46,"tag":499,"props":5531,"children":5532},{"class":501,"line":502},[5533,5537,5541,5546,5550,5555,5559,5563,5568,5572,5577],{"type":46,"tag":499,"props":5534,"children":5535},{"style":551},[5536],{"type":52,"value":554},{"type":46,"tag":499,"props":5538,"children":5539},{"style":557},[5540],{"type":52,"value":560},{"type":46,"tag":499,"props":5542,"children":5543},{"style":563},[5544],{"type":52,"value":5545}," useState",{"type":46,"tag":499,"props":5547,"children":5548},{"style":557},[5549],{"type":52,"value":2241},{"type":46,"tag":499,"props":5551,"children":5552},{"style":563},[5553],{"type":52,"value":5554}," useEffect",{"type":46,"tag":499,"props":5556,"children":5557},{"style":557},[5558],{"type":52,"value":571},{"type":46,"tag":499,"props":5560,"children":5561},{"style":551},[5562],{"type":52,"value":576},{"type":46,"tag":499,"props":5564,"children":5565},{"style":557},[5566],{"type":52,"value":5567}," '",{"type":46,"tag":499,"props":5569,"children":5570},{"style":512},[5571],{"type":52,"value":15},{"type":46,"tag":499,"props":5573,"children":5574},{"style":557},[5575],{"type":52,"value":5576},"'",{"type":46,"tag":499,"props":5578,"children":5579},{"style":557},[5580],{"type":52,"value":596},{"type":46,"tag":499,"props":5582,"children":5583},{"class":501,"line":599},[5584,5588,5592,5596,5600,5604,5608],{"type":46,"tag":499,"props":5585,"children":5586},{"style":551},[5587],{"type":52,"value":554},{"type":46,"tag":499,"props":5589,"children":5590},{"style":563},[5591],{"type":52,"value":4708},{"type":46,"tag":499,"props":5593,"children":5594},{"style":551},[5595],{"type":52,"value":4713},{"type":46,"tag":499,"props":5597,"children":5598},{"style":557},[5599],{"type":52,"value":581},{"type":46,"tag":499,"props":5601,"children":5602},{"style":512},[5603],{"type":52,"value":5151},{"type":46,"tag":499,"props":5605,"children":5606},{"style":557},[5607],{"type":52,"value":591},{"type":46,"tag":499,"props":5609,"children":5610},{"style":557},[5611],{"type":52,"value":596},{"type":46,"tag":499,"props":5613,"children":5614},{"class":501,"line":825},[5615],{"type":46,"tag":499,"props":5616,"children":5617},{"emptyLinePlaceholder":1754},[5618],{"type":52,"value":1757},{"type":46,"tag":499,"props":5620,"children":5621},{"class":501,"line":865},[5622,5626,5631],{"type":46,"tag":499,"props":5623,"children":5624},{"style":608},[5625],{"type":52,"value":1646},{"type":46,"tag":499,"props":5627,"children":5628},{"style":506},[5629],{"type":52,"value":5630}," ModalProps",{"type":46,"tag":499,"props":5632,"children":5633},{"style":557},[5634],{"type":52,"value":822},{"type":46,"tag":499,"props":5636,"children":5637},{"class":501,"line":890},[5638,5643,5647,5652,5656,5661],{"type":46,"tag":499,"props":5639,"children":5640},{"style":1661},[5641],{"type":52,"value":5642},"  trigger",{"type":46,"tag":499,"props":5644,"children":5645},{"style":557},[5646],{"type":52,"value":172},{"type":46,"tag":499,"props":5648,"children":5649},{"style":506},[5650],{"type":52,"value":5651}," React",{"type":46,"tag":499,"props":5653,"children":5654},{"style":557},[5655],{"type":52,"value":1805},{"type":46,"tag":499,"props":5657,"children":5658},{"style":506},[5659],{"type":52,"value":5660},"ReactNode",{"type":46,"tag":499,"props":5662,"children":5663},{"style":557},[5664],{"type":52,"value":596},{"type":46,"tag":499,"props":5666,"children":5667},{"class":501,"line":927},[5668,5673,5677,5681,5685,5689],{"type":46,"tag":499,"props":5669,"children":5670},{"style":1661},[5671],{"type":52,"value":5672},"  children",{"type":46,"tag":499,"props":5674,"children":5675},{"style":557},[5676],{"type":52,"value":172},{"type":46,"tag":499,"props":5678,"children":5679},{"style":506},[5680],{"type":52,"value":5651},{"type":46,"tag":499,"props":5682,"children":5683},{"style":557},[5684],{"type":52,"value":1805},{"type":46,"tag":499,"props":5686,"children":5687},{"style":506},[5688],{"type":52,"value":5660},{"type":46,"tag":499,"props":5690,"children":5691},{"style":557},[5692],{"type":52,"value":596},{"type":46,"tag":499,"props":5694,"children":5695},{"class":501,"line":936},[5696],{"type":46,"tag":499,"props":5697,"children":5698},{"style":1635},[5699],{"type":52,"value":5700},"  \u002F\u002F Removed: onOpen, onClose - not supported in Webflow\n",{"type":46,"tag":499,"props":5702,"children":5703},{"class":501,"line":945},[5704],{"type":46,"tag":499,"props":5705,"children":5706},{"style":557},[5707],{"type":52,"value":951},{"type":46,"tag":499,"props":5709,"children":5710},{"class":501,"line":1750},[5711],{"type":46,"tag":499,"props":5712,"children":5713},{"emptyLinePlaceholder":1754},[5714],{"type":52,"value":1757},{"type":46,"tag":499,"props":5716,"children":5717},{"class":501,"line":1760},[5718,5722,5726,5730,5734,5738,5742,5747,5751,5756,5761,5765,5770,5776,5780,5785,5790,5795],{"type":46,"tag":499,"props":5719,"children":5720},{"style":551},[5721],{"type":52,"value":605},{"type":46,"tag":499,"props":5723,"children":5724},{"style":608},[5725],{"type":52,"value":611},{"type":46,"tag":499,"props":5727,"children":5728},{"style":563},[5729],{"type":52,"value":5110},{"type":46,"tag":499,"props":5731,"children":5732},{"style":557},[5733],{"type":52,"value":172},{"type":46,"tag":499,"props":5735,"children":5736},{"style":506},[5737],{"type":52,"value":5651},{"type":46,"tag":499,"props":5739,"children":5740},{"style":557},[5741],{"type":52,"value":1805},{"type":46,"tag":499,"props":5743,"children":5744},{"style":506},[5745],{"type":52,"value":5746},"FC",{"type":46,"tag":499,"props":5748,"children":5749},{"style":557},[5750],{"type":52,"value":4752},{"type":46,"tag":499,"props":5752,"children":5753},{"style":506},[5754],{"type":52,"value":5755},"ModalProps",{"type":46,"tag":499,"props":5757,"children":5758},{"style":557},[5759],{"type":52,"value":5760},">",{"type":46,"tag":499,"props":5762,"children":5763},{"style":557},[5764],{"type":52,"value":2037},{"type":46,"tag":499,"props":5766,"children":5767},{"style":557},[5768],{"type":52,"value":5769}," ({",{"type":46,"tag":499,"props":5771,"children":5773},{"style":5772},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[5774],{"type":52,"value":5775}," trigger",{"type":46,"tag":499,"props":5777,"children":5778},{"style":557},[5779],{"type":52,"value":2241},{"type":46,"tag":499,"props":5781,"children":5782},{"style":5772},[5783],{"type":52,"value":5784}," children",{"type":46,"tag":499,"props":5786,"children":5787},{"style":557},[5788],{"type":52,"value":5789}," })",{"type":46,"tag":499,"props":5791,"children":5792},{"style":608},[5793],{"type":52,"value":5794}," =>",{"type":46,"tag":499,"props":5796,"children":5797},{"style":557},[5798],{"type":52,"value":822},{"type":46,"tag":499,"props":5800,"children":5801},{"class":501,"line":1769},[5802,5807,5811,5815,5819,5824,5828,5832,5836,5840,5845,5849],{"type":46,"tag":499,"props":5803,"children":5804},{"style":608},[5805],{"type":52,"value":5806},"  const",{"type":46,"tag":499,"props":5808,"children":5809},{"style":557},[5810],{"type":52,"value":2224},{"type":46,"tag":499,"props":5812,"children":5813},{"style":563},[5814],{"type":52,"value":4935},{"type":46,"tag":499,"props":5816,"children":5817},{"style":557},[5818],{"type":52,"value":2241},{"type":46,"tag":499,"props":5820,"children":5821},{"style":563},[5822],{"type":52,"value":5823}," setIsOpen",{"type":46,"tag":499,"props":5825,"children":5826},{"style":557},[5827],{"type":52,"value":2291},{"type":46,"tag":499,"props":5829,"children":5830},{"style":557},[5831],{"type":52,"value":2037},{"type":46,"tag":499,"props":5833,"children":5834},{"style":1808},[5835],{"type":52,"value":5545},{"type":46,"tag":499,"props":5837,"children":5838},{"style":1661},[5839],{"type":52,"value":1816},{"type":46,"tag":499,"props":5841,"children":5842},{"style":2984},[5843],{"type":52,"value":5844},"false",{"type":46,"tag":499,"props":5846,"children":5847},{"style":1661},[5848],{"type":52,"value":1852},{"type":46,"tag":499,"props":5850,"children":5851},{"style":557},[5852],{"type":52,"value":596},{"type":46,"tag":499,"props":5854,"children":5855},{"class":501,"line":1786},[5856],{"type":46,"tag":499,"props":5857,"children":5858},{"emptyLinePlaceholder":1754},[5859],{"type":52,"value":1757},{"type":46,"tag":499,"props":5861,"children":5862},{"class":501,"line":1859},[5863,5867,5872,5876,5881,5885,5889,5893,5898,5902,5906],{"type":46,"tag":499,"props":5864,"children":5865},{"style":608},[5866],{"type":52,"value":5806},{"type":46,"tag":499,"props":5868,"children":5869},{"style":563},[5870],{"type":52,"value":5871}," toggle",{"type":46,"tag":499,"props":5873,"children":5874},{"style":557},[5875],{"type":52,"value":2037},{"type":46,"tag":499,"props":5877,"children":5878},{"style":557},[5879],{"type":52,"value":5880}," ()",{"type":46,"tag":499,"props":5882,"children":5883},{"style":608},[5884],{"type":52,"value":5794},{"type":46,"tag":499,"props":5886,"children":5887},{"style":1808},[5888],{"type":52,"value":5823},{"type":46,"tag":499,"props":5890,"children":5891},{"style":1661},[5892],{"type":52,"value":1816},{"type":46,"tag":499,"props":5894,"children":5895},{"style":557},[5896],{"type":52,"value":5897},"!",{"type":46,"tag":499,"props":5899,"children":5900},{"style":563},[5901],{"type":52,"value":4935},{"type":46,"tag":499,"props":5903,"children":5904},{"style":1661},[5905],{"type":52,"value":1852},{"type":46,"tag":499,"props":5907,"children":5908},{"style":557},[5909],{"type":52,"value":596},{"type":46,"tag":499,"props":5911,"children":5912},{"class":501,"line":1926},[5913],{"type":46,"tag":499,"props":5914,"children":5915},{"emptyLinePlaceholder":1754},[5916],{"type":52,"value":1757},{"type":46,"tag":499,"props":5918,"children":5919},{"class":501,"line":1990},[5920,5925,5929,5934,5938],{"type":46,"tag":499,"props":5921,"children":5922},{"style":1808},[5923],{"type":52,"value":5924},"  useEffect",{"type":46,"tag":499,"props":5926,"children":5927},{"style":1661},[5928],{"type":52,"value":1816},{"type":46,"tag":499,"props":5930,"children":5931},{"style":557},[5932],{"type":52,"value":5933},"()",{"type":46,"tag":499,"props":5935,"children":5936},{"style":608},[5937],{"type":52,"value":5794},{"type":46,"tag":499,"props":5939,"children":5940},{"style":557},[5941],{"type":52,"value":822},{"type":46,"tag":499,"props":5943,"children":5944},{"class":501,"line":2971},[5945,5950,5955,5960,5965,5970,5974,5979,5983,5988,5993],{"type":46,"tag":499,"props":5946,"children":5947},{"style":551},[5948],{"type":52,"value":5949},"    if",{"type":46,"tag":499,"props":5951,"children":5952},{"style":1661},[5953],{"type":52,"value":5954}," (",{"type":46,"tag":499,"props":5956,"children":5957},{"style":557},[5958],{"type":52,"value":5959},"typeof",{"type":46,"tag":499,"props":5961,"children":5962},{"style":563},[5963],{"type":52,"value":5964}," document",{"type":46,"tag":499,"props":5966,"children":5967},{"style":557},[5968],{"type":52,"value":5969}," ===",{"type":46,"tag":499,"props":5971,"children":5972},{"style":557},[5973],{"type":52,"value":5567},{"type":46,"tag":499,"props":5975,"children":5976},{"style":512},[5977],{"type":52,"value":5978},"undefined",{"type":46,"tag":499,"props":5980,"children":5981},{"style":557},[5982],{"type":52,"value":5576},{"type":46,"tag":499,"props":5984,"children":5985},{"style":1661},[5986],{"type":52,"value":5987},") ",{"type":46,"tag":499,"props":5989,"children":5990},{"style":551},[5991],{"type":52,"value":5992},"return",{"type":46,"tag":499,"props":5994,"children":5995},{"style":557},[5996],{"type":52,"value":596},{"type":46,"tag":499,"props":5998,"children":5999},{"class":501,"line":28},[6000],{"type":46,"tag":499,"props":6001,"children":6002},{"emptyLinePlaceholder":1754},[6003],{"type":52,"value":1757},{"type":46,"tag":499,"props":6005,"children":6006},{"class":501,"line":3020},[6007,6011,6015,6019,6023],{"type":46,"tag":499,"props":6008,"children":6009},{"style":551},[6010],{"type":52,"value":5949},{"type":46,"tag":499,"props":6012,"children":6013},{"style":1661},[6014],{"type":52,"value":5954},{"type":46,"tag":499,"props":6016,"children":6017},{"style":563},[6018],{"type":52,"value":4935},{"type":46,"tag":499,"props":6020,"children":6021},{"style":1661},[6022],{"type":52,"value":5987},{"type":46,"tag":499,"props":6024,"children":6025},{"style":557},[6026],{"type":52,"value":796},{"type":46,"tag":499,"props":6028,"children":6029},{"class":501,"line":3028},[6030,6035,6039,6044,6048,6053,6057,6062,6066,6070,6075,6079],{"type":46,"tag":499,"props":6031,"children":6032},{"style":563},[6033],{"type":52,"value":6034},"      document",{"type":46,"tag":499,"props":6036,"children":6037},{"style":557},[6038],{"type":52,"value":1805},{"type":46,"tag":499,"props":6040,"children":6041},{"style":563},[6042],{"type":52,"value":6043},"body",{"type":46,"tag":499,"props":6045,"children":6046},{"style":557},[6047],{"type":52,"value":1805},{"type":46,"tag":499,"props":6049,"children":6050},{"style":563},[6051],{"type":52,"value":6052},"style",{"type":46,"tag":499,"props":6054,"children":6055},{"style":557},[6056],{"type":52,"value":1805},{"type":46,"tag":499,"props":6058,"children":6059},{"style":563},[6060],{"type":52,"value":6061},"overflow",{"type":46,"tag":499,"props":6063,"children":6064},{"style":557},[6065],{"type":52,"value":2037},{"type":46,"tag":499,"props":6067,"children":6068},{"style":557},[6069],{"type":52,"value":5567},{"type":46,"tag":499,"props":6071,"children":6072},{"style":512},[6073],{"type":52,"value":6074},"hidden",{"type":46,"tag":499,"props":6076,"children":6077},{"style":557},[6078],{"type":52,"value":5576},{"type":46,"tag":499,"props":6080,"children":6081},{"style":557},[6082],{"type":52,"value":596},{"type":46,"tag":499,"props":6084,"children":6085},{"class":501,"line":3802},[6086,6090,6095],{"type":46,"tag":499,"props":6087,"children":6088},{"style":557},[6089],{"type":52,"value":4220},{"type":46,"tag":499,"props":6091,"children":6092},{"style":551},[6093],{"type":52,"value":6094}," else",{"type":46,"tag":499,"props":6096,"children":6097},{"style":557},[6098],{"type":52,"value":822},{"type":46,"tag":499,"props":6100,"children":6101},{"class":501,"line":3810},[6102,6106,6110,6114,6118,6122,6126,6130,6134,6139],{"type":46,"tag":499,"props":6103,"children":6104},{"style":563},[6105],{"type":52,"value":6034},{"type":46,"tag":499,"props":6107,"children":6108},{"style":557},[6109],{"type":52,"value":1805},{"type":46,"tag":499,"props":6111,"children":6112},{"style":563},[6113],{"type":52,"value":6043},{"type":46,"tag":499,"props":6115,"children":6116},{"style":557},[6117],{"type":52,"value":1805},{"type":46,"tag":499,"props":6119,"children":6120},{"style":563},[6121],{"type":52,"value":6052},{"type":46,"tag":499,"props":6123,"children":6124},{"style":557},[6125],{"type":52,"value":1805},{"type":46,"tag":499,"props":6127,"children":6128},{"style":563},[6129],{"type":52,"value":6061},{"type":46,"tag":499,"props":6131,"children":6132},{"style":557},[6133],{"type":52,"value":2037},{"type":46,"tag":499,"props":6135,"children":6136},{"style":557},[6137],{"type":52,"value":6138}," ''",{"type":46,"tag":499,"props":6140,"children":6141},{"style":557},[6142],{"type":52,"value":596},{"type":46,"tag":499,"props":6144,"children":6145},{"class":501,"line":3823},[6146],{"type":46,"tag":499,"props":6147,"children":6148},{"style":557},[6149],{"type":52,"value":933},{"type":46,"tag":499,"props":6151,"children":6152},{"class":501,"line":3838},[6153],{"type":46,"tag":499,"props":6154,"children":6155},{"emptyLinePlaceholder":1754},[6156],{"type":52,"value":1757},{"type":46,"tag":499,"props":6158,"children":6159},{"class":501,"line":3878},[6160,6165,6169,6173],{"type":46,"tag":499,"props":6161,"children":6162},{"style":551},[6163],{"type":52,"value":6164},"    return",{"type":46,"tag":499,"props":6166,"children":6167},{"style":557},[6168],{"type":52,"value":5880},{"type":46,"tag":499,"props":6170,"children":6171},{"style":608},[6172],{"type":52,"value":5794},{"type":46,"tag":499,"props":6174,"children":6175},{"style":557},[6176],{"type":52,"value":822},{"type":46,"tag":499,"props":6178,"children":6179},{"class":501,"line":3918},[6180,6184,6188,6192,6196,6200,6204,6208,6212,6216],{"type":46,"tag":499,"props":6181,"children":6182},{"style":563},[6183],{"type":52,"value":6034},{"type":46,"tag":499,"props":6185,"children":6186},{"style":557},[6187],{"type":52,"value":1805},{"type":46,"tag":499,"props":6189,"children":6190},{"style":563},[6191],{"type":52,"value":6043},{"type":46,"tag":499,"props":6193,"children":6194},{"style":557},[6195],{"type":52,"value":1805},{"type":46,"tag":499,"props":6197,"children":6198},{"style":563},[6199],{"type":52,"value":6052},{"type":46,"tag":499,"props":6201,"children":6202},{"style":557},[6203],{"type":52,"value":1805},{"type":46,"tag":499,"props":6205,"children":6206},{"style":563},[6207],{"type":52,"value":6061},{"type":46,"tag":499,"props":6209,"children":6210},{"style":557},[6211],{"type":52,"value":2037},{"type":46,"tag":499,"props":6213,"children":6214},{"style":557},[6215],{"type":52,"value":6138},{"type":46,"tag":499,"props":6217,"children":6218},{"style":557},[6219],{"type":52,"value":596},{"type":46,"tag":499,"props":6221,"children":6222},{"class":501,"line":3960},[6223],{"type":46,"tag":499,"props":6224,"children":6225},{"style":557},[6226],{"type":52,"value":6227},"    };\n",{"type":46,"tag":499,"props":6229,"children":6230},{"class":501,"line":3985},[6231,6236,6240,6244,6249],{"type":46,"tag":499,"props":6232,"children":6233},{"style":557},[6234],{"type":52,"value":6235},"  },",{"type":46,"tag":499,"props":6237,"children":6238},{"style":1661},[6239],{"type":52,"value":2224},{"type":46,"tag":499,"props":6241,"children":6242},{"style":563},[6243],{"type":52,"value":4935},{"type":46,"tag":499,"props":6245,"children":6246},{"style":1661},[6247],{"type":52,"value":6248},"])",{"type":46,"tag":499,"props":6250,"children":6251},{"style":557},[6252],{"type":52,"value":596},{"type":46,"tag":499,"props":6254,"children":6255},{"class":501,"line":3993},[6256],{"type":46,"tag":499,"props":6257,"children":6258},{"emptyLinePlaceholder":1754},[6259],{"type":52,"value":1757},{"type":46,"tag":499,"props":6261,"children":6262},{"class":501,"line":4022},[6263,6268],{"type":46,"tag":499,"props":6264,"children":6265},{"style":551},[6266],{"type":52,"value":6267},"  return",{"type":46,"tag":499,"props":6269,"children":6270},{"style":1661},[6271],{"type":52,"value":6272}," (\n",{"type":46,"tag":499,"props":6274,"children":6275},{"class":501,"line":4051},[6276],{"type":46,"tag":499,"props":6277,"children":6278},{"style":557},[6279],{"type":52,"value":6280},"    \u003C>\n",{"type":46,"tag":499,"props":6282,"children":6283},{"class":501,"line":4080},[6284,6289,6293,6298,6302,6307,6312,6317,6322,6326],{"type":46,"tag":499,"props":6285,"children":6286},{"style":557},[6287],{"type":52,"value":6288},"      \u003C",{"type":46,"tag":499,"props":6290,"children":6291},{"style":563},[6292],{"type":52,"value":4951},{"type":46,"tag":499,"props":6294,"children":6295},{"style":563},[6296],{"type":52,"value":6297}," onClick",{"type":46,"tag":499,"props":6299,"children":6300},{"style":557},[6301],{"type":52,"value":4762},{"type":46,"tag":499,"props":6303,"children":6304},{"style":563},[6305],{"type":52,"value":6306},"toggle",{"type":46,"tag":499,"props":6308,"children":6309},{"style":557},[6310],{"type":52,"value":6311},"}>{",{"type":46,"tag":499,"props":6313,"children":6314},{"style":563},[6315],{"type":52,"value":6316},"trigger",{"type":46,"tag":499,"props":6318,"children":6319},{"style":557},[6320],{"type":52,"value":6321},"}\u003C\u002F",{"type":46,"tag":499,"props":6323,"children":6324},{"style":563},[6325],{"type":52,"value":4951},{"type":46,"tag":499,"props":6327,"children":6328},{"style":557},[6329],{"type":52,"value":4949},{"type":46,"tag":499,"props":6331,"children":6332},{"class":501,"line":4109},[6333,6338,6342],{"type":46,"tag":499,"props":6334,"children":6335},{"style":557},[6336],{"type":52,"value":6337},"      {",{"type":46,"tag":499,"props":6339,"children":6340},{"style":5772},[6341],{"type":52,"value":4935},{"type":46,"tag":499,"props":6343,"children":6344},{"style":1661},[6345],{"type":52,"value":6346}," && (\n",{"type":46,"tag":499,"props":6348,"children":6349},{"class":501,"line":4125},[6350,6355,6359,6364,6368,6373,6377,6382,6386],{"type":46,"tag":499,"props":6351,"children":6352},{"style":1661},[6353],{"type":52,"value":6354},"        \u003C",{"type":46,"tag":499,"props":6356,"children":6357},{"style":5772},[6358],{"type":52,"value":4951},{"type":46,"tag":499,"props":6360,"children":6361},{"style":5772},[6362],{"type":52,"value":6363}," className",{"type":46,"tag":499,"props":6365,"children":6366},{"style":557},[6367],{"type":52,"value":4762},{"type":46,"tag":499,"props":6369,"children":6370},{"style":1661},[6371],{"type":52,"value":6372},"styles[",{"type":46,"tag":499,"props":6374,"children":6375},{"style":557},[6376],{"type":52,"value":591},{"type":46,"tag":499,"props":6378,"children":6379},{"style":1661},[6380],{"type":52,"value":6381},"overlay",{"type":46,"tag":499,"props":6383,"children":6384},{"style":557},[6385],{"type":52,"value":591},{"type":46,"tag":499,"props":6387,"children":6388},{"style":1661},[6389],{"type":52,"value":6390},"]} onClick={toggle}>\n",{"type":46,"tag":499,"props":6392,"children":6393},{"class":501,"line":4158},[6394,6399,6403,6408,6412],{"type":46,"tag":499,"props":6395,"children":6396},{"style":1661},[6397],{"type":52,"value":6398},"          \u003Cdiv className={styles[",{"type":46,"tag":499,"props":6400,"children":6401},{"style":557},[6402],{"type":52,"value":591},{"type":46,"tag":499,"props":6404,"children":6405},{"style":1661},[6406],{"type":52,"value":6407},"content",{"type":46,"tag":499,"props":6409,"children":6410},{"style":557},[6411],{"type":52,"value":591},{"type":46,"tag":499,"props":6413,"children":6414},{"style":1661},[6415],{"type":52,"value":6416},"]} onClick={e => e.stopPropagation()}>\n",{"type":46,"tag":499,"props":6418,"children":6419},{"class":501,"line":4188},[6420],{"type":46,"tag":499,"props":6421,"children":6422},{"style":1661},[6423],{"type":52,"value":6424},"            {children}\n",{"type":46,"tag":499,"props":6426,"children":6427},{"class":501,"line":4214},[6428],{"type":46,"tag":499,"props":6429,"children":6430},{"style":1661},[6431],{"type":52,"value":6432},"          \u003C\u002Fdiv>\n",{"type":46,"tag":499,"props":6434,"children":6435},{"class":501,"line":4231},[6436],{"type":46,"tag":499,"props":6437,"children":6438},{"style":1661},[6439],{"type":52,"value":6440},"        \u003C\u002Fdiv>\n",{"type":46,"tag":499,"props":6442,"children":6443},{"class":501,"line":4264},[6444],{"type":46,"tag":499,"props":6445,"children":6446},{"style":1661},[6447],{"type":52,"value":6448},"      )}\n",{"type":46,"tag":499,"props":6450,"children":6451},{"class":501,"line":4292},[6452],{"type":46,"tag":499,"props":6453,"children":6454},{"style":1661},[6455],{"type":52,"value":6456},"    \u003C\u002F>\n",{"type":46,"tag":499,"props":6458,"children":6459},{"class":501,"line":4317},[6460],{"type":46,"tag":499,"props":6461,"children":6462},{"style":1661},[6463],{"type":52,"value":6464},"  );\n",{"type":46,"tag":499,"props":6466,"children":6467},{"class":501,"line":4333},[6468],{"type":46,"tag":499,"props":6469,"children":6470},{"style":1661},[6471],{"type":52,"value":6472},"};\n",{"type":46,"tag":143,"props":6474,"children":6476},{"id":6475},"setup-required",[6477],{"type":52,"value":6478},"Setup Required",{"type":46,"tag":488,"props":6480,"children":6482},{"className":490,"code":6481,"language":492,"meta":493,"style":493},"npm i --save-dev @webflow\u002Fwebflow-cli @webflow\u002Fdata-types @webflow\u002Freact\n",[6483],{"type":46,"tag":61,"props":6484,"children":6485},{"__ignoreMap":493},[6486],{"type":46,"tag":499,"props":6487,"children":6488},{"class":501,"line":502},[6489,6493,6497,6502,6507,6512],{"type":46,"tag":499,"props":6490,"children":6491},{"style":506},[6492],{"type":52,"value":509},{"type":46,"tag":499,"props":6494,"children":6495},{"style":512},[6496],{"type":52,"value":515},{"type":46,"tag":499,"props":6498,"children":6499},{"style":512},[6500],{"type":52,"value":6501}," --save-dev",{"type":46,"tag":499,"props":6503,"children":6504},{"style":512},[6505],{"type":52,"value":6506}," @webflow\u002Fwebflow-cli",{"type":46,"tag":499,"props":6508,"children":6509},{"style":512},[6510],{"type":52,"value":6511}," @webflow\u002Fdata-types",{"type":46,"tag":499,"props":6513,"children":6514},{"style":512},[6515],{"type":52,"value":6516}," @webflow\u002Freact\n",{"type":46,"tag":488,"props":6518,"children":6521},{"className":6519,"code":6520,"language":52},[3459],"\n---\n\n### Example 3: Component with Complex Object Props\n\n**User prompt:**\n",[6522],{"type":46,"tag":61,"props":6523,"children":6524},{"__ignoreMap":493},[6525],{"type":52,"value":6520},{"type":46,"tag":55,"props":6527,"children":6528},{},[6529],{"type":52,"value":6530},"Convert to Webflow:",{"type":46,"tag":55,"props":6532,"children":6533},{},[6534],{"type":52,"value":6535},"interface Product {\nid: string;\nname: string;\nprice: number;\nimage: string;\ncategory: 'electronics' | 'clothing' | 'home';\n}",{"type":46,"tag":55,"props":6537,"children":6538},{},[6539],{"type":52,"value":6540},"interface ProductCardProps {\nproduct: Product;\nshowBadge?: boolean;\n}",{"type":46,"tag":55,"props":6542,"children":6543},{},[6544],{"type":52,"value":6545},"export const ProductCard = ({ product, showBadge = true }: ProductCardProps) => (",{"type":46,"tag":4951,"props":6547,"children":6548},{},[6549,6551,6557,6559,6564,6566,6571,6572,6577],{"type":52,"value":6550},"\n    ",{"type":46,"tag":6552,"props":6553,"children":6556},"img",{"src":6554,"alt":6555},"{product.image}","{product.name}",[],{"type":52,"value":6558},"\n    {showBadge && ",{"type":46,"tag":499,"props":6560,"children":6561},{},[6562],{"type":52,"value":6563},"{product.category}",{"type":52,"value":6565},"}\n    ",{"type":46,"tag":143,"props":6567,"children":6569},{"id":6568},"productname",[6570],{"type":52,"value":6555},{"type":52,"value":6550},{"type":46,"tag":55,"props":6573,"children":6574},{},[6575],{"type":52,"value":6576},"${product.price}",{"type":52,"value":6578},"\n  ",{"type":46,"tag":55,"props":6580,"children":6581},{},[6582],{"type":46,"tag":80,"props":6583,"children":6584},{},[6585],{"type":52,"value":3473},{"type":46,"tag":488,"props":6587,"children":6589},{"className":3076,"code":6588,"language":3078,"meta":493,"style":493},"## Component Analysis: ProductCard\n\n### Complex Props Detected:\n\nThe `product` prop is a complex object that must be flattened for Webflow:\n\n| Original | Flattened Props |\n|----------|-----------------|\n| product.id | (Not needed in UI - remove) |\n| product.name | productName: props.Text() |\n| product.price | productPrice: props.Number() |\n| product.image | productImage: props.Image() |\n| product.category | productCategory: props.Variant() |\n| showBadge | showBadge: props.Boolean() |\n\n---\n\n## Generated Files\n\n### ProductCard.webflow.tsx\n```typescript\nimport { declareComponent } from \"@webflow\u002Freact\";\nimport { props } from \"@webflow\u002Fdata-types\";\nimport { ProductCard } from \".\u002FProductCard\";\nimport \".\u002FProductCard.module.css\";\n\nexport default declareComponent(ProductCard, {\n  name: \"ProductCard\",\n  description: \"Product display card with image, name, price, and category\",\n  group: \"Display\",\n  props: {\n    productName: props.Text({\n      name: \"Product Name\",\n      defaultValue: \"Product Title\"\n    }),\n    productPrice: props.Number({\n      name: \"Price\",\n      defaultValue: 29.99\n    }),\n    productImage: props.Image({\n      name: \"Product Image\"\n    }),\n    productCategory: props.Variant({\n      name: \"Category\",\n      options: [\"electronics\", \"clothing\", \"home\"],\n      defaultValue: \"electronics\"\n    }),\n    showBadge: props.Boolean({\n      name: \"Show Category Badge\",\n      defaultValue: true\n    })\n  },\n  options: {\n    applyTagSelectors: true,\n    ssr: true\n  }\n});\n",[6590],{"type":46,"tag":61,"props":6591,"children":6592},{"__ignoreMap":493},[6593,6605,6612,6624,6631,6658,6665,6690,6698,6723,6748,6773,6798,6823,6848,6855,6862,6869,6880,6887,6899,6910,6949,6988,7029,7053,7060,7088,7116,7144,7171,7186,7218,7246,7270,7285,7317,7345,7361,7376,7408,7432,7447,7479,7507,7578,7601,7616,7649,7677,7692,7703,7710,7725,7744,7759,7766],{"type":46,"tag":499,"props":6594,"children":6595},{"class":501,"line":502},[6596,6600],{"type":46,"tag":499,"props":6597,"children":6598},{"style":557},[6599],{"type":52,"value":3090},{"type":46,"tag":499,"props":6601,"children":6602},{"style":506},[6603],{"type":52,"value":6604},"Component Analysis: ProductCard\n",{"type":46,"tag":499,"props":6606,"children":6607},{"class":501,"line":599},[6608],{"type":46,"tag":499,"props":6609,"children":6610},{"emptyLinePlaceholder":1754},[6611],{"type":52,"value":1757},{"type":46,"tag":499,"props":6613,"children":6614},{"class":501,"line":825},[6615,6619],{"type":46,"tag":499,"props":6616,"children":6617},{"style":557},[6618],{"type":52,"value":3128},{"type":46,"tag":499,"props":6620,"children":6621},{"style":506},[6622],{"type":52,"value":6623},"Complex Props Detected:\n",{"type":46,"tag":499,"props":6625,"children":6626},{"class":501,"line":865},[6627],{"type":46,"tag":499,"props":6628,"children":6629},{"emptyLinePlaceholder":1754},[6630],{"type":52,"value":1757},{"type":46,"tag":499,"props":6632,"children":6633},{"class":501,"line":890},[6634,6639,6644,6649,6653],{"type":46,"tag":499,"props":6635,"children":6636},{"style":563},[6637],{"type":52,"value":6638},"The ",{"type":46,"tag":499,"props":6640,"children":6641},{"style":557},[6642],{"type":52,"value":6643},"`",{"type":46,"tag":499,"props":6645,"children":6646},{"style":512},[6647],{"type":52,"value":6648},"product",{"type":46,"tag":499,"props":6650,"children":6651},{"style":557},[6652],{"type":52,"value":6643},{"type":46,"tag":499,"props":6654,"children":6655},{"style":563},[6656],{"type":52,"value":6657}," prop is a complex object that must be flattened for Webflow:\n",{"type":46,"tag":499,"props":6659,"children":6660},{"class":501,"line":927},[6661],{"type":46,"tag":499,"props":6662,"children":6663},{"emptyLinePlaceholder":1754},[6664],{"type":52,"value":1757},{"type":46,"tag":499,"props":6666,"children":6667},{"class":501,"line":936},[6668,6672,6677,6681,6686],{"type":46,"tag":499,"props":6669,"children":6670},{"style":557},[6671],{"type":52,"value":3228},{"type":46,"tag":499,"props":6673,"children":6674},{"style":563},[6675],{"type":52,"value":6676}," Original ",{"type":46,"tag":499,"props":6678,"children":6679},{"style":557},[6680],{"type":52,"value":3228},{"type":46,"tag":499,"props":6682,"children":6683},{"style":563},[6684],{"type":52,"value":6685}," Flattened Props ",{"type":46,"tag":499,"props":6687,"children":6688},{"style":557},[6689],{"type":52,"value":3256},{"type":46,"tag":499,"props":6691,"children":6692},{"class":501,"line":945},[6693],{"type":46,"tag":499,"props":6694,"children":6695},{"style":557},[6696],{"type":52,"value":6697},"|----------|-----------------|\n",{"type":46,"tag":499,"props":6699,"children":6700},{"class":501,"line":1750},[6701,6705,6710,6714,6719],{"type":46,"tag":499,"props":6702,"children":6703},{"style":557},[6704],{"type":52,"value":3228},{"type":46,"tag":499,"props":6706,"children":6707},{"style":563},[6708],{"type":52,"value":6709}," product.id ",{"type":46,"tag":499,"props":6711,"children":6712},{"style":557},[6713],{"type":52,"value":3228},{"type":46,"tag":499,"props":6715,"children":6716},{"style":563},[6717],{"type":52,"value":6718}," (Not needed in UI - remove) ",{"type":46,"tag":499,"props":6720,"children":6721},{"style":557},[6722],{"type":52,"value":3256},{"type":46,"tag":499,"props":6724,"children":6725},{"class":501,"line":1760},[6726,6730,6735,6739,6744],{"type":46,"tag":499,"props":6727,"children":6728},{"style":557},[6729],{"type":52,"value":3228},{"type":46,"tag":499,"props":6731,"children":6732},{"style":563},[6733],{"type":52,"value":6734}," product.name ",{"type":46,"tag":499,"props":6736,"children":6737},{"style":557},[6738],{"type":52,"value":3228},{"type":46,"tag":499,"props":6740,"children":6741},{"style":563},[6742],{"type":52,"value":6743}," productName: props.Text() ",{"type":46,"tag":499,"props":6745,"children":6746},{"style":557},[6747],{"type":52,"value":3256},{"type":46,"tag":499,"props":6749,"children":6750},{"class":501,"line":1769},[6751,6755,6760,6764,6769],{"type":46,"tag":499,"props":6752,"children":6753},{"style":557},[6754],{"type":52,"value":3228},{"type":46,"tag":499,"props":6756,"children":6757},{"style":563},[6758],{"type":52,"value":6759}," product.price ",{"type":46,"tag":499,"props":6761,"children":6762},{"style":557},[6763],{"type":52,"value":3228},{"type":46,"tag":499,"props":6765,"children":6766},{"style":563},[6767],{"type":52,"value":6768}," productPrice: props.Number() ",{"type":46,"tag":499,"props":6770,"children":6771},{"style":557},[6772],{"type":52,"value":3256},{"type":46,"tag":499,"props":6774,"children":6775},{"class":501,"line":1786},[6776,6780,6785,6789,6794],{"type":46,"tag":499,"props":6777,"children":6778},{"style":557},[6779],{"type":52,"value":3228},{"type":46,"tag":499,"props":6781,"children":6782},{"style":563},[6783],{"type":52,"value":6784}," product.image ",{"type":46,"tag":499,"props":6786,"children":6787},{"style":557},[6788],{"type":52,"value":3228},{"type":46,"tag":499,"props":6790,"children":6791},{"style":563},[6792],{"type":52,"value":6793}," productImage: props.Image() ",{"type":46,"tag":499,"props":6795,"children":6796},{"style":557},[6797],{"type":52,"value":3256},{"type":46,"tag":499,"props":6799,"children":6800},{"class":501,"line":1859},[6801,6805,6810,6814,6819],{"type":46,"tag":499,"props":6802,"children":6803},{"style":557},[6804],{"type":52,"value":3228},{"type":46,"tag":499,"props":6806,"children":6807},{"style":563},[6808],{"type":52,"value":6809}," product.category ",{"type":46,"tag":499,"props":6811,"children":6812},{"style":557},[6813],{"type":52,"value":3228},{"type":46,"tag":499,"props":6815,"children":6816},{"style":563},[6817],{"type":52,"value":6818}," productCategory: props.Variant() ",{"type":46,"tag":499,"props":6820,"children":6821},{"style":557},[6822],{"type":52,"value":3256},{"type":46,"tag":499,"props":6824,"children":6825},{"class":501,"line":1926},[6826,6830,6835,6839,6844],{"type":46,"tag":499,"props":6827,"children":6828},{"style":557},[6829],{"type":52,"value":3228},{"type":46,"tag":499,"props":6831,"children":6832},{"style":563},[6833],{"type":52,"value":6834}," showBadge ",{"type":46,"tag":499,"props":6836,"children":6837},{"style":557},[6838],{"type":52,"value":3228},{"type":46,"tag":499,"props":6840,"children":6841},{"style":563},[6842],{"type":52,"value":6843}," showBadge: props.Boolean() ",{"type":46,"tag":499,"props":6845,"children":6846},{"style":557},[6847],{"type":52,"value":3256},{"type":46,"tag":499,"props":6849,"children":6850},{"class":501,"line":1990},[6851],{"type":46,"tag":499,"props":6852,"children":6853},{"emptyLinePlaceholder":1754},[6854],{"type":52,"value":1757},{"type":46,"tag":499,"props":6856,"children":6857},{"class":501,"line":2971},[6858],{"type":46,"tag":499,"props":6859,"children":6860},{"style":563},[6861],{"type":52,"value":3780},{"type":46,"tag":499,"props":6863,"children":6864},{"class":501,"line":28},[6865],{"type":46,"tag":499,"props":6866,"children":6867},{"emptyLinePlaceholder":1754},[6868],{"type":52,"value":1757},{"type":46,"tag":499,"props":6870,"children":6871},{"class":501,"line":3020},[6872,6876],{"type":46,"tag":499,"props":6873,"children":6874},{"style":557},[6875],{"type":52,"value":3090},{"type":46,"tag":499,"props":6877,"children":6878},{"style":506},[6879],{"type":52,"value":3799},{"type":46,"tag":499,"props":6881,"children":6882},{"class":501,"line":3028},[6883],{"type":46,"tag":499,"props":6884,"children":6885},{"emptyLinePlaceholder":1754},[6886],{"type":52,"value":1757},{"type":46,"tag":499,"props":6888,"children":6889},{"class":501,"line":3802},[6890,6894],{"type":46,"tag":499,"props":6891,"children":6892},{"style":557},[6893],{"type":52,"value":3128},{"type":46,"tag":499,"props":6895,"children":6896},{"style":506},[6897],{"type":52,"value":6898},"ProductCard.webflow.tsx\n",{"type":46,"tag":499,"props":6900,"children":6901},{"class":501,"line":3810},[6902,6906],{"type":46,"tag":499,"props":6903,"children":6904},{"style":512},[6905],{"type":52,"value":3829},{"type":46,"tag":499,"props":6907,"children":6908},{"style":3832},[6909],{"type":52,"value":3835},{"type":46,"tag":499,"props":6911,"children":6912},{"class":501,"line":3823},[6913,6917,6921,6925,6929,6933,6937,6941,6945],{"type":46,"tag":499,"props":6914,"children":6915},{"style":551},[6916],{"type":52,"value":554},{"type":46,"tag":499,"props":6918,"children":6919},{"style":557},[6920],{"type":52,"value":560},{"type":46,"tag":499,"props":6922,"children":6923},{"style":563},[6924],{"type":52,"value":2643},{"type":46,"tag":499,"props":6926,"children":6927},{"style":557},[6928],{"type":52,"value":571},{"type":46,"tag":499,"props":6930,"children":6931},{"style":551},[6932],{"type":52,"value":576},{"type":46,"tag":499,"props":6934,"children":6935},{"style":557},[6936],{"type":52,"value":581},{"type":46,"tag":499,"props":6938,"children":6939},{"style":512},[6940],{"type":52,"value":2660},{"type":46,"tag":499,"props":6942,"children":6943},{"style":557},[6944],{"type":52,"value":591},{"type":46,"tag":499,"props":6946,"children":6947},{"style":557},[6948],{"type":52,"value":596},{"type":46,"tag":499,"props":6950,"children":6951},{"class":501,"line":3838},[6952,6956,6960,6964,6968,6972,6976,6980,6984],{"type":46,"tag":499,"props":6953,"children":6954},{"style":551},[6955],{"type":52,"value":554},{"type":46,"tag":499,"props":6957,"children":6958},{"style":557},[6959],{"type":52,"value":560},{"type":46,"tag":499,"props":6961,"children":6962},{"style":563},[6963],{"type":52,"value":1430},{"type":46,"tag":499,"props":6965,"children":6966},{"style":557},[6967],{"type":52,"value":571},{"type":46,"tag":499,"props":6969,"children":6970},{"style":551},[6971],{"type":52,"value":576},{"type":46,"tag":499,"props":6973,"children":6974},{"style":557},[6975],{"type":52,"value":581},{"type":46,"tag":499,"props":6977,"children":6978},{"style":512},[6979],{"type":52,"value":2700},{"type":46,"tag":499,"props":6981,"children":6982},{"style":557},[6983],{"type":52,"value":591},{"type":46,"tag":499,"props":6985,"children":6986},{"style":557},[6987],{"type":52,"value":596},{"type":46,"tag":499,"props":6989,"children":6990},{"class":501,"line":3878},[6991,6995,6999,7004,7008,7012,7016,7021,7025],{"type":46,"tag":499,"props":6992,"children":6993},{"style":551},[6994],{"type":52,"value":554},{"type":46,"tag":499,"props":6996,"children":6997},{"style":557},[6998],{"type":52,"value":560},{"type":46,"tag":499,"props":7000,"children":7001},{"style":563},[7002],{"type":52,"value":7003}," ProductCard",{"type":46,"tag":499,"props":7005,"children":7006},{"style":557},[7007],{"type":52,"value":571},{"type":46,"tag":499,"props":7009,"children":7010},{"style":551},[7011],{"type":52,"value":576},{"type":46,"tag":499,"props":7013,"children":7014},{"style":557},[7015],{"type":52,"value":581},{"type":46,"tag":499,"props":7017,"children":7018},{"style":512},[7019],{"type":52,"value":7020},".\u002FProductCard",{"type":46,"tag":499,"props":7022,"children":7023},{"style":557},[7024],{"type":52,"value":591},{"type":46,"tag":499,"props":7026,"children":7027},{"style":557},[7028],{"type":52,"value":596},{"type":46,"tag":499,"props":7030,"children":7031},{"class":501,"line":3918},[7032,7036,7040,7045,7049],{"type":46,"tag":499,"props":7033,"children":7034},{"style":551},[7035],{"type":52,"value":554},{"type":46,"tag":499,"props":7037,"children":7038},{"style":557},[7039],{"type":52,"value":581},{"type":46,"tag":499,"props":7041,"children":7042},{"style":512},[7043],{"type":52,"value":7044},".\u002FProductCard.module.css",{"type":46,"tag":499,"props":7046,"children":7047},{"style":557},[7048],{"type":52,"value":591},{"type":46,"tag":499,"props":7050,"children":7051},{"style":557},[7052],{"type":52,"value":596},{"type":46,"tag":499,"props":7054,"children":7055},{"class":501,"line":3960},[7056],{"type":46,"tag":499,"props":7057,"children":7058},{"emptyLinePlaceholder":1754},[7059],{"type":52,"value":1757},{"type":46,"tag":499,"props":7061,"children":7062},{"class":501,"line":3985},[7063,7067,7071,7075,7080,7084],{"type":46,"tag":499,"props":7064,"children":7065},{"style":551},[7066],{"type":52,"value":605},{"type":46,"tag":499,"props":7068,"children":7069},{"style":551},[7070],{"type":52,"value":2805},{"type":46,"tag":499,"props":7072,"children":7073},{"style":1808},[7074],{"type":52,"value":2643},{"type":46,"tag":499,"props":7076,"children":7077},{"style":563},[7078],{"type":52,"value":7079},"(ProductCard",{"type":46,"tag":499,"props":7081,"children":7082},{"style":557},[7083],{"type":52,"value":2241},{"type":46,"tag":499,"props":7085,"children":7086},{"style":557},[7087],{"type":52,"value":822},{"type":46,"tag":499,"props":7089,"children":7090},{"class":501,"line":3993},[7091,7095,7099,7103,7108,7112],{"type":46,"tag":499,"props":7092,"children":7093},{"style":1661},[7094],{"type":52,"value":2186},{"type":46,"tag":499,"props":7096,"children":7097},{"style":557},[7098],{"type":52,"value":172},{"type":46,"tag":499,"props":7100,"children":7101},{"style":557},[7102],{"type":52,"value":581},{"type":46,"tag":499,"props":7104,"children":7105},{"style":512},[7106],{"type":52,"value":7107},"ProductCard",{"type":46,"tag":499,"props":7109,"children":7110},{"style":557},[7111],{"type":52,"value":591},{"type":46,"tag":499,"props":7113,"children":7114},{"style":557},[7115],{"type":52,"value":862},{"type":46,"tag":499,"props":7117,"children":7118},{"class":501,"line":4022},[7119,7123,7127,7131,7136,7140],{"type":46,"tag":499,"props":7120,"children":7121},{"style":1661},[7122],{"type":52,"value":2858},{"type":46,"tag":499,"props":7124,"children":7125},{"style":557},[7126],{"type":52,"value":172},{"type":46,"tag":499,"props":7128,"children":7129},{"style":557},[7130],{"type":52,"value":581},{"type":46,"tag":499,"props":7132,"children":7133},{"style":512},[7134],{"type":52,"value":7135},"Product display card with image, name, price, and category",{"type":46,"tag":499,"props":7137,"children":7138},{"style":557},[7139],{"type":52,"value":591},{"type":46,"tag":499,"props":7141,"children":7142},{"style":557},[7143],{"type":52,"value":862},{"type":46,"tag":499,"props":7145,"children":7146},{"class":501,"line":4051},[7147,7151,7155,7159,7163,7167],{"type":46,"tag":499,"props":7148,"children":7149},{"style":1661},[7150],{"type":52,"value":2887},{"type":46,"tag":499,"props":7152,"children":7153},{"style":557},[7154],{"type":52,"value":172},{"type":46,"tag":499,"props":7156,"children":7157},{"style":557},[7158],{"type":52,"value":581},{"type":46,"tag":499,"props":7160,"children":7161},{"style":512},[7162],{"type":52,"value":4098},{"type":46,"tag":499,"props":7164,"children":7165},{"style":557},[7166],{"type":52,"value":591},{"type":46,"tag":499,"props":7168,"children":7169},{"style":557},[7170],{"type":52,"value":862},{"type":46,"tag":499,"props":7172,"children":7173},{"class":501,"line":4080},[7174,7178,7182],{"type":46,"tag":499,"props":7175,"children":7176},{"style":1661},[7177],{"type":52,"value":2916},{"type":46,"tag":499,"props":7179,"children":7180},{"style":557},[7181],{"type":52,"value":172},{"type":46,"tag":499,"props":7183,"children":7184},{"style":557},[7185],{"type":52,"value":822},{"type":46,"tag":499,"props":7187,"children":7188},{"class":501,"line":4109},[7189,7194,7198,7202,7206,7210,7214],{"type":46,"tag":499,"props":7190,"children":7191},{"style":1661},[7192],{"type":52,"value":7193},"    productName",{"type":46,"tag":499,"props":7195,"children":7196},{"style":557},[7197],{"type":52,"value":172},{"type":46,"tag":499,"props":7199,"children":7200},{"style":563},[7201],{"type":52,"value":1430},{"type":46,"tag":499,"props":7203,"children":7204},{"style":557},[7205],{"type":52,"value":1805},{"type":46,"tag":499,"props":7207,"children":7208},{"style":1808},[7209],{"type":52,"value":1811},{"type":46,"tag":499,"props":7211,"children":7212},{"style":563},[7213],{"type":52,"value":1816},{"type":46,"tag":499,"props":7215,"children":7216},{"style":557},[7217],{"type":52,"value":796},{"type":46,"tag":499,"props":7219,"children":7220},{"class":501,"line":4125},[7221,7225,7229,7233,7238,7242],{"type":46,"tag":499,"props":7222,"children":7223},{"style":1661},[7224],{"type":52,"value":4164},{"type":46,"tag":499,"props":7226,"children":7227},{"style":557},[7228],{"type":52,"value":172},{"type":46,"tag":499,"props":7230,"children":7231},{"style":557},[7232],{"type":52,"value":581},{"type":46,"tag":499,"props":7234,"children":7235},{"style":512},[7236],{"type":52,"value":7237},"Product Name",{"type":46,"tag":499,"props":7239,"children":7240},{"style":557},[7241],{"type":52,"value":591},{"type":46,"tag":499,"props":7243,"children":7244},{"style":557},[7245],{"type":52,"value":862},{"type":46,"tag":499,"props":7247,"children":7248},{"class":501,"line":4158},[7249,7253,7257,7261,7266],{"type":46,"tag":499,"props":7250,"children":7251},{"style":1661},[7252],{"type":52,"value":4194},{"type":46,"tag":499,"props":7254,"children":7255},{"style":557},[7256],{"type":52,"value":172},{"type":46,"tag":499,"props":7258,"children":7259},{"style":557},[7260],{"type":52,"value":581},{"type":46,"tag":499,"props":7262,"children":7263},{"style":512},[7264],{"type":52,"value":7265},"Product Title",{"type":46,"tag":499,"props":7267,"children":7268},{"style":557},[7269],{"type":52,"value":924},{"type":46,"tag":499,"props":7271,"children":7272},{"class":501,"line":4188},[7273,7277,7281],{"type":46,"tag":499,"props":7274,"children":7275},{"style":557},[7276],{"type":52,"value":4220},{"type":46,"tag":499,"props":7278,"children":7279},{"style":563},[7280],{"type":52,"value":1852},{"type":46,"tag":499,"props":7282,"children":7283},{"style":557},[7284],{"type":52,"value":862},{"type":46,"tag":499,"props":7286,"children":7287},{"class":501,"line":4214},[7288,7293,7297,7301,7305,7309,7313],{"type":46,"tag":499,"props":7289,"children":7290},{"style":1661},[7291],{"type":52,"value":7292},"    productPrice",{"type":46,"tag":499,"props":7294,"children":7295},{"style":557},[7296],{"type":52,"value":172},{"type":46,"tag":499,"props":7298,"children":7299},{"style":563},[7300],{"type":52,"value":1430},{"type":46,"tag":499,"props":7302,"children":7303},{"style":557},[7304],{"type":52,"value":1805},{"type":46,"tag":499,"props":7306,"children":7307},{"style":1808},[7308],{"type":52,"value":4459},{"type":46,"tag":499,"props":7310,"children":7311},{"style":563},[7312],{"type":52,"value":1816},{"type":46,"tag":499,"props":7314,"children":7315},{"style":557},[7316],{"type":52,"value":796},{"type":46,"tag":499,"props":7318,"children":7319},{"class":501,"line":4231},[7320,7324,7328,7332,7337,7341],{"type":46,"tag":499,"props":7321,"children":7322},{"style":1661},[7323],{"type":52,"value":4164},{"type":46,"tag":499,"props":7325,"children":7326},{"style":557},[7327],{"type":52,"value":172},{"type":46,"tag":499,"props":7329,"children":7330},{"style":557},[7331],{"type":52,"value":581},{"type":46,"tag":499,"props":7333,"children":7334},{"style":512},[7335],{"type":52,"value":7336},"Price",{"type":46,"tag":499,"props":7338,"children":7339},{"style":557},[7340],{"type":52,"value":591},{"type":46,"tag":499,"props":7342,"children":7343},{"style":557},[7344],{"type":52,"value":862},{"type":46,"tag":499,"props":7346,"children":7347},{"class":501,"line":4264},[7348,7352,7356],{"type":46,"tag":499,"props":7349,"children":7350},{"style":1661},[7351],{"type":52,"value":4194},{"type":46,"tag":499,"props":7353,"children":7354},{"style":557},[7355],{"type":52,"value":172},{"type":46,"tag":499,"props":7357,"children":7358},{"style":899},[7359],{"type":52,"value":7360}," 29.99\n",{"type":46,"tag":499,"props":7362,"children":7363},{"class":501,"line":4292},[7364,7368,7372],{"type":46,"tag":499,"props":7365,"children":7366},{"style":557},[7367],{"type":52,"value":4220},{"type":46,"tag":499,"props":7369,"children":7370},{"style":563},[7371],{"type":52,"value":1852},{"type":46,"tag":499,"props":7373,"children":7374},{"style":557},[7375],{"type":52,"value":862},{"type":46,"tag":499,"props":7377,"children":7378},{"class":501,"line":4317},[7379,7384,7388,7392,7396,7400,7404],{"type":46,"tag":499,"props":7380,"children":7381},{"style":1661},[7382],{"type":52,"value":7383},"    productImage",{"type":46,"tag":499,"props":7385,"children":7386},{"style":557},[7387],{"type":52,"value":172},{"type":46,"tag":499,"props":7389,"children":7390},{"style":563},[7391],{"type":52,"value":1430},{"type":46,"tag":499,"props":7393,"children":7394},{"style":557},[7395],{"type":52,"value":1805},{"type":46,"tag":499,"props":7397,"children":7398},{"style":1808},[7399],{"type":52,"value":1882},{"type":46,"tag":499,"props":7401,"children":7402},{"style":563},[7403],{"type":52,"value":1816},{"type":46,"tag":499,"props":7405,"children":7406},{"style":557},[7407],{"type":52,"value":796},{"type":46,"tag":499,"props":7409,"children":7410},{"class":501,"line":4333},[7411,7415,7419,7423,7428],{"type":46,"tag":499,"props":7412,"children":7413},{"style":1661},[7414],{"type":52,"value":4164},{"type":46,"tag":499,"props":7416,"children":7417},{"style":557},[7418],{"type":52,"value":172},{"type":46,"tag":499,"props":7420,"children":7421},{"style":557},[7422],{"type":52,"value":581},{"type":46,"tag":499,"props":7424,"children":7425},{"style":512},[7426],{"type":52,"value":7427},"Product Image",{"type":46,"tag":499,"props":7429,"children":7430},{"style":557},[7431],{"type":52,"value":924},{"type":46,"tag":499,"props":7433,"children":7434},{"class":501,"line":4366},[7435,7439,7443],{"type":46,"tag":499,"props":7436,"children":7437},{"style":557},[7438],{"type":52,"value":4220},{"type":46,"tag":499,"props":7440,"children":7441},{"style":563},[7442],{"type":52,"value":1852},{"type":46,"tag":499,"props":7444,"children":7445},{"style":557},[7446],{"type":52,"value":862},{"type":46,"tag":499,"props":7448,"children":7449},{"class":501,"line":4395},[7450,7455,7459,7463,7467,7471,7475],{"type":46,"tag":499,"props":7451,"children":7452},{"style":1661},[7453],{"type":52,"value":7454},"    productCategory",{"type":46,"tag":499,"props":7456,"children":7457},{"style":557},[7458],{"type":52,"value":172},{"type":46,"tag":499,"props":7460,"children":7461},{"style":563},[7462],{"type":52,"value":1430},{"type":46,"tag":499,"props":7464,"children":7465},{"style":557},[7466],{"type":52,"value":1805},{"type":46,"tag":499,"props":7468,"children":7469},{"style":1808},[7470],{"type":52,"value":2170},{"type":46,"tag":499,"props":7472,"children":7473},{"style":563},[7474],{"type":52,"value":1816},{"type":46,"tag":499,"props":7476,"children":7477},{"style":557},[7478],{"type":52,"value":796},{"type":46,"tag":499,"props":7480,"children":7481},{"class":501,"line":4420},[7482,7486,7490,7494,7499,7503],{"type":46,"tag":499,"props":7483,"children":7484},{"style":1661},[7485],{"type":52,"value":4164},{"type":46,"tag":499,"props":7487,"children":7488},{"style":557},[7489],{"type":52,"value":172},{"type":46,"tag":499,"props":7491,"children":7492},{"style":557},[7493],{"type":52,"value":581},{"type":46,"tag":499,"props":7495,"children":7496},{"style":512},[7497],{"type":52,"value":7498},"Category",{"type":46,"tag":499,"props":7500,"children":7501},{"style":557},[7502],{"type":52,"value":591},{"type":46,"tag":499,"props":7504,"children":7505},{"style":557},[7506],{"type":52,"value":862},{"type":46,"tag":499,"props":7508,"children":7509},{"class":501,"line":4436},[7510,7515,7519,7523,7527,7532,7536,7540,7544,7549,7553,7557,7561,7566,7570,7574],{"type":46,"tag":499,"props":7511,"children":7512},{"style":1661},[7513],{"type":52,"value":7514},"      options",{"type":46,"tag":499,"props":7516,"children":7517},{"style":557},[7518],{"type":52,"value":172},{"type":46,"tag":499,"props":7520,"children":7521},{"style":563},[7522],{"type":52,"value":2224},{"type":46,"tag":499,"props":7524,"children":7525},{"style":557},[7526],{"type":52,"value":591},{"type":46,"tag":499,"props":7528,"children":7529},{"style":512},[7530],{"type":52,"value":7531},"electronics",{"type":46,"tag":499,"props":7533,"children":7534},{"style":557},[7535],{"type":52,"value":591},{"type":46,"tag":499,"props":7537,"children":7538},{"style":557},[7539],{"type":52,"value":2241},{"type":46,"tag":499,"props":7541,"children":7542},{"style":557},[7543],{"type":52,"value":581},{"type":46,"tag":499,"props":7545,"children":7546},{"style":512},[7547],{"type":52,"value":7548},"clothing",{"type":46,"tag":499,"props":7550,"children":7551},{"style":557},[7552],{"type":52,"value":591},{"type":46,"tag":499,"props":7554,"children":7555},{"style":557},[7556],{"type":52,"value":2241},{"type":46,"tag":499,"props":7558,"children":7559},{"style":557},[7560],{"type":52,"value":581},{"type":46,"tag":499,"props":7562,"children":7563},{"style":512},[7564],{"type":52,"value":7565},"home",{"type":46,"tag":499,"props":7567,"children":7568},{"style":557},[7569],{"type":52,"value":591},{"type":46,"tag":499,"props":7571,"children":7572},{"style":563},[7573],{"type":52,"value":2291},{"type":46,"tag":499,"props":7575,"children":7576},{"style":557},[7577],{"type":52,"value":862},{"type":46,"tag":499,"props":7579,"children":7580},{"class":501,"line":4470},[7581,7585,7589,7593,7597],{"type":46,"tag":499,"props":7582,"children":7583},{"style":1661},[7584],{"type":52,"value":4194},{"type":46,"tag":499,"props":7586,"children":7587},{"style":557},[7588],{"type":52,"value":172},{"type":46,"tag":499,"props":7590,"children":7591},{"style":557},[7592],{"type":52,"value":581},{"type":46,"tag":499,"props":7594,"children":7595},{"style":512},[7596],{"type":52,"value":7531},{"type":46,"tag":499,"props":7598,"children":7599},{"style":557},[7600],{"type":52,"value":924},{"type":46,"tag":499,"props":7602,"children":7603},{"class":501,"line":4499},[7604,7608,7612],{"type":46,"tag":499,"props":7605,"children":7606},{"style":557},[7607],{"type":52,"value":4220},{"type":46,"tag":499,"props":7609,"children":7610},{"style":563},[7611],{"type":52,"value":1852},{"type":46,"tag":499,"props":7613,"children":7614},{"style":557},[7615],{"type":52,"value":862},{"type":46,"tag":499,"props":7617,"children":7618},{"class":501,"line":4520},[7619,7624,7628,7632,7636,7641,7645],{"type":46,"tag":499,"props":7620,"children":7621},{"style":1661},[7622],{"type":52,"value":7623},"    showBadge",{"type":46,"tag":499,"props":7625,"children":7626},{"style":557},[7627],{"type":52,"value":172},{"type":46,"tag":499,"props":7629,"children":7630},{"style":563},[7631],{"type":52,"value":1430},{"type":46,"tag":499,"props":7633,"children":7634},{"style":557},[7635],{"type":52,"value":1805},{"type":46,"tag":499,"props":7637,"children":7638},{"style":1808},[7639],{"type":52,"value":7640},"Boolean",{"type":46,"tag":499,"props":7642,"children":7643},{"style":563},[7644],{"type":52,"value":1816},{"type":46,"tag":499,"props":7646,"children":7647},{"style":557},[7648],{"type":52,"value":796},{"type":46,"tag":499,"props":7650,"children":7651},{"class":501,"line":4542},[7652,7656,7660,7664,7669,7673],{"type":46,"tag":499,"props":7653,"children":7654},{"style":1661},[7655],{"type":52,"value":4164},{"type":46,"tag":499,"props":7657,"children":7658},{"style":557},[7659],{"type":52,"value":172},{"type":46,"tag":499,"props":7661,"children":7662},{"style":557},[7663],{"type":52,"value":581},{"type":46,"tag":499,"props":7665,"children":7666},{"style":512},[7667],{"type":52,"value":7668},"Show Category Badge",{"type":46,"tag":499,"props":7670,"children":7671},{"style":557},[7672],{"type":52,"value":591},{"type":46,"tag":499,"props":7674,"children":7675},{"style":557},[7676],{"type":52,"value":862},{"type":46,"tag":499,"props":7678,"children":7679},{"class":501,"line":4560},[7680,7684,7688],{"type":46,"tag":499,"props":7681,"children":7682},{"style":1661},[7683],{"type":52,"value":4194},{"type":46,"tag":499,"props":7685,"children":7686},{"style":557},[7687],{"type":52,"value":172},{"type":46,"tag":499,"props":7689,"children":7690},{"style":2984},[7691],{"type":52,"value":4630},{"type":46,"tag":499,"props":7693,"children":7694},{"class":501,"line":4572},[7695,7699],{"type":46,"tag":499,"props":7696,"children":7697},{"style":557},[7698],{"type":52,"value":4220},{"type":46,"tag":499,"props":7700,"children":7701},{"style":563},[7702],{"type":52,"value":1987},{"type":46,"tag":499,"props":7704,"children":7705},{"class":501,"line":4580},[7706],{"type":46,"tag":499,"props":7707,"children":7708},{"style":557},[7709],{"type":52,"value":2940},{"type":46,"tag":499,"props":7711,"children":7712},{"class":501,"line":4596},[7713,7717,7721],{"type":46,"tag":499,"props":7714,"children":7715},{"style":1661},[7716],{"type":52,"value":2215},{"type":46,"tag":499,"props":7718,"children":7719},{"style":557},[7720],{"type":52,"value":172},{"type":46,"tag":499,"props":7722,"children":7723},{"style":557},[7724],{"type":52,"value":822},{"type":46,"tag":499,"props":7726,"children":7727},{"class":501,"line":4616},[7728,7732,7736,7740],{"type":46,"tag":499,"props":7729,"children":7730},{"style":1661},[7731],{"type":52,"value":2977},{"type":46,"tag":499,"props":7733,"children":7734},{"style":557},[7735],{"type":52,"value":172},{"type":46,"tag":499,"props":7737,"children":7738},{"style":2984},[7739],{"type":52,"value":2987},{"type":46,"tag":499,"props":7741,"children":7742},{"style":557},[7743],{"type":52,"value":862},{"type":46,"tag":499,"props":7745,"children":7746},{"class":501,"line":4633},[7747,7751,7755],{"type":46,"tag":499,"props":7748,"children":7749},{"style":1661},[7750],{"type":52,"value":3004},{"type":46,"tag":499,"props":7752,"children":7753},{"style":557},[7754],{"type":52,"value":172},{"type":46,"tag":499,"props":7756,"children":7757},{"style":2984},[7758],{"type":52,"value":4630},{"type":46,"tag":499,"props":7760,"children":7761},{"class":501,"line":4641},[7762],{"type":46,"tag":499,"props":7763,"children":7764},{"style":557},[7765],{"type":52,"value":942},{"type":46,"tag":499,"props":7767,"children":7769},{"class":501,"line":7768},57,[7770,7774,7778],{"type":46,"tag":499,"props":7771,"children":7772},{"style":557},[7773],{"type":52,"value":2327},{"type":46,"tag":499,"props":7775,"children":7776},{"style":563},[7777],{"type":52,"value":1852},{"type":46,"tag":499,"props":7779,"children":7780},{"style":557},[7781],{"type":52,"value":596},{"type":46,"tag":143,"props":7783,"children":7785},{"id":7784},"updated-productcardtsx",[7786],{"type":52,"value":7787},"Updated ProductCard.tsx",{"type":46,"tag":488,"props":7789,"children":7791},{"className":540,"code":7790,"language":19,"meta":493,"style":493},"import styles from \".\u002FProductCard.module.css\";\n\ninterface ProductCardProps {\n  productName: string;\n  productPrice: number;\n  productImage?: { src: string; alt?: string };\n  productCategory: 'electronics' | 'clothing' | 'home';\n  showBadge?: boolean;\n}\n\nexport const ProductCard = ({\n  productName,\n  productPrice,\n  productImage,\n  productCategory,\n  showBadge = true\n}: ProductCardProps) => (\n  \u003Cdiv className={styles[\"card\"]}>\n    {productImage && (\n      \u003Cimg src={productImage.src} alt={productImage.alt || productName} \u002F>\n    )}\n    {showBadge && \u003Cspan className={styles[\"badge\"]}>{productCategory}\u003C\u002Fspan>}\n    \u003Ch3>{productName}\u003C\u002Fh3>\n    \u003Cp>${productPrice.toFixed(2)}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n);\n",[7792],{"type":46,"tag":61,"props":7793,"children":7794},{"__ignoreMap":493},[7795,7826,7833,7849,7869,7889,7939,7999,8020,8027,8034,8062,8073,8084,8095,8106,8122,8147,8188,8196,8204,8212,8238,8246,8254,8262],{"type":46,"tag":499,"props":7796,"children":7797},{"class":501,"line":502},[7798,7802,7806,7810,7814,7818,7822],{"type":46,"tag":499,"props":7799,"children":7800},{"style":551},[7801],{"type":52,"value":554},{"type":46,"tag":499,"props":7803,"children":7804},{"style":563},[7805],{"type":52,"value":4708},{"type":46,"tag":499,"props":7807,"children":7808},{"style":551},[7809],{"type":52,"value":4713},{"type":46,"tag":499,"props":7811,"children":7812},{"style":557},[7813],{"type":52,"value":581},{"type":46,"tag":499,"props":7815,"children":7816},{"style":512},[7817],{"type":52,"value":7044},{"type":46,"tag":499,"props":7819,"children":7820},{"style":557},[7821],{"type":52,"value":591},{"type":46,"tag":499,"props":7823,"children":7824},{"style":557},[7825],{"type":52,"value":596},{"type":46,"tag":499,"props":7827,"children":7828},{"class":501,"line":599},[7829],{"type":46,"tag":499,"props":7830,"children":7831},{"emptyLinePlaceholder":1754},[7832],{"type":52,"value":1757},{"type":46,"tag":499,"props":7834,"children":7835},{"class":501,"line":825},[7836,7840,7845],{"type":46,"tag":499,"props":7837,"children":7838},{"style":608},[7839],{"type":52,"value":1646},{"type":46,"tag":499,"props":7841,"children":7842},{"style":506},[7843],{"type":52,"value":7844}," ProductCardProps",{"type":46,"tag":499,"props":7846,"children":7847},{"style":557},[7848],{"type":52,"value":822},{"type":46,"tag":499,"props":7850,"children":7851},{"class":501,"line":865},[7852,7857,7861,7865],{"type":46,"tag":499,"props":7853,"children":7854},{"style":1661},[7855],{"type":52,"value":7856},"  productName",{"type":46,"tag":499,"props":7858,"children":7859},{"style":557},[7860],{"type":52,"value":172},{"type":46,"tag":499,"props":7862,"children":7863},{"style":506},[7864],{"type":52,"value":1689},{"type":46,"tag":499,"props":7866,"children":7867},{"style":557},[7868],{"type":52,"value":596},{"type":46,"tag":499,"props":7870,"children":7871},{"class":501,"line":890},[7872,7877,7881,7885],{"type":46,"tag":499,"props":7873,"children":7874},{"style":1661},[7875],{"type":52,"value":7876},"  productPrice",{"type":46,"tag":499,"props":7878,"children":7879},{"style":557},[7880],{"type":52,"value":172},{"type":46,"tag":499,"props":7882,"children":7883},{"style":506},[7884],{"type":52,"value":2107},{"type":46,"tag":499,"props":7886,"children":7887},{"style":557},[7888],{"type":52,"value":596},{"type":46,"tag":499,"props":7890,"children":7891},{"class":501,"line":927},[7892,7897,7901,7905,7910,7914,7918,7922,7927,7931,7935],{"type":46,"tag":499,"props":7893,"children":7894},{"style":1661},[7895],{"type":52,"value":7896},"  productImage",{"type":46,"tag":499,"props":7898,"children":7899},{"style":557},[7900],{"type":52,"value":2391},{"type":46,"tag":499,"props":7902,"children":7903},{"style":557},[7904],{"type":52,"value":560},{"type":46,"tag":499,"props":7906,"children":7907},{"style":1661},[7908],{"type":52,"value":7909}," src",{"type":46,"tag":499,"props":7911,"children":7912},{"style":557},[7913],{"type":52,"value":172},{"type":46,"tag":499,"props":7915,"children":7916},{"style":506},[7917],{"type":52,"value":1689},{"type":46,"tag":499,"props":7919,"children":7920},{"style":557},[7921],{"type":52,"value":2112},{"type":46,"tag":499,"props":7923,"children":7924},{"style":1661},[7925],{"type":52,"value":7926}," alt",{"type":46,"tag":499,"props":7928,"children":7929},{"style":557},[7930],{"type":52,"value":2391},{"type":46,"tag":499,"props":7932,"children":7933},{"style":506},[7934],{"type":52,"value":1689},{"type":46,"tag":499,"props":7936,"children":7937},{"style":557},[7938],{"type":52,"value":2130},{"type":46,"tag":499,"props":7940,"children":7941},{"class":501,"line":936},[7942,7947,7951,7955,7959,7963,7967,7971,7975,7979,7983,7987,7991,7995],{"type":46,"tag":499,"props":7943,"children":7944},{"style":1661},[7945],{"type":52,"value":7946},"  productCategory",{"type":46,"tag":499,"props":7948,"children":7949},{"style":557},[7950],{"type":52,"value":172},{"type":46,"tag":499,"props":7952,"children":7953},{"style":557},[7954],{"type":52,"value":5567},{"type":46,"tag":499,"props":7956,"children":7957},{"style":512},[7958],{"type":52,"value":7531},{"type":46,"tag":499,"props":7960,"children":7961},{"style":557},[7962],{"type":52,"value":5576},{"type":46,"tag":499,"props":7964,"children":7965},{"style":557},[7966],{"type":52,"value":2055},{"type":46,"tag":499,"props":7968,"children":7969},{"style":557},[7970],{"type":52,"value":5567},{"type":46,"tag":499,"props":7972,"children":7973},{"style":512},[7974],{"type":52,"value":7548},{"type":46,"tag":499,"props":7976,"children":7977},{"style":557},[7978],{"type":52,"value":5576},{"type":46,"tag":499,"props":7980,"children":7981},{"style":557},[7982],{"type":52,"value":2055},{"type":46,"tag":499,"props":7984,"children":7985},{"style":557},[7986],{"type":52,"value":5567},{"type":46,"tag":499,"props":7988,"children":7989},{"style":512},[7990],{"type":52,"value":7565},{"type":46,"tag":499,"props":7992,"children":7993},{"style":557},[7994],{"type":52,"value":5576},{"type":46,"tag":499,"props":7996,"children":7997},{"style":557},[7998],{"type":52,"value":596},{"type":46,"tag":499,"props":8000,"children":8001},{"class":501,"line":945},[8002,8007,8011,8016],{"type":46,"tag":499,"props":8003,"children":8004},{"style":1661},[8005],{"type":52,"value":8006},"  showBadge",{"type":46,"tag":499,"props":8008,"children":8009},{"style":557},[8010],{"type":52,"value":2391},{"type":46,"tag":499,"props":8012,"children":8013},{"style":506},[8014],{"type":52,"value":8015}," boolean",{"type":46,"tag":499,"props":8017,"children":8018},{"style":557},[8019],{"type":52,"value":596},{"type":46,"tag":499,"props":8021,"children":8022},{"class":501,"line":1750},[8023],{"type":46,"tag":499,"props":8024,"children":8025},{"style":557},[8026],{"type":52,"value":951},{"type":46,"tag":499,"props":8028,"children":8029},{"class":501,"line":1760},[8030],{"type":46,"tag":499,"props":8031,"children":8032},{"emptyLinePlaceholder":1754},[8033],{"type":52,"value":1757},{"type":46,"tag":499,"props":8035,"children":8036},{"class":501,"line":1769},[8037,8041,8045,8050,8054,8058],{"type":46,"tag":499,"props":8038,"children":8039},{"style":551},[8040],{"type":52,"value":605},{"type":46,"tag":499,"props":8042,"children":8043},{"style":608},[8044],{"type":52,"value":611},{"type":46,"tag":499,"props":8046,"children":8047},{"style":563},[8048],{"type":52,"value":8049}," ProductCard ",{"type":46,"tag":499,"props":8051,"children":8052},{"style":557},[8053],{"type":52,"value":621},{"type":46,"tag":499,"props":8055,"children":8056},{"style":563},[8057],{"type":52,"value":5954},{"type":46,"tag":499,"props":8059,"children":8060},{"style":557},[8061],{"type":52,"value":796},{"type":46,"tag":499,"props":8063,"children":8064},{"class":501,"line":1786},[8065,8069],{"type":46,"tag":499,"props":8066,"children":8067},{"style":563},[8068],{"type":52,"value":7856},{"type":46,"tag":499,"props":8070,"children":8071},{"style":557},[8072],{"type":52,"value":862},{"type":46,"tag":499,"props":8074,"children":8075},{"class":501,"line":1859},[8076,8080],{"type":46,"tag":499,"props":8077,"children":8078},{"style":563},[8079],{"type":52,"value":7876},{"type":46,"tag":499,"props":8081,"children":8082},{"style":557},[8083],{"type":52,"value":862},{"type":46,"tag":499,"props":8085,"children":8086},{"class":501,"line":1926},[8087,8091],{"type":46,"tag":499,"props":8088,"children":8089},{"style":563},[8090],{"type":52,"value":7896},{"type":46,"tag":499,"props":8092,"children":8093},{"style":557},[8094],{"type":52,"value":862},{"type":46,"tag":499,"props":8096,"children":8097},{"class":501,"line":1990},[8098,8102],{"type":46,"tag":499,"props":8099,"children":8100},{"style":563},[8101],{"type":52,"value":7946},{"type":46,"tag":499,"props":8103,"children":8104},{"style":557},[8105],{"type":52,"value":862},{"type":46,"tag":499,"props":8107,"children":8108},{"class":501,"line":2971},[8109,8114,8118],{"type":46,"tag":499,"props":8110,"children":8111},{"style":563},[8112],{"type":52,"value":8113},"  showBadge ",{"type":46,"tag":499,"props":8115,"children":8116},{"style":557},[8117],{"type":52,"value":621},{"type":46,"tag":499,"props":8119,"children":8120},{"style":2984},[8121],{"type":52,"value":4630},{"type":46,"tag":499,"props":8123,"children":8124},{"class":501,"line":28},[8125,8130,8134,8138,8143],{"type":46,"tag":499,"props":8126,"children":8127},{"style":557},[8128],{"type":52,"value":8129},"}:",{"type":46,"tag":499,"props":8131,"children":8132},{"style":506},[8133],{"type":52,"value":7844},{"type":46,"tag":499,"props":8135,"children":8136},{"style":563},[8137],{"type":52,"value":5987},{"type":46,"tag":499,"props":8139,"children":8140},{"style":608},[8141],{"type":52,"value":8142},"=>",{"type":46,"tag":499,"props":8144,"children":8145},{"style":563},[8146],{"type":52,"value":6272},{"type":46,"tag":499,"props":8148,"children":8149},{"class":501,"line":3020},[8150,8155,8159,8163,8167,8171,8175,8180,8184],{"type":46,"tag":499,"props":8151,"children":8152},{"style":557},[8153],{"type":52,"value":8154},"  \u003C",{"type":46,"tag":499,"props":8156,"children":8157},{"style":563},[8158],{"type":52,"value":4757},{"type":46,"tag":499,"props":8160,"children":8161},{"style":557},[8162],{"type":52,"value":4762},{"type":46,"tag":499,"props":8164,"children":8165},{"style":563},[8166],{"type":52,"value":4767},{"type":46,"tag":499,"props":8168,"children":8169},{"style":1661},[8170],{"type":52,"value":3100},{"type":46,"tag":499,"props":8172,"children":8173},{"style":557},[8174],{"type":52,"value":591},{"type":46,"tag":499,"props":8176,"children":8177},{"style":1661},[8178],{"type":52,"value":8179},"card",{"type":46,"tag":499,"props":8181,"children":8182},{"style":557},[8183],{"type":52,"value":591},{"type":46,"tag":499,"props":8185,"children":8186},{"style":1661},[8187],{"type":52,"value":4789},{"type":46,"tag":499,"props":8189,"children":8190},{"class":501,"line":3028},[8191],{"type":46,"tag":499,"props":8192,"children":8193},{"style":1661},[8194],{"type":52,"value":8195},"    {productImage && (\n",{"type":46,"tag":499,"props":8197,"children":8198},{"class":501,"line":3802},[8199],{"type":46,"tag":499,"props":8200,"children":8201},{"style":1661},[8202],{"type":52,"value":8203},"      \u003Cimg src={productImage.src} alt={productImage.alt || productName} \u002F>\n",{"type":46,"tag":499,"props":8205,"children":8206},{"class":501,"line":3810},[8207],{"type":46,"tag":499,"props":8208,"children":8209},{"style":1661},[8210],{"type":52,"value":8211},"    )}\n",{"type":46,"tag":499,"props":8213,"children":8214},{"class":501,"line":3823},[8215,8220,8224,8229,8233],{"type":46,"tag":499,"props":8216,"children":8217},{"style":1661},[8218],{"type":52,"value":8219},"    {showBadge && \u003Cspan className={styles[",{"type":46,"tag":499,"props":8221,"children":8222},{"style":557},[8223],{"type":52,"value":591},{"type":46,"tag":499,"props":8225,"children":8226},{"style":1661},[8227],{"type":52,"value":8228},"badge",{"type":46,"tag":499,"props":8230,"children":8231},{"style":557},[8232],{"type":52,"value":591},{"type":46,"tag":499,"props":8234,"children":8235},{"style":1661},[8236],{"type":52,"value":8237},"]}>{productCategory}\u003C\u002Fspan>}\n",{"type":46,"tag":499,"props":8239,"children":8240},{"class":501,"line":3838},[8241],{"type":46,"tag":499,"props":8242,"children":8243},{"style":1661},[8244],{"type":52,"value":8245},"    \u003Ch3>{productName}\u003C\u002Fh3>\n",{"type":46,"tag":499,"props":8247,"children":8248},{"class":501,"line":3878},[8249],{"type":46,"tag":499,"props":8250,"children":8251},{"style":1661},[8252],{"type":52,"value":8253},"    \u003Cp>${productPrice.toFixed(2)}\u003C\u002Fp>\n",{"type":46,"tag":499,"props":8255,"children":8256},{"class":501,"line":3918},[8257],{"type":46,"tag":499,"props":8258,"children":8259},{"style":1661},[8260],{"type":52,"value":8261},"  \u003C\u002Fdiv>\n",{"type":46,"tag":499,"props":8263,"children":8264},{"class":501,"line":3960},[8265],{"type":46,"tag":499,"props":8266,"children":8267},{"style":1661},[8268],{"type":52,"value":8269},");\n",{"type":46,"tag":143,"props":8271,"children":8273},{"id":8272},"migration-notes",[8274],{"type":52,"value":8275},"Migration Notes:",{"type":46,"tag":86,"props":8277,"children":8278},{},[8279,8290,8295,8306],{"type":46,"tag":90,"props":8280,"children":8281},{},[8282,8283,8288],{"type":52,"value":6638},{"type":46,"tag":61,"props":8284,"children":8286},{"className":8285},[],[8287],{"type":52,"value":6648},{"type":52,"value":8289}," object has been flattened into individual props",{"type":46,"tag":90,"props":8291,"children":8292},{},[8293],{"type":52,"value":8294},"Each prop is now directly editable in Webflow Designer",{"type":46,"tag":90,"props":8296,"children":8297},{},[8298,8304],{"type":46,"tag":61,"props":8299,"children":8301},{"className":8300},[],[8302],{"type":52,"value":8303},"product.id",{"type":52,"value":8305}," was removed as it's not displayed in the UI",{"type":46,"tag":90,"props":8307,"children":8308},{},[8309],{"type":52,"value":8310},"Image prop now uses Webflow's Image type (provides { src, alt })",{"type":46,"tag":488,"props":8312,"children":8315},{"className":8313,"code":8314,"language":52},[3459],"\n---\n\n### Example 4: Component with styled-components\n\n**User prompt:**\n",[8316],{"type":46,"tag":61,"props":8317,"children":8318},{"__ignoreMap":493},[8319],{"type":52,"value":8314},{"type":46,"tag":55,"props":8321,"children":8322},{},[8323],{"type":52,"value":8324},"Convert this styled-components React component to Webflow:",{"type":46,"tag":55,"props":8326,"children":8327},{},[8328],{"type":52,"value":8329},"\u002F\u002F Button.tsx\nimport styled from 'styled-components';",{"type":46,"tag":55,"props":8331,"children":8332},{},[8333],{"type":52,"value":8334},"const StyledButton = styled.button\u003C{ variant: 'primary' | 'secondary' }>`\npadding: 12px 24px;\nborder-radius: 8px;\nfont-weight: 600;\nbackground: ${props => props.variant === 'primary' ? '#3b82f6' : '#e5e7eb'};\ncolor: ${props => props.variant === 'primary' ? 'white' : '#1f2937'};",{"type":46,"tag":55,"props":8336,"children":8337},{},[8338],{"type":52,"value":8339},"&:hover {\nopacity: 0.9;\n}\n`;",{"type":46,"tag":55,"props":8341,"children":8342},{},[8343],{"type":52,"value":8344},"interface ButtonProps {\nlabel: string;\nvariant?: 'primary' | 'secondary';\ndisabled?: boolean;\n}",{"type":46,"tag":55,"props":8346,"children":8347},{},[8348,8350,8358],{"type":52,"value":8349},"export const Button = ({ label, variant = 'primary', disabled = false }: ButtonProps) => (\n",{"type":46,"tag":8351,"props":8352,"children":8355},"styled-button",{"variant":8353,"disabled":8354},"{variant}","{disabled}",[8356],{"type":52,"value":8357},"\n{label}\n",{"type":52,"value":8359},"\n);",{"type":46,"tag":488,"props":8361,"children":8364},{"className":8362,"code":8363,"language":52},[3459],"\n**Response:**\n\n```markdown\n## Component Analysis: Button\n\n### Styling Approach Detected: styled-components\n\nstyled-components requires a Shadow DOM decorator to work in Webflow.\n\n### Props Detected:\n| Prop | TypeScript Type | Webflow Mapping |\n|------|-----------------|-----------------|\n| label | string | props.Text() |\n| variant | 'primary' \\| 'secondary' | props.Variant() |\n| disabled | boolean | props.Boolean() |\n\n### No blocking issues - ready to convert!\n\n---\n\n## Required Setup for styled-components\n\n**1. Install dependencies:**\n```bash\nnpm i @webflow\u002Fstyled-components-utils styled-components\nnpm i -D @types\u002Fstyled-components\n",[8365],{"type":46,"tag":61,"props":8366,"children":8367},{"__ignoreMap":493},[8368],{"type":52,"value":8363},{"type":46,"tag":55,"props":8370,"children":8371},{},[8372],{"type":46,"tag":80,"props":8373,"children":8374},{},[8375,8377,8383],{"type":52,"value":8376},"2. Create\u002Fupdate ",{"type":46,"tag":61,"props":8378,"children":8380},{"className":8379},[],[8381],{"type":52,"value":8382},"src\u002Fglobals.ts",{"type":52,"value":172},{"type":46,"tag":488,"props":8385,"children":8386},{"className":540,"code":541,"language":19,"meta":493,"style":493},[8387],{"type":46,"tag":61,"props":8388,"children":8389},{"__ignoreMap":493},[8390,8429],{"type":46,"tag":499,"props":8391,"children":8392},{"class":501,"line":502},[8393,8397,8401,8405,8409,8413,8417,8421,8425],{"type":46,"tag":499,"props":8394,"children":8395},{"style":551},[8396],{"type":52,"value":554},{"type":46,"tag":499,"props":8398,"children":8399},{"style":557},[8400],{"type":52,"value":560},{"type":46,"tag":499,"props":8402,"children":8403},{"style":563},[8404],{"type":52,"value":566},{"type":46,"tag":499,"props":8406,"children":8407},{"style":557},[8408],{"type":52,"value":571},{"type":46,"tag":499,"props":8410,"children":8411},{"style":551},[8412],{"type":52,"value":576},{"type":46,"tag":499,"props":8414,"children":8415},{"style":557},[8416],{"type":52,"value":581},{"type":46,"tag":499,"props":8418,"children":8419},{"style":512},[8420],{"type":52,"value":586},{"type":46,"tag":499,"props":8422,"children":8423},{"style":557},[8424],{"type":52,"value":591},{"type":46,"tag":499,"props":8426,"children":8427},{"style":557},[8428],{"type":52,"value":596},{"type":46,"tag":499,"props":8430,"children":8431},{"class":501,"line":599},[8432,8436,8440,8444,8448,8452],{"type":46,"tag":499,"props":8433,"children":8434},{"style":551},[8435],{"type":52,"value":605},{"type":46,"tag":499,"props":8437,"children":8438},{"style":608},[8439],{"type":52,"value":611},{"type":46,"tag":499,"props":8441,"children":8442},{"style":563},[8443],{"type":52,"value":616},{"type":46,"tag":499,"props":8445,"children":8446},{"style":557},[8447],{"type":52,"value":621},{"type":46,"tag":499,"props":8449,"children":8450},{"style":563},[8451],{"type":52,"value":626},{"type":46,"tag":499,"props":8453,"children":8454},{"style":557},[8455],{"type":52,"value":596},{"type":46,"tag":55,"props":8457,"children":8458},{},[8459],{"type":46,"tag":80,"props":8460,"children":8461},{},[8462,8464,8469],{"type":52,"value":8463},"3. Update ",{"type":46,"tag":61,"props":8465,"children":8467},{"className":8466},[],[8468],{"type":52,"value":773},{"type":52,"value":172},{"type":46,"tag":488,"props":8471,"children":8473},{"className":782,"code":8472,"language":784,"meta":493,"style":493},"{\n  \"library\": {\n    \"name\": \"My Library\",\n    \"components\": [\".\u002Fsrc\u002F**\u002F*.webflow.@(js|jsx|mjs|ts|tsx)\"],\n    \"globals\": \".\u002Fsrc\u002Fglobals.ts\"\n  }\n}\n",[8474],{"type":46,"tag":61,"props":8475,"children":8476},{"__ignoreMap":493},[8477,8484,8507,8544,8586,8617,8624],{"type":46,"tag":499,"props":8478,"children":8479},{"class":501,"line":502},[8480],{"type":46,"tag":499,"props":8481,"children":8482},{"style":557},[8483],{"type":52,"value":796},{"type":46,"tag":499,"props":8485,"children":8486},{"class":501,"line":599},[8487,8491,8495,8499,8503],{"type":46,"tag":499,"props":8488,"children":8489},{"style":557},[8490],{"type":52,"value":804},{"type":46,"tag":499,"props":8492,"children":8493},{"style":608},[8494],{"type":52,"value":809},{"type":46,"tag":499,"props":8496,"children":8497},{"style":557},[8498],{"type":52,"value":591},{"type":46,"tag":499,"props":8500,"children":8501},{"style":557},[8502],{"type":52,"value":172},{"type":46,"tag":499,"props":8504,"children":8505},{"style":557},[8506],{"type":52,"value":822},{"type":46,"tag":499,"props":8508,"children":8509},{"class":501,"line":825},[8510,8514,8519,8523,8527,8531,8536,8540],{"type":46,"tag":499,"props":8511,"children":8512},{"style":557},[8513],{"type":52,"value":831},{"type":46,"tag":499,"props":8515,"children":8516},{"style":506},[8517],{"type":52,"value":8518},"name",{"type":46,"tag":499,"props":8520,"children":8521},{"style":557},[8522],{"type":52,"value":591},{"type":46,"tag":499,"props":8524,"children":8525},{"style":557},[8526],{"type":52,"value":172},{"type":46,"tag":499,"props":8528,"children":8529},{"style":557},[8530],{"type":52,"value":581},{"type":46,"tag":499,"props":8532,"children":8533},{"style":512},[8534],{"type":52,"value":8535},"My Library",{"type":46,"tag":499,"props":8537,"children":8538},{"style":557},[8539],{"type":52,"value":591},{"type":46,"tag":499,"props":8541,"children":8542},{"style":557},[8543],{"type":52,"value":862},{"type":46,"tag":499,"props":8545,"children":8546},{"class":501,"line":865},[8547,8551,8556,8560,8564,8568,8572,8577,8581],{"type":46,"tag":499,"props":8548,"children":8549},{"style":557},[8550],{"type":52,"value":831},{"type":46,"tag":499,"props":8552,"children":8553},{"style":506},[8554],{"type":52,"value":8555},"components",{"type":46,"tag":499,"props":8557,"children":8558},{"style":557},[8559],{"type":52,"value":591},{"type":46,"tag":499,"props":8561,"children":8562},{"style":557},[8563],{"type":52,"value":172},{"type":46,"tag":499,"props":8565,"children":8566},{"style":557},[8567],{"type":52,"value":2224},{"type":46,"tag":499,"props":8569,"children":8570},{"style":557},[8571],{"type":52,"value":591},{"type":46,"tag":499,"props":8573,"children":8574},{"style":512},[8575],{"type":52,"value":8576},".\u002Fsrc\u002F**\u002F*.webflow.@(js|jsx|mjs|ts|tsx)",{"type":46,"tag":499,"props":8578,"children":8579},{"style":557},[8580],{"type":52,"value":591},{"type":46,"tag":499,"props":8582,"children":8583},{"style":557},[8584],{"type":52,"value":8585},"],\n",{"type":46,"tag":499,"props":8587,"children":8588},{"class":501,"line":890},[8589,8593,8597,8601,8605,8609,8613],{"type":46,"tag":499,"props":8590,"children":8591},{"style":557},[8592],{"type":52,"value":831},{"type":46,"tag":499,"props":8594,"children":8595},{"style":506},[8596],{"type":52,"value":836},{"type":46,"tag":499,"props":8598,"children":8599},{"style":557},[8600],{"type":52,"value":591},{"type":46,"tag":499,"props":8602,"children":8603},{"style":557},[8604],{"type":52,"value":172},{"type":46,"tag":499,"props":8606,"children":8607},{"style":557},[8608],{"type":52,"value":581},{"type":46,"tag":499,"props":8610,"children":8611},{"style":512},[8612],{"type":52,"value":853},{"type":46,"tag":499,"props":8614,"children":8615},{"style":557},[8616],{"type":52,"value":924},{"type":46,"tag":499,"props":8618,"children":8619},{"class":501,"line":927},[8620],{"type":46,"tag":499,"props":8621,"children":8622},{"style":557},[8623],{"type":52,"value":942},{"type":46,"tag":499,"props":8625,"children":8626},{"class":501,"line":936},[8627],{"type":46,"tag":499,"props":8628,"children":8629},{"style":557},[8630],{"type":52,"value":951},{"type":46,"tag":4995,"props":8632,"children":8633},{},[],{"type":46,"tag":70,"props":8635,"children":8637},{"id":8636},"generated-files-1",[8638],{"type":52,"value":5003},{"type":46,"tag":143,"props":8640,"children":8642},{"id":8641},"buttonwebflowtsx",[8643],{"type":52,"value":8644},"Button.webflow.tsx",{"type":46,"tag":488,"props":8646,"children":8648},{"className":540,"code":8647,"language":19,"meta":493,"style":493},"import { declareComponent } from \"@webflow\u002Freact\";\nimport { props } from \"@webflow\u002Fdata-types\";\nimport { Button } from \".\u002FButton\";\n\u002F\u002F No CSS import needed - styled-components handles styles\n\nexport default declareComponent(Button, {\n  name: \"Button\",\n  description: \"Styled button with primary and secondary variants\",\n  group: \"Interactive\",\n  props: {\n    label: props.Text({\n      name: \"Label\",\n      defaultValue: \"Click me\"\n    }),\n    variant: props.Variant({\n      name: \"Variant\",\n      options: [\"primary\", \"secondary\"],\n      defaultValue: \"primary\"\n    }),\n    disabled: props.Boolean({\n      name: \"Disabled\",\n      defaultValue: false,\n      trueLabel: \"Disabled\",\n      falseLabel: \"Enabled\"\n    })\n  },\n  options: {\n    applyTagSelectors: true,\n    ssr: true\n  }\n});\n",[8649],{"type":46,"tag":61,"props":8650,"children":8651},{"__ignoreMap":493},[8652,8691,8730,8771,8779,8786,8814,8842,8870,8897,8912,8944,8972,8996,9011,9043,9070,9123,9146,9161,9193,9221,9240,9268,9293,9304,9311,9326,9345,9360,9367],{"type":46,"tag":499,"props":8653,"children":8654},{"class":501,"line":502},[8655,8659,8663,8667,8671,8675,8679,8683,8687],{"type":46,"tag":499,"props":8656,"children":8657},{"style":551},[8658],{"type":52,"value":554},{"type":46,"tag":499,"props":8660,"children":8661},{"style":557},[8662],{"type":52,"value":560},{"type":46,"tag":499,"props":8664,"children":8665},{"style":563},[8666],{"type":52,"value":2643},{"type":46,"tag":499,"props":8668,"children":8669},{"style":557},[8670],{"type":52,"value":571},{"type":46,"tag":499,"props":8672,"children":8673},{"style":551},[8674],{"type":52,"value":576},{"type":46,"tag":499,"props":8676,"children":8677},{"style":557},[8678],{"type":52,"value":581},{"type":46,"tag":499,"props":8680,"children":8681},{"style":512},[8682],{"type":52,"value":2660},{"type":46,"tag":499,"props":8684,"children":8685},{"style":557},[8686],{"type":52,"value":591},{"type":46,"tag":499,"props":8688,"children":8689},{"style":557},[8690],{"type":52,"value":596},{"type":46,"tag":499,"props":8692,"children":8693},{"class":501,"line":599},[8694,8698,8702,8706,8710,8714,8718,8722,8726],{"type":46,"tag":499,"props":8695,"children":8696},{"style":551},[8697],{"type":52,"value":554},{"type":46,"tag":499,"props":8699,"children":8700},{"style":557},[8701],{"type":52,"value":560},{"type":46,"tag":499,"props":8703,"children":8704},{"style":563},[8705],{"type":52,"value":1430},{"type":46,"tag":499,"props":8707,"children":8708},{"style":557},[8709],{"type":52,"value":571},{"type":46,"tag":499,"props":8711,"children":8712},{"style":551},[8713],{"type":52,"value":576},{"type":46,"tag":499,"props":8715,"children":8716},{"style":557},[8717],{"type":52,"value":581},{"type":46,"tag":499,"props":8719,"children":8720},{"style":512},[8721],{"type":52,"value":2700},{"type":46,"tag":499,"props":8723,"children":8724},{"style":557},[8725],{"type":52,"value":591},{"type":46,"tag":499,"props":8727,"children":8728},{"style":557},[8729],{"type":52,"value":596},{"type":46,"tag":499,"props":8731,"children":8732},{"class":501,"line":825},[8733,8737,8741,8746,8750,8754,8758,8763,8767],{"type":46,"tag":499,"props":8734,"children":8735},{"style":551},[8736],{"type":52,"value":554},{"type":46,"tag":499,"props":8738,"children":8739},{"style":557},[8740],{"type":52,"value":560},{"type":46,"tag":499,"props":8742,"children":8743},{"style":563},[8744],{"type":52,"value":8745}," Button",{"type":46,"tag":499,"props":8747,"children":8748},{"style":557},[8749],{"type":52,"value":571},{"type":46,"tag":499,"props":8751,"children":8752},{"style":551},[8753],{"type":52,"value":576},{"type":46,"tag":499,"props":8755,"children":8756},{"style":557},[8757],{"type":52,"value":581},{"type":46,"tag":499,"props":8759,"children":8760},{"style":512},[8761],{"type":52,"value":8762},".\u002FButton",{"type":46,"tag":499,"props":8764,"children":8765},{"style":557},[8766],{"type":52,"value":591},{"type":46,"tag":499,"props":8768,"children":8769},{"style":557},[8770],{"type":52,"value":596},{"type":46,"tag":499,"props":8772,"children":8773},{"class":501,"line":865},[8774],{"type":46,"tag":499,"props":8775,"children":8776},{"style":1635},[8777],{"type":52,"value":8778},"\u002F\u002F No CSS import needed - styled-components handles styles\n",{"type":46,"tag":499,"props":8780,"children":8781},{"class":501,"line":890},[8782],{"type":46,"tag":499,"props":8783,"children":8784},{"emptyLinePlaceholder":1754},[8785],{"type":52,"value":1757},{"type":46,"tag":499,"props":8787,"children":8788},{"class":501,"line":927},[8789,8793,8797,8801,8806,8810],{"type":46,"tag":499,"props":8790,"children":8791},{"style":551},[8792],{"type":52,"value":605},{"type":46,"tag":499,"props":8794,"children":8795},{"style":551},[8796],{"type":52,"value":2805},{"type":46,"tag":499,"props":8798,"children":8799},{"style":1808},[8800],{"type":52,"value":2643},{"type":46,"tag":499,"props":8802,"children":8803},{"style":563},[8804],{"type":52,"value":8805},"(Button",{"type":46,"tag":499,"props":8807,"children":8808},{"style":557},[8809],{"type":52,"value":2241},{"type":46,"tag":499,"props":8811,"children":8812},{"style":557},[8813],{"type":52,"value":822},{"type":46,"tag":499,"props":8815,"children":8816},{"class":501,"line":936},[8817,8821,8825,8829,8834,8838],{"type":46,"tag":499,"props":8818,"children":8819},{"style":1661},[8820],{"type":52,"value":2186},{"type":46,"tag":499,"props":8822,"children":8823},{"style":557},[8824],{"type":52,"value":172},{"type":46,"tag":499,"props":8826,"children":8827},{"style":557},[8828],{"type":52,"value":581},{"type":46,"tag":499,"props":8830,"children":8831},{"style":512},[8832],{"type":52,"value":8833},"Button",{"type":46,"tag":499,"props":8835,"children":8836},{"style":557},[8837],{"type":52,"value":591},{"type":46,"tag":499,"props":8839,"children":8840},{"style":557},[8841],{"type":52,"value":862},{"type":46,"tag":499,"props":8843,"children":8844},{"class":501,"line":945},[8845,8849,8853,8857,8862,8866],{"type":46,"tag":499,"props":8846,"children":8847},{"style":1661},[8848],{"type":52,"value":2858},{"type":46,"tag":499,"props":8850,"children":8851},{"style":557},[8852],{"type":52,"value":172},{"type":46,"tag":499,"props":8854,"children":8855},{"style":557},[8856],{"type":52,"value":581},{"type":46,"tag":499,"props":8858,"children":8859},{"style":512},[8860],{"type":52,"value":8861},"Styled button with primary and secondary variants",{"type":46,"tag":499,"props":8863,"children":8864},{"style":557},[8865],{"type":52,"value":591},{"type":46,"tag":499,"props":8867,"children":8868},{"style":557},[8869],{"type":52,"value":862},{"type":46,"tag":499,"props":8871,"children":8872},{"class":501,"line":1750},[8873,8877,8881,8885,8889,8893],{"type":46,"tag":499,"props":8874,"children":8875},{"style":1661},[8876],{"type":52,"value":2887},{"type":46,"tag":499,"props":8878,"children":8879},{"style":557},[8880],{"type":52,"value":172},{"type":46,"tag":499,"props":8882,"children":8883},{"style":557},[8884],{"type":52,"value":581},{"type":46,"tag":499,"props":8886,"children":8887},{"style":512},[8888],{"type":52,"value":5270},{"type":46,"tag":499,"props":8890,"children":8891},{"style":557},[8892],{"type":52,"value":591},{"type":46,"tag":499,"props":8894,"children":8895},{"style":557},[8896],{"type":52,"value":862},{"type":46,"tag":499,"props":8898,"children":8899},{"class":501,"line":1760},[8900,8904,8908],{"type":46,"tag":499,"props":8901,"children":8902},{"style":1661},[8903],{"type":52,"value":2916},{"type":46,"tag":499,"props":8905,"children":8906},{"style":557},[8907],{"type":52,"value":172},{"type":46,"tag":499,"props":8909,"children":8910},{"style":557},[8911],{"type":52,"value":822},{"type":46,"tag":499,"props":8913,"children":8914},{"class":501,"line":1769},[8915,8920,8924,8928,8932,8936,8940],{"type":46,"tag":499,"props":8916,"children":8917},{"style":1661},[8918],{"type":52,"value":8919},"    label",{"type":46,"tag":499,"props":8921,"children":8922},{"style":557},[8923],{"type":52,"value":172},{"type":46,"tag":499,"props":8925,"children":8926},{"style":563},[8927],{"type":52,"value":1430},{"type":46,"tag":499,"props":8929,"children":8930},{"style":557},[8931],{"type":52,"value":1805},{"type":46,"tag":499,"props":8933,"children":8934},{"style":1808},[8935],{"type":52,"value":1811},{"type":46,"tag":499,"props":8937,"children":8938},{"style":563},[8939],{"type":52,"value":1816},{"type":46,"tag":499,"props":8941,"children":8942},{"style":557},[8943],{"type":52,"value":796},{"type":46,"tag":499,"props":8945,"children":8946},{"class":501,"line":1786},[8947,8951,8955,8959,8964,8968],{"type":46,"tag":499,"props":8948,"children":8949},{"style":1661},[8950],{"type":52,"value":4164},{"type":46,"tag":499,"props":8952,"children":8953},{"style":557},[8954],{"type":52,"value":172},{"type":46,"tag":499,"props":8956,"children":8957},{"style":557},[8958],{"type":52,"value":581},{"type":46,"tag":499,"props":8960,"children":8961},{"style":512},[8962],{"type":52,"value":8963},"Label",{"type":46,"tag":499,"props":8965,"children":8966},{"style":557},[8967],{"type":52,"value":591},{"type":46,"tag":499,"props":8969,"children":8970},{"style":557},[8971],{"type":52,"value":862},{"type":46,"tag":499,"props":8973,"children":8974},{"class":501,"line":1859},[8975,8979,8983,8987,8992],{"type":46,"tag":499,"props":8976,"children":8977},{"style":1661},[8978],{"type":52,"value":4194},{"type":46,"tag":499,"props":8980,"children":8981},{"style":557},[8982],{"type":52,"value":172},{"type":46,"tag":499,"props":8984,"children":8985},{"style":557},[8986],{"type":52,"value":581},{"type":46,"tag":499,"props":8988,"children":8989},{"style":512},[8990],{"type":52,"value":8991},"Click me",{"type":46,"tag":499,"props":8993,"children":8994},{"style":557},[8995],{"type":52,"value":924},{"type":46,"tag":499,"props":8997,"children":8998},{"class":501,"line":1926},[8999,9003,9007],{"type":46,"tag":499,"props":9000,"children":9001},{"style":557},[9002],{"type":52,"value":4220},{"type":46,"tag":499,"props":9004,"children":9005},{"style":563},[9006],{"type":52,"value":1852},{"type":46,"tag":499,"props":9008,"children":9009},{"style":557},[9010],{"type":52,"value":862},{"type":46,"tag":499,"props":9012,"children":9013},{"class":501,"line":1990},[9014,9019,9023,9027,9031,9035,9039],{"type":46,"tag":499,"props":9015,"children":9016},{"style":1661},[9017],{"type":52,"value":9018},"    variant",{"type":46,"tag":499,"props":9020,"children":9021},{"style":557},[9022],{"type":52,"value":172},{"type":46,"tag":499,"props":9024,"children":9025},{"style":563},[9026],{"type":52,"value":1430},{"type":46,"tag":499,"props":9028,"children":9029},{"style":557},[9030],{"type":52,"value":1805},{"type":46,"tag":499,"props":9032,"children":9033},{"style":1808},[9034],{"type":52,"value":2170},{"type":46,"tag":499,"props":9036,"children":9037},{"style":563},[9038],{"type":52,"value":1816},{"type":46,"tag":499,"props":9040,"children":9041},{"style":557},[9042],{"type":52,"value":796},{"type":46,"tag":499,"props":9044,"children":9045},{"class":501,"line":2971},[9046,9050,9054,9058,9062,9066],{"type":46,"tag":499,"props":9047,"children":9048},{"style":1661},[9049],{"type":52,"value":4164},{"type":46,"tag":499,"props":9051,"children":9052},{"style":557},[9053],{"type":52,"value":172},{"type":46,"tag":499,"props":9055,"children":9056},{"style":557},[9057],{"type":52,"value":581},{"type":46,"tag":499,"props":9059,"children":9060},{"style":512},[9061],{"type":52,"value":2170},{"type":46,"tag":499,"props":9063,"children":9064},{"style":557},[9065],{"type":52,"value":591},{"type":46,"tag":499,"props":9067,"children":9068},{"style":557},[9069],{"type":52,"value":862},{"type":46,"tag":499,"props":9071,"children":9072},{"class":501,"line":28},[9073,9077,9081,9085,9089,9094,9098,9102,9106,9111,9115,9119],{"type":46,"tag":499,"props":9074,"children":9075},{"style":1661},[9076],{"type":52,"value":7514},{"type":46,"tag":499,"props":9078,"children":9079},{"style":557},[9080],{"type":52,"value":172},{"type":46,"tag":499,"props":9082,"children":9083},{"style":563},[9084],{"type":52,"value":2224},{"type":46,"tag":499,"props":9086,"children":9087},{"style":557},[9088],{"type":52,"value":591},{"type":46,"tag":499,"props":9090,"children":9091},{"style":512},[9092],{"type":52,"value":9093},"primary",{"type":46,"tag":499,"props":9095,"children":9096},{"style":557},[9097],{"type":52,"value":591},{"type":46,"tag":499,"props":9099,"children":9100},{"style":557},[9101],{"type":52,"value":2241},{"type":46,"tag":499,"props":9103,"children":9104},{"style":557},[9105],{"type":52,"value":581},{"type":46,"tag":499,"props":9107,"children":9108},{"style":512},[9109],{"type":52,"value":9110},"secondary",{"type":46,"tag":499,"props":9112,"children":9113},{"style":557},[9114],{"type":52,"value":591},{"type":46,"tag":499,"props":9116,"children":9117},{"style":563},[9118],{"type":52,"value":2291},{"type":46,"tag":499,"props":9120,"children":9121},{"style":557},[9122],{"type":52,"value":862},{"type":46,"tag":499,"props":9124,"children":9125},{"class":501,"line":3020},[9126,9130,9134,9138,9142],{"type":46,"tag":499,"props":9127,"children":9128},{"style":1661},[9129],{"type":52,"value":4194},{"type":46,"tag":499,"props":9131,"children":9132},{"style":557},[9133],{"type":52,"value":172},{"type":46,"tag":499,"props":9135,"children":9136},{"style":557},[9137],{"type":52,"value":581},{"type":46,"tag":499,"props":9139,"children":9140},{"style":512},[9141],{"type":52,"value":9093},{"type":46,"tag":499,"props":9143,"children":9144},{"style":557},[9145],{"type":52,"value":924},{"type":46,"tag":499,"props":9147,"children":9148},{"class":501,"line":3028},[9149,9153,9157],{"type":46,"tag":499,"props":9150,"children":9151},{"style":557},[9152],{"type":52,"value":4220},{"type":46,"tag":499,"props":9154,"children":9155},{"style":563},[9156],{"type":52,"value":1852},{"type":46,"tag":499,"props":9158,"children":9159},{"style":557},[9160],{"type":52,"value":862},{"type":46,"tag":499,"props":9162,"children":9163},{"class":501,"line":3802},[9164,9169,9173,9177,9181,9185,9189],{"type":46,"tag":499,"props":9165,"children":9166},{"style":1661},[9167],{"type":52,"value":9168},"    disabled",{"type":46,"tag":499,"props":9170,"children":9171},{"style":557},[9172],{"type":52,"value":172},{"type":46,"tag":499,"props":9174,"children":9175},{"style":563},[9176],{"type":52,"value":1430},{"type":46,"tag":499,"props":9178,"children":9179},{"style":557},[9180],{"type":52,"value":1805},{"type":46,"tag":499,"props":9182,"children":9183},{"style":1808},[9184],{"type":52,"value":7640},{"type":46,"tag":499,"props":9186,"children":9187},{"style":563},[9188],{"type":52,"value":1816},{"type":46,"tag":499,"props":9190,"children":9191},{"style":557},[9192],{"type":52,"value":796},{"type":46,"tag":499,"props":9194,"children":9195},{"class":501,"line":3810},[9196,9200,9204,9208,9213,9217],{"type":46,"tag":499,"props":9197,"children":9198},{"style":1661},[9199],{"type":52,"value":4164},{"type":46,"tag":499,"props":9201,"children":9202},{"style":557},[9203],{"type":52,"value":172},{"type":46,"tag":499,"props":9205,"children":9206},{"style":557},[9207],{"type":52,"value":581},{"type":46,"tag":499,"props":9209,"children":9210},{"style":512},[9211],{"type":52,"value":9212},"Disabled",{"type":46,"tag":499,"props":9214,"children":9215},{"style":557},[9216],{"type":52,"value":591},{"type":46,"tag":499,"props":9218,"children":9219},{"style":557},[9220],{"type":52,"value":862},{"type":46,"tag":499,"props":9222,"children":9223},{"class":501,"line":3823},[9224,9228,9232,9236],{"type":46,"tag":499,"props":9225,"children":9226},{"style":1661},[9227],{"type":52,"value":4194},{"type":46,"tag":499,"props":9229,"children":9230},{"style":557},[9231],{"type":52,"value":172},{"type":46,"tag":499,"props":9233,"children":9234},{"style":2984},[9235],{"type":52,"value":5489},{"type":46,"tag":499,"props":9237,"children":9238},{"style":557},[9239],{"type":52,"value":862},{"type":46,"tag":499,"props":9241,"children":9242},{"class":501,"line":3838},[9243,9248,9252,9256,9260,9264],{"type":46,"tag":499,"props":9244,"children":9245},{"style":1661},[9246],{"type":52,"value":9247},"      trueLabel",{"type":46,"tag":499,"props":9249,"children":9250},{"style":557},[9251],{"type":52,"value":172},{"type":46,"tag":499,"props":9253,"children":9254},{"style":557},[9255],{"type":52,"value":581},{"type":46,"tag":499,"props":9257,"children":9258},{"style":512},[9259],{"type":52,"value":9212},{"type":46,"tag":499,"props":9261,"children":9262},{"style":557},[9263],{"type":52,"value":591},{"type":46,"tag":499,"props":9265,"children":9266},{"style":557},[9267],{"type":52,"value":862},{"type":46,"tag":499,"props":9269,"children":9270},{"class":501,"line":3878},[9271,9276,9280,9284,9289],{"type":46,"tag":499,"props":9272,"children":9273},{"style":1661},[9274],{"type":52,"value":9275},"      falseLabel",{"type":46,"tag":499,"props":9277,"children":9278},{"style":557},[9279],{"type":52,"value":172},{"type":46,"tag":499,"props":9281,"children":9282},{"style":557},[9283],{"type":52,"value":581},{"type":46,"tag":499,"props":9285,"children":9286},{"style":512},[9287],{"type":52,"value":9288},"Enabled",{"type":46,"tag":499,"props":9290,"children":9291},{"style":557},[9292],{"type":52,"value":924},{"type":46,"tag":499,"props":9294,"children":9295},{"class":501,"line":3918},[9296,9300],{"type":46,"tag":499,"props":9297,"children":9298},{"style":557},[9299],{"type":52,"value":4220},{"type":46,"tag":499,"props":9301,"children":9302},{"style":563},[9303],{"type":52,"value":1987},{"type":46,"tag":499,"props":9305,"children":9306},{"class":501,"line":3960},[9307],{"type":46,"tag":499,"props":9308,"children":9309},{"style":557},[9310],{"type":52,"value":2940},{"type":46,"tag":499,"props":9312,"children":9313},{"class":501,"line":3985},[9314,9318,9322],{"type":46,"tag":499,"props":9315,"children":9316},{"style":1661},[9317],{"type":52,"value":2215},{"type":46,"tag":499,"props":9319,"children":9320},{"style":557},[9321],{"type":52,"value":172},{"type":46,"tag":499,"props":9323,"children":9324},{"style":557},[9325],{"type":52,"value":822},{"type":46,"tag":499,"props":9327,"children":9328},{"class":501,"line":3993},[9329,9333,9337,9341],{"type":46,"tag":499,"props":9330,"children":9331},{"style":1661},[9332],{"type":52,"value":2977},{"type":46,"tag":499,"props":9334,"children":9335},{"style":557},[9336],{"type":52,"value":172},{"type":46,"tag":499,"props":9338,"children":9339},{"style":2984},[9340],{"type":52,"value":2987},{"type":46,"tag":499,"props":9342,"children":9343},{"style":557},[9344],{"type":52,"value":862},{"type":46,"tag":499,"props":9346,"children":9347},{"class":501,"line":4022},[9348,9352,9356],{"type":46,"tag":499,"props":9349,"children":9350},{"style":1661},[9351],{"type":52,"value":3004},{"type":46,"tag":499,"props":9353,"children":9354},{"style":557},[9355],{"type":52,"value":172},{"type":46,"tag":499,"props":9357,"children":9358},{"style":2984},[9359],{"type":52,"value":4630},{"type":46,"tag":499,"props":9361,"children":9362},{"class":501,"line":4051},[9363],{"type":46,"tag":499,"props":9364,"children":9365},{"style":557},[9366],{"type":52,"value":942},{"type":46,"tag":499,"props":9368,"children":9369},{"class":501,"line":4080},[9370,9374,9378],{"type":46,"tag":499,"props":9371,"children":9372},{"style":557},[9373],{"type":52,"value":2327},{"type":46,"tag":499,"props":9375,"children":9376},{"style":563},[9377],{"type":52,"value":1852},{"type":46,"tag":499,"props":9379,"children":9380},{"style":557},[9381],{"type":52,"value":596},{"type":46,"tag":143,"props":9383,"children":9385},{"id":9384},"no-changes-needed-to-buttontsx",[9386],{"type":52,"value":9387},"No changes needed to Button.tsx",{"type":46,"tag":55,"props":9389,"children":9390},{},[9391],{"type":52,"value":9392},"The component can remain as-is. The styled-components decorator in globals.ts will handle Shadow DOM style injection automatically.",{"type":46,"tag":143,"props":9394,"children":9396},{"id":9395},"setup-checklist",[9397],{"type":52,"value":9398},"Setup Checklist",{"type":46,"tag":86,"props":9400,"children":9402},{"className":9401},[4840],[9403,9412,9421,9430],{"type":46,"tag":90,"props":9404,"children":9406},{"className":9405},[4845],[9407,9410],{"type":46,"tag":4848,"props":9408,"children":9409},{"disabled":1754,"type":4850},[],{"type":52,"value":9411}," Install @webflow\u002Fstyled-components-utils",{"type":46,"tag":90,"props":9413,"children":9415},{"className":9414},[4845],[9416,9419],{"type":46,"tag":4848,"props":9417,"children":9418},{"disabled":1754,"type":4850},[],{"type":52,"value":9420}," Create globals.ts with decorator",{"type":46,"tag":90,"props":9422,"children":9424},{"className":9423},[4845],[9425,9428],{"type":46,"tag":4848,"props":9426,"children":9427},{"disabled":1754,"type":4850},[],{"type":52,"value":9429}," Update webflow.json to reference globals",{"type":46,"tag":90,"props":9431,"children":9433},{"className":9432},[4845],[9434,9437,9439],{"type":46,"tag":4848,"props":9435,"children":9436},{"disabled":1754,"type":4850},[],{"type":52,"value":9438}," Deploy with ",{"type":46,"tag":61,"props":9440,"children":9442},{"className":9441},[],[9443],{"type":52,"value":9444},"npx webflow library share",{"type":46,"tag":488,"props":9446,"children":9449},{"className":9447,"code":9448,"language":52},[3459],"\n## Guidelines\n\n### When to Recommend Component Redesign\n\nSome components fundamentally don't fit the Webflow model:\n\n1. **Heavy Context usage**: If component relies on app-wide context, suggest redesign\n2. **Complex state machines**: May need simplification\n3. **Tightly coupled components**: Each needs to be independent in Webflow\n4. **Components that render portals**: Consider if portal is necessary\n\n### Default Value Strategy\n\nAlways provide sensible defaults:\n- Text props: Representative example text\n- Numbers: Common\u002Ftypical value\n- Booleans: Most common use case\n- Variants: Most popular option\n- Images: Can be undefined (optional)\n- Slots: No default needed\n\n### Props Naming for Webflow\n\nMake prop names designer-friendly:\n- Use descriptive names: `buttonText` not `txt`\n- Avoid abbreviations: `imageSource` not `imgSrc`\n- Group related props with prefixes: `authorName`, `authorAvatar`, `authorBio`\n\n### SSR Decision\n\nSet `ssr: false` if component:\n- Accesses `window`, `document`, `navigator`\n- Uses `localStorage` or `sessionStorage`\n- Manipulates DOM directly\n- Uses libraries that require browser APIs\n- Renders canvas, WebGL, or maps\n",[9450],{"type":46,"tag":61,"props":9451,"children":9452},{"__ignoreMap":493},[9453],{"type":52,"value":9448},{"type":46,"tag":6052,"props":9455,"children":9456},{},[9457],{"type":52,"value":9458},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":9460,"total":3993},[9461,9482,9497,9512,9529,9545,9561,9575,9582,9594,9608,9624],{"slug":9462,"name":9463,"fn":9464,"description":9465,"org":9466,"tags":9467,"stars":24,"repoUrl":25,"updatedAt":9481},"webflow-clicloud","webflow-cli:cloud","deploy applications to Webflow Cloud","Initialize, build, and deploy full-stack Webflow applications to Webflow Cloud hosting. Supports site-attached deploys (linked to an existing Webflow site) and project app deploys (independent project, no existing site required). Use when creating new projects, deploying existing ones, or setting up CI\u002FCD pipelines for Webflow Cloud.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9468,9471,9474,9477,9480],{"name":9469,"slug":9470,"type":16},"CLI","cli",{"name":9472,"slug":9473,"type":16},"Cloud","cloud",{"name":9475,"slug":9476,"type":16},"Deployment","deployment",{"name":9478,"slug":9479,"type":16},"Full-stack","full-stack",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:47.514609",{"slug":9483,"name":9484,"fn":9485,"description":9486,"org":9487,"tags":9488,"stars":24,"repoUrl":25,"updatedAt":9496},"webflow-clicode-component","webflow-cli:code-component","create and deploy Webflow Code Components","Create and deploy reusable React components for Webflow Designer. Configure existing React projects with webflow.json, build and bundle code, validate output, and deploy to workspace using library share. Use when building custom components for designers.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9489,9490,9491,9492,9495],{"name":9469,"slug":9470,"type":16},{"name":9475,"slug":9476,"type":16},{"name":14,"slug":15,"type":16},{"name":9493,"slug":9494,"type":16},"UI Components","ui-components",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:41.421071",{"slug":9498,"name":9499,"fn":9500,"description":9501,"org":9502,"tags":9503,"stars":24,"repoUrl":25,"updatedAt":9511},"webflow-clidesigner-extension","webflow-cli:designer-extension","build Webflow Designer Extensions","Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default\u002Freact\u002Ftypescript-alt), bundles extensions for upload, and serves locally for development.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9504,9505,9508,9509,9510],{"name":9469,"slug":9470,"type":16},{"name":9506,"slug":9507,"type":16},"Plugin Development","plugin-development",{"name":14,"slug":15,"type":16},{"name":18,"slug":19,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:43.853573",{"slug":9513,"name":9514,"fn":9515,"description":9516,"org":9517,"tags":9518,"stars":24,"repoUrl":25,"updatedAt":9528},"webflow-clidevlink","webflow-cli:devlink","export Webflow components to React and Next.js","Export Webflow Designer components to React\u002FNext.js code for external projects. Configure devlink settings in webflow.json, sync design updates with devlink sync, validate generated code, show diffs, and provide integration examples. Use when building with Webflow designs in React\u002FNext.js.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9519,9520,9523,9526,9527],{"name":9469,"slug":9470,"type":16},{"name":9521,"slug":9522,"type":16},"Frontend","frontend",{"name":9524,"slug":9525,"type":16},"Next.js","next-js",{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:40.182468",{"slug":9530,"name":9531,"fn":9532,"description":9533,"org":9534,"tags":9535,"stars":24,"repoUrl":25,"updatedAt":9544},"webflow-clitroubleshooter","webflow-cli:troubleshooter","troubleshoot Webflow CLI issues","Diagnose and fix Webflow CLI issues including installation problems, authentication failures, build errors, and bundle problems. Uses CLI diagnostic flags (--version, --help, --verbose, --debug-bundler) for troubleshooting.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9536,9537,9540,9543],{"name":9469,"slug":9470,"type":16},{"name":9538,"slug":9539,"type":16},"Configuration","configuration",{"name":9541,"slug":9542,"type":16},"Debugging","debugging",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:48.831648",{"slug":9546,"name":9547,"fn":9548,"description":9549,"org":9550,"tags":9551,"stars":24,"repoUrl":25,"updatedAt":9560},"webflow-code-componentcomponent-audit","webflow-code-component:component-audit","audit Webflow Code Component architecture","Audit Webflow Code Components for architecture decisions - prop exposure, state management, slot opportunities, and Shadow DOM compatibility. Focused on Webflow-specific patterns, not generic React best practices.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9552,9555,9558,9559],{"name":9553,"slug":9554,"type":16},"Architecture","architecture",{"name":9556,"slug":9557,"type":16},"Code Analysis","code-analysis",{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:46.277768",{"slug":9562,"name":9563,"fn":9564,"description":9565,"org":9566,"tags":9567,"stars":24,"repoUrl":25,"updatedAt":9574},"webflow-code-componentcomponent-scaffold","webflow-code-component:component-scaffold","scaffold Webflow Code Component boilerplate","Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config\u002Fdependencies.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9568,9569,9570,9573],{"name":9521,"slug":9522,"type":16},{"name":14,"slug":15,"type":16},{"name":9571,"slug":9572,"type":16},"Templates","templates",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:42.638042",{"slug":4,"name":5,"fn":6,"description":7,"org":9576,"tags":9577,"stars":24,"repoUrl":25,"updatedAt":26},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9578,9579,9580,9581],{"name":21,"slug":22,"type":16},{"name":14,"slug":15,"type":16},{"name":18,"slug":19,"type":16},{"name":10,"slug":9,"type":16},{"slug":9583,"name":9584,"fn":9585,"description":9586,"org":9587,"tags":9588,"stars":24,"repoUrl":25,"updatedAt":9593},"webflow-code-componentdeploy-guide","webflow-code-component:deploy-guide","deploy Webflow Code Components","Step-by-step guide for deploying Webflow Code Components to a workspace. Covers authentication, pre-flight checks, deployment execution, and verification.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9589,9590,9591,9592],{"name":9475,"slug":9476,"type":16},{"name":9521,"slug":9522,"type":16},{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:38.947875",{"slug":9595,"name":9596,"fn":9597,"description":9598,"org":9599,"tags":9600,"stars":24,"repoUrl":25,"updatedAt":9607},"webflow-code-componentlocal-dev-setup","webflow-code-component:local-dev-setup","set up local Webflow Code Component projects","Initialize a new Webflow Code Components project from scratch. Creates project structure, installs dependencies, configures webflow.json, and sets up development environment.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9601,9602,9605,9606],{"name":9538,"slug":9539,"type":16},{"name":9603,"slug":9604,"type":16},"Local Development","local-development",{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:50.062783",{"slug":9609,"name":9610,"fn":9611,"description":9612,"org":9613,"tags":9614,"stars":24,"repoUrl":25,"updatedAt":9623},"webflow-code-componentpre-deploy-check","webflow-code-component:pre-deploy-check","validate Webflow Code Components before deployment","Pre-deployment validation for Webflow Code Components. Checks bundle size, dependencies, prop configurations, SSR compatibility, styling setup, and common issues before running webflow library share.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9615,9616,9619,9622],{"name":9475,"slug":9476,"type":16},{"name":9617,"slug":9618,"type":16},"QA","qa",{"name":9620,"slug":9621,"type":16},"Validation","validation",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:51.300653",{"slug":9625,"name":9626,"fn":9627,"description":9628,"org":9629,"tags":9630,"stars":24,"repoUrl":25,"updatedAt":9637},"webflow-code-componenttroubleshoot-deploy","webflow-code-component:troubleshoot-deploy","troubleshoot Webflow Code Component deployments","Debug deployment failures for Webflow Code Components. Analyzes error messages, identifies root causes, and provides specific fixes for common issues.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9631,9632,9633,9636],{"name":9541,"slug":9542,"type":16},{"name":9475,"slug":9476,"type":16},{"name":9634,"slug":9635,"type":16},"Observability","observability",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:45.057571",{"items":9639,"total":3993},[9640,9648,9656,9664,9672,9679,9686],{"slug":9462,"name":9463,"fn":9464,"description":9465,"org":9641,"tags":9642,"stars":24,"repoUrl":25,"updatedAt":9481},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9643,9644,9645,9646,9647],{"name":9469,"slug":9470,"type":16},{"name":9472,"slug":9473,"type":16},{"name":9475,"slug":9476,"type":16},{"name":9478,"slug":9479,"type":16},{"name":10,"slug":9,"type":16},{"slug":9483,"name":9484,"fn":9485,"description":9486,"org":9649,"tags":9650,"stars":24,"repoUrl":25,"updatedAt":9496},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9651,9652,9653,9654,9655],{"name":9469,"slug":9470,"type":16},{"name":9475,"slug":9476,"type":16},{"name":14,"slug":15,"type":16},{"name":9493,"slug":9494,"type":16},{"name":10,"slug":9,"type":16},{"slug":9498,"name":9499,"fn":9500,"description":9501,"org":9657,"tags":9658,"stars":24,"repoUrl":25,"updatedAt":9511},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9659,9660,9661,9662,9663],{"name":9469,"slug":9470,"type":16},{"name":9506,"slug":9507,"type":16},{"name":14,"slug":15,"type":16},{"name":18,"slug":19,"type":16},{"name":10,"slug":9,"type":16},{"slug":9513,"name":9514,"fn":9515,"description":9516,"org":9665,"tags":9666,"stars":24,"repoUrl":25,"updatedAt":9528},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9667,9668,9669,9670,9671],{"name":9469,"slug":9470,"type":16},{"name":9521,"slug":9522,"type":16},{"name":9524,"slug":9525,"type":16},{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},{"slug":9530,"name":9531,"fn":9532,"description":9533,"org":9673,"tags":9674,"stars":24,"repoUrl":25,"updatedAt":9544},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9675,9676,9677,9678],{"name":9469,"slug":9470,"type":16},{"name":9538,"slug":9539,"type":16},{"name":9541,"slug":9542,"type":16},{"name":10,"slug":9,"type":16},{"slug":9546,"name":9547,"fn":9548,"description":9549,"org":9680,"tags":9681,"stars":24,"repoUrl":25,"updatedAt":9560},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9682,9683,9684,9685],{"name":9553,"slug":9554,"type":16},{"name":9556,"slug":9557,"type":16},{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},{"slug":9562,"name":9563,"fn":9564,"description":9565,"org":9687,"tags":9688,"stars":24,"repoUrl":25,"updatedAt":9574},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[9689,9690,9691,9692],{"name":9521,"slug":9522,"type":16},{"name":14,"slug":15,"type":16},{"name":9571,"slug":9572,"type":16},{"name":10,"slug":9,"type":16}]