@hanzo/ui 8.4.12 → 8.5.0

package/dist/gallery.cjs

@@ -75,7 +75,7 @@ const Gallery = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex'
                         const el = document.querySelector('[data-palette-selected]');
                         if (el)
                             el.setAttribute('data-palette-selected', v);
-                    }, children: [(0, jsx_runtime_1.jsx)(gui_1.CommandInput, {}), (0, jsx_runtime_1.jsxs)(gui_1.CommandList, { children: [(0, jsx_runtime_1.jsx)(gui_1.CommandEmpty, { children: "No results" }), (0, jsx_runtime_1.jsxs)(gui_1.CommandGroup, { heading: "Palette", children: [(0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "alpha", children: "alpha" }), (0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "beta", children: "beta" }), (0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "gamma", children: "gamma" })] })] })] }), (0, jsx_runtime_1.jsx)("span", { "data-palette-selected": "" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "overlay", children: [(0, jsx_runtime_1.jsx)(gui_1.Dialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_1.DialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.DialogTitle, { children: "Dialog title" }), (0, jsx_runtime_1.jsx)(gui_1.DialogDescription, { children: "Dialog description" })] }), (0, jsx_runtime_1.jsx)(gui_1.DialogFooter, { children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "sm", children: "OK" }) })] }) }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenu, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuTrigger, { children: "Menu" }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.PopoverTrigger, { children: "Popover" }), (0, jsx_runtime_1.jsx)(gui_1.PopoverContent, { children: "Popover content" })] }), (0, jsx_runtime_1.jsxs)(gui_1.Select, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectValue, { placeholder: "Select" }) }), (0, jsx_runtime_1.jsx)(gui_1.SelectContent, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectItem, { value: "x", index: 0, children: "Option" }) })] }), (0, jsx_runtime_1.jsx)(gui_1.TooltipProvider, { delay: 0, children: (0, jsx_runtime_1.jsxs)(gui_1.Tooltip, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.TooltipTrigger, { children: "Tooltip" }), (0, jsx_runtime_1.jsx)(gui_1.TooltipContent, { children: "Tooltip content" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_1.AlertDialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_1.AlertDialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.AlertDialogTitle, { children: "Alert title" }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialogDescription, { children: "Alert description" })] }), (0, jsx_runtime_1.jsxs)(gui_1.AlertDialogFooter, { children: [(0, jsx_runtime_1.jsx)(gui_1.AlertDialogCancel, { children: "Cancel" }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialogAction, { variant: "destructive", children: "Delete" })] })] }) }), (0, jsx_runtime_1.jsxs)(gui_1.HoverCard, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.HoverCardTrigger, { children: "Hover card" }), (0, jsx_runtime_1.jsx)(gui_1.HoverCardContent, { children: "Hover card content" })] }), (0, jsx_runtime_1.jsxs)(gui_1.ContextMenu, { children: [(0, jsx_runtime_1.jsx)(gui_1.ContextMenuTrigger, { children: "Context menu" }), (0, jsx_runtime_1.jsxs)(gui_1.ContextMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_1.ContextMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.ContextMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_1.ContextMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsx)(gui_1.Toaster, {})] }), (0, jsx_runtime_1.jsxs)(Section, { name: "layout", children: [(0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: { min: 240 }, gap: "$3", style: { width: '100%' }, "data-grid": "auto", children: [0, 1, 2, 3, 4, 5, 6].map((i) => ((0, jsx_runtime_1.jsxs)(gui_1.Card, { children: [(0, jsx_runtime_1.jsx)(gui_1.CardMedia, { ratio: 16 / 10, children: (0, jsx_runtime_1.jsx)("img", { src: SWATCH, alt: "" }) }), (0, jsx_runtime_1.jsxs)(gui_1.CardHeader, { children: [(0, jsx_runtime_1.jsxs)(gui_1.CardTitle, { children: ["Card ", i] }), (0, jsx_runtime_1.jsx)(gui_1.CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), (0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: { min: 160, max: 4 }, gap: "$3", style: { width: '100%' }, "data-grid": "capped", children: [0, 1, 2, 3, 4, 5].map((i) => ((0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsxs)(gui_1.CardContent, { children: ["cap ", i] }) }, i))) }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: { min: 900 }, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "wide" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "wide" }) })] }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: ['2fr', '1fr'], gap: "$3", style: { width: '100%' }, "data-grid": "list", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "2fr" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "1fr" }) })] }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: "repeat(3, 1fr)", gap: "$3", style: { width: '100%' }, "data-grid": "written", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "a" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "b" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "c" }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "short" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "short" }) })] }) }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: 3, rows: 2, gap: "$3", style: { width: '100%' }, "data-grid": "cells", children: [(0, jsx_runtime_1.jsx)(grid_1.Cell, { col: 2, "data-cell": "span2", children: (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "spans two" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { row: 2, "data-cell": "rows2", children: (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "spans two rows" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { "data-cell": "plain", children: (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { row: "2 / 4", "data-cell": "rowplaced", children: (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "placed down" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { col: "1 / -1", "data-cell": "full", children: (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "the whole row" }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { "data-grid": "growth", style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { "data-card": "lean", children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one line" }) }), (0, jsx_runtime_1.jsxs)(gui_1.Card, { "data-card": "fat", children: [(0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "two line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "three line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "four line" })] })] }), (0, jsx_runtime_1.jsx)(gui_1.Card, { interactive: true, "data-card": "interactive", children: (0, jsx_runtime_1.jsx)(gui_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Interactive card" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Section, { maxWidth: 600, "data-section": "demo", children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Section" }) }), (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { "data-button": "block-child", children: (0, jsx_runtime_1.jsx)("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] }), (0, jsx_runtime_1.jsx)(Section, { name: "workbench", children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', height: 220, width: '100%', maxWidth: 880, overflowX: 'auto' }, children: (0, jsx_runtime_1.jsx)(Workbench_1.Workbench, { left: { tabs: [{ id: 'files', title: 'Files', content: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "left" }) }] }, right: {
+                    }, children: [(0, jsx_runtime_1.jsx)(gui_1.CommandInput, {}), (0, jsx_runtime_1.jsxs)(gui_1.CommandList, { children: [(0, jsx_runtime_1.jsx)(gui_1.CommandEmpty, { children: "No results" }), (0, jsx_runtime_1.jsxs)(gui_1.CommandGroup, { heading: "Palette", children: [(0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "alpha", children: "alpha" }), (0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "beta", children: "beta" }), (0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "gamma", children: "gamma" })] })] })] }), (0, jsx_runtime_1.jsx)("span", { "data-palette-selected": "" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "overlay", children: [(0, jsx_runtime_1.jsx)(gui_1.Dialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_1.DialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.DialogTitle, { children: "Dialog title" }), (0, jsx_runtime_1.jsx)(gui_1.DialogDescription, { children: "Dialog description" })] }), (0, jsx_runtime_1.jsx)(gui_1.DialogFooter, { children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "sm", children: "OK" }) })] }) }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenu, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuTrigger, { children: "Menu" }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.PopoverTrigger, { children: "Popover" }), (0, jsx_runtime_1.jsx)(gui_1.PopoverContent, { children: "Popover content" })] }), (0, jsx_runtime_1.jsxs)(gui_1.Select, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectValue, { placeholder: "Select" }) }), (0, jsx_runtime_1.jsx)(gui_1.SelectContent, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectItem, { value: "x", index: 0, children: "Option" }) })] }), (0, jsx_runtime_1.jsx)(gui_1.TooltipProvider, { delay: 0, children: (0, jsx_runtime_1.jsxs)(gui_1.Tooltip, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.TooltipTrigger, { children: "Tooltip" }), (0, jsx_runtime_1.jsx)(gui_1.TooltipContent, { children: "Tooltip content" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_1.AlertDialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_1.AlertDialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.AlertDialogTitle, { children: "Alert title" }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialogDescription, { children: "Alert description" })] }), (0, jsx_runtime_1.jsxs)(gui_1.AlertDialogFooter, { children: [(0, jsx_runtime_1.jsx)(gui_1.AlertDialogCancel, { children: "Cancel" }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialogAction, { variant: "destructive", children: "Delete" })] })] }) }), (0, jsx_runtime_1.jsxs)(gui_1.HoverCard, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.HoverCardTrigger, { children: "Hover card" }), (0, jsx_runtime_1.jsx)(gui_1.HoverCardContent, { children: "Hover card content" })] }), (0, jsx_runtime_1.jsxs)(gui_1.ContextMenu, { children: [(0, jsx_runtime_1.jsx)(gui_1.ContextMenuTrigger, { children: "Context menu" }), (0, jsx_runtime_1.jsxs)(gui_1.ContextMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_1.ContextMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.ContextMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_1.ContextMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsx)(gui_1.Toaster, {})] }), (0, jsx_runtime_1.jsxs)(Section, { name: "layout", children: [(0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: { min: 240 }, gap: "$3", style: { width: '100%' }, "data-grid": "auto", children: [0, 1, 2, 3, 4, 5, 6].map((i) => ((0, jsx_runtime_1.jsxs)(gui_1.Card, { children: [(0, jsx_runtime_1.jsx)(gui_1.CardMedia, { ratio: 16 / 10, children: (0, jsx_runtime_1.jsx)("img", { src: SWATCH, alt: "" }) }), (0, jsx_runtime_1.jsxs)(gui_1.CardHeader, { children: [(0, jsx_runtime_1.jsxs)(gui_1.CardTitle, { children: ["Card ", i] }), (0, jsx_runtime_1.jsx)(gui_1.CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), (0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: { min: 160, max: 4 }, gap: "$3", style: { width: '100%' }, "data-grid": "capped", children: [0, 1, 2, 3, 4, 5].map((i) => ((0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsxs)(gui_1.CardContent, { children: ["cap ", i] }) }, i))) }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: { min: 900 }, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "wide" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "wide" }) })] }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: ['2fr', '1fr'], gap: "$3", style: { width: '100%' }, "data-grid": "list", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "2fr" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "1fr" }) })] }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: "repeat(3, 1fr)", gap: "$3", style: { width: '100%' }, "data-grid": "written", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "a" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "b" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "c" }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "short" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "short" }) })] }) }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: 3, rows: 2, gap: "$3", style: { width: '100%' }, "data-grid": "cells", children: [(0, jsx_runtime_1.jsx)(grid_1.Cell, { col: 2, "data-cell": "span2", children: (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "spans two" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { row: 2, "data-cell": "rows2", children: (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "spans two rows" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { "data-cell": "plain", children: (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { row: "2 / 4", "data-cell": "rowplaced", children: (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "placed down" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { col: "1 / -1", "data-cell": "full", children: (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "the whole row" }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { "data-grid": "growth", style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { "data-card": "lean", children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one line" }) }), (0, jsx_runtime_1.jsxs)(gui_1.Card, { "data-card": "fat", children: [(0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "two line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "three line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "four line" })] })] }), (0, jsx_runtime_1.jsx)(gui_1.Card, { interactive: true, "data-card": "interactive", children: (0, jsx_runtime_1.jsx)(gui_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Interactive card" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Band, { measure: 600, "data-section": "demo", children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Section" }) }), (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { "data-button": "block-child", children: (0, jsx_runtime_1.jsx)("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] }), (0, jsx_runtime_1.jsx)(Section, { name: "workbench", children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', height: 220, width: '100%', maxWidth: 880, overflowX: 'auto' }, children: (0, jsx_runtime_1.jsx)(Workbench_1.Workbench, { left: { tabs: [{ id: 'files', title: 'Files', content: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "left" }) }] }, right: {
                         tabs: [
                             { id: 'chat', title: 'Side chat', content: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "chat" }) },
                             { id: 'browser', title: 'Browser', content: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "browser" }) },