@upstart.gg/sdk 0.0.135 → 0.0.137

package/dist/shared/chunk-LGDDJJHK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shared/bricks/manifests/box.manifest.ts"],"sourcesContent":["import { defineBrickManifest } from \"~/shared/brick-manifest\";\nimport { defineProps } from \"../props/helpers\";\nimport { Type } from \"@sinclair/typebox\";\nimport { border, rounding } from \"../props/border\";\nimport { shadow } from \"../props/effects\";\nimport { cssLength } from \"../props/css-length\";\nimport { direction } from \"../props/direction\";\nimport { RxBox } from \"react-icons/rx\";\nimport { alignItems, justifyContent } from \"../props/align\";\nimport { colorPreset } from \"../props/color-preset\";\nimport { loop } from \"../props/dynamic\";\nimport type { BrickExample } from \"./_types\";\n\n// Generic container can hold any type of array data source\nexport const manifest = defineBrickManifest({\n  type: \"box\",\n  category: \"container\",\n  name: \"Box\",\n  description: \"A container for stacking bricks horizontally or vertically.\",\n  aiInstructions: `Use the box component as a flexible container for organizing and arranging multiple bricks in horizontal or vertical layouts.\n\nWHEN TO USE:\n- Grouping related content elements (text + image + button)\n- Creating card-like layouts with multiple components\n- Building responsive grid systems with wrapping\n- Organizing form elements or input groups\n- Displaying repeated data from queries (products, team members, blog posts)\n- Creating structured layouts with consistent spacing\n\nLAYOUT GUIDELINES:\n- direction: \"flex-col\" for vertical stacking, \"flex-row\" for horizontal arrangement\n- gap: \"0.5rem\" for tight spacing, \"1rem\" for standard, \"2rem\" for spacious layouts\n- padding: \"1rem\" for standard padding, \"2rem\" for generous spacing, \"0\" for edge-to-edge\n- wrap: true for responsive grids that wrap on smaller screens, false for fixed layouts\n- justifyContent: \"justify-start\" for left-align, \"justify-center\" for center, \"justify-between\" for space-between\n- alignItems: \"items-stretch\" for equal heights, \"items-center\" for center-align, \"items-start\" for top-align\n\nSTYLING OPTIONS:\n- colorPreset: Use light backgrounds like \"primary-50\", \"neutral-100\", \"secondary-100\" for content containers\n- rounding: \"rounded-md\" for standard, \"rounded-lg\" for friendly, \"rounded-xl\"/\"rounded-2xl\" for modern\n- border: Add subtle borders with \"border\" width and colors like \"border-gray-200\", \"border-primary-300\"\n- shadow: \"shadow-sm\" for subtle depth, \"shadow-md\" for cards, \"shadow-lg\" for prominence\n\nCONTENT RULES:\n- Must contain at least 2 child bricks to be useful\n- Cannot contain other box components as direct children\n- Commonly contains: text, image, button, icon combinations\n- Perfect for repeating patterns using loop data\n\nDYNAMIC CONTENT:\n- Use loop property to repeat the box itself over data queries\n- Template variables work in all child components: \"{{ product.name}}\", \"{{user.email}}\"\n- Great for: product catalogs, team directories, blog listings\n\nAVOID:\n- Single child elements (use individual brick instead)\n- Nesting boxes inside boxes (use single box with proper layout)\n- Complex nested structures (break into separate boxes)`,\n  isContainer: true,\n  defaultWidth: {\n    desktop: \"auto\",\n    mobile: \"100%\",\n  },\n  defaultHeight: {\n    desktop: \"auto\",\n  },\n  icon: RxBox,\n  props: defineProps({\n    colorPreset: Type.Optional(\n      colorPreset({\n        title: \"Color\",\n      }),\n    ),\n    direction: direction({\n      default: \"flex-col\",\n      title: \"Direction\",\n      description: \"Direction of the box layout\",\n    }),\n    justifyContent: Type.Optional(\n      justifyContent({\n        default: \"justify-center\",\n      }),\n    ),\n    alignItems: Type.Optional(\n      alignItems({\n        default: \"items-stretch\",\n      }),\n    ),\n    gap: Type.Optional(\n      cssLength({\n        title: \"Gap\",\n        default: \"1rem\",\n        description: \"Gap between children bricks.\",\n        \"ai:instructions\":\n          \"Can be a tailwind gap class like 'gap-1' or 'gap-2', or a custom value like '10px'\",\n        \"ui:placeholder\": \"Not specified\",\n        \"ui:styleId\": \"styles:gap\",\n      }),\n    ),\n    padding: Type.Optional(\n      cssLength({\n        default: \"1rem\",\n        description: \"Padding inside the box.\",\n        \"ai:instructions\": \"Use only a single value like '1rem' or '10px'\",\n        title: \"Padding\",\n        \"ui:placeholder\": \"Not specified\",\n        \"ui:styleId\": \"styles:padding\",\n      }),\n    ),\n    wrap: Type.Optional(\n      Type.Boolean({\n        title: \"Wrap\",\n        description: \"Wrap bricks if they overflow the section.\",\n        default: false,\n        \"ui:styleId\": \"styles:wrap\",\n      }),\n    ),\n    rounding: rounding({\n      default: \"rounded-md\",\n    }),\n    border: Type.Optional(border()),\n    shadow: Type.Optional(shadow()),\n    loop: Type.Optional(loop()),\n    $children: Type.Array(Type.Any(), {\n      \"ui:field\": \"hidden\",\n      description: \"List of nested bricks\",\n      default: [],\n      examples: [\n        [\n          {\n            type: \"text\",\n            props: {\n              content: \"Hello World\",\n            },\n          },\n          {\n            type: \"image\",\n            props: {\n              src: \"https://via.placeholder.com/150\",\n              alt: \"Placeholder Image\",\n            },\n          },\n        ],\n      ],\n    }),\n  }),\n});\n\nexport type Manifest = typeof manifest;\n\nexport const examples: BrickExample<Manifest>[] = [\n  // BASIC LAYOUTS\n  {\n    description: \"Simple vertical layout - Basic text and image combination\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1rem\",\n      padding: \"1.5rem\",\n      $children: [\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h3>Welcome to Our Service</h3><p>We provide innovative solutions for modern businesses.</p>\",\n          },\n        },\n        {\n          type: \"image\",\n          props: {\n            src: \"https://via.placeholder.com/300x200\",\n            alt: \"Service showcase\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Learn More\",\n            link: \"/services\",\n          },\n        },\n      ],\n    },\n  },\n\n  {\n    description: \"Horizontal layout with wrapping - Perfect for responsive image galleries\",\n    type: \"box\",\n    props: {\n      direction: \"flex-row\",\n      gap: \"1rem\",\n      wrap: true,\n      justifyContent: \"justify-center\",\n      padding: \"1rem\",\n      $children: [\n        {\n          type: \"image\",\n          props: {\n            src: \"https://via.placeholder.com/150\",\n            alt: \"Gallery image 1\",\n          },\n        },\n        {\n          type: \"image\",\n          props: {\n            src: \"https://via.placeholder.com/150\",\n            alt: \"Gallery image 2\",\n          },\n        },\n        {\n          type: \"image\",\n          props: {\n            src: \"https://via.placeholder.com/150\",\n            alt: \"Gallery image 3\",\n          },\n        },\n        {\n          type: \"image\",\n          props: {\n            src: \"https://via.placeholder.com/150\",\n            alt: \"Gallery image 4\",\n          },\n        },\n      ],\n    },\n  },\n\n  // STYLED CONTAINERS\n  {\n    description: \"Content card with background and border - Professional presentation style\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1rem\",\n      padding: \"2rem\",\n      colorPreset: { color: \"primary-50\" },\n      border: { width: \"border\", color: \"border-primary-200\" },\n      rounding: \"rounded-lg\",\n      shadow: \"shadow-md\",\n      $children: [\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h3>Featured Article</h3><p>Discover the latest trends in technology and innovation that are shaping our future.</p>\",\n          },\n        },\n        {\n          type: \"image\",\n          props: {\n            src: \"https://via.placeholder.com/400x250\",\n            alt: \"Technology trends\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Read Full Article\",\n            link: \"/articles/tech-trends\",\n          },\n        },\n      ],\n    },\n  },\n\n  // DYNAMIC CONTENT EXAMPLES\n  {\n    description: \"Employee directory using dynamic data - Shows team member profiles\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1.5rem\",\n      padding: \"2rem\",\n      colorPreset: { color: \"neutral-100\" },\n      rounding: \"rounded-lg\",\n      border: { width: \"border\", color: \"border-neutral-300\" },\n      loop: { over: \"allEmployees\" },\n      $children: [\n        {\n          type: \"image\",\n          props: {\n            src: \"{{allEmployees.photo}}\",\n            alt: \"Photo of {{allEmployees.name}}\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h3>{{allEmployees.name}}</h3><p><strong>{{allEmployees.position}}</strong></p><p>{{allEmployees.department}} • {{allEmployees.email}}</p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Contact {{allEmployees.name}}\",\n            link: \"mailto:{{allEmployees.email}}\",\n          },\n        },\n      ],\n    },\n  },\n\n  {\n    description: \"Blog post cards with horizontal layout - Great for article previews\",\n    type: \"box\",\n    props: {\n      direction: \"flex-row\",\n      gap: \"2rem\",\n      padding: \"1.5rem\",\n      justifyContent: \"justify-start\",\n      alignItems: \"items-stretch\",\n      colorPreset: { color: \"secondary-50\" },\n      rounding: \"rounded-lg\",\n      shadow: \"shadow-sm\",\n      loop: { over: \"blogPosts\" },\n      $children: [\n        {\n          type: \"image\",\n          props: {\n            src: \"{{blogPosts.featuredImage}}\",\n            alt: \"{{blogPosts.title}}\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h4>{{blogPosts.title}}</h4><p>{{blogPosts.excerpt}}</p><p><em>By {{blogPosts.author}} • {{blogPosts.publishDate}}</em></p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Read More\",\n            link: \"/blog/{{blogPosts.slug}}\",\n          },\n        },\n      ],\n    },\n  },\n\n  {\n    description: \"Product showcase cards with pricing - Perfect for e-commerce displays\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1rem\",\n      padding: \"1.5rem\",\n      justifyContent: \"justify-center\",\n      alignItems: \"items-center\",\n      colorPreset: { color: \"accent-50\" },\n      border: { width: \"border-2\", color: \"border-accent-200\" },\n      rounding: \"rounded-xl\",\n      shadow: \"shadow-md\",\n      loop: { over: \"featuredProducts\" },\n      $children: [\n        {\n          type: \"image\",\n          props: {\n            src: \"{{featuredProducts.image}}\",\n            alt: \"{{featuredProducts.name}}\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h3>{{featuredProducts.name}}</h3><p>{{featuredProducts.description}}</p><p><strong>${{featuredProducts.price}}</strong></p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Add to Cart\",\n            link: \"/cart/add/{{featuredProducts.id}}\",\n          },\n        },\n      ],\n    },\n  },\n\n  // RESPONSIVE GRID LAYOUTS\n  {\n    description: \"Team members with wrapping - Responsive grid that adapts to screen size\",\n    type: \"box\",\n    props: {\n      direction: \"flex-row\",\n      gap: \"2rem\",\n      padding: \"2rem\",\n      wrap: true,\n      justifyContent: \"justify-center\",\n      alignItems: \"items-start\",\n      colorPreset: { color: \"secondary-100\" },\n      rounding: \"rounded-lg\",\n      loop: { over: \"teamMembers\" },\n      $children: [\n        {\n          type: \"image\",\n          props: {\n            src: \"{{teamMembers.avatar}}\",\n            alt: \"{{teamMembers.fullName}}\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h4>{{teamMembers.fullName}}</h4><p><strong>{{teamMembers.role}}</strong></p><p>{{teamMembers.bio}}</p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"View Profile\",\n            link: \"/team/{{teamMembers.slug}}\",\n          },\n        },\n      ],\n    },\n  },\n\n  {\n    description: \"Event listings with accent styling - Prominent call-to-action design\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1.25rem\",\n      padding: \"2.5rem\",\n      alignItems: \"items-center\",\n      colorPreset: { color: \"accent-100\" },\n      border: { width: \"border-2\", color: \"border-accent-300\" },\n      rounding: \"rounded-lg\",\n      shadow: \"shadow-lg\",\n      loop: { over: \"upcomingEvents\" },\n      $children: [\n        {\n          type: \"icon\",\n          props: {\n            icon: \"mdi:calendar-event\",\n            size: \"2rem\",\n            color: \"#f59e0b\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h3>{{upcomingEvents.title}}</h3><p><strong>{{upcomingEvents.date}} at {{upcomingEvents.time}}</strong></p><p>{{upcomingEvents.venue}} • {{upcomingEvents.city}}</p><p>{{upcomingEvents.description}}</p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Register Now\",\n            link: \"/events/{{upcomingEvents.slug}}/register\",\n          },\n        },\n      ],\n    },\n  },\n\n  // TESTIMONIALS & REVIEWS\n  {\n    description: \"Customer testimonials with star ratings - Social proof presentation\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1rem\",\n      padding: \"3rem\",\n      justifyContent: \"justify-center\",\n      alignItems: \"items-center\",\n      colorPreset: { color: \"neutral-50\" },\n      shadow: \"shadow-lg\",\n      rounding: \"rounded-2xl\",\n      loop: { over: \"customerTestimonials\" },\n      $children: [\n        {\n          type: \"icon\",\n          props: {\n            icon: \"mdi:format-quote-open\",\n            size: \"2rem\",\n            color: \"#6b7280\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              '<p style=\"text-align: center\"><em>\"{{customerTestimonials.quote}}\"</em></p><p style=\"text-align: center\"><strong>{{customerTestimonials.customerName}}</strong></p><p style=\"text-align: center\">{{customerTestimonials.company}} • {{customerTestimonials.position}}</p>',\n          },\n        },\n        {\n          type: \"icon\",\n          props: {\n            icon: \"mdi:star\",\n            size: \"1.5rem\",\n            color: \"#fbbf24\",\n          },\n        },\n      ],\n    },\n  },\n\n  {\n    description: \"Portfolio project showcase - Creative work presentation with client details\",\n    type: \"box\",\n    props: {\n      direction: \"flex-row\",\n      gap: \"1.5rem\",\n      padding: \"2rem\",\n      alignItems: \"items-start\",\n      justifyContent: \"justify-start\",\n      colorPreset: { color: \"primary-50\" },\n      border: { width: \"border\", color: \"border-primary-200\" },\n      rounding: \"rounded-lg\",\n      loop: { over: \"portfolioProjects\" },\n      $children: [\n        {\n          type: \"image\",\n          props: {\n            src: \"{{portfolioProjects.thumbnail}}\",\n            alt: \"{{portfolioProjects.projectName}}\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h4>{{portfolioProjects.projectName}}</h4><p><strong>{{portfolioProjects.client}}</strong></p><p>{{portfolioProjects.category}} • {{portfolioProjects.year}}</p><p>{{portfolioProjects.shortDescription}}</p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"View Project\",\n            link: \"/portfolio/{{portfolioProjects.slug}}\",\n          },\n        },\n      ],\n    },\n  },\n\n  // NEWS & ARTICLES\n  {\n    description: \"News article previews with categories - Clean editorial layout\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1.5rem\",\n      padding: \"2rem\",\n      colorPreset: { color: \"neutral-100\" },\n      border: { width: \"border\", color: \"border-neutral-300\" },\n      rounding: \"rounded-md\",\n      loop: { over: \"latestNews\" },\n      $children: [\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h3>{{latestNews.headline}}</h3><p><strong>{{latestNews.category}}</strong> • {{latestNews.publishedDate}}</p><p>{{latestNews.summary}}</p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Read Full Article\",\n            link: \"/news/{{latestNews.slug}}\",\n          },\n        },\n      ],\n    },\n  },\n\n  // SERVICE OFFERINGS\n  {\n    description: \"Service packages with icons and pricing - Professional service presentation\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1rem\",\n      padding: \"2rem\",\n      justifyContent: \"justify-center\",\n      alignItems: \"items-center\",\n      colorPreset: { color: \"secondary-200\" },\n      rounding: \"rounded-xl\",\n      shadow: \"shadow-md\",\n      loop: { over: \"companyServices\" },\n      $children: [\n        {\n          type: \"icon\",\n          props: {\n            icon: \"{{companyServices.iconName}}\",\n            size: \"2.5rem\",\n            color: \"{{companyServices.iconColor}}\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h4 style='text-align: center'>{{companyServices.serviceName}}</h4><p style='text-align: center'>{{companyServices.description}}</p><p style='text-align: center'><strong>Starting at ${{companyServices.price}}</strong></p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Learn More\",\n            link: \"/services/{{companyServices.serviceSlug}}\",\n          },\n        },\n      ],\n    },\n  },\n];\n"],"mappings":"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","names":[]}

