@uipath/apollo-wind 0.8.0 → 0.9.0

package/dist/examples/new-project-example.cjs

@@ -0,0 +1,550 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    NewProjectExample: ()=>NewProjectExample
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const button_cjs_namespaceObject = require("../components/ui/button.cjs");
+const checkbox_cjs_namespaceObject = require("../components/ui/checkbox.cjs");
+const drawer_cjs_namespaceObject = require("../components/ui/drawer.cjs");
+const input_cjs_namespaceObject = require("../components/ui/input.cjs");
+const label_cjs_namespaceObject = require("../components/ui/label.cjs");
+const textarea_cjs_namespaceObject = require("../components/ui/textarea.cjs");
+const index_cjs_namespaceObject = require("../lib/index.cjs");
+const layout_index_cjs_namespaceObject = require("../components/ui/layout/index.cjs");
+function NewProjectExample({ className, title = "Let's create an agentic process", subtitle = 'Design and orchestrate end-to-end processes with AI agents, robots, and people using BPMN-based diagrams.', templates = [
+    {
+        id: '1',
+        name: 'Invoice processing',
+        description: 'Automate the end-to-end process of capturing, validating, and approving invoices.',
+        usageCount: 3400,
+        category: 'financial',
+        tools: [
+            'office365',
+            'maestro'
+        ]
+    },
+    {
+        id: '2',
+        name: 'Loan processing',
+        description: 'Optimize the evaluation, approval, and disbursement of loans.',
+        usageCount: 1700,
+        category: 'financial',
+        tools: [
+            'google',
+            'maestro'
+        ]
+    },
+    {
+        id: '3',
+        name: 'Supplier onboarding',
+        description: 'Coordinate the registration, verification, and integration of new suppliers.',
+        usageCount: 1200,
+        category: 'other',
+        tools: [
+            'office365',
+            'maestro'
+        ]
+    }
+], categories = [
+    {
+        id: 'financial',
+        label: 'Financial'
+    },
+    {
+        id: 'healthcare',
+        label: 'Healthcare'
+    },
+    {
+        id: 'other',
+        label: 'Other'
+    }
+], tools = [
+    {
+        id: 'office365',
+        label: 'Office365'
+    },
+    {
+        id: 'jira',
+        label: 'Jira'
+    },
+    {
+        id: 'sap-concur',
+        label: 'SAP Concur'
+    },
+    {
+        id: 'slack',
+        label: 'Slack'
+    },
+    {
+        id: 'docusign',
+        label: 'DocuSign'
+    }
+], autopilot, onCreateBlank }) {
+    const [autopilotPrompt, setAutopilotPrompt] = external_react_namespaceObject.useState('');
+    const [drawerOpen, setDrawerOpen] = external_react_namespaceObject.useState(false);
+    const [searchQuery, setSearchQuery] = external_react_namespaceObject.useState('');
+    const [selectedCategories, setSelectedCategories] = external_react_namespaceObject.useState([]);
+    const [selectedTools, setSelectedTools] = external_react_namespaceObject.useState([]);
+    const handleAutopilotSubmit = ()=>{
+        if (autopilot?.onSubmit && autopilotPrompt.trim()) autopilot.onSubmit(autopilotPrompt);
+    };
+    const formatUsageCount = (count)=>{
+        if (count >= 1000) return `${(count / 1000).toFixed(1)}k`;
+        return count.toString();
+    };
+    const toggleCategory = (categoryId)=>{
+        setSelectedCategories((prev)=>prev.includes(categoryId) ? prev.filter((c)=>c !== categoryId) : [
+                ...prev,
+                categoryId
+            ]);
+    };
+    const toggleTool = (toolId)=>{
+        setSelectedTools((prev)=>prev.includes(toolId) ? prev.filter((t)=>t !== toolId) : [
+                ...prev,
+                toolId
+            ]);
+    };
+    const filteredExamples = external_react_namespaceObject.useMemo(()=>templates.filter((template)=>{
+            const matchesSearch = '' === searchQuery || template.name.toLowerCase().includes(searchQuery.toLowerCase()) || template.description.toLowerCase().includes(searchQuery.toLowerCase());
+            const matchesCategory = 0 === selectedCategories.length || template.category && selectedCategories.includes(template.category);
+            const matchesTools = 0 === selectedTools.length || template.tools && template.tools.some((tool)=>selectedTools.includes(tool));
+            return matchesSearch && matchesCategory && matchesTools;
+        }), [
+        templates,
+        searchQuery,
+        selectedCategories,
+        selectedTools
+    ]);
+    const ExampleCard = ({ template })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+            className: "group rounded-lg border border-border/30 bg-card p-8 transition-all hover:border-border/60 hover:shadow-sm",
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                    gap: 4,
+                    flex: 1,
+                    className: "mb-8",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
+                            className: "text-base font-semibold leading-tight",
+                            children: template.name
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                            className: "text-sm text-muted-foreground leading-relaxed",
+                            children: template.description
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                            gap: 1.5,
+                            align: "center",
+                            className: "text-xs text-muted-foreground",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
+                                    className: "h-3.5 w-3.5",
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    viewBox: "0 0 24 24",
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round",
+                                        strokeWidth: 2,
+                                        d: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    children: formatUsageCount(template.usageCount)
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                    variant: "outline",
+                    size: "sm",
+                    className: "h-9 w-full",
+                    onClick: template.onUse,
+                    children: "Use"
+                })
+            ]
+        });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                minH: "screen",
+                gap: 8,
+                className: (0, index_cjs_namespaceObject.cn)('bg-background px-8 py-16 md:px-16 md:py-20', className),
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                            justify: "between",
+                            align: "start",
+                            gap: 8,
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                                    flex: 1,
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h1", {
+                                            className: "text-3xl font-bold tracking-tight",
+                                            children: title
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                            className: "mt-4 text-base text-muted-foreground",
+                                            children: subtitle
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                    variant: "link",
+                                    onClick: ()=>setDrawerOpen(true),
+                                    className: "shrink-0",
+                                    children: "Explore templates"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Grid, {
+                        gap: 8,
+                        cols: 1,
+                        className: "sm:grid-cols-2 lg:grid-cols-4",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                                className: "group flex cursor-pointer flex-col items-center justify-between rounded-lg border border-dashed border-border/40 bg-card p-8 text-center transition-all hover:border-border/70 hover:shadow-sm",
+                                onClick: onCreateBlank,
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                                        gap: 4,
+                                        w: "full",
+                                        children: [
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
+                                                className: "text-base font-semibold",
+                                                children: "Blank agentic process"
+                                            }),
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                                className: "text-sm text-muted-foreground",
+                                                children: "Start building without a template."
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "mt-8 flex h-20 w-20 items-center justify-center rounded-lg border-2 border-dashed border-border/50",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Plus, {
+                                            className: "h-8 w-8 text-primary"
+                                        })
+                                    })
+                                ]
+                            }),
+                            templates.slice(0, 3).map((template)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ExampleCard, {
+                                    template: template
+                                }, template.id))
+                        ]
+                    }),
+                    autopilot && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "mx-auto w-full max-w-3xl",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
+                                className: "mb-6 text-lg font-semibold",
+                                children: "Autopilot"
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "rounded-lg border border-border/30 bg-card",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                        className: "relative p-6",
+                                        children: [
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(textarea_cjs_namespaceObject.Textarea, {
+                                                placeholder: autopilot.placeholder,
+                                                value: autopilotPrompt,
+                                                onChange: (e)=>setAutopilotPrompt(e.target.value),
+                                                className: "min-h-[120px] resize-none border-0 p-0 pb-12 text-sm placeholder:text-muted-foreground/50 focus-visible:ring-0",
+                                                onKeyDown: (e)=>{
+                                                    if ('Enter' === e.key && (e.metaKey || e.ctrlKey)) {
+                                                        e.preventDefault();
+                                                        handleAutopilotSubmit();
+                                                    }
+                                                }
+                                            }),
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                className: "absolute bottom-6 left-6 right-6 flex items-center justify-between",
+                                                children: [
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                                        variant: "ghost",
+                                                        size: "icon",
+                                                        className: "h-8 w-8",
+                                                        onClick: ()=>setAutopilotPrompt(''),
+                                                        disabled: !autopilotPrompt,
+                                                        "aria-label": "Clear prompt",
+                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Plus, {
+                                                            className: "h-4 w-4"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                                        variant: "ghost",
+                                                        size: "icon",
+                                                        className: "h-8 w-8",
+                                                        onClick: handleAutopilotSubmit,
+                                                        disabled: !autopilotPrompt.trim(),
+                                                        "aria-label": "Submit prompt",
+                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ArrowUp, {
+                                                            className: "h-4 w-4"
+                                                        })
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    autopilot.disclaimer && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "border-t border-border/20 px-6 py-3 text-center",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                            className: "text-xs text-muted-foreground",
+                                            children: autopilot.disclaimer
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(drawer_cjs_namespaceObject.Drawer, {
+                open: drawerOpen,
+                onOpenChange: setDrawerOpen,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(drawer_cjs_namespaceObject.DrawerContent, {
+                    className: "max-h-[75vh]",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(drawer_cjs_namespaceObject.DrawerHeader, {
+                            className: "border-b px-4 py-2 md:px-6 md:py-3",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                justify: "between",
+                                align: "start",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                        children: [
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(drawer_cjs_namespaceObject.DrawerTitle, {
+                                                className: "text-base md:text-lg",
+                                                children: "Explore templates"
+                                            }),
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(drawer_cjs_namespaceObject.DrawerDescription, {
+                                                className: "text-xs md:text-sm",
+                                                children: "Build, customise and deploy an Agentic Process starting from a template."
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(drawer_cjs_namespaceObject.DrawerClose, {
+                                        asChild: true,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(button_cjs_namespaceObject.Button, {
+                                            variant: "ghost",
+                                            size: "icon",
+                                            className: "h-7 w-7 md:h-8 md:w-8 shrink-0",
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
+                                                    className: "h-3 w-3 md:h-4 md:w-4"
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                    className: "sr-only",
+                                                    children: "Close"
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                            overflow: "hidden",
+                            className: "h-[calc(75vh-80px)]",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: "hidden w-56 border-r bg-muted/20 p-3 md:block",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                            className: "mb-3",
+                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                className: "relative",
+                                                children: [
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Search, {
+                                                        className: "absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground"
+                                                    }),
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                                                        placeholder: "Search",
+                                                        value: searchQuery,
+                                                        onChange: (e)=>setSearchQuery(e.target.value),
+                                                        className: "h-8 pl-7 text-xs"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Column, {
+                                            gap: 3,
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                    children: [
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                                            justify: "between",
+                                                            align: "center",
+                                                            className: "mb-1.5",
+                                                            children: [
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h4", {
+                                                                    className: "text-xs font-semibold",
+                                                                    children: "Category"
+                                                                }),
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                                                    variant: "ghost",
+                                                                    size: "sm",
+                                                                    className: "h-auto p-0 text-[10px]",
+                                                                    onClick: ()=>setSelectedCategories([]),
+                                                                    children: "Clear"
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(layout_index_cjs_namespaceObject.Column, {
+                                                            gap: 1.5,
+                                                            children: categories.map((category)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                                                    gap: 2,
+                                                                    align: "center",
+                                                                    children: [
+                                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(checkbox_cjs_namespaceObject.Checkbox, {
+                                                                            id: `category-${category.id}`,
+                                                                            checked: selectedCategories.includes(category.id),
+                                                                            onCheckedChange: ()=>toggleCategory(category.id),
+                                                                            className: "h-3 w-3"
+                                                                        }),
+                                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                                                            htmlFor: `category-${category.id}`,
+                                                                            className: "cursor-pointer text-xs font-normal",
+                                                                            children: category.label
+                                                                        })
+                                                                    ]
+                                                                }, category.id))
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                    children: [
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                                            justify: "between",
+                                                            align: "center",
+                                                            className: "mb-1.5",
+                                                            children: [
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h4", {
+                                                                    className: "text-xs font-semibold",
+                                                                    children: "Tool"
+                                                                }),
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                                                    variant: "ghost",
+                                                                    size: "sm",
+                                                                    className: "h-auto p-0 text-[10px]",
+                                                                    onClick: ()=>setSelectedTools([]),
+                                                                    children: "Clear"
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(layout_index_cjs_namespaceObject.Column, {
+                                                            gap: 1.5,
+                                                            children: tools.map((tool)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_index_cjs_namespaceObject.Row, {
+                                                                    gap: 2,
+                                                                    align: "center",
+                                                                    children: [
+                                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(checkbox_cjs_namespaceObject.Checkbox, {
+                                                                            id: `tool-${tool.id}`,
+                                                                            checked: selectedTools.includes(tool.id),
+                                                                            onCheckedChange: ()=>toggleTool(tool.id),
+                                                                            className: "h-3 w-3"
+                                                                        }),
+                                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                                                            htmlFor: `tool-${tool.id}`,
+                                                                            className: "cursor-pointer text-xs font-normal",
+                                                                            children: tool.label
+                                                                        })
+                                                                    ]
+                                                                }, tool.id))
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                                    variant: "link",
+                                                    size: "sm",
+                                                    className: "h-auto p-0 text-[10px]",
+                                                    children: "Show more"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: "flex-1 overflow-y-auto p-3 md:p-4",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                            className: "mb-3 md:hidden",
+                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                className: "relative",
+                                                children: [
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Search, {
+                                                        className: "absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+                                                    }),
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                                                        placeholder: "Search",
+                                                        value: searchQuery,
+                                                        onChange: (e)=>setSearchQuery(e.target.value),
+                                                        className: "pl-8 text-sm"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(layout_index_cjs_namespaceObject.Grid, {
+                                            gap: 3,
+                                            cols: 1,
+                                            className: "sm:grid-cols-2 lg:grid-cols-3",
+                                            children: filteredExamples.map((template)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ExampleCard, {
+                                                    template: template
+                                                }, template.id))
+                                        }),
+                                        0 === filteredExamples.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(layout_index_cjs_namespaceObject.Row, {
+                                            h: 32,
+                                            justify: "center",
+                                            align: "center",
+                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                                className: "text-sm text-muted-foreground",
+                                                children: "No templates found"
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+exports.NewProjectExample = __webpack_exports__.NewProjectExample;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "NewProjectExample"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});