package/dist/shared/{chunk-QL3T5HJQ.js → chunk-LGGPCCCY.js}

@@ -2,10 +2,10 @@
 
 import {
   defineProps
-} from "./chunk-BHC2A43S.js";
+} from "./chunk-VTCHJT4O.js";
 import {
   defineBrickManifest
-} from "./chunk-TB3X4LRQ.js";
+} from "./chunk-J45LSQT6.js";
 
 // src/shared/bricks/manifests/spacer.manifest.ts
 import { CgSpaceBetween } from "react-icons/cg";
@@ -56,4 +56,4 @@ export {
   manifest,
   examples
 };
-//# sourceMappingURL=chunk-QL3T5HJQ.js.map
+//# sourceMappingURL=chunk-LGGPCCCY.js.map

package/dist/shared/chunk-LGGPCCCY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shared/bricks/manifests/spacer.manifest.ts"],"sourcesContent":["import { defineBrickManifest } from \"~/shared/brick-manifest\";\nimport { defineProps } from \"../props/helpers\";\nimport type { BrickProps } from \"../props/types\";\nimport { CgSpaceBetween } from \"react-icons/cg\";\nimport type { BrickExample } from \"./_types\";\n\nexport const manifest = defineBrickManifest({\n  type: \"spacer\",\n  name: \"Spacer\",\n  category: \"container\",\n  description: \"A flexible element to create space between bricks.\",\n  staticClasses: \"self-stretch\",\n  minWidth: {\n    desktop: 50,\n  },\n  defaultWidth: {\n    mobile: \"auto\",\n    desktop: \"50px\",\n  },\n  minHeight: {\n    mobile: 30,\n  },\n  icon: CgSpaceBetween,\n  props: defineProps({}),\n});\n\nexport type Manifest = typeof manifest;\n\nexport const examples: BrickExample<Manifest>[] = [\n  {\n    description: \"Transparent spacer of 100px wide\",\n    type: \"spacer\",\n    props: {\n      width: \"100px\",\n    },\n  },\n  {\n    description: \"Transparent spacer of 20px wide\",\n    type: \"spacer\",\n    props: {\n      width: \"20px\",\n    },\n  },\n  {\n    description: \"Transparent spacer set in % (percentage)\",\n    type: \"spacer\",\n    props: {\n      width: \"20%\",\n    },\n  },\n];\n"],"mappings":";;;;;;;;;;AAGA,SAAS,sBAAsB;AAGxB,IAAM,WAAW,oBAAoB;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,eAAe;AAAA,EACf,UAAU;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,EACN,OAAO,YAAY,CAAC,CAAC;AACvB,CAAC;AAIM,IAAM,WAAqC;AAAA,EAChD;AAAA,IACE,aAAa;AAAA,IACb,MAAM;AAAA,IACN,OAAO;AAAA,MACL,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,aAAa;AAAA,IACb,MAAM;AAAA,IACN,OAAO;AAAA,MACL,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,aAAa;AAAA,IACb,MAAM;AAAA,IACN,OAAO;AAAA,MACL,OAAO;AAAA,IACT;AAAA,EACF;AACF;","names":[]}

package/dist/shared/{chunk-2HO4FHLM.js → chunk-LPAQ47C6.js}

@@ -1,30 +1,30 @@
 /*! Upstart.gg - Copyright (C) 2024 Flippable - https://github.com/upstart-gg/upstart/blob/main/LICENSE */
 
+import {
+  defineProps
+} from "./chunk-VTCHJT4O.js";
 import {
   boolean
 } from "./chunk-KNREHAPN.js";
 import {
-  defineProps
-} from "./chunk-BHC2A43S.js";
-import {
-  defineBrickManifest
-} from "./chunk-TB3X4LRQ.js";
+  fontSize,
+  textContent
+} from "./chunk-2U5U3CCJ.js";
 import {
-  loopRef
-} from "./chunk-BW6EFRSF.js";
+  cssLength
+} from "./chunk-OJ6KL7FU.js";
 import {
-  fontSizeRef,
-  textContentRef
-} from "./chunk-F22LDHEO.js";
+  loop
+} from "./chunk-XFZQGRRL.js";
 import {
-  colorPresetRef
-} from "./chunk-TFGGYU6Y.js";
+  colorPreset
+} from "./chunk-IEMCCHM4.js";
 import {
-  cssLengthRef
-} from "./chunk-BPBKHEQ5.js";
+  defineBrickManifest
+} from "./chunk-J45LSQT6.js";
 import {
   StringEnum
-} from "./chunk-JK2FWFJU.js";
+} from "./chunk-GDYCCB3B.js";
 
 // src/shared/bricks/manifests/accordion.manifest.ts
 import { Type } from "@sinclair/typebox";
@@ -33,24 +33,53 @@ var manifest = defineBrickManifest({
   type: "accordion",
   name: "Accordion",
   description: "An accordion/collapse element for expandable content",
-  aiInstructions: `
-This accordion element displays content in collapsible panels.
-It is typically used for FAQ sections, organized documentation, or to save space.
-Each item has a title and expandable content area.
-Multiple panels can be open simultaneously or limited to one at a time.
-  `.trim(),
+  aiInstructions: `Use this accordion component for organizing collapsible content sections that help save space and improve content accessibility.
+
+WHEN TO USE:
+- FAQ sections with questions and detailed answers
+- Product feature lists with expandable descriptions
+- Documentation sections with organized topics
+- Step-by-step processes or tutorials
+- Menu categories (restaurant, services, pricing tiers)
+- Legal documents with different sections
+- Course curricula with lesson breakdowns
+- Support categories with help topics
+
+STYLING GUIDELINES:
+- colorPreset: Use "primary-500" for branded sections, "secondary-400" for features, "neutral-200" for documentation, "accent-500" for highlights
+- fontSize: "text-sm" for compact content, "text-base" for standard, "text-lg" for emphasis
+- rounding: "rounded-none" for sharp/corporate, "rounded-md" for standard, "rounded-lg" for friendly, "rounded-xl"/"rounded-2xl"/"rounded-3xl" for modern
+- gap: "1px" for minimal separation, "0.5rem" for comfortable, "1rem" for spacious layouts
+- restrictOneOpen: true for FAQs/single focus, false for reference materials/feature lists
+
+CONTENT ORGANIZATION:
+- Use clear, descriptive titles that preview the content
+- Keep expandable content concise but comprehensive
+- Support HTML formatting in content (lists, links, line breaks)
+- Set defaultOpen: true for most important/frequently accessed items
+
+DYNAMIC CONTENT:
+- Support template variables in titles: "{{category.name}} - {{category.count}} items"
+- Dynamic content: "Learn about {{product.features}} and {{product.benefits}}"
+- Loop over data: Display product categories, team departments, or service areas
+
+AVOID:
+- Too many items (>10) without organization
+- Very long titles that don't fit on mobile
+- Empty or placeholder content in collapsed sections
+- Mixing different content types in the same accordion`,
   icon: TfiLayoutAccordionSeparated,
   defaultWidth: { desktop: "450px", mobile: "100%" },
   props: defineProps({
     items: Type.Array(
       Type.Object({
-        title: textContentRef({
+        title: textContent({
           title: "Title",
           default: "My title",
           disableSizing: true,
           showInSettings: true
         }),
-        content: textContentRef({ title: "Content", default: "Expandable content goes here" }),
+        content: textContent({ title: "Content", default: "Expandable content goes here" }),
         defaultOpen: Type.Optional(boolean("Open by default", false))
       }),
       {
@@ -60,12 +89,12 @@ Multiple panels can be open simultaneously or limited to one at a time.
         }
       }
     ),
-    fontSize: Type.Optional(fontSizeRef({ default: "inherit" })),
+    fontSize: Type.Optional(fontSize({ default: "inherit" })),
     restrictOneOpen: boolean("Restrict to one open item", false, {
       description: "Restrict to one open item at a time. If false, multiple items can be open simultaneously."
     }),
     gap: Type.Optional(
-      cssLengthRef({
+      cssLength({
         title: "Gap",
         description: "The gap between the accordion items.",
         default: "1px",
@@ -96,20 +125,24 @@ Multiple panels can be open simultaneously or limited to one at a time.
       )
     ),
     colorPreset: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Color",
         default: { color: "bg-primary-500 text-primary-500-content" }
       })
     ),
-    loop: Type.Optional(loopRef())
+    loop: Type.Optional(loop())
   })
 });
 var examples = [
+  // FAQ SECTIONS
   {
-    description: "FAQ section with card styling with single open",
+    description: "FAQ section with single open restriction - Classic use case for customer support",
     type: "accordion",
     props: {
       restrictOneOpen: true,
+      colorPreset: { color: "primary-500" },
+      rounding: "rounded-md",
+      gap: "0.5rem",
       items: [
         {
           title: "What is included in the basic plan?",
@@ -127,24 +160,20 @@ var examples = [
         {
           title: "What payment methods do you accept?",
           content: "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for annual subscriptions. All payments are processed securely through our payment partners."
-        },
-        {
-          title: "Do you offer refunds?",
-          content: "We offer a 30-day money-back guarantee for all new subscriptions. If you're not satisfied with our service, contact our support team within 30 days of your purchase for a full refund."
         }
       ]
     }
   },
+  // PRODUCT FEATURES
   {
-    description: "Product features accordion with multiple open panels and secondary color scheme",
+    description: "Product features with multiple open panels - Good for showcasing software capabilities",
     type: "accordion",
     props: {
       restrictOneOpen: false,
-      colorPreset: {
-        color: "secondary-400"
-      },
+      colorPreset: { color: "secondary-400" },
       rounding: "rounded-lg",
       gap: "0.5rem",
+      fontSize: "text-base",
       items: [
         {
           title: "Advanced Analytics Dashboard",
@@ -167,14 +196,13 @@ var examples = [
       ]
     }
   },
+  // DOCUMENTATION & GUIDES
   {
-    description: "Documentation sections with neutral styling and large font size",
+    description: "Documentation sections with neutral colors - Perfect for help centers and knowledge bases",
     type: "accordion",
     props: {
       restrictOneOpen: false,
-      colorPreset: {
-        color: "neutral-200"
-      },
+      colorPreset: { color: "neutral-200" },
       fontSize: "text-lg",
       rounding: "rounded-md",
       gap: "2px",
@@ -194,14 +222,13 @@ var examples = [
       ]
     }
   },
+  // MENU & CATALOG SECTIONS
   {
-    description: "Restaurant menu sections with accent colors and extra large rounding",
+    description: "Restaurant menu sections with accent colors - Great for organizing menu items or service categories",
     type: "accordion",
     props: {
       restrictOneOpen: true,
-      colorPreset: {
-        color: "accent-500"
-      },
+      colorPreset: { color: "accent-500" },
       rounding: "rounded-xl",
       gap: "1rem",
       items: [
@@ -221,14 +248,13 @@ var examples = [
       ]
     }
   },
+  // COURSE & EDUCATIONAL CONTENT
   {
-    description: "Course curriculum with primary colors and minimal gap",
+    description: "Course curriculum with primary colors - Excellent for educational content and training programs",
     type: "accordion",
     props: {
       restrictOneOpen: false,
-      colorPreset: {
-        color: "primary-600"
-      },
+      colorPreset: { color: "primary-600" },
       rounding: "rounded-sm",
       gap: "1px",
       fontSize: "text-base",
@@ -252,197 +278,137 @@ var examples = [
       ]
     }
   },
+  // SUPPORT & HELP SECTIONS
   {
-    description: "Legal terms accordion with neutral dark theme and large gaps",
-    type: "accordion",
-    props: {
-      restrictOneOpen: true,
-      colorPreset: {
-        color: "neutral-800"
-      },
-      rounding: "rounded-lg",
-      gap: "1.5rem",
-      fontSize: "text-sm",
-      items: [
-        {
-          title: "Terms of Service",
-          content: "By accessing and using this website, you accept and agree to be bound by the terms and provision of this agreement. These terms apply to all visitors, users, and others who access or use the service."
-        },
-        {
-          title: "Privacy Policy",
-          content: "We collect information you provide directly to us, such as when you create an account, make a purchase, or contact us. We use this information to provide, maintain, and improve our services."
-        },
-        {
-          title: "Cookie Policy",
-          content: "We use cookies and similar tracking technologies to track activity on our service and hold certain information. You can instruct your browser to refuse all cookies or indicate when a cookie is being sent."
-        }
-      ]
-    }
-  },
-  {
-    description: "Event schedule with secondary colors and 2xl rounding",
+    description: "Support categories with sharp corners - Modern corporate style for help centers",
     type: "accordion",
     props: {
       restrictOneOpen: false,
-      colorPreset: {
-        color: "secondary-300"
-      },
-      rounding: "rounded-2xl",
-      gap: "0.75rem",
+      colorPreset: { color: "primary-300" },
+      rounding: "rounded-none",
+      gap: "0px",
+      fontSize: "text-base",
       items: [
         {
-          title: "Day 1: Opening Ceremony & Keynotes",
-          content: "9:00 AM - Registration & Welcome Coffee<br/>10:00 AM - Opening Ceremony<br/>11:00 AM - Keynote: Future of Technology<br/>12:30 PM - Networking Lunch<br/>2:00 PM - Panel Discussion<br/>4:00 PM - Closing Remarks",
-          defaultOpen: true
-        },
-        {
-          title: "Day 2: Workshops & Technical Sessions",
-          content: "9:00 AM - Workshop: AI in Practice<br/>11:00 AM - Technical Deep Dive: Cloud Architecture<br/>1:00 PM - Lunch Break<br/>2:30 PM - Hands-on Lab: DevOps Tools<br/>4:30 PM - Q&A Session"
+          title: "Account & Billing",
+          content: "Get help with account settings, password reset, billing questions, subscription management, and payment issues. Average response time: 2 hours during business hours."
         },
         {
-          title: "Day 3: Networking & Demo Day",
-          content: "10:00 AM - Startup Pitch Competition<br/>12:00 PM - Demo Showcase<br/>2:00 PM - Networking Session<br/>3:30 PM - Awards Ceremony<br/>5:00 PM - Closing Party"
-        }
-      ]
-    }
-  },
-  {
-    description: "Fitness program details with accent colors and 3xl rounding",
-    type: "accordion",
-    props: {
-      restrictOneOpen: true,
-      colorPreset: {
-        color: "accent-400"
-      },
-      rounding: "rounded-3xl",
-      gap: "1.25rem",
-      fontSize: "text-lg",
-      items: [
-        {
-          title: "Beginner Program (4 weeks)",
-          content: "Perfect for newcomers to fitness. Includes basic bodyweight exercises, flexibility training, and cardio. 3 sessions per week, 45 minutes each. Includes nutrition guidance and progress tracking."
+          title: "Technical Support",
+          content: "Troubleshoot technical issues, API problems, integration questions, and performance concerns. Includes access to our knowledge base and video tutorials."
         },
         {
-          title: "Intermediate Program (8 weeks)",
-          content: "For those with some fitness experience. Combines strength training, HIIT workouts, and endurance building. 4 sessions per week, 60 minutes each. Includes meal planning and supplement recommendations."
+          title: "Sales & Partnerships",
+          content: "Inquiries about enterprise solutions, custom pricing, partnership opportunities, and bulk discounts. Schedule a call with our sales team for personalized assistance."
         },
         {
-          title: "Advanced Program (12 weeks)",
-          content: "High-intensity program for experienced athletes. Features complex movements, periodization, and sport-specific training. 5-6 sessions per week. Includes recovery protocols and performance optimization."
+          title: "Feature Requests",
+          content: "Submit ideas for new features, improvements, and integrations. Our product team reviews all suggestions and provides updates on development roadmap."
         }
       ]
     }
   },
+  // PRICING & COMPARISON
   {
-    description: "Support categories with primary colors and no rounding",
+    description: "Product pricing comparison with multiple defaults open - Perfect for plan comparisons",
     type: "accordion",
     props: {
       restrictOneOpen: false,
-      colorPreset: {
-        color: "primary-300"
-      },
-      rounding: "rounded-none",
-      gap: "0px",
+      colorPreset: { color: "secondary-500" },
+      rounding: "rounded-lg",
+      gap: "0.5rem",
       fontSize: "text-base",
       items: [
         {
-          title: "Account & Billing",
-          content: "Get help with account settings, password reset, billing questions, subscription management, and payment issues. Average response time: 2 hours during business hours."
-        },
-        {
-          title: "Technical Support",
-          content: "Troubleshoot technical issues, API problems, integration questions, and performance concerns. Includes access to our knowledge base and video tutorials."
+          title: "Basic Plan - $9/month",
+          content: "\u2713 Up to 5 projects<br/>\u2713 10GB storage<br/>\u2713 Email support<br/>\u2713 Basic analytics<br/>\u2713 Mobile app access<br/>\u2717 API access<br/>\u2717 Custom integrations",
+          defaultOpen: true
         },
         {
-          title: "Sales & Partnerships",
-          content: "Inquiries about enterprise solutions, custom pricing, partnership opportunities, and bulk discounts. Schedule a call with our sales team for personalized assistance."
+          title: "Pro Plan - $29/month",
+          content: "\u2713 Unlimited projects<br/>\u2713 100GB storage<br/>\u2713 Priority support<br/>\u2713 Advanced analytics<br/>\u2713 API access<br/>\u2713 Custom integrations<br/>\u2713 Team collaboration",
+          defaultOpen: true
         },
         {
-          title: "Feature Requests",
-          content: "Submit ideas for new features, improvements, and integrations. Our product team reviews all suggestions and provides updates on development roadmap."
+          title: "Enterprise Plan - Custom pricing",
+          content: "\u2713 Everything in Pro<br/>\u2713 Unlimited storage<br/>\u2713 Dedicated support<br/>\u2713 White-label options<br/>\u2713 SSO integration<br/>\u2713 Custom contracts<br/>\u2713 On-premise deployment"
         }
       ]
     }
   },
+  // DYNAMIC CONTENT EXAMPLES
   {
-    description: "Company policies with neutral colors and small font size",
+    description: "Dynamic team member accordion using template variables - Shows data-driven content",
     type: "accordion",
     props: {
       restrictOneOpen: true,
-      colorPreset: {
-        color: "neutral-100"
-      },
-      rounding: "rounded-md",
-      gap: "0.25rem",
-      fontSize: "text-sm",
+      colorPreset: { color: "accent-400" },
+      rounding: "rounded-lg",
+      gap: "0.5rem",
       items: [
         {
-          title: "Remote Work Policy",
-          content: "All employees have the flexibility to work remotely full-time or adopt a hybrid schedule. Required equipment is provided, and employees must maintain reliable internet connection and dedicated workspace."
+          title: "Meet {{team.leader.name}} - {{team.leader.role}}",
+          content: "{{team.leader.bio}} <br/><br/>Experience: {{team.leader.experience}} years<br/>Email: {{team.leader.email}}<br/>Location: {{team.leader.location}}",
+          defaultOpen: true
         },
         {
-          title: "Professional Development",
-          content: "Annual budget of $2,000 per employee for conferences, courses, certifications, and training materials. Time off is provided for approved learning activities and skill development."
+          title: "{{team.designer.name}} - {{team.designer.role}}",
+          content: "{{team.designer.bio}} <br/><br/>Specializes in: {{team.designer.specialties}}<br/>Portfolio: <a href='{{team.designer.portfolio}}'>View Work</a>"
         },
         {
-          title: "Time Off & Benefits",
-          content: "Unlimited PTO policy with minimum 3 weeks encouraged annually. Comprehensive health insurance, dental, vision, 401k matching, and wellness stipend included."
+          title: "{{team.developer.name}} - {{team.developer.role}}",
+          content: "{{team.developer.bio}} <br/><br/>Technologies: {{team.developer.skills}}<br/>GitHub: <a href='{{team.developer.github}}'>@{{team.developer.username}}</a>"
         }
       ]
     }
   },
+  // SPECIAL STYLING VARIATIONS
   {
-    description: "Product comparison with secondary colors and multiple defaults open",
+    description: "Legal documents with dark theme and large gaps - Professional legal content presentation",
     type: "accordion",
     props: {
-      restrictOneOpen: false,
-      colorPreset: {
-        color: "secondary-500"
-      },
+      restrictOneOpen: true,
+      colorPreset: { color: "neutral-800" },
       rounding: "rounded-lg",
-      gap: "0.5rem",
-      fontSize: "text-base",
+      gap: "1.5rem",
+      fontSize: "text-sm",
       items: [
         {
-          title: "Basic Plan - $9/month",
-          content: "\u2713 Up to 5 projects<br/>\u2713 10GB storage<br/>\u2713 Email support<br/>\u2713 Basic analytics<br/>\u2713 Mobile app access<br/>\u2717 API access<br/>\u2717 Custom integrations",
-          defaultOpen: true
+          title: "Terms of Service",
+          content: "By accessing and using this website, you accept and agree to be bound by the terms and provision of this agreement. These terms apply to all visitors, users, and others who access or use the service."
         },
         {
-          title: "Pro Plan - $29/month",
-          content: "\u2713 Unlimited projects<br/>\u2713 100GB storage<br/>\u2713 Priority support<br/>\u2713 Advanced analytics<br/>\u2713 API access<br/>\u2713 Custom integrations<br/>\u2713 Team collaboration",
-          defaultOpen: true
+          title: "Privacy Policy",
+          content: "We collect information you provide directly to us, such as when you create an account, make a purchase, or contact us. We use this information to provide, maintain, and improve our services."
         },
         {
-          title: "Enterprise Plan - Custom pricing",
-          content: "\u2713 Everything in Pro<br/>\u2713 Unlimited storage<br/>\u2713 Dedicated support<br/>\u2713 White-label options<br/>\u2713 SSO integration<br/>\u2713 Custom contracts<br/>\u2713 On-premise deployment"
+          title: "Cookie Policy",
+          content: "We use cookies and similar tracking technologies to track activity on our service and hold certain information. You can instruct your browser to refuse all cookies or indicate when a cookie is being sent."
         }
       ]
     }
   },
   {
-    description: "Troubleshooting guide with accent colors and large font",
+    description: "Ultra-rounded modern design with 3xl rounding - Contemporary aesthetic for creative brands",
     type: "accordion",
     props: {
-      restrictOneOpen: false,
-      colorPreset: {
-        color: "accent-600"
-      },
-      rounding: "rounded-xl",
-      gap: "1rem",
+      restrictOneOpen: true,
+      colorPreset: { color: "accent-300" },
+      rounding: "rounded-3xl",
+      gap: "1.5rem",
       fontSize: "text-lg",
       items: [
         {
-          title: "Connection Issues",
-          content: "1. Check your internet connection<br/>2. Clear browser cache and cookies<br/>3. Disable VPN if active<br/>4. Try incognito/private browsing mode<br/>5. Contact support if issues persist"
+          title: "Design Philosophy",
+          content: "We believe in creating digital experiences that are both beautiful and functional. Our approach combines user-centered design with cutting-edge technology to deliver exceptional results."
         },
         {
-          title: "Login Problems",
-          content: "1. Verify your email address and password<br/>2. Use 'Forgot Password' to reset<br/>3. Check for CAPS LOCK<br/>4. Try a different browser<br/>5. Ensure account is not suspended"
+          title: "Our Process",
+          content: "Discovery \u2192 Strategy \u2192 Design \u2192 Development \u2192 Testing \u2192 Launch. Each phase includes client collaboration, iterative feedback, and quality assurance to ensure optimal outcomes."
         },
         {
-          title: "Performance Issues",
-          content: "1. Close unnecessary browser tabs<br/>2. Update your browser to latest version<br/>3. Disable browser extensions<br/>4. Check system resources (RAM/CPU)<br/>5. Try using the mobile app instead"
+          title: "Why Choose Us",
+          content: "15+ years experience, 200+ successful projects, award-winning designs, and a commitment to excellence. We're not just service providers - we're strategic partners in your success."
         }
       ]
     }
@@ -453,4 +419,4 @@ export {
   manifest,
   examples
 };
-//# sourceMappingURL=chunk-2HO4FHLM.js.map
+//# sourceMappingURL=chunk-LPAQ47C6.js.